/* ============================================================================ Wave Skins — production drop-in stylesheet for thewave.broadcatch.gr ADDITIVE. Loaded AFTER styles.css. Restyles only when (skin.js sets that). Targets the site's existing markup; removes nothing. ============================================================================ */ /* full-viewport reactive backdrop. z-index:0 (NOT -1) + positioned content above it — matching the reference preview. A z-index:-1 fixed canvas is hidden behind the dark background we set for the Safari fix, which made the whole backdrop + bubbles disappear; z-index:0 avoids that. */ #skin-bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; } :root[data-skin="golden"] .container{ position:relative; z-index:1; } :root[data-skin="golden"] .arrow{ z-index:1; } /* ---- Layout fixes (surfaced by the dark theme; base styles.css assumed portrait only) ---- • dark HTML root so iOS Safari's overscroll/toolbar transitions never flash white • allow vertical scroll when the card is taller than the viewport (landscape / short screens) so the player controls are always reachable — base body was height:100vh + overflow:hidden • margin:auto centres the card when it fits and keeps it fully scrollable when it doesn't • safe-area-aware breathing room so the card never hugs the very edges on small phones */ :root[data-skin="golden"]{ background:#160c06; } :root[data-skin="golden"] body{ height:auto; min-height:100vh; overflow-y:auto; box-sizing:border-box; padding:14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); } :root[data-skin="golden"] .container{ margin:auto; } /* ---- GOLDEN HOUR card treatment (only under data-skin="golden") ---- */ :root[data-skin="golden"] .container{ background:rgba(50,29,17,.62)!important; /* lighter/warmer than the original rgba(28,15,7,.55) */ /* border + glow tint from the cover art (soft, near-white), set by skin.js; orange fallback */ border:1px solid var(--skin-card-border, rgba(255,190,120,.34)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 18px 54px var(--skin-card-glow, rgba(120,50,10,.44)); color:#f4e7d4; transition:background .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease; } /* .audio-wrapper background is set inline by script.js -> needs !important to restyle */ :root[data-skin="golden"] .audio-wrapper{ background:rgba(20,10,4,.42)!important; transition:background .5s ease; } :root[data-skin="golden"] #stationTitle, :root[data-skin="golden"] h1{ color:#ffe6c2; } :root[data-skin="golden"] #stationDescription{ color:#d9b892; } :root[data-skin="golden"] .metadata, :root[data-skin="golden"] #scrolling-content{ color:#fff4e6; } /* song title in the accent colour (bold), artist dimmer — matches the zip's two-tone track line */ :root[data-skin="golden"] #song-title{ color:var(--skin-accent,#e84713); font-weight:700; } :root[data-skin="golden"] #artist-name{ color:#e9d3c1; opacity:.8; } :root[data-skin="golden"] .arrow{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5); } /* cover framing */ :root[data-skin="golden"] #coverIcon{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 26px rgba(0,0,0,.5)!important; } /* scrolling title fades at the edges instead of hard-cutting */ :root[data-skin="golden"] #scrolling-text{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } /* ---- equaliser row: EQ label · bars · LIVE badge (injected into .audio-wrapper by skin.js) ---- */ #skin-eqrow{ display:flex; align-items:center; gap:9px; width:100%; margin:2px 0 10px; box-sizing:border-box; } .skin-eqlabel{ flex:0 0 auto; font:700 10px/1 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.14em; color:var(--skin-accent,#e84713); opacity:.75; } .skin-live{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font:700 10px/1 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.14em; color:#ffdccb; opacity:.9; } .skin-live .dot{ width:7px; height:7px; border-radius:50%; background:#ff5a4d; box-shadow:0 0 8px #ff5a4d; animation:skin-live-pulse 1.6s ease-in-out infinite; } @keyframes skin-live-pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.8);} } /* canvas-rendered bars: pixel-snapped even gaps, no per-frame DOM reflow (skin.js draws it) */ #skin-eqcv{ flex:1; min-width:0; height:26px; display:block; } /* genre next to "Now Playing" (skin.js fills it from the single iTunes lookup) */ .skin-genre{ color:var(--skin-accent,#e84713); font-weight:700; letter-spacing:.04em; opacity:.92; } /* skin-scoped scroll polish: fade the marquee edges, and stop it under reduced-motion */ :root[data-skin="golden"] #scrolling-content{ will-change:transform; } @media (prefers-reduced-motion:reduce){ .skin-live .dot{ animation:none; } :root[data-skin="golden"] #scrolling-content{ animation:none; padding-left:0; } } /* ---- custom skinned player (injected by skin.js; native