header: move secondary bar (tagline / socials / sign-in / subscribe) under main nav
Was: top bar → main nav (sticky) → browse bar Now: main nav (sticky) → secondary bar → hairline → browse bar Result: the tagline / language flag / sign-in / join / email subscribe row no longer eats vertical space above the logo + main nav. It scrolls off naturally once the user starts reading (main nav stays sticky). Hairline `h-px bg-[#2a2a2a]` separator below mirrors the divider pattern used next to "Staff Editorial" elsewhere on the site. Identical contents — the entire block was relocated, no behavior or text changed.
This commit is contained in:
Ryan Salazar
@@ -255,138 +255,6 @@ export default function Header() {
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* TOP BAR */}
|
||||
<div className="max-w-container mx-auto px-4">
|
||||
<div className="bg-[#1a2535] border-b border-[#2a3a50] h-8 flex items-center justify-between px-4">
|
||||
<p className="text-[#999999] text-xs font-body hidden sm:block">
|
||||
News & Intelligence for Broadcast, Post-Production & Streaming Technology
|
||||
</p>
|
||||
<div className="flex items-center gap-3 ml-auto">
|
||||
<a href="https://linkedin.com/company/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="Broadcast Beat 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">
|
||||
<LinkedInIcon size={14} />
|
||||
</a>
|
||||
<a href="https://instagram.com/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="Broadcast Beat 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">
|
||||
<InstagramIcon size={14} />
|
||||
</a>
|
||||
<a href="https://facebook.com/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="Broadcast Beat 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">
|
||||
<FacebookIcon size={14} />
|
||||
</a>
|
||||
<a href="/rss" aria-label="Broadcast Beat 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">
|
||||
<RssIcon size={14} />
|
||||
</a>
|
||||
<div className="w-px h-3.5 bg-[#333] mx-1" />
|
||||
{/* Language Switcher — Section 18B */}
|
||||
<LanguageSwitcher compact />
|
||||
<div className="w-px h-3.5 bg-[#333] mx-1" />
|
||||
{/* Sign In / Register removed — PR firms now authenticate at
|
||||
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">
|
||||
My Profile
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
const supabase = createClient();
|
||||
await supabase.auth.signOut();
|
||||
window.location.href = '/forum';
|
||||
}}
|
||||
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"
|
||||
>
|
||||
Log Out
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/forum/login" 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">
|
||||
Sign In
|
||||
</Link>
|
||||
<Link href="/forum/register" 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">
|
||||
Join
|
||||
</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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
Newsletter
|
||||
</Link>
|
||||
|
||||
{/* TOOLS dropdown — admin tools consolidated */}
|
||||
<div className="relative group/tools">
|
||||
<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">
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
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>
|
||||
</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">
|
||||
Dashboard
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{/* Inline Email Subscription Form */}
|
||||
{subStatus === "success" ? (
|
||||
<span className="text-[#3b82f6] text-xs font-body font-bold whitespace-nowrap">{subMessage}</span>
|
||||
) : (
|
||||
<form onSubmit={handleSubscribe} className="flex items-center gap-1" aria-label="Newsletter subscription">
|
||||
<input
|
||||
type="email"
|
||||
value={subEmail}
|
||||
onChange={(e) => setSubEmail(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
<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]"
|
||||
>
|
||||
{subStatus === "loading" ? "..." : "Subscribe"}
|
||||
</button>
|
||||
{subStatus === "error" && (
|
||||
<span className="text-red-400 text-[10px] whitespace-nowrap">{subMessage}</span>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MAIN NAV */}
|
||||
<div className={`sticky top-0 z-50 transition-shadow duration-200 ${scrolled ? "shadow-nav" : ""}`}>
|
||||
<nav className="bg-[#111111] border-b border-[#252525]" role="navigation" aria-label="Main navigation">
|
||||
@@ -543,6 +411,140 @@ export default function Header() {
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* SECONDARY BAR — was the TOP BAR above the main nav until Ryan asked
|
||||
it move under the main nav on 2026-05-27. Lives outside the sticky
|
||||
wrapper so it scrolls off, with a hairline separator below to keep
|
||||
it visually distinct from the browse bar. */}
|
||||
<div className="max-w-container mx-auto px-4">
|
||||
<div className="bg-[#1a2535] border-b border-[#2a3a50] h-8 flex items-center justify-between px-4">
|
||||
<p className="text-[#999999] text-xs font-body hidden sm:block">
|
||||
News & Intelligence for Broadcast, Post-Production & Streaming Technology
|
||||
</p>
|
||||
<div className="flex items-center gap-3 ml-auto">
|
||||
<a href="https://linkedin.com/company/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="Broadcast Beat 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">
|
||||
<LinkedInIcon size={14} />
|
||||
</a>
|
||||
<a href="https://instagram.com/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="Broadcast Beat 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">
|
||||
<InstagramIcon size={14} />
|
||||
</a>
|
||||
<a href="https://facebook.com/broadcastbeat" target="_blank" rel="noopener noreferrer" aria-label="Broadcast Beat 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">
|
||||
<FacebookIcon size={14} />
|
||||
</a>
|
||||
<a href="/rss" aria-label="Broadcast Beat 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">
|
||||
<RssIcon size={14} />
|
||||
</a>
|
||||
<div className="w-px h-3.5 bg-[#333] mx-1" />
|
||||
{/* Language Switcher — Section 18B */}
|
||||
<LanguageSwitcher compact />
|
||||
<div className="w-px h-3.5 bg-[#333] mx-1" />
|
||||
{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">
|
||||
My Profile
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
const supabase = createClient();
|
||||
await supabase.auth.signOut();
|
||||
window.location.href = '/forum';
|
||||
}}
|
||||
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"
|
||||
>
|
||||
Log Out
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/forum/login" 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">
|
||||
Sign In
|
||||
</Link>
|
||||
<Link href="/forum/register" 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">
|
||||
Join
|
||||
</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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
Newsletter
|
||||
</Link>
|
||||
|
||||
{/* TOOLS dropdown — admin tools consolidated */}
|
||||
<div className="relative group/tools">
|
||||
<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">
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
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>
|
||||
</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">
|
||||
Dashboard
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{/* Inline Email Subscription Form */}
|
||||
{subStatus === "success" ? (
|
||||
<span className="text-[#3b82f6] text-xs font-body font-bold whitespace-nowrap">{subMessage}</span>
|
||||
) : (
|
||||
<form onSubmit={handleSubscribe} className="flex items-center gap-1" aria-label="Newsletter subscription">
|
||||
<input
|
||||
type="email"
|
||||
value={subEmail}
|
||||
onChange={(e) => setSubEmail(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
<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]"
|
||||
>
|
||||
{subStatus === "loading" ? "..." : "Subscribe"}
|
||||
</button>
|
||||
{subStatus === "error" && (
|
||||
<span className="text-red-400 text-[10px] whitespace-nowrap">{subMessage}</span>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Hairline accent separator — mirrors the divider next to "Staff Editorial" */}
|
||||
<div className="h-px bg-[#2a2a2a]" />
|
||||
</div>
|
||||
|
||||
<DualSpeedTicker />
|
||||
|
||||
{/* BROWSE BAR — search left, primary nav right */}
|
||||
|
||||
Reference in New Issue
Block a user