/** * I ritocchi del sito: si carica per ULTIMO, e corregge quello che viene prima. * * ═══ SI CHIAMAVA `intro/st26.css`, E MENTIVA ════════════════════════════════ * Era nato per la sola presentazione, coi pezzi che in st26 stavano scritti * dentro la pagina. Poi ci sono finite le regole dell'ingresso, quelle * dell'intestazione, quelle delle maschere — e lo caricano tutte e tre le * cornici. Un file che si chiama come una pagina sola, e serve a tutte, e' un * file che nessuno cerca dove sta. * * ═══ PERCHE' NON DENTRO LE PAGINE ═══════════════════════════════════════════ * La regola dice `style-src 'self'`: un foglio scritto in mezzo all'HTML il * browser lo BUTTA VIA. Non si allenta la regola, si sposta il pezzo. */ /* ── da testa.php ────────────────────────────────── */ .menu-schermo{grid-column:1/-1;display:flex;gap:.4rem;margin:.3rem 0}.menu-schermo .ms-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.6rem .2rem;background:#fff;border:2px solid transparent;border-radius:12px;color:#1e272e;text-decoration:none;font-size:.68rem;font-weight:700;text-align:center}.menu-schermo .ms-btn i{font-size:.95rem}.menu-schermo .ms-btn.on{border-color:var(--tema-theme,#1e6fd9)} /* ── da entra.php ────────────────────────────────── */ /* Il bottone non cambia di una virgola: misura, colore e forma restano quelli di prima, perché è lo stesso gesto. Cambia solo dove sta. */ /* UNA MISURA SOLA PER TUTTI E DUE. L'altezza del campo e il diametro del tondo non sono due numeri che si somigliano: sono lo STESSO numero. Scritto una volta qui, non può più capitare che uno cambi e l'altro no — che è esattamente come si disallineano le cose. */ /* Sta su :root e non piu' su .fm-staccato perche' adesso questo numero non e' piu' solo del modulo: lo usano anche i tre tondi social, che stanno FUORI dal form e da li' non erediterebbero niente. Scritto una volta, resta un numero solo. */ :root{ --fm-h:48px; } .fm-staccato .fm-riga{ display:flex; align-items:center; gap:8px; } /* ALLINEATI, cioè della stessa altezza. La pillola era alta 44 + due volte il suo bordo interno, perché doveva contenere il bottone: senza più il bottone dentro, quel margine non serve, e teneva il campo più alto del tondo di una decina di pixel. Il bottone resta 44 — era la tua richiesta — quindi è la pillola che scende a 44. */ .fm-staccato .pillola-sola{ flex:1 1 auto; min-width:0; height:var(--fm-h); margin:0; padding:0 1.1rem; gap:0; } /* Il campo riempie tutta l'altezza, così il testo resta in mezzo. */ .fm-staccato .pillola-sola input{ height:100%; } /* La riga si prende il margine che prima aveva la pillola: quello serviva a staccarla da quello che c'è sopra, e va tenuto. */ .fm-staccato .fm-riga{ margin:1.2rem auto 0; max-width:420px; } /* Il tondo era figlio della pillola e prendeva da lì tutta la sua forma. Fuori non eredita più niente, quindi le stesse identiche misure si riscrivono qui — copiate da .pillola button, non reinventate: 44 pixel, tondo, lo stesso oro. */ /* La stessa ricetta la usa il tondo delle maschere, quello che vede chi e' gia' entrato: e' lo stesso gesto — il passo dopo — e due tondi diversi per la stessa cosa si leggono come due cose diverse. Scritta qui una volta: se cambia, cambiano tutti e due. */ .fm-staccato #btnGo, .pallino-vai{ flex:none; width:var(--fm-h); height:var(--fm-h); border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; font-size:1.05rem; color:var(--night); background:linear-gradient(135deg,var(--gold) 0%,var(--amber) 60%,var(--coral) 100%); /* STESSA OMBRA DELLA PILLOLA, copiata da .pillola in land.css e non rifatta a occhio: due ombre diverse su due pezzi appaiati si leggono come due piani diversi, e il bottone sembra staccato dal campo invece che accanto. Quella di prima era un alone arancione: bella da sola, ma diceva «io sono un'altra cosa». */ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 32px -18px rgba(0,12,28,.8); transition:transform .12s, box-shadow .2s; } .fm-staccato #btnGo:hover, .pallino-vai:hover{ transform:scale(1.06); } .fm-staccato #btnGo:active, .pallino-vai:active{ transform:scale(.96); } .fm-staccato #btnGo:disabled{ opacity:.65; cursor:default; transform:none; } /* Il tondo di chi e' dentro sta sotto la scritta, in mezzo, e non ha un campo accanto: quindi il margine se lo prende lui. */ .pallino-vai{ display:grid; margin:1.2rem auto 0; text-decoration:none; } /* ═══ IL TONDO DELLA MUSICA TORNA ════════════════════════════════════════════ In `nostre.css` grecale lo spegneva con `display:none !important`, e il motivo era scritto: «via il tondo che galleggia — è l'unica cosa che galleggia sulla landing». Decisione ribaltata: lo si rivuole. Ma NON si tocca `nostre.css`, che è copiato: si scavalca da qui, che è il nostro foglio e si carica per ultimo. Così il giorno che si riprende quel file da grecale non si perde niente, e chi legge trova tutte e due le decisioni, con le loro date. Nota da quel commento, e vale ancora: togliere il bottone spegneva anche la musica — `music.js` aspetta un tocco che senza bottone non arriva mai. Rimettendolo torna possibile anche il suono. L'orario resta quello di grecale: il tondo si mostra da solo dalle 6 alle 12 e da mezz'ora prima del tramonto alle 2. Nel mezzo si nasconde, e non e' un guasto — e' che non c'e' musica in programma. E si riaccende con `grid`, non con `flex`: in `land.css` il tondo centra l'icona con `place-items:center`, che su una griglia centra nei due sensi e su un flex ne centra uno solo — l'icona finiva a sinistra invece che in mezzo. Il modo di riaccenderlo deve essere lo stesso di prima. */ .music-btn { display: grid !important; } .music-btn.hidden { display: none !important; } /* ═══ I TRE TONDI SOCIAL, DELLA MISURA DEL TONDO DEL MODULO ══════════════════ Erano 54, il tondo con la freccia 48. Sei pixel di differenza fra due cerchi che stanno uno sotto l'altro non si leggono come una scelta: si leggono come una svista. Adesso e' lo stesso `--fm-h`, quindi non possono piu' scostarsi. Lo SPAZIO FRA LORO non si tocca: e' rimasto lo `.9rem` di `land.css`. Rimpicciolendo i tondi la distanza sembra cresciuta, ed e' giusto cosi' — stringerla per compensare li avrebbe fatti diventare un blocco unico. Serve la classe `.entra` davanti: in `land.css` e `nostre.css` il colore e' scritto con la scorciatoia `background:`, che azzera anche l'immagine di sfondo. Con la sola classe del tondo il gradiente perderebbe il confronto. E la classe e' quella del COMPONENTE, non della pagina: il blocco si vede uguale ovunque lo si chiami, senza opzioni. */ .entra .oa-t{ width:var(--fm-h); height:var(--fm-h); /* L'icona scende in proporzione al tondo (1.35 stava a 54 come 1.2 sta a 48): tenendola ferma sarebbe cresciuta dentro un cerchio piu' piccolo. */ font-size:1.2rem; /* IL GRADIENTE: chiaro appena sopra, scuro appena sotto — la luce viene dall'alto, come sul tondo del modulo. Non cambia il colore, ci passa sopra: percio' e' scritto come `background-image`, e il colore di ognuno resta quello suo. */ background-image:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.17) 100%); } /* ═══ APPLE: GRIGIO CHIARO, MELA NERA ═══════════════════════════════════════ Era nero pieno con la mela bianca. Su un fondo blu scuro un tondo nero e' un buco, e la mela ci si perdeva dentro. Girato: il grigio la tiene su. Ed e' il verso giusto anche per Apple, che la mela nera su chiaro la usa dappertutto. */ .entra .oa-t.oa-apple{ background-color:#e9e9ee; color:#000; } /* ═══ SOLO IL FARO PASSA A SINISTRA ═════════════════════════════════════════ Le luci di citta' restano ESATTAMENTE come le fa `land.css`: puntini piccoli sparsi su tutta la larghezza, appoggiati al pelo dell'acqua — che si alza e si abbassa con la marea, perche' la loro altezza e' ancorata a `--riva`. Qui non si tocca niente di tutto questo. Cambia una cosa sola: dove sta il faro. Era al 78%, adesso a sinistra. E il numero e' scritto una volta: lo legge il CSS per il puntino e `sky.js` per la colonna di riflessi sull'acqua, sennò la luce starebbe di qua e il suo riflesso di là. */ :root{ --faro-x:8%; } .faro{ left:var(--faro-x); } /* ═══ IL FARO LAMPEGGIA, NON RESPIRA ═════════════════════════════════════════ Il giro di `land.css` era un gonfiarsi: quattro secondi per arrivare e quattro per andarsene. Ma un faro vero non fa così — per quasi tutto il giro e' una luce che si vede appena, poi il fascio ti passa davanti e per un istante ACCECA, e sparisce subito. Percio': sette secondi buoni sul niente, un decimo per accecare, un terzo per sparire. L'alone c'e' solo nell'istante del lampo — fuori di li' e' un punto, che e' quello che si vede da riva. Bianca, non calda: quella e' la luce di un faro. */ .faro{ background:#fff; animation:faroLampo 8s linear infinite; } @keyframes faroLampo{ 0%, 70% { opacity:.13; transform:scale(.75); box-shadow:none; } 73% { opacity:.32; transform:scale(1); box-shadow:0 0 6px 1px rgba(255,255,255,.45); } 75% { opacity:1; transform:scale(2.2); box-shadow:0 0 24px 9px rgba(255,255,255,.95); } 78% { opacity:.45; transform:scale(1.1); box-shadow:0 0 8px 2px rgba(255,255,255,.35); } 82%,100% { opacity:.13; transform:scale(.75); box-shadow:none; } } /* ═══ L'INGRESSO ════════════════════════════════════════════════════════════ Era scritto addosso al pezzo — `style="min-height:100svh;display:grid; align-content:center"` — e la regola `style-src 'self'` lo scartava: la pagina perdeva altezza e centratura, il contenuto partiva da sopra e finiva sotto la barra fissa. Ecco perche' sembrava «vecchia»: non era vecchia, era senza vestito. Lo spazio in cima non e' un numero a caso: e' l'altezza della barra piu' il pizzo del telefono. Sennò il titolo ci finisce sotto. */ .ingresso{ min-height:100svh; display:grid; align-content:center; padding-top:calc(54px + env(safe-area-inset-top)); padding-bottom:2rem; /* NIENTE spazio ai lati qui. Lo mette gia' il blocco, che dentro ha `.wrap.nudo` col suo 1.15rem — il margine della pagina in tutto il sito. Mettendolo anche qui i due si sommavano, e il campo partiva a 47 pixel dal vetro invece che a 18: piu' stretto della card della maschera, in una pagina dove quel campo e' l'unica cosa che c'e'. */ /* In mezzo, come «La Sicilia» nella presentazione. La classe `.center` di `land.css` vale solo dentro `.wrap.nudo`, e qui non c'e': si dice qui. */ text-align:center; } /* ═══ IL CAMPO CHE CAMBIA MESTIERE ══════════════════════════════════════════ Da email a codice, senza ricaricare. Si spegne, cambia dentro, si riaccende: cambiare gli attributi mentre si vede darebbe uno scatto — il testo che salta, l'invito che cambia a meta'. Centottanta millesimi, che e' il tempo in cui l'occhio segue una cosa senza doverla rincorrere. */ .fm-staccato .fm-riga{ transition:opacity .18s ease, transform .18s ease; } .fm-staccato .fm-riga.muta{ opacity:0; transform:translateY(-6px); } /* Il tondo per tornare all'email: stessa forma e stessa misura della freccia — e' la stessa riga e la stessa mano. Entra crescendo, cosi' si vede arrivare. */ .fm-staccato .fm-torna{ flex:none; animation:tornaEntra .22s cubic-bezier(.32,.72,0,1); } .fm-staccato .fm-torna[hidden]{ display:none; } @keyframes tornaEntra{ from{ transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } } /* Il pallino qui sta in riga, non sotto: quello sotto e' il tondo delle maschere nella presentazione, e li' il margine ci vuole. */ .fm-staccato .pallino-vai{ margin:0; } /* ═══ LE CARD ENTRANO UNA DOPO L'ALTRA ══════════════════════════════════════ Il ritardo di ognuna stava in `style="--i:N"`, scritto addosso alla card. La regola `style-src 'self'` scarta quegli attributi, e le card partivano tutte insieme: un'entrata scaglionata che non si scaglionava. Adesso il numero lo conta il CSS guardando i fratelli. Sedici bastano: sono piu' card di quante ne stiano in una striscia, e la diciassettesima entra con l'ultimo ritardo — che a quel punto e' fuori schermo comunque. */ .sp-card:nth-child(1) { --i:0; } .sp-card:nth-child(2) { --i:1; } .sp-card:nth-child(3) { --i:2; } .sp-card:nth-child(4) { --i:3; } .sp-card:nth-child(5) { --i:4; } .sp-card:nth-child(6) { --i:5; } .sp-card:nth-child(7) { --i:6; } .sp-card:nth-child(8) { --i:7; } .sp-card:nth-child(9) { --i:8; } .sp-card:nth-child(10) { --i:9; } .sp-card:nth-child(11) { --i:10; } .sp-card:nth-child(12) { --i:11; } .sp-card:nth-child(13) { --i:12; } .sp-card:nth-child(14) { --i:13; } .sp-card:nth-child(15) { --i:14; } .sp-card:nth-child(n+16) { --i:15; } /* ═══ NELL'INGRESSO NON C'E' NIENTE DA RIVELARE ═════════════════════════════ Il blocco per entrare porta addosso `.reveal`, che in `land.css` parte a `opacity:0` e si accende quando entra nello schermo — l'osservatore sta in `pagina.js`, che e' della presentazione. Su `/auth` quel copione non c'e', e il blocco restava invisibile — c'era, era trasparente. Qui si dice che e' gia' arrivato, e vale ovunque: un blocco che compare solo dove gira un certo copione e' un blocco con due comportamenti, ed e' esattamente quello che non deve avere. */ .entra .reveal{ opacity:1; transform:none; } /* ═══ CON DUE TONDI LA RIGA NON DEVE ALLARGARSI ═════════════════════════════ Passando al codice compare il secondo tondo, e la riga diventava piu' larga dello schermo: la pagina si spostava di lato. Il motivo non e' la pillola — quella sa gia' stringersi — e' l'INPUT che ci sta dentro. Un campo di testo ha una larghezza sua di natura (una ventina di caratteri), e in una riga flessibile quella larghezza fa da pavimento: sotto non scende, e spinge fuori tutto il resto. `min-width:0` toglie il pavimento; `width:100%` gli dice di prendere quello che avanza, ne' piu' ne' meno. */ .fm-staccato .pillola-sola{ min-width:0; } .fm-staccato .pillola-sola input{ min-width:0; width:100%; } /* ═══ IL CAMPO E' LARGO QUANTO IL CONTENUTO ═════════════════════════════════ La riga del modulo aveva un tetto di 420 pixel, piu' stretto di tutto quello che le sta intorno: in mezzo al vuoto sembrava un ritaglio. Adesso arriva al margine della pagina, come la card della maschera. E vale DAPPERTUTTO, non solo nell'ingresso: e' lo stesso componente chiamato da due pagine, e un componente che si vede in due misure diverse e' di nuovo la copia doppia che abbiamo tolto stanotte. */ .entra .wrap{ max-width:560px; } /* La riga del modulo: larga quanto il contenuto lo lascia, e staccata dal vetro di 30 pixel. Sopra ci sono gia' due margini — 10 della sezione e 18 del contenitore — quindi qui ne basta un filo per arrivare a trenta. */ .entra .fm-staccato .fm-riga{ max-width:none; margin-inline:1px; } /* ═══ IN «LA SICILIA» COME IL CAROSELLO DELL'ACCOUNT ════════════════════════ Stessa ricetta, non una somigliante — quella dell'account funziona e non si tocca, questa la copia. Tre pezzi, e servono tutti e tre: · `margin` negativo fino al vetro: la striscia esce dal contenuto e arriva al bordo dello schermo. `50% - 50vw` e' esattamente quella distanza, qualunque sia la larghezza. · lo stesso spazio RIMESSO DENTRO come `padding`: cosi' da ferma la prima tessera comincia dove comincia il contenuto, e scorrendo fino in fondo l'ultima si ferma allo stesso modo dall'altra parte. · `scroll-padding` per il magnete: la percentuale li' si misura sulla striscia e non sul contenuto, quindi verrebbe zero — e lo snap incollerebbe la prima tessera al vetro scavalcando lo spazio. In mezzo, niente: le tessere le taglia lo schermo che finisce. */ .sp-band{ margin:1.2rem calc(50% - 50vw) 0; padding:12px calc(50vw - 50%) 0; } /* Le mini card hanno lo stesso spazio dell'account: 10 pixel, non i 29 che davano il contenuto e la sezione messi insieme. I pallini sopra restano com'erano — quelli vanno bene. */ .sp-set{ margin:.9rem calc(50% - 50vw) 0; padding:.2rem 10px 1rem; scroll-padding-inline:10px; } /* ═══ LE ICONE DELL'INTESTAZIONE ════════════════════════════════════════════ La misura non sta più qui: questo foglio lo caricano solo le pagine di dentro, e sulla presentazione le stesse due icone restavano più piccole — passando da una pagina all'altra si vedevano cambiare. Adesso sta in `land.css`, che c'è dappertutto, presentazione compresa. */ /* ═══ IL PALLINO DELLO STATO ════════════════════════════════════════════════ Dice a che punto e' la persona: in attesa, oppure approvata. Sta in fondo alla presentazione, su cielo scuro, quindi e' chiaro; nell'account la stessa cosa la fa `.ac-stato`, che li' vive su grigio. Due fogli e due colori perche' sono due fondi diversi — non due idee. */ .stato-riga{ margin:.6rem 0 0; } .stato-pallino{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .9rem; border-radius:999px; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#eaf4fb; } /* Approvato e' oro: e' la cosa che si aspettava, e quando arriva si vede. */ .stato-pallino.attivo{ background:linear-gradient(135deg,var(--gold),var(--amber)); border-color:var(--gold); color:var(--night); } /* Il tondo delle maschere sta sotto il pallino, staccato. */ .entra .pallino-vai{ margin-top:1.2rem; } /* MA NON QUELLO CHE STA IN RIGA COL CAMPO. La riga sopra è per il tondo delle maschere, che sta SOTTO il blocco e ha bisogno di staccarsi. Lo stesso vestito però ce l'ha il bottone che manda — quello accanto al campo — e si prendeva quel margine: venti pixel più in basso del campo, in una riga dove le due cose devono essere alte uguali e allineate. C'era già una regola che glielo toglieva (`.fm-staccato .pallino-vai`), ma quella di sopra vale quanto lei e viene dopo: a parità, in CSS, vince l'ultima. Quindi si dice qui, dopo, e per la riga. */ .entra .fm-riga .pallino-vai{ margin:0; } /* ═══ IL CUORE DEL DOPPIO TOCCO ════════════════════════════════════════════ Sboccia in mezzo alla fotografia, grande, e se ne va da solo in mezzo secondo. Sta nel foglio del sito perché lo usano la galleria e il negozio: è lo stesso gesto, e deve avere la stessa maschera in tutti e due. */ .pop-cuore{ position:absolute; top:50%; left:50%; z-index:6; margin:-.5em 0 0 -.5em; width:1em; height:1em; display:flex; align-items:center; justify-content:center; font-size:5.2rem; line-height:1; color:#ff3b5c; pointer-events:none; text-shadow:0 4px 18px rgba(0,0,0,.45); animation:popCuore .72s cubic-bezier(.2,.9,.3,1) forwards; } /* Togliendo il cuore il segno è lo stesso ma vuoto e pallido: dice «tolto» senza far finta che sia successa una bella cosa. */ .pop-cuore.pop-spento{ color:rgba(255,255,255,.92); } @keyframes popCuore{ 0% { opacity:0; transform:scale(.3); } 22% { opacity:1; transform:scale(1.15); } 40% { transform:scale(.94); } 55% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.18) translateY(-14px); } } /* ═══ LE ALTRE DUE PAGINE DELL'INGRESSO ═════════════════════════════════════ Uscire, e la password nuova. Vestono come l'ingresso — cielo, intestazione, blocco in mezzo — e hanno in più solo queste tre cose: un bottone largo (non c'è nessun campo accanto a cui stare in riga) e la riga che riporta indietro. Il bottone è lo stesso azzurro della freccia dell'ingresso: in una pagina dove c'è una cosa sola da toccare, quella cosa dev'essere la più evidente. */ .au-riga{ justify-content:center; } /* ═══ LO STESSO ORO DELLA FRECCIA ═══════════════════════════════════════════ Il bottone che manda è UNO in tutto l'ingresso: sulla porta col codice è il tondo con la freccia, qui è largo perché c'è una parola da leggere — ma è lo stesso gesto e dev'essere lo stesso colore. L'avevo fatto azzurro, e le due porte sembravano di due siti diversi. Il gradiente e l'ombra sono copiati da `#btnGo` qui sopra, non rifatti a occhio: se cambia quello, questo va cambiato con lui. */ .au-vai{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.6rem; border:0; border-radius:999px; cursor:pointer; font:inherit; font-size:1rem; font-weight:700; color:var(--night,#0d1b2a); background:linear-gradient(135deg,var(--gold) 0%,var(--amber) 60%,var(--coral) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 32px -18px rgba(0,12,28,.8); transition:transform .16s ease; } .au-vai:hover{ transform:scale(1.04); } .au-vai:active{ transform:scale(.97); } /* Sul cielo il testo è chiaro: un link blu di sistema qui sparisce. */ /* Restava da quando le vie erano una riga sola: adesso sono una colonna, e la colonna è `.au-vie`. Qui resta la sola regola che serviva ancora — il colore di un link sul cielo, dove il blu di sistema sparisce. */ .au-torna{ margin-top:1.4rem; font-size:.92rem; } .au-torna a{ color:#cfe6f2; text-decoration:underline; text-underline-offset:3px; } /* Il motivo per cui un giro con Google non è andato: sopra al blocco, sul cielo, dove si guarda prima di riprovare. */ .au-guaio{ max-width:560px; margin:0 auto 1rem; padding:.7rem 1rem; border-radius:12px; font-size:.92rem; font-weight:600; color:#ffd0c2; background:rgba(180,60,40,.22); border:1px solid rgba(255,208,194,.35); } /* ═══ LA MASCHERA DEL CODICE ════════════════════════════════════════════════ `***-***`, e ogni asterisco diventa la cifra battuta. Il testo vero del campo è trasparente e quello che si legge è la copia messa sotto: perché combacino devono avere lo STESSO carattere e la stessa spaziatura, e qui si dicono a tutte e due — se uno dei due eredita e l'altro no, le cifre ballano. Monospazio: le sei caselle restano ferme mentre si riempiono. Con un carattere proporzionale un `1` è più stretto di un `8`, e la maschera si accorcia sotto le dita. */ /* ═══ SU MISURA, NON LARGO QUANTO LA PAGINA ═════════════════════════════════ Il campo dell'email è largo perché un indirizzo è lungo e non si sa quanto. Sei cifre invece si sanno: sono sette caratteri, sempre gli stessi. Tenuto largo come l'altro, il codice galleggiava in mezzo a un campo mezzo vuoto — e un campo più lungo di quello che ci va dentro fa sempre pensare che manchi qualcosa. La misura non è un numero scelto a occhio: è la maschera stessa a farla. La copia che si legge (`.fm-ombra`) sta NELLA riga e la sua larghezza diventa la larghezza del campo; il campo vero ci sta sopra, sovrapposto. Così, se domani il carattere o la spaziatura cambiano, la misura si aggiusta da sola invece di restare quella di ieri. */ .pillola.fm-codice{ position:relative; flex:0 0 auto; width:max-content; max-width:100%; /* NIENTE `margin-inline:auto` qui. In una riga flessibile un margine automatico si mangia tutto lo spazio che avanza: il campo restava in mezzo, sì, ma spingeva la freccia contro il bordo destro dello schermo. In mezzo ci sta la RIGA (`justify-content:center`), e il tondo resta dov'è sempre stato — a otto pixel dal campo. */ margin-inline:0; } /* La riga si stringe con lui e resta in mezzo. */ .fm-riga.fm-riga-codice{ justify-content:center; } .pillola.fm-codice input, .pillola.fm-codice .fm-ombra{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:22px; font-weight:700; letter-spacing:.22em; line-height:var(--fm-h,48px); } /* Quella che si legge sta in riga e detta la misura. L'ultima lettera porta dietro il suo spazio di spaziatura: si toglie, se no a destra resta un buchino che non si spiega. */ .fm-ombra{ display:block; white-space:pre; pointer-events:none; margin-right:-.22em; color:var(--night,#0d1b2a); } .fm-ombra[hidden]{ display:none; } /* Il campo vero ci sta sopra: si vede solo il cursore, che deve vedersi. */ .pillola.fm-codice input{ position:absolute; left:1.1rem; right:1.1rem; top:0; height:100%; color:transparent; caret-color:var(--night,#0d1b2a); } .pillola.fm-codice input::placeholder{ color:transparent; } /* Gli asterischi ancora da riempire sono meno forti delle cifre battute: si vede a colpo d'occhio quante ne mancano. */ .fm-ombra b{ font-weight:700; color:var(--night,#0d1b2a); } .fm-ombra i{ font-style:normal; font-weight:700; color:#b4c4d1; } .fm-ombra .fm-tratto{ color:#8aa0b2; } /* ═══ «NON È LA TUA EMAIL?» ═════════════════════════════════════════════════ Al posto del tondo con la busta, che nessuno capiva. Sotto il campo, scritto: è una via d'uscita, non una cosa da fare — quindi si legge se la si cerca e non ruba l'occhio a quello che c'è da battere. */ .fm-altra{ display:block; margin:.9rem auto 0; padding:.2rem; border:0; background:none; cursor:pointer; font:inherit; font-size:.88rem; color:#cfe6f2; text-decoration:underline; text-underline-offset:3px; } /* ═══ LE PAGINE CON LA PASSWORD ═════════════════════════════════════════════ La porta di sempre: email e password, uno sotto l'altro. L'ingresso col codice ha UN campo e sta in riga con la freccia; qui i campi sono due o tre, e in riga non ci starebbero — quindi si impilano, ognuno con la sua etichetta sopra, che è come si leggono i moduli da che esistono i moduli. Le pillole sono le stesse dell'ingresso, non altre somiglianti: cambia quante ce ne sono, non come sono fatte. */ .au-forma{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.4rem; } .au-campo{ display:block; text-align:left; } .au-campo[hidden]{ display:none; } /* L'etichetta sul cielo: chiara, piccola, un filo staccata dal campo. */ .au-campo > span:first-child{ display:block; margin:0 0 .35rem .2rem; font-size:.82rem; font-weight:700; letter-spacing:.02em; color:#cfe6f2; } /* La pillola qui è larga quanto la riga: non ha un tondo accanto da lasciar passare. `display:flex` perché nel markup è uno `` — un'etichetta non può contenere un `
`, e un `` di suo non si comporta da riquadro. */ .au-forma .pillola-sola{ display:flex; align-items:center; width:auto; height:var(--fm-h,48px); margin:0; padding:0 1.1rem; gap:0; } .au-forma .pillola-sola input{ height:100%; width:100%; } /* Il bottone al posto della freccia: qui c'è una frase da leggere prima di toccarlo — «Entra», «Registrati» — e un tondo con dentro un simbolo non direbbe quale delle due cose sta per succedere. */ .au-riga{ justify-content:center; margin-top:.4rem; } /* ═══ LE ALTRE STRADE ═══════════════════════════════════════════════════════ Sotto il modulo: l'altra porta, la password dimenticata, l'account che non c'è ancora. In COLONNA e in mezzo — una riga sola con tre link separati da un punto si legge come una frase da decifrare, e su un telefono va a capo dove capita. Sono link e basta: c'era un bottone bianco a pillola per «entra senza password», e in una pagina dove il bottone da premere è uno solo, un secondo bottone grosso quanto il primo non dice più qual è la strada principale. Corte, anche: «Entra senza password: ti mando un codice» è una spiegazione, e una spiegazione sotto un modulo non la legge nessuno. «Solo email» dice la stessa cosa in due parole. */ .au-vie{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top:1.6rem; } .au-vie a{ font-size:.94rem; color:#cfe6f2; text-decoration:underline; text-underline-offset:3px; } /* La prima è l'altra porta, e conta più delle altre due. */ .au-vie a:first-child{ font-weight:700; color:#fff; } /* Sull'ingresso col codice l'altra strada sta più staccata: sopra ci sono già i tre tondi social, e attaccata sembrerebbe il quarto. */ .au-vie-sotto{ margin-top:2.2rem; } /* ═══ LA TRINACRIA MIGNON ═══════════════════════════════════════════════════ Il segno del sito dentro il bottone che manda. Non è un'immagine: è un RITAGLIO — la sagoma fa da maschera e il colore lo dà il bottone (`currentColor`). Così sul tondo d'oro esce blu notte come il resto, e il giorno che il bottone cambia colore la trinacria lo segue senza che nessuno debba ricordarsene. È lo stesso file che la presentazione usa per il marchio grande: una sagoma sola per tutte le misure. */ .tri-mignon{ display:inline-block; width:1.35em; height:1.35em; flex:none; background:currentColor; -webkit-mask:url('/assets/landing/trinacria_sagoma.svg') center / contain no-repeat; mask:url('/assets/landing/trinacria_sagoma.svg') center / contain no-repeat; } /* Nel tondo sta un filo più grande: lì è l'unica cosa che c'è dentro. */ .fm-staccato #btnGo .tri-mignon{ width:1.45em; height:1.45em; }