/* ========================================================================== GFR GAMES — GAME THEMES -------------------------------------------------------------------------- One class per game. Each supplies the tokens a room floods itself with: ground, ink, accent, CTA, display face, and a background motif. Trimmed from threattape.com's themes-products.css, which carried 21 themes and imported 18 font families for products that do not exist on this site. TYPOGRAPHY RULE: game faces are for titles only. Every piece of reading text on the site — hooks, body copy, placards — is the chrome's Spectral. The title is the game speaking; everything else is the institution describing it. This is why only display faces are imported below. GROUND RULE (revised 2026-08-03): the first cut put four of six grounds at 3–5% lightness with hues bunched between 210° and 275°, so Vector Death and Drifter read as the same room. Grounds now sit at 12–21% lightness and are spread deliberately around the wheel: hue sat light 74° 35% 19% trench olive drab 158° 55% 13% d20craps table felt 216° 9% 21% vectordeath gunmetal 224° 68% 16% drifter navy void 270° 53% 15% roc violet velvet 346° 41% 12% worlddungeon arena maroon Vector Death and Drifter sit 8° apart, which is nothing — they are separated by SATURATION instead, 9% against 68%, so one reads as grey steel and the other as blue. Hue was never going to separate a gunmetal from a void; both are "dark blue-ish" by definition. Vector Death is also the lightest ground of the six to keep it off the near-black it started at. If you change a ground, re-check its ink and CTA contrast — several of these accents have very little headroom. See the CTA note below. Design: docs/plans/2026-08-03-gfr-games-visual-identity-design.md ========================================================================== */ /* Display faces only. Weights limited to what the titles actually use. */ @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&family=Big+Shoulders+Stencil+Display:wght@700;900&family=Cinzel+Decorative:wght@700;900&family=Limelight&family=Major+Mono+Display&family=Rajdhani:wght@600;700&display=swap'); /* -------------------------------------------------------------------------- VECTOR DEATH — eight ships, one tunnel, half coming the other way Cold gunmetal and arterial red. Race telemetry, not sci-fi. -------------------------------------------------------------------------- */ .theme-vectordeath { --pt-bg: #31353b; /* near-neutral steel; reads grey, not blue */ --pt-ink: #e9ecef; --pt-ink-dim: #b8bdc4; --pt-accent: #e01e37; /* arterial red — graphic use only */ --pt-accent-2: #ffa033; /* Telemetry amber carries the button. Arterial red cannot: measured as a fill it reaches 4.15:1 with a near-black label and 4.02:1 with a light one, so it fails AA in both directions at any label colour. Lifting it to pass turned it salmon and lost the identity. Amber passes at 7.46:1 and reads as a HUD warning, which is the right register anyway. */ --pt-cta: #ffa033; --pt-display-font: 'Rajdhani', ui-sans-serif, system-ui, sans-serif; /* Tunnel: light bleeding from a vanishing point over cold steel. */ --pt-motif: radial-gradient(ellipse 70% 55% at 50% 44%, rgba(224, 30, 55, 0.20), transparent 70%), radial-gradient(circle at 50% 44%, rgba(255, 160, 51, 0.12), transparent 42%), linear-gradient(180deg, #3a3e45 0%, #292c31 100%); } /* -------------------------------------------------------------------------- DRIFTER — the galaxy's wide open, the only law is what your guns enforce Ship's HUD against the void. Frontier saloon at the edge of the black. -------------------------------------------------------------------------- */ .theme-drifter { --pt-bg: #0d1c44; /* saturated navy — the blue half of the pair */ --pt-ink: #e6e9f0; --pt-ink-dim: #a9b2c4; --pt-accent: #5fc1ff; --pt-accent-2: #ff5e9a; --pt-cta: #5fc1ff; --pt-display-font: 'Major Mono Display', ui-monospace, monospace; /* Star field. Small hard radials at low opacity read as depth rather than as a gradient. */ --pt-motif: radial-gradient(1.5px 1.5px at 12% 22%, rgba(240, 244, 255, 0.90), transparent 100%), radial-gradient(1.5px 1.5px at 68% 14%, rgba(240, 244, 255, 0.70), transparent 100%), radial-gradient(2px 2px at 84% 62%, rgba(95, 193, 255, 0.80), transparent 100%), radial-gradient(1px 1px at 34% 74%, rgba(240, 244, 255, 0.60), transparent 100%), radial-gradient(1.5px 1.5px at 52% 38%, rgba(240, 244, 255, 0.75), transparent 100%), radial-gradient(1px 1px at 22% 54%, rgba(255, 94, 154, 0.65), transparent 100%), radial-gradient(1.5px 1.5px at 91% 24%, rgba(240, 244, 255, 0.65), transparent 100%), radial-gradient(1px 1px at 44% 88%, rgba(240, 244, 255, 0.55), transparent 100%), radial-gradient(ellipse 80% 60% at 78% 28%, rgba(95, 193, 255, 0.16), transparent 70%), linear-gradient(180deg, #12245420 0%, #0a1636 100%); } /* -------------------------------------------------------------------------- TRENCH DEFENSE — they don't stop, they don't sleep WW I field kit. Olive drab, khaki canvas, stencilled crate markings. The one Kevin builds with his kid. -------------------------------------------------------------------------- */ .theme-trench { --pt-bg: #3a4220; --pt-ink: #ede1c2; --pt-ink-dim: #c8b98d; --pt-accent: #b8a378; --pt-accent-2: #e2723a; --pt-cta: #cdbb96; /* khaki lifted a step to clear AA on olive */ --pt-display-font: 'Big Shoulders Stencil Display', 'Stardos Stencil', ui-sans-serif, sans-serif; /* Canvas weave: two fine diagonal hatches crossing, mud settling low. */ --pt-motif: repeating-linear-gradient(45deg, rgba(237, 225, 194, 0.035) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 5px), linear-gradient(180deg, #454e26 0%, #2f3619 100%); } /* -------------------------------------------------------------------------- ROC — grandma's card table, rebuilt for your phone Victorian gothic. Violet velvet, blood red, bone parchment. -------------------------------------------------------------------------- */ .theme-roc { --pt-bg: #26123a; --pt-ink: #efe5d8; --pt-ink-dim: #cbb9d8; --pt-accent: #a855f7; --pt-accent-2: #c91432; --pt-cta: #b167f8; --pt-display-font: 'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif; /* Velvet: a violet pool of light off-centre, blood bleeding in low. */ --pt-motif: radial-gradient(ellipse 60% 50% at 28% 28%, rgba(168, 85, 247, 0.26), transparent 72%), radial-gradient(ellipse 50% 40% at 82% 84%, rgba(201, 20, 50, 0.20), transparent 70%), linear-gradient(180deg, #2e1646 0%, #1d0d2d 100%); } /* -------------------------------------------------------------------------- D20 CRAPS — craps is odds and probability, so what if you ran it on d20s Art-deco casino. Neon gold on the felt itself. -------------------------------------------------------------------------- */ .theme-d20craps { --pt-bg: #0f3326; /* the table felt, not the velvet around it */ --pt-ink: #f2e9c6; --pt-ink-dim: #cbbf94; --pt-accent: #ffd700; --pt-accent-2: #c8102e; --pt-cta: #ffd700; --pt-display-font: 'Limelight', 'Cinzel Decorative', Georgia, serif; /* Roulette: a slow conic sweep of gold across the felt. */ --pt-motif: conic-gradient(from 210deg at 74% 26%, rgba(255, 215, 0, 0.14) 0deg, transparent 26deg, rgba(255, 215, 0, 0.09) 52deg, transparent 78deg, rgba(255, 215, 0, 0.14) 104deg, transparent 130deg), radial-gradient(ellipse 70% 55% at 40% 90%, rgba(0, 0, 0, 0.30), transparent 72%), linear-gradient(180deg, #13402f 0%, #0b2a1e 100%); } /* -------------------------------------------------------------------------- THE WORLD DUNGEON — the floors collapse on a timer, the audience is real Authored here; this theme did not exist in the portfolio. The only game that reads as a broadcast rather than a place, so the treatment is arena lighting and marquee lettering: a ticket, not a room. -------------------------------------------------------------------------- */ .theme-worlddungeon { --pt-bg: #2b1218; /* arena maroon */ --pt-ink: #f3ece2; --pt-ink-dim: #c8b3ac; --pt-accent: #cf2136; /* broadcast crimson — graphic use only */ --pt-accent-2: #e8b53a; /* Applause gold carries the button, for the same measured reason as Vector Death: crimson tops out at 3.70:1 as a fill with any label. */ --pt-cta: #e8b53a; --pt-display-font: 'Big Shoulders Display', 'Oswald', ui-sans-serif, sans-serif; /* Two arena spots crossing from above, crowd glow banked at the bottom. The floor stays the darkest part of the frame — it is the thing that collapses. */ --pt-motif: radial-gradient(ellipse 34% 78% at 30% -12%, rgba(232, 181, 58, 0.26), transparent 66%), radial-gradient(ellipse 34% 78% at 70% -12%, rgba(207, 33, 54, 0.26), transparent 66%), radial-gradient(ellipse 96% 26% at 50% 106%, rgba(232, 181, 58, 0.12), transparent 70%), linear-gradient(180deg, #351720 0%, #1e0c11 100%); } /* -------------------------------------------------------------------------- SINGLE-WEIGHT DISPLAY FACES -------------------------------------------------------------------------- Major Mono Display and Limelight ship at 400 only, so at title scale they read thin against faces that have a 900. The portfolio's established fix is to bulk them with a stroke in the same colour rather than swap the face. Note: Major Mono Display's capital D is a solid half-disc by design. That is the typeface, not the stroke — it renders identically with the stroke removed. Do not "fix" it. -------------------------------------------------------------------------- */ .theme-drifter .room__title, .theme-d20craps .room__title, .theme-drifter .gamepage__title, .theme-d20craps .gamepage__title { -webkit-text-stroke: 1.5px currentColor; paint-order: stroke fill; } /* Tracking corrections at display size. */ .theme-roc .room__title, .theme-roc .gamepage__title { letter-spacing: -0.005em; } .theme-trench .room__title, .theme-trench .gamepage__title, .theme-worlddungeon .room__title, .theme-worlddungeon .gamepage__title { letter-spacing: 0.01em; } .theme-vectordeath .room__title, .theme-vectordeath .gamepage__title { letter-spacing: 0.005em; }