/** * Gymnastics Plus - the site header, standalone * --------------------------------------------------------------------------- * THE ASK (JP, 2026-09-08): "bring these in to the new header", naming the four * public pages still carrying the old nine-link header, with his reason: "even * tho we currently are not naving to them i want to set them up right". * * WHY THIS FILE EXISTS, same reason as css/gp-site-footer.css. The header's * styling lived inside css/gp-homepage.css, which loads only for templates in * gp_public_surface_templates(), so the header could not be added to a page * without also giving that page the homepage's reset, body font and heading * scale. These are that header's rules and nothing else. * * EXTRACTED PROGRAMMATICALLY, not by hand. The selector set was taken from the * header markup's own class list (template-parts/homepage/header.php), then * every matching rule was pulled from gp-homepage.css with its @media context. * Hand-copying the footer's rules cost three separate mistakes; a machine does * not skip a breakpoint or invent a margin. * * THE FOUR HOMEPAGE-LOCAL ALIASES ARE RESOLVED: --black, --black-2, --gold and * --line are defined in gp-homepage.css's own :root and would be undefined * here, so each is replaced by the --gpp-* token it aliases. Everything now * resolves through assets/css/gp-public.css, which the module declares as a * dependency. * * Behaviour lives in js/gp-site-header.js: the mobile nav toggle and the * signed-in account menu, both lifted verbatim and both self-guarding. * * OWNERSHIP: a SHARED SEAM, like css/gp-site-footer.css. UB inherits it when it * unparks; changes are a coordinated slice, not a drive-by. * * Tokens only, no raw hex, no :root of its own. */ /* --------------------------------------------------------------------------- * THE HOMEPAGE'S RESET, SCOPED TO THE HEADER. * * gp-homepage.css styles this markup partly through BARE ELEMENT rules, which a * class-driven extraction cannot see. The first pass caught only `nav` and shipped * a header that LOOKED right. The orchestrator's gate, by demanding the signed-in * and menu-open states, surfaced three more: * * * margin/padding 0 the account button took the UA's 1px 6px * img,svg display:block the chevron sat on the text baseline * a color:inherit .acct-mobile turned gold, from gp-core's a{} * * Copied from the bare rules at the top of gp-homepage.css and scoped so they * cannot reach past the header into the host page, which is the whole point of a * component. Removing this block costs 9 of the 31 parity compares, so it is * carrying its weight and a control proves it. * * SPECIFICITY IS PART OF THE COPY. The homepage's reset is `*`, which has ZERO * specificity and therefore LOSES to every bare element rule in gp-base.css (`p` * keeps its margin there). Written as `header *` it becomes (0,0,1), BEATS * gp-base, and flattens the account menu. `:where()` contributes nothing, so * `:where(header) *` is (0,0,0) again: the same scope, the same losing position. * * NOTHING ELSE BELONGS IN HERE. Two more declarations were added during the gate * and both were WRONG, each compensating for a rig that had not loaded * gp-core.css on the homepage side: see the header rule below. * ------------------------------------------------------------------------ */ :where(header), :where(header) *, :where(header) *::before, :where(header) *::after { box-sizing: border-box; margin: 0; padding: 0; } :where(header) img, :where(header) svg { display: block; max-width: 100%; } :where(header) a { color: inherit; text-decoration: none; } .btn { display:inline-flex; align-items:center; gap:8px; font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; font-size:14px; padding:15px 28px; border-radius:4px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover { transform:translateY(-2px); } .btn-gold { background:var(--gpp-color-cta); color:var(--gpp-color-cta-ink); } .btn-gold:hover { background:var(--gpp-color-cta); box-shadow:0 8px 24px var(--gpp-tint-accent-35); } header { position: sticky; top: 0; z-index: 50; background: var(--gpp-color-bg-invert); /* font-family IS pinned, and it is the only inherited value that is. On the homepage the header inherits Inter from gp-homepage.css's body rule; on a page that has not joined the public surface it would inherit that page's font instead. Measured: Poppins against the homepage's Inter, the same defect the owner caught on the legal page. COLOUR AND LINE-HEIGHT ARE DELIBERATELY ABSENT. Both were pinned here at one point, to var(--gpp-color-text) and 1.6, and both made the SERVED page worse: rgb(23,24,27) against the homepage's rgb(23,23,23), and a header taller than the homepage's. Every page-template body carries `gp-app`, the homepage's included, so both pages already inherit the same ink and the same 1.5 from gp-core.css. The rig said otherwise only because it had not loaded gp-core.css on the homepage side. Inherit; do not pin. */ font-family: 'Inter', sans-serif; } /* The header's own nav bar. gp-homepage.css styles this as a BARE `nav` rule, which my class-driven extraction could not see; it cost a 15px height difference in the first parity run. SCOPED to the header on purpose: two of the four target pages carry their own