slice 4: accent palette refinement — blue → teal

Replace the four accent-family hex codes site-wide with the teal palette
(keeps the dark theme; only swaps the accent family, not the dark base):

  #3b82f6 (accent primary CTA)   → #5B7C8D  (teal)        [839×]
  #2563eb (accent-dark / hover)  → #4A6473  (darker teal) [44×]
  #60a5fa (info link, lighter)   → #8FB0C3  (mid teal)    [68×]
  #1e3a5f (accent-muted bg)      → #2F4F5F  (navy)        [44×]

tailwind.config.js tokens updated to match (accent/accent-dark/accent-muted).
Sweep also covers tailwind.css. 108 files touched. The dark base (#0d0d0d,
#111, #161616, #1a1a1a etc.) is intentionally untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-15 23:33:04 +00:00
parent f6fa7570c4
commit 52fe7bceb6
109 changed files with 937 additions and 937 deletions

View File

@@ -215,18 +215,18 @@ export default function Header() {
</p>
<div className="flex items-center gap-3 ml-auto">
<a href="https://linkedin.com/company/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="BroadcastBeat on LinkedIn"
className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors social-icon">
className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors social-icon">
<LinkedInIcon size={14} />
</a>
<a href="https://instagram.com/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="BroadcastBeat on Instagram"
className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors social-icon">
className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors social-icon">
<InstagramIcon size={14} />
</a>
<a href="https://facebook.com/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="BroadcastBeat on Facebook"
className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors social-icon">
className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors social-icon">
<FacebookIcon size={14} />
</a>
<a href="/rss" aria-label="BroadcastBeat RSS Feed" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors social-icon">
<a href="/rss" aria-label="BroadcastBeat RSS Feed" className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors social-icon">
<RssIcon size={14} />
</a>
<div className="w-px h-3.5 bg-[#333] mx-1" />
@@ -237,22 +237,22 @@ export default function Header() {
distribution.relevantmediaproperties.com; /wp-login,
/wp-admin, /login redirect there from middleware. */}
{currentUserId && (
<Link href="/account" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
<Link href="/account" className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider">
My Profile
</Link>
)}
{isAdmin && (
<>
<Link href="/admin/import" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
<Link href="/admin/import" className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider">
WP Import
</Link>
<Link href="/admin/articles" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
<Link href="/admin/articles" className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider">
Articles
</Link>
<Link href="/dashboard/editorial" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
<Link href="/dashboard/editorial" className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider">
Editorial
</Link>
<Link href="/admin/newsletter" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
<Link href="/admin/newsletter" className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider">
Newsletter
</Link>
@@ -261,7 +261,7 @@ export default function Header() {
<button
type="button"
aria-haspopup="true"
className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider inline-flex items-center gap-1">
className="text-[#999] hover:text-[#5B7C8D] focus:text-[#5B7C8D] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider inline-flex items-center gap-1">
Tools
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
<polyline points="6 9 12 15 18 9" />
@@ -271,25 +271,25 @@ export default function Header() {
role="menu"
aria-label="Admin tools"
className="absolute right-0 top-full min-w-[200px] bg-[#0d0d0d] border border-[#252525] shadow-xl rounded-sm py-1 opacity-0 invisible translate-y-1 group-hover/tools:opacity-100 group-hover/tools:visible group-hover/tools:translate-y-0 group-focus-within/tools:opacity-100 group-focus-within/tools:visible group-focus-within/tools:translate-y-0 transition-all duration-150 z-50">
<Link href="/admin/users" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Users</Link>
<Link href="/admin/analytics" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Analytics</Link>
<Link href="/admin/audit-log" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Audit Log</Link>
<Link href="/admin/notifications" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Notifications</Link>
<Link href="/admin/forum-seed" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Forum Seed</Link>
<Link href="/admin/company-tracker" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Company Tracker</Link>
<Link href="/dashboard/show-calendar" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Show Calendar</Link>
<Link href="/dashboard/ai-console" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#3b82f6] hover:bg-[#1a1a1a] hover:text-blue-300 focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-blue-300 uppercase tracking-wider transition-colors">AI Console</Link>
<Link href="/admin/banned-terms" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">Banned Terms</Link>
<Link href="/admin/users" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Users</Link>
<Link href="/admin/analytics" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Analytics</Link>
<Link href="/admin/audit-log" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Audit Log</Link>
<Link href="/admin/notifications" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Notifications</Link>
<Link href="/admin/forum-seed" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Forum Seed</Link>
<Link href="/admin/company-tracker" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Company Tracker</Link>
<Link href="/dashboard/show-calendar" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Show Calendar</Link>
<Link href="/dashboard/ai-console" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#5B7C8D] hover:bg-[#1a1a1a] hover:text-blue-300 focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-blue-300 uppercase tracking-wider transition-colors">AI Console</Link>
<Link href="/admin/banned-terms" role="menuitem" className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">Banned Terms</Link>
</div>
</div>
<Link href="/admin" className="text-[#3b82f6] hover:text-blue-300 focus:text-blue-300 focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
<Link href="/admin" className="text-[#5B7C8D] hover:text-blue-300 focus:text-blue-300 focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] transition-colors text-xs font-body font-bold uppercase tracking-wider">
Dashboard
</Link>
</>
)}
{/* Inline Email Subscription Form */}
{subStatus === "success" ? (
<span className="text-[#3b82f6] text-xs font-body font-bold whitespace-nowrap">{subMessage}</span>
<span className="text-[#5B7C8D] text-xs font-body font-bold whitespace-nowrap">{subMessage}</span>
) : (
<form onSubmit={handleSubscribe} className="flex items-center gap-1" aria-label="Newsletter subscription">
<input
@@ -299,12 +299,12 @@ export default function Header() {
placeholder="your@email.com"
aria-label="Email address for newsletter"
disabled={subStatus === "loading"}
className="h-5 px-2 text-[11px] bg-[#0d1520] border border-[#2a3a50] text-[#ccc] placeholder-[#555] rounded focus:outline-none focus:border-[#3b82f6] focus-visible:ring-1 focus-visible:ring-[#3b82f6] w-32 disabled:opacity-50 transition-colors"
className="h-5 px-2 text-[11px] bg-[#0d1520] border border-[#2a3a50] text-[#ccc] placeholder-[#555] rounded focus:outline-none focus:border-[#5B7C8D] focus-visible:ring-1 focus-visible:ring-[#5B7C8D] w-32 disabled:opacity-50 transition-colors"
/>
<button
type="submit"
disabled={subStatus === "loading"}
className="h-5 px-2.5 text-[11px] font-body font-bold uppercase tracking-wider bg-[#3b82f6] hover:bg-[#2563eb] text-white rounded disabled:opacity-50 transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-1 focus-visible:ring-white focus-visible:ring-offset-1 focus-visible:ring-offset-[#3b82f6]"
className="h-5 px-2.5 text-[11px] font-body font-bold uppercase tracking-wider bg-[#5B7C8D] hover:bg-[#4A6473] text-white rounded disabled:opacity-50 transition-colors whitespace-nowrap focus:outline-none focus-visible:ring-1 focus-visible:ring-white focus-visible:ring-offset-1 focus-visible:ring-offset-[#5B7C8D]"
>
{subStatus === "loading" ? "..." : "Subscribe"}
</button>
@@ -323,7 +323,7 @@ export default function Header() {
<div className="max-w-container mx-auto px-4">
<div className="flex items-center justify-between h-[60px] gap-4">
{/* Logo */}
<Link href="/home-page" className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]">
<Link href="/home-page" className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]">
<AppImage
src="/assets/images/logo.png"
alt="BroadcastBeat logo"
@@ -348,7 +348,7 @@ export default function Header() {
<Link
href={link?.href}
ref={(el) => { navLinksRef.current[i] = el; }}
className="nav-link-bb h-[60px] flex items-center focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]"
className="nav-link-bb h-[60px] flex items-center focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]"
onKeyDown={(e) => handleNavKeyDown(e, i, navLinksRef)}
tabIndex={i === 0 ? 0 : -1}
aria-haspopup={link?.dropdown ? "true" : undefined}>
@@ -364,7 +364,7 @@ export default function Header() {
key={sub.href + sub.label}
href={sub.href}
role="menuitem"
className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">
className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#5B7C8D] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#5B7C8D] uppercase tracking-wider transition-colors">
{sub.label}
</Link>
))}
@@ -379,7 +379,7 @@ export default function Header() {
<Link
href="/reading-list"
aria-label="Reading List"
className="flex items-center text-[#888] hover:text-[#3b82f6] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]">
className="flex items-center text-[#888] hover:text-[#5B7C8D] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
@@ -425,7 +425,7 @@ export default function Header() {
type="button"
onClick={submitSearch}
aria-label="Submit search"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#3b82f6] hover:text-[#60a5fa] transition-colors cursor-pointer"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#5B7C8D] hover:text-[#8FB0C3] transition-colors cursor-pointer"
>
<SearchIcon size={13} strokeWidth={1.75} />
</button>
@@ -435,7 +435,7 @@ export default function Header() {
type="button"
onClick={() => searchRef.current?.focus()}
aria-label="Focus search"
className="absolute right-8 top-1/2 -translate-y-1/2 text-[#666] hover:text-[#3b82f6] transition-colors cursor-pointer"
className="absolute right-8 top-1/2 -translate-y-1/2 text-[#666] hover:text-[#5B7C8D] transition-colors cursor-pointer"
>
<SearchIcon size={13} strokeWidth={1.75} />
</button>
@@ -446,7 +446,7 @@ export default function Header() {
{/* Mobile Hamburger */}
<button
ref={hamburgerRef}
className="lg:hidden p-2 text-[#cccccc] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]"
className="lg:hidden p-2 text-[#cccccc] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label={mobileOpen ? "Close menu" : "Open menu"}
aria-expanded={mobileOpen}
@@ -469,7 +469,7 @@ export default function Header() {
key={link?.label}
href={link?.href}
ref={(el) => { navLinksRef.current[i] = el; }}
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-accent hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6]"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-accent hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#5B7C8D]"
onClick={() => setMobileOpen(false)}>
{link?.label}
</Link>
@@ -477,7 +477,7 @@ export default function Header() {
{/* Reading List mobile link */}
<Link
href="/reading-list"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-accent hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-accent hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#5B7C8D] flex items-center gap-2"
onClick={() => setMobileOpen(false)}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
@@ -488,7 +488,7 @@ export default function Header() {
{currentUserId && (
<Link
href="/account"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#3b82f6] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#5B7C8D] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#5B7C8D] flex items-center gap-2"
onClick={() => setMobileOpen(false)}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
@@ -500,7 +500,7 @@ export default function Header() {
{isAdmin && (
<Link
href="/admin/import"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#3b82f6] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#5B7C8D] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#5B7C8D] flex items-center gap-2"
onClick={() => setMobileOpen(false)}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
@@ -514,14 +514,14 @@ export default function Header() {
.filter((n) => n.dropdown && n.dropdown.length > 0)
.map((section) => (
<div key={section.label} className="border-b border-[#222]">
<div className="px-2 py-2 text-[10px] font-body font-bold text-[#3b82f6] uppercase tracking-widest bg-[#0d0d0d]">
<div className="px-2 py-2 text-[10px] font-body font-bold text-[#5B7C8D] uppercase tracking-widest bg-[#0d0d0d]">
{section.label}
</div>
{section.dropdown!.map((link) => (
<Link
key={link.href + link.label}
href={link.href}
className="px-4 py-2 text-xs font-body text-[#888] hover:text-accent hover:bg-[#1a1a1a] block transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6]"
className="px-4 py-2 text-xs font-body text-[#888] hover:text-accent hover:bg-[#1a1a1a] block transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#5B7C8D]"
onClick={() => setMobileOpen(false)}>
{link.label}
</Link>
@@ -549,7 +549,7 @@ export default function Header() {
type="button"
onClick={submitSearch}
aria-label="Submit search"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#666] hover:text-[#3b82f6] transition-colors cursor-pointer"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#666] hover:text-[#5B7C8D] transition-colors cursor-pointer"
>
<SearchIcon size={13} strokeWidth={1.75} />
</button>