/* ══════════════════════════════════════════════════════════════════════ Accessibility (ADA / WCAG 2.1 AA) — settings drawer + feature classes. Ported from the TourEx public portal so every Resilionics site meets one standard. Feature classes land on ; the pre-paint script in base.html mirrors this feature->class map. ══════════════════════════════════════════════════════════════════════ */ #a11yToggle .bi-universal-access { position: relative; top: -.06em; font-size: 1.05em; } .a11y-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1060; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .a11y-panel-backdrop.open { opacity: 1; visibility: visible; } .a11y-panel { position: fixed; top: 0; right: -380px; width: 360px; max-width: 90vw; height: 100vh; background: #fff; z-index: 1061; box-shadow: -4px 0 20px rgba(0,0,0,.18); transition: right .3s ease; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } .a11y-panel *, .a11y-panel *::before, .a11y-panel *::after { box-sizing: border-box; } .a11y-panel.open { right: 0; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--rs-primary, #4a6cf4); color: #fff; flex-shrink: 0; } .a11y-panel-header h2 { font-size: 1.05rem; margin: 0; color: #fff; } .a11y-panel-close { background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; padding: .25rem; cursor: pointer; } .a11y-panel-close:hover { opacity: .85; } .a11y-panel-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .a11y-panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem 1.25rem; } .a11y-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; } .a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1rem .5rem; border: 2px solid #dee2e6; border-radius: .5rem; background: #fff; cursor: pointer; font-size: .8rem; font-weight: 600; color: #40474f; text-align: center; line-height: 1.2; min-width: 0; overflow: hidden; word-break: break-word; transition: border-color .15s, background .15s, color .15s; } .a11y-btn:hover { border-color: var(--rs-primary, #4a6cf4); color: var(--rs-primary, #4a6cf4); } .a11y-btn:focus-visible { outline: 3px solid var(--rs-primary, #4a6cf4); outline-offset: 2px; } .a11y-btn[aria-pressed="true"] { background: var(--rs-primary, #4a6cf4); border-color: var(--rs-primary, #4a6cf4); color: #fff; } .a11y-btn .a11y-icon { font-size: 1.55rem; line-height: 1; } .a11y-panel-footer { padding: .75rem 1.25rem; border-top: 1px solid #dee2e6; text-align: center; flex-shrink: 0; } .a11y-reset-btn { background: none; border: 1px solid #b02a37; color: #b02a37; font-size: .85rem; font-weight: 600; padding: .4rem 1.5rem; border-radius: .375rem; cursor: pointer; transition: background .15s, color .15s; } .a11y-reset-btn:hover { background: #b02a37; color: #fff; } .a11y-reset-btn:focus-visible { outline: 3px solid #b02a37; outline-offset: 2px; } /* ── Feature: contrast ── */ html.a11y-contrast { --rs-primary: #17408b; --rs-primary-hover: #0d2c66; --rs-text: #191919; --rs-text-muted: #40474f; --rs-border: #191919; } html.a11y-contrast body { background: #fff !important; color: #191919 !important; } html.a11y-contrast .card, html.a11y-contrast .table { border: 2px solid #191919 !important; } html.a11y-contrast .text-muted, html.a11y-contrast .text-secondary { color: #40474f !important; } html.a11y-contrast a:not(.btn) { color: #0b3d91 !important; text-decoration: underline !important; } html.a11y-contrast *:focus { outline: 3px solid #0b3d91 !important; outline-offset: 2px !important; } /* ── Feature: text presentation ── */ html.a11y-bigger-text-1 body { font-size: 110% !important; } html.a11y-bigger-text-2 body { font-size: 125% !important; } html.a11y-text-spacing body { letter-spacing: .08em !important; word-spacing: .16em !important; } html.a11y-line-height body, html.a11y-line-height p, html.a11y-line-height li, html.a11y-line-height td, html.a11y-line-height th, html.a11y-line-height label, html.a11y-line-height input, html.a11y-line-height textarea { line-height: 2 !important; } /* ── Feature: highlight links ── */ html.a11y-highlight-links a:not(.btn):not(.navbar-brand):not(.nav-link):not(.dropdown-item) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; background-color: rgba(255,255,0,.2) !important; padding: 0 2px !important; border-radius: 2px !important; } html.a11y-highlight-links a.btn, html.a11y-highlight-links a.nav-link, html.a11y-highlight-links a.dropdown-item { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } /* ── Feature: pause animations ── */ html.a11y-pause-anim *, html.a11y-pause-anim *::before, html.a11y-pause-anim *::after { animation-play-state: paused !important; transition-duration: 0s !important; scroll-behavior: auto !important; } /* ── Feature: dyslexia-friendly font ── The :not() chain keeps icon fonts intact - without it every Bootstrap icon renders as a tofu box. */ @font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/opendyslexic-400.woff2") format("woff2"); } @font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/opendyslexic-700.woff2") format("woff2"); } @font-face { font-family: "OpenDyslexic"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/opendyslexic-400italic.woff2") format("woff2"); } @font-face { font-family: "OpenDyslexic"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/opendyslexic-700italic.woff2") format("woff2"); } html.a11y-dyslexia, html.a11y-dyslexia *:not(.bi):not([class*="bi-"]):not(i):not(.resilionics-logo) { font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important; } /* ── Feature: large cursor ── */ html.a11y-large-cursor, html.a11y-large-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 2 L5 26 L11 20 L17 28 L21 26 L15 18 L23 18 Z' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 5 2, auto !important; } html.a11y-large-cursor a, html.a11y-large-cursor button, html.a11y-large-cursor [role="button"], html.a11y-large-cursor input[type="submit"], html.a11y-large-cursor select, html.a11y-large-cursor label { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M14 2 C14 2 14 14 14 14 L10 14 C10 14 10 18 14 18 L14 18 C14 18 14 20 14 20 L9 20 C9 20 9 24 13 24 L14 24 L14 26 L8 26 C8 26 8 30 12 30 L22 30 C26 30 28 28 28 24 L28 16 C28 14 26 12 24 12 L20 12 L20 2 C20 0 14 0 14 2Z' fill='black' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 16 2, pointer !important; } /* ── Feature: tooltips from title attributes ── */ html.a11y-tooltips [title]:not([title=""]) { position: relative; text-decoration: underline dotted; } html.a11y-tooltips [title]:not([title=""]):hover::after, html.a11y-tooltips [title]:not([title=""]):focus::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #191919; color: #fff; padding: .35rem .65rem; border-radius: .25rem; font-size: .8rem; font-weight: 400; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; z-index: 9999; pointer-events: none; } /* ── Keyboard focus is always visible (WCAG 2.4.7) ── */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--rs-primary, #4a6cf4); outline-offset: 2px; } /* ── Touch targets on coarse pointers (WCAG 2.5.5) ── */ @media (pointer: coarse) { .navbar .nav-link, .dropdown-menu .dropdown-item, #a11yToggle, #hcToggle { min-height: 44px; display: flex; align-items: center; } .a11y-panel-close, .a11y-btn { min-height: 44px; } } @media print { .a11y-panel, .a11y-panel-backdrop { display: none !important; } }