/* ═══════════════════════════════════════════════════════════════════════
THE SITE HEADER, FOR PAGES NEXT.JS DOES NOT RENDER.
Operator, 2026-09-22, with the durability page open beside the stadium:
"keep that header with all of our features here not just on this but site
wide."
Five pages on this domain are hand-written HTML served straight out of
/public — the TDEE calculator, the ankle / knee / shoulder scans and the
goal-kick tracker app. React never touches them, so they could not mount
, and every one of them opened with no logo, no Browse, no Login
and no way back into the site. A visitor who found the TDEE calculator in
Google landed on an ERA page that did not look like ERA and had no door out.
This file and its twin site-header.js are that header, in plain CSS and
plain JS. ⚠️ THEY ARE THE ONLY COPY — a static page includes these two
files and writes no header markup of its own, and
scripts/check-site-header.mjs fails the build if one of them stops
including them, or if the nav here stops matching BROWSE_ITEMS in
src/app/(website)/_components/Header.tsx. Two implementations are
unavoidable (one runtime has React, the other has none); two SETS OF
LINKS are not, and the guard is what keeps that true.
Class names are deliberately IDENTICAL to the React header's
(src/app/(website)/_components/website.css) so the two read as one thing
when you diff them. Everything below is a straight port of the header
block of that file, with two differences, both forced by the host pages:
1. font-family cannot reference --font-poppins (next/font does not run
here), so each rule names Poppins with a real fallback stack;
2. the header is followed by .era-header-spacer instead of a pt-16 on a
— the host pages own their own rules (one of them sets
padding-bottom on html,body) and a spacer never argues with them.
═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ THE DROP-IN RESET — DO NOT DELETE IT.
This file lands inside five hand-written documents that know nothing about
it and each carry their own GLOBAL element rules. Anything a class below
does not state is inherited from whatever that page happened to write, and
that is not theoretical: the ankle and knee scans both set
`input, select, button { width: 100%; }`, which is a type selector this
file never contested — so the Browse button rendered 266px wide, the nav
wrapped onto three lines and the header grew to twice its height on both
pages (measured 2026-09-22, before this block existed).
So the subtree is flattened first and then rebuilt by the classes below.
Everything here is at (0,1,0), the same weight as those classes, and it
comes FIRST — so source order hands every property back to the rule that
actually wants it, and only the untouched ones stay reset.
⚠️ `outline` is deliberately NOT reset: two host pages null it on buttons,
and a keyboard user must still see focus. The :focus-visible rule at the
foot of this file puts that back on our own terms. */
.era-header,
.era-header *,
.era-browse-panel,
.era-browse-panel * {
box-sizing: border-box;
width: auto;
min-width: 0;
max-width: none;
height: auto;
min-height: 0;
max-height: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
flex: 0 1 auto;
float: none;
color: inherit;
font: inherit;
line-height: normal;
letter-spacing: normal;
text-transform: none;
text-align: left;
text-decoration: none;
white-space: normal;
}
/* iOS draws its own chrome on a bare whatever the CSS says. */
.era-header button,
.era-browse-panel button {
-webkit-appearance: none;
appearance: none;
}
/* ─── Header ─────────────────────────────────────────────────────── */
.era-header {
width: 100%;
/* Fixed, NOT sticky — the same reason the React header is: the Browse panel
locks scrolling with overflow:hidden, which un-sticks a sticky header.
A second reason applies only here: one host page sets
`html, body { overflow-x: hidden }`, which makes a scrollport that
never scrolls, and a sticky child of it would never stick at all. */
position: fixed;
top: 0;
left: 0;
z-index: 50;
background: #000;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
overflow: visible;
/* Stated, not inherited — the reset above hands font and color back to the
host page's , and the five host pages disagree about both. */
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #fff;
}
/* Holds the 64px the fixed header takes out of the flow. The host page's own
first section starts underneath it, untouched. */
.era-header-spacer {
height: 64px;
flex-shrink: 0;
}
.era-header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 16px;
}
@media (min-width: 640px) {
.era-header-inner { padding: 0 1.5rem; }
}
.era-header-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* THE BRAND: THE SILVER MARK, THEN THE WORDS (operator, 2026-09-22), mark at
* the board's own 40px. Mirrors the .era-logo block in website.css exactly;
* these two files are one header in two runtimes.
*
* ⚠️ THESE TWO RULES ARE LOAD-BEARING IN A WAY THEY ARE NOT ON THE REACT SIDE.
* The drop-in reset at the top of this file sets width/height to auto for the
* whole subtree, so WITHOUT a size here the mark renders at its intrinsic
* 200x200 and bursts the 64px bar. They were lost once, in the rewrite that
* brought the two-tier wordmark in, and nothing failed — the guard checks the
* wordmark and the face, not this. */
.era-logo {
flex-shrink: 0;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.era-logo img {
height: 40px;
width: 40px;
object-fit: contain;
display: block;
}
/* THE WORDMARK: STACKED, THE WAY THE ORIGINAL LOCKUP WAS DRAWN.
* Operator, 2026-09-22: "can you put the word elite up the top, then rugby
* below? Then the app next to the word rugby. So it sort of stacked. Not one
* big line. And all devices."
*
* ELITE
* RUGBY App
*
* Which is exactly the arrangement the retired era-logo.webp image had — this
* rebuilds it as TEXT beside the silver mark, so it can take the board's type
* and colour instead of being baked into a white file.
*
* The type is still read off the board's header row
* (src/components/stadium2/Stadium2App.tsx): 13.5px/700 at 0.08em for the
* name, 10px/600 at 0.14em in #7e92ac for the small word. Only the ARRANGEMENT
* is this file's own. "App" is baseline-aligned to RUGBY, not centred, so the
* two words sit on one line the way they do in the original mark.
*
* ⚠️ THE FACE IS ARIAL, AND IT WAS MEASURED, NOT ASSUMED. The board portals to
* document.body and sets no font of its own, and src/app/globals.css says
* `body { font-family: Arial, Helvetica, sans-serif }` — so the wordmark he is
* pointing at is Arial, whatever --font-geist-sans is doing on . This was
* nearly shipped as Geist on the strength of the root layout's next/font call;
* a computed-style probe in the browser caught it. If the board's face ever
* changes, it changes HERE TOO or the two stop matching.
*
* ⚠️ ONE SIZE ON EVERY DEVICE ("and all devices"). The stepped-down phone sizes
* this replaced existed because ELITE RUGBY APP on ONE line was ~120px wide and
* the 375px bar also holds Browse and Start Free. Stacked, the widest line is
* "RUGBY App" at ~70px, so the room appeared and the steps were deleted rather
* than kept out of habit. Measured at 375px: no overflow. */
/* ⚠️ .era-wordmark-row IS IN THIS LIST FOR A REASON. On the static tool pages
* the drop-in reset at the top of site-header.css sets `text-transform: none`
* on `.era-header *`, and a SPECIFIED value beats an INHERITED one — so the row
* did not take uppercase from its parent and rendered "Rugby" instead of
* "RUGBY" on all five of them, while the React site looked right. Measured in
* the browser; it is invisible in the source. Both files carry the same list so
* they cannot drift. */
.era-wordmark,
.era-wordmark-row,
.era-wordmark-app {
font-family: Arial, Helvetica, sans-serif;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.era-wordmark {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.08em;
color: #fff;
}
/* The second line: RUGBY with App beside it, sharing a baseline. */
.era-wordmark-row {
display: inline-flex;
align-items: baseline;
gap: 5px;
}
.era-wordmark-app {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
color: #7e92ac;
}
/* ⚠️ A TOUCH THICKER, AND NOT VIA font-weight (operator, 2026-09-22: "can you
* please just make that font a tiny bit thicker").
*
* Arial ships Regular and Bold and nothing between or beyond, so asking for
* 800 gets you 700 back on most machines and a synthesised smear on the rest —
* unpredictable across the devices this has to look identical on. A hairline
* stroke in the text's own colour thickens every glyph by a known amount
* instead, and `currentColor` means the white name and the blue-grey App each
* thicken in their own colour without a second rule.
*
* Kept deliberately small. 0.35px is about a third of a stem at 13.5px, which
* reads as "a tiny bit"; past ~0.6px Arial starts to look like Arial Black. */
.era-wordmark,
.era-wordmark-row {
-webkit-text-stroke: 0.35px currentColor;
}
.era-wordmark-app {
-webkit-text-stroke: 0.25px currentColor;
}
/* ⚠️ PHONES GET THE MARK ALONE (operator, same day: "don't make the header on
* mobile device so crammed. Even if you remove the Elite Rugby app on mobile
* device, just the silver logo").
*
* Under 640px the bar holds the brand, Browse and the sign-up CTA, and the
* longest CTA label leaves 16px of slack — measured at 359 of 375. The words
* go and the silver mark stays at full size, so nothing shrinks; the row just
* stops fighting for room. From 640 up the words come back, because there the
* whole cluster is ~132px of a 640px bar and there was never a problem. */
@media (max-width: 639px) {
.era-wordmark { display: none; }
}
.era-desktop-nav {
display: none;
align-items: center;
gap: 4px;
}
@media (min-width: 1024px) {
.era-desktop-nav { display: flex; }
}
.era-browse-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
color: white;
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.15s;
/* The host pages load different faces at different weights, so a nav item
can measure wider here than it does on the React site. It must still be
one line. */
white-space: nowrap;
}
.era-browse-btn:hover,
.era-browse-btn.active {
background: rgba(255, 255, 255, 0.12);
}
.era-browse-btn svg { transition: transform 0.2s; }
.era-browse-btn.active svg { transform: rotate(180deg); }
.era-nav-link {
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.era-nav-link:hover {
color: white;
background: rgba(255, 255, 255, 0.05);
}
.era-signup-link {
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.15s;
white-space: nowrap;
}
.era-signup-link:hover { color: white; }
.era-cta-btn {
margin-left: 8px;
padding: 8px 20px;
border-radius: 6px;
background: #e84d1c;
color: white;
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background 0.15s, transform 0.1s;
display: inline-block;
white-space: nowrap;
}
.era-cta-btn:hover { background: #c94218; color: white; }
.era-cta-btn:active { transform: scale(0.97); }
.era-mobile-controls {
display: flex;
align-items: center;
gap: 12px;
}
@media (min-width: 1024px) {
.era-mobile-controls { display: none; }
}
.era-mobile-cta {
padding: 8px 16px;
border-radius: 6px;
background: #e84d1c;
color: white;
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s;
white-space: nowrap;
}
.era-mobile-cta:hover { background: #c94218; color: white; }
/* Mobile Browse: plain bold text, no pill, so it never competes with the
orange Start Free on the far right. The chevron carries the affordance. */
.era-browse-btn--mobile,
.era-browse-btn--mobile:hover,
.era-browse-btn--mobile.active {
background: transparent;
padding: 8px 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1px;
gap: 4px;
}
.era-browse-btn--mobile svg { width: 13px; height: 13px; }
@media (min-width: 1024px) {
.era-browse-btn--mobile { display: none; }
}
/* ─── Browse panel ───────────────────────────────────────────────── */
.era-overlay-backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.era-overlay-backdrop.open { display: block; }
.era-browse-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 50;
width: min(520px, 90vw);
background: #0a0a0a;
border-right: 1px solid rgba(255, 255, 255, 0.08);
display: none;
flex-direction: column;
transform: translateX(-8px);
opacity: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #fff;
}
.era-browse-panel.open {
display: flex;
transform: translateX(0);
opacity: 1;
}
/* Under 1024px the panel drops DOWN from beneath the header instead of
sliding in from the left, and hides its own logo row because the site
header is still visible above it. Kept AFTER the base rules so source
order decides at equal specificity — exactly as in website.css. */
@media (max-width: 1023px) {
.era-browse-panel {
top: 64px;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
height: calc(100vh - 64px);
height: calc(100dvh - 64px);
border-right: none;
border-bottom: none;
transform: translateY(-8px);
}
.era-browse-panel.open { transform: translateY(0); }
.era-browse-panel .era-panel-header { display: none; }
}
.era-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 64px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
/* No size rule here: the panel's brand IS .era-logo. A rule at this point in
* the file would beat .era-logo img at equal specificity and pin the panel to
* the old small mark. */
.era-close-btn {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: opacity 0.15s;
}
.era-close-btn:hover { opacity: 1; }
.era-panel-items {
flex: 1;
overflow-y: auto;
padding: 16px 0;
}
.era-panel-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 24px;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: background 0.15s, color 0.15s;
}
.era-panel-item:hover {
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
.era-panel-item-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.85);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.era-panel-item-icon svg { display: block; opacity: 1; }
.era-panel-item-label {
flex: 1;
min-width: 0;
}
.era-panel-item > svg:last-child {
opacity: 0.4;
flex-shrink: 0;
}
/* The Login row inside the panel exists for phones only — the desktop nav
already carries it. */
.era-panel-item--mobile-only { display: flex; }
@media (min-width: 1024px) {
.era-panel-item--mobile-only { display: none; }
}
.era-panel-footer {
padding: 24px;
flex-shrink: 0;
}
.era-view-plans {
display: block;
width: 100%;
text-align: center;
padding: 14px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background 0.15s;
}
.era-view-plans:hover { background: rgba(255, 255, 255, 0.08); }
/* ─── Focus ──────────────────────────────────────────────────────── */
/* Two host pages null `outline` on every button, which would leave a keyboard
user with no visible focus anywhere in this header. The reset above leaves
outline alone precisely so this rule can state it once, for our own
elements, without touching theirs. */
.era-header a:focus-visible,
.era-header button:focus-visible,
.era-browse-panel a:focus-visible,
.era-browse-panel button:focus-visible {
outline: 2px solid #e84d1c;
outline-offset: 2px;
border-radius: 6px;
}