/** * CaltransBizConnect Accessibility Widget Styles * WCAG 2.1 AA Compliant - Section 508 Compliant * * Contains: * 1. Widget UI (button + panel) * 2. CSS modifier classes applied to by the widget * 3. Sitewide accessibility overrides */ /* ============================================ 1. WIDGET TRIGGER BUTTON ============================================ */ .a11y-trigger { position: fixed; bottom: 24px; right: 24px; z-index: 99999; width: 56px; height: 56px; border-radius: 50%; background: #005A8C; color: #ffffff; border: 3px solid #ffffff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: background 0.2s, transform 0.2s; font-family: Arial, sans-serif; line-height: 1; } .a11y-trigger:hover { background: #003D5C; transform: scale(1.08); } .a11y-trigger:focus { outline: 3px solid #FFCC00; outline-offset: 3px; } .a11y-trigger[aria-expanded="true"] { background: #003D5C; } .a11y-trigger-icon { pointer-events: none; display: flex; align-items: center; justify-content: center; } /* ============================================ 2. WIDGET PANEL ============================================ */ .a11y-panel { position: fixed; bottom: 92px; right: 24px; z-index: 99998; width: 320px; max-height: calc(100vh - 120px); background: #ffffff; border: 2px solid #005A8C; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); overflow-y: auto; font-family: Arial, Calibri, sans-serif; font-size: 14px; color: #000000; display: none; } .a11y-panel.a11y-panel-open { display: block; animation: a11ySlideIn 0.2s ease-out; } @keyframes a11ySlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; background: #005A8C; color: #ffffff; border-radius: 10px 10px 0 0; position: sticky; top: 0; z-index: 1; } .a11y-panel-title { font-size: 15px; font-weight: 700; margin: 0; color: #ffffff; } .a11y-panel-shortcut { font-size: 11px; opacity: 0.85; margin-top: 2px; color: #ffffff; } .a11y-close-btn { background: transparent; border: 2px solid rgba(255, 255, 255, 0.6); color: #ffffff; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; font-family: Arial, sans-serif; line-height: 1; } .a11y-close-btn:hover { background: rgba(255, 255, 255, 0.2); } .a11y-close-btn:focus { outline: 2px solid #FFCC00; outline-offset: 2px; } /* ============================================ 3. WIDGET SECTIONS ============================================ */ .a11y-section { padding: 14px 16px; border-bottom: 1px solid #e0e0e0; } .a11y-section:last-of-type { border-bottom: none; } .a11y-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #005A8C; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .a11y-section-title::before { content: ''; display: inline-block; width: 3px; height: 14px; background: #FFCC00; border-radius: 2px; } /* ============================================ 4. CONTROL ROWS (label + controls) ============================================ */ .a11y-control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .a11y-control-row:last-child { margin-bottom: 0; } .a11y-control-label { font-size: 13px; font-weight: 500; color: #000000; flex: 1 1 auto; min-width: 0; } /* ============================================ 5. BUTTON GROUPS (segmented controls) ============================================ */ .a11y-btn-group { display: flex; gap: 3px; flex-shrink: 0; } .a11y-btn { background: #f5f5f5; border: 1.5px solid #cccccc; color: #000000; border-radius: 5px; padding: 4px 9px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.15s, border-color 0.15s; white-space: nowrap; min-height: 30px; } .a11y-btn:hover { background: #e0e0e0; border-color: #999999; } .a11y-btn:focus { outline: 2px solid #005A8C; outline-offset: 2px; } .a11y-btn[aria-pressed="true"], .a11y-btn.a11y-active { background: #005A8C; border-color: #005A8C; color: #ffffff; } .a11y-btn[aria-pressed="true"]:hover, .a11y-btn.a11y-active:hover { background: #003D5C; border-color: #003D5C; } /* ============================================ 6. TOGGLE SWITCHES ============================================ */ .a11y-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; } .a11y-toggle input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .a11y-toggle-track { position: absolute; inset: 0; background: #cccccc; border-radius: 12px; cursor: pointer; transition: background 0.2s; border: 2px solid transparent; } .a11y-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s; } .a11y-toggle input:checked + .a11y-toggle-track { background: #005A8C; } .a11y-toggle input:checked + .a11y-toggle-track::after { transform: translateX(20px); } .a11y-toggle input:focus + .a11y-toggle-track { outline: 2px solid #005A8C; outline-offset: 2px; border-color: #005A8C; } /* ============================================ 7. TEXT SIZE STEPPER ============================================ */ .a11y-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .a11y-stepper-btn { background: #f5f5f5; border: 1.5px solid #cccccc; color: #000000; border-radius: 5px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; transition: background 0.15s; line-height: 1; } .a11y-stepper-btn:hover { background: #e0e0e0; border-color: #999999; } .a11y-stepper-btn:focus { outline: 2px solid #005A8C; outline-offset: 2px; } .a11y-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; } .a11y-stepper-value { font-size: 13px; font-weight: 600; color: #000000; min-width: 42px; text-align: center; } /* ============================================ 8. RESET BUTTON ============================================ */ .a11y-reset-btn { display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 10px; background: transparent; border: 2px solid #C62828; color: #C62828; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.15s, color 0.15s; text-align: center; } .a11y-reset-btn:hover { background: #C62828; color: #ffffff; } .a11y-reset-btn:focus { outline: 2px solid #C62828; outline-offset: 2px; } /* ============================================ 9. READING GUIDE ============================================ */ .a11y-reading-guide { position: fixed; left: 0; right: 0; height: 60px; background: rgba(255, 255, 170, 0.5); border-top: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 99990; display: none; } .a11y-reading-guide.a11y-reading-guide-active { display: block; } /* ============================================ 10. LIVE ANNOUNCER (screen reader only) ============================================ */ .a11y-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================ 11. CSS MODIFIER CLASSES (applied to ) ============================================ */ /* --- Stop Animations --- */ html.a11y-no-animations *, html.a11y-no-animations *::before, html.a11y-no-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.a11y-no-animations .reveal-fade, html.a11y-no-animations .reveal-slide-up, html.a11y-no-animations .reveal-slide-left, html.a11y-no-animations .reveal-slide-right { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } /* --- Keyboard Navigation Mode (enhanced focus) --- */ html.a11y-keyboard-mode *:focus { outline: 3px solid #FF6600 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.25) !important; } /* --- Highlight Links --- */ html.a11y-highlight-links a, html.a11y-highlight-links [role="link"] { background: #FFFF99 !important; color: #000080 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; padding: 0 2px !important; border-radius: 2px !important; } /* --- Highlight Headings --- */ html.a11y-highlight-headings h1, html.a11y-highlight-headings h2, html.a11y-highlight-headings h3, html.a11y-highlight-headings h4, html.a11y-highlight-headings h5, html.a11y-highlight-headings h6 { outline: 2px solid #005A8C !important; outline-offset: 2px !important; background: rgba(0, 90, 140, 0.06) !important; padding: 4px 6px !important; border-radius: 3px !important; } /* --- Hide Images --- */ html.a11y-hide-images img, html.a11y-hide-images [role="img"] { visibility: hidden !important; } html.a11y-hide-images img::after { content: attr(alt); display: block; visibility: visible; font-size: 12px; color: #555; font-style: italic; text-align: center; } /* --- Grayscale --- */ html.a11y-grayscale { filter: grayscale(100%) !important; } /* --- High Contrast Mode --- */ html.a11y-contrast-high { filter: none !important; } html.a11y-contrast-high body { background: #ffffff !important; color: #000000 !important; } html.a11y-contrast-high a { color: #0000cc !important; text-decoration: underline !important; } html.a11y-contrast-high a:visited { color: #551a8b !important; } html.a11y-contrast-high button, html.a11y-contrast-high .btn { border: 2px solid #000000 !important; } html.a11y-contrast-high input, html.a11y-contrast-high select, html.a11y-contrast-high textarea { border: 2px solid #000000 !important; background: #ffffff !important; color: #000000 !important; } html.a11y-contrast-high .site-header, html.a11y-contrast-high .site-footer { background: #000000 !important; color: #ffffff !important; } html.a11y-contrast-high .site-header a, html.a11y-contrast-high .site-footer a { color: #ffff00 !important; } html.a11y-contrast-high .hero { background: #000000 !important; color: #ffffff !important; } html.a11y-contrast-high .btn-primary { background: #000000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } html.a11y-contrast-high .btn-secondary { background: #ffff00 !important; color: #000000 !important; border: 2px solid #000000 !important; } /* --- Dark Mode --- */ html.a11y-contrast-dark { filter: none !important; } html.a11y-contrast-dark body { background: #1a1a1a !important; color: #e8e8e8 !important; } html.a11y-contrast-dark .site-header { background: #0a0a0a !important; } html.a11y-contrast-dark .site-footer { background: #0a0a0a !important; } html.a11y-contrast-dark .auth-card, html.a11y-contrast-dark .card, html.a11y-contrast-dark .pathway-card, html.a11y-contrast-dark .action-tile, html.a11y-contrast-dark .opportunity-card { background: #2d2d2d !important; color: #e8e8e8 !important; border-color: #444444 !important; } html.a11y-contrast-dark input, html.a11y-contrast-dark select, html.a11y-contrast-dark textarea { background: #2d2d2d !important; color: #e8e8e8 !important; border-color: #666666 !important; } html.a11y-contrast-dark a { color: #6ab4f5 !important; } html.a11y-contrast-dark h1, html.a11y-contrast-dark h2, html.a11y-contrast-dark h3, html.a11y-contrast-dark h4, html.a11y-contrast-dark h5, html.a11y-contrast-dark h6 { color: #e8e8e8 !important; } /* --- Line Height --- */ html.a11y-line-height-relaxed body, html.a11y-line-height-relaxed p, html.a11y-line-height-relaxed li, html.a11y-line-height-relaxed td { line-height: 1.8 !important; } html.a11y-line-height-loose body, html.a11y-line-height-loose p, html.a11y-line-height-loose li, html.a11y-line-height-loose td { line-height: 2.2 !important; } /* --- Letter Spacing --- */ html.a11y-letter-spacing-wide body, html.a11y-letter-spacing-wide p, html.a11y-letter-spacing-wide li, html.a11y-letter-spacing-wide a { letter-spacing: 0.05em !important; } html.a11y-letter-spacing-wider body, html.a11y-letter-spacing-wider p, html.a11y-letter-spacing-wider li, html.a11y-letter-spacing-wider a { letter-spacing: 0.12em !important; } /* --- Dyslexia-Friendly Font --- */ html.a11y-dyslexic-font body, html.a11y-dyslexic-font p, html.a11y-dyslexic-font li, html.a11y-dyslexic-font a, html.a11y-dyslexic-font button, html.a11y-dyslexic-font input, html.a11y-dyslexic-font label, html.a11y-dyslexic-font td, html.a11y-dyslexic-font th { font-family: 'Verdana', 'Comic Sans MS', 'Trebuchet MS', sans-serif !important; word-spacing: 0.1em !important; } /* ============================================ 12. SITEWIDE ACCESSIBILITY IMPROVEMENTS (always active, not widget-controlled) ============================================ */ /* Respect prefers-reduced-motion at the OS level */ @media (prefers-reduced-motion: reduce) { .reveal-fade, .reveal-slide-up, .reveal-slide-left, .reveal-slide-right { opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* External link announcement for screen readers */ a[target="_blank"]::after { content: ' (opens in new window)'; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ensure touch targets are large enough (44x44px) */ button, [role="button"], input[type="checkbox"], input[type="radio"], select { min-height: 44px; } input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; } /* ============================================ 13. MOBILE ADJUSTMENTS FOR WIDGET ============================================ */ @media (max-width: 480px) { .a11y-panel { width: calc(100vw - 32px); right: 16px; bottom: 88px; } .a11y-trigger { bottom: 16px; right: 16px; } }