/** * JET ATLAS — Preloader (extended styles) * * Le critique est inline dans (voir inc/preloader.php). * Ce fichier ajoute : * - Layout du contenu interne * - Logo entrance soft (fade + scale) * - Pulse lime sous le logo (signature brand) * - prefers-reduced-motion : retire animation, garde la couverture */ .ja-preloader__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3vh, 32px); text-align: center; padding: 24px; } .ja-preloader__logo { display: block; height: clamp(80px, 12vh, 128px); width: auto; max-width: min(60vw, 320px); object-fit: contain; opacity: 0; transform: scale(0.96); animation: ja-preloader-logo-in 0.7s 0.05s cubic-bezier(0.16, 1, 0.3, 1) forwards; filter: drop-shadow(0 10px 24px rgba(10, 10, 10, 0.10)); } .ja-preloader__pulse { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ja-lime, #DCFF00); box-shadow: 0 0 0 0 rgba(220, 255, 0, 0.55); transform: scale(1); animation: ja-preloader-pulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; } @keyframes ja-preloader-logo-in { to { opacity: 1; transform: scale(1); } } @keyframes ja-preloader-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 255, 0, 0.55); transform: scale(1); } 70% { box-shadow: 0 0 0 22px rgba(220, 255, 0, 0); transform: scale(1.45); } 100% { box-shadow: 0 0 0 0 rgba(220, 255, 0, 0); transform: scale(1); } } /* ===== Reduced motion ==================================== * Coverage reste, animations off. * ========================================================= */ @media (prefers-reduced-motion: reduce) { .ja-preloader { transition: opacity 0.25s linear, visibility 0s linear 0.25s; } .ja-preloader.is-loaded { transition: opacity 0.25s linear, visibility 0s linear 0.25s; } .ja-preloader__logo { animation: none; opacity: 1; transform: none; } .ja-preloader__pulse { animation: none; box-shadow: 0 0 0 4px rgba(220, 255, 0, 0.35); } }