@yca-software/yca-react-core 0.0.1

package/dist/theme/marketing.css

@@ -0,0 +1,750 @@
+/**
+ * Marketing blocks — namespaced utilities (`ds-mkt-*`).
+ * Importing `@yca-software/design-system/styles.css` enables these classes.
+ */
+@keyframes ds-mkt-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes ds-mkt-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ds-mkt-gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes ds-mkt-aurora-drift {
+  0% {
+    transform: translate(-48%, -42%) scale(1) rotate(0deg);
+    opacity: 0.55;
+  }
+
+  33% {
+    transform: translate(-42%, -48%) scale(1.12) rotate(8deg);
+    opacity: 0.8;
+  }
+
+  66% {
+    transform: translate(-52%, -38%) scale(1.05) rotate(-6deg);
+    opacity: 0.65;
+  }
+
+  100% {
+    transform: translate(-48%, -42%) scale(1) rotate(0deg);
+    opacity: 0.55;
+  }
+}
+
+@keyframes ds-mkt-aurora-drift-slow {
+  0% {
+    transform: translate(20%, 10%) scale(1.1);
+    opacity: 0.35;
+  }
+
+  50% {
+    transform: translate(-15%, 25%) scale(1.2);
+    opacity: 0.55;
+  }
+
+  100% {
+    transform: translate(20%, 10%) scale(1.1);
+    opacity: 0.35;
+  }
+}
+
+@keyframes ds-mkt-grid-pan {
+  0% {
+    background-position:
+      0 0,
+      0 0;
+  }
+
+  100% {
+    background-position:
+      56px 56px,
+      56px 56px;
+  }
+}
+
+@keyframes ds-mkt-split-sheen {
+  0% {
+    transform: translateX(-120%) skewX(-12deg);
+    opacity: 0;
+  }
+
+  15% {
+    opacity: 0.4;
+  }
+
+  50% {
+    transform: translateX(120%) skewX(-12deg);
+    opacity: 0.25;
+  }
+
+  100% {
+    transform: translateX(120%) skewX(-12deg);
+    opacity: 0;
+  }
+}
+
+@keyframes ds-mkt-cta-shimmer {
+  0%,
+  100% {
+    background-position: 0% 40%;
+  }
+
+  50% {
+    background-position: 100% 60%;
+  }
+}
+
+.ds-mkt-gradient-bg {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(
+      ellipse 85% 55% at 50% -15%,
+      color-mix(in oklch, var(--primary) 22%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 100% 15%,
+      color-mix(in oklch, var(--ring) 14%, transparent),
+      transparent
+    );
+}
+
+.ds-mkt-media-float {
+  animation: ds-mkt-float 5.5s ease-in-out infinite;
+}
+
+.ds-mkt-fade-up {
+  animation: ds-mkt-fade-up 0.85s ease-out both;
+}
+
+.ds-mkt-stat-pop {
+  animation: ds-mkt-fade-up 0.65s ease-out both;
+}
+
+.ds-mkt-cta-gradient {
+  background-image: linear-gradient(
+    125deg,
+    color-mix(in oklch, var(--primary) 18%, var(--background)),
+    color-mix(in oklch, var(--accent) 35%, var(--background)),
+    color-mix(in oklch, var(--primary) 14%, var(--background))
+  );
+  background-size: 200% 200%;
+  animation: ds-mkt-gradient-shift 14s ease infinite;
+}
+
+/** CTA band: soft ambient layer + optional aurora (use with `.ds-mkt-cta-panel` inside) */
+.ds-mkt-cta-shell {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background-color: var(--background);
+}
+
+.ds-mkt-cta-shell::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 70% 55% at 15% 20%,
+      color-mix(in oklch, var(--primary) 16%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 92% 75%,
+      color-mix(in oklch, var(--accent) 14%, transparent),
+      transparent 52%
+    ),
+    linear-gradient(
+      165deg,
+      color-mix(in oklch, var(--muted) 25%, var(--background)) 0%,
+      var(--background) 55%,
+      color-mix(in oklch, var(--primary) 6%, var(--background)) 100%
+    );
+}
+
+.ds-mkt-cta-shell::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 35%;
+  width: min(100%, 720px);
+  height: min(60vh, 420px);
+  translate: -50% -50%;
+  z-index: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    circle closest-side,
+    color-mix(in oklch, var(--primary) 28%, transparent),
+    transparent 72%
+  );
+  filter: blur(56px);
+  opacity: 0.55;
+  animation: ds-mkt-cta-aurora 18s ease-in-out infinite;
+}
+
+@keyframes ds-mkt-cta-aurora {
+  0%,
+  100% {
+    opacity: 0.45;
+    transform: translate(-50%, -48%) scale(1);
+  }
+
+  50% {
+    opacity: 0.65;
+    transform: translate(-50%, -52%) scale(1.08);
+  }
+}
+
+/** Frosted card sitting on the CTA band */
+.ds-mkt-cta-panel {
+  position: relative;
+  z-index: 1;
+  border-radius: calc(var(--radius) + 14px);
+  border: 1px solid color-mix(in oklch, var(--border) 55%, transparent);
+  background: color-mix(in oklch, var(--card) 78%, transparent);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  box-shadow:
+    0 28px 64px -28px color-mix(in oklch, var(--foreground) 22%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--foreground) 6%, transparent) inset,
+    0 1px 0 color-mix(in oklch, var(--primary-foreground) 12%, transparent) inset;
+}
+
+/** Solid variant band (no gradient shell animation) */
+.ds-mkt-cta-solid-shell {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--primary) 100%, transparent) 0%,
+    color-mix(in oklch, var(--primary) 88%, var(--foreground)) 100%
+  );
+}
+
+.ds-mkt-cta-solid-shell::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.35;
+  background: radial-gradient(
+    ellipse 80% 60% at 50% 0%,
+    color-mix(in oklch, var(--primary-foreground) 25%, transparent),
+    transparent 55%
+  );
+}
+
+.ds-mkt-cta-solid-panel {
+  position: relative;
+  z-index: 1;
+  border-radius: calc(var(--radius) + 14px);
+  border: 1px solid color-mix(in oklch, var(--primary-foreground) 18%, transparent);
+  background: color-mix(in oklch, var(--primary) 22%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow:
+    0 20px 50px -20px color-mix(in oklch, var(--foreground) 35%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--primary-foreground) 15%, transparent);
+}
+
+/** Bento tile: accent rail + depth (prefer over stacking generic elevated + bento-cell) */
+.ds-mkt-bento-tile {
+  position: relative;
+  overflow: hidden;
+  border-radius: calc(var(--radius) + 10px);
+  border: 1px solid color-mix(in oklch, var(--border) 48%, transparent);
+  background: linear-gradient(
+    168deg,
+    color-mix(in oklch, var(--card) 100%, transparent) 0%,
+    color-mix(in oklch, var(--muted) 38%, var(--card)) 100%
+  );
+  box-shadow:
+    0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent) inset,
+    0 18px 44px -22px color-mix(in oklch, var(--foreground) 18%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--border) 40%, transparent);
+  transition:
+    transform 0.28s ease,
+    box-shadow 0.28s ease,
+    border-color 0.28s ease;
+}
+
+.ds-mkt-bento-tile::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 3px;
+  border-radius: 2px 2px 0 0;
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklch, var(--primary) 75%, transparent),
+    color-mix(in oklch, var(--ring) 65%, transparent) 45%,
+    color-mix(in oklch, var(--accent) 60%, transparent)
+  );
+  opacity: 0.9;
+}
+
+.ds-mkt-bento-tile:hover {
+  transform: translateY(-5px);
+  border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
+  box-shadow:
+    0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent) inset,
+    0 28px 56px -20px color-mix(in oklch, var(--primary) 22%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent);
+}
+
+.ds-mkt-bento-icon-wrap {
+  display: flex;
+  height: 2.75rem;
+  width: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--radius) + 4px);
+  background: linear-gradient(
+    145deg,
+    color-mix(in oklch, var(--primary) 22%, transparent),
+    color-mix(in oklch, var(--muted) 50%, transparent) 100%
+  );
+  color: var(--primary);
+  box-shadow:
+    0 1px 0 color-mix(in oklch, var(--primary-foreground) 20%, transparent) inset,
+    0 0 0 1px color-mix(in oklch, var(--primary) 15%, transparent);
+}
+
+.ds-mkt-video-glow {
+  box-shadow:
+    0 24px 48px -18px color-mix(in oklch, var(--primary) 28%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--border) 80%, transparent);
+}
+
+/** Layered card / panel — gradient fill, soft inner highlight, outer shadow + hairline ring */
+.ds-mkt-surface-elevated {
+  border-radius: calc(var(--radius) + 6px);
+  background: linear-gradient(
+    155deg,
+    color-mix(in oklch, var(--card) 100%, transparent) 0%,
+    color-mix(in oklch, var(--muted) 45%, var(--card)) 100%
+  );
+  box-shadow:
+    0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent) inset,
+    0 22px 48px -28px color-mix(in oklch, var(--foreground) 28%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--border) 55%, transparent);
+}
+
+.ds-mkt-surface-elevated:hover {
+  box-shadow:
+    0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent) inset,
+    0 28px 56px -26px color-mix(in oklch, var(--primary) 22%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--primary) 25%, transparent);
+}
+
+/** Frosted panel for quotes, overlays */
+.ds-mkt-glass-panel {
+  border-radius: calc(var(--radius) + 10px);
+  background: color-mix(in oklch, var(--card) 82%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid color-mix(in oklch, var(--border) 65%, transparent);
+  box-shadow:
+    0 4px 28px -6px color-mix(in oklch, var(--foreground) 14%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--foreground) 4%, transparent) inset;
+}
+
+/** Ambient mesh + animated aurora + subtle grid (centered heroes) */
+.ds-mkt-hero-mesh {
+  position: relative;
+  isolation: isolate;
+  background-color: var(--background);
+  background-image:
+    linear-gradient(color-mix(in oklch, var(--foreground) 3.2%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 3.2%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: 56px 56px;
+  animation: ds-mkt-grid-pan 90s linear infinite;
+}
+
+.ds-mkt-hero-mesh::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 90% 65% at 50% -25%,
+      color-mix(in oklch, var(--primary) 18%, transparent),
+      transparent 58%
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 100% 10%,
+      color-mix(in oklch, var(--ring) 14%, transparent),
+      transparent 52%
+    ),
+    radial-gradient(
+      ellipse 45% 35% at 0% 85%,
+      color-mix(in oklch, var(--accent) 20%, transparent),
+      transparent 48%
+    );
+}
+
+/** Soft animated color blob (adds depth behind headline) */
+.ds-mkt-hero-mesh::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 38%;
+  width: min(100vw, 720px);
+  height: min(100vw, 720px);
+  translate: -50% -50%;
+  z-index: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    circle closest-side,
+    color-mix(in oklch, var(--primary) 42%, transparent),
+    color-mix(in oklch, var(--ring) 22%, transparent) 45%,
+    transparent 70%
+  );
+  filter: blur(56px);
+  opacity: 0.75;
+  animation: ds-mkt-aurora-drift 22s ease-in-out infinite;
+  will-change: transform;
+}
+
+.ds-mkt-hero-mesh > * {
+  position: relative;
+  z-index: 1;
+}
+
+/** Split hero: extra animated layers (orbs + occasional light sheen) */
+.ds-mkt-hero-split-stage {
+  position: relative;
+  isolation: isolate;
+}
+
+.ds-mkt-hero-split-stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 70% 50% at 15% 20%,
+      color-mix(in oklch, var(--primary) 14%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 60% 45% at 95% 75%,
+      color-mix(in oklch, var(--accent) 16%, transparent),
+      transparent 50%
+    );
+  animation: ds-mkt-aurora-drift-slow 28s ease-in-out infinite;
+}
+
+.ds-mkt-hero-split-stage::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    color-mix(in oklch, var(--primary-foreground) 8%, transparent) 50%,
+    transparent 60%
+  );
+  animation: ds-mkt-split-sheen 11s ease-in-out infinite;
+  mix-blend-mode: overlay;
+}
+
+.ds-mkt-hero-split-stage .ds-mkt-hero-split-content {
+  position: relative;
+  z-index: 1;
+}
+
+/** Section backgrounds */
+.ds-mkt-section-soft {
+  background:
+    linear-gradient(180deg, color-mix(in oklch, var(--muted) 35%, transparent) 0%, transparent 40%),
+    var(--background);
+}
+
+.ds-mkt-section-spotlight {
+  background: radial-gradient(
+    ellipse 80% 55% at 50% 0%,
+    color-mix(in oklch, var(--primary) 12%, transparent),
+    transparent 65%
+  );
+}
+
+/** Logo strip container */
+.ds-mkt-logo-rail {
+  border-radius: calc(var(--radius) + 8px);
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--card) 90%, transparent),
+    color-mix(in oklch, var(--muted) 25%, transparent)
+  );
+  box-shadow:
+    0 0 0 1px color-mix(in oklch, var(--border) 50%, transparent),
+    0 16px 40px -20px color-mix(in oklch, var(--foreground) 12%, transparent);
+}
+
+/** Image / media frame with chromatic edge */
+.ds-mkt-media-frame {
+  padding: 3px;
+  border-radius: calc(var(--radius) + 10px);
+  background: linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--primary) 35%, transparent),
+    color-mix(in oklch, var(--ring) 25%, transparent),
+    color-mix(in oklch, var(--accent) 30%, transparent)
+  );
+  box-shadow:
+    0 20px 50px -22px color-mix(in oklch, var(--primary) 35%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--border) 40%, transparent);
+}
+
+.ds-mkt-media-frame-inner {
+  border-radius: calc(var(--radius) + 7px);
+  overflow: hidden;
+  background: var(--card);
+}
+
+/** Footer depth */
+.ds-mkt-footer-depth {
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--muted) 40%, var(--background)) 0%,
+    color-mix(in oklch, var(--background) 100%, transparent) 32%
+  );
+  box-shadow: 0 -1px 0 color-mix(in oklch, var(--border) 70%, transparent);
+}
+
+/** Stat value — gradient text (use with bg-clip-text utilities in TSX) */
+.ds-mkt-stat-value {
+  background: linear-gradient(
+    135deg,
+    var(--foreground) 0%,
+    color-mix(in oklch, var(--foreground) 85%, var(--primary)) 55%,
+    var(--primary) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-mkt-media-float,
+  .ds-mkt-fade-up,
+  .ds-mkt-stat-pop,
+  .ds-mkt-cta-gradient {
+    animation: none !important;
+  }
+
+  .ds-mkt-media-float {
+    transform: none;
+  }
+
+  .ds-mkt-surface-elevated:hover {
+    transform: none !important;
+    box-shadow:
+      0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent) inset,
+      0 22px 48px -28px color-mix(in oklch, var(--foreground) 28%, transparent),
+      0 0 0 1px color-mix(in oklch, var(--border) 55%, transparent);
+  }
+
+  .ds-mkt-stat-value {
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--foreground);
+  }
+
+  .ds-mkt-hero-mesh {
+    animation: none;
+  }
+
+  .ds-mkt-hero-mesh::after {
+    animation: none;
+    opacity: 0.45;
+  }
+
+  .ds-mkt-hero-split-stage::before,
+  .ds-mkt-hero-split-stage::after {
+    animation: none;
+  }
+
+  .ds-mkt-hero-split-stage::after {
+    opacity: 0;
+  }
+
+  .ds-mkt-hero-cta-primary,
+  .ds-mkt-hero-cta-primary a {
+    animation: none !important;
+  }
+
+  .ds-mkt-hero-cta-primary:hover,
+  .ds-mkt-hero-cta-primary a:hover,
+  .ds-mkt-hero-cta-secondary:hover,
+  .ds-mkt-hero-cta-secondary a:hover {
+    transform: none;
+  }
+
+  .ds-mkt-cta-shell::after {
+    animation: none;
+    opacity: 0.42;
+  }
+
+  .ds-mkt-bento-tile:hover {
+    transform: none;
+    box-shadow:
+      0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent) inset,
+      0 18px 44px -22px color-mix(in oklch, var(--foreground) 18%, transparent),
+      0 0 0 1px color-mix(in oklch, var(--border) 40%, transparent);
+  }
+}
+
+/**
+ * Hero CTAs — animated gradient fill (primary) + gradient border glass (secondary).
+ * Used by `Hero` and `HeroSplit` for above-the-fold actions.
+ */
+.ds-mkt-hero-cta-primary,
+.ds-mkt-hero-cta-primary a {
+  position: relative;
+  overflow: hidden;
+  border-radius: calc(var(--radius) + 4px) !important;
+  border: none !important;
+  background: linear-gradient(
+    128deg,
+    color-mix(in oklch, var(--primary) 100%, transparent) 0%,
+    color-mix(in oklch, var(--ring) 72%, var(--primary)) 38%,
+    color-mix(in oklch, var(--accent) 68%, var(--primary)) 100%
+  ) !important;
+  background-size: 220% 220% !important;
+  animation: ds-mkt-cta-shimmer 10s ease-in-out infinite !important;
+  color: var(--primary-foreground) !important;
+  box-shadow:
+    0 6px 28px -6px color-mix(in oklch, var(--primary) 55%, transparent),
+    0 2px 10px -4px color-mix(in oklch, var(--foreground) 18%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--primary-foreground) 38%, transparent),
+    inset 0 -1px 0 color-mix(in oklch, var(--foreground) 12%, transparent) !important;
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease;
+}
+
+.ds-mkt-hero-cta-primary:hover,
+.ds-mkt-hero-cta-primary a:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 14px 40px -10px color-mix(in oklch, var(--primary) 58%, transparent),
+    0 6px 16px -6px color-mix(in oklch, var(--foreground) 22%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--primary-foreground) 48%, transparent) !important;
+}
+
+.ds-mkt-hero-cta-secondary,
+.ds-mkt-hero-cta-secondary a {
+  border-radius: calc(var(--radius) + 4px) !important;
+  border: 2px solid transparent !important;
+  background:
+    linear-gradient(
+      color-mix(in oklch, var(--background) 88%, var(--card)),
+      color-mix(in oklch, var(--muted) 36%, var(--background))
+    )
+    padding-box,
+    linear-gradient(
+      135deg,
+      color-mix(in oklch, var(--primary) 88%, transparent),
+      color-mix(in oklch, var(--ring) 72%, transparent),
+      color-mix(in oklch, var(--accent) 78%, transparent)
+    )
+    border-box !important;
+  color: var(--foreground) !important;
+  box-shadow:
+    0 4px 26px -10px color-mix(in oklch, var(--primary) 38%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--foreground) 9%, transparent) !important;
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease,
+    filter 0.22s ease;
+}
+
+.ds-mkt-hero-cta-secondary:hover,
+.ds-mkt-hero-cta-secondary a:hover {
+  transform: translateY(-2px);
+  filter: brightness(1.04);
+  box-shadow:
+    0 12px 36px -14px color-mix(in oklch, var(--primary) 48%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--foreground) 14%, transparent) !important;
+}
+
+/**
+ * Marketing CTAs — token-based depth (shadow + inset highlight) for primary / ghost-secondary.
+ * Apply via `className` on `<Button asChild>` (classes merge onto the inner `<a>`).
+ */
+.ds-mkt-btn-primary,
+.ds-mkt-btn-primary a {
+  background-color: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border-color: transparent !important;
+  box-shadow:
+    0 4px 20px -4px color-mix(in oklch, var(--primary) 55%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--primary-foreground) 22%, transparent);
+}
+
+.ds-mkt-btn-primary:hover,
+.ds-mkt-btn-primary a:hover {
+  background-color: color-mix(in oklch, var(--primary) 88%, var(--foreground)) !important;
+  color: var(--primary-foreground) !important;
+}
+
+.ds-mkt-btn-secondary,
+.ds-mkt-btn-secondary a {
+  background-color: color-mix(in oklch, var(--background) 70%, var(--card)) !important;
+  color: var(--foreground) !important;
+  border: 1px solid color-mix(in oklch, var(--border) 75%, var(--foreground)) !important;
+  box-shadow:
+    0 1px 2px color-mix(in oklch, var(--foreground) 8%, transparent),
+    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
+}
+
+.ds-mkt-btn-secondary:hover,
+.ds-mkt-btn-secondary a:hover {
+  background-color: color-mix(in oklch, var(--muted) 50%, var(--card)) !important;
+}