/* ============================================================ wcag-c0051-gs-balcony.css WCAG 2.1 Level AA override for the C0051-GS-Balcony Kentico template (TemplateId 1366). Selectors verified against the live base CSS pulled from https://livethelaurels.com on 2026-05-07. IMPORTANT — this template namespaces all base rules under .template-balcony (set by a wrapper div inside ). All overrides below carry that prefix to match base specificity. Several base rules use !important on outline:none and box-shadow:none, so our focus rules use !important to win. Specificity strategy: Every selector is prefixed with `body #form` (the ASP.NET WebForms page-level form ID, present on every page and wrapping all our target elements). That adds (1, 0, 2) to each rule's specificity, lifting our overrides above the widget-CSS bundles that load via rpWebpartCss_*. Combined with the `.template-balcony` namespace already in each selector, rules sit at (1, 3+, 2+). ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible Base suppresses outlines on: .template-balcony a:hover, .template-balcony a:focus { outline-color:transparent; outline-style:none } .template-balcony .btn-primary:hover ... { outline:none !important } .template-balcony .contact-form ... :focus { outline:none; box-shadow:none !important } .template-balcony .floorplan-search-bar .floorplan-search-moveindate:focus { outline:none } .template-balcony .contact-widget .contactus-float-input-div input:focus { outline:none } .footer-widget footer a:focus { outline:none } Restore visible focus rings. ------------------------------------------------------------ */ body #form .template-balcony a:focus-visible, body #form .template-balcony button:focus-visible, body #form .template-balcony .btn:focus-visible, body #form .template-balcony .btn-primary:focus-visible, body #form .template-balcony input:focus-visible, body #form .template-balcony select:focus-visible, body #form .template-balcony textarea:focus-visible, body #form .template-balcony .navbar-toggle:focus-visible, body #form .template-balcony .dropdown-toggle:focus-visible, body #form .template-balcony .contact-form .form-control:focus-visible, body #form .template-balcony .contact-us-enhanced .form-control:focus-visible, body #form .template-balcony .contact-widget input:focus-visible, body #form .template-balcony .contact-widget textarea:focus-visible, body #form .template-balcony .floorplan-search-bar .floorplan-search-moveindate:focus-visible, body #form .template-balcony [tabindex]:focus-visible, body #form .template-balcony [role="button"]:focus-visible, body #form .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 !important; box-shadow: 0 0 0 2px #005fcc, 0 0 0 3px #fff !important; } /* ------------------------------------------------------------ WCAG 2.4.11 Focus Not Obscured Base header is position:fixed with height:84px (.template-balcony header). Reserve scroll space + a small visual buffer. ------------------------------------------------------------ */ html { scroll-padding-top: 100px; } body #form .template-balcony :focus-visible { scroll-margin-top: 100px; } /* ------------------------------------------------------------ WCAG 1.4.11 Non-text Contrast (form controls) Base: .template-balcony .contact-us-enhanced .form-group .form-control { border:2px solid #abaaab; border-width:0 0 2px } #abaaab on white ≈ 3.05:1 — borderline. Bump to #595959 (7:1). ------------------------------------------------------------ */ body #form .template-balcony .contact-us-enhanced .form-group .form-control, body #form .template-balcony .contact-form .form-control, body #form .template-balcony .contact-widget .contactus-float-input-div input, body #form .template-balcony .contact-widget .contactus-float-input-div textarea { border-color: #595959 !important; } /* ------------------------------------------------------------ WCAG 1.4.3 Contrast Minimum (footer disclosure only) The base rule `.template-balcony a { color:#919191 }` technically fails 4.5:1 on white, but we do NOT override the color here. Reason: shared template injection applies to every Greystar property on this template, and properties apply their own brand colors to body links. A blanket `color: #595959` would override per-property branding. If a specific property's brand color fails Silktide, fix it at that property's site-CSS level. We DO bump the footer-disclosure opacity (no brand impact). ------------------------------------------------------------ */ body #form .footer-widget footer .footer-disclosure { opacity: 0.85; } /* ------------------------------------------------------------ WCAG 1.4.1 Use of Color (inline links) Underline inline content links so they're distinguishable without color. Scoped to body-content containers only — bare `p a` / `li a` / `dd a` selectors would bleed into footer nav (which uses `