/* ============================================================= tokens.css โ€” Modern Play Gym v2 ยท THE LOCKED STYLE FOUNDATION ============================================================= Aesthetic lane: Option E "Big Air + Bento" (approved 2026-09-22). Cinematic full-bleed photo bands + a bright bento tile grid. Archivo Black (wide, heavy display) over Manrope (body). Uppercase ONLY in heroes, full-bleed bands and accents; Title Case for every other heading (operator decision 2026-09-22, overpass round 1). White ground, ink bands, brand teal/sun/coral/pink as tile fills. Every value on the site resolves to a token here. Locked at the style gate; changing a token re-opens it. Reference mockup: 02-direction/design-options/e-hybrid/index.html ============================================================= */ /* ---- Self-hosted web fonts (Google Fonts, latin subset) ------ */ @font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/archivo-black-400.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/manrope-variable.woff2') format('woff2-variations'),url('../assets/fonts/manrope-variable.woff2') format('woff2');} :root { /* ---- Color: brand ---------------------------------------- */ --color-brand: #3FC6AD; /* logo teal โ€” utility strip, teal tiles, footer card */ --color-brand-strong: #22A98F; /* hover fills */ --color-brand-deep: #0F7A66; /* text-safe teal (eyebrows on white) */ --color-brand-soft: #DDF5EE; /* light wash */ /* ---- Color: the pops ------------------------------------- */ --color-sun: #FFC53D; /* primary CTA, ticker tape */ --color-sun-soft: #FFF6DF; --color-coral: #FF6B4A; /* "new" tags, coral tiles */ --color-pink: #FF8FB1; /* parties only */ --color-pink-deep: #78143C; /* party band overlay base */ --color-accent: var(--color-sun); /* ---- Color: neutrals ------------------------------------- */ --color-ink: #0E1B24; /* near-black navy โ€” header bar, ink tiles, text */ --color-ink-2: #172A38; /* secondary ink (lede on light) */ --color-ink-muted: #5B6B75; /* muted copy */ --color-line: #DCE7E3; /* hairlines */ --color-line-strong: #C5D2CE; --color-field-border: #E1E8EC; --color-surface: #FFFFFF; /* page ground */ --color-surface-2: #F3F6F5; /* behind bento blocks */ --color-surface-raised: #FFFFFF; --color-surface-inverse: var(--color-ink); --color-on-inverse: #FFFFFF; --color-on-inverse-muted: rgba(255,255,255,0.75); --color-on-inverse-faint: rgba(255,255,255,0.6); --color-on-brand-muted: rgba(14,27,36,0.8); --color-on-brand-faint: rgba(14,27,36,0.6); --color-glass: rgba(255,255,255,0.12); --color-glass-strong: rgba(255,255,255,0.18); --color-glass-line: rgba(255,255,255,0.4); --color-ink-glass: rgba(14,27,36,0.12); --color-ink-glass-line: rgba(14,27,36,0.18); /* ---- Color: state ---------------------------------------- */ --color-focus: var(--color-ink); --color-focus-inverse: var(--color-sun); --color-error: #C8102E; --color-success: var(--color-brand-deep); /* ---- Gradients (overlays over photos) ---------------------- */ --overlay-hero: linear-gradient(90deg,rgba(14,27,36,.86) 0%,rgba(14,27,36,.78) 40%,rgba(14,27,36,.55) 70%,rgba(14,27,36,.35) 100%),linear-gradient(180deg,rgba(14,27,36,.3) 0%,rgba(14,27,36,0) 30%,rgba(14,27,36,.5) 100%); --overlay-hero-mobile: linear-gradient(180deg,rgba(14,27,36,.72) 0%,rgba(14,27,36,.72) 45%,rgba(14,27,36,.92) 100%); --overlay-band: linear-gradient(90deg,rgba(14,27,36,.85) 0%,rgba(14,27,36,.35) 55%,rgba(14,27,36,.1) 100%); --overlay-band-mobile: linear-gradient(180deg,rgba(14,27,36,.7),rgba(14,27,36,.85)); --overlay-band-pink: linear-gradient(90deg,rgba(120,20,60,.82) 0%,rgba(120,20,60,.3) 60%,rgba(0,0,0,.05) 100%); --overlay-band-pink-mobile: linear-gradient(180deg,rgba(120,20,60,.7),rgba(120,20,60,.88)); --overlay-panel: linear-gradient(180deg,rgba(14,27,36,0) 35%,rgba(14,27,36,.9) 100%); --overlay-cell: linear-gradient(180deg,rgba(14,27,36,0) 40%,rgba(14,27,36,.85) 100%); --overlay-loc: linear-gradient(180deg,rgba(14,27,36,.1) 30%,rgba(14,27,36,.92) 100%); --gradient-soft: linear-gradient(120deg,#EAF7F2 0%,#FFFFFF 55%,#FFF6DF 100%); --gradient-rainbow: linear-gradient(90deg,var(--color-brand),var(--color-sun),var(--color-coral),var(--color-pink)); --mask-fade-left: linear-gradient(90deg,transparent 0%,#000 45%); /* ---- Typography ------------------------------------------ */ --font-head: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', Arial, sans-serif; --font-body: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; --font-weight-head: 400; /* Archivo Black has one weight */ --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1.0625rem; /* 17px */ --text-lg: clamp(1.02rem, .95rem + .35vw, 1.25rem); --text-xl: 1.35rem; --text-eyebrow: 0.74rem; --text-nav: 1rem; --text-strip: 0.82rem; --text-display-xl: clamp(2.5rem, 1.5rem + 6.5vw, 7.5rem); /* wide face: ~72% of the old Anton scale */ --text-display-l: clamp(2rem, 1.2rem + 3.2vw, 4rem); --text-display-m: clamp(1.45rem, 1rem + 1.7vw, 2.3rem); --text-display-s: clamp(1.1rem, .95rem + .6vw, 1.4rem); --text-big: clamp(1.9rem, 1.5rem + 1.4vw, 2.9rem); --text-price: 2.4rem; --text-stat: 1.35rem; --text-tape: 1rem; --text-footer-h2: clamp(1.7rem, 1.1rem + 2.3vw, 3.3rem); --leading-body: 1.5; --leading-display: 1.02; --leading-tight: 1; --leading-snug: 1.25; --tracking-display: -0.01em; --tracking-eyebrow: 0.16em; --tracking-caps: 0.14em; --tracking-tape: 0.06em; --measure: 66ch; --measure-lede: 56ch; /* ---- Spacing (4pt grid) ----------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --section-y: clamp(3rem, 6vw, 5rem); --section-y-lg: clamp(4rem, 8vw, 7rem); --gutter: 1rem; --container: 1280px; --container-narrow: 840px; --bento-gap: 0.9rem; --bento-row: 120px; --cell-pad: 1.5rem; /* every bento cell, photo cells included */ --feature-pad: var(--space-8); /* panel + location bodies */ --card-pad: clamp(2rem, 4vw, 3.5rem); /* ---- Components: ONE size per component (no --sm/--lg) ------- */ --btn-pad: .9rem 1.5rem; --btn-min-h: 48px; --chip-pad: .4rem .8rem; /* tag, pill, chip */ /* ---- Header ------------------------------------------------- */ --logo-h: 112px; --logo-h-stuck: 64px; --logo-h-mobile: 72px; --header-h: 190px; /* JS overwrites --hh with the measured height */ --nav-underline: 3px; /* ---- Radius ------------------------------------------------ */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 28px; --radius-xl: 36px; --radius-sub: 18px; --radius-pill: 999px; /* ---- Borders ----------------------------------------------- */ --border-soft: 1px solid var(--color-line); --border-field: 2px solid var(--color-field-border); --border-glass: 1px solid var(--color-glass-line); /* ---- Shadow: soft only (no hard offsets in this lane) ------ */ --shadow-sm: 0 2px 6px rgba(14,27,36,0.08); --shadow-md: 0 10px 24px rgba(14,27,36,0.08); --shadow-lg: 0 18px 40px rgba(0,0,0,0.35); --shadow-bar: 0 8px 30px rgba(0,0,0,0.25); --shadow-text: 0 4px 12px rgba(0,0,0,0.35); /* ---- Motion --------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 150ms; --dur: 200ms; --dur-slow: 800ms; --tape-speed: 32s; --img-zoom: 1.04; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; --img-zoom: 1; } }