From 3460baa8b997840731295a47627b4a2071b897cb Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Wed, 27 May 2026 14:52:08 +0000
Subject: [PATCH] ux: dark-theme conversion + forum hero + ticker cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /manufacturers index + DirectoryClient: convert white/light-ink theme
  to BB dark theme so it stops standing out against the rest of the site
- /manufacturers/[slug]: same conversion, includes the new executives
  card grid and Headquarters block
- /nab-2026: same conversion, including hero gradient and sponsor tile
  borders (amber on dark instead of amber on white)
- Forum: remove "Top Performing Threads" widget from both /forum and
  /forum/[slug] (display only — TopThreadsWidget component preserved
  in case admins want to re-enable later)
- Forum hero: vertical padding py-10 → py-5, tagline reduced from
  three sentences to one. Adds a "Sign in to post" or "Start a thread"
  CTA in the hero's top-right depending on auth state.
- Recent Forum Posts ticker: drop replies entirely, surface only thread
  titles so breadth of conversation shows instead of the loudest
  threads dominating with reply chatter.
---
 src/app/api/ticker/forum-posts/route.ts   | 71 +++++------------
 src/app/forum/[slug]/page.tsx             |  3 -
 src/app/forum/page.tsx                    | 46 ++++++++---
 src/app/manufacturers/DirectoryClient.tsx | 28 +++----
 src/app/manufacturers/[slug]/page.tsx     | 96 +++++++++++------------
 src/app/manufacturers/page.tsx            | 10 +--
 src/app/nab-2026/page.tsx                 | 52 ++++++------
 7 files changed, 147 insertions(+), 159 deletions(-)

diff --git a/src/app/api/ticker/forum-posts/route.ts b/src/app/api/ticker/forum-posts/route.ts
index 929b0a4..6c50749 100644
--- a/src/app/api/ticker/forum-posts/route.ts
+++ b/src/app/api/ticker/forum-posts/route.ts
@@ -22,65 +22,32 @@ export async function GET() {
     auth: { persistSession: false },
   });
 
-  // Newest threads + newest replies, interleaved by timestamp.
-  const [threadsRes, repliesRes] = await Promise.all([
-    sb
-      .from('forum_threads')
-      .select('id, title, author_name, created_at')
-      .order('created_at', { ascending: false })
-      .limit(20),
-    sb
-      .from('forum_replies')
-      .select('id, body, thread_id, author_name, created_at, forum_threads(title)')
-      .order('created_at', { ascending: false })
-      .limit(20),
-  ]);
+  // Threads only — per editorial direction we surface unique topics, not
+  // reply chatter, so the ticker shows breadth of discussion.
+  const threadsRes = await sb
+    .from('forum_threads')
+    .select('id, title, author_name, created_at')
+    .order('created_at', { ascending: false })
+    .limit(40);
 
