/* ========================================================================== QUOTAZIONI CASE — design tokens Direzione "Il catasto dei valori", congelata il 2026-08-24. Dopo questo file nessun colore e nessuna dimensione nasce altrove: se un valore non e' qui, non si usa. Quarto sito-dato dopo costodelpieno.it, balneabile.it e scioperometro.it. Leve mosse rispetto ai tre (vedi .design-log.json): - dominante: una BARRA DI VALORE (fascia min-max su una scala) con la striscia di distribuzione delle zone di un comune. Non una cifra (costo), non una linea del tempo (balneabile), non un quadrante (scioperometro). - registro: SERIF nei titoli (Zilla Slab, slab: mattone, solidita') + Hanken Grotesk nel testo + DM Mono nelle cifre. Nessuno dei tre gemelli e' serif-slab; balneabile e' un serif da libro (Newsreader), qui e' uno slab da insegna. E' l'eccezione istituzionale ammessa: il dato viene dall'Agenzia delle Entrate (registro pubblico, YMYL). - griglia: colonna principale + rail destro editoriale, con la striscia di distribuzione a piena larghezza. Non la barra filtri sinistra del cruscotto (scioperometro). - carta: avorio caldo tinto terracotta (~L* 95). I gemelli sono carta calda neutra, azzurro-ciano, bianco freddo. - spigoli: pannelli PIATTI a filo, raggio 4px, separati da righe hairline, niente ombre da cruscotto (scioperometro ha pannelli sollevati 10px). - contenitore: 1120px (costo 1180, balneabile 960, scioperometro 1380). La scala semantica codifica il PREZZO al mq: 5 fasce sequenziali dal sabbia (piu' economico) all'ossidiana di mattone (piu' caro), ordinate per chiarezza -> sicure al daltonismo perche' i gradini differiscono in luminosita', non solo in tinta. Nessun colore e' decorativo: la tinta di una barra dice quanto vale la zona senza leggere la cifra. ========================================================================== */ :root { /* --- TIPOGRAFIA --------------------------------------------------------- Zilla Slab: slab serif (Typotheque per Mozilla) solo per titoli e numeri d'insegna. Hanken Grotesk: testo. DM Mono: cifre, gia' monospazio quindi tabulare per natura. */ --font-head: 'Zilla Slab', Georgia, 'Times New Roman', serif; --font-text: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-num: 'DM Mono', 'SFMono-Regular', Consolas, monospace; /* scala propria: 12 / 14 / 16 / 20 / 27 / 40 (diversa dai tre gemelli) */ --t-xs: 0.75rem; /* 12 - didascalie, note */ --t-sm: 0.875rem; /* 14 - tabelle, corpo minore */ --t-md: 1rem; /* 16 - corpo */ --t-lg: 1.25rem; /* 20 - sottotitoli */ --t-xl: 1.6875rem; /* 27 - titoli sezione */ --t-2xl: 2.5rem; /* 40 - il valore dominante */ --lh-tight: 1.14; --lh-num: 1; --lh-body: 1.62; --measure: 66ch; /* --- SCALA SEMANTICA: FASCIA DI PREZZO AL MQ ---------------------------- Cinque gradini sequenziali (terracotta), ancorati ai quantili nazionali del valore residenziale (calcolati alla costruzione, non scelti a occhio). 1 economico 2 accessibile 3 medio 4 alto 5 pregiato Regola daltonismo: la fascia porta SEMPRE anche un numero e un'etichetta; la tinta non e' mai l'unico segnale. La rampa e' ordinata per luminosita', quindi resta leggibile in scala di grigi. */ --band-1: #dfa25c; --band-1-bg: #f6e7d1; --band-1-ink: #79491a; --band-2: #cf7b3c; --band-2-bg: #f2dbc1; --band-2-ink: #713a13; --band-3: #bd5733; --band-3-bg: #efcdbb; --band-3-ink: #692b16; --band-4: #9d3a2a; --band-4-bg: #ebc0b2; --band-4-ink: #5a2018; --band-5: #772320; --band-5-bg: #e6b2a8; --band-5-ink: #481412; --band-none: #b9ab97; /* dato residenziale assente */ /* --- NEUTRI CALDI (pietra/avorio) — mai #000, mai #fff ---------------- */ --n-950: #17130d; --n-900: #26201a; /* inchiostro */ --n-800: #372f26; --n-700: #4c4034; --n-600: #665847; --n-550: #756757; /* passa AA sul pannello per testo piccolo */ --n-500: #8a7c69; --n-400: #a99a84; --n-300: #cbbda4; --n-300b: #d8ccb8; --n-200: #e4dac9; --n-100: #efe7d9; --n-050: #f7f2ea; /* --- ACCENTO — uno solo, solo per link e stato attivo ----------------- Petrolio: freddo, complementare alla terracotta, volutamente FUORI dalla scala di prezzo perche' quei cinque colori qui vogliono dire un'altra cosa (quanto costa). Un link non e' un valore. */ --accent: #0d6e66; --accent-hover: #094f49; --focus: #1f8f85; /* --- RUOLI ------------------------------------------------------------- */ --paper: #f7f2ea; /* avorio caldo tinto terracotta, ~L* 95 */ --panel: #fffdf9; /* pannello quasi bianco caldo */ --panel-sunken: #efe6d7; --ink: var(--n-900); --ink-soft: var(--n-700); --ink-faint: var(--n-550); --rule: var(--n-300b); --rule-soft: var(--n-200); /* --- GRIGLIA 4px ------------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --row-h: 48px; /* righe ariose (scioperometro 40) */ --cell-pad: var(--s3) var(--s4); --wrap: 1320px; --measure-px: 660px; --rail: 300px; --border: 1px solid var(--rule); --border-soft: 1px solid var(--rule-soft); --radius: 4px; /* documento a filo, non carta da cruscotto */ --radius-sm: 3px; /* niente ombre da cruscotto: separazione a righe hairline. Una sola ombra leggerissima per il menu a tendina mobile e il banner. */ --elev-pop: 0 6px 20px -8px rgba(38,32,26,.28); } /* --- DARK MODE: ricalibrata, non invertita ------------------------------- Carta bruno-scura calda. La rampa di prezzo va rischiarata: su fondo scuro i mattoni scuri collassano. I rapporti tra i gradini restano gli stessi. */ @media (prefers-color-scheme: dark) { :root { --band-1: #e6b878; --band-1-bg: #33261a; --band-1-ink: #f0cf9f; --band-2: #e08b4d; --band-2-bg: #35230f; --band-2-ink: #f2b98a; --band-3: #d76a44; --band-3-bg: #371c12; --band-3-ink: #f0a184; --band-4: #cf5745; --band-4-bg: #38160f; --band-4-ink: #f09484; --band-5: #c6493f; --band-5-bg: #37120f; --band-5-ink: #f08b82; --band-none: #6b6152; --paper: #17130f; --panel: #201a14; --panel-sunken: #100c09; --ink: #f0e8dc; --ink-soft: #d3c7b6; --ink-faint: #a89a86; --rule: #3a3025; --rule-soft: #2a2219; --accent: #5ec5b9; --accent-hover: #8ad8cf; --focus: #5ec5b9; --elev-pop: 0 8px 24px -6px rgba(0,0,0,.6); } }