@salesmind-ai/design-system 0.2.0 → 0.3.0

package/dist/motion/index.css

@@ -0,0 +1,699 @@
+/* src/components/CursorSpotlight/CursorSpotlight.css */
+.ds-cursor-spotlight {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-card);
+}
+.ds-cursor-spotlight__glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  opacity: var(--spotlight-opacity, 0);
+  transition: opacity var(--transition-base);
+  background:
+    radial-gradient(
+      var(--spotlight-size) circle at var(--spotlight-x) var(--spotlight-y),
+      var(--spotlight-color),
+      transparent 40%);
+}
+.ds-cursor-spotlight__border {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  border-radius: inherit;
+  opacity: var(--spotlight-opacity, 0);
+  transition: opacity var(--transition-base);
+  background:
+    radial-gradient(
+      calc(var(--spotlight-size) * 0.6) circle at var(--spotlight-x) var(--spotlight-y),
+      var(--spotlight-border-color),
+      transparent 40%);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  padding: var(--space-px);
+}
+.ds-cursor-spotlight__content {
+  position: relative;
+  z-index: 3;
+  height: 100%;
+}
+.ds-spotlight-card {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  -webkit-backdrop-filter: var(--glass-backdrop);
+}
+.ds-spotlight-card__inner {
+  padding: var(--space-6);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.ds-spotlight-card__inner[role=button] {
+  cursor: pointer;
+}
+.ds-spotlight-card__inner[role=button]:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-card);
+}
+.ds-spotlight-card__icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--space-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-button);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: rgb(var(--accent-rgb));
+}
+.ds-spotlight-card__icon svg {
+  width: 24px;
+  height: 24px;
+}
+.ds-spotlight-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 0 var(--space-2);
+}
+.ds-spotlight-card__description {
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  margin: 0;
+  line-height: var(--line-height-normal);
+}
+.ds-cursor-spotlight[data-hovering=true] {
+  transform: translateY(-2px);
+  transition: transform var(--transition-glass);
+}
+.ds-cursor-spotlight:not([data-hovering=true]) {
+  transform: translateY(0);
+  transition: transform var(--transition-glass);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-cursor-spotlight__glow,
+  .ds-cursor-spotlight__border {
+    transition: none;
+  }
+  .ds-cursor-spotlight {
+    transform: none !important;
+    transition: none;
+  }
+}
+@media (prefers-contrast: more) {
+  .ds-spotlight-card {
+    border: 1px solid var(--hc-border-subtle);
+  }
+  .ds-cursor-spotlight__glow,
+  .ds-cursor-spotlight__border {
+    display: none;
+  }
+}
+
+/* src/components/HeroAnimation/RevenueAutomationLoop.css */
+.ds-revenue-loop {
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+.ds-revenue-loop__circle {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.ds-revenue-loop__ring {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.ds-revenue-loop__track {
+  opacity: 0.3;
+}
+.ds-revenue-loop__hub {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: var(--glass-base-active);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--rim-light-top);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: var(--glass-shadow-elevated);
+}
+.ds-revenue-loop__hub-glow {
+  position: absolute;
+  inset: -20px;
+  background:
+    radial-gradient(
+      circle,
+      var(--brand-pink-glow) 0%,
+      transparent 70%);
+  opacity: 0.5;
+  z-index: -1;
+  animation: pulse 4s ease-in-out infinite;
+}
+.ds-revenue-loop__logo {
+  font-size: var(--font-size-3xl);
+  font-weight: bold;
+  background:
+    linear-gradient(
+      135deg,
+      var(--brand-pink),
+      var(--brand-yellow));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.ds-revenue-loop__node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  text-align: center;
+  width: 140px;
+}
+.ds-revenue-loop__icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--glass-base-active);
+  border: 1px solid var(--rim-light-top);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+  box-shadow: var(--shadow-interactive-rest);
+  transition: all 0.3s ease;
+}
+.ds-revenue-loop__node:hover .ds-revenue-loop__icon {
+  border-color: var(--brand-pink);
+  box-shadow: 0 0 20px var(--brand-pink-glow);
+  transform: scale(1.1);
+  color: var(--brand-pink);
+}
+.ds-revenue-loop__label {
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  background: var(--glass-base);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--rim-light-bottom);
+  backdrop-filter: blur(8px);
+}
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.3;
+  }
+}
+
+/* src/components/FunnelScalingSender/FunnelScalingSender.css */
+.ds-funnel-scaling {
+  --fsc-duration-xs: 0.3s;
+  --fsc-duration-sm: 0.4s;
+  --fsc-duration-md: 0.6s;
+  --fsc-duration-lg: 0.8s;
+  --fsc-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
+  --fsc-ease-linear: linear;
+  --fsc-stagger-sm: 0.08s;
+  --fsc-stagger-md: 0.12s;
+  --fsc-bg: var(--void-base);
+  --fsc-grid-color: var(--surface-alpha-1);
+  --fsc-stroke-muted: var(--surface-alpha-2);
+  --fsc-text-muted: var(--text-tertiary);
+  --fsc-text-dim: var(--text-disabled);
+}
+.ds-funnel-scaling {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  aspect-ratio: 16 / 9;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: var(--radius-card);
+  font-family: var(--font-family);
+}
+.ds-funnel-scaling__bg {
+  position: absolute;
+  inset: 0;
+  background: var(--fsc-bg);
+  z-index: 0;
+}
+.ds-funnel-scaling__grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--fsc-grid-color) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      var(--fsc-grid-color) 1px,
+      transparent 1px);
+  background-size: 40px 40px;
+  z-index: 1;
+}
+.ds-funnel-scaling__canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: 260px 1fr 240px;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--space-4);
+  padding: var(--space-6);
+}
+.ds-funnel-scaling__winning-card {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+  background: var(--glass-base);
+  border: 1px solid var(--fsc-stroke-muted);
+  border-radius: var(--radius-card);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  backdrop-filter: blur(12px);
+  align-self: start;
+}
+.ds-funnel-scaling__winning-header {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--brand-pink);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wider);
+}
+.ds-funnel-scaling__winning-title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+}
+.ds-funnel-scaling__winning-bullets {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.ds-funnel-scaling__winning-bullet {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--fsc-text-muted);
+  line-height: 1.4;
+}
+.ds-funnel-scaling__winning-bullet::before {
+  content: "";
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  margin-top: var(--space-1);
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      135deg,
+      var(--brand-pink),
+      var(--brand-yellow));
+}
+.ds-funnel-scaling__winning-lock {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--status-success);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  margin-top: var(--space-1);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--fsc-stroke-muted);
+}
+.ds-funnel-scaling__winning-lock svg {
+  width: 12px;
+  height: 12px;
+}
+.ds-funnel-scaling__ant {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  z-index: 20;
+  filter: drop-shadow(0 0 6px var(--brand-pink-glow));
+}
+.ds-funnel-scaling__ant--ghost {
+  opacity: 0.35;
+  filter: drop-shadow(0 0 4px var(--brand-pink-glow));
+}
+.ds-funnel-scaling__ant-svg {
+  width: 100%;
+  height: 100%;
+}
+.ds-funnel-scaling__flow {
+  grid-column: 2 / 3;
+  grid-row: 1 / 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  align-self: start;
+  padding-top: var(--space-2);
+}
+.ds-funnel-scaling__flow-node {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  background: var(--glass-base);
+  border: 1px solid var(--fsc-stroke-muted);
+  border-radius: var(--radius-button);
+  min-width: 220px;
+  transform-origin: center top;
+}
+.ds-funnel-scaling__flow-node--active {
+  border-color: rgba(var(--accent-rgb), 0.3);
+  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.08);
+}
+.ds-funnel-scaling__flow-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--brand-pink);
+  opacity: 0.7;
+}
+.ds-funnel-scaling__flow-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+.ds-funnel-scaling__flow-connector {
+  width: 2px;
+  height: 12px;
+  overflow: visible;
+}
+.ds-funnel-scaling__qualification {
+  grid-column: 2 / 3;
+  grid-row: 2 / 4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  align-self: end;
+  padding-bottom: var(--space-2);
+}
+.ds-funnel-scaling__qual-ring {
+  position: relative;
+  width: 180px;
+  height: 180px;
+}
+.ds-funnel-scaling__qual-ring svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.ds-funnel-scaling__qual-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-6);
+}
+.ds-funnel-scaling__qual-text {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--fsc-text-dim);
+  line-height: 1.4;
+}
+.ds-funnel-scaling__qual-blocks {
+  display: flex;
+  gap: var(--space-3);
+  width: 100%;
+  justify-content: center;
+}
+.ds-funnel-scaling__qual-block {
+  padding: var(--space-2) var(--space-3);
+  background: var(--glass-base);
+  border: 1px solid var(--fsc-stroke-muted);
+  border-radius: var(--radius-badge);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+.ds-funnel-scaling__meeting {
+  position: absolute;
+  bottom: var(--space-6);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-5);
+  background:
+    linear-gradient(
+      135deg,
+      rgba(var(--accent-rgb), 0.12),
+      rgba(var(--accent-secondary-rgb), 0.12));
+  border: 1px solid rgba(var(--accent-rgb), 0.25);
+  border-radius: var(--radius-button);
+  z-index: 10;
+}
+.ds-funnel-scaling__meeting-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--brand-pink);
+}
+.ds-funnel-scaling__meeting-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+}
+.ds-funnel-scaling__data-line {
+  position: absolute;
+  z-index: 5;
+  overflow: visible;
+  pointer-events: none;
+}
+.ds-funnel-scaling__funnel {
+  grid-column: 3 / 4;
+  grid-row: 1 / 4;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  align-self: center;
+}
+.ds-funnel-scaling__funnel-stage {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-badge);
+  background: var(--glass-base);
+  border: 1px solid var(--fsc-stroke-muted);
+  transition: opacity 0.4s var(--fsc-ease-premium);
+}
+.ds-funnel-scaling__funnel-stage--dim {
+  opacity: 0.5;
+}
+.ds-funnel-scaling__funnel-stage--highlight {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(var(--accent-rgb), 0.15),
+      rgba(var(--accent-secondary-rgb), 0.15));
+  border-color: rgba(var(--accent-rgb), 0.25);
+}
+.ds-funnel-scaling__funnel-num {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--glass-base-active);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-bold);
+  color: var(--fsc-text-muted);
+  flex-shrink: 0;
+}
+.ds-funnel-scaling__funnel-stage--highlight .ds-funnel-scaling__funnel-num {
+  background:
+    linear-gradient(
+      135deg,
+      var(--brand-pink),
+      var(--brand-yellow));
+  color: var(--btn-primary-text);
+}
+.ds-funnel-scaling__funnel-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+}
+.ds-funnel-scaling__funnel-header {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--fsc-text-dim);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+  margin-bottom: var(--space-2);
+  padding-left: var(--space-1);
+}
+.ds-funnel-scaling__scaling-panel {
+  position: absolute;
+  bottom: var(--space-6);
+  right: var(--space-6);
+  background: var(--glass-base);
+  border: 1px solid rgba(var(--status-success-rgb), 0.15);
+  border-radius: var(--radius-card);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  z-index: 15;
+  min-width: 200px;
+  backdrop-filter: blur(12px);
+}
+.ds-funnel-scaling__scaling-header {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  color: var(--status-success);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ds-funnel-scaling__scaling-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--fsc-text-muted);
+}
+.ds-funnel-scaling__scaling-check {
+  width: 14px;
+  height: 14px;
+  color: var(--status-success);
+  flex-shrink: 0;
+}
+@keyframes fsc-orbit {
+  from {
+    transform: rotate(0deg) translateX(70px) rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg) translateX(70px) rotate(-360deg);
+  }
+}
+.ds-funnel-scaling__swarm-ant {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  animation: fsc-orbit 3s var(--fsc-ease-linear) infinite;
+  filter: drop-shadow(0 0 4px var(--brand-pink-glow));
+}
+.ds-funnel-scaling__swarm-ant:nth-child(2) {
+  animation-delay: -1s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(3) {
+  animation-delay: -2s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(4) {
+  animation-delay: -0.375s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(5) {
+  animation-delay: -0.75s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(6) {
+  animation-delay: -1.125s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(7) {
+  animation-delay: -1.5s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(8) {
+  animation-delay: -1.875s;
+}
+.ds-funnel-scaling__swarm-ant:nth-child(9) {
+  animation-delay: -2.25s;
+}
+@keyframes fsc-glow-pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.08);
+  }
+}
+.ds-funnel-scaling__meeting::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      135deg,
+      var(--brand-pink-glow),
+      rgba(var(--accent-secondary-rgb), 0.2));
+  z-index: -1;
+  animation: fsc-glow-pulse 2s ease-in-out infinite;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-funnel-scaling__swarm-ant {
+    animation: none;
+  }
+  .ds-funnel-scaling__meeting::before {
+    animation: none;
+    opacity: 0.3;
+  }
+  .ds-funnel-scaling *,
+  .ds-funnel-scaling *::before,
+  .ds-funnel-scaling *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+@media (prefers-contrast: more) {
+  .ds-funnel-scaling__winning-card,
+  .ds-funnel-scaling__flow-node,
+  .ds-funnel-scaling__qual-block,
+  .ds-funnel-scaling__funnel-stage,
+  .ds-funnel-scaling__scaling-panel {
+    border-color: var(--hc-border);
+  }
+}
+/*# sourceMappingURL=index.css.map */