/* ============================================================================ 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-triad-rose: #b24f63; /* Calls to action only. See a.resb-button */ --color-triad-rose-deep: #93374b; /* Hover on Triad Rose. */ --color-triad-rose-press:#782639; /* Pressed and active states. */ --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); border-radius: 0.25rem; /* same as every other button and field on the site */ 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; } /* In-body call to action, used as in the markdown. Triad Rose, the palette's action colour. Deliberately identical to the contact and report submit buttons in resb-forms.css, so every primary action on the site is the same object. ROSE IS FOR CALLS TO ACTION, AND NOTHING ELSE. That is the actual rule. It works because it is rare: put it on links, headings or chrome as well and it stops meaning "this is the thing to do here". A page usually has one CTA, so in practice Rose usually appears once — but that is a consequence, not the constraint. Where a page genuinely has more than one call to action, they all take Rose; /standards/ offers two document downloads and both are Rose. Do not "fix" that to one. What the rule does rule out is spending Rose on things that are not calls to action. The header's Contact `.cta` stays Board Blue: it is persistent chrome, on every page, so Rose there would make the colour ambient and it would stop signalling anything. Paper on Rose is 4.80:1, clearing AA. The button against the Document page is 4.48:1, well over the 3:1 a control needs against its surround. Solid, unlike the header's outlined .cta: standing alone at the end of a section there is no row of plain links for it to shout over. Abridge underlines body links and fades them to .75 opacity on hover, so both are reset here. */ a.resb-button { display: inline-block; padding: 0.55rem 1.4rem; background: var(--color-triad-rose); color: var(--color-paper); border: 2px solid var(--color-triad-rose); border-radius: 0.25rem; font-weight: 600; text-decoration: none; } a.resb-button:hover, a.resb-button:focus-visible { background: var(--color-triad-rose-deep); border-color: var(--color-triad-rose-deep); color: var(--color-paper); text-decoration: none; opacity: 1; } /* Pressed. Must follow :hover — same specificity, so source order decides, and the press state has to win while the pointer is also over the button. */ a.resb-button:active { background: var(--color-triad-rose-press); border-color: var(--color-triad-rose-press); } /* Offset puts the ring on the page background, not on the filled button. */ a.resb-button:focus-visible { outline: 2px solid var(--color-triad-rose-deep); outline-offset: 2px; } /* A row of actions. Keeps the gap consistent and lets the buttons wrap onto a second line on narrow screens rather than colliding. */ .resb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* Page heading band. Every page's H1 is a Board Blue bar with the title centred in white — the site's standard page heading. `pages.html` renders the markdown body only, so each page carries its own `# H1`; this styles all of them at once. White on Board Blue measures 7.1:1, which clears WCAG AAA for normal text and so is comfortable at heading sizes. Scoped to `main` so it cannot reach the header logo or the footer. Padding is in em so the band grows with the heading rather than needing a second rule at each breakpoint. The accreditation record opts out — see the reset in resb-record.css. Its H1 sits inside a bespoke card where a blue band would be wrong. */ main h1 { margin: 0 0 1.5rem; padding: 0.55em 0.75em; background: var(--color-board-blue); color: var(--color-paper); border-radius: 0.25rem; text-align: center; text-wrap: balance; /* even line lengths on the longer titles */ } /* 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); }