-  if (threadsRes.error && repliesRes.error) {
+  if (threadsRes.error) {
     return NextResponse.json(
-      { error: threadsRes.error?.message || repliesRes.error?.message, items: [] },
-      { status: 500 }
+      { error: threadsRes.error.message, items: [] },
+      { status: 500 },
     );
   }
 
-  const items: TickerItem[] = [];
-
-  for (const t of threadsRes.data || []) {
-    items.push({
-      id: t.id,
-      href: `/forum/thread/${t.id}`,
-      title: t.title,
-      kind: 'thread',
-      author_name: t.author_name,
-      created_at: t.created_at,
-    });
-  }
-
-  for (const r of (repliesRes.data || []) as Array<{
-    id: string;
-    body: string;
-    thread_id: string;
-    author_name: string | null;
-    created_at: string;
-    forum_threads?: { title: string } | { title: string }[] | null;
-  }>) {
-    const parent =
-      Array.isArray(r.forum_threads) ? r.forum_threads[0] : r.forum_threads;
-    const parentTitle = parent?.title || 'forum reply';
-    items.push({
-      id: r.id,
-      href: `/forum/thread/${r.thread_id}`,
-      title: `Re: ${parentTitle}`,
-      kind: 'reply',
-      author_name: r.author_name,
-      created_at: r.created_at,
-    });
-  }
-
-  items.sort((a, b) => (a.created_at < b.created_at ? 1 : -1));
+  const items: TickerItem[] = (threadsRes.data || []).map((t: any) => ({
+    id: t.id,
+    href: `/forum/thread/${t.id}`,
+    title: t.title,
+    kind: 'thread',
+    author_name: t.author_name,
+    created_at: t.created_at,
+  }));
 
   return NextResponse.json(
-    { items: items.slice(0, 30) },
+    { items: items.slice(0, 40) },
     {
       headers: {
         'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
diff --git a/src/app/forum/[slug]/page.tsx b/src/app/forum/[slug]/page.tsx
index 732388e..6a81b7c 100644
--- a/src/app/forum/[slug]/page.tsx
+++ b/src/app/forum/[slug]/page.tsx
@@ -361,9 +361,6 @@ export default function ForumCategoryPage() {
             </form>
           )}
 
-          {/* Top Performing Threads Widget (shown when category is loaded) */}
-          {!loading && category && <TopThreadsWidget categoryId={category.id} />}
-
           {/* Search + Sort Bar */}
           <div className="flex flex-col sm:flex-row gap-3 mb-5">
             {/* Search */}
diff --git a/src/app/forum/page.tsx b/src/app/forum/page.tsx
index 2ddecf7..a6f8bc6 100644
--- a/src/app/forum/page.tsx
+++ b/src/app/forum/page.tsx
@@ -264,14 +264,41 @@ export default function ForumIndexPage() {
       <main className="min-h-screen bg-[#111111]">
         {/* Hero — width-aligned with content below + featured-box pattern */}
         <div className="max-w-container mx-auto px-4">
-          <div className="bg-[#1a2535] border-b border-[#2a3a50] py-10 px-4">
-            <div className="flex items-center gap-3 mb-2">
-              <img src="/logos/crew-lounge-logo.svg" alt="The Crew Lounge" className="w-8 h-8" />
-              <h1 className="text-3xl font-heading font-bold text-white">The Crew Lounge</h1>
+          <div className="bg-[#1a2535] border-b border-[#2a3a50] py-5 px-4">
+            <div className="flex items-start justify-between gap-4 flex-wrap">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-3 mb-1">
+                  <img src="/logos/crew-lounge-logo.svg" alt="The Crew Lounge" className="w-8 h-8" />
+                  <h1 className="text-3xl font-heading font-bold text-white">The Crew Lounge</h1>
+                </div>
+                <p className="text-[#aab4c4] font-body text-sm max-w-2xl">
+                  Connect with broadcast, motion picture, and post production pros worldwide.
+                </p>
+              </div>
+              <div className="flex-shrink-0">
+                {currentUserId ? (
+                  <Link
+                    href="/forum/new"
+                    className="inline-flex items-center gap-2 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm rounded-lg px-5 py-2.5 transition-colors"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                      <path d="M12 5v14M5 12h14" />
+                    </svg>
+                    Start a thread
+                  </Link>
+                ) : (
+                  <Link
+                    href="/forum/login?next=/forum"
+                    className="inline-flex items-center gap-2 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm rounded-lg px-5 py-2.5 transition-colors"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" />
+                    </svg>
+                    Sign in to post
+                  </Link>
+                )}
+              </div>
             </div>
-            <p className="text-[#aab4c4] font-body text-base max-w-2xl">
-              The Crew Lounge: connect with broadcast, motion picture and post production professionals worldwide. Ask questions, share expertise, and discuss the technology shaping the industry.
-            </p>
           </div>
         </div>
 
@@ -505,12 +532,9 @@ export default function ForumIndexPage() {
                 </div>
               )}
 
-              {/* Default view: Top Threads + Category Grid */}
+              {/* Default view: Category Grid */}
               {!isSearchMode && (
                 <>
-                  {/* Top Performing Threads Widget */}
-                  {!loading && <TopThreadsWidget />}
-
                   {loading && (
                     <div className="space-y-3 mb-8">
                       {[...Array(8)].map((_, i) => (
diff --git a/src/app/manufacturers/DirectoryClient.tsx b/src/app/manufacturers/DirectoryClient.tsx
index 07500d8..d049e60 100644
--- a/src/app/manufacturers/DirectoryClient.tsx
+++ b/src/app/manufacturers/DirectoryClient.tsx
@@ -53,24 +53,24 @@ export default function ManufacturerDirectoryClient({
 
   return (
     <div>
-      <div className="bg-surface-soft border border-ink/10 rounded-xl p-4 mb-6 flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
+      <div className="bg-[#111] border border-[#252525] rounded-xl p-4 mb-6 flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
         <div className="flex-1 min-w-0">
           <input
             type="search"
             value={q}
             onChange={(e) => setQ(e.target.value)}
             placeholder="Search by company or product…"
-            className="w-full bg-white border border-ink/15 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-primary/40"
+            className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#3b82f6]/40"
           />
         </div>
-        <div className="flex gap-1 bg-white border border-ink/10 rounded-md p-1">
+        <div className="flex gap-1 bg-[#0d0d0d] border border-[#252525] rounded-md p-1">
           {SHOW_FILTERS.map((f) => (
             <button
               key={f}
               type="button"
               onClick={() => setShowFilter(f)}
               className={`px-3 py-1.5 rounded text-xs font-semibold ${
-                showFilter === f ? "bg-brand-primary text-white" : "text-ink/70 hover:bg-ink/5"
+                showFilter === f ? "bg-[#3b82f6] text-white" : "text-[#aaa] hover:bg-[#1a1a1a]"
               }`}
             >
               {f}
@@ -87,8 +87,8 @@ export default function ManufacturerDirectoryClient({
             onClick={() => setLetter(l)}
             className={`min-w-[28px] h-7 px-1.5 rounded font-semibold ${
               letter === l
-                ? "bg-brand-primary text-white"
-                : "bg-white border border-ink/10 text-ink/65 hover:bg-ink/5"
+                ? "bg-[#3b82f6] text-white"
+                : "bg-[#0d0d0d] border border-[#252525] text-[#aaa] hover:bg-[#1a1a1a]"
             }`}
           >
             {l}
@@ -96,7 +96,7 @@ export default function ManufacturerDirectoryClient({
         ))}
       </nav>
 
-      <p className="text-xs text-ink/55 mb-3">
+      <p className="text-xs text-[#888] mb-3">
         Showing {filtered.length.toLocaleString()} of {manufacturers.length.toLocaleString()} manufacturers
       </p>
 
@@ -105,9 +105,9 @@ export default function ManufacturerDirectoryClient({
           <Link
             key={m.slug}
             href={`/manufacturers/${m.slug}`}
-            className="group bg-white border border-ink/10 rounded-xl p-4 hover:border-brand-primary hover:shadow-sm transition-all flex gap-3"
+            className="group bg-[#0d0d0d] border border-[#252525] rounded-xl p-4 hover:border-[#3b82f6] hover:shadow-sm transition-all flex gap-3"
           >
-            <div className="w-14 h-14 rounded-lg bg-ink/5 flex items-center justify-center overflow-hidden flex-shrink-0">
+            <div className="w-14 h-14 rounded-lg bg-[#1a1a1a] flex items-center justify-center overflow-hidden flex-shrink-0">
               {m.logo_url ? (
                 /* eslint-disable-next-line @next/next/no-img-element */
                 <img
@@ -117,13 +117,13 @@ export default function ManufacturerDirectoryClient({
                   loading="lazy"
                 />
               ) : (
-                <span className="text-ink/40 text-lg font-semibold">
+                <span className="text-[#666] text-lg font-semibold">
                   {(m.company_name || "?").trim().charAt(0).toUpperCase()}
                 </span>
               )}
             </div>
             <div className="min-w-0 flex-1">
-              <h3 className="font-semibold text-ink truncate group-hover:text-brand-primary transition-colors">
+              <h3 className="font-semibold text-[#e0e0e0] truncate group-hover:text-[#3b82f6] transition-colors">
                 {m.company_name}
               </h3>
               <div className="flex items-center gap-1.5 mt-1 mb-1.5 flex-wrap">
@@ -138,12 +138,12 @@ export default function ManufacturerDirectoryClient({
                   </span>
                 )}
                 {m.featured && (
-                  <span className="text-[10px] font-semibold uppercase tracking-wider bg-brand-primary/10 text-brand-primary px-1.5 py-0.5 rounded">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider bg-[#3b82f6]/15 text-[#3b82f6] px-1.5 py-0.5 rounded">
                     Featured
                   </span>
                 )}
               </div>
-              <p className="text-xs text-ink/60 line-clamp-2">
+              <p className="text-xs text-[#888] line-clamp-2">
                 {m.bio || "Profile coming soon."}
               </p>
             </div>
@@ -152,7 +152,7 @@ export default function ManufacturerDirectoryClient({
       </div>
 
       {filtered.length === 0 && (
-        <div className="text-center py-12 text-ink/50 text-sm">
+        <div className="text-center py-12 text-[#888] text-sm">
           No manufacturers match these filters.
         </div>
       )}
diff --git a/src/app/manufacturers/[slug]/page.tsx b/src/app/manufacturers/[slug]/page.tsx
index 45032c0..4d0c542 100644
--- a/src/app/manufacturers/[slug]/page.tsx
+++ b/src/app/manufacturers/[slug]/page.tsx
@@ -128,21 +128,21 @@ export default async function ManufacturerProfile({
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-[#0d0d0d]">
       <Header />
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
       <article className="max-w-4xl mx-auto px-4 py-10">
-        <nav className="text-xs text-ink/55 mb-6">
-          <Link href="/manufacturers" className="hover:text-brand-primary">
+        <nav className="text-xs text-[#888] mb-6">
+          <Link href="/manufacturers" className="hover:text-[#3b82f6]">
             ← Manufacturer Directory
           </Link>
         </nav>
 
-        <header className="flex flex-col sm:flex-row gap-6 mb-8 pb-8 border-b border-ink/10">
-          <div className="w-24 h-24 rounded-xl bg-ink/5 flex items-center justify-center overflow-hidden flex-shrink-0">
+        <header className="flex flex-col sm:flex-row gap-6 mb-8 pb-8 border-b border-[#252525]">
+          <div className="w-24 h-24 rounded-xl bg-[#1a1a1a] flex items-center justify-center overflow-hidden flex-shrink-0">
             {company.logo_url ? (
               /* eslint-disable-next-line @next/next/no-img-element */
               <img
@@ -151,33 +151,33 @@ export default async function ManufacturerProfile({
                 className="w-full h-full object-contain"
               />
             ) : (
-              <span className="text-ink/40 text-3xl font-bold">
+              <span className="text-[#666] text-3xl font-bold">
                 {(company.company_name || "?").trim().charAt(0).toUpperCase()}
               </span>
             )}
           </div>
           <div className="min-w-0 flex-1">
-            <h1 className="text-3xl md:text-4xl font-display font-bold text-ink mb-1">
+            <h1 className="text-3xl md:text-4xl font-display font-bold text-[#e0e0e0] mb-1">
               {company.company_name}
             </h1>
             <div className="flex items-center gap-2 flex-wrap text-xs">
               {company.exhibits_nab && (
-                <span className="bg-amber-50 text-amber-700 px-2 py-0.5 rounded font-semibold uppercase tracking-wider">
+                <span className="bg-amber-500/15 text-amber-300 px-2 py-0.5 rounded font-semibold uppercase tracking-wider">
                   NAB Show 2026
                 </span>
               )}
               {company.exhibits_ibc && (
-                <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded font-semibold uppercase tracking-wider">
+                <span className="bg-blue-500/15 text-blue-300 px-2 py-0.5 rounded font-semibold uppercase tracking-wider">
                   IBC
                 </span>
               )}
               {(company.hq_city || company.hq_country) && (
-                <span className="text-ink/60">
+                <span className="text-[#888]">
                   {[company.hq_city, company.hq_country].filter(Boolean).join(", ")}
                 </span>
               )}
               {company.phone && (
-                <a href={`tel:${company.phone.replace(/[^\d+]/g, '')}`} className="text-ink/60 hover:text-brand-primary">
+                <a href={`tel:${company.phone.replace(/[^\d+]/g, '')}`} className="text-[#888] hover:text-[#3b82f6]">
                   {company.phone}
                 </a>
               )}
@@ -188,7 +188,7 @@ export default async function ManufacturerProfile({
                   href={company.company_website}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-brand-primary hover:underline"
+                  className="text-[#3b82f6] hover:underline"
                 >
                   Website ↗
                 </a>
@@ -198,7 +198,7 @@ export default async function ManufacturerProfile({
                   href={company.press_url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-brand-primary hover:underline"
+                  className="text-[#3b82f6] hover:underline"
                 >
                   Newsroom ↗
                 </a>
@@ -208,7 +208,7 @@ export default async function ManufacturerProfile({
                   href={company.contact_url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-brand-primary hover:underline"
+                  className="text-[#3b82f6] hover:underline"
                 >
                   Contact ↗
                 </a>
@@ -218,7 +218,7 @@ export default async function ManufacturerProfile({
                   href={company.linkedin_url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-ink/60 hover:text-brand-primary"
+                  className="text-[#888] hover:text-[#3b82f6]"
                 >
                   LinkedIn
                 </a>
@@ -228,7 +228,7 @@ export default async function ManufacturerProfile({
                   href={`https://twitter.com/${company.twitter_handle}`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-ink/60 hover:text-brand-primary"
+                  className="text-[#888] hover:text-[#3b82f6]"
                 >
                   X / Twitter
                 </a>
@@ -239,10 +239,10 @@ export default async function ManufacturerProfile({
 
         {company.bio && (
           <section className="mb-10">
-            <h2 className="text-lg font-display font-bold text-ink mb-2">About</h2>
-            <div className="text-ink/80 leading-relaxed space-y-4 whitespace-pre-line">{company.bio}</div>
+            <h2 className="text-lg font-display font-bold text-[#e0e0e0] mb-2">About</h2>
+            <div className="text-[#ccc] leading-relaxed space-y-4 whitespace-pre-line">{company.bio}</div>
             {company.bio_source && (
-              <p className="text-xs text-ink/40 mt-2">
+              <p className="text-xs text-[#666] mt-2">
                 Source: {company.bio_source}
               </p>
             )}
@@ -251,33 +251,33 @@ export default async function ManufacturerProfile({
 
         {executives.length > 0 && (
           <section className="mb-10">
-            <h2 className="text-lg font-display font-bold text-ink mb-4">Executive leadership</h2>
+            <h2 className="text-lg font-display font-bold text-[#e0e0e0] mb-4">Executive leadership</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
               {executives.map((e: any) => (
-                <div key={e.id} className="bg-surface-soft border border-ink/10 rounded-lg p-4 flex gap-3">
+                <div key={e.id} className="bg-[#111] border border-[#252525] rounded-lg p-4 flex gap-3">
                   {e.photo_url ? (
                     /* eslint-disable-next-line @next/next/no-img-element */
                     <img
                       src={e.photo_url}
                       alt={e.name}
-                      className="w-16 h-16 rounded-full object-cover bg-ink/5 flex-shrink-0"
+                      className="w-16 h-16 rounded-full object-cover bg-[#1a1a1a] flex-shrink-0"
                       loading="lazy"
                     />
                   ) : (
-                    <div className="w-16 h-16 rounded-full bg-ink/5 flex items-center justify-center text-ink/40 font-bold flex-shrink-0">
+                    <div className="w-16 h-16 rounded-full bg-[#1a1a1a] flex items-center justify-center text-[#666] font-bold flex-shrink-0">
                       {(e.name || "?").trim().charAt(0).toUpperCase()}
                     </div>
                   )}
                   <div className="min-w-0">
-                    <div className="font-semibold text-ink truncate">{e.name}</div>
-                    {e.title && <div className="text-xs text-ink/60 mb-1">{e.title}</div>}
-                    {e.bio && <p className="text-xs text-ink/70 line-clamp-3 mb-1">{e.bio}</p>}
+                    <div className="font-semibold text-[#e0e0e0] truncate">{e.name}</div>
+                    {e.title && <div className="text-xs text-[#888] mb-1">{e.title}</div>}
+                    {e.bio && <p className="text-xs text-[#aaa] line-clamp-3 mb-1">{e.bio}</p>}
                     {e.linkedin_url && (
                       <a
                         href={e.linkedin_url}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-[11px] text-brand-primary hover:underline"
+                        className="text-[11px] text-[#3b82f6] hover:underline"
                       >
                         LinkedIn ↗
                       </a>
@@ -291,22 +291,22 @@ export default async function ManufacturerProfile({
 
         {(company.hq_address || company.phone || company.contact_email) && (
           <section className="mb-10">
-            <h2 className="text-lg font-display font-bold text-ink mb-2">Headquarters</h2>
-            <address className="not-italic text-ink/80 text-sm leading-relaxed">
+            <h2 className="text-lg font-display font-bold text-[#e0e0e0] mb-2">Headquarters</h2>
+            <address className="not-italic text-[#ccc] text-sm leading-relaxed">
               {company.hq_address && <div>{company.hq_address}</div>}
               {(company.hq_city || company.hq_country) && (
                 <div>{[company.hq_city, company.hq_country].filter(Boolean).join(", ")}</div>
               )}
               {company.phone && (
                 <div className="mt-1">
-                  <a href={`tel:${company.phone.replace(/[^\d+]/g, '')}`} className="text-brand-primary hover:underline">
+                  <a href={`tel:${company.phone.replace(/[^\d+]/g, '')}`} className="text-[#3b82f6] hover:underline">
                     {company.phone}
                   </a>
                 </div>
               )}
               {company.contact_email && (
                 <div>
-                  <a href={`mailto:${company.contact_email}`} className="text-brand-primary hover:underline">
+                  <a href={`mailto:${company.contact_email}`} className="text-[#3b82f6] hover:underline">
                     {company.contact_email}
                   </a>
                 </div>
@@ -317,12 +317,12 @@ export default async function ManufacturerProfile({
 
         {company.categories && company.categories.length > 0 && (
           <section className="mb-10">
-            <h2 className="text-lg font-display font-bold text-ink mb-2">Categories</h2>
+            <h2 className="text-lg font-display font-bold text-[#e0e0e0] mb-2">Categories</h2>
             <div className="flex flex-wrap gap-2">
               {company.categories.map((c: string) => (
                 <span
                   key={c}
-                  className="text-xs bg-ink/5 text-ink/70 px-2.5 py-1 rounded-full"
+                  className="text-xs bg-[#1a1a1a] text-[#aaa] px-2.5 py-1 rounded-full"
                 >
                   {c}
                 </span>
@@ -333,21 +333,21 @@ export default async function ManufacturerProfile({
 
         {shows.length > 0 && (
           <section className="mb-10">
-            <h2 className="text-lg font-display font-bold text-ink mb-3">
+            <h2 className="text-lg font-display font-bold text-[#e0e0e0] mb-3">
               Trade-show appearances
             </h2>
             <ul className="space-y-2">
               {shows.map((s) => (
                 <li
                   key={`${s.show}-${s.show_year}-${s.booth || "?"}`}
-                  className="bg-surface-soft border border-ink/10 rounded-md px-4 py-3 flex items-center justify-between gap-4"
+                  className="bg-[#111] border border-[#252525] rounded-md px-4 py-3 flex items-center justify-between gap-4"
                 >
                   <div className="min-w-0">
-                    <span className="font-semibold text-ink">
+                    <span className="font-semibold text-[#e0e0e0]">
                       {s.show} {s.show_year}
                     </span>
                     {s.booth && (
-                      <span className="ml-3 text-sm text-ink/60">Booth {s.booth}</span>
+                      <span className="ml-3 text-sm text-[#888]">Booth {s.booth}</span>
                     )}
                   </div>
                 </li>
@@ -359,8 +359,8 @@ export default async function ManufacturerProfile({
         {recentStories.length > 0 && (
           <section className="mb-10">
             <header className="flex items-baseline justify-between mb-3">
-              <h2 className="text-lg font-display font-bold text-ink">Recent coverage</h2>
-              <Link href={`/news?search=${encodeURIComponent(company.company_name)}`} className="text-xs text-brand-primary hover:underline">
+              <h2 className="text-lg font-display font-bold text-[#e0e0e0]">Recent coverage</h2>
+              <Link href={`/news?search=${encodeURIComponent(company.company_name)}`} className="text-xs text-[#3b82f6] hover:underline">
                 All stories →
               </Link>
             </header>
@@ -369,20 +369,20 @@ export default async function ManufacturerProfile({
                 <Link
                   key={r.wp_slug}
                   href={`/news/${r.wp_slug}`}
-                  className="group bg-white border border-ink/10 rounded-md p-3 hover:border-brand-primary hover:shadow-sm transition-all flex gap-3"
+                  className="group bg-[#0d0d0d] border border-[#252525] rounded-md p-3 hover:border-[#3b82f6] hover:shadow-sm transition-all flex gap-3"
                 >
                   {r.featured_image ? (
                     /* eslint-disable-next-line @next/next/no-img-element */
-                    <img src={r.featured_image} alt="" className="w-20 h-14 rounded object-cover bg-ink/5 flex-shrink-0" loading="lazy" />
+                    <img src={r.featured_image} alt="" className="w-20 h-14 rounded object-cover bg-[#1a1a1a] flex-shrink-0" loading="lazy" />
                   ) : (
-                    <div className="w-20 h-14 rounded bg-ink/5 flex-shrink-0" />
+                    <div className="w-20 h-14 rounded bg-[#1a1a1a] flex-shrink-0" />
                   )}
                   <div className="min-w-0">
-                    <h3 className="text-xs font-semibold text-ink leading-snug group-hover:text-brand-primary line-clamp-3">
+                    <h3 className="text-xs font-semibold text-[#e0e0e0] leading-snug group-hover:text-[#3b82f6] line-clamp-3">
                       {r.title}
                     </h3>
                     {r.wp_published_at && (
-                      <p className="text-[10px] text-ink/50 mt-1">
+                      <p className="text-[10px] text-[#888] mt-1">
                         {new Date(r.wp_published_at).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
                       </p>
                     )}
@@ -395,14 +395,14 @@ export default async function ManufacturerProfile({
 
         {pressReleases.length > 0 && (
           <section className="mb-10">
-            <h2 className="text-lg font-display font-bold text-ink mb-3">Press releases</h2>
+            <h2 className="text-lg font-display font-bold text-[#e0e0e0] mb-3">Press releases</h2>
             <ul className="space-y-2">
               {pressReleases.map((p) => (
                 <li key={p.slug || p.source_url} className="text-sm">
                   {p.slug ? (
                     <Link
                       href={`/news/${p.slug}`}
-                      className="text-brand-primary hover:underline"
+                      className="text-[#3b82f6] hover:underline"
                     >
                       {p.title}
                     </Link>
@@ -410,7 +410,7 @@ export default async function ManufacturerProfile({
                     <span>{p.title}</span>
                   )}
                   {p.published_at && (
-                    <span className="text-ink/50 text-xs ml-2">
+                    <span className="text-[#888] text-xs ml-2">
                       {new Date(p.published_at).toISOString().slice(0, 10)}
                     </span>
                   )}
@@ -420,7 +420,7 @@ export default async function ManufacturerProfile({
           </section>
         )}
 
-        <footer className="text-xs text-ink/40 mt-12 pt-6 border-t border-ink/10">
+        <footer className="text-xs text-[#666] mt-12 pt-6 border-t border-[#252525]">
           Listing maintained by Broadcast Beat editorial.
           {company.last_mentioned && (
             <> Last mentioned in coverage on {new Date(company.last_mentioned).toISOString().slice(0, 10)}.</>
diff --git a/src/app/manufacturers/page.tsx b/src/app/manufacturers/page.tsx
index a1057d6..d2798c2 100644
--- a/src/app/manufacturers/page.tsx
+++ b/src/app/manufacturers/page.tsx
@@ -52,14 +52,14 @@ export default async function ManufacturersIndex() {
   const ibcCount = list.filter((m) => m.exhibits_ibc).length;
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-[#0d0d0d]">
       <Header />
       <div className="max-w-6xl mx-auto px-4 py-10">
         <header className="mb-8">
-          <h1 className="text-3xl md:text-4xl font-display font-bold text-ink mb-2">
+          <h1 className="text-3xl md:text-4xl font-display font-bold text-[#e0e0e0] mb-2">
             Manufacturer Directory
           </h1>
-          <p className="text-ink/70 text-base max-w-3xl">
+          <p className="text-[#e0e0e0]/70 text-base max-w-3xl">
             {list.length.toLocaleString()} broadcast, post-production, and live-production
             manufacturers
             {nabCount > 0 && <> · {nabCount.toLocaleString()} exhibiting at NAB Show 2026</>}
@@ -74,7 +74,7 @@ export default async function ManufacturersIndex() {
 
         <ManufacturerDirectoryClient manufacturers={list} />
 
-        <section className="mt-16 border-t border-ink/10 pt-8 text-sm text-ink/55 leading-relaxed">
+        <section className="mt-16 border-t border-[#252525] pt-8 text-sm text-[#888] leading-relaxed">
           <p>
             Sources: 2026 NAB Show exhibitor list (Map Your Show), IBC exhibitor list,
             manufacturer-direct press releases, and reporting tracked on Broadcast Beat.
@@ -82,7 +82,7 @@ export default async function ManufacturersIndex() {
           </p>
           <p className="mt-2">
             Are you a manufacturer and want to update your listing?{" "}
-            <Link href="/contact" className="text-brand-primary hover:underline">
+            <Link href="/contact" className="text-[#3b82f6] hover:underline">
               Contact our editors
             </Link>
             .
diff --git a/src/app/nab-2026/page.tsx b/src/app/nab-2026/page.tsx
index d3b3418..47a8543 100644
--- a/src/app/nab-2026/page.tsx
+++ b/src/app/nab-2026/page.tsx
@@ -87,23 +87,23 @@ export default async function NabHub() {
   const articles = (rawArticles || []) as ArticleRow[];
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-[#0d0d0d]">
       <Header />
       <CompanyMentionsHover />
 
       {/* Hero */}
-      <section className="bg-gradient-to-br from-amber-50 to-white border-b border-ink/10">
+      <section className="bg-gradient-to-br from-amber-500/10 to-[#0d0d0d] border-b border-[#252525]">
         <div className="max-w-6xl mx-auto px-4 py-10">
           <div className="flex items-baseline gap-3 mb-2">
-            <span className="text-[10px] font-bold uppercase tracking-widest bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
+            <span className="text-[10px] font-bold uppercase tracking-widest bg-amber-500/20 text-amber-300 px-2 py-0.5 rounded">
               Live coverage hub
             </span>
-            <span className="text-xs text-ink/50">April 11–16, 2026 · Las Vegas</span>
+            <span className="text-xs text-[#888]">April 11–16, 2026 · Las Vegas</span>
           </div>
-          <h1 className="text-3xl md:text-5xl font-display font-bold text-ink mb-3">
+          <h1 className="text-3xl md:text-5xl font-display font-bold text-[#e0e0e0] mb-3">
             NAB Show 2026
           </h1>
-          <p className="text-ink/70 text-base max-w-3xl">
+          <p className="text-[#aaa] text-base max-w-3xl">
             {exhibitors.length.toLocaleString()} exhibitors confirmed.
             {sponsorRows.length > 0 && <> {sponsorRows.length} are Broadcast Beat coverage partners.</>}
             {" "}Browse the directory, read the latest product news, and find every booth.
@@ -117,10 +117,10 @@ export default async function NabHub() {
         {sponsorRows.length > 0 && (
           <section>
             <header className="flex items-baseline justify-between mb-4">
-              <h2 className="text-xl font-display font-bold text-ink">
+              <h2 className="text-xl font-display font-bold text-[#e0e0e0]">
                 Coverage Partners at NAB
               </h2>
-              <span className="text-xs text-ink/50">{sponsorRows.length} exhibiting partner{sponsorRows.length === 1 ? "" : "s"}</span>
+              <span className="text-xs text-[#888]">{sponsorRows.length} exhibiting partner{sponsorRows.length === 1 ? "" : "s"}</span>
             </header>
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
               {sponsorRows.map((e) => (
@@ -128,18 +128,18 @@ export default async function NabHub() {
                   key={e.slug}
                   href={`/manufacturers/${e.slug}`}
                   data-company-slug={e.slug}
-                  className="bg-white border-2 border-emerald-300 rounded-lg p-3 hover:border-emerald-500 hover:shadow-md transition-all flex flex-col items-center text-center gap-2"
+                  className="bg-[#0d0d0d] border-2 border-emerald-500/40 rounded-lg p-3 hover:border-emerald-500/70 hover:shadow-md transition-all flex flex-col items-center text-center gap-2"
                 >
-                  <div className="w-full h-16 flex items-center justify-center bg-ink/5 rounded">
+                  <div className="w-full h-16 flex items-center justify-center bg-[#1a1a1a] rounded">
                     {e.logo_url ? (
                       /* eslint-disable-next-line @next/next/no-img-element */
                       <img src={e.logo_url} alt={`${e.company_name} logo`} className="max-h-12 max-w-full object-contain" loading="lazy" />
                     ) : (
-                      <span className="text-2xl font-bold text-ink/40">{e.company_name.charAt(0).toUpperCase()}</span>
+                      <span className="text-2xl font-bold text-[#666]">{e.company_name.charAt(0).toUpperCase()}</span>
                     )}
                   </div>
-                  <span className="font-semibold text-ink text-xs truncate w-full">{e.company_name}</span>
-                  <span className="text-[9px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded">Sponsor</span>
+                  <span className="font-semibold text-[#e0e0e0] text-xs truncate w-full">{e.company_name}</span>
+                  <span className="text-[9px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-300 px-1.5 py-0.5 rounded">Sponsor</span>
                 </Link>
               ))}
             </div>
@@ -150,10 +150,10 @@ export default async function NabHub() {
         {articles.length > 0 && (
           <section>
             <header className="flex items-baseline justify-between mb-4">
-              <h2 className="text-xl font-display font-bold text-ink">
+              <h2 className="text-xl font-display font-bold text-[#e0e0e0]">
                 Latest from the show floor
               </h2>
-              <Link href="/news?search=NAB+2026" className="text-xs text-brand-primary hover:underline">
+              <Link href="/news?search=NAB+2026" className="text-xs text-[#3b82f6] hover:underline">
                 See all NAB coverage →
               </Link>
             </header>
@@ -162,7 +162,7 @@ export default async function NabHub() {
                 <Link
                   key={a.wp_slug}
                   href={`/news/${a.wp_slug}`}
-                  className="group bg-white border border-ink/10 rounded-lg overflow-hidden hover:border-brand-primary hover:shadow-sm transition-all"
+                  className="group bg-[#0d0d0d] border border-[#252525] rounded-lg overflow-hidden hover:border-[#3b82f6] hover:shadow-sm transition-all"
                 >
                   {a.featured_image && (
                     /* eslint-disable-next-line @next/next/no-img-element */
@@ -174,11 +174,11 @@ export default async function NabHub() {
                     />
                   )}
                   <div className="p-3">
-                    <h3 className="font-semibold text-ink text-sm leading-snug group-hover:text-brand-primary line-clamp-3 mb-1">
+                    <h3 className="font-semibold text-[#e0e0e0] text-sm leading-snug group-hover:text-[#3b82f6] line-clamp-3 mb-1">
                       {a.title}
                     </h3>
                     {a.wp_published_at && (
-                      <p className="text-[10px] text-ink/50">
+                      <p className="text-[10px] text-[#888]">
                         {new Date(a.wp_published_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                       </p>
                     )}
@@ -192,10 +192,10 @@ export default async function NabHub() {
         {/* Full exhibitor list */}
         <section>
           <header className="flex items-baseline justify-between mb-4">
-            <h2 className="text-xl font-display font-bold text-ink">
+            <h2 className="text-xl font-display font-bold text-[#e0e0e0]">
               All NAB 2026 exhibitors
             </h2>
-            <Link href="/manufacturers" className="text-xs text-brand-primary hover:underline">
+            <Link href="/manufacturers" className="text-xs text-[#3b82f6] hover:underline">
               Full directory →
             </Link>
           </header>
@@ -205,24 +205,24 @@ export default async function NabHub() {
                 key={e.slug}
                 href={`/manufacturers/${e.slug}`}
                 data-company-slug={e.slug}
-                className="bg-white border border-ink/10 rounded-md p-2.5 hover:border-brand-primary transition-all flex items-center gap-2.5"
+                className="bg-[#0d0d0d] border border-[#252525] rounded-md p-2.5 hover:border-[#3b82f6] transition-all flex items-center gap-2.5"
               >
                 {e.logo_url ? (
                   /* eslint-disable-next-line @next/next/no-img-element */
-                  <img src={e.logo_url} alt="" className="w-10 h-10 rounded bg-ink/5 object-contain flex-shrink-0" loading="lazy" />
+                  <img src={e.logo_url} alt="" className="w-10 h-10 rounded bg-[#1a1a1a] object-contain flex-shrink-0" loading="lazy" />
                 ) : (
-                  <div className="w-10 h-10 rounded bg-ink/5 flex items-center justify-center text-ink/40 font-bold text-sm flex-shrink-0">
+                  <div className="w-10 h-10 rounded bg-[#1a1a1a] flex items-center justify-center text-[#666] font-bold text-sm flex-shrink-0">
                     {e.company_name.charAt(0).toUpperCase()}
                   </div>
                 )}
-                <span className="font-medium text-ink text-xs truncate">{e.company_name}</span>
+                <span className="font-medium text-[#e0e0e0] text-xs truncate">{e.company_name}</span>
               </Link>
             ))}
           </div>
           {otherRows.length > 200 && (
-            <p className="text-center text-xs text-ink/50 mt-4">
+            <p className="text-center text-xs text-[#888] mt-4">
               Showing 200 of {otherRows.length.toLocaleString()} exhibitors.{" "}
-              <Link href="/manufacturers" className="text-brand-primary hover:underline">Browse the full directory →</Link>
+              <Link href="/manufacturers" className="text-[#3b82f6] hover:underline">Browse the full directory →</Link>
             </p>
           )}
         </section>