/* ========================================================================== Accessibility Widget — Parsippany-Troy Hills Self-contained styles for the accessibility toggle button + panel and every accessibility "mode" it can apply to . ========================================================================== */ /* ---------- Floating toggle button ---------- */ .a11y-toggle { position: fixed; left: 20px; bottom: 20px; z-index: 9998; width: 52px; height: 52px; border-radius: 50%; background: #112d38; color: rgb(200, 130, 42); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, background 0.2s ease; } .a11y-toggle:hover, .a11y-toggle:focus-visible { transform: scale(1.1) translateY(-2px); background: #1e3a5f; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .a11y-toggle svg { width: 26px; height: 26px; } /* ---------- Backdrop ---------- */ .a11y-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .a11y-backdrop.active { opacity: 1; pointer-events: auto; } /* ---------- Panel ---------- */ .a11y-panel { position: fixed; top: 0; left: -380px; width: 360px; max-width: 90vw; height: 100%; background: #fff; z-index: 10000; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; transition: left 0.28s ease; font-family: 'Inter', system-ui, sans-serif; } .a11y-panel.open { left: 0; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: #112d38; color: rgb(200, 130, 42); } .a11y-panel-header h2 { font-size: 18px; margin: 0; font-family: 'Outfit', sans-serif; font-weight: 600; } .a11y-panel-close { background: rgba(255, 255, 255, 0.15); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .a11y-panel-close:hover { background: rgba(255, 255, 255, 0.3); } .a11y-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; scrollbar-width:thin; } .a11y-reset-row { padding: 4px 0 16px; } .a11y-reset-btn { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #d0d5dd; background: #f8f9fb; color: #1a1a1a; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .a11y-reset-btn:hover { background: #eef1f5; } .a11y-group { margin-bottom: 18px; } .a11y-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #667085; font-weight: 600; margin: 0 0 8px; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border-radius: 10px; border: 1.5px solid #e4e7ec; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 500; color: #1a1a1a; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; min-height: 76px; } .a11y-btn svg { width: 20px; height: 20px; stroke: #344054; } .a11y-btn:hover { border-color: #0b5ed7; } .a11y-btn.active { background: #eaf1ff; border-color: #0b5ed7; color: #0b5ed7; } .a11y-btn.active svg { stroke: #0b5ed7; } .a11y-stepper { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid #e4e7ec; border-radius: 10px; padding: 8px 12px; } .a11y-stepper span { font-size: 13px; font-weight: 500; } .a11y-stepper-controls { display: flex; align-items: center; gap: 10px; } .a11y-stepper-controls button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d0d5dd; background: #f8f9fb; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .a11y-stepper-controls button:hover { background: #eef1f5; } .a11y-stepper-value { min-width: 34px; text-align: center; font-size: 13px; font-weight: 600; } .a11y-theme-row { display: flex; gap: 10px; } .a11y-theme-swatch { flex: 1; border-radius: 10px; border: 1.5px solid #e4e7ec; padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; } .a11y-theme-swatch.active { border-color: #0b5ed7; } .a11y-theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); } .a11y-panel-footer { padding: 12px 20px; border-top: 1px solid #eef0f2; font-size: 11.5px; color: #8a94a3; text-align: center; } @media (max-width: 480px) { .a11y-toggle { left: 14px; bottom: 14px; width: 46px; height: 46px; } } /* ========================================================================== MODES — applied via classes on ========================================================================== */ /* Font size is now applied via page zoom (see accessibility.js applyFontSize), which scales every element uniformly regardless of its CSS unit — so no font-size classes are needed here anymore. */ /* ----- Letter / line spacing ----- */ html.a11y-spacing * { letter-spacing: 0.03em !important; word-spacing: 0.08em !important; line-height: 1.7 !important; } /* ----- Readable / dyslexia-friendly font ----- */ html.a11y-readable-font body, html.a11y-readable-font body * { font-family: Verdana, Tahoma, 'Trebuchet MS', Arial, sans-serif !important; } /* ----- Highlight links ----- */ html.a11y-highlight-links a { background-color: #fff176 !important; color: #1a1a1a !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; border-radius: 2px; padding: 0 2px; } /* ----- Underline all links ----- */ html.a11y-underline-links a { text-decoration: underline !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 { background-color: #d7ecff !important; color: #052c65 !important; padding: 2px 6px; border-left: 4px solid #0b5ed7; } /* ----- High contrast ----- */ html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast a { color: #ffff00 !important; } html.a11y-contrast img, html.a11y-contrast svg { filter: grayscale(0) contrast(1.2); } /* ----- Dark theme (softer than full high-contrast) ----- */ html.a11y-theme-dark body { background: #14171c !important; color: #e7e9ec !important; } html.a11y-theme-dark body :not(img):not(svg):not(.fab):not(.a11y-toggle) { background-color: transparent; } html.a11y-theme-dark header, html.a11y-theme-dark footer, html.a11y-theme-dark .container-fluid, html.a11y-theme-dark main { background-color: #14171c !important; color: #e7e9ec !important; } html.a11y-theme-dark a { color: #8ab4ff !important; } /* ----- Sepia theme (warm, low glare) ----- */ html.a11y-theme-sepia body { background: #f4ecd8 !important; color: #3b2f1e !important; } html.a11y-theme-sepia header, html.a11y-theme-sepia footer, html.a11y-theme-sepia .container-fluid, html.a11y-theme-sepia main { background-color: #f4ecd8 !important; color: #3b2f1e !important; } /* ----- Grayscale ----- */ html.a11y-grayscale { filter: grayscale(100%); } /* ----- Invert colors ----- */ html.a11y-invert { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert svg, html.a11y-invert video, html.a11y-invert picture { filter: invert(100%) hue-rotate(180deg); } /* ----- Pause animations / reduce motion ----- */ html.a11y-pause-animations *, html.a11y-pause-animations *::before, html.a11y-pause-animations *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } /* ----- Big cursor ----- */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } /* ----- Reading guide bar ----- */ .a11y-reading-guide { position: fixed; left: 0; width: 100%; height: 34px; background: rgba(255, 235, 59, 0.35); border-top: 2px solid #fbc02d; border-bottom: 2px solid #fbc02d; pointer-events: none; z-index: 9997; display: none; } html.a11y-reading-guide-on .a11y-reading-guide { display: block; } /* ----- Hide images (for cognitive load reduction) ----- */ html.a11y-hide-images img, html.a11y-hide-images picture, html.a11y-hide-images video { visibility: hidden !important; } /* ----- Focus outline booster ----- */ html.a11y-focus-outline *:focus { outline: 3px solid #ff5722 !important; outline-offset: 2px !important; }