/* ═══════════════════════════════════════════════════════════════════════ PUBLIC THEMES Five palettes, each with a dark and a light mode, driving every page a signed-out visitor can reach. The app itself keeps its own themes — this is the marketing surface only. WHY THESE FIVE, AND NOT FIVE HUE ROTATIONS The brief was that the site looked machine-made, and it did: dark navy with a blue→purple→magenta gradient is the single most common palette in generated web design, and the page carried the rest of the genre with it — gradient-clipped headlines, glassmorphism, thirteen emoji standing in for icons, nine different corner radii. Hue alone does not fix that. A generated look comes from arbitrariness: colours that refer to nothing, geometry with no argument behind it. So each theme here is borrowed from something real in the history of finance, and each carries its own GEOMETRY and TYPOGRAPHIC VOICE, which between them change the feel more than colour does: terminal Trading-floor phosphor. P3 amber on near-black, the colour of a Bloomberg screen. Near-square corners, monospace display. ledger Accounting paper. Cream, ink, oxblood for the negative column and forest for the positive — the actual colours of a ledger. Serif display, light mode first. salmon Financial newsprint. The pink stock, teal and claret. Almost no radius at all, serif display. slate A measuring instrument. Neutral graphite, ONE signal orange used sparingly. Restraint is the whole idea: no gradients. midnight The original, tightened — one accent instead of a three-stop rainbow, and now with a light mode. HOW IT APPLIES data-mode may be absent, in which case the system preference decides. The inline script in each page's sets both before first paint, because applying a theme after render is a flash of the wrong colours on every single load. Every value below is a token the pages already speak — the vocabulary was shared between landing.html and guides.css before this existed, which is why one file can drive the whole public site. ═══════════════════════════════════════════════════════════════════════ */ /* ── Shared, theme-independent ──────────────────────────────────────── */ :root { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* Per-theme below; these are the fallbacks. */ --font-display: var(--sans); --display-weight: 800; --display-tracking: -1.8px; --radius: 18px; --radius-sm: 11px; /* The shared header's height. Lived on landing.html's :root, which is the one page that no longer needs to know it. */ --nav-h: 62px; /* Only the themes that earn it set a real gradient. The rest resolve --grad to a flat accent, so a headline written to use it stays solid rather than needing different markup per theme. */ --grad: var(--accent); --tint: #ffffff; --on-accent: #ffffff; /* The hero scrim over the product screenshots. Those captures are of a dark application whatever palette the site is wearing, so a light page needs a far heavier veil than a dark one — at the dark values a light hero showed the screenshots through as a blue-purple smear. Dark is the default and every light block overrides it. WHICH blocks those are is decided by the luminance of the palette's own --bg, not by a list of theme names: that list already exists three times in this file (ambient, opaque nav, color-scheme) and a tenth palette would have to remember all of them. The test derives the same way, so the two cannot drift. */ --veil-in: 34%; --veil-out: 62%; } /* ═══ MIDNIGHT ═══ the original, with the rainbow pulled back to two stops and a light mode added. Kept so nothing that shipped is lost. */ [data-theme="midnight"] { --bg: #060810; --bg-1: #0b0f1a; --bg-2: #111627; --bg-3: #1a2138; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --text: #eef1fa; --text-dim: #9aa3c0; --text-mute: #5b647f; --accent: #6aa1ff; --accent-2: #8b7bff; --good: #3ddc97; --bad: #ff6b6b; --warn: #ffb547; --grad: linear-gradient(115deg, #6aa1ff, #8b7bff); --radius: 18px; --radius-sm: 11px; --font-display: var(--sans); --display-weight: 800; --display-tracking: -1.8px; --on-accent: #06101f; } [data-theme="midnight"][data-mode="light"] { --bg: #f7f8fc; --bg-1: #eef0f7; --bg-2: #e4e7f0; --bg-3: #d6dae6; --border: rgba(13,16,32,.10); --border-strong: rgba(13,16,32,.18); --text: #0d1020; --text-dim: #454c63; --text-mute: #6e7690; --accent: #2f5fc4; --accent-2: #5a41c0; --good: #0f7a4f; --bad: #c4342f; --warn: #9a6200; --grad: linear-gradient(115deg, #2f5fc4, #5a41c0); --tint: #0d1020; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } /* ═══ TERMINAL ═══ P3 phosphor amber on near-black. The corners go almost square and the display face turns monospace: a trading terminal never had an 18px radius or a geometric sans. */ [data-theme="terminal"] { --bg: #0a0b0a; --bg-1: #101210; --bg-2: #171a17; --bg-3: #212520; --border: rgba(255,214,140,.13); --border-strong: rgba(255,214,140,.24); --text: #ece9df; --text-dim: #9b9d92; --text-mute: #64675e; --accent: #ffb000; --accent-2: #ff8c1a; --good: #45d97a; --bad: #ff5f56; --warn: #ffb000; --grad: var(--accent); --radius: 3px; --radius-sm: 2px; --font-display: var(--mono); --display-weight: 700; --display-tracking: -1px; --on-accent: #1a1200; } [data-theme="terminal"][data-mode="light"] { --bg: #f3f0e6; --bg-1: #ebe7d9; --bg-2: #e2ddcb; --bg-3: #d5cfb8; --border: rgba(26,28,25,.14); --border-strong: rgba(26,28,25,.24); --text: #1a1c19; --text-dim: #474a43; --text-mute: #74786d; --accent: #9a5b00; --accent-2: #8a4a00; --good: #12703f; --bad: #b8322a; --warn: #8a5a00; --tint: #1a1c19; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } /* ═══ LEDGER ═══ Accounting paper: cream stock, ink, and the two colours a ledger actually used — oxblood for what you owe, forest for what you hold. Serif display, and light is the primary mode. */ [data-theme="ledger"][data-mode="light"], [data-theme="ledger"]:not([data-mode="dark"]) { --bg: #faf7f0; --bg-1: #f3efe3; --bg-2: #ebe5d5; --bg-3: #ddd5c0; --border: rgba(22,19,15,.13); --border-strong: rgba(22,19,15,.22); --text: #16130f; --text-dim: #4a443b; --text-mute: #7d7568; --accent: #1f3a5f; --accent-2: #8b2635; --good: #1d5c3f; --bad: #8b2635; --warn: #8a5a12; --grad: var(--accent); --radius: 4px; --radius-sm: 3px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.6px; --tint: #16130f; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } [data-theme="ledger"] { --bg: #14120e; --bg-1: #1c1913; --bg-2: #26221a; --bg-3: #332d22; --border: rgba(240,235,223,.12); --border-strong: rgba(240,235,223,.2); --text: #f0ebdf; --text-dim: #a89e8c; --text-mute: #6f6757; --accent: #8fb3d9; --accent-2: #d98d99; --good: #6fbf92; --bad: #d98d99; --warn: #d9b26f; --grad: var(--accent); --radius: 4px; --radius-sm: 3px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.6px; --tint: #ffffff; --on-accent: #10161d; } /* ═══ SALMON ═══ Financial newsprint — the pink stock, the teal, the claret. Radius almost to zero: newspaper columns have corners. */ [data-theme="salmon"][data-mode="light"], [data-theme="salmon"]:not([data-mode="dark"]) { --bg: #fff1e5; --bg-1: #fbe8d9; --bg-2: #f6dfcc; --bg-3: #edd0b7; --border: rgba(51,48,46,.15); --border-strong: rgba(51,48,46,.26); --text: #33302e; --text-dim: #5c5651; --text-mute: #8a827a; --accent: #0d7680; --accent-2: #990f3d; --good: #0d7680; --bad: #990f3d; --warn: #96600a; --grad: var(--accent); --radius: 2px; --radius-sm: 2px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.8px; --tint: #33302e; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } [data-theme="salmon"] { --bg: #22282a; --bg-1: #2a3133; --bg-2: #343c3e; --bg-3: #424b4e; --border: rgba(255,241,229,.13); --border-strong: rgba(255,241,229,.22); --text: #fff1e5; --text-dim: #b8aca2; --text-mute: #8b837b; --accent: #5ec2ce; --accent-2: #f08098; --good: #5ec2ce; --bad: #f08098; --warn: #e0b070; --grad: var(--accent); --radius: 2px; --radius-sm: 2px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.8px; --tint: #ffffff; --on-accent: #0d2124; } /* ═══ SLATE ═══ A measuring instrument. Neutral graphite and ONE signal colour, used where something is actually signalled. No gradient anywhere: the restraint is the identity. Slate has two identities — the default palette AND a named one — and the :not([data-theme]) is what keeps them apart. Written as a bare `:root` it has the same specificity as `[data-theme="midnight"]` but sits lower in the file, so it silently won: picking midnight, terminal, ledger or salmon painted Slate's graphite instead. Requiring the attribute to be ABSENT means the default block can never co-match a chosen palette, whatever the source order. Same reason the light block below is written twice rather than relying on the bare form. */ :root:not([data-theme]), [data-theme="slate"] { --bg: #15171b; --bg-1: #1b1e23; --bg-2: #23272d; --bg-3: #2e333a; --border: rgba(232,234,236,.10); --border-strong: rgba(232,234,236,.18); --text: #e8eaec; --text-dim: #969ba2; --text-mute: #676c73; --accent: #ff5f1f; --accent-2: #ff5f1f; --good: #4caf7d; --bad: #e5484d; --warn: #e0a030; --grad: var(--accent); --radius: 6px; --radius-sm: 4px; --font-display: var(--sans); --display-weight: 700; --display-tracking: -1.4px; --on-accent: #1a0700; } /* The default visitor carries no data-theme, so a rule that requires one never fires: clicking the sun set data-mode="light", saved it, and nothing on the page changed. Both forms are needed. */ :root:not([data-theme])[data-mode="light"], [data-theme="slate"][data-mode="light"] { --bg: #f4f5f7; --bg-1: #eceef1; --bg-2: #e2e5e9; --bg-3: #d2d6dc; --border: rgba(20,22,26,.12); --border-strong: rgba(20,22,26,.2); --text: #14161a; --text-dim: #464b53; --text-mute: #757a82; --accent: #c74400; --accent-2: #c74400; --good: #14764c; --bad: #c02a2f; --warn: #8a5c00; --tint: #14161a; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } /* ═══ VERMILLION ═══ Sumi ink and washi paper, with the single red of a carved seal. One accent, used like a stamp — not a wash. The radius goes to nothing: a seal has edges. */ [data-theme="vermillion"] { --bg: #14110f; --bg-1: #1c1917; --bg-2: #262220; --bg-3: #332e2b; --border: rgba(240,232,224,.12); --border-strong: rgba(240,232,224,.2); --text: #f2ece5; --text-dim: #a89f96; --text-mute: #6e675f; --accent: #e34234; --accent-2: #c9302c; --good: #7fa86a; --bad: #e34234; --warn: #d9a441; --grad: var(--accent); --tint: #ffffff; --radius: 1px; --radius-sm: 1px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.4px; --on-accent: #1c0503; } [data-theme="vermillion"][data-mode="light"] { --bg: #f7f3ec; --bg-1: #efe9df; --bg-2: #e6ded1; --bg-3: #d8cebd; --border: rgba(20,17,15,.14); --border-strong: rgba(20,17,15,.24); --text: #14110f; --text-dim: #4a423b; --text-mute: #7a716a; --accent: #b32d20; --accent-2: #8f2419; --good: #3f6b32; --bad: #b32d20; --warn: #8a6212; --tint: #14110f; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } /* ═══ ALMANAC ═══ A market almanac: parchment, deep field green, and brass. Warm where fintech is usually cold, and light-first — an almanac is a printed thing. */ [data-theme="almanac"][data-mode="light"], [data-theme="almanac"]:not([data-mode="dark"]) { --bg: #f6f2e6; --bg-1: #eee9d9; --bg-2: #e5dfca; --bg-3: #d6ceb2; --border: rgba(26,38,28,.15); --border-strong: rgba(26,38,28,.25); --text: #1a261c; --text-dim: #45513f; --text-mute: #77806c; --accent: #1f5133; --accent-2: #8a6a1f; --good: #1f5133; --bad: #9c3128; --warn: #8a6a1f; --grad: var(--accent); --tint: #1a261c; --radius: 5px; --radius-sm: 4px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.5px; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } [data-theme="almanac"] { --bg: #101610; --bg-1: #172017; --bg-2: #1f2b1f; --bg-3: #2b392a; --border: rgba(232,238,224,.12); --border-strong: rgba(232,238,224,.2); --text: #e8eee0; --text-dim: #9fab97; --text-mute: #697061; --accent: #7fb08a; --accent-2: #d4b169; --good: #7fb08a; --bad: #d98878; --warn: #d4b169; --grad: var(--accent); --tint: #ffffff; --radius: 5px; --radius-sm: 4px; --font-display: var(--serif); --display-weight: 700; --display-tracking: -.5px; --on-accent: #0d160f; } /* ═══ CARBON ═══ Motorsport telemetry. Carbon black and one acid signal, cold where terminal is warm. Monospace, tight, technical. */ [data-theme="carbon"] { --bg: #0c0d0f; --bg-1: #131518; --bg-2: #1a1d21; --bg-3: #24282d; --border: rgba(210,255,80,.12); --border-strong: rgba(210,255,80,.22); --text: #e9ecee; --text-dim: #969b9f; --text-mute: #64696d; --accent: #d2ff50; --accent-2: #9fe000; --good: #d2ff50; --bad: #ff4d4d; --warn: #ffc043; --grad: var(--accent); --tint: #ffffff; --radius: 2px; --radius-sm: 2px; --font-display: var(--mono); --display-weight: 700; --display-tracking: -1.2px; --on-accent: #141a04; } [data-theme="carbon"][data-mode="light"] { --bg: #f2f4f0; --bg-1: #e9ece6; --bg-2: #dfe3da; --bg-3: #cdd3c6; --border: rgba(18,20,16,.14); --border-strong: rgba(18,20,16,.24); --text: #121410; --text-dim: #43483f; --text-mute: #72776c; --accent: #4a6b00; --accent-2: #3d5800; --good: #3f6b1f; --bad: #b3302f; --warn: #8a6200; --tint: #121410; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } /* ═══ BAUHAUS ═══ Poster stock, true black, and a primary red used only where something must be pressed. Zero radius, heavy grotesque — the opposite of a soft rounded card. Light-first. */ [data-theme="bauhaus"][data-mode="light"], [data-theme="bauhaus"]:not([data-mode="dark"]) { --bg: #f4f2ee; --bg-1: #eae7e1; --bg-2: #dedad2; --bg-3: #cbc6bc; --border: rgba(10,10,10,.18); --border-strong: rgba(10,10,10,.32); --text: #0a0a0a; --text-dim: #3d3d3d; --text-mute: #6e6e6e; --accent: #d92b1f; --accent-2: #14459e; --good: #14459e; --bad: #d92b1f; --warn: #e0a000; --grad: var(--accent); --tint: #0a0a0a; --radius: 0; --radius-sm: 0; --font-display: var(--sans); --display-weight: 900; --display-tracking: -2.4px; --on-accent: #ffffff; --veil-in: 82%; --veil-out: 96%; } [data-theme="bauhaus"] { --bg: #0a0a0a; --bg-1: #131313; --bg-2: #1c1c1c; --bg-3: #292929; --border: rgba(244,242,238,.14); --border-strong: rgba(244,242,238,.26); --text: #f4f2ee; --text-dim: #a3a3a3; --text-mute: #6b6b6b; --accent: #ff4438; --accent-2: #4d84ff; --good: #4d84ff; --bad: #ff4438; --warn: #ffc21f; --grad: var(--accent); --tint: #ffffff; --radius: 0; --radius-sm: 0; --font-display: var(--sans); --display-weight: 900; --display-tracking: -2.4px; --on-accent: #1c0402; } /* ── The no-JavaScript fallback ────────────────────────────────────── With scripting on, none of this applies: the head script stamps data-mode on every load — the saved choice, or the time of day — so :not([data-mode]) matches nothing. These blocks are what a reader with scripting off gets, and the system preference is the only signal available to CSS alone (you cannot read a clock without JS). Only the themes whose DEFAULT block is dark need a light override here; ledger and salmon are light-first and declare the inverse above. */ @media (prefers-color-scheme: light) { /* Bare :root is Slate now, so the untouched default follows Slate's light values — not midnight's, which is what it inherited when midnight owned the root block. */ :root:not([data-theme]):not([data-mode]), [data-theme="slate"]:not([data-mode]) { --bg: #f4f5f7; --bg-1: #eceef1; --bg-2: #e2e5e9; --bg-3: #d2d6dc; --border: rgba(20,22,26,.12); --border-strong: rgba(20,22,26,.2); --text: #14161a; --text-dim: #464b53; --text-mute: #757a82; --accent: #c74400; --accent-2: #c74400; --good: #14764c; --bad: #c02a2f; --warn: #8a5c00; --tint: #14161a; --veil-in: 82%; --veil-out: 96%; } [data-theme="midnight"]:not([data-mode]) { --bg: #f7f8fc; --bg-1: #eef0f7; --bg-2: #e4e7f0; --bg-3: #d6dae6; --border: rgba(13,16,32,.10); --border-strong: rgba(13,16,32,.18); --text: #0d1020; --text-dim: #454c63; --text-mute: #6e7690; --accent: #2f5fc4; --accent-2: #5a41c0; --good: #0f7a4f; --bad: #c4342f; --warn: #9a6200; --grad: linear-gradient(115deg, #2f5fc4, #5a41c0); --tint: #0d1020; --veil-in: 82%; --veil-out: 96%; } [data-theme="terminal"]:not([data-mode]) { --bg: #f3f0e6; --bg-1: #ebe7d9; --bg-2: #e2ddcb; --bg-3: #d5cfb8; --border: rgba(26,28,25,.14); --border-strong: rgba(26,28,25,.24); --text: #1a1c19; --text-dim: #474a43; --text-mute: #74786d; --accent: #9a5b00; --accent-2: #8a4a00; --good: #12703f; --bad: #b8322a; --warn: #8a5a00; --veil-in: 82%; --veil-out: 96%; } [data-theme="vermillion"]:not([data-mode]) { --bg: #f7f3ec; --bg-1: #efe9df; --bg-2: #e6ded1; --bg-3: #d8cebd; --border: rgba(20,17,15,.14); --border-strong: rgba(20,17,15,.24); --text: #14110f; --text-dim: #4a423b; --text-mute: #7a716a; --accent: #b32d20; --accent-2: #8f2419; --good: #3f6b32; --bad: #b32d20; --warn: #8a6212; --tint: #14110f; --veil-in: 82%; --veil-out: 96%; } [data-theme="carbon"]:not([data-mode]) { --bg: #f2f4f0; --bg-1: #e9ece6; --bg-2: #dfe3da; --bg-3: #cdd3c6; --border: rgba(18,20,16,.14); --border-strong: rgba(18,20,16,.24); --text: #121410; --text-dim: #43483f; --text-mute: #72776c; --accent: #4a6b00; --accent-2: #3d5800; --good: #3f6b1f; --bad: #b3302f; --warn: #8a6200; --tint: #121410; --veil-in: 82%; --veil-out: 96%; } } @media (prefers-color-scheme: dark) { [data-theme="ledger"]:not([data-mode]) { --bg: #14120e; --bg-1: #1c1913; --bg-2: #26221a; --bg-3: #332d22; --border: rgba(240,235,223,.12); --border-strong: rgba(240,235,223,.2); --text: #f0ebdf; --text-dim: #a89e8c; --text-mute: #6f6757; --accent: #8fb3d9; --accent-2: #d98d99; --good: #6fbf92; --bad: #d98d99; --warn: #d9b26f; } [data-theme="almanac"]:not([data-mode]) { --bg: #101610; --bg-1: #172017; --bg-2: #1f2b1f; --bg-3: #2b392a; --border: rgba(232,238,224,.12); --border-strong: rgba(232,238,224,.2); --text: #e8eee0; --text-dim: #9fab97; --text-mute: #697061; --accent: #7fb08a; --accent-2: #d4b169; --good: #7fb08a; --bad: #d98878; --warn: #d4b169; --tint: #ffffff; } [data-theme="bauhaus"]:not([data-mode]) { --bg: #0a0a0a; --bg-1: #131313; --bg-2: #1c1c1c; --bg-3: #292929; --border: rgba(244,242,238,.14); --border-strong: rgba(244,242,238,.26); --text: #f4f2ee; --text-dim: #a3a3a3; --text-mute: #6b6b6b; --accent: #ff4438; --accent-2: #4d84ff; --good: #4d84ff; --bad: #ff4438; --warn: #ffc21f; --tint: #ffffff; } [data-theme="salmon"]:not([data-mode]) { --bg: #22282a; --bg-1: #2a3133; --bg-2: #343c3e; --bg-3: #424b4e; --border: rgba(255,241,229,.13); --border-strong: rgba(255,241,229,.22); --text: #fff1e5; --text-dim: #b8aca2; --text-mute: #8b837b; --accent: #5ec2ce; --accent-2: #f08098; --good: #5ec2ce; --bad: #f08098; --warn: #e0b070; } } /* ── Consequences of the tokens, so pages do not hand-tune per theme ── */ /* ── Gradient-clipped text ───────────────────────────────────────────── The site clips text to a gradient in six places under five different class names — .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code and .grad-text — all reading var(--grad). Only midnight defines a real gradient. Everywhere else --grad resolves to a flat accent, and clipping text to a flat colour is pointless: it costs a compositing layer, drops the text out of the accessibility tree on some engines, and leaves a hairline seam on others. So for the eight solid-accent palettes the text is painted directly instead. Listing the selectors here rather than asking every page to adopt one class: the alternative was editing six files and hoping the seventh remembers. */ .grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="terminal"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), [data-theme="ledger"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), [data-theme="salmon"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), [data-theme="vermillion"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), [data-theme="almanac"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), [data-theme="carbon"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), [data-theme="bauhaus"] :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code), :root:not([data-theme="midnight"]) :is(.grad-text, .brand span, .hero h1 .grad, .head h1 .grad, h1 .hl, .code) { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); } /* The ambient wash is a midnight idea. On paper themes it reads as a smudge, so it is switched off rather than recoloured. */ [data-theme="ledger"] .ambient, [data-theme="salmon"] .ambient, [data-theme="terminal"][data-mode="light"] .ambient, [data-theme="almanac"] .ambient, [data-theme="bauhaus"] .ambient, [data-theme="vermillion"][data-mode="light"] .ambient { display: none; } /* Glass over paper is wrong. Opaque bars on the light-first themes. */ [data-theme="ledger"] nav, [data-theme="salmon"] nav, [data-theme="almanac"] nav, [data-theme="bauhaus"] nav, [data-theme="vermillion"] nav, [data-theme="ledger"] .gnav, [data-theme="salmon"] .gnav, [data-theme="almanac"] .gnav, [data-theme="bauhaus"] .gnav, [data-theme="vermillion"] .gnav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-1); } html { color-scheme: dark; } [data-mode="light"], [data-theme="ledger"]:not([data-mode="dark"]), [data-theme="salmon"]:not([data-mode="dark"]), [data-theme="almanac"]:not([data-mode="dark"]), [data-theme="bauhaus"]:not([data-mode="dark"]) { color-scheme: light; } /* The case the list above cannot express: a visitor who has chosen nothing on a light-preferring system. The palette blocks already switch to light values under this media query, so without it the page is light while scrollbars, form controls and the caret stay dark. */ @media (prefers-color-scheme: light) { :root:not([data-mode]) { color-scheme: light; } } /* ══════════════════════════════════════════════════════════════════ THE LOGO — one definition, every page. ══════════════════════════════════════════════════════════════════ Before this block the wordmark existed in five different shapes across eighteen files: 16px/2px-tracked in the navs, 24px/-.5px in the auth cards, 15px/1.5px in the setup wizard, and unstyled inside the legal headings. Only seven of the eighteen wore the gamma mark at all. The metrics below are the ones from the auth card on /login — the reference the owner picked. They live in theme.css because it is the single stylesheet EVERY page loads, app shell included, so there is exactly one place to change the identity and no page can drift from it. Any element carrying .gv-logo renders the identity: mark, wordmark, and the accent VIEW. Use where it navigates, where it does not. */ .gv-logo { /* No flex `gap` here, deliberately. The wordmark is a bare text node ("GREEKS") beside a span ("VIEW"), so flex makes them TWO items and a gap opens a visible space mid-word — it rendered as "GREEKS VIEW". The 8px belongs between the mark and the wordmark only, so it lives on the mark as a margin. */ display: inline-flex; align-items: center; font-family: var(--font-display, var(--sans)); font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; color: var(--text); text-decoration: none; white-space: nowrap; } .gv-logo > span { color: var(--accent); } /* flex:none so the tile never squashes in a tight nav; block kills the inline-baseline gap that would otherwise offset it from the wordmark. */ .gv-logo .brand-mark { width: 22px; height: 22px; flex: none; display: block; margin-right: 8px; } /* The legal pages put a page title after the identity ("GREEKSVIEW — Terms of Service"). The title is not part of the logo, so it is not bold, not tracked, and not accent-coloured. */ .gv-logo > span.gv-logo-title { margin-left: .35em; font-weight: 600; letter-spacing: normal; color: var(--text-dim); }