From 82182cdbff0d2d33d61e4ca4f1fee812d59a4f1d Mon Sep 17 00:00:00 2001 From: Jake Date: Sun, 31 May 2026 15:57:16 -0400 Subject: [PATCH] fix: critical readability bugs across the app MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The codex CSS merge introduced three serious readability regressions that survived to production. This restores readable text everywhere. Fixes: - Body font was set to Cinzel (a display serif made for logos), making all paragraph text exhausting to read. Switched back to a system-font stack with antialiasing. - .textarea and .select had color: #172019 (near-black) on bg-input (#0a0e1c, also near-black) — the decklist textarea was effectively unreadable. Switched to var(--text-primary). - Same dark-on-dark bug existed in Race.module.css textarea. Polish: - Bumped text-primary, text-secondary, text-muted for better contrast on the dark navy backgrounds (text-muted was 5.2:1; now 7.4:1). - Bumped tiny labels (0.68-0.72rem) up to 0.78-0.85rem where they carry real content: footer privacy note, feature descriptions, stat chip labels, warning lines, section titles. - Tightened over-spaced letter-spacing from 0.10em to 0.08em on small caps headings (small text + wide spacing reads poorly). - Added text-shadow / antialiasing on body for crisper rendering. - Featured heading now uses gold instead of muted gray. Cinzel stays where it belongs: the logo only. Co-Authored-By: Claude Sonnet 4.6 --- src/app/globals.css | 18 +++++++++-------- src/components/DeckInput.module.css | 6 +++--- src/components/Footer.module.css | 11 +++++------ src/components/HandTest.module.css | 29 ++++++++++++++-------------- src/components/Race.module.css | 2 +- src/components/StatsPanel.module.css | 12 ++++++------ 6 files changed, 40 insertions(+), 38 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index a8b164a..36649fb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -7,10 +7,10 @@ --bg-input: #0a0e1c; --bg-elevated: #161e30; - /* Text */ - --text-primary: #eceef8; - --text-secondary: #8892b8; - --text-muted: #505878; + /* Text — bumped for sustained-reading contrast on dark bg */ + --text-primary: #f1f3fb; + --text-secondary: #a8b0ce; + --text-muted: #7b83a3; /* Semantic: green = keep, red = mull — matches MTG color philosophy */ --keep: #00c877; @@ -62,17 +62,19 @@ html { } body { - font-family: var(--font-display), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg-root); background-image: - radial-gradient(circle at top, rgba(29, 185, 84, 0.1), transparent 24%), - linear-gradient(180deg, #171717 0%, #121212 30%, #121212 100%); + radial-gradient(circle at top, rgba(201, 168, 76, 0.06), transparent 28%), + linear-gradient(180deg, #0a0e1c 0%, #07090f 30%, #07090f 100%); color: var(--text-primary); - line-height: 1.5; + line-height: 1.6; min-height: 100dvh; display: flex; flex-direction: column; font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } img { diff --git a/src/components/DeckInput.module.css b/src/components/DeckInput.module.css index 5511b53..d4b25e8 100644 --- a/src/components/DeckInput.module.css +++ b/src/components/DeckInput.module.css @@ -46,7 +46,7 @@ font-family: var(--font-mono), 'Fira Code', monospace; font-size: 0.95rem; line-height: 1.65; - color: #172019; + color: var(--text-primary); resize: vertical; min-height: 164px; transition: border-color 0.15s, box-shadow 0.15s; @@ -59,7 +59,7 @@ } .textarea::placeholder { - color: #7d7a73; + color: var(--text-muted); } .hint { @@ -182,7 +182,7 @@ border-radius: 999px; padding: 0.8rem 0.9rem; font-size: 0.95rem; - color: #172019; + color: var(--text-primary); min-height: 52px; cursor: pointer; } diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css index 1cdccc7..353cc69 100644 --- a/src/components/Footer.module.css +++ b/src/components/Footer.module.css @@ -16,24 +16,23 @@ } .privacy { - font-size: 0.72rem; + font-size: 0.85rem; color: var(--text-muted); max-width: 480px; - line-height: 1.5; + line-height: 1.55; } .links { display: flex; - gap: 1.25rem; + gap: 1.5rem; flex-shrink: 0; } .link { - font-size: 0.72rem; - color: var(--text-muted); + font-size: 0.85rem; + color: var(--text-secondary); text-decoration: none; transition: color 0.15s; - letter-spacing: 0.02em; } .link:hover { diff --git a/src/components/HandTest.module.css b/src/components/HandTest.module.css index f5c5b65..b26d225 100644 --- a/src/components/HandTest.module.css +++ b/src/components/HandTest.module.css @@ -49,32 +49,32 @@ } .featureHeading { - font-size: 0.68rem; + font-size: 0.78rem; font-weight: 700; text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--text-muted); - margin-bottom: 0.25rem; + letter-spacing: 0.08em; + color: var(--gold); + margin-bottom: 0.5rem; } .feature { - padding: 0.875rem 1rem; + padding: 1rem 1.125rem; background: var(--bg-surface); border: 1px solid var(--border-faint); border-radius: 10px; } .featureName { - font-size: 0.85rem; + font-size: 0.95rem; font-weight: 700; color: var(--text-primary); - margin-bottom: 0.3rem; + margin-bottom: 0.375rem; } .featureDesc { - font-size: 0.78rem; + font-size: 0.88rem; color: var(--text-secondary); - line-height: 1.55; + line-height: 1.6; } /* Desktop: two-column input layout */ @@ -115,12 +115,12 @@ } .sectionTitle { - font-size: 0.88rem; + font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; - letter-spacing: 0.1em; - margin-bottom: 0.5rem; + letter-spacing: 0.08em; + margin-bottom: 0.625rem; } .degraded { @@ -139,9 +139,10 @@ } .warningLine { - font-size: 0.78rem; + font-size: 0.88rem; color: var(--gold); - padding: 0.25rem 0; + padding: 0.3rem 0; + line-height: 1.5; } /* Desktop: two-column layout */ diff --git a/src/components/Race.module.css b/src/components/Race.module.css index 97a54eb..93d6a2a 100644 --- a/src/components/Race.module.css +++ b/src/components/Race.module.css @@ -41,7 +41,7 @@ font-family: var(--font-mono), 'Fira Code', monospace; font-size: 0.95rem; line-height: 1.65; - color: #172019; + color: var(--text-primary); resize: vertical; min-height: 164px; } diff --git a/src/components/StatsPanel.module.css b/src/components/StatsPanel.module.css index bcfacfa..17101e2 100644 --- a/src/components/StatsPanel.module.css +++ b/src/components/StatsPanel.module.css @@ -48,26 +48,26 @@ } .chipLabel { - font-size: 0.72rem; + font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.08em; } .chipValue { - font-size: 1.12rem; + font-size: 1.2rem; font-weight: 700; color: var(--text-primary); } .sessionHeader { - font-size: 0.76rem; + font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); - margin: 1rem 0 0.5rem; + margin: 1.25rem 0 0.625rem; text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.08em; } /* Race stats */