/* ========================================================================== ARKADE LOUNGE — Design Tokens -------------------------------------------------------------------------- The single source of truth for colour, type, space, motion and elevation. Nothing downstream may hard-code a hex value, a pixel font size, or a duration: it comes from here or it does not exist. The site is deliberately dark-only. ARKADE LOUNGE is a venue brand and the dark canvas is part of the identity, so there is no light theme to fall back to. `color-scheme` is declared so form controls and scrollbars render dark natively rather than flashing white on first paint. ========================================================================== */ :root { color-scheme: dark; /* --------------------------------------------------------------------- BRAND — the five official values, kept verbatim and never altered. Everything else in this file is derived from them. --------------------------------------------------------------------- */ --brand-robotic-black: #29272D; --brand-purple: #532672; --brand-magenta: #CA2335; --brand-light-steel: #EDEFF1; --brand-grey: #494949; /* --------------------------------------------------------------------- SURFACES — a ramp built around Robotic Black: darker than brand for depth, lighter for panels that need to lift off the canvas. --------------------------------------------------------------------- */ --surface-void: #131218; /* deepest wells, modal backdrop */ --surface-sunken: #1C1A21; /* section bands that recede */ --surface: #29272D; /* BRAND — the default canvas */ --surface-raised: #322F38; /* cards sitting on the canvas */ --surface-high: #3D3946; /* card hover, popovers, menus */ --line: #494949; /* BRAND — structural borders */ --line-soft: rgba(237, 239, 241, 0.10); /* hairlines inside panels */ --line-strong: rgba(237, 239, 241, 0.22); /* emphasised dividers */ /* --------------------------------------------------------------------- PURPLE — the primary highlight. The brand value is too dark to read against Robotic Black, so it anchors the ramp and fills shapes, while lighter steps carry text and edges. Contrast against --surface is recorded per step. Every figure here is MEASURED, not estimated, and tools/check-contrast.test.mjs recomputes them from this file on every test run — an earlier version of this comment carried guessed numbers, and --text-dim was documented at 4.6:1 while actually rendering at 3.43:1, below the threshold for the body text it was being used for. --------------------------------------------------------------------- */ --purple-900: #24102F; --purple-800: #3A1B4F; --purple-700: #532672; /* BRAND — fills only, never text. 1.3:1 */ --purple-600: #6B3193; /* solid button fill. 1.7:1 */ --purple-500: #9C5BCF; /* borders, active edges, rules. 3.4:1 */ --purple-400: #A263D6; /* icons and large headings. 3.7:1 */ --purple-300: #C08FE8; /* body-size accent text. 5.9:1 */ --purple-200: #DDBFF3; /* text sitting on a purple fill. 6.8:1 */ /* --------------------------------------------------------------------- MAGENTA — strictly secondary. It must never occupy more area than the purple on the same screen. Reserved for live states, alerts, and a small number of promotional badges. --------------------------------------------------------------------- */ --magenta-800: #6B1220; --magenta-700: #8E1826; --magenta-600: #CA2335; /* BRAND — fills and status dots. 2.7:1 */ --magenta-500: #E14355; /* large text and borders. 3.6:1 */ --magenta-400: #F5808C; /* body-size accent text. 5.9:1 */ /* --------------------------------------------------------------------- TEXT — white does the overwhelming majority of the work. --------------------------------------------------------------------- */ --text: #FFFFFF; /* primary readable text */ --text-2: #EDEFF1; /* BRAND Light Steel — secondary copy */ --text-muted: #A9A5B0; /* supporting detail. 6.1:1 */ /* Lifted from #7C7885, which measured 3.43:1 against the canvas — below the 4.5:1 body text needs, while being used for footer copy, form hints and timestamps on every page. The documented figure had been guessed. */ --text-dim: #9A96A3; /* timestamps and meta. 5.1:1 */ --text-on-accent: #FFFFFF; /* --------------------------------------------------------------------- SEMANTIC ALIASES — what components actually reference. Repointing a step here restyles the whole site coherently and in one edit. --------------------------------------------------------------------- */ --bg: var(--surface); --bg-sunken: var(--surface-sunken); --bg-raised: var(--surface-raised); --accent: var(--purple-500); --accent-text: var(--purple-300); --accent-fill: var(--purple-600); --accent-deep: var(--purple-700); --accent-quiet: rgba(156, 91, 207, 0.14); /* --purple-500 at 14% */ --alert: var(--magenta-600); --alert-text: var(--magenta-400); --alert-quiet: rgba(202, 35, 53, 0.14); --success: #34C77B; --warning: #E8A33D; --focus-ring: var(--purple-300); /* --------------------------------------------------------------------- TYPOGRAPHY Blanka is the display face. The licensed font file is NOT in this repository, so the stack degrades to Montserrat and the display classes compensate with heavier weight and wider tracking. Dropping Blanka.woff2 into /assets/fonts/ activates it with no other change. --------------------------------------------------------------------- */ --font-display: 'Blanka', 'Montserrat', 'Segoe UI', system-ui, sans-serif; --font-pixel: 'Press Start 2P', 'Courier New', monospace; --font-sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Fluid scale. Each step interpolates between a small phone and a 1440px desktop so headings stay in proportion without a single media query. */ --fs-hero: clamp(2.75rem, 1.60rem + 5.75vw, 6.5rem); --fs-h1: clamp(2rem, 1.35rem + 3.25vw, 4rem); --fs-h2: clamp(1.6rem, 1.20rem + 2vw, 2.75rem); --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); --fs-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-micro: 0.6875rem; --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.65; /* Blanka needs air. It is a geometric stencil face with open counters and hard verticals, and set tight the letters read as one continuous shape — "ARKADE" becomes a fence. The negative tracking here was inherited from a Montserrat-first design, where it was right, and became wrong the day the real display face arrived. Positive across the board now, widening as the type gets larger, because the bigger a Blanka line is set the more the gaps matter. */ --tracking-hero: 0.08em; --tracking-display: 0.06em; --tracking-label: 0.16em; --tracking-pixel: 0.02em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900; /* --------------------------------------------------------------------- SPACE — a 4px base. Section rhythm is fluid so long pages breathe on a desktop without wasting a phone screen. --------------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6rem; --sp-12: 8rem; --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --container: 1280px; --container-narrow: 900px; --container-text: 68ch; /* --------------------------------------------------------------------- SHAPE — esports geometry favours tight radii and cut corners over pill shapes. --cut drives the angular clip used on cards and buttons. --------------------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-full: 999px; --cut: 14px; --cut-sm: 8px; /* --------------------------------------------------------------------- ELEVATION & GLOW Glows are controlled: one light source per view, never stacked. --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); --glow-purple: 0 0 28px rgba(133, 68, 184, 0.38); --glow-magenta: 0 0 24px rgba(202, 35, 53, 0.34); /* --------------------------------------------------------------------- MOTION — fast and purposeful, never decorative for its own sake. --------------------------------------------------------------------- */ --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-move: cubic-bezier(0.65, 0, 0.35, 1); /* --------------------------------------------------------------------- LAYERS — every fixed or absolute element names its layer here, so a stacking bug is fixed in one place instead of by escalating z-index. --------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-backdrop: 400; --z-modal: 500; --z-toast: 600; /* Header height is consumed by scroll-padding and the mobile drawer. */ --header-h: 68px; } @media (min-width: 960px) { :root { --header-h: 80px; } } /* Honour the OS reduced-motion setting by collapsing every duration at the token level, so no individual component has to remember to. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }