/* ============================================================================ 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; /* Buttons and inline links. See --a1. */ --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-triad-rose); /* link */ --a2: var(--color-triad-rose-deep); /* link hover / focus */ --a3: var(--color-board-blue-deep); /* h1-h2 link hover / focus */ --a4: var(--color-triad-rose); /* 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%; } /* Inline links in body prose. Abridge sets `a { text-decoration: none }` and underlines only on hover, so an inline link is told apart from the text around it by colour alone. As Board Blue that was 2.06:1 against Record Ink, which reads as body copy in a slightly odd shade rather than as a link, and fails WCAG 1.4.1 - colour on its own needs 3:1 against the surrounding text. Two changes. The link colour is now Triad Rose, which reaches 2.91:1 against the ink, the best any token in the palette manages; nothing here clears 3:1, so the underline is what actually carries the distinction. That is the better signal anyway, since it survives any colour vision. Scoped to prose containers rather than `main a`, which would also catch the heading links abridge deliberately leaves undecorated. The two in-body buttons are excluded by class; the accreditation record excludes itself by raising its own specificity in resb-record.css. */ main :is(p, li, dd, dt, blockquote, td) a:not(.resb-button, .hero-cta) { --link-offset: 0.15em; text-decoration: underline; text-underline-offset: var(--link-offset); text-decoration-thickness: 1px; transition: text-underline-offset 0.12s ease, color 0.12s ease; } /* On hover the underline drops 1px clear of the text. A small, purely mechanical tell that the thing under the cursor can be followed - it reads as the link lifting off the line - and it lands on anyone who cannot see the Rose-to-Rose-Deep colour change. Offset is held in a custom property so the resting value and the hover value cannot drift apart. */ main :is(p, li, dd, dt, blockquote, td) a:not(.resb-button, .hero-cta):hover, main :is(p, li, dd, dt, blockquote, td) a:not(.resb-button, .hero-cta):focus-visible { text-underline-offset: calc(var(--link-offset) + 1px); } @media (prefers-reduced-motion: reduce) { main :is(p, li, dd, dt, blockquote, td) a:not(.resb-button, .hero-cta) { transition: none; } } /* Footer menu, deliberately the header's mirror image: the header rests on Record Ink and moves to Board Blue, this rests on Board Blue and moves to Record Ink. Same two colours, same underline on hover, opposite order. Both menus are navigation, so neither takes Rose - without these rules the footer would inherit --a1 like a body link and go Rose. :visited and :hover have to be named explicitly. Abridge sets both on the bare `a`, and a pseudo-class counts at class level, so its `a:visited` (0,1,1) outranks a plain `footer nav a` (0,0,3) however many elements are stacked in front. Resting-state-only pinning left every visited footer link Rose, which is the whole reason this rule has three parts. */ footer nav a, footer nav a:visited { color: var(--color-board-blue); } footer nav a:hover, footer nav a:focus-visible { color: var(--color-record-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } /* 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); }