/* ============================================================ QUOTAQUID — IL SITO PUBBLICO, DISEGNO «SCHEDA TECNICA» Nero, griglia a puntini, titoli enormi, tutto etichettato in monospaziato come uno strumento di misura. PERCHE' UN FOGLIO SUO E NON DENTRO stile.css. Il disegno nuovo copre sette pagine su ventidue: le altre cinque italiane e le dieci spagnole sono ancora quelle di prima, e usano le classi di `stile.css`. Riscrivere quel foglio le avrebbe rotte tutte insieme, in silenzio, e nessuno se ne sarebbe accorto finche' non apriva una pagina spagnola. Cosi' invece convivono: chi e' rifatto punta a questo foglio, chi non lo e' ancora punta a quello vecchio. Quando saranno rifatte tutte, `stile.css` si cancella in un colpo solo. LA STRUTTURA E' FATTA DI FILETTI, NON DI RIQUADRI. Niente angoli arrotondati, niente ombre, niente bordi attorno alle schede: le griglie hanno `gap:1px` su fondo `--rule` e le celle il fondo della pagina, quindi la linea che si vede E' il fondo che traspare. ============================================================ */ /* ---- I TOKEN. Un solo colore d'accento, nessun secondo colore. ---- */ :root{ --bg:#08080a; --ink:#f2f2f0; --ink-60:rgba(255,255,255,.60); --ink-50:rgba(255,255,255,.50); --ink-45:rgba(255,255,255,.45); --ink-42:rgba(255,255,255,.42); --ink-22:rgba(255,255,255,.22); --accent:#ff4a38; --accent-soft:#ff8b78; /* il corallo leggibile su fondo scuro */ --rule:rgba(255,255,255,.12); --rule-soft:rgba(255,255,255,.09); --rule-strong:rgba(255,255,255,.30); /* la cornice di un campo sotto il dito */ --rule-chip:rgba(255,255,255,.18); /* la cornice di una pastiglia */ --ink-35:rgba(255,255,255,.35); /* il testo di esempio dentro un campo */ --panel:rgba(255,255,255,.02); --ink-55:rgba(255,255,255,.55); /* il testo dentro le griglie */ --rule-10:rgba(255,255,255,.1); /* i filetti fra le fasce */ --trama:rgba(255,255,255,.075); /* i puntini del fondo */ --campo:rgba(255,255,255,.045); /* il fondo di un campo del modulo */ --campo-fuoco:rgba(255,255,255,.06); /* lo stesso, mentre ci si scrive */ --accent-wash:rgba(255,74,56,.07); /* la colonna del piano consigliato */ --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --lato:40px; /* il padding laterale, uno per tutto il sito */ } /* ---- LA VERSIONE CHIARA ---- Non e' «gli stessi colori schiariti»: e' lo stesso disegno con l'inchiostro e la carta scambiati. Due cose non si rovesciano. PRIMA: il corallo. Al buio serve un rosso che si accenda (#ff4a38); alla luce quello stesso rosso su carta bianca vibra e si legge male, quindi si scende al rosso del marchio (#F0362F). SECONDA, e conta di piu': `--accent-soft`. Al buio e' un corallo PIU' CHIARO dell'accento, perche' deve staccarsi dal nero. Alla luce dev'essere PIU' SCURO, se no un testo secondario in rosa chiaro su bianco non lo legge nessuno. Rovesciarlo insieme al resto e' l'errore che rende illeggibile mezza pagina senza rompere niente. Il tema lo mette lo script nel ``, prima che la pagina si disegni: chi non ha mai scelto segue il sistema, chi ha scelto si ricorda. */ :root[data-tema="chiaro"]{ color-scheme:light; --bg:#fbfbf9; --ink:#16171a; --ink-60:rgba(20,21,24,.66); --ink-55:rgba(20,21,24,.60); --ink-50:rgba(20,21,24,.56); --ink-45:rgba(20,21,24,.50); --ink-42:rgba(20,21,24,.48); --ink-35:rgba(20,21,24,.40); --ink-22:rgba(20,21,24,.24); --accent:#f0362f; --accent-soft:#c71e20; --rule:rgba(20,21,24,.16); --rule-soft:rgba(20,21,24,.11); --rule-10:rgba(20,21,24,.12); --rule-strong:rgba(20,21,24,.34); --rule-chip:rgba(20,21,24,.20); --panel:rgba(20,21,24,.028); --accent-wash:rgba(240,54,47,.06); --trama:rgba(20,21,24,.075); --campo:rgba(20,21,24,.035); --campo-fuoco:rgba(20,21,24,.05); } :root{color-scheme:dark} /* IL MARCHIO HA DUE FILE, e non e' una raffinatezza: `logo-white.png` su carta bianca e' un rettangolo vuoto. Ci sono tutte e due nella pagina e se ne nasconde una -- non si scambia l'indirizzo con JavaScript, se no nel mezzo secondo prima che lo script parta il marchio non c'e'. */ .logo .chiaro{display:none} :root[data-tema="chiaro"] .logo .scuro{display:none} :root[data-tema="chiaro"] .logo .chiaro{display:block} *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* LA TRAMA DI FONDO STA SUL BODY, NON SULLE SEZIONI. Messa sezione per sezione i puntini ripartono a ogni blocco e si vede la cucitura: qui e' una sola, continua, e i blocchi pieni -- il corallo, le fasce `--panel` -- la coprono passandoci sopra. */ body{ background-color:var(--bg); background-image:radial-gradient(var(--trama) 1px,transparent 1px); background-size:26px 26px; color:var(--ink); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* Ogni cifra mostrata e' monospaziata a larghezza fissa: in una colonna di importi le cifre devono stare incolonnate, se no non si confrontano. */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ============================================================ 1. LA BARRA ============================================================ */ .barra{ display:flex;align-items:center;gap:28px; padding:18px var(--lato); border-bottom:1px solid var(--rule-10); } /* IL SEGNAPOSTO ERA UN QUADRATO CORALLO DI 11 PX, e quello che va sostituito e' il QUADRATO -- non la scritta accanto, che e' il marchio scritto nell'alfabeto monospaziato di tutto il sito. Al posto del quadrato ci sta l'icona vera, con lo stesso ingombro. */ .barra .logo{display:flex;align-items:center;flex:none} /* IL SEGNAPOSTO ERA ALTO 11 PX, ma era un quadratino: il logo intero, con la sua lettering, a quella misura diventa illeggibile e sparisce accanto a cinque voci maiuscole. Ventisei pixel e' l'altezza a cui la parola si legge e il marchio pesa quanto deve -- e' la prima cosa della pagina. */ .barra .logo img{height:26px;width:auto;flex:none} .barra nav{ display:flex;gap:22px;margin-left:16px; font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-50)} .barra nav a:hover{color:var(--ink)} /* la voce della pagina in cui ti trovi: filetto corallo sotto, non un fondo */ .barra nav a.qui{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:3px} .barra .azioni{ margin-left:auto;display:flex;align-items:center;gap:16px; font-family:var(--mono);font-size:10.5px;letter-spacing:.12em} .barra .lingue{color:var(--ink-42)} /* DELLE DUE LINGUE, UNA SOLA E' UN COLLEGAMENTO: quella in cui non sei. `.lang` e' proprio quella, e non aveva una regola sua -- si leggeva come l'altra, cioe' come la lingua in cui gia' stai. Due parole identiche di cui una si puo' premere e l'altra no. */ .barra .lingue .lang{color:var(--ink-60)} .barra .lingue .lang:hover{color:var(--accent-soft)} /* L'INTERRUTTORE DEL TEMA. Due segni disegnati col bordo, non due emoji: un'emoji cambia forma da un sistema all'altro e in una barra di undici pixel diventa una macchia. Si vede quello che si ACCENDEREBBE premendo -- al buio la luna e' spenta e si mostra il sole -- perche' un pulsante deve dire dove porta, non dove sei. */ .interr-tema{width:30px;height:30px;border:1px solid var(--rule); background:none;cursor:pointer;display:grid;place-items:center;padding:0} .interr-tema:hover{border-color:var(--accent)} .interr-tema .sole,.interr-tema .luna{width:12px;height:12px;grid-area:1/1} /* il sole: un cerchio pieno con l'alone */ .interr-tema .sole{border-radius:50%;background:var(--ink-60); box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink-42);transform:scale(.62)} /* LA LUNA E' UNA MEZZALUNA PIENA, non un arco. Prima era un cerchio con due lati del bordo trasparenti: a dodici pixel quell'arco non si legge come una luna, si legge come una parentesi -- nella barra, accanto a «MENU», sembrava una freccia. L'ombra interna scava il cerchio da un lato e lascia una falce, che a quella misura si riconosce. */ .interr-tema .luna{border-radius:50%; box-shadow:inset -3.5px -1.5px 0 0 var(--ink-60);transform:rotate(-18deg)} .interr-tema:hover .sole{background:var(--accent); box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)} .interr-tema:hover .luna{box-shadow:inset -3.5px -1.5px 0 0 var(--accent)} /* al buio si offre la luce, alla luce si offre il buio */ .interr-tema .sole{display:block} .interr-tema .luna{display:none} :root[data-tema="chiaro"] .interr-tema .sole{display:none} :root[data-tema="chiaro"] .interr-tema .luna{display:block} /* LA VOCE «MENU» ESISTE SOLO SULLO STRETTO, e questa riga deve stare PRIMA del @media che l'accende: scritta dopo vinceva lei -- stessa forza, vince chi viene dopo -- e sul telefono la barra restava senza il modo di raggiungere le altre pagine. */ .barra .menu-tel{display:none} .barra .lingue a:hover{color:var(--ink)} /* ============================================================ 2. BOTTONI — spigoli vivi, nessun raggio ============================================================ */ .btn{ display:inline-block;font-family:var(--mono); font-size:11.5px;letter-spacing:.1em;padding:15px 22px; border:0;cursor:pointer;white-space:nowrap;transition:opacity .12s ease} .btn:hover{opacity:.85} .btn.pieno{background:var(--accent);color:#fff;font-weight:700} .btn.linea{border:1px solid var(--ink-22);color:var(--ink)} /* piccoli: quelli dentro la barra */ .btn.mini{font-size:10.5px;letter-spacing:.12em;padding:7px 13px} /* SUL BLOCCO CORALLO IL PRIMARIO SI ROVESCIA: un bottone corallo su fondo corallo non e' un bottone, e' un rettangolo che non si vede. */ .chiusura .btn.pieno{background:#0c0c0e;color:#fff} .chiusura .btn.linea{border-color:rgba(255,255,255,.55);color:#fff} /* ============================================================ 3. L'ETICHETTA DI SEZIONE Numero corallo + nome maiuscolo + filetto elastico + nota a destra. La numerazione riparte da 01 su ogni pagina: dice a che punto sei di QUESTA pagina, non del sito. ============================================================ */ .sez{ display:flex;align-items:baseline;gap:14px; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-42)} .sez b{color:var(--accent);font-weight:400} .sez i{flex:1;height:1px;background:var(--rule);font-style:normal} .sez em{font-style:normal} /* il corpo di una pagina: il padding laterale e basta, niente contenitore centrato con larghezza massima -- il disegno e' a tutta larghezza */ .fascia{padding:0 var(--lato)} /* la prima fascia della pagina: 34 px sopra l'etichetta, che e' lo stacco fra il filetto della barra e l'inizio del contenuto */ .fascia.apre{padding-top:34px} .fascia.alta{padding-top:64px;padding-bottom:20px} .fascia.bassa{padding-top:56px;padding-bottom:64px} /* ============================================================ 4. TITOLI ============================================================ */ /* 96 px e' la misura delle pagine interne; la home sale a 112, ed e' l'unica: e' la prima cosa che si vede del sito e puo' permetterselo. */ h1.titolone{ font-size:96px;line-height:.93;letter-spacing:-.05em;font-weight:800; margin:26px 0 0;max-width:17ch;text-wrap:pretty} h1.titolone.casa{font-size:112px;line-height:.92;letter-spacing:-.055em; max-width:15ch} h1.titolone .acc,.acc{color:var(--accent)} /* il titolo di riga: domande, aree, righe editoriali */ .titoloriga{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1; text-wrap:pretty} .sottotitolo{font-size:19px;font-weight:800;letter-spacing:-.02em} .lede{font-size:18px;line-height:1.55;color:var(--ink-60);max-width:46ch; text-wrap:pretty} .lede b{color:var(--ink);font-weight:700} .nota{font-size:13px;line-height:1.6;color:var(--ink-50)} /* l'apertura della home: il testo a sinistra, i due tasti a destra, e i due allineati in basso -- il testo respira in alto, i tasti stanno sulla stessa riga di base della sua ultima riga */ .apertura{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end; margin-top:34px;padding-bottom:44px} .apertura .tasti{display:flex;gap:12px;align-items:center;justify-content:flex-end} /* una tabella che non sta attaccata alla sua etichetta */ .tab.spaziata{margin:22px 0 18px} /* un titolino che ha delle righe sotto, non un numero */ .risposta .t.sotto{margin-bottom:12px} /* ============================================================ 5. GRIGLIE A FILETTO `gap:1px` su fondo `--rule`, celle col fondo della pagina: la linea che si vede e' il fondo che traspare, non un bordo disegnato. ============================================================ */ .griglia{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)} .griglia>*{background:var(--bg);padding:28px 26px 30px} .griglia .scelto{background:var(--accent-wash)} .griglia-3{grid-template-columns:repeat(3,1fr)} /* il contenuto di una cella: etichetta mono, titolo, testo */ .griglia .et{font-family:var(--mono);font-size:11px;letter-spacing:.12em; color:var(--ink-45)} .griglia .scelto .et{color:var(--accent-soft)} .griglia .tit{font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.15; margin:16px 0 10px;text-wrap:pretty} .griglia .txt{font-size:14px;line-height:1.6;color:var(--ink-55)} .griglia .scelto .txt{color:var(--ink-60)} .griglia-2{grid-template-columns:1fr 1fr} .griglia-4{grid-template-columns:repeat(4,1fr)} /* ---- I NUMERI DEL PRODOTTO ---- Al posto delle testimonianze, che non abbiamo. Un numero verificabile vale piu' di una testimonianza inventata -- e chi legge puo' contarli. */ .fascia.numeri{padding-top:0;padding-bottom:0} .conta{border-left:0;border-right:0} .conta>div{padding:26px 22px 28px} .conta .n{font-size:44px;font-weight:700;letter-spacing:-.05em;line-height:1; color:var(--accent-soft)} .conta .et{font-size:9.5px;letter-spacing:.14em;color:var(--ink-45); margin:12px 0 5px} .conta .txt{font-size:13px;line-height:1.5;color:var(--ink-60)} /* ---- LE COLONNE DEI PIANI ---- La colonna consigliata non ha un riquadro attorno: ha il fondo appena scaldato e un filetto corallo sopra. Si vede da lontano senza diventare un riquadro dentro una pagina che di riquadri non ne ha. */ .piani>div{padding:34px 26px 30px;position:relative} .piani .scelto::before{content:"";position:absolute;left:0;right:0;top:-1px; height:2px;background:var(--accent)} .piani .prezzo{display:flex;align-items:baseline;gap:12px;margin:14px 0 8px} .piani .prezzo .n{font-family:var(--mono);font-size:56px;font-weight:700; letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums} .piani /* «DA 300», per il piano che si fa a preventivo. Sta accanto al numero e pesa meno: il numero deve restare il numero, e questo e' l'avvertenza che non e' un prezzo secco. */ .prezzo .da{font-size:.42em;font-weight:600;opacity:.6;letter-spacing:.04em; text-transform:uppercase;align-self:center} .prezzo .um{font-family:var(--mono);font-size:19px;color:var(--ink-45)} .piani .anno{font-size:13px;color:var(--ink-50)} .piani .tit{font-size:19px;margin:22px 0 4px} .piani .voci{list-style:none;margin:0 0 24px} .piani .voci li{position:relative;padding:11px 0 11px 22px;font-size:14px; border-bottom:1px solid var(--rule-soft)} /* l'asterisco corallo al posto del pallino: e' il segno dell'elenco in tutto il sito, e non e' un carattere di lista -- e' un pseudo-elemento, cosi' non finisce copiato quando si copia il testo */ .piani .voci li::before{content:"*";position:absolute;left:2px;top:12px; color:var(--accent);font-family:var(--mono);font-size:13px} .piani .voci li:last-child{border-bottom:0} .piani .btn{display:block;text-align:center} /* il distintivo del piu' scelto */ .piani .scelto .et{color:var(--accent-soft);display:flex;align-items:center; justify-content:space-between;gap:12px} /* il distintivo: pieno corallo, spigoli vivi come tutto il resto. Non e' una pastiglia con l'ombra -- e' un rettangolo con dentro una parola. */ .piani .piu{background:var(--accent);color:#fff;font-weight:700; font-size:9.5px;letter-spacing:.08em;padding:4px 7px;white-space:nowrap} /* ---- IL TABELLONE ---- Quattro colonne a filo di riga: nessun riquadro, nessuna striscia alternata. La colonna del piano consigliato porta il fondo scaldato per tutta l'altezza, cosi' alla decima riga si sa ancora di chi e' il pallino che si sta guardando. */ .tabellone{margin-top:22px} .tabellone .tr{display:grid;grid-template-columns:1.9fr .75fr .75fr .75fr; align-items:center;border-top:1px solid var(--rule-soft)} .tabellone .tr .area{padding:14px 0;font-size:14px} .tabellone .tr .c{padding:14px 0;text-align:left} .tabellone .tr .c.scelto{background:var(--accent-wash)} .tabellone .testa{border-top:1px solid var(--rule);border-bottom:0} .tabellone .testa span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; color:var(--ink-45);padding:9px 0} .tabellone .lim{font-size:13px;color:var(--ink-60)} .tabellone .si{font-size:13px} /* ---- MENSILE O ANNUALE ---- Due bottoni veri, non un cursore: su un telefono un cursore si sbaglia, e qui sbagliarlo vuol dire leggere il prezzo di un impegno di dodici mesi credendo che sia quello di un mese. Lo script sta in `comune.js` e lavora su `.p-mese` / `.p-anno`: era gia' li' e funzionava, mancava solo il pulsante nella pagina nuova. */ .ciclo{display:inline-flex;margin-top:26px;border:1px solid var(--rule)} .ciclo button{font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;padding:12px 20px;background:none;border:0; color:var(--ink-60);cursor:pointer;display:flex;align-items:center;gap:9px} .ciclo button+button{border-left:1px solid var(--rule)} .ciclo button.on{background:var(--accent);color:#fff} .ciclo .risp{font-size:10px;letter-spacing:.06em;color:var(--accent-soft)} .ciclo button.on .risp{color:#fff;opacity:.82} /* IL PREZZO CHE NON E' SELEZIONATO SPARISCE DAVVERO. L'attributo `hidden` da solo qui non basterebbe sempre: sta dentro un contenitore in `flex`, e basta una regola d'autore che dia un `display` a quel figlio per battere il `display:none` che il browser attacca a `hidden`. Scritto una volta, non si rompe piu'. */ .p-mese[hidden], .p-anno[hidden]{display:none} /* ---- LE RIGHE DELLA TABELLA CHE SI APRONO ---- `
` vero, non un pannello mosso da JavaScript: si apre anche se lo script non parte, la ricerca del browser ci entra dentro, e la tastiera lo apre da sola. */ /* la tabella che si apre non ha il filetto sulle righe: ce l'ha ogni `
`, se no fra riga e riga se ne vedrebbero due */ .tabellone.apribile>.riga-area:last-child{border-bottom:1px solid var(--rule-soft)} .tabellone .riga-area{border-top:1px solid var(--rule-soft)} .tabellone .riga-area>summary{border-top:0;cursor:pointer;list-style:none} .tabellone .riga-area>summary::-webkit-details-marker{display:none} .tabellone .riga-area>summary:hover .area{color:var(--ink)} .tabellone .riga-area .area{display:flex;align-items:center;gap:10px; color:var(--ink-80)} /* la freccia gira invece di cambiare segno: un «+» che diventa «−» si legge come due simboli diversi, una freccia che ruota si legge come uno stato */ .tabellone .freccia{width:7px;height:7px;border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);transform:rotate(-45deg); transition:transform .16s ease;flex:none;margin-right:2px} .tabellone .riga-area[open]>summary .freccia{transform:rotate(45deg)} .tabellone .quanti{margin-left:auto;padding-right:14px;font-size:10px; color:var(--ink-42);font-style:normal;letter-spacing:.1em} .tabellone .dettaglio{background:var(--panel)} .tabellone .tr.voce{border-top:1px solid var(--rule-soft)} .tabellone .tr.voce .area{display:block;padding:12px 0 12px 19px} .tabellone .tr.voce b{font-weight:600;font-size:13.5px;display:block} .tabellone .tr.voce small{display:block;margin-top:3px;font-size:12.5px; line-height:1.5;color:var(--ink-50)} .tabellone .tr.voce .c{padding:12px 0} /* IL TRATTINO VUOL DIRE «non incluso», ed e' un'informazione: chi confronta due piani legge proprio quello. A --ink-35 sul chiaro faceva 2,5 di contrasto e spariva. */ .tabellone .no{color:var(--ink-50)} /* le due voci su cosa fanno gli altri, sotto il conto degli abbonamenti */ .altri{margin-top:44px} .altri .tit{font-size:17px;font-weight:700;margin-bottom:8px} .altri .txt{font-size:14px;line-height:1.65;color:var(--ink-60)} /* LA FINESTRA DI KYU, DA SOLA. Sulla prima schermata del sito ce ne sono due affiancate -- computer e telefono -- e la scala e' calcolata per starci in due. Qui e' una sola, e puo' essere piu' grande: e' l'unica cosa che dice a chi legge che «assistente» vuol dire una schermata in cui si scrive, non una pagina di aiuto. */ .cella-desk.sola{margin-top:30px} .cella-desk.sola .desk{--scala:.78;margin:0 auto} @media (max-width:1300px){ .cella-desk.sola .desk{--scala:.62} } @media (max-width:1060px){ .cella-desk.sola .desk{--scala:.48} } @media (max-width:760px){ .cella-desk.sola .desk{--scala:.30} } /* le ventitre schermate del portale, in quattro colonne come sono divise dentro: il nome del gruppo in cima, poi le righe a filo */ .schermate{margin-top:26px} .schermate .et{font-size:9.5px;letter-spacing:.14em;color:var(--accent-soft); margin-bottom:10px} .schermate .tab .r{display:block;padding:10px 0} .schermate .tab .r .d{font-size:14px;font-weight:600;display:block} .schermate .tab .r .v{font-family:inherit;font-weight:400;font-size:12.5px; line-height:1.5;color:var(--ink-50);display:block;margin-top:2px} /* ---- LE TRE PARTI CHE STANNO INTORNO A TUTTE LE AREE ---- Stesso meccanismo delle righe dei prezzi -- `
` vero, freccia che gira -- ma qui dentro c'e' del testo lungo, non tre pallini: due colonne, i paragrafi a sinistra e l'elenco puntuale a destra. */ .righe-grosse{border-top:1px solid var(--rule);margin-top:22px} .er-grosso{border-bottom:1px solid var(--rule-soft)} .er-grosso>summary{display:flex;align-items:center;gap:14px;padding:22px 0; cursor:pointer;list-style:none} .er-grosso>summary::-webkit-details-marker{display:none} .er-grosso>summary .titoloriga{font-size:23px;font-weight:700; letter-spacing:-.02em} .er-grosso>summary:hover .titoloriga{color:var(--accent-soft)} .er-grosso .freccia{width:8px;height:8px;border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);transform:rotate(-45deg); transition:transform .16s ease;flex:none} .er-grosso[open]>summary .freccia{transform:rotate(45deg)} .er-grosso .quanti{margin-left:auto;font-style:normal;font-size:10px; letter-spacing:.12em;color:var(--ink-42)} .er-grosso .dentro{display:grid;grid-template-columns:1fr 1.25fr;gap:56px; padding:4px 0 34px;align-items:start} .er-grosso .testi .txt{font-size:15px;line-height:1.65;color:var(--ink-60); max-width:40ch} .er-grosso .testi .txt+.txt{margin-top:14px} /* il filetto lo mette gia' `.tab .r` sotto ogni riga: qui si cambia solo l'impaginazione, se no fra una riga e l'altra se ne vedrebbero due */ .tab.voci-lunghe .r{display:grid;grid-template-columns:minmax(11ch,.7fr) 2fr; gap:26px;padding:13px 0} .tab.voci-lunghe .r .d{font-size:14px;font-weight:600;line-height:1.4} /* IL CARATTERE SI RIDICHIARA. Questo elenco sta dentro un `.tab`, e li' la colonna di destra e' monospaziata perche' di solito contiene un importo. Qui contiene una frase, e una frase in monospaziato si legge come un listato di codice: eredita' presa senza accorgersene, e a schermo si vede subito. */ .tab.voci-lunghe .r .v{font-family:inherit;font-weight:400;font-size:13.5px; line-height:1.6;color:var(--ink-60)} @media (max-width:900px){ .er-grosso .dentro{grid-template-columns:1fr;gap:24px} .er-grosso>summary .titoloriga{font-size:19px} .tab.voci-lunghe .r{grid-template-columns:1fr;gap:5px} } /* le sei ragioni per cui e' un programma e non una scheda del browser: griglia di tre, la lettera piccola in cima come nelle altre griglie */ .perche .tit{font-size:16px;font-weight:700;margin:6px 0 6px} /* ---- IL MODULO DI CONTATTO ---- Campi a filo, come tutto il resto: nessun riquadro arrotondato, una linea sotto e basta. Il campo «esca» sta fuori schermo e non e' `display:none`: un robot che legge il sorgente lo compila lo stesso, ed e' esattamente quello che serve per riconoscerlo. Nascosto davvero, molti non lo toccherebbero. */ .due.contatto{align-items:start} .nota.diretto{margin-top:26px} .nota.diretto .vai{color:var(--accent-soft);font-weight:600} .modulo{border:1px solid var(--rule);padding:28px 26px;background:var(--panel)} .modulo .campo{margin-bottom:20px} .modulo label{display:block;font-family:var(--mono);font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45); margin-bottom:7px} /* I CAMPI DEVONO SEMBRARE CAMPI. Erano una riga sottile sotto un'etichetta, senza fondo e senza cornice: sul riquadro grande -- «raccontaci la tua situazione» -- il segnaposto si leggeva come testo della pagina, e non si capiva che ci si potesse scrivere dentro. Un modulo che non sembra un modulo non lo compila nessuno. Fondo appena piu' chiaro, cornice su tutti e quattro i lati, e il segnaposto in corsivo e piu' spento del testo che ci scrivi tu. */ .modulo input,.modulo select,.modulo textarea{width:100%; background:var(--campo); border:1px solid var(--rule);color:var(--ink); font-family:inherit;font-size:15px;padding:11px 12px;border-radius:0} .modulo textarea{resize:vertical;line-height:1.55;min-height:110px} .modulo ::placeholder{color:var(--ink-35);font-style:italic;opacity:1} .modulo select{color:var(--ink-60)} .modulo input:hover,.modulo select:hover,.modulo textarea:hover{ border-color:var(--rule-strong)} .modulo option{background:var(--bg);color:var(--ink)} /* il fuoco si vede su tutta la cornice, non solo sotto: chi va a tastiera deve sapere dov'e' senza cercarlo */ .modulo input:focus,.modulo select:focus,.modulo textarea:focus{ outline:0;border-color:var(--accent);background:var(--campo-fuoco)} .modulo .btn{width:100%;text-align:center;margin-top:4px} .modulo .esca{position:absolute;left:-9999px;width:1px;height:1px; overflow:hidden} .modulo .formmsg{margin-top:12px;font-size:13.5px;min-height:1em; color:var(--accent-soft)} .modulo .nota.minuta{margin-top:14px;font-size:12px;line-height:1.55; color:var(--ink-42)} @media (max-width:900px){ .due.contatto{grid-template-columns:1fr;gap:34px} } /* le sei cose che cambiano nella settimana di uno studio, e i quattro passi per partire: due griglie con il titolino sopra, come le altre del sito */ .cambia .tit{font-size:17px;font-weight:700;margin:6px 0 6px} .righe.partenza .titoloriga{font-size:18px} /* ---- QUELLO CHE PAGHI ADESSO ---- */ .due{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start; margin-top:26px} .titoloriga.grande{font-size:38px;max-width:18ch} .nota.larga{max-width:44ch;margin-top:16px} .tab.conto .r{display:flex;justify-content:space-between;align-items:baseline; gap:20px;padding:14px 0;border-bottom:1px solid var(--rule-soft)} .tab.conto .r .d{font-size:14px;flex:1} .tab.conto .r .v{font-family:var(--mono);font-size:14px;font-weight:700; white-space:nowrap;font-variant-numeric:tabular-nums} .tab.conto .r.tot{border-top:1px solid var(--rule);border-bottom:0; margin-top:10px;padding-top:20px} .tab.conto .r.tot .d{font-weight:700} .tab.conto .r.tot .v{font-size:22px} .tab.conto .r.noi{border-bottom:0;padding-top:4px;color:var(--accent-soft)} .tab.conto .r.noi .d{font-weight:700} .tab.conto .r.noi .v{font-size:22px;color:var(--accent-soft)} /* il sottotitolo sotto un H1: sta piu' vicino del solito, e' la sua coda */ .lede.sotto-titolo{margin-top:22px;padding-bottom:40px} /* ---- LE UNDICI AREE ---- Era una fascia sottile di parole grigie: undici porte ridotte a un ticker. Adesso e' una griglia a filetto, una cella per area, con l'indice e la riga che dice cosa risolve. E' la promessa centrale del prodotto -- «undici aree, un abbonamento solo» -- e una promessa scritta a undici pixel non e' una promessa. */ .griglia-aree{grid-template-columns:repeat(4,1fr);margin-top:26px} .griglia-aree>a{display:block;padding:22px 20px 24px;transition:background .12s ease} .griglia-aree>a:hover{background:var(--panel)} .griglia-aree .n{display:block;font-family:var(--mono);font-size:10.5px; letter-spacing:.12em;color:var(--accent)} .griglia-aree .tit{display:block;font-size:17px;font-weight:800; letter-spacing:-.02em;margin:12px 0 7px} .griglia-aree .txt{display:block;font-size:13px;line-height:1.5;color:var(--ink-50)} /* LA DODICESIMA CELLA. Le aree sono undici e le colonne quattro: l'ultima casella restava vuota, e in una griglia a filetto una casella vuota non e' spazio -- e' un rettangolo di colore diverso che sembra un difetto. Invece di riempirla di niente, ci sta la porta verso tutte: e' anche il posto dove uno la cerca dopo aver letto gli undici nomi. */ .griglia-aree .tutte{background:var(--panel)} .griglia-aree .tutte .n{color:var(--ink-45)} .griglia-aree .tutte .vai{display:block;margin-top:12px} /* ---- LE FINESTRE COL PRODOTTO DENTRO ---- LA GABBIA HA UNA MISURA MASSIMA, E NON E' UN VEZZO. Dentro le finestre c'e' l'applicazione vera, che vive a 1280 px logici: per farla stare in una cella la si rimpicciolisce di un fattore fisso. Un fattore fisso pero' e' giusto per UNA larghezza sola -- quella su cui l'hai calcolato. Su uno schermo piu' largo la cella cresce, il programma dentro no, e resta un francobollo appoggiato nell'angolo con mezzo metro di nero accanto. E' quello che si vedeva su un monitor da duemila pixel. Quindi la gabbia si ferma a 1240 e si centra. Da li' in su le due finestre restano della loro misura, come due tavole di un disegno tecnico: una tavola non si allarga perche' hai un tavolo piu' grande. ============================================================ */ .griglia-finestre{grid-template-columns:1.62fr 1fr; max-width:1240px;margin:26px auto 0} .griglia-finestre>div{padding:18px 22px 24px;display:flex;flex-direction:column; align-items:center} .griglia-finestre .et{font-size:9.5px;letter-spacing:.12em;color:var(--ink-45); margin-bottom:14px;align-self:flex-start} /* UNA MISURA SOLA PER FINESTRA: LA SCALA. Larghezza e altezza si calcolano da lei, cosi' non possono discordare -- prima erano tre numeri scritti a mano che dovevano tornare fra loro, e bastava ritoccarne uno per avere il programma dentro un riquadro della misura sbagliata. PERCHE' NON UNA SCALA FLUIDA. C'era: `calc(100cqw / 1280px)`, la larghezza del riquadro diviso quella del programma. In Chrome funziona. In Safari no -- la divisione fra due lunghezze non la calcola, butta via tutta la regola, e il programma resta a grandezza naturale dentro un riquadro piccolo, tagliato a meta'. E' quello che si vedeva, e io l'avevo provata solo nel pannello, che e' Chrome: una cosa provata su un motore solo non e' provata. Qui si usano solo `calc(px * numero)` e `scale(numero)`, che sono capiti da tutti. La fluidita' la fanno le tre soglie qui sotto. */ .desk{--scala:.594; width:calc(1280px * var(--scala));max-width:100%; border:1px solid var(--rule);background:var(--bg)} .desk .capo{display:flex;align-items:center;gap:12px;padding:8px 11px; border-bottom:1px solid var(--rule)} .desk .pall{display:flex;gap:5px} .desk .pall i{width:7px;height:7px;background:var(--ink-22)} .desk .via{font-size:9.5px;letter-spacing:.1em;color:var(--ink-45)} .desk .vetro{position:relative;overflow:hidden;height:calc(800px * var(--scala))} .desk iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0; transform:scale(var(--scala));transform-origin:0 0;pointer-events:none} .tel{--scala:.56; width:calc(414px * var(--scala)); border:1px solid var(--rule);background:var(--bg)} .tel .vetro{position:relative;overflow:hidden;height:calc(892px * var(--scala))} .tel iframe{position:absolute;left:0;top:0;width:414px;height:892px;border:0; transform:scale(var(--scala));transform-origin:0 0;pointer-events:none} /* LE TRE SOGLIE. Sotto ognuna il riquadro non ci starebbe piu': si cambia la scala, e larghezza e altezza seguono da sole. */ @media (max-width:1300px){ .desk{--scala:.48} .tel{--scala:.50} } @media (max-width:1060px){ .desk{--scala:.40} .tel{--scala:.44} } /* ---- L'ELENCO DELLE UNDICI AREE, SU «COSA FA» ---- Le colonne sono tre: l'indice, il nome grande, e a destra cosa risolve con le voci che ci trovi dentro. Il nome ha una colonna sua e larga perche' e' quello che si scorre: chi apre questa pagina cerca un'area, non legge una descrizione dopo l'altra. */ .aree-lista{margin-top:8px} .aree-lista .er{grid-template-columns:56px 1fr 1.25fr;gap:32px;padding:26px 0} .aree-lista .titoloriga{font-size:27px;align-self:center} .aree-lista .risposta{align-self:center} .aree-lista .risposta .txt{max-width:46ch} .aree-lista .chips{margin-top:12px} /* ---- SCARICA: i due programmi come schede di prodotto ---- */ .scarica>div{padding:30px 26px 32px} .scarica .et{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .scarica .peso{color:var(--ink-45)} .scarica .tit{font-size:21px;margin:18px 0 8px} .scarica .tasti{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px} /* i requisiti sono SPECIFICHE, non una frase: chi cerca «ci gira sul mio Mac?» vuole una riga con scritto 13 Sonoma, non un paragrafo in cui sta in mezzo */ .tab.specifiche{border-top:1px solid var(--rule);margin-top:20px} .tab.specifiche .r{display:flex;justify-content:space-between;align-items:baseline; gap:16px;padding:10px 0;border-bottom:1px solid var(--rule-soft)} .tab.specifiche .d{font-size:9.5px;letter-spacing:.12em;color:var(--ink-45)} .tab.specifiche .v{font-size:9.5px;letter-spacing:.1em;color:var(--ink-60); text-align:right} .tab.specifiche .r:last-child{border-bottom:0} /* ---- DOMANDE: la risposta accanto alla domanda, mai dietro un clic ---- */ .domande-lista .er{grid-template-columns:1fr 1.25fr;gap:44px;padding:28px 0} .domande-lista .titoloriga{font-size:23px;margin-top:10px} .domande-lista .er.coda{border-bottom:0} .domande-lista .er.coda .btn{margin-top:16px} /* ---- ASSISTENZA: Kyu a sinistra, le persone a destra ---- */ .due.assistenza{grid-template-columns:1.1fr 1fr;gap:56px;margin-top:26px} .due.assistenza .kyu{max-width:none;margin-top:18px} .tab.modi{border-top:1px solid var(--rule);margin:18px 0 40px} .tab.modi .r{padding:18px 0;border-bottom:1px solid var(--rule-soft)} .tab.modi .r:last-child{border-bottom:0} .tab.modi .testa{display:flex;align-items:baseline;justify-content:space-between; gap:16px} .tab.modi .tit{font-size:19px;font-weight:800;letter-spacing:-.02em} .tab.modi .quando{font-size:9.5px;letter-spacing:.12em;color:var(--accent-soft)} .tab.modi .txt{font-size:14px;line-height:1.6;color:var(--ink-60);margin-top:7px} .chips.vocabolario{margin-top:14px} /* ---- PROFESSIONISTI: la tavola del portale ---- */ .tabellone.studi .tr{grid-template-columns:2fr .8fr .8fr .9fr} .tabellone.studi .c{font-size:11px;letter-spacing:.06em;color:var(--ink-60)} /* ---- L'ELENCO PUBBLICO DEGLI STUDI ---- Si riempie dal browser: l'elenco cambia quando uno studio si iscrive, e rigenerare tutto il sito per una riga nuova vorrebbe dire che l'elenco e' vecchio finche' non si rilascia. Chi arriva senza JavaScript legge comunque cosa e' e come ci si entra. */ .elenco-studi{margin-top:22px} .elenco-studi .scheda{padding:22px 20px 24px} .elenco-studi .scheda h3{font-size:19px;font-weight:800;letter-spacing:-.02em; margin-bottom:6px} .elenco-studi .scheda p{font-size:13.5px;line-height:1.55;color:var(--ink-60)} .elenco-studi .scheda .nota{font-size:11px} .elenco-studi .scheda a{color:var(--accent-soft)} .fchips{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0} .fchips .chip{cursor:pointer;background:none} .fchips .chip.on{border-color:var(--accent);color:var(--accent-soft)} /* ---- ENTRA: due porte, niente sezioni numerate ---- */ .fascia.entrata{padding-bottom:64px} .porte{margin-top:34px} .porte>div{padding:32px 28px 34px;display:flex;flex-direction:column} .porte .et{display:flex;align-items:center;justify-content:space-between;gap:12px} .porte .serve{font-size:9.5px;letter-spacing:.1em;color:var(--ink-45)} .porte .tit{font-size:26px;margin:18px 0 10px} .porte .txt{flex:1;margin-bottom:24px} .porte .btn{align-self:flex-start} .nota.registrati{margin-top:26px} /* ---- PER CHI: la stessa gabbia, tre testi ---- */ .apertura.due-testi{grid-template-columns:1fr 1fr;align-items:start;gap:48px} .blocchi{margin-top:8px} .blocchi>div{padding:26px 24px 28px} .blocchi .et{color:var(--accent)} .blocchi .tit{font-size:19px;margin:14px 0 9px} /* la fascia del piano: fondo scaldato, come la colonna consigliata su Prezzi */ .fascia-piano{display:grid;grid-template-columns:.7fr 1.3fr;gap:44px; background:var(--accent-wash);border:1px solid var(--rule); padding:30px 28px 32px;margin-top:24px;align-items:start} .fascia-piano .et{font-size:10.5px;letter-spacing:.12em;color:var(--accent-soft)} .fascia-piano .prezzo{display:flex;align-items:baseline;gap:12px;margin-top:12px} .fascia-piano .prezzo .n{font-size:56px;font-weight:700;letter-spacing:-.05em; line-height:1} .fascia-piano .prezzo .um{font-size:19px;color:var(--ink-45)} .fascia-piano .txt{font-size:16px;line-height:1.6;color:var(--ink-60)} .fascia-piano .vai{margin-top:16px} /* ---- SERVIZI E SETTORI: il selettore del mestiere ---- */ .scelta{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:22px 0 24px;margin-top:8px} .scelta .et{font-size:9.5px;letter-spacing:.14em;color:var(--ink-45)} .fchips .job{cursor:pointer} /* L'INTERRUTTORE E' UN RETTANGOLO A SPIGOLO VIVO, come tutto il resto: un cursore tondo qui dentro sarebbe l'unico angolo arrotondato del sito. */ .interruttore{display:inline-flex;align-items:center;gap:10px;margin-top:20px; cursor:pointer;user-select:none} .interruttore input{position:absolute;opacity:0;width:0;height:0} .interruttore .cursore{width:44px;height:22px;border:1px solid var(--ink-22); position:relative;flex:none;transition:border-color .12s ease,background .12s ease} .interruttore .cursore::after{content:"";position:absolute;left:3px;top:3px; width:14px;height:14px;background:var(--ink-45);transition:transform .12s ease, background .12s ease} .interruttore input:checked+.cursore{border-color:var(--accent); background:rgba(255,74,56,.18)} .interruttore input:checked+.cursore::after{transform:translateX(22px); background:var(--accent)} .interruttore .voce{font-size:10.5px;letter-spacing:.12em;color:var(--ink-50)} .interruttore input:checked~.voce{color:var(--ink)} .esito{margin-top:34px} .esito .sez{margin-bottom:18px} .esito .sez b{color:var(--accent-soft);font-weight:700} .esito .sez span{font-family:var(--mono);color:var(--ink)} .esito .sez.spenti-cap{margin-top:40px} .moduli-attivi{display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin:-4px 0 22px} .moduli-attivi .et{font-size:9.5px;letter-spacing:.12em;color:var(--ink-45); margin-right:2px} .strumenti .er{grid-template-columns:120px 1fr;gap:28px;padding:18px 0} .strumenti .n{font-family:var(--mono);font-size:12px;font-weight:700; color:var(--accent)} /* ACCESO / SPENTO non si dicono con l'opacita': sbiadire il blocco sbiadisce anche i filetti, e la griglia perde la struttura. Si dice col colore del testo, e con la pastiglia. */ .strumenti .stato{font-size:9.5px;letter-spacing:.12em;color:var(--accent-soft); margin-top:6px} .strumenti .tit{font-size:19px;font-weight:800;letter-spacing:-.02em} .strumenti .txt{font-size:14px;line-height:1.6;color:var(--ink-60);margin-top:5px} .chips.spenti .chip{color:var(--ink-42);border-color:var(--rule)} .conti-settore .tit{font-size:19px;margin-bottom:9px} .conti-settore>div{padding:26px 24px 28px} /* ---- KYU ---- E' il pezzo che gli altri non hanno, e si vede da come e' disegnato: non una chat -- bolle, puntini che lampeggiano, «sto pensando» -- che si somiglia a tutte le altre e non dice niente. E' una RISPOSTA: la domanda, il numero grande, le righe da cui esce, e in fondo i dati veri su cui e' stata costruita. Quello che lo distingue non e' che risponde: e' che si puo' controllare. */ .kyu{border:1px solid var(--rule);margin-top:26px;max-width:820px} .kyu .kcapo{display:flex;gap:16px;padding:11px 18px; border-bottom:1px solid var(--rule); font-size:9.5px;letter-spacing:.12em;color:var(--ink-45)} .kyu .kcapo .destra{margin-left:auto} .kyu .kdom{padding:20px 18px 22px;font-size:22px;font-weight:800; letter-spacing:-.02em;line-height:1.25;border-bottom:1px solid var(--rule); text-wrap:pretty} .kyu .kcorpo{padding:20px 18px 22px} .kyu .ket{font-size:9.5px;letter-spacing:.14em;color:var(--accent)} .kyu .knum{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1; margin:10px 0 20px;font-variant-numeric:tabular-nums} .kyu .krighe{border-top:1px solid var(--rule-soft)} .kyu .krighe .r{display:flex;justify-content:space-between;align-items:baseline; gap:20px;padding:12px 0;border-bottom:1px solid var(--rule-soft)} .kyu .krighe .r .d{font-size:14px;color:var(--ink-60)} .kyu .krighe .r .v{font-family:var(--mono);font-size:14px;font-weight:700; white-space:nowrap;font-variant-numeric:tabular-nums} /* DA DOVE ARRIVA IL NUMERO. E' la riga che fa la differenza fra una risposta e un'opinione: senza, resta una cifra detta con sicurezza da una macchina. */ .kyu .kfonti{display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin-top:18px} .kyu .kfonti .et{font-size:9.5px;letter-spacing:.12em;color:var(--ink-45); margin-right:2px} .nota.kpost{margin-top:14px;max-width:820px} /* LA TESTATA DI UNA SEZIONE: titolo a sinistra, nota e bottone a destra. Era `1fr 1fr` con sessanta pixel di distacco, e su uno schermo largo le due colonne si allontanavano fino a non sembrare piu' la stessa cosa: il titolo a sinistra, e il paragrafo che lo spiega a meta' pagina, per aria, senza niente in mezzo. Due pezzi che si riferiscono l'uno all'altro devono sembrarlo anche a due metri di distanza. Adesso il titolo prende piu' spazio, il distacco e' meno della meta', e il paragrafo ha un filetto in cima -- lo stesso segno che il sito usa dappertutto per dire «questa roba sta insieme». */ .testata{display:flex;flex-wrap:wrap;gap:22px 46px;align-items:flex-start; margin-top:22px} /* NON e' una griglia a colonne uguali, e il motivo e' la larghezza dello schermo. Con `1fr 1fr` il paragrafo partiva sempre a meta' pagina: su un monitor da 1900 finiva a mezzo metro dal titolo che spiega, con in mezzo un campo di nero, e i due pezzi non sembravano piu' la stessa cosa. Qui il titolo prende la larghezza che gli serve e il paragrafo gli si siede accanto -- alla stessa distanza a 1200 e a 2400 pixel. */ .testata>:first-child{flex:0 1 auto} .testata>*+*{flex:0 1 46ch;border-top:1px solid var(--rule);padding-top:18px} .testata .nota{font-size:15px;line-height:1.65;max-width:none} .testata .btn{margin-top:20px} /* ---- I RIQUADRI DI «QUELLO CHE CI STA INTORNO» ---- */ .intorno>div{display:flex;flex-direction:column;gap:10px} .intorno .tit{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0} .intorno .txt{font-size:14px;line-height:1.6;color:var(--ink-60)} .vai{display:inline-block;margin-top:6px;font-size:10.5px;letter-spacing:.12em; color:var(--accent-soft)} .vai:hover{color:var(--accent)} /* ---- LE GIORNATE TIPO: tre colonne invece di due ---- */ .righe .er.tre{grid-template-columns:56px 1fr 1.15fr} /* due colonne invece di tre: quando non c'e' un numero a sinistra */ .righe .er.due-col{grid-template-columns:1fr 1.3fr;gap:40px} .righe .er .et{font-size:9.5px;letter-spacing:.12em;color:var(--ink-45); margin-top:9px;display:block} .righe .risposta .txt{font-size:14px;line-height:1.6;color:var(--ink-60)} .righe .risposta .txt+.txt{margin-top:10px} .righe .risposta .txt b{color:var(--ink)} .righe .er.coda{border-bottom:0} .titoloriga.piccolo{font-size:19px} /* un occhiello sotto l'etichetta di sezione, prima del contenuto */ .lede.sotto-etichetta{margin-top:18px;max-width:62ch} .due.stretta{grid-template-columns:.85fr 1.15fr} .tasti.sotto{margin-top:22px} /* ============================================================ 6. TABELLE A FILO DI RIGA Nessun riquadro, nessuna striscia alternata: solo il filetto sopra. ============================================================ */ .tab{border-top:1px solid var(--rule)} .tab .r{display:flex;align-items:baseline;gap:14px;padding:13px 0; border-bottom:1px solid var(--rule-soft)} .tab .r .k{font-family:var(--mono);font-size:10px;color:var(--accent);width:24px} .tab .r .d{flex:1;font-size:14px} .tab .r .v{font-family:var(--mono);font-size:14px;font-weight:700; font-variant-numeric:tabular-nums} .tab .r:last-child{border-bottom:0} /* incluso / non incluso: un pallino corallo e un trattino spento */ .si{color:var(--accent)} .no{color:var(--ink-22)} /* ============================================================ 7. ETICHETTE-CHIP ============================================================ */ /* `color:inherit` NON E' PLEONASTICO. Alcune pastiglie sono `` e altre sono `