fix(contrast): article-body white-on-white — body/dropcap/h2/h3/blockquote/links to navy + slate, drop prose-invert

Article detail pages (/news/[slug] and /articles/[slug]) inherited a dark-theme
prose color palette via the .bb-article-prose ruleset + Tailwind's
prose-invert utility. With the new light surface, every text element in
the article body rendered near-white on white, while the H1 (fixed in
the prior commit) was already navy. Bringing the body in line:

src/styles/tailwind.css:
  - .bb-article-prose wrapper           #d6d4d0  -> #1e293b !important  (slate-800 for long-form body)
  - .bb-article-prose p:first-of-type   #e8e6e0  -> #1e293b
  - .bb-article-prose first-letter      #f0eee8  -> #0F172A             (drop-cap full navy)
  - .bb-article-prose h2                #f5f3ee  -> #0F172A             (in-body subhead matches the page H1)
  - .bb-article-prose h3                #ece9e2  -> #0F172A
  - .bb-article-prose blockquote        #e8e6e0  -> #1e293b
  - .bb-article-prose a (BASE)          #d6d4d0  -> #1D4ED8             (inline links visibly blue at rest, no longer invisible-until-hover; hover unchanged)

src/app/news/[slug]/NewsArticleDetailClient.tsx
src/app/articles/[slug]/ArticleDetailClient.tsx
  - Drop 'prose-invert' from the wrapper className on both routes so any
    descendant the bb-article-prose rules don't explicitly color (lists,
    strong, em, captions) falls back to Tailwind Typography's default
    light-page slate-700 palette.
This commit is contained in:
2026-06-03 16:49:48 +00:00
parent ecebc9b3b4
commit 1a6b9d4333
3 changed files with 9 additions and 9 deletions

View File

@@ -356,7 +356,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
{/* Article Body */}
{/* DO NOT OVERRIDE — article body prose styles */}
<div
className="bb-article-prose prose prose-invert max-w-none mb-8"
className="bb-article-prose prose max-w-none mb-8"
dangerouslySetInnerHTML={{ __html: article.content }}
/>

View File

@@ -458,7 +458,7 @@ export default function NewsArticleDetailClient({
<ArticleBody
html={article.content}
everyN={4}
className="bb-article-prose prose prose-invert max-w-none mb-8"
className="bb-article-prose prose max-w-none mb-8"
/>
{/* Tags */}

View File

@@ -1589,7 +1589,7 @@ a.company-mention:hover {
font-family: Georgia, "Cheltenham Subhead", Charter, "Times New Roman", Times, serif !important;
font-size: 19px !important;
line-height: 1.75 !important;
color: #d6d4d0 !important;
color: #1e293b !important;
max-width: 720px;
margin-left: auto;
margin-right: auto;
@@ -1602,7 +1602,7 @@ a.company-mention:hover {
.bb-article-prose p:first-of-type {
font-size: 22px;
line-height: 1.6;
color: #e8e6e0;
color: #1e293b;
}
.bb-article-prose p:first-of-type::first-letter {
float: left;
@@ -1610,7 +1610,7 @@ a.company-mention:hover {
font-size: 64px;
line-height: 0.95;
font-weight: 700;
color: #f0eee8;
color: #0F172A;
padding: 6px 10px 0 0;
margin-top: 4px;
}
@@ -1618,7 +1618,7 @@ a.company-mention:hover {
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
font-size: 28px;
font-weight: 700;
color: #f5f3ee;
color: #0F172A;
margin: 2em 0 0.6em;
letter-spacing: -0.01em;
line-height: 1.25;
@@ -1627,7 +1627,7 @@ a.company-mention:hover {
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
font-size: 22px;
font-weight: 700;
color: #ece9e2;
color: #0F172A;
margin: 1.6em 0 0.5em;
line-height: 1.3;
}
@@ -1638,7 +1638,7 @@ a.company-mention:hover {
font-style: italic;
font-size: 22px;
line-height: 1.5;
color: #e8e6e0;
color: #1e293b;
}
.bb-article-prose blockquote::before {
content: "“";
@@ -1651,7 +1651,7 @@ a.company-mention:hover {
opacity: 0.55;
}
.bb-article-prose a {
color: #d6d4d0;
color: #1D4ED8;
text-decoration: underline;
text-decoration-color: rgba(0, 212, 255, 0.5);
text-underline-offset: 3px;