/* ========================================================================== tiportoio — mondo visivo del mockup approvato dal committente. I token e le regole durevoli vivono in DESIGN.md. Griglia, breakpoint e spaziature sono scritti qui: la pagina non carica nessun framework CSS. ========================================================================== */ /* -------------------------------------------------------------------------- CARATTERI — ospitati qui, non su un CDN. Il pubblico legge da telefono su rete lenta: due handshake TLS verso fonts.googleapis.com e fonts.gstatic.com erano schermo bianco prima che comparisse una parola. Atkinson Hyperlegible è la faccia scelta *per* questi lettori: doveva arrivare per prima, non per terza. Un solo file di Gabarito serve 700 e 800 (è variabile), come fa Google. Sottoinsiemi latin e latin-ext: `unicode-range` fa scaricare latin-ext solo se in pagina compare un carattere che lo richiede. Licenze in assets/fonts/. -------------------------------------------------------------------------- */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/gabarito-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/gabarito-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/gabarito-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/gabarito-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Ripiego a metriche corrette per il display. Gabarito è più stretto di system-ui di circa l'11%: senza correzione il manifesto della prima schermata cambiava larghezza di 53px nel momento in cui il carattere arrivava, e i titoli con `text-wrap: balance` si ri-spezzavano. Con `size-adjust` lo scambio non muove più la composizione. Atkinson invece è già a metriche quasi identiche (rapporto 0,998-1,014): non serve correggerlo. */ @font-face { font-family: 'Gabarito ripiego'; src: local('Segoe UI Bold'), local('Helvetica Neue Bold'), local('Arial Bold'), local('Roboto'); font-weight: 700 800; size-adjust: 94%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; } :root { /* Colore */ --inchiostro: #070E15; --inchiostro-tenue: #5A5F66; --su-scuro-tenue: #C3C7CC; --carta: #FFFFFF; --panna: #FAF8F5; --panna-scura: #ECE8E3; --panna-premuta: #E1DCD5; /* dichiarato in DESIGN.md, mancava qui */ --panna-calda: #F4EEE8; /* la fascia dell'associazione, nel mockup */ --sfumata: #F2EFE8; /* la panna esatta a cui sfumano le foto */ --corallo: #FD4335; /* uso grafico: marchio, numerali, IO */ --corallo-azione: #D62B1F; /* uso testuale: riempimenti che portano testo */ --corallo-premuto: #BF2418; --verde: #0E7A3C; --verde-velo: #E8F5EC; /* fondo del bottone WhatsApp del mockup */ --verde-velo-premuto:#D8EDE0; --whatsapp: #1FA855; --linea: rgba(7, 14, 21, .12); --linea-controllo: rgba(7, 14, 21, .55); /* Riscontro: esistono solo dove si compila qualcosa — il modulo di candidatura sul sito, tutto il pannello. Nessuno di questi comunica da solo: accanto c'è sempre un segno e una frase. */ --segnaposto: #8A8F96; --esito-fatto-fondo: #E8F5EC; --esito-fatto-testo: #0B5C2E; --esito-guaio-fondo: #FDECEA; --pericolo: #8C1D13; --pericolo-premuto: #6E160E; --allarme-fondo: #FFF4E5; --allarme-bordo: #B45309; --allarme-testo: #6B3E06; --allarme-velo: rgba(180, 83, 9, .12); /* Forma */ --r-scheda: 16px; --r-pannello: 24px; /* le fasce del mockup sono riquadri, non bande */ /* Il taglio a luna di "Diventa autista". In PIXEL, non in percentuale: in percentuale l'arco cresce con la colonna e la foto diventa una lente. */ --r-luna: clamp(70px, 9vw, 130px); --r-minimo: 4px; --r-controllo: 10px; /* Profondità: sempre con scostamento verticale, mai aloni centrati */ --ombra-posata: 0 1px 2px rgba(7, 14, 21, .05), 0 14px 30px -14px rgba(7, 14, 21, .22); --ombra-alta: 0 2px 4px rgba(7, 14, 21, .06), 0 26px 46px -18px rgba(7, 14, 21, .3); /* Ritmo: un solo passo per tutta la pagina */ --passo: clamp(3.5rem, 7vw, 6.5rem); --passo-mezzo: clamp(1.75rem, 3.5vw, 2.75rem); /* Il divario fra un pannello e l'altro. Nel mockup i riquadri quasi si toccano: il respiro sta DENTRO ciascuno, non fra l'uno e l'altro. */ --divario: clamp(1rem, 2vw, 1.75rem); /* Caratteri */ --display: 'Gabarito', 'Gabarito ripiego', system-ui, -apple-system, 'Segoe UI', sans-serif; --corpo: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; --uscita: cubic-bezier(.16, 1, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Chi ha chiesto meno movimento riceve comunque la conferma della pressione: cambia il materiale, dal movimento al colore. Togliere il riscontro sarebbe peggio che animarlo. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .bottone:hover, .bottone:active, .autista:hover, .autista:focus-within { transform: none; } } body { margin: 0; font: 400 1.125rem/1.6 var(--corpo); /* 18px: soglia minima del sistema */ color: var(--inchiostro); /* Il terreno della pagina è BIANCO, e sono le fasce a essere di carta panna: nel mockup ogni sezione è un riquadro arrotondato posato sul bianco, non una banda che va da bordo a bordo. È la lettura opposta a quella di prima, ed è quella che dà alla pagina il suo ritmo a schede. */ background: var(--carta); -webkit-font-smoothing: antialiased; /* Una parola che non ci sta si spezza invece di sfondare la pagina. Morde solo nel caso estremo — schermo da 320px col carattere di sistema al doppio, dove "accompagnano" da sola misura più della colonna. */ overflow-wrap: break-word; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; } p { margin: 0; } :focus-visible { outline: 3px solid var(--corallo-azione); outline-offset: 3px; } .visivamente-nascosto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .salta-al-contenuto { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--inchiostro); color: #fff; padding: .85rem 1.25rem; border-radius: var(--r-controllo); font-weight: 700; text-decoration: none; transition: top .2s var(--uscita); } .salta-al-contenuto:focus { top: 1rem; } /* Il campo di contenuto si restringe per notch e angoli arrotondati (in orizzontale l'intaglio mangia fino a 44px), mentre fondi e fotografie restano al vivo: è il testo che deve stare al sicuro, non lo sfondo. */ .contenitore { width: min(100% - 2.5rem - env(safe-area-inset-left) - env(safe-area-inset-right), 1260px); margin-inline: auto; } /* IL PANNELLO — l'unità di composizione del mockup. Una fascia non è una banda al vivo: è un riquadro di carta posato sul bianco, largo quasi quanto la finestra e con i quattro angoli tondi. Il testo dentro arriva comunque al respiro del campo di contenuto, perché il bordo interno cresce con la larghezza. */ .pannello { width: min(100% - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right), 1360px); margin-inline: auto; border-radius: var(--r-pannello); padding: clamp(1.5rem, 3.4vw, 2.75rem) clamp(1.25rem, 3vw, 3.5rem); } .pannello--panna { background: var(--panna); } .pannello--calda { background: var(--panna-calda); } /* IL FILETTO CHE DEFINISCE IL TAGLIO. La panna sul bianco è uno scarto di luminanza dell'1,06:1 — abbastanza per sentire un campo, non per vedere un bordo. Sullo schermo del progetto, cioè un telefono di quattro anni tenuto al sole di Ginosa, l'angolo tondo da 24px semplicemente non esisteva: il pannello si intuiva, non si vedeva. Un filetto da 1px lo taglia netto senza aggiungere l'ombra che il mockup non ha. È la regola già scritta in DESIGN.md ("un filetto da 1px a --linea che definisce il taglio"), che nel passaggio di aderenza al mockup era caduta insieme al resto. */ .pannello--panna, .pannello--calda, .riquadro, .invito__interno { border: 1px solid var(--linea); } .corallo { color: var(--corallo-azione); } /* La Regola dei Due Coralli, applicata al fondo e non solo alla misura. Il Corallo Sigillo regge 3,03:1 sulla sfumata della hero — sopra la soglia del testo grande — ma scende a 2,86:1 sulla panna scura, dove "IO" è una parola che si legge, non un segno che si guarda. Lì vale il Corallo Azione, che sulla stessa panna arriva a 4,3:1. */ .hero .corallo { color: var(--corallo); } /* -------------------------------------------------------------------------- Tipografia di pagina -------------------------------------------------------------------------- */ /* Ogni grado display porta un tetto in `vw`. Il carattere di sistema al doppio deve ingrandire ciò che si legge — la prosa, i dati, le etichette — non un titolo che poi viene tagliato dal proprio riquadro. Il tetto morde solo in quel caso: alle misure normali non tocca niente. */ .manifesto { font-size: min(clamp(3.2rem, 8.4vw, 6rem), 22vw); line-height: .95; letter-spacing: -.035em; overflow-wrap: break-word; } .titolo { font-size: min(clamp(1.9rem, 3.6vw, 2.6rem), 13vw); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; } .titolo--piccolo { font-size: min(clamp(1.6rem, 2.8vw, 2rem), 11vw); line-height: 1.1; } .titolo--grande { font-size: min(clamp(2.1rem, 4.4vw, 3.1rem), 15vw); line-height: 1.04; } .sommario { color: var(--inchiostro-tenue); margin-top: .5rem; max-width: 44ch; } /* La riga di prova sotto l'intestazione degli autisti: prosa piena, non una didascalia rimpicciolita — è la frase su cui si regge tutto il posizionamento del servizio. */ .intestazione__prova { margin-top: .5rem; color: var(--inchiostro-tenue); max-width: 46ch; } .intestazione__prova strong { color: var(--inchiostro); } /* LA FRECCIA STA NEL FLUSSO DEL TESTO, NON ACCANTO AL BLOCCO. Da elemento flex la freccia era un fratello dell'etichetta: finché l'etichetta stava su una riga sola andava bene, ma «Scopri tutte le tariffe e le condizioni» su un telefono va a capo, il riquadro stira il collegamento a tutta la propria larghezza — è un figlio di colonna flex — e la freccia si ritrovava centrata sul bordo destro della scheda, a due centimetri dalla riga che stava indicando. Verificato a 375px. Dichiarata `inline`, dentro una griglia o una colonna flex la scatola si blocca comunque; il bersaglio da 48px lo costruisce il bordo interno e non `min-height`, che su un blocco lascerebbe il testo in cima e il vuoto sotto. */ .collegamento { display: inline; padding-block: .8rem; color: var(--corallo-azione); font-weight: 700; text-decoration: none; } .collegamento .icona { width: 20px; height: 20px; display: inline-block; vertical-align: -.3em; margin-left: .45rem; } /* L'ultima parola e la freccia viaggiano insieme: nel flusso, da sola, la freccia andava a capo e restava orfana su una riga propria appena l'etichetta riempiva la riga precedente (375px, «...e le condizioni»). Il gruppo si spezza prima della parola, mai fra la parola e il segno. */ .collegamento__coda { white-space: nowrap; } @media (hover: hover) { /* Niente sottolineatura: questo collegamento ha gia la freccia che parte in avanti al passaggio. Il colore che si scurisce e il movimento della freccia sono due segnali, e sono i due segnali del sistema. */ .collegamento:hover { color: var(--corallo-premuto); } } /* Titolo a sinistra, richiamo a destra sulla stessa riga di base; la riga di prova sotto, a tutta larghezza. Con `flex` la prova si infilava fra i due e spingeva il richiamo a capo appena il titolo cresceva. */ .intestazione { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .55rem 1.5rem; margin-bottom: var(--passo-mezzo); } .intestazione > .titolo { grid-column: 1; grid-row: 1; } .intestazione > .catena, .intestazione > .intestazione__tutti { grid-column: 2; grid-row: 1; justify-self: end; } .intestazione__prova { grid-column: 1 / -1; grid-row: 2; } /* Sotto i 760px il richiamo non sta accanto al titolo senza spezzarlo: passa sotto, dove ha tutta la larghezza. */ @media (max-width: 759px) { .intestazione { grid-template-columns: minmax(0, 1fr); } .intestazione > .catena, .intestazione > .intestazione__tutti { grid-column: 1; justify-self: start; } /* Impilando, l'ordine del documento metteva «Vedi tutti gli autisti» FRA il titolo e la riga di prova: la via d'uscita dalla sezione letta prima della frase che dice di chi ci si può fidare, e con essa il distacco fra titolo e prova che sul desktop non c'è. La prova sale al suo posto, il richiamo scende sotto. La catena di "Come funziona" non convive mai con la prova: la stessa riga vale per tutte e due. */ .intestazione > .catena, .intestazione__prova { grid-row: 2; } .intestazione > .intestazione__tutti { grid-row: 3; } } /* -------------------------------------------------------------------------- Controlli -------------------------------------------------------------------------- */ .bottone { display: inline-flex; align-items: center; justify-content: center; gap: min(.6rem, 10px); min-height: 52px; /* target ampio: si sbaglia meno */ max-width: 100%; /* Le rifiniture si fermano: col carattere al massimo lo spazio serve all'etichetta, non al bordo interno. */ padding: .8rem min(1.35rem, 22px); border: 1px solid transparent; border-radius: var(--r-controllo); font: 700 1.0625rem/1.2 var(--corpo); text-decoration: none; cursor: pointer; transition: transform .25s var(--uscita), background-color .25s var(--uscita), box-shadow .25s var(--uscita); } .bottone .icona { flex: none; } .bottone--grande { min-height: 60px; padding: 1rem min(1.75rem, 28px); font-size: 1.125rem; } .bottone--corallo { background: var(--corallo-azione); color: #fff; box-shadow: var(--ombra-posata); } /* WhatsApp come nel mockup: fondo verde chiarissimo, testo e glifo nel verde scuro del sistema — 5,4:1 sul proprio fondo, sopra la soglia. Il verde chiaro da solo non basta a dire "WhatsApp": accanto c'è sempre il glifo. */ .bottone--whatsapp { background: var(--verde-velo); color: var(--verde); border-color: transparent; } .bottone--whatsapp .icona--whatsapp { color: var(--verde); } .bottone--chiaro { background: var(--panna-scura); color: var(--inchiostro); } @media (hover: hover) { .bottone:hover { transform: translateY(-2px); } .bottone--corallo:hover { background: var(--corallo-premuto); } .bottone--whatsapp:hover { background: var(--verde-velo-premuto); } .bottone--chiaro:hover { background: var(--panna-premuta); } } /* LA PRESSIONE. Il solo momento animato della pagina, e l'unico che se lo sia guadagnato: il pollice sul bottone di contatto, un attimo prima che lo schermo passi a un'altra applicazione. Prima non succedeva niente — `:hover` è giustamente riservato ai puntatori, e `:active` riportava a zero un sollevamento che sul telefono non c'era mai stato: chi tocca non riceveva alcuna conferma. Il bottone cede sotto il dito. 90ms, più rapido di qualunque altra transizione del sistema, perché deve leggersi come causa ed effetto e non come animazione. E il colore si scurisce insieme al movimento: chi non può vedere lo spostamento riceve comunque la conferma. */ .bottone:active { transition-duration: .09s; transform: translateY(1px) scale(.985); } .bottone--corallo:active { background: var(--corallo-premuto); } .bottone--chiaro:active { background: var(--panna-premuta); } .bottone--whatsapp:active { background: var(--verde-velo-premuto); } .icona { width: 22px; height: 22px; } /* -------------------------------------------------------------------------- Testata — nessun menu a scomparsa a nessuna larghezza. Chi legge male non deve scoprire dove sono i link. -------------------------------------------------------------------------- */ .testata { background: var(--carta); border-bottom: 1px solid var(--linea); } .testata__interno { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marchio azione" "nav nav"; align-items: center; gap: .7rem 1.25rem; padding-block: .85rem; } /* `width: max-content` tiene la firma incollata al logotipo: senza, la colonna si allargava a tutta la cella della griglia e "un servizio di For President" finiva a metà testata, staccato dal marchio che sta firmando. */ .testata__marchio { grid-area: marchio; justify-self: start; display: flex; flex-direction: column; gap: .1rem; /* `fit-content`, non `max-content`: col carattere di sistema al doppio la firma misura 399px e `max-content` si rifiutava di mandarla a capo, sfondando di 79px uno schermo da 320. `fit-content` si stringe allo spazio disponibile quando non ce n'è abbastanza, e altrove si comporta esattamente come prima. */ width: fit-content; max-width: 100%; text-decoration: none; align-items: flex-start; } .testata__marchio img { width: clamp(140px, 34vw, 176px); } /* L'endorsement chiude a filo del logotipo, come nel mockup: è la firma sotto il marchio, non una riga a sé. Resta a 1rem — nel mockup è più minuto, ma sotto i 16px questo pubblico non lo legge, e per contratto va letto. */ .testata__endorsement { /* `justify-self`, non `align-self`: il marchio è una griglia (vedi il blocco del movimento), e lì è l'asse in linea a portare la larghezza. */ justify-self: stretch; text-align: right; font-size: 1rem; line-height: 1.3; color: var(--inchiostro-tenue); text-wrap: balance; } .testata__azione { grid-area: azione; } /* Sotto i 560px il pulsante in riga si ritira: accanto al marchio e al comando non ci sta, e stringerlo fino a farcelo stare vorrebbe dire un'etichetta che non dice più cosa succede. Al suo posto subentra il gemello in fondo al pannello del menu (`.voci__azione`, qui sotto): il posto cambia, la strada no. */ @media (max-width: 559px) { .testata__interno { grid-template-columns: 1fr; grid-template-areas: "marchio" "nav"; } .testata__azione { display: none; } } /* Fra i 560 e i 1079px l'azione sta in fondo alla riga della navigazione, non in alto a destra: il logotipo prende la sua riga, e soprattutto l'ordine di lettura coincide con l'ordine del DOM anche qui. */ @media (min-width: 560px) and (max-width: 1079px) { .testata__interno { grid-template-columns: 1fr auto; grid-template-areas: "marchio marchio" "nav azione"; } } /* Schermi da 320px: la testata si prendeva il 27% dell'altezza prima che cominciasse il contenuto. Si stringe il verticale e il logotipo — mai il corpo del testo, mai i 48px dei bersagli. */ /* Il vincolo non è la larghezza, è l'ALTEZZA. La soglia a 359px salvava il telefono da 320px e lasciava fuori il 360x640 — l'Android vecchio più diffuso in questo pubblico — dove testata e foto si prendevano il 52% della prima schermata e il bottone della hero finiva tagliato dalla piega. Si guarda quanto schermo c'è in verticale, come già fa la regola dell'orizzontale. */ @media (max-width: 359px), (max-height: 700px) and (orientation: portrait) { .testata__interno { padding-block: .55rem; gap: .45rem; } .testata__marchio img { width: 128px; } .testata__nav a { padding-inline: .55rem; } } .testata__azione .icona { width: 18px; height: 18px; } /* ========================================================================== IL MENU SU TELEFONO Qui il progetto cambia idea, e vale la pena dire perché. La regola precedente — «nessun menu a scomparsa a nessuna larghezza» — nasceva da una preoccupazione giusta: chi legge male non deve scoprire dove sono i link. La striscia che scorre però quella preoccupazione non la risolveva: di cinque voci ne mostrava due, le altre uscivano dal bordo, e la voce della pagina in cui ti trovavi poteva essere fra quelle fuori. Un elenco che non si vede non è più visibile di un elenco chiuso: è solo meno onesto, perché non dichiara di avere un seguito. E costava sessanta pixel di testata appiccicata in cima a ogni schermata. Il menu li rende tutti e cinque, a piena larghezza, uno sotto l'altro — e sotto i 560px anche il pulsante corallo, che nella riga della testata non ci sta. La preoccupazione originale resta e viene risolta dove va risolta: il pannello si apre tutto in una volta, senza sottomenu e senza voci fuori dal bordo, e il comando che lo apre dichiara il proprio stato — tre tratti che diventano una croce per chi guarda, "Apri il menu" / "Chiudi il menu" in `aria-label` per chi ascolta. (Qui c'era scritto che il pulsante portasse la parola accanto al glifo: non è mai stato vero in pagina — dieci righe più sotto la regola dice «il comando è il glifo e basta» — e il nome vive nell'`aria-label`.) E resta la promessa di fondo: il pulsante nasce `hidden` nell'HTML. Senza JavaScript non compare, la striscia resta quella di prima, e non c'è un solo link che finisca dietro un comando che nessuno può premere. ========================================================================== */ .testata__nav { grid-area: nav; min-width: 0; position: relative; } /* Il comando è il glifo e basta: niente riquadro, niente parola. Il bersaglio resta però 48px pieni — è invisibile, non piccolo, e su un pulsante senza bordo è l'unica cosa che tiene la promessa dei bersagli larghi. */ .testata__menu { display: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--inchiostro); cursor: pointer; } /* Il nome del comando non è scritto in pagina: sta in `aria-label`, e lo aggiorna il JavaScript insieme ad `aria-expanded`. Chi usa uno screen reader sente «Apri il menu» / «Chiudi il menu» come prima. */ /* I TRE TRATTI CHE DIVENTANO UNA CROCE. Disegnati in CSS e non presi dal repertorio delle icone, perché lì una forma è un `path` unico e qui i tre tratti devono muoversi ciascuno per conto proprio. Spessore 2 e terminali tondi restano la grammatica di tutte le altre. Il movimento sta dentro il permesso che il sistema dà ai controlli: è la reazione di un comando a chi lo preme, non una comparsa. Si frena e non rimbalza, come tutto il resto. */ .testata__menu-glifo { position: relative; display: block; width: 24px; height: 18px; } .testata__menu-glifo span { position: absolute; left: 0; width: 100%; height: 2px; /* Il raggio della scala, non un valore inventato: su una barra alta 2px il browser lo riduce da sé alla metà dell'altezza, e il risultato è il capo tondo delle icone — lo stesso che lì fa `stroke-linecap: round`. */ border-radius: var(--r-minimo); background: currentColor; /* `translate` e `rotate` come proprietà indipendenti, non dentro `transform`: è la stessa scelta delle comparse, e qui serve anche a tenere l'ordine giusto — prima si sposta, poi ruota sul proprio centro. */ transition: translate .28s var(--uscita), rotate .28s var(--uscita), opacity .16s var(--uscita); } .testata__menu-glifo span:nth-child(1) { top: 0; } .testata__menu-glifo span:nth-child(2) { top: 8px; } .testata__menu-glifo span:nth-child(3) { top: 16px; } .testata__nav[data-aperto] .testata__menu-glifo span:nth-child(1) { translate: 0 8px; rotate: 45deg; } .testata__nav[data-aperto] .testata__menu-glifo span:nth-child(2) { opacity: 0; } .testata__nav[data-aperto] .testata__menu-glifo span:nth-child(3) { translate: 0 -8px; rotate: -45deg; } @media (prefers-reduced-motion: reduce) { .testata__menu-glifo span { transition: none; } } @media (hover: hover) { .testata__menu { transition: color .15s var(--uscita); } .testata__menu:hover { color: var(--corallo-azione); } } /* La striscia scorre, e deve VEDERSI che scorre: senza questo velo le ultime due voci esistevano senza dare alcun segnale di esistere. Non è un menu a scomparsa — niente si nasconde dietro un interruttore — è il bordo che dichiara di avere un seguito. La soglia: le cinque voci misurano ~795px, più 40px di margini del campo di contenuto. Sotto gli 835px la striscia deborda di sicuro; sopra, no, e il velo mentirebbe. Se cambiano le etichette, ricontrolla questo numero. */ @media (max-width: 1059px) { .testata__nav::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: -1.25rem; width: 2.75rem; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--carta) 72%); } } .testata__nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; /* Lo sbordo della striscia resta di 20px anche col carattere ingrandito: in rem cresceva oltre il margine del campo di contenuto e allargava l'area di scorrimento della pagina. */ padding-inline: min(1.25rem, 20px); margin-inline: calc(-1 * min(1.25rem, 20px)); overflow-x: auto; scrollbar-width: none; } .testata__nav ul::-webkit-scrollbar { display: none; } /* Fra i 560 e i 1079px la navigazione divide la riga con il pulsante. Il debordo di destra — che altrove serve a far scorrere le voci fino al bordo dello schermo — qui faceva finire l'ultima voce sotto al pulsante, tagliata a metà parola: si legge come un difetto, non come uno scorrimento. Resta il debordo di sinistra, dove non c'è niente da scavalcare. */ @media (min-width: 560px) and (max-width: 1079px) { .testata__nav ul { margin-inline-end: 0; padding-inline-end: .25rem; } /* E con il debordo se ne va anche il velo, che stava a -1.25rem: in questa fascia finiva SOTTO il pulsante corallo, e l'ultima voce veniva troncata di netto contro il rosso — senza sfumatura, quindi senza il segnale che esiste un seguito. È esattamente il difetto che la riga sopra risolveva per le voci e lasciava aperto per il velo. Misurato su un telefono in orizzontale (740×360): nav fino a 502px, velo fino a 522px, pulsante da 518px. Riportato a filo, il velo torna dentro la striscia che sfuma. */ .testata__nav::after { inset-inline-end: 0; } } .testata__nav a { position: relative; display: flex; align-items: center; white-space: nowrap; min-height: 48px; padding: .5rem .75rem; border-radius: var(--r-controllo); font-size: 1.0625rem; font-weight: 400; text-decoration: none; color: var(--inchiostro); } /* La voce attiva del mockup: corallo, e un punto sotto. Il colore non parla mai da solo — il punto è il secondo segno, per chi il corallo non lo distingue dal nero. */ .testata__nav a[aria-current] { color: var(--corallo-azione); font-weight: 700; } .testata__nav a[aria-current]::after { content: ''; position: absolute; left: 50%; bottom: .28rem; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--corallo); } /* Fuori da `@media (hover: hover)` questi stati restavano accesi dopo il tocco: la voce toccata sembrava ancora selezionata. */ @media (hover: hover) { .testata__nav a { transition: color .15s var(--uscita), background-color .15s var(--uscita); } .testata__nav a:hover { color: var(--inchiostro); background: var(--panna); } } /* La testata è l'unica fascia che supera il campo di contenuto: logotipo (200) + navigazione (755) + pulsante (203) + spazi (40) fanno 1198, cioè più dei 1180 del contenuto. Allargarla a 1320 è meno peggio che accorciare le voci del mockup o mandarle a capo sopra il pulsante. Sotto i 1300 la navigazione torna sulla propria riga, dove ha tutta la larghezza. */ /* La riga unica del mockup — marchio, voci, azione — chiede 1330px netti con le etichette per esteso ("Autisti disponibili", non "Autisti"). Sotto quella soglia la navigazione torna sulla propria riga, dove ha tutta la larghezza: meglio due righe pulite che cinque voci schiacciate. */ @media (min-width: 1340px) { .testata__interno { width: min(100% - 2rem, 1400px); grid-template-columns: auto 1fr auto; grid-template-areas: "marchio nav azione"; align-items: center; gap: 1rem 1.5rem; padding-block: 1rem; } /* In riga col logotipo le voci non scorrono: se il carattere è grande vanno a capo, invece di uscire dallo schermo. */ .testata__nav ul { justify-content: center; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: .1rem; } .testata__nav a { padding-inline: .7rem; } } /* -------------------------------------------------------------------------- LA TESTATA A UNA RIGA, E IL PANNELLO DEL MENU Tutto sotto `.js`: è la classe che `includes/head.php` scrive prima del disegno, quindi non c'è un istante in cui si veda la composizione vecchia. Senza JavaScript nessuna di queste regole si accende e la testata resta quella di prima, striscia compresa. -------------------------------------------------------------------------- */ @media (max-width: 1079px) { .js .testata__menu { display: grid; } /* Marchio a sinistra, comando a destra, una riga sola. Sono i sessanta pixel che la striscia si prendeva in cima a ogni schermata, restituiti alla pagina — e sulla hero di un telefono corto sono la differenza fra un contatore sopra la piega e uno sotto. */ .js .testata__interno { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marchio nav"; align-items: center; } /* Il pannello si misura sulla TESTATA, non sul pulsante: la navigazione smette di essere un contenitore posizionato e lascia che l'elemento appiccicato in cima faccia da riferimento. */ /* La firma chiudeva a destra: era giusto quando sotto di lei c'era la striscia larga quanto lo schermo, ed è sbagliato adesso che il marchio è una colonna stretta accanto al pulsante. A 320px «un servizio di / For President» andava a capo e le due righe si allineavano a destra, sfalsate sotto un logotipo allineato a sinistra. Sta sotto il logotipo: si allinea al logotipo. */ .js .testata__endorsement { justify-self: start; text-align: left; } .js .testata__nav { position: static; } .js .testata__nav::after { display: none; } /* Non scorre più niente da velare. */ .js .testata__nav ul { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; gap: 0; margin-inline: 0; padding-block: .35rem max(.35rem, env(safe-area-inset-bottom)); padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right)); overflow: visible; background: var(--carta); border-top: 1px solid var(--linea); /* Il pannello poggia sulla pagina come ogni altra cosa di questo mondo: contatto stretto più proiezione morbida, mai un alone centrato. */ box-shadow: 0 1px 0 var(--linea), 0 22px 38px -24px rgba(7, 14, 21, .55); } .js .testata__nav[data-aperto] ul { display: flex; } .js .testata__nav li { width: 100%; } .js .testata__nav a { min-height: 56px; padding: .8rem .25rem .8rem 1.5rem; font-size: 1.1875rem; border-bottom: 1px solid var(--linea); border-radius: 0; } .js .testata__nav li:last-child a { border-bottom: 0; } /* Il punto della voce attiva passa da sotto la parola al suo fianco: in una colonna di righe piene, un punto centrato sotto il testo non appartiene a niente. Resta il secondo segno accanto al corallo, che è la ragione per cui esiste. */ .js .testata__nav a[aria-current]::after { left: .25rem; top: 50%; bottom: auto; margin-left: 0; translate: 0 -50%; width: 8px; height: 8px; } } /* IL GEMELLO IN FONDO AL PANNELLO. Nasce spento a ogni larghezza e si accende in un caso solo: sotto i 560px, col JavaScript in pagina — cioè dove esiste un pannello di cui essere il fondo e dove il pulsante in riga non c'è. Sopra i 560px, e senza JavaScript, resta `display: none`: dei due gemelli se ne disegna sempre esattamente uno, e nella striscia in chiaro non compare una sesta voce travestita da bottone. Le misure che seguono non sono nuove: sono quelle di `.bottone`, riprese perché `.js .testata__nav a` — scritto per le voci — è più specifico e altrimenti trasformerebbe il pulsante in una riga di elenco, quadrata e con il filetto sotto. */ .voci__azione { display: none; } @media (max-width: 559px) { .js .voci__azione { display: block; padding: .9rem 0 .35rem; } .js .voci__azione a { display: flex; width: 100%; min-height: 52px; padding: .8rem min(1.35rem, 22px); border-bottom: 0; border-radius: var(--r-controllo); /* Il colore per ultimo, ed è quello che serviva davvero: la regola delle voci porta anche `color`, e senza questa riga il pulsante restava corallo con la scritta e il glifo in inchiostro — il solo bottone del sito a non avere l'etichetta bianca. */ color: #fff; font-size: 1.0625rem; } .js .voci__azione .icona { width: 18px; height: 18px; } } /* Sotto i 560px il pulsante corallo non entra nella riga insieme al marchio e al menu: passa in fondo al pannello del menu (vedi `.voci__azione`). Sopra, entra in mezzo ai due. */ @media (min-width: 560px) and (max-width: 1079px) { .js .testata__interno { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "marchio azione nav"; gap: .5rem .75rem; } } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--sfumata); overflow: hidden; } .hero__foto { position: absolute; inset: 0; } /* I tre fotogrammi stanno impilati nello stesso posto e si scambiano per dissolvenza. Lenta di proposito — 1,4s — perché non è un carosello di contenuti da guardare: è la luce che cambia dietro il titolo, e deve passare quasi inosservata. Il cambio lo governa assets/js/tiportoio.js; se il JavaScript non arriva resta acceso il primo, che è già in pagina. */ .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 42%; } .hero__fotogramma { opacity: 0; transition: opacity 1.4s var(--uscita); } .hero__fotogramma.e-visibile { opacity: 1; } @media (prefers-reduced-motion: reduce) { /* Fermo sul primo fotogramma: nessuna dissolvenza, nessun salto. */ .hero__fotogramma { opacity: 0; transition: none; } .hero__fotogramma:first-child { opacity: 1; } } /* IL FILMATO. Sta nello stesso posto dei fotogrammi, li copre quando è pronto e sfuma dentro in un secondo e mezzo — così il passaggio fra la fotografia dipinta dal server e il filmato non è uno scatto ma un cambio di luce. Sotto i 768px non esiste: la sorgente non viene nemmeno attaccata (lo decide assets/js/tiportoio.js), e questa riga è la seconda serratura sulla stessa porta, per il caso in cui la finestra venga ristretta a filmato già in corso. Chi ha chiesto meno movimento non lo vede mai. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 42%; opacity: 0; transition: opacity 1.5s var(--uscita); pointer-events: none; } .hero__video.e-visibile { opacity: 1; } @media (max-width: 767px) { .hero__video { display: none; } } @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } /* Telefono girato di lato: largo 844px, alto 390. Passa la soglia dei 768 ed è un telefono — con la hero alta uno schermo e la batteria che è quella. La larghezza da sola non distingue un portatile da un telefono coricato; l'altezza sì. */ @media (max-height: 30rem) and (orientation: landscape) { .hero__video { display: none; } } /* Quando il filmato è in scena i fotogrammi sotto non hanno più niente da fare: nessuna dissolvenza, nessun respiro. Non si vedrebbe comunque — ma sono tre immagini che animano dietro un video, e il portatile se ne accorge. Il carosello lo ferma il JavaScript; questa regola spegne l'animazione, che il JavaScript non tocca. */ .js .hero__foto[data-video-attivo] .hero__fotogramma.e-visibile { animation: none; } .hero__foto[data-video-attivo] .hero__fotogramma { transition: none; } /* Le foto sfumano già a --sfumata sul proprio lato sinistro; questo velo estende la sfumatura fino a coprire la colonna di testo a ogni larghezza. */ .hero__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--sfumata) 0%, var(--sfumata) 26%, rgba(242, 239, 232, .82) 46%, rgba(242, 239, 232, 0) 68%); } /* IL VELO SUL FILMATO E' PIU' LUNGO, E NON PER GUSTO. Le tre fotografie portano la sfumatura beige DIPINTA DENTRO sul proprio lato sinistro: il velo qui sopra la estende, non la crea. Il filmato quel beige non ce l'ha — è strada vera fino al bordo — e con lo stesso velo si vedevano gli alberi passare dietro "Ti porto io": leggibile, ma non più il campo calmo su cui la promessa è stata composta. Qui il beige pieno arriva al 34% invece che al 26% e sfuma più tardi: è lo stesso disegno, rifatto per una sorgente che non collabora. La colonna di testo è larga al massimo 30rem e finisce sotto il 42% della finestra: sta dentro la parte piena a ogni larghezza da 768px in su. */ .hero__foto[data-video-attivo]::after { background: linear-gradient(to right, var(--sfumata) 0%, var(--sfumata) 34%, rgba(242, 239, 232, .88) 52%, rgba(242, 239, 232, 0) 74%); } .hero__interno { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem); } .hero__testo { max-width: 30rem; } /* La colonna della hero è fatta di TRE gruppi, non di sette paragrafi: la promessa (manifesto + servizio), il fatto vivo (contatore + chi parte dopo), l'azione (bottone + note). Stretto dentro un gruppo, largo fra i gruppi: 16 · 40 · 8 · 24 · 12 · 4. Prima erano sei valori senza relazione (22,4 · 32 · 9,6 · 28 · 13,6 · 5,6) e niente pesava più di niente. */ .hero__servizio { margin-top: 1.4rem; font-size: 1.1875rem; line-height: 1.55; max-width: 27rem; } /* Col carattere di sistema al doppio il numerale veniva TAGLIATO A META', non rimpicciolito: una cifra sola non ha spazio di contrazione, e la riga non poteva andare a capo. `min-width: 0` da solo non bastava — serviva il ritorno a capo e un tetto al numerale legato alla larghezza disponibile. Sono le due cose che il sito esiste per dire: quanti ci sono e fino a quando. */ .contatore { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 2.5rem; } .contatore > * { min-width: 0; } .contatore__numero { font-family: var(--display); font-weight: 800; font-size: min(clamp(3.4rem, 7vw, 4.6rem), 20vw); line-height: .85; color: var(--corallo); letter-spacing: -.04em; font-variant-numeric: lining-nums; } .contatore__io { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1; color: var(--corallo); letter-spacing: -.02em; } .contatore__testo { font-family: var(--display); font-weight: 800; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -.01em; } .contatore--vuoto { display: block; margin-top: 2rem; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; max-width: 22ch; } .hero .bottone { margin-top: 1.5rem; } /* La Regola del Corpo Grande vale per la PROSA, non solo per il testo del corpo pagina: qui sotto c'erano nove frasi intere a 17 e 16px, ciascuna rimpicciolita per farla sembrare secondaria. Il secondario si fa col colore e con lo spazio; la misura resta 18px perché il lettore ha settant'anni. */ .hero__nota { margin-top: .75rem; font-size: 1.125rem; color: var(--inchiostro-tenue); } /* Chi non c'è adesso ma parte dopo: detto qui, non nascosto in fondo. */ .hero__ancora { margin-top: .5rem; font-size: 1.125rem; font-weight: 700; color: var(--inchiostro); } /* L'ora a cui la pagina ha letto l'orologio. Il dato più deperibile del sito dichiara la propria età — in coda alla nota, non su una riga propria: il mockup sotto al pulsante ne ha una sola. */ /* Nessun `nowrap` qui: al doppio del carattere "Aggiornato alle 11:19." misura 358px e da solo spingeva la pagina fuori da uno schermo da 320. Va a capo dopo "alle"; è l'ora a non doversi spezzare, e non si spezza. */ .hero__orologio { color: var(--inchiostro-tenue); opacity: .8; } .hero__orologio time { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } @media (max-width: 767px) { /* UNA SCENA SOLA, NON DUE BLOCCHI IMPILATI. Prima la fotografia era un elemento di flusso con un'altezza propria e il testo veniva dopo: fra i due correva un taglio netto, e la hero si leggeva come un'immagine incollata sopra un riquadro di panna invece che come la scena dentro cui sta la promessa. Adesso il testo le sta SOPRA, come sul desktop. Cambia il verso della sfumatura, non il mestiere che fa. */ .hero { display: block; } /* La fotografia è una fascia ancorata in alto, non il fondo dell'intera hero. Provata a riempire tutta l'altezza, la fascia diventava più alta che larga, `cover` passava a scalare sull'altezza e ritagliava ai lati una fetta stretta di alberi con mezza faccia sul bordo. Qui l'altezza è dichiarata, la fascia resta più larga che alta rispetto all'immagine, e il ritaglio torna prevedibile. La fascia è più alta della parte in chiaro: è questo che fa passare il testo sopra l'immagine invece che dopo. */ /* `overflow: hidden` non è decorazione: il respiro della hero ingrandisce la fotografia del 5,5%, e con la fascia ancorata in alto quel 5,5% sbordava di una decina di pixel SOTTO il velo — che copre la fascia, non ciò che ne esce. Restava una riga di fotografia cruda a tagliare in due il sottotitolo. Il ritaglio sta solo qui, sotto i 768px: più su la fascia consuma la timeline della parallasse, e un contenitore di ritaglio in mezzo la ucciderebbe in silenzio — è la Regola della Timeline Fuori dal Ritaglio, e questa è la riga che la farebbe scattare. */ .hero__foto { position: absolute; inset: 0 0 auto; height: clamp(15rem, 46vh, 24rem); overflow: hidden; } /* SI MOSTRA IL PEZZO DI FOTOGRAFIA IN CUI C'È LA SCENA. Le tre fotografie portano la sfumatura beige INCORPORATA sul proprio lato sinistro: serve al desktop, dove il testo ci sta sopra in orizzontale. Qui non serve a niente, e mostrarla vuol dire quattro decimi di banda vuota con le persone schiacciate contro il bordo destro — l'avanzo di un'altra composizione, non una fotografia di persone. In questa fascia `cover` scala sull'altezza e ritaglia ai lati da sé: non serve allargare l'immagine a mano, basta dirgli quale parte tenere. All'82% la finestra cade fra il 36% e il 92% dell'originale — dentro ci stanno l'auto, l'autista e la persona che accompagna; fuori resta tutta la sfumatura incorporata. */ .hero__foto img { object-position: 82% 50%; } /* IL VELO CHE SALE. Sul desktop la sfumatura corre da sinistra a destra e nasce dentro le fotografie stesse; qui corre dal basso in alto ed è tutta nostra. In cima è assente — lì la scena si vede per quello che è. Dove comincia il testo è già oltre il 90%, cioè il titolo ha sotto di sé lo stesso contrasto che aveva sul blocco di panna: la fotografia si intravede DIETRO le lettere, non attraverso. È la ragione per cui la vecchia regola vietava il testo sull'immagine, ed è la ragione per cui adesso può starci. */ .hero__foto::after { background: linear-gradient(to bottom, rgba(242, 239, 232, 0) 0%, rgba(242, 239, 232, .05) 32%, rgba(242, 239, 232, .52) 54%, rgba(242, 239, 232, .93) 72%, var(--sfumata) 88%); } /* Il bordo alto del testo è anche il confine della fotografia in chiaro. Sta al 70% circa della fascia, dove il velo è ormai pieno. */ .hero__interno { padding-block: clamp(10.5rem, 32vh, 17rem) 2.5rem; } .hero__testo { max-width: none; } } /* Schermi da 320px: qui ogni pixel verticale è conteso, e il contatore — il momento che deve arrivare per primo — cadeva sotto la piega. Si stringe il verticale della hero. Deve stare DOPO il blocco 767px: stessa specificità, vince l'ultimo. */ /* La regola c'era già e non bastava: su 320×568 il contatore chiudeva a 575px di 568 — sotto la piega per SETTE pixel — e il pulsante 91px più giù. Il difetto stava nella `10.5rem` della fotografia: una misura fissa in un blocco che esiste per governare l'altezza. Adesso la foto si misura anche sull'asse scarso, come già fanno il manifesto e il numerale in orizzontale; il resto è il verticale che si stringe di un altro po', mai il corpo del testo e mai i bersagli. Verificato: a 320×568 il pulsante chiude a ~552px, a 360×640 a ~600px. */ @media (max-width: 359px), (max-height: 700px) and (orientation: portrait) { /* Su uno schermo corto si stringono insieme la fascia e il bordo alto del testo, che è quanto di fotografia resta in chiaro. Mai sotto le 8rem di fascia: più giù non ci sta una faccia. */ .hero__foto { height: clamp(11rem, 38vh, 15rem); } .hero__interno { padding-block: clamp(8rem, 26vh, 11rem) 1.25rem; } .manifesto { font-size: min(2.6rem, 21vw); } .hero__servizio { margin-top: .7rem; font-size: 1.125rem; } .contatore { margin-top: .95rem; } .hero .bottone { margin-top: 1.1rem; } /* Il logotipo cede gli ultimi sedici pixel: è l'unico elemento della testata che si può rimpicciolire senza toccare né una parola da leggere né un bersaglio da colpire. */ .testata__interno { padding-block: .45rem; } .testata__marchio img { width: 112px; } } /* -------------------------------------------------------------------------- TELEFONO IN ORIZZONTALE Qui la misura scarsa non è la larghezza, è l'altezza: 375px in tutto, di cui la testata si prendeva il 44% e la hero una schermata e mezza. Tutto il sistema è tarato sulla larghezza, e questa è l'unica scena in cui quella taratura non basta. Si comprime il verticale — mai il corpo del testo, mai i bersagli — così il contatore entra nella prima schermata. -------------------------------------------------------------------------- */ @media (max-height: 30rem) and (orientation: landscape) { .testata__interno { grid-template-columns: auto 1fr auto; grid-template-areas: "marchio nav azione"; padding-block: .4rem; gap: .4rem 1rem; } .testata__marchio img { width: 116px; } .testata__endorsement { font-size: 1.0625rem; } /* Mai `justify-content: flex-end` qui: su una riga che deborda spinge la prima voce oltre il bordo sinistro di una striscia che non scorre, e "Autisti" diventava irraggiungibile. Si parte da sinistra, sempre. */ .testata__nav ul { justify-content: flex-start; } .testata__nav a { min-height: 44px; padding-block: .35rem; } /* La foto torna al vivo sul lato: in orizzontale c'è larghezza da vendere e l'altezza serve tutta al testo. */ .hero { display: block; } .hero__foto { position: absolute; inset: 0; height: auto; } /* Il ritaglio del verticale va disfatto: qui la composizione torna orizzontale come sul desktop, il testo sta a SINISTRA della fotografia, e la sfumatura incorporata su quel lato è di nuovo quello che lo tiene leggibile invece di essere beige sprecato. Uno schermo largo 740px passa anche per la regola dei 767, che sta più in su nel foglio: senza questa riga si portava dietro il ritaglio dell'82%, e le ultime parole del sottotitolo finivano su una giacca nera. */ .hero__foto img { object-position: 72% 42%; } .hero__foto::after { background: linear-gradient(to right, var(--sfumata) 0%, var(--sfumata) 26%, rgba(242, 239, 232, .82) 46%, rgba(242, 239, 232, 0) 68%); } .hero__interno { padding-block: .5rem .65rem; } .hero__testo { max-width: 34rem; } /* IL PARAGRAFO SI ALLARGA INVECE DI RIMPICCIOLIRSI. Qui la misura scarsa è l'altezza, e il pezzo che ne consumava di più non era un titolo: erano gli 88px del sottotitolo, tre righe da 19px tenute strette dai 27rem che gli dà la regola generale. Quei 27rem sono giusti in verticale, dove servono a non far correre l'occhio; in orizzontale sono la ragione per cui il pulsante finiva fuori. Sciolto il tetto, il paragrafo prende i 34rem della colonna e sta su due righe: trenta pixel restituiti senza togliere una parola e senza scendere di un punto — che è l'unico modo consentito di guadagnare spazio qui. */ .hero__servizio { max-width: none; } /* Il manifesto si misura sull'altezza disponibile, non solo sulla larghezza. */ /* Su 740×360 — un telefono qualunque girato — il pulsante chiudeva a 368px di 360: otto pixel sotto la piega, che non si leggono come una scelta ma come un taglio. Ogni misura legata all'altezza scende di un punto e il pulsante rientra con una trentina di pixel di margine, che è quanto serve perché regga anche con la barra del browser in campo. */ .manifesto { font-size: min(clamp(3.2rem, 8vw, 5.5rem), 12vh); } .hero__servizio { margin-top: .5rem; } .contatore { margin-top: .55rem; } .contatore__numero { font-size: min(clamp(3.4rem, 7vw, 4.6rem), 14vh); } .hero .bottone { margin-top: .55rem; } .hero__nota, .hero__ancora { margin-top: .4rem; } /* Il respiro fra le fasce si dimezza: in orizzontale un passo intero è mezzo schermo di niente. */ :root { --passo: clamp(2rem, 5vh, 3rem); } } /* -------------------------------------------------------------------------- AUTISTI DISPONIBILI -------------------------------------------------------------------------- */ /* La Regola del Passo Direzionale. Un solo passo, ma non simmetrico: le fasce che proseguono lo stesso discorso chiudono con mezzo passo, così la cucitura più larga della pagina — quella fra "ecco le persone" e tutto il resto — resta una sola e si sente. Prima ogni cucitura misurava 112px, sei volte di fila, e la pagina non aveva un culmine. */ /* Il contatore e le schede sono UN argomento diviso in due fasce ("ce ne sono due" / "eccoli"): la cucitura fra loro va stretta, non larga. Il passo intero sta sotto, dove il discorso cambia davvero. Così a 1440px il bordo della prima scheda entra nella prima schermata invece di restarne fuori per 7px. */ .autisti { background: var(--carta); padding-block: var(--passo-mezzo) var(--passo-mezzo); } /* Le colonne le decide lo spazio, non un elenco di soglie. La misura di 21rem è quello che serve a una scheda per restare una scheda; `min(100%, …)` la lascia rimpicciolire sotto quella soglia invece di sfondare. Così un tablet in verticale e un telefono in orizzontale — due larghezze che nessun breakpoint copriva — ottengono due colonne da soli, invece di una scheda larga 757px alta come tutto lo schermo. */ .autisti__elenco { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); } /* Uno e due autisti sono i casi frequenti e hanno una misura propria: una scheda sola non deve diventare larga quanto la pagina. Vale solo dove c'è davvero spazio; più stretto, ci pensa la regola qui sopra. */ @media (min-width: 820px) { /* Un solo autista: la scheda si centra invece di restare a sinistra con 764px di vuoto alla sua destra. DESIGN.md chiede che il caso singolo si legga come intenzionale — allineato a sinistra leggeva come due schede mancanti. */ .autisti__elenco--1 { grid-template-columns: minmax(0, 26rem); justify-content: center; } .autisti__elenco--2 { grid-template-columns: repeat(2, minmax(0, 24rem)); justify-content: center; } } /* Nel mockup la scheda non ha filetto: è bianca sul bianco della fascia e la tiene su l'ombra, più un velo di panna appena percettibile ai bordi. */ .autista { display: flex; flex-direction: column; background: var(--carta); border: 1px solid rgba(7, 14, 21, .045); border-radius: var(--r-scheda); overflow: hidden; box-shadow: var(--ombra-posata); container: autista / inline-size; transition: transform .35s var(--uscita), box-shadow .35s var(--uscita); } @media (hover: hover) { .autista:hover, .autista:focus-within { transform: translateY(-4px); box-shadow: var(--ombra-alta); } } .autista__foto { aspect-ratio: 4 / 3; background: var(--panna-scura); } .autista__foto img { width: 100%; height: 100%; object-fit: cover; } /* Autista di cui non abbiamo ancora il ritratto: uno stato progettato, non un buco. */ .autista__foto--assente { display: grid; place-items: center; gap: .5rem; } .autista__iniziale { font-family: var(--display); font-weight: 800; font-size: 4.5rem; line-height: 1; color: var(--corallo); letter-spacing: -.04em; } .autista__attesa-foto { font-size: 1rem; color: var(--inchiostro-tenue); } .autista__corpo { display: flex; flex-direction: column; gap: .85rem; padding: 1.15rem min(1.25rem, 20px) 1.35rem; } /* Un nome lunghissimo o senza spazi (un cognome composto, un indirizzo finito nel campo sbagliato) va a capo invece di uscire dalla scheda. */ .autista__nome { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; overflow-wrap: break-word; } .autista__nome .io { color: var(--corallo); margin-right: .15em; } .autista__dati { margin: 0; display: flex; flex-direction: column; gap: .45rem; } .autista__riga { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0; min-width: 0; /* Gli orari sono cifre incolonnate fra una scheda e l'altra. */ font-variant-numeric: tabular-nums lining-nums; font-size: 1.0625rem; /* 17px: soglia dei dati di scheda */ line-height: 1.35; color: var(--inchiostro-tenue); overflow-wrap: break-word; } .autista__riga .icona { width: 20px; height: 20px; flex: none; } /* Il numero è un dato che si legge e si copia: cifre incolonnate, colore del testo, sottolineato solo al passaggio perché resta anche un collegamento. */ .autista__riga--numero a { color: var(--inchiostro); text-decoration: none; font-variant-numeric: tabular-nums lining-nums; /* L'area toccabile arriva a 44px senza spostare la riga: il margine negativo restituisce lo spazio che il padding si prende. Questo numero lo tocca chi ha settant'anni e la mano ferma solo a volte. */ padding-block: .7rem; margin-block: -.7rem; } @media (hover: hover) { /* Il numero non si sottolinea: prende il colore dell'azione. Nel vocabolario di questo sito il corallo vuol dire "questo si fa", ed e un'informazione piu utile di una riga sotto le cifre. */ .autista__riga--numero a:hover { color: var(--corallo-azione); } } .autista__riga--stato { color: var(--inchiostro); font-weight: 700; } /* Il colore non parla mai da solo: accanto al pallino c'è sempre l'etichetta. Anche la forma parla: pieno = adesso, vuoto = più tardi. */ .pallino { width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(14, 122, 60, .15); } .pallino--piu-tardi { background: transparent; border: 2px solid var(--inchiostro-tenue); box-shadow: none; } .autista__azioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-top: .2rem; } .autista__azioni .bottone { min-width: 0; } /* Ultima rete: al carattere estremo l'etichetta va a capo, non sparisce. */ .autista__azioni .bottone > span { overflow-wrap: anywhere; } /* La scheda si misura da sé — e si misura sul TESTO. La soglia è in em, così cresce insieme al carattere impostato sul telefono: chi legge in corpo grande vede le due azioni impilate, non tagliate fuori dalla scheda. */ @container autista (min-width: 20.5em) { .autista__azioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } .autista__azioni .bottone { padding-inline: min(1rem, 16px); } } /* Un autista raggiungibile in un modo solo: il bottone che c'è prende tutta la riga, invece di restare a metà scheda accanto a un vuoto. */ .autista__azioni.autista__azioni--sola { grid-template-columns: minmax(0, 1fr); } /* Stato: nessun autista disponibile */ /* Lo stato vuoto è un oggetto come gli altri, e porta le stesse due ombre: era l'unico riquadro della pagina senza profondità, tenuto insieme da un filetto su un fondo che differiva dell'1,06:1. Il momento in cui la pagina non ha nient'altro da offrire non può essere anche il meno definito. */ .nessuno { max-width: 36rem; background: var(--panna); border: 1px solid var(--linea); border-radius: var(--r-scheda); box-shadow: var(--ombra-posata); padding: clamp(1.5rem, 4vw, 2.25rem); display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; } .nessuno__titolo { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; } .nessuno p:not(.nessuno__titolo) { color: var(--inchiostro-tenue); } /* I due canali dell'associazione, gli stessi che porta ogni scheda. Vanno a capo da soli sulle scatole strette. */ .nessuno__azioni { display: flex; flex-wrap: wrap; gap: .55rem; align-self: stretch; } .nessuno__azioni .bottone { flex: 1 1 11rem; } /* -------------------------------------------------------------------------- COME FUNZIONA -------------------------------------------------------------------------- */ .funziona { padding-bottom: var(--divario); } .intestazione--funziona { align-items: center; } /* Nessun grado display eredita l'interlinea del corpo. A 30px il testo display con interlinea 1,6 galleggia: le parole smettono di leggersi come un blocco solo, e la catena TI → PORTO → IO perdeva la propria banda ottica. Da qui in giù ogni grado display dichiara la propria. */ .catena { line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.6rem, 1.6vw, 1.4rem); font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -.02em; } .catena__freccia { position: relative; width: clamp(2.2rem, 5vw, 4rem); height: 2px; background: repeating-linear-gradient(to right, var(--corallo) 0 7px, transparent 7px 12px); } .catena__freccia::after { content: ''; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--corallo); border-right: 2px solid var(--corallo); transform: translateY(-50%) rotate(45deg); } .passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .passo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--linea); } @media (min-width: 860px) { .passi { grid-template-columns: repeat(3, 1fr); /* LA CELLA SI MISURA DA SÉ, come la scheda autista. La colonna è un contenitore di misura: quanto spazio abbia davvero una cella non lo dice la finestra, lo dice il pannello dopo aver tolto il proprio bordo interno e diviso per tre. Vedi la query qui sotto. */ container: passi / inline-size; } /* IL BORDO INTERNO STA SU TUTTE E TRE, E L'ELENCO SI SPORGE. Prima la prima cella perdeva il proprio bordo interno per restare sulla guida del titolo — giusto come intenzione — ma nessuno le restituiva quella larghezza: tre colonne uguali di fuori, contenuti disuguali di dentro. Misurato a 1280px: 222px di testo nella prima colonna, 190 nelle altre due, cioè la stessa frase composta su tre misure diverse e spezzata in punti diversi. Adesso il bordo interno ce l'hanno tutte e tre e a sporgersi è l'elenco, dei suoi stessi millimetri: il testo della prima cella torna esattamente sulla guida, l'ultimo chiude sulla guida opposta, e le tre misure sono identiche. Il pannello ha sempre più bordo interno della cella (3vw contro 2,4vw, e 56px contro 32px al massimo), quindi la sporgenza resta dentro la carta. */ .passi { margin-inline: calc(-1 * clamp(1rem, 2.4vw, 2rem)); } .passo { padding: 0 clamp(1rem, 2.4vw, 2rem); border-top: 0; border-left: 1px solid var(--linea); } .passo:first-child { border-left: 0; } /* SOTTO LE 70rem DI ELENCO IL DISEGNO SCENDE SOTTO IL TESTO. Le tre colonne comparivano a 860px, ma a quella larghezza una cella ha ~220px di bordo interno compreso e il disegno ne prende 120: al testo ne restavano 89. Verificato a 900px: «Contatta» andava a capo dentro la parola — «Contatt / a» — e con lei «accompag/narti» e «spostamen/to». Una parola spezzata a metà è il difetto più grave che questa pagina possa avere, perché il suo pubblico legge lettera per lettera. La soglia sta sull'ELENCO e non sulla finestra perché è l'elenco a sapere quanto spazio ha: 70rem di elenco sono ~317px di cella, cioè i 120 del disegno più una misura di testo che regge una frase. Sotto, la cella ruota: testo in alto, disegno in fondo. `space-between` era già lì e in colonna fa il resto — i tre disegni si posano sulla stessa riga di base perché le celle sono alte uguali. */ @container passi (max-width: 70rem) { .passo { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } } .passo__numero { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; } .passo__testo h3 { margin-top: .35rem; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; color: var(--corallo-azione); } /* Tre righe corte, non due piene e una parola sola. Su misure di 190-270px queste frasi lasciavano l'ultima parola da sola in fondo — «oggi.», «contatto.» — che in un elenco di tre passi si legge come un intoppo. */ .passo__testo p:last-child { margin-top: .5rem; color: var(--inchiostro-tenue); max-width: 30ch; text-wrap: balance; } .passo { min-width: 0; } .passo > * { min-width: 0; } .passo__disegno { flex: none; width: clamp(84px, 14vw, 120px); color: var(--inchiostro); } .passo__disegno svg { width: 100%; height: auto; } /* -------------------------------------------------------------------------- SERVIZI E TARIFFE -------------------------------------------------------------------------- */ /* LA SEQUENZA DELLE FASCE, dall'alto — riquadri di carta sul bianco: testata bianco · hero sfumata al vivo · autisti bianco (schede bianche con ombra) · come funziona PANNA · servizi e tariffe due riquadri PANNA · diventa autista PANNA SCURA · associazione PANNA CALDA · piè di pagina inchiostro al vivo. Le due sole fasce che vanno da bordo a bordo sono le due estreme: la fotografia in cima e il nero in fondo. In mezzo, riquadri. */ .offerta { padding-bottom: var(--divario); } /* La griglia È il pannello: due riquadri affiancati, senza scatola attorno. Il bordo interno lo mettono i riquadri, quindi qui si azzera. */ /* DUE RIQUADRI ALLA STESSA ALTEZZA, e lo scarto messo dove serve. Il problema non era mai lo stiramento: era che il riquadro di sinistra conteneva sei etichette nude e restava con 120px di vuoto in fondo, tappati da una fotografia alta 514px su 218 di larghezza. Riempito il contenuto con gli esempi, i due riquadri differiscono di 16px — e a quel punto pareggiarli non costa niente. Lo scarto residuo NON si accumula in fondo: `margin-top: auto` sul collegamento di chiusura lo raccoglie tutto sopra il link, così i due "Scopri…" si allineano sulla stessa riga e chiudono la coppia insieme. Il vuoto che c'era diventa il respiro che precede l'azione. */ .offerta__griglia { display: grid; gap: var(--divario); padding: 0; align-items: stretch; } @media (min-width: 940px) { .offerta__griglia { grid-template-columns: 1fr 1fr; } } .riquadro { min-width: 0; display: flex; flex-direction: column; background: var(--panna); border-radius: var(--r-pannello); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.6vw, 2.5rem); } /* IL RITMO INTERNO DEL RIQUADRO, scritto una volta per tutti e due. Prima ogni riquadro portava le proprie misure e i due non coincidevano: testa → corpo valeva 24px a sinistra e 22 a destra, e corpo → chiusura 28px a sinistra e ZERO a destra, dove "Scopri tutte le tariffe" stava incollato alla nota sopra. Due pixel non si vedono; zero sì. Sono la stessa relazione in due scatole, quindi è una regola sola. */ .riquadro > .sommario + * { margin-top: 1.5rem; } /* `auto` con un minimo garantito: il link scende in fondo al riquadro e i due si allineano, ma quando il contenuto arriva quasi a toccarlo — o quando la colonna si impila su telefono e ogni riquadro è alto quanto il suo testo — restano comunque i 28px di stacco. Il solo `auto` lì avrebbe dato zero. */ .riquadro > .collegamento { margin-top: auto; padding-top: 1.75rem; } /* LA CADENZA DELL'ELENCO: stretto dentro la voce, largo fra una voce e l'altra. Prima erano sei intervalli identici da 46,6px — un ritmo che non raggruppa niente e in cui tutto pesa uguale. Il glifo si allinea alla riga del titolo, non al centro del blocco: con due righe di testo, centrato, scivolava a metà fra le due e smetteva di appartenere al titolo. */ .servizi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; } .servizi li { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; } .servizi .icona { color: var(--corallo); flex: none; } .servizi__testo { min-width: 0; } .servizi__voce { display: block; font-size: 1.125rem; line-height: 1.35; } /* Gli esempi restano a 18px come il titolo della voce: sono prosa, e la Regola del Corpo Grande non fa sconti alle didascalie. A distinguerli è il colore, che è il modo giusto di dire "secondario" a chi legge al sole. */ .servizi__esempi { display: block; margin-top: .1rem; font-size: 1.125rem; line-height: 1.45; color: var(--inchiostro-tenue); } /* Wide content scrolls inside its own box: la pagina non si muove mai in orizzontale, nemmeno col carattere impostato al massimo. E DEVE VEDERSI CHE SCORRE. Su schermo stretto la tabella scorreva in silenzio: chi la guardava vedeva "Corsa in città" e un bordo, e non aveva modo di sapere che a destra c'era la colonna degli importi — cioè l'unica ragione per cui la tabella esiste. Le due ombre qui sotto compaiono solo quando c'è davvero altro da quella parte: i due veli in `local` scorrono col contenuto e coprono l'ombra corrispondente quando si tocca il bordo, quelle in `scroll` restano ferme. Nessun JavaScript, e nessuna ombra che mente. */ .tariffe__scorrevole { overflow-x: auto; background: linear-gradient(to right, var(--panna) 40%, rgba(250, 248, 245, 0)) left / 2.5rem 100% no-repeat local, linear-gradient(to left, var(--panna) 40%, rgba(250, 248, 245, 0)) right / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(7, 14, 21, .14), rgba(7, 14, 21, 0)) left / .85rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(7, 14, 21, .14), rgba(7, 14, 21, 0)) right / .85rem 100% no-repeat scroll; } .tariffe { width: 100%; border-collapse: collapse; } /* Le celle: filetti orizzontali e respiro. Nessun bordo verticale, nessuna zebratura — la tabella si regge sulle righe. */ .tariffe th, .tariffe td { text-align: left; padding: .85rem .25rem; border-top: 1px solid var(--linea); } .tariffe thead th { border-top: 0; padding-top: 0; font: 700 1rem/1.3 var(--corpo); color: var(--inchiostro-tenue); letter-spacing: .04em; text-transform: uppercase; } /* L'intestazione sta sopra la propria colonna, non accanto. "TARIFFA INDICATIVA" era allineata a sinistra sopra una colonna di importi allineati a destra: due bordi diversi per la stessa colonna, e l'occhio non sapeva a quale dei due credere. Un'intestazione di colonna prende sempre l'allineamento dei dati che intesta. */ .tariffe thead th:last-child { text-align: right; } .tariffe tbody th { font-weight: 400; font-size: 1.0625rem; } /* Solo gli importi prendono il display: sono la colonna che si legge in verticale, e le cifre tabulari la tengono incolonnata davvero — con quelle proporzionali la virgola decimale ballava di 42px. */ .tariffe td { text-align: right; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 1.125rem; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; } .tariffe tbody tr:last-child th, .tariffe tbody tr:last-child td { border-bottom: 1px solid var(--linea); } .tariffe__nota { margin-top: 1.1rem; color: var(--inchiostro-tenue); font-size: 1.125rem; max-width: 42ch; } /* -------------------------------------------------------------------------- DIVENTA AUTISTA -------------------------------------------------------------------------- */ .invito { padding-bottom: var(--divario); } .invito__interno > * { min-width: 0; } .invito__interno { position: relative; display: grid; align-items: stretch; background: var(--panna-scura); /* La fotografia arriva a filo del riquadro sui tre lati: il bordo interno lo prende solo la colonna di testo. */ padding: 0; overflow: hidden; } .invito__testo { padding: clamp(1.75rem, 3.6vw, 3rem) clamp(1.25rem, 3vw, 3.5rem); align-self: center; } @media (min-width: 860px) { .invito__interno { grid-template-columns: 1.02fr .98fr; } } .invito__testo p { margin-top: 1.2rem; max-width: 40ch; font-size: 1.1875rem; } .invito__testo .bottone { margin-top: 1.75rem; } /* IL TAGLIO A LUNA. Il bordo sinistro della fotografia non è dritto: è un arco che sporge verso il testo, e appena più a sinistra corre lo stesso arco in corallo. Non è un ornamento appoggiato sopra — è la forma stessa del ritaglio, ripetuta due volte a due millimetri di distanza. */ /* Il raggio orizzontale è in PIXEL, non in percentuale: in percentuale l'arco si allargava con la colonna e la fotografia diventava una lente. Quello che serve è una gobba dolce — circa 120px di sporgenza su 320 di altezza, come nel mockup — e una gobba non cresce con la scatola che la contiene. */ .invito__foto { position: relative; margin: 0; min-height: 20rem; } .invito__foto img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; /* 25% e non 45%: la fascia è 1,8:1 e la fotografia 4:3, quindi il ritaglio scarta 132px in verticale. A 45% ne toglieva 59 dall'alto e tagliava la fronte a lui e i capelli a lei. La regola qui è che il taglio si prende dal BASSO — dove c'è marciapiede — non dalle teste. */ object-position: 58% 15%; border-radius: var(--r-luna) 0 0 var(--r-luna) / 50% 0 0 50%; } /* L'arco sborda a destra di 2rem oltre la fotografia. A riposo non si vede — il pannello lo taglia — ma serve mentre la luna è chiusa: senza, fra il bordo destro del corallo e il bordo del pannello restava una fessura di panna scura, e la "porta chiusa" aveva uno spiraglio. */ .invito__arco { position: absolute; inset: 0 -2rem 0 0; z-index: 0; background: var(--corallo); border-radius: var(--r-luna) 0 0 var(--r-luna) / 50% 0 0 50%; translate: clamp(-30px, -1.8vw, -16px) 0; } /* ========================================================================== LA FOTOGRAFIA DELLA FASCIA "DIVENTA AUTISTA" Qui c'era LA LUNA CHE SI APRE: l'arco corallo copriva tutta la fotografia e si ritirava verso sinistra mentre scorrevi, legato a `animation-timeline: view()`. Tecnicamente funzionava — verificato in Chrome, la timeline era viva e il ritaglio si muoveva davvero — ed è stata tolta lo stesso, su richiesta del committente, per una ragione che sta nei numeri: l'intervallo era `entry 10% cover 45%`, cioè la porta finiva di aprirsi quando la fascia aveva ancora il bordo alto a 300px dal bordo alto della finestra. A quel punto la sezione è in fondo allo schermo e chi scorre sta ancora leggendo Servizi e tariffe. Del gesto non si vedeva l'apertura: si vedeva la coda, un blocco corallo che scattava via in periferia dello sguardo. E per un attimo l'arco corallo — che è un elemento fisso della composizione — era indistinguibile dallo stato di un'animazione. Al suo posto la fotografia usa la comparsa del sistema, `scala`, la stessa delle schede autista e dei riquadri: dissolvenza e un filo di scala, una volta sola, quando entra. Non è una versione ridotta della luna, è la grammatica del sito applicata anche qui — dove prima c'era un'eccezione. L'arco resta dov'era, fermo: la sua forma non dipendeva dal movimento. ========================================================================== */ /* Sotto gli 860px le due colonne si impilano: la luna guarderebbe nel vuoto, quindi il taglio si raddrizza. E la fotografia smette di essere una fascia impilata sotto il testo. Era lo stesso difetto della hero, nello stesso posto del foglio: un rettangolo con il bordo alto netto, appiccicato in fondo a un riquadro di panna scura, che si legge come due oggetti invece che come uno. La cura è la stessa — la fotografia passa DIETRO, il velo scende dal suo bordo alto, e il testo le sta sopra. Cambia solo il colore del velo, che qui è la panna scura del pannello e non la sfumata della pagina. */ @media (max-width: 859px) { .invito__arco { display: none; } .invito__foto { position: absolute; inset: auto 0 0 0; min-height: 0; aspect-ratio: auto; height: clamp(9rem, 48vw, 20rem); overflow: hidden; } /* Il ritaglio scende: nella fascia si vede la metà bassa, e le teste devono cadere lì e non nella parte velata. */ /* Il ritaglio parte dal bordo alto della fotografia: lassù c'è appena un dito d'aria sopra i capelli, e ogni percentuale in più se la mangiava. Quello che si perde è marciapiede, in fondo, che è esattamente quello che questa inquadratura può permettersi di perdere. */ .invito__foto img { border-radius: 0; object-position: 50% 0%; } /* IL VELO CHE SCENDE. Speculare a quello della hero: là saliva verso il testo, qui scende da esso. In cima è la panna scura piena, in fondo è assente e la scena si vede per quello che è. */ .invito__foto::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; /* I primi punti sono PIENI, non già in discesa. Quanto la fascia salga sopra il pulsante dipende da come va a capo il testo, e a 320px il titolo prende tre righe e la sovrapposizione torna: dieci pixel di panna scura piena in cima assorbono lo scarto a qualunque larghezza, senza che il velo debba indovinare. */ /* IL VELO SI FERMA SOPRA LE TESTE. Prima era panna scura PIENA per il primo 8% e ancora al 72% al 20%: su una fascia alta 180px vuol dire quattordici pixel opachi e cinquanta di velo pesante, cioè esattamente la banda in cui cadono le due teste. Il risultato era una fotografia decapitata — non dal ritaglio, dal velo che le stava sopra. Il velo serviva a coprire il testo se fosse sceso sulla fascia. Misurato a 375px e a 320px, il pulsante chiude 15 e 13 pixel sopra il bordo alto della fotografia: quella sovrapposizione oggi non c'è. Resta l'assicurazione — un velo corto e leggero che tiene leggibile una discendente se un giorno il testo crescesse — e si spegne entro il 16%, ben prima dei visi. */ background: linear-gradient(to bottom, rgba(236, 232, 227, .92) 0%, rgba(236, 232, 227, .55) 4%, rgba(236, 232, 227, .22) 9%, rgba(236, 232, 227, 0) 16%); } /* Lo spazio che il testo lascia sotto di sé È la fotografia in chiaro: la stessa idea del bordo alto della hero, girata di sotto. Se il lettore ingrandisce il carattere il testo cresce e la fotografia resta dov'è, invece di essere spinta fuori dal pannello. LO SPAZIO È PIÙ ALTO DELLA FASCIA, di una quindicina di pixel. Al primo tentativo era più basso e la fascia saliva a scavalcare il pulsante: il velo lì è già a metà, e "Candidati come autista" si leggeva in bianco su un marciapiede. Un pulsante deve restare un pulsante, non diventare una scritta ritagliata su una fotografia. Il bordo alto della fotografia comincia SOTTO l'ultima cosa che si tocca. */ .invito__testo { padding-bottom: clamp(10rem, 52vw, 21rem); } } /* -------------------------------------------------------------------------- CHI C'È DIETRO — For President -------------------------------------------------------------------------- */ .garanzia { padding-bottom: var(--divario); } /* `align-items: stretch`, non `center`. Centrati, i due blocchi partivano a 38px di distanza l'uno dall'altro — il marchio a un'altezza, i titoli delle promesse a un'altra — e il filetto in mezzo era alto quanto il più corto dei due invece che quanto la fascia. Stirati, le due metà cominciano insieme e il filetto le separa per intero. */ .garanzia__griglia { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; } @media (min-width: 1040px) { .garanzia__griglia { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); } } .garanzia__griglia > * { min-width: 0; } /* GRIGLIA, NON FLEX-WRAP. In flex la descrizione ha come base la propria larghezza a riga unica — quasi 800px — quindi la riga andava SEMPRE a capo, a qualunque larghezza: il marchio finiva sopra e il testo sotto, col filetto verticale rimasto appeso sotto la "FP" a separare niente. In griglia le due colonne non vanno a capo: il marchio tiene la sua misura, il testo manda a capo dentro la propria, e il filetto sta dove ha un senso — fra due cose affiancate. */ .garanzia__ente { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1.25rem; min-width: 0; } .garanzia__ente > * { min-width: 0; } /* SEGNAPOSTO tipografico finché non arriva il marchio dell'associazione: nel mockup è un glifo nero, senza scatola. Quando il file esiste, questo

