/* ========================================================================== Smile Club — responsive, accessibility & polish fixes Loaded by the Smile Club Enhancements plugin (survives theme updates). Conventions follow the site's existing fluid clamp() spacing utilities. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Stop the page scrolling sideways Elementor entrance animations (.elementor-invisible) translate elements in from off-canvas. Without clipping, that briefly widens the document and produces a horizontal scrollbar on tablet/mobile. Clipping on (not ) keeps position: sticky working. -------------------------------------------------------------------------- */ body { overflow-x: clip; } /* Fallback for browsers without overflow: clip */ @supports not (overflow: clip) { body { overflow-x: hidden; } } /* -------------------------------------------------------------------------- 2. Responsive tables Long policy tables (Privacy Policy, cookie tables) were forcing the page ~113px wider than the viewport on a 375px screen. They now scroll inside their own container instead of dragging the whole layout with them. -------------------------------------------------------------------------- */ .sce-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-block: clamp(1rem, 0.77rem + 1.03vw, 1.5rem); /* Subtle edge hint that there is more to scroll */ background: linear-gradient(to right, var(--sce-surface, #fff) 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), var(--sce-surface, #fff) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(16, 42, 67, 0.16), transparent), radial-gradient(farthest-side at 100% 50%, rgba(16, 42, 67, 0.16), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .sce-table-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .sce-table-scroll > table { min-width: 32rem; /* keep columns readable rather than crushing them */ margin: 0; } /* Cookie/policy tables read better with breathing room and zebra rows */ .sce-table-scroll th, .sce-table-scroll td { padding: 0.6rem 0.85rem; vertical-align: top; text-align: left; } .sce-table-scroll tbody tr:nth-child(odd) { background-color: rgba(16, 42, 67, 0.035); } /* Very small screens: let dense tables shrink a little rather than scroll far */ @media (max-width: 480px) { .sce-table-scroll > table { min-width: 26rem; font-size: 0.9rem; } } /* -------------------------------------------------------------------------- 3. Tap targets The mobile menu trigger is a 30x22px Lottie animation — below the 44x44px minimum recommended by WCAG 2.5.8 / iOS HIG. Widen the hit area without changing how it looks. -------------------------------------------------------------------------- */ .e-lottie__container__link { position: relative; display: inline-flex; align-items: center; justify-content: center; } .e-lottie__container__link::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } /* Footer/social icon links frequently fall under 44px too */ .elementor-social-icon, .elementor-icon-list-item > a { min-height: 44px; display: inline-flex; align-items: center; } /* -------------------------------------------------------------------------- 4. Visible keyboard focus Hello Elementor ships almost no focus styling, which makes the site hard to navigate by keyboard. :focus-visible keeps mouse clicks clean. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1f6f7a; outline-offset: 2px; border-radius: 2px; } /* Skip link — present in Hello Elementor but visually lost off-screen */ .skip-link:focus, .skip-link:focus-visible { position: fixed !important; top: 0.5rem; left: 0.5rem; z-index: 100000; width: auto; height: auto; padding: 0.75rem 1.25rem; clip: auto; clip-path: none; background: #102a43; color: #fff; border-radius: 4px; font-weight: 600; text-decoration: none; } /* -------------------------------------------------------------------------- 5. Media hygiene Guard against any oversized image or embed forcing a horizontal scroll. -------------------------------------------------------------------------- */ img, video, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* Long unbroken strings (URLs in policy pages) shouldn't widen the layout */ .elementor-widget-text-editor, .entry-content { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 6. Motion sensitivity The homepage leans on entrance animations and a Lottie menu icon. Honour the OS-level "reduce 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; } /* Elementor hides animated elements until their animation runs; with animations suppressed they must be forced visible. */ .elementor-invisible { visibility: visible !important; opacity: 1 !important; } } /* -------------------------------------------------------------------------- 7. Print — patients do print treatment/fee pages -------------------------------------------------------------------------- */ @media print { header, footer, .elementor-location-header, .elementor-location-footer, .grecaptcha-badge, .elementor-popup-modal { display: none !important; } .sce-table-scroll { overflow: visible; background: none; } .sce-table-scroll > table { min-width: 0; } body { color: #000; } } /* -------------------------------------------------------------------------- 8. Visually-hidden utility Content that must exist for screen readers and search engines but has a visual equivalent already on the page (see the front-page

). -------------------------------------------------------------------------- */ .sce-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }