From abc4f6fc8e6c1978656c925781258e113308b190 Mon Sep 17 00:00:00 2001 From: Local Administrator Date: Thu, 4 Jun 2026 16:52:59 +0000 Subject: [PATCH] fix(article): remove drop-cap + match link color/font to body text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two complaints on /news/[slug]: - the oversized first-letter drop-cap looked editorial-magazine, not in spec — first paragraph should start as normal prose - inline links rendered near-white against the white page because Tailwind Typography's prose-a variable was overriding the (no-!important) brand-blue rule, leaving ghost links unreadable Drop the ::first-letter rule entirely. Force link color to #1e293b body, font-family to inherit, and decoration color to currentColor so the underline is the only visual link cue (still WCAG-distinguishable without relying on color). Hover keeps brand blue. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/styles/tailwind.css | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index e55b31e..84bc71a 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -1606,16 +1606,6 @@ a.company-mention:hover { line-height: 1.6; color: #1e293b; } -.bb-article-prose p:first-of-type::first-letter { - float: left; - font-family: var(--font-sans), sans-serif; - font-size: 64px; - line-height: 0.95; - font-weight: 700; - color: #0F172A; - padding: 6px 10px 0 0; - margin-top: 4px; -} .bb-article-prose h2 { font-family: var(--font-sans), sans-serif; font-size: 28px; @@ -1652,16 +1642,22 @@ a.company-mention:hover { margin-right: 0.15em; opacity: 0.55; } +/* Inline article links: same color + font as body so they don't look like + pale ghost links against the white page. Underline is the only visual + cue that distinguishes a link from prose — required for accessibility + (links must be identifiable by more than color alone). !important + defeats Tailwind Typography's `prose-a` variable which otherwise wins. */ .bb-article-prose a { - color: #1D4ED8; + color: #1e293b !important; + font-family: inherit !important; text-decoration: underline; - text-decoration-color: rgba(0, 212, 255, 0.5); + text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 120ms ease, text-decoration-color 120ms ease; } .bb-article-prose a:hover { - color: #1D4ED8; + color: #1D4ED8 !important; text-decoration-color: #1D4ED8; } .bb-article-prose figure {