/* Distretto Biologico del Territorio Fiorentino — foglio di stile v0 Principi seguiti (vedi README): - Nessun font esterno: solo stack di sistema (0 richieste di rete, 0 KB extra). - Nessun framework CSS: ~150 righe scritte a mano, facili da modificare. - Palette provvisoria ispirata al suolo e alle colture del territorio, non al verde "bio da stock fotografico". Da sostituire quando il template di identità visiva in Notion sarà completato. */ /* Font Biancoenero (Biancoenero Edizioni) — font ad alta leggibilità, pensato per l'accessibilità di lettura (dislessia compresa), licenza gratuita per uso non commerciale — vedi il credito nel footer (partials/footer.html). File auto-ospitati in static/fonts/: woff2 come formato primario (convertito da .ttf con fonttools, stesso disegno dei caratteri, ~70% più leggero), .ttf come ripiego per browser che non supportano woff2. 4 varianti disponibili: Regular, Italic, Bold, Bold Italic — tutti pesi veri (non sintetici). Eccezione intenzionale al principio "zero font esterni": qui l'accessibilità pesa più del peso della pagina. Vedi CLAUDE.md. */ @font-face { font-family: "Biancoenero"; src: url("/fonts/Biancoenero-Regular.woff2") format("woff2"), url("/fonts/Biancoenero-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Biancoenero"; src: url("/fonts/Biancoenero-Italic.woff2") format("woff2"), url("/fonts/Biancoenero-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Biancoenero"; src: url("/fonts/Biancoenero-Bold.woff2") format("woff2"), url("/fonts/Biancoenero-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Biancoenero"; src: url("/fonts/Biancoenero-BoldItalic.woff2") format("woff2"), url("/fonts/Biancoenero-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } :root { /* Palette — terra, ulivo, crosta. --colore-ulivo è il verde reale del logo (#677821, estratto dal file static/img/logo/DBTF_logo.png), formalizzato il 2026-07-07. --colore-ulivo-scuro è la stessa tonalità scurita della stessa proporzione usata nella palette provvisoria precedente (~12 punti di lightness in meno), non un verde inventato a parte. Un solo colore di sfondo neutro (--colore-crosta) in tutto il sito, non più due toni diversi — --colore-grano è stato rimosso. Il resto della palette (terra/ crosta/confine) resta provvisorio, in attesa del template Notion "Sistema di Identità Visiva DBTF". */ --colore-terra: #5b4636; /* testo principale, ispirato al suolo */ --colore-ulivo: #677821; /* verde reale del logo — accento primario */ --colore-ulivo-scuro: #3f4a14; --colore-crosta: #f4efe4; /* sfondo pagina, unico in tutto il sito */ --colore-confine: #d8c9a8; /* linee, divisori */ --colore-bio: #677821; /* marker mappa: azienda bio */ --colore-non-bio: #a8967a; /* marker mappa: azienda non bio */ --colore-in-conversione: #8d9a5a; /* marker mappa: SAU in conversione (evoluzione-del-biologico) */ /* Asse diverso da bio/in-conversione/non-bio sopra (utilizzata/non utilizzata, non biologico/convenzionale) — colori distinti apposta, non riusano quelli sopra: --colore-sau coincide altrimenti con --colore-bio (stesso hex) e confonderebbe le due classificazioni nella legenda "SAU su superficie condotta". */ --colore-sau: var(--colore-terra); --colore-non-sau: var(--colore-confine); /* Per il delta anno su anno (chip BioInSau + retino diagonale nell'istogramma) — non più --colore-ulivo per il positivo (troppo simile al colore del segmento "Biologico", stesso hex: un retino verde sopra quel segmento sarebbe stato quasi invisibile) né il rosso troppo desaturato di prima (poco contrasto, segnalato 2026-07-30) — due toni più decisi, ma restano nella stessa famiglia calda/naturale della palette, non un verde/rosso acceso fuori tono. */ --colore-positivo: #3f8f24; --colore-negativo: #9c4a3c; /* Colore SOLO per le barre (riempimento istogramma + fascia BioInSau, entrambe con opacity, non colore pieno — vedi layouts/atlante/moduli.html): scelto a parte da --colore-positivo (2026-08-04, via il simulatore con color picker) — il testo delle bandierine/chip resta sul tono originale più scuro, la barra usa questo verde più acceso apposta, non la stessa variabile con opacity diversa. Nessun --colore-negativo-barra equivalente: non richiesto, il rosso resta un'unica variabile per testo e barra. */ --colore-positivo-barra: #a3d756; /* Pagina Comunità/Membri: Comitato ⊂ Assemblea ⊂ Comunità è un contenimento vero, non tre categorie diverse — una rampa che passa dal vero verde del logo (Assemblea) prima di scurire verso ulivo-scuro (Comitato, il livello più "concentrato"), non tinte inventate a parte. Provvisorio quanto il resto della palette. */ --colore-comunita: color-mix(in srgb, var(--colore-ulivo) 40%, var(--colore-crosta)); --colore-assemblea: var(--colore-ulivo); --colore-comitato: var(--colore-ulivo-scuro); /* Il bordo della membrana resta il verde chiaro sopra (fa parte dell'identità della forma) — ma come colore del testo è troppo poco contrastato sullo sfondo crema. Stessa tinta, più scura, solo dove --colore-comunita serve a leggere una scritta. */ --colore-comunita-testo: color-mix(in srgb, var(--colore-ulivo) 75%, var(--colore-crosta)); /* Atlante: provato un colore diverso per ciascuna delle tre categorie (terra/ulivo/ulivo-scuro), poi scartato il 2026-07-15 — "usa solo il colore di base per tutto": le tre variabili sotto puntano tutte allo stesso `--colore-ulivo` (l'accento primario del sito), di proposito, per restare un esperimento facile da annullare (basta cambiare queste tre righe) se il test convince a tornare indietro. L'impianto (--colore-categoria per pagina, vedi `list.html`) resta quello di prima, cambia solo il valore. */ --colore-indagini: var(--colore-ulivo); --colore-sguardi: var(--colore-ulivo); --colore-scenari: var(--colore-ulivo); /* Unica eccezione deliberata alla palette terra/ulivo/crosta: il banner notizie in home deve "saltare all'occhio" più di qualunque altro elemento del sito (è un richiamo a un evento con una data, non un contenuto da leggere con calma) — nessuna parentela cromatica cercata col resto, di proposito. Un giallo/miele acceso invece del terracotta iniziale: con testo scuro sopra (deciso dopo, vedi .banner-notizie__voce) un fondo più chiaro dà più contrasto — proposta, non l'ultima parola: se non convince, si cambia solo questa riga. */ --colore-notizie: #e8b94a; /* dorato, eccede la palette del sito apposta ma resta leggibile */ /* Fallback di sistema: se un file font non è presente, il sito resta comunque leggibile e a zero download extra. */ --font-titoli: "Biancoenero", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-testo: "Biancoenero", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-dati: ui-monospace, "SF Mono", Consolas, monospace; --misura-max: 42rem; /* Larghezza propria per le tabelle che escono dalla colonna di lettura (.tabella-scroll, >980px) — più ampia di --misura-max ma non edge-to-edge come .banner-notizie: una tabella a piena larghezza viewport su un monitor ampio sarebbe comunque poco leggibile (celle troppo distanziate). */ --misura-tabella: 62rem; --spazio: 1.25rem; } * { box-sizing: border-box; } /* Scrollbar in linea con l'identità grafica (marroncino chiaro --colore-confine su crosta, stesso colore dei bordi/divisori nel resto del sito) invece del grigio di sistema — vale su tutta la pagina e su qualunque contenitore con scroll proprio (es. la colonna testo/tabelle del template Atlante "moduli"). Due sintassi separate perché non esiste ancora uno standard unico: Firefox usa scrollbar-width/scrollbar-color, gli altri browser (Chrome/Safari/ Edge, motore WebKit/Blink) le pseudo-classi ::-webkit-scrollbar-*. */ * { scrollbar-width: thin; scrollbar-color: var(--colore-confine) var(--colore-crosta); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--colore-crosta); } ::-webkit-scrollbar-thumb { background: var(--colore-confine); border-radius: 5px; border: 2px solid var(--colore-crosta); } ::-webkit-scrollbar-thumb:hover { background: var(--colore-terra); } /* Per i link con #ancora (es. "↑ Filtri" su /comunita/) — la regola che la disattiva per chi preferisce meno movimento era già pronta più sotto (prefers-reduced-motion), mancava solo questa base. */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--colore-crosta); color: var(--colore-terra); font-family: var(--font-testo); font-size: 1.05rem; line-height: 1.6; /* Gli elementi "full bleed" (.banner-notizie, .tabella-scroll in stampa, i moduli Atlante) escono a piena larghezza con "width: 100vw; margin: 0 calc(-50vw + 50%)" — 100vw misura il viewport INCLUSA l'area della scrollbar verticale, mentre "50%" (percentuale sul contenitore, che la scrollbar la esclude già) no: quando la pagina è abbastanza alta da avere una scrollbar verticale, i due calcoli non si compensano più esattamente e l'elemento sporge di pochi pixel oltre il bordo reale, creando una scrollbar orizzontale fantasma. overflow-x:hidden qui taglia quei pochi pixel invisibili (nessun contenuto vero perso, è già oltre il bordo) invece di dover ricalcolare la larghezza via JS. */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-titoli); font-weight: 700; line-height: 1.25; } /* h1/h2/h3 restano sul verde scuro (in .corpo-evento diventano un'etichetta piena, sfondo ulivo, vedi evento.css) — da h4 in giù niente più badge, solo testo marrone semplice, nessuno sfondo (2026-09-18, richiesta esplicita: "h4 in poi senza sfondo e colore marrone"). */ h1, h2, h3 { color: var(--colore-ulivo-scuro); } h4, h5, h6 { color: var(--colore-terra); } /* margin-bottom ridotto rispetto al default del browser (~0.67em): allinea l'h1 al sottotitolo subito sotto, che è pensato per leggersi come un'unica intestazione con l'h1, non come un paragrafo separato. */ h1 { font-size: 1.6rem; margin-bottom: 0.3rem; } /* Sottotitolo facoltativo (front matter "subtitle") sotto un h1 di sezione — oggi usato solo da Atlante, ma generico: qualunque _index.md può impostarlo. Stessa dimensione dell'h1 (1.6rem) e stesso margine, corsivo e non in grassetto per restare leggibile come sottotitolo e non come un secondo titolo. */ .sottotitolo { font-style: italic; font-weight: 400; font-size: 1.6rem; margin-top: 0; color: var(--colore-terra); } /* Scala esplicita h2-h6, tutta in rem (2026-09-18, bug corretto e poi affinato lo stesso giorno): prima solo h1/h2 avevano un font-size proprio, h3-h6 restavano al default del browser, "em" RELATIVO al font-size del contenitore che li ospita — dove il contenitore ha un font-size più grande del solito (es. .corpo-evento .colonna-lettura, 1.15rem invece dell'1.05rem di body) quell'em relativo poteva superare il rem fisso del livello sopra (h3 più grande del suo stesso h2 genitore). Ogni livello ora ha il proprio rem fisso, indipendente dal contenitore, con un salto sempre percepibile da un livello al successivo (margin-top più ampio del default del browser su h2: più respiro tra una sezione e la successiva in testi lunghi). */ h2 { font-size: 1.4rem; margin-top: 2.5rem; border-bottom: 1px solid var(--colore-confine); padding-bottom: 0.3rem; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; } h5 { font-size: 0.95rem; } h6 { font-size: 0.9rem; } /* Puntini degli elenchi più piccoli del testo che accompagnano — ::marker si può dimensionare a parte dal testo della riga. */ li::marker { font-size: 0.85em; } a { color: var(--colore-ulivo-scuro); } a:focus-visible, button:focus-visible { outline: 3px solid var(--colore-ulivo); outline-offset: 2px; } /* Nessun vincolo di larghezza: solo un padding fisso ai lati, come il body di solar.lowtechmagazine.com — è così che il sito arriva davvero "edge to edge" su schermi larghi. */ .contenitore { width: 100%; margin: 0 auto; padding: 0 var(--spazio); } /* Colonna di lettura: vincola il testo lungo a una larghezza leggibile dentro il contenitore ora fluido — stessa idea del vincolo su .entry-content di solar.lowtechmagazine.com, applicata qui con un div wrapper invece di una lista di selettori figli. */ .colonna-lettura { max-width: var(--misura-max); margin: 0 auto; } /* Intestazione: stesso sfondo del corpo pagina, nessun colore a parte. */ .intestazione { background: var(--colore-crosta); } .intestazione .contenitore { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-top: 1rem; padding-bottom: 1rem; } .intestazione__nome { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-titoli); font-size: 1.4rem; text-decoration: none; color: var(--colore-terra); /* Senza questo, un figlio flex non si restringe mai sotto la propria dimensione "naturale" di contenuto (default min-width:auto) — su schermi stretti costringeva l'intera intestazione ad andare a capo (il pulsante hamburger finiva su una riga sotto al logo) invece di lasciare che il solo titolo si stringesse/andasse a capo lui. */ min-width: 0; } /* Altezza in em, non rem né "100% del contenitore": dentro un flex la percentuale non si risolve perché l'altezza del contenitore dipende a sua volta dal testo (riferimento circolare) — il browser ignora il 100% e torna alla dimensione naturale dell'immagine (enorme). "em" (non "rem"!) lo lega al font-size di .intestazione__nome — quando quello si riduce su mobile, il logo si riduce insieme, mantenendo le proporzioni, invece di restare fisso e sembrare staccato dal testo. Il testo (.intestazione__titolo) invece NON eredita più il font-size di .intestazione__nome: ha una sua dimensione esplicita (sotto), indipendente da quella del logo. */ .intestazione__logo { display: block; flex-shrink: 0; } .intestazione__logo svg { display: block; height: 5em; width: auto; } /* Il logo (DBTF_logo.svg) è disegnato con fill="currentColor" apposta — eredita il colore del testo di default. Il colore si cambia qui, in ".intestazione__nome" (non nel solo logo): il titolo lo eredita a sua volta per la stessa ragione, quindi un solo "color" sull'hover del link basta a far diventare verde ulivo sia icona sia testo insieme, senza toccare l'SVG. */ .intestazione__nome { transition: color 0.3s ease; } .intestazione__nome:hover, .intestazione__nome:focus-visible { color: var(--colore-ulivo); } .intestazione__titolo { display: block; max-width: 12rem; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; } .linee-di-livello { height: 10px; background: repeating-linear-gradient( to right, transparent 0, transparent 18px, var(--colore-confine) 18px, var(--colore-confine) 19px ); } nav.principale ul { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: 0; flex-wrap: wrap; } nav.principale a { text-decoration: none; font-size: 0.95rem; } nav.principale a:hover { text-decoration: underline; } /* Menu mobile rifatto da zero (2026-08-22, dopo tre bug reali diversi nati dallo stesso approccio precedente — "la lista si espande dentro il flusso, spingendo giù il resto della pagina": fragile per natura, qualunque cosa condivida quel flusso (il bottone compreso) rischiava di spostarsi con lei. Ora la lista è un pannello a comparsa POSIZIONATO SOPRA il contenuto (position:absolute rispetto a .intestazione .contenitore, già position:relative) — non fa mai parte del flusso, non può spingere né spostare nient'altro. Icona hamburger↔X classica (tre linee vere, non il fiorellino delle finalità): più immediatamente riconoscibile come "menu" — richiesta esplicita dopo aver visto il fiorellino in pratica. */ .menu-hamburger { display: none; position: relative; width: 1.6rem; height: 1.6rem; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .menu-hamburger__linea { position: absolute; left: 0; width: 100%; height: 2px; background: var(--colore-terra); transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease; } .menu-hamburger__linea:nth-child(1) { top: 15%; } .menu-hamburger__linea:nth-child(2) { top: calc(50% - 1px); } .menu-hamburger__linea:nth-child(3) { top: calc(85% - 2px); } /* Aperto: le linee 1/3 ruotano a 45°/-45° incrociandosi al centro (una X), la 2 sfuma — stesso [aria-expanded="true"] già letto da menu.js, nessun JS in più per l'icona. */ .menu-hamburger[aria-expanded="true"] .menu-hamburger__linea:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); } .menu-hamburger[aria-expanded="true"] .menu-hamburger__linea:nth-child(2) { opacity: 0; } .menu-hamburger[aria-expanded="true"] .menu-hamburger__linea:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .menu-hamburger__linea { transition: none; } } /* Stessa soglia del resto del sito (980px), invece della soglia a sé usata prima — un solo numero da ricordare, e copre anche i tablet. */ @media only screen and (max-width: 980px) { /* Il logo si ridimensiona da solo (è in em, vedi sopra) seguendo questo font-size — non serve più un'altezza fissa a parte. */ .intestazione__nome { font-size: 1.1rem; gap: 0.5rem; } .intestazione__titolo { max-width: 9rem; font-size: 1.02rem; } .menu-hamburger { display: block; } /* Il pannello: position:absolute rispetto a .intestazione .contenitore (già position:relative) — "left:0; right:0" lo allinea ai bordi dell'header, "top:100%" lo aggancia appena sotto. Non essendo nel flusso, non serve che