/* ========================================================================== COMPONENT LAYER — Cactus League 2027 ========================================================================== Opened by WP-2.4 (buttons). This is where Phase 2's components live — buttons now, header/nav (WP-2.5), footer (WP-2.6) and the countdown (WP-2.8) next. LOAD ORDER MATTERS AND IS DELIBERATE (header.php): bootstrap.min.css → tokens.css → styles-custom.css → components.css Last means a component can override a legacy rule in styles-custom.css without !important. It also means it can override tokens.css §8's global :focus-visible rule — which is load-bearing, see the border-radius note under §1 below. RULES FOR THIS FILE 1. Reference --cl-* tokens, never raw hex. If a value is missing, add it to tokens.css rather than hardcoding it here. 2. Express anything Bootstrap can express as a --bs-* variable AS one, so the framework's own modifiers (.btn-sm, .btn-lg, .disabled) keep working. Declaring the final property directly is what broke .btn-sm/.btn-lg before WP-2.4; see §1. 3. Never suppress a focus indicator. tokens.css §8 restores :focus-visible across the site after it had been removed in three places; nothing here may set `outline: 0`, `outline: none` or a zero-alpha/zero-spread box-shadow on :focus or :focus-visible. ========================================================================== */ /* ========================================================================== 1. BUTTONS — WP-2.4 ========================================================================== Three variants and two context modifiers: .btn-cl-primary solid brand green the default action .btn-cl-secondary green outline the second choice on a light page .btn-cl-accent solid orange conversion CTAs (tickets, buy, join) .btn-cl-on-light modifier: solid variant sitting on a white surface .btn-cl-on-dark modifier: outline variant sitting on a dark panel .btn-primary is an alias of .btn-cl-primary so the twelve existing call sites keep rendering exactly as before — WP-2.4 changes no markup. WHY THE DEFAULT ASSUMES A COLORED PANEL. All twelve .btn-primary call sites put the button inside .bg-green / .bg-brown / .bg-alt or over a photograph, and eleven of them are `d-grid` so the button is full width. That is why the resting border is WHITE: a green button on a dark green panel disappears into it, and the hairline is the only thing keeping the control findable. .btn-cl-on-light swaps that hairline for a tone-matched dark one where the surface is white. TWO BUGS THIS FIXES, both measured on the running site 2026-07-29: 🐛 .btn-sm AND .btn-lg WERE INERT. A `.btn-primary` measured 34px / 5.6px padding / 13.76px type with .btn-sm, with .btn-lg, and with neither — three identical results — while a stock .btn-success went 38px → 48px correctly. Cause: styles-custom.css set `padding` and `font-size` as direct properties, which beat Bootstrap's `.btn { padding: var(--bs-btn-padding-y) ... }` no matter what .btn-lg puts in those variables. Everything below goes through the variables instead, which is what makes the size scale real. 🐛 THE DISABLED STATE RENDERED AT 1.65:1. tokens.css shipped white text on --cl-green-300 (2.25:1 on its own), and Bootstrap then composites `opacity: var(--bs-btn-disabled-opacity)` = .65 on top of it, landing at an effective 1.65:1. Not a WCAG 1.4.3 violation — inactive controls are exempt — but illegible in practice, and a good example of a value that looks fine in the file and is not what reaches the screen. Now opacity is pinned to 1 with explicit neutral colors at 4.06:1. ⚠️ BORDER-RADIUS IS DECLARED DIRECTLY AS WELL AS THROUGH THE VARIABLE, and that is not redundant. tokens.css §8 has a global `:focus-visible { border-radius: var(--cl-radius-sm) }`. It and Bootstrap's own `.btn { border-radius: var(--bs-btn-border-radius) }` are both specificity (0,1,0), and tokens.css loads after bootstrap.min.css — so :focus-visible wins, and a pill whose radius came ONLY from the variable would square off the instant it received keyboard focus. Measured with an `` (text inputs match :focus-visible even on programmatic focus): 9.6px → 4px for a variable-only radius, unchanged for a directly declared one. The direct declaration in this later file is what holds the shape. Keep both lines. -------------------------------------------------------------------------- */ /* ---- 1a. Shape — shared by every variant ---- */ .btn { --bs-btn-padding-y: var(--cl-btn-padding-y); --bs-btn-padding-x: var(--cl-btn-padding-x); --bs-btn-font-size: var(--cl-btn-font-size); --bs-btn-font-weight: var(--cl-weight-semibold); --bs-btn-border-width: var(--cl-btn-border-width); --bs-btn-border-radius: var(--cl-btn-radius); /* See the ⚠️ note above — this line is what survives :focus-visible. */ border-radius: var(--cl-btn-radius); letter-spacing: var(--cl-tracking-wide); text-transform: uppercase; /* Enumerated rather than `transition: all`, so a future transform or box-shadow change cannot accidentally animate the focus ring. */ transition: background-color var(--cl-duration-fast) var(--cl-ease), border-color var(--cl-duration-fast) var(--cl-ease), color var(--cl-duration-fast) var(--cl-ease); } /* Size modifiers. These must come AFTER .btn: they are the same specificity (0,1,0), so it is source order that lets them win. Bootstrap's own px values are replaced with token values so the scale stays on-brand. */ .btn-sm { --bs-btn-padding-y: var(--cl-btn-padding-y-sm); --bs-btn-padding-x: var(--cl-btn-padding-x-sm); --bs-btn-font-size: var(--cl-btn-font-size-sm); } .btn-lg { --bs-btn-padding-y: var(--cl-btn-padding-y-lg); --bs-btn-padding-x: var(--cl-btn-padding-x-lg); --bs-btn-font-size: var(--cl-btn-font-size-lg); } /* Disabled — one neutral treatment for every variant. Pinning the opacity to 1 is the point: Bootstrap's .65 default is what turned the old pale-green disabled state into an effective 1.65:1. */ .btn { --bs-btn-disabled-opacity: 1; --bs-btn-disabled-color: var(--cl-btn-disabled-color); --bs-btn-disabled-bg: var(--cl-btn-disabled-bg); --bs-btn-disabled-border-color: var(--cl-btn-disabled-border); } /* ---- 1b. PRIMARY — solid brand green. The default action. ---- Contrast, white label on the fill: rest 8.64:1 · hover 11.19 · active 12.75. Was rgb(49 111 79 / 60%) before WP-2.2, which resolved to #83a995 over white and gave 2.60:1 — least readable at rest, legible only on hover. */ .btn-cl-primary, .btn-primary { --bs-btn-color: var(--cl-text-inverse); --bs-btn-bg: var(--cl-primary); --bs-btn-border-color: var(--cl-white); --bs-btn-hover-color: var(--cl-text-inverse); --bs-btn-hover-bg: var(--cl-primary-hover); --bs-btn-hover-border-color: var(--cl-white); --bs-btn-active-color: var(--cl-text-inverse); --bs-btn-active-bg: var(--cl-primary-active); --bs-btn-active-border-color: var(--cl-primary-active); } /* ---- 1c. SECONDARY — green outline, fills on hover. ---- The variant this site genuinely lacked: every button on it was the primary. Contrast: green-500 label on white 8.64:1, and the same green as the border is 8.64:1 against white — far past the 3:1 that WCAG 2.2 SC 1.4.11 asks of a control boundary. Hover flips to the solid primary fill, so a secondary and a primary side by side resolve to the same shape and weight on interaction. */ .btn-cl-secondary { --bs-btn-color: var(--cl-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--cl-primary); --bs-btn-hover-color: var(--cl-text-inverse); --bs-btn-hover-bg: var(--cl-primary); --bs-btn-hover-border-color: var(--cl-primary); --bs-btn-active-color: var(--cl-text-inverse); --bs-btn-active-bg: var(--cl-primary-active); --bs-btn-active-border-color: var(--cl-primary-active); } /* ---- 1d. ACCENT — solid orange. Conversion CTAs only. ---- Tickets, buy, join, subscribe — the actions Phase 3's schedule page and WP-2.6's newsletter signup need and that no current variant expresses. ⚠️ NOT the brand orange. --cl-orange-500 (#f15a2e) gives a white label 3.36:1, which is fine for a large graphic fill but fails AA for button text, which is normal-size text. --cl-orange-700 (#af4526) carries the same accent role at 5.67:1 · hover 7.50 · active 10.43. Use orange-500 for fills and large display text, never for a control label. Use sparingly. An accent that appears on every button is not an accent — one per view, on the action the page exists to get. */ .btn-cl-accent { --bs-btn-color: var(--cl-text-inverse); --bs-btn-bg: var(--cl-orange-700); --bs-btn-border-color: var(--cl-white); --bs-btn-hover-color: var(--cl-text-inverse); --bs-btn-hover-bg: var(--cl-orange-800); --bs-btn-hover-border-color: var(--cl-white); --bs-btn-active-color: var(--cl-text-inverse); --bs-btn-active-bg: var(--cl-orange-900); --bs-btn-active-border-color: var(--cl-orange-900); } /* ---- 1e. CONTEXT MODIFIERS ---- Specificity (0,2,0) beats the (0,1,0) variant rules, so these compose with any variant and need no !important. */ /* Solid variant on a white / light surface: swap the white hairline for a tone-matched dark one. The white border is invisible rather than harmful on white — verified on directory.php, where .clear-filters-btn has rendered a white border on a light gradient for years without anyone noticing — so this is an upgrade for new work, not a fix applied retroactively to old markup. */ .btn-cl-on-light.btn-cl-primary, .btn-cl-on-light.btn-primary { --bs-btn-border-color: var(--cl-primary-active); --bs-btn-hover-border-color: var(--cl-primary-active); } .btn-cl-on-light.btn-cl-accent { --bs-btn-border-color: var(--cl-orange-900); --bs-btn-hover-border-color: var(--cl-orange-900); } /* Outline variant on a dark panel or photograph: white label and hairline, inverting to a white fill with a green label on hover. White on the .bg-green panel measures 16.29:1 and on .bg-brown 15.51:1. */ .btn-cl-on-dark.btn-cl-secondary { --bs-btn-color: var(--cl-text-inverse); --bs-btn-border-color: var(--cl-white); --bs-btn-hover-color: var(--cl-primary); --bs-btn-hover-bg: var(--cl-white); --bs-btn-hover-border-color: var(--cl-white); --bs-btn-active-color: var(--cl-primary); --bs-btn-active-bg: var(--cl-gray-200); --bs-btn-active-border-color: var(--cl-gray-200); } /* ---- 1f. LEGACY ---- .btn-dark is DEPRECATED. Its name has never matched its color — it renders the mid-green #316f4f (--cl-primary-soft, white label 5.97:1), not a dark button, which is exactly the kind of misnamed class that gets copied into new markup by someone reading the class list rather than the page. One call site: schedule-custom.php:200, the "Display Custom Schedule" submit. Deliberately NOT migrated here. That button is its page's primary action, so the honest replacement is .btn-cl-primary.btn-cl-on-light rather than the outline variant — a visible change to a page that SCHEDULE-SPEC.md already has 301-ing to /schedule.php in Phase 3. Retiring the class and the page together is one change instead of two. Colors are unchanged from WP-2.2. */ .btn-dark { --bs-btn-color: var(--cl-text-inverse); --bs-btn-bg: var(--cl-primary-soft); --bs-btn-border-color: var(--cl-black); --bs-btn-hover-color: var(--cl-text-inverse); --bs-btn-hover-bg: var(--cl-ink); --bs-btn-hover-border-color: var(--cl-black); --bs-btn-active-color: var(--cl-text-inverse); --bs-btn-active-bg: var(--cl-black); --bs-btn-active-border-color: var(--cl-black); } /* .storeCTA is a hand-rolled button on a
, not a .btn — five store pages build it from CMS content (Items.info8), so the markup cannot become an without knowing what that field holds. It therefore cannot inherit any of the above, and WP-2.2 tokenized it in place. What it CAN do is consume the same --cl-btn-* tokens, so it stops drifting away from the real buttons every time the button shape changes. Folding it into a genuine variant needs the CMS field audited first — logged for Phase 4's store work. SHAPE TOKENS ONLY — deliberately no border. styles-custom.css sets `border-color: var(--cl-white)` with no border-style, so this element has never actually painted a border, and on the store-membership pages it sits on a WHITE background where the site's usual white hairline would be invisible anyway. Adding one would be a design change to CMS-driven markup, which is what the audit above is for. It is the natural first user of .btn-cl-on-light once it becomes a real button. */ .storeCTA { font-size: var(--cl-btn-font-size); padding: var(--cl-btn-padding-y) var(--cl-btn-padding-x); border-radius: var(--cl-btn-radius); } /* ========================================================================== 2. HEADER + NAV — WP-2.10 step 3 (replaces WP-2.5 / WP-2.6) ========================================================================== ONE STATE, one bar. Tokens in tokens.css §5c. 🔑 WHAT WAS DELETED HERE, AND WHY IT IS A DELETION RATHER THAN A REFACTOR. Michael, 2026-08-06: no more sticky header — the key pages now live in the footer too, so it no longer has to follow the user. The design agrees, and that was verified by grep rather than by eye: zero `position: sticky` and zero `position: fixed` in the whole file. That removed, in one go: · `position: sticky` and the condense-on-scroll state machine (.is-condensed) · the TWO scroll sentinels 240px apart, and the whole reason they existed — a single trigger point oscillated, because condensing removed the header's own height from the document, scroll anchoring pulled the page back across that threshold, and the state flipped forever · the stacked full/minimal logo cross-fade, and with it the only reference anywhere to img/Cactus-League-Simple.svg · .is-resizing, which guarded a real Chrome bug: a transitioned property whose value comes from var() does not pick up a change to that var, so every breakpoint step left half the header sized for the breakpoint it had left · js/header.js — deleted, ~200 lines · --cl-header-dur / -swap / -dur-badge / -lock, and --cl-header-brand-h ⚠️ ~520 LINES WENT. If something in the header looks unfinished, check whether it was a property of the condensed state before assuming it regressed — most of the old complexity was two states reconciling, and there is now only one. ⚠️ THE OVERHANG IS THE ONE PIECE OF THE OLD ARITHMETIC THAT SURVIVES, and it survives inverted. WP-2.5/2.6 sized the BAR around the badge, so a smaller overhang made the bar taller (the badge's bottom edge is always pad-y + logo). The 2027 bar is a fixed 96px and the badge simply overflows it, so the two are independent now and the identity that made the old header hard to retune is gone. Read the ⚠️ on --cl-header-overhang in tokens.css §5c before changing it. ========================================================================== */ /* THE HEADER RESERVES THE OVERHANG, and that is the whole reason this rule exists rather than the badge just hanging. In the design the 200px badge sits in a 96px bar and overlaps the hero photograph below it. We cannot assume a hero: 58 of the 59 pages open with ordinary content, and an unreserved overhang would lay the badge across their

. So the header pushes the page down by exactly the amount the badge overflows, and nothing is ever covered. Step 4's homepage may pull its hero up into this space with a negative margin to get the design's exact overlap. That is a per-page decision and it belongs there, not here — the shared include must be safe on every page by default. */ /* 🔑 THE HEADER'S GEOMETRY IS DECLARED ON THE WRAPPER, NOT ON THE HEADER, AND THAT MOVED IN STEP 5 BATCH 1 FOR ONE REASON: A SECOND COMPONENT NOW NEEDS IT. The rule it obeys has not changed and is still tokens.css §5c's 🐛 — a custom property is computed in the scope where it is DECLARED, so a calc at :root substitutes :root's inputs once and every descendant inherits that finished number. Declared at :root, --cl-header-overhang measured 110px at all six breakpoints instead of 110/78/70/48. The fix was to declare it on the same element the media queries target. What changed is WHICH element that is. Custom properties inherit DOWN, and `.cl-page-head` (§10a) is inside
— a SIBLING of
, so nothing declared on `.cl-header` is visible to it. The page head needs two of these numbers: --cl-lead-inset for its left edge and --cl-header-overhang for its minimum height. Re-deriving either one over there would mean duplicating five tokens that get overridden at four breakpoints — the exact "four numbers kept in sync by hand" §8a rejected when the homepage hero faced this from the other side. Declared here, on the nearest ancestor BOTH subtrees share, each number exists once and every breakpoint step re-runs both calcs for free. ⚠️ SO THE RESPONSIVE STEPS BELOW TARGET `.cl-site-wrapper`, NOT `.cl-header`. Moving any of --cl-header-pad-x / -logo / -logo-box-w / -logo-top / -h back onto `.cl-header` re-freezes both calcs at the :root values and breaks the page head silently — it renders correctly at one width and wrong at five. Everything still READS the tokens from wherever it sits; only the declaration moved up one level. */ .cl-site-wrapper { --cl-header-overhang: calc(var(--cl-header-logo) + var(--cl-header-logo-top) - var(--cl-header-h)); /* The left edge of "WELCOME TO THE CACTUS LEAGUE" — the bar's inline padding, plus the slot the badge occupies in the flex row, plus `.cl-header__lead`'s gap. Not measured off the rendered welcome line and not a copied pixel value: it is the same three terms the flex row itself resolves, so the two edges cannot drift. ⚠️ --cl-header-logo-box-w, NOT --cl-header-logo. The badge is 200px of artwork in a 180px slot and deliberately overhangs it to the right (see tokens.css §5c), so the artwork's right edge lands 28–32px SHORT of this inset at every desktop step — checked at 1440/1100/900, not assumed. That clearance is what lets the page head sit beside the badge without the badge ever crossing into text. */ --cl-lead-inset: calc(var(--cl-header-pad-x) + var(--cl-header-logo-box-w) + var(--cl-space-7)); } .cl-header { margin-bottom: var(--cl-header-overhang); /* The subnav curtain positions from this element's top edge (§2c), so the header has to be its containing block. ⚠️ NO z-index HERE. Giving the header one would open a stacking context around both the bar and the curtain, and the curtain would then be trapped inside it — unable to paint below the bar, which is the entire illusion. The bar's own `z-index: 30` and the curtain's 20 are siblings in the ROOT stacking context, and they have to stay that way. */ position: relative; } /* 🗑️ THE `.navbar` NEUTRALISERS ARE GONE (step 4b), AND SO IS THE CLASS. Step 3 kept `.navbar` on this element and cancelled its flex layout and `--bs-navbar-padding-y` here, because the menu below was a Bootstrap collapse whose `.navbar-nav .nav-link` children read `--bs-navbar-*` variables that only exist on `.navbar`. Step 4b replaced the collapse with the curtain (§2c), so nothing in this subtree reads those variables and both the class and the four declarations cancelling it are dead. The `display: block` stays — the bar and the curtain are stacked, and it is now this element's own layout rather than an override of somebody else's. ⚠️ `z-index: 30` IS THE COMPONENT, NOT DECORATION. It is what puts the bar above the curtain (20) and the backdrop (10) so the panel appears to emerge from behind it. Both other values are meaningless without this one. */ .cl-header__bar { display: block; padding: 0; background: var(--cl-surface-brand); position: relative; z-index: 30; } /* The bar proper: a fixed-height row. Overflow is deliberately NOT hidden — the badge has to escape downward. */ .cl-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-4); height: var(--cl-header-h); padding-inline: var(--cl-header-pad-x); } .cl-header__lead { display: flex; align-items: center; /* 3rem, up from 1.5rem (Michael, 2026-08-08 — the welcome line sat too close to the badge). ⚠️ THE GAP IS NOT THE WHOLE GAP, which is why the fix needed doubling rather than nudging: the badge is 200px of artwork inside a 180px box (--cl-header-logo-box-w), so it already overhangs its own slot by 20px and eats a third of the old spacing before the flex gap is measured at all. */ gap: var(--cl-space-7); /* The badge is absolutely positioned inside this, so the flex row needs a reserved slot for it — otherwise the welcome line slides under the logo. */ min-width: 0; } /* ---- The badge ---- A fixed-size box the artwork overflows, rather than a sized image: the box is what the flex row measures, and the overflow is what produces the overhang. `height` matches the bar so the badge is vertically anchored to it at every breakpoint without a second variable to keep in sync. */ .cl-header__brand { position: relative; display: block; flex: 0 0 auto; width: var(--cl-header-logo-box-w); height: var(--cl-header-h); /* .navbar-brand used to supply this; the class is gone from the markup. */ padding: 0; margin: 0; } .cl-header__logo { position: absolute; top: var(--cl-header-logo-top); left: 0; width: var(--cl-header-logo); height: var(--cl-header-logo); /* Above the bar's own stacking context so the overflowing part paints over whatever the page puts below the header. */ z-index: 40; /* The design's lift. It is what separates a dark badge from the dark green bar behind its top half. */ filter: drop-shadow(0 10px 22px rgb(0 0 0 / 40%)); } /* ---- The welcome line ---- Reinstated 2026-08-07 on Michael's instruction; WP-2.5 had dropped the welcome statement and WP-2.6 the tagline. White on --cl-green-500 measures 8.64:1. ⚠️ NOT A HEADING, and the markup must stay a

. Every page already has its own

; a heading in a shared include would give all 59 pages a second one, and WP-2.7 spent real time unpicking exactly that pattern elsewhere. */ .cl-header__welcome { margin: 0; font-family: var(--cl-font-display); font-weight: var(--cl-weight-bold); font-size: var(--cl-header-welcome-size); letter-spacing: 0.02em; text-transform: uppercase; line-height: var(--cl-leading-tight); color: var(--cl-text-inverse); /* ⚠️ `color` must be declared here, not inherited. styles-custom.css has `:is(body, p, a) { color: var(--cl-text) }` — an element selector that matches every

on the site — so a

in a dark band inherits nothing and renders near-black on the green. That is the identical bug WP-2.6 found in the footer, where the signup paragraph rendered #232323 on #141414 at 1.06:1. It is not inheritance failing; it is a rule that matches, and inheritance only fills where nothing does. */ } /* ---- The two inline links ---- */ .cl-header__actions { display: flex; align-items: center; gap: var(--cl-header-actions-gap); flex: 0 0 auto; } .cl-header__link { font-family: var(--cl-font-body); font-weight: var(--cl-weight-bold); /* --cl-text-ui (14px), not --cl-text-sm. ⚠️ THE TRACKING BELOW DEPENDS ON IT: 0.107em is the design's 1.5px expressed at 14px, so rendering at 12.8px silently gave 1.37px and the comment was quietly wrong. An em tracking and a rounded font-size are only consistent if the size is the one the em was derived from — check both together, always. See tokens.css §3. */ font-size: var(--cl-text-ui); letter-spacing: 0.107em; /* the design's 1.5px at 14px */ text-transform: uppercase; text-decoration: none; white-space: nowrap; /* --cl-on-brand-muted at rest, white on hover — 6.75:1 and 8.64:1 on the bar. Both clear AA; the muted step is the design's, and it is a real token rather than an opacity so the ratio is knowable. */ color: var(--cl-on-brand-muted); /* The underline is a transparent border at rest, not a border that appears: a border toggling between none and 3px would shift the text 3px upward on hover, and the reserved space is what keeps the row still. 🐛 THE PADDING IS SYMMETRICAL AND THAT IS WHAT CENTRES THE LABELS AGAINST THE PANCAKE (Michael, 2026-08-08: "lower Schedule and Stadium Map so they are vertically centred with the pancake menu"). The row is `align-items: center`, which centres each item's BORDER BOX — and with 7px of padding-plus-border below the text and nothing above it, the box was centred while the text inside it sat 3.5px high. The trigger next to it has no such asymmetry, so the two read as misaligned. 🔑 `align-items: center` centres boxes, not glyphs. Any item carrying one-sided padding is off-centre by half of it, and the fix belongs on the item rather than on the row. The 7px is `padding-bottom + border-width`, written as a calc so the two cannot drift apart. ⚠️ This also answers "don't move them up when they are active": the border is 3px in BOTH states (transparent → amber), so the box never changes size and nothing shifts. Verified by measuring both states, not by reading. */ padding-bottom: 4px; padding-top: calc(4px + 3px); border-bottom: 3px solid transparent; transition: color var(--cl-duration-fast) var(--cl-ease), border-color var(--cl-duration-fast) var(--cl-ease); } .cl-header__link:hover, .cl-header__link:focus-visible { color: var(--cl-text-inverse); } /* Current page. The amber is the design's marker; `aria-current="page"` in the markup is the half of this that reaches a screen reader, because colour alone fails WCAG 1.4.1. Amber on the green bar is 4.68:1 — AA. */ .cl-header__link.is-current { color: var(--cl-text-inverse); border-bottom-color: var(--cl-amber-500); } /* Below the md breakpoint the bar is badge + trigger only. The two links move into the slide-down panel, where they already exist as full nav items — so this hides duplicates rather than removing access to anything. The welcome line goes too: 23px of uppercase erbaum plus a badge does not fit a phone. Decorative brand furniture, so leaving the accessibility tree with it is correct — nothing depends on reaching it, unlike a skip link. */ @media (max-width: 767.98px) { .cl-header__welcome, .cl-header__link { display: none; } } /* ---- The responsive scale ---- Large screens first, per Michael. Three steps, and each one moves the badge and the bar together — unlike the old header, where they were locked by an identity and could not be tuned independently. The badge is allowed to stay large relative to the bar as the viewport narrows, because it is the brand and the bar is only its backdrop. What shrinks first is the padding. */ @media (max-width: 1199.98px) { .cl-site-wrapper { --cl-header-logo: 168px; --cl-header-logo-box-w: 152px; --cl-header-welcome-size: 1.125rem; /* 18px */ --cl-header-actions-gap: var(--cl-space-5); } } @media (max-width: 991.98px) { .cl-site-wrapper { --cl-header-h: 84px; --cl-header-logo: 148px; --cl-header-logo-box-w: 132px; --cl-header-pad-x: var(--cl-space-5); --cl-header-welcome-size: 1rem; /* 16px */ } } /* 🔑 THE MOBILE BADGE IS 230px — Michael, 2026-08-08. He supplied it as three properties on .cl-header__logo (`top: 10px; width: 270px; height: 230px`) and flagged that it might not be the right way to achieve it. It is not, and both reasons are worth writing down. ONE · 270 × 230 IS NOT A SIZE, IT IS A 230px BADGE PLUS DEAD SPACE. The artwork is `viewBox="0 0 182 182"` — square — and carries no preserveAspectRatio, so the default `xMidYMid meet` applies and an SVG in a non-square box LETTERBOXES rather than stretching. In a 270×230 box the circle renders 230 × 230, centred, with ~20px of transparent margin each side. So the visible badge is 230, the 270 is padding, and nothing was distorted — which is why it looked right. Checked in the file, not inferred from the render. TWO · SETTING IT ON THE ELEMENT WOULD HAVE BROKEN THE OVERHANG SILENTLY, and this is the trap tokens.css §5c exists to prevent. `--cl-header-overhang` is DERIVED — `logo + logo-top - header-h` — and .cl-header reserves it as margin-bottom so the badge never lands on a page's

. Hard-coding the size on .cl-header__logo leaves the token at 116px, so the header would reserve 48px while the badge actually hung 168px: a 120px overlap onto real content, on all 58 non-homepage pages, at mobile only, with nothing erroring. Set as tokens, the reserve re-derives itself. ⚠️ WHAT THAT RESERVE NOW COSTS, because it is large and it is the honest consequence rather than a bug: 230 + 10 - 72 = **168px** of blank space below the bar on every mobile page (it was 48px). The curtain pays it too, as badge-clearing padding. If that reads as too much white space, the lever is the badge size — they are the same number by construction. */ @media (max-width: 767.98px) { .cl-site-wrapper { --cl-header-h: 72px; --cl-header-logo: 230px; /* ~0.9 × the badge, matching the ratio the three larger steps use. The artwork overflows this slot deliberately — the box is what the flex row measures, the overflow is what produces the overhang. */ --cl-header-logo-box-w: 207px; --cl-header-logo-top: 10px; --cl-header-pad-x: var(--cl-space-4); } } /* 🐛 THE 230px BADGE COLLIDES WITH THE PANCAKE AT 320px — measured, and it is the one place Michael's figure does not survive. His phone is ~390px wide, where the badge clears the trigger by 43px; at 320 (iPhone SE, and still the narrowest width this project tests) the badge's right edge crosses the trigger's left edge by **12px** and the two overlap. Nothing overflows the card, so no overflow check catches it — the collision is entirely inside the bar. 📌 Below 375px the badge steps back to 180px. That is a 118px reserve instead of 168px, so the smallest phones also carry less blank space — the two follow each other by construction, as §5c intends. */ @media (max-width: 374.98px) { .cl-site-wrapper { --cl-header-logo: 180px; --cl-header-logo-box-w: 162px; } } /* The overhang is derived, not declared per step — see tokens.css §5c. Every breakpoint above changes only the badge and the bar, and the reserved space follows on its own. That is the whole point of expressing it as a calc: the old header had three geometry tokens locked by an identity, and getting any one of them wrong put the rendered overhang 16px off the number in the file. 📌 --cl-lead-inset rides on the same machinery as of step 5 — the steps above change --cl-header-pad-x and --cl-header-logo-box-w, and the page head's left edge follows without a number being written twice. Measured after the move, at the same six widths §5c uses: overhang 110/110/78/70/168/118 and inset 260/260/232/204 — identical to the values before it. */ /* -------------------------------------------------------------------------- 2c. THE SUBNAV CURTAIN — .cl-subnav · WP-2.10 step 4b design/design_handoff_pancake_subnav, option 3A ("slide-down curtain"). Tokens in tokens.css §5c-b. Behaviour in js/subnav.js. 🔑 THIS IS A REPLACEMENT, NOT A RESTYLE, AND THE REASON IS BEHAVIOURAL RATHER THAN VISUAL. WP-2.5's menu was a Bootstrap `.collapse`, which animates its own HEIGHT between 0 and its scroll height. A height animation occupies layout: the page below is pushed down as the menu opens and springs back as it closes. The design's curtain does the opposite — it OVERLAYS the page from behind the bar and the page does not move at all. No easing, duration or transform on a collapse can produce that, because the difference is whether the element is in flow. So the collapse went, and with it: · `.navbar` / `.navbar-collapse` / `.navbar-nav` / `.nav-link` in the header, and the four `--bs-navbar-*` neutralisers §2 carried for them · data-bs-toggle / data-bs-target on the trigger — js/subnav.js owns it now · the two-copy team grid ($teamsNAVUI + $teamsNAVUIlg), which put all fifteen team links in the DOM TWICE on every page and showed one copy per breakpoint with .d-none. One grid, and CSS changes its track count. ⚠️ THE THREE z-index VALUES ARE ONE MECHANISM AND MUST BE READ TOGETHER: bar 30 .cl-header__bar — paints over everything curtain 20 .cl-subnav — slides out from under the bar backdrop 10 .cl-subnav__backdrop — dims the page below and the enabling condition is that NONE of their ancestors opens a stacking context. `.cl-header` is `position: relative` with `z-index: auto` for exactly that reason (see §2 above). Give the header a z-index — which looks like tidying — and the curtain becomes trapped inside it, forced to paint above the bar, and the illusion inverts: the panel slides down OVER the header instead of out from behind it. 🔑 THE BADGE STILL WINS THE OVERLAP, AND THE CURTAIN STILL PADS ITSELF CLEAR. Moving from a collapse to an absolutely positioned panel does not retire step 3's finding, it only changes where the padding goes. `.cl-header`'s `margin-bottom` reserves the badge's ~110px overhang against the PAGE BELOW; it reserves nothing against the header's own descendants. The badge lives inside the z-index-30 bar, so it paints over a z-index-20 sibling no matter what the curtain does. Hence the top padding below. The cost — an open menu carrying the overhang's worth of green above its columns — is the same cost WP-2.6 accepted, and it matches Michael's decision that opening the menu must NOT retract the badge. -------------------------------------------------------------------------- */ .cl-subnav { position: absolute; left: 0; right: 0; /* Flush under the bar. `--cl-header-h` and not a literal, so the three breakpoints that move the bar move the curtain with it — the design's `top: 72px` is only correct at the width it was drawn at. */ top: var(--cl-header-h); z-index: 20; background: var(--cl-subnav-bg); box-shadow: var(--cl-subnav-shadow); /* ⚠️ THE CLOSED PANEL IS NOT CLIPPED BY ITS PARENT — IT IS CLIPPED BY THE CARD, and that is worth stating because the handoff says otherwise ("the panel's parent must be overflow: hidden"). In the prototype the parent is a 580px demo frame. Here the parent is `.cl-header`, which cannot clip: the badge has to escape it downward. What actually contains the off-screen panel is `.cl-site-wrapper`, already `overflow: clip` for its rounded corners (tokens.css §7b) — so a -104% translate takes the curtain above the card's top edge and out of sight for free. Adding `overflow: hidden` to the header to satisfy the spec literally would decapitate the badge. */ transform: translateY(-104%); /* 🔑 `visibility`, NOT `display` OR A CLIPPED transform ALONE — this is the half of the component that keyboard users depend on and nobody sees. A closed curtain is off-screen but still rendered, so without this its ~30 links stay in the tab order: a keyboard user tabbing off the trigger would walk the entire closed menu, focus vanishing off-canvas item by item, with nothing on screen to explain it. `visibility: hidden` removes the subtree from the tab order and the accessibility tree while leaving the transform transitionable, which `display: none` would not. The delay is what makes it work in both directions: opening, visibility flips immediately (0s) so the slide is visible; closing, it waits the full slide duration so the panel does not disappear mid-move. ⚠️ See the 🐛 in tokens.css §6 — that delay is why this component needs its own reduced-motion handling. */ visibility: hidden; transition: transform var(--cl-subnav-dur) var(--cl-subnav-ease), visibility 0s linear var(--cl-subnav-dur); /* The curtain scrolls itself rather than growing past the fold. At 320px it is roughly 900px tall — 15 links, 15 team chips and 6 social pills stacked — and a panel taller than the viewport with the page scroll locked behind it would simply have unreachable content at the bottom. `dvh` with a `vh` fallback: on mobile Safari `100vh` is the LARGE viewport, so the last row would sit behind the URL bar exactly when the list is longest. */ max-height: calc(100vh - var(--cl-header-h)); max-height: calc(100dvh - var(--cl-header-h)); overflow-y: auto; /* Keep an inertial scroll inside the panel from chaining to the document once it hits the end. The scroll lock in js/subnav.js already stops the page moving; this stops the rubber-banding that makes it feel like it nearly did. */ overscroll-behavior: contain; } .cl-subnav.is-open { transform: translateY(0); visibility: visible; transition: transform var(--cl-subnav-dur) var(--cl-subnav-ease), visibility 0s; } .cl-subnav__inner { /* Matched to the HOMEPAGE CONTENT gutter, not the header bar's — Michael, 2026-08-08. See the ⚠️ on --cl-subnav-pad-x: the curtain can align with the page below it or with the bar above it, not both, and the page won. */ padding-inline: var(--cl-subnav-pad-x); /* The badge clearance — see the 🔑 in the section head. Derived from the same token the header reserves, so all three breakpoints follow. */ padding-top: calc(var(--cl-header-overhang) + var(--cl-subnav-pad-y)); padding-bottom: var(--cl-subnav-pad-y-end); } /* ---- The three-column top row ---- The two link columns are EQUAL here, not weighted 2:1 as the collapse was. That split existed to stop a nine-item visitors list towering over a six-item members list inside a Bootstrap row; the curtain's two lists are eight and seven, so they balance on their own. ⚠️ THE DESIGN'S `1fr 1fr auto` IS RIGHT AT THE WIDTH IT WAS DRAWN AT AND WRONG AT OURS, and this is the second time in this package that a proportion has had to be re-derived rather than copied. The prototype's panel is 560px wide, which after gutters and the 196px team column leaves the two link tracks about 114px each — tight, and the lists wrap. Our card is up to 1800px, where the identical rule gives each track ~400px to hold 150px of text: two thin lists stranded at opposite ends of a green field, with the whole layout reading as though something failed to load. `1fr` means "share what is left", and what is left is the thing that changed. So the tracks are capped at a readable measure and the SLACK goes into the space before the team grid, which is pinned right. At 560px this computes to almost exactly the design's layout; at 1800px it stays a menu instead of becoming a poster. */ .cl-subnav__grid { display: grid; grid-template-columns: minmax(0, var(--cl-subnav-col-max)) minmax(0, var(--cl-subnav-col-max)) 1fr; gap: var(--cl-subnav-gap); } /* Pinned to the right edge, which is where the design puts it and where the trigger that opened the menu is. */ .cl-subnav__col--teams { justify-self: end; /* Five 32px chips plus four 11px gaps is 204px; the design says 196 and relies on the chips shrinking. Sized off the tokens so the two cannot drift — change the chip size and the column follows. */ min-width: calc(5 * var(--cl-subnav-team-cell) + 4 * 11px); } /* ---- Group headings ---- Real

s labelling real