/* ========================================================================== Accessibility toolbar + user display preferences Every preference is applied by toggling a class on — no inline styles, so the site stays compatible with style-src 'self'. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Launcher button -------------------------------------------------------------------------- */ .a11y-launcher { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 9998; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #ffffff; background: #08313f; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); padding: 0; } .a11y-launcher:hover { background: #0b7285; } .a11y-launcher svg { width: 30px; height: 30px; fill: currentColor; } /* -------------------------------------------------------------------------- 2. Panel -------------------------------------------------------------------------- */ .a11y-panel { position: fixed; inset-block-end: 84px; /* clears the launcher button */ inset-inline-start: 18px; z-index: 9999; width: min(330px, calc(100vw - 36px)); max-height: min(80vh, 640px); overflow-y: auto; background: #ffffff; color: #1a1a1a; border: 3px solid #08313f; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); padding: 16px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; } .a11y-panel[hidden] { display: none; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .a11y-panel-head h2 { margin: 0; font-size: 1.1em; color: #08313f; } .a11y-close { background: #ffffff; border: 2px solid #08313f; color: #08313f; border-radius: 8px; width: 36px; height: 36px; font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; } .a11y-close:hover { background: #08313f; color: #ffffff; } .a11y-group { margin-bottom: 14px; } .a11y-group-title { font-size: 0.85em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: #4a4a4a; margin: 0 0 6px; } .a11y-size-row { display: flex; align-items: center; gap: 8px; } .a11y-size-row button { flex: 1; min-height: 44px; font-size: 1em; font-weight: bold; background: #ffffff; border: 2px solid #08313f; color: #08313f; border-radius: 10px; cursor: pointer; font-family: inherit; } .a11y-size-row button:hover { background: #08313f; color: #ffffff; } .a11y-size-row button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .a11y-size-row button[aria-disabled="true"]:hover { background: #ffffff; color: #08313f; } .a11y-size-level { min-width: 74px; text-align: center; font-weight: bold; color: #08313f; } .a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; padding: 8px 6px; text-align: center; background: #ffffff; border: 2px solid #767676; border-radius: 10px; color: #1a1a1a; font-size: 0.86em; font-weight: bold; font-family: inherit; cursor: pointer; } .a11y-opt:hover { border-color: #08313f; background: #eef7fa; } .a11y-opt[aria-pressed="true"] { background: #08313f; border-color: #08313f; color: #ffffff; } .a11y-opt[aria-pressed="true"]::after { content: " \2713"; } .a11y-actions { display: grid; gap: 8px; margin-top: 4px; } .a11y-reset, .a11y-statement-link { display: block; min-height: 44px; padding: 11px 12px; text-align: center; border-radius: 10px; font-weight: bold; font-family: inherit; font-size: 0.95em; cursor: pointer; border: 2px solid #08313f; } .a11y-reset { background: #08313f; color: #ffffff; } .a11y-reset:hover { background: #0b7285; } .a11y-statement-link { background: #ffffff; color: #08313f; text-decoration: none; } .a11y-statement-link:hover { background: #eef7fa; } /* -------------------------------------------------------------------------- 3. Display preferences -------------------------------------------------------------------------- */ /* 3.1 Text size — everything downstream is em/rem based, so scaling the root font size scales the whole page proportionally. */ html.a11y-fs-1 { font-size: 112.5%; } html.a11y-fs-2 { font-size: 125%; } html.a11y-fs-3 { font-size: 140%; } /* 3.2 Dark high contrast */ html.a11y-contrast-dark, html.a11y-contrast-dark * { background-image: none !important; background-color: transparent !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } html.a11y-contrast-dark body, html.a11y-contrast-dark .header, html.a11y-contrast-dark .features, html.a11y-contrast-dark .form-section, html.a11y-contrast-dark .a11y-panel, html.a11y-contrast-dark .logo { background-color: #000000 !important; } html.a11y-contrast-dark a, html.a11y-contrast-dark .cta-highlight, html.a11y-contrast-dark h1, html.a11y-contrast-dark h2, html.a11y-contrast-dark h3 { color: #ffe14d !important; } html.a11y-contrast-dark button, html.a11y-contrast-dark .btn, html.a11y-contrast-dark input, html.a11y-contrast-dark select, html.a11y-contrast-dark textarea { background-color: #000000 !important; color: #ffe14d !important; border: 2px solid #ffe14d !important; } html.a11y-contrast-dark svg { fill: #ffe14d !important; } html.a11y-contrast-dark .a11y-opt[aria-pressed="true"], html.a11y-contrast-dark .lang-btn[aria-pressed="true"] { background-color: #ffe14d !important; color: #000000 !important; } html.a11y-contrast-dark :focus-visible { outline-color: #ffe14d !important; } /* 3.3 Light high contrast */ html.a11y-contrast-light, html.a11y-contrast-light * { background-image: none !important; background-color: transparent !important; color: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } html.a11y-contrast-light body, html.a11y-contrast-light .header, html.a11y-contrast-light .features, html.a11y-contrast-light .form-section, html.a11y-contrast-light .a11y-panel, html.a11y-contrast-light button, html.a11y-contrast-light .btn, html.a11y-contrast-light input, html.a11y-contrast-light select, html.a11y-contrast-light textarea { background-color: #ffffff !important; } html.a11y-contrast-light a { color: #00006e !important; text-decoration: underline !important; } html.a11y-contrast-light button, html.a11y-contrast-light .btn { border: 2px solid #000000 !important; } html.a11y-contrast-light svg { fill: #000000 !important; } html.a11y-contrast-light .a11y-opt[aria-pressed="true"], html.a11y-contrast-light .lang-btn[aria-pressed="true"] { background-color: #000000 !important; color: #ffffff !important; } /* 3.4 Greyscale. Safe on the root element: per the Filter Effects spec the document root is exempt from creating a containing block, so position:fixed keeps working. */ html.a11y-grayscale { filter: grayscale(100%); } /* 3.5 Emphasise links */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; font-weight: 700 !important; outline: 1px dotted currentColor; outline-offset: 2px; } /* 3.6 Emphasise headings */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings legend { outline: 2px dashed currentColor; outline-offset: 6px; } /* 3.7 Readable typeface */ html.a11y-readable-font, html.a11y-readable-font * { font-family: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !important; letter-spacing: normal !important; font-style: normal !important; } /* 3.8 Text spacing (mirrors the WCAG 1.4.12 test values) */ html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing label, html.a11y-spacing a, html.a11y-spacing span { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.a11y-spacing p { margin-bottom: 2em !important; } /* 3.9 Stop animation */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-no-motion .reveal, html.a11y-no-motion .reveal-pop { opacity: 1 !important; transform: none !important; } /* 3.10 Large pointer */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("/assets/cursor-lg.png") 3 2, auto !important; } /* -------------------------------------------------------------------------- 4. Small screens -------------------------------------------------------------------------- */ @media (max-width: 400px) { .a11y-options { grid-template-columns: 1fr; } .a11y-panel { inset-inline: 12px; width: auto; max-height: 70vh; } } @media print { .a11y-launcher, .a11y-panel { display: none !important; } }