/* ═══════════════════════════════════════════════════════════════════════════ THEME — light (default) and dark. Loaded LAST so it wins without specificity games. Two halves: 1. This file's hand-written part: the palette flip, the header, gradients, shadows, form controls, the theme toggle itself, and everything whose dark treatment is a design decision rather than a mechanical inversion. 2. A generated tail (see the banner further down): one rule per stylesheet rule that hardcoded a light surface or dark text. That tail is produced by walking the real stylesheets, so it cannot drift out of sync by someone forgetting a selector — regenerate it if the sheets change. Dark is opt-in per visitor and remembered in localStorage under `lumen.theme`; with no stored choice we follow the OS. `data-theme` is stamped on by a tiny inline script in BEFORE first paint, so there is no light flash. Deliberately NOT inverted: the sections that are already dark by design (the .band / .magic / .agent-door / #mobile bands) and the app mockups drawn as inline SVG — a screenshot of a light app should still look like a light app. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Card and panel surfaces. In light mode these are the values the sheets already hardcode; naming them lets the dark half swap all of them at once. */ --surface: #ffffff; --surface2: #fbfcfe; --surface3: #f1f4fa; --line2: #eef1f7; --shadow-tint: rgba(20, 27, 61, .28); } :root[data-theme="dark"] { --ink: #eef1fb; --ink2: #b9c2dc; --mut: #8792ae; --line: #262d45; --line2: #1e2439; --bg: #0a0e1a; --bg2: #0f1424; --surface: #141a2c; --surface2: #111726; --surface3: #1a2137; /* The ramp keeps its identity but is lifted so it reads on a dark ground. */ --acc: #8b93f5; --acc2: #55c9c0; --acc-d: #a3a9ff; --good: #4ec99a; --mid: #7b85e8; --grad: linear-gradient(135deg, #7f8bf0 0%, #8b93f5 45%, #4fc0b8 100%); --grad-warm: linear-gradient(135deg, #8b93f5 0%, #5fc2cd 55%, #4fc0b8 100%); --grad-fun: linear-gradient(120deg, #9aa0ff 0%, #8b93f5 38%, #4fc0b8 100%); --shadow: 0 24px 60px -20px rgba(0, 0, 0, .72); --shadow-tint: rgba(0, 0, 0, .7); /* The rewind timeline paints its rows from an infinite animation, so the colours must be variables — an animated declaration outranks any rule. */ --rw-idle: #141a2c; --rw-on: #1d2545; color-scheme: dark; } /* Form controls, scrollbars and the like should follow the theme natively. */ :root[data-theme="light"] { color-scheme: light; } /* ── The toggle ──────────────────────────────────────────────────────────── One button, two icons, cross-faded. Sits in the nav next to Sign in on every page; `aria-pressed` carries the state and the label says what a press DOES. */ .theme-toggle { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink2); cursor: pointer; transition: border-color .16s, color .16s, background .16s, transform .12s; } .theme-toggle:hover { color: var(--ink); border-color: var(--acc); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .theme-toggle svg { position: absolute; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); } .theme-toggle .i-sun { opacity: 1; transform: none; } .theme-toggle .i-moon { opacity: 0; transform: rotate(-70deg) scale(.6); } :root[data-theme="dark"] .theme-toggle .i-sun { opacity: 0; transform: rotate(70deg) scale(.6); } :root[data-theme="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity .2s ease; } } /* In the mobile drawer the toggle sits in a full-width labelled row instead. */ .mobile-nav .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; } .mobile-nav .theme-row span { color: var(--ink2); font-size: 14px; font-weight: 650; } /* ═══════════════════════════════════════════════════════════════════════════ GENERATED TAIL Produced by scripts/gen-landing-dark.mjs by walking the real stylesheets: one rule for every rule that hardcoded a light surface or dark text, so a new card cannot be forgotten. Do NOT hand-edit — re-run the generator. ═══════════════════════════════════════════════════════════════════════════ */ /* ── surface.css ─────────────────────────────────────────────────────── */ :root[data-theme="dark"] .btn.ghost { background: var(--surface); } :root[data-theme="dark"] .dd-menu { background: var(--surface); } :root[data-theme="dark"] .vis { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .vis .bar { background: linear-gradient(180deg,var(--surface),var(--surface2)); } :root[data-theme="dark"] .vis .bar i { background: var(--surface3); } :root[data-theme="dark"] .product-film { background: linear-gradient(140deg,var(--surface) 0%,var(--surface) 52%,var(--surface) 100%); } :root[data-theme="dark"] .film-points li::before { background: var(--surface2); color: hsl(159 80% 72%); } :root[data-theme="dark"] .film-frame { background: var(--surface2); border-color: var(--line); } :root[data-theme="dark"] .film-bar { background: linear-gradient(180deg,var(--surface),var(--surface2)); border-bottom-color: var(--line); } :root[data-theme="dark"] .film-bar i { background: var(--surface3); } :root[data-theme="dark"] .film-bar b { color: hsl(217 37% 72%); } :root[data-theme="dark"] .film-label { background: var(--surface2); color: hsl(245 76% 72%); } :root[data-theme="dark"] .product-film-video { background: var(--surface2); } :root[data-theme="dark"] .fcard:hover { border-color: var(--line); } :root[data-theme="dark"] .xcard { background: var(--surface); } :root[data-theme="dark"] .stat { background: var(--surface); } :root[data-theme="dark"] .toc a:hover { background: var(--surface); } :root[data-theme="dark"] .scard { background: var(--surface); } :root[data-theme="dark"] .scard:hover { border-color: var(--line); } :root[data-theme="dark"] .topic { background: var(--surface); } :root[data-theme="dark"] footer .row .legal-foot-links { border-top-color: var(--line); } :root[data-theme="dark"] .legal-foot-links a { background: var(--surface2); } :root[data-theme="dark"] a.summary-card:hover { border-color: var(--line); } :root[data-theme="dark"] .summary-card .k { background: var(--surface2); color: hsl(243 75% 72%); } :root[data-theme="dark"] .security-card { background: var(--surface); } :root[data-theme="dark"] .trust-strip { background: var(--surface); } :root[data-theme="dark"] .page-bridge-box { background: linear-gradient(135deg,var(--surface),var(--surface)); } :root[data-theme="dark"] .page-bridge-card { background: var(--surface); } :root[data-theme="dark"] .page-bridge-card:hover { border-color: var(--line); } :root[data-theme="dark"] .biz-console { background: var(--surface); } :root[data-theme="dark"] .biz-metric { background: var(--surface); } :root[data-theme="dark"] .biz-policy { background: var(--surface); } :root[data-theme="dark"] .biz-policy-row { border-bottom-color: var(--line); } :root[data-theme="dark"] .biz-policy-row i { background: var(--surface2); color: hsl(158 80% 72%); } :root[data-theme="dark"] .biz-panel { background: var(--surface); } :root[data-theme="dark"] .biz-list li { border-bottom-color: var(--line); } :root[data-theme="dark"] .biz-list li::before { background: var(--surface2); color: hsl(158 80% 72%); } :root[data-theme="dark"] .biz-price { background: linear-gradient(145deg,var(--surface),var(--surface)); } :root[data-theme="dark"] .mobile-nav-toggle { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .mobile-nav { border-top-color: var(--line); } :root[data-theme="dark"] .faq details { background: var(--surface); } :root[data-theme="dark"] .faq details[open] { border-color: var(--line); } :root[data-theme="dark"] .eng-card { background: var(--surface); } :root[data-theme="dark"] .eng-card:hover { border-color: var(--line); } :root[data-theme="dark"] .eng-meter i { background: var(--surface3); } :root[data-theme="dark"] .eng-radio:nth-of-type(1):checked ~ .eng-tabs .eng-card:nth-of-type(1), :root[data-theme="dark"] .eng-radio:nth-of-type(2):checked ~ .eng-tabs .eng-card:nth-of-type(2), :root[data-theme="dark"] .eng-radio:nth-of-type(3):checked ~ .eng-tabs .eng-card:nth-of-type(3), :root[data-theme="dark"] .eng-radio:nth-of-type(4):checked ~ .eng-tabs .eng-card:nth-of-type(4) { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; } :root[data-theme="dark"] .eng-row { background: var(--surface); } :root[data-theme="dark"] .eng-row:hover { border-color: var(--line); } :root[data-theme="dark"] .eng-table-wrap { background: var(--surface); } :root[data-theme="dark"] .cycle-comet::after { background: var(--surface); } :root[data-theme="dark"] .cycle-node { background: var(--surface); } :root[data-theme="dark"] .cycle-legend li { background: var(--surface); } /* ── home-refresh.css ────────────────────────────────────────────────── */ :root[data-theme="dark"] body { background: radial-gradient(900px 520px at 82% 4%, rgba(89, 101, 216, .09), transparent 62%), var(--surface); } :root[data-theme="dark"] .links a.nl { color: hsl(219 40% 72%); } :root[data-theme="dark"] .btn.ghost { border-color: var(--line); } :root[data-theme="dark"] .hpill { color: hsl(243 79% 72%); } :root[data-theme="dark"] .hero p.lead { color: hsl(218 44% 72%); } :root[data-theme="dark"] .goal-kicker { color: hsl(243 75% 72%); } :root[data-theme="dark"] .goal-panel > p { color: hsl(221 35% 72%); } :root[data-theme="dark"] .goal-list a { border-color: var(--line); } :root[data-theme="dark"] .goal-icon { background: var(--surface2); color: hsl(244 76% 72%); } :root[data-theme="dark"] .goal-list b { color: hsl(220 53% 72%); } :root[data-theme="dark"] .goal-list small { color: hsl(219 32% 72%); } :root[data-theme="dark"] .goal-arrow { color: hsl(244 67% 72%); } :root[data-theme="dark"] .micro { color: hsl(221 35% 72%); } :root[data-theme="dark"] .shot { border-color: var(--line); } :root[data-theme="dark"] .hero-film .film-label { background: var(--surface); color: var(--mut); border-color: var(--line); } :root[data-theme="dark"] .hero-film-video { background: var(--surface2); } :root[data-theme="dark"] .strip .lbl { color: hsl(219 34% 72%); } :root[data-theme="dark"] .chip { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .promise-item { border-right-color: var(--line); } :root[data-theme="dark"] .promise-mark { background: var(--surface2); color: hsl(159 80% 72%); } :root[data-theme="dark"] .promise-item b { color: hsl(220 56% 72%); } :root[data-theme="dark"] .promise-item div > span { color: hsl(219 34% 72%); } :root[data-theme="dark"] .positioning-shell { background: linear-gradient(145deg, var(--surface), var(--surface2)); border-color: var(--line); } :root[data-theme="dark"] .positioning-copy p { color: hsl(217 41% 72%); } :root[data-theme="dark"] .proof-row { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .proof-row > span { color: var(--mut); } :root[data-theme="dark"] .proof-row > i { color: hsl(244 72% 72%); } :root[data-theme="dark"] .proof-row > div { color: hsl(218 44% 72%); } :root[data-theme="dark"] .proof-row b { color: hsl(219 51% 72%); } :root[data-theme="dark"] .head p { color: hsl(215 41% 72%); } :root[data-theme="dark"] .eyebrow { color: hsl(243 75% 72%); } :root[data-theme="dark"] .journey-intro p { color: hsl(215 41% 72%); } :root[data-theme="dark"] .journey-card:hover { border-color: var(--line); } :root[data-theme="dark"] .journey-number { background: var(--surface2); color: hsl(243 76% 72%); } :root[data-theme="dark"] .journey-card p { color: hsl(221 35% 72%); } :root[data-theme="dark"] .journey-card a { color: hsl(243 78% 72%); } :root[data-theme="dark"] #surfaces { background: var(--surface2); border-top-color: var(--line); } :root[data-theme="dark"] #surfaces .surf:nth-child(1) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(2) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(3) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(4) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(5) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(6) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(7) .ico { background: var(--surface2); } :root[data-theme="dark"] #surfaces .surf:nth-child(8) .ico { background: var(--surface3); } :root[data-theme="dark"] #surfaces .surf:nth-child(9) .ico { background: var(--surface3); } :root[data-theme="dark"] #surfaces .surf:nth-child(10) .ico { background: var(--surface3); } :root[data-theme="dark"] .feature-atlas-kicker { color: hsl(243 75% 72%); } :root[data-theme="dark"] .feature-atlas-intro p { color: hsl(221 35% 72%); } :root[data-theme="dark"] .feature-atlas-intro-copy a { color: hsl(243 78% 72%); } :root[data-theme="dark"] .feature-group { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .feature-group > summary::before { background: var(--surface2); color: hsl(244 75% 72%); } :root[data-theme="dark"] .feature-group > summary span { color: hsl(221 35% 72%); } :root[data-theme="dark"] .feature-group[open] > summary { border-bottom-color: var(--line); } :root[data-theme="dark"] .feature-cards { background: var(--surface3); } :root[data-theme="dark"] .feature-product { background: var(--surface); } :root[data-theme="dark"] .product-glyph { background: var(--surface2); color: hsl(243 75% 72%); } :root[data-theme="dark"] .feature-product[data-tone="mobile"] .product-glyph { background: var(--surface2); color: hsl(178 80% 72%); } :root[data-theme="dark"] .feature-product[data-tone="connectors"] .product-glyph { background: var(--surface2); color: hsl(215 80% 72%); } :root[data-theme="dark"] .feature-product[data-tone="formats"] .product-glyph { background: var(--surface2); color: hsl(19 80% 72%); } :root[data-theme="dark"] .feature-product[data-tone="account"] .product-glyph { background: var(--surface2); color: hsl(251 72% 72%); } :root[data-theme="dark"] .feature-product[data-tone="business"] .product-glyph { background: var(--surface2); color: hsl(313 73% 72%); } :root[data-theme="dark"] .feature-product[data-tone="control"] .product-glyph { background: var(--surface2); color: hsl(198 73% 72%); } :root[data-theme="dark"] .product-head small { color: var(--mut); } :root[data-theme="dark"] .feature-product p { color: hsl(217 41% 72%); } :root[data-theme="dark"] .feature-chips span { background: var(--surface); color: hsl(218 44% 72%); border-color: var(--line); } :root[data-theme="dark"] .feature-link { color: hsl(243 78% 72%); } :root[data-theme="dark"] .everywhere-shell { background: linear-gradient(145deg, var(--surface), var(--surface2)); border-color: var(--line); } :root[data-theme="dark"] .everywhere-head p { color: hsl(215 41% 72%); } :root[data-theme="dark"] .place-card { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .place-label { background: var(--surface2); color: hsl(243 75% 72%); } :root[data-theme="dark"] .place-card p { color: hsl(221 35% 72%); } :root[data-theme="dark"] .place-card ul { color: hsl(216 43% 72%); } :root[data-theme="dark"] .place-card li::before { color: hsl(152 62% 72%); } :root[data-theme="dark"] #collaborate .show > .info p { color: hsl(215 41% 72%); } :root[data-theme="dark"] .stat { background: var(--surface); } :root[data-theme="dark"] .final { background: radial-gradient(600px 300px at 50% 0%, rgba(99, 91, 255, .13), transparent 70%), var(--surface); } :root[data-theme="dark"] footer .legal-foot-links { border-top-color: var(--line); } :root[data-theme="dark"] .mobile-nav-toggle { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .mobile-nav { border-top-color: var(--line); } :root[data-theme="dark"] .mobile-nav > a:not(.btn), :root[data-theme="dark"] .mobile-account { color: hsl(220 45% 72%); } :root[data-theme="dark"] .mobile-nav > a:not(.btn):hover, :root[data-theme="dark"] .mobile-account:hover { background: var(--surface2); color: hsl(225 53% 72%); } :root[data-theme="dark"] footer .legal-foot-links a { background: var(--surface2); } :root[data-theme="dark"] .scene-tab { background: var(--surface); } :root[data-theme="dark"] .scene-card { background: var(--surface); } :root[data-theme="dark"] .scene-card video, :root[data-theme="dark"] .scene-card img { background: var(--surface2); } :root[data-theme="dark"] .scene-out .o { background: var(--surface); color: hsl(175 80% 72%); border-color: var(--line); } :root[data-theme="dark"] .ph-nav span { color: hsl(227 49% 72%); } :root[data-theme="dark"] .hero-shot { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .safety-card { background: var(--surface); } :root[data-theme="dark"] .chain-chips i { color: hsl(229 48% 72%); } :root[data-theme="dark"] .vis-film .vis-video { background: var(--surface2); } :root[data-theme="dark"] .hero-film-tag { color: hsl(223 32% 72%); } /* ── product-system.css ──────────────────────────────────────────────── */ :root[data-theme="dark"] .product-family-kicker { color: hsl(227 35% 72%); } :root[data-theme="dark"] .hero-tool-hint, :root[data-theme="dark"] .hero-tool-status { color: hsl(219 37% 72%); } :root[data-theme="dark"] .hero-tool-status { color: hsl(218 41% 72%); } :root[data-theme="dark"] .docs-agent-primer { background: radial-gradient(400px 260px at 0 100%, rgba(120, 213, 206, .12), transparent 70%), linear-gradient(145deg, var(--surface), var(--surface)); } :root[data-theme="dark"] .docs-agent-primer .primer-kicker { color: hsl(242 77% 72%); } :root[data-theme="dark"] .docs-agent-primer p { color: hsl(221 38% 72%); } :root[data-theme="dark"] .agent-primer-step { border-color: var(--line); } :root[data-theme="dark"] .agent-primer-step b { color: hsl(220 60% 72%); } :root[data-theme="dark"] .agent-primer-step small { color: hsl(221 33% 72%); } :root[data-theme="dark"] .docs-tool-legend > div { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .docs-tool-legend span { color: hsl(221 33% 72%); } :root[data-theme="dark"] .feature-ledger span { background: var(--surface); color: hsl(219 41% 72%); border-color: var(--line); } :root[data-theme="dark"] .docs-search-card { background: radial-gradient(360px 180px at 100% 0, rgba(120, 213, 206, .15), transparent 72%), linear-gradient(145deg, var(--surface), var(--surface)); } :root[data-theme="dark"] .docs-search-kicker { color: hsl(242 77% 72%); } :root[data-theme="dark"] .docs-search-copy h2 { color: hsl(221 63% 72%); } :root[data-theme="dark"] .docs-search-copy p { color: hsl(221 36% 72%); } :root[data-theme="dark"] .docs-search-input-wrap { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .docs-search-symbol { color: hsl(234 71% 72%); } :root[data-theme="dark"] .docs-search-input-wrap input { color: hsl(222 58% 72%); } :root[data-theme="dark"] .docs-search-input-wrap input::placeholder { color: var(--mut); } :root[data-theme="dark"] .docs-search-input-wrap kbd, :root[data-theme="dark"] .docs-search-control > p kbd { background: var(--surface); color: hsl(221 32% 72%); border-bottom-color: var(--line); } :root[data-theme="dark"] .docs-search-control > p { color: var(--mut); } :root[data-theme="dark"] .docs-search-input-wrap button, :root[data-theme="dark"] .docs-search-results-head button { background: var(--surface2); color: hsl(235 73% 72%); } :root[data-theme="dark"] .docs-search-results { border-color: var(--line); } :root[data-theme="dark"] .docs-search-results-head { color: hsl(221 46% 72%); } :root[data-theme="dark"] .docs-search-result { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .docs-search-result-kicker { color: hsl(234 71% 72%); } :root[data-theme="dark"] .docs-search-result > b { color: hsl(222 57% 72%); } :root[data-theme="dark"] .docs-search-result > p { color: hsl(221 33% 72%); } :root[data-theme="dark"] .docs-search-result-matches span { background: var(--surface2); color: hsl(214 39% 72%); } :root[data-theme="dark"] .docs-search-empty { background: var(--surface); color: hsl(221 35% 72%); border-color: var(--line); } :root[data-theme="dark"] .docs-search-empty b { color: hsl(220 50% 72%); } :root[data-theme="dark"] .docs-recipe, :root[data-theme="dark"] .docs-access-grid > div { background: linear-gradient(145deg, var(--surface), var(--surface)); border-color: var(--line); } :root[data-theme="dark"] .docs-recipe-kicker { color: hsl(242 77% 72%); } :root[data-theme="dark"] .prose .docs-recipe h3, :root[data-theme="dark"] .prose .docs-access-grid h3 { color: hsl(220 56% 72%); } :root[data-theme="dark"] .prose .docs-recipe li { color: hsl(220 35% 72%); } :root[data-theme="dark"] .prose .docs-access-grid p { color: hsl(220 35% 72%); } /* ── hub-2026.css ────────────────────────────────────────────────────── */ :root[data-theme="dark"] .show-tab { background: var(--surface); } :root[data-theme="dark"] .show-tab[aria-selected="true"] { background: linear-gradient(150deg, var(--surface), var(--surface)); } :root[data-theme="dark"] .st-mark { border-color: var(--line); } :root[data-theme="dark"] .show-chain i { background: var(--surface3); } :root[data-theme="dark"] .show-card { background: var(--surface); } :root[data-theme="dark"] .show-card video { background: var(--surface2); } :root[data-theme="dark"] .show-why .sw { background: linear-gradient(150deg, var(--surface), var(--surface2)); } :root[data-theme="dark"] #surfaces { background: var(--surface2); border-top-color: var(--line); } :root[data-theme="dark"] .bt { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .bt[aria-selected="true"] .bt-ico { background: var(--surface); } :root[data-theme="dark"] .bench-panel { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .bp-chips span { color: hsl(220 49% 72%); } :root[data-theme="dark"] .hub-extras { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .hub-extras > summary::before { background: var(--surface2); color: hsl(244 75% 72%); } :root[data-theme="dark"] .hub-extras[open] > summary { border-bottom-color: var(--line); } :root[data-theme="dark"] .hub-grid { background: var(--surface3); } :root[data-theme="dark"] .hx { background: var(--surface); } :root[data-theme="dark"] .hx-head small { color: var(--mut); } :root[data-theme="dark"] .hx p { color: hsl(217 41% 72%); } :root[data-theme="dark"] .hub-foot { border-top-color: var(--line); } :root[data-theme="dark"] .hub-foot a { color: hsl(243 78% 72%); } :root[data-theme="dark"] .rewind { background: linear-gradient(155deg, var(--surface), var(--surface2)); } :root[data-theme="dark"] .rw-doc { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .rw-bar { background: var(--surface); border-bottom-color: var(--line); } :root[data-theme="dark"] .rw-bar i { background: var(--surface3); } :root[data-theme="dark"] .rw-bar i:nth-child(3) { background: var(--surface3); } :root[data-theme="dark"] .rw-bar span { color: var(--mut); } :root[data-theme="dark"] .rw-v .l { background: var(--surface3); } :root[data-theme="dark"] .rw-dir .d-fwd { background: var(--surface2); color: hsl(235 75% 72%); } :root[data-theme="dark"] .rw-dir .d-rew { background: var(--surface2); color: hsl(18 80% 72%); } :root[data-theme="dark"] .rw-dir .d-res { background: var(--surface2); color: hsl(157 80% 72%); } :root[data-theme="dark"] .rw-list li { background: var(--surface); } :root[data-theme="dark"] .rw-track { background: var(--surface3); } :root[data-theme="dark"] .rw-track::before { background: var(--surface3); } :root[data-theme="dark"] .rw-stop { background: var(--surface3); border-color: var(--line); } :root[data-theme="dark"] .rw-head { border-color: var(--line); } :root[data-theme="dark"] .rw-list .rw-s1 { background: var(--surface2); } /* ── agent-page.css ──────────────────────────────────────────────────── */ :root[data-theme="dark"] .run-steps li { background: var(--surface); } :root[data-theme="dark"] .reach { background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--product-tone) 4%, var(--surface))); } :root[data-theme="dark"] .mk { background: var(--surface); } :root[data-theme="dark"] .eng { background: var(--surface); } :root[data-theme="dark"] .agent-all { background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--product-tone) 5%, var(--surface))); } /* ── index.html (inline) ─────────────────────────────────────────────── */ :root[data-theme="dark"] .btn.ghost { background: var(--surface); } :root[data-theme="dark"] .dd-menu { background: var(--surface); } :root[data-theme="dark"] .shot { background: var(--surface); } :root[data-theme="dark"] .shot .bar { background: linear-gradient(180deg,var(--surface),var(--surface2)); } :root[data-theme="dark"] .shot .bar i { background: var(--surface3); } :root[data-theme="dark"] .chip:hover { background: var(--surface); } :root[data-theme="dark"] .stat { background: var(--surface); } :root[data-theme="dark"] .surf { background: var(--surface); } :root[data-theme="dark"] .surf:hover { border-color: var(--line); } :root[data-theme="dark"] .vis { background: var(--surface); } :root[data-theme="dark"] .vis .bar { background: linear-gradient(180deg,var(--surface),var(--surface2)); } :root[data-theme="dark"] .vis .bar i { background: var(--surface3); } :root[data-theme="dark"] .fmt { background: var(--surface); } :root[data-theme="dark"] .repl .r { background: var(--surface); } :root[data-theme="dark"] .price { background: var(--surface); } :root[data-theme="dark"] .price.pop { background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; } :root[data-theme="dark"] .price .seatrow input { background: var(--surface); } :root[data-theme="dark"] .ent-strip { background: var(--surface); } :root[data-theme="dark"] .why .w { background: var(--surface); } :root[data-theme="dark"] .faq details { background: var(--surface); } :root[data-theme="dark"] .faq details[open] { border-color: var(--line); } :root[data-theme="dark"] .dl-card { background: var(--surface); } :root[data-theme="dark"] .dl-card.rec { background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; } :root[data-theme="dark"] .nav-acct { background: var(--surface); } :root[data-theme="dark"] .modal { background: var(--surface); } :root[data-theme="dark"] .field input { background: var(--surface); } :root[data-theme="dark"] .alert.err { background: var(--surface2); color: hsl(4 80% 72%); border-color: var(--line); } :root[data-theme="dark"] .alert.ok { background: var(--surface2); color: hsl(155 80% 72%); border-color: var(--line); } :root[data-theme="dark"] .gbtn { background: var(--surface); } :root[data-theme="dark"] .spin { border-top-color: var(--line); } :root[data-theme="dark"] .badge.free { background: var(--surface2); } :root[data-theme="dark"] .badge.cancel { background: var(--surface2); color: hsl(22 80% 72%); } :root[data-theme="dark"] .btn.danger { background: var(--surface); color: hsl(4 80% 72%); border-color: var(--line); } :root[data-theme="dark"] .btn.danger:hover { background: var(--surface2); } :root[data-theme="dark"] .org-row { background: var(--surface); } :root[data-theme="dark"] .org-role { background: var(--surface2); } :root[data-theme="dark"] .org-role.owner { background: var(--surface2); color: hsl(38 80% 72%); } :root[data-theme="dark"] .org-x { color: hsl(4 80% 72%); } :root[data-theme="dark"] .org-x:hover { background: var(--surface2); } :root[data-theme="dark"] .caps-hint { color: hsl(22 80% 72%); } :root[data-theme="dark"] .u-chip { background: var(--surface); } :root[data-theme="dark"] .danger-zone { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .danger-zone b { color: hsl(4 80% 72%); } :root[data-theme="dark"] .stage-done { color: hsl(219 75% 72%); } /* ═══════════════════════════════════════════════════════════════════════════ HAND-TUNED OVERRIDES After the generated tail on purpose. The generator inverts colour mechanically; everything below is a deliberate design call — status hues, the bands that were already dark, media frames, the brand ramp on buttons — and has to outrank it. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page chrome ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"] body { background: var(--bg); color: var(--ink); } :root[data-theme="dark"] header { background: rgba(10, 14, 26, .82); border-bottom-color: var(--line); } :root[data-theme="dark"] .hero::before, :root[data-theme="dark"] .phero::before { opacity: .5; } :root[data-theme="dark"] .hero .blob { opacity: .28; } :root[data-theme="dark"] .final { background: radial-gradient(600px 300px at 50% 0%, rgba(120, 128, 255, .16), transparent 70%), var(--bg); } :root[data-theme="dark"] footer { border-top-color: var(--line); } /* Anything painted with the brand ramp keeps enough contrast to read. */ :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn.fun { color: #0a0e1a; box-shadow: 0 12px 30px -10px rgba(139, 147, 245, .5); } :root[data-theme="dark"] .btn.ghost { border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .btn.ghost:hover { border-color: var(--acc); } /* ── Inputs ──────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: var(--ink); background: var(--surface2); border-color: var(--line); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #66708c; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(139, 147, 245, .18); } /* ── Status colours ──────────────────────────────────────────────────────── */ :root[data-theme="dark"] .alert.err { color: #ffa8a0; background: rgba(180, 35, 24, .16); border-color: rgba(255, 138, 128, .32); } :root[data-theme="dark"] .alert.ok { color: #6fd8a8; background: rgba(6, 118, 71, .16); border-color: rgba(111, 216, 168, .3); } :root[data-theme="dark"] .btn.danger { color: #ffa8a0; background: rgba(180, 35, 24, .14); border-color: rgba(255, 138, 128, .34); } :root[data-theme="dark"] .danger-zone { background: rgba(180, 35, 24, .1); border-color: rgba(255, 138, 128, .26); } :root[data-theme="dark"] .danger-zone b { color: #ffa8a0; } :root[data-theme="dark"] .caps-hint { color: #f0b17a; } :root[data-theme="dark"] .scene-out .o { color: #6fd8a8; background: rgba(31, 111, 104, .18); border-color: rgba(111, 216, 168, .26); } /* ── The already-dark bands need no inversion, only a touch more separation ── */ :root[data-theme="dark"] .band, :root[data-theme="dark"] .magic, :root[data-theme="dark"] .band-dark, :root[data-theme="dark"] .agent-door .door { border: 1px solid var(--line); } /* ── Media ───────────────────────────────────────────────────────────────── */ /* Films and mockups are light-UI captures; a hard white edge against a dark page is harsh, so soften the frame rather than the content. */ :root[data-theme="dark"] .show-card, :root[data-theme="dark"] .scene-card, :root[data-theme="dark"] .vis, :root[data-theme="dark"] .shot { border-color: var(--line); box-shadow: 0 30px 74px -44px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .show-card video { background: var(--surface3); } /* ── Translucent light surfaces ────────────────────────────────────────── The generated tail only understands hex. These are declared as rgba(255…) so they slipped through it and would have stayed near-white — the sticky download bar was white-on-white until this block existed. */ :root[data-theme="dark"] .dlbar { background: rgba(20, 26, 44, .94); border-color: var(--line); } :root[data-theme="dark"] .dlbar-copy b { color: var(--ink); } :root[data-theme="dark"] .dlbar-copy span { color: var(--mut); } :root[data-theme="dark"] .dlbar-close { color: var(--mut); } :root[data-theme="dark"] .strip { background: rgba(17, 23, 38, .88); } :root[data-theme="dark"] .fcard { background: rgba(20, 26, 44, .94); } :root[data-theme="dark"] .summary-card { background: rgba(20, 26, 44, .94); } :root[data-theme="dark"] .goal-panel, :root[data-theme="dark"] .goal-list a { background: rgba(20, 26, 44, .86); } :root[data-theme="dark"] .journey-card { background: rgba(20, 26, 44, .92); } :root[data-theme="dark"] .agent-primer-step { background: rgba(20, 26, 44, .88); } :root[data-theme="dark"] .docs-search-results { background: rgba(20, 26, 44, .98); } :root[data-theme="dark"] footer { background: rgba(15, 20, 36, .72); } /* ── Gradient-border "recommended" cards ───────────────────────────────── These paint a white fill and the brand ramp as a border in ONE background shorthand. The generated `.price`/`.dl-card` rule outranks the `.pop`/`.rec` variant and would flatten the ramp away, so restate it against the dark fill at a specificity that wins. */ :root[data-theme="dark"] .price.pop, :root[data-theme="dark"] .dl-card.rec { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; } /* ── Selection & scrollbars ──────────────────────────────────────────────── */ :root[data-theme="dark"] ::selection { background: rgba(139, 147, 245, .32); color: #fff; } :root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2b3350; border: 3px solid var(--bg); border-radius: 8px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4468; }