/* ============================================================================ ll-a11y.css [LL-A11Y 2026-07-23] Document level half of the LeadLocate accessibility module. The widget chrome (launcher + panel) lives in a shadow root built by /scripts/ll-a11y.js; everything in THIS file styles the host page, because remediation has to reach the light DOM. Namespace: every selector is keyed off a class on (`lla11y-*`) or a `.lla11y-*` element the script injects. Nothing here fires until the user turns a setting on, with two exceptions that are always on: the skip link and the screen reader only helper class. Sections: 1. Always on: skip link, visually hidden text, host reservations 2. Typography adjustments (spacing, alignment, fonts) 3. Color and contrast modes 4. Focus, links, headings, hit targets 5. Motion 6. Cursors and reading aids 7. Print and reduced motion guards ========================================================================= */ /* ---- 1. Always on ------------------------------------------------------ */ .lla11y-skip { position: fixed; top: 8px; left: 8px; z-index: 2147483000; display: inline-block; padding: 12px 18px; border-radius: 12px; background: #2E2417; color: #E9BC5C; font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none; box-shadow: 0 10px 30px rgba(12, 12, 18, .38); transform: translateY(-160%); transition: transform .16s ease; } .lla11y-skip:focus, .lla11y-skip:focus-visible { transform: translateY(0); outline: 3px solid #E9BC5C; outline-offset: 3px; color: #E9BC5C; text-decoration: none; } /* Screen reader only. Used by the remediation pass to name icon controls and to append "opens in a new window" to external links. */ .lla11y-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* The launcher sits bottom left. On surfaces that dock their own bar to the bottom of the viewport the script measures it and writes this variable. */ :root { --lla11y-dock: 0px; } /* ---- 2. Typography ----------------------------------------------------- */ html.lla11y-ls-1 body *:not(.lla11y-x) { letter-spacing: .055em !important; } html.lla11y-ls-2 body *:not(.lla11y-x) { letter-spacing: .11em !important; } html.lla11y-ws-1 body *:not(.lla11y-x) { word-spacing: .18em !important; } html.lla11y-ws-2 body *:not(.lla11y-x) { word-spacing: .34em !important; } html.lla11y-align-left body p, html.lla11y-align-left body li, html.lla11y-align-left body td, html.lla11y-align-left body dd, html.lla11y-align-left body h1, html.lla11y-align-left body h2, html.lla11y-align-left body h3, html.lla11y-align-left body h4, html.lla11y-align-left body h5, html.lla11y-align-left body h6, html.lla11y-align-left body blockquote { text-align: left !important; } /* OpenDyslexic ships with the module. Regular and bold only: the widget never applies italics when this face is active because italic dyslexic faces read worse than the upright one. */ @font-face { font-family: "LL OpenDyslexic"; src: url("/fonts/opendyslexic-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "LL OpenDyslexic"; src: url("/fonts/opendyslexic-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } html.lla11y-font-dys body *:not(.lla11y-x):not(.fa):not([class*="fa-"]):not(i) { font-family: "LL OpenDyslexic", "OpenDyslexic", Verdana, Tahoma, sans-serif !important; font-style: normal !important; } html.lla11y-font-read body *:not(.lla11y-x):not(.fa):not([class*="fa-"]):not(i) { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; } html.lla11y-font-mono body *:not(.lla11y-x):not(.fa):not([class*="fa-"]):not(i) { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important; } /* ---- 3. Color and contrast --------------------------------------------- */ /* Filters ride on the document root. Per the Filter Effects spec the root element is exempt from the "creates a containing block" rule, so page elements that rely on position:fixed keep working. The widget host is counter filtered where the operation is reversible. */ html.lla11y-invert { filter: invert(1) hue-rotate(180deg); background: #ffffff; } html.lla11y-invert #ll-a11y-root { filter: invert(1) hue-rotate(180deg); } html.lla11y-invert body img, html.lla11y-invert body video, html.lla11y-invert body picture, html.lla11y-invert body svg image { filter: invert(1) hue-rotate(180deg); } html.lla11y-sat-low { filter: saturate(.45); } html.lla11y-sat-high { filter: saturate(1.9); } html.lla11y-sat-none { filter: grayscale(1); } html.lla11y-invert.lla11y-sat-none { filter: invert(1) hue-rotate(180deg) grayscale(1); } /* High contrast is written as explicit colors rather than a filter so that the widget chrome, photographs and the dealer logo stay untouched. */ html.lla11y-hc-dark body, html.lla11y-hc-dark body *:not(.lla11y-x) { background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } /* The :not(.lla11y-x) on each of these is not filtering anything: it is here to carry one more class into the specificity so these element rules beat the blanket `body *:not(.lla11y-x)` above. Without it every link and button came out plain white and links stopped being distinguishable at all, which is WCAG 1.4.1 failing inside the contrast aid itself. */ html.lla11y-hc-dark body a:not(.lla11y-x), html.lla11y-hc-dark body a:not(.lla11y-x) * { color: #ffff2b !important; text-decoration: underline !important; } html.lla11y-hc-dark body button:not(.lla11y-x), html.lla11y-hc-dark body [role="button"]:not(.lla11y-x), html.lla11y-hc-dark body input[type="submit"]:not(.lla11y-x) { background-color: #000000 !important; color: #ffff2b !important; border: 2px solid #ffff2b !important; } html.lla11y-hc-dark body input:not(.lla11y-x), html.lla11y-hc-dark body select:not(.lla11y-x), html.lla11y-hc-dark body textarea:not(.lla11y-x) { background-color: #000000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } html.lla11y-hc-dark body input::placeholder, html.lla11y-hc-dark body textarea::placeholder { color: #c9c9c9 !important; opacity: 1 !important; } /* A white plate behind every image. Photographs are opaque so nothing about them changes, but a dealer logo drawn as dark artwork on a transparent PNG would otherwise disappear entirely against the forced black background, which is how a contrast aid ends up removing content. */ html.lla11y-hc-dark body img:not(.lla11y-x) { background: #ffffff !important; } html.lla11y-hc-dark body video { background: transparent !important; } html.lla11y-hc-light body, html.lla11y-hc-light body *:not(.lla11y-x) { background-color: #ffffff !important; background-image: none !important; color: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } html.lla11y-hc-light body a:not(.lla11y-x), html.lla11y-hc-light body a:not(.lla11y-x) * { color: #0000cc !important; text-decoration: underline !important; } html.lla11y-hc-light body button:not(.lla11y-x), html.lla11y-hc-light body [role="button"]:not(.lla11y-x), html.lla11y-hc-light body input[type="submit"]:not(.lla11y-x) { background-color: #ffffff !important; color: #00006e !important; border: 2px solid #00006e !important; } html.lla11y-hc-light body input:not(.lla11y-x), html.lla11y-hc-light body select:not(.lla11y-x), html.lla11y-hc-light body textarea:not(.lla11y-x) { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; } html.lla11y-hc-light body input::placeholder, html.lla11y-hc-light body textarea::placeholder { color: #4a4a4a !important; opacity: 1 !important; } /* ---- 4. Focus, links, headings, hit targets ---------------------------- */ html.lla11y-focus body a:focus, html.lla11y-focus body button:focus, html.lla11y-focus body input:focus, html.lla11y-focus body select:focus, html.lla11y-focus body textarea:focus, html.lla11y-focus body summary:focus, html.lla11y-focus body [tabindex]:focus, html.lla11y-focus body [role="button"]:focus, html.lla11y-focus body [contenteditable="true"]:focus { outline: 3px solid #2E2417 !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px rgba(197, 245, 60, .95) !important; border-radius: 4px; } html.lla11y-hl-links body a:not(.lla11y-x), html.lla11y-hl-links body [role="link"] { text-decoration: underline !important; text-underline-offset: 2px !important; text-decoration-thickness: 2px !important; outline: 2px solid #E9BC5C !important; outline-offset: 1px; background-color: rgba(197, 245, 60, .22) !important; } html.lla11y-hl-heads body h1, html.lla11y-hl-heads body h2, html.lla11y-hl-heads body h3, html.lla11y-hl-heads body h4, html.lla11y-hl-heads body h5, html.lla11y-hl-heads body h6, html.lla11y-hl-heads body [role="heading"] { outline: 2px dashed #2E2417 !important; outline-offset: 3px; background-color: rgba(197, 245, 60, .16) !important; } html.lla11y-hover body a:hover, html.lla11y-hover body button:hover, html.lla11y-hover body [role="button"]:hover, html.lla11y-hover body label:hover, html.lla11y-hover body [tabindex]:hover { outline: 3px solid #E9BC5C !important; outline-offset: 2px !important; background-color: rgba(12, 12, 18, .06) !important; } /* Pointer target enlargement. Padding is added rather than a fixed height so that inline controls inside sentences do not break the line box. */ html.lla11y-targets body a, html.lla11y-targets body button, html.lla11y-targets body [role="button"], html.lla11y-targets body input[type="checkbox"], html.lla11y-targets body input[type="radio"] { min-height: 24px; min-width: 24px; } html.lla11y-targets body button, html.lla11y-targets body [role="button"], html.lla11y-targets body input[type="submit"], html.lla11y-targets body input[type="button"] { min-height: 44px !important; padding-left: 14px !important; padding-right: 14px !important; } html.lla11y-targets body input[type="checkbox"], html.lla11y-targets body input[type="radio"] { transform: scale(1.45); transform-origin: left center; margin-right: 8px !important; } /* ---- 5. Motion --------------------------------------------------------- */ html.lla11y-noanim body *:not(.lla11y-x), html.lla11y-noanim body *:not(.lla11y-x)::before, html.lla11y-noanim body *:not(.lla11y-x)::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.lla11y-noanim body [style*="animation"] { animation: none !important; } /* ---- 6. Cursors and reading aids --------------------------------------- */ html.lla11y-cursor-big body, html.lla11y-cursor-big body * { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M8 3 8 41 18 32 25 47 33 43 26 29 40 29 Z' fill='%23ffffff' stroke='%232E2417' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; } html.lla11y-cursor-big body a, html.lla11y-cursor-big body button, html.lla11y-cursor-big body [role="button"], html.lla11y-cursor-big body label, html.lla11y-cursor-big body select { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M18 4c-2 0-3 1.6-3 3.4v18l-3.4-4a3.4 3.4 0 0 0-5.4 4l10 15c1.3 2 3 3 5.4 3h13c3.6 0 6.4-2.8 6.4-6.4V22c0-2-1.4-3.4-3.2-3.4S34.6 20 34.6 22v-1.6c0-2-1.4-3.4-3.2-3.4S28 18.4 28 20.4V19c0-2-1.4-3.4-3.2-3.4S21.4 17 21.4 19V7.4C21.4 5.6 20 4 18 4z' fill='%23E9BC5C' stroke='%232E2417' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4, pointer !important; } html.lla11y-cursor-dark body, html.lla11y-cursor-dark body * { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M8 3 8 41 18 32 25 47 33 43 26 29 40 29 Z' fill='%232E2417' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; } .lla11y-mask { position: fixed; left: 0; right: 0; z-index: 2147482900; background: rgba(8, 8, 12, .78); pointer-events: none; } .lla11y-mask-top { top: 0; } .lla11y-mask-bottom { bottom: 0; } .lla11y-guide { position: fixed; left: 0; right: 0; height: 0; z-index: 2147482900; border-top: 4px solid #2E2417; border-bottom: 4px solid #E9BC5C; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); } /* Element the read aloud engine is speaking right now. */ .lla11y-speaking { outline: 3px solid #2E2417 !important; outline-offset: 2px !important; background-color: rgba(197, 245, 60, .38) !important; } /* ---- 7. Guards --------------------------------------------------------- */ @media print { .lla11y-skip, .lla11y-mask, .lla11y-guide, #ll-a11y-root { display: none !important; } } @media (prefers-reduced-motion: reduce) { .lla11y-skip { transition: none; } }