/* ============================================================================ University Campus North Lincolnshire — 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="ucnl" is emitted on by header.php. ========================================================================== */ [data-brand="ucnl"]{ /* THE PORTRAIT LOCKUP. 200x302 (0.66:1) — the only one in the group, and the reason the base bar has an overhang hatch at all. Sized to fit the bar it came out at 45px wide, a stamp next to five landscape marks. Instead it now runs at its own scale and BREAKS OUT of the bar, hanging over the band below, which is what the live site does and what the brand expects. 170px tall -> 113px wide; the panel adds 2 x .7rem -> ~135px. overhang 140px: the mark contributes ~52px of row height, so the bar stays the same height as the other five, and ~120px hangs below it. clear 170px: 135px of panel plus a 35px gutter, the room .hero-page and the breadcrumb leave on their inline start so no title runs under it. */ --logo-height:170px; --logo-max-width:130px; --logo-overhang:140px; --logo-clear:170px; --logo-panel:var(--header-bg); --logo-pad:.5rem .7rem .9rem; /* green-050 #eef7f1 · 200 #a8d9bd · 400 #33ab6d · 500 #00904a · 700 #00602a · 900 #004d21 */ --navy:#151a17; --navy-deep:#0b0f0c; /* green-500 darkened along its own ramp (hue held at ~151 deg) so it works both as a text-bearing fill and as text on a light ground. #00904a measured 4.13:1 carrying white and 3.86:1 as text on --light. #008343 measures 4.85:1 on white and 4.51:1 on --light (#f5f8f6), which is the surface most brand text sits on. */ --blue:#008343; --blue-dark:#00602a; --magenta:#00602a; --magenta-dark:#004d21; --magenta-rgb:0,96,42; --lime:#33ab6d; --lime-dark:#00904a; --dblue:#00602a; --light:#f5f8f6; --ink:#141a16; --muted:#4d5a52; --tint-rgb:11,15,12; --accent-1:#33ab6d; --accent-2:#008343; --accent-3:#00602a; /* green-400 leads */ /* --accent-on-dark is one step LIGHTER than --accent-1, not equal to it. The lightest dark ground in the system is the bg-black band (--surface-muted #343735, kept grey by ruling), and #33ab6d measured 4.12:1 there, carrying the eyebrow (base.css) and timeline-subtitle. #3fba79 measures 4.88:1 on that band and 7.82:1 on --navy-deep, hue held at ~148deg. */ --accent:var(--accent-1); --accent-on-dark:#3fba79; --btn-accent-bg:#33ab6d; --btn-accent-text:var(--navy); /* 6.03:1 */ --hero-tint:#00602a; /* green-700 multiply, not near-black */ --display-em:#008343; /* UCNL puts brand GREEN behind title and search bands, white type on top */ --chrome-bg:#eef7f1; /* green-050 */ --page-title-bg:#00602a; /* green-700 */ --page-title-fg:var(--white); --page-title-muted:rgba(255,255,255,.88); --page-title-eyebrow:#a8d9bd; /* green-200 */ --page-title-media-opacity:1; --search-bg:#00602a; --search-fg:var(--white); --search-muted:rgba(255,255,255,.85); --search-accent:#a8d9bd; --page-title-em:#a8d9bd; --header-bg:var(--white); /* UCNL runs a WHITE header bar */ --header-fg:var(--navy); --header-fg-muted:var(--muted); --header-border:var(--line); --header-logo-filter:none; --header-group-logo-filter:brightness(0); /* shared white lockup, white bar — darken or it vanishes */ --btn-primary-text:var(--white); /* white on green-700 = 7.8:1 */ --btn-accent-text:var(--navy); /* DARK label on bright green */ /* UCNL runs its display face for BODY too (confirmed), unlike every other brand which keeps Open Sans for body. skolar-latin does both roles here. */ --font-body:"skolar-latin","Source Serif 4",Georgia,serif; --font-display:"skolar-latin","Source Serif 4",Georgia,serif; --display-weight:700; --display-track:-.015em; --display-track-hero:-.018em; --display-lh:1.02; --display-lh-hero:1; /* per-brand -rgb channels for surviving CSS overlays (HPC, templates, slider, testimonial-shortcode). Computed from this brand's palette. */ --surface-dark-rgb: 21, 26, 23; --surface-dark-alt-rgb: 11, 15, 12; --surface-brand-rgb: 0, 96, 42; --surface-blue-rgb: 0, 131, 67; --accent-rgb: 51, 171, 109; --link-rgb: 0, 96, 42; --blue-rgb: 0, 131, 67; --navy-rgb: 21, 26, 23; --navy-deep-rgb: 11, 15, 12; --dblue-rgb: 0, 96, 42; --text-rgb: 20, 26, 22; } /* The breakout is a DESKTOP move. On the compact bar the header is already only about 110px tall, the brand column is ~130px wide, and there is no wide coloured band immediately under the header to hang the mark over — a 170px lockup dropping onto phone content would cover it rather than decorate it. Below the collapse point the mark therefore returns to an ordinary in-flow logo: no overhang, no panel, and nothing downstream reserving room for it. This lives here rather than in base-theme because it has to WIN over the [data-brand="ucnl"] block above: both selectors have the same specificity and both match , so the later file decides, and the child is the later file. base-theme physically cannot turn these back off. */ @media (max-width: 64em) { [data-brand="ucnl"]{ --logo-height:96px; --logo-max-width:70px; --logo-overhang:0px; --logo-clear:0px; --logo-panel:transparent; --logo-pad:0; } }