/* =========================================================================
HIGH5 ARCADE — alternate design direction (branch: redesign/arcade)
-------------------------------------------------------------------------
Deliberately uses the SAME class vocabulary as css/style.css so every
existing page re-skins by swapping one . Nothing here is a refinement
of the print-shop direction — it is a different universe: a CRT arcade at
two in the morning.
Rules of the world:
· no border-radius, anywhere. Corners are notched, not rounded.
· shadows are hard and offset. No blur. Pixels don't blur.
· everything sits on an 8px grid, because pixels do.
========================================================================= */
:root {
--void: #0A0913; /* the room */
--cab: #14121F; /* cabinet body */
--screen: #1B1930; /* CRT glass */
--screen-2:#221F3C;
--line: #322D4E;
--cream: #F2EFE4;
--dim: #A79FC4;
--orange: #FF5A1F; /* High5 signature — survives the move */
--coin: #FFC93C;
--cyan: #3EE8D2; /* rhymes with Robots Arent People */
--magenta: #FF4FA3;
--px: 4px; /* one "pixel" */
--notch: 8px;
--section: clamp(4rem, 9vw, 7.5rem);
--font-display: "Pixelify Sans", "Courier New", monospace;
--font-ui: "Silkscreen", "Courier New", monospace;
--font-body: Archivo, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
/* The room. arcade.js reads these to paint the hero canvas, so a palette
swap re-colours the pixel art as well as the markup. */
--room-sky-top: #0A0913;
--room-sky-mid: #181430;
--room-sky-low: #2A1B45;
--room-floor: #0D0B18;
--room-floor-hi: #1A1630;
--room-cab: #1E1A33;
--room-cab-edge: #3A3260;
--room-star: #E9E2FF;
--room-carpet-1: #241C40;
--room-carpet-2: #3A2A5E;
--room-coin-hi: #FFE79A;
--room-slot: #0A0913;
--room-shadow: #181030;
--room-screens: #FF5A1F,#3EE8D2,#FFC93C,#FF4FA3,#8B6BFF,#3E8E5A,#2B5DA8;
--room-invaders: #3EE8D2,#FF4FA3,#FFC93C,#8B6BFF;
--room-bot-accent:#FF4FA3;
--room-bot-edge: #9B6DFF;
--room-bot-screen:#3EE8D2;
/* copy scrim over the hero, so a light palette can lighten it */
--hero-scrim: linear-gradient(100deg, var(--void) 0%, rgba(10,9,19,0.94) 40%,
rgba(10,9,19,0.45) 66%, rgba(10,9,19,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, var(--void) 0%, rgba(10,9,19,0.95) 48%,
rgba(10,9,19,0.72) 70%, rgba(10,9,19,0.15) 100%);
--crt: repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px),
radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
--btn-shadow: #B93B0C;
--accent-ink: var(--orange); /* orange as TEXT; darkened on light palettes */
--link-ink: var(--cyan);
/* Typography weight is palette-dependent. `antialiased` THINS glyphs — it is
right for light-on-dark and wrong for dark-on-light, where it eats the
counters of a pixel face. Same for the hard drop shadows: depth on a dark
ground, a doubled blur on a light one. */
--font-smooth: antialiased;
--h1-shadow: 0 var(--px) 0 rgba(0,0,0,0.75);
--lede-shadow: 0 2px 0 rgba(10,9,19,0.9);
--skyline-opacity: 0.35;
}
/* =========================================================================
PALETTE OPTIONS — proposals for the colour branch. Set data-palette on
to preview. Default (no attribute) is the shipped purple room.
========================================================================= */
/* A — DAY SHIFT. The arcade with the doors open, from fable-25/sprite/'s sky.
Paper panels, ink type, the room lit by actual daylight. */
:root[data-palette="day"] {
--font-smooth: auto;
--h1-shadow: none;
--lede-shadow: none;
--skyline-opacity: 0.72;
--room-screen-floor: 0.95;
--void: #BFE6FF; --cab: #FFF8EC; --screen: #FFFFFF; --screen-2: #F1E7D6;
--line: #1A1030; --cream: #1A1030; --dim: #4E4468;
--orange: #FF5A1F; --coin: #8A5A00; --cyan: #0B6E6E; --magenta: #C2185B;
--btn-shadow: #B93B0C;
--room-sky-top: #8FD3FF; --room-sky-mid: #D4F0FF; --room-sky-low: #FFF0D4;
--room-floor: #3A7A3A; --room-floor-hi: #5FA85F;
--room-cab: #FFF8EC; --room-cab-edge: #1A1030;
--room-screen-floor: 1;
--room-star: #FFFFFF;
--room-carpet-1: #2B5A2B; --room-carpet-2: #4E8F4E;
--room-slot: #1A1030; --room-shadow: #2B5A2B;
--room-screens: #FF5A1F,#3FD0D0,#FFD45E,#FF6B8B,#7B4FD0,#3A7A3A,#2B5DA8;
--room-invaders: #5A2FA8,#D8305C,#B87400,#0E7C7C;
--room-bot-accent: #D8305C; --room-bot-edge: #5A2FA8; --room-bot-screen: #0E7C7C;
--hero-scrim: linear-gradient(100deg, rgba(255,248,236,0.97) 0%, rgba(255,248,236,0.92) 40%,
rgba(255,248,236,0.4) 66%, rgba(255,248,236,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, rgba(255,248,236,0.97) 0%, rgba(255,248,236,0.93) 48%,
rgba(255,248,236,0.7) 70%, rgba(255,248,236,0.1) 100%);
--crt: repeating-linear-gradient(to bottom, rgba(26,16,48,0.05) 0 1px, transparent 1px 3px);
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%231A1030'%3E%3Crect x='11' y='17' width='2' height='2' opacity='0.13'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='0.091'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='0.1105'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='0.078'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='0.0975'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='0.065'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='0.0845'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='0.07150000000000001'/%3E%3C/g%3E%3C/svg%3E");
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%23CFE3F5'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%23CFE3F5'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%23AFC9E0'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%23AFC9E0'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%23E3EEF8'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%23E3EEF8'/%3E%3C/svg%3E");
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%231A1030' opacity='.05'/%3E%3C/svg%3E");
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%231A1030'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF5A1F'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%233FD0D0'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FFD45E'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23FF6B8B'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%237B4FD0'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%233A7A3A'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%232B5DA8'/%3E%3C/g%3E%3C/svg%3E");
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF5A1F'/%3E%3Crect x='8' width='8' height='4' fill='%23FFD45E'/%3E%3C/svg%3E");
}
/* B — BOARDWALK. fable-25/newsincerity/'s pink→lilac→mint, on cream panels.
Sunset arcade on a pier. Loudest of the three. */
:root[data-palette="boardwalk"] {
--font-smooth: auto;
--h1-shadow: none;
--lede-shadow: none;
--skyline-opacity: 0.72;
--room-screen-floor: 0.95;
--void: #FFD9EF; --cab: #FFF4FB; --screen: #FFFFFF; --screen-2: #F6E4FA;
--line: #241033; --cream: #241033; --dim: #6B4A80;
--orange: #FF5A1F; --coin: #8A5200; --cyan: #0A6E64; --magenta: #C2185B;
--btn-shadow: #B93B0C;
--room-sky-top: #FF9ECF; --room-sky-mid: #D6A3E8; --room-sky-low: #7FE3E0;
--room-floor: #4A2B63; --room-floor-hi: #6B4A80;
--room-cab: #FFF4FB; --room-cab-edge: #241033;
--room-screen-floor: 1;
--room-star: #FFFFFF;
--room-carpet-1: #5E3A78; --room-carpet-2: #8A63A8;
--room-slot: #241033; --room-shadow: #3A1E57;
--room-screens: #FF3D9E,#00E5D1,#FFD45E,#C9A7FF,#FF6EC7,#14B8A6,#7B4FD0;
--room-invaders: #D6006E,#00A392,#7B4FD0,#C08800;
--room-bot-accent: #D6006E; --room-bot-edge: #7B4FD0; --room-bot-screen: #00A392;
--hero-scrim: linear-gradient(100deg, rgba(255,244,251,0.97) 0%, rgba(255,244,251,0.93) 40%,
rgba(255,244,251,0.42) 66%, rgba(255,244,251,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, rgba(255,244,251,0.97) 0%, rgba(255,244,251,0.93) 48%,
rgba(255,244,251,0.7) 70%, rgba(255,244,251,0.1) 100%);
--crt: repeating-linear-gradient(to bottom, rgba(36,16,51,0.05) 0 1px, transparent 1px 3px);
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23241033'%3E%3Crect x='11' y='17' width='2' height='2' opacity='0.12'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='0.08399999999999999'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='0.102'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='0.072'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='0.09'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='0.06'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='0.078'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='0.066'/%3E%3C/g%3E%3C/svg%3E");
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%23F3D5EA'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%23F3D5EA'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%23E0B6D8'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%23E0B6D8'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%23FBE6F4'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%23FBE6F4'/%3E%3C/svg%3E");
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%23241033' opacity='.05'/%3E%3C/svg%3E");
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%23241033'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF3D9E'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%2300E5D1'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FFD45E'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23C9A7FF'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%23FF6EC7'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%2314B8A6'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%237B4FD0'/%3E%3C/g%3E%3C/svg%3E");
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF3D9E'/%3E%3Crect x='8' width='8' height='4' fill='%2300E5D1'/%3E%3C/svg%3E");
}
/* C — NIGHT MARKET. Stays nocturnal, but the purple-black becomes a deep
teal-black and the accents get louder. Smallest change, keeps the 2am room. */
:root[data-palette="night"] {
--void: #04161A; --cab: #0B2A30; --screen: #0F3840; --screen-2: #14454F;
--line: #1C5C68; --cream: #F2FBF8; --dim: #8FC2C0;
--orange: #FF6B2C; --coin: #FFD45E; --cyan: #00E5D1; --magenta: #FF3D9E;
--btn-shadow: #C0451A;
--room-sky-top: #04161A; --room-sky-mid: #0A2830; --room-sky-low: #10424A;
--room-floor: #05191D; --room-floor-hi: #14454F;
--room-cab: #0E323A; --room-cab-edge: #1F6B78;
--room-star: #CFFCF5;
--room-carpet-1: #0E3239; --room-carpet-2: #1C5C68;
--room-slot: #04161A; --room-shadow: #04161A;
--room-screens: #FF6B2C,#00E5D1,#FFD45E,#FF3D9E,#8BE04A,#3FD0D0,#4D8CE8;
--room-invaders: #00E5D1,#FF3D9E,#FFD45E,#8BE04A;
--room-bot-accent: #FF3D9E; --room-bot-edge: #00E5D1; --room-bot-screen: #FFD45E;
--hero-scrim: linear-gradient(100deg, #04161A 0%, rgba(4,22,26,0.94) 40%,
rgba(4,22,26,0.45) 66%, rgba(4,22,26,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, #04161A 0%, rgba(4,22,26,0.95) 48%,
rgba(4,22,26,0.72) 70%, rgba(4,22,26,0.15) 100%);
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23CFFCF5'%3E%3Crect x='11' y='17' width='2' height='2' opacity='0.22'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='0.154'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='0.187'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='0.132'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='0.165'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='0.11'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='0.14300000000000002'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='0.12100000000000001'/%3E%3C/g%3E%3C/svg%3E");
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%230E3239'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%230E3239'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%231C5C68'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%231C5C68'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%230A272D'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%230A272D'/%3E%3C/svg%3E");
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%23FFFFFF' opacity='.03'/%3E%3C/svg%3E");
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%230E323A'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF6B2C'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%2300E5D1'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FFD45E'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23FF3D9E'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%238BE04A'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%233FD0D0'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%234D8CE8'/%3E%3C/g%3E%3C/svg%3E");
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF6B2C'/%3E%3Crect x='8' width='8' height='4' fill='%23FFD45E'/%3E%3C/svg%3E");
}
:root[data-palette="coinop"] {
--void: #0A0A0C; --cab: #1E1E24; --screen: #26262E; --screen-2: #33333D;
--line: #4C4C59; --cream: #F5F3EE; --dim: #ADA9B6;
--orange: #FF5A1F; --coin: #FFC93C; --cyan: #3EE8D2; --magenta: #FF4FA3;
--btn-shadow: #B93B0C;
--room-sky-top: #0A0A0C; --room-sky-mid: #191920; --room-sky-low: #2A2A34;
--room-floor: #0E0E12; --room-floor-hi: #2B2B35;
--room-cab: #24242C; --room-cab-edge: #5A5A67;
--room-star: #F2F0F7;
--room-carpet-1: #232329; --room-carpet-2: #43434F;
--room-slot: #0A0A0C; --room-shadow: #141418;
--room-screens: #FF5A1F,#3EE8D2,#FFC93C,#FF4FA3,#8BE04A,#4D8CE8,#FF8A3D;
--room-invaders: #3EE8D2,#FF4FA3,#FFC93C,#8BE04A;
--room-bot-accent: #FF4FA3; --room-bot-edge: #FF5A1F; --room-bot-screen: #3EE8D2;
--hero-scrim: linear-gradient(100deg, #0A0A0C 0%, rgba(10,10,12,0.94) 40%, rgba(10,10,12,0.45) 66%, rgba(10,10,12,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, #0A0A0C 0%, rgba(10,10,12,0.95) 48%, rgba(10,10,12,0.72) 70%, rgba(10,10,12,0.15) 100%);
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23F2F0F7'%3E%3Crect x='11' y='17' width='2' height='2' opacity='0.26'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='0.18'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='0.22'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='0.16'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='0.2'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='0.13'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='0.17'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='0.14'/%3E%3C/g%3E%3C/svg%3E");
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%2325252C'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%2325252C'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%2345454F'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%2345454F'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%231C1C22'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%231C1C22'/%3E%3C/svg%3E");
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%23FFFFFF' opacity='.045'/%3E%3C/svg%3E");
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%2324242C'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.75'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF5A1F'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%233EE8D2'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FFC93C'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23FF4FA3'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%238BE04A'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%234D8CE8'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%23FF8A3D'/%3E%3C/g%3E%3C/svg%3E");
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF5A1F'/%3E%3Crect x='8' width='8' height='4' fill='%23FFC93C'/%3E%3C/svg%3E");
}
:root[data-palette="ember"] {
--void: #0F0B08; --cab: #1C1410; --screen: #251A13; --screen-2: #30231A;
--line: #4A3427; --cream: #FBF3E8; --dim: #C4AB93;
--orange: #FF6A1A; --coin: #FFC048; --cyan: #4ECDC4; --magenta: #FF4D6D;
--btn-shadow: #B8400A;
--room-sky-top: #0F0B08; --room-sky-mid: #1E140D; --room-sky-low: #33200F;
--room-floor: #0C0805; --room-floor-hi: #241810;
--room-cab: #241811; --room-cab-edge: #5C3B2A;
--room-star: #FFE9C9;
--room-carpet-1: #1F1610; --room-carpet-2: #3A2718;
--room-slot: #0F0B08; --room-shadow: #140D08;
--room-screens: #FF6A1A,#FFC048,#FF4D6D,#FFE9C9,#4ECDC4,#E8873D,#C93B1E;
--room-invaders: #FF6A1A,#FFC048,#FF4D6D,#4ECDC4;
--room-bot-accent: #FF4D6D; --room-bot-edge: #FF6A1A; --room-bot-screen: #FFC048;
--hero-scrim: linear-gradient(100deg, #0F0B08 0%, rgba(15,11,8,0.94) 40%, rgba(15,11,8,0.45) 66%, rgba(15,11,8,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, #0F0B08 0%, rgba(15,11,8,0.95) 48%, rgba(15,11,8,0.72) 70%, rgba(15,11,8,0.15) 100%);
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23FFE9C9'%3E%3Crect x='11' y='17' width='2' height='2' opacity='0.2'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='0.14'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='0.17'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='0.12'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='0.15'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='0.1'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='0.13'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='0.11'/%3E%3C/g%3E%3C/svg%3E");
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%231F1610'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%231F1610'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%233A2718'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%233A2718'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%23191009'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%23191009'/%3E%3C/svg%3E");
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%23FFFFFF' opacity='.035'/%3E%3C/svg%3E");
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%23241811'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF6A1A'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%23FFC048'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FF4D6D'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23FFE9C9'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%234ECDC4'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%23E8873D'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%23C93B1E'/%3E%3C/g%3E%3C/svg%3E");
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF6A1A'/%3E%3Crect x='8' width='8' height='4' fill='%23FFC048'/%3E%3C/svg%3E");
}
:root[data-palette="midnight"] {
--void: #060B18; --cab: #0E1730; --screen: #142040; --screen-2: #1B2A52;
--line: #2A3D6B; --cream: #EEF3FF; --dim: #93A6CE;
--orange: #FF7A2F; --coin: #FFD24A; --cyan: #4DA6FF; --magenta: #FF4D8D;
--btn-shadow: #C4551A;
--room-sky-top: #060B18; --room-sky-mid: #0C1730; --room-sky-low: #16264D;
--room-floor: #050914; --room-floor-hi: #17264A;
--room-cab: #101B38; --room-cab-edge: #33487A;
--room-star: #DCE8FF;
--room-carpet-1: #0F1A36; --room-carpet-2: #23345E;
--room-slot: #060B18; --room-shadow: #060B18;
--room-screens: #FF7A2F,#4DA6FF,#FFD24A,#FF4D8D,#7FE3E0,#8BE04A,#B07CFF;
--room-invaders: #4DA6FF,#FF4D8D,#FFD24A,#7FE3E0;
--room-bot-accent: #FF4D8D; --room-bot-edge: #4DA6FF; --room-bot-screen: #FFD24A;
--hero-scrim: linear-gradient(100deg, #060B18 0%, rgba(6,11,24,0.94) 40%, rgba(6,11,24,0.45) 66%, rgba(6,11,24,0) 100%);
--hero-scrim-narrow: linear-gradient(to bottom, #060B18 0%, rgba(6,11,24,0.95) 48%, rgba(6,11,24,0.72) 70%, rgba(6,11,24,0.15) 100%);
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23DCE8FF'%3E%3Crect x='11' y='17' width='2' height='2' opacity='0.22'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='0.154'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='0.187'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='0.132'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='0.165'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='0.11'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='0.143'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='0.121'/%3E%3C/g%3E%3C/svg%3E");
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%230F1A36'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%230F1A36'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%2323345E'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%2323345E'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%230A1228'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%230A1228'/%3E%3C/svg%3E");
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%23FFFFFF' opacity='.03'/%3E%3C/svg%3E");
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%23101B38'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF7A2F'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%234DA6FF'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FFD24A'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23FF4D8D'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%237FE3E0'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%238BE04A'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%23B07CFF'/%3E%3C/g%3E%3C/svg%3E");
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF7A2F'/%3E%3Crect x='8' width='8' height='4' fill='%23FFD24A'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
overflow-x: clip; /* decorative bleed must not create a scrollbar */
}
body {
background: var(--void);
color: var(--cream);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
position: relative;
-webkit-font-smoothing: var(--font-smooth);
}
/* CRT scanlines + vignette over the whole room */
body::after {
content: "";
position: absolute; inset: 0;
pointer-events: none; z-index: 999;
background: var(--crt);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
::selection { background: var(--orange); color: var(--void); }
/* ---------- pixel primitives ---------- */
/* notched (stepped) corners — the arcade bevel */
.notch, .person-card, .fact, .belief, .tier, .step, .contact-panel,
.cab, .device, .mark-plate, .manifesto, .venues li, .next-up {
clip-path: polygon(
0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)),
calc(100% - var(--notch)) 100%,
var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
);
}
.wrap { width: min(1120px, 92vw); margin: 0 auto; }
/* ---------- typography ---------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.01em;
}
.domain-dot {
display: inline-block;
margin-inline: -0.08em;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 5rem); color: var(--cream); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); color: var(--cream); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); color: var(--cream); }
p { max-width: 62ch; }
p + p { margin-top: 1em; }
a { color: var(--link-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
.kicker {
font-family: var(--font-ui);
font-size: 0.7rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--coin);
margin-bottom: 0.9rem;
display: flex; align-items: center; gap: 0.6rem;
}
.kicker::before {
content: ""; width: 10px; height: 10px;
background: var(--orange);
box-shadow: 14px 0 0 var(--coin);
margin-right: 14px;
flex: none;
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--dim); margin-top: 1rem; }
/* Silkscreen is a bitmap face — it stays on short labels. Taglines are whole
sentences, so they keep the body face and earn their arcade tone from colour. */
.tag { color: var(--cyan); font-size: 1rem; }
.meta {
font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--dim); margin-top: 1.2rem;
}
.note {
font-family: var(--font-ui); font-size: 0.72rem; color: var(--dim);
border-left: var(--px) solid var(--orange); padding-left: 1rem;
}
/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s steps(6), transform 0.45s steps(6); }
.reveal.in { opacity: 1; transform: none; }
/* ---------- buttons: arcade buttons ---------- */
.btn {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.8rem; letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--orange); color: var(--void);
border: var(--px) solid var(--void);
box-shadow: 0 var(--px) 0 0 var(--btn-shadow), 0 calc(var(--px) * 2) 0 0 rgba(0,0,0,0.6);
padding: 0.95rem 1.5rem;
text-decoration: none;
cursor: pointer;
transition: transform 0.06s steps(2), box-shadow 0.06s steps(2), background 0.1s;
}
.btn:hover { background: var(--coin); color: var(--void); }
.btn:active {
transform: translateY(var(--px));
box-shadow: 0 0 0 0 var(--btn-shadow), 0 var(--px) 0 0 rgba(0,0,0,0.6);
}
.btn.ghost {
background: transparent; color: var(--cream);
border: var(--px) solid var(--line);
box-shadow: 0 var(--px) 0 0 rgba(0,0,0,0.6);
}
.btn.ghost:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(62,232,210,0.08); }
/* ---------- header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--cab);
border-bottom: var(--px) solid var(--line);
}
.site-header .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; padding: 0.85rem 0;
}
.logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--cream); }
.logo-badge {
width: 40px; height: 40px; flex: none;
background: var(--orange);
display: grid; place-items: center;
box-shadow: 0 var(--px) 0 0 var(--btn-shadow);
}
.logo-badge .hand { width: 22px; height: 22px; }
.logo-badge .hand rect { fill: var(--void); }
.logo:hover .logo-badge { background: var(--coin); }
/* Hand-drawn pixel wordmark. Pixelify Sans's "5" reads as an S or an 8 at
header size, which is fatal for a brand built on the number five — so the
lockup is drawn, not set. 52x9 source grid: keep rendered width a multiple
of 52 (104 = 2x) so the pixel grid stays even. */
.logo-text .wordmark {
display: block; width: 104px; height: auto;
image-rendering: pixelated;
}
.logo:hover .wordmark { filter: brightness(1.12); }
.logo-text small {
display: block; font-family: var(--font-ui);
font-size: 0.55rem; letter-spacing: 0.16em; color: var(--coin);
}
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
font-family: var(--font-ui); font-size: 0.72rem;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--dim); text-decoration: none;
}
.nav a:hover, .nav a[aria-current] { color: var(--cyan); }
.nav a.btn { color: var(--void); }
.nav a.btn:hover { color: var(--void); }
@media (max-width: 46rem) { .hide-sm { display: none; } .nav { gap: 1rem; } }
/* ---------- hero ---------- */
.hero {
position: relative; overflow: hidden;
padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
background: linear-gradient(to bottom, color-mix(in srgb, var(--void) 88%, var(--cyan)) 0%, var(--void) 100%);
border-bottom: var(--px) solid var(--line);
}
/* Only the homepage hero holds the arcade room, and only it gets the room's
height and scrim. Interior heroes stay the size of their content. */
.hero:has(.barfield) {
display: flex; align-items: center;
min-height: min(88vh, 780px);
}
/* scrim: the room is behind the copy, so the copy has to win */
.hero:has(.barfield)::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: var(--hero-scrim);
}
/* Narrow viewports have no room to the right, so the scrim turns vertical:
copy on darkness up top, the arcade visible along the bottom. */
@media (max-width: 52rem) {
.hero:has(.barfield) { align-items: flex-start; min-height: min(94vh, 700px); }
.hero:has(.barfield)::before {
background: var(--hero-scrim-narrow);
}
}
.hero .wrap { position: relative; z-index: 2; width: min(1120px, 92vw); }
.hero .lede { text-shadow: var(--lede-shadow); }
/* 20ch, not 16: the rotating word sits on its own line and "one-person
empires" has to fit there without breaking. At 16ch it wrapped inside
its own box and pushed the whole hero down two lines mid-rotation. */
.hero h1 { max-width: 20ch; text-shadow: var(--h1-shadow); }
.hero .rotator {
color: var(--accent-ink);
display: block; /* always its own line, so the line count is fixed */
white-space: nowrap; /* never break the phrase mid-rotation */
}
/* `both` matters: steps() lands on the final keyframe only at the very end, so
without a fill mode the word can sit at opacity 0 between swaps. */
.hero .rotator .word { display: inline-block; animation: wordin 0.28s steps(4) both; }
@keyframes wordin { from { opacity: 0.15; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }
.hero .lede { max-width: 54ch; }
@media (max-width: 48rem) {
.hero .rotator { white-space: normal; min-height: 2.1em; }
}
.hero-ctas { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.play-hint {
margin-top: 2rem;
font-family: var(--font-ui); font-size: 0.68rem;
letter-spacing: 0.06em; color: var(--coin);
animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.35; } }
/* the pixel arcade scene lives here (canvas injected by arcade.js) */
.barfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.barfield canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
image-rendering: pixelated;
opacity: 0.95;
}
/* the old watermark has no place in an arcade */
.hero-mark { display: none; }
/* ---------- marquee: now an LED ticker ---------- */
.marquee {
background: var(--cab);
border-top: var(--px) solid var(--line);
border-bottom: var(--px) solid var(--line);
overflow: hidden;
}
.marquee-track {
display: inline-flex; gap: 3rem; white-space: nowrap;
padding: 0.7rem 0;
font-family: var(--font-ui); font-size: 0.68rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--coin);
animation: marq 34s linear infinite;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; }
/* The ticker separator is the same invader that patrols the hero. An emoji
hand sat outside the pixel vocabulary entirely. Masked rather than an
![]()
so it takes the palette colour. */
.marquee-track b.sep {
display: inline-block; width: 15px; height: 11px; flex: none;
background: var(--accent-ink);
-webkit-mask: url("/assets/brand/invader.svg") center / contain no-repeat;
mask: url("/assets/brand/invader.svg") center / contain no-repeat;
}
@keyframes marq { to { transform: translateX(-50%); } }
/* =========================================================================
THE WORLD — the arcade doesn't stop at the hero
-------------------------------------------------------------------------
Every surface below the fold gets a texture from the same room: the
starfield overhead, the carpet underfoot, cabinet panelling on the walls,
and a lit skyline of cabinets along the horizon. All of it is pixel art
(inline SVG data URIs, integer grids) so it stays in the same medium as
the hero canvas rather than reading as generic web texture.
========================================================================= */
:root {
/* stars: 2px blocks on a 96px tile, low opacity — presence, not sparkle */
--tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='11' y='17' width='2' height='2' opacity='.20'/%3E%3Crect x='57' y='7' width='2' height='2' opacity='.13'/%3E%3Crect x='31' y='49' width='2' height='2' opacity='.17'/%3E%3Crect x='79' y='69' width='2' height='2' opacity='.11'/%3E%3Crect x='19' y='83' width='2' height='2' opacity='.15'/%3E%3Crect x='67' y='37' width='2' height='2' opacity='.09'/%3E%3Crect x='89' y='23' width='2' height='2' opacity='.12'/%3E%3Crect x='43' y='91' width='2' height='2' opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
/* the unreasonable carpet, same motif the hero canvas draws */
--tex-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='3' height='3' fill='%23241C40'/%3E%3Crect x='16' y='16' width='3' height='3' fill='%23241C40'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%233A2A5E'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%233A2A5E'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%231E1836'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%231E1836'/%3E%3C/svg%3E");
/* cabinet side panel: fine horizontal banding */
--tex-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='1' fill='%23FFFFFF' opacity='.03'/%3E%3C/svg%3E");
/* a lit row of cabinets, tiled along a horizon */
--tex-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg fill='%231E1A33'%3E%3Crect x='2' y='12' width='18' height='28'/%3E%3Crect x='24' y='6' width='14' height='34'/%3E%3Crect x='42' y='16' width='20' height='24'/%3E%3Crect x='66' y='9' width='16' height='31'/%3E%3Crect x='86' y='14' width='18' height='26'/%3E%3Crect x='108' y='4' width='14' height='36'/%3E%3Crect x='126' y='13' width='20' height='27'/%3E%3Crect x='150' y='8' width='8' height='32'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Crect x='5' y='16' width='12' height='8' fill='%23FF5A1F'/%3E%3Crect x='27' y='10' width='8' height='9' fill='%233EE8D2'/%3E%3Crect x='45' y='20' width='14' height='7' fill='%23FFC93C'/%3E%3Crect x='69' y='13' width='10' height='9' fill='%23FF4FA3'/%3E%3Crect x='89' y='18' width='12' height='8' fill='%238B6BFF'/%3E%3Crect x='111' y='8' width='8' height='9' fill='%234FD98A'/%3E%3Crect x='129' y='17' width='14' height='7' fill='%234D8CE8'/%3E%3C/g%3E%3C/svg%3E");
/* cabinet decal stripe */
--tex-decal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='8' height='4' fill='%23FF5A1F'/%3E%3Crect x='8' width='8' height='4' fill='%23FFC93C'/%3E%3C/svg%3E");
}
/* the sky is always overhead */
body { background-image: var(--tex-stars); background-attachment: fixed; }
/* ---------- sections ---------- */
.section { padding: var(--section) 0; position: relative; }
/* tinted bands are the carpet, lit from the horizon */
.section.tint {
background-color: color-mix(in srgb, var(--void) 92%, var(--cream));
background-image:
linear-gradient(to bottom, color-mix(in srgb, var(--magenta) 12%, transparent) 0, transparent 220px),
var(--tex-carpet);
border-top: var(--px) solid var(--line);
border-bottom: var(--px) solid var(--line);
}
/* light bands are a cabinet's side panel, with the decal stripe along the top */
.section.light {
background-color: var(--cab);
background-image: var(--tex-panel);
border-top: var(--px) solid var(--line);
border-bottom: var(--px) solid var(--line);
}
.section.light::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: var(--px);
background-image: var(--tex-decal);
background-size: 16px var(--px);
image-rendering: pixelated;
opacity: 0.85;
}
/* plain sections sit on the floor: a lit cabinet skyline along the bottom */
.section:not(.tint):not(.light)::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 40px; pointer-events: none;
background-image: var(--tex-skyline);
background-repeat: repeat-x;
background-position: bottom left;
image-rendering: pixelated;
opacity: var(--skyline-opacity);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
mask-image: linear-gradient(to bottom, transparent, #000 85%);
}
.section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); position: relative; }
.section-head .lede { max-width: 60ch; }
/* Every heading gets the lit strip off the top of a cabinet. Scoped away from
product pages carrying their own skin (``) — inside
those, their world wins. */
main:not([style*="--spine"]) .section-head h2 { display: inline-block; }
main:not([style*="--spine"]) .section-head h2::after {
content: ""; display: block;
height: var(--px); margin-top: 0.75rem;
background-image: var(--tex-decal);
background-size: 16px var(--px);
image-rendering: pixelated;
}
/* interior heroes get the same room: stars overhead, cabinets on the horizon */
.project-hero, .hero:not(:has(.barfield)) {
position: relative;
background-image:
linear-gradient(to bottom, rgba(139,107,255,0.07) 0, rgba(10,9,19,0) 60%),
var(--tex-stars);
}
.project-hero::after, .hero:not(:has(.barfield))::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 40px; pointer-events: none;
background-image: var(--tex-skyline);
background-repeat: repeat-x;
background-position: bottom left;
image-rendering: pixelated;
opacity: calc(var(--skyline-opacity) + 0.05);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 80%);
mask-image: linear-gradient(to bottom, transparent, #000 80%);
}
/* product pages that ship their own skin opt out — their world wins inside main */
main[style*="--spine"] .project-hero::after { opacity: 0.2; }
/* ---------- beliefs → HIGH SCORES table ---------- */
.beliefs { counter-reset: belief; display: grid; gap: var(--px); }
.belief {
counter-increment: belief;
display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem;
align-items: start;
background: var(--screen);
border: var(--px) solid var(--line);
padding: 1.5rem 1.6rem;
}
.belief::before {
content: counter(belief, decimal-leading-zero);
font-family: var(--font-display); font-weight: 700;
font-size: 2.2rem; line-height: 1;
color: var(--accent-ink);
}
.belief h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.belief p { color: var(--dim); font-size: 0.98rem; }
@media (max-width: 40rem) {
.belief { grid-template-columns: 1fr; gap: 0.6rem; }
}
/* ---------- cases → arcade cabinets ---------- */
.cases { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.case {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.case.flip .case-art { order: 2; }
/* the cabinet: a screen bezel around the product poster */
.case-art { position: relative; }
.case-art a { display: block; text-decoration: none; }
.case-art img {
display: block; width: 100%;
border: var(--px) solid var(--void);
outline: var(--px) solid var(--spine, var(--orange));
outline-offset: 0;
background: var(--screen);
box-shadow: 0 calc(var(--px) * 2) 0 0 rgba(0,0,0,0.7);
transition: transform 0.1s steps(2);
}
.case-art:hover img { transform: translate(0, calc(var(--px) * -1)); }
/* cabinet control panel under the screen */
.case-art::after {
content: "▶ INSERT COIN";
display: block;
margin-top: var(--px);
background: var(--cab);
border: var(--px) solid var(--void);
outline: var(--px) solid var(--spine, var(--orange));
font-family: var(--font-ui); font-size: 0.6rem;
letter-spacing: 0.1em; color: var(--coin);
text-align: center; padding: 0.55rem;
}
.case-art:hover::after { color: var(--void); background: var(--coin); }
.case-num {
display: block;
font-family: var(--font-ui); font-size: 0.62rem;
letter-spacing: 0.12em; color: var(--spine-bright, var(--accent-ink));
margin-bottom: 0.7rem;
}
.case-body h3 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.case-body h3 a { color: var(--cream); text-decoration: none; }
.case-body h3 a:hover { color: var(--accent-ink); }
.case-body .tag { display: block; margin: 0.5rem 0 0.9rem; }
.case-body p { color: var(--dim); font-size: 0.98rem; }
.case-body .go {
display: inline-block; margin-top: 1.1rem;
font-family: var(--font-ui); font-size: 0.7rem;
letter-spacing: 0.06em; color: var(--coin); text-decoration: none;
}
.case-body .go:hover { color: var(--accent-ink); }
@media (max-width: 52rem) {
.case, .case.flip { grid-template-columns: 1fr; }
.case.flip .case-art { order: 0; }
}
/* ---------- project pages ---------- */
.breadcrumb {
font-family: var(--font-ui); font-size: 0.65rem;
letter-spacing: 0.08em; color: var(--dim);
padding: 1rem 0;
}
.breadcrumb a { color: var(--cyan); text-decoration: none; }
.project-hero {
padding: clamp(2.5rem, 6vw, 5rem) 0;
border-bottom: var(--px) solid var(--line);
}
.project-hero h1 { color: var(--spine-bright, var(--cream)); }
.project-hero .tag { display: block; font-size: 1rem; margin-top: 1rem; }
.project-art { margin: 2.5rem 0 0.5rem; }
.project-art img {
width: 100%; display: block;
border: var(--px) solid var(--void);
outline: var(--px) solid var(--spine, var(--orange));
box-shadow: 0 calc(var(--px) * 2) 0 0 rgba(0,0,0,0.7);
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--px); margin: 2.5rem 0; }
.fact { background: var(--screen); border: var(--px) solid var(--line); padding: 1.1rem 1.2rem; }
.fact dt {
font-family: var(--font-ui); font-size: 0.58rem;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--coin);
margin-bottom: 0.35rem;
}
.fact dd { color: var(--cream); font-size: 0.98rem; }
.feature-list { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.5rem; }
.feature-list li { position: relative; padding-left: 1.7rem; color: var(--dim); }
.feature-list li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); }
/* ---------- team → PLAYER SELECT ---------- */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.team-grid .person-card { flex: 0 1 17rem; min-width: 14rem; }
.person-card {
background: var(--screen);
border: var(--px) solid var(--line);
padding: 1.6rem 1.4rem;
text-decoration: none; color: var(--cream);
display: block;
transition: transform 0.08s steps(2), border-color 0.1s;
}
.person-card:hover {
transform: translateY(calc(var(--px) * -1));
border-color: var(--orange);
color: var(--cream);
}
.person-card h3 { font-size: 1.35rem; }
.person-card p { color: var(--dim); font-size: 0.9rem; }
/* Portraits are real 48px rasters (assets/team/sprite/*.png), upscaled with
nearest-neighbour. Downsampling a 640px photo in the browser gives noise,
not pixel art — the low-res step has to happen before the upscale. */
.face, .profile .face {
width: 5rem; height: 5rem; display: block;
object-fit: cover;
image-rendering: pixelated;
filter: grayscale(1) contrast(1.3);
border: var(--px) solid var(--line);
margin-bottom: 1.1rem;
}
.person-card:hover .face { filter: none; border-color: var(--orange); }
.initials {
width: 5rem; height: 5rem; display: grid; place-items: center;
background: var(--orange); color: var(--void);
font-family: var(--font-display); font-size: 2rem; font-weight: 700;
margin-bottom: 1.1rem;
}
.role {
font-family: var(--font-ui); font-size: 0.6rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--coin); margin: 0.4rem 0 0.8rem;
}
.profile { padding: clamp(2rem, 5vw, 4rem) 0; }
.profile .face { width: 7rem; height: 7rem; }
.profile .bio p { color: var(--dim); margin-top: 1em; }
.vitals { display: grid; gap: var(--px); margin-top: 2.5rem; }
.vitals > div {
display: grid; grid-template-columns: 12rem 1fr; gap: 1rem;
background: var(--screen); border: var(--px) solid var(--line);
padding: 0.9rem 1.1rem;
}
.vitals dt {
font-family: var(--font-ui); font-size: 0.58rem;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--coin);
}
.vitals dd { color: var(--cream); font-size: 0.95rem; }
@media (max-width: 40rem) { .vitals > div { grid-template-columns: 1fr; gap: 0.2rem; } }
/* ---------- services: tiers & steps as power-ups ---------- */
/* House rule, no orphan cards: the four Rails Rescue tiers go 2x2, never 3+1. */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 44rem) { .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--screen); border: var(--px) solid var(--line); padding: 1.8rem 1.6rem; }
.tier.hot { border-color: var(--orange); }
.tier h3 { font-size: 1.4rem; }
.tier .price { font-family: var(--font-display); font-size: 2rem; color: var(--coin); margin: 0.5rem 0 1rem; }
.tier ul { list-style: none; display: grid; gap: 0.6rem; margin-top: 1rem; }
.tier ul li { position: relative; padding-left: 1.6rem; color: var(--dim); font-size: 0.94rem; }
.tier ul li::before { content: "+"; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
/* Five steps: centred flex so they land 3+2 rather than a 4+1 orphan. */
.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.step {
flex: 0 1 17rem; min-width: 14rem;
background: var(--screen); border: var(--px) solid var(--line); padding: 1.5rem 1.4rem;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--dim); font-size: 0.94rem; margin-top: 0.5rem; }
.fee-big { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 6rem); color: var(--accent-ink); line-height: 1; }
/* ---------- contact ---------- */
.contact-panel {
background: var(--screen);
border: var(--px) solid var(--line);
padding: clamp(1.8rem, 5vw, 3.2rem);
}
form.contact { display: grid; gap: 1.2rem; margin-top: 2rem; max-width: 34rem; }
form.contact label {
display: grid; gap: 0.5rem;
font-family: var(--font-ui); font-size: 0.62rem;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--coin);
}
form.contact input, form.contact textarea {
font-family: var(--font-body); font-size: 1rem;
background: var(--void); color: var(--cream);
border: var(--px) solid var(--line);
padding: 0.8rem 0.9rem;
}
form.contact input:focus, form.contact textarea:focus {
outline: none; border-color: var(--cyan);
}
form.contact button { justify-self: start; }
/* ---------- footer ---------- */
/* the back wall: carpet underfoot, decal stripe where the wall meets it */
.site-footer {
position: relative;
background-color: color-mix(in srgb, var(--void) 94%, var(--cream));
background-image: var(--tex-carpet);
border-top: var(--px) solid var(--line);
padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
}
.site-footer::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: var(--px);
background-image: var(--tex-decal);
background-size: 16px var(--px);
image-rendering: pixelated;
}
/* Brand + two link columns. The Products column was removed deliberately —
the products get their moment on /work/, and the footer stopped pointing at
them until they're further along. */
.foot-grid { display: grid; grid-template-columns: 1.8fr repeat(2, 1fr); gap: 2rem; }
.foot-brand p { color: var(--dim); font-size: 0.9rem; margin-top: 1rem; max-width: 28ch; }
.site-footer h4 {
font-family: var(--font-ui); font-size: 0.6rem;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--coin);
margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; display: grid; gap: 0.5rem; }
.site-footer ul a { color: var(--dim); text-decoration: none; font-size: 0.9rem; }
.site-footer ul a:hover { color: var(--cyan); }
.foot-legal {
margin-top: 3rem; padding-top: 1.5rem;
border-top: var(--px) solid var(--line);
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-family: var(--font-ui); font-size: 0.58rem;
letter-spacing: 0.06em; color: var(--dim);
}
@media (max-width: 46rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
/* =========================================================================
THINGS THAT FLY OFF THE SCREEN
========================================================================= */
.fx-spot { display: none; }
/* A coin knocked out of a block. Two elements: the wrapper does the arc, the
inner image does the spin — a scaleX flip stepped into four frames, because
a smooth squash reads as CSS and a stepped one reads as sprite animation. */
.fx-coin {
position: fixed; z-index: 998; pointer-events: none;
width: 24px; height: 24px; margin: -12px 0 0 -12px;
animation: coin-arc 0.75s steps(14) var(--delay, 0ms) forwards;
}
.fx-coin img {
display: block; width: 100%; height: 100%;
image-rendering: pixelated;
animation: coin-spin 0.24s steps(2) infinite;
}
@keyframes coin-arc {
0% { transform: translate(var(--dx, 0), 0) scale(0.7); opacity: 1; }
45% { transform: translate(var(--dx, 0), -62px) scale(1); opacity: 1; }
70% { transform: translate(var(--dx, 0), -70px) scale(1); opacity: 1; }
100% { transform: translate(var(--dx, 0), -16px) scale(1); opacity: 0; }
}
@keyframes coin-spin {
0% { transform: scaleX(1); }
25% { transform: scaleX(0.45); }
50% { transform: scaleX(0.12); }
75% { transform: scaleX(0.45); }
100% { transform: scaleX(1); }
}
/* high-five tokens: the five-bar mark, thrown */
.fx-token {
position: fixed; z-index: 998; pointer-events: none;
width: 18px; height: 16px; margin: -8px 0 0 -9px;
image-rendering: pixelated;
animation: token-fly 0.9s steps(10) forwards;
}
@keyframes token-fly {
to { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; }
}
.hf-toast {
position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(240%);
background: var(--orange); color: var(--void);
font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.06em;
padding: 0.7rem 1.1rem; z-index: 1000;
display: flex; align-items: center; gap: 0.5rem;
box-shadow: 0 var(--px) 0 0 var(--btn-shadow);
transition: transform 0.18s steps(3);
}
.hf-toast.show { transform: translateX(-50%) translateY(0); }
.hf-toast img { width: 14px; height: auto; image-rendering: pixelated; filter: brightness(0); }
/* sound toggle — an arcade cabinet switch, not a web control */
.sound-toggle {
font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.08em;
background: transparent; color: var(--dim);
border: var(--px) solid var(--line);
padding: 0.5rem 0.7rem; cursor: pointer;
white-space: nowrap;
transition: color 0.1s, border-color 0.1s;
}
.sound-toggle:hover { color: var(--coin); border-color: var(--coin); }
.sound-toggle[aria-pressed="true"] { color: var(--coin); }
@media (max-width: 34rem) { .sound-toggle { display: none; } }
/* the five bars wave when you hover the mark — ported from the print-shop
build, stepped instead of eased so it moves like a sprite */
.logo-badge .hand { overflow: visible; }
.logo-badge .hand rect { transform-origin: bottom; }
.logo-badge .hand.wave rect { animation: fingerwave 0.5s steps(4); }
.logo-badge .hand.wave rect:nth-child(2) { animation-delay: 0.05s; }
.logo-badge .hand.wave rect:nth-child(3) { animation-delay: 0.10s; }
.logo-badge .hand.wave rect:nth-child(4) { animation-delay: 0.15s; }
.logo-badge .hand.wave rect:nth-child(5) { animation-delay: 0.20s; }
@keyframes fingerwave {
0%, 100% { transform: scaleY(1); }
40% { transform: scaleY(0.55); }
70% { transform: scaleY(1.15); }
}
/* =========================================================================
Arcade-only components (homepage)
========================================================================= */
/* the coin-op strip under the hero */
.statusbar {
display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
font-family: var(--font-ui); font-size: 0.62rem;
letter-spacing: 0.08em; color: var(--dim);
padding: 1rem 0;
}
.statusbar b { color: var(--coin); }
/* Cabinet floor. Fixed column counts, not auto-fit: nine cabinets must land
3x3. auto-fit gives four columns at desktop and leaves a lone ninth —
house rule, no orphan cards. */
.cabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 62rem) { .cabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .cabs { grid-template-columns: 1fr; } }
/* A lone last cabinet (e.g. a 10th on a 3-wide floor) centers instead of
sitting as a left-aligned orphan — the house no-orphan rule. */
.cabs > .cab:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 62rem) { .cabs > .cab:last-child:nth-child(3n + 1) { grid-column: auto; } }
.cab {
background: var(--cab);
border: var(--px) solid var(--line);
padding: 0.9rem;
text-decoration: none; color: var(--cream);
display: grid; gap: 0.75rem;
transition: transform 0.08s steps(2), border-color 0.1s;
}
.cab:hover { transform: translateY(calc(var(--px) * -1)); border-color: var(--spine, var(--orange)); color: var(--cream); }
.cab-screen {
display: block; width: 100%;
border: var(--px) solid var(--void);
background: var(--screen);
}
.cab-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.cab-genre {
font-family: var(--font-ui); font-size: 0.55rem;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.cab-coin {
font-family: var(--font-ui); font-size: 0.55rem;
letter-spacing: 0.1em; color: var(--coin);
}
.cab:hover .cab-coin { color: var(--accent-ink); }
/* -------------------------------------------------------------------------
Screen glass — every panel gets faint scanlines, as if you're reading it
through a CRT. Must live at the END of the file: the component rules above
use the `background:` shorthand, which resets background-image to none.
------------------------------------------------------------------------- */
.person-card, .fact, .belief, .tier, .step, .contact-panel, .cab, .device,
.mark-plate, .manifesto, .venues li, .next-up {
background-image: repeating-linear-gradient(
to bottom, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px);
}
/* the glow a lit cabinet throws on whatever it's sitting on */
.cab:hover, .person-card:hover {
box-shadow: 0 0 0 var(--px) rgba(255,90,31,0.18), 0 calc(var(--px) * 2) 0 0 rgba(0,0,0,0.6);
}
/* -------------------------------------------------------------------------
Light palettes need the ink wordmark — the default is baked cream and
disappears on a cream header — and the cabinet screens need more opacity,
because low-alpha colour washes out against a light ground.
------------------------------------------------------------------------- */
:root[data-palette="day"] .logo-text .wordmark,
:root[data-palette="boardwalk"] .logo-text .wordmark {
content: url("/assets/brand/high5-wordmark-ink.svg");
}
:root[data-palette="day"] .play-hint,
:root[data-palette="boardwalk"] .play-hint { color: var(--magenta); }
:root[data-palette="day"] .kicker,
:root[data-palette="boardwalk"] .kicker { color: var(--magenta); }
:root[data-palette="day"] .hf-toast img,
:root[data-palette="boardwalk"] .hf-toast img { filter: none; }