/* ============================================================ CYBERNETIC FUTURES SHOWCASE — Colors & Type ------------------------------------------------------------ Vibe: fluorescent, futuristic, playful but never kitsch. Black backgrounds with chartreuse + cyan blurred gradient accents. MONA-museum minimalism: bare information, oversized type, generous black space, photo over text. ============================================================ */ /* ---------- WEBFONTS ---------- */ @import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap'); :root { /* ============================================================ COLOR — fluorescent palette on black ============================================================ */ /* Brand fluorescents — the two voices of the showcase. */ --cf-acid: #C8FF2E; /* primary — chartreuse / acid lime */ --cf-acid-soft: #DDFF66; --cf-cyan: #6CF7E0; /* secondary — fluorescent cyan */ --cf-cyan-soft: #A5FBEC; /* Optional accent flares pulled from the prototype photos. Use sparingly — one per layout, not all at once. */ --cf-magenta: #FF3DAA; --cf-tangerine: #FF7A1A; --cf-electric: #2D6BFF; --cf-yellow: #FFE03A; /* Surface / structure */ --cf-black: #000000; /* canvas */ --cf-ink: #0A0A0A; /* near-black for cards on cards */ --cf-graphite: #1A1A1A; --cf-smoke: #2C2C2C; --cf-fog: #6E6E6E; --cf-bone: #E8E8E8; --cf-paper: #FFFFFF; /* ============================================================ SEMANTIC COLOR — use these, not the raw values above ============================================================ */ --bg: var(--cf-black); --bg-elevated: var(--cf-ink); --fg: var(--cf-paper); --fg-muted: var(--cf-bone); --fg-subtle: var(--cf-fog); --fg-inverse: var(--cf-black); --accent: var(--cf-acid); /* primary accent */ --accent-2: var(--cf-cyan); /* secondary accent */ --accent-fg: var(--cf-black); /* text on accent */ --rule: rgba(255,255,255,0.18); --rule-strong: rgba(255,255,255,0.4); /* ============================================================ TYPE — display, body, mono ============================================================ The display face: a wide, geometric, slightly retro-futurist sans with circular bowls and open terminals (Aldrich is the closest free match to the custom face used on the 2024/2025 posters; substitute with the original if available). The body face: Space Grotesk — neutral grotesk, holds up at small caption sizes used on posters. ============================================================ */ --font-display: "Aldrich", "Eurostile Extended", "Bahnschrift", ui-sans-serif, system-ui, sans-serif; --font-body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Size scale — designed for big posters. */ --fs-mega: clamp(72px, 14vw, 220px); /* hero, bleeds off canvas */ --fs-hero: clamp(56px, 9vw, 140px); --fs-display: clamp(40px, 6vw, 88px); --fs-h1: clamp(32px, 4.5vw, 56px); --fs-h2: clamp(24px, 3vw, 36px); --fs-h3: 20px; --fs-body: 16px; --fs-small: 13px; --fs-caption: 11px; --lh-tight: 0.92; --lh-snug: 1.05; --lh-normal: 1.4; --lh-loose: 1.6; --tracking-display: 0.01em; --tracking-body: 0; --tracking-caption: 0.06em; /* posters use spaced caps for captions */ /* ============================================================ SPACING / RADII / SHADOWS ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px; /* Corners — almost everything is sharp. The acid date-bar and play/pause pill are the only rounded shapes. */ --r-none: 0; --r-sm: 2px; --r-pill: 999px; /* Glows — used very sparingly, only on hover/cursor or accent pulses. Never on resting-state cards. */ --glow-acid: 0 0 32px rgba(200, 255, 46, 0.55), 0 0 80px rgba(200, 255, 46, 0.25); --glow-cyan: 0 0 32px rgba(108, 247, 224, 0.55), 0 0 80px rgba(108, 247, 224, 0.25); /* The signature blurred gradient halo — multiple radial gradients of acid + cyan, soft-light blended, on black. */ --halo-bg: radial-gradient(60% 50% at 25% 35%, var(--cf-acid) 0%, transparent 60%), radial-gradient(55% 45% at 75% 70%, var(--cf-cyan) 0%, transparent 60%), radial-gradient(40% 35% at 60% 20%, var(--cf-acid-soft) 0%, transparent 60%), var(--cf-black); } /* ============================================================ BASE / RESET ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } /* ============================================================ SEMANTIC TYPE — drop-in classes ============================================================ */ .cf-mega, .cf-hero, .cf-display, h1, h2, h3, .cf-h1, .cf-h2, .cf-h3 { font-family: var(--font-display); font-weight: 400; /* Aldrich is a single weight */ letter-spacing: var(--tracking-display); line-height: var(--lh-tight); text-transform: uppercase; /* the showcase headline always sets in caps */ margin: 0; } .cf-mega { font-size: var(--fs-mega); line-height: 0.88; } .cf-hero { font-size: var(--fs-hero); line-height: 0.92; } .cf-display { font-size: var(--fs-display); line-height: 0.95; } h1, .cf-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); } h2, .cf-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3, .cf-h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tracking-caption); } p, .cf-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin: 0 0 var(--space-4); } .cf-small { font-size: var(--fs-small); line-height: var(--lh-normal); } /* Captions — the bottom-bar style: small, uppercase, tracked. */ .cf-caption { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caption); line-height: var(--lh-normal); } code, pre, .cf-mono { font-family: var(--font-mono); font-size: 0.92em; } /* ============================================================ BUILDING BLOCKS — primitives the UI kit reuses ============================================================ */ /* The acid date-bar that sits at the bottom of every poster. */ .cf-datebar { background: var(--cf-acid); color: var(--cf-black); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-small); letter-spacing: var(--tracking-caption); text-transform: uppercase; padding: var(--space-3) var(--space-5); } /* The signature halo / blurred gradient background. */ .cf-halo { background: var(--halo-bg); /* Optional motion is added by .cf-halo--alive (see ui_kits). */ } /* Hairline divider — full-bleed, white at low opacity. */ .cf-rule { border: 0; border-top: 1px solid var(--rule); } /* Selection */ ::selection { background: var(--cf-acid); color: var(--cf-black); }