localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(header): switch AnimatedLogo to onDark variant for blue header contrast

Browse Source 
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>
This commit is contained in:
Local Administrator
2026-06-04 16:42:02 +00:00
parent e43d8737cf
commit bf484c14c3
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/AnimatedLogo.tsx
View File

@@ -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})`}>

6
src/components/Header.tsx
View File

@@ -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 */}