/* ============================================================ BOLO2K — Colors & Type Retro tactical pixel-art system. Two worlds collide: 1) Classic Mac System 7 window chrome (greys, pinstripes, Chicago) 2) The pixel battlefield (CRT greens, brick reds, water cyans, hazard yellow) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&display=swap'); :root { /* ---------- BATTLEFIELD PALETTE (the game world) ---------- */ --bf-grass: #2faf3a; /* primary "grass" green tile */ --bf-grass-dark: #176b1e; /* shadowed grass, foliage, pillbox swamp */ --bf-grass-deep: #0b3d12; /* CRT phosphor / panel BG behind icons */ --bf-water: #4ec9ff; /* river / lake */ --bf-water-deep: #1f7fbf; /* deep water, ocean borders */ --bf-water-pebble: #0a3a6a; /* the speckle dots in water tiles */ --bf-brick: #c14a3a; /* pillbox brick red */ --bf-brick-dark: #6e1f17; /* mortar / shadowed brick */ --bf-road: #2c2c2c; /* asphalt */ --bf-road-line: #f4f4f4; /* dashed road markings */ --bf-sand: #d6a868; /* boat / crate / building roof */ --bf-sand-dark: #7a5a2c; /* shadow side of boat */ --bf-tree: #1f8a32; /* tree canopy */ --bf-tree-trunk: #6b3a14; --bf-hazard: #f4c020; /* yellow checker hazard */ --bf-hazard-dark: #1a1a1a; /* black checker hazard */ /* ---------- LOGO / BRAND GRADIENTS ---------- */ --logo-gold-top: #f6d24a; --logo-gold-mid: #d8c84a; --logo-green-mid: #6db04a; --logo-green-bot: #2c8a3a; --logo-orange-top: #f6a020; --logo-orange-mid: #ea5a1a; --logo-orange-bot: #b22a14; --logo-stroke: #0a0a0a; /* ---------- HUD / CRT ---------- */ --hud-bg: #000000; /* black HUD panel */ --hud-fg: #18ff5a; /* phosphor green text & bars */ --hud-fg-dim: #0a8a32; /* dim phosphor */ --hud-amber: #ffb000; /* alt phosphor */ --hud-red: #ff2a2a; /* alarm */ --hud-scan: rgba(0,0,0,0.18); /* scanline overlay */ /* ---------- MAC SYSTEM 7 CHROME ---------- */ --mac-window-bg: #c8c8c8; /* classic platinum grey */ --mac-window-edge: #ffffff; /* highlight edge */ --mac-window-shdw: #6e6e6e; /* shadow edge */ --mac-window-deep: #2a2a2a; /* outer 1px black border */ --mac-title-bar: #ffffff; /* title bar base */ --mac-title-line: #000000; /* the 6 horizontal pinstripes */ --mac-text: #000000; --mac-text-mute: #555555; --mac-divider: #888888; --mac-bevel-light: #f0f0f0; --mac-bevel-dark: #595959; /* ---------- SEMANTIC FG/BG ---------- */ --fg1: #0a0a0a; /* primary text on light chrome */ --fg2: #3a3a3a; /* secondary text */ --fg-inv: #f4f4f4; /* on dark HUD */ --fg-phosphor: var(--hud-fg); --bg1: var(--mac-window-bg); --bg2: #e2e2e2; --bg-canvas: #1a1a1a; /* page background — feels like a CRT room */ --bg-hud: var(--hud-bg); /* ---------- ACCENT / SEMANTIC STATUS ---------- */ --accent: var(--logo-orange-mid); /* the "2K" orange */ --accent-hot: #ff6a1f; --success: var(--hud-fg); --warning: var(--bf-hazard); --danger: var(--bf-brick); --info: var(--bf-water); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Press Start 2P', 'Silkscreen', monospace; /* chunky pixel headlines, like the logo */ --font-pixel: 'VT323', 'Silkscreen', monospace; /* HUD, news wire, body in-game */ --font-chrome: 'ChicagoFLF', 'Charcoal', 'Helvetica Neue', system-ui, sans-serif; /* Mac window chrome */ --font-mono: 'Silkscreen', 'VT323', ui-monospace, monospace; /* ---------- TYPE SCALE ---------- Pixel fonts hate sub-pixels. All sizes use even px values and integer line-heights to keep glyphs crisp. */ --t-display: 56px; /* hero / splash */ --t-h1: 40px; --t-h2: 28px; --t-h3: 20px; --t-body: 20px; /* VT323 reads small; we go big */ --t-small: 16px; --t-tiny: 12px; --t-chrome: 14px; /* Mac window titles / menu items */ /* ---------- SPACING (8px tile grid) ---------- */ --tile: 8px; --s-0: 0; --s-1: 4px; --s-2: 8px; /* 1 tile */ --s-3: 12px; --s-4: 16px; /* 2 tiles */ --s-5: 24px; /* 3 tiles */ --s-6: 32px; /* 4 tiles */ --s-8: 48px; --s-10: 64px; --s-12: 96px; /* ---------- BORDERS / RADII ---------- Pixel art = NO rounded corners on world elements. Mac chrome = exactly 0px or hand-drawn 1-2px corners. Modern shell elements get 0–4px max. */ --r-0: 0; --r-1: 2px; /* subtle, used sparingly */ --r-2: 4px; --b-thin: 1px solid var(--mac-window-deep); --b-mac: 1px solid #000; /* hard 1px — never anti-aliased */ /* ---------- ELEVATION ---------- Drop shadows are HARD-EDGED pixel offsets, never blurred. */ --sh-tile: 2px 2px 0 0 rgba(0,0,0,0.6); /* pixel drop on tiles */ --sh-panel: 4px 4px 0 0 #000; /* hard 4px panel shadow */ --sh-bevel-out: /* outset bevel (like Mac button) */ inset 1px 1px 0 var(--mac-bevel-light), inset -1px -1px 0 var(--mac-bevel-dark); --sh-bevel-in: /* inset well */ inset 1px 1px 0 var(--mac-bevel-dark), inset -1px -1px 0 var(--mac-bevel-light); --sh-crt: /* the HUD glow */ 0 0 0 1px #000, 0 0 12px rgba(24,255,90,0.25); /* ---------- MOTION ---------- Bolo is snappy. No easing curves; step transitions feel right. */ --ease-step: steps(4, end); --ease-step-fine: steps(8, end); --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1); --dur-tap: 80ms; --dur-snap: 160ms; --dur-cycle: 320ms; } /* ============================================================ SEMANTIC TYPE STYLES Use class= or apply via tag in normalized contexts. ============================================================ */ .font-display { font-family: var(--font-display); } .font-pixel { font-family: var(--font-pixel); } .font-chrome { font-family: var(--font-chrome); } .font-mono { font-family: var(--font-mono); } .t-display, h1.display { font-family: var(--font-display); font-size: var(--t-display); line-height: 1.1; letter-spacing: 0.02em; color: var(--fg1); text-transform: uppercase; } h1, .t-h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } h2, .t-h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } h3, .t-h3 { font-family: var(--font-pixel); font-size: var(--t-h3); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } p, .t-body { font-family: var(--font-pixel); font-size: var(--t-body); line-height: 1.25; margin: 0; } .t-small { font-family: var(--font-pixel); font-size: var(--t-small); line-height: 1.2; } .t-tiny { font-family: var(--font-pixel); font-size: var(--t-tiny); line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; } .t-chrome { font-family: var(--font-chrome); font-size: var(--t-chrome); line-height: 1.2; } code, .t-code { font-family: var(--font-mono); font-size: var(--t-small); } /* The pixel HUD text — phosphor green on black */ .t-hud { font-family: var(--font-pixel); font-size: var(--t-body); color: var(--fg-phosphor); text-shadow: 0 0 4px rgba(24,255,90,0.6); letter-spacing: 0.04em; } /* News wire: monospace caption strip */ .t-wire { font-family: var(--font-pixel); font-size: 22px; line-height: 1.1; color: #f4f4f4; letter-spacing: 0.02em; } /* All pixel-art images / canvases must use this to disable AA */ .pixelated, img.pixel, canvas.pixel { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; }