/* =========================================================================== The navigation bar's appearance — ONE definition, used by both halves of the site. The bar cannot be one component. The React pages render it from src/components/NavBar.jsx; the Menu and Promotions pages are approved production HTML that is served byte-for-byte and has no build step, so it gets the markup injected by navbar-loader.js instead. Two renderers is a constraint, not a choice. What they *can* share is this file, and everything a visitor can actually see is defined here: type sizes, colours, tracking. Both sides read these variables and nothing else, so the two bars cannot drift apart again — the way they did when the React nav moved to 11px type and a mint wordmark while the shop nav stayed on 12px and white, which is exactly what made Menu and Promotions look like a different site. Loaded by: * the React app — in index.html (Vite rewrites the path for the GitHub Pages base build) * the shop pages — injected into by navbar-loader.js, since their own HTML is frozen and cannot be edited to add the tag ========================================================================= */ :root { /* Mirrors --type-body in src/index.css (14 → 15px). */ --nav-logo-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem); /* Mirrors --type-label (flat 11px). */ --nav-link-size: 0.6875rem; /* Mirrors .type-label's tracking. The React nav dropped its own tracking-[0.2em] when that class gained a default, so this has to move with it or the two bars space their links differently again. */ --nav-link-tracking: 0.18em; /* Leading has to be stated too. Left unset, the shop bar inherited it from that page's body (1.5) while the React bar took .type-label's 1.4 and .logo's 1.1 — same type, different box heights, so the bar itself came out a different height on Menu and Promotions. */ --nav-logo-leading: 1.1; --nav-link-leading: 1.4; --nav-bg: rgba(29, 30, 30, 0.95); --nav-fg: #ffffff; --nav-muted: rgba(255, 255, 255, 0.55); --nav-accent: #a0d4b2; --nav-line: rgba(255, 255, 255, 0.12); /* The wordmark is mint on a dark ground — the brand's own treatment, and the single most obvious tell when the two bars disagreed. */ --nav-logo: var(--nav-accent); } :root[data-theme="light"] { --nav-bg: rgba(160, 212, 178, 0.95); --nav-fg: #1d1e1e; --nav-muted: rgba(29, 30, 30, 0.65); /* Mint cannot accent itself once mint is the page — charcoal carries it. */ --nav-accent: #1d1e1e; --nav-line: rgba(29, 30, 30, 0.18); --nav-logo: var(--nav-fg); } /* Hover lift. The shop bar has always had this; the React bar did not, which made the same link feel "dead" on four pages out of six. Defined here so it applies to both — the React nav opts in with .nav-link-hover, the shop nav with its own .nav-link. Inline styles win over this, so the rule uses the same specificity trick both renderers already rely on: colour is set inline for the resting state, and hover only fires on real pointers. */ @media (hover: hover) { .nav-link-hover:hover, #navbar .nav-link:hover { color: var(--nav-fg) !important; } }