/* ============================================================ Accessibility widget — Multipurpose Finance NRB disability-friendly banking directive compliance Effect classes are applied to by front/js/accessibility.js ============================================================ */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/opendyslexic/OpenDyslexic-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/opendyslexic/OpenDyslexic-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } /* ---------- Skip to main content ---------- */ .skip-to-main { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #384474; color: #fff; padding: 12px 24px; font-size: 16px; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0; } .skip-to-main:focus { left: 0; color: #fff; outline: 3px solid #dd974e; } /* ---------- Floating toggle button ---------- */ #a11y-btn { position: fixed; right: 18px; bottom: 18px; z-index: 99990; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: #384474; color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; padding: 0; } #a11y-btn:hover, #a11y-btn:focus { background: #dd974e; outline: 3px solid #384474; } #a11y-btn svg { width: 34px; height: 34px; fill: #fff; } /* ---------- Panel ---------- */ #a11y-panel { position: fixed; top: 0; right: 0; z-index: 99995; width: 340px; max-width: 95vw; height: 100vh; background: #fff; box-shadow: -6px 0 22px rgba(0, 0, 0, .3); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; font-family: 'Roboto', sans-serif; } #a11y-panel.a11y-open { transform: translateX(0); } .a11y-panel-header { background: #384474; color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } .a11y-panel-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; } #a11y-close { background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 8px; } #a11y-close:hover, #a11y-close:focus { color: #dd974e; outline: 2px solid #dd974e; } .a11y-panel-body { overflow-y: auto; padding: 14px; flex: 1 1 auto; } .a11y-section-title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #6b7280; margin: 16px 0 8px; } .a11y-section-title:first-child { margin-top: 0; } /* slider rows (text size + per-feature intensity) */ .a11y-slider-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; border: 1px solid #d8dbe4; border-radius: 8px; padding: 8px 12px; background: #f4f5f9; } .a11y-slider-row[hidden] { display: none; } .a11y-slider-row input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: #384474; cursor: pointer; height: 22px; } .a11y-slider-row input[type="range"]:focus { outline: 2px solid #dd974e; outline-offset: 2px; } .a11y-slider-row output { min-width: 48px; text-align: right; font-size: 13px; font-weight: 700; color: #384474; } .a11y-slider-row button { width: 38px; height: 34px; flex: 0 0 auto; font-size: 18px; font-weight: 700; border: 1px solid #d8dbe4; border-radius: 6px; background: #fff; color: #384474; cursor: pointer; } .a11y-slider-row button:hover, .a11y-slider-row button:focus { background: #384474; color: #fff; outline: 2px solid #dd974e; } /* option cards grid */ .a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .a11y-card { border: 1px solid #d8dbe4; border-radius: 8px; background: #fff; color: #384474; font-size: 11.5px; font-weight: 500; line-height: 1.25; text-align: center; cursor: pointer; padding: 10px 4px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: inherit; } .a11y-card i { font-size: 17px; color: #384474; } .a11y-card:hover, .a11y-card:focus { border-color: #384474; background: #f4f5f9; outline: 2px solid #dd974e; } .a11y-card[aria-pressed="true"] { background: #384474; border-color: #384474; color: #fff; } .a11y-card[aria-pressed="true"] i { color: #dd974e; } /* reset + footer */ #a11y-reset { width: 100%; margin-top: 16px; background: #dd974e; color: #fff; font-size: 15px; font-weight: 700; border: 0; border-radius: 8px; padding: 12px; cursor: pointer; } #a11y-reset:hover, #a11y-reset:focus { background: #384474; outline: 2px solid #dd974e; } .a11y-shortcuts { margin: 14px 0 0; padding: 10px 12px; background: #f4f5f9; border-radius: 8px; font-size: 12px; color: #4b5563; } .a11y-shortcuts strong { color: #384474; } /* ---------- Overlay helpers (guide / mask) ---------- */ #a11y-guide { position: fixed; left: 0; width: 100%; height: 8px; background: #dd974e; border-top: 2px solid #384474; border-bottom: 2px solid #384474; z-index: 99980; pointer-events: none; display: none; } #a11y-mask-top, #a11y-mask-bottom { position: fixed; left: 0; width: 100%; background: rgba(0, 0, 0, .65); z-index: 99979; pointer-events: none; display: none; } #a11y-mask-top { top: 0; } #a11y-mask-bottom { bottom: 0; } /* ============================================================ EFFECT CLASSES (on ) ============================================================ */ /* color / contrast — filter values are set inline on by accessibility.js (and by the pre-paint snippet in the layout head); intensity comes from the panel sliders. Only the dark-mode media re-inversion lives here. */ html.a11y-contrast-dark { background: #111; } html.a11y-contrast-dark img, html.a11y-contrast-dark video, html.a11y-contrast-dark iframe, html.a11y-contrast-dark #a11y-panel, html.a11y-contrast-dark #a11y-btn { filter: invert(1) hue-rotate(180deg); } /* links & focus highlighting */ html.a11y-highlight-links a { text-decoration: underline !important; background: #ffff00 !important; color: #00306b !important; box-shadow: 0 0 0 2px #ffff00 !important; } html.a11y-highlight-focus *:focus { outline: 4px solid #dd974e !important; outline-offset: 2px !important; } /* strong always-visible focus for keyboard users (base improvement) */ .skip-to-main:focus, #a11y-panel *:focus { outline: 3px solid #dd974e; outline-offset: 1px; } /* dyslexia-friendly font (Font Awesome glyphs excluded) */ html.a11y-dyslexia body, html.a11y-dyslexia p, html.a11y-dyslexia a, html.a11y-dyslexia li, html.a11y-dyslexia span:not(.fa):not([class*="fa-"]), html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3, html.a11y-dyslexia h4, html.a11y-dyslexia h5, html.a11y-dyslexia h6, html.a11y-dyslexia td, html.a11y-dyslexia th, html.a11y-dyslexia label, html.a11y-dyslexia button, html.a11y-dyslexia input, html.a11y-dyslexia div { font-family: 'OpenDyslexic', 'Roboto', sans-serif !important; } html.a11y-dyslexia .fa, html.a11y-dyslexia [class*="fa-"]:before { font-family: FontAwesome !important; } /* letter/word spacing, line height and bold weight are slider-driven: accessibility.js (and the pre-paint head snippet) generate the rules with the chosen values into