From a8dc4577423d0267189157df9a17558e4782d728 Mon Sep 17 00:00:00 2001
From: Local Administrator <localadministrator@onsethost.com>
Date: Thu, 4 Jun 2026 22:22:18 +0000
Subject: [PATCH] fix(mobile): mobile menu unreadable + secondary nav
 overflowing + forum auth white-on-light
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Critical mobile bugs flagged from an iPhone screenshot.

1) Mobile hamburger menu — all main nav items (HOME / SHOW COVERAGE /
   DIRECTORY / FORUM / READING LIST) were `text-white` on
   `bg-[#F8FAFC]`, i.e. white-on-light. Effectively invisible. Legacy
   styling from the dark-theme era that never got updated. Flipped to
   `text-[#0F172A]` + `hover:bg-[#FFFFFF]` + `border-[#DCE6F2]` to match
   the My Profile / WP Import links right below them that were already
   correctly themed.

2) Secondary top nav (social icons / language switcher / Sign In + Join
   / newsletter email input) was a single h-8 flex row that always
   rendered — on a phone-width viewport the row spills the email input
   off the right edge. Added `hidden md:flex` so the whole bar
   disappears on mobile. Affordances stay reachable via the hamburger
   menu, in-forum Sign In/Join buttons, and the footer.

3) Forum auth pages (login, register, forgot-password, reset-password)
   had `text-white` on every H1 AND on every form input that uses
   `bg-[#F8FAFC]`. So users opening any of those four pages saw a blank
   white card with invisible labels and couldn't see what they were
   typing into the password fields. Same dark-theme regression as #1.
   Blanket-replaced `text-white` with `text-[#0F172A]` across all four
   files, then restored `text-white` only inside classNames that also
   contain `bg-[#1D4ED8]` / `bg-[#1E3A8A]` / `brand-gradient` (the
   submit buttons — those WERE correct).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/forum/forgot-password/page.tsx |  4 ++--
 src/app/forum/login/page.tsx           |  6 +++---
 src/app/forum/register/page.tsx        | 14 +++++++-------
 src/app/forum/reset-password/page.tsx  |  6 +++---
 src/components/Header.tsx              | 12 ++++++++----
 5 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/app/forum/forgot-password/page.tsx b/src/app/forum/forgot-password/page.tsx
