/* TYPOGRAPHY MIGRATION (2026-05-08, Phase 2 of brand-update pass).
Brand bible spec: Monument Extended (display) + Rajdhani (subhead) + Inter (body).
Monument Extended is a paid Pangram Pangram font; using Big Shoulders Display
as the free Google-Fonts placeholder. Geometric, wide, broadcast-ready —
reads as a Monument Extended cousin. Once Monument Extended is licensed,
swap the --display value and the @import below.
Oxanium kept loaded as a secondary display fallback for any pages still
referencing it; will be removed in a later cleanup pass. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Oxanium:wght@400;500;600;700&family=Italianno&display=swap');
:root {
/* ═══════════════════════════════════════════════════════
LOCKED BRAND PALETTE — from THE_OVEN_BRAND_BIBLE.md
(master sheet, 2026-05-08). Do not change these hex
values without updating the master bible first. Every
other red/orange/pink shade in this stylesheet is a
derived operational variant of these.
═══════════════════════════════════════════════════════ */
/* Primary Signal — the hot core */
--ovn-orange: #FF7A00; /* OVEN ORANGE */
--ovn-ember: #FF4A22; /* HOT EMBER */
--ovn-red: #FF1F1F; /* SIGNAL RED */
--ovn-pink: #FF0066; /* HOT PINK */
--ovn-magenta: #FF007A; /* MAGENTA CORE */
/* Support / Accent */
--ovn-black: #050000; /* OVEN BLACK */
--ovn-panel: #101010; /* PANEL BLACK */
--ovn-charcoal: #1A1A1A; /* METAL CHARCOAL */
--ovn-cyan: #00E5FF; /* HOLOGRAM CYAN */
--ovn-violet: #8B5CFF; /* ELECTRIC VIOLET */
--ovn-gray: #8A8A8A; /* SMOKE GRAY */
--ovn-warm-white: #F5F0E8; /* WARM WHITE */
/* Operational derived (NOT new brand colors — layering tones) */
--ovn-glass: #0A0606; /* black glass — translucent panel */
--ovn-crimson: #6E0505; /* deep depth shadow */
--ovn-muted-red: #8A1A1A; /* dim divider line */
/* David's CSS naming convention from the design.md spec — kept as
aliases so CSS authored against either naming resolves correctly.
Where David's hex differs from the bible (signal-red and
magenta-signal), David's values win for HIS tokens, bible values
win for the --ovn-* tokens. Single source of truth: bible. */
--oven-black: var(--ovn-black);
--black-glass: var(--ovn-glass);
--panel-black: var(--ovn-panel);
--metal-charcoal: var(--ovn-charcoal);
--muted-red-ui: var(--ovn-muted-red);
--dark-crimson: var(--ovn-crimson);
--signal-red: #FF2A2A; /* David's hotter CTA shade */
--neon-red: var(--ovn-red); /* same as bible SIGNAL RED #FF1F1F */
--hot-ember: var(--ovn-ember);
--oven-orange: var(--ovn-orange);
--hot-pink-core: var(--ovn-pink);
--magenta-signal: #FF1493; /* David's alternate hot pink */
--smoke-gray: var(--ovn-gray);
--warm-white: var(--ovn-warm-white);
--hologram-cyan: var(--ovn-cyan);
--electric-violet: var(--ovn-violet);
/* Gradients */
--ember-heat: linear-gradient(135deg, #FF7A00 0%, #FF007A 100%);
--signal-flow: linear-gradient(135deg, #FF007A 0%, #00E5FF 100%);
/* Status-class signal levels (used by .status-* in Phase 3) */
--signal-bright: var(--ovn-red); /* live / shipping / booking */
--signal-dim: rgba(255, 31, 31, 0.45); /* coming soon / waitlist */
--signal-ghost: rgba(255, 31, 31, 0.20); /* placeholder / mock — internal */
/* ═══════════════════════════════════════════════════════
BACKWARDS-COMPAT ALIASES — current code uses these.
They now resolve to the locked tokens above. Phase 2+
migrations will replace direct usage with --ovn-* names.
═══════════════════════════════════════════════════════ */
--red: var(--ovn-red);
--red-dim: rgba(255, 31, 31, 0.6);
--red-glow: rgba(255, 31, 31, 0.4);
--red-wash: rgba(255, 31, 31, 0.08);
--amber: var(--ovn-orange);
--bg: var(--ovn-black);
--panel: var(--ovn-panel);
--panel-2: #0e0e0e;
--text: var(--ovn-warm-white);
--dim: rgba(255,255,255,0.55);
--faint: rgba(255,255,255,0.3);
--hair: rgba(255, 31, 31, 0.15);
/* Typography (Phase 2 of brand-update pass).
Bible spec: Monument Extended (display) / Rajdhani (subhead) / Inter (body).
Display uses Big Shoulders Display as the free placeholder for Monument
Extended until the paid license is in place. Oxanium kept as a fallback. */
--display: 'Big Shoulders Display', 'Monument Extended', 'Oxanium', -apple-system, BlinkMacSystemFont, sans-serif;
--ui: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: var(--ui);
/* Spacing scale */
--space-section: 130px;
--space-hero: 160px;
--space-contact: 140px;
--container-pad: 32px;
/* Fixed-frame heights — overridden by JS (setFrameHeights) */
--on-air-h: 54px;
--nav-h: 68px;
--footer-h: 48px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* iOS Safari paints the html background into the safe-area + overscroll
zones — without this, those areas can show white or bleed-through. */
background: var(--ovn-black, #050000);
/* Reserve scrollbar space at all times — without this, a scrollbar
appearing on scroll changes viewport width and can trip media-query
breakpoints that visually shrink the nav. Applied on html so it
governs the actual document scroller. */
scrollbar-gutter: stable;
/* Horizontal-overflow guard lives on html, not body, so html stays
the scroller and scrollbar-gutter actually applies. */
overflow-x: hidden;
}
body {
background: var(--bg); color: var(--text);
font-family: var(--sans);
font-size: 16px; line-height: 1.7;
font-feature-settings: 'kern', 'liga', 'calt';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
/* Belt + suspenders horizontal overflow guard. html already has overflow-x:
hidden, but iOS Safari occasionally lets a wide child push body width past
100vw. max-width pins it; overflow-x clips anything still escaping. */
max-width: 100vw;
overflow-x: hidden;
overflow-wrap: break-word;
/* Reserve space for the fixed top strips and the fixed bottom footer.
CSS vars are kept in sync with actual rendered heights by JS so
content never slides under the bars even when fonts/padding change. */
padding-top: calc(var(--on-air-h) + var(--nav-h));
padding-bottom: var(--footer-h);
}
body::before {
content: ''; position: fixed; inset: 0;
background: repeating-linear-gradient(0deg,
rgba(255,50,50,0.015) 0, rgba(255,50,50,0.015) 1px,
transparent 1px, transparent 3px);
pointer-events: none; z-index: 100;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--container-pad); }
/* Selection color matches the brand */
::selection { background: var(--red); color: #000; text-shadow: none; }
::-moz-selection { background: var(--red); color: #000; text-shadow: none; }
/* Focus rings — keyboard-accessible without polluting mouse UX */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(255,50,50,0.18);
}
/* Tabular numerals on prices, stats, dates — keeps digits column-aligned */
.price-amount, .stat-value, .pulse-cell-status, .event-poster-date,
.svc-card-price, .feat-kicker, .div-num,
input[type="tel"], input[type="number"] {
font-variant-numeric: tabular-nums;
font-feature-settings: 'kern', 'liga', 'tnum';
}
/* Custom scrollbar — branded but understated */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,50,50,0.25); border: 2px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--red-dim); }
/* Firefox: thin red scrollbar */
html { scrollbar-width: thin; scrollbar-color: rgba(255,50,50,0.35) var(--bg); }
/* ═══════════════════════════════════════════════════════
THEMED CURSORS — sitewide red arrow + red pointer hand.
Previously only on /clock; promoted here so EVERY page has it
(and every future page inherits it automatically).
═══════════════════════════════════════════════════════ */
body {
cursor: url("data:image/svg+xml;utf8,") 2 2, auto;
}
a, button, [role="button"], .btn, summary, label[for], select, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], .nav-toggle, .dropdown-item, .nav-menu li, .on-air-tune {
cursor: url("data:image/svg+xml;utf8,") 8 2, pointer;
}
/* ═══════════════════════════════════════════════════════
ON AIR BEACON — sitewide, sticky above the nav
═══════════════════════════════════════════════════════ */
.on-air {
/* Truly fixed — cannot move on scroll. Combined with the fixed nav
below and the fixed footer, the page is framed top + bottom always.
Border removed: it was leaving a visible red sliver at the seam
between the on-air strip and the nav. */
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: #000;
font-family: var(--mono);
font-size: 11px; letter-spacing: 2.5px;
text-transform: uppercase; overflow: hidden;
}
.on-air-inner {
max-width: 1200px; margin: 0 auto; padding: 10px 24px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.on-air-status {
display: flex; align-items: center; gap: 12px;
color: var(--red); text-shadow: 0 0 8px var(--red-glow);
font-weight: 900; flex-shrink: 0;
}
/* Optical-center nudge — bold uppercase glyphs sit visually above
their geometric center, so the label reads slightly higher than
the round dot beside it. line-height:1 + 0.5px down brings the
visual centers of the text and the dot in line. */
#on-air-label {
display: inline-block;
line-height: 1;
transform: translateY(0.5px);
}
.on-air-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 50%;
background: var(--red);
box-shadow: 0 0 14px var(--red), 0 0 6px var(--red);
/* ON AIR = slow glowing beacon. The dot AND its halo swell together so
the bar reads as a heartbeat, not a flashing alert. 3.6s cycle keeps
it calm — fast enough to feel alive, slow enough not to nag. */
animation: beacon 3.6s ease-in-out infinite;
}
/* OFF AIR = dull red, static. Equipment cold, no halo, no movement. */
body.off-air .on-air-dot {
background: #5a1414;
box-shadow: none;
animation: none;
opacity: 0.55;
}
@keyframes beacon {
0%, 100% { opacity: 1; box-shadow: 0 0 14px var(--red), 0 0 6px var(--red); }
50% { opacity: 0.45; box-shadow: 0 0 4px var(--red), 0 0 2px var(--red); }
}
/* Legacy alias — older markup still references blink. Keep it pointing at beacon. */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.on-air-ticker {
flex: 1; overflow: hidden;
color: var(--dim); white-space: nowrap;
mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.on-air-ticker-track {
display: inline-block; animation: ticker 36s linear infinite; white-space: nowrap;
}
.on-air-ticker-track span { color: var(--red); opacity: 0.6; margin: 0 18px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.on-air-tune {
font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px;
color: var(--red); border: 1px solid var(--red-dim);
padding: 6px 14px; transition: all 0.2s; flex-shrink: 0; text-transform: uppercase;
}
.on-air-tune:hover {
background: var(--red-wash); border-color: var(--red);
box-shadow: 0 0 12px var(--red-glow); text-shadow: 0 0 6px var(--red-glow);
}
/* OFF AIR state: keep the red text + red TUNE IN + blinking dot — the bar
should always look alive, even when the broadcast isn't running. The
only thing that distinguishes ON AIR from OFF AIR is the dot animation
(blinking when idle, solid when live) and the label text. */
@media (max-width: 720px) { .on-air-ticker { display: none; } }
/* ═══════════════════════════════════════════════════════
NAV BAR with hover dropdowns
═══════════════════════════════════════════════════════ */
.nav {
/* Truly fixed — cannot move on scroll. Top offset matches the
measured on-air bar height (kept in sync by setFrameHeights).
border-top is the red seam line between on-air and nav — placed
on the nav so it's additive and can't expose a sub-pixel gap. */
position: fixed; top: var(--on-air-h); left: 0; right: 0; z-index: 50;
background: #050505;
border-top: 1px solid rgba(255,50,50,0.25);
border-bottom: 1px solid var(--hair);
}
.nav-inner {
max-width: 1200px; margin: 0 auto; padding: 12px 24px;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand {
/* Switched mono → display so the brand mark reads like the hero
(Big Shoulders), not body copy. Heavier weight + tighter letter
spacing because display fonts collapse cleanly without the 4px
mono gap. Multi-layer glow makes it feel like an LED sign. */
font-family: var(--display);
font-weight: 800;
font-size: clamp(16px, 1.6vw, 22px);
letter-spacing: 0.045em;
text-transform: uppercase;
color: var(--red);
text-shadow:
0 0 6px var(--red-glow),
0 0 14px rgba(255,31,31,0.45),
0 0 26px rgba(255,31,31,0.22);
display: flex; align-items: center; flex-shrink: 0;
line-height: 1;
transition: text-shadow 0.2s ease, transform 0.15s ease;
}
.nav-brand:hover {
text-shadow:
0 0 8px var(--red-glow),
0 0 18px rgba(255,31,31,0.6),
0 0 32px rgba(255,31,31,0.35);
transform: translateY(-0.5px);
}
/* Beacon dot removed per design — only the on-air status dot blinks. */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.nav-menu {
display: flex; align-items: center; gap: 4px;
font-family: var(--mono);
font-size: clamp(10px, 0.95vw, 12px);
letter-spacing: clamp(1.6px, 0.18vw, 2.5px);
text-transform: uppercase; list-style: none;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
display: block;
padding: 12px clamp(8px, 1.05vw, 16px);
color: var(--dim);
transition: color 0.2s, text-shadow 0.2s;
border-bottom: 2px solid transparent;
position: relative;
}
.nav-menu > li > a:hover,
.nav-menu > li:hover > a {
color: var(--red);
text-shadow: 0 0 6px var(--red-glow);
}
.nav-menu > li:hover > a::after {
content: ''; position: absolute;
left: 18px; right: 18px; bottom: -1px;
height: 1px; background: var(--red);
box-shadow: 0 0 8px var(--red-glow);
}
/* Dropdown panel */
.dropdown {
position: absolute;
top: 100%; left: 0;
min-width: 260px;
background: #070707;
border: 1px solid var(--hair);
border-top: 1px solid var(--red-dim);
box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(255,50,50,0.08);
opacity: 0; visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
padding: 8px 0;
}
.nav-menu > li:hover > .dropdown {
opacity: 1; visibility: visible;
transform: translateY(0);
transition: opacity 0.2s, transform 0.2s, visibility 0s;
}
.dropdown-head {
padding: 10px 20px 8px;
font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px;
color: var(--faint); text-transform: uppercase;
border-bottom: 1px dashed var(--hair);
margin-bottom: 6px;
}
.dropdown-item {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 20px;
font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
color: var(--dim); text-transform: uppercase;
transition: all 0.15s;
}
.dropdown-item:hover {
color: var(--red);
background: var(--red-wash);
text-shadow: 0 0 6px var(--red-glow);
padding-left: 24px;
}
.dropdown-item .pill {
font-size: 9px; letter-spacing: 1.5px;
padding: 2px 7px; border: 1px solid var(--hair);
color: var(--faint);
}
.dropdown-item:hover .pill {
border-color: var(--red-dim); color: var(--red);
}
.dropdown-item .pill.soon { color: var(--amber); border-color: rgba(245,166,35,0.35); }
.dropdown-item:hover .pill.soon { border-color: var(--amber); }
/* Mobile nav: menu hides, brand + hamburger stay */
.nav-toggle {
display: none;
background: transparent; border: 1px solid var(--red-dim);
color: var(--red); font-family: var(--mono); font-size: 11px;
letter-spacing: 2px; padding: 8px 12px; cursor: pointer;
text-transform: uppercase;
}
/* clamp() in the .nav rules above handles smooth scaling from ~720px up
to 1300px+, so no font/padding jumps when a scrollbar appears. The
only breakpoint left is the hard switch to the hamburger menu below. */
/* ═══════════════════════════════════════════════════════
PHONE FIXES — keep everything inside 100vw.
Triggered at <= 600px (true phone widths). Stops the hero title,
CTA buttons, and on-air bar from spilling past the right edge so
the user never has to scroll left/right on a phone. Belt-and-
suspenders with the existing 720px hamburger breakpoint above.
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* Hero title — clamp min was 90px which overflows a 390px viewport.
Drop the floor so "THE OVEN" fits inside any phone width. */
.hero-title {
font-size: clamp(48px, 14vw, 90px) !important;
letter-spacing: -0.02em !important;
}
/* Page hero (for /about, /studio, /broadcast etc.) — same treatment. */
.page-hero-title,
.about-hero h1 {
font-size: clamp(40px, 11vw, 80px) !important;
letter-spacing: -0.01em !important;
}
/* Hero CTA buttons — tighten padding + font so 2-up wraps cleanly
into a single column at narrow widths without the right edge being
clipped. Force full-width single-column at very narrow widths. */
.hero-cta {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 0 8px;
}
.hero-cta .btn {
padding: 14px 18px !important;
font-size: 11px !important;
letter-spacing: 2px !important;
width: 100%;
justify-content: center;
}
/* Generic .btn on phones — bring fonts down so labels never overflow. */
.btn {
padding: 12px 18px;
font-size: 11px;
letter-spacing: 2px;
}
/* On-air strip — shrink padding + give TUNE IN button a tighter
min-width so it doesn't get squeezed off the right edge. */
.on-air-inner { padding: 8px 12px; gap: 10px; }
.on-air-tune {
min-width: 0 !important;
padding: 6px 10px;
font-size: 10px;
letter-spacing: 1.8px;
}
/* Nav inner — slimmer side padding so the MENU toggle never gets
clipped on the right edge. */
.nav-inner { padding: 10px 14px; gap: 12px; }
/* Section padding tighter so wide section-text doesn't push width. */
.container { padding-left: 16px; padding-right: 16px; }
/* Word-wrap safety net for any long unhyphenated string */
body, p, h1, h2, h3, .section-title, .section-text, .svc-card-desc {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Hard ceiling on any element on the page — nothing wider than the
viewport. Belt + suspenders for pages where parent flex/grid lets
a button or image push past the right edge. Specific overrides for
known offenders (buttons, images, embeds) so they stay inside. */
.section, section, header, footer, article, main, .container,
.card-grid, .feature-grid, .featured-grid, .prod-grid, .divisions,
.pulse-grid, .listen-grid, .reel-grid, .soundcloud-wrap, .venue {
max-width: 100vw;
box-sizing: border-box;
}
img, iframe, video, embed, object {
max-width: 100% !important;
height: auto;
}
/* Any standalone button on a phone — never wider than its container */
.btn, .btn-solid {
max-width: 100%;
box-sizing: border-box;
}
/* Any flex row that holds buttons should wrap and shrink children */
.contact-row, .hero-actions, .page-hero-actions, .feat-actions {
flex-wrap: wrap;
gap: 10px;
}
/* Stop pre / code blocks from forcing horizontal scroll */
pre, code { white-space: pre-wrap; word-break: break-word; }
/* Plugin tile (image-card) — on touch / phone, ALWAYS show the price +
desc + BUY CTA. Touch devices can't reliably hover, so the reveal
pattern hides the BUY button forever otherwise. Drop the max-height
gate + force opacity so the content sits below the title at all times. */
.svc-card.image-card .image-card-reveal {
max-height: none !important;
opacity: 1 !important;
padding-top: 14px !important;
overflow: visible;
}
/* Plugin card content sits at the bottom by default — make sure the
padding leaves room for the cursor / focus halo and the BUY arrow
stays inside the card. */
.svc-card.image-card .image-card-content {
padding: 18px 18px 18px;
}
/* Plugin shot — anchor to TOP of card on mobile so it doesn't overlap
the always-visible content text below. Kill the 3D perspective tilt
because at narrow widths the rotation pushes the right corner off
the card and looks broken. */
.svc-card.image-card.has-shot .plugin-shot {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 100%;
height: 180px;
object-fit: cover;
object-position: center top;
box-shadow: none;
animation: none !important;
}
/* Hover variant of the shot — no transform on mobile either. */
.svc-card.image-card.has-shot:hover .plugin-shot {
transform: translateX(-50%);
box-shadow: none;
animation: none !important;
}
/* Content sits BELOW the shot — no longer absolute-positioned, just
normal block flow under the image. */
.svc-card.image-card .image-card-content {
position: relative;
padding: 200px 18px 18px;
}
/* Cards without a shot — keep the kicker/title pushed down a bit but
no top padding for the missing image. */
.svc-card.image-card.no-shot .image-card-content {
padding: 24px 18px 18px;
}
/* Plugin watermark on no-shot cards (the giant "A" on AIPHONE) —
shrink + push to corner so it doesn't blob over the title. */
.svc-card.image-card.no-shot .plugin-watermark {
font-size: 80px;
top: 12px; right: 12px;
opacity: 0.18;
}
/* Plugin card needs a bit more vertical room now that content is
always visible AND the shot sits above. */
.svc-card.image-card {
min-height: 0;
height: auto;
}
/* Kill the vegas hover animation on mobile — touch can't hover. */
.svc-card.image-card.has-shot:hover {
animation: none !important;
box-shadow: none;
}
/* Signature line — kill the handwrite-animation clip-path on mobile so
the cursive can wrap to two lines and fit a phone viewport. The 34px
floor was making "Made with love, from the Music Capitol of the World!"
~620px wide, way past 390px viewport. Disable the animation, force
inline display, allow normal wrapping. */
.signature-line {
font-size: clamp(20px, 5.5vw, 32px) !important;
line-height: 1.2;
display: block;
text-align: center;
padding: 0 12px;
white-space: normal;
}
.signature-line .sig-part,
.signature-line.signed .sig-part-1,
.signature-line.signed .sig-part-2 {
display: inline !important;
clip-path: none !important;
-webkit-clip-path: none !important;
animation: none !important;
white-space: normal !important;
margin-right: 0 !important;
}
}
@media (max-width: 720px) {
.nav-menu { display: none; }
.nav-toggle { display: block; }
.nav-menu.open {
display: flex; flex-direction: column;
position: absolute; top: 100%; left: 0; right: 0;
background: #070707; border-bottom: 1px solid var(--hair);
padding: 12px 0; gap: 0;
font-size: 11px; letter-spacing: 2.5px;
/* Make the menu scroll, NOT the page behind it. */
max-height: calc(100vh - var(--on-air-h, 54px) - var(--nav-h, 68px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.nav-menu.open > li { width: 100%; }
.nav-menu.open > li > a { padding: 14px 24px; }
.nav-menu.open .dropdown {
position: static; opacity: 1; visibility: visible;
transform: none; border: none; box-shadow: none;
background: transparent; padding: 0 0 8px 16px;
}
/* Lock body scroll while the mobile menu is open. */
body.menu-open { overflow: hidden; touch-action: none; }
/* ─── Mobile readability bump ─────────────────────────────────
Lift the dimmest body text without touching brand color tokens.
Counters low phone brightness without changing the visual identity.
Desktop layout is untouched. */
body { color: rgba(200, 195, 188, 0.96); }
.about-copy p,
.about-copy .about-lede,
.section-text,
.svc-card-desc,
.contact-text,
.feat-pitch,
.pulse-cell-desc { color: rgba(200, 195, 188, 0.92) !important; }
/* White titles tinted down so red elements own the hierarchy */
.svc-card-title,
.feat-title { color: rgba(210, 205, 198, 0.95) !important; }
.section-label,
.svc-card-kicker,
.feat-kicker,
.hero-tag,
.div-num,
.nav-menu > li > a { color: #FF1F1F !important; }
/* Status pills + dim labels still need to read as "muted" but not invisible */
.svc-pill,
.pill { color: rgba(255, 245, 240, 0.92) !important; }
/* Footer + nav + footer-fixed bar */
.footer-pinned, .footer-pinned a { color: rgba(245, 240, 232, 0.92) !important; }
}
/* ═══════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════ */
.hero {
padding: var(--space-hero) 0 calc(var(--space-section) - 20px); text-align: center;
position: relative; border-bottom: 1px solid var(--hair);
}
.hero-tag {
font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
color: var(--red); text-shadow: 0 0 8px var(--red-glow);
margin-bottom: 24px; text-transform: uppercase;
}
/* Hero title scaled UP to compensate for Oxanium's narrower metrics vs the
previous Space Grotesk. Tighter tracking too — Oxanium reads better dense. */
.hero-title {
font-family: var(--display);
font-size: clamp(90px, 18vw, 240px); font-weight: 700; letter-spacing: -0.03em;
color: var(--red);
text-shadow: 0 0 28px var(--red-glow), 0 0 70px rgba(255,50,50,0.22);
margin-bottom: 22px; line-height: 0.92;
}
.hero-sub {
font-family: var(--ui); font-size: clamp(14px, 2.2vw, 19px);
letter-spacing: 5px; font-weight: 500;
color: rgba(255,255,255,0.55); text-transform: uppercase; margin-bottom: 40px;
}
/* Hero lead paragraph — bigger, tighter, more presence under the giant title.
Apple-grade: lead copy is 1.3-1.4× body size, line-height ~1.4, slight tracking. */
.hero-pitch {
max-width: 720px; margin: 0 auto 44px;
font-family: var(--sans);
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 400;
color: rgba(255,255,255,0.78);
line-height: 1.5;
letter-spacing: -0.005em;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Buttons — Rajdhani (UI font), compact. Display font reserved for the hero title.
This restores the 4:1+ size ratio between hero title and CTA buttons that
makes premium sites read as premium. Subtle press lift on hover. */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 28px; background: transparent;
border: 1px solid var(--red-dim); color: var(--red);
font-family: var(--ui);
font-size: 12px; letter-spacing: 3px; font-weight: 700;
text-transform: uppercase; cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s, background 0.2s, box-shadow 0.2s, text-shadow 0.2s;
will-change: transform;
}
.btn:hover {
border-color: var(--red); background: var(--red-wash);
box-shadow: 0 0 18px var(--red-glow); text-shadow: 0 0 6px var(--red-glow);
transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn-solid {
background: var(--red); color: #000;
border-color: var(--red); font-weight: 700;
box-shadow: 0 0 18px rgba(255,50,50,0.22);
}
.btn-solid:hover {
background: #ff4848;
box-shadow: 0 4px 24px var(--red-glow), 0 0 30px rgba(255,50,50,0.3);
text-shadow: none;
}
/* ═══════════════════════════════════════════════════════
SECTIONS
═══════════════════════════════════════════════════════ */
.section { padding: var(--space-section) 0; border-bottom: 1px solid var(--hair); }
.section-head { margin-bottom: 48px; text-align: center; }
.section-label {
font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
margin-bottom: 14px; text-transform: uppercase; display: inline-block;
}
/* Removed the `◉ ` LED prefix on section-labels — too many beacons.
Decorative fading dashes flank the title (and subtitle) instead. */
.section-title {
font-family: var(--display); font-size: clamp(32px, 5vw, 52px);
font-weight: 700; color: rgba(235,235,240,0.86); letter-spacing: -0.015em;
margin-bottom: 18px; line-height: 1.1;
}
.section-text {
font-size: 17px; color: rgba(235,235,240,0.82);
max-width: 680px; margin: 0 auto; line-height: 1.7;
}
/* ═══════════════════════════════════════════════════════
FEATURED STRIP — 3 cards: now playing, latest, new
═══════════════════════════════════════════════════════ */
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--hair);
border: 1px solid var(--hair);
}
@media (max-width: 860px) { .featured-grid { grid-template-columns: 1fr; } }
.feat-card {
background: var(--panel);
padding: 32px 28px;
display: flex; flex-direction: column;
min-height: 240px;
transition: background 0.2s;
}
.feat-card:hover { background: var(--panel-2); }
.feat-kicker {
font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.feat-kicker .dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--red); box-shadow: 0 0 6px var(--red);
animation: blink 1.2s ease-in-out infinite;
}
.feat-title {
font-family: var(--mono); font-size: 22px; font-weight: 900;
color: #fff; letter-spacing: 1.5px; line-height: 1.2;
margin-bottom: 8px; text-transform: uppercase;
}
.feat-sub {
font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
color: var(--dim); text-transform: uppercase; margin-bottom: 16px;
}
.feat-desc {
font-size: 14px; color: rgba(255,255,255,0.65);
line-height: 1.7; margin-bottom: 20px; flex-grow: 1;
}
.feat-link {
font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase;
padding-top: 14px; border-top: 1px dashed var(--hair);
display: flex; justify-content: space-between;
}
/* ═══════════════════════════════════════════════════════
DIVISIONS STRIP — six one-liners
═══════════════════════════════════════════════════════ */
.divisions {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
background: var(--hair);
border: 1px solid var(--hair);
}
@media (max-width: 1100px) { .divisions { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px) { .divisions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .divisions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .divisions { grid-template-columns: 1fr; } }
.div-cell {
background: var(--panel);
padding: 22px 18px;
transition: background 0.2s;
}
.div-cell:hover { background: var(--panel-2); }
.div-cell:hover .div-name { text-shadow: 0 0 10px var(--red-glow); }
.div-num {
font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px;
color: var(--faint); margin-bottom: 10px;
}
.div-name {
font-family: var(--display); font-size: 18px; font-weight: 700;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase;
transition: text-shadow 0.2s;
}
.div-line {
font-size: 13px; color: rgba(255,255,255,0.6);
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════
ABOUT
═══════════════════════════════════════════════════════ */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 780px) { .about { grid-template-columns: 1fr; gap: 32px; } }
.about-copy h2 {
font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 700;
color: #fff; letter-spacing: -0.015em; margin-bottom: 20px; line-height: 1.1;
}
.about-copy p { color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.8; margin-bottom: 16px; }
.about-copy strong { color: var(--red); text-shadow: 0 0 6px var(--red-glow); font-weight: 400; }
.about-stats { background: var(--panel); border: 1px solid var(--hair); padding: 36px; }
.stat-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 16px 0; border-bottom: 1px dashed var(--hair);
}
.stat-row:last-child { border-bottom: none; }
.stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px; color: var(--dim); text-transform: uppercase; }
.stat-value { font-family: var(--mono); font-size: 22px; font-weight: 900; color: var(--red); text-shadow: 0 0 8px var(--red-glow); }
.stat-value small { font-size: 11px; color: var(--faint); text-shadow: none; font-weight: 400; margin-left: 4px; letter-spacing: 2px; }
/* ═══════════════════════════════════════════════════════
ETHOS MARQUEE
═══════════════════════════════════════════════════════ */
.ethos { background: var(--panel); padding: 56px 0; border-bottom: 1px solid var(--hair); overflow: hidden; }
.ethos-track {
display: flex; gap: 60px;
font-family: var(--mono); font-size: clamp(18px, 3vw, 28px); letter-spacing: 4px;
color: var(--red); text-shadow: 0 0 12px var(--red-glow);
text-transform: uppercase; white-space: nowrap;
animation: marquee 50s linear infinite; will-change: transform;
}
.ethos-track span::after { content: '◉'; margin-left: 60px; color: rgba(255,50,50,0.4); }
/* Thinner band variant — used at the bottom of the homepage. Smaller
type, lighter padding, dimmer glow so it reads as a quiet sign-off
rather than competing with the contact CTA above it. */
.ethos.ethos-thin { padding: 18px 0; background: transparent; border-bottom: none; border-top: 1px solid rgba(255, 31, 31, 0.12); }
.ethos.ethos-thin .ethos-track {
font-size: clamp(11px, 1.1vw, 13px);
letter-spacing: 3px;
gap: 36px;
color: rgba(255, 31, 31, 0.55);
text-shadow: 0 0 6px rgba(255, 31, 31, 0.25);
font-weight: 400;
animation-duration: 70s;
}
.ethos.ethos-thin .ethos-track span::after { margin-left: 36px; font-size: 8px; color: rgba(255,31,31,0.3); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ═══════════════════════════════════════════════════════
CONTACT + FOOTER
═══════════════════════════════════════════════════════ */
.contact { text-align: center; padding: var(--space-contact) 0; }
.contact-title {
font-family: var(--display); font-size: clamp(32px, 6vw, 60px); font-weight: 700;
color: var(--red); text-shadow: 0 0 20px var(--red-glow);
letter-spacing: -0.02em; margin-bottom: 20px; line-height: 1;
}
.contact-text { color: rgba(255,255,255,0.7); font-size: 17px; max-width: 500px; margin: 0 auto 36px; line-height: 1.7; }
.contact-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.footer {
/* Fixed at the bottom — frames the page along with the on-air + nav strips.
No top border: the previous 1px red hairline used to cross through the
curtain hero's SCROLL indicator on short viewports. Black-on-black framing
reads cleaner without the seam line. */
position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
background-color: var(--ovn-black, #050000);
padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}
.footer-inner {
display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px;
color: var(--faint); text-transform: uppercase;
}
.footer-brand { color: var(--red); text-shadow: 0 0 6px var(--red-glow); }
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--red); }
@media (max-width: 720px) {
:root {
--space-section: 80px;
--space-hero: 100px;
--space-contact: 90px;
--container-pad: 20px;
}
.about-stats { padding: 24px; }
}
/* Accessibility — kill the flashy stuff for users who opt out of motion.
Beacon blink, brand pulse, ticker scroll, marquee, theme transitions all stop.
Scanlines stay (they're static), text glow stays (they're shadows, not motion). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.on-air-dot, .nav-brand::before, .feat-kicker .dot,
.pulse-led-live, .event-poster-chip.live { animation: none !important; }
.on-air-ticker-track, .ethos-track { animation: none !important; transform: none !important; }
}
/* ═══════════════════════════════════════════════════════
SUB-PAGE PRIMITIVES (added 2026-05-02)
page tag, page hero, card grid, status cards, related strip
═══════════════════════════════════════════════════════ */
/* Active nav state, mirrors the :hover state */
.nav-menu > li.active > a {
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
}
.nav-menu > li.active > a::after {
content: ''; position: absolute;
left: 18px; right: 18px; bottom: -1px;
height: 1px; background: var(--red);
box-shadow: 0 0 8px var(--red-glow);
}
/* Breadcrumb-y page tag below nav */
.page-tag {
font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-align: center; padding: 14px 0;
border-bottom: 1px solid var(--hair);
text-transform: uppercase; background: rgba(5,5,5,0.6);
}
.page-tag::before { content: '◉ '; }
/* Page hero, smaller than the root .hero */
.page-hero {
padding: 80px 0 70px; text-align: center; position: relative;
border-bottom: 1px solid var(--hair);
}
.page-hero-tag {
font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
margin-bottom: 18px; text-transform: uppercase;
}
.page-hero-title {
font-family: var(--display);
font-size: clamp(60px, 11vw, 120px); font-weight: 700; letter-spacing: -0.03em;
color: var(--red);
text-shadow: 0 0 22px var(--red-glow), 0 0 60px rgba(255,50,50,0.2);
margin-bottom: 18px; line-height: 0.92; text-transform: uppercase;
}
.page-hero-sub {
font-family: var(--mono); font-size: clamp(12px, 1.6vw, 16px); letter-spacing: 5px;
color: rgba(255,255,255,0.5); margin-bottom: 24px; text-transform: uppercase;
}
.page-hero-pitch {
max-width: 640px; margin: 0 auto 28px;
color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.7;
}
.page-hero::after {
content: ''; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 70%; height: 220px;
background: radial-gradient(ellipse at center, rgba(255,50,50,0.10), transparent 70%);
z-index: -1; pointer-events: none;
}
/* Card grid (services / studios / plugins / broadcast / agency / label) */
.card-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px; background: var(--hair); border: 1px solid var(--hair);
}
@media (max-width: 1080px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.svc-card {
background: var(--panel);
padding: 28px 24px;
display: flex; flex-direction: column;
min-height: 240px;
position: relative;
transition: background 0.2s;
}
.svc-card:hover {
background: var(--panel-2);
}
.svc-card:hover .svc-card-title { text-shadow: 0 0 10px rgba(255,50,50,0.25); }
.svc-card.dim { opacity: 0.55; }
.svc-card.dim:hover { opacity: 0.9; }
/* Tiny LED in top-left corner of every card */
.svc-card::before {
content: ''; position: absolute; top: 16px; left: 16px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--red); box-shadow: 0 0 6px var(--red);
}
.svc-card.dim::before { background: var(--amber); box-shadow: 0 0 6px rgba(245,166,35,0.4); }
.svc-card.archive::before { background: rgba(255,255,255,0.3); box-shadow: none; }
.svc-pill {
position: absolute; top: 14px; right: 16px;
font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
padding: 3px 8px; border: 1px solid var(--hair);
color: var(--faint); text-transform: uppercase;
}
.svc-pill.live { color: #000; background: var(--red); border-color: var(--red);
box-shadow: 0 0 10px var(--red-glow); font-weight: 900; }
.svc-pill.booking { color: var(--red); border-color: var(--red-dim); }
.svc-pill.shipping { color: var(--red); border-color: var(--red-dim); }
.svc-pill.open { color: var(--red); border-color: var(--red-dim); }
.svc-pill.always { color: var(--red); border-color: var(--red-dim); }
.svc-pill.soon { color: var(--amber); border-color: rgba(245,166,35,0.35); }
.svc-pill.archive { color: var(--faint); border-color: rgba(255,255,255,0.18); }
.svc-card-kicker {
font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px;
color: var(--red); margin: 16px 0 10px; text-transform: uppercase;
}
.svc-card.dim .svc-card-kicker { color: var(--amber); }
.svc-card.archive .svc-card-kicker { color: var(--faint); }
.svc-card-title {
font-family: var(--display); font-size: 22px; font-weight: 700;
color: #fff; letter-spacing: -0.005em; line-height: 1.2;
margin-bottom: 10px; text-transform: uppercase;
transition: text-shadow 0.2s;
}
.svc-card-price {
font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
margin-bottom: 14px; text-transform: uppercase;
}
.svc-card-desc {
font-size: 14px; color: rgba(255,255,255,0.65);
line-height: 1.7; margin-bottom: 18px; flex-grow: 1;
}
.svc-card-cta {
font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase;
padding-top: 14px; border-top: 1px dashed var(--hair);
display: flex; justify-content: space-between; align-items: center;
}
.svc-card.dim .svc-card-cta { color: var(--amber); text-shadow: none; }
.svc-card.archive .svc-card-cta { color: var(--dim); text-shadow: none; }
/* ═══════════════════════════════════════════════════════
ASSISTANT CARD — MAG-SHOT photo on top of an svc-card
═══════════════════════════════════════════════════════ */
.svc-card.assistant-card { padding: 0; overflow: hidden; }
.svc-card.assistant-card .svc-card-photo {
display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain;
background: #000;
border-bottom: 1px solid var(--hair);
filter: saturate(1.05) contrast(1.02);
transition: filter 0.3s ease;
}
.svc-card.assistant-card:hover .svc-card-photo {
filter: saturate(1.15) contrast(1.05);
}
.svc-card.assistant-card .assistant-card-body { padding: 24px 22px 22px; position: relative; }
.svc-card.assistant-card .svc-card-kicker { margin-top: 0; }
.svc-card.assistant-card::before { top: 18px; left: 18px; z-index: 2; }
.svc-card.assistant-card .svc-pill { top: 16px; right: 18px; z-index: 2; }
/* ═══════════════════════════════════════════════════════
EDITORIAL SPREAD — alternating image/text per persona
═══════════════════════════════════════════════════════ */
.editorial-spread {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0; align-items: stretch;
border-top: 1px solid var(--hair);
}
.editorial-spread.flip > .editorial-img { order: 2; }
.editorial-img {
position: relative; aspect-ratio: 4 / 5;
background-size: cover; background-position: center top;
background-repeat: no-repeat; background-color: #000;
}
.editorial-img.tall { aspect-ratio: 2 / 3; }
/* Until a section unlocks (reveal date passes), force EVERY locked image cell
to the same aspect ratio (4/5). Without this, Lily's `.tall` 2/3 ratio
makes section 4 taller than sections 2 + 3, which throws off:
(a) the spacing of the horizontal red dividers between sections
(b) the vertical position of each section's big number (02, 03, 04)
(c) where the "Profile drops" text lands in the opposite column
When Lily unlocks, .locked is removed and her .tall aspect kicks back in. */
.editorial-spread.locked .editorial-img.tall {
aspect-ratio: 4 / 5;
}
/* LOCKED state — backdrop-filter blurs the bg behind the overlay,
leaving the overlay text sharp (regular `filter` cascades to children). */
.lock-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; padding: 40px;
font-family: var(--mono);
backdrop-filter: blur(28px) saturate(0.4) brightness(0.5);
-webkit-backdrop-filter: blur(28px) saturate(0.4) brightness(0.5);
background: rgba(5,5,5,0.45);
}
.lock-overlay .lock-num {
font-family: var(--display); font-size: clamp(56px, 8vw, 96px);
font-weight: 800; color: rgba(255,255,255,0.92);
letter-spacing: -0.02em; line-height: 1;
text-shadow: 0 0 32px rgba(255,50,50,0.45);
margin-bottom: 12px;
}
.lock-overlay .lock-label {
font-size: 10px; letter-spacing: 4px; color: var(--red);
text-shadow: 0 0 6px var(--red-glow);
margin-bottom: 6px;
}
.lock-overlay .lock-date {
font-size: 16px; letter-spacing: 3px; color: rgba(255,255,255,0.85);
font-weight: 600;
}
.lock-overlay .lock-tag {
margin-top: 22px; padding: 6px 14px;
border: 1px solid var(--red-dim); color: var(--red);
font-size: 10px; letter-spacing: 3px;
text-shadow: 0 0 6px var(--red-glow);
}
.editorial-spread.locked .editorial-text {
background: var(--bg);
align-items: center; text-align: center;
}
.editorial-spread.locked .editorial-text > * { display: none; }
.editorial-spread.locked .editorial-text .locked-text {
display: block;
font-family: var(--mono); font-size: 12px; letter-spacing: 3px;
color: var(--faint); text-transform: uppercase; line-height: 2;
}
/* Locked agency card — same backdrop-filter pattern */
.svc-card.assistant-card.locked { position: relative; }
.svc-card.assistant-card.locked .lock-overlay {
position: absolute; top: 0; left: 0; right: 0;
aspect-ratio: 4 / 5; padding: 24px;
}
.svc-card.assistant-card.locked .lock-overlay .lock-num {
font-size: clamp(40px, 6vw, 64px); margin-bottom: 8px;
}
.svc-card.assistant-card.locked .lock-overlay .lock-date { font-size: 13px; }
.svc-card.assistant-card.locked .assistant-card-body { display: none; }
.svc-card.assistant-card.locked .assistant-card-body.locked-body {
display: block; padding: 18px 22px 20px;
}
.editorial-text { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; background: var(--panel); }
.editorial-text .section-label { margin-bottom: 18px; }
.editorial-text .editorial-tagline {
font-family: var(--display); font-style: italic; font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25;
color: rgba(235,235,240,0.94); margin-bottom: 18px;
letter-spacing: -0.005em;
}
.editorial-text .editorial-name {
font-family: var(--display); font-size: clamp(38px, 5vw, 56px);
font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1;
text-shadow: 0 0 24px rgba(255,50,50,0.18);
margin-bottom: 8px;
}
.editorial-text .editorial-sublabel {
font-family: var(--mono); font-size: 11px; letter-spacing: 3px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; margin-bottom: 22px;
}
.editorial-text .editorial-desc {
font-size: 17px; line-height: 1.7; color: rgba(235,235,240,0.82);
margin-bottom: 22px;
}
.editorial-text .editorial-strengths {
list-style: none; padding: 0; margin: 0 0 22px;
display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
.editorial-text .editorial-strengths li {
font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
color: rgba(235,235,240,0.78); text-transform: uppercase;
padding-left: 16px; position: relative;
}
.editorial-text .editorial-strengths li::before {
content: '◉'; position: absolute; left: 0; top: 0;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
font-size: 9px;
}
.editorial-text .editorial-role {
font-family: var(--display); font-style: italic; font-size: 15px;
color: rgba(235,235,240,0.7); line-height: 1.5;
border-top: 1px dashed var(--hair); padding-top: 18px;
}
@media (max-width: 880px) {
.editorial-spread { grid-template-columns: 1fr; }
.editorial-spread.flip > .editorial-img { order: 0; }
.editorial-img { min-height: 380px; }
.editorial-text { padding: 40px 28px; }
}
/* ═══════════════════════════════════════════════════════
IMAGE-LED CARD — image is the hero, body slides up on hover
═══════════════════════════════════════════════════════ */
.svc-card.image-card {
padding: 0;
min-height: 380px;
overflow: hidden;
position: relative;
}
/* The hologram halo is the alive indicator now — kill the LED dot here */
.svc-card.image-card::before { display: none; }
/* Hologram-tilt: full plugin visible, floating in 3D space with red glow */
.svc-card.image-card.has-shot {
background:
radial-gradient(ellipse at 50% 40%, rgba(255,50,50,0.10), transparent 60%),
linear-gradient(135deg, #0c0c0c 0%, #050505 100%);
}
.svc-card.image-card .plugin-shot {
position: absolute;
top: 42%; left: 50%;
transform: translate(-50%, -50%) perspective(1400px) rotateY(-14deg) rotateX(6deg) rotate(-2deg);
transform-origin: center center;
width: 108%;
height: 88%;
object-fit: cover;
object-position: center top;
z-index: 1;
filter: saturate(1.25) contrast(1.12) brightness(1.15);
border: 1px solid rgba(255,50,50,0.4);
border-radius: 6px;
box-shadow:
0 0 60px rgba(255,50,50,0.40),
0 0 120px rgba(255,50,50,0.20),
0 30px 80px rgba(0,0,0,0.7);
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease, box-shadow 0.5s ease;
animation: hologramFloat 6s ease-in-out infinite;
}
@keyframes hologramFloat {
0%, 100% { transform: translate(-50%, -50%) perspective(1400px) rotateY(-14deg) rotateX(6deg) rotate(-2deg) translateY(0); }
50% { transform: translate(-50%, -50%) perspective(1400px) rotateY(-14deg) rotateX(6deg) rotate(-2deg) translateY(-6px); }
}
/* VEGAS MODE — rainbow hue-cycle on hover */
@keyframes vegas {
0% { filter: saturate(1.6) contrast(1.18) brightness(1.2) hue-rotate(0deg); }
100% { filter: saturate(1.6) contrast(1.18) brightness(1.2) hue-rotate(360deg); }
}
.svc-card.image-card.has-shot:hover .plugin-shot {
transform: translate(-50%, -50%) perspective(1400px) rotateY(-8deg) rotateX(3deg) rotate(-1deg) scale(1.08);
box-shadow:
0 0 90px rgba(255,50,50,0.55),
0 0 180px rgba(255,50,50,0.28),
0 30px 80px rgba(0,0,0,0.7);
animation: vegas 2.4s linear infinite;
}
/* Vegas the surrounding glow halo too — backdrop tint via card */
.svc-card.image-card.has-shot:hover {
animation: vegasCard 2.4s linear infinite;
}
@keyframes vegasCard {
0% { box-shadow: inset 0 0 80px rgba(255,50,50,0.10); }
25% { box-shadow: inset 0 0 80px rgba(255,200,50,0.10); }
50% { box-shadow: inset 0 0 80px rgba(50,255,160,0.10); }
75% { box-shadow: inset 0 0 80px rgba(80,150,255,0.10); }
100% { box-shadow: inset 0 0 80px rgba(255,50,50,0.10); }
}
/* Hologram scanlines drawn just over the floating image */
.svc-card.image-card.has-shot::before {
content: '';
position: absolute; inset: 0; z-index: 3;
background: repeating-linear-gradient(
0deg,
transparent 0, transparent 3px,
rgba(255,50,50,0.05) 3px, rgba(255,50,50,0.05) 4px
);
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.6;
}
/* Placeholder for cards without a real screenshot — dark gradient with a
warm red glow + the plugin's first letter watermark. */
.svc-card.image-card.no-shot {
background:
radial-gradient(ellipse at 70% 30%, rgba(255,50,50,0.18), transparent 55%),
radial-gradient(ellipse at 30% 80%, rgba(255,50,50,0.10), transparent 60%),
linear-gradient(135deg, #161616 0%, #060606 100%);
}
.svc-card.image-card.no-shot::before {
/* Subtle scanline noise pattern over the placeholder */
content: '';
position: absolute; inset: 0; z-index: 0;
background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,50,50,0.025) 3px, rgba(255,50,50,0.025) 4px);
pointer-events: none;
}
.svc-card.image-card.no-shot .plugin-watermark {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -55%);
font-family: var(--display);
font-size: clamp(80px, 16vw, 180px);
font-weight: 800;
color: rgba(255,50,50,0.10);
letter-spacing: -0.04em;
line-height: 1; z-index: 1;
text-shadow: 0 0 40px rgba(255,50,50,0.08);
pointer-events: none;
user-select: none;
}
.svc-card.image-card.dim.no-shot {
background:
radial-gradient(ellipse at 70% 30%, rgba(245,166,35,0.14), transparent 60%),
linear-gradient(135deg, #161410 0%, #060503 100%);
}
.svc-card.image-card.dim.no-shot .plugin-watermark { color: rgba(245,166,35,0.10); }
/* Veil that ensures title + body read on top of image/placeholder */
.svc-card.image-card::after {
content: '';
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg,
rgba(0,0,0,0.30) 0%,
rgba(0,0,0,0.10) 30%,
rgba(0,0,0,0.55) 65%,
rgba(0,0,0,0.94) 100%);
pointer-events: none;
transition: background 0.4s ease;
}
.svc-card.image-card:hover::after {
background: linear-gradient(180deg,
rgba(0,0,0,0.40) 0%,
rgba(0,0,0,0.40) 25%,
rgba(0,0,0,0.85) 60%,
rgba(0,0,0,0.97) 100%);
}
.svc-card.image-card .image-card-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 22px 22px 22px;
z-index: 5;
}
.svc-card.image-card .svc-card-kicker { margin: 0 0 6px; }
.svc-card.image-card .svc-card-title {
margin: 0; font-size: 26px; line-height: 1.15;
}
.svc-card.image-card .image-card-reveal {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s ease,
padding-top 0.45s ease;
}
.svc-card.image-card:hover .image-card-reveal,
.svc-card.image-card:focus-within .image-card-reveal {
max-height: 280px;
opacity: 1;
padding-top: 14px;
}
.svc-card.image-card .svc-card-price {
margin: 0 0 10px;
}
.svc-card.image-card .svc-card-desc {
margin: 0 0 14px;
color: rgba(255,255,255,0.85);
}
.svc-card.image-card .svc-card-cta {
margin: 0; padding-top: 14px;
border-top: 1px dashed var(--hair);
}
/* ═══════════════════════════════════════════════════════
PLUGIN SHOT — angled, blurred-edge plugin screenshot
inside an svc-card. Mimics a low-f-stop photograph. (LEGACY)
═══════════════════════════════════════════════════════ */
.svc-card.has-shot { position: relative; overflow: hidden; min-height: 320px; }
.svc-card.has-shot > .svc-card-kicker,
.svc-card.has-shot > .svc-card-title,
.svc-card.has-shot > .svc-card-price,
.svc-card.has-shot > .svc-card-desc,
.svc-card.has-shot > .svc-card-cta,
.svc-card.has-shot > .svc-pill { position: relative; z-index: 5; }
/* Two-layer depth-of-field: a heavily blurred copy fills the area for
atmosphere, a sharp focused copy on top is masked to a small focal area.
Mimics a macro / wide-aperture lens. Minimal tilt for casual placement. */
/* Two-layer depth-of-field as a small bottom-right decoration.
Image is the size of an album thumbnail, well clear of the card title. */
.svc-card.has-shot .plugin-shot-bg,
.svc-card.has-shot .plugin-shot {
position: absolute;
bottom: 16px; right: 16px;
width: 38%; max-width: 220px;
transform: rotate(2deg);
border-radius: 4px;
pointer-events: none;
transition: filter 0.5s ease, transform 0.6s ease;
}
.svc-card.has-shot .plugin-shot-bg {
z-index: 1;
filter: blur(16px) saturate(1.2) brightness(0.85);
opacity: 0.55;
width: 50%; max-width: 280px;
bottom: 0; right: 0;
}
.svc-card.has-shot .plugin-shot {
z-index: 2;
filter: saturate(1.15) contrast(1.06);
border: 1px solid rgba(255,50,50,0.32);
box-shadow:
0 16px 36px rgba(0,0,0,0.55),
0 0 50px rgba(255,50,50,0.22);
opacity: 0.95;
-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 50%, rgba(0,0,0,0.6) 80%, transparent 100%);
mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 50%, rgba(0,0,0,0.6) 80%, transparent 100%);
}
.svc-card.has-shot:hover .plugin-shot-bg {
filter: blur(24px) saturate(1.3) brightness(0.95);
opacity: 0.55;
}
.svc-card.has-shot:hover .plugin-shot {
filter: saturate(1.25) contrast(1.1);
opacity: 1;
transform: rotate(2deg) scale(1.05);
}
/* "GO TO" related-divisions strip at the bottom of each page */
.related-strip {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 2px; background: var(--hair); border: 1px solid var(--hair);
}
@media (max-width: 860px) { .related-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .related-strip { grid-template-columns: repeat(2, 1fr); } }
.related-cell {
background: var(--panel); padding: 22px 16px; text-align: center;
transition: background 0.2s;
}
.related-cell:hover { background: var(--panel-2); }
.related-cell:hover .related-cell-name { text-shadow: 0 0 8px var(--red-glow); }
.related-cell-num {
font-family: var(--mono); font-size: 9px; letter-spacing: 2.5px;
color: var(--faint); text-transform: uppercase; margin-bottom: 6px;
}
.related-cell-name {
font-family: var(--mono); font-size: 14px; font-weight: 900;
color: var(--red); letter-spacing: 2px;
text-transform: uppercase;
transition: text-shadow 0.2s;
}
/* Section header for in-page sub-sections */
.sub-section { padding: 70px 0; border-bottom: 1px solid var(--hair); }
.sub-head { margin-bottom: 36px; text-align: center; }
.sub-head .section-label::before { content: '◉ '; }
/* "POWER BAR" - thin glowing rule between content blocks */
.power-bar {
height: 1px; background: var(--hair); margin: 0;
position: relative; overflow: hidden;
}
.power-bar::after {
content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
}
/* Instagram carousel placeholder cells — used in the DONATE section.
Replace the inner content with real ![]()
tags when the IG embed is wired. */
.ig-cell {
background: var(--panel);
aspect-ratio: 1;
position: relative;
transition: background 0.2s;
overflow: hidden;
}
.ig-cell::before {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg,
transparent 0, transparent 6px,
rgba(255,50,50,0.04) 6px, rgba(255,50,50,0.04) 7px);
}
.ig-cell:hover { background: var(--panel-2); }
.ig-cell:hover::before { background: repeating-linear-gradient(45deg,
transparent 0, transparent 6px,
rgba(255,50,50,0.10) 6px, rgba(255,50,50,0.10) 7px); }
.ig-cell-inner {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center;
height: 100%;
font-family: var(--ui); color: var(--faint);
letter-spacing: 2px; font-size: 11px; text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════
EVENT POSTER CARD — flyer-shaped, full-bleed image with
gradient overlay. Used on / and /events.
═══════════════════════════════════════════════════════ */
.event-poster {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
background: var(--panel);
aspect-ratio: 3 / 4;
min-height: 380px;
padding: 0;
overflow: hidden;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.event-poster:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,50,50,0.18); }
/* Flyer image background */
.event-poster-flyer {
position: absolute; inset: 0;
background-position: center; background-size: cover; background-repeat: no-repeat;
z-index: 0;
}
/* Faux-CRT scanlines over the flyer for brand consistency */
.event-poster-flyer::after {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(0deg,
rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 3px);
pointer-events: none;
}
/* Bottom gradient for text legibility */
.event-poster-grad {
position: absolute; left: 0; right: 0; bottom: 0; top: 30%;
background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.55) 40%, rgba(5,5,5,0.95) 90%);
z-index: 1;
}
/* Top-row chrome: pill + date */
.event-poster-top {
position: absolute; top: 0; left: 0; right: 0;
display: flex; justify-content: space-between; align-items: flex-start;
padding: 14px;
z-index: 3;
background: linear-gradient(180deg, rgba(5,5,5,0.85), transparent);
}
.event-poster-date {
font-family: var(--ui); font-size: 11px; letter-spacing: 2px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; font-weight: 700;
background: rgba(5,5,5,0.7); padding: 5px 9px;
border: 1px solid var(--red-dim);
}
/* Body content (title, subtitle, venue, CTA) */
.event-poster-body {
position: relative; z-index: 2;
padding: 20px;
}
.event-poster-subtitle {
font-family: var(--ui); font-size: 11px; letter-spacing: 3px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; margin-bottom: 6px;
}
.event-poster-title {
font-family: var(--display); font-size: clamp(22px, 3vw, 32px);
font-weight: 700; line-height: 1; letter-spacing: -0.01em;
color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
text-transform: uppercase; margin-bottom: 10px;
}
.event-poster-bio {
font-family: var(--sans); font-size: 13px; line-height: 1.55;
color: rgba(255,255,255,0.78); margin-bottom: 12px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.event-poster-venue {
font-family: var(--ui); font-size: 10px; letter-spacing: 2px;
color: var(--faint); text-transform: uppercase;
margin-bottom: 12px;
}
.event-poster-cta {
font-family: var(--ui); font-size: 11px; letter-spacing: 2.5px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; font-weight: 700;
padding-top: 12px; border-top: 1px solid var(--red-dim);
display: flex; justify-content: space-between; align-items: center;
}
/* No-flyer fallback: stenciled poster with red wash + giant title */
.event-poster.no-flyer .event-poster-flyer {
background:
radial-gradient(ellipse at 50% 30%, rgba(255,50,50,0.28), transparent 60%),
repeating-linear-gradient(45deg,
rgba(255,50,50,0.06) 0, rgba(255,50,50,0.06) 8px,
rgba(255,50,50,0.02) 8px, rgba(255,50,50,0.02) 16px),
var(--panel);
}
.event-poster.no-flyer .event-poster-stencil {
position: absolute; top: 35%; left: 0; right: 0;
text-align: center;
font-family: var(--display);
font-size: clamp(48px, 8vw, 96px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.9;
color: var(--red);
text-shadow: 0 0 20px var(--red-glow), 0 0 50px rgba(255,50,50,0.18);
text-transform: uppercase;
z-index: 1;
padding: 0 20px;
opacity: 0.85;
}
/* External-event chip color (PoshVip / Ticketmaster / etc) */
.event-poster-chip {
font-family: var(--ui); font-size: 9px; letter-spacing: 2px;
padding: 4px 8px; text-transform: uppercase; font-weight: 700;
border: 1px solid var(--red-dim); color: var(--red);
background: rgba(5,5,5,0.7);
}
.event-poster-chip.live { color: #000; background: var(--red); border-color: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.event-poster-chip.ext { color: var(--amber); border-color: rgba(245,166,35,0.55); }
/* Tighter grid for event posters — more breathing room than service cards */
.events-grid-posters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
/* Right-side dropdowns — the last 3 nav items open right-aligned so
they don't spill past the right edge of the viewport. !important and
the chained selector lock specificity above any later .dropdown rule
so this can't be undone by cascade order. */
.nav .nav-menu > li:nth-last-child(-n+3) > .dropdown,
.nav-menu > li:nth-last-child(-n+3) > .dropdown {
right: 0 !important;
left: auto !important;
}
/* Hard ceiling on dropdown width so even a wide title can't push the
panel past the viewport. Subtract 32px for breathing room. */
.dropdown {
max-width: calc(100vw - 32px);
box-sizing: border-box;
}
.nav-menu > li > a { white-space: nowrap; }
/* ═══════════════════════════════════════════════════════
CONTACT FORM MODAL (opened by clicking any service / mailto link)
═══════════════════════════════════════════════════════ */
.oven-modal {
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: none; align-items: flex-start; justify-content: center;
padding: 60px 20px 20px; overflow-y: auto;
}
.oven-modal.open { display: flex; }
.oven-modal-card {
background: var(--panel);
border: 1px solid var(--red-dim);
border-top: 1px solid var(--red);
box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 50px rgba(255,50,50,0.15);
max-width: 560px; width: 100%;
padding: 36px;
position: relative;
}
.oven-modal-close {
position: absolute; top: 12px; right: 14px;
background: transparent; border: 1px solid var(--hair);
color: var(--dim); font-family: var(--ui); font-size: 11px;
letter-spacing: 2px; padding: 6px 10px; cursor: pointer;
text-transform: uppercase; transition: all 0.2s;
}
.oven-modal-close:hover { color: var(--red); border-color: var(--red-dim); }
.oven-modal-tag {
font-family: var(--ui); font-size: 10px; letter-spacing: 3px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
margin-bottom: 8px; text-transform: uppercase;
}
.oven-modal-tag::before { content: '◉ '; }
.oven-modal-title {
font-family: var(--display); font-size: 28px; font-weight: 700;
color: #fff; letter-spacing: -0.01em; line-height: 1.05;
margin-bottom: 8px;
}
.oven-modal-sub {
font-family: var(--sans); font-size: 13px; line-height: 1.5;
color: var(--dim); margin-bottom: 22px;
}
.oven-modal-row { margin-bottom: 14px; }
.oven-modal-row label {
display: block; font-family: var(--ui); font-size: 10px; letter-spacing: 2px;
color: var(--dim); text-transform: uppercase; margin-bottom: 6px;
}
.oven-modal-row input,
.oven-modal-row textarea {
width: 100%;
background: rgba(5,5,5,0.5);
border: 1px solid var(--hair);
color: var(--text);
font-family: var(--sans); font-size: 14px;
padding: 10px 12px;
border-radius: 0; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.oven-modal-row input:focus,
.oven-modal-row textarea:focus {
border-color: var(--red-dim);
box-shadow: 0 0 0 1px var(--red-dim), 0 0 12px var(--red-glow);
}
.oven-modal-row textarea { resize: vertical; min-height: 90px; }
.oven-modal-actions {
margin-top: 22px;
display: flex; gap: 12px; flex-wrap: wrap;
}
.oven-modal-actions .btn { flex: 1; justify-content: center; }
.oven-modal-status {
margin-top: 14px;
font-family: var(--ui); font-size: 11px; letter-spacing: 2px;
text-transform: uppercase;
min-height: 16px;
}
.oven-modal-status.ok { color: var(--red); text-shadow: 0 0 6px var(--red-glow); }
.oven-modal-status.err { color: var(--amber); }
.oven-modal-foot {
margin-top: 18px; padding-top: 16px;
border-top: 1px dashed var(--hair);
font-family: var(--ui); font-size: 10px; letter-spacing: 1.5px;
color: var(--faint); text-transform: uppercase;
text-align: center;
}
/* ═══════════════════════════════════════════════════════
PULSE STRIP — three LED readouts under the hero.
Hardware-panel feel; shows broadcast / next event / studio status.
Replaces the old illustrative "WHAT'S HOT" featured strip.
═══════════════════════════════════════════════════════ */
.pulse-strip {
padding: 28px 0; border-bottom: 1px solid var(--hair);
background: linear-gradient(180deg, rgba(5,5,5,0.4), rgba(10,10,10,0.6));
}
.pulse-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px; background: var(--hair); border: 1px solid var(--hair);
}
@media (max-width: 720px) { .pulse-grid { grid-template-columns: 1fr; } }
.pulse-cell {
background: var(--panel);
padding: 22px 24px;
display: flex; flex-direction: column;
position: relative;
transition: background 0.2s, padding-left 0.2s;
text-decoration: none;
min-height: 110px;
}
.pulse-cell:hover { background: var(--panel-2); padding-left: 28px; }
.pulse-cell:hover .pulse-cell-status { text-shadow: 0 0 10px var(--red-glow); }
.pulse-led {
position: absolute; top: 22px; right: 24px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--red);
box-shadow: 0 0 8px var(--red), 0 0 3px var(--red);
}
.pulse-led.pulse-led-live { animation: blink 1.2s ease-in-out infinite; }
.pulse-led.pulse-led-off { background: #2a2a2a; box-shadow: none; }
.pulse-led.pulse-led-soon { background: var(--amber); box-shadow: 0 0 8px rgba(245,166,35,0.5); }
.pulse-cell-label {
font-family: var(--ui); font-size: 10px; letter-spacing: 3px;
color: var(--faint); text-transform: uppercase; margin-bottom: 8px;
font-weight: 700;
}
.pulse-cell-status {
font-family: var(--ui); font-size: 17px; letter-spacing: 1px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; font-weight: 700;
line-height: 1.15; margin-bottom: 6px;
transition: text-shadow 0.2s;
}
.pulse-cell-line {
font-family: var(--sans); font-size: 13px;
color: var(--dim); line-height: 1.5;
}
/* Off-air variant: dim the whole pulse-broadcast cell when nothing's live */
body.off-air .pulse-cell#pulse-broadcast .pulse-cell-status {
color: var(--dim); text-shadow: none;
}
/* ═══════════════════════════════════════════════════════
ABOUT section — new long-form copy + photo grid (2026-05-02)
═══════════════════════════════════════════════════════ */
.about-copy p { margin-bottom: 14px; }
.about-copy .about-stack {
font-family: var(--display); font-size: 22px; font-weight: 700;
color: var(--red); line-height: 1.5; letter-spacing: -0.005em;
text-shadow: 0 0 6px var(--red-glow);
margin: 22px 0;
}
.about-copy .about-stack-tags {
display: flex; flex-wrap: wrap; gap: 18px 22px;
font-family: var(--mono);
font-size: 11px; letter-spacing: 3px; font-weight: 400;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
margin: 18px 0 6px;
line-height: 1;
}
.about-copy .about-stack-tags span {
display: inline-block;
padding: 6px 0;
}
.about-copy .about-divider {
border: 0;
border-top: 1px dashed var(--hair);
margin: 36px 0 28px;
width: 100%;
}
.about-copy .about-lede {
font-size: 18px;
color: rgba(255,255,255,0.85);
line-height: 1.65;
margin-bottom: 22px;
}
.about-copy .about-pullquote {
font-family: var(--display);
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 700;
font-style: italic;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--red);
text-shadow: 0 0 14px var(--red-glow);
text-align: center;
margin: 40px auto;
padding: 22px 0;
max-width: 720px;
border-top: 1px solid rgba(255,50,50,0.25);
border-bottom: 1px solid rgba(255,50,50,0.25);
}
.about-copy .about-rally {
font-family: var(--display);
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.015em;
color: rgba(255,255,255,0.95);
text-align: center;
margin: 28px 0 30px;
line-height: 1;
}
/* Rack-plate manifesto stamp — three credo rows with LED bullets,
numbered slots, big display type, trailing fill rule.
FX: A06 stagger + B02 LED pulse + .reveal-stack scroll reveal. */
.about-copy .about-tagline {
margin-top: 40px;
padding: 28px 0 6px;
border-top: 1px dashed var(--hair);
display: flex;
flex-direction: column;
gap: 12px;
}
.about-copy .about-tagline .tag-line {
display: grid;
grid-template-columns: 12px 36px auto 1fr;
align-items: center;
gap: 16px;
padding: 10px 4px 10px 2px;
font-family: var(--ui);
text-transform: uppercase;
position: relative;
transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1),
filter 0.35s ease;
}
.about-copy .about-tagline .tag-line::before {
content: '';
position: absolute;
left: -8px; top: 0; bottom: 0;
width: 2px;
background: rgba(255, 31, 31, 0.0);
transition: background 0.35s ease, box-shadow 0.35s ease;
}
.about-copy .about-tagline .tag-line:hover {
transform: translateX(6px);
}
.about-copy .about-tagline .tag-line:hover::before {
background: var(--ovn-red, var(--red));
box-shadow: 0 0 10px var(--red-glow);
}
.about-copy .about-tagline .tag-line:hover .tag-text {
text-shadow: 0 0 16px var(--red-glow), 0 0 28px rgba(255,31,31,0.35);
}
.about-copy .about-tagline .tag-led {
width: 10px; height: 10px; border-radius: 50%;
background: var(--ovn-red, var(--red));
box-shadow: 0 0 8px var(--red-glow), 0 0 16px var(--red-glow);
animation: aboutTagLedPulse 2.6s ease-in-out infinite;
}
.about-copy .about-tagline .tag-line:nth-child(1) .tag-led { animation-delay: 0s; }
.about-copy .about-tagline .tag-line:nth-child(2) .tag-led { animation-delay: 0.45s; }
.about-copy .about-tagline .tag-line:nth-child(3) .tag-led { animation-delay: 0.9s; }
@keyframes aboutTagLedPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--red-glow), 0 0 16px var(--red-glow); }
50% { opacity: 0.45; box-shadow: 0 0 3px var(--red-glow); }
}
.about-copy .about-tagline .tag-num {
font-family: var(--ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
color: rgba(255,255,255,0.42);
text-align: left;
}
.about-copy .about-tagline .tag-text {
font-family: var(--display);
font-size: clamp(18px, 2.1vw, 26px);
letter-spacing: 0.5px;
font-weight: 700;
color: var(--ovn-red, var(--red));
text-shadow: 0 0 8px var(--red-glow);
line-height: 1.1;
white-space: nowrap;
transition: text-shadow 0.35s ease;
}
.about-copy .about-tagline .tag-rule {
height: 1px;
background: linear-gradient(90deg,
rgba(255,31,31,0.55) 0%,
rgba(255,31,31,0.18) 60%,
rgba(255,31,31,0.0) 100%);
align-self: center;
}
@media (max-width: 720px) {
.about-copy .about-tagline .tag-line {
grid-template-columns: 10px 28px 1fr;
gap: 12px;
}
.about-copy .about-tagline .tag-rule { display: none; }
.about-copy .about-tagline .tag-text {
font-size: clamp(15px, 4.6vw, 20px);
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
.about-copy .about-tagline .tag-led { animation: none; }
.about-copy .about-tagline .tag-line { transition: none; }
}
/* Photo grid replacement for the old stats box */
.about-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(--hair);
border: 1px solid var(--hair);
align-self: start;
position: relative;
}
.about-photo {
background: var(--panel);
aspect-ratio: 1;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
transition: transform 0.2s, filter 0.2s;
}
.about-photo::before {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg,
rgba(255,50,50,0.05) 0, rgba(255,50,50,0.05) 8px,
transparent 8px, transparent 16px);
pointer-events: none;
}
.about-photo.has-image::before {
background: linear-gradient(180deg, transparent 60%, rgba(5,5,5,0.6));
}
.about-photo:hover { filter: brightness(1.15); }
.about-photo-label {
position: absolute; bottom: 10px; left: 12px;
font-family: var(--ui); font-size: 10px; letter-spacing: 3px;
color: var(--red); text-shadow: 0 0 6px var(--red-glow);
text-transform: uppercase; font-weight: 700;
z-index: 2;
}
.about-photo-note {
grid-column: 1 / -1;
font-family: var(--ui); font-size: 9px; letter-spacing: 2px;
color: var(--faint); text-transform: uppercase;
padding: 12px 14px; background: var(--panel);
border-top: 1px dashed var(--hair);
text-align: center;
}
.about-photo-note code { color: var(--red); }
.about-photo.has-image + .about-photo-note,
.about-photos.all-loaded .about-photo-note { display: none; }
/* Force events grid to keep posters at a sensible size even with one event,
and to center single/double cards instead of left-aligning. auto-fit
collapses empty tracks (vs auto-fill which keeps them) so justify-content
actually centers the visible posters. */
.events-grid-posters {
grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
justify-content: center;
justify-items: center;
}
.events-grid-posters .event-poster {
max-width: 380px;
width: 100%;
}
/* ═══════════════════════════════════════════════════════
HERO FX — broadcast-monitor frame.
Radar dot-grid + CRT scan sweep + occasional data pulses + scope.
Hard-edged, equipment-feel, all generated in oven.js (injectHeroFx).
═══════════════════════════════════════════════════════ */
.hero { overflow: hidden; }
/* Hero FX layer — sits behind content */
.hero-fx {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* Radar dot grid — faint white dots on a regular grid, like an
instrument readout / scope graticule. */
.hero-fx .grid {
position: absolute; inset: 0;
background-image:
radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.5px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 95%);
}
/* Soft red wash behind the headline. */
.hero-fx .wash {
position: absolute;
top: 35%; left: 50%;
width: 75%; height: 380px;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, rgba(255,50,50,0.13), transparent 70%);
}
/* Hero content above the FX layer */
.hero > .container { position: relative; z-index: 2; }
/* Spectrum analyzer — sits inside the hero only, stretched edge to edge,
chunky bigger blocks. All-red, slow-moving so it reads as a stationary
audio meter behind the barn-door curtain. When the doors slide apart,
the bars read as a clear hardware-style VU.
Opacity 0.75 + softer top fade so it actually shows through the dark bg. */
.hero .spectrum {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60%;
z-index: 1;
pointer-events: none;
opacity: 0.75;
mask-image: linear-gradient(to top,
#000 0%, #000 50%, rgba(0,0,0,0.8) 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to top,
#000 0%, #000 50%, rgba(0,0,0,0.8) 80%, transparent 100%);
}
.hero .spectrum canvas { width: 100%; height: 100%; display: block; }
/* Touch / reduced-motion fallbacks */
@media (max-width: 768px) {
.hero-fx .grid { background-size: 24px 24px; }
.hero .spectrum { height: 50%; opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
.hero .spectrum { display: none; }
}
/* ═══════════════════════════════════════════════════════
DONATE STORY — centered narrative block with fading
slideshow + DOS-style typewriter text. Replaces the old
left-text / right-grid split with a single centered column.
═══════════════════════════════════════════════════════ */
.donate-story {
max-width: 760px;
margin: 0 auto 24px;
text-align: center;
}
/* Fading slideshow — sits above the typed text */
.donate-slideshow {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 auto 40px;
overflow: hidden;
border: 1px solid var(--hair);
background: var(--panel);
}
.donate-slideshow .slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.donate-slideshow .slide.active { opacity: 1; }
.donate-slideshow .slide::after {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg,
rgba(255,50,50,0.05) 0, rgba(255,50,50,0.05) 8px,
transparent 8px, transparent 16px);
pointer-events: none;
}
.donate-slideshow .slide.has-image::after {
background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,0.55));
}
.donate-slideshow .slide-empty {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--ui); font-size: 10px; letter-spacing: 2px;
color: var(--faint); text-transform: uppercase;
text-align: center; padding: 0 24px;
pointer-events: none;
}
.donate-slideshow .slide-empty code {
color: var(--red); margin-left: 6px;
}
.donate-slideshow.has-images .slide-empty { display: none; }
/* Slide indicator dots at the bottom */
.donate-slideshow .slide-dots {
position: absolute;
bottom: 12px; left: 0; right: 0;
display: flex; justify-content: center; gap: 6px;
z-index: 3;
}
.donate-slideshow .slide-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.25);
transition: background 0.3s, box-shadow 0.3s;
}
.donate-slideshow .slide-dot.active {
background: var(--red);
box-shadow: 0 0 6px var(--red-glow);
}
/* DOS terminal text — narrower column, mono font, left-aligned within
the centered story container so chars don't reflow as they type. */
.donate-text {
text-align: left;
font-family: var(--mono);
font-size: 14px;
line-height: 1.85;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.82);
margin: 0 auto 28px;
max-width: 680px;
}
.donate-text p {
margin-bottom: 22px;
min-height: 1.85em; /* keep layout stable while empty */
}
.donate-text p:last-child { margin-bottom: 0; }
.donate-text strong {
color: var(--red);
text-shadow: 0 0 6px var(--red-glow);
font-weight: 400;
}
.donate-cta {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-top: 36px;
}
/* DOS-style blinking square caret — inserted at the typing position by
the dos-typer JS. Brand red with a soft glow so it reads as a real
terminal cursor on a CRT. Uses steps() so it snaps on/off. */
.dos-caret {
display: inline-block;
width: 0.55em; height: 1em;
background: var(--red);
margin-left: 2px;
vertical-align: text-bottom;
box-shadow: 0 0 8px var(--red-glow), 0 0 4px var(--red);
animation: dos-blink 1s steps(1, end) infinite;
}
@keyframes dos-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.dos-caret { animation: none; }
.donate-slideshow .slide { transition: none; }
}
/* ═══════════════════════════════════════════════════════
SIGNATURE LINE — handwritten cursive with two-part draw
that breathes at the comma. Marck Script brush hand.
═══════════════════════════════════════════════════════ */
.signature-line {
display: inline-block;
font-family: 'Italianno', 'Mr Dafoe', cursive;
font-weight: 400;
font-size: clamp(34px, 4.2vw, 52px);
color: var(--red); /* Match the menu / brand red */
text-shadow:
0 0 8px var(--red-glow),
0 0 24px rgba(255,50,50,0.35),
0 0 56px rgba(255,50,50,0.18),
0 0 90px rgba(255,50,50,0.10);
letter-spacing: 0.5px;
line-height: 1.3;
white-space: nowrap;
}
/* Each clause draws separately. Breath pause between them.
Padding gives glyphs with left-side flourish (like the f in "from")
room to render without being clipped by the inset's left edge. */
.signature-line .sig-part {
display: inline-block;
padding: 0.05em 0.12em 0.1em 0.12em;
margin-right: -0.1em; /* compensate so layout reads tight */
clip-path: inset(0 100% 0 0);
-webkit-clip-path: inset(0 100% 0 0);
}
.signature-line.signed .sig-part-1 {
animation: handwrite 1.3s cubic-bezier(0.42, 0.0, 0.18, 1) forwards;
}
.signature-line.signed .sig-part-2 {
animation: handwrite 2.1s cubic-bezier(0.42, 0.0, 0.18, 1) 1.7s forwards;
}
@keyframes handwrite {
to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}
/* Leading red ink-dot stays sharp like a wax seal */
.signature-line .ink-dot {
display: inline-block; color: var(--red);
text-shadow: 0 0 10px var(--red-glow);
margin-right: 10px;
font-family: var(--mono); font-size: 0.45em;
vertical-align: middle;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.signature-line .sig-part {
clip-path: none; -webkit-clip-path: none;
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════
CURTAIN STAGE — barn-door hero reveal on the homepage.
Stage is 200vh tall. Hero is sticky at top. As the user
scrolls 0..100vh through the stage, two duplicate hero
panels (built by oven.js) translate apart and let the
page beneath show through. Past 100vh the hero unsticks
and PULSE / events / divisions flow naturally.
═══════════════════════════════════════════════════════ */
.curtain-stage {
position: relative;
height: 200vh;
width: 100%;
}
/* When the homepage has a curtain stage, suppress the body's reserved
nav padding so the hero fills the full viewport. The fixed on-air
bar + nav (z-index 50+) overlay the hero's top edge; the hero's
internal symmetric padding keeps the BIG TITLE at viewport center. */
body:has(.curtain-stage) { padding-top: 0; }
.curtain-stage .hero {
position: sticky;
/* Full viewport. Nav + on-air bar are fixed and overlay the top — we
account for them inside the grid with padding-top. */
top: 0;
height: 100vh;
padding: 0;
display: flex;
align-items: stretch;
justify-content: center;
}
.curtain-stage .hero > .container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4vh;
padding-bottom: 4vh;
}
/* Title centers in the middle of the hero. The auto margins above + below
push the tag toward the top and the sub/pitch/cta toward the bottom,
leaving the title itself at the visual center of the viewport. */
.curtain-stage .hero .hero-title {
margin-top: auto;
margin-bottom: auto;
}
/* Hide the ORIGINAL hero content while the curtain is up. The door clones
carry the visible content so users see one unified hero, not two. */
.curtain-stage .hero > .container { opacity: 0; pointer-events: none; }
/* Solo about-copy (no sidebar grid) — centered manifesto column.
FX bank: B08 stagger fade-up + B09 scroll-reveal on each child.
Each direct child rises into view as it enters the viewport,
small delay between siblings so the section reads as a sequence,
not a wall. */
.about-copy.about-copy-solo {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.about-copy.about-copy-solo .section-label { display: inline-block; margin: 0 auto 14px; }
.about-copy.about-copy-solo h2 { text-align: center; }
.about-copy.about-copy-solo p { text-align: center; }
.about-copy.about-copy-solo .about-stack-tags { justify-content: center; }
/* B09: child-reveal pattern. Each direct child of .about-copy rises into
view as it scrolls in. The hidden state is GATED on the JS-applied
`.reveal-armed` class so the story is ALWAYS visible if JS fails, errors
in an earlier init step, or never runs. Reveal must enhance, never gate. */
.about-copy.about-copy-solo.reveal-armed > * {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.1, 1),
transform 0.85s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.about-copy.about-copy-solo > .reveal-in {
opacity: 1;
transform: none;
}
/* B01-flavored amplification on the rally line so "So let's
fire it up!" reads as a moment, not just text. */
.about-copy.about-copy-solo .about-rally {
font-size: clamp(36px, 5.6vw, 72px);
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--red);
text-shadow: 0 0 20px var(--red-glow), 0 0 60px rgba(255,50,50,0.18);
margin: 44px 0 36px;
/* Single-line presence — let it breathe */
padding: 8px 0;
}
/* ─── BARN DOORS — two cloned hero halves, JS-injected ─── */
.barn-doors {
position: absolute; inset: 0;
pointer-events: none;
z-index: 5;
perspective: 1500px;
}
.barn-door {
position: absolute; top: 0; bottom: 0;
width: 50%;
overflow: hidden;
background: var(--bg);
/* GPU compositing hints — the cloned hero inside each door is heavy DOM
(title, buttons, all the hero content), so we want the browser to
rasterize it ONCE into a layer and only translate the layer on
scroll. Without these the door re-paints every frame and the curtain
feels choppy. */
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
contain: layout paint;
/* JS overrides this with translate3d() on first frame — kept here so
the layer is created even before JS attaches. */
transform: translate3d(0,0,0);
/* No CSS transition — JS owns transform per-frame via rAF, a CSS
transition would create a fight between the two and add lag. */
transition: opacity 0.2s ease;
}
.barn-door-left { left: 0; transform-origin: 0% 50%;
/* Each door is 50%+2px wide so the two doors OVERLAP by 4 pixels at the
center seam. Both doors carry an identical clone of the hero (re-centered
below), so the overlap zone draws the same pixels twice — no visible
artifact, but the sub-pixel gap that used to appear as a vertical crease
through "THE OVEN" is gone. The text-shadow glow is no longer clipped
at the exact 50% boundary, since each door's visible region now extends
slightly past center. translateZ(0) forces GPU compositing so the two
doors paint on the same layer and the seam can't catch a sub-pixel rounding
mismatch between layers. */
width: calc(50% + 2px);
transform: translateZ(0);
}
.barn-door-right { right: 0; transform-origin: 100% 50%;
width: calc(50% + 2px);
transform: translateZ(0);
}
/* Each door's clone is a full-viewport-wide hero, anchored so the
left door shows the left half and the right door shows the right.
When the doors slide apart, each carries its half off-screen. */
.barn-door .barn-clone {
position: absolute; top: 0; bottom: 0;
/* 200% of door width = full parent width. Avoids the 100vw scrollbar
drift that misaligns left vs right clones at the seam. */
width: 200%;
display: flex; align-items: stretch; justify-content: center;
pointer-events: auto;
}
/* Re-center the cloned hero so its content (THE OVEN title, hero-pitch,
buttons) sits at the TRUE viewport 50% in both doors. Because each door
is calc(50% + 2px) and each clone is 200% of door (= 100% + 4px), the
clone's natural center drifts 2px past the viewport center in opposite
directions. translateX cancels that drift so the two clones overlay
pixel-perfect across the 4px overlap zone. */
.barn-door-left .barn-clone { left: 0; transform: translateX(-2px); }
.barn-door-right .barn-clone { right: 0; transform: translateX( 2px); }
.barn-door .barn-clone > .container {
width: 100%; max-width: 980px;
height: 100%;
/* SYMMETRIC top/bottom padding so the flex-centered content axis lines
up with the TRUE viewport center. The fixed on-air + nav bars overlay
the top region; the bottom region mirrors that height so the visible
"frame" is centered on the viewport. justify-content: center then
puts THE OVEN title at the optical midpoint regardless of stack weight. */
padding: calc(var(--on-air-h, 50px) + var(--nav-h, 72px)) 24px calc(var(--on-air-h, 50px) + var(--nav-h, 72px));
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Auto-margin distribution so the TITLE sits at viewport center.
In flex column, margin:auto consumes available space — tag's
bottom-auto pushes title down, hero-below's top-auto pushes it
down from the title. Result: title floats at the optical middle. */
.barn-door .barn-clone .hero-tag {
margin: 0 0 auto;
}
.barn-door .barn-clone .hero-title {
margin: 0;
}
.barn-door .barn-clone .hero-below {
margin: auto 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.barn-door .barn-clone .hero-sub { margin: 0; }
.barn-door .barn-clone .hero-pitch { margin: 14px 0 0; }
.barn-door .barn-clone .hero-cta { margin: 20px 0 0; }
/* Hide spectrum / hero-fx clones in the doors — they don't render
correctly when duplicated and create canvas-id collisions. */
.barn-door .hero-fx,
.barn-door .spectrum,
.barn-door .hero-arrow { display: none !important; }
/* Synced hover for cloned hero buttons. The cursor only triggers
:hover on one clone's button at a time (because each is in its
own door and the doors clip each other), which produces a split
half-and-half look. JS adds .hover-sync to BOTH clones at once
so the visible button glows uniformly. Also neutralize the
native :hover on cloned buttons so only the synced state shows. */
.barn-clone .btn:hover {
border-color: var(--red-dim);
background: transparent;
box-shadow: none;
text-shadow: none;
transform: none;
}
.barn-clone .btn-solid:hover {
background: var(--red);
box-shadow: 0 0 18px rgba(255, 31, 31, 0.22);
transform: none;
}
.barn-clone .btn.hover-sync {
border-color: var(--red);
background: var(--red-wash);
box-shadow: 0 0 18px var(--red-glow);
text-shadow: 0 0 6px var(--red-glow);
transform: translateY(-1px);
}
.barn-clone .btn-solid.hover-sync {
background: #ff4848;
box-shadow: 0 4px 24px var(--red-glow), 0 0 30px rgba(255, 31, 31, 0.3);
text-shadow: none;
}
/* ─── BOUNCING DOWN ARROW — bottom center of curtain ─── */
.hero-arrow {
position: absolute;
left: 50%;
/* Sit a fixed margin ABOVE the live footer height. --footer-h is kept in
sync with the rendered footer by setFrameHeights() in oven.js, so the
arrow stays clear of the fixed footer no matter how it wraps. Falls
back to 48px if the var is missing (e.g. mid-load), plus 22px breathing
room above the footer's top edge. */
bottom: calc(var(--footer-h, 48px) + 22px);
transform: translateX(-50%);
/* z-index 45 sits above the fixed footer (40). Defensive — also paints
above any 1px decorative lines that might cross SCROLL on short viewports. */
z-index: 45;
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: var(--red);
text-shadow: 0 0 8px var(--red-glow);
pointer-events: none;
animation: heroArrowBounce 1.7s ease-in-out infinite;
will-change: transform, opacity;
}
.hero-arrow-label {
font-family: var(--ui);
font-size: 10px; letter-spacing: 4px; font-weight: 700;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.hero-arrow svg {
filter: drop-shadow(0 0 6px var(--red-glow));
}
@keyframes heroArrowBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }
}
/* Mobile: stage gets shorter so curtain doesn't dominate too long */
@media (max-width: 780px) {
.curtain-stage { height: 160vh; }
/* Mobile: footer is hidden + replaced by .mobile-tabbar (which is fixed
~60px tall). Anchor off the tabbar height instead so the arrow doesn't
clash with the bottom nav pills. */
.hero-arrow { bottom: calc(var(--mtab-h, 64px) + 14px); }
.hero-arrow-label { font-size: 9px; letter-spacing: 3px; }
}
/* On narrow viewports (≤ 600px) the 4 CTA buttons wrap to 2-3 rows,
pushing .hero-below all the way down to where the SCROLL arrow sits.
Mobile users scroll instinctively — the affordance is redundant there.
Hide it to recover the breathing room. */
@media (max-width: 600px) {
.hero-arrow { display: none; }
}
/* Reduced motion: skip the curtain animation entirely. Doors stay
open, arrow stops bouncing, hero behaves like a normal section. */
@media (prefers-reduced-motion: reduce) {
.curtain-stage { height: auto; }
.curtain-stage .hero { position: relative; height: auto; padding: var(--space-hero) 0 calc(var(--space-section) - 20px); }
.barn-doors { display: none; }
.hero-arrow { animation: none; }
}
/* ═══════════════════════════════════════════════════════
FILM STRIP — looks like real 35mm celluloid.
Warm dark film stock, rounded-rectangle perforations (mask
cutouts via SVG so the holes really punch through), film
metadata stamped on the bottom sprocket gutter, photos
fill cells edge-to-edge, light grain overlay over everything.
Auto-drifts left, drag to scrub, release to spin.
═══════════════════════════════════════════════════════ */
.filmstrip-wrap {
margin-top: 56px;
width: 100vw;
margin-left: calc(50% - 50vw);
position: relative;
user-select: none;
-webkit-user-select: none;
background: #050505;
}
.filmstrip {
position: relative;
height: clamp(260px, 36vw, 420px);
/* Film stock color: warm cool-black like aged celluloid base */
background: #14110e;
overflow: hidden;
cursor: grab;
touch-action: pan-y;
}
.filmstrip.dragging { cursor: grabbing; }
/* Sprocket strips — top + bottom of the film. Each is dark film
stock with rounded-rect perforation holes punched through via
SVG mask. The "transparent" hole region reveals the page bg
below, just like real celluloid against a light table. */
.filmstrip::before,
.filmstrip::after {
content: '';
position: absolute; left: 0; right: 0;
height: 42px;
background:
/* Subtle vertical streak so the film stock has depth */
linear-gradient(180deg, #1c1814 0%, #14110e 60%, #0e0b09 100%);
z-index: 5;
pointer-events: none;
/* Mask cuts rounded-rect holes through the strip. White = keep,
black = punch through. Sized 56×42 per hole so holes are big
enough to read as real perforations. */
-webkit-mask-image:
url("data:image/svg+xml;utf8,");
mask-image:
url("data:image/svg+xml;utf8,");
-webkit-mask-size: 56px 42px;
mask-size: 56px 42px;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-mode: luminance;
mask-mode: luminance;
}
.filmstrip::before { top: 0; }
.filmstrip::after { bottom: 0; }
/* Frame track — horizontal flex row, sits BETWEEN the sprocket
gutters, photos fill edge-to-edge with a thin film-stock gutter
between cells. */
.filmstrip-track {
position: absolute;
top: 42px; bottom: 42px; left: 0;
display: flex;
gap: 4px; /* film stock visible between frames */
padding: 0;
will-change: transform;
background: #0e0b09; /* gutter color matches film base */
}
.filmstrip-cell {
flex: 0 0 auto;
width: clamp(280px, 30vw, 420px);
aspect-ratio: 4 / 3;
height: 100%;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
/* No border. No glow. This is a frame in the film, not a card. */
/* Empty-cell placeholder: faded sepia-ish so it reads as
unexposed film, not a UI tile */
background-color: #1a1410;
background-image:
linear-gradient(135deg, rgba(255,200,140,0.04), rgba(0,0,0,0)),
repeating-linear-gradient(90deg,
rgba(255,255,255,0.012) 0, rgba(255,255,255,0.012) 1px,
transparent 1px, transparent 6px);
}
.filmstrip-cell.has-image {
/* Cinematic film grade: warm shadows, slight desat, very
subtle vignette via inset shadow. */
filter: contrast(1.04) saturate(0.92) brightness(0.95) sepia(0.06);
background-color: #0e0b09;
background-image: none;
}
/* Per-frame edge mark: very faint hairline at the cell edges so
each frame reads as a discrete photographic exposure. */
.filmstrip-cell::after {
content: '';
position: absolute; inset: 0;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
pointer-events: none;
z-index: 1;
}
/* Per-frame center crosshair (only on empty cells) — feels like
a real film-alignment mark on unexposed stock */
.filmstrip-cell:not(.has-image)::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 28px; height: 28px;
transform: translate(-50%, -50%);
background:
linear-gradient(0deg, transparent 47%, rgba(255,255,255,0.15) 47%, rgba(255,255,255,0.15) 53%, transparent 53%),
linear-gradient(90deg, transparent 47%, rgba(255,255,255,0.15) 47%, rgba(255,255,255,0.15) 53%, transparent 53%);
pointer-events: none;
}
/* Frame metadata — small mono code stamped in the bottom-left
corner of each frame. Faded warm cream like printed ink on
real film, not a UI label. */
.filmstrip-label {
position: absolute;
left: 10px;
bottom: 8px;
font-family: var(--mono, 'Courier New', monospace);
font-size: 9px;
letter-spacing: 2px;
color: rgba(255, 220, 180, 0.55);
text-transform: uppercase;
z-index: 3;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.filmstrip-cell.has-image .filmstrip-label {
color: rgba(255, 235, 210, 0.85);
text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
/* Light film grain — tiny, animated, sits on top of everything so
the whole strip breathes like real film */
.filmstrip-track::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 7;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.12;
mix-blend-mode: overlay;
animation: filmGrainShift 0.5s steps(2) infinite;
}
@keyframes filmGrainShift {
0% { transform: translate(0, 0); }
50% { transform: translate(-2%, 1%); }
100% { transform: translate(1%, -1%); }
}
/* Occasional faint diagonal scratch — pure CSS, single repeating gradient */
.filmstrip-track::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 6;
background:
repeating-linear-gradient(92deg,
transparent 0,
transparent 240px,
rgba(255,235,200,0.06) 240px,
rgba(255,235,200,0.06) 241px,
transparent 241px,
transparent 720px);
mix-blend-mode: screen;
opacity: 0.4;
}
/* Edge fade so the strip dissolves into the page L+R */
.filmstrip-wrap::before,
.filmstrip-wrap::after {
content: '';
position: absolute; top: 0; bottom: 0;
width: 100px;
z-index: 8;
pointer-events: none;
}
.filmstrip-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.filmstrip-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.filmstrip-hint {
margin-top: 14px;
text-align: center;
font-family: var(--ui);
font-size: 10px; letter-spacing: 3px; font-weight: 700;
color: var(--faint);
text-transform: uppercase;
}
@media (max-width: 780px) {
.filmstrip { height: clamp(220px, 60vw, 300px); }
.filmstrip-cell { width: clamp(220px, 70vw, 300px); }
.filmstrip::before, .filmstrip::after { height: 32px; }
.filmstrip-track { top: 32px; bottom: 32px; }
.filmstrip-label { bottom: -26px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.filmstrip-track { transition: none !important; }
.filmstrip-track::after { animation: none; }
.filmstrip { cursor: auto; }
}
/* ═══════════════════════════════════════════════════════
STATUS CLASSES — brand live/coming-soon signal system
(Phase 3 of brand-update pass, 2026-05-08).
Bright signal = LIVE / SHIPPING / BOOKING.
Ghost signal = COMING SOON / WAITLIST.
Mock/internal is never public — labeled clearly so dev
eyes catch it.
═══════════════════════════════════════════════════════ */
.status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 11px;
border-radius: 999px;
font-family: var(--ui);
font-size: 10px;
letter-spacing: 2.5px;
font-weight: 700;
text-transform: uppercase;
border: 1px solid currentColor;
background: rgba(0, 0, 0, 0.45);
white-space: nowrap;
line-height: 1;
}
.status::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor, 0 0 10px currentColor;
}
/* Bright — live, shipping, booking */
.status-live,
.status-shipping,
.status-booking {
color: var(--signal-bright);
border-color: rgba(255, 31, 31, 0.65);
background: rgba(255, 31, 31, 0.10);
text-shadow: 0 0 6px rgba(255, 31, 31, 0.4);
}
.status-live::before,
.status-shipping::before,
.status-booking::before {
animation: status-pulse 1.8s ease-in-out infinite;
}
/* Ghost — coming soon, waitlist */
.status-soon,
.status-waitlist {
color: rgba(255, 31, 31, 0.50);
border-color: rgba(255, 31, 31, 0.22);
background: rgba(255, 31, 31, 0.03);
}
.status-soon::before,
.status-waitlist::before {
background: rgba(255, 31, 31, 0.45);
box-shadow: 0 0 4px rgba(255, 31, 31, 0.3);
/* No pulse — static dim signal so the eye separates it from live items */
}
/* Mock — internal only, not public-facing */
.status-mock {
color: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.02);
border-style: dashed;
}
.status-mock::after {
content: 'INTERNAL';
margin-left: 6px;
padding-left: 6px;
border-left: 1px solid currentColor;
font-weight: 400;
}
/* Sized variants */
.status-lg { font-size: 11px; padding: 7px 14px; letter-spacing: 3px; }
.status-sm { font-size: 9px; padding: 3px 8px; letter-spacing: 2px; }
.status-sm::before { width: 5px; height: 5px; }
@keyframes status-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
/* ═══════════════════════════════════════════════════════
STATUS — backwards alias on existing .pill / .svc-pill
classes so old markup automatically picks up the new
signal system. Existing .pill stays as the bright pill,
.pill.soon stays ghost. Pure CSS — no HTML changes
required for older pages.
═══════════════════════════════════════════════════════ */
.pill, .svc-pill {
background: rgba(255, 31, 31, 0.08);
border-color: rgba(255, 31, 31, 0.55);
}
.svc-pill.live,
.svc-pill.shipping,
.svc-pill.booking,
.svc-pill.always {
background: rgba(255, 31, 31, 0.10);
border-color: rgba(255, 31, 31, 0.65);
color: var(--signal-bright);
}
.svc-pill.soon,
.pill.soon,
.svc-pill.waitlist {
background: rgba(255, 31, 31, 0.03);
border-color: rgba(255, 31, 31, 0.22);
color: rgba(255, 31, 31, 0.50);
}
.svc-pill.archive {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.55);
}
/* ═══════════════════════════════════════════════════════
AI VIBE CODE ACADEMY — page-specific styles (Phase 4).
The motivational subline and anti-fluff block carry
the program's voice; both must read big and direct.
═══════════════════════════════════════════════════════ */
.academy-subline {
font-family: var(--display);
font-size: clamp(28px, 4.6vw, 56px);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.05;
color: var(--ovn-red);
text-shadow: 0 0 18px var(--red-glow), 0 0 60px rgba(255, 31, 31, 0.18);
margin: 8px 0 22px;
text-align: center;
}
.page-hero-pitch.academy-rally {
font-family: var(--display);
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
margin-top: 10px;
margin-bottom: 18px;
letter-spacing: -0.005em;
}
.anti-fluff {
max-width: 720px;
margin: 0 auto;
text-align: center;
font-family: var(--sans);
font-size: clamp(16px, 1.8vw, 19px);
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
padding: 28px 0;
border-top: 1px solid rgba(255, 31, 31, 0.18);
border-bottom: 1px solid rgba(255, 31, 31, 0.18);
}
.anti-fluff p { margin: 6px 0; }
.anti-fluff .anti-fluff-stress {
font-family: var(--display);
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 800;
color: var(--ovn-red);
text-shadow: 0 0 12px var(--red-glow);
margin: 18px 0 14px;
letter-spacing: -0.005em;
}
.academy-pricing .svc-pill.always {
background: rgba(255, 31, 31, 0.10);
border-color: rgba(255, 31, 31, 0.5);
color: var(--ovn-red);
}
/* ═══════════════════════════════════════════════════════
REVEAL STACK — generic B08+B09 stagger-fade-up.
Drop `.reveal-stack` on any container, every direct child
rises into view as it enters the viewport. JS wires the
IntersectionObserver in oven.js (bindRevealStacks).
═══════════════════════════════════════════════════════ */
.reveal-stack.reveal-armed > * {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.1, 1),
transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.reveal-stack > .reveal-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal-stack > * { opacity: 1; transform: none; transition: none; }
}
/* ═══════════════════════════════════════════════════════
SUPPORT POP-UP — site-wide. Fires 180s after DOMContentLoaded.
Skips if user dismissed this session OR unlocked Backstage Pass.
═══════════════════════════════════════════════════════ */
.oven-popup {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; transition: opacity 0.24s ease;
pointer-events: none;
}
.oven-popup.open { opacity: 1; pointer-events: auto; }
.oven-popup-backdrop {
position: absolute; inset: 0;
background: rgba(5, 0, 0, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.oven-popup-card {
position: relative;
max-width: 480px; width: 100%;
background: var(--ovn-black, #050000);
border: 1px solid rgba(255, 31, 31, 0.4);
box-shadow: 0 0 36px rgba(255, 31, 31, 0.18), 0 24px 60px rgba(0,0,0,0.6);
padding: 36px 32px 32px;
border-radius: 4px;
transform: translateY(8px) scale(0.98);
transition: transform 0.24s ease;
}
.oven-popup.open .oven-popup-card { transform: translateY(0) scale(1); }
.oven-popup-x {
position: absolute; top: 8px; right: 12px;
background: none; border: 0;
color: var(--dim);
font-size: 26px; line-height: 1;
cursor: pointer;
padding: 6px 10px;
transition: color 0.2s;
}
.oven-popup-x:hover { color: var(--red); }
.oven-popup-label {
font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px;
color: var(--red); text-transform: uppercase;
margin-bottom: 12px;
}
.oven-popup-title {
font-family: var(--display);
font-size: 28px; font-weight: 700; line-height: 1.15;
letter-spacing: -0.01em;
color: rgba(245, 240, 232, 0.96);
text-transform: uppercase;
margin-bottom: 16px;
}
.oven-popup-body {
font-family: var(--sans);
font-size: 14.5px; line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 14px;
}
.oven-popup-actions {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 22px;
}
.oven-popup-actions .btn { flex: 1 1 auto; min-width: 140px; text-align: center; justify-content: center; }
@media (max-width: 480px) {
.oven-popup-card { padding: 30px 22px 24px; }
.oven-popup-title { font-size: 22px; }
.oven-popup-actions .btn { flex: 1 1 100%; }
}
/* ═══════════════════════════════════════════════════════
MOBILE TABBAR — premium iOS-app-style floating bottom nav.
Hidden on desktop. Replaces the .footer entirely on ≤720px so
the page footer doesn't double up with this. Injected into
every page by oven.js (injectMobileTabbar).
═══════════════════════════════════════════════════════ */
.mobile-tabbar { display: none; }
/* Common safety: any wide grid/card on mobile gets pinned to 100% width */
@media (max-width: 720px) {
.container { max-width: 100%; }
.card-grid, .events-grid-posters, .pulse-grid, .divisions { max-width: 100%; }
.svc-card, .div-cell, .pulse-cell, .event-poster { max-width: 100%; min-width: 0; }
img, video, iframe, table { max-width: 100%; height: auto; }
/* Long unbroken strings (URLs, codes) wrap instead of pushing layout wide */
p, h1, h2, h3, h4, .section-text, .svc-card-desc, .footer-meta a { overflow-wrap: anywhere; }
/* Hide the desktop footer on mobile — the tabbar replaces it */
.footer { display: none; }
/* Reserve space for the floating tabbar (height + safe area + breathing room) */
body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px) + 14px); }
.mobile-tabbar {
position: fixed;
left: 12px; right: 12px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
z-index: 50;
display: flex; align-items: stretch; justify-content: space-around;
padding: 8px 4px;
background: rgba(10, 5, 5, 0.78);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 31, 31, 0.18);
border-radius: 22px;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 -1px 0 rgba(255, 31, 31, 0.06) inset;
/* Slide-up entrance animation on first paint */
animation: mtabSlideUp 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.05);
}
@keyframes mtabSlideUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.mtab {
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
padding: 6px 4px;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
border-radius: 14px;
transition: color 0.15s ease, background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.mtab svg { display: block; transition: transform 0.18s ease; }
.mtab-label {
font-family: var(--mono);
font-size: 9.5px; letter-spacing: 1.6px;
text-transform: uppercase;
line-height: 1;
}
.mtab:hover { color: rgba(255, 255, 255, 0.85); }
.mtab:active { transform: scale(0.92); }
.mtab:active svg { transform: scale(0.88); }
.mtab.active {
color: var(--red);
background: rgba(255, 31, 31, 0.08);
box-shadow:
0 0 14px rgba(255, 31, 31, 0.18) inset,
0 0 12px rgba(255, 31, 31, 0.18);
}
.mtab.active svg {
filter: drop-shadow(0 0 4px rgba(255, 31, 31, 0.55));
}
/* Stream-playing state on the Radio tab. Pulses red so the user can
see from across the room that audio is live, even if their phone
is on silent. Label text flips to MUTE via JS (oven.js). */
.mtab.playing {
color: var(--red);
background: rgba(255, 31, 31, 0.14);
box-shadow:
0 0 14px rgba(255, 31, 31, 0.28) inset,
0 0 14px rgba(255, 31, 31, 0.35);
animation: mtabPulse 1.6s ease-in-out infinite;
}
.mtab.playing svg {
filter: drop-shadow(0 0 6px rgba(255, 31, 31, 0.8));
}
.mtab.playing .mtab-label {
text-shadow: 0 0 6px rgba(255, 31, 31, 0.6);
}
@keyframes mtabPulse {
0%, 100% {
box-shadow:
0 0 14px rgba(255, 31, 31, 0.22) inset,
0 0 10px rgba(255, 31, 31, 0.28);
}
50% {
box-shadow:
0 0 18px rgba(255, 31, 31, 0.36) inset,
0 0 20px rgba(255, 31, 31, 0.55);
}
}
@media (prefers-reduced-motion: reduce) {
.mtab.playing { animation: none; }
}
/* Slim screens (≤360px) — kill horizontal padding */
@media (max-width: 360px) {
.mobile-tabbar { left: 8px; right: 8px; padding: 6px 2px; border-radius: 18px; }
.mtab-label { font-size: 8.5px; letter-spacing: 1.2px; }
}
/* Reduced motion — kill the slide-up entrance + tap scale */
@media (prefers-reduced-motion: reduce) {
.mobile-tabbar { animation: none; }
.mtab:active, .mtab:active svg { transform: none; }
}
}
/* ═══════════════════════════════════════════════════════════════
BACKSTAGE PASS — site-wide passcode gate (loaded on every page)
Password: `synthia` (in oven.js)
- .backstage-card hides content behind blur + lock overlay
- .backstage-content holds the original card content
- .backstage-lock is the lock icon + badge that shows over it
- body.backstage-unlocked removes blur/lock everywhere
- .backstage-modal is the popup (injected by oven.js if absent)
- .backstage-gate is the inline form at #backstage on the homepage
═══════════════════════════════════════════════════════════════ */
.backstage-card { position: relative; overflow: hidden; }
.backstage-card .backstage-content {
transition: filter 0.4s ease, opacity 0.4s ease;
filter: blur(6px);
opacity: 0.65;
pointer-events: none;
}
.backstage-card .backstage-lock {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
background: rgba(5, 0, 0, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: opacity 0.4s ease, visibility 0.4s ease;
z-index: 2;
}
.backstage-card .backstage-lock-icon {
color: rgba(255, 31, 31, 0.7);
}
.backstage-card .backstage-lock-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px; letter-spacing: 3px;
color: rgba(255, 245, 240, 0.85);
text-transform: uppercase;
border: 1px solid rgba(255, 31, 31, 0.4);
padding: 4px 10px;
border-radius: 2px;
}
body.backstage-unlocked .backstage-card .backstage-content {
filter: none; opacity: 1; pointer-events: auto;
}
body.backstage-unlocked .backstage-card .backstage-lock {
opacity: 0; visibility: hidden;
}
/* ───── WHOLE-PAGE BACKSTAGE GATE (e.g. /assistants) ───────────────────
The page renders normally so the blurred preview still reads as "real
content behind glass" — but every direct body child except the chrome
(on-air bar, nav, footer, mobile tabbar) and the backstage modal itself
gets blurred + non-interactive until backstage-unlocked flips on.
──────────────────────────────────────────────────────────────────── */
body.backstage-page-gated:not(.backstage-unlocked) > main,
body.backstage-page-gated:not(.backstage-unlocked) > section,
body.backstage-page-gated:not(.backstage-unlocked) > header.page-hero,
body.backstage-page-gated:not(.backstage-unlocked) > .page-tag,
body.backstage-page-gated:not(.backstage-unlocked) > .container,
body.backstage-page-gated:not(.backstage-unlocked) > .editorial-spread,
body.backstage-page-gated:not(.backstage-unlocked) > .section,
body.backstage-page-gated:not(.backstage-unlocked) > .hero {
filter: blur(16px) saturate(0.7) brightness(0.55);
pointer-events: none;
user-select: none;
transition: filter 0.4s ease;
}
/* Lock body scroll while the page is gated — modal sits in place */
body.backstage-page-gated:not(.backstage-unlocked) { overflow: hidden; }
/* X close button stays visible even on gated pages — clicking it navigates
the user BACK to the page they came from (or home), so they're never
trapped in front of a blurred gate they can't escape. JS handler in
closeBackstageModal() does the redirect. */
/* ───── Nav-menu items marked COMING SOON ──────────────────────────────
Any in the nav that contains a .pill.soon gets a subtle blur +
lock-icon so users know it's gated. Click is intercepted by the
backstage handler in oven.js — it opens the password modal.
After unlock (body.backstage-unlocked) the blur + lock drop and the
link behaves normally.
──────────────────────────────────────────────────────────────────── */
.dropdown-item:has(.pill.soon),
.nav-menu > li > a:has(.pill.soon) {
position: relative;
cursor: pointer;
}
/* Blur the label text but NOT the COMING SOON pill (so users can read
the status). We blur a wrapping span via ::first-line trick? Cleaner:
blur the whole link and lift the pill back to crisp via filter: none. */
.dropdown-item:has(.pill.soon) {
filter: blur(0.6px);
opacity: 0.62;
font-style: italic;
transition: filter 0.18s ease, opacity 0.18s ease;
}
.dropdown-item:has(.pill.soon)::before {
/* tiny lock glyph as the visual gate cue */
content: '🔒';
font-size: 9px;
margin-right: 6px;
opacity: 0.8;
filter: none; /* override the parent blur — the lock stays sharp */
display: inline-block;
font-style: normal;
transform: translateY(-1px);
}
.dropdown-item:has(.pill.soon) .pill.soon {
/* keep the pill crisp + readable */
filter: blur(0) saturate(1);
font-style: normal;
}
.dropdown-item:has(.pill.soon):hover {
filter: blur(0);
opacity: 1;
background: rgba(255, 31, 31, 0.06);
}
/* When unlocked, drop the gate styling entirely */
body.backstage-unlocked .dropdown-item:has(.pill.soon) {
filter: none;
opacity: 1;
font-style: normal;
}
body.backstage-unlocked .dropdown-item:has(.pill.soon)::before {
content: none;
}
/* Inline gate form (homepage #backstage section) */
.backstage-gate {
max-width: 460px; margin: 0 auto 36px;
display: flex; gap: 10px;
border: 1px solid var(--hair);
background: rgba(255, 31, 31, 0.02);
padding: 12px;
border-radius: 4px;
}
.backstage-gate input {
flex: 1; min-width: 0;
background: #0a0a0a;
border: 1px solid var(--hair);
color: var(--text);
padding: 10px 14px;
font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 2px;
text-transform: uppercase;
border-radius: 3px;
outline: none;
transition: border-color 0.2s;
}
.backstage-gate input:focus { border-color: rgba(255, 31, 31, 0.6); }
.backstage-gate input::placeholder {
color: var(--faint, rgba(255, 255, 255, 0.4));
letter-spacing: 2px;
}
.backstage-gate-msg {
text-align: center;
font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 2px;
color: var(--dim, rgba(255, 255, 255, 0.5));
text-transform: uppercase;
min-height: 16px; margin-bottom: 18px;
}
.backstage-gate-msg.ok { color: #6BFF8A; }
.backstage-gate-msg.bad { color: var(--red, #FF1F1F); }
body.backstage-unlocked #backstage .backstage-gate { display: none; }
body.backstage-unlocked #backstage .backstage-gate-msg {
margin-bottom: 36px; font-size: 12px; letter-spacing: 2.5px;
}
/* Backstage Pass modal popup */
.backstage-modal {
position: fixed; inset: 0;
z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: backstageModalIn 0.18s ease;
}
.backstage-modal[hidden] { display: none; }
@keyframes backstageModalIn { from { opacity: 0; } to { opacity: 1; } }
.backstage-modal-backdrop {
position: absolute; inset: 0;
background: rgba(5, 0, 0, 0.85);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
cursor: pointer;
}
.backstage-modal-card {
position: relative;
background: #0a0606;
border: 1px solid rgba(255, 31, 31, 0.5);
box-shadow: 0 0 60px rgba(255, 31, 31, 0.22),
0 30px 60px -20px rgba(0,0,0,0.8);
padding: 38px 26px 22px;
max-width: 420px; width: 100%;
text-align: center;
border-radius: 4px;
animation: backstageModalCardIn 0.22s cubic-bezier(0.2, 0.7, 0.1, 1);
}
@keyframes backstageModalCardIn {
from { transform: translateY(10px) scale(0.96); opacity: 0; }
to { transform: none; opacity: 1; }
}
.backstage-modal-close {
position: absolute; top: 4px; right: 8px;
width: 36px; height: 36px;
background: transparent; border: none;
color: rgba(255, 245, 240, 0.55);
font-size: 30px; line-height: 1;
cursor: pointer;
transition: color 0.2s;
padding: 0;
font-family: var(--mono, monospace);
}
.backstage-modal-close:hover { color: var(--red, #FF1F1F); }
.backstage-modal-icon-wrap {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
border: 1px solid rgba(255, 31, 31, 0.45);
border-radius: 50%;
margin-bottom: 14px;
color: rgba(255, 31, 31, 0.9);
filter: drop-shadow(0 0 8px rgba(255, 31, 31, 0.35));
}
/* Force the inner SVG to render as a block so no inline-text baseline
pushes the lock icon up inside the circle. Combined with the cropped
viewBox (0 5 24 18) this puts the lock dead-center optically. */
.backstage-modal-icon-wrap svg { display: block; }
.backstage-modal-title {
font-family: var(--display, 'Big Shoulders Display'), 'Oxanium', sans-serif;
font-size: 32px; font-weight: 700;
color: var(--red, #FF1F1F);
text-shadow: 0 0 14px rgba(255, 31, 31, 0.4);
letter-spacing: 1px;
margin: 0 0 6px;
text-transform: uppercase;
line-height: 1;
}
.backstage-modal-sub {
font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 3px;
color: rgba(245, 240, 232, 0.6); text-transform: uppercase;
margin: 0 0 22px;
}
.backstage-modal-gate { margin: 0 0 4px; }
.backstage-modal-foot {
font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 1.5px;
color: rgba(245, 240, 232, 0.45); text-transform: uppercase;
margin-top: 14px;
}
.backstage-modal-foot a { color: rgba(255, 31, 31, 0.85); text-decoration: none; }
.backstage-modal-foot a:hover { color: var(--red, #FF1F1F); }
/* ───── Wider modal variant — holds membership pitch + request form ───── */
.backstage-modal-card-wide { max-width: 480px; padding: 32px 28px 18px; text-align: left; }
.backstage-modal-card-wide .backstage-modal-title,
.backstage-modal-card-wide .backstage-modal-sub,
/* Wide-modal variant — center the icon-wrap horizontally with margin auto
AND keep flexbox centering for the SVG inside. The previous `display: block`
was overriding the base rule's `display: inline-flex` and destroying the
align-items/justify-content centering — leaving the lock SVG flow-positioned
at the top-left of the 64px circle. `display: flex` preserves both. */
.backstage-modal-card-wide .backstage-modal-icon-wrap {
display: flex;
align-items: center; justify-content: center;
margin: 0 auto 14px;
}
.backstage-modal-card-wide .backstage-modal-title,
.backstage-modal-card-wide .backstage-modal-sub { text-align: center; }
/* ── Membership pitch card ── */
.backstage-mem {
position: relative;
background: linear-gradient(180deg, rgba(255, 31, 31, 0.08), rgba(255, 0, 122, 0.05) 100%);
border: 1px solid rgba(255, 31, 31, 0.45);
border-radius: 4px;
padding: 18px 18px 16px;
margin: 14px 0 18px;
box-shadow: inset 0 0 24px rgba(255, 31, 31, 0.08);
}
.backstage-mem::before {
/* corner LED dot — brand cue */
content: ''; position: absolute; top: -1px; left: -1px;
width: 12px; height: 12px;
background: linear-gradient(135deg, #FF7A00, #FF007A);
box-shadow: 0 0 8px rgba(255, 31, 31, 0.6);
}
.backstage-mem-banner {
font-family: var(--display, 'Big Shoulders Display'), sans-serif;
font-weight: 800; font-size: 22px; letter-spacing: 0.04em;
color: #fff; text-transform: uppercase;
display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
text-shadow: 0 0 16px rgba(255, 31, 31, 0.4);
}
.backstage-mem-permo {
font-family: var(--mono, monospace); font-size: 11px;
letter-spacing: 2px; color: rgba(245, 240, 232, 0.55);
text-shadow: none;
margin-left: 2px;
}
.backstage-mem-pitch {
font-family: var(--ui, 'Inter'), sans-serif;
font-size: 13px; color: rgba(245, 240, 232, 0.85);
margin: 6px 0 12px;
line-height: 1.45;
}
.backstage-mem-perks {
list-style: none; padding: 0;
margin: 0 0 14px;
font-family: var(--ui, 'Inter'), sans-serif;
font-size: 12.5px; color: rgba(245, 240, 232, 0.78);
line-height: 1.55;
}
.backstage-mem-perks li {
padding-left: 18px;
position: relative;
margin-bottom: 3px;
}
.backstage-mem-perks li::before {
content: '';
position: absolute; left: 0; top: 7px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--red, #FF1F1F);
box-shadow: 0 0 6px rgba(255, 31, 31, 0.7);
}
.backstage-mem-form {
display: flex; gap: 6px;
flex-wrap: wrap;
}
.backstage-mem-form input[type="email"] {
flex: 1 1 180px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--hair, rgba(255, 31, 31, 0.2));
color: #fff;
padding: 10px 12px;
font-family: var(--mono, monospace);
font-size: 11px; letter-spacing: 0.18em;
border-radius: 2px;
text-transform: uppercase;
outline: none;
transition: border-color 0.15s;
}
.backstage-mem-form input[type="email"]:focus {
border-color: var(--red, #FF1F1F);
box-shadow: 0 0 0 1px rgba(255, 31, 31, 0.3);
}
.backstage-mem-form input[type="email"]::placeholder { color: rgba(245, 240, 232, 0.4); }
.backstage-mem-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 11px; letter-spacing: 0.18em; }
.backstage-mem-foot {
font-family: var(--mono, monospace);
font-size: 9px; letter-spacing: 1.5px;
color: rgba(245, 240, 232, 0.4);
text-transform: uppercase;
margin-top: 8px;
}
/* ── "OR REQUEST FREE ACCESS" divider ── */
.backstage-or {
display: flex; align-items: center; gap: 10px;
margin: 8px 0 14px;
font-family: var(--mono, monospace);
font-size: 9px; letter-spacing: 3px;
color: rgba(245, 240, 232, 0.5);
text-transform: uppercase;
}
.backstage-or::before, .backstage-or::after {
content: ''; flex: 1; height: 1px;
background: var(--hair, rgba(255, 31, 31, 0.18));
}
.backstage-or span { white-space: nowrap; }
/* ── Free-request form ── */
.backstage-req-form {
display: flex; flex-direction: column; gap: 8px;
}
.backstage-req-form input,
.backstage-req-form textarea {
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--hair, rgba(255, 31, 31, 0.2));
color: #fff;
padding: 10px 12px;
font-family: var(--mono, monospace);
font-size: 11px; letter-spacing: 0.16em;
border-radius: 2px;
text-transform: uppercase;
outline: none;
transition: border-color 0.15s;
width: 100%;
box-sizing: border-box;
}
.backstage-req-form textarea {
resize: vertical; min-height: 56px;
letter-spacing: 0.08em;
text-transform: none;
font-family: var(--ui, 'Inter'), sans-serif;
font-size: 13px;
}
.backstage-req-form input:focus,
.backstage-req-form textarea:focus {
border-color: var(--red, #FF1F1F);
box-shadow: 0 0 0 1px rgba(255, 31, 31, 0.3);
}
.backstage-req-form input::placeholder,
.backstage-req-form textarea::placeholder { color: rgba(245, 240, 232, 0.4); }
.backstage-req-form .btn { width: 100%; margin-top: 2px; }
/* ── Form status message ── */
.backstage-form-msg {
font-family: var(--mono, monospace);
font-size: 10px; letter-spacing: 1.8px;
text-transform: uppercase;
margin: 10px 0 0;
min-height: 14px;
text-align: center;
color: rgba(245, 240, 232, 0.55);
}
.backstage-form-msg.is-ok { color: #7ee07a; }
.backstage-form-msg.is-bad { color: var(--red, #FF1F1F); }
/* ── Collapsed code-entry section ── */
.backstage-code-wrap {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--hair, rgba(255, 31, 31, 0.15));
text-align: center;
}
.backstage-code-toggle {
background: transparent; border: none;
color: rgba(245, 240, 232, 0.55);
font-family: var(--mono, monospace);
font-size: 10px; letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
padding: 4px 8px;
transition: color 0.15s;
}
.backstage-code-toggle:hover { color: var(--red, #FF1F1F); }
.backstage-code-toggle span { display: inline-block; margin-left: 6px; }
.backstage-code-panel { margin-top: 10px; }
.backstage-code-panel[hidden] { display: none; }
.backstage-code-panel .backstage-gate { margin: 0; }
/* ── Mobile: tighten paddings + stack the email field button ── */
@media (max-width: 480px) {
.backstage-modal-card-wide { padding: 28px 20px 14px; max-width: 100%; }
.backstage-mem { padding: 14px 14px 12px; }
.backstage-mem-banner { font-size: 18px; }
.backstage-mem-pitch { font-size: 12px; }
.backstage-mem-perks { font-size: 12px; }
.backstage-mem-form { flex-direction: column; }
/* When the form stacks, flex-basis 180px would be interpreted as the input's
HEIGHT (column direction). Reset to auto so the input keeps its padded height. */
.backstage-mem-form input[type="email"] { flex: 0 0 auto; width: 100%; }
.backstage-mem-btn { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════
PERSISTENT HEADER PLAYER — the .on-air-tune link IS the player.
Cycles between two states:
[data-state="tune"] → "▶ TUNE IN" — audio is muted (auto-flowing in background)
[data-state="playing"] → "● MUTE" — audio is audible
Logic lives in oven.js (injectPersistentPlayer).
═══════════════════════════════════════════════════════════════ */
/* Fixed width so the bar doesn't reflow each click (TUNE IN vs MUTE differ by 3 chars) */
.on-air-tune {
min-width: 96px;
text-align: center;
background: transparent;
}
/* PLAYING state — solid red, dark icon. Reads as "audio is hot on this device". */
.on-air-tune[data-state="playing"] {
background: var(--red);
color: #000;
border-color: var(--red);
text-shadow: none;
box-shadow: 0 0 14px var(--red-glow), inset 0 0 8px rgba(0,0,0,.35);
}
.on-air-tune[data-state="playing"]:hover {
background: #ff5050;
color: #000;
}