/* ========================================================================= Emed Accessibility toolbar Palette: #FFFFFF (white) + #162D54 (navy). Corner FAB + popover card. - Scoped under #emed-a11y (ID) + !important so host themes can't override. - Effects are classes on : emed-a11y- - Brand color + position come from CSS variables injected by PHP (settings): --emed-a11y-accent / --emed-a11y-btn-bg / --emed-a11y-on-accent / --emed-a11y-on-btn - Side comes from a modifier class: .emed-a11y--left / .emed-a11y--right ========================================================================= */ #emed-a11y { --emed-navy: var(--emed-a11y-accent, #162d54); --emed-on-navy: var(--emed-a11y-on-accent, #fff); --emed-muted: #f4f6fa; --emed-muted-text: #5a6a85; --emed-border: #e5eaf2; --emed-radius: 0.875rem; /* 14px */ --emed-radius-xl: 1.5rem; /* 24px */ --emed-fast: 150ms ease; --emed-base: 220ms ease; } /* Reset — class-based (not #id) so explicit borders below still win. */ .emed-a11y, .emed-a11y * { box-sizing: border-box !important; margin: 0; padding: 0; border: 0; float: none !important; font-family: "Noto Sans Hebrew", "Segoe UI", system-ui, Arial, sans-serif !important; letter-spacing: normal !important; text-shadow: none !important; font-size: 15px; } /* Shield the toolbar from the page-wide high-contrast / black-yellow modes, whose `body * { background:#000; color:#fff !important }` would otherwise paint every inner element black and hide the text. Specificity (1,0,0) beats `body *` (0,1,2) yet stays below our component rules (1,1,0), so the toolbar keeps its own navy/white palette in every mode. */ #emed-a11y, #emed-a11y * { background-color: transparent !important; color: inherit !important; } /* ---- Trigger button (corner FAB) --------------------------------------- */ #emed-a11y .emed-a11y-trigger { position: fixed !important; z-index: 2147483646 !important; width: 3.5rem !important; height: 3.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; background-color: #42a9f8!important; color: var(--emed-a11y-on-btn, #fff) !important; cursor: pointer !important; box-shadow: 0 12px 30px -8px rgb(22 45 84 / 0.5) !important; transition: transform var(--emed-base), filter var(--emed-fast), opacity var(--emed-base) !important; } #emed-a11y.emed-a11y--left .emed-a11y-trigger { left: 1.5rem !important; right: auto !important; } #emed-a11y.emed-a11y--right .emed-a11y-trigger { right: 1.5rem !important; left: auto !important; } #emed-a11y.emed-a11y--bottom .emed-a11y-trigger { bottom: 1.5rem !important; top: auto !important; } #emed-a11y.emed-a11y--top .emed-a11y-trigger { top: 1.5rem !important; bottom: auto !important; } #emed-a11y.emed-a11y--center .emed-a11y-trigger { top: calc(50% - 1.75rem) !important; bottom: auto !important; } #emed-a11y .emed-a11y-trigger:hover, #emed-a11y .emed-a11y-trigger:focus-visible { filter: brightness(.85) !important; transform: scale(1.05) !important; } #emed-a11y .emed-a11y-trigger:active { transform: scale(.95) !important; } #emed-a11y .emed-a11y-trigger__icon { width: 1.75rem !important; height: 1.75rem !important; display: block !important; } /* Hide the FAB while the panel is open (panel takes its place). */ #emed-a11y.is-open .emed-a11y-trigger { opacity: 0 !important; pointer-events: none !important; } /* ---- Panel (popover card) ---------------------------------------------- */ #emed-a11y .emed-a11y-panel { position: fixed !important; z-index: 2147483647 !important; width: 360px !important; max-width: calc(100vw - 3rem) !important; max-height: calc(100vh - 3rem) !important; display: flex !important; flex-direction: column !important; border-radius: var(--emed-radius-xl) !important; background-color: #fff !important; color: #162d54 !important; font-size: 15px !important; line-height: 1.4 !important; text-align: right !important; box-shadow: 0 30px 80px -20px rgb(22 45 84 / 0.35), 0 8px 24px -8px rgb(22 45 84 / 0.18) !important; overflow: hidden !important; opacity: 0; transform: translateY(1rem) scale(.95); pointer-events: none; visibility: hidden; transition: opacity var(--emed-base), transform var(--emed-base), visibility 0s linear .22s !important; } #emed-a11y.emed-a11y--left .emed-a11y-panel { left: 1.5rem !important; right: auto !important; transform-origin: bottom left; } #emed-a11y.emed-a11y--right .emed-a11y-panel { right: 1.5rem !important; left: auto !important; transform-origin: bottom right; } /* Vertical placement: bottom grows up, top grows down, center fills the height. */ #emed-a11y.emed-a11y--bottom .emed-a11y-panel { bottom: 1.5rem !important; top: auto !important; } #emed-a11y.emed-a11y--top .emed-a11y-panel { top: 1.5rem !important; bottom: auto !important; } #emed-a11y.emed-a11y--center .emed-a11y-panel { top: 1.5rem !important; bottom: 1.5rem !important; } #emed-a11y.is-open .emed-a11y-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; transition: opacity var(--emed-base), transform var(--emed-base), visibility 0s !important; } /* ---- Header ------------------------------------------------------------ */ #emed-a11y .emed-a11y-panel__head { flex: 0 0 auto !important; padding: 1.5rem 1.5rem 1.75rem !important; background-color: var(--emed-navy) !important; color: var(--emed-on-navy) !important; border-radius: var(--emed-radius-xl) var(--emed-radius-xl) 0 0 !important; } #emed-a11y .emed-a11y-panel__bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } #emed-a11y .emed-a11y-panel__title { font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.2 !important; color: inherit !important; } #emed-a11y .emed-a11y-close { flex: 0 0 auto !important; width: 2.25rem !important; height: 2.25rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; background-color: rgb(255 255 255 / 0.3) !important; color: inherit !important; font-size: 1.25rem !important; line-height: 1 !important; cursor: pointer !important; transition: background-color var(--emed-fast) !important; } #emed-a11y .emed-a11y-close span { font-size: 20px !important; line-height: 1 !important; } #emed-a11y .emed-a11y-close:hover, #emed-a11y .emed-a11y-close:focus-visible { background-color: rgb(255 255 255 / 0.2) !important; } #emed-a11y .emed-a11y-hint { margin-top: 0.5rem !important; font-size: 0.9rem !important; line-height: 1.6 !important; color: rgb(255 255 255 / 0.9) !important; } #emed-a11y .emed-a11y-kbd { display: inline-block !important; padding: 0.125rem 0.375rem !important; margin: 0 0.15rem !important; border-radius: 0.25rem !important; background-color: rgb(255 255 255 / 0.3) !important; font-size: 0.8rem !important; font-weight: 600 !important; color: #fff !important; letter-spacing: 0.07em !important; } /* ---- Body / scroll area ------------------------------------------------ */ #emed-a11y .emed-a11y-panel__body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding: 1.25rem !important; } #emed-a11y .emed-a11y-panel__body > * + * { margin-top: 1.5rem !important; } /* ---- Section title ----------------------------------------------------- */ #emed-a11y .emed-a11y-group { margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; } #emed-a11y .emed-a11y-group__legend { width: 100% !important; margin: 15px 0 0.625rem !important; font-size: 1.375rem !important; /* 2× the original 11px label */ font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--emed-muted-text) !important; } /* ---- Language pills ---------------------------------------------------- */ #emed-a11y .emed-a11y-langs { list-style: none !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } #emed-a11y .emed-a11y-lang { width: 100% !important; height: 2.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; border: 1px solid var(--emed-border) !important; background-color: #fff !important; color: var(--emed-navy) !important; font-size: 0.875rem !important; font-weight: 500 !important; cursor: pointer !important; transition: background-color var(--emed-fast), border-color var(--emed-fast), color var(--emed-fast) !important; } #emed-a11y .emed-a11y-lang:hover { background-color: var(--emed-muted) !important; } #emed-a11y .emed-a11y-lang[aria-pressed="true"] { background-color: var(--emed-navy) !important; color: var(--emed-on-navy) !important; border-color: var(--emed-navy) !important; } /* ---- Tiles (options / toggles) ----------------------------------------- */ #emed-a11y .emed-a11y-buttons { list-style: none !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } #emed-a11y .emed-a11y-buttons li { list-style: none !important; } #emed-a11y .emed-a11y-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; width: 100% !important; min-height: 5rem !important; padding: 1rem 0.75rem !important; border-radius: var(--emed-radius) !important; border: 1px solid var(--emed-border) !important; background-color: #fff !important; color: var(--emed-navy) !important; cursor: pointer !important; text-align: center !important; transition: background-color var(--emed-fast), border-color var(--emed-fast), color var(--emed-fast), transform 100ms ease !important; } #emed-a11y .emed-a11y-btn:hover { background-color: var(--emed-muted) !important; border-color: rgb(22 45 84 / 0.2) !important; } #emed-a11y .emed-a11y-btn:active { transform: scale(.98) !important; } #emed-a11y .emed-a11y-btn[aria-pressed="true"] { background-color: var(--emed-navy) !important; border-color: var(--emed-navy) !important; color: var(--emed-on-navy) !important; box-shadow: 0 1px 3px rgb(22 45 84 / 0.1) !important; } #emed-a11y .emed-a11y-btn__label { font-size: 0.85rem !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: center !important; color: inherit !important; } #emed-a11y .emed-a11y-btn__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0 !important; color: inherit !important; } #emed-a11y .emed-a11y-btn__icon svg { width: 100% !important; height: 100% !important; display: block !important; } /* Color swatches double as the icon for the color group. */ #emed-a11y .emed-a11y-btn__swatch { width: 1.5rem !important; height: 1.5rem !important; border-radius: 5px !important; border: 1px solid rgb(0 0 0 / 0.2) !important; flex-shrink: 0 !important; } #emed-a11y .emed-a11y-btn__swatch--monochrome { background: linear-gradient(135deg, #fff 0%, #888 50%, #000 100%) !important; } #emed-a11y .emed-a11y-btn__swatch--sepia { background: linear-gradient(135deg, #f4ecd8 0%, #a67b4d 100%) !important; } #emed-a11y .emed-a11y-btn__swatch--high-contrast { background: linear-gradient(135deg, #000 50%, #fff 50%) !important; } #emed-a11y .emed-a11y-btn__swatch--black-yellow { background: linear-gradient(135deg, #000 50%, #ff0 50%) !important; } #emed-a11y .emed-a11y-btn__swatch--invert { background: linear-gradient(135deg, #fff 0%, #000 100%) !important; filter: invert(1) !important; } #emed-a11y .emed-a11y-btn__swatch--cursor-white { background: #fff !important; } #emed-a11y .emed-a11y-btn__swatch--cursor-black { background: #000 !important; } /* ---- Stepper ----------------------------------------------------------- */ #emed-a11y .emed-a11y-stepper { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; padding: 0.375rem !important; border-radius: 9999px !important; background-color: var(--emed-muted) !important; } #emed-a11y .emed-a11y-step { flex-shrink: 0 !important; width: 2.25rem !important; height: 2.25rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; background-color: var(--emed-navy) !important; color: var(--emed-on-navy) !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; transition: filter var(--emed-fast) !important; } #emed-a11y .emed-a11y-step:hover:not(:disabled), #emed-a11y .emed-a11y-step:focus-visible { filter: brightness(.85) !important; } #emed-a11y .emed-a11y-step:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } #emed-a11y .emed-a11y-step__value { font-size: 1rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; color: var(--emed-navy) !important; min-width: 1.5rem !important; text-align: center !important; } /* ---- Keyboard-shortcuts (collapsible) ---------------------------------- */ #emed-a11y .emed-a11y-shortcuts { margin: 0 0 20px !important; } #emed-a11y .emed-a11y-shortcuts__summary { display: flex !important; width: 100% !important; align-items: center !important; gap: 0.625rem !important; padding: 0.75rem 1rem !important; border-radius: var(--emed-radius) !important; border: 1px solid var(--emed-border) !important; background-color: #fff !important; color: var(--emed-navy) !important; font-size: 0.875rem !important; font-weight: 500 !important; cursor: pointer !important; list-style: none !important; transition: background-color var(--emed-fast) !important; } #emed-a11y .emed-a11y-shortcuts__summary::-webkit-details-marker { display: none !important; } #emed-a11y .emed-a11y-shortcuts__summary:hover { background-color: var(--emed-muted) !important; } #emed-a11y .emed-a11y-shortcuts__icon { display: inline-flex !important; width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0 !important; } #emed-a11y .emed-a11y-shortcuts__icon svg { width: 100% !important; height: 100% !important; } #emed-a11y .emed-a11y-shortcuts__text { flex: 1 1 auto !important; } #emed-a11y .emed-a11y-shortcuts__chev { display: inline-flex !important; flex-shrink: 0 !important; color: var(--emed-muted-text) !important; transition: transform var(--emed-fast) !important; } #emed-a11y .emed-a11y-shortcuts[open] .emed-a11y-shortcuts__chev { transform: rotate(180deg) !important; } #emed-a11y .emed-a11y-shortcuts__list { list-style: none !important; margin-top: 0.5rem !important; padding: 0.75rem 1rem !important; border-radius: var(--emed-radius) !important; background-color: var(--emed-muted) !important; font-size: 0.75rem !important; line-height: 1.5 !important; color: var(--emed-muted-text) !important; } #emed-a11y .emed-a11y-shortcuts__list > li { list-style: none !important; } #emed-a11y .emed-a11y-shortcuts__list > li + li { margin-top: 0.375rem !important; } /* ---- Footer (reset + links) -------------------------------------------- */ #emed-a11y .emed-a11y-panel__foot { margin: 0 !important; } #emed-a11y .emed-a11y-reset { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.875rem 1rem !important; border-radius: var(--emed-radius) !important; background-color: var(--emed-navy) !important; color: var(--emed-on-navy) !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; transition: filter var(--emed-fast) !important; } #emed-a11y .emed-a11y-reset .emed-a11y-btn__icon { width: 1rem !important; height: 1rem !important; } #emed-a11y .emed-a11y-reset:hover, #emed-a11y .emed-a11y-reset:focus-visible { filter: brightness(.85) !important; } #emed-a11y .emed-a11y-links { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; margin-top: 0.75rem !important; } #emed-a11y .emed-a11y-link { display: inline-flex !important; align-items: center !important; gap: 0.375rem !important; flex: 1 1 0 !important; justify-content: center !important; padding: 0.7rem 0.5rem !important; border-radius: var(--emed-radius) !important; border: 1px solid var(--emed-border) !important; background-color: #fff !important; color: var(--emed-navy) !important; font-size: 0.8125rem !important; font-weight: 500 !important; text-decoration: none !important; cursor: pointer !important; transition: background-color var(--emed-fast), border-color var(--emed-fast) !important; } #emed-a11y .emed-a11y-link:hover, #emed-a11y .emed-a11y-link:focus-visible { background-color: var(--emed-muted) !important; border-color: rgb(22 45 84 / 0.2) !important; } #emed-a11y .emed-a11y-link .emed-a11y-btn__icon { width: 1.125rem !important; height: 1.125rem !important; } /* ---- Report modal ------------------------------------------------------ */ #emed-a11y .emed-a11y-modal { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: none !important; align-items: center !important; justify-content: center !important; } #emed-a11y .emed-a11y-modal.is-open { display: flex !important; } #emed-a11y .emed-a11y-modal__backdrop { position: absolute !important; inset: 0 !important; background: rgb(10 22 44 / 0.6) !important; } #emed-a11y .emed-a11y-modal__box { position: relative !important; width: 420px !important; max-width: 92vw !important; max-height: 90vh !important; overflow-y: auto !important; padding: 1.5rem !important; background: #fff !important; color: #162d54 !important; border-radius: var(--emed-radius-xl) !important; box-shadow: 0 30px 80px -20px rgb(22 45 84 / 0.5) !important; text-align: right !important; } #emed-a11y .emed-a11y-modal__close { position: absolute !important; top: 1rem !important; left: 1rem !important; width: 2.25rem !important; height: 2.25rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; background: var(--emed-muted) !important; color: #162d54 !important; font-size: 1.25rem !important; line-height: 1 !important; cursor: pointer !important; } #emed-a11y .emed-a11y-modal__close:hover, #emed-a11y .emed-a11y-modal__close:focus-visible { background: #e7ebf2 !important; } #emed-a11y .emed-a11y-modal__title { margin-bottom: 1rem !important; font-size: 1.25rem !important; font-weight: 700 !important; color: var(--emed-navy) !important; } #emed-a11y .emed-a11y-field { margin-bottom: 0.75rem !important; } #emed-a11y .emed-a11y-field label { display: block !important; margin-bottom: 0.3rem !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #162d54 !important; } #emed-a11y .emed-a11y-field input, #emed-a11y .emed-a11y-field textarea { width: 100% !important; padding: 0.625rem 0.75rem !important; border: 1px solid var(--emed-border) !important; border-radius: 0.625rem !important; font-size: 0.9375rem !important; font-family: inherit !important; background: #fff !important; color: #162d54 !important; } #emed-a11y .emed-a11y-field input:focus, #emed-a11y .emed-a11y-field textarea:focus { outline: 2px solid var(--emed-navy) !important; outline-offset: 1px !important; border-color: var(--emed-navy) !important; } /* Honeypot — visually and from-AT hidden, still submittable by bots. */ #emed-a11y .emed-a11y-hp { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; white-space: nowrap !important; } #emed-a11y .emed-a11y-report-status { margin: 0.375rem 0 0.75rem !important; font-size: 0.875rem !important; font-weight: 600 !important; min-height: 1em !important; } #emed-a11y .emed-a11y-report-status.is-success { color: #1e7e34 !important; } #emed-a11y .emed-a11y-report-status.is-error { color: #b00020 !important; } #emed-a11y .emed-a11y-report-submit { width: 100% !important; padding: 0.8rem !important; border-radius: var(--emed-radius) !important; background: var(--emed-navy) !important; color: var(--emed-on-navy) !important; font-size: 1rem !important; font-weight: 700 !important; cursor: pointer !important; transition: filter var(--emed-fast) !important; } #emed-a11y .emed-a11y-report-submit:hover, #emed-a11y .emed-a11y-report-submit:focus-visible { filter: brightness(.85) !important; } #emed-a11y .emed-a11y-report-submit:disabled { opacity: .6 !important; cursor: default !important; } /* Strong, theme-independent focus ring. */ #emed-a11y :focus-visible { outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; } /* Custom scrollbar inside the panel body (WebKit). */ #emed-a11y .emed-a11y-panel__body::-webkit-scrollbar { width: 6px !important; } #emed-a11y .emed-a11y-panel__body::-webkit-scrollbar-track { background: transparent !important; } #emed-a11y .emed-a11y-panel__body::-webkit-scrollbar-thumb { background-color: var(--emed-border) !important; border-radius: 9999px !important; } /* Skip-to-content link — off-screen until focused (keyboard bypass). */ .emed-a11y-skip { position: fixed !important; top: -120px !important; left: 8px !important; z-index: 2147483647 !important; padding: 10px 16px !important; background: var(--emed-a11y-btn-bg, #162d54) !important; color: var(--emed-a11y-on-btn, #fff) !important; font: 700 15px/1 "Heebo", "Segoe UI", Arial, sans-serif !important; text-decoration: none !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 2px 10px rgb(22 45 84 / 0.35) !important; transition: top .15s ease !important; } .emed-a11y-skip:focus { top: 0 !important; outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; } /* ---- JS-driven UI: tooltips, image captions, reading ruler ------------- */ .emed-a11y-tip { position: absolute !important; z-index: 2147483647 !important; max-width: 280px !important; padding: 6px 10px !important; background: #111 !important; color: #fff !important; font: 600 14px/1.3 Arial, sans-serif !important; border-radius: 6px !important; pointer-events: none !important; opacity: 0; transition: opacity .1s ease; } .emed-a11y-tip.is-visible { opacity: 1; } .emed-a11y-imgcap { display: block !important; margin-top: 4px !important; padding: 4px 8px !important; background: #111 !important; color: #fff !important; font: 600 13px/1.3 Arial, sans-serif !important; border-radius: 4px !important; text-align: center !important; } .emed-a11y-ruler { position: fixed !important; left: 0 !important; right: 0 !important; height: 32px !important; transform: translateY(-50%) !important; z-index: 2147483640 !important; pointer-events: none !important; display: none; background: rgba(255, 235, 59, .25) !important; border-top: 2px solid rgba(0, 0, 0, .65) !important; border-bottom: 2px solid rgba(0, 0, 0, .65) !important; } /* ---- Direction (LTR languages: English / Russian) ---------------------- */ #emed-a11y[dir="ltr"] .emed-a11y-panel { text-align: left !important; } #emed-a11y .emed-a11y-modal[dir="ltr"] .emed-a11y-modal__box { text-align: left !important; } #emed-a11y .emed-a11y-modal[dir="ltr"] .emed-a11y-modal__close { left: auto !important; right: 1rem !important; } /* Respect reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { #emed-a11y .emed-a11y-panel, #emed-a11y .emed-a11y-trigger, .emed-a11y-skip { transition: none !important; } } /* ========================================================================= Effect classes on ========================================================================= */ /* ---- Color / contrast (exclusive) -------------------------------------- IMPORTANT: a `filter` on / makes it the containing block for position:fixed, which would yank the toolbar to the document bottom. So we filter body's children *except* the toolbar — no ancestor of the toolbar is filtered, and the FAB/panel keep anchoring to the viewport. */ html.emed-a11y-monochrome body > *:not(#emed-a11y):not(.emed-a11y-skip):not(.emed-a11y-tip):not(.emed-a11y-ruler) { filter: grayscale(1) !important; } html.emed-a11y-sepia body > *:not(#emed-a11y):not(.emed-a11y-skip):not(.emed-a11y-tip):not(.emed-a11y-ruler) { filter: sepia(.85) !important; } html.emed-a11y-invert body > *:not(#emed-a11y):not(.emed-a11y-skip):not(.emed-a11y-tip):not(.emed-a11y-ruler) { filter: invert(1) hue-rotate(180deg) !important; } html.emed-a11y-high-contrast body { background: #000 !important; } html.emed-a11y-high-contrast body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.emed-a11y-black-yellow body { background: #000 !important; } html.emed-a11y-black-yellow body * { background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } html.emed-a11y-high-contrast body a, html.emed-a11y-black-yellow body a { text-decoration: underline !important; } /* Re-assert toolbar colors under forced modes (id specificity wins). */ html.emed-a11y-high-contrast #emed-a11y .emed-a11y-panel, html.emed-a11y-black-yellow #emed-a11y .emed-a11y-panel, html.emed-a11y-high-contrast #emed-a11y .emed-a11y-modal__box, html.emed-a11y-black-yellow #emed-a11y .emed-a11y-modal__box { background: #fff !important; color: #162d54 !important; } html.emed-a11y-high-contrast #emed-a11y .emed-a11y-panel__head, html.emed-a11y-black-yellow #emed-a11y .emed-a11y-panel__head { background: var(--emed-a11y-accent, #162d54) !important; color: var(--emed-a11y-on-accent, #fff) !important; } html.emed-a11y-high-contrast #emed-a11y .emed-a11y-field input, html.emed-a11y-high-contrast #emed-a11y .emed-a11y-field textarea, html.emed-a11y-black-yellow #emed-a11y .emed-a11y-field input, html.emed-a11y-black-yellow #emed-a11y .emed-a11y-field textarea { background: #fff !important; color: #162d54 !important; border-color: #e5eaf2 !important; } html.emed-a11y-high-contrast #emed-a11y .emed-a11y-trigger, html.emed-a11y-black-yellow #emed-a11y .emed-a11y-trigger { background: var(--emed-a11y-btn-bg, #162d54) !important; color: var(--emed-a11y-on-btn, #fff) !important; } html.emed-a11y-high-contrast #emed-a11y .emed-a11y-btn[aria-pressed="true"], html.emed-a11y-black-yellow #emed-a11y .emed-a11y-btn[aria-pressed="true"] { background: var(--emed-a11y-accent, #162d54) !important; color: var(--emed-a11y-on-accent, #fff) !important; } /* ---- Cursor (exclusive) ------------------------------------------------ */ html.emed-a11y-cursor-white, html.emed-a11y-cursor-white * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M6%202L6%2026L12%2020L16%2030L20%2028L16%2018L24%2018Z'%20fill='white'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") 4 2, auto !important; } html.emed-a11y-cursor-black, html.emed-a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M6%202L6%2026L12%2020L16%2030L20%2028L16%2018L24%2018Z'%20fill='black'%20stroke='white'%20stroke-width='1.6'/%3E%3C/svg%3E") 4 2, auto !important; } /* ---- Display toggles --------------------------------------------------- */ html.emed-a11y-stop-animations *, html.emed-a11y-stop-animations *::before, html.emed-a11y-stop-animations *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; } html.emed-a11y-highlight-titles body :is(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #e67e22 !important; outline-offset: 3px !important; background-color: rgba(230, 126, 34, .12) !important; } html.emed-a11y-highlight-titles #emed-a11y :is(h1, h2, h3, h4, h5, h6) { outline: 0 !important; background-color: transparent !important; } html.emed-a11y-highlight-links body a { outline: 2px solid #1e7e34 !important; outline-offset: 2px !important; text-decoration: underline !important; background-color: rgba(30, 126, 52, .10) !important; } html.emed-a11y-highlight-links #emed-a11y a { outline: 0 !important; background-color: transparent !important; } html.emed-a11y-readable-font body * { font-family: Arial, "Open Sans", "Helvetica Neue", sans-serif !important; } /* Dyslexia-friendly font. Uses OpenDyslexic if installed on the device or dropped into assets/fonts/; otherwise falls back to the stack below. */ @font-face { font-family: "EmedDyslexic"; src: local("OpenDyslexic"), local("OpenDyslexic Regular"), url("../fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-display: swap; } html.emed-a11y-dyslexia-font body * { font-family: "EmedDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, Tahoma, sans-serif !important; } html.emed-a11y-dyslexia-font #emed-a11y * { font-family: "Heebo", "Segoe UI", Arial, sans-serif !important; } /* Text spacing (WCAG 1.4.12). Toolbar itself is kept at normal spacing. */ html.emed-a11y-text-spacing body * { line-height: 1.8 !important; letter-spacing: .12em !important; word-spacing: .16em !important; } html.emed-a11y-text-spacing body p, html.emed-a11y-text-spacing body li { margin-bottom: 1.6em !important; } html.emed-a11y-text-spacing #emed-a11y * { line-height: normal !important; letter-spacing: normal !important; word-spacing: normal !important; } html.emed-a11y-keyboard-nav *:focus { outline: 3px solid #1e90ff !important; outline-offset: 2px !important; }