/* ============================================================ wcag-c0067-gs-insta.css WCAG 2.1 Level AA override for the C0067-GS-Insta Kentico template (TemplateId 1369, DefaultCssFileName: RPcssMaster_C0067-GS-Insta). Selectors verified against the live base CSS pulled from livesommery.com (cross-fetched) on 2026-05-12. This template namespaces all base rules under .template-insta. Several base focus suppressors use !important on outline:none, so focus rules below also use !important to win. ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible Base suppresses outlines on: .template-insta a:hover { outline:0 } .template-insta a:hover, .template-insta a:focus { outline-color:transparent; outline-style:none } .template-insta .btn-primary.focus / :active / .active { outline:none !important } .template-insta .btn-default.active / .contact-us-enhanced .sumbit-button button.active { outline:none !important } .template-insta .FloorPlansV2 select { outline:0 } ------------------------------------------------------------ */ .template-insta a:focus-visible, .template-insta button:focus-visible, .template-insta .btn:focus-visible, .template-insta .btn-primary:focus-visible, .template-insta .btn-default:focus-visible, .template-insta .navbar-toggle:focus-visible, .template-insta .dropdown-toggle:focus-visible, .template-insta .contact-us-enhanced .form-control:focus-visible, .template-insta .contact-us-enhanced .sumbit-button button:focus-visible, .template-insta .FloorPlansV2 select:focus-visible, .template-insta input:focus-visible, .template-insta select:focus-visible, .template-insta textarea:focus-visible, .template-insta [tabindex]:focus-visible, .template-insta [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 !important; box-shadow: 0 0 0 2px #005fcc, 0 0 0 3px #fff !important; } /* ------------------------------------------------------------ WCAG 2.4.11 Focus Not Obscured Multiple position:fixed elements in the base (header, stacked-amenities overlay, mobile menu). Header height not declared in master — use 100px scroll padding. ------------------------------------------------------------ */ html { scroll-padding-top: 100px; } .template-insta :focus-visible { scroll-margin-top: 100px; } /* ------------------------------------------------------------ WCAG 1.4.11 Non-text Contrast (UI components) Base failures: .template-insta .FloorPlansV2 select { border:1px solid #ccc } ≈ 2.40:1 — fails 3:1. .template-insta ... { border:solid 1px #ddd } (line 2373) ≈ 1.60:1 — fails. .template-insta .FloorPlansV2 .fp-switch-tabs { border:1px solid #e7e7e7 } ≈ 1.18:1 — fails. ... { border-bottom:1px solid #ccc8c5 } (line 2231) ≈ 2.39:1 — fails. ------------------------------------------------------------ */ .template-insta .FloorPlansV2 select, .template-insta .FloorPlansV2 .fp-switch-tabs { border-color: #595959; } body #contactUsEnhancedContainer .form-control { border-bottom: 1px solid #595959 !important; } /* ------------------------------------------------------------ WCAG 1.4.3 Contrast Minimum (text) Base failure: #b4b4b4 (line 1368) ≈ 2.60:1 — clearly fails wherever used as text. Scoped to confirmed selectors only — brand hover color #717171 (≈ 4.20:1) is preserved as it's the property's accent. The 1.4.1 underline below carries the distinguishability requirement without recoloring. Shared footer-disclosure opacity 0.6 → 0.85. ------------------------------------------------------------ */ .template-insta .FloorPlansV3 .specification, .template-insta .FloorPlansV2 .specification { color: #595959; } .footer-widget footer .footer-disclosure { opacity: 0.85; } /* ------------------------------------------------------------ WCAG 1.4.1 Use of Color (inline links) ------------------------------------------------------------ */ .template-insta .main-content-text a, .template-insta .inner-page-main a, .template-insta .inner-page-main-content a, .template-insta .main-content-wrapper a, .template-insta .container-fluid.main a, .template-insta .callout a { text-decoration: underline; text-underline-offset: 2px; } .template-insta a.btn, .template-insta a.button, .template-insta .btn, .template-insta .btn-primary, .template-insta .btn-default, .template-insta header a, .template-insta nav a, .template-insta .cta-header-btn, .template-insta .header-CTA-button, .template-insta .footer-CTA-Button, .template-insta a.more-link, .template-insta a.less-link, .template-insta .contact-us-enhanced .sumbit-button button, .footer-widget footer a { text-decoration: none; } /* ------------------------------------------------------------ TFS 2870264 — WCAG 1.4.1 (homepage inline links) Insta's homepage uses `.home-intro` rows with `.home-intro-content` holding the welcome blurb. Verified against academyapts.com (inline link "GET STARTED WITH AirBnB" inside `.home-intro-content`). ------------------------------------------------------------ */ .template-insta .home-intro a, .template-insta .home-intro-content a { text-decoration: underline; text-underline-offset: 2px; } .template-insta .home-intro a.btn, .template-insta .home-intro a.button, .template-insta .home-intro-content a.btn, .template-insta .home-intro-content a.button { text-decoration: none; } /** ------------------------------------------------------------ WCAG 2.2 AA 2.5.8 Target Size (Pointer) ------------------------------------------------------------ */ .template-insta .navbar .header-contact .seo-number { line-height: 24px;; } /* ------------------------------------------------------------ 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 2924975 - WCAG 1.4.3 Contrast (Minimum) The interior-page banner body copy renders #807e7d on the cream page background #f2eeea (3.50:1, fails AA 4.5:1). Base rule: RPcssMaster_C0067-GS-Insta.css `.template-insta .banner .content p` sets color:#807e7d; body.ContentBody sets background:#f2eeea. Darken to #595959 (~7:1 on #f2eeea). `body #form` prefix keeps specificity above the master sheet - no !important needed. (Home page is unaffected: it has no .banner .content p.) ------------------------------------------------------------ */ body #form .template-insta .banner .content p { color: #595959; } /* ------------------------------------------------------------ TFS 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): grow the hamburger (.navbar-toggle) to a 44×44 hit area. RPcssMaster_C0067-GS-Insta.css shows/positions this button via TWO overlapping rules: `.navbar .navbar-toggle{display:block}` @media(max-width:991px), plus a broader `.navbar-toggle{display:block}` @media(max-width:1200px) that also matches the same element and governs the 992–1200px sub-range. The real "shown" range is therefore 0–1200px, not 0–991px — mirrored here at the wider breakpoint. Live-verified (TFS 2987209): an earlier, UNCONDITIONAL version of this rule unhid the toggle past 1200px, where it rendered ON TOP OF the "HOME" nav link and was not clickable (the link intercepted pointer events) — a real, confirmed regression on this specific template. 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 horizontally (confirmed live, same bug class as Balcony/Grids). `!important` on `display` is REQUIRED here — confirmed empirically (not assumed): the base `.navbar .navbar-toggle {display:block}` rule beats a plain override at equal-or-lower specificity on this template specifically. min-width/min-height never need it. Confirmed live at 375/768: 44×44, glyph intact, centred (was measured ~8.5px off-centre without !important, because `display` stayed `block` and align-items/justify-content went inert), no logo overlap, skip-link unaffected. Toggle does not render at 1440 — correctly still hidden, unchanged. ------------------------------------------------------------ */ @media (max-width: 1200px) { .template-insta .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 2982346 - WCAG 2.2 AA 2.5.8 Target Size (Pointer): footer links Live-measured on insta080123.sat-ws.realpage.com/Contact.aspx at 1280x900 (headless Chrome, border-box heights): 3 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 121.2 x 20, display:inline footer .footer-address-content a 157 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 +6px - 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 6px 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; }