/* ============================================================================ North Lindsey College — child token layer ---------------------------------------------------------------------------- The one [data-brand] block for this site, ported verbatim from the approved design (design-export/tokens.css). This is the ONLY colour a child theme sets; base-theme/css/tokens.css carries the base + DNCG default and every semantic alias. data-brand="nlc" is emitted on by header.php. ========================================================================== */ [data-brand="nlc"]{ --logo-height:56px; --logo-max-width:220px; /* 162x43 · 3.77:1 → 211px wide */ --navy:#025577; --navy-deep:#013b53; --blue:#025577; --blue-dark:#013b53; --magenta:#c9002f; --magenta-dark:#a30026; --magenta-rgb:201,0,47; --lime:#c4d600; --lime-dark:#8f9c00; --dblue:#0a6f92; --teal:#00c4cc; /* NLC does NOT use lime — the palette slot takes the brand teal, so nothing that references --lime/--accent has to change. Order: magenta → teal. */ --lime:#00c4cc; --lime-dark:#009aa1; --accent-1:var(--magenta); --accent-2:var(--teal); --accent-3:var(--teal); --accent:var(--accent-1); --accent-on-dark:var(--teal); /* 5.2:1 on --navy-deep at display size */ --btn-accent-bg:var(--teal); --btn-accent-text:var(--navy-deep); /* Small chips on a dark hero: the search hero's "Type here" tooltip and the full-page hero's eyebrow badge. Headline emphasis is teal on that ground, so the chips carry the magenta instead and keep NLC's primary colour present. White on #c9002f is 5.96:1. */ --hero-chip-bg:var(--magenta); --hero-chip-text:var(--white); /* nlc is the one brand whose --accent (magenta) is NOT its --btn-accent-bg (teal), so the button's navy label cannot be reused on accent fills: navy on magenta measured 2.01:1. White on magenta measures 5.96:1. */ --accent-text:var(--white); /* Search-hero shortcut chips on hover. The base default fills them with the accent BUTTON pair (teal + navy-deep), which is legible but makes the whole hero teal now the headline emphasis is teal too. NLC takes its magenta pair instead: white on #c9002f, the 5.96:1 measured just above. */ --hero-shortcut-hover-bg:var(--accent); --hero-shortcut-hover-text:var(--accent-text); --light:#f3f7f9; --ink:#12232b; --muted:#4b5c65; --tint-rgb:1,59,83; --hero-tint:var(--navy); --header-bg:var(--navy-deep); --header-fg:var(--white); --header-fg-muted:rgba(255,255,255,.86); --header-border:rgba(255,255,255,.12); --header-logo-filter:brightness(0) invert(1); --header-group-logo-filter:brightness(0) invert(1); /* shared white lockup, dark bar */ /* Chrome and titles: NAVY ground, MAGENTA accent text. Flat brand magenta #c9002f is 2.96:1 on #013b53, so text-bearing accents take the lighter magenta tint (6.1:1). Flat magenta still does fills, links and rules. */ --magenta-light:#ff6b85; --chrome-bg:var(--light); --page-title-bg:var(--navy-deep); --page-title-fg:var(--white); --page-title-muted:rgba(255,255,255,.86); --page-title-eyebrow:var(--magenta-light); --page-title-em:var(--magenta-light); --page-title-media-opacity:1; --search-bg:var(--navy-deep); --search-fg:var(--white); --search-muted:rgba(255,255,255,.85); --search-accent:var(--magenta-light); --em-style:normal; --em-weight:800; --font-display:"program","Open Sans",system-ui,sans-serif; --display-weight:700; --display-track:-.02em; --display-track-hero:-.028em; /* per-brand -rgb channels for surviving CSS overlays (HPC, templates, slider, testimonial-shortcode). Computed from this brand's palette. */ --surface-dark-rgb: 2, 85, 119; --surface-dark-alt-rgb: 1, 59, 83; --surface-brand-rgb: 201, 0, 47; --surface-blue-rgb: 2, 85, 119; --accent-rgb: 201, 0, 47; --link-rgb: 201, 0, 47; --blue-rgb: 2, 85, 119; --navy-rgb: 2, 85, 119; --navy-deep-rgb: 1, 59, 83; --dblue-rgb: 10, 111, 146; --text-rgb: 18, 35, 43; } [data-brand="nlc"] [data-emphasis="focal"]{ --page-title-bg:var(--magenta); --page-title-fg:var(--white); --page-title-muted:rgba(255,255,255,.9); /* Navy-deep on magenta measures 2.01:1 — it cannot carry text. Emphasis is WHITE (underlined so it still reads as emphasis) and navy-deep moves to the non-text elements: the rule, the underline and chip fills. */ --page-title-eyebrow:var(--white); --page-title-em:var(--white); --page-title-em-rule:var(--navy-deep); --page-title-media-opacity:0; --search-bg:var(--magenta); --search-fg:var(--white); --search-muted:rgba(255,255,255,.88); --search-accent:var(--white); --accent-on-dark:var(--white); }