/* ============================================================================= * JER'S MEDIA — design tokens. jers.media · studio site design system * * Harvested from BREACH PROTOCOL's shipped palette (packages/shared/src/theme.ts * + packages/client/src/styles/global.css). The game is the source of truth for * the hues; this file adapts them to a marketing site: solid surfaces where the * game uses glass, a light "printout" theme the game doesn't need, and lifted * variants where a game color would fail WCAG AA as small text. * * THEME MODEL — dark is primary and the default. Light ("printout") activates: * 1. explicitly, via * 2. by OS preference, via prefers-color-scheme — unless data-theme="dark" * pins dark. * Every consumer reads tokens only; no component may hardcode a hex. * * CONTRAST — every text token below states its ratio against the surfaces it * is allowed on. Body text needs >= 4.5:1, large text (>=24px, or >=18.66px * bold) needs >= 3:1. Ratios were computed, not eyeballed; the full table * lives in DESIGN-SYSTEM.md §3. * ========================================================================== */ :root { color-scheme: dark; /* ---- Surfaces (dark: the machine room) --------------------------------- */ --jm-bg-0: #04060c; /* page ground. The game's --bg family. Never #000. */ --jm-bg-1: #070b14; /* alternating section band, one step lifted */ --jm-panel: #0a0f18; /* cards, nav dropdowns, code blocks (solid) */ --jm-panel-glass: rgba(10, 15, 24, 0.85); /* panels OVER imagery only; pair with backdrop-filter: blur(8px) */ --jm-term-bg: #03140a; /* terminal-variant blocks: the powered phosphor field behind the CRT menu */ /* ---- Lines & hairlines ------------------------------------------------- */ --jm-line: rgba(45, 226, 230, 0.22); /* default 1px hairline (game: line @ .25) */ --jm-line-strong: rgba(45, 226, 230, 0.45); /* hover borders, emphasized rules */ --jm-line-neutral: rgba(143, 168, 181, 0.18); /* quiet separators inside prose/tables */ /* ---- Text -------------------------------------------------------------- */ --jm-text: #cfe8ef; /* body/headings. 15.9:1 on bg-0, 15.0:1 on panel */ --jm-text-2: #8fa8b5; /* secondary: standfirsts, card body. 8.1:1 / 7.7:1 */ --jm-text-3: #6f8697; /* muted: captions, metadata, footer. 5.3:1 / 5.1:1 */ --jm-text-faint: #5a6f80; /* 3.9:1 — LARGE TEXT / DECORATIVE ONLY (>=24px or >=18.66px bold): watermark numerals, oversized ghost headings. NEVER body or UI label size. */ /* ---- Functional accents (one phosphor per purpose) --------------------- */ --jm-accent: #2de2e6; /* cyan — THE interactive color: links, buttons, focus, active nav. 12.7:1 on bg-0. */ --jm-phosphor: #39ff88; /* green — the CRT's phosphor. Terminal fiction, live/ok status. NOT for links. 15.3:1 on bg-0. */ --jm-warn: #ffb347; /* amber — caution, WIP, unshipped. 11.4:1. */ --jm-danger: #ff5c1a; /* heat orange — destructive, hard errors. 6.6:1. */ --jm-special: #c26bff; /* lance purple — rare, one-per-page highlight (award, easter egg). 6.6:1. */ /* ---- Team colors (the game's factions, verbatim) ------------------------ */ --jm-red: #ff3b4d; /* RED TEAM // OFFENSIVE OPS. 5.8:1 on bg-0 — body AA ok */ --jm-blue: #3b8bff; /* BLUE TEAM // SOC DEFENSE. 6.1:1 on bg-0 — body AA ok */ --jm-red-bright: #ff7583; /* lifted red for <14px mono metadata. 7.8:1 */ --jm-blue-bright: #6ea8ff; /* lifted blue for <14px mono metadata. 8.4:1 */ /* ---- On-fill text (buttons, filled pills) ------------------------------- */ --jm-on-accent: #04060c; /* on accent fill: 12.7:1. on phosphor: 15.3:1. on warn: 11.4:1 */ /* ---- Phosphor ramp (terminal fiction, from the CRT menu's .term) -------- */ --jm-ph: var(--jm-phosphor); --jm-ph-mid: rgba(57, 255, 136, 0.78); --jm-ph-dim: rgba(57, 255, 136, 0.5); --jm-ph-faint: rgba(57, 255, 136, 0.32); /* decorative rules only, never text */ /* ---- Typography --------------------------------------------------------- */ /* Display: Space Grotesk — a grotesque like the game wordmark's Helvetica, with squared terminals that sit naturally next to a monospace. */ --jm-font-display: 'Space Grotesk', 'Helvetica Neue', 'Segoe UI', Inter, Arial, sans-serif; /* Body: Inter — already third in the game's own display stack; promoted here because a studio site has paragraphs and the game does not. */ --jm-font-body: Inter, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; /* Mono: the game's --mono, verbatim. The HUD is a terminal; so is our chrome. */ --jm-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace; /* Type scale (minor third below 1rem, fluid display sizes above) */ --jm-fs-2xs: 0.6875rem; /* 11px — pills, table headers (mono only) */ --jm-fs-xs: 0.75rem; /* 12px — kickers, metadata (mono only) */ --jm-fs-s: 0.875rem; /* 14px — nav links, buttons, code */ --jm-fs-base: 1rem; /* 16px — body */ --jm-fs-l: 1.1875rem; /* 19px — standfirst / lead */ --jm-fs-h4: 1.375rem; /* 22px */ --jm-fs-h3: 1.75rem; /* 28px */ --jm-fs-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* 32–44px */ --jm-fs-h1: clamp(2.5rem, 1.75rem + 3.5vw, 4.25rem); /* 40–68px */ --jm-lh-tight: 1.1; /* display headings */ --jm-lh-heading: 1.25; /* h3/h4 */ --jm-lh-body: 1.65; /* prose */ --jm-lh-mono: 1.6; /* code/telemetry */ --jm-track-caps: 0.32em; /* kickers & wordmark letterspacing */ --jm-track-ui: 0.12em; /* buttons, pills, nav (mono caps) */ /* ---- Spacing (4px base) ------------------------------------------------- */ --jm-sp-1: 0.25rem; /* 4px */ --jm-sp-2: 0.5rem; /* 8px */ --jm-sp-3: 0.75rem; /* 12px */ --jm-sp-4: 1rem; /* 16px */ --jm-sp-6: 1.5rem; /* 24px */ --jm-sp-8: 2rem; /* 32px */ --jm-sp-12: 3rem; /* 48px */ --jm-sp-16: 4rem; /* 64px */ --jm-sp-24: 6rem; /* 96px */ --jm-sp-32: 8rem; /* 128px */ /* ---- Radii -------------------------------------------------------------- */ --jm-r-0: 0; /* default. Terminal chrome is square. */ --jm-r-1: 2px; /* buttons, pills, inputs (the game's pip radius) */ --jm-r-2: 6px; /* cards, code blocks */ --jm-r-glass: 10px; /* THE GLASS: hero frames, imagery, CRT surfaces (the .crt-screen radius, verbatim) */ /* ---- Borders ------------------------------------------------------------ */ --jm-bw: 1px; /* everything structural is a 1px line */ --jm-bw-focus: 2px; /* focus ring only */ --jm-bw-callout: 2px; /* left accent bar on callouts */ /* ---- Elevation = emitted light, never drop shadow ----------------------- */ --jm-glow-1: 0 0 14px rgba(45, 226, 230, 0.14); /* hover: card, secondary btn */ --jm-glow-2: 0 0 26px rgba(120, 255, 190, 0.14), 0 0 90px 12px rgba(120, 255, 190, 0.07); /* featured/powered: the CRT bezel spill, verbatim. Max ONE per viewport. */ --jm-glow-text: 0 0 7px rgba(57, 255, 136, 0.4); /* phosphor text (terminal only) */ --jm-glow-accent-text: 0 0 8px rgba(45, 226, 230, 0.45); /* wordmark //, hero titles */ --jm-glow-focus: 0 0 0 var(--jm-bw-focus) var(--jm-accent); /* + outline, see DS §8 */ /* ---- Motion -------------------------------------------------------------- */ --jm-t-snap: 0ms; /* terminal-fiction state flips (inverse video) — instant */ --jm-t-1: 120ms; /* micro: hover color/glow */ --jm-t-2: 240ms; /* standard: reveal, fade, accordion */ --jm-t-3: 480ms; /* deliberate: section entrance */ --jm-t-scene: 900ms; /* once-per-page: hero boot */ --jm-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1); --jm-ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* sweeps (packet-trace, scan) are `linear`; blinks are `steps(1)` */ --jm-blink: 1.06s; /* the game's cursor period, verbatim */ } /* ---- Light theme: "PRINTOUT" ------------------------------------------------ * The fiction: the SOC prints its report. Blue-white paper, ink, no glow — * phosphor doesn't survive the printer. Same hue families, AA-corrected. */ [data-theme='light'] { color-scheme: light; --jm-bg-0: #eef4f6; --jm-bg-1: #e4edf0; --jm-panel: #ffffff; --jm-panel-glass: rgba(255, 255, 255, 0.88); --jm-term-bg: #0b1510; /* terminals stay dark in print — a screenshot, not a surface */ --jm-line: rgba(9, 110, 119, 0.28); --jm-line-strong: rgba(9, 110, 119, 0.55); --jm-line-neutral: rgba(13, 26, 36, 0.14); --jm-text: #0d1a24; /* 15.9:1 on bg-0, 17.6:1 on panel */ --jm-text-2: #3d5565; /* 7.0:1 on bg-0 */ --jm-text-3: #52697a; /* 5.2:1 on bg-0, 5.7:1 on panel */ --jm-text-faint: #8aa0ae; /* large/decorative only, as in dark */ --jm-accent: #096e77; /* ink-cyan. 5.4:1 on bg-0. (#2de2e6 on paper is 1.6:1 — unusable; see DS §3) */ --jm-phosphor: #0a7a3f; /* 4.9:1 */ --jm-warn: #8a5300; /* 5.7:1 */ --jm-danger: #b3541e; /* 4.5:1 */ --jm-special: #8f37cc; /* 5.3:1 */ --jm-red: #c11f30; /* 5.4:1 */ --jm-blue: #1a5fd0; /* 5.3:1 */ --jm-red-bright: #c11f30; /* light theme needs no lift */ --jm-blue-bright: #1a5fd0; --jm-on-accent: #ffffff; /* 6.0:1 on accent fill */ --jm-ph: #0a7a3f; --jm-ph-mid: rgba(10, 122, 63, 0.85); --jm-ph-dim: rgba(10, 122, 63, 0.6); --jm-ph-faint: rgba(10, 122, 63, 0.32); /* Printouts don't glow. Elevation falls back to the hairline itself. */ --jm-glow-1: 0 0 0 0 transparent; --jm-glow-2: 0 0 0 0 transparent; --jm-glow-text: none; --jm-glow-accent-text: none; } /* OS preference wins only when the page hasn't pinned a theme. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']):not([data-theme='light']) { color-scheme: light; --jm-bg-0: #eef4f6; --jm-bg-1: #e4edf0; --jm-panel: #ffffff; --jm-panel-glass: rgba(255, 255, 255, 0.88); --jm-term-bg: #0b1510; --jm-line: rgba(9, 110, 119, 0.28); --jm-line-strong: rgba(9, 110, 119, 0.55); --jm-line-neutral: rgba(13, 26, 36, 0.14); --jm-text: #0d1a24; --jm-text-2: #3d5565; --jm-text-3: #52697a; --jm-text-faint: #8aa0ae; --jm-accent: #096e77; --jm-phosphor: #0a7a3f; --jm-warn: #8a5300; --jm-danger: #b3541e; --jm-special: #8f37cc; --jm-red: #c11f30; --jm-blue: #1a5fd0; --jm-red-bright: #c11f30; --jm-blue-bright: #1a5fd0; --jm-on-accent: #ffffff; --jm-ph: #0a7a3f; --jm-ph-mid: rgba(10, 122, 63, 0.85); --jm-ph-dim: rgba(10, 122, 63, 0.6); --jm-ph-faint: rgba(10, 122, 63, 0.32); --jm-glow-1: 0 0 0 0 transparent; --jm-glow-2: 0 0 0 0 transparent; --jm-glow-text: none; --jm-glow-accent-text: none; } } /* ---- THE HARD RULE (motion) ------------------------------------------------- * Ships with the tokens so no consumer can forget it. Every animation and * transition in the system collapses to its final frame. Signature effects * additionally define designed static fallbacks (DS §10). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }