/* ═══════════════════════════════════════════════ §1 — DESIGN TOKENS & THEME ENGINE ═══════════════════════════════════════════════ */ :root { --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Cormorant Garamond', 'Georgia', serif; --font-cursive: 'Great Vibes', cursive; --font-display: var(--font-ui); --transition: 0.2s ease; /* Spacing — 8pt grid */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; /* Radius scale */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; /* Type scale */ --text-xs:.6875rem; --text-sm:.8125rem; --text-base:.9375rem; --text-lg:1.0625rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.5rem; --text-4xl:3.5rem; --text-5xl:4.75rem; /* Motion */ --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-1:.12s; --dur-2:.22s; --dur-3:.4s; /* Layout */ --sidebar-w: 280px; --sidebar-w-collapsed: 76px; --player-h: 88px; --header-h: 64px; --glow-color: transparent; --glow-color-2: transparent; --glow-opacity: 0; } [data-theme="light"] { --theme-font-heading: var(--font-display); /* ── Semantic tokens — Porcelain + Graphite + Gold ── */ --bg-base:#F6F5F2; --bg-canvas:#FBFAF8; --surface-1:#FFFFFF; --surface-2:#FCFBF9; --surface-3:#F1EFEB; --surface-hover:rgba(20,18,16,.04); --surface-active:rgba(20,18,16,.07); --border-hairline:rgba(20,18,16,.09); --border-strong:rgba(20,18,16,.14); --text-1:#16151A; --text-2:#5C5A63; --text-3:#8E8C95; --accent:#B8902A; --accent-hover:#A37E1F; --accent-contrast:#FFFFFF; --accent-rose:#C98BA0; --elev-1:0 1px 2px rgba(20,18,16,.05), 0 8px 24px rgba(20,18,16,.06); --elev-2:0 12px 40px rgba(20,18,16,.10); --elev-3:0 24px 64px rgba(20,18,16,.14); --glass-bg:rgba(255,255,255,.70); --glass-blur:blur(24px) saturate(1.4); --glass-border:1px solid rgba(255,255,255,.60); --glass-glow:inset 0 1px 0 rgba(255,255,255,.6); /* ── Legacy aliases → semantic ── */ --bg-app:var(--bg-canvas); --bg-sidebar:transparent; --bg-surface:var(--surface-1); --bg-surface-2:var(--surface-2); --bg-surface-3:var(--surface-3); --bg-hover:var(--surface-hover); --bg-active:var(--surface-active); --bg-player:var(--surface-1); --bg-input:var(--surface-1); --bg-hero:var(--bg-canvas); --border-primary:var(--border-hairline); --border-secondary:var(--border-hairline); --text-primary:var(--text-1); --text-secondary:var(--text-2); --text-tertiary:var(--text-3); --text-placeholder:var(--text-3); --gold:var(--accent); --gold-soft:var(--accent-hover); --cover-bg:var(--surface-3); --scrollbar-thumb:rgba(20,18,16,.18); --gold-badge-bg:linear-gradient(135deg,#B8902A,#C98BA0); --gold-badge-text:#FFFFFF; --mariah-pink:var(--accent-rose); --mariah-rose:var(--accent); --global-radius:var(--radius-lg); --btn-radius:var(--radius-pill); --global-border:1px solid var(--border-hairline); --card-shadow:var(--elev-1); --card-shadow-hover:var(--elev-2); --hover-transform:translateY(-4px); --accent-spill:var(--accent-rose); } [data-theme="dark"] { --theme-font-heading: var(--font-display); /* ── Semantic tokens — Graphite + Gold (flagship) ── */ --bg-base:#0A0A0B; --bg-canvas:#0D0D0F; --surface-1:#141416; --surface-2:#1A1A1D; --surface-3:#222227; --surface-hover:rgba(255,255,255,.05); --surface-active:rgba(255,255,255,.08); --border-hairline:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.12); --text-1:#F5F5F7; --text-2:#A8A8AD; --text-3:#6E6E75; --accent:#D4AF37; --accent-hover:#E6C65A; --accent-contrast:#0A0A0B; --accent-rose:#C99BB0; --elev-1:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.36); --elev-2:0 12px 40px rgba(0,0,0,.50); --elev-3:0 24px 64px rgba(0,0,0,.62); --glass-bg:rgba(18,18,21,.72); --glass-blur:blur(24px) saturate(1.4); --glass-border:1px solid rgba(255,255,255,.08); --glass-glow:none; /* ── Legacy aliases → semantic ── */ --bg-app:var(--bg-canvas); --bg-sidebar:var(--bg-base); --bg-surface:var(--surface-1); --bg-surface-2:var(--surface-2); --bg-surface-3:var(--surface-3); --bg-hover:var(--surface-hover); --bg-active:var(--surface-active); --bg-player:var(--bg-base); --bg-input:rgba(255,255,255,.06); --bg-hero: linear-gradient(to bottom, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.82) 62%, var(--bg-canvas) 100%), url('https://thebluebanner.net/wp-content/uploads/2025/10/Kevin-Eddings-_Here-for-it-all_.jpg') center 20% / cover; --border-primary:var(--border-hairline); --border-secondary:var(--border-hairline); --text-primary:var(--text-1); --text-secondary:var(--text-2); --text-tertiary:var(--text-3); --text-placeholder:var(--text-3); --gold:var(--accent); --gold-soft:var(--accent-hover); --cover-bg:var(--surface-3); --scrollbar-thumb:rgba(255,255,255,.18); --gold-badge-bg:linear-gradient(135deg,rgba(212,175,55,.20),rgba(201,155,176,.14)); --gold-badge-text:var(--accent); --mariah-pink:var(--accent-rose); --mariah-rose:var(--accent); --global-radius:var(--radius-lg); --btn-radius:var(--radius-pill); --global-border:1px solid var(--border-hairline); --card-shadow:var(--elev-1); --card-shadow-hover:var(--elev-2); --hover-transform:translateY(-4px); --accent-spill:var(--accent-rose); } /* ═══════════════════════════════════════════════ §2 — RESET & BASE TYPOGRAPHY ═══════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{background:var(--bg-app)} body{font-family:var(--font-ui);color:var(--text-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;min-height:100vh;width:100%;overflow-x:hidden} body { -webkit-user-select: none; -ms-user-select: none; user-select: none; } img { -webkit-user-drag: none; } @media(min-width:901px){html,body{height:100%;overflow:hidden}} a{text-decoration:none;color:inherit} button{font-family:var(--font-ui);border:none;cursor:pointer;background:none;color:inherit} ul{list-style:none} img{display:block;max-width:100%} .icon{width:20px;height:20px;fill:currentColor;flex-shrink:0} .icon-sm{width:16px;height:16px;fill:currentColor;flex-shrink:0} .cursive{font-family:var(--font-cursive);text-transform:none;font-weight:400;letter-spacing:0} [data-theme="dark"] .cursive{font-family:var(--font-ui)!important;font-size:inherit!important;font-style:italic;transform:none!important} /* ── Range Sliders ── */ input[type=range]{-webkit-appearance:none;width:100%;background:transparent;cursor:pointer;--fill:0%} input[type=range]:focus{outline:none} input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--text-primary) var(--fill),var(--bg-surface-3) var(--fill))} [data-theme="light"] input[type=range]::-webkit-slider-runnable-track{border:1px solid var(--border-primary)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:14px;border-radius:50%;background:var(--text-primary);margin-top:-6px;transition:transform .2s} [data-theme="light"] input[type=range]::-webkit-slider-thumb{background:var(--bg-surface);border:2px solid var(--border-primary)} input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.3);background:var(--gold)} input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--bg-surface-3)} input[type=range]::-moz-range-thumb{height:14px;width:14px;border-radius:50%;background:var(--text-primary);border:none} /* ═══════════════════════════════════════════════ §3 — APP SHELL GRID ═══════════════════════════════════════════════ */ @media(min-width:901px){ .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr var(--player-h);height:100vh;width:100vw} } /* ── Sidebar ── */ .sidebar{grid-row:1/2;background:var(--bg-sidebar);display:flex;flex-direction:column;overflow-y:auto;padding-top:24px;border-right:var(--global-border);z-index:10} [data-theme="light"] .sidebar{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-right:var(--glass-border);box-shadow:var(--glass-glow)} .brand{display:flex;align-items:center;gap:12px;padding:0 24px 32px;cursor:pointer} .brand-icon{width:40px;height:40px;object-fit:cover;border-radius:var(--global-radius);border:var(--global-border)} [data-theme="light"] .brand-icon{box-shadow:0 4px 12px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.4);border-radius:12px} .brand-name{font-family:var(--theme-font-heading);font-size:1.4rem;font-weight:700;letter-spacing:0.5px;text-transform:none;line-height:1} .nav-section{padding:0 16px;margin-bottom:24px} .nav-item{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:var(--global-radius);font-size:.9rem;font-weight:800;text-transform: none;letter-spacing:.5px;color:var(--text-secondary);cursor:pointer;border:2px solid transparent;transition:all .2s;user-select:none} .nav-item:hover{background:var(--bg-surface);color:var(--text-primary)} [data-theme="light"] .nav-item:hover{border-color:rgba(212,175,55,0.2);transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,0.06)} .nav-item.active{background:var(--text-primary);color:var(--bg-app);border-color:var(--border-primary)} [data-theme="light"] .nav-item.active{background:linear-gradient(135deg,#1F1614,#3A2A26);border-color:transparent;box-shadow:0 4px 16px rgba(31,22,20,0.2);border-radius:var(--global-radius)} .library-header{padding:16px 28px 12px;font-size:.75rem;font-weight:800;text-transform: none;;letter-spacing:2px;border-top:var(--global-border);margin-top:12px} .library-list{padding:0 16px;flex:1;overflow-y:auto} .library-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--global-radius);cursor:pointer;border:1px solid transparent;transition:all .15s} .library-item:hover{background:var(--bg-surface);border-color:var(--border-secondary)} .library-item.active{background:var(--bg-active);border-color:var(--border-primary)} .library-item-art{width:40px;height:40px;border-radius:var(--global-radius);background:var(--cover-bg);border:1px solid var(--border-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .library-item-art img{width:100%;height:100%;object-fit:cover} .library-item-info h4{font-size:.85rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px} .library-item-info p{font-size:.7rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase} .sidebar-footer{margin-top:auto;padding:24px;border-top:var(--global-border);flex-shrink:0} .theme-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.8rem;font-weight:800;text-transform: none;} .toggle-track{width:44px;height:24px;background:var(--bg-surface);border:var(--global-border);border-radius:100px;position:relative} [data-theme="dark"] .toggle-track{border:1px solid var(--text-secondary)} .toggle-thumb{width:14px;height:14px;background:var(--text-primary);border-radius:50%;position:absolute;top:3px;left:4px;transition:transform .25s cubic-bezier(.4,0,.2,1)} [data-theme="dark"] .toggle-thumb{transform:translateX(20px)} /* ── Main Area ── */ .main{grid-row:1/2;overflow-y:auto;background:transparent;position:relative;z-index:1} [data-theme="dark"] .main{background:transparent !important} .main::-webkit-scrollbar{width:10px} .main::-webkit-scrollbar-track{background:var(--bg-app)} .main::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border:2px solid var(--bg-app);border-radius:var(--global-radius)} /* ── Glow System — Independent Floating Orbs ── */ @keyframes orbFloat1{ 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(12vw,-8vh) scale(1.08)} 50%{transform:translate(-5vw,15vh) scale(0.95)} 75%{transform:translate(18vw,5vh) scale(1.12)} 100%{transform:translate(0,0) scale(1)} } @keyframes orbFloat2{ 0%{transform:translate(0,0) scale(1.05)} 33%{transform:translate(-15vw,10vh) scale(0.92)} 66%{transform:translate(8vw,-12vh) scale(1.1)} 100%{transform:translate(0,0) scale(1.05)} } @keyframes orbFloat3{ 0%{transform:translate(0,0) scale(0.98)} 20%{transform:translate(10vw,18vh) scale(1.06)} 40%{transform:translate(-12vw,-5vh) scale(0.94)} 60%{transform:translate(5vw,-15vh) scale(1.1)} 80%{transform:translate(-8vw,8vh) scale(1.02)} 100%{transform:translate(0,0) scale(0.98)} } @keyframes orbFloat4{ 0%{transform:translate(0,0) scale(1.02)} 50%{transform:translate(-10vw,-10vh) scale(0.96)} 100%{transform:translate(0,0) scale(1.02)} } .glow-layer{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--glow-opacity);transition:opacity 1.2s ease-in-out;overflow:hidden} .glow-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform} .glow-orb-1{width:55vmax;height:55vmax;top:-10%;left:-15%;filter:blur(140px);mix-blend-mode:soft-light;animation:orbFloat1 22s ease-in-out infinite;opacity:.7} .glow-orb-2{width:45vmax;height:45vmax;top:30%;right:-10%;filter:blur(160px);mix-blend-mode:soft-light;animation:orbFloat2 28s ease-in-out infinite;animation-delay:-5s;opacity:.55} .glow-orb-3{width:40vmax;height:40vmax;bottom:-5%;left:25%;filter:blur(130px);mix-blend-mode:soft-light;animation:orbFloat3 32s ease-in-out infinite;animation-delay:-10s;opacity:.5} .glow-orb-4{width:35vmax;height:35vmax;top:50%;left:50%;filter:blur(150px);mix-blend-mode:soft-light;animation:orbFloat4 20s ease-in-out infinite;animation-delay:-3s;opacity:.4} .glow-layer.paused .glow-orb{animation-play-state:paused} [data-theme="light"] .glow-layer{opacity:calc(var(--glow-opacity) * 1.2)} [data-theme="light"] .glow-orb{mix-blend-mode:soft-light} .glow-layer.ambient-off{opacity:0!important} /* ── Film Grain Noise Overlay ── */ [data-theme="light"] body::after{ content:'';position:fixed;inset:0;z-index:9998;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)'/%3E%3C/svg%3E"); opacity:0.035;mix-blend-mode:overlay; } /* ── The Elusive Watermark ── */ body::before { content: ''; position: fixed; bottom: -5vh; right: -2vw; font-size: 60vh; opacity: 0.02; pointer-events: none; z-index: 0; filter: grayscale(100%) sepia(100%) hue-rotate(5deg) saturate(500%); /* Turns it a soft gold */ } /* ── Signature Accents ── */ .mariah-signature { font-family: 'Great Vibes', cursive; font-size: 2.2rem; color: var(--gold); font-weight: 400; opacity: 0.8; margin-bottom: -10px; /* Pulls the main title up into it */ display: block; } /* ── Sparkle Particles ── */ @keyframes sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}} .sparkle-particle{position:absolute;width:6px;height:6px;pointer-events:none;z-index:9999;animation:sparkle 0.6s ease-out forwards} .sparkle-particle::before,.sparkle-particle::after{content:'';position:absolute;background:var(--gold, #D4AF37)} .sparkle-particle::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)} .sparkle-particle::after{width:2px;height:100%;left:50%;top:0;transform:translateX(-50%)} /* ── MC Monogram Crest (Easter Egg) ── */ .mc-crest{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:70vmin;height:70vmin;pointer-events:none;z-index:0;opacity:0.12} .mc-crest svg{width:100%;height:100%} [data-theme="dark"] .mc-crest{opacity:0.06} /* ── Fantasy Rollercoaster (Easter Egg) ── */ .rollercoaster-track{position:fixed;bottom:0;left:0;width:45vw;height:120px;pointer-events:none;z-index:0;opacity:0.25} [data-theme="dark"] .rollercoaster-track{opacity:0.10} .rollercoaster-track svg{width:100%;height:100%} /* ── Stardust Cursor (Desktop Easter Egg) ── */ @keyframes stardustFade{0%{opacity:1;transform:scale(1) rotate(0deg)}100%{opacity:0;transform:scale(0) rotate(180deg) translateY(-20px)}} .stardust-particle{position:fixed;pointer-events:none;z-index:9999;animation:stardustFade 0.7s ease-out forwards} .stardust-particle::before,.stardust-particle::after{content:'';position:absolute;background:var(--gold)} .stardust-particle::before{width:100%;height:1.5px;top:50%;left:0;transform:translateY(-50%)} .stardust-particle::after{width:1.5px;height:100%;left:50%;top:0;transform:translateX(-50%)} .stardust-particle.dot{border-radius:50%;background:var(--gold-soft)} .stardust-particle.dot::before,.stardust-particle.dot::after{display:none} /* ── Rainbow Arc ── */ .rainbow-arc { position: fixed; bottom: -500px; top: auto; left: 50%; transform: translateX(-50%); width: 1000px; height: 1000px; border-radius: 50%; pointer-events: none; z-index: 0; background: transparent; box-shadow: 0 0 0 15px rgba(200, 180, 255, 0.7), 0 0 0 35px rgba(180, 220, 255, 0.7), 0 0 0 55px rgba(180, 255, 200, 0.6), 0 0 0 75px rgba(255, 255, 180, 0.6), 0 0 0 95px rgba(255, 218, 185, 0.7), 0 0 0 115px rgba(255, 182, 193, 0.7); filter: blur(35px); opacity: 0.65; } [data-theme="dark"] .rainbow-arc { opacity: 0.00; /* Moodier for dark mode */ filter: blur(45px); } /* ── Glitter Grain (Top Requested shimmer) ── */ @keyframes glitterShimmer{0%{background-position:0 0}100%{background-position:256px 256px}} .top-requests-row{position:relative} .top-requests-row::before{content:'';position:absolute;inset:-20px;pointer-events:none;z-index:0;border-radius:var(--global-radius); 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='1.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:0.06;mix-blend-mode:overlay;animation:glitterShimmer 3s linear infinite} [data-theme="dark"] .top-requests-row::before{opacity:0.08;mix-blend-mode:soft-light} /* ── Lamb Star Chart (Dark mode constellation) ── */ .lamb-constellation{position:fixed;top:15%;right:10%;width:200px;height:180px;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s} [data-theme="dark"] .lamb-constellation{opacity:0.12} .lamb-constellation .star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;box-shadow:0 0 4px 1px rgba(255,255,255,0.4)} .lamb-constellation .star.bright{width:4px;height:4px;box-shadow:0 0 6px 2px rgba(255,255,255,0.6)} .lamb-constellation .star-lines{position:absolute;inset:0} .lamb-constellation .star-lines line{stroke:rgba(255,255,255,0.08);stroke-width:1} /* ── Floating Polaroid Frames (Easter Egg) ── */ @keyframes polaroidFloat{0%{transform:translateY(100vh) rotate(var(--pf-rot));opacity:0}10%{opacity:0.08}80%{opacity:0.08}100%{transform:translateY(-120vh) rotate(calc(var(--pf-rot) + 15deg));opacity:0}} .floating-frame{position:fixed;pointer-events:none;z-index:0;background:#fff;border:1px solid rgba(0,0,0,0.08);box-shadow:0 2px 12px rgba(0,0,0,0.06);animation:polaroidFloat var(--pf-dur) linear infinite;animation-delay:var(--pf-delay);opacity:0} .floating-frame-inner{width:calc(100% - 12px);height:calc(100% - 24px);margin:6px 6px 18px;border:1px solid rgba(0,0,0,0.04);background:rgba(0,0,0,0.02)} [data-theme="dark"] .floating-frame{background:#1a1a1a;border-color:rgba(255,255,255,0.04);box-shadow:0 2px 12px rgba(0,0,0,0.3)} [data-theme="dark"] .floating-frame-inner{border-color:rgba(255,255,255,0.03);background:rgba(255,255,255,0.02)} /* ── Player Bar Ambient Color Integration ── */ .player{--player-accent:var(--gold);--player-accent-soft:var(--gold-soft);transition:--player-accent 1.5s ease,--player-accent-soft 1.5s ease} .player.ambient-active{background:linear-gradient(270deg,var(--bg-surface),color-mix(in srgb,var(--player-accent) 15%,transparent),var(--bg-surface))!important;background-size:200% 200%;animation:honeyGlow 8s ease infinite} .player.ambient-off-bar{background:var(--bg-player)!important;animation:none!important} [data-theme="light"] .player.ambient-off-bar{background:var(--glass-bg)!important} /* ── Theme Toggle Tooltip ── */ .sidebar-footer{position:relative} .theme-toggle-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(0.95);background:var(--bg-surface);border:var(--global-border);border-radius:8px;padding:6px 14px;font-size:.72rem;font-weight:700;color:var(--gold);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 4px 16px rgba(0,0,0,0.1);font-style:italic} .sidebar-footer:hover .theme-toggle-tip{opacity:1;transform:translateX(-50%) scale(1)} /* ── Floating Butterflies ── */ .floating-bfly { position: fixed; pointer-events: none; z-index: 9998; width: 45px; height: 45px; display: inline-block; margin-top: var(--bfly-y, 0px); /* Dropped from 0.2 down to 0.08 for a soft Dark Mode watermark */ opacity: 0; } [data-theme="light"] .floating-bfly { /* Dropped from 0.4 down to 0.15 for Light Mode */ opacity:0; } /* The base wing-flap animation (constant across all types) */ /* ──── The Organic Wing Flap & Bounce ──── */ @keyframes bflyFlutter { 0% { transform: rotateY(0deg) translateY(0px); } 100% { transform: rotateY(65deg) translateY(-12px); } } .floating-bfly svg { /* Much faster, more erratic wing flap */ animation: bflyFlutter 0.4s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate; transform-origin: center center; } /* ──── Define Wide, Sweeping Flight Paths ──── */ /* Path 1: The Drifter (Wide, slow arcs across the screen) */ @keyframes bflyPath1 { 0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); } 25% { transform: translate(20vw, -25vh) rotate(15deg) scale(1.1); } 50% { transform: translate(-15vw, -10vh) rotate(-10deg) scale(0.9); } 75% { transform: translate(25vw, 15vh) rotate(25deg) scale(1.05); } 100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); } } /* Path 2: The Swooper (Deep diving and climbing) */ @keyframes bflyPath2 { 0% { transform: translate(0vw, 0vh) rotate(-15deg); } 33% { transform: translate(-25vw, 35vh) rotate(30deg); } 66% { transform: translate(35vw, -20vh) rotate(-25deg); } 100% { transform: translate(0vw, 0vh) rotate(-15deg); } } /* Path 3: The Wanderer (Erratic, large figure-8 motions) */ @keyframes bflyPath3 { 0% { transform: translate(0vw, 0vh) rotate(10deg); } 20% { transform: translate(-30vw, -30vh) rotate(-20deg); } 40% { transform: translate(20vw, -45vh) rotate(35deg); } 60% { transform: translate(40vw, 15vh) rotate(-30deg); } 80% { transform: translate(-15vw, 25vh) rotate(20deg); } 100% { transform: translate(0vw, 0vh) rotate(10deg); } } /* Apply the paths with long, staggered durations so they never perfectly sync up */ .bfly-path1 { animation: bflyPath1 45s ease-in-out infinite; } .bfly-path2 { animation: bflyPath2 38s ease-in-out infinite; } .bfly-path3 { animation: bflyPath3 32s ease-in-out infinite; } /* Assign paths and random delays to each specific butterfly instance */ /* We are adding 6 butterflies in the HTML to create a true 'swarm' effect */ .floating-bfly:nth-of-type(1){animation-delay:0s;left:10%;top:10%} .floating-bfly:nth-of-type(2){animation-delay:-5s;left:25%;top:20%} .floating-bfly:nth-of-type(3){animation-delay:-10s;left:40%;top:15%} .floating-bfly:nth-of-type(4){animation-delay:-15s;left:60%;top:25%} .floating-bfly:nth-of-type(5){animation-delay:-20s;left:75%;top:10%} .floating-bfly:nth-of-type(6){animation-delay:-25s;left:90%;top:20%} /* Butterfly Types (Using CSS filters to change colors while keeping details!) */ .type-orange svg { filter: none; } .type-blue svg { filter: hue-rotate(190deg) saturate(1.5); } .type-pastel svg { filter: hue-rotate(280deg) saturate(0.8) brightness(1.2); } .floating-bfly svg { width: 100%; height: 100%; } /* ── Honey Gradient Animation ── */ @keyframes honeyGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .player { background: linear-gradient(270deg, var(--bg-surface), color-mix(in srgb, var(--player-accent, var(--gold)) 15%, transparent), var(--bg-surface)) !important; background-size: 200% 200%; animation: honeyGlow 8s ease infinite; border-top: 1px solid rgba(212, 175, 55, 0.3) !important; } [data-theme="dark"] .player { background: linear-gradient(270deg, #080808, #1a1614, #080808) !important; background-size: 200% 200%; animation: honeyGlow 8s ease infinite; border-top: 1px solid rgba(212, 175, 55, 0.15) !important; } /* ── Sticky Header ── */ .main-header{position:sticky;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;z-index:1000;border-bottom:var(--global-border);background:rgba(251,246,244,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .3s} [data-theme="light"] .main-header{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:var(--glass-border);box-shadow:var(--glass-glow)} [data-theme="dark"] .main-header{background:rgba(18,18,18,.75);border-bottom:1px solid var(--border-secondary)} .header-left{display:flex;align-items:center;gap:20px} .nav-arrows{display:flex;gap:8px} .arrow-btn{width:32px;height:32px;border-radius:50%;background:var(--bg-surface-3);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);border:1px solid var(--border-secondary);cursor:pointer;transition:.2s} .arrow-btn:hover{color:var(--text-primary);transform:scale(1.05)} .header-title-dynamic{font-family:var(--theme-font-heading);font-size:1.1rem;font-weight:800;text-transform:none;letter-spacing:0.3px;color:var(--text-primary)} .header-search{position:relative;width:100%;max-width:320px} .search-input{width:100%;padding:10px 20px 10px 42px;border-radius:var(--btn-radius);border:var(--global-border);background:var(--bg-surface);font-family:var(--font-ui);color:var(--text-primary);font-size:.85rem;font-weight:700;outline:none;transition:.2s} .search-input::placeholder{color:var(--text-placeholder)} [data-theme="light"] .search-input{box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid rgba(31,22,20,0.1);backdrop-filter:blur(12px);background:rgba(255,255,255,0.7)} [data-theme="light"] .search-input:focus{transform:none;box-shadow:0 4px 20px rgba(212,175,55,0.15);border-color:rgba(212,175,55,0.3)} [data-theme="dark"] .search-input{border:1px solid var(--border-secondary)} [data-theme="dark"] .search-input:focus{border-color:var(--gold)} .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none} .search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);max-height:320px;overflow-y:auto;display:none;z-index:1001} .search-dropdown.active{display:block} [data-theme="light"] .search-dropdown{box-shadow:0 12px 40px rgba(0,0,0,0.1);backdrop-filter:blur(20px);border:var(--glass-border)} [data-theme="dark"] .search-dropdown{border:1px solid var(--border-secondary);box-shadow:0 8px 32px rgba(0,0,0,.7)} .search-dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .15s} .search-dropdown-item:hover{background:var(--bg-hover)} .search-dropdown-item img{width:36px;height:36px;border-radius:var(--global-radius);object-fit:cover} .search-dropdown-info{min-width:0} .search-dropdown-info h5{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .search-dropdown-info p{font-size:.7rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase} .search-recent-header{padding:10px 16px 6px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-tertiary);border-bottom:1px solid var(--border-secondary)} .mobile-theme-btn{display:none} /* ═══════════════════════════════════════════════ §4 — HERO & CONTENT AREA ═══════════════════════════════════════════════ */ .hero{position:relative;padding:100px 48px 60px;background:var(--bg-hero);border-bottom:var(--global-border);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:520px} [data-theme="light"] .hero{text-align:center;align-items:center;z-index:1;background:rgba(232,184,176,0.15);backdrop-filter:blur(24px) saturate(1.4);border-bottom:var(--glass-border)} [data-theme="light"] .hero::before{content:'';position:absolute;inset:0;z-index:0;background:url('https://thebluebanner.net/wp-content/uploads/2025/10/Kevin-Eddings-_Here-for-it-all_.jpg') center 20%/cover;filter:grayscale(100%) contrast(1.1) opacity(.2);mix-blend-mode:luminosity} [data-theme="dark"] .hero::before{display:none} .hero>*{position:relative;z-index:2} .butterfly-decor{position:absolute;z-index:1;opacity:0;pointer-events:none} [data-theme="light"] .butterfly-decor{opacity:1} .butterfly-decor.b1{top:16%;right:12%;color:rgba(26,26,26,.12);transform:rotate(15deg)} .butterfly-decor.b2{bottom:20%;left:8%;color:rgba(26,26,26,.08);transform:rotate(-20deg)} .butterfly-decor.b3{top:30%;left:5%;color:rgba(201,138,134,.15);transform:rotate(25deg)} .hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:none;margin-bottom:24px} [data-theme="light"] .hero-badge{border:1px solid rgba(212,175,55,0.3);padding:6px 16px;border-radius:100px;background:rgba(255,255,255,0.6);backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(212,175,55,0.1)} .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)} .hero-title{font-family:var(--theme-font-heading);font-size:5rem;font-weight:700;letter-spacing:0;line-height:1.05;margin-bottom:20px} [data-theme="light"] .hero-title{text-transform:none;letter-spacing:0} .hero-desc{font-size:1.05rem;font-weight:500;max-width:560px;line-height:1.65;margin-bottom:32px;color:var(--text-secondary)} .waitlist-row{display:flex;gap:12px;max-width:440px;width:100%} .waitlist-form{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:440px;width:100%} .waitlist-form .waitlist-row{max-width:100%} .waitlist-yt-row{display:flex;align-items:center;gap:0;width:100%;max-width:320px;position:relative;opacity:0.7;transition:opacity .3s} .waitlist-yt-row:focus-within{opacity:1} .waitlist-yt-at{position:absolute;left:16px;font-family:var(--font-ui);font-size:.8rem;font-weight:700;color:var(--text-tertiary);pointer-events:none;z-index:1} .waitlist-yt-input{width:100%;padding:10px 16px 10px 32px;border-radius:var(--btn-radius);border:var(--global-border);background:transparent;color:var(--text-secondary);font-family:var(--font-ui);font-size:.78rem;font-weight:600;outline:none;transition:.2s;letter-spacing:.2px} .waitlist-yt-input::placeholder{color:var(--text-placeholder);font-weight:500;font-size:.76rem} [data-theme="light"] .waitlist-yt-input{border:1px dashed rgba(31,22,20,0.12);background:rgba(255,255,255,0.3)} [data-theme="light"] .waitlist-yt-input:focus{border-style:solid;border-color:rgba(212,175,55,0.3);background:rgba(255,255,255,0.6);box-shadow:0 2px 12px rgba(212,175,55,0.1)} [data-theme="dark"] .waitlist-yt-input{border:1px dashed rgba(255,255,255,0.1)} [data-theme="dark"] .waitlist-yt-input:focus{border-style:solid;border-color:var(--text-secondary);background:var(--bg-surface-3)} .waitlist-input{flex:1;padding:16px 24px;border-radius:var(--btn-radius);border:var(--global-border);background:var(--bg-input);color:var(--text-primary);font-family:var(--font-ui);font-size:.9rem;font-weight:600;outline:none;transition:.2s} .waitlist-input::placeholder{color:var(--text-placeholder)} [data-theme="light"] .waitlist-input{box-shadow:0 2px 16px rgba(0,0,0,0.06);background:rgba(255,255,255,0.7);backdrop-filter:blur(12px);border:1px solid rgba(31,22,20,0.1)} [data-theme="light"] .waitlist-input:focus{transform:none;box-shadow:0 4px 24px rgba(212,175,55,0.15);border-color:rgba(212,175,55,0.3)} [data-theme="dark"] .waitlist-input:focus{background:var(--bg-surface-3);border-color:var(--text-secondary)} .waitlist-btn{padding:0 32px;border-radius:var(--btn-radius);background:var(--text-primary);color:var(--bg-app);font-size:.9rem;font-weight:700;text-transform:none;letter-spacing:0.3px;border:var(--global-border);transition:.2s} .waitlist-btn:disabled{opacity:.5;cursor:not-allowed} [data-theme="light"] .waitlist-btn{box-shadow:0 4px 20px rgba(212,175,55,0.25);background:linear-gradient(135deg,#1F1614,#3A2A26);border:none} [data-theme="light"] .waitlist-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(212,175,55,0.35)} [data-theme="dark"] .waitlist-btn:hover{transform:scale(1.05)} #form-status{display:none;font-size:.85rem;margin-top:16px;font-weight:800;border:var(--global-border);border-radius:var(--global-radius);padding:8px 16px;background:var(--bg-surface);color:var(--gold)} /* ── Success Celebration Sparkles ── */ @keyframes goldSparkle{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}60%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0) rotate(var(--sr))}} .celebration-sparkle{position:absolute;pointer-events:none;z-index:9999;border-radius:50%;background:var(--gold, #D4AF37);animation:goldSparkle 0.9s ease-out forwards;box-shadow:0 0 6px var(--gold, #D4AF37)} .celebration-sparkle.diamond::before,.celebration-sparkle.diamond::after{content:'';position:absolute;background:var(--gold, #D4AF37)} .celebration-sparkle.diamond::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)} .celebration-sparkle.diamond::after{width:2px;height:100%;left:50%;top:0;transform:translateX(-50%)} @keyframes formGoldPulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,0.5)}50%{box-shadow:0 0 30px 10px rgba(212,175,55,0.3)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}} .form-celebrate{animation:formGoldPulse 1.2s ease-out} .waitlist-form.submitted .waitlist-row,.waitlist-form.submitted .waitlist-yt-row{pointer-events:none;opacity:0;max-height:0;overflow:hidden;margin:0;padding:0;transition:opacity .4s,max-height .5s .1s} .waitlist-overflow{font-size:.85rem;font-weight:700;color:var(--text-secondary);margin-top:12px;text-align:center;line-height:1.6} .waitlist-overflow a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-weight:800;transition:color .2s} .waitlist-overflow a:hover{color:var(--gold-soft)} .stats-row{display:flex;gap:48px;margin-top:40px;flex-wrap:wrap} .stat-value{font-family:var(--theme-font-heading);font-size:1.4rem;font-weight:700} .stat-label{font-size:.7rem;font-weight:800;text-transform: none;letter-spacing:1px;color:var(--text-tertiary);margin-top:4px} .content-area{padding:60px 48px 120px;background:transparent;position:relative;overflow-x:hidden} [data-theme="dark"] .content-area{background:transparent !important} .mariah-overload{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;display:none} [data-theme="light"] .mariah-overload{display:block} [data-theme="light"] .content-area>*:not(.mariah-overload){position:relative;z-index:2} .floating-butterfly{position:absolute;color:var(--mariah-pink);opacity:.08} .fb-1{top:5%;right:5%;width:80px;height:80px;transform:rotate(15deg)} .fb-2{top:30%;left:1%;width:100px;height:100px;transform:rotate(-25deg);opacity:.05} .fb-3{top:55%;right:8%;width:60px;height:60px;transform:rotate(40deg)} .fb-4{bottom:12%;left:8%;width:70px;height:70px;transform:rotate(-10deg);opacity:.06} .cursive-watermark{position:absolute;font-family:var(--font-cursive);color:var(--mariah-pink);opacity:.06;white-space:nowrap;pointer-events:none} .cw-1{top:22%;left:15%;font-size:7rem;transform:rotate(-8deg)} .cw-2{top:65%;right:5%;font-size:9rem;transform:rotate(-5deg)} .polaroid{position:absolute;background:#fff;padding:10px 10px 32px;border:2px solid var(--border-primary);box-shadow:6px 6px 0 var(--border-primary);z-index:1;opacity:.85;transition:transform .3s,opacity .3s;pointer-events:auto} .polaroid:hover{transform:scale(1.05) rotate(0deg)!important;opacity:1;z-index:10} .polaroid img{width:130px;height:130px;object-fit:cover;border:1px solid var(--border-primary);filter:grayscale(100%) sepia(20%) hue-rotate(300deg) saturate(150%)} .polaroid-label{text-align:center;margin-top:8px;font-family:var(--font-cursive);color:#1A1A1A;font-size:1.4rem} .p-1{top:8%;right:-10px;transform:rotate(8deg)} .p-2{top:48%;left:-20px;transform:rotate(-6deg)} .section-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;border-bottom:var(--global-border);padding-bottom:12px} .section-title{font-family:var(--theme-font-heading);font-size:2rem;font-weight:700;text-transform: none;} .section-action{font-size:.8rem;font-weight:700;text-transform:none;padding:4px 12px;transition:.2s;color:var(--text-secondary);cursor:pointer;flex-shrink:0} [data-theme="light"] .section-action{border:1px solid rgba(31,22,20,0.1);box-shadow:0 2px 8px rgba(0,0,0,0.05);color:var(--text-primary);background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);border-radius:100px} [data-theme="light"] .section-action:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.1);background:var(--text-primary);color:var(--bg-app)} [data-theme="dark"] .section-action:hover{color:var(--text-primary)} .quality-section{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:64px} .quality-badge{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--bg-surface-2);border:var(--global-border);border-radius:var(--global-radius);flex:1;min-width:180px} [data-theme="light"] .quality-badge{box-shadow:0 8px 32px rgba(0,0,0,0.06);backdrop-filter:blur(20px);border:var(--glass-border);background:var(--glass-bg)} .quality-badge h4{font-family:var(--theme-font-heading);font-size:1.15rem;font-weight:700;margin-bottom:4px} .quality-badge p{font-size:.75rem;color:var(--text-tertiary);font-weight:700;text-transform:uppercase} .album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;margin-bottom:64px} .album-card{background:var(--bg-surface-2);border:var(--global-border);padding:16px;border-radius:var(--global-radius);box-shadow:var(--card-shadow);cursor:pointer;transition:transform .2s,box-shadow .2s} [data-theme="light"] .album-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:var(--glass-border);box-shadow:var(--glass-glow),var(--card-shadow)} .album-card:hover{transform:var(--hover-transform);box-shadow:var(--card-shadow-hover)} .album-art{width:100%;aspect-ratio:1;border-radius:var(--global-radius);border:var(--global-border);background:var(--cover-bg);margin-bottom:14px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden} .album-art img{width:100%;height:100%;object-fit:cover} [data-theme="dark"] .album-art{box-shadow:0 8px 24px rgba(0,0,0,.3)} .album-art .icon{opacity:.4;width:36px;height:36px} .album-play-overlay{position:absolute;background:var(--gold);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .2s} [data-theme="light"] .album-play-overlay{bottom:-10px;right:-10px;width:44px;height:44px;border-radius:50%;border:var(--global-border);box-shadow:2px 2px 0px var(--border-primary)} [data-theme="dark"] .album-play-overlay{bottom:8px;right:8px;width:48px;height:48px;border-radius:50%;transform:translateY(8px);box-shadow:0 8px 16px rgba(0,0,0,.4)} .album-play-overlay svg{width:20px;height:20px;fill:#000;margin-left:2px} .album-card:hover .album-play-overlay{opacity:1;transform:translateY(0)} .album-name{font-family:var(--theme-font-heading);font-size:1rem;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .album-meta{font-size:.75rem;color:var(--text-tertiary);font-weight:700;text-transform:uppercase} /* ═══════════════════════════════════════════════ §5 — TRACKLIST (5-column with heart + actions) ═══════════════════════════════════════════════ */ .tracklist{margin-bottom:64px;border:var(--global-border);border-radius:var(--global-radius);background:var(--bg-surface);overflow:hidden} [data-theme="light"] .tracklist{box-shadow:var(--card-shadow);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:var(--glass-border)} .track-header{display:grid;grid-template-columns:48px 1fr 70px 60px 40px;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-secondary);background:var(--bg-surface-3)} [data-theme="light"] .track-header{border-bottom:var(--global-border)} .track-header span{font-size:.7rem;font-weight:700;text-transform:none;letter-spacing:0.3px} .track-header span:nth-child(4){text-align:right} .track-header span:nth-child(3){text-align:center} .track-header span:last-child{text-align:center} .track-row{display:grid;grid-template-columns:48px 1fr 70px 60px 40px;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-secondary);cursor:pointer;transition:background .15s} .track-row:last-child{border-bottom:none} .track-row:hover{background:var(--bg-hover)} .track-row:hover .track-num{color:var(--gold)!important;transform:scale(1.1);transition:.2s} .track-row.playing{background:var(--bg-active)} .track-row.playing .track-num{color:var(--gold)!important} .track-num{font-family:var(--theme-font-heading);font-size:1.1rem;font-weight:700;text-align:center;color:var(--text-tertiary)} .track-info{display:flex;flex-direction:column;gap:3px;min-width:0} .track-title{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .track-artist{font-size:.75rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase} .track-format{font-size:.65rem;font-weight:800;color:var(--bg-app);background:var(--text-primary);padding:4px 10px;border-radius:var(--global-radius);text-align:center;justify-self:center} .track-duration{font-size:.85rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-tertiary)} .track-heart{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:all .2s;padding:4px;border-radius:50%} .track-heart:hover{color:var(--gold);transform:scale(1.25)} .track-heart.liked{color:var(--gold)} .track-heart svg{width:16px;height:16px} /* ═══════════════════════════════════════════════ §6 — VIDEO GRID ═══════════════════════════════════════════════ */ .video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:64px} .video-card{background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s} [data-theme="light"] .video-card{box-shadow:0 8px 32px rgba(0,0,0,0.06);backdrop-filter:blur(16px);border:var(--glass-border)} .video-card:hover{transform:var(--hover-transform)} [data-theme="light"] .video-card:hover{box-shadow:var(--card-shadow-hover)} .video-card.active{background:var(--bg-active)} [data-theme="dark"] .video-card.active{border-color:var(--gold)} .video-thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;background:var(--cover-bg);border-bottom:var(--global-border);overflow:hidden} .video-thumb-wrap img{width:100%;height:100%;object-fit:cover} .duration-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.85);color:#fff;font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:var(--global-radius);font-variant-numeric:tabular-nums} [data-theme="light"] .duration-badge{border:1px solid #fff} .video-card-info{padding:14px 16px} .video-card-title{font-family:var(--theme-font-heading);font-size:1rem;font-weight:700;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3} .video-card-meta{font-size:.72rem;color:var(--text-tertiary);font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:8px} .video-card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-tertiary)} .video-empty,.video-loading{text-align:center;padding:48px 20px;font-family:var(--theme-font-heading);font-size:1.1rem;font-weight:700;color:var(--text-tertiary);border:var(--global-border);border-style:dashed;border-radius:var(--global-radius);margin-bottom:40px} .disclaimer{padding:24px;border:var(--global-border);border-radius:var(--global-radius);background:var(--bg-surface)} [data-theme="light"] .disclaimer{box-shadow:0 8px 32px rgba(0,0,0,0.06);backdrop-filter:blur(16px);border:var(--glass-border)} .disclaimer p{font-size:.8rem;font-weight:500;line-height:1.6;color:var(--text-tertiary)} /* ═══════════════════════════════════════════════ §7 — ERA PAGE HERO ═══════════════════════════════════════════════ */ .era-hero{padding:60px 48px;display:flex;gap:40px;align-items:flex-end;border-bottom:var(--global-border);overflow:hidden;position:relative} .era-hero>*{position:relative;z-index:1} .era-cover{width:200px;height:200px;border-radius:var(--global-radius);border:var(--global-border);background:var(--cover-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} [data-theme="light"] .era-cover{box-shadow:0 12px 40px rgba(0,0,0,0.1);border:var(--glass-border);border-radius:16px} .era-cover img{width:100%;height:100%;object-fit:cover} .era-details{display:flex;flex-direction:column;gap:8px} .era-label{font-size:.75rem;font-weight:700;text-transform:none;letter-spacing:0.5px;color:var(--text-tertiary)} .era-name{font-family:var(--theme-font-heading);font-size:3.25rem;font-weight:700;line-height:1.1;letter-spacing:0} [data-theme="light"] .era-name{text-transform:none;letter-spacing:0} .era-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.5;max-width:500px;margin-top:8px} .era-stats{display:flex;gap:16px;margin-top:12px;font-size:.75rem;font-weight:700;color:var(--text-tertiary);text-transform:uppercase} .play-all-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:var(--gold);color:#000;font-size:.9rem;font-weight:700;text-transform:none;letter-spacing:0.3px;border:var(--global-border);border-radius:var(--btn-radius);cursor:pointer;transition:.2s;margin-top:16px} [data-theme="light"] .play-all-btn{box-shadow:0 4px 20px rgba(212,175,55,0.3);border:none} .play-all-btn:hover{transform:var(--hover-transform);box-shadow:var(--card-shadow-hover)} .play-all-btn svg{width:20px;height:20px;fill:#000} .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;gap:16px} .empty-icon{width:64px;height:64px;color:var(--text-tertiary);opacity:.4} .empty-state h3{font-family:var(--theme-font-heading);font-size:1.6rem;font-weight:700} .empty-state p{font-size:.9rem;color:var(--text-tertiary);max-width:360px} /* ═══════════════════════════════════════════════ §8 — PLAYER BAR ═══════════════════════════════════════════════ */ .player{grid-column:1/-1;grid-row:2/3;z-index:100;background:var(--bg-player);border-top:var(--global-border);display:grid;grid-template-columns:280px 1fr 340px;align-items:center;padding:0 24px;position:relative} [data-theme="light"] .player{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:var(--glass-border);box-shadow:var(--glass-glow),0 -8px 32px rgba(0,0,0,0.04)} [data-theme="dark"] .player{border-top:1px solid var(--border-secondary)} .player-track{display:flex;align-items:center;gap:14px;min-width:0} .player-art{width:56px;height:56px;border-radius:var(--global-radius);border:var(--global-border);background:var(--cover-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;cursor:pointer;position:relative} [data-theme="light"] .player-art{box-shadow:0 4px 16px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.3);border-radius:12px} .player-meta{min-width:0} .player-meta h4{font-family:var(--theme-font-heading);font-size:.95rem;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;cursor:pointer;transition:color .2s} .player-meta h4:hover{color:var(--gold)} .player-meta p{font-size:.7rem;color:var(--text-tertiary);font-weight:700;text-transform:none} .player-controls{display:flex;flex-direction:column;align-items:center;gap:6px} .controls-row{display:flex;align-items:center;gap:20px} .controls-row button{transition:transform .15s;display:flex;align-items:center;justify-content:center} .controls-row button:hover{transform:scale(1.1)} .play-btn{width:40px;height:40px;border-radius:50%;background:var(--text-primary)!important;color:var(--bg-player)!important;border:var(--global-border)} [data-theme="light"] .play-btn{box-shadow:0 4px 16px rgba(31,22,20,0.2);border:none} .progress-row{display:flex;align-items:center;gap:10px;width:100%;max-width:560px} .progress-time{font-size:.7rem;font-weight:700;color:var(--text-tertiary);font-variant-numeric:tabular-nums;min-width:36px} .progress-time:last-child{text-align:right} .player-right{display:flex;align-items:center;justify-content:flex-end;gap:8px} .volume-wrapper{width:90px;display:flex;align-items:center} .format-badge{padding:3px 8px;border:var(--global-border);border-radius:var(--global-radius);font-size:.6rem;font-weight:800;letter-spacing:.5px;text-transform:none;cursor:pointer;transition:all .2s;position:relative} [data-theme="light"] .format-badge{box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid rgba(212,175,55,0.2)} .format-badge:hover{transform:scale(1.05)} .format-flac{background:var(--gold-badge-bg);color:var(--gold-badge-text)} [data-theme="light"] .format-flac{background:linear-gradient(135deg,#D4AF37,#E8B8B0,#D4AF37);color:#1F1614;background-size:200% 200%;animation:holoShift 4s ease-in-out infinite,holoBreathe 3s ease-in-out infinite} @keyframes holoShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes holoBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}} .format-aac{background:var(--bg-surface-3);color:var(--text-primary)} .player-btn{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:.2s;cursor:pointer;padding:4px} .player-btn:hover{color:var(--text-primary);transform:scale(1.1)} /* ── Visualizer Canvas ── */ .viz-canvas{position:absolute !important;bottom:0;left:0;right:0;height:100%;pointer-events:none;opacity:.15;z-index:0} .player > *:not(.viz-canvas) {position:relative;z-index:1} /* ── Quality Selector (off format badge) ── */ .quality-menu{position:absolute;bottom:calc(100% + 12px);right:0;background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);width:240px;display:none;flex-direction:column;z-index:1000;overflow:hidden} [data-theme="light"] .quality-menu{box-shadow:0 12px 40px rgba(0,0,0,0.1);border:var(--glass-border);backdrop-filter:var(--glass-blur)} [data-theme="dark"] .quality-menu{border:1px solid var(--border-secondary);box-shadow:0 8px 32px rgba(0,0,0,.8)} .quality-menu.active{display:flex} .quality-header-text{padding:12px 16px 8px;font-family:var(--theme-font-heading);font-size:.8rem;font-weight:800;text-transform:uppercase;color:var(--text-tertiary);border-bottom:1px solid var(--border-secondary)} .quality-option{padding:12px 16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .2s;border-bottom:1px solid var(--border-secondary)} .quality-option:last-child{border-bottom:none} .quality-option:hover:not(.locked){background:var(--bg-hover)} .quality-option.locked{opacity:.4;cursor:not-allowed} .quality-option.active-quality{border-left:4px solid var(--gold);background:var(--bg-surface-3)} .quality-title{font-size:.85rem;font-weight:800;color:var(--text-primary);display:flex;justify-content:space-between} .quality-desc{font-size:.7rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase} /* ═══════════════════════════════════════════════ §9 — LYRICS CANVAS (Immersive Full-Screen) ═══════════════════════════════════════════════ */ .lyrics-view{position:fixed;inset:0;z-index:5000;display:none;flex-direction:column;align-items:center;transition:opacity .4s;overflow:hidden;background:var(--bg-app);} .lyrics-view.active{display:flex} .lyrics-bg{position:absolute;inset:-40px;z-index:0;background-size:cover;background-position:center;filter:blur(80px) saturate(1.8) brightness(0.35);transform:scale(1.15);transition:background-image 1.2s ease,filter 1s;animation:lyricsBgPulse 12s ease-in-out infinite} .lyrics-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.8) 100%)} @keyframes lyricsBgPulse{0%,100%{filter:blur(80px) saturate(1.8) brightness(0.35)}50%{filter:blur(90px) saturate(2.2) brightness(0.3)}} [data-theme="light"] .lyrics-bg{filter:blur(80px) saturate(1.4) brightness(0.8);animation:lyricsBgPulseLight 12s ease-in-out infinite} [data-theme="light"] .lyrics-bg::after{background:linear-gradient(to bottom,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.75) 100%)} @keyframes lyricsBgPulseLight{0%,100%{filter:blur(80px) saturate(1.4) brightness(0.8)}50%{filter:blur(90px) saturate(1.6) brightness(0.75)}} .lyrics-header{position:sticky;top:0;z-index:2;width:100%;max-width:700px;padding:40px 32px 20px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .lyrics-header h3{font-family:var(--font-ui);font-size:1rem;font-weight:700;text-transform:none;letter-spacing:0.3px;color:rgba(255,255,255,0.8)} [data-theme="light"] .lyrics-header h3{color:var(--text-primary)} .lyrics-header-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;margin:0 20px} .lyrics-header-meta h3{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lyrics-header-meta p{font-size:.75rem;font-weight:600;color:rgba(255,255,255,0.5);margin:0} [data-theme="light"] .lyrics-header-meta p{color:var(--text-tertiary)} .lyrics-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;color:rgba(255,255,255,.8);flex-shrink:0} [data-theme="light"] .lyrics-close{background:var(--bg-surface-3);color:var(--text-primary)} .lyrics-close:hover{transform:scale(1.1);background:rgba(255,255,255,.2)} .lyrics-art{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.3)} .lyrics-art img{width:100%;height:100%;object-fit:cover} .lyrics-body{position:relative;z-index:2;flex:1;width:100%;max-width:700px;overflow-y:auto;padding:20px 32px 160px;scroll-behavior:smooth;mask-image:linear-gradient(to bottom,transparent 0%,black 8%,black 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 8%,black 75%,transparent 100%);scrollbar-width:none;-ms-overflow-style:none;} .lyrics-body::-webkit-scrollbar{display:none;} .lyrics-line{font-family:var(--font-ui);font-size:1.6rem;font-weight:700;padding:14px 0;color:rgba(255,255,255,.25);transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;line-height:1.45;letter-spacing:0;transform-origin:left center} [data-theme="light"] .lyrics-line{color:rgba(0,0,0,.15)} .lyrics-line.active{color:#ffffff;font-size:2.4rem;font-weight:800;transform:scale(1.02);text-shadow:0 2px 20px rgba(255,255,255,.15),0 0 40px rgba(212,175,55,0.3)} [data-theme="light"] .lyrics-line.active{color:var(--text-primary);text-shadow:0 0 30px rgba(212,175,55,0.4)} .lyrics-line.past{color:rgba(255,255,255,.15)} [data-theme="light"] .lyrics-line.past{color:rgba(0,0,0,.12)} .lyrics-line:hover{color:rgba(255,255,255,.55)} [data-theme="light"] .lyrics-line:hover{color:rgba(0,0,0,.45)} .lyrics-empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,.5);font-size:1rem} [data-theme="light"] .lyrics-empty{color:var(--text-tertiary)} /* ── YouTube Badge ── */ .yt-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--global-radius);font-size:.6rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:#FF0000;color:#fff;margin-left:6px;vertical-align:middle} .yt-badge svg{width:12px;height:12px;fill:currentColor} /* ── Settings Panel ── */ .settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)} .settings-overlay.active{display:flex} .settings-card{background:var(--bg-surface);padding:28px 32px;border-radius:var(--global-radius);border:var(--global-border);width:90%;max-width:420px;box-shadow:var(--card-shadow)} [data-theme="light"] .settings-card{border:var(--glass-border);box-shadow:0 20px 60px rgba(0,0,0,0.1);backdrop-filter:var(--glass-blur)} .settings-title{font-family:var(--theme-font-heading);font-size:1.2rem;font-weight:800;text-transform:none;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center} .settings-group{margin-bottom:20px} .settings-group-label{font-size:.7rem;font-weight:700;text-transform:none;letter-spacing:0.5px;color:var(--text-tertiary);margin-bottom:12px} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-secondary)} .settings-row:last-child{border-bottom:none} .settings-row-info{display:flex;flex-direction:column;gap:2px} .settings-row-label{font-size:.9rem;font-weight:700} .settings-row-desc{font-size:.72rem;color:var(--text-tertiary);font-weight:600;max-width:260px} .settings-toggle{width:44px;height:24px;background:var(--bg-surface-3);border:1px solid var(--border-secondary);border-radius:100px;position:relative;cursor:pointer;transition:background .25s;flex-shrink:0} .settings-toggle.active{background:var(--gold)} .settings-toggle::after{content:'';width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;left:4px;transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.3)} .settings-toggle.active::after{transform:translateX(18px)} /* ═══════════════════════════════════════════════ §10 — QUEUE DRAWER ═══════════════════════════════════════════════ */ .queue-drawer{position:fixed;top:0;right:-400px;width:380px;height:100%;background:var(--bg-surface);border-left:var(--global-border);z-index:4000;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.3)} .queue-drawer.active{right:0} .queue-header{padding:24px;display:flex;align-items:center;justify-content:space-between;border-bottom:var(--global-border);flex-shrink:0} .queue-header h3{font-family:var(--theme-font-heading);font-size:1.1rem;font-weight:800;text-transform:none} .queue-body{flex:1;overflow-y:auto;padding:8px 0} .queue-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:grab;transition:background .15s;border-bottom:1px solid var(--border-secondary)} .queue-item:hover{background:var(--bg-hover)} .queue-item.playing{background:var(--bg-active)} .queue-item.dragging{opacity:.5;background:var(--bg-surface-3)} .queue-grip{color:var(--text-tertiary);cursor:grab;flex-shrink:0} .queue-art{width:36px;height:36px;border-radius:var(--global-radius);background:var(--cover-bg);overflow:hidden;flex-shrink:0} .queue-art img{width:100%;height:100%;object-fit:cover} .queue-info{flex:1;min-width:0} .queue-info h5{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .queue-info p{font-size:.7rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase} .queue-remove{color:var(--text-tertiary);cursor:pointer;padding:4px} .queue-remove:hover{color:var(--gold)} .queue-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:3999;display:none} .queue-overlay.active{display:block} /* ═══════════════════════════════════════════════ §11 — AUDIO PASSPORT OVERLAY ═══════════════════════════════════════════════ */ .passport-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)} .passport-overlay.active{display:flex} .passport-card{background:var(--bg-surface);padding:32px;border-radius:var(--global-radius);border:var(--global-border);width:90%;max-width:400px;box-shadow:var(--card-shadow)} [data-theme="light"] .passport-card{border:var(--glass-border);box-shadow:0 20px 60px rgba(0,0,0,0.1);backdrop-filter:var(--glass-blur)} .passport-title{font-family:var(--theme-font-heading);font-size:1.2rem;font-weight:800;text-transform:none;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center} .passport-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .passport-stat{display:flex;flex-direction:column;gap:4px} .passport-stat-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-tertiary)} .passport-stat-value{font-family:var(--theme-font-heading);font-size:1.3rem;font-weight:700;color:var(--gold)} /* ═══════════════════════════════════════════════ §12 — CONTEXT MENU (Long-press mobile) ═══════════════════════════════════════════════ */ .context-menu{position:fixed;background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);min-width:180px;z-index:8000;display:none;flex-direction:column;overflow:hidden} .context-menu.active{display:flex} [data-theme="light"] .context-menu{box-shadow:0 12px 40px rgba(0,0,0,0.1);backdrop-filter:blur(20px);border:var(--glass-border)} [data-theme="dark"] .context-menu{box-shadow:0 8px 24px rgba(0,0,0,.7);border:1px solid var(--border-secondary)} .context-item{padding:12px 16px;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:10px} .context-item:hover{background:var(--bg-hover)} .context-item svg{width:16px;height:16px;flex-shrink:0} /* ═══════════════════════════════════════════════ §13 — KB MODAL ═══════════════════════════════════════════════ */ .kb-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)} .kb-modal.active{display:flex} .kb-modal-content{background:var(--bg-surface);padding:24px 32px;border-radius:var(--global-radius);border:var(--global-border);width:90%;max-width:420px;box-shadow:var(--card-shadow);color:var(--text-primary)} [data-theme="light"] .kb-modal-content{border:var(--glass-border);box-shadow:0 20px 60px rgba(0,0,0,0.1);backdrop-filter:var(--glass-blur)} .kb-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-family:var(--theme-font-heading);font-size:1.2rem;font-weight:800;text-transform:none} .kb-list{display:flex;flex-direction:column;gap:14px;font-size:.85rem;font-weight:600} .kb-list li{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--border-secondary)} .kb-list li:last-child{border-bottom:none;padding-bottom:0} .kb-list kbd{background:var(--bg-surface-3);padding:4px 10px;border-radius:4px;font-family:monospace;border:1px solid var(--border-secondary);color:var(--text-primary)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ═══════════════════════════════════════════════ §NOW PLAYING — Full-Screen Immersive View ═══════════════════════════════════════════════ */ .now-playing-view{position:fixed;inset:0;z-index:5500;display:none;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s cubic-bezier(.4,0,.2,1);opacity:0} .now-playing-view.active{display:flex;opacity:1} .now-playing-bg{position:absolute;inset:-60px;z-index:0;background-size:cover;background-position:center;filter:blur(80px) saturate(1.6) brightness(0.3);transform:scale(1.2);transition:background-image 1.5s} .now-playing-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.3),rgba(0,0,0,0.7))} [data-theme="light"] .now-playing-bg{filter:blur(80px) saturate(1.4) brightness(0.7)} [data-theme="light"] .now-playing-bg::after{background:linear-gradient(to bottom,rgba(255,255,255,0.2),rgba(255,255,255,0.6))} .now-playing-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:420px;padding:40px 24px} .now-playing-art{width:min(320px,70vw);aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.4);transition:transform .3s} .now-playing-art img{width:100%;height:100%;object-fit:cover} .now-playing-art:hover{transform:scale(1.02)} .now-playing-info{text-align:center;width:100%} .now-playing-info h2{font-family:var(--font-serif);font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:6px} [data-theme="light"] .now-playing-info h2{color:var(--text-primary)} .now-playing-info p{font-size:.9rem;color:rgba(255,255,255,0.6);font-weight:600} [data-theme="light"] .now-playing-info p{color:var(--text-secondary)} .now-playing-progress{width:100%;display:flex;flex-direction:column;gap:8px} .now-playing-progress input[type=range]{width:100%} .now-playing-times{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums} [data-theme="light"] .now-playing-times{color:var(--text-tertiary)} .now-playing-controls{display:flex;align-items:center;gap:28px} .now-playing-controls button{color:rgba(255,255,255,0.8);transition:.2s} .now-playing-controls button:hover{color:#fff;transform:scale(1.1)} [data-theme="light"] .now-playing-controls button{color:var(--text-secondary)} [data-theme="light"] .now-playing-controls button:hover{color:var(--text-primary)} .np-play-btn{width:56px!important;height:56px!important;border-radius:50%!important;background:rgba(255,255,255,0.15)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;backdrop-filter:blur(12px)} [data-theme="light"] .np-play-btn{background:var(--text-primary)!important;color:var(--bg-app)!important;box-shadow:0 8px 24px rgba(0,0,0,0.2)} .now-playing-close{position:absolute;top:20px;right:20px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,0.7);transition:.2s} .now-playing-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)} [data-theme="light"] .now-playing-close{background:rgba(0,0,0,0.05);color:var(--text-secondary)} .now-playing-badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:100px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);backdrop-filter:blur(8px)} [data-theme="light"] .now-playing-badge{background:rgba(212,175,55,0.15);color:var(--gold)} /* ── Mobile Top-Edge Progress Line ── */ @media(max-width:900px){ .player::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform-origin:left;transform:scaleX(var(--mobile-progress,0));transition:transform .25s linear;z-index:10;box-shadow:0 0 8px var(--gold)} } /* ═══════════════════════════════════════════════ §REQUESTS — Song Request & Voting System ═══════════════════════════════════════════════ */ .request-cycle-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);padding:28px;margin-bottom:18px} [data-theme="light"] .request-cycle-hero{background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--card-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)} .request-cycle-kicker{display:block;font-size:.68rem;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .request-cycle-hero h2{font-family:var(--theme-font-heading);font-size:1.65rem;font-weight:800;margin:0 0 6px} .request-cycle-hero p{font-size:.88rem;color:var(--text-secondary);line-height:1.5;margin:0;max-width:560px} .request-cycle-meta{font-size:.76rem;font-weight:800;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap} .req-active-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px} .req-active-slot{min-width:0} .req-active-label{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.72rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary)} .req-active-label span{color:var(--gold);font-variant-numeric:tabular-nums} .req-active-slot .req-card{height:calc(100% - 24px);margin-bottom:0} .request-browse-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:8px 0 16px} .request-browse-header .section-title{margin:0} .req-search-input{width:min(340px,100%);background:var(--bg-input);border:var(--global-border);border-radius:var(--btn-radius);padding:12px 16px;color:var(--text-primary);font-family:var(--font-ui);font-size:.88rem;outline:none} .req-search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,0.12)} .requests-form{background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);padding:28px;margin-bottom:32px;position:relative;overflow:hidden} [data-theme="light"] .requests-form{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--card-shadow)} .requests-form::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,175,55,0.04),rgba(232,184,176,0.06));pointer-events:none;border-radius:inherit} .requests-form h3{font-family:var(--theme-font-heading);font-size:1.3rem;font-weight:700;margin-bottom:16px} .req-input-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap} .req-input{flex:1;min-width:140px;padding:12px 18px;border-radius:var(--btn-radius);border:var(--global-border);background:var(--bg-input);font-family:var(--font-ui);color:var(--text-primary);font-size:.85rem;font-weight:600;outline:none;transition:.2s} .req-input::placeholder{color:var(--text-placeholder)} [data-theme="light"] .req-input{box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid rgba(31,22,20,0.1)} [data-theme="light"] .req-input:focus{box-shadow:0 4px 20px rgba(212,175,55,0.15);border-color:rgba(212,175,55,0.3)} [data-theme="dark"] .req-input{border:1px solid var(--border-secondary)} [data-theme="dark"] .req-input:focus{border-color:var(--gold)} .req-submit{padding:12px 28px;background:var(--gold);color:#000;font-size:.85rem;font-weight:700;border-radius:var(--btn-radius);cursor:pointer;transition:.2s;white-space:nowrap;border:none} [data-theme="light"] .req-submit{box-shadow:0 4px 16px rgba(212,175,55,0.25)} .req-submit:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(212,175,55,0.35)} .req-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .req-status{font-size:.8rem;font-weight:600;color:var(--text-tertiary);min-height:20px} .req-status.error{color:#e74c3c} .req-status.success{color:var(--gold)} /* Request Cards */ .req-list{display:flex;flex-direction:column;gap:16px;margin-bottom:48px} .req-card{background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);padding:20px 24px;transition:all .2s;position:relative} [data-theme="light"] .req-card{backdrop-filter:blur(20px);background:var(--glass-bg);border:var(--glass-border);box-shadow:0 4px 20px rgba(0,0,0,0.05)} [data-theme="dark"] .req-card{border:1px solid var(--border-secondary)} .req-card:hover{transform:var(--hover-transform)} [data-theme="light"] .req-card:hover{box-shadow:var(--card-shadow-hover)} .req-card-top{display:flex;align-items:center;gap:16px} .req-vote-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:var(--global-radius);background:var(--bg-surface-3);border:1px solid var(--border-secondary);cursor:pointer;transition:all .2s;min-width:56px;flex-shrink:0} .req-vote-btn:hover{border-color:var(--gold);background:rgba(212,175,55,0.1)} .req-vote-btn.voted{background:var(--gold);border-color:var(--gold);color:#000} .req-vote-btn.voted .req-vote-arrow{color:#000} .req-vote-arrow{font-size:1rem;line-height:1;color:var(--text-tertiary);transition:color .2s} .req-vote-count{font-size:1rem;font-weight:800;line-height:1} .req-card-info{flex:1;min-width:0} .req-card-title{font-family:var(--theme-font-heading);font-size:1.1rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .req-card-artist{font-size:.8rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase} .req-card-time{font-size:.7rem;color:var(--text-tertiary);margin-top:4px} /* Community Notes */ .community-notes{margin-top:14px;padding:14px 18px;background:rgba(100,150,200,0.06);border:1px solid rgba(100,150,200,0.15);border-radius:12px} [data-theme="dark"] .community-notes{background:rgba(100,150,200,0.08);border-color:rgba(100,150,200,0.12)} .cn-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.78rem;font-weight:700;color:var(--text-secondary)} .cn-header svg{width:16px;height:16px;flex-shrink:0;opacity:.6} .cn-note{font-size:.82rem;color:var(--text-secondary);line-height:1.5;padding:6px 0;border-bottom:1px solid rgba(100,150,200,0.1)} .cn-note:last-child{border-bottom:none} .cn-add-row{display:flex;gap:8px;margin-top:10px} .cn-add-input{flex:1;padding:8px 14px;border-radius:var(--btn-radius);border:1px solid rgba(100,150,200,0.2);background:var(--bg-input);font-family:var(--font-ui);color:var(--text-primary);font-size:.8rem;outline:none} .cn-add-input:focus{border-color:rgba(100,150,200,0.5)} .cn-add-btn{padding:8px 16px;background:rgba(100,150,200,0.15);color:var(--text-secondary);font-size:.78rem;font-weight:700;border-radius:var(--btn-radius);cursor:pointer;transition:.2s;border:1px solid rgba(100,150,200,0.2)} .cn-add-btn:hover{background:rgba(100,150,200,0.25)} /* ────────────── CHAT ────────────── */ .chatroom-panel{background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);padding:24px;margin-bottom:32px} [data-theme="light"] .chatroom-panel{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--card-shadow)} .chat-page{min-height:calc(100vh - 160px);display:flex;flex-direction:column} .chatroom-full{display:flex;flex-direction:column;min-height:calc(100vh - 230px)} .chatroom-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px} .chatroom-header h3{font-family:var(--theme-font-heading);font-size:1.25rem;font-weight:700;margin:0} .chatroom-header p{font-size:.82rem;color:var(--text-secondary);margin:0;max-width:460px;line-height:1.4} .chat-messages{height:220px;overflow-y:auto;background:var(--bg-input);border:var(--global-border);border-radius:10px;padding:12px;margin-bottom:12px} .chat-messages-full{height:auto;min-height:360px;flex:1} .chat-message{padding:9px 0;border-bottom:1px solid rgba(140,120,110,0.12)} .chat-message:last-child{border-bottom:none} .chat-message-meta{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--text-tertiary);margin-bottom:4px;flex-wrap:wrap} .chat-message-meta strong{color:var(--gold);font-weight:800} .chat-time{font-variant-numeric:tabular-nums} .chat-message-body{font-size:.88rem;line-height:1.45;color:var(--text-primary);overflow-wrap:anywhere} .chat-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:.85rem;font-style:italic;text-align:center} .chat-input-row{display:grid;grid-template-columns:minmax(96px,140px) 1fr auto;gap:10px} .chat-input-row-full{align-items:stretch} .chat-name-input,.chat-message-input{background:var(--bg-input);border:var(--global-border);border-radius:10px;padding:12px 14px;color:var(--text-primary);font-size:.9rem;min-width:0} .chat-send-btn{background:var(--gold);color:#1b1512;border:none;border-radius:10px;padding:0 18px;font-size:.82rem;font-weight:900;cursor:pointer} .chat-send-btn:disabled{opacity:.55;cursor:wait} .chat-status{min-height:18px;margin-top:8px;color:var(--text-tertiary);font-size:.8rem} .profile-page{max-width:980px;margin:0 auto} .profile-panel{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:28px;background:var(--bg-surface);border:var(--global-border);border-radius:var(--global-radius);padding:28px} [data-theme="light"] .profile-panel{background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--card-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)} .profile-preview{display:flex;align-items:center;gap:18px;padding:22px;background:var(--bg-surface-2);border:var(--global-border);border-radius:var(--global-radius);min-height:150px} .profile-avatar-preview{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:900;color:#15110f;background:linear-gradient(135deg,#d4af37,#e8c77b);box-shadow:0 10px 28px rgba(0,0,0,.18);flex-shrink:0} .profile-avatar-preview[data-color="rose"]{background:linear-gradient(135deg,#d89aa8,#f1c5bf)} .profile-avatar-preview[data-color="platinum"]{background:linear-gradient(135deg,#cfd5da,#ffffff)} .profile-avatar-preview[data-color="onyx"]{background:linear-gradient(135deg,#151515,#555);color:#fff} .profile-tier{display:inline-flex;margin-bottom:8px;padding:4px 10px;border-radius:100px;background:var(--gold-badge-bg);color:var(--gold-badge-text);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px} .profile-preview h2{font-family:var(--theme-font-heading);font-size:1.45rem;font-weight:800;margin:0 0 4px} .profile-preview p{margin:0;color:var(--text-secondary);font-size:.86rem;font-weight:700} .profile-form{display:grid;gap:16px} .profile-field{display:grid;gap:8px} .profile-field span{font-size:.72rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary)} .profile-field input,.profile-field select,.profile-field textarea{width:100%;background:var(--bg-input);border:var(--global-border);border-radius:12px;padding:12px 14px;color:var(--text-primary);font-family:var(--font-ui);font-size:.9rem;outline:none;resize:vertical} .profile-field input:focus,.profile-field select:focus,.profile-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.12)} .profile-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .profile-save-btn{background:var(--gold);color:#17110f;border:none;border-radius:var(--btn-radius);padding:12px 22px;font-size:.82rem;font-weight:900;cursor:pointer} .profile-save-btn:disabled{opacity:.55;cursor:wait} .profile-status{font-size:.82rem;color:var(--text-tertiary);font-weight:700} .profile-status.success{color:var(--gold)} .profile-status.error{color:#e07373} /* Action button row inside .chat-message-meta. margin-left:auto pushes the whole group to the right edge of the meta line. */ .chat-message-actions{margin-left:auto;display:inline-flex;gap:4px;align-items:center} .chat-edited-mark{font-size:.7rem;opacity:.55;font-style:italic;color:var(--text-tertiary)} .chat-edit-btn,.chat-delete-btn,.chat-reply-btn{background:none;border:1px solid transparent;color:var(--text-tertiary);font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:6px;cursor:pointer;opacity:.55;transition:opacity .15s ease,color .15s ease,border-color .15s ease,background .15s ease} .chat-edit-btn:hover{opacity:1;color:var(--gold);border-color:rgba(201,138,134,0.3)} .chat-delete-btn:hover{opacity:1;color:#e07a7a;border-color:rgba(224,122,122,0.35)} .chat-delete-btn.armed{opacity:1;color:#fff;background:#c14a4a;border-color:#c14a4a;animation:chatDeleteArm .25s ease-out} .chat-delete-btn:disabled{opacity:.65;cursor:wait} .chat-reply-btn:hover{opacity:1;color:var(--text-secondary);border-color:rgba(140,120,110,0.25);background:rgba(140,120,110,0.05)} @keyframes chatDeleteArm{from{transform:scale(.92)}to{transform:scale(1)}} /* Inline edit form */ .chat-edit-input{width:100%;min-height:64px;resize:vertical;background:var(--bg-input);color:var(--text-primary);border:var(--global-border);border-radius:10px;padding:10px 12px;font:inherit;font-size:.88rem;line-height:1.45;box-sizing:border-box} .chat-edit-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,138,134,0.15)} .chat-edit-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap} .chat-edit-save,.chat-edit-cancel{font:inherit;font-size:.78rem;font-weight:800;border-radius:8px;padding:6px 14px;cursor:pointer;border:1px solid transparent;transition:.15s} .chat-edit-save{background:var(--gold);color:#1b1512} .chat-edit-save:hover{filter:brightness(1.08)} .chat-edit-save:disabled{opacity:.6;cursor:wait} .chat-edit-cancel{background:transparent;color:var(--text-secondary);border-color:rgba(140,120,110,0.25)} .chat-edit-cancel:hover{background:rgba(140,120,110,0.08);color:var(--text-primary)} .chat-edit-status{font-size:.75rem;color:var(--text-tertiary);font-style:italic} /* @mentions inside message bodies */ .chat-mention{display:inline-block;color:var(--gold);font-weight:700;background:rgba(201,138,134,0.08);padding:0 4px;border-radius:4px} /* In-message reply preview (parent message snippet at top of a reply) */ .chat-reply-target{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding:5px 10px;font-size:.74rem;color:var(--text-tertiary);background:rgba(140,120,110,0.06);border-left:2px solid rgba(201,138,134,0.5);border-radius:4px;cursor:pointer;transition:background .15s} .chat-reply-target:hover{background:rgba(140,120,110,0.12)} .chat-reply-target strong{color:var(--gold);font-weight:700} .chat-reply-target-missing{cursor:default;opacity:.55;border-left-color:rgba(140,120,110,0.3)} .chat-reply-arrow{font-size:.85rem;line-height:1;opacity:.7;flex-shrink:0} .chat-reply-snippet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} /* Active reply target shown above the compose input */ .chat-reply-preview{display:none;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:var(--bg-input);border:var(--global-border);border-left:3px solid var(--gold);border-radius:8px;font-size:.78rem;color:var(--text-secondary)} .chat-reply-preview.visible{display:flex} .chat-reply-preview .chat-reply-label{flex-shrink:0} .chat-reply-preview .chat-reply-label strong{color:var(--gold)} .chat-reply-preview .chat-reply-snippet{font-style:italic;color:var(--text-tertiary)} .chat-reply-cancel{margin-left:auto;background:transparent;border:none;color:var(--text-tertiary);font-size:1rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px;flex-shrink:0;transition:.15s} .chat-reply-cancel:hover{color:var(--text-primary);background:rgba(140,120,110,0.1)} /* "Show N older messages" button at the top of windowed render */ .chat-older-toggle{display:block;width:100%;background:transparent;border:1px dashed rgba(140,120,110,0.3);color:var(--text-secondary);font-size:.78rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:8px;margin-bottom:10px;border-radius:8px;cursor:pointer;transition:.15s} .chat-older-toggle:hover{background:rgba(140,120,110,0.08);color:var(--text-primary);border-color:rgba(140,120,110,0.5)} /* Jump-to flash highlight when clicking a reply preview */ .chat-message.flash{animation:chatJumpFlash 1.2s ease-out} @keyframes chatJumpFlash{0%{background:rgba(201,138,134,0.18);box-shadow:0 0 0 2px rgba(201,138,134,0.35)}100%{background:transparent;box-shadow:none}} /* Cloudflare Turnstile widget container */ .chat-turnstile-wrap{margin-top:10px;min-height:65px;display:flex;justify-content:flex-start;align-items:center} .chat-turnstile-wrap:empty{min-height:0;margin-top:0} /* ── Leaderboard ── */ .top-requests-row { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; } .top-req-card { position: relative; display: flex; align-items: center; background: rgba(255,255,255,0.45); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.35); border-radius: 14px; padding: 20px 24px; overflow: hidden; border-left: 5px solid var(--gold); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .top-req-card:hover, .req-submit:hover { transform: translateY(-3px); box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1) !important; } [data-theme="dark"] .top-req-card:hover { box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .top-req-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); } /* Unique Accent Colors for Top 3 */ .top-req-card:nth-child(1) { border-left-color: #FFD700; } .top-req-card:nth-child(2) { border-left-color: #C0C0C0; } .top-req-card:nth-child(3) { border-left-color: #CD7F32; } .top-req-rank-bg { position: absolute; right: 15px; bottom: -15px; font-family: var(--font-ui); font-size: 7rem; font-weight: 900; color: var(--text-primary); opacity: 0.04; pointer-events: none; line-height: 1; z-index: 0; user-select: none; } .top-req-card:nth-child(1) .top-req-rank-bg { color: #FFD700; opacity: 0.08; } .top-req-card:nth-child(2) .top-req-rank-bg { color: #C0C0C0; opacity: 0.07; } .top-req-card:nth-child(3) .top-req-rank-bg { color: #CD7F32; opacity: 0.07; } .top-req-thumb { width: 64px; height: 64px; border-radius: 10px; background: var(--cover-bg); margin-right: 20px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 1; border: 1px solid rgba(255,255,255,0.15); } .top-req-info { position: relative; z-index: 1; flex: 1; min-width: 0; } .top-req-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 4px; opacity: 0.85; } .top-req-title { font-weight: 800; font-size: 1.2rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-req-artist { font-size: 0.8rem; opacity: 0.6; font-weight: 600; margin-top: 3px; } .top-req-artist .era-gold { color: var(--gold); font-weight: 800; } .top-req-vote-box { margin-left: auto; text-align: right; z-index: 1; padding-left: 20px; flex-shrink: 0; } .top-req-vote-val { font-size: 1.8rem; font-weight: 900; color: var(--gold); line-height: 1; } .top-req-vote-lbl { font-size: 0.58rem; font-weight: 800; opacity: 0.5; letter-spacing: 1.2px; margin-top: 4px; font-variant: small-caps; } /* Disabled nav item */ .nav-item-disabled{opacity:.45;cursor:not-allowed!important;position:relative} .nav-item-disabled:hover{background:transparent!important;transform:none!important;border-color:transparent!important;box-shadow:none!important} .nav-item-disabled .coming-soon-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.6rem;font-weight:800;background:var(--bg-surface-3);padding:2px 8px;border-radius:100px;letter-spacing:.5px;text-transform:uppercase;opacity:.7} /* ═══════════════════════════════════════════════ §14 — RESPONSIVE (Mobile + TV) ═══════════════════════════════════════════════ */ @media(max-width:900px){ :root{--sidebar-w:0px!important} .app{display:block!important;width:100%!important;height:auto!important;position:relative!important} .sidebar{display:none!important} .main{display:block!important;width:100%!important;height:auto!important;overflow:visible!important} .main-header{padding:12px 16px!important;height:auto!important;flex-direction:column!important;gap:12px!important;align-items:flex-start!important;position:sticky!important;top:0;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--bg-app)!important} .mobile-theme-btn{display:flex!important} .header-left{width:100%!important;justify-content:space-between!important} .header-search{width:100%!important;max-width:100%!important} .hero{padding:40px 16px 30px!important;min-height:auto!important;text-align:center!important} .hero::before{mix-blend-mode:normal!important} .hero-title{font-size:2.2rem!important} .waitlist-row{flex-direction:column;max-width:100%} .waitlist-btn{padding:16px 24px} .waitlist-form{max-width:100%} .waitlist-yt-row{max-width:100%} .content-area{padding:20px 16px 220px!important} .era-hero{flex-direction:column;align-items:center;text-align:center;padding:30px 16px!important;gap:20px} .era-cover{width:160px;height:160px} .era-details{align-items:center} .album-grid{grid-template-columns:1fr 1fr!important;gap:12px!important} .video-grid{grid-template-columns:1fr!important} .track-row,.track-header{grid-template-columns:32px 1fr 32px!important} .track-format,.track-duration,.track-header span:nth-child(3),.track-header span:nth-child(4){display:none!important} .player{position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:auto!important;display:flex!important;flex-direction:column!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px))!important;gap:16px!important;z-index:1000!important;background:var(--bg-player)!important;border-top:1px solid var(--border-secondary)!important;box-shadow:0 -10px 25px rgba(0,0,0,.15)!important} [data-theme="light"] .player{background:var(--glass-bg)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;border-top:var(--glass-border)!important;box-shadow:var(--glass-glow),0 -10px 30px rgba(0,0,0,.06)!important} .player-art{width:48px!important;height:48px!important} .play-btn{width:44px!important;height:44px!important} .player-track{width:100%!important;justify-content:flex-start!important;gap:12px!important} .player-meta h4{max-width:260px!important;text-align:left!important;font-size:0.95rem!important} .player-controls{flex-direction:column!important;width:100%!important;justify-content:center!important;gap:12px!important} .controls-row{width:100%!important;justify-content:space-between!important;max-width:320px!important;margin:0 auto!important} .controls-row button:not(.play-btn){display:flex!important} .progress-row{display:flex!important;width:100%!important;max-width:100%!important} .player-right{display:flex!important;width:100%!important;justify-content:space-between!important;align-items:center!important;flex-wrap:wrap!important;overflow:visible!important;padding-bottom:4px!important} .volume-wrapper{width:80px!important} .stats-row{gap:24px} .quality-section{flex-direction:column} .mariah-overload{display:none!important} .butterfly-decor{display:none} .section-title{font-size:1.5rem} .request-cycle-hero{display:block;padding:22px;margin-bottom:16px} .request-cycle-meta{margin-top:14px;white-space:normal} .req-active-board{grid-template-columns:1fr;gap:14px} .request-browse-header{display:block} .req-search-input{width:100%;margin-top:12px} .polaroid{display:none} .queue-drawer{width:100%!important;right:-100%!important} .queue-drawer.active{right:0!important} .lyrics-view{padding-bottom:120px} .lyrics-line{font-size:1.3rem!important} .lyrics-line.active{font-size:1.7rem!important} .chatroom-header{display:block} .chatroom-header p{margin-top:6px} .chat-input-row{grid-template-columns:1fr} .chat-send-btn{height:44px} .profile-panel{grid-template-columns:1fr;padding:20px;gap:18px} .profile-preview{align-items:flex-start} .profile-avatar-preview{width:64px;height:64px;font-size:1.05rem} .glow-layer{opacity:0.5!important} .quality-menu { left: 0 !important; right: auto !important; bottom: calc(100% + 16px) !important; } } /* TV / Ultra-wide Leanback */ @media(min-width:1601px){ .content-area{max-width:1400px;margin:0 auto} .hero{max-width:1400px;margin:0 auto} .section-title{font-size:2.5rem} } /* ═══════════════════════════════════════════════ §CONSENT — First-Entry Consent Dialogue ═══════════════════════════════════════════════ */ .consent-overlay{position:fixed;inset:0;z-index:99999;pointer-events:none;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1)} .consent-overlay.active{opacity:1;pointer-events:none} .consent-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none} .consent-banner{position:absolute;bottom:0;left:0;right:0;padding:32px 40px 36px;display:flex;align-items:center;gap:32px;transform:translateY(100%);transition:transform .55s cubic-bezier(.22,1,.36,1)} .consent-banner{pointer-events:auto} .consent-overlay.active .consent-banner{transform:translateY(0)} [data-theme="light"] .consent-banner{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:var(--glass-border);box-shadow:var(--glass-glow),0 -8px 40px rgba(0,0,0,0.06)} [data-theme="dark"] .consent-banner{background:rgba(18,18,18,.78);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -8px 40px rgba(0,0,0,.4)} .consent-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--global-radius);background:var(--bg-surface-3);border:var(--global-border)} [data-theme="light"] .consent-icon{box-shadow:0 4px 12px rgba(0,0,0,0.08);border:var(--glass-border)} .consent-icon svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .consent-body{flex:1;min-width:0} .consent-title{font-family:var(--theme-font-heading);font-size:1.1rem;font-weight:700;text-transform:none;letter-spacing:0.3px;margin-bottom:6px} .consent-text{font-size:.82rem;font-weight:500;line-height:1.6;color:var(--text-secondary);max-width:640px} .consent-text strong{font-weight:700;color:var(--text-primary)} .consent-actions{display:flex;gap:12px;flex-shrink:0} .consent-btn{padding:14px 28px;font-size:.82rem;font-weight:700;text-transform:none;letter-spacing:0.3px;border-radius:var(--btn-radius);transition:all .2s;white-space:nowrap} .consent-btn-primary{background:var(--text-primary);color:var(--bg-app);border:var(--global-border)} [data-theme="light"] .consent-btn-primary{box-shadow:0 4px 16px rgba(31,22,20,0.2);border:none;background:linear-gradient(135deg,#1F1614,#3A2A26)} [data-theme="light"] .consent-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,22,20,0.3)} [data-theme="dark"] .consent-btn-primary:hover{transform:scale(1.04);background:var(--gold);color:#000} .consent-btn-secondary{background:transparent;color:var(--text-secondary);border:var(--global-border)} [data-theme="light"] .consent-btn-secondary{box-shadow:0 2px 12px rgba(0,0,0,0.06);background:rgba(255,255,255,0.6);backdrop-filter:blur(8px)} [data-theme="light"] .consent-btn-secondary:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.1);color:var(--text-primary)} [data-theme="dark"] .consent-btn-secondary{border:1px solid var(--border-secondary)} [data-theme="dark"] .consent-btn-secondary:hover{border-color:var(--text-secondary);color:var(--text-primary)} /* Manage Preferences expanded panel */ .consent-prefs{display:none;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-secondary)} .consent-prefs.active{display:block} .consent-pref-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0} .consent-pref-row+.consent-pref-row{border-top:1px solid var(--border-secondary)} .consent-pref-label h5{font-size:.85rem;font-weight:700;margin-bottom:2px} .consent-pref-label p{font-size:.72rem;color:var(--text-tertiary);font-weight:500} .consent-pref-tag{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:100px;background:var(--bg-surface-3);color:var(--text-tertiary);border:1px solid var(--border-secondary)} .consent-pref-tag.required{color:var(--gold);background:var(--gold-badge-bg);border-color:transparent} @media(max-width:900px){ .consent-banner{flex-direction:column;align-items:stretch;gap:20px;padding:24px 20px 28px} .consent-icon{align-self:flex-start} .consent-actions{flex-direction:column;gap:10px} .consent-btn{text-align:center;padding:14px 20px} } /* ═══════════════════════════════════════════════ §15 — PREMIUM REDESIGN LAYER (graphite + gold) Design tokens now live authoritatively in §1. This end-of-file zone holds the elevated component styling that supersedes the original romantic system. ═══════════════════════════════════════════════ */ body::before, .rollercoaster-track, .rainbow-arc, .floating-frame, .mc-crest, .sparkle-particle, .stardust-particle, .mariah-overload, .butterfly-decor, .floating-butterfly, .cursive-watermark, .polaroid{display:none!important;content:none!important} .top-requests-row::before{display:none!important} /* ─────────────────────────────────────────────── §15.1 — SIDEBAR (flagship rail) ─────────────────────────────────────────────── */ .sidebar{ background:var(--bg-sidebar); display:flex; flex-direction:column; overflow:hidden; padding:0; border-right:1px solid var(--border-hairline); gap:0; } [data-theme="light"] .sidebar{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-right:1px solid var(--border-hairline); box-shadow:none; } /* ── Brand lockup ── */ .brand{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-5) var(--space-4); cursor:pointer; flex-shrink:0; border-bottom:1px solid var(--border-hairline); } .brand:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-md)} .brand-mark{ width:40px; height:40px; border-radius:11px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-rose))); box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12); } .brand-mark img{width:100%; height:100%; object-fit:cover} .brand-lockup{display:flex; flex-direction:column; gap:3px; min-width:0; line-height:1} .brand-name{ font-family:var(--font-display); font-size:1.04rem; font-weight:800; letter-spacing:-.01em; text-transform:none; color:var(--text-1); line-height:1.05; white-space:nowrap; } .brand-tag{ display:inline-flex; align-items:center; gap:6px; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); } .brand-tag-dot{width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)} /* ── Primary nav ── */ .nav-section{padding:var(--space-4) var(--space-3) var(--space-3); margin:0; display:flex; flex-direction:column; gap:2px; flex-shrink:0} .nav-item{ position:relative; display:flex; align-items:center; gap:var(--space-3); height:44px; padding:0 var(--space-3) 0 var(--space-4); border-radius:var(--radius-md); border:none; font-family:var(--font-display); font-size:.875rem; font-weight:650; letter-spacing:0; color:var(--text-2); cursor:pointer; transition:color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); text-transform:none; } .nav-item .icon, .nav-item .nav-icon{width:21px; height:21px; flex-shrink:0; color:inherit; fill:currentColor; transition:color var(--dur-1) var(--ease-out)} .nav-item:hover{background:var(--surface-hover); color:var(--text-1); transform:none; box-shadow:none; border-color:transparent} .nav-item.active{background:var(--surface-active); color:var(--text-1); border-color:transparent; box-shadow:none} .nav-item.active::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--accent); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); } .nav-item.active .icon, .nav-item.active .nav-icon{color:var(--accent)} [data-theme="light"] .nav-item.active{background:var(--surface-active); color:var(--text-1); border-color:transparent} [data-theme="light"] .nav-item:hover{transform:none; box-shadow:none; border-color:transparent} /* ── Your Library section ── */ .library-section{flex:1; min-height:0; display:flex; flex-direction:column; border-top:1px solid var(--border-hairline)} .library-bar{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5) var(--space-2); flex-shrink:0; } .library-bar-title{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:.82rem; font-weight:750; letter-spacing:.01em; color:var(--text-2); } .library-bar-title svg{width:19px; height:19px; fill:currentColor} .library-bar-actions{display:flex; align-items:center; gap:2px} .library-bar-actions button{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-3); transition:color var(--dur-1), background var(--dur-1); cursor:pointer; } .library-bar-actions button:hover{color:var(--text-1); background:var(--surface-hover)} .library-bar-actions svg{width:17px; height:17px; fill:currentColor} /* ── Library filter chips ── */ .library-chips{display:flex; gap:8px; padding:0 var(--space-5) var(--space-3); flex-wrap:wrap; flex-shrink:0} .lib-chip{ padding:6px 14px; border-radius:var(--radius-pill); background:var(--surface-3); color:var(--text-2); font-family:var(--font-display); font-size:.74rem; font-weight:600; letter-spacing:.01em; cursor:pointer; transition:all var(--dur-1) var(--ease-out); border:1px solid transparent; white-space:nowrap; } .lib-chip:hover{background:var(--surface-hover); color:var(--text-1)} .lib-chip.active{background:var(--text-1); color:var(--bg-base)} [data-theme="dark"] .lib-chip.active{background:var(--text-1); color:#0A0A0B} /* ── Library list ── */ .library-list{flex:1; overflow-y:auto; padding:0 var(--space-3) var(--space-3); margin:0; display:flex; flex-direction:column; gap:2px} .library-list::-webkit-scrollbar{width:8px} .library-list::-webkit-scrollbar-track{background:transparent} .library-list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:8px; border:2px solid transparent; background-clip:padding-box} .library-list::-webkit-scrollbar-thumb:hover{background:var(--text-3); background-clip:padding-box} .library-item{ display:flex; align-items:center; gap:var(--space-3); padding:8px; border-radius:var(--radius-md); cursor:pointer; border:none; transition:background var(--dur-1) var(--ease-out); } .library-item:hover{background:var(--surface-hover); border-color:transparent} .library-item.active{background:var(--surface-active); border-color:transparent} .library-item.is-hidden{display:none} .library-item-art{ width:48px; height:48px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border-hairline); color:var(--text-2); } .library-item-art svg{width:22px; height:22px; fill:currentColor; opacity:.85} .library-item-art img{width:100%; height:100%; object-fit:cover} .library-item-art--liked{ background:linear-gradient(135deg, var(--accent), var(--accent-rose)); border-color:transparent; color:#fff; } .library-item-art--liked svg{opacity:1; fill:#fff} .library-item-info{min-width:0; flex:1} .library-item-info h4{ font-family:var(--font-display); font-size:.875rem; font-weight:650; color:var(--text-1); margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:165px; } .library-item-info p{ font-size:.72rem; font-weight:550; color:var(--text-3); text-transform:none; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .library-item.active .library-item-info h4{color:var(--accent)} .library-item-pin{margin-left:auto; color:var(--accent); display:flex; align-items:center} .library-item-pin svg{width:13px; height:13px; fill:currentColor} /* ── Account chip footer ── */ .sidebar-footer{ margin-top:0; padding:var(--space-3); flex-shrink:0; border-top:1px solid var(--border-hairline); display:flex; flex-direction:column; gap:var(--space-2); } .account-chip{ display:flex; align-items:center; gap:var(--space-3); padding:8px; border-radius:var(--radius-md); cursor:pointer; width:100%; transition:background var(--dur-1) var(--ease-out); text-align:left; } .account-chip:hover{background:var(--surface-hover)} .account-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.82rem; font-weight:800; letter-spacing:.02em; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .account-avatar[data-color="rose"]{background:linear-gradient(135deg,#C99BB0,#A86E84)} .account-avatar[data-color="platinum"]{background:linear-gradient(135deg,#D8D8DD,#A8A8B0); color:#1A1A1C} .account-avatar[data-color="onyx"]{background:linear-gradient(135deg,#3A3A40,#141416)} .account-meta{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1} .account-name{ font-family:var(--font-display); font-size:.84rem; font-weight:700; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; } .account-tier{font-size:.68rem; font-weight:600; color:var(--text-3); text-transform:none; letter-spacing:.01em} .account-chevron{margin-left:auto; color:var(--text-3); display:flex} .account-chevron svg{width:16px; height:16px; fill:currentColor} .sidebar-tools{display:flex; align-items:center; gap:2px; padding:0 2px} .sidebar-tool{ width:36px; height:36px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--text-3); cursor:pointer; transition:color var(--dur-1), background var(--dur-1); } .sidebar-tool:hover{color:var(--text-1); background:var(--surface-hover)} .sidebar-tool svg{width:19px; height:19px; fill:currentColor} .sidebar-tool--spacer{margin-left:auto} /* ─────────────────────────────────────────────── §15.2 — HEADER / TOP BAR ─────────────────────────────────────────────── */ .main-header{ height:var(--header-h); padding:0 var(--space-6); background:transparent !important; border-bottom:1px solid transparent !important; box-shadow:none !important; gap:var(--space-4); backdrop-filter:none; -webkit-backdrop-filter:none; transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .main-header.scrolled{ background:var(--glass-bg) !important; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--border-hairline) !important; } [data-theme="dark"] .main-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.4) !important} [data-theme="light"] .main-header.scrolled{box-shadow:0 4px 24px rgba(20,18,16,.06) !important} .header-left{display:flex; align-items:center; gap:var(--space-4); min-width:0} .nav-arrows{display:flex; gap:var(--space-2)} .arrow-btn{ width:34px; height:34px; border-radius:50%; background:var(--surface-3); color:var(--text-2); border:1px solid var(--border-hairline); transition:color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1); } .arrow-btn:hover{color:var(--text-1); background:var(--surface-hover); transform:none} .arrow-btn:active{transform:scale(.93)} .header-title-dynamic{font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* Right cluster */ .header-right{display:flex; align-items:center; gap:var(--space-3); flex-shrink:0} .header-search{position:relative; width:280px; max-width:280px} .header-search .search-input{ height:40px; border-radius:var(--radius-pill); background:var(--surface-3) !important; border:1px solid transparent !important; color:var(--text-1); font-weight:550; font-size:.85rem; box-shadow:none !important; transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .header-search .search-input:focus{ background:var(--surface-1) !important; border-color:var(--border-strong) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important; transform:none; } .hifi-pill{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--radius-pill); border:1px solid var(--border-hairline); background:var(--surface-2); font-family:var(--font-display); font-size:.68rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); white-space:nowrap; } .hifi-pill-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)} .header-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.72rem; font-weight:800; letter-spacing:.02em; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); cursor:pointer; transition:transform var(--dur-1) var(--ease-spring); } .header-avatar:hover{transform:scale(1.07)} .header-avatar[data-color="rose"]{background:linear-gradient(135deg,#C99BB0,#A86E84)} .header-avatar[data-color="platinum"]{background:linear-gradient(135deg,#D8D8DD,#A8A8B0); color:#1A1A1C} .header-avatar[data-color="onyx"]{background:linear-gradient(135deg,#3A3A40,#141416)} @media(max-width:900px){ .hifi-pill, .header-avatar{display:none} .header-search,.header-right{width:100%; max-width:100%} } /* ─────────────────────────────────────────────── §15.3 — HOME: SPOTLIGHT · SHELVES · FOOTER ─────────────────────────────────────────────── */ .spotlight{display:grid; grid-template-columns:1fr 360px; gap:var(--space-5); padding:var(--space-6) var(--space-7) var(--space-5); align-items:stretch} .spotlight-feature{position:relative; border-radius:var(--radius-xl); overflow:hidden; min-height:360px; display:flex; align-items:flex-end; border:1px solid var(--border-hairline); box-shadow:var(--elev-1)} .spotlight-art{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 22%} .spotlight-feature::after{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(95deg, rgba(7,7,8,.94) 0%, rgba(7,7,8,.72) 44%, rgba(7,7,8,.22) 100%)} [data-theme="light"] .spotlight-feature::after{background:linear-gradient(95deg, rgba(247,246,243,.97) 0%, rgba(247,246,243,.8) 46%, rgba(247,246,243,.3) 100%)} .spotlight-body{position:relative; z-index:2; padding:var(--space-7); max-width:580px} [data-theme="dark"] .spotlight-body{color:#fff} .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:.7rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px} .eyebrow-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)} .spotlight-title{font-family:var(--font-display); font-size:var(--text-4xl); font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:0 0 14px; color:var(--text-1)} [data-theme="dark"] .spotlight-title{color:#fff} .spotlight-desc{font-size:1rem; line-height:1.6; color:var(--text-2); margin:0 0 18px; max-width:52ch} [data-theme="dark"] .spotlight-desc{color:rgba(255,255,255,.76)} .spotlight-meta{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:.74rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:26px} [data-theme="dark"] .spotlight-meta{color:rgba(255,255,255,.62)} .spotlight-meta .mdot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6} .spotlight-actions{display:flex; gap:12px; flex-wrap:wrap} /* Buttons */ .play-all-btn{display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 26px; margin-top:0; border-radius:var(--radius-pill); background:var(--accent); color:var(--accent-contrast); font-family:var(--font-display); font-size:.92rem; font-weight:750; letter-spacing:-.01em; border:none; box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent); transition:transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-1), background var(--dur-1)} .play-all-btn svg{width:20px; height:20px; fill:currentColor} .play-all-btn:hover{transform:translateY(-2px); background:var(--accent-hover); box-shadow:0 12px 32px color-mix(in srgb, var(--accent) 40%, transparent)} .play-all-btn:active{transform:translateY(0)} .btn-ghost{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 24px; border-radius:var(--radius-pill); background:transparent; color:var(--text-1); border:1px solid var(--border-strong); font-family:var(--font-display); font-size:.92rem; font-weight:700; cursor:pointer; transition:background var(--dur-1), border-color var(--dur-1), transform var(--dur-1)} .btn-ghost:hover{background:var(--surface-hover); border-color:var(--text-3)} [data-theme="dark"] .spotlight-body .btn-ghost{color:#fff; border-color:rgba(255,255,255,.32)} [data-theme="dark"] .spotlight-body .btn-ghost:hover{background:rgba(255,255,255,.1)} /* Access card */ .access-card{display:flex; flex-direction:column; background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--elev-1)} [data-theme="light"] .access-card{background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur)} .access-title{font-family:var(--font-display); font-size:1.5rem; font-weight:800; letter-spacing:-.015em; margin:6px 0 8px; color:var(--text-1)} .access-sub{font-size:.86rem; line-height:1.55; color:var(--text-2); margin-bottom:18px} .access-card .waitlist-form{align-items:stretch; max-width:none; gap:10px; width:100%} .access-card .waitlist-row{max-width:none} .access-card .waitlist-input{flex:1; height:46px; border-radius:var(--radius-md) !important; background:var(--surface-3) !important; border:1px solid var(--border-hairline) !important; box-shadow:none !important; color:var(--text-1)} .access-card .waitlist-yt-row{max-width:none; opacity:1} .access-card .waitlist-yt-input{border-radius:var(--radius-md) !important; background:var(--surface-3) !important; border:1px solid var(--border-hairline) !important; color:var(--text-2)} .access-card .waitlist-btn{height:46px; border-radius:var(--radius-md) !important; padding:0 22px; background:var(--accent) !important; color:var(--accent-contrast) !important; border:none !important; font-weight:750} .access-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:auto; padding-top:22px} .access-stat{display:flex; flex-direction:column; gap:3px; padding:12px 8px; border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--border-hairline); text-align:center} .access-stat strong{font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--text-1)} .access-stat span{font-size:.6rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)} /* Quick-access grid */ .home-content{padding-top:var(--space-3)} .quick-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin-bottom:var(--space-7)} .quick-tile{display:flex; align-items:center; gap:14px; text-align:left; background:var(--surface-2); border:1px solid var(--border-hairline); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; height:64px; transition:background var(--dur-1) var(--ease-out), transform var(--dur-1)} .quick-tile:hover{background:var(--surface-3); transform:translateY(-1px)} .quick-art{width:64px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-2)} .quick-art svg{width:24px; height:24px; fill:currentColor; opacity:.9} .quick-art--liked{background:linear-gradient(135deg, var(--accent), var(--accent-rose)); color:#fff} .quick-art--liked svg{opacity:1; fill:#fff} .quick-label{font-family:var(--font-display); font-size:.9rem; font-weight:700; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:14px} /* Shelves */ .shelf{margin-bottom:var(--space-7); position:relative} .shelf-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:var(--space-4); border:none; padding:0} .shelf-title{font-family:var(--font-display); font-size:1.4rem; font-weight:800; letter-spacing:-.015em; color:var(--text-1); margin:0} .shelf-link{font-family:var(--font-display); font-size:.78rem; font-weight:700; color:var(--text-2); cursor:pointer; padding:8px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-hairline); background:transparent; transition:color var(--dur-1), background var(--dur-1); white-space:nowrap} .shelf-link:hover{color:var(--text-1); background:var(--surface-hover)} .shelf-nav{display:flex; gap:8px} .shelf-arrow{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-3); border:1px solid var(--border-hairline); color:var(--text-2); cursor:pointer; transition:color var(--dur-1), background var(--dur-1)} .shelf-arrow:hover{color:var(--text-1); background:var(--surface-hover)} .shelf-arrow svg{width:18px; height:18px; fill:currentColor} .shelf-track{display:flex; gap:var(--space-4); overflow-x:auto; scroll-snap-type:x proximity; padding:4px 0 12px; scroll-behavior:smooth; scrollbar-width:thin} .shelf-track::-webkit-scrollbar{height:8px} .shelf-track::-webkit-scrollbar-track{background:transparent} .shelf-track::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:8px; border:2px solid transparent; background-clip:padding-box} .shelf-track > *{flex:0 0 188px; scroll-snap-align:start; margin:0} .shelf-track--video > *{flex:0 0 300px} /* Top requested row */ .top-requests-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:var(--space-7)} /* Skeleton loaders */ @keyframes skShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .sk{background:var(--surface-3); border-radius:8px; position:relative; overflow:hidden} .sk::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-3) 18%, transparent), transparent); animation:skShimmer 1.4s infinite} .sk-card{background:var(--surface-2); border:1px solid var(--border-hairline); border-radius:var(--radius-md); padding:14px} .sk-req{display:flex; align-items:center; gap:14px} .sk-thumb-sm{width:48px; height:48px; border-radius:10px; flex-shrink:0} .sk-req-lines{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0} .sk-line{height:11px; width:100%} .sk-short{width:55%} .sk-votes{width:44px; height:32px; flex-shrink:0} .sk-vid{flex:0 0 300px} .sk-thumb{width:100%; aspect-ratio:16/9; border-radius:10px; margin-bottom:12px} /* Site footer */ .site-footer{margin-top:var(--space-8); border-top:1px solid var(--border-hairline); padding-top:var(--space-7)} .site-footer-top{display:grid; grid-template-columns:1.3fr 2fr; gap:var(--space-7); margin-bottom:var(--space-6)} .footer-wordmark{font-family:var(--font-display); font-size:1.3rem; font-weight:800; letter-spacing:-.015em; color:var(--text-1); margin-bottom:12px} .footer-brand p{font-size:.86rem; line-height:1.6; color:var(--text-2); max-width:44ch} .footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5)} .footer-col{display:flex; flex-direction:column; gap:10px} .footer-col h5{font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px} .footer-col a{font-size:.84rem; font-weight:600; color:var(--text-2); cursor:pointer; transition:color var(--dur-1)} .footer-col a:hover{color:var(--accent)} .site-footer-legal{border-top:1px solid var(--border-hairline); padding:var(--space-5) 0 var(--space-6)} .site-footer-legal p{font-size:.74rem; line-height:1.6; color:var(--text-3); margin-bottom:16px} .site-footer-bar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.72rem; font-weight:600; color:var(--text-3)} /* Home responsive */ @media(max-width:1000px){ .spotlight{grid-template-columns:1fr} } @media(max-width:900px){ .spotlight{padding:var(--space-4) var(--space-4) var(--space-3); gap:var(--space-4)} .spotlight-body{padding:var(--space-5)} .spotlight-title{font-size:var(--text-3xl)} .spotlight-feature{min-height:280px} .home-content{padding-left:var(--space-4); padding-right:var(--space-4)} .top-requests-row{grid-template-columns:1fr} .site-footer-top{grid-template-columns:1fr; gap:var(--space-5)} .footer-cols{grid-template-columns:1fr 1fr} } .hero{ min-height:460px; padding:86px 56px 58px; background: linear-gradient(90deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.86) 42%,rgba(5,5,5,.48) 100%), url('https://thebluebanner.net/wp-content/uploads/2025/10/Kevin-Eddings-_Here-for-it-all_.jpg') center 20%/cover; border-bottom:1px solid rgba(255,255,255,.08); } [data-theme="light"] .hero{ text-align:left; align-items:flex-start; background: linear-gradient(90deg,rgba(244,244,241,.98) 0%,rgba(244,244,241,.9) 46%,rgba(244,244,241,.54) 100%), url('https://thebluebanner.net/wp-content/uploads/2025/10/Kevin-Eddings-_Here-for-it-all_.jpg') center 20%/cover; border-bottom:1px solid rgba(20,20,20,.1); backdrop-filter:none; -webkit-backdrop-filter:none; } [data-theme="light"] .hero::before{display:none} .hero-badge{margin-bottom:18px;color:var(--gold);letter-spacing:.8px;text-transform:uppercase;font-size:.7rem} .hero-title{font-family:var(--font-ui);font-size:5.25rem;font-weight:900;letter-spacing:0;line-height:.98;margin-bottom:22px;max-width:760px} .hero-desc{max-width:720px;font-size:1.08rem;line-height:1.75;color:#d8d8d8;margin-bottom:30px} [data-theme="light"] .hero-desc{color:var(--text-secondary)} .waitlist-form{align-items:flex-start} .waitlist-input,.waitlist-yt-input,.search-input{border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(14,14,14,.88)} [data-theme="light"] .waitlist-input, [data-theme="light"] .waitlist-yt-input, [data-theme="light"] .search-input{border:1px solid rgba(20,20,20,.12);background:#fff;color:var(--text-primary);box-shadow:none} .waitlist-btn,.profile-save-btn,.req-submit,.chat-send-btn,.consent-btn-primary{border-radius:8px;background:var(--gold);color:#0b0b0b;font-weight:900} [data-theme="light"] .waitlist-btn, [data-theme="light"] .profile-save-btn, [data-theme="light"] .req-submit, [data-theme="light"] .chat-send-btn, [data-theme="light"] .consent-btn-primary{background:#151515!important;color:#fff!important;border:1px solid #151515;box-shadow:none} .stats-row{gap:34px;margin-top:34px} .stat{display:flex;flex-direction:column;gap:4px;min-width:72px} .stat-value{font-family:var(--font-ui);font-size:1.2rem;font-weight:900} .stat-label{display:block;letter-spacing:.8px;text-transform:uppercase} .content-area{padding:46px 48px 120px} .section-row{border-bottom:1px solid rgba(255,255,255,.08);align-items:center} .section-title{font-family:var(--font-ui);font-size:1.45rem;font-weight:900;letter-spacing:0} .section-action{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;background:rgba(255,255,255,.03)} .quality-section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:46px} .quality-badge{border-radius:8px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:none;padding:22px} [data-theme="light"] .quality-badge{border:1px solid rgba(20,20,20,.1);background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .quality-badge h4{font-family:var(--font-ui);font-size:1rem;font-weight:900} .quality-badge p{letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary)} .album-card,.tracklist,.top-req-card,.req-card,.chatroom-panel,.profile-panel{border-radius:8px;border:1px solid rgba(255,255,255,.08);box-shadow:none;background:rgba(16,16,16,.92)} [data-theme="light"] .album-card, [data-theme="light"] .tracklist, [data-theme="light"] .top-req-card, [data-theme="light"] .req-card, [data-theme="light"] .chatroom-panel, [data-theme="light"] .profile-panel{border:1px solid rgba(20,20,20,.1);background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .album-card:hover,.top-req-card:hover,.req-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.24)!important} .top-req-card{backdrop-filter:none;-webkit-backdrop-filter:none;border-left:3px solid var(--gold);padding:18px 20px} .top-req-title{font-size:1.05rem} .top-req-vote-box{text-align:center;padding-left:16px} /* ─────────────────────────────────────────────── §15.4 — PLAYER BAR (premium) ─────────────────────────────────────────────── */ .player{ background:var(--bg-base); border-top:1px solid var(--border-hairline); padding:0 var(--space-5); animation:none; grid-template-columns:minmax(190px, 1fr) minmax(0, 2fr) minmax(190px, 1fr); } [data-theme="light"] .player{background:var(--surface-1); border-top:1px solid var(--border-hairline); box-shadow:0 -8px 28px rgba(20,18,16,.05); backdrop-filter:none; -webkit-backdrop-filter:none} /* Soft now-playing ambient wash (rose/gold whisper from album art) */ .player.ambient-active{background:linear-gradient(0deg, color-mix(in srgb, var(--player-accent, var(--accent)) 9%, var(--bg-base)) 0%, var(--bg-base) 64%) !important; animation:none !important} [data-theme="light"] .player.ambient-active{background:linear-gradient(0deg, color-mix(in srgb, var(--player-accent, var(--accent)) 12%, var(--surface-1)) 0%, var(--surface-1) 64%) !important} .player-track{gap:14px} .player-art{width:58px; height:58px; border-radius:11px !important; border:1px solid var(--border-hairline); box-shadow:var(--elev-1); transition:transform var(--dur-1) var(--ease-out)} .player-art:hover{transform:scale(1.04)} .player-meta h4{font-family:var(--font-display); font-size:.9rem; font-weight:700; letter-spacing:-.01em; color:var(--text-1)} .player-meta p{font-size:.74rem; font-weight:600; color:var(--text-3)} .player-controls{gap:8px} .controls-row{gap:22px} .controls-row button{color:var(--text-2); transition:color var(--dur-1) var(--ease-out), transform var(--dur-1)} .controls-row button:hover{color:var(--text-1); transform:scale(1.08)} .play-btn{width:44px; height:44px; border-radius:50% !important; background:var(--text-1) !important; color:var(--bg-base) !important; border:none !important; box-shadow:0 4px 14px rgba(0,0,0,.32); transition:transform var(--dur-1) var(--ease-spring)} .play-btn:hover{transform:scale(1.07)} [data-theme="light"] .play-btn{background:var(--text-1) !important; color:#fff !important; border:none !important; box-shadow:0 4px 14px rgba(20,18,16,.25)} .progress-row{max-width:620px; gap:12px} .progress-time{font-size:.68rem; font-weight:650; color:var(--text-3); min-width:36px} #progressBar::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill))} #progressBar::-moz-range-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill))} .player-right{gap:5px} .player-btn{color:var(--text-3); padding:8px; border-radius:50%; transition:color var(--dur-1) var(--ease-out), background var(--dur-1)} .player-btn:hover{color:var(--text-1); background:var(--surface-hover); transform:none} .format-badge{border-radius:var(--radius-pill) !important; padding:5px 11px; border:1px solid var(--border-hairline); font-size:.6rem; font-weight:800; letter-spacing:.04em} .album-art{border-radius:var(--radius-md)} .volume-wrapper{width:96px} .profile-page{max-width:1180px} .profile-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);gap:18px;align-items:start} .profile-panel{display:block;padding:28px} .profile-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)} .profile-section-head h2{font-family:var(--font-ui);font-size:1.35rem;font-weight:900;margin:0} .profile-section-kicker{font-size:.68rem;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)} .profile-preview{margin-bottom:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border-radius:8px} .profile-form{display:grid;gap:16px} .profile-field input,.profile-field select,.profile-field textarea{border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#121212} [data-theme="light"] .profile-field input, [data-theme="light"] .profile-field select, [data-theme="light"] .profile-field textarea{border:1px solid rgba(20,20,20,.12);background:#fff;color:var(--text-primary)} .profile-actions{padding-top:4px} .profile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px} .profile-metric{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.035);padding:16px} [data-theme="light"] .profile-metric{border:1px solid rgba(20,20,20,.1);background:#f8f8f5} .profile-metric strong{display:block;font-size:1.45rem;font-weight:900;color:var(--text-primary);line-height:1} .profile-metric span{display:block;margin-top:8px;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.8px;color:var(--text-tertiary)} .profile-account-list{border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin-bottom:18px} [data-theme="light"] .profile-account-list{border:1px solid rgba(20,20,20,.1)} .profile-account-row{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.86rem} [data-theme="light"] .profile-account-row{border-bottom:1px solid rgba(20,20,20,.1)} .profile-account-row:last-child{border-bottom:none} .profile-account-row span{color:var(--text-tertiary);font-weight:700} .profile-account-row strong{font-weight:900;text-align:right} .profile-upgrade-panel{border:1px solid rgba(200,167,90,.28);border-radius:8px;background:rgba(200,167,90,.08);padding:18px} [data-theme="light"] .profile-upgrade-panel{border:1px solid rgba(169,128,50,.28);background:rgba(169,128,50,.08)} .profile-upgrade-panel span{display:block;font-size:.72rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .profile-upgrade-panel p{font-size:.85rem;line-height:1.55;color:var(--text-secondary);margin-bottom:14px} .profile-upgrade-panel button{border-radius:8px;border:1px solid rgba(255,255,255,.12);padding:10px 12px;color:var(--text-tertiary);font-weight:900;cursor:not-allowed;background:rgba(255,255,255,.04)} @media(max-width:900px){ .main-header{height:auto} .hero{padding:44px 18px 34px!important;background:linear-gradient(180deg,rgba(5,5,5,.92),rgba(5,5,5,.78)),url('https://thebluebanner.net/wp-content/uploads/2025/10/Kevin-Eddings-_Here-for-it-all_.jpg') center 20%/cover!important} .hero-title{font-size:2.85rem!important} .hero-desc{font-size:.98rem} .quality-section{grid-template-columns:1fr} .profile-layout{grid-template-columns:1fr} .profile-panel{padding:20px} .profile-section-head{display:block} .profile-section-head h2{margin-top:6px} .profile-metrics{grid-template-columns:1fr} } /* ═══════════════════════════════════════════════ §15.5 — COMPONENT POLISH (views + overlays) ═══════════════════════════════════════════════ */ /* Sections */ .section-row{border-bottom:1px solid var(--border-hairline); padding-bottom:14px; margin-bottom:var(--space-5); align-items:center} .section-title{font-family:var(--font-display); font-size:1.5rem; font-weight:800; letter-spacing:-.015em; color:var(--text-1)} .section-action{border:1px solid var(--border-hairline) !important; border-radius:var(--radius-pill) !important; padding:8px 14px !important; background:transparent !important; color:var(--text-2) !important; font-weight:700; box-shadow:none !important; backdrop-filter:none !important} .section-action:hover{background:var(--surface-hover) !important; color:var(--text-1) !important; transform:none !important; box-shadow:none !important} /* Tracklist */ .tracklist{border:1px solid var(--border-hairline) !important; border-radius:var(--radius-lg) !important; background:var(--surface-1) !important; overflow:hidden; box-shadow:var(--elev-1) !important; backdrop-filter:none !important; margin-bottom:var(--space-7)} .track-header{background:transparent; border-bottom:1px solid var(--border-hairline); padding:13px 18px} .track-header span{font-size:.64rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3)} .track-row{padding:11px 18px; border-bottom:1px solid var(--border-hairline); transition:background var(--dur-1) var(--ease-out)} .track-row:last-child{border-bottom:none} .track-row:hover{background:var(--surface-hover)} .track-row.playing{background:var(--surface-active)} .track-num{font-family:var(--font-display); font-size:.92rem; font-weight:650; color:var(--text-3)} .track-row:hover .track-num, .track-row.playing .track-num{color:var(--accent) !important} .track-title{font-family:var(--font-display); font-size:.9rem; font-weight:650; color:var(--text-1)} .track-row.playing .track-title{color:var(--accent)} .track-artist{font-size:.74rem; font-weight:550; color:var(--text-3); text-transform:none; letter-spacing:0} .track-format{background:var(--surface-3); color:var(--text-2); border-radius:var(--radius-sm); font-size:.58rem; font-weight:750; letter-spacing:.04em; padding:4px 9px} .track-duration{font-size:.8rem; font-weight:600; color:var(--text-3)} .track-heart{color:var(--text-3)} .track-heart:hover, .track-heart.liked{color:var(--accent)} /* Album cards (shelves + grids) */ .album-card{background:var(--surface-2) !important; border:1px solid var(--border-hairline) !important; border-radius:var(--radius-lg) !important; padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; cursor:pointer; transition:background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out)} .album-card:hover{transform:translateY(-4px) !important; background:var(--surface-3) !important; box-shadow:var(--elev-2) !important} [data-theme="light"] .album-card{background:var(--surface-1) !important} [data-theme="light"] .album-card:hover{background:var(--surface-1) !important; box-shadow:var(--elev-2) !important} .album-art{border-radius:var(--radius-md); margin-bottom:14px; box-shadow:var(--elev-1)} .album-play-overlay{bottom:10px; right:10px; top:auto; width:46px; height:46px; border-radius:50%; background:var(--accent); border:none; box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 42%, transparent); opacity:0; transform:translateY(10px); transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring)} .album-card:hover .album-play-overlay{opacity:1; transform:translateY(0)} .album-play-overlay svg{width:20px; height:20px; fill:var(--accent-contrast); margin-left:2px} .album-name{font-family:var(--font-display); font-size:.92rem; font-weight:700; color:var(--text-1); margin-bottom:4px} .album-meta{font-size:.72rem; font-weight:600; color:var(--text-3); text-transform:none; letter-spacing:0} /* Video cards */ .video-card{background:var(--surface-2) !important; border:1px solid var(--border-hairline) !important; border-radius:var(--radius-lg) !important; overflow:hidden; box-shadow:none !important; backdrop-filter:none !important; transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2)} .video-card:hover{transform:translateY(-4px) !important; box-shadow:var(--elev-2) !important} [data-theme="light"] .video-card{background:var(--surface-1) !important} .video-thumb-wrap{border-bottom:1px solid var(--border-hairline)} .video-card-title{font-family:var(--font-display); font-size:.86rem; font-weight:650; color:var(--text-1)} .video-card-meta{font-size:.7rem; color:var(--text-3); text-transform:none; font-weight:600} .duration-badge{border-radius:var(--radius-sm); background:rgba(0,0,0,.82); font-weight:700; border:none} /* Era hero (cinematic) */ .era-hero{padding:var(--space-8) var(--space-7) var(--space-6); gap:var(--space-6); align-items:flex-end; border-bottom:1px solid var(--border-hairline)} .era-cover{width:208px; height:208px; border-radius:var(--radius-lg) !important; box-shadow:var(--elev-2); border:1px solid var(--border-hairline)} .era-label{font-family:var(--font-display); font-size:.7rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)} .era-name{font-family:var(--font-display); font-size:var(--text-4xl); font-weight:800; letter-spacing:-.025em; line-height:1.02; color:var(--text-1)} .era-desc{font-size:.95rem; line-height:1.6; color:var(--text-2); max-width:60ch} .era-stats{font-size:.72rem; font-weight:650; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; gap:14px} /* Empty states */ .empty-state h3{font-family:var(--font-display); font-weight:800; color:var(--text-1)} .empty-state p{color:var(--text-3)} .empty-icon{color:var(--text-3); opacity:.5} /* Liked Songs hero (library) */ .library-hero{display:flex; align-items:flex-end; gap:var(--space-6); padding:var(--space-8) var(--space-7) var(--space-6); border-bottom:1px solid var(--border-hairline); background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 34%, var(--bg-base)) 0%, color-mix(in srgb, var(--accent-rose) 24%, var(--bg-base)) 52%, var(--bg-base) 100%)} .library-hero-art{width:200px; height:200px; border-radius:var(--radius-lg); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--accent), var(--accent-rose)); box-shadow:var(--elev-2)} .library-hero-art svg{width:78px; height:78px; fill:#fff} .library-hero-info{display:flex; flex-direction:column; gap:6px; min-width:0} .library-hero-title{font-family:var(--font-display); font-size:var(--text-5xl); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--text-1); margin:6px 0} .library-hero-meta{font-size:.9rem; font-weight:600; color:var(--text-2)} @media(max-width:900px){ .library-hero{flex-direction:column; align-items:flex-start; padding:var(--space-6) var(--space-4) var(--space-5)} .library-hero-art{width:140px; height:140px} .library-hero-title{font-size:var(--text-3xl)} .era-hero{flex-direction:column; align-items:flex-start; padding:var(--space-6) var(--space-4)} .era-cover{width:150px; height:150px} .era-name{font-size:var(--text-3xl)} } /* Overlay panels — premium surfaces */ .settings-card, .passport-card, .kb-modal-content, .queue-drawer, .consent-banner{ border-radius:var(--radius-xl) !important; border:1px solid var(--border-hairline) !important; background:var(--surface-1) !important; box-shadow:var(--elev-3) !important; } .consent-banner{border-radius:var(--radius-xl) !important} .consent-btn-primary{border-radius:var(--radius-md) !important} .consent-btn-secondary{border-radius:var(--radius-md) !important; border:1px solid var(--border-hairline) !important} .settings-toggle.active{background:var(--accent) !important} .queue-drawer{border-radius:var(--radius-xl) 0 0 var(--radius-xl) !important} /* keep Play buttons inline (don't stretch in flex columns) */ .play-all-btn{align-self:flex-start} /* ═══════════════════════════════════════════════ §15.6 — SUBDUED BRAND MOTIFS + ACCESSIBILITY ═══════════════════════════════════════════════ */ /* Ambient color aura (synced to album art) — the premium motif. Visibility driven by --glow-opacity (JS) and #glowLayer.ambient-off. */ .glow-layer{display:block} .glow-orb{mix-blend-mode:screen} [data-theme="light"] .glow-orb{mix-blend-mode:multiply} /* A whisper of butterflies — heavily subdued, off when Ambient is off */ .floating-bfly{display:block; color:var(--accent); opacity:.045 !important} [data-theme="light"] .floating-bfly{color:var(--accent); opacity:.055 !important} html.motifs-off .floating-bfly{opacity:0 !important} /* Focus-visible rings (keyboard nav) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .nav-item:focus-visible, .library-item:focus-visible, .lib-chip:focus-visible, .quick-tile:focus-visible, .shelf-arrow:focus-visible, .account-chip:focus-visible, .sidebar-tool:focus-visible, .album-card:focus-visible, .video-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } input[type=range]:focus-visible{outline:none} /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important} .floating-bfly, .glow-orb{animation:none !important} .floating-bfly{opacity:.03} }