/* ============================================================================= * styles.css — XAT RACING storefront theme. * * Brand tokens live here and ONLY here (knox reskin lesson: one config, not * 24 files). Chrome-blue + high-vis chartreuse pulled from the mark that * scripts/gen-logo.mjs builds; dark pit-lane surfaces; the italic slant of * the logo (−14°/skew) echoes through headings and accents. * ===========================================================================*/ :root { --bg: #0b0d10; --panel: #14171b; --panel-2: #191d22; --line: #262b31; --ink: #e8ecef; --muted: #8a939e; --chrome: #8fd2ea; /* logo's bottom-skid blue */ --chrome-deep: #26479c; /* logo's sky navy */ --teal: #79cbb1; /* logo's ground band */ --accent: #d9f024; /* wordmark chartreuse */ --red: #e5372e; /* redline */ /* Same red, lifted just enough to clear WCAG AA as TEXT. The redline colour is right for rules, borders and glows — none of which have a contrast requirement — but as type on a card panel it measures 4.21:1 against the required 4.5:1, and it is carrying the word SOLD on 43 listings. #ea4a41 is the nearest step that passes (4.75:1 on panel, 5.15:1 on the page). */ --red-text: #ea4a41; --font-display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Barlow', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --slant: -12deg; } * { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden; /* decorative absolutes must never widen the page */ font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; } /* ---------- header ---------- */ .topnav { position: sticky; top: 0; z-index: 50; background: rgba(11, 13, 16, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .topnav .wrap { display: flex; align-items: center; gap: 26px; height: 64px; } .brand img { height: 40px; width: auto; } .topnav nav { display: flex; gap: 20px; margin-left: auto; } .topnav nav a { font: 600 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 2px; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .topnav nav a:hover { color: var(--accent); border-color: var(--accent); } /* ---------- "More" dropdown ---------- * The nav can only carry so many tabs before it stops being navigation and * starts being a wall. Departments with real volume sit up top; the rest live * here until the sales data says otherwise. * * Two rules govern this menu, and both exist because it was broken on phones * twice before: * * 1. THE MENU IS NOT IN THE NAV. enhance.js portals it to at startup * and positions it from the button's rect. It used to be a descendant of *