index 8612a5b..3e6c3ff 100644
--- a/src/app/forum/forgot-password/page.tsx
+++ b/src/app/forum/forgot-password/page.tsx
@@ -34,7 +34,7 @@ function ForgotInner() {
         <div className="max-w-md mx-auto px-4 py-16">
           <div className="text-center mb-6">
             <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Account recovery</div>
-            <h1 className="text-3xl font-heading font-bold text-white">Reset your password</h1>
+            <h1 className="text-3xl font-heading font-bold text-[#0F172A]">Reset your password</h1>
             <p className="text-[#888] font-body text-sm mt-2">
               Enter your email — we&rsquo;ll send a link to set a new password.
             </p>
@@ -63,7 +63,7 @@ function ForgotInner() {
                 onChange={(e) => setEmail(e.target.value)}
                 autoComplete="email"
                 required
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <button
diff --git a/src/app/forum/login/page.tsx b/src/app/forum/login/page.tsx
index 86a9124..027a735 100644
--- a/src/app/forum/login/page.tsx
+++ b/src/app/forum/login/page.tsx
@@ -55,7 +55,7 @@ function ForumLoginInner() {
         <div className="max-w-md mx-auto px-4 py-16">
           <div className="text-center mb-6">
             <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Welcome back</div>
-            <h1 className="text-3xl font-heading font-bold text-white">Sign in to AV Beat</h1>
+            <h1 className="text-3xl font-heading font-bold text-[#0F172A]">Sign in to AV Beat</h1>
             <p className="text-[#888] font-body text-sm mt-2">
               Your account covers the forum, newsletter preferences, and saved articles.
             </p>
@@ -79,7 +79,7 @@ function ForumLoginInner() {
                 onChange={(e) => setEmail(e.target.value)}
                 autoComplete="email"
                 required
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <div>
@@ -92,7 +92,7 @@ function ForumLoginInner() {
                 onChange={(e) => setPassword(e.target.value)}
                 autoComplete="current-password"
                 required
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <button
diff --git a/src/app/forum/register/page.tsx b/src/app/forum/register/page.tsx
index 40349a1..8ad319a 100644
--- a/src/app/forum/register/page.tsx
+++ b/src/app/forum/register/page.tsx
@@ -106,7 +106,7 @@ function ForumRegisterInner() {
           {/* Left rail — what membership gets you */}
           <aside className="hidden lg:block">
             <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-3">Membership</div>
-            <h1 className="font-heading text-white text-4xl xl:text-5xl font-bold leading-tight mb-4">
+            <h1 className="font-heading text-[#0F172A] text-4xl xl:text-5xl font-bold leading-tight mb-4">
               Join AV Beat
             </h1>
             <p className="text-[#cbd5e1] text-base leading-relaxed mb-6 max-w-md">
@@ -122,7 +122,7 @@ function ForumRegisterInner() {
                 <li key={String(title)} className="flex gap-3 items-start">
                   <span className="text-xl leading-none flex-shrink-0">{icon}</span>
                   <div>
-                    <div className="font-semibold text-white">{title}</div>
+                    <div className="font-semibold text-[#0F172A]">{title}</div>
                     <div className="text-xs text-[#9ca3af] mt-0.5">{desc}</div>
                   </div>
                 </li>
@@ -137,7 +137,7 @@ function ForumRegisterInner() {
 
           {/* Mobile-only hero (collapsed copy) */}
           <div className="lg:hidden text-center mb-2">
-            <h1 className="font-heading text-white text-2xl font-bold">Join AV Beat</h1>
+            <h1 className="font-heading text-[#0F172A] text-2xl font-bold">Join AV Beat</h1>
             <p className="text-[#888] font-body text-sm mt-1">
               One account for the forum, newsletter preferences, and saved articles.
             </p>
@@ -171,7 +171,7 @@ function ForumRegisterInner() {
                 onChange={(e) => setFullName(e.target.value)}
                 autoComplete="name"
                 required
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <div>
@@ -184,7 +184,7 @@ function ForumRegisterInner() {
                 onChange={(e) => setEmail(e.target.value)}
                 autoComplete="email"
                 required
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <div>
@@ -198,7 +198,7 @@ function ForumRegisterInner() {
                 autoComplete="new-password"
                 required
                 minLength={6}
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <div>
@@ -211,7 +211,7 @@ function ForumRegisterInner() {
                 onChange={(e) => setConfirm(e.target.value)}
                 autoComplete="new-password"
                 required
-                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
+                className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
               />
             </div>
             <button
diff --git a/src/app/forum/reset-password/page.tsx b/src/app/forum/reset-password/page.tsx
index d39805c..94e7bc1 100644
--- a/src/app/forum/reset-password/page.tsx
+++ b/src/app/forum/reset-password/page.tsx
@@ -44,7 +44,7 @@ function ResetInner() {
         <div className="max-w-md mx-auto px-4 py-16">
           <div className="text-center mb-6">
             <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Reset password</div>
-            <h1 className="text-3xl font-heading font-bold text-white">Set a new password</h1>
+            <h1 className="text-3xl font-heading font-bold text-[#0F172A]">Set a new password</h1>
           </div>
           {hasSession === false ? (
             <div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-6 text-center">
@@ -84,7 +84,7 @@ function ResetInner() {
                   autoComplete="new-password"
                   minLength={8}
                   required
-                  className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#1D4ED8]"
+                  className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] text-sm focus:outline-none focus:border-[#1D4ED8]"
                 />
               </div>
               <div>
@@ -97,7 +97,7 @@ function ResetInner() {
                   onChange={(e) => setConfirm(e.target.value)}
                   autoComplete="new-password"
                   required
-                  className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#1D4ED8]"
+                  className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] text-sm focus:outline-none focus:border-[#1D4ED8]"
                 />
               </div>
               <button
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2252fd2..dfc6a8d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -321,7 +321,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-white hover:text-white/80 hover:bg-[#1E3A8A] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8]"
+                      className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#0F172A] hover:text-[#1D4ED8] hover:bg-[#FFFFFF] border-b border-[#DCE6F2] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8]"
                       onClick={() => setMobileOpen(false)}>
                       {link?.label}
                     </Link>
@@ -329,7 +329,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-white hover:text-white/80 hover:bg-[#1E3A8A] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8] flex items-center gap-2"
+                    className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#0F172A] hover:text-[#1D4ED8] hover:bg-[#FFFFFF] border-b border-[#DCE6F2] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8] 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" />
@@ -365,7 +365,7 @@ export default function Header() {
                   {navLinks
                     .filter((n) => n.dropdown && n.dropdown.length > 0)
                     .map((section) => (
-                      <div key={section.label} className="border-b border-[#222]">
+                      <div key={section.label} className="border-b border-[#DCE6F2]">
                         <div className="px-2 py-2 text-[10px] font-body font-bold text-[#1D4ED8] uppercase tracking-widest bg-[#F8FAFC]">
                           {section.label}
                         </div>
@@ -418,7 +418,11 @@ export default function Header() {
           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-[#FFFFFF] border-b border-[#2a3a50] h-8 flex items-center justify-between px-4">
+        {/* Secondary nav (social + language + auth + newsletter input) — hidden
+            on mobile because the row can't shrink to phone width without
+            spilling off-screen. Mobile users access these affordances via the
+            hamburger menu, Sign In/Join buttons in the forum, and the footer. */}
+        <div className="hidden md:flex bg-[#FFFFFF] border-b border-[#2a3a50] h-8 items-center justify-between px-4">
           <p className="text-[#999999] text-xs font-body hidden sm:block">
             Pro AV, Display and Live Production Tech
           </p>