/* Accessibility override styles — applied via CSS classes on */ /* IS 5568 / WCAG 2.0 AA compliance */ /* Baseline focus indicators — WCAG 2.0 AA SC 2.4.7 (always active) */ *:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; } /* ===== Font scaling — applied via CSS variable ===== */ html { font-size: calc(16px * var(--a11y-font-scale, 1)); } /* ===== High contrast mode ===== */ html.a11y-high-contrast, html.a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.a11y-high-contrast * { color: #fff !important; background-image: none !important; text-shadow: none !important; box-shadow: none !important; } html.a11y-high-contrast a, html.a11y-high-contrast a * { color: #ff0 !important; text-decoration: underline !important; } html.a11y-high-contrast button, html.a11y-high-contrast [role="button"] { border: 2px solid #fff !important; } html.a11y-high-contrast img { filter: contrast(1.2) !important; } /* Exclude the accessibility widget panel from high contrast */ html.a11y-high-contrast .a11y-widget-panel, html.a11y-high-contrast .a11y-widget-panel *, html.a11y-high-contrast .a11y-widget-panel a, html.a11y-high-contrast .a11y-widget-panel button, html.a11y-high-contrast .a11y-widget-panel [role="switch"], html.a11y-high-contrast .a11y-widget-panel [role="button"] { color: #000 !important; background-image: none !important; text-shadow: none !important; box-shadow: none !important; border-color: #d1d5db !important; text-decoration: none !important; outline: none !important; filter: none !important; } html.a11y-high-contrast .a11y-widget-panel { background: #fff !important; border-color: #e5e7eb !important; } html.a11y-high-contrast .a11y-widget-panel [role="switch"][aria-checked="true"] { background-color: #2563eb !important; } html.a11y-high-contrast .a11y-widget-panel [role="switch"][aria-checked="true"] span:first-child { color: #1e40af !important; } html.a11y-high-contrast .a11y-widget-panel [role="switch"][aria-checked="false"] { background-color: #f3f4f6 !important; } html.a11y-high-contrast .a11y-widget-panel .bg-blue-600 { background-color: #2563eb !important; } html.a11y-high-contrast .a11y-widget-panel .bg-gray-300 { background-color: #d1d5db !important; } html.a11y-high-contrast .a11y-widget-panel .bg-gray-50 { background-color: #f9fafb !important; } html.a11y-high-contrast .a11y-widget-panel .bg-blue-50 { background-color: #eff6ff !important; } html.a11y-high-contrast .a11y-widget-panel .bg-white { background-color: #fff !important; } html.a11y-high-contrast .a11y-widget-panel .text-gray-600 { color: #4b5563 !important; } html.a11y-high-contrast .a11y-widget-panel .text-gray-700 { color: #374151 !important; } html.a11y-high-contrast .a11y-widget-panel .text-gray-800 { color: #1f2937 !important; } html.a11y-high-contrast .a11y-widget-panel .text-blue-800 { color: #1e40af !important; } /* ===== Grayscale mode ===== */ html.a11y-grayscale { filter: grayscale(1); } /* ===== Link highlighting ===== */ html.a11y-highlight-links a { text-decoration: underline !important; outline: 2px solid currentColor !important; outline-offset: 2px !important; } /* ===== Readable font — override to system sans-serif ===== */ html.a11y-readable-font, html.a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; } /* ===== Enhanced keyboard navigation highlights ===== */ html.a11y-keyboard-nav *:focus-visible { outline: 3px solid #2563EB !important; outline-offset: 4px !important; box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.3) !important; } /* ===== Stop all animations ===== */ html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after { animation: none !important; transition: none !important; } html.a11y-stop-animations { scroll-behavior: auto !important; } /* ===== 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='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 3l14 8-6 2 4 8-3 1-4-8-5 4z'/%3E%3C/svg%3E") 4 2, auto !important; } /* ===== Text spacing ===== */ html.a11y-text-spacing, html.a11y-text-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; line-height: 1.8 !important; } /* ===== Image alt text display ===== */ html.a11y-show-alt .a11y-alt-overlay { display: flex !important; } .a11y-alt-overlay { display: none; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 14px; padding: 6px 10px; text-align: center; align-items: center; justify-content: center; pointer-events: none; z-index: 10; font-family: Arial, Helvetica, sans-serif; } /* ===== Panel open/close transition ===== */ .a11y-panel-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; } .a11y-panel-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; } .a11y-panel-enter-from, .a11y-panel-leave-to { opacity: 0; transform: translateY(12px); }