/* public/css/sticky-header-fix.css
* ADDITIVE ONLY.
*
* Native CSS `scroll-behavior: smooth` (set globally on in
* style8717.css) fights with jQuery's manual scrollTop animate() calls
* (scroll-to-top button, one-page anchor nav): each intermediate scrollTop
* value jQuery sets gets re-smoothed by the browser on top of jQuery's own
* easing, compounding into a multi-second crawl instead of the intended
* ~400ms scroll. Disable native smooth-scroll so jQuery is the only thing
* driving the animation.
*/
html {
scroll-behavior: auto !important;
}
/* ADDITIVE ONLY — fixes the "huge logo on scroll / on mobile" bug.
*
* Root cause: the logo ![]()
only has width="240" height="58" as HTML
* attributes, but the theme's generic CSS reset (img { max-width:100%;
* height:auto }) lets it scale up to fill whatever column it sits in.
* The real logo file (crown monogram) is roughly square, not a wide
* 240x58 lockup — so once the column is wider than ~240px (which happens
* on mobile once things stack, and on the sticky/fixed header), "100%
* width, auto height" makes a square image render many times taller
* than intended. That's the giant logo you saw after scrolling.
*
* Fix: force a fixed, small max-height on the logo in every context
* (top header, sticky/fixed header, mobile hamburger menu logo) so it
* looks the same size on mobile and desktop, scrolled or not.
*/
.master-logo.logo-image img,
.qondri-header-fixed .master-logo.logo-image img {
height: 40px !important;
width: auto !important;
max-width: 160px !important;
max-height: 40px !important;
object-fit: contain;
}
/* The hamburger-menu overlay logo is intentionally a bit bigger in the
original markup (width="290" height="70") — keep it slightly larger
than the header logo, but still capped, not free to blow up. */
.menu-logo img {
height: 56px !important;
width: auto !important;
max-width: 220px !important;
max-height: 56px !important;
object-fit: contain;
}
/* Keep the sticky/fixed header itself compact — don't let its section,
column or widget-wrap stretch to fill extra vertical space once the
logo is no longer forcing a large height. */
.qondri-header-fixed {
max-height: 80px;
overflow: hidden;
}
.qondri-header-fixed .elementor-container,
.qondri-header-fixed .elementor-column,
.qondri-header-fixed .elementor-widget-wrap {
height: auto !important;
}
@media (max-width: 767px) {
.master-logo.logo-image img,
.qondri-header-fixed .master-logo.logo-image img {
height: 32px !important;
max-height: 32px !important;
max-width: 130px !important;
}
.menu-logo img {
height: 44px !important;
max-height: 44px !important;
max-width: 170px !important;
}
.qondri-header-fixed {
max-height: 64px;
}
}
/* -------------------------------------------------------------------
* FIX: white boxes at top-left / top-right on page load.
*
* Root cause: the two header Elementor sections (top mini-bar with
* email/address, and the main nav bar) are both marked
* `elementor-section-stretched`, which only bleeds a boxed-container
* section to full viewport width via Elementor's frontend JS (it
* measures the viewport and injects an inline `left`/`width` offset
* on load/resize). That JS init never runs correctly in this static
* export, so the section stays at its normal *boxed* max-width and
* the raw white page background shows through in the leftover margins
* on both sides — sitting on top of the hero photo / header content
* that's supposed to be visible there. That's the white boxes.
*
* Fix: bleed those two header sections full-width with a pure-CSS
* trick (100vw + negative margin via translateX), so it no longer
* depends on the missing JS. Scoped to #site-header-wrap only, so it
* doesn't affect any other stretched section elsewhere on the site.
* ------------------------------------------------------------------- */
#site-header-wrap .elementor-section-stretched {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
left: 50% !important;
right: auto !important;
margin-left: -50vw !important;
transform: none !important;
}
/* Prevent the 100vw trick from causing a horizontal scrollbar if a
vertical scrollbar is present (100vw includes the scrollbar width
on most browsers). */
body {
overflow-x: hidden;
}
/* -------------------------------------------------------------------
* FIX: thin white bar at the very top of the page.
*
* Root cause: the injected by header.php never
* gets removed because the theme JS that fades it out doesn't complete
* in this static export — it collapses to a thin empty white strip
* sitting above the header. Also zero out any default top margin on
* html/body so nothing else can leave a gap above #site-header-wrap.
* ------------------------------------------------------------------- */
#preloader {
display: none !important;
}
html,
body {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
#site-header-wrap {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* The top mini-bar (email/address) is being clipped at the top: some
* theme rule pulls it up behind the browser edge with a negative
* margin/transform, leaving a thin white strip and half-hidden text.
* Neutralize any upward offset on the first header section and give
* the mini-bar its full height back. */
#site-header-wrap .elementor-element-8c4de03 {
margin-top: 0 !important;
top: 0 !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
overflow: visible !important;
}
#site-header-wrap .qondri-header {
margin-top: 0 !important;
padding-top: 0 !important;
transform: none !important;
}