/* ─────────────────────────────────────────────────────────────────── Atasuai marketing site — dark theme Loaded by all three marketing layouts, after site.css. Every rule is inert until Partial/_ThemeBoot.cshtml puts data-theme="dark" on , which the header's toggle button flips (site.js → initTheme). ── Why this file looks the way it does ────────────────────────────── The marketing views carry their colours in ~4600 inline style="…" declarations, not in classes. An inline declaration outranks every selector, so a dark theme can only reach them two ways: rewrite the views, or override with `!important` from a sheet that can *find* them. CSS attribute-substring matching finds them — `[style*="color:#0F1B3D"]` selects exactly the elements whose inline style says that — and site.css already uses the same trick for the .hdr-dark mega panels. So the bulk of this file is a palette map: one rule per (property, literal) pair the views actually use, mapping the light value to its dark counterpart. Four things to know before editing: (a) The prefix is `[data-theme=dark]:not([data-chrome=dark])`, not just the theme. data-chrome is the page's *own* palette (see QarRazorPage.ChromeTheme): /live-streaming is drawn dark already, so it opts out of the map wholesale — otherwise the three white pills on its dark hero would be mapped to dark-on-dark. A future page designed dark gets the same exemption for free by setting chromeTheme. (b) A substring match is a substring match. `color:` is also the tail of `border-color:`, so the three literals used both ways carry a :not() that excludes the border form; `background:#fff` also matches `#FFF1E6`/`#FFF8EC`, so those two are restated *after* it. Adding a rule for a literal that is a prefix of another literal means checking for the same collision. (c) `color:#fff` is deliberately absent. White text sits on brand fills and dark panels that stay as they are, so mapping it would invert exactly the elements that were already right. (d) Only what the views actually contain is listed. Regenerate the survey with `grep -ohE '(color|background|solid): ?(#[0-9A-Fa-f]{3,8}|rgba?\([0-9., ]+\))'` over Views/Themes/Atasuai after a design change — an unmapped literal is a light-coloured island on a dark page, and nothing warns about it. ─────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════ 1 · Palette + semantic tokens ══════════════════════════════════════════════════════════════════ */ :root[data-theme=dark] { /* Surfaces. Navy-tinted rather than neutral so the brand blue sits on the same hue family it does in light mode. */ --au-d-page: #0B0F1A; /* page ground ← #fff / gray-50 */ --au-d-surface: #121826; /* cards, panels ← #fff */ --au-d-surface-2: #0F1522; /* alternating sections ← gray-50 */ --au-d-surface-3: #1A2130; /* chips, inset wells ← gray-100 */ --au-d-surface-4: #232B3B; /* pressed / gray-200 fills */ /* Tints — the soft colour washes behind icons, badges and stat cards. */ --au-d-tint-blue: #14203A; --au-d-tint-blue-2: #1A2A4A; --au-d-tint-blue-3: #24355C; --au-d-tint-green: #12291B; --au-d-tint-pink: #291422; --au-d-tint-red: #2E1516; --au-d-tint-amber: #2B2010; --au-d-tint-violet: #221B3D; /* Lines */ --au-d-line: #242C3D; --au-d-line-2: #2E3749; --au-d-line-blue: #27395C; --au-d-line-pink: #4A2337; /* Ink, four steps deep — mirrors the light scale (ink / 700 / 500 / 400). */ --au-d-ink: #E9EEF8; --au-d-ink-2: #C3CCDC; --au-d-ink-3: #98A3B5; --au-d-ink-4: #8B95A7; /* Accents. A 600-weight blue that reads on white is too dark to read on #0B0F1A, so text-blue lifts while *fills* keep their brand value. */ --au-d-blue: #7FA9FF; --au-d-blue-soft: #93B4FA; --au-d-green: #4ADE80; --au-d-pink: #FF6E9F; --au-d-amber: #FDBA74; --au-d-red: #FCA5A5; /* tokens.css semantics — anything already token-driven follows for free. */ --color-bg-page: var(--au-d-page); --color-bg-canvas: var(--au-d-page); --color-bg-inset: var(--au-d-surface-3); --color-bg-overlay: #05070D; --color-bg-scrim: rgba(3, 6, 14, 0.62); --color-bg-brand-subtle: var(--au-d-tint-blue); --color-bg-tint-blue: var(--au-d-tint-blue); --color-bg-tint-emerald: var(--au-d-tint-green); --color-bg-tint-amber: var(--au-d-tint-amber); --color-bg-tint-sky: var(--au-d-tint-blue); --color-bg-tint-pink: var(--au-d-tint-pink); --color-bg-tint-violet: var(--au-d-tint-violet); --color-bg-tint-slate: var(--au-d-surface-3); --color-text-primary: var(--au-d-ink); --color-text-secondary: var(--au-d-ink-2); --color-text-tertiary: var(--au-d-ink-3); --color-text-disabled: #6B7488; --color-text-brand: var(--au-d-blue); --color-text-success: var(--au-d-green); --color-text-warning: var(--au-d-amber); --color-text-error: var(--au-d-red); --color-text-info: #7DD3FC; --color-border-subtle: #1B2230; --color-border-default: var(--au-d-line); --color-border-strong: var(--au-d-line-2); --color-icon-default: var(--au-d-ink-3); --color-icon-strong: var(--au-d-ink-2); --elevation-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --elevation-medium: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --elevation-strong: 0 16px 32px -8px rgba(0, 0, 0, 0.7), 0 4px 8px -4px rgba(0, 0, 0, 0.5); /* Tells the UA to paint scrollbars, form controls and the caret dark. */ color-scheme: dark; } :root[data-theme=dark] body { background: var(--au-d-page); color: var(--au-d-ink); } :root[data-theme=dark] ::selection { background: rgba(127, 169, 255, 0.26); } /* /live-streaming is drawn dark already; it keeps its own ground. */ :root[data-theme=dark][data-chrome=dark] body { background: #0A0A0C; } /* ══════════════════════════════════════════════════════════════════ 2 · The palette map Every literal is listed twice: once as the Razor view wrote it (`color:#0F1B3D`) and once as the CSSOM re-serialises it (`color: rgb(15, 27, 61)`). site.js writes to element.style on reveal, hover and mobile-fit, and a single property write rewrites the whole attribute — hex becomes rgb(), commas gain spaces, `:` gains one. An element that has been touched no longer matches the authored form, so a one-form rule works until the visitor scrolls or hovers and then silently stops. Add both when you add a colour. ══════════════════════════════════════════════════════════════════ */ /* Primary ink — five literals, one colour. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(15,26,48)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(15, 26, 48)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(29,38,48)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(29, 38, 48)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#0F1A30" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#0C1732" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(12, 23, 50)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#0F1B3D" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(15, 27, 61)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#1C2A45" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(28, 42, 69)" i] { color: var(--au-d-ink) !important; } /* Secondary — gray-800/700/600 and the slates beside them. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(37,46,58)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(37, 46, 58)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(55,65,81)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(55, 65, 81)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(75,85,99)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(75, 85, 99)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#334155" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(51, 65, 85)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#475569" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(71, 85, 105)" i] { color: var(--au-d-ink-2) !important; } /* Tertiary — gray-500 and #64748B, the body grey of most pages. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(107,114,128)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(107, 114, 128)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#64748B" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(100, 116, 139)" i] { color: var(--au-d-ink-3) !important; } /* Quaternary — eyebrows, captions. gray-400 is also written as a border colour on seven elements, hence the exclusion. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(156,163,175)" i]:not([style*="border-color:rgb(156,163,175)" i]), [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(156, 163, 175)" i]:not([style*="border-color: rgb(156, 163, 175)" i]) { color: var(--au-d-ink-4) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(148,163,184)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(148, 163, 184)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#94A3B8" i] { color: var(--au-d-ink-4) !important; } /* Brand blue as text. Fills keep their value — see the surfaces below. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(46,111,232)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(46, 111, 232)" i] { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:#2E6FE8" i]:not([style*="border-color:#2E6FE8" i]), [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(46, 111, 232)" i]:not([style*="border-color: rgb(46, 111, 232)" i]) { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(79,137,252)" i]:not([style*="border-color:rgb(79,137,252)" i]), [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(79, 137, 252)" i]:not([style*="border-color: rgb(79, 137, 252)" i]) { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:#4F89FC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(79, 137, 252)" i] { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(30,84,181)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(30, 84, 181)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#1E54B5" i] { color: var(--au-d-blue-soft) !important; } /* Semantic accents. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(15,122,31)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(15, 122, 31)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#16A34A" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(22, 163, 74)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(26,189,53)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(26, 189, 53)" i] { color: var(--au-d-green) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(238,43,105)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(238, 43, 105)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#EE2B69" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(207,31,94)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(207, 31, 94)" i] { color: var(--au-d-pink) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:#C2410C" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(194, 65, 12)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(194,65,12)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(249,115,22)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(249, 115, 22)" i] { color: var(--au-d-amber) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(185,28,28)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(185, 28, 28)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#EB2735" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(235, 39, 53)" i] { color: var(--au-d-red) !important; } /* ═══ surfaces ═══ */ /* Cards and panels. */ [data-theme=dark]:not([data-chrome=dark]) [style*="background:#fff" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(255, 255, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F8F9FA" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(248, 249, 250)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: #F8F9FA" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(248, 249, 250)" i] { background-color: var(--au-d-surface) !important; } /* Page-level alternating bands. */ [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(249,250,251)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(249, 250, 251)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F9FAFB" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F9FBFE" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(249, 251, 254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F8FAFC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(248, 250, 252)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F6F8FC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(246, 248, 252)" i] { background-color: var(--au-d-surface-2) !important; } /* Inset wells, chips, muted fills. */ [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(243,244,246)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(243, 244, 246)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F3F4F6" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(237,240,245)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(237, 240, 245)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F1F4FB" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(241, 244, 251)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F1F4F9" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(241, 244, 249)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F4F6FC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(244, 246, 252)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#EEF1F6" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(238, 241, 246)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F1ECE1" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(241, 236, 225)" i] { background-color: var(--au-d-surface-3) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(229,231,235)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(229, 231, 235)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(226,232,240)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(226, 232, 240)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(209,213,219)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(209, 213, 219)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#E5E7EB" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#E2E8F0" i] { background-color: var(--au-d-surface-4) !important; } /* Tints. */ [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(239,244,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(239, 244, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#EFF4FF" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#EEF4FF" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(238, 244, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F1F5FE" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(241, 245, 254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F4F8FF" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(244, 248, 255)" i] { background-color: var(--au-d-tint-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(221,232,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(221, 232, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#DDE8FF" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#DCE7FB" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(220, 231, 251)" i] { background-color: var(--au-d-tint-blue-2) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(185,208,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(185, 208, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(148,183,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(148, 183, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#C3D6FA" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(195, 214, 250)" i] { background-color: var(--au-d-tint-blue-3) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(214,245,220)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(214, 245, 220)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#ECFDF3" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(236, 253, 243)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#D6F5DC" i] { background-color: var(--au-d-tint-green) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(253,242,248)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(253, 242, 248)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#FDF2F8" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(250,209,228)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(250, 209, 228)" i] { background-color: var(--au-d-tint-pink) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(255,237,213)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(255, 237, 213)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(255,247,237)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(255, 247, 237)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(254,243,199)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(254, 243, 199)" i] { background-color: var(--au-d-tint-amber) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(237,233,254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(237, 233, 254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(243,232,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(243, 232, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(224,242,254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(224, 242, 254)" i] { background-color: var(--au-d-tint-violet) !important; } /* Restated after `background:#fff`, which matches these as a substring. */ [data-theme=dark]:not([data-chrome=dark]) [style*="background:#FFF1E6" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(255, 241, 230)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#FFF8EC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(255, 248, 236)" i] { background-color: var(--au-d-tint-amber) !important; } /* ═══ borders ═══ */ /* Hairlines. */ [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(229,231,235)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(229, 231, 235)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(237,240,245)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(237, 240, 245)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #E5E7EB" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #E6EAF2" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(230, 234, 242)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #E9EDF4" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(233, 237, 244)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #E4EAF4" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(228, 234, 244)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #EEF1F6" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(238, 241, 246)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #DDE3EE" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(221, 227, 238)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #D6DEEC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(214, 222, 236)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgba(15,27,61,0.07)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgba(15, 27, 61, 0.07)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgba(15,26,48,.06)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgba(15, 26, 48, 0.06)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(229,231,235)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(229, 231, 235)" i] { border-color: var(--au-d-line) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(243,244,246)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(243, 244, 246)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #F3F4F6" i] { border-color: #1F2736 !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(226,232,240)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(226, 232, 240)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(209,213,219)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(209, 213, 219)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(156,163,175)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(156, 163, 175)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(120,135,160)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(120, 135, 160)" i] { border-color: var(--au-d-line-2) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(221,232,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(221, 232, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(185,208,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(185, 208, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(185,208,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(185, 208, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(148,183,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(148, 183, 255)" i] { border-color: var(--au-d-line-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(250,209,228)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(250, 209, 228)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(250,209,228)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(250, 209, 228)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color:rgb(247,206,224)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="border-color: rgb(247, 206, 224)" i] { border-color: var(--au-d-line-pink) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(252,217,182)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(252, 217, 182)" i] { border-color: #4A3320 !important; } /* ═══ gradients — only the pale ones ═══ */ /* */ [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(160deg,#EEF4FF,#DDE8FF)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(160deg, rgb(238, 244, 255), rgb(221, 232, 255))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg,rgb(239,244,255),rgb(185,208,255))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg, rgb(239, 244, 255), rgb(185, 208, 255))" i] { background-image: linear-gradient(160deg, #1A2942, #131B2E) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg,rgb(243,244,246),rgb(209,213,219))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg, rgb(243, 244, 246), rgb(209, 213, 219))" i] { background-image: linear-gradient(135deg, #1C2331, #262E3E) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg,#fff,rgb(249,250,251))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg, rgb(255, 255, 255), rgb(249, 250, 251))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg,#FFFFFF,#FBFCFE)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg, rgb(255, 255, 255), rgb(251, 252, 254))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg,rgb(252,248,243),rgb(255,253,250))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg, rgb(252, 248, 243), rgb(255, 253, 250))" i] { background-image: linear-gradient(180deg, #141B2A, #10151F) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg,#F4F8FF 0%,#FFFFFF 88%)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg, rgb(244, 248, 255) 0%, rgb(255, 255, 255) 88%)" i] { background-image: linear-gradient(180deg, #16233C 0%, #0B0F1A 88%) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg,rgb(253,242,248),rgb(250,209,228))" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg, rgb(253, 242, 248), rgb(250, 209, 228))" i] { background-image: linear-gradient(135deg, #2A1522, #3A1B2C) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(90deg,#B9CFFA,#E2E8F0)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(90deg, rgb(185, 207, 250), rgb(226, 232, 240))" i] { background-image: linear-gradient(90deg, #2B3E63, #262E3E) !important; } /* ── Gradients the map did not already carry ── The hex spellings of two gradients already listed in rgb() form, the white fade that closes a section, and the pale hero washes. The last rule is the one layered background in the views: `radial-gradient(…), rgb(249,250,251)` sets background-image *and* background-color, so only the colour layer is replaced and the tint on top of it survives. */ [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg,#EFF4FF,#B9D0FF)" i] { background-image: linear-gradient(160deg, #1A2942, #131B2E) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(135deg,#F3F4F6,#D1D5DB)" i] { background-image: linear-gradient(135deg, #1C2331, #262E3E) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg,rgba(255,255,255,0),#fff)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="linear-gradient(180deg, rgba(255, 255, 255, 0), rgb(255, 255, 255))" i] { background-image: linear-gradient(180deg, rgba(11, 15, 26, 0), #0B0F1A) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="radial-gradient(120% 130% at 18% 0%,rgb(239,244,255),#fff 62%)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="radial-gradient(120% 130% at 18% 0%, rgb(239, 244, 255), rgb(255, 255, 255) 62%)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="radial-gradient(120% 140% at 12% 0%,rgb(239,244,255),#fff 62%)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="radial-gradient(120% 140% at 12% 0%, rgb(239, 244, 255), rgb(255, 255, 255) 62%)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="radial-gradient(120% 140% at 12% 0%,rgb(239,244,255),#fff 60%)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="radial-gradient(120% 140% at 12% 0%, rgb(239, 244, 255), rgb(255, 255, 255) 60%)" i] { background-image: radial-gradient(120% 140% at 15% 0%, #16233C, #0B0F1A 62%) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*=",rgb(249,250,251)" i], [data-theme=dark]:not([data-chrome=dark]) [style*=", rgb(249, 250, 251)" i] { background-color: var(--au-d-surface-2) !important; } /* ── The long tail ── Everything above is a colour many pages share. These are the one-offs: the near-whites the device mock-ups are built from, the semantic text colours a single stat card reaches for, the tinted hairlines. Found by scanning every view for a literal whose luminance says "light surface" and diffing that against the rules above — repeat that scan after a design change rather than trusting this list to still be complete. */ /* Text — the semantic one-offs each page reaches for. */ [data-theme=dark]:not([data-chrome=dark]) [style*="color:#0F7A1F" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(15, 122, 31)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#166534" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(22, 101, 52)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#15803D" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(21, 128, 61)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(21,128,61)" i] { color: var(--au-d-green) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:#E11D48" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(225, 29, 72)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#B91C1C" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(185, 28, 28)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(159,18,68)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(159, 18, 68)" i] { color: #FDA4AF !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(3,105,161)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(3, 105, 161)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#0369A1" i] { color: #7DD3FC !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(109,40,217)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(109, 40, 217)" i] { color: #C4B5FD !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:#1B5AD1" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(27, 90, 209)" i] { color: var(--au-d-blue-soft) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:#B45309" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(180, 83, 9)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#7A4E00" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(122, 78, 0)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:#8A6410" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(138, 100, 16)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(120,90,55)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(120, 90, 55)" i] { color: var(--au-d-amber) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(71,85,105)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(71, 85, 105)" i] { color: var(--au-d-ink-2) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="color:rgb(14,31,66)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="color: rgb(14, 31, 66)" i] { color: var(--au-d-ink) !important; } /* Surfaces — the near-whites the device mock-ups are built from. A translucent white keeps its translucency so the glow behind it still reads. */ [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgba(255,255,255,.96)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgba(255, 255, 255, 0.96)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgba(255,255,255,.94)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgba(255, 255, 255, 0.94)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgba(255,255,255,.92)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgba(255, 255, 255, 0.92)" i] { background-color: rgba(18, 24, 38, 0.94) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:#FCFDFE" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(252, 253, 254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#F8FAFD" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(248, 250, 253)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(252,252,253)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(252, 252, 253)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#fdfdfb" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(253, 253, 251)" i] { background-color: var(--au-d-surface) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(244,247,252)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(244, 247, 252)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(241,245,249)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(241, 245, 249)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(247,249,252)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(247, 249, 252)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(247,250,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(247, 250, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#EEF2F8" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(238, 242, 248)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(237,242,250)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(237, 242, 250)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#FCFAF4" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(252, 250, 244)" i] { background-color: var(--au-d-surface-2) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:#E2E8F4" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(226, 232, 244)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#CBD5E1" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(203, 213, 225)" i] { background-color: var(--au-d-surface-4) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(232,238,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(232, 238, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(219,232,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(219, 232, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(232,240,254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(232, 240, 254)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#E0F2FE" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(224, 242, 254)" i] { background-color: var(--au-d-tint-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(240,253,244)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(240, 253, 244)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:#DCF8C6" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(220, 248, 198)" i] { background-color: var(--au-d-tint-green) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(254,226,226)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(254, 226, 226)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(254,242,242)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(254, 242, 242)" i] { background-color: var(--au-d-tint-red) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="background:rgb(253,247,250)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="background: rgb(253, 247, 250)" i] { background-color: var(--au-d-tint-pink) !important; } /* Borders. `2px solid #fff` is the ring that cuts one stacked avatar out of the next — it follows the card it sits on, not the page. */ [data-theme=dark]:not([data-chrome=dark]) [style*="solid #fff" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(255, 255, 255)" i] { border-color: var(--au-d-surface) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid #F1F4F9" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(241, 244, 249)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #EAEFF7" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(234, 239, 247)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(233,237,243)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(233, 237, 243)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(219,228,242)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(219, 228, 242)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(237,239,242)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(237, 239, 242)" i] { border-color: var(--au-d-line) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(239,244,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(239, 244, 255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(148,183,255)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(148, 183, 255)" i] { border-color: var(--au-d-line-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid #F6D3E1" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(246, 211, 225)" i] { border-color: var(--au-d-line-pink) !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid #F2E3C8" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(242, 227, 200)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #F6EEDC" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(246, 238, 220)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid #FCEBC7" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(252, 235, 199)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(238,228,214)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(238, 228, 214)" i] { border-color: #4A3320 !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid #D9F2E1" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(217, 242, 225)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(187,247,208)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(187, 247, 208)" i] { border-color: #1E3B2A !important; } [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(254,202,202)" i], [data-theme=dark]:not([data-chrome=dark]) [style*="solid rgb(254, 202, 202)" i] { border-color: #4A2626 !important; } /* ══════════════════════════════════════════════════════════════════ 6 · Header ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .hdr-bg { background: rgba(11, 15, 26, 0.72) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* An uploaded logo is a flat raster with a navy wordmark — it vanishes here. The inline SVG takes over and its two fills are tinted instead; _MarketingLogo.cshtml renders both so this is a swap, not a re-render. */ [data-theme=dark] .au-logo-img { display: none !important; } [data-theme=dark] .au-logo-alt { display: block !important; } [data-theme=dark]:not([data-chrome=dark]) .au-logo-text { fill: #FFFFFF; } [data-theme=dark]:not([data-chrome=dark]) .au-hdr-link { color: var(--au-d-ink-2) !important; } [data-theme=dark]:not([data-chrome=dark]) .au-hdr-link:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--au-d-ink) !important; } [data-theme=dark]:not([data-chrome=dark]) .au-hdr-link.is-open { background: rgba(255, 255, 255, 0.1) !important; } /* Mega panels. §3 already darkened the panel fill; these are the parts that are class-driven or that the map would have got wrong. */ [data-theme=dark]:not([data-chrome=dark]) .au-hdr-panel { box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.75) !important; } [data-theme=dark]:not([data-chrome=dark]) .au-hdr-mega-item:hover { background: rgba(255, 255, 255, 0.05) !important; } [data-theme=dark]:not([data-chrome=dark]) .au-hdr-mega-item:hover .au-hdr-ico { background: rgb(46, 111, 232) !important; border-color: rgb(46, 111, 232) !important; color: #fff !important; } /* The products spotlight is a dark navy card in light mode too, so its white pill has to survive the `background:#fff` / `color:#0F1B3D` map intact. */ [data-theme=dark]:not([data-chrome=dark]) [data-panel="products"] .au-hdr-spot-btn { background: #fff !important; color: #0C1732 !important; } [data-theme=dark]:not([data-chrome=dark]) .au-hdr-spot:hover .au-hdr-spot-btn { background: #fff !important; color: #0C1732 !important; } [data-theme=dark]:not([data-chrome=dark]) [data-panel="company"] .au-hdr-spot-btn, [data-theme=dark]:not([data-chrome=dark]) [data-panel="company"] .au-hdr-spot:hover .au-hdr-spot-btn { background: rgb(79, 137, 252) !important; color: #fff !important; } /* Language switcher + the theme button beside it. */ [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-btn { background: rgba(255, 255, 255, 0.06) !important; color: var(--au-d-ink) !important; border-color: rgba(255, 255, 255, 0.14) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-btn:hover { background: rgba(255, 255, 255, 0.12) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-menu { background: var(--au-d-surface) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-opt { color: var(--au-d-ink-2) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-opt:hover { background: rgba(255, 255, 255, 0.06) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-code { background: rgba(255, 255, 255, 0.08) !important; color: var(--au-d-ink-3) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-opt[data-active="true"] { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-opt[data-active="true"] .hdr-lang-code { background: rgba(127, 169, 255, 0.16) !important; color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-lang-check { color: var(--au-d-blue) !important; } [data-theme=dark] .hdr-theme { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.14); } [data-theme=dark] .hdr-theme:hover { background: rgba(255, 255, 255, 0.12); } /* Compact header + full-screen drawer. */ [data-theme=dark]:not([data-chrome=dark]) .hdr-burger, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-close { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-mobile, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-foot { background: var(--au-d-page) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-top, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-foot { border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-group, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-acad2 { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-gbtn, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-tt, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-acad2 { color: var(--au-d-ink) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-dd { color: var(--au-d-ink-3) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-ico { border-color: rgba(255, 255, 255, 0.12) !important; color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-item:active, [data-theme=dark]:not([data-chrome=dark]) .hdr-m-close:active { background: rgba(255, 255, 255, 0.07) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-m-cta { color: #fff !important; border-color: rgba(255, 255, 255, 0.16) !important; } /* Language bottom sheet. */ [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-panel { background: var(--au-d-surface) !important; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.8) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-scrim { background: rgba(3, 6, 14, 0.62) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-grip { background: rgba(255, 255, 255, 0.2) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-title { color: var(--au-d-ink-4) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-opt { color: var(--au-d-ink) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-opt:hover, [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-opt:active { background: rgba(255, 255, 255, 0.06) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-opt[data-active="true"] { background: rgba(127, 169, 255, 0.12) !important; color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) .hdr-ls-check { color: var(--au-d-blue) !important; } /* ══════════════════════════════════════════════════════════════════ 7 · Footer ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .ftr { background-color: #080B12 !important; border-top-color: rgba(255, 255, 255, 0.08) !important; } [data-theme=dark]:not([data-chrome=dark]) .ftr-link { color: var(--au-d-ink-3) !important; } [data-theme=dark]:not([data-chrome=dark]) .ftr-link:hover { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) .ftr-bottom { border-top-color: rgba(255, 255, 255, 0.08) !important; } [data-theme=dark]:not([data-chrome=dark]) .ftr-soc { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* ══════════════════════════════════════════════════════════════════ 8 · Contact block — Partial/_ContactBlock.cshtml ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .cb-sec { background: var(--au-d-page); } [data-theme=dark]:not([data-chrome=dark]) .cb-h, [data-theme=dark]:not([data-chrome=dark]) .cb-val { color: var(--au-d-ink); } [data-theme=dark]:not([data-chrome=dark]) .cb-sub, [data-theme=dark]:not([data-chrome=dark]) .cb-ok-tx { color: var(--au-d-ink-2); } [data-theme=dark]:not([data-chrome=dark]) .cb-iam, [data-theme=dark]:not([data-chrome=dark]) .cb-flbl { color: var(--au-d-ink-3); } [data-theme=dark]:not([data-chrome=dark]) .cb-lbl { color: var(--au-d-ink-4); } [data-theme=dark]:not([data-chrome=dark]) .cb-card { background: var(--au-d-surface); border-color: var(--au-d-line); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8); } [data-theme=dark]:not([data-chrome=dark]) .cb-ico--blue { background: var(--au-d-tint-blue); color: var(--au-d-blue); } [data-theme=dark]:not([data-chrome=dark]) .cb-ico--green, [data-theme=dark]:not([data-chrome=dark]) .cb-ok-ico { background: var(--au-d-tint-green); } [data-theme=dark]:not([data-chrome=dark]) .cb-seg { background: var(--au-d-surface-3); border-color: var(--au-d-line); color: var(--au-d-ink-3); } [data-theme=dark]:not([data-chrome=dark]) .cb-seg:hover { border-color: var(--au-d-line-2); } [data-theme=dark]:not([data-chrome=dark]) .cb-seg.is-on { border-color: var(--au-d-blue); background: rgba(127, 169, 255, 0.14); color: var(--au-d-blue); } [data-theme=dark]:not([data-chrome=dark]) .cb-inp { background: var(--au-d-surface-3); border-color: var(--au-d-line); color: var(--au-d-ink); } [data-theme=dark]:not([data-chrome=dark]) .cb-inp::placeholder { color: var(--au-d-ink-4); } [data-theme=dark]:not([data-chrome=dark]) .cb-inp:focus { border-color: var(--au-d-blue); box-shadow: 0 0 0 3px rgba(127, 169, 255, 0.24); } [data-theme=dark]:not([data-chrome=dark]) .cb-tel-ico { color: var(--au-d-green); } /* ══════════════════════════════════════════════════════════════════ 9 · "How it works" dialog — Partial/_HowVideoModal.cshtml The stage and its bar are dark in both themes; only the panel around them changes. ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .hv-scrim { background: rgba(3, 6, 14, 0.68); } [data-theme=dark]:not([data-chrome=dark]) .hv-panel { background: var(--au-d-surface); color: var(--au-d-ink); box-shadow: 0 60px 120px -44px rgba(0, 0, 0, 0.9); } [data-theme=dark]:not([data-chrome=dark]) .hv-t { color: var(--au-d-ink); } [data-theme=dark]:not([data-chrome=dark]) .hv-x { background: rgba(255, 255, 255, 0.08); color: var(--au-d-ink-2); } [data-theme=dark]:not([data-chrome=dark]) .hv-x:hover { background: rgba(255, 255, 255, 0.16); } [data-theme=dark]:not([data-chrome=dark]) .hv-tab { background: var(--au-d-surface-3); border-color: var(--au-d-line); color: var(--au-d-ink-2); } [data-theme=dark]:not([data-chrome=dark]) .hv-tab:hover { border-color: var(--au-d-line-2); } [data-theme=dark]:not([data-chrome=dark]) .hv-tab.is-on { border-color: var(--au-d-blue); background: rgba(127, 169, 255, 0.14); color: var(--au-d-blue); } /* ══════════════════════════════════════════════════════════════════ 10 · Help centre — marketing/help.css That sheet is entirely variable-driven on `.hc`, so the theme is a token swap. Two exceptions below: --blue-600 doubles as a hover *fill* on the chat buttons, and lifting it for text would wash those out. ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .hc { --ink: var(--au-d-ink); --ink-soft: var(--au-d-ink-2); --body: #B7C1D2; --muted: var(--au-d-ink-3); --faint: var(--au-d-ink-4); --border: var(--au-d-line); --hairline: rgba(255, 255, 255, 0.08); --page: var(--au-d-page); --card: var(--au-d-surface); --blue-50: var(--au-d-tint-blue); --blue-100: var(--au-d-line-blue); --blue-300: #2E4A80; --blue-600: var(--au-d-blue); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-hover: 0 12px 32px -14px rgba(0, 0, 0, 0.7); --focus-ring: 0 0 0 4px rgba(127, 169, 255, 0.22); } [data-theme=dark]:not([data-chrome=dark]) .hc .chat-fab:hover, [data-theme=dark]:not([data-chrome=dark]) .hc .chat-send:hover { background: rgb(46, 111, 232); } /* The surfaces that spell #fff out instead of reaching for --card. */ [data-theme=dark]:not([data-chrome=dark]) .hc .search, [data-theme=dark]:not([data-chrome=dark]) .hc .search-results, [data-theme=dark]:not([data-chrome=dark]) .hc .qa, [data-theme=dark]:not([data-chrome=dark]) .hc .chat, [data-theme=dark]:not([data-chrome=dark]) .hc .chat-in, [data-theme=dark]:not([data-chrome=dark]) .hc .chat-chip, [data-theme=dark]:not([data-chrome=dark]) .hc .msg.bot, [data-theme=dark]:not([data-chrome=dark]) .hc .msg-hit:hover, [data-theme=dark]:not([data-chrome=dark]) .hc .typing { background: var(--card); } [data-theme=dark]:not([data-chrome=dark]) .hc .cat-card.is-off .cat-ico { background: var(--au-d-surface-3); } [data-theme=dark]:not([data-chrome=dark]) .hc .chat-fab .pulse { border-color: var(--au-d-surface); } /* The CTA band is navy in both themes, so its white button keeps dark lettering — --ink has just become near-white, which would have painted white on white. */ [data-theme=dark]:not([data-chrome=dark]) .hc .cta-btn.pri { color: #0F1B3D; } /* Screenshots inside an answer keep a light ground of their own; a hairline stops them from bleeding into the card. */ [data-theme=dark]:not([data-chrome=dark]) .hc .qa-a img { border: 1px solid var(--au-d-line); border-radius: 8px; } /* ══════════════════════════════════════════════════════════════════ 11 · Landing layout — _LandingLayout.cshtml (/ref) ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .ld-hdr { background: rgba(11, 15, 26, 0.86) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-lang-btn { background: rgba(255, 255, 255, 0.06) !important; color: var(--au-d-ink) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-lang-btn:hover { background: rgba(255, 255, 255, 0.12) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-lang-menu { background: var(--au-d-surface) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.7) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-lang-opt { color: var(--au-d-ink-2) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-lang-opt:hover { background: rgba(255, 255, 255, 0.06) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-lang-opt .ld-lang-check { color: var(--au-d-blue) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-ftr { background: var(--au-d-page) !important; border-top-color: rgba(255, 255, 255, 0.08) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-ftr-copy, [data-theme=dark]:not([data-chrome=dark]) .ld-ftr-links, [data-theme=dark]:not([data-chrome=dark]) .ld-ftr-links a { color: var(--au-d-ink-3) !important; } [data-theme=dark]:not([data-chrome=dark]) .ld-ftr-links a:hover { color: var(--au-d-ink) !important; } /* ══════════════════════════════════════════════════════════════════ 12 · Shared odds and ends ══════════════════════════════════════════════════════════════════ */ [data-theme=dark]:not([data-chrome=dark]) .ax-accent { color: var(--au-d-blue); } /* ══════════════════════════════════════════════════════════════════ 13 · Page-local styles The map above only reaches inline style="…". Each marketing page also ships a small