/* ============================================================ 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; } /* ------------------------------------------------------------ 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. ------------------------------------------------------------ */ body #form #main-general .main-content-text a, body #form .inner-page-main-content .main-content-text a, body #form .main-content-text a { text-decoration: underline; text-underline-offset: 2px; } body #form .main-content-text a.btn, body #form .main-content-text a.button, body #form .main-content-text a.more-link, body #form .main-content-text a.less-link, body #form .main-content-text .footer-CTA-Button, body #form .main-content-text .header-CTA-button { text-decoration: none; } /* ------------------------------------------------------------ TFS 2870264 — WCAG 1.4.1 (homepage inline links) Elan's homepage uses `.home-section` rows. Inline text lives in `.section-left .section-text` (rich-text paragraphs) and `.home-content-overlay`. The three top CTA tiles are `` — the entire tile is the link, opted out. `.section-3-CTA` / `.section-CTA` wrappers hold `.CTA-button` and `.footer-CTA-Button` — also opted out. ------------------------------------------------------------ */ body #form .home-section .section-left a, body #form .home-section .section-text a, body #form .home-section .home-content-overlay a, body #form .home-section .home-content-overlay p a { text-decoration: underline; text-underline-offset: 2px; } body #form a.home-CTA, body #form .home-CTA, body #form .home-CTA-overlay, body #form .home-CTA-icon, body #form .home-CTA-text, body #form .section-CTA a, body #form .section-2-CTA a, body #form .section-3-CTA a, body #form .home-section .CTA-button, body #form .home-section a.CTA-button, body #form .home-section a.footer-CTA-Button, body #form .home-section a.header-CTA-button { text-decoration: none; } /* ------------------------------------------------------------ WCAG 2.2 AA 2.5.8 Target Size (Pointer) ------------------------------------------------------------ */ body .contact-mobile-form input[type="checkbox"] { padding: 20px; margin: 4px; } #contactusPrivacy label { line-height: 30px;; } #contactusPrivacy a { margin-left: 10px; }