/* =========================================================================== SneakerATOM UI v3 v2 recipe (ui-ux-pro-max e-commerce guidance: bold block hierarchy, brand accent + success green, 150-300ms hovers, WCAG contrast, focus states, reduced-motion; shadcn tokens; Barlow Condensed/Barlow) + v3: full dark mode (system-following with manual toggle, light/dark designed as a pair per dark-mode-pairing) and press/interaction polish. v2 snapshot lives in design-backup/v1/. =========================================================================== */ /* Barlow self-hosted (static/fonts) — was a Google-Fonts @import that the CSP blocks and that's a GDPR liability for EU traffic. */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Barlow-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Barlow-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Barlow-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Barlow-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/BarlowCondensed-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/BarlowCondensed-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/BarlowCondensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/BarlowCondensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/BarlowCondensed-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/BarlowCondensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* shadcn-style neutrals */ --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --muted: #f4f4f5; --muted-foreground: #5f6368; /* 4.6:1 on white */ --border: #e4e4e7; --border-strong: #cfcfd4; --ring: #e30016; --radius: 0.625rem; /* shadcn base radius */ --radius-sm: calc(var(--radius) * 0.6); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); /* brand + semantic (e-commerce: brand primary + success green) */ /* v4: the LOGO's own red (pixel-extracted from logo_white.png) — white ink measures 4.91:1 vs 3.34:1 on the old orange #ff4b26 (DESIGN.md §3). The logo yellow is the one highlight accent. */ --primary: #e30016; /* SneakerATOM logo red */ --primary-hover: #c50012; --primary-foreground: #ffffff; --highlight: #f0d800; /* logo yellow — black ink ONLY */ --highlight-ink: #0a0a0a; /* 13.7:1 on --highlight */ --raffle: #7c3aed; /* was hardcoded on .chip.raffle */ /* UI 2.0 (2026-08-07): WHITE header chrome in light — every direct reference (StockX, sneakers.com, Nike) runs white; dark theme keeps the dark header via the overrides below */ --header-bg: #ffffff; --header-ink: #0a0a0a; --header-muted: #5f6368; --header-surface: #f4f4f5; --header-border: #e4e4e7; --tap: 44px; /* minimum touch target (HIG) */ /* the WHOLE type scale (P2, 2026-08-06): 12 13 14 15(body) 16 18 21 24 32 40 - was 28 drifting sizes with half-pixel steps. Any new font-size MUST be one of these. */ --fs-body: 15px; --success: #16a34a; --success-bg: #ecfdf3; --success-border: #bbf7d0; --success-ink: #15803d; --sale: #dc2626; --sale-bg: #fef2f2; --sale-border: #fecaca; --customs-ink: #b45309; --mkt-bg: #f4f4f5; --mkt-border: #e4e4e7; --mkt-ink: #5f6368; --ink-header: #0c0c0e; /* product photos are shot on white — the plate stays white in BOTH themes (StockX-style) so dark mode never puts grey halos around cutout JPGs */ --img-bg: #ffffff; --shadow-card: 0 1px 2px rgba(0,0,0,.04); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06); --speed: 200ms; /* hover/transition budget 150-300ms */ } /* dark palette — same hue system, WCAG-checked inks on tinted surfaces */ :root[data-theme="dark"] { color-scheme: dark; --background: #0d0d0f; --foreground: #f4f4f5; --card: #17171a; --muted: #222227; --muted-foreground: #a7a7b0; /* ≥4.5:1 on card */ --border: #2a2a31; --border-strong: #3d3d46; --primary: #ed0018; /* logo red, one step up for dark: white ink 4.55:1, fill vs card 3.93:1 — both measured */ --primary-hover: #d40014; --header-bg: #101014; --header-ink: #f4f4f5; --header-muted: #a7a7b0; --header-surface: #1b1b1f; --header-border: #2e2e33; /* --raffle inherits the light purple: a lighter dark variant dropped white ink to 4.23:1 (contrast.py caught it) */ --success-bg: rgba(34, 197, 94, .12); --success-border: rgba(34, 197, 94, .35); --success-ink: #4ade80; --sale: #f87171; --sale-bg: rgba(220, 38, 38, .14); --sale-border: rgba(248, 113, 113, .35); --customs-ink: #fbbf24; --mkt-bg: #222227; --mkt-border: #2a2a31; --mkt-ink: #a7a7b0; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --background: #0d0d0f; --foreground: #f4f4f5; --card: #17171a; --muted: #222227; --muted-foreground: #a7a7b0; --border: #2a2a31; --border-strong: #3d3d46; --primary: #ed0018; --primary-hover: #d40014; --header-bg: #101014; --header-ink: #f4f4f5; --header-muted: #a7a7b0; --header-surface: #1b1b1f; --header-border: #2e2e33; --success-bg: rgba(34, 197, 94, .12); --success-border: rgba(34, 197, 94, .35); --success-ink: #4ade80; --sale: #f87171; --sale-bg: rgba(220, 38, 38, .14); --sale-border: rgba(248, 113, 113, .35); --customs-ink: #fbbf24; --mkt-bg: #222227; --mkt-border: #2a2a31; --mkt-ink: #a7a7b0; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4); } } * { box-sizing: border-box; } /* hallmark gate 34: page-level sideways scroll is never legitimate — clip (not hidden) on BOTH html and body; rails scroll themselves */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--background); color: var(--foreground); font: 15px/1.55 "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: clip; } h1, h2, .display { font-family: "Barlow Condensed", "Barlow", sans-serif; letter-spacing: .2px; text-transform: uppercase; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } button, select, a { cursor: pointer; } /* kill the 300ms double-tap delay class of jank on touch */ a, button, select, input, summary, label { touch-action: manipulation; } /* the OS's default dark tap-flash reads as a black marking on every press (Jonas 2026-08-10) — our own hover/active states carry the feedback instead */ a, button, summary, label { -webkit-tap-highlight-color: transparent; } /* prices, timers and counts never wiggle as digits tick over */ .offer-price, .card-price, .badge-drop, .cd, .cd-tba, .cm-item span, .clicks td, .pg-info { font-variant-numeric: tabular-nums; } /* visible keyboard focus everywhere */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* rotating promo bar (2026-08-10) — one line, items crossfade in place; reduced-motion gets a hard swap. BRIGHT green + near-black ink since 2026-08-11 (Jonas: "less dark so it pops" — the sneakers.com banner cue): #2ee06e on #07290f = 9.0:1 measured, theme-independent (the bar carries its own background). */ .promo-bar { position: relative; height: 34px; overflow: hidden; background: #2ee06e; } .promo-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; font-size: 13px; font-weight: 700; color: #07290f; text-decoration: none; opacity: 0; transition: opacity .25s ease-out; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-item.on { opacity: 1; pointer-events: auto; } .promo-item:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .promo-item { transition: none; } } /* GDPR consent bar + preferences dialog (2026-08-11) — fixed bottom, both themes via tokens, green act lane for the affirmative button */ .gdpr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 14px clamp(16px, 3vw, 40px); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -14px 40px -18px rgba(0, 0, 0, .35); } /* THE "doesn't go away on any device" bug (Jonas 2026-08-11): the class's display:flex outranks the hidden attribute's UA display:none, so consent SAVED but the bar never left. [hidden] must win. */ .gdpr-bar[hidden] { display: none; } .gdpr-bar p { margin: 0; font-size: 13.5px; } .gdpr-bar a { color: var(--primary); font-weight: 700; } .gdpr-acts { display: flex; gap: 8px; flex-wrap: wrap; } .gdpr-bar button, .gdpr-macts button { border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 999px; padding: 9px 16px; font: 700 13px "Barlow", sans-serif; cursor: pointer; } .gdpr-bar button:hover, .gdpr-macts button:hover { border-color: var(--primary); } button.gdpr-accept { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground, #fff); } .gdpr-modal { border: 1px solid var(--border); border-radius: 16px; background: var(--background); color: var(--foreground); padding: 20px 22px; max-width: 520px; width: calc(100vw - 32px); } .gdpr-modal::backdrop { background: rgba(0, 0, 0, .5); } .gdpr-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; } .gdpr-head h3 { margin: 0; font-size: 18px; } .gdpr-intro { margin: 0 0 10px; font-size: 13px; color: var(--muted-foreground); } .gdpr-x { border: 0; background: none; color: var(--muted-foreground); font-size: 15px; cursor: pointer; } .gdpr-cat { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); } .gdpr-cat p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted-foreground); } .gdpr-always { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); white-space: nowrap; } .gdpr-sw { position: relative; flex: none; width: 44px; height: 24px; } .gdpr-sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .gdpr-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); transition: background var(--speed); } .gdpr-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--speed); } .gdpr-sw input:checked + i { background: var(--primary); border-color: var(--primary); } .gdpr-sw input:checked + i::after { transform: translateX(20px); } .gdpr-macts { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; } /* ------------------------------------------------------------ header --- */ .site-head { background: color-mix(in srgb, var(--header-bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--header-border); padding: 12px clamp(34px, 2.6vw + 12px, 58px); position: sticky; top: 0; z-index: 10; } .head-inner { max-width: 1720px; margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } /* .cat-nav header strip removed 2026-07-14 — the category rail is the nav */ .nav { display: flex; gap: 4px; } .nav a { color: var(--header-muted); font-weight: 600; font-size: 14px; padding: 7px 11px; border-radius: var(--radius-sm); transition: color var(--speed), background var(--speed); } .nav a:hover { color: var(--header-ink); background: color-mix(in srgb, var(--header-ink) 7%, transparent); } /* active section (2026-08-10, Jonas: "mark it green under") — the current nav item wears a green underline that slides in; colour + position only, never a weight change (widths must not shift) */ .nav a { position: relative; } .nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--board-green); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .24s cubic-bezier(.2, .7, .2, 1), opacity .18s ease; } .nav a.on { color: var(--header-ink); } .nav a.on::after { transform: scaleX(1); opacity: 1; } /* the old site's loading-line on hover (Jonas 2026-08-11) — same green bar grows in before you commit to the click */ .nav a:hover::after { transform: scaleX(1); opacity: 1; } @media (prefers-reduced-motion: reduce) { .nav a::after { transition: none; } } /* the little caret on the header pills — "you can click this" (Jonas 2026-08-11) */ .pill-caret { width: 12px; height: 12px; stroke: currentColor; opacity: .55; flex: none; } .country-pill:hover .pill-caret { opacity: 1; } /* rail swipe indicator (2026-08-10, Jonas's ProDirect cue): green thumb = more to swipe, red pulse = you hit the wall. JS-built; no-JS pages simply have no track. RTL rides inset-inline. */ .rail-track { height: 2px; margin: 5px 2px 0; border-radius: 2px; background: color-mix(in srgb, var(--foreground) 6%, transparent); position: relative; display: none; } /* the track is a TOUCH cue (Jonas 2026-08-10: "I said this for mobile, not desktop" + "less bold") - phones and tablets only, a 2px whisper. The cat-rail carries a 32px bottom margin, so its track pulls up underneath the tiles instead of floating mid-gap. */ @media (max-width: 768px) { .rail-track { display: block; } .rail-track.rt-off { display: none; } .cat-rail + .rail-track { margin: -24px 2px 24px; } } .rail-track.rt-off { display: none; } .rail-track i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 100%; border-radius: 2px; background: var(--board-green); transition: inset-inline-start .12s linear, width .2s ease, background .15s ease; } .rail-track.rt-limit i { background: var(--sale); } @media (prefers-reduced-motion: reduce) { .rail-track i { transition: none; } } .country-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--header-surface); color: var(--header-ink); border: 1px solid var(--header-border); border-radius: 999px; padding: 8px 14px; font: 600 14px "Barlow", sans-serif; transition: border-color var(--speed); } .country-pill:hover { border-color: var(--header-muted); } .country-pill svg { width: 15px; height: 15px; stroke: var(--header-muted); } /* country modal */ .country-modal { border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 20px; width: min(680px, 92vw); max-height: 80vh; box-shadow: 0 30px 80px rgba(0,0,0,.25); } .country-modal::backdrop { background: rgba(10,10,10,.45); backdrop-filter: blur(2px); } .cm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cm-head strong { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 21px; } .cm-close { border: 0; background: var(--muted); border-radius: 8px; width: 30px; height: 30px; } #cm-filter { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; font: 15px "Barlow", sans-serif; margin-bottom: 8px; } .cm-label { color: var(--muted-foreground); font-size: 12px; text-transform: uppercase; letter-spacing: .7px; margin: 12px 0 6px; } /* /brands type-to-find (2026-08-08) - same field language as #cm-filter */ .bfilter { width: min(420px, 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; font: 15px "Barlow", sans-serif; margin: 0 0 12px; background: var(--background); color: var(--foreground); } .cm-sub { color: var(--muted-foreground); font-size: 13px; margin: -6px 0 12px; } .cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; } .cm-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 11px; height: 40px; font-size: 14px; font-weight: 600; transition: border-color var(--speed), background var(--speed); } /* one uniform row height: long names (French Southern Territories) must not stretch their whole grid row - the tail ellipsizes and the full name rides the title tooltip (Jonas 2026-08-08) */ .cm-item .cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cm-item span { color: var(--muted-foreground); font-size: 12px; font-weight: 500; white-space: nowrap; } .cm-item:hover { border-color: var(--primary); } .cm-item.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); } .brand { display: flex; align-items: center; } .brand img { height: 30px; display: block; } .search { flex: 1; display: flex; min-width: 240px; max-width: 620px; position: relative; } .search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; stroke: var(--muted-foreground); pointer-events: none; } .search input { flex: 1; border: 1px solid var(--header-border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); padding: 10px 14px 10px 38px; font-size: 15px; font-family: inherit; outline: none; background: var(--card); color: var(--foreground); transition: box-shadow var(--speed); } .search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); } .search button { border: 0; border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 20px; font-weight: 700; font-family: "Barlow Condensed", sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: .5px; background: var(--primary); color: var(--primary-foreground); transition: background var(--speed); } .search button:hover { background: var(--primary-hover); } /* RTL mirror (Jonas 2026-08-08: in fa/ar the bar kept LTR physical geometry - the magnifier sat over the green button and the outer corner rounding closed on the wrong sides). Flex order already reverses under dir=rtl; these swap the icon, the attached border and the corner radii to match. */ [dir="rtl"] .search svg { left: auto; right: 13px; } [dir="rtl"] .search input { border-left: 0; border-right: 1px solid var(--header-border); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 38px 10px 14px; } [dir="rtl"] .search button { border-radius: var(--radius) 0 0 var(--radius); } .country select { appearance: none; -webkit-appearance: none; background: var(--header-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--header-ink); border: 1px solid var(--header-border); border-radius: var(--radius); padding: 9px 32px 9px 12px; font-size: 14px; font-family: inherit; transition: border-color var(--speed); } .country select:hover { border-color: var(--header-muted); } .ship-line { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font: 500 14px "Barlow", sans-serif; color: var(--muted-foreground); transition: border-color var(--speed); } .ship-line:hover { border-color: var(--primary); } .ship-line strong { color: var(--foreground); } .ship-line svg { width: 16px; height: 16px; stroke: var(--muted-foreground); } /* .popular-chips/.pchip retired 2026-08-08 — the landing's hardcoded quick-search chips became the ranked model rail (.model-rail) */ /* ---- search-first landing (2026-08-08) ---- */ .hero-search { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 20px; } .hero-search .search { max-width: none; } .hero-search .search input { padding-top: 13px; padding-bottom: 13px; font-size: 16px; } /* 16px stops iOS focus-zoom */ .hero-search .search button { font-size: 15px; } /* the dock: JS adds .hs-float (header search yields to the hero) and .hs-docked once the hero scrolls away. Without JS neither class exists and the header search stays — graceful. */ .site-head .search { transition: opacity var(--speed); } .site-head.hs-float:not(.hs-docked) .search { opacity: 0; pointer-events: none; } /* ---- language picker (i18n 2026-08-08 · v2: no flags for languages) ---- */ .lang-pill { flex: none; } .lang-pill svg { width: 15px; height: 15px; } .lang-modal .cm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .lang-modal .lang-tag { color: var(--muted-foreground); font-size: 12px; font-weight: 700; margin-left: 6px; } /* real country flags (flag-icons 4x3, self-hosted, MIT) */ .cflag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex: none; vertical-align: -2px; margin-right: 2px; box-shadow: 0 0 0 1px var(--border); } @media (max-width: 768px) { /* phones: compact pills so language + country + toggles share ONE row — the country NAME retires behind its flag (aria + modal keep it); the language keeps its code (the glyph alone says nothing) */ .country-pill .cname { display: none; } .country-pill, .lang-pill { padding: 8px 10px; } } /* ---- SKIMS-style facet bar (2026-08-08): summary chip + popover ---- */ .facet-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } details.facet { position: relative; } details.facet > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--foreground); transition: border-color var(--speed); } details.facet > summary::-webkit-details-marker { display: none; } details.facet > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground); transform: rotate(45deg) translateY(-2px); transition: transform var(--speed); } details.facet[open] > summary { border-color: var(--primary); } details.facet[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .facet-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 2px; } .fopt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--foreground); } .fopt:hover { background: var(--muted); } .fopt.active { background: var(--primary); color: var(--primary-foreground); } @media (max-width: 640px) { .facet-pop { min-width: 170px; max-width: 78vw; } } /* ---- RTL v1 (ar/ur/fa, 2026-08-08): flex/grid mirror themselves via dir=rtl; these are the physical-property stragglers on core chrome. A full logical-property migration is a future round. ---- */ [dir="rtl"] .facet-pop { left: auto; right: 0; } /* rail edge fades are SCROLL-AWARE (Jonas 2026-08-09: "cool with the blur before you swipe, but not when you are all the way into the end") - atomRailFades in base.html stamps fade-start/fade-end only where more tiles actually exist; no-JS simply shows no fade. RTL mirrors the physical sides. */ /* fade width is FIXED PX, never a percentage (2026-08-10, Jonas's screenshot: 6% of a wide-desktop rail was a ~110px white wash over the whole first tile - the fade must whisper, not paint) */ .cat-rail.fade-end, .model-rail.fade-end { mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); } .cat-rail.fade-start, .model-rail.fade-start { mask-image: linear-gradient(90deg, transparent, #000 56px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); } .cat-rail.fade-start.fade-end, .model-rail.fade-start.fade-end { mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); } [dir="rtl"] .cat-rail.fade-end, [dir="rtl"] .model-rail.fade-end { mask-image: linear-gradient(270deg, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 56px), transparent); } [dir="rtl"] .cat-rail.fade-start, [dir="rtl"] .model-rail.fade-start { mask-image: linear-gradient(270deg, transparent, #000 56px); -webkit-mask-image: linear-gradient(270deg, transparent, #000 56px); } [dir="rtl"] .cat-rail.fade-start.fade-end, [dir="rtl"] .model-rail.fade-start.fade-end { mask-image: linear-gradient(270deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(270deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); } [dir="rtl"] .cflag { margin-right: 0; margin-left: 2px; } [dir="rtl"] .cdot { margin-right: 0; margin-left: 6px; } [dir="rtl"] .crumbs, [dir="rtl"] .offer-meta { direction: rtl; } /* ---- gender tabs + board window tabs (2026-08-08 restyle: Jonas called the grey pill "grey and weird" - the tabs now speak the facet-chip language: card surface + border per chip, active in board green with white ink (the measured 4.71:1 pair), not black. Same species as .rchip / facet summaries; 8px gaps per the touch spacing guideline. ---- */ .gtabs { display: inline-flex; gap: 8px; flex-wrap: wrap; } .gtab { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--foreground); transition: border-color var(--speed), background var(--speed), color var(--speed); } .gtab:hover { border-color: var(--primary); background: var(--muted); } .gtab.active { background: var(--board-green); border-color: var(--board-green); color: #fff; } /* ---- the ranked model rail: ONE line, every screen (2026-08-08) ---- */ .model-rail { display: flex; gap: 8px; margin: 14px 0 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .model-rail::-webkit-scrollbar { display: none; } .rchip { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--foreground); transition: border-color var(--speed), background var(--speed); } /* hover/active ride the GREEN lane (Jonas 2026-08-10: "why do we not use green, it's our main color") — #108545/white 4.71:1 hybrid, #e30016/white 4.91:1 red look, both contrast.py-cleared */ .rchip:hover { border-color: var(--primary); background: var(--muted); } .rchip.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } /* every chip carries its ordinal (v2) — the podium three in board green (live-market lane), the rest calm muted ink */ .rchip .rk { font-size: 12px; font-weight: 800; color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .rchip .rk.top { color: var(--success-ink); } .rchip.active .rk, .rchip.active .rk.top { color: var(--background); } #feed { scroll-margin-top: 80px; } /* -------------------------------------------------------------- hero --- */ /* FULL-WIDTH desktop (Jonas 2026-08-10, the sneakers.com/nike cue): the page uses the screen — one wide cap shared by header, main and footer so the chrome stays aligned; gutters breathe with the viewport. Reading surfaces (.art-wrap, .pdp-search) keep their own deliberate caps. */ main { max-width: 1720px; margin: 0 auto; padding: 30px clamp(34px, 2.6vw + 12px, 58px) 70px; } /* +12px each side vs v81 (Jonas 2026-08-10: "a little less zoomed, ~3mm each side") */ .hero { margin: 8px 0 26px; } .hero.small { margin-bottom: 16px; } .hero h1 { margin: 0 0 10px; font-size: clamp(32px, 5vw, 40px); line-height: 1.04; font-weight: 700; } .hero .sub { margin: 0; color: var(--muted-foreground); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .stat { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--foreground); } .stat.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); } .stat.muted { color: var(--muted-foreground); font-weight: 500; } /* ------------------------------------------------------- product grid --- */ .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } /* NEVER five across (Jonas 2026-08-10: the landing strip's 4+4 law and every board row keep FOUR) - on the full-width desktop the cards grow instead, sneakers.com-style */ @media (min-width: 1240px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--border-strong); } .card-img { aspect-ratio: 1/1; background: var(--img-bg); display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; } .card-img img { width: 100%; height: 100%; } .card-img img { object-fit: contain; max-height: 100%; transition: transform var(--speed); } .card:hover .card-img img { transform: scale(1.045); } /* the hover transform promotes the image to its own paint layer, which otherwise slides OVER the corner badges (the "-35%" turning into "-3") */ .badge-sale, .badge-new, .badge-drop, .badge-rank { z-index: 2; } /* relcard badge split (2026-08-10, Jonas): date top-LEFT, ticking timer top-RIGHT - scoped so the six other badge-drop surfaces keep their geometry. Compound selectors on purpose: the .badge-drop base block sits LATER in this file, and at equal specificity its right:10px re-stretched the pill full-width (caught live). */ .badge-drop.rb-left { left: 10px; right: auto; } .badge-drop.rb-live { background: var(--board-green); color: #fff; text-transform: uppercase; letter-spacing: .5px; } .badge-drop.rb-cd { text-transform: none; letter-spacing: 0; white-space: nowrap; } .badge-drop.rb-cd .cd { font-style: normal; } .badge-drop.rb-cd:has(.cd:empty) { visibility: hidden; } /* hearts live bottom-right on EVERY card (Jonas 2026-08-10: the timer-pushed top:46px heart made relcards odd-ones-out) */ /* ---- the ranking system (consultant v2, 2026-08-08) ---- Medal metallics for the podium — award semantics, deliberately cousins of the drop yellow but separated by gradient + black ink. Ratios (black #0a0a0a ink): gold mid ~#eec13f 12.3:1 · silver ~#cfd2da 13.5:1 · bronze ~#d99e6b 9.4:1 — AA everywhere, both themes (the chips carry their own background). */ :root { --rank-gold-1: #f7d774; --rank-gold-2: #e3aa1f; --rank-silver-1: #e8eaf0; --rank-silver-2: #b9bdc9; --rank-bronze-1: #e7b48a; --rank-bronze-2: #c9854b; --rank-ink: #0a0a0a; /* board green (Jonas 2026-08-08): 4-10 chips + Top-100 tile chips + active board controls. #108545 with white ink = 4.71:1 measured, look-independent (the chip carries its own background). */ --board-green: #108545; } /* v4 (2026-08-08, the third ask): the rank rides IN the card body with the product facts. Tiers: 1/2/3 medals · 4-10 board green · 11-50 strong outline · 51-100 muted outline. Off-board surfaces pair the chip with its board name, category then overall. Movement arrows are SVG (never glyph icons), number beside the arrow so colour is never the only signal - and they ride the landing only. */ .rank-line { display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap; margin-bottom: 2px; min-height: 22px; } /* min-height: rank-less cards in the same grid reserve the chip row, so titles start on one line across the board (2026-08-10) */ /* wrap, don't clip: a dual badge ("#10 Lifestyle · #20 All") is wider than a 375px two-up card body - the All pair folds to a second line instead of truncating at the card edge */ .rk-chip { font-size: 12px; font-weight: 800; letter-spacing: .3px; border-radius: var(--radius-sm); padding: 2px 7px; font-variant-numeric: tabular-nums; background: var(--foreground); color: var(--background); animation: rankpop .3s ease-out backwards; } .rk-chip.r1 { background: linear-gradient(135deg, var(--rank-gold-1), var(--rank-gold-2)); color: var(--rank-ink); } .rk-chip.r2 { background: linear-gradient(135deg, var(--rank-silver-1), var(--rank-silver-2)); color: var(--rank-ink); } .rk-chip.r3 { background: linear-gradient(135deg, var(--rank-bronze-1), var(--rank-bronze-2)); color: var(--rank-ink); } .rk-chip.r10 { background: var(--board-green); color: #fff; } .rk-chip.r50 { background: none; color: var(--foreground); box-shadow: inset 0 0 0 1.5px var(--foreground); } .rk-chip.r100 { background: none; color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--muted-foreground); } .rk-chip.rk-sp { background: var(--mkt-bg); color: var(--mkt-ink); box-shadow: inset 0 0 0 1px var(--mkt-border); text-transform: uppercase; letter-spacing: .5px; } .rk-scope { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-foreground); } .rk-sep { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted-foreground); } .rk-mv { font-style: normal; display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; animation: mvslide .25s ease-out .15s backwards; } .rk-mv svg { width: 11px; height: 11px; stroke: currentColor; } .rk-mv.up { color: var(--success-ink); } /* down = the sale red: the one sanctioned finance-idiom exception to the colour lanes (StockX semantics, Jonas's ask) — the number and arrow shape carry the meaning for colourblind readers */ .rk-mv.down { color: var(--sale); } /* movement riding the model-rail chips (2026-08-10): same species, chip-sized; active chips repaint it in the chip's inverse ink */ .rchip .rk-mv { font-size: 11px; } .rchip .rk-mv svg { width: 9px; height: 9px; } .rchip.active .rk-mv.up, .rchip.active .rk-mv.down { color: var(--background); } @keyframes rankpop { from { transform: scale(.55); opacity: 0; } } @keyframes mvslide { from { transform: translateY(4px); opacity: 0; } } /* stagger the first grid rows 40ms apart (MD stagger guidance) */ .grid .card:nth-child(1) .rk-chip { animation-delay: 0ms; } .grid .card:nth-child(2) .rk-chip { animation-delay: 40ms; } .grid .card:nth-child(3) .rk-chip { animation-delay: 80ms; } .grid .card:nth-child(4) .rk-chip { animation-delay: 120ms; } .grid .card:nth-child(5) .rk-chip { animation-delay: 160ms; } .grid .card:nth-child(6) .rk-chip { animation-delay: 200ms; } .grid .card:nth-child(7) .rk-chip { animation-delay: 240ms; } .grid .card:nth-child(8) .rk-chip { animation-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .rk-chip, .rk-mv { animation: none; } } /* the PDP board line — green: rank IS live-market data */ .pdp-rank { display: flex; align-items: center; gap: 7px; margin: 2px 0 12px; font-size: 14px; font-weight: 700; color: var(--success-ink); } .pdp-rank svg { width: 16px; height: 16px; stroke: var(--success-ink); } .pdp-rank .rk-up, .pdp-rank .rk-down { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; font-variant-numeric: tabular-nums; } .pdp-rank .rk-up { color: var(--success-ink); } .pdp-rank .rk-down { color: var(--sale); } .pdp-rank .rk-up svg, .pdp-rank .rk-down svg { width: 12px; height: 12px; stroke: currentColor; } .pdp-rank .rk-fresh { color: var(--muted-foreground); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; } /* the Top-100 entrance chip on category tiles — rides with the label (an absolute overlay ballooned over the photos on narrow tiles) */ /* board green (Jonas's pick 2026-08-08: tiles read better green/white than gold — gold stays reserved for the podium medals). #108545 with white ink = 4.71:1 measured (the CTA pairing), look-independent. */ .cat-card .top100 { display: block; width: max-content; margin: 0 auto 3px; white-space: nowrap; background: var(--board-green, #108545); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; } .cat-card.all .top100 { background: var(--card); color: var(--success-ink); } .badge-sale { position: absolute; top: 10px; left: 10px; background: var(--sale); color: #fff; font-size: 12px; font-weight: 700; border-radius: var(--radius-sm); padding: 3px 7px; letter-spacing: .3px; } .card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border); } .card-brand { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted-foreground); font-weight: 600; } /* age/gender group chip (GS/PS/TD/W) — sizing info must survive title clamping (Jonas 2026-07-16: the "(GS)" drowned in a two-line title) */ .offer-variant { font-size: 12px; font-weight: 600; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; } .age-chip { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .4px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; margin-left: 6px; color: var(--muted-foreground); vertical-align: 1px; } .card-title { font-weight: 600; line-height: 1.32; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.64em; } .card-price { font-weight: 700; font-size: 16px; margin-top: 5px; padding-inline-end: 38px; } .card-price s { color: var(--muted-foreground); font-weight: 400; font-size: 13px; margin-inline-start: 6px; } /* .card-shops removed 2026-08-08 (Jonas: cards read cleaner without the pill) — the shop count lives on the PDP compare line */ /* ------------------------------------------------------- product page --- */ /* the PDP keeps a READING width on the full-width desktop (Jonas 2026-08-10: "why is the embeds inside the pages so long now") - offer modules stay card-sized, the shelf below still runs wide */ .product { display: grid; grid-template-columns: minmax(320px, 560px) minmax(0, 1fr); gap: 34px; max-width: 1280px; margin-inline: auto; } @media (max-width: 768px) { .product { grid-template-columns: minmax(0, 1fr); } } /* centered under the (equally centered) product section — hugging the left edge of a full-width page looked lopsided (Jonas 2026-08-11) */ .about-shoe { max-width: 1280px; margin: 26px auto 6px; } .about-shoe h2 { font-size: 21px; margin: 0 0 8px; } .about-shoe p { margin: 0; color: var(--muted-foreground); line-height: 1.6; font-size: 15px; } .product-img { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 26px; align-self: start; position: sticky; top: 78px; } @media (max-width: 768px) { .product-img { position: static; } } .crumb { margin: 0 0 12px; } .crumb a { color: var(--muted-foreground); font-size: 14px; transition: color var(--speed); } .crumb a:hover { color: var(--foreground); } .product-info h1 { margin: 0 0 4px; font-size: 32px; line-height: 1.06; } .product-info h1 .brand { color: var(--muted-foreground); font-weight: 600; display: block; font-size: 14px; letter-spacing: 1.2px; margin-bottom: 2px; } .colour { color: var(--muted-foreground); margin: 4px 0 0; } .style { color: var(--muted-foreground); font-size: 13px; margin: 2px 0 16px; } .offers { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .offer { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 18px; position: relative; box-shadow: var(--shadow-card); transition: box-shadow var(--speed), border-color var(--speed); } .offer:hover { box-shadow: var(--shadow-pop); } .offer.best { border-color: var(--success-border); background: linear-gradient(0deg, var(--card) 82%, var(--success-bg)); } .offer.best .offer-price { color: var(--success-ink); } .badge-best { position: absolute; top: -9px; left: 14px; background: var(--success); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; } .offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .offer-shop { font-weight: 700; font-size: 16px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .4px; } .ad { font-style: normal; font-size: 12px; border: 1px solid var(--border); color: var(--muted-foreground); border-radius: 4px; padding: 1px 5px; vertical-align: 2px; margin-left: 6px; letter-spacing: .5px; } .offer-price { font-weight: 700; font-size: 21px; } .offer-price s { color: var(--muted-foreground); font-weight: 400; font-size: 14px; margin-left: 6px; } .sale { font-style: normal; background: var(--sale-bg); border: 1px solid var(--sale-border); color: var(--sale); font-size: 13px; font-weight: 700; border-radius: var(--radius-sm); padding: 2px 7px; margin-left: 8px; } .offer-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; } .chip { border: 1px solid var(--border); background: var(--muted); border-radius: var(--radius-sm); padding: 3px 9px; font-size: 13px; font-weight: 500; } .chip i { font-style: normal; color: var(--muted-foreground); font-size: 12px; margin-left: 3px; } .offer-note { color: var(--muted-foreground); font-size: 13px; margin: 10px 0 2px; } .voucher { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 2px; background: var(--success-bg); border: 1px dashed var(--success-border); color: var(--success-ink); border-radius: var(--radius-sm); padding: 6px 11px; font-size: 13px; font-weight: 600; } .voucher strong { font-family: "Barlow Condensed", sans-serif; letter-spacing: .5px; font-size: 15px; } .voucher svg { width: 15px; height: 15px; stroke: var(--success-ink); flex: none; } .oos-note { color: var(--muted-foreground); font-size: 13px; margin: 16px 0 0; } /* unpriced marketplace cards ("Find on …", 2026-08-08): the priced .mkt-offer anatomy minus the price; OUTLINE button because it opens their SEARCH, not a specific listing — the green .btn stays reserved for direct buyable links */ .mkt-find .btn { background: none; border: 1px solid var(--border); color: var(--foreground); } .mkt-find .btn:hover { border-color: var(--foreground); background: var(--muted); } .mkt-find .btn svg { stroke: currentColor; } .offer-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted-foreground); font-size: 13px; margin: 10px 0 14px; } .offer-meta span { display: inline-flex; align-items: center; gap: 5px; } .offer-meta svg { width: 14px; height: 14px; stroke: currentColor; flex: none; } .offer-meta .customs { color: var(--customs-ink); font-weight: 600; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-family: "Barlow Condensed", sans-serif; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; border-radius: var(--radius); padding: 10px 20px; transition: background var(--speed), transform var(--speed); } .btn:hover { background: var(--primary-hover); transform: translateY(-1px); } .btn svg { width: 15px; height: 15px; stroke: currentColor; } /* ------------------------------------------------------- empty states --- */ .empty { text-align: center; padding: 70px 20px; color: var(--muted-foreground); } .empty.inline { text-align: left; padding: 24px 0; } .empty h2 { color: var(--foreground); margin: 0 0 6px; font-size: 24px; } .empty svg { width: 46px; height: 46px; stroke: var(--border-strong); margin-bottom: 12px; } /* ------------------------------------------------------- clicks table --- */ .clicks { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } .clicks th, .clicks td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; } .clicks tr:last-child td { border-bottom: 0; } .clicks th { background: var(--muted); font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .6px; font-size: 13px; color: var(--muted-foreground); } .clicks code { background: var(--muted); border-radius: 4px; padding: 1px 5px; font-size: 12px; } /* -------------------------------------------------------------- footer --- */ .site-foot { background: var(--background); color: var(--muted-foreground); border-top: 1px solid var(--border); margin-top: 60px; padding: 44px 22px 30px; font-size: 13px; } .foot-cols { max-width: 1720px; margin: 0 auto 26px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; } @media (max-width: 768px) { .foot-cols { grid-template-columns: 1fr 1fr; } } .foot-logo { height: 24px; margin-bottom: 10px; opacity: .95; } /* socials (2026-08-27): neutral lane, hover lifts to full ink, 44px tap targets on the anchors even though the glyphs stay 20px */ .foot-social { display: flex; gap: 6px; margin-top: 12px; } .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--muted-foreground); } .foot-social a:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 7%, transparent); } .foot-social svg { width: 20px; height: 20px; } .foot-cols h4 { color: var(--foreground); font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 14px; letter-spacing: .8px; margin: 0 0 10px; } .foot-cols a { display: block; padding: 3px 0; color: var(--muted-foreground); transition: color var(--speed); } .foot-cols a:hover { color: var(--foreground); } .foot-cols p { margin: 0; line-height: 1.6; } .foot-note { max-width: 1720px; margin: 0 auto; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted-foreground); } .foot-note strong { color: var(--foreground); } /* -------------------------------------------------- category tiles --- */ /* category rail (sneakers.com-style, 2026-07-14): white cards — product JPGs are shot on white, so the card IS the plate — label below the image, brand ring on the active card. Scrolls horizontally when it can't fit. */ .cat-rail { /* RULING CHANGE 2026-08-09 (Jonas, when Boots became tile ten, refined same day): the rail shows NINE tiles exactly as the old always-fit row did - same size at every desktop width - and anything past nine swipes in ("like before, but where you swipe for boots"). calc keeps the nine-visible contract as categories come and go; phones keep their own fixed-124px scroll rule below; edge fade + snap as on the model rail. */ display: grid; grid-auto-flow: column; /* 8.6 visible (Jonas 2026-08-11 round two: the cut at "Training &" IS the desktop swipe hint) — the earlier inner-rhythm wobble was the pin measuring the PADDED rect; it reads the content box now, so tiles keep their true proportions at every width */ grid-auto-columns: var(--cat-tile, calc((100% - 80px) / 8.6)); gap: 10px; margin: 8px 0 32px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 8px; } .cat-card { min-width: 0; scroll-snap-align: start; } .cat-rail::-webkit-scrollbar { display: none; } .cat-card { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; border-radius: var(--radius-xl); background: var(--img-bg); border: 1px solid var(--border); transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); } .cat-card-img { /* 5/3 slots: shoes render at the size of the old single-image card — both slots IDENTICAL, top and bottom (Jonas 2026-07-17 mock) */ width: 100%; aspect-ratio: 5/3; display: flex; align-items: center; justify-content: center; } .cat-card-img img { max-width: 94%; max-height: 100%; object-fit: contain; transition: transform var(--speed); } .cat-card:hover .cat-card-img img { transform: scale(1.07) rotate(-2deg); } .cat-card-label { /* fixed dark ink: the card plate stays white in BOTH themes */ font: 700 14px "Barlow Condensed", sans-serif; color: var(--ink-header); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cat-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .cat-card.active .cat-card-label { color: var(--primary); } /* photo / label / photo — same skeleton on every card, so the rail rows stay level; the all-card swaps photos for line drawings */ .cat-card .cat-card-label { text-align: center; } .cat-card.all { background: var(--primary); border-color: var(--primary); } .cat-card.all .cat-card-img svg { width: 52%; height: auto; color: #fff; } .cat-card.all .cat-card-label { color: #fff; } /* no dark ring on the active all-footwear card — the orange fill already marks it (Jonas 2026-07-17) */ .cat-card.all.active { box-shadow: none; } @media (max-width: 640px) { /* phone: fixed card width so the rail shows ~2.7 cards and invites the swipe (sneakers.com pattern) instead of two huge tiles */ .cat-rail { grid-auto-columns: 124px; } .cat-card-label { font-size: 13px; } } /* ------------------------------------------------- home feed sections --- */ .feed-section { margin: 34px 0; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 14px; } .section-head h2 { margin: 0; font-size: 24px; } .section-head p { margin: 2px 0 0; color: var(--muted-foreground); font-size: 13px; } .view-all { color: var(--primary); font-weight: 700; font-size: 14px; white-space: nowrap; } .view-all:hover { text-decoration: underline; text-underline-offset: 3px; } .badge-new { position: absolute; top: 10px; right: 10px; /* green = the live-market lane (Jonas 2026-08-06: "new in stock" IS liveness); ink rides --card so both themes measure (5.02:1 light, 10.27:1 dark) */ background: var(--success-ink); color: var(--card); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-radius: var(--radius-sm); padding: 3px 7px; } .badge-drop { position: absolute; top: 10px; right: 10px; /* the logo bell's yellow = the drop/notification color (P3) — 13.7:1 with black ink in BOTH themes, and it frees red for the buy path (Flight Club rule: red logo, minimal red) */ background: var(--highlight); color: var(--highlight-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-radius: var(--radius-sm); padding: 3px 7px; } /* --------------------------------------------------------- drops page --- */ .drop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .drop-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 18px; } .drop-date { font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: .5px; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-sm); padding: 3px 10px; white-space: nowrap; } .drop-name { font-weight: 600; font-size: 16px; } .drop-name em { font-style: normal; color: var(--muted-foreground); font-weight: 600; margin-right: 6px; text-transform: uppercase; font-size: 13px; letter-spacing: .6px; } .drop-style { color: var(--muted-foreground); font-size: 13px; } .drop-link { margin-left: auto; color: var(--primary); font-weight: 700; font-size: 14px; white-space: nowrap; } .drop-link:hover { text-decoration: underline; text-underline-offset: 3px; } .shops-strip { margin: 44px 0 10px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); } .shops-strip p { margin: 0 0 8px; color: var(--muted-foreground); font-size: 13px; } .shops-strip div { display: flex; flex-wrap: wrap; gap: 6px; } .shops-strip span { background: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; } /* ------------------------------------------------------ search toolbar --- */ .toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; } /* the filter system, v3 (2026-08-10, Jonas's GOAT + ProDirect cues): SORT is a top-right dropdown everywhere; the right PANEL (.fpanel, the pre-SKIMS fsheet reborn) opens by default on wide desktop and is closeable - closed, the grid takes its fourth column back. Phones open the SAME panel as a full-width sheet via the Filters button. The facet bar is retired; gender tabs stay centered. */ .facet-bar { display: none; } .fpanel { display: none; } .list-tools { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: 0 0 12px; } .list-tools .sort-form label { color: var(--muted-foreground); font-size: 13px; margin-right: 6px; } .fp-toggle { border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 999px; padding: 8px 16px; font: 700 14px "Barlow", sans-serif; cursor: pointer; } .fp-toggle:hover { border-color: var(--primary); } .fp-acts { display: flex; gap: 10px; align-items: center; } .fp-x { border: 0; background: none; color: var(--muted-foreground); font-size: 15px; cursor: pointer; padding: 2px 4px; } .fp-x:hover { color: var(--foreground); } body.fp-open .fpanel { display: block; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 10px; background: var(--background); } @media (min-width: 1000px) { .toolbar { justify-content: center; } .toolbar .gtabs { margin: 0 auto; } .toolbar .gtab { font-size: 15px; padding: 9px 18px; } body.fp-open .search-body { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 26px; align-items: start; } body.fp-open .fpanel { position: sticky; top: 82px; margin: 0; /* the panel scrolls itself; NO overscroll containment — reaching its bottom hands the wheel to the page, sneakers.com-style (Jonas 2026-08-11: "then the page kind of scrolls, while you are still inside the filters") */ max-height: calc(100vh - 96px); overflow-y: auto; } /* sneakers.com pattern (Jonas 2026-08-10): while the panel is open its own ✕ is the control — the Filters button only exists when the panel is closed, re-appearing beside Sort */ body.fp-open .fp-toggle { display: none; } /* gender moved INTO the panel on desktop; the toolbar tabs are the phone species (Jonas 2026-08-10 round three) */ .toolbar .gtabs { display: none; } /* chips + tools share one line: the rail scrolls inside its capped half, Sort/Filters keep the right edge */ .rail-row { display: flex; align-items: center; gap: 18px; justify-content: flex-end; } /* no rail? tools keep the RIGHT edge (Jonas: "our logic is usually to the right") - with a rail the flex:1 wrap absorbs this anyway */ .rail-row .rail-wrap { flex: 1; min-width: 0; } .rail-row .list-tools { margin: 0; flex: none; } .rail-row .model-rail { margin: 8px 0; } } @media (max-width: 999px) { #fp-gender { display: none; } } /* the colour list folds behind the picker EVERYWHERE (Jonas 2026-08-11: picker-first on PC too) — selected chips stay visible so a pick can always be removed; three classes beat the later .fp-group .fopt inline-flex tie */ #fp-colour .fopt.fp-col:not(.active) { display: none; } #fp-colour.open .fopt.fp-col { display: inline-flex; } #fp-colour .cpick { display: inline-flex; } @media (max-width: 999px) { #fp-colour .cpick { display: flex; width: 100%; justify-content: center; } } /* phones: the SAME panel as a bottom sheet — the v3 comment promised it but the sheet CSS was never written, so tapping Filters toggled a block that rendered BELOW 48 cards = "does nothing" (Jonas 2026-08-10, the ProDirect cue). Fixed overlay + scroll, own scrim. */ @media (max-width: 999px) { body.fp-open { overflow: hidden; } body.fp-open .fpanel { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 100); max-height: 76dvh; overflow-y: auto; margin: 0; border-radius: 18px 18px 0 0; border: 1px solid var(--border); border-bottom: 0; box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, .35); } body.fp-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: calc(var(--z-modal, 100) - 1); } } .fp-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; } .fp-head h3 { margin: 0; font-size: 18px; } /* red lane: Reset throws work away — that's an urgency/undo word, not a buy word (Jonas 2026-08-11) */ .fp-reset { color: var(--sale); font-weight: 700; font-size: 13px; } .fp-group { margin: 12px 0 14px; } .fp-group h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); } .fp-bfilter { width: 100%; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); font-size: 13px; } .fp-bfilter:focus { border-color: var(--primary); outline: none; } .fp-group .fopt { display: inline-flex; align-items: center; margin: 0 6px 6px 0; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--foreground); } .fp-group .fopt:hover { border-color: var(--primary); } .fp-group .fopt.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .sort-form { display: flex; align-items: center; gap: 8px; } .sort-form label { color: var(--muted-foreground); font-size: 13px; } .sort-form select { /* native