From 334115068bbc4c8275de76b0fe2edffab7a870c9 Mon Sep 17 00:00:00 2001
From: Local Administrator <localadministrator@onsethost.com>
Date: Wed, 3 Jun 2026 16:59:12 +0000
Subject: [PATCH] =?UTF-8?q?fix(contrast,typography):=20article=20header=20?=
 =?UTF-8?q?section=20=E2=80=94=20match=20body=20font=20(font-serif)=20+=20?=
 =?UTF-8?q?color=20(#1e293b)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Top-of-article block (above the featured image) used Inter (font-heading)
and inconsistent colors (H1 navy, dek light-grey #999, author name
near-white #e0e0e0). With the body section now in Georgia-style serif
on slate-800 (#1e293b), the header read as a separate visual zone.

Unified both detail routes:

src/app/news/[slug]/NewsArticleDetailClient.tsx
  - H1   :309 font-heading text-[#0F172A] → font-serif text-[#1e293b]
  - Dek  :315 font-body text-[#999]        → font-serif text-[#1e293b]   (this is the lead summary line that was reading as 'white' on the Magewell article — same near-white #999 on white surface)
  - Author name link :332 font-heading text-[#e0e0e0] → font-serif text-[#1e293b]

src/app/articles/[slug]/ArticleDetailClient.tsx
  - H1   :255 same swap as above
  - Author name link :274 same swap as above

Secondary meta (category eyebrow #1D4ED8 blue, read-time/date/author-title #777) intentionally kept at their muted shades — those are subordinate text and read fine on the light surface.
---
 src/app/articles/[slug]/ArticleDetailClient.tsx | 4 ++--
 src/app/news/[slug]/NewsArticleDetailClient.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/articles/[slug]/ArticleDetailClient.tsx b/src/app/articles/[slug]/ArticleDetailClient.tsx
index 1a6bb2f..cddcd51 100644
--- a/src/app/articles/[slug]/ArticleDetailClient.tsx
+++ b/src/app/articles/[slug]/ArticleDetailClient.tsx
@@ -252,7 +252,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
                 <span className="text-xs text-[#555]">·</span>
                 <span className="text-xs text-[#777]">{article.readTime}</span>
               </div>
-              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]">
+              <h1 className="font-serif text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#1e293b]">
                 {article.title}
               </h1>
               <div className="mb-4">
@@ -271,7 +271,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
                   <div>
                     <Link
                       href={`/authors/${article.authorSlug}`}
-                      className="font-heading font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#e0e0e0]">
+                      className="font-serif font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#1e293b]">
                       {article.author}
                     </Link>
                     <p className="font-body text-xs text-[#777]">{article.authorTitle}</p>
diff --git a/src/app/news/[slug]/NewsArticleDetailClient.tsx b/src/app/news/[slug]/NewsArticleDetailClient.tsx
index 6d286d6..5dd5533 100644
--- a/src/app/news/[slug]/NewsArticleDetailClient.tsx
+++ b/src/app/news/[slug]/NewsArticleDetailClient.tsx
@@ -306,13 +306,13 @@ export default function NewsArticleDetailClient({
                 <span className="text-xs text-[#777]">{article.readTime}</span>
               </div>
 
-              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]">
+              <h1 className="font-serif text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#1e293b]">
                 {article.title}
               </h1>
               <div className="mb-4">
                 <StarRating seed={article.slug} publishedAt={article.publishedAt || article.date} size="md" />
               </div>
-              <p className="font-body text-lg text-[#999] mb-6 leading-relaxed">
+              <p className="font-serif text-lg text-[#1e293b] mb-6 leading-relaxed">
                 {article.excerpt}
               </p>
 
@@ -329,7 +329,7 @@ export default function NewsArticleDetailClient({
                   <div>
                     <Link
                       href={`/authors/${article.authorSlug}`}
-                      className="font-heading font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#e0e0e0]">
+                      className="font-serif font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#1e293b]">
                       {article.author}
                     </Link>
                     <p className="font-body text-xs text-[#777]">{article.authorTitle}</p>