/* ============================================================ GSAP OBSERVER — FULL-PAGE SECTION TRANSITIONS (styles) Pairs with js/gsap-section-transitions.js, which replaces the old ScrollTrigger pin+scrub panel-stack animation with discrete, Observer-driven section transitions (GreenSock Observer demo pattern), applied to the existing #panel-stack / .fs-panel markup in index.html. Load this file LAST in (after style.css / custom.css) so its prefers-reduced-motion override below wins on plain source order without needing !important. NOTE: #panel-stack / .fs-panel themselves are already fully styled in css/custom.css (position, stacking, overflow, the existing reduced-motion fallback) - nothing here duplicates that. ============================================================ */ /* ---------- Reduced motion: unlock page scroll ---------- css/style.css sets `body{overflow:hidden}` unconditionally (the site was already built with no normal page scroll - everything happens inside the pinned/fixed panel stack). That's exactly what the Observer-driven panels need, but it also silently defeats the prefers-reduced-motion fallback already defined in custom.css (.panel-stack becomes height:auto/overflow:visible and .fs-panel becomes normal stacked sections) since body itself could never scroll to reach them. This is the one line needed to make that existing fallback actually work: real vertical scrolling only for users who've asked for reduced motion. */ @media (prefers-reduced-motion: reduce) { html, body { overflow-y: auto; height: auto; } } /* ---------- Heading curtain-wipe reveal ---------- .reveal-inner wraps each

's full text (js/gsap-section- transitions.js, wrapHeading()); the panel-entrance timeline animates its clip-path from fully masked to fully revealed. display:inline-block is set inline via gsap.set() at wrap time - this just hints the browser that clip-path is about to animate, on every panel entrance. */ .fs-panel h2 .reveal-inner { will-change: clip-path; } /* Subtle parallax layers (hero background image, the half-width data-bgimage panels) - same will-change hint, transform only. */ .fs-panel .bg-img, .fs-panel [data-bgimage] { will-change: transform; } /* ---------- Pin the footer to the bottom of the contact panel ---------- #section-contact has two children: .container (heading + form) and footer. .fs-panel's justify-content:safe center (custom.css) treats them as one block and centers the whole thing - on a viewport short enough that block doesn't fit, that crops evenly off BOTH ends, so the form's Send Message button could disappear off the top while the footer sat stranded mid-screen instead of at the bottom. margin-top:auto on a flex column child consumes all remaining space above it, which pins footer's bottom edge exactly to the panel's own bottom edge regardless of how tall the contact content above it is - and self-overrides justify-content for this item, so no conflict with the "safe center" rule. .container is then free to render from the top down instead of being centered as part of the same block, so on a short viewport it's the (less important) empty space between the two that shrinks first, not the Send Message button. */ #section-contact footer { margin-top: auto; } /* section.fs-panel (custom.css) gives every panel 30px of bottom padding as breathing room from the viewport edge - wanted for ordinary panel content, but here it left a visible gap of bare panel background below the gold footer band instead of the footer sitting flush against the true bottom edge. Zero it out just for this panel. Desktop/tablet-landscape only (matches the mobile/tablet breakpoint below): on narrower screens the mobile media query further down needs to add ITS OWN bottom padding so scrolled content clears the fixed WhatsApp/Call bar, and #section-contact's ID specificity would beat that class rule regardless of source order or media query if this weren't scoped down to not even apply there. */ @media (min-width: 992px) { #section-contact { padding-bottom: 0; } } /* Side effect of the fix above: footer's auto margin overrides justify-content for the whole flex column, so .container (the heading + form) now packs against the panel's top edge instead of being centered - on a short viewport that puts the "Contact Us" heading directly under the fixed header (~90px tall) instead of below it. Push it down to clear the header explicitly rather than relying on centering math that's no longer in effect for this panel. section. fs-panel (custom.css) already contributes 30px of top padding, so only the remaining ~60px is added here - not the full header height again on top of that padding. */ #section-contact > .container:first-child { margin-top: 60px; } /* ---------- Mobile/tablet: allow scroll within a panel ---------- .fs-panel clips instead of scrolling by default (custom.css) because at desktop widths every panel's content comfortably fits one viewport. That stops being true below Bootstrap's lg breakpoint: philosophy/ what-we-do/team's image+text columns (col-lg-7/col-lg-5) and contact's address+form columns (col-md-6) stack to a single column instead of sitting side by side, making the combined content taller than a phone viewport - with no scroll, the bottom of that content (contact's message field, Send Message button, and footer included) becomes completely unreachable, not just visually cramped. max-width:991.98px matches the breakpoint the theme itself already uses for mobile-only concerns (.mobile-contact-bar, body's own padding-bottom below). Desktop and iPad-landscape-and-up keep the exact no-scroll behavior above; only phones and portrait tablets get scroll back, scoped to the panel that's actually overflowing. */ @media (max-width: 991.98px) { .fs-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* .mobile-contact-bar (index.html) is a fixed WhatsApp/Call bar overlaying the bottom of the viewport at this breakpoint - measured at ~58px tall (style.css's own body{padding-bottom:48px} compensation is a bit short of the bar's actual rendered height), rounded up to 60px here for a small safety margin. That padding-bottom:48px on body doesn't reach these absolutely-positioned panels anyway. Without this, scrolling a panel to its true end would still leave its last bit (here, the footer) hidden behind that fixed bar. .panel-stack .fs-panel (two classes) rather than plain .fs-panel: custom.css's `section.fs-panel{padding-bottom:30px}` has higher specificity than a lone class selector (element+class beats class alone) and would otherwise win regardless of source order or this media query, leaving philosophy/what-we-do/team/why-choose (all
panels) stuck at 30px here. */ .panel-stack .fs-panel { padding-bottom: 60px; } /* The bottom-pin trick above only makes sense when content is shorter than the panel (nothing to scroll to); once this breakpoint's content genuinely overflows, margin-top:auto would just resolve to 0 as normal flex behavior anyway, but being explicit keeps the intent clear: footer flows at the natural end of the scrollable content here, it isn't force-pinned. */ #section-contact footer { margin-top: 0; } }