/* ============================================================ Sticky header + Back-to-Top button Divi's native et_fixed_nav did not toggle .et-fixed-header on this Theme-Builder page, so the header (#main-header, position: absolute) simply scrolled away. This adds a self-contained, framework-independent sticky header and a back-to-top control. Colours match the brand: dark-brown header (rgb 73,49,44), gold accent (rgb 241,194,49). ============================================================ */ /* --- Kill horizontal scrolling (iOS-safe) --------------------------- */ /* The layout fits the viewport, but iOS Safari frequently ignores overflow-x:hidden when it's only on . Clipping on as well reliably stops any left/right rubber-band scrolling. `clip` is used where supported (no scroll container, no side effects); `hidden` is the fallback for older iOS. */ html, body { overflow-x: hidden !important; overflow-x: clip !important; max-width: 100% !important; } /* --- Anchor offset --------------------------------------------------- */ /* Menu links jump to in-page sections; the fixed header would otherwise cover the section title. scroll-margin-top pushes the landing point down for hash navigation, Divi smooth-scroll and scrollIntoView(). (Lives in this new file so it reaches all visitors immediately.) */ #leistungen, #galerie, #chantra-faq, #chantra-hours, #chantra-reviews, #chantra-booking { scroll-margin-top: 96px; } /* --- Sticky header -------------------------------------------------- */ #main-header { transition: box-shadow 0.3s ease; will-change: transform; } body.chantra-stuck #main-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.25); animation: chantraSlideDown 0.35s ease; } @keyframes chantraSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Respect users who prefer no motion. */ @media (prefers-reduced-motion: reduce) { body.chantra-stuck #main-header { animation: none; } } /* Slimmer sticky bar on phones (~66% of the normal height, ca. 80px -> 54px). chantra-stuck is only added on mobile, where we take over from Divi. The default (top) header keeps its full height; only the stuck bar shrinks. */ #main-header #logo, #main-header #et-top-navigation, #main-header .mobile_menu_bar { transition: max-height 0.25s ease, padding 0.25s ease; } body.chantra-stuck #main-header #et-top-navigation { padding-top: 11px !important; } body.chantra-stuck #main-header .mobile_menu_bar { padding-bottom: 11px !important; } body.chantra-stuck #main-header #logo { max-height: 36px !important; } /* --- Back-to-Top button --------------------------------------------- */ .chantra-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(241, 194, 49, 0.55); border-radius: 50%; background: #49312c; color: #f1c231; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease; z-index: 9998; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); -webkit-appearance: none; appearance: none; } .chantra-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .chantra-top:hover, .chantra-top:focus-visible { background: #5e3f29; color: #ffdd6b; outline: none; } @media (max-width: 480px) { .chantra-top { right: 14px; bottom: 14px; width: 44px; height: 44px; font-size: 22px; } }