From b8b80877ac69c91e6db786149fa4adf91127dfea Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 12 Sep 2026 00:55:52 +0200 Subject: [PATCH] fix: the study objective was near-white on near-white MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The section bar is a light surface inside a dark navbar, and `.navbar` sets a near-white text colour for that dark background. Everything in the light bar inherited it: the study objective, its dropdown, the counts. The section links had their own colour override and looked fine, which is why it went unnoticed for so long. `.navbar a`, `.navbar button` and their hovers are scoped to `.navbar-primary` — the dark bar they were written for — rather than to everything beneath it, which was also giving the switcher a translucent white border on a white surface. And the section bar sets its own text colour rather than inheriting one meant for a dark ground. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01TqXevQJhxFrM7jJg82cgZN --- frontend/src/index.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 1dc30f2..3f73d7c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -177,6 +177,12 @@ html, body { overflow-x: hidden; } /* A shade off the page, so the bar reads as a surface rather than as the top of the content — white on white left it looking like a stray row of links. */ background: linear-gradient(var(--card-bg), var(--bg)); + /* A light surface inside a dark navbar, and `.navbar` sets a near-white text + colour for that dark background. Everything in here inherited it — the + study objective and its dropdown especially — so it was near-white on + near-white and barely legible. The links had their own override and looked + fine, which is why it went unnoticed. */ + color: var(--text); border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); height: 46px; @@ -209,9 +215,12 @@ html, body { overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { .navbar-sections { transition: none; } } [data-theme="markdown"] .navbar .logo { color: #d4a96a; } .nav-burger { display: none; background: none !important; border: 0 !important; cursor: pointer; color: var(--navbar-fg); padding: 6px; flex-direction: column; gap: 5px; opacity: 0.85; } -.navbar a { color: var(--navbar-fg); text-decoration: none; font-size: 0.83rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s, background 0.15s; } -.navbar a:hover { background: rgba(255,255,255,0.09); opacity: 1 !important; } -.navbar button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--navbar-fg); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; font-family: inherit; } +/* Scoped to the dark bar. These were `.navbar a` and `.navbar button`, which + also caught everything in the light section bar beneath it — near-white text + and a translucent white border, on a white surface. */ +.navbar-primary a { color: var(--navbar-fg); text-decoration: none; font-size: 0.83rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s, background 0.15s; } +.navbar-primary a:hover { background: rgba(255,255,255,0.09); opacity: 1 !important; } +.navbar-primary button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--navbar-fg); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; font-family: inherit; } /* ── Cards ──────────────────────────────────────────────────── */ .card {