/* ========================================================================== ATLETIKA — Design tokens Single source of truth. No raw values anywhere else in the codebase. Contrast ratios in comments are measured, not estimated. ========================================================================== */ :root { /* ---- Colour: monochrome ramp ------------------------------------------- ATLETIKA is strictly black-and-white. Colour is reserved for form validation only. Ratios are against #FFFFFF unless noted. */ --c-ink: #0A0A0A; /* 19.80:1 — primary text, buttons, rules */ --c-ink-secondary: #4A4A4F; /* 8.81:1 — secondary copy */ --c-ink-muted: #6E6E73; /* 5.07:1 — meta, captions (AA body) */ --c-ink-subtle: #8E8E93; /* 3.26:1 — UI borders, large text only */ --c-ink-disabled: #AEAEB2; /* 2.21:1 — disabled only (WCAG-exempt) */ --c-surface: #FFFFFF; --c-surface-sunken: #F4F4F5; --c-surface-raised: #FAFAFA; --c-inverse: #0A0A0A; --c-on-inverse: #FFFFFF; /* 19.80:1 on --c-inverse */ /* Borders. Two tiers, deliberately: --c-line decorative separators (WCAG 1.4.11 does not apply) --c-line-input identifies a form control, so must clear 3:1 */ --c-line: #E3E3E6; /* 1.28:1 — decorative only */ --c-line-strong: #C7C7CC; /* 1.68:1 — decorative emphasis */ --c-line-input: #8E8E93; /* 3.26:1 — meets SC 1.4.11 */ /* Functional. Forms and system feedback only — never decoration. */ --c-danger: #B3261E; /* 6.54:1 */ --c-danger-surface: #FDF2F1; /* danger text on it: 5.96:1 */ --c-success: #186A3B; /* 6.64:1 */ --c-overlay: rgb(10 10 10 / 0.45); --c-focus: #0A0A0A; /* ---- Typography --------------------------------------------------------- One family. Archivo variable, self-hosted, latin + latin-ext (latin-ext carries ą č ę ė į š ų ū ž for the Lithuanian build). */ --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 900; /* wordmark, display */ /* Size / line-height pairs. Fixed sizes for UI, fluid for display. */ --t-3xs: 10px; --lh-3xs: 14px; --t-2xs: 11px; --lh-2xs: 16px; --t-xs: 12px; --lh-xs: 18px; --t-sm: 13px; --lh-sm: 20px; --t-base: 14px; --lh-base:22px; --t-body: 16px; --lh-body:26px; --t-lg: 18px; --lh-lg: 28px; --t-xl: 22px; --lh-xl: 30px; --t-2xl: 28px; --lh-2xl: 34px; --t-3xl: clamp(32px, 4.2vw, 44px); --lh-3xl: 1.08; --t-4xl: clamp(40px, 6.5vw, 72px); --lh-4xl: 1.02; --t-5xl: clamp(52px, 11vw, 148px); --lh-5xl: 0.92; /* Tracking. Uppercase UI text needs positive tracking to stay legible; large display needs negative tracking to stay tight. */ --track-display: -0.03em; --track-tight: -0.015em; --track-normal: 0; --track-wide: 0.04em; /* 0.08em = ~0.96px at 12px, matching the 1px tracking already used on atletikawear.com's uppercase UI. Deliberately wider than Prada's 0.2px — ATLETIKA's existing voice is more tracked out, and that is part of its identity rather than a defect. */ --track-ui: 0.08em; /* uppercase nav, buttons, labels */ --track-wordmark: 0.16em; /* ---- Spacing — 4px base ------------------------------------------------ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32:128px; --s-40:160px; /* Vertical rhythm between page sections — fluid, so long pages breathe on desktop without leaving huge gaps on a phone. */ --section-gap: clamp(56px, 8vw, 128px); --section-gap-sm:clamp(32px, 5vw, 64px); /* ---- Layout ------------------------------------------------------------ */ --container: 1600px; --container-text: 680px; /* measure cap for editorial copy */ --gutter: 16px; --header-h: 56px; /* matches Prada's measured header */ /* Live offset for anything sticky beneath the header (PLP filter bar). app.js sets it to 0 while the header is hidden on scroll-down. */ --header-offset: var(--header-h); --announce-h: 36px; /* ---- Radius — squared throughout. Luxury retail does not round. ------- */ --radius: 0; --radius-full: 999px; /* pills: filter chips, badges only */ /* ---- Borders ----------------------------------------------------------- */ --bw: 1px; --bw-thick:2px; /* ---- Motion ------------------------------------------------------------ Durations are a scale, not arbitrary. Easings are named by intent. */ --dur-instant: 80ms; --dur-fast: 120ms; /* colour/opacity on hover */ --dur-quick: 200ms; /* transforms, small state changes */ --dur-base: 320ms; /* accordions, fades, image cross-fade */ --dur-slow: 480ms; /* drawers, overlays, reveals */ --dur-reveal: 800ms; /* hero / editorial reveals */ --delay-stagger: 550ms;/* sequenced reveal offset */ /* Easings. The first three are values measured off prada.com's compiled stylesheet, not approximations of it. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* their house default */ --ease-reveal: cubic-bezier(0.42, 0, 0, 1); /* their 800ms reveal */ --ease-sym: cubic-bezier(0.5, 0, 0.5, 1); /* symmetric in-out */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* expo-out */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* decisive slide */ /* Asymmetric enter/exit — Louis Vuitton's contract, measured off their tokens: things arrive on an ease-out and leave in exactly half the time on an ease-in. Every layer (drawer, modal, menu) uses this pair. */ --ease-enter: cubic-bezier(0.215, 0.61, 0.355, 1); /* ease-out-cubic */ --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* ease-in-cubic */ --dur-enter: 320ms; --dur-exit: 160ms; /* Reveal travel is deliberately small. Totême ships 6px / 35ms stagger; Shopify's default is 20px / 75ms. Restraint is the aesthetic. */ --reveal-y: 8px; --stagger: 40ms; /* Bottom-weighted scrims for text over imagery — LV's pattern, as tokens rather than per-hero improvisation. Transparent for the top half, then ramps to the stated opacity of black. */ --scrim-30: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 0.30)); --scrim-50: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 0.50)); --scrim-70: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.70)); /* Top scrim for the transparent header zone over light photography. */ --scrim-top: linear-gradient(180deg, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.18) 60%, transparent); /* ---- Elevation — used sparingly. Flat design, shadow only for layers that genuinely float above the page. */ --shadow-drawer: 0 0 40px rgb(10 10 10 / 0.12); --shadow-menu: 0 12px 32px rgb(10 10 10 / 0.08); --shadow-bar: 0 -12px 32px rgb(10 10 10 / 0.08); /* bottom-fixed bars */ /* ---- Z-index ----------------------------------------------------------- */ --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-header: 100; --z-overlay: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* ---- Focus ring — one definition, used everywhere ---------------------- */ --focus-w: 2px; --focus-offset: 2px; /* ---- Product imagery --------------------------------------------------- */ --ratio-product: 3 / 4; /* normalised across the whole catalogue */ --ratio-hero: 16 / 9; --ratio-editorial: 4 / 5; /* ---- Commerce ----------------------------------------------------------- */ --free-shipping-threshold: 100; /* €, mirrors the live announcement bar */ } /* Gutters widen with the viewport. Declared here so every layout inherits the same rhythm rather than each page inventing its own. */ @media (min-width: 768px) { :root { --gutter: 24px; } } @media (min-width: 1280px) { :root { --gutter: 40px; } } /* Reduced motion: collapse the duration scale to near-zero at the token level, so every component inherits the preference without needing its own media query. Components must animate via these tokens for this to work — that is enforced in QA. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-quick: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --dur-enter: 1ms; --dur-exit: 1ms; --delay-stagger: 0ms; --stagger: 0ms; --reveal-y: 0px; } }