/* ============================================================================ ISEEMONSTERZ — Foundations: Color + Type LIVE DAWLESS TECHNO · CRT / glitch / chromatic-aberration aesthetic Import this file, then use the CSS vars + utility classes below. ---------------------------------------------------------------------------- Fonts (all self-hosted in fonts/ — no external CDN, GDPR-clean): Monzane → BRAND DISPLAY (.otf) + Slant oblique Archivo → body / running text (woff2, fonts/google/) Space Mono → machine / terminal voice: labels, metadata (woff2, fonts/google/) ========================================================================== */ /* Self-hosted webfonts — no request to Google at runtime (GDPR-clean). Archivo + Space Mono live in fonts/google/, defined in fonts/google-fonts.css */ /* google-fonts.css is now linked directly in the HTML (parallel load). */ @font-face { font-family: 'Monzane'; src: url('fonts/Monzane-1GKxv.otf') format('opentype'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Monzane Slant'; src: url('fonts/MonzaneSlant-Rp6WE.otf') format('opentype'); font-weight: 400 900; font-style: normal; font-display: swap; } :root { /* ---- CORE PALETTE ------------------------------------------------------- Built from the cover art: deep void, indigo machine-room dark, and the three glitch channels (R / G / B) that split apart under CRT aberration. */ /* Void + structural darks (cool, blue-biased blacks) */ --void: #050409; /* the absolute back of the room */ --bg: #0a0813; /* default page background */ --surface-1: #100c1e; /* raised panel */ --surface-2: #17122b; /* card / module */ --indigo-deep: #1a1340; /* the saturated navy of "Tool for Creating Universes" */ --hairline: #2a2348; /* borders, dividers, scanline base */ --hairline-2: #3a3260; /* stronger border */ /* Foreground / text (slightly cool off-white, never pure white) */ --fg: #ecebf4; /* primary text */ --fg-1: #b8b4cc; /* secondary text */ --fg-2: #7d7896; /* tertiary / metadata */ --fg-3: #4f4a68; /* disabled / faint */ /* ---- GLITCH CHANNELS (the brand accents) ------------------------------- */ --chroma-red: #ff2a3a; /* phosphor red — the loudest signal */ --chroma-red-dim:#a01622; --chroma-grn: #38f08a; /* CRT phosphor green — "LIVE" / go / online */ --chroma-grn-dim:#1c8a4e; --chroma-cyan: #28d4ff; /* blue channel split / link / cool highlight */ --chroma-cyan-dim:#1574a0; --chroma-mag: #d62aff; /* violet/magenta bleed */ --acid: #c8ff00; /* rare toxic-yellow accent, use sparingly */ /* Semantic roles */ --accent: var(--chroma-red); /* primary brand accent */ --accent-live: var(--chroma-grn); /* "LIVE", online, success */ --link: var(--chroma-cyan); --danger: var(--chroma-red); --warning: var(--acid); /* ---- TYPE SCALE (fluid-ish, fixed steps) ------------------------------- */ --font-display: 'Monzane', 'Archivo', 'Arial Narrow', sans-serif; --font-display-slant: 'Monzane Slant', 'Monzane', sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --font-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace; --fs-mega: clamp(56px, 11vw, 148px); /* @kind font */ /* hero / poster name */ --fs-h1: clamp(40px, 6vw, 76px); /* @kind font */ --fs-h2: clamp(30px, 4vw, 46px); /* @kind font */ --fs-h3: 28px; --fs-h4: 21px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-micro: 10.5px; /* mono labels / catalog numbers */ --lh-tight: 0.92; /* @kind font */ --lh-snug: 1.12; /* @kind font */ --lh-body: 1.55; /* @kind font */ --tracking-mega: -0.03em; --tracking-tight: -0.01em; --tracking-label: 0.22em; /* the wide-tracked mono label, a core motif */ /* ---- SPACING (4px base grid) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- RADII — hard machine edges. Almost nothing is rounded. ------------ */ --radius-0: 0px; /* default: sharp corners */ --radius-1: 2px; /* the most rounding we ever allow */ --radius-pill: 999px; /* only follow-buttons / tags, bandcamp-style */ /* ---- ELEVATION — no soft drop shadows. Glow + offset blocks instead. --- */ --glow-red: 0 0 0 1px var(--chroma-red), 0 0 24px -4px var(--chroma-red); --glow-grn: 0 0 0 1px var(--chroma-grn), 0 0 24px -4px var(--chroma-grn); --glow-cyan: 0 0 0 1px var(--chroma-cyan), 0 0 24px -4px var(--chroma-cyan); --shadow-block: 6px 6px 0 0 var(--void); /* hard offset, no blur */ } /* ============================================================================ SEMANTIC ELEMENT STYLES ========================================================================== */ .t-mega { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-mega); line-height: var(--lh-tight); letter-spacing: var(--tracking-mega); text-transform: uppercase; color: var(--fg); } h1, .t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--fg); } h2, .t-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--tracking-tight); color: var(--fg); } h3, .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; color: var(--fg); } h4, .t-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.25; color: var(--fg); } p, .t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); } .t-sm { font-size: var(--fs-sm); line-height: 1.5; } .t-dim { color: var(--fg-2); } /* The wide-tracked mono label — the single most recognizable text motif. */ .t-label, .label { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-2); } /* Catalog numbers, timecodes, metadata, tracklists */ .t-meta, code, .mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--fg-1); } a, .link { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================================ SIGNATURE TEXTURE UTILITIES — the glitch toolkit ========================================================================== */ /* CRT scanlines: fine dark horizontal lines over content. Overlay on anything. */ .crt-scanlines { position: relative; } .crt-scanlines::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px, rgba(0,0,0,0.28) 4px ); mix-blend-mode: multiply; } /* RGB phosphor sub-pixel grid (the colored dot texture in the cover art). */ .phosphor { background-image: repeating-linear-gradient(90deg, rgba(255,0,60,0.10) 0px, rgba(255,0,60,0.10) 1px, rgba(0,255,120,0.10) 1px, rgba(0,255,120,0.10) 2px, rgba(40,160,255,0.10) 2px, rgba(40,160,255,0.10) 3px); background-size: 3px 100%; } /* Chromatic-aberration text: red/cyan channel split via stacked shadows. */ .chroma-text { text-shadow: -2px 0 0 var(--chroma-red), 2px 0 0 var(--chroma-cyan); } .chroma-text--wide { text-shadow: -3px 0 0 rgba(255,42,58,0.9), 3px 0 0 rgba(40,212,255,0.9), 0 2px 0 rgba(56,240,138,0.5); } /* Hard offset "block" shadow for cards / buttons (no blur). */ .block-shadow { box-shadow: var(--shadow-block); } /* A glitch keyframe you can attach to hovered / active elements. */ @keyframes chroma-jitter { 0%, 92%, 100% { transform: translate(0,0); text-shadow: -2px 0 var(--chroma-red), 2px 0 var(--chroma-cyan); } 93% { transform: translate(-1px, 1px); text-shadow: -3px 0 var(--chroma-red), 3px 0 var(--chroma-cyan); } 95% { transform: translate(2px, -1px); text-shadow: 2px 0 var(--chroma-red), -2px 0 var(--chroma-cyan); } 97% { transform: translate(-1px, 0); text-shadow: -4px 0 var(--chroma-red), 1px 0 var(--chroma-cyan); } } @media (prefers-reduced-motion: no-preference) { .glitch-hover:hover { animation: chroma-jitter 1.2s steps(1) infinite; } } /* Page baseline */ .is-page { background: var(--bg); color: var(--fg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }