/* ════════════════════════════════════════════════════════════════
Bearcast Media Website
Developed & Designed by Cam Garrison
GitHub: @notChewy1324 | Website: camgarrison.com
Copyright © 2026 Cam Garrison. All rights reserved.
This code is proprietary and integrated with Sanity CMS.
════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
PAGE: HOME (index.html)
═══════════════════════════════════════════════════ */
/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; font-size: 16px; }
/* Keep UA-rendered chrome (scrollbars, form controls) on the active theme —
overrides the static in each page head. */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }
body[data-page="home"]{
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--fg);
overflow-x: hidden;
transition: background 0.5s ease, color 0.5s ease;
min-height: 100vh;
}
/* ─── THEME VARIABLES ──────────────────────────────────────── */
body[data-page="home"]{
--red: #D0021B;
--red-bright: #FF1F3D;
--red-muted: #8B0010;
--gold: #C9A84C;
--gold-light: #F0C97A;
--white: #FFFFFF;
--off-white: #F5F4F0;
--near-black: #0A0A0B;
--easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-theme="dark"] body[data-page="home"]{
--bg: #0A0A0B;
--bg-2: #111114;
--bg-3: #1A1A1E;
--bg-glass: rgba(16,16,20,0.8);
--fg: #F0EDE8;
--fg-2: #A8A4A0;
--fg-3: #5A5754;
--border: rgba(255,255,255,0.08);
--border-bright: rgba(255,255,255,0.15);
--shadow: rgba(0,0,0,0.6);
--glow-red: rgba(208,2,27,0.3);
--card-bg: rgba(22,22,28,0.9);
--nav-bg: rgba(10,10,11,0.92);
}
html[data-theme="light"] body[data-page="home"]{
--bg: #F7F5F2;
--bg-2: #EDEBE7;
--bg-3: #E2DFD9;
--bg-glass: rgba(247,245,242,0.85);
--fg: #0A0A0B;
--fg-2: #444240;
--fg-3: #888580;
--border: rgba(0,0,0,0.08);
--border-bright: rgba(0,0,0,0.15);
--shadow: rgba(0,0,0,0.12);
--glow-red: rgba(208,2,27,0.15);
--card-bg: rgba(255,253,250,0.95);
--nav-bg: rgba(247,245,242,0.92);
}
/* ─── RAINBOW ACCENT BAR ───────────────────────────────────── */
body[data-page="home"] .rainbow-bar{
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
#FF3B3B 0%, #FF6B35 12%, #FFD700 25%,
#51CF66 37%, #339AF0 50%, #845EF7 62%,
#FF3B3B 75%, #FF6B35 87%, #FFD700 100%);
background-size: 200% 100%;
animation: rainbowShift 6s linear infinite;
z-index: 1000;
}
@keyframes rainbowShift {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
/* ─── NAVIGATION ───────────────────────────────────────────── */
body[data-page="home"] nav{
position: fixed;
top: 3px; left: 0; right: 0;
height: 62px;
background: var(--nav-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
transition: background 0.5s ease, border-color 0.5s ease;
}
body[data-page="home"] .nav-logo{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 1.3rem;
color: var(--fg);
letter-spacing: -0.02em;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
body[data-page="home"] .nav-logo .logo-dot{
width: 8px; height: 8px;
background: var(--red-bright);
border-radius: 50%;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.7); }
}
body[data-page="home"] .nav-links{
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
body[data-page="home"] .nav-links a{
color: var(--fg-2);
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 6px 12px;
border-radius: 20px;
transition: color 0.2s, background 0.2s;
}
body[data-page="home"] .nav-links a:hover{
color: var(--fg);
background: var(--border);
}
body[data-page="home"] .nav-right{
display: flex;
align-items: center;
gap: 16px;
}
body[data-page="home"] .theme-toggle{
background: var(--border);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 6px 14px;
cursor: pointer;
color: var(--fg-2);
font-size: 0.78rem;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
letter-spacing: 0.02em;
transition: all 0.2s;
}
body[data-page="home"] .theme-toggle:hover{
color: var(--fg);
background: var(--border-bright);
}
body[data-page="home"] .nav-listen-btn{
background: var(--red);
color: white;
border: none;
border-radius: 20px;
padding: 7px 18px;
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.02em;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
body[data-page="home"] .nav-listen-btn:hover{
background: var(--red-bright);
transform: translateY(-1px);
box-shadow: 0 4px 16px var(--glow-red);
}
body[data-page="home"] .nav-live-dot{
width: 6px; height: 6px;
background: #FF4444;
border-radius: 50%;
animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.5); }
50% { box-shadow: 0 0 0 4px rgba(255,68,68,0); }
}
/* ─── MOBILE MENU TOGGLE ───────────────────────────────────── */
body[data-page="home"] .burger{
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
body[data-page="home"] .burger span{
display: block;
width: 22px; height: 2px;
background: var(--fg);
border-radius: 2px;
transition: all 0.3s;
}
/* ─── HERO SECTION ─────────────────────────────────────────── */
body[data-page="home"] #hero{
min-height: 100vh;
padding-top: 65px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
body[data-page="home"] .hero-ambient{
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
body[data-page="home"] .ambient-orb{
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.12;
animation: float-orb 18s ease-in-out infinite;
}
body[data-page="home"] .orb-1{
width: 600px; height: 600px;
background: radial-gradient(circle, #D0021B, transparent);
top: -10%; left: -10%;
animation-delay: 0s;
}
body[data-page="home"] .orb-2{
width: 400px; height: 400px;
background: radial-gradient(circle, #C9A84C, transparent);
top: 40%; right: -5%;
animation-delay: -6s;
opacity: 0.08;
}
body[data-page="home"] .orb-3{
width: 300px; height: 300px;
background: radial-gradient(circle, #339AF0, transparent);
bottom: 10%; left: 30%;
animation-delay: -12s;
opacity: 0.06;
}
@keyframes float-orb {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.05); }
66% { transform: translate(-20px, 30px) scale(0.95); }
}
/* Fine grain overlay */
body[data-page="home"] .hero-ambient::after{
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
opacity: 0.4;
pointer-events: none;
}
body[data-page="home"] .hero-content{
text-align: center;
z-index: 2;
padding: 0 24px;
animation: heroReveal 1.2s var(--easing) both;
}
@keyframes heroReveal {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
body[data-page="home"] .hero-eyebrow{
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--border);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 5px 14px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-2);
margin-bottom: 28px;
animation: heroReveal 1.2s var(--easing) 0.1s both;
}
body[data-page="home"] .eyebrow-year{
color: var(--gold);
font-family: 'DM Mono', monospace;
}
body[data-page="home"] .hero-title{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: clamp(3.5rem, 9vw, 8rem);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--fg);
margin-bottom: 12px;
animation: heroReveal 1.2s var(--easing) 0.2s both;
}
body[data-page="home"] .hero-title .title-accent{
color: var(--red-bright);
font-style: italic;
}
body[data-page="home"] .hero-tagline{
font-size: clamp(1rem, 2.5vw, 1.4rem);
color: var(--fg-2);
font-weight: 300;
letter-spacing: 0.02em;
margin-bottom: 52px;
animation: heroReveal 1.2s var(--easing) 0.3s both;
}
/* ─── LIVE PLAYER ──────────────────────────────────────────── */
body[data-page="home"] .live-player-container{
animation: heroReveal 1.2s var(--easing) 0.4s both;
margin-bottom: 60px;
}
body[data-page="home"] .live-player{
background: var(--card-bg);
border: 1px solid var(--border-bright);
border-radius: 28px;
padding: 28px 36px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 60px var(--shadow), 0 0 0 1px var(--border);
display: flex;
align-items: center;
gap: 28px;
min-width: 420px;
max-width: 560px;
width: 100%;
position: relative;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
body[data-page="home"] .live-player:hover{
box-shadow: 0 12px 80px var(--shadow), 0 0 40px var(--glow-red);
}
body[data-page="home"] .live-player.playing{
box-shadow: 0 8px 60px var(--shadow), 0 0 60px var(--glow-red);
}
body[data-page="home"] .live-player::before{
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(208,2,27,0.5), transparent);
opacity: 0;
transition: opacity 0.3s;
}
body[data-page="home"] .live-player.playing::before{ opacity: 1; }
body[data-page="home"] .play-btn{
width: 64px; height: 64px;
background: var(--red);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.25s var(--easing-spring);
box-shadow: 0 4px 20px rgba(208,2,27,0.4);
position: relative;
}
body[data-page="home"] .play-btn:hover{
background: var(--red-bright);
transform: scale(1.08);
box-shadow: 0 6px 30px rgba(208,2,27,0.6);
}
body[data-page="home"] .play-btn:active{ transform: scale(0.95); }
body[data-page="home"] .play-btn svg{ width: 24px; height: 24px; fill: white; flex-shrink: 0; }
body[data-page="home"] .play-btn .pause-icon{ display: none; }
body[data-page="home"] .play-btn.playing .play-icon{ display: none; }
body[data-page="home"] .play-btn.playing .pause-icon{ display: block; }
/* Ripple on play */
body[data-page="home"] .play-btn::after{
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--red);
opacity: 0;
animation: none;
}
body[data-page="home"] .play-btn.playing::after{
animation: play-ripple 2s ease-out infinite;
}
@keyframes play-ripple {
0% { inset: -4px; opacity: 0.5; }
100% { inset: -20px; opacity: 0; }
}
body[data-page="home"] .player-info{
flex: 1;
min-width: 0;
}
body[data-page="home"] .player-status{
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
body[data-page="home"] .live-badge{
display: flex;
align-items: center;
gap: 5px;
background: rgba(208,2,27,0.15);
border: 1px solid rgba(208,2,27,0.3);
border-radius: 10px;
padding: 2px 8px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-bright);
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
body[data-page="home"] .live-badge[data-state="connecting"],
body[data-page="home"] .live-badge[data-state="buffering"]{
background: rgba(255,215,0,0.15);
border-color: rgba(255,215,0,0.4);
color: #FFD700;
}
body[data-page="home"] .live-badge[data-state="connecting"] .live-badge-dot,
body[data-page="home"] .live-badge[data-state="buffering"] .live-badge-dot{
background: #FFD700;
}
body[data-page="home"] .live-badge[data-state="error"]{
background: rgba(120,120,120,0.15);
border-color: rgba(120,120,120,0.4);
color: #A8A4A0;
}
body[data-page="home"] .live-badge[data-state="error"] .live-badge-dot{
background: #A8A4A0;
animation: none;
opacity: 0.6;
}
body[data-page="home"] .live-badge-dot{
width: 5px; height: 5px;
background: var(--red-bright);
border-radius: 50%;
animation: pulse-live 1.5s ease-in-out infinite;
}
body[data-page="home"] .player-station-name{
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
body[data-page="home"] .player-now-playing{
font-size: 0.75rem;
color: var(--fg-3);
font-weight: 400;
display: flex;
align-items: center;
gap: 5px;
}
/* Waveform visualizer */
body[data-page="home"] .waveform{
display: flex;
align-items: center;
gap: 3px;
height: 28px;
}
body[data-page="home"] .wave-bar{
width: 3px;
background: var(--red);
border-radius: 3px;
/* Idle height; each bar overrides via nth-child below so they
don't all sit at the same baseline when paused. */
height: 4px;
opacity: 0.4;
transition: opacity 0.3s;
}
/* Per-bar IDLE heights — give the static waveform visual variety
even when the player is paused. */
body[data-page="home"] .wave-bar:nth-child(1){ height: 6px; }
body[data-page="home"] .wave-bar:nth-child(2){ height: 12px; }
body[data-page="home"] .wave-bar:nth-child(3){ height: 8px; }
body[data-page="home"] .wave-bar:nth-child(4){ height: 18px; }
body[data-page="home"] .wave-bar:nth-child(5){ height: 10px; }
body[data-page="home"] .wave-bar:nth-child(6){ height: 14px; }
body[data-page="home"] .wave-bar:nth-child(7){ height: 7px; }
body[data-page="home"] .wave-bar:nth-child(8){ height: 11px; }
body[data-page="home"] .live-player.playing .wave-bar{
opacity: 1;
/* Each bar runs its OWN keyframe (defined below) so they peak at
different maximum heights — gives the animation real spectrum
variety instead of every bar pulsing in unison. */
}
/* Per-bar animations — different keyframes give each bar its own
peak height + duration. The slight delay variation plus distinct
peaks produces the irregular dancing-bars look of a real
audio spectrum analyzer. */
body[data-page="home"] .live-player.playing .wave-bar:nth-child(1){
animation: wave-anim-1 0.7s ease-in-out infinite;
animation-delay: 0s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(2){
animation: wave-anim-2 0.9s ease-in-out infinite;
animation-delay: 0.18s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(3){
animation: wave-anim-3 0.6s ease-in-out infinite;
animation-delay: 0.32s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(4){
animation: wave-anim-4 0.85s ease-in-out infinite;
animation-delay: 0.08s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(5){
animation: wave-anim-5 0.75s ease-in-out infinite;
animation-delay: 0.42s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(6){
animation: wave-anim-6 0.95s ease-in-out infinite;
animation-delay: 0.22s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(7){
animation: wave-anim-7 0.65s ease-in-out infinite;
animation-delay: 0.5s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(8){
animation: wave-anim-8 0.8s ease-in-out infinite;
animation-delay: 0.12s;
}
@keyframes wave-anim-1 { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@keyframes wave-anim-2 { 0%, 100% { height: 6px; } 50% { height: 26px; } }
@keyframes wave-anim-3 { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@keyframes wave-anim-4 { 0%, 100% { height: 8px; } 50% { height: 24px; } }
@keyframes wave-anim-5 { 0%, 100% { height: 5px; } 50% { height: 20px; } }
@keyframes wave-anim-6 { 0%, 100% { height: 6px; } 50% { height: 16px; } }
@keyframes wave-anim-7 { 0%, 100% { height: 4px; } 50% { height: 22px; } }
@keyframes wave-anim-8 { 0%, 100% { height: 5px; } 50% { height: 19px; } }
/* idle waveform animation even when paused */
body[data-page="home"] .hero-waveform{
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 40px;
margin-bottom: 8px;
}
body[data-page="home"] .idle-bar{
width: 2px;
background: linear-gradient(180deg, var(--red-bright), var(--red-muted));
border-radius: 2px;
animation: idle-wave 3s ease-in-out infinite;
opacity: 0.3;
}
body[data-page="home"] .idle-bar:nth-child(1){ height: 8px; animation-delay: 0s; }
body[data-page="home"] .idle-bar:nth-child(2){ height: 16px; animation-delay: 0.2s; }
body[data-page="home"] .idle-bar:nth-child(3){ height: 24px; animation-delay: 0.4s; }
body[data-page="home"] .idle-bar:nth-child(4){ height: 32px; animation-delay: 0.6s; }
body[data-page="home"] .idle-bar:nth-child(5){ height: 40px; animation-delay: 0.8s; }
body[data-page="home"] .idle-bar:nth-child(6){ height: 32px; animation-delay: 1.0s; }
body[data-page="home"] .idle-bar:nth-child(7){ height: 24px; animation-delay: 0.8s; }
body[data-page="home"] .idle-bar:nth-child(8){ height: 16px; animation-delay: 0.6s; }
body[data-page="home"] .idle-bar:nth-child(9){ height: 8px; animation-delay: 0.4s; }
body[data-page="home"] .idle-bar:nth-child(10){ height: 16px; animation-delay: 0.2s; }
body[data-page="home"] .idle-bar:nth-child(11){ height: 24px; animation-delay: 0s; }
body[data-page="home"] .idle-bar:nth-child(12){ height: 32px; animation-delay: 0.3s; }
body[data-page="home"] .idle-bar:nth-child(13){ height: 24px; animation-delay: 0.5s; }
body[data-page="home"] .idle-bar:nth-child(14){ height: 16px; animation-delay: 0.7s; }
body[data-page="home"] .idle-bar:nth-child(15){ height: 8px; animation-delay: 0.9s; }
@keyframes idle-wave {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
body[data-page="home"] .hero-scroll-hint{
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--fg-3);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
z-index: 2;
animation: bounce-hint 3s ease-in-out infinite;
}
body[data-page="home"] .scroll-line{
width: 1px;
height: 40px;
background: linear-gradient(180deg, transparent, var(--fg-3));
}
@keyframes bounce-hint {
0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
50% { opacity: 0.8; transform: translateX(-50%) translateY(6px); }
}
/* ─── SECTIONS ─────────────────────────────────────────────── */
body[data-page="home"] section{
padding: 120px 0;
position: relative;
}
body[data-page="home"] .section-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
/* Reveal on scroll */
body[data-page="home"] .reveal{
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
body[data-page="home"] .reveal.visible{
opacity: 1;
transform: translateY(0);
}
body[data-page="home"] .reveal-delay-1{ transition-delay: 0.1s; }
body[data-page="home"] .reveal-delay-2{ transition-delay: 0.2s; }
body[data-page="home"] .reveal-delay-3{ transition-delay: 0.3s; }
body[data-page="home"] .reveal-delay-4{ transition-delay: 0.4s; }
/* Section headers */
body[data-page="home"] .section-label{
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
body[data-page="home"] .section-label::before{
content: '';
display: block;
width: 24px; height: 1px;
background: var(--red);
}
body[data-page="home"] .section-title{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--fg);
margin-bottom: 20px;
}
body[data-page="home"] .section-title em{ color: var(--red-bright); font-style: italic; }
body[data-page="home"] .section-subtitle{
font-size: 1.05rem;
color: var(--fg-2);
line-height: 1.7;
max-width: 540px;
font-weight: 300;
}
/* ─── STORY / LORE SECTION ─────────────────────────────────── */
body[data-page="home"] #story{
background: var(--bg-2);
overflow: hidden;
}
body[data-page="home"] .story-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-top: 60px;
}
body[data-page="home"] .story-text p{
color: var(--fg-2);
line-height: 1.8;
margin-bottom: 18px;
font-size: 0.98rem;
font-weight: 300;
}
body[data-page="home"] .story-milestone{
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 0;
border-top: 1px solid var(--border);
}
body[data-page="home"] .milestone-year{
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
color: var(--gold);
font-weight: 500;
flex-shrink: 0;
padding-top: 3px;
width: 56px;
letter-spacing: .02em;
}
body[data-page="home"] .milestone-text{
font-size: 0.88rem;
color: var(--fg-2);
line-height: 1.6;
}
body[data-page="home"] .milestone-text strong{
display: block;
color: var(--fg);
font-weight: 600;
margin-bottom: 3px;
}
body[data-page="home"] .story-visual{
position: relative;
}
body[data-page="home"] .story-card{
background: var(--card-bg);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 36px;
backdrop-filter: blur(20px);
}
body[data-page="home"] .story-stat{
margin-bottom: 30px;
}
body[data-page="home"] .stat-number{
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 900;
color: var(--fg);
line-height: 1;
letter-spacing: -0.04em;
}
body[data-page="home"] .stat-number span{ color: var(--red-bright); }
body[data-page="home"] .stat-label{
font-size: 0.78rem;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 6px;
}
/* ─── PROGRAMS GRID (Sports / Music / Journalism / BTV) ────── */
body[data-page="home"] #programs{ background: var(--bg); }
body[data-page="home"] .programs-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 60px;
}
body[data-page="home"] .program-card{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 36px;
cursor: default;
transition: all 0.35s var(--easing);
position: relative;
overflow: hidden;
}
body[data-page="home"] .program-card::before{
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--card-accent, var(--red));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--easing);
}
body[data-page="home"] .program-card:hover::before{ transform: scaleX(1); }
body[data-page="home"] .program-card:hover{
transform: translateY(-4px);
border-color: var(--border-bright);
box-shadow: 0 20px 60px var(--shadow);
}
body[data-page="home"] .program-icon{
width: 48px; height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
background: var(--card-accent-bg, rgba(208,2,27,0.1));
}
body[data-page="home"] .program-title{
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 10px;
letter-spacing: -0.02em;
}
body[data-page="home"] .program-desc{
font-size: 0.88rem;
color: var(--fg-2);
line-height: 1.7;
font-weight: 300;
}
body[data-page="home"] .program-tag{
display: inline-block;
margin-top: 18px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
color: var(--card-accent, var(--red));
background: var(--card-accent-bg, rgba(208,2,27,0.1));
}
/* sport */
body[data-page="home"] .card-sports{ --card-accent: #FF6B35; --card-accent-bg: rgba(255,107,53,0.1); }
/* music */
body[data-page="home"] .card-music{ --card-accent: #845EF7; --card-accent-bg: rgba(132,94,247,0.1); }
/* journalism */
body[data-page="home"] .card-journalism{ --card-accent: #339AF0; --card-accent-bg: rgba(51,154,240,0.1); }
/* btv */
body[data-page="home"] .card-btv{ --card-accent: #51CF66; --card-accent-bg: rgba(81,207,102,0.1); }
/* ─── RADIO SECTION ────────────────────────────────────────── */
body[data-page="home"] #radio{ background: var(--bg-2); }
body[data-page="home"] .radio-inner{
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
margin-top: 60px;
}
body[data-page="home"] .schedule-list{
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 0;
}
body[data-page="home"] .schedule-item{
display: flex;
align-items: center;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid var(--border);
transition: all 0.2s;
}
body[data-page="home"] .schedule-item:hover .schedule-name{ color: var(--red-bright); }
body[data-page="home"] .schedule-time{
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: var(--fg-3);
width: 80px;
flex-shrink: 0;
}
body[data-page="home"] .schedule-name{
font-size: 0.9rem;
font-weight: 500;
color: var(--fg);
transition: color 0.2s;
}
body[data-page="home"] .schedule-host{
font-size: 0.78rem;
color: var(--fg-3);
margin-top: 2px;
}
body[data-page="home"] .schedule-live-badge{
margin-left: auto;
background: rgba(208,2,27,0.15);
border: 1px solid rgba(208,2,27,0.3);
border-radius: 10px;
padding: 2px 8px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-bright);
flex-shrink: 0;
}
body[data-page="home"] .radio-visual{
display: flex;
flex-direction: column;
gap: 20px;
}
body[data-page="home"] .frequency-display{
background: var(--near-black);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 36px;
text-align: center;
}
html[data-theme="light"] body[data-page="home"] .frequency-display{
background: #1A1A1E;
}
body[data-page="home"] .freq-label{
font-size: 0.68rem;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 8px;
}
body[data-page="home"] .freq-number{
font-family: 'DM Mono', monospace;
font-size: 3.5rem;
font-weight: 500;
color: var(--red-bright);
letter-spacing: -0.04em;
line-height: 1;
text-shadow: 0 0 30px rgba(208,2,27,0.4);
}
body[data-page="home"] .freq-unit{
font-size: 1.2rem;
color: rgba(255,100,100,0.6);
margin-left: 4px;
}
body[data-page="home"] .freq-bars{
display: flex;
justify-content: center;
align-items: flex-end;
gap: 3px;
height: 36px;
margin-top: 16px;
}
body[data-page="home"] .freq-bar{
width: 4px;
background: var(--red);
border-radius: 2px;
opacity: 0.5;
animation: freq-pulse 1.2s ease-in-out infinite;
}
body[data-page="home"] .freq-bar:nth-child(odd){ background: var(--gold); }
@keyframes freq-pulse {
0%, 100% { height: 4px; opacity: 0.3; }
50% { height: 28px; opacity: 0.8; }
}
/* ─── TEAM SECTION ─────────────────────────────────────────── */
body[data-page="home"] #team{ background: var(--bg); }
body[data-page="home"] .team-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
body[data-page="home"] .team-card{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px 28px;
text-align: center;
transition: all 0.35s var(--easing);
position: relative;
overflow: hidden;
}
body[data-page="home"] .team-card:hover{
transform: translateY(-6px);
border-color: var(--border-bright);
box-shadow: 0 20px 60px var(--shadow);
}
body[data-page="home"] .team-avatar{
width: 72px; height: 72px;
border-radius: 50%;
background: var(--bg-3);
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
position: relative;
overflow: hidden;
border: 2px solid var(--border-bright);
}
body[data-page="home"] .team-name{
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 4px;
}
body[data-page="home"] .team-role{
font-size: 0.75rem;
color: var(--red);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
}
body[data-page="home"] .team-bio{
font-size: 0.82rem;
color: var(--fg-3);
line-height: 1.6;
}
/* ─── JOIN US ──────────────────────────────────────────────── */
body[data-page="home"] #join{
background: var(--bg-2);
text-align: center;
}
body[data-page="home"] .join-inner{
max-width: 700px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="home"] .join-cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 60px 0;
}
body[data-page="home"] .join-card{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px 20px;
transition: all 0.3s var(--easing);
}
body[data-page="home"] .join-card:hover{
transform: translateY(-4px);
border-color: var(--red);
box-shadow: 0 12px 40px var(--glow-red);
}
body[data-page="home"] .join-card-icon{ font-size: 2rem; margin-bottom: 14px; }
body[data-page="home"] .join-card-title{
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 8px;
}
body[data-page="home"] .join-card-text{
font-size: 0.8rem;
color: var(--fg-3);
line-height: 1.6;
}
body[data-page="home"] .join-cta{
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--red);
color: white;
border: none;
border-radius: 50px;
padding: 16px 40px;
font-family: 'DM Sans', sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.02em;
transition: all 0.25s var(--easing-spring);
text-decoration: none;
}
body[data-page="home"] .join-cta:hover{
background: var(--red-bright);
transform: translateY(-2px) scale(1.03);
box-shadow: 0 8px 40px rgba(208,2,27,0.4);
}
/* ─── ANNIVERSARY BANNER ───────────────────────────────────── */
body[data-page="home"] .anniversary-banner{
position: relative;
background: var(--red);
padding: 80px 40px;
overflow: hidden;
text-align: center;
}
body[data-page="home"] .anniversary-banner::before{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--red) 0%, #8B0010 100%);
}
body[data-page="home"] .anniversary-banner-content{
position: relative;
z-index: 2;
}
body[data-page="home"] .ann-label{
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 12px;
font-weight: 600;
}
body[data-page="home"] .ann-title{
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 900;
color: white;
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: 16px;
}
body[data-page="home"] .ann-title em{ font-style: italic; color: var(--gold-light); }
body[data-page="home"] .ann-subtitle{
color: rgba(255,255,255,0.7);
font-size: 1.1rem;
font-weight: 300;
max-width: 500px;
margin: 0 auto;
}
/* Floating particles in banner */
body[data-page="home"] .banner-particles span{
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.08);
animation: float-particle 8s ease-in-out infinite;
}
body[data-page="home"] .banner-particles span:nth-child(1){ width: 120px; height: 120px; top: -20px; left: 5%; animation-delay: 0s; }
body[data-page="home"] .banner-particles span:nth-child(2){ width: 80px; height: 80px; bottom: -10px; right: 10%; animation-delay: -3s; }
body[data-page="home"] .banner-particles span:nth-child(3){ width: 50px; height: 50px; top: 40%; left: 25%; animation-delay: -6s; }
body[data-page="home"] .banner-particles span:nth-child(4){ width: 200px; height: 200px; bottom: -60px; right: 30%; animation-delay: -1.5s; opacity: 0.05; }
@keyframes float-particle {
0%, 100% { transform: translate(0,0) rotate(0deg); }
33% { transform: translate(15px,-10px) rotate(10deg); }
66% { transform: translate(-10px,15px) rotate(-5deg); }
}
/* ─── FOOTER ───────────────────────────────────────────────── */
body[data-page="home"] footer{
background: var(--near-black);
padding: 60px 0 40px;
color: rgba(255,255,255,0.4);
}
body[data-page="home"] .footer-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="home"] .footer-top{
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 60px;
margin-bottom: 48px;
}
body[data-page="home"] .footer-brand{
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 900;
color: white;
margin-bottom: 12px;
}
body[data-page="home"] .footer-tagline{
font-size: 0.82rem;
line-height: 1.7;
max-width: 240px;
}
body[data-page="home"] .footer-col-title{
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 16px;
}
body[data-page="home"] .footer-links{
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
body[data-page="home"] .footer-links a{
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s;
}
body[data-page="home"] .footer-links a:hover{ color: white; }
body[data-page="home"] .footer-bottom{
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
}
body[data-page="home"] .footer-copy{ color: rgba(255,255,255,0.2); }
body[data-page="home"] .footer-badge{
display: flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.25);
}
body[data-page="home"] .footer-badge span{ color: var(--red); font-weight: 700; }
/* ─── AUDIO ELEMENT ────────────────────────────────────────── */
body[data-page="home"] #radio-audio{ display: none; }
/* ─── TRANSITIONS ──────────────────────────────────────────── */
body[data-page="home"] .fade-in{ animation: fadeIn 0.6s ease both; }
@keyframes fadeIn {
from { opacity: 0; } to { opacity: 1; }
}
/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
body[data-page="home"] .nav-links{ display: none; }
body[data-page="home"] .burger{ display: flex; }
body[data-page="home"] .nav-links.open{
display: flex;
flex-direction: column;
position: fixed;
top: 65px; left: 0; right: 0;
background: var(--nav-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 20px 24px 30px;
border-bottom: 1px solid var(--border);
gap: 4px;
z-index: 998;
}
body[data-page="home"] .nav-links.open a{ font-size: 0.95rem; padding: 10px 0; }
body[data-page="home"] .story-grid{ grid-template-columns: 1fr; gap: 48px; }
body[data-page="home"] .programs-grid{ grid-template-columns: 1fr; }
body[data-page="home"] .radio-inner{ grid-template-columns: 1fr; gap: 48px; }
body[data-page="home"] .team-grid{ grid-template-columns: repeat(2, 1fr); }
body[data-page="home"] .join-cards{ grid-template-columns: 1fr; }
body[data-page="home"] .footer-top{ grid-template-columns: 1fr 1fr; gap: 36px; }
body[data-page="home"] .live-player{
min-width: unset;
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 20px;
}
body[data-page="home"] .nav-listen-btn span:not(.nav-live-dot){ display: none; }
}
@media (max-width: 600px) {
body[data-page="home"] nav{ padding: 0 20px; }
body[data-page="home"] .section-inner{ padding: 0 20px; }
body[data-page="home"] section{ padding: 80px 0; }
body[data-page="home"] .team-grid{ grid-template-columns: 1fr; }
body[data-page="home"] .footer-top{ grid-template-columns: 1fr; }
body[data-page="home"] .footer-bottom{ flex-direction: column; gap: 12px; text-align: center; }
body[data-page="home"] .hero-content{ padding: 0 16px; }
}
/* ─── LORE LAYER: subtle easter egg text ────────────────────── */
/* ─── TEAM CTA BLOCK ───────────────────────────────────────── */
body[data-page="home"] .team-cta-block{
padding: 20px 0;
}
body[data-page="home"] .dept-preview-row{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
body[data-page="home"] .dept-preview-pill{
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 50px;
padding: 9px 18px;
font-size: .82rem;
font-weight: 500;
color: var(--fg-2);
transition: all .25s;
}
body[data-page="home"] .dept-preview-pill:hover{
border-color: var(--dp-c, var(--red));
color: var(--dp-c, var(--red));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
/* ─── NOW ON AIR CARD ──────────────────────────────────────── */
body[data-page="home"] .now-on-air-card{
background: var(--near-black);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 24px 28px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
html[data-theme="light"] body[data-page="home"] .now-on-air-card{ background: #1A1A1E; }
body[data-page="home"] .now-on-air-card::before{
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--red), var(--red-bright), transparent);
animation: noa-pulse 3s ease-in-out infinite;
}
@keyframes noa-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
body[data-page="home"] .noa-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
body[data-page="home"] .noa-live-badge{
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(208,2,27,.15);
border: 1px solid rgba(208,2,27,.3);
border-radius: 10px;
padding: 3px 10px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--red-bright);
}
body[data-page="home"] .noa-dot{
width: 5px; height: 5px;
background: var(--red-bright);
border-radius: 50%;
animation: pulse-live 1.5s ease-in-out infinite;
}
body[data-page="home"] .noa-time{
font-family: 'DM Mono', monospace;
font-size: .7rem;
color: rgba(255,255,255,.3);
}
body[data-page="home"] .noa-show{
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 900;
color: white;
letter-spacing: -.03em;
margin-bottom: 4px;
line-height: 1.1;
}
body[data-page="home"] .noa-host{
font-size: .76rem;
color: rgba(255,255,255,.4);
font-family: 'DM Mono', monospace;
margin-bottom: 16px;
}
body[data-page="home"] .noa-progress-wrap{
width: 100%;
height: 2px;
background: rgba(255,255,255,.08);
border-radius: 2px;
margin-bottom: 14px;
overflow: hidden;
}
body[data-page="home"] .noa-progress-bar{
height: 100%;
background: linear-gradient(90deg, var(--red-muted), var(--red-bright));
border-radius: 2px;
width: 0%;
transition: width 1s linear;
}
body[data-page="home"] .noa-next{
display: flex;
align-items: center;
gap: 8px;
font-size: .72rem;
}
body[data-page="home"] .noa-next-label{
font-family: 'DM Mono', monospace;
color: rgba(255,255,255,.25);
font-size: .6rem;
letter-spacing: .08em;
text-transform: uppercase;
}
body[data-page="home"] .noa-next-show{
color: rgba(255,255,255,.5);
font-weight: 500;
}
body[data-page="home"] .todays-schedule{ display: flex; flex-direction: column; }
body[data-page="home"] .tds-row{
display: flex;
align-items: center;
gap: 14px;
padding: 11px 0;
border-bottom: 1px solid var(--border);
transition: all .2s;
}
body[data-page="home"] .tds-row:last-child{ border-bottom: none; }
body[data-page="home"] .tds-row:hover .tds-name{ color: var(--red-bright); }
body[data-page="home"] .tds-row.tds-current .tds-time{ color: var(--red); }
body[data-page="home"] .tds-row.tds-current .tds-name{ color: var(--fg); font-weight: 600; }
body[data-page="home"] .tds-time{
font-family: 'DM Mono', monospace;
font-size: .68rem;
color: var(--fg-3);
width: 68px;
flex-shrink: 0;
}
body[data-page="home"] .tds-name{ font-size: .84rem; color: var(--fg-2); transition: color .2s; flex: 1; }
body[data-page="home"] .tds-genre{
font-size: .58rem; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase;
padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
body[data-page="home"] .tds-news{ background: rgba(51,154,240,.1); color: #339AF0; }
body[data-page="home"] .tds-music{ background: rgba(132,94,247,.1); color: #845EF7; }
body[data-page="home"] .tds-sports{ background: rgba(255,107,53,.1); color: #FF6B35; }
body[data-page="home"] .tds-talk{ background: rgba(81,207,102,.1); color: #51CF66; }
/* ─── STREAM DISPLAY ────────────────────────────────────────── */
body[data-page="home"] .stream-display{
background: var(--near-black);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 28px;
text-align: center;
margin-bottom: 16px;
}
html[data-theme="light"] body[data-page="home"] .stream-display{ background: #1A1A1E; }
body[data-page="home"] .stream-display-header{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 8px;
}
body[data-page="home"] .stream-display-label{
font-family: 'DM Mono', monospace;
font-size: .64rem;
color: rgba(255,255,255,.3);
text-transform: uppercase;
letter-spacing: .12em;
}
body[data-page="home"] .stream-status-dot{
width: 6px; height: 6px;
background: #51CF66;
border-radius: 50%;
animation: pulse-live 2s ease-in-out infinite;
}
body[data-page="home"] .stream-display-url{
font-family: 'DM Mono', monospace;
font-size: 1.3rem;
font-weight: 500;
color: var(--red-bright);
letter-spacing: -.02em;
text-shadow: 0 0 20px rgba(208,2,27,.4);
margin-bottom: 16px;
}
body[data-page="home"] .stream-full-link{
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--red);
color: white;
text-decoration: none;
border-radius: 50px;
padding: 9px 22px;
font-size: .8rem;
font-weight: 600;
margin-top: 8px;
transition: all .2s var(--easing-spring);
letter-spacing: .02em;
}
body[data-page="home"] .stream-full-link:hover{
background: var(--red-bright);
transform: translateY(-1px);
box-shadow: 0 4px 16px var(--glow-red);
}
body[data-page="home"] .listen-options{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px 20px;
}
body[data-page="home"] .listen-option-title{
font-size: .62rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: 12px;
}
body[data-page="home"] .listen-option-item{
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
font-size: .8rem;
color: var(--fg-2);
}
body[data-page="home"] .listen-option-item strong{ color: var(--fg); }
body[data-page="home"] .lo-icon{ font-size: 1rem; flex-shrink: 0; }
body[data-page="home"] .lore-text{
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
color: var(--fg-3);
opacity: 0.4;
letter-spacing: 0.06em;
margin-top: 40px;
}
/* Only suppress native cursor after JS confirms it loaded.
If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
cursor: none !important;
}
/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
cursor: text !important;
}
/* ── CURSOR WRAPPER ────────────────────────────────────────────
Top-left corner of the div = the mouse coordinate.
SVG tip is drawn at (0,0) — so the visual tip and the
hot-point are the exact same pixel. No offset required. */
#bc-cursor{
position: fixed;
top: 0;
left: 0;
width: 20px;
height: 24px;
pointer-events: none;
z-index: 999999;
opacity: 0;
will-change: transform;
}
/* ── THE ARROW SVG ─────────────────────────────────────────────
transform-origin: 0 0 locks all scale animations to the tip.
Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
display: block;
width: 20px;
height: 24px;
transform-origin: 0 0;
transition:
transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.16s ease;
will-change: transform;
}
/* The filled arrow body */
#bc-cursor .arrow-fill{
fill: rgba(255, 255, 255, 0.92);
transition: fill 0.16s ease;
}
/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
fill: none;
stroke: rgba(0, 0, 0, 0.55);
stroke-width: 1px;
stroke-linejoin: round;
transition: stroke 0.16s ease;
}
/* Soft drop shadow lifts the arrow off the page */
#bc-cursor svg{
filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.4));
}
/* ── HOVER STATE ───────────────────────────────────────────────
Scale up ~15% — just enough to register "ready".
No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
transform: scale(1.15);
}
/* ── CLICK STATE ───────────────────────────────────────────────
Fast compress to 80%, snaps back on mouseup.
The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
transform: scale(0.78);
transition:
transform 0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.07s ease;
}
/* ── TEXT INPUT STATE ──────────────────────────────────────────
Arrow fades out entirely — native I-beam has control.
The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
opacity: 0;
transform: scale(0.6);
}
/* ── LIGHT THEME ───────────────────────────────────────────────
Flip fill to ink, brighten the stroke, soften the shadow —
same arrow, equally readable on paper-white. */
html[data-theme="light"] #bc-cursor .arrow-fill{
fill: rgba(17, 17, 22, 0.92);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
stroke: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] #bc-cursor svg{
filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.22));
}
/* ═══════════════════════════════════════════════════
PAGE: BTV (btv.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="btv"]{
font-family:'DM Sans',sans-serif;
background:var(--bg);color:var(--fg);
overflow-x:hidden;
transition:background .4s,color .4s;
min-height:100vh;
}
body[data-page="btv"] button, body[data-page="btv"] input, body[data-page="btv"] select{font-family:inherit}
/* ══════════════════════════════════════════════════
TOKENS
══════════════════════════════════════════════════ */
body[data-page="btv"]{
--green:#00E676;
--green-dim:#00C853;
--green-muted:#004D2A;
--red-rec:#FF1744;
--amber:#FFB300;
--near-black:#05060A;
--ease:cubic-bezier(.25,.46,.45,.94);
--spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] body[data-page="btv"]{
--bg:#05060A;
--bg-2:#0C0D14;
--bg-3:#14161F;
--fg:#E8EAF0;
--fg-2:#8A8D9A;
--fg-3:#44475A;
--border:rgba(255,255,255,.06);
--border-b:rgba(255,255,255,.12);
--shadow:rgba(0,0,0,.8);
--glow:rgba(0,230,118,.2);
--glow-red:rgba(255,23,68,.2);
--card:rgba(14,15,22,.97);
--nav-bg:rgba(5,6,10,.94);
--glass:rgba(14,15,22,.85);
--overlay:rgba(3,4,8,.96);
}
html[data-theme="light"] body[data-page="btv"]{
--bg:#F0F2F5;
--bg-2:#E4E7ED;
--bg-3:#D8DCE5;
--fg:#0A0B12;
--fg-2:#3D404D;
--fg-3:#8A8D9A;
--border:rgba(0,0,0,.07);
--border-b:rgba(0,0,0,.14);
--shadow:rgba(0,0,0,.1);
--glow:rgba(0,200,83,.15);
--glow-red:rgba(255,23,68,.1);
--card:rgba(255,255,255,.98);
--nav-bg:rgba(240,242,245,.94);
--glass:rgba(255,255,255,.85);
--overlay:rgba(235,237,242,.97);
}
/* ══════════════════════════════════════════════════
RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="btv"] .rainbow-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
background:linear-gradient(90deg,
#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
#51CF66 42%,#339AF0 56%,#845EF7 70%,
#FF3B3B 84%,#FF6B35 100%);
background-size:200% 100%;
animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}
/* ══════════════════════════════════════════════════
NAV
══════════════════════════════════════════════════ */
body[data-page="btv"] nav{
position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;
background:var(--nav-bg);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
padding:0 32px;transition:background .4s;
}
body[data-page="btv"] .nav-logo{
font-family:'Bebas Neue',sans-serif;
font-size:1.8rem;letter-spacing:.06em;
color:var(--fg);text-decoration:none;
display:flex;align-items:center;gap:10px;
line-height:1;
}
body[data-page="btv"] .nav-logo .btv-badge{
background:var(--red-rec);
color:white;font-size:.55rem;font-family:'DM Mono',monospace;
font-weight:500;letter-spacing:.08em;
padding:3px 7px;border-radius:4px;
display:flex;align-items:center;gap:4px;
animation:recPulse 2s ease-in-out infinite;
}
body[data-page="btv"] .nav-logo .btv-badge::before{
content:'';width:5px;height:5px;border-radius:50%;
background:white;animation:recDot 2s ease-in-out infinite;
}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes recDot{0%,100%{opacity:1}50%{opacity:0}}
body[data-page="btv"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="btv"] .nav-pill{
background:var(--border);border:1px solid var(--border-b);
border-radius:20px;padding:6px 14px;
font-size:.78rem;font-weight:500;color:var(--fg-2);
cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="btv"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
/* ══════════════════════════════════════════════════
HERO / BROADCAST PLAYER
══════════════════════════════════════════════════ */
body[data-page="btv"] .broadcast-hero{
min-height:100vh;
padding-top:63px;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
position:relative;overflow:hidden;
background:var(--near-black);
}
html[data-theme="light"] body[data-page="btv"] .broadcast-hero{background:#0C0D14}
/* CRT scanlines */
body[data-page="btv"] .broadcast-hero::before{
content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
background:repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0,0,0,.08) 3px,
rgba(0,0,0,.08) 4px
);
}
/* Vignette */
body[data-page="btv"] .broadcast-hero::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.7) 100%);
}
/* Ambient color pools */
body[data-page="btv"] .hero-ambient{position:absolute;inset:0;pointer-events:none}
body[data-page="btv"] .amb-pool{
position:absolute;border-radius:50%;filter:blur(120px);
}
body[data-page="btv"] .amb-1{width:500px;height:500px;background:rgba(0,230,118,.08);top:-10%;left:-10%;animation:ambDrift 20s ease-in-out infinite}
body[data-page="btv"] .amb-2{width:400px;height:400px;background:rgba(255,23,68,.06);bottom:5%;right:-5%;animation:ambDrift 16s ease-in-out infinite reverse}
body[data-page="btv"] .amb-3{width:300px;height:300px;background:rgba(255,179,0,.04);top:40%;left:40%;animation:ambDrift 24s ease-in-out infinite 4s}
@keyframes ambDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-25px)}}
body[data-page="btv"] .hero-inner{
position:relative;z-index:2;
max-width:1200px;width:100%;
padding:0 40px;
display:grid;
grid-template-columns:1.4fr 1fr;
gap:60px;align-items:center;
}
/* ── BROADCAST FRAME ─────────────────────────── */
body[data-page="btv"] .broadcast-frame{
position:relative;
}
body[data-page="btv"] .broadcast-frame-chrome{
background:linear-gradient(145deg,#1A1C24,#0E0F16);
border:1px solid rgba(255,255,255,.1);
border-radius:16px;
padding:14px;
box-shadow:0 40px 120px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);
position:relative;
}
/* TV glint */
body[data-page="btv"] .broadcast-frame-chrome::before{
content:'';position:absolute;
top:8px;left:8px;right:8px;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
border-radius:2px;pointer-events:none;
}
/* Top bar with controls */
body[data-page="btv"] .frame-topbar{
display:flex;align-items:center;gap:8px;
margin-bottom:10px;padding:0 4px;
}
body[data-page="btv"] .frame-dot{width:10px;height:10px;border-radius:50%}
body[data-page="btv"] .frame-dot-r{background:#FF5F57}
body[data-page="btv"] .frame-dot-y{background:#FFBD2E}
body[data-page="btv"] .frame-dot-g{background:#28CA41}
body[data-page="btv"] .frame-title{
margin-left:auto;
font-family:'DM Mono',monospace;
font-size:.62rem;color:rgba(255,255,255,.25);
letter-spacing:.1em;text-transform:uppercase;
}
body[data-page="btv"] .frame-live-indicator{
display:flex;align-items:center;gap:5px;
font-family:'DM Mono',monospace;
font-size:.6rem;color:var(--red-rec);
letter-spacing:.1em;text-transform:uppercase;
font-weight:500;
}
body[data-page="btv"] .live-dot{
width:6px;height:6px;border-radius:50%;
background:var(--red-rec);
animation:recDot 1.2s ease-in-out infinite;
}
/* YouTube embed wrapper */
body[data-page="btv"] .yt-wrapper{
position:relative;width:100%;
aspect-ratio:16/9;
border-radius:8px;overflow:hidden;
background:#000;
}
body[data-page="btv"] .yt-wrapper iframe{
position:absolute;inset:0;width:100%;height:100%;
border:none;
}
/* Video ID input for customisation */
body[data-page="btv"] .yt-input-row{
display:flex;align-items:center;gap:8px;
margin-top:12px;padding:0 4px;
}
body[data-page="btv"] .yt-input{
flex:1;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:8px;padding:7px 12px;
color:rgba(255,255,255,.6);
font-family:'DM Mono',monospace;font-size:.72rem;
outline:none;transition:border-color .2s;
}
body[data-page="btv"] .yt-input:focus{border-color:var(--green)}
body[data-page="btv"] .yt-input::placeholder{color:rgba(255,255,255,.2)}
body[data-page="btv"] .yt-load-btn{
background:var(--green);border:none;border-radius:8px;
padding:8px 14px;font-size:.72rem;font-weight:600;
color:#000;cursor:pointer;transition:all .2s;white-space:nowrap;
}
body[data-page="btv"] .yt-load-btn:hover{background:var(--green-dim)}
/* Frame bottom info */
body[data-page="btv"] .frame-info{
display:flex;align-items:center;justify-content:space-between;
margin-top:12px;padding:0 4px;
}
body[data-page="btv"] .frame-ep-badge{
background:rgba(0,230,118,.12);
border:1px solid rgba(0,230,118,.25);
border-radius:8px;padding:4px 10px;
font-family:'DM Mono',monospace;
font-size:.65rem;color:var(--green);
letter-spacing:.06em;
}
body[data-page="btv"] .frame-runtime{
font-family:'DM Mono',monospace;
font-size:.65rem;color:rgba(255,255,255,.25);
}
/* ── HERO RIGHT ──────────────────────────────── */
body[data-page="btv"] .hero-right{
color:white;
animation:heroFade 1s var(--ease) .15s both;
}
@keyframes heroFade{
from{opacity:0;transform:translateX(20px)}
to{opacity:1;transform:translateX(0)}
}
body[data-page="btv"] .hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:rgba(0,230,118,.1);
border:1px solid rgba(0,230,118,.2);
border-radius:20px;padding:5px 14px;
font-size:.68rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--green);
margin-bottom:20px;
}
body[data-page="btv"] .hero-title{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(3.5rem,8vw,7rem);
letter-spacing:.04em;line-height:.9;
color:white;margin-bottom:16px;
}
body[data-page="btv"] .hero-title .title-line-2{color:var(--green)}
body[data-page="btv"] .hero-sub{
font-size:1rem;color:rgba(255,255,255,.5);
line-height:1.75;font-weight:300;
max-width:360px;margin-bottom:32px;
}
body[data-page="btv"] .hero-stats{
display:flex;gap:32px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.08);
}
body[data-page="btv"] .hs-val{
font-family:'Bebas Neue',sans-serif;
font-size:2.6rem;letter-spacing:.04em;
color:white;line-height:1;
}
body[data-page="btv"] .hs-val em{color:var(--green);font-style:normal}
body[data-page="btv"] .hs-lbl{
font-size:.65rem;font-weight:600;
text-transform:uppercase;letter-spacing:.1em;
color:rgba(255,255,255,.3);margin-top:4px;
}
/* ══════════════════════════════════════════════════
CHANNEL STRIP
══════════════════════════════════════════════════ */
body[data-page="btv"] .channel-strip{
background:var(--bg-2);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
padding:0;overflow:hidden;
}
body[data-page="btv"] .channel-scroll{
display:flex;gap:0;
overflow-x:auto;scrollbar-width:none;
}
body[data-page="btv"] .channel-scroll::-webkit-scrollbar{display:none}
body[data-page="btv"] .channel-tab{
display:flex;align-items:center;gap:8px;
padding:18px 28px;
border-right:1px solid var(--border);
font-size:.78rem;font-weight:500;color:var(--fg-2);
cursor:pointer;white-space:nowrap;
transition:all .2s;flex-shrink:0;
background:none;border-top:none;border-left:none;border-bottom:none;
position:relative;
}
body[data-page="btv"] .channel-tab::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
background:var(--green);transform:scaleX(0);
transition:transform .25s var(--ease);
}
body[data-page="btv"] .channel-tab:hover{color:var(--fg);background:var(--border)}
body[data-page="btv"] .channel-tab.active{color:var(--fg)}
body[data-page="btv"] .channel-tab.active::after{transform:scaleX(1)}
body[data-page="btv"] .ch-icon{font-size:1rem}
body[data-page="btv"] .ch-count{
background:var(--border-b);border-radius:10px;
padding:1px 7px;font-size:.62rem;
font-family:'DM Mono',monospace;color:var(--fg-3);
}
body[data-page="btv"] .channel-tab.active .ch-count{background:rgba(0,230,118,.15);color:var(--green)}
/* ══════════════════════════════════════════════════
EPISODES SECTION
══════════════════════════════════════════════════ */
body[data-page="btv"] .episodes-section{padding:60px 0 100px;background:var(--bg)}
body[data-page="btv"] .ep-inner{max-width:1200px;margin:0 auto;padding:0 40px}
/* Search + filter row */
body[data-page="btv"] .ep-controls{
display:flex;align-items:center;gap:14px;
margin-bottom:36px;flex-wrap:wrap;
}
body[data-page="btv"] .ep-search-wrap{position:relative;flex:1;max-width:320px}
body[data-page="btv"] .ep-search-icon{
position:absolute;left:13px;top:50%;transform:translateY(-50%);
color:var(--fg-3);pointer-events:none;
}
body[data-page="btv"] .ep-search-icon svg{width:15px;height:15px}
body[data-page="btv"] .ep-search{
width:100%;background:var(--bg-3);
border:1px solid var(--border);border-radius:24px;
padding:9px 16px 9px 38px;
color:var(--fg);font-size:.84rem;outline:none;
transition:border-color .2s,box-shadow .2s;
}
body[data-page="btv"] .ep-search::placeholder{color:var(--fg-3)}
body[data-page="btv"] .ep-search:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,230,118,.12)}
body[data-page="btv"] .ep-search-clear{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--fg-3);cursor:pointer;
display:none;padding:2px;
}
body[data-page="btv"] .ep-search-clear svg{width:13px;height:13px;display:block}
body[data-page="btv"] .ep-search-clear.show{display:block}
body[data-page="btv"] .ep-sort{
background:var(--bg-3);border:1px solid var(--border);
border-radius:20px;padding:8px 14px;
color:var(--fg-2);font-size:.78rem;outline:none;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;
padding-right:28px;cursor:pointer;transition:border-color .2s;
}
body[data-page="btv"] .ep-sort:focus{border-color:var(--green)}
body[data-page="btv"] .ep-count{
font-family:'DM Mono',monospace;font-size:.74rem;
color:var(--fg-3);margin-left:auto;white-space:nowrap;
}
body[data-page="btv"] .ep-count span{color:var(--fg);font-weight:500}
/* view toggle */
body[data-page="btv"] .view-btns{display:flex;gap:4px}
body[data-page="btv"] .vbtn{
background:none;border:1px solid var(--border);
border-radius:8px;padding:7px 10px;
color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="btv"] .vbtn svg{width:14px;height:14px;display:block}
body[data-page="btv"] .vbtn:hover{color:var(--fg);border-color:var(--border-b)}
body[data-page="btv"] .vbtn.active{background:var(--green);border-color:var(--green);color:#000}
/* Episodes grid */
body[data-page="btv"] .ep-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
body[data-page="btv"] .ep-grid.list-mode{
grid-template-columns:1fr;gap:0;
}
/* Episode card */
body[data-page="btv"] .ep-card{
background:var(--card);
border:1px solid var(--border);
border-radius:16px;overflow:hidden;
cursor:pointer;
transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
display:flex;flex-direction:column;
}
body[data-page="btv"] .ep-card:hover{
transform:translateY(-5px);
border-color:var(--border-b);
box-shadow:0 16px 50px var(--shadow),0 0 30px var(--glow);
}
body[data-page="btv"] .ep-card:hover .ep-play-overlay{opacity:1}
/* Thumbnail */
body[data-page="btv"] .ep-thumb{
position:relative;aspect-ratio:16/9;
background:linear-gradient(135deg,#0A0C14,#141820);
display:flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
}
/* Thumbnail gradient by show type */
body[data-page="btv"] .ep-card[data-show="show"] .ep-thumb{background:linear-gradient(135deg,#050810,#0A1020)}
body[data-page="btv"] .ep-card[data-show="documentary"] .ep-thumb{background:linear-gradient(135deg,#081008,#101A10)}
body[data-page="btv"] .ep-card[data-show="music"] .ep-thumb{background:linear-gradient(135deg,#100814,#1A0820)}
body[data-page="btv"] .ep-card[data-show="sports"] .ep-thumb{background:linear-gradient(135deg,#100800,#1A0E00)}
body[data-page="btv"] .ep-card[data-show="news"] .ep-thumb{background:linear-gradient(135deg,#080810,#10101A)}
body[data-page="btv"] .ep-card[data-show="special"] .ep-thumb{background:linear-gradient(135deg,#0D0800,#1A1000)}
body[data-page="btv"] .ep-thumb-emoji{
/* Sized to fit comfortably within both the 16:9 thumb AND the
green play-circle hover overlay (52px). Was 2.8rem before,
which was wider than the play circle and looked like an emoji
bursting out of its container. */
font-size: 2rem;
line-height: 1;
position: relative;
z-index: 1;
}
body[data-page="btv"] .ep-thumb-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%);
}
body[data-page="btv"] .ep-runtime-badge{
position:absolute;bottom:8px;right:8px;
background:rgba(0,0,0,.75);
font-family:'DM Mono',monospace;
font-size:.62rem;color:white;font-weight:500;
padding:2px 7px;border-radius:5px;letter-spacing:.03em;
backdrop-filter:blur(4px);
}
body[data-page="btv"] .ep-play-overlay{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s;
}
body[data-page="btv"] .ep-play-circle{
width:52px;height:52px;border-radius:50%;
background:rgba(0,230,118,.9);
display:flex;align-items:center;justify-content:center;
transform:scale(.8);transition:transform .25s var(--spring);
}
body[data-page="btv"] .ep-card:hover .ep-play-circle{transform:scale(1)}
body[data-page="btv"] .ep-play-circle svg{width:22px;height:22px;fill:#000;margin-left:3px}
/* show badge */
body[data-page="btv"] .ep-show-badge{
position:absolute;top:8px;left:8px;
font-family:'DM Mono',monospace;
font-size:.58rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px);
}
body[data-page="btv"] .ep-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
body[data-page="btv"] .ep-show-name{
font-size:.65rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
color:var(--ep-color,var(--green));margin-bottom:6px;
}
body[data-page="btv"] .ep-title{
font-family:'Bebas Neue',sans-serif;
font-size:1.25rem;letter-spacing:.03em;
color:var(--fg);line-height:1.1;margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="btv"] .ep-desc{
font-size:.78rem;color:var(--fg-2);
line-height:1.6;flex:1;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin-bottom:12px;
}
body[data-page="btv"] .ep-meta{
display:flex;align-items:center;gap:8px;
font-family:'DM Mono',monospace;font-size:.65rem;color:var(--fg-3);
border-top:1px solid var(--border);padding-top:10px;margin-top:auto;flex-wrap:wrap;
}
body[data-page="btv"] .ep-views{color:var(--fg-2)}
body[data-page="btv"] .ep-season-ep{color:var(--fg-3)}
body[data-page="btv"] .ep-new-badge{
margin-left:auto;background:rgba(0,230,118,.12);
border:1px solid rgba(0,230,118,.25);
border-radius:8px;padding:2px 7px;
font-size:.58rem;color:var(--green);letter-spacing:.06em;text-transform:uppercase;
}
/* list mode */
body[data-page="btv"] .ep-grid.list-mode .ep-card{
flex-direction:row;border-radius:0;
border:none;border-bottom:1px solid var(--border);
transform:none!important;box-shadow:none!important;
padding:16px 4px;gap:16px;align-items:center;
}
body[data-page="btv"] .ep-grid.list-mode .ep-thumb{
width:120px;height:68px;aspect-ratio:unset;
border-radius:10px;flex-shrink:0;
}
/* List-mode override: the thumb is only 120x68, so the emoji needs
to shrink further to sit nicely inside. */
body[data-page="btv"] .ep-grid.list-mode .ep-thumb-emoji{
font-size: 1.4rem;
}
body[data-page="btv"] .ep-grid.list-mode .ep-body{padding:0}
body[data-page="btv"] .ep-grid.list-mode .ep-desc{display:none}
body[data-page="btv"] .ep-grid.list-mode .ep-title{font-size:1.05rem;-webkit-line-clamp:1}
body[data-page="btv"] .ep-grid.list-mode .ep-meta{border-top:none;padding-top:0;margin-top:6px}
/* No results */
body[data-page="btv"] .ep-no-results{
grid-column:1/-1;text-align:center;
padding:80px 0;display:none;
}
body[data-page="btv"] .ep-no-results.show{display:block}
body[data-page="btv"] .nr-icon{font-size:3rem;margin-bottom:14px;opacity:.3}
body[data-page="btv"] .nr-title{
font-family:'Bebas Neue',sans-serif;
font-size:2rem;color:var(--fg-2);margin-bottom:6px;letter-spacing:.04em;
}
body[data-page="btv"] .nr-sub{font-size:.85rem;color:var(--fg-3)}
/* Load more */
body[data-page="btv"] .load-wrap{text-align:center;margin-top:48px}
body[data-page="btv"] .load-btn{
background:none;border:1px solid var(--border-b);
border-radius:50px;padding:13px 40px;
font-size:.88rem;font-weight:500;color:var(--fg-2);
cursor:pointer;transition:all .25s var(--spring);
display:inline-flex;align-items:center;gap:8px;
}
body[data-page="btv"] .load-btn:hover{
border-color:var(--green);color:var(--green);
transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);
}
body[data-page="btv"] .load-btn.hidden{display:none}
/* ══════════════════════════════════════════════════
ABOUT / STUDIO SECTION
══════════════════════════════════════════════════ */
body[data-page="btv"] .studio-section{
padding:100px 0;
background:var(--bg-2);
position:relative;overflow:hidden;
}
body[data-page="btv"] .studio-section::before{
content:'';position:absolute;
top:-80px;right:-80px;
width:400px;height:400px;
background:radial-gradient(circle,rgba(0,230,118,.07),transparent 70%);
border-radius:50%;pointer-events:none;
}
body[data-page="btv"] .studio-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
body[data-page="btv"] .studio-label{
font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--green);margin-bottom:12px;
display:flex;align-items:center;gap:8px;
}
body[data-page="btv"] .studio-label::before{content:'';display:block;width:20px;height:1px;background:var(--green)}
body[data-page="btv"] .studio-title{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(2.5rem,5vw,4.5rem);
letter-spacing:.04em;line-height:.95;
color:var(--fg);margin-bottom:16px;
}
body[data-page="btv"] .studio-title em{color:var(--green);font-style:normal}
body[data-page="btv"] .studio-body{
font-size:.92rem;color:var(--fg-2);
line-height:1.8;margin-bottom:14px;font-weight:300;
}
body[data-page="btv"] .studio-facts{display:flex;flex-direction:column;gap:0}
body[data-page="btv"] .studio-fact{
display:flex;align-items:flex-start;gap:16px;
padding:16px 0;border-top:1px solid var(--border);
}
body[data-page="btv"] .sf-icon{
width:36px;height:36px;border-radius:10px;
background:rgba(0,230,118,.1);
display:flex;align-items:center;justify-content:center;
font-size:1.1rem;flex-shrink:0;
}
body[data-page="btv"] .sf-text{font-size:.82rem;color:var(--fg-2);line-height:1.6}
body[data-page="btv"] .sf-text strong{display:block;color:var(--fg);font-weight:600;margin-bottom:2px}
/* Studio diagram — camera setup visual */
body[data-page="btv"] .studio-visual{
display:flex;flex-direction:column;gap:16px;
}
body[data-page="btv"] .camera-card{
background:var(--card);
border:1px solid var(--border-b);
border-radius:16px;padding:24px;
display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
}
body[data-page="btv"] .cam-icon{
width:48px;height:48px;border-radius:12px;
background:var(--bg-3);
display:flex;align-items:center;justify-content:center;
font-size:1.5rem;border:1px solid var(--border);
flex-shrink:0;
}
body[data-page="btv"] .cam-name{
font-family:'Bebas Neue',sans-serif;
font-size:1.1rem;letter-spacing:.04em;color:var(--fg);
}
body[data-page="btv"] .cam-spec{font-size:.75rem;color:var(--fg-3);margin-top:2px}
body[data-page="btv"] .cam-status{
display:inline-flex;align-items:center;gap:4px;
font-family:'DM Mono',monospace;font-size:.62rem;
padding:2px 8px;border-radius:8px;margin-top:6px;
}
body[data-page="btv"] .cam-status.online{
background:rgba(0,230,118,.1);color:var(--green);
border:1px solid rgba(0,230,118,.2);
}
body[data-page="btv"] .cam-status.standby{
background:rgba(255,179,0,.1);color:var(--amber);
border:1px solid rgba(255,179,0,.2);
}
body[data-page="btv"] .cam-status::before{
content:'';width:4px;height:4px;border-radius:50%;background:currentColor;
animation:recDot 2s ease-in-out infinite;
}
/* ══════════════════════════════════════════════════
VIDEO MODAL
══════════════════════════════════════════════════ */
body[data-page="btv"] .modal-overlay{
position:fixed;inset:0;z-index:2000;
background:rgba(0,0,0,.92);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
display:flex;align-items:center;justify-content:center;
padding:20px;
opacity:0;pointer-events:none;
transition:opacity .3s var(--ease);
}
body[data-page="btv"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="btv"] .modal{
background:var(--card);
border:1px solid var(--border-b);
border-radius:20px;overflow:hidden;
width:100%;max-width:860px;
transform:scale(.95);
transition:transform .35s var(--spring);
box-shadow:0 60px 160px rgba(0,0,0,.9);
}
body[data-page="btv"] .modal-overlay.open .modal{transform:scale(1)}
body[data-page="btv"] .modal-vid{
position:relative;width:100%;aspect-ratio:16/9;background:#000;
}
body[data-page="btv"] .modal-vid iframe{
position:absolute;inset:0;width:100%;height:100%;border:none;
}
body[data-page="btv"] .modal-info{padding:24px 28px}
body[data-page="btv"] .modal-close{
position:absolute;top:12px;right:12px;z-index:10;
width:36px;height:36px;border-radius:50%;
background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);
color:white;display:flex;align-items:center;justify-content:center;
cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;
}
body[data-page="btv"] .modal-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.15)}
body[data-page="btv"] .modal-close svg{width:14px;height:14px}
body[data-page="btv"] .modal-show{
font-size:.65rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--green);margin-bottom:8px;
}
body[data-page="btv"] .modal-title{
font-family:'Bebas Neue',sans-serif;
font-size:1.8rem;letter-spacing:.04em;
color:var(--fg);margin-bottom:6px;
}
body[data-page="btv"] .modal-desc{font-size:.85rem;color:var(--fg-2);line-height:1.7;margin-bottom:16px}
body[data-page="btv"] .modal-meta-row{
display:flex;align-items:center;gap:14px;
font-family:'DM Mono',monospace;font-size:.68rem;color:var(--fg-3);
flex-wrap:wrap;
}
body[data-page="btv"] .modal-meta-row .mmr-label{color:var(--fg-2);font-weight:500}
/* ══════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════ */
body[data-page="btv"] footer{background:var(--near-black);padding:40px 0}
body[data-page="btv"] .f-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="btv"] .f-brand{
font-family:'Bebas Neue',sans-serif;
font-size:1.4rem;letter-spacing:.06em;color:white;
}
body[data-page="btv"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="btv"] .f-home{
color:rgba(255,255,255,.3);text-decoration:none;
font-size:.78rem;font-weight:500;transition:color .2s;
}
body[data-page="btv"] .f-home:hover{color:white}
/* ══════════════════════════════════════════════════
REVEAL
══════════════════════════════════════════════════ */
body[data-page="btv"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="btv"] .reveal.visible{opacity:1;transform:none}
body[data-page="btv"] .rd1{transition-delay:.06s}body[data-page="btv"] .rd2{transition-delay:.12s}body[data-page="btv"] .rd3{transition-delay:.18s}
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
/* (cursor system styles live in the global section near the top of this file) */
/* ── CAPABILITY CARDS (replace camera cards) ─────────────────── */
body[data-page="btv"] .capability-card{
background: var(--card);
border: 1px solid var(--border-b);
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 12px;
transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
body[data-page="btv"] .capability-card:hover{
transform: translateY(-3px);
border-color: rgba(0,230,118,.25);
box-shadow: 0 12px 40px var(--shadow), 0 0 20px var(--glow);
}
body[data-page="btv"] .cap-icon-row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
body[data-page="btv"] .cap-icon{ font-size: 1.6rem; }
body[data-page="btv"] .cap-status{
font-family: 'DM Mono', monospace;
font-size: .6rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 8px;
}
body[data-page="btv"] .cap-active{
background: rgba(0,230,118,.12);
border: 1px solid rgba(0,230,118,.25);
color: var(--green);
}
body[data-page="btv"] .cap-live{
background: rgba(255,23,68,.12);
border: 1px solid rgba(255,23,68,.25);
color: var(--red-rec);
animation: recPulse 2s ease-in-out infinite;
}
body[data-page="btv"] .cap-name{
font-family: 'Bebas Neue', sans-serif;
font-size: 1.15rem;
letter-spacing: .04em;
color: var(--fg);
margin-bottom: 8px;
}
body[data-page="btv"] .cap-desc{
font-size: .78rem;
color: var(--fg-2);
line-height: 1.65;
font-weight: 300;
margin-bottom: 14px;
}
body[data-page="btv"] .cap-tags{
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body[data-page="btv"] .cap-tag{
font-family: 'DM Mono', monospace;
font-size: .58rem;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 6px;
background: rgba(0,230,118,.08);
color: var(--green);
border: 1px solid rgba(0,230,118,.15);
}
body[data-page="btv"] .cap-stat-card{
background: rgba(0,0,0,.3);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
text-align: center;
}
html[data-theme="light"] body[data-page="btv"] .cap-stat-card{ background: var(--bg-3); }
body[data-page="btv"] .cap-stat-num{
font-family: 'Bebas Neue', sans-serif;
font-size: 2.2rem;
letter-spacing: .04em;
color: white;
line-height: 1;
margin-bottom: 4px;
}
html[data-theme="light"] body[data-page="btv"] .cap-stat-num{ color: var(--fg); }
body[data-page="btv"] .cap-stat-lbl{
font-size: .62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.3);
}
html[data-theme="light"] body[data-page="btv"] .cap-stat-lbl{ color: var(--fg-3); }
@media(max-width:960px){
body[data-page="btv"] .hero-inner{grid-template-columns:1fr;gap:40px;padding:50px 24px 60px}
body[data-page="btv"] .studio-inner{grid-template-columns:1fr;gap:48px}
body[data-page="btv"] .ep-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
body[data-page="btv"] nav{padding:0 16px}
body[data-page="btv"] .ep-inner{padding:0 16px}
body[data-page="btv"] .ep-grid{grid-template-columns:1fr}
body[data-page="btv"] .ep-controls{gap:8px}
body[data-page="btv"] .ep-count{display:none}
body[data-page="btv"] .f-inner{flex-direction:column;align-items:flex-start}
body[data-page="btv"] .hero-stats{flex-wrap:wrap;gap:20px}
}
/* (cursor system styles live in the global section near the top of this file) */
/* ═══════════════════════════════════════════════════
PAGE: RADIO (radio.html)
═══════════════════════════════════════════════════ */
/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; font-size: 16px; }
body[data-page="radio"]{
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--fg);
overflow-x: hidden;
transition: background 0.5s ease, color 0.5s ease;
min-height: 100vh;
}
/* ─── THEME VARIABLES ──────────────────────────────────────── */
body[data-page="radio"]{
--red: #D0021B;
--red-bright: #FF1F3D;
--red-muted: #8B0010;
--gold: #C9A84C;
--gold-light: #F0C97A;
--near-black: #0A0A0B;
--easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-theme="dark"] body[data-page="radio"]{
--bg: #0A0A0B;
--bg-2: #111114;
--bg-3: #1A1A1E;
--fg: #F0EDE8;
--fg-2: #A8A4A0;
--fg-3: #5A5754;
--border: rgba(255,255,255,0.08);
--border-bright: rgba(255,255,255,0.15);
--shadow: rgba(0,0,0,0.6);
--glow-red: rgba(208,2,27,0.3);
--card-bg: rgba(22,22,28,0.95);
--nav-bg: rgba(10,10,11,0.92);
--studio-bg: #0E0E12;
}
html[data-theme="light"] body[data-page="radio"]{
--bg: #F7F5F2;
--bg-2: #EDEBE7;
--bg-3: #E2DFD9;
--fg: #0A0A0B;
--fg-2: #444240;
--fg-3: #888580;
--border: rgba(0,0,0,0.08);
--border-bright: rgba(0,0,0,0.15);
--shadow: rgba(0,0,0,0.12);
--glow-red: rgba(208,2,27,0.15);
--card-bg: rgba(255,253,250,0.98);
--nav-bg: rgba(247,245,242,0.92);
--studio-bg: #1A1A1E;
}
/* ─── RAINBOW BAR ──────────────────────────────────────────── */
body[data-page="radio"] .rainbow-bar{
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
#FF3B3B 0%, #FF6B35 12%, #FFD700 25%,
#51CF66 37%, #339AF0 50%, #845EF7 62%,
#FF3B3B 75%, #FF6B35 87%, #FFD700 100%);
background-size: 200% 100%;
animation: rainbowShift 6s linear infinite;
z-index: 1000;
}
@keyframes rainbowShift {
0% { background-position: 0%; }
100% { background-position: 200%; }
}
/* ─── NAV ──────────────────────────────────────────────────── */
body[data-page="radio"] nav{
position: fixed;
top: 3px; left: 0; right: 0;
height: 62px;
background: var(--nav-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
transition: background 0.5s ease;
}
body[data-page="radio"] .nav-logo{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 1.2rem;
color: var(--fg);
letter-spacing: -0.02em;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
body[data-page="radio"] .nav-logo span{ color: var(--red-bright); }
body[data-page="radio"] .nav-back{
display: flex;
align-items: center;
gap: 8px;
color: var(--fg-2);
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid var(--border);
transition: all 0.2s;
}
body[data-page="radio"] .nav-back:hover{ color: var(--fg); background: var(--border); }
body[data-page="radio"] .nav-right{ display: flex; align-items: center; gap: 12px; }
body[data-page="radio"] .theme-toggle{
background: var(--border);
border: 1px solid var(--border-bright);
border-radius: 20px;
padding: 6px 14px;
cursor: pointer;
color: var(--fg-2);
font-size: 0.78rem;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
transition: all 0.2s;
}
body[data-page="radio"] .theme-toggle:hover{ color: var(--fg); background: var(--border-bright); }
/* ─── HERO / MAIN PLAYER AREA ──────────────────────────────── */
body[data-page="radio"] .radio-hero{
min-height: 100vh;
padding-top: 65px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Cinematic background */
body[data-page="radio"] .radio-hero-bg{
position: absolute;
inset: 0;
pointer-events: none;
}
body[data-page="radio"] .rh-orb{
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
}
body[data-page="radio"] .rh-orb-1{
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(208,2,27,0.18), transparent 70%);
top: -15%; left: -15%;
animation: rh-drift 20s ease-in-out infinite;
}
body[data-page="radio"] .rh-orb-2{
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(201,168,76,0.1), transparent 70%);
bottom: 10%; right: 5%;
animation: rh-drift 16s ease-in-out infinite reverse;
}
body[data-page="radio"] .rh-orb-3{
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(51,154,240,0.06), transparent 70%);
top: 50%; left: 40%;
animation: rh-drift 24s ease-in-out infinite;
}
@keyframes rh-drift {
0%, 100% { transform: translate(0,0); }
50% { transform: translate(40px,-30px); }
}
/* Scanline texture */
body[data-page="radio"] .radio-hero-bg::after{
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,255,255,0.01) 2px,
rgba(255,255,255,0.01) 4px
);
pointer-events: none;
}
body[data-page="radio"] .radio-hero-content{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
max-width: 1100px;
width: 100%;
padding: 0 40px;
z-index: 2;
animation: heroIn 1s var(--easing) both;
}
@keyframes heroIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── BIG PLAYER ───────────────────────────────────────────── */
body[data-page="radio"] .big-player{
/* Player-local tokens so the whole widget tracks the active theme.
Defaults below are the light-mode values; the dark override block
restores the original "hardware device" palette. */
--bp-surface: var(--bg);
--bp-text: var(--fg);
--bp-text-dim: var(--fg-2);
--bp-text-faint: var(--fg-3);
--bp-hairline: var(--border);
--bp-chip: rgba(0,0,0,0.04);
--bp-chip-hover: rgba(0,0,0,0.08);
--bp-vu-bg: rgba(0,0,0,0.04);
--bp-thumb: var(--fg);
--bp-art-from: #F0EDE8;
--bp-art-via: #E2DFD9;
background: var(--bp-surface);
border: 1px solid var(--border-bright);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 40px 120px var(--shadow), 0 0 0 1px var(--border);
transition: box-shadow 0.4s;
}
html[data-theme="dark"] body[data-page="radio"] .big-player{
--bp-surface: var(--studio-bg);
--bp-text: #ffffff;
--bp-text-dim: rgba(255,255,255,0.4);
--bp-text-faint: rgba(255,255,255,0.3);
--bp-hairline: var(--border);
--bp-chip: rgba(255,255,255,0.06);
--bp-chip-hover: rgba(255,255,255,0.12);
--bp-vu-bg: rgba(0,0,0,0.3);
--bp-thumb: #ffffff;
--bp-art-from: #1A0A0E;
--bp-art-via: #2A1015;
box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px var(--border);
}
body[data-page="radio"] .big-player.playing{
box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 80px var(--glow-red);
}
/* Studio glass header */
body[data-page="radio"] .bp-header{
padding: 24px 28px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
body[data-page="radio"] .bp-dots{ display: flex; gap: 7px; }
body[data-page="radio"] .bp-dot{
width: 11px; height: 11px;
border-radius: 50%;
}
body[data-page="radio"] .bp-dot-r{ background: #FF5F57; }
body[data-page="radio"] .bp-dot-y{ background: #FFBD2E; }
body[data-page="radio"] .bp-dot-g{ background: #28CA41; }
body[data-page="radio"] .bp-header-title{
font-family: 'DM Mono', monospace;
font-size: 0.68rem;
color: var(--bp-text-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* VU Meter */
body[data-page="radio"] .vu-meter{
display: flex;
align-items: flex-end;
gap: 2px;
height: 32px;
padding: 8px 28px;
border-bottom: 1px solid var(--border);
background: var(--bp-vu-bg);
}
body[data-page="radio"] .vu-bar{
width: 5px;
background: var(--red);
border-radius: 2px 2px 0 0;
transition: height 0.1s ease;
min-height: 2px;
}
/* Album art area */
body[data-page="radio"] .bp-art{
width: 100%;
aspect-ratio: 1;
max-height: 200px;
background: linear-gradient(135deg, var(--bp-art-from) 0%, var(--bp-art-via) 50%, var(--bp-art-from) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
body[data-page="radio"] .bp-art-disc{
width: 120px; height: 120px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
#1a1a1a 0deg, #2a2a2a 30deg, #1a1a1a 60deg, #333 90deg,
#1a1a1a 120deg, #2a2a2a 150deg, #1a1a1a 180deg, #333 210deg,
#1a1a1a 240deg, #2a2a2a 270deg, #1a1a1a 300deg, #333 330deg, #1a1a1a 360deg
);
box-shadow: 0 0 0 3px rgba(208,2,27,0.4), 0 0 40px rgba(208,2,27,0.2);
display: flex;
align-items: center;
justify-content: center;
animation: disc-spin 4s linear infinite paused;
}
body[data-page="radio"] .big-player.playing .bp-art-disc{
animation-play-state: running;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }
body[data-page="radio"] .bp-art-disc-center{
width: 36px; height: 36px;
background: var(--studio-bg);
border-radius: 50%;
border: 2px solid rgba(208,2,27,0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
color: var(--red-bright);
font-family: 'DM Mono', monospace;
font-weight: 500;
letter-spacing: 0.05em;
z-index: 1;
}
body[data-page="radio"] .bp-art-glow{
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(208,2,27,0.15), transparent 70%);
animation: art-pulse 3s ease-in-out infinite;
opacity: 0;
transition: opacity 0.5s;
}
body[data-page="radio"] .big-player.playing .bp-art-glow{ opacity: 1; }
@keyframes art-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Station info */
body[data-page="radio"] .bp-info{
padding: 24px 28px 20px;
}
body[data-page="radio"] .bp-live{
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(208,2,27,0.15);
border: 1px solid rgba(208,2,27,0.3);
border-radius: 10px;
padding: 3px 10px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-bright);
margin-bottom: 10px;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Connection state variants — set by JS via data-state attribute. */
body[data-page="radio"] .bp-live[data-state="connecting"],
body[data-page="radio"] .bp-live[data-state="buffering"]{
background: rgba(255,215,0,0.15);
border-color: rgba(255,215,0,0.4);
color: #FFD700;
}
body[data-page="radio"] .bp-live[data-state="connecting"] .bp-live-dot,
body[data-page="radio"] .bp-live[data-state="buffering"] .bp-live-dot{
background: #FFD700;
animation: pdot-amber 0.8s ease-in-out infinite;
}
body[data-page="radio"] .bp-live[data-state="error"]{
background: rgba(120,120,120,0.15);
border-color: rgba(120,120,120,0.4);
color: #A8A4A0;
}
body[data-page="radio"] .bp-live[data-state="error"] .bp-live-dot{
background: #A8A4A0;
animation: none;
opacity: 0.6;
}
@keyframes pdot-amber {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.6); }
50% { box-shadow: 0 0 0 4px rgba(255,215,0,0); }
}
body[data-page="radio"] .bp-live-dot{
width: 5px; height: 5px;
background: var(--red-bright);
border-radius: 50%;
animation: pdot 1.5s ease-in-out infinite;
}
@keyframes pdot {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,31,61,0.6); }
50% { box-shadow: 0 0 0 4px rgba(255,31,61,0); }
}
body[data-page="radio"] .bp-station{
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 900;
color: var(--bp-text);
letter-spacing: -0.03em;
margin-bottom: 4px;
}
body[data-page="radio"] .bp-now{
font-size: 0.8rem;
color: var(--bp-text-dim);
font-family: 'DM Mono', monospace;
letter-spacing: 0.04em;
}
/* Controls */
body[data-page="radio"] .bp-controls{
padding: 20px 28px 28px;
display: flex;
flex-direction: column;
gap: 20px;
}
body[data-page="radio"] .bp-main-controls{
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
body[data-page="radio"] .bp-play-btn{
width: 72px; height: 72px;
background: var(--red);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s var(--easing-spring);
box-shadow: 0 4px 24px rgba(208,2,27,0.5);
position: relative;
}
body[data-page="radio"] .bp-play-btn:hover{
background: var(--red-bright);
transform: scale(1.1);
box-shadow: 0 8px 40px rgba(208,2,27,0.7);
}
body[data-page="radio"] .bp-play-btn:active{ transform: scale(0.95); }
body[data-page="radio"] .bp-play-btn svg{ width: 28px; height: 28px; fill: white; }
body[data-page="radio"] .bp-play-btn .bpp-pause{ display: none; }
body[data-page="radio"] .bp-play-btn.playing .bpp-play{ display: none; }
body[data-page="radio"] .bp-play-btn.playing .bpp-pause{ display: block; }
body[data-page="radio"] .bp-play-btn::after{
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--red);
opacity: 0;
}
body[data-page="radio"] .bp-play-btn.playing::after{
animation: bp-ripple 2s ease-out infinite;
}
@keyframes bp-ripple {
0% { inset: -6px; opacity: 0.5; }
100% { inset: -24px; opacity: 0; }
}
body[data-page="radio"] .bp-side-btn{
width: 44px; height: 44px;
background: var(--bp-chip);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--bp-text-dim);
transition: all 0.2s;
}
body[data-page="radio"] .bp-side-btn:hover{
background: var(--bp-chip-hover);
color: var(--bp-text);
}
body[data-page="radio"] .bp-side-btn svg{ width: 18px; height: 18px; }
/* Volume */
body[data-page="radio"] .bp-volume{
display: flex;
align-items: center;
gap: 12px;
}
body[data-page="radio"] .vol-icon{ color: var(--bp-text-faint); flex-shrink: 0; }
body[data-page="radio"] .vol-icon svg{ width: 16px; height: 16px; }
body[data-page="radio"] .vol-slider{
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 3px;
background: var(--bp-chip-hover);
border-radius: 3px;
outline: none;
cursor: pointer;
}
body[data-page="radio"] .vol-slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bp-thumb);
box-shadow: 0 0 6px var(--shadow);
cursor: pointer;
transition: transform 0.15s;
}
body[data-page="radio"] .vol-slider::-webkit-slider-thumb:hover{ transform: scale(1.3); }
body[data-page="radio"] .vol-pct{
font-family: 'DM Mono', monospace;
font-size: 0.68rem;
color: var(--bp-text-faint);
width: 32px;
text-align: right;
}
/* ─── HERO RIGHT COLUMN ──────────────────────────────────────── */
body[data-page="radio"] .hero-right{
display: flex;
flex-direction: column;
gap: 28px;
}
body[data-page="radio"] .hero-right-header{
animation: heroIn 1s var(--easing) 0.2s both;
}
body[data-page="radio"] .hr-eyebrow{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 14px;
}
body[data-page="radio"] .hr-eyebrow::before{
content: '';
display: block;
width: 20px; height: 1px;
background: var(--red);
}
body[data-page="radio"] .hr-title{
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 4vw, 3.6rem);
font-weight: 900;
color: var(--fg);
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: 12px;
}
body[data-page="radio"] .hr-title em{ color: var(--red-bright); font-style: italic; }
body[data-page="radio"] .hr-sub{
font-size: 0.95rem;
color: var(--fg-2);
line-height: 1.7;
font-weight: 300;
max-width: 380px;
}
/* Stats row */
body[data-page="radio"] .stats-row{
display: flex;
gap: 32px;
padding: 24px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
animation: heroIn 1s var(--easing) 0.3s both;
}
body[data-page="radio"] .stat-val{
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
color: var(--fg);
letter-spacing: -0.04em;
line-height: 1;
}
body[data-page="radio"] .stat-val em{ color: var(--red-bright); font-style: normal; }
body[data-page="radio"] .stat-lbl{
font-size: 0.72rem;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 4px;
}
/* Signal strength widget */
body[data-page="radio"] .signal-widget{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 24px;
animation: heroIn 1s var(--easing) 0.4s both;
}
body[data-page="radio"] .sw-title{
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
body[data-page="radio"] .sw-online{
color: #51CF66;
display: flex;
align-items: center;
gap: 4px;
}
body[data-page="radio"] .sw-online::before{
content: '';
display: block;
width: 5px; height: 5px;
background: #51CF66;
border-radius: 50%;
animation: pdot 2s ease-in-out infinite;
}
body[data-page="radio"] .signal-bars{
display: flex;
align-items: flex-end;
gap: 4px;
height: 36px;
margin-bottom: 10px;
}
body[data-page="radio"] .sig-bar{
flex: 1;
border-radius: 3px 3px 0 0;
background: var(--border-bright);
transition: all 0.3s;
}
body[data-page="radio"] .sig-bar.active{ background: var(--red); }
body[data-page="radio"] .sig-bar:nth-child(1){ height: 20%; }
body[data-page="radio"] .sig-bar:nth-child(2){ height: 35%; }
body[data-page="radio"] .sig-bar:nth-child(3){ height: 50%; }
body[data-page="radio"] .sig-bar:nth-child(4){ height: 65%; }
body[data-page="radio"] .sig-bar:nth-child(5){ height: 80%; }
body[data-page="radio"] .sig-bar:nth-child(6){ height: 95%; }
body[data-page="radio"] .sig-bar:nth-child(7){ height: 100%; }
body[data-page="radio"] .sw-freq{
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: var(--fg-3);
}
body[data-page="radio"] .sw-freq span{ color: var(--fg); font-weight: 500; }
/* ─── FULL SPECTRUM VISUALIZER ──────────────────────────────── */
body[data-page="radio"] .spectrum-section{
background: var(--bg-2);
padding: 60px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
body[data-page="radio"] .spectrum-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="radio"] .spectrum-label{
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
body[data-page="radio"] .spectrum-canvas-wrap{
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 20px 8px;
overflow: hidden;
}
html[data-theme="dark"] body[data-page="radio"] .spectrum-canvas-wrap{ background: var(--studio-bg); }
body[data-page="radio"] .spectrum-bars{
display: flex;
align-items: flex-end;
gap: 2px;
height: 80px;
}
body[data-page="radio"] .spec-bar{
flex: 1;
background: linear-gradient(180deg, var(--red-bright), var(--red-muted));
border-radius: 2px 2px 0 0;
min-height: 2px;
transition: height 0.08s ease;
opacity: 0.8;
}
body[data-page="radio"] .spectrum-freq-labels{
display: flex;
justify-content: space-between;
padding: 8px 0 0;
font-family: 'DM Mono', monospace;
font-size: 0.58rem;
color: var(--fg-3);
}
/* ─── SCHEDULE TABLE ─────────────────────────────────────────── */
body[data-page="radio"] .schedule-section{
padding: 100px 0;
background: var(--bg);
}
body[data-page="radio"] .sched-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="radio"] .section-label{
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
body[data-page="radio"] .section-label::before{
content: '';
display: block;
width: 24px; height: 1px;
background: var(--red);
}
body[data-page="radio"] .section-title{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: clamp(2.4rem, 5vw, 3.8rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--fg);
margin-bottom: 12px;
}
body[data-page="radio"] .section-title em{ color: var(--red-bright); font-style: italic; }
body[data-page="radio"] .section-sub{
font-size: 1rem;
color: var(--fg-2);
line-height: 1.7;
max-width: 480px;
font-weight: 300;
margin-bottom: 48px;
}
/* Day tabs */
body[data-page="radio"] .day-tabs{
display: flex;
gap: 4px;
margin-bottom: 32px;
flex-wrap: wrap;
}
body[data-page="radio"] .day-tab{
background: none;
border: 1px solid var(--border);
border-radius: 20px;
padding: 7px 18px;
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 500;
color: var(--fg-2);
cursor: pointer;
transition: all 0.2s;
}
body[data-page="radio"] .day-tab:hover{ color: var(--fg); border-color: var(--border-bright); }
body[data-page="radio"] .day-tab.active{
background: var(--red);
border-color: var(--red);
color: white;
}
/* Schedule grid */
body[data-page="radio"] .schedule-grid{
display: flex;
flex-direction: column;
gap: 0;
}
body[data-page="radio"] .sched-row{
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 24px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--border);
transition: all 0.2s;
position: relative;
}
body[data-page="radio"] .sched-row::before{
content: '';
position: absolute;
left: -20px; top: 0; bottom: 0;
width: 3px;
background: var(--red);
border-radius: 0 3px 3px 0;
opacity: 0;
transition: opacity 0.2s;
}
body[data-page="radio"] .sched-row:hover::before{ opacity: 1; }
body[data-page="radio"] .sched-row:hover .sched-show{ color: var(--red-bright); }
body[data-page="radio"] .sched-row.current{
background: rgba(208,2,27,0.04);
padding: 20px 16px;
border-radius: 12px;
border-bottom-color: transparent;
margin-bottom: 2px;
}
body[data-page="radio"] .sched-row.current::before{ opacity: 1; }
body[data-page="radio"] .sched-time{
font-family: 'DM Mono', monospace;
font-size: 0.8rem;
color: var(--fg-3);
flex-shrink: 0;
}
body[data-page="radio"] .sched-row.current .sched-time{ color: var(--red); }
body[data-page="radio"] .sched-show{
font-size: 0.95rem;
font-weight: 600;
color: var(--fg);
margin-bottom: 3px;
transition: color 0.2s;
}
body[data-page="radio"] .sched-host{
font-size: 0.78rem;
color: var(--fg-3);
}
body[data-page="radio"] .sched-genre{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 10px;
flex-shrink: 0;
}
body[data-page="radio"] .genre-news{ background: rgba(51,154,240,0.1); color: #339AF0; }
body[data-page="radio"] .genre-music{ background: rgba(132,94,247,0.1); color: #845EF7; }
body[data-page="radio"] .genre-sports{ background: rgba(255,107,53,0.1); color: #FF6B35; }
body[data-page="radio"] .genre-talk{ background: rgba(81,207,102,0.1); color: #51CF66; }
body[data-page="radio"] .genre-live{ background: rgba(208,2,27,0.12); color: var(--red-bright); }
body[data-page="radio"] .on-air-badge{
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(208,2,27,0.15);
border: 1px solid rgba(208,2,27,0.3);
border-radius: 10px;
padding: 3px 10px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-bright);
margin-left: 10px;
vertical-align: middle;
}
body[data-page="radio"] .oab-dot{
width: 5px; height: 5px;
background: var(--red-bright);
border-radius: 50%;
animation: pdot 1.5s ease-in-out infinite;
}
/* ─── SHOWS SPOTLIGHT ──────────────────────────────────────── */
body[data-page="radio"] .shows-section{
padding: 100px 0;
background: var(--bg-2);
}
body[data-page="radio"] .shows-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="radio"] .shows-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
body[data-page="radio"] .show-card{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
transition: all 0.35s var(--easing);
cursor: default;
}
body[data-page="radio"] .show-card:hover{
transform: translateY(-6px);
border-color: var(--border-bright);
box-shadow: 0 20px 60px var(--shadow);
}
body[data-page="radio"] .show-card-header{
height: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
font-size: 2.5rem;
}
body[data-page="radio"] .show-card-header::before{
content: '';
position: absolute;
inset: 0;
background: var(--show-color, rgba(208,2,27,0.15));
}
body[data-page="radio"] .show-card-body{ padding: 20px; }
body[data-page="radio"] .show-name{
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 4px;
}
body[data-page="radio"] .show-time{
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
color: var(--red);
margin-bottom: 8px;
}
body[data-page="radio"] .show-desc{
font-size: 0.8rem;
color: var(--fg-2);
line-height: 1.6;
}
body[data-page="radio"] .show-host-line{
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
body[data-page="radio"] .show-host-avatar{
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
body[data-page="radio"] .show-host-name{
font-size: 0.75rem;
color: var(--fg-3);
font-weight: 500;
}
/* ─── RECENT TRACKS ──────────────────────────────────────────── */
body[data-page="radio"] .tracks-section{
padding: 100px 0;
background: var(--bg);
}
body[data-page="radio"] .tracks-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="radio"] .tracks-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
margin-top: 48px;
align-items: start;
}
body[data-page="radio"] .track-list{ display: flex; flex-direction: column; gap: 0; }
body[data-page="radio"] .track-item{
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
transition: all 0.2s;
}
body[data-page="radio"] .track-item:hover{ padding-left: 8px; }
body[data-page="radio"] .track-num{
font-family: 'DM Mono', monospace;
font-size: 0.68rem;
color: var(--fg-3);
width: 20px;
flex-shrink: 0;
text-align: center;
}
body[data-page="radio"] .track-item.current .track-num{
color: var(--red-bright);
}
body[data-page="radio"] .track-art{
width: 40px; height: 40px;
border-radius: 8px;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
body[data-page="radio"] .track-art-img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body[data-page="radio"] .track-item.current .track-art::after{
content: '';
position: absolute;
inset: -2px;
border-radius: 10px;
border: 1.5px solid var(--red);
animation: track-pulse 2s ease-in-out infinite;
}
@keyframes track-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
body[data-page="radio"] .track-info{ flex: 1; min-width: 0; }
body[data-page="radio"] .track-title{
font-size: 0.88rem;
font-weight: 600;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
body[data-page="radio"] .track-item.current .track-title{ color: var(--red-bright); }
body[data-page="radio"] .track-artist{
font-size: 0.75rem;
color: var(--fg-3);
}
body[data-page="radio"] .track-played{
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
color: var(--fg-3);
flex-shrink: 0;
}
/* Requests panel */
body[data-page="radio"] .requests-panel{
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px;
position: sticky;
top: 80px;
}
body[data-page="radio"] .rp-title{
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 6px;
}
body[data-page="radio"] .rp-sub{ font-size: 0.82rem; color: var(--fg-2); margin-bottom: 24px; line-height: 1.6; }
body[data-page="radio"] .rp-input{
width: 100%;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 16px;
color: var(--fg);
font-family: 'DM Sans', sans-serif;
font-size: 0.88rem;
outline: none;
transition: border-color 0.2s;
margin-bottom: 10px;
}
body[data-page="radio"] .rp-input::placeholder{ color: var(--fg-3); }
body[data-page="radio"] .rp-input:focus{ border-color: var(--red); }
body[data-page="radio"] .rp-submit{
width: 100%;
background: var(--red);
color: white;
border: none;
border-radius: 10px;
padding: 12px;
font-family: 'DM Sans', sans-serif;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
margin-top: 4px;
}
body[data-page="radio"] .rp-submit:hover{ background: var(--red-bright); transform: translateY(-1px); }
body[data-page="radio"] .rp-divider{
border: none;
border-top: 1px solid var(--border);
margin: 24px 0;
}
body[data-page="radio"] .rp-social-label{
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: 12px;
}
body[data-page="radio"] .rp-social{
display: flex;
gap: 8px;
}
body[data-page="radio"] .rp-social-btn{
flex: 1;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px;
text-align: center;
font-size: 0.75rem;
color: var(--fg-2);
text-decoration: none;
transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
font-weight: 500;
}
body[data-page="radio"] .rp-social-btn:hover{ color: var(--fg); border-color: var(--border-bright); }
/* ─── DJ BOOTH / ABOUT ───────────────────────────────────────── */
body[data-page="radio"] .about-section{
padding: 100px 0;
background: var(--bg-2);
position: relative;
overflow: hidden;
}
html[data-theme="dark"] body[data-page="radio"] .about-section{ background: var(--studio-bg); }
body[data-page="radio"] .about-section::before{
content: '';
position: absolute;
top: -100px; left: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(208,2,27,0.12), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
body[data-page="radio"] .about-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
body[data-page="radio"] .about-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
body[data-page="radio"] .about-visual{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Retro radio illustration */
body[data-page="radio"] .retro-radio{
width: 240px; height: 200px;
background: linear-gradient(145deg, #2a1215, #1a0a0e);
border-radius: 24px;
border: 2px solid rgba(208,2,27,0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(208,2,27,0.1);
position: relative;
}
html[data-theme="light"] body[data-page="radio"] .retro-radio{
background: linear-gradient(145deg, #FFFFFF, #ECE7E2);
border-color: rgba(208,2,27,0.25);
box-shadow: 0 20px 60px var(--shadow), 0 0 40px rgba(208,2,27,0.08);
}
body[data-page="radio"] .retro-screen{
width: 160px; height: 60px;
background: #0a1a0a;
border-radius: 8px;
border: 1px solid rgba(51,204,51,0.2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
body[data-page="radio"] .retro-screen::before{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,255,0,0.02) 50%, transparent 50%);
background-size: 100% 4px;
pointer-events: none;
}
body[data-page="radio"] .retro-freq-display{
font-family: 'DM Mono', monospace;
font-size: 1.4rem;
color: #33cc33;
text-shadow: 0 0 10px rgba(51,204,51,0.6);
letter-spacing: 0.05em;
}
body[data-page="radio"] .retro-controls{
display: flex;
gap: 10px;
align-items: center;
}
body[data-page="radio"] .retro-knob{
width: 28px; height: 28px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #555, #222);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
cursor: pointer;
transition: transform 0.3s;
position: relative;
}
body[data-page="radio"] .retro-knob::after{
content: '';
position: absolute;
top: 4px; left: 50%;
transform: translateX(-50%);
width: 2px; height: 8px;
background: rgba(255,255,255,0.4);
border-radius: 2px;
}
body[data-page="radio"] .retro-knob:hover{ transform: rotate(30deg); }
body[data-page="radio"] .retro-speaker{
display: flex;
gap: 4px;
}
body[data-page="radio"] .retro-speaker-hole{
width: 3px; height: 20px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
}
html[data-theme="light"] body[data-page="radio"] .retro-speaker-hole{
background: rgba(0,0,0,0.12);
}
body[data-page="radio"] .about-text-heading{
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 900;
color: var(--fg);
letter-spacing: -0.04em;
line-height: 1.1;
margin-bottom: 16px;
}
body[data-page="radio"] .about-text-heading em{ color: var(--red-bright); font-style: italic; }
body[data-page="radio"] .about-text-body{
font-size: 0.92rem;
color: var(--fg-2);
line-height: 1.8;
margin-bottom: 14px;
font-weight: 300;
}
body[data-page="radio"] .about-fact{
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--border);
}
body[data-page="radio"] .af-icon{
width: 32px; height: 32px;
border-radius: 10px;
background: rgba(208,2,27,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
margin-top: 2px;
}
body[data-page="radio"] .af-text{ font-size: 0.82rem; color: var(--fg-3); line-height: 1.6; }
body[data-page="radio"] .af-text strong{ display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
/* ─── FOOTER (compact) ───────────────────────────────────────── */
body[data-page="radio"] footer{
background: var(--near-black);
padding: 40px 0;
}
body[data-page="radio"] .footer-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
body[data-page="radio"] .footer-brand{
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 900;
color: white;
}
body[data-page="radio"] .footer-copy{ font-size: 0.78rem; color: rgba(255,255,255,0.25); }
body[data-page="radio"] .footer-home{
color: rgba(255,255,255,0.35);
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
transition: color 0.2s;
}
body[data-page="radio"] .footer-home:hover{ color: white; }
/* ─── REVEAL ─────────────────────────────────────────────────── */
body[data-page="radio"] .reveal{
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
body[data-page="radio"] .reveal.visible{ opacity: 1; transform: translateY(0); }
body[data-page="radio"] .reveal-d1{ transition-delay: 0.1s; }
body[data-page="radio"] .reveal-d2{ transition-delay: 0.2s; }
body[data-page="radio"] .reveal-d3{ transition-delay: 0.3s; }
/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
body[data-page="radio"] .radio-hero-content{ grid-template-columns: 1fr; gap: 40px; padding: 60px 24px 40px; }
body[data-page="radio"] .about-grid{ grid-template-columns: 1fr; gap: 48px; }
body[data-page="radio"] .shows-grid{ grid-template-columns: repeat(2, 1fr); }
body[data-page="radio"] .tracks-grid{ grid-template-columns: 1fr; }
body[data-page="radio"] .requests-panel{ position: static; }
}
@media (max-width: 600px) {
body[data-page="radio"] nav{ padding: 0 20px; }
body[data-page="radio"] .sched-inner, body[data-page="radio"] .shows-inner, body[data-page="radio"] .tracks-inner, body[data-page="radio"] .about-inner, body[data-page="radio"] .spectrum-inner{ padding: 0 20px; }
body[data-page="radio"] .schedule-section, body[data-page="radio"] .shows-section, body[data-page="radio"] .tracks-section, body[data-page="radio"] .about-section{ padding: 70px 0; }
body[data-page="radio"] .shows-grid{ grid-template-columns: 1fr; }
body[data-page="radio"] .footer-inner{ flex-direction: column; align-items: flex-start; }
body[data-page="radio"] .big-player{ max-width: 100%; }
}
/* (cursor system styles live in the global section near the top of this file) */
/* ═══════════════════════════════════════════════════
PAGE: MUSIC (music.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="music"]{
font-family:'DM Sans',sans-serif;
background:var(--bg);color:var(--fg);
overflow-x:hidden;
transition:background .45s,color .45s;
min-height:100vh;
}
body[data-page="music"] button, body[data-page="music"] input, body[data-page="music"] select{font-family:inherit}
/* ══════════════════════════════════════════════════
TOKENS
══════════════════════════════════════════════════ */
body[data-page="music"]{
--violet:#845EF7;
--violet-bright:#9B7FFF;
--violet-muted:#4A3080;
--violet-dark:#1A0D3A;
--pink:#FF6B9D;
--gold:#C9A84C;
--near-black:#06050C;
--ease:cubic-bezier(.25,.46,.45,.94);
--spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] body[data-page="music"]{
--bg:#06050C;
--bg-2:#0E0C1A;
--bg-3:#181428;
--fg:#EDE8F8;
--fg-2:#9A94B8;
--fg-3:#4E4868;
--border:rgba(132,94,247,.1);
--border-b:rgba(132,94,247,.2);
--shadow:rgba(0,0,0,.75);
--glow:rgba(132,94,247,.25);
--glow-pink:rgba(255,107,157,.15);
--card:rgba(14,12,26,.97);
--nav-bg:rgba(6,5,12,.94);
--overlay:rgba(4,3,9,.96);
}
html[data-theme="light"] body[data-page="music"]{
--bg:#F4F0FF;
--bg-2:#EAE4FB;
--bg-3:#DDD4F7;
--fg:#120E24;
--fg-2:#3D3660;
--fg-3:#8A82AA;
--border:rgba(132,94,247,.12);
--border-b:rgba(132,94,247,.22);
--shadow:rgba(80,50,150,.1);
--glow:rgba(132,94,247,.15);
--glow-pink:rgba(255,107,157,.1);
--card:rgba(255,252,255,.99);
--nav-bg:rgba(244,240,255,.95);
--overlay:rgba(238,234,252,.97);
}
/* ══════════════════════════════════════════════════
RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="music"] .rainbow-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
background:linear-gradient(90deg,
#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
#51CF66 42%,#339AF0 56%,#845EF7 70%,
#FF3B3B 84%,#FF6B35 100%);
background-size:200% 100%;
animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}
/* ══════════════════════════════════════════════════
NAV
══════════════════════════════════════════════════ */
body[data-page="music"] nav{
position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;
background:var(--nav-bg);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
padding:0 32px;transition:background .45s;
}
body[data-page="music"] .nav-logo{
font-family:'Cormorant Garamond',serif;
font-weight:700;font-size:1.35rem;
color:var(--fg);text-decoration:none;
letter-spacing:-.01em;
display:flex;align-items:center;gap:10px;
}
body[data-page="music"] .nav-logo .logo-accent{color:var(--violet-bright);font-style:italic}
body[data-page="music"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="music"] .nav-pill{
background:var(--border);border:1px solid var(--border-b);
border-radius:20px;padding:6px 14px;
font-size:.78rem;font-weight:500;color:var(--fg-2);
cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="music"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
/* ══════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════ */
body[data-page="music"] .hero{
min-height:100vh;padding-top:63px;
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
}
/* Vinyl record ambient art */
body[data-page="music"] .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-page="music"] .vinyl-orb{
position:absolute;border-radius:50%;
border:1px solid rgba(132,94,247,.06);
}
body[data-page="music"] .vinyl-orb-1{
width:600px;height:600px;
top:50%;left:60%;
transform:translate(-50%,-50%);
background:conic-gradient(
from 0deg,
rgba(132,94,247,.04) 0deg,
rgba(255,107,157,.03) 60deg,
rgba(132,94,247,.06) 120deg,
rgba(201,168,76,.03) 180deg,
rgba(132,94,247,.04) 240deg,
rgba(255,107,157,.02) 300deg,
rgba(132,94,247,.04) 360deg
);
animation:vinylSpin 40s linear infinite;
}
body[data-page="music"] .vinyl-orb-2{
width:900px;height:900px;
top:50%;left:60%;
transform:translate(-50%,-50%);
background:conic-gradient(
from 0deg,
rgba(132,94,247,.02) 0deg,
transparent 180deg,
rgba(132,94,247,.02) 360deg
);
animation:vinylSpin 80s linear infinite reverse;
}
@keyframes vinylSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Glow pools */
body[data-page="music"] .glow-pool{
position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;
}
body[data-page="music"] .gp-1{width:500px;height:500px;background:rgba(132,94,247,.12);top:-10%;left:-10%;animation:gpDrift 20s ease-in-out infinite}
body[data-page="music"] .gp-2{width:350px;height:350px;background:rgba(255,107,157,.07);bottom:10%;right:5%;animation:gpDrift 16s ease-in-out infinite reverse}
body[data-page="music"] .gp-3{width:250px;height:250px;background:rgba(201,168,76,.05);top:30%;left:35%;animation:gpDrift 24s ease-in-out infinite 5s}
@keyframes gpDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,-20px)}}
/* Noise grain */
body[data-page="music"] .hero-bg::after{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity:.5;
}
body[data-page="music"] .hero-inner{
position:relative;z-index:2;
max-width:1200px;width:100%;padding:0 40px;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
animation:heroIn 1s var(--ease) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* ── Left: text ──────────────────────────────── */
body[data-page="music"] .hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:rgba(132,94,247,.12);border:1px solid rgba(132,94,247,.25);
border-radius:20px;padding:5px 14px;
font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--violet-bright);margin-bottom:22px;
}
body[data-page="music"] .hero-title{
font-family:'Cormorant Garamond',serif;
font-weight:700;
font-size:clamp(3.2rem,8vw,7rem);
line-height:.92;letter-spacing:-.04em;
color:var(--fg);margin-bottom:18px;
}
body[data-page="music"] .hero-title em{color:var(--violet-bright);font-style:italic}
body[data-page="music"] .hero-sub{
font-size:1rem;color:var(--fg-2);
line-height:1.75;font-weight:300;
max-width:420px;margin-bottom:36px;
}
body[data-page="music"] .hero-stats{
display:flex;gap:36px;
padding-top:28px;border-top:1px solid var(--border);
}
body[data-page="music"] .hs-num{
font-family:'Cormorant Garamond',serif;
font-size:2.6rem;font-weight:700;
color:var(--fg);letter-spacing:-.04em;line-height:1;
}
body[data-page="music"] .hs-num em{color:var(--violet-bright);font-style:normal}
body[data-page="music"] .hs-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-top:4px}
/* ── Right: featured card ────────────────────── */
body[data-page="music"] .hero-featured{animation:heroIn 1s var(--ease) .18s both}
body[data-page="music"] .feat-card{
background:var(--card);
border:1px solid var(--border-b);
border-radius:24px;overflow:hidden;
cursor:pointer;
box-shadow:0 30px 80px var(--shadow),0 0 0 1px var(--border);
transition:transform .35s var(--ease),box-shadow .35s;
}
body[data-page="music"] .feat-card:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 40px 100px var(--shadow),0 0 60px var(--glow);
}
body[data-page="music"] .feat-thumb{
width:100%;aspect-ratio:16/9;
background:linear-gradient(135deg,var(--violet-dark),#0A0518,#1A0830);
display:flex;align-items:center;justify-content:center;
font-size:5rem;position:relative;overflow:hidden;
}
body[data-page="music"] .feat-thumb::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 40%,var(--card) 100%);
}
body[data-page="music"] .feat-thumb-emoji{position:relative;z-index:1}
body[data-page="music"] .feat-body{padding:22px 26px 26px}
body[data-page="music"] .feat-section{
font-size:.64rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--violet-bright);
margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
body[data-page="music"] .feat-section::before{content:'';display:block;width:14px;height:1px;background:var(--violet-bright)}
body[data-page="music"] .feat-title{
font-family:'Cormorant Garamond',serif;
font-size:1.4rem;font-weight:700;
color:var(--fg);line-height:1.2;
letter-spacing:-.02em;margin-bottom:8px;
}
body[data-page="music"] .feat-excerpt{font-size:.8rem;color:var(--fg-2);line-height:1.7;margin-bottom:14px}
body[data-page="music"] .feat-meta{
display:flex;align-items:center;gap:12px;
font-size:.7rem;color:var(--fg-3);
}
body[data-page="music"] .feat-author{color:var(--fg-2);font-weight:500}
body[data-page="music"] .feat-arrow{
margin-left:auto;color:var(--violet-bright);
font-weight:600;font-size:.78rem;
display:flex;align-items:center;gap:4px;
transition:gap .2s;
}
body[data-page="music"] .feat-card:hover .feat-arrow{gap:8px}
/* ══════════════════════════════════════════════════
DUAL-MODE TAB BAR
══════════════════════════════════════════════════ */
body[data-page="music"] .mode-bar{
background:var(--bg-2);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
position:sticky;top:63px;z-index:900;
transition:background .45s;
}
body[data-page="music"] .mode-bar-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;gap:0;
}
body[data-page="music"] .mode-tab{
display:flex;align-items:center;gap:8px;
padding:0 32px;height:54px;
font-size:.88rem;font-weight:600;
color:var(--fg-2);cursor:pointer;
background:none;border:none;
border-bottom:3px solid transparent;
transition:all .25s;letter-spacing:.01em;
white-space:nowrap;
}
body[data-page="music"] .mode-tab .mt-icon{font-size:1.1rem}
body[data-page="music"] .mode-tab .mt-count{
font-family:'DM Mono',monospace;font-size:.65rem;
background:var(--border-b);border-radius:10px;
padding:2px 8px;color:var(--fg-3);
transition:all .25s;
}
body[data-page="music"] .mode-tab:hover{color:var(--fg)}
body[data-page="music"] .mode-tab.active{
color:var(--violet-bright);
border-bottom-color:var(--violet-bright);
}
body[data-page="music"] .mode-tab.active .mt-count{
background:rgba(132,94,247,.2);color:var(--violet-bright);
}
body[data-page="music"] .mode-divider{width:1px;height:28px;background:var(--border-b);margin:0 8px}
/* ══════════════════════════════════════════════════
FILTER BAR (shared)
══════════════════════════════════════════════════ */
body[data-page="music"] .filter-bar{
background:var(--bg);
border-bottom:1px solid var(--border);
position:sticky;top:117px;z-index:890;
transition:background .45s;
}
body[data-page="music"] .filter-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;gap:14px;height:54px;
}
body[data-page="music"] .sw{position:relative;flex-shrink:0;width:260px}
body[data-page="music"] .sw-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
body[data-page="music"] .sw-icon svg{width:14px;height:14px}
body[data-page="music"] .sw-input{
width:100%;background:var(--bg-3);
border:1px solid var(--border);border-radius:24px;
padding:8px 36px 8px 38px;
color:var(--fg);font-size:.83rem;outline:none;
transition:border-color .2s,box-shadow .2s;
}
body[data-page="music"] .sw-input::placeholder{color:var(--fg-3)}
body[data-page="music"] .sw-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(132,94,247,.12)}
body[data-page="music"] .sw-clear{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--fg-3);cursor:pointer;
display:none;padding:2px;
}
body[data-page="music"] .sw-clear svg{width:13px;height:13px;display:block}
body[data-page="music"] .sw-clear.show{display:block}
body[data-page="music"] .fpills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
body[data-page="music"] .fpills::-webkit-scrollbar{display:none}
body[data-page="music"] .fpill{
background:none;border:1px solid var(--border-b);border-radius:20px;
padding:6px 16px;font-size:.76rem;font-weight:500;color:var(--fg-2);
cursor:pointer;white-space:nowrap;transition:all .2s;
}
body[data-page="music"] .fpill:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="music"] .fpill.active{background:var(--violet);border-color:var(--violet);color:white}
body[data-page="music"] .fsort{
background:var(--bg-3);border:1px solid var(--border);border-radius:20px;
padding:7px 14px;color:var(--fg-2);font-size:.76rem;outline:none;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;
padding-right:28px;cursor:pointer;transition:border-color .2s;
}
body[data-page="music"] .fsort:focus{border-color:var(--violet)}
body[data-page="music"] .fcount{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--fg-3);white-space:nowrap;flex-shrink:0}
body[data-page="music"] .fcount span{color:var(--fg);font-weight:500}
body[data-page="music"] .vbtns{display:flex;gap:4px}
body[data-page="music"] .vbtn{
background:none;border:1px solid var(--border-b);border-radius:8px;
padding:7px 10px;color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="music"] .vbtn svg{width:14px;height:14px;display:block}
body[data-page="music"] .vbtn:hover{color:var(--fg);border-color:var(--border-b)}
body[data-page="music"] .vbtn.active{background:var(--violet);border-color:var(--violet);color:white}
/* ══════════════════════════════════════════════════
ARTICLES PANEL
══════════════════════════════════════════════════ */
body[data-page="music"] .articles-section{padding:52px 0 100px;background:var(--bg)}
body[data-page="music"] .art-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="music"] .art-panel{display:none}
body[data-page="music"] .art-panel.active{display:block}
body[data-page="music"] .art-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
body[data-page="music"] .art-grid.list-mode{grid-template-columns:1fr;gap:0}
/* ── MUSIC REVIEW CARD ───────────────────────── */
body[data-page="music"] .art-card{
background:var(--card);border:1px solid var(--border);
border-radius:18px;overflow:hidden;cursor:pointer;
transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
display:flex;flex-direction:column;position:relative;
}
body[data-page="music"] .art-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--card-accent,var(--violet));
transform:scaleX(0);transform-origin:left;
transition:transform .35s var(--ease);
}
body[data-page="music"] .art-card:hover::before{transform:scaleX(1)}
body[data-page="music"] .art-card:hover{
transform:translateY(-5px);
border-color:var(--border-b);
box-shadow:0 18px 50px var(--shadow),0 0 30px var(--glow);
}
/* Album art thumbnail for reviews */
body[data-page="music"] .art-thumb{
width:100%;aspect-ratio:1;
display:flex;align-items:center;justify-content:center;
font-size:3rem;position:relative;overflow:hidden;flex-shrink:0;
}
/* Review thumbnails show album art emoji + rating overlay */
body[data-page="music"] .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
body[data-page="music"] .thumb-emoji{position:relative;z-index:1;font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
body[data-page="music"] .thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}
body[data-page="music"] .thumb-rating{
position:absolute;bottom:10px;right:10px;z-index:2;
background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
border-radius:8px;padding:4px 10px;
font-family:'Cormorant Garamond',serif;
font-size:1rem;font-weight:700;color:var(--gold);
letter-spacing:.02em;
}
/* Genre-specific bg */
body[data-page="music"] .genre-indie .art-thumb{background:linear-gradient(135deg,#1A0D3A,#2D1258)}
body[data-page="music"] .genre-rap .art-thumb{background:linear-gradient(135deg,#0A0A1A,#141428)}
body[data-page="music"] .genre-pop .art-thumb{background:linear-gradient(135deg,#2D0A1A,#4A0A28)}
body[data-page="music"] .genre-rnb .art-thumb{background:linear-gradient(135deg,#1A0D28,#2D1440)}
body[data-page="music"] .genre-electronic .art-thumb{background:linear-gradient(135deg,#001A2D,#00283D)}
body[data-page="music"] .genre-alternative .art-thumb{background:linear-gradient(135deg,#1A1428,#28203D)}
body[data-page="music"] .genre-jazz .art-thumb{background:linear-gradient(135deg,#1A1200,#2D2000)}
body[data-page="music"] .genre-general .art-thumb{background:linear-gradient(135deg,#141020,#201830)}
body[data-page="music"] .art-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
body[data-page="music"] .art-section{
font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--card-accent,var(--violet));margin-bottom:6px;
display:flex;align-items:center;gap:5px;
}
body[data-page="music"] .art-section::before{content:'';display:block;width:10px;height:1px;background:var(--card-accent,var(--violet))}
body[data-page="music"] .art-title{
font-family:'Cormorant Garamond',serif;
font-size:1.1rem;font-weight:700;
color:var(--fg);line-height:1.25;letter-spacing:-.015em;
margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="music"] .art-excerpt{
font-size:.78rem;color:var(--fg-2);line-height:1.65;flex:1;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin-bottom:12px;font-weight:300;
}
body[data-page="music"] .art-meta{
display:flex;align-items:center;gap:8px;
font-size:.68rem;color:var(--fg-3);
border-top:1px solid var(--border);padding-top:10px;margin-top:auto;flex-wrap:wrap;
}
body[data-page="music"] .art-author{color:var(--fg-2);font-weight:500}
/* Star rating component */
body[data-page="music"] .stars{display:flex;gap:1px;margin-bottom:4px}
body[data-page="music"] .star{color:var(--gold);font-size:.7rem}
body[data-page="music"] .star.empty{color:var(--fg-3);opacity:.4}
/* List mode overrides */
body[data-page="music"] .art-grid.list-mode .art-card{
flex-direction:row;border-radius:0;border:none;
border-bottom:1px solid var(--border);
transform:none!important;box-shadow:none!important;
padding:18px 4px;gap:16px;align-items:center;
}
body[data-page="music"] .art-grid.list-mode .art-card::before{display:none}
body[data-page="music"] .art-grid.list-mode .art-thumb{
width:72px;height:72px;aspect-ratio:1;
border-radius:10px;flex-shrink:0;font-size:1.5rem;
}
body[data-page="music"] .art-grid.list-mode .art-body{padding:0}
body[data-page="music"] .art-grid.list-mode .art-excerpt{display:none}
body[data-page="music"] .art-grid.list-mode .art-title{-webkit-line-clamp:1;font-size:.95rem}
body[data-page="music"] .art-grid.list-mode .art-meta{border-top:none;padding-top:0;margin-top:6px}
body[data-page="music"] .art-grid.list-mode .thumb-rating{font-size:.75rem;padding:2px 6px;bottom:4px;right:4px}
/* No results */
body[data-page="music"] .no-res{grid-column:1/-1;text-align:center;padding:80px 0;display:none}
body[data-page="music"] .no-res.show{display:block}
body[data-page="music"] .nr-icon{font-size:3rem;margin-bottom:12px;opacity:.3}
body[data-page="music"] .nr-title{
font-family:'Cormorant Garamond',serif;
font-size:2rem;color:var(--fg-2);margin-bottom:6px;
}
body[data-page="music"] .nr-sub{font-size:.85rem;color:var(--fg-3)}
/* Load more */
body[data-page="music"] .load-wrap{text-align:center;margin-top:48px}
body[data-page="music"] .load-btn{
background:none;border:1px solid var(--border-b);border-radius:50px;
padding:13px 40px;font-size:.88rem;font-weight:500;color:var(--fg-2);
cursor:pointer;transition:all .25s var(--spring);
display:inline-flex;align-items:center;gap:8px;
}
body[data-page="music"] .load-btn:hover{
border-color:var(--violet);color:var(--violet);
transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);
}
body[data-page="music"] .load-btn.hidden{display:none}
/* ══════════════════════════════════════════════════
NOW PLAYING AMBIENT STRIP (between hero and tabs)
══════════════════════════════════════════════════ */
body[data-page="music"] .now-playing-strip{
background:var(--bg-2);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
overflow:hidden;white-space:nowrap;padding:8px 0;
}
body[data-page="music"] .np-track{
display:inline-block;
animation:npScroll 55s linear infinite;
}
body[data-page="music"] .np-track span{
display:inline-flex;align-items:center;gap:8px;
padding:0 48px;font-size:.7rem;color:var(--fg-3);
letter-spacing:.04em;
}
body[data-page="music"] .np-track span em{color:var(--violet-bright);font-style:normal;font-weight:500}
body[data-page="music"] .np-dot{color:var(--violet);opacity:.4}
@keyframes npScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ══════════════════════════════════════════════════
MODAL READER
══════════════════════════════════════════════════ */
body[data-page="music"] .modal-overlay{
position:fixed;inset:0;z-index:2000;
background:var(--overlay);
backdrop-filter:blur(24px) saturate(150%);
-webkit-backdrop-filter:blur(24px) saturate(150%);
display:flex;align-items:flex-start;justify-content:center;
padding:20px;overflow-y:auto;
opacity:0;pointer-events:none;
transition:opacity .3s var(--ease);
}
body[data-page="music"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="music"] .modal{
background:var(--card);border:1px solid var(--border-b);
border-radius:28px;width:100%;max-width:760px;
margin:auto;
box-shadow:0 60px 160px var(--shadow),0 0 0 1px var(--border);
transform:translateY(32px) scale(.97);
transition:transform .38s var(--spring);
overflow:hidden;position:relative;
}
body[data-page="music"] .modal-overlay.open .modal{transform:translateY(0) scale(1)}
/* Progress */
body[data-page="music"] .modal-progress{position:sticky;top:0;left:0;right:0;height:3px;z-index:10;background:var(--border)}
body[data-page="music"] .modal-progress-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--pink));width:0%;transition:width .08s linear}
/* Album art hero */
body[data-page="music"] .modal-art{
width:100%;height:260px;
display:flex;align-items:center;justify-content:center;
font-size:7rem;position:relative;overflow:hidden;
}
body[data-page="music"] .modal-art::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 30%,var(--card) 100%);
}
body[data-page="music"] .modal-art-emoji{position:relative;z-index:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
body[data-page="music"] .modal-close{
position:absolute;top:16px;right:16px;z-index:20;
width:38px;height:38px;border-radius:50%;
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
color:white;display:flex;align-items:center;justify-content:center;
cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;
}
body[data-page="music"] .modal-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.15)}
body[data-page="music"] .modal-close svg{width:14px;height:14px}
body[data-page="music"] .modal-body{padding:0 44px 52px}
body[data-page="music"] .modal-section-tag{
font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--violet-bright);margin-bottom:12px;
display:flex;align-items:center;gap:8px;
}
body[data-page="music"] .modal-section-tag::before{content:'';display:block;width:18px;height:1px;background:var(--violet-bright)}
/* Review specific */
body[data-page="music"] .modal-album-info{
display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
body[data-page="music"] .modal-album-art-sm{
width:60px;height:60px;border-radius:10px;
background:linear-gradient(135deg,var(--violet-dark),#0A0518);
display:flex;align-items:center;justify-content:center;
font-size:1.8rem;flex-shrink:0;border:1px solid var(--border-b);
}
body[data-page="music"] .modal-album-title{
font-family:'Cormorant Garamond',serif;
font-size:1rem;font-weight:700;color:var(--fg);
}
body[data-page="music"] .modal-album-artist{font-size:.82rem;color:var(--fg-2);margin-top:2px}
body[data-page="music"] .modal-album-meta{font-size:.72rem;color:var(--fg-3);margin-top:3px;font-family:'DM Mono',monospace}
body[data-page="music"] .modal-rating-row{
display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
body[data-page="music"] .modal-stars{display:flex;gap:3px}
body[data-page="music"] .modal-star{font-size:1.1rem;color:var(--gold)}
body[data-page="music"] .modal-star.empty{color:var(--fg-3);opacity:.35}
body[data-page="music"] .modal-score{
font-family:'Cormorant Garamond',serif;
font-size:2rem;font-weight:700;color:var(--fg);letter-spacing:-.04em;
}
body[data-page="music"] .modal-score em{color:var(--gold);font-style:normal}
body[data-page="music"] .modal-verdict{
font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:3px 10px;border-radius:20px;
}
body[data-page="music"] .verdict-essential{background:rgba(81,207,102,.15);color:#51CF66}
body[data-page="music"] .verdict-great{background:rgba(132,94,247,.15);color:var(--violet-bright)}
body[data-page="music"] .verdict-good{background:rgba(201,168,76,.15);color:var(--gold)}
body[data-page="music"] .verdict-mixed{background:rgba(255,107,53,.15);color:#FF6B35}
body[data-page="music"] .modal-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.7rem,4vw,2.6rem);
font-weight:700;line-height:1.1;
letter-spacing:-.04em;color:var(--fg);margin-bottom:16px;
}
body[data-page="music"] .modal-byline{
display:flex;align-items:center;gap:14px;
padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
margin-bottom:28px;flex-wrap:wrap;
}
body[data-page="music"] .m-author{display:flex;align-items:center;gap:9px}
body[data-page="music"] .m-avatar{
width:32px;height:32px;border-radius:50%;
background:var(--bg-3);border:1px solid var(--border-b);
display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
body[data-page="music"] .m-name{font-size:.82rem;font-weight:600;color:var(--fg)}
body[data-page="music"] .m-role{font-size:.7rem;color:var(--fg-3)}
body[data-page="music"] .m-date{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3)}
body[data-page="music"] .m-readtime{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3);margin-left:auto}
/* Content */
body[data-page="music"] .modal-content{line-height:1.9}
body[data-page="music"] .modal-content p{font-size:.94rem;color:var(--fg-2);margin-bottom:18px;font-weight:300}
body[data-page="music"] .modal-content p strong{color:var(--fg);font-weight:600}
body[data-page="music"] .modal-content h3{
font-family:'Cormorant Garamond',serif;
font-size:1.35rem;font-weight:700;color:var(--fg);
letter-spacing:-.02em;margin:30px 0 12px;
}
body[data-page="music"] .modal-content blockquote{
margin:24px 0;padding:18px 22px;
border-left:3px solid var(--violet);
background:rgba(132,94,247,.05);border-radius:0 12px 12px 0;
}
body[data-page="music"] .modal-content blockquote p{
font-family:'Cormorant Garamond',serif;
font-size:1.1rem;font-style:italic;color:var(--fg);margin-bottom:6px;
}
body[data-page="music"] .modal-content blockquote cite{font-size:.72rem;color:var(--fg-3);font-style:normal;font-family:'DM Mono',monospace}
body[data-page="music"] .modal-content .track-list{
background:var(--bg-2);border:1px solid var(--border-b);
border-radius:14px;padding:16px 20px;margin:22px 0;
}
body[data-page="music"] .modal-content .tl-title{
font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--fg-3);margin-bottom:12px;
}
body[data-page="music"] .modal-content .tl-row{
display:flex;align-items:center;gap:12px;
padding:8px 0;border-bottom:1px solid var(--border);
}
body[data-page="music"] .modal-content .tl-row:last-child{border-bottom:none}
body[data-page="music"] .modal-content .tl-num{
font-family:'DM Mono',monospace;font-size:.66rem;
color:var(--fg-3);width:18px;flex-shrink:0;
}
body[data-page="music"] .modal-content .tl-name{font-size:.84rem;color:var(--fg);flex:1}
body[data-page="music"] .modal-content .tl-highlight{color:var(--violet-bright);font-weight:500}
body[data-page="music"] .modal-content .tl-dur{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--fg-3)}
body[data-page="music"] .modal-footer{
margin-top:36px;padding-top:20px;
border-top:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="music"] .modal-share{display:flex;gap:8px}
body[data-page="music"] .share-btn{
background:none;border:1px solid var(--border-b);border-radius:20px;
padding:7px 16px;font-size:.74rem;font-weight:500;color:var(--fg-2);
cursor:pointer;transition:all .2s;
}
body[data-page="music"] .share-btn:hover{border-color:var(--violet);color:var(--violet)}
body[data-page="music"] .modal-next-btn{
font-size:.76rem;color:var(--fg-3);cursor:pointer;
background:none;border:none;transition:color .2s;
font-family:'DM Mono',monospace;letter-spacing:.04em;
display:flex;align-items:center;gap:6px;
}
body[data-page="music"] .modal-next-btn:hover{color:var(--violet-bright)}
/* ══════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════ */
body[data-page="music"] footer{background:var(--near-black);padding:40px 0}
body[data-page="music"] .f-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="music"] .f-brand{
font-family:'Cormorant Garamond',serif;
font-size:1.3rem;font-weight:700;color:white;letter-spacing:-.01em;
}
body[data-page="music"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="music"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="music"] .f-home:hover{color:white}
/* ══════════════════════════════════════════════════
REVEAL
══════════════════════════════════════════════════ */
body[data-page="music"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="music"] .reveal.visible{opacity:1;transform:none}
body[data-page="music"] .rd1{transition-delay:.06s}body[data-page="music"] .rd2{transition-delay:.12s}body[data-page="music"] .rd3{transition-delay:.18s}
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
/* (cursor system styles live in the global section near the top of this file) */
@media(max-width:960px){
body[data-page="music"] .hero-inner{grid-template-columns:1fr;gap:48px;padding:50px 24px 60px}
body[data-page="music"] .art-grid{grid-template-columns:repeat(2,1fr)}
body[data-page="music"] .filter-inner{padding:0 20px;gap:10px}
body[data-page="music"] .mode-bar-inner{padding:0 20px}
}
@media(max-width:640px){
body[data-page="music"] nav{padding:0 16px}
body[data-page="music"] .art-inner{padding:0 16px}
body[data-page="music"] .art-grid{grid-template-columns:1fr}
body[data-page="music"] .fpills{max-width:180px}
body[data-page="music"] .fcount{display:none}
body[data-page="music"] .fsort{display:none}
body[data-page="music"] .f-inner{flex-direction:column;align-items:flex-start}
/* Desk switcher: two tabs no longer overflow / get clipped. Reduce the
bar's side padding, let each tab share the width evenly, and shrink the
per-tab padding + label so both fit on a phone. */
body[data-page="music"] .mode-bar-inner{padding:0 12px}
body[data-page="music"] .mode-tab{
flex:1;min-width:0;justify-content:center;
padding:0 8px;gap:6px;font-size:.8rem;
overflow:hidden;text-overflow:ellipsis;
}
body[data-page="music"] .mode-tab .mt-count{padding:1px 6px;font-size:.6rem;flex-shrink:0}
body[data-page="music"] .mode-tab .mt-icon{flex-shrink:0;font-size:1rem}
}
/* (cursor system styles live in the global section near the top of this file) */
/* ═══════════════════════════════════════════════════
PAGE: SPORTS (sports.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="sports"]{
font-family:'DM Sans',sans-serif;
background:var(--bg);color:var(--fg);
overflow-x:hidden;
transition:background .45s,color .45s;
min-height:100vh;
}
body[data-page="sports"] button, body[data-page="sports"] input, body[data-page="sports"] select{font-family:inherit}
/* ══════════════════════════════════════════════════
TOKENS
══════════════════════════════════════════════════ */
body[data-page="sports"]{
--orange:#FF6B35;
--orange-bright:#FF8B5C;
--orange-muted:#7A2E0F;
--orange-dark:#2A0E03;
--cyan:#00BFFF;
--gold:#C9A84C;
--near-black:#06080C;
--ease:cubic-bezier(.25,.46,.45,.94);
--spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] body[data-page="sports"]{
--bg:#06080C;
--bg-2:#0C1018;
--bg-3:#16202E;
--fg:#EDF2F8;
--fg-2:#94A4B8;
--fg-3:#4A5868;
--border:rgba(255,107,53,.1);
--border-b:rgba(255,107,53,.2);
--shadow:rgba(0,0,0,.75);
--glow:rgba(255,107,53,.25);
--glow-pink:rgba(0,191,255,.15);
--card:rgba(14,12,26,.97);
--nav-bg:rgba(6,5,12,.94);
--overlay:rgba(4,3,9,.96);
}
html[data-theme="light"] body[data-page="sports"]{
--bg:#F0F4FA;
--bg-2:#E4ECF6;
--bg-3:#D4DEEC;
--fg:#0F1A24;
--fg-2:#2C3D50;
--fg-3:#7A8AA0;
--border:rgba(255,107,53,.12);
--border-b:rgba(255,107,53,.22);
--shadow:rgba(80,50,150,.1);
--glow:rgba(255,107,53,.15);
--glow-pink:rgba(0,191,255,.1);
--card:rgba(255,252,255,.99);
--nav-bg:rgba(244,240,255,.95);
--overlay:rgba(238,234,252,.97);
}
/* ══════════════════════════════════════════════════
RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="sports"] .rainbow-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
background:linear-gradient(90deg,
#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
#51CF66 42%,#339AF0 56%,#FF6B35 70%,
#FF3B3B 84%,#FF6B35 100%);
background-size:200% 100%;
animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}
/* ══════════════════════════════════════════════════
NAV
══════════════════════════════════════════════════ */
body[data-page="sports"] nav{
position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;
background:var(--nav-bg);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
padding:0 32px;transition:background .45s;
}
body[data-page="sports"] .nav-logo{
font-family:'Cormorant Garamond',serif;
font-weight:700;font-size:1.35rem;
color:var(--fg);text-decoration:none;
letter-spacing:-.01em;
display:flex;align-items:center;gap:10px;
}
body[data-page="sports"] .nav-logo .logo-accent{color:var(--orange-bright);font-style:italic}
body[data-page="sports"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="sports"] .nav-pill{
background:var(--border);border:1px solid var(--border-b);
border-radius:20px;padding:6px 14px;
font-size:.78rem;font-weight:500;color:var(--fg-2);
cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="sports"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
/* ══════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════ */
body[data-page="sports"] .hero{
min-height:100vh;padding-top:63px;
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
}
/* Vinyl record ambient art */
body[data-page="sports"] .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-page="sports"] .vinyl-orb{
position:absolute;border-radius:50%;
border:1px solid rgba(255,107,53,.06);
}
body[data-page="sports"] .vinyl-orb-1{
width:600px;height:600px;
top:50%;left:60%;
transform:translate(-50%,-50%);
background:conic-gradient(
from 0deg,
rgba(255,107,53,.04) 0deg,
rgba(0,191,255,.03) 60deg,
rgba(255,107,53,.06) 120deg,
rgba(201,168,76,.03) 180deg,
rgba(255,107,53,.04) 240deg,
rgba(0,191,255,.02) 300deg,
rgba(255,107,53,.04) 360deg
);
animation:vinylSpin 40s linear infinite;
}
body[data-page="sports"] .vinyl-orb-2{
width:900px;height:900px;
top:50%;left:60%;
transform:translate(-50%,-50%);
background:conic-gradient(
from 0deg,
rgba(255,107,53,.02) 0deg,
transparent 180deg,
rgba(255,107,53,.02) 360deg
);
animation:vinylSpin 80s linear infinite reverse;
}
@keyframes vinylSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Glow pools */
body[data-page="sports"] .glow-pool{
position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;
}
body[data-page="sports"] .gp-1{width:500px;height:500px;background:rgba(255,107,53,.12);top:-10%;left:-10%;animation:gpDrift 20s ease-in-out infinite}
body[data-page="sports"] .gp-2{width:350px;height:350px;background:rgba(0,191,255,.07);bottom:10%;right:5%;animation:gpDrift 16s ease-in-out infinite reverse}
body[data-page="sports"] .gp-3{width:250px;height:250px;background:rgba(201,168,76,.05);top:30%;left:35%;animation:gpDrift 24s ease-in-out infinite 5s}
@keyframes gpDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,-20px)}}
/* Noise grain */
body[data-page="sports"] .hero-bg::after{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity:.5;
}
body[data-page="sports"] .hero-inner{
position:relative;z-index:2;
max-width:1200px;width:100%;padding:0 40px;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
animation:heroIn 1s var(--ease) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* ── Left: text ──────────────────────────────── */
body[data-page="sports"] .hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.25);
border-radius:20px;padding:5px 14px;
font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--orange-bright);margin-bottom:22px;
}
body[data-page="sports"] .hero-title{
font-family:'Cormorant Garamond',serif;
font-weight:700;
font-size:clamp(3.2rem,8vw,7rem);
line-height:.92;letter-spacing:-.04em;
color:var(--fg);margin-bottom:18px;
}
body[data-page="sports"] .hero-title em{color:var(--orange-bright);font-style:italic}
body[data-page="sports"] .hero-sub{
font-size:1rem;color:var(--fg-2);
line-height:1.75;font-weight:300;
max-width:420px;margin-bottom:36px;
}
body[data-page="sports"] .hero-stats{
display:flex;gap:36px;
padding-top:28px;border-top:1px solid var(--border);
}
body[data-page="sports"] .hs-num{
font-family:'Cormorant Garamond',serif;
font-size:2.6rem;font-weight:700;
color:var(--fg);letter-spacing:-.04em;line-height:1;
}
body[data-page="sports"] .hs-num em{color:var(--orange-bright);font-style:normal}
body[data-page="sports"] .hs-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-top:4px}
/* ── Right: featured card ────────────────────── */
body[data-page="sports"] .hero-featured{animation:heroIn 1s var(--ease) .18s both}
body[data-page="sports"] .feat-card{
background:var(--card);
border:1px solid var(--border-b);
border-radius:24px;overflow:hidden;
cursor:pointer;
box-shadow:0 30px 80px var(--shadow),0 0 0 1px var(--border);
transition:transform .35s var(--ease),box-shadow .35s;
}
body[data-page="sports"] .feat-card:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 40px 100px var(--shadow),0 0 60px var(--glow);
}
body[data-page="sports"] .feat-thumb{
width:100%;aspect-ratio:16/9;
background:linear-gradient(135deg,var(--orange-dark),#0A0518,#1A0830);
display:flex;align-items:center;justify-content:center;
font-size:5rem;position:relative;overflow:hidden;
}
body[data-page="sports"] .feat-thumb::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 40%,var(--card) 100%);
}
body[data-page="sports"] .feat-thumb-emoji{position:relative;z-index:1}
body[data-page="sports"] .feat-body{padding:22px 26px 26px}
body[data-page="sports"] .feat-section{
font-size:.64rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--orange-bright);
margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
body[data-page="sports"] .feat-section::before{content:'';display:block;width:14px;height:1px;background:var(--orange-bright)}
body[data-page="sports"] .feat-title{
font-family:'Cormorant Garamond',serif;
font-size:1.4rem;font-weight:700;
color:var(--fg);line-height:1.2;
letter-spacing:-.02em;margin-bottom:8px;
}
body[data-page="sports"] .feat-excerpt{font-size:.8rem;color:var(--fg-2);line-height:1.7;margin-bottom:14px}
body[data-page="sports"] .feat-meta{
display:flex;align-items:center;gap:12px;
font-size:.7rem;color:var(--fg-3);
}
body[data-page="sports"] .feat-author{color:var(--fg-2);font-weight:500}
body[data-page="sports"] .feat-arrow{
margin-left:auto;color:var(--orange-bright);
font-weight:600;font-size:.78rem;
display:flex;align-items:center;gap:4px;
transition:gap .2s;
}
body[data-page="sports"] .feat-card:hover .feat-arrow{gap:8px}
/* ══════════════════════════════════════════════════
DUAL-MODE TAB BAR
══════════════════════════════════════════════════ */
body[data-page="sports"] .mode-bar{
background:var(--bg-2);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
position:sticky;top:63px;z-index:900;
transition:background .45s;
}
body[data-page="sports"] .mode-bar-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;gap:0;
}
body[data-page="sports"] .mode-tab{
display:flex;align-items:center;gap:8px;
padding:0 32px;height:54px;
font-size:.88rem;font-weight:600;
color:var(--fg-2);cursor:pointer;
background:none;border:none;
border-bottom:3px solid transparent;
transition:all .25s;letter-spacing:.01em;
white-space:nowrap;
}
body[data-page="sports"] .mode-tab .mt-icon{font-size:1.1rem}
body[data-page="sports"] .mode-tab .mt-count{
font-family:'DM Mono',monospace;font-size:.65rem;
background:var(--border-b);border-radius:10px;
padding:2px 8px;color:var(--fg-3);
transition:all .25s;
}
body[data-page="sports"] .mode-tab:hover{color:var(--fg)}
body[data-page="sports"] .mode-tab.active{
color:var(--orange-bright);
border-bottom-color:var(--orange-bright);
}
body[data-page="sports"] .mode-tab.active .mt-count{
background:rgba(255,107,53,.2);color:var(--orange-bright);
}
body[data-page="sports"] .mode-divider{width:1px;height:28px;background:var(--border-b);margin:0 8px}
/* ══════════════════════════════════════════════════
FILTER BAR (shared)
══════════════════════════════════════════════════ */
body[data-page="sports"] .filter-bar{
background:var(--bg);
border-bottom:1px solid var(--border);
position:sticky;top:117px;z-index:890;
transition:background .45s;
}
body[data-page="sports"] .filter-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;gap:14px;height:54px;
}
body[data-page="sports"] .sw{position:relative;flex-shrink:0;width:260px}
body[data-page="sports"] .sw-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
body[data-page="sports"] .sw-icon svg{width:14px;height:14px}
body[data-page="sports"] .sw-input{
width:100%;background:var(--bg-3);
border:1px solid var(--border);border-radius:24px;
padding:8px 36px 8px 38px;
color:var(--fg);font-size:.83rem;outline:none;
transition:border-color .2s,box-shadow .2s;
}
body[data-page="sports"] .sw-input::placeholder{color:var(--fg-3)}
body[data-page="sports"] .sw-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,53,.12)}
body[data-page="sports"] .sw-clear{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--fg-3);cursor:pointer;
display:none;padding:2px;
}
body[data-page="sports"] .sw-clear svg{width:13px;height:13px;display:block}
body[data-page="sports"] .sw-clear.show{display:block}
body[data-page="sports"] .fpills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
body[data-page="sports"] .fpills::-webkit-scrollbar{display:none}
body[data-page="sports"] .fpill{
background:none;border:1px solid var(--border-b);border-radius:20px;
padding:6px 16px;font-size:.76rem;font-weight:500;color:var(--fg-2);
cursor:pointer;white-space:nowrap;transition:all .2s;
}
body[data-page="sports"] .fpill:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="sports"] .fpill.active{background:var(--orange);border-color:var(--orange);color:white}
body[data-page="sports"] .fsort{
background:var(--bg-3);border:1px solid var(--border);border-radius:20px;
padding:7px 14px;color:var(--fg-2);font-size:.76rem;outline:none;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;
padding-right:28px;cursor:pointer;transition:border-color .2s;
}
body[data-page="sports"] .fsort:focus{border-color:var(--orange)}
body[data-page="sports"] .fcount{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--fg-3);white-space:nowrap;flex-shrink:0}
body[data-page="sports"] .fcount span{color:var(--fg);font-weight:500}
body[data-page="sports"] .vbtns{display:flex;gap:4px}
body[data-page="sports"] .vbtn{
background:none;border:1px solid var(--border-b);border-radius:8px;
padding:7px 10px;color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="sports"] .vbtn svg{width:14px;height:14px;display:block}
body[data-page="sports"] .vbtn:hover{color:var(--fg);border-color:var(--border-b)}
body[data-page="sports"] .vbtn.active{background:var(--orange);border-color:var(--orange);color:white}
/* ══════════════════════════════════════════════════
ARTICLES PANEL
══════════════════════════════════════════════════ */
body[data-page="sports"] .articles-section{padding:52px 0 100px;background:var(--bg)}
body[data-page="sports"] .art-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="sports"] .art-panel{display:none}
body[data-page="sports"] .art-panel.active{display:block}
body[data-page="sports"] .art-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
body[data-page="sports"] .art-grid.list-mode{grid-template-columns:1fr;gap:0}
/* ── MUSIC REVIEW CARD ───────────────────────── */
body[data-page="sports"] .art-card{
background:var(--card);border:1px solid var(--border);
border-radius:18px;overflow:hidden;cursor:pointer;
transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
display:flex;flex-direction:column;position:relative;
}
body[data-page="sports"] .art-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--card-accent,var(--orange));
transform:scaleX(0);transform-origin:left;
transition:transform .35s var(--ease);
}
body[data-page="sports"] .art-card:hover::before{transform:scaleX(1)}
body[data-page="sports"] .art-card:hover{
transform:translateY(-5px);
border-color:var(--border-b);
box-shadow:0 18px 50px var(--shadow),0 0 30px var(--glow);
}
/* Album art thumbnail for reviews */
body[data-page="sports"] .art-thumb{
width:100%;aspect-ratio:1;
display:flex;align-items:center;justify-content:center;
font-size:3rem;position:relative;overflow:hidden;flex-shrink:0;
}
/* Review thumbnails show album art emoji + rating overlay */
body[data-page="sports"] .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
body[data-page="sports"] .thumb-emoji{position:relative;z-index:1;font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
body[data-page="sports"] .thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}
/* Genre-specific bg */
body[data-page="sports"] .genre-indie .art-thumb{background:linear-gradient(135deg,#2A0E03,#2D1258)}
body[data-page="sports"] .genre-rap .art-thumb{background:linear-gradient(135deg,#0A0A1A,#141428)}
body[data-page="sports"] .genre-pop .art-thumb{background:linear-gradient(135deg,#2D0A1A,#4A0A28)}
body[data-page="sports"] .genre-rnb .art-thumb{background:linear-gradient(135deg,#1A0D28,#2D1440)}
body[data-page="sports"] .genre-electronic .art-thumb{background:linear-gradient(135deg,#001A2D,#00283D)}
body[data-page="sports"] .genre-alternative .art-thumb{background:linear-gradient(135deg,#1A1428,#28203D)}
body[data-page="sports"] .genre-jazz .art-thumb{background:linear-gradient(135deg,#1A1200,#2D2000)}
body[data-page="sports"] .genre-general .art-thumb{background:linear-gradient(135deg,#141020,#201830)}
body[data-page="sports"] .art-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
body[data-page="sports"] .art-section{
font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--card-accent,var(--orange));margin-bottom:6px;
display:flex;align-items:center;gap:5px;
}
body[data-page="sports"] .art-section::before{content:'';display:block;width:10px;height:1px;background:var(--card-accent,var(--orange))}
body[data-page="sports"] .art-title{
font-family:'Cormorant Garamond',serif;
font-size:1.1rem;font-weight:700;
color:var(--fg);line-height:1.25;letter-spacing:-.015em;
margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="sports"] .art-excerpt{
font-size:.78rem;color:var(--fg-2);line-height:1.65;flex:1;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin-bottom:12px;font-weight:300;
}
body[data-page="sports"] .art-meta{
display:flex;align-items:center;gap:8px;
font-size:.68rem;color:var(--fg-3);
border-top:1px solid var(--border);padding-top:10px;margin-top:auto;flex-wrap:wrap;
}
body[data-page="sports"] .art-author{color:var(--fg-2);font-weight:500}
/* Star rating component */
body[data-page="sports"] .stars{display:flex;gap:1px;margin-bottom:4px}
body[data-page="sports"] .star{color:var(--gold);font-size:.7rem}
body[data-page="sports"] .star.empty{color:var(--fg-3);opacity:.4}
/* List mode overrides */
body[data-page="sports"] .art-grid.list-mode .art-card{
flex-direction:row;border-radius:0;border:none;
border-bottom:1px solid var(--border);
transform:none!important;box-shadow:none!important;
padding:18px 4px;gap:16px;align-items:center;
}
body[data-page="sports"] .art-grid.list-mode .art-card::before{display:none}
body[data-page="sports"] .art-grid.list-mode .art-thumb{
width:72px;height:72px;aspect-ratio:1;
border-radius:10px;flex-shrink:0;font-size:1.5rem;
}
body[data-page="sports"] .art-grid.list-mode .art-body{padding:0}
body[data-page="sports"] .art-grid.list-mode .art-excerpt{display:none}
body[data-page="sports"] .art-grid.list-mode .art-title{-webkit-line-clamp:1;font-size:.95rem}
body[data-page="sports"] .art-grid.list-mode .art-meta{border-top:none;padding-top:0;margin-top:6px}
/* No results */
body[data-page="sports"] .no-res{grid-column:1/-1;text-align:center;padding:80px 0;display:none}
body[data-page="sports"] .no-res.show{display:block}
body[data-page="sports"] .nr-icon{font-size:3rem;margin-bottom:12px;opacity:.3}
body[data-page="sports"] .nr-title{
font-family:'Cormorant Garamond',serif;
font-size:2rem;color:var(--fg-2);margin-bottom:6px;
}
body[data-page="sports"] .nr-sub{font-size:.85rem;color:var(--fg-3)}
/* Load more */
body[data-page="sports"] .load-wrap{text-align:center;margin-top:48px}
body[data-page="sports"] .load-btn{
background:none;border:1px solid var(--border-b);border-radius:50px;
padding:13px 40px;font-size:.88rem;font-weight:500;color:var(--fg-2);
cursor:pointer;transition:all .25s var(--spring);
display:inline-flex;align-items:center;gap:8px;
}
body[data-page="sports"] .load-btn:hover{
border-color:var(--orange);color:var(--orange);
transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);
}
body[data-page="sports"] .load-btn.hidden{display:none}
/* ══════════════════════════════════════════════════
NOW PLAYING AMBIENT STRIP (between hero and tabs)
══════════════════════════════════════════════════ */
body[data-page="sports"] .now-playing-strip{
background:var(--bg-2);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
overflow:hidden;white-space:nowrap;padding:8px 0;
}
body[data-page="sports"] .np-track{
display:inline-block;
animation:npScroll 55s linear infinite;
}
body[data-page="sports"] .np-track span{
display:inline-flex;align-items:center;gap:8px;
padding:0 48px;font-size:.7rem;color:var(--fg-3);
letter-spacing:.04em;
}
body[data-page="sports"] .np-track span em{color:var(--orange-bright);font-style:normal;font-weight:500}
body[data-page="sports"] .np-dot{color:var(--orange);opacity:.4}
@keyframes npScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ══════════════════════════════════════════════════
MODAL READER
══════════════════════════════════════════════════ */
body[data-page="sports"] .modal-overlay{
position:fixed;inset:0;z-index:2000;
background:var(--overlay);
backdrop-filter:blur(24px) saturate(150%);
-webkit-backdrop-filter:blur(24px) saturate(150%);
display:flex;align-items:flex-start;justify-content:center;
padding:20px;overflow-y:auto;
opacity:0;pointer-events:none;
transition:opacity .3s var(--ease);
}
body[data-page="sports"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="sports"] .modal{
background:var(--card);border:1px solid var(--border-b);
border-radius:28px;width:100%;max-width:760px;
margin:auto;
box-shadow:0 60px 160px var(--shadow),0 0 0 1px var(--border);
transform:translateY(32px) scale(.97);
transition:transform .38s var(--spring);
overflow:hidden;position:relative;
}
body[data-page="sports"] .modal-overlay.open .modal{transform:translateY(0) scale(1)}
/* Progress */
body[data-page="sports"] .modal-progress{position:sticky;top:0;left:0;right:0;height:3px;z-index:10;background:var(--border)}
body[data-page="sports"] .modal-progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--cyan));width:0%;transition:width .08s linear}
/* Album art hero */
body[data-page="sports"] .modal-art{
width:100%;height:260px;
display:flex;align-items:center;justify-content:center;
font-size:7rem;position:relative;overflow:hidden;
}
body[data-page="sports"] .modal-art::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 30%,var(--card) 100%);
}
body[data-page="sports"] .modal-art-emoji{position:relative;z-index:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
body[data-page="sports"] .modal-close{
position:absolute;top:16px;right:16px;z-index:20;
width:38px;height:38px;border-radius:50%;
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
color:white;display:flex;align-items:center;justify-content:center;
cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;
}
body[data-page="sports"] .modal-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.15)}
body[data-page="sports"] .modal-close svg{width:14px;height:14px}
body[data-page="sports"] .modal-body{padding:0 44px 52px}
body[data-page="sports"] .modal-section-tag{
font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--orange-bright);margin-bottom:12px;
display:flex;align-items:center;gap:8px;
}
body[data-page="sports"] .modal-section-tag::before{content:'';display:block;width:18px;height:1px;background:var(--orange-bright)}
/* Review specific */
body[data-page="sports"] .modal-album-info{
display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
body[data-page="sports"] .modal-album-art-sm{
width:60px;height:60px;border-radius:10px;
background:linear-gradient(135deg,var(--orange-dark),#0A0518);
display:flex;align-items:center;justify-content:center;
font-size:1.8rem;flex-shrink:0;border:1px solid var(--border-b);
}
body[data-page="sports"] .modal-album-title{
font-family:'Cormorant Garamond',serif;
font-size:1rem;font-weight:700;color:var(--fg);
}
body[data-page="sports"] .modal-album-artist{font-size:.82rem;color:var(--fg-2);margin-top:2px}
body[data-page="sports"] .modal-album-meta{font-size:.72rem;color:var(--fg-3);margin-top:3px;font-family:'DM Mono',monospace}
body[data-page="sports"] .modal-rating-row{
display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
body[data-page="sports"] .modal-stars{display:flex;gap:3px}
body[data-page="sports"] .modal-star{font-size:1.1rem;color:var(--gold)}
body[data-page="sports"] .modal-star.empty{color:var(--fg-3);opacity:.35}
body[data-page="sports"] .modal-score{
font-family:'Cormorant Garamond',serif;
font-size:2rem;font-weight:700;color:var(--fg);letter-spacing:-.04em;
}
body[data-page="sports"] .modal-score em{color:var(--gold);font-style:normal}
body[data-page="sports"] .modal-verdict{
font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:3px 10px;border-radius:20px;
}
body[data-page="sports"] .verdict-essential{background:rgba(81,207,102,.15);color:#51CF66}
body[data-page="sports"] .verdict-great{background:rgba(255,107,53,.15);color:var(--orange-bright)}
body[data-page="sports"] .verdict-good{background:rgba(201,168,76,.15);color:var(--gold)}
body[data-page="sports"] .verdict-mixed{background:rgba(255,107,53,.15);color:#FF6B35}
body[data-page="sports"] .modal-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.7rem,4vw,2.6rem);
font-weight:700;line-height:1.1;
letter-spacing:-.04em;color:var(--fg);margin-bottom:16px;
}
body[data-page="sports"] .modal-byline{
display:flex;align-items:center;gap:14px;
padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
margin-bottom:28px;flex-wrap:wrap;
}
body[data-page="sports"] .m-author{display:flex;align-items:center;gap:9px}
body[data-page="sports"] .m-avatar{
width:32px;height:32px;border-radius:50%;
background:var(--bg-3);border:1px solid var(--border-b);
display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
body[data-page="sports"] .m-name{font-size:.82rem;font-weight:600;color:var(--fg)}
body[data-page="sports"] .m-role{font-size:.7rem;color:var(--fg-3)}
body[data-page="sports"] .m-date{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3)}
body[data-page="sports"] .m-readtime{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3);margin-left:auto}
/* Content */
body[data-page="sports"] .modal-content{line-height:1.9}
body[data-page="sports"] .modal-content p{font-size:.94rem;color:var(--fg-2);margin-bottom:18px;font-weight:300}
body[data-page="sports"] .modal-content p strong{color:var(--fg);font-weight:600}
body[data-page="sports"] .modal-content h3{
font-family:'Cormorant Garamond',serif;
font-size:1.35rem;font-weight:700;color:var(--fg);
letter-spacing:-.02em;margin:30px 0 12px;
}
body[data-page="sports"] .modal-content blockquote{
margin:24px 0;padding:18px 22px;
border-left:3px solid var(--orange);
background:rgba(255,107,53,.05);border-radius:0 12px 12px 0;
}
body[data-page="sports"] .modal-content blockquote p{
font-family:'Cormorant Garamond',serif;
font-size:1.1rem;font-style:italic;color:var(--fg);margin-bottom:6px;
}
body[data-page="sports"] .modal-content blockquote cite{font-size:.72rem;color:var(--fg-3);font-style:normal;font-family:'DM Mono',monospace}
body[data-page="sports"] .modal-content .track-list{
background:var(--bg-2);border:1px solid var(--border-b);
border-radius:14px;padding:16px 20px;margin:22px 0;
}
body[data-page="sports"] .modal-content .tl-title{
font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--fg-3);margin-bottom:12px;
}
body[data-page="sports"] .modal-content .tl-row{
display:flex;align-items:center;gap:12px;
padding:8px 0;border-bottom:1px solid var(--border);
}
body[data-page="sports"] .modal-content .tl-row:last-child{border-bottom:none}
body[data-page="sports"] .modal-content .tl-num{
font-family:'DM Mono',monospace;font-size:.66rem;
color:var(--fg-3);width:18px;flex-shrink:0;
}
body[data-page="sports"] .modal-content .tl-name{font-size:.84rem;color:var(--fg);flex:1}
body[data-page="sports"] .modal-content .tl-highlight{color:var(--orange-bright);font-weight:500}
body[data-page="sports"] .modal-content .tl-dur{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--fg-3)}
body[data-page="sports"] .modal-footer{
margin-top:36px;padding-top:20px;
border-top:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="sports"] .modal-share{display:flex;gap:8px}
body[data-page="sports"] .share-btn{
background:none;border:1px solid var(--border-b);border-radius:20px;
padding:7px 16px;font-size:.74rem;font-weight:500;color:var(--fg-2);
cursor:pointer;transition:all .2s;
}
body[data-page="sports"] .share-btn:hover{border-color:var(--orange);color:var(--orange)}
body[data-page="sports"] .modal-next-btn{
font-size:.76rem;color:var(--fg-3);cursor:pointer;
background:none;border:none;transition:color .2s;
font-family:'DM Mono',monospace;letter-spacing:.04em;
display:flex;align-items:center;gap:6px;
}
body[data-page="sports"] .modal-next-btn:hover{color:var(--orange-bright)}
/* ══════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════ */
body[data-page="sports"] footer{background:var(--near-black);padding:40px 0}
body[data-page="sports"] .f-inner{
max-width:1200px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="sports"] .f-brand{
font-family:'Cormorant Garamond',serif;
font-size:1.3rem;font-weight:700;color:white;letter-spacing:-.01em;
}
body[data-page="sports"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="sports"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="sports"] .f-home:hover{color:white}
/* ══════════════════════════════════════════════════
REVEAL
══════════════════════════════════════════════════ */
body[data-page="sports"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="sports"] .reveal.visible{opacity:1;transform:none}
body[data-page="sports"] .rd1{transition-delay:.06s}body[data-page="sports"] .rd2{transition-delay:.12s}body[data-page="sports"] .rd3{transition-delay:.18s}
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
/* (cursor system styles live in the global section near the top of this file) */
@media(max-width:960px){
body[data-page="sports"] .hero-inner{grid-template-columns:1fr;gap:48px;padding:50px 24px 60px}
body[data-page="sports"] .art-grid{grid-template-columns:repeat(2,1fr)}
body[data-page="sports"] .filter-inner{padding:0 20px;gap:10px}
body[data-page="sports"] .mode-bar-inner{padding:0 20px}
}
@media(max-width:640px){
body[data-page="sports"] nav{padding:0 16px}
body[data-page="sports"] .art-inner{padding:0 16px}
body[data-page="sports"] .art-grid{grid-template-columns:1fr}
body[data-page="sports"] .fpills{max-width:180px}
body[data-page="sports"] .fcount{display:none}
body[data-page="sports"] .fsort{display:none}
body[data-page="sports"] .f-inner{flex-direction:column;align-items:flex-start}
/* Desk switcher: keep both tabs on-screen on a phone. */
body[data-page="sports"] .mode-bar-inner{padding:0 12px}
body[data-page="sports"] .mode-tab{
flex:1;min-width:0;justify-content:center;
padding:0 8px;gap:6px;font-size:.8rem;
overflow:hidden;text-overflow:ellipsis;
}
body[data-page="sports"] .mode-tab .mt-count{padding:1px 6px;font-size:.6rem;flex-shrink:0}
body[data-page="sports"] .mode-tab .mt-icon{flex-shrink:0;font-size:1rem}
}
/* (cursor system styles live in the global section near the top of this file) */
/* ═══════════════════════════════════════════════════
PAGE: JOURNALISM (journalism.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="journalism"]{
font-family:'DM Sans',sans-serif;
background:var(--bg);color:var(--fg);
overflow-x:hidden;
transition:background .45s,color .45s;
min-height:100vh;
}
body[data-page="journalism"] button, body[data-page="journalism"] input, body[data-page="journalism"] select{font-family:inherit}
/* ══════════════════════════════════════════════════
TOKENS
══════════════════════════════════════════════════ */
body[data-page="journalism"]{
--ink:#1A1A1E;
--paper:#F8F5EE;
--red:#D0021B;
--red-bright:#FF1F3D;
--gold:#B8860B;
--blue-link:#1A4A8A;
--near-black:#080809;
--ease:cubic-bezier(.25,.46,.45,.94);
--spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"] body[data-page="journalism"]{
--bg:#F8F5EE;
--bg-2:#EEE9DC;
--bg-3:#E2DAC8;
--fg:#1A1A1E;
--fg-2:#3A3830;
--fg-3:#7A7468;
--border:rgba(26,26,30,.1);
--border-b:rgba(26,26,30,.18);
--shadow:rgba(0,0,0,.12);
--glow:rgba(208,2,27,.1);
--card:rgba(255,252,245,.99);
--nav-bg:rgba(248,245,238,.95);
--overlay:rgba(244,241,234,.97);
--rule-color:#1A1A1E;
--masthead-bg:#1A1A1E;
--pull-bg:rgba(208,2,27,.04);
}
html[data-theme="dark"] body[data-page="journalism"]{
--bg:#0D0D0F;
--bg-2:#141418;
--bg-3:#1E1E24;
--fg:#E8E4DA;
--fg-2:#A09A90;
--fg-3:#5A5450;
--border:rgba(255,255,255,.08);
--border-b:rgba(255,255,255,.14);
--shadow:rgba(0,0,0,.7);
--glow:rgba(208,2,27,.2);
--card:rgba(18,18,22,.98);
--nav-bg:rgba(13,13,15,.95);
--overlay:rgba(8,8,10,.97);
--rule-color:rgba(255,255,255,.15);
--masthead-bg:#0D0D0F;
--pull-bg:rgba(208,2,27,.06);
}
/* ══════════════════════════════════════════════════
RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="journalism"] .rainbow-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
background:linear-gradient(90deg,
#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
#51CF66 42%,#339AF0 56%,#845EF7 70%,
#FF3B3B 84%,#FF6B35 100%);
background-size:200% 100%;
animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}
/* ══════════════════════════════════════════════════
NAV
══════════════════════════════════════════════════ */
body[data-page="journalism"] nav{
position:fixed;top:3px;left:0;right:0;z-index:1000;
background:var(--nav-bg);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid var(--border);
transition:background .45s;
}
body[data-page="journalism"] .nav-inner{
max-width:1280px;margin:0 auto;padding:0 32px;
display:flex;align-items:center;justify-content:space-between;
height:58px;
}
body[data-page="journalism"] .nav-logo{
font-family:'Libre Baskerville',serif;
font-weight:700;font-size:1.1rem;
color:var(--fg);text-decoration:none;
letter-spacing:.01em;
display:flex;align-items:center;gap:10px;
}
body[data-page="journalism"] .nav-logo .logo-divider{
width:1px;height:18px;
background:var(--border-b);
}
body[data-page="journalism"] .nav-logo .logo-dept{
font-weight:400;font-size:.85rem;
color:var(--fg-2);font-style:italic;
}
body[data-page="journalism"] .nav-links{display:flex;align-items:center;gap:2px}
body[data-page="journalism"] .nav-link{
color:var(--fg-2);text-decoration:none;
font-size:.78rem;font-weight:500;
padding:6px 12px;border-radius:20px;
transition:all .2s;
}
body[data-page="journalism"] .nav-link:hover{color:var(--fg);background:var(--border)}
body[data-page="journalism"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="journalism"] .nav-pill{
background:var(--border);border:1px solid var(--border-b);
border-radius:20px;padding:6px 14px;
font-size:.78rem;font-weight:500;color:var(--fg-2);
cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="journalism"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
/* ══════════════════════════════════════════════════
MASTHEAD
══════════════════════════════════════════════════ */
body[data-page="journalism"] .masthead{
background:var(--masthead-bg);
padding:61px 0 0;
position:relative;overflow:hidden;
}
/* Texture: subtle halftone */
body[data-page="journalism"] .masthead::before{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:20px 20px;
}
body[data-page="journalism"] .masthead-inner{
max-width:1280px;margin:0 auto;padding:48px 40px 0;
display:flex;flex-direction:column;align-items:center;
position:relative;z-index:2;
}
/* Edition info line */
body[data-page="journalism"] .edition-line{
display:flex;align-items:center;gap:20px;
font-family:'DM Mono',monospace;
font-size:.65rem;color:rgba(255,255,255,.3);
letter-spacing:.1em;text-transform:uppercase;
margin-bottom:20px;
width:100%;justify-content:center;
}
body[data-page="journalism"] .edition-rule{flex:1;height:1px;background:rgba(255,255,255,.1)}
/* Newspaper nameplate */
body[data-page="journalism"] .nameplate{
text-align:center;
border-top:3px solid rgba(255,255,255,.9);
border-bottom:1px solid rgba(255,255,255,.3);
padding:20px 0 16px;
margin-bottom:16px;
width:100%;
}
body[data-page="journalism"] .nameplate-title{
font-family:'Libre Baskerville',serif;
font-size:clamp(2.8rem,8vw,7rem);
font-weight:700;color:white;
letter-spacing:-.02em;line-height:.9;
text-transform:uppercase;
}
body[data-page="journalism"] .nameplate-sub{
font-family:'Libre Baskerville',serif;
font-size:.85rem;color:rgba(255,255,255,.45);
font-style:italic;margin-top:6px;letter-spacing:.04em;
}
/* Tagline row */
body[data-page="journalism"] .masthead-tagline-row{
display:flex;align-items:center;justify-content:space-between;
width:100%;padding:10px 0 0;
border-top:1px solid rgba(255,255,255,.12);
font-family:'DM Mono',monospace;font-size:.62rem;
color:rgba(255,255,255,.25);letter-spacing:.08em;text-transform:uppercase;
margin-bottom:32px;
}
/* Hero article in masthead */
body[data-page="journalism"] .masthead-hero{
display:grid;grid-template-columns:1.4fr 1fr;
gap:0;width:100%;
border-top:2px solid rgba(255,255,255,.15);
}
body[data-page="journalism"] .mh-main{
padding:28px 36px 28px 0;
border-right:1px solid rgba(255,255,255,.1);
}
body[data-page="journalism"] .mh-side{
padding:28px 0 28px 36px;
display:flex;flex-direction:column;gap:24px;
}
body[data-page="journalism"] .mh-label{
font-family:'DM Mono',monospace;
font-size:.62rem;color:var(--red);
letter-spacing:.12em;text-transform:uppercase;
font-weight:500;margin-bottom:10px;
display:flex;align-items:center;gap:6px;
}
body[data-page="journalism"] .mh-label::before{content:'';display:block;width:14px;height:1px;background:var(--red)}
body[data-page="journalism"] .mh-label.breaking{
color:white;background:var(--red);
padding:2px 10px;border-radius:4px;display:inline-flex;
}
body[data-page="journalism"] .mh-label.breaking::before{display:none}
body[data-page="journalism"] .mh-headline{
font-family:'Libre Baskerville',serif;
font-size:clamp(1.8rem,3.5vw,3rem);
font-weight:700;color:white;
line-height:1.1;letter-spacing:-.03em;
margin-bottom:12px;cursor:pointer;
transition:color .2s;
}
body[data-page="journalism"] .mh-headline:hover{color:rgba(255,255,255,.8)}
body[data-page="journalism"] .mh-deck{
font-size:.92rem;color:rgba(255,255,255,.5);
line-height:1.7;font-weight:300;margin-bottom:14px;
max-width:480px;
}
body[data-page="journalism"] .mh-byline{
font-family:'DM Mono',monospace;
font-size:.65rem;color:rgba(255,255,255,.3);
letter-spacing:.06em;text-transform:uppercase;
}
body[data-page="journalism"] .mh-byline span{color:rgba(255,255,255,.5)}
/* Side stories */
body[data-page="journalism"] .mh-side-story{
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,.08);
cursor:pointer;
transition:opacity .2s;
}
body[data-page="journalism"] .mh-side-story:last-child{border-bottom:none;padding-bottom:0}
body[data-page="journalism"] .mh-side-story:hover{opacity:.75}
body[data-page="journalism"] .mhs-headline{
font-family:'Libre Baskerville',serif;
font-size:1rem;font-weight:700;
color:white;line-height:1.25;margin-bottom:5px;
letter-spacing:-.015em;
}
body[data-page="journalism"] .mhs-deck{
font-size:.78rem;color:rgba(255,255,255,.35);
line-height:1.6;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="journalism"] .mhs-meta{
font-family:'DM Mono',monospace;font-size:.6rem;
color:rgba(255,255,255,.25);letter-spacing:.06em;
margin-top:6px;
}
/* ══════════════════════════════════════════════════
SECTION DIVIDERS (newspaper-style rules)
══════════════════════════════════════════════════ */
body[data-page="journalism"] .section-rule{
display:flex;align-items:center;gap:0;
margin:0;padding:0;
}
body[data-page="journalism"] .rule-thick{height:4px;background:var(--fg);flex:1}
body[data-page="journalism"] .rule-thin{height:1px;background:var(--border-b);flex:1;margin-top:2px}
body[data-page="journalism"] .rule-label{
font-family:'Libre Baskerville',serif;
font-size:.72rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;
color:white;background:var(--fg);
padding:4px 14px;flex-shrink:0;
}
/* ══════════════════════════════════════════════════
FILTER / SEARCH BAR
══════════════════════════════════════════════════ */
body[data-page="journalism"] .filter-bar{
background:var(--bg-2);
border-top:2px solid var(--fg);
border-bottom:1px solid var(--border);
position:sticky;top:61px;z-index:900;
transition:background .45s;
}
body[data-page="journalism"] .filter-inner{
max-width:1280px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;gap:14px;height:56px;
}
body[data-page="journalism"] .search-wrap{position:relative;flex-shrink:0;width:280px}
body[data-page="journalism"] .s-icon{
position:absolute;left:13px;top:50%;transform:translateY(-50%);
color:var(--fg-3);pointer-events:none;
}
body[data-page="journalism"] .s-icon svg{width:14px;height:14px}
body[data-page="journalism"] .s-input{
width:100%;background:var(--card);
border:1px solid var(--border-b);
padding:8px 36px 8px 36px;
color:var(--fg);font-size:.83rem;outline:none;
transition:border-color .2s,box-shadow .2s;
font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .s-input::placeholder{color:var(--fg-3)}
body[data-page="journalism"] .s-input:focus{
border-color:var(--red);
box-shadow:0 0 0 3px rgba(208,2,27,.1);
}
body[data-page="journalism"] .s-clear{
position:absolute;right:11px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--fg-3);cursor:pointer;
display:none;padding:2px;
}
body[data-page="journalism"] .s-clear svg{width:13px;height:13px;display:block}
body[data-page="journalism"] .s-clear.show{display:block}
/* Desk pills */
body[data-page="journalism"] .desk-pills{
display:flex;gap:6px;overflow-x:auto;
scrollbar-width:none;flex:1;
}
body[data-page="journalism"] .desk-pills::-webkit-scrollbar{display:none}
body[data-page="journalism"] .desk-pill{
background:none;border:1px solid var(--border-b);
padding:6px 16px;
font-size:.76rem;font-weight:500;color:var(--fg-2);
cursor:pointer;white-space:nowrap;
transition:all .2s;
font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .desk-pill:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="journalism"] .desk-pill.active{
background:var(--fg);color:var(--bg);
border-color:var(--fg);
}
body[data-page="journalism"] .sort-sel{
background:var(--card);border:1px solid var(--border-b);
padding:7px 14px;color:var(--fg-2);font-size:.76rem;outline:none;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;
padding-right:28px;cursor:pointer;transition:border-color .2s;
font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .sort-sel:focus{border-color:var(--red)}
body[data-page="journalism"] .result-count{
font-family:'DM Mono',monospace;font-size:.72rem;
color:var(--fg-3);white-space:nowrap;flex-shrink:0;
}
body[data-page="journalism"] .result-count span{color:var(--fg);font-weight:500}
/* view toggle */
body[data-page="journalism"] .view-btns{display:flex;gap:2px}
body[data-page="journalism"] .vbtn{
background:none;border:1px solid var(--border-b);
padding:7px 9px;color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="journalism"] .vbtn svg{width:13px;height:13px;display:block}
body[data-page="journalism"] .vbtn:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="journalism"] .vbtn.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* ══════════════════════════════════════════════════
ARTICLES SECTION
══════════════════════════════════════════════════ */
body[data-page="journalism"] .articles-section{padding:48px 0 100px;background:var(--bg)}
body[data-page="journalism"] .art-inner{max-width:1280px;margin:0 auto;padding:0 40px}
body[data-page="journalism"] .art-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;border-top:2px solid var(--fg);
border-left:1px solid var(--border);
}
body[data-page="journalism"] .art-grid.list-mode{
grid-template-columns:1fr;
border-left:none;
}
/* ── Article Card ──────────────────────────────── */
body[data-page="journalism"] .art-card{
border-right:1px solid var(--border);
border-bottom:1px solid var(--border);
padding:24px;
background:var(--card);
cursor:pointer;
transition:background .2s;
display:flex;flex-direction:column;
position:relative;
}
body[data-page="journalism"] .art-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--desk-color,var(--red));
transform:scaleX(0);transform-origin:left;
transition:transform .3s var(--ease);
}
body[data-page="journalism"] .art-card:hover::before{transform:scaleX(1)}
body[data-page="journalism"] .art-card:hover{background:var(--bg)}
body[data-page="journalism"] .art-card:hover .art-headline{text-decoration:underline;text-decoration-color:var(--red)}
body[data-page="journalism"] .art-thumb{
width:100%;aspect-ratio:16/9;
margin:-24px -24px 16px;width:calc(100% + 48px);
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;flex-shrink:0;
background:linear-gradient(135deg,#141020,#201830);
font-size:3rem;
}
body[data-page="journalism"] .art-thumb-img{
width:100%;height:100%;object-fit:cover;display:block;
}
body[data-page="journalism"] .art-thumb-emoji{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;
filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
/* List mode: small square thumb on the left */
body[data-page="journalism"] .art-grid.list-mode .art-thumb{
width:84px;height:84px;aspect-ratio:1;margin:0;
border-radius:8px;flex-shrink:0;font-size:1.6rem;
}
body[data-page="journalism"] .art-card-text{
display:flex;flex-direction:column;flex:1;
}
body[data-page="journalism"] .art-cat{
font-family:'DM Mono',monospace;
font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:var(--desk-color,var(--red));
margin-bottom:10px;
display:flex;align-items:center;gap:6px;
}
body[data-page="journalism"] .art-cat-dot{
width:5px;height:5px;border-radius:50%;
background:var(--desk-color,var(--red));flex-shrink:0;
}
body[data-page="journalism"] .art-headline{
font-family:'Libre Baskerville',serif;
font-size:1.1rem;font-weight:700;
color:var(--fg);line-height:1.25;
letter-spacing:-.015em;margin-bottom:10px;
display:-webkit-box;-webkit-line-clamp:3;
-webkit-box-orient:vertical;overflow:hidden;
transition:text-decoration .2s;
}
body[data-page="journalism"] .art-deck{
font-size:.8rem;color:var(--fg-2);
line-height:1.65;flex:1;margin-bottom:16px;
display:-webkit-box;-webkit-line-clamp:3;
-webkit-box-orient:vertical;overflow:hidden;
font-weight:300;
}
body[data-page="journalism"] .art-byline{
font-family:'DM Mono',monospace;font-size:.62rem;
color:var(--fg-3);letter-spacing:.04em;
border-top:1px solid var(--border);padding-top:12px;margin-top:auto;
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
body[data-page="journalism"] .art-author-name{color:var(--fg-2);font-weight:500;font-style:normal}
body[data-page="journalism"] .art-tag-pill{
margin-left:auto;
font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
background:var(--bg-2);color:var(--fg-3);
padding:2px 7px;
}
/* List mode */
body[data-page="journalism"] .art-grid.list-mode .art-card{
flex-direction:row;gap:20px;align-items:flex-start;
border-right:none;padding:20px 4px;
border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .art-grid.list-mode .art-card::before{display:none}
body[data-page="journalism"] .art-grid.list-mode .art-card:hover .art-headline{text-decoration:underline}
body[data-page="journalism"] .art-grid.list-mode .art-card:hover{background:transparent}
body[data-page="journalism"] .art-grid.list-mode .art-deck{display:none}
body[data-page="journalism"] .art-grid.list-mode .art-headline{-webkit-line-clamp:1;font-size:.95rem}
body[data-page="journalism"] .art-grid.list-mode .art-card-text{
display:flex;flex-direction:column;flex:1;min-width:0;
}
/* In list mode the byline sits directly under the headline, left-aligned —
no flex-push to the far right, no top border/auto margin. */
body[data-page="journalism"] .art-grid.list-mode .art-byline{
border-top:none;padding-top:0;margin-top:6px;
}
body[data-page="journalism"] .art-grid.list-mode .art-tag-pill{margin-left:0}
/* No results */
body[data-page="journalism"] .no-res{
grid-column:1/-1;text-align:center;
padding:80px 0;display:none;
border-right:1px solid var(--border);
border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .no-res.show{display:block}
body[data-page="journalism"] .nr-icon{font-size:2.5rem;margin-bottom:12px;opacity:.3}
body[data-page="journalism"] .nr-title{
font-family:'Libre Baskerville',serif;
font-size:1.5rem;color:var(--fg-2);margin-bottom:6px;
}
body[data-page="journalism"] .nr-sub{font-size:.85rem;color:var(--fg-3)}
/* Load more */
body[data-page="journalism"] .load-wrap{
text-align:center;margin-top:40px;
padding-top:32px;border-top:1px solid var(--border);
}
body[data-page="journalism"] .load-btn{
background:none;border:2px solid var(--fg);
padding:13px 40px;
font-family:'Libre Baskerville',serif;
font-size:.9rem;font-weight:700;color:var(--fg);
cursor:pointer;transition:all .25s var(--spring);
letter-spacing:.04em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
}
body[data-page="journalism"] .load-btn:hover{
background:var(--fg);color:var(--bg);
transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow);
}
body[data-page="journalism"] .load-btn.hidden{display:none}
/* ══════════════════════════════════════════════════
ABOUT SECTION
══════════════════════════════════════════════════ */
body[data-page="journalism"] .about-section{
padding:80px 0;background:var(--bg-2);
border-top:2px solid var(--fg);
border-bottom:2px solid var(--fg);
}
body[data-page="journalism"] .about-inner{
max-width:1280px;margin:0 auto;padding:0 40px;
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
}
body[data-page="journalism"] .about-col{
padding:0 40px;
border-right:1px solid var(--border);
}
body[data-page="journalism"] .about-col:first-child{padding-left:0}
body[data-page="journalism"] .about-col:last-child{border-right:none}
body[data-page="journalism"] .about-label{
font-family:'DM Mono',monospace;
font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--red);margin-bottom:12px;
}
body[data-page="journalism"] .about-title{
font-family:'Libre Baskerville',serif;
font-size:1.4rem;font-weight:700;color:var(--fg);
letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;
}
body[data-page="journalism"] .about-body{font-size:.84rem;color:var(--fg-2);line-height:1.8;font-weight:300}
body[data-page="journalism"] .about-stat{
margin-top:20px;padding-top:16px;
border-top:1px solid var(--border);
}
body[data-page="journalism"] .as-val{
font-family:'Libre Baskerville',serif;
font-size:2.5rem;font-weight:700;color:var(--fg);
letter-spacing:-.04em;line-height:1;
}
body[data-page="journalism"] .as-val em{color:var(--red);font-style:normal}
body[data-page="journalism"] .as-lbl{
font-size:.68rem;font-weight:600;text-transform:uppercase;
letter-spacing:.08em;color:var(--fg-3);margin-top:4px;
}
/* ══════════════════════════════════════════════════
ARTICLE MODAL
══════════════════════════════════════════════════ */
body[data-page="journalism"] .modal-overlay{
position:fixed;inset:0;z-index:2000;
background:var(--overlay);
backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
display:flex;align-items:flex-start;justify-content:center;
padding:20px;overflow-y:auto;
opacity:0;pointer-events:none;
transition:opacity .3s var(--ease);
}
body[data-page="journalism"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="journalism"] .modal{
background:var(--card);
border:1px solid var(--border-b);
width:100%;max-width:780px;
margin:auto;
box-shadow:0 60px 160px var(--shadow);
transform:translateY(32px) scale(.98);
transition:transform .38s var(--spring);
position:relative;overflow:hidden;
}
body[data-page="journalism"] .modal-overlay.open .modal{transform:translateY(0) scale(1)}
/* Reading progress */
body[data-page="journalism"] .modal-progress{position:sticky;top:0;left:0;right:0;height:3px;z-index:10;background:var(--border)}
body[data-page="journalism"] .modal-progress-fill{height:100%;background:var(--red);width:0%;transition:width .08s linear}
/* Modal masthead strip */
body[data-page="journalism"] .modal-masthead{
background:var(--fg);
padding:18px 44px;
display:flex;align-items:center;justify-content:space-between;
}
body[data-page="journalism"] .modal-pub{
font-family:'Libre Baskerville',serif;
font-size:.85rem;font-weight:700;
color:var(--bg);letter-spacing:.04em;text-transform:uppercase;
}
body[data-page="journalism"] .modal-close{
width:32px;height:32px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.2);
color:var(--bg);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .2s;flex-shrink:0;
}
body[data-page="journalism"] .modal-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
body[data-page="journalism"] .modal-close svg{width:14px;height:14px}
body[data-page="journalism"] .modal-body{padding:40px 44px 56px}
body[data-page="journalism"] .modal-desk{
font-family:'DM Mono',monospace;font-size:.62rem;
color:var(--red);letter-spacing:.12em;text-transform:uppercase;
margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
body[data-page="journalism"] .modal-headline{
font-family:'Libre Baskerville',serif;
font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:700;line-height:1.1;
letter-spacing:-.04em;color:var(--fg);margin-bottom:14px;
}
body[data-page="journalism"] .modal-deck{
font-family:'Libre Baskerville',serif;
font-size:1.05rem;color:var(--fg-2);
line-height:1.6;font-style:italic;
font-weight:400;margin-bottom:20px;
padding-bottom:20px;border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .modal-byline{
display:flex;align-items:center;gap:16px;
margin-bottom:32px;flex-wrap:wrap;
}
body[data-page="journalism"] .modal-author{display:flex;align-items:center;gap:10px}
body[data-page="journalism"] .author-avatar{
width:36px;height:36px;
border:1px solid var(--border-b);
background:var(--bg-3);
display:flex;align-items:center;justify-content:center;
font-size:1rem;flex-shrink:0;
}
body[data-page="journalism"] .author-name{
font-family:'Libre Baskerville',serif;
font-size:.85rem;font-weight:700;color:var(--fg);
}
body[data-page="journalism"] .author-role{font-size:.72rem;color:var(--fg-3);margin-top:1px}
body[data-page="journalism"] .modal-date{
font-family:'DM Mono',monospace;
font-size:.68rem;color:var(--fg-3);
}
body[data-page="journalism"] .modal-read-time{
font-family:'DM Mono',monospace;
font-size:.68rem;color:var(--fg-3);
margin-left:auto;
}
/* Article content typography — newspaper style */
body[data-page="journalism"] .modal-content{line-height:1.9;column-gap:40px}
body[data-page="journalism"] .modal-content p{
font-size:.95rem;color:var(--fg-2);
margin-bottom:18px;font-weight:300;
font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .modal-content p strong{color:var(--fg);font-weight:600}
body[data-page="journalism"] .modal-content h3{
font-family:'Libre Baskerville',serif;
font-size:1.25rem;font-weight:700;
color:var(--fg);letter-spacing:-.02em;
margin:32px 0 12px;
padding-bottom:8px;border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .modal-content blockquote{
margin:28px 0;
border-left:3px solid var(--red);
padding:20px 24px;
background:var(--pull-bg);
}
body[data-page="journalism"] .modal-content blockquote p{
font-family:'Libre Baskerville',serif;
font-size:1.1rem;font-style:italic;
color:var(--fg);margin-bottom:8px;font-weight:400;
}
body[data-page="journalism"] .modal-content blockquote cite{
font-family:'DM Mono',monospace;
font-size:.68rem;color:var(--fg-3);font-style:normal;letter-spacing:.04em;
}
body[data-page="journalism"] .modal-content .data-box{
background:var(--bg-2);
border:1px solid var(--border-b);
border-top:3px solid var(--fg);
padding:20px 24px;margin:28px 0;
}
body[data-page="journalism"] .modal-content .data-box-title{
font-family:'Libre Baskerville',serif;
font-size:.8rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;
color:var(--fg);margin-bottom:14px;
}
body[data-page="journalism"] .modal-content .data-row{
display:flex;align-items:baseline;gap:12px;
padding:8px 0;border-top:1px solid var(--border);
}
body[data-page="journalism"] .modal-content .data-row:first-of-type{border-top:none}
body[data-page="journalism"] .modal-content .dr-label{font-size:.78rem;color:var(--fg-2);flex:1}
body[data-page="journalism"] .modal-content .dr-val{
font-family:'Libre Baskerville',serif;
font-size:1rem;font-weight:700;color:var(--fg);
}
body[data-page="journalism"] .modal-content .dr-val em{color:var(--red);font-style:normal}
body[data-page="journalism"] .modal-footer{
margin-top:40px;padding-top:24px;
border-top:2px solid var(--fg);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:14px;
}
body[data-page="journalism"] .modal-share{display:flex;gap:8px}
body[data-page="journalism"] .share-btn{
background:none;border:1px solid var(--border-b);
padding:7px 16px;font-size:.75rem;font-weight:500;
color:var(--fg-2);cursor:pointer;transition:all .2s;
font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .share-btn:hover{border-color:var(--red);color:var(--red)}
body[data-page="journalism"] .modal-next-btn{
display:flex;align-items:center;gap:6px;
font-family:'DM Mono',monospace;font-size:.72rem;
color:var(--fg-3);cursor:pointer;background:none;border:none;
transition:color .2s;letter-spacing:.04em;text-transform:uppercase;
}
body[data-page="journalism"] .modal-next-btn:hover{color:var(--fg)}
/* ══════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════ */
body[data-page="journalism"] footer{
background:var(--fg);
padding:40px 0;
}
body[data-page="journalism"] .f-inner{
max-width:1280px;margin:0 auto;padding:0 40px;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="journalism"] .f-brand{
font-family:'Libre Baskerville',serif;
font-size:1.2rem;font-weight:700;color:var(--bg);letter-spacing:.02em;
text-transform:uppercase;
}
body[data-page="journalism"] .f-copy{font-size:.74rem;color:rgba(var(--bg),.4);opacity:.4;color:var(--bg)}
body[data-page="journalism"] .f-home{
color:var(--bg);text-decoration:none;
font-size:.78rem;font-weight:500;
opacity:.45;transition:opacity .2s;
}
body[data-page="journalism"] .f-home:hover{opacity:.9}
/* ══════════════════════════════════════════════════
REVEAL
══════════════════════════════════════════════════ */
body[data-page="journalism"] .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="journalism"] .reveal.visible{opacity:1;transform:none}
body[data-page="journalism"] .rd1{transition-delay:.07s}body[data-page="journalism"] .rd2{transition-delay:.14s}body[data-page="journalism"] .rd3{transition-delay:.21s}
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
/* (cursor system styles live in the global section near the top of this file) */
@media(max-width:960px){
body[data-page="journalism"] .masthead-hero{grid-template-columns:1fr;gap:0}
body[data-page="journalism"] .mh-main{border-right:none;padding-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
body[data-page="journalism"] .mh-side{padding-left:0;padding-top:24px}
body[data-page="journalism"] .art-grid{grid-template-columns:repeat(2,1fr)}
body[data-page="journalism"] .about-inner{grid-template-columns:1fr;gap:0}
body[data-page="journalism"] .about-col{padding:24px 0;border-right:none;border-top:1px solid var(--border)}
body[data-page="journalism"] .about-col:first-child{padding-top:0;border-top:none}
}
@media(max-width:640px){
body[data-page="journalism"] nav{padding:0}
body[data-page="journalism"] .nav-inner{padding:0 16px}
body[data-page="journalism"] .art-inner{padding:0 16px}
body[data-page="journalism"] .art-grid{grid-template-columns:1fr}
body[data-page="journalism"] .filter-inner{padding:0 16px;gap:8px}
body[data-page="journalism"] .desk-pills{max-width:150px}
body[data-page="journalism"] .result-count{display:none}
body[data-page="journalism"] .sort-sel{display:none}
body[data-page="journalism"] .masthead-inner{padding:28px 20px 0}
body[data-page="journalism"] .modal-body{padding:24px 20px 40px}
body[data-page="journalism"] .modal-masthead{padding:16px 20px}
body[data-page="journalism"] .f-inner{flex-direction:column;align-items:flex-start}
}
/* (cursor system styles live in the global section near the top of this file) */
/* ═══════════════════════════════════════════════════
PAGE: TEAM (team.html)
═══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="team"]{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;transition:background .45s,color .45s;min-height:100vh}
body[data-page="team"] button, body[data-page="team"] input, body[data-page="team"] textarea{font-family:inherit}
body[data-page="team"]{--red:#D0021B;--red-bright:#FF1F3D;--gold:#C9A84C;--gold-light:#F0C97A;--near-black:#080809;--ease:cubic-bezier(.25,.46,.45,.94);--spring:cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"] body[data-page="team"]{--bg:#08080B;--bg-2:#101016;--bg-3:#181824;--fg:#EDE8F8;--fg-2:#9A94B0;--fg-3:#4A4660;--border:rgba(255,255,255,.07);--border-b:rgba(255,255,255,.13);--shadow:rgba(0,0,0,.7);--glow:rgba(208,2,27,.22);--card:rgba(16,16,24,.97);--nav-bg:rgba(8,8,11,.94)}
html[data-theme="light"] body[data-page="team"]{--bg:#F6F4F0;--bg-2:#ECEAE6;--bg-3:#E0DDD8;--fg:#0A0A0B;--fg-2:#3A3836;--fg-3:#888480;--border:rgba(0,0,0,.08);--border-b:rgba(0,0,0,.15);--shadow:rgba(0,0,0,.1);--glow:rgba(208,2,27,.1);--card:rgba(255,253,250,.99);--nav-bg:rgba(246,244,240,.95)}
body[data-page="team"] .rainbow-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background:linear-gradient(90deg,#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,#51CF66 42%,#339AF0 56%,#845EF7 70%,#FF3B3B 84%,#FF6B35 100%);background-size:200% 100%;animation:rbShift 6s linear infinite}
@keyframes rbShift{to{background-position:200% 0}}
body[data-page="team"] nav{position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;transition:background .45s}
body[data-page="team"] .nav-logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.2rem;color:var(--fg);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
body[data-page="team"] .logo-dot{width:7px;height:7px;border-radius:50%;background:var(--red-bright);animation:ldot 2s ease-in-out infinite}
@keyframes ldot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
body[data-page="team"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="team"] .nav-pill{background:var(--border);border:1px solid var(--border-b);border-radius:20px;padding:6px 14px;font-size:.78rem;font-weight:500;color:var(--fg-2);cursor:pointer;text-decoration:none;transition:all .2s}
body[data-page="team"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
body[data-page="team"] .nav-pill.accent{background:var(--red);color:white;border-color:var(--red)}
body[data-page="team"] .nav-pill.accent:hover{background:var(--red-bright)}
/* HERO */
body[data-page="team"] .hero{min-height:72vh;padding-top:63px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
body[data-page="team"] .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-page="team"] .hb-orb{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
body[data-page="team"] .hb-1{width:600px;height:600px;background:rgba(208,2,27,.09);top:-20%;left:-10%;animation:hbdrift 22s ease-in-out infinite}
body[data-page="team"] .hb-2{width:400px;height:400px;background:rgba(201,168,76,.06);bottom:-5%;right:-5%;animation:hbdrift 18s ease-in-out infinite reverse}
body[data-page="team"] .hb-3{width:300px;height:300px;background:rgba(132,94,247,.04);top:40%;left:50%;animation:hbdrift 26s ease-in-out infinite 4s}
@keyframes hbdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-22px)}}
body[data-page="team"] .hero-bg::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);background-size:30px 30px;opacity:.7}
body[data-page="team"] .hero-content{position:relative;z-index:2;max-width:800px;width:100%;padding:0 40px;text-align:center;animation:heroIn 1s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
body[data-page="team"] .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(208,2,27,.1);border:1px solid rgba(208,2,27,.2);border-radius:20px;padding:5px 14px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright);margin-bottom:24px}
body[data-page="team"] .hero-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.8rem,7vw,6.5rem);line-height:.92;letter-spacing:-.05em;color:var(--fg);margin-bottom:20px}
body[data-page="team"] .hero-title em{color:var(--red-bright);font-style:italic}
body[data-page="team"] .hero-sub{font-size:1.05rem;color:var(--fg-2);line-height:1.75;font-weight:300;max-width:520px;margin:0 auto 44px}
body[data-page="team"] .hero-pills{display:inline-flex;align-items:stretch;background:var(--card);border:1px solid var(--border-b);border-radius:18px;overflow:hidden;box-shadow:0 8px 40px var(--shadow)}
body[data-page="team"] .hpill{padding:16px 28px;text-align:center;border-right:1px solid var(--border)}
body[data-page="team"] .hpill:last-child{border-right:none}
body[data-page="team"] .hpill-num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:900;color:var(--fg);letter-spacing:-.04em;line-height:1}
body[data-page="team"] .hpill-num em{color:var(--red-bright);font-style:normal}
body[data-page="team"] .hpill-lbl{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-top:4px}
/* ORG STRIP */
body[data-page="team"] .org-strip{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 40px;overflow-x:auto;scrollbar-width:none}
body[data-page="team"] .org-strip::-webkit-scrollbar{display:none}
body[data-page="team"] .org-strip-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:0;min-width:max-content}
body[data-page="team"] .org-node{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 22px;border-right:1px solid var(--border)}
body[data-page="team"] .org-node:last-child{border-right:none}
body[data-page="team"] .org-node-dept{font-family:'DM Mono',monospace;font-size:.55rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
body[data-page="team"] .org-node-title{font-size:.75rem;font-weight:600;color:var(--fg);white-space:nowrap}
body[data-page="team"] .org-node-bar{width:28px;height:2px;border-radius:2px;background:var(--nc,var(--red));margin-top:2px}
/* DIRECTORS */
body[data-page="team"] .directors-section{padding:60px 0 100px}
body[data-page="team"] .dir-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="team"] .section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px}
body[data-page="team"] .section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:8px}
body[data-page="team"] .section-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="team"] .section-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.04em;color:var(--fg)}
body[data-page="team"] .section-title em{color:var(--red-bright);font-style:italic}
body[data-page="team"] .directors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* DIRECTOR CARD */
body[data-page="team"] .dir-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px 24px 24px;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;display:flex;flex-direction:column}
body[data-page="team"] .dir-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--dc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
body[data-page="team"] .dir-card:hover::before{transform:scaleX(1)}
body[data-page="team"] .dir-card:hover{transform:translateY(-6px);border-color:var(--border-b);box-shadow:0 20px 60px var(--shadow),0 0 0 1px var(--border-b)}
body[data-page="team"] .dir-card.exec .dir-avatar{border-color:var(--gold)}
body[data-page="team"] .dir-card.exec .dir-avatar::after{content:'✦';position:absolute;bottom:-3px;right:-3px;width:17px;height:17px;border-radius:50%;background:var(--gold);color:#000;font-size:.45rem;display:flex;align-items:center;justify-content:center;line-height:17px;text-align:center}
body[data-page="team"] .dir-dept-tag{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dc,var(--red));margin-bottom:18px}
body[data-page="team"] .dir-dept-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dc,var(--red));flex-shrink:0}
body[data-page="team"] .dir-avatar{width:72px;height:72px;border-radius:50%;background:var(--bg-3);border:2px solid var(--border-b);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:16px;transition:transform .3s var(--spring),box-shadow .3s;position:relative}
body[data-page="team"] .dir-card:hover .dir-avatar{transform:scale(1.1) rotate(4deg);box-shadow:0 0 0 4px rgba(208,2,27,.15)}
body[data-page="team"] .dir-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--fg);letter-spacing:-.015em;margin-bottom:3px}
body[data-page="team"] .dir-title{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dc,var(--red));margin-bottom:12px}
body[data-page="team"] .dir-bio{font-size:.8rem;color:var(--fg-2);line-height:1.65;font-weight:300;flex:1;margin-bottom:16px}
body[data-page="team"] .dir-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
body[data-page="team"] .dir-tag{font-size:.58rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-3);color:var(--fg-3);border-radius:6px;padding:2px 8px}
body[data-page="team"] .dir-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
body[data-page="team"] .dir-year{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--fg-3)}
body[data-page="team"] .dir-badge{font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--dbg,rgba(208,2,27,.08));color:var(--dc,var(--red))}
/* LORE SECTION */
body[data-page="team"] .lore-section{padding:80px 0;background:var(--bg-2);border-top:1px solid var(--border)}
body[data-page="team"] .lore-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
body[data-page="team"] .lore-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="team"] .lore-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="team"] .lore-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.1;letter-spacing:-.04em;color:var(--fg);margin-bottom:16px}
body[data-page="team"] .lore-title em{color:var(--red-bright);font-style:italic}
body[data-page="team"] .lore-body{font-size:.9rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:14px}
body[data-page="team"] .lore-btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:white;border:none;border-radius:50px;padding:13px 32px;font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;letter-spacing:.02em;transition:all .25s var(--spring);margin-top:8px}
body[data-page="team"] .lore-btn:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 8px 30px rgba(208,2,27,.4)}
body[data-page="team"] .values-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body[data-page="team"] .value-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 16px;transition:border-color .25s,transform .25s}
body[data-page="team"] .value-card:hover{border-color:var(--border-b);transform:translateY(-2px)}
body[data-page="team"] .vc-icon{font-size:1.4rem;margin-bottom:8px}
body[data-page="team"] .vc-name{font-size:.8rem;font-weight:700;color:var(--fg);margin-bottom:4px}
body[data-page="team"] .vc-desc{font-size:.72rem;color:var(--fg-3);line-height:1.5}
body[data-page="team"] footer{background:var(--near-black);padding:40px 0}
body[data-page="team"] .f-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
body[data-page="team"] .f-brand{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:900;color:white}
body[data-page="team"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="team"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="team"] .f-home:hover{color:white}
body[data-page="team"] .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
body[data-page="team"] .reveal.visible{opacity:1;transform:none}
body[data-page="team"] .rd1{transition-delay:.07s}body[data-page="team"] .rd2{transition-delay:.14s}body[data-page="team"] .rd3{transition-delay:.21s}
/* (cursor system styles live in the global section near the top of this file) */
/* Director photo support (for when Sanity images are connected) */
body[data-page="team"] .dir-avatar-img{
width: 72px; height: 72px; border-radius: 50%;
object-fit: cover; object-position: center top;
border: 2px solid var(--border-b);
margin-bottom: 16px;
}
@media(max-width:960px){
body[data-page="team"] .directors-grid{grid-template-columns:repeat(2,1fr)}body[data-page="team"] .lore-inner{grid-template-columns:1fr;gap:48px}body[data-page="team"] .org-strip{padding:16px 20px}
}
@media(max-width:640px){
body[data-page="team"] nav{padding:0 16px}body[data-page="team"] .dir-inner{padding:0 16px}body[data-page="team"] .directors-grid{grid-template-columns:1fr}body[data-page="team"] .hero-pills{flex-direction:column;border-radius:16px}body[data-page="team"] .hpill{border-right:none;border-bottom:1px solid var(--border)}body[data-page="team"] .hpill:last-child{border-bottom:none}body[data-page="team"] .values-grid{grid-template-columns:1fr}body[data-page="team"] .f-inner{flex-direction:column;align-items:flex-start}body[data-page="team"] .lore-inner{padding:0 20px}
}
/* (cursor system styles live in the global section near the top of this file) */
/* ═══════════════════════════════════════════════════
PAGE: JOIN (join.html)
═══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="join"]{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;transition:background .45s,color .45s;min-height:100vh}
body[data-page="join"] button, body[data-page="join"] input, body[data-page="join"] textarea, body[data-page="join"] select{font-family:inherit}
body[data-page="join"]{--red:#D0021B;--red-bright:#FF1F3D;--gold:#C9A84C;--near-black:#080809;--ease:cubic-bezier(.25,.46,.45,.94);--spring:cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"] body[data-page="join"]{--bg:#08080B;--bg-2:#101016;--bg-3:#181824;--fg:#EDE8F8;--fg-2:#9A94B0;--fg-3:#4A4660;--border:rgba(255,255,255,.07);--border-b:rgba(255,255,255,.13);--shadow:rgba(0,0,0,.7);--glow:rgba(208,2,27,.22);--card:rgba(16,16,24,.97);--nav-bg:rgba(8,8,11,.94);--input-bg:rgba(24,24,36,.9)}
html[data-theme="light"] body[data-page="join"]{--bg:#F6F4F0;--bg-2:#ECEAE6;--bg-3:#E0DDD8;--fg:#0A0A0B;--fg-2:#3A3836;--fg-3:#888480;--border:rgba(0,0,0,.08);--border-b:rgba(0,0,0,.15);--shadow:rgba(0,0,0,.1);--glow:rgba(208,2,27,.1);--card:rgba(255,253,250,.99);--nav-bg:rgba(246,244,240,.95);--input-bg:rgba(255,252,248,.95)}
/* ── RAINBOW ─────────────────────────────── */
body[data-page="join"] .rainbow-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background:linear-gradient(90deg,#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,#51CF66 42%,#339AF0 56%,#845EF7 70%,#FF3B3B 84%,#FF6B35 100%);background-size:200% 100%;animation:rbShift 6s linear infinite}
@keyframes rbShift{to{background-position:200% 0}}
/* ── NAV ─────────────────────────────────── */
body[data-page="join"] nav{position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;transition:background .45s}
body[data-page="join"] .nav-logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.2rem;color:var(--fg);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
body[data-page="join"] .logo-dot{width:7px;height:7px;border-radius:50%;background:var(--red-bright);animation:ldot 2s ease-in-out infinite}
@keyframes ldot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
body[data-page="join"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="join"] .nav-pill{background:var(--border);border:1px solid var(--border-b);border-radius:20px;padding:6px 14px;font-size:.78rem;font-weight:500;color:var(--fg-2);cursor:pointer;text-decoration:none;transition:all .2s}
body[data-page="join"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
/* ── HERO ────────────────────────────────── */
body[data-page="join"] .hero{
min-height:80vh;padding-top:63px;
display:grid;grid-template-columns:1fr 1fr;
align-items:center;
max-width:1200px;margin:0 auto;
padding:100px 40px 80px;
gap:80px;position:relative;
}
/* Floating waveform decoration */
body[data-page="join"] .hero-deco{
position:absolute;top:120px;right:-60px;
display:flex;align-items:flex-end;gap:4px;
height:80px;opacity:.06;pointer-events:none;
}
body[data-page="join"] .hero-deco-bar{
width:5px;border-radius:3px;
background:var(--red);
animation:heroDeco 2s ease-in-out infinite;
}
body[data-page="join"] .hero-deco-bar:nth-child(1){height:30%;animation-delay:0s}
body[data-page="join"] .hero-deco-bar:nth-child(2){height:60%;animation-delay:.15s}
body[data-page="join"] .hero-deco-bar:nth-child(3){height:100%;animation-delay:.3s}
body[data-page="join"] .hero-deco-bar:nth-child(4){height:70%;animation-delay:.45s}
body[data-page="join"] .hero-deco-bar:nth-child(5){height:45%;animation-delay:.6s}
body[data-page="join"] .hero-deco-bar:nth-child(6){height:80%;animation-delay:.3s}
body[data-page="join"] .hero-deco-bar:nth-child(7){height:55%;animation-delay:.15s}
body[data-page="join"] .hero-deco-bar:nth-child(8){height:25%;animation-delay:0s}
@keyframes heroDeco{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
body[data-page="join"] .hero-text{animation:heroIn 1s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
body[data-page="join"] .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(208,2,27,.1);border:1px solid rgba(208,2,27,.2);border-radius:20px;padding:5px 14px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright);margin-bottom:24px}
body[data-page="join"] .hero-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.8rem,6vw,5.5rem);line-height:.92;letter-spacing:-.05em;color:var(--fg);margin-bottom:20px}
body[data-page="join"] .hero-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .hero-sub{font-size:1rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:36px;max-width:460px}
body[data-page="join"] .hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:white;border:none;border-radius:50px;padding:14px 34px;font-size:.92rem;font-weight:600;cursor:pointer;letter-spacing:.02em;transition:all .25s var(--spring);text-decoration:none}
body[data-page="join"] .hero-cta:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 8px 30px rgba(208,2,27,.4)}
body[data-page="join"] .hero-cta-ghost{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border-b);border-radius:50px;padding:14px 28px;font-size:.88rem;font-weight:500;color:var(--fg-2);cursor:pointer;letter-spacing:.02em;transition:all .2s;text-decoration:none;margin-left:12px}
body[data-page="join"] .hero-cta-ghost:hover{color:var(--fg);border-color:var(--fg-3)}
/* Meeting card on right */
body[data-page="join"] .meeting-card{
background:var(--card);
border:1px solid var(--border-b);
border-radius:28px;
overflow:hidden;
box-shadow:0 30px 80px var(--shadow),0 0 60px var(--glow);
animation:heroIn 1s var(--ease) .2s both;
}
body[data-page="join"] .mc-header{
background:var(--red);
padding:24px 28px;
position:relative;overflow:hidden;
}
body[data-page="join"] .mc-header::before{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,var(--red),#8B0010);
}
/* Animated radio waves on card header */
body[data-page="join"] .mc-header::after{
content:'';position:absolute;
right:-20px;top:50%;transform:translateY(-50%);
width:120px;height:120px;border-radius:50%;
border:1px solid rgba(255,255,255,.1);
animation:wavePulse 3s ease-out infinite;
}
@keyframes wavePulse{0%{transform:translateY(-50%) scale(.5);opacity:.6}100%{transform:translateY(-50%) scale(2);opacity:0}}
body[data-page="join"] .mc-header-content{position:relative;z-index:1}
body[data-page="join"] .mc-header-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
body[data-page="join"] .mc-header-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:900;color:white;letter-spacing:-.03em;margin-bottom:4px}
body[data-page="join"] .mc-header-sub{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:300}
/* Pulsing live dot */
body[data-page="join"] .mc-live{
position:absolute;top:20px;right:24px;z-index:2;
display:flex;align-items:center;gap:6px;
background:rgba(0,0,0,.3);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.15);
border-radius:20px;padding:4px 10px;
font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:white;
}
body[data-page="join"] .mc-live-dot{width:5px;height:5px;border-radius:50%;background:#4AFF7A;animation:mclive 1.5s ease-in-out infinite}
@keyframes mclive{0%,100%{box-shadow:0 0 0 0 rgba(74,255,122,.5)}50%{box-shadow:0 0 0 5px rgba(74,255,122,0)}}
body[data-page="join"] .mc-body{padding:24px 28px}
/* Info rows */
body[data-page="join"] .mc-info-row{
display:flex;align-items:flex-start;gap:14px;
padding:16px 0;border-bottom:1px solid var(--border);
}
body[data-page="join"] .mc-info-row:last-of-type{border-bottom:none}
body[data-page="join"] .mc-info-icon{
width:40px;height:40px;border-radius:12px;
background:var(--bg-3);
display:flex;align-items:center;justify-content:center;
font-size:1.1rem;flex-shrink:0;
border:1px solid var(--border);
}
body[data-page="join"] .mc-info-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:3px}
body[data-page="join"] .mc-info-value{font-size:.92rem;font-weight:600;color:var(--fg);margin-bottom:2px}
body[data-page="join"] .mc-info-sub{font-size:.78rem;color:var(--fg-2);font-weight:300}
/* Countdown */
body[data-page="join"] .mc-countdown{
margin-top:20px;
background:var(--bg-2);border:1px solid var(--border-b);border-radius:14px;
padding:14px 18px;
display:flex;align-items:center;justify-content:space-between;
}
body[data-page="join"] .mc-countdown-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
body[data-page="join"] .mc-countdown-timer{
display:flex;align-items:center;gap:6px;
font-family:'DM Mono',monospace;font-size:.82rem;font-weight:500;color:var(--red-bright);
}
body[data-page="join"] .mc-countdown-seg{text-align:center}
body[data-page="join"] .mc-countdown-num{font-size:1.1rem;font-weight:700;line-height:1}
body[data-page="join"] .mc-countdown-unit{font-size:.52rem;color:var(--fg-3);margin-top:1px}
body[data-page="join"] .mc-countdown-colon{color:var(--border-b);padding-bottom:6px}
/* ── WHAT YOU GET (benefits) ─────────────── */
body[data-page="join"] .benefits-section{
background:var(--bg-2);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
padding:80px 0;
}
body[data-page="join"] .benefits-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="join"] .section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .section-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="join"] .section-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);margin-bottom:48px}
body[data-page="join"] .section-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body[data-page="join"] .benefit-card{
background:var(--card);border:1px solid var(--border);
border-radius:18px;padding:28px 24px;
transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
position:relative;overflow:hidden;
}
body[data-page="join"] .benefit-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--bc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body[data-page="join"] .benefit-card:hover::before{transform:scaleX(1)}
body[data-page="join"] .benefit-card:hover{transform:translateY(-4px);border-color:var(--border-b);box-shadow:0 16px 50px var(--shadow)}
body[data-page="join"] .benefit-icon{font-size:2rem;margin-bottom:16px}
body[data-page="join"] .benefit-title{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--fg);letter-spacing:-.02em;margin-bottom:8px}
body[data-page="join"] .benefit-desc{font-size:.82rem;color:var(--fg-2);line-height:1.7;font-weight:300}
/* ── DEPARTMENTS (which to join) ─────────── */
body[data-page="join"] .depts-section{padding:80px 0;background:var(--bg)}
body[data-page="join"] .depts-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="join"] .depts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
body[data-page="join"] .dept-card{
background:var(--card);border:1px solid var(--border);
border-radius:18px;padding:24px 20px;
cursor:default;transition:all .3s var(--ease);
position:relative;overflow:hidden;
}
body[data-page="join"] .dept-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--dpc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body[data-page="join"] .dept-card:hover::after{transform:scaleX(1)}
body[data-page="join"] .dept-card:hover{transform:translateY(-4px);border-color:var(--border-b);box-shadow:0 14px 40px var(--shadow)}
body[data-page="join"] .dept-card-icon{font-size:2rem;margin-bottom:14px}
body[data-page="join"] .dept-card-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--fg);margin-bottom:6px;letter-spacing:-.02em}
body[data-page="join"] .dept-card-desc{font-size:.78rem;color:var(--fg-2);line-height:1.65;font-weight:300;margin-bottom:14px}
body[data-page="join"] .dept-card-roles{display:flex;flex-wrap:wrap;gap:4px}
body[data-page="join"] .dept-role{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--dpc-bg,rgba(208,2,27,.08));color:var(--dpc,var(--red))}
/* ── GBM / LOCATION SECTION ─────────────── */
body[data-page="join"] .gbm-section{
background:var(--bg-2);
border-top:1px solid var(--border);
padding:80px 0;
}
body[data-page="join"] .gbm-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
body[data-page="join"] .gbm-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .gbm-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="join"] .gbm-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);margin-bottom:16px}
body[data-page="join"] .gbm-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .gbm-body{font-size:.9rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:24px}
/* Location block */
body[data-page="join"] .location-block{
background:var(--card);border:1px solid var(--border-b);
border-radius:20px;overflow:hidden;
box-shadow:0 8px 40px var(--shadow);
}
body[data-page="join"] .location-map-placeholder{
width:100%;height:200px;
background:linear-gradient(135deg,var(--bg-3),var(--bg-2));
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
border-bottom:1px solid var(--border);
}
/* Stylized map grid */
body[data-page="join"] .location-map-placeholder::before{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(var(--border) 1px,transparent 1px),
linear-gradient(90deg,var(--border) 1px,transparent 1px);
background-size:30px 30px;
}
body[data-page="join"] .map-pin{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;gap:4px;
}
body[data-page="join"] .map-pin-icon{
width:44px;height:44px;border-radius:50%;
background:var(--red);
display:flex;align-items:center;justify-content:center;
font-size:1.3rem;
box-shadow:0 4px 20px rgba(208,2,27,.5);
animation:mapBounce 2s ease-in-out infinite;
}
@keyframes mapBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body[data-page="join"] .map-pin-shadow{
width:16px;height:5px;
background:rgba(208,2,27,.3);
border-radius:50%;
filter:blur(2px);
animation:mapShadow 2s ease-in-out infinite;
}
@keyframes mapShadow{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.7);opacity:.3}}
/* Pulse rings */
body[data-page="join"] .map-pin-pulse{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;
border:2px solid rgba(208,2,27,.4);
animation:mapPulse 2s ease-out infinite;
}
body[data-page="join"] .map-pin-pulse-2{animation-delay:.6s;opacity:.6}
@keyframes mapPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
body[data-page="join"] .location-info{padding:20px 24px}
body[data-page="join"] .loc-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
body[data-page="join"] .loc-row:last-child{border-bottom:none}
body[data-page="join"] .loc-icon{width:32px;height:32px;border-radius:10px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;border:1px solid var(--border)}
body[data-page="join"] .loc-label{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
body[data-page="join"] .loc-value{font-size:.88rem;font-weight:600;color:var(--fg)}
body[data-page="join"] .loc-sub{font-size:.75rem;color:var(--fg-2);margin-top:1px;font-weight:300}
/* GBM schedule vis */
body[data-page="join"] .gbm-schedule{margin-top:20px}
body[data-page="join"] .gbm-sched-title{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .gbm-sched-title::before{content:'';display:block;width:14px;height:1px;background:var(--fg-3)}
body[data-page="join"] .gbm-weeks{display:flex;flex-direction:column;gap:8px}
body[data-page="join"] .gbm-week{
display:flex;align-items:center;gap:12px;
padding:12px 16px;border-radius:12px;
border:1px solid var(--border);
transition:all .2s;
}
body[data-page="join"] .gbm-week.meeting{border-color:rgba(208,2,27,.3);background:rgba(208,2,27,.05)}
body[data-page="join"] .gbm-week-label{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--fg-3);flex-shrink:0;width:80px}
body[data-page="join"] .gbm-week-desc{font-size:.8rem;color:var(--fg-2);font-weight:400;flex:1}
body[data-page="join"] .gbm-week-badge{flex-shrink:0;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:8px}
body[data-page="join"] .gbm-week.meeting .gbm-week-badge{background:rgba(208,2,27,.15);color:var(--red-bright);border:1px solid rgba(208,2,27,.3)}
body[data-page="join"] .gbm-week:not(.meeting) .gbm-week-badge{background:var(--bg-3);color:var(--fg-3)}
/* ── APPLICATION FORM ────────────────────── */
body[data-page="join"] .form-section{
padding:80px 0 100px;
background:var(--bg);
}
body[data-page="join"] .form-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
body[data-page="join"] .form-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .form-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="join"] .form-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);margin-bottom:16px}
body[data-page="join"] .form-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .form-body{font-size:.9rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:24px}
/* Process steps */
body[data-page="join"] .process-steps{display:flex;flex-direction:column;gap:0;margin-top:32px}
body[data-page="join"] .process-step{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
body[data-page="join"] .process-step:last-child{border-bottom:none}
body[data-page="join"] .ps-num{
width:28px;height:28px;border-radius:50%;
background:var(--red);color:white;
font-size:.72rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;margin-top:1px;
}
body[data-page="join"] .ps-title{font-size:.88rem;font-weight:600;color:var(--fg);margin-bottom:3px}
body[data-page="join"] .ps-desc{font-size:.78rem;color:var(--fg-2);line-height:1.55;font-weight:300}
/* FORM */
body[data-page="join"] .application-form{
background:var(--card);border:1px solid var(--border-b);
border-radius:24px;padding:36px;
box-shadow:0 20px 60px var(--shadow);
}
body[data-page="join"] .form-section-title{
font-family:'Playfair Display',serif;
font-size:1.1rem;font-weight:700;
color:var(--fg);margin-bottom:20px;
padding-bottom:14px;border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:10px;
}
body[data-page="join"] .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
body[data-page="join"] .form-row.full{grid-template-columns:1fr}
body[data-page="join"] .field-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px;display:block}
body[data-page="join"] .field-label em{color:var(--red-bright);font-style:normal}
body[data-page="join"] .field input, body[data-page="join"] .field select, body[data-page="join"] .field textarea{
width:100%;background:var(--input-bg);
border:1px solid var(--border-b);border-radius:10px;
padding:11px 16px;color:var(--fg);font-size:.88rem;outline:none;
transition:border-color .2s,box-shadow .2s;
-webkit-appearance:none;
}
body[data-page="join"] .field input::placeholder, body[data-page="join"] .field textarea::placeholder{color:var(--fg-3)}
body[data-page="join"] .field input:focus, body[data-page="join"] .field select:focus, body[data-page="join"] .field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.1)}
body[data-page="join"] .field select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;
padding-right:36px;cursor:pointer;
background-color:var(--input-bg);
}
html[data-theme="dark"] body[data-page="join"] .field select option{background:#181824;color:var(--fg)}
body[data-page="join"] .field textarea{resize:vertical;min-height:100px;line-height:1.6}
/* Checkboxes for dept interest */
body[data-page="join"] .checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
body[data-page="join"] .checkbox-item{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border:1px solid var(--border);border-radius:10px;transition:all .2s}
body[data-page="join"] .checkbox-item:hover{border-color:var(--border-b);background:var(--bg-3)}
body[data-page="join"] .checkbox-item input[type="checkbox"]{width:15px;height:15px;accent-color:var(--red);cursor:pointer;flex-shrink:0}
body[data-page="join"] .checkbox-item label{font-size:.8rem;color:var(--fg-2);cursor:pointer;display:flex;align-items:center;gap:6px}
body[data-page="join"] .checkbox-item.checked{border-color:rgba(208,2,27,.3);background:rgba(208,2,27,.05)}
body[data-page="join"] .checkbox-item.checked label{color:var(--fg)}
body[data-page="join"] .cb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Submit button */
body[data-page="join"] .form-submit-row{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body[data-page="join"] .submit-btn{
background:var(--red);color:white;border:none;border-radius:50px;
padding:14px 40px;font-size:.92rem;font-weight:700;
cursor:pointer;letter-spacing:.02em;
transition:all .25s var(--spring);
display:flex;align-items:center;gap:8px;
}
body[data-page="join"] .submit-btn:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 8px 30px rgba(208,2,27,.4)}
body[data-page="join"] .submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
body[data-page="join"] .submit-note{font-size:.74rem;color:var(--fg-3);line-height:1.5}
/* Success state */
body[data-page="join"] .form-success{
text-align:center;padding:40px 20px;display:none;
}
body[data-page="join"] .form-success.show{display:block}
body[data-page="join"] .success-icon{font-size:3.5rem;margin-bottom:16px}
body[data-page="join"] .success-title{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:900;color:var(--fg);letter-spacing:-.03em;margin-bottom:10px}
body[data-page="join"] .success-sub{font-size:.9rem;color:var(--fg-2);line-height:1.7;max-width:360px;margin:0 auto}
/* ── FOOTER ──────────────────────────────── */
body[data-page="join"] footer{background:var(--near-black);padding:40px 0}
body[data-page="join"] .f-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
body[data-page="join"] .f-brand{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:900;color:white}
body[data-page="join"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="join"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="join"] .f-home:hover{color:white}
/* ── REVEAL ──────────────────────────────── */
body[data-page="join"] .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
body[data-page="join"] .reveal.visible{opacity:1;transform:none}
body[data-page="join"] .rd1{transition-delay:.07s}body[data-page="join"] .rd2{transition-delay:.14s}body[data-page="join"] .rd3{transition-delay:.21s}
/* ── RESPONSIVE ──────────────────────────── */
/* (cursor system styles live in the global section near the top of this file) */
/* ─── SLACK BUTTON ──────────────────────────────────────────── */
body[data-page="join"] .slack-card-btn{
display: flex;
align-items: center;
gap: 12px;
background: rgba(74, 21, 75, 0.15);
border: 1px solid rgba(74, 21, 75, 0.35);
border-radius: 14px;
padding: 14px 18px;
margin-top: 16px;
text-decoration: none;
cursor: pointer;
transition: all 0.25s var(--spring);
}
body[data-page="join"] .slack-card-btn:hover{
background: rgba(74, 21, 75, 0.28);
border-color: rgba(74, 21, 75, 0.6);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(74, 21, 75, 0.25);
}
body[data-page="join"] .slack-icon{
width: 36px;
height: 36px;
border-radius: 10px;
background: #4A154B;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
body[data-page="join"] .slack-btn-text{
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
body[data-page="join"] .slack-btn-title{
font-size: .85rem;
font-weight: 600;
color: white;
line-height: 1.2;
}
body[data-page="join"] .slack-btn-sub{
font-family: 'DM Mono', monospace;
font-size: .65rem;
color: rgba(255, 255, 255, 0.4);
letter-spacing: .04em;
}
body[data-page="join"] .slack-btn-arrow{
color: rgba(255, 255, 255, 0.35);
font-size: .9rem;
flex-shrink: 0;
transition: transform 0.2s, color 0.2s;
}
body[data-page="join"] .slack-card-btn:hover .slack-btn-arrow{
transform: translateX(3px);
color: rgba(255, 255, 255, 0.7);
}
@media(max-width:960px){
body[data-page="join"] .hero{grid-template-columns:1fr;gap:48px;padding:80px 40px}
body[data-page="join"] .meeting-card{max-width:480px}
body[data-page="join"] .benefits-grid{grid-template-columns:repeat(2,1fr)}
body[data-page="join"] .depts-grid{grid-template-columns:repeat(2,1fr)}
body[data-page="join"] .gbm-inner{grid-template-columns:1fr;gap:48px}
body[data-page="join"] .form-inner{grid-template-columns:1fr;gap:48px}
}
@media(max-width:640px){
body[data-page="join"] nav{padding:0 16px}
body[data-page="join"] .benefits-inner, body[data-page="join"] .depts-inner, body[data-page="join"] .form-inner, body[data-page="join"] .gbm-inner{padding:0 16px}
body[data-page="join"] .hero{padding:80px 20px}
body[data-page="join"] .benefits-grid, body[data-page="join"] .depts-grid{grid-template-columns:1fr}
body[data-page="join"] .form-row{grid-template-columns:1fr}
body[data-page="join"] .checkbox-grid{grid-template-columns:1fr}
body[data-page="join"] .application-form{padding:24px 20px}
body[data-page="join"] .f-inner{flex-direction:column;align-items:flex-start}
}
/* (cursor system styles live in the global section near the top of this file) */
/* ════════════════════════════════════════════════════════════════
UNIFIED NAV — bc-nav (v2, quieter)
• No ON-AIR pill (removed per feedback)
• Mostly monochrome; only the ACTIVE page wears its dept color,
as a single subtle underline under its own link
• Hover is neutral — just brightens text + background tint
• Current-page link is HIDDEN (don't link to where you already are)
• Mobile channel-changer panel kept, but cards are calmer
═══════════════════════════════════════════════════════════════ */
/* ── Color tokens (only used by ACTIVE state, not hover) ──────── */
:root{
--bcn-radio: #FF1F3D;
--bcn-sports: #FF6B35;
--bcn-btv: #51CF66;
--bcn-journalism: #339AF0;
--bcn-music: #845EF7;
--bcn-team: #C9A84C;
--bcn-join: #FF1F3D;
--bcn-nav-h: 62px;
--bcn-rainbow-h: 3px;
--bcn-ease: cubic-bezier(0.22, 1, 0.36, 1);
--bcn-fg: var(--fg, #F0EDE8);
--bcn-fg-dim: var(--fg-2,#A8A4A0);
--bcn-fg-mute: var(--fg-3,#5A5754);
--bcn-bg: var(--nav-bg, rgba(10,10,11,0.88));
--bcn-border: var(--border, rgba(255,255,255,0.08));
--bcn-border-b: var(--border-bright, rgba(255,255,255,0.14));
}
/* ── Top-level container ──────────────────────────────────────── */
html body nav.bc-nav{
position: fixed;
top: var(--bcn-rainbow-h);
left: 0; right: 0;
height: var(--bcn-nav-h);
z-index: 1000;
display: flex;
align-items: stretch;
padding: 0;
margin: 0;
background: var(--bcn-bg);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border-bottom: 1px solid var(--bcn-border);
transition: background .4s ease, border-color .4s ease;
font-family: 'DM Sans', sans-serif;
}
.bcn-inner{
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 28px;
/* 3-column grid: equal-width outer columns force the middle
column (links) to be visually centered on the viewport,
regardless of how wide the logo or tools are. With flex +
space-between, the links drifted whenever the logo grew or
shrank (e.g. dept-section divider on radio.html). */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
}
/* Logo stays in column 1, naturally left-aligned. */
.bcn-logo{ grid-column: 1; justify-self: start; }
/* Tools live in column 3, naturally right-aligned. */
.bcn-tools{ grid-column: 3; justify-self: end; }
/* Links sit in the auto-width middle column, centered. */
.bcn-links{ grid-column: 2; }
/* ── Logo ────────────────────────────────────────────────────── */
.bcn-logo{
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--bcn-fg);
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 1.15rem;
letter-spacing: -0.02em;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
}
.bcn-logo .bcn-dot{
width: 8px; height: 8px;
background: var(--bcn-radio);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255,31,61,0.45);
animation: bcn-dot-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes bcn-dot-pulse{
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,31,61,0.5); }
50% { transform: scale(0.78); box-shadow: 0 0 0 6px rgba(255,31,61,0); }
}
/* Wordmark — same Playfair face & size everywhere (see .bcn-logo).
A subtle one-shot rise on load, and a gentle lift on hover. */
.bcn-logo .bcn-word{
display: inline-block;
animation: bcn-word-in .7s var(--bcn-ease);
transition: transform .4s var(--bcn-ease);
}
@keyframes bcn-word-in{
from { opacity: 0; transform: translateY(-5px); }
}
.bcn-logo:hover .bcn-word{ transform: translateY(-1px); }
.bcn-logo .bcn-word em{
font-style: normal;
color: var(--bcn-radio); /* only red on home; overridden per dept below */
transition: color .35s ease, text-shadow .35s ease;
}
.bcn-logo:hover .bcn-word em{ text-shadow: 0 0 16px currentColor; }
/* Section divider on dept pages — quieter than before */
.bcn-section{
display: inline-flex;
align-items: center;
gap: 9px;
margin-left: 8px;
padding-left: 12px;
border-left: 1px solid var(--bcn-border-b);
font-family: 'DM Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bcn-fg-mute);
}
.bcn-section-bullet{
width: 5px; height: 5px;
border-radius: 50%;
background: var(--bcn-section-c, var(--bcn-radio));
}
/* Per-dept logo accent (only the `cast` em + section bullet) */
body[data-page="radio"] .bcn-logo .bcn-word em,
body[data-page="radio"] { --bcn-section-c: var(--bcn-radio); }
body[data-page="sports"] .bcn-logo .bcn-word em{ color: var(--bcn-sports); }
body[data-page="sports"] { --bcn-section-c: var(--bcn-sports); }
body[data-page="btv"] .bcn-logo .bcn-word em{ color: var(--bcn-btv); }
body[data-page="btv"] { --bcn-section-c: var(--bcn-btv); }
body[data-page="journalism"] .bcn-logo .bcn-word em{ color: var(--bcn-journalism); }
body[data-page="journalism"] { --bcn-section-c: var(--bcn-journalism); }
body[data-page="music"] .bcn-logo .bcn-word em{ color: var(--bcn-music); }
body[data-page="music"] { --bcn-section-c: var(--bcn-music); }
body[data-page="team"] .bcn-logo .bcn-word em{ color: var(--bcn-team); }
body[data-page="team"] { --bcn-section-c: var(--bcn-team); }
body[data-page="join"] .bcn-logo .bcn-word em{ color: var(--bcn-join); }
body[data-page="join"] { --bcn-section-c: var(--bcn-join); }
/* ── Link row ─────────────────────────────────────────────────
All neutral. No per-link dots, no rainbow on hover. Only the
ACTIVE link gets its dept color, as a subtle underline. */
.bcn-links{
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
/* No flex:1 / justify-content here — the grid parent's middle
column auto-sizes to content and is visually centered on the
viewport by the 1fr outer columns. */
}
.bcn-link{
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--bcn-fg-dim);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 9px 14px;
border-radius: 8px;
transition: color .2s ease, background .2s ease;
}
.bcn-link:hover{
color: var(--bcn-fg);
background: rgba(255,255,255,0.04);
}
html[data-theme="light"] .bcn-link:hover{ background: rgba(0,0,0,0.04); }
.bcn-link:focus-visible{
outline: 1px solid var(--bcn-border-b);
outline-offset: 2px;
}
/* ── "You are here" — current page's nav link ─────────────────
Keep the link in place so the nav doesn't reshuffle between
pages (consistency > saving one redundant link). Mark it with
brighter text + a small dot in the dept color positioned over
the link without shifting layout. */
.bcn-link[data-active="true"]{
color: var(--bcn-fg);
cursor: default;
}
.bcn-link[data-active="true"]::before{
content: '';
position: absolute;
left: 50%;
bottom: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--bcn-radio);
transform: translateX(-50%);
box-shadow: 0 0 6px currentColor;
opacity: 0.9;
}
/* Per-dept dot color (`color-mix` shadow uses currentColor of the dot) */
.bcn-link[data-active="true"][data-dept="radio"]::before { background: var(--bcn-radio); box-shadow: 0 0 6px var(--bcn-radio); }
.bcn-link[data-active="true"][data-dept="sports"]::before { background: var(--bcn-sports); box-shadow: 0 0 6px var(--bcn-sports); }
.bcn-link[data-active="true"][data-dept="btv"]::before { background: var(--bcn-btv); box-shadow: 0 0 6px var(--bcn-btv); }
.bcn-link[data-active="true"][data-dept="journalism"]::before { background: var(--bcn-journalism); box-shadow: 0 0 6px var(--bcn-journalism); }
.bcn-link[data-active="true"][data-dept="music"]::before { background: var(--bcn-music); box-shadow: 0 0 6px var(--bcn-music); }
.bcn-link[data-active="true"][data-dept="team"]::before { background: var(--bcn-team); box-shadow: 0 0 6px var(--bcn-team); }
.bcn-link[data-active="true"][data-dept="join"]::before { background: var(--bcn-join); box-shadow: 0 0 6px var(--bcn-join); }
/* No hover state on the current-page link — it shouldn't invite a click */
.bcn-link[data-active="true"]:hover{
background: transparent;
color: var(--bcn-fg);
}
/* ── Right toolbelt ───────────────────────────────────────── */
.bcn-tools{
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Theme toggle — single quiet pill */
.bcn-theme{
background: transparent;
border: 1px solid var(--bcn-border-b);
border-radius: 100px;
padding: 6px 14px;
cursor: pointer;
color: var(--bcn-fg-dim);
font-family: 'DM Sans', sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: color .2s ease, border-color .2s ease, background .2s ease;
white-space: nowrap;
}
.bcn-theme:hover{
color: var(--bcn-fg);
border-color: var(--bcn-fg-mute);
}
/* Command palette trigger — quiet pill with a magnifier + keycap.
Injected into .bcn-tools by the palette module so it appears on
every page; opening it is identical to pressing Cmd/Ctrl+K. */
.bcn-cmdk{
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1px solid var(--bcn-border-b);
border-radius: 100px;
padding: 6px 10px 6px 12px;
cursor: pointer;
color: var(--bcn-fg-dim);
font-family: 'DM Sans', sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.bcn-cmdk:hover{
color: var(--bcn-fg);
border-color: var(--bcn-fg-mute);
}
.bcn-cmdk-ico{
width: 15px;
height: 15px;
flex-shrink: 0;
}
.bcn-cmdk-key{
font-family: 'DM Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.03em;
color: var(--bcn-fg-mute);
border: 1px solid var(--bcn-border-b);
border-radius: 5px;
padding: 2px 6px;
line-height: 1;
}
/* ── Burger ──────────────────────────────────────────────── */
.bcn-burger{
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--bcn-border-b);
background: transparent;
border-radius: 10px;
cursor: pointer;
position: relative;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
padding: 0;
transition: border-color .2s ease;
}
.bcn-burger:hover{ border-color: var(--bcn-fg-mute); }
.bcn-burger span{
display: block;
width: 18px;
height: 2px;
background: var(--bcn-fg);
border-radius: 2px;
transition: transform .3s var(--bcn-ease), opacity .2s ease;
transform-origin: center;
pointer-events: none; /* clicks pass to the button */
}
.bcn-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.bcn-burger.open span:nth-child(2){ opacity: 0; }
.bcn-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
/* ── Mobile panel ──────────────────────────────────────── */
.bcn-scrim{
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.45);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
z-index: 998;
}
.bcn-scrim.open{ opacity: 1; pointer-events: auto; }
.bcn-panel{
position: fixed;
top: calc(var(--bcn-nav-h) + var(--bcn-rainbow-h));
left: 0; right: 0;
bottom: 0;
background: var(--bcn-bg);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
z-index: 999;
padding: 24px 20px 36px;
transform: translateY(-10px);
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: transform .35s var(--bcn-ease), opacity .25s ease, visibility 0s linear .35s;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-top: 1px solid var(--bcn-border);
}
.bcn-panel.open{
transform: translateY(0);
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: transform .4s var(--bcn-ease), opacity .25s ease, visibility 0s;
}
.bcn-panel-eyebrow{
display: flex;
align-items: center;
gap: 10px;
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bcn-fg-mute);
margin-bottom: 16px;
}
.bcn-panel-eyebrow::before,
.bcn-panel-eyebrow::after{
content:'';
flex: 1;
height: 1px;
background: var(--bcn-border-b);
}
/* Channel cards — calmer; color only on the left strip + name */
.bcn-channels{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.bcn-ch{
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 14px 14px 18px;
border-radius: 12px;
background: var(--bg-2, rgba(255,255,255,0.03));
border: 1px solid var(--bcn-border);
text-decoration: none;
color: var(--bcn-fg);
overflow: hidden;
transition: border-color .2s ease, transform .2s ease;
}
.bcn-ch[data-dept="radio"] { --c: var(--bcn-radio); }
.bcn-ch[data-dept="sports"] { --c: var(--bcn-sports); }
.bcn-ch[data-dept="btv"] { --c: var(--bcn-btv); }
.bcn-ch[data-dept="journalism"] { --c: var(--bcn-journalism); }
.bcn-ch[data-dept="music"] { --c: var(--bcn-music); }
.bcn-ch::before{
content:'';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--c);
}
.bcn-ch::after{
content: attr(data-num);
position: absolute;
top: 10px; right: 12px;
font-family: 'DM Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.1em;
color: var(--bcn-fg-mute);
}
.bcn-ch:active{
transform: scale(0.98);
border-color: var(--c);
}
.bcn-ch-icon{
font-size: 1.3rem;
line-height: 1;
}
.bcn-ch-name{
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.01em;
color: var(--c);
line-height: 1.1;
}
.bcn-ch-tag{
font-family: 'DM Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bcn-fg-mute);
}
/* "You are here" treatment — mobile channel cards + secondary links.
Same philosophy as desktop: keep them in place for layout
stability, mark them visually as current instead of hiding. */
.bcn-ch[data-active="true"]{
border-color: var(--c);
background: linear-gradient(
135deg,
color-mix(in srgb, var(--c) 10%, transparent) 0%,
transparent 70%);
cursor: default;
}
.bcn-ch[data-active="true"]::before{
width: 4px; /* the existing left strip is already there; widen slightly */
}
.bcn-ch[data-active="true"] .bcn-ch-tag::after{
content: " · You are here";
color: var(--c);
font-weight: 500;
}
.bcn-ch[data-active="true"]:active{ transform: none; }
.bcn-sec-link[data-active="true"]{
cursor: default;
color: var(--bcn-fg-dim);
}
.bcn-sec-link[data-active="true"]::after{
content: '· current';
font-family: 'DM Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bcn-fg-mute);
}
.bcn-sec-link[data-active="true"]:active{
padding-left: 4px;
}
.bcn-sec-link[data-active="true"]:active::after{
transform: none;
}
/* Mobile panel — secondary links */
.bcn-panel-secondary{
display: flex;
flex-direction: column;
gap: 0;
padding-top: 16px;
border-top: 1px solid var(--bcn-border);
}
.bcn-sec-link{
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px;
color: var(--bcn-fg);
text-decoration: none;
font-size: 0.96rem;
font-weight: 500;
border-bottom: 1px solid var(--bcn-border);
transition: padding-left .2s ease;
}
.bcn-sec-link:last-child{ border-bottom: none; }
.bcn-sec-link::after{
content: '→';
color: var(--bcn-fg-mute);
transition: transform .2s ease, color .2s ease;
}
.bcn-sec-link:active{ padding-left: 8px; }
.bcn-sec-link:active::after{ transform: translateX(3px); color: var(--bcn-fg); }
.bcn-sec-link.accent{ color: var(--bcn-radio); font-weight: 600; }
/* Body scroll lock when panel open */
body.bcn-locked{ overflow: hidden; }
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px){
.bcn-link{ padding: 9px 11px; font-size: 0.82rem; }
.bcn-inner{ padding: 0 22px; gap: 12px; }
}
@media (max-width: 920px){
.bcn-links{ display: none; }
.bcn-burger{ display: inline-flex; }
.bcn-section{ display: none; } /* dept name lives in the panel on mobile */
/* No links visible at this size — collapse the 3-column grid
so logo hugs the left and tools hug the right with no gap
of dead space between them. */
.bcn-inner{
display: flex;
justify-content: space-between;
}
}
@media (max-width: 560px){
.bcn-inner{ padding: 0 16px; gap: 8px; }
html body nav.bc-nav{ height: 58px; }
:root{ --bcn-nav-h: 58px; }
/* Logo keeps its 1.15rem size at every breakpoint — no shrink. */
.bcn-channels{ grid-template-columns: 1fr; }
/* Compact theme toggle — square icon button next to the burger.
Hide the text label ("Auto"/"Light"/"Dark"), show a glyph for
the mode the toggle is currently in. */
.bcn-theme{
width: 40px;
height: 40px;
padding: 0;
border-radius: 10px;
font-size: 0; /* hides the "Auto"/"Light"/"Dark" text */
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.bcn-theme::before{
/* Auto — the default mode, and the fallback if JS never runs */
content: "◐";
font-size: 1.05rem;
line-height: 1;
color: var(--bcn-fg);
transition: transform .35s var(--bcn-ease);
}
html[data-theme-mode="light"] .bcn-theme::before{
content: "☀";
font-size: 1.05rem;
}
html[data-theme-mode="dark"] .bcn-theme::before{
content: "☾";
font-size: 1.15rem;
}
.bcn-theme:hover::before{ transform: rotate(20deg); }
/* Command palette trigger → icon-only square, matching the
compact theme toggle. No keyboard on phones, so drop the
"Search" label and the keycap hint. */
.bcn-cmdk{
width: 40px;
height: 40px;
padding: 0;
border-radius: 10px;
justify-content: center;
}
.bcn-cmdk-label,
.bcn-cmdk-key{ display: none; }
.bcn-cmdk-ico{ width: 17px; height: 17px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.bcn-logo .bcn-dot{ animation: none; }
.bcn-logo .bcn-word,
.bcn-panel,
.bcn-link,
.bcn-burger span,
.bcn-ch{ transition-duration: .01ms !important; animation: none !important; }
}
/* ════════════════════════════════════════════════════════════════
NOW-PLAYING MARQUEE
Overflow-aware horizontal scroll for the track title on both
index.html (.player-now-playing) and radio.html (.bp-now).
• Containers clip + nowrap
• If text overflows, JS adds .is-marquee + sets two CSS vars:
--marquee-shift (negative px, the overflow distance)
--marquee-duration (animation duration in seconds)
• Animation: start at rest, ease to fully-revealed end, hold,
ease back to start, hold — a slow ping-pong that's easy to
read. If text fits, no animation runs.
═══════════════════════════════════════════════════════════════ */
body[data-page="home"] .player-now-playing,
body[data-page="radio"] .bp-now{
overflow: hidden;
white-space: nowrap;
position: relative;
/* Subtle fade on the right edge so text cleanly exits view */
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
min-width: 0; /* let flex/grid containers shrink it */
max-width: 100%;
}
/* Inside flex parents the original css uses gap & flex layout —
make sure the marquee container takes the available space. */
body[data-page="home"] .player-now-playing{ flex: 1 1 auto; }
.np-marquee-text{
display: inline-block;
white-space: nowrap;
will-change: transform;
}
/* Active scroll: applies only when JS detects overflow */
.is-marquee .np-marquee-text{
animation: bcMarquee var(--marquee-duration, 14s) ease-in-out infinite;
}
/* Pause when user hovers (desktop courtesy) */
.is-marquee:hover .np-marquee-text{
animation-play-state: paused;
}
@keyframes bcMarquee{
0% { transform: translateX(0); }
18% { transform: translateX(0); } /* hold at start */
50% { transform: translateX(var(--marquee-shift, 0)); } /* fully revealed */
68% { transform: translateX(var(--marquee-shift, 0)); } /* hold at end */
100% { transform: translateX(0); } /* back to start */
}
@media (prefers-reduced-motion: reduce){
.is-marquee .np-marquee-text{ animation: none; }
body[data-page="home"] .player-now-playing,
body[data-page="radio"] .bp-now{
text-overflow: ellipsis;
}
}
/* ════════════════════════════════════════════════════════════════
VOLUME SLIDER — touch fix ONLY (zero visual changes)
The original visual rules higher up in this file (3px track,
14px white thumb with glow) are completely untouched. These
additions are purely behavioral / cross-browser:
• touch-action so the browser doesn't hijack horizontal drags
on iOS/Android (this is the real mobile fix)
• ::-moz-range-thumb / -track mirror so Firefox & legacy Edge
render the same 3px track + 14px white thumb as Chrome
• Touch-only override so the 1.3× hover scale doesn't stick
after a tap on phones
═══════════════════════════════════════════════════════════════ */
body[data-page="radio"] .vol-slider{
touch-action: manipulation;
}
body[data-page="radio"] .vol-slider::-moz-range-thumb{
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bp-thumb);
border: none;
box-shadow: 0 0 6px var(--shadow);
cursor: pointer;
transition: transform 0.15s;
}
body[data-page="radio"] .vol-slider::-moz-range-thumb:hover{ transform: scale(1.3); }
body[data-page="radio"] .vol-slider::-moz-range-track{
height: 3px;
background: var(--bp-chip-hover);
border-radius: 3px;
border: none;
}
@media (hover: none){
body[data-page="radio"] .vol-slider::-webkit-slider-thumb:hover{ transform: none; }
body[data-page="radio"] .vol-slider::-moz-range-thumb:hover{ transform: none; }
}
/* ════════════════════════════════════════════════════════════════
SANITY LOAD-STATE EMPTY STATES
The existing .no-res / .ep-no-results / .nr-icon classes get a
data-bc-empty-state attribute set by JS to indicate whether the
page is currently in 'loading', 'empty', 'error', or 'ok' state.
These rules layer subtle visual cues per state without changing
the existing copy layout.
═══════════════════════════════════════════════════════════════ */
/* Loading state — gentle pulse on the icon so it reads as "working"
rather than "nothing here." The text content (set by JS) already
says "Loading X…" so the visual just reinforces it. */
.no-res[data-bc-empty-state="loading"] .nr-icon,
.ep-no-results[data-bc-empty-state="loading"] .nr-icon{
animation: bc-empty-pulse 1.4s ease-in-out infinite;
opacity: 0.6;
}
@keyframes bc-empty-pulse{
0%, 100% { opacity: 0.35; transform: scale(0.95); }
50% { opacity: 0.75; transform: scale(1.05); }
}
/* Error state — warning glyph gets a slight warm color tint */
.no-res[data-bc-empty-state="error"] .nr-icon,
.ep-no-results[data-bc-empty-state="error"] .nr-icon{
color: var(--orange, #FF6B35);
opacity: 0.55;
}
.no-res[data-bc-empty-state="error"] .nr-title,
.ep-no-results[data-bc-empty-state="error"] .nr-title{
color: var(--orange, #FF6B35);
}
/* Empty (Sanity returned no documents) — slightly more inviting
than the default "no results from filter" state. Title gets a
touch more weight to read as a statement rather than a problem. */
.no-res[data-bc-empty-state="empty"] .nr-title,
.ep-no-results[data-bc-empty-state="empty"] .nr-title{
font-weight: 600;
}
/* Loading state inside a grid — slight delay before showing so we
don't flash the "Loading…" copy for sub-100ms requests where
Sanity is cached. The .no-res / .ep-no-results container is
already hidden by default and only shown by JS when the grid is
empty, so this is additive polish. */
.no-res[data-bc-empty-state="loading"],
.ep-no-results[data-bc-empty-state="loading"]{
animation: bc-empty-fade-in .6s ease 0.15s both;
}
@keyframes bc-empty-fade-in{
from { opacity: 0; }
to { opacity: 1; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.no-res[data-bc-empty-state] .nr-icon,
.ep-no-results[data-bc-empty-state] .nr-icon{
animation: none !important;
}
.no-res[data-bc-empty-state="loading"],
.ep-no-results[data-bc-empty-state="loading"]{
animation: none !important;
}
}
/* ════════════════════════════════════════════════════════════════
LIVE PLAYER — FIXED RECTANGLE LAYOUT (index.html only)
Horizontal three-zone layout on desktop:
[ play button ] [ live badge + station name + now playing ] [ waveform ]
left center (flex-grow) right
Mobile layout (≤ 600px):
┌───────────────────────────────────────────┐
│ [▶] LIVE │
│ Bearcast Radio │
│ Def Leppard — Hysteria… │
├───────────────────────────────────────────┤
│ ▌█▌█▌█▌█▌█▌█▌█▌ │
└───────────────────────────────────────────┘
Play button stays vertically-centered on the left next to the
text. Waveform sits below, spanning the full width. Cleaner
than the previous stacked-three-rows layout that orphaned the
play button in its own row.
Fixed total width on desktop (no reshape on track change) — the
center column has `min-width: 0` so long song titles trigger the
existing bcMarquee scroll animation instead of stretching the box.
This block lives at the very end of styles.css so it overrides
the earlier `.live-player` rules without editing them.
═══════════════════════════════════════════════════════════════ */
body[data-page="home"] .live-player-container{
display: flex;
justify-content: center;
}
body[data-page="home"] .live-player{
/* Three-zone horizontal row. Override the variable-width pill defaults. */
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 24px;
padding: 18px 22px;
/* Fixed rectangle — same size regardless of track title length.
Sized 1/3 narrower than before so the player feels compact
rather than dominating the hero. */
width: 380px;
min-width: 0; /* clobber the 420px min-width from earlier */
max-width: 380px; /* clobber the 560px max-width from earlier */
height: auto;
aspect-ratio: auto;
box-sizing: border-box;
}
/* Play button — sits on the left, anchors the row. Sized so the
row reads as "play | info | waveform" rather than "huge red dot
plus some text". */
body[data-page="home"] .live-player .play-btn{
width: 52px;
height: 52px;
flex-shrink: 0;
}
body[data-page="home"] .live-player .play-btn svg{
width: 20px;
height: 20px;
}
/* Center column: live badge / station name / now playing.
`min-width: 0` is critical — without it a flex item refuses to
shrink below its content width, so the marquee container can't
clip overflow. With it, long titles overflow and the marquee
animation kicks in. */
body[data-page="home"] .live-player .player-info{
flex: 1 1 auto;
min-width: 0; /* let it shrink so marquee can clip */
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
overflow: hidden; /* belt + suspenders for the marquee clip */
}
body[data-page="home"] .live-player .player-status{
justify-content: flex-start;
margin-bottom: 1px;
}
body[data-page="home"] .live-player .player-station-name{
font-size: 1rem;
margin-bottom: 0;
max-width: 100%;
/* keep the existing nowrap+ellipsis from the base rule for station name */
}
/* Now-playing line — full width of the info column so overflow
measurement is meaningful. width: 100% + parent min-width: 0
means clientWidth is bounded by the column, not by the text. */
body[data-page="home"] .live-player .player-now-playing{
width: 100%;
max-width: 100%;
margin: 0;
justify-content: flex-start;
font-size: 0.78rem;
/* overflow:hidden + mask come from the NOW-PLAYING MARQUEE block above */
}
/* Waveform — sits on the right side of the row, scaled to match
the new narrower box. */
body[data-page="home"] .live-player .waveform{
flex-shrink: 0;
width: 64px;
height: 44px;
gap: 3px;
justify-content: center;
align-items: center;
}
body[data-page="home"] .live-player .wave-bar{
width: 3px;
}
/* IDLE bar heights — proportional to the new 44px waveform box.
Scaled down from the 56px-version while keeping the same visual
rhythm (peaks on bars 4 and 6, valleys on 1 and 7). */
body[data-page="home"] .live-player .wave-bar:nth-child(1){ height: 9px; }
body[data-page="home"] .live-player .wave-bar:nth-child(2){ height: 18px; }
body[data-page="home"] .live-player .wave-bar:nth-child(3){ height: 12px; }
body[data-page="home"] .live-player .wave-bar:nth-child(4){ height: 28px; }
body[data-page="home"] .live-player .wave-bar:nth-child(5){ height: 15px; }
body[data-page="home"] .live-player .wave-bar:nth-child(6){ height: 22px; }
body[data-page="home"] .live-player .wave-bar:nth-child(7){ height: 11px; }
body[data-page="home"] .live-player .wave-bar:nth-child(8){ height: 17px; }
/* ── MOBILE LAYOUT (≤ 600px) ─────────────────────────────────
"Now playing card" pattern. Two rows:
┌─────────────────────────────────────────────┐
│ ● LIVE │
│ Bearcast Radio ▌█▌█▌█▌█▌ │ ← row 1: info | wave
│ Howling at the Moon (Sha-La-La) │
│ ┌─────────────────────────────────────┐ │
│ │ ▶ Listen Live │ │ ← row 2: full-width pill CTA
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
How this is laid out — outer grid on .live-player:
• Row 1, col 1: .player-info (flex column: LIVE → name → track)
• Row 1, col 2: .waveform (compact, vertically centered)
• Row 2, cols 1-2: .play-btn (spans full width, pill shape)
.player-info is treated as a normal flex column that flows
LIVE → station name → track title in source order. No subgrid,
no overlapping placement. The marquee on the track title still
works because the column has min-width: 0 and overflow: hidden.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px){
body[data-page="home"] .live-player{
/* Two-column, two-row grid. Info+waveform on top, button on bottom. */
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"info wave"
"cta cta";
column-gap: 14px;
row-gap: 4px;
width: 100%;
max-width: 380px;
padding: 20px;
/* Reset desktop flex props so they don't fight grid */
flex-direction: initial;
align-items: initial;
justify-content: initial;
gap: initial;
}
/* ── INFO COLUMN: LIVE badge, station name, track — vertical flow ──
This is just a flex column. Source order: status (LIVE) → station
name → now-playing track. min-width: 0 + overflow: hidden so the
marquee on track title actually clips long song names. */
body[data-page="home"] .live-player .player-info{
grid-area: info;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
text-align: left;
overflow: hidden;
}
body[data-page="home"] .live-player .player-status{
margin-bottom: 0;
justify-content: flex-start;
}
body[data-page="home"] .live-player .player-station-name{
font-size: 1.05rem;
line-height: 1.2;
max-width: 100%;
}
body[data-page="home"] .live-player .player-now-playing{
width: 100%;
max-width: 100%;
margin: 0;
justify-content: flex-start;
font-size: 0.82rem;
line-height: 1.3;
color: var(--fg-3);
/* marquee clip+mask comes from the NOW-PLAYING MARQUEE block earlier */
}
/* ── WAVEFORM: small, vertically centered, doesn't fight for space ── */
body[data-page="home"] .live-player .waveform{
grid-area: wave;
align-self: center;
width: 56px;
height: 36px;
gap: 3px;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
body[data-page="home"] .live-player .wave-bar{ width: 3px; }
/* Bar heights tuned for the 36px mobile waveform */
body[data-page="home"] .live-player .wave-bar:nth-child(1){ height: 8px; }
body[data-page="home"] .live-player .wave-bar:nth-child(2){ height: 16px; }
body[data-page="home"] .live-player .wave-bar:nth-child(3){ height: 11px; }
body[data-page="home"] .live-player .wave-bar:nth-child(4){ height: 24px; }
body[data-page="home"] .live-player .wave-bar:nth-child(5){ height: 13px; }
body[data-page="home"] .live-player .wave-bar:nth-child(6){ height: 19px; }
body[data-page="home"] .live-player .wave-bar:nth-child(7){ height: 10px; }
body[data-page="home"] .live-player .wave-bar:nth-child(8){ height: 15px; }
/* ── BOTTOM ROW: full-width pill play button (the real CTA) ──
Spans both columns of the outer grid. Wide red pill with icon
and "Listen Live" / "Pause Stream" label inside. */
body[data-page="home"] .live-player .play-btn{
grid-area: cta;
width: 100%;
height: 36px;
border-radius: 18px;
padding: 0 18px;
gap: 10px;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.01em;
color: white;
}
body[data-page="home"] .live-player .play-btn svg{
width: 14px;
height: 14px;
}
/* Label injected via ::after — text swaps based on .playing class.
The desktop ::after rule was an absolute-positioned animated
ripple ring; we override every property here so the pseudo
becomes inline text instead. */
body[data-page="home"] .live-player .play-btn::after{
content: 'Listen Live';
display: inline-block;
position: static;
inset: auto;
border: none;
border-radius: 0;
opacity: 1;
animation: none;
}
body[data-page="home"] .live-player .play-btn.playing::after{
content: 'Pause Stream';
animation: none;
}
body[data-page="home"] .live-player .play-btn:hover{
transform: scale(1.02);
}
body[data-page="home"] .live-player .play-btn:active{
transform: scale(0.98);
}
}
/* ══════════════════════════════════════════════════
MOBILE COLLAPSIBLE FILTER (shared across journalism,
music, sports, btv). On desktop the .mfilter shell is
transparent — the pills render inline exactly as before
and the toggle button is hidden. Under 640px the inline
row collapses behind a "Filter" button that drops the
pills into a panel.
══════════════════════════════════════════════════ */
.mfilter{display:contents}
.mfilter-btn{display:none}
@media(max-width:640px){
/* Shell becomes a positioned block so the dropdown anchors to it. */
.mfilter{display:block;position:relative;flex:1;min-width:0}
/* Let the search field shrink so the Filter button has room in the row.
These widths were fixed (260–280px) which crowded out everything else
on a phone. */
body[data-page="music"] .sw,
body[data-page="sports"] .sw{width:auto;flex:1;min-width:0}
body[data-page="journalism"] .search-wrap{width:auto;flex:1;min-width:0}
body[data-page="btv"] .ep-search-wrap{width:auto;flex:1;min-width:0}
.mfilter-btn{
display:flex;align-items:center;justify-content:space-between;gap:8px;
width:100%;
background:var(--bg-3);
border:1px solid var(--border);
border-radius:20px;
padding:8px 14px;
color:var(--fg-2);
font-size:.8rem;font-weight:500;
cursor:pointer;
transition:border-color .2s,color .2s;
}
.mfilter-btn:hover{color:var(--fg)}
.mfilter-btn svg{flex-shrink:0;transition:transform .2s}
.mfilter.open .mfilter-btn svg{transform:rotate(180deg)}
.mfilter-btn-label{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
text-align:left;
}
/* The pills row, when collapsed, drops out of the inline flow and
becomes a panel under the button. We override the page-specific
max-width clamps that previously squeezed it. */
.mfilter .fpills,
.mfilter .desk-pills,
.mfilter .channel-scroll{
display:none !important;
position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
flex-direction:column;gap:4px;
max-width:none !important;width:100%;
max-height:60vh;overflow-y:auto;overflow-x:hidden;
background:var(--bg);
border:1px solid var(--border);
border-radius:14px;
padding:8px;
box-shadow:0 16px 40px var(--shadow,rgba(0,0,0,.3));
}
.mfilter.open .fpills,
.mfilter.open .desk-pills,
.mfilter.open .channel-scroll{
display:flex !important;
}
/* Pills inside the panel go full-width and left-aligned so they read
as a tappable menu, not a scroll strip. */
.mfilter .fpill,
.mfilter .desk-pill,
.mfilter .channel-tab{
width:100%;justify-content:flex-start;text-align:left;
border-radius:8px !important;
border-right:none !important;
}
}
/* ════════════════════════════════════════════════════════════════
SHARED — SKIP LINK (all pages)
════════════════════════════════════════════════════════════════ */
.bc-skip-link{
position:fixed;
top:-100%;left:50%;
transform:translateX(-50%);
z-index:999999;
background:var(--red,#D0021B);
color:#fff;
padding:10px 22px;
border-radius:0 0 8px 8px;
font-family:'DM Sans',sans-serif;
font-size:.88rem;font-weight:600;
text-decoration:none;
white-space:nowrap;
transition:top .2s ease;
outline-offset:2px;
}
.bc-skip-link:focus{
top:0;
outline:3px solid #fff;
}
@media(prefers-reduced-motion:reduce){.bc-skip-link{transition:none;}}
/* ════════════════════════════════════════════════════════════════
SHARED — BACK TO TOP BUTTON (all pages)
════════════════════════════════════════════════════════════════ */
.bc-btt{
position:fixed;
bottom:32px;right:28px;
z-index:995;
width:44px;height:44px;
border-radius:50%;
border:1px solid var(--border,rgba(255,255,255,.12));
background:var(--bg-glass,rgba(16,16,20,.9));
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:var(--fg,#F0EDE8);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
opacity:0;
transform:translateY(12px);
transition:opacity .25s ease,transform .25s ease,background .2s ease,bottom .2s ease;
pointer-events:none;
box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.bc-btt:not([hidden]){pointer-events:auto;}
.bc-btt--visible{opacity:1;transform:translateY(0);}
.bc-btt:hover{background:var(--red,#D0021B);border-color:transparent;color:#fff;}
.bc-btt svg{width:18px;height:18px;}
@media(prefers-reduced-motion:reduce){.bc-btt{transition:none;}}
/* ════════════════════════════════════════════════════════════════
SHARED — TOAST NOTIFICATIONS (all pages, injected by bcToast)
════════════════════════════════════════════════════════════════ */
.bc-toast-wrap{
position:fixed;
bottom:32px;left:50%;
transform:translateX(-50%);
z-index:999998;
display:flex;flex-direction:column-reverse;align-items:center;gap:8px;
pointer-events:none;
width:max-content;max-width:calc(100vw - 40px);
}
.bc-toast{
display:flex;align-items:center;gap:10px;
background:var(--nav-bg,rgba(10,10,11,.95));
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
border:1px solid var(--border,rgba(255,255,255,.12));
border-radius:12px;
padding:11px 18px;
font-family:'DM Sans',sans-serif;
font-size:.85rem;font-weight:500;
color:var(--fg,#F0EDE8);
box-shadow:0 8px 28px rgba(0,0,0,.4);
opacity:0;
transform:translateY(10px) scale(.97);
transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1);
pointer-events:auto;
cursor:pointer;
max-width:100%;
}
.bc-toast--show{opacity:1;transform:translateY(0) scale(1);}
.bc-toast--success{border-color:rgba(81,207,102,.45);}
.bc-toast--success .bc-toast-icon{color:#51CF66;}
.bc-toast--error{border-color:rgba(255,68,68,.45);}
.bc-toast-icon{flex-shrink:0;font-size:.95rem;line-height:1;}
.bc-toast-msg{min-width:0;}
@media(prefers-reduced-motion:reduce){.bc-toast{transition:none;}}
/* ════════════════════════════════════════════════════════════════
SHARED — COMMAND PALETTE (Cmd/Ctrl+K, all pages)
════════════════════════════════════════════════════════════════ */
.bc-cmdk{
position:fixed;inset:0;
z-index:999997;
background:rgba(0,0,0,.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
display:flex;align-items:flex-start;justify-content:center;
padding:14vh 20px 20px;
opacity:0;
transition:opacity .18s ease;
}
.bc-cmdk--open{opacity:1;}
.bc-cmdk[hidden]{display:none;}
.bc-cmdk-box{
width:100%;max-width:560px;
background:var(--nav-bg,rgba(14,14,16,.97));
border:1px solid var(--border,rgba(255,255,255,.12));
border-radius:16px;
box-shadow:0 24px 80px rgba(0,0,0,.55);
overflow:hidden;
font-family:'DM Sans',sans-serif;
transform:translateY(-8px) scale(.98);
transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.bc-cmdk--open .bc-cmdk-box{transform:translateY(0) scale(1);}
.bc-cmdk-head{
display:flex;align-items:center;gap:10px;
padding:14px 18px;
border-bottom:1px solid var(--border,rgba(255,255,255,.08));
}
.bc-cmdk-glyph{
color:var(--red,#D0021B);
font-size:1rem;font-weight:700;
flex-shrink:0;
}
.bc-cmdk-input{
flex:1;min-width:0;
background:transparent;border:none;outline:none;
color:var(--fg,#F0EDE8);
font-family:'DM Sans',sans-serif;
font-size:1rem;
}
.bc-cmdk-input::placeholder{color:var(--fg-3,#5A5754);}
.bc-cmdk-esc{
flex-shrink:0;
font-family:'DM Mono',monospace;
font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;
color:var(--fg-3,#5A5754);
border:1px solid var(--border,rgba(255,255,255,.12));
border-radius:5px;
padding:3px 7px;
}
.bc-cmdk-list{
max-height:min(48vh,380px);
overflow-y:auto;
padding:8px;
}
.bc-cmdk-item{
display:flex;align-items:center;gap:12px;
width:100%;
background:transparent;border:none;
border-radius:10px;
padding:10px 12px;
cursor:pointer;
text-align:left;
font-family:'DM Sans',sans-serif;
}
.bc-cmdk-item.is-active{background:var(--border,rgba(255,255,255,.08));}
.bc-cmdk-icon{
flex-shrink:0;
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
font-size:1.05rem;
background:var(--bg-glass,rgba(255,255,255,.05));
border:1px solid var(--border,rgba(255,255,255,.08));
border-radius:9px;
}
.bc-cmdk-meta{display:flex;flex-direction:column;gap:1px;min-width:0;}
.bc-cmdk-name{
font-size:.9rem;font-weight:600;
color:var(--fg,#F0EDE8);
}
.bc-cmdk-name em{
font-style:normal;font-weight:500;
font-size:.72rem;
color:var(--red,#D0021B);
}
.bc-cmdk-hint{
font-size:.74rem;
color:var(--fg-3,#5A5754);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bc-cmdk-empty{
padding:28px 16px;
text-align:center;
font-size:.85rem;
color:var(--fg-3,#5A5754);
}
.bc-cmdk-foot{
padding:9px 18px;
border-top:1px solid var(--border,rgba(255,255,255,.08));
font-family:'DM Mono',monospace;
font-size:.64rem;letter-spacing:.04em;
color:var(--fg-3,#5A5754);
}
@media(prefers-reduced-motion:reduce){
.bc-cmdk,.bc-cmdk-box{transition:none;}
}
/* Mobile — sit higher so the on-screen keyboard doesn't cover the
results, use the full width, and give rows bigger touch targets. */
@media (max-width:560px){
.bc-cmdk{
align-items:flex-start;
padding:calc(env(safe-area-inset-top,0px) + 8vh) 12px 12px;
}
.bc-cmdk-box{border-radius:14px;}
.bc-cmdk-head{padding:12px 14px;gap:8px;}
.bc-cmdk-esc{display:none;} /* no Esc key on touch — close by tapping outside */
.bc-cmdk-input{font-size:16px;} /* 16px keeps iOS from zooming on focus */
.bc-cmdk-list{max-height:min(58vh,440px);padding:6px;}
.bc-cmdk-item{padding:12px 10px;gap:11px;}
.bc-cmdk-icon{width:36px;height:36px;}
.bc-cmdk-hint{font-size:.72rem;}
.bc-cmdk-foot{padding:8px 14px;font-size:.6rem;text-align:center;}
}
/* ════════════════════════════════════════════════════════════════
RADIO — SLEEP TIMER BUTTON STATE
════════════════════════════════════════════════════════════════ */
body[data-page="radio"] .bp-side-btn{position:relative;}
body[data-page="radio"] .bp-side-btn.sleep-active{
color:var(--red,#D0021B);
border-color:var(--red,#D0021B);
}
body[data-page="radio"] .bp-sleep-badge{
position:absolute;
top:-6px;right:-10px;
background:var(--red,#D0021B);
color:#fff;
font-family:'DM Mono',monospace;
font-size:.58rem;font-weight:500;
line-height:1;
padding:3px 5px;
border-radius:8px;
pointer-events:none;
}
/* ════════════════════════════════════════════════════════════════
JOURNALISM — READER MODAL UPGRADES (desk row, cover, tags)
════════════════════════════════════════════════════════════════ */
body[data-page="journalism"] .modal-desk-row{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-bottom:14px;
}
body[data-page="journalism"] .modal-desk-row .modal-desk{margin-bottom:0;}
.modal-category-chip{
font-family:'DM Mono',monospace;
font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--fg-2,#A8A4A0);
border:1px solid var(--border,rgba(255,255,255,.14));
border-radius:20px;
padding:3px 10px;
}
.modal-breaking-badge{
display:inline-flex;align-items:center;gap:6px;
font-family:'DM Mono',monospace;
font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
color:#fff;
background:var(--red,#D0021B);
border-radius:20px;
padding:3px 10px;
}
.mbb-dot{
width:6px;height:6px;border-radius:50%;
background:#fff;
animation:mbb-pulse 1.2s ease-in-out infinite;
}
@keyframes mbb-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@media(prefers-reduced-motion:reduce){.mbb-dot{animation:none;}}
.modal-cover{
margin:0 0 32px;
}
.modal-cover img{
display:block;width:100%;height:auto;
border-radius:12px;
border:1px solid var(--border,rgba(255,255,255,.1));
}
.modal-cover figcaption{
font-family:'DM Mono',monospace;
font-size:.7rem;color:var(--fg-3,#5A5754);
margin-top:8px;letter-spacing:.02em;
}
.modal-tags{
display:flex;flex-wrap:wrap;gap:8px;
margin:28px 0 4px;
}
.modal-tag{
font-family:'DM Mono',monospace;
font-size:.68rem;letter-spacing:.03em;
color:var(--fg-2,#A8A4A0);
background:var(--bg-glass,rgba(255,255,255,.05));
border:1px solid var(--border,rgba(255,255,255,.1));
border-radius:20px;
padding:4px 11px;
}
/* ════════════════════════════════════════════════════════════════
MUSIC — REVIEW MODAL UPGRADES (real cover art thumb, deck)
════════════════════════════════════════════════════════════════ */
body[data-page="music"] .modal-album-art-sm.has-art{
background-size:cover;background-position:center;
}
body[data-page="music"] .modal-deck,
body[data-page="sports"] .modal-deck{
font-size:1rem;color:var(--fg-2);
line-height:1.6;font-style:italic;
margin:-8px 0 20px;
}
/* ════════════════════════════════════════════════════════════════
SPORTS — GAME SCOREBOARD (modal, from coverage schema)
════════════════════════════════════════════════════════════════ */
body[data-page="sports"] .modal-game-meta{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
background:var(--bg-glass,rgba(255,255,255,.04));
border:1px solid var(--border,rgba(255,255,255,.1));
border-radius:14px;
padding:16px 20px;
margin-bottom:20px;
}
body[data-page="sports"] .mgm-matchup{
font-family:'Playfair Display',serif;
font-size:1.05rem;font-weight:700;color:var(--fg);
}
body[data-page="sports"] .mgm-score{
font-family:'DM Mono',monospace;
font-size:1.3rem;font-weight:500;
color:var(--orange-bright,#FF6B35);
letter-spacing:.04em;
}
body[data-page="sports"] .mgm-info{
font-family:'DM Mono',monospace;
font-size:.7rem;color:var(--fg-3);
letter-spacing:.05em;text-transform:uppercase;
margin-left:auto;
}
/* ════════════════════════════════════════════════════════════════
COMMAND PALETTE — SECTION HEADERS (content search)
════════════════════════════════════════════════════════════════ */
.bc-cmdk-section{
font-family:'DM Mono',monospace;
font-size:.6rem;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;
color:var(--fg-3,#5A5754);
padding:10px 14px 4px;
}
.bc-cmdk-loading{
text-align:center;
padding:10px 14px;
opacity:.7;
}
/* ════════════════════════════════════════════════════════════════
PARTY MODE (Konami code easter egg)
════════════════════════════════════════════════════════════════ */
body.bc-party{
animation:bc-party-hue 2.5s linear infinite;
}
body.bc-party .rainbow-bar{
animation:bc-party-slide 0.6s linear infinite;
background-size:200% 100%;
}
@keyframes bc-party-hue{
0%{filter:hue-rotate(0deg);}
100%{filter:hue-rotate(360deg);}
}
@keyframes bc-party-slide{
0%{background-position:0% 0;}
100%{background-position:200% 0;}
}
/* ════════════════════════════════════════════════════════════════
HOME HERO — LIVING TYPOGRAPHY & DECOR (2026 polish)
Entrance reveals already exist (heroReveal); these add gentle
ongoing motion so the hero never feels static. All of it is
disabled under prefers-reduced-motion.
════════════════════════════════════════════════════════════════ */
/* "cast" accent — a slow-breathing red gradient instead of flat color */
body[data-page="home"] .hero-title .title-accent{
background: linear-gradient(120deg, #D0021B 20%, #FF1F3D 45%, #C9A84C 70%, #D0021B 90%);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF1F3D; /* fallback if background-clip:text unsupported */
animation: bc-accent-drift 9s ease-in-out infinite alternate;
}
@keyframes bc-accent-drift{
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* Whole title — a faint sheen sweeps across the letterforms every
~9s. background-clip:text keeps the sheen inside the glyphs only;
the accent opts out via its own clipped gradient above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
body[data-page="home"] .hero-title{
background: linear-gradient(115deg,
var(--fg) 42%,
rgba(255, 255, 255, 0.65) 50%,
var(--fg) 58%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation:
heroReveal 1.2s var(--easing) 0.2s both,
bc-title-sheen 9s ease-in-out 2s infinite;
}
html[data-theme="light"] body[data-page="home"] .hero-title{
background: linear-gradient(115deg,
var(--fg) 42%,
rgba(208, 2, 27, 0.75) 50%,
var(--fg) 58%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
}
}
@keyframes bc-title-sheen{
0%, 55% { background-position: 130% 0; }
85%, 100% { background-position: -130% 0; }
}
/* Tagline — barely-there levitation, like it's floating on the air */
body[data-page="home"] .hero-tagline{
animation:
heroReveal 1.2s var(--easing) 0.3s both,
bc-tagline-float 7s ease-in-out 1.6s infinite;
}
@keyframes bc-tagline-float{
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(-4px); opacity: 0.82; }
}
/* Reduced motion: entrance fades stay (they're one-shot and gentle),
all looping animation stops. */
@media (prefers-reduced-motion: reduce){
body[data-page="home"] .hero-title,
body[data-page="home"] .hero-title .title-accent,
body[data-page="home"] .hero-tagline{
animation: none;
}
}
/* ════════════════════════════════════════════════════════════════
LIGHT THEME — FOOTERS (all pages)
Footers were hardcoded near-black with white text, which left a
stark black slab at the bottom of every page in light mode. In
light mode they now sit on a soft warm tint with ink text; dark
mode is untouched.
════════════════════════════════════════════════════════════════ */
html[data-theme="light"] footer{
background: #ECE9E3 !important;
border-top: 1px solid rgba(0, 0, 0, 0.08);
color: rgba(24, 24, 28, 0.55);
}
html[data-theme="light"] footer .footer-brand,
html[data-theme="light"] footer .f-brand{
color: #18181C !important;
}
html[data-theme="light"] footer .footer-tagline{
color: rgba(24, 24, 28, 0.55);
}
html[data-theme="light"] footer .footer-col-title{
color: rgba(24, 24, 28, 0.4);
}
html[data-theme="light"] footer .footer-links a{
color: rgba(24, 24, 28, 0.6);
}
html[data-theme="light"] footer .footer-links a:hover{
color: #18181C;
}
html[data-theme="light"] footer .footer-copy,
html[data-theme="light"] footer .f-copy{
color: rgba(24, 24, 28, 0.45) !important;
opacity: 1 !important;
}
html[data-theme="light"] footer .footer-home,
html[data-theme="light"] footer .f-home{
color: rgba(24, 24, 28, 0.55) !important;
opacity: 1 !important;
}
html[data-theme="light"] footer .footer-home:hover,
html[data-theme="light"] footer .f-home:hover{
color: #18181C !important;
}
html[data-theme="light"] footer .footer-bottom{
border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] footer .footer-badge{
color: rgba(24, 24, 28, 0.45);
}