/* Accessibility tools — the nine on their current site, self-hosted. Their widget sits at the top left, so ours does too. */ /* top 136px, not 118px: the utility bar plus the nav is 121px tall at the top of the page, so 118 clipped the header by 3px. Measured, not eyeballed. --a11y-blue is sampled out of handicapicon.png itself (#0024F5) so the panel border and the tool icons agree with the artwork instead of sitting beside a near-miss navy. */ .a11y{position:fixed;top:136px;left:0;z-index:90;display:flex;align-items:flex-start;font-family:var(--fb);--a11y-blue:#0024f5} /* No background here: the blue is baked into handicapicon.png as a full-bleed ground, so a colour painted behind it would show as a rim wherever the two blues disagree. The image IS the button face, hence brightness() on hover rather than a second background colour. */ .a11y-t{display:block;width:44px;height:44px;padding:0;border-radius:0 4px 4px 0;overflow:hidden;box-shadow:0 6px 22px -8px rgba(0,0,0,.5);transition:filter .2s} .a11y-t img{display:block;width:100%;height:100%;object-fit:cover} .a11y-t:hover,.a11y.open .a11y-t{filter:brightness(.86)} .a11y-p{order:-1;width:238px;background:#fff;border:1px solid var(--a11y-blue);border-radius:3px;padding:18px 0 10px;box-shadow:0 24px 60px -18px rgba(0,0,0,.4)} .a11y-p h2{font-family:var(--fb);font-size:15px;font-weight:700;color:#111;padding:0 20px 14px;margin:0} .a11y-p ul{list-style:none;margin:0;padding:0} .a11y-p button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 20px;font-size:13.5px;color:#222;text-align:left;background:none;transition:background .15s,color .15s} .a11y-p button svg{width:17px;height:17px;flex:0 0 auto;color:var(--a11y-blue)} .a11y-p button:hover,.a11y-p button:focus-visible{background:#eef1fb;color:var(--a11y-blue)} .a11y-p button[aria-pressed="true"]{background:var(--a11y-blue);color:#fff;font-weight:600} .a11y-p button[aria-pressed="true"] svg{color:#fff} @media (max-width:900px){.a11y{top:auto;bottom:14px}.a11y-p{position:fixed;left:14px;bottom:66px;width:min(238px,calc(100vw - 28px))}.a11y-t{border-radius:4px;margin-left:14px}} /* ---------- the tools themselves ---------- */ /* A filter on makes it the containing block for fixed descendants, so the drawer and this panel would scroll away with the page. Re-pinning them to the viewport with the same fixed geometry keeps them put while a filter is active. */ .a11y-filtered .drawer{top:0;left:0} .a11y-filtered nav.top{position:sticky} .a11y-underline a{text-decoration:underline !important;text-underline-offset:2px} /* Readable Font: a plain system sans at a wider tracking. The display serif (Cinzel) is the first thing to go for anyone with a reading difficulty. */ .a11y-readable,.a11y-readable *{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;letter-spacing:.01em !important} /* Light Background: strip the greens and photographs back to black on white. */ .a11y-lightbg,.a11y-lightbg body{background:#fff !important} .a11y-lightbg *:not(.a11y):not(.a11y *){background-image:none !important;text-shadow:none !important} .a11y-lightbg *:not(.a11y):not(.a11y *):not(svg):not(path):not(circle){background-color:transparent !important;color:#111 !important;border-color:#767676 !important} .a11y-lightbg a:not(.a11y *){color:#0a3fa8 !important} /* High Contrast: black ground, yellow text, cyan links. Not a CSS filter, a real colour scheme, which is what people who need it actually expect. */ .a11y-contrast,.a11y-contrast body{background:#000 !important} .a11y-contrast *:not(.a11y):not(.a11y *){background-image:none !important;text-shadow:none !important;box-shadow:none !important} .a11y-contrast *:not(.a11y):not(.a11y *):not(svg):not(path):not(circle){background-color:transparent !important;color:#ff0 !important;border-color:#ff0 !important} .a11y-contrast a:not(.a11y *){color:#0ff !important} .a11y-contrast img:not(.a11y *){opacity:.55} .a11y-contrast .btn,.a11y-contrast .nav-cta,.a11y-contrast .pay{border:1px solid #ff0 !important} /* Focus must stay visible in every mode, including on black. */ .a11y-contrast :focus-visible,.a11y-lightbg :focus-visible{outline:3px solid #f0f !important;outline-offset:2px}