/* ============================================================ wcag-s0075-zen-garden.css WCAG 2.1 Level AA override for the S0075-Zen-Garden Kentico template (TemplateId 1387). Selectors verified against the live base CSS pulled from https://loneoakapartments.com on 2026-05-07. This template does NOT use a template-namespace prefix — base selectors are global. Bootstrap is loaded separately and suppresses outlines on .navbar-toggle / .dropdown-toggle as usual. Specificity strategy: Every selector is prefixed with `body #form` (ASP.NET WebForms page-level form ID) to lift specificity above widget CSS that loads after our override. ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible The Zen-Garden CSS itself has no outline-suppression rules, but Bootstrap removes outlines on .navbar-toggle, .dropdown- toggle, .form-control:focus, etc. Restore visible focus rings via :focus-visible. .footer-widget footer a:focus { outline:none } also lives in the shared footer.min.css — covered here too. ------------------------------------------------------------ */ 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 input.form-control:focus-visible, body #form select.form-control:focus-visible, body #form textarea.form-control: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, body #form .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 Base: #topHeaderBar { position:fixed; top:0; padding:15px 0; font-size:18px; ... } ≈ 50px tall. Reserve scroll space below the sticky bar. ------------------------------------------------------------ */ html { scroll-padding-top: 80px; } body #form :focus-visible { scroll-margin-top: 80px; } /* ------------------------------------------------------------ WCAG 1.4.11 Non-text Contrast (form controls) Base: input.form-control, select.form-control, textarea.form-control { border:none; border-bottom: solid 1px #c1c1c1; ... } #c1c1c1 on white ≈ 1.85:1 — fails 3:1. ------------------------------------------------------------ */ body #form input.form-control, body #form select.form-control, body #form textarea.form-control { border-bottom-color: #595959; } body #form input::placeholder, body #form textarea::placeholder { color: #595959; opacity: 1; } /* ------------------------------------------------------------ WCAG 1.4.1 Use of Color (inline links) Base inline content links: .mainContent a, .contentPrivacy a, .content404 a, .thankyoublurb a, .readmoreWrapper a { color:#799c0b; font-size:24px; } No underline → fails 1.4.1 (color-only distinction). We add underline ONLY (no color change). Reasons: 1. The 24px font-size qualifies as WCAG large text — only 3:1 contrast required. #799c0b on white ≈ 3.5:1 PASSES large-text contrast, so 1.4.3 is not technically failed. 2. Brand colors vary per property. A blanket color override in this template-level injection would clash with any property whose brand replaces the default green. If Silktide flags 1.4.3 anyway on a specific property, fix it at that property's site-CSS level, not here. ------------------------------------------------------------ */ body #form .mainContent a, body #form .contentPrivacy a, body #form .content404 a, body #form .thankyoublurb a, body #form .readmoreWrapper a { text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------------------ TFS 2985969 — WCAG 1.4.1, interaction states The rest-state underline above is correct and wins (the base content-link rule at RPcssMaster_S0075-Zen-Garden.css:1101 sets only color + font-size). But the base ALSO carries a global, unscoped !important strip: RPcssMaster_S0075-Zen-Garden.css:134-136 a:focus, a:hover, a:active { text-decoration: none!important; } Specificity (0,1,1) + !important, so it beats our plain rest-state rule the instant the link is hovered or keyboard- focused, and the link is colour-only again during interaction. Confirmed live on cctancenter.com/Neighborhood.aspx: all 10 POI prose links compute `underline` at rest and `none` on hover/focus/active. Reproduces on every S0075-Zen-Garden site by construction, because the base rule is global. Nesting note (corrected TFS 2985969): the containment is `.page_neighborhood > #neighborhoodTopContent.mainContent`, i.e. `.mainContent` is INSIDE `.page_neighborhood` — not the reverse, as an earlier draft of the plan stated. Measured live: 10 anchors under `.mainContent`, 12 under `.page_neighborhood`. Scoping to `.mainContent` is still correct and is what is used below; the two extra `.page_neighborhood` anchors are `a#getDirections` and `a#scroll-down`, which sit OUTSIDE `.mainContent` and are therefore correctly left un-underlined without needing an explicit opt-out. Counter it with an !important scoped to the SAME five content containers as the rest-state rule — no new containers are introduced here, this is purely a state fix. Each selector (e.g. `body #form .mainContent a:hover` = (1,2,2)) out-specifies the base `a:hover` (0,1,1), so among competing !important declarations ours wins. Deliberately NOT a bare `a:hover` counter: the nav/header/footer/button opt-out block below is plain `text-decoration:none` with no !important, so a global counter would defeat it and underline the whole chrome. Those containers are safe by construction anyway — S0075-Zen-Garden-Master_1.ascx renders `
` and `