/* ========================================================================= EduExcel — Animation Layer (assets/css/animations.css) ------------------------------------------------------------------------- Kept in its own file, separate from theme.css, so it can be swapped, disabled (Customizer > EduExcel Animations > Off), or overridden per project without touching layout/color rules. Progressive-enhancement contract: - Every element this file targets is fully visible by default (opacity:1, no transform). Nothing is ever hidden by CSS alone. - Elements are only pre-hidden (ready to animate in) once JS confirms (a) prefers-reduced-motion is NOT set, and (b) IntersectionObserver is supported — by adding `.eduexcel-anim-ready` to . See assets/js/animations.js. - That means: JS disabled, slow connection, crawler/SEO bot, or reduced motion → content just renders normally, instantly, no FOUC, nothing ever stuck invisible. ========================================================================= */ :root { --edu-anim-duration: 700ms; --edu-anim-duration-fast: 400ms; --edu-anim-ease: cubic-bezier(0.16, 1, 0.3, 1); --edu-anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --edu-anim-stagger: 90ms; } @media (prefers-reduced-motion: reduce) { :root { --edu-anim-duration: 1ms; --edu-anim-duration-fast: 1ms; --edu-anim-stagger: 0ms; } } /* --------------------------------------------------------------------- Keyframes --------------------------------------------------------------------- */ @keyframes eduexcelFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes eduexcelFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes eduexcelFadeLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes eduexcelFadeRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes eduexcelZoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } @keyframes eduexcelPopIn { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes eduexcelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes eduexcelShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes eduexcelPulseRing { 0% { box-shadow: 0 0 0 0 rgba(30, 95, 217, .35); } 100% { box-shadow: 0 0 0 14px rgba(30, 95, 217, 0); } } @keyframes eduexcelSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes eduexcelUnderline { from { width: 0; } to { width: 100%; } } /* --------------------------------------------------------------------- Generic reveal utility — any element with [data-edu-reveal] animates in once its parent gets `.eduexcel-in-view` (added by animations.js via IntersectionObserver). Direction comes from the attribute value. --------------------------------------------------------------------- */ .eduexcel-anim-ready [data-edu-reveal] { opacity: 0; } .eduexcel-in-view [data-edu-reveal] { animation-duration: var(--edu-anim-duration); animation-timing-function: var(--edu-anim-ease); animation-fill-mode: both; animation-delay: var(--edu-delay, 0ms); } .eduexcel-in-view [data-edu-reveal="up"] { animation-name: eduexcelFadeUp; } .eduexcel-in-view [data-edu-reveal="left"] { animation-name: eduexcelFadeLeft; } .eduexcel-in-view [data-edu-reveal="right"] { animation-name: eduexcelFadeRight; } .eduexcel-in-view [data-edu-reveal="zoom"] { animation-name: eduexcelZoomIn; } .eduexcel-in-view [data-edu-reveal="pop"] { animation-name: eduexcelPopIn; } .eduexcel-in-view [data-edu-reveal="fade"] { animation-name: eduexcelFadeIn; } /* --------------------------------------------------------------------- Section heading — eyebrow underline draws in, title/description fade up right after. --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-section-heading, .eduexcel-anim-ready .eduexcel-heading-block { opacity: 0; } .eduexcel-in-view .eduexcel-section-heading, .eduexcel-in-view .eduexcel-heading-block { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-divider-label::before { transform-origin: right; } .eduexcel-divider-label::after { transform-origin: left; } .eduexcel-anim-ready .eduexcel-divider-label::before, .eduexcel-anim-ready .eduexcel-divider-label::after { transform: scaleX(0); } .eduexcel-in-view .eduexcel-divider-label::before, .eduexcel-in-view .eduexcel-divider-label::after { animation: eduexcelUnderlineScale var(--edu-anim-duration-fast) var(--edu-anim-ease) 200ms both; } @keyframes eduexcelUnderlineScale { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --------------------------------------------------------------------- Hero Slider — staggered content reveal keyed off Swiper's own `.swiper-slide-active` class, so it naturally replays every time the slide changes (add/remove of a matched class restarts CSS animation). Zero JS required for this part. --------------------------------------------------------------------- */ .eduexcel-hero-copy > * { animation-duration: var(--edu-anim-duration); animation-timing-function: var(--edu-anim-ease); animation-fill-mode: both; } .swiper-slide:not(.swiper-slide-active) .eduexcel-hero-copy > * { opacity: 0; } .swiper-slide-active .eduexcel-eyebrow { animation-name: eduexcelFadeUp; animation-delay: 60ms; } .swiper-slide-active .eduexcel-hero-title { animation-name: eduexcelFadeUp; animation-delay: 160ms; } .swiper-slide-active .eduexcel-hero-desc { animation-name: eduexcelFadeUp; animation-delay: 260ms; } .swiper-slide-active .eduexcel-hero-actions { animation-name: eduexcelFadeUp; animation-delay: 360ms; } .swiper-slide:not(.swiper-slide-active) .eduexcel-hero-media img { transform: scale(1.08); opacity: 0; } .swiper-slide-active .eduexcel-hero-media img { animation: eduexcelHeroImage 1000ms var(--edu-anim-ease) 120ms both; } @keyframes eduexcelHeroImage { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } } .eduexcel-stat-strip { opacity: 0; } .eduexcel-stat-strip { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) 200ms both; } /* Nav arrow micro-interaction */ .eduexcel-swiper .swiper-button-prev, .eduexcel-swiper .swiper-button-next { transition: transform .25s var(--edu-anim-ease-bounce), box-shadow .25s ease; } .eduexcel-swiper .swiper-button-prev:hover, .eduexcel-swiper .swiper-button-next:hover { transform: scale(1.12); box-shadow: var(--edu-shadow-md); } .eduexcel-swiper .swiper-pagination-bullet { transition: width .3s var(--edu-anim-ease), background-color .3s ease; } /* --------------------------------------------------------------------- Card grids inside sliders (Academic Journey, Facilities, Campus Life, Testimonials, News) — staggered pop/fade-up the first time the section scrolls into view (same ancestor `.eduexcel-in-view` mechanism as every other reveal in this file, added by the IntersectionObserver in animations.js). Per-card stagger comes from the `--edu-i` custom property animations.js sets on each `.swiper-slide` (its position within the current "row" of visible slides), independent of Swiper's own active/visible slide classes — those track *carousel* position, not *scroll* position, and only reliably tag a single slide unless `watchSlidesProgress` is enabled, so they're the wrong signal for a "has this grid been scrolled into view yet" reveal. --------------------------------------------------------------------- */ .eduexcel-stage-card, .eduexcel-facility-card, .eduexcel-campus-card, .eduexcel-testimonial-card, .eduexcel-news-card { animation-duration: var(--edu-anim-duration); animation-timing-function: var(--edu-anim-ease); animation-fill-mode: both; transition: transform .3s var(--edu-anim-ease), box-shadow .3s ease, border-color .3s ease; } .eduexcel-anim-ready .eduexcel-stage-card, .eduexcel-anim-ready .eduexcel-facility-card, .eduexcel-anim-ready .eduexcel-campus-card, .eduexcel-anim-ready .eduexcel-testimonial-card, .eduexcel-anim-ready .eduexcel-news-card { opacity: 0; } .eduexcel-in-view .eduexcel-stage-card { animation-name: eduexcelFadeUp; opacity: 1; } .eduexcel-in-view .eduexcel-facility-card { animation-name: eduexcelPopIn; opacity: 1; } .eduexcel-in-view .eduexcel-campus-card { animation-name: eduexcelZoomIn; opacity: 1; } .eduexcel-in-view .eduexcel-testimonial-card { animation-name: eduexcelFadeUp; opacity: 1; } .eduexcel-in-view .eduexcel-news-card { animation-name: eduexcelFadeUp; opacity: 1; } /* Per-slide stagger — animations.js sets --edu-i (slide index within its row) as an inline custom property so cards cascade left-to-right. */ .eduexcel-swiper .swiper-slide { animation-delay: calc(var(--edu-i, 0) * var(--edu-anim-stagger)); } .eduexcel-swiper .swiper-slide .eduexcel-stage-card, .eduexcel-swiper .swiper-slide .eduexcel-facility-card, .eduexcel-swiper .swiper-slide .eduexcel-campus-card, .eduexcel-swiper .swiper-slide .eduexcel-testimonial-card, .eduexcel-swiper .swiper-slide .eduexcel-news-card { animation-delay: calc(var(--edu-i, 0) * var(--edu-anim-stagger)); } /* Card hover interactions (motion, not just entrance) */ .eduexcel-stage-card:hover { transform: translateY(-8px) scale(1.015); } .eduexcel-stage-card:hover .eduexcel-stage-icon { animation: eduexcelPopIn .4s var(--edu-anim-ease-bounce); } .eduexcel-stage-image img { transition: transform .5s var(--edu-anim-ease); } .eduexcel-stage-card:hover .eduexcel-stage-image img { transform: scale(1.08); } .eduexcel-facility-card:hover { transform: translateY(-6px); } .eduexcel-facility-card:hover .eduexcel-facility-icon { animation: eduexcelPopIn .45s var(--edu-anim-ease-bounce); background: #ffffff;padding:5px; color: #fff; } .eduexcel-facility-icon { transition: background-color .3s ease, color .3s ease; } .eduexcel-news-card:hover { transform: translateY(-6px); } .eduexcel-news-image img { transition: transform .5s var(--edu-anim-ease); } .eduexcel-news-card:hover .eduexcel-news-image img { transform: scale(1.06); } .eduexcel-news-readmore i { transition: transform .25s var(--edu-anim-ease); display: inline-block; } .eduexcel-news-card:hover .eduexcel-news-readmore i { transform: translateX(5px); } .eduexcel-testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--edu-shadow-md); } .eduexcel-quote-mark { transition: transform .3s var(--edu-anim-ease); } .eduexcel-testimonial-card:hover .eduexcel-quote-mark { transform: scale(1.15) rotate(-4deg); } /* --------------------------------------------------------------------- Why Choose Us grid — staggered pop-in on scroll --------------------------------------------------------------------- */ .eduexcel-why-item { animation-duration: var(--edu-anim-duration); animation-timing-function: var(--edu-anim-ease-bounce); animation-fill-mode: both; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .eduexcel-anim-ready .eduexcel-why-item { opacity: 0; } .eduexcel-in-view .eduexcel-why-item { animation-name: eduexcelPopIn; } .eduexcel-why-item:nth-child(1) { animation-delay: calc(1 * var(--edu-anim-stagger)); } .eduexcel-why-item:nth-child(2) { animation-delay: calc(2 * var(--edu-anim-stagger)); } .eduexcel-why-item:nth-child(3) { animation-delay: calc(3 * var(--edu-anim-stagger)); } .eduexcel-why-item:nth-child(4) { animation-delay: calc(4 * var(--edu-anim-stagger)); } .eduexcel-why-item:nth-child(5) { animation-delay: calc(5 * var(--edu-anim-stagger)); } .eduexcel-why-item:nth-child(6) { animation-delay: calc(6 * var(--edu-anim-stagger)); } .eduexcel-why-item:nth-child(7) { animation-delay: calc(7 * var(--edu-anim-stagger)); } .eduexcel-why-item:hover { transform: translateY(-5px); border-color: var(--edu-blue); box-shadow: var(--edu-shadow-sm); } .eduexcel-why-item:hover .eduexcel-why-icon { animation: eduexcelPulseRing 1s var(--edu-anim-ease) both; } /* --------------------------------------------------------------------- Stat counters — number pop + icon ring pulse once visible (pairs with the requestAnimationFrame count-up already in theme.js) --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-stat-item { opacity: 0; } .eduexcel-in-view .eduexcel-stat-item { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-stat-item:nth-child(1) { animation-delay: calc(1 * var(--edu-anim-stagger)); } .eduexcel-stat-item:nth-child(2) { animation-delay: calc(2 * var(--edu-anim-stagger)); } .eduexcel-stat-item:nth-child(3) { animation-delay: calc(3 * var(--edu-anim-stagger)); } .eduexcel-stat-item:nth-child(4) { animation-delay: calc(4 * var(--edu-anim-stagger)); } .eduexcel-stat-icon { transition: transform .3s var(--edu-anim-ease-bounce); } .eduexcel-stat-item:hover .eduexcel-stat-icon { transform: scale(1.15) rotate(-6deg); } /* --------------------------------------------------------------------- FAQ accordion — bouncy plus/minus rotation + smoother open transition --------------------------------------------------------------------- */ .eduexcel-faq-item { transition: border-color .25s ease, box-shadow .25s ease; } .eduexcel-faq-item:hover { border-color: var(--edu-blue); } .eduexcel-faq-question i { transition: transform .35s var(--edu-anim-ease-bounce); } .eduexcel-faq-item.is-open { box-shadow: var(--edu-shadow-sm); } .eduexcel-faq-answer { transition: max-height .35s var(--edu-anim-ease); } .eduexcel-anim-ready .eduexcel-faq-item { opacity: 0; transform: translateY(16px); } .eduexcel-in-view .eduexcel-faq-item { animation: eduexcelFadeUp var(--edu-anim-duration-fast) var(--edu-anim-ease) both; opacity: 1; transform: none; } .eduexcel-faq-item:nth-child(1) { animation-delay: calc(1 * var(--edu-anim-stagger)); } .eduexcel-faq-item:nth-child(2) { animation-delay: calc(2 * var(--edu-anim-stagger)); } .eduexcel-faq-item:nth-child(3) { animation-delay: calc(3 * var(--edu-anim-stagger)); } .eduexcel-faq-item:nth-child(4) { animation-delay: calc(4 * var(--edu-anim-stagger)); } .eduexcel-faq-item:nth-child(5) { animation-delay: calc(5 * var(--edu-anim-stagger)); } /* --------------------------------------------------------------------- CTA Banner — gentle floating image + button shine sweep + highlight list stagger --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-cta-copy > * { opacity: 0; } .eduexcel-in-view .eduexcel-cta-copy > * { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-in-view .eduexcel-cta-copy > *:nth-child(1) { animation-delay: 60ms; } .eduexcel-in-view .eduexcel-cta-copy > *:nth-child(2) { animation-delay: 160ms; } .eduexcel-in-view .eduexcel-cta-copy > *:nth-child(3) { animation-delay: 260ms; } .eduexcel-in-view .eduexcel-cta-copy > *:nth-child(4) { animation-delay: 360ms; } .eduexcel-anim-ready .eduexcel-cta-media { opacity: 0; } .eduexcel-in-view .eduexcel-cta-media { animation: eduexcelZoomIn var(--edu-anim-duration) var(--edu-anim-ease) 200ms both; } .eduexcel-in-view .eduexcel-cta-media img { animation: eduexcelFloat 4.5s ease-in-out 1s infinite; } .eduexcel-anim-ready .eduexcel-cta-highlights li { opacity: 0; } .eduexcel-in-view .eduexcel-cta-highlights li { animation: eduexcelFadeUp var(--edu-anim-duration-fast) var(--edu-anim-ease) both; } .eduexcel-cta-highlights li:nth-child(1) { animation-delay: 420ms; } .eduexcel-cta-highlights li:nth-child(2) { animation-delay: 480ms; } .eduexcel-cta-highlights li:nth-child(3) { animation-delay: 540ms; } .eduexcel-cta-highlights li:nth-child(4) { animation-delay: 600ms; } .eduexcel-btn { position: relative; overflow: hidden; } .eduexcel-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .55s ease; } .eduexcel-btn:hover::after { left: 130%; } /* --------------------------------------------------------------------- Header — logo pop on load, sticky nav shadow grow on scroll, underline sweep on menu links, mobile menu slide-down --------------------------------------------------------------------- */ .eduexcel-branding { animation: eduexcelFadeLeft var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-nav-actions { animation: eduexcelFadeRight var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-menu a { position: relative; } .eduexcel-menu a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--edu-blue); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--edu-anim-ease); } .eduexcel-menu a:hover::after, .eduexcel-menu li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left; } .eduexcel-nav-bar.is-scrolled { box-shadow: var(--edu-shadow-md); transition: box-shadow .3s ease; } .eduexcel-mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s var(--edu-anim-ease); padding: 0 24px; } .eduexcel-mobile-menu.is-open { max-height: 480px; padding: 16px 24px; } .eduexcel-menu-toggle span { transition: transform .3s var(--edu-anim-ease), opacity .2s ease; } .eduexcel-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .eduexcel-menu-toggle.is-active span:nth-child(2) { opacity: 0; } .eduexcel-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --------------------------------------------------------------------- Page-load skeleton shimmer for lazy images (optional utility class widgets can add via `eduexcel-img-shimmer`; harmless if unused) --------------------------------------------------------------------- */ .eduexcel-img-shimmer { background: linear-gradient(90deg, var(--edu-bg) 25%, #eef3fb 37%, var(--edu-bg) 63%); background-size: 400% 100%; animation: eduexcelShimmer 1.4s ease infinite; } /* --------------------------------------------------------------------- Reduced motion — belt & suspenders on top of the shortened durations in :root above: kill transforms entirely, keep only opacity fades. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .eduexcel-cta-media img, .eduexcel-swiper .swiper-button-prev:hover, .eduexcel-swiper .swiper-button-next:hover, .eduexcel-stage-card:hover, .eduexcel-facility-card:hover, .eduexcel-why-item:hover, .eduexcel-testimonial-card:hover { animation: none !important; transform: none !important; } * { scroll-behavior: auto !important; } } /* ========================================================================= EduExcel — Animation Layer additions Append these two blocks to assets/css/animations.css (same file, same progressive-enhancement contract: nothing here hides content unless `.eduexcel-anim-ready` is present on , which JS only adds after confirming reduced-motion is off and IntersectionObserver is supported). ========================================================================= */ /* --------------------------------------------------------------------- Our Campuses — dashed heading draws in, description follows, cards pop in with a left-to-right stagger the same way `.eduexcel-why-item` does elsewhere in this file (fixed nth-child delays rather than the `--edu-i` custom property, since this grid isn't a Swiper instance). --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-title-dashed, .eduexcel-anim-ready .eduexcel-section-desc { opacity: 0; } .eduexcel-in-view .eduexcel-title-dashed { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-in-view .eduexcel-section-desc { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) 120ms both; } /* Dashes either side of the heading draw inward, same technique as .eduexcel-divider-label::before/::after above */ .eduexcel-title-dashed .eduexcel-dash:first-child { transform-origin: right; } .eduexcel-title-dashed .eduexcel-dash:last-child { transform-origin: left; } .eduexcel-anim-ready .eduexcel-dash { transform: scaleX(0); } .eduexcel-in-view .eduexcel-dash { animation: eduexcelUnderlineScale var(--edu-anim-duration-fast) var(--edu-anim-ease) 260ms both; } /* Card entrance — reuses the existing .eduexcel-campus-card rules (opacity:0 while anim-ready, eduexcelZoomIn once .eduexcel-in-view is added) and layers a left-to-right stagger on top */ .eduexcel-campuses-grid .eduexcel-campus-card:nth-child(1) { animation-delay: calc(1 * var(--edu-anim-stagger)); } .eduexcel-campuses-grid .eduexcel-campus-card:nth-child(2) { animation-delay: calc(2 * var(--edu-anim-stagger)); } .eduexcel-campuses-grid .eduexcel-campus-card:nth-child(3) { animation-delay: calc(3 * var(--edu-anim-stagger)); } .eduexcel-campuses-grid .eduexcel-campus-card:nth-child(4) { animation-delay: calc(4 * var(--edu-anim-stagger)); } .eduexcel-campuses-grid .eduexcel-campus-card:nth-child(5) { animation-delay: calc(5 * var(--edu-anim-stagger)); } .eduexcel-campuses-grid .eduexcel-campus-card:nth-child(6) { animation-delay: calc(6 * var(--edu-anim-stagger)); } /* Card hover interactions (motion, not just entrance) — same pattern as .eduexcel-facility-card / .eduexcel-news-card hover blocks above */ .eduexcel-campus-card:hover { transform: translateY(-6px); box-shadow: var(--edu-shadow-md); } .eduexcel-campus-image img { transition: transform .5s var(--edu-anim-ease); } .eduexcel-campus-card:hover .eduexcel-campus-image img { transform: scale(1.06); } .eduexcel-campus-card:hover .eduexcel-campus-icon { animation: eduexcelPopIn .4s var(--edu-anim-ease-bounce); } .eduexcel-campus-directions i { transition: transform .25s var(--edu-anim-ease); display: inline-block; } .eduexcel-campus-card:hover .eduexcel-campus-directions i { transform: translateX(4px); } /* --------------------------------------------------------------------- Inner Page Banner — content stacks fade up in sequence (title, script subheading, description, buttons), same cadence as .eduexcel-cta-copy above; media zooms in slightly after, wave divider slides in from the seam last so it reads as "drawn" between the two halves. --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-inner-banner-content > * { opacity: 0; } .eduexcel-in-view .eduexcel-inner-banner-content > * { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-in-view .eduexcel-inner-banner-content > *:nth-child(1) { animation-delay: 60ms; } .eduexcel-in-view .eduexcel-inner-banner-content > *:nth-child(2) { animation-delay: 160ms; } .eduexcel-in-view .eduexcel-inner-banner-content > *:nth-child(3) { animation-delay: 260ms; } .eduexcel-in-view .eduexcel-inner-banner-content > *:nth-child(4) { animation-delay: 360ms; } .eduexcel-anim-ready .eduexcel-inner-banner-media { opacity: 0; } .eduexcel-in-view .eduexcel-inner-banner-media { animation: eduexcelZoomIn var(--edu-anim-duration) var(--edu-anim-ease) 200ms both; } .eduexcel-anim-ready .eduexcel-inner-banner-wave { opacity: 0; transform: translateX(-16px); } .eduexcel-in-view .eduexcel-inner-banner-wave { animation: eduexcelWaveIn var(--edu-anim-duration) var(--edu-anim-ease) 380ms both; } @keyframes eduexcelWaveIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } /* Note: CTA-style buttons already get the shine-sweep hover from the generic `.eduexcel-btn::after` rule earlier in this file — no extra rule needed since the Inner Banner buttons reuse that same class. */ /* --------------------------------------------------------------------- Reduced motion — extend the existing belt & suspenders list --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .eduexcel-inner-banner-media, .eduexcel-campus-card:hover, .eduexcel-campus-card:hover .eduexcel-campus-image img { animation: none !important; transform: none !important; } } /* ========================================================================= EduExcel — Animation Layer additions (part 2) Append to assets/css/animations.css, same progressive-enhancement contract as the rest of the file. ========================================================================= */ /* --------------------------------------------------------------------- About School — eyebrow/heading/description fade up in sequence (same cadence as .eduexcel-cta-copy / .eduexcel-inner-banner-content), slider fades/zooms in slightly after. Individual slides get their left-to-right stagger for free via the existing `.eduexcel-swiper .swiper-slide { animation-delay: calc(var(--edu-i,0)…) }` rule already in this file — nothing new needed there. --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-about-content > * { opacity: 0; } .eduexcel-in-view .eduexcel-about-content > * { animation: eduexcelFadeUp var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-in-view .eduexcel-about-content > *:nth-child(1) { animation-delay: 60ms; } .eduexcel-in-view .eduexcel-about-content > *:nth-child(2) { animation-delay: 160ms; } .eduexcel-in-view .eduexcel-about-content > *:nth-child(3) { animation-delay: 260ms; } .eduexcel-anim-ready .eduexcel-about-slider { opacity: 0; } .eduexcel-in-view .eduexcel-about-slider { animation: eduexcelZoomIn var(--edu-anim-duration) var(--edu-anim-ease) 220ms both; } /* Card hover — image scale + caption lift, same idiom as other card hovers in this file */ .eduexcel-about-card img { transition: transform .5s var(--edu-anim-ease); } .eduexcel-about-card:hover img { transform: scale(1.06); } .eduexcel-about-card-caption { transition: transform .3s var(--edu-anim-ease); } .eduexcel-about-card:hover .eduexcel-about-card-caption { transform: translateY(-3px); } /* --------------------------------------------------------------------- Vision, Mission & Principal — boxes pop in with a stagger (same technique as .eduexcel-why-item), principal card fades/zooms in slightly after so it reads as the "payoff" of the section. --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-vm-box { opacity: 0; } .eduexcel-in-view .eduexcel-vm-box { animation: eduexcelPopIn var(--edu-anim-duration) var(--edu-anim-ease-bounce) both; } .eduexcel-vm-boxes .eduexcel-vm-box:nth-child(1) { animation-delay: calc(1 * var(--edu-anim-stagger)); } .eduexcel-vm-boxes .eduexcel-vm-box:nth-child(2) { animation-delay: calc(2 * var(--edu-anim-stagger)); } .eduexcel-vm-box:hover { transform: translateY(-5px); transition: transform .25s ease; } .eduexcel-vm-box:hover .eduexcel-vm-icon { animation: eduexcelPulseRing 1s var(--edu-anim-ease) both; } .eduexcel-anim-ready .eduexcel-principal-card { opacity: 0; } .eduexcel-in-view .eduexcel-principal-card { animation: eduexcelZoomIn var(--edu-anim-duration) var(--edu-anim-ease) 240ms both; } .eduexcel-anim-ready .eduexcel-principal-content > * { opacity: 0; } .eduexcel-in-view .eduexcel-principal-content > * { animation: eduexcelFadeUp var(--edu-anim-duration-fast) var(--edu-anim-ease) both; } .eduexcel-in-view .eduexcel-principal-content > *:nth-child(1) { animation-delay: 340ms; } .eduexcel-in-view .eduexcel-principal-content > *:nth-child(2) { animation-delay: 400ms; } .eduexcel-in-view .eduexcel-principal-content > *:nth-child(3) { animation-delay: 460ms; } .eduexcel-in-view .eduexcel-principal-content > *:nth-child(4) { animation-delay: 520ms; } .eduexcel-principal-quote { transition: transform .3s var(--edu-anim-ease); } .eduexcel-principal-card:hover .eduexcel-principal-quote { transform: scale(1.15) rotate(-4deg); } /* --------------------------------------------------------------------- Reduced motion — extend the existing belt & suspenders list --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .eduexcel-about-slider, .eduexcel-about-card:hover img, .eduexcel-vm-box:hover, .eduexcel-principal-card:hover .eduexcel-principal-quote { animation: none !important; transform: none !important; } } /* ========================================================================= EduExcel — Animation Layer additions (part 3) Append to assets/css/animations.css, same progressive-enhancement contract as the rest of the file. ========================================================================= */ /* --------------------------------------------------------------------- Admission Process — heading draws in (reuses the .eduexcel-title-dashed / .eduexcel-dash rules from part 1), steps pop in left-to-right using the inline --edu-i each step already carries, connector line draws after the icons land so it reads as "linking" the steps together. --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-process-step { opacity: 0; } .eduexcel-in-view .eduexcel-process-step { animation: eduexcelPopIn var(--edu-anim-duration) var(--edu-anim-ease-bounce) both; animation-delay: calc(var(--edu-i, 0) * var(--edu-anim-stagger)); } .eduexcel-anim-ready .eduexcel-process-step:not(.is-last)::after { transform: scaleX(0); } .eduexcel-process-step::after { transform-origin: left; } .eduexcel-in-view .eduexcel-process-step:not(.is-last)::after { animation: eduexcelUnderlineScale var(--edu-anim-duration) var(--edu-anim-ease) calc((var(--edu-i, 0) * var(--edu-anim-stagger)) + 220ms) both; } @media (max-width: 900px) { /* Stacked mobile layout connects vertically — animate height instead of width so the line still "draws" downward between steps */ .eduexcel-process-step::after { transform-origin: top; } } .eduexcel-process-icon-circle { transition: transform .3s var(--edu-anim-ease-bounce), box-shadow .3s ease; } .eduexcel-process-step:hover .eduexcel-process-icon-circle { transform: scale(1.1) translateY(-3px); box-shadow: var(--edu-shadow-md); } .eduexcel-process-number { transition: transform .3s var(--edu-anim-ease-bounce); } .eduexcel-process-step:hover .eduexcel-process-number { transform: scale(1.15); } /* --------------------------------------------------------------------- Eligibility & Documents — panels fade up (left panel first, right panel just after), eligibility rows cascade in one at a time, document cards pop in with a stagger via their inline --edu-i. --------------------------------------------------------------------- */ .eduexcel-anim-ready .eduexcel-ed-panel { opacity: 0; } .eduexcel-in-view .eduexcel-eligibility-panel { animation: eduexcelFadeLeft var(--edu-anim-duration) var(--edu-anim-ease) both; } .eduexcel-in-view .eduexcel-documents-panel { animation: eduexcelFadeRight var(--edu-anim-duration) var(--edu-anim-ease) 120ms both; } .eduexcel-anim-ready .eduexcel-eligibility-row { opacity: 0; } .eduexcel-in-view .eduexcel-eligibility-row { animation: eduexcelFadeUp var(--edu-anim-duration-fast) var(--edu-anim-ease) both; } .eduexcel-eligibility-list .eduexcel-eligibility-row:nth-child(1) { animation-delay: calc(1 * var(--edu-anim-stagger)); } .eduexcel-eligibility-list .eduexcel-eligibility-row:nth-child(2) { animation-delay: calc(2 * var(--edu-anim-stagger)); } .eduexcel-eligibility-list .eduexcel-eligibility-row:nth-child(3) { animation-delay: calc(3 * var(--edu-anim-stagger)); } .eduexcel-eligibility-list .eduexcel-eligibility-row:nth-child(4) { animation-delay: calc(4 * var(--edu-anim-stagger)); } .eduexcel-eligibility-list .eduexcel-eligibility-row:nth-child(5) { animation-delay: calc(5 * var(--edu-anim-stagger)); } .eduexcel-eligibility-list .eduexcel-eligibility-row:nth-child(6) { animation-delay: calc(6 * var(--edu-anim-stagger)); } .eduexcel-eligibility-row:hover { transform: translateX(3px); transition: transform .2s ease; } .eduexcel-anim-ready .eduexcel-document-card { opacity: 0; } .eduexcel-in-view .eduexcel-document-card { animation: eduexcelPopIn var(--edu-anim-duration) var(--edu-anim-ease-bounce) both; animation-delay: calc(var(--edu-i, 0) * var(--edu-anim-stagger) + 160ms); } .eduexcel-document-card:hover { transform: translateY(-4px); box-shadow: var(--edu-shadow-md); transition: transform .25s ease, box-shadow .25s ease; } .eduexcel-document-icon { transition: transform .3s var(--edu-anim-ease-bounce); } .eduexcel-document-card:hover .eduexcel-document-icon { transform: scale(1.15) rotate(-4deg); } /* --------------------------------------------------------------------- Reduced motion — extend the existing belt & suspenders list --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .eduexcel-process-step:hover .eduexcel-process-icon-circle, .eduexcel-eligibility-row:hover, .eduexcel-document-card:hover, .eduexcel-document-card:hover .eduexcel-document-icon { animation: none !important; transform: none !important; } }