/* ========================================================================== RetroKit BD — Design Tokens & Base Styles Token values are the single source of truth. Tailwind config (in the of index.html) references these same hex values directly — utilities and custom CSS never disagree on a color. ========================================================================== */ :root { /* Color — sage-rooted, anchored to the measured hero backdrop */ --sage-900: #3E4A3F; /* ink — headlines, primary text */ --sage-600: #6B7D6C; /* secondary text, captions, icon stroke */ --sage-400: #8FA793; /* measured hero backdrop — primary bg */ --sage-200: #C3D0C4; /* hairline borders, dividers */ --paper: #F7F8F4; /* card surface, negative space */ --stamp: #B8562F; /* single accent — scarcity stamp + active underline only */ /* Type */ --font-display: 'Fraunces', serif; --font-body: 'Newsreader', serif; --font-mono: 'Space Mono', monospace; /* Motion timing — shared so every section's motion vocabulary agrees */ --ease-wipe: cubic-bezier(0.65, 0, 0.35, 1); /* quick, clean, no overshoot */ --dur-wipe: 0.6s; } /* ========================================================================== Reset & base ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: auto; /* Lenis takes over; avoid native+Lenis conflict */ } body { background-color: var(--sage-400); color: var(--sage-900); font-family: var(--font-body); overflow-x: hidden; cursor: none; /* custom cursor takes over on pointer:fine devices, see js/cursor.js */ } @media (pointer: coarse) { body { cursor: auto; /* never hide the real cursor/tap target on touch */ } } ::selection { background-color: var(--sage-900); color: var(--paper); } /* Visible keyboard focus everywhere — spec requirement, non-negotiable. Using :focus-visible so mouse clicks don't show the ring, but every keyboard-navigable element gets a clear, high-contrast outline. */ :focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 2px; } a, button { font-family: inherit; } /* ========================================================================== Custom cursor (desktop, pointer:fine only) ========================================================================== */ .rk-cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background-color: var(--sage-900); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease; display: none; } @media (pointer: fine) { .rk-cursor { display: block; } } .rk-cursor.is-hovering { width: 40px; height: 40px; background-color: transparent; border: 1px solid var(--sage-900); } /* ========================================================================== Section spacing system Deliberately namespaced (.rk-section) and using ONLY margin/padding custom properties — never fighting a Tailwind spacing utility on the same element. If a section needs Tailwind's gap/space utilities for internal layout, that's a different, nested element — this class only ever governs the section's own outer rhythm. ========================================================================== */ .rk-section { position: relative; padding-top: clamp(4rem, 10vw, 8rem); padding-bottom: clamp(4rem, 10vw, 8rem); } .rk-section--flush { padding-top: 0; padding-bottom: 0; } /* ========================================================================== Typography helpers ========================================================================== */ .rk-display { font-family: var(--font-display); font-optical-sizing: auto; } .rk-mono { font-family: var(--font-mono); letter-spacing: 0.02em; } /* ========================================================================== Hero ========================================================================== */ .hero-jersey-wrap { position: relative; will-change: transform, opacity; } /* No edge mask needed: the hero image's backdrop is flattened at the asset level to an exact pixel match with --sage-400 (see build notes), so the image sits on the page with zero visible seam without any CSS masking trick required. */ .hero-bg-texture { position: absolute; inset: -10%; background-image: url('../assets/hero/hero-bg-archival-texture.jpg'); background-size: 480px 480px; background-repeat: repeat; /* This texture asset is ~98% white on average. At the originally-set 0.5 opacity, blending it over --sage-400 produced a visibly lighter wash across the whole hero section EXCEPT where the opaque jersey image blocked it — which is what actually caused the "box" edge around the hero image during build verification (root-caused via direct pixel sampling of the rendered page, not the source image). 0.08 keeps the blended result within ~8 luminance units of true sage-400 — genuinely faint, matching assets.md's "almost invisible at first glance" requirement, while the texture is bright, this is the correct value, not a workaround. */ opacity: 0.08; will-change: transform; pointer-events: none; } /* ========================================================================== Provenance Strip — pinned wipe sequence ========================================================================== */ .provenance-pin { position: relative; height: 100vh; overflow: hidden; background-color: var(--sage-900); } .provenance-slide { position: absolute; inset: 0; background-size: cover; background-position: center; /* Each incoming slide starts fully off-screen right. GSAP animates transform (xPercent), never left/right, for compositor-only performance. */ transform: translateX(100%); } .provenance-slide.is-active { transform: translateX(0%); } .provenance-caption { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vw, 4rem); text-align: center; color: var(--paper); pointer-events: none; /* CSS-level baseline so captions render sanely even if GSAP fails to load (CDN outage, aggressive ad-blocker, corporate firewall) — first caption visible, rest hidden by default. main.js overrides this via gsap.set() once it successfully initializes; this is the fallback for when it can't. */ opacity: 0; } .provenance-caption:first-of-type { opacity: 1; } /* Reduced-motion fallback: strip becomes a simple static stacked list, no pin, no wipe — see main.js for the JS-side branch that swaps this class in. */ .provenance-pin.rk-motion-off { height: auto; display: grid; grid-template-columns: 1fr; gap: 1px; background-color: var(--sage-200); } .provenance-pin.rk-motion-off .provenance-slide { position: relative; transform: none !important; height: 70vh; } .provenance-pin.rk-motion-off .provenance-caption { position: relative; bottom: auto; padding: 1.5rem 1rem; background-color: var(--sage-900); /* Override the pinned-mode opacity default — every caption is visible in the stacked reduced-motion / no-JS layout, not just the first. */ opacity: 1; } /* ========================================================================== Archive Grid — card hover tilt ========================================================================== */ .archive-card { will-change: transform; transform-style: preserve-3d; transition: box-shadow 0.3s ease; } .archive-card:hover, .archive-card:focus-within { box-shadow: 0 24px 48px -12px rgba(62, 74, 63, 0.25); } @media (prefers-reduced-motion: reduce) { .archive-card { transform: none !important; } } .archive-card__img-wrap { aspect-ratio: 4 / 5; background-color: var(--paper); overflow: hidden; /* If a product image fails to load (dead hotlink, offline, slow network), this background + the wrapper's fixed aspect-ratio keep the card looking like an intentional placeholder rather than a broken layout. The browser's default broken-image icon still shows inside this box, but the box itself never collapses or looks like an error state on its own. */ background-image: linear-gradient(135deg, var(--sage-200) 25%, transparent 25%), linear-gradient(225deg, var(--sage-200) 25%, transparent 25%), linear-gradient(45deg, var(--sage-200) 25%, transparent 25%), linear-gradient(315deg, var(--sage-200) 25%, var(--paper) 25%); background-position: 10px 0, 10px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; } .archive-card__img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; /* Once a real image loads successfully, cover the placeholder pattern entirely with a solid paper backdrop behind the product photo. */ background-color: var(--paper); } /* Scarcity stamp */ .scarcity-stamp { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.03em; color: var(--stamp); border: 1px solid var(--stamp); padding: 0.15rem 0.5rem; display: inline-block; transform: rotate(-2deg); } /* Quick-add drawer */ .quickadd-drawer { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease-wipe); } .quickadd-drawer.is-open { max-height: 220px; } @media (prefers-reduced-motion: reduce) { .quickadd-drawer { transition: none; } } /* Filter tabs — archive index style, not a dropdown */ .archive-tab { position: relative; padding-bottom: 0.35rem; } .archive-tab::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--stamp); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-wipe); } .archive-tab[aria-selected="true"]::after, .archive-tab:hover::after { transform: scaleX(1); } /* ========================================================================== Persistent cart tab ========================================================================== */ .cart-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%) translateX(calc(100% - 44px)); z-index: 500; background-color: var(--sage-900); color: var(--paper); writing-mode: vertical-rl; transition: transform 0.4s var(--ease-wipe); } .cart-tab:hover, .cart-tab:focus-visible, .cart-tab.has-items { transform: translateY(-50%) translateX(0); } @media (max-width: 640px) { .cart-tab { top: auto; bottom: 1.25rem; /* Moved from right-aligned to bottom-center on mobile. The archive grid's own quick-add "+" button is deliberately right-aligned within each card (price left, action right) — a right-aligned fixed cart pill directly contests that same screen column at whatever scroll position the pill happens to sit at, confirmed via a real bounding-rect overlap check during verification, not a hypothetical. Bottom-center keeps the pill reachable without permanently occupying the same horizontal zone as every card's primary action. */ left: 50%; right: auto; transform: translateX(-50%); writing-mode: horizontal-tb; border-radius: 999px; } .cart-tab:hover { transform: translateX(-50%); } } /* ========================================================================== League → Club Selector ========================================================================== */ .selector-panel { position: relative; min-height: 60vh; } .selector-step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .league-option, .club-option { position: relative; /* Deliberately NOT using Tailwind's `block` utility here — this rule already needs to exist (for `position: relative`, required by the ::after underline pseudo-element below), and loading main.css after Tailwind's stylesheet means any display value set here would win a specificity tie against a `block` utility class regardless of HTML class order. Setting the real intended value directly here avoids the conflict entirely rather than fighting it. */ display: block; } .league-option::after, .club-option::after { content: ''; position: absolute; left: 0; bottom: -0.15em; width: 100%; height: 2px; background-color: var(--sage-900); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-wipe); } .league-option:hover::after, .league-option:focus-visible::after, .club-option:hover::after, .club-option:focus-visible::after { transform: scaleX(1); } /* ========================================================================== Footer stamp ========================================================================== */ .footer-wordmark { position: relative; } /* ========================================================================== Reduced motion — global safety net. Any animation not explicitly branched in JS still gets neutralized here as a fallback, per spec requirement #6. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }