/* ────────────────────────────────────────────────────────────── Reading options — shared across all pages. Three independent settings, each an attribute on : data-textsize="2"|"3" text scale (1 is default, sets no attribute) data-reading="comfort" dyslexia-friendly spacing data-motion="reduce" manual motion switch Pages use different token names for the same roles, so the panel resolves its colours through var() fallback chains below. ────────────────────────────────────────────────────────────── */ :root{ /* Safety net. Each page also sets this, so a failure to load this file cannot break font sizes that are calc(n * var(--fs)). */ --fs:1; } [data-textsize="2"]{--fs:1.15} [data-textsize="3"]{--fs:1.3} /* ---------- easier reading ---------- Spacing follows British Dyslexia Association guidance: generous line height, wider letter and word spacing. All-caps is switched off because capitals remove the word-shape cue many dyslexic readers rely on. */ [data-reading="comfort"] body{ line-height:1.9; letter-spacing:.03em; word-spacing:.14em; } [data-reading="comfort"] .eyebrow, [data-reading="comfort"] .meta, [data-reading="comfort"] .pillar h3, [data-reading="comfort"] .gap span, [data-reading="comfort"] .role .t, [data-reading="comfort"] .section-label, [data-reading="comfort"] .card-tag, [data-reading="comfort"] .featured-tag, [data-reading="comfort"] .hero-badge, [data-reading="comfort"] .metric-label{ text-transform:none; letter-spacing:.03em; font-family:var(--sans,inherit); } /* Warm off-white instead of pure white, to cut glare. Dark mode is already low-glare and is deliberately left alone. Names differ per page; unused variables here simply have no effect. */ [data-theme="light"][data-reading="comfort"]{ --bg-primary:#FAF7F0; --bg-secondary:#F2EEE4; --bg-card:#FAF7F0; --bg-elevated:#F2EEE4; --navy-deep:#FAF7F0; --navy:#F2EEE4; --bg:#F2EEE4; } /* ---------- reduced motion ---------- Manual switch, plus the OS-level preference for pages that lacked it. */ [data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after{ transition:none!important; animation:none!important; scroll-behavior:auto!important; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; animation:none!important; scroll-behavior:auto!important; } } /* ---------- the panel ---------- */ .a11y{ position:relative; --a11y-surface:var(--bg-card, var(--navy, #ffffff)); --a11y-page:var(--bg-primary, var(--navy-deep, #ffffff)); --a11y-text:var(--text-primary, var(--ink, #1E2D40)); --a11y-muted:var(--text-secondary, var(--muted, #6B7A8D)); --a11y-accent:var(--teal, var(--accent, #3BBFBF)); --a11y-border:var(--border-color, var(--line-strong, var(--border, #DDE3EA))); } .a11y-btn{ background:transparent; border:1.5px solid var(--a11y-border); color:var(--a11y-muted); padding:.4rem .85rem; border-radius:100px; cursor:pointer; font-size:1rem; line-height:1; font-family:inherit; display:inline-flex; align-items:center; transition:background .2s,border-color .2s; } .a11y-btn:hover{border-color:var(--a11y-accent)} .a11y-panel{ position:absolute;right:0;top:calc(100% + 10px); width:250px;padding:16px; background:var(--a11y-surface); border:1px solid var(--a11y-border); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.28); display:none;z-index:1100; text-align:left; } .a11y-panel[data-open="true"]{display:block} .a11y-panel h3{ font-size:12px;text-transform:uppercase;letter-spacing:.12em; color:var(--a11y-muted);font-weight:400;margin:0 0 14px; } .a11y-row{margin-bottom:14px} .a11y-label{display:block;font-size:13px;color:var(--a11y-muted);margin-bottom:7px} .a11y-sizes{display:flex;gap:6px} .a11y-size{ flex:1;background:transparent;border:1px solid var(--a11y-border); color:var(--a11y-text);border-radius:6px;padding:7px 0;cursor:pointer; font-family:inherit;line-height:1; } .a11y-size:hover{border-color:var(--a11y-accent)} .a11y-size[aria-pressed="true"]{ background:var(--a11y-accent);color:var(--a11y-page); border-color:var(--a11y-accent);font-weight:700; } .a11y-check{ display:flex;align-items:center;gap:9px; font-size:14px;color:var(--a11y-text);cursor:pointer; } .a11y-check input{ width:16px;height:16px;flex-shrink:0;cursor:pointer; accent-color:var(--a11y-accent); } .a11y-reset{ background:none;border:none;padding:0; color:var(--a11y-accent);font-size:12.5px;font-family:inherit; cursor:pointer;text-decoration:underline; } @media (max-width:600px){ .a11y-panel{width:min(250px,calc(100vw - 40px))} }