/* ========================================================================== SBI Page Builder — element shell effects -------------------------------------------------------------------------- Everything the Advanced tab's Motion Effects and the Style tab's Background Overlay / Video Background switch on. Loaded once per page-builder page by user/partials/element.blade.php, and by the admin canvas so the editor shows the same thing. Entrance animations are gated behind .pb-motion-on, which pb-motion.js puts on as soon as it runs. Without JavaScript the class never appears and every element stays visible — content is never hidden by an effect that has nothing left to reveal it. ========================================================================== */ /* ========================================================================== 1. Background overlay ========================================================================== */ .pb-has-overlay { position: relative; } .pb-has-overlay::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background-repeat: no-repeat; background-size: cover; } /* Content sits above the overlay; the background layers stay under it. */ .pb-has-overlay > * { position: relative; z-index: 1; } /* ========================================================================== 2. Video background ========================================================================== */ .pb-has-video-bg { position: relative; overflow: hidden; } .pb-video-bg, .pb-has-overlay > .pb-video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .pb-video-bg video, .pb-video-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; border: 0; } /* A chromeless embed has no object-fit, so cover it by aspect ratio instead. */ .pb-video-bg iframe { width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh; } @media (max-width: 767px) { .pb-video-bg--no-mobile { display: none; } } /* ========================================================================== 3. Entrance animations ========================================================================== */ .pb-motion-on .pb-anim { opacity: 0; } .pb-motion-on .pb-anim.pb-anim-in { opacity: 1; animation-duration: var(--pb-anim-duration, 800ms); animation-delay: var(--pb-anim-delay, 0ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, .61, .36, 1); } @keyframes pbFadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes pbFadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0) } to { opacity: 1; transform: none } } @keyframes pbFadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0) } to { opacity: 1; transform: none } } @keyframes pbFadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0) } to { opacity: 1; transform: none } } @keyframes pbFadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0) } to { opacity: 1; transform: none } } @keyframes pbZoomIn { from { opacity: 0; transform: scale3d(.5, .5, .5) } to { opacity: 1; transform: none } } @keyframes pbZoomOut { from { opacity: 0; transform: scale3d(1.35, 1.35, 1.35) } to { opacity: 1; transform: none } } @keyframes pbSlideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } @keyframes pbSlideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } @keyframes pbSlideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } @keyframes pbSlideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } @keyframes pbBounceIn { 0% { opacity: 0; transform: scale3d(.3, .3, .3) } 40% { transform: scale3d(1.08, 1.08, 1.08) } 70% { transform: scale3d(.96, .96, .96) } 100% { opacity: 1; transform: none } } @keyframes pbBounceInUp { 0% { opacity: 0; transform: translate3d(0, 80px, 0) } 60% { opacity: 1; transform: translate3d(0, -14px, 0) } 80% { transform: translate3d(0, 6px, 0) } 100% { transform: none } } @keyframes pbFlipInX { 0% { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 80deg) } 60% { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, -12deg) } 100% { transform: perspective(400px) } } @keyframes pbFlipInY { 0% { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 80deg) } 60% { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, -12deg) } 100% { transform: perspective(400px) } } @keyframes pbRotateIn { 0% { opacity: 0; transform: rotate3d(0, 0, 1, -180deg); transform-origin: center } 100% { opacity: 1; transform: none; transform-origin: center } } @keyframes pbLightSpeedIn { 0% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(-30deg) } 60% { opacity: 1; transform: skewX(20deg) } 80% { transform: skewX(-5deg) } 100% { transform: none } } @keyframes pbRollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity: 1; transform: none } } @keyframes pbPulse { 0%, 100% { transform: scale3d(1, 1, 1) } 50% { transform: scale3d(1.06, 1.06, 1.06) } } @keyframes pbShakeX { 0%, 100% { transform: translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-8px, 0, 0) } 20%, 40%, 60%, 80% { transform: translate3d(8px, 0, 0) } } .pb-anim-in[data-pb-anim="fadeIn"] { animation-name: pbFadeIn } .pb-anim-in[data-pb-anim="fadeInUp"] { animation-name: pbFadeInUp } .pb-anim-in[data-pb-anim="fadeInDown"] { animation-name: pbFadeInDown } .pb-anim-in[data-pb-anim="fadeInLeft"] { animation-name: pbFadeInLeft } .pb-anim-in[data-pb-anim="fadeInRight"] { animation-name: pbFadeInRight } .pb-anim-in[data-pb-anim="zoomIn"] { animation-name: pbZoomIn } .pb-anim-in[data-pb-anim="zoomOut"] { animation-name: pbZoomOut } .pb-anim-in[data-pb-anim="slideInUp"] { animation-name: pbSlideInUp } .pb-anim-in[data-pb-anim="slideInDown"] { animation-name: pbSlideInDown } .pb-anim-in[data-pb-anim="slideInLeft"] { animation-name: pbSlideInLeft } .pb-anim-in[data-pb-anim="slideInRight"] { animation-name: pbSlideInRight } .pb-anim-in[data-pb-anim="bounceIn"] { animation-name: pbBounceIn } .pb-anim-in[data-pb-anim="bounceInUp"] { animation-name: pbBounceInUp } .pb-anim-in[data-pb-anim="flipInX"] { animation-name: pbFlipInX } .pb-anim-in[data-pb-anim="flipInY"] { animation-name: pbFlipInY } .pb-anim-in[data-pb-anim="rotateIn"] { animation-name: pbRotateIn } .pb-anim-in[data-pb-anim="lightSpeedIn"] { animation-name: pbLightSpeedIn } .pb-anim-in[data-pb-anim="rollIn"] { animation-name: pbRollIn } .pb-anim-in[data-pb-anim="pulse"] { animation-name: pbPulse } .pb-anim-in[data-pb-anim="shakeX"] { animation-name: pbShakeX } /* ========================================================================== 4. Hover animations ========================================================================== */ .pb-hov { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; backface-visibility: hidden; } .pb-hov--grow:hover { transform: scale(1.08) } .pb-hov--shrink:hover { transform: scale(.94) } .pb-hov--push:active { transform: scale(.9) } .pb-hov--push:hover { transform: scale(1.05) } .pb-hov--pop:hover { animation: pbPop .3s linear 1 } .pb-hov--bob:hover { animation: pbBob 1.2s ease-in-out infinite alternate } .pb-hov--hang:hover { animation: pbHang 1.4s ease-in-out infinite alternate } .pb-hov--skew:hover { transform: skew(-8deg) } .pb-hov--wobble:hover { animation: pbWobble .8s ease-in-out 1 } .pb-hov--buzz:hover { animation: pbBuzz .15s linear infinite } .pb-hov--float-hover:hover { transform: translateY(-8px); box-shadow: 0 18px 32px rgba(0, 0, 0, .16) } .pb-hov--sink:hover { transform: translateY(8px) } .pb-hov--pulse-hover:hover { animation: pbPulse 1s ease-in-out infinite } @keyframes pbPop { 50% { transform: scale(1.14) } 100% { transform: scale(1) } } @keyframes pbBob { from { transform: translateY(-6px) } to { transform: translateY(0) } } @keyframes pbHang { from { transform: translateY(6px) } to { transform: translateY(0) } } @keyframes pbWobble { 0%, 100% { transform: translateX(0) } 15% { transform: translateX(-10px) rotate(-4deg) } 30% { transform: translateX(8px) rotate(3deg) } 45% { transform: translateX(-6px) rotate(-2deg) } 60% { transform: translateX(4px) rotate(1deg) } 75% { transform: translateX(-2px) rotate(-1deg) } } @keyframes pbBuzz { 50% { transform: translateX(2px) rotate(1deg) } 100% { transform: translateX(-2px) rotate(-1deg) } } /* ========================================================================== 5. Scroll, mouse and sticky effects ========================================================================== */ [data-pb-scroll], [data-pb-mouse], [data-pb-tilt] { will-change: transform; } [data-pb-tilt] { transform-style: preserve-3d; transition: transform .18s ease-out; } .pb-sticky-active { position: fixed; z-index: 90; transition: box-shadow .2s ease; } .pb-sticky-active.pb-sticky-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .1); } /* Keeps the document from jumping by the height of a stuck element. */ .pb-sticky-spacer { display: block; } /* ========================================================================== 6. Reduced motion -------------------------------------------------------------------------- A visitor who has asked for less motion gets the end state immediately — the content, none of the movement. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .pb-motion-on .pb-anim, .pb-motion-on .pb-anim.pb-anim-in { opacity: 1; animation: none !important; } .pb-hov:hover { animation: none !important; transform: none !important; } [data-pb-scroll], [data-pb-mouse], [data-pb-tilt] { transform: none !important; } }