/** * fill'd Accessibility — site adjustments * * Everything here is keyed off a data attribute on whose value is the * tile's current step index, set by widget.js (and restored before first paint * by the inline preboot script). So data-a11y-contrast="1" is High contrast, * "2" is Dark mode, and so on. * * Every selector excludes the toolbar's own subtree with * :not(.filld-a11y):not(.filld-a11y *) * The control that turns an adjustment off must never be made unreadable by * that adjustment being on. * * DIVISION OF LABOUR — worth knowing before editing: * CSS owns : colour (high contrast), letter/word spacing, alignment, * cursors, motion, focus rings, image hiding. * JS owns : font-size, line-height, and dark mode's per-element colours. * Font-size and line-height cannot live here because the theme sizes type in * px throughout, and dark mode cannot live here because a blanket colour * override flattens every surface into one shade and destroys the page's * visual hierarchy. See widget.js. * * !important is used deliberately: these rules exist to override author styles * on the visitor's explicit request, which is the case it was designed for. */ /* ========================================================================== Contrast 1 — High contrast Black canvas, white type, cyan headings, yellow links. Deliberately blunt: the goal is maximum luminance separation, not a pleasant palette. ========================================================================== */ html[data-a11y-contrast="1"] body, html[data-a11y-contrast="1"] body *:not(.filld-a11y):not(.filld-a11y *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } /* EVERY RULE BELOW CARRIES THE FULL :not(.filld-a11y):not(.filld-a11y *) PAIR, and that is load-bearing rather than copy-paste. These are exceptions to the wildcard above, and they have to outrank it. Specificity is (id, class, type) compared left to right, and the wildcard computes to (0,3,3): three class-level tokens — the attribute selector plus the two :not() arguments — against html, body and the type inside the second :not(). Written the obvious way, with a single :not(.filld-a11y *), an exception lands at (0,2,4). Four types beats three, but class is compared first, so 2 < 3 and the exception silently loses. It did lose, for as long as this file has existed. Measured before the fix: h1 rendered rgb(255,255,255) instead of the cyan, links rendered white instead of yellow, and transparent images sat in black boxes — High contrast was a flat white-on-black wall with no hierarchy and no way to tell a link from a sentence. That is what "contrast makes things worse" was. Adding the second :not() brings each exception to (0,3,4): equal on class, ahead on type. If you add another exception here, match this pattern or it will not apply. */ html[data-a11y-contrast="1"] body a:not(.filld-a11y):not(.filld-a11y *), html[data-a11y-contrast="1"] body a *:not(.filld-a11y):not(.filld-a11y *) { color: #ffe600 !important; text-decoration: underline !important; } html[data-a11y-contrast="1"] body :is(button, .btn, input, select, textarea):not(.filld-a11y):not(.filld-a11y *) { border: 2px solid #fff !important; } html[data-a11y-contrast="1"] body :is(h1, h2, h3, h4, h5, h6):not(.filld-a11y):not(.filld-a11y *) { color: #7cf3ff !important; } /* Keep media perceivable rather than blacked out by the wildcard above. */ html[data-a11y-contrast="1"] body :is(img, video, picture, svg):not(.filld-a11y):not(.filld-a11y *) { background-color: transparent !important; } /* ========================================================================== Contrast 2 — Dark mode Only the canvas baseline lives here, so a returning visitor does not get a white flash before scripts run. widget.js then walks the page and darkens each surface individually, preserving the contrast *between* surfaces that a blanket override would flatten. ========================================================================== */ html[data-a11y-contrast="2"] { background-color: #0f1319 !important; /* Makes form controls, scrollbars and the caret follow suit for free. */ color-scheme: dark; } html[data-a11y-contrast="2"] body { background-color: #0f1319 !important; color: #e6eaf0 !important; } /* Full-brightness photography is harsh against a dark canvas. A filter here is safe: it is on the image itself, so it creates no containing block that could break the sticky header or this toolbar's fixed positioning. */ html[data-a11y-contrast="2"] body :is(img, picture, video):not(.filld-a11y *) { filter: brightness(0.86) contrast(1.02); } /* ========================================================================== Colour-pass transition freeze Set by applyColourPass() in widget.js for the duration of one pass, and removed immediately after. Not a visitor-facing adjustment. The pass reads each element's computed colours and writes darkened ones back. The theme animates background-color on .btn and friends, so switching contrast level starts a transition — and the pass, running in the same tick, sampled the value mid-flight. Going High contrast -> Dark mode it read a button's background while it was still travelling from black to pastel, saw something too dark to need darkening, skipped it, and left a pastel button carrying the light text it had already written: 1.14:1, unreadable. Freezing transitions for the pass makes getComputedStyle return the settled target value instead of a frame of an animation. ========================================================================== */ html[data-fa11y-notransition] body, html[data-fa11y-notransition] body *:not(.filld-a11y):not(.filld-a11y *) { transition: none !important; } /* ========================================================================== Saturation Only the *media* half lives here. Text, backgrounds, borders and gradients are rewritten colour by colour in widget.js. The reason is the same one that ruled out greyscale and invert as page-wide effects: `filter` on an ancestor makes it a containing block for every fixed and absolutely positioned descendant, which breaks the theme's sticky header and this toolbar. A filter on an image or an