diff --git a/src/components/FullscreenPlayer.tsx b/src/components/FullscreenPlayer.tsx index a776273b..0d90510a 100644 --- a/src/components/FullscreenPlayer.tsx +++ b/src/components/FullscreenPlayer.tsx @@ -392,12 +392,12 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) { - {/* Artist — massive statement */} -

{currentTrack?.artist ?? '—'}

- - {/* Track title — accent, light weight */} + {/* Track title — massive statement */}

{currentTrack?.title ?? '—'}

+ {/* Artist — secondary, below track */} +

{currentTrack?.artist ?? '—'}

+ {/* Metadata row */} {metaParts.length > 0 && (
diff --git a/src/styles/components.css b/src/styles/components.css index 24fddc55..8f76a389 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -3028,7 +3028,7 @@ z-index: 4; display: flex; flex-direction: column; - gap: 12px; + gap: 8px; max-width: 85vw; } @@ -3066,30 +3066,29 @@ color: rgba(255, 255, 255, 0.3); } -/* Artist name — massive, font-black, uppercase, wraps gracefully */ -.fs-artist-name { +/* Track title — massive, font-black, primary — now on top */ +.fs-track-title { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 68px); font-weight: 900; - text-transform: uppercase; letter-spacing: -0.02em; - color: #ffffff; + color: var(--accent); margin: 0; line-height: 1.05; - text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7); + text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 0 40px var(--accent-glow, var(--accent)); white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } -/* Track title — large, light, accent color, wraps gracefully */ -.fs-track-title { +/* Artist name — secondary, below track title */ +.fs-artist-name { font-family: var(--font-display); - font-size: clamp(18px, 2.6vw, 40px); - font-weight: 300; - color: var(--accent); + font-size: clamp(13px, 1.5vw, 22px); + font-weight: 400; + color: rgba(255, 255, 255, 0.55); margin: 0; - line-height: 1.2; + line-height: 1.3; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; @@ -3103,6 +3102,7 @@ flex-wrap: wrap; font-size: clamp(11px, 1vw, 13px); color: rgba(255, 255, 255, 0.5); + margin-top: 4px; } .fs-meta-dot {