/* ============================================================================
ELECTRIC BASEMENT TV — eb.css
Shared visual system: tokens, base, type, effects, components, motion.
Linked by design-system.html, index.html, watch.html, browse.html.
No build step. Plain CSS custom properties + reusable classes.
Aesthetic: ~75% retro analog TV (CRT / scanlines / VHS / broadcast OSD)
~25% dark underground neon on near-black.
========================================================================== */
/* ---- Fonts (Google Fonts) loaded per-page via ; declared here for ref:
Anton — chunky condensed broadcast DISPLAY
VT323 — CRT terminal / on-screen-display MONO (labels, channel #s, guide)
Archivo — clean readable BODY
-------------------------------------------------------------------------- */
/* ============================ TOKENS ===================================== */
:root {
/* Near-black backgrounds (cool blue-black, like an unlit tube) */
--eb-bg: #06070b;
--eb-bg-2: #0c0e14;
--eb-bg-3: #14161e;
--eb-bg-4: #1c2029;
/* Hairlines / borders */
--eb-line: #262a35;
--eb-line-2: #393f4d;
/* Phosphor text (off-white with a faint green cast, like a CRT) */
--eb-phosphor: #eef7ec; /* bright headings */
--eb-text: #d4ddd5; /* body copy (AAA on --eb-bg) */
--eb-dim: #8b968d; /* secondary / meta */
--eb-faint: #5b655e; /* hairline labels */
/* Neon accents — sampled straight from the EB neon sign */
--eb-cyan: #2bc6de; /* "ELECTRIC" electric cyan */
--eb-cyan-ink: #08323a;
--eb-red: #f4463f; /* "BASEMENT" coral red */
--eb-red-ink: #3a0c0a;
--eb-amber: #ffaa2d; /* the bolt / battery amber */
--eb-amber-ink: #2e1c03;
/* Semantic */
--eb-accent: var(--eb-cyan);
--eb-live: var(--eb-red);
/* Glows (layered, kept tight so they stay GPU-cheap) */
--eb-glow-cyan: 0 0 1px var(--eb-cyan), 0 0 14px rgba(43,198,222,.5);
--eb-glow-red: 0 0 1px var(--eb-red), 0 0 14px rgba(244,70,63,.5);
--eb-glow-amber: 0 0 1px var(--eb-amber), 0 0 14px rgba(255,170,45,.5);
/* Type scale (fluid) */
--fs-hero: clamp(2.75rem, 7vw, 6.5rem);
--fs-d1: clamp(2.25rem, 5vw, 4rem);
--fs-d2: clamp(1.75rem, 3.4vw, 2.75rem);
--fs-d3: clamp(1.35rem, 2.2vw, 1.85rem);
--fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
--fs-body: 1.0625rem;
--fs-sm: 0.9375rem;
--fs-osd: 1.05rem; /* VT323 reads small; bump it */
--fs-osd-sm:0.95rem;
/* Structure */
--r-screen: 16px;
--r-card: 5px;
--r-pill: 999px;
--maxw: 1240px;
--gutter: clamp(1rem, 4vw, 2.75rem);
/* Timing */
--t-fast: .14s;
--t-med: .28s;
--ease: cubic-bezier(.2,.7,.3,1);
/* Shadows */
--eb-shadow: 0 18px 50px -20px rgba(0,0,0,.9);
--eb-inset-tube:inset 0 0 120px -30px rgba(0,0,0,.95);
}
/* ============================ BASE ====================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--eb-bg);
/* faint underground glow pooling at the top-center, like a tube warming up */
background-image:
radial-gradient(120% 80% at 50% -10%, rgba(43,198,222,.06), transparent 55%),
radial-gradient(90% 60% at 85% 110%, rgba(244,70,63,.05), transparent 60%);
background-attachment: fixed;
color: var(--eb-text);
font-family: 'Archivo', system-ui, sans-serif;
font-size: var(--fs-body);
line-height: 1.6;
letter-spacing: .005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: var(--eb-cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Keyboard focus — visible neon ring everywhere */
:focus-visible {
outline: 2px solid var(--eb-cyan);
outline-offset: 2px;
border-radius: 3px;
}
::selection { background: var(--eb-red); color: #fff; }
.eb-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eb-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.eb-skip {
position: absolute; left: 8px; top: -48px; z-index: 200;
background: var(--eb-cyan); color: #03242a; font-family: 'VT323', monospace;
font-size: 1.1rem; padding: .35rem .8rem; border-radius: 4px;
transition: top var(--t-fast) var(--ease);
}
.eb-skip:focus { top: 8px; text-decoration: none; }
/* ============================ TYPOGRAPHY ================================ */
.eb-display, .eb-h1, .eb-h2, .eb-h3 {
font-family: 'Anton', 'Archivo', sans-serif;
font-weight: 400;
line-height: .92;
letter-spacing: .012em;
color: var(--eb-phosphor);
margin: 0;
text-transform: uppercase;
}
.eb-hero { font-size: var(--fs-hero); line-height: .88; }
.eb-h1 { font-size: var(--fs-d1); }
.eb-h2 { font-size: var(--fs-d2); }
.eb-h3 { font-size: var(--fs-d3); letter-spacing: .02em; }
.eb-osd {
font-family: 'VT323', monospace;
font-size: var(--fs-osd);
letter-spacing: .04em;
line-height: 1.25;
color: var(--eb-dim);
}
.eb-osd--cyan { color: var(--eb-cyan); }
.eb-osd--red { color: var(--eb-red); }
.eb-osd--amber { color: var(--eb-amber); }
.eb-kicker {
font-family: 'VT323', monospace;
font-size: var(--fs-osd-sm);
letter-spacing: .26em;
text-transform: uppercase;
color: var(--eb-cyan);
}
.eb-lead { font-size: var(--fs-lead); color: var(--eb-text); line-height: 1.55; text-wrap: pretty; }
.eb-muted { color: var(--eb-dim); }
.eb-faint { color: var(--eb-faint); }
/* ============================ EFFECTS (toggleable) =====================
Each effect is its own class so pages stay performant and accessible.
Add the class to turn an effect ON; remove it to turn it OFF.
All motion-bearing effects are disabled under prefers-reduced-motion.
======================================================================= */
/* --- Scanlines: thin dark horizontal lines over an element ------------- */
.eb-scanlines { position: relative; }
.eb-scanlines::before {
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
rgba(0,0,0,.34) 2px, rgba(0,0,0,.34) 3px);
mix-blend-mode: multiply;
opacity: .6;
}
/* --- CRT vignette + faint curvature sheen ------------------------------ */
.eb-vignette { position: relative; }
.eb-vignette::after {
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
border-radius: inherit;
background:
radial-gradient(130% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
linear-gradient(to bottom, rgba(255,255,255,.05), transparent 12%);
box-shadow: var(--eb-inset-tube);
}
/* --- Film grain: animated SVG noise; OFF unless class present ---------- */
.eb-grain { position: relative; }
.eb-grain::after {
content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
opacity: .05;
animation: eb-grain-shift .5s steps(4) infinite;
will-change: transform;
}
/* heavier grain variant for hero/player overlays */
.eb-grain--strong::after { opacity: .085; }
/* --- Global fixed atmosphere layer (one element, whole-page) ----------- */
.eb-atmosphere {
position: fixed; inset: 0; z-index: 90; pointer-events: none;
/* scanlines kept subtle so body text stays >= AA */
background-image:
repeating-linear-gradient(to bottom,
rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
rgba(0,0,0,.16) 2px, rgba(0,0,0,.16) 3px),
radial-gradient(130% 110% at 50% 45%, transparent 62%, rgba(0,0,0,.45) 100%);
mix-blend-mode: multiply;
}
.eb-atmosphere::after {
content: ""; position: absolute; inset: -50%; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
opacity: .035;
animation: eb-grain-shift .5s steps(4) infinite;
will-change: transform;
}
/* --- Flicker: subtle brightness wobble (decorative) -------------------- */
.eb-flicker { animation: eb-flicker 5.5s steps(1) infinite; }
.eb-flicker-hover { transition: filter var(--t-fast), text-shadow var(--t-med); }
.eb-flicker-hover:hover { animation: eb-flicker-fast .35s steps(1) 1; }
/* --- Glow on hover ----------------------------------------------------- */
.eb-glow-hover { transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med), transform var(--t-med) var(--ease); }
.eb-glow-hover:hover { box-shadow: var(--eb-glow-cyan); border-color: var(--eb-cyan); }
/* --- VHS chromatic aberration on headings -----------------------------
Usage: SAME TEXT
The base text renders normally; cyan/magenta ghosts fringe the edges. */
.eb-chroma { position: relative; display: inline-block; }
.eb-chroma::before, .eb-chroma::after {
content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
z-index: -1; mix-blend-mode: screen;
}
.eb-chroma::before { color: var(--eb-cyan); transform: translate(-.035em, .01em); opacity: .85; }
.eb-chroma::after { color: var(--eb-red); transform: translate(.035em, -.01em); opacity: .85; }
/* live variant: continuous tiny horizontal jitter */
.eb-chroma--live::before { animation: eb-chroma-cyan 3.2s steps(1) infinite; }
.eb-chroma--live::after { animation: eb-chroma-mag 3.2s steps(1) infinite; }
/* --- CRT power-on: collapse-from-line reveal --------------------------- */
.eb-crt-on { animation: eb-crt-on .55s var(--ease) both; transform-origin: center; }
/* --- Channel-change flash (apply, then remove via JS) ------------------ */
.eb-channel-flash { animation: eb-channel-flash .42s steps(2) 1; }
/* ============================ COMPONENTS ================================ */
/* ---- Buttons ---------------------------------------------------------- */
.eb-btn {
display: inline-flex; align-items: center; gap: .55em;
font-family: 'VT323', monospace; font-size: 1.2rem; letter-spacing: .08em;
text-transform: uppercase; line-height: 1;
padding: .62em 1.15em; border-radius: 4px; cursor: pointer;
border: 1px solid var(--eb-line-2); background: var(--eb-bg-3); color: var(--eb-phosphor);
transition: all var(--t-fast) var(--ease);
text-decoration: none; white-space: nowrap;
}
.eb-btn:hover { text-decoration: none; transform: translateY(-1px); }
.eb-btn:active { transform: translateY(0); }
.eb-btn--primary {
background: var(--eb-cyan); color: #042b32; border-color: var(--eb-cyan);
box-shadow: var(--eb-glow-cyan); font-weight: 400;
}
.eb-btn--primary:hover { background: #5fd9ee; box-shadow: 0 0 1px var(--eb-cyan), 0 0 22px rgba(43,198,222,.65); }
.eb-btn--magenta {
background: var(--eb-red); color: #2a041b; border-color: var(--eb-red);
box-shadow: var(--eb-glow-red);
}
.eb-btn--magenta:hover { background: #ff63bf; }
.eb-btn--ghost { background: transparent; color: var(--eb-phosphor); }
.eb-btn--ghost:hover { border-color: var(--eb-cyan); color: var(--eb-cyan); box-shadow: var(--eb-glow-cyan); }
.eb-btn--sm { font-size: 1rem; padding: .45em .85em; }
/* ---- Badges / tags ---------------------------------------------------- */
.eb-badge {
display: inline-flex; align-items: center; gap: .4em;
font-family: 'VT323', monospace; font-size: .95rem; letter-spacing: .12em;
text-transform: uppercase; line-height: 1;
padding: .28em .6em; border-radius: 3px;
border: 1px solid currentColor; color: var(--eb-dim);
background: rgba(255,255,255,.02);
}
.eb-badge--pd { color: var(--eb-dim); background: rgba(255,255,255,.03); border-color: var(--eb-line-2); }
.eb-badge--cult { color: var(--eb-red);background: var(--eb-red-ink); }
.eb-badge--scifi { color: var(--eb-cyan); background: var(--eb-cyan-ink); }
.eb-badge--horror { color: #ff6a4d; background: #361009; }
.eb-badge--original { color: var(--eb-amber); background: #2e1d04; }
.eb-badge--live {
color: #fff; background: var(--eb-red); border-color: var(--eb-red);
box-shadow: var(--eb-glow-red);
}
/* ---- LIVE indicator --------------------------------------------------- */
.eb-live-ind {
display: inline-flex; align-items: center; gap: .5em;
font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--eb-red);
}
.eb-live-ind__dot {
width: .62em; height: .62em; border-radius: 50%;
background: var(--eb-red); box-shadow: var(--eb-glow-red);
animation: eb-glow-pulse 1.6s ease-in-out infinite;
}
/* ---- Nav bar ---------------------------------------------------------- */
.eb-nav {
position: sticky; top: 0; z-index: 100;
background: color-mix(in srgb, var(--eb-bg) 88%, transparent);
backdrop-filter: blur(10px) saturate(1.1);
border-bottom: 1px solid var(--eb-line);
box-shadow: inset 0 2px 0 var(--eb-cyan);
}
.eb-nav__row {
display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
height: 60px;
}
.eb-brand {
display: inline-flex; align-items: baseline; gap: .45rem;
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: 1.35rem; letter-spacing: .02em; color: var(--eb-phosphor);
}
.eb-brand:hover { text-decoration: none; }
.eb-brand__e { color: var(--eb-cyan); }
.eb-brand__b { color: var(--eb-red); }
.eb-brand__tv {
font-size: .9rem; background: var(--eb-amber); color: #2a1c02;
padding: .12em .38em; border-radius: 3px; box-shadow: var(--eb-glow-amber);
}
.eb-nav__links { display: flex; gap: clamp(.9rem, 2.4vw, 1.7rem); margin-left: auto; }
.eb-nav__link {
font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--eb-dim); padding: .2em 0;
border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.eb-nav__link:hover, .eb-nav__link[aria-current="page"] {
color: var(--eb-cyan); border-color: var(--eb-cyan); text-decoration: none;
}
/* Shop CTA — highlighted amber neon "sign" that buzzes to pull the eye to the funnel */
.eb-nav__link--shop {
color: var(--eb-amber); border: 1px solid var(--eb-amber); border-radius: 4px;
padding: .18em .65em; background: var(--eb-amber-ink); box-shadow: var(--eb-glow-amber);
animation: eb-shop-buzz 13s ease-in-out infinite;
}
.eb-nav__link--shop:hover {
color: #2a1c02; background: var(--eb-amber); border-color: var(--eb-amber);
box-shadow: 0 0 2px var(--eb-amber), 0 0 24px rgba(255,170,45,.85); text-decoration: none;
}
@keyframes eb-shop-buzz {
0%, 84%, 100% { box-shadow: var(--eb-glow-amber); filter: none; }
86% { box-shadow: 0 0 2px var(--eb-amber), 0 0 22px rgba(255,170,45,.95); filter: brightness(1.4); }
88% { filter: brightness(.78); }
90% { box-shadow: 0 0 3px var(--eb-amber), 0 0 28px rgba(255,170,45,1); filter: brightness(1.55); transform: translateY(-1px); }
92% { filter: brightness(.9); transform: translateY(0); }
94% { box-shadow: var(--eb-glow-amber); filter: brightness(1.1); }
}
.eb-nav__chno {
font-family: 'VT323', monospace; font-size: 1.1rem; color: var(--eb-amber);
border: 1px solid var(--eb-line-2); border-radius: 3px; padding: .1em .5em;
}
/* ---- Channel card ----------------------------------------------------- */
.eb-card {
position: relative; display: flex; flex-direction: column;
background: var(--eb-bg-2); border: 1px solid var(--eb-line);
border-radius: var(--r-card); overflow: hidden;
transition: transform var(--t-med) var(--ease), border-color var(--t-med), box-shadow var(--t-med);
}
.eb-card:hover, .eb-card:focus-within {
transform: translateY(-3px);
border-color: var(--eb-cyan);
box-shadow: var(--eb-glow-cyan);
}
.eb-card:hover .eb-thumb__title { color: var(--eb-cyan); }
.eb-card__body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.eb-card__title {
font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.02rem;
line-height: 1.2; color: var(--eb-phosphor); letter-spacing: .005em;
}
.eb-card__meta { font-family: 'VT323', monospace; font-size: .98rem; color: var(--eb-dim); letter-spacing: .04em; }
.eb-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.eb-card__link::after { content: ""; position: absolute; inset: 0; } /* full-card click target */
/* ---- Thumbnail "broadcast slate" placeholder -------------------------
A degraded test-card look built from CSS only (no heavy images).
Drop a real ![]()
in the same .eb-thumb to replace it. */
.eb-thumb {
position: relative; aspect-ratio: 16/10; overflow: hidden;
background:
repeating-linear-gradient(135deg, #14161e 0 14px, #0f111a 14px 28px);
border-bottom: 1px solid var(--eb-line);
}
.eb-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* SMPTE-ish color-bar strip across the top */
.eb-thumb__bars {
position: absolute; top: 0; left: 0; right: 0; height: 16%;
background: linear-gradient(90deg,
#c9c9c9 0 14.3%, #cfcf00 14.3% 28.6%, #00cfcf 28.6% 42.9%,
#00b300 42.9% 57.1%, #cf00cf 57.1% 71.4%, #cf0000 71.4% 85.7%, #0000cf 85.7% 100%);
opacity: .5;
}
.eb-thumb__title {
position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem;
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: .95; color: var(--eb-phosphor);
background: linear-gradient(to top, rgba(6,7,11,.92), transparent);
transition: color var(--t-med);
}
.eb-thumb__ch {
position: absolute; top: calc(16% + .4rem); right: .55rem;
font-family: 'VT323', monospace; font-size: 1.15rem; color: var(--eb-amber);
text-shadow: 0 0 6px rgba(255,170,45,.5);
}
.eb-thumb__play {
position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
display: grid; place-items: center; border: 2px solid var(--eb-cyan); border-radius: 50%;
color: var(--eb-cyan); background: rgba(6,7,11,.45); opacity: 0;
transition: opacity var(--t-med); pointer-events: none;
}
.eb-card:hover .eb-thumb__play, .eb-card:focus-within .eb-thumb__play { opacity: 1; }
.eb-thumb__dur {
position: absolute; right: .5rem; bottom: .5rem;
font-family: 'VT323', monospace; font-size: .95rem; color: var(--eb-phosphor);
background: rgba(6,7,11,.8); padding: .05em .4em; border-radius: 3px;
}
/* ---- OSD input (retro on-screen-display) ------------------------------ */
.eb-osd-field {
display: flex; align-items: center; gap: .55rem;
border: 1px solid var(--eb-line-2); background: var(--eb-bg-2);
border-radius: 4px; padding: .5rem .75rem;
box-shadow: inset 0 0 0 1px rgba(43,198,222,.05);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.eb-osd-field:focus-within { border-color: var(--eb-cyan); box-shadow: var(--eb-glow-cyan); }
.eb-osd-field__icon { color: var(--eb-cyan); font-family: 'VT323', monospace; font-size: 1.2rem; }
.eb-osd-field input {
flex: 1; background: none; border: 0; outline: none; min-width: 0;
font-family: 'VT323', monospace; font-size: 1.2rem; letter-spacing: .06em;
color: var(--eb-phosphor);
}
.eb-osd-field input::placeholder { color: var(--eb-faint); }
/* ---- Toggle buttons (AV-equipment chunky switches) -------------------- */
.eb-toggle {
font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .08em;
text-transform: uppercase; cursor: pointer; line-height: 1;
padding: .5em .9em; border-radius: 4px;
border: 1px solid var(--eb-line-2); background: var(--eb-bg-3); color: var(--eb-dim);
transition: all var(--t-fast) var(--ease);
}
.eb-toggle:hover { color: var(--eb-phosphor); border-color: var(--eb-line-2); }
.eb-toggle[aria-pressed="true"], .eb-toggle.is-on {
background: var(--eb-cyan); color: #042b32; border-color: var(--eb-cyan);
box-shadow: var(--eb-glow-cyan);
}
/* ---- Footer ----------------------------------------------------------- */
.eb-footer {
border-top: 1px solid var(--eb-line);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,.4));
margin-top: 4rem;
}
.eb-footer__row { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; padding: 2.2rem 0 1rem; }
.eb-footer__links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.eb-footer__link {
font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--eb-dim); display: inline-flex; align-items: center; gap: .4em;
}
.eb-footer__link:hover { color: var(--eb-cyan); text-decoration: none; }
.eb-footer__stationid {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
border-top: 1px solid var(--eb-line); padding: 1rem 0 2.2rem;
font-family: 'VT323', monospace; font-size: 1rem; letter-spacing: .1em; color: var(--eb-faint);
}
.eb-footer__testcard {
width: 46px; height: 30px; border-radius: 2px; flex: none;
background: linear-gradient(90deg,
#c9c9c9 0 14.3%, #cfcf00 14.3% 28.6%, #00cfcf 28.6% 42.9%,
#00b300 42.9% 57.1%, #cf00cf 57.1% 71.4%, #cf0000 71.4% 85.7%, #0000cf 85.7% 100%);
opacity: .7; border: 1px solid var(--eb-line);
}
/* ---- Horizontal scroller rail ----------------------------------------- */
.eb-rail {
display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
scrollbar-width: thin; scrollbar-color: var(--eb-line-2) transparent;
}
.eb-rail > * { scroll-snap-align: start; flex: 0 0 clamp(220px, 42vw, 300px); }
.eb-rail::-webkit-scrollbar { height: 8px; }
.eb-rail::-webkit-scrollbar-thumb { background: var(--eb-line-2); border-radius: 99px; }
.eb-rail::-webkit-scrollbar-track { background: transparent; }
/* ---- TV-guide schedule strip ------------------------------------------ */
.eb-guide { border: 1px solid var(--eb-line); border-radius: var(--r-card); overflow: hidden; background: var(--eb-bg-2); }
.eb-guide__head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .7rem 1rem; background: var(--eb-bg-3); border-bottom: 1px solid var(--eb-line);
font-family: 'VT323', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--eb-amber);
}
.eb-guide__row {
display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center;
padding: .7rem 1rem; border-bottom: 1px solid var(--eb-line);
}
.eb-guide__row:last-child { border-bottom: 0; }
.eb-guide__row.is-now { background: linear-gradient(90deg, rgba(244,70,63,.12), transparent 60%); }
.eb-guide__time { font-family: 'VT323', monospace; font-size: 1.2rem; color: var(--eb-cyan); }
.eb-guide__show { color: var(--eb-text); }
.eb-guide__show b { color: var(--eb-phosphor); font-weight: 700; }
/* ---- CRT television frame (player / hero screen) ---------------------- */
.eb-tv {
position: relative; border-radius: calc(var(--r-screen) + 10px);
padding: clamp(10px, 1.6vw, 20px);
background:
linear-gradient(155deg, #20242e, #0a0c12 60%);
border: 1px solid var(--eb-line-2);
box-shadow: var(--eb-shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.eb-tv__screen {
position: relative; border-radius: var(--r-screen); overflow: hidden;
aspect-ratio: 16/9; background: #000;
box-shadow: var(--eb-inset-tube);
}
.eb-tv__screen > iframe, .eb-tv__screen > video, .eb-tv__screen > img {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* decorative overlays that sit ABOVE the embed but never block controls */
.eb-tv__overlay {
position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: var(--r-screen);
}
.eb-tv__overlay.eb-scan-lines {
background: repeating-linear-gradient(to bottom,
rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 2px, rgba(0,0,0,.22) 3px);
}
.eb-tv__overlay.eb-curve {
background: radial-gradient(130% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%);
box-shadow: inset 0 0 90px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04);
}
.eb-tv__chno {
position: absolute; top: .9rem; right: 1.1rem; z-index: 6; pointer-events: none;
font-family: 'VT323', monospace; font-size: clamp(1.1rem, 2vw, 1.6rem);
color: var(--eb-amber); text-shadow: 0 0 8px rgba(255,170,45,.55); letter-spacing: .06em;
}
.eb-tv__bezelbtns { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; padding: 0 .3rem; }
.eb-tv__knob { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a505e, #1a1d25); border: 1px solid #2b303b; }
/* ============================ KEYFRAMES ================================= */
@keyframes eb-glow-pulse {
0%, 100% { box-shadow: 0 0 1px var(--eb-red), 0 0 6px rgba(244,70,63,.5); opacity: 1; }
50% { box-shadow: 0 0 2px var(--eb-red), 0 0 16px rgba(244,70,63,.9); opacity: .75; }
}
@keyframes eb-flicker {
0%, 97%, 100% { filter: none; }
97.5% { filter: brightness(1.4); }
98% { filter: brightness(.7); }
98.5% { filter: brightness(1.2); }
}
@keyframes eb-flicker-fast {
0%, 100% { filter: none; } 30% { filter: brightness(1.5); } 60% { filter: brightness(.85); }
}
@keyframes eb-grain-shift {
0% { transform: translate(0,0); }
25% { transform: translate(-4%, 3%); }
50% { transform: translate(3%, -3%); }
75% { transform: translate(-3%, -4%); }
100% { transform: translate(0,0); }
}
@keyframes eb-chroma-cyan {
0%,100% { transform: translate(-.035em, .01em); }
48% { transform: translate(-.06em, -.01em); }
52% { transform: translate(-.02em, .02em); }
}
@keyframes eb-chroma-mag {
0%,100% { transform: translate(.035em, -.01em); }
48% { transform: translate(.06em, .01em); }
52% { transform: translate(.02em, -.02em); }
}
@keyframes eb-crt-on {
0% { transform: scaleY(.004) scaleX(1.1); filter: brightness(4); opacity: 0; }
35% { transform: scaleY(.02) scaleX(1); filter: brightness(2.5); opacity: 1; }
60% { transform: scaleY(1.04) scaleX(.6); filter: brightness(1.6); }
100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}
@keyframes eb-channel-flash {
0% { filter: brightness(1); }
50% { filter: brightness(2.6) contrast(.4) saturate(0); transform: translateY(-2px); }
100% { filter: brightness(1); }
}
/* ============================ BOOT INTRO =============================== */
/* CRT power-on / channel-static flash, shown once per session by eb.js. */
#eb-boot {
position: fixed; inset: 0; z-index: 9999; background: #000;
display: grid; place-items: center; overflow: hidden;
}
#eb-boot .eb-boot__static {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: .5; animation: eb-grain-shift .2s steps(3) infinite;
}
#eb-boot .eb-boot__line {
position: relative; z-index: 2; height: 3px; width: 60vw; max-width: 700px;
background: var(--eb-phosphor); box-shadow: 0 0 20px var(--eb-cyan);
}
#eb-boot .eb-boot__id {
position: absolute; z-index: 2; bottom: 12%; left: 0; right: 0; text-align: center;
font-family: 'VT323', monospace; font-size: 1.4rem; letter-spacing: .35em;
text-transform: uppercase; color: var(--eb-amber); text-shadow: 0 0 10px rgba(255,170,45,.6);
}
.eb-boot--play { animation: eb-boot-seq 1.7s var(--ease) forwards; }
.eb-boot--play .eb-boot__line { animation: eb-boot-line 1.7s var(--ease) forwards; }
@keyframes eb-boot-seq {
0% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes eb-boot-line {
0% { transform: scaleX(0) scaleY(8); opacity: 0; }
18% { transform: scaleX(1) scaleY(8); opacity: 1; }
38% { transform: scaleX(1) scaleY(1); }
55% { transform: scaleX(1) scaleY(40); opacity: 1; }
75% { transform: scaleX(1) scaleY(140); opacity: .9; }
100% { transform: scaleX(1) scaleY(300); opacity: 0; }
}
.eb-boot__skip {
position: absolute; z-index: 3; bottom: 1.5rem; right: 1.5rem;
font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .1em;
color: var(--eb-dim); background: rgba(0,0,0,.4); border: 1px solid var(--eb-line-2);
padding: .35em .8em; border-radius: 4px; cursor: pointer;
}
.eb-boot__skip:hover { color: var(--eb-cyan); border-color: var(--eb-cyan); }
.eb-boot__logo {
position: relative; z-index: 2; width: clamp(150px, 32vw, 260px); height: auto;
border-radius: 10px; opacity: 0; animation: eb-boot-logo 1.7s var(--ease) forwards;
}
@keyframes eb-boot-logo {
0% { opacity: 0; transform: scale(.92); }
18% { opacity: 1; transform: scale(1); }
70% { opacity: 1; }
100% { opacity: 0; }
}
.eb-footer__logo {
width: 44px; height: 44px; border-radius: 4px; flex: none; object-fit: cover;
border: 1px solid var(--eb-line-2);
}
.eb-tv__slate-logo { width: min(42%, 210px); height: auto; border-radius: 8px; border: 1px solid var(--eb-line); }
/* ============================ REDUCED MOTION ============================
Disable grain/flicker/jitter/boot animation; keep layout & contrast.
======================================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.eb-grain::after, .eb-atmosphere::after { display: none; } /* kill moving grain */
.eb-flicker, .eb-flicker-hover:hover { animation: none; }
.eb-chroma--live::before { transform: translate(-.035em, .01em); }
.eb-chroma--live::after { transform: translate(.035em, -.01em); }
.eb-live-ind__dot { animation: none; box-shadow: var(--eb-glow-red); }
#eb-boot { display: none !important; } /* skip boot entirely */
}
/* ============================ RESPONSIVE ================================ */
@media (max-width: 760px) {
.eb-nav__links { gap: .9rem; }
.eb-nav__chno { display: none; }
.eb-guide__row { grid-template-columns: 72px 1fr; }
.eb-guide__row > .eb-badge { display: none; }
/* effects ease off on small screens for performance */
.eb-atmosphere { background-size: auto, cover; }
.eb-tv { padding: 8px; }
}
@media (max-width: 520px) {
.eb-nav__links .eb-nav__link--hide-sm { display: none; }
}