/* ============================================================ DUMPY — DESIGN TOKENS THIS IS THE RESTYLE FILE. Every colour, glow, radius, shadow and timing on the site is read from here. No component anywhere hardcodes a brand value, so changing this file changes all five pages at once. Palette structure follows P03 §4.4: one warm hero colour, one deep anchoring colour, one soft neutral, one high-contrast light, one restrained accent. Quick recipes Change the brand colour ..... §1 ramps + §2 triplets Change the glass ............ §9 Change the metal ............ §10 Make corners rounder ........ §6 Make motion faster .......... §7 Loosen page rhythm .......... §8 ============================================================ */ :root{ /* --- 1. PALETTE RAMPS -------------------------------------- Used for text, fills and gradient stops. Six warm steps from near-white to near-black, three accent steps. */ --warm-100:#FFF6DC; --warm-200:#F6DFA6; --warm-300:#E3BE6A; --warm-400:#C79A3C; --warm-500:#8F6C24; --warm-600:#4E3A11; --cool-200:#A8ECFB; --cool-400:#48CFEA; --cool-600:#1B6C80; /* --- 2. CHANNEL TRIPLETS ----------------------------------- Every glow, wash, border and shadow reads from these. Format is "R G B" without commas so alpha can be applied inline: rgb(var(--warm-rgb) / .4). */ --warm-rgb: 224 185 95; /* primary glow */ --warm-deep-rgb: 199 154 60; /* deeper glow, haze */ --warm-lit-rgb: 255 229 175; /* emitted light */ --warm-edge-rgb: 255 243 214; /* bright glass edge */ --warm-shade-rgb: 90 64 12; /* inset shadow on metal */ --warm-dark-rgb: 50 38 14; /* recessed plate ground */ --cool-rgb: 72 207 234; /* accent glow */ --cool-deep-rgb: 27 108 128; /* accent haze */ --light-rgb: 255 255 255; /* high-contrast light */ --shadow-rgb: 0 0 0; --ink-rgb: 4 5 10; /* deep anchoring colour */ --panel-rgb: 4 6 12; /* glass interior */ /* --- 3. SURFACES AND TEXT ---------------------------------- */ --ink:rgb(var(--ink-rgb)); --text:#F2EEE6; /* soft neutral */ --text-2:#A8A399; --text-3:#6C6860; /* --- 4. CAPABILITY STATES ---------------------------------- P03 requires an explicit state on every feature that is not live today. These three are the only allowed states. */ --live:#5FE3A0; --live-rgb: 95 227 160; --plan:#E3BE6A; --plan-rgb:227 190 106; --gate:#8C93A0; --gate-rgb:140 147 160; /* --- 5. RARITY -------------------------------------------- Colour is never the only indicator; every rarity also carries an icon and a word. */ --rar-common:#B9B4A9; --rar-uncommon:#5FE3A0; --rar-rare:#48CFEA; --rar-epic:#B98CF0; --rar-legendary:#E3BE6A; --rar-mythic:#F07CB4; /* --- 6. TYPE AND SHAPE ------------------------------------- */ --font:'Saira',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --r-xs:5px; --r-sm:7px; --r-md:9px; --r-lg:11px; --r-xl:13px; --r-2xl:16px; --r-3xl:20px; --r-pill:100px; /* --- 7. MOTION --------------------------------------------- */ --ease:cubic-bezier(.16,1,.3,1); --t-fast:.3s; --t-med:.4s; --t-slow:.8s; /* --- 8. LAYOUT RHYTHM -------------------------------------- */ --pad:clamp(18px,3vw,44px); --maxw:1460px; --sec-y:clamp(52px,7vw,104px); --gap:14px; /* --- 8.1 CHAMBER SIZE -------------------------------------- The steamer is square-ish, so its height follows its width. Capping it on width alone means a wide-but-short window renders a chamber taller than the screen and clips it. These two values are a ceiling in both directions: whichever is smaller wins. Lower --chamber-vh if it still feels too big. */ --chamber-max:520px; /* never wider than this */ --chamber-vh:52vh; /* nor taller than this much screen */ --chamber-max-sm:380px; --chamber-vh-sm:40vh; /* How much of the chamber the character fills. This is the one value to change if a DUMPY looks too big or too small inside the steamer — every page reads it, including the fail-safe block in each page head. */ --char-scale:56%; --char-max:290px; /* --- 9. GLASS RECIPE --------------------------------------- The gradient edge is warm and bright at the top-left and cool at the bottom-right, the way a real glass edge catches a key light. That asymmetry is what stops it reading as a flat dark card. */ --glass-blur:26px; --glass-sat:160%; --glass-fill:linear-gradient(152deg, rgb(var(--light-rgb) / .072) 0%, rgb(var(--light-rgb) / .020) 38%, rgb(var(--panel-rgb) / .300) 100%); --glass-edge:linear-gradient(146deg, rgb(var(--warm-edge-rgb) / .58) 0%, rgb(var(--light-rgb) / .09) 26%, rgb(var(--light-rgb) / .02) 52%, rgb(var(--cool-rgb) / .20) 100%); --glass-shadow: inset 0 1px 0 rgb(var(--light-rgb) / .19), inset 0 -1px 0 rgb(var(--shadow-rgb) / .35), 0 34px 64px -34px rgb(var(--shadow-rgb) / .95), 0 0 70px -36px rgb(var(--warm-rgb) / .32); --hairline:rgb(var(--light-rgb) / .07); /* --- 10. METAL RECIPE -------------------------------------- Conic gradients are what make a surface read as machined: the banding is a specular highlight rolling over a curve. These stops cannot be derived from a single hue, so they are listed literally — but they are still only two tokens. */ --metal-warm:conic-gradient(from 202deg, #5E4718 0deg,#C89E45 22deg,#FBF0CE 44deg,#D6AE58 66deg,#6B5220 104deg,#3A2C0F 132deg, #9C7A2E 164deg,#FFF7DC 190deg,#D2A94F 214deg,#7A5C22 250deg,#2E230C 284deg,#B58F3A 318deg, #EBD59A 340deg,#5E4718 360deg); --metal-dark:conic-gradient(from 196deg, #14171C 0deg,#4A535D 26deg,#1E2329 50deg,#0A0C10 76deg,#6C7883 104deg,#262C33 132deg, #0D0F13 166deg,#39414A 196deg,#171B21 226deg,#08090C 262deg,#5A646F 300deg,#1A1F25 330deg,#14171C 360deg); /* --- 11. GLOW ---------------------------------------------- */ --glow-xs:0 0 9px rgb(var(--warm-rgb) / .70); --glow-sm:0 0 22px -6px rgb(var(--warm-rgb) / .70); --glow-md:0 0 44px -20px rgb(var(--warm-rgb) / .60); --glow-lg:0 0 90px -32px rgb(var(--warm-rgb) / .36); /* --- 12. LEGACY ALIASES ------------------------------------ Keeps any older inline style working. Prefer the names above in new markup. */ --gold-100:var(--warm-100); --gold-200:var(--warm-200); --gold-300:var(--warm-300); --gold-400:var(--warm-400); --gold-500:var(--warm-500); --gold-600:var(--warm-600); --cyan-200:var(--cool-200); --cyan:var(--cool-400); --cyan-600:var(--cool-600); } /* --- 13. SHORT WINDOWS ------------------------------------- A laptop window is often wide but not tall. Height-based queries shrink the chamber so the hero keeps fitting on one screen instead of running off the bottom. */ @media (max-height:900px){ :root{ --chamber-vh:46vh; --chamber-vh-sm:36vh; } } @media (max-height:780px){ :root{ --chamber-vh:42vh; --chamber-vh-sm:32vh; } } @media (max-height:660px){ :root{ --chamber-vh:38vh; --chamber-vh-sm:30vh; } } /* Below 900px the hero is a single column, so the chamber sits underneath the headline and buttons rather than beside them. It gets what is left of the screen, not a share of all of it. */ @media (max-width:900px){ :root{ --chamber-max:320px; --chamber-vh:32vh; --chamber-max-sm:280px; --chamber-vh-sm:28vh; } } @media (max-width:560px){ :root{ --chamber-max:240px; --chamber-vh:26vh; --chamber-max-sm:220px; --chamber-vh-sm:24vh; } } /* --- 14. MOBILE PERFORMANCE -------------------------------- Phones struggle with stacked backdrop-filter, full-screen grain, and dozens of simultaneous animations. These tokens kick in on narrow viewports and coarse pointers (iPhone). */ @media (max-width:900px), ((hover:none) and (pointer:coarse)){ :root{ --glass-blur:0px; --glass-sat:100%; --sec-y:clamp(40px,6vw,72px); } }