/* ============================================================================= bridge.css — section grounds, spacing rhythm and the tri-colour rule Rebuilt from prototypes/kitchen-sink-dncg.html (.section, .section--sm, .section--alt, .section--dark) and the design pass's structural device (--rule-tri). Mapped onto the theme's markup:
Owns: section vertical rhythm, the .bg-* grounds, the tri-colour rule. Colour is always a token. Backgrounds are referenced (not redefined) by typography.css and section-heading.css for on-dark recolouring. ========================================================================== */ /* --- Section shell ----------------------------------------------------- */ .content-area { position: relative; } /* --- Vertical rhythm -------------------------------------------------- REMOVED. This file used to carry a second copy of the .pad* family, scoped to .content-area and therefore at higher specificity than the set in css/base.css. The two disagreed, so a block's spacing depended on whether it happened to emit .content-area rather than on what the editor chose: .pad base 3.5rem / 5rem responsive here 5rem flat .pad-top base 3.5rem / 5rem responsive here 5rem flat .pad-bottom base 3.5rem / 5rem responsive here 5rem flat .pad-reduced base 2.4rem flat here 3.5rem flat css/base.css is now the ONLY definition, responsive throughout, with reduced as a true half. Do not add a .content-area-scoped copy back: a block that needs different spacing should say so in its own stylesheet. One thing did rely on the specificity — pagebuilder/logo_bar/logo_bar.css set `.logo-bar { padding-block: 2rem }` on the block ROOT, which the compound rule silently beat. That rule is now scoped to the footer strip it was meant for, so the logo_bar block is driven by its .pad class like every other block. */ /* --- Section grounds -------------------------------------------------- The reachable background tokens. Coloured grounds carry white text; the per-element recolouring (headings, eyebrow, intro, links) lives with those components and keys off these class names. */ .bg-white { background: var(--surface); } .bg-light-grey { background: var(--surface-alt); } .bg-mid-grey { background: var(--neutral-300); } /* Brand highlight ground — a bright accent panel, e.g. a big CTA. LIGHT: it carries dark text, so it stays OUT of the dark-ground groups below. The value is per-brand (--yellow, set by DC); a brand that defines no --yellow falls back to the light-grey ground. Prose links and eyebrows drop to ink because the tertiary accent is too low-contrast to sit on the accent itself. */ .bg-yellow { background: var(--yellow, var(--surface-alt)); color: var(--ink); } .bg-yellow :is(p, li, blockquote, dd) a:not(.btn):not(.button) { color: var(--ink); text-decoration-thickness: 2px; } .bg-yellow .eyebrow { color: var(--ink); } .bg-blue { background: var(--surface-blue); color: var(--text-on-dark); } .bg-dark-blue { background: var(--surface-dark-alt); color: var(--text-on-dark); } .bg-black { background: var(--surface-muted); color: var(--text-on-dark); } .bg-red { background: var(--surface-brand); color: var(--text-on-brand); } /* Legacy authored background classes. These were NEVER ACF choices (the field only ever stored bg-white / -light-grey / -mid-grey / -blue / -dark-blue / -black / -red / -inherit, all defined above). They came from the source themes' SCSS and could have been hand-added in WYSIWYG or a Custom CSS field, so a stored page may still carry them. Alias each to its canonical equivalent so it paints correctly. Grouped into the dark-ground text rules below too. Safe to delete once a content sweep replaces them. */ .bg-magenta { background: var(--surface-brand); color: var(--text-on-brand); } .bg-dark, .bg-dc-dark-blue { background: var(--surface-dark-alt); color: var(--text-on-dark); } .bg-dc-blue, .bg-mid-blue { background: var(--surface-blue); color: var(--text-on-dark); } .bg-dark-grey { background: var(--surface-muted); color: var(--text-on-dark); } .bg-light { background: var(--surface-alt); } .bg-inherit { background: transparent; } /* Body copy on a dark or coloured ground. This used to soften to a tint of white (0.86, then 0.92). A tint cannot work here: a brand fill sized to carry white text at exactly 4.5:1 has no headroom left, so ANY alpha below 1 drops it under (0.92 measured 4.09:1 on ucdon's blue). Full strength, and the softening idea is retired. */ :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) p { color: var(--text-on-dark); } /* Heading emphasis on a coloured ground. --display-em is chosen to read on the PAGE ground (white), and on a brand fill it can collapse: dc's teal em on dc's orange fill measured 2.73:1. On these grounds emphasis rides the on-ground text colour by default. A child can point --display-em-on-dark at a brand accent instead, but only one that clears 3:1 on that child's own fills. */ :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(h1, h2, h3, h4, h5, h6) em { color: var(--display-em-on-dark); } /* bg-mid-grey is a mid-tone ground, not a light one: --text-muted on it measured 4.34:1. Body copy there takes the full-strength text colour. */ .bg-mid-grey :is(p, li, dd, blockquote) { color: var(--text); } /* Brand colour on mid-grey fails on every site: the brand link measured 3.16:1 (dc) to 4.03:1 (dncg), and brand eyebrows 2.52:1 (ucnl) to 2.66:1 (hesta). --text-heading is the darkest brand-family token and clears AA on #cacaca everywhere. Links keep their underline, so colour is not the only cue. */ .bg-mid-grey :is(p, li, dd, blockquote) a:not(.btn):not(.button), .bg-mid-grey .eyebrow, .bg-mid-grey :is(h1, h2, h3, h4, h5, h6) em { color: var(--text-heading); } .bg-mid-grey :is(p, li, dd, blockquote) a:not(.btn):not(.button) { text-decoration-thickness: 2px; } /* Prose links on a coloured ground — scoped to paragraph/blockquote/definition text so it never leaks into UI links (tabs, nav, chips), which live in
  • or stand alone, not in prose. Split by how dark the ground actually is. --accent-on-dark is calibrated against --navy-deep and holds up there, but a mid-tone BRAND fill is much lighter and the accent collapses on it: 2.07:1 on ucdon's blue, 1.41:1 on ucnl's green, 2.20:1 on hesta's. Those grounds are sized to carry white, so links there ride the on-dark text colour and lean on the underline to stay distinguishable. */ :is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) :is(p, blockquote, dd) a:not(.button):not(.btn) { color: var(--accent-on-dark); } :is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) :is(p, blockquote, dd) a:not(.button):not(.btn) { color: var(--text-on-dark); text-decoration-thickness: 2px; } /* Opaque light panels keep their dark text on a coloured section ground — the section's white text/headings must not leak into a white or light card/panel (a bg-white call_to_action panel, a .qa-card, a tab panel). THIS is the single place the opaque-light-panel classes are listed; add new ones to the :is(). .facility-card added 2026-08-05: the block-modifier convergence moved facility_cards onto the global grounds, and its white card on a bg-dark-blue section rendered white-on-white at 1.00:1 on all four sites swept. Two classes + element outranks the section leak above, so it is order-safe. */ :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) { color: var(--text); } :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) :is(h1, h2, h3, h4, h5, h6) { color: var(--text-heading); } :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) :is(h1, h2, h3, h4, h5, h6) em { color: var(--display-em); } :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) .eyebrow { color: var(--blue-text); } :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) :is(p, li) { color: var(--text-muted); } :is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) a:not(.button):not(.btn) { color: var(--blue-text); } /* --- The tri-colour rule ---------------------------------------------- The structural device: three equal thirds in the audience colours. Used under the header, on the footer edge, and as a section-edge accent. Markup drops
    or a decorative element carrying the class. */ .tri-rule, .rule-tri { height: 5px; border: 0; margin: 0; background: var(--rule-tri); } .content-area--tri-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--rule-tri); }