/* Black & white accessibility mode + its toggle button. * * Site-level for now (the theme has no global a11y control yet); move into * jekyll-theme-platoniq-journal when it does. Loaded on every page via the * site override of _includes/default/head.liquid. * * Mechanism: a full-viewport overlay (body::after) with * mix-blend-mode: saturation desaturates the whole page to grayscale WITHOUT a * root `filter`, which would break the theme's position:fixed header, share bar * and cookie banner. The overlay is a pseudo-element so it needs no extra DOM * and applies the instant html[data-contrast="bw"] is set (pre-paint, no flash). */ html[data-contrast="bw"] body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; /* clicks pass through to the page */ background: #fff; /* white has zero saturation -> forces grayscale */ mix-blend-mode: saturation; } /* Toggle button — a fixed pill, injected into by a11y.js. * Sits above the overlay so it keeps its own black/white styling. */ .a11y-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 2147483001; display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; /* comfortable tap target */ padding: 0.5em 0.9em; font-family: "Karla", sans-serif; font-size: 14px; font-weight: 700; line-height: 1; color: #000; background: #fff; border: 2px solid #000; border-radius: 999px; cursor: pointer; } .a11y-toggle::before { content: "\25D1"; /* ◑ half-filled circle */ font-size: 1.15em; line-height: 1; } .a11y-toggle:hover { color: #fff; background: #000; } .a11y-toggle:focus-visible { outline: 3px solid #1a5fff; outline-offset: 2px; } /* Active (black & white currently on): invert the pill so state is visible. */ .a11y-toggle[aria-pressed="true"] { color: #fff; background: #000; } @media print { .a11y-toggle { display: none; } } /* --- Read-aloud ("listen to this article") ------------------------------- * Injected by read-aloud.js on article pages only. Sits in the article grid's * reading column (7 / span 13, matching the prose) just above the body text. * Uses currentColor so it stays legible whatever the article background is. */ .read-aloud { grid-column: 7 / span 13; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; } .read-aloud__btn { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0.5em 1em; font-family: "Karla", sans-serif; font-size: 15px; font-weight: 700; line-height: 1; color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 999px; cursor: pointer; } .read-aloud__btn::before { font-size: 0.95em; line-height: 1; } .read-aloud__play[data-state="idle"]::before, .read-aloud__play[data-state="paused"]::before { content: "\25B6"; } /* ▶ */ .read-aloud__play[data-state="playing"]::before { content: "\23F8"; } /* ⏸ */ .read-aloud__stop::before { content: "\23F9"; } /* ⏹ */ .read-aloud__btn:focus-visible { outline: 3px solid #1a5fff; outline-offset: 2px; } .read-aloud__stop[hidden] { display: none; } /* Voice picker — shown only when the browser offers more than one voice. */ .read-aloud__voice { min-height: 44px; padding: 0.4em 0.6em; font-family: "Karla", sans-serif; font-size: 14px; color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 999px; cursor: pointer; max-width: 16em; } .read-aloud__voice[hidden] { display: none; } .read-aloud__voice:focus-visible { outline: 3px solid #1a5fff; outline-offset: 2px; } @media print { .read-aloud { display: none; } }