@salesmind-ai/design-system 0.2.1 → 0.3.0

package/dist/sections/index.css

@@ -0,0 +1,818 @@
+/* src/components/LayoutPrimitives/LayoutPrimitives.css */
+.ds-box {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+}
+.ds-stack {
+  display: flex;
+  flex-direction: column;
+}
+.ds-stack--horizontal {
+  flex-direction: row;
+}
+.ds-grid {
+  display: grid;
+}
+.ds-grid--cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+.ds-grid--cols-2 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+.ds-grid--cols-3 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ds-grid--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.ds-grid--cols-4 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ds-grid--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.ds-grid--cols-5 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-5 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .ds-grid--cols-5 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1280px) {
+  .ds-grid--cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+.ds-grid--cols-6 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1280px) {
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+@media (min-width: 1920px) {
+  .ds-grid--cols-3:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 2560px) {
+  .ds-grid--cols-2:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ds-grid--cols-3:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .ds-grid--cols-4:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .ds-grid--cols-5:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .ds-grid--cols-6:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+@media (min-width: 3840px) {
+  .ds-grid--cols-2:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ds-grid--cols-3:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .ds-grid--cols-4:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .ds-grid--cols-5:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(8, 1fr);
+  }
+  .ds-grid--cols-6:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(10, 1fr);
+  }
+}
+:root {
+  --container-default-max: 1200px;
+}
+@media (min-width: 1537px) {
+  :root {
+    --container-default-max: 1400px;
+  }
+}
+@media (min-width: 1921px) {
+  :root {
+    --container-default-max: 1600px;
+  }
+}
+@media (min-width: 2561px) {
+  :root {
+    --container-default-max: 1920px;
+  }
+}
+.ds-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--container-padding-x, var(--space-4));
+  padding-right: var(--container-padding-x, var(--space-4));
+}
+@media (min-width: 1537px) {
+  .ds-container {
+    --container-padding-x: var(--space-6);
+  }
+}
+@media (min-width: 2561px) {
+  .ds-container {
+    --container-padding-x: var(--space-8);
+  }
+}
+.ds-section-block {
+  position: relative;
+}
+.ds-section-block--none {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.ds-section-block--sm {
+  padding-top: var(--space-8, 2rem);
+  padding-bottom: var(--space-8, 2rem);
+}
+.ds-section-block--md {
+  padding-top: var(--space-16, 4rem);
+  padding-bottom: var(--space-16, 4rem);
+}
+@media (min-width: 768px) {
+  .ds-section-block--md {
+    padding-top: var(--space-24, 6rem);
+    padding-bottom: var(--space-24, 6rem);
+  }
+}
+.ds-section-block--lg {
+  padding-top: var(--space-24, 6rem);
+  padding-bottom: var(--space-24, 6rem);
+}
+@media (min-width: 768px) {
+  .ds-section-block--lg {
+    padding-top: var(--space-32, 8rem);
+    padding-bottom: var(--space-32, 8rem);
+  }
+}
+.ds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* src/components/SectionShell/SectionShell.css */
+.ds-section {
+  position: relative;
+  width: 100%;
+  padding: var(--space-16) 0;
+  box-sizing: border-box;
+}
+.ds-section--bg-default {
+  background-color: transparent;
+}
+.ds-section--bg-muted {
+  background-color: var(--surface-alpha-1);
+}
+.ds-section--bg-brand {
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      rgba(var(--brand-pink-rgb), 0.15),
+      transparent 70%);
+}
+.ds-section--padding-none {
+  padding: 0;
+}
+.ds-section--padding-sm {
+  padding: var(--space-8) 0;
+}
+.ds-section--padding-md {
+  padding: var(--space-16) 0;
+}
+.ds-section--padding-lg {
+  padding: var(--space-20) 0;
+}
+.ds-section-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.ds-section-header--center {
+  text-align: center;
+  align-items: center;
+}
+.ds-section-header--left {
+  text-align: left;
+  align-items: flex-start;
+}
+.ds-section-header--right {
+  text-align: right;
+  align-items: flex-end;
+}
+.ds-section-header__eyebrow {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--brand-pink);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-medium);
+}
+.ds-section-header__title {
+  font-family: var(--font-family);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+  margin: 0;
+}
+.ds-section-header__subtitle {
+  font-family: var(--font-family);
+  font-size: var(--font-size-lg);
+  color: var(--text-secondary);
+  max-width: 65ch;
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+@media (max-width: 768px) {
+  .ds-section {
+    padding: var(--space-10) 0;
+  }
+  .ds-section--padding-lg {
+    padding: var(--space-12) 0;
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-2xl);
+  }
+}
+@media (min-width: 1920px) {
+  .ds-section {
+    padding: var(--space-20) 0;
+  }
+  .ds-section--padding-sm {
+    padding: var(--space-10) 0;
+  }
+  .ds-section--padding-md {
+    padding: var(--space-20) 0;
+  }
+  .ds-section--padding-lg {
+    padding: calc(var(--space-20) * 1.25) 0;
+  }
+  .ds-section-header {
+    margin-bottom: var(--space-16);
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-4xl);
+  }
+}
+@media (min-width: 2560px) {
+  .ds-section {
+    padding: calc(var(--space-20) * 1.5) 0;
+  }
+  .ds-section--padding-lg {
+    padding: calc(var(--space-20) * 1.75) 0;
+  }
+  .ds-section-header {
+    margin-bottom: var(--space-20);
+    gap: var(--space-6);
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-5xl);
+  }
+  .ds-section-header__subtitle {
+    font-size: var(--font-size-xl);
+  }
+}
+@media (min-width: 3840px) {
+  .ds-section {
+    padding: calc(var(--space-20) * 2) 0;
+  }
+  .ds-section--padding-lg {
+    padding: calc(var(--space-20) * 2.5) 0;
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-6xl);
+  }
+}
+
+/* src/components/HeroSection/HeroSection.css */
+.ds-hero {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+.ds-hero--bg-grid::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(
+      to right,
+      var(--void-grid-color) 1px,
+      transparent 1px),
+    linear-gradient(
+      to bottom,
+      var(--void-grid-color) 1px,
+      transparent 1px);
+  mask-image:
+    radial-gradient(
+      circle at 50% 50%,
+      black 40%,
+      transparent 100%);
+  z-index: -2;
+  pointer-events: none;
+}
+.ds-hero--bg-glow::after {
+  content: "";
+  position: absolute;
+  top: -20%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 140%;
+  height: 80%;
+  background:
+    radial-gradient(
+      ellipse at center,
+      rgba(var(--brand-pink-rgb), 0.15),
+      transparent 70%);
+  filter: blur(60px);
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.8;
+}
+@keyframes ds-hero-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ds-hero__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  z-index: 2;
+  position: relative;
+  animation: ds-hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.ds-hero__title {
+  font-family: var(--font-family);
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: var(--line-height-display);
+  letter-spacing: var(--letter-spacing-tight);
+  margin: 0;
+}
+.ds-hero__title em,
+.ds-hero__title span.highlight {
+  font-style: normal;
+  background:
+    linear-gradient(
+      135deg,
+      var(--text-primary) 30%,
+      var(--text-tertiary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: var(--text-primary);
+}
+.ds-hero__subtitle {
+  font-family: var(--font-family);
+  font-size: var(--font-size-lg);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  max-width: 60ch;
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .ds-hero__subtitle {
+    font-size: var(--font-size-xl);
+  }
+}
+.ds-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  margin-top: var(--space-4);
+}
+.ds-hero--center .ds-hero__actions {
+  justify-content: center;
+}
+.ds-hero__media-wrapper {
+  position: relative;
+  perspective: 1000px;
+  animation: ds-hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
+  opacity: 0;
+}
+.ds-hero__media {
+  position: relative;
+  width: 100%;
+  border-radius: var(--radius-panel);
+  overflow: hidden;
+  background: var(--glass-base);
+  box-shadow: 0 20px 50px -10px var(--overlay-backdrop), 0 0 0 1px var(--glass-highlight-light);
+  transform-style: preserve-3d;
+}
+.ds-hero__media--browser::before {
+  content: "";
+  display: block;
+  height: 32px;
+  background: var(--glass-base-active);
+  border-bottom: 1px solid var(--glass-base-active);
+  background-image:
+    radial-gradient(
+      circle at 20px 16px,
+      #ff5f57 4px,
+      transparent 5px),
+    radial-gradient(
+      circle at 36px 16px,
+      #febc2e 4px,
+      transparent 5px),
+    radial-gradient(
+      circle at 52px 16px,
+      #28c840 4px,
+      transparent 5px);
+  background-repeat: no-repeat;
+}
+.ds-hero__media img,
+.ds-hero__media video {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.ds-hero__float {
+  position: absolute;
+  z-index: 3;
+  animation: ds-hero-float 6s ease-in-out infinite;
+  box-shadow: var(--glass-shadow-elevated);
+  border-radius: var(--radius-card);
+  max-width: 300px;
+}
+@keyframes ds-hero-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+.ds-hero__float--top-right {
+  top: -20px;
+  right: -20px;
+}
+.ds-hero__float--bottom-left {
+  bottom: -20px;
+  left: -20px;
+}
+@media (max-width: 768px) {
+  .ds-hero__float {
+    display: none;
+  }
+}
+.ds-hero--center .ds-hero__content {
+  align-items: center;
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto var(--space-16) auto;
+}
+.ds-hero--split .ds-hero__media-wrapper {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.ds-hero--left .ds-hero__content {
+  align-items: flex-start;
+  text-align: left;
+}
+@media (min-width: 1920px) {
+  .ds-hero__content {
+    gap: var(--space-8);
+  }
+  .ds-hero__subtitle {
+    font-size: var(--font-size-xl);
+    max-width: 65ch;
+  }
+  .ds-hero__actions {
+    gap: var(--space-5);
+    margin-top: var(--space-6);
+  }
+  .ds-hero--center .ds-hero__content {
+    max-width: 1000px;
+    margin-bottom: var(--space-20);
+  }
+}
+@media (min-width: 2560px) {
+  .ds-hero__content {
+    gap: var(--space-10);
+  }
+  .ds-hero__subtitle {
+    font-size: var(--font-size-2xl);
+    max-width: 70ch;
+  }
+  .ds-hero__actions {
+    gap: var(--space-6);
+    margin-top: var(--space-8);
+  }
+  .ds-hero--center .ds-hero__content {
+    max-width: 1100px;
+  }
+  .ds-hero__float {
+    max-width: 400px;
+  }
+}
+
+/* src/components/FeatureSection/FeatureSection.css */
+.ds-feature-section {
+  position: relative;
+}
+.ds-feature-grid {
+  display: grid;
+  gap: var(--space-8);
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .ds-feature-grid--2-col {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .ds-feature-grid--3-col {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ds-feature-grid--4-col {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ds-feature-grid--4-col {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.ds-feature-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border-radius: var(--radius-card);
+  background: var(--glass-base);
+  border: 1px solid var(--rim-light-bottom);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+.ds-feature-card:hover {
+  transform: translateY(-2px);
+  background: var(--glass-base-hover);
+  box-shadow: var(--glass-shadow-elevated);
+  border-color: var(--rim-light-top);
+}
+.ds-feature-card__icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-button);
+  background: rgba(var(--brand-pink-rgb), 0.1);
+  color: var(--brand-pink);
+  margin-bottom: var(--space-2);
+}
+.ds-feature-card__title {
+  font-family: var(--font-family);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+}
+.ds-feature-card__description {
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+.ds-feature-zigzag {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+.ds-feature-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-8);
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .ds-feature-row {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-16);
+  }
+  .ds-feature-row:nth-child(even) .ds-feature-row__content {
+    order: 2;
+  }
+  .ds-feature-row:nth-child(even) .ds-feature-row__media {
+    order: 1;
+  }
+}
+.ds-feature-row__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.ds-feature-row__media {
+  position: relative;
+  border-radius: var(--radius-panel);
+  overflow: hidden;
+  box-shadow: var(--glass-shadow-elevated);
+  border: 1px solid var(--rim-light-top);
+  background: var(--glass-base);
+}
+.ds-feature-row__media img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.ds-feature-row__step {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--brand-pink);
+  background: rgba(var(--brand-pink-rgb), 0.1);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-pill);
+  align-self: flex-start;
+  margin-bottom: var(--space-2);
+}
+
+/* src/components/CTASection/CTASection.css */
+.ds-cta-section {
+  overflow: hidden;
+}
+.ds-cta-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  max-width: 800px;
+  margin: 0 auto;
+}
+.ds-cta-section--center .ds-cta-content {
+  align-items: center;
+  text-align: center;
+}
+.ds-cta-section--split {
+  display: grid;
+  gap: var(--space-8);
+}
+@media (min-width: 768px) {
+  .ds-cta-section--split {
+    grid-template-columns: 3fr 2fr;
+    align-items: center;
+  }
+}
+.ds-cta-title {
+  font-family: var(--font-family);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+  margin: 0;
+}
+.ds-cta-description {
+  font-family: var(--font-family);
+  font-size: var(--font-size-lg);
+  color: var(--text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+.ds-cta-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  margin-top: var(--space-2);
+}
+.ds-cta-section--center .ds-cta-actions {
+  justify-content: center;
+}
+.ds-cta-section--split .ds-cta-actions {
+  justify-content: flex-end;
+}
+@media (min-width: 768px) {
+  .ds-cta-section--split .ds-cta-actions {
+    margin-top: 0;
+    justify-content: flex-end;
+  }
+}
+.ds-cta-card {
+  background: var(--glass-base);
+  border: 1px solid var(--rim-light-top);
+  border-radius: var(--radius-panel);
+  padding: var(--space-12) var(--space-8);
+  box-shadow: var(--glass-shadow-elevated);
+  position: relative;
+  overflow: hidden;
+}
+.ds-section--bg-brand .ds-cta-card {
+  background: rgba(var(--brand-pink-rgb), 0.1);
+  border-color: rgba(var(--brand-pink-rgb), 0.3);
+}
+
+/* src/components/StatsSection/StatsSection.css */
+.ds-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-8);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .ds-stats-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-12);
+  }
+}
+.ds-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  text-align: center;
+  padding: var(--space-6);
+  border-radius: var(--radius-card);
+  background: var(--glass-base);
+  border: 1px solid var(--rim-light-bottom);
+  transition: transform var(--transition-base);
+}
+.ds-stat-card:hover {
+  transform: translateY(-2px);
+  background: var(--glass-base-hover);
+  border-color: var(--rim-light-top);
+}
+.ds-stat-value {
+  font-family: var(--font-family);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: 1;
+  letter-spacing: var(--letter-spacing-tight);
+}
+@media (min-width: 768px) {
+  .ds-stat-value {
+    font-size: var(--font-size-5xl);
+  }
+}
+.ds-stat-label {
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+.ds-stat-suffix {
+  font-size: var(--font-size-suffix);
+  color: var(--brand-pink);
+  vertical-align: super;
+  margin-left: var(--space-1);
+}
+/*# sourceMappingURL=index.css.map */