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

@@ -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",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.23.1",
+  "version": "2.23.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -211,16 +211,33 @@
 }
 
 .header-cta {
-  color: var(--brand-gold) !important;
+  display: inline-flex;
-  border: 1px solid rgba(201, 168, 76, 0.5) !important;
+  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;
+  padding: 0.5rem 1.15rem !important;
-  transition: background 200ms, color 200ms !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 {

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>