/* ============================================================ FSPL Global Motion Patch Drop-in file: wwwroot/css/fspl-motion.css Purpose: - Page fade-in / fade-out transitions - Scroll reveal in + out for sections/cards - Continuous subtle card movement after reveal - Premium hover effects for cards/buttons/images - Optional marquee cards via data-fspl-marquee ============================================================ */ :root { --fspl-motion-duration-fast: 220ms; --fspl-motion-duration: 520ms; --fspl-motion-duration-slow: 760ms; --fspl-motion-ease: cubic-bezier(.22, 1, .36, 1); --fspl-motion-shadow: 0 22px 55px rgba(16, 32, 52, .14); --fspl-motion-shadow-strong: 0 30px 75px rgba(16, 32, 52, .22); --fspl-motion-border: color-mix(in srgb, var(--clr-accent, #3ab0c5) 34%, transparent); } /* ------------------------------------------------------------ 1) Page transition JS adds .fspl-motion-enabled to , then toggles body states. ------------------------------------------------------------ */ html.fspl-motion-enabled body { opacity: 0; transform: translateY(8px); filter: blur(1px); transition: opacity 300ms ease, transform 300ms var(--fspl-motion-ease), filter 300ms ease; will-change: opacity, transform, filter; } html.fspl-motion-enabled body.fspl-page-entered { opacity: 1; transform: translateY(0); filter: blur(0); } html.fspl-motion-enabled body.fspl-page-leaving { opacity: 0; transform: translateY(-8px); filter: blur(1px); pointer-events: none; } /* Keeps anchor jumps and scroll behavior clean. */ html { scroll-behavior: smooth; } /* ------------------------------------------------------------ 2) Scroll reveal: works with your existing classes and new helpers. Existing project already uses fade-up, reveal-up, reveal-left, reveal-right, fade-in, stagger-children. ------------------------------------------------------------ */ html.fspl-motion-enabled :is( .fade-up, .fade-in, .reveal-up, .reveal-left, .reveal-right, [data-fspl-reveal], .fspl-motion-reveal, .fspl-motion-card ):not(.in-view) { opacity: 0; filter: blur(5px); transition: opacity var(--fspl-motion-duration) ease, transform var(--fspl-motion-duration) var(--fspl-motion-ease), filter var(--fspl-motion-duration) ease; will-change: opacity, transform, filter; } html.fspl-motion-enabled :is(.fade-up, .reveal-up, [data-fspl-reveal='up'], .fspl-motion-reveal, .fspl-motion-card):not(.in-view) { transform: translateY(30px) scale(.985); } html.fspl-motion-enabled :is(.reveal-left, [data-fspl-reveal='left']):not(.in-view) { transform: translateX(-34px) scale(.985); } html.fspl-motion-enabled :is(.reveal-right, [data-fspl-reveal='right']):not(.in-view) { transform: translateX(34px) scale(.985); } html.fspl-motion-enabled :is(.fade-in, [data-fspl-reveal='fade']):not(.in-view) { transform: none; } html.fspl-motion-enabled :is( .fade-up, .fade-in, .reveal-up, .reveal-left, .reveal-right, [data-fspl-reveal], .fspl-motion-reveal, .fspl-motion-card ).in-view { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); } /* Stagger support for rows/grids. */ html.fspl-motion-enabled .stagger-children > *:not(.in-view), html.fspl-motion-enabled .fspl-stagger > *:not(.in-view) { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(5px); transition: opacity var(--fspl-motion-duration) ease, transform var(--fspl-motion-duration) var(--fspl-motion-ease), filter var(--fspl-motion-duration) ease; } html.fspl-motion-enabled .stagger-children > *.in-view, html.fspl-motion-enabled .fspl-stagger > *.in-view { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* Delay utility classes already used in your views. */ .delay-1 { transition-delay: 80ms !important; } .delay-2 { transition-delay: 160ms !important; } .delay-3 { transition-delay: 240ms !important; } .delay-4 { transition-delay: 320ms !important; } .delay-5 { transition-delay: 400ms !important; } .delay-6 { transition-delay: 480ms !important; } /* ------------------------------------------------------------ 3) Continuous card movement after reveal JS waits until reveal is done, then adds .fspl-floating. ------------------------------------------------------------ */ html.fspl-motion-enabled .fspl-motion-card.in-view.fspl-floating { animation: fspl-card-float 5.8s ease-in-out infinite; animation-delay: var(--fspl-float-delay, 0ms); } @keyframes fspl-card-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.004); } } /* ------------------------------------------------------------ 4) Premium hover effects for common FSPL cards ------------------------------------------------------------ */ html.fspl-motion-enabled :is( .fspl-motion-card, .about-principle-card, .about-accreditation-card, .about-stat-card, .ct-svc-card, .ct-tcard, .blog-card, .gallery-album-card, .gallery-album-showcase, .gallery-masonry-item, .hajj-testimonial-card, .hajj-step-card, .contact-form-card, .contact-info-card, .req-toggle-card, .inquiry-tab, .thankyou-card ) { transition: transform var(--fspl-motion-duration-fast) var(--fspl-motion-ease), box-shadow var(--fspl-motion-duration-fast) ease, border-color var(--fspl-motion-duration-fast) ease, background-color var(--fspl-motion-duration-fast) ease, filter var(--fspl-motion-duration-fast) ease; will-change: transform; } html.fspl-motion-enabled :is( .fspl-motion-card, .about-principle-card, .about-accreditation-card, .about-stat-card, .ct-svc-card, .ct-tcard, .blog-card, .gallery-album-card, .gallery-album-showcase, .gallery-masonry-item, .hajj-testimonial-card, .hajj-step-card, .contact-form-card, .contact-info-card, .req-toggle-card, .inquiry-tab, .thankyou-card ):hover { transform: translateY(-8px) scale(1.012); box-shadow: var(--fspl-motion-shadow-strong); border-color: var(--fspl-motion-border); filter: saturate(1.035); animation-play-state: paused; } html.fspl-motion-enabled :is( .fspl-motion-card, .about-principle-card, .about-accreditation-card, .about-stat-card, .ct-svc-card, .ct-tcard, .blog-card, .gallery-album-card, .gallery-album-showcase, .gallery-masonry-item, .hajj-testimonial-card, .hajj-step-card, .contact-form-card, .contact-info-card, .req-toggle-card, .inquiry-tab, .thankyou-card ):hover :is(img, .gallery-album-card-media-img, .gallery-masonry-img, .ct-cap-photo, .ct-intro-image, .hero-visual-image) { transform: scale(1.045); } html.fspl-motion-enabled :is( .fspl-motion-card, .about-principle-card, .about-accreditation-card, .about-stat-card, .ct-svc-card, .ct-tcard, .blog-card, .gallery-album-card, .gallery-album-showcase, .gallery-masonry-item, .hajj-testimonial-card, .hajj-step-card, .contact-form-card, .contact-info-card, .req-toggle-card, .inquiry-tab, .thankyou-card ) :is(img, .gallery-album-card-media-img, .gallery-masonry-img, .ct-cap-photo, .ct-intro-image, .hero-visual-image) { transition: transform 520ms var(--fspl-motion-ease), filter 520ms ease; will-change: transform; } html.fspl-motion-enabled :is(.btn, .gallery-filter-btn, .blog-read-link, .gallery-showcase-link, .ct-anchor-pill, .contact-submit-btn) { transition: transform var(--fspl-motion-duration-fast) var(--fspl-motion-ease), box-shadow var(--fspl-motion-duration-fast) ease, filter var(--fspl-motion-duration-fast) ease; } html.fspl-motion-enabled :is(.btn, .gallery-filter-btn, .blog-read-link, .gallery-showcase-link, .ct-anchor-pill, .contact-submit-btn):hover { transform: translateY(-2px); filter: brightness(1.03) saturate(1.04); } /* ------------------------------------------------------------ 5) Optional continuous moving card strip Usage:
...
...
JS duplicates children once, then CSS moves the track. ------------------------------------------------------------ */ .fspl-marquee, [data-fspl-marquee] { overflow: hidden; position: relative; isolation: isolate; } .fspl-marquee::before, .fspl-marquee::after, [data-fspl-marquee]::before, [data-fspl-marquee]::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(42px, 8vw, 120px); z-index: 2; pointer-events: none; } .fspl-marquee::before, [data-fspl-marquee]::before { left: 0; background: linear-gradient(90deg, var(--clr-light-bg, #f7fbfc), transparent); } .fspl-marquee::after, [data-fspl-marquee]::after { right: 0; background: linear-gradient(270deg, var(--clr-light-bg, #f7fbfc), transparent); } .fspl-marquee-track { display: flex; align-items: stretch; gap: 1rem; width: max-content; animation: fspl-marquee-x var(--fspl-marquee-speed, 28s) linear infinite; will-change: transform; } .fspl-marquee:hover .fspl-marquee-track, [data-fspl-marquee]:hover .fspl-marquee-track { animation-play-state: paused; } .fspl-marquee-track > * { flex: 0 0 clamp(260px, 28vw, 380px); } @keyframes fspl-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------ 6) Accessibility: respect reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.fspl-motion-enabled body, html.fspl-motion-enabled body.fspl-page-entered, html.fspl-motion-enabled body.fspl-page-leaving, html.fspl-motion-enabled :is( .fade-up, .fade-in, .reveal-up, .reveal-left, .reveal-right, [data-fspl-reveal], .fspl-motion-reveal, .fspl-motion-card, .stagger-children > *, .fspl-stagger > *, .btn, .gallery-filter-btn, .blog-read-link, .gallery-showcase-link, .ct-anchor-pill, .contact-submit-btn ) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; } .fspl-marquee-track { animation: none !important; transform: none !important; width: auto; flex-wrap: wrap; } }