/* ============================================================ VIVO - come le cose reagiscono a chi le guarda e le tocca. Ultimo foglio caricato: corregge, non riscrive. Tre difetti veri, non tre effetti in piu': 4 otto elementi respiravano allo STESSO ritmo esatto, 3.4 secondi tutti quanti. Un battito perfettamente sincronizzato non sembra vivo: sembra un semaforo. 5 la luce che si accende al passaggio del mouse aveva la stessa durata in entrata e in uscita. In natura le cose si accendono di scatto e si spengono piano. E chi naviga da tastiera non la vedeva affatto. 6 niente reagiva alla pressione. Premevi e non succedeva niente finche' la pagina non cambiava: mezzo secondo in cui non sai se hai premuto davvero. ============================================================ */ /* ------------------------------------------------------------ 4 - IL RESPIRO SFASATO Durate che non sono multipli l'una dell'altra, cosi' non tornano mai in fase. I ritardi sono NEGATIVI: l'animazione parte gia' a meta' strada, quindi non c'e' nessuna attesa all'apertura della pagina. ------------------------------------------------------------ */ .occhiello { animation-duration:4.3s; animation-delay:-1.1s } .st b { animation-duration:3.9s; animation-delay:-2.4s } .st b.inf { animation-duration:3.1s; animation-delay:-0.6s } .canale-punto { animation-duration:3.6s; animation-delay:-1.9s } .avanz-cifra { animation-duration:2.3s; animation-delay:-1.3s } .sfida { animation-duration:4.9s; animation-delay:-0.9s } .fascia-eti { animation-duration:4.1s; animation-delay:-2.2s } /* Sono due, Strumenti e Partnership, e battevano insieme. */ .fascia.distanziata .fascia-eti{ animation-duration:3.3s; animation-delay:-0.8s } /* Gli occhielli sono uno per sezione: se restassero uguali fra loro, la pagina respirerebbe tutta insieme scorrendo. */ main > section:nth-of-type(3n+1) .occhiello{ animation-delay:-0.7s } main > section:nth-of-type(3n+2) .occhiello{ animation-delay:-2.5s } main > section:nth-of-type(3n+3) .occhiello{ animation-delay:-3.8s } /* I tre contatori stanno affiancati: sincroni si vedeva. */ .st:nth-child(1) b{ animation-delay:-0.5s } .st:nth-child(2) b{ animation-delay:-2.7s } .st:nth-child(3) b{ animation-delay:-1.6s } /* Anche i pallini dei canali, che sono in colonna. */ .canale-riga:nth-child(1) .canale-punto{ animation-delay:-0.3s } .canale-riga:nth-child(2) .canale-punto{ animation-delay:-1.7s } .canale-riga:nth-child(3) .canale-punto{ animation-delay:-2.9s } .canale-riga:nth-child(4) .canale-punto{ animation-delay:-3.4s } /* ------------------------------------------------------------ 5 - LA LUCE CON INERZIA Il trucco: la transizione LENTA sta sullo stato di riposo, la VELOCE sullo stato acceso. Cosi' l'accensione usa la durata corta e lo spegnimento quella lunga - senza una riga di JavaScript, e girando tutto sul compositore. ------------------------------------------------------------ */ /* ATTENZIONE alla specificita'. La regola delle comparse e' .rv [data-sc] - due classi - e vince su .bottone, che ne ha una. Percio' l'inerzia si scrive DENTRO .rv.on: cosi' arriva dopo che l'elemento e' comparso, e la molla dell'ingresso resta intatta. Fuori dalle sezioni che compaiono (barra, pie) basta la classe raddoppiata. Ci ero gia' cascato con .fg i contro .r3. */ .rv.on .porta, .rv.on .bottone, .rv.on .icona, .rv.on .canale-riga, .rv.on .stampa, .rv.on .lettore-avvia, .rv.on .porta-vai, .rv.on .canale-vai, .bottone.bottone, .icona.icona, .canale-riga.canale-riga, .stampa.stampa{ transition-property:transform, box-shadow, border-color, background-color, color, opacity; transition-duration:var(--d3); transition-timing-function:var(--curva-entra); } .porta.porta:hover, .porta.porta:focus-visible, .bottone.bottone:hover, .bottone.bottone:focus-visible, .icona.icona:hover, .icona.icona:focus-visible, .canale-riga.canale-riga:hover, .canale-riga.canale-riga:focus-visible, .stampa.stampa:hover, .stampa.stampa:focus-visible, .lettore-avvia:hover, .lettore-avvia:focus-visible{ transition-duration:var(--d1); transition-timing-function:var(--curva-secca); } /* Chi arriva da tastiera vedeva meno di chi arriva col mouse. La stessa luce, piu' un contorno che dice DOVE si e'. */ .bottone:focus-visible, .icona:focus-visible, .canale-riga:focus-visible, .stampa:focus-visible, .lettore-avvia:focus-visible{ transform:translateY(-2px); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:var(--r1); } /* I campi hanno gia' il loro anello: due contorni sovrapposti sarebbero rumore. */ .campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible{ outline:none } .bottone:hover, .bottone:focus-visible{ box-shadow:0 1px 0 rgba(var(--bianco-rgb),.28) inset, 0 16px 32px -14px rgba(var(--teal-rgb),.85), 0 0 26px -6px rgba(var(--teal-rgb),.5); } .bottone.chiaro:hover, .bottone.chiaro:focus-visible{ border-color:rgba(var(--teal-rgb),.45); box-shadow:0 0 22px -8px rgba(var(--teal-rgb),.55); } /* ------------------------------------------------------------ 6 - LA REAZIONE ALLA PRESSIONE Corta e secca: 160 millisecondi. Serve a rispondere "ti ho sentito" nel mezzo secondo in cui la pagina non e' ancora cambiata. Se dura di piu' diventa un effetto; se dura questo, e' solo una conferma. ------------------------------------------------------------ */ .bottone.bottone:active, .porta.viva:active, .icona.icona:active, .stampa.stampa:active, .lettore-avvia:active, .canale-riga.canale-riga:active{ transform:translateY(0) scale(.978); transition-duration:var(--d1); transition-timing-function:var(--curva-secca); } /* Il quadratino social e' piccolo: si comprime di meno, o sembra che sparisca. */ .icona.icona:active{ --voluto:1; transform:translateY(-1px) scale(.94) } /* La spunta del consenso, premuta, cede di un pelo. */ .campo-spunta input:active{ transform:scale(.9) } /* Le voci del menu: nessuno sposta un menu, ma la conferma serve lo stesso. */ .menu a:active, .barra a:active{ opacity:.62; transition-duration:var(--d1) } /* ------------------------------------------------------------ E chi il movimento non lo vuole, non lo riceve. Nemmeno qui. ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .occhiello,.st b,.st b.inf,.canale-punto,.avanz-cifra,.sfida,.fascia-eti{ animation:none !important; } .porta, .bottone, .icona, .canale-riga, .stampa, .lettore-avvia, .porta-vai, .canale-vai{ transition:none !important; } .bottone:active, .porta.viva:active, .icona:active, .stampa:active, .lettore-avvia:active, .canale-riga:active, .campo-spunta input:active{ transform:none } /* il contorno da tastiera RESTA: non e' decorazione, e' come si capisce dove si sta. */ }