/* ============================================================ BYTE BLAST — Design Tokens & Base Styles 8-bit arcade meets modern SaaS. Hard edges, frame-stepped motion. ============================================================ */ :root { /* PALETTE — pulled from logo */ --bb-bg: #07091a; /* near-black */ --bb-navy: #0d1330; /* deep navy field */ --bb-navy-2: #141d4a; /* card navy */ --bb-navy-3: #1d2a6b; /* hover/raise */ --bb-line: #243169; /* hairline */ --bb-cyan: #5be7ff; /* primary accent — debris cyan */ --bb-cyan-2: #1e9fcc; /* deep cyan */ --bb-cyan-dim: #2a6a86; /* muted cyan */ --bb-amber: #ffb627; /* comet/CTA */ --bb-amber-2: #ff8a1e; --bb-magenta: #ff5e8a; /* used very sparingly */ --bb-paper: #eef3ff; --bb-paper-2: #c5cfee; --bb-mute: #7f8bb8; /* TYPE */ --bb-display: 'Press Start 2P', 'VT323', monospace; --bb-body: 'Satoshi', system-ui, -apple-system, sans-serif; --bb-mono: 'JetBrains Mono', ui-monospace, monospace; /* RHYTHM */ --bb-px: 4px; /* base pixel grid unit */ --bb-shadow: 6px 6px 0 0 #000; /* solid offset block */ --bb-shadow-cy: 6px 6px 0 0 var(--bb-cyan-2); --bb-shadow-am: 6px 6px 0 0 var(--bb-amber); /* SCANLINE */ --scanline-opacity: 0.08; } /* Palette swap classes — applied on */ html.palette-classic { --bb-bg:#07091a; --bb-navy:#0d1330; --bb-navy-2:#141d4a; --bb-cyan:#5be7ff; --bb-cyan-2:#1e9fcc; --bb-amber:#ffb627; } html.palette-magenta { --bb-bg:#0a0716; --bb-navy:#160d2e; --bb-navy-2:#241544; --bb-cyan:#ff5e8a; --bb-cyan-2:#c0307a; --bb-amber:#ffb627; } html.palette-amber { --bb-bg:#0a0a06; --bb-navy:#1a1608; --bb-navy-2:#2a2210; --bb-cyan:#ffb627; --bb-cyan-2:#c2790c; --bb-amber:#ff5e8a; } html.palette-phosphor { --bb-bg:#040a06; --bb-navy:#0a160e; --bb-navy-2:#0f2716; --bb-cyan:#5cff9e; --bb-cyan-2:#2da062; --bb-amber:#5be7ff; } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bb-bg); color: var(--bb-paper); } body { font-family: var(--bb-body); font-weight: 450; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; background: var(--bb-bg); overflow-x: hidden; text-wrap: pretty; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ::selection { background: var(--bb-cyan); color: #000; } /* ============================================================ TYPOGRAPHY ============================================================ */ .bb-display { font-family: var(--bb-display); font-weight: 400; letter-spacing: 0.02em; line-height: 1.3; text-transform: uppercase; } .bb-mono { font-family: var(--bb-mono); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; } /* Pixel font swap — loaded into html[data-pixel-font] */ html[data-pixel-font="vt323"] { --bb-display: 'VT323', monospace; } html[data-pixel-font="silkscreen"] { --bb-display: 'Silkscreen', monospace; } html[data-pixel-font="presstart"] { --bb-display: 'Press Start 2P', monospace; } /* VT323 needs a size bump to read at the same level */ html[data-pixel-font="vt323"] .bb-display { letter-spacing: 0.04em; } /* ============================================================ LAYOUT ============================================================ */ .bb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .bb-wrap { padding: 0 40px; } } .bb-section { position: relative; padding: 96px 0; border-top: 2px solid var(--bb-line); } @media (max-width: 720px) { .bb-section { padding: 64px 0; } } .bb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bb-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--bb-cyan); text-transform: uppercase; margin-bottom: 24px; } .bb-eyebrow::before { content: ''; width: 10px; height: 10px; background: var(--bb-cyan); box-shadow: -4px 0 0 var(--bb-cyan), 4px 0 0 var(--bb-cyan), 0 -4px 0 var(--bb-cyan), 0 4px 0 var(--bb-cyan); margin-left: 6px; } /* ============================================================ PIXEL CHROME — buttons, cards, frames ============================================================ */ .bb-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 24px; font-family: var(--bb-display); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bb-amber); color: #1a0d00; border: 3px solid #000; box-shadow: 6px 6px 0 0 #000; position: relative; transition: transform 80ms steps(2), box-shadow 80ms steps(2), background 80ms steps(2); } .bb-btn:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 0 #000; background: var(--bb-amber-2); } .bb-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 0 #000; } .bb-btn--cyan { background: var(--bb-cyan); color: #001620; } .bb-btn--cyan:hover { background: #92f1ff; } .bb-btn--ghost { background: transparent; color: var(--bb-paper); border-color: var(--bb-paper); box-shadow: 6px 6px 0 0 var(--bb-cyan-2); } /* Pixel card — solid offset shadow, hard edges */ .bb-card { background: var(--bb-navy-2); border: 2px solid var(--bb-line); position: relative; box-shadow: 6px 6px 0 0 #000; } /* ============================================================ SCANLINES + CRT ============================================================ */ .bb-scanlines::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0, var(--scanline-opacity)) 0px, rgba(0,0,0, var(--scanline-opacity)) 1px, transparent 1px, transparent 3px ); mix-blend-mode: multiply; z-index: 5; } /* CRT mode — applied to : scanlines on whole page + subtle vignette */ html.crt-mode body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%); z-index: 9999; mix-blend-mode: multiply; } html.crt-mode body { filter: contrast(1.05) saturate(1.1); } /* ============================================================ PIXEL ART HELPERS ============================================================ */ .pixelated, img.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; } /* CRT bezel — for project screenshots */ .crt-bezel { background: #1a1a1a; border: 3px solid #000; padding: 14px; box-shadow: inset 0 0 0 2px #2a2a2a, inset 0 0 0 4px #0a0a0a, 6px 6px 0 0 var(--bb-cyan-2); position: relative; } .crt-bezel::before { content: ''; position: absolute; top: 6px; right: 18px; width: 8px; height: 8px; background: #ff3333; box-shadow: 0 0 8px #ff3333; } .crt-bezel::after { content: 'POWER'; position: absolute; bottom: 4px; right: 18px; font-family: var(--bb-mono); font-size: 8px; letter-spacing: 0.2em; color: #555; } .crt-bezel-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #050a18; } .crt-bezel-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px); } /* ============================================================ GLITCH HOVER — text effect for nav / link interactions ============================================================ */ .bb-glitch { position: relative; display: inline-block; } .bb-glitch:hover { animation: bb-glitch 240ms steps(3) 1; } @keyframes bb-glitch { 0% { transform: translate(0,0); color: var(--bb-paper); } 33% { transform: translate(-2px, 1px); color: var(--bb-cyan); } 66% { transform: translate(2px, -1px); color: var(--bb-amber); } 100% { transform: translate(0,0); color: var(--bb-paper); } } /* Frame-stepped fadein for cards entering view */ @keyframes bb-pop { 0% { transform: translate(8px, 8px); opacity: 0; } 50% { transform: translate(4px, 4px); opacity: 0.5; } 100% { transform: translate(0,0); opacity: 1; } } .bb-pop { animation: bb-pop 320ms steps(4) both; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ NAV ============================================================ */ .bb-nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(7, 9, 26, 0.78); border-bottom: 2px solid var(--bb-line); } .bb-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1240px; margin: 0 auto; } @media (min-width: 768px) { .bb-nav-inner { padding: 14px 40px; } } .bb-brand { display: flex; align-items: center; gap: 12px; font-family: var(--bb-display); font-size: 14px; color: var(--bb-paper); } .bb-brand img { width: 40px; height: 40px; } .bb-nav-links { display: none; gap: 28px; font-family: var(--bb-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bb-paper-2); } @media (min-width: 880px) { .bb-nav-links { display: flex; } } .bb-nav-links a:hover { color: var(--bb-cyan); } /* ============================================================ FOOTER ============================================================ */ .bb-footer { border-top: 2px solid var(--bb-line); padding: 40px 0; text-align: center; color: var(--bb-mute); font-family: var(--bb-mono); font-size: 11px; letter-spacing: 0.16em; } /* ============================================================ UTILS ============================================================ */ .bb-grid { display: grid; gap: 24px; } .bb-flex { display: flex; } .bb-stack { display: flex; flex-direction: column; gap: 16px; } .text-cyan { color: var(--bb-cyan); } .text-amber { color: var(--bb-amber); } .text-mute { color: var(--bb-mute); } .bb-divider { height: 4px; background: repeating-linear-gradient(to right, var(--bb-cyan-2) 0 8px, transparent 8px 16px); border: 0; margin: 0; } /* Big section heading */ .bb-section-title { font-family: var(--bb-display); font-size: clamp(20px, 3.4vw, 32px); line-height: 1.25; color: var(--bb-paper); margin-bottom: 18px; text-shadow: 4px 4px 0 #000; } .bb-section-lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--bb-paper-2); max-width: 64ch; line-height: 1.6; }