/* ═══ UNA RIGA CAMBIATA RISPETTO A st26 ═══════════════════════════════════════ L'indirizzo di Oswald era ASSOLUTO — `/assets/landing/fonts/…` — cioè dalla radice del dominio. Da qui sotto `/grecale` funzionava lo stesso, ma andando a prendere il file NELL'ALBERO DI st26: un filo di dipendenza fra due cose che devono restare separate, e che si sarebbe scoperto il giorno che st26 sposta quella cartella. Adesso è relativo: dentro un foglio di stile un indirizzo relativo si risolve rispetto AL FOGLIO, quindi trova la nostra copia sia qui sia il giorno che il sito starà alla radice. Tutto il resto del file è copiato senza toccare niente. */ /* ── IL CARATTERE DEI NUMERI ──────────────────────────────────────────────── Oswald, servito da noi. Il sito lo chiedeva da sempre in tre fogli diversi ma non era caricato da nessuna parte: cadeva sul carattere di sistema, e i numeri che si vedevano non erano mai stati quelli voluti. Serve perché è STRETTO e ALTO — le cifre stanno in poco spazio e si leggono grandi — e perché lo zero è pulito, senza il puntino dentro che hanno i caratteri da terminale: su un conteggio quel puntino sembra sporco. */ @font-face{ font-family:'Oswald'; src:url('fonts/oswald-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } /* ════════════════════════════════════════════════════════════════════════════ TIPOGRAFIA DEL LANDING — UN FILE SOLO. Compito: decidere quale carattere e quale corpo hanno il marchio, la voce, i titoli, i sottotitoli e il testo. Tutto il resto li usa. Validato: Note: va caricato DOPO land.css · vale sia per st26 sia per account.php ═══ PERCHÉ ESISTE ════════════════════════════════════════════════════════ Perché prima le misure stavano sparse: un clamp qui, un font-size lì, e ogni volta che serviva una riga nuova se ne inventava una. Così due righe che dicono la stessa cosa finiscono di due grandezze diverse, e la pagina non ha una voce — ne ha dieci. Da qui in poi: se una misura non è in questo file, non si scrive. Si aggiunge un ruolo qui, e lo si usa. ═══ I QUATTRO CARATTERI, E COSA DICONO ═══════════════════════════════════ marchio Lobster il nome. Solo il nome. voce JetBrains Mono chi ti parla: il claim «il sistema operativo della vita siciliana» e le righe che presentano una cosa. Monospaziato = digitale, terminale. titolo Fraunces i titoli di sezione. Serif, con l'italico in oro. testo quello di sistema tutto il resto: si legge, non si guarda. In Lobster il grassetto NON esiste: chiederlo fa disegnare al browser una finta grassezza, e viene sempre sporca. Per questo il marchio non ha mai . ═══ COME SI USA ══════════════════════════════════════════════════════════ Nei fogli e nelle pagine si scrive var(--f-voce) e var(--t-voce), mai il nome del carattere e mai un numero. ════════════════════════════════════════════════════════════════════════════ */ :root{ /* ── I CARATTERI ─────────────────────────────────────────────────────── */ --f-marchio: 'Lobster', cursive; --f-voce: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --f-titolo: 'Fraunces', 'Georgia', serif; --f-testo: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ── I NUMERI ──────────────────────────────────────────────────────────── I conteggi delle card — post, follower, seguiti — hanno un carattere loro, e non è un vezzo: le cifre devono essere tutte della STESSA LARGHEZZA, altrimenti passando da 9 a 10 la riga si sposta e sembra che si muova qualcosa. JetBrains Mono è monospaziata per natura, quindi lo è già. Oswald adesso c'è davvero: sta in /assets/landing/fonts, servito da noi. Prima era un nome scritto in tre fogli diversi che non disegnava niente. */ --f-numeri: 'Oswald', 'Hanken Grotesk', system-ui, sans-serif; /* ── I CORPI ───────────────────────────────────────────────────────────── Sono clamp: minimo, quanto cresce con la larghezza, massimo. Così la stessa riga sta bene su un telefono stretto e su un monitor largo senza due regole e senza un punto di rottura in mezzo dove la pagina "scatta". */ --t-marchio: clamp(3rem, 12vw, 5.4rem); /* SicilyTravel, l'hero */ --t-marchio-min: 1.55rem; /* lo stesso, nell'intestazione */ /* LA VOCE. È il corpo di «il sistema operativo della vita siciliana», ed è lo stesso di ogni riga che presenta qualcosa — «Scorri le tue maschere» sta qui. Due righe che fanno lo stesso mestiere hanno la stessa misura: se una è più grande dell'altra, chi guarda pensa che conti di più. */ --t-voce: clamp(.86rem, 3.5vw, 1.2rem); --t-titolo: clamp(1.8rem, 7vw, 2.7rem); /* h2 di sezione */ --t-sottotitolo: clamp(1.15rem, 4.5vw, 1.5rem); --t-testo: 1.02rem; /* il corpo normale */ --t-testo-forte: 1.12rem; /* l'apertura di una sezione */ --t-minuto: .86rem; /* le note, le firme */ /* ── L'INTERLINEA ────────────────────────────────────────────────────── */ --i-stretta: 1.08; /* titoli: righe vicine, si leggono come un blocco */ --i-media: 1.35; /* la voce */ --i-larga: 1.5; /* il testo da leggere di fila */ /* ── LA LARGHEZZA DI LETTURA ───────────────────────────────────────────── Oltre i 60 caratteri l'occhio perde il capo della riga successiva; sotto i 25 il testo si spezza a singhiozzo. Sono misure di leggibilità, non gusto. */ --l-testo: 52ch; --l-voce: 30ch; } /* ── I RUOLI ──────────────────────────────────────────────────────────────── Da qui in giù non ci sono numeri: solo i nomi di sopra. Questo foglio si carica DOPO land.css, quindi queste righe vincono sulle vecchie senza doverle andare a togliere una per una da due copie diverse dello stesso file. */ .brand, .ln-brand, .ln-drawer-brand, .lob{ font-family: var(--f-marchio); font-weight: 400; /* in Lobster non c'è altro peso */ font-style: normal; } .brand{ font-size: var(--t-marchio); line-height: .9; } .ln-brand, .ln-drawer-brand{ font-size: var(--t-marchio-min); line-height: 1; } .claim{ font-family: var(--f-voce); font-size: var(--t-voce); line-height: var(--i-media); font-weight: 500; letter-spacing: -.02em; /* ERA LONTANISSIMO. In land.css il claim aveva margin-top:calc(.55rem + 14px) — quasi mezzo centimetro — ereditato da quando stava da solo sotto l'hero. Ma un claim non è un paragrafo a sé: è la SECONDA RIGA di quello che sta sopra. «Qui la fai, qui la trovi» appartiene a «La Sicilia», «Ti aspettano le tue maschere» appartiene a «Sei dentro». Staccate, sembrano due annunci diversi messi in fila per caso. */ margin-top: .2rem; } h2.sec{ font-family: var(--f-titolo); font-size: var(--t-titolo); line-height: var(--i-stretta); font-weight: 600; letter-spacing: -.01em; } .lead{ font-size: var(--t-testo); line-height: var(--i-larga); max-width: var(--l-testo); } .lead.forte{ font-size: var(--t-testo-forte); } .wt-min, .oa-nota{ font-size: var(--t-minuto); line-height: var(--i-larga); } /* LA RIGA CHE PRESENTA — stesso mestiere del claim, quindi stessa misura e stesso carattere. Centrata, perché presenta e non si legge di fila. */ .ac-scorri{ font-family: var(--f-voce); font-size: var(--t-voce); line-height: var(--i-media); text-align: center; margin: .1rem auto 0; max-width: var(--l-voce); color: rgba(234, 244, 251, .9); } /* Il grassetto qui dentro resta bianco; la parola che porta il colore usa .c-life, come «vita siciliana» nel claim e «maschere» nella card di stato: l'oro indica dove guardare, e lo fa sempre nello stesso modo. */ .ac-scorri b{ color:#fff; font-weight:600; } .ac-scorri .c-life{ font-weight:600; } /* Sotto un titolo, ancora più vicino: lì il legame è evidente e basta un filo di respiro perché non si tocchino. */ h2.sec + .claim, .st-titolo + .st-regola{ margin-top: .1rem; } /* IL CLAIM DELL'HERO NON SI TOCCA. «il sistema operativo della vita siciliana» sta sotto SicilyTravel con la sua aria, e va lasciato dov'è: l'ho spostato due volte per sbaglio, tirando una regola generale che lo prendeva in mezzo. Qui gli si ridà il valore che aveva in land.css, esatto. */ .brand + .claim{ margin-top: calc(.55rem + 14px); } /* ═══ LO SPAZIO NON ERA SOTTO: ERA SOPRA ═══════════════════════════════════ Continuavo ad abbassare il margine del claim e non si muoveva niente, perché il vuoto non lo faceva lui — lo faceva il TITOLO, che si porta 1.2rem di margine sotto (h2.sec). Togliere zero da zero non sposta niente. Quando un titolo ha un claim attaccato, quel margine non serve: il respiro va messo dopo la coppia, non in mezzo. */ h2.sec:has(+ .claim){ margin-bottom: .35rem; } /* un filo, non zero */ .sic-sotto{ margin-top: .1rem; } /* I conteggi delle card, ovunque siano: stessa maschera in tutto il sito. */ .ac-stats-n b, .ig-stats-nums b, .st-conta b, .mini-stats .n b{ font-family: var(--f-numeri); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; } /* ═══ IL RETTANGOLO GRIGIO AL TOCCO ═══════════════════════════════════════ Non lo disegna nessuna nostra regola: lo mette il telefono. iOS e Android, quando tocchi un link o un bottone, ci stampano sopra un'evidenziazione — un rettangolo scuro grande quanto l'elemento — per dire «l'ho sentito». Su un'icona sola diventa una cornicetta che compare dal niente e sembra un difetto. Aveva senso nel 2008, quando i siti non davano nessun altro segno del tocco. Qui ogni cosa toccabile ha già il suo — si abbassa, cambia colore, si apre — quindi il rettangolo è solo rumore, e si spegne per tutti. `transparent` e non `none`: `none` su qualche browser vecchio riattiva il comportamento di serie invece di toglierlo. */ a, button, [role="button"], label, summary, input, select, textarea{ -webkit-tap-highlight-color: transparent; }