/* ============================================================ Yeled v'Yalda — Accessibility Toolbar Widget styles + page-level effect classes (applied to ) ============================================================ */ /* ---- Floating toolbar container ---- */ #a11y-toolbar { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: normal; isolation: isolate; } /* ---- Panel (appears above the FAB button) ---- */ #a11y-panel { display: none; width: 300px; background: #ffffff; border: 2px solid #37265B; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); margin-bottom: 10px; max-height: calc(100vh - 110px); overflow-y: auto; color: #1a1a1a; } #a11y-panel.is-open { display: block; } .a11y-panel-inner { padding: 16px; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #37265B; padding-bottom: 10px; margin-bottom: 14px; } .a11y-panel-title { font-size: 15px; font-weight: 700; color: #37265B; margin: 0; } .a11y-panel-reset { font-size: 12px; color: #0060c0; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 4px 6px; border-radius: 3px; font-family: inherit; line-height: 1.4; } .a11y-panel-reset:hover, .a11y-panel-reset:focus-visible { background: #e8f0fe; outline: 2px solid #0060c0; outline-offset: 1px; text-decoration: none; } /* ---- Sections ---- */ .a11y-section { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #e8e8e8; } .a11y-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .a11y-section-label { display: block; font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; } /* ---- Stepper controls (font size, line height, letter spacing) ---- */ .a11y-stepper { display: flex; align-items: center; gap: 8px; } .a11y-stepper-btn { flex-shrink: 0; width: 34px; height: 34px; border: 2px solid #37265B; background: #ffffff; color: #37265B; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; font-family: inherit; padding: 0; line-height: 1; } .a11y-stepper-btn:hover, .a11y-stepper-btn:focus-visible { background: #37265B; color: #ffffff; } .a11y-stepper-btn:focus-visible { outline: 2px solid #ffbb00; outline-offset: 2px; } .a11y-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .a11y-stepper-btn:disabled:hover { background: #ffffff; color: #37265B; } .a11y-stepper-value { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: #333; min-width: 0; } /* ---- Theme buttons ---- */ .a11y-theme-buttons { display: flex; gap: 6px; } .a11y-theme-btn { flex: 1; padding: 7px 4px; border: 2px solid #d0d0d0; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; text-align: center; line-height: 1.3; transition: border-color 0.15s; font-family: inherit; } .a11y-theme-btn--light { background: #f5f5f5; color: #333; } .a11y-theme-btn--dark { background: #1a1a2e; color: #dde1e7; border-color: #444; } .a11y-theme-btn--hc { background: #000000; color: #ffffff; border-color: #555; } .a11y-theme-btn:hover, .a11y-theme-btn:focus-visible { border-color: #37265B; } .a11y-theme-btn:focus-visible { outline: 2px solid #ffbb00; outline-offset: 1px; } .a11y-theme-btn[aria-pressed="true"] { border-color: #37265B; box-shadow: 0 0 0 2px #37265B; } .a11y-theme-btn--dark[aria-pressed="true"] { border-color: #4abab8; box-shadow: 0 0 0 2px #4abab8; } .a11y-theme-btn--hc[aria-pressed="true"] { border-color: #ffff00; box-shadow: 0 0 0 2px #ffff00; } /* ---- Toggle rows (boolean features) ---- */ .a11y-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .a11y-toggle-row:last-child { margin-bottom: 0; } .a11y-toggle-label { flex: 1; font-size: 13px; color: #333; cursor: pointer; user-select: none; line-height: 1.4; } /* Custom switch */ .a11y-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .a11y-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .a11y-switch-track { position: absolute; inset: 0; background: #bbb; border-radius: 24px; transition: background 0.2s; cursor: pointer; } .a11y-switch-track::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .a11y-switch input:checked + .a11y-switch-track { background: #37265B; } .a11y-switch input:checked + .a11y-switch-track::before { transform: translateX(18px); } .a11y-switch input:focus-visible + .a11y-switch-track { outline: 2px solid #ffbb00; outline-offset: 2px; } /* ---- FAB toggle button ---- */ #a11y-fab { width: 52px; height: 52px; border-radius: 50%; background: #37265B; color: #ffffff; border: 3px solid #ffffff; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s; padding: 0; position: relative; } #a11y-fab:hover { background: #4b1469; transform: scale(1.06); } #a11y-fab:focus-visible { outline: 3px solid #ffbb00; outline-offset: 3px; } #a11y-fab svg { width: 26px; height: 26px; fill: currentColor; display: block; flex-shrink: 0; } /* Tooltip label */ #a11y-fab::after { content: 'Accessibility'; position: absolute; right: 58px; top: 50%; transform: translateY(-50%); background: #37265B; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } #a11y-fab:hover::after, #a11y-fab:focus-visible::after { opacity: 1; } /* ============================================================ Page-level effect classes — applied to element ============================================================ */ /* --- Font size scale (7 levels, 3 = default 100%) --- */ html.a11y-font-size-1 { font-size: 80% !important; } html.a11y-font-size-2 { font-size: 88% !important; } html.a11y-font-size-4 { font-size: 112% !important; } html.a11y-font-size-5 { font-size: 125% !important; } html.a11y-font-size-6 { font-size: 140% !important; } html.a11y-font-size-7 { font-size: 160% !important; } /* --- Line height scale (5 levels, 3 = default) --- */ html.a11y-line-height-1 body { line-height: 1.2 !important; } html.a11y-line-height-2 body { line-height: 1.4 !important; } html.a11y-line-height-4 body { line-height: 1.9 !important; } html.a11y-line-height-5 body { line-height: 2.3 !important; } /* --- Letter spacing scale (5 levels, 2 = default Normal) --- */ html.a11y-letter-spacing-1 body { letter-spacing: -0.02em !important; } html.a11y-letter-spacing-3 body { letter-spacing: 0.06em !important; } html.a11y-letter-spacing-4 body { letter-spacing: 0.12em !important; } html.a11y-letter-spacing-5 body { letter-spacing: 0.18em !important; } /* --- Dyslexia-friendly font (Lexend, loaded dynamically) --- */ html.a11y-dyslexia-font body, html.a11y-dyslexia-font h1, html.a11y-dyslexia-font h2, html.a11y-dyslexia-font h3, html.a11y-dyslexia-font h4, html.a11y-dyslexia-font h5, html.a11y-dyslexia-font h6, html.a11y-dyslexia-font p, html.a11y-dyslexia-font li, html.a11y-dyslexia-font a, html.a11y-dyslexia-font button, html.a11y-dyslexia-font label, html.a11y-dyslexia-font input, html.a11y-dyslexia-font textarea, html.a11y-dyslexia-font select { font-family: 'Lexend', sans-serif !important; } /* --- Grayscale --- */ html.a11y-grayscale body { filter: grayscale(100%); } /* --- Reduce motion --- */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* --- Highlight links --- */ html.a11y-highlight-links a:not([role="button"]):not(.btn):not(.navbar-brand):not(.a11y-theme-btn) { background-color: #fef08a !important; color: #1a1a1a !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; padding: 0 2px !important; border-radius: 2px !important; box-shadow: none !important; } /* --- Enhanced focus indicators --- */ html.a11y-highlight-focus *:focus-visible { outline: 3px solid #ff6600 !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.22) !important; } /* --- High contrast --- */ html.a11y-high-contrast body { background: #ffffff !important; color: #000000 !important; } html.a11y-high-contrast *:not(#a11y-toolbar):not(#a11y-toolbar *):not(.btn) { background-color: transparent !important; border-color: #000000 !important; } html.a11y-high-contrast a:not(#a11y-toolbar a) { color: #0000cc !important; text-decoration: underline !important; } html.a11y-high-contrast p, html.a11y-high-contrast span, html.a11y-high-contrast li, html.a11y-high-contrast td, html.a11y-high-contrast th, html.a11y-high-contrast label { color: #000000 !important; } html.a11y-high-contrast h1, html.a11y-high-contrast h2, html.a11y-high-contrast h3, html.a11y-high-contrast h4, html.a11y-high-contrast h5, html.a11y-high-contrast h6 { color: #000000 !important; } html.a11y-high-contrast .btn:not(#a11y-toolbar .btn) { background: #000000 !important; color: #ffffff !important; border: 2px solid #000000 !important; } html.a11y-high-contrast img { filter: contrast(110%); } /* --- Dark mode --- */ html.a11y-dark-mode { color-scheme: dark; } html.a11y-dark-mode body { background-color: #1a1a2e !important; color: #dde1e7 !important; } html.a11y-dark-mode .navbar, html.a11y-dark-mode .navbar-container-fixed { background-color: #0f0f1e !important; } html.a11y-dark-mode .navbar a, html.a11y-dark-mode .navbar .nav-link { color: #dde1e7 !important; } html.a11y-dark-mode .subsite-menu { background-color: #16213e !important; } html.a11y-dark-mode .subsite-menu--sites { background-color: #16213e !important; } html.a11y-dark-mode .subsite-menu a { color: #dde1e7 !important; } html.a11y-dark-mode .card, html.a11y-dark-mode .list-group-item, html.a11y-dark-mode .accBody { background-color: #16213e !important; border-color: #2a3f5f !important; color: #dde1e7 !important; } html.a11y-dark-mode p, html.a11y-dark-mode li, html.a11y-dark-mode td, html.a11y-dark-mode th { color: #dde1e7 !important; } html.a11y-dark-mode h1, html.a11y-dark-mode h2, html.a11y-dark-mode h3, html.a11y-dark-mode h4, html.a11y-dark-mode h5, html.a11y-dark-mode h6 { color: #e8eaf6 !important; } html.a11y-dark-mode a:not(.btn):not([role="button"]):not(#a11y-toolbar a) { color: #7cc5c3 !important; } html.a11y-dark-mode .site-footer, html.a11y-dark-mode footer { background-color: #0f0f1e !important; background-image: none !important; color: #bbb !important; } html.a11y-dark-mode input, html.a11y-dark-mode textarea, html.a11y-dark-mode select { background-color: #2a3f5f !important; color: #dde1e7 !important; border-color: #4a5a7a !important; } html.a11y-dark-mode .section-heading { color: #aac8e8 !important; } /* ---- Dark mode targeted page fixes ---- */ /* M&L: banner box (.text-banner) has explicit background:white — darken it */ html.a11y-dark-mode .text-banner { background-color: #16213e !important; color: #dde1e7 !important; } /* About: banner card-header has site-bundled background:#5090d6 (blue-alt) — the bundled rule is .event-detail-banner .over-element .card .card-header { background:#5090d6 } Must target .card-header directly since .card override does not affect its child */ html.a11y-dark-mode .event-detail-banner .card-header { background-color: #16213e !important; } /* M&L: governance section white background */ html.a11y-dark-mode .governance-section { background-color: #16213e !important; } /* Contact: dept title headings must stay dark — colored dept backgrounds (teal/yellow/ red/orange/green/brown) are intentionally kept; near-white from the h2 rule fails on them */ html.a11y-dark-mode .contact-title { color: #1a1a1a !important; } /* Subsite nav: bundle CSS has per-category background rules with (0,4,0) specificity + !important (e.g. .subsite-menu--categories .subsite-menu--category[data-site-category=...].category_is_active). To beat those rules, our selector needs specificity > (0,4,0) — adding .subsite-menu--categories gives (0,4,1) which wins when both are !important. rgba(255,255,255,0.2) on dark menu bg (#16213e) → composited ~#445165; white text ≈ 8:1. This is visually lighter than inactive buttons, making the active state distinguishable. */ html.a11y-dark-mode .subsite-menu--categories .subsite-menu--category.category_is_active { background-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* High contrast: bundle gives .subsite-menu--category color:white — invisible on white HC background */ html.a11y-high-contrast .subsite-menu--category { color: #000000 !important; } /* Contact: header banner has background-image + light gray — removes image to show dark bg */ html.a11y-dark-mode .contact-header { background-color: #16213e !important; background-image: none !important; } /* Locations: loc-name has explicit dark-purple color (#37265b) — invisible on dark backgrounds */ html.a11y-dark-mode .loc-name { color: #dde1e7 !important; } /* Locations: hover state uses #eee — keep it dark so inherited near-white text stays readable */ html.a11y-dark-mode .location-content:hover { background-color: #2a3f5f !important; } /* Newsletters: section-banner has explicit #f5f5f5 background — teal links on gray fails WCAG */ html.a11y-dark-mode .section-banner { background-color: #16213e !important; border-color: #2a3f5f !important; } /* Home page: bundle sets .card-body .list-group-flush .list-group-item:hover { background:#E0E9F6 } — light blue hover is invisible-text territory on a dark card background */ html.a11y-dark-mode .card-body .list-group-flush .list-group-item:hover { background: #2a3f5f !important; } /* Contact page: .contact-social-icons li has background:#e0e0e0 — light gray button in dark mode */ html.a11y-dark-mode .contact-social-icons li { background-color: #2a3f5f !important; color: #dde1e7 !important; } /* ComingSoon/NotFound: .bgimg::before is rgba(255,255,255,0.8) white overlay — dark mode makes h2 near-white, so both text and bg become near-white. Swap to dark overlay. */ html.a11y-dark-mode .bgimg::before { background: rgba(15, 15, 30, 0.75) !important; } /* Compliance: .documentLink has #f9f9f9 background — near-white h3 text disappears on it in dark mode */ html.a11y-dark-mode .documentLink { background-color: #16213e !important; border-color: #2a3f5f !important; } /* Dark mode: btn-secondary (gray Bootstrap button) — darken to match dark theme */ html.a11y-dark-mode .btn-secondary:not(#a11y-toolbar .btn-secondary) { background-color: #2a3f5f !important; border-color: #4a5a7a !important; color: #dde1e7 !important; } /* ---- Protect toolbar from all page-level effects ---- */ html.a11y-dark-mode #a11y-panel, html.a11y-high-contrast #a11y-panel { background: #ffffff !important; color: #1a1a1a !important; border-color: #37265B !important; } html.a11y-dark-mode #a11y-panel *, html.a11y-high-contrast #a11y-panel * { color: revert !important; background-color: revert !important; border-color: revert !important; } /* Restore switch track inside the protected panel — revert makes it transparent without this */ html.a11y-dark-mode #a11y-panel .a11y-switch-track, html.a11y-high-contrast #a11y-panel .a11y-switch-track { background-color: #bbb !important; } html.a11y-dark-mode #a11y-panel input:checked + .a11y-switch-track, html.a11y-high-contrast #a11y-panel input:checked + .a11y-switch-track { background-color: #37265B !important; } /* HC: yellow/teal selection rings are invisible on white panel — use black ring instead */ html.a11y-high-contrast #a11y-panel .a11y-theme-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px #000000 !important; } html.a11y-dark-mode #a11y-fab { background: #37265B !important; color: #ffffff !important; } html.a11y-highlight-links #a11y-toolbar a { background-color: transparent !important; padding: 0 !important; } /* Panel scrollbar styling */ #a11y-panel::-webkit-scrollbar { width: 6px; } #a11y-panel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } #a11y-panel::-webkit-scrollbar-thumb { background: #37265B; border-radius: 3px; } /* ============================================================ Additional effect classes — Phase 2 ============================================================ */ /* --- Word spacing scale (5 levels, 2 = default Normal) --- */ html.a11y-word-spacing-1 body { word-spacing: -0.05em !important; } /* level 2 = default, no class */ html.a11y-word-spacing-3 body { word-spacing: 0.1em !important; } html.a11y-word-spacing-4 body { word-spacing: 0.2em !important; } html.a11y-word-spacing-5 body { word-spacing: 0.3em !important; } /* --- Force left text alignment --- */ html.a11y-left-align p, html.a11y-left-align li, html.a11y-left-align h1, html.a11y-left-align h2, html.a11y-left-align h3, html.a11y-left-align h4, html.a11y-left-align h5, html.a11y-left-align h6, html.a11y-left-align td, html.a11y-left-align th, html.a11y-left-align blockquote { text-align: left !important; } /* --- Large cursor (48 px arrow, hotspot 0 0) --- */ 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'%3E%3Cpath d='M0 0L0 30L9 22L14 36L18 34L13 20L23 20Z' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 0 0, auto !important; } /* --- Pause CSS animations (freeze at current frame; transitions still work) --- */ html.a11y-pause-animations *, html.a11y-pause-animations *::before, html.a11y-pause-animations *::after { animation-play-state: paused !important; } /* --- Hide images (keep navbar logo visible) --- */ html.a11y-hide-images img { visibility: hidden !important; } html.a11y-hide-images .navbar-brand img, html.a11y-hide-images #a11y-toolbar img { visibility: visible !important; } /* --- Reading guide overlay (horizontal band following cursor) --- */ #a11y-reading-guide { position: fixed; left: 0; right: 0; height: 60px; top: -100px; background: rgba(255, 230, 0, 0.2); border-top: 2px solid rgba(180, 140, 0, 0.45); border-bottom: 2px solid rgba(180, 140, 0, 0.45); pointer-events: none; z-index: 9998; display: none; } html.a11y-reading-guide-active #a11y-reading-guide { display: block; } html.a11y-dark-mode #a11y-reading-guide { background: rgba(80, 60, 0, 0.35); border-color: rgba(220, 170, 0, 0.55); } /* ---- Screen reader tips section ---- */ .a11y-sr-toggle { width: 100%; text-align: left; background: none; border: none; padding: 2px 0; font-size: 13px; font-weight: 700; color: #37265B; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: inherit; line-height: 1.4; border-radius: 3px; } .a11y-sr-toggle::after { content: '\25be'; font-size: 16px; transition: transform 0.2s; flex-shrink: 0; margin-left: 4px; } .a11y-sr-toggle[aria-expanded="true"]::after { transform: rotate(-180deg); } .a11y-sr-toggle:focus-visible { outline: 2px solid #ffbb00; outline-offset: 2px; } .a11y-sr-list { margin: 10px 0 0; padding: 0; } .a11y-sr-list dt { font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 0 3px; } .a11y-sr-list dt:first-child { margin-top: 0; } .a11y-sr-list dd { font-size: 11px; color: #444; margin: 0 0 3px 4px; line-height: 1.5; } .a11y-sr-list kbd { display: inline-block; padding: 1px 4px; font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace; background: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; line-height: 1.4; color: #333; } .a11y-sr-note { font-size: 11px; color: #666; font-style: italic; margin: 10px 0 0; line-height: 1.4; padding-top: 8px; border-top: 1px solid #eee; }