/* Hallmark · route: custom (bespoke) · structure: full-fold cinematic hero → catalogue of distinct section shapes · idea: "a lit arena you walk into, not a template you scroll" * paper: oklch(10% 0.015 290) · accent: oklch(68% 0.24 300) electric purple · accent-2: oklch(85% 0.14 200) cyan · accent-3: oklch(70% 0.25 340) magenta (rare) * display: Space Grotesk · body: Manrope · axes: dark / grotesk-sans / cool (violet 300°) * gates: all-pass · studied: no · context: explicit (brief supplied palette, fonts, sections) * Hallmark · pre-emit critique: P5 H4 E5 S4 R4 V5 */ /* ------------------------------------------------------------------ DivineGaming design tokens Every colour, font, size, space, easing and duration used by the site is declared here. main.css only references these by name. ------------------------------------------------------------------ */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/space-grotesk-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/space-grotesk-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/manrope-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/manrope-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: dark; /* ---- Colour · surfaces (violet-tinted blacks, lighter = higher) ---- */ --color-paper: oklch(10% 0.015 290); /* page ground */ --color-paper-2: oklch(13.5% 0.018 290); /* section / card */ --color-paper-3: oklch(17% 0.02 290); /* elevated card */ --color-paper-4: oklch(21% 0.022 290); /* hover elevation */ --color-rule: oklch(27% 0.025 290); /* dividers */ --color-rule-2: oklch(21% 0.02 290); /* quiet dividers */ /* ---- Colour · text ---- */ --color-ink: oklch(95% 0.01 290); --color-ink-2: oklch(81% 0.015 290); --color-muted: oklch(65% 0.02 290); --color-neutral: oklch(48% 0.02 290); /* ---- Colour · accents ---- */ --color-accent: oklch(68% 0.24 300); /* electric purple — primary */ --color-accent-deep: oklch(52% 0.22 300); /* purple, darker (borders, glows) */ --color-accent-ink: oklch(12% 0.03 300); /* text on accent fill */ --color-accent-2: oklch(85% 0.14 200); /* cyan — secondary, focus, live states */ --color-accent-2-deep: oklch(62% 0.13 205); --color-accent-3: oklch(70% 0.25 340); /* magenta — rare highlight only */ --color-focus: oklch(88% 0.15 200); --color-success: oklch(78% 0.17 150); --color-error: oklch(72% 0.19 22); --color-gold: oklch(82% 0.14 85); /* leaderboard #1 only */ /* ---- Translucent modifiers (overlays, glass, glows) — not palette colours ---- */ --alpha-glass: oklch(14% 0.02 290 / 0.62); --alpha-glass-strong: oklch(12% 0.02 290 / 0.84); --alpha-hairline: oklch(95% 0.01 290 / 0.10); --alpha-hairline-2: oklch(95% 0.01 290 / 0.06); --alpha-accent-glow: oklch(68% 0.24 300 / 0.35); --alpha-accent-soft: oklch(68% 0.24 300 / 0.14); --alpha-cyan-glow: oklch(85% 0.14 200 / 0.30); --alpha-cyan-soft: oklch(85% 0.14 200 / 0.12); --alpha-magenta-soft: oklch(70% 0.25 340 / 0.16); --alpha-scrim: oklch(8% 0.015 290 / 0.72); --alpha-shadow: oklch(4% 0.01 290 / 0.55); /* ---- Typography ---- */ --font-display: "Space Grotesk", "Segoe UI", ui-sans-serif, sans-serif; --font-body: "Manrope", "Segoe UI", ui-sans-serif, sans-serif; --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; /* 1.25 scale from 16px */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-display-s: clamp(2rem, 3.2vw + 1rem, 3.25rem); --text-display: clamp(2.75rem, 6.2vw + 0.5rem, 6rem); --leading-tight: 1.02; --leading-snug: 1.15; --leading-body: 1.6; --tracking-display: -0.03em; --tracking-caps: 0.14em; /* ---- Space (4pt) ---- */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --page-max: 80rem; --page-gutter: clamp(1rem, 4vw, 3rem); /* ---- Rules & radii ---- */ --rule-hair: 1px; --rule-thick: 3px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-morph: 520ms; /* ---- Z scale ---- */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; /* ---- Control sizing ---- */ --control-h: 3rem; /* 48px — inputs and buttons share it */ }