/* ============================================================ wcag-gs-elan.css WCAG 2.1 Level AA override for the GS-Elan Kentico template (TemplateId 1390 / C0070-GS-Elan). Injected via lsExternalResource. Loaded after the base theme and Bootstrap. Selectors verified against the live base CSS pulled from https://elan-map-test.dev-ws.realpage.com on 2026-05-07. Cross-checked against production CSS from https://vista121.com on 2026-05-07: all targeted selectors match (form border, sticky header, footer-7 opacity, footer link colors, content-link rule). Brand colors differ (dev rust/gold #883f2e/#b19148 vs prod navy #394f9c) but no contrast impact on overrides. Footer bg differs (dev #1d2f40 vs prod #373737); rgba(255,255,255,0.92) still passes ~10:1 and opacity:0.75 still passes ~6.5:1 on prod's gray. Specificity strategy: Every selector is prefixed with `body #form` (the ASP.NET WebForms page-level form ID, present on every Greystar 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_*. Rules that already contain a context ID (#main-contact, #footer-menu, etc.) become 2-ID chains. ============================================================ */ /* ------------------------------------------------------------ TFS 2845711 — WCAG 2.4.7 Focus Visible Bootstrap suppresses focus rings on .navbar-toggle and .dropdown-toggle (outline:0). Restore visible focus. General fallback covers other interactive elements in case future markup adds outline-suppressing rules. ------------------------------------------------------------ */ body #form .navbar-toggle:focus-visible, body #form .dropdown-toggle:focus-visible, body #form .btn:focus-visible, body #form .form-control:focus-visible, body #form .header-CTA-button:focus-visible, body #form .footer-CTA-Button:focus-visible, body #form .social-CTA-button:focus-visible, body #form a:focus-visible, body #form button:focus-visible, body #form input:focus-visible, body #form select:focus-visible, body #form textarea:focus-visible, body #form [tabindex]:focus-visible, body #form [role="button"]: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.13 AAA (Focus Appearance) — PME-507688 rework (Will Sharp, manual scan 2026-08-24): the shared blue+white ring above doesn't reliably clear 3:1 against every property's footer background (footers commonly run darker/branded compared to the form fields and buttons this shared rule also covers). Override just the footer link ring with a white+black double ring — one leg always clears 3:1 against any single backdrop, the same treatment already used for the Floor Plans V4 focus rings. `.footer-widget footer a` is the same footer DOM shape already targeted below (contrast/decoration rules); scoping to it here keeps the header/body/CTA links above, which were not flagged, on their existing ring. */ body #form .footer-widget footer a:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000 !important; } /* ------------------------------------------------------------ TFS 2849999 — WCAG 2.4.11 Focus Not Obscured header.header-navigation is position:fixed (top:0). Approx height when scrolled: 120px (50px top strip + 50–65px logo + padding). Reserve scroll space so tab-focused elements land below the sticky header. `html { scroll-padding-top }` is unique to the html element — no widget rule competes with it, so no prefix needed. ------------------------------------------------------------ */ html { scroll-padding-top: 130px; } body #form :focus-visible { scroll-margin-top: 130px; } /* ------------------------------------------------------------ TFS 2849882 — WCAG 1.4.11 Non-text Contrast (form controls) Two distinct contact form patterns: 1. /Contact.aspx dedicated form: #main-contact .form-control { border-bottom: 2px solid rgba(0,0,0,.3) } ≈ 2.4:1 — fails 3:1. 2. Home page / floating mini contact form: body .contact-mobile-form .contactus-float-input-div input, body .contactus-float-input-div textarea { border-bottom: 2px solid #eaeaea } ≈ 1.36:1 — fails 3:1. ------------------------------------------------------------ */ body #form #main-contact .form-control { border-bottom-color: #595959; } body #form .contact-mobile-form .contactus-float-input-div input, body #form .contactus-float-input-div input, body #form .contactus-float-input-div textarea { border-bottom-color: #595959; } /* ------------------------------------------------------------ TFS 2852272 — WCAG 1.4.3 Contrast Minimum (text) Three confirmed offenders in the base: 1. Footer links color: rgba(255,255,255,.5) on #1d2f40 ≈ 3.4:1 2. Footer-7 links: opacity:.5 on color:#fff (effective ≈ 3.4:1). 3. .video-mute-btn: color:#999 on white ≈ 2.9:1 ------------------------------------------------------------ */ body #form #footer-menu ul li a, body #form .footer-links a, body #form #footerBottom, body #form .footer-widget footer, body #form .footer-widget footer a { color: rgba(255, 255, 255, 0.92); } body #form .footer-widget footer.footer-7 .footer-container a, body #form .footer-widget footer.footer-7 .footer-container .footer-bottom .footer-bottom-row .footer-icons .additional-icons { opacity: 0.75; color: #fff; } /* Hover/focus restore: our specificity-bumped default (1,3,4) beats the base hover rule (0,4,3) in the `a` column, which kills the hover delta. Match our own selector specificity at the :hover/:focus level so it lifts back to opacity:1 on interaction. */ body #form .footer-widget footer.footer-7 .footer-container a:hover, body #form .footer-widget footer.footer-7 .footer-container a:focus { opacity: 1; } body #form .video-mute-btn { color: #595959; } /* ------------------------------------------------------------ TFS 2852341 — WCAG 1.4.1 Use of Color (inline links) Inline content links must be distinguishable without color. On internal pages, rich-text content lives in .inner-page-main-content .main-content-text. The home page has no such container, so this only fires on subpages with actual content links. TFS 2985969 — added `.inner-page-main .section-text a`. The About-page copy block is NOT in .main-content-text: the live ancestor chain is a < p < .section-text < .about-content-left < .section-left < #about-section-1.container-fluid < .inner-page-main (confirmed live on thearialiving.com; the wrapper div is authored in C0070-GS-Elan-About.ascx:19 as `.inner-page-main` — note the base CSS only styles the OUTER `.inner-page-main-content`, so the un-suffixed inner class had no underline rule reaching it). 23 of 45 flagged links on this template live in this container. Collision check: the homepage rule below is scoped to `.home-section .section-text a`; the About `.section-text` has no `.home-section` ancestor, so the two never overlap. No `text-decoration:none !important` in the Elan base stack targets content links — all 13 base `!important` strips are on header/nav/footer/social/CTA-button containers — so no `!important` counter is needed here (unlike Jackson-Square and Zen-Garden, whose bases strip on :hover/:focus/:active). TFS 2985969 (2nd defect) — added `#specials-flyout .specials-content a`. Same failure mode as the Teracy `.topCallout` miss: a prose link in a container that looks like chrome but is not. Confirmed live on thearialiving.com — `#specials-flyout` is a DIRECT CHILD of `form#form`: form#form > div#specials-flyout.collapse > div.specials-content > p.MsoNormal > a It has no
/