/* ===========================================================================
READING PREFERENCES — shared stylesheet (Regulation 35 / IS 5568)
Every setting here is a class on that changes presentation only. The
panel never touches the content DOM: it does not write alt text, reorder
nodes or invent ARIA. That line is what separates a preferences tool from
the overlay products the FTC fined accessiBe $1M over in 2025.
The page that loads this file supplies its own font-size map — a list of
`font-size: calc( * var(--a11y-scale))` rules for its own elements.
Only the mechanism lives here; what gets scaled is the page's business.
=========================================================================== */
:root { --a11y-scale: 1; }
html.a11y-text-115 { --a11y-scale: 1.15; }
html.a11y-text-130 { --a11y-scale: 1.3; }
html.a11y-text-150 { --a11y-scale: 1.5; }
html.a11y-links .hb a,
html.a11y-links .hb button {
text-decoration: underline;
text-underline-offset: 4px;
}
html.a11y-headings .hb h1,
html.a11y-headings .hb h2,
html.a11y-headings .hb h3 {
outline: 2px dashed currentColor;
outline-offset: 4px;
}
html.a11y-font .hb,
html.a11y-font .hb button,
html.a11y-font .hb a,
html.a11y-font .hb input,
html.a11y-font .hb select,
html.a11y-font .hb textarea {
font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
}
html.a11y-cursor-black, html.a11y-cursor-black * { cursor: url("data:image/svg+xml;utf8,") 2 2, auto; }
html.a11y-cursor-large, html.a11y-cursor-large * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto; }
/* Contrast filters ride on . Putting them on an inner wrapper would make
that wrapper the containing block for every fixed element inside it and the
whole fixed chrome would come unstuck. */
html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-mono { filter: grayscale(1); }
html.a11y-contrast-high { filter: contrast(1.4); }
/* The panel has to stay readable while the page it sits on is inverted,
otherwise the reader cannot find the control that turns it off. */
html.a11y-contrast-invert #a11yPanel,
html.a11y-contrast-invert #a11yOpen { filter: invert(1) hue-rotate(180deg); }
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
@media print {
html[class*="a11y-"] { filter: none !important; }
html[class*="a11y-text-"] { --a11y-scale: 1 !important; }
html[class*="a11y-lines-"] * { line-height: normal !important; }
}
/* --- the panel chrome ----------------------------------------------------- */
#a11yOpen {
position: fixed;
inset-block-end: 22px;
inset-inline-end: 22px;
z-index: 150;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
background: #000;
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
#a11yOpen svg {
width: 26px;
height: 26px;
display: block;
margin: 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#a11yOpen svg circle { fill: currentColor; stroke: none; }
#a11yOpen:hover { background: #1a1a1a; }
#a11yPanel {
position: fixed;
inset-block-end: 88px;
inset-inline-end: 22px;
z-index: 151;
width: min(340px, calc(100vw - 44px));
max-height: min(70vh, 620px);
overflow-y: auto;
padding: 22px;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #fff;
font-family: var(--sans, Arial, sans-serif);
}
#a11yPanel[hidden] { display: none; }
#a11yPanel h2 {
margin: 0 0 16px;
font-size: 15px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-grid button {
padding: 11px 10px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: none;
color: #fff;
font-family: inherit;
font-size: 12px;
letter-spacing: 0.06em;
cursor: pointer;
text-align: start;
}
.a11y-grid button:hover { border-color: #fff; }
.a11y-grid button[aria-pressed="true"] { background: #fff; color: #000; }
.a11y-grid button.wide { grid-column: 1 / -1; text-align: center; }
#a11yPanel .note {
margin: 16px 0 0;
font-size: 11px;
line-height: 1.6;
opacity: 0.7;
letter-spacing: 0.02em;
text-transform: none;
}
#a11yPanel .note a { color: inherit; }
/* The ring used to be drawn in the ink colour, which is black, and these pages
stand on black - leaving keyboard users with no visible focus at all.
White ring, dark halo: legible over the ground and over any photograph. */
#a11yOpen:focus-visible,
#a11yPanel :focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.85);
}