/* ═══════════════════════════════════════════════════════════════════════ FUNNEL EVERGREEN · TEMA BLU — VARIANTE 2 Quarto e ultimo strato di index-blue-2.html. Si carica DOPO style.css, light.css e blue.css e non li tocca: stessi selettori, stessa specificità, vince l'ultimo. Il tema blu resta la base — è lui che ha già tolto l'arcobaleno e appiattito i titoli — e questo foglio fa tre cose, e solo quelle: 1 · IL CARATTERE. Tutta la pagina passa da Geist a Google Sans. È un grottesco geometrico: ciotole più tonde, terminali orizzontali, maiuscole più larghe. Per questo il tracking si allenta — i valori di Geist (-0.025em sul corpo, -0.02em sul display) su capitali geometriche chiudono le lettere l'una sull'altra. Google Sans si ferma a wght 700. Dove serve di più — le frasi chiave dell'hero, §03 — entra Google Sans Flex, che è lo stesso disegno su un asse da 300 a 1000: l'extrabold è un peso vero, non un 700 ingrossato a mano. L'"extrabold" della chiusa (§04) resta invece un contorno, e lì è una scelta: è una riga cava. 2 · LE FRASI CHIAVE VANNO DENTRO UN BADGE. "LA MACCHINA PER / GUADAGNARE DA CASA…" smettono di essere inchiostro navy sulla carta e diventano un oggetto: piastra blu piena con gli angoli tondi, lettera bianca sopra. È la citazione del testo evidenziato di Instagram, e fa quello che faceva l'estrusione nel tema scuro — stacca la riga dal fondo — senza rilievo finto. 3 · LA CHIUSA SI SVUOTA. "REGALERÒ LA SUA / 100% GRATIS!" prende la faccia bianco→grigio e il contorno blu: la riga più forte della pagina è l'unica cava, e il contorno la tiene leggibile sulla carta chiara dove il bianco pieno sparirebbe. Il markup e i JS sono quelli di index-blue.html: nessuna riga dell'HTML cambia, nessun file in js/ viene toccato. ═══════════════════════════════════════════════════════════════════════ */ /* ═══ 01 · TOKEN ══════════════════════════════════════════════════════ */ :root { /* Google Sans non è nel catalogo pubblico di Google Fonts ma l'API lo serve (css2?family=Google+Sans:wght@400..700). Dietro restano in ordine: Google Sans Text e Product Sans, i due nomi con cui lo stesso disegno arriva su alcune piattaforme; poi Geist, cioè la pagina che torna identica a index-blue.html se il CDN non risponde. */ --font-geistsans: 'Google Sans', 'Google Sans Text', 'Product Sans', 'Geist', 'GeistSans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Il mono resta Geist Mono: Google Sans non ha un compagno a larghezza fissa, e la striscia annuncio, le etichette e i metadati vivono di quello. */ /* Lo stesso disegno, con l'asse dei pesi intero: Google Sans Flex va da 300 a 1000 dove Google Sans si ferma a 700. A 700 i due file sono indistinguibili — provati fianco a fianco sulla stessa riga, stesse aste, stessi terminali, stessa larghezza — quindi questo non introduce un secondo carattere in pagina: apre i pesi che al primo mancavano. Lo usa solo chi quei pesi li chiede davvero, cioè le frasi chiave dell'hero (§03). Dietro, lo stack di sempre: se il CDN non risponde si torna a Google Sans e poi a Geist. */ --font-display-heavy: 'Google Sans Flex', var(--font-geistsans); } /* ═══ 02 · RESET E BASE ═══════════════════════════════════════════════ */ /* Il corpo del testo. Due correzioni, entrambe conseguenze del cambio di carattere: · il tracking. -0.025em è la misura di Geist, che nasce già stretto. Su Google Sans, che ha le ciotole tonde, chiude le "o" contro le lettere vicine: a -0.011em la riga torna a respirare senza allargarsi. · le feature. ss01 e cv11 sono alternative di Geist (la "a" a doppio piano, la "l" con la coda). In Google Sans quei nomi non esistono e restano lettera morta: via, così non c'è una dichiarazione che mente su cosa sta facendo. */ body { letter-spacing: -0.011em; font-feature-settings: normal; } /* Lo stesso sui titoli: la rampa di Geist va riletta sulle capitali geometriche di Google Sans, che sono più larghe e più tonde. */ .hero__title { letter-spacing: -0.008em; } .section-title, .signup__title { letter-spacing: -0.01em; } /* ─── Il contesto di impilamento del badge ──────────────────────────── Il badge è uno pseudo-elemento in z-index negativo, e questa riga decide se funziona o no. Deve stare QUI, sul genitore, e non sulla riga che porta il badge. Il motivo è l'ordine di dipintura: dentro un contesto di impilamento lo sfondo dell'elemento che lo crea si dipinge PRIMA dei figli a z-index negativo. Se fosse la riga a creare il contesto, il suo sfondo — che qui è il gradiente clippato sulla lettera — finirebbe sotto il badge, e della frase chiave si vedrebbe solo una piastra blu vuota. Messo sul genitore, invece, il badge si dipinge per primo e tutto il contenuto della riga (lettera compresa) gli passa sopra. E "isolation" invece di niente perché senza un contesto chiuso lo z-index -1 scapperebbe fino alla radice, dietro la griglia e il canvas dell'hero. Vale per tutti e due i blocchi che portano un badge: il titolo e il sottotitolo, cioè i due contenitori flex dentro cui stanno le righe a piastra. La regola è la stessa, e il motivo pure. ──────────────────────────────────────────────────────────────────── */ .hero__title, .hero__sub { isolation: isolate; } /* ─── Il passo delle due colonne, dichiarato una volta ──────────────── Il passo fra le righe serve due volte: lo usa il contenitore flex, e lo deve ANNULLARE la cucitura fra due piastre consecutive (§11). Se i due numeri vivessero in posti diversi — uno in style.css, l'altro qui — basterebbe cambiarne uno perché le piastre si sovrappongano senza che nessuno capisca perché. Sta scritto una volta sola, e il contenitore lo legge da lì. Il sottotitolo passa da 4px a 8px: 4 era la misura di quando quelle due righe erano inchiostro nudo (la promessa e la cifra sono una frase sola, e 8px le facevano leggere come due blocchi). Adesso portano una piastra che sborda oltre il box della riga, e dentro 4px le altre righe del sottotitolo ci finirebbero sotto. */ .hero__title, .hero__sub { --stack-gap: var(--spacing-8); gap: var(--stack-gap); } @media (max-width: 767px) { .hero__title { --stack-gap: var(--spacing-4); } } /* ═══════════════════════════════════════════════════════════════════════ 03 · LE FRASI CHIAVE: IL BADGE Due coppie, stesso trattamento, una regola sola: · "LA MACCHINA PER" / "GUADAGNARE DA CASA…" — .hero__title-big senza --em, perché l'altra coppia del titolo ha un trattamento suo (§04); · "CREARTI UNA SECONDA ENTRATA" / "DA 50-100-150€ AL GIORNO" — .hero__sub-big, la promessa del sottotitolo, che nel copy sta alla stessa altezza: è l'altra cosa che il lettore deve portarsi via. Stanno insieme nel selettore e non in due blocchi gemelli apposta: se un domani il badge cambia — raggio, rampa, scarti — deve cambiare in un punto solo, o le due coppie divergono senza che nessuno se ne accorga. Tutto quello che segue è scritto in em, quindi vale a qualunque corpo js/main.js assegni alle righe. ═══════════════════════════════════════════════════════════════════════ */ .hero__title-big:not(.hero__title-big--em), .hero__sub-big { position: relative; /* Il badge deve abbracciare il TESTO, non la colonna. Le righe del titolo sono elementi flex in una colonna, quindi nascono stirate a tutta larghezza: così la piastra resterebbe larga 820px anche quando la riga si ferma prima (succede dove il calcolo di js/main.js incontra il tetto --fit-max). Con flex-start la riga si stringe sul suo contenuto e la piastra la segue. */ align-self: flex-start; /* Il respiro intorno alla piastra. Il passo fra le righe del titolo è 8px, ma la piastra sborda oltre il box della riga (gli scarti dello pseudo-elemento qui sotto): quegli 8px se li mangia tutti, e il badge finisce incollato al raccordo sopra e a quello sotto. Questo margine glieli restituisce, in em perché deve scalare con il corpo che js/main.js calcola riga per riga. Il valore è tarato su quello che si vede: fra il filo basso di una piastra e il filo alto della successiva restano 6px, non i 10 di prima — abbastanza da leggere due righe, troppo pochi per leggere due blocchi. */ margin-block: 0.125em; /* L'interlinea. 1.04 è la misura di style.css, scritta per righe di inchiostro nudo. Qui ogni riga porta la sua piastra, e l'aria intorno alle lettere la fa già lo scarto dello pseudo-elemento: sommati, i due respiri aprivano un corridoio fra una frase chiave e l'altra. A 0.92 le due piastre tornano una cosa sola. */ line-height: 0.92; /* ─── L'extrabold, e perché qui è un peso e non un trucco ──────── Google Sans si ferma a 700, e oltre il 700 ci sono due strade. La prima è disegnarlo: una dilatazione, cioè N copie della lettera spostate di un filo e sovrapposte. Provata e scartata — ingrossa le aste ma chiude i vuoti interni, stonda i terminali e allarga le giunzioni: la riga smette di essere Google Sans e diventa un carattere diverso, accanto a un resto di pagina che è rimasto Google Sans. (La chiusa, §04, può permettersela solo perché lì la dilatazione è BLU su lettera bianca: si legge come un contorno, e la forma vera resta visibile dentro.) La seconda è chiedere il peso a un file che ce l'ha. Google Sans Flex è lo stesso disegno con l'asse dei pesi intero, 300→1000: a 700 è indistinguibile da Google Sans, a 800 dà l'extrabold disegnato dal typeface designer — vuoti interni aperti, terminali ancora orizzontali, proporzioni al loro posto. È questa. Il corpo non va toccato: js/main.js misura la riga e sceglie la dimensione perché occupi esattamente la colonna, quindi a un peso più largo risponde da solo con qualche punto in meno. */ font-family: var(--font-display-heavy); font-weight: 800; letter-spacing: -0.008em; /* La faccia: bianco pieno in cima, grigio freddo sul filo basso. È la curva dei titoli del tema scuro, rimessa dov'è di nuovo vera — sopra una superficie blu piena. Una riga, un gradiente: niente banda ripetuta, perché qui ogni frase chiave è un elemento suo. */ background-image: linear-gradient(to bottom, #ffffff 0%, #fbfcfe 34%, #e9eef8 74%, #d6deef 100%); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Il filter resta spento, come nel tema blu. Qui non serve a niente — il peso ce l'ha il font — e in più creerebbe il contesto di impilamento che §02 ha spostato apposta sul genitore: la piastra tornerebbe davanti alla lettera. L'ombra della piastra, infatti, sta sulla piastra ed è un box-shadow. */ filter: none; } /* La piastra. Gli scarti sono asimmetrici per una ragione sola: il testo è tutto maiuscolo, quindi sotto le lettere c'è la fascia vuota delle discendenti e sopra no. Con scarti uguali la piastra sembrerebbe scivolata in alto. I valori sono cresciuti di un soffio rispetto a prima perché il box della riga si è accorciato (line-height 0.92): senza, la piastra avrebbe stretto le lettere invece di contenerle. */ .hero__title-big:not(.hero__title-big--em)::before, .hero__sub-big::before { content: ""; position: absolute; z-index: -1; inset: -0.15em -0.16em -0.125em; border-radius: 0.1em; /* NON lo spettro: lì l'ultima fermata è #1e96d7 e sotto una lettera bianca sta a 2.9:1. Questa è la rampa della pill primaria, tenuta tutta sotto il 5:1 apposta perché il bianco regga su tutta la larghezza. */ background: var(--gradient-cta-blue); box-shadow: 0 1px 2px rgba(10, 24, 60, 0.16), 0 8px 22px rgba(10, 24, 60, 0.13); } /* ═══════════════════════════════════════════════════════════════════════ 04 · LA CHIUSA: FACCIA BLU IN DISCESA "REGALERÒ LA SUA" e "100% GRATIS!". ═══════════════════════════════════════════════════════════════════════ */ .hero__title-big--em { /* Lo stesso extrabold vero delle righe a badge (§03): Google Sans Flex a 800. Qui serve più che altrove: senza contorno il peso della riga lo porta soltanto il corpo del carattere, e il 700 a cui si ferma il file di Google Sans non basterebbe. */ font-family: var(--font-display-heavy); font-weight: 800; letter-spacing: -0.008em; /* Più stretta ancora delle righe a badge: qui sotto le lettere non c'è una piastra da contenere, solo carta, e le due righe sono una frase sola — "REGALERÒ LA SUA / 100% GRATIS!". A 1.04 leggevano come due annunci separati. Il padding e il margine negativo che lo annulla sono la tassa di quella stretta. L'ombra d'appoggio qui sotto è un filter, e Chrome ritaglia il filtro sul BORDER BOX dell'elemento, non su quanto inchiostro c'è dentro: con l'interlinea sotto 1 il box diventa più basso della lettera, e l'accento della Ò — che sta in cima, sopra la maiuscola — finiva tagliato via. Il padding rimette il box intorno a tutta la lettera, il margine uguale e contrario gli toglie l'ingombro: il layout non si muove di un pixel, il filtro torna intero. */ line-height: 0.88; padding-block: 0.16em; margin-block: -0.16em; /* La faccia non è più bianca: è blu, e scende. In cima l'azzurro dell'aurora (#1e96d7 schiarito quel tanto che basta a non sembrare un link), al piede il navy della famiglia. Prima la lettera era bianca e la teneva insieme il contorno; adesso il colore sta DENTRO la lettera e il contorno non serve più. Le fermate non sono equidistanti: la parte alta resta chiara fino a metà altezza — è lì che l'occhio prende la forma — e la rampa scurisce nell'ultimo terzo. Una discesa lineare avrebbe dato una riga tutta di un blu medio, senza né cima né piede. Anche la fermata più chiara regge sulla carta (#f4f7fb): siamo sopra 3:1, che è la soglia del testo grande — e qui il corpo è quello della display, non del testo corrente. */ background-image: linear-gradient(to bottom, #2a8bd6 0%, #0b63c9 36%, #0a47a0 68%, #142e6b 100%); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Niente contorno: la lettera è piena di colore, e un bordo blu intorno a una faccia blu farebbe solo due blu attaccati. Resta una sola ombra, bassissima, e non è un effetto: è il piano d'appoggio. Senza, la riga galleggia sulla carta — che qui è bianca anche lei — e perde il bordo inferiore. Il padding e il margine negativo qui sopra restano: sono la tassa del filter, che Chrome ritaglia sul border box, e con l'interlinea a 0.88 l'accento della Ò finirebbe tagliato. */ filter: drop-shadow(0 0.02em 0.03em rgba(12, 28, 72, 0.22)); } /* ═══════════════════════════════════════════════════════════════════════ 05 · TELEFONO ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Sul telefono .hero__copy centra il blocco di testo (style.css §mobile). Le righe a badge, che si stringono sul contenuto, devono centrarsi anche loro: con flex-start resterebbero incollate a sinistra mentre tutto il resto sta in asse. */ .hero__title-big:not(.hero__title-big--em), .hero__sub-big { align-self: center; } /* Alla scala del telefono la piastra può stringersi: i 16px di margine della colonna sono la metà di quelli di desktop, e uno scarto in em calcolato su 64px ci entrerebbe appena. */ .hero__title-big:not(.hero__title-big--em)::before, .hero__sub-big::before { inset: -0.14em -0.12em -0.115em; border-radius: 0.09em; } } /* ═══════════════════════════════════════════════════════════════════════ 06 · I DUE INGRANAGGI DELLA VSL Due render d'acciaio che sporgono da dietro il riquadro del video, in diagonale: gear-1 dall'angolo in basso a sinistra, gear-2 da quello in alto a destra. Sono la stessa macchina che gira a hairline nel fondo dell'hero (js/hero-bg.js), portata in primo piano una volta sola — quindi restano due, e si fermano qui. ═══════════════════════════════════════════════════════════════════════ */ /* .vsl diventa il riferimento degli ingranaggi e, con z-index, un contesto di impilamento chiuso: così lo z-index -1 delle immagini resta qui dentro — dietro il riquadro del video, che è opaco e li taglia a metà — invece di scappare fino alla radice e finire dietro il fondo della pagina. */ .vsl { position: relative; z-index: 0; } /* Gli ingranaggi sporgono anche sopra e sotto il riquadro, e lì trovano il testo: il raccordo del titolo sopra, le due righe di chiusura sotto. Senza questo, il blocco .vsl (che è posizionato) passerebbe davanti a entrambi e un ingranaggio d'acciaio finirebbe steso sopra una riga di copy. Il testo si alza di un gradino e la decorazione resta dove deve stare: dietro. */ .hero__copy, .hero__note { position: relative; z-index: 1; } .vsl__gear { /* La misura segue la finestra, non la colonna: il riquadro è largo 960px fissi da desktop in giù, ma lo spazio attorno no, ed è quello che decide quanto ingranaggio si può vedere. */ --gear: clamp(92px, 19vw, 232px); /* Quanto spazio c'e' davvero fra il fianco del riquadro e il bordo della finestra. Il riquadro si ferma a 960px e la pagina a 1200, quindi su uno schermo largo avanzano 150px per lato e l'ingranaggio ci sta tutto; ma fra 768 e ~1100 il riquadro arriva quasi al bordo, e li' lo stesso scarto lo manderebbe fuori dallo schermo — dove .hero (overflow:hidden) lo taglierebbe di netto, a filo, come una fetta. Il 100% si risolve sulla larghezza di .vsl (e' dentro left/right), il 100vw sulla finestra: la differenza, mezza per lato, e' lo spazio buono. I 12px tolti sono il margine di sicurezza e il conto della barra di scorrimento, che sta dentro 100vw ma non dentro il layout. */ --bleed: max(0px, calc((100vw - 100%) / 2 - 12px)); position: absolute; z-index: -1; width: var(--gear); height: auto; pointer-events: none; user-select: none; /* L'ombra portata è quella delle card del tema blu, allungata: gli ingranaggi sono l'unico oggetto della pagina che sta davvero sopra al foglio, e si vede da qui. */ filter: drop-shadow(0 12px 24px rgba(16, 32, 70, 0.26)); } /* Gli scarti sono frazioni di --gear e non valori fissi: l'ingranaggio deve mostrare sempre la stessa fetta di sé, a qualunque corpo. Poco più di un terzo fuori, il resto nascosto dietro il riquadro — o meno, se --bleed dice che tanto spazio non c'è. In verticale il freno non serve: sopra e sotto il riquadro la pagina continua. */ .vsl__gear--bl { left: calc(-1 * min(var(--gear) * 0.34, var(--bleed))); bottom: calc(var(--gear) * -0.26); transform: rotate(-7deg); } .vsl__gear--tr { right: calc(-1 * min(var(--gear) * 0.34, var(--bleed))); top: calc(var(--gear) * -0.26); transform: rotate(9deg); } /* ─── Il cervello robotico, in cima e in mezzo ──────────────────────── Stessa famiglia degli ingranaggi — acciaio e blu, stessa ombra portata, stesso z-index negativo dentro il contesto chiuso di .vsl, stesso stare FUORI da .vsl__frame, che ha overflow:hidden e lo taglierebbe. Cambia il posto, e il posto dice una cosa diversa: gli ingranaggi stanno agli angoli e si leggono come contorno, questo sta sul bordo alto al centro e si legge come il soggetto da cui il video esce. Il freno --bleed degli ingranaggi qui non serve: quello nasce per non far uscire dallo schermo una sagoma che sporge DI LATO, e questa sporge in alto, dove la pagina continua. L'immagine è un quadrato con il cervello dentro e un po' d'aria intorno (circa il 5% per lato), quindi lo scarto è calcolato sul BOX, non sul disegno: a -0.62 il box sporge per il 62% della sua altezza e del cervello resta nascosto dietro al riquadro poco più di un terzo — abbastanza da appoggiarsi al bordo invece che galleggiarci sopra. */ .vsl__brain { /* La misura e lo sporto NON si decidono qui: arrivano da .hero__split (§13) come --brain e --brain-out. Il motivo è che la parte che sporge sopra il riquadro deve stare dentro lo spazio fra l'ultima riga di copy e il bordo del video — cioè dentro il gap della griglia — e due numeri che devono tornare non possono vivere in due posti diversi: la prima volta che se ne cambia uno solo, il cervello torna a passare sotto "anche se non sei bravo col computer.". Là sono dichiarati insieme, e il gap si CALCOLA dallo sporto. */ position: absolute; z-index: -1; left: 50%; top: calc(-1 * var(--brain-out)); /* L'ordine conta: prima il translate, che annulla il left: 50% e mette il centro dell'immagine sull'asse del riquadro, poi la rotazione, che gira intorno a quel centro e quindi non lo sposta. Invertiti, la rotazione girerebbe l'elemento prima di averlo centrato e il cervello scivolerebbe di lato. -9° è della stessa famiglia degli ingranaggi qui sopra (-7° e +9°): quel tanto che basta a togliere l'aria da oggetto incollato dritto, senza che si legga come storto. Sullo sporto non incide: la sagoma è quasi tonda, e una sagoma tonda ruotata occupa in altezza quello che occupava prima. */ transform: translateX(-50%) rotate(-9deg); width: var(--brain); height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 12px 24px rgba(16, 32, 70, 0.26)); } @media (max-width: 767px) { /* Sul telefono i conti cambiano due volte. La colonna lascia 16px di margine, non 150, quindi --bleed si ridurrebbe a un filo e l'ingranaggio sparirebbe dietro il riquadro: qui gli scarti tornano fissi e il freno non si applica. E un pelo di taglio sul bordo dello schermo, su una sagoma tonda, non si legge come un taglio — mentre su desktop, dove l'ingranaggio è grande, sì. */ .vsl__gear { --gear: clamp(84px, 30vw, 150px); } .vsl__gear--bl { left: calc(var(--gear) * -0.2); bottom: calc(var(--gear) * -0.32); } .vsl__gear--tr { right: calc(var(--gear) * -0.2); top: calc(var(--gear) * -0.32); } } /* ═══════════════════════════════════════════════════════════════════════ 07 · L'HERO È UN FOGLIO DI CIANOGRAFIA Non cambia il tema: la carta resta chiara, l'inchiostro resta navy. Cambia il FOGLIO — solo quello dell'hero, dove gira la macchina a hairline — che smette di essere una pagina bianca con una griglia appena accennata e diventa il foglio su cui quella macchina è stata disegnata. Tre mosse, in quest'ordine di profondità: la carta, i quadretti, il velo che li lasciava passare o no. ═══════════════════════════════════════════════════════════════════════ */ /* ─── 1 · LA CARTA ──────────────────────────────────────────────────── Un blueprint chiaro non è bianco: è un foglio appena azzurrato, con la luce dove si sta disegnando. Qui la luce sta in alto a destra — dov'è la macchina e dove il velo del testo si apre — e il fondo scende di mezzo tono verso la VSL, così le quattro sezioni sotto (che restano sulla carta #f4f7fb di blue.css) attaccano senza un gradino visibile. */ .hero { background: radial-gradient(112% 86% at 78% 0%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 56%), linear-gradient(172deg, #eef4fc 0%, #e7eff9 52%, #eff4fa 100%); } /* ─── 2 · I QUADRETTI, A DUE PASSI ──────────────────────────────────── Un foglio da disegno tecnico ha due reticoli: il quadro grande e la suddivisione fine dentro. Qui 64px — il passo del sistema, lo stesso di tutte le altre sezioni — e 16px, un quarto esatto, in modo che le righe fini cadano sempre dentro al quadro e non ci vadano mai a cavallo. L'alpha è il punto della richiesta: blue.css teneva il filo navy a 0.05, cioè al limite del visibile su carta. Qui il quadro va a 0.17 e la suddivisione a 0.075 — abbastanza da leggersi come quadretti, abbastanza poco da restare dietro. Oltre lo 0.22 il foglio diventa carta millimetrata e il titolo ci combatte contro. La maschera tiene più a lungo (62% invece di 45%): se i quadretti devono vedersi, devono arrivare almeno fino al riquadro del video, o la griglia legge come una cornice in cima invece che come il foglio sotto a tutto. */ .hero .grid-bg { background-image: linear-gradient(to right, rgba(19, 56, 134, 0.17) 1px, transparent 1px), linear-gradient(to bottom, rgba(19, 56, 134, 0.17) 1px, transparent 1px), linear-gradient(to right, rgba(19, 56, 134, 0.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(19, 56, 134, 0.075) 1px, transparent 1px); background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px; background-position: center top; -webkit-mask-image: radial-gradient(128% 108% at 50% 0%, #000 62%, transparent 100%); mask-image: radial-gradient(128% 108% at 50% 0%, #000 62%, transparent 100%); } /* ─── 3 · IL VELO SOTTO LA COLONNA DEL TESTO ────────────────────────── Esiste per tenere leggibile il titolo sopra la macchina, e a 0.82 di opacità faceva il suo lavoro cancellando però anche i quadretti — proprio nella metà sinistra, dove si guarda per primo. Scende a 0.5 perché adesso il titolo non ha più bisogno di tanto: le frasi chiave stanno su piastra blu piena, la chiusa ha il contorno, e i raccordi sono navy su carta chiara. Quello che resta basta a spegnere le hairline della macchina dietro alle lettere. */ .hero::after { background: linear-gradient(to right, rgba(238, 244, 252, 0.5) 0%, rgba(238, 244, 252, 0.26) 46%, rgba(238, 244, 252, 0) 82%); } /* ═══════════════════════════════════════════════════════════════════════ 08 · IL RACCORDO A CORPO VARIABILE, ANCHE DA TABLET IN SU [data-fit-lines="N"] nell'HTML dice "vai a capo da solo, ma non oltre N righe"; js/main.js cerca il corpo più grande che ci sta, e lo fa SOLO dove il CSS gli dà i due limiti. style.css li dichiara soltanto sotto i 767px, quindi da tablet in su i raccordi uscivano dal calcolo e tornavano al clamp della classe: 34px fissi, con la seconda riga che si fermava a metà colonna e lasciava il bordo destro sfilacciato. Qui i limiti ci sono anche sopra i 767px, e il raccordo lungo torna a fare quello che fanno tutte le altre righe del titolo: riempire la colonna, su due righe, a qualunque larghezza. Il tetto a 56px è il punto in cui il raccordo resta un raccordo: le frasi chiave arrivano a 128px, e fra le due scale ci deve restare un salto che si vede. La regola sta dentro un min-width apposta — senza, avendo la stessa specificità e arrivando dopo, spegnerebbe i limiti del telefono di style.css e il calcolo si fermerebbe al piano sbagliato. ═══════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .hero__title-mid { --fit-max: 56px; --fit-min: 20px; } } /* Nota sul raccordo corto ("e la terza sera a un fortunato vincitore", data-fit-lines="1"): con i limiti aperti anche lui si allarga fino a riempire la riga, e a 820px di colonna il corpo che ci sta finisce esattamente sul punto di rottura. Lì js/main.js arrotondava la misura verificata al centesimo più vicino, cioè a volte in SU, e la riga scritta per starci in una ne prendeva due. Il calcolo ora arrotonda per difetto (js/main.js, fitLines): la misura scelta non può più superare quella provata. */ /* ═══════════════════════════════════════════════════════════════════════ 09 · L'OCCHIELLO, DENTRO LA STRISCIA "Per chi vuole guadagnare fino a 3.000€ in più al mese…" esce dalla colonna del titolo ed entra nello STESSO contenitore dell'annuncio: una sola banda, due righe. Sopra chi parla e quando, sotto per chi. E prende anche la TIPOGRAFIA della striscia: Geist Mono, 14px, maiuscolo, tracking 0.04em. Era Google Sans semibold a corpo di lettura, cioè la riga più grossa delle due, e in una banda che è un ticker faceva da titolo. Allo stesso corpo e nello stesso carattere della riga sopra, invece, le due righe diventano quello che sono: una targa in due parti, chi parla e per chi. Il peso si ferma a 500 perché il file di Geist Mono arriva fino a lì (wght 400;500 nel link in ): un 600 lo disegnerebbe il browser, ingrassando le aste a mano. Il navy lo separa dal resto della riga sopra, che è grigio freddo. La banda si allarga di quel tanto che serve, e il filo in spettro che la chiude sotto (.top-bar::after) adesso chiude tutte e due le righe. ═══════════════════════════════════════════════════════════════════════ */ .top-bar .hero__kicker { /* La stessa misura di colonna della riga sopra, così le due righe della banda stanno sullo stesso asse e sullo stesso limite. */ max-width: var(--page-max-width); margin: var(--spacing-8) auto 0; text-align: center; font-family: var(--font-geistmono); font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; /* Il colore è quello della riga forte della striscia, non del titolo: qui l'occhiello non apre un blocco, chiude una banda. */ color: var(--color-bone-white); } /* ═══════════════════════════════════════════════════════════════════════ 10 · L'ATTACCO RIENTRA NEL RACCORDO "Davanti ai tuoi occhi" era una riga sua, a una scala più piccola, e sopra al raccordo faceva tre righe in tutto: l'attacco, e poi le due del raccordo. Adesso è la prima frase del raccordo — stesso testo, stesso ordine, un elemento in meno a capo. Il tag resta nel markup perché resta un pezzo di copy che ha un nome: è l'attacco, e se un domani deve tornare a vivere da solo basta togliere questa regola. Qui dentro, però, deve sparire come scatola e come scala: in linea, e tutto ereditato dal raccordo che lo contiene — corpo, peso, tracking, colore. Il corpo soprattutto: js/main.js misura il raccordo per riempire due righe, e una parola a corpo diverso in mezzo falserebbe la misura. ═══════════════════════════════════════════════════════════════════════ */ .hero__title-mid .hero__title-lead { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; } /* ═══════════════════════════════════════════════════════════════════════ 11 · LA CUCITURA FRA DUE PIASTRE CONSECUTIVE Fra "LA MACCHINA PER" e "GUADAGNARE DA CASA…" c'erano 6,3px; fra "CREARTI UNA SECONDA ENTRATA" e "DA 50-100-150€ AL GIORNO" 6,6px. Sulla carta la stessa misura — eppure la seconda coppia si legge staccata e la prima no, e sul telefono la differenza diventa 3,9px contro 7,8px. Il motivo è che quei pixel non sono la stessa cosa. La distanza la dava il gap del contenitore, che è in PIXEL e non si muove; le piastre invece scalano col corpo che js/main.js assegna riga per riga. Le piastre del titolo sono alte 107px e 6,3px fra loro sono un filo; le piastre del sottotitolo sono alte 56px e 6,6px sono il doppio, in proporzione. Sul telefono le piastre del sottotitolo scendono a 26px e quei pixel diventano un corridoio. Quindi qui il gap del contenitore si ANNULLA — è il `- var(--stack-gap)` — e la distanza si rifà in em, cioè nella stessa unità in cui è scritto tutto il resto del badge. Da lì in poi le due coppie si comportano uguale a qualunque corpo, e non c'è più una misura da ritarare quando il testo cambia o la colonna si stringe. 0.24em è il numero che tiene il titolo dov'era (le piastre grandi non si muovono di un pixel) e porta il sottotitolo alla stessa proporzione. Deve stare DOPO il margin-block di §03, o quello lo riscrive. ═══════════════════════════════════════════════════════════════════════ */ .hero__title-big:not(.hero__title-big--em) + .hero__title-big:not(.hero__title-big--em), .hero__sub-big + .hero__sub-big { margin-top: calc(0.24em - var(--stack-gap)); } /* Sul telefono la piastra ha scarti suoi (§05, un filo più stretti): il conto cambia di un centesimo di em, e senza questa riga la cucitura uscirebbe mezzo pixel più larga. */ @media (max-width: 767px) { .hero__title-big:not(.hero__title-big--em) + .hero__title-big:not(.hero__title-big--em), .hero__sub-big + .hero__sub-big { margin-top: calc(0.23em - var(--stack-gap)); } } /* ═══════════════════════════════════════════════════════════════════════ 12 · UNA MISURA SOLA PER L'HERO, E STA IN MEZZO Sul desktop l'hero stava dentro quattro colonne diverse, e nessuna allineata all'altra: il titolo a 820px ALLINEATO A SINISTRA, il sottotitolo a 760 (quindi 60px più corto, con le due coppie di piastre che finivano in due punti diversi), la VSL a 960 ma centrata, la pill a 620 anche lei centrata. Quattro bordi sinistri e quattro bordi destri dentro un blocco solo. Adesso i tre blocchi di contenuto — titolo, sottotitolo, video — hanno UNA misura, 820px, e stanno al centro della pagina. Un bordo sinistro e un bordo destro per tutto l'hero, e l'asse è quello della pagina. 820 non è un numero scelto adesso: è la misura di colonna del sistema (style.css, .hero__title da 768px in su). Ci stanno i tetti del calcolo così come sono — "100% GRATIS!" chiede 121px contro i 128 di --fit-max — quindi qui non c'è niente da rialzare. La pill resta a 620 ed è voluto: è un bottone, non un blocco di contenuto, e un bottone largo quanto il titolo si legge come una barra. Sul telefono non cambia NIENTE: tutta la regola sta sopra i 768px. ═══════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { /* La misura dell'hero, scritta una volta. 780 e non gli 820 di style.css: il blocco di copy è alto quasi quanto è largo, quindi quaranta pixel di colonna in meno sono quaranta pixel di video che risalgono sopra la piega. È il punto in cui le righe restano lunghe e del riquadro si vede comunque un bordo su un portatile da 864. */ .hero__inner { --hero-measure: 780px; } .hero__title, .hero__sub, .hero__note { max-width: var(--hero-measure); margin-inline: auto; } .hero__split>.vsl { max-width: var(--hero-measure); } /* ─── Quello che si guadagna in verticale ───────────────────────── In colonna unica il video sta SOTTO il copy, quindi ogni pixel di aria sopra di lui lo spinge più giù. Questi tre sono i pixel che si possono togliere senza che si veda: l'attacco dell'hero (la striscia qui sopra fa già da stacco), lo stacco fra titolo e sottotitolo (che sono una frase sola) e il passo fra copy e video. Trentadue pixel in tutto. */ .hero { padding-top: var(--spacing-16); } .hero__title { margin-bottom: var(--spacing-16); } } /* ═══════════════════════════════════════════════════════════════════════ 13 · LA VSL DENTRO .hero__split Il markup tiene la VSL dentro .hero__split, che è la griglia del copy. Non è per affiancarle — l'hero resta a colonna unica a ogni larghezza — ma perché copy e video siano due elementi della stessa griglia e la distanza fra loro la decida UN valore solo, il gap del contenitore, invece del margine di uno dei due. ═══════════════════════════════════════════════════════════════════════ */ /* ─── I margini della VSL vanno via TUTTI, non solo quello sopra ────── In style.css la VSL è `margin: 32px auto 0`: un blocco largo 960px che si centra da sé. Dentro una griglia quei due `auto` non centrano, fanno molto di peggio — un elemento di griglia con margini laterali automatici smette di stirarsi sulla colonna e passa a fit-content. E il contenuto, qui, non ha una larghezza propria: .vsl__frame non ha altezza né larghezza intrinseche, il 16:9 lo tiene .vsl__placeholder con aspect-ratio, che una misura la ricava DALLA larghezza. Tolta la larghezza, resta il nulla: in prova la VSL è uscita larga 2px — i due bordi del riquadro — e alta altrettanto. Il centraggio vero, con una larghezza dichiarata, lo fa §12. Il margine sopra, intanto, si sommerebbe al gap della griglia. Via tutti e due i problemi con la stessa riga. */ .hero__split>.vsl { /* width: 100% e non lo stretch implicito: un elemento di griglia con margini laterali automatici smette di stirarsi e passa a fit-content, e qui il contenuto una larghezza propria non ce l'ha — .vsl__frame non ha misure intrinseche, il 16:9 lo tiene .vsl__placeholder con aspect-ratio, che l'altezza la ricava DALLA larghezza. Senza una larghezza dichiarata il riquadro collassa: in prova è uscito largo 2px, i due bordi, e alto altrettanto. Con una larghezza definita i due `auto` tornano a fare il loro mestiere e centrano. Il margine sopra, invece, va a zero: la distanza dal copy la fa il gap della griglia, o si sommano. */ width: 100%; margin: 0 auto; } /* Il gap della griglia È la distanza copy → video, e va rimessa dov'era quando la faceva il margine della VSL: 24px sul telefono, 32 sopra. */ /* ─── Il gap si calcola, non si sceglie ─────────────────────────────── Fra l'ultima riga di copy e il bordo alto del video ci deve stare la parte di cervello che sporge (§06), più l'aria che la stacca dal testo. Scrivere un numero fisso qui voleva dire ritrovarsi il cervello sotto la riga "anche se non sei bravo col computer." ogni volta che si toccava la sua misura — è già successo. Quindi il gap non è un valore, è una SOMMA: quanto sporge, più lo stacco. I numeri in gioco sono tre, e vanno distinti o il conto non torna — è l'errore che ha lasciato il cervello troppo staccato dal testo: · --brain-out (45%) è quanto sporge il BOX dell'immagine. Serve a posizionarla, e basta. · --brain-ink (33,8%) è quanto sporge il DISEGNO. Il png è un quadrato di 1254px con dentro un cervello che parte 163px sotto il bordo alto — misurato sul canale alfa, non a occhio: è il 13% del lato, non il 5% che sembrava. La rotazione di -9° ne recupera un paio scarsi, quindi l'aria vera in cima è circa l'11,2%, e il disegno sporge 45% - 11,2% = 33,8%. Chi guarda la pagina misura da QUI. · --brain-air è lo stacco vero fra l'ultima riga di copy e la calotta. Prima questo numero diceva 32px e se ne vedevano una quarantina, perché l'aria trasparente del png ci si sommava di nascosto. Il gap si calcola sull'inchiostro, non sul box, quindi --brain-air adesso è la distanza che si vede davvero. */ .hero__split { --brain: clamp(140px, 36vw, 190px); --brain-out: calc(var(--brain) * 0.45); --brain-ink: calc(var(--brain) * 0.338); --brain-air: var(--spacing-24); gap: calc(var(--brain-ink) + var(--brain-air)); } @media (min-width: 768px) { .hero__split { --brain: clamp(200px, 24vw, 340px); --brain-air: var(--spacing-20); } }