diventa un e la riga qui sotto sparisce senza toccare altro. */ .garanzia__marchio { font-family: var(--display); font-weight: 800; /* La Regola del Tetto in vw vale anche per il marchio. Col carattere di sistema al doppio su uno schermo da 320px la "FP" arrivava a 100px e lasciava 57px al nome dell'associazione: il glifo cresceva a spese dell'unica cosa che si deve leggere. */ font-size: min(3.25rem, 16vw); line-height: 1; letter-spacing: -.06em; color: var(--inchiostro); /* Il glifo si allinea otticamente alla maiuscola di "For President", non al bordo del blocco: le due lettere hanno corpi molto diversi e il pareggio matematico si legge come uno sfasamento. */ margin-top: .1em; } /* Il filetto verticale del mockup fra il marchio e il nome. Adesso che la riga non va più a capo, sta sempre fra due cose affiancate — prima restava appeso sotto la "FP" a separare niente. */ .garanzia__ente > div { padding-left: 1.25rem; border-left: 1px solid var(--linea); } .garanzia__nome { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; } /* Solo la descrizione, non il marchio: `.garanzia__ente p` prendeva anche `.garanzia__marchio`, che è un

fratello, e lo spegneva a grigio 3:1. */ /* 44ch come ogni altro sommario del sistema. Sotto i 1040px le due metà si impilano e questa descrizione si stendeva su una riga sola da 85 caratteri: ben oltre la misura in cui l'occhio ritrova l'inizio della riga dopo. */ .garanzia__ente > div p { margin-top: .3rem; color: var(--inchiostro-tenue); font-size: 1.125rem; line-height: 1.5; max-width: 44ch; } .garanzia__ente strong { color: var(--inchiostro); } /* Le tre promesse. Icona corallo, titolo, tre righe: la griglia del mockup. Regge perché la prima delle tre è un fatto verificabile — gli autisti sono soci scelti dall'associazione — e le altre due lo accompagnano. */ .garanzia__promesse { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); } @media (min-width: 720px) { .garanzia__promesse { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Il filetto fra le due metà corre per tutta la fascia — la colonna è stirata dalla griglia — mentre le tre promesse restano appese in alto. Un filetto alto quanto il testo più corto sembra una svista; alto quanto la fascia è una divisione. */ @media (min-width: 1040px) { .garanzia__promesse { padding-left: clamp(1.5rem, 2.6vw, 2.5rem); border-left: 1px solid var(--linea); align-content: start; } } .garanzia__promessa { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; } .garanzia__promessa > * { min-width: 0; } /* Il tratto si misura RESO, non dichiarato. Le icone del sistema sono 22px su un viewBox da 24 con tratto 2, cioè 1,83px a schermo. A 38px lo stesso tratto 2 ne darebbe 3,2 — e 1,7 ne dava comunque 2,7, il 47% più grasso del resto della famiglia. 1,35 rende 2,14px: appena più corposo, come si conviene a un glifo più grande, ma della stessa mano. */ .icona--grande { width: 38px; height: 38px; flex: none; color: var(--corallo); stroke-width: 1.35; } /* Grado `voce` (18px/800), non 17px: il titolo era della stessa misura del testo sotto e si reggeva solo sul peso. E 17px in Gabarito 800 non è un grado del sistema — `voce` sì, ed è nato per questo ruolo. */ .garanzia__promessa h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em; } /* La Regola del Corpo Grande non fa sconti alle didascalie: sono frasi intere e restano a 18px. A separarle dal titolo bastano il colore e il peso. */ .garanzia__promessa p { margin-top: .35rem; color: var(--inchiostro-tenue); font-size: 1.125rem; line-height: 1.5; } /* -------------------------------------------------------------------------- PIÈ DI PAGINA -------------------------------------------------------------------------- */ .pie { background: var(--inchiostro); color: #fff; /* Mezzo passo sopra, non un passo intero: quello era la misura del vecchio sistema a bande. Oggi la fascia precedente chiude con `--divario`, e 104px di nero prima della prima parola erano un quinto dell'intero pie. */ padding-block: var(--passo-mezzo) max(1.5rem, env(safe-area-inset-bottom)); /* Il chiaro su scuro guadagna peso ottico e perde le contrograzie per alone: si compensa su tutti e tre gli assi — un filo di spaziatura, un filo d'interlinea, e niente antialiasing assottigliato. Prima il piè di pagina era identico al lato chiaro, con un blocco perfino più stretto. */ letter-spacing: .008em; /* 1,55 e non 1,7. La compensazione dell'alone sul chiaro-su-scuro resta — siamo sopra l'1,5 del corpo chiaro — ma 1,7 su una fascia fatta di righe singole e di indirizzi di due righe era interlinea da paragrafo lungo applicata a un elenco: trenta pixel fra una riga e l'altra dove il testo ne misura diciassette. */ line-height: 1.55; -webkit-font-smoothing: auto; } /* `align-items: start`: ogni colonna finisce dove finisce il suo contenuto. Stirate, erano tutte alte 320px perché una sola lo era davvero — e le altre quattro si portavano dietro il vuoto della più lunga. */ .pie__etichetta { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } /* Due colonne gia da 560px, non da 720: fra le due soglie il pie restava una fila unica alta quasi 900px su schermi larghi abbastanza da reggerne due. */ @media (min-width: 560px) { .pie__etichetta { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .pie__etichetta { grid-template-columns: 1.5fr repeat(2, 1fr); } } .pie__marchio img { width: 190px; filter: brightness(0) invert(1); } .pie__marchio p { margin-top: .5rem; color: var(--su-scuro-tenue); font-size: 1.0625rem; } .pie__marchio strong { color: #fff; } /* I tre cerchi del mockup. Sono collegamenti veri, con bersaglio da 44px: il cerchio disegnato è più piccolo del riquadro che si tocca. */ .pie__social { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; gap: .35rem; } /* IL CERCHIO SI DISEGNA ANCHE DA FERMO. Il fondo compariva solo al passaggio del mouse: su un telefono non compare mai, e con un solo indirizzo configurato — oggi è così, WhatsApp e basta — restava un glifo bianco appoggiato sul nero, senza etichetta e senza contorno, che non si legge come un comando ma come un segno decorativo. Il velo da fermo lo rimette in fila con gli altri comandi del sito: un bordo chiaro attorno a un bersaglio. */ .pie__social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; transition: background-color .2s var(--uscita); } .pie__social .icona { width: 26px; height: 26px; } @media (hover: hover) { .pie__social a:hover { background: rgba(255, 255, 255, .14); } } /* Stessa regola dei collegamenti: 46px dove si tocca, 38 dove c'è un mouse. È la scatola attorno al cerchio a stringersi, non il segno disegnato. */ @media (pointer: fine) { .pie__social a { width: 38px; height: 38px; } .pie__social .icona { width: 22px; height: 22px; } } .pie__colonna h2 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em; } .pie__lista { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; } /* Qui c'era `.pie__lista--fitta`, che accorciava le righe della colonna di navigazione. Non ha mai funzionato: stessa specificità di `.pie__lista a` ma scritta prima, quindi perdeva sempre. Con la colonna via, non serve nemmeno più — e una regola che non ha mai avuto effetto è peggio di una assente, perché chi legge crede che l'effetto ci sia. */ .pie__lista a { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; /* Interlinea 1,35 e non l'1,7 della fascia: quel valore compensa l'alone del chiaro su scuro FRA le righe di un paragrafo, e qui le righe sono una sola per voce. Su tre voci si portava via 15px di puro vuoto. */ line-height: 1.35; /* Il bordo interno è quello che il velo del passaggio riempie. Il margine negativo lo restituisce, così il testo resta a filo della colonna. */ padding-inline: .55rem; margin-inline: -.55rem; /* Il tetto si misura sulla COLONNA, non sulla colonna più i due margini negativi. Senza, col carattere di sistema al doppio su uno schermo da 320px la scatola del velo usciva di 17px a destra e si portava fuori tutta la pagina — un difetto che ho introdotto io insieme al velo. */ max-width: 100%; border-radius: var(--r-controllo); color: var(--su-scuro-tenue); text-decoration: none; font-size: 1.0625rem; transition: color .2s var(--uscita), background-color .2s var(--uscita); } .pie__lista a[href^="tel:"] { font-variant-numeric: tabular-nums lining-nums; } /* IL BERSAGLIO SI MISURA SUL DITO, NON SULLO SCHERMO. I 48px sono una regola non negoziabile dove si tocca, e restano. Ma su un puntatore fine il dito non c'è: il mouse arriva su un bersaglio da 33px senza sbagliare, e i 15px di vuoto che ogni riga si portava dietro diventavano 45px di piè di pagina per niente. La misura del bersaglio dipende dallo strumento, non dal gusto. */ @media (pointer: fine) { .pie__lista a { min-height: 0; padding-block: .15rem; } } /* IL PASSAGGIO NON SOTTOLINEA. La sottolineatura al passaggio è il gesto del web di venticinque anni fa, e qui era anche incoerente: il menu in TESTATA non si sottolinea già — si accende con un velo di fondo e un colore più pieno. Questo è lo stesso gesto, sull'altro fondo. Il colore da solo non sarebbe bastato: il velo dà al passaggio una forma, e la forma si vede anche di sfuggita. */ @media (hover: hover) { .pie__lista a:hover { color: #fff; background: rgba(255, 255, 255, .09); } } .pie__lista .icona { width: 19px; height: 19px; } .pie__lista .icona--whatsapp { color: #4DD07C; } .pie address { margin-top: .5rem; font-style: normal; color: var(--su-scuro-tenue); font-size: 1.0625rem; line-height: 1.45; } /* La sede col segnaposto accanto, come nel mockup: il glifo sta accanto alla prima riga, non incolonnato sopra due righe di indirizzo. */ .pie__sede { display: flex; align-items: flex-start; gap: .5rem; } .pie__sede .icona { width: 19px; height: 19px; flex: none; margin-top: .28rem; } /* LA CODA DEL PIÈ DI PAGINA: le tre pagine legali e la riga di copyright. In fila e centrate, che è il posto e il rango delle informazioni di servizio. Vanno a capo da sole quando la riga non le tiene — sul telefono diventano due righe invece delle tre voci incolonnate di prima, e il piè di pagina si accorcia di quasi duecento pixel senza perdere un link. I bersagli restano quelli del sistema: 48px dove si tocca, più stretti dove c'è un mouse, esattamente come le voci delle colonne qui sopra. */ /* La coda è UNA riga dove ci sta e diventa più righe dove non ci sta. Messa in colonna sempre, sul desktop aggiungeva 85px di piè di pagina per tre link che lì stanno comodamente in fondo alla stessa riga del copyright: si accorciava il telefono e si allungava tutto il resto. In fila, a capo automatico, paga solo dove serve. */ .pie__coda { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem 1.5rem; } .pie__legali { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; } .pie__legali a { display: inline-flex; align-items: center; min-height: 48px; line-height: 1.35; color: var(--su-scuro-tenue); text-decoration: none; transition: color .2s var(--uscita); } @media (pointer: fine) { .pie__legali a { min-height: 0; padding-block: .15rem; } } @media (hover: hover) { .pie__legali a:hover { color: #fff; } } .pie__chiusura { margin-top: 0; color: var(--su-scuro-tenue); font-size: 1.0625rem; text-align: center; /* Su schermo largo questa riga correva per tutti i 1180px del campo. */ max-width: 62ch; margin-inline: auto; } .riquadro__vuoto { color: var(--inchiostro-tenue); max-width: 40ch; } /* ========================================================================== PAGINE INTERNE — il foglio dell'associazione Tariffe e servizi si leggono come il foglio informativo che darebbero allo sportello: intestazione dell'ente, corpo, condizioni, e in fondo a chi chiedere. Stessa forma per tutte e due, così si riconoscono come coppia. ========================================================================== */ /* Il foglio bianco vuole una scrivania sotto. Da quando il corpo pagina è bianco, le pagine-documento si portano la propria panna: senza, il foglio spariva nel fondo e restava un filetto a 1,06:1 a tenerlo insieme. */ .pagina { background: var(--panna); padding-block: clamp(1.75rem, 4vw, 3rem) var(--passo); } .briciole-sito { margin-bottom: 1rem; } .briciole-sito a { display: inline-flex; align-items: center; min-height: 48px; color: var(--corallo-azione); font-weight: 700; text-decoration: none; } .briciole-sito a { transition: color .2s var(--uscita); } .briciole-sito a:hover { color: var(--corallo-premuto); } /* LA MISURA STA SUL TESTO, NON SUL BLOCCO. Qui c'era `max-width: 44rem` sull'intestazione, e l'intestazione porta anche la classe `.contenitore`, che centra col margine automatico. I due insieme non tenevano corta una riga: centravano il blocco. Misurato a 1280px, la briciola, il titolo e l'occhiello partivano da 281px mentre il modulo sotto partiva da 20 — la testa della pagina allineata a niente, con la navigazione sopra e il contenuto sotto entrambi sulla guida di sinistra. È il primo sguardo della pagina, ed era l'unico pezzo fuori squadra. Il tetto passa alle righe che devono restare corte: il titolo alla stessa 44rem di prima — quindi va a capo esattamente dove andava — e l'occhiello tiene la sua misura in caratteri. Il blocco torna largo quanto il campo di contenuto e comincia dove cominciano tutti gli altri. */ .pagina__intestazione { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .pagina__intestazione > .titolo { max-width: 44rem; } .pagina__occhio { margin-top: 1rem; font-size: 1.1875rem; line-height: 1.55; max-width: 52ch; } .pagina__altrove { margin-top: 2rem; text-align: center; color: var(--inchiostro-tenue); font-size: 1.0625rem; } .pagina__altrove a { color: var(--corallo-azione); font-weight: 700; } .foglio-bianco { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-scheda); box-shadow: var(--ombra-posata); padding: clamp(1.5rem, 3.2vw, 2.75rem); } /* I DUE MARGINI CHE SI SOMMANO. Il campo di contenuto tiene 20px per lato e il foglio ne aggiunge 24: su uno schermo da 375px restano 287px di colonna, cioè una prosa a 18px che gira ogni trenta caratteri. I 44px non sono una scelta, sono due scelte giuste prese separatamente che si incontrano. Sul telefono il foglio cede la propria metà: il margine di pagina resta — è lui a dire che il foglio è posato su una scrivania — e il bordo interno si stringe. Non è molto, quindici pixel; è però l'unico spazio che questa pagina ha da restituire senza toccare il corpo del testo. */ @media (max-width: 479px) { .foglio-bianco { padding-inline: 1.15rem; } } .foglio-doc { max-width: 46rem; margin-inline: auto; } /* --- Intestazione del documento ------------------------------------------ */ .doc__testa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--inchiostro); } .doc__ente { font-size: 1.0625rem; line-height: 1.5; color: var(--inchiostro-tenue); } .doc__ente strong { color: var(--inchiostro); display: block; } .doc__ente-sede { display: block; } .doc__marchio { margin: 0; } .doc__marchio img { width: 148px; } /* LA CARTA INTESTATA SU TELEFONO. Su desktop l'intestazione dell'ente è il gesto che fa di queste pagine un foglio dello sportello, e resta intera. Su un telefono da 375px costava l'intera prima schermata: testata, "← tiportoio", tre righe di ente, un logotipo da 148px e il filetto — e il titolo della pagina («Per cosa si usa») arrivava a 460px di 812. Su una pagina di lettura, il soggetto che compare a metà del secondo schermo è il soggetto che non compare. Non si toglie il gesto, si stringe: nome e logotipo su una riga sola, e la qualifica con l'indirizzo si ritirano. Non è contenuto perso — le stesse due righe stanno, per esteso, nel piede dello stesso documento, sotto "Per informazioni", dove il lettore le cerca davvero. */ @media (max-width: 559px) { .doc__testa { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; } .doc__ente-sede { display: none; } .doc__ente { font-size: 1.125rem; color: var(--inchiostro); } .doc__marchio img { width: 104px; } .doc__titolo { margin-top: 1.25rem; } } .doc__titolo { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.06; letter-spacing: -.025em; } .doc__occhio { margin-top: .85rem; font-size: 1.1875rem; line-height: 1.55; max-width: 54ch; } .doc__sezione { margin-top: clamp(2rem, 4vw, 2.75rem); } .doc__sottotitolo { font-size: 1.25rem; letter-spacing: -.02em; } .doc__vuoto { margin-top: 1.5rem; padding: 1.1rem 1.25rem; background: var(--panna); border-radius: var(--r-controllo); color: var(--inchiostro-tenue); } .tariffe--doc { margin-top: clamp(1.5rem, 3vw, 2rem); } /* --- Condizioni: coppie termine/spiegazione, rigate ---------------------- */ .condizioni { margin: 1.25rem 0 0; } .condizioni > div { padding: 1rem 0; border-top: 1px solid var(--linea); } .condizioni > div:last-child { border-bottom: 1px solid var(--linea); } .condizioni dt { font-family: var(--display); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; } .condizioni dd { margin: .3rem 0 0; color: var(--inchiostro-tenue); max-width: 62ch; } .condizioni a { color: var(--corallo-azione); font-weight: 700; } /* --- Elenco dei servizi -------------------------------------------------- */ .elenco-servizi { list-style: none; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; } .elenco-servizi li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 0; border-top: 1px solid var(--linea); } .elenco-servizi li:last-child { border-bottom: 1px solid var(--linea); } .elenco-servizi__segno { flex: none; display: grid; place-items: center; color: var(--corallo); } .elenco-servizi__segno .icona { width: 28px; height: 28px; } .elenco-servizi__voce { font-size: 1.25rem; letter-spacing: -.02em; } .elenco-servizi__esempi { margin-top: .25rem; color: var(--inchiostro-tenue); font-size: 1.0625rem; } /* --- Piede del documento ------------------------------------------------- */ .doc__piede { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem; border-top: 2px solid var(--inchiostro); } .doc__piede p { color: var(--inchiostro-tenue); font-size: 1.0625rem; } .doc__recapiti { margin-top: .25rem; } .doc__recapiti a { color: var(--corallo-azione); font-weight: 700; text-decoration: none; } .doc__recapiti a { transition: color .2s var(--uscita); } .doc__recapiti a:hover { color: var(--corallo-premuto); } /* IL NUMERO E L'INDIRIZZO SONO DUE COMANDI, NON DUE PAROLE. Sono il «chiama» e lo «scrivi» di questo foglio — su una pagina che qualcuno legge in piedi, col telefono in mano, per sapere a chi rivolgersi — e stavano dentro una riga di testo alta 21px, mentre due pulsanti da 52 li guardavano da otto pixel più sotto. L'altezza è l'unica cosa che mancava: la larghezza (111 e 129px) era già oltre la soglia, e il punto fermo in mezzo tiene i due bersagli separati. Il bordo interno resta zero di proposito: con un margine negativo le due scatole si sarebbero toccate attorno al punto, e sbagliare fra una telefonata e una email non è come sbagliare fra due voci di elenco. */ .doc__recapiti a { display: inline-flex; align-items: center; min-height: 48px; } /* Stessa regola dei cerchi del piè di pagina: l'altezza serve al pollice, non al puntatore. Dove c'è un mouse la riga torna una riga di testo, e il piede del foglio non si allarga di venticinque pixel per niente. */ @media (pointer: fine) { .doc__recapiti a { min-height: 0; } } .doc__azioni { display: flex; flex-wrap: wrap; gap: .6rem; } /* Quando i due pulsanti stanno sulla stessa riga non succede niente: il gruppo è largo quanto loro, non c'è spazio libero da distribuire. Quando invece vanno a capo — sotto i ~420px, cioè su tutti i telefoni per cui questo sito è fatto — ciascuno si prende la riga intera, come il paio di bottoni della scheda autista e come quello dello stato vuoto. Prima restavano larghi quanto la propria etichetta, uno lungo e uno corto, e la colonna finiva sfrangiata. */ .doc__azioni .bottone { flex: 1 1 auto; } /* ========================================================================== DIVENTA AUTISTA — modulo e ricevuta ========================================================================== */ .doppia { display: grid; gap: clamp(1.5rem, 3vw, 2rem); align-items: start; } @media (min-width: 940px) { .doppia { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } /* Un campo che nessuna persona vede e nessuna persona compila: fuori dallo schermo, non display:none, che alcuni robot riconoscono e saltano. */ .trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* IL PULSANTE NON È UN SETTIMO CAMPO. Fra un campo e l'altro corrono 20px, ed è la misura giusta: sei cose dello stesso tipo, in fila. Il pulsante stava a quegli stessi 20px dall'ultimo campo — `.campo` porta il margine inferiore e solo l'ULTIMO FIGLIO lo perde, e l'ultimo figlio del modulo è il pulsante, non il campo messaggio. Così il gesto che chiude il modulo entrava nella fila come se fosse un'altra riga da compilare. Trentasei pixel, quasi il doppio dell'intervallo interno: quanto basta perché si legga «qui finisce quello che devi scrivere». L'ultimo campo cede il proprio margine perché i due non si fondono: il pulsante è `inline-flex`, e i margini di una scatola di linea non collassano con quelli del blocco che la precede. Lasciandoli entrambi l'intervallo valeva 56px — un buco, non uno stacco — e non era una misura scelta: era una somma. Sotto `.pagina`, e non su `.modulo` in generale: il pannello di gestione carica questo stesso foglio e usa la stessa classe, ma vive a densità più alta per scelta dichiarata. Un modulo che si compila una volta nella vita e uno che si compila dieci volte al giorno non hanno lo stesso respiro. */ .pagina .modulo > .campo:last-of-type { margin-bottom: 0; } .pagina .modulo > .bottone { margin-top: 2.25rem; } /* Sotto i 560px il pulsante prende la larghezza dei campi. Nella colonna stretta i campi arrivano a 296px e il pulsante si fermava a 230: l'unico elemento della scheda che non chiudeva sulla stessa guida, e per giunta l'azione per cui la pagina esiste. Più su la colonna è larga e un pulsante a tutta larghezza sarebbe un nastro. */ @media (max-width: 559px) { .pagina .modulo > .bottone { width: 100%; } } .modulo__nota { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.5; color: var(--inchiostro-tenue); max-width: 52ch; } .modulo__nota a { color: var(--corallo-azione); font-weight: 700; } .modulo textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--linea-controllo); border-radius: var(--r-controllo); background: var(--carta); color: var(--inchiostro); font: 400 1.125rem/1.5 var(--corpo); resize: vertical; } .modulo textarea:focus { border-color: var(--inchiostro); } .fianco { display: grid; gap: clamp(1rem, 2vw, 1.25rem); } .fianco__blocco { background: var(--panna-scura); border-radius: var(--r-scheda); padding: clamp(1.25rem, 2.6vw, 1.75rem); } .fianco__blocco p { margin-top: .6rem; color: var(--inchiostro-tenue); } .fianco__blocco--quieto { background: transparent; border: 1px solid var(--linea); } .fianco__azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; } .fianco__passi { margin: .9rem 0 0; padding-inline-start: 1.3rem; color: var(--inchiostro-tenue); } .fianco__passi li { margin-bottom: .5rem; } .ricevuta { max-width: 40rem; margin-inline: auto; text-align: center; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-scheda); box-shadow: var(--ombra-posata); padding: clamp(2rem, 5vw, 3.25rem); } .ricevuta__segno { margin-bottom: 1rem; } .icona--ricevuta { width: 52px; height: 52px; color: var(--corallo); margin-inline: auto; } .ricevuta__testo { margin-top: 1rem; font-size: 1.1875rem; line-height: 1.55; } .ricevuta__nota { margin-top: 1rem; padding: .85rem 1rem; background: var(--panna); border-radius: var(--r-controllo); font-size: 1.0625rem; color: var(--inchiostro-tenue); } .ricevuta__azioni { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.75rem; } /* ========================================================================== STAMPA Il foglio dell'associazione finisce davvero in bacheca: qui diventa un documento su carta, senza navigazione e senza pulsanti. ========================================================================== */ @media print { .testata, .pie, .salta-al-contenuto, .briciole-sito, .pagina__altrove, .doc__azioni { display: none; } body { background: #fff; font-size: 11pt; } .pagina { padding: 0; } .contenitore { width: 100%; } .foglio-bianco, .foglio-doc { border: 0; box-shadow: none; border-radius: 0; padding: 0; max-width: none; margin-inline: 0; } .doc__testa, .doc__piede { border-color: var(--inchiostro); } /* Su carta un bersaglio non si tocca: i recapiti tornano due parole in una riga, invece di due scatole da 48px che si portano via un centimetro. */ .doc__recapiti a { display: inline; min-height: 0; } .doc__titolo { font-size: 20pt; } .doc__occhio, .condizioni dd, .elenco-servizi__esempi { color: var(--inchiostro); } .tariffe__scorrevole { overflow: visible; background: none; } /* Una voce non si spezza fra due pagine. */ .condizioni > div, .elenco-servizi li { break-inside: avoid; } } /* ========================================================================== MODULI — primitive condivise Stavano nel pannello, ma il modulo di candidatura del sito pubblico usa le stesse identiche parti, e chi lo compila ha lo stesso bisogno di campi grandi e di errori che dicono cosa fare. Vivono qui, e il pannello ci aggiunge sopra solo ciò che è suo. I campi stanno a 18px: sotto i 16px iOS ingrandisce la pagina di colpo al tocco, e 18px è comunque la soglia di leggibilità del sistema. ========================================================================== */ .campo { margin-bottom: 1.25rem; } .campo:last-child { margin-bottom: 0; } .campo label, .scelta > span > strong { display: block; font-weight: 700; font-size: 1.0625rem; margin-bottom: .35rem; } /* Niente margine iniziale: quando l'etichetta è lunga il marcatore va a capo da solo — «Vuoi aggiungere qualcosa?» / «facoltativo» a 375px — e quel margine diventa un rientro di sei pixel a inizio riga, che fa leggere la parola come un elemento smarrito invece che come la coda dell'etichetta. Lo spazio fra le due parole c'è già nel testo; a distinguerle bastano il peso, il corpo e il colore, che è il modo giusto di dire «secondario». */ .campo__facoltativo { font-weight: 400; font-size: 1rem; color: var(--inchiostro-tenue); } .campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo input[type="url"], .campo input[type="date"], .campo input[type="time"], .campo input[type="number"], .campo input[type="password"], .campo input[type="file"], .campo select { width: 100%; min-height: 52px; padding: .7rem .85rem; border: 1px solid var(--linea-controllo); border-radius: var(--r-controllo); background: var(--carta); font: 400 1.125rem/1.4 var(--corpo); color: var(--inchiostro); } .campo select { appearance: none; padding-inline-end: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%), linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .campo input:focus, .campo select:focus, .modulo textarea:focus { border-color: var(--inchiostro); } .campo input::placeholder { color: var(--segnaposto); } .campo__aiuto { margin-top: .4rem; font-size: 1.0625rem; line-height: 1.45; color: var(--inchiostro-tenue); } .campo__aiuto strong { color: var(--inchiostro); } /* L'errore non è affidato al bordo rosso: c'è la frase, e dice cosa fare. */ .campo__errore { margin-top: .4rem; font-size: 1.0625rem; font-weight: 700; color: var(--pericolo); } .campo__errore::before { content: '\26A0\FE0E'; margin-inline-end: .4rem; } /* QUESTA REGOLA C'ERA E NON HA MAI ACCESO UN PIXEL. `.campo--errato input` pesa una classe più un elemento; la regola di base qui sopra seleziona `.campo input[type="text"]` — classe più ATTRIBUTO più elemento — e vinceva sempre, a qualunque distanza nel foglio. Il bordo del campo sbagliato è rimasto quello di tutti gli altri campi: verificato in pagina, `1px solid rgba(7, 14, 21, .55)` su un campo in errore. Ha retto perché l'errore non è mai stato affidato al bordo — c'è la frase, e dice cosa fare — ma il secondo segnale mancava, ed è quello che si vede scorrendo un modulo lungo senza leggerlo. `[type]` pareggia i pesi, e a parità vince l'ultima scritta: questa. La textarea entra nella stessa riga perché la sua regola di base è `.modulo textarea`, stesso peso e stesso rimedio. */ .campo--errato input[type], .campo--errato select, .campo--errato textarea { border-color: var(--pericolo); border-width: 2px; } .campi-affiancati { display: grid; gap: 1.25rem; } @media (min-width: 560px) { .campi-affiancati { grid-template-columns: 1fr 1fr; align-items: start; } } .riepilogo-errori { background: var(--esito-guaio-fondo); border: 2px solid var(--pericolo); border-radius: var(--r-scheda); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; color: var(--pericolo); } .riepilogo-errori ul { margin: .6rem 0 0; padding-inline-start: 1.25rem; } .riepilogo-errori li { margin-bottom: .3rem; } .riepilogo-errori a { color: inherit; font-weight: 700; } .scelta { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; } .scelta input[type="checkbox"] { flex: none; width: 26px; height: 26px; margin-top: .15rem; accent-color: var(--corallo-azione); } .scelta__aiuto { display: block; margin-top: .2rem; font-weight: 400; color: var(--inchiostro-tenue); font-size: 1.0625rem; } .scelta--piccola { align-items: center; font-size: 1.0625rem; } .scelta--piccola input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; } .azioni-modulo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; } /* -------------------------------------------------------------------------- PAGINE LEGALI Stesso foglio di tariffe e servizi. Cambia solo la densità: qui il testo è più lungo, quindi la misura si accorcia e le sezioni si distanziano di più. -------------------------------------------------------------------------- */ .doc__data { margin-top: .6rem; font-size: 1.0625rem; color: var(--inchiostro-tenue); } .doc__testo { margin-top: 1rem; max-width: 66ch; line-height: 1.65; } .doc__testo + .doc__testo { margin-top: .9rem; } .doc__testo a { color: var(--corallo-azione); font-weight: 700; } /* La formula giuridica non è la frase che una persona sta leggendo: sta sotto, più piccola, e non interrompe il discorso in italiano corrente. */ .doc__giuridico { display: block; margin-top: .5rem; font-size: 1rem; color: var(--inchiostro-tenue); } .diritti { margin: 1rem 0 0; padding-inline-start: 1.4rem; max-width: 62ch; } .diritti li { margin-bottom: .55rem; line-height: 1.6; } .tabella-cookie td, .tabella-cookie th { vertical-align: top; } .tabella-cookie td { text-align: start; white-space: normal; font-family: var(--corpo); font-weight: 400; font-size: 1.0625rem; } .tabella-cookie tbody th code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; background: var(--panna-scura); padding: .12em .4em; border-radius: var(--r-minimo); white-space: nowrap; } .tabella-cookie a { color: var(--corallo-azione); font-weight: 700; } /* -------------------------------------------------------------------------- PAGINA LEGALE INCOMPLETA Una pagina legale pubblicata con i buchi sembra vera, ed è peggio di una pagina che non c'è. Questo avviso lo vede chiunque, non solo chi la scrive. -------------------------------------------------------------------------- */ .incompleto { max-width: 46rem; margin: 0 auto clamp(1.5rem, 3vw, 2rem); background: var(--esito-guaio-fondo); border: 2px solid var(--pericolo); border-radius: var(--r-scheda); padding: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--pericolo); } .incompleto__titolo { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; } .incompleto p { margin-top: .5rem; line-height: 1.55; } .incompleto ul { margin: .6rem 0 0; padding-inline-start: 1.35rem; } .incompleto li { margin-bottom: .3rem; font-weight: 700; } .incompleto__come { font-size: 1.0625rem; } .incompleto code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; background: rgba(140, 29, 19, .1); padding: .12em .4em; border-radius: var(--r-minimo); } /* Il buco dentro il testo: si vede da lontano e non si confonde con il resto. */ .da-completare { background: var(--esito-guaio-fondo); color: var(--pericolo); padding: .05em .35em; border-radius: var(--r-minimo); font-weight: 700; } @media print { /* Su carta il documento incompleto resta incompleto: l'avviso si stampa. */ .incompleto { border-color: var(--pericolo); } } /* ========================================================================== ELENCO COMPLETO DEGLI AUTISTI — autisti.php La pagina dietro "Vedi tutti gli autisti". Stesse schede della homepage, due fasce: chi guida oggi e chi no. ========================================================================== */ .pagina--autisti { background: var(--carta); } /* IL CONFINE FRA LE DUE FASCE È IL PASSO INTERO, NON IL MEZZO PASSO. Misurato in pagina, questo elenco aveva un intervallo solo per tre mestieri diversi: 44px fra l'intestazione e la prima fascia, 44px fra la prima fascia e la seconda, 16px fra un titolo e le sue schede. Ma il salto fra «Disponibili oggi» e «Oggi non guidano» non è un titolo che introduce del contenuto: è il confine fra due gruppi di persone che vogliono dire cose opposte, ed è il segnale più importante della pagina — le schede dei due gruppi sono identiche a meno di un pallino da 11px, quindi la distanza è l'unica cosa che le separa a colpo d'occhio. Dopo una scheda alta 560px, 44px non si leggono come un confine: si leggono come la spaziatura di prima. Il passo intero (89px sul desktop, 56px sul telefono) glielo restituisce, e resta il passo del sistema — non un valore inventato per questa pagina. La prima fascia non lo prende: il suo margine superiore lo dà già l'intestazione, mezzo passo, che è la misura giusta per «titolo, poi il suo contenuto». Il ritmo diventa 44 / 16 · · · 89 / 16, che è una cadenza invece di una ripetizione. */ .elenco__fascia { margin-top: var(--passo); margin-bottom: 1rem; } .elenco__fascia:first-child { margin-top: 0; } .elenco__nota { margin-bottom: 1.35rem; color: var(--inchiostro-tenue); max-width: 52ch; } .pagina--autisti .autisti__elenco { margin-bottom: var(--passo-mezzo); } /* LA SCHEDA SOLA QUI NON SI CENTRA: È IN FILA, NON È LA SEZIONE. `--1` e `--2` centrano il gruppo, ed è giusto in homepage, dove quelle schede SONO la sezione e attorno non c'è nessun bordo a cui rispondere: centrate leggono come una scelta, allineate a sinistra leggevano come due schede mancanti. Qui la stessa classe finisce dentro un elenco a fasce impilate, e il conto cambia: l'unico autista che oggi non guida si ritrovava a 425px dal bordo, sotto una riga di tre schede che parte da 20 — allineato a niente, mentre titolo, riga di prova, titoli di fascia, nota e prima griglia stanno tutti sulla stessa guida di sinistra. Un elemento che rompe la guida dice «sono diverso»; questa scheda non è diversa, è solo sola. Resta il tetto di 26rem: torna in fila, non diventa larga quanto la pagina. */ .pagina--autisti .autisti__elenco--1, .pagina--autisti .autisti__elenco--2 { justify-content: start; } /* ========================================================================== IL LIVELLO DI MOVIMENTO Il committente ha chiesto un sito che si muova, non una pagina ferma. Qui sta tutto il movimento del sito, in un blocco solo, con una regola sopra tutte le altre: IL MOVIMENTO È UN LIVELLO, NON UNA CONDIZIONE. Se lo togli — perché il JavaScript non arriva, perché il browser è vecchio, perché chi legge ha chiesto meno movimento — resta il sito intero: stessa composizione, stesso testo, stessi bersagli. Non esiste un contenuto che si veda solo animandosi, e non esiste un pixel che si sposti dopo che la pagina si è posata. Le tecniche sono due, in quest'ordine: 1. `animation-timeline` (parallasse, barra di avanzamento): movimento legato allo scorrimento, calcolato dal compositore, zero JavaScript per fotogramma. Dove non c'è, semplicemente non c'è. 2. Un attributo che cambia (`data-posato`): tutto il resto. Lo mette l'osservatore in assets/js/tiportoio.js, una volta sola per elemento. ========================================================================== */ :root { /* Le due curve del sistema, ed è la stessa idea in due dosi: si frena, non si rimbalza. `--posa` è la frenata lunga delle comparse (quint-out: parte decisa e arriva quasi ferma), `--uscita` quella corta dei controlli. Il primo tentativo aveva un vero rimbalzo — overshoot a 1,24 — ed era la scelta sbagliata due volte: il rimbalzo elastico è il tic dei siti del 2014, e su ventidue elementi che entrano uno dopo l'altro trasforma una pagina che si posa in una pagina che sobbalza. Un oggetto reale decelera e basta. */ --posa: cubic-bezier(.22, 1, .36, 1); --entrata: .78s; } /* NOTA, perché non si rifaccia il giro. Le durate qui sopra sono state accorciate su telefono e poi rimesse: le "schermate bianche a metà pagina" che le avevano motivate erano un artefatto della misura, non del sito — fotogrammi presi mentre `scroll-behavior: smooth` stava ancora portando la pagina, con la comparsa che non c'entrava niente. A pagina ferma, dopo un salto istantaneo, il contenuto c'è già. Resta invece la regola che segue, `data-subito`, che risolve una cosa vera e diversa. */ /* -------------------------------------------------------------------------- 1. LA COMPARSA — quattro modi di entrare, non uno. Un solo modo per tutto era il difetto della versione precedente: testo, fotografie e schede hanno pesi diversi e devono entrare in modo diverso. La variante si dichiara nell'HTML (`data-anima="scala"`), lo stato lo mette il JavaScript (`data-posato`), il ritardo di fila lo passa `--ritardo`. -------------------------------------------------------------------------- */ .js [data-anima] { /* `translate` e `scale` come proprietà INDIPENDENTI, non dentro `transform`. È la differenza fra una comparsa che convive con gli stati dei controlli e una che li spegne: il sollevamento di `:hover` e la pressione di `:active` vivono in `transform`, e se la comparsa occupasse la stessa proprietà vincerebbe per specificità e il bottone smetterebbe di reagire al dito. */ transition: opacity var(--entrata) var(--posa) var(--ritardo, 0ms), translate var(--entrata) var(--posa) var(--ritardo, 0ms), scale var(--entrata) var(--posa) var(--ritardo, 0ms), clip-path var(--entrata) var(--posa) var(--ritardo, 0ms); } /* sali — il modo normale: prosa, titoli, righe di elenco. */ .js [data-anima=""] { opacity: 0; translate: 0 22px; } /* scala — le schede e i riquadri: arrivano da sotto e da lontano insieme. Lo scarto di scala è minimo (3%) perché una scheda che rimpicciolisce troppo sembra un elemento di un'altra pagina, non lo stesso che si posa. */ .js [data-anima="scala"] { opacity: 0; translate: 0 30px; scale: .972; } /* La variante `maschera` viveva qui: la fotografia si scopriva dal basso mentre l'immagine dentro smetteva di essere ingrandita. È stata tolta quando l'unica fotografia che se ne serviva — quella di "Diventa autista" — è passata alla luna che si apriva sullo scorrimento. Oggi neanche quella c'è più: la fotografia usa `scala`, come le schede. La variante resta fuori dal foglio comunque, per la ragione di allora: una variante che nessuno chiama non è un pezzo di sistema pronto all'uso, è codice che il prossimo legge e crede attivo. SU TELEFONO LA FOTOGRAFIA NON SI SPOSTA E NON SI SCALA. Sotto gli 860px quella figura non è un oggetto dentro la composizione: è la fascia stessa, ancorata al fondo del pannello e larga quanto lui. Salire di 30px o rimpicciolire del 3% le aprirebbe una fessura di pannello lungo i bordi per tutta la durata della comparsa, e la fessura si vede perché il pannello è di un altro colore. Lì entra solo la luce. */ @media (max-width: 859px) { .js .invito__foto[data-anima] { translate: none; scale: none; } } /* righe — una riga di testo che sale da dietro il proprio bordo inferiore. Serve la maschera, quindi serve un elemento in più: lo mette il PHP. */ .mascherata { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: bottom; } .mascherata > span { display: inline-block; } .js [data-anima="righe"] .mascherata > span { translate: 0 115%; transition: translate .9s var(--posa) var(--ritardo, 0ms); } .js [data-anima="righe"][data-posato] .mascherata > span { translate: none; } /* Le parole non salgono insieme: 80ms l'una dall'altra, quanto basta perché si legga come una frase che si compone e non come un blocco che scivola. Il ritardo si somma a quello di fila, non lo sostituisce. */ .js [data-anima="righe"] .mascherata:nth-child(2) > span { transition-delay: calc(var(--ritardo, 0ms) + 80ms); } .js [data-anima="righe"] .mascherata:nth-child(3) > span { transition-delay: calc(var(--ritardo, 0ms) + 160ms); } /* Lo stato posato, per le varianti che si reggono su opacità e trasformazione. Le due sopra si posano da sé, con le proprie proprietà. */ .js [data-anima][data-posato] { opacity: 1; translate: none; scale: none; } /* POSATO SENZA ENTRARE. Il JavaScript mette questo segno sui pezzi che trova già oltre la metà della finestra dopo una scorsa lunga: sono arrivati mentre non li si guardava, e un ingresso raccontato dopo il fatto è solo un secondo di bianco. Qui la comparsa non si accorcia — si toglie del tutto, perché non c'è niente da far entrare. Copre tutte e tre le varianti e i due dettagli che hanno una transizione propria. */ .js [data-anima][data-subito], .js [data-anima][data-subito] .mascherata > span, .js [data-anima][data-subito] .catena__freccia, .js [data-anima][data-subito] .icona--grande path, .js [data-anima][data-subito] .icona--grande circle { transition: none; } /* NIENTE `will-change` QUI. Era la riga ovvia — prepara il livello di composizione prima che serva — e su questa pagina era anche la riga sbagliata: ventidue elementi con un livello proprio, tenuti in memoria video dal primo pixel, su telefoni Android da quattro anni che sono il parco macchine vero di questo pubblico. Il browser promuove da sé ciò che sta animando, e lo smonta quando ha finito. Qui la mano si toglie. */ /* -------------------------------------------------------------------------- 2. LA HERO — la sola scena che si muove da sola. Tre fotografie che si danno il cambio, ciascuna in lentissimo avvicinamento mentre è in scena, e l'intero gruppo che scorre più piano della pagina. -------------------------------------------------------------------------- */ /* Il respiro dell'immagine: 5% in undici secondi. Sotto la soglia della percezione cosciente — non si vede muoversi, si sente che è viva. */ @keyframes respiro { from { scale: 1; } to { scale: 1.055; } } .js .hero__fotogramma.e-visibile { animation: respiro 11s var(--uscita) forwards; } /* La parallasse. `animation-timeline: view()` lega i fotogrammi allo scorrimento senza un solo callback per frame: dove non è supportata la fotografia sta ferma, che è uno stato buono. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 768px) { /* La timeline è dichiarata sulla SEZIONE, non sui due elementi che si muovono. `.hero` ha `overflow: hidden` per tenere dentro la fotografia, e questo ne fa un contenitore di scorrimento: un `view()` chiesto da dentro si sarebbe agganciato a lui — una scatola che non scorre mai — e la timeline sarebbe rimasta inattiva, `currentTime: null`, senza un errore in console. È esattamente l'inciampo di "Diventa autista", e qui era già successo: la parallasse non è mai partita. La sezione invece ha il documento come contenitore, e i due figli consumano la sua timeline per nome. */ .hero { view-timeline-name: --scena; view-timeline-axis: block; } @keyframes deriva { from { translate: 0 -6%; } to { translate: 0 6%; } } .hero__foto { /* La foto è più alta della scena, così ha spazio da cui derivare. */ inset-block: -7% -7%; animation: deriva linear both; animation-timeline: --scena; animation-range: contain 0% cover 100%; } /* Il testo deriva nella direzione opposta, ma la METÀ: è ciò che crea la profondità. Alla stessa velocità sarebbe solo scorrimento. */ @keyframes deriva-testo { from { translate: 0 0; } to { translate: 0 -3.5%; } } .hero__interno { animation: deriva-testo linear both; animation-timeline: --scena; animation-range: contain 0% cover 100%; } } } /* -------------------------------------------------------------------------- 3. LA TESTATA CHE SI POSA Sta in cima allo schermo e si stringe appena la pagina parte: il logotipo rimpicciolisce, la firma si ritira, compare l'ombra. Non è un vezzo — su un telefono restituisce due righe di contenuto a ogni schermata, e tiene a un tocco il comando del menu, dove "Trova un autista" chiude la lista. (Qui c'era scritto che a restare a portata di pollice fosse il pulsante corallo: sotto i 560px non era vero, perché il pulsante in riga lì non si disegna. Adesso lo è di nuovo, per un'altra strada.) -------------------------------------------------------------------------- */ .testata { position: sticky; top: 0; z-index: 40; transition: box-shadow .4s var(--uscita), border-color .4s var(--uscita); } /* NIENTE SI FERMA DIETRO LA TESTATA — né un'àncora, né il fuoco. Lo stacco NON è una costante: la testata misura 70px in orizzontale, ~90px su telefono col menu, ~112px sul largo. Un valore per scena, dichiarato dove la scena si dichiara. E sta sul CONTENITORE che scorre, non sui bersagli. Prima era un `scroll-margin-top` su `main [id]`, e copriva solo ciò che ha un `id`: le àncore sì, ma non i collegamenti dentro le schede. Andando INDIETRO col fuoco — Maiusc+Tab, che porta l'elemento in cima invece che in fondo — "Scopri tutte le tariffe" finiva coperto per 89 pixel su 96. È il criterio 2.4.11 di WCAG 2.2, e nessuno strumento automatico lo vede. `scroll-padding-top` vale per ogni scorrimento che il browser decide da sé: àncore, fuoco da tastiera e ricerca nella pagina, con o senza `id`. */ :root { scroll-padding-top: var(--stacco-ancora, 7rem); } /* Sotto i 1340px la testata sta su due righe — marchio sopra, navigazione sotto — e misura fra i 128 e i 149px. Lo stacco li copre e lascia mezzo centimetro di respiro sopra il bordo della fascia. */ @media (max-width: 1339px) { :root { --stacco-ancora: 9.5rem; } } /* In orizzontale la testata torna su una riga sola e misura 70px. Sta DOPO la riga sopra di proposito: stessa specificità, vince l'ultima, e uno schermo basso è quasi sempre anche stretto — le due condizioni valgono insieme. */ @media (max-height: 30rem) and (orientation: landscape) { :root { --stacco-ancora: 5.5rem; } } /* COME SI STRINGE, E PERCHÉ COSÌ. La prima versione animava `padding`, `width` e `max-height`: tre proprietà che rifanno il calcolo del layout a ogni fotogramma, su una barra che sta ferma in cima allo schermo mentre tutto il resto scorre. Su un Android di quattro anni — il parco macchine vero di questo pubblico — è esattamente il modo di far singhiozzare uno scorrimento. Adesso il logotipo si RIMPICCIOLISCE (`scale`, che il compositore fa da solo, senza toccare il layout) e la firma si ritira chiudendo la propria riga di griglia da `1fr` a `0fr` — la tecnica che sostituisce `max-height` e non chiede di indovinare un'altezza massima. L'altezza della testata scende di conseguenza, senza che nessuno la animi. */ .testata__marchio { display: grid; grid-template-rows: auto 1fr; justify-items: start; transition: grid-template-rows .38s var(--uscita); } .testata__marchio img { transform-origin: 0 50%; transition: scale .38s var(--uscita); } .testata__endorsement { overflow: hidden; min-height: 0; transition: opacity .28s var(--uscita); } .testata.e-compatta { box-shadow: 0 1px 0 var(--linea), 0 14px 30px -22px rgba(7, 14, 21, .55); border-bottom-color: transparent; } .testata.e-compatta .testata__marchio { grid-template-rows: auto 0fr; } .testata.e-compatta .testata__marchio img { scale: .84; } .testata.e-compatta .testata__endorsement { opacity: 0; } /* LA BARRA DI AVANZAMENTO. Un filo di corallo sotto la testata che dice quanto manca. Costa una riga di CSS e nessun JavaScript. */ .testata::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--corallo); pointer-events: none; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { @keyframes avanzamento { from { transform: scaleX(0); } to { transform: scaleX(1); } } .testata::after { animation: avanzamento linear both; animation-timeline: scroll(root block); } } } /* -------------------------------------------------------------------------- 4. LE MICRO-REAZIONI Quello che succede sotto il dito e sotto il puntatore. -------------------------------------------------------------------------- */ .autista__foto img { transition: transform .7s var(--uscita); } @media (hover: hover) { .autista:hover .autista__foto img, .autista:focus-within .autista__foto img { transform: scale(1.05); } } /* La freccia dei collegamenti e dei bottoni parte in avanti. Quattro pixel: è un accento sulla direzione, non un movimento in sé. */ .collegamento .icona, .bottone .icona { transition: transform .35s var(--posa); } @media (hover: hover) { .collegamento:hover .icona, .bottone:hover .icona { transform: translateX(4px); } /* Il telefono e la freccia in giù non vanno in avanti: indicano altro. */ .bottone:hover .icona--ferma { transform: none; } } /* IL BOTTONE MAGNETICO. Su un puntatore fine il pulsante corallo si sporge di pochi pixel verso il cursore prima ancora che tu lo raggiunga. Lo spostamento lo calcola il JavaScript in `--mx`/`--my`; senza JavaScript le due variabili valgono zero e il bottone sta fermo. */ @media (hover: hover) and (pointer: fine) { .bottone--grande, .testata__azione { translate: var(--mx, 0) var(--my, 0); transition: translate .55s var(--uscita), transform .25s var(--uscita), background-color .25s var(--uscita), box-shadow .25s var(--uscita); } .bottone.e-attratto { transition-duration: .1s, .25s, .25s, .25s; } } /* Le icone della fascia dell'associazione si disegnano quando le raggiungi: il tratto entra invece di comparire. */ .js [data-anima="disegno"] .icona--grande path, .js [data-anima="disegno"] .icona--grande circle { stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 1.2s var(--uscita) var(--ritardo, 0ms); } .js [data-anima="disegno"][data-posato] .icona--grande path, .js [data-anima="disegno"][data-posato] .icona--grande circle { stroke-dashoffset: 0; } /* La catena TI → PORTO → IO si tira quando arriva. */ .js [data-anima] .catena__freccia { transform-origin: 0 50%; scale: 0 1; transition: scale .8s var(--posa) var(--ritardo, 0ms); } .js [data-anima][data-posato] .catena__freccia { scale: 1 1; } /* -------------------------------------------------------------------------- 5. LA CLAUSOLA CHE TIENE TUTTO Chi ha chiesto meno movimento riceve il sito intero, fermo. Non una versione ridotta: la stessa pagina, senza una sola traslazione. Questa regola sta in fondo di proposito — è l'ultima parola del foglio. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js [data-anima], .js [data-anima] img, .js [data-anima] .invito__arco, .js [data-anima] .catena__freccia, .js [data-anima="righe"] .mascherata > span { opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important; clip-path: none !important; transition: none !important; animation: none !important; } .js [data-anima="disegno"] .icona--grande path, .js [data-anima="disegno"] .icona--grande circle { stroke-dasharray: none; stroke-dashoffset: 0; } .js .hero__fotogramma.e-visibile { animation: none; } .testata.e-compatta { box-shadow: none; } .testata::after { display: none; } } /* Il fuoco da tastiera corre più dell'osservatore: se entra in un elemento non ancora posato, quell'elemento si mostra subito. Non si insegue mai un bersaglio invisibile. */ .js [data-anima]:focus-within { opacity: 1; translate: none; scale: none; clip-path: none; } .js [data-anima]:focus-within .mascherata > span { translate: none; } /* -------------------------------------------------------------------------- IL PULSANTE CHE SI RIEMPIE DALLA STESSA PARTE Vive solo in "Diventa autista", ed è la seconda metà dello stesso gesto: la luna si ritira verso sinistra scoprendo la fotografia, e il pulsante lì sotto si riempie da sinistra quando lo raggiungi. Un movimento solo, detto due volte a due scale diverse. Non è un pulsante nuovo: sotto il velo resta il corallo azione di sempre, con la sua pressione, il suo fuoco e il suo colore. Se il velo non parte — puntatore grosso, meno movimento — non manca niente. -------------------------------------------------------------------------- */ .invito .bottone--corallo { position: relative; overflow: hidden; isolation: isolate; } .invito .bottone--corallo > * { position: relative; z-index: 1; } .invito .bottone--corallo::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--corallo-premuto); transform-origin: 0 50%; scale: 0 1; transition: scale .45s var(--posa); } @media (hover: hover) { /* Il fondo non cambia più al passaggio: lo fa il velo. Lasciare tutti e due significava vedere il colore scattare e poi il velo attraversarlo. */ .invito .bottone--corallo:hover { background: var(--corallo-azione); } .invito .bottone--corallo:hover::before, .invito .bottone--corallo:focus-visible::before { scale: 1 1; } } /* Sotto il dito il velo non serve: c'è la pressione, che è più rapida e più vera. Si riempie di colpo, come il resto del sito. */ .invito .bottone--corallo:active::before { transition-duration: .09s; scale: 1 1; } @media (prefers-reduced-motion: reduce) { .invito .bottone--corallo::before { transition: none; } } /* Sotto i 560px il marchio e il nome non stanno affiancati senza strozzare uno dei due: si impilano. E il filetto sparisce — un filetto verticale fra due blocchi sovrapposti separa il nulla, ed è esattamente il difetto che questa fascia aveva quando la riga andava a capo da sola. */ @media (max-width: 559px) { .garanzia__ente { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .garanzia__ente > div { padding-left: 0; border-left: 0; } }