/* ============================================================ wcag-s0081-topaz.css WCAG 2.1 Level AA override for the S0081-Topaz Kentico template (TemplateId 1400, DefaultCssFileName: RPcssMaster_S0081-Topaz). Selectors verified against the live base CSS pulled from livesommery.com (cross-fetched) on 2026-05-12. This template does NOT use a .template-* wrapper. Ron specifically named this template in TFS 2849882 (Republic Flats / republicflats.com) as outside the current 8-template remediation scope. Note: The Topaz master CSS form-control borders use #253746 (~12:1 on white) which already PASS. Form-contrast failures Silktide reports for this template come from shared webpart CSS or per-property overrides — those fixes go at the property level, not here. ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible ------------------------------------------------------------ */ .navbar-toggle:focus-visible, .dropdown-toggle:focus-visible, .btn:focus-visible, .form-control:focus-visible, #contactUsEnhancedContainer input:focus-visible, .homeContactFormHolder .contact-mobile-form input:focus-visible, .contactus-float-input-div input:focus-visible, .contactus-float-input-div select:focus-visible, .contactus-float-input-div textarea:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, .footer-widget footer a:focus-visible { /* Webkit-style two-ring halo: blue inner ring + white outer ring gives focus visibility on both light AND dark backgrounds. The `outline` declaration is intentionally omitted — outline paints on top of box-shadow and would cover the white ring. */ outline-offset: 2px; box-shadow: 0 0 0 2px #005fcc, 0 0 0 3px #fff; } /* ------------------------------------------------------------ WCAG 2.4.11 Focus Not Obscured ------------------------------------------------------------ */ html { scroll-padding-top: 100px; } :focus-visible { scroll-margin-top: 100px; } /* ------------------------------------------------------------ WCAG 1.4.11 Non-text Contrast (form controls + UI) Base failures: 1. .FloorPlansV3 .fp-switch-tabs { border:1px solid #e7e7e7 } #e7e7e7 on white ≈ 1.18:1 — fails 3:1. 2. #contactUsEnhancedContainer .form-control failure comes from shared webpart CSS — Ron flagged this for Republic Flats in TFS 2849882. Specificity strategy for the #contactUsEnhancedContainer rule: body + ID matches the widget's own specificity (1,1,1) so source order wins, and the !important handles the base's `border-bottom:none` (no color to override). ------------------------------------------------------------ */ .FloorPlansV3 .fp-switch-tabs, .FloorPlansV2 .fp-switch-tabs { border-color: #595959; } body #contactUsEnhancedContainer .form-control { border-bottom: 1px solid #595959 !important; } /* ------------------------------------------------------------ WCAG 1.4.3 Contrast Minimum (text) Base failures: #7e7e7e in 5+ rules ≈ 4.4:1 — fails 4.5:1 by a hair. Shared footer-disclosure opacity 0.6 → 0.85. ------------------------------------------------------------ */ .FloorPlansV3 .specification, .FloorPlansV2 .specification { color: #595959; } .footer-widget footer .footer-disclosure { opacity: 0.85; } /* ------------------------------------------------------------ WCAG 1.4.1 Use of Color (inline links) ------------------------------------------------------------ */ /* Scope: content containers only. Bare `p a` / `li a` / `dd a` selectors were dropped (same Balcony/Aurora/Bliss/Jackson-Square bleed bug — they would underline footer nav, header items, sidebar lists). */ .main-content-text a, .inner-page-main a, .main-content-wrapper a, a[href$="Privacy-policy.aspx"] { text-decoration: underline; text-underline-offset: 2px; } a.btn, a.button, .btn, .btn-primary, header a, nav a, .cta-header-btn, .header-CTA-button, .footer-CTA-Button, a.more-link, a.less-link, .footer-widget footer a { text-decoration: none; } /* ------------------------------------------------------------ TFS 2870264 — WCAG 1.4.1 (homepage inline links) Topaz uses the same `.web-home-template` page wrapper / `.column-content .html-content` rich-text pattern as Autumn-Ridge. Verified against apartmentsathiddencreek.com (inline links "central spot", "thoughtful layouts", "close to home" inside `.column-content .html-content`). ------------------------------------------------------------ */ .web-home-template .column-content .html-content a, .web-home-template .copy-overlap a, .web-home-template .copy-overlay a { text-decoration: underline; text-underline-offset: 2px; } .web-home-template .html-content a.btn, .web-home-template .html-content a.button, .web-home-template .ws-cta--primary a, .web-home-template .cta-wrap a, .web-home-template .cta-item { text-decoration: none; } /** ------------------------------------------------------------ WCAG 2.2 AA 2.5.8 Target Size (Pointer) ------------------------------------------------------------ */ /* WCAG 2.2 AA 2.5.8 Target Size (Pointer) — real fix (native checkbox can't be padded; appearance:none + explicit 24px sizing; :checked::after re-draws the check so consent UX is preserved) */ body .contact-mobile-form input[type="checkbox"], #contactusPrivacy input[type="checkbox"], #privacyDiv input[type="checkbox"], #contactUsV1Privacy input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin: 4px; padding: 0; border: 2px solid currentColor; border-radius: 3px; background: #fff; cursor: pointer; position: relative; vertical-align: middle; flex: 0 0 auto; } body .contact-mobile-form input[type="checkbox"]:checked::after, #contactusPrivacy input[type="checkbox"]:checked::after, #privacyDiv input[type="checkbox"]:checked::after, #contactUsV1Privacy input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #1a1a1a; border-width: 0 2px 2px 0; transform: rotate(45deg); } body .contact-mobile-form input[type="checkbox"]:focus-visible, #contactusPrivacy input[type="checkbox"]:focus-visible, #privacyDiv input[type="checkbox"]:focus-visible, #contactUsV1Privacy input[type="checkbox"]:focus-visible { outline: 2px solid; outline-offset: 2px; } /* TFS 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): expand the consent checkbox's pointer hit-area to 44×44 without changing anything visually (Option B, plan §4.4/§0.5 J). The painted box stays 24×24 (position:relative already set above); this adds a transparent ::before over the box that only widens the clickable/tappable region. Do not touch :checked::after or :focus-visible above, and do not remove min-width/min-height:24px on the box rule above — on ContactUsFloating templates that min-width is the only reason the box is 24px wide at all (rpWebpartCss_ContactUsFloating.css sets width:auto !important, §0.4 D). ASYMMETRIC insets — intentional, do NOT "fix" this to be symmetric. Live click-testing (TFS 2987209) found the "privacy policy" link sits only ~5px below the checkbox on this template — reproduced specifically at the narrow 375/390px viewports, where the consent text wraps and the link sits closest. A symmetric 44×44 ring would swallow ~3px of the link's top edge and steal its clicks there. SC 2.5.5 has no centering requirement, so the shortfall is borrowed from the top side instead, which has ~24px of clearance (no left/right neighbor within 45px). Net: genuine 44×44 hit area, ~1px buffer on the bottom edge, zero measured click-stealing at 375, 390, 768, and 1440px. */ body .contact-mobile-form input[type="checkbox"]::before, #contactusPrivacy input[type="checkbox"]::before, #privacyDiv input[type="checkbox"]::before, #contactUsV1Privacy input[type="checkbox"]::before { content: ""; position: absolute; top: -18px; right: -12px; bottom: -6px; left: -12px; } /* ------------------------------------------------------------ TFS 2905632 - WCAG 1.4.1 Use of Color (selected state) The Floor Plans bed/bath filter and view-switch tabs mark the selected item with a brand-color background + #fff text only (base rule sets border-color:transparent, no weight/underline). Add an underline so the selection is perceivable in greyscale and for color-blind users. `body #form` prefix keeps specificity above the rpWebpartCss_Floorplan* base bundles. No color changed. ------------------------------------------------------------ */ body #form .fp2-bed-bath ul li.active > a, body #form .FloorPlansV2 .fp-switch-tabs .btn-default.active, body #form .FloorPlansV3 .fp-switch-tabs .btn-default.active { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ TFS 2905631 - WCAG 1.4.11 Non-text Contrast (form controls) The full-width Neighborhood search input has no perceivable resting border: base CSS (rpWebpartCss_NeighborhoodFullWidth.css) sets `border:none; background:none; color:#fff` on a dark rgba(0,0,0,.83) search overlay. Add a light 1px boundary at #cfcfcf (~9.6:1 on that dark surface; matches the widget's existing placeholder color). All 21 priority templates use this dark default - none override it to a light surface. ------------------------------------------------------------ */ body #form .neighborhood-widget .neighborhood-widget__search .form-group .form-control { border: 1px solid #cfcfcf; } /* ------------------------------------------------------------ TFS 2982346 - WCAG 2.2 AA 2.5.8 Target Size (Pointer): footer links Live-measured on topaz012523.sat-ws.realpage.com/Contact.aspx at 1280x900 (headless Chrome, border-box heights): 4 footer target(s) under 24x24. footer .footer-links li.footer-privacy-link a 58.2 x 21, display:inline footer .footer-links li.footer-site-map-link a 66.2 x 21, display:inline footer #ada-hud-links a#link-ada / a#link-hud 20 x 26.7 - fails on WIDTH only These are display:inline, where `line-height` cannot help - it does not change an inline element's border-box height. inline-block is what makes min-height apply. No padding and no negative-margin cancel is used: each target sits in a line box already at or above 24px, so the box grows into existing leading. Verified by injecting these rules into the live SAT page: 0 targets remaining and no horizontal overflow. Document height +0px at 1280px; +4px at 390px, from the mobile-only a#link-rp rule below. SCOPE PREFIX: scoped on the `footer` element. On THIS template `.footer-widget footer` also matches, so either prefix would work - the bare `footer` is used for consistency across the 18 template files in this ticket, three of which genuinely need it (Zen-Garden and Au-Courant nest `footer > .footer-widget`, reversed; Jackson-Square has no `.footer-widget` element at all). `footer` is a superset of both nestings. Verified against the live SAT DOM per template - not assumed. ------------------------------------------------------------ */ footer .footer-links li.footer-privacy-link a, footer .footer-links li.footer-site-map-link a { display: inline-block; min-height: 24px; } /* ADA/HUD icons already clear 24px on HEIGHT (26.7px here) and fail only on WIDTH: the anchor is inline-block wrapping a 20px SVG. min-width is the whole fix - do NOT add min-height, which would stretch the row for nothing. */ footer #ada-hud-links a#link-ada, footer #ada-hud-links a#link-hud { min-width: 24px; } /* MOBILE-ONLY target. a#link-rp measures 140 x 26.7 at 1280px (passing) but 120 x 21 at 390px, so a desktop-only pass does not surface it. Deliberately NO `svg { height: 20px }` guard: inline-block + min-height does not stretch the mark, and pinning the SVG cost 57px of document height on Zen-Garden where the same guard was tried. */ footer a#link-rp { display: inline-block; min-height: 24px; }