/* Free.ai — WCAG 2.2 AA fixes that belong to a CLASS of control, not one page. * * Loaded after styles.css in base.html, so an equal-specificity rule here * wins. Every block below cites the success criterion it satisfies and the * measurement that produced it (scripts/audit_a11y.py, baseline 2026-09-17). * * Two standing traps this file is written around, both from * templates/CLAUDE.md: * - an inline style="color:…" beats any non-!important rule at any * specificity, so an override of one has to state a value PER THEME or it * fixes light and breaks dark; * - `[style*="…"]` matching is case-sensitive, which is why nothing here * depends on the spelling of a hex in a template. */ /* --- Brand ink ------------------------------------------------------------ * The brand green #16A34A is 3.29:1 on white: it fails as TEXT in light mode * and passes comfortably on the dark theme's near-black. One token, two * values, so a template can write color:var(--brand-ink) and be correct in * both themes. The FILL colour is untouched — white-on-green is a brand * decision and is reported, not changed, by the auditor. */ /* #166534, not the #15803D fill: measured on production, green ink at * #15803D on the grey #e2e3e5 chip behind an outline button is 3.90:1. On * white the darker ink is 7.0:1 and the two are hard to tell apart. Ink and * fill are allowed to differ -- they are answering different questions. */ :root { --brand-ink: #166534; } /* 7.0:1 on #ffffff, 5.5:1 on #e2e3e5 */ /* The focus ring is the brand green, not the browser blue: a blue ring on a * green-bordered input reads as an error state. Light theme uses the fill * green (#15803D, 5.02:1 on white); dark uses a brighter green so the ring * stays visible on near-black (#22C55E, about 9:1 on #0a0a0a). SC 2.4.11 * wants 3:1 against what is adjacent, and outline-offset keeps the ring on * the page background rather than on the control it surrounds. */ :root { --focus-ring: #15803D; } html.dark { --focus-ring: #22C55E; } html.dark { --brand-ink: #16A34A; } /* 5.9:1 on #0a0a0a */ /* The footer is dark in BOTH themes, so the ink inside it is the dark-surface * value in both. Redefining the token on the element is why this is one line: * everything inside inherits it, including the brand mark in the footer logo. * * Measured on production 2026-09-17 and worth keeping as the cautionary note: * swapping the light theme's green ink to #166534 site-wide took that logo * from 5.34:1 to 2.48:1 -- a rule that fixed ~340 places broke the one place * that was already right, because "light theme" is not the same question as * "light surface". It showed up on all ten journey pages at once. */ footer { --brand-ink: #16A34A; } /* ...and the same is true of /coder/, which is an app surface painted dark in * BOTH themes. Measured on production 2026-09-17, light theme: the session * rail, the wordmark, the account link and the token counter were all taking * the light theme's #166534 on the coder's near-black panel -- **2.43:1**, on * ten separate controls. The focus ring goes with it for the same reason: the * light theme's #15803D is 3.83:1 on that surface where #22C55E is ~9:1. * (css/coder.css re-declares both so the page is correct even if this file is * cached stale; the pair is pinned by tests/test_coder_palette.py.) */ #coder-app, #coder-diff-overlay { --brand-ink: #16A34A; --focus-ring: #22C55E; } /* --- SC 2.4.1 Bypass Blocks ---------------------------------------------- * The nav is ~40 links before the first word of content. Keyboard and screen * reader users get one Tab stop past all of it. */ .skip-link { position: absolute; left: .5rem; top: -4rem; z-index: 2000; padding: .55rem 1rem; background: #111827; /* !important because this file's own `html:not(.dark) a:not(.btn)` rule is * (0,2,2) and outranks a bare `.skip-link` at (0,1,0): the link was * painting the light theme's green ink on its own dark chip, 2.49:1, on * every page of the site. A rule fixing 340 links reached this one too. */ color: #fff !important; font-weight: 600; text-decoration: none; border-radius: 0 0 .4rem .4rem; transition: top .15s ease-in-out; } .skip-link:focus, .skip-link:focus-visible { top: 0; color: #fff !important; outline: 3px solid var(--focus-ring, #22C55E); outline-offset: 2px; } /* The target takes focus programmatically; it must not then paint a ring * around the whole page. */ main:focus { outline: none; } /* --- SC 2.4.7 Focus Visible / 2.4.11 Focus Not Obscured ------------------- * Bootstrap rings .btn and .form-control. It leaves plain links, icon-only * .btn-link controls and anything with .border-0 with the UA default, which * several of this site's surfaces then remove. */ :focus-visible { outline: 3px solid var(--focus-ring, #0b57d0); outline-offset: 2px; } html.dark :focus-visible { outline-color: var(--focus-ring, #22C55E); } /* 🔴 A bare `:focus-visible` rule is (0,1,0) and loses to Bootstrap's * `.btn:focus-visible { outline: 0 }` at (0,2,0). Measured 2026-09-17 on the * signup page: every .btn, a.btn and .form-control on the site computed * `outline: none 0px` with `box-shadow: rgba(0,0,0,0) 0 0 0 0` -- i.e. the * ring above was written, shipped, and applied to nothing that matters. * * What fixes it is MATCHING Bootstrap's specificity; this file loads after * bootstrap.min.css, so the tie goes to us. (Verified by mutation: dropping * the !important from this block alone still paints the ring.) The * !important is kept because a page-level