From 5fb44f0490ab688333f17a8638879e2512513e4e Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Mon, 12 Oct 2026 14:41:16 -0400
Subject: [PATCH] Header: Follow on Spotify button gets the Spotify icon, solid
 gold style, hover/focus states and a bigger mobile tap target; v2.23.2

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 src/App.css       | 31 +++++++++++++++++++++++++------
 src/App.tsx       |  1 +
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 233dbf3..8e49a05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.23.1",
+  "version": "2.23.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.23.1",
+      "version": "2.23.2",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1135.0",
         "@dnd-kit/core": "^6.3.1",
diff --git a/package.json b/package.json
index f9c043d..8667785 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.23.1",
+  "version": "2.23.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.css b/src/App.css
index d72d049..4bb7c9b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -211,16 +211,33 @@
 }
 
 .header-cta {
-  color: var(--brand-gold) !important;
-  border: 1px solid rgba(201, 168, 76, 0.5) !important;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--brand-black) !important;
+  background: linear-gradient(180deg, var(--brand-gold-light), var(--brand-gold));
+  border: 0 !important;
   border-radius: 999px;
-  padding: 0.4rem 1.2rem !important;
-  transition: background 200ms, color 200ms !important;
+  padding: 0.5rem 1.15rem !important;
+  font-weight: 700 !important;
+  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.55), 0 4px 14px rgba(201, 168, 76, 0.16);
+  transition: transform 200ms, box-shadow 200ms, filter 200ms !important;
+}
+
+.header-cta svg {
+  flex-shrink: 0;
 }
 
 .header-cta:hover {
-  background: var(--brand-gold);
   color: var(--brand-black) !important;
+  filter: brightness(1.07);
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 1px rgba(224, 192, 112, 0.8), 0 6px 18px rgba(201, 168, 76, 0.3);
+}
+
+.header-cta:focus-visible {
+  outline: 2px solid var(--brand-gold-light);
+  outline-offset: 3px;
 }
 
 /* ── Account icon (top right) ── */
@@ -13627,7 +13644,7 @@ a.study-track-card:hover {
   .header-nav { gap: 1rem; }
   .header-nav a,
   .header-nav button { font-size: 0.88rem; letter-spacing: 0.04em; }
-  .header-cta { padding: 0.4rem 0.9rem !important; }
+  .header-cta { padding: 0.45rem 0.9rem !important; gap: 0.4rem; }
 }
 
 /* ── Collapsed header (menu button + account icon) below 900px ── */
@@ -13687,6 +13704,8 @@ a.study-track-card:hover {
     margin-top: 0.75rem;
     justify-content: center;
     text-align: center;
+    padding: 0.8rem 1.2rem !important;
+    font-size: 1rem;
   }
 
   .header-nav--open {
diff --git a/src/App.tsx b/src/App.tsx
index 947351b..aa61a8f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -495,6 +495,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
             rel="noreferrer"
             className="header-cta"
           >
+            <SpotifyIcon />
             {content.headerFollowLabel || 'Follow on Spotify'}
           </a>
         </nav>