/* ════════════════════════════════════════════════════════════════════ LDS SUISSE — I TOKEN. Un file solo, incluso per primo da ogni pagina. PERCHE' ESISTE Il 29 agosto 2026 la misura sui quattro fogli vivi ha dato: 45 valori di spaziatura distinti 19 dimensioni di testo, senza un rapporto fra loro 16 z-index arbitrari, fino a 9999 8 ombre con direzioni e durezze diverse 6 raggi Nessuno l'aveva deciso: erano correzioni accumulate, ognuna sensata da sola. E' il rumore che tutti percepiscono e nessuno sa nominare. COSA NON CAMBIA La direzione visiva. I colori sono quelli misurati, i caratteri sono quelli, la crema e' #F3EFE8 presa da Aman. Non si ridisegna niente: si scrive il sistema che c'era gia' sotto e non era mai stato messo per iscritto. LA SCALA CHE IL SITO USAVA GIA' Le tre dimensioni piu' frequenti — 12,5 · 15 · 26 px — stanno su un rapporto di 1,2. Non e' stato scelto adesso: e' stato riconosciuto. DUE LIVELLI (04_UI_VISUAL_SYSTEM §10) I primitivi portano il VALORE, i semantici portano il RUOLO. I componenti usano solo i semantici, cosi' un cambio di palette si fa in un punto. ════════════════════════════════════════════════════════════════════ */ /* L'ordine della cascata, dichiarato una volta. Con @layer un componente non puo' piu' essere sovrascritto per caso da una regola di base scritta dopo, e i 24 !important dei fogli vivi diventano inutili invece che necessari. */ @layer token, reset, base, layout, componenti, utility, stati; :root { /* ── PRIMITIVI ──────────────────────────────────────────────────── Valori grezzi, senza significato. Nessun componente li usa. */ /* Crema. #F3EFE8 e' il fondo di Aman, campionato il 17.08.2026: i migliori del settore sono tutti su fondo chiaro e caldo. Il nero da' "sportivo", non "lusso". */ --c-crema-50: #FCFBF8; --c-crema-100: #F3EFE8; --c-crema-200: #EAE5DC; --c-crema-300: #E1DBD0; /* Inchiostro. --c-inch-500 e' il valore corretto: era #918C84, cioe' 2,91:1 sulla crema — sotto il minimo di legge. Portava i chilometri, i minuti e i posti, le sole cifre che qualcuno veniva a cercare. Adesso 5,22:1, misurato. */ --c-inch-900: #1A1A18; --c-inch-700: #5E5B55; --c-inch-500: #67635B; /* Ottone. E' l'unico accento del sito, e si usa poco: due o tre volte per pagina. Se comparisse ovunque non sarebbe un accento. */ --c-ottone-600: #8A6A22; --c-ottone-400: #C9A84C; --c-evidenz: rgba(233, 203, 74, .55); /* Semantici di stato, tenuti SEPARATI dall'accento: se il colore che dice "bene" e' lo stesso che dice "guarda qui", nessuno dei due dice piu' niente. */ --c-ok-600: #2A6349; --c-att-600: #8A6A22; --c-err-600: #9E2B2B; /* ── TIPOGRAFIA ─────────────────────────────────────────────────── Due famiglie con ruoli distinti. Il display porta la personalita', il testo porta il carico: il primo puo' essere insolito, il secondo deve essere noioso e ottimo. */ --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --f-testo: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* La scala. Base 15px — misurata, non scelta: e' quella che dava 66 caratteri per riga a 1440px, dentro la finestra 55-75. Rapporto 1,2, riconosciuto dalle tre dimensioni piu' usate del sito. Sotto la base ci sono due gradini per etichette e didascalie. */ --t--2: 10.4px; /* etichette in maiuscoletto */ --t--1: 12.5px; /* didascalie, note, piede */ --t-0: 15px; /* CORPO */ --t-1: 18px; --t-2: 21.6px; --t-3: 25.9px; --t-4: 31.1px; /* I titoli sono fluidi: la stessa dimensione su un telefono e su un monitor non ha senso. Il termine centrale mescola sempre vw E rem — solo vw impedirebbe all'utente di ingrandire il testo, ed e' un difetto di accessibilita'. */ --t-h3: clamp(1.15rem, .9rem + 1.1vw, 1.62rem); --t-h2: clamp(1.55rem, 1.1rem + 2.2vw, 2.75rem); --t-h1: clamp(2.1rem, 1.3rem + 3.6vw, 4.2rem); /* L'interlinea scende man mano che il carattere cresce. Un titolo grande con l'interlinea di un paragrafo sembra sparso. */ --lh-corpo: 1.75; /* misurata sul sito: 26.25 / 15 */ --lh-somm: 1.45; --lh-titolo: 1.15; --lh-grande: 1.05; /* Il maiuscoletto senza spaziatura e' illeggibile. */ --ls-etich: .28em; --ls-largo: .12em; --ls-h1: -.015em; /* ── SPAZIATURA ─────────────────────────────────────────────────── Otto passi al posto di quarantacinque valori. Ogni valore fuori scala deve avere una ragione; se ne servono molti, la scala e' sbagliata. */ --s-1: .25rem; /* 4px */ --s-2: .5rem; /* 8px */ --s-3: .75rem; /* 12px */ --s-4: 1rem; /* 16px — il valore piu' usato del sito */ --s-5: 1.5rem; /* 24px */ --s-6: 2rem; /* 32px */ --s-7: 3rem; /* 48px */ --s-8: 4.5rem; /* 72px */ /* Lo spazio fra le sezioni cresce con lo schermo, ma non linearmente: su un telefono lo spazio generoso diventa scorrimento a vuoto. */ --s-sez: clamp(3rem, 8vw, 8rem); /* ── CONTENITORI ────────────────────────────────────────────────── Tre, non uno. Il testo lungo non deve mai occupare il contenitore largo: a piena larghezza una riga arriva a 120 caratteri e l'occhio la perde al ritorno a capo. */ --w-testo: 38rem; /* 55-75 caratteri a 15px */ --w-cont: min(1180px, 86vw); /* la fotografia non tocca i bordi */ --w-ampio: min(1400px, 94vw); --gut: clamp(1.5rem, 4vw, 4rem); /* pagine pubbliche */ /* Il pannello e' denso di proposito: chi ci lavora vuole vedere piu' righe, non piu' aria. Due ruoli diversi, due nomi diversi — invece di due definizioni dello stesso nome, che sembrano un errore a chi legge fra sei mesi. */ --gut-denso: clamp(1rem, 2.4vw, 2rem); /* ── RAGGI ──────────────────────────────────────────────────────── Due valori. Su un sito dove nient'altro e' arrotondato, otto pixel sarebbero un corpo estraneo: bastano due per dire "cartellino" senza dire "un altro sito". */ --r-1: 2px; --r-2: 4px; --r-tondo: 50%; /* ── OMBRE ──────────────────────────────────────────────────────── Tre livelli usati come GERARCHIA, non come effetto: dicono quanto e' alto un elemento. Larghe e leggere, tinte con il colore del fondo invece che nere, e con una direzione sola in tutto il sito. */ --o-1: 0 1px 2px rgba(26,26,24,.06), 0 2px 6px rgba(26,26,24,.05); --o-2: 0 10px 30px rgba(26,26,24,.17), 0 2px 6px rgba(26,26,24,.09); --o-3: 0 18px 44px rgba(26,26,24,.13); /* ── LIVELLI ────────────────────────────────────────────────────── Nominati. Un z-index: 9999 in un file e' la prova che il sistema dei livelli non esiste — e nei fogli vivi ce n'erano tre. */ --z-fondo: -1; --z-base: 0; --z-sopra: 1; --z-sticky: 100; --z-nav: 200; --z-cassetto: 300; --z-modale: 400; --z-toast: 500; --z-salta: 600; /* sopra tutto: e' il primo elemento che si tocca */ /* ── MOVIMENTO ──────────────────────────────────────────────────── Un solo insieme di curve. Curve diverse in punti diversi si notano senza sapere perche'. */ --e-entra: cubic-bezier(.22, 1, .36, 1); /* arriva veloce, si posa */ --e-esce: cubic-bezier(.4, 0, 1, 1); /* accelera via */ --d-stato: 150ms; --d-piccolo: 220ms; --d-grande: 320ms; /* ── SEMANTICI ──────────────────────────────────────────────────── I componenti usano SOLO questi. Sono i ruoli, non i valori. */ --carta: var(--c-crema-100); --superficie: var(--c-crema-50); --superf-2: var(--c-crema-200); --superf-3: var(--c-crema-300); --ink: var(--c-inch-900); --ink-2: var(--c-inch-700); --ink-3: var(--c-inch-500); --linea: rgba(26, 26, 24, .13); --linea-forte:rgba(26, 26, 24, .26); --accento: var(--c-ottone-600); --accento-ch: var(--c-ottone-400); --fuoco: var(--c-inch-900); /* Il sito e' deliberatamente chiaro: va detto, o in modalita' scura forzata il browser dipinge di scuro i controlli nativi. */ color-scheme: light; } /* ── I NOMI DI PRIMA ─────────────────────────────────────────────── I quattro fogli vivi usano --cream, --ink, --hair, --disp, --sans, --e. Restano validi, e puntano ai token nuovi: cosi' la migrazione si fa un foglio alla volta invece che in un colpo solo, e non c'e' un momento in cui il sito e' rotto. Da togliere quando l'ultimo foglio sara' migrato. */ :root { --cream: var(--carta); --cream-2: var(--superf-2); --cream-3: var(--superf-3); --white: var(--superficie); --hair: var(--linea); --dark: var(--ink); --disp: var(--f-display); --sans: var(--f-testo); --e: var(--e-entra); --evi: var(--c-evidenz); --frame-w: var(--w-cont); } /* ── FUOCO ───────────────────────────────────────────────────────── Disegnato una volta per tutto il sito. :focus-visible mostra l'anello a chi naviga da tastiera e non a chi clicca, che e' esattamente il comportamento voluto. Contrasto misurato: 15,2:1. */ @layer base { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; border-radius: var(--r-1); } :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; } } /* ── MOVIMENTO RIDOTTO ───────────────────────────────────────────── Non e' opzionale: per chi ha disturbi vestibolari un'animazione ampia puo' causare nausea reale. Il risultato deve essere la versione STATICA COMPLETA della pagina — non elementi rimasti invisibili in uno stato di partenza. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ════════════════════════════════════════════════════════════════════ PREMIUM POLISH PASS — 16_QA_CHECKLIST, seconda metà. I dettagli che nessuno chiede e tutti percepiscono. Nessuno di questi si nota quando c'è; tutti si notano quando manca. ════════════════════════════════════════════════════════════════════ */ @layer stati { /* ── LA RISPOSTA AL TOCCO ───────────────────────────────────────── Misurato il 29.08.2026: 69 selettori con :hover, UNO con :active. Su un telefono :hover non esiste — quindi toccare qualsiasi cosa su questo sito non produceva nessuna risposta. 01 §6: «Nessuna azione deve produrre silenzio.» Sta nel livello `stati`, l'ultimo: così nessuna regola di componente può cancellarlo per caso, e non serve un !important. Due comportamenti diversi, perché due cose diverse: un pulsante si preme, un link nel testo no. */ :where(button, [role="button"], input[type="submit"], input[type="button"], .btn, .book, .solid, .addstop, .ab, .bico):active { transform: scale(.985); transition-duration: 80ms; /* uscire più in fretta che entrare */ } /* I link si scuriscono invece di comprimersi: un testo che si rimpicciolisce sotto il dito fa saltare la riga che si sta leggendo. */ :where(a:not(.btn):not(.book):not(.solid)):active { color: var(--ink); opacity: .72; transition-duration: 80ms; } /* Il cursore dice cosa succede prima che succeda. */ :where(button, [role="button"], summary, label[for]) { cursor: pointer; } :where(button, input, select, textarea):disabled { cursor: not-allowed; } } @layer base { /* ── TIPOGRAFIA FINE ────────────────────────────────────────────── `balance` c'era già sui titoli (6 regole). `pretty` mancava del tutto: è quello che toglie la vedova — l'ultima parola sola su una riga in fondo al paragrafo. */ :where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; } /* Su un telefono un indirizzo email o un URL lungo esce dal contenitore e fa scorrere la pagina di lato. `anywhere` spezza solo quando non c'è alternativa. */ :where(p, li, dd, td, address, figcaption) { overflow-wrap: anywhere; } /* Le immagini non superano mai il loro contenitore. È la difesa di base contro l'overflow orizzontale (07 §9). */ :where(img, video, svg, table, iframe) { max-width: 100%; } }