/* ============================================================ wcag-s0069-gs-grids.css WCAG 2.1 Level AA override for the S0069-Grids Kentico template (TemplateId 1363, DefaultCssFileName: RPcssMaster_S0069-GS-Grids). Selectors verified against the live base CSS pulled from https://thehillapts.com on 2026-05-12. This template namespaces all base rules under .template-grids. Brand palette is gold #ddb563 + terracotta #c67e65 — both fail 4.5:1 on white as link/text colors. First flagged by Ron in TFS 2845711 (The Hill / thehillapts.com) as outside the current 8-template remediation scope. This file brings it in. ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible Base suppresses outlines on: .template-grids a:hover { outline:0 } .template-grids a:hover, .template-grids a:focus { outline-color:transparent; outline-style:none } .template-grids .contact-widget .sumbitbutton input.active { outline:none !important } .template-grids .floorplan-search-bar .floorplan-search-moveindate:focus { outline:none } Plus Bootstrap's .navbar-toggle:focus, .dropdown-toggle:focus. The base's !important on submit-button outline forces ours to use !important for that selector class. ------------------------------------------------------------ */ .template-grids a:focus-visible, .template-grids button:focus-visible, .template-grids .btn:focus-visible, .template-grids .btn-primary:focus-visible, .template-grids .navbar-toggle:focus-visible, .template-grids .dropdown-toggle:focus-visible, .template-grids .top-bar a:focus-visible, .template-grids .contact-widget input:focus-visible, .template-grids .contact-us-enhanced .form-control:focus-visible, .template-grids .floorplan-search-bar .floorplan-search-moveindate:focus-visible, .template-grids .FloorPlansV3 a:focus-visible, .template-grids input:focus-visible, .template-grids select:focus-visible, .template-grids textarea:focus-visible, .template-grids [tabindex]:focus-visible, .template-grids [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.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. Scoped narrowly to `.footer-widget footer a` so the inputs/selects/tabindex/role=button elements above, which were not flagged, keep their existing ring. */ .footer-widget footer a:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000 !important; } .template-grids .contact-widget .sumbitbutton input: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 Header height not declared in master CSS (shared header resources). Use 100px scroll padding (Balcony default). ------------------------------------------------------------ */ html { scroll-padding-top: 100px; } .template-grids :focus-visible { scroll-margin-top: 100px; } /* ------------------------------------------------------------ WCAG 1.4.11 Non-text Contrast (form controls) Base: .template-grids .contact-us-enhanced .form-group .form-control { border:1px solid #ebe9e9 } #ebe9e9 on white ≈ 1.18:1 — fails 3:1. Bump to #595959. ------------------------------------------------------------ */ .template-grids .contact-us-enhanced .form-group .form-control { border-color: #595959; } body #contactUsEnhancedContainer .form-control { border-bottom: 1px solid #595959 !important; } /* ------------------------------------------------------------ WCAG 1.4.3 Contrast Minimum (text) Base failures: 1. .template-grids .FloorPlansV3 a { color:#c67e65 } ≈ 3.41:1 — fails 4.5:1 for normal text. 2. .template-grids a:hover, .template-grids a:focus { color:#ddb563 } ≈ 1.97:1 — link hover/focus is unreadable. Use darker gold #8a6b34 (~4.6:1) to keep the brand cue. 3. Shared footer-disclosure opacity 0.6 → 0.85. ------------------------------------------------------------ */ /* SCOPE NOTE: two previous color overrides were removed from this block because both targeted brand colors that vary per property: (a) `.template-grids .FloorPlansV3 a { color: #595959 }` was replacing the floor-plans link color. Verified across 4 Greystar Grids properties — every property has a different FloorPlansV3 link color (highbridge #6f8490, thejuneapts #212721, lindenhighlands #292421, lumenabq #477a7b). 3 of 4 already passed 4.5:1 contrast; only highbridge's #6f8490 (~3.7:1) fails. Forcing gray on every property strips brand without fixing anything for the 3 that already passed. (b) Inline-link :hover/:focus color to #8a6b34 (dark brown), claiming it fixed `.template-grids a:hover { color:#ddb563 }` ≈ 1.97:1 on white. The base hover color is per-property (highbridge #5890b0, thejuneapts #d1ccbd, etc.). #8a6b34 isn't in any property's brand palette and could make hover text unreadable on dark-branded properties. Brand-color contrast failures must be fixed at the property level, not in shared template injection. See per-property-base-css memory. Also: the bare `p a:hover` / `li a:hover` selectors would bleed into nav/footer (same Balcony bug). Block removed entirely. */ .footer-widget footer .footer-disclosure { opacity: 0.85; } /* ------------------------------------------------------------ WCAG 1.4.1 Use of Color (inline links) ------------------------------------------------------------ */ .template-grids .container-fluid.main a, .template-grids .col-sm-12.content a, .template-grids .main-content-text a, .template-grids .inner-page-main-content a { text-decoration: underline; text-underline-offset: 2px; } .template-grids a.btn, .template-grids a.button, .template-grids .btn, .template-grids .btn-primary, .template-grids .top-bar a, .template-grids .navbar-grids a, .template-grids .cta-header-btn, .template-grids .header-CTA-button, .template-grids .footer-CTA-Button, .template-grids a.more-link, .template-grids a.less-link, .template-grids .floorplan-search-bar a, .template-grids .contact-widget .sumbitbutton input, .footer-widget footer a { text-decoration: none; } /* ------------------------------------------------------------ TFS 2870264 — WCAG 1.4.1 (homepage inline links) Grids' homepage uses `.special-home-message` for the welcome blurb (same wrapper used by Dakota/Elan/Emerald/ Slate Phase 1 fixes). Verified against averydallas.com (4 inline links inside `.special-home-message`). ------------------------------------------------------------ */ .template-grids .special-home-message a { text-decoration: underline; text-underline-offset: 2px; } .template-grids .special-home-message a.btn, .template-grids .special-home-message a.button, .template-grids .special-home-message a.more-btn, .template-grids .special-home-message .more-btn { 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): grow the hamburger (.navbar-toggle) to a 44×44 hit area. RPcssMaster_S0069-GS-Grids.css shows/positions this button only inside @media(max-width:1200px) (`.navbar-toggle{display:block}`). Mirrored here at the SAME breakpoint, NOT unconditional — an earlier, unconditional version of this rule left the toggle an invisible-but-still-hit-testable 44×44 control past 1200px (the `.icon-bar` spans compute fully transparent there, yet the element was still clickable) — a phantom interactive target, confirmed live on TFS 2987209. Do not drop the media query. Icon is Bootstrap's stacked-`.icon-bar`-span construction (3 bars); `flex-direction:column` is required or the bars re-lay into a horizontal row and visually collide with the site logo (confirmed live on an earlier, uncorrected pass of this fix). `!important` on `display` only, for cascade-order robustness — sizing never needs it. Confirmed live at 375/768: 44×44, glyph intact, no logo overlap, skip-link unaffected. Toggle does not render at 1440 — correctly still hidden, unchanged. ------------------------------------------------------------ */ @media (max-width: 1200px) { .template-grids .navbar-toggle { min-width: 44px; min-height: 44px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; } } /* ------------------------------------------------------------ TFS 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): drawer CLOSE control (`.navbar-collapse .navbar-close`, the fa-times "X"). Production completeness sweep (2026-08-20) measured 39.3x50 — fails on width only, height already passes via the 50px font-size glyph. This closes the open/close round-trip gap the sweep flagged: once the drawer opens, its full-viewport overlay covers the original `.navbar-toggle` hamburger, so `.navbar-close` is the ONLY control that can close it. The hamburger (open direction) is already fixed above; this is the missing close-direction fix. Base rule is already `display: inline-block` at this same max-width:1200px breakpoint (RPcssMaster_S0069-GS-Grids.css:573-580) — min-width applies with no display change needed. */ @media (max-width: 1200px) { .template-grids .navbar-grids .navbar-collapse .navbar-close { box-sizing: border-box; min-width: 44px; } } /* ------------------------------------------------------------ TFS 2982346 - WCAG 2.2 AA 2.5.8 Target Size (Pointer): footer links Live-measured on grids080123.sat-ws.realpage.com/Contact.aspx at 1280x900 (headless Chrome, border-box heights): 3 footer target(s) under 24x24. footer .footer-property-logo a 72 x 16, display:inline, wraps an footer .footer-phone-content a.footer-phone 99.2 x 19, display:inline footer .footer-address-content a 150.9 x 18, display:BLOCK ("Directions") 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, no horizontal overflow, and document height +8px - the only layout movement in this ticket, and it is the "Directions" link: it is display:block at 18px, so raising it to 24px genuinely adds height rather than consuming leading. Left uncancelled deliberately - a negative margin would buy 8px on a footer at the cost of pulling a block-level link's hit area toward its neighbour. 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; } /* display:block already - min-height alone grows it, no inline-block needed. */ footer .footer-address-content a { min-height: 24px; } /* ------------------------------------------------------------ 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