/* ══ SONARA POLISH LAYER ═══════════════════════════════════════════════════
Loaded last. Refines what's already there — nothing is removed or
restructured. Uses the theme tokens (--purple, --purple-light,
--purple-glow, --border, --bg-card) so every theme preset still applies.
To roll back: delete the to this file in index.html.
══════════════════════════════════════════════════════════════════════ */
/* ── Global feel ────────────────────────────────────────────────────── */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scrollbar-color: color-mix(in srgb, var(--purple) 45%, transparent) transparent;
scrollbar-width: thin;
}
::selection {
background: color-mix(in srgb, var(--purple) 55%, transparent);
color: #fff;
}
/* Page scrollbar in brand colour (individual rows keep their own) */
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--purple), var(--blue));
border-radius: 10px;
border: 3px solid var(--bg-dark);
}
/* Keyboard users get a clear, on-brand focus ring (mouse clicks don't) */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
outline: 2px solid var(--purple-light);
outline-offset: 2px;
border-radius: 8px;
}
/* ── Track cards ────────────────────────────────────────────────────── */
/* Equal-height cards with the action row pinned to the bottom, so a
grid row lines up even when some cards have genre pills and some don't. */
.track-grid .track-card {
display: flex;
flex-direction: column;
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.track-grid .track-card-info {
flex: 1;
display: flex;
flex-direction: column;
}
.track-grid .track-card-actions { margin-top: auto; }
/* Artwork: rounded to match the card, and a soft branded placeholder
while covers lazy-load instead of a dead dark square. (Static on
purpose: an animated one repainted all cards nonstop.) */
.track-card-image {
border-radius: var(--radius) var(--radius) 0 0;
background:
radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--purple) 35%, transparent), transparent 60%),
radial-gradient(100% 80% at 90% 100%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
var(--bg-card);
}
.track-card-image img {
transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.track-card:hover .track-card-image img {
transform: scale(1.05);
filter: saturate(1.1);
}
/* Soft bottom fade so the play button reads on bright covers */
.track-card-image::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.track-card:hover .track-card-image::after { opacity: 1; }
.track-card-play { z-index: 1; }
/* Missing artist avatars: branded disc instead of a broken-image icon */
img.track-card-artist-avatar:is([src=""], :not([src])) {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%239333EA'/%3E%3Cstop offset='1' stop-color='%236366F1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='url(%23g)'/%3E%3Cpath d='M10 16.5a2 2 0 1 1-1-1.73V8l6-1.5v7.9a2 2 0 1 1-1-1.73V8.8L10 9.8z' fill='white' fill-opacity='.9'/%3E%3C/svg%3E");
}
/* ── Footer: tie it back into the app's glow ─────────────────────────── */
footer.sonara-footer {
position: relative;
background:
radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 70%),
radial-gradient(50% 100% at 90% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%),
color-mix(in srgb, var(--bg-dark) 97%, black);
border-top-color: transparent;
}
footer.sonara-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--purple-light) 30%, var(--blue) 70%, transparent);
opacity: .55;
}
/* ── Respect reduced-motion preferences ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.track-card,
.track-card-image img { transition: none; }
.track-card:hover .track-card-image img { transform: none; }
}
/* ══ PLAYER POLISH (pairs with player-polish.js) ═══════════════════════ */
/* ── Heart: one SVG heart used in the player bar and Now Playing ───── */
.snr-like-btn {
--heart-off: color-mix(in srgb, color-mix(in srgb, var(--purple) 22%, #fff) 62%, transparent);
--heart-on-a: #f472b6;
--heart-on-b: var(--purple);
position: relative;
display: inline-grid !important;
place-items: center;
width: 34px; height: 34px;
padding: 0 !important;
flex-shrink: 0;
border: 1px solid transparent !important;
border-radius: 50% !important;
background: transparent !important;
color: var(--heart-off) !important;
opacity: 1 !important;
font-size: 0 !important;
cursor: pointer;
transform: none !important;
transition: background .2s, border-color .2s, color .2s !important;
}
.snr-like-btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--heart-on-a) 12%, transparent) !important;
border-color: color-mix(in srgb, var(--heart-on-a) 28%, transparent) !important;
color: #fbcfe8 !important;
}
.snr-like-btn:disabled { opacity: .35 !important; cursor: default; }
.snr-like-btn .snr-heart {
width: 18px; height: 18px;
overflow: visible;
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.snr-like-btn .snr-heart path {
fill: transparent;
stroke: currentColor;
stroke-width: 1.9;
stroke-linejoin: round;
transition: fill .2s, stroke .2s;
}
.snr-like-btn:hover:not(:disabled) .snr-heart { transform: scale(1.12); }
.snr-like-btn:active:not(:disabled) .snr-heart { transform: scale(.88); }
.snr-like-btn.liked .snr-heart path {
fill: var(--heart-on-a);
stroke: var(--heart-on-a);
}
.snr-like-btn.liked .snr-heart { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--heart-on-a) 70%, transparent)); }
/* Like burst: pop + ring + six sparks */
.snr-heart-burst {
position: absolute; inset: 0;
border-radius: 50%;
pointer-events: none;
}
.snr-heart-burst::before,
.snr-heart-burst::after {
content: "";
position: absolute; inset: 0;
border-radius: 50%;
opacity: 0;
}
.snr-heart-burst::before { border: 2px solid var(--heart-on-a); }
.snr-heart-burst::after {
background:
radial-gradient(circle, var(--heart-on-a) 2px, transparent 2.5px) 50% 0 / 6px 6px no-repeat,
radial-gradient(circle, var(--heart-on-b) 2px, transparent 2.5px) 93% 25% / 6px 6px no-repeat,
radial-gradient(circle, var(--heart-on-a) 2px, transparent 2.5px) 93% 75% / 6px 6px no-repeat,
radial-gradient(circle, var(--heart-on-b) 2px, transparent 2.5px) 50% 100% / 6px 6px no-repeat,
radial-gradient(circle, var(--heart-on-a) 2px, transparent 2.5px) 7% 75% / 6px 6px no-repeat,
radial-gradient(circle, var(--heart-on-b) 2px, transparent 2.5px) 7% 25% / 6px 6px no-repeat;
}
.snr-like-btn.snr-burst .snr-heart { animation: snr-heart-pop .45s cubic-bezier(.34,1.56,.64,1); }
.snr-like-btn.snr-burst .snr-heart-burst::before { animation: snr-heart-ring .5s ease-out; }
.snr-like-btn.snr-burst .snr-heart-burst::after { animation: snr-heart-sparks .6s ease-out; }
@keyframes snr-heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes snr-heart-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes snr-heart-sparks{ 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
/* Track title in the player strip: give the heart room, end in "…" */
.player-now-info__meta { min-width: 0; }
.player-now-info__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Now Playing: heart beside the title ───────────────────────────── */
.snr-np-title-row {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin-bottom: .25rem;
max-width: 100%;
}
.snr-np-title-row .now-playing-modal-title {
margin-bottom: 0 !important;
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snr-np-title-row .snr-like-btn { width: 38px; height: 38px; }
.snr-np-title-row .snr-heart { width: 21px; height: 21px; }
/* Fullscreen mode hides the body text styling differently; keep it tidy */
.now-playing-overlay.is-fullscreen .snr-np-title-row { justify-content: flex-start; }
/* ── Like pop (replaces the generic "❤ Liked!" toast) ───────────────── */
#snrLikePop {
position: fixed;
left: 50%;
bottom: calc(var(--player-height, 90px) + 22px);
z-index: 100001;
display: flex;
align-items: center;
gap: 12px;
min-width: 260px;
max-width: min(420px, calc(100vw - 32px));
padding: 8px 8px 8px 8px;
border-radius: 16px;
background: color-mix(in srgb, color-mix(in srgb, var(--purple) 16%, #000) 92%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
opacity: 0;
transform: translate(-50%, 14px) scale(.97);
pointer-events: none;
transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
#snrLikePop.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
#snrLikePop.is-liked {
border-color: rgba(244,114,182,.35);
box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(244,114,182,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.snr-like-pop-art {
position: relative;
width: 42px; height: 42px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(135deg, var(--purple), var(--blue));
}
.snr-like-pop-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#snrLikePop.no-art .snr-like-pop-art img { display: none; }
/* small heart badge on the cover */
.snr-like-pop-art::after {
content: "";
position: absolute; right: 3px; bottom: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: #f472b6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 20.6s-7.6-4.6-9.4-9.3C1.4 8.1 3.3 4.6 6.8 4.4c2.1-.1 3.8 1 5.2 2.9 1.4-1.9 3.1-3 5.2-2.9 3.5.2 5.4 3.7 4.2 6.9-1.8 4.7-9.4 9.3-9.4 9.3z'/%3E%3C/svg%3E") center / 10px no-repeat;
box-shadow: 0 0 0 2px color-mix(in srgb, color-mix(in srgb, var(--purple) 16%, #000) 92%, transparent);
}
#snrLikePop:not(.is-liked) .snr-like-pop-art::after { background-color: #64748b; }
.snr-like-pop-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.snr-like-pop-text strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-like-pop-text small {
font-size: 11.5px; color: color-mix(in srgb, color-mix(in srgb, var(--purple) 22%, #fff) 65%, transparent);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snr-like-pop-undo {
flex-shrink: 0;
padding: 7px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.06);
color: var(--purple-light);
font: inherit; font-size: 12px; font-weight: 600;
cursor: pointer;
transition: background .2s, color .2s;
}
.snr-like-pop-undo:hover { background: rgba(255,255,255,.12); color: #fff; }
/* ── Other toasts: sit above the player, clear of the Mozai button ── */
body #toastContainer {
bottom: calc(var(--player-height, 90px) + 22px) !important;
right: 96px !important;
}
body .sonara-toast {
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.08);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
box-shadow: 0 14px 40px rgba(0,0,0,.5) !important;
font-size: 13px !important;
}
/* ── Transport icons (SVG replaces the ⏮ ⏭ glyphs) ───────────────── */
.snr-transport-icon { width: 17px; height: 17px; display: block; }
.now-playing-modal-controls .snr-transport-icon { width: 20px; height: 20px; }
/* ── Card hearts: same heart shape as the player, not the ♥ glyph ── */
.btn-like .btn-like-icon {
display: inline-block;
width: 17px; height: 17px;
font-size: 0;
vertical-align: middle;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M12 20.6s-7.6-4.6-9.4-9.3C1.4 8.1 3.3 4.6 6.8 4.4c2.1-.1 3.8 1 5.2 2.9 1.4-1.9 3.1-3 5.2-2.9 3.5.2 5.4 3.7 4.2 6.9-1.8 4.7-9.4 9.3-9.4 9.3z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M12 20.6s-7.6-4.6-9.4-9.3C1.4 8.1 3.3 4.6 6.8 4.4c2.1-.1 3.8 1 5.2 2.9 1.4-1.9 3.1-3 5.2-2.9 3.5.2 5.4 3.7 4.2 6.9-1.8 4.7-9.4 9.3-9.4 9.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-like.liked .btn-like-icon {
color: #f472b6;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20.6s-7.6-4.6-9.4-9.3C1.4 8.1 3.3 4.6 6.8 4.4c2.1-.1 3.8 1 5.2 2.9 1.4-1.9 3.1-3 5.2-2.9 3.5.2 5.4 3.7 4.2 6.9-1.8 4.7-9.4 9.3-9.4 9.3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20.6s-7.6-4.6-9.4-9.3C1.4 8.1 3.3 4.6 6.8 4.4c2.1-.1 3.8 1 5.2 2.9 1.4-1.9 3.1-3 5.2-2.9 3.5.2 5.4 3.7 4.2 6.9-1.8 4.7-9.4 9.3-9.4 9.3z'/%3E%3C/svg%3E");
filter: drop-shadow(0 0 5px rgba(244,114,182,.6));
}
.btn-like .btn-like-icon { transition: transform .2s cubic-bezier(.34,1.56,.64,1), color .2s; }
.btn-like:active .btn-like-icon { transform: scale(.82); }
@media (max-width: 768px) {
#snrLikePop { bottom: calc(var(--player-height, 90px) + 90px); }
body #toastContainer { right: 16px !important; left: 16px !important; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
.snr-like-btn.snr-burst .snr-heart,
.snr-like-btn.snr-burst .snr-heart-burst::before,
.snr-like-btn.snr-burst .snr-heart-burst::after { animation: none; }
#snrLikePop { transition: opacity .2s; }
}
/* True centring of the Now Playing title next to the heart */
.snr-np-title-row::before { content: ""; width: 38px; flex-shrink: 0; }
.now-playing-overlay.is-fullscreen .snr-np-title-row::before { display: none; }
/* ── Now Playing chrome: bigger close, clean fullscreen icons ──────── */
#closeNowPlaying {
width: 40px !important; height: 40px !important;
border-radius: 50% !important;
display: grid !important; place-items: center;
font-size: 22px !important; line-height: 1 !important;
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.12) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: background .2s, transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s !important;
}
#closeNowPlaying:hover {
background: color-mix(in srgb, var(--purple) 35%, transparent) !important;
border-color: color-mix(in srgb, var(--purple-light) 50%, transparent) !important;
transform: rotate(90deg);
}
/* ⛶ glyph → drawn expand icon (glyph renders inconsistently across devices) */
.now-playing-visualizer-fullscreen-btn,
.now-playing-art-fullscreen-btn,
.now-playing-fullscreen-corner-btn { font-size: 0 !important; }
.now-playing-visualizer-fullscreen-btn::before,
.now-playing-art-fullscreen-btn::before,
.now-playing-fullscreen-corner-btn::before {
content: "";
display: block;
width: 14px; height: 14px;
margin: auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.now-playing-overlay.is-fullscreen .now-playing-fullscreen-corner-btn::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E");
}
/* ══ PLAYER PASS 2 — icons, progress line, wave strip, player bar ═════ */
/* ── 1. Header + queue icons (SVG replaced photo PNGs with dark boxes) ── */
.snr-ic { display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)) !important; }
.snr-ic .snr-ic-accent { stop-color: var(--purple-light); }
.snr-ic .snr-ic-accent-2 { stop-color: var(--purple); }
.snr-ic .snr-ic-accent-stroke { stroke: var(--purple-light); }
.futurist-icon-tile .notification-icon-img.snr-ic { width: 20px !important; height: 20px !important; }
.futurist-icon-tile .settings-icon-img.snr-ic { width: 19px !important; height: 19px !important; }
.player-bar .futurist-icon-tile .queue-icon-img.snr-ic { width: 20px !important; height: 20px !important; }
.snr-ic, .settings-icon-img.snr-ic { transition: transform .5s cubic-bezier(.34,1.56,.64,1), filter .3s; }
.futurist-icon-host:hover .snr-ic {
filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)) drop-shadow(0 0 6px color-mix(in srgb, var(--purple) 55%, transparent)) !important;
}
.icon-btn-settings:hover .settings-icon-img.snr-ic { transform: rotate(60deg); }
.icon-btn-notification:hover .notification-icon-img.snr-ic { animation: snr-bell-ring .7s ease; transform-origin: 50% 12%; }
@keyframes snr-bell-ring {
0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-11deg); }
60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); }
}
.futurist-icon-host.player-btn-queue.active .queue-icon-img.snr-ic {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--purple) 90%, transparent)) !important;
}
/* ── 2. Progress line ────────────────────────────────────────────────
Bigger invisible hit area (16px) around a thin visible line, a
theme-coloured gradient fill, and a line that thickens on hover. */
.seek-slider {
--track-h: 4px;
height: 16px !important;
margin: -5px 0 !important;
cursor: pointer;
border-radius: 0 !important;
background:
linear-gradient(90deg, var(--blue), var(--purple) 60%, var(--purple-light)) 0 50% / var(--seek-progress, 0%) var(--track-h) no-repeat,
linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.13)) 0 50% / 100% var(--track-h) no-repeat !important;
touch-action: manipulation;
}
.seek-slider:hover, .seek-slider:active, .seek-slider:focus-visible { --track-h: 6px; }
.player-bar[data-progress-style="pill"] .seek-slider { --track-h: 8px; }
.player-bar[data-progress-style="pill"] .seek-slider:hover { --track-h: 10px; }
.seek-slider::-webkit-slider-runnable-track { background: transparent; }
.seek-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 13px; height: 13px;
border-radius: 50%;
background: #fff !important;
border: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 70%, transparent), 0 0 14px var(--purple-glow) !important;
transform: scale(.8);
transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.seek-slider:hover::-webkit-slider-thumb,
.seek-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.seek-slider::-moz-range-track { background: transparent; border: 0; }
.seek-slider::-moz-range-thumb {
width: 13px; height: 13px;
border-radius: 50%;
background: #fff;
border: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 70%, transparent), 0 0 14px var(--purple-glow);
}
/* Times: fixed-width digits so they don't jitter every second */
.progress-bar .time-current, .progress-bar .time-total,
.now-playing-modal-time { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.progress-bar .time-current, .now-playing-modal-time:first-child { color: color-mix(in srgb, color-mix(in srgb, var(--purple) 10%, #fff) 85%, transparent) !important; }
/* ── 3. Mini wave strip: framed like a little screen, not a black box ── */
.waveform-mini {
border-radius: 8px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.25)) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
}
/* ── 4. Player bar: soft glow taken from the current cover ─────────── */
.player-bar.glass::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--snr-np-art, none) center / cover no-repeat;
filter: blur(42px) saturate(1.6);
opacity: .2;
clip-path: inset(0);
transition: opacity .8s ease;
}
.player-bar.glass:not([style*="--snr-np-art"])::after { opacity: 0; }
/* Hairline highlight that picks up the theme colour */
.player-bar.glass::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--purple-light) 70%, transparent) 30%, color-mix(in srgb, var(--blue) 60%, transparent) 70%, transparent);
opacity: .6;
pointer-events: none;
}
/* Studio mode already uses ::before for its label — leave it alone */
body.studio-mode .player-bar.glass::before { background: none; height: auto; opacity: 1; inset: auto; }
@media (max-width: 768px) {
.player-bar.glass::after { clip-path: inset(0 round 22px); opacity: .28; }
.player-bar.glass::before { left: 22px; right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.icon-btn-notification:hover .notification-icon-img.snr-ic { animation: none; }
.icon-btn-settings:hover .settings-icon-img.snr-ic { transform: none; }
}
/* ══ PASS 3 — logo, play button, bottom tab bar ═══════════════════════ */
/* ── Logo tiles: the S is now a transparent SVG (logo-s.svg), so the
tile behind it is drawn here instead of coming from the old photo's
navy square (which showed darker bands inside the circle). ──────── */
.logo-icon:has(img[src*="logo-s.svg"]) {
background:
radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--purple) 30%, var(--snr-deep)) 0%, var(--snr-deeper) 72%);
border: 1px solid color-mix(in srgb, var(--purple-light) 30%, transparent);
}
.logo-icon img[src*="logo-s.svg"] {
padding: 18%;
box-sizing: border-box;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover .logo-icon img[src*="logo-s.svg"] { transform: rotate(-8deg) scale(1.06); }
.mobile-header-brand-logo[src*="logo-s.svg"] {
padding: 5px;
box-sizing: border-box;
border-radius: 10px !important;
background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--purple) 30%, var(--snr-deep)) 0%, var(--snr-deeper) 75%);
border: 1px solid color-mix(in srgb, var(--purple-light) 28%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--purple-glow) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sonara-footer-logo img[src*="logo-s.svg"] {
padding: 4px; box-sizing: border-box; border-radius: 8px;
background: radial-gradient(circle at 30% 25%, var(--snr-deep), var(--snr-deeper) 75%);
}
/* ── Play button: S on a proper disc + crisp drawn play/pause icon ── */
:root:not([data-logo]) .player-btn-play,
:root[data-logo="default"] .player-btn-play {
background:
var(--player-logo-url, url('logo-s.svg')) 50% 50% / 64% no-repeat,
radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--purple) 38%, var(--snr-deep)) 0%, var(--snr-deeper) 70%) !important;
border: 1px solid color-mix(in srgb, var(--purple-light) 35%, transparent) !important;
border-radius: 50% !important;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--purple) 12%, transparent),
0 8px 22px rgba(0,0,0,.5),
0 0 22px var(--purple-glow),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* The ▶ / ⏸ text becomes a drawn icon; state comes from player-polish.js.
Shape lives on ::before (masked); the outline shadow sits on the span,
because a mask would clip a shadow on the same element. */
.player-btn-play[data-snr-state] #btnPlayIcon,
.player-btn-play[data-snr-state] #nowPlayingPlayIcon {
position: relative;
font-size: 0 !important;
width: 17px; height: 17px;
display: block;
text-shadow: none !important;
filter: drop-shadow(0 0 1.2px rgba(12,6,28,1)) drop-shadow(0 0 1.2px rgba(12,6,28,.9)) drop-shadow(0 1px 4px rgba(0,0,0,.7)) !important;
}
.player-btn-play[data-snr-state] #btnPlayIcon::before,
.player-btn-play[data-snr-state] #nowPlayingPlayIcon::before {
content: "";
position: absolute; inset: 0;
background: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.8v14.4a1.2 1.2 0 0 0 1.8 1l11.4-7.2a1.2 1.2 0 0 0 0-2L8.8 3.8A1.2 1.2 0 0 0 7 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.8v14.4a1.2 1.2 0 0 0 1.8 1l11.4-7.2a1.2 1.2 0 0 0 0-2L8.8 3.8A1.2 1.2 0 0 0 7 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
transform: translateX(1px);
}
.player-btn-play[data-snr-state="pause"] #btnPlayIcon::before,
.player-btn-play[data-snr-state="pause"] #nowPlayingPlayIcon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4' width='4.6' height='16' rx='1.6'/%3E%3Crect x='13.9' y='4' width='4.6' height='16' rx='1.6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4' width='4.6' height='16' rx='1.6'/%3E%3Crect x='13.9' y='4' width='4.6' height='16' rx='1.6'/%3E%3C/svg%3E");
transform: none;
}
.now-playing-modal-controls .player-btn-play[data-snr-state] #nowPlayingPlayIcon { width: 20px; height: 20px; }
/* ── Bottom tab bar (phones / narrow windows) ───────────────────────── */
@media (max-width: 768px) {
.mobile-tab-bar {
background: linear-gradient(180deg, rgba(14, 9, 30, .96), rgba(6, 4, 15, .98)) !important;
border-top-color: transparent !important;
}
.mobile-tab-bar::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--purple-light) 55%, transparent) 30%, color-mix(in srgb, var(--blue) 50%, transparent) 70%, transparent);
pointer-events: none;
}
.mobile-tab-bar .nav-item {
position: relative;
gap: .22rem !important;
padding-top: .45rem !important;
background: transparent !important;
color: rgba(196, 186, 220, .62) !important;
-webkit-tap-highlight-color: transparent;
transition: color .2s;
}
.mobile-tab-bar .nav-item .mobile-tab-icon {
width: 46px; height: 28px;
border-radius: 999px;
transition: background .25s, box-shadow .25s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.mobile-tab-bar .nav-item .mobile-tab-icon svg {
width: 21px !important; height: 21px !important;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mobile-tab-bar .nav-item .mobile-tab-label {
font-size: .6rem !important;
font-weight: 600;
letter-spacing: .01em;
}
.mobile-tab-bar .nav-item:active .mobile-tab-icon { transform: scale(.9); }
/* Active tab: soft accent pill behind the icon + small glow dot on top */
.mobile-tab-bar .nav-item.active { color: #fff !important; background: transparent !important; box-shadow: none !important; }
.mobile-tab-bar .nav-item.active .mobile-tab-icon {
background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 38%, transparent), color-mix(in srgb, var(--blue) 26%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple-light) 35%, transparent), 0 0 16px color-mix(in srgb, var(--purple-glow) 55%, transparent);
}
.mobile-tab-bar .nav-item.active .mobile-tab-icon svg { color: #fff !important; transform: translateY(-.5px); }
.mobile-tab-bar .nav-item.active::before {
content: "";
position: absolute; top: 0; left: 50%;
width: 18px; height: 2px; margin-left: -9px;
border-radius: 0 0 2px 2px;
background: var(--purple-light);
box-shadow: 0 0 8px var(--purple-light);
}
}
@media (max-width: 390px) {
.mobile-tab-bar .nav-item .mobile-tab-icon { width: 40px; height: 26px; }
.mobile-tab-bar .nav-item .mobile-tab-icon svg { width: 19px !important; height: 19px !important; }
.mobile-tab-bar .nav-item .mobile-tab-label { font-size: .55rem !important; }
}
@media (prefers-reduced-motion: reduce) {
.logo:hover .logo-icon img[src*="logo-s.svg"] { transform: none; }
}
/* ══ PASS 4 — no overlapping player controls at any width ══════════════
The small player-settings button used to hang 42px outside the centre
column (right: -42px) and the right icon group was pulled left with a
negative margin. Between ~770px and ~1280px wide the two met and the
settings button sat on top of Shuffle. Now the button lives inside the
centre column, beside the wave strip, with its own reserved space. */
@media (min-width: 769px) {
.player-bar .player-center-main { position: relative; }
.player-bar .player-center-main .waveform-mini { margin-right: 36px; }
#playerSettingsBtn.player-bar-settings-btn.futurist-icon-host {
right: 0 !important;
top: 1px !important;
width: 28px !important; height: 26px !important;
min-width: 28px !important; min-height: 26px !important;
}
#playerSettingsBtn.player-bar-settings-btn.futurist-icon-host .futurist-icon-tile {
width: 28px !important; height: 26px !important;
border-radius: 8px !important;
}
#playerSettingsBtn.player-bar-settings-btn .futurist-icon-tile svg.player-icon {
width: 14px !important; height: 14px !important;
}
.player-bar .player-right-icons { margin-left: 0 !important; }
}
/* ══ PASS 4b — Now Playing + fullscreen control sizes ══════════════════
One size scale for the panel controls: secondary 42 · prev/next 50 ·
play 64. Button and tile are always the same size (tiles used to be
2px bigger than their buttons), icons scaled to fill their tiles. */
.now-playing-modal-controls {
--np-sec: 42px; --np-tr: 50px; --np-play: 64px;
--np-sec-ic: 19px; --np-tr-ic: 22px; --np-play-ic: 21px;
gap: 10px !important;
justify-content: center !important;
}
.now-playing-modal-controls-left,
.now-playing-modal-controls-right { gap: 8px !important; }
.now-playing-modal-controls-center { gap: 14px !important; align-items: center; }
.now-playing-modal-controls .futurist-icon-host.player-btn.player-btn-icon,
.now-playing-modal-controls .futurist-icon-host.player-btn-icon .futurist-icon-tile {
width: var(--np-sec) !important; height: var(--np-sec) !important;
min-width: var(--np-sec) !important; min-height: var(--np-sec) !important;
}
.now-playing-modal-controls .futurist-icon-host.player-btn-icon .futurist-icon-tile { border-radius: 12px !important; }
.now-playing-modal-controls .player-btn-icon svg.player-icon {
width: var(--np-sec-ic) !important; height: var(--np-sec-ic) !important;
}
.now-playing-modal-controls .futurist-icon-host.player-btn.player-btn-transport,
.now-playing-modal-controls .futurist-icon-host.player-btn-transport .futurist-icon-tile {
width: var(--np-tr) !important; height: var(--np-tr) !important;
min-width: var(--np-tr) !important; min-height: var(--np-tr) !important;
}
.now-playing-modal-controls .futurist-icon-host.player-btn-transport .futurist-icon-tile { border-radius: 14px !important; }
.now-playing-modal-controls .snr-transport-icon { width: var(--np-tr-ic) !important; height: var(--np-tr-ic) !important; }
.now-playing-modal-controls-center .player-btn-play {
width: var(--np-play) !important; height: var(--np-play) !important;
min-width: var(--np-play) !important; min-height: var(--np-play) !important;
flex-shrink: 0;
}
.now-playing-modal-controls .player-btn-play[data-snr-state] #nowPlayingPlayIcon {
width: var(--np-play-ic) !important; height: var(--np-play-ic) !important;
}
/* Phones: smaller scale so the whole row always fits the panel */
@media (max-width: 480px) {
#nowPlayingModal { padding-left: 18px !important; padding-right: 18px !important; }
.now-playing-modal-controls {
--np-sec: 34px; --np-tr: 42px; --np-play: 54px;
--np-sec-ic: 16px; --np-tr-ic: 19px; --np-play-ic: 18px;
gap: 5px !important;
}
.now-playing-modal-controls-left,
.now-playing-modal-controls-right { gap: 4px !important; }
.now-playing-modal-controls-center { gap: 6px !important; }
}
@media (max-width: 340px) {
.now-playing-modal-controls { --np-sec: 30px; --np-tr: 38px; --np-play: 48px; --np-sec-ic: 15px; --np-tr-ic: 17px; }
}
/* Fullscreen ("full zoom"): controls sit in a centred deck instead of the
panel-sized row stretched under a full-width bar, and step up a size. */
.now-playing-overlay.is-fullscreen .now-playing-modal-body {
padding: 3rem max(1.5rem, calc((100% - 980px) / 2)) 1.75rem !important;
background: linear-gradient(transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.92)) !important;
gap: .55rem !important;
}
.now-playing-overlay.is-fullscreen .now-playing-modal-body .now-playing-modal-art-wrap { max-width: 64px; }
.now-playing-overlay.is-fullscreen .now-playing-modal-body .now-playing-modal-title { font-size: 1.3rem !important; }
.now-playing-overlay.is-fullscreen .snr-np-title-row { justify-content: center; }
.now-playing-overlay.is-fullscreen .now-playing-modal-progress { width: 100%; }
@media (min-width: 700px) {
.now-playing-overlay.is-fullscreen .now-playing-modal-controls {
--np-sec: 46px; --np-tr: 56px; --np-play: 72px;
--np-sec-ic: 21px; --np-tr-ic: 24px; --np-play-ic: 24px;
gap: 16px !important;
}
.now-playing-overlay.is-fullscreen .now-playing-modal-controls-center { gap: 18px !important; }
}
.now-playing-fullscreen-corner-btn {
width: 40px !important; height: 40px !important;
border-radius: 50% !important;
background: rgba(0,0,0,.45) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.now-playing-fullscreen-corner-btn::before { width: 16px !important; height: 16px !important; }
/* Short windows: the panel was ~750px tall and fixed, so on shorter
screens the controls dropped below the fold and needed scrolling.
Visualizer and cover now scale with the window height so the whole
panel — controls included — stays in view. (Not in fullscreen.) */
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-visualizer {
height: clamp(84px, 18vh, 180px) !important;
}
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-art-wrap {
max-width: clamp(130px, 28vh, 260px) !important;
}
@media (max-height: 700px) {
.now-playing-overlay:not(.is-fullscreen) #nowPlayingModal { padding-top: 18px !important; padding-bottom: 16px !important; }
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-visualizer { height: clamp(56px, 13vh, 120px) !important; margin-bottom: .6rem !important; }
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-art-wrap { max-width: clamp(100px, 23vh, 200px) !important; margin-bottom: .5rem !important; }
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-artist-row { margin-bottom: .75rem !important; }
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-artist-avatar { width: 30px !important; height: 30px !important; }
}
@media (max-width: 380px) {
.now-playing-modal-controls { --np-sec: 32px; --np-tr: 40px; --np-play: 50px; --np-sec-ic: 15px; --np-tr-ic: 18px; gap: 4px !important; }
.now-playing-modal-controls-left, .now-playing-modal-controls-right { gap: 3px !important; }
.now-playing-modal-controls-center { gap: 5px !important; }
}
@media (max-width: 340px) {
#nowPlayingModal { padding-left: 12px !important; padding-right: 12px !important; }
.now-playing-modal-controls { --np-sec: 30px; --np-tr: 36px; --np-play: 46px; gap: 3px !important; }
}
/* ── Header: links never wrap onto a second line ───────────────────── */
.main-header-site-links { flex-wrap: nowrap !important; white-space: nowrap; }
.main-header .search-bar { min-width: 170px; }
@media (max-width: 1180px) and (min-width: 769px) {
.main-header-site-links a { padding: 6px 9px !important; font-size: 12.5px !important; }
}
/* Too tight for search + 4 links + account buttons: the page links step
out of the header here (they're all in the footer too) so search
keeps a usable width. */
@media (max-width: 1060px) and (min-width: 769px) {
.main-header-site-links { display: none !important; }
}
/* ══ PASS 5 — loading & smoothness ═════════════════════════════════════
Long home sections below the fold skip rendering (and their looping
decorations) until you scroll near them. contain-intrinsic-size keeps
the scrollbar steady by reserving their last known height. */
#tracksForYouSection,
.browse-section-redesign,
#artistCollectiblesSection,
#soundscapeSection,
.sonara-footer { content-visibility: auto; }
/* first-guess heights (desktop); after one render the browser remembers the real one */
#tracksForYouSection { contain-intrinsic-size: auto 3600px; }
.browse-section-redesign { contain-intrinsic-size: auto 2000px; }
#artistCollectiblesSection { contain-intrinsic-size: auto 680px; }
#soundscapeSection { contain-intrinsic-size: auto 550px; }
.sonara-footer { contain-intrinsic-size: auto 840px; }
/* ══ PASS 6 — page edges & layering ════════════════════════════════════
The site footer sat above the app layer (z-index 2 vs 1), so at the
bottom of the page it slid over the fixed sidebar and the player bar —
the music controls vanished and the sidebar looked sliced off. Now it
sits under them and lines up with the main column. (Desktop only: the
footer is hidden on phones.) */
@media (min-width: 769px) {
footer.sonara-footer {
z-index: 0;
margin-left: var(--sidebar-width, 220px);
}
}
/* ══ PASS 7 — legibility, panels, cards, phones ═══════════════════════ */
/* ── Readable small text (was 8–10px on cards and badges) ──────────── */
.snr-section-badge { font-size: 10px !important; }
.snr-pc-genre { font-size: 9.5px !important; padding: 2px 6px !important; color: rgba(255,255,255,.78) !important; }
.snr-pc-artist { font-size: 11px !important; color: rgba(255,255,255,.62) !important; }
.snr-pc-plays { font-size: 10.5px !important; color: rgba(255,255,255,.55) !important; }
@media (max-width: 768px) {
.snr-pc-artist { font-size: 10.5px !important; }
.snr-genre-pill { font-size: 10.5px !important; }
}
/* ── Track cards: tidy action rows ─────────────────────────────────────
At medium widths the row broke into 3 lines (♡ 👎 +Queue / Share Tip / …)
and the date split mid-word ("2026-08-" / "06"). Cards now size their
own controls from the card width (container query). */
.track-grid .track-card { container-type: inline-size; container-name: tcard; }
.track-card-actions { gap: .3rem !important; row-gap: .35rem !important; }
.track-card-more-wrap { margin-left: auto !important; }
.track-card-meta {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
@container tcard (max-width: 205px) {
.track-card-info { padding: .65rem .75rem !important; }
.track-card-actions .btn-add-queue,
.track-card-actions .btn-share,
.track-card-actions .btn-tip { padding: .24rem .42rem !important; font-size: .68rem !important; }
.track-card-actions .btn-tip .btn-gradient-text { display: none; } /* 💸 icon stays; title says "Support artist" */
.track-card-actions .btn-more { padding: .15rem .3rem !important; }
}
/* ── Player settings panel: solid like the site settings panel ─────── */
#playerSettingsPopover .player-settings-panel {
background: rgba(12, 8, 26, .97) !important;
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent) !important;
border-radius: 14px !important;
box-shadow: 0 16px 40px rgba(0,0,0,.6) !important;
}
@media (max-width: 768px) {
/* Phones: a sheet above the player instead of a box squeezed inside it */
#playerSettingsPopover:not(.hidden) {
position: fixed !important;
left: 12px !important; right: 12px !important;
bottom: calc(var(--mobile-tab-bar-height, 56px) + env(safe-area-inset-bottom, 0px) + 150px) !important;
top: auto !important;
margin: 0 !important;
z-index: 60 !important;
}
#playerSettingsPopover .player-settings-panel {
max-height: min(60vh, 460px);
overflow-y: auto;
width: 100% !important;
}
}
/* ── Notifications panel on phones: stays inside the screen ────────── */
@media (max-width: 768px) {
#snrNotifPopover {
position: fixed !important;
left: 12px !important; right: 12px !important;
top: 64px !important;
width: auto !important;
max-width: none !important;
}
}
/* ── Earn: status banner stops squeezing its text to 0px ───────────── */
.monetize-status-banner { flex-wrap: wrap; }
.monetize-status-left { flex: 1 1 220px; min-width: 0; }
@media (max-width: 480px) {
.monetize-status-banner > :not(.monetize-status-left) { flex: 1 1 100%; justify-content: center; }
}
/* ── Studio label in the player: phones put it in the card's corner ── */
@media (max-width: 768px) {
body.studio-mode .player-bar::before {
top: 8px !important; left: 14px !important; transform: none !important;
font-size: .58rem !important;
}
}
/* ── Mozai assistant button ─────────────────────────────────────────── */
/* Out of the way while a panel/modal is open (it sat above them all) */
body:has(.modal-overlay:not(.hidden)) #mozaiTrigger,
body:has(#authOverlay:not(.hidden)) #mozaiTrigger { opacity: 0; pointer-events: none; transform: scale(.8); }
#mozaiTrigger { transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
@media (max-width: 768px) {
/* Smaller on phones, hugging the edge so it covers less of the cards */
#mozaiTrigger { width: 46px !important; height: 46px !important; right: 8px !important; }
/* Community chat: tuck it half off-screen so it doesn't cover "send" */
body:has(#communitySection:not(.hidden)) #mozaiTrigger { transform: translateX(55%); opacity: .75; }
body:has(#communitySection:not(.hidden)) #mozaiTrigger:active { transform: none; opacity: 1; }
}
/* ── Smoother page switches: views fade up instead of snapping in ──── */
@keyframes snr-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.main-content > section.section:not(.hidden),
#mainDefaultContent { animation: snr-view-in .28s ease-out both; }
@media (prefers-reduced-motion: reduce) {
.main-content > section.section:not(.hidden), #mainDefaultContent { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════════
PASS 8 — TYPOGRAPHY & SECTION LOOKS
Keeps the font the user picked in Settings; improves hierarchy,
tracking, weights and colour so the page reads as one system.
══════════════════════════════════════════════════════════════════════ */
/* Display headings: tighter, crisper, balanced line breaks */
.section-title,
.snr-section-title,
.sonara-hero-title { text-wrap: balance; font-kerning: normal; }
.section-title {
font-size: clamp(1.55rem, 1.05rem + 1.1vw, 2rem) !important;
font-weight: 700 !important;
letter-spacing: -0.032em !important;
line-height: 1.12 !important;
background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--purple-light) 55%, #fff));
-webkit-background-clip: text; background-clip: text;
color: transparent !important;
position: relative;
padding-bottom: .55rem;
margin-bottom: 1rem !important;
}
/* signature: short gradient bar under every section title */
.section-title::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 34px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--purple-light), var(--blue));
box-shadow: 0 0 10px color-mix(in srgb, var(--purple) 60%, transparent);
}
/* centred titles keep the bar centred */
[style*="text-align:center"] > .section-title::after,
.text-center .section-title::after { left: 50%; transform: translateX(-50%); }
.snr-section-title {
font-size: 1.22rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
.sonara-hero-title {
letter-spacing: -0.042em !important;
font-weight: 800 !important;
}
.sonara-hero-subtitle {
font-size: 1rem !important;
color: color-mix(in srgb, var(--text-muted) 85%, #fff) !important;
letter-spacing: .01em !important;
}
/* Small labels ("eyebrows"): one consistent style */
.landing-side-title,
.sonara-footer h4,
.soundscape-sub {
font-size: 11px !important;
font-weight: 650 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
}
.landing-side-title { color: color-mix(in srgb, var(--purple-light) 80%, #fff) !important; }
/* Card titles: 800 weight at 12–13px looked smudgy — 700 and a hair tighter */
.snr-pc-title, .snr-lc-title, .track-card-title {
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.track-card-title { font-size: .95rem !important; }
/* Body copy: calmer line length / height */
.section-subtitle, .sonara-hero-subtitle, .monetize-status-desc { line-height: 1.6; text-wrap: pretty; }
/* Section rhythm: consistent breathing room between home sections */
#mainDefaultContent > .landing-two-col ~ section,
#mainDefaultContent section.section { scroll-margin-top: 90px; }
/* Nav: drawn chevrons in glass circles (were "‹‹" / "››" text) */
#acNextBtn::before { transform: scaleX(-1); }
/* ══════════════════════════════════════════════════════════════════════
PASS 8c — EXPLORE THE SOUNDSCAPE: a living genre map
══════════════════════════════════════════════════════════════════════ */
.soundscape-header { display: flex; flex-direction: column; gap: .15rem; }
.soundscape-sub {
display: inline-flex; align-items: center; gap: 8px;
color: color-mix(in srgb, var(--snr-cyan-hi) 80%, #fff) !important;
margin-top: -.35rem !important;
}
.soundscape-sub::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--snr-cyan); box-shadow: 0 0 0 0 color-mix(in srgb, var(--snr-cyan) 60%, transparent);
animation: sc-live 2s ease-out infinite;
}
@keyframes sc-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--snr-cyan) 55%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--snr-cyan) 0%, transparent); } }
.soundscape-container {
border-radius: 24px !important;
border-color: transparent !important;
background:
radial-gradient(45% 55% at 28% 38%, color-mix(in srgb, var(--purple) 20%, transparent), transparent 70%),
radial-gradient(40% 50% at 74% 62%, rgba(14,165,233,.13), transparent 70%),
radial-gradient(30% 35% at 88% 18%, rgba(236,72,153,.10), transparent 70%),
linear-gradient(165deg, #07061a 0%, #0c0920 55%, #050412 100%) !important;
box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--purple) 35%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--purple-mid) 22%, transparent), inset 0 0 80px rgba(0,0,0,.45) !important;
isolation: isolate;
}
/* perspective "dance floor" grid fading into space */
.soundscape-container::before {
content: ""; position: absolute; left: -10%; right: -10%; bottom: -2%; height: 48%;
background:
repeating-linear-gradient(90deg, color-mix(in srgb, var(--purple-mid) 20%, transparent) 0 1px, transparent 1px 56px),
repeating-linear-gradient(0deg, color-mix(in srgb, var(--snr-cyan) 14%, transparent) 0 1px, transparent 1px 30px);
transform: perspective(380px) rotateX(62deg);
transform-origin: 50% 100%;
-webkit-mask: linear-gradient(to top, #000 0%, transparent 85%);
mask: linear-gradient(to top, #000 0%, transparent 85%);
pointer-events: none; z-index: 0;
}
/* vignette for depth */
.soundscape-container::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
/* constellation lines: softly flowing energy */
.soundscape-lines path {
stroke-dasharray: 3 7;
animation: sc-flow 2.8s linear infinite;
}
@keyframes sc-flow { to { stroke-dashoffset: -20; } }
/* Labels: glass chips that stay readable over any glow */
.sc-label {
margin-top: 9px !important;
padding: 4px 9px 4px 10px;
border-radius: 999px;
font-family: inherit !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-shadow: none !important;
background: rgba(8, 6, 22, .62);
border: 1px solid rgba(var(--sc-rgb, 168,85,247), .38);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 12px rgba(var(--sc-rgb, 168,85,247), .18);
display: inline-flex; align-items: center; gap: 6px;
}
.sc-count {
display: inline-grid; place-items: center;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 999px;
font-size: 9px; letter-spacing: 0;
color: #0b0716;
background: rgba(var(--sc-rgb, 168,85,247), .95);
}
.sc-node { z-index: 1; }
.sc-node.sc-hot { z-index: 5; }
.sc-node.sc-hot .sc-label { border-color: rgba(var(--sc-rgb), .8); box-shadow: 0 0 18px rgba(var(--sc-rgb), .45); }
/* hover: a ripple ring blooms from the crystal */
.sc-crystal::after {
content: ""; position: absolute; inset: -8px; border-radius: 50%;
border: 1px solid rgba(var(--sc-rgb, 168,85,247), .0);
transform: scale(.7); opacity: 0; pointer-events: none;
}
.sc-node.sc-hot .sc-crystal::after { animation: sc-ripple 1.2s ease-out infinite; }
@keyframes sc-ripple {
0% { transform: scale(.7); opacity: .9; border-color: rgba(var(--sc-rgb), .8); }
100% { transform: scale(1.7); opacity: 0; border-color: rgba(var(--sc-rgb), 0); }
}
/* HUD corners */
.sc-hud { position: absolute; inset: 14px 16px; pointer-events: none; z-index: 5; }
.sc-hud-title, .sc-hud-hint {
position: absolute; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.sc-hud-title { top: 0; left: 0; color: color-mix(in srgb, var(--snr-tint) 55%, transparent); }
.sc-hud-title::before { content: "◇ "; color: var(--purple-mid); }
.sc-hud-hint { bottom: 0; right: 0; color: rgba(103,232,249,.55); }
/* Tooltip: matches the new glass style */
.soundscape-tooltip {
border-radius: 16px !important;
border-color: color-mix(in srgb, var(--purple-mid) 50%, transparent) !important;
box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 26px color-mix(in srgb, var(--purple) 30%, transparent) !important;
}
.soundscape-tooltip-genre { font-family: inherit !important; letter-spacing: .16em !important; }
@media (max-width: 700px) {
.sc-label { font-size: .5rem !important; padding: 3px 7px; gap: 4px; }
.sc-count { min-width: 13px; height: 13px; font-size: 8px; }
.sc-hud-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.soundscape-lines path, .soundscape-sub::before, .sc-node.sc-hot .sc-crystal::after { animation: none !important; }
}
/* bigger crystals (and their labels) sit above smaller ones */
.sc-node.sc-major { z-index: 3; }
.sc-node.sc-mid { z-index: 2; }
.sc-node.sc-hot { z-index: 6 !important; }
/* Page titles (h1) share the section-title look, one step larger */
.search-section-title, .browse-section-title, .earn-section-title {
font-weight: 700 !important;
letter-spacing: -0.032em !important;
line-height: 1.12 !important;
background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--purple-light) 55%, #fff));
-webkit-background-clip: text; background-clip: text;
color: transparent !important;
position: relative;
padding-bottom: .55rem;
margin-bottom: .8rem !important;
text-wrap: balance;
}
.search-section-title::after, .browse-section-title::after, .earn-section-title::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 34px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--purple-light), var(--blue));
box-shadow: 0 0 10px color-mix(in srgb, var(--purple) 60%, transparent);
}
h1.section-title, .search-section-title, .browse-section-title, .earn-section-title {
font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.3rem) !important;
}
/* ── Layout looks: mood chips ──────────────────────────────────────── */
/* Mood / filter chips: active chip glows in the brand gradient */
.mood-pill { transition: background .2s, border-color .2s, color .2s, transform .2s !important; }
.mood-pill:hover:not(.active) { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.2) !important; }
.mood-pill.active {
background: linear-gradient(135deg, var(--purple), var(--blue)) !important;
border-color: transparent !important;
box-shadow: 0 6px 18px -6px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.mood-pill:active { transform: scale(.96); }
/* ══ PASS 9 — queue panel, Now Playing glow, Earn command chips ═══════ */
/* ── Queue: solid glass drawer, rounded rows, "now playing" row ─────── */
.queue-panel {
background: rgba(12, 8, 26, .95) !important;
-webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
border-left: 1px solid color-mix(in srgb, var(--purple-mid) 22%, transparent) !important;
box-shadow: -24px 0 60px rgba(0,0,0,.55) !important;
}
.queue-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 2px; }
.queue-item {
border-radius: 14px !important;
padding: 8px 10px !important;
background: rgba(255,255,255,.035) !important;
border: 1px solid rgba(255,255,255,.06) !important;
transition: background .2s, border-color .2s, transform .2s;
}
.queue-item:hover { background: rgba(255,255,255,.07) !important; border-color: color-mix(in srgb, var(--purple-mid) 25%, transparent) !important; }
.queue-item img { border-radius: 10px !important; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.queue-item-title { letter-spacing: -0.01em; }
.queue-item-meta { font-variant-numeric: tabular-nums; }
/* the row that's playing (its button offers "Pause") */
.queue-item:has(.queue-item-play[aria-label="Pause"]) {
background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 22%, transparent), color-mix(in srgb, var(--blue) 12%, transparent)) !important;
border-color: color-mix(in srgb, var(--purple-light) 45%, transparent) !important;
box-shadow: 0 0 22px -6px var(--purple-glow);
}
.queue-item:has(.queue-item-play[aria-label="Pause"]) .queue-item-title { color: #fff; }
.queue-item:has(.queue-item-play[aria-label="Pause"]) .queue-item-meta::before {
content: "Now playing · "; color: var(--purple-light); font-weight: 600;
}
/* play / pause / remove: drawn icons (⏸ ▶ were emoji on iPhones) */
.queue-item-play, .queue-item-remove { font-size: 0 !important; display: grid !important; place-items: center; }
.queue-item-play::before, .queue-item-remove::before {
content: ""; width: 13px; height: 13px; background: currentColor;
-webkit-mask: var(--qi) center / contain no-repeat; mask: var(--qi) center / contain no-repeat;
}
.queue-item-play { --qi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.8v14.4a1.2 1.2 0 0 0 1.8 1l11.4-7.2a1.2 1.2 0 0 0 0-2L8.8 3.8A1.2 1.2 0 0 0 7 4.8z'/%3E%3C/svg%3E"); }
.queue-item-play[aria-label="Pause"] { --qi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4' width='4.6' height='16' rx='1.6'/%3E%3Crect x='13.9' y='4' width='4.6' height='16' rx='1.6'/%3E%3C/svg%3E"); color: #fff !important; background: var(--purple) !important; }
.queue-item-remove { --qi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.queue-item-remove::before { width: 11px; height: 11px; }
.queue-item-remove:hover { background: rgba(244,63,94,.85) !important; }
/* Mozai stays out of the way while the queue is open */
body:has(#queuePanel:not(.hidden)) #mozaiTrigger { opacity: 0; pointer-events: none; transform: scale(.8); }
/* ── Now Playing panel: soft glow from the current cover ────────────── */
#nowPlayingModal { isolation: isolate; }
#nowPlayingModal::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: inherit;
background: var(--snr-np-art, none) center / cover no-repeat;
filter: blur(60px) saturate(1.5);
opacity: .28;
}
#nowPlayingModal:not([style*="--snr-np-art"])::before { opacity: 0; }
/* ── Earn: the "/command" buttons read as intentional command chips ── */
.monetize-action-btn {
font-family: 'JetBrains Mono', 'Share Tech Mono', ui-monospace, monospace !important;
font-size: 12px !important;
letter-spacing: .01em;
border-radius: 10px !important;
background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 24%, transparent), color-mix(in srgb, var(--blue) 14%, transparent)) !important;
border: 1px solid color-mix(in srgb, var(--purple-light) 38%, transparent) !important;
color: var(--snr-tint) !important;
transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.monetize-action-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--purple-light) 70%, transparent) !important;
box-shadow: 0 6px 18px -6px var(--purple-glow);
}
/* ── Phones: the Now Playing visualizer box was left empty (the canvas
visualizer is skipped on phones to save battery). Fill it with the
blurred cover and a CSS-only equalizer: fixed bar stripes masked by a
wave that slides sideways, so bar heights rise and fall. It pauses
when playback is paused. Lyrics still overlay it as before. ──────── */
@media (max-width: 768px) {
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-visualizer {
position: relative; overflow: hidden; isolation: isolate;
background: #0a0716 !important;
}
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-visualizer::before {
content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
background: var(--snr-np-art, none) center / cover no-repeat;
filter: blur(26px) saturate(1.5);
opacity: .5;
}
.now-playing-overlay:not(.is-fullscreen) .now-playing-modal-visualizer::after {
content: ""; position: absolute; left: 8%; right: 8%; bottom: 14%; height: 62%;
pointer-events: none;
background: linear-gradient(to top, var(--blue), var(--purple) 55%, var(--purple-light));
-webkit-mask:
repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 V60 C25 20 50 20 75 55 S125 95 150 45 S200 5 225 50 S275 90 300 35 S350 15 375 60 S395 80 400 60 V100 Z'/%3E%3C/svg%3E") 0 100% / 200% 100% repeat-x;
-webkit-mask-composite: source-in;
mask:
repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 V60 C25 20 50 20 75 55 S125 95 150 45 S200 5 225 50 S275 90 300 35 S350 15 375 60 S395 80 400 60 V100 Z'/%3E%3C/svg%3E") 0 100% / 200% 100% repeat-x;
mask-composite: intersect;
filter: drop-shadow(0 0 8px var(--purple-glow));
animation: snr-eq-wave 3.2s linear infinite;
}
body:has(#btnPlay[data-snr-state="play"]) .now-playing-modal-visualizer::after { animation-play-state: paused; opacity: .55; }
}
@keyframes snr-eq-wave {
from { -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; }
to { -webkit-mask-position: 0 0, -200% 100%; mask-position: 0 0, -200% 100%; }
}
@media (prefers-reduced-motion: reduce) {
.now-playing-modal-visualizer::after { animation: none !important; }
}
/* ── Community: a real page title, framed panels, friendlier empty chat ── */
#communitySection::before {
content: "Community";
display: block;
font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.3rem);
font-weight: 700; letter-spacing: -0.032em; line-height: 1.12;
color: #fff;
padding-bottom: .6rem; margin: 0 0 1.1rem;
background: linear-gradient(90deg, var(--purple-light), var(--blue)) 0 100% / 34px 3px no-repeat;
}
#communitySection .community-layout { gap: 16px !important; }
#communitySection .community-chat-panel,
#communitySection .community-feed-panel {
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 20px;
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
box-shadow: 0 20px 50px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}
#communitySection .community-panel-title { color: color-mix(in srgb, var(--snr-tint) 80%, transparent) !important; letter-spacing: .14em !important; font-size: 11.5px !important; }
#communitySection .community-chat-signin {
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: color-mix(in srgb, var(--snr-tint) 55%, transparent) !important;
font-size: 13.5px !important;
}
#communitySection .community-chat-signin::before {
content: ""; width: 54px; height: 54px; border-radius: 18px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9d5ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") center / 24px no-repeat,
linear-gradient(135deg, color-mix(in srgb, var(--purple) 40%, transparent), color-mix(in srgb, var(--blue) 25%, transparent));
box-shadow: 0 10px 26px -10px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.15);
}
#communitySection .community-chat-input-wrap { border-radius: 14px !important; }
/* Desktop: title + panels share the fixed-height page */
@media (min-width: 861px) {
#communitySection:not(.hidden) {
display: flex; flex-direction: column; padding-top: 1.5rem !important;
/* end above the fixed player bar — the chat box used to sit behind it */
height: calc(100vh - 110px - var(--player-height, 90px) - 24px) !important;
min-height: 520px;
}
#communitySection .community-layout { flex: 1; min-height: 0; height: auto !important; }
}
/* Stacked (≤860px): each panel sizes to itself — the chat was being
stretched to the feed's ~1,800px height */
@media (max-width: 860px) {
#communitySection .community-layout { grid-template-rows: auto auto !important; }
#communitySection .community-chat-messages { height: clamp(220px, 38vh, 420px); flex: none !important; }
}
/* ══ PASS 10 — DARK MODE: logo, player, play button ════════════════════
Dark mode (body.snr-dark) had its own heavy overrides: a chrome-rainbow
tile behind the logo, a plain violet disc that dropped the S from the
play button, a muddy inner box around the song info, and the old
progress line. These rules re-apply the new design in true-black. */
/* Play button ring (both modes): a gradient ring that slowly turns while
music plays */
.player-btn-play::before {
content: ""; position: absolute; inset: -3px; border-radius: 50%;
background: conic-gradient(from var(--pb-spin, 0deg), var(--purple-light), var(--blue), var(--snr-cyan), var(--purple), var(--purple-light));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
opacity: .55; pointer-events: none; z-index: 0;
transition: opacity .3s;
}
@property --pb-spin { syntax: ""; inherits: false; initial-value: 0deg; }
@keyframes pb-spin { to { --pb-spin: 360deg; } }
.player-btn-play[data-snr-state="pause"]::before { opacity: 1; animation: pb-spin 6s linear infinite; }
.player-btn-play:hover::before { opacity: 1; }
/* Logo tile in the sidebar: black glass + violet→cyan ring (was chrome rainbow) */
html body.snr-dark .logo-icon:has(img[src*="logo-s.svg"]) {
background: radial-gradient(circle at 30% 22%, var(--snr-deep) 0%, var(--snr-deeper) 55%, #040306 100%) !important;
border-radius: 14px !important;
border: none !important;
box-shadow: 0 8px 22px rgba(0,0,0,.8), 0 0 22px color-mix(in srgb, var(--purple-mid) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important;
position: relative;
}
html body.snr-dark .logo-icon:has(img[src*="logo-s.svg"])::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: linear-gradient(140deg, color-mix(in srgb, var(--snr-tint) 85%, transparent), var(--purple-mid) 35%, var(--snr-cyan) 75%, color-mix(in srgb, var(--snr-cyan) 40%, transparent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
html body.snr-dark .mobile-header-brand-logo[src*="logo-s.svg"] {
background: radial-gradient(circle at 30% 22%, var(--snr-deep) 0%, var(--snr-deeper) 60%, #040306 100%) !important;
border: 1px solid color-mix(in srgb, var(--purple-mid) 45%, transparent) !important;
box-shadow: 0 0 16px color-mix(in srgb, var(--purple-mid) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html body.snr-dark .logo-text {
background: linear-gradient(100deg, #fff 0%, var(--snr-tint) 60%, color-mix(in srgb, var(--snr-cyan) 45%, #fff) 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important; border: none !important;
}
/* Player bar: true-black glass with a gentle top light */
html body.snr-dark .player-bar.glass {
background: linear-gradient(180deg, rgba(16,11,28,.94) 0%, rgba(6,4,12,.97) 100%) !important;
border-top: 1px solid color-mix(in srgb, var(--purple-mid) 18%, transparent) !important;
}
html body.snr-dark .player-bar.glass::after { opacity: .14; }
@media (max-width: 768px) { html body.snr-dark .player-bar.glass::after { opacity: .16; } }
/* Song info: a quiet glass chip instead of a muddy tinted box */
html body.snr-dark .player-now-info {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 14px !important;
}
html body.snr-dark .player-now-info:hover { background: rgba(255,255,255,.055) !important; border-color: color-mix(in srgb, var(--purple-mid) 30%, transparent) !important; }
/* Play button: S on a black disc (was a plain violet disc without the S) */
html body.snr-dark .player-bar .player-btn-play,
html body.snr-dark .now-playing-modal-controls .player-btn-play {
background:
var(--player-logo-url, url('logo-s.svg')) 50% 50% / 62% no-repeat,
radial-gradient(circle at 32% 26%, var(--snr-deep) 0%, var(--snr-deeper) 60%, #050309 100%) !important;
border: none !important;
box-shadow: 0 8px 22px rgba(0,0,0,.75), 0 0 24px color-mix(in srgb, var(--purple-mid) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
html body.snr-dark .player-bar .player-btn-play #btnPlayIcon { font-size: 0 !important; color: transparent !important; }
/* Progress line: same design as light mode (thin line, 16px hit area) */
html body.snr-dark .player-bar .seek-slider {
height: 16px !important; margin: -5px 0 !important;
border-radius: 0 !important; box-shadow: none !important;
background:
linear-gradient(90deg, var(--purple), var(--purple-mid) 55%, var(--snr-cyan)) 0 50% / var(--seek-progress, 0%) var(--track-h, 4px) no-repeat,
linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) 0 50% / 100% var(--track-h, 4px) no-repeat !important;
}
html body.snr-dark .player-bar .seek-slider:hover { --track-h: 6px; }
html body.snr-dark .player-bar .seek-slider::-webkit-slider-thumb {
width: 13px !important; height: 13px !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-mid) 70%, transparent), 0 0 14px color-mix(in srgb, var(--snr-cyan) 45%, transparent) !important;
transform: scale(.8);
}
html body.snr-dark .player-bar .seek-slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .player-btn-play[data-snr-state="pause"]::before { animation: none; } }
/* Dark: play button back to a confident size on desktop (was forced to 44px) */
@media (min-width: 769px) {
html body.snr-dark .player-bar .player-btn-play {
width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important;
}
}
/* Dark: search field was a box inside a box */
html body.snr-dark .main-header .search-bar input,
html body.snr-dark #globalSearch {
background: transparent !important; border: none !important; box-shadow: none !important;
}
html body.snr-dark .main-header .search-bar {
background: rgba(255,255,255,.045) !important;
border: 1px solid rgba(255,255,255,.09) !important;
}
html body.snr-dark .main-header .search-bar:focus-within {
border-color: color-mix(in srgb, var(--purple-mid) 50%, transparent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-mid) 15%, transparent) !important;
}
/* ══ PASS 11b — INSIDE THE SOUNDSCAPE CRYSTALS ════════════════════════ */
/* Cut facets: light and shadow planes clipped to each crystal's shape */
.sc-body::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: conic-gradient(from 18deg at 46% 42%,
rgba(255,255,255,.30), rgba(255,255,255,0) 11%,
rgba(0,0,0,.28) 23%, rgba(0,0,0,0) 34%,
rgba(255,255,255,.18) 47%, rgba(255,255,255,0) 58%,
rgba(0,0,0,.25) 72%, rgba(0,0,0,0) 84%,
rgba(255,255,255,.30));
mix-blend-mode: overlay;
}
/* Light sweep across the big crystals (and any you hover) */
.sc-body::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
background-size: 260% 100%; background-position: 130% 0;
mix-blend-mode: soft-light; opacity: 0;
}
.sc-node.sc-major .sc-body::after { opacity: .9; animation: sc-sheen 6s ease-in-out infinite; }
.sc-node.sc-hot .sc-body::after { opacity: 1; animation: sc-sheen 1.4s ease-in-out infinite; }
@keyframes sc-sheen { 0%, 40% { background-position: 130% 0; } 75%, 100% { background-position: -40% 0; } }
/* A soft reflection pool under each crystal */
.sc-crystal::before {
content: ""; position: absolute; left: 15%; right: 15%; bottom: -14%; height: 18%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--sc-rgb, 168,85,247), .45), transparent);
filter: blur(4px); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.sc-node.sc-major .sc-body::after, .sc-node.sc-hot .sc-body::after { animation: none; }
}
/* Phones: the map is narrow, so crystals scale down and labels stay clear */
@media (max-width: 700px) {
.soundscape-container .sc-crystal { scale: .72; }
.soundscape-container .sc-label { margin-top: 0 !important; }
.sc-hud-title { display: none; }
}
@media (max-width: 400px) {
.soundscape-container .sc-crystal { scale: .64; }
}
/* ══ PASS 12 — ONE LINE SYSTEM ════════════════════════════════════════
The page used ~40 different border styles (white 7–20%, purple 12–50%,
cyan 15–35%) and corner radii of 10/12/14/16px side by side. This sets
one family for every theme except Neo Frame, which draws its own frames:
--ln-soft inner dividers
--ln panel & card edges
--ln-hi the light catching the top edge of glass
--ln-accent hover / selected
Window edges (sidebar, header) become hairlines that fade at the ends. */
:root {
/* theme-following helpers: every theme/accent recolours the new design */
--purple-mid: color-mix(in srgb, var(--purple) 55%, var(--purple-light));
--snr-cyan: #22d3ee;
--snr-cyan-hi: color-mix(in srgb, var(--snr-cyan) 70%, #fff);
--snr-pink: #f0abfc;
--snr-tint: color-mix(in srgb, var(--purple-light) 40%, #fff); /* pale accent for text on dark */
--snr-deep: color-mix(in srgb, var(--purple) 22%, #0c0a14); /* accent-tinted dark fills */
--snr-deep-hi: color-mix(in srgb, var(--purple) 36%, #0c0a14);
--snr-deeper: color-mix(in srgb, var(--purple) 7%, #07060c);
--ln-soft: rgba(255,255,255,.055);
--ln: rgba(255,255,255,.085);
--ln-hi: rgba(255,255,255,.07);
--ln-accent: color-mix(in srgb, var(--purple-light) 45%, transparent);
--r-panel: 18px;
--r-card: 14px;
}
html:not([data-theme="neoFrame"]) .sidebar {
border-right: 1px solid transparent !important;
border-image: linear-gradient(to bottom, color-mix(in srgb, var(--purple-mid) 5%, transparent), color-mix(in srgb, var(--purple-mid) 32%, transparent) 25%, color-mix(in srgb, var(--blue) 22%, transparent) 70%, color-mix(in srgb, var(--snr-cyan) 6%, transparent)) 1 !important;
}
html:not([data-theme="neoFrame"]) .main-header {
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, color-mix(in srgb, var(--purple-mid) 25%, transparent), rgba(255,255,255,.08) 35%, rgba(255,255,255,.08) 65%, color-mix(in srgb, var(--snr-cyan) 18%, transparent)) 1 !important;
}
/* Panels & cards: one neutral hairline + a top-edge highlight; accent on hover */
html:not([data-theme="neoFrame"]) :is(.spotlight-card, .snr-landscape-card, .track-card, .soundscape-container, .monetize-status-banner) {
border-color: var(--ln) !important;
}
html:not([data-theme="neoFrame"]) :is(.snr-landscape-card, .track-card) {
box-shadow: inset 0 1px 0 var(--ln-hi), 0 14px 34px -22px rgba(0,0,0,.75) !important;
transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
html:not([data-theme="neoFrame"]) :is(.snr-landscape-card, .track-card):hover {
border-color: var(--ln-accent) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -20px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb, var(--purple) 18%, transparent) !important;
}
/* One corner family */
:is(.spotlight-card) { border-radius: var(--r-panel) !important; }
:is(.snr-landscape-card, .track-card) { border-radius: var(--r-card) !important; }
/* Spotlight keeps its signature cyan, but as a soft glow instead of a hard edge */
html:not([data-theme="neoFrame"]) .spotlight-card {
box-shadow: inset 0 1px 0 var(--ln-hi), 0 0 0 1px color-mix(in srgb, var(--snr-cyan) 10%, transparent), 0 18px 50px -24px color-mix(in srgb, var(--snr-cyan) 25%, transparent) !important;
}
/* Sidebar dividers & the velocity strip: fading hairlines */
.sidebar :is(hr, .nav-divider, .nav-section-divider) {
height: 1px !important; border: 0 !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 20%, rgba(255,255,255,.1) 80%, transparent) !important;
}
/* Track card artist avatar: 2px purple ring → slim 1px ring */
.track-card-artist-avatar { border-width: 1px !important; border-color: var(--ln-accent) !important; }
/* Dark mode: same system, tuned for true black */
/* themes swap Sonara's cyan second colour for their own */
html[data-theme]:not([data-theme=""]) {
--snr-cyan: var(--blue);
--snr-pink: color-mix(in srgb, var(--purple-light) 55%, #fff);
}
html body.snr-dark { --ln: rgba(255,255,255,.075); --ln-soft: rgba(255,255,255,.05); --ln-hi: rgba(255,255,255,.06); }
/* ══ PASS 13 — MUSIC-APP TOUCHES ══════════════════════════════════════ */
/* 1. Now-playing card: accent edge + equalizer badge on the cover */
.snr-eq {
position: absolute; left: 8px; bottom: 8px; z-index: 6;
display: inline-flex; align-items: flex-end; gap: 2px;
height: 22px; padding: 5px 6px;
border-radius: 8px;
background: rgba(8,5,18,.72);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid color-mix(in srgb, var(--purple-light) 45%, transparent);
box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 12px var(--purple-glow);
pointer-events: none;
}
.snr-eq i {
display: block; width: 3px; height: 100%; border-radius: 2px;
background: linear-gradient(to top, var(--purple), var(--purple-light), var(--snr-cyan-hi));
transform-origin: bottom;
animation: snr-eq-bar .9s ease-in-out infinite alternate;
}
.snr-eq i:nth-child(1) { animation-duration: .82s; }
.snr-eq i:nth-child(2) { animation-duration: .62s; animation-delay: -.3s; }
.snr-eq i:nth-child(3) { animation-duration: .95s; animation-delay: -.5s; }
.snr-eq i:nth-child(4) { animation-duration: .7s; animation-delay: -.15s; }
@keyframes snr-eq-bar { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
body:not(.snr-playing) .snr-eq i { animation-play-state: paused; transform: scaleY(.35); }
.track-card.snr-now-playing,
.snr-landscape-card.snr-now-playing {
border-color: color-mix(in srgb, var(--purple-light) 60%, transparent) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 35%, transparent), 0 18px 40px -18px var(--purple-glow) !important;
}
.snr-portrait-card.snr-now-playing .snr-pc-img {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-light) 70%, transparent), 0 16px 34px -14px var(--purple-glow);
}
.track-card.snr-now-playing .track-card-title,
.snr-now-playing :is(.snr-pc-title, .snr-lc-title) { color: color-mix(in srgb, var(--purple-light) 80%, #fff) !important; }
/* 2. Spinning record: the round cover in the player turns while playing,
with grooves and a centre label; pausing stops it where it is. */
.player-now-info__art-wrap {
animation: snr-vinyl 14s linear infinite;
animation-play-state: paused;
box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.5) !important;
}
body.snr-playing .player-now-info__art-wrap { animation-play-state: running; }
@keyframes snr-vinyl { to { transform: rotate(360deg); } }
.player-now-info__art-wrap::after {
content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
background:
radial-gradient(circle, #000 0 7%, rgba(0,0,0,.55) 7% 8.4%, rgba(255,255,255,.14) 8.4% 9%, transparent 9.5%), /* the spindle hole: black, with a faint worn edge */
repeating-radial-gradient(circle, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px),
conic-gradient(from 30deg, rgba(255,255,255,.18), transparent 18%, transparent 50%, rgba(255,255,255,.12) 68%, transparent 85%);
mix-blend-mode: normal;
}
/* 3. Play button breathes with the bass (--beat set from the analyser) */
.player-btn-play::after {
content: ""; position: absolute; inset: -10px; border-radius: 50%; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--purple) 70%, transparent), transparent 75%);
opacity: calc(var(--beat, 0) * .9);
transform: scale(calc(.85 + var(--beat, 0) * .35));
transition: opacity .08s linear, transform .08s linear;
}
.player-btn-play::before { scale: calc(1 + var(--beat, 0) * .06); }
@media (prefers-reduced-motion: reduce) {
.snr-eq i, .player-now-info__art-wrap { animation: none !important; }
.player-btn-play::after { display: none; }
}
/* portrait covers carry the rank (top-left) and genre (bottom) — badge goes top-right */
.snr-pc-img .snr-eq { left: auto; right: 8px; top: 8px; bottom: auto; }
/* ══════════════════════════════════════════════════════════════════════
PASS 14 — DISCOVER: Ear Candy · Your Mixes · Artists on the Rise
(markup built by discover.js from the real catalog)
══════════════════════════════════════════════════════════════════════ */
/* ── Today's Ear Candy ─────────────────────────────────────────────── */
.snr-earcandy {
position: relative; isolation: isolate; overflow: hidden;
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 26px;
margin: 0 0 2.2rem; padding: 22px 26px 22px 22px;
border-radius: 22px;
border: 1px solid var(--ln, rgba(255,255,255,.08));
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -36px hsl(var(--ec-hue) 80% 50% / .55);
}
.landing-main-col { container-type: inline-size; container-name: maincol; }
.snr-ec-bg { position: absolute; inset: -40px; z-index: -1; pointer-events: none; }
.snr-ec-bg::before {
content: ""; position: absolute; inset: 0;
background: var(--ec-art, none) center / cover no-repeat, hsl(var(--ec-hue) 60% 22%);
filter: blur(42px) saturate(1.6); opacity: .55;
animation: ec-drift 18s ease-in-out infinite alternate;
}
.snr-ec-bg::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(100deg, rgba(8,5,18,.92) 30%, rgba(8,5,18,.55) 75%, rgba(8,5,18,.35)),
radial-gradient(60% 90% at 85% 30%, hsl(var(--ec-hue) 90% 60% / .25), transparent 70%);
}
@keyframes ec-drift { from { transform: scale(1.05) translate(-2%, -1%); } to { transform: scale(1.15) translate(2%, 2%); } }
/* sleeve + record */
.snr-ec-media { position: relative; width: 196px; height: 156px; }
.snr-ec-sleeve {
position: absolute; left: 0; top: 0; width: 156px; height: 156px; z-index: 2;
border-radius: 12px; overflow: hidden;
background: linear-gradient(135deg, hsl(var(--ec-hue) 70% 40%), hsl(calc(var(--ec-hue) + 60) 70% 25%));
box-shadow: 0 18px 36px -12px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12);
}
.snr-ec-sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-ec-sleeve::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.22), transparent 35%); }
.snr-ec-mono { display: grid; place-items: center; height: 100%; font-size: 64px; font-weight: 800; color: rgba(255,255,255,.85); }
.snr-ec-vinyl {
position: absolute; left: 8px; top: 6px; width: 144px; height: 144px; z-index: 1;
border-radius: 50%;
background:
radial-gradient(circle, transparent 0 3.5%, #0c0a12 3.5% 4.5%, transparent 4.5%),
repeating-radial-gradient(circle, #121018 0 1.5px, #1b1824 1.5px 3px),
#111;
box-shadow: 0 10px 28px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
translate: 34px 0;
transition: translate .9s cubic-bezier(.2,.8,.2,1), rotate .9s cubic-bezier(.2,.8,.2,1);
}
.snr-ec-vinyl::before { /* light sheen on the grooves */
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 20deg, rgba(255,255,255,.14), transparent 15%, transparent 45%, rgba(255,255,255,.10) 60%, transparent 75%);
}
.snr-ec-label {
position: absolute; inset: 32%; border-radius: 50%;
background: var(--ec-art, none) center / cover, hsl(var(--ec-hue) 70% 45%);
box-shadow: 0 0 0 2px rgba(0,0,0,.6);
}
.snr-ec-label::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #0c0a12; }
.snr-earcandy:hover .snr-ec-vinyl { translate: 48px 0; rotate: 40deg; }
.snr-earcandy.is-playing .snr-ec-vinyl { translate: 52px 0; animation: ec-spin 3.2s linear infinite; }
@keyframes ec-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
/* info */
.snr-ec-info { min-width: 0; }
.snr-ec-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: hsl(var(--ec-hue) 90% 80%);
}
.snr-ec-dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--ec-hue) 90% 65%); box-shadow: 0 0 0 0 hsl(var(--ec-hue) 90% 65% / .6); animation: sc-live 2s ease-out infinite; }
.snr-ec-title {
margin: .45rem 0 .15rem; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.08;
color: #fff; text-wrap: balance;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.snr-ec-artist {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; font-size: .98rem; font-weight: 600; color: color-mix(in srgb, var(--snr-tint) 85%, transparent);
}
.snr-ec-artist:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.snr-ec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .7rem; }
.snr-ec-tags span {
font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px;
color: hsl(var(--ec-hue) 90% 85%);
background: hsl(var(--ec-hue) 70% 50% / .14); border: 1px solid hsl(var(--ec-hue) 80% 65% / .3);
}
.snr-ec-actions { display: flex; align-items: center; gap: 14px; margin-top: 1rem; }
.snr-ec-play {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px 10px 16px; border-radius: 999px; border: 0; cursor: pointer;
font: inherit; font-size: .92rem; font-weight: 700; color: #fff;
background: linear-gradient(135deg, hsl(var(--ec-hue) 85% 55%), var(--purple));
box-shadow: 0 10px 26px -10px hsl(var(--ec-hue) 85% 55% / .8), inset 0 1px 0 rgba(255,255,255,.25);
transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.snr-ec-play svg { width: 16px; height: 16px; }
.snr-ec-play:hover { transform: translateY(-2px) scale(1.03); }
.snr-earcandy.is-playing .snr-ec-play span { font-size: 0; }
.snr-earcandy.is-playing .snr-ec-play span::before { content: "Pause"; font-size: .92rem; }
.snr-earcandy.is-playing .snr-ec-play svg { display: none; }
.snr-earcandy.is-playing .snr-ec-play::before {
content: ""; width: 14px; height: 14px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4' width='4.6' height='16' rx='1.6'/%3E%3Crect x='13.9' y='4' width='4.6' height='16' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4' width='4.6' height='16' rx='1.6'/%3E%3Crect x='13.9' y='4' width='4.6' height='16' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.snr-ec-meta { white-space: nowrap; font-size: 12.5px; color: color-mix(in srgb, var(--snr-tint) 60%, transparent); font-variant-numeric: tabular-nums; }
@container maincol (max-width: 560px) {
.snr-earcandy { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
.snr-ec-media { width: 170px; height: 128px; }
.snr-ec-sleeve { width: 128px; height: 128px; }
.snr-ec-vinyl { width: 118px; height: 118px; left: 6px; top: 5px; translate: 30px 0; }
.snr-earcandy:hover .snr-ec-vinyl { translate: 40px 0; }
.snr-earcandy.is-playing .snr-ec-vinyl { translate: 42px 0; }
.snr-ec-actions { flex-wrap: wrap; row-gap: 8px; }
}
/* ── Rows shared by Mixes & Artists ───────────────────────────────── */
.snr-discover { display: flex; flex-direction: column; gap: 2.4rem; margin: .5rem 0 2.6rem; }
.snr-discover .snr-section-head { margin-bottom: 14px; }
.snr-row {
display: grid; grid-auto-flow: column; gap: 18px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scroll-padding-left: 2px;
padding: 4px 2px 12px;
scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--purple-mid) 35%, transparent) transparent;
-webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.snr-row::-webkit-scrollbar { height: 4px; }
.snr-row::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--purple-mid) 35%, transparent); border-radius: 4px; }
.snr-row > * { scroll-snap-align: start; }
/* ── Your Mixes ───────────────────────────────────────────────────── */
.snr-mixes .snr-row { grid-auto-columns: 184px; }
.snr-mix { cursor: pointer; outline: none; }
.snr-mix-art {
position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
background: hsl(var(--mix-hue) 55% 18%);
box-shadow: 0 18px 36px -20px hsl(var(--mix-hue) 80% 40% / .9), inset 0 0 0 1px rgba(255,255,255,.1);
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.snr-mix-grid {
position: absolute; inset: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0;
transition: gap .4s cubic-bezier(.2,.8,.2,1), inset .4s cubic-bezier(.2,.8,.2,1);
}
.snr-mix-grid span {
background-size: cover; background-position: center;
transition: transform .5s cubic-bezier(.2,.8,.2,1), border-radius .4s;
}
.snr-mix-empty { background: linear-gradient(135deg, hsl(var(--mix-hue) 60% 35%), hsl(calc(var(--mix-hue) + 50) 60% 22%)); }
/* colour wash that ties the four covers into one artwork */
.snr-mix-art::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(160deg, hsl(var(--mix-hue) 90% 60% / .35), transparent 45%, hsl(var(--mix-hue) 80% 20% / .25));
mix-blend-mode: overlay;
}
.snr-mix-band {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 34px 12px 11px;
background: linear-gradient(to top, hsl(var(--mix-hue) 70% 14% / .96) 30%, hsl(var(--mix-hue) 70% 14% / 0));
display: flex; flex-direction: column; gap: 2px;
}
.snr-mix-band::before { /* colour stripe — the "Daily Mix" signature */
content: ""; position: absolute; left: 12px; bottom: 54px; width: 26px; height: 3px; border-radius: 3px;
background: hsl(var(--mix-hue) 95% 65%); box-shadow: 0 0 10px hsl(var(--mix-hue) 95% 60%);
}
.snr-mix-kind { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--mix-hue) 90% 82%); }
.snr-mix-name { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.15; }
.snr-mix-play {
position: absolute; right: 10px; top: 10px; z-index: 3;
width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; color: #0b0716;
background: hsl(var(--mix-hue) 95% 72%);
box-shadow: 0 10px 22px -6px rgba(0,0,0,.7), 0 0 18px hsl(var(--mix-hue) 95% 60% / .6);
opacity: 0; transform: translateY(-6px) scale(.85);
transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.snr-mix-play svg { width: 17px; height: 17px; margin-left: 2px; }
.snr-mix:hover .snr-mix-art, .snr-mix:focus-visible .snr-mix-art {
transform: translateY(-4px);
box-shadow: 0 26px 44px -20px hsl(var(--mix-hue) 85% 45% / 1), inset 0 0 0 1px rgba(255,255,255,.16);
}
.snr-mix:hover .snr-mix-grid { gap: 4px; inset: 6px; }
.snr-mix:hover .snr-mix-grid span { border-radius: 8px; }
.snr-mix:hover .snr-mix-grid span:nth-child(1) { transform: rotate(-2deg); }
.snr-mix:hover .snr-mix-grid span:nth-child(4) { transform: rotate(2deg); }
.snr-mix:hover .snr-mix-play, .snr-mix:focus-visible .snr-mix-play { opacity: 1; transform: none; }
.snr-mix-meta { margin-top: 10px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-mix-meta strong { color: color-mix(in srgb, color-mix(in srgb, var(--purple) 10%, #fff) 90%, transparent); font-weight: 650; }
@media (hover: none) { .snr-mix-play { opacity: 1; transform: none; } }
/* ── Artists on the Rise ──────────────────────────────────────────── */
.snr-rising .snr-row { grid-auto-columns: 132px; gap: 14px; }
.snr-artist {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 4px 10px; border: 0; border-radius: 16px; background: transparent; cursor: pointer;
color: inherit; font: inherit; text-align: center;
transition: background .25s;
}
.snr-artist:hover { background: rgba(255,255,255,.04); }
.snr-artist-ring {
position: relative; width: 112px; height: 112px; border-radius: 50%; padding: 3px; margin-bottom: 8px;
background: conic-gradient(from var(--ring-spin, 0deg), hsl(var(--a-hue) 95% 65%), hsl(calc(var(--a-hue) + 60) 95% 60%), hsl(calc(var(--a-hue) + 140) 90% 60%), hsl(var(--a-hue) 95% 65%));
box-shadow: 0 14px 30px -14px hsl(var(--a-hue) 90% 50% / .9);
transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
@property --ring-spin { syntax: ""; inherits: false; initial-value: 0deg; }
@keyframes ring-spin { to { --ring-spin: 360deg; } }
.snr-artist:hover .snr-artist-ring { transform: translateY(-3px) scale(1.04); animation: ring-spin 2.4s linear infinite; box-shadow: 0 20px 36px -12px hsl(var(--a-hue) 90% 55% / 1); }
.snr-artist-photo {
display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
border: 3px solid #0b0816;
background: linear-gradient(140deg, hsl(var(--a-hue) 60% 35%), hsl(calc(var(--a-hue) + 50) 60% 18%)) center / cover;
background-size: cover; background-position: center;
overflow: hidden;
}
.snr-artist-mono { font-size: 40px; font-weight: 800; color: rgba(255,255,255,.9); text-shadow: 0 4px 16px rgba(0,0,0,.4); }
.snr-artist-name { max-width: 100%; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-artist-sub { max-width: 100%; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) {
.snr-mixes .snr-row { grid-auto-columns: 150px; gap: 12px; }
.snr-mix-name { font-size: 14px; }
.snr-rising .snr-row { grid-auto-columns: 104px; gap: 8px; }
.snr-artist-ring { width: 88px; height: 88px; }
.snr-artist-mono { font-size: 32px; }
.snr-earcandy { padding: 16px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.snr-ec-bg::before, .snr-earcandy.is-playing .snr-ec-vinyl, .snr-artist:hover .snr-artist-ring { animation: none !important; }
}
/* ══ PASS 15 — Home filters ═══════════════════════════════════════════
The home "Browse" block is hidden (duplicate of the Browse page with
placeholder cards and filters that did nothing). Its genre buttons now
live under the Mood chips as a second chip row (see discover.js). */
#mainDefaultContent .browse-section-redesign { display: none !important; } /* hidden from the first paint; discover.js borrows its genre buttons */
.snr-mood-row, .snr-genre-row { display: flex; align-items: center; gap: 8px; }
.snr-mood-row { flex-wrap: wrap; }
.snr-mood-row::before, .snr-filter-label {
flex: 0 0 auto; width: 64px;
font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: color-mix(in srgb, var(--purple-light) 75%, #fff);
}
.snr-mood-row::before { content: "Mood"; }
.snr-genre-row { margin: -.25rem 0 1.4rem; min-width: 0; }
.snr-genre-row .genre-filters {
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
gap: 8px; overflow-x: auto; min-width: 0; flex: 1;
width: auto !important; max-height: none !important; padding: 2px 2px 8px; margin: 0 !important;
background: none !important; border: 0 !important;
scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--purple-mid) 35%, transparent) transparent;
-webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.snr-genre-row .genre-filters::-webkit-scrollbar { height: 4px; }
.snr-genre-row .genre-filters::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--purple-mid) 35%, transparent); border-radius: 4px; }
/* genre chips: same family as the mood chips */
.snr-genre-row .genre-filter {
flex: 0 0 auto; width: auto !important; min-width: 0 !important;
display: inline-flex !important; align-items: center; gap: 7px;
padding: 7px 14px !important; margin: 0 !important;
border-radius: 999px !important;
font-size: 13px !important; font-weight: 500; white-space: nowrap;
color: var(--text-muted) !important;
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.1) !important;
box-shadow: none !important; text-align: left !important;
transition: background .2s, border-color .2s, color .2s, transform .2s !important;
}
.snr-genre-row .genre-filter[hidden] { display: none !important; }
.snr-genre-row .genre-filter:hover:not(.active) { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.2) !important; color: #fff !important; }
.snr-genre-row .genre-filter.active {
color: #fff !important;
background: linear-gradient(135deg, var(--purple), var(--blue)) !important;
border-color: transparent !important;
box-shadow: 0 6px 18px -6px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.snr-genre-row .genre-filter:active { transform: scale(.96); }
.snr-gcount {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
display: inline-grid; place-items: center;
font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--snr-tint) 85%, transparent); background: rgba(255,255,255,.08);
}
.genre-filter.active .snr-gcount { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 600px) {
.snr-mood-row::before, .snr-filter-label { width: 100%; margin-bottom: 2px; }
.snr-genre-row { flex-wrap: wrap; }
.snr-genre-row .genre-filters { flex-basis: 100%; }
}
.snr-filterbar { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.snr-filterbar > .section-title[hidden] { display: none !important; }
.snr-filterbar .mood-pills { margin-bottom: 12px !important; }
.snr-filterbar + #tracksForYouSection { margin-top: 0 !important; padding-top: 0 !important; }
@media (hover: none), (max-width: 768px) {
.snr-genre-row .genre-filters { scrollbar-width: none; }
.snr-genre-row .genre-filters::-webkit-scrollbar { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
PASS 16 — SONARA ARCADE: Daily Record Pack + Jukebox Slot (arcade.js)
══════════════════════════════════════════════════════════════════════ */
.snr-arcade { margin: 0 0 2.8rem; }
.snr-arcade .snr-section-head { margin-bottom: 14px; }
.arc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .arc-grid { grid-template-columns: 1fr; } }
.arc-panel {
position: relative; isolation: isolate; overflow: hidden;
border-radius: 22px; padding: 18px 20px 16px;
border: 1px solid var(--ln, rgba(255,255,255,.08));
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 26px 50px -30px rgba(0,0,0,.9);
display: flex; flex-direction: column;
}
.arc-pack {
background:
radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--purple-mid) 22%, transparent), transparent 70%),
radial-gradient(40% 40% at 90% 0%, color-mix(in srgb, var(--snr-cyan) 12%, transparent), transparent 70%),
linear-gradient(165deg, var(--snr-deeper), #08050f);
}
.arc-slot {
background:
radial-gradient(60% 50% at 50% 40%, rgba(236,72,153,.16), transparent 70%),
radial-gradient(40% 40% at 0% 100%, rgba(250,204,21,.10), transparent 70%),
linear-gradient(165deg, #160a1e, #08050f);
}
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.arc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--snr-pink); }
.arc-slot .arc-eyebrow { color: #fde68a; }
.arc-title { margin: .25rem 0 0; font-size: 1.3rem; font-weight: 750; letter-spacing: -.025em; color: #fff; }
.ap-timer {
flex: 0 0 auto; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--snr-tint) 75%, transparent);
padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
font-variant-numeric: tabular-nums;
}
.ap-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; }
.ap-note { font-size: 12px; color: var(--text-muted); }
.arc-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer;
font: inherit; font-size: .9rem; font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--purple), var(--blue));
box-shadow: 0 10px 24px -10px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.22);
transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s;
}
.arc-btn svg { width: 15px; height: 15px; }
.arc-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.arc-btn:active { transform: scale(.96); }
/* ── Daily Record Pack ─────────────────────────────────────────────── */
.ap-stage { position: relative; height: 262px; perspective: 1200px; }
/* the sealed foil pack */
.ap-pack {
position: absolute; left: 50%; top: 50%; width: 150px; height: 206px; margin: -103px 0 0 -75px;
border: 0; padding: 0; cursor: pointer; background: none; z-index: 3;
transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s;
}
.ap-pack-foil {
position: absolute; inset: 0; border-radius: 10px;
background:
linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 48%, transparent 60%),
conic-gradient(from var(--foil, 0deg) at 50% 50%, var(--purple-mid), var(--snr-cyan), #f0abfc, #fde68a, var(--purple-mid));
background-size: 260% 100%, 100% 100%;
animation: ap-foil-shine 3.6s ease-in-out infinite, ap-foil-spin 9s linear infinite;
box-shadow: 0 24px 40px -16px color-mix(in srgb, var(--purple-mid) 70%, transparent), inset 0 0 0 1px rgba(255,255,255,.35);
/* crimped top & bottom edges like a real pack */
-webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 12px) no-repeat,
conic-gradient(from -45deg at bottom, #000 90deg, transparent 0) 0 0 / 10px 6px repeat-x,
conic-gradient(from 135deg at top, #000 90deg, transparent 0) 0 100% / 10px 6px repeat-x;
mask: linear-gradient(#000 0 0) center / 100% calc(100% - 12px) no-repeat,
conic-gradient(from -45deg at bottom, #000 90deg, transparent 0) 0 0 / 10px 6px repeat-x,
conic-gradient(from 135deg at top, #000 90deg, transparent 0) 0 100% / 10px 6px repeat-x;
}
@property --foil { syntax: ""; inherits: false; initial-value: 0deg; }
@keyframes ap-foil-spin { to { --foil: 360deg; } }
@keyframes ap-foil-shine { 0%, 30% { background-position: 130% 0, 0 0; } 70%, 100% { background-position: -30% 0, 0 0; } }
.ap-pack-flap {
position: absolute; left: 0; right: 0; top: 0; height: 22%; border-radius: 10px 10px 0 0;
background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
border-bottom: 1px dashed rgba(255,255,255,.5);
transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s;
}
.ap-pack-logo {
position: absolute; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
border-radius: 50%; background: url('logo-s.svg') center / 62% no-repeat, radial-gradient(circle at 30% 25%, var(--snr-deep), var(--snr-deeper) 70%);
box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.35);
}
.ap-pack-text {
position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px;
color: var(--snr-deeper);
}
.ap-pack-text strong { font-size: 12px; letter-spacing: .2em; }
.ap-pack-text em { font-style: normal; font-size: 10px; font-weight: 700; opacity: .75; }
.ap-stage.is-sealed .ap-pack:hover { animation: ap-wiggle .6s ease-in-out; }
@keyframes ap-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
/* tearing open */
.ap-stage.is-opening .ap-pack { animation: ap-shake .5s ease-in-out; }
.ap-stage.is-opening .ap-pack-flap { transform: translateY(-46px) rotate(-14deg); opacity: 0; transition-delay: .4s; }
@keyframes ap-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-2deg); } 40% { transform: translateX(5px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.ap-stage.is-open .ap-pack { transform: translateY(70px) scale(.7); opacity: 0; pointer-events: none; }
/* the three cards */
.ap-cards { position: absolute; inset: 0; z-index: 2; }
.ap-card {
--dx: calc((var(--i) - 1) * 132px);
--rot: calc((var(--i) - 1) * 6deg);
position: absolute; left: 50%; top: 50%; width: 120px; height: 184px; margin: -92px 0 0 -60px;
perspective: 900px; cursor: pointer;
opacity: 0; transform: translateY(20px) scale(.6);
transition: transform .7s cubic-bezier(.2,.9,.25,1.1), opacity .4s;
transition-delay: calc(var(--i) * .12s);
}
.ap-stage.is-open .ap-card { opacity: 1; transform: translateX(var(--dx)) rotate(var(--rot)); }
.ap-stage.is-open .ap-card:nth-child(2) { transform: translateX(var(--dx)) translateY(-8px); }
.ap-stage.is-open .ap-card:hover { transform: translateX(var(--dx)) rotate(0deg) translateY(-14px) scale(1.05); z-index: 5; }
.ap-inner {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.3,1.3,.5,1);
transition-delay: calc(.55s + var(--i) * .38s);
}
.ap-stage.is-open .ap-inner { transform: rotateY(180deg); }
.ap-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
/* card back */
.ap-back {
background:
url('logo-s.svg') center / 46% no-repeat,
repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px),
linear-gradient(160deg, var(--snr-deep-hi), var(--snr-deeper));
box-shadow: inset 0 0 0 2px color-mix(in srgb, color-mix(in srgb, var(--purple) 39%, #fff) 45%, transparent), inset 0 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--purple) 16%, #000) 90%, transparent), inset 0 0 0 7px color-mix(in srgb, color-mix(in srgb, var(--purple) 39%, #fff) 25%, transparent);
}
/* card front */
.ap-front {
transform: rotateY(180deg);
display: flex; flex-direction: column;
background: linear-gradient(180deg, color-mix(in srgb, var(--purple) 22%, #000), #0c0818);
box-shadow: inset 0 0 0 1.5px var(--rim, rgba(203,213,225,.55));
}
.ap-art { position: relative; height: 58%; background: linear-gradient(135deg, hsl(var(--c-hue) 60% 35%), hsl(calc(var(--c-hue) + 60) 60% 20%)); }
.ap-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-mono { display: grid; place-items: center; height: 100%; font-size: 40px; font-weight: 800; color: rgba(255,255,255,.85); }
.ap-rarity {
position: absolute; left: 6px; top: 6px; padding: 3px 7px; border-radius: 999px;
font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: #0b0716; background: var(--rim, #cbd5e1);
box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ap-body { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-title { font-size: 12px; font-weight: 750; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-artist { font-size: 10.5px; color: color-mix(in srgb, var(--snr-tint) 65%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-stats { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; font-weight: 700; color: color-mix(in srgb, var(--snr-tint) 55%, transparent); letter-spacing: .04em; }
.ap-play {
position: absolute; right: 7px; top: calc(58% - 17px); width: 30px; height: 30px; border-radius: 50%; border: 0;
display: grid; place-items: center; color: #0b0716; background: var(--rim, #fff);
opacity: 0; transform: scale(.7); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
pointer-events: none;
}
.ap-play svg { width: 12px; height: 12px; margin-left: 1px; }
.ap-card:hover .ap-play { opacity: 1; transform: none; }
@media (hover: none) { .ap-play { opacity: 1; transform: none; } }
/* rarity rims */
.ap-common { --rim: #cbd5e1; }
.ap-rare { --rim: var(--purple-light); box-shadow: inset 0 0 0 1.5px var(--purple-light), 0 0 22px -4px color-mix(in srgb, var(--purple-light) 80%, transparent); }
.ap-legendary { --rim: #fbbf24; box-shadow: inset 0 0 0 1.5px #fbbf24, 0 0 28px -2px rgba(251,191,36,.85); }
.ap-legendary::after { /* moving gold shimmer */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255,240,180,.45) 50%, transparent 65%);
background-size: 260% 100%; animation: ap-foil-shine 3s ease-in-out infinite;
mix-blend-mode: screen;
}
/* reveal burst behind a Legendary pull */
.ap-stage.is-revealing[data-best="legendary"]::before,
.ap-stage.is-revealing[data-best="rare"]::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: 1;
background: repeating-conic-gradient(from 0deg, rgba(251,191,36,.28) 0 6deg, transparent 6deg 18deg);
-webkit-mask: radial-gradient(circle, #000 10%, transparent 65%); mask: radial-gradient(circle, #000 10%, transparent 65%);
animation: ap-rays 2.4s ease-out forwards;
pointer-events: none;
}
.ap-stage.is-revealing[data-best="rare"]::before { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--purple-light) 28%, transparent) 0 6deg, transparent 6deg 18deg); }
@keyframes ap-rays { 0% { opacity: 0; transform: scale(.4) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(40deg); } }
/* ── Jukebox Slot ──────────────────────────────────────────────────── */
.js-machine {
--reel-h: 92px;
position: relative; margin: 8px 0 4px; padding: 20px 18px 12px; border-radius: 18px;
background: linear-gradient(180deg, color-mix(in srgb, var(--purple) 25%, #000), #12081c);
box-shadow: inset 0 0 0 1px rgba(253,230,138,.25), inset 0 2px 0 rgba(255,255,255,.08), 0 20px 40px -24px rgba(236,72,153,.6);
}
/* marquee bulbs that chase around the frame */
.js-bulbs {
position: absolute; inset: 6px; border-radius: 14px; pointer-events: none;
background: conic-gradient(from var(--bulb, 0deg), #fde68a, #f472b6, var(--purple-light), var(--snr-cyan), #fde68a);
-webkit-mask-image: radial-gradient(circle, #000 1.8px, transparent 2.4px), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
-webkit-mask-size: 12px 12px, auto, auto;
-webkit-mask-clip: border-box, content-box, border-box;
-webkit-mask-composite: source-in, xor;
mask-image: radial-gradient(circle, #000 1.8px, transparent 2.4px), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
mask-size: 12px 12px, auto, auto;
mask-clip: border-box, content-box, border-box;
mask-composite: intersect, exclude;
padding: 6px;
opacity: .8;
animation: js-bulbs 6s linear infinite;
filter: drop-shadow(0 0 3px rgba(253,230,138,.8));
}
@property --bulb { syntax: ""; inherits: false; initial-value: 0deg; }
@keyframes js-bulbs { to { --bulb: 360deg; } }
.js-machine.is-spinning .js-bulbs { animation-duration: 1.2s; }
.js-machine.is-win .js-bulbs { animation: js-bulbs 1.2s linear infinite, js-flash .25s steps(2) 6; }
@keyframes js-flash { 50% { opacity: .2; } }
.js-reels { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.js-reel {
position: relative; height: var(--reel-h); overflow: hidden; border-radius: 12px;
background: #0a0612;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.js-reel::after { /* cylinder shading */
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: linear-gradient(180deg, rgba(0,0,0,.65), transparent 28%, transparent 72%, rgba(0,0,0,.65));
}
.js-strip { will-change: transform; }
.js-machine.is-spinning .js-strip { filter: blur(1.2px); }
.js-reel.is-stopped { animation: js-thunk .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes js-thunk { 0% { transform: translateY(5px); } 100% { transform: none; } }
.js-item { height: var(--reel-h); display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; }
.js-genre span {
max-width: 100%; padding: 7px 10px; border-radius: 10px;
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15;
color: #fff; background: linear-gradient(135deg, hsl(var(--g-hue) 80% 50%), hsl(calc(var(--g-hue) + 40) 80% 38%));
box-shadow: 0 6px 16px -6px hsl(var(--g-hue) 80% 50% / .8);
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.js-artist { flex-direction: column; gap: 5px; }
.js-artist i {
width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
font-style: normal; font-weight: 800; color: #fff;
background: linear-gradient(135deg, hsl(var(--g-hue) 70% 50%), hsl(calc(var(--g-hue) + 60) 70% 35%));
}
.js-artist span { max-width: 100%; font-size: 11px; font-weight: 700; color: #f5f3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js-cover { background: linear-gradient(135deg, var(--snr-deep-hi), var(--snr-deeper)) center / cover; }
.js-cover b { font-size: 28px; color: rgba(255,255,255,.8); }
.js-payline { position: absolute; left: -10px; right: -10px; top: 50%; height: 0; pointer-events: none; z-index: 3; }
.js-payline::before, .js-payline::after {
content: ""; position: absolute; top: -7px; border: 7px solid transparent;
}
.js-payline::before { left: 0; border-left-color: #fde68a; filter: drop-shadow(0 0 4px #fde68a); }
.js-payline::after { right: 0; border-right-color: #fde68a; filter: drop-shadow(0 0 4px #fde68a); }
.js-machine.is-win .js-reel { box-shadow: inset 0 0 0 1.5px rgba(253,230,138,.8), 0 0 18px -4px rgba(253,230,138,.8); }
.js-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; }
.js-labels span { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(253,230,138,.7); }
.js-result { min-height: 2.6em; margin-top: 8px; font-size: 13px; color: color-mix(in srgb, var(--snr-tint) 75%, transparent); text-wrap: balance; }
.js-result strong { color: #fff; }
.js-result span { color: #fde68a; }
.js-machine.is-win + .js-result { animation: js-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes js-pop { 0% { transform: scale(.94); opacity: .4; } 100% { transform: none; opacity: 1; } }
.js-spin { background: linear-gradient(135deg, var(--snr-pink), var(--purple-mid) 55%, var(--blue)); }
.js-lever {
position: relative; width: 10px; height: 16px; margin-right: 2px;
}
.js-lever::before { content: ""; position: absolute; left: 4px; top: 4px; width: 2px; height: 12px; background: #fff; border-radius: 2px; transform-origin: bottom; transition: transform .3s; }
.js-lever::after { content: ""; position: absolute; left: 1px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 6px #fde68a; transition: transform .3s; }
.js-spin:active .js-lever::before { transform: rotate(35deg); }
.js-spin:active .js-lever::after { transform: translate(5px, 3px); }
@media (max-width: 600px) {
.ap-stage { height: 230px; }
.ap-card { width: 96px; height: 150px; margin: -75px 0 0 -48px; --dx: calc((var(--i) - 1) * 104px); }
.ap-title { font-size: 11px; }
.js-machine { --reel-h: 80px; padding: 18px 12px 10px; }
.js-genre span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.ap-pack-foil, .ap-legendary::after, .js-bulbs { animation: none !important; }
.ap-card, .ap-inner { transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 17 · Upload studio
Upload/edit form as a set of numbered cards, real icons,
cover preview, a switch for public, the lyrics studio
(Write / Sync to song) and the spotlight line picker.
═══════════════════════════════════════════════════════════ */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modal.upload-modal { max-width: 620px; padding: 28px 28px 24px; }
.upload-modal > h2 { font-size: 1.55rem; letter-spacing: -.015em; margin: 0; padding-right: 44px; }
.upload-sub { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.upload-modal .upload-form { gap: 14px; margin-top: 18px; }
#uploadForm { counter-reset: upsec; }
.upload-modal .upload-form > .form-section {
padding: 18px 18px 18px;
border: 1px solid var(--ln, rgba(255,255,255,.085));
border-radius: var(--r-card, 14px);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
gap: 12px;
}
.upload-modal .upload-form > .form-section:last-of-type { border-bottom: 1px solid var(--ln, rgba(255,255,255,.085)); }
#uploadForm > .form-section { counter-increment: upsec; }
#uploadForm > .form-section > .form-section-title,
#uploadForm .usp-head > .form-section-title {
display: inline-flex; align-items: center; gap: 9px; margin: 0;
font-size: .72rem; letter-spacing: .1em; color: var(--purple-light);
}
#uploadForm > .form-section > .form-section-title::before,
#uploadForm .usp-head > .form-section-title::before {
content: counter(upsec, decimal-leading-zero);
display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px;
border-radius: 999px; font: 600 .68rem/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .02em;
color: #fff; background: linear-gradient(135deg, var(--purple), var(--blue));
box-shadow: 0 2px 10px -2px var(--purple-glow);
}
/* fields */
.upload-modal .upload-form .form-label { font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.72); gap: 6px; }
.upload-modal .upload-form .form-label input,
.upload-modal .upload-form .genre-dropdown-toggle {
min-height: 44px; border-radius: 11px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1);
transition: border-color .2s, box-shadow .2s, background .2s;
}
.upload-modal .upload-form .form-label input:hover { border-color: rgba(255,255,255,.18); }
.upload-modal .upload-form .form-label input:focus {
border-color: var(--purple-light); background: rgba(0,0,0,.3);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 22%, transparent);
}
.upload-modal .upload-form .form-label input::placeholder { color: rgba(255,255,255,.32); }
.upload-modal .form-hint { display: inline; margin-left: 6px; font-size: .74rem; color: rgba(255,255,255,.4); }
.upload-modal .genre-chips { margin-top: 0; }
.upload-credits-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* artwork + audio side by side */
.upload-modal .form-section:has(> .form-drop-zone) { display: grid; grid-template-columns: 168px 1fr; align-items: stretch; }
.upload-modal .form-section:has(> .form-drop-zone) > .form-section-title { grid-column: 1 / -1; }
.upload-modal .form-drop-zone {
min-height: 168px; margin: 0; gap: 2px; text-align: center;
border: 1.5px dashed color-mix(in srgb, var(--purple-light) 35%, transparent); border-radius: 14px;
background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--purple) 12%, transparent), color-mix(in srgb, var(--purple) 3%, transparent) 70%);
transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.upload-modal .form-drop-zone:hover { border-color: var(--purple-light); transform: translateY(-1px); }
.upload-modal .form-drop-zone.drag-over { border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--purple) 50%, transparent); }
.upload-modal .form-drop-icon {
width: 46px; height: 46px; margin: 0 0 8px; display: grid; place-items: center; border-radius: 14px;
color: var(--purple-light); background: color-mix(in srgb, var(--purple) 14%, transparent); border: 1px solid color-mix(in srgb, var(--purple-light) 25%, transparent);
}
.upload-modal .form-drop-icon svg { width: 24px; height: 24px; }
.upload-modal .form-drop-text { font-size: .92rem; }
.upload-modal .form-drop-hint { font-size: .74rem; line-height: 1.4; max-width: 30ch; }
.upload-modal .form-drop-filename { font-size: .78rem; font-weight: 600; color: var(--purple-light); max-width: 92%; }
.form-drop-meta { font: 500 .72rem/1.3 'Space Grotesk', 'Inter', sans-serif; color: rgba(255,255,255,.5); letter-spacing: .02em; }
.form-drop-meta:empty { display: none; }
.upload-modal .form-drop-zone.has-file { border-style: solid; border-color: rgba(74,222,128,.45); background: radial-gradient(120% 90% at 50% 0%, rgba(74,222,128,.1), rgba(74,222,128,.02) 70%); }
.upload-modal .form-drop-zone.has-file .form-drop-icon { color: #4ade80; background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.3); }
/* cover preview: the picked image fills the square */
.upload-modal .form-drop-zone.has-preview {
aspect-ratio: 1; min-height: 0; justify-content: flex-end; overflow: hidden; border-color: rgba(255,255,255,.18);
background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)), var(--cover) center / cover no-repeat;
}
.upload-modal .form-drop-zone.has-preview .form-drop-icon,
.upload-modal .form-drop-zone.has-preview .form-drop-hint { display: none; }
.upload-modal .form-drop-zone.has-preview .form-drop-text { font-size: .74rem; color: rgba(255,255,255,.75); }
.upload-modal .form-drop-zone.has-preview .form-drop-text::before { content: "Change "; }
.upload-modal .form-drop-zone.has-preview .form-drop-filename { color: #fff; }
/* lyrics row */
.upload-modal .form-lyrics-row { gap: 10px 12px; }
.upload-modal .btn-lyrics-open {
min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 600; font-size: .88rem;
background: color-mix(in srgb, var(--purple) 14%, transparent); border: 1px solid color-mix(in srgb, var(--purple-light) 38%, transparent);
}
.upload-modal .btn-lyrics-icon { display: inline-grid; place-items: center; color: var(--purple-light); }
.upload-modal .btn-lyrics-icon svg { width: 20px; height: 20px; }
.upload-modal .form-lyrics-status:not(:empty) {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
font-size: .76rem; font-weight: 600; color: #fcd34d; background: rgba(252,211,77,.1); border: 1px solid rgba(252,211,77,.25);
}
.upload-modal .form-lyrics-status:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.upload-modal .form-lyrics-row[data-state="synced"] .form-lyrics-status { color: #4ade80; background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.28); }
.ls-sync-nudge {
border: 0; background: none; padding: 4px 2px; cursor: pointer; font: 600 .8rem/1 inherit; color: var(--purple-light);
text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple-light) 40%, transparent); text-underline-offset: 3px;
}
.ls-sync-nudge:hover { color: #fff; }
/* public switch */
.upload-public-row {
display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 14px !important; cursor: pointer;
padding: 14px 16px; border-radius: var(--r-card, 14px); border: 1px solid var(--ln, rgba(255,255,255,.085));
background: rgba(255,255,255,.025); transition: border-color .2s, background .2s;
}
.upload-public-row:hover { border-color: color-mix(in srgb, var(--purple-light) 35%, transparent); }
.upload-public-row:has(.upload-public-input:checked) { border-color: color-mix(in srgb, var(--purple-light) 45%, transparent); background: color-mix(in srgb, var(--purple) 8%, transparent); }
.upload-public-input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0 !important; }
.upload-switch {
position: relative; flex: none; width: 42px; height: 24px; margin-top: 1px; border-radius: 999px;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.12); transition: background .25s, border-color .25s;
}
.upload-switch::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.34,1.4,.64,1);
}
.upload-public-input:checked + .upload-switch { background: linear-gradient(135deg, var(--purple), var(--blue)); border-color: transparent; }
.upload-public-input:checked + .upload-switch::after { transform: translateX(18px); }
.upload-public-input:focus-visible + .upload-switch { outline: 2px solid var(--purple-light); outline-offset: 2px; }
.upload-public-copy { display: flex; flex-direction: column; gap: 3px; }
.upload-public-title { font-size: .92rem; font-weight: 600; color: var(--text); }
.upload-public-desc { font-size: .78rem; line-height: 1.45; color: var(--text-muted); }
/* submit */
.upload-submit-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
min-height: 52px; border-radius: 14px; font-size: 1rem; font-weight: 700; letter-spacing: .01em;
background: linear-gradient(135deg, var(--purple), var(--blue)); border: 0;
box-shadow: 0 10px 28px -10px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.2);
transition: transform .15s, box-shadow .2s, filter .2s;
}
.upload-submit-btn svg { width: 20px; height: 20px; }
.upload-submit-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.upload-submit-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.upload-submit-btn.is-busy { cursor: progress; filter: saturate(.8); }
.upload-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: up-spin .8s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
#uploadProgressMsg { margin: 0 !important; }
/* ── Spotlight picker ─────────────────────────────────────── */
.upload-modal .upload-spotlight-section {
margin: 0; padding: 18px; border-radius: var(--r-card, 14px);
border: 1px solid color-mix(in srgb, var(--purple-light) 30%, transparent);
background: radial-gradient(140% 100% at 0% 0%, color-mix(in srgb, var(--purple) 16%, transparent), transparent 60%), rgba(255,255,255,.02);
}
.usp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.usp-badge {
font: 600 .66rem/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase;
padding: 5px 9px; border-radius: 999px; color: #fde68a; background: rgba(253,230,138,.1); border: 1px solid rgba(253,230,138,.28);
}
.upload-modal .upload-spotlight-hint { margin: 0; font-size: .8rem; }
.usp-chosen {
position: relative; margin: 2px 0 0; padding: 18px 18px 14px 20px; border-radius: 14px; overflow: hidden;
background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 32%, transparent), color-mix(in srgb, var(--blue) 18%, transparent) 60%, color-mix(in srgb, color-mix(in srgb, var(--purple) 18%, #000) 40%, transparent));
border: 1px solid color-mix(in srgb, var(--purple-light) 45%, transparent);
box-shadow: 0 14px 36px -18px color-mix(in srgb, var(--purple) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}
.usp-chosen[hidden] { display: none; }
.usp-chosen::before {
content: "\201C"; position: absolute; right: 12px; top: -18px; font: 700 7rem/1 'Playfair Display', Georgia, serif;
color: rgba(255,255,255,.08); pointer-events: none;
}
.usp-chosen-kicker { display: block; font: 600 .66rem/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 9px; }
.usp-chosen-text {
margin: 0; font: italic 600 clamp(1.02rem, 2.6vw, 1.22rem)/1.4 'Playfair Display', Georgia, serif; color: #fff;
text-wrap: balance; overflow-wrap: anywhere;
}
.usp-chosen-actions { display: flex; gap: 8px; margin-top: 12px; }
.usp-btn {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer;
font: 600 .78rem/1 inherit; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
transition: background .2s, border-color .2s, transform .15s;
}
.usp-btn[hidden] { display: none; }
.usp-btn svg { width: 15px; height: 15px; }
.usp-btn:hover { background: rgba(255,255,255,.18); }
.usp-btn:active { transform: scale(.97); }
.usp-btn--primary { background: linear-gradient(135deg, var(--purple), var(--blue)); border-color: transparent; }
.usp-btn--ghost { background: transparent; }
.usp-list, .usp-all { display: flex; flex-direction: column; gap: 8px; }
.usp-all { max-height: 260px; overflow: auto; padding: 4px 4px 4px 0; margin-top: 2px; border-top: 1px solid var(--ln, rgba(255,255,255,.085)); padding-top: 10px; scrollbar-width: thin; }
.usp-all.hidden { display: none; }
.usp-item {
display: grid; grid-template-columns: 20px 1fr auto; align-items: start; gap: 12px; width: 100%; text-align: left; cursor: pointer;
padding: 12px 14px; border-radius: 12px; color: var(--text);
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
transition: border-color .2s, background .2s, transform .15s;
}
.usp-item:hover { border-color: color-mix(in srgb, var(--purple-light) 40%, transparent); background: color-mix(in srgb, var(--purple) 7%, transparent); }
.usp-item:active { transform: scale(.995); }
.usp-item:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 2px; }
.usp-item.is-chosen { border-color: color-mix(in srgb, var(--purple-light) 70%, transparent); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.usp-radio { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); transition: border-color .2s, box-shadow .2s; }
.usp-item.is-chosen .usp-radio { border-color: var(--purple-light); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--purple) 21%, #000), inset 0 0 0 9px var(--purple-light); }
.usp-item-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.usp-item-text { font-size: .9rem; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.usp-all .usp-item { padding: 9px 12px; }
.usp-all .usp-item-text { font-size: .84rem; color: rgba(255,255,255,.82); }
.usp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.usp-tag { font: 600 .66rem/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .03em; padding: 4px 7px; border-radius: 6px; color: var(--purple-light); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.usp-rank { font: 700 .62rem/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; color: color-mix(in srgb, var(--purple) 21%, #000); background: linear-gradient(135deg, #fde68a, #f59e0b); white-space: nowrap; }
.usp-empty { margin: 0; font-size: .82rem; color: var(--text-muted); }
.usp-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.usp-link { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 .8rem/1.2 inherit; color: var(--purple-light); }
.usp-link[hidden] { display: none; }
.usp-link:hover { color: #fff; }
.upload-modal .upload-spotlight-edit-box { margin: 0; }
.upload-modal .upload-spotlight-textarea { min-height: 64px; border-radius: 12px; font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; margin-bottom: 8px; }
.usp-edit-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.usp-count { margin-right: auto; font: 500 .72rem/1 'Space Grotesk', sans-serif; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.upload-modal .upload-spotlight-status { margin: 0; min-height: 0; font-size: .78rem; color: var(--text-muted); }
.upload-modal .upload-spotlight-status:empty { display: none; }
.upload-spotlight-status.is-ok { color: #4ade80 !important; }
/* ── Lyrics studio modal ──────────────────────────────────── */
.modal.lyrics-modal { max-width: 640px; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.lyrics-modal h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
.ls-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(0,0,0,.25); border: 1px solid var(--ln, rgba(255,255,255,.085)); }
.ls-tab {
position: relative; min-height: 36px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
font: 600 .86rem/1 inherit; color: rgba(255,255,255,.6); background: transparent; transition: color .2s, background .2s;
}
.ls-tab:hover { color: #fff; }
.ls-tab.is-on { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 55%, transparent), color-mix(in srgb, var(--blue) 40%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 14px -6px color-mix(in srgb, var(--purple) 70%, transparent); }
.ls-tab.has-dot::after { content: ""; position: absolute; top: 7px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 6px #fcd34d; }
.ls-meta { margin-left: auto; padding-right: 8px; font: 500 .74rem/1 'Space Grotesk', 'Inter', sans-serif; color: rgba(255,255,255,.5); white-space: nowrap; }
.ls-meta.is-done { color: #4ade80; }
.ls-pane[hidden] { display: none !important; }
.ls-pane { display: flex; flex-direction: column; gap: 12px; }
.lyrics-modal .lyrics-modal-hint { margin: 0; font-size: .84rem; line-height: 1.5; }
.lyrics-modal .lyrics-modal-textarea {
margin: 0; min-height: 280px; max-height: 52vh; border-radius: 14px; padding: 16px 18px; font-size: .95rem; line-height: 1.7;
background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.1);
}
.ls-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ls-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: 600 .76rem/1 inherit; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.ls-chip:hover { color: #fff; border-color: color-mix(in srgb, var(--purple-light) 45%, transparent); }
.ls-lrc { margin-left: auto; font-size: .78rem; color: var(--text-muted); }
.ls-lrc summary { cursor: pointer; color: var(--purple-light); font-weight: 600; list-style: none; }
.ls-lrc summary::-webkit-details-marker { display: none; }
.ls-lrc[open] { flex-basis: 100%; margin-left: 0; }
.ls-lrc p { margin: 8px 0 0; line-height: 1.55; }
.ls-lrc code, .lyrics-modal-hint code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 5px; font-size: .78rem; }
.ls-nosrc, .ls-empty { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .84rem; line-height: 1.5; color: #fde68a; background: rgba(253,230,138,.08); border: 1px solid rgba(253,230,138,.25); }
.ls-nosrc[hidden], .ls-empty[hidden] { display: none; }
.ls-player {
display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--ln, rgba(255,255,255,.085));
}
.ls-player.is-off { opacity: .45; pointer-events: none; }
.ls-play {
width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
background: linear-gradient(135deg, var(--purple), var(--blue)); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--purple) 80%, transparent);
}
.ls-play svg { width: 20px; height: 20px; fill: currentColor; }
.ls-play .ls-i-pause, .ls-play.is-playing .ls-i-play { display: none; }
.ls-play.is-playing .ls-i-pause { display: inline; }
.ls-back { display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 0 9px; border-radius: 999px; cursor: pointer; font: 600 .72rem/1 inherit; color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.ls-back svg { width: 15px; height: 15px; }
.ls-scrub { min-width: 0; }
.ls-scrub input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%; height: 5px; margin: 6px 0; border-radius: 999px; cursor: pointer;
background: linear-gradient(90deg, var(--purple-light) var(--p, 0%), rgba(255,255,255,.14) var(--p, 0%));
}
.ls-scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 40%, transparent); }
.ls-scrub input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.ls-times { display: flex; justify-content: space-between; font: 500 .7rem/1 'Space Grotesk', sans-serif; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.ls-rate select { height: 32px; padding: 0 8px; border-radius: 9px; font: 600 .76rem/1 inherit; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); cursor: pointer; }
.ls-lines {
position: relative; list-style: none; margin: 0; padding: 6px; height: min(44vh, 340px); overflow: auto; scroll-behavior: auto;
border-radius: 14px; background: rgba(0,0,0,.2); border: 1px solid var(--ln, rgba(255,255,255,.085)); scrollbar-width: thin;
-webkit-mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.ls-pane.is-off .ls-lines, .ls-pane.is-off .ls-syncbar { opacity: .5; }
.ls-gap-row { height: 10px; }
.ls-label { padding: 10px 10px 4px 74px; font: 600 .66rem/1 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.ls-row {
display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px;
transition: background .2s, transform .2s;
}
.ls-row + .ls-row { margin-top: 1px; }
.ls-time {
height: 26px; padding: 0 6px; border-radius: 7px; border: 0; cursor: pointer; font: 600 .74rem/1 'Space Grotesk', sans-serif;
font-variant-numeric: tabular-nums; color: rgba(255,255,255,.35); background: rgba(255,255,255,.04);
}
.ls-row.is-timed .ls-time { color: var(--purple-light); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.ls-row.is-timed .ls-time:hover { background: color-mix(in srgb, var(--purple) 30%, transparent); color: #fff; }
.ls-time:disabled { cursor: default; }
.ls-text { font-size: .92rem; line-height: 1.4; color: rgba(255,255,255,.55); cursor: pointer; overflow-wrap: anywhere; transition: color .2s; }
.ls-row.is-timed .ls-text { color: rgba(255,255,255,.82); }
.ls-row.is-target { background: rgba(253,230,138,.08); box-shadow: inset 3px 0 0 #fcd34d; }
.ls-row.is-target .ls-text { color: #fff; font-weight: 600; }
.ls-row.is-live { background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 35%, transparent), color-mix(in srgb, var(--blue) 12%, transparent)); }
.ls-row.is-live .ls-text { color: #fff; font-weight: 600; }
.ls-row.just-tapped .ls-time { animation: ls-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ls-pop { 0% { transform: scale(.8); background: #fcd34d; color: color-mix(in srgb, var(--purple) 21%, #000); } 100% { transform: scale(1); } }
.ls-nudge { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .2s; }
.ls-row:hover .ls-nudge, .ls-row:focus-within .ls-nudge, .ls-row.is-live .ls-nudge { opacity: 1; }
.ls-nudge button { width: 26px; height: 26px; border-radius: 7px; border: 0; cursor: pointer; font: 600 .9rem/1 inherit; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); }
.ls-nudge button:hover { background: color-mix(in srgb, var(--purple) 40%, transparent); color: #fff; }
@media (hover: none) { .ls-nudge { opacity: 1; } }
.ls-syncbar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.ls-tap {
position: relative; overflow: hidden; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 .92rem/1.2 inherit; color: color-mix(in srgb, var(--purple) 21%, #000);
background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 10px 26px -12px rgba(251,191,36,.9), inset 0 1px 0 rgba(255,255,255,.5);
transition: transform .1s, filter .2s;
}
.ls-tap::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--ls-progress, 0) * 100%); background: color-mix(in srgb, color-mix(in srgb, var(--purple) 21%, #000) 45%, transparent); transition: width .3s; }
.ls-tap:active:not(:disabled) { transform: scale(.97); }
.ls-tap:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }
.ls-tap kbd { font: 700 .66rem/1 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, color-mix(in srgb, var(--purple) 21%, #000) 14%, transparent); border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--purple) 21%, #000) 20%, transparent); }
.ls-ghost { min-height: 52px; padding: 0 14px; border-radius: 14px; cursor: pointer; font: 600 .82rem/1 inherit; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.ls-ghost:hover { color: #fff; border-color: color-mix(in srgb, var(--purple-light) 45%, transparent); }
.ls-help { margin: 0; font-size: .76rem; line-height: 1.5; color: rgba(255,255,255,.45); }
.ls-help kbd { font: 600 .68rem/1 'Space Grotesk', sans-serif; padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.lyrics-modal .lyrics-modal-actions { margin-top: 2px; }
/* phones: full-height sheets, single column */
@media (max-width: 600px) {
.modal.upload-modal, .modal.lyrics-modal { padding: 22px 16px 18px; border-radius: 20px; }
.upload-modal > h2, .lyrics-modal h2 { font-size: 1.3rem; }
.upload-credits-row { grid-template-columns: 1fr; }
.upload-modal .upload-form > .form-section { padding: 16px 14px; }
.upload-modal .form-section:has(> .form-drop-zone) { grid-template-columns: 116px 1fr; gap: 10px; }
.upload-modal .form-drop-zone { min-height: 132px; padding: 12px 8px; }
.upload-modal .form-drop-icon { width: 38px; height: 38px; border-radius: 12px; }
.upload-modal .form-drop-hint { font-size: .68rem; }
.ls-tab { padding: 0 12px; font-size: .82rem; }
.ls-meta { display: none; }
.ls-player { grid-template-columns: auto auto 1fr; }
.ls-rate { display: none; }
.ls-row { grid-template-columns: 54px 1fr auto; gap: 8px; padding: 7px 4px; }
.ls-label { padding-left: 62px; }
.ls-help { display: none; }
.ls-syncbar { grid-template-columns: 1fr 1fr; }
.ls-tap { grid-column: 1 / -1; grid-row: 1; }
.ls-tap kbd { display: none; }
.ls-lrc { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.upload-spinner { animation-duration: 2s; }
.ls-row.just-tapped .ls-time { animation: none; }
}
.upload-modal .upload-form label.form-label:has(> .form-hint):not(:has(input)) { flex-direction: row; align-items: baseline; flex-wrap: wrap; }
.ls-tab.has-dot::after { position: relative; top: -7px; right: auto; display: inline-block; margin-left: 4px; vertical-align: top; }
/* ═══ PASS 18 · Themes stay in step ════════════════════════════════════
Text on accent fills follows --on-accent, set from the live accent by
app.js (white on deep accents, near-black on light ones), so Minimal,
Futuristic, Retro/Warm and the gold/amber/cyan accents stay readable. */
:root { --on-accent: #fff; }
:root:root body :is(.btn-primary, .upload-submit-btn, .snr-lc-match, .mood-pill.active,
.genre-filter.active, .snr-genre-row .genre-filter.active, .track-card-play, .genre-chip.selected, .usp-btn--primary,
.ls-tab.is-on, .ls-play, .arc-btn.ap-playall, .ap-play, .spotlight-play-btn, .sonara-toast-btn) {
color: var(--on-accent) !important;
}
:is(.btn-primary, .upload-submit-btn, .usp-btn--primary, .ls-play, .arc-btn.ap-playall) svg { color: inherit; }
#uploadForm > .form-section > .form-section-title::before,
#uploadForm .usp-head > .form-section-title::before { color: var(--on-accent); }
/* ═══════════════════════════════════════════════════════════
PASS 19 · Window edges: glass rims + lit seams
Panels and cards get a gradient rim that catches light at the
top-left (white → theme accent) and fades out towards the
bottom-right, over a soft accent glow. The app frame (sidebar,
header, player bar) gets seams that glow in the middle and fade
at the ends; while music plays a light glides along them and
the player bar's top edge breathes with the beat (--beat, set by
player-polish.js). Every colour comes from the theme tokens.
═══════════════════════════════════════════════════════════ */
:root {
--rim-hi: rgba(255,255,255,.30);
--rim-acc: color-mix(in srgb, var(--purple-light) 58%, transparent);
--rim-2: color-mix(in srgb, var(--snr-cyan) 30%, transparent);
--rim: linear-gradient(145deg, var(--rim-hi) 0%, var(--rim-acc) 16%, rgba(255,255,255,.07) 42%, rgba(255,255,255,.035) 70%, var(--rim-2) 100%);
--rim-hover: linear-gradient(145deg, rgba(255,255,255,.5) 0%, color-mix(in srgb, var(--purple-light) 85%, transparent) 20%, color-mix(in srgb, var(--purple) 35%, transparent) 55%, color-mix(in srgb, var(--snr-cyan) 55%, transparent) 100%);
--edge-glow: color-mix(in srgb, var(--purple) 32%, transparent);
--seam: color-mix(in srgb, var(--purple-light) 70%, transparent);
--seam-2: color-mix(in srgb, var(--snr-cyan) 55%, transparent);
}
html body.snr-dark { --rim-hi: rgba(255,255,255,.24); --edge-glow: color-mix(in srgb, var(--purple) 26%, transparent); }
/* ── Glass rim on panels, cards and dialogs ─────────────────────────── */
html:not([data-theme="neoFrame"]) :is(.spotlight-card, .track-card,
.snr-landscape-card, .snr-earcandy, .arc-panel, .monetize-status-banner, .modal.glass, .upload-modal .upload-form > .form-section,
.landing-hype-panel, #playerSettingsPopover .player-settings-panel, #snrNotifPopover) {
border-color: transparent !important;
}
/* the rim is drawn by ::after, so these previously unpositioned panels anchor it */
html:not([data-theme="neoFrame"]) :is(.track-card, .snr-landscape-card, .monetize-status-banner,
.landing-hype-panel, .upload-modal .upload-form > .form-section, #playerSettingsPopover .player-settings-panel) { position: relative; }
html:not([data-theme="neoFrame"]) :is(.spotlight-card, .track-card,
.snr-landscape-card, .snr-earcandy, .arc-panel, .monetize-status-banner, .modal.glass, .upload-modal .upload-form > .form-section,
.landing-hype-panel, #playerSettingsPopover .player-settings-panel, #snrNotifPopover)::after {
content: "";
position: absolute; inset: 0; z-index: 3;
border-radius: inherit;
padding: 1px;
background: var(--rim);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
transition: opacity .35s ease;
}
/* big panels float on a soft accent glow; small cards keep a tight shadow */
html:not([data-theme="neoFrame"]) :is(.spotlight-card, .arc-panel, .modal.glass) {
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -30px rgba(0,0,0,.9), 0 18px 46px -34px var(--edge-glow) !important;
}
html:not([data-theme="neoFrame"]) :is(.track-card, .snr-landscape-card) {
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px -22px rgba(0,0,0,.85) !important;
}
/* hover: the rim lights up in the accent, the card lifts onto its glow */
html:not([data-theme="neoFrame"]) :is(.track-card, .snr-landscape-card):hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px -20px rgba(0,0,0,.9), 0 12px 34px -16px var(--edge-glow) !important;
}
html:not([data-theme="neoFrame"]) :is(.track-card, .snr-landscape-card, .arc-panel):hover::after {
background: var(--rim-hover);
}
/* the spotlight keeps its own second-colour signature in the rim */
html:not([data-theme="neoFrame"]) .spotlight-card::after {
background: linear-gradient(145deg, var(--rim-hi), color-mix(in srgb, var(--snr-cyan) 55%, transparent) 18%, rgba(255,255,255,.06) 48%, rgba(255,255,255,.03) 72%, var(--rim-acc));
}
/* Ear Candy's rim takes the colour of the day's pick */
html:not([data-theme="neoFrame"]) .snr-earcandy::after {
background: linear-gradient(145deg, rgba(255,255,255,.32), hsl(var(--ec-hue, 270) 85% 70% / .6) 18%, rgba(255,255,255,.06) 50%, hsl(var(--ec-hue, 270) 85% 60% / .25));
}
/* ── Lit seams on the app frame ─────────────────────────────────────── */
html:not([data-theme="neoFrame"]) .sidebar {
border-right: 0 !important;
border-image: none !important;
background-image:
linear-gradient(180deg, transparent 0%, var(--seam) 22%, rgba(255,255,255,.22) 50%, var(--seam-2) 80%, transparent 100%),
linear-gradient(180deg, transparent, rgba(255,255,255,.75), transparent) !important;
background-size: 1px 100%, 1px 160px !important;
background-position: 100% 0, 100% -40% !important;
background-repeat: no-repeat !important;
box-shadow: 1px 0 0 rgba(0,0,0,.35), 10px 0 34px -14px var(--edge-glow), 6px 0 32px rgba(0,0,0,.28) !important;
}
html:not([data-theme="neoFrame"]) .main-header {
border-bottom: 0 !important;
border-image: none !important;
background-image:
linear-gradient(90deg, transparent 0%, var(--seam) 18%, rgba(255,255,255,.2) 50%, var(--seam-2) 82%, transparent 100%),
linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent) !important;
background-size: 100% 1px, 220px 1px !important;
background-position: 0 100%, -40% 100% !important;
background-repeat: no-repeat !important;
box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 30px -18px var(--edge-glow), 0 10px 36px rgba(0,0,0,.2) !important;
}
/* player bar: its top seam glows with the beat */
html:not([data-theme="neoFrame"]) .player-bar {
border-top-color: transparent !important;
background-image: linear-gradient(90deg, transparent 0%, var(--seam) 20%, rgba(255,255,255,.26) 50%, var(--seam-2) 80%, transparent 100%) !important;
background-size: 100% 1px !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
box-shadow:
0 -1px 0 rgba(0,0,0,.35),
0 -10px calc(26px + var(--beat, 0) * 34px) -12px color-mix(in srgb, var(--purple) calc(30% + var(--beat, 0) * 55%), transparent),
0 -16px 56px rgba(0,0,0,.55) !important;
}
/* a soft light glides along the seams while music plays */
@keyframes seam-glide-y { from { background-position: 100% 0, 100% -40%; } to { background-position: 100% 0, 100% 140%; } }
@keyframes seam-glide-x { from { background-position: 0 100%, -40% 100%; } to { background-position: 0 100%, 140% 100%; } }
html:not([data-theme="neoFrame"]) body.snr-playing .sidebar { animation: seam-glide-y 7s cubic-bezier(.45,0,.55,1) infinite; }
html:not([data-theme="neoFrame"]) body.snr-playing .main-header { animation: seam-glide-x 9s cubic-bezier(.45,0,.55,1) infinite; }
/* paused: only the seam, no gliding light */
html:not([data-theme="neoFrame"]) body:not(.snr-playing) .sidebar { background-size: 1px 100%, 0 0 !important; }
html:not([data-theme="neoFrame"]) body:not(.snr-playing) .main-header { background-size: 100% 1px, 0 0 !important; }
/* queue drawer: lit seam on its open edge */
html:not([data-theme="neoFrame"]) .queue-panel {
border-left-color: transparent !important;
box-shadow: inset 1px 0 0 color-mix(in srgb, var(--purple-light) 30%, transparent), -24px 0 60px rgba(0,0,0,.55), -8px 0 30px -12px var(--edge-glow) !important;
}
/* phones: the floating player card gets the rim treatment instead of a seam */
@media (max-width: 768px) {
html:not([data-theme="neoFrame"]) .player-bar {
background-size: 70% 1px !important;
background-position: 50% 0 !important;
}
html:not([data-theme="neoFrame"]) .mobile-tab-bar::before {
background: linear-gradient(90deg, transparent, var(--seam) 25%, rgba(255,255,255,.22) 50%, var(--seam-2) 75%, transparent) !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body.snr-playing :is(.sidebar, .main-header) { animation: none !important; }
}
/* side panels and pop-ups float on the same glow as the big panels */
html:not([data-theme="neoFrame"]) :is(.landing-hype-panel, #playerSettingsPopover .player-settings-panel, #snrNotifPopover) {
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -30px rgba(0,0,0,.9), 0 18px 46px -34px var(--edge-glow) !important;
}
/* footer: the support strip and the bottom divider become seams */
html:not([data-theme="neoFrame"]) .snr-footer-support-strip {
border-top-color: transparent !important; border-bottom-color: transparent !important;
background-image:
linear-gradient(90deg, transparent, var(--seam) 25%, rgba(255,255,255,.18) 50%, var(--seam-2) 75%, transparent),
linear-gradient(90deg, transparent, color-mix(in srgb, var(--purple-light) 30%, transparent) 30%, color-mix(in srgb, var(--snr-cyan) 25%, transparent) 70%, transparent) !important;
background-size: 100% 1px, 100% 1px !important;
background-position: 0 0, 0 100% !important;
background-repeat: no-repeat !important;
}
html:not([data-theme="neoFrame"]) .sonara-footer-bottom {
border-top: 1px solid transparent !important;
border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--purple-light) 40%, transparent) 30%, rgba(255,255,255,.12) 50%, color-mix(in srgb, var(--snr-cyan) 35%, transparent) 70%, transparent) 1 !important;
}
/* ═══════════════════════════════════════════════════════════
PASS 20 · Street Art
Theme "Street Art" (spray pink / cyan / yellow on charcoal) and
two walls usable with any theme: "Graffiti wall" (painted brick)
and "Subway tiles" (NYC station tiles + mosaic band). The art is
original vector work in art/ (regenerate: art/make-street-art.py).
Street Art brings the graffiti wall unless another background is
picked.
═══════════════════════════════════════════════════════════ */
html[data-theme="streetArt"] {
--bg-dark: #0e0c0f;
--bg-panel: rgba(17, 14, 18, .9);
--bg-card: rgba(22, 18, 24, .84);
--blue: #00e0ff;
--border: rgba(255, 255, 255, .1);
--text: #f7f2ea;
--text-muted: #b8afa5;
--spray-yellow: #ffd23f;
}
html[data-theme="streetArt"]:not([data-accent]) {
--purple: #ff2e88;
--purple-glow: rgba(255, 46, 136, .5);
--purple-light: #ff8fc7;
--icon-tint-filter: brightness(0) saturate(100%) invert(.5) sepia(.9) saturate(8) hue-rotate(295deg);
}
/* ── the walls ─────────────────────────────────────────────────────── */
html:is([data-background="graffiti"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) .bg-waves {
background:
url("art/street-art-b.svg") 0 0 / 1400px auto,
url("art/street-art-a.svg") 430px 280px / 900px auto,
url("art/street-bricks.svg") 0 0 / 240px auto,
#151214 !important;
}
html[data-background="subway"] .bg-waves {
background:
url("art/street-art-a.svg") 140px 60px / 900px auto,
url("art/subway-band.svg") 0 24vh / auto 117px repeat-x,
url("art/subway-tiles.svg") 0 0 / 160px auto,
#0c0f10 !important;
}
/* night-street mood over the paint: a sodium lamp top-left, a neon spill
bottom-right, and enough shade that the UI reads cleanly on top */
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) .bg-waves::before {
opacity: 1 !important;
background:
radial-gradient(ellipse 55% 45% at 8% -4%, rgba(255, 176, 90, .2), transparent 62%),
radial-gradient(ellipse 50% 40% at 96% 104%, color-mix(in srgb, var(--purple) 22%, transparent), transparent 62%),
linear-gradient(180deg, rgba(8, 6, 10, .46), rgba(8, 6, 10, .6) 45%, rgba(6, 5, 8, .74)),
radial-gradient(ellipse 110% 85% at 50% 40%, transparent 45%, rgba(4, 3, 6, .62)) !important;
}
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) .bg-waves::after { opacity: .07 !important; }
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) .bg-orb { display: none !important; }
/* dark mode keeps the wall, just deeper in the shadows */
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) body.snr-dark .bg-waves { opacity: .55 !important; }
/* panels sit on the wall like frosted glass, so text never fights the paint */
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background])))
:is(.glass, .track-card, .snr-landscape-card, .spotlight-card,
.arc-panel, .landing-hype-panel, .snr-earcandy, .soundscape-container) {
background-color: color-mix(in srgb, var(--bg-dark) 80%, transparent) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
}
/* headings that sit straight on the wall get a soft shadow to lift them off it */
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background])))
:is(.section-title, .sonara-hero-title, .sonara-hero-subtitle, .snr-section-title) {
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .85));
}
/* ── Street Art theme: lettering, spray strokes, stickers ───────────── */
html[data-theme="streetArt"] .section-title {
font-family: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
background: linear-gradient(180deg, #ffffff 35%, #ffe9a8) !important;
-webkit-background-clip: text !important; background-clip: text !important;
rotate: -1.2deg;
transform-origin: left center;
padding-bottom: .8rem;
}
/* the accent bar becomes a spray stroke with drips */
html[data-theme="streetArt"] .section-title::after {
width: 130px; height: 26px; bottom: -12px; border-radius: 0;
box-shadow: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 26'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23ff2e88'/%3E%3Cstop offset='.6' stop-color='%23ffd23f'/%3E%3Cstop offset='1' stop-color='%2300e0ff'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M3 7C30 3 70 9 127 5' stroke='url(%23g)' stroke-width='8' stroke-linecap='round' fill='none' filter='url(%23b)' opacity='.55'/%3E%3Cpath d='M3 7C30 3 70 9 127 5' stroke='url(%23g)' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cg fill='%23ff2e88'%3E%3Crect x='18' y='6' width='3' height='12' rx='1.5'/%3E%3Ccircle cx='19.5' cy='18' r='2.4'/%3E%3C/g%3E%3Cg fill='%23ffb03a'%3E%3Crect x='64' y='6' width='2.6' height='8' rx='1.3'/%3E%3Ccircle cx='65.3' cy='14' r='2'/%3E%3C/g%3E%3Cg fill='%23ffd23f'%3E%3Crect x='96' y='5' width='3' height='15' rx='1.5'/%3E%3Ccircle cx='97.5' cy='20' r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat left top / contain !important;
}
html[data-theme="streetArt"] [style*="text-align:center"] > .section-title,
html[data-theme="streetArt"] .text-center .section-title { rotate: 0deg; }
/* hero: wet-paint letters */
html[data-theme="streetArt"] .sonara-hero-title {
font-family: 'Rubik Wet Paint', 'Permanent Marker', cursive !important;
font-weight: 400 !important;
letter-spacing: .005em !important;
}
html[data-theme="streetArt"] .snr-section-title,
html[data-theme="streetArt"] .arc-title,
html[data-theme="streetArt"] .snr-ec-title {
font-family: 'Permanent Marker', 'Marker Felt', cursive !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
}
/* spray-can buttons */
html[data-theme="streetArt"]:not([data-accent]) :is(.btn-primary, .upload-submit-btn, .arc-btn.ap-playall) {
background: linear-gradient(135deg, #ff2e88, #ff7a2e) !important;
box-shadow: 0 10px 26px -12px rgba(255, 46, 136, .9), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
/* cards behave like stickers slapped on the wall: a little tilt on hover */
html[data-theme="streetArt"] :is(.track-card, .snr-landscape-card, .snr-mix, .snr-artist):hover { rotate: -.8deg; }
html[data-theme="streetArt"] :is(.track-card, .snr-landscape-card, .snr-mix, .snr-artist) { transition: rotate .25s cubic-bezier(.34, 1.56, .64, 1), transform .25s, box-shadow .25s; }
/* the frame seams get the full spray palette */
html[data-theme="streetArt"] { --seam: color-mix(in srgb, #ff2e88 80%, transparent); --seam-2: color-mix(in srgb, #ffd23f 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
html[data-theme="streetArt"] :is(.track-card, .snr-landscape-card, .snr-mix, .snr-artist):hover { rotate: none; }
}
html[data-theme="streetArt"] .sonara-hero-title :is(#heroTypewriter, span) {
font-family: 'Rubik Wet Paint', 'Permanent Marker', cursive !important;
font-weight: 400 !important;
letter-spacing: .005em !important;
}
/* a pool of shade behind the hero copy: the paint stays loud around it, quiet under the words */
html:is([data-background="graffiti"], [data-background="subway"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) .sonara-hero {
background-image: radial-gradient(ellipse 75% 85% at 28% 50%, rgba(8, 6, 10, .78) 0%, rgba(8, 6, 10, .5) 45%, transparent 75%) !important;
}
/* phones: paint the wall smaller so whole pieces fit on screen */
@media (max-width: 768px) {
html:is([data-background="graffiti"], [data-theme="streetArt"]:is([data-background="waves"], :not([data-background]))) .bg-waves {
background:
url("art/street-art-b.svg") -40px 40px / 820px auto,
url("art/street-art-a.svg") 160px 330px / 560px auto,
url("art/street-bricks.svg") 0 0 / 170px auto,
#151214 !important;
}
html[data-background="subway"] .bg-waves {
background:
url("art/street-art-a.svg") 40px 60px / 560px auto,
url("art/subway-band.svg") 0 22vh / auto 84px repeat-x,
url("art/subway-tiles.svg") 0 0 / 120px auto,
#0c0f10 !important;
}
}
/* ═══════════════════════════════════════════════════════════
PASS 21 · Song cards, streaming-app style
Like Spotify / Apple Music / SoundCloud: a clean square cover, the
title and artist underneath, and nothing else until you ask for it.
The play button slides onto the cover on hover; a small ⋯ next to the
text opens everything else (queue, share, support the artist, not for
me, playlists, owner tools). The heart shows on hover, or stays when
the song is liked. Genre tags, plays and dates live on the track page.
═══════════════════════════════════════════════════════════ */
.track-card {
display: flex !important;
flex-direction: column;
padding: 10px 10px 12px !important;
border: 0 !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, .035) !important;
box-shadow: none !important;
transition: background .25s ease, transform .25s ease !important;
}
.track-card::after { display: none !important; } /* no rim: the cover is the frame */
.track-card:hover {
background: rgba(255, 255, 255, .075) !important;
transform: none !important;
box-shadow: none !important;
}
/* cover */
.track-card > .track-card-image {
aspect-ratio: 1 !important;
border-radius: 9px !important;
overflow: hidden;
box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .75);
}
.track-card > .track-card-image::after { display: none !important; }
.track-card:hover > .track-card-image img { transform: scale(1.03); filter: none; }
/* play button: bottom-right of the cover, rises in on hover (always there on touch screens) */
.track-card > .track-card-image .track-card-play {
top: auto !important; bottom: .55rem !important; right: .55rem !important;
width: 46px !important; height: 46px !important;
font-size: 1.1rem !important;
opacity: 0;
transform: translateY(10px);
box-shadow: 0 8px 18px rgba(0, 0, 0, .5) !important;
transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.track-card:hover > .track-card-image .track-card-play,
.track-card:focus-within > .track-card-image .track-card-play { opacity: 1; transform: none; }
.track-card > .track-card-image .track-card-play:hover { transform: scale(1.06) !important; }
@media (hover: none) {
.track-card > .track-card-image .track-card-play { opacity: 1; transform: none; width: 40px !important; height: 40px !important; }
}
.track-card > .track-card-image .track-card-private-badge { right: auto !important; left: .5rem !important; top: .5rem !important; }
.track-card > .track-card-image .snr-eq { left: .55rem; right: auto; top: .55rem; bottom: auto; }
/* text under the cover */
.track-card > .track-card-info {
position: relative;
padding: .7rem 2.6rem 0 .15rem !important;
background: none !important;
flex: none !important;
}
.track-card > .track-card-info .track-card-title {
display: block; max-width: 100%;
font-size: .95rem !important; font-weight: 700 !important;
letter-spacing: -.01em;
color: var(--text) !important;
margin: 0 0 .2rem !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track-card > .track-card-info .track-card-artist { margin: 0 !important; gap: 0 !important; min-width: 0; }
.track-card > .track-card-info .track-card-artist-avatar { display: none !important; }
.track-card > .track-card-info .track-card-artist-link {
font-size: .84rem !important; font-weight: 500 !important;
color: var(--text-muted) !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.track-card > .track-card-info .track-card-artist-link:hover { color: var(--text) !important; text-decoration: underline; text-underline-offset: 2px; }
/* everything else is one tap away in ⋯ (or on the track page) */
.track-card > .track-card-info :is(.track-card-genre-pills, .track-card-meta, .track-card-subtitle, .track-card-forsale-badge, .track-card-buy-btn) { display: none !important; }
.track-card > .track-card-info .track-card-actions {
position: absolute; right: -.15rem; top: .62rem;
display: flex !important; flex-direction: column; align-items: center; gap: 0 !important;
margin: 0 !important; padding: 0 !important;
}
.track-card > .track-card-info .track-card-actions > :is(.btn-dislike, .btn-add-queue, .btn-share) { display: none !important; }
.track-card > .track-card-info .track-card-more-wrap { margin: 0 !important; order: 1; }
.track-card > .track-card-info .btn-more {
width: 30px; height: 26px; padding: 0 !important;
display: grid; place-items: center;
border: 0 !important; background: transparent !important;
color: var(--text-muted) !important; font-size: 1.15rem !important; line-height: 1;
border-radius: 8px;
opacity: .75;
transition: opacity .2s, background .2s, color .2s;
}
.track-card:hover > .track-card-info .btn-more { opacity: 1; }
.track-card > .track-card-info .btn-more:hover { background: rgba(255, 255, 255, .1) !important; color: var(--text) !important; }
/* heart: hidden until hover, stays visible once liked */
.track-card > .track-card-info .btn-like {
order: 2;
width: 30px; height: 24px; padding: 0 !important;
border: 0 !important; background: transparent !important;
opacity: 0; transition: opacity .2s, transform .2s;
}
.track-card:hover > .track-card-info .btn-like,
.track-card > .track-card-info .btn-like.liked,
.track-card > .track-card-info .btn-like:focus-visible { opacity: 1; }
@media (hover: none) { .track-card > .track-card-info .btn-like:not(.liked) { visibility: hidden; } }
/* the playing song: title in the accent, like the streaming apps */
.track-card.snr-now-playing > .track-card-info .track-card-title { color: var(--purple-light) !important; }
/* third line: main genre · length, small and quiet */
.track-card > .track-card-info .track-card-subline {
display: flex; align-items: center; gap: .32rem;
margin-top: .32rem; min-width: 0;
font-size: .68rem; line-height: 1.2; color: color-mix(in srgb, var(--text-muted) 85%, transparent);
white-space: nowrap; overflow: hidden;
}
.track-card-subline .tc-genre {
font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: color-mix(in srgb, var(--purple-light) 75%, var(--text-muted));
overflow: hidden; text-overflow: ellipsis;
}
.track-card-subline .tc-dur { font-variant-numeric: tabular-nums; letter-spacing: .02em; flex: none; }
.track-card-subline .tc-dot { opacity: .6; flex: none; }
/* the 💸 tip icon: bottom of the right-hand column, level with the genre line */
.track-card > .track-card-info .btn-tip {
order: 3;
width: 30px; height: 26px; padding: 0 !important; margin: 0 !important;
display: grid !important; place-items: center;
border: 0 !important; border-radius: 8px;
background: transparent !important; box-shadow: none !important;
opacity: .85; transition: opacity .2s, background .2s, transform .2s;
}
.track-card > .track-card-info .btn-tip .btn-gradient-text { display: none !important; }
.track-card > .track-card-info .btn-tip .btn-tip-icon { font-size: 1rem; line-height: 1; filter: saturate(1.1); }
.track-card > .track-card-info .btn-tip:hover { opacity: 1; background: rgba(255, 255, 255, .1) !important; transform: scale(1.08); }
/* the right column now holds ⋯ / heart / 💸, so give the text a touch more room below */
.track-card > .track-card-info { min-height: 5.4rem; }
/* ═══════════════════════════════════════════════════════════
PASS 22 · Lyric Spotlight: an editorial pull-quote
No box, no blur, no glow. A slim accent rule, a small quote mark and
the lyric set large in serif italic on the card's quiet surface, so
the words carry it instead of the effects. The card's pulsing ring,
scanning line and cyan halo are retired too.
═══════════════════════════════════════════════════════════ */
.spotlight-card .spotlight-glow-ring,
.spotlight-card .spotlight-scan-line { display: none !important; }
html:not([data-theme="neoFrame"]) .spotlight-card,
html:not([data-theme="neoFrame"]) .spotlight-card:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 46px -32px rgba(0, 0, 0, .9) !important;
}
.spotlight-lyric-box {
position: relative;
flex-direction: column;
align-items: flex-start !important;
gap: .35rem !important;
min-height: 0;
margin: .6rem 0 1.5rem !important;
padding: .2rem 0 .25rem 1.4rem !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
.spotlight-card:hover .spotlight-lyric-box { border-color: transparent !important; box-shadow: none !important; }
/* the pull-quote rule */
.spotlight-lyric-box::before {
content: "";
position: absolute; left: 0; top: .35rem; bottom: .35rem;
width: 2px; border-radius: 2px;
background: linear-gradient(180deg, var(--purple-light), color-mix(in srgb, var(--snr-cyan) 60%, transparent));
}
.spotlight-lyric-box .spotlight-quote-open {
margin: 0 !important;
font-size: 0 !important; line-height: 0;
height: 1.1rem;
}
.spotlight-lyric-box .spotlight-quote-open::before {
content: "\201C";
display: block;
font: 400 2.6rem/1 'Playfair Display', Georgia, serif;
color: var(--purple-light);
opacity: .85;
transform: translateY(-.15rem);
}
.spotlight-lyric-box .spotlight-quote-close { display: none !important; }
.spotlight-lyric-box .spotlight-lyric {
max-width: 32ch;
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(1.45rem, 1.1rem + 1.15vw, 2.05rem) !important;
line-height: 1.26 !important;
letter-spacing: -.012em !important;
color: color-mix(in srgb, var(--text) 94%, transparent) !important;
text-shadow: none !important;
text-wrap: balance;
}
@media (max-width: 600px) {
.spotlight-lyric-box { padding-left: 1.1rem !important; margin-bottom: 1.2rem !important; }
}
/* ═══ PASS 23 · Header sign-in buttons ═══════════════════════════════
Sign in: a quiet text button. Sign up: the header's single call to
action, a light pill with dark type that lifts on hover. */
#headerAuthEntry:not(.hidden) { gap: .3rem !important; }
.main-header .auth-entry-btn {
height: 38px;
justify-content: center;
padding: 0 1.05rem !important;
border-radius: 999px !important;
font-size: .9rem !important;
font-weight: 600 !important;
letter-spacing: .005em;
transition: color .2s, background .2s, transform .15s, box-shadow .2s !important;
}
.main-header .auth-entry-btn:not(.auth-entry-btn-primary) {
border: 0 !important;
background: transparent !important;
color: color-mix(in srgb, var(--text) 82%, transparent) !important;
}
.main-header .auth-entry-btn:not(.auth-entry-btn-primary):hover {
color: var(--text) !important;
background: rgba(255, 255, 255, .07) !important;
}
.main-header .auth-entry-btn.auth-entry-btn-primary {
border: 0 !important;
background: color-mix(in srgb, var(--purple-light) 10%, #ffffff) !important;
color: #14091f !important;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 6px 18px -8px rgba(0, 0, 0, .7) !important;
}
.main-header .auth-entry-btn.auth-entry-btn-primary:hover {
background: #ffffff !important;
transform: scale(1.04);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 8px 22px -8px rgba(0, 0, 0, .75),
0 0 0 4px color-mix(in srgb, var(--purple-light) 22%, transparent) !important;
}
.main-header .auth-entry-btn.auth-entry-btn-primary:active { transform: scale(.98); }
.main-header .auth-entry-btn:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════
PASS 24 · Studio — Sonara's default look
A grown-up streaming-app design language: graphite near-black,
neutral surfaces, Apple-style off-white type and ONE refined violet
used only where it means something (play, progress, the active item,
focus). No glow blobs, neon halos, gradient text or animated seams:
calm solid panels with hairline edges, white chips and primary
buttons, a silver S. Other themes stay in Settings → Appearance.
═══════════════════════════════════════════════════════════ */
html[data-theme="studio"] {
--bg-dark: #0a0a0b;
--bg-panel: #121214;
--bg-card: #161618;
--text: #f5f5f7;
--text-muted: #9a9aa3;
--border: rgba(255, 255, 255, .08);
--blue: #b3a8ff;
--snr-deep: #1c1c1f;
--snr-deep-hi: #26262a;
--snr-deeper: #0e0e10;
--surface-1: #121214;
--surface-2: #18181b;
--surface-3: #202024;
/* edges: neutral hairlines, no accent glow */
--ln: rgba(255, 255, 255, .075);
--ln-soft: rgba(255, 255, 255, .05);
--ln-hi: rgba(255, 255, 255, .06);
--seam: rgba(255, 255, 255, .09);
--seam-2: rgba(255, 255, 255, .09);
--edge-glow: transparent;
--rim-hi: rgba(255, 255, 255, .09);
--rim-acc: rgba(255, 255, 255, .05);
--rim-2: rgba(255, 255, 255, .03);
--rim: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
--rim-hover: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06));
}
html[data-theme="studio"]:not([data-accent]) {
--purple: #7c6cff;
--purple-light: #a99cff;
--purple-glow: rgba(124, 108, 255, .22);
--icon-tint-filter: brightness(0) invert(.88);
--logo-p: #bfc0c8;
--logo-l: #ffffff;
}
/* ── canvas: flat graphite with the faintest light from above ───────── */
html[data-theme="studio"] body { background: #0a0a0b !important; }
html[data-theme="studio"]:is([data-background="waves"], :not([data-background])) .bg-waves { background: #0a0a0b !important; }
html[data-theme="studio"]:is([data-background="waves"], :not([data-background])) .bg-waves::before {
opacity: 1 !important;
background:
radial-gradient(90% 55% at 50% -14%, rgba(255, 255, 255, .045), transparent 62%),
radial-gradient(55% 45% at 0% 0%, color-mix(in srgb, var(--purple) 6%, transparent), transparent 62%) !important;
}
html[data-theme="studio"] .bg-waves::after { opacity: .018 !important; }
html[data-theme="studio"] .bg-orb { display: none !important; }
/* ── frame ───────────────────────────────────────────────────────────── */
html[data-theme="studio"] .sidebar {
background-color: #050506 !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
background-size: 1px 100%, 0 0 !important;
box-shadow: none !important;
}
html[data-theme="studio"] .main-header {
background-color: rgba(10, 10, 11, .86) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.05) !important; backdrop-filter: blur(18px) saturate(1.05) !important;
background-size: 100% 1px, 0 0 !important;
box-shadow: none !important;
}
html[data-theme="studio"] body.snr-playing :is(.sidebar, .main-header) { animation: none !important; }
html[data-theme="studio"] .player-bar {
background-color: rgba(14, 14, 16, .95) !important;
-webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .4), 0 -18px 40px rgba(0, 0, 0, .45) !important;
}
@media (max-width: 768px) {
html[data-theme="studio"] .mobile-tab-bar { background: rgba(8, 8, 9, .96) !important; }
html[data-theme="studio"] .mobile-tab-bar::before { background: rgba(255, 255, 255, .08) !important; }
html[data-theme="studio"] .mobile-tab-bar .nav-item { color: #8e8e95 !important; }
html[data-theme="studio"] .mobile-tab-bar .nav-item.active { color: #fff !important; }
html[data-theme="studio"] .mobile-tab-bar .nav-item.active .mobile-tab-icon { background: rgba(255, 255, 255, .1) !important; box-shadow: none !important; }
html[data-theme="studio"] .mobile-tab-bar .nav-item.active::before { background: #fff !important; box-shadow: none !important; }
}
/* ── navigation: grey highlight, white type, no purple blocks ───────── */
html[data-theme="studio"] .sidebar .nav-item { color: #a1a1a8; }
html[data-theme="studio"] .sidebar .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .05) !important; }
html[data-theme="studio"] .nav-item.active {
background: rgba(255, 255, 255, .08) !important;
color: #fff !important;
box-shadow: none !important;
}
html[data-theme="studio"] .futurist-icon-tile {
background: rgba(255, 255, 255, .04) !important;
border-color: rgba(255, 255, 255, .07) !important;
box-shadow: none !important;
}
html[data-theme="studio"] .futurist-icon-tile svg { color: #c4c4ca !important; filter: none !important; }
html[data-theme="studio"] .nav-item.active .futurist-icon-tile { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .16) !important; }
html[data-theme="studio"] .nav-item.active .futurist-icon-tile svg { color: #fff !important; }
/* ── type: plain white headings, quiet labels ───────────────────────── */
html[data-theme="studio"] .section-title {
background: none !important;
color: #f5f5f7 !important;
-webkit-text-fill-color: currentColor;
letter-spacing: -.028em !important;
padding-bottom: 0 !important;
margin-bottom: .9rem !important;
}
html[data-theme="studio"] .section-title::after { display: none !important; }
html[data-theme="studio"] .sonara-hero-typewriter { background: none !important; -webkit-text-fill-color: #f5f5f7 !important; color: #f5f5f7 !important; }
html[data-theme="studio"] .sonara-hero-cursor { color: var(--purple-light) !important; text-shadow: none !important; }
html[data-theme="studio"] .sonara-hero-label { color: #8e8e95 !important; text-shadow: none !important; }
/* ── surfaces: calm solid panels ────────────────────────────────────── */
html[data-theme="studio"] :is(.glass, .spotlight-card, .arc-panel, .landing-hype-panel,
.monetize-status-banner, .modal.glass, #playerSettingsPopover .player-settings-panel, #snrNotifPopover, .queue-panel) {
background-color: #141416 !important;
background-image: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-theme="studio"] .player-bar.glass { background-color: rgba(14, 14, 16, .95) !important; }
html[data-theme="studio"] :is(.soundscape-container) { background-color: #121214 !important; }
html[data-theme="studio"] :is(.snr-landscape-card) { background: #18181b !important; }
html[data-theme="studio"] :is(.snr-landscape-card):hover { background: #1e1e22 !important; }
html[data-theme="studio"] .track-card { background: rgba(255, 255, 255, .028) !important; }
html[data-theme="studio"] .track-card:hover { background: rgba(255, 255, 255, .065) !important; }
html[data-theme="studio"] :is(.spotlight-card, .arc-panel, .modal.glass, .landing-hype-panel) {
box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 24px 48px -32px rgba(0, 0, 0, .9) !important;
}
/* ── chips & buttons: white when it matters ─────────────────────────── */
html[data-theme="studio"] :is(.mood-pill, .genre-filter, .genre-chip, .ls-chip) {
background: rgba(255, 255, 255, .07) !important;
border-color: transparent !important;
color: #e4e4e7 !important;
box-shadow: none !important;
}
html[data-theme="studio"] :is(.mood-pill, .genre-filter, .genre-chip):hover { background: rgba(255, 255, 255, .12) !important; }
html[data-theme="studio"] :is(.mood-pill.active, .genre-filter.active, .genre-chip.selected) {
--on-accent: #0a0a0b;
background: #f5f5f7 !important;
color: #0a0a0b !important;
}
html[data-theme="studio"] :is(.btn-primary, .upload-submit-btn, .arc-btn.ap-playall, .usp-btn--primary, .ls-tab.is-on) {
--on-accent: #0a0a0b;
background: #f5f5f7 !important;
color: #0a0a0b !important;
box-shadow: none !important;
}
html[data-theme="studio"] :is(.btn-primary, .upload-submit-btn, .arc-btn.ap-playall, .usp-btn--primary):hover { background: #ffffff !important; }
/* play buttons keep the one accent, without halos */
html[data-theme="studio"] :is(.track-card-play, .spotlight-play-btn, .ap-play, .snr-mix-play) {
box-shadow: 0 8px 18px rgba(0, 0, 0, .45) !important;
}
html[data-theme="studio"] .snr-like-btn { --heart-on-a: #ff5c8a; --heart-on-b: #ff5c8a; }
/* ── colourful blocks, toned down so covers stay the colour on the page ─ */
html[data-theme="studio"] .snr-earcandy { box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9) !important; }
html[data-theme="studio"] .js-bulbs { filter: saturate(.45); }
html[data-theme="studio"] .section-badge,
html[data-theme="studio"] .snr-section-badge { background: rgba(255, 255, 255, .07) !important; color: #c4c4ca !important; border-color: transparent !important; }
/* ── Studio clean-up: everything that still shouted colour ─────────── */
/* brand + page titles: plain type */
html[data-theme="studio"] :is(.logo-text, .logo-tagline, .search-section-title, .browse-section-title, .earn-section-title, .monetize-earnings-amount,
.snr-section-title, .community-title, .library-title, .acad-hero-title) {
background: none !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: none !important;
}
html[data-theme="studio"] :is(.logo-text, .search-section-title, .browse-section-title, .earn-section-title, .monetize-earnings-amount) { color: #f5f5f7 !important; }
html[data-theme="studio"] .logo-tagline { color: #8e8e95 !important; }
html[data-theme="studio"] .logo-icon { border-color: rgba(255, 255, 255, .12) !important; box-shadow: none !important; }
html[data-theme="studio"] .player-btn-play { border-color: rgba(255, 255, 255, .14) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .5) !important; }
/* secondary text: grey, not tinted */
html[data-theme="studio"] :is(.spotlight-artist-name, .landing-side-title, .snr-filter-label, .arc-eyebrow, .snr-ec-eyebrow,
.sonara-footer h4, .sonara-footer-support-link, .mozai-edge-arrow-btn, .tier-unlock-hint, .acad-hero-badge, .landing-hype-panel strong) {
color: #9a9aa3 !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: none !important;
}
html[data-theme="studio"] .landing-hype-panel strong { color: #e4e4e7 !important; }
html[data-theme="studio"] .track-card-subline .tc-genre { color: #8e8e95 !important; }
html[data-theme="studio"] :is(.snr-pc-num, .snr-pc-play-icon) { color: #e4e4e7 !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
/* tags & badges: neutral chips */
html[data-theme="studio"] :is(.snr-lc-tag, .snr-lc-match, .snr-ec-tag, .snr-ec-tags span, .track-card-genre-pill) {
background: rgba(255, 255, 255, .08) !important;
border-color: transparent !important;
color: #d4d4d8 !important;
box-shadow: none !important;
}
html[data-theme="studio"] .snr-ec-dot { background: var(--purple-light) !important; box-shadow: none !important; animation: none !important; }
/* tabs & segmented controls: white for the selected one */
html[data-theme="studio"] :is(.snr-genre-pill, .search-filter-btn, .library-tab, .acad-tab) { box-shadow: none !important; }
html[data-theme="studio"] :is(.snr-genre-pill.active, .search-filter-btn.active, .library-tab.active, .acad-tab.active) {
background: #f5f5f7 !important;
border-color: transparent !important;
color: #0a0a0b !important;
-webkit-text-fill-color: #0a0a0b !important;
}
html[data-theme="studio"] .spotlight-dot.active { background: #f5f5f7 !important; box-shadow: none !important; }
/* action buttons: white primary, hairline secondary */
html[data-theme="studio"] :is(.snr-ec-play, .arc-btn.js-spin, #footerNewsletterBtn, .community-chat-send-btn) {
background: #f5f5f7 !important;
color: #0a0a0b !important;
border-color: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
html[data-theme="studio"] :is(.snr-ec-play, .arc-btn.js-spin) svg,
html[data-theme="studio"] .snr-ec-play span { color: #0a0a0b !important; fill: currentColor; }
html[data-theme="studio"] .monetize-action-btn { border-color: rgba(255, 255, 255, .14) !important; box-shadow: none !important; }
html[data-theme="studio"] .side-panel-icon { border-color: rgba(255, 255, 255, .1) !important; box-shadow: none !important; background: rgba(255, 255, 255, .05) !important; }
html[data-theme="studio"] .sonara-footer a:not(.sonara-footer-support-link) { border-color: rgba(255, 255, 255, .12) !important; }
html[data-theme="studio"] .snr-footer-support-strip { background-image: none !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; }
/* playful accents (collectibles, jukebox) go quiet */
html[data-theme="studio"] .js-machine { box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .9) !important; }
html[data-theme="studio"] body .player-btn-play { border-color: rgba(255, 255, 255, .14) !important; }
html[data-theme="studio"] :is(.side-eq-bars span) { background: rgba(255, 255, 255, .55) !important; box-shadow: none !important; }
html[data-theme="studio"] :is(.js-labels span, .soundscape-sub, .sonara-footer-newsletter label, .sonara-footer-support-note span,
#footerTosLink, #footerCreatorLink, .snr-legal-footer a, .sonara-footer a) {
color: #8e8e95 !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
html[data-theme="studio"] .sonara-footer a:hover { color: #f5f5f7 !important; }
html[data-theme="studio"] .sonara-footer-logo span { background: none !important; -webkit-text-fill-color: #f5f5f7 !important; color: #f5f5f7 !important; }
html[data-theme="studio"] .snr-footer-support-heading span { background: var(--purple-light) !important; box-shadow: none !important; }
/* icons: silver, not purple */
html[data-theme="studio"] :is(.snr-ic-accent, .snr-ic-accent-2) { stop-color: #f5f5f7 !important; }
html[data-theme="studio"] .snr-section-icon {
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .1) !important;
color: #e4e4e7 !important;
box-shadow: none !important;
}
html[data-theme="studio"] .snr-section-icon svg { color: #e4e4e7 !important; stroke: currentColor; }
/* scrollbars: quiet grey */
html[data-theme="studio"], html[data-theme="studio"] * { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
html[data-theme="studio"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16) !important; }
html[data-theme="studio"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26) !important; }
/* mixes & artists: covers carry the colour, chrome stays neutral */
html[data-theme="studio"] .snr-mix-play { background: #f5f5f7 !important; color: #0a0a0b !important; box-shadow: 0 8px 18px rgba(0, 0, 0, .5) !important; }
html[data-theme="studio"] .snr-mix-play svg { color: #0a0a0b !important; fill: currentColor; }
html[data-theme="studio"] .snr-mix-art { box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
html[data-theme="studio"] :is(.snr-mix:hover, .snr-mix:focus-visible) .snr-mix-art { box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }
html[data-theme="studio"] .snr-mix-kind { color: rgba(255, 255, 255, .7) !important; }
html[data-theme="studio"] .snr-artist-ring {
background: rgba(255, 255, 255, .16) !important;
box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .9) !important;
animation: none !important;
}
html[data-theme="studio"] .snr-artist:hover .snr-artist-ring {
background: linear-gradient(135deg, var(--purple-light), rgba(255, 255, 255, .5)) !important;
box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .95) !important;
}
/* ═══════════════════════════════════════════════════════════
PASS 25 · Studio, in colour
Studio kept its professional structure but lost its colour and
started to read as black-and-white. This pass gives it an ink
palette with a violet undertone, a soft ambient light behind the page
(violet, indigo and a touch of rose), violet gradient actions, tinted
selections, the full-colour S and a serif-italic tagline. The sidebar
is translucent ink now, so there's no black curtain down the side.
═══════════════════════════════════════════════════════════ */
html[data-theme="studio"] {
--bg-dark: #0b0a12;
--bg-panel: #13121b;
--bg-card: #171621;
--surface-1: #13121b;
--surface-2: #191823;
--surface-3: #211f2c;
--text: #f4f2fb;
--text-muted: #a5a1b8;
--border: rgba(200, 190, 255, .09);
--snr-deep: #1e1932;
--snr-deep-hi: #2b2446;
--snr-deeper: #0f0d1a;
--ln: rgba(200, 190, 255, .09);
--ln-soft: rgba(200, 190, 255, .06);
--rim: linear-gradient(160deg, rgba(220, 212, 255, .16), rgba(200, 190, 255, .05) 45%, rgba(200, 190, 255, .03));
--rim-hover: linear-gradient(160deg, rgba(220, 212, 255, .28), color-mix(in srgb, var(--purple) 30%, transparent) 55%, rgba(200, 190, 255, .06));
--seam: color-mix(in srgb, var(--purple-light) 30%, transparent);
--seam-2: color-mix(in srgb, var(--purple-light) 30%, transparent);
--studio-grad: linear-gradient(135deg, #8f80ff 0%, #6f5cf6 55%, #5b4fe0 100%);
}
html[data-theme="studio"]:not([data-accent]) {
--purple: #7c6cff;
--purple-light: #b0a6ff;
--purple-glow: rgba(124, 108, 255, .3);
--icon-tint-filter: brightness(0) saturate(100%) invert(.8) sepia(.25) saturate(3) hue-rotate(205deg);
}
/* ── canvas: ink with ambient light ─────────────────────────────────── */
html[data-theme="studio"] body { background: #0b0a12 !important; }
html[data-theme="studio"]:is([data-background="waves"], :not([data-background])) .bg-waves { background: #0b0a12 !important; }
html[data-theme="studio"]:is([data-background="waves"], :not([data-background])) .bg-waves::before {
inset: -10% !important;
background:
radial-gradient(46% 42% at 12% 6%, rgba(124, 108, 255, .3), transparent 70%),
radial-gradient(40% 36% at 90% 16%, rgba(84, 110, 255, .2), transparent 70%),
radial-gradient(42% 38% at 80% 94%, rgba(214, 92, 160, .15), transparent 70%),
radial-gradient(60% 50% at 40% 60%, rgba(124, 108, 255, .08), transparent 72%) !important;
animation: studio-drift 38s ease-in-out infinite alternate;
}
@keyframes studio-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.05); }
100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}
html[data-theme="studio"] .bg-waves::after { opacity: .025 !important; }
/* ── frame: translucent ink, no black curtain ───────────────────────── */
html[data-theme="studio"] .sidebar {
background-color: rgba(13, 12, 21, .62) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.2) !important; backdrop-filter: blur(22px) saturate(1.2) !important;
}
html[data-theme="studio"] .main-header { background-color: rgba(11, 10, 18, .7) !important; }
html[data-theme="studio"] .player-bar,
html[data-theme="studio"] .player-bar.glass { background-color: rgba(17, 15, 27, .88) !important; }
@media (max-width: 768px) {
html[data-theme="studio"] .mobile-tab-bar { background: rgba(12, 11, 19, .9) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
html[data-theme="studio"] .mobile-tab-bar .nav-item.active .mobile-tab-icon { background: color-mix(in srgb, var(--purple) 26%, transparent) !important; }
html[data-theme="studio"] .mobile-tab-bar .nav-item.active::before { background: var(--purple-light) !important; }
}
/* ── brand: full-colour S, refined wordmark and tagline ─────────────── */
html[data-theme="studio"] .logo-icon:has(img[src*="logo-s.svg"]) {
background: radial-gradient(circle at 32% 26%, #2b2446 0%, #120f20 72%) !important;
border-color: color-mix(in srgb, var(--purple-light) 28%, transparent) !important;
box-shadow: 0 6px 18px -8px rgba(124, 108, 255, .45) !important;
}
html[data-theme="studio"] .logo-text {
color: #f6f4ff !important;
font-weight: 700 !important;
letter-spacing: -.015em !important;
}
html[data-theme="studio"] .logo-tagline {
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: .86rem !important;
letter-spacing: .01em !important;
text-transform: none !important;
background: linear-gradient(90deg, #d9d3ff 0%, #b0a6ff 55%, #e6a8d0 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
filter: none !important;
opacity: .92;
}
/* ── navigation: violet wash for the current page ───────────────────── */
html[data-theme="studio"] .sidebar .nav-item { color: #b4b0c8; }
html[data-theme="studio"] .nav-item.active {
background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 30%, transparent), color-mix(in srgb, var(--purple) 8%, transparent)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple-light) 22%, transparent) !important;
color: #fff !important;
}
html[data-theme="studio"] .futurist-icon-tile { background: rgba(200, 190, 255, .05) !important; border-color: rgba(200, 190, 255, .09) !important; }
html[data-theme="studio"] .futurist-icon-tile svg { color: #d6d0f5 !important; }
html[data-theme="studio"] .nav-item.active .futurist-icon-tile {
background: color-mix(in srgb, var(--purple) 35%, transparent) !important;
border-color: color-mix(in srgb, var(--purple-light) 40%, transparent) !important;
}
html[data-theme="studio"] :is(.snr-ic-accent) { stop-color: var(--purple-light) !important; }
html[data-theme="studio"] :is(.snr-ic-accent-2) { stop-color: #d9d3ff !important; }
/* ── surfaces: ink panels with a lit edge ───────────────────────────── */
html[data-theme="studio"] :is(.glass, .spotlight-card, .arc-panel, .landing-hype-panel,
.monetize-status-banner, .modal.glass, #playerSettingsPopover .player-settings-panel, #snrNotifPopover, .queue-panel) {
background-color: rgba(21, 19, 31, .82) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.15) !important; backdrop-filter: blur(18px) saturate(1.15) !important;
}
html[data-theme="studio"] :is(.soundscape-container) { background-color: rgba(19, 17, 29, .85) !important; }
html[data-theme="studio"] :is(.snr-landscape-card) { background: rgba(28, 26, 40, .75) !important; }
html[data-theme="studio"] :is(.snr-landscape-card):hover { background: rgba(36, 33, 52, .85) !important; }
html[data-theme="studio"] .track-card { background: rgba(200, 190, 255, .035) !important; }
html[data-theme="studio"] .track-card:hover { background: rgba(200, 190, 255, .075) !important; }
/* ── actions: violet gradient, selections: violet tint ──────────────── */
html[data-theme="studio"] .main-header .auth-entry-btn.auth-entry-btn-primary {
background: var(--studio-grad) !important;
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px -10px rgba(111, 92, 246, .8) !important;
}
html[data-theme="studio"] .main-header .auth-entry-btn.auth-entry-btn-primary:hover {
background: var(--studio-grad) !important;
filter: brightness(1.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px -10px rgba(111, 92, 246, .95), 0 0 0 4px rgba(124, 108, 255, .2) !important;
}
html[data-theme="studio"] :is(.btn-primary, .upload-submit-btn, .arc-btn.ap-playall, .usp-btn--primary, .snr-ec-play, .arc-btn.js-spin, #footerNewsletterBtn, .community-chat-send-btn) {
--on-accent: #fff;
background: var(--studio-grad) !important;
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px -12px rgba(111, 92, 246, .8) !important;
}
html[data-theme="studio"] :is(.snr-ec-play, .arc-btn.js-spin) svg,
html[data-theme="studio"] .snr-ec-play span { color: #fff !important; }
html[data-theme="studio"] :is(.btn-primary, .upload-submit-btn, .arc-btn.ap-playall, .usp-btn--primary, .snr-ec-play, .arc-btn.js-spin):hover { filter: brightness(1.1); }
html[data-theme="studio"] :is(.mood-pill, .genre-filter, .genre-chip, .ls-chip, .snr-genre-pill, .search-filter-btn, .library-tab, .acad-tab) {
background: rgba(200, 190, 255, .07) !important;
color: #dcd8ee !important;
}
html[data-theme="studio"] :is(.mood-pill.active, .genre-filter.active, .genre-chip.selected, .snr-genre-pill.active, .search-filter-btn.active, .library-tab.active, .acad-tab.active, .ls-tab.is-on) {
--on-accent: #fff;
background: color-mix(in srgb, var(--purple) 34%, transparent) !important;
border-color: color-mix(in srgb, var(--purple-light) 45%, transparent) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
html[data-theme="studio"] .spotlight-dot.active { background: var(--purple-light) !important; }
html[data-theme="studio"] .snr-mix-play { background: var(--studio-grad) !important; color: #fff !important; }
html[data-theme="studio"] .snr-mix-play svg { color: #fff !important; }
/* ── colour accents that make it feel alive ─────────────────────────── */
html[data-theme="studio"] .snr-section-icon {
background: color-mix(in srgb, var(--purple) 16%, transparent) !important;
border-color: color-mix(in srgb, var(--purple-light) 26%, transparent) !important;
color: #d9d3ff !important;
}
html[data-theme="studio"] .snr-section-icon svg { color: #d9d3ff !important; }
html[data-theme="studio"] .track-card-subline .tc-genre { color: color-mix(in srgb, var(--purple-light) 85%, #fff) !important; }
html[data-theme="studio"] :is(.snr-lc-tag, .snr-ec-tag, .snr-ec-tags span, .track-card-genre-pill, .section-badge, .snr-section-badge) {
background: color-mix(in srgb, var(--purple) 14%, transparent) !important;
color: #d9d3ff !important;
}
html[data-theme="studio"] .snr-artist-ring {
background: linear-gradient(135deg, rgba(176, 166, 255, .65), rgba(124, 108, 255, .35) 50%, rgba(230, 168, 208, .5)) !important;
}
html[data-theme="studio"] .snr-artist:hover .snr-artist-ring { background: linear-gradient(135deg, #b0a6ff, #7c6cff 50%, #e6a8d0) !important; }
html[data-theme="studio"] :is(.landing-side-title, .snr-filter-label, .arc-eyebrow, .snr-ec-eyebrow) { color: color-mix(in srgb, var(--purple-light) 70%, #9a96ad) !important; }
html[data-theme="studio"] .sonara-hero-label { color: color-mix(in srgb, var(--purple-light) 75%, #9a96ad) !important; }
html[data-theme="studio"] .side-eq-bars span { background: color-mix(in srgb, var(--purple-light) 80%, transparent) !important; }
html[data-theme="studio"] ::-webkit-scrollbar-thumb { background: rgba(176, 166, 255, .22) !important; }
html[data-theme="studio"], html[data-theme="studio"] * { scrollbar-color: rgba(176, 166, 255, .22) transparent; }
@media (prefers-reduced-motion: reduce) {
html[data-theme="studio"] .bg-waves::before { animation: none !important; }
}
/* ═══ PASS 26 · Player disc icon + tagline gradient ════════════════════
The ▶ / ⏸ inside the S disc was 17px in a 60px button (28%): now ~42%
of the disc on every size, with a firmer outline so it reads over the S.
"Sound, reimagined" gets its gradient sweep back, in Studio colours. */
.player-btn-play[data-snr-state] #btnPlayIcon,
.player-btn-play[data-snr-state] #nowPlayingPlayIcon {
width: max(22px, 42%) !important;
height: auto !important;
aspect-ratio: 1;
filter: drop-shadow(0 0 1.5px rgba(12, 6, 28, 1)) drop-shadow(0 0 2px rgba(12, 6, 28, .9)) drop-shadow(0 2px 6px rgba(0, 0, 0, .65)) !important;
}
.now-playing-modal-controls .player-btn-play[data-snr-state] #nowPlayingPlayIcon { width: max(26px, 42%) !important; height: auto !important; }
/* the play triangle sits a touch right of centre so it looks centred */
.player-btn-play[data-snr-state="play"] #btnPlayIcon::before,
.player-btn-play[data-snr-state="play"] #nowPlayingPlayIcon::before { transform: translateX(1.5px); }
/* tagline: spaced capitals with a violet → white → rose gradient and a slow sheen */
html[data-theme="studio"] .logo-tagline {
font-family: inherit !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: .7rem !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
background: linear-gradient(100deg, #8f80ff 0%, #c9c1ff 22%, #ffffff 40%, #b0a6ff 62%, #e6a8d0 82%, #8f80ff 100%) !important;
background-size: 220% 100% !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
filter: drop-shadow(0 0 6px rgba(124, 108, 255, .35)) !important;
opacity: 1 !important;
animation: tagline-sheen 9s ease-in-out infinite;
}
@keyframes tagline-sheen {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="studio"] .logo-tagline { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
PASS 27 · Home v2, Phase 1 (home-v2.js)
Welcome strip + Jump back in · action capsule on song cards ·
Charts with the receiver tuner · Fresh from the community ·
clean-ups (dead quick picks, duplicate "All", % match, emoji,
marketing links out of the app header, bigger player targets).
═══════════════════════════════════════════════════════════ */
:root {
--snr-ease: cubic-bezier(.2, .8, .2, 1);
--snr-shelf-gap: 48px;
}
.snr-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
font: 600 .9rem/1 inherit; letter-spacing: .005em;
transition: transform .15s var(--snr-ease), background .2s, border-color .2s, filter .2s;
}
.snr-btn:active { transform: scale(.98); }
.snr-btn--primary { border: 0; color: #fff; background: var(--studio-grad, linear-gradient(135deg, var(--purple-light), var(--purple))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px -12px var(--purple-glow); }
.snr-btn--primary:hover { filter: brightness(1.08); }
.snr-btn--ghost { color: var(--text); background: transparent; border: 1px solid rgba(255, 255, 255, .16); }
.snr-btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .26); }
.snr-art-ph {
display: grid; place-items: center; width: 100%; height: 100%;
font-weight: 700; font-size: 1.05em; color: rgba(255, 255, 255, .7);
background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 30%, #16141f), #16141f);
}
.snr-shelf-label { margin: 0 0 12px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.snr-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.snr-shelf-title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
/* ── welcome strip ───────────────────────────────────────────────── */
.sonara-hero.snr-welcome-on { padding: 8px 0 0 !important; min-height: 0 !important; background-image: none !important; }
.sonara-hero.snr-welcome-on > :not(.snr-welcome) { display: none !important; }
.sonara-hero.snr-welcome-on::before, .sonara-hero.snr-welcome-on::after { display: none !important; }
.snr-welcome { padding: 4px 0 0; }
.snr-welcome-head { margin: 0 0 24px; }
.snr-welcome-title {
margin: 0; max-width: 18ch;
font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.35rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
color: var(--text); text-wrap: balance;
background: none !important; -webkit-text-fill-color: currentColor !important;
}
.snr-welcome-sub { margin: 10px 0 0; font-size: 1rem; color: var(--text-muted); }
.snr-welcome-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.snr-jump-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.snr-jump {
position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; height: 56px;
padding: 0 44px 0 0; overflow: hidden; cursor: pointer; text-align: left;
border: 0; border-radius: 8px; color: var(--text);
background: rgba(255, 255, 255, .055);
transition: background .2s;
}
.snr-jump:hover, .snr-jump:focus-visible { background: rgba(255, 255, 255, .1); }
.snr-jump-art { flex: none; width: 56px; height: 56px; }
.snr-jump-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-jump-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snr-jump-title { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-jump-artist { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-jump-play {
position: absolute; right: 10px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
display: grid; place-items: center; color: #fff;
background: var(--purple); box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
opacity: 0; transform: translateX(8px); transition: opacity .2s, transform .3s var(--snr-ease);
}
.snr-jump-play svg { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }
.snr-jump:hover .snr-jump-play, .snr-jump:focus-visible .snr-jump-play { opacity: 1; transform: none; }
@media (hover: none) { .snr-jump-play { opacity: 1; transform: none; width: 28px; height: 28px; margin-top: -14px; } }
@media (max-width: 900px) { .snr-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.snr-jump { height: 52px; gap: 10px; padding-right: 40px; }
.snr-jump-art { width: 52px; height: 52px; }
.snr-jump-title { font-size: .84rem; }
.snr-welcome-head { margin-bottom: 18px; }
}
/* dead quick picks + duplicate side panels: their jobs are now Welcome and Charts */
.lyric-spotlight-layout { grid-template-columns: minmax(0, 1fr) !important; display: block !important; }
/* ── Charts with the receiver tuner ──────────────────────────────── */
.snr-charts { margin: 0 0 var(--snr-shelf-gap); }
.snr-tuner-wrap { display: flex; flex-direction: column; align-items: stretch; width: min(300px, 100%); }
.snr-tuner {
--pos: 0;
position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px;
background: rgba(255, 255, 255, .03);
}
.snr-tuner-opt {
position: relative; z-index: 1; height: 34px; border: 0; background: transparent; cursor: pointer;
font: 600 .7rem/1 'Space Grotesk', 'DM Sans', sans-serif; letter-spacing: .16em;
color: var(--text-muted); transition: color .25s;
}
.snr-tuner-opt:hover { color: var(--text); }
.snr-tuner-opt.is-on { color: var(--text); }
.snr-tuner-opt:focus-visible { outline: 2px solid var(--purple-light); outline-offset: -2px; border-radius: 6px; }
.snr-tuner-needle {
position: absolute; bottom: -1px; left: calc(var(--pos) * 33.333%); width: 33.333%; height: 2px;
background: var(--purple-light); box-shadow: 0 0 10px var(--purple-glow);
transition: left .45s var(--snr-ease);
}
.snr-tuner-scale { display: grid; grid-template-columns: repeat(15, 1fr); margin-top: 6px; }
.snr-tuner-scale i { justify-self: center; width: 1px; height: 5px; background: rgba(255, 255, 255, .16); }
.snr-tuner-scale i:nth-child(5n + 3) { height: 8px; background: rgba(255, 255, 255, .28); }
.snr-chart-list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 2px 28px;
}
.snr-chart-row {
width: 100%; display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
height: 60px; padding: 0 10px 0 4px; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
background: transparent; color: var(--text);
border-bottom: 1px solid rgba(255, 255, 255, .05);
transition: background .2s;
}
.snr-chart-row:hover, .snr-chart-row:focus-visible { background: rgba(255, 255, 255, .055); }
.snr-chart-rank { font: 700 1.25rem/1 'Space Grotesk', 'DM Sans', sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .42); text-align: right; }
.snr-chart-list li:nth-child(-n + 3) .snr-chart-rank { color: var(--text); }
.snr-chart-art { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; }
.snr-chart-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-chart-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.snr-chart-title { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-chart-artist { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-chart-plays { font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.snr-chart-list.is-entering li { animation: chart-rise .5s var(--snr-ease) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes chart-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.snr-chart-empty { grid-column: 1 / -1; padding: 22px 4px; color: var(--text-muted); font-size: .9rem; }
.snr-chart-empty button { border: 0; background: none; color: var(--purple-light); font: inherit; font-weight: 600; cursor: pointer; padding: 0 0 0 6px; }
.snr-chart-note { margin: 12px 0 0; font-size: .78rem; color: var(--text-muted); }
@media (max-width: 760px) {
.snr-shelf-head:has(.snr-tuner-wrap) { flex-direction: column; align-items: flex-start; }
.snr-tuner-wrap { width: 100%; }
.snr-chart-list { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
.snr-chart-row { grid-template-columns: 28px 44px minmax(0, 1fr) auto; gap: 12px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .snr-chart-list.is-entering li { animation: none; } }
/* ── Fresh from the community ────────────────────────────────────── */
.landing-hype-panel .side-eq-bars { display: none !important; }
.snr-fresh { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.snr-fresh-row {
width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 6px; border: 0; border-radius: 8px;
background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .2s;
}
.snr-fresh-row:hover, .snr-fresh-row:focus-visible { background: rgba(255, 255, 255, .055); }
.snr-fresh-art { flex: none; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; }
.snr-fresh-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-fresh-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .82rem; line-height: 1.35; color: var(--text-muted); }
.snr-fresh-text > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snr-fresh-text b { color: var(--text); font-weight: 600; }
.snr-fresh-when { font-size: .74rem; color: rgba(255, 255, 255, .4); }
/* ── action capsule on song cards ────────────────────────────────── */
.track-card > .track-card-info .track-card-actions { opacity: 0 !important; pointer-events: none !important; }
.track-card > .track-card-info { padding-right: 2.6rem !important; }
.snr-cap {
position: absolute; right: -.1rem; top: .55rem; z-index: 4;
display: flex; align-items: center; justify-content: flex-end;
height: 34px; border-radius: 17px;
max-width: 34px; overflow: hidden;
transition: max-width .4s var(--snr-ease), background .25s, box-shadow .25s;
}
.snr-cap.is-open {
max-width: 190px;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 88%, #2a2540);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -10px rgba(0, 0, 0, .8);
}
.snr-cap-tray { display: flex; align-items: center; gap: 0; padding-left: 2px; opacity: 0; transform: translateX(10px); transition: opacity .2s, transform .35s var(--snr-ease); }
.snr-cap.is-open .snr-cap-tray { opacity: 1; transform: none; transition-delay: .08s; }
.snr-cap-btn, .snr-cap-trigger {
flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--text-muted);
transition: color .2s, background .2s, transform .2s;
}
.snr-cap-btn svg, .snr-cap-trigger svg { width: 18px; height: 18px; }
.snr-cap-trigger svg { fill: currentColor; }
.snr-cap-btn:hover, .snr-cap-trigger:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.snr-cap-btn:focus-visible, .snr-cap-trigger:focus-visible { outline: 2px solid var(--purple-light); outline-offset: -2px; }
.snr-cap-btn.is-on { color: #ff5c8a; }
.snr-cap-btn.is-on svg { fill: currentColor; }
.snr-cap-btn.is-pop { animation: cap-pop .4s var(--snr-ease); }
@keyframes cap-pop { 40% { transform: scale(1.25); } }
.snr-cap-trigger { position: relative; }
.snr-cap-i { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s, transform .35s var(--snr-ease); }
.snr-cap-i--close { opacity: 0; transform: rotate(-90deg); }
.snr-cap.is-open .snr-cap-i--dots { opacity: 0; transform: rotate(90deg); }
.snr-cap.is-open .snr-cap-i--close { opacity: 1; transform: none; }
.snr-cap.is-open .snr-cap-trigger { color: var(--text); }
/* a liked song shows a quiet accent dot on the closed capsule */
.track-card.snr-is-liked .snr-cap:not(.is-open) .snr-cap-trigger::after {
content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ff5c8a;
}
@media (prefers-reduced-motion: reduce) { .snr-cap, .snr-cap-tray, .snr-cap-i { transition: none; } }
/* ── clean-ups ───────────────────────────────────────────────────── */
.main-header .main-header-site-links { display: none !important; } /* lives in the footer */
.snr-see-all { display: none !important; } /* duplicate of the "All" chip */
.snr-lc-match { display: none !important; } /* no fake % match */
/* no emoji */
/* ── player: comfortable tap targets ─────────────────────────────── */
@media (min-width: 769px) {
.player-bar :is(#btnPrev, #btnNext) { width: 40px !important; height: 40px !important; }
.player-bar :is(#btnQueue, #btnShuffle, #btnRepeat, #btnVolume, #btnLyricsCc, #playerSettingsBtn) { min-width: 38px !important; min-height: 38px !important; }
}
@media (max-width: 768px) {
.player-bar :is(#btnPrev, #btnNext) { width: 40px !important; height: 40px !important; }
.player-bar :is(#btnQueue, #btnShuffle, #btnRepeat, #btnVolume, #btnLyricsCc, #playerSettingsBtnMobile) { min-width: 32px !important; min-height: 32px !important; }
}
.snr-support-btn { text-decoration: none !important; font-size: .85rem !important; }
.snr-support-btn svg { width: 15px; height: 15px; }
.sonara-hero.snr-welcome-on { margin-bottom: var(--snr-shelf-gap) !important; }
.snr-jump-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
@media (max-width: 600px) { .snr-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* ═══════════════════════════════════════════════════════════
PASS 28 · Home v2, Phase 2 — layout and frame (home-v2.js)
═══════════════════════════════════════════════════════════ */
/* ── one full-width home column, new order ───────────────────────── */
#mainDefaultContent.snr-home-v2 {
display: grid; /* no !important: other pages hide home with display:none */
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
row-gap: var(--snr-shelf-gap);
align-items: start;
}
#mainDefaultContent.snr-home-v2 :is(.landing-two-col, .landing-main-col, #landingSideCol, #snrDiscoverRows) { display: contents !important; }
#mainDefaultContent.snr-home-v2 > *,
#mainDefaultContent.snr-home-v2 :where(.landing-main-col, #landingSideCol, #snrDiscoverRows) > * {
grid-column: 1 / -1;
margin-top: 0 !important;
margin-bottom: 0 !important;
order: 50;
min-width: 0;
}
/* Most important first, as on Spotify / Apple Music: shortcuts, new music,
mixes, the daily picks, charts; the extras last. The full song list
lives on the Browse page. */
#mainDefaultContent.snr-home-v2 #completeProfileBanner { order: 0; }
#mainDefaultContent.snr-home-v2 #sonaraHero { order: 1; margin: 0 !important; }
#mainDefaultContent.snr-home-v2 #newReleasesSection { order: 2; }
#mainDefaultContent.snr-home-v2 .snr-mixes { order: 3; }
#mainDefaultContent.snr-home-v2 #snrEarCandy { order: 4; grid-column: span 1; align-self: stretch; }
#mainDefaultContent.snr-home-v2 .lyric-spotlight-section { order: 5; grid-column: span 1; align-self: stretch; }
#mainDefaultContent.snr-home-v2 #snrCharts { order: 6; }
#mainDefaultContent.snr-home-v2 #forYouSection { order: 7; }
#mainDefaultContent.snr-home-v2 .snr-rising { order: 8; }
#mainDefaultContent.snr-home-v2 #snrBrowse { order: 9; }
#mainDefaultContent.snr-home-v2 .landing-hype-panel { order: 10; }
#mainDefaultContent.snr-home-v2 #snrArcade { order: 11; }
#mainDefaultContent.snr-home-v2 #soundscapeSection { order: 12; }
#mainDefaultContent.snr-home-v2 #artistCollectiblesSection { order: 13; }
#mainDefaultContent.snr-home-v2 .snr-legal-footer { order: 99; }
@media (max-width: 960px) {
#mainDefaultContent.snr-home-v2 { grid-template-columns: minmax(0, 1fr); }
#mainDefaultContent.snr-home-v2 :is(#snrEarCandy, .lyric-spotlight-section) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { #mainDefaultContent.snr-home-v2 { row-gap: 40px; } }
/* Today band: Ear Candy in its compact layout, Lyric Spotlight beside it */
#mainDefaultContent.snr-home-v2 .snr-earcandy { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
#mainDefaultContent.snr-home-v2 .snr-ec-media { width: 170px; height: 128px; }
#mainDefaultContent.snr-home-v2 .snr-ec-sleeve { width: 128px; height: 128px; }
#mainDefaultContent.snr-home-v2 .snr-ec-vinyl { width: 118px; height: 118px; left: 6px; top: 5px; translate: 30px 0; }
#mainDefaultContent.snr-home-v2 .snr-earcandy:hover .snr-ec-vinyl { translate: 40px 0; }
#mainDefaultContent.snr-home-v2 .snr-earcandy.is-playing .snr-ec-vinyl { translate: 42px 0; }
#mainDefaultContent.snr-home-v2 .lyric-spotlight-section { display: flex; flex-direction: column; }
#mainDefaultContent.snr-home-v2 .lyric-spotlight-section .lyric-spotlight-layout { flex: 1; display: flex !important; }
#mainDefaultContent.snr-home-v2 .lyric-spotlight-section .spotlight-card { flex: 1; min-height: 0 !important; }
/* ── shelves: one header pattern ─────────────────────────────────── */
#mainDefaultContent.snr-home-v2 :is(.snr-section-icon, .snr-section-badge, .snr-nav-btn, .snr-genre-pills) { display: none !important; }
#mainDefaultContent.snr-home-v2 .snr-section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px !important; }
#mainDefaultContent.snr-home-v2 :is(.snr-section-title, .section-title, #soundscapeSection h2) {
font-size: 1.375rem !important; font-weight: 700 !important; letter-spacing: -.02em !important;
line-height: 1.2 !important; margin: 0 0 16px !important; padding: 0 !important;
}
#mainDefaultContent.snr-home-v2 .snr-section-head .snr-section-title { margin: 0 !important; }
#mainDefaultContent.snr-home-v2 .section-title::after { display: none !important; }
.snr-see-all-link {
border: 0; background: none; padding: 6px 2px; cursor: pointer;
font: 600 .85rem/1 inherit; color: var(--text-muted); transition: color .2s;
}
.snr-see-all-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#mainDefaultContent.snr-home-v2 #soundscapeSection .soundscape-sub { text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important; color: var(--text-muted) !important; margin-top: -8px !important; }
/* New releases: same card language as the grid (no rank numbers) */
#mainDefaultContent.snr-home-v2 .snr-pc-num { display: none !important; }
/* Fresh from the community as a full-width shelf */
#mainDefaultContent.snr-home-v2 .landing-hype-panel {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#mainDefaultContent.snr-home-v2 .landing-hype-panel::after { display: none !important; }
#mainDefaultContent.snr-home-v2 .landing-hype-panel .side-panel-header { margin: 0 0 12px; padding: 0; border: 0; }
#mainDefaultContent.snr-home-v2 .landing-hype-panel .side-panel-icon { display: none !important; }
#mainDefaultContent.snr-home-v2 .landing-hype-panel .landing-side-title {
font-size: 1.375rem !important; font-weight: 700 !important; letter-spacing: -.02em !important;
text-transform: none !important; color: var(--text) !important; -webkit-text-fill-color: currentColor !important;
}
#mainDefaultContent.snr-home-v2 .snr-fresh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; margin: 0; }
@media (max-width: 900px) { #mainDefaultContent.snr-home-v2 .snr-fresh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #mainDefaultContent.snr-home-v2 .snr-fresh { grid-template-columns: minmax(0, 1fr); } }
/* ── Browse: cover-collage tiles that open in place ──────────────── */
.snr-genre-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .snr-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.snr-genre-tile {
position: relative; height: 104px; overflow: hidden; cursor: pointer; text-align: left;
border: 0; border-radius: 10px; padding: 0; color: #fff;
background: color-mix(in srgb, var(--purple) 22%, #15131f);
transition: transform .25s var(--snr-ease), box-shadow .25s;
}
.snr-genre-collage { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.snr-genre-collage img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: transform .5s var(--snr-ease); }
.snr-genre-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 18, .15), rgba(10, 8, 18, .82)); }
.snr-genre-name, .snr-genre-count { position: absolute; left: 14px; z-index: 1; }
.snr-genre-name { bottom: 30px; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.snr-genre-count { bottom: 12px; font-size: .75rem; color: rgba(255, 255, 255, .7); }
.snr-genre-tile:hover { transform: translateY(-2px); }
.snr-genre-tile:hover .snr-genre-collage img { transform: scale(1.05); }
.snr-genre-tile:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 2px; }
/* ── All songs: header with Sort, Show more ──────────────────────── */
.snr-allsongs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.snr-allsongs-head .section-title { margin: 0 !important; }
.snr-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.snr-sort select {
height: 36px; padding: 0 30px 0 12px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--text);
font: 600 .82rem/1 inherit; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5a1b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.track-card.snr-more-hidden { display: none !important; }
.snr-show-more { display: flex; margin: 24px auto 0; }
.snr-show-more[hidden] { display: none !important; }
/* ── sidebar groups ──────────────────────────────────────────────── */
.snr-nav-label {
margin: 18px 12px 6px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-muted); opacity: .75;
}
.sidebar .nav-main .snr-nav-label:first-child { margin-top: 6px; }
/* ── header ──────────────────────────────────────────────────────── */
.main-header .search-bar { position: relative; }
.snr-hdr-icon {
display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
place-items: center; background: transparent; color: var(--text);
}
.snr-hdr-icon svg { width: 21px; height: 21px; }
.snr-hdr-icon:hover { background: rgba(255, 255, 255, .07); }
/* ── player: three zones on desktop ──────────────────────────────── */
@media (min-width: 769px) {
.player-bar.snr-player-v2 {
display: grid !important;
grid-template-columns: minmax(220px, 1fr) minmax(0, 1.5fr) minmax(220px, 1fr);
align-items: center; column-gap: 24px;
height: 84px !important; min-height: 0 !important; padding: 0 20px !important;
}
:root { --player-height: 84px; }
.player-bar.snr-player-v2 .player-left { padding: 0 !important; margin: 0 !important; min-width: 0; }
.player-bar.snr-player-v2 #nowPlayingStrip {
position: static !important; width: 100% !important; max-width: 320px; margin: 0 !important;
display: flex !important; align-items: center; gap: 12px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
.player-bar.snr-player-v2 .player-center { flex: none !important; gap: 6px; }
.player-bar.snr-player-v2 .snr-transport { display: flex; align-items: center; justify-content: center; gap: 14px; }
.player-bar.snr-player-v2 .snr-transport #btnPlay { width: 46px !important; height: 46px !important; }
.player-bar.snr-player-v2 .player-center-main { max-width: 560px; gap: 2px !important; }
.player-bar.snr-player-v2 .waveform-mini { height: 20px !important; }
.player-bar.snr-player-v2 .player-right { justify-content: flex-end; }
.player-bar.snr-player-v2 .player-right-icons { border-left: 0 !important; margin: 0 !important; padding: 0 !important; gap: 6px !important; }
.player-bar.snr-player-v2 .snr-settings-wrap { position: relative; display: inline-flex; }
.player-bar.snr-player-v2 .snr-settings-wrap #playerSettingsBtn { position: static !important; width: 38px !important; height: 38px !important; display: grid !important; place-items: center; }
.player-bar.snr-player-v2 .snr-settings-wrap #playerSettingsPopover { right: 0; left: auto !important; bottom: calc(100% + 12px) !important; top: auto !important; }
body { padding-bottom: 84px; }
}
/* ── phones: compact header, mini player, 5 tabs ─────────────────── */
@media (max-width: 768px) {
.snr-hdr-icon { display: grid; }
.main-header .search-bar { display: none !important; }
.main-header.snr-search-open .search-bar {
display: flex !important; position: absolute !important; inset: 6px 10px auto 10px; height: 44px; z-index: 30;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 94%, #2a2540) !important; border-radius: 22px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 30px -10px rgba(0, 0, 0, .8);
animation: snr-search-grow .3s var(--snr-ease);
}
@keyframes snr-search-grow { from { clip-path: inset(0 0 0 calc(100% - 44px) round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
html:not(.snr-signed-in) .main-header :is(#btnLogIn, #btnSignUp) { display: none !important; }
html.snr-signed-in .snr-account-btn { display: none !important; }
.player-bar.snr-player-v2 {
display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
height: 64px !important; min-height: 0 !important; padding: 0 10px 0 8px !important;
}
.player-bar.snr-player-v2 .player-left { padding: 0 !important; margin: 0 !important; min-width: 0; order: 1; }
.player-bar.snr-player-v2 #nowPlayingStrip {
position: static !important; display: flex !important; align-items: center; gap: 10px; width: 100% !important; margin: 0 !important;
padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important;
}
.player-bar.snr-player-v2 .player-center { order: 2; flex: none !important; position: static !important; }
.player-bar.snr-player-v2 .snr-transport { display: flex; align-items: center; }
.player-bar.snr-player-v2 .snr-transport > :not(#btnPlay) { display: none !important; }
.player-bar.snr-player-v2 .snr-transport #btnPlay { width: 44px !important; height: 44px !important; }
.player-bar.snr-player-v2 .player-center-main { position: absolute !important; left: 12px; right: 12px; bottom: 0; max-width: none !important; margin: 0 !important; }
.player-bar.snr-player-v2 .player-center-main > :not(.progress-bar) { display: none !important; }
.player-bar.snr-player-v2 .progress-bar-times { display: none !important; }
.player-bar.snr-player-v2 .player-right { display: none !important; }
.mobile-tab-bar .nav-item:is([data-page="upload"], [data-page="academy"], [data-page="profile"]) { display: none !important; }
.mobile-tab-bar .snr-create-tab { display: flex !important; }
}
.snr-create-tab { display: none; }
.snr-create-sheet { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.snr-create-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s; }
.snr-create-panel {
position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
border-radius: 20px 20px 0 0; background: color-mix(in srgb, var(--bg-dark, #0b0a12) 92%, #2a2540);
box-shadow: 0 -1px 0 rgba(255, 255, 255, .1); transform: translateY(105%); transition: transform .4s var(--snr-ease);
}
.snr-create-sheet.is-open { pointer-events: auto; }
.snr-create-sheet.is-open .snr-create-backdrop { opacity: 1; }
.snr-create-sheet.is-open .snr-create-panel { transform: none; }
.snr-create-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); margin: 0 auto 12px; }
.snr-create-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.snr-create-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); background: none; text-align: left; color: var(--text); cursor: pointer; }
.snr-create-name { font-size: .98rem; font-weight: 600; }
.snr-create-desc { font-size: .8rem; color: var(--text-muted); }
/* phones: the whole tile plays, so the round play mark gives its room to the title */
@media (max-width: 600px) {
.snr-jump { padding-right: 10px !important; }
.snr-jump-play { display: none !important; }
}
@media (max-width: 768px) {
.player-bar.snr-player-v2 {
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas: none !important;
grid-template-rows: 64px !important;
}
.player-bar.snr-player-v2 > .player-left { grid-area: auto !important; grid-column: 1 !important; grid-row: 1 !important; }
.player-bar.snr-player-v2 > .player-center { grid-area: auto !important; grid-column: 2 !important; grid-row: 1 !important; width: auto !important; }
.player-bar.snr-player-v2 .snr-transport { width: auto !important; justify-content: flex-end; }
}
/* ═══════════════════════════════════════════════════════════
PASS 29 · Home v2, Phase 3 — calm visuals, classic presentation
Today's pick as a record sleeve · Discover and Genre map without
neon · Artist collectibles as vintage trading cards · record-crate
Browse · liner notes on the song page · quiet footer · smaller Mozai
═══════════════════════════════════════════════════════════ */
:root {
--snr-hair: rgba(255, 255, 255, .08);
--snr-hair-strong: rgba(255, 255, 255, .14);
--snr-surface: rgba(255, 255, 255, .035);
--snr-metal-gold: linear-gradient(135deg, #a88d55, #e8d6a6 42%, #b39555 58%, #8a703c);
--snr-metal-silver: linear-gradient(135deg, #8f959e, #e2e5ea 42%, #a5abb3 58%, #757b84);
--snr-metal-bronze: linear-gradient(135deg, #8c5d3e, #d6a887 42%, #a2714f 58%, #6f452b);
--snr-metal-pewter: linear-gradient(135deg, #64626b, #b9b7c0 42%, #7d7b85 58%, #55535c);
}
/* ── Today's pick: the record sleeve ─────────────────────────────── */
#mainDefaultContent.snr-home-v2 .snr-earcandy {
box-shadow: none !important; border: 1px solid var(--snr-hair) !important;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 70%, #1a1824);
align-content: start;
}
#mainDefaultContent.snr-home-v2 .snr-earcandy::after { display: none !important; }
.snr-ec-bg::before { animation: none !important; filter: blur(48px) saturate(1.1) !important; opacity: .28 !important; }
.snr-ec-bg::after { background: linear-gradient(180deg, rgba(10, 9, 16, .55), rgba(10, 9, 16, .9)) !important; }
.snr-ec-dot { display: none !important; }
.snr-ec-eyebrow { color: var(--text-muted) !important; letter-spacing: .14em !important; }
/* the sleeve: a flat card with a hairline edge and an opening on the right */
#mainDefaultContent.snr-home-v2 .snr-ec-media { width: 196px; height: 132px; cursor: pointer; }
#mainDefaultContent.snr-home-v2 .snr-ec-sleeve {
width: 132px; height: 132px; border-radius: 4px;
box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
}
.snr-ec-sleeve::after { background: linear-gradient(90deg, transparent calc(100% - 3px), rgba(0, 0, 0, .45) calc(100% - 3px)) !important; }
/* the record rests inside and slides out on hover, tap, or while playing */
#mainDefaultContent.snr-home-v2 .snr-ec-vinyl {
width: 124px; height: 124px; left: 4px; top: 4px;
translate: 10px 0; rotate: 0deg;
transition: translate .45s var(--snr-ease), rotate .45s var(--snr-ease);
box-shadow: 0 8px 20px rgba(0, 0, 0, .6) !important;
}
#mainDefaultContent.snr-home-v2 .snr-earcandy:hover .snr-ec-vinyl,
#mainDefaultContent.snr-home-v2 .snr-earcandy.snr-ec-out .snr-ec-vinyl { translate: 62px 0; rotate: 24deg; }
#mainDefaultContent.snr-home-v2 .snr-earcandy.is-playing .snr-ec-vinyl { translate: 62px 0; }
.snr-ec-label { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) !important; }
/* one genre, set as plain text */
.snr-ec-tags { margin-top: .5rem !important; }
.snr-ec-tags span {
padding: 0 !important; border: 0 !important; background: none !important;
font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
color: var(--text-muted) !important;
}
.snr-ec-tags span + span { display: none !important; }
.snr-ec-title { font-size: 1.5rem !important; }
.snr-ec-play { box-shadow: none !important; }
.snr-ec-play:hover { transform: none !important; filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { #mainDefaultContent.snr-home-v2 .snr-ec-vinyl { transition: none; } }
/* ── Discover: the same features, no neon ────────────────────────── */
.arc-panel {
background: var(--snr-surface) !important; border: 1px solid var(--snr-hair) !important;
box-shadow: none !important; border-radius: 14px !important; padding: 20px !important;
}
.arc-panel::before, .arc-panel::after { display: none !important; }
.arc-eyebrow, .arc-slot .arc-eyebrow { color: var(--text-muted) !important; letter-spacing: .14em !important; font-weight: 600 !important; }
.arc-title { font-size: 1.15rem !important; font-weight: 700 !important; }
.ap-timer { background: transparent !important; border-color: var(--snr-hair) !important; color: var(--text-muted) !important; }
.arc-btn, .js-spin {
background: var(--purple) !important; box-shadow: none !important; height: 40px; padding: 0 18px !important;
}
.arc-btn:hover { transform: none !important; filter: brightness(1.08); }
html[data-theme="studio"] :is(.arc-btn.ap-playall, .arc-btn.js-spin) { background: var(--studio-grad, var(--purple)) !important; }
/* the sealed pack: a plain printed envelope instead of rainbow foil */
.ap-pack-foil {
animation: none !important;
background: linear-gradient(160deg, #2a2733, #1b1922) !important;
box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--snr-hair-strong) !important;
}
.ap-pack-flap { background: rgba(255, 255, 255, .04) !important; border-bottom: 1px dashed rgba(255, 255, 255, .22) !important; }
.ap-pack-logo { box-shadow: 0 0 0 1px var(--snr-hair-strong) !important; }
.ap-pack-text { color: var(--text) !important; }
.ap-pack-text strong { letter-spacing: .14em !important; text-transform: uppercase; font-size: 11px !important; }
.ap-pack-text em { color: var(--text-muted); }
.ap-stage.is-sealed .ap-pack:hover { animation: none !important; transform: translateY(-3px); }
.ap-stage.is-opening .ap-pack { animation: none !important; }
.ap-stage.is-revealing::before { display: none !important; }
/* cards: one hairline rim; rarity is a quiet label, not a glow */
.ap-front { background: #17151d !important; box-shadow: inset 0 0 0 1px var(--snr-hair-strong) !important; }
.ap-common, .ap-rare, .ap-legendary { box-shadow: inset 0 0 0 1px var(--snr-hair-strong) !important; }
.ap-legendary { box-shadow: inset 0 0 0 1px rgba(214, 190, 130, .55) !important; }
.ap-rare { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple-light) 45%, transparent) !important; }
.ap-legendary::after { display: none !important; }
.ap-rarity {
background: rgba(10, 9, 16, .78) !important; color: var(--text) !important; box-shadow: none !important;
font-size: 9px !important; letter-spacing: .06em !important; text-transform: none !important; font-weight: 600 !important;
}
.ap-legendary .ap-rarity { color: #e8d6a6 !important; }
.ap-play { background: #fff !important; color: #0b0a12 !important; }
.ap-back { background: url('logo-s.svg') center / 34% no-repeat, #1d1b24 !important; box-shadow: inset 0 0 0 1px var(--snr-hair-strong) !important; }
.ap-stage.is-open .ap-card { transform: translateX(var(--dx)) !important; }
.ap-stage.is-open .ap-card:hover { transform: translateX(var(--dx)) translateY(-6px) !important; }
/* the shuffle: a calm three-window display, no chasing bulbs */
.js-bulbs { display: none !important; }
.js-machine { background: rgba(0, 0, 0, .25) !important; box-shadow: inset 0 0 0 1px var(--snr-hair) !important; padding: 14px !important; border-radius: 12px !important; }
.js-reel { background: #121118 !important; border-radius: 8px !important; }
.js-reel::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 30%, transparent 70%, rgba(0, 0, 0, .45)) !important; }
.js-genre span { background: rgba(255, 255, 255, .06) !important; box-shadow: none !important; color: var(--text) !important; letter-spacing: .04em !important; font-weight: 700 !important; }
.js-artist i { background: rgba(255, 255, 255, .08) !important; color: var(--text) !important; }
.js-payline::before, .js-payline::after { filter: none !important; border-left-color: var(--text-muted) !important; border-right-color: var(--text-muted) !important; border-width: 5px !important; top: -5px !important; }
.js-payline::before { border-right-color: transparent !important; }
.js-payline::after { border-left-color: transparent !important; }
.js-machine.is-win .js-reel { box-shadow: inset 0 0 0 1px var(--snr-hair-strong) !important; }
.js-labels span { color: var(--text-muted) !important; letter-spacing: .12em !important; }
.js-result span { color: var(--text-muted) !important; }
.js-lever { display: none !important; }
/* ── Genre map: soft points on a quiet chart ─────────────────────── */
#soundscapeSection .soundscape-container {
background: var(--snr-surface) !important; border: 1px solid var(--snr-hair) !important;
box-shadow: none !important; border-radius: 14px !important;
}
#soundscapeSection .soundscape-container::before, #soundscapeSection .soundscape-container::after { display: none !important; }
#soundscapeSection .soundscape-stars { display: none !important; }
#soundscapeSection .soundscape-lines path { stroke: rgba(255, 255, 255, .09) !important; stroke-width: 1 !important; }
#soundscapeSection .sc-node { animation: none !important; }
#soundscapeSection .sc-ring { border-color: rgba(var(--sc-rgb), .22) !important; box-shadow: none !important; animation: none !important; }
#soundscapeSection .sc-body {
clip-path: circle(50%) !important; border-radius: 50%;
background: radial-gradient(circle at 50% 45%, rgba(var(--sc-rgb), .42), rgba(var(--sc-rgb), .14) 70%) !important;
border: 0 !important; filter: none !important;
box-shadow: inset 0 0 0 1px rgba(var(--sc-rgb), .45);
}
#soundscapeSection .sc-body > div { display: none !important; }
#soundscapeSection .sc-node.sc-hot .sc-body { transform: scale(1.06) !important; background: rgba(var(--sc-rgb), .5) !important; }
#soundscapeSection .sc-label {
color: var(--text) !important; text-shadow: none !important; filter: none !important;
font-size: 10px !important; font-weight: 600 !important; letter-spacing: .12em !important;
}
#soundscapeSection .sc-count { color: var(--text-muted) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#soundscapeSection .sc-hud { opacity: .7; }
#soundscapeSection .sc-hud-title { display: none !important; }
#soundscapeSection .soundscape-tooltip { box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .9) !important; border: 1px solid var(--snr-hair-strong) !important; }
/* ── Artist collectibles: vintage trading cards ──────────────────── */
.snr-cards-section { padding: 0 !important; background: none !important; border: 0 !important; }
.snr-cards-meta { font-size: .82rem; color: var(--text-muted); }
.snr-tcards {
display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 18px;
overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.snr-tcard-slot { scroll-snap-align: start; }
.snr-tcard { --metal: var(--snr-metal-pewter); position: relative; width: 196px; height: 286px; perspective: 1000px; cursor: pointer; outline: none; }
.snr-metal-gold { --metal: var(--snr-metal-gold); --metal-ink: #e2cf9d; }
.snr-metal-silver { --metal: var(--snr-metal-silver); --metal-ink: #d9dde3; }
.snr-metal-bronze { --metal: var(--snr-metal-bronze); --metal-ink: #d4a684; }
.snr-metal-pewter { --metal-ink: #bdbbc4; }
.snr-tcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--snr-ease); }
.snr-tcard.is-flipped .snr-tcard-inner { transform: rotateY(180deg); }
.snr-tcard:hover .snr-tcard-inner { translate: 0 -3px; }
.snr-tcard-face {
position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
padding: 1.5px; background: var(--metal);
box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .9);
}
.snr-tcard-face::before { /* the card stock inside the metal rim */
content: ""; position: absolute; inset: 1.5px; border-radius: 9px; background: #16151b; z-index: 0;
}
.snr-tcard-face > * { position: relative; z-index: 1; }
.snr-tcard-front { display: flex; flex-direction: column; }
.snr-tcard-photo { margin: 10px 10px 0; height: 168px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.snr-tcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); }
.snr-tcard-photo .snr-art-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 48px; }
.snr-tcard-plate { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 0; min-width: 0; }
.snr-tcard-no { font: 600 10px/1 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--metal-ink); }
.snr-tcard-name {
font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 600; line-height: 1.2; color: #f4f2f8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-tcard-genre { font-size: .78rem; color: var(--text-muted); }
.snr-tcard-back { transform: rotateY(180deg); }
.snr-tcard-back > .snr-tcard-no { display: block; margin: 18px 16px 6px; }
.snr-tcard-back > .snr-tcard-name { display: block; margin: 0 16px 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.snr-tcard-stats { margin: 0 16px; padding: 10px 0; border-top: 1px solid var(--snr-hair); border-bottom: 1px solid var(--snr-hair); display: grid; grid-template-columns: repeat(3, 1fr); }
.snr-tcard-stats div { display: flex; flex-direction: column; gap: 3px; }
.snr-tcard-stats dt { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.snr-tcard-stats dd { margin: 0; font: 700 1rem/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--text); }
.snr-tcard-top { margin: 12px 16px 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.snr-tcard-top span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.snr-tcard-top strong { font-size: .86rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-tcard-go {
position: absolute !important; left: 16px; right: 16px; bottom: 16px; height: 36px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--snr-hair-strong); background: transparent; color: var(--text); font: 600 .82rem/1 inherit;
}
.snr-tcard-go:hover { background: rgba(255, 255, 255, .06); }
.snr-tcard:focus-visible .snr-tcard-face { outline: 2px solid var(--purple-light); outline-offset: 3px; }
@media (max-width: 600px) {
.snr-tcards { grid-auto-columns: 170px; gap: 12px; }
.snr-tcard { width: 170px; height: 256px; }
.snr-tcard-photo { height: 146px; }
}
@media (prefers-reduced-motion: reduce) { .snr-tcard-inner { transition: none; } }
/* ── Browse: record crates with tinted dividers ──────────────────── */
.snr-genre-tile.snr-crate {
height: 148px; border-radius: 12px; overflow: hidden; isolation: isolate;
background: linear-gradient(180deg, hsl(var(--crate-h) 18% 15%), hsl(var(--crate-h) 14% 10%));
box-shadow: inset 0 0 0 1px var(--snr-hair);
}
.snr-genre-tile.snr-crate::after { display: none; }
.snr-crate-recs { position: absolute; left: 16px; right: 16px; top: 14px; height: 92px; }
.snr-crate-rec {
position: absolute; left: calc(var(--k) * 30px); top: calc((2 - var(--k)) * 7px);
width: 84px; height: 84px; border-radius: 3px; overflow: hidden;
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
transition: transform .35s var(--snr-ease);
}
.snr-crate-rec img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-crate-rec .snr-art-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; }
.snr-genre-tile.snr-crate:hover .snr-crate-rec { transform: translateY(calc(-4px - var(--k) * 4px)); }
.snr-genre-tile.snr-crate:hover { transform: none; }
.snr-crate-divider {
position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding: 10px 14px 0; z-index: 2;
display: flex; flex-direction: column; gap: 2px;
background: hsl(var(--crate-h) 22% 20%);
border-top: 1px solid hsl(var(--crate-h) 30% 32%);
}
.snr-crate-divider::before { /* the divider's index tab */
content: ""; position: absolute; right: 16px; top: -12px; width: 46px; height: 12px; border-radius: 4px 4px 0 0;
background: hsl(var(--crate-h) 22% 20%); box-shadow: inset 0 1px 0 hsl(var(--crate-h) 30% 32%);
}
.snr-crate .snr-genre-name, .snr-crate .snr-genre-count { position: static; }
.snr-crate .snr-genre-name { font-size: .95rem; font-weight: 700; color: #f4f2f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-crate .snr-genre-count { font-size: .74rem; color: rgba(255, 255, 255, .62); }
@media (max-width: 760px) {
.snr-genre-tile.snr-crate { height: 132px; }
.snr-crate-rec { width: 72px; height: 72px; left: calc(var(--k) * 22px); }
.snr-crate-divider { height: 52px; padding-top: 8px; }
}
/* ── Song page: meta line and liner notes ────────────────────────── */
.tp-meta-list { display: block !important; margin: 10px 0 18px !important; }
.tp-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: .9rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tp-meta-line span + span::before { content: "·"; margin: 0 8px; opacity: .6; }
.tp-credits-block.tp-liner {
margin: 28px 0 0; padding: 22px 24px 20px; border-radius: 14px;
background: var(--snr-surface); border: 1px solid var(--snr-hair);
}
.tp-liner .tp-content-heading {
margin: 0 0 14px !important; font-family: 'Playfair Display', Georgia, serif !important; font-style: italic;
font-weight: 400 !important; font-size: 1.35rem !important; letter-spacing: 0 !important;
}
.tp-liner-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 640px) { .tp-liner-list { grid-template-columns: minmax(0, 1fr); } }
.tp-liner-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dotted rgba(255, 255, 255, .14); min-width: 0; }
.tp-liner-row dt { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.tp-liner-row dd { margin: 0 0 0 auto; text-align: right; font-family: 'Playfair Display', Georgia, serif; font-size: .98rem; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.tp-liner-fine { margin: 14px 0 0; font-size: .72rem; letter-spacing: .02em; color: var(--text-muted); opacity: .8; }
/* ── Footer: the fine print on a record sleeve ───────────────────── */
.snr-footer-v3 { background: transparent !important; border-top: 1px solid var(--snr-hair) !important; }
.snr-footer-v3 .sonara-footer-inner { padding-top: 48px !important; padding-bottom: 36px !important; }
.snr-footer-v3 .sonara-footer-logo span { font-size: 1rem !important; font-weight: 700 !important; }
.snr-footer-v3 .sonara-footer-tagline { font-size: .86rem !important; line-height: 1.6 !important; color: var(--text-muted) !important; max-width: 340px; }
.snr-footer-v3 .sonara-footer-newsletter label { font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; }
.snr-footer-v3 .sonara-footer-newsletter-input-wrap input { height: 40px; border-radius: 999px !important; background: var(--snr-surface) !important; border: 1px solid var(--snr-hair-strong) !important; }
.snr-footer-v3 .sonara-footer-newsletter-input-wrap button { height: 40px; border-radius: 999px !important; box-shadow: none !important; }
.snr-footer-v3 .sonara-footer-social-btn { width: 36px !important; height: 36px !important; background: transparent !important; border: 1px solid var(--snr-hair) !important; box-shadow: none !important; color: var(--text-muted) !important; }
.snr-footer-v3 .sonara-footer-social-btn:hover { color: var(--text) !important; border-color: var(--snr-hair-strong) !important; transform: none !important; }
.snr-footer-v3 .sonara-footer-col { gap: 9px !important; }
.snr-footer-v3 .sonara-footer-col h4 {
font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important;
color: var(--text-muted) !important; -webkit-text-fill-color: currentColor !important; margin: 0 0 4px !important;
}
.snr-footer-v3 .sonara-footer-col a { font-size: .86rem !important; color: color-mix(in srgb, var(--text) 82%, transparent) !important; }
.snr-footer-v3 .sonara-footer-col a:hover { color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; }
.snr-footer-v3 .sonara-footer-support-link svg { display: none; }
.snr-footer-v3 .sonara-footer-support-note { font-size: .78rem !important; color: var(--text-muted) !important; background: none !important; border: 0 !important; padding: 0 !important; margin-top: 2px; }
.snr-footer-support-strip { border-top: 1px solid var(--snr-hair); }
.snr-footer-support-inner {
max-width: 1200px; margin: 0 auto; padding: 18px 2rem; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.snr-footer-support-text { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-muted); }
.snr-footer-support-text strong { color: var(--text); font-weight: 600; }
.snr-footer-support-actions { display: flex; align-items: center; gap: 16px; }
.snr-footer-coffee { font-size: .82rem; color: var(--text-muted); text-decoration: none; }
.snr-footer-coffee:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.snr-footer-v3 .sonara-footer-bottom { border-top: 1px solid var(--snr-hair) !important; padding-top: 16px !important; padding-bottom: 16px !important; }
.snr-footer-v3 .sonara-footer-bottom span { font-size: .74rem !important; color: var(--text-muted) !important; opacity: .85; }
/* ── Mozai: a small, still button above the player ───────────────── */
#mozaiTrigger { width: 44px !important; height: 44px !important; right: 20px !important; bottom: calc(var(--player-height, 84px) + 16px) !important; }
#mozaiTrigger .mozai-trigger-vinyl, #mozaiTrigger .mozai-trigger-inner { width: 44px !important; height: 44px !important; animation: none !important; }
#mozaiTrigger .mozai-trigger-inner {
border: 1px solid var(--snr-hair-strong) !important;
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9) !important;
}
#mozaiTrigger:hover .mozai-trigger-vinyl { transform: translateY(-2px) !important; }
#mozaiTrigger :is(.mozai-trigger-ring, .mozai-trigger-pulse, .mozai-trigger-notes, .mozai-trigger-hint-ring) { display: none !important; }
#mozaiTrigger .mozai-trigger-arrow-btn {
top: -8px !important; width: 20px !important; height: 20px !important; font-size: 12px !important;
opacity: 0; transition: opacity .2s; background: #1d1b24 !important; box-shadow: 0 0 0 1px var(--snr-hair-strong);
}
#mozaiTrigger:hover .mozai-trigger-arrow-btn, #mozaiTrigger .mozai-trigger-arrow-btn:focus-visible { opacity: 1; }
@media (max-width: 768px) {
#mozaiTrigger { right: 10px !important; bottom: calc(64px + 56px + 16px + env(safe-area-inset-bottom, 0px)) !important; }
#mozaiTrigger .mozai-trigger-arrow-btn { opacity: 1; }
}
.mozai-edge-arrow-btn { background: rgba(29, 27, 36, .92) !important; color: var(--text-muted) !important; box-shadow: inset 0 0 0 1px var(--snr-hair-strong); }
/* Genre map, flatter: matte discs, hairline labels, no ripples */
#soundscapeSection .sc-body { background: rgba(var(--sc-rgb), .26) !important; box-shadow: inset 0 0 0 1px rgba(var(--sc-rgb), .5) !important; }
#soundscapeSection .sc-crystal::before, #soundscapeSection .sc-crystal::after { display: none !important; }
#soundscapeSection .sc-label, #soundscapeSection .sc-node.sc-hot .sc-label {
background: rgba(12, 11, 18, .82) !important; border: 1px solid var(--snr-hair-strong) !important; box-shadow: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#soundscapeSection .sc-count { color: var(--text-muted) !important; background: none !important; min-width: 0 !important; padding: 0 !important; }
#soundscapeSection .soundscape-sub::before { display: none !important; }
/* Collectibles: heading wraps on narrow screens; a footer line on each card front */
.snr-cards-section .snr-shelf-head { flex-wrap: wrap; gap: 4px 16px; }
.snr-tcard-foot {
position: absolute !important; left: 14px; right: 14px; bottom: 12px; padding-top: 9px;
display: flex; justify-content: space-between; border-top: 1px solid var(--snr-hair);
font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
html #snrEarCandy .snr-ec-tags span { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--text-muted) !important; -webkit-text-fill-color: currentColor !important; }
.tp-hero-info .tp-meta-list { margin-top: 0 !important; }
/* footer grid: brand column fixed, four link columns share the rest */
@media (min-width: 901px) {
.snr-footer-v3 .sonara-footer-inner { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important; gap: 48px !important; }
.snr-footer-v3 .sonara-footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; }
}
@media (max-width: 900px) {
.snr-footer-v3 .sonara-footer-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
.snr-footer-v3 .sonara-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.snr-footer-v3 .sonara-footer-bottom { justify-content: flex-start !important; }
@media (min-width: 901px) {
.snr-footer-v3 .sonara-footer-inner { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) !important; }
.snr-footer-v3 .sonara-footer-links { grid-template-columns: 1fr 1fr 1.35fr 1fr !important; gap: 20px !important; }
}
.snr-footer-v3 .sonara-footer-support-note { font-size: .74rem !important; overflow-wrap: anywhere; }
/* ═══════════════════════════════════════════════════════════
PASS 30 · Community hype wall · moving genre rows · crate polish
═══════════════════════════════════════════════════════════ */
/* ── Community hype: three slow columns of real activity ─────────── */
#mainDefaultContent.snr-home-v2 .landing-hype-panel .side-panel-header { display: flex; align-items: baseline; gap: 14px; }
.snr-hype-live { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--text-muted); }
.snr-hype-pulse { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); animation: snr-live 2.4s ease-out infinite; }
@keyframes snr-live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
.snr-hype { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .snr-hype { grid-template-columns: repeat(2, minmax(0, 1fr)); } .snr-hype-col:nth-child(3) { display: none; } }
@media (max-width: 560px) { .snr-hype { grid-template-columns: minmax(0, 1fr); } .snr-hype-col:nth-child(2) { display: none; } }
.snr-hype-col {
position: relative; height: 288px; overflow: hidden; border-radius: 12px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.snr-hype-track { display: flex; flex-direction: column; animation: snr-hype-up var(--hype-dur, 40s) linear infinite; }
.snr-hype-col:nth-child(2) .snr-hype-track { animation-direction: reverse; }
.snr-hype-col:hover .snr-hype-track, .snr-hype-col:focus-within .snr-hype-track { animation-play-state: paused; }
@keyframes snr-hype-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.snr-hype-set { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.snr-hype-card {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
border: 1px solid var(--snr-hair); border-radius: 12px; background: var(--snr-surface); color: var(--text);
font: inherit; transition: background .2s, border-color .2s;
}
button.snr-hype-card { cursor: pointer; }
button.snr-hype-card:hover, button.snr-hype-card:focus-visible { background: rgba(255, 255, 255, .06); border-color: var(--snr-hair-strong); }
.snr-hype-art { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; }
.snr-hype-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-hype-art .snr-art-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 15px; }
.snr-hype-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: .95rem; color: var(--text); background: color-mix(in srgb, var(--purple) 30%, #1d1b24); }
.snr-hype-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.snr-hype-line { font-size: .84rem; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snr-hype-line b { color: var(--text); font-weight: 600; }
.snr-hype-sub { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-hype-sub i { display: inline-grid; width: 13px; height: 13px; flex: none; }
.snr-hype-sub svg { width: 13px; height: 13px; }
.snr-hype-follow .snr-hype-sub { color: color-mix(in srgb, var(--purple-light) 80%, #fff); }
.snr-hype-milestone .snr-hype-sub i { color: #4ade80; }
@media (prefers-reduced-motion: reduce) {
.snr-hype-track { animation: none; }
.snr-hype-col { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
.snr-hype-set[aria-hidden="true"] { display: none; }
.snr-hype-pulse { animation: none; }
}
/* ── Browse: the moving genre rows, set like a record-shop sign ──── */
.snr-genre-marquee { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 20px; }
.snr-gm-row {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.snr-gm-track { display: flex; width: max-content; animation: snr-gm-left 60s linear infinite; }
.snr-gm-b .snr-gm-track { animation-name: snr-gm-right; animation-duration: 72s; }
.snr-gm-row:hover .snr-gm-track, .snr-gm-row:focus-within .snr-gm-track { animation-play-state: paused; }
@keyframes snr-gm-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes snr-gm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.snr-gm-set { display: flex; align-items: center; flex: none; }
.snr-gm-item {
display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 4px; border: 0; background: none; cursor: pointer;
white-space: nowrap; color: color-mix(in srgb, var(--text) 52%, transparent); transition: color .2s;
}
.snr-gm-a .snr-gm-item { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.55rem; line-height: 1.2; }
.snr-gm-b .snr-gm-item { font: 600 .74rem/1.6 'DM Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.snr-gm-item:hover, .snr-gm-item:focus-visible { color: var(--text); }
.snr-gm-count { font: 600 .66rem/1 'DM Sans', sans-serif; font-style: normal; letter-spacing: .04em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.snr-gm-b .snr-gm-count { font-size: .62rem; }
.snr-gm-dot { flex: none; width: 4px; height: 4px; margin: 0 18px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.snr-gm-b .snr-gm-dot { width: 3px; height: 3px; margin: 0 14px; }
@media (max-width: 600px) { .snr-gm-a .snr-gm-item { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) {
.snr-gm-track { animation: none; }
.snr-gm-row { overflow-x: auto; }
.snr-gm-set[aria-hidden="true"] { display: none; }
}
/* ── Crates, refined: one curated tone each, records fanned across ─ */
.snr-genre-tile.snr-crate {
height: 156px; border-radius: 12px;
background:
radial-gradient(120% 80% at 50% 0%, hsl(var(--crate-h) var(--crate-s, 20%) 22% / .55), transparent 70%),
linear-gradient(180deg, hsl(var(--crate-h) calc(var(--crate-s, 20%) * .6) 13%), hsl(var(--crate-h) calc(var(--crate-s, 20%) * .5) 9%));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.snr-crate-recs { left: 14px; right: 14px; top: 12px; height: 100px; }
.snr-crate-rec {
width: 92px; height: 92px; border-radius: 3px;
left: calc(var(--k) * (100% - 92px) / 2); top: calc((2 - var(--k)) * 9px);
box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1);
transition: transform .4s var(--snr-ease);
}
.snr-genre-tile.snr-crate:hover .snr-crate-rec { transform: translateY(calc(-6px - var(--k) * 3px)); }
.snr-crate-divider {
height: 56px; padding: 11px 14px 0 58px;
background: linear-gradient(180deg, hsl(var(--crate-h) var(--crate-s, 20%) 24%), hsl(var(--crate-h) var(--crate-s, 20%) 19%));
border-top: 1px solid hsl(var(--crate-h) var(--crate-s, 20%) 36% / .8);
box-shadow: 0 -10px 18px -10px rgba(0, 0, 0, .7);
}
.snr-crate-divider::before { display: none; }
.snr-crate-tab { /* the index letter on the divider's tab, as in a record shop */
position: absolute; left: 14px; top: -14px; width: 32px; height: 40px; border-radius: 5px 5px 4px 4px;
display: grid; place-items: center; padding-bottom: 6px;
font: 600 1.05rem/1 'Playfair Display', Georgia, serif; color: #f4f2f8;
background: hsl(var(--crate-h) var(--crate-s, 20%) 28%);
box-shadow: inset 0 1px 0 hsl(var(--crate-h) var(--crate-s, 20%) 42% / .9), 0 6px 12px -6px rgba(0, 0, 0, .8);
}
.snr-crate .snr-genre-count { color: rgba(255, 255, 255, .58); }
@media (max-width: 760px) {
.snr-genre-tile.snr-crate { height: 140px; }
.snr-crate-rec { width: 76px; height: 76px; left: calc(var(--k) * (100% - 76px) / 2); top: calc((2 - var(--k)) * 7px); }
.snr-crate-divider { height: 52px; padding: 9px 12px 0 52px; }
.snr-crate-tab { left: 12px; width: 30px; height: 36px; font-size: .95rem; }
}
/* ═══════════════════════════════════════════════════════════
PASS 31 · Player controls — fit, size, labels, volume pill
═══════════════════════════════════════════════════════════ */
/* ── player icons: your original metal tiles ───────────────────────
The tiles keep their original finish. Reaching for one turns it to
brushed metal: a silver rim, a light sweep across the face, a lift
and a deeper shadow. Pressing sinks it into the bar. */
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) :is(.player-btn-icon, .player-btn-transport, .player-btn-queue, .player-bar-settings-btn) {
display: inline-grid !important; place-items: center; border: 0 !important;
background: transparent !important; box-shadow: none !important; position: relative;
}
.player-bar.snr-player-v2 .futurist-icon-host .futurist-icon-tile { width: var(--tile) !important; height: var(--tile) !important; }
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host .futurist-icon-tile { overflow: hidden; }
/* the light sweep, parked off the tile until hover */
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host .futurist-icon-tile::after {
content: ""; position: absolute; inset: -60%; pointer-events: none; z-index: 0;
background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .42) 48%, rgba(255, 255, 255, .1) 54%, transparent 62%);
transform: translateX(-70%); transition: transform .65s var(--snr-ease);
}
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host .futurist-icon-tile > * { position: relative; z-index: 1; }
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host:is(:hover, :focus-visible) .futurist-icon-tile::after { transform: translateX(70%); }
/* hover: brushed metal, lifted */
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host:is(:hover, :focus-visible) .futurist-icon-tile {
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
linear-gradient(160deg, rgba(255, 255, 255, .28) 0%, rgba(214, 222, 238, .14) 28%, rgba(140, 150, 175, .1) 52%, rgba(8, 10, 20, .6) 100%) !important;
border: 1px solid rgba(214, 224, 244, .5) !important;
border-top-color: rgba(255, 255, 255, .8) !important;
border-left-color: rgba(236, 242, 255, .55) !important;
border-bottom-color: rgba(10, 12, 24, .75) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .4),
inset 0 -2px 5px rgba(0, 0, 0, .4),
0 2px 0 rgba(0, 0, 0, .55),
0 12px 22px -6px rgba(0, 0, 0, .75),
0 0 16px -4px color-mix(in srgb, var(--purple-light) 40%, transparent) !important;
transform: translateY(-2px) scale(1.05) !important;
}
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host:is(:hover, :focus-visible) .futurist-icon-tile svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
/* press: sinks into the bar */
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host:active .futurist-icon-tile {
transform: translateY(1px) scale(.96) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 1px 0 rgba(0, 0, 0, .4) !important;
}
/* repeat one: a small badge on the tile's corner */
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) [data-repeat-mode="one"]::before {
content: "1"; position: absolute; z-index: 3; top: 0; right: 0; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px;
display: grid; place-items: center; font: 700 8px/1 'DM Sans', sans-serif; color: #120f1c;
background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
/* tile sizes in the bar: transport a step larger than the toggles */
:where(.player-bar) :where(.player-btn-icon, .player-btn-transport, .player-btn-queue, .player-bar-settings-btn) { --tile: 30px; }
.player-bar.snr-player-v2 .player-btn-transport { --tile: 34px; }
@media (prefers-reduced-motion: reduce) {
:is(.player-bar.snr-player-v2, #nowPlayingOverlay .now-playing-modal-controls) .futurist-icon-host .futurist-icon-tile::after { display: none; }
}
/* ── desktop bar: controls fit inside the 84px ───────────────────── */
@media (min-width: 769px) {
.player-bar.snr-player-v2 { align-items: center !important; }
.player-bar.snr-player-v2 .player-center {
display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
gap: 4px !important; height: 84px !important; padding: 0 !important; margin: 0 !important; min-width: 0;
}
.player-bar.snr-player-v2 .snr-transport { height: 42px; gap: 8px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat) { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
.player-bar.snr-player-v2 .snr-transport #btnShuffle { margin-right: 6px; }
.player-bar.snr-player-v2 .snr-transport #btnRepeat { margin-left: 6px; }
.player-bar.snr-player-v2 .snr-transport #btnPlay {
width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 6px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px -6px rgba(0, 0, 0, .8) !important;
}
.player-bar.snr-player-v2 .snr-transport #btnPlay::before, .player-bar.snr-player-v2 .snr-transport #btnPlay::after { inset: -2px !important; box-shadow: none !important; }
/* your layout: the waveform visualizer on its own row, the slim progress line
under it with times either side, all inside the 84px bar */
.player-bar.snr-player-v2 .player-center { gap: 2px !important; }
.player-bar.snr-player-v2 .player-center-main {
display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: 18px 14px;
align-items: center; column-gap: 10px; row-gap: 2px;
width: 100% !important; max-width: 620px !important; height: auto !important; margin: 0 !important;
}
.player-bar.snr-player-v2 .player-center-main > .waveform-mini { grid-column: 2; grid-row: 1; width: 100% !important; height: 18px !important; margin: 0 !important; }
.player-bar.snr-player-v2 .player-center-main > .waveform-mini canvas { width: 100% !important; height: 18px !important; display: block; }
.player-bar.snr-player-v2 .player-center-main :is(.progress-bar, .progress-bar-times) { display: contents !important; }
.player-bar.snr-player-v2 .player-center-main .progress-bar-track {
grid-column: 2; grid-row: 2; position: relative !important; width: 100% !important; height: 14px !important; margin: 0 !important;
display: flex; align-items: center;
}
.player-bar.snr-player-v2 .player-center-main .seek-slider { width: 100% !important; margin: -1px 0 !important; }
.player-bar.snr-player-v2 #timeCurrent, .player-bar.snr-player-v2 #timeTotal {
grid-row: 2; font: 500 .7rem/1 'DM Sans', sans-serif !important; font-variant-numeric: tabular-nums; color: var(--text-muted) !important; margin: 0 !important;
}
.player-bar.snr-player-v2 #timeCurrent { grid-column: 1; text-align: right; }
.player-bar.snr-player-v2 #timeTotal { grid-column: 3; text-align: left; }
/* right-hand group, centred: Lyrics · Queue · Volume │ Settings */
.player-bar.snr-player-v2 .player-right { align-self: center !important; display: flex !important; align-items: center !important; height: 84px; margin: 0 !important; padding: 0 !important; }
.player-bar.snr-player-v2 .player-right-icons { display: flex !important; align-items: center !important; gap: 4px !important; }
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
.snr-pdivider { width: 1px; height: 20px; margin: 0 6px; background: var(--snr-hair-strong); }
.player-bar.snr-player-v2 .player-left { align-self: center !important; }
}
@media (max-width: 768px) { .snr-pdivider { display: none; } }
/* ── hover labels ────────────────────────────────────────────────── */
.snr-ptip {
position: fixed; z-index: 100000; pointer-events: none; white-space: nowrap;
padding: 6px 10px; border-radius: 8px;
font: 600 .74rem/1 'DM Sans', sans-serif; letter-spacing: .01em; color: #f4f2f8;
background: rgba(24, 22, 31, .96); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px -10px rgba(0, 0, 0, .9);
opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .18s var(--snr-ease);
}
.snr-ptip.is-on { opacity: 1; transform: none; }
.snr-ptip.is-measuring { transition: none; visibility: hidden; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .snr-ptip { transition: none; transform: none; } }
/* ── volume: a slim pill with a thin track and a live percentage ─── */
.volume-popover.snr-vol-pill {
--snr-vol: 80%;
width: 44px !important; min-width: 0 !important; height: 168px !important; padding: 0 !important; margin-bottom: 12px !important;
display: block !important; border-radius: 22px !important;
background: rgba(22, 20, 29, .97) !important; border: 0 !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 36px -14px rgba(0, 0, 0, .9) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
transform-origin: 50% 100%;
animation: snr-vol-in .22s var(--snr-ease);
}
.volume-popover.snr-vol-pill.hidden { display: none !important; }
@keyframes snr-vol-in { from { opacity: 0; transform: translateX(-50%) translateY(6px) scaleY(.92); } to { opacity: 1; transform: translateX(-50%); } }
.snr-vol-pct {
position: absolute; top: 12px; left: 0; right: 0; text-align: center;
font: 600 .7rem/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.volume-popover.snr-vol-pill .volume-slider {
position: absolute !important; left: 50% !important; top: 94px !important;
width: 112px !important; height: 18px !important; margin: 0 0 0 -56px !important; padding: 0 !important;
transform: rotate(-90deg) !important; background: transparent !important; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
.volume-popover.snr-vol-pill .volume-slider::-webkit-slider-runnable-track {
height: 4px; border-radius: 999px; border: 0;
background: linear-gradient(90deg, var(--purple) 0%, var(--purple-light) var(--snr-vol), rgba(255, 255, 255, .14) var(--snr-vol));
}
.volume-popover.snr-vol-pill .volume-slider::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.volume-popover.snr-vol-pill .volume-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--purple-light)); }
.volume-popover.snr-vol-pill .volume-slider::-webkit-slider-thumb {
-webkit-appearance: none; width: 12px !important; height: 12px !important; margin-top: -4px; border-radius: 50%; border: 0;
background: #fff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important; transition: transform .15s var(--snr-ease);
}
.volume-popover.snr-vol-pill .volume-slider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.volume-popover.snr-vol-pill .volume-slider:hover::-webkit-slider-thumb,
.volume-popover.snr-vol-pill .volume-slider:active::-webkit-slider-thumb { transform: scale(1.25); }
.volume-popover.snr-vol-pill .volume-slider:focus-visible { outline: none; }
.volume-popover.snr-vol-pill .volume-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-light) 55%, transparent) !important; }
/* a soft mute mark at the foot of the pill */
.volume-popover.snr-vol-pill::after {
content: ""; position: absolute; left: 50%; bottom: 14px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
background: rgba(255, 255, 255, .18);
}
@media (prefers-reduced-motion: reduce) { .volume-popover.snr-vol-pill { animation: none; } }
/* ── Now Playing: same controls, roomier sizes ───────────────────── */
#nowPlayingOverlay .now-playing-modal-controls :is(.player-btn-icon) { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
#nowPlayingOverlay .now-playing-modal-controls .player-btn-transport { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; }
#nowPlayingOverlay .now-playing-modal-volume-wrap .volume-popover.snr-vol-pill { left: 50% !important; }
.player-bar.snr-player-v2 #playerSettingsBtnMobile { display: none !important; }
@media (min-width: 769px) { .player-bar.snr-player-v2 .player-center-main > .waveform-mini { background: none !important; box-shadow: none !important; border: 0 !important; } }
/* the visualizer and progress line sit above the buttons */
@media (min-width: 769px) {
.player-bar.snr-player-v2 .player-center-main { order: -1; }
.player-bar.snr-player-v2 .player-center { gap: 3px !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 32 · Player bar: progress on the top edge, one control line
• The progress line is the bar's top edge, running edge to edge
(as SoundCloud does). Its hit area straddles the edge.
• The visualizer sits above the buttons with the times either side.
• Song info, transport and the right-hand icons share one centre line.
• Sizes step down: play 44 · previous/next 36 · everything else 28.
═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
/* the edge line becomes the progress line */
.player-bar.snr-player-v2::before { display: none !important; }
.player-bar.snr-player-v2 .player-center-main .progress-bar-track {
position: absolute !important; left: 0 !important; right: 0 !important; top: -7px !important;
width: auto !important; height: 14px !important; margin: 0 !important; z-index: 6;
grid-column: auto; grid-row: auto;
}
.player-bar.snr-player-v2 .player-center-main .seek-slider {
--track-h: 2px;
display: block; width: 100% !important; height: 14px !important; margin: 0 !important;
}
.player-bar.snr-player-v2:hover .player-center-main .seek-slider,
.player-bar.snr-player-v2 .player-center-main .seek-slider:focus-visible { --track-h: 4px; }
.player-bar.snr-player-v2 .player-center-main .seek-slider::-webkit-slider-thumb { transform: scale(0) !important; transition: transform .18s var(--snr-ease) !important; }
.player-bar.snr-player-v2:hover .player-center-main .seek-slider::-webkit-slider-thumb,
.player-bar.snr-player-v2 .player-center-main .seek-slider:focus-visible::-webkit-slider-thumb { transform: scale(.85) !important; }
.player-bar.snr-player-v2 .player-center-main .seek-slider:active::-webkit-slider-thumb { transform: scale(1.05) !important; }
.player-bar.snr-player-v2 .player-center-main .seek-slider::-moz-range-thumb { transform: scale(0); transition: transform .18s; }
.player-bar.snr-player-v2:hover .player-center-main .seek-slider::-moz-range-thumb { transform: scale(.85); }
.player-bar.snr-player-v2 .seek-time-tooltip { top: -26px !important; bottom: auto !important; }
/* centre column: visualizer (with times) above the buttons */
.player-bar.snr-player-v2 .player-center {
justify-content: flex-end !important; gap: 6px !important; padding: 0 0 8px !important; height: 84px !important;
}
.player-bar.snr-player-v2 .player-center-main {
grid-template-rows: 18px !important; grid-template-columns: 40px minmax(0, 1fr) 40px !important; row-gap: 0 !important;
order: -1;
}
.player-bar.snr-player-v2 #timeCurrent, .player-bar.snr-player-v2 #timeTotal { grid-row: 1 !important; }
.player-bar.snr-player-v2 .snr-transport { height: 44px !important; gap: 10px !important; }
/* one centre line for everything: the transport row's (8px from the bottom, 44px tall) */
.player-bar.snr-player-v2 { align-items: end !important; }
.player-bar.snr-player-v2 .player-right { align-self: end !important; height: 44px !important; margin: 0 0 8px !important; }
.player-bar.snr-player-v2 .player-left { align-self: end !important; height: 52px; margin: 0 0 4px !important; display: flex; align-items: center; }
.player-bar.snr-player-v2 #nowPlayingStrip { height: 52px; }
.player-bar.snr-player-v2 .player-now-info__art-wrap,
.player-bar.snr-player-v2 .player-now-info__art { width: 48px !important; height: 48px !important; min-width: 48px !important; }
/* sizes: play 44 · previous/next 36 · shuffle, repeat and the right-hand icons 28 */
.player-bar.snr-player-v2 .snr-transport #btnPlay { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 4px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) { --tile: 36px; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) svg { width: 18px !important; height: 18px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat),
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) {
--tile: 28px; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
}
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat) svg,
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) svg { width: 14px !important; height: 14px !important; }
.player-bar.snr-player-v2 .player-right-icons :is(.queue-icon-img, .settings-icon-img) { width: 14px !important; height: 14px !important; }
.player-bar.snr-player-v2 .snr-transport #btnShuffle { margin-right: 4px !important; }
.player-bar.snr-player-v2 .snr-transport #btnRepeat { margin-left: 4px !important; }
.player-bar.snr-player-v2 .player-right-icons { gap: 6px !important; }
.player-bar.snr-player-v2 .player-right-icons .futurist-icon-tile,
.player-bar.snr-player-v2 .snr-transport .futurist-icon-tile { border-radius: 8px !important; }
}
@media (min-width: 769px) {
/* anchor the edge progress line to the whole bar, not the centre column */
.player-bar.snr-player-v2 .player-center,
.player-bar.snr-player-v2 .player-center-main { position: static !important; }
.player-bar.snr-player-v2 #playerSettingsBtn .futurist-icon-tile { height: var(--tile) !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 33 · Player bar refinements
• Three size tiers: play 46 · previous/next 32 · the rest 26.
• The times sit at the two ends of the top-edge progress line.
• The visualizer is centred over the buttons, as wide as they are.
• The heart sits beside the title; an empty artist avatar is hidden.
═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
/* sizes */
.player-bar.snr-player-v2 .snr-transport #btnPlay { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; margin: 0 6px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) { --tile: 32px; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) svg { width: 15px !important; height: 15px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat),
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) {
--tile: 26px; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
}
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat) svg,
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) svg,
.player-bar.snr-player-v2 .player-right-icons :is(.queue-icon-img, .settings-icon-img) { width: 13px !important; height: 13px !important; }
.player-bar.snr-player-v2 .snr-transport { gap: 12px !important; }
.player-bar.snr-player-v2 .player-right-icons .futurist-icon-tile,
.player-bar.snr-player-v2 .snr-transport .futurist-icon-tile { border-radius: 7px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) .futurist-icon-tile { border-radius: 8px !important; }
/* the times: at the two ends of the progress line */
.player-bar.snr-player-v2 #timeCurrent,
.player-bar.snr-player-v2 #timeTotal {
position: absolute !important; top: 7px !important; z-index: 7;
font: 500 .68rem/1 'DM Sans', sans-serif !important; letter-spacing: .02em; font-variant-numeric: tabular-nums;
color: var(--text-muted) !important; transition: color .2s;
}
.player-bar.snr-player-v2 #timeCurrent { left: 16px !important; right: auto !important; text-align: left !important; }
.player-bar.snr-player-v2 #timeTotal { right: 16px !important; left: auto !important; text-align: right !important; }
.player-bar.snr-player-v2:hover :is(#timeCurrent, #timeTotal) { color: var(--text) !important; }
/* the visualizer: centred over the buttons, as wide as they are */
.player-bar.snr-player-v2 .player-center-main {
grid-template-columns: minmax(0, 1fr) !important; justify-items: center;
width: 100% !important; max-width: none !important;
}
.player-bar.snr-player-v2 .player-center-main > .waveform-mini { grid-column: 1 !important; width: min(100%, 340px) !important; }
/* left: the heart beside the title */
.player-bar.snr-player-v2 .player-now-info__meta { flex: 0 1 auto !important; min-width: 0; max-width: 200px; }
.player-bar.snr-player-v2 .player-now-info__like { margin-left: 6px !important; flex: none; }
}
/* an artist avatar with no picture stays hidden (no broken-image icon) */
#nowPlayingArtistInline:is([src=""], :not([src])), #nowPlayingArtistInline.snr-img-missing { display: none !important; }
@media (min-width: 769px) {
.player-bar.snr-player-v2 :is(#timeCurrent, #timeTotal) { grid-column: auto !important; grid-row: auto !important; }
.player-bar.snr-player-v2 #timeCurrent { left: 18px !important; }
.player-bar.snr-player-v2 #timeTotal { right: 18px !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 34 · Player bar: the spinning record, centred and full size
The disc is 62px, centred top to bottom in the bar, with the cover
filling its round frame exactly (no clipped edge). The title and the
heart sit on the disc's centre line.
═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
.player-bar.snr-player-v2 .player-left { align-self: center !important; height: 84px !important; margin: 0 !important; display: flex; align-items: center; }
.player-bar.snr-player-v2 #nowPlayingStrip { height: 84px !important; overflow: visible !important; align-items: center !important; gap: 14px !important; }
.player-bar.snr-player-v2 .player-now-info__art-wrap {
position: relative; flex: none !important;
width: 62px !important; height: 62px !important; min-width: 62px !important; max-width: 62px !important; margin: 0 !important;
}
.player-bar.snr-player-v2 .player-now-info__art-wrap #nowPlayingArt,
.player-bar.snr-player-v2 #nowPlayingArt {
display: block; width: 62px !important; height: 62px !important; min-width: 0 !important; max-width: none !important;
margin: 0 !important; position: static !important; transform: none !important; object-fit: cover; border-radius: 50% !important;
}
.player-bar.snr-player-v2 .player-now-info__meta { gap: 3px; }
.player-bar.snr-player-v2 #nowPlayingTitle { font-size: .95rem !important; font-weight: 600 !important; line-height: 1.25 !important; }
.player-bar.snr-player-v2 .player-now-info__artist-line { font-size: .8rem !important; }
}
@media (min-width: 769px) {
/* times together at the right end of the progress line: 0:03 / 4:37 */
.player-bar.snr-player-v2 .player-center-main .progress-bar-times {
display: flex !important; align-items: center; gap: 5px;
position: absolute !important; top: 7px !important; right: 18px !important; left: auto !important; z-index: 7;
width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
}
.player-bar.snr-player-v2 :is(#timeCurrent, #timeTotal) { position: static !important; left: auto !important; right: auto !important; }
.player-bar.snr-player-v2 #timeCurrent { color: var(--text) !important; }
.player-bar.snr-player-v2 #timeTotal::before { content: "/"; margin-right: 5px; opacity: .5; }
}
/* ═══════════════════════════════════════════════════════════
PASS 35 · Player bar: smaller secondary icons, visualizer fit
play 46 (unchanged) · previous/next 28 · shuffle, repeat and the
right-hand icons 23. The visualizer is 300 × 20, sitting evenly
between the progress edge and the buttons.
═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) { --tile: 28px; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) svg { width: 13px !important; height: 13px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat),
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) {
--tile: 23px; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important;
}
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat) svg,
.player-bar.snr-player-v2 .player-right-icons :is(#btnLyricsCc, #btnQueue, #btnVolume, #playerSettingsBtn) svg,
.player-bar.snr-player-v2 .player-right-icons :is(.queue-icon-img, .settings-icon-img) { width: 11px !important; height: 11px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnShuffle, #btnRepeat) .futurist-icon-tile,
.player-bar.snr-player-v2 .player-right-icons .futurist-icon-tile { border-radius: 6px !important; }
.player-bar.snr-player-v2 .snr-transport :is(#btnPrev, #btnNext) .futurist-icon-tile { border-radius: 7px !important; }
.player-bar.snr-player-v2 .snr-transport { gap: 14px !important; }
.player-bar.snr-player-v2 .player-right-icons { gap: 8px !important; }
.player-bar.snr-player-v2 [data-repeat-mode="one"]::before { min-width: 11px; height: 11px; font-size: 7px; top: 1px; right: 1px; }
/* visualizer: 300 × 20, evenly between the progress edge and the buttons */
.player-bar.snr-player-v2 .player-center { gap: 5px !important; padding-bottom: 7px !important; }
.player-bar.snr-player-v2 .player-center-main { grid-template-rows: 20px !important; }
.player-bar.snr-player-v2 .player-center-main > .waveform-mini { width: 300px !important; max-width: 100% !important; height: 20px !important; }
.player-bar.snr-player-v2 .player-center-main > .waveform-mini canvas { height: 20px !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 36 · Your original headline, shown from the first paint
SONARA · the typewriter line · "Digital Culture. Upload. Evolve.
Connect." stay as they were; the buttons and tiles sit underneath.
Placeholder tiles hold the space until the songs arrive.
═══════════════════════════════════════════════════════════ */
.sonara-hero.snr-welcome-on > :is(.sonara-hero-label, .sonara-hero-title, .sonara-hero-subtitle) { display: block !important; }
.sonara-hero.snr-welcome-on .snr-welcome { margin-top: 20px; }
.snr-welcome-greeting { margin: 0; font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.snr-jump--skel { pointer-events: none; }
.snr-jump--skel .snr-jump-art { background: rgba(255, 255, 255, .05); }
.snr-jump--skel .snr-jump-title, .snr-jump--skel .snr-jump-artist { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .06); }
.snr-jump--skel .snr-jump-title { width: 70%; margin-bottom: 7px; }
.snr-jump--skel .snr-jump-artist { width: 45%; }
.snr-jump--skel { animation: snr-skel 1.4s ease-in-out infinite alternate; }
@keyframes snr-skel { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .snr-jump--skel { animation: none; } }
/* the Today band keeps its columns while Today's pick is still loading */
@media (min-width: 961px) {
#mainDefaultContent.snr-home-v2 #snrEarCandy { grid-column: 1 !important; }
#mainDefaultContent.snr-home-v2 .lyric-spotlight-section { grid-column: 2 !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 37 · "Popular on Sonara" cards as record sleeves
Same language as Today's pick: a square sleeve with the record
tucked inside — only its edge shows, like a real LP on a shelf.
Hover pulls the record out; the song that's playing keeps it
out, and it spins while the music runs.
═══════════════════════════════════════════════════════════ */
html body .snr-landscape-row { gap: 14px; padding-top: 2px; }
html body .snr-landscape-row > .snr-landscape-card {
--lc-sleeve: 132px; --lc-out: 74px;
width: auto !important; padding: 12px 12px 14px;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 70%, #1a1824) !important;
border: 1px solid var(--snr-hair, rgba(255, 255, 255, .07)) !important;
border-radius: 18px !important;
box-shadow: none !important; transform: none !important;
transition: border-color .25s !important;
}
html body .snr-landscape-row > .snr-landscape-card:hover {
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 70%, #1a1824) !important;
border-color: rgba(255, 255, 255, .14) !important; transform: none !important;
}
html body .snr-landscape-row > .snr-landscape-card::after { display: none !important; }
html body .snr-landscape-row > .snr-landscape-card.snr-now-playing { border-color: color-mix(in srgb, var(--purple-light) 45%, transparent) !important; }
/* sleeve + record */
.snr-lc-media { position: relative; width: calc(var(--lc-sleeve) + var(--lc-out) + 2px); height: var(--lc-sleeve); }
html body .snr-landscape-card .snr-lc-cover {
position: absolute; left: 0; top: 0; z-index: 2;
width: var(--lc-sleeve); height: var(--lc-sleeve);
border-radius: 4px; overflow: hidden;
background: #16141e;
box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* the sleeve's opening: a dark hairline on the right edge, a soft sheen on the face */
html body .snr-landscape-card .snr-lc-gradient {
background:
linear-gradient(90deg, transparent calc(100% - 3px), rgba(0, 0, 0, .45) calc(100% - 3px)),
linear-gradient(150deg, rgba(255, 255, 255, .12), transparent 38%);
}
html body .snr-landscape-card .snr-lc-cover-fallback {
font-size: 54px; font-weight: 800; color: rgba(255, 255, 255, .85);
}
.snr-lc-vinyl {
position: absolute; left: 4px; top: 4px; z-index: 1;
width: calc(var(--lc-sleeve) - 8px); height: calc(var(--lc-sleeve) - 8px);
border-radius: 50%;
background:
radial-gradient(circle, transparent 0 3.5%, #0c0a12 3.5% 4.5%, transparent 4.5%),
repeating-radial-gradient(circle, #121018 0 1.5px, #1b1824 1.5px 3px),
#111;
box-shadow: 0 8px 20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .13);
translate: 14px 0; rotate: 0deg;
transition: translate .45s var(--snr-ease, cubic-bezier(.2, .8, .2, 1)), rotate .45s var(--snr-ease, cubic-bezier(.2, .8, .2, 1));
}
.snr-lc-vinyl::before { /* light sheen on the grooves */
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 20deg, rgba(255, 255, 255, .14), transparent 15%, transparent 45%, rgba(255, 255, 255, .1) 60%, transparent 75%);
}
.snr-lc-label {
position: absolute; inset: 32%; border-radius: 50%;
background: var(--lc-art, none) center / cover, color-mix(in srgb, var(--purple) 60%, #000);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.snr-lc-label::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #0c0a12; }
.snr-landscape-card:hover .snr-lc-vinyl,
.snr-landscape-card.snr-now-playing .snr-lc-vinyl { translate: var(--lc-out) 0; rotate: 24deg; }
body.snr-playing .snr-landscape-card.snr-now-playing .snr-lc-vinyl { animation: lc-spin 3.2s linear infinite; }
@keyframes lc-spin { from { rotate: 24deg; } to { rotate: 384deg; } }
/* play button sits on the sleeve, bottom-left, clear of the record */
html body .snr-landscape-card .snr-lc-play {
left: 8px; right: auto; bottom: 8px; width: 34px; height: 34px;
background: rgba(255, 255, 255, .92) !important; color: #0c0a12 !important;
box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6) !important; font-size: 11px;
}
@media (hover: none) { html body .snr-landscape-card .snr-lc-play { opacity: 1; } }
/* text, set like Today's pick: a small caps eyebrow, then title and artist */
html body .snr-landscape-card .snr-lc-info { padding: 14px 2px 0; max-width: calc(var(--lc-sleeve) + var(--lc-out)); }
html body .snr-landscape-card .snr-lc-tags { display: block; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
html body .snr-landscape-card .snr-lc-tag {
display: inline; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0;
font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase;
color: var(--text-muted) !important;
}
/* the letters carry trailing tracking, so the dot gets less room on its left */
html body .snr-landscape-card .snr-lc-tag + .snr-lc-tag::before { content: "·"; letter-spacing: 0; margin: 0 .5em 0 .32em; }
html body .snr-landscape-card .snr-lc-title { font-size: 15px !important; font-weight: 750; letter-spacing: -.01em; }
html body .snr-landscape-card .snr-lc-artist { font-size: 13px; margin-top: 3px; color: var(--text-muted); }
@media (max-width: 600px) {
html body .snr-landscape-row > .snr-landscape-card { --lc-sleeve: 112px; --lc-out: 62px; padding: 10px 10px 12px; border-radius: 16px !important; }
html body .snr-landscape-card .snr-lc-title { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
.snr-lc-vinyl { transition: none; }
body.snr-playing .snr-landscape-card.snr-now-playing .snr-lc-vinyl { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
PASS 38 · Sidebar reaches its last item · Genre pages
The player bar sits over the bottom of the sidebar, so the menu
scrolls far enough for its last item to clear the bar.
Every genre (home crates, the moving rows, Browse tiles) opens a
genre page, as on Spotify / Apple Music / SoundCloud.
═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
.sidebar .nav-main { padding-bottom: calc(84px + 24px) !important; scroll-padding-bottom: calc(84px + 24px); }
}
/* the genre page replaces the Browse landing while it's open */
#browseSection.snr-genre-open > :not(#snrGenrePage) { display: none !important; }
#browseSection:not(.snr-genre-open) > #snrGenrePage { display: none; }
.snr-gp { display: flex; flex-direction: column; gap: var(--snr-shelf-gap, 48px); }
.snr-gp-back {
align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
height: 34px; padding: 0 14px 0 8px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
color: var(--text); font: 600 .84rem/1 inherit;
margin-bottom: calc(var(--snr-shelf-gap, 48px) * -1 + 16px);
}
.snr-gp-back:hover { background: rgba(255, 255, 255, .08); }
.snr-gp-hero {
position: relative; display: flex; align-items: flex-end; gap: 32px;
padding: 32px; border-radius: 22px; overflow: hidden;
background:
radial-gradient(120% 140% at 0% 0%, hsl(var(--gp-h) var(--gp-s) 30% / .95), transparent 60%),
linear-gradient(180deg, hsl(var(--gp-h) var(--gp-s) 18%), color-mix(in srgb, var(--bg-dark, #0b0a12) 80%, #1a1824));
border: 1px solid var(--snr-hair, rgba(255, 255, 255, .07));
}
/* up to three sleeves, fanned like records pulled from the crate */
.snr-gp-stack { position: relative; flex: none; width: 196px; height: 176px; }
.snr-gp-sleeve {
position: absolute; bottom: 0; left: calc(var(--k) * 22px); width: 152px; height: 152px;
border-radius: 6px; overflow: hidden; rotate: calc((var(--k) - 1) * 4deg);
box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .1);
background: #16141e;
}
.snr-gp-sleeve img, .snr-gp-sleeve .snr-art-ph { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 56px; font-weight: 800; }
.snr-gp-head { min-width: 0; }
.snr-gp-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.snr-gp-title { margin: 0; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; overflow-wrap: anywhere; }
.snr-gp-meta { margin: 12px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.snr-gp-actions { display: flex; gap: 10px; margin-top: 20px; }
.snr-gp-actions button {
display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
font: 700 .92rem/1 inherit;
}
.snr-gp-play { border: 0; background: #fff; color: #0c0a12; }
.snr-gp-play:hover { filter: brightness(.92); }
.snr-gp-shuffle { border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .2); color: #fff; }
.snr-gp-shuffle:hover { background: rgba(255, 255, 255, .1); }
.snr-gp-sec .snr-shelf-title { margin-bottom: 16px; }
.snr-gp-top--one { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; max-width: 640px; }
.snr-gp-top li:nth-child(-n + 3) .snr-chart-rank { color: var(--text); }
/* new releases and artists: one swipeable row each */
.snr-gp-row, .snr-gp-artists {
display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 16px;
overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin;
}
.snr-gp-card, .snr-gp-artist {
display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; background: none;
color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.snr-gp-card-art, .snr-gp-artist-art { width: 156px; height: 156px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .85); }
.snr-gp-artist { align-items: center; text-align: center; }
.snr-gp-artist-art { border-radius: 50%; }
:is(.snr-gp-card-art, .snr-gp-artist-art) :is(img, .snr-art-ph) { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 44px; font-weight: 800; transition: transform .4s var(--snr-ease, ease); }
:is(.snr-gp-card, .snr-gp-artist):hover :is(img, .snr-art-ph) { transform: scale(1.04); }
.snr-gp-card-title { max-width: 100%; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-gp-card-sub { max-width: 100%; font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
.snr-gp { gap: 36px; }
.snr-gp-back { margin-bottom: -24px; }
.snr-gp-hero { flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px 18px; }
.snr-gp-stack { width: 150px; height: 130px; }
.snr-gp-sleeve { width: 112px; height: 112px; left: calc(var(--k) * 16px); }
.snr-gp-row, .snr-gp-artists { grid-auto-columns: 128px; gap: 12px; }
.snr-gp-card-art, .snr-gp-artist-art { width: 128px; height: 128px; }
}
@media (prefers-reduced-motion: reduce) { :is(.snr-gp-card, .snr-gp-artist):hover :is(img, .snr-art-ph) { transform: none; } }
/* ═══════════════════════════════════════════════════════════
PASS 39 · New releases: arrows on the row's edges
The row moves on by itself (app.js autoAdvanceNewReleases); on a desktop with a mouse,
‹ › appear over the ends of the row on hover (as in Apple Music)
and move one screenful. Phones swipe. Each arrow hides at its end.
═══════════════════════════════════════════════════════════ */
.snr-scroller { position: relative; }
#mainDefaultContent.snr-home-v2 .snr-scroller > .snr-nav-btn { display: none !important; }
@media (hover: hover) and (pointer: fine) {
#mainDefaultContent.snr-home-v2 .snr-scroller > .snr-nav-btn {
display: grid !important; place-items: center;
position: absolute; top: calc(50% - 4px); z-index: 3; translate: 0 -50%;
width: 40px; height: 40px; margin: 0; padding: 0 0 2px; border-radius: 50%; cursor: pointer;
font-size: 1.5rem; line-height: 1; color: #fff;
background: rgba(12, 10, 18, .78); border: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
opacity: 0; transition: opacity .2s, background .2s;
}
#mainDefaultContent.snr-home-v2 .snr-scroller > #newRelPrev { left: 8px; }
#mainDefaultContent.snr-home-v2 .snr-scroller > #newRelNext { right: 8px; }
#mainDefaultContent.snr-home-v2 .snr-scroller:hover > .snr-nav-btn,
#mainDefaultContent.snr-home-v2 .snr-scroller > .snr-nav-btn:focus-visible { opacity: 1; }
#mainDefaultContent.snr-home-v2 .snr-scroller > .snr-nav-btn:hover { background: rgba(40, 36, 54, .92); }
#mainDefaultContent.snr-home-v2 .snr-scroller > .snr-nav-btn.is-end { opacity: 0; pointer-events: none; }
}
/* ═══════════════════════════════════════════════════════════
PASS 40 · Made for you: a page for each mix (discover.js)
Like a playlist on Spotify / Apple Music: the cover, who's in it,
Play and Shuffle, then every song numbered with its length.
═══════════════════════════════════════════════════════════ */
.snr-mixpage { display: flex; flex-direction: column; gap: 28px; }
.snr-mp-back {
align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
height: 34px; padding: 0 14px 0 8px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
color: var(--text); font: 600 .84rem/1 inherit;
}
.snr-mp-back:hover { background: rgba(255, 255, 255, .08); }
.snr-mp-hero {
display: flex; align-items: flex-end; gap: 28px; padding: 28px; border-radius: 22px;
background: linear-gradient(180deg, hsl(var(--mix-hue) 45% 22%), color-mix(in srgb, var(--bg-dark, #0b0a12) 82%, #1a1824));
border: 1px solid var(--snr-hair, rgba(255, 255, 255, .07));
}
.snr-mp-cover {
position: relative; flex: none; width: 220px; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
background: hsl(var(--mix-hue) 55% 18%);
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.snr-mp-head { min-width: 0; }
.snr-mp-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.snr-mp-title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; color: #fff; overflow-wrap: anywhere; }
.snr-mp-by { margin: 12px 0 0; font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .88); }
.snr-mp-meta { margin: 4px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .65); }
.snr-mp-actions { display: flex; gap: 10px; margin-top: 20px; }
.snr-mp-actions button {
display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
font: 700 .92rem/1 inherit;
}
.snr-mp-actions svg { width: 16px; height: 16px; }
.snr-mp-play { border: 0; background: #fff; color: #0c0a12; }
.snr-mp-play:hover { filter: brightness(.92); }
.snr-mp-shuffle { border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .2); color: #fff; }
.snr-mp-shuffle:hover { background: rgba(255, 255, 255, .1); }
/* the song list */
.snr-mp-list { list-style: none; margin: 0; padding: 0; }
.snr-mp-row {
display: grid; grid-template-columns: 32px 44px minmax(0, 1fr) auto 52px; align-items: center; gap: 14px;
min-height: 60px; padding: 6px 12px 6px 6px; border-radius: 8px; cursor: pointer; color: var(--text);
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.snr-mp-row:hover, .snr-mp-row:focus-visible { background: rgba(255, 255, 255, .055); outline: none; }
.snr-mp-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .9rem; }
.snr-mp-art { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: hsl(var(--mix-hue) 40% 20%); }
.snr-mp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-mp-mono { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; color: rgba(255, 255, 255, .8); }
.snr-mp-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.snr-mp-song { max-width: 100%; font-size: .93rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-mp-artist {
max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
font: .8rem/1.2 inherit; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mp-artist:hover { color: var(--text); text-decoration: underline; }
.snr-mp-plays, .snr-mp-time { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.snr-mp-time { text-align: right; }
.snr-mp-row.is-current .snr-mp-song, .snr-mp-row.is-current .snr-mp-num { color: color-mix(in srgb, var(--purple-light) 85%, #fff); }
@media (max-width: 760px) {
.snr-mixpage { gap: 22px; }
.snr-mp-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 18px; }
.snr-mp-cover { width: 160px; }
.snr-mp-row { grid-template-columns: 24px 44px minmax(0, 1fr) 44px; gap: 12px; padding-right: 6px; }
.snr-mp-plays { display: none; }
}
/* ═══════════════════════════════════════════════════════════
PASS 41 · Player bar, one row (desktop)
Left: previous · play · next · queue. Centre: the visualizer, the
progress line under it and the times under that (elapsed left,
length right); all three share one width. The sound-settings
button sits beside the visualizer in its own column, clear of the
times. Right: shuffle · repeat · volume · lyrics │ record, title,
heart. Sizes follow importance: play 56; previous, next and queue
36px buttons (32px tile, 15px glyph), queue set a little apart; the
secondary icons on the right 33px (29px tile, 14px glyph); the
sound-settings button a quieter 22px (18px tile). The visualizer sits
in a glass layer whose edge picks up the beat while music plays.
The visualizer and progress line are at most 440px wide; with the
settings button they sit centred between the two sides.
The wrappers step aside (display: contents) so every control sits in
one bar-wide grid; all ids and handlers are unchanged. The doubled
class outranks the older PASS 31–35 player rules. Phones keep their
own mini player.
═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
html body .player-bar.snr-player-v2.snr-player-v2 {
display: grid !important;
grid-template-columns: 36px 56px 36px 0px 36px minmax(12px, 1fr) minmax(160px, 440px) 22px minmax(12px, 1fr) 33px 33px 33px 33px 1px minmax(180px, 260px);
grid-template-rows: 1fr auto auto auto 1fr;
grid-template-areas:
"prev play next . queue . . . . shuf rep vol lyr div np"
"prev play next . queue . viz set . shuf rep vol lyr div np"
"prev play next . queue . seek . . shuf rep vol lyr div np"
"prev play next . queue . time . . shuf rep vol lyr div np"
"prev play next . queue . . . . shuf rep vol lyr div np";
column-gap: 10px !important; row-gap: 0 !important;
align-items: center !important;
height: 84px !important; padding: 0 20px !important;
}
html body .player-bar.snr-player-v2.snr-player-v2 :is(.player-left, .player-center, .player-right, .player-right-icons, .snr-transport, .player-center-main, .player-center-main .progress-bar, .player-center-main .progress-bar-times) {
display: contents !important;
}
html body .player-bar.snr-player-v2.snr-player-v2 #btnPrev { grid-area: prev !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnPlay { grid-area: play !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnNext { grid-area: next !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnQueue { grid-area: queue !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnShuffle { grid-area: shuf !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnRepeat { grid-area: rep !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .volume-wrap { grid-area: vol !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnLyricsCc { grid-area: lyr !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .snr-pdivider { grid-area: div !important; display: block !important; width: 1px; height: 36px; margin: 0 !important; background: var(--snr-hair-strong, rgba(255, 255, 255, .14)); }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnPrev, #btnPlay, #btnNext, #btnQueue, #btnShuffle, #btnRepeat, .volume-wrap, #btnLyricsCc) {
justify-self: center !important; align-self: center !important; margin: 0 !important;
}
/* proportions (same icon designs): one big play, small companions */
html body .player-bar.snr-player-v2.snr-player-v2 #btnPlay { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnPrev, #btnNext, #btnShuffle, #btnRepeat, #btnQueue, #btnVolume, #btnLyricsCc, #playerSettingsBtn) {
padding: 0 !important; display: grid !important; place-items: center !important;
}
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnPrev, #btnNext, #btnShuffle, #btnRepeat, #btnQueue, #btnVolume, #btnLyricsCc, #playerSettingsBtn) .futurist-icon-tile { display: grid !important; place-items: center !important; }
/* previous · next · queue */
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnPrev, #btnNext, #btnQueue) { --tile: 32px; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnPrev, #btnNext, #btnQueue) .futurist-icon-tile { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnPrev, #btnNext, #btnQueue) :is(svg, .queue-icon-img) { width: 15px !important; height: 15px !important; }
/* right-hand icons */
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnShuffle, #btnRepeat, #btnVolume, #btnLyricsCc) { --tile: 29px; width: 33px !important; height: 33px !important; min-width: 33px !important; min-height: 33px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnShuffle, #btnRepeat, #btnVolume, #btnLyricsCc) .futurist-icon-tile { width: 29px !important; height: 29px !important; border-radius: 8px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#btnShuffle, #btnRepeat, #btnVolume, #btnLyricsCc) svg { width: 14px !important; height: 14px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .volume-wrap { width: 33px !important; height: 33px !important; }
/* sound settings: an accessory to the visualizer, so the quietest */
html body .player-bar.snr-player-v2.snr-player-v2 #playerSettingsBtn { --tile: 18px; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #playerSettingsBtn .futurist-icon-tile { width: 18px !important; height: 18px !important; border-radius: 5px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #playerSettingsBtn :is(svg, .settings-icon-img) { width: 10px !important; height: 10px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .snr-settings-wrap { width: 22px !important; height: 22px !important; }
/* centre: visualizer, progress line and times share the one column */
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main > .waveform-mini {
grid-area: viz !important; justify-self: stretch !important; align-self: center !important;
width: 100% !important; max-width: none !important; height: 24px !important; margin: 0 !important; order: 0 !important;
position: relative; overflow: hidden; border: 0 !important; border-radius: 8px !important;
/* the glass layer: a soft dark well with a lit top edge */
background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .3)) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .06),
inset 0 1px 0 rgba(255, 255, 255, .07),
0 0 calc(var(--beat, 0) * 18px) color-mix(in srgb, var(--purple) calc(var(--beat, 0) * 55%), transparent) !important;
}
/* its edge in the waveform's own colours, brighter on the beat */
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main > .waveform-mini::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(90deg, rgba(236, 72, 153, .45), rgba(168, 85, 247, .3) 50%, rgba(34, 211, 238, .45));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
opacity: calc(.35 + var(--beat, 0) * .65);
}
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main > .waveform-mini canvas { width: 100% !important; height: 100% !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .snr-settings-wrap { grid-area: set !important; justify-self: center !important; align-self: center !important; margin: 0 !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main .progress-bar-track {
grid-area: seek !important; position: relative !important; inset: auto !important;
width: 100% !important; height: 14px !important; margin: 6px 0 2px !important; transform: none !important;
}
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main .seek-slider { --track-h: 4px; width: 100% !important; height: 14px !important; margin: 0 !important; }
/* the progress dot: small, with a slim ring; it grows a little on hover */
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main .seek-slider::-webkit-slider-thumb {
width: 10px !important; height: 10px !important; transform: scale(1) !important; transition: transform .15s ease-out !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-mid, #7c6cff) 65%, transparent), 0 0 8px color-mix(in srgb, var(--purple) 40%, transparent) !important;
}
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main .seek-slider:hover::-webkit-slider-thumb { transform: scale(1.2) !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main .seek-slider::-moz-range-thumb { width: 10px !important; height: 10px !important; transform: scale(1) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-mid, #7c6cff) 65%, transparent) !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#timeCurrent, #timeTotal) {
grid-area: time !important; position: static !important; inset: auto !important; margin: 0 !important;
font-size: .78rem !important; line-height: 1.2 !important; color: var(--text-muted) !important; font-variant-numeric: tabular-nums;
}
html body .player-bar.snr-player-v2.snr-player-v2 #timeCurrent { justify-self: start !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #timeTotal { justify-self: end !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #timeTotal::before { content: none !important; }
/* now playing on the right */
html body .player-bar.snr-player-v2.snr-player-v2 #nowPlayingStrip {
grid-area: np !important; min-width: 0; width: auto !important; height: 84px !important; margin: 0 0 0 4px !important;
display: flex !important; align-items: center !important; gap: 12px !important; justify-self: stretch;
}
html body .player-bar.snr-player-v2.snr-player-v2 .player-now-info__meta { flex: 1 1 auto !important; min-width: 0; max-width: none !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-now-info__like { margin-left: auto !important; }
html body .player-bar.snr-player-v2.snr-player-v2 :is(#nowPlayingTitle, .player-now-info__artist-line) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 769px) and (max-width: 1149px) {
html body .player-bar.snr-player-v2.snr-player-v2 { grid-template-columns: 36px 54px 36px 0px 36px minmax(4px, 1fr) minmax(120px, 360px) 22px minmax(4px, 1fr) 33px 33px 33px 33px 1px minmax(140px, 210px); column-gap: 8px !important; padding: 0 14px !important; }
html body .player-bar.snr-player-v2.snr-player-v2 #btnPlay { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; }
}
/* ═══════════════════════════════════════════════════════════
PASS 42 · Recently played, back beside the hero
Your last songs, newest first, in the same card as Today's pick:
cover (play mark on hover, equalizer on the song that's playing),
title, artist and when you played it; Clear empties the list.
Wide screens: beside the headline, four songs, with "Popular right
now" full width underneath. Narrower: under the hero, three songs.
═══════════════════════════════════════════════════════════ */
.sonara-hero.snr-welcome-on > .snr-recent { display: flex !important; } /* PASS 27 hides the hero's other children */
.snr-recent {
display: flex; flex-direction: column; gap: 10px; min-width: 0;
padding: 18px 16px 14px; border-radius: 22px;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 70%, #1a1824);
border: 1px solid var(--snr-hair, rgba(255, 255, 255, .07));
}
.snr-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; }
.snr-recent-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.snr-recent-clear {
border: 0; background: none; padding: 4px 2px; cursor: pointer;
font: 600 .75rem/1 inherit; color: var(--text-muted);
}
.snr-recent-clear:hover, .snr-recent-clear:focus-visible { color: var(--text); text-decoration: underline; }
.snr-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.snr-recent-list > li:nth-child(n + 6) { display: none; }
.snr-recent-row {
width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
padding: 6px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
color: var(--text); text-align: left; font: inherit;
transition: background .2s;
}
.snr-recent-row:hover, .snr-recent-row:focus-visible { background: rgba(255, 255, 255, .055); outline: none; }
.snr-recent-art {
position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
background: color-mix(in srgb, var(--purple) 22%, #15131f);
box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
}
.snr-recent-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-recent-mono { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; color: rgba(255, 255, 255, .8); }
.snr-recent-play {
position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
background: rgba(10, 8, 18, .55); opacity: 0; transition: opacity .2s;
}
.snr-recent-play svg { width: 18px; height: 18px; }
.snr-recent-row:hover .snr-recent-play, .snr-recent-row:focus-visible .snr-recent-play { opacity: 1; }
.snr-recent-row.snr-now-playing .snr-recent-play { display: none; }
.snr-recent-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.snr-recent-song { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-recent-artist { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-recent-row.snr-now-playing .snr-recent-song { color: color-mix(in srgb, var(--purple-light) 85%, #fff); }
.snr-recent-when { font-size: .72rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.snr-recent-empty { display: flex; align-items: center; gap: 12px; padding: 14px 6px; font-size: .85rem; color: var(--text-muted); }
.snr-recent-empty-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.snr-recent-empty-icon svg { width: 18px; height: 18px; }
/* wide screens: beside the headline (label, title, subtitle, buttons);
"Popular right now" runs the full width underneath, 3 × 2 */
@media (min-width: 1100px) {
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; /* the 1fr row absorbs any extra panel height */
grid-template-areas: "label rec" "title rec" "sub rec" "head rec" ". rec" "plabel plabel" "grid grid";
column-gap: 40px; align-items: start;
}
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on > .snr-welcome { display: contents !important; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on > .sonara-hero-label { grid-area: label; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on > .sonara-hero-title { grid-area: title; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on > .sonara-hero-subtitle { grid-area: sub; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on .snr-welcome-head { grid-area: head; margin: 20px 0 0 !important; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on .snr-shelf-label { grid-area: plabel; margin-top: 28px !important; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on .snr-jump-grid { grid-area: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on > .snr-recent { grid-area: rec; align-self: start; }
/* compact: four songs, tighter rows */
.snr-recent { padding: 14px 12px 10px; gap: 6px; }
.snr-recent-list > li:nth-child(n + 5) { display: none; }
.snr-recent-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 4px 6px; }
.snr-recent-art { width: 38px; height: 38px; border-radius: 7px; }
.snr-recent-song { font-size: .86rem; }
.snr-recent-artist { font-size: .75rem; }
}
/* narrower: under the hero, three songs */
@media (max-width: 1099px) {
#mainDefaultContent.snr-home-v2 #sonaraHero.snr-welcome-on > .snr-recent { margin-top: 24px; }
.snr-recent-list > li:nth-child(n + 4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .snr-recent-row, .snr-recent-play { transition: none; } }
/* ═══════════════════════════════════════════════════════════
PASS 43 · New from artists you follow (home-v2.js)
A shelf right after New releases: the followed artists' faces
beside the title, then their newest songs (genre-page cards) with
a NEW badge on anything added since your last visit. Following no
one yet: four suggested artists with Follow buttons.
═══════════════════════════════════════════════════════════ */
#mainDefaultContent.snr-home-v2 #snrFollowing { order: 2; } /* same slot as New releases; sits after it */
.snr-following[hidden] { display: none !important; }
.snr-following-titles { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.snr-following-faces { display: flex; align-items: center; }
.snr-following-faces[hidden] { display: none; }
.snr-face {
width: 26px; height: 26px; border-radius: 50%; overflow: hidden; margin-left: -8px;
box-shadow: 0 0 0 2px var(--bg-dark, #0b0a12); background: #1b1824;
}
.snr-face:first-child { margin-left: 0; }
.snr-face :is(img, .snr-art-ph) { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.snr-face-count { margin-left: 8px; font-size: .8rem; color: var(--text-muted); }
.snr-following-play[hidden] { display: none !important; }
.snr-following-play { white-space: nowrap; flex: none; }
.snr-follow-card .snr-gp-card-art { position: relative; }
.snr-follow-new {
position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 999px;
font: 700 .62rem/1 inherit; letter-spacing: .08em; text-transform: uppercase; color: #0c0a12;
background: linear-gradient(135deg, #f0abfc, #a5f3fc);
box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6);
}
.snr-follow-artist {
padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
}
.snr-follow-artist:hover, .snr-follow-artist:focus-visible { color: var(--text); text-decoration: underline; }
/* following no one yet */
.snr-follow-empty {
display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 18px;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 70%, #1a1824);
border: 1px solid var(--snr-hair, rgba(255, 255, 255, .07));
}
.snr-follow-empty-text { margin: 0; font-size: .92rem; color: var(--text-muted); }
.snr-follow-suggest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.snr-follow-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.snr-follow-pick-art {
width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; margin-bottom: 6px;
background: #1b1824; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .85);
}
.snr-follow-pick-art :is(img, .snr-art-ph) { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 26px; font-weight: 800; }
.snr-follow-pick-name { max-width: 100%; font-size: .88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-follow-pick-sub { font-size: .75rem; color: var(--text-muted); }
.snr-follow-btn {
margin-top: 6px; height: 30px; padding: 0 16px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: var(--text); font: 600 .8rem/1 inherit;
}
.snr-follow-btn:hover, .snr-follow-btn:focus-visible { background: #fff; color: #0c0a12; border-color: #fff; }
@media (max-width: 600px) {
.snr-follow-suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snr-following-titles { gap: 8px; }
}
/* ═══════════════════════════════════════════════════════════
PASS 44 · Your week in music + Song radio (home-v2.js)
The week card sits after the Today's pick + Lyric pair, before
Charts: time listened, the last 7 days as bars, top
artist and top 3 songs. Song radio adds a pill under the artist in
Now Playing (the song page and the ⋯ menus get plain items).
═══════════════════════════════════════════════════════════ */
#mainDefaultContent.snr-home-v2 #snrWeek { order: 5; grid-column: 1 / -1; } /* lyric is earlier in the page, so this lands after the Today's pick + Lyric pair */
.snr-week[hidden] { display: none !important; }
.snr-week-titles { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.snr-week-range { font-size: .82rem; color: var(--text-muted); }
.snr-week-play[hidden] { display: none !important; }
.snr-week-play { white-space: nowrap; flex: none; }
.snr-week-card {
display: grid; grid-template-columns: 1.1fr 1.2fr .8fr 1.5fr; gap: 1px; overflow: hidden;
border-radius: 18px; border: 1px solid var(--snr-hair, rgba(255, 255, 255, .07));
background: var(--snr-hair, rgba(255, 255, 255, .07));
}
.snr-week-panel {
display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 72%, #1a1824);
border: 0; text-align: left; color: inherit; font: inherit;
}
.snr-week-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.snr-week-big {
font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
background: linear-gradient(120deg, #f0abfc, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.snr-week-sub { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-week-genre {
align-self: flex-start; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
font-size: .74rem; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .07);
}
.snr-week-trend { margin-top: 6px; font-size: .76rem; font-weight: 600; color: #86efac; }
.snr-week-trend.is-down { color: var(--text-muted); }
/* 7-day bars */
.snr-week-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; min-height: 96px; }
.snr-week-day { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.snr-week-bar { flex: 1; width: 100%; max-width: 22px; display: flex; align-items: flex-end; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.snr-week-bar > span { display: block; width: 100%; border-radius: 6px; background: rgba(255, 255, 255, .28); }
.snr-week-day.is-today .snr-week-bar > span { background: linear-gradient(180deg, #f0abfc, #a5f3fc); box-shadow: 0 0 14px -2px rgba(240, 171, 252, .45); }
.snr-week-dl { font-size: .7rem; color: var(--text-muted); }
.snr-week-day.is-today .snr-week-dl { color: var(--text); font-weight: 700; }
/* top artist */
.snr-week-artist { cursor: pointer; align-items: flex-start; }
.snr-week-artist:hover, .snr-week-artist:focus-visible { background: color-mix(in srgb, var(--bg-dark, #0b0a12) 60%, #2a2636); }
.snr-week-face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #1b1824; margin-bottom: 6px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .85); }
.snr-week-face :is(img, .snr-art-ph), .snr-week-cover :is(img, .snr-art-ph) { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-weight: 800; }
.snr-week-face .snr-art-ph { font-size: 22px; }
.snr-week-name { max-width: 100%; font-size: .95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* top songs */
.snr-week-songs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.snr-week-song {
width: 100%; display: grid; grid-template-columns: 14px 38px minmax(0, 1fr) auto; align-items: center; gap: 10px;
padding: 5px 8px 5px 2px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.snr-week-song:hover:not(:disabled), .snr-week-song:focus-visible { background: rgba(255, 255, 255, .06); }
.snr-week-song:disabled { cursor: default; opacity: .6; }
.snr-week-rank { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-align: center; }
.snr-week-cover { width: 38px; height: 38px; border-radius: 7px; overflow: hidden; background: #1b1824; }
.snr-week-cover .snr-art-ph { font-size: 14px; }
.snr-week-text { display: flex; flex-direction: column; min-width: 0; }
.snr-week-song-t { font-size: .86rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-week-n { font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
.snr-week-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.snr-week-panel { padding: 14px 16px; }
.snr-week-big { font-size: 1.6rem; }
.snr-week-songs { grid-column: 1 / -1; }
.snr-week-days { gap: 5px; min-height: 80px; }
.snr-week-time .snr-week-sub { white-space: normal; }
/* top artist: one full-width row (photo, then name and plays) */
.snr-week-artist {
grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center;
}
.snr-week-artist .snr-week-label { grid-column: 1 / -1; }
.snr-week-artist .snr-week-face { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
}
/* Song radio pill in Now Playing */
.snr-np-radio {
display: inline-flex; align-items: center; gap: 7px; align-self: center; margin: 10px auto 0; height: 30px; padding: 0 14px;
border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05);
color: var(--text); font: 600 .78rem/1 inherit; cursor: pointer;
}
.snr-np-radio svg { width: 15px; height: 15px; }
.snr-np-radio:hover, .snr-np-radio:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
/* ═══════════════════════════════════════════════════════════
PASS 45 · Dig the crate (home-v2.js dig)
A button on the home Browse shelf and the Browse page opens a crate:
sleeves flip forward, fast then slower, until one lands and its
record slides out. Play starts it with a song radio behind it.
═══════════════════════════════════════════════════════════ */
.snr-dig-btn {
display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; margin-left: auto; margin-right: 12px;
border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05);
color: var(--text); font: 600 .82rem/1 inherit; cursor: pointer; white-space: nowrap;
}
.snr-dig-btn svg { width: 16px; height: 16px; }
.snr-dig-btn:hover, .snr-dig-btn:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
#browseSection .browse-section-header .snr-dig-btn { margin: 14px 0 0; }
.snr-dig[hidden] { display: none !important; }
.snr-dig { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; }
.snr-dig-backdrop { position: absolute; inset: 0; background: rgba(6, 5, 10, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.snr-dig-panel {
position: relative; width: min(380px, 100%); padding: 26px 24px 24px; border-radius: 22px; text-align: center;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 80%, #1d1a28);
border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
}
.snr-dig-close {
position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255, 255, 255, .06); color: var(--text-muted); font-size: 14px;
}
.snr-dig-close:hover { background: rgba(255, 255, 255, .14); color: var(--text); }
.snr-dig-eyebrow { margin: 0 0 18px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
/* the crate: two sleeves behind, the front one flips, a wooden lip in front */
.snr-dig-crate { position: relative; width: 220px; height: 236px; margin: 90px auto 18px; perspective: 700px; }
.snr-dig-back, .snr-dig-front {
position: absolute; left: 10px; bottom: 26px; width: 200px; height: 200px; border-radius: 4px; overflow: visible;
}
.snr-dig-back { background: #1b1824; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.snr-dig-back-2 { translate: 0 -16px; scale: .9; opacity: .45; }
.snr-dig-back-1 { translate: 0 -8px; scale: .95; opacity: .7; }
.snr-dig-front { transform-origin: 50% 100%; z-index: 2; }
.snr-dig-front > :is(img, .snr-art-ph) {
position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; border-radius: 4px;
font-size: 64px; font-weight: 800; background: #241f31; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.snr-dig-front.is-flip { animation: snr-dig-flip .16s ease-out; }
@keyframes snr-dig-flip { from { transform: rotateX(38deg) translateY(-14px); filter: brightness(.6); } to { transform: none; filter: none; } }
.snr-dig-front.is-landed { animation: snr-dig-land .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes snr-dig-land { 0% { transform: rotateX(30deg); } 60% { transform: translateY(-14px) scale(1.03); } 100% { transform: translateY(-10px); } }
.snr-dig-front.is-landed { transform: translateY(-10px); }
/* the record slides up out of the landed sleeve */
.snr-dig-vinyl {
position: absolute; z-index: 1; left: 12px; top: 8px; width: 176px; height: 176px; border-radius: 50%;
background: repeating-radial-gradient(circle, #15121c 0 1.5px, #26222f 1.5px 3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 26px -6px rgba(192, 132, 252, .45);
animation: snr-dig-vinyl .7s .25s cubic-bezier(.2, .8, .2, 1) both;
}
.snr-dig-vinyl::before { /* light sheen on the grooves */
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 20deg, rgba(255, 255, 255, .2), transparent 15%, transparent 45%, rgba(255, 255, 255, .14) 60%, transparent 75%);
}
.snr-dig-label {
position: absolute; inset: 33%; border-radius: 50%; background: #c084fc center / cover; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6);
}
.snr-dig-label::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: #0c0a12; }
@keyframes snr-dig-vinyl { from { translate: 0 0; } to { translate: 0 -88px; } }
.snr-dig-lip {
position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; border-radius: 6px 6px 12px 12px;
background: linear-gradient(180deg, #3a2a1f, #2a1d15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 24px -10px rgba(0, 0, 0, .8);
}
.snr-dig-info { display: flex; flex-direction: column; gap: 4px; min-height: 44px; margin-bottom: 18px; }
.snr-dig-song { font-size: 1.1rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-dig-artist { font-size: .86rem; color: var(--text-muted); }
.snr-dig.is-landed .snr-dig-artist { cursor: pointer; }
.snr-dig.is-landed .snr-dig-artist:hover { color: var(--text); text-decoration: underline; }
.snr-dig-actions { display: flex; gap: 10px; justify-content: center; }
.snr-dig-actions button {
display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 999px; cursor: pointer;
font: 700 .9rem/1 inherit; transition: opacity .2s;
}
.snr-dig-actions button:disabled { opacity: .35; cursor: default; }
.snr-dig-play { border: 0; background: #fff; color: #0c0a12; }
.snr-dig-play svg { width: 16px; height: 16px; }
.snr-dig-again { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: var(--text); }
@media (max-width: 600px) {
.snr-dig-btn span { display: none; }
.snr-dig-btn { width: 34px; padding: 0; justify-content: center; margin-right: 8px; }
#browseSection .browse-section-header .snr-dig-btn { width: auto; padding: 0 14px; }
#browseSection .browse-section-header .snr-dig-btn span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
.snr-dig-front.is-flip, .snr-dig-front.is-landed, .snr-dig-vinyl { animation: none; }
.snr-dig-vinyl { translate: 0 -88px; }
}
/* PASS 46 · Share as a picture (Lyric Spotlight, Your week in music) */
.snr-share-card-btn {
display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--text);
}
.snr-share-card-btn svg { width: 16px; height: 16px; }
.snr-share-card-btn:hover, .snr-share-card-btn:focus-visible { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.snr-share-card-btn:disabled { opacity: .5; cursor: progress; }
#spotlightShareBtn { margin-left: auto; margin-right: 10px; }
.snr-week-btns { display: flex; align-items: center; gap: 12px; flex: none; }
/* ═══════════════════════════════════════════════════════════
PASS 47 · Timed comments (app.js sonaraRenderCommentTimeline)
Song page: an "at 1:42" toggle beside Post while the song plays,
a time chip on pinned comments, and a strip of the song with each
pinned comment's avatar at its moment. Clicking either plays from there.
═══════════════════════════════════════════════════════════ */
.tp-comment-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tp-comment-at[hidden] { display: none !important; }
.tp-comment-at {
margin-right: auto; height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer;
border: 1px dashed rgba(255, 255, 255, .25); background: transparent; color: var(--text-muted);
font: 600 .76rem/1 inherit; font-variant-numeric: tabular-nums;
}
.tp-comment-at[aria-pressed="true"] { border-style: solid; border-color: rgba(192, 132, 252, .55); background: rgba(192, 132, 252, .14); color: var(--text); }
.snr-comment-at {
display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 999px; border: 0; cursor: pointer; vertical-align: 1px;
background: rgba(192, 132, 252, .16); color: #e9d5ff; font: 700 .72rem/1.5 inherit; font-variant-numeric: tabular-nums;
}
.snr-comment-at:hover, .snr-comment-at:focus-visible { background: rgba(192, 132, 252, .3); }
.tp-comment-timeline[hidden] { display: none !important; }
.tp-comment-timeline { position: relative; height: 34px; margin: 16px 14px 18px; }
.tp-ct-line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; translate: 0 -50%; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.tp-ct-mark {
position: absolute; top: 50%; width: 24px; height: 24px; padding: 0; translate: -50% -50%; border-radius: 50%; cursor: pointer;
border: 2px solid var(--bg-dark, #0b0a12); background: #2a2636; overflow: visible;
}
.tp-ct-mark .snr-comment-avatar { width: 100% !important; height: 100% !important; border-radius: 50%; font-size: 10px !important; object-fit: cover; display: grid; place-items: center; }
.tp-ct-mark:hover, .tp-ct-mark:focus-visible { z-index: 2; scale: 1.2; }
.tp-ct-tip {
position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; width: max-content; max-width: 220px;
padding: 7px 10px; border-radius: 10px; background: #1d1a28; border: 1px solid rgba(255, 255, 255, .12);
font-size: .76rem; line-height: 1.35; color: var(--text); text-align: left; white-space: normal;
opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8);
}
.tp-ct-tip b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--text-muted); font-size: .7rem; }
.tp-ct-mark:hover .tp-ct-tip, .tp-ct-mark:focus-visible .tp-ct-tip { opacity: 1; }
/* ═══════════════════════════════════════════════════════════
PASS 48 · Listening party (party.js)
A live panel above the player (song, who's listening, invite
link, chat, Tip), an invite card for people opening a party link,
and a "Listen together" pill next to Song radio in Now Playing.
═══════════════════════════════════════════════════════════ */
.snr-np-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.snr-np-pills .snr-np-radio { margin: 0; }
.snr-party {
position: fixed; right: 18px; bottom: 112px; z-index: 9000; width: 320px; max-height: min(520px, calc(100vh - 200px));
display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 86%, #1d1a28); border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.snr-party-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.snr-party.is-min .snr-party-head { cursor: pointer; border-bottom: 0; }
.snr-party.is-min .snr-party-body { display: none; }
.snr-party-live {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
font: 800 .62rem/1 inherit; letter-spacing: .1em; text-transform: uppercase; color: #fecdd3; background: rgba(244, 63, 94, .18);
}
.snr-party-dot { width: 6px; height: 6px; border-radius: 50%; background: #fb7185; animation: snr-party-pulse 1.6s ease-in-out infinite; }
@keyframes snr-party-pulse { 50% { opacity: .35; } }
.snr-party-title { font-size: .86rem; font-weight: 700; color: var(--text); }
.snr-party-count { margin-left: auto; font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.snr-party-min { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 15px; line-height: 1; }
.snr-party-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 14px 14px; }
.snr-party-now { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.snr-party-cover { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: #1b1824; }
.snr-party-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snr-party-song { display: flex; flex-direction: column; min-width: 0; }
.snr-party-song b, .snr-party-song span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-party-song b { font-size: .86rem; color: var(--text); }
.snr-party-song span { font-size: .76rem; color: var(--text-muted); }
.snr-party-tip { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: var(--text); font: 600 .74rem/1 inherit; cursor: pointer; }
.snr-party-tip:hover { background: rgba(255, 255, 255, .1); }
.snr-party-note[hidden] { display: none; }
.snr-party-note { margin: 0; font-size: .76rem; color: #fde68a; }
.snr-party-invite { display: flex; gap: 6px; }
.snr-party-invite input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); color: var(--text-muted); font: .74rem/1 inherit; }
.snr-party-copy, .snr-party-form button {
flex: none; height: 32px; padding: 0 12px; border-radius: 8px; border: 0; cursor: pointer; background: #fff; color: #0c0a12; font: 700 .76rem/1 inherit;
}
.snr-party-chat { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 90px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.snr-party-msg { font-size: .8rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.snr-party-msg b { margin-right: 6px; color: #e9d5ff; font-weight: 700; }
.snr-party-msg.is-mine b { color: #a5f3fc; }
.snr-party-msg.is-sys { color: var(--text-muted); font-size: .74rem; }
.snr-party-msg.is-sys b { color: var(--text-muted); }
.snr-party-form { display: flex; gap: 6px; }
.snr-party-form input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: var(--text); font: .82rem/1 inherit; }
.snr-party-form button { border-radius: 999px; height: 34px; }
.snr-party-leave { align-self: center; padding: 4px 8px; border: 0; background: none; color: var(--text-muted); font: 600 .74rem/1 inherit; cursor: pointer; }
.snr-party-leave:hover { color: #fda4af; }
/* invite card: reuses the crate dialog's backdrop and buttons */
.snr-party-invite-card { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; }
.snr-party-invite-panel {
position: relative; width: min(380px, 100%); padding: 26px 24px 24px; border-radius: 22px; text-align: center;
background: color-mix(in srgb, var(--bg-dark, #0b0a12) 80%, #1d1a28); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
}
.snr-party-invite-panel h2 { margin: 14px 0 16px; font-size: 1.25rem; color: var(--text); }
.snr-party-invite-now { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); text-align: left; font-size: .86rem; color: var(--text-muted); min-height: 40px; justify-content: center; }
.snr-party-invite-now img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.snr-party-invite-now > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.snr-party-invite-now b { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-party-invite-now small { margin-top: 3px; font-size: .74rem; color: #fecdd3; }
.snr-party-join svg { width: 17px; height: 17px; }
.snr-party-join[hidden] { display: none; }
@media (max-width: 768px) {
.snr-party { left: 10px; right: 10px; width: auto; bottom: 150px; max-height: 55vh; }
.snr-party-chat { max-height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .snr-party-dot { animation: none; } }
/* ═══════════════════════════════════════════════════════════
PASS 49 · Phone mini player: progress on the top edge
The progress line runs along the card's top edge, inside its
rounded corners (as the desktop bar has it on top), instead of
hanging off the bottom over the record and past the right side.
The song and record sit centred in the card. The dot only shows
while you drag.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
html body .player-bar.snr-player-v2.snr-player-v2 > .player-left { align-self: center !important; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main {
position: absolute !important; top: 0 !important; bottom: auto !important; left: 20px !important; right: 20px !important;
width: auto !important; min-width: 0 !important; height: 2px !important; margin: 0 !important; padding: 0 !important; z-index: 3;
}
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main :is(.progress-bar, .progress-bar-track) {
position: static !important; width: 100% !important; height: 2px !important; margin: 0 !important; padding: 0 !important;
}
/* a 22px touch strip centred on the edge; the line itself is 2px */
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main #seekSlider {
--track-h: 2px;
position: absolute !important; left: 0 !important; right: 0 !important; top: -10px !important;
width: 100% !important; height: 22px !important; margin: 0 !important;
}
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main #seekSlider:active { --track-h: 4px; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main #seekSlider::-webkit-slider-thumb { opacity: 0; transition: opacity .15s; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main #seekSlider:active::-webkit-slider-thumb { opacity: 1; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main #seekSlider::-moz-range-thumb { opacity: 0; }
html body .player-bar.snr-player-v2.snr-player-v2 .player-center-main #seekSlider:active::-moz-range-thumb { opacity: 1; }
}