/* === The Manipura Experience — Motion Pass === */ /* Template : wellness/spa féminin — Playfair Display, brun foncé / rose / blush */ @media (prefers-reduced-motion: no-preference) { /* ------------------------------------------------------------------ */ /* 1. Hero cascade (page load — index.html uniquement) */ /* ------------------------------------------------------------------ */ @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero__eyebrow { animation: fade-up .5s ease .05s both; } .hero h1 { animation: fade-up .6s ease .15s both; } .hero__lead { animation: fade-up .6s ease .25s both; } .hero__rating { animation: fade-up .5s ease .35s both; } .hero__ctas { animation: fade-up .5s ease .45s both; } .hero__visual { animation: fade-up .7s ease .55s both; } /* ------------------------------------------------------------------ */ /* 2. Scroll reveal — piloté par l'IO de main.js (.js sur ) */ /* ------------------------------------------------------------------ */ .js .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; } .js .fade-in.is-visible { opacity: 1; transform: translateY(0); } /* Décalages en cascade dans les grilles */ .services-grid .fade-in:nth-child(2) { transition-delay: .1s; } .services-grid .fade-in:nth-child(3) { transition-delay: .2s; } .services-grid .fade-in:nth-child(4) { transition-delay: .3s; } .testimonial-grid .fade-in:nth-child(2) { transition-delay: .1s; } .testimonial-grid .fade-in:nth-child(3) { transition-delay: .2s; } .steps .fade-in:nth-child(2) { transition-delay: .1s; } .steps .fade-in:nth-child(3) { transition-delay: .2s; } .about-values .fade-in:nth-child(2) { transition-delay: .1s; } .about-values .fade-in:nth-child(3) { transition-delay: .2s; } .about-values .fade-in:nth-child(4) { transition-delay: .3s; } /* ------------------------------------------------------------------ */ /* 3. Dérive douce du dégradé sur les .visual-placeholder */ /* ------------------------------------------------------------------ */ .visual-placeholder { background-size: 220% 220%; animation: placeholder-drift 9s ease-in-out infinite; } @keyframes placeholder-drift { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } } /* Lift discret au survol des cards qui contiennent un placeholder */ .service-card:hover .visual-placeholder { filter: brightness(1.04); transition: filter .3s ease; } /* ------------------------------------------------------------------ */ /* 4. Soulignement animé sur les liens de nav (pas la pill .nav-cta) */ /* ------------------------------------------------------------------ */ .nav-links a:not(.nav-cta) { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left 100%; background-size: 0% 1px; padding-bottom: 2px; transition: color .2s, background-size .3s ease; } .nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta)[aria-current="page"] { background-size: 100% 1px; } /* ------------------------------------------------------------------ */ /* 5. Boutons — lift au survol (toutes pages) */ /* ------------------------------------------------------------------ */ .btn { transition: background .2s, color .2s, border-color .2s, transform .2s ease, box-shadow .2s ease; } .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } /* Surcharge spécifique dans la band CTA (effet plus marqué) */ .cta-banner .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } /* ------------------------------------------------------------------ */ /* 7. Service cards — lift au survol */ /* ------------------------------------------------------------------ */ .service-card { transition: transform .25s ease, box-shadow .25s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, .11); } /* ------------------------------------------------------------------ */ /* 8. Testimonials cards — lift discret au survol */ /* ------------------------------------------------------------------ */ .testimonial-card { transition: transform .25s ease, box-shadow .25s ease; } .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, .09); } /* ------------------------------------------------------------------ */ /* 9. About-grid — stagger : second enfant légèrement retardé */ /* ------------------------------------------------------------------ */ .about-grid > div.fade-in:nth-child(2) { transition-delay: .15s; } /* ------------------------------------------------------------------ */ /* 10. Value items — cascade + hover glow (a-propos.html) */ /* ------------------------------------------------------------------ */ .about-values .value-item.fade-in:nth-child(2) { transition-delay: .1s; } .about-values .value-item.fade-in:nth-child(3) { transition-delay: .2s; } .about-values .value-item.fade-in:nth-child(4) { transition-delay: .3s; } .value-item { transition: border-color .25s ease, box-shadow .25s ease; } .value-item:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, .07); } /* ------------------------------------------------------------------ */ /* 11. Step numbers — pop à l'entrée dans le viewport */ /* ------------------------------------------------------------------ */ @keyframes step-pop { 0% { transform: scale(.75); opacity: 0; } 65% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .js .step.fade-in .step__num { opacity: 0; } .js .step.is-visible .step__num { animation: step-pop .45s ease both; } .js .step.is-visible:nth-child(2) .step__num { animation-delay: .1s; } .js .step.is-visible:nth-child(3) .step__num { animation-delay: .2s; } /* ------------------------------------------------------------------ */ /* 6. Focus visible soigné (accessibilité) */ /* ------------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; border-radius: 3px; transition: outline-offset .15s ease; } } /* -------------------------------------------------------------------- */ /* Garde-fou reduced-motion (doit rester en phase avec style.css) */ /* -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; } }