/* * Li-Jet Medical — Responsive Motion System 2.2 * Astra breakpoints: Desktop >= 922px / Tablet 545-921px / Mobile <= 544px. * * 2.2 layout sync: * - Updated for the 2026-08-26 Company page structure. * - Service-location cards now animate as the new 3/1-column layout. * - Custom company-history timeline has its own responsive choreography. * - Keeps the slower 2.1 timing and anti-flash rendering strategy. */ :root { --ljm-duration: 1080ms; --ljm-duration-hero: 1320ms; --ljm-duration-card: 900ms; --ljm-distance-y: 68px; --ljm-distance-x: 82px; --ljm-scale-card: 0.945; --ljm-scale-zoom: 0.91; --ljm-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------------------------------------- First-paint guard ------------------------------------------------------------------------- The marker is injected in wp_head before CSS. These selectors hide ONLY elements that the JS will prepare. This prevents a visible -> hidden flash while preserving a 3.5s PHP/JS failsafe if motion initialization fails. */ html.lijet-motion-preload body.lijet-motion-home :is( .elementor-element-ad1e763, .elementor-element-a9096f8, .elementor-element-ba1036f, .elementor-element-79f7045, .elementor-element-833609c, .elementor-element-ba9e54f, .elementor-element-95460b0, .elementor-element-15d031e, .elementor-element-e887b2e, .elementor-element-3c30add, .elementor-element-cd1057c, .elementor-element-967255f, .elementor-element-68ac2ab, .elementor-element-4e5b571, .elementor-element-ce7b8a2, .elementor-element-474f823, .elementor-element-12932bd, .elementor-element-0106d09, .elementor-element-84a0845, .elementor-element-6db32a8, .elementor-element-516a16b, .elementor-element-c251edd ), html.lijet-motion-preload body.lijet-motion-company :is( .elementor-element-565cb49, .elementor-element-653c893, .elementor-element-5911759, .elementor-element-fa4877f, .elementor-element-ec1dd15, .elementor-element-852282c, .company-history-heading, .company-history-item ), html.lijet-motion-preload body.lijet-motion-contact :is( .elementor-element-f96beb3, .elementor-element-d71e33a, .elementor-element-8a86c92, .elementor-element-4d2c572, .elementor-element-710bf83, .elementor-element-5f65aa9, .elementor-element-2640e0c, .elementor-element-b60a4e9, .elementor-element-e8ad576, .elementor-element-24c8109, .elementor-element-1f1abb9 ), html.lijet-motion-preload body.lijet-motion-products :is( .ljpc-catalog__sidebar, .ljpc-product-card, .ljpc-pagination, .ljpc-empty ), html.lijet-motion-preload body.lijet-motion-product :is( .ljpc-single__back, .ljpc-product-gallery, .ljpc-product-summary, .ljpc-detail-section__title, .ljpc-feature-list li, .ljpc-story, .ljpc-story__media, .ljpc-story__content, .ljpc-spec-table__row, .ljpc-document-card ) { opacity: 0; } /* Motion is opt-in at runtime. If JS fails, the preload marker fallback clears. */ .lijet-motion-enabled .ljm { opacity: 0; transition-property: opacity, transform; transition-duration: var(--ljm-duration, 1080ms); transition-delay: var(--ljm-delay, 0ms); transition-timing-function: var(--ljm-ease); transform-origin: center center; will-change: opacity, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .lijet-motion-enabled .ljm--up { transform: translate3d(0, var(--ljm-distance-y), 0) scale(0.985); } .lijet-motion-enabled .ljm--left { transform: translate3d(calc(var(--ljm-distance-x) * -1), 0, 0) scale(0.985); } .lijet-motion-enabled .ljm--right { transform: translate3d(var(--ljm-distance-x), 0, 0) scale(0.985); } .lijet-motion-enabled .ljm--zoom { transform: translate3d(0, 26px, 0) scale(var(--ljm-scale-zoom)); } .lijet-motion-enabled .ljm--card { transform: translate3d(0, 56px, 0) scale(var(--ljm-scale-card)); } .lijet-motion-enabled .ljm--pop { transform: translate3d(0, 30px, 0) scale(0.86); } .lijet-motion-enabled .ljm--fade { transform: translate3d(0, 0, 0); } /* Company history: match the desktop alternating horizontal timeline. */ .lijet-motion-company .company-history-item.ljm--history:nth-child(odd) { transform: translate3d(0, -58px, 0) scale(0.97); } .lijet-motion-company .company-history-item.ljm--history:nth-child(even) { transform: translate3d(0, 58px, 0) scale(0.97); } .lijet-motion-enabled .ljm.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* Speed tiers. */ .lijet-motion-enabled .ljm.ljm-speed-hero { --ljm-duration: var(--ljm-duration-hero); } .lijet-motion-enabled .ljm.ljm-speed-card { --ljm-duration: var(--ljm-duration-card); } /* Keep entering lateral elements from creating a horizontal scrollbar. */ .lijet-motion-enabled .elementor, .lijet-motion-enabled .ljpc-single, .lijet-motion-enabled .ljpc-catalog, .lijet-motion-enabled .company-history-section { overflow-x: clip; } @supports not (overflow: clip) { .lijet-motion-enabled .elementor, .lijet-motion-enabled .ljpc-single, .lijet-motion-enabled .ljpc-catalog, .lijet-motion-enabled .company-history-section { overflow-x: hidden; } } /* Tablet | Astra 545px–921px */ @media screen and (min-width: 545px) and (max-width: 921px) { :root { --ljm-duration: 940ms; --ljm-duration-hero: 1120ms; --ljm-duration-card: 790ms; --ljm-distance-y: 48px; --ljm-distance-x: 44px; --ljm-scale-card: 0.958; --ljm-scale-zoom: 0.935; } /* Current Elementor 2-column layouts stack at the Astra tablet breakpoint. */ .lijet-motion-enabled .ljm--left, .lijet-motion-enabled .ljm--right { transform: translate3d(0, var(--ljm-distance-y), 0) scale(0.988); } /* The Company history switches to a left-side vertical timeline. Reveal each card outward from the timeline rather than preserving desktop up/down motion. */ .lijet-motion-company .company-history-item.ljm--history:nth-child(odd), .lijet-motion-company .company-history-item.ljm--history:nth-child(even) { transform: translate3d(28px, 0, 0) scale(0.988); } } /* Mobile | Astra <= 544px */ @media screen and (max-width: 544px) { :root { --ljm-duration: 790ms; --ljm-duration-hero: 930ms; --ljm-duration-card: 680ms; --ljm-distance-y: 32px; --ljm-distance-x: 0px; --ljm-scale-card: 0.97; --ljm-scale-zoom: 0.955; } .lijet-motion-enabled .ljm--left, .lijet-motion-enabled .ljm--right { transform: translate3d(0, var(--ljm-distance-y), 0) scale(0.992); } .lijet-motion-enabled .ljm--pop { transform: translate3d(0, 20px, 0) scale(0.94); } .lijet-motion-company .company-history-item.ljm--history:nth-child(odd), .lijet-motion-company .company-history-item.ljm--history:nth-child(even) { transform: translate3d(18px, 0, 0) scale(0.992); } } /* Accessibility: honor the visitor's OS motion preference. */ @media (prefers-reduced-motion: reduce) { html.lijet-motion-preload body :is( .elementor-element, .company-history-heading, .company-history-item, .ljpc-catalog__sidebar, .ljpc-product-card, .ljpc-pagination, .ljpc-empty, .ljpc-single__back, .ljpc-product-gallery, .ljpc-product-summary, .ljpc-detail-section__title, .ljpc-feature-list li, .ljpc-story, .ljpc-story__media, .ljpc-story__content, .ljpc-spec-table__row, .ljpc-document-card ), .lijet-motion-enabled .ljm, .lijet-motion-enabled .ljm.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; will-change: auto !important; } }