/* ========================================================================= LA Realty & Property Consulting — a11y.css Shared accessibility layer for all PUBLIC pages. Target: WCAG 2.2 Level AA. Loaded LAST in , after style.css, so it can correct anything the page CSS gets wrong. Purely additive — it does not restyle the brand. WHY THIS FILE EXISTS SEPARATELY FROM style.css Per the remediation playbook: a shared layer means pages added next year inherit accessibility by default, instead of every new page repeating the same mistakes. style.css is the design; this is the safety net. COLOURS HERE ARE NOT COPIED FROM ANOTHER SITE. Every value is measured against this site's own surfaces: white #ffffff cream #f7f3ed navy #1c3c5c deep navy #122e4a (page headers + footer) Sections 1. Skip link 2.4.1 2. Visible focus 2.4.7, 2.4.11, 1.4.11 3. Screen-reader utilities 4. Form fields 1.4.11, 3.3.2 5. Required / error / status 1.4.1, 3.3.1, 3.3.3 6. Target size 2.5.8 7. Reflow + spacing + motion 1.4.10, 1.4.12, 2.2.2 8. Forced colours 1.4.3, 1.4.11 ========================================================================= */ :root { /* Focus rings. Measured on this site's surfaces: --a11y-focus #1c3c5c 11.35:1 on white, 10.27:1 on cream --a11y-focus-inverse #e8c98f 7.12:1 on navy, 8.70:1 on deep navy */ --a11y-focus: #1c3c5c; --a11y-focus-inverse: #e8c98f; /* Form control borders need >=3:1 for 1.4.11. #767068 is 4.90:1 on white and 4.43:1 on cream. */ --a11y-field-border: #767068; /* Error text. #8a1f1f is 8.24:1 on white. */ --a11y-error: #8a1f1f; } /* ------------------------------------------------------------- 1. Skip link */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2147483601; padding: 10px 16px; background: #122e4a; color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; text-decoration: none; } .skip-link:focus { left: 16px; } .skip-link:focus-visible { outline: 3px solid #fff !important; outline-offset: -3px !important; } /* Programmatic focus targets must not ring when clicked with a mouse. */ [tabindex="-1"]:focus { outline: none; } /* --------------------------------------------------------- 2. Visible focus */ /* !important is deliberate. This rule is the last line of defence against any future stylesheet or embedded widget shipping `outline: none`. A missing focus indicator is a hard 2.4.7 failure, so it is not allowed to lose a specificity race. THE SPECIFICITY TRAP: because this rule uses !important, every contextual override below MUST use it too, or the generic ring wins everywhere and the dark-surface variant silently never applies. */ :focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 2px !important; border-radius: 4px; } /* Dark surfaces need the light ring. Declared after the generic rule so it wins the !important tie on source order. */ .page-hero :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .nav .mls-link:focus-visible { outline: 3px solid var(--a11y-focus-inverse) !important; } /* The social chips are white circles on the dark footer, but the same component also sits on white on the About page, where it needs the dark ring back. */ .section .social-icon:focus-visible { outline: 3px solid var(--a11y-focus) !important; } /* 2.4.11 Focus Not Obscured. The sticky header must never cover the element that just received focus. */ html { scroll-padding-top: 96px; } /* ------------------------------------------------- 3. Screen-reader helpers */ .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* Visible again when focused, for skip-link-style controls. */ .sr-only-focusable:focus, .sr-only-focusable:focus-visible { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; } /* --------------------------------------------------------- 4. Form fields */ /* 1.4.11: a control's boundary must be perceivable. Anything that slips through with a hairline border gets corrected here. */ input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea { border-color: var(--a11y-field-border); } /* Honeypots: hidden AND out of the tab order. The `hidden` attribute removes the field from the accessibility tree properly, unlike aria-hidden on a focusable control, which is itself a violation. */ .hidden-field, input[name="website"][tabindex="-1"] { display: none !important; } /* --------------------------------------- 5. Required, errors, status */ /* 1.4.1 Use of Colour: "(required)" is text, never a red asterisk alone. */ .req-flag { font-weight: 400; font-size: 0.92em; color: #5c6470; } .field-hint { display: block; font-size: 13px; color: #5c6470; margin-top: 4px; } .error-summary { border: 2px solid var(--a11y-error); background: #fbeceb; color: var(--a11y-error); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; } .error-summary h2 { font-size: 17px; margin: 0 0 8px; color: var(--a11y-error); } .error-summary ul { margin: 0; padding-left: 20px; } .error-summary a { color: var(--a11y-error); font-weight: 600; } .field-error { display: block; color: var(--a11y-error); font-size: 14px; font-weight: 600; margin-top: 4px; } /* Invalid fields are marked by border weight as well as colour (1.4.1). */ [aria-invalid="true"] { border-color: var(--a11y-error) !important; border-width: 2px !important; } /* ---------------------------------------------------------- 6. Target size */ /* 2.5.8 Target Size (Minimum) is 24x24 CSS px at Level AA. Buttons get the more comfortable 44px; inline text links inside prose are exempt under the "inline" exception and are deliberately not padded here. */ button, .btn, input[type="submit"], input[type="button"] { min-height: 44px; } .nav a, .footer-links a, .socials a { display: inline-block; min-height: 24px; line-height: 24px; } /* ------------------------------------------- 7. Reflow, spacing, motion */ /* 1.4.10 Reflow. NEVER `overflow-x: hidden` — that hides the failure rather than fixing it. These target the actual causes. */ img, svg, video, iframe { max-width: 100%; } img, svg, video { height: auto; } body { overflow-wrap: break-word; } /* Grid and flex children default to min-width:auto, which is the single most common cause of unexpected horizontal scroll. */ .grid > *, .split > *, .testimonials > *, .sales-grid > *, .team-feature-grid > *, .full-team-grid > *, .link-grid > * { min-width: 0; } @media (max-width: 480px) { table, pre { display: block; max-width: 100%; overflow-x: auto; } } /* 1.4.12 Text Spacing: content must survive user-imposed spacing. Fixed heights are what break this, so nothing here sets one. */ p, li, .quote, .sale-date, .team-contact-line { overflow: visible; } /* 2.3.3 / 2.2.2 — honour the OS reduced-motion setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------- 8. Forced colours */ @media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText !important; } .btn, button { border: 1px solid ButtonText; } .skip-link { border: 1px solid ButtonText; } }