/* ============================================================ SCROLL ANIMATIONS — scroll-animations.css To revert: remove this file and its from layouts/app.blade.php ============================================================ */ /* ── BASE HIDDEN STATE ── */ [data-animate] { opacity: 0; will-change: opacity, transform; transition-property: opacity, transform, filter; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); transition-duration: 0.75s; } /* ── TRIGGERED STATE — no !important so hover can override ── */ [data-animate="fade-up"].animate-in { opacity: 1; transform: translateY(0); } [data-animate="fade-left"].animate-in { opacity: 1; transform: translateX(0); } [data-animate="fade-right"].animate-in { opacity: 1; transform: translateX(0); } [data-animate="zoom-in"].animate-in { opacity: 1; transform: scale(1); filter: blur(0px); } [data-animate="rise-card"].animate-in { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0deg) scale(1); } [data-animate="flip-up"].animate-in { opacity: 1; transform: perspective(700px) rotateX(0deg) translateY(0); } [data-animate="pop"].animate-in { opacity: 1; transform: scale(1); } /* ── ANIMATION TYPES ── */ [data-animate="fade-up"] { transform: translateY(45px); } [data-animate="fade-left"] { transform: translateX(-50px); } [data-animate="fade-right"]{ transform: translateX(50px); } [data-animate="zoom-in"] { transform: scale(0.82); filter: blur(3px); } [data-animate="rise-card"] { transform: perspective(900px) translateY(60px) rotateX(15deg) scale(0.92); transform-origin: bottom center; transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); transition-duration: 0.6s; } [data-animate="flip-up"] { transform: perspective(700px) rotateX(18deg) translateY(35px); transform-origin: bottom center; transition-duration: 0.85s; } [data-animate="pop"] { transform: scale(0.7); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-duration: 0.65s; } /* ── STAGGER DELAYS ── */ [data-delay="80"] { transition-delay: 80ms; } [data-delay="120"] { transition-delay: 120ms; } [data-delay="160"] { transition-delay: 160ms; } [data-delay="200"] { transition-delay: 200ms; } [data-delay="240"] { transition-delay: 240ms; } [data-delay="280"] { transition-delay: 280ms; } [data-delay="320"] { transition-delay: 320ms; } [data-delay="360"] { transition-delay: 360ms; } [data-delay="400"] { transition-delay: 400ms; } [data-delay="480"] { transition-delay: 480ms; } [data-delay="560"] { transition-delay: 560ms; } /* ── TITLE LINE WRAPPER — restore opacity when animate-in fires ── */ [data-animate="title-line"].animate-in { opacity: 1; } /* ── TITLE LINE GROW-IN ── */ .title-line { display: inline-block; transform: scaleX(0); transform-origin: left center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } .title-line-wrapper.animate-in .title-line { transform: scaleX(1); } .title-dot { opacity: 0; transform: scale(0); transition: opacity 0.4s ease 0.9s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s; } .title-line-wrapper.animate-in .title-dot { opacity: 1; transform: scale(1); } /* ============================================================ HOVER ANIMATIONS ============================================================ */ /* ── Feature / product cards ── */ .product-card { transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease !important; } .product-card:hover { transform: translateY(-8px) scale(1.03) !important; box-shadow: 0 20px 45px rgba(var(--site-main-color-rgb, 29, 78, 137), 0.22) !important; } /* ── Stat boxes ── */ .stat-box { transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.3s ease; cursor: default; } .stat-box:hover { transform: translateY(-6px) scale(1.06); box-shadow: 0 12px 30px rgba(var(--site-main-color-rgb, 29, 78, 137), 0.18); } /* ── Partner / school logos ── */ .school-item { transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); } .school-item:hover { transform: translateY(-6px) scale(1.08); } .school-item img { transition: box-shadow 0.3s ease; } .school-item:hover img { box-shadow: 0 8px 24px rgba(var(--site-main-color-rgb, 29, 78, 137), 0.25); } /* ── Review items ── */ .review-item { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 14px; padding: 16px; } .review-item:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); background: #fafbff; } /* ── Pricing cards — hover handled by pricing-plans.css ── */ /* ── FAQ / accordion items ── */ .accordion-item { transition: transform 0.25s ease, box-shadow 0.25s ease; } .accordion-item:hover { transform: translateX(4px); box-shadow: -3px 0 0 var(--site-main-color, #1D4E89), 0 4px 16px rgba(0, 0, 0, 0.07); } /* ── Download app image ── */ .download-img-box img, .app-preview { transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.4s ease; } .download-img-box:hover img, .download-img-box:hover .app-preview { transform: scale(1.04) translateY(-5px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.15); } /* ── Slider navigation arrows ── */ .ta-nav-arrow { transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease !important; } .ta-nav-arrow:hover:not(.ta-disabled) { transform: scale(1.2); background: var(--ta-primary, #1D4E89) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(var(--site-main-color-rgb, 29, 78, 137), 0.35) !important; } /* ── Section videos / media ── */ .section-video, .ta-slide-video video { transition: transform 0.35s ease, box-shadow 0.35s ease; } .section-video:hover, .ta-slide-video:hover video { transform: scale(1.02); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18); } /* ── Benefit / feature listing cards ── */ .benefits-card, .benefit-card, .feature-listing-card { transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.3s ease; } .benefits-card:hover, .benefit-card:hover, .feature-listing-card:hover { transform: translateY(-7px) scale(1.02); box-shadow: 0 16px 36px rgba(var(--site-main-color-rgb, 29, 78, 137), 0.15); }