/* ========================================================================== EARTH-K21 — design tokens Every dimension has its own art style. Chapters swap --grade-a/--grade-b and the whole page re-inks itself. ========================================================================== */ :root { /* --- ink ------------------------------------------------------------- */ --ink: #06060f; --ink-soft: #0b0b1c; --night: #0c1030; --night-2: #171d55; --night-3: #232a6e; /* --- the four-colour process ---------------------------------------- */ --red: #ff1f45; --blue: #2f5cff; --cyan: #16f2e6; --magenta: #ff2fd0; --violet: #8b3cff; --yellow: #ffd23f; --lime: #9dff3c; --dawn: #ff7a3d; /* --- paper ----------------------------------------------------------- */ --paper: #f3ecda; --paper-2: #e4d9be; --paper-ink: #17150f; /* --- per-chapter grade (overridden by [data-grade]) ------------------ */ --grade-a: var(--violet); --grade-b: var(--cyan); --surface: var(--night); --on-surface: #eef1ff; --muted: #adb5de; /* --- live, JS-driven ------------------------------------------------- */ --split: 0; /* chromatic aberration, from scroll velocity */ --vel: 0; /* raw normalised scroll velocity, 0..1 */ --dots: 4px; /* halftone cell size */ --px: 0; /* pointer x, 0..1 */ --py: 0; /* pointer y, 0..1 */ /* --- type ------------------------------------------------------------ */ --f-display: 'Anton', 'Arial Narrow', sans-serif; --f-comic: 'Bangers', 'Anton', cursive; --f-hand: 'Permanent Marker', cursive; --f-body: 'Space Grotesk', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; /* fluid scale — comic lettering is never timid */ --t-xs: clamp(.68rem, .62rem + .25vw, .78rem); --t-sm: clamp(.82rem, .76rem + .3vw, .95rem); --t-md: clamp(.98rem, .9rem + .4vw, 1.15rem); --t-lg: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); --t-xl: clamp(1.9rem, 1.3rem + 3vw, 3.4rem); --t-2xl: clamp(2.8rem, 1.6rem + 6vw, 6rem); --t-3xl: clamp(3.4rem, 1.4rem + 9.5vw, 9rem); /* --- structure ------------------------------------------------------- */ --border: 3px; --border-lg: 5px; --gutter: clamp(14px, 3vw, 28px); --measure: 62ch; --shadow-hard: 6px 6px 0 #000; --shadow-hard-sm: 4px 4px 0 #000; --shadow-hard-lg: 10px 10px 0 #000; /* --- motion ---------------------------------------------------------- */ --pop: cubic-bezier(.2, 1.7, .4, 1); /* overshoot, comic "snap" */ --ease: cubic-bezier(.22, .61, .36, 1); --on2s: steps(6, end); /* animate on 2s, 12fps */ } /* -------------------------------------------------------------------------- Chapter grades. Applied to by the scroll engine. -------------------------------------------------------------------------- */ [data-grade="portal"] { --grade-a: var(--violet); --grade-b: var(--cyan); --surface: #04040c; --dots: 5px; } [data-grade="rooftop"] { --grade-a: var(--magenta); --grade-b: var(--cyan); --surface: var(--night); --dots: 4px; } [data-grade="newsprint"] { --grade-a: var(--red); --grade-b: #8a7f63; --surface: var(--paper); --on-surface: var(--paper-ink); --muted: #6a6250; --dots: 3px; } [data-grade="violet"] { --grade-a: var(--magenta); --grade-b: var(--violet); --surface: #120426; --dots: 5px; } [data-grade="teal"] { --grade-a: var(--cyan); --grade-b: var(--blue); --surface: #050d1f; --dots: 4px; } [data-grade="neon"] { --grade-a: var(--cyan); --grade-b: var(--magenta); --surface: var(--night); --dots: 4px; } [data-grade="steel"] { --grade-a: #9db2e6; --grade-b: #6f8fff; --surface: #0a1226; --dots: 3px; } [data-grade="quiet"] { --grade-a: #6f8fff; --grade-b: #a8bcf5; --surface: #070a18; --dots: 3px; } [data-grade="dawn"] { --grade-a: var(--dawn); --grade-b: var(--magenta); --surface: #17102c; --dots: 4px; }