From a1148e213b9d03f80635d1debfdbac938ac3e426 Mon Sep 17 00:00:00 2001
From: Local Administrator <localadministrator@onsethost.com>
Date: Wed, 3 Jun 2026 13:11:57 +0000
Subject: [PATCH] =?UTF-8?q?fix(contrast):=20white-on-white=20text=20bug=20?=
 =?UTF-8?q?=E2=80=94=20homepage=202x2=20titles,=20.nav-link-bb,=20/news=20?=
 =?UTF-8?q?date=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 2026 rebrand swept surface hexes from dark to light but left near-white text colors baked into components. Three approved fixes:

- FeaturedBento.tsx:255 — 2x2 grid card titles base color #e0e0e0 -> #0F172A (brand-navy). Hover stays #1D4ED8.
- tailwind.css .nav-link-bb — base color #cccccc -> var(--brand-text). Hover unchanged.
- ArticleFeed.tsx :375 + :385 — date input text #888 -> #475569 (brand-text-muted) and dropped [color-scheme:dark] so Chrome stops rendering the dark date-picker chrome on a now-white input.

Findings #2, #3, #6 in the audit were not touched — Ryan flagged them as unverified.
---
 src/app/home-page/components/ArticleFeed.tsx   | 4 ++--
 src/app/home-page/components/FeaturedBento.tsx | 2 +-
 src/styles/tailwind.css                        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index 54bba22..4c5f37a 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -372,7 +372,7 @@ export default function ArticleFeed() {
                 value={dateFrom}
                 onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
                 max={dateTo || undefined}
-                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors [color-scheme:dark]"
+                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#475569] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors"
                 title="From date"
                 aria-label="Filter articles from date"
               />
@@ -382,7 +382,7 @@ export default function ArticleFeed() {
                 value={dateTo}
                 onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
                 min={dateFrom || undefined}
-                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors [color-scheme:dark]"
+                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#475569] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors"
                 title="To date"
                 aria-label="Filter articles to date"
               />
diff --git a/src/app/home-page/components/FeaturedBento.tsx b/src/app/home-page/components/FeaturedBento.tsx
index ef92727..ffc2f4b 100644
--- a/src/app/home-page/components/FeaturedBento.tsx
+++ b/src/app/home-page/components/FeaturedBento.tsx
@@ -252,7 +252,7 @@ export default function FeaturedBento() {
                 </div>
               </div>
               <div className="p-2 md:p-2.5 flex-1 flex flex-col justify-between">
-                <h3 className="font-heading text-[#e0e0e0] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-3 group-hover:text-[#1D4ED8] transition-colors duration-200 mb-1.5 md:mb-2">
+                <h3 className="font-heading text-[#0F172A] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-3 group-hover:text-[#1D4ED8] transition-colors duration-200 mb-1.5 md:mb-2">
                   {article?.title}
                 </h3>
                 <span className="read-more inline-block text-[11px]">Read More »</span>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9efa6b2..7492f9c 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -218,7 +218,7 @@ body {
   font-size: 12px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: #cccccc;
+  color: var(--brand-text);
   text-decoration: none;
   padding: 4px 0;
   transition: color var(--transition-fast);