/* Console variant — product / data-feel. Dark cards on a light ground, mint→purple gradient accents on stats and headline emphasis, gradient step numbers, gradient callouts, white text on dark surfaces. Scoped via [data-variant="console"] on . */ [data-variant='console'] { --hero-grad: linear-gradient(135deg, #F4F2F8 0%, #ECE7F4 100%); --bg-soft: #F4F2F8; --bg-alt: #ECE7F4; --radius-sm: 10px; --radius-md: 16px; } [data-variant='console'][data-theme='dark'] { /* Override the light purple panels in dark mode so dark text reads cleanly. */ --hero-grad: linear-gradient(135deg, #0E0B0C 0%, #14101A 100%); --bg-soft: #19142A; --bg-alt: #14101A; } /* Headline emphasis — gradient text */ [data-variant='console'] .hero h1 em, [data-variant='console'] .section-head h2 em, [data-variant='console'] .feature-grid .copy h2 em, [data-variant='console'] .integrations .copy h2 em, [data-variant='console'] .vision-copy h2 em { background: linear-gradient(90deg, var(--mint) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } /* Benefits — dark cards on light ground. Fixed dark in light mode; elevated dark surface in dark mode for visibility. */ [data-variant='console'] .benefits { background: var(--bg-soft); } [data-variant='console'] .benefit { background: #14101A; color: #F4F1F8; border: 1px solid rgba(186,165,246,0.18); box-shadow: 0 8px 32px rgba(20, 16, 26, 0.18); } [data-variant='console'] .benefit h3 { color: #F4F1F8; } [data-variant='console'] .benefit p { color: #BFB5C9; } [data-variant='console'] .benefit-icon { background: linear-gradient(135deg, var(--mint) 0%, var(--purple) 100%); color: #FFFFFF; } [data-variant='console'][data-theme='dark'] .benefit { background: var(--surface); border-color: rgba(186,165,246,0.24); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } /* Prose nested inside dark cards must inherit the light foreground, not the default var(--ink-2) which would render dark-on-dark. */ [data-variant='console'] .benefit .prose { color: #BFB5C9; } [data-variant='console'] .benefit .prose strong { color: #F4F1F8; } [data-variant='console'] .benefit .prose a { color: var(--mint); } [data-variant='console'] .benefit h3 { color: #F4F1F8; } /* Steps strip — dark cards with gradient numbers */ [data-variant='console'] .steps { background: var(--bg-alt); } [data-variant='console'] .step { background: #14101A; color: #F4F1F8; border: 1px solid rgba(186,165,246,0.18); box-shadow: 0 6px 24px rgba(20, 16, 26, 0.16); } [data-variant='console'] .step h3 { color: #F4F1F8; } [data-variant='console'] .step p { color: #BFB5C9; } [data-variant='console'] .step .num { background: linear-gradient(135deg, var(--mint) 0%, var(--purple) 100%); color: #FFFFFF; } [data-variant='console'][data-theme='dark'] .step { background: var(--surface); border-color: rgba(186,165,246,0.24); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } /* Integrations chips — dark with gradient hover */ [data-variant='console'] .integrations { background: var(--bg); } [data-variant='console'] .integration-chip { background: #14101A; color: #BFB5C9; border-color: rgba(186,165,246,0.18); letter-spacing: 0.04em; } [data-variant='console'] .integration-chip .chip-icon { color: var(--mint); } [data-variant='console'][data-theme='dark'] .integration-chip { background: var(--surface); border-color: rgba(186,165,246,0.24); } /* Stat row — gradient figures */ [data-variant='console'] .stat-callout { background: var(--bg-alt); } [data-variant='console'] .stat .figure em { background: linear-gradient(90deg, var(--mint) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Callouts — gradient surface (white text in both modes) */ [data-variant='console'] .callout { background: linear-gradient(135deg, var(--mint) 0%, var(--purple) 100%); color: #FFFFFF; border-radius: var(--radius-md); } [data-variant='console'] .callout h3 { color: #FFFFFF; } [data-variant='console'] .callout p { color: #FFFFFF; } [data-variant='console'] .callout--large h3 { color: #FFFFFF; } [data-variant='console'] .callout--large p { color: rgba(255,255,255,0.92); } [data-variant='console'] .timeline-callout { color: #FFFFFF; } /* Dark mode: drop the gradient on the road-to-launch, security, audit-trail and build-with-us panels so they share the security-panel background. */ [data-variant='console'][data-theme='dark'] .timeline-callout, [data-variant='console'][data-theme='dark'] .security-panel, [data-variant='console'][data-theme='dark'] .page--platform .callout-panel > .container > .callout, [data-variant='console'][data-theme='dark'] .page--about .callout--large { background: #1F1A2A; } /* Vision tiles — dark cards */ [data-variant='console'] .vision-strip { background: var(--bg-alt); } [data-variant='console'] .vision-list li { background: #14101A; border: 1px solid rgba(186,165,246,0.18); box-shadow: 0 4px 16px rgba(20, 16, 26, 0.14); } [data-variant='console'] .vision-list strong { color: #F4F1F8; } [data-variant='console'] .vision-list li > span:not(.vision-icon) { color: #BFB5C9; } [data-variant='console'] .vision-list .vision-icon { background: linear-gradient(135deg, var(--mint) 0%, var(--purple) 100%); color: #FFFFFF; } [data-variant='console'][data-theme='dark'] .vision-list li { background: var(--surface); border-color: rgba(186,165,246,0.24); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* FAQ teaser — clean cards on light ground */ [data-variant='console'] .faq-teaser { background: var(--bg-alt); } [data-variant='console'] .faq-item { border: 1px solid rgba(20,16,26,0.06); box-shadow: 0 4px 16px rgba(20, 16, 26, 0.06); } [data-variant='console'] .faq-item summary::after { background: linear-gradient(135deg, var(--mint) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Article cards — dark surface */ [data-variant='console'] .article-card { background: #14101A; color: #F4F1F8; border: 1px solid rgba(186,165,246,0.18); box-shadow: 0 6px 24px rgba(20, 16, 26, 0.14); } [data-variant='console'] .article-card h2 { color: #F4F1F8; } [data-variant='console'] .article-card p { color: #BFB5C9; } [data-variant='console'] .article-card .article-date { color: var(--mint); } [data-variant='console'] .article-card .read-time { color: rgba(186,165,246,0.7); } [data-variant='console'][data-theme='dark'] .article-card { background: var(--surface); border-color: rgba(186,165,246,0.24); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } /* Beta CTA — gradient panel (dark stays dark in both modes) */ [data-variant='console'] .beta { background: linear-gradient(135deg, #14101A 0%, #2C1B5A 100%); border: 1px solid rgba(186,165,246,0.24); } [data-variant='console'] .beta::before { background: radial-gradient(circle, rgba(38,221,190,0.55), transparent 70%); } [data-variant='console'][data-theme='dark'] .beta { background: linear-gradient(135deg, #1F1A2A 0%, #3D2A75 100%); } /* Landing hero (Beta programme) — light gradient in light mode, dark gradient in dark mode */ [data-variant='console'] .landing-hero { background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-alt) 100%); color: var(--ink); } [data-variant='console'] .landing-hero-copy h1 { color: var(--ink); } [data-variant='console'] .landing-hero-copy .deck { color: var(--ink-3); } [data-variant='console'] .landing-hero-copy .eyebrow { color: var(--accent); } [data-variant='console'][data-theme='dark'] .landing-hero { background: linear-gradient(135deg, #1F1A2A 0%, #3D2A75 100%); color: #FFFFFF; } [data-variant='console'][data-theme='dark'] .landing-hero-copy h1 { color: #FFFFFF; } [data-variant='console'][data-theme='dark'] .landing-hero-copy .deck { color: rgba(244,241,248,0.84); } [data-variant='console'][data-theme='dark'] .landing-hero-copy .eyebrow { color: var(--mint); } /* Beta programme — who/what/ask cards: light surface in light mode, elevated dark in dark mode. Scoped to body.landing (only the Beta programme page) so home benefits keep their dark Console treatment. */ [data-variant='console'] body.landing .benefit { background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft); box-shadow: var(--shadow); } [data-variant='console'] body.landing .benefit h3 { color: var(--ink); } [data-variant='console'] body.landing .benefit .prose, [data-variant='console'] body.landing .benefit p, [data-variant='console'] body.landing .benefit ul, [data-variant='console'] body.landing .benefit ol, [data-variant='console'] body.landing .benefit li { color: var(--ink-2); } [data-variant='console'] body.landing .benefit strong { color: var(--ink); } [data-variant='console'] body.landing .benefit a { color: var(--accent); } [data-variant='console'] .landing-hero-copy h1 em { background: linear-gradient(90deg, var(--mint) 0%, #BB5FFD 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } /* Read-progress gradient */ [data-variant='console'] .read-progress::before { background: linear-gradient(90deg, var(--mint), #BB5FFD); }