/* assets/css/header-swap.css */ /* ===== Variables & transitions ===== */ :root{ --fx-scale: .72; /* intensité de la rétraction */ --fx-translateY: -18px; /* remonte légèrement en se rétractant */ --fx-in: 340ms cubic-bezier(.2,.7,.2,1); --fx-out: 260ms cubic-bezier(.2,.7,.2,1); --header-top: 25px; /* top défini dans Elementor */ } /* Ajoute l'offset admin bar si connecté (fallbacks) */ #wpadminbar ~ * { --adminbar-h: 32px; } @media (max-width: 782px){ #wpadminbar ~ * { --adminbar-h: 46px; } } /* ====== Header 1 = Fixed overlay (celui qui chevauche le hero) ====== */ /* Ce conteneur est en position:fixed dans Elementor. On ne le bouleverse pas, on ajoute juste les transitions et quelques sécurités. */ #header-fixed{ transform-origin: center top; transition: transform var(--fx-in), opacity var(--fx-out), filter var(--fx-out), visibility var(--fx-out); z-index: 1000; /* au-dessus du hero */ top: calc(var(--header-top) + var(--adminbar-h, 0px)) !important; /* admin bar safe */ } /* ====== Header 2 = Compact (apparaît au scroll) ====== */ #header-compact{ /* Masqué par défaut */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.98); transition: transform var(--fx-in), opacity var(--fx-in), visibility var(--fx-in); z-index: 1001; /* passe au-dessus du header 1 quand actif */ /* Si Elementor lui a donné un style inline de position/width, on sursécure pour l'état initial (optionnel) */ } /* Évite d'animer/impacter le spacer cloné par Elementor sticky */ .elementor-sticky__spacer{} /* ====== État "scrolled" (déclenché par .elementor-sticky--effects sur ) ====== */ body.elementor-sticky--effects #header-fixed{ /* Rétraction vers le centre + disparition */ transform: translateY(var(--fx-translateY)) scale(var(--fx-scale)); opacity: 0; visibility: hidden; filter: blur(.3px); /* optionnel, pour un fade plus doux */ pointer-events: none; } body.elementor-sticky--effects #header-compact{ /* Apparition du header compact */ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); /* S'assurer de la position si ton conteneur compact n'est pas déjà en fixed */ position: fixed; top: calc(var(--header-top) + var(--adminbar-h, 0px)) !important; /* Centrage horizontal si souhaité (selon ton design) */ left: 0; right: 0; margin-inline: auto; /* Limite la largeur si besoin (sinon, supprime la ligne ci-dessous) */ width: min(100%, 1200px); } /* Optionnel : réduire légèrement le logo du header 1 pendant la rétraction */ body.elementor-sticky--effects #header-fixed .elementor-widget-image img{ transform: scale(.92); transition: transform var(--fx-in); transform-origin: center; } /* Accessibilité : si l’utilisateur préfère moins d’animations */ @media (prefers-reduced-motion: reduce){ #header-fixed, #header-compact{ transition: none !important; } }