/* ============================================================ Accessibility toolbar — reading options panel, plus the high-contrast / reduced-motion / large-text modes it turns on. Loaded after styles.css. Nothing in here restyles the site by default: every site-wide override is gated behind a data-a11y-* attribute that /js/a11y.js puts on . Text scaling works the other way round: a11y.js reads every font-size rule out of styles.css at load and re-emits it as calc( * var(--a11y-scale)) in a sheet appended after this one. So there is no list of font sizes to keep in sync here — changing styles.css is enough. ============================================================ */ :root{ --a11y-scale:1; --a11y-panel-bg:#fff; --a11y-line:#DCE7ED; } [hidden]{display:none !important} /* ---------- Floating button ---------- Bottom-left, mirroring the sticky donate pill on the right. Always visible rather than scroll-triggered: a reading aid has to be there from the top of the page. */ .a11y{position:fixed;left:26px;bottom:26px;z-index:76} .a11y-toggle{ display:inline-flex;align-items:center;gap:10px; font-family:var(--body);font-weight:800;font-size:17px; min-height:56px;padding:12px 24px;border-radius:999px; background:#fff;color:var(--teal);border:3px solid var(--teal); box-shadow:0 12px 28px rgba(2,77,109,.28); cursor:pointer;white-space:nowrap; transition:background .2s,color .2s,transform .18s; } .a11y-toggle:hover{background:var(--teal);color:#fff;transform:translateY(-3px)} .a11y-toggle svg{flex:none} .a11y-toggle[aria-expanded="true"]{background:var(--teal);color:#fff} /* ---------- Panel ---------- Anchored to the fixed button, opening upward. */ .a11y-panel{ position:absolute;bottom:calc(100% + 14px);left:0;z-index:80; width:360px;max-width:calc(100vw - 52px); background:var(--a11y-panel-bg);border-radius:var(--radius); border:1px solid var(--cream-deep); box-shadow:0 24px 60px rgba(2,77,109,.26); padding:22px 24px 24px; font-size:17px;line-height:1.5;color:var(--text); max-height:calc(100vh - 120px);overflow-y:auto; } .a11y-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .a11y-panel-head h2{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);line-height:1.2} .a11y-close{ flex:none;width:42px;height:42px;border-radius:50%; background:var(--cream);border:none;color:var(--ink);cursor:pointer; display:flex;align-items:center;justify-content:center; } .a11y-close:hover{background:var(--cream-deep)} .a11y-group{border:none;padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--a11y-line)} .a11y-group:last-of-type{border-bottom:none;padding-bottom:6px;margin-bottom:0} .a11y-group legend,.a11y-group h3{ font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--teal);margin-bottom:14px;padding:0;font-family:var(--body); } /* screen-reader-only inputs: still focusable, still keyboard-operable */ .a11y-segmented input,.a11y-switch input{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* ---------- Text size segments ---------- */ .a11y-segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .a11y-segmented label{ display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px; min-height:82px;padding:10px 6px;border-radius:14px;cursor:pointer; border:3px solid var(--cream-deep);background:var(--cream); font-size:15.5px;font-weight:700;color:var(--ink);text-align:center; transition:border-color .18s,background .18s; } .a11y-segmented label:hover{border-color:var(--teal)} .a11y-sample{font-family:var(--display);font-weight:600;line-height:1;color:var(--teal)} .a11y-sample-1{font-size:18px} .a11y-sample-2{font-size:24px} .a11y-sample-3{font-size:31px} .a11y-segmented input:checked + label{ background:var(--teal);border-color:var(--teal);color:#fff; } .a11y-segmented input:checked + label .a11y-sample{color:var(--amber)} .a11y-segmented input:focus-visible + label{outline:4px solid var(--amber);outline-offset:3px} /* ---------- Switches ---------- */ .a11y-switch + .a11y-switch{margin-top:16px} .a11y-switch label{display:flex;align-items:flex-start;gap:14px;cursor:pointer} .a11y-switch-track{ flex:none;width:60px;height:34px;border-radius:999px;margin-top:2px; background:#C6D4DC;border:2px solid transparent;position:relative; transition:background .2s; } .a11y-switch-thumb{ position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%; background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28); transition:transform .2s; } .a11y-switch input:checked + label .a11y-switch-track{background:var(--teal)} .a11y-switch input:checked + label .a11y-switch-thumb{transform:translateX(26px)} .a11y-switch input:focus-visible + label .a11y-switch-track{outline:4px solid var(--amber);outline-offset:3px} .a11y-switch-label{font-weight:700;color:var(--ink);font-size:17px;line-height:1.35} .a11y-switch-label small{display:block;font-weight:400;font-size:15px;color:#4E6B7A;margin-top:3px} /* ---------- Read aloud ---------- */ .a11y-hint{font-size:15.5px;color:#4E6B7A;margin:-6px 0 14px} .a11y-read-actions{display:flex;gap:10px;flex-wrap:wrap} .a11y-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--body);font-weight:800;font-size:16.5px; min-height:50px;padding:10px 20px;border-radius:999px; border:3px solid var(--teal);background:#fff;color:var(--teal);cursor:pointer; transition:background .18s,color .18s,opacity .18s; } .a11y-btn:hover:not(:disabled){background:var(--teal);color:#fff} .a11y-btn:disabled{opacity:.42;cursor:default} .a11y-btn-primary{background:var(--teal);color:#fff} .a11y-btn-primary:hover:not(:disabled){background:var(--teal-deep)} .a11y-btn-small{min-height:42px;padding:8px 16px;font-size:15.5px} .a11y-rate{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:700;font-size:16px;color:var(--ink)} .a11y-rate select{ font-family:var(--body);font-size:16px;font-weight:700;color:var(--ink); padding:9px 12px;border-radius:10px;border:2px solid var(--cream-deep);background:#fff; min-height:44px;cursor:pointer; } .a11y-reset{ margin-top:20px;width:100%;min-height:48px; background:none;border:none;cursor:pointer; font-family:var(--body);font-weight:800;font-size:16.5px;color:var(--teal); text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px; } .a11y-reset:hover{color:var(--teal-deep)} .a11y-status{margin-top:10px;font-size:15.5px;color:#4E6B7A;min-height:1.5em} /* ---------- Floating reading bar ---------- Sits above the accessibility button, which owns the bottom-left corner. */ .a11y-readbar{ position:fixed;left:26px;bottom:98px;z-index:75; display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:#fff;border:3px solid var(--teal);border-radius:999px; padding:9px 14px 9px 20px;box-shadow:0 12px 28px rgba(2,77,109,.28); font-weight:800;font-size:16.5px;color:var(--ink);max-width:calc(100vw - 52px); } .a11y-readbar-dot{ flex:none;width:12px;height:12px;border-radius:50%;background:var(--amber); animation:a11ypulse 2.2s ease-in-out infinite; } @keyframes a11ypulse{ 0%,100%{box-shadow:0 0 0 0 rgba(232,161,60,.6)} 50%{box-shadow:0 0 0 9px rgba(232,161,60,0)} } /* The accessibility button and the sticky donate pill both float over the bottom of the page; without this they sit on top of the footer's last line. */ .site-footer{padding-bottom:104px} /* Block currently being spoken. */ .a11y-reading{ background:var(--amber-soft); box-shadow:0 0 0 6px var(--amber-soft); border-radius:5px; } /* ============================================================ Mode: larger text The scale itself is applied by the generated sheet; these rules stop the desktop nav from overflowing once it grows. ============================================================ */ :root[data-a11y-text="larger"]{--a11y-scale:1.25} :root[data-a11y-text="largest"]{--a11y-scale:1.5} @media (max-width:1600px){ :root[data-a11y-text="larger"] .main-nav, :root[data-a11y-text="largest"] .main-nav{ display:none;position:absolute;top:100%;left:0;right:0; margin-left:0; background:var(--cream);border-bottom:1px solid var(--cream-deep); padding:12px 24px 24px;box-shadow:0 20px 30px rgba(2,77,109,.12); } :root[data-a11y-text="larger"] .main-nav.open, :root[data-a11y-text="largest"] .main-nav.open{display:block} :root[data-a11y-text="larger"] .main-nav ul, :root[data-a11y-text="largest"] .main-nav ul{flex-direction:column;gap:4px} :root[data-a11y-text="larger"] .main-nav a, :root[data-a11y-text="largest"] .main-nav a{display:block;padding:14px 16px} :root[data-a11y-text="larger"] .nav-donate, :root[data-a11y-text="largest"] .nav-donate{ display:block;border-top:1px solid var(--cream-deep);margin-top:8px;padding-top:8px; } :root[data-a11y-text="larger"] .nav-donate a, :root[data-a11y-text="largest"] .nav-donate a{color:var(--teal)} :root[data-a11y-text="larger"] .nav-toggle, :root[data-a11y-text="largest"] .nav-toggle{display:flex;order:5} :root[data-a11y-text="larger"] .header-cta, :root[data-a11y-text="largest"] .header-cta{margin-left:auto} :root[data-a11y-text="larger"] .header-inner, :root[data-a11y-text="largest"] .header-inner{gap:14px;flex-wrap:wrap} } /* At the largest step the phone number and Donate pill crowd the header out. */ :root[data-a11y-text="largest"] .phone-link span{display:none} /* ============================================================ Mode: higher contrast The palette stays recognisably The Open Door's — this darkens the places where brand amber and the muted slate greys were carrying text, and makes links identifiable without colour. ============================================================ */ :root[data-a11y-contrast="high"]{ --cream:#FFFFFF; --cream-deep:#DFD3B8; --teal:#01455F; --teal-deep:#022C3E; --ink:#08202C; --text:#152C38; --a11y-line:#B9C7CF; --shadow:0 6px 18px rgba(2,77,109,.28); } /* amber reads at ~2:1 on cream, so it never carries text in this mode */ :root[data-a11y-contrast="high"] .day-step .time, :root[data-a11y-contrast="high"] .news-card .date, :root[data-a11y-contrast="high"] .quote cite{color:#6E3F00} /* muted slate greys, lifted to ~8:1 */ :root[data-a11y-contrast="high"] .hero-note, :root[data-a11y-contrast="high"] .day-step p, :root[data-a11y-contrast="high"] .join-cta small, :root[data-a11y-contrast="high"] .quote cite span, :root[data-a11y-contrast="high"] .fb-fallback, :root[data-a11y-contrast="high"] .a11y-hint, :root[data-a11y-contrast="high"] .a11y-status, :root[data-a11y-contrast="high"] .a11y-switch-label small{color:#2A4453} :root[data-a11y-contrast="high"] .stat span{color:#EAF4FA} :root[data-a11y-contrast="high"] .impact-head p{color:#FBE3BE} :root[data-a11y-contrast="high"] .donate-panel p{color:#EAF4FA} :root[data-a11y-contrast="high"] .site-footer{color:#D5E3EB} :root[data-a11y-contrast="high"] .footer-bottom{color:#C3D5DF;border-top-color:rgba(255,255,255,.32)} /* links identifiable without relying on colour */ :root[data-a11y-contrast="high"] main a:not(.btn):not(.logo):not(.card-tag), :root[data-a11y-contrast="high"] .site-footer a{ text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px; } /* solid edges instead of soft shadows */ :root[data-a11y-contrast="high"] .site-header{ background:#fff;backdrop-filter:none;border-bottom:3px solid var(--ink); } :root[data-a11y-contrast="high"] .card, :root[data-a11y-contrast="high"] .news-card, :root[data-a11y-contrast="high"] .info-card, :root[data-a11y-contrast="high"] .fb-card{border:2px solid #4A6472} :root[data-a11y-contrast="high"] .join{border:2px solid #4A6472} :root[data-a11y-contrast="high"] .btn-amber{border-color:var(--ink)} :root[data-a11y-contrast="high"] .btn-outline{border-width:3px} /* a 4px amber ring is barely visible on cream; double it up */ :root[data-a11y-contrast="high"] :focus-visible{ outline:4px solid var(--ink);outline-offset:3px; box-shadow:0 0 0 8px var(--amber); } :root[data-a11y-contrast="high"] .a11y-reading{ background:#FFE7B0;box-shadow:0 0 0 6px #FFE7B0;outline:2px solid #6E3F00; } /* ============================================================ Mode: reduced motion — mirrors the prefers-reduced-motion blocks in styles.css for people whose OS setting isn't on. ============================================================ */ :root[data-a11y-motion="reduce"]{scroll-behavior:auto} :root[data-a11y-motion="reduce"] *, :root[data-a11y-motion="reduce"] *::before, :root[data-a11y-motion="reduce"] *::after{animation:none !important;transition:none !important} :root[data-a11y-motion="reduce"] .rise, :root[data-a11y-motion="reduce"] .reveal{opacity:1;transform:none} :root[data-a11y-motion="reduce"] .stat-icon{transform:none;opacity:1} :root[data-a11y-motion="reduce"] .sticky-donate.show{transform:none} /* ---------- Responsive ---------- */ @media (max-width:640px){ /* icon-only circle: the sticky donate pill already owns the other corner */ .a11y{left:16px;bottom:16px} .a11y-toggle{padding:0;width:56px;min-height:56px;justify-content:center} .a11y-toggle-text{ position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .a11y-panel{ left:0;width:calc(100vw - 32px);max-width:none; max-height:calc(100vh - 100px); } .a11y-readbar{left:16px;right:16px;bottom:88px;justify-content:center;padding:9px 14px} }