/* ========================================================================== Movimento — Fondazione Zappalà ETS Il manuale chiede «dignità, non bisogno»: niente parallasse, niente scroll-jacking, niente caroselli che partono da soli. Il movimento guida la lettura, non si fa notare. ========================================================================== */ :root { /* Una curva sola per tutto il sito: parte decisa e si posa piano. Curve diverse su elementi diversi si notano, e male. */ --fz-curva: cubic-bezier(.2, .6, .2, 1); --fz-durata: 480ms; --fz-passo: 60ms; } /* --- La regola che viene prima di tutte ----------------------------------- Nulla è nascosto finché JavaScript non lo dice. `fz-js` viene messa su da uno script in linea prima del disegno: senza JavaScript, o se lo script fallisce, la pagina resta interamente leggibile. Nascondere prima e mostrare dopo è il modo più comune di rendere un sito inutilizzabile per chi ha una connessione lenta o uno script bloccato. */ .fz-js .fz-rivela { opacity: 0; transform: translateY(12px); will-change: opacity, transform; } .fz-js .fz-rivela.fz-visibile { opacity: 1; transform: none; transition: opacity var(--fz-durata) var(--fz-curva), transform var(--fz-durata) var(--fz-curva); will-change: auto; } /* --- Cascata -------------------------------------------------------------- Le schede di una griglia entrano sfalsate. Il ritardo sta in CSS e non in JavaScript: l'osservatore deve solo aggiungere una classe al contenitore. */ .fz-js .fz-cascata > * { opacity: 0; transform: translateY(12px); } .fz-js .fz-cascata.fz-visibile > * { opacity: 1; transform: none; transition: opacity var(--fz-durata) var(--fz-curva), transform var(--fz-durata) var(--fz-curva); } .fz-js .fz-cascata.fz-visibile > *:nth-child(1) { transition-delay: 0ms; } .fz-js .fz-cascata.fz-visibile > *:nth-child(2) { transition-delay: calc(var(--fz-passo) * 1); } .fz-js .fz-cascata.fz-visibile > *:nth-child(3) { transition-delay: calc(var(--fz-passo) * 2); } .fz-js .fz-cascata.fz-visibile > *:nth-child(4) { transition-delay: calc(var(--fz-passo) * 3); } .fz-js .fz-cascata.fz-visibile > *:nth-child(5) { transition-delay: calc(var(--fz-passo) * 4); } .fz-js .fz-cascata.fz-visibile > *:nth-child(6) { transition-delay: calc(var(--fz-passo) * 5); } .fz-js .fz-cascata.fz-visibile > *:nth-child(7) { transition-delay: calc(var(--fz-passo) * 6); } .fz-js .fz-cascata.fz-visibile > *:nth-child(8) { transition-delay: calc(var(--fz-passo) * 7); } /* Oltre l'ottavo elemento il ritardo si ferma: mezzo secondo di attesa per vedere comparire la nona scheda non è più eleganza, è lentezza. */ .fz-js .fz-cascata.fz-visibile > *:nth-child(n + 9) { transition-delay: calc(var(--fz-passo) * 8); } /* --- Il taglio si disegna ------------------------------------------------- La riga oro a 33,8° si traccia dall'alto verso il basso. È il gesto del marchio — la Z che viene tagliata — ed è l'unico movimento del sito che si possa chiamare decorativo. Uno solo, e solo all'apertura delle fasce blu. */ .fz-js .fz-taglio::before { clip-path: inset(0 0 100% 0); } .fz-js .fz-taglio.fz-visibile::before { animation: fz-traccia 900ms var(--fz-curva) 120ms both; } @keyframes fz-traccia { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } /* --- Il quadrato oro ------------------------------------------------------ */ .fz-js .fz-elenco.fz-rivela > li::before, .fz-js .fz-rivela .fz-elenco > li::before { transform: scale(0); transform-origin: center; } .fz-js .fz-elenco.fz-visibile > li::before, .fz-js .fz-visibile .fz-elenco > li::before { transform: scale(1); transition: transform 240ms var(--fz-curva); } .fz-js .fz-elenco.fz-visibile > li:nth-child(1)::before { transition-delay: 40ms; } .fz-js .fz-elenco.fz-visibile > li:nth-child(2)::before { transition-delay: 80ms; } .fz-js .fz-elenco.fz-visibile > li:nth-child(3)::before { transition-delay: 120ms; } .fz-js .fz-elenco.fz-visibile > li:nth-child(4)::before { transition-delay: 160ms; } .fz-js .fz-elenco.fz-visibile > li:nth-child(5)::before { transition-delay: 200ms; } .fz-js .fz-elenco.fz-visibile > li:nth-child(n + 6)::before { transition-delay: 240ms; } /* --- Numeri d'area -------------------------------------------------------- */ .fz-js .fz-cascata.fz-visibile .fz-numero { animation: fz-sale 400ms var(--fz-curva) both; } @keyframes fz-sale { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* --- Passaggio del mouse -------------------------------------------------- Solo dove esiste un puntatore: su un telefono `:hover` resta appiccicato dopo il tocco e la scheda rimane sollevata finché non se ne tocca un'altra. */ @media (hover: hover) and (pointer: fine) { .fz-scheda { transition: border-color 200ms var(--fz-curva), transform 200ms var(--fz-curva), box-shadow 200ms var(--fz-curva); } .fz-scheda:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--wp--preset--color--blu) 45%, transparent); } /* La sottolineatura non compare né sparisce: si ispessisce e vira all'oro. Toglierla e rimetterla al passaggio lascerebbe i link riconoscibili dal solo colore, che è un modo di escludere chi non distingue i colori. */ a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color 180ms var(--fz-curva), text-decoration-thickness 180ms var(--fz-curva), color 180ms var(--fz-curva); } a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--wp--preset--color--oro); } .fz-pie a:hover { text-decoration-color: var(--wp--preset--color--oro-chiaro); } .wp-block-button__link { transition: background-color 200ms var(--fz-curva), border-color 200ms var(--fz-curva), color 200ms var(--fz-curva); } } /* --- Testata allo scorrimento --------------------------------------------- */ .fz-testata { transition: box-shadow 200ms var(--fz-curva); } .fz-testata.fz-scorso { box-shadow: 0 2px 14px -6px color-mix(in srgb, var(--wp--preset--color--blu) 40%, transparent); } /* --- Menù mobile ---------------------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open { animation: fz-entra 240ms var(--fz-curva) both; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > * { animation: fz-sale 240ms var(--fz-curva) both; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(2) { animation-delay: 40ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(3) { animation-delay: 80ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(4) { animation-delay: 120ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(n + 5) { animation-delay: 160ms; } @keyframes fz-entra { from { opacity: 0; } to { opacity: 1; } } /* --- Chi ha chiesto di non vedere movimento ------------------------------- Non è un di più: chi ha disturbi vestibolari sta fisicamente male con le comparse. Qui non si «riduce» il movimento, si toglie — e gli elementi partono già al loro posto, non è che appaiano dopo. */ @media (prefers-reduced-motion: reduce) { .fz-js .fz-rivela, .fz-js .fz-cascata > *, .fz-js .fz-cascata.fz-visibile > * { opacity: 1 !important; transform: none !important; transition: none !important; } .fz-js .fz-taglio::before, .fz-js .fz-taglio.fz-visibile::before { clip-path: none !important; animation: none !important; } .fz-js .fz-elenco > li::before, .fz-js .fz-elenco.fz-visibile > li::before { transform: scale(1) !important; transition: none !important; } .fz-js .fz-cascata.fz-visibile .fz-numero, .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > * { animation: none !important; } .fz-scheda:hover { transform: none; } * { scroll-behavior: auto !important; } } /* --- Stampa --------------------------------------------------------------- Su carta non c'è scorrimento, quindi non c'è niente che riveli gli elementi in attesa: senza questa regola una pagina stampata verrebbe fuori con dei buchi bianchi al posto del testo. */ @media print { .fz-js .fz-rivela, .fz-js .fz-cascata > * { opacity: 1 !important; transform: none !important; } .fz-js .fz-taglio::before { clip-path: none !important; } .fz-js .fz-elenco > li::before { transform: scale(1) !important; } }