/** * EAAS Theme - Micro-animations subtiles * * Toutes les animations sont pilotées par les classes .eaas-anim-* * ajoutées au par output.php selon les réglages Customizer. * Sans classe = pas d'animation. * * @package EAAS * @version 2.5 * @file micro-animations.css */ /* ───────────────────────────────────────── * VARIABLES D'ANIMATION * ───────────────────────────────────────── */ :root { --anim-speed: 0.3s; --anim-ease: cubic-bezier(0.4, 0, 0.2, 1); --anim-lift: -2px; --anim-press: 0.97; } /* ───────────────────────────────────────── * BOUTONS — LIFT AU SURVOL * ───────────────────────────────────────── */ .eaas-anim-btn-lift .btn, .eaas-anim-btn-lift .wp-block-button__link, .eaas-anim-btn-lift input[type="submit"], .eaas-anim-btn-lift button[type="submit"], .eaas-anim-btn-lift .elementor-button { transition: transform var(--anim-speed) var(--anim-ease), box-shadow var(--anim-speed) var(--anim-ease), filter var(--anim-speed) var(--anim-ease); } .eaas-anim-btn-lift .btn:hover, .eaas-anim-btn-lift .wp-block-button__link:hover, .eaas-anim-btn-lift input[type="submit"]:hover, .eaas-anim-btn-lift button[type="submit"]:hover, .eaas-anim-btn-lift .elementor-button:hover { transform: translateY(var(--anim-lift)); } /* ───────────────────────────────────────── * BOUTONS — OMBRE ÉLARGIE AU SURVOL * ───────────────────────────────────────── */ .eaas-anim-btn-shadow .btn:hover, .eaas-anim-btn-shadow .wp-block-button__link:hover, .eaas-anim-btn-shadow input[type="submit"]:hover, .eaas-anim-btn-shadow button[type="submit"]:hover, .eaas-anim-btn-shadow .elementor-button:hover { box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.15); } /* ───────────────────────────────────────── * BOUTONS — PRESSION AU CLIC * ───────────────────────────────────────── */ .eaas-anim-btn-press .btn:active, .eaas-anim-btn-press .wp-block-button__link:active, .eaas-anim-btn-press input[type="submit"]:active, .eaas-anim-btn-press button[type="submit"]:active, .eaas-anim-btn-press .elementor-button:active { transform: scale(var(--anim-press)); transition-duration: 0.1s; } /* ───────────────────────────────────────── * CARTES — LIFT + OMBRE AU SURVOL * ───────────────────────────────────────── */ .eaas-anim-card .post-card, .eaas-anim-card .card, .eaas-anim-card .elementor-widget-container, .eaas-anim-card .footer-widget, .eaas-anim-card article.post { transition: transform var(--anim-speed) var(--anim-ease), box-shadow var(--anim-speed) var(--anim-ease); } .eaas-anim-card .post-card:hover, .eaas-anim-card .card:hover, .eaas-anim-card article.post:hover { transform: translateY(var(--anim-lift)); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1); } /* ───────────────────────────────────────── * LIENS — SOULIGNEMENT ANIMÉ * ───────────────────────────────────────── */ .eaas-anim-link .entry-content a:not(.btn):not(.wp-block-button__link), .eaas-anim-link .widget a, .eaas-anim-link .comment-content a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--anim-speed) var(--anim-ease); } .eaas-anim-link .entry-content a:not(.btn):not(.wp-block-button__link):hover, .eaas-anim-link .widget a:hover, .eaas-anim-link .comment-content a:hover { background-size: 100% 1px; } /* ───────────────────────────────────────── * IMAGES — ZOOM SUBTIL AU SURVOL * ───────────────────────────────────────── */ .eaas-anim-img .post-thumbnail, .eaas-anim-img .wp-post-image, .eaas-anim-img article img:not(.avatar) { transition: transform var(--anim-speed) var(--anim-ease); } .eaas-anim-img article:hover .post-thumbnail, .eaas-anim-img article:hover .wp-post-image, .eaas-anim-img article:hover img:not(.avatar) { transform: scale(1.02); } /* Container pour overflow hidden sur les images */ .eaas-anim-img .post-thumbnail-wrapper, .eaas-anim-img .entry-thumbnail { overflow: hidden; } /* ───────────────────────────────────────── * INPUTS — GLOW AU FOCUS * ───────────────────────────────────────── */ .eaas-anim-input input[type="text"], .eaas-anim-input input[type="email"], .eaas-anim-input input[type="url"], .eaas-anim-input input[type="password"], .eaas-anim-input input[type="search"], .eaas-anim-input input[type="number"], .eaas-anim-input input[type="tel"], .eaas-anim-input textarea, .eaas-anim-input select { transition: border-color var(--anim-speed) var(--anim-ease), box-shadow var(--anim-speed) var(--anim-ease); } .eaas-anim-input input:focus, .eaas-anim-input textarea:focus, .eaas-anim-input select:focus { box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb, 74, 144, 226), 0.12); } /* ───────────────────────────────────────── * FADE-IN AU SCROLL (JS ajoute .animate-in) * ───────────────────────────────────────── */ .eaas-anim-fade .fade-up { opacity: 0; transform: translateY(16px); transition: opacity calc(var(--anim-speed) * 2) var(--anim-ease), transform calc(var(--anim-speed) * 2) var(--anim-ease); } .eaas-anim-fade .fade-up.animate-in { opacity: 1; transform: translateY(0); } /* ───────────────────────────────────────── * RESPECT : prefers-reduced-motion * ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .fade-up { opacity: 1 !important; transform: none !important; } }