/* ========================================= WCAG 2.2 CONTACT PAGE FIXES ========================================= */ /* 1. Form Inputs (Placeholders as Labels) */ /* Must meet 4.5:1 because there are no visible labels */ .form-control::placeholder { color: #4a4a4a !important; /*~7:1 Contrast */ opacity: 1; } /* 2. Input Borders (UI Components) */ /* Must meet 3:1 Contrast */ .form-control { border-color: #767676 !important; } .form-control:focus { border-color: var(--primary-color) !important; } /* 3. Validation Errors */ /* Previous: #E65757 (~3.3:1 Fail) -> New: #D32F2F (Pass) */ .help-block.with-errors ul li { color: #D32F2F !important; } /* 4. Page Header Contrast */ .page-header-box h1, .breadcrumb-item a, .breadcrumb-item.active { text-shadow: 0 1px 3px rgba(0,0,0,0.8); color: var(--white-color) !important; /* Ensure white text */ } /* ========================================= WCAG 2.2 VISIBLE FOCUS INDICATORS ========================================= */ /* 1. KEYBOARD FOCUS (WCAG PINK RING) */ /* Only active when the user has pressed 'Tab' */ body.user-is-tabbing .form-control:focus, body.user-is-tabbing .btn-default:focus { outline: 4px solid #ff3399 !important; /* Vibrant Pink */ outline-offset: 4px !important; box-shadow: 0 0 0 10px rgba(255, 51, 153, 0.15) !important; border-color: #ff3399 !important; z-index: 5 !important; position: relative !important; } /* 2. MOUSE/TOUCH FOCUS (RESTORE BRAND BLUE) */ .form-control:focus, .btn-default:focus { box-shadow: none !important; border-color: var(--primary-color) !important; border-width: 1px !important; } /* Links (Support Button, Appointment Button) - High Contrast */ .support-btn:focus, .support-btn:focus-visible, .section-btn a:focus, .section-btn a:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0, 123, 255, 0.6), 0 0 12px rgba(0, 123, 255, 0.9) !important; } /* FAQ Accordion Buttons - Thick, Visible Focus */ .accordion-button:focus, .accordion-button:focus-visible { outline: 3px solid #007bff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.4), 0 0 8px rgba(0, 123, 255, 0.7) !important; z-index: 10 !important; } /* Prevent Focus Clipping on Accordion */ .accordion-item { position: relative !important; overflow: visible !important; } .faq-accordion { overflow: visible !important; } /* Google Map Iframe - Visible Focus */ .google-map-iframe iframe:focus, .google-map-iframe iframe:focus-visible { outline: 3px solid #007bff !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0, 123, 255, 0.5) !important; } /* Ensure Focus Rings Are Never Clipped */ .contact-us-form, .contact-information, .contact-faqs-content, .about-faq-section { overflow: visible !important; } /* 5. Dark Contrast Mode Fixes */ html[data-contrast="dark"] .google-map, html[data-contrast="dark"] .google-map-iframe { background-color: #000000 !important; } html[data-contrast="dark"] .google-map-iframe h2 { color: #ffffff !important; } html[data-contrast="dark"] .google-map-iframe p { color: rgba(255, 255, 255, 0.9) !important; } /* 6. Light Contrast Mode Fixes */ html[data-contrast="light"] .google-map-iframe img { filter: brightness(0) !important; } /* ========================================= WCAG 2.2 TEXT SCALING (AAA) ========================================= */ /* Level 1: +25% Text Size */ body.acc-text-x1 .section-title h2, body.acc-text-x1 .google-map-iframe h2 { font-size: 2.8rem !important; } body.acc-text-x1 .section-title .sub-title { font-size: 1.2rem !important; } body.acc-text-x1 .contact-info-list p, body.acc-text-x1 .google-map-iframe p { font-size: 1.3rem !important; } body.acc-text-x1 .contact-info-item h3 { font-size: 1.5rem !important; } body.acc-text-x1 .accordion-button { font-size: 1.4rem !important; } body.acc-text-x1 .accordion-body p { font-size: 1.2rem !important; } /* Level 2: +50% Text Size */ body.acc-text-x2 .section-title h2, body.acc-text-x2 .google-map-iframe h2 { font-size: 3.2rem !important; } body.acc-text-x2 .section-title .sub-title { font-size: 1.4rem !important; } body.acc-text-x2 .contact-info-list p, body.acc-text-x2 .google-map-iframe p { font-size: 1.5rem !important; } body.acc-text-x2 .contact-info-item h3 { font-size: 1.8rem !important; } body.acc-text-x2 .accordion-button { font-size: 1.7rem !important; } body.acc-text-x2 .accordion-body p { font-size: 1.4rem !important; } /* Level 3: +100% Text Size (Extreme) */ body.acc-text-x3 .section-title h2, body.acc-text-x3 .google-map-iframe h2 { font-size: 4rem !important; } body.acc-text-x3 .section-title .sub-title { font-size: 1.7rem !important; } body.acc-text-x3 .contact-info-list p, body.acc-text-x3 .google-map-iframe p { font-size: 1.8rem !important; } body.acc-text-x3 .contact-info-item h3 { font-size: 2.2rem !important; } body.acc-text-x3 .accordion-button { font-size: 2.1rem !important; } body.acc-text-x3 .accordion-body p { font-size: 1.8rem !important; } /* Ensure container height adjusts for larger text */ body.acc-text-x1 .google-map-iframe, body.acc-text-x2 .google-map-iframe, body.acc-text-x3 .google-map-iframe { height: auto !important; min-height: 450px; padding-top: 50px; padding-bottom: 50px; } /* ============================================================================ WCAG 2.2 AAA TOAST NOTIFICATION ============================================================================ */ .wcag-toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 105000; pointer-events: none; } .wcag-toast { background-color: var(--primary-color); color: var(--white-color); padding: 16px 24px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); display: flex; align-items: center; gap: 15px; border-left: 6px solid #28a745; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; pointer-events: auto; } .wcag-toast.show { opacity: 1; visibility: visible; transform: translateY(0); } .wcag-toast-icon { font-size: 24px; color: #28a745; } .wcag-toast-text { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.4; } .wcag-toast-close { background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: 20px; cursor: pointer; padding: 5px; margin-left: 10px; transition: color 0.2s; } .wcag-toast-close:hover { color: var(--white-color); }