:root{--navy:#0A1530;--blue:#0D3B8E;--green:#2DBE6A;--green2:#29C86B;--ink:#152238;--muted:#667085;--soft:#F5F7FA;--line:#E6EAF0;--white:#fff;--shadow:0 24px 70px rgba(10,21,48,.12);--nav-h:82px}*{box-sizing:border-box}html{ scroll-behavior:smooth; /* --------------------------------------------------------------------- L'INTESTAZIONE E' FISSA, E COPRIVA L'INIZIO DI OGNI ANCORA. Su /condizioni si vedeva peggio che altrove: cliccando una voce dell'indice il titolo dell'articolo finiva sotto la barra, e si cominciava a leggere dal secondo comma — su un documento in cui i commi sono numerati e ci si arriva per rimando. Altrove non si notava per caso, non per progetto: `.section` ha 112px di spaziatura in cima, che assorbono la barra. Un'ancora su qualcosa che non e' una sezione — un titolo, una riga — finiva coperta. `scroll-padding-top` sta sul CONTENITORE che scorre, quindi vale per ogni bersaglio di ogni pagina, anche per quelli che nasceranno domani. L'alternativa, `scroll-margin-top` sui bersagli, obbliga a ricordarsene ogni volta — ed e' lo stesso ragionamento per cui la sottolineatura dei link e' il default e si toglie dove serve. Il conto: `--nav-h` e' l'altezza della barra, +1px del suo bordo, +18px perche' il testo non parta incollato. --------------------------------------------------------------------- */ scroll-padding-top:calc(var(--nav-h) + 19px) } body{margin:0;color:var(--ink);background:#fff;font:16px/1.65 Inter,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.08;letter-spacing:-.035em}h1{font-size:clamp(2.9rem,5.4vw,5.7rem);margin-bottom:24px}h2{font-size:clamp(2.1rem,3.8vw,4.1rem);margin-bottom:20px}h3{font-size:1.35rem}/* --------------------------------------------------------------------------- LINK La regola era `text-decoration:none;color:inherit`, cioe' un link in mezzo a un paragrafo era indistinguibile dal testo intorno: stesso colore, stesso peso, nessuna sottolineatura. «Le altre si trovano nelle domande frequenti» su /prezzi conteneva un link che nessuno poteva vedere. Ora la sottolineatura e' il DEFAULT e si toglie dove il link non e' testo: pulsanti, menu, logo, colonne del piede, icone social. E' il verso giusto — se domani si aggiunge un link dentro un paragrafo nuovo, si vede da solo invece di sparire finche' qualcuno non se ne accorge. --------------------------------------------------------------------------- */ a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(21,34,56,.35)} a:hover{text-decoration-color:currentColor} /* Sul fondo scuro il tratto tenue sparisce: si schiarisce. */ .demo a,.final a,.firma-box a,footer a{text-decoration-color:rgba(255,255,255,.4)} /* Dove il link NON e' testo: e' un comando, e la sottolineatura lo sporca. `.footgrid>div>a` prende le voci delle tre colonne, che stanno dentro il div senza paragrafo — e lascia sottolineato l'indirizzo email, che invece e' in un

ed e' testo a tutti gli effetti. */ .btn,.nav nav a,.logo,.skip,.social a,.footgrid>div>a{text-decoration:none} /* Il menu' NON si sottolinea al passaggio del mouse. La regola valeva per due posti insieme: le voci in alto e i link del piede. Nel piede la sottolineatura serve — sono elenchi di collegamenti in mezzo ad altro testo, e il passaggio del mouse e' l'unica conferma che quella riga si puo' premere. In alto no: sono sei voci sole, distanziate, e che siano collegamenti si capisce da dove stanno. Al posto della sottolineatura, il colore: la voce si scurisce verso il navy, che e' gia' il colore della voce attiva. Senza NIENTE al passaggio resterebbe solo il cursore a dire che si puo' premere — misurato: a riposo e in hover il testo era identico — e su una barra di sei voci il puntatore non basta. Il colore non sposta un pixel, mentre la sottolineatura ne spostava tre e faceva saltellare la riga mentre il mouse la attraversava. */ .footgrid>div>a:hover{text-decoration:underline;text-underline-offset:3px}.wrap{width:min(1220px,calc(100% - 40px));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:18px;top:18px;z-index:1000;background:#fff;padding:12px}.header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(230,234,240,.75)}.nav{height:var(--nav-h);display:flex;align-items:center;gap:36px}.logo img{width:168px;display:block}/* `align-items:center` — le voci non si stirano, i testi si allineano. Senza, il contenitore flex vale `stretch`: le voci diventano alte 50px come il pulsante che sta con loro dal pacchetto 142, ma il loro testo resta in cima mentre quello del pulsante e' centrato dal suo `inline-flex`. Misurato: il testo delle voci a 28px dall'alto, quello del pulsante a 41 — tredici pixel di scarto su una barra dove tutto dovrebbe stare sulla stessa riga. Il difetto e' nato quando il pulsante e' entrato nel