/* ========================================================================= MBF — PHOSPHOR CONSOLE THEME Custom theme for MyBroadcastFellow interior (80s analog broadcast control room) Drop-in CSS custom properties + utility classes. USAGE: ... Paired with: IBM Plex Mono, Space Grotesk, Big Shoulders Display (Load via Google Fonts — include block at bottom of this file.) ========================================================================= */ :root.phosphor-console, .phosphor-console { /* ---------- PALETTE ---------- */ /* Phosphors — the glow colors */ --pc-phosphor-amber: #FFAA33; /* primary CRT text, warm persistence */ --pc-phosphor-green: #33FF88; /* "on-air" / active states, P1 phosphor */ --pc-phosphor-cyan: #66DDFF; /* cold edge, scanline accent */ /* Brand-through colors (MBF greenlight throughline) */ --pc-greenlight: #2ECC71; /* matches gate wordmark, DEV stoplight */ --pc-amber-tally: #FFB840; /* PROD stoplight amber */ --pc-tally-red: #FF3333; /* on-air, peak, warning */ /* Chassis & environment */ --pc-vacuum-black: #0A0607; /* base background, warm-undertone black */ --pc-panel-black: #141012; /* console chassis */ --pc-panel-dark: #1E1A1C; /* raised panels */ --pc-console-beige: #D4C4A8; /* plastic panels, knob color */ --pc-console-dark: #6B5E48; /* knob shadow, console crease */ --pc-tungsten-warm: #E8B873; /* ambient room lighting */ /* Neutrals for UI */ --pc-grey-900: #0F0D0E; --pc-grey-700: #2A2528; --pc-grey-500: #5A5053; --pc-grey-300: #9A8E90; --pc-grey-100: #E3DDDE; /* ---------- SEMANTIC TOKENS ---------- */ --pc-bg: var(--pc-vacuum-black); --pc-bg-panel: var(--pc-panel-black); --pc-bg-raised: var(--pc-panel-dark); --pc-fg: var(--pc-phosphor-amber); --pc-fg-soft: #C88825; --pc-fg-muted: #8A6318; --pc-accent: var(--pc-greenlight); --pc-danger: var(--pc-tally-red); --pc-success: var(--pc-phosphor-green); /* ---------- TYPE ---------- */ --pc-font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace; --pc-font-ui: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif; --pc-font-display: 'Big Shoulders Display', 'Space Grotesk', sans-serif; --pc-text-xs: 0.6875rem; /* 11px — console metadata */ --pc-text-sm: 0.8125rem; /* 13px — UI labels */ --pc-text-base: 1rem; /* 16px — body */ --pc-text-md: 1.125rem; /* 18px — emphasized body */ --pc-text-lg: 1.5rem; /* 24px — room title */ --pc-text-xl: 2.25rem; /* 36px — phase header */ --pc-text-2xl: 3.5rem; /* 56px — gate display */ --pc-text-hero: 6rem; /* 96px — wordmark */ --pc-tracking-tight: -0.02em; --pc-tracking-normal: 0em; --pc-tracking-wide: 0.12em; /* console labels */ --pc-tracking-xwide: 0.24em; /* phase tags */ /* ---------- SPACE / RADIUS ---------- */ --pc-radius-sm: 2px; /* hard 80s edges */ --pc-radius-md: 4px; --pc-radius-lg: 8px; --pc-radius-crt: 18px; /* CRT screen corner */ --pc-border: 1px solid var(--pc-grey-700); --pc-border-phosphor: 1px solid rgba(255, 170, 51, 0.35); --pc-border-greenlight: 1px solid rgba(46, 204, 113, 0.55); /* ---------- SHADOWS & GLOWS ---------- */ --pc-glow-amber: 0 0 6px rgba(255, 170, 51, 0.55), 0 0 18px rgba(255, 170, 51, 0.28), 0 0 36px rgba(255, 170, 51, 0.12); --pc-glow-green: 0 0 6px rgba(51, 255, 136, 0.55), 0 0 18px rgba(51, 255, 136, 0.28); --pc-glow-tally: 0 0 8px rgba(255, 51, 51, 0.65), 0 0 20px rgba(255, 51, 51, 0.35); --pc-inset-crt: inset 0 0 80px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(255, 170, 51, 0.08); /* ---------- MOTION ---------- */ --pc-ease-tube: cubic-bezier(0.2, 0.7, 0.2, 1); /* CRT warm-up feel */ --pc-ease-vu: cubic-bezier(0.1, 0.9, 0.3, 1); /* VU ballistic rise */ --pc-ease-fall: cubic-bezier(0.4, 0, 0.8, 0.4); /* VU needle fall */ --pc-dur-flicker: 0.12s; --pc-dur-switch: 0.28s; --pc-dur-warmup: 1.4s; --pc-dur-pulse: 1.2s; } /* ========================================================================= BASE ========================================================================= */ .phosphor-console { background: var(--pc-bg); color: var(--pc-fg); font-family: var(--pc-font-ui); font-size: var(--pc-text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .phosphor-console h1, .phosphor-console h2, .phosphor-console h3 { font-family: var(--pc-font-display); font-weight: 800; letter-spacing: var(--pc-tracking-tight); text-transform: uppercase; color: var(--pc-fg); text-shadow: var(--pc-glow-amber); } .phosphor-console h1 { font-size: var(--pc-text-2xl); } .phosphor-console h2 { font-size: var(--pc-text-xl); } .phosphor-console h3 { font-size: var(--pc-text-lg); } .phosphor-console code, .phosphor-console .pc-mono, .phosphor-console .pc-label { font-family: var(--pc-font-mono); } .phosphor-console .pc-label { font-size: var(--pc-text-xs); letter-spacing: var(--pc-tracking-wide); text-transform: uppercase; color: var(--pc-grey-300); } /* ========================================================================= CRT SCREEN — wrap any content to apply the scanline / bloom / vignette stack ========================================================================= */ .pc-crt { position: relative; border-radius: var(--pc-radius-crt); background: var(--pc-bg); box-shadow: var(--pc-inset-crt); overflow: hidden; isolation: isolate; } .pc-crt::before { /* Scanlines */ content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 2px, rgba(0, 0, 0, 0.22) 3px ); pointer-events: none; z-index: 2; mix-blend-mode: multiply; animation: pc-scanline-drift 8s linear infinite; } .pc-crt::after { /* Vignette + phosphor bloom */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%), radial-gradient(ellipse at center, rgba(255, 170, 51, 0.04) 0%, transparent 60%); pointer-events: none; z-index: 3; } @keyframes pc-scanline-drift { from { background-position: 0 0; } to { background-position: 0 6px; } } /* ========================================================================= TALLY LIGHTS — DEV red / PROD amber / POST green stoplight ========================================================================= */ .pc-tally { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; background: var(--pc-panel-black); border: var(--pc-border); border-radius: var(--pc-radius-sm); font-family: var(--pc-font-mono); font-size: var(--pc-text-xs); letter-spacing: var(--pc-tracking-wide); text-transform: uppercase; } .pc-tally::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--pc-grey-500); box-shadow: none; transition: background var(--pc-dur-switch), box-shadow var(--pc-dur-switch); } .pc-tally[data-state="on"]::before { background: var(--pc-tally-red); box-shadow: var(--pc-glow-tally); animation: pc-pulse var(--pc-dur-pulse) ease-in-out infinite; } .pc-tally[data-state="on"][data-phase="dev"]::before { background: var(--pc-tally-red); box-shadow: var(--pc-glow-tally); } .pc-tally[data-state="on"][data-phase="prod"]::before { background: var(--pc-amber-tally); box-shadow: 0 0 10px rgba(255,184,64,0.6); } .pc-tally[data-state="on"][data-phase="post"]::before { background: var(--pc-greenlight); box-shadow: var(--pc-glow-green); } @keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ========================================================================= VU METER — analog needle with ballistic motion ========================================================================= */ .pc-vu { display: inline-block; width: 140px; height: 80px; background: radial-gradient(ellipse at 50% 90%, var(--pc-console-beige) 0%, #B7A688 60%, #8E7F65 100%); border: 2px solid var(--pc-console-dark); border-radius: var(--pc-radius-sm); position: relative; overflow: hidden; } .pc-vu::before { /* Scale arc */ content: ""; position: absolute; inset: 8px 8px auto 8px; height: 70px; border: 1px solid var(--pc-grey-700); border-bottom: 0; border-radius: 70px 70px 0 0; opacity: 0.3; } .pc-vu__needle { position: absolute; left: 50%; bottom: 6px; width: 2px; height: 60px; background: linear-gradient(to top, var(--pc-tally-red) 0%, var(--pc-tally-red) 80%, var(--pc-vacuum-black) 100%); transform-origin: bottom center; transform: rotate(var(--pc-vu-angle, -45deg)); transition: transform 0.08s var(--pc-ease-vu); box-shadow: 0 0 2px rgba(0,0,0,0.6); } .pc-vu__needle.pc-vu--falling { transition: transform 0.9s var(--pc-ease-fall); } /* ========================================================================= CONSOLE CHROME — bezels, panel frames, console knobs ========================================================================= */ .pc-panel { background: var(--pc-bg-panel); border: 1px solid var(--pc-grey-700); border-radius: var(--pc-radius-md); padding: 1.25rem; position: relative; } .pc-bezel { /* 3D-ish beige frame around a CRT */ padding: 18px; background: linear-gradient(180deg, #C8B89B 0%, #A89676 100%); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.5); } .pc-knob { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8D8B8 0%, #C8B89B 45%, #8A7756 100%); box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.5); position: relative; cursor: pointer; } .pc-knob::after { content: ""; position: absolute; top: 4px; left: 50%; width: 3px; height: 12px; background: var(--pc-vacuum-black); transform: translateX(-50%) rotate(var(--pc-knob-angle, 0deg)); transform-origin: 50% 18px; border-radius: 2px; } /* ========================================================================= PHOSPHOR TEXT — glow effect for on-screen copy ========================================================================= */ .pc-phosphor { color: var(--pc-phosphor-amber); text-shadow: var(--pc-glow-amber); font-family: var(--pc-font-mono); } .pc-phosphor--green { color: var(--pc-phosphor-green); text-shadow: var(--pc-glow-green); } .pc-phosphor--red { color: var(--pc-tally-red); text-shadow: var(--pc-glow-tally); } .pc-phosphor--flicker { animation: pc-flicker 2.4s steps(5, end) infinite; } @keyframes pc-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.82; } 94% { opacity: 0.96; } 95% { opacity: 0.78; } 96% { opacity: 1; } } /* ========================================================================= BUTTONS — console-style toggles ========================================================================= */ .pc-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: var(--pc-bg-panel); color: var(--pc-fg); border: var(--pc-border-phosphor); border-radius: var(--pc-radius-sm); font-family: var(--pc-font-mono); font-size: var(--pc-text-sm); letter-spacing: var(--pc-tracking-wide); text-transform: uppercase; cursor: pointer; transition: all var(--pc-dur-switch) var(--pc-ease-tube); } .pc-btn:hover { background: var(--pc-bg-raised); border-color: var(--pc-fg); box-shadow: var(--pc-glow-amber); } .pc-btn--greenlight { color: var(--pc-greenlight); border-color: rgba(46, 204, 113, 0.5); } .pc-btn--greenlight:hover { border-color: var(--pc-greenlight); box-shadow: var(--pc-glow-green); } /* ========================================================================= PHASE STOPLIGHT — DEV / PROD / POST ========================================================================= */ .pc-stoplight { display: inline-flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--pc-panel-black); border: 1px solid var(--pc-grey-700); border-radius: var(--pc-radius-md); } .pc-stoplight__lamp { width: 32px; height: 32px; border-radius: 50%; background: var(--pc-grey-900); border: 2px solid var(--pc-grey-700); transition: all var(--pc-dur-switch) var(--pc-ease-tube); } .pc-stoplight__lamp--dev-on { background: var(--pc-tally-red); box-shadow: var(--pc-glow-tally); } .pc-stoplight__lamp--prod-on { background: var(--pc-amber-tally); box-shadow: 0 0 12px rgba(255,184,64,0.7), 0 0 28px rgba(255,184,64,0.35); } .pc-stoplight__lamp--post-on { background: var(--pc-greenlight); box-shadow: var(--pc-glow-green); } /* ========================================================================= NOISE / GRAIN — apply to .pc-grain for subtle analog texture ========================================================================= */ .pc-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================= GOOGLE FONTS LOADER Paste into instead of importing here if you want faster FOUC control. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&family=Big+Shoulders+Display:wght@700;800;900&display=swap');