/* ============================================================ PupilPower - Accessibility layer Driven by data-* attributes on , set by a11y.js. Self-contained; overrides the base system without touching markup. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap'); /* ---------- Launcher button ---------- */ .a11y-fab{ position:fixed; left:24px; bottom:24px; z-index:9000; width:56px; height:56px; border-radius:50%; background:#E26D58; color:#fff; border:2px solid #fff; box-shadow:0 6px 22px rgba(20,22,27,.28); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .18s ease, background .18s ease; } .a11y-fab:hover{ background:#C9543F; transform:translateY(-2px); } .a11y-fab:focus-visible{ outline:3px solid #14161B; outline-offset:3px; } .a11y-fab svg{ width:30px; height:30px; display:block; } /* ---------- Panel ---------- */ .a11y-panel{ position:fixed; left:24px; bottom:92px; z-index:9001; width:340px; max-width:calc(100vw - 48px); max-height:calc(100vh - 130px); overflow-y:auto; background:#fff; color:#14161B; border:1px solid #E2E7EB; border-radius:14px; box-shadow:0 18px 50px rgba(20,22,27,.24); font-family:'Inter', system-ui, sans-serif; transform-origin:bottom left; transform:scale(.96) translateY(8px); opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; } .a11y-panel.open{ transform:none; opacity:1; pointer-events:auto; } .a11y-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid #EDF1F4; position:sticky; top:0; background:#fff; border-radius:14px 14px 0 0; } .a11y-head h2{ font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-size:23px; letter-spacing:-.01em; margin:0; } .a11y-head p{ margin:2px 0 0; font-size:12px; color:#5C6670; } .a11y-x{ background:none; border:0; cursor:pointer; color:#5C6670; padding:6px; border-radius:8px; line-height:0; } .a11y-x:hover{ background:#F5F7F9; color:#14161B; } .a11y-x:focus-visible{ outline:2px solid #1777B8; outline-offset:1px; } .a11y-group{ padding:14px 20px 4px; } .a11y-group > h3{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8A929B; margin:0 0 8px; } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid #F2F4F6; } .a11y-group:last-of-type .a11y-row:last-child{ border-bottom:0; } .a11y-row .lbl{ font-size:14.5px; font-weight:500; color:#20242B; line-height:1.3; } .a11y-row .lbl small{ display:block; font-weight:400; font-size:12px; color:#5C6670; margin-top:2px; } /* switch */ .a11y-switch{ flex:none; width:46px; height:27px; border-radius:100px; background:#D3DAE0; border:0; cursor:pointer; position:relative; transition:background .18s ease; } .a11y-switch::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; } .a11y-switch[aria-checked="true"]{ background:#E26D58; } .a11y-switch[aria-checked="true"]::after{ transform:translateX(19px); } .a11y-switch:focus-visible{ outline:2px solid #14161B; outline-offset:2px; } .a11y-foot{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px 18px; border-top:1px solid #EDF1F4; margin-top:6px; } .a11y-reset{ background:none; border:0; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#1777B8; padding:6px 8px; border-radius:8px; } .a11y-reset:hover{ background:#E8F2F9; } .a11y-foot .note{ font-size:11px; color:#8A929B; } @media (max-width:520px){ .a11y-panel{ left:12px; right:12px; width:auto; bottom:86px; } .a11y-fab{ left:16px; bottom:16px; } } /* ============================================================ SETTINGS - applied via ============================================================ */ /* ---- Larger text ---- */ html[data-a11y-text="on"] body{ font-size:20px; } html[data-a11y-text="on"] .lead{ font-size:clamp(21px,1.9vw,25px); line-height:1.55; } html[data-a11y-text="on"] .nav__links a{ font-size:16px; } html[data-a11y-text="on"] .btn, html[data-a11y-text="on"] .tlink{ font-size:16px; } html[data-a11y-text="on"] .foot__col a, html[data-a11y-text="on"] .card p, html[data-a11y-text="on"] .list li{ font-size:1.04em; } html[data-a11y-text="on"] .muted{ font-size:1.03em; } /* ---- High contrast ---- */ html[data-a11y-contrast="on"]{ --muted:#2C333B; --muted-2:#3A4047; --ink-soft:#14161B; --line:#9AA4AD; --line-ink:rgba(255,255,255,.4); --mist:#FFFFFF; --mist-2:#EEF1F4; } html[data-a11y-contrast="on"] .section--mist{ background:#fff; } html[data-a11y-contrast="on"] .card{ border-color:#7C8893; } html[data-a11y-contrast="on"] .card--mist{ background:#F1F4F6; border-color:#7C8893; } html[data-a11y-contrast="on"] .nav{ border-bottom-color:#9AA4AD; background:#fff; } html[data-a11y-contrast="on"] .divider, html[data-a11y-contrast="on"] .statstrip, html[data-a11y-contrast="on"] .statstrip > div{ border-color:#7C8893; } html[data-a11y-contrast="on"] .tag{ outline:1px solid rgba(20,22,27,.25); } html[data-a11y-contrast="on"] .lead{ color:#20242B; } html[data-a11y-contrast="on"] .section--ink .lead, html[data-a11y-contrast="on"] .section--blue .lead{ color:#fff; } html[data-a11y-contrast="on"] a:not(.btn):not(.nav__logo):not(.nav__wm){ text-decoration:underline; text-underline-offset:2px; } /* ---- Dyslexia-friendly font ---- */ html[data-a11y-font="on"] body, html[data-a11y-font="on"] .lead, html[data-a11y-font="on"] .btn, html[data-a11y-font="on"] .tlink, html[data-a11y-font="on"] .nav__links a, html[data-a11y-font="on"] .nav__mobile a, html[data-a11y-font="on"] .nav__mobile__n, html[data-a11y-font="on"] .field input, html[data-a11y-font="on"] .field select, html[data-a11y-font="on"] .field textarea, html[data-a11y-font="on"] input, html[data-a11y-font="on"] textarea{ font-family:'Atkinson Hyperlegible', system-ui, sans-serif !important; } /* keep serif headings, but make them Atkinson too for full dyslexia support */ html[data-a11y-font="on"] h1, html[data-a11y-font="on"] h2, html[data-a11y-font="on"] h3, html[data-a11y-font="on"] h4, html[data-a11y-font="on"] .display, html[data-a11y-font="on"] .h-xl, html[data-a11y-font="on"] .h-lg, html[data-a11y-font="on"] .h-md, html[data-a11y-font="on"] .h-sm, html[data-a11y-font="on"] .serif, html[data-a11y-font="on"] .nav__mobile__tag, html[data-a11y-font="on"] .hero-accent{ font-family:'Atkinson Hyperlegible', system-ui, sans-serif !important; font-style:normal !important; letter-spacing:-.01em; font-weight:700; } /* ---- Reading spacing ---- */ html[data-a11y-spacing="on"] p, html[data-a11y-spacing="on"] .lead, html[data-a11y-spacing="on"] .list li, html[data-a11y-spacing="on"] .card p, html[data-a11y-spacing="on"] .foot__col a{ letter-spacing:.045em; word-spacing:.14em; line-height:1.85; } html[data-a11y-spacing="on"] p, html[data-a11y-spacing="on"] .lead{ max-width:66ch; } /* ---- Colour-blind safe ---- */ /* Recolour the only hue-only signal (form errors) to a CVD-distinct vermilion, and add a leading "!" marker so meaning never rests on colour alone. */ html[data-a11y-cvd="on"] .field.err input, html[data-a11y-cvd="on"] .field.err select, html[data-a11y-cvd="on"] .field.err textarea{ border-color:#C8451B !important; box-shadow:0 0 0 3px rgba(200,69,27,.18) !important; } html[data-a11y-cvd="on"] .field .msg{ color:#A8380F !important; font-weight:600; } html[data-a11y-cvd="on"] .field.err .msg::before{ content:"\26A0\FE0E "; } /* strengthen the success panel cue with a check glyph */ html[data-a11y-cvd="on"] .form-ok h3::before{ content:"\2713 "; color:#0E5A8F; } /* ensure check/cross marks read by shape - thicken strokes a touch */ html[data-a11y-cvd="on"] .mk path{ stroke-width:2.6; } /* ---- Reduce motion ---- */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important; } html[data-a11y-motion="off"] .reveal{ opacity:1 !important; transform:none !important; } html[data-a11y-motion="off"] .iris-color{ fill:#1777B8 !important; } /* ---- Highlight links & focus ---- */ html[data-a11y-focus="on"] a:not(.btn):not(.nav__logo):not(.nav__wm):not(.tlink){ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; } html[data-a11y-focus="on"] .tlink{ border-bottom-width:2px; } html[data-a11y-focus="on"] :focus-visible{ outline:3px solid #1777B8 !important; outline-offset:2px !important; border-radius:3px; } html[data-a11y-focus="on"] .section--ink :focus-visible, html[data-a11y-focus="on"] .section--blue :focus-visible{ outline-color:#fff !important; }