/* ========================================= SCROLLSMOOTHER — PRE-INIT LAYOUT Matcher det layout som GSAP ScrollSmoother sætter på window.load. Ved at sætte position: fixed med det samme (via .gsap-js der tilføjes i ) undgår vi det layout-shift hvor indholdet "hopper op" når GSAP initialiserer og wrapper'en skifter fra normal flow til fixed. ========================================= */ .gsap-js #smooth-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } /* ========================================= GSAP ANIMATIONER — PRE-HIDE Elementer med gsapper-animationsklasser skjules med det samme (via .gsap-js i ) så de ikke blinker synligt inden GSAP initialiserer og overtager styringen via autoAlpha. visibility: hidden bruges (ikke display: none) så SplitText og ScrollTrigger stadig kan måle elementernes dimensioner. ========================================= */ .gsap-js .fade-up, .gsap-js .scale-in, .gsap-js .reveal, .gsap-js .reveal-slices, .gsap-js .reveal-clip, .gsap-js .reveal-text { visibility: hidden; opacity: 0; } /* Bricks editor: altid synlig — CSS !important slår GSAP inline styles */ .bricks-is-builder .fade-up, .bricks-is-builder .scale-in, .bricks-is-builder .reveal, .bricks-is-builder .reveal-slices, .bricks-is-builder .reveal-clip, .bricks-is-builder .reveal-text { visibility: visible !important; opacity: 1 !important; } /* ========================================= SCROLLSMOOTHER — CHROME SUBPIXEL GAP FIX ScrollSmoother anvender translateY med decimalværdier (fx -127.48px). Chrome compositer child-elementer med egne GPU-lag uafhængigt af forælderen, hvilket giver 1px gaps ved scrolling. backface-visibility: hidden tvinger Chrome til at holde children på samme compositing-lag som #smooth-content og eliminerer gabet. ========================================= */ #smooth-content { outline: 1px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #smooth-content > * { outline: 1px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ========================================= 1. STANDARD BILLED-REVEAL (Vandret Slide) ========================================= */ .reveal-outer { overflow: hidden; position: relative; } .reveal { position: relative; overflow: hidden; width: 100%; height: 100%; } .reveal img { transform-origin: left; display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================= 2. SLICE BILLED-REVEAL (3 Skiver) ========================================= */ .reveal-slices { position: relative; overflow: hidden; width: 100%; height: 100%; display: block; } .reveal-slices img { height: 100%; width: 100%; object-fit: cover; display: block; transform-origin: center; } .uncover { display: flex; flex-direction: row; position: absolute; top: -1px; /* Overskrider 1px for at lukke subpixel-gap i top */ left: -1px; /* Og i venstre side */ height: calc(100% + 2px); /* +1px top og +1px bund */ width: calc(100% + 2px); /* +1px venstre og +1px højre */ z-index: 10; pointer-events: none; /* Overflow clippes af .reveal-slices { overflow: hidden } — ingen visuel ændring */ } .uncover_slice { height: 100%; flex-grow: 1; background-color: #ffffff; /* JS overskriver denne med resolveColor() */ } /* ========================================= 3. CLIP BILLED-REVEAL (Nedefra og op) ========================================= */ .reveal-clip { position: relative; overflow: hidden; width: 100%; height: 100%; display: block; } .reveal-clip img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; } /* ========================================= 4. TEKST-REVEAL (SplitText) ========================================= */ .reveal-text .line { overflow: hidden; } /* ========================================= 5. FADE UP (Generel) ========================================= */ /* ========================================= PROGRESSIV FORBEDRING — FOUC GUARD Skjul animerede elementer KUN når: a) JS er aktivt (gsap-js klassen er tilstede) b) Brugeren IKKE har frabedt sig bevægelse Derved vises alt indhold altid uden JS eller med reduced motion. ========================================= */ @media (prefers-reduced-motion: no-preference) { html.gsap-js:has(body.bricks-is-frontend) .reveal { visibility: hidden; } html.gsap-js:has(body.bricks-is-frontend) .reveal-slices img { visibility: hidden; } html.gsap-js:has(body.bricks-is-frontend) .reveal-clip { visibility: hidden; } html.gsap-js:has(body.bricks-is-frontend) .reveal-text { visibility: hidden; } html.gsap-js:has(body.bricks-is-frontend) .fade-up { visibility: hidden; } html.gsap-js:has(body.bricks-is-frontend) .scale-in { visibility: hidden; } } /* ========================================= LAYOUT UTILITIES ========================================= */ /* Reverse two-column grid order. Only applies when columns are side by side (≥700px = 2 × 350px minmax min). Below 700px columns stack — order has no effect. */ @media (min-width: 700px) { .sa-reverse > :first-child { order: 2; } } /* ========================================= SECTION SPACING UTILITIES Components use the sa-section base class. Top/bottom spacing is controlled via sa-pt-* and sa-pb-* modifier classes, which set local CSS custom properties. Always use padding (never margin) between sections so background colors sit flush. --header-height: define in your child theme. ========================================= */ .sa-section { padding-top: var(--sa-pt, var(--space-m)); padding-bottom: var(--sa-pb, var(--space-m)); } /* Top padding */ .sa-pt-0 { --sa-pt: 0 } .sa-pt-s { --sa-pt: var(--space-s) } .sa-pt-m { --sa-pt: var(--space-m) } .sa-pt-l { --sa-pt: var(--space-l) } .sa-pt-xl { --sa-pt: var(--space-xl) } .sa-pt-hero { --sa-pt: var(--space-xl); padding-top: var(--space-xl); } @media (min-width: 768px) { .sa-pt-hero { --sa-pt: calc(var(--header-height, 80px) + var(--space-xl)); padding-top: calc(var(--header-height, 80px) + var(--space-xl)); } } /* Bottom padding */ .sa-pb-0 { --sa-pb: 0 } .sa-pb-s { --sa-pb: var(--space-s) } .sa-pb-m { --sa-pb: var(--space-m) } .sa-pb-l { --sa-pb: var(--space-l) } .sa-pb-xl { --sa-pb: var(--space-xl) }