/* ============================================================================= OSTERIA DI SAN PIERO — Design token ----------------------------------------------------------------------------- Concept: "la discesa nella cantina". Il sito non si scorre: si scende. Per questo la palette non è una tavolozza piatta ma un percorso verticale — dalla luce della piazzetta al buio caldo sotto le volte. Ogni colore è preso dalle fotografie del locale, nessuno è stato inventato: i mattoni della volta, il cotto del pavimento, la pietra dei muri a sacco illuminata di taglio, la luce 2700 K delle lampade smaltate, e il rosso — che nell'osteria torna tre volte: il giglio incorniciato sulla pietra, il bordo dei piatti, il quadrettato dei tovaglioli. ========================================================================== */ :root { /* --- I materiali della cantina ------------------------------------------ */ --pece: #0B0806; /* il buio in fondo alla scala */ --fondo: #140E0A; /* fondo principale */ --fondo-2: #1E1510; /* superfici appena sollevate */ --fondo-3: #2A1E16; /* bordi, righe, superfici di terzo livello */ --mattone: #9C4E2B; /* i mattoni della volta */ --cotto: #C0714A; /* il pavimento a spina di pesce */ --pietra: #C7B49A; /* il muro a sacco preso dalla luce radente */ --calce: #EFE6D8; /* l'intonaco bianco dell'arco sopra il bancone */ --lampada: #F3C57F; /* la luce delle sospensioni smaltate, 2700 K */ --giglio: #C1272D; /* il giglio fiorentino. Raro: solo dove si agisce */ --giglio-vivo:#D93B37; /* il giglio quando lo tocchi */ --vino: #5A1B25; /* --- Testo --------------------------------------------------------------- */ --testo: #E9DFCE; --testo-2: #AC9B84; /* Schiarito rispetto al progetto iniziale (#7B6C59): a quel valore le etichette, le didascalie e i prezzi piccoli stavano a 3,8:1, sotto il minimo di 4,5:1 richiesto per il testo normale. Ora 4,9:1 sul fondo. */ --testo-3: #8F7F69; /* --- La carta (la sezione del menù, l'unica in controluce) --------------- */ --carta: #EFE7DA; --carta-2: #E4D9C6; --carta-riga: #CBBCA3; --inchiostro: #1B120D; --inchiostro-2: #6A5947; /* --- Ruoli --------------------------------------------------------------- */ --sfondo: var(--fondo); --superficie: var(--fondo-2); /* Due bordi, due mestieri diversi. --bordo separa e basta: può stare appena percepibile. --bordo-azione disegna il contorno di qualcosa che si preme, e per essere riconoscibile deve stare almeno a 3:1 sul fondo (WCAG 1.4.11): al 34% di pietra stava a 2,1 e il pulsante "fantasma" rischiava di non leggersi come pulsante. Al 54% sta a 3,5:1. */ --bordo: color-mix(in oklab, var(--pietra) 16%, transparent); --bordo-vivo: color-mix(in oklab, var(--pietra) 34%, transparent); --bordo-azione: color-mix(in oklab, var(--pietra) 54%, transparent); --azione: var(--giglio); /* L'anello della messa a fuoco cambia colore con la scena: giallo lampada sul buio, inchiostro sulla carta. Con un colore solo, nella sezione del menù sarebbe stato invisibile (1,3:1 contro il fondo chiaro). */ --focus: var(--lampada); /* --- Spazio -------------------------------------------------------------- */ /* Scala unica. Nessuna distanza "a occhio": tutto nasce da qui. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px; --s-11:160px; --s-12:192px; /* Respiro verticale delle scene: cala scendendo, come il soffitto. */ --scena: clamp(var(--s-9), 6rem + 6vw, var(--s-12)); --scena-s: clamp(var(--s-8), 4rem + 4vw, var(--s-10)); --misura: 68ch; /* riga di lettura: mai oltre ~70 caratteri */ --colonna: 1240px; /* larghezza utile massima */ --bordo-pagina: clamp(var(--s-5), 5vw, var(--s-8)); /* --- Curvature ----------------------------------------------------------- */ /* Personalità elegante → raggi minimi. L'unica curva vera è l'arco. */ --r-1: 2px; --r-2: 4px; --r-tonda: 999px; --arco: 50% 50% var(--r-1) var(--r-1) / 38% 38% var(--r-1) var(--r-1); /* --- Ombre --------------------------------------------------------------- */ /* Mai nere, mai dure: sono generate dalla luce calda delle sospensioni. */ --ombra-1: 0 2px 10px rgba(11, 8, 6, .55); --ombra-2: 0 20px 60px -24px rgba(11, 8, 6, .95); --ombra-3: 0 40px 110px -40px rgba(11, 8, 6, 1); --alone: 0 0 120px rgba(243, 197, 127, .13); /* --- Tipografia ---------------------------------------------------------- */ /* EB Garamond è il carattere del Cinquecento toscano: sta sotto una volta medicea senza sembrare un travestimento. Work Sans porta la mano di oggi — orari, prezzi, pulsanti: tutto ciò che deve solo essere chiaro. */ --serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif; --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Il coefficiente in vw è stato abbassato da 7,4 a 5,2: cresceva troppo in fretta e sugli schermi larghi ma bassi tre righe di titolo spingevano gli orari fuori dalla prima schermata. */ --f-hero: clamp(2.5rem, 1.5rem + 5.2vw, 6rem); --f-display: clamp(2.1rem, 1.15rem + 4.1vw, 4.1rem); --f-h2: clamp(1.8rem, 1.15rem + 2.7vw, 3.1rem); --f-h3: clamp(1.2rem, 1.06rem + .66vw, 1.55rem); --f-guida: clamp(1.08rem, 1rem + .5vw, 1.34rem); --f-corpo: 1.0625rem; --f-piccolo: .9375rem; --f-minimo: .8125rem; --f-etichetta: .75rem; --tr-etichetta: .2em; /* le targhe di pietra hanno le lettere larghe */ --tr-titolo: -.015em; /* --- Movimento ----------------------------------------------------------- */ /* Mai lineare: gli oggetti hanno peso. Le durate sono tre, non infinite. */ --t-1: 180ms; /* conferma: hover, focus */ --t-2: 420ms; /* transizione: apertura, cambio stato */ --t-3: 850ms; /* racconto: ingresso delle scene */ --curva: cubic-bezier(.22, .61, .36, 1); --curva-in: cubic-bezier(.55, 0, .25, 1); --respiro: cubic-bezier(.4, 0, .6, 1); }