/* ============================================================ STACKERFOX - design tokens Palettes are swapped at runtime by the fox picker (js/intro.js). Every palette keeps the same role structure so the whole page recolours in one step and never mixes two accents. ============================================================ */ :root { /* ---- palette: OTTO / ember (default) ---- */ --ground: #ffa24b; --ground-rgb: 255 162 75; --signal: #ff4b12; --signal-deep: #c43708; --signal-lift: #ff7a49; --signal-rgb: 255 75 18; --ink: #141110; --ink-rgb: 20 17 16; --bone: #f6f0e6; --void: #12100f; --ink-soft: #4a3a30; --ink-mute: #6f5b4c; --ok: #3fd59a; --cloud-a: #2a1a10; --cloud-b: #120b06; --glow-a: #ffd7a8; --glow-b: #ff8a3d; /* ---- motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-inout: cubic-bezier(0.76, 0, 0.24, 1); --dur-1: 0.2s; --dur-2: 0.34s; --dur-3: 0.5s; --dur-4: 0.7s; /* ---- shape: one radius system ---- pill for anything interactive, 28px for panels, 18px for small tiles */ --r-pill: 100px; --r-panel: 28px; --r-tile: 18px; /* ---- rhythm ---- */ /* the reference's rhythm: a 4vw gutter on tablets (41 / 33 / 31px at 1024 / 820 / 768) that lands on 18px for phones and 44px on desktop; section padding at 9vw with a 60px phone floor */ --gutter: clamp(18px, 4vw, 44px); --nav-h: 80px; --section-y: clamp(60px, 9vw, 150px); /* ---- type ---- Measured off the reference: Bricolage Grotesque carries display and body, Geist Mono carries the label voice, and the two track in opposition - display tight and negative, mono loose and positive. */ --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; /* fluid display scale, tuned to the reference's 158px @1440 hero */ --t-hero: clamp(3.4rem, 11vw, 9.9rem); /* phone floors are the reference's: 35.2px section headline, 32px layer headline, 30.4px caps band, 19.2px faq question (measured at 430 / 390 / 375) */ --t-xl: clamp(2.2rem, 5.8vw, 5.2rem); --t-lg: clamp(2rem, 5vw, 4.5rem); --t-md: clamp(1.6rem, 2.6vw, 2.6rem); --t-sm: clamp(1.15rem, 1.6vw, 1.5rem); --t-body: clamp(1rem, 1.05vw, 1.17rem); --t-mono: clamp(0.72rem, 0.8vw, 0.81rem); /* the reference's remaining measured bands, @1440: large headline 86.4px, section headline 80px, uppercase display 60.5px, small heading 27.2px, faq question 32px */ --t-xxl: clamp(2.2rem, 6vw, 5.4rem); --t-section: clamp(2.2rem, 5.6vw, 5rem); --t-caps: clamp(1.9rem, 4.2vw, 3.78rem); --t-h3: clamp(1.3rem, 1.9vw, 1.7rem); --t-faq: clamp(1.2rem, 2.4vw, 2rem); /* the reference tracks optically: tighter as the type gets bigger. these are its measured values, size band by size band. */ --track-hero: -0.045em; --track-xl: -0.035em; --track-lg: -0.03em; --track-md: -0.02em; --track-sm: -0.01em; --track-mono: 0.14em; /* ---- layering ---- */ --z-grain: 300; --z-cursor: 280; --z-boot: 260; --z-intro: 240; --z-game: 235; --z-dock: 200; --z-nav: 180; --z-rail: 170; --z-fox: 150; --z-lift: 10; color-scheme: light; } /* ---- alternate coats. data-coat is set on ---- */ :root[data-coat="juno"] { --ground: #bfe6f2; --ground-rgb: 191 230 242; --signal: #1f92c7; --signal-deep: #10688f; --signal-lift: #5cc4ee; --signal-rgb: 31 146 199; --ink: #0d1519; --ink-rgb: 13 21 25; --bone: #eff7fa; --void: #0a1216; --ink-soft: #2c454f; --ink-mute: #4d6a75; --cloud-a: #12262f; --cloud-b: #071016; --glow-a: #d5f0f9; --glow-b: #57c2e6; } :root[data-coat="mab"] { --ground: #c9b8ff; --ground-rgb: 201 184 255; --signal: #6a35f5; --signal-deep: #4a1fbf; --signal-lift: #a98bff; --signal-rgb: 106 53 245; --ink: #120f1c; --ink-rgb: 18 15 28; --bone: #f2effa; --void: #0e0b18; --ink-soft: #382f50; --ink-mute: #5b5175; --cloud-a: #221a3a; --cloud-b: #0d0918; --glow-a: #e2d9ff; --glow-b: #8f6bff; } :root[data-coat="wren"] { --ground: #f7d9a0; --ground-rgb: 247 217 160; --signal: #c96a15; --signal-deep: #91490a; --signal-lift: #e79a45; --signal-rgb: 201 106 21; --ink: #1a1409; --ink-rgb: 26 20 9; --bone: #fbf4e7; --void: #15100a; --ink-soft: #4a3a1c; --ink-mute: #6b5c36; --cloud-a: #2a2010; --cloud-b: #130e06; --glow-a: #ffeccb; --glow-b: #e2a04a; } :root[data-coat="brix"] { --ground: #a8e6c4; --ground-rgb: 168 230 196; --signal: #0d8f5b; --signal-deep: #076b44; --signal-lift: #35bd83; --signal-rgb: 13 143 91; --ink: #0b1610; --ink-rgb: 11 22 16; --bone: #eef8f2; --void: #08130d; --ink-soft: #264633; --ink-mute: #46685a; --cloud-a: #123024; --cloud-b: #061410; --glow-a: #d3f4e2; --glow-b: #4fc98e; } :root[data-coat="cass"] { --ground: #ffc2cc; --ground-rgb: 255 194 204; --signal: #e01f4c; --signal-deep: #a80f35; --signal-lift: #ff8aa3; --signal-rgb: 224 31 76; --ink: #1a0d11; --ink-rgb: 26 13 17; --bone: #fdf0f2; --void: #150a0e; --ink-soft: #4c2630; --ink-mute: #6f4e57; --cloud-a: #33141d; --cloud-b: #170a0e; --glow-a: #ffdde3; --glow-b: #ff7893; }