/* ===== Tour Sticky Nav widget (widgets/tour-sticky-nav-widget.php) - the v3 design's section tabs, sticky under the theme header. Colors read Elementor's own global color variables (var(--x, #hex)), same convention as every other widget CSS in this plugin. ===== */ /* Confirmed live: carries overflow:hidden (x) / auto (y) from the theme, most likely to stop an unrelated horizontal-scroll issue. That ancestor rule silently disables position:sticky for every descendant on the page, in every browser - not a specificity fight, an actual CSS sticky-context rule. overflow-x: clip keeps the same "no horizontal scrollbar" behavior the theme wants without creating that broken scrolling context, so this fixes it without touching the theme itself. Also needed by the itinerary map's own sticky column - see the identical rule in itinerary-map.css. */ body { overflow-x: clip !important; } /* position:sticky as a baseline (harmless when it doesn't activate, e.g. with JS disabled) - the actual "stays pinned" behavior on this site comes from .is-pinned below, toggled by assets/js/tour-sticky-nav.js. See that file's own docblock for why: Elementor wraps this widget in its own per-widget section, and on the live page that resolves this element's computed position to "relative", not "sticky", at every width tested - confirmed directly (getComputedStyle + tracking scroll deltas), not a guess. */ .tour_sticky_nav { position: sticky; top: 0; z-index: 40; background-color: rgba(243, 239, 232, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #e3d9ca; } .tour_sticky_nav.is-pinned { position: fixed; top: 0; left: 0; right: 0; } .tour_sticky_nav_inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .tour_sticky_nav_tabs { display: flex; gap: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tour_sticky_nav_tabs::-webkit-scrollbar { display: none; } .tour_sticky_nav_tab { flex: 0 0 auto; padding: 18px 0; font-size: 14px; font-weight: 600; color: var(--muted, #6f6458); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 150ms, border-color 150ms; } .tour_sticky_nav_tab:hover { color: var(--ink, #2b2420); } .tour_sticky_nav_tab.is-active { color: var(--ink, #2b2420); border-bottom-color: var(--pink-action, #e8334f); } .tour_sticky_nav_cta { display: none; align-items: center; gap: 18px; flex: 0 0 auto; } .tour_sticky_nav_price { font-size: 15px; color: var(--ink, #2b2420); white-space: nowrap; } .tour_sticky_nav_price_original { opacity: 0.6; margin-right: 4px; } .tour_sticky_nav_price_sale { color: var(--e-global-color-e352649, #ca2c45); } /* !important on color/background - see the identical comment on .tour_hero_cta_btn in tour-hero-widget.css for why. */ .tour_sticky_nav_cta_btn { display: inline-block; font-size: 14px; font-weight: 600; background-color: var(--pink-action, #e8334f) !important; color: #fff !important; padding: 12px 24px; text-decoration: none; white-space: nowrap; transition: background-color 150ms; } .tour_sticky_nav_cta_btn:hover { background-color: var(--e-global-color-e352649, #ca2c45) !important; color: #fff !important; } @media only screen and (min-width: 820px) { .tour_sticky_nav_cta { display: flex; } } /* The offset that keeps each section's own heading from landing underneath the fixed nav on an anchor jump (click or back/forward) - plain CSS, no JS needed. Matches every id the nav's tabs target; #highlights and #similar-tours are given manually (see the widget's own admin notice) but still get the same offset once they exist. */ #tour-dates, #itinerary, #included, #hotels, #highlights, #similar-tours { scroll-margin-top: 90px; } @media only screen and (max-width: 480px) { .tour_sticky_nav_inner { padding: 0 20px; } .tour_sticky_nav_tabs { gap: 20px; } }