/* ═══════════════════════════════════════════════════════════════════════════ RIVALTA SUL MINCIO — classi di pagina, prefisso .sb-riv- Estende il design system .sb- (assets/sb.css) con le sole strutture che nel sistema non esistevano già: un dossier è fatto di tabelle lunghe, schede chiave/valore e note di attendibilità del dato, e nessuna delle tre aveva un equivalente fra le primitive. Tutto il resto (bottoni, pannelli, pillole, testate, footer) si riusa così com'è. Qui dentro non compare un solo colore hard-coded: solo var(--sb-*). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Giustificazione ────────────────────────────────────────────────────── Tutta la prosa del sito è giustificata. Non esiste una classe unica per il testo corrente — le pagine sono nate una alla volta e ogni contesto si è portato dietro la sua — quindi il gruppo va elencato per esteso. Se nasce una classe nuova che contiene un paragrafo, va aggiunta qui. hyphens è obbligatorio, non decorativo: le colonne sono strette (46rem) e l'italiano ha parole lunghe. Senza sillabazione la giustificazione apre fiumi bianchi verticali che si vedono da lontano. Funziona perché head.html dichiara — il browser sillaba nella lingua del documento. Restano allineati a sinistra i dati (celle, intestazioni, numeri), i titoli e tutto ciò che è centrato per scelta (.sb-sechead, .sb-cta). */ .sb-riv-p, .sb-riv-li, .sb-riv-lede, .sb-riv-note, .sb-riv-cap, .sb-riv-cit p, .sb-riv-crono-fatto, .sb-riv-flash p, .sb-riv-cardpad p, .sb-riv-news-note, .sb-hero-copy p, .sb-card-desc, .sb-page-inner p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } /* Sotto i 480px la colonna è troppo stretta perché la giustificazione stia in piedi: fra una parola e l'altra si aprono voragini. Lì vince la leggibilità e il testo torna a bandiera. */ @media (max-width: 479.98px) { .sb-riv-p, .sb-riv-li, .sb-riv-lede, .sb-riv-note, .sb-riv-cap, .sb-riv-cit p, .sb-riv-crono-fatto, .sb-riv-flash p, .sb-riv-cardpad p, .sb-riv-news-note, .sb-hero-copy p, .sb-card-desc, .sb-page-inner p { text-align: left; } } /* ── Sezioni ancorate ───────────────────────────────────────────────────── scroll-margin-top perché la nav è sticky a 64px: senza, arrivando da un link d'indice il titolo finisce sotto la barra. */ .sb-riv-sec { scroll-margin-top: 84px; padding-top: clamp(2.5rem, 5vw, 3.5rem); } .sb-riv-sec:first-of-type { padding-top: clamp(1.5rem, 3vw, 2.5rem); } /* Numero di sezione: sta accanto al titolo come riferimento al dossier originale, in tono muto — è una coordinata, non un'informazione. */ .sb-riv-secnum { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sb-fg-muted); margin-bottom: 0.5rem; } /* Sottotitolo interno alla sezione */ .sb-riv-subhead { margin: clamp(2rem, 4vw, 2.6rem) 0 0.9rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--sb-fg); } .sb-riv-subhead:first-child { margin-top: 0; } .sb-riv-p { margin: 0 0 0.9rem; max-width: 46rem; font-size: 0.95rem; line-height: 1.65; color: var(--sb-fg-lighter); } .sb-riv-p:last-child { margin-bottom: 0; } .sb-riv-p strong { font-weight: 600; color: var(--sb-fg); } .sb-riv-p a, .sb-riv-li a, .sb-riv-table a { color: var(--sb-brand-text); text-decoration: none; } .sb-riv-p a:hover, .sb-riv-li a:hover, .sb-riv-table a:hover { text-decoration: underline; text-underline-offset: 3px; } .sb-riv-ul { margin: 0 0 1rem; padding-left: 1.1rem; max-width: 46rem; } .sb-riv-li { margin: 0 0 0.45rem; font-size: 0.92rem; line-height: 1.6; color: var(--sb-fg-lighter); } .sb-riv-li strong { font-weight: 600; color: var(--sb-fg); } .sb-riv-li::marker { color: var(--sb-fg-muted); } /* ── Indice della pagina ────────────────────────────────────────────────── Una fila di pillole, non un menu laterale: la pagina è una sola colonna e un indice che galleggia a lato ruberebbe larghezza alle tabelle. */ .sb-riv-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.4rem 0 0; } .sb-riv-toc a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.36rem 0.8rem; clip-path: var(--sb-shape-sm); border: 1px solid var(--sb-border-strong); background: var(--sb-shape-edge), var(--sb-glass-bg); -webkit-backdrop-filter: blur(var(--sb-glass-blur)) saturate(var(--sb-glass-sat)); backdrop-filter: blur(var(--sb-glass-blur)) saturate(var(--sb-glass-sat)); box-shadow: inset 0 1px 0 var(--sb-glass-spec); font-size: 0.8rem; color: var(--sb-fg-light); text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } /* Al passaggio si accende il bordo dei lati dritti. Le due diagonali restano del grigio di base: sono lunghe 10px e disegnate come gradiente di sfondo, non come border, quindi seguirebbero il tema ma non lo stato — e a quella scala la differenza fra i due grigi non si vede comunque. */ .sb-riv-toc a:hover { color: var(--sb-fg); border-color: var(--sb-border-stronger); background: var(--sb-shape-edge), color-mix(in srgb, var(--sb-surface-100) 72%, transparent); } /* ── Riquadri di sintesi ────────────────────────────────────────────────── Il numero è grande e la sua etichetta piccola: in una pagina fatta di tabelle serve un punto in cui l'occhio si ferma prima di entrare nel dettaglio. */ .sb-riv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 1.6rem 0 0; } @media (min-width: 720px) { .sb-riv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sb-riv-stat { min-width: 0; } .sb-riv-stat .sb-panel-inner { padding: 1rem 1.1rem; gap: 0.15rem; } .sb-riv-stat-v { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--sb-fg); } .sb-riv-stat-v small { font-size: 0.55em; color: var(--sb-fg-lighter); margin-left: 0.15em; } .sb-riv-stat-l { font-size: 0.78rem; line-height: 1.4; color: var(--sb-fg-muted); } /* ── «Prossimamente» ────────────────────────────────────────────────────── La riga che dice, sopra i dati, che la sezione è in prova finché non arriva il via libera di chi la stazione la gestisce. La pillola non è nuova: è la stessa .sb-riv-flash-badge dell'aggiornamento in evidenza. Un secondo badge pieno, disegnato apposta, avrebbe voluto dire due pillole piene quasi uguali nella stessa pagina — e «quasi uguali» è peggio di «uguali» o «diverse». Qui si aggiunge solo come si dispone. L'allineamento è in alto e non al centro: quando la spiegazione va a capo — e a schermo stretto ci va — con l'allineamento centrato la pillola scivolerebbe a metà di un blocco di due righe, staccandosi dalla prima parola a cui si riferisce. */ .sb-riv-prossima { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.45rem 0.75rem; margin: 0 0 0.9rem; } .sb-riv-prossima-d { max-width: 46rem; padding-top: 0.12rem; font-size: 0.8rem; line-height: 1.5; color: var(--sb-fg-muted); } /* ── La hero della home, a due colonne ──────────────────────────────────── Il titolo tiene la sua colonna e la scheda del tempo sta al suo fianco. Sotto i 1040px la seconda colonna non ci sta senza stringere il titolo, e allora la scheda scende sotto: è la prima cosa che si legge dopo l'invito a entrare nel sito, il che va benissimo. */ .sb-riv-heroduo { display: grid; gap: 2.2rem; align-items: center; } @media (min-width: 1040px) { .sb-riv-heroduo { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 3.5rem; } } /* ── «Ora a Rivalta» ────────────────────────────────────────────────────── La stessa stazione della griglia in fondo a /natura, ridotta a quello che serve prima di uscire di casa: quanti gradi fa, che tempo è, e le tre misure che cambiano la giornata. Sotto, il collegamento per chi ne vuole dieci invece di tre. Nessun pallino che pulsa e nessun numero che scorre quando il valore cambia. La scheda dice l'ora della misura in fondo, a parole: chi vuole sapere se è fresca lo legge, chi non se lo chiede non viene interrotto per dirglielo. */ .sb-riv-ora[hidden] { display: none; } .sb-riv-ora { max-width: 21rem; } .sb-riv-ora-inner { padding: 1.1rem 1.25rem 1.05rem; } .sb-riv-ora-occhiello { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sb-fg-muted); } .sb-riv-ora-testa { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.55rem; } /* L'unica tinta della scheda, e del sito: l'azzurro del marchio. Il disegno prende il colore dal testo, quindi al tema scuro cambia da sé. */ .sb-riv-ora-icona { flex: none; width: 2.7rem; height: 2.7rem; color: var(--sb-brand-text); } .sb-riv-ora-icona[hidden] { display: none; } .sb-riv-ora-icona svg { display: block; width: 100%; height: 100%; } .sb-riv-ora-t { font-size: 2.7rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--sb-fg); } /* Il grado è del numero, non un'unità a parte: più chiaro, e attaccato. */ .sb-riv-ora-grado { color: var(--sb-fg-muted); } .sb-riv-ora-cond { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.35; color: var(--sb-fg-light); } .sb-riv-ora-cond[hidden] { display: none; } .sb-riv-ora-estremi { display: flex; gap: 0.85rem; margin-top: 0.2rem; font-size: 0.78rem; color: var(--sb-fg-muted); } .sb-riv-ora-estremi[hidden] { display: none; } /* Le tre misure piccole, sotto un filo di separazione: è l'unica riga di confine di tutta la scheda, e separa «che tempo fa» da «quanto». */ .sb-riv-ora-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--sb-border); } .sb-riv-ora-mini { min-width: 0; } .sb-riv-ora-mini[hidden] { display: none; } .sb-riv-ora-mini-v { display: block; font-size: 0.95rem; line-height: 1.25; color: var(--sb-fg); } .sb-riv-ora-mini-v small { font-size: 0.62em; color: var(--sb-fg-muted); margin-left: 0.12em; } .sb-riv-ora-mini-l { display: block; font-size: 0.7rem; line-height: 1.3; color: var(--sb-fg-muted); } /* align-self: la lastra è una colonna flex, e senza questo il collegamento si stirerebbe da bordo a bordo prendendosi il click di mezza scheda. */ .sb-riv-ora-go { align-self: flex-start; margin-top: 0.95rem; font-size: 0.82rem; } .sb-riv-ora-stato { margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.4; color: var(--sb-fg-muted); } /* Sul telefono la seconda colonna non c'è: la scheda scende sotto il titolo e a tutta larghezza diventa il blocco più alto della hero — un riquadro pieno di numeri infilato fra l'invito a entrare nel sito e i dati del paese, che rompe la colonna a sinistra su cui è allineato tutto il resto. Allora si riduce a quello che si guarda davvero prima di uscire di casa: il disegno del cielo e i gradi. Piccola e in alto a destra, sopra il titolo, è un segnale e non una sezione, e la hero torna a essere una colonna sola. Il resto — condizione, estremi, le tre misure, l'ora della lettura — non si perde: sta a un tocco, perché qui la pastiglia intera è il collegamento a /natura. Lì è scritto per esteso, insieme alla nota «in prova» che sopra una pastiglia larga otto centimetri sarebbe più grande di ciò che accompagna. */ @media (max-width: 639.98px) { .sb-riv-heroduo { gap: 1.1rem; } /* order: ultima nel markup, prima in pagina. Con la tastiera e con lo screen reader resta comunque in fondo, ed è l'ordine giusto: prima il paese, poi che tempo fa. */ .sb-riv-ora { order: -1; justify-self: end; } .sb-riv-ora .sb-riv-prossima { display: none; } .sb-riv-ora-occhiello, .sb-riv-ora-cond, .sb-riv-ora-estremi, .sb-riv-ora-minis, .sb-riv-ora-stato { display: none; } /* Alla misura di una pastiglia lo smusso delle lastre si mangia mezzo lato: si scende a quello delle pillole. Il taglio interno va scritto per esteso perché --sb-shape-sm-in non esiste, e non basterebbe ridichiarare --sb-cut-lg qui: --sb-shape-lg è già risolto su .sb-home (la nota sulle sagome, in sb.css, spiega perché). Il -0.586px è lo stesso di sempre. */ .sb-riv-ora .sb-panel { clip-path: var(--sb-shape-sm); } .sb-riv-ora .sb-panel-inner { clip-path: polygon( calc(var(--sb-cut) - 0.586px) 0, 100% 0, 100% calc(100% - var(--sb-cut) + 0.586px), calc(100% - var(--sb-cut) + 0.586px) 100%, 0 100%, 0 calc(var(--sb-cut) - 0.586px) ); } .sb-riv-ora-inner { padding: 0.45rem 0.75rem; } .sb-riv-ora-testa { gap: 0.45rem; margin-top: 0; } .sb-riv-ora-icona { width: 1.55rem; height: 1.55rem; } .sb-riv-ora-t { font-size: 1.4rem; } /* Il collegamento non è più una riga sotto la scheda: è la scheda. Steso sulla lastra si prende tutto il tocco, e il testo resta scritto per chi legge con lo screen reader — a corpo zero non si vede ma c'è. Via solo la freccia, che ha una misura sua e resterebbe grande com'era. Il fuoco si sposta dentro come per le pillole della guida: un outline a filo del bordo lo taglierebbe via il clip-path della lastra. */ .sb-riv-ora-go { position: absolute; inset: 0; margin: 0; font-size: 0; } .sb-riv-ora-go svg { display: none; } .sb-home .sb-riv-ora-go:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sb-brand); } } /* ── Stazione meteo in diretta ───────────────────────────────────────────── Gli stessi riquadri di sintesi qui sopra, con dentro numeri che cambiano da soli. Nessun segnale che lo annunci: niente pallino che pulsa, niente cifra che scorre. Il sito ha già deciso una volta che scorrere una pagina non è un evento, e nemmeno la temperatura che passa da 31,0 a 31,1 lo è — chi guarda vede il numero giusto, e tanto basta. Il blocco nasce `hidden` e lo scopre assets/meteo.js quando la prima lettura arriva davvero. */ .sb-riv-meteo[hidden] { display: none; } .sb-riv-meteo { margin: 1.4rem 0 0; } /* Le misure di contorno: percepita, rugiada, pressione, sole. Stanno in una lastra sola sotto i quattro numeri grandi, e le colonne sono una, due o tre secondo quanto spazio c'è — su una lastra larga quanto la pagina, due sole colonne lascerebbero mezzo pannello vuoto. */ .sb-riv-meteo-dett { margin-top: 0.7rem; } .sb-riv-meteo-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 1.6rem; margin: 0; } @media (min-width: 640px) { .sb-riv-meteo-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .sb-riv-meteo-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Le etichette qui sono più lunghe di quelle delle schede chiave/valore ordinarie — «radiazione solare» in 5,5rem va a capo — e la colonna si allarga di conseguenza. Il selettore ripete .sb-riv-cardpad non per vezzo: la regola da scavalcare ha la stessa specificità di questa e viene dopo nel foglio, quindi senza quel pezzo in più vincerebbe lei. */ .sb-riv-cardpad .sb-riv-meteo-rows .row span:first-child { width: 9.5rem; } .sb-riv-meteo-rows .row[hidden] { display: none; } /* La riga in fondo dice due cose che il numero da solo non dice: di quando è la misura, e di chi è la stazione. La seconda non è una cortesia facoltativa — il dato è loro. */ .sb-riv-meteo-pie { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--sb-fg-muted); } .sb-riv-meteo-pie a { color: var(--sb-brand-text); text-decoration: none; } .sb-riv-meteo-pie a:hover { text-decoration: underline; } /* ── Tabelle ────────────────────────────────────────────────────────────── Le tabelle sono il grosso di questo sito, e ora sono vetro come tutto il resto — prima erano l'unico posto in cui la lastra era spenta (--solid). Il timore di allora era il costo di ridipingere la sfocatura durante lo scorrimento orizzontale, ma il backdrop-filter campiona ciò che sta DIETRO il pannello, cioè il fondale fisso: le colonne che scorrono dentro non lo toccano. Il costo resta quello di una lastra in più per schermata, e su telefono la sfocatura è già dimezzata a monte (sb.css, --sb-glass-blur). Lo scorrimento orizzontale sta nel contenitore, mai nella pagina: su telefono una tabella a sei colonne non deve poter spingere il body. */ .sb-riv-tablewrap { margin: 0 0 1rem; } .sb-riv-tablewrap .sb-panel-inner { overflow: hidden; } .sb-riv-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .sb-riv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 32rem; } .sb-riv-table--wide { min-width: 46rem; } /* L'intestazione resta appiccicata in cima mentre la tabella scorre, ma su una lastra trasparente una fascia opaca sarebbe l'unica cosa piena della pagina. Diventa quindi vetro anch'essa, con una sfocatura più corta: deve staccare le righe che le passano sotto, non isolarsi dal fondale. */ .sb-riv-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-fg-muted); background: color-mix(in srgb, var(--sb-surface-100) 72%, transparent); -webkit-backdrop-filter: blur(8px) saturate(var(--sb-glass-sat)); backdrop-filter: blur(8px) saturate(var(--sb-glass-sat)); padding: 0.7rem 0.9rem; white-space: nowrap; border-bottom: 1px solid var(--sb-border-strong); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sb-riv-table thead th { background: var(--sb-surface-100); } } .sb-riv-table tbody td { padding: 0.65rem 0.9rem; vertical-align: top; line-height: 1.5; color: var(--sb-fg-lighter); border-bottom: 1px solid var(--sb-border); } .sb-riv-table tbody tr:last-child td { border-bottom: 0; } .sb-riv-table tbody tr:hover td { background: var(--sb-overlay); } /* La prima colonna è la chiave della riga: sta al colore pieno, il resto no. È il modo di distinguere senza aggiungere un secondo hue. */ .sb-riv-table tbody th, .sb-riv-table td:first-child { color: var(--sb-fg); font-weight: 400; } .sb-riv-table tbody th { text-align: left; padding: 0.65rem 0.9rem; vertical-align: top; font-weight: 500; border-bottom: 1px solid var(--sb-border); } .sb-riv-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .sb-riv-table .nowrap { white-space: nowrap; } /* Valore mancante: un trattino muto vale più di una cella vuota, perché dice "guardato e non c'è" invece di "forse ce lo siamo dimenticati". */ .sb-riv-na { color: var(--sb-fg-muted); } /* Didascalia sotto la tabella */ .sb-riv-cap { margin: 0.55rem 0 1.6rem; font-size: 0.78rem; line-height: 1.5; color: var(--sb-fg-muted); } /* ── Note e avvertenze ──────────────────────────────────────────────────── Un filo azzurro a sinistra e basta. Le note di questo dossier dicono quasi sempre la stessa cosa — "questo dato è incerto, verificalo" — e non serve un colore d'allarme per dirlo: serve che si vedano tutte uguali. */ .sb-riv-note { margin: 1.2rem 0; padding: 0.9rem 1.1rem; max-width: 46rem; border-left: 2px solid var(--sb-brand); border-radius: 0 8px 8px 0; background: var(--sb-surface-100); font-size: 0.88rem; line-height: 1.6; color: var(--sb-fg-lighter); } .sb-riv-note > :first-child { margin-top: 0; } .sb-riv-note > :last-child { margin-bottom: 0; } .sb-riv-note strong { font-weight: 600; color: var(--sb-fg); } .sb-riv-note-t { display: block; margin-bottom: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sb-brand-text); } /* ── Citazioni storiche ─────────────────────────────────────────────────── Le pagine di storia riportano passi di cronaca lunghi: vanno separati dalla prosa, ma non sono avvertenze. Stessa forma della nota — un filo a sinistra — con il filo grigio invece che azzurro e il corsivo al posto del colore. È il modo del sito di distinguere due cose senza aggiungere un hue. */ .sb-riv-cit { margin: 1.3rem 0; padding: 0.15rem 0 0.15rem 1.1rem; max-width: 46rem; border-left: 2px solid var(--sb-border-stronger); } .sb-riv-cit p { margin: 0 0 0.7rem; font-size: 0.92rem; font-style: italic; line-height: 1.7; color: var(--sb-fg-lighter); } .sb-riv-cit-fonte { display: block; font-size: 0.78rem; line-height: 1.5; color: var(--sb-fg-muted); } .sb-riv-cit-fonte a { color: var(--sb-brand-text); text-decoration: none; } .sb-riv-cit-fonte a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── Cronologia ─────────────────────────────────────────────────────────── Una tabella a due colonne saprebbe dire le stesse date, ma non che sono una sequenza: qui la colonna di sinistra è un asse, e ogni voce ci si aggancia con un pallino. Le date che contano davvero — quelle che nel testo hanno una sezione tutta loro — hanno il pallino azzurro; le altre grigio. Il filo è il border-left della singola voce, non un pseudo-elemento steso su tutta la lista: così l'ultima voce può spegnerlo e la linea finisce sull'ultimo pallino invece di proseguire nel vuoto. */ .sb-riv-crono { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 46rem; } .sb-riv-crono-riga { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.15rem 1.4rem; padding: 0 0 1.05rem 1.2rem; border-left: 1px solid var(--sb-border); } @media (min-width: 560px) { .sb-riv-crono-riga { grid-template-columns: 6rem 1fr; padding-left: 1.4rem; } } .sb-riv-crono-riga:last-child { padding-bottom: 0; border-left-color: transparent; } /* Il pallino a cavallo del filo: 6px di diametro su un filo da 1px, cioè -2.5px per restare centrato. */ .sb-riv-crono-riga::before { content: ""; position: absolute; left: -3.5px; top: 0.4rem; width: 6px; height: 6px; border-radius: 50%; background: var(--sb-border-stronger); } .sb-riv-crono-riga--chiave::before { background: var(--sb-brand); } .sb-riv-crono-anno { font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sb-fg-muted); } .sb-riv-crono-riga--chiave .sb-riv-crono-anno { color: var(--sb-fg); font-weight: 500; } .sb-riv-crono-fatto { font-size: 0.92rem; line-height: 1.6; color: var(--sb-fg-lighter); } .sb-riv-crono-fatto strong { font-weight: 600; color: var(--sb-fg); } /* ── Schede chiave/valore ─────────────────────────────────────────────── */ .sb-riv-kv { margin: 0; } .sb-riv-kv-row { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--sb-border); } @media (min-width: 560px) { .sb-riv-kv-row { grid-template-columns: 13rem 1fr; gap: 0.25rem 1.4rem; } } .sb-riv-kv-row:last-child { border-bottom: 0; } .sb-riv-kv dt { font-size: 0.82rem; color: var(--sb-fg-muted); } .sb-riv-kv dd { margin: 0; font-size: 0.92rem; color: var(--sb-fg); } /* ── Griglia di schede ────────────────────────────────────────────────── */ .sb-riv-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin: 1.2rem 0; } @media (min-width: 640px) { .sb-riv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sb-riv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sb-riv-cardpad { padding: 1.2rem 1.3rem; gap: 0.5rem; } .sb-riv-cardpad h4 { margin: 0; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; color: var(--sb-fg); } .sb-riv-cardpad p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--sb-fg-lighter); } .sb-riv-cardpad dl { margin: 0.2rem 0 0; display: grid; gap: 0.25rem; } .sb-riv-cardpad .row { display: flex; gap: 0.6rem; font-size: 0.84rem; line-height: 1.5; } .sb-riv-cardpad .row span:first-child { flex: none; width: 5.5rem; color: var(--sb-fg-muted); } .sb-riv-cardpad .row span:last-child { color: var(--sb-fg-lighter); } /* ── Blocco di codice / comando ───────────────────────────────────────── */ .sb-riv-code { margin: 0.9rem 0 1.4rem; padding: 1rem 1.1rem; border-radius: 10px; border: 1px solid var(--sb-border-strong); background: var(--sb-surface-100); overflow-x: auto; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.65; color: var(--sb-fg-light); } .sb-riv-code code { font: inherit; white-space: pre; } .sb-riv-code .kw { color: var(--sb-code-kw); } .sb-riv-code .num { color: var(--sb-code-num); } .sb-riv-code .fn { color: var(--sb-code-fn); } /* ── Rassegna stampa ────────────────────────────────────────────────────── Ogni scheda è un rimando, non un articolo: testata, data, titolo e il link all'originale. Non c'è il corpo della notizia e non c'è la sua fotografia — quelli restano a chi la notizia l'ha scritta e pagata. Di conseguenza la scheda deve reggersi sulla sola tipografia: la testata in maiuscoletto muto fa da "logo", il titolo porta tutto il peso. È anche il motivo per cui non c'è un riquadro immagine vuoto a fare da segnaposto. */ .sb-riv-news { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-top: 2rem; } @media (min-width: 640px) { .sb-riv-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sb-riv-news { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sb-riv-news-card { height: 100%; } .sb-riv-news-pad { padding: 1.2rem 1.3rem; gap: 0.5rem; height: 100%; } .sb-riv-news-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } .sb-riv-news-src { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-fg-light); } .sb-riv-news-date { font-size: 0.75rem; color: var(--sb-fg-muted); white-space: nowrap; } .sb-riv-news-title { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--sb-fg); } /* La firma di chi ha scritto il pezzo. Piccola, ma c'è: se il titolo lo prendiamo in prestito, il nome di chi l'ha scritto viene con lui. */ .sb-riv-news-by { margin: -0.2rem 0 0; font-size: 0.78rem; font-style: italic; color: var(--sb-fg-muted); } .sb-riv-news-note { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--sb-fg-lighter); } /* La freccia spinge il link in fondo alla scheda: schede di altezza diversa allineano comunque il piede, e la fila non sembra sfrangiata. */ .sb-riv-news-go { margin-top: auto; padding-top: 0.7rem; } .sb-riv-news-card:hover .sb-riv-news-go { text-decoration: underline; text-underline-offset: 3px; } .sb-riv-news-card:hover .sb-riv-news-go svg { transform: translateX(2px); } /* ── Aggiornamento in evidenza ──────────────────────────────────────────── Una sola scheda larga per il cambio che vale la pena raccontare. Il filo azzurro a sinistra è lo stesso delle note: dice "questa è nuova" senza introdurre un secondo colore. */ .sb-riv-flash { margin-top: 1.4rem; } .sb-riv-flash .sb-panel-inner { border-left: 2px solid var(--sb-brand); padding: clamp(1.2rem, 2.6vw, 1.7rem); gap: 0.6rem; } .sb-riv-flash-badge { /* L'unica pillola PIENA del sito — di tinta brand, con la stessa sagoma delle altre e la variante brand del filo sulle diagonali. Una sola nel foglio, due usi in pagina: l'aggiornamento in evidenza e il segnale «Prossimamente» sopra la stazione meteo. Se ne serve un terzo, si riusa questa: due pillole piene quasi uguali sono peggio di una sola. */ display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; padding: 0.28rem 0.7rem; clip-path: var(--sb-shape-sm); border: 1px solid var(--sb-btn-bd); background: var(--sb-shape-edge-btn), var(--sb-btn-bg); box-shadow: inset 0 1px 0 var(--sb-glass-spec); color: var(--sb-btn-fg); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .sb-riv-flash h3 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 500; letter-spacing: -0.02em; color: var(--sb-fg); } .sb-riv-flash p { margin: 0; max-width: 46rem; font-size: 0.92rem; line-height: 1.65; color: var(--sb-fg-lighter); } .sb-riv-flash p strong { font-weight: 600; color: var(--sb-fg); } .sb-riv-flash-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 0.3rem; } .sb-riv-flash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; } /* Una lastra in evidenza per volta, e per categoria: quella che scade sta in primo piano, le altre restano in pagina ma fanno un passo indietro. Filo neutro invece dell'azzurro, lastra più stretta, titolo della misura di una scheda, collegamenti di testo al posto dei bottoni — e nessuna pillola piena, che in pagina ne resta una sola come dice la regola qui sopra. */ .sb-riv-flash--min { margin-top: 0.9rem; } .sb-riv-flash--min .sb-panel-inner { border-left-color: var(--sb-border-strong); padding: clamp(0.95rem, 2vw, 1.2rem); gap: 0.4rem; } .sb-riv-flash--min h3 { font-size: 1rem; } .sb-riv-flash--min h3 .sb-riv-na { font-weight: 400; font-size: 0.85rem; } .sb-riv-flash--min p { font-size: 0.85rem; line-height: 1.6; } .sb-riv-flash--min .sb-riv-flash-actions { margin-top: 0.35rem; gap: 0.9rem; } /* ── Avviso urgente, a scadenza ────────────────────────────────────────── L'ECCEZIONE alla regola dell'unico colore. Un avviso che deve saltare all'occhio — maltempo, strada chiusa, allerta — porta il ROSSO: filo spesso a sinistra, lastra appena tinta, pillola piena rossa, titolo più marcato. Ne sta uno per volta in pagina e a tempo: lo