/* ============================================================================ RESB colour palette — light only. Loaded after abridge.css (see `stylesheets` in config.toml), so these win. abridge ships two palettes and toggles between them with a `.switch` class on : `:root:not(.switch)` is its dark theme, `:root.switch` its light one. Both are redefined here with the same values, so no combination of class state or stored preference can produce a dark render. ============================================================================ */ :root { /* Brand tokens — use these when adding styles. */ --color-board-blue: #2e5a8c; /* Primary. Marks, rules, links, tagline. */ --color-board-blue-deep: #1e3c5e; /* Hover / pressed, dark bands. */ --color-board-blue-pale: #d6e0eb; /* Fills, table stripes. Never text. */ --color-record-ink: #26292e; /* Body copy and the wordmark. */ --color-slate: #5c6570; /* Secondary text, captions, rules. */ --color-document: #f3f2f2; /* Page and reversed-mark field. */ --color-paper: #fafafa; /* Knockout on blue; card surfaces. */ } /* The palette itself, applied to every switcher state. */ :root, :root:not(.switch), :root.switch { color-scheme: light; --cs: light; /* scrollbar / form-control scheme */ --f1: var(--color-record-ink); /* body copy */ --f2: var(--color-record-ink); /* headings */ --c1: var(--color-document); /* page background */ --c2: var(--color-paper); /* cards and raised surfaces */ --c3: var(--color-board-blue-pale); /* table stripes, quote edge, borders */ --c4: var(--color-slate); /* borders, disabled controls, */ --a1: var(--color-board-blue); /* link */ --a2: var(--color-board-blue-deep); /* link hover / focus */ --a3: var(--color-board-blue-deep); /* h1–h2 link hover / focus */ --a4: var(--color-board-blue); /* visited — same as unvisited */ --cg: #2f6b4f; /* ins / success */ --cr: #a3352f; /* del / error */ /* Syntax highlighting: forced light so a stray code block can't go dark. */ --h0: var(--color-document); --h1: var(--color-record-ink); --h2: var(--color-slate); --h3: #a3352f; --h4: #8a4b12; --h5: #7a5a10; --h6: #2f5a2a; --h7: #1f5f6b; --h8: #1b4f7a; --h9: #6b3a8a; --ha: 92%; } /* Header menu links. Abridge sets `header li > a:hover { color: var(--a3); text-decoration: none }`, where --a3 is Board Blue Deep. Against the Record Ink resting colour that is a luminance move of only 0.022 -> 0.043 — both near-black, so at nav sizes the hover is effectively invisible. Board Blue instead moves 0.022 -> 0.098, a 4.4x larger jump, and the underline gives a second, non-colour signal for anyone who cannot separate navy from black. Resting state is left as the theme has it (Record Ink). Targets `header li > a` directly rather than redefining --a3, which is also used for h1/h2 link hovers. Specificity ties with the theme rule, so this wins on source order only: resb.css must stay after abridge.css in `stylesheets`. */ header li > a:not(.cta):hover, header li > a:not(.cta):focus-visible { color: var(--color-board-blue); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } /* Contact as an outlined call-to-action. The `cta` class comes from the menu entry's `size` field in config.toml, which abridge injects verbatim as the class attribute — there is no button option in the theme and no .button class in its CSS. Outlined rather than solid: one filled button beside four plain links would shout. It fills on hover, which is where the emphasis belongs. Excluded from the underline rule above so the two treatments don't stack. */ header li > a.cta { display: inline-block; padding: 0.3em 0.85em; border: 2px solid var(--color-board-blue); color: var(--color-board-blue); line-height: 1.3; text-decoration: none; } header li > a.cta:hover, header li > a.cta:focus-visible { background: var(--color-board-blue); color: var(--color-paper); text-decoration: none; } /* Secondary text: captions, meta lines, the site description. */ .s90, .s85, .s80, .s75, .s70, figcaption, footer .s80 { color: var(--color-slate); } /* Board Blue Pale is a fill only — keep table stripes readable. */ tbody tr:nth-child(odd) { background: var(--color-board-blue-pale); } th { background: var(--color-board-blue); color: var(--color-paper); }