/** * WC Anim - CSS statico del sistema di animazioni * WebCraft Booking Theme (child di YOOtheme Pro) * * Regole strutturali soltanto. Nessuna animazione viene definita qui: * durate, easing e movimenti sono gestiti da GSAP via data-attribute. * * Questo file NON viene mai iniettato da JavaScript: è un asset statico * accodato con wp_enqueue_style, quindi cacheable e non bloccante per il * rendering più di qualsiasi altro CSS. */ /* ========================================================================= 1. VARIABILI Sovrascrivibili in css/custom.css per personalizzare senza toccare questo file. Esempio: :root { --wc-anim-accent: #ff4d00; } ====================================================================== */ :root { /* Colore usato dagli elementi decorativi (barra di progresso, cursore). */ --wc-anim-accent: currentColor; /* Spessore della barra di progresso di lettura. */ --wc-anim-progress-size: 3px; } /* ========================================================================= 2. STATO PRE-ANIMAZIONE ------------------------------------------------------------------------ La classe .wc-anim-pending viene aggiunta a SOLO dal boot inline, ed è sempre rimossa entro il timeout del watchdog. È l'unico punto in tutto il sistema in cui del contenuto viene nascosto. Nota deliberata: l'occultamento è ristretto ai due attributi che richiedono esplicitamente un'animazione di entrata. Nessun selettore generico, nessuna regola su sezioni o contenitori: se il sistema si spegne, al massimo restano visibili elementi che non si animeranno. ====================================================================== */ .wc-anim-pending [data-wc-reveal], .wc-anim-pending [data-wc-text], .wc-anim-pending [data-wc-stagger-group] { opacity: 0; } /* * data-wc-parallax NON compare qui di proposito: è un effetto continuo * legato allo scroll, l'elemento deve restare visibile dall'inizio. Non c'è * nulla da rivelare, solo da muovere. */ /* * Viene usata l'opacità e non "visibility: hidden" di proposito: un * elemento con visibility:hidden viene ignorato dagli screen reader, e * questo contenuto è destinato a comparire, non a restare nascosto. */ /* ========================================================================= 3. STATO ATTIVO .wc-anim-ready su segnala che le librerie sono caricate e il sistema ha preso il controllo. Utile anche per CSS condizionale tuo. ====================================================================== */ .wc-anim-ready [data-wc-reveal], .wc-anim-ready [data-wc-text] { /* * Da qui in avanti l'opacità è gestita da GSAP con stili inline, che * hanno la precedenza. Questa regola serve solo come rete di sicurezza * per il caso in cui un elemento venga escluso dal guard UIkit dopo * che la classe pending è già stata applicata. */ opacity: 1; } /* ========================================================================= 4. SMOOTH SCROLL (Lenis) Classi applicate da Lenis stesso su . ====================================================================== */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* * Durante uno scroll programmatico (ancore interne, uk-scroll) gli eventi * touch vanno ignorati, altrimenti l'utente combatte con l'animazione. */ .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } /* ========================================================================= 5. PERFORMANCE ------------------------------------------------------------------------ La classe .wc-anim-active viene aggiunta da JS solo mentre l'elemento si sta effettivamente animando, e rimossa alla fine. Tenere will-change sempre attivo satura la memoria GPU e peggiora le prestazioni: va usato come suggerimento temporaneo, non come stile permanente. ====================================================================== */ .wc-anim-active { will-change: transform, opacity; } /* * La parallasse anima solo trasformazioni e resta accesa per tutta la vita * della pagina: dichiarare will-change sull'opacità sarebbe uno spreco di * memoria GPU su un valore che non cambia mai. */ [data-wc-parallax].wc-anim-active { will-change: transform; } /* ========================================================================= 6. SPLIT DEL TESTO (data-wc-text) ------------------------------------------------------------------------ Struttura generata: .wc-split-sr copia del testo per gli screen reader .wc-split-visual contenitore dei frammenti, aria-hidden .wc-split-line-mask contenitore con overflow nascosto (solo lines-mask) .wc-split-line riga .wc-split-word parola .wc-split-char carattere ====================================================================== */ /* * Copia accessibile: invisibile ma leggibile dagli assistivi. * Non si usa display:none né visibility:hidden, che la escluderebbero * dall'albero di accessibilità. */ .wc-split-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Contenitore dei frammenti visivi. Blocco perché data-wc-text è pensato * per elementi di testo di livello blocco (titoli, paragrafi): è la * condizione perché lo split per righe abbia senso. */ .wc-split-visual { display: block; } /* * Parole e caratteri devono poter essere trasformati: gli elementi inline * ignorano transform, quindi servono inline-block. */ .wc-split-word, .wc-split-char { display: inline-block; white-space: pre-wrap; } .wc-split-line { display: block; } /* * La maschera ritaglia la riga: il testo che scorre da sotto resta * invisibile finché non entra nell'area della riga. * * Il padding-bottom negativo compensato dal margine recupera lo spazio dei * discendenti (le "code" di g, p, q), che altrimenti verrebbero tagliate. */ .wc-split-line-mask { display: block; overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; } /* ========================================================================= 7. MARQUEE (data-wc-marquee) ------------------------------------------------------------------------ Struttura generata: .wc-marquee il contenitore originale .wc-marquee-track nastro che scorre (contiene originale + copie) .wc-marquee-copy copia decorativa, sempre aria-hidden ====================================================================== */ .wc-marquee { /* * Il nastro è più largo del contenitore per definizione: senza questo * la pagina acquisirebbe uno scroll orizzontale. */ overflow: hidden; } .wc-marquee-track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; will-change: transform; } .wc-marquee-track > * { flex: none; } .wc-marquee-copy { display: flex; flex-wrap: nowrap; align-items: center; } /* ========================================================================= 8. BARRA DI AVANZAMENTO (data-wc-progress) ====================================================================== */ .wc-progress { transform-origin: left center; will-change: transform; } /* In RTL la barra deve crescere dal lato opposto. */ [dir="rtl"] .wc-progress { transform-origin: right center; } /* * Aspetto minimo, solo se non è già stato definito nel Builder: così la * barra è visibile appena la si aggiunge, ma qualsiasi stile impostato * dall'utente ha la precedenza (specificità più alta o stile inline). */ .wc-progress:not([class*="uk-"]) { min-height: var(--wc-anim-progress-size); background-color: var(--wc-anim-accent); } /* ========================================================================= 9. EFFETTI AL PASSAGGIO DEL MOUSE ------------------------------------------------------------------------ Tutto racchiuso in @media (hover: hover) and (pointer: fine): su touch questi effetti o non si vedono mai, o restano "incollati" dopo il tocco. Il browser ci arriva da solo, senza sniffing di user agent. ====================================================================== */ :root { /* Ingrandimento predefinito di data-wc-hover-image="zoom". */ --wc-hover-scale: 1.08; /* Durata delle transizioni hover. */ --wc-hover-duration: 0.6s; /* Curva condivisa: la stessa "power3.out" usata da GSAP. */ --wc-hover-ease: cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) and (pointer: fine) { /* --- data-wc-hover-image ------------------------------------------ * Nessun JavaScript in esecuzione al movimento del mouse: le * transizioni CSS su :hover fanno esattamente questo lavoro, e il * compositore le gestisce senza coinvolgere il thread principale. * ---------------------------------------------------------------- */ [data-wc-hover-image] { /* L'immagine ingrandita non deve sbordare dal riquadro. */ overflow: hidden; position: relative; } [data-wc-hover-image] img, [data-wc-hover-image] picture > img { transition: transform var(--wc-hover-duration) var(--wc-hover-ease), filter var(--wc-hover-duration) var(--wc-hover-ease), opacity var(--wc-hover-duration) var(--wc-hover-ease); will-change: auto; } /* zoom: ingrandimento morbido. */ [data-wc-hover-image="zoom"]:hover img { transform: scale(var(--wc-hover-scale)); } /* shift: scorrimento laterale, per immagini più larghe del riquadro. */ [data-wc-hover-image="shift"] img { transform: scale(var(--wc-hover-scale)); } [data-wc-hover-image="shift"]:hover img { transform: scale(var(--wc-hover-scale)) translateX(-3%); } /* grayscale: l'immagine prende colore al passaggio. */ [data-wc-hover-image="grayscale"] img { filter: grayscale(1); } [data-wc-hover-image="grayscale"]:hover img { filter: grayscale(0); transform: scale(var(--wc-hover-scale)); } /* reveal: una tendina si apre dal basso scoprendo l'immagine. */ [data-wc-hover-image="reveal"] img { clip-path: inset(0 0 0 0); } [data-wc-hover-image="reveal"]::after { content: ""; position: absolute; inset: 0; background-color: currentColor; opacity: 0.85; transform: translateY(0); transition: transform var(--wc-hover-duration) var(--wc-hover-ease); pointer-events: none; } [data-wc-hover-image="reveal"]:hover::after { transform: translateY(-100%); } /* --- data-wc-tilt -------------------------------------------------- */ .wc-tilt { /* * La prospettiva va dichiarata sull'elemento inclinato, non sul * genitore: così ogni scheda ha il proprio punto di fuga e le * inclinazioni non si deformano a vicenda in una griglia. */ transform-style: preserve-3d; perspective: 900px; } .wc-tilt-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--wc-hover-duration) var(--wc-hover-ease); background: radial-gradient( circle at var(--wc-tilt-x, 50%) var(--wc-tilt-y, 50%), rgba(255, 255, 255, 0.28), transparent 45% ); border-radius: inherit; } .wc-tilt-active .wc-tilt-glare { opacity: 1; } /* --- Cursore personalizzato ---------------------------------------- */ .wc-cursor { position: fixed; top: 0; left: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid var(--wc-anim-accent); border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, width 0.35s var(--wc-hover-ease), height 0.35s var(--wc-hover-ease), background-color 0.35s ease; } .wc-cursor-visible { opacity: 1; } /* Sopra un elemento cliccabile l'anello si allarga. */ .wc-cursor-hover { width: 46px; height: 46px; margin: -23px 0 0 -23px; } /* Con un'etichetta diventa una pastiglia piena. */ .wc-cursor-labelled { width: auto; height: auto; min-width: 76px; margin: 0; padding: 0.55em 1.1em; transform-origin: center; background-color: var(--wc-anim-accent); } .wc-cursor-label { font-size: 0.75rem; line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; } .wc-cursor:not(.wc-cursor-labelled) .wc-cursor-label { display: none; } /* * Il cursore di sistema resta visibile per scelta: nasconderlo * disorienta chi ha problemi di vista o di motricità fine, e in caso di * errore JavaScript lascerebbe la pagina senza alcun puntatore. * Chi vuole comunque nasconderlo aggiunga in css/custom.css: * * .wc-cursor-on, .wc-cursor-on * { cursor: none !important; } */ } /* ========================================================================= 10. EFFETTI CINEMATICI ====================================================================== */ /* * Pila di schede (data-wc-stack). * * Il blocco è affidato a position: sticky, non al pin di ScrollTrigger. * sticky è nativo, non toglie l'elemento dal flusso e non richiede * distanziatori: quindi NON introduce spostamenti di layout, che sono il * rischio principale di questo tipo di effetto. */ .wc-stack-card { position: sticky; /* il valore di "top" viene scritto da JS, uno diverso per ogni scheda */ transform-origin: center top; will-change: transform; } /* * Il contenitore non deve avere overflow nascosto: interromperebbe * l'aggancio di position: sticky dei figli. È l'errore più comune con * questo effetto. */ .wc-stack { overflow: visible; } /* ========================================================================= 11. PRELOADER (opzionale, spento di serie) ------------------------------------------------------------------------ IL PUNTO CENTRALE DI QUESTO BLOCCO ---------------------------------- La sparizione del velo è garantita da un'animazione CSS, non dal JavaScript. Un elemento che copre l'intera pagina non può dipendere, per togliersi di mezzo, da uno script che potrebbe non arrivare mai. Con questa impostazione il velo se ne va comunque: - con JavaScript disattivato; - con il CDN irraggiungibile; - se un altro script della pagina va in errore prima del nostro; - se il browser non supporta qualcosa che usiamo. Il JavaScript stampato dal PHP si limita ad ANTICIPARE la sparizione quando la pagina è pronta davvero. È un miglioramento, mai una condizione. ====================================================================== */ .wc-preloader { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background-color: var(--wc-preloader-bg, #fff); /* * Il tetto massimo di vita. Il ritardo è il tempo concesso, la durata è * la dissolvenza finale, e "forwards" fa restare lo stato di arrivo. * Nessuno script coinvolto. */ animation: wc-preloader-failsafe 0.45s ease var(--wc-preloader-timeout, 3000ms) forwards; } @keyframes wc-preloader-failsafe { to { opacity: 0; visibility: hidden; } } /* * Congedo anticipato, applicato dallo script quando la pagina è pronta. * "animation: none" spegne il conto alla rovescia del CSS, che a quel * punto ha esaurito il suo compito. */ .wc-preloader-done { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s var(--wc-hover-ease, ease), visibility 0s 0.5s; } /* * Impaginazione interna: logo sopra, indicatore sotto. Con il solo logo o * il solo indicatore il layout resta identico, senza spazi vuoti. */ .wc-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; } /* --- Logo --- */ .wc-preloader-logo { /* * Responsivo per costruzione: non supera mai la larghezza richiesta, * ma su schermi stretti si riduce da solo senza media query. */ width: clamp(72px, 34vw, var(--wc-preloader-logo-width, 140px)); line-height: 0; /* * Colore del logo. * * Quando è impostato 'logo_color', il PHP riscrive in currentColor i * fill e gli stroke del disegno (mai quelli dentro le maschere) e il * colore arriva da qui. Senza l'opzione, questa variabile non esiste e * il logo resta esattamente come è stato disegnato. * * Puoi sovrascriverlo in css/custom.css senza toccare il PHP: * .wc-preloader-logo { color: #0e536d; } */ color: var(--wc-preloader-logo-color, inherit); /* * Comparsa sobria: dissolvenza con un accenno di scala, una volta sola. * Interamente in CSS, come tutto il resto del preloader: deve funzionare * anche quando nessuno script è disponibile. */ animation: wc-preloader-logo-in 0.7s var(--wc-hover-ease, ease) both, wc-preloader-logo-breathe 3.2s ease-in-out 0.7s infinite; } /* L'SVG inline e l'eventuale di ripiego si comportano allo stesso modo. */ .wc-preloader-logo svg, .wc-preloader-logo img { display: block; width: 100%; height: auto; } @keyframes wc-preloader-logo-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } /* Respiro appena percettibile: dà vita all'attesa senza distrarre. */ @keyframes wc-preloader-logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } /* Con il logo l'indicatore fa da comprimario e si assottiglia. */ .wc-preloader-has-logo .wc-preloader-mark { opacity: 0.65; } /* --- Indicatore: barra sottile --- */ .wc-preloader-bar .wc-preloader-mark { width: min(220px, 40vw); height: 2px; overflow: hidden; background-color: color-mix(in srgb, var(--wc-preloader-color, currentColor) 20%, transparent); } .wc-preloader-bar .wc-preloader-mark::after { content: ""; display: block; width: 40%; height: 100%; background-color: var(--wc-preloader-color, currentColor); animation: wc-preloader-slide 1.1s ease-in-out infinite; } @keyframes wc-preloader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* --- Indicatore: punto pulsante --- */ .wc-preloader-dot .wc-preloader-mark { width: 12px; height: 12px; border-radius: 999px; background-color: var(--wc-preloader-color, currentColor); animation: wc-preloader-pulse 1s ease-in-out infinite; } @keyframes wc-preloader-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } } /* * Volutamente NON viene bloccato lo scroll della pagina mentre il velo è * visibile. Bloccarlo avrebbe richiesto di scrivere su e di * ripristinarlo alla fine: un'operazione che, se lo script si interrompe a * metà, lascia la pagina inutilizzabile. Lo scroll dietro un velo opaco non * si vede comunque, quindi non c'è nulla da guadagnare e molto da perdere. */ /* ========================================================================= 12. MOVIMENTO RIDOTTO ------------------------------------------------------------------------ Terza e ultima linea di difesa, dopo il boot inline e il controllo in wc-anim.js. Se l'utente ha attivato la riduzione del movimento, tutto deve essere visibile e fermo, in qualsiasi condizione. ====================================================================== */ @media (prefers-reduced-motion: reduce) { [data-wc-reveal], [data-wc-text], [data-wc-stagger-group], [data-wc-stagger-group] > *, [data-wc-parallax], .wc-split-word, .wc-split-char, .wc-split-line { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; } .wc-anim-active { will-change: auto; } /* * MARQUEE FERMO, CONTENUTO VISIBILE. * * Un nastro che scorre all'infinito è il caso peggiore per chi soffre * di disturbi vestibolari. Il nastro viene fermato dove si trova, non * nascosto: il contenuto resta leggibile. * * Questa regola copre anche il caso in cui la preferenza venga attivata * a marquee già costruito, quando il JavaScript non ha più occasione di * intervenire. */ .wc-marquee-track { transform: none !important; animation-play-state: paused !important; will-change: auto; } /* * Le copie servono solo a dare continuità allo scorrimento. Fermo il * nastro sono contenuto ripetuto e basta, quindi si tolgono di mezzo. * Sono già aria-hidden, quindi nessuno perde informazione. */ .wc-marquee-copy { display: none; } .wc-marquee { overflow: auto; } /* La barra di avanzamento resta piena e ferma. */ .wc-progress { transform: none !important; } /* * Effetti hover azzerati. Le transizioni non vengono solo accorciate ma * rimosse: un movimento di 0,01s è comunque un movimento, e su schede * che si inclinano al passaggio del mouse è proprio ciò che disturba. */ .wc-tilt, .wc-magnetic, [data-wc-hover-image] img { transform: none !important; transition: none !important; } .wc-tilt-glare, [data-wc-hover-image="reveal"]::after { display: none; } /* Le immagini restano al loro stato definitivo, non a quello di riposo. */ [data-wc-hover-image="grayscale"] img { filter: none !important; } /* Niente cursore che insegue. */ .wc-cursor { display: none !important; } /* * Effetti cinematici disinnescati. Le schede della pila tornano a * scorrere normalmente una dopo l'altra: restano tutte leggibili, si * perde solo la sovrapposizione. */ .wc-stack-card { position: static !important; transform: none !important; } [data-wc-clip], [data-wc-scroll] { clip-path: none !important; transform: none !important; opacity: 1 !important; } /* * IL PRELOADER NON COMPARE AFFATTO. * * Non viene reso più breve né immobile: viene tolto del tutto. Un velo * che copre la pagina è, per chi ha chiesto meno movimento, un ostacolo * senza alcun beneficio - e la pagina sotto è già pronta a essere letta. * * Lo script di congedo rimuove anche il nodo dal DOM, così non resta * nemmeno un elemento inerte a intercettare i clic. */ .wc-preloader { display: none !important; animation: none !important; } }