/* SEO-only block — visible to crawlers + screen readers, off-screen visually. * Standard sr-only pattern (Tailwind / Bootstrap). Don't use display:none — * Google may skip elements that are display:none for the "primary content" * heuristic, but absolutely-positioned + clipped is fully indexable. */ .ivr-seo-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* IV Radio — Globe of Internet Radio. Scoped under .iv-radio-globe-root so nothing leaks to other ivuniverse-web routes when the user navigates away. ── Token philosophy (refactored 2026-05-27): the radio is an *always-dark* surface (planetarium / cosmic feel), but it MUST inherit from the canonical iVUniverse design system in `app/globals.css`. So we: 1. Re-import the brand + radii + motion + status tokens unchanged. 2. Re-define surface + ink + shadow tokens for the always-dark cosmic palette, overriding the design system's light defaults inside this scope only. (This is what `.dark` does globally; the radio is a permanent dark surface, so we don't need the dark class on .) 3. Map local `--ivr-*` aliases to the canonical tokens so the existing ~150 rules below keep working without rewriting every selector. Updating brand colors, radii, or motion in `globals.css` now propagates here automatically — single source of truth, "calm + dense + actionable" per CLAUDE_DESIGN_BRIEF_V2.md. */ .iv-radio-globe-root { /* ── 1. Canonical iVUniverse brand (from globals.css) ─── */ /* --iv-yellow, --iv-purple, --iv-gradient, --iv-success/danger/warning/info, --iv-radius-*, --iv-ease, --iv-duration-* all inherit unchanged. */ /* ── 2. Always-dark cosmic surface (overrides design system light defaults) ─── */ --iv-bg: #06050d; /* deep space canvas */ --iv-surface: rgba(13, 10, 29, 0.72); --iv-surface-raised: rgba(20, 14, 42, 0.86); --iv-border: rgba(255, 255, 255, 0.08); --iv-text: #faf8ff; --iv-text-primary: #faf8ff; /* slightly cooler than #F5F5F5 for the cosmic mood */ --iv-text-secondary: #a39cc4; --iv-text-tertiary: #5e587a; --iv-muted: #a39cc4; --iv-shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --iv-shadow-md: 0 6px 24px rgba(0,0,0,0.40); --iv-shadow-lg: 0 24px 64px rgba(0,0,0,0.50); --iv-glow-yellow: 0 0 24px rgba(247,215,20,0.25); --iv-glow-purple: 0 0 24px rgba(107,63,160,0.30); /* ── 3. Radio-specific token aliases (so legacy --ivr-* rules keep working) ─── */ --ivr-bg: var(--iv-bg); --ivr-bg-2: #0d0a1d; --ivr-panel: var(--iv-surface); --ivr-line: var(--iv-border); --ivr-ink: var(--iv-text-primary); --ivr-dim: var(--iv-text-secondary); --ivr-faint: var(--iv-text-tertiary); /* Brand purple variants kept local (design system has --iv-purple only) */ --iv-purple-d: #4a2873; --iv-purple-l: #8b5cf6; /* ── Genre swatches (radio-domain, not part of canonical design system) ─── */ --g-classical: #d4a056; --g-jazz: #1fb37a; --g-electronic:#6b5cff; --g-indie: #ff7849; --g-mixed: var(--iv-yellow); --g-news: #94a4b5; --g-soulfunk: #e54e78; --g-rockpop: #5cb8ff; --g-world: #c45cff; --g-hiphop: #ff5c8d; position: fixed; inset: 0; z-index: 50; background: var(--iv-bg); color: var(--iv-text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; letter-spacing: -0.01em; } .iv-radio-globe-root * { box-sizing: border-box; margin: 0; padding: 0; } .iv-radio-globe-root #iv-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .iv-radio-globe-root #iv-map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } /* List view: appears in place of the globe when the user toggles to List mode. The globe stays mounted (cheap to keep) but is hidden so audio + state survive the toggle. */ .iv-radio-globe-root .ivr-list { position: absolute; top: 130px; left: 0; right: 0; bottom: 0; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 28px 140px; display: none; } .iv-radio-globe-root.mode-list .ivr-list { display: block; } .iv-radio-globe-root.mode-list #iv-map { opacity: 0; pointer-events: none; } .iv-radio-globe-root.mode-list .ivr-nudge { display: none; } .iv-radio-globe-root .ivr-list-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px 110px 40px 38px; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--iv-radius-lg); cursor: pointer; transition: background var(--iv-duration-sm) var(--iv-ease), transform var(--iv-duration-sm) var(--iv-ease); color: var(--ivr-ink); margin-bottom: 4px; border: 1px solid transparent; } .iv-radio-globe-root .ivr-list-row:hover { background: rgba(255,255,255,0.04); border-color: var(--ivr-line); transform: translateX(2px); } .iv-radio-globe-root .ivr-list-row.playing { background: linear-gradient(90deg, rgba(247,215,20,0.10) 0%, rgba(247,215,20,0.02) 100%); border-color: rgba(247,215,20,0.4); box-shadow: 0 0 0 1px rgba(247,215,20,0.18) inset; } /* Filter behaviour differs between views: * globe → pins stay positionally consistent; non-matching dim to 30% so * the user keeps geographic context. * list → list IS the filter result; non-matching rows are hidden entirely. */ .iv-radio-globe-root .ivr-list-row.dimmed { display: none; } /* List-view match-count banner — only visible when in list mode. */ .iv-radio-globe-root .ivr-list-count { display: none; /* shown only in mode-list via below */ font-size: 11.5px; font-family: 'JetBrains Mono', monospace; color: var(--ivr-dim); letter-spacing: 0.04em; padding: 8px 14px 12px; position: sticky; top: 0; background: linear-gradient(to bottom, var(--iv-bg) 60%, transparent); z-index: 1; } .iv-radio-globe-root .ivr-list-count.hidden { display: none !important; } .iv-radio-globe-root .ivr-list-count .num { color: var(--iv-yellow); font-weight: 600; font-size: 13px; } .iv-radio-globe-root.mode-list .ivr-list-count { display: block; } .iv-radio-globe-root .ivr-list-row .lr-dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 10px currentColor; } .iv-radio-globe-root .ivr-list-row .lr-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iv-radio-globe-root .ivr-list-row .lr-sub { font-size: 11.5px; color: var(--ivr-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iv-radio-globe-root .ivr-list-row .lr-listens { color: var(--iv-yellow); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; } .iv-radio-globe-root .ivr-list-row .lr-tag { display: inline-block; padding: 3px 10px; border-radius: var(--iv-radius-pill); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255,255,255,0.06); color: var(--ivr-ink); border: 1px solid var(--ivr-line); white-space: nowrap; } .iv-radio-globe-root .ivr-list-row .lr-tag.lr-tag-genre { color: var(--ivr-ink); } .iv-radio-globe-root .ivr-list-row .lr-tag.lr-tag-mood { color: var(--iv-purple-l); background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.2); } .iv-radio-globe-root .ivr-list-row .lr-play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--ivr-line); color: var(--ivr-ink); display: flex; align-items: center; justify-content: center; transition: all var(--iv-duration-sm) var(--iv-ease); cursor: pointer; } .iv-radio-globe-root .ivr-list-row:hover .lr-play { background: var(--iv-yellow); color: #000; border-color: var(--iv-yellow); } .iv-radio-globe-root .ivr-list-row .lr-play svg { width: 16px; height: 16px; } /* Heart icon for favourites (iVGU+ feature) */ .iv-radio-globe-root .ivr-list-row .lr-fav { width: 36px; height: 36px; background: transparent; border: 0; color: var(--ivr-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); padding: 0; } .iv-radio-globe-root .ivr-list-row .lr-fav svg { width: 18px; height: 18px; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-list-row .lr-fav:hover { color: var(--iv-yellow); transform: scale(1.1); } .iv-radio-globe-root .ivr-list-row .lr-fav.faved { color: var(--iv-yellow); } .iv-radio-globe-root .ivr-list-row .lr-fav.faved svg { fill: var(--iv-yellow); stroke: var(--iv-yellow); filter: drop-shadow(0 0 6px rgba(247,215,20,0.5)); } /* Anonymous: dim the heart icon (still clickable; will toast a sign-in nudge) */ .iv-radio-globe-root.auth-off .ivr-list-row .lr-fav { opacity: 0.35; } .iv-radio-globe-root.auth-off .ivr-list-row .lr-fav:hover { opacity: 0.65; } /* Submit-a-station link — small pill in the header, next to view toggle */ .iv-radio-globe-root .ivr-submit-link { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; background: rgba(13, 10, 29, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); padding: 7px 12px; color: var(--ivr-dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); pointer-events: auto; } .iv-radio-globe-root .ivr-submit-link:hover { color: #000; background: var(--iv-yellow); border-color: var(--iv-yellow); } @media (max-width: 640px) { .iv-radio-globe-root .ivr-submit-link span { display: none; } .iv-radio-globe-root .ivr-submit-link { padding: 7px 9px; } } /* View-mode toggle (Globe / List) */ .iv-radio-globe-root .ivr-view-toggle { flex: 0 0 auto; display: flex; gap: 2px; background: rgba(13, 10, 29, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); padding: 3px; pointer-events: auto; } .iv-radio-globe-root .ivr-view-tab { background: transparent; border: 0; color: var(--ivr-dim); font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 10px; border-radius: var(--iv-radius-pill); cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); display: flex; align-items: center; gap: 6px; } .iv-radio-globe-root .ivr-view-tab svg { opacity: 0.7; } .iv-radio-globe-root .ivr-view-tab:hover { color: var(--ivr-ink); } .iv-radio-globe-root .ivr-view-tab:hover svg { opacity: 1; } .iv-radio-globe-root .ivr-view-tab.active { background: rgba(255,255,255,0.08); color: var(--ivr-ink); } .iv-radio-globe-root .ivr-view-tab.active svg { opacity: 1; } .iv-radio-globe-root .maplibregl-canvas-container::after { content: ''; position: absolute; inset: 0; pointer-events: none; /* Soft vignette only — no purple cast. Founder direction 2026-05-27: water blue, land natural. The vignette keeps the cosmic frame; the per-layer overrides in darkenMapStyle() do the rest. */ background: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 0%, rgba(6,5,13,0.55) 100%); z-index: 2; } /* Cosmic-natural canvas filter: keep colours saturated so the blue oceans and green land actually read on screen. Slight dim to keep the cosmic frame, but not so much that everything looks washed-grey. */ .iv-radio-globe-root .maplibregl-canvas { filter: saturate(1.05) brightness(0.92) contrast(1.08); } .iv-radio-globe-root .ivr-header { position: absolute; top: 0; left: 0; right: 0; padding: 22px 28px 18px; z-index: 20; pointer-events: none; display: flex; align-items: center; gap: 16px; background: linear-gradient(to bottom, rgba(6,5,13,0.92), rgba(6,5,13,0)); } .iv-radio-globe-root .ivr-logo { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ivr-ink); display: flex; align-items: center; gap: 10px; pointer-events: auto; } .iv-radio-globe-root .ivr-logo .mark { width: 28px; height: 28px; background: linear-gradient(135deg, var(--iv-yellow) 0%, #ffd84a 100%); color: #000; border-radius: 50%; text-align: center; line-height: 28px; font-weight: 800; font-size: 14px; box-shadow: 0 0 18px rgba(247, 215, 20, 0.35); } .iv-radio-globe-root .ivr-logo .name { font-weight: 700; letter-spacing: -0.02em; } .iv-radio-globe-root .ivr-logo .name span { color: var(--ivr-dim); font-weight: 400; } .iv-radio-globe-root .ivr-pill { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--ivr-dim); padding: 5px 10px; border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); background: rgba(247,215,20,0.04); pointer-events: auto; } .iv-radio-globe-root .ivr-header .ivr-spacer { flex: 1; } .iv-radio-globe-root .ivr-header .ivr-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ivr-dim); pointer-events: auto; letter-spacing: 0.04em; display: flex; align-items: center; gap: 14px; } .iv-radio-globe-root .ivr-count .num { color: var(--iv-yellow); font-weight: 600; } .iv-radio-globe-root .ivr-count .you { display: flex; align-items: center; gap: 6px; color: var(--ivr-ink); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; opacity: 0; transition: opacity 0.4s ease; } .iv-radio-globe-root .ivr-count .you.ready { opacity: 1; } .iv-radio-globe-root .ivr-count .you .dot-here { width: 7px; height: 7px; border-radius: 50%; background: var(--iv-purple-l); box-shadow: 0 0 8px var(--iv-purple-l); animation: ivrYouHere 2.2s ease-in-out infinite; } @keyframes ivrYouHere { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } } .iv-radio-globe-root .ivr-genres { position: absolute; top: 76px; left: 0; right: 0; z-index: 19; padding: 0 28px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; /* Fade right edge so the user knows there's more to scroll. Mask-image works in all modern browsers. The fade kicks in when content overflows; for short rows it's invisible. */ -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%); } .iv-radio-globe-root .ivr-genres::-webkit-scrollbar { display: none; } /* Search — floating top-right, collapses to icon when blurred */ .iv-radio-globe-root .ivr-search { position: absolute; top: 78px; right: 28px; z-index: 21; display: flex; align-items: center; background: rgba(13, 10, 29, 0.85); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease; width: 38px; height: 38px; overflow: hidden; } .iv-radio-globe-root .ivr-search.expanded { width: 340px; box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset; } .iv-radio-globe-root .ivr-search-toggle { flex: 0 0 38px; height: 38px; background: transparent; border: 0; color: var(--ivr-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .iv-radio-globe-root .ivr-search-toggle:hover { color: var(--iv-yellow); } .iv-radio-globe-root .ivr-search-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ivr-ink); font: inherit; font-size: 13px; padding: 0 8px 0 0; height: 38px; opacity: 0; transition: opacity 0.18s ease 0.05s; } .iv-radio-globe-root .ivr-search-input::placeholder { color: var(--ivr-faint); } .iv-radio-globe-root .ivr-search.expanded .ivr-search-input { opacity: 1; } .iv-radio-globe-root .ivr-search-clear { flex: 0 0 30px; height: 38px; background: transparent; border: 0; color: var(--ivr-dim); display: none; align-items: center; justify-content: center; cursor: pointer; } .iv-radio-globe-root .ivr-search-clear:hover { color: var(--ivr-ink); } .iv-radio-globe-root .ivr-search.has-value .ivr-search-clear { display: flex; } /* Mobile: search drops below the genre row, takes full width when expanded */ @media (max-width: 640px) { .iv-radio-globe-root .ivr-search { top: calc(env(safe-area-inset-top) + 110px); right: 12px; } .iv-radio-globe-root .ivr-search.expanded { width: calc(100vw - 24px); } } /* Filter axis tabs (Genre / Mood) — sit at the start of the chip row */ .iv-radio-globe-root .ivr-filter-tabs { flex: 0 0 auto; display: flex; gap: 2px; background: rgba(13, 10, 29, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); padding: 3px; margin-right: 4px; } .iv-radio-globe-root .ivr-filter-tab { position: relative; background: transparent; border: 0; color: var(--ivr-dim); font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 12px; border-radius: var(--iv-radius-pill); cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); white-space: nowrap; } .iv-radio-globe-root .ivr-filter-tab:hover { color: var(--ivr-ink); } .iv-radio-globe-root .ivr-filter-tab.active { background: var(--iv-yellow); color: #000; box-shadow: 0 2px 10px rgba(247,215,20,0.25); } .iv-radio-globe-root .ivr-filter-tab-dot { position: absolute; top: 4px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--iv-purple-l); box-shadow: 0 0 6px var(--iv-purple-l); } .iv-radio-globe-root .ivr-chip { flex: 0 0 auto; padding: 8px 14px; background: rgba(13, 10, 29, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); font-size: 12px; font-weight: 500; color: var(--ivr-dim); cursor: pointer; user-select: none; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; display: flex; align-items: center; gap: 7px; } .iv-radio-globe-root .ivr-chip-count { opacity: 0.5; margin-left: 3px; font-size: 10px; } .iv-radio-globe-root .ivr-chip:hover { color: var(--ivr-ink); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); } .iv-radio-globe-root .ivr-chip.active { color: #000; background: var(--iv-yellow); border-color: var(--iv-yellow); font-weight: 600; box-shadow: 0 4px 20px rgba(247,215,20,0.35); } .iv-radio-globe-root .ivr-chip .swatch { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .iv-radio-globe-root .pin { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; position: relative; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 0 0 2px rgba(255,255,255,0.92), 0 0 14px currentColor; } .iv-radio-globe-root .pin:hover { transform: scale(1.35); } .iv-radio-globe-root .pin::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: ivrPulseRing 3s ease-out infinite; } @keyframes ivrPulseRing { 0% { opacity: 0.6; transform: scale(0.85); } 100% { opacity: 0; transform: scale(3); } } .iv-radio-globe-root .pin.playing { transform: scale(1.4); box-shadow: 0 0 0 3px var(--iv-yellow), 0 0 0 6px rgba(247,215,20,0.4), 0 0 28px rgba(247,215,20,0.7); animation: ivrPlayingBob 2.4s ease-in-out infinite; } @keyframes ivrPlayingBob { 0%, 100% { transform: scale(1.4); } 50% { transform: scale(1.55); } } .iv-radio-globe-root .pin.dimmed { opacity: 0.12; } .iv-radio-globe-root .pin.dimmed::before { display: none; } /* ── Popularity tiers ──────────────────────────────────────────────────────── The JS pinStyleFor() classifies stations by listen count: • hot : top ~10-20% — trending. Bright pulse + chunky halo (set in JS). • warm : upper-middle — louder halo • normal : baseline • cold : ≤2 listens — muted, no extra pulse so it visually fades back. Halo/glow is applied inline by JS so it scales with the dynamic diameter. The CSS here drives the OUTER pulse ring (::before) — hot pins get a faster, more obvious second pulse so trending reads instantly. */ .iv-radio-globe-root .pin.pin-tier-hot::before { animation-duration: 1.8s; opacity: 0; border-width: 2px; } .iv-radio-globe-root .pin.pin-tier-hot::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid currentColor; opacity:0; animation: ivrPulseRing 1.8s ease-out infinite 0.6s; } .iv-radio-globe-root .pin.pin-tier-warm::before { animation-duration: 2.4s; } .iv-radio-globe-root .pin.pin-tier-cold::before { display: none; } .iv-radio-globe-root .pin.pin-tier-cold { opacity: 0.7; } /* Seamless globe interaction: while the user drags / zooms the globe, pause the continuous pulse animations on every pin and the you-marker. 14 simultaneous keyframe rings compounded with MapLibre's per-frame marker re-projection during drag caused visible stutter. Pausing compositing-heavy animations during movement keeps the audio thread un-starved and the globe smooth. */ .iv-radio-globe-root.dragging .pin::before, .iv-radio-globe-root.dragging .pin.playing, .iv-radio-globe-root.dragging .you-marker::after, .iv-radio-globe-root.dragging .ivr-toast .dot { animation-play-state: paused; } /* Also disable the hover-scale transitions during drag — they trigger layout on every marker the cursor passes over. */ .iv-radio-globe-root.dragging .pin { transition: none; } /* Back-hemisphere occlusion — MapLibre HTML markers are 2D overlays so pins on the far side of the globe would otherwise ghost through. JS adds the `.behind` class to any marker whose lat/lng vector has a negative dot product against the camera-centre vector (computed each frame via rAF). We hide via opacity + pointer-events so re-appearing pins don't trigger MapLibre's marker-reproject layout snap. */ .iv-radio-globe-root .maplibregl-marker.behind { opacity: 0; pointer-events: none; transition: opacity 200ms var(--iv-ease, ease); } .iv-radio-globe-root .maplibregl-marker:not(.behind) { /* Brief fade-in when a pin crosses the horizon back into view. */ transition: opacity 200ms var(--iv-ease, ease); } /* While the user is dragging, drop the cross-fade so the pin pop is instant — keeps the dragging hand-feel snappy. */ .iv-radio-globe-root.dragging .maplibregl-marker { transition: none; } /* Podcast pin — square corners + thin outline to differentiate from live radio stations. Same color/genre scheme so the rest of the UI logic (filtering, popularity sizing) keeps working without branching. */ .iv-radio-globe-root .pin.pin-podcast { border-radius: 4px; outline: 1.5px dashed currentColor; outline-offset: 2px; } .iv-radio-globe-root .pin.pin-podcast::before { border-radius: 4px; border-style: dashed; } /* Offline station — desaturated, no pulse ring. Health probe sets this when the latest probe within the last hour returned unreachable. */ .iv-radio-globe-root .pin.offline { background: #4a4661 !important; color: #4a4661 !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 6px rgba(74,70,97,0.6) !important; animation: none; } .iv-radio-globe-root .pin.offline::before { display: none; } .iv-radio-globe-root .ivr-list-row.offline { opacity: 0.55; } .iv-radio-globe-root .ivr-list-row.offline .lr-dot { background: #4a4661 !important; color: #4a4661 !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.4) !important; } .iv-radio-globe-root .ivr-list-row.offline::after { content: 'offline'; font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #ff9999; margin-left: 6px; } .iv-radio-globe-root .you-marker { width: 12px; height: 12px; border-radius: 50%; background: var(--iv-purple-l); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25), 0 0 22px rgba(139, 92, 246, 0.7); pointer-events: none; position: relative; } .iv-radio-globe-root .you-marker::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--iv-purple-l); opacity: 0; animation: ivrYouPulse 3s ease-out infinite; } @keyframes ivrYouPulse { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.2); } } .iv-radio-globe-root .pin-label { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(13, 10, 29, 0.94); backdrop-filter: blur(14px); border: 1px solid var(--ivr-line); color: var(--ivr-ink); padding: 5px 11px; border-radius: var(--iv-radius-md); font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--iv-duration-sm) var(--iv-ease), transform var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .pin:hover .pin-label { opacity: 1; transform: translateX(-50%) translateY(0); } .iv-radio-globe-root .pin-label .city { color: var(--ivr-dim); font-weight: 400; margin-left: 5px; } .iv-radio-globe-root .pin-label .listens { color: var(--iv-yellow); font-size: 10px; font-family: 'JetBrains Mono', monospace; margin-left: 5px; letter-spacing: 0.04em; } .iv-radio-globe-root .ivr-player { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(140%); width: min(780px, calc(100% - 36px)); background: linear-gradient(135deg, var(--iv-surface-raised) 0%, var(--iv-surface) 100%); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--iv-radius-2xl); padding: 16px 20px; z-index: 20; display: flex; align-items: center; gap: 16px; box-shadow: var(--iv-shadow-lg), 0 0 0 1px rgba(255,255,255,0.04) inset; transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1); } .iv-radio-globe-root .ivr-player.visible { transform: translateX(-50%) translateY(0); } .iv-radio-globe-root .pl-art { width: 52px; height: 52px; border-radius: var(--iv-radius-lg); background: var(--ivr-bg-2); border: 1px solid var(--ivr-line); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .iv-radio-globe-root .pl-art .core { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 14px currentColor, 0 0 0 4px rgba(255,255,255,0.06); } .iv-radio-globe-root .pl-art .bars { position: absolute; display: flex; align-items: flex-end; gap: 2px; height: 18px; opacity: 0; transition: opacity 0.3s; } .iv-radio-globe-root .ivr-player.playing .pl-art .core { display: none; } .iv-radio-globe-root .ivr-player.playing .pl-art .bars { opacity: 1; } .iv-radio-globe-root .pl-art .bar { width: 3px; background: var(--iv-yellow); border-radius: 1px; animation: ivrBars 0.9s ease-in-out infinite; } .iv-radio-globe-root .pl-art .bar:nth-child(1) { height: 50%; animation-delay: 0s; } .iv-radio-globe-root .pl-art .bar:nth-child(2) { height: 100%; animation-delay: 0.12s; } .iv-radio-globe-root .pl-art .bar:nth-child(3) { height: 70%; animation-delay: 0.24s; } .iv-radio-globe-root .pl-art .bar:nth-child(4) { height: 90%; animation-delay: 0.36s; } @keyframes ivrBars { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } .iv-radio-globe-root .pl-info { flex: 1; min-width: 0; } .iv-radio-globe-root .pl-name { font-size: 15px; font-weight: 600; color: var(--ivr-ink); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iv-radio-globe-root .pl-meta { font-size: 11.5px; color: var(--ivr-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; font-weight: 400; } .iv-radio-globe-root .pl-meta .geo { color: var(--ivr-ink); font-weight: 500; } .iv-radio-globe-root .pl-meta .sep { color: var(--ivr-faint); } .iv-radio-globe-root .pl-meta .genre-tag { padding: 2px 8px; border-radius: var(--iv-radius-pill); background: rgba(255,255,255,0.06); font-size: 9.5px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ivr-ink); } .iv-radio-globe-root .pl-volume { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 0 4px 0 8px; border-left: 1px solid var(--ivr-line); margin-left: 4px; } .iv-radio-globe-root .pl-volume svg { width: 15px; height: 15px; color: var(--ivr-dim); flex: 0 0 auto; } .iv-radio-globe-root .pl-volume input[type="range"] { -webkit-appearance: none; appearance: none; width: 76px; height: 4px; border-radius: var(--iv-radius-pill); background: linear-gradient(to right, var(--iv-yellow) 0%, var(--iv-yellow) var(--vol, 8%), rgba(255,255,255,0.12) var(--vol, 8%), rgba(255,255,255,0.12) 100%); outline: none; cursor: pointer; } .iv-radio-globe-root .pl-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ivr-ink); border: 2px solid var(--iv-yellow); cursor: pointer; box-shadow: 0 0 8px rgba(247,215,20,0.4); transition: transform 0.1s ease; } .iv-radio-globe-root .pl-volume input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); } .iv-radio-globe-root .pl-volume input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ivr-ink); border: 2px solid var(--iv-yellow); cursor: pointer; box-shadow: 0 0 8px rgba(247,215,20,0.4); } .iv-radio-globe-root .pl-controls { display: flex; gap: 7px; flex: 0 0 auto; } .iv-radio-globe-root .ivr-btn { width: 38px; height: 38px; background: rgba(255,255,255,0.06); border: 1px solid var(--ivr-line); border-radius: 50%; color: var(--ivr-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-btn:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); } .iv-radio-globe-root .ivr-btn:active { transform: scale(0.95); } .iv-radio-globe-root .ivr-btn.play { width: 44px; height: 44px; background: linear-gradient(135deg, var(--iv-yellow) 0%, #ffd84a 100%); border-color: var(--iv-yellow); color: #000; box-shadow: 0 4px 18px rgba(247,215,20,0.4); } .iv-radio-globe-root .ivr-btn.play:hover { background: linear-gradient(135deg, #ffd84a 0%, var(--iv-yellow) 100%); } .iv-radio-globe-root .ivr-btn svg { width: 16px; height: 16px; } .iv-radio-globe-root .ivr-btn.play svg { width: 18px; height: 18px; } .iv-radio-globe-root .ivr-nudge { position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%); font-size: 13px; color: var(--ivr-dim); z-index: 19; text-align: center; pointer-events: none; transition: opacity 0.5s ease; font-weight: 400; } .iv-radio-globe-root .ivr-nudge .key { display: inline-block; padding: 2px 7px; background: rgba(255,255,255,0.08); border: 1px solid var(--ivr-line); border-radius: 5px; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--ivr-ink); margin: 0 2px; } .iv-radio-globe-root .ivr-nudge.hidden { opacity: 0; } .iv-radio-globe-root .ivr-nudge-mobile { display: none; } .iv-radio-globe-root .ivr-nudge-desktop { display: inline; } @media (max-width: 640px) { .iv-radio-globe-root .ivr-nudge-mobile { display: inline; } .iv-radio-globe-root .ivr-nudge-desktop { display: none; } } .iv-radio-globe-root .ivr-toast { position: absolute; top: 140px; left: 50%; transform: translateX(-50%) translateY(-6px); background: rgba(13, 10, 29, 0.94); backdrop-filter: blur(20px); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); padding: 9px 16px; font-size: 12px; font-weight: 500; color: var(--ivr-ink); z-index: 22; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; white-space: nowrap; } .iv-radio-globe-root .ivr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .iv-radio-globe-root .ivr-toast .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--iv-yellow); margin-right: 7px; transform: translateY(-1px); animation: ivrPulseDot 1.4s ease-in-out infinite; } @keyframes ivrPulseDot { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; box-shadow: 0 0 12px var(--iv-yellow); } } .iv-radio-globe-root .maplibregl-ctrl-attrib { background: rgba(6,5,13,0.7) !important; color: var(--ivr-faint) !important; font-size: 10px !important; } .iv-radio-globe-root .maplibregl-ctrl-attrib a { color: var(--ivr-dim) !important; } .iv-radio-globe-root .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { background: transparent !important; box-shadow: none !important; } .iv-radio-globe-root .maplibregl-ctrl-bottom-right .maplibregl-ctrl button { background: rgba(13, 10, 29, 0.7) !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; border: 1px solid var(--ivr-line) !important; margin: 4px !important; } .iv-radio-globe-root .maplibregl-ctrl-bottom-right .maplibregl-ctrl button:hover { background: rgba(255,255,255,0.08) !important; } .iv-radio-globe-root .maplibregl-ctrl-icon { filter: invert(0.85); } .iv-radio-globe-root .ivr-splash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--ivr-bg-2) 0%, var(--ivr-bg) 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 100; transition: opacity 0.8s ease; } .iv-radio-globe-root .ivr-splash.gone { opacity: 0; pointer-events: none; } .iv-radio-globe-root .ivr-splash .orbit { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.08); border-top-color: var(--iv-yellow); border-right-color: var(--iv-purple-l); animation: ivrSpin 1.4s linear infinite; box-shadow: 0 0 30px rgba(247,215,20,0.2); } .iv-radio-globe-root .ivr-splash .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ivr-dim); font-weight: 600; } @keyframes ivrSpin { to { transform: rotate(360deg); } } /* ── Submit-a-Station page ────────────────────────────────────────────── Note: this is a separate route (/radio-globe/submit) and is NOT inside .iv-radio-globe-root, so it sets its own scoped --iv-* token overrides to keep the cosmic dark surface consistent across the radio routes. */ .ivr-submit-root { /* Always-dark cosmic surface — same overrides as .iv-radio-globe-root */ --iv-bg: #06050d; --iv-surface: rgba(13, 10, 29, 0.72); --iv-border: rgba(255, 255, 255, 0.08); --iv-text-primary: #faf8ff; --iv-text-secondary: #a39cc4; --iv-text-tertiary: #5e587a; position: fixed; inset: 0; background: radial-gradient(ellipse at 40% 0%, rgba(107,63,160,0.18) 0%, var(--iv-bg) 60%); color: var(--iv-text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-y: auto; padding: 48px 24px calc(48px + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: flex-start; } .ivr-submit-card { width: 100%; max-width: 640px; background: var(--iv-surface); border: 1px solid var(--iv-border); border-radius: var(--iv-radius-2xl); padding: 36px 36px 32px; backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .ivr-submit-back { display: inline-block; color: var(--iv-text-secondary); text-decoration: none; font-size: 12px; margin-bottom: 18px; transition: color var(--iv-duration-sm) var(--iv-ease); } .ivr-submit-back:hover { color: var(--iv-yellow); } .ivr-submit-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; } .ivr-submit-sub { color: var(--iv-text-secondary); font-size: 13.5px; line-height: 1.5; margin: 0 0 24px; } .ivr-submit-sub a { color: var(--iv-yellow); text-decoration: none; } .ivr-submit-sub a:hover { text-decoration: underline; } .ivr-submit-form { display: flex; flex-direction: column; gap: 14px; } .ivr-submit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ivr-submit-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ivr-submit-field.full { grid-column: 1 / -1; } .ivr-submit-field > span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--iv-text-primary); } .ivr-submit-field > span small { font-weight: 400; font-size: 11px; color: var(--iv-text-secondary); margin-left: 6px; } .ivr-submit-field input, .ivr-submit-field select { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--iv-radius-md); padding: 11px 13px; color: var(--iv-text-primary); font: inherit; font-size: 14px; outline: none; transition: border-color var(--iv-duration-sm) var(--iv-ease), background var(--iv-duration-sm) var(--iv-ease); width: 100%; min-width: 0; } .ivr-submit-field input:focus, .ivr-submit-field select:focus { border-color: var(--iv-yellow); background: rgba(247,215,20,0.04); } .ivr-submit-field input::placeholder { color: var(--iv-text-tertiary); } .ivr-submit-field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } .ivr-submit-turnstile { margin: 4px 0; } .ivr-submit-actions { display: flex; gap: 10px; margin-top: 8px; } .ivr-submit-btn { flex: 0 0 auto; padding: 11px 22px; background: linear-gradient(135deg, var(--iv-yellow) 0%, #ffd84a 100%); color: #000; border: 0; border-radius: var(--iv-radius-pill); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(247,215,20,0.3); transition: transform var(--iv-duration-sm) var(--iv-ease), box-shadow var(--iv-duration-sm) var(--iv-ease); } .ivr-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(247,215,20,0.45); } .ivr-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .ivr-submit-btn-ghost { background: transparent; color: var(--iv-text-secondary); border: 1px solid rgba(255,255,255,0.1); box-shadow: none; } .ivr-submit-btn-ghost:hover { color: var(--iv-text-primary); border-color: rgba(255,255,255,0.25); transform: none; box-shadow: none; } .ivr-submit-error { padding: 10px 14px; background: rgba(220, 38, 38, 0.12); /* tinted from --iv-danger */ border: 1px solid rgba(220, 38, 38, 0.3); border-radius: var(--iv-radius-md); color: #fda4af; font-size: 13px; } .ivr-submit-success { text-align: center; padding: 16px 0 8px; } .ivr-submit-success-icon { width: 56px; height: 56px; margin: 0 auto 16px; background: linear-gradient(135deg, var(--iv-yellow) 0%, #ffd84a 100%); border-radius: 50%; color: #000; font-size: 28px; font-weight: 700; line-height: 56px; box-shadow: 0 0 28px rgba(247,215,20,0.35); } .ivr-submit-success h2 { font-size: 22px; margin: 0 0 8px; font-weight: 700; } .ivr-submit-success p { color: var(--iv-text-secondary); font-size: 14px; line-height: 1.5; margin: 0 0 12px; max-width: 480px; margin-inline: auto; } .ivr-submit-success .ivr-submit-actions { justify-content: center; margin-top: 24px; } .ivr-submit-probe { font-family: 'JetBrains Mono', monospace; font-size: 11px !important; color: var(--iv-text-tertiary) !important; } @media (max-width: 640px) { .ivr-submit-root { padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); } .ivr-submit-card { padding: 24px 22px; border-radius: var(--iv-radius-xl); } .ivr-submit-title { font-size: 22px; } .ivr-submit-grid { grid-template-columns: 1fr; gap: 12px; } } /* ── Achievement chip + panel (iVGU+ gamification) ────────────────────── */ .iv-radio-globe-root .ivr-me-chip { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; margin-left: 4px; cursor: pointer; user-select: none; pointer-events: auto; } .iv-radio-globe-root.auth-off .ivr-me-chip { display: none !important; } .iv-radio-globe-root .ivr-me-chip .me-pill { padding: 4px 8px; border-radius: var(--iv-radius-pill); background: rgba(13, 10, 29, 0.55); border: 1px solid var(--ivr-line); color: var(--ivr-ink); white-space: nowrap; transition: transform var(--iv-duration-sm) var(--iv-ease), background var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-me-chip:hover .me-pill { background: rgba(13, 10, 29, 0.85); transform: translateY(-1px); } .iv-radio-globe-root .ivr-me-chip .me-pill-ach { background: linear-gradient(135deg, rgba(247,215,20,0.18) 0%, rgba(247,215,20,0.06) 100%); border-color: rgba(247,215,20,0.4); color: var(--iv-yellow); } .iv-radio-globe-root .ivr-ach-panel { position: absolute; top: 76px; right: 16px; z-index: 30; width: min(380px, calc(100% - 32px)); background: rgba(13, 10, 29, 0.94); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--iv-radius-xl); padding: 18px 18px 14px; box-shadow: var(--iv-shadow-lg); color: var(--ivr-ink); } .iv-radio-globe-root .ivr-ach-head { font-size: 14px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; } .iv-radio-globe-root .ivr-ach-list { list-style: none; padding: 0; margin: 0; } .iv-radio-globe-root .ivr-ach-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,0.06); } .iv-radio-globe-root .ivr-ach-list li:last-child { border-bottom: 0; } .iv-radio-globe-root .ivr-ach-list .ach-icon { font-size: 14px; color: var(--ivr-faint); } .iv-radio-globe-root .ivr-ach-list li.unlocked .ach-icon { color: var(--iv-yellow); text-shadow: 0 0 8px rgba(247,215,20,0.5); } .iv-radio-globe-root .ivr-ach-list li.unlocked .ach-label { color: var(--ivr-ink); font-weight: 600; } .iv-radio-globe-root .ivr-ach-list li.locked .ach-label { color: var(--ivr-dim); } .iv-radio-globe-root .ivr-ach-list .ach-prog { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ivr-faint); letter-spacing: 0.04em; } .iv-radio-globe-root .ivr-ach-list li.unlocked .ach-prog { color: var(--iv-yellow); } .iv-radio-globe-root .ivr-ach-close { position: absolute; top: 10px; right: 14px; width: 28px; height: 28px; background: transparent; border: 0; color: var(--ivr-dim); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-ach-close:hover { background: rgba(255,255,255,0.08); color: var(--ivr-ink); } @media (max-width: 640px) { .iv-radio-globe-root .ivr-me-chip .me-pill { padding: 3px 6px; font-size: 10px; } .iv-radio-globe-root .ivr-ach-panel { top: calc(env(safe-area-inset-top) + 92px); right: 12px; left: 12px; width: auto; } } /* ── Episode picker panel (Phase 3, podcasts) ───────────────────────────── Opens when the listener taps a podcast pin or list row. Shows the latest 10 episodes resolved from RSS via /api/radio-globe/podcast-episodes/[id]. Sized + positioned like the achievements + playlists panels so they all share the same visual language. */ .iv-radio-globe-root .ivr-episode-panel { position: absolute; top: 76px; right: 16px; z-index: 30; width: min(440px, calc(100% - 32px)); max-height: calc(100vh - 180px); display: flex; flex-direction: column; background: rgba(13, 10, 29, 0.94); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--iv-radius-xl); padding: 18px 18px 10px; box-shadow: var(--iv-shadow-lg); color: var(--ivr-ink); } .iv-radio-globe-root .ivr-ep-head { margin-bottom: 12px; padding-right: 28px; /* room for the close × */ } .iv-radio-globe-root .ivr-ep-title { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ivr-ink); } .iv-radio-globe-root .ivr-ep-sub { font-size: 11.5px; color: var(--ivr-dim); margin-top: 2px; } .iv-radio-globe-root .ivr-ep-list { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 8px; } .iv-radio-globe-root .ivr-ep-loading { text-align: center; font-size: 12px; color: var(--ivr-dim); padding: 24px 8px; } .iv-radio-globe-root .ivr-ep-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: background var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-ep-row:last-child { border-bottom: 0; } .iv-radio-globe-root .ivr-ep-row:hover, .iv-radio-globe-root .ivr-ep-row:focus-visible { background: rgba(255,255,255,0.04); outline: none; } .iv-radio-globe-root .ivr-ep-row.is-last { background: linear-gradient(90deg, rgba(247,215,20,0.10) 0%, rgba(247,215,20,0.02) 100%); } .iv-radio-globe-root .ivr-ep-pos { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: center; color: var(--ivr-faint); } .iv-radio-globe-root .ivr-ep-row.is-last .ivr-ep-pos { color: var(--iv-yellow); } .iv-radio-globe-root .ivr-ep-body { min-width: 0; } .iv-radio-globe-root .ivr-ep-row-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iv-radio-globe-root .ivr-ep-row-meta { font-size: 10.5px; color: var(--ivr-dim); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; } .iv-radio-globe-root .ivr-ep-resume { color: var(--iv-yellow); font-weight: 600; } .iv-radio-globe-root .ivr-ep-play { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--ivr-line); color: var(--ivr-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-ep-row:hover .ivr-ep-play { background: var(--iv-yellow); color: #000; border-color: var(--iv-yellow); } @media (max-width: 640px) { .iv-radio-globe-root .ivr-episode-panel { top: calc(env(safe-area-inset-top) + 92px); right: 12px; left: 12px; width: auto; } .iv-radio-globe-root .ivr-ep-row { padding: 12px 8px; } /* bigger touch area */ } /* ── Playlists panel (iVGU+) ────────────────────────────────────────────── Parallel surface to the achievements panel; both anchor to the upper right corner. Uses the canonical iv-radius / iv-shadow / iv-duration tokens for visual consistency with the rest of the radio. */ .iv-radio-globe-root .ivr-pl-chip { background: transparent; border: 0; padding: 0; cursor: pointer; } .iv-radio-globe-root .ivr-pl-chip .me-pill { background: rgba(13, 10, 29, 0.55); border: 1px solid var(--ivr-line); color: var(--ivr-ink); padding: 4px 10px; border-radius: var(--iv-radius-pill); font-size: 11px; font-weight: 500; white-space: nowrap; transition: transform var(--iv-duration-sm) var(--iv-ease), background var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-pl-chip:hover .me-pill { background: rgba(13, 10, 29, 0.85); transform: translateY(-1px); } .iv-radio-globe-root .ivr-playlists-panel { position: absolute; top: 76px; right: 16px; z-index: 30; width: min(420px, calc(100% - 32px)); max-height: calc(100vh - 180px); overflow: hidden; display: flex; flex-direction: column; background: rgba(13, 10, 29, 0.94); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--iv-radius-xl); padding: 18px 16px 14px; box-shadow: var(--iv-shadow-lg); color: var(--ivr-ink); } .iv-radio-globe-root .ivr-pl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-right: 28px; /* room for the absolute close × */ } .iv-radio-globe-root .ivr-pl-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .iv-radio-globe-root .ivr-pl-newbtn { background: var(--iv-yellow); color: #000; border: 0; padding: 5px 12px; border-radius: var(--iv-radius-pill); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: transform var(--iv-duration-sm) var(--iv-ease), box-shadow var(--iv-duration-sm) var(--iv-ease); box-shadow: 0 2px 10px rgba(247,215,20,0.25); } .iv-radio-globe-root .ivr-pl-newbtn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(247,215,20,0.4); } .iv-radio-globe-root .ivr-pl-list { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; } .iv-radio-globe-root .ivr-pl-empty { text-align: center; padding: 24px 16px 12px; color: var(--ivr-dim); } .iv-radio-globe-root .ivr-pl-empty-icon { font-size: 32px; color: var(--ivr-faint); margin-bottom: 8px; } .iv-radio-globe-root .ivr-pl-empty-text { font-size: 12.5px; line-height: 1.55; } .iv-radio-globe-root .ivr-pl-row { display: grid; grid-template-columns: 36px 1fr 32px 32px; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); } .iv-radio-globe-root .ivr-pl-row:last-child { border-bottom: 0; } .iv-radio-globe-root .ivr-pl-play { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--ivr-line); color: var(--ivr-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-pl-row:hover .ivr-pl-play { background: var(--iv-yellow); color: #000; border-color: var(--iv-yellow); } .iv-radio-globe-root .ivr-pl-info { min-width: 0; } .iv-radio-globe-root .ivr-pl-name { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iv-radio-globe-root .ivr-pl-meta { font-size: 11px; color: var(--ivr-dim); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; } .iv-radio-globe-root .ivr-pl-iconbtn { width: 30px; height: 30px; background: transparent; border: 1px solid transparent; border-radius: 50%; color: var(--ivr-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-pl-iconbtn:hover { background: rgba(255,255,255,0.08); color: var(--ivr-ink); border-color: var(--ivr-line); } .iv-radio-globe-root .ivr-pl-iconbtn.ivr-pl-danger:hover { color: var(--iv-danger); border-color: rgba(220,38,38,0.4); background: rgba(220,38,38,0.08); } /* Playlist editor sub-panel */ .iv-radio-globe-root .ivr-pl-editor { z-index: 31; /* above the list panel if both happen to render */ max-height: calc(100vh - 140px); } .iv-radio-globe-root .ivr-pl-name-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-md); color: var(--ivr-ink); font: inherit; font-size: 14px; padding: 10px 12px; outline: none; margin-bottom: 8px; transition: border-color var(--iv-duration-sm) var(--iv-ease), background var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-pl-name-input:focus { border-color: var(--iv-yellow); background: rgba(247,215,20,0.04); } .iv-radio-globe-root .ivr-pl-name-input::placeholder { color: var(--ivr-faint); } .iv-radio-globe-root .ivr-pl-pickhint { font-size: 10.5px; color: var(--ivr-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .iv-radio-globe-root .ivr-pl-pickbox { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-md); padding: 4px; } .iv-radio-globe-root .ivr-pl-pickrow { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--iv-radius-sm); cursor: pointer; font-size: 12.5px; transition: background var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-pl-pickrow:hover { background: rgba(255,255,255,0.04); } .iv-radio-globe-root .ivr-pl-pickrow.on { background: linear-gradient(90deg, rgba(247,215,20,0.10) 0%, rgba(247,215,20,0.02) 100%); } .iv-radio-globe-root .ivr-pl-pickrow input[type="checkbox"] { accent-color: var(--iv-yellow); width: 14px; height: 14px; cursor: pointer; } .iv-radio-globe-root .ivr-pl-pickname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iv-radio-globe-root .ivr-pl-pickgeo { font-size: 10.5px; color: var(--ivr-dim); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; white-space: nowrap; } .iv-radio-globe-root .ivr-pl-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .iv-radio-globe-root .ivr-pl-cancelbtn, .iv-radio-globe-root .ivr-pl-savebtn { padding: 8px 16px; border-radius: var(--iv-radius-pill); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-pl-cancelbtn { background: transparent; border: 1px solid var(--ivr-line); color: var(--ivr-dim); } .iv-radio-globe-root .ivr-pl-cancelbtn:hover { color: var(--ivr-ink); border-color: rgba(255,255,255,0.25); } .iv-radio-globe-root .ivr-pl-savebtn { background: var(--iv-yellow); border: 1px solid var(--iv-yellow); color: #000; box-shadow: 0 4px 14px rgba(247,215,20,0.3); } .iv-radio-globe-root .ivr-pl-savebtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(247,215,20,0.45); } @media (max-width: 640px) { .iv-radio-globe-root .ivr-playlists-panel { top: calc(env(safe-area-inset-top) + 92px); right: 12px; left: 12px; width: auto; } .iv-radio-globe-root .ivr-pl-name { font-size: 12.5px; } .iv-radio-globe-root .ivr-pl-meta { font-size: 10.5px; } .iv-radio-globe-root .ivr-pl-pickrow { padding: 8px; } /* bigger tap target */ } /* Sign-in CTA (anonymous only) + user chip (signed-in only). The .auth-on / .auth-off classes are set on the root by the server-side page based on the iv_session cookie — toggling visibility is a CSS-only concern, no JS branching needed. */ .iv-radio-globe-root .ivr-signin-cta { position: absolute; bottom: 24px; left: 28px; z-index: 19; display: none; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(13, 10, 29, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); color: var(--ivr-ink); font-size: 12px; font-weight: 500; text-decoration: none; transition: all var(--iv-duration-sm) var(--iv-ease); pointer-events: auto; } .iv-radio-globe-root.auth-off .ivr-signin-cta { display: inline-flex; } .iv-radio-globe-root .ivr-signin-cta:hover { border-color: var(--iv-yellow); background: rgba(247,215,20,0.08); transform: translateY(-1px); } .iv-radio-globe-root .ivr-signin-cta svg { color: var(--iv-yellow); } .iv-radio-globe-root .ivr-user-chip { position: absolute; bottom: 24px; left: 28px; z-index: 19; display: none; align-items: center; gap: 7px; padding: 8px 14px; background: rgba(13, 10, 29, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); color: var(--ivr-ink); font-size: 12px; font-weight: 500; pointer-events: auto; } .iv-radio-globe-root.auth-on .ivr-user-chip { display: inline-flex; } .iv-radio-globe-root .ivr-user-chip .user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--iv-yellow); box-shadow: 0 0 6px var(--iv-yellow); } .iv-radio-globe-root .ivr-user-chip .user-name { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Mobile polish ──────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Header: respect notch (env(safe-area-inset-top)), tighter padding, hide the · iVUniverse subtitle to keep the brand line short. */ .iv-radio-globe-root .ivr-header { padding: calc(env(safe-area-inset-top) + 14px) 16px 10px; gap: 10px; } .iv-radio-globe-root .ivr-logo { font-size: 14px; gap: 8px; } .iv-radio-globe-root .ivr-logo .mark { width: 24px; height: 24px; line-height: 24px; font-size: 12px; } .iv-radio-globe-root .ivr-logo .name span { display: none; } /* hide " · iVUniverse" */ .iv-radio-globe-root .ivr-pill { padding: 4px 8px; font-size: 9px; letter-spacing: 0.12em; } .iv-radio-globe-root .ivr-count { font-size: 10px; gap: 8px; white-space: nowrap; } .iv-radio-globe-root .ivr-count .you { font-size: 10px; } /* Hide the "X live · X on globe" tally on phones; the "you" chip and the count of pins on the map are signal enough. Tally remains on tablet+. */ .iv-radio-globe-root .ivr-count > span:first-child { display: none; } /* Genre row: tighter, sits just below the header. Scroll snaps for momentum. */ .iv-radio-globe-root .ivr-genres { padding: 0 16px; top: calc(env(safe-area-inset-top) + 60px); gap: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .iv-radio-globe-root .ivr-chip { padding: 7px 12px; font-size: 11px; scroll-snap-align: start; } /* Splash: smaller orbit ring */ .iv-radio-globe-root .ivr-splash .orbit { width: 44px; height: 44px; } /* Player: bottom sheet feel, safe-area for home-indicator, 44px tap targets per Apple HIG. Volume slider hidden on phones (hardware volume is enough once playing); the volume icon remains as a visual cue. */ .iv-radio-globe-root .ivr-player { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 16px); width: auto; padding: 12px 14px; gap: 12px; border-radius: var(--iv-radius-xl); transform: translateY(160%); } .iv-radio-globe-root .ivr-player.visible { transform: translateY(0); } .iv-radio-globe-root .pl-art { width: 48px; height: 48px; border-radius: var(--iv-radius-lg); } .iv-radio-globe-root .pl-name { font-size: 14px; } .iv-radio-globe-root .pl-meta { font-size: 11px; } .iv-radio-globe-root .pl-meta .genre-tag { font-size: 9px; padding: 2px 6px; } .iv-radio-globe-root .pl-volume { display: none; } .iv-radio-globe-root .pl-controls { gap: 6px; } .iv-radio-globe-root .ivr-btn { width: 44px; height: 44px; } /* HIG min */ .iv-radio-globe-root .ivr-btn.play { width: 48px; height: 48px; } .iv-radio-globe-root .ivr-btn svg { width: 18px; height: 18px; } .iv-radio-globe-root .ivr-btn.play svg { width: 20px; height: 20px; } /* Nudge: no keyboard on phone — hide the "▶ key" hint */ .iv-radio-globe-root .ivr-nudge { bottom: 95px; font-size: 12px; padding: 0 24px; } .iv-radio-globe-root .ivr-nudge .key { display: none; } /* Toast: room for the notch */ .iv-radio-globe-root .ivr-toast { top: calc(env(safe-area-inset-top) + 108px); font-size: 11px; padding: 8px 14px; } /* Pin labels: hover doesn't fire on touch — show on tap instead. The pin's own click handler still tunes in, this is a brief visual confirm. */ .iv-radio-globe-root .pin-label { font-size: 10px; bottom: 22px; padding: 4px 9px; } .iv-radio-globe-root .pin:active .pin-label { opacity: 1; transform: translateX(-50%) translateY(0); } /* Bigger native-style scrollbar hidden on iOS Safari */ .iv-radio-globe-root .ivr-genres::-webkit-scrollbar { display: none; } /* View toggle: keep just the icons on phones (compact) */ .iv-radio-globe-root .ivr-view-tab span { display: none; } .iv-radio-globe-root .ivr-view-tab { padding: 6px 8px; } /* Sign-in CTA / user chip: hide on phones — the player owns the bottom edge. Tap the user-avatar (future, when nav arrives) to access account. */ .iv-radio-globe-root .ivr-signin-cta, .iv-radio-globe-root .ivr-user-chip { display: none !important; } /* List view: simpler row layout on phones — drop genre/mood tag columns */ .iv-radio-globe-root .ivr-list { padding: 0 12px calc(env(safe-area-inset-bottom) + 130px); top: calc(env(safe-area-inset-top) + 110px); } .iv-radio-globe-root .ivr-list-row { grid-template-columns: 28px minmax(0, 1fr) 36px; gap: 10px; padding: 10px 12px; } .iv-radio-globe-root .ivr-list-row .lr-tag { display: none; } .iv-radio-globe-root .ivr-list-row .lr-name { font-size: 13.5px; } .iv-radio-globe-root .ivr-list-row .lr-sub { font-size: 11px; } .iv-radio-globe-root .ivr-list-row .lr-play { width: 34px; height: 34px; } .iv-radio-globe-root .ivr-list-row .lr-play svg { width: 14px; height: 14px; } } /* ── Tiny phones (iPhone SE, foldables in folded mode) ─────────────────── */ @media (max-width: 380px) { .iv-radio-globe-root .ivr-pill { display: none; } /* drop "Preview" pill */ .iv-radio-globe-root .ivr-count > span:first-child { display: none; } /* drop "14 live · 14 on globe" — keep only "you" chip */ .iv-radio-globe-root .pl-art { width: 40px; height: 40px; } .iv-radio-globe-root .ivr-btn { width: 40px; height: 40px; } /* slight relax for tight phones */ .iv-radio-globe-root .ivr-btn.play { width: 44px; height: 44px; } } /* ── Touch-only refinements (any pointer that's coarse) ─────────────────── */ @media (pointer: coarse) { .iv-radio-globe-root .ivr-btn:hover { transform: none; } /* no hover bounce on touch */ .iv-radio-globe-root .pin:hover { transform: none; } .iv-radio-globe-root .ivr-chip:hover { transform: none; } /* Make the pin's tappable area larger than its visual circle */ .iv-radio-globe-root .pin { box-shadow: 0 0 0 2px rgba(255,255,255,0.92), 0 0 14px currentColor, 0 0 0 8px transparent; /* invisible 8px extra hit area */ } } /* ── Landscape phones: keep header but slim player ─────────────────────── */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { .iv-radio-globe-root .ivr-header { padding: calc(env(safe-area-inset-top) + 8px) 16px 6px; } .iv-radio-globe-root .ivr-genres { top: calc(env(safe-area-inset-top) + 44px); } .iv-radio-globe-root .ivr-player { bottom: calc(env(safe-area-inset-bottom) + 8px); padding: 10px 14px; } .iv-radio-globe-root .ivr-nudge { display: none; } }