/* Oliva layout reservation. * * Reserve each section container's space BEFORE scripts run. * * The themes use Owl Carousel for the hero and the testimonial strip, and * owl.carousel.css ships this: * .owl-carousel { display: none } * .owl-loaded { display: block } * `owl-loaded` is only added by jquery.waypoints-era main.js, which sits at the * end of . Until then the carousel occupies ZERO height, so the page * skeleton has a 900px hole at the top and the next section renders at the very * top of the page. When main.js finally runs, the hero materialises at its full * height and pushes everything below it down — a large, very visible jump. * * The fix is to keep the container in flow while it is not yet loaded, so the * space is claimed from the very first paint. Heights are NOT hard-coded: the * theme stylesheet already declares the real value (`.home-slider` is 900px, * with its own media queries), and simply un-hiding the container makes the * browser apply it. The min-heights below are only a floor for the case where * the theme sheet is unavailable, and are always below the real value so they * can never fight it. * * Every rule is scoped to :not(.owl-loaded), so the moment Owl initialises the * reservation is dropped in the same frame Owl sets its own layout. There is no * intermediate state, and nothing can stay hidden if JavaScript fails outright. */ /* Claim the space. `visibility` is deliberately left alone: an un-ready carousel shows its (unstyled) content rather than a blank box that would linger forever if main.js never loaded. `position: relative` is required because Owl's own base rule (.owl-carousel) sets no position, and without it the absolutely-positioned children below would resolve against some distant ancestor and escape the reserved box. */ .owl-carousel:not(.owl-loaded) { display: block; position: relative; } /* Overlay the un-loaded children so a multi-slide container reserves exactly one slide's height instead of stacking them. */ .owl-carousel:not(.owl-loaded) > * { position: absolute; top: 0; left: 0; width: 100%; } /* The hero: the theme gives `.owl-carousel.home-slider` a 900px height, so reserving it is exact. 480px is a floor for a missing theme sheet, and is chosen low enough never to override the real value. */ .owl-carousel.home-slider:not(.owl-loaded) { min-height: 480px; } /* The testimonial strip has no declared height of its own (only padding on .owl-stage-outer), so it needs a floor. It sits below the fold, and the reservation is dropped the instant Owl initialises. */ .owl-carousel.carousel-testimony:not(.owl-loaded), .owl-carousel.ftco-owl:not(.owl-loaded) { min-height: 380px; } /* Generic floor for any other carousel the themes introduce. */ .owl-carousel:not(.owl-loaded) { min-height: 300px; }