From f1ecfe31762bd488573a2c0ea5bd43aa757f8919 Mon Sep 17 00:00:00 2001
From: Local Administrator <localadministrator@onsethost.com>
Date: Wed, 3 Jun 2026 15:57:40 +0000
Subject: [PATCH] feat(avbeat): typography phase-1 slice + drop homepage Topics
 chip row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Typography (approved Phase 1 slice only — utility classes + other reclasses deferred):
- src/styles/tailwind.css body rule: re-add smoothing now that the surface palette is locked in — -webkit-font-smoothing antialiased, -moz-osx-font-smoothing grayscale, text-rendering optimizeLegibility, font-feature-settings 'kern','liga', global letter-spacing -0.005em.
- src/components/FeaturedBentoFromDb.tsx:115 cinematic hero headline: text-2xl md:text-4xl lg:text-5xl leading-tight → text-[40px] md:text-[48px] lg:text-[56px] leading-[1.05] tracking-[-0.02em] font-bold. Confident editorial display per the avinteractive reference.
- src/app/news/[slug]/NewsArticleDetailClient.tsx:309 and src/app/articles/[slug]/ArticleDetailClient.tsx:255 article H1: text-[#f0f0f0] → text-[#0F172A]. Fixes the leftover white-on-white readability bug on article pages.

UI:
- src/app/home-page/components/ArticleFeed.tsx: removed the 'Topics:' chip row from Industry News per current design direction; all stories now show without per-topic filter.
---
 .../articles/[slug]/ArticleDetailClient.tsx   |  2 +-
 src/app/home-page/components/ArticleFeed.tsx  | 25 ++-----------------
 .../news/[slug]/NewsArticleDetailClient.tsx   |  2 +-
 src/components/FeaturedBentoFromDb.tsx        |  2 +-
 src/styles/tailwind.css                       |  9 ++++---
 5 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/src/app/articles/[slug]/ArticleDetailClient.tsx b/src/app/articles/[slug]/ArticleDetailClient.tsx
index ce98f00..6c4385d 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-[#f0f0f0]">
+              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]">
                 {article.title}
               </h1>
               <div className="mb-4">
diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index 4c5f37a..a77cc83 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -416,29 +416,8 @@ export default function ArticleFeed() {
               </button>
             </div>
 
-            {/* Row: topic chips */}
-            <div className="flex items-center gap-2 flex-wrap">
-              <span className="text-[#555] text-[10px] font-body uppercase tracking-wider shrink-0">Topics:</span>
-              <div className="flex gap-1.5 flex-wrap">
-                {ALL_CATEGORIES.map((cat) => {
-                  const isActive = activeCategory === cat;
-                  return (
-                    <button
-                      key={cat}
-                      type="button"
-                      onClick={() => { setActiveCategory(cat); setPage(1); }}
-                      aria-pressed={isActive}
-                      className={`px-3 py-1.5 rounded-sm font-body text-[11px] font-semibold uppercase tracking-wide transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] ${
-                        isActive
-                          ? "bg-[#1D4ED8]/20 text-[#1D4ED8] border border-[#1D4ED8]/50"
-                          : "bg-[#111] text-[#888] border border-[#DCE6F2] hover:text-[#ccc] hover:border-[#3a3a3a]"
-                      }`}>
-                      {cat}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
+            {/* Topic chip row removed per current design direction —
+                Industry News shows all stories with no per-topic filter. */}
 
             {/* Advanced filters panel */}
             {showAdvanced && (
diff --git a/src/app/news/[slug]/NewsArticleDetailClient.tsx b/src/app/news/[slug]/NewsArticleDetailClient.tsx
index 29af28a..c564fd8 100644
--- a/src/app/news/[slug]/NewsArticleDetailClient.tsx
+++ b/src/app/news/[slug]/NewsArticleDetailClient.tsx
@@ -306,7 +306,7 @@ 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-[#f0f0f0]">
+              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]">
                 {article.title}
               </h1>
               <div className="mb-4">
diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx
index e4eac25..ab676ec 100644
--- a/src/components/FeaturedBentoFromDb.tsx
+++ b/src/components/FeaturedBentoFromDb.tsx
@@ -112,7 +112,7 @@ export default async function FeaturedBento() {
                     {hero.category}
                   </div>
                 )}
-                <h3 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white leading-tight max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
+                <h3 className="font-serif text-[40px] md:text-[48px] lg:text-[56px] text-white leading-[1.05] tracking-[-0.02em] font-bold max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
                   {hero.title}
                 </h3>
                 {hero.excerpt && (
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 11b73e9..f851f91 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -56,10 +56,11 @@ body {
   font-family: var(--font-body);
   background-color: var(--color-bg);
   color: var(--color-foreground);
-  /* Smoothing intentionally NOT overridden — `antialiased`/`grayscale` was
-     correct for the old dark theme but renders thinner/harsher on the new
-     light theme. Default OS smoothing (subpixel on Windows/older macOS,
-     `auto` elsewhere) gives Inter + Lora their intended weight. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'kern', 'liga';
+  letter-spacing: -0.005em;
 }
 
 /* =====================