/* ============================================================================ DN Colleges Group — base-theme token layer ---------------------------------------------------------------------------- Ported from design-export/tokens.css (the approved design). TWO default layers in :root, then a COMPAT appendix: 1. BASE structural tokens shared by all six sites. 2. DNCG the group palette, carried in :root as the default so a page with no data-brand still resolves to real values. 3. COMPAT tokens consumed by CSS the export does not replace (HPC sub-brand, Foundation, Parvus, campaign_hero art direction, status colours, the neutral scale, pre-port structural aliases). Disjoint from layers 1-2. Retire per entry as the consuming CSS is ported. The six [data-brand] blocks live in the six child css/tokens.css files. data-brand is emitted on (header.php); nothing here relies on the :root default except a page that failed to set it. ========================================================================== */ :root{ /* type — body face is Open Sans on every site */ --font-body:"Open Sans",system-ui,sans-serif; --font-mono:ui-monospace,Menlo,SFMono-Regular,monospace; --fs-min:1.1rem; /* baseline + hard floor: 17.6px, nothing smaller */ /* space + layout */ --space-section:5rem; --space-section-sm:3.5rem; --gap-grid:1.3rem; --pad-card:1.9rem; --pad-panel:2.1rem 2.3rem; --content-max:1320px; --content-max-narrow:820px; --measure:62ch; --page-gutter:46px; --page-width:1440px; /* radii, elevation, motion, structure */ /* --radius-pill was a full 999px pill; softened to rounded corners (buttons, chips, badges, search fields read as rounded rects, not fully circled). */ --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:12px; --shadow-sm:0 2px 8px rgba(15,37,47,.08); --shadow-md:0 6px 22px rgba(15,37,47,.1); --shadow-lg:0 18px 50px rgba(15,37,47,.16); --transition:320ms cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.2,.7,.3,1); --card-edge:3px; --card-edge-hover:7px; /* neutrals + image placeholders (structural) */ --white:#ffffff; --black:#000000; --page-bg:#dfe4e6; --ph-stripe-a:#e4e9eb; --ph-stripe-b:#eff3f4; --ph-ink:#7a8792; --neutral-400:#8a97a0; --neutral-500:#767676; --box-border:#cfd6da; /* Border for a control whose OWN fill matches its surface, so the border is the only thing identifying the control (WCAG 1.4.11 needs 3:1 there). --box-border (1.47:1 on white) and --line (1.24:1) are hairline/decorative weights and stay as they are; this is the interactive weight. 3.50:1 on white. */ --control-border:#7d8b95; /* Focus indicator pair. Deliberately NOT brand colours: the ring has to work on every ground the theme paints, and a brand accent cannot. Children should leave these alone unless they can prove 3:1 on both their light and dark surfaces. */ --focus-ring:#10181d; /* dark ring: carries contrast on light grounds */ --focus-halo:#ffffff; /* light halo: carries contrast on dark grounds */ /* Foreground channel for text, hairlines and fills drawn ON a dark component surface (dark bg-* grounds, dark panels, heroes, footer). White by default; a surface that flips light overrides this channel so the alpha ramp inverts with it. Same mechanism as --tint-rgb. Used as rgba(var(--on-dark-rgb), a). */ --on-dark-rgb:255,255,255; /* logo box — constrained by HEIGHT; intrinsic ratio sets the width, so no lockup can ever squash. Each brand picks a height for optical parity. */ --logo-height:54px; --logo-max-width:200px; /* Portrait-lockup escape hatch. Five of the six lockups are landscape and sit happily inside the bar; UCNL's is the only portrait one (200x302), and at a height that fits the bar it shrinks to a stamp. Rather than special-case a brand in base-theme, the bar can let a mark HANG BELOW it: --logo-overhang is how far it drops, --logo-clear is the room the content underneath must leave for it, and the panel pair gives it a ground to sit on once it is over page content rather than over the header. All inert at these defaults, so the five landscape brands render exactly as before. */ --logo-overhang:0px; --logo-clear:0px; --logo-panel:transparent; --logo-pad:0; /* the type floor, as a usable token: eyebrows, meta and mono labels all sit on it */ --fs-eyebrow:var(--fs-min); --fs-meta:var(--fs-min); --fs-mono:var(--fs-min); /* Accent order. Each brand lists its secondaries in the order they should be reached for; --accent is the first, --accent-on-dark is whichever member survives on a dark band. Stating the ramp stops the last-choice colour becoming the default just because it happens to contrast. */ --accent-1:var(--blue); --accent-2:var(--magenta); --accent-3:var(--lime); /* display emphasis — / inside a title. The direction leans on this: one clause set in the brand's emphasis colour (and italic where the face has a real italic) so titles carry a voice rather than a weight. */ --em-style:italic; --em-weight:inherit; --em-color:var(--display-em); /* The TEXT step of the emphasis colour. --display-em is a brand colour doing the emphasis-inside-headings job, where the type is large display and 3:1 applies. Small text roles (the eyebrow) need 4.5:1 on both --white and --light, which a raw brand colour does not always reach. Ratified rule: brand colours are for fills, large display type and non-text UI; text roles ride a -text step (decisions.md, Phase 3 rulings). Defaults to --display-em because five of the six brands already clear 4.5:1 on both grounds; only a brand that fails overrides it. */ --display-em-text:var(--display-em); --page-title-em:var(--accent-on-dark); /* emphasis ON the title band — follows the band, not the page */ --strong-color:var(--display-em); /* chrome + page-title + search grounds. Dark by default (the college brands carry campus imagery here); a brand can flip the whole set to light. */ --chrome-bg:var(--light); --chrome-fg:var(--ink); --page-title-bg:var(--navy-deep); --page-title-fg:var(--white); --page-title-muted:rgba(255,255,255,.86); --page-title-eyebrow:var(--accent-on-dark); --page-title-media-opacity:1; --search-bg:var(--navy-deep); --search-fg:var(--white); --search-muted:rgba(255,255,255,.82); --search-accent:var(--accent-on-dark); /* typed term + underline */ --page-title-rule:rgba(255,255,255,.22); /* hairlines drawn on the band */ --page-title-border:rgba(255,255,255,.4); /* control borders on the band */ --page-title-ph-a:rgba(255,255,255,.18); /* image placeholder, on-band */ --page-title-ph-b:rgba(255,255,255,.08); /* header treatment — a brand decides whether its bar is dark or white */ --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); /* The DN Colleges Group lockup is a SHARED asset drawn in white, so unlike the per-site logo it can never be left untreated: on a white bar it would be white on white. It therefore needs its own channel — a brand whose site logo must keep its colours (--header-logo-filter:none) still has to force this one to the bar's foreground. brightness(0) = black, brightness(0) invert(1) = white. Every brand that restates its header treatment must restate this. */ --header-group-logo-filter:brightness(0) invert(1); /* Ground for the full-width utility strip: the header bar lifted 5% toward its own foreground. Derived rather than declared so it follows a brand whichever way that brand's bar runs — 5% white on the three dark bars, 5% navy on the three white ones — and no child has to restate it. Engines without color-mix() drop it and the strip is separated by its hairline alone. */ --header-utility-bg:color-mix(in srgb, var(--header-fg) 5%, var(--header-bg)); /* group-wide audience wayfinding — identical on all six sites */ --aud-students:#0066a4; --aud-parents:#b8103c; --aud-employers:#7a8a00; --aud-employers-text:#5f6b00; --aud-advisers:#2d8659; /* Summer of Skills campaign palette — campaign-owned, not brand-owned. The gradient ends, the cream-button label ink and the date-chip scrim are all campaign colours; they must NOT follow the brand, so they live here and the scrim uses its own channel rather than --tint-rgb (which is per-brand). */ --sos-teal:#1a7683; --sos-teal-deep:#125c68; --sos-cream:#f6e3a0; --sos-sky:#5cc4cf; --sos-gold:#f2c94c; --sos-blue:#0d8fc9; --sos-ink:#16333d; --sos-scrim-rgb:15,37,47; /* SoS below-hero surfaces (stats/cards/contact): pale cream ground, warm card hairline, and the deep-sea teal as an rgb channel for focus glows. */ --sos-cream-pale:#fff8ec; --sos-line:#ece6d6; --sos-teal-rgb:26,118,131; } /* ------------------------- 2. BRAND — DNCG (default) ---------------------- */ :root{ --navy:#1a3a4a; --navy-deep:#0f252f; --blue:#0066a4; --blue-dark:#005488; --magenta:#b8103c; --magenta-dark:#8f0c2e; --magenta-rgb:184,16,60; --lime:#c4d600; --lime-dark:#8f9c00; --dblue:#2d5a6b; --light:#f6f7f8; --line:#e3e7ea; --ink:#1a2226; --muted:#4d5a61; --tint-rgb:15,37,47; /* overlay / scrim tint */ --surface-dark:var(--navy); --surface-dark-alt:var(--navy-deep); --surface-brand:var(--magenta); --surface-blue:var(--blue); --surface-muted:#343735; --text-heading:var(--navy); --link:var(--magenta); --link-hover:var(--magenta-dark); /* order: blue → magenta → lime. Lime is the third choice, not the default; it holds --accent-on-dark only because blue and magenta both go muddy against the navy bands. */ --accent-1:var(--blue); --accent-2:var(--magenta); --accent-3:var(--lime); --accent:var(--accent-1); /* blue leads */ --accent-on-dark:var(--accent-3); /* lime, and only on dark grounds */ --display-em:var(--magenta); --btn-primary-bg:var(--link); --btn-primary-text:var(--white); --btn-accent-bg:var(--accent); --btn-accent-text:var(--white); /* white on blue = 6.11:1 */ --logo-height:24px; --logo-max-width:350px; /* 256x18 · 14.2:1 strip lockup */ --hero-tint:var(--navy); /* colour multiplied over greyscale footage */ --header-bg:var(--white); --header-fg:var(--navy); --header-fg-muted:var(--muted); --header-border:var(--line); --header-logo-filter:none; --header-group-logo-filter:brightness(0); /* white lockup, white bar — must be darkened */ --font-display:"Open Sans",system-ui,sans-serif; --display-weight:800; --display-case:none; --display-track:-.018em; --display-track-hero:-.03em; --display-lh:.98; --display-lh-hero:.96; } /* ------------------------------- 3. COMPAT -------------------------------- */ :root{ /* structural aliases → export equivalents (pre-port component/block CSS) */ --surface:var(--white); --surface-alt:var(--light); --light-grey:var(--light); --text:var(--ink); --text-muted:var(--muted); /* Heading emphasis ON a dark/brand ground. Defaults to the on-dark text colour so it is always AA; a child may substitute a brand accent that measures 3:1 on that child's own --surface-brand / --surface-blue fills. */ --display-em-on-dark:var(--text-on-dark); /* Label that reads ON --accent. Distinct from --btn-accent-text, which partners --btn-accent-bg: where a child points --accent and --btn-accent-bg at different colours (nlc: magenta vs teal) the two labels are not interchangeable. Defaults to the button label; a child overrides when its --accent is dark. */ --accent-text:var(--btn-accent-text); --text-on-dark:var(--white); --text-on-brand:var(--white); --brand:var(--navy); --radius:14px; /* pre-port name for --radius-md */ --gap-grid-lg:1.6rem; --hair:1px solid var(--line); --rule-tri:linear-gradient(90deg, var(--aud-students) 0 33.33%, var(--aud-parents) 33.33% 66.66%, var(--aud-employers) 66.66% 100%); /* palette extras: audience 4th, employer UI green, greens, status */ --blue-text:var(--blue); --green:#7a8a00; --green-dark:#5f6b00; --aud-parents-dark:#8f0c2e; --aud-advisers-dark:#236b46; --aud-students-tint:#f0f7fa; --employer:#357a38; --employer-dark:#2a6030; --amber:#b45309; --amber-deep:#92400e; --success:#166534; --success-tint:#dcfce7; --success-tint-2:#bbf7d0; /* --success existed but its counterparts did not, so dncg-pathways' alias block (--dncg-warning / --dncg-error) resolved to an empty string and its warning and error UI rendered with no colour at all. Both are set at the same weight as --success: dark enough to be body text on white (--warning 4.85:1, --danger 5.94:1). Semantic status colours, not brand; review if that is wrong. */ --warning:#8a5300; --warning-tint:#fef3c7; --danger:#b3261e; --danger-tint:#fee2e2; /* home hero search (page-home template) */ --hero-search-accent:var(--blue); --hero-search-accent-hover:var(--blue-dark); --hero-search-badge:none; /* RGB channels for pre-port rgba() overlays (DNCG values; per-brand overrides reconciled in Stage 6 alongside data-brand verification) */ --shadow-rgb:15,37,47; --surface-dark-rgb:26,58,74; --surface-dark-alt-rgb:15,37,47; --surface-brand-rgb:184,16,60; --surface-blue-rgb:0,102,164; --accent-rgb:0,102,164; --blue-rgb:0,102,164; /* DNCG --accent is blue (was stale lime) */ --navy-rgb:26,58,74; --navy-deep-rgb:15,37,47; --dblue-rgb:45,90,107; --aud-parents-rgb:184,16,60; --aud-employers-rgb:122,138,0; --aud-advisers-rgb:45,134,89; --overlay-light-rgb:255,255,255; /* neutral scale (Stage 3 grey collapse) */ /* --neutral-700 was a hole in the ramp (50,100,200,300,400,500,900) that dncg-pathways referenced, so --dncg-gray-700/800 resolved empty. */ --neutral-50:#f8f9fa; --neutral-100:#eeeeee; --neutral-200:#e0e0e0; --neutral-300:#cacaca; --neutral-700:#3f3f3f; --neutral-900:#1a1a1a; /* Faces consumed by pre-port CSS that the export does not replace. Named for ROLE, not typeface, so a brand can substitute without the name lying. The stacks are the originals, character for character, including the spacing after each comma: these are a rename, not a redesign, and nothing about which typeface renders has changed. They live here, in :root, for the same reason every other font token does — a child's [data-brand] block can override them and the cascade resolves on where the rest of the palette resolves. */ /* HPC sub-brand faces (ucdon page-hpc.php; css/templates/hpc.css). UCDon must keep rendering Magistral exactly as it does now: no child overrides these, so the computed stack is unchanged. */ --hpc-font-display: "Magistral", sans-serif; /* h2-h5 on the HPC template */ --hpc-font-quote-mark: Georgia, "Times New Roman", serif; /* the big decorative " */ /* One quote mark was authored with a shorter fallback than the other two. Kept as its own token rather than folded into the one above, because merging them would change a computed stack. They differ only in what shows when Georgia is missing; collapse them if that is signed off. */ --hpc-font-quote-mark-sm: Georgia, serif; /* HPC's own general and mono faces. These were declared inside hpc.css as bare `--font-display` and `--font-mono`, which SHADOWED the global tokens of those names for the whole page — including the shared header and footer, which page-hpc.php renders. Named for their role and moved here so the literal stacks sit in the token layer with every other typeface. Values are verbatim; nothing about what renders on the HPC template changed. */ --hpc-font-sans: sans-serif; /* HPC UI/general face, NOT Magistral */ --hpc-font-mono: "Space Mono", monospace; /* stat readouts, labels, timers */ /* [testimonial] shortcode suite (css/testimonial-shortcode.css). Group-wide, on all six sites. */ --sc-font-name: "Nove", "Arial Black", sans-serif; /* attribution names */ --sc-font-quote: "Source Serif Pro", Georgia, serif; /* the quote body */ --sc-font-quote-mark: "Nove", Georgia, serif; /* the decorative " */ /* HPC sub-brand (ucdon page-hpc.php; css/templates/hpc.css) */ --hpc-bg-deep:#0d1117; --hpc-bg-deep-rgb:13,17,23; --hpc-bg-primary:#111827; --hpc-bg-primary-rgb:17,24,39; --hpc-bg-elevated:#1a2332; --hpc-bg-teal:#0f2a3d; --hpc-cyan:#00bcd4; --hpc-cyan-bright:#26c6da; --hpc-cyan-rgb:0,188,212; --hpc-blue:#2196f3; --hpc-blue-rgb:33,150,243; --hpc-text-primary:#f0f4f8; --hpc-text-secondary:#94a3b8; --hpc-text-muted:#64748b; /* campaign_hero art direction (pagebuilder/campaign_hero) */ --ch-teal-top:#6fd0d6; --ch-teal-bottom:#62c3cd; --ch-sand:#fae4a4; --ch-foam-1:#eaf6f1; --ch-foam-2:#a9dedf; }