/* ========================================================================= DR. BANANA CLUB — Design Tokens Colors + Typography ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Archivo+Narrow:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500;600&display=swap'); /* Bubble display font (Dr. Banana logo + headline treatment). Bowlby One One (Google Fonts) is the closest open-source match to the hand-drawn bubble lettering on the physical logo — very round, single weight, heavy stroke, stacked counters. Flagged for user review. */ @import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap'); :root { /* ---------- LIGHT (EDITORIAL / DAY) ---------- */ --db-paper: #EFEBE1; /* ground */ --db-cream: #F7F3EA; /* elevated card */ --db-ink: #0A0908; /* primary text */ --db-ink-2: #1E1B15; /* body text */ --db-graphite: #54504A; /* secondary / meta */ --db-silver: #9C978F; /* muted / kicker */ --db-hairline: #D9D3C4; /* borders, dividers */ /* ---------- DARK (OPERATIVE / NIGHT) ---------- */ --db-d-bg: #0F0D0A; --db-d-surface: #1A1814; --db-d-elevated: #232017; --db-d-ink: #E8E3D5; --db-d-ink-2: #C4BFB0; --db-d-graphite: #8A8578; --db-d-silver: #5E5A52; --db-d-hairline: #2A2622; --db-d-hairline-2:#3A3530; /* ---------- ACCENT ---------- */ --db-acid: #D4FF3A; /* retroreflective, ambient-independent */ --db-banana: #F7DC1E; /* logo fill */ /* ---------- KELVIN SCALE (Drop 1.0 editorial palette) ---------- Color-temperature progression from high-pressure sodium to deep blue sky. Used on posters, tickets, event artwork, the Node stage pulse — NOT on buttons, chrome, or UI state. Acid yellow remains the sole UI accent. The warm end (1500–4500K) is the club at night; the cool end (5000–9000K) is the morning after. */ --db-k1500: #FF6100; /* high-pressure sodium */ --db-k2000: #FF8B16; /* candle */ --db-k2500: #FFAB60; /* sunrise / sunset */ --db-k3000: #FFC48D; /* tungsten / halogen */ --db-k3500: #FFD9B4; /* 100W incandescent */ --db-k4000: #FFEAD0; /* late afternoon sun */ --db-k4500: #FFF9E9; /* cool white fluorescent */ --db-k5000: #F5F9FF; /* horizon daylight */ --db-k5500: #EBF2FF; /* direct summer sun */ --db-k6000: #E2EDFF; /* high noon */ --db-k6500: #D8E7FF; /* overcast — D65 */ --db-k7000: #D0E1FF; /* deep shade */ --db-k8000: #C2D8FF; /* hazy blue sky */ --db-k9000: #B8D0FF; /* blue sky light */ /* semantic aliases */ --db-k-sodium: var(--db-k1500); --db-k-candle: var(--db-k2000); --db-k-tungsten: var(--db-k3000); --db-k-paper: var(--db-k4000); --db-k-daylight: var(--db-k5000); --db-k-overcast: var(--db-k6500); --db-k-shade: var(--db-k9000); /* signature gradient — drop 1.0 poster / ticket bleed */ --db-k-gradient: linear-gradient( 90deg, #FF6100 0%, #FF8B16 10%, #FFAB60 20%, #FFC48D 28%, #FFD9B4 36%, #FFEAD0 44%, #FFF9E9 50%, #F5F9FF 55%, #EBF2FF 62%, #D8E7FF 72%, #C2D8FF 84%, #B8D0FF 100% ); /* ---------- SEMANTIC ---------- */ --fg1: var(--db-ink); --fg2: var(--db-ink-2); --fg3: var(--db-graphite); --fg4: var(--db-silver); --bg1: var(--db-paper); --bg2: var(--db-cream); --border: var(--db-hairline); --accent: var(--db-acid); /* ---------- TYPE FAMILIES ---------- */ --font-sans: 'Archivo', system-ui, sans-serif; --font-sans-narrow: 'Archivo Narrow', 'Archivo', sans-serif; --font-serif-italic: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --font-bubble: 'Bowlby One', 'Archivo Narrow', sans-serif; /* ---------- TYPE SCALE ---------- */ --fs-mono: 11px; --fs-caption: 13px; --fs-body: 16px; --fs-lead: 18px; --fs-h3: 22px; --fs-h2: 32px; --fs-h1: clamp(48px, 7vw, 112px); /* ---------- SPACING (8-pt base, compressed editorial) ---------- */ --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; /* ---------- RADII (editorial prefers sharp) ---------- */ --r-sm: 2px; /* badges, chips */ --r-md: 4px; /* inputs */ --r-lg: 12px; /* rare — avoid */ --r-phone: 38px; /* device-only */ /* ---------- SHADOWS (used sparingly) ---------- */ --sh-1: 0 1px 0 rgba(10,9,8,0.04); --sh-2: 0 2px 6px rgba(10,9,8,0.08); --sh-3: 0 20px 40px -20px rgba(10,9,8,0.25), 0 2px 6px rgba(10,9,8,0.08); } /* ========================================================================= BASE / SEMANTIC ELEMENTS ========================================================================= */ body { background: var(--db-paper); color: var(--db-ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1 { font-family: var(--font-sans-narrow); font-weight: 600; font-size: var(--fs-h1); line-height: 0.9; letter-spacing: -0.02em; margin: 0 0 var(--s-6); } h1 em, .serif-italic { font-family: var(--font-serif-italic); font-style: italic; font-weight: 400; } h2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h2); letter-spacing: -0.015em; line-height: 1; margin: 0 0 var(--s-3); } h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 var(--s-2); } p, .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--db-ink-2); margin: 0 0 var(--s-4); } p em, .lead em { color: var(--db-ink); font-style: italic; font-family: var(--font-serif-italic); } .mono, code, kbd { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; } .kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-silver); } .bubble { font-family: var(--font-bubble); font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; } hr { border: 0; border-top: 1px solid var(--db-hairline); margin: var(--s-6) 0; }