/* a11y.css — WCAG AA fixes for triplencleaningyork.com ========================================================================== Surface map (measured, probe_sections.js — own background-color per section): LIGHT : .services .before-after .pricing-calc .why .reviews .leave-review .faq .booking .carpet-video DARK : header.hero .areas footer Every contrast change below is guarded by `body:not(.dark-mode)` AND scoped to the light sections, so nothing can paint dark text onto navy. `.hero-sub` and `.stat-label` are white-on-navy at 17.39:1 and are deliberately untouched. Measured failures being fixed (7.5:1 target, AA is 4.5:1): #7a8fa0 on #f8fafb / #ffffff = 3.20-3.35 -> #5a6b7a = 5.25-5.50 #1a9e8f on #f8fafb / #f6f8f9 = 3.11-3.17 -> #0f766e = 5.14-5.23 #8a7340 on #f8fafb = 4.35 -> #6b5a2a = 6.43 #ffffff on #14b8a6 = 2.49 -> #ffffff on #0f766e = 5.23 rgba(255,255,255,.3) on navy = 2.68 -> .62 alpha = ~6.1 ========================================================================== */ /* ---- 1. CONTRAST: secondary body copy on light surfaces ---- Element list covers every class that computes to #7a8fa0 on a light surface: .service-desc, figcaption, .cv-note and .step-sub were each missed by the first pass, which is why the list is enumerated exhaustively here. */ body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .section-sub, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .why-desc, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .service-desc, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .reviewer-loc, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .cv-alt, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .cv-note, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .form-sub, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .form-note, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .lr-form-sub, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .step-sub, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) figcaption, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) small { color: #5a6b7a; } /* EXCEPTION — the "Most Popular" service card is NAVY, not white. Its .service-desc was already compliant at #7a8fa0 / #0d1b2a = 5.18:1, and the blanket darkening above dropped it to 3.16:1, BREAKING a card that was fine. A section-level scope is not enough when one child card inverts the surface; assert the variant, not the default. */ body:not(.dark-mode) .service-card.featured .service-desc, body:not(.dark-mode) .service-card.featured .section-sub { color: #7a8fa0; /* 5.18:1 on #0d1b2a */ } /* ---- 2. CONTRAST: eyebrow labels (gold) ---- */ body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .section-label { color: #6b5a2a; } /* ---- 3. CONTRAST: in-text links on light surfaces ---- Covers .section-sub, .faq-answer, .info-val, .cv-alt and the inline style="color:var(--teal)" anchors (inline styles need !important). */ body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .section-sub a, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .faq-answer a, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .info-val a, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .info-val, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .cv-alt a, body:not(.dark-mode) :is(.services, .before-after, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .carpet-video) .local a { color: #0f766e; } /* inline `style="color:var(--teal)"` beats a plain rule — raise specificity */ body:not(.dark-mode) :is(.services, .pricing-calc, .why, .reviews, .leave-review, .faq, .booking, .booking-section, .before-after) a[style*="teal"] { color: #0f766e !important; } body:not(.dark-mode) .section-sub a:hover, body:not(.dark-mode) .faq-answer a:hover { color: #0b5d56; } /* ---- 4. SERVICE / LOCATION PAGES (locations.css) ---- locations.css sets a bare `a { color: var(--teal) }` = 3.11:1 on the paper surface. Those pages have no .section-sub, so they need their own rule. SCOPE MATTERS: `.wrap` alone also matched anchors inside the navy `header.top` (the Call / Text buttons), dragging `.btn-quiet` from rgba(255,255,255,.82) on navy (10.4:1, compliant) down to 3.17:1 — a regression. Restrict to the content containers that actually sit on the paper surface, and re-exclude the dark header explicitly so a future wrapper change cannot re-open the hole. */ body:not(.dark-mode) main.wrap a:not(.btn):not(.brand), body:not(.dark-mode) .local a, body:not(.dark-mode) .block a:not(.btn), body:not(.dark-mode) .crumb a, body:not(.dark-mode) .foot a:not(.btn), body:not(.dark-mode) header.top .top-inner a:not(.btn):not(.brand) { color: #0f766e; } /* the navy header keeps its own compliant button colours — never touched */ body:not(.dark-mode) header.top a.btn-quiet { color: rgba(255,255,255,.82); } body:not(.dark-mode) header.top a.btn-gold { color: #0d1b2a; } /* Inline `style="color:var(--teal)"` on service-page links needs !important to beat the inline declaration — BUT a bare `main.wrap a[style*="teal"]` also swallowed the navy `.end` CTA link at equal specificity and !important, so the later `.end` rule could never win. Exclude `.end` here. */ body:not(.dark-mode) main.wrap a[style*="teal"]:not(.end *) { color: #0f766e !important; } /* ---- 4b. NAVY PANELS ON THE SERVICE PAGES ---- `.end` (the closing CTA block) is `background: var(--navy)` with white text. The rule above darkened its links to #0f766e = 3.17:1 on navy — a REGRESSION, because `a { color: var(--teal) }` was already 6.99:1 there. Same region-inverts lesson as .service-card.featured and header.top: a light-surface rule must never be allowed to reach a dark panel that happens to sit inside the same wrapper. Use the bright teal and underline for the non-colour cue. */ body:not(.dark-mode) .end a:not(.btn), body:not(.dark-mode) main.wrap .end a:not(.btn), body:not(.dark-mode) .end p.note a, body:not(.dark-mode) main.wrap .end p.note a { color: var(--teal2) !important; text-decoration: underline !important; text-underline-offset: 2px; } /* `.price-row` prices ("from $135" / "$190") inherit locations.css teal on the light paper surface = 3.11:1. Not a link problem — it is the price text. */ body:not(.dark-mode) .price-row a span, body:not(.dark-mode) .price-row span { color: #0f766e; } /* SERVICE-PAGE EXCEPTION — the `.top` header is NAVY (#0d1b2a). `a { color: var(--teal) }` from locations.css was ALREADY compliant there (teal on navy = 6.99:1), and the rule above dropped it to #0f766e on navy = 3.17:1 — a regression this page-level fix introduced. Scope is header.top ONLY. The service-page footer (.foot) is NOT navy — it sits on the light .wrap surface with color:var(--muted), so #0f766e is the correct colour there and must NOT be reverted to teal. */ body:not(.dark-mode) header.top a:not(.btn):not(.brand) { color: var(--teal); } /* The breadcrumb (.crumb) is also on the light .wrap surface, so it needs the light-safe colour stated explicitly. */ body:not(.dark-mode) nav.crumb a { color: #0f766e; } /* ---- 5. ACTIVE FAQ CATEGORY CHIP ---- White on --teal2 #14b8a6 measured 2.49:1. Darkening the chip's own background keeps white text and fixes the ratio. */ .faq-cat-btn { background: #0f766e; color: #fff; } .faq-cat-btn.active, .faq-cat-btn:hover { background: #0b5d56; color: #fff; } /* ---- 6. FOOTER micro-copy on navy ---- Three inline rgba(255,255,255,.30/.35/.40) strings measured 2.68 / 3.20 / 3.78 on #0d1b2a. A .62 alpha composites to ~6.1:1. Inline styles need !important. */ footer [style*="rgba(255,255,255,.3)"], footer [style*="rgba(255, 255, 255, .3)"], footer [style*="rgba(255,255,255,.35)"], footer [style*="rgba(255,255,255,.4)"] { color: rgba(255, 255, 255, .62) !important; } /* ---- 7. 1.4.1 Use of Color: underline in-text links ---- The `link-in-text-block` failure sat in the NAVY .areas section, where the link colour matched its surrounding text (1.01:1). Underline is colour-neutral so it fixes that without darkening anything on navy. */ .section-sub a, .faq-answer a, .faq-answer-inner a, .info-val a, .cv-alt a, .local a, .prose a, article p a, .wrap .local a, .wrap .block p a, .crumb a, .foot a, .wrap .end a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .section-sub a:hover, .faq-answer a:hover { text-decoration-thickness: 2px; } /* ---- 8. FOCUS VISIBLE ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; border-radius: 2px; } .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-gold:focus-visible, .calc-book-btn:focus-visible, .btn-book:focus-visible, .nav-cta:focus-visible { outline-color: #0d1b2a; } /* ---- 9. aria-hidden-focus ---- Lighthouse: "Focusable content should have tabindex=-1, be removed from the DOM, or not be hidden with aria-hidden". The mobile menu is aria-hidden until opened but its links stayed tabbable. visibility:hidden drops it from the tab order; the script restores it when aria-hidden flips to false. */ #mobileMenu[aria-hidden="true"], .mobile-menu[aria-hidden="true"] { visibility: hidden; } #mobileMenu[aria-hidden="false"], .mobile-menu[aria-hidden="false"], #mobileMenu.open, .mobile-menu.open { visibility: visible; } /* ---- 10. Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---- 11. THANK-YOU PAGE FOOTER ---- thank-you.html is the ONLY page with a bare `