From bf484c14c32a1cd0cc33c3845f0cd43e485fd492 Mon Sep 17 00:00:00 2001
From: Local Administrator <localadministrator@onsethost.com>
Date: Thu, 4 Jun 2026 16:42:02 +0000
Subject: [PATCH] fix(header): switch AnimatedLogo to onDark variant for blue
 header contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header bar is #1D4ED8 but logo was rendering with navy text on the tile's
#2563EB→#1E3A8A gradient — wordmark + tagline were nearly invisible. Flip
all three header breakpoints to variant="onDark" (white wordmark, slate-200
tagline). Also: switch the onDark tagline accent rule from #1D4ED8 (same
blue, invisible) to #7DD3FC cyan, and paint a faint white ring around the
tile so the rounded mark stays distinct from the header background.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/AnimatedLogo.tsx | 20 ++++++++++++++++++--
 src/components/Header.tsx       |  6 +++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/AnimatedLogo.tsx b/src/components/AnimatedLogo.tsx
index dfbb78a..9ec29d8 100644
--- a/src/components/AnimatedLogo.tsx
+++ b/src/components/AnimatedLogo.tsx
@@ -57,8 +57,11 @@ export default function AnimatedLogo({
   const tileGradId = `al-tile-${uid}`;
   const sheenGradId = `al-sheen-${uid}`;
   const wordmarkColor = variant === 'onDark' ? '#FFFFFF' : '#0F172A';
-  const taglineColor = variant === 'onDark' ? '#CBD5E1' : '#475569';
-  const accentColor = '#1D4ED8';
+  const taglineColor = variant === 'onDark' ? '#E2E8F0' : '#475569';
+  // On a dark/blue header the tile's own gradient (#2563EB→#1E3A8A) reads
+  // as the same shade as the bar behind it, so we paint a faint white ring
+  // around the rounded edge to separate the mark from the background.
+  const accentColor = variant === 'onDark' ? '#7DD3FC' : '#1D4ED8';
 
   return (
     <span
@@ -100,6 +103,19 @@ export default function AnimatedLogo({
 
         {/* Tile */}
         <rect x="0" y="0" width="64" height="64" rx="14" ry="14" fill={`url(#${tileGradId})`} />
+        {variant === 'onDark' && (
+          <rect
+            x="0.75"
+            y="0.75"
+            width="62.5"
+            height="62.5"
+            rx="13.4"
+            ry="13.4"
+            fill="none"
+            stroke="rgba(255,255,255,0.28)"
+            strokeWidth="1.5"
+          />
+        )}
 
         {/* Sheen sweep — a tall skewed band that travels left→right. */}
         <g clipPath={`url(#al-clip-${uid})`}>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6f8c66b..2252fd2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -269,9 +269,9 @@ export default function Header() {
                 aria-label="AV Beat — homepage"
                 className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--brand-bg)] rounded-md"
               >
-                <span className="hidden lg:inline-flex"><AnimatedLogo size={44} variant="onLight" /></span>
-                <span className="hidden md:inline-flex lg:hidden"><AnimatedLogo size={40} variant="onLight" showTagline={false} /></span>
-                <span className="inline-flex md:hidden"><AnimatedLogo size={36} variant="onLight" iconOnly /></span>
+                <span className="hidden lg:inline-flex"><AnimatedLogo size={44} variant="onDark" /></span>
+                <span className="hidden md:inline-flex lg:hidden"><AnimatedLogo size={40} variant="onDark" showTagline={false} /></span>
+                <span className="inline-flex md:hidden"><AnimatedLogo size={36} variant="onDark" iconOnly /></span>
               </Link>
 
               {/* Header 728x90 banner — centered between logo and right side */}