/* ND Auto Locksmiths — runtime brand token overrides (loaded last so these win). Mirrors the @theme values in src/input.css. Source of truth: styleguide.html. */ :root { --color-brand-green-900: #0c0e0d; --color-brand-green-800: #141715; --color-brand-green-700: #1c201d; --color-brand-green-600: #16110d; --color-brand-green-500: #4faf00; --color-brand-gold-600: #62c400; --color-brand-gold-500: #6fe000; --color-brand-gold-400: #7CFC00; --color-brand-gold-300: #a6ff3d; --color-brand-cream: #f6f7f5; --color-focus-ring: #6fe000; } /* ── Dark header treatment (client request 2026-08-21) ───────────────────── The brand-neutral parent header.php ships a white sticky header (bg-white) with near-black nav text (text-brand-green-700 = #1c201d), tuned for a light bar. ND uses the ink/green identity and the top utility bar is already ink (bg-brand-green-900), so recolour the sticky header to ink and flip its nav + mobile toggle to cream/green. Child-only override — the parent is untouched. These selectors outrank the parent's utility classes, so no rebuild is needed (this file is enqueued after dist/style.css). Pairs with the header logo swap to logo.png (white lettering) in functions.php. */ header.bg-white { background-color: var(--color-brand-green-900) !important; /* No separator hairline — the dark header flows seamlessly into the dark hero (removed 2026-08-21: the inset box-shadow rendered as a visible white line). */ box-shadow: none !important; } header .qb-nav-link { color: var(--color-brand-cream) !important; } header .qb-nav-link:hover { color: var(--color-brand-gold-500) !important; } header button[aria-controls="mobile-menu"] { color: var(--color-brand-cream) !important; } header button[aria-controls="mobile-menu"]:hover { background-color: rgba(255, 255, 255, 0.10) !important; } #mobile-menu span.block { color: var(--color-brand-cream) !important; } #mobile-menu span.block:hover { background-color: rgba(255, 255, 255, 0.10) !important; color: var(--color-brand-gold-500) !important; } /* ── Mobile edge sliver (client report 2026-08-21) ──────────────────────── A full-bleed section in the parent hero (`-mx-4`) causes a sub-pixel horizontal overflow on mobile, revealing the cream as a thin light line at the screen edge. `overflow-x: clip` removes the sliver WITHOUT creating a scroll container, so the sticky header keeps working (unlike overflow-x: hidden). Applied to html + body to cover both. */ html, body { overflow-x: clip; }