/* ══════════════════════════════════════════════════════════════ SCROLLCAMPER — TOKEN DI BRAND ────────────────────────────────────────────────────────────── Palette e tipografia dal brand book v3 (agosto 2026). MIGRAZIONE COMPLETATA — colori di brand: #1e8a8f #289d8e #2AACB8 -> --sc-teal #166c70 -> --sc-teal-scuro #f5a623 #f0a037 #f39c12 -> --sc-senape #e09515 #d88c2e #c47a00 -> --sc-senape-scuro #ffd280 -> --sc-senape-chiaro #fff8ee #fff5e6 -> --sc-senape-velo #f9f4e8 #f5f5f5 #f2f2f2 -> --sc-sabbia #e8f7f7 -> --sc-teal-tenue #333 #222 #162a30 -> --sc-notte 'Roboto Slab' -> --sc-display (Geist) 'Roboto' -> --sc-testo (Poppins) MIGRAZIONE COMPLETATA — grigi di interfaccia (revisione v3): #6d7779 #4a5254 #555 #666 -> --sc-testo-tenue #888 #999 -> --sc-testo-debole #9aa3a5 #ccc -> --sc-testo-sottile #c7cccd #ececea #ebebeb #e0e0e0 #ddd #eee #d9d9d9 -> --sc-filo #fff #fafafa #f9f9f9 -> --sc-bianco Perche' e' cambiato: i grigi neutri su un fondo caldo come la Sabbia virano al freddo. I quattro token nuovi sono il Blu notte diluito sulla Sabbia — stessa temperatura del fondo, contrasti verificati (tenue 5,59:1 · debole 3,12:1 · sottile 2,01:1 · filo 1,36:1, quest'ultimo solo bordi, mai testo). AGGIUNTO: --sc-teal-chiaro, che mancava. Era usato in 11 punti ma non dichiarato: senza, il browser ripiegava su currentColor e l'outline di focus cambiava colore da un elemento all'altro. NON coperto da questo file: public/css/archivio.css. Va migrato con la stessa mappa. ══════════════════════════════════════════════════════════════ */ :root { --sc-teal: #249089; --sc-teal-scuro: #1B6F6A; --sc-senape: #ECA134; --sc-senape-scuro: #C9861F; --sc-notte: #162A30; --sc-sabbia: #F2EFE6; --sc-bianco: #FEFEFD; /* Derivati, per stati e sfondi tenui. Non sono nel brand book: servono a sostituire i tanti mezzi-toni del mockup senza reintrodurre colori fuori palette. */ --sc-senape-chiaro: #F6D3A0; --sc-teal-tenue: #E4F0EE; /* Teal schiarito per i dettagli sottili sul fondo Notte: outline di focus e sottolineature. Il Teal pieno sul Notte sta a 3,85:1, qui siamo a 7,31:1. Era usato in 11 punti ma non era mai dichiarato: senza, il browser ripiegava su currentColor e l'outline di focus cambiava colore da un elemento all'altro. */ --sc-teal-chiaro: #5AC7B7; /* Veli per gli hover: un'ombra di colore del brand, non la Sabbia. La Sabbia e' una superficie di lettura, sui pulsanti risultava sporca e spenta. Questi sono i due colori diluiti quasi a bianco. */ --sc-senape-velo: #FDF5E8; --sc-teal-velo: #EDF6F3; /* Scala di grigi: il Blu notte diluito sulla Sabbia, non grigi neutri. Su un fondo caldo come la Sabbia i grigi neutri virano al freddo. Sostituiscono le otto tonalita' scritte a mano del mockup. tenue 5,59:1 su Sabbia — testo secondario debole 3,12:1 — solo label e caption sottile 2,01:1 — solo icone decorative filo 1,36:1 — bordi, mai testo */ --sc-testo-tenue: #546163; --sc-testo-debole: #808987; --sc-testo-sottile: #A7ACA8; --sc-filo: #CFCFC9; /* Geist 600/700 nei titoli, Poppins 400/500/600 nei testi. Per passare all'altra proposta (Montserrat + Brown Std) bastano queste due righe, piu' il in layouts/default.php. */ --sc-display: 'Geist', system-ui, sans-serif; --sc-testo: 'Poppins', system-ui, sans-serif; /* Pagina articolo: larghezza del testo, della colonna laterale e dello spazio fra le due. IN PIXEL e non in "ch" perche' ch e' la larghezza del carattere DELL'ELEMENTO su cui e' scritto: il corpo dell'articolo e' a 17,5px, griglia e copertina ereditano i 16px del body, e 72ch scritto su tre elementi dava tre larghezze diverse che non combaciavano. 740px a 17,5px sono circa 81 caratteri per riga. Sopra i 90 la lettura diventa faticosa — l'occhio fatica a ritrovare l'inizio della riga dopo — quindi la pagina non arriva ai 1400px pieni come le altre: 1240 e' il massimo con cui il testo resta leggibile. Il resto e' margine, non spazio sprecato. */ --art-testo: 740px; --art-lato: 420px; --art-gap: 80px; /* Larghezza massima del contenuto, uguale su tutte le pagine. Prima erano tre: 1200 (.container), 1400 (dettaglio camper) e 1600 (archivio), e passando da una pagina all'altra il sito sembrava assemblato a pezzi. La leggibilita' dei testi lunghi NON dipende da qui: paragrafi e blocchi editoriali hanno un max-width proprio espresso in "ch". */ --sc-max: 1400px; /* Altezza dell'header, header sticky. Serve fuori da questo file: la barra filtri dell'archivio e la sidebar sticky devono fermarsi sotto l'header, non sparirci dietro. Se cambi il padding di "body > header nav" o l'altezza dei controlli, aggiorna questo valore. Calcolo: 14px+14px di padding + 44px del cerchio logo + 3px di filo. */ --sc-header-h: 75px; } /* Ancoraggi e scrollIntoView: senza questo il bersaglio finisce sotto l'header sticky. */ html { scroll-padding-top: calc(var(--sc-header-h) + 12px); } @media (max-width: 992px) { :root { --sc-header-h: 69px; } /* padding 12+12, controlli 42, filo 3 */ } /* L'attributo hidden vale display:none nel foglio del browser, cioe' specificita' ZERO: qualunque regola nostra con un display esplicito lo sovrascrive. E' quello che succedeva nella galleria a tutto schermo, dove .pd-lightbox-singola{display:flex} teneva visibile un pannello dichiarato hidden, e il pulsante "Tutte le foto" restava a video anche quando non serviva. Questa riga e' il reset standard: hidden torna a voler dire nascosto. */ [hidden] { display: none !important; } /* Etichetta visibile solo agli screen reader (label della ricerca) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--sc-testo); background: var(--sc-bianco); color: var(--sc-notte); line-height: 1.6; } /* Header e Navigation: le regole stanno piu' sotto, ancorate a "body > header". Qui c'erano "header" e "nav" nudi, che colpivano anche il
della pagina chi-siamo e i breadcrumb in