/* ========================================================================== Fixes and mobile affordances layered on top of the vendored theme. Deliberately additive: nothing here edits the theme's own stylesheet, so a future theme update cannot silently drop these behind it. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Sticky-header scroll jump -------------------------------------------------------------------------- The theme toggles `.is-fixed` on `.sticky-header` from a scroll handler, and `.is-fixed .main-bar` is `position: fixed`. Going fixed pulls the bar out of flow, so the document instantly shrinks by the header's height and the content jumps upward. That changes scrollY, which re-runs the same handler, which can remove the class again -- an oscillation that reads to the user as "I scrolled down and got thrown back to the top". Reserving the vacated height keeps the document a constant size, so the toggle becomes visually inert and the feedback loop cannot start. `--dz-sticky-h` is measured once by site-fixes.js; the 0px fallback means this rule does nothing if the script has not run. */ .sticky-header.main-bar-wraper { min-height: var(--dz-sticky-h, 0px); } /* Anchors must not slide under the now-fixed bar. */ html { scroll-padding-top: calc(var(--dz-sticky-h, 0px) + 10px); } /* -------------------------------------------------------------------------- 2. Back-to-top button stealing the end of a scroll gesture -------------------------------------------------------------------------- `.scroltop` is fixed at the bottom-left and the theme adds `.show` to it from a scroll handler, so it animates into place *while the finger is still down*. It carries no pointer-events guard, so a swipe that ends with only a few pixels of movement is classified by the browser as a tap -- and that tap lands on the button that just appeared under the finger, which calls scrollTo({top: 0}). That is the "scrolled down, flicked slightly up, thrown to the top" report. Two guards: a hidden control is never tappable, and no control is tappable while a touch gesture is in flight. */ .scroltop { pointer-events: none; } .scroltop.show { pointer-events: auto; } /* Set on between touchstart and shortly after touchend. */ .dz-touching .scroltop { pointer-events: none !important; } /* -------------------------------------------------------------------------- 3. Navigation apps -------------------------------------------------------------------------- Rendered in the footer and on the contact page, both of which sit outside .ov-scope, so these values are self-contained rather than token-based. */ .nav-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .nav-apps__btn { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; min-height: 52px; padding: 0.6rem 0.9rem; border-radius: 12px; border: 1.5px solid rgba(226, 233, 245, 0.85); background: #fff; color: #0f1e3d; text-decoration: none; font-size: 0.92rem; font-weight: 700; line-height: 1.4; transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .nav-apps__btn:hover, .nav-apps__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(3, 27, 78, 0.12); color: #0f1e3d; } .nav-apps__dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 0.78rem; font-weight: 700; flex: none; } /* On the dark footer the buttons invert. */ .footer .nav-apps__btn, .site-footer .nav-apps__btn { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: #fff; } .footer .nav-apps__btn:hover, .site-footer .nav-apps__btn:hover { background: rgba(255, 255, 255, 0.13); color: #fff; } .nav-apps__note { margin: 0 0 0.75rem; font-size: 0.87rem; line-height: 1.8; opacity: 0.85; } /* -------------------------------------------------------------------------- 4. Header -------------------------------------------------------------------------- One row on every breakpoint: menu button, then the three primary actions. The theme's own markup order is menu / actions / nav / extra-nav, and flex `order` keeps that visually correct in RTL without touching the template. */ /* The theme floats the toggler physically left, which in an RTL document puts it on the wrong side. `inline-start` follows the writing direction. */ .w3menu-toggler { float: none; margin: 0; flex: none; } /* --- Phone and tablet: single action row -------------------------------- */ @media (max-width: 991px) { .site-header .main-bar .inner-bar { display: flex; align-items: center; gap: 0.5rem; padding-inline: 0.75rem; min-height: 64px; } /* Menu button first in the reading direction (right, in RTL). */ .w3menu-toggler { order: 1; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); transition: background-color 0.15s ease, transform 0.12s ease; } .w3menu-toggler:active { transform: scale(0.94); } .w3menu-toggler:hover { background: rgba(255, 255, 255, 0.22); } .w3menu-toggler > span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; margin: 0; } .hdr-cta { order: 2; flex: 1; min-width: 0; } /* The offcanvas trigger duplicated the menu button, and the pill duplicated the appointment action. Both are redundant now. */ .site-header .extra-nav { display: none; } } /* --- The action group --------------------------------------------------- */ .hdr-cta { display: none; align-items: center; gap: 0.4rem; } @media (max-width: 991px) { .hdr-cta { display: flex; } } .hdr-cta__item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; height: 44px; padding-inline: 0.55rem; border-radius: 12px; text-decoration: none; font-size: 0.82rem; font-weight: 700; line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease; } .hdr-cta__item:active { transform: scale(0.96); } .hdr-cta__item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hdr-cta__icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; } .hdr-cta__icon svg { display: block; } .hdr-cta__label { overflow: hidden; text-overflow: ellipsis; } /* Solid, secondary, outline -- a clear visual hierarchy rather than three identical buttons. */ .hdr-cta__item--primary { background: #00bde0; color: #03204f; box-shadow: 0 2px 10px rgba(0, 189, 224, 0.35); } .hdr-cta__item--primary:hover, .hdr-cta__item--primary:focus { background: #21cbea; color: #03204f; } .hdr-cta__item--accent { background: #fff; color: #03204f; } .hdr-cta__item--accent:hover, .hdr-cta__item--accent:focus { background: #eef6ff; color: #03204f; } .hdr-cta__item--ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; } .hdr-cta__item--ghost:hover, .hdr-cta__item--ghost:focus { background: rgba(255, 255, 255, 0.2); color: #fff; } /* Tablets: stop the buttons stretching across the whole bar. They keep their natural size and the group sits at the inline end, opposite the menu. */ @media (min-width: 600px) and (max-width: 991px) { .hdr-cta { flex: 0 1 auto; margin-inline-start: auto; gap: 0.55rem; } .hdr-cta__item { flex: 0 0 auto; padding-inline: 1.1rem; font-size: 0.88rem; } } /* Narrow phones: the row stays one line by tightening spacing first, and only dropping labels on genuinely tiny screens. All three labels must survive 375px, which is the most common phone width in use. */ @media (max-width: 480px) { .site-header .main-bar .inner-bar { gap: 0.3rem; padding-inline: 0.45rem; } .hdr-cta { gap: 0.28rem; } .hdr-cta__item { font-size: 0.72rem; padding-inline: 0.3rem; gap: 0.25rem; letter-spacing: -0.01em; } .hdr-cta__icon { width: 16px; height: 16px; } .hdr-cta__icon svg { width: 15px; height: 15px; } } /* Below ~340px the tracking label is the first to go: it is the least used of the three and its magnifier icon still reads as "find my visit". */ @media (max-width: 340px) { .hdr-cta__item--ghost .hdr-cta__label { display: none; } .hdr-cta__item--ghost { flex: 0 0 40px; } } /* --- Desktop balance ---------------------------------------------------- */ @media (min-width: 992px) { /* container-fluid pins the bar to the viewport edges, which reads as left-heavy once the nav and the CTA sit at opposite ends. Constraining and centring the inner bar gives the composition a middle. */ .site-header .main-bar .inner-bar { max-width: 1320px; margin-inline: auto; padding-inline: 1.5rem; align-items: center; justify-content: space-between; gap: 1.5rem; } .site-header .header-nav { flex: 1; display: flex; justify-content: center; } .site-header .header-nav .nav { margin-inline: auto; } .site-header .extra-nav { float: none; flex: none; } } /* -------------------------------------------------------------------------- 5. Back-to-top target size -------------------------------------------------------------------------- The theme shrinks it to 35px under 575px, below the 44px minimum for a touch target. */ @media (max-width: 575px) { .scroltop { width: 44px; height: 44px; line-height: 44px; inset-inline-start: 16px; bottom: 20px; } } /* -------------------------------------------------------------------------- 6. Motion preferences -------------------------------------------------------------------------- The theme animates on scroll via WOW.js and CSS transitions. Users who ask for reduced motion should get none of it, including the smooth scroll the back-to-top button requests. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .hdr-cta__item, .scroltop, .w3menu-toggler, .nav-apps__btn { transition: none !important; } .wow, .animated { animation: none !important; visibility: visible !important; } } /* -------------------------------------------------------------------------- 7. Footer link tap areas -------------------------------------------------------------------------- Footer navigation links rendered at their bare line height, which is well under a comfortable touch target. Inline links inside prose are exempt from the guidance; a stacked list of navigation links is not. */ @media (max-width: 991px) { .footer .widget_services .list-hover1 > li > a, .footer .widget_getintuch li, .site-footer .widget_services ul > li > a { display: block; padding-block: 0.45rem; min-height: 40px; } } /* -------------------------------------------------------------------------- 8. Preloader safety -------------------------------------------------------------------------- The theme hides the preloader from JavaScript. If that script ever fails the overlay would cover the site forever, so it also times itself out. */ .dz-preloader-1 { animation: dz-preloader-failsafe 0s linear 6s forwards; } @keyframes dz-preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* -------------------------------------------------------------------------- 9. Phone links and the off-canvas close button -------------------------------------------------------------------------- Calling the clinic is the single most common action on a phone, so tel: links get a real target rather than bare line-height. */ @media (max-width: 991px) { a[href^="tel:"] { display: inline-block; padding-block: 0.35rem; min-height: 36px; } /* Bootstrap ships this at 21px. */ .dz-offcanvas .btn-close { width: 44px; height: 44px; background-size: 16px; background-position: center; opacity: 0.85; } }