@charset "UTF-8"; /* ========================================================================== ANIMATIONS.CSS — scroll reveal engine + per section tuning Site : https://e-ofakim.webzsites.site/ (WordPress multisite 68) Theme : ofaqimNew | Builder: Elementor Pro (RTL) | Forms: Contact Form 7 Pairs with: /assets/js/animations.js --------------------------------------------------------------------------- HOW IT WORKS --------------------------------------------------------------------------- 1. animations.js runs in . If the browser supports IntersectionObserver AND the visitor has NOT asked for reduced motion, it adds .wz-anim to BEFORE the first paint. Every "hidden" rule in this file is scoped to html.wz-anim, so there is never a flash of visible-then-hidden content, and if the JS fails to load nothing is ever hidden. 2. On DOMContentLoaded the script arms every target, gives it a stagger delay through the --wz-delay custom property, and observes it. 3. When a target scrolls into view it receives .wz-in -> opacity 1, transform none. The element is then unobserved. One way, fires once. --------------------------------------------------------------------------- PERFORMANCE NOTES (why this is cheap) --------------------------------------------------------------------------- * Only `opacity` and `transform` are animated. Both are composited on the GPU: no layout, no repaint, no jank. Nothing here animates width, height, top, margin, filter or box-shadow. * No animation library (no AOS, no WOW, no GSAP). IntersectionObserver is native and callback driven, so there is no scroll listener and no per-frame JavaScript running while the visitor scrolls. * `will-change` is deliberately NOT used. It would force a permanent GPU layer for every element on the page, which is a real memory cost on mobile. Browsers already promote an element for the duration of a transform transition — exactly as long as it is needed. * Every element is unobserved the moment it reveals, so the observed set shrinks to zero as the visitor scrolls down. * No hover animations are defined here — buttons included. Reveals only. --------------------------------------------------------------------------- SAFETY RULES --------------------------------------------------------------------------- * Nothing inside a carousel / swiper is hidden. Inactive slides sit outside the viewport, so a reveal could never fire and the slide would stay blank. * Nothing inside the sticky header, the mega menu, or the privacy / accessibility modals is hidden, for the same reason. * .elementor-absolute widgets fade but are never transformed — Elementor may position an absolute widget with a translate() of its own. * animations.js instantly reveals (no transition) any element whose box is zero wide or zero tall when it is armed. That covers every display:none subtree, and the empty wrappers that hold the two modals. --------------------------------------------------------------------------- CONTENTS --------------------------------------------------------------------------- 1. Tokens 2. Hidden state 3. Revealed state 4. Opt-in modifiers 5. Never-hide regions <- header / carousels / modals live here 6. Per section tuning (home page) 7. Accessibility & print ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS — tune the whole site from here -------------------------------------------------------------------------- */ :root { --wz-duration: .8s; /* standard reveal */ --wz-duration-slow: 1.1s; /* large imagery / hero */ --wz-ease: cubic-bezier(.22, .61, .36, 1); /* soft ease-out */ --wz-lift: 26px; /* how far a widget rises */ --wz-lift-sm: 14px; /* subtle rise for dense content */ --wz-shift: 34px; /* horizontal travel (RTL aware) */ --wz-scale: .975; /* image settle-in scale */ --wz-delay: 0ms; /* per-element stagger, written by the JS */ } /* -------------------------------------------------------------------------- 2. HIDDEN STATE Containers fade only (no travel) so that a container and the widgets inside it never stack two translations on top of one another. The widgets carry the movement. -------------------------------------------------------------------------- */ html.wz-anim .e-con.e-parent > .e-con, html.wz-anim .elementor-widget, /* the plain theme templates — page.php, 404.php — carry no Elementor markup */ html.wz-anim .description-section .text-wraper { opacity: 0; transition: opacity var(--wz-duration) var(--wz-ease) var(--wz-delay), transform var(--wz-duration) var(--wz-ease) var(--wz-delay); } /* widgets travel; absolutely positioned ones only fade */ html.wz-anim .elementor-widget:not(.elementor-absolute), html.wz-anim .description-section .text-wraper { transform: translate3d(0, var(--wz-lift), 0); } /* image widgets settle in with a hair of scale on top of the rise */ html.wz-anim .elementor-widget-image:not(.elementor-absolute) { transform: translate3d(0, var(--wz-lift), 0) scale(var(--wz-scale)); transition-duration: var(--wz-duration-slow); } /* -------------------------------------------------------------------------- 3. REVEALED STATE !important so that a reveal can never lose to anything Elementor prints. A visitor must always end up seeing the content. -------------------------------------------------------------------------- */ html.wz-anim .wz-in { opacity: 1 !important; } html.wz-anim .wz-in:not(.elementor-absolute) { transform: none !important; } /* elements the script chose not to animate (hidden subtrees) — shown instantly, with no transition */ html.wz-anim .wz-skip { transition: none !important; } /* -------------------------------------------------------------------------- 4. OPT-IN MODIFIERS Add any of these in Elementor (Advanced > CSS Classes) or from section 6 to change how a single element behaves. -------------------------------------------------------------------------- */ /* pure fade, no movement at all */ html.wz-anim .wz-fade:not(.wz-in) { transform: none !important; } /* smaller rise, for dense blocks of content */ html.wz-anim .wz-lift-sm:not(.wz-in) { transform: translate3d(0, var(--wz-lift-sm), 0) !important; } /* drops in from just above its resting place */ html.wz-anim .wz-drop:not(.wz-in) { transform: translate3d(0, calc(var(--wz-lift-sm) * -1), 0) !important; } /* slides in from the start edge of the line — right in RTL, left in LTR */ html.wz-anim .wz-from-start:not(.wz-in) { transform: translate3d(var(--wz-shift), 0, 0) !important; } html.wz-anim .wz-from-end:not(.wz-in) { transform: translate3d(calc(var(--wz-shift) * -1), 0, 0) !important; } html[dir="ltr"].wz-anim .wz-from-start:not(.wz-in) { transform: translate3d(calc(var(--wz-shift) * -1), 0, 0) !important; } html[dir="ltr"].wz-anim .wz-from-end:not(.wz-in) { transform: translate3d(var(--wz-shift), 0, 0) !important; } /* gentle zoom, no rise */ html.wz-anim .wz-zoom:not(.wz-in) { transform: scale(var(--wz-scale)) !important; } /* per-element speed */ html.wz-anim .wz-slow { transition-duration: var(--wz-duration-slow) !important; } html.wz-anim .wz-fast { transition-duration: .55s !important; } /* -------------------------------------------------------------------------- 5. NEVER-HIDE REGIONS Declared in CSS as well as in the JS so the content is never hidden for even a single frame while the page is still parsing. Keep this list in sync with WZ.exclude inside animations.js. !important IS REQUIRED HERE, and is not belt and braces. The hide rule in section 2 is `html.wz-anim .e-con.e-parent > .e-con`, which scores 0,4,1 — HIGHER than `[data-settings*="sticky"] .e-con` at 0,3,1. Without !important the sticky header's own child containers stay at opacity 0 and the logo and the call-to-action button never appear. Same story for .elementor-widget-template (0,2,1) against the widget rule at 0,3,1, which otherwise leaves the footer sitting 26px too low. `transition` is deliberately NOT reset here: these wrappers can carry Elementor's own hover transitions, and since their opacity and transform never change, no transition of ours can run on them anyway. -------------------------------------------------------------------------- */ html.wz-anim .e-n-carousel .elementor-widget, html.wz-anim .e-n-carousel .e-con, html.wz-anim .swiper .elementor-widget, html.wz-anim .swiper .e-con, html.wz-anim .slick-slider .elementor-widget, html.wz-anim [data-settings*='"sticky"'] .elementor-widget, html.wz-anim [data-settings*='"sticky"'] .e-con, html.wz-anim .elementor-sticky .elementor-widget, html.wz-anim .elementor-sticky .e-con, html.wz-anim .e-n-menu .elementor-widget, html.wz-anim .privacy-wrapper .elementor-widget, html.wz-anim .elementor-widget-template, html.wz-anim .elementor-widget-n-carousel .elementor-widget, /* Elementor's own entrance animation owns these — never double up on it. Note the descendants are listed but NOT .elementor-invisible itself: that class is how Elementor keeps an element at opacity 0 until its animation runs, so overriding it would kill the animation it belongs to. */ html.wz-anim .elementor-invisible .elementor-widget, html.wz-anim .elementor-invisible .e-con { opacity: 1 !important; transform: none !important; } /* ========================================================================== 6. PER SECTION TUNING — home page ========================================================================== Sections 1 to 5 give every Elementor widget the same soft fade + rise. This section only adjusts the handful of places where the generic reveal is not the prettiest choice. TWO TECHNIQUES ARE USED ----------------------- a) transition-delay: calc(var(--wz-delay) + Nms) --wz-delay is the stagger animations.js writes on each element. Adding to it, instead of replacing it, keeps the automatic stagger AND offsets the whole group. Needs !important to beat the inline custom property. b) Keyframes that only run under .wz-in Used for things that are NOT reveal targets themselves (Contact Form 7 fields, icon list items). Their normal state is fully visible, so if a reveal never fires nothing can go missing — the animation is decoration. Element ids below are Elementor ids from the live page. If a section is rebuilt in Elementor its id changes and the matching block simply stops applying — the generic reveal still runs, so nothing breaks. The class based blocks (.map-img, .sub-heading-p, .footer-form-head, .private-contact-form) survive a rebuild as long as the CSS class is kept on the widget. ========================================================================== */ /* -------------------------------------------------------------------------- 6.1 HERO BANNER (section 9fc9af2) The banner image fills the top of the page, so it must not travel — a rise would open a visible gap. Fade plus a very small scale only, run slowly so it reads as a settle rather than a pop. -------------------------------------------------------------------------- */ html.wz-anim .elementor-element-9fc9af2 .elementor-widget-image:not(.elementor-absolute) { transform: scale(1.035); transition-duration: 1.4s; } /* the golden headline sits absolutely on top of the banner: fade only, and let the banner get a head start */ html.wz-anim .elementor-element-e439938 { transition-duration: 1.1s !important; transition-delay: 420ms !important; } /* -------------------------------------------------------------------------- 6.2 INTRO + PRICE (section f21b182) Short copy, so a small rise. The price is the payoff line and arrives last. -------------------------------------------------------------------------- */ html.wz-anim .elementor-element-b59863e:not(.wz-in) { transform: translate3d(0, var(--wz-lift-sm), 0); } html.wz-anim .elementor-element-7a7a833 { transition-delay: calc(var(--wz-delay) + 180ms) !important; } /* the digits themselves brighten in once the block has arrived */ html.wz-anim .elementor-element-7a7a833.wz-in .nis-icon, html.wz-anim .elementor-element-7a7a833.wz-in .price, html.wz-anim .elementor-element-7a7a833.wz-in .price-text { animation: wz-fade-in .9s var(--wz-ease) both; } html.wz-anim .elementor-element-7a7a833.wz-in .price { animation-delay: 260ms; } html.wz-anim .elementor-element-7a7a833.wz-in .last-zeros { animation-delay: 340ms; } /* -------------------------------------------------------------------------- 6.3 SECTION HEADINGS Sub headings trail their h2 slightly so the pair reads top down. -------------------------------------------------------------------------- */ html.wz-anim .sub-heading-p { transition-delay: calc(var(--wz-delay) + 120ms) !important; } /* -------------------------------------------------------------------------- 6.4 APARTMENT CARDS (section 5ebf785 -> cards c22b76d / aa29e3a) Cards sit side by side. Offsetting the second one turns two simultaneous fades into a sequence. -------------------------------------------------------------------------- */ html.wz-anim .elementor-element-c22b76d .elementor-widget { transition-delay: calc(var(--wz-delay) + 60ms) !important; } html.wz-anim .elementor-element-aa29e3a .elementor-widget { transition-delay: calc(var(--wz-delay) + 200ms) !important; } /* the floating call buttons pinned on the cards are absolute: fade them in last, and never move them */ html.wz-anim .elementor-element-c22b76d .header-btn, html.wz-anim .elementor-element-aa29e3a .header-btn { transition-delay: calc(var(--wz-delay) + 420ms) !important; } /* -------------------------------------------------------------------------- 6.5 ACCESSIBILITY FEATURE CARDS (section 77b1f2e -> c41c581 / 48bed35) Icon first, then the two lines of copy. The stagger inside each card is already handled by the script, this only separates the cards. -------------------------------------------------------------------------- */ html.wz-anim .elementor-element-c41c581 .elementor-widget { transition-delay: calc(var(--wz-delay) + 80ms) !important; } html.wz-anim .elementor-element-48bed35 .elementor-widget { transition-delay: calc(var(--wz-delay) + 220ms) !important; } /* Icon badges pop with a touch of scale instead of a rise. Scoped to the content sections on purpose: .icon-bg is also used on the sticky header, and the header is a never-hide region, so an unscoped rule would leave the header icons stuck at 90%. */ html.wz-anim .elementor-element-77b1f2e .icon-bg:not(.wz-in):not(.elementor-absolute), html.wz-anim .elementor-element-2f03240 .icon-bg:not(.wz-in):not(.elementor-absolute) { transform: scale(.9) !important; } html.wz-anim .elementor-element-77b1f2e .icon-bg, html.wz-anim .elementor-element-2f03240 .icon-bg { transition-duration: .7s !important; } /* the photo panel behind the cards is large: slow fade, barely any movement */ html.wz-anim .image-bg > .elementor-widget-image:not(.elementor-absolute) { transform: scale(1.02); transition-duration: 1.3s; } /* -------------------------------------------------------------------------- 6.6 LOCATION MAP (section 070d47f -> .map-img) One big illustration. A slow fade with a whisper of zoom looks calmer than a rise at this size. -------------------------------------------------------------------------- */ html.wz-anim .map-img:not(.wz-in) { transform: scale(1.025) !important; } html.wz-anim .map-img { transition-duration: 1.3s !important; } /* -------------------------------------------------------------------------- 6.7 STANDARD / CLOSING SECTIONS (2f03240, 8e51a09) Long stacks of headings — a shorter rise keeps them from looking like a falling list. -------------------------------------------------------------------------- */ html.wz-anim .elementor-element-2f03240 .elementor-widget-heading:not(.wz-in), html.wz-anim .elementor-element-8e51a09 .elementor-widget-heading:not(.wz-in) { transform: translate3d(0, var(--wz-lift-sm), 0); } /* -------------------------------------------------------------------------- 6.8 CONTACT FORM (section 4026143 -> .footer-form-head + .private-contact-form) The widgets reveal as usual. The fields inside are NOT reveal targets: they are visible by default and only get a decorative rise once the shortcode widget has been revealed. If the reveal never happens the form is still perfectly usable. -------------------------------------------------------------------------- */ html.wz-anim .footer-form-head { transition-delay: calc(var(--wz-delay) + 60ms) !important; } html.wz-anim .private-contact-form { transition-delay: calc(var(--wz-delay) + 160ms) !important; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"] { animation: wz-rise .65s var(--wz-ease) both; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"]:nth-child(1) { animation-delay: 260ms; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"]:nth-child(2) { animation-delay: 340ms; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"]:nth-child(3) { animation-delay: 420ms; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"]:nth-child(4) { animation-delay: 500ms; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"]:nth-child(5) { animation-delay: 580ms; } html.wz-anim .private-contact-form.wz-in .main-contact-form > [class*="col-"]:nth-child(n+6) { animation-delay: 660ms; } /* -------------------------------------------------------------------------- 6.9 FOOTER LINK ROW Inline icon list — the items sweep in one by one after the row reveals. Decorative only, same "visible by default" rule as the form above. -------------------------------------------------------------------------- */ html.wz-anim .elementor-widget-icon-list.wz-in .elementor-icon-list-item { animation: wz-fade-in .6s var(--wz-ease) both; } html.wz-anim .elementor-widget-icon-list.wz-in .elementor-icon-list-item:nth-child(1) { animation-delay: 120ms; } html.wz-anim .elementor-widget-icon-list.wz-in .elementor-icon-list-item:nth-child(2) { animation-delay: 200ms; } html.wz-anim .elementor-widget-icon-list.wz-in .elementor-icon-list-item:nth-child(3) { animation-delay: 280ms; } html.wz-anim .elementor-widget-icon-list.wz-in .elementor-icon-list-item:nth-child(4) { animation-delay: 360ms; } html.wz-anim .elementor-widget-icon-list.wz-in .elementor-icon-list-item:nth-child(n+5) { animation-delay: 440ms; } /* -------------------------------------------------------------------------- 6.10 KEYFRAMES Two only, both composited (opacity + transform). -------------------------------------------------------------------------- */ @keyframes wz-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wz-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 7. ACCESSIBILITY & PRINT animations.js already bails out on prefers-reduced-motion, so .wz-anim is never added in that case. This block is the belt to that pair of braces, and it also covers a visitor who flips the OS setting after load. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.wz-anim .e-con.e-parent > .e-con, html.wz-anim .elementor-widget, html.wz-anim .elementor-widget-image:not(.elementor-absolute), html.wz-anim .description-section .text-wraper, html.wz-anim .icon-bg, html.wz-anim .map-img, html.wz-anim .image-bg > .elementor-widget-image, html.wz-anim .private-contact-form .main-contact-form > [class*="col-"], html.wz-anim .elementor-widget-icon-list .elementor-icon-list-item, html.wz-anim .elementor-element-7a7a833 .nis-icon, html.wz-anim .elementor-element-7a7a833 .price, html.wz-anim .elementor-element-7a7a833 .price-text { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } } @media print { html.wz-anim .e-con.e-parent > .e-con, html.wz-anim .elementor-widget, html.wz-anim .elementor-widget-image:not(.elementor-absolute), html.wz-anim .description-section .text-wraper, html.wz-anim .private-contact-form .main-contact-form > [class*="col-"], html.wz-anim .elementor-widget-icon-list .elementor-icon-list-item { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } }