/* ============================================================ Neon Slice Tokyo — colors_and_type.css Tokyo basement, magenta + cyan on black lacquer. ============================================================ */ /* ---------- FONTS ---------- Display: Anton (fat condensed sans, the wordmark workhorse) Display alt: Bebas Neue (signage / numerics) Body: Space Grotesk (geometric, slightly tech) Mono: JetBrains Mono (receipts, prices, timer) Katakana: Stick (Google Fonts; bold katakana display) ----------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;700&family=Stick&display=swap'); :root { /* ---------- CORE NEON PALETTE ---------- */ --ink: #07060A; /* lacquered black; the everything-background */ --ink-2: #11101A; /* slightly raised black, panels */ --ink-3: #1B1A26; /* card surface */ --ink-line: #2A2836; /* hairline borders on dark */ --magenta: #FF1F8F; /* primary neon — signage, CTAs */ --magenta-glow: #FF4FA8; /* highlight on magenta */ --magenta-deep: #B8005C; /* pressed / lower neon */ --cyan: #00F0FF; /* secondary neon — accents, katakana */ --cyan-glow: #6BF7FF; --cyan-deep: #008C99; --acid: #D8FF3C; /* tertiary pop — sale tags, "HOT" stamps */ --blood: #FF3B30; /* warnings, "SOLD OUT", chili pepper */ /* ---------- NEUTRALS (on dark) ---------- */ --bone: #F4EFE6; /* off-white text on ink (slight warmth) */ --bone-2: #C9C2B5; /* secondary text */ --bone-3: #7E7869; /* tertiary / metadata */ --steel: #4A4856; /* disabled, dividers */ /* ---------- SURFACE TOKENS ---------- */ --bg: var(--ink); --bg-raised: var(--ink-2); --bg-card: var(--ink-3); --border: var(--ink-line); --border-strong: var(--magenta); /* ---------- TEXT TOKENS ---------- */ --fg-1: var(--bone); --fg-2: var(--bone-2); --fg-3: var(--bone-3); --fg-disabled: var(--steel); --fg-accent: var(--magenta); --fg-accent-2: var(--cyan); /* ---------- SEMANTIC ---------- */ --success: var(--acid); --danger: var(--blood); --warning: #FFB400; --info: var(--cyan); /* ---------- TYPOGRAPHY ---------- */ --font-display: 'Anton', 'Impact', 'Helvetica Neue', sans-serif; --font-sign: 'Bebas Neue', 'Anton', 'Impact', sans-serif; --font-body: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menounos, monospace; --font-kana: 'Stick', 'Hiragino Sans', 'Yu Gothic', sans-serif; /* type scale — built around shouty wordmarks + small body */ --t-display-xl: clamp(72px, 12vw, 200px); --t-display-l: clamp(56px, 8vw, 120px); --t-display: clamp(40px, 6vw, 72px); --t-h1: 48px; --t-h2: 32px; --t-h3: 22px; --t-body: 16px; --t-small: 13px; --t-micro: 11px; --lh-display: 0.85; --lh-tight: 1.05; --lh-body: 1.45; --ls-display: -0.02em; --ls-caps: 0.08em; --ls-kana: 0.04em; /* ---------- SPACING (8pt base, but tight) ---------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- RADIUS ---------- */ /* The brand is sharp. Radii are mostly 0. Pills are extreme. */ --r-0: 0; --r-sm: 2px; /* hairline softening, basically still sharp */ --r-md: 4px; --r-pill: 999px; /* ---------- SHADOWS / GLOWS ---------- */ /* Glow is the brand. */ --glow-magenta-sm: 0 0 6px rgba(255,31,143,.65), 0 0 14px rgba(255,31,143,.35); --glow-magenta: 0 0 10px rgba(255,31,143,.85), 0 0 28px rgba(255,31,143,.55), 0 0 64px rgba(255,31,143,.25); --glow-magenta-lg: 0 0 14px rgba(255,31,143,1), 0 0 38px rgba(255,31,143,.7), 0 0 96px rgba(255,31,143,.35); --glow-cyan-sm: 0 0 6px rgba(0,240,255,.65), 0 0 14px rgba(0,240,255,.35); --glow-cyan: 0 0 10px rgba(0,240,255,.85), 0 0 28px rgba(0,240,255,.55), 0 0 64px rgba(0,240,255,.25); --glow-acid: 0 0 8px rgba(216,255,60,.7), 0 0 22px rgba(216,255,60,.4); /* drop shadows on dark for cards */ --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.55); --shadow-deep: 0 24px 60px rgba(0,0,0,.7); /* ---------- MOTION ---------- */ --ease-snap: cubic-bezier(.2,.9,.2,1); --ease-flicker: steps(3, end); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, .h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0; } h3, .h3 { font-family: var(--font-sign); font-size: var(--t-h3); line-height: var(--lh-tight); letter-spacing: var(--ls-caps); text-transform: uppercase; margin: 0; } p { margin: 0 0 var(--s-4); color: var(--fg-2); } .kana { font-family: var(--font-kana); letter-spacing: var(--ls-kana); color: var(--cyan); } .eyebrow { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3); } .price, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } code, pre, .mono { font-family: var(--font-mono); font-size: var(--t-small); } /* Reusable neon utilities */ .neon-magenta { color: var(--magenta); text-shadow: var(--glow-magenta); } .neon-cyan { color: var(--cyan); text-shadow: var(--glow-cyan); } .neon-acid { color: var(--acid); text-shadow: var(--glow-acid); } /* The grime — subtle scanline / noise overlay you can drop on a hero */ .grime::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }