*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0a0e14; --bg-elevated: #161b22; --fg: #e6edf3; --fg-dim: #8b949e; --fg-muted: #c5c5cd; --accent: #5cd6ff; --accent-warm: #ffb454; --accent-green: #4ade80; --accent-red: #ff6b6b; --border: rgba(255, 255, 255, 0.08); --tile-radius: 12px; --gap: 14px; } html, body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.45; } a { color: inherit; text-decoration: none; } .wrapper { max-width: 1600px; margin: 0 auto; padding: 0 24px 120px 24px; } .site-header { display: flex; align-items: center; gap: 22px; padding: 28px 0 26px 0; border-bottom: 1px solid transparent; border-image: linear-gradient( to right, rgba(92, 214, 255, 0.4) 0%, rgba(92, 214, 255, 0.12) 50%, transparent 100% ) 1; margin-bottom: 28px; flex-wrap: wrap; } .site-logo { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; margin-left: -16px; filter: drop-shadow(0 2px 8px rgba(92, 214, 255, 0.15)); } .site-title-block { flex: 1; min-width: 200px; } .site-title { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; color: #f1f5f9; line-height: 1.05; } .site-title .site-domain { font-weight: 400; color: #94a3b8; letter-spacing: 0; } .site-subtitle { font-size: 13.5px; color: #94a3b8; margin-top: 6px; letter-spacing: 0.2px; } .header-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; } .badges { display: flex; gap: 8px; flex-wrap: wrap; } .badge { font-size: 11px; font-weight: 600; color: var(--fg-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .badge.accent { color: var(--accent); border-color: rgba(92, 214, 255, 0.3); background: rgba(92, 214, 255, 0.08); } /* HTTP switch — circular globe button (top-right, HTTPS page only) that sends the user to the HTTP version, where the HTTP-only stations also play. The green corner badge shows how many extra stations they get. Browser split (set by the script via data-browser): only Firefox honours the plain http:// link; Chrome/Opera/Edge/Safari auto-upgrade to https and bounce. So the globe is shown ONLY to Firefox, and everyone else gets the non-clickable .http-hint instead. Both default to hidden so a no-JS client shows neither (graceful). */ /* HTTP-version notice — shown to all HTTPS visitors when there are stations only reachable on the http:// vhost (typically the HTTP-only streams that mixed-content policy blocks here). We give a manual-type instruction because every modern browser's HTTPS-First mode auto- upgrades any http:// CLICK to https, silently bouncing the user back here — so there's no reliable clickable shortcut. Clicking the URL pill copies it to the clipboard; iOS long-press shows the native "Copy" menu via user-select: all on the pill. */ .http-notice { font-size: 13px; color: var(--fg-muted); text-align: right; max-width: 460px; } .http-notice b { color: var(--fg); font-weight: 600; } .http-notice .http-notice-hint { font-size: 11px; color: var(--fg-dim); margin-top: 4px; } .http-good { color: var(--accent-green); font-weight: 700; } .s-bad { color: var(--accent-red); font-weight: 700; } .http-url-code { font-family: 'SF Mono', Menlo, Consolas, monospace; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.25); color: inherit; padding: 3px 8px; border-radius: 5px; font-size: 0.92em; white-space: nowrap; cursor: pointer; user-select: all; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; transition: background 120ms, border-color 120ms, transform 120ms; } .http-url-code:hover { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.5); } .http-url-code:active { transform: scale(0.98); } .http-url-code:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; } .http-url-code .copy-icon { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; pointer-events: none; } .http-url-code.copied { background: rgba(74, 222, 128, 0.3); border-color: var(--accent-green); } .http-url-code.copied .copy-icon { display: none; } .http-url-code.copied::after { content: '✓ copied'; color: var(--accent-green); font-weight: 700; font-size: 0.85em; margin-left: 4px; } @media (max-width: 720px) { .badges { display: none; } } .section-title { display: flex; align-items: baseline; gap: 12px; font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.8px; margin: 4px 0 14px 0; } .section-title .count { color: var(--accent); background: rgba(92, 214, 255, 0.08); padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; } /* Wrapper holds the scrollable chip row + the ‹ › arrow buttons. */ .filter-wrap { position: relative; margin-bottom: 20px; } .filter-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 10px 0; /* Scrollbar hidden on every engine; scrolling is driven by the ‹ › arrow buttons (and wheel/swipe). No engine-specific bar → identical look. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ } .filter-row::-webkit-scrollbar { display: none; } /* WebKit / Blink */ /* ‹ › buttons. Shown only when there's hidden content that way (JS toggles the [hidden] attribute by scroll position). Opaque so chips slide under. */ .filter-arrow { position: absolute; top: 0px; height: 34px; width: 34px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 22px; line-height: 1; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--fg-muted); cursor: pointer; z-index: 5; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .filter-arrow:hover { background: rgba(92, 214, 255, 0.14); border-color: rgba(92, 214, 255, 0.35); color: var(--accent); } .filter-arrow[hidden] { display: none; } .filter-arrow-left { left: -6px; } .filter-arrow-right { right: -6px; } /* "Fog" behind each arrow: a gradient strip fading to the page background, so chips dissolve into it instead of sitting half-hidden under the button. Shown only when that arrow is (toggled by JS via .can-left / .can-right). z-index 2 = above the chips, below the arrow buttons (z-index 5). */ .filter-wrap::before, .filter-wrap::after { content: ''; position: absolute; top: 2px; height: 34px; width: 72px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 160ms ease; } .filter-wrap::before { left: 0; background: linear-gradient(to right, var(--bg) 40%, transparent); } .filter-wrap::after { right: 0; background: linear-gradient(to left, var(--bg) 40%, transparent); } .filter-wrap.can-left::before { opacity: 1; } .filter-wrap.can-right::after { opacity: 1; } .chip { flex-shrink: 0; font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #cbd5e1; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; user-select: none; line-height: 1.2; } .chip:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); color: #f1f5f9; } .chip.active { background: rgba(92, 214, 255, 0.14); border-color: rgba(92, 214, 255, 0.45); color: var(--accent); box-shadow: 0 0 0 1px rgba(92, 214, 255, 0.15), 0 2px 8px rgba(92, 214, 255, 0.08); } .chip:focus-visible { outline: none; border-color: rgba(92, 214, 255, 0.7); box-shadow: 0 0 0 2px rgba(92, 214, 255, 0.25); } .article-body { max-width: 1100px; margin: 2rem auto 4rem auto; padding: 0 24px; color: #cbd5e1; line-height: 1.55; } .article-body h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.6px; color: #f1f5f9; margin: 0.4em 0 0.2em 0; line-height: 1.15; } .article-body .lede { font-size: 14px; color: #94a3b8; margin: 0 0 1.6em 0; font-style: italic; } .article-body h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; color: #f1f5f9; margin: 2em 0 0.6em 0; padding-bottom: 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.15); } .article-body h3 { font-size: 15px; font-weight: 700; color: #e2e8f0; margin: 1.6em 0 0.4em 0; text-transform: uppercase; letter-spacing: 0.8px; } .article-body p, .article-body li { font-size: 15px; color: #cbd5e1; } .article-body ul, .article-body ol { padding-left: 1.4em; } .article-body li { margin-bottom: 0.4em; } .article-body li ul, .article-body li ol { margin-top: 0.4em; } .article-body a { color: var(--accent, #5cd6ff); text-decoration: none; border-bottom: 1px solid rgba(92, 214, 255, 0.25); transition: border-color 120ms; } .article-body a:hover { border-bottom-color: rgba(92, 214, 255, 0.7); } .article-body code { font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: 0.88em; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 4px; color: #e2e8f0; } .article-body strong { color: #f1f5f9; } .article-body em { color: #cbd5e1; } .article-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; } .article-body th, .article-body td { padding: 10px 14px; text-align: left; border: 1px solid rgba(148, 163, 184, 0.18); vertical-align: top; } .article-body th { background: rgba(255, 255, 255, 0.04); color: #cbd5e1; font-weight: 700; letter-spacing: 0.3px; } .article-body td b { color: #f1f5f9; } .tier-section { margin: 36px 0; } .tier-hi-res { --tier-color: #c9a227; } .tier-cd-and-above { --tier-color: #9ca3af; } .tier-unverified { --tier-color: #64748b; } .dot-hi-res { background: #c9a227; } .dot-cd-and-above { background: #9ca3af; } .dot-unverified { background: #64748b; } .tier-header { margin: 0 0 20px 0; padding: 4px 0 14px 0; border-bottom: 1px solid transparent; border-image: linear-gradient( to right, var(--tier-color, #5cd6ff) 0%, var(--tier-color, #5cd6ff) 35%, rgba(148, 163, 184, 0.15) 100% ) 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; } .tier-header-text { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; } .tier-label { font-size: 22px; font-weight: 800; font-style: italic; letter-spacing: -0.5px; color: var(--tier-color, #5cd6ff); margin: 0; line-height: 1; } .tier-image { height: 28px; width: 28px; display: block; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } .tier-spec { font-size: 13px; font-weight: 400; color: #94a3b8; margin: 0; line-height: 1.3; letter-spacing: 0.3px; padding-left: 14px; border-left: 1px solid rgba(148, 163, 184, 0.2); } .tier-count { font-size: 12px; color: #94a3b8; white-space: nowrap; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; } .tier-note { background: rgba(100, 116, 139, 0.1); border-left: 3px solid #64748b; padding: 10px 14px; margin-bottom: 14px; color: #cbd5e1; font-size: 13px; border-radius: 4px; } .tier-note a { color: #5cd6ff; } .stations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--gap); } /* Mobile grid — match the Android app's tile density so users who * jump between web and app on the same phone see comparable tile * sizes. The app uses Flutter's SliverGridDelegateWithMaxCrossAxisExtent * with maxCrossAxisExtent=240, which on a typical 360-411 px phone * settles on 2 columns of ~180-200 px tiles. The desktop default * above (minmax 250 px) gives a single full-width tile on those * screens, which dwarfs everything else and forces excessive * scrolling. * * NOTE — this override MUST stay below the default .stations-grid * rule. CSS cascade with equal specificity gives precedence to the * later definition, so an @media block placed earlier in the file * silently loses to the later un-scoped rule even when the query * matches. (Diagnosed 2026-05-25 on a Redmi Note 15 Pro 5G — the * media query was firing but the desktop value kept winning.) * * 480 px breakpoint chosen because most phones in portrait sit * between 320 and 430 px wide; landscape tablets/large phones above * 480 keep the desktop layout. */ @media (max-width: 480px) { .stations-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } .tile { aspect-ratio: 1 / 1; border-radius: var(--tile-radius); overflow: hidden; position: relative; cursor: pointer; background: var(--bg-elevated); transition: transform 180ms ease-out, box-shadow 180ms ease-out; border: 1px solid transparent; } .tile:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 2; } .tile.is-current { border-color: rgba(92, 214, 255, 0.5); box-shadow: 0 0 0 1px rgba(92, 214, 255, 0.25); } .tile-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #2a3142 0%, #11161e 100%); } /* Genre-derived fallback gradients — visible when the station has no cover (or while the cover loads). Mirrors `_genrePalette` in lib/widgets/stations2_grid.dart so the same station shows the same colour pair in the app and on the site. 32 entries; keep both palettes in sync. The PHP side picks the first genre that has a palette entry (see firstPaletteGenre() in index.php) so a station whose genre[0] isn't in this list still resolves to the colour of genre[1]/[2]/etc, matching the app's walk. */ .tile[data-top-genre="jazz"] .tile-bg { background: linear-gradient(135deg, #C97B2E 0%, #6A3A14 100%); } .tile[data-top-genre="classical"] .tile-bg { background: linear-gradient(135deg, #6E4CB8 0%, #2A1860 100%); } .tile[data-top-genre="eclectic"] .tile-bg { background: linear-gradient(135deg, #3A8E85 0%, #1E5550 100%); } .tile[data-top-genre="electronic"] .tile-bg { background: linear-gradient(135deg, #2E9EB8 0%, #155A6E 100%); } .tile[data-top-genre="rock"] .tile-bg { background: linear-gradient(135deg, #B8344A 0%, #5E1422 100%); } .tile[data-top-genre="classic rock"] .tile-bg { background: linear-gradient(135deg, #B85E5E 0%, #5E1822 100%); } .tile[data-top-genre="pop"] .tile-bg { background: linear-gradient(135deg, #C245A0 0%, #5E1F48 100%); } .tile[data-top-genre="ambient"] .tile-bg { background: linear-gradient(135deg, #2E8A6A 0%, #145238 100%); } .tile[data-top-genre="chillout"] .tile-bg { background: linear-gradient(135deg, #2E7AAA 0%, #14385E 100%); } .tile[data-top-genre="world"] .tile-bg { background: linear-gradient(135deg, #A87830 0%, #4E3010 100%); } .tile[data-top-genre="indie"] .tile-bg { background: linear-gradient(135deg, #4A5FB8 0%, #1E2860 100%); } .tile[data-top-genre="alternative"] .tile-bg { background: linear-gradient(135deg, #6A5FB8 0%, #2A2060 100%); } .tile[data-top-genre="dance"] .tile-bg { background: linear-gradient(135deg, #E04A8E 0%, #6A1A48 100%); } .tile[data-top-genre="house"] .tile-bg { background: linear-gradient(135deg, #C04AB8 0%, #5A1A60 100%); } .tile[data-top-genre="techno"] .tile-bg { background: linear-gradient(135deg, #3AB8C5 0%, #105560 100%); } .tile[data-top-genre="trance"] .tile-bg { background: linear-gradient(135deg, #4A8AE0 0%, #1A3A6A 100%); } .tile[data-top-genre="disco"] .tile-bg { background: linear-gradient(135deg, #E0AE3A 0%, #6A4A10 100%); } .tile[data-top-genre="soul"] .tile-bg { background: linear-gradient(135deg, #B8552E 0%, #5E2210 100%); } .tile[data-top-genre="funk"] .tile-bg { background: linear-gradient(135deg, #B8A02E 0%, #5E5010 100%); } .tile[data-top-genre="r&b"] .tile-bg { background: linear-gradient(135deg, #8E3AB8 0%, #3E1060 100%); } .tile[data-top-genre="hip hop"] .tile-bg { background: linear-gradient(135deg, #B83A6A 0%, #5E1530 100%); } .tile[data-top-genre="rap"] .tile-bg { background: linear-gradient(135deg, #8E3A4A 0%, #3E1520 100%); } .tile[data-top-genre="reggae"] .tile-bg { background: linear-gradient(135deg, #6EB83A 0%, #2E5E10 100%); } .tile[data-top-genre="blues"] .tile-bg { background: linear-gradient(135deg, #3A4AB8 0%, #101E5E 100%); } .tile[data-top-genre="folk"] .tile-bg { background: linear-gradient(135deg, #8E7A3A 0%, #3E3010 100%); } .tile[data-top-genre="metal"] .tile-bg { background: linear-gradient(135deg, #6A6A7A 0%, #1E1E2A 100%); } .tile[data-top-genre="easy listening"] .tile-bg { background: linear-gradient(135deg, #B85E85 0%, #5E2842 100%); } .tile[data-top-genre="experimental"] .tile-bg { background: linear-gradient(135deg, #555570 0%, #1A1A2A 100%); } .tile[data-top-genre="instrumental"] .tile-bg { background: linear-gradient(135deg, #7A8AAA 0%, #2A3A5A 100%); } .tile[data-top-genre="retro"] .tile-bg { background: linear-gradient(135deg, #B8852E 0%, #5E3A10 100%); } .tile[data-top-genre="smooth jazz"] .tile-bg { background: linear-gradient(135deg, #C97B2E 0%, #6A3A14 100%); } .tile[data-top-genre="ballads"] .tile-bg { background: linear-gradient(135deg, #B8556A 0%, #5E1A30 100%); } /* Covers are deferred to the first JS poll (no stale server cover on load). While a tile has no cover, a veil in the PAGE background colour sits over the genre gradient → calm/neutral grid on load. After ~1s the veils fade out (1s) so coverless tiles reveal their genre gradient; covered tiles already show the cover above the veil (DOM order), so the fade is invisible for them. Pure CSS (runs without JS); pointer-events:none so the veil never blocks a tile click. */ .tile-veil { position: absolute; inset: 0; background: var(--bg); pointer-events: none; animation: tile-veil-fade 1000ms ease 1000ms forwards; } @keyframes tile-veil-fade { to { opacity: 0; } } .tile-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 220ms ease; } .playing-indicator { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 5px 8px; display: flex; align-items: flex-end; gap: 2px; height: 18px; z-index: 3; } .playing-indicator .bar { width: 3px; background: #fff; border-radius: 2px; animation: eqbar 1.4s ease-in-out infinite; } .playing-indicator .bar:nth-child(1) { animation-delay: 0s; } .playing-indicator .bar:nth-child(2) { animation-delay: 0.2s; } .playing-indicator .bar:nth-child(3) { animation-delay: 0.4s; } .playing-indicator .bar:nth-child(4) { animation-delay: 0.1s; } @keyframes eqbar { 0%, 100% { height: 4px; } 50% { height: 12px; } } /* Slow cross-fade for any cover that changes (grid tiles + player covers). A transient overlay layer fades the NEW image in (opacity 0 → 1, 1800ms) over the still-visible OLD cover beneath it — a true cross-fade, opacity ONLY (no zoom / slide / blur). Removed once the base element has committed to the new image. pointer-events:none so it never blocks a tile's click. */ .cover-fade { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1800ms cubic-bezier(.4, 0, .2, 1); pointer-events: none; z-index: 1; /* above the base cover, below the tile text overlay */ } .cover-fade.is-in { opacity: 1; } .tile-overlay { position: absolute; z-index: 2; /* keep the tile text/gradient above the fade layer */ left: 0; right: 0; bottom: 0; padding: 18px 12px 10px 12px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 55%, rgba(0, 0, 0, 0.87) 100%); display: flex; flex-direction: column; align-items: flex-start; } .tile-name { color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .tile-meta { color: rgba(255, 255, 255, 0.62); font-size: 10.5px; letter-spacing: 0.4px; margin-top: 3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tile-track { color: var(--fg-muted); font-size: 11px; letter-spacing: 0.3px; margin-top: 4px; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .articles { margin-top: 64px; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .article-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 20px; transition: border-color 180ms; } .article-card:hover { border-color: rgba(92, 214, 255, 0.4); } .article-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; line-height: 1.3; } .article-subtitle { font-size: 13px; color: var(--fg-muted); margin-bottom: 6px; } .article-date { font-size: 11px; color: var(--fg-dim); margin-bottom: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .article-excerpt { font-size: 13px; color: var(--fg-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .player-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(22, 27, 34, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); padding: 18px 28px; display: flex; align-items: center; gap: 18px; transform: translateY(100%); transition: transform 220ms ease-out; z-index: 100; box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45); } .player-bar.visible { transform: translateY(0); } .player-cover { position: relative; /* contains the .cover-fade overlay */ overflow: hidden; /* clip the fade layer to the rounded corners */ width: 64px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--bg-elevated); flex-shrink: 0; } .player-info { flex: 1; min-width: 0; } .player-name { font-size: 17px; font-weight: 700; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-track { font-size: 14px; color: var(--accent-green); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-open-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--fg); font-size: 13px; font-weight: 500; flex-shrink: 0; transition: background 120ms, border-color 120ms, color 120ms; } .player-open-link:hover { background: rgba(92, 214, 255, 0.1); border-color: rgba(92, 214, 255, 0.3); color: var(--accent); } .player-open-link svg { width: 14px; height: 14px; } .player-btn { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--accent); color: #0a0e14; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 120ms; flex-shrink: 0; box-shadow: 0 4px 14px rgba(92, 214, 255, 0.35); } .player-btn:hover { transform: scale(1.08); } .player-icon-svg { width: 22px; height: 22px; } .player-btn { position: relative; overflow: visible; } /* Pre-roll progress ring for the sticky player bar — same mechanism as .station-play-ring, just a tighter inset around the smaller 54 px button. JS sets --wait-ms on the button and toggles .is-loading. */ .player-ring { position: absolute; inset: -7px; /* Explicit size — see comment on .station-play-ring (Safari iPad). */ width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); transform-origin: center center; pointer-events: none; opacity: 0; transition: opacity 180ms ease-out; } .player-ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 295; stroke-dashoffset: 295; filter: drop-shadow(0 0 6px rgba(92, 214, 255, 0.45)); } .player-btn.is-loading .player-ring { opacity: 1; } .player-btn.is-loading .player-ring circle { animation: station-ring-fill var(--wait-ms, 3300ms) linear forwards; } .player-bar audio { display: none; } @media (max-width: 720px) { .player-bar { padding: 14px 16px; gap: 12px; } .player-cover { width: 56px; height: 56px; } .player-name { font-size: 15px; } .player-track { font-size: 12px; } .player-open-link span { display: none; } .player-open-link { padding: 8px 10px; } } .footer { text-align: center; color: var(--fg-dim); font-size: 12px; padding: 48px 0 24px 0; margin-top: 48px; border-top: 1px solid var(--border); } .footer a { color: var(--fg-muted); margin: 0 6px; } .footer a:hover { color: var(--accent); } .stage-tint { position: fixed; inset: 0; background: radial-gradient(ellipse at top, hsl(var(--stage-h, 220), 35%, 22%) 0%, transparent 55%), linear-gradient(to bottom, hsl(var(--stage-h, 220), 25%, 12%) 0%, #050810 100%); z-index: -1; } .station-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; max-width: 720px; margin: 0 auto; gap: 12px; flex-wrap: wrap; } .station-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-dim); padding: 8px 12px; border-radius: 8px; transition: background 120ms, color 120ms; } .station-back:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); } .station-back svg { width: 16px; height: 16px; } .station-format-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); } .station-stage { max-width: 720px; margin: 0 auto; padding: 8px 24px 80px; display: flex; flex-direction: column; align-items: center; text-align: center; } .station-cover { position: relative; /* contains the .cover-fade overlay */ overflow: hidden; /* clip the fade layer to the rounded corners */ width: min(320px, 80vw); aspect-ratio: 1 / 1; border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); margin: 24px 0 16px; background-color: var(--bg-elevated); transition: background-image 220ms ease; } .station-name-big { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 14px; } .station-meta-line { font-size: 13px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } .station-authenticity { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; margin-bottom: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .station-auth-icon { font-size: 14px; line-height: 1; } .station-auth-verified { color: #22c55e; border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.08); } .station-auth-suspect { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); } .station-auth-overstated { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.08); } .station-auth-borderline { color: #94a3b8; } .station-auth-variable { color: #94a3b8; } .station-np { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; width: 100%; max-width: 480px; margin-bottom: 32px; text-align: left; } .station-np-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-green); margin-bottom: 6px; font-weight: 700; } .station-np-artist { font-size: 18px; font-weight: 600; margin-bottom: 2px; color: var(--fg); } .station-np-title { font-size: 14px; color: var(--fg-muted); } .station-controls { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; } .station-play-btn { width: 80px; height: 80px; border-radius: 50%; border: none; background: var(--accent); color: #0a0e14; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 120ms; box-shadow: 0 12px 32px rgba(92, 214, 255, 0.4); position: relative; /* anchor for the absolutely-placed ring */ overflow: visible; /* ring extends 10 px outside the button */ } .station-play-btn:hover { transform: scale(1.04); } .station-play-icon-svg { width: 34px; height: 34px; } /* Pre-roll progress ring — determinate, completes in exactly --wait-ms. JS sets --wait-ms on the button and toggles .is-loading; the CSS drives the fill. Hidden by default (opacity 0); fades in when .is-loading. */ .station-play-ring { position: absolute; inset: -10px; /* 10 px outside the button */ /* Explicit size: Safari (iPad) treats SVG as a replaced element and does NOT stretch its viewport to fill an inset box — it keeps the intrinsic dimensions and pins to the top-left. calc(100% + 20px) forces the SVG viewport to (button + 2×inset) so the rendered ring is concentric with the button on every browser. */ width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); /* fill starts at 12 o'clock */ transform-origin: center center; /* SVG default can be 0 0 — force center */ pointer-events: none; opacity: 0; transition: opacity 180ms ease-out; } .station-play-ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 295; /* 2π·47 ≈ circumference */ stroke-dashoffset: 295; /* empty */ filter: drop-shadow(0 0 6px rgba(92, 214, 255, 0.45)); } .station-play-btn.is-loading .station-play-ring { opacity: 1; } .station-play-btn.is-loading .station-play-ring circle { animation: station-ring-fill var(--wait-ms, 3300ms) linear forwards; } @keyframes station-ring-fill { to { stroke-dashoffset: 0; } } .station-warmup-error { max-width: 480px; margin: -20px auto 24px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 180, 0, 0.35); background: rgba(255, 180, 0, 0.08); color: #ffc04c; font-size: 13px; line-height: 1.5; text-align: center; } .station-secondary-row { display: flex; gap: 16px; margin-bottom: 40px; } .station-secondary-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: color 120ms, background 120ms; } .station-secondary-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg); } .station-secondary-btn svg { width: 18px; height: 18px; } .station-details { width: 100%; max-width: 520px; text-align: left; color: var(--fg-muted); font-size: 14px; line-height: 1.6; } .station-details h3 { font-size: 12px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); } .station-details p { margin-bottom: 16px; color: var(--fg-muted); } .station-details-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; } .station-details-row > div { flex: 1; min-width: 140px; } .station-details-row strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--fg-dim); margin-bottom: 2px; font-weight: 600; } .station-details-row span { color: var(--fg); font-size: 14px; } .station-stream audio { margin-top: 16px; width: 100%; max-width: 520px; } @media (max-height: 760px) { .station-cover { width: min(320px, 80vw, 42vh); margin: 14px 0 12px; } } @media (max-width: 600px) { .station-name-big { font-size: 22px; } .station-np-artist { font-size: 16px; } .station-controls { gap: 18px; } .station-play-btn { width: 70px; height: 70px; } .station-play-icon-svg { width: 28px; height: 28px; } } .is-app-only-hidden { display: none; } /* Runtime simulcast collapse: a tile whose server-side dup_of points at a currently-visible primary (same network, same track right now). Toggled live by pollBulk; clears when the channels diverge. */ .is-dup-hidden { display: none; } .safari-banner { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, #d97706, #b45309); border: 2px solid #fbbf24; color: #fff; padding: 24px 28px; border-radius: 14px; margin-bottom: 28px; font-size: 18px; line-height: 1.5; font-weight: 500; box-shadow: 0 12px 36px rgba(217, 119, 6, 0.45), 0 0 0 1px rgba(251, 191, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: safariBannerIn 360ms ease-out; } @keyframes safariBannerIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .safari-banner-icon { font-size: 40px; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(255, 220, 100, 0.9)); animation: safariBannerPulse 2.2s ease-in-out infinite; } @keyframes safariBannerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .safari-banner-text { flex: 1; } .safari-banner-text strong { color: #fef3c7; font-weight: 700; text-shadow: 0 0 8px rgba(255, 240, 180, 0.6); } .safari-banner-close { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 20px; cursor: pointer; padding: 8px 14px; border-radius: 10px; flex-shrink: 0; font-family: inherit; line-height: 1; font-weight: 700; transition: background 120ms, transform 120ms; } .safari-banner-close:hover { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.4); transform: scale(1.05); } @media (max-width: 600px) { .safari-banner { padding: 18px 18px; font-size: 15px; gap: 14px; } .safari-banner-icon { font-size: 30px; } } .is-hidden { display: none; }