/* 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; } /* iVRadio — 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; /* Mobile perf 2026-05-29: explicit touch-action: none on the wrapper ensures iOS Safari doesn't reserve the 300ms double-tap-zoom window before letting MapLibre's gesture handlers run. MapLibre sets this on its inner canvas; setting it on the wrapper too is belt-and-braces against any future child element accidentally claiming gestures. */ touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } /* 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; /* Cap content width so rows don't stretch across ultrawide displays (audit 2026-05-29: at >1400 px the middle space between station info and tag column reads as wasted whitespace). Max 1280 px centred. */ padding: 0 28px 140px; display: none; transition: bottom 0.6s cubic-bezier(0.2, 0.9, 0.2, 1); } /* Desktop: when player slides in, shrink list viewport to stop at player top — eliminates row-behind-player overlap at every scroll position. */ .iv-radio-globe-root:has(.ivr-player.visible) .ivr-list { bottom: 143px; } .iv-radio-globe-root .ivr-list-row, .iv-radio-globe-root .ivr-list-count { max-width: 1280px; margin-left: auto; margin-right: auto; } .iv-radio-globe-root.mode-list .ivr-list { display: block; padding-top: 76px; } .iv-radio-globe-root.mode-list #iv-map { opacity: 0; pointer-events: none; } .iv-radio-globe-root.mode-list .ivr-nudge { display: none; } /* List-view filter input — founder 2026-05-29. Visible only in list mode, sticks to the top of the list scroll, full-width on mobile, capped on wide screens. Simple search icon + clear-x button. */ .iv-radio-globe-root .ivr-list-search { display: none; } .iv-radio-globe-root.mode-list .ivr-list-search { /* v2.42 (2026-06-02) — wider pill + flex-wrap on narrow widths so search + sort never overlap on mobile. Founder feedback: "All should be bautiful and very well placed along". Desktop: single row, wider (max 800px) so the sort + search both breathe without competing for pixels. Narrow (<480px): wraps to two rows — search on top, sort below. */ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; position: absolute; top: 130px; left: 50%; transform: translateX(-50%); z-index: 10; margin: 0; padding: 10px 14px; width: min(800px, calc(100% - 24px)); background: rgba(13, 10, 29, 0.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--ivr-line); border-radius: var(--iv-radius-pill); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 12px 32px 8px rgba(6, 5, 13, 0.7); } /* Search input takes priority on a row; sort sits to the right. When the pill wraps on narrow viewports, both children flex to 100% so each gets a full row. */ .iv-radio-globe-root.mode-list .ivr-list-search > .ivr-list-search-icon, .iv-radio-globe-root.mode-list .ivr-list-search > #iv-list-search-input, .iv-radio-globe-root.mode-list .ivr-list-search > .ivr-list-search-clear { flex-shrink: 0; } .iv-radio-globe-root.mode-list .ivr-list-search > #iv-list-search-input { flex: 1 1 200px; min-width: 0; } .iv-radio-globe-root .ivr-list-search-icon { flex: 0 0 16px; color: var(--ivr-dim); } .iv-radio-globe-root #iv-list-search-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ivr-ink); font-size: 14px; font-weight: 400; padding: 4px 0; caret-color: var(--iv-yellow); } .iv-radio-globe-root #iv-list-search-input::placeholder { color: var(--ivr-dim); opacity: 0.7; } .iv-radio-globe-root #iv-list-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .iv-radio-globe-root .ivr-list-search-clear { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.06); color: var(--ivr-ink); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: background var(--iv-duration-sm) var(--iv-ease); } .iv-radio-globe-root .ivr-list-search-clear:hover { background: rgba(255, 255, 255, 0.12); } .iv-radio-globe-root .ivr-list-search.has-value { border-color: var(--iv-yellow); box-shadow: 0 0 0 1px var(--iv-yellow); } /* v2.40 + v2.42 — list-view sort dropdown. Sits inside the same glass pill as the search input. Native