/* ========================================================= Accessibility widget — shared across all pages. Restores (and modernises) the original pojo-a11y toolbar: text size, grayscale, high contrast, negative contrast, light background, underline links, readable font, reset. ========================================================= */ /* ---------- vision modes (applied to ) ---------- */ html.a11y-grayscale{filter:grayscale(100%)} html.a11y-negative{filter:invert(100%)} /* keep the widget itself readable in negative mode (double invert) */ html.a11y-negative .a11y-root{filter:invert(100%)} /* High contrast: black canvas, white text, yellow links */ html.a11y-contrast body, html.a11y-contrast body *:not(svg):not(path):not(img){ background-color:#000 !important; color:#fff !important; border-color:#fff !important; box-shadow:none !important; text-shadow:none !important; } html.a11y-contrast a,html.a11y-contrast a *{color:#ffff00 !important;text-decoration:underline !important} html.a11y-contrast button,html.a11y-contrast input,html.a11y-contrast textarea{ background-color:#000 !important;color:#fff !important;border:2px solid #fff !important} /* Light background: white canvas, dark text */ html.a11y-light body, html.a11y-light body *:not(svg):not(path):not(img){ background-color:#ffffff !important; color:#111111 !important; border-color:#767676 !important; box-shadow:none !important; text-shadow:none !important; } html.a11y-light a,html.a11y-light a *{color:#0b3ecc !important} html.a11y-light button,html.a11y-light input,html.a11y-light textarea{ background-color:#fff !important;color:#111 !important;border:1px solid #767676 !important} /* Underline every link */ html.a11y-underline a,html.a11y-underline a *{text-decoration:underline !important} /* Readable font */ html.a11y-readable body, html.a11y-readable body *:not(svg):not(path){ font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif !important; letter-spacing:.012em !important; line-height:1.75 !important; } /* text scaling comes from html{font-size} set by the script; make body text derive from it so scaling actually applies */ html[data-a11y-fs] body{font-size:1.0625rem !important} /* ========================================================= The widget ========================================================= */ .a11y-root{position:fixed;left:0;top:35%;z-index:2147483000;font-family:Arial,Helvetica,sans-serif} .a11y-root *{box-sizing:border-box} .a11y-toggle{ display:flex !important;align-items:center;justify-content:center; width:48px !important;height:48px !important;padding:0 !important; background:#1c4ed8 !important;color:#fff !important; border:2px solid #fff !important;border-right:0 !important; border-radius:0 8px 8px 0 !important;cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.45) !important; transition:background .2s,width .2s; } .a11y-toggle:hover{background:#1740b8 !important} .a11y-toggle:focus-visible{outline:3px solid #ffd400 !important;outline-offset:2px} .a11y-toggle svg{width:26px;height:26px;display:block;fill:currentColor} .a11y-panel{ position:absolute;left:0;top:0;width:264px;max-width:88vw; background:#ffffff !important;color:#111111 !important; border:2px solid #1c4ed8 !important;border-radius:0 10px 10px 0; box-shadow:0 14px 44px rgba(0,0,0,.5) !important; padding:12px !important; display:none; } .a11y-panel[data-open="true"]{display:block} .a11y-title{ font-size:15px !important;font-weight:700 !important;color:#111 !important; margin:0 0 10px !important;padding:0 0 8px !important;border-bottom:1px solid #d5d9e2 !important; font-family:Arial,Helvetica,sans-serif !important;text-align:left !important;letter-spacing:0 !important; } .a11y-list{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:6px} .a11y-item{margin:0 !important;padding:0 !important} .a11y-btn{ display:flex !important;align-items:center;gap:10px;width:100%; padding:9px 10px !important;text-align:left !important; background:#f3f5f9 !important;color:#111 !important; border:1px solid #d5d9e2 !important;border-radius:7px !important; font-size:14px !important;font-family:Arial,Helvetica,sans-serif !important; line-height:1.2 !important;cursor:pointer;transition:background .15s,border-color .15s; } .a11y-btn:hover{background:#e5eaf4 !important;border-color:#1c4ed8 !important} .a11y-btn:focus-visible{outline:3px solid #1c4ed8 !important;outline-offset:1px} .a11y-btn[aria-pressed="true"]{background:#1c4ed8 !important;color:#fff !important;border-color:#1c4ed8 !important} .a11y-btn .a11y-ic{width:18px;height:18px;flex:0 0 auto;fill:currentColor} .a11y-reset{background:#fff1f1 !important;border-color:#e0b4b4 !important;color:#8a1c1c !important;justify-content:center} .a11y-reset:hover{background:#ffe3e3 !important;border-color:#c33 !important} .a11y-close{ position:absolute;right:6px;top:6px;width:28px;height:28px;padding:0 !important; background:transparent !important;border:0 !important;color:#555 !important;cursor:pointer; font-size:20px !important;line-height:1 !important;border-radius:6px !important; } .a11y-close:hover{background:#eceff5 !important;color:#000 !important} .a11y-close:focus-visible{outline:3px solid #1c4ed8 !important} .a11y-fs-row{display:flex;gap:6px} .a11y-fs-row .a11y-btn{justify-content:center} .a11y-fs-val{ display:flex;align-items:center;justify-content:center;min-width:52px; font-size:13px !important;font-weight:700 !important;color:#111 !important; background:#fff !important;border:1px solid #d5d9e2 !important;border-radius:7px !important; } @media (max-width:560px){ .a11y-root{top:auto;bottom:16px} .a11y-panel{width:250px} } @media (prefers-reduced-motion:reduce){ .a11y-toggle,.a11y-btn{transition:none !important} }