/** * ADA Compliance Fixer — CSS fixes. * * 1. Skip-to-main-content link (visible only on keyboard focus). * 2. Visible focus indicators on all interactive elements. * 3. scroll-padding-top fallback for browsers where JS hasn't run yet. * (JS override in ada-fixes.js reads the real header height at runtime.) */ /* ── 1. Skip link ──────────────────────────────────────────────────────── */ .ada-skip-link { position: absolute; top: -9999px; left: 6px; z-index: 999999; padding: 8px 16px; background: #063452; /* matches UserWay dark theme */ color: #ffffff; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.15s ease; } .ada-skip-link:focus { top: 0; outline: 3px solid #ffbf47; outline-offset: 2px; } /* ── 2. Focus indicators ───────────────────────────────────────────────── */ /* * Many themes suppress the browser default outline entirely. * These rules restore a strong, high-contrast focus ring on all * keyboard-interactive elements without affecting mouse users * (browsers that support :focus-visible will only apply the ring * when navigating by keyboard). */ :focus-visible { outline: 3px solid #005fcc !important; outline-offset: 3px !important; border-radius: 2px; } /* Fallback for browsers that don't support :focus-visible */ a:focus, button:focus, input:focus, select:focus, textarea:focus, [role="button"]:focus, [tabindex]:focus { outline: 3px solid #005fcc; outline-offset: 3px; } /* Suppress outline for mouse users via JS-added .ada-mouse-user class on */ .ada-mouse-user a:focus, .ada-mouse-user button:focus, .ada-mouse-user input:focus, .ada-mouse-user select:focus, .ada-mouse-user textarea:focus, .ada-mouse-user [role="button"]:focus, .ada-mouse-user [tabindex]:focus { outline: none; } /* ── 3. Sticky-header scroll offset (CSS fallback) ─────────────────────── */ /* * Fix #43 — prevents the sticky header from covering keyboard-focused elements. * JS in ada-fixes.js overwrites this with the measured real header height. * 133px matches the Divi default for bcrdentistry.com. */ html { scroll-padding-top: 133px; } /* ── 4. Keyboard-navigable carousel controls ───────────────────────────── */ /* * Divi carousel arrows styled as links get role="button" from our JS. * Ensure they show a cursor and focus ring consistent with buttons. */ .et-pb-arrow-prev[role="button"], .et-pb-arrow-next[role="button"], .et-pb-active-control[role="button"], .et-pb-slide-control[role="button"] { cursor: pointer; }