/* Accessibility toolbar. Public-sector sites in Europe are held to WCAG 2.1 AA (EN 301 549 / the EU Web Accessibility Directive), and a visible toolbar is what most universities ship on top of the underlying markup work. It is not a substitute for accessible markup — it is the affordance visitors can actually see and use. Everything here is driven by data-attributes on , so preferences apply before first paint (the inline script in the layout sets them) and no element flashes at the default size first. */ :root { --a11y-brand: #E32D44; } /* ---------- skip link: the first tab stop on every page ---------- */ .a11y-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 22px; background: #1f2430; color: #fff; font-size: 15px; text-decoration: none; border-radius: 0 0 8px 0; } .a11y-skip:focus { left: 0; color: #fff; outline: 3px solid var(--a11y-brand); outline-offset: 2px; } /* ---------- launcher ---------- */ .a11y-fab { position: fixed; right: 18px; bottom: 18px; z-index: 99990; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--a11y-brand); color: #fff; box-shadow: 0 6px 18px rgba(20, 20, 26, .28); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .a11y-fab:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(20, 20, 26, .34); } .a11y-fab:focus-visible { outline: 3px solid #1f2430; outline-offset: 3px; } .a11y-fab svg { width: 26px; height: 26px; } /* ---------- panel ---------- */ .a11y-panel { position: fixed; right: 18px; bottom: 76px; z-index: 99991; width: 290px; max-width: calc(100vw - 36px); background: #fff; border-radius: 14px; box-shadow: 0 16px 44px rgba(20, 20, 26, .24); padding: 16px; display: none; } .a11y-panel[data-open="1"] { display: block; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .a11y-panel__title { margin: 0; font-size: 15px; font-weight: 700; color: #1f2430; } .a11y-panel__close { border: 0; background: none; cursor: pointer; padding: 4px; color: #5a5a67; line-height: 0; } .a11y-panel__close:focus-visible { outline: 2px solid var(--a11y-brand); outline-offset: 2px; } .a11y-group { margin-bottom: 12px; } .a11y-group__label { display: block; font-size: 12px; color: #5a5a67; margin-bottom: 6px; } .a11y-row { display: flex; gap: 6px; } .a11y-btn { flex: 1; padding: 9px 6px; border: 1px solid #dcdce4; border-radius: 8px; background: #fff; color: #2c2c38; font-size: 13.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .a11y-btn:hover { border-color: #b9b9c6; } .a11y-btn:focus-visible { outline: 2px solid var(--a11y-brand); outline-offset: 2px; } .a11y-btn[aria-pressed="true"] { border-color: var(--a11y-brand); background: rgba(227, 45, 68, .08); color: var(--a11y-brand); font-weight: 600; } .a11y-reset { width: 100%; margin-top: 4px; padding: 9px; border: 0; border-radius: 8px; background: #f1f1f5; color: #5a5a67; font-size: 13px; cursor: pointer; } .a11y-reset:hover { background: #e7e7ee; } /* ================= applied preferences ================= */ /* Font scale. Set on so everything sized in rem/em follows; the legacy cascade sizes a lot in px, so those are nudged by the zoom rule below. */ html[data-a11y-font="1"] body { font-size: 108%; } html[data-a11y-font="2"] body { font-size: 118%; } html[data-a11y-font="3"] body { font-size: 130%; } html[data-a11y-font="1"] { --a11y-zoom: 1.08; } html[data-a11y-font="2"] { --a11y-zoom: 1.18; } html[data-a11y-font="3"] { --a11y-zoom: 1.30; } html[data-a11y-font]:not([data-a11y-font="0"]) p, html[data-a11y-font]:not([data-a11y-font="0"]) li, html[data-a11y-font]:not([data-a11y-font="0"]) td, html[data-a11y-font]:not([data-a11y-font="0"]) .detail__desc, html[data-a11y-font]:not([data-a11y-font="0"]) .art-prose { font-size: calc(1em * var(--a11y-zoom, 1)); line-height: 1.75; } /* High contrast. Deliberately a filter on the page plus forced colours on text: the site has hundreds of legacy rules and enumerating them is unmaintainable, while a filter is one line and always complete. */ html[data-a11y-contrast="1"] body { filter: contrast(1.18) saturate(1.12); } html[data-a11y-contrast="1"] p, html[data-a11y-contrast="1"] li, html[data-a11y-contrast="1"] td, html[data-a11y-contrast="1"] .detail__desc, html[data-a11y-contrast="1"] .art-prose, html[data-a11y-contrast="1"] .blog-article__desc { color: #1a1a22 !important; } /* Link highlighting — WCAG 1.4.1: colour must not be the only way a link is distinguished. This makes that explicit on demand. */ html[data-a11y-links="1"] a:not(.a11y-btn):not(.a11y-skip) { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px dashed rgba(227, 45, 68, .5); outline-offset: 2px; } /* Always-visible focus ring. The legacy CSS removes outlines in places, which makes keyboard navigation impossible to follow. */ html[data-a11y-focus="1"] :focus { outline: 3px solid var(--a11y-brand) !important; outline-offset: 2px !important; } /* Stop motion — respected automatically, and forced by the toggle. */ html[data-a11y-motion="1"] *, html[data-a11y-motion="1"] *::before, html[data-a11y-motion="1"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } @media print { .a11y-fab, .a11y-panel, .a11y-skip { display: none !important; } }