From 51c118806ea2a584d3ac51da574acee5560ae41e Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Tue, 7 Apr 2026 12:44:32 +0200
Subject: [PATCH] feat(fullscreen): track name on top, large & bold; artist
 name below, small
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap DOM order and styles in the info cluster:
- fs-track-title: clamp(28px,4.5vw,68px) / weight 900 / var(--accent) — primary
- fs-artist-name: clamp(13px,1.5vw,22px) / weight 400 / 55% opacity — secondary
- fs-cluster gap: 12px → 8px (denser hierarchy)
- fs-meta: margin-top: 4px for breathing room after artist name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/FullscreenPlayer.tsx |  8 ++++----
 src/styles/components.css           | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 16 deletions(-)

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) {
           <FsArt fetchUrl={artUrl} cacheKey={artKey} />
         </div>
 
-        {/* Artist — massive statement */}
-        <p className="fs-artist-name">{currentTrack?.artist ?? '—'}</p>
-
-        {/* Track title — accent, light weight */}
+        {/* Track title — massive statement */}
         <p className="fs-track-title">{currentTrack?.title ?? '—'}</p>
 
+        {/* Artist — secondary, below track */}
+        <p className="fs-artist-name">{currentTrack?.artist ?? '—'}</p>
+
         {/* Metadata row */}
         {metaParts.length > 0 && (
           <div className="fs-meta">
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 {