/* stile-accesso — foglio di stile di RitMo Coach.
Stava dentro coach.html (blocco «accesso-coach-suite»). */
/* ==========================================================================
ACCESSO — un orizzonte con la profondità.
Cinque piani a distanze diverse: cielo, veli, sole, terra, filo.
Il puntatore li sposta di quantità diverse: è la parallasse che dà lo spazio.
Si muovono soltanto transform e opacity. Nessun filter:blur.
========================================================================== */
.login{
position:relative; overflow:hidden; isolation:isolate;
min-height:100dvh; padding:0;
display:grid; grid-template-rows:.92fr auto 1.48fr; justify-items:center;
background:var(--nero-pece);
/* il carattere di sistema: su iPhone e Mac è San Francisco, quello vero di Apple */
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
"Segoe UI", system-ui, sans-serif;
}
.login > *{ position:relative; z-index:2 }
.login .logo{ display:none }
/* ---------- la scena ---------- */
.scena{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
/* ogni piano si sposta di una quantità diversa: più è lontano, meno si muove */
.scena .piano{
position:absolute; inset:0; will-change:transform;
transform:translate3d(calc(var(--px,0px) * var(--k,1)), calc(var(--py,0px) * var(--k,1)), 0);
transition:transform .6s cubic-bezier(.18,.85,.24,1);
}
.scena .p1{ --k:.22 } .scena .p2{ --k:.38 } .scena .p3{ --k:.62 } .scena .p4{ --k:1 }
/* il cielo alto: qualche punto di luce, fermo */
.scena .stelle{
position:absolute; left:0; right:0; top:0; height:58%; opacity:.5;
background-image:
radial-gradient(1.4px 1.4px at 12% 22%, color-mix(in srgb, var(--inchiostro) 55%, transparent), transparent),
radial-gradient(1.2px 1.2px at 78% 12%, color-mix(in srgb, var(--inchiostro) 42%, transparent), transparent),
radial-gradient(1.6px 1.6px at 34% 8%, color-mix(in srgb, var(--inchiostro) 36%, transparent), transparent),
radial-gradient(1.2px 1.2px at 62% 31%, color-mix(in srgb, var(--inchiostro) 30%, transparent), transparent),
radial-gradient(1.1px 1.1px at 88% 38%, color-mix(in srgb, var(--inchiostro) 34%, transparent), transparent),
radial-gradient(1.3px 1.3px at 24% 44%, color-mix(in srgb, var(--inchiostro) 22%, transparent), transparent),
radial-gradient(1.1px 1.1px at 52% 18%, color-mix(in srgb, var(--inchiostro) 26%, transparent), transparent);
}
/* i veli: lastre larghissime che scivolano di traverso */
.scena .velo{
position:absolute; left:50%; top:50%; width:150vmax; height:56vmax; margin:-28vmax 0 0 -75vmax;
border-radius:50%; will-change:transform;
animation:scorri 62s cubic-bezier(.42,0,.58,1) infinite alternate;
}
.scena .v1{ background:radial-gradient(closest-side, color-mix(in srgb, var(--accento) 20%, transparent), transparent 70%);
--x:-16vw; --y:12vh; --dx:20vw; --dy:-8vh }
.scena .v2{ background:radial-gradient(closest-side, color-mix(in srgb, var(--info) 22%, transparent), transparent 70%);
--x:22vw; --y:-18vh; --dx:-24vw; --dy:12vh; animation-duration:82s; animation-delay:-26s }
@keyframes scorri{
from{ transform:translate3d(var(--x,0), var(--y,0), 0) }
to { transform:translate3d(calc(var(--x,0) + var(--dx,0)), calc(var(--y,0) + var(--dy,0)), 0) }
}
/* il sole appena calato */
/* L'ALONE.
Prima al centro c'era un nocciolo quasi bianco che passava al verde in
pochissimo spazio: da lontano sembrava una palla bianca appoggiata sul
fondo. Adesso il bianco è appena un'idea, il verde parte già pieno e si
spegne su otto passaggi invece che su quattro — e l'alone è molto più largo
dello schermo, così non se ne vede mai il bordo. */
.scena .fuoco{
position:absolute; left:-46vw; right:-46vw; bottom:-10vh; height:74vh;
transform-origin:50% 100%; will-change:transform;
background:radial-gradient(72% 108% at 50% 100%,
color-mix(in srgb, var(--accento) 84%, #FFFFFF) 0%,
color-mix(in srgb, var(--accento) 70%, transparent) 11%,
color-mix(in srgb, var(--accento) 52%, transparent) 22%,
color-mix(in srgb, var(--accento) 36%, transparent) 34%,
color-mix(in srgb, var(--accento) 23%, transparent) 47%,
color-mix(in srgb, var(--accento) 13%, transparent) 60%,
color-mix(in srgb, var(--accento) 6%, transparent) 74%,
color-mix(in srgb, var(--accento) 2%, transparent) 88%,
transparent 100%);
animation:respiro 44s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes respiro{
from{ transform:translate3d(0,0,0) scale(1) }
to { transform:translate3d(0,-1.4vh,0) scale(1.1) }
}
/* Quando le mani sono sui campi l'alone si allarga; appena si lascia, torna
piccolo. È l'unica cosa che si muove in quella schermata. */
.login .scena .fuoco{ transition:opacity .8s ease, height .8s cubic-bezier(.2,.8,.3,1); }
.login.compila .scena .fuoco{ height:112vh; opacity:1; }
.login:not(.compila) .scena .fuoco{ height:70vh; opacity:.78; }
/* la terra sotto l'orizzonte: una massa più scura, con la luce che ci si riflette sopra */
.scena .terra{
position:absolute; left:0; right:0; bottom:0; height:17vh;
background:
linear-gradient(180deg, color-mix(in srgb, var(--nero-pece) 60%, transparent) 0%, color-mix(in srgb, var(--nero-pece) 90%, transparent) 55%, var(--nero-pece) 100%);
}
.scena .riflesso{
position:absolute; left:50%; bottom:0; width:70vw; height:17vh; margin-left:-35vw;
background:radial-gradient(46% 100% at 50% 0%, color-mix(in srgb, var(--accento) 52%, transparent), color-mix(in srgb, var(--accento) 16%, transparent) 44%, transparent 74%);
animation:pulsa 18s ease-in-out infinite alternate;
}
/* il filo d'orizzonte */
.scena .filo{
position:absolute; left:50%; bottom:17vh; width:170vw; height:1px; margin-left:-85vw;
background:linear-gradient(90deg, transparent,
color-mix(in srgb, var(--accento) 60%, #FFFFFF) 18%,
color-mix(in srgb, var(--accento) 20%, #FFFFFF) 50%,
color-mix(in srgb, var(--accento) 60%, #FFFFFF) 82%, transparent);
animation:pulsa 18s ease-in-out infinite alternate;
}
@keyframes pulsa{ from{ opacity:.38 } to{ opacity:.9 } }
/* la grana: profondità con un materiale, non con un alone */
.scena::after{
content:""; position:absolute; inset:0; opacity:.055; pointer-events:none; z-index:3;
background-image:url("data:image/svg+xml;utf8,\
");
}
/* il buio in alto tiene il testo leggibile qualunque cosa faccia la luce */
.scena .buio{ position:absolute; inset:0; z-index:2;
background:linear-gradient(180deg, color-mix(in srgb, var(--nero-pece) 92%, transparent) 0%, color-mix(in srgb, var(--nero-pece) 60%, transparent) 24%, color-mix(in srgb, var(--nero-pece) 12%, transparent) 44%, transparent 60%) }
/* ---------- il contenuto ---------- */
/* TUTTO CENTRATO. Jacopo, guardando la pagina online: «login fai tutto
centrato, logo e Gestionale». Il blocco resta della sua misura — i campi
larghi tutta la pagina sarebbero un modulo, non un accesso — ma quello che
ci sta dentro si allinea al centro. Le etichette e i campi restano a
sinistra: un'etichetta centrata sopra un campo largo non si legge, si
cerca. */
.login .blocco{ grid-row:2; width:min(380px,86vw); text-align:center }
.login .occhiello{
font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
color:color-mix(in srgb, var(--inchiostro) 55%, transparent); margin:0 0 16px;
}
/* IL MARCHIO D'ACCESSO, impilato: il segno sopra, il nome sotto.
Non e' piu' un'immagine. Il segno e' il tracciato vettoriale del marchio e
il nome e' testo vero, nello stesso carattere del kit: cosi' resta nitido a
qualunque densita' di schermo (su iPhone la versione a immagine si
sgranava) e i due pezzi partono esattamente dallo stesso punto, che e' la G
di "Gestionale". Il riquadro del segno e' ritagliato sull'inchiostro — il
tracciato originale ha 17.5 di margine dentro il suo quadrato, e senza
ritaglio il marchio sembrerebbe rientrato di qualche pixel. */
/* GLI ANELLI: SONO TUTTI ONDE.
Prima ne avevo messi due sistemi sovrapposti — cinque anelli FERMI piu' tre
onde che uscivano. Jacopo: «e' come se fossero sovrapposti, alcuni rimangono
fermi». Esatto: le onde passavano sopra i fermi e l'occhio non capiva piu'
chi si muoveva. E soprattutto era sbagliata la lettura del riferimento —
li' gli anelli concentrici NON sono fermi: sono onde fotografate in un
istante. Con sei onde sfasate di un sesto di giro, in ogni fotogramma vedi
sei cerchi a raggi diversi (che e' il bersaglio del riferimento) ma stanno
TUTTE uscendo. Un sistema solo, nessuna che sta ferma.
Stesso giro del respiro, 4,6 s: qui dentro tutto batte sullo stesso tempo. */
.login .ml-onde{ position:absolute; left:50%; top:50%; width:0; height:0;
pointer-events:none; z-index:0 }
.login .ml-onde i{ position:absolute; left:50%; top:50%;
width:88px; height:88px; border-radius:50%;
border:1px solid color-mix(in srgb, var(--accento) 46%, transparent);
transform:translate(-50%,-50%) scale(1); opacity:0;
animation:ondaMarchio 6.4s linear infinite }
.login .ml-onde i:nth-child(2){ animation-delay:-1.067s }
.login .ml-onde i:nth-child(3){ animation-delay:-2.133s }
.login .ml-onde i:nth-child(4){ animation-delay:-3.200s }
.login .ml-onde i:nth-child(5){ animation-delay:-4.267s }
.login .ml-onde i:nth-child(6){ animation-delay:-5.333s }
/* nasce alla misura del segno e si spegne piano andando fuori: la piu'
lontana deve essere quasi invisibile, se no diventa una gabbia */
@keyframes ondaMarchio{
0% { transform:translate(-50%,-50%) scale(1); opacity:0 }
8% { opacity:.62 }
55% { opacity:.26 }
100% { transform:translate(-50%,-50%) scale(3.1); opacity:0 } }
@media(max-width:400px){ .login .ml-onde i{ width:80px; height:80px } }
@media (prefers-reduced-motion: reduce){ .login .ml-onde i{ animation:none; opacity:0 } }
/* segno e lettere stanno SOPRA le onde */
.login .ml-segno{ position:relative; z-index:1 }
.login .ms-bollo em{ position:relative; z-index:1; font-style:normal }
.login .marchio-login{ display:block; margin:0 0 26px; }
/* il segno e' un blocco di 60px: centrarlo vuol dire margini automatici */
.login .marchio-login .ml-alone,
.login .marchio-login .ml-segno{ margin-left:auto; margin-right:auto; }
.login .marchio-suo{ justify-content:center; }
.login .marchio-login[hidden]{ display:none; }
.login .ml-segno{ display:block; width:60px; height:60px; color:var(--accento);
position:relative; z-index:1 }
.login .ml-nome{ display:block; margin-top:12px; line-height:1; white-space:nowrap;
font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:26px;
letter-spacing:-.033em; color:#FFFFFF; }
.login .ml-nome b{ font-weight:700; color:var(--accento); }
/* IL NOME DEL MARCHIO, COLORATO COME IL LOGO.
Rit bianco · Mo verde · Coach bianco. Prima era «RitMo» bianco e «Coach»
verde: la spezzatura veniva dal marchio di prima, dove il verde stava sulla
seconda parola. Col nome nuovo il verde sta in mezzo, sul «Mo».
(Il nome vecchio non si scrive nemmeno nei commenti: il controllo
sull'integrità cerca quella stringa, e ha ragione a fermarsi.) */
.ph .mt-nome i, #brandNome i{ font-style:normal; color:var(--accento); }
.login .ml-nome b{ font-weight:inherit; color:var(--accento); }
@media(max-width:400px){
.login .ml-segno{ width:56px; height:56px; }
.login .ml-nome{ font-size:24px; }
}
/* QUANDO IL MARCHIO E' DEL TRAINER.
Prima: bollo e nome affiancati, e il bollo compariva SOLO se aveva caricato
un logo. Chi aveva messo solo il nome — cioe' quasi tutti all'inizio —
vedeva una schermata senza nessun segno: due righe di testo sospese. E'
il difetto che Jacopo ha visto online il 26 agosto («non vedo il logo»).
Adesso il bollo c'e' SEMPRE: il logo se ce l'ha, le sue iniziali se no. E
sta impilato e centrato come quello di RitMo Coach — le due versioni della
schermata devono sembrare lo stesso disegno, non due disegni diversi. */
.login .marchio-suo{ display:block; margin:0 0 26px; }
.login .marchio-suo[hidden]{ display:none; }
.login .marchio-suo .ms-bollo{
position:relative; display:grid; place-items:center; margin:0 auto;
width:60px; height:60px; border-radius:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-color:var(--accento); color:var(--su-accento);
font-size:21px; font-weight:800; letter-spacing:-.02em;
/* lo stesso respiro del marchio nostro: e' la stessa schermata */
animation:respiroMarchio 6.4s linear infinite;
transform-origin:50% 50%; }
/* col logo caricato — o con la spirale nostra — il tondo verde sparisce:
sotto c'e' gia' un disegno, e il pieno lo soffocherebbe */
.login .marchio-suo.col-logo .ms-bollo,
.login .marchio-suo.col-segno .ms-bollo{ background-color:transparent; color:transparent; }
.login .ms-spira{ display:block; width:60px; height:60px; color:var(--accento) }
@media(max-width:400px){ .login .ms-spira{ width:56px; height:56px } }
/* e il suo alone, gemello di quello di RitMo Coach */
.login .marchio-suo .ms-bollo::before{
content:""; position:absolute; left:50%; top:50%; margin:-66px 0 0 -66px;
width:132px; height:132px; border-radius:50%; pointer-events:none; z-index:-1;
background:radial-gradient(circle,
color-mix(in srgb, var(--accento) 40%, transparent) 0%,
color-mix(in srgb, var(--accento) 20%, transparent) 18%,
color-mix(in srgb, var(--accento) 8%, transparent) 34%,
color-mix(in srgb, var(--accento) 2%, transparent) 48%,
transparent 62%);
animation:luceMarchio 6.4s linear infinite; transform-origin:50% 50%; }
/* L'ALONE PARTE DAL CENTRO, E STA DIETRO.
Avevo fatto una ciambella — verde solo fuori dal bollo — per paura che il
bagliore tingesse il logo del trainer. Sbagliato, e si vede solo con un
logo vero in mano: fra il disegno e il verde restava un ANELLO NERO largo
quanto mezzo logo, e il marchio sembrava incollato su una toppa scura.
Jacopo: «l'alone verde deve partire dal centro dietro al logo».
La paura non serviva piu': da quando il logo ha sempre un fondo pieno (il
suo, o quello che gli viene assegnato guardando quanto e' chiaro), il
bagliore non puo' passarci attraverso. Sta dietro — punto — e riparte dal
centro come quello del marchio di casa. */
/* IL BAGLIORE DIETRO IL LOGO. Due tentativi sbagliati prima di capirla.
Il fatto: l'alone e' un ::before del bollo con z-index:-1, e il logo del
trainer era lo SFONDO del bollo. Dentro un piano di disegno l'ordine e'
prima lo sfondo dell'elemento, POI i figli con z-index negativo — quindi
l'alone finiva sopra il logo. Misurato coi pixel su un logo bianco: 39
punti di verde in piu'. Jacopo l'aveva visto a occhio.
Togliere «isolation» non basta: il bollo RESPIRA, e un'animazione di
trasformazione crea un piano a se' comunque, sempre.
La strada giusta e' un'altra: il logo smette di essere uno sfondo e
diventa un'IMMAGINE vera dentro al bollo. Il contenuto si disegna sempre
dopo i figli con z-index negativo — quindi il logo sta sopra l'alone per
costruzione, senza dipendere da nessun trucco di impilamento. */
.login .ms-bollo .ms-logo{ position:relative; z-index:1; display:block;
width:66%; height:66%; object-fit:contain }
/* IL FONDO DEL LOGO, DECISO DA SOLO.
Regola di Jacopo, ed e' quella giusta: «il logo sicuramente avra' un fondo;
se non ha un fondo automaticamente gli viene assegnato — se e' un PNG
bianco viene assegnato fondo scuro e viceversa».
Quindi: se il file ha gia' il suo fondo (nessuna trasparenza) non si tocca.
Se e' ritagliato, si guarda quanto e' chiaro il disegno e gli si mette
sotto il contrario. Nessuna domanda al trainer, nessuna scelta da fare. */
/* la specificita' va tenuta ALTA: qui sopra c'e' gia' una regola
«.login .marchio-suo.col-logo .ms-bollo{ background-color:transparent }»
con lo stesso peso, e vinceva lei perche' scritta dopo. Un colore che non
si vede non e' un colore sbagliato: e' una regola che ha perso. */
.login .marchio-suo.col-logo .ms-bollo.fondo-chiaro{
background-color:#F2F6F3 }
.login .marchio-suo.col-logo .ms-bollo.fondo-scuro{
background-color:#0B120D;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }
.login .marchio-suo b{ display:block; margin-top:12px; line-height:1;
font-size:22px; font-weight:700; letter-spacing:-.025em; color:var(--inchiostro); }
@media(max-width:400px){
.login .marchio-suo .ms-bollo{ width:56px; height:56px; font-size:20px }
.login .marchio-suo .ms-bollo::before{ width:120px; height:120px; margin:-60px 0 0 -60px }
.login .marchio-suo b{ font-size:20px }
}
.login h1{
font-family:var(--f-display); font-variation-settings:"wdth" 112;
font-size:clamp(40px, 6.8vw, 62px); line-height:1; letter-spacing:-.025em; font-weight:600;
color:var(--inchiostro); margin:0 0 48px;
}
.login h1 span{ color:inherit; font-weight:600 }
.login label{ font-family:var(--f-mono); }
.login form{ display:block; width:100%; margin:0; text-align:left }
.login .campo{ position:relative; margin-bottom:26px }
.login label{
display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--grigio); margin-bottom:6px;
}
.login input{
width:100%; padding:8px 0 12px; font-size:17px; color:var(--inchiostro); text-align:left; font-family:inherit;
background:transparent; border:0; border-bottom:1px solid var(--filo-forte);
border-radius:0; outline:none; margin:0;
}
.login input::placeholder{ color:var(--grigio-tenue) }
.login .campo::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accento);
opacity:0; transform:scaleX(.2); transform-origin:left center;
transition:opacity .2s ease, transform .3s cubic-bezier(.2,.9,.3,1);
}
.login .campo:focus-within::after{ opacity:1; transform:scaleX(1) }
/* --- il tasto: un oggetto fisico, non un rettangolo colorato ---
L'ombra sta sul guscio e non si muove mai: è il tasto che si solleva sopra,
e questo basta a farla sembrare più profonda senza animare nessuna ombra. */
.login .guscio-tasto{
position:relative; margin-top:18px; border-radius:999px;
box-shadow:0 16px 38px color-mix(in srgb, var(--nero-pece) 70%, transparent), 0 3px 10px color-mix(in srgb, var(--nero-pece) 55%, transparent); /* tinta del fondo, non un alone */
}
.login button[type=submit]{
position:relative; overflow:hidden; isolation:isolate;
display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; padding:18px 24px; border:0; border-radius:999px;
font-size:15px; font-weight:700; font-family:inherit;
text-transform:uppercase; letter-spacing:.14em; /* il maiuscolo ha bisogno di respiro */
background:var(--inchiostro); color:var(--nero-pece); /* bianco caldo, non piatto */
box-shadow:inset 0 1px 0 color-mix(in srgb, #FFFFFF 60%, var(--inchiostro)),
inset 0 -1.5px 0 color-mix(in srgb, var(--nero-pece) 12%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--nero-pece) 8%, transparent); /* bordi interni sottili */
transform:translate3d(0,0,0);
transition:transform .22s cubic-bezier(.2,.9,.3,1);
-webkit-tap-highlight-color:transparent;
}
@media(hover:hover){
.login button[type=submit]:hover{ transform:translate3d(0,-3px,0) }
}
.login button[type=submit]:active{ transform:translate3d(0,1px,0) scale(.985); transition-duration:.09s }
.login button[type=submit]:focus-visible{ outline:2px solid var(--orange); outline-offset:4px }
/* il riflesso che attraversa il tasto: parte solo al passaggio, e una volta sola */
.login button[type=submit] .lucido{
position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
background:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accento) 26%, transparent) 46%,
color-mix(in srgb, var(--accento) 45%, transparent) 52%, transparent 70%);
transform:translate3d(-130%,0,0);
}
@media(hover:hover){
.login button[type=submit]:hover .lucido{ animation:passaLuce .95s cubic-bezier(.3,.7,.3,1) }
}
@keyframes passaLuce{
from{ transform:translate3d(-130%,0,0) }
to { transform:translate3d(130%,0,0) }
}
.login button[type=submit] .testo{ position:relative; z-index:1 }
/* l'onda che parte dal punto premuto */
.login button[type=submit] .onda{
position:absolute; z-index:0; width:22px; height:22px; margin:-11px 0 0 -11px;
border-radius:50%; background:color-mix(in srgb, var(--accento) 45%, transparent); pointer-events:none;
transform:scale(0); opacity:.9; animation:ondaVia .62s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes ondaVia{
from{ transform:scale(0); opacity:.85 }
to { transform:scale(26); opacity:0 }
}
.login .err{ color:var(--ritardo); font-size:14px; min-height:20px; margin:14px 0 0; text-align:left }
.login .hint{ font-size:12px; color:var(--grigio); margin:20px 0 0; text-align:center; line-height:1.5 }
/* entrata: una volta sola, opacity + transform */
.login .occhiello, .login .marchio-login, .login .marchio-suo, .login h1, .login form, .login .hint{
opacity:0; animation:sali .95s cubic-bezier(.2,.9,.25,1) forwards;
}
.login .occhiello, .login .marchio-login, .login .marchio-suo{ animation-delay:.12s }
.login h1{ animation-delay:.20s }
.login form{ animation-delay:.34s }
.login .hint{ animation-delay:.52s }
@keyframes sali{ from{ opacity:0; transform:translate3d(0,20px,0) } to{ opacity:1; transform:none } }
@media(min-width:900px){
.login .blocco{ width:420px }
}
/* chi ha chiesto meno movimento vede la stessa scena, ferma */
@media (prefers-reduced-motion: reduce){
.scena .fuoco, .scena .velo, .scena .filo, .scena .riflesso{ animation:none }
.login button[type=submit],
.login button[type=submit]:hover,
.login button[type=submit]:active{ transform:none }
.login button[type=submit] .lucido{ animation:none; opacity:0 }
.login button[type=submit] .onda{ display:none }
.scena .piano{ transition:none; transform:none }
.login .occhiello, .login .marchio-login, .login .marchio-suo, .login h1, .login form, .login .hint{ opacity:1; animation:none }
}
/* ==========================================================================
25 AGOSTO, SERA — L'ACCESSO: IL SEGNO VIVO, IL GIALLO VIA, L'INGRESSO
==========================================================================
Tre cose chieste da Jacopo, tutte sulla stessa schermata.
1. Il segno respira col bagliore sotto, come l'assistente dentro l'app:
è lo stesso oggetto, non ha senso che si comporti in due modi.
2. Quando il browser riempie email e password da solo, Chrome dipinge i
campi di giallo. Su un fondo nero è uno schiaffo. Non si può togliere
con «background»: il giallo lo mette il browser sopra. Si toglie
rimandando la transizione del colore a fra dieci giorni — è un trucco
vecchio, ma è l'unico che funziona su un campo trasparente.
3. Entrare non è «la schermata sparisce»: la luce verde sale a prendersi
tutto, il segno gira come quando l'assistente lavora, e il gestionale
si apre allargandosi.
========================================================================== */
/* ---- 1. il segno vivo ---- */
/* «block», non «grid»: il segno deve partire esattamente dalla G di
«Gestionale», e una griglia centrata lo spostava di tre pixel e mezzo. */
.login .ml-alone{ position:relative; display:block; width:60px; height:60px;
/* IL RESPIRO STA QUI, SUL CONTENITORE, e non piu' su segno e alone
separatamente. Prima erano due animazioni gemelle ma indipendenti, con
ampiezze diverse (.87 il segno, .94 l'alone) e l'opacita' dell'alone che
saliva proprio mentre il segno rientrava: due cose che respiravano vicine,
non una cosa sola — ed e' esattamente quello che si vedeva.
Adesso la SCALA e' una: il contenitore la porta, e segno e alone dentro
la subiscono insieme, rigidamente. Non possono piu' sfasarsi, nemmeno di
un fotogramma, perche' e' letteralmente lo stesso movimento.
All'alone resta la sola opacita', al segno il solo bagliore: due velature
sopra un movimento unico. */
animation:respiroMarchio 6.4s linear infinite;
transform-origin:50% 50%; }
.login .ml-alone::before{ left:50%; top:50%; margin:-66px 0 0 -66px }
.login .ml-alone::before{
content:""; position:absolute; width:132px; height:132px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(circle,
color-mix(in srgb, var(--accento) 40%, transparent) 0%,
color-mix(in srgb, var(--accento) 20%, transparent) 18%,
color-mix(in srgb, var(--accento) 8%, transparent) 34%,
color-mix(in srgb, var(--accento) 2%, transparent) 48%,
transparent 62%);
animation:luceMarchio 6.4s linear infinite;
}
.login .ml-segno{ position:relative; z-index:1;
animation:bagliorMarchio 6.4s linear infinite; }
/* IL MOVIMENTO. Due correzioni, in ordine.
1. Jacopo: «arriva a meta' del rimpicciolimento, si blocca e poi si
rimpicciolisce». Trappola del CSS che non si vede leggendo il codice:
la curva di velocita' si applica FRA UN FOTOGRAMMA E L'ALTRO, non su
tutto il giro. Con «ease-in-out» e i fotogrammi a 0-42-74-100 il
movimento rallentava fino a FERMARSI a ogni tappa e ripartiva: tre stop
dentro un respiro. Non era un respiro, era una pompa.
2. Poi mi ha mandato il riferimento (la console IAcopo): li' il respiro non
e' disegnato a fotogrammi, e' CALCOLATO — un seno puro, 4,6 secondi,
quattro e mezzo per cento. Niente rientro, niente slancio oltre misura:
solo un'onda che non si ferma mai. E' la stessa formula che gira gia'
dentro il nucleo dell'assistente, quindi le due cose adesso respirano
identiche perche' respirano la STESSA COSA.
Qui il seno e' campionato in quaranta fotogrammi con velocita' LINEARE fra
l'uno e l'altro: fra due campioni passano 2,5 centesimi di giro, l'occhio
non li distingue, e non c'e' un solo istante di fermo — nemmeno alla
chiusura, perche' un seno e' periodico per costruzione. */
@keyframes respiroMarchio{
0%{ transform:scale(1.0000) }
2.5%{ transform:scale(1.0141) }
5%{ transform:scale(1.0278) }
7.5%{ transform:scale(1.0409) }
10%{ transform:scale(1.0529) }
12.5%{ transform:scale(1.0636) }
15%{ transform:scale(1.0728) }
17.5%{ transform:scale(1.0802) }
20%{ transform:scale(1.0856) }
22.5%{ transform:scale(1.0889) }
25%{ transform:scale(1.0900) }
27.5%{ transform:scale(1.0889) }
30%{ transform:scale(1.0856) }
32.5%{ transform:scale(1.0802) }
35%{ transform:scale(1.0728) }
37.5%{ transform:scale(1.0636) }
40%{ transform:scale(1.0529) }
42.5%{ transform:scale(1.0409) }
45%{ transform:scale(1.0278) }
47.5%{ transform:scale(1.0141) }
50%{ transform:scale(1.0000) }
52.5%{ transform:scale(0.9859) }
55%{ transform:scale(0.9722) }
57.5%{ transform:scale(0.9591) }
60%{ transform:scale(0.9471) }
62.5%{ transform:scale(0.9364) }
65%{ transform:scale(0.9272) }
67.5%{ transform:scale(0.9198) }
70%{ transform:scale(0.9144) }
72.5%{ transform:scale(0.9111) }
75%{ transform:scale(0.9100) }
77.5%{ transform:scale(0.9111) }
80%{ transform:scale(0.9144) }
82.5%{ transform:scale(0.9198) }
85%{ transform:scale(0.9272) }
87.5%{ transform:scale(0.9364) }
90%{ transform:scale(0.9471) }
92.5%{ transform:scale(0.9591) }
95%{ transform:scale(0.9722) }
97.5%{ transform:scale(0.9859) }
100%{ transform:scale(1.0000) } }
@keyframes luceMarchio{
0%{ opacity:0.650; transform:scale(1.0000) }
2.5%{ opacity:0.705; transform:scale(1.0250) }
5%{ opacity:0.758; transform:scale(1.0494) }
7.5%{ opacity:0.809; transform:scale(1.0726) }
10%{ opacity:0.856; transform:scale(1.0940) }
12.5%{ opacity:0.897; transform:scale(1.1131) }
15%{ opacity:0.933; transform:scale(1.1294) }
17.5%{ opacity:0.962; transform:scale(1.1426) }
20%{ opacity:0.983; transform:scale(1.1522) }
22.5%{ opacity:0.996; transform:scale(1.1580) }
25%{ opacity:1.000; transform:scale(1.1600) }
27.5%{ opacity:0.996; transform:scale(1.1580) }
30%{ opacity:0.983; transform:scale(1.1522) }
32.5%{ opacity:0.962; transform:scale(1.1426) }
35%{ opacity:0.933; transform:scale(1.1294) }
37.5%{ opacity:0.897; transform:scale(1.1131) }
40%{ opacity:0.856; transform:scale(1.0940) }
42.5%{ opacity:0.809; transform:scale(1.0726) }
45%{ opacity:0.758; transform:scale(1.0494) }
47.5%{ opacity:0.705; transform:scale(1.0250) }
50%{ opacity:0.650; transform:scale(1.0000) }
52.5%{ opacity:0.595; transform:scale(0.9750) }
55%{ opacity:0.542; transform:scale(0.9506) }
57.5%{ opacity:0.491; transform:scale(0.9274) }
60%{ opacity:0.444; transform:scale(0.9060) }
62.5%{ opacity:0.403; transform:scale(0.8869) }
65%{ opacity:0.367; transform:scale(0.8706) }
67.5%{ opacity:0.338; transform:scale(0.8574) }
70%{ opacity:0.317; transform:scale(0.8478) }
72.5%{ opacity:0.304; transform:scale(0.8420) }
75%{ opacity:0.300; transform:scale(0.8400) }
77.5%{ opacity:0.304; transform:scale(0.8420) }
80%{ opacity:0.317; transform:scale(0.8478) }
82.5%{ opacity:0.338; transform:scale(0.8574) }
85%{ opacity:0.367; transform:scale(0.8706) }
87.5%{ opacity:0.403; transform:scale(0.8869) }
90%{ opacity:0.444; transform:scale(0.9060) }
92.5%{ opacity:0.491; transform:scale(0.9274) }
95%{ opacity:0.542; transform:scale(0.9506) }
97.5%{ opacity:0.595; transform:scale(0.9750) }
100%{ opacity:0.650; transform:scale(1.0000) } }
/* il bagliore del segno segue lo stesso seno: piu' e' aperto, piu' brucia */
@keyframes bagliorMarchio{
0% { filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accento) 28%, transparent)) }
25% { filter:drop-shadow(0 0 26px color-mix(in srgb, var(--accento) 62%, transparent)) }
50% { filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accento) 28%, transparent)) }
75% { filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accento) 14%, transparent)) }
100% { filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accento) 28%, transparent)) }
}
@media(max-width:400px){ .login .ml-alone{ width:56px; height:56px }
.login .ml-alone::before{ width:120px; height:120px } }
/* ---- 2. via il giallo del riempimento automatico ----
Il campo qui e' TRASPARENTE sopra una sfumatura: non si puo' coprire il
riempimento di Chrome con un rettangolo pieno, si vedrebbe la toppa. Il
modo che funziona e' ritagliare quel fondo sul testo — cosi' resta dipinto
solo dentro le lettere, che poi vengono ricolorate.
Il difetto visto online il 26 agosto (campo lavanda e testo illeggibile)
era che di !important ce l'aveva solo il colore del testo: lo stile di
sistema di Chrome vinceva sul ritaglio, quindi il fondo restava pieno.
Adesso ce l'hanno tutte le righe che servono. */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus,
.login input:-webkit-autofill:active,
.login input:autofill{
-webkit-text-fill-color:var(--inchiostro) !important;
caret-color:var(--inchiostro) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
background-color:transparent !important;
background-image:none !important;
box-shadow:none !important;
transition:background-color 600000s 0s, color 600000s 0s;
}
/* ---- 3. l'ingresso ---- */
.login .verde{
position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
background:radial-gradient(120% 100% at 50% 100%,
color-mix(in srgb, var(--accento) 92%, #FFFFFF) 0%,
var(--accento) 26%,
color-mix(in srgb, var(--accento) 72%, transparent) 52%,
color-mix(in srgb, var(--accento) 30%, transparent) 76%,
transparent 100%);
transform:translate3d(0,26vh,0) scale(.9);
}
/* La luce verde che saliva a prendersi lo schermo NON si usa più.
Jacopo: «lo sfondo dopo il login non cambia». Aveva ragione: quella luce
raccontava un cambio di stanza, e invece si resta nella stessa — è il segno
che si muove, non il mondo intorno. L'elemento resta perché ci si appoggiano
il tema e la riduzione del movimento; semplicemente non si anima più. */
/* il testo si toglie di mezzo, il segno resta e passa davanti alla luce */
.login.entra .occhiello,
.login.entra h1,
.login.entra form,
.login.entra .err,
.login.entra .hint,
.login.entra .marchio-suo{
animation:none; opacity:1;
transition:opacity .34s ease, transform .34s ease;
opacity:0; transform:translate3d(0,-14px,0);
}
/* Il nome esce con tutto il resto. Il SEGNO no: quello parte. */
.login.entra .marchio-login .ml-nome{
animation:none; opacity:0; transform:translate3d(0,-14px,0);
transition:opacity .26s ease, transform .26s ease;
}
/* il segno che sta sopra «RitMo Coach» sparisce nell'istante esatto in cui
quello che vola prende il suo posto: senza transizione, o si vedono in due */
.login.entra .marchio-login .ml-alone{ opacity:0; transition:none; }
/* ---- IL SEGNO CHE VOLA ----
Un elemento solo che fa tre cose in fila: parte da dove sta il logo sopra
«RitMo Coach», arriva al centro ingrandendosi, e da lì si allarga fino a
uscire dallo schermo mentre svanisce.
Al momento del rito viene spostato dentro e messo fisso: se restasse
dentro la schermata d'accesso morirebbe con lei, e invece deve continuare a
crescere SOPRA il gestionale che si sta aprendo. È quello che fa sembrare
una cosa sola due cose che succedono in due strati diversi.
Le misure (--dx --dy --s0 --sfin) le calcola il JavaScript leggendo dove sta
davvero il logo e quanto è grande lo schermo: scritte a mano sarebbero giuste
su un telefono e sbagliate su tutti gli altri. */
.segno-ingresso{
position:absolute; left:50%; top:50%; z-index:6; width:150px; height:150px;
margin:-75px 0 0 -75px; display:grid; place-items:center;
opacity:0; pointer-events:none; color:var(--accento);
--dx:0px; --dy:0px; --s0:.3; --scopre:7; --sfin:12;
/* SOLO LA SPIRALE, senza i due anelli. Jacopo, guardando il volo: «possiamo
usare solo la spirale doppia senza i due cerchi?». Ha ragione — ingranditi
dodici volte i due anelli diventano due muri che attraversano lo schermo e
coprono proprio il disegno che deve restare. La spirale da sola si apre.
Non c'è un secondo simbolo: gli anelli del prendono il colore da
--anelli, e qui dentro quel colore è «niente». Il marchio in tutto il
resto del gestionale non cambia di una virgola. */
--anelli:transparent;
}
.segno-ingresso.vola{ position:fixed; z-index:9999; animation:segnoVola .92s both }
.segno-ingresso.vola svg{ animation:giraSegno 1.15s linear infinite }
.segno-ingresso svg{ width:100%; height:100%; display:block; }
/* NIENTE alone qui dentro. Un drop-shadow è una sfocatura, e una sfocatura su
un elemento che cresce di dodici volte la deve ricalcolare a ogni fotogramma:
è esattamente il motivo per cui l'animazione «scattava» ed è la regola che
ci siamo già dati. Il verde su fondo scuro brilla da solo. */
/* il giro sta sul disegno, il viaggio sul guscio: due elementi, nessun
litigio fra i transform. È lo stesso errore già pagato con i cerchi
dell'assistente, dove uno scale buttava via il translate che li centrava. */
@keyframes segnoVola{
/* il viaggio: curva che parte decisa e si posa. La prima che avevo messo
(.2,.8,.25,1) arrivava al centro in 170 ms su 400: non era un movimento,
era uno scatto — misurato, non a occhio. */
0% { opacity:1; transform:translate3d(var(--dx),var(--dy),0) scale(var(--s0));
animation-timing-function:cubic-bezier(.42,.02,.22,1) }
/* arrivato al centro, grande il doppio e mezzo: qui si legge ancora che è
la spirale, ed è il fotogramma che vale */
42% { opacity:1; transform:translate3d(0,0,0) scale(2.4);
animation-timing-function:cubic-bezier(.5,0,.85,.35) }
/* --scopre è la misura a cui esce da tutti e quattro gli angoli: qui la
pagina è presa davvero, e SI VEDE, perché è ancora piena. Sbagliare
questo passaggio vuol dire farla svanire prima di aver fatto il suo
mestiere — che è quello che succedeva col primo taraggio. */
78% { opacity:1; transform:translate3d(0,0,0) scale(var(--scopre));
animation-timing-function:linear }
100% { opacity:0; transform:translate3d(0,0,0) scale(var(--sfin)) }
}
/* e il gestionale non compare: si apre, mentre la spirale sopra si allarga */
.app.apre{ animation:apriGestionale .62s cubic-bezier(.2,.8,.25,1) both }
@keyframes apriGestionale{
from{ opacity:0; transform:scale(.97) }
to { opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
.login .ml-alone::before, .login .ml-segno,
.segno-ingresso.vola, .segno-ingresso.vola svg{ animation:none }
.login .ml-alone::before{ opacity:.55 }
.login.entra .marchio-login .ml-nome{ transition:none }
.segno-ingresso.vola{ opacity:0 }
.app.apre{ animation:none }
}