/* ============================================================ reFrame — marchio.css FONTE UNICA dei valori del marchio. Ogni pagina di reFrame carica questo file per primo e non ridefinisce mai un colore, un font o una curva per conto suo. Se un valore non sta qui dentro, non è del marchio: o va aggiunto qui, o non va usato. Tre livelli, e vanno letti in quest'ordine: 1. GREZZI i valori veri, scritti una volta sola 2. SEMANTICI cosa significa quel valore (--carta, --accento) 3. RUOLI misure per tipo di elemento (--t-1, --r-2, --ombra-2) Nelle pagine si usano SOLO i nomi dei livelli 2 e 3. Un #hex scritto dentro una pagina è un errore, non una scorciatoia. Aggiornato: 2026-09-21 ============================================================ */ :root{ /* ---------- 1. GREZZI ---------- */ /* Carta e inchiostro. Scelta del 21 settembre: base chiara e fredda (non più panna) e fondo scuro blu-carbone (non più verde bosco) — famiglia unica con l'accento blu, coerente con un target di attività locali invece che con l'estetica premium di prima. Appena sotto il bianco puro: sotto il serif grande, il bianco puro sembra una bozza — quel motivo resta valido, quindi non ci si arriva. */ --g-crema: #F5F7FA; --g-crema-2: #E4EAF2; --g-crema-3: #C8D3E4; --g-bosco: #121A2E; --g-bosco-2: #2B3550; --g-salvia: #595C64; --g-salvia-2: #A3A7B0; --g-salvia-3: #90949E; /* ---------- L'ACCENTO ---------- Blu segnale, scelto il 21 settembre: sostituisce le tre finaliste del 17 settembre (petrolio, vino/nero, rosa) e l'arancione prima ancora. Storico delle tre finaliste e del perché sono state scartate: vault, agente/decisioni.md. Numeri di questa scelta: acc su carta 8,99:1 — deuteranopia 9,78 — protanopia 8,28 (il più stabile sotto daltonismo simulato fra tutti i candidati) */ --g-accento: #0C3A97; --g-accento-premuto: #0B3384; --g-accento-chiaro: #89A1D2; /* Caratteri. Serviti dal dominio (fonts/), mai da server esterni: è un requisito dell'informativa privacy, non un gusto. */ --g-serif: "Boska","Iowan Old Style",Palatino,Georgia,serif; --g-serif-marchio:"Gambetta","Iowan Old Style",Palatino,Georgia,serif; --g-sans: "Switzer",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --g-sans-etich: "General Sans",-apple-system,BlinkMacSystemFont,Arial,sans-serif; /* Curve. Quattro, non una per componente: se ogni elemento ha la sua, i movimenti non sembrano più fatti dalla stessa mano. */ --eo: cubic-bezier(.23,1,.32,1); /* entrate e uscite */ --eio: cubic-bezier(.77,0,.175,1); /* spostamenti sullo schermo */ --molla: cubic-bezier(.16,1,.3,1); /* corse lunghe: sipario, maschere */ --molla2:cubic-bezier(.34,1.24,.64,1); /* slancio: solo dove c'è una spinta vera */ /* ---------- 2. SEMANTICI ---------- */ --carta: var(--g-crema); /* il 60%: fondo di ogni pagina */ --carta-2: var(--g-crema-2); /* schede, campi, fasce alternate */ --carta-3: var(--g-crema-3); /* tratti e separazioni sulla carta */ --inchiostro: var(--g-bosco); /* titoli, e fondo delle sezioni scure */ --testo: var(--g-bosco-2); /* testo corrente */ --testo-muto: var(--g-salvia); /* didascalie, note, meta */ --accento: var(--g-accento); /* il 10%: solo azioni */ --accento-premuto: var(--g-accento-premuto); /* passaggio del mouse e pressione */ --accento-chiaro: var(--g-accento-chiaro); /* l'accento sui fondi scuri */ --su-scuro: var(--g-salvia-2); /* testo tenue sul bosco */ --su-scuro-muto: var(--g-salvia-3); /* etichette sul bosco */ --bordo: rgba(18,26,46,.16); --bordo-forte: rgba(18,26,46,.30); --bordo-su-scuro: rgba(245,247,250,.16); /* ---------- 3. RUOLI ---------- */ /* Tipografia. Il serif fa i titoli, il sans fa la lettura, il maiuscoletto fa le etichette. Tre lavori, tre caratteri, e nessuno dei tre fa il lavoro di un altro. */ --titolo: var(--g-serif); --marchio: var(--g-serif-marchio); --sans: var(--g-sans); --etich: var(--g-sans-etich); /* Scala. La crescita non è lineare: più il testo è grande, più la spaziatura fra le lettere va stretta, altrimenti da lontano le parole si sfilacciano. I valori di tracking sono accoppiati. */ --t-mega: clamp(84px,20.5vw,320px); /* marchio in grande, solo nel piede */ --t-1: clamp(44px,5.6vw,80px); /* titolo di apertura, uno per pagina */ --t-2: clamp(2.45rem,6.4vw,4.55rem); /* titoli di sezione */ --t-3: clamp(1.38rem,2.9vw,2.05rem); /* sottotitoli */ --t-4: clamp(1.06rem,2vw,1.3rem); /* occhiello, testo d'apertura */ --t-corpo: 17px; --t-piccolo: 15px; --t-minuto: 13.5px; --t-etichetta: 12px; --tr-mega: -.06em; --tr-1: -.042em; --tr-2: -.035em; --tr-3: -.02em; --tr-corpo: -.006em; --tr-etichetta: .2em; --int-stretta: 1.02; /* titoli grandi */ --int-media: 1.28; /* sottotitoli */ --int-larga: 1.68; /* testo corrente */ /* Spazi. Una scala sola, e la sezione è l'unico valore elastico. */ --sp: clamp(78px,9vw,150px); /* fra una sezione e l'altra */ --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 20px; --sp-5: 30px; --sp-6: 44px; --sp-7: 64px; --largh: 1180px; /* larghezza massima del contenuto */ --largh-testo: 820px; /* larghezza di una colonna di lettura */ /* Raggi. Spigoli quasi netti: niente pillole, mai. */ --r-1: 2px; /* dettagli: filetti, contorni di fuoco */ --r-2: 4px; /* bottoni e campi */ --r-3: 12px; /* schede */ --r-4: 18px; /* blocchi grandi */ --r-tondo: 50%; /* Ombre. Servono a staccare, non a decorare: sempre verso il basso, sempre nel colore dell'inchiostro, mai nere pure sulla carta. */ --ombra-1: 0 9px 22px rgba(18,26,46,.09); --ombra-2: 0 12px 28px rgba(18,26,46,.18); --ombra-3: 0 2px 6px rgba(18,26,46,.08),0 22px 50px -14px rgba(18,26,46,.32); --ombra-su-scuro: 0 12px 30px rgba(0,0,0,.32); /* Segnaposto delle immagini, finché non ci sono fotografie vere: una sfumatura calda, mai un rettangolo grigio con scritto "immagine". */ --grad-foto: linear-gradient(145deg,#E8C9A4,#C98F5E 55%,#8C5330); /* Tempi. Tre, e si scelgono per quanto è lungo il tragitto. */ --d-svelta: .14s; /* la pressione: deve sembrare istantanea */ --d-normale: .26s; /* passaggio del mouse, cambi di stato */ --d-lenta: .62s; /* il testo che ruota dentro il bottone */ /* ---------- Nomi vecchi, tenuti perché il sito li usa ---------- Non usarli in cose nuove: valgono solo a non rompere le pagine scritte prima che questo file esistesse. */ --osso:var(--carta); --osso2:var(--carta-2); --osso3:var(--carta-3); --inch:var(--inchiostro); --corpo:var(--testo); --muto:var(--testo-muto); --acc:var(--accento); --accs:var(--accento-premuto); --accchiaro:var(--accento-chiaro); --suinch:var(--su-scuro); --bordo2:var(--bordo-forte); --bordoscuro:var(--bordo-su-scuro); } /* Sui fondi scuri l'accento scuro sparirebbe: qui vale la variante chiara, ridefinita una volta sola invece che elemento per elemento. */ .sipario,.fondo,footer,.su-scuro{ --accento:var(--accento-chiaro); --acc:var(--accento-chiaro); --testo-muto:var(--su-scuro-muto); } /* Chi ha chiesto più contrasto al sistema operativo lo ottiene: i bordi si vedono, i grigi si scuriscono, le velature spariscono. */ @media(prefers-contrast:more){ :root{ --bordo:rgba(18,26,46,.34); --testo-muto:#1B2132; --testo:#151A28; --muto:#1B2132; --corpo:#151A28; } }