/* ========================================================================== Accessibility / Display Tools - Footer button (#a11yToggle) opens a small popover panel (#a11yPanel) - Three controls: text size, high contrast, reduce motion - Prefs saved to localStorage under "cypress-a11y", applied via html.a11y-* - Hardcoded color values so this file works on any page regardless of which CSS variables that page defines. ========================================================================== */ .a11y-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #E0E0E0; color: #757575; padding: 4px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.2s; } .a11y-toggle:hover { border-color: #93C356; color: #486E21; background: #F1F6E5; } .a11y-toggle svg { color: currentColor; } .a11y-panel { position: fixed; bottom: 24px; left: 24px; width: 320px; max-width: calc(100vw - 48px); background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); padding: 20px; z-index: 199; font-family: inherit; color: #424242; } .a11y-panel[hidden] { display: none; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .a11y-panel-header h2 { font-size: 15px; font-weight: 600; color: #3A581A; margin: 0; letter-spacing: 0; font-family: inherit; } .a11y-close { background: none; border: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #9E9E9E; border-radius: 8px; font-size: 20px; line-height: 1; font-family: inherit; } .a11y-close:hover { color: #212121; background: #F5F5F5; } .a11y-group { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #F5F5F5; } .a11y-group:first-of-type { border-top: none; padding-top: 4px; } .a11y-group-label { font-size: 13px; font-weight: 500; color: #616161; } .a11y-sizes { display: inline-flex; gap: 2px; border: 1px solid #EEEEEE; border-radius: 9999px; padding: 2px; } .a11y-sizes button { background: transparent; border: none; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #757575; cursor: pointer; border-radius: 9999px; font-family: inherit; transition: background 0.2s, color 0.2s; } .a11y-sizes button[aria-pressed="true"] { background: #3A581A; color: #FFFFFF; } .a11y-sizes button:nth-child(2) { font-size: 13px; } .a11y-sizes button:nth-child(3) { font-size: 15px; } .a11y-switch { position: relative; width: 40px; height: 22px; background: #E0E0E0; border: none; border-radius: 9999px; cursor: pointer; padding: 0; transition: background 0.2s; } .a11y-switch[aria-checked="true"] { background: #3A581A; } .a11y-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #FFFFFF; border-radius: 50%; transition: transform 0.2s; } .a11y-switch[aria-checked="true"]::after { transform: translateX(18px); } .a11y-reset { width: 100%; margin-top: 14px; padding: 8px; background: #F5F5F5; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: #616161; cursor: pointer; font-family: inherit; transition: background 0.2s; } .a11y-reset:hover { background: #EEEEEE; } /* ========================================================================== Applied modes — set on by the controller ========================================================================== */ html.a11y-text-1 { font-size: 112.5%; } html.a11y-text-2 { font-size: 125%; } html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* Universal high contrast: white bg, black text, blue underlined links */ html.a11y-contrast body { background: #FFFFFF; color: #000000; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4 { color: #000000; } html.a11y-contrast a:not(.btn):not(.nav-cta):not(.mobile-nav-cta):not(.a11y-toggle) { color: #0000EE; text-decoration: underline; } /* Index-page specific overrides for the dark colored sections */ html.a11y-contrast .hero, html.a11y-contrast .services, html.a11y-contrast .doctor, html.a11y-contrast .cta-banner, html.a11y-contrast .insurance, html.a11y-contrast .trust-bar { background: #000000; color: #FFFFFF; } html.a11y-contrast .hero h1, html.a11y-contrast .services .section-title, html.a11y-contrast .doctor .section-title, html.a11y-contrast .cta-inner h2, html.a11y-contrast .insurance .section-title { color: #FFFF00; } html.a11y-contrast .hero h1 em { color: #FFFF00; -webkit-text-fill-color: #FFFF00; background: none; } html.a11y-contrast .hero-subtitle, html.a11y-contrast .services .section-subtitle, html.a11y-contrast .insurance .section-subtitle, html.a11y-contrast .cta-inner p, html.a11y-contrast .trust-label, html.a11y-contrast .trust-desc { color: #FFFFFF; } html.a11y-contrast .btn-primary, html.a11y-contrast .nav-cta, html.a11y-contrast .mobile-nav-cta { background: #FFFF00 !important; color: #000000 !important; border: 2px solid #000000 !important; box-shadow: none !important; } html.a11y-contrast header { background: #FFFFFF; border-bottom: 2px solid #000000; } html.a11y-contrast .service-card, html.a11y-contrast .doctor-card { border: 2px solid #000000; }