/* ============================================================ wcag-c0072-gs-avana.css WCAG 2.1 Level AA override for the C0072-GS-Avana Kentico template (TemplateId 1397, DefaultCssFileName: RPcssMaster_C0072-GS-Avana). 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. Header is confirmed sticky: header.header { position:fixed; top:0; z-index:90 } ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible ------------------------------------------------------------ */ .navbar-toggle:focus-visible, .dropdown-toggle:focus-visible, .btn:focus-visible, .form-control:focus-visible, header.header a:focus-visible, #masterHeader a:focus-visible, .contact-us-enhanced .form-control: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) #contactUsEnhancedContainer .form-control failure comes from shared webpart CSS. Specificity strategy matches Ron's Haute. ------------------------------------------------------------ */ body #contactUsEnhancedContainer .form-control { border-bottom: 1px solid #595959 !important; } /* ------------------------------------------------------------ WCAG 1.4.3 Contrast Minimum (text) Base failures: #7e7e7e in 8+ rules ≈ 4.4:1 — fails 4.5:1. One rule uses color:#7e7e7e !important (line 383) — override uses !important to win for that selector class. Shared footer-disclosure opacity 0.6 → 0.85. ------------------------------------------------------------ */ .FloorPlansV3 .specification, .FloorPlansV2 .specification { color: #595959 !important; } .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 { text-decoration: underline; text-underline-offset: 2px; } a.btn, a.button, .btn, .btn-primary, header.header a, #masterHeader 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) Defensive — Avana's homepage uses `.homepage__about-container > .homepage__about-content` for the welcome blurb. The DOM exposes `.homepage__about-content--link` as a link helper class. Audited home page (districtparkwest.com) had no inline prose anchors in the about block today, but the wrapper structure means a content-editor-added link would inherit only color. Underline the wrapper to cover that case. The about-buttons row (`.homepage__about-buttons` / `.homepage__about-button`) is the CTA strip — opted out. ------------------------------------------------------------ */ .homepage__about-container a, .homepage__about-content a, .homepage__about-content--link { text-decoration: underline; text-underline-offset: 2px; } .homepage__about-button, .homepage__about-buttons a, .homepage__about-content a.btn, .homepage__about-content a.button { text-decoration: none; } /* ------------------------------------------------------------ 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 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced) Mobile-nav hamburger. Live-measured: `#menuButton` is 46×32 at every viewport from 375 to 1200 (no breakpoint) — width already passes, height fails by 12px. The button has 3 absolutely- positioned `div.hamburger-bar` children (top:0 / top:50%+ translateY(-50%) / bottom:0, full button width) — growing the button's own box would visibly spread the bars apart (confirmed as the real risk on this construction; see Elan below for the same pattern). Uses the same transparent ::before hit-area overlay technique as the consent-checkbox fix elsewhere in this file family (button is already `position:relative`, so the overlay anchors correctly). Live-verified: button's own painted box + all 3 bars are pixel-identical before/after at 375px and 768px, and the resulting 46×48 hit area clears 44×44 with no neighboring-control encroachment (only object within reach is an already-unclickable cloaked decoy anchor, opacity:0.01/z-index:-999, not user-facing). Width unchanged (already passes) — only the vertical dimension needs growth, so left/right are 0. ------------------------------------------------------------ */ body button#menuButton[data-toggle="collapse"][data-target="#navMenu"]::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; bottom: -8px; } /* ------------------------------------------------------------ TFS 2982346 - WCAG 2.2 AA 2.5.8 Target Size (Pointer): footer links Live-measured on avana0728.sat-ws.realpage.com/Contact.aspx at 1280x900 (headless Chrome, border-box heights): 2 footer target(s) under 24x24. footer .footer-property-logo a 226.7 x 16, display:inline, wraps an footer .footer-phone-content a.footer-phone 126.3 x 19, display:inline 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, document height +0px, no horizontal overflow. 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-property-logo a { display: inline-block; min-height: 24px; } footer .footer-phone-content a.footer-phone { display: inline-block; min-height: 24px; } /* ------------------------------------------------------------ TFS 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced), 44x44 C0072-GS-Avana header nav / phone / header actions. Measured live at 375/768/1440 with CDP CSS.getMatchedStylesForNode on the exact nodes measured. This template does NOT load assets/common/header/css/header.css and does not use the shared Header widget — its header is template-native markup, so the fix belongs here rather than in a shared file. The WCAG override loads at document.styleSheets[9], after the master at [0], so plain rules win: no !important is needed and none is used. Technique: min-height/min-width + box-sizing:border-box, never padding and never a ::before overlay. min-* is uncontested on these selectors and, per CSS2.1 §10.7, is applied last in height resolution, so it beats any competing height/max-height without a specificity fight. Overlays are rejected fleet-wide on this ticket: vertical clearance between nav links measures 14.19px here, far below the ~25px an overlay would need, and an overlay was already live-measured stealing clicks on another template. A direct grow reflows instead — it pushes siblings in normal flow and cannot overlap them. ------------------------------------------------------------ */ /* Nav links measured 29px tall at all three viewports. NOTE: this template has NO desktop nav row — ul#menuElem sits inside div#navMenu.collapse which is display:none at 375, 768 AND 1440, so every link is drawer-open state only. All labels already exceed 44px wide (narrowest "Home" at 78.5px), so no min-width. display:inline -> inline-block preserves shrink-to-fit, so the width-collapse trap seen elsewhere on this ticket does not apply. Growing 29 -> 44 needs 15px against 14.19px of inter-link gap; because these are inline-level the li simply reflows (the drawer grows taller) rather than overlapping. KNOWN COSMETIC ISSUE, pre-existing and NOT introduced here: the "Local Attractions" label already wraps to two lines at 1440 (its 142.91x72.19 rect is two 29px fragments, not one box). */ body #form #navMenu #menuElem li a { box-sizing: border-box; display: inline-block; min-height: 44px; } /* Phone links — three separate instances, and two of them have a ZERO-HEIGHT hit box today: `.phone a` and `.mobilephone a` are given font-size:0 by the master so the visible glyph is entirely their ::before, leaving the anchor itself 20.44x0 (@375) and 78.86x0 (@768). Sizing the anchor is therefore the whole fix. min-width is included because .mobilephone a measures only 20.44px wide; it is a no-op on the other two (78.86-202.25px). The ::before glyph is deliberately NOT touched — it is the painted phone icon, and growing it would be a visible design change. Growth is rightward/downward from the anchor's existing top-left, so the 14.0px of clearance to #menuButton on .phone a's LEFT at 1440 is not encroached on. */ body #form .phone a.seo-number, body #form .mobilephone a.seo-number, body #form a.footer-phone.seo-number { box-sizing: border-box; display: inline-block; min-width: 44px; min-height: 44px; } /* .top-CTA1 a.button.make-bt already measures 402.13x52.06 at 768 and 1440 — intentionally left untouched. Likewise .get-directions-menu a.button (243.59x81/97). */ /* ------------------------------------------------------------ TFS 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): consent checkbox pointer hit-area, 44×44. C0072-GS-Avana was missing this fix entirely (fleet rescan, 2026-08) — only the #2955118/#2982346-era footer-link fix existed in this file; the consent checkbox itself was never touched here, so it ships as the raw UA-default checkbox: live-measured 13px (some widths taller, see below), box-sizing:border-box, 0 author border, position:static. Because there's no custom 24×24 box on this template (no appearance:none rule to build on), this grows the hit-area directly off the native 13×13 box instead of reusing the ::before-on-a-24×24-box pattern used elsewhere in this file family. position:relative is added here (native checkboxes are position:static) so the ::before anchors to the checkbox itself and not to some ancestor. Insets are asymmetric and were derived from a live measurement of the actual clearance to the "privacy policy" label/link on this template - not assumed - then verified with elementFromPoint across the resulting hit-area (incl. the corner nearest the link): zero intrusion, checkbox wins everywhere in the box. ------------------------------------------------------------ */ #contactusPrivacy input[type="checkbox"], #privacyDiv input[type="checkbox"], #contactUsV1Privacy input[type="checkbox"], body .contact-mobile-form input[type="checkbox"] { position: relative; } #contactusPrivacy input[type="checkbox"]::before, #privacyDiv input[type="checkbox"]::before, #contactUsV1Privacy input[type="checkbox"]::before, body .contact-mobile-form input[type="checkbox"]::before { content: ""; position: absolute; top: -31px; left: -18px; right: -18px; bottom: -9px; } /* ------------------------------------------------------------ WCAG 2.2 AA 2.5.8 Target Size (Minimum) — TFS 3040687 Shared-component block. IDENTICAL BYTES in every wcag-*.css — this issue spans 23 templates, so nothing here is template-tuned. Source of truth: Silktide check `ensure-minimum-target-size` pulled from PROD 2026-08-24 — 182 sites / 1,034 flagged elements (test/3040687-target-size/silktide-prod/raw-flagged.json). Every rule cites the bucket and the geometry Silktide reported, and each was measured in headless Chrome before being included. Specificity: `body` prefix + !important rather than this template's own namespace prefix. The namespace would narrow the match and miss elements rendered outside the template wrapper (the decoy anchor is one of those). *** NEVER ADD `display` TO A TEXT-LINK RULE HERE. *** MEASURED, then SEEN in a screenshot: `display:inline-block` on a[href*="greystar.com/privacy"] made that link drop ~9px BELOW its row-mates ("DISCLOSURES & LICENSES", "DMCA AGENT") in the elan08022023 footer — a visible zig-zag, because inline-block turns the link into an atomic box that carries its own padding into the line layout. Vertical padding on a plain INLINE link grows the hit box (what the scanner measures) while the glyphs stay exactly on the baseline. Padding alone is sufficient; `display` is not needed anywhere in this block except the decoy's `display:none`. *** 24.0px IS NOT ENOUGH — read before editing any value below. *** TFS 2955118 established empirically (see the Tableau and Ascension notes earlier in this file) that a target landing on EXACTLY 24.0px is still flagged by the scanner: ".CMSSiteMapLink at 32px passes, footer links at 24.0 do not." So every rule here OVERSHOOTS: - text links -> vertical padding, which composes with any existing padding instead of replacing it, and never caps the box the way line-height does - icon/dots -> 28px, not 24px Do NOT "tidy" these back to min-height:24px / line-height:24px. That reintroduces the 24.0 failure AND, because these rules carry !important, would override the working padding-based rules that some templates (e.g. Ascension) already ship. ------------------------------------------------------------ */ /* 1. Hidden decoy anchor — 85 rows / 29 sites, reported 54x22. Not a real control. Its inline style carries no !important, so this wins and takes it out of hit-testing and the a11y tree. */ body a[aria-hidden="true"][tabindex="-1"][rel="nofollow"] { display: none !important; } /* 2. Site-map page links — 371 rows / 52 sites, the largest bucket. Reported ~71x19, stacked about one line-height apart. NOTE: a.CMSListMenuLink (5 rows) is deliberately EXCLUDED — that is the primary-nav class, and forcing line-height on it across 22 templates risks every page's header for 5 rows. */ body a.CMSSiteMapLink { padding-top: 5px !important; padding-bottom: 5px !important; } /* 3. Social icon links — NOT handled here. 44 rows / 23 sites, flagged at 11.4x24 / 17.2x24 (icon-font glyph on a `display:inline` anchor). MEASURED: every fleet-wide formulation broke something. - `display:inline-flex` + min-28 -> SHRANK compliant icons (balcony 44x44 -> 28x28, slate 33 -> 28) - `display:inline-block` + min-28 -> same shrink (the box comes from the parent's layout; any display override re-computes it) - `padding: 4px 8px` (no shrink) -> the extra width WRAPS the icon row onto a second line: slateqanew UL.header-social 5 icons, vertical centre spread 0px -> 28.6px (visible zig-zag); emerald +8px, balcony +4px. The containers differ per template, so this needs a container-scoped rule, not a fleet-wide one. **TFS 2982346 owns social-icon target size** and has per-template branches for exactly this. Left to that ticket on purpose. Do not re-add a global `a.facebook`-style rule here. */ /* 4. Hero scroll-down affordance — 18 rows / 15 sites, reported 9x16. */ body a#scroll-down { padding: 6px 8px !important; } /* 5. Hamburger / nav toggle — reported 16x6. a.dropdown-toggle is already handled elsewhere in this file; only the button form is new. min-* rather than padding: a