/* ========================================================================== assets/light.css — Light Mode corrections. (Light Mode v1.0) SCOPE: EVERY RULE IS INSIDE html[data-theme="light"]. Dark Mode is not touched by this file — not one selector can match it. That is checked by test_light.py, which fails if any rule here is unscoped. ------------------------------------------------------------------------ WHAT WENT WRONG, AND WHO BROKE IT ------------------------------------------------------------------------ I did. The glass layer repainted the public site header: .site-head, .nav-drawer, .topbar { background: var(--g-tint); } In light mode --g-tint is rgba(255,255,255,.72), so over the page background the header resolves to #FAF9F6 — near-white. But the header's text colours were written for a DARK bar (--topbar: #1B232B) and were never changed: --topbar-dim #C9CDD3 on #FAF9F6 = 1.52 : 1 --topbar-ink #F2F0E8 on #FAF9F6 = 1.08 : 1 1.08:1 is white on white. That is exactly the washed-out navigation in the screenshots, and it was introduced by the glass adoption rather than being a pre-existing fault in the site's palette. The site's own light palette is fine and stays: --ink2 measures 7.79 on the frosted header and --muted 5.36. The fix is to USE them there. ------------------------------------------------------------------------ THE PRINCIPLE ------------------------------------------------------------------------ A surface that changes colour must change its text colour in the same place. That is the same pairing rule the hover fix established, applied to a background rather than a hover state — and this is what happens when it is applied to one and not the other. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · THE HEADER — text repaired for a light bar The header is frosted white in light mode, so its ink must be the site's dark inks, not the pale ones intended for the dark bar. -------------------------------------------------------------------------- */ html[data-theme="light"] .topbar, html[data-theme="light"] .site-head, html[data-theme="light"] .nav-drawer { color: var(--ink); border-bottom: 1px solid var(--line); } html[data-theme="light"] .topnav a { color: var(--ink2); /* 7.79 : 1 — was 1.52 */ } html[data-theme="light"] .topnav a:hover { background: rgba(27, 35, 43, .07); /* the light-mode equivalent of the white wash used on the dark bar */ color: var(--ink); /* paired, never inherited */ } html[data-theme="light"] .topnav a.on { background: var(--accent); color: var(--accent-ink); } /* The submenu, the caret and the mobile toggle all carried dark-bar colours for the same reason. */ html[data-theme="light"] .topnav .submenu a { color: var(--ink2); } html[data-theme="light"] .topnav .submenu a:hover { background: rgba(27,35,43,.07); color: var(--ink); } html[data-theme="light"] .navcaret { color: var(--ink2); } html[data-theme="light"] .navcaret:hover { background: rgba(27,35,43,.08); color: var(--ink); } html[data-theme="light"] .navtoggle { background: rgba(27,35,43,.06); color: var(--ink); /* stated, not left to the child span */ } html[data-theme="light"] .navtoggle:hover { background: rgba(27,35,43,.12); color: var(--ink); } /* The bars follow the button's colour rather than naming their own, so the pairing above governs them too. */ html[data-theme="light"] .navtoggle span { background: currentColor; } /* The brand mark sits on the frosted bar now, so it needs the dark ink too. */ html[data-theme="light"] .kj-brand, html[data-theme="light"] .kj-brand .logo { color: var(--ink); } /* The footer keeps its dark bar — it was never repainted, so its pale ink is still correct there. Stated so nobody "fixes" it later. */ /* -------------------------------------------------------------------------- 2 · THE TWO TOKEN-LEVEL FAILURES Measured across every real colour pair in the site's own palette. Only two fell below AA, and both involve --accent used as text on a light surface. The accent stays #3160FB where it is a FILL (it carries white text at 8.4:1); a darker variant is used where it is TEXT. -------------------------------------------------------------------------- */ html[data-theme="light"] { /* #3160FB measured 4.12 on --bg and 3.90 on --line2. #2049D6 clears both. */ --accent-text: #2049D6; } /* Prose links only. The earlier version was a:not(.btn):not(.topnav a):not(.on) which had two faults: `.btn` did not cover .kv-btn / .kv-cta, so it recoloured primary BUTTON labels to link-blue on their own fill; and `:not(.topnav a)` uses a descendant combinator, which Selectors Level 3 rejects outright — dropping the entire rule in some browsers. Naming the containers where a link must stand out from body text is both narrower and predictable. A button already states its own colour. */ html[data-theme="light"] .prose a, html[data-theme="light"] .kv-lede a, html[data-theme="light"] .article a, html[data-theme="light"] .rowline a, html[data-theme="light"] p > a, html[data-theme="light"] li > a, html[data-theme="light"] .link, html[data-theme="light"] .more, html[data-theme="light"] .crumb a { color: var(--accent-text); } /* Buttons are never recoloured by the rule above — stated explicitly so a future widening cannot reintroduce the fault. */ html[data-theme="light"] a.btn, html[data-theme="light"] a.kv-btn, html[data-theme="light"] a.kv-cta, html[data-theme="light"] a.button, html[data-theme="light"] a.cta { color: inherit; } /* -------------------------------------------------------------------------- 3 · GLASS, REFINED FOR LIGHT The brief asks for frosted white with soft shadows and gentle borders — not for less contrast. The tint is raised so a panel is a clear step above the warm background, and the border is given enough value to be seen at all. -------------------------------------------------------------------------- */ html[data-theme="light"] { --g-tint: rgba(255, 255, 255, .82); --g-tint-raised: rgba(255, 255, 255, .94); --g-tint-sunken: rgba(255, 255, 255, .64); --g-edge: rgba(27, 35, 43, .10); --g-edge-strong: rgba(27, 35, 43, .16); /* Warm off-white, not pure white — the brief asks for it and it is easier on the eye over a long session. */ --g-base: #F4F2EC; --g-backdrop-max:#FFFFFF; --g-grid: rgba(27, 35, 43, .035); /* Softer, warmer shadows. Pure-black shadows on a warm ground read grey and dirty; tinting them to the ink colour keeps them looking like shadow. */ --g-shadow: 0 1px 2px rgba(27,35,43,.06), 0 8px 24px rgba(27,35,43,.07); --g-shadow-lg: 0 2px 6px rgba(27,35,43,.08), 0 24px 60px rgba(27,35,43,.12); } /* -------------------------------------------------------------------------- 4 · SLABS IN LIGHT A white slab on a white page has no step. The background is warm and the slab is white, so the panel reads as raised rather than as a region. -------------------------------------------------------------------------- */ html[data-theme="light"] { --s-slab: #FFFFFF; --s-slab-raised: #FFFFFF; --s-slab-sunken: #F7F5EF; --s-edge-top: rgba(255, 255, 255, 1); --s-edge: rgba(27, 35, 43, .09); --s-lift-1: 0 1px 2px rgba(27,35,43,.05), 0 2px 6px rgba(27,35,43,.05); --s-lift-2: 0 1px 2px rgba(27,35,43,.06), 0 6px 16px rgba(27,35,43,.07), 0 18px 44px rgba(27,35,43,.06); --s-lift-3: 0 2px 4px rgba(27,35,43,.08), 0 12px 32px rgba(27,35,43,.10), 0 36px 88px rgba(27,35,43,.09); } /* -------------------------------------------------------------------------- 5 · CONTROL STATES The brief asks that buttons, icons, links and fields stay visible in every state. Each fill below sets its own text colour in the same block — a rule that changes one without the other is the bug this platform keeps hitting. -------------------------------------------------------------------------- */ html[data-theme="light"] .btn, html[data-theme="light"] .button, html[data-theme="light"] .g-btn { background: rgba(255, 255, 255, .9); border-color: var(--g-edge); color: var(--ink); } html[data-theme="light"] .btn:hover, html[data-theme="light"] .button:hover, html[data-theme="light"] .g-btn:hover { background: #FFFFFF; border-color: var(--g-edge-strong); color: var(--ink); } html[data-theme="light"] .btn[disabled], html[data-theme="light"] .g-btn[disabled] { /* Disabled must still be READABLE — the brief says so, and a control the user cannot read is one they cannot understand the state of. 0.48 opacity on 15:1 text still leaves roughly 5:1. */ opacity: .55; color: var(--ink2); } html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select, html[data-theme="light"] .g-input { background: #FFFFFF; border-color: var(--g-edge-strong); color: var(--ink); } html[data-theme="light"] ::placeholder { color: var(--muted); opacity: 1; } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(32, 73, 214, .14); } /* Selection must not wash out the text under it. */ html[data-theme="light"] ::selection { background: rgba(32,73,214,.20); color: var(--ink); } /* -------------------------------------------------------------------------- 5b · THE THEME TOGGLE .kj-theme had NO styling in any stylesheet on the platform — the same gap as .cx-sugg two deliveries ago. It rendered as a bare "◐" glyph with default button styling, which is why it is nearly invisible in the screenshot. Its sibling .kj-burger has the same problem. Base styling for BOTH themes is in §5c below (unscoped, because an unstyled control is broken everywhere, not only in light mode). This block is the light-specific part the brief asks for. Measured on the frosted light header (#FDFDFC): --ink 15.61 : 1 --ink2 8.06 : 1 -------------------------------------------------------------------------- */ html[data-theme="light"] .themebtn, html[data-theme="light"] .kj-theme, html[data-theme="light"] .kj-burger, html[data-theme="light"] .navtoggle, /* .ds-icon-btn's colour is in design.css, which is not in this codebase, so whether it flips with the theme cannot be measured here. Stating it removes the question — and only in light mode, so the Studio's dark chrome is untouched. */ html[data-theme="light"] .ds-icon-btn { /* A real surface, not an 8% white wash that vanishes on a white header. Border included because the fill alone is close to the header value. */ background: #FFFFFF; border: 1px solid var(--g-edge-strong); color: var(--ink); /* 15.61 : 1 — was 1.12 */ box-shadow: 0 1px 2px rgba(27, 35, 43, .06); } html[data-theme="light"] .themebtn:hover, html[data-theme="light"] .kj-theme:hover, html[data-theme="light"] .kj-burger:hover, html[data-theme="light"] .navtoggle:hover, html[data-theme="light"] .ds-icon-btn:hover { background: #F4F2EC; /* darkens rather than lightens: on a white header there is no lighter */ border-color: var(--accent-text); color: var(--ink); /* paired, never inherited */ } html[data-theme="light"] .themebtn:active, html[data-theme="light"] .kj-theme:active { background: #E9E6DD; color: var(--ink); } html[data-theme="light"] .themebtn:focus-visible, html[data-theme="light"] .kj-theme:focus-visible, html[data-theme="light"] .kj-burger:focus-visible, html[data-theme="light"] .navtoggle:focus-visible, html[data-theme="light"] .ds-icon-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* -------------------------------------------------------------------------- 6 · ICONS Icons inherited a colour meant for a dark bar in several places. currentColor makes them follow whatever text colour is correct for their surface. -------------------------------------------------------------------------- */ html[data-theme="light"] .topbar svg, html[data-theme="light"] .topnav svg, html[data-theme="light"] .site-head svg { color: currentColor; } /* -------------------------------------------------------------------------- 7 · FORCED COLOURS Where the OS guarantees contrast, all of the above steps aside. -------------------------------------------------------------------------- */ @media (forced-colors: active) { html[data-theme="light"] .topnav a, html[data-theme="light"] .btn, html[data-theme="light"] input { color: CanvasText; } }