/* ==========================================================================
CartoNoir — Design System editoriale luxury
Direzione: noir e blu notte di fondo, avorio che respira, oro firma e
verde accento (45·25·20·7·3). Tipografia Cormorant Garamond + Archivo, angoli vivi.
Fotografia protagonista, con slot e segnaposti eleganti pronti a ricevere
le immagini reali (CSP: img-src 'self' data:; nessuna immagine remota).
Uso: e .
Componenti prefissati "ed-". Script complementare: /brand.js.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Archivo:wght@400;500;600;700&display=swap');
:root {
/* ---- Colori di marca (brandbook, tavola 04) ---------------------------
Proporzioni d'uso: noir 45 · blu notte 25 · avorio 20 · oro 7 · verde 3.
Il noir domina, l'avorio respira, l'oro firma. Un solo elemento oro per
schermata (folio escluso).
NB: il prefisso --cn-* è già occupato da public/app.css per la palette
adattiva della guida; la marca vive sotto --brand-*. */
--brand-noir: #0D0E10;
--brand-blu-notte: #101B29;
--brand-avorio: #F2ECDF;
--brand-oro: #C9A662;
--brand-verde: #3A4F42;
/* Derivati: né l'oro pieno né --brand-oro-deep raggiungono AA come TESTO
su avorio (oro pieno ~1.9:1, oro-deep ~2.88:1 — sotto il 4.5:1 richiesto
per il testo normale e sotto il 3:1 per il testo grande). Restano quindi
i colori giusti per filetti, stelle, bordi, pulsanti e fondi: su noir e
blu notte l'oro pieno va bene anche come testo. */
--brand-oro-deep: #A8873F;
--brand-oro-soft: #E0C68C;
/* Terzo oro, riservato al SOLO caso "oro che fa da testo su fondo chiaro"
(avorio o paper-raise): #7A6229 misura 4.95:1 su --brand-avorio e 5.45:1
su --paper-raise (calcolo con la funzione di contrasto di
scripts/browser-qa.mjs), sopra la soglia 4.5:1 del testo normale.
Non tocca filetti/bordi/icone/pulsanti/fondi, che restano oro pieno o
oro-deep — e non tocca l'oro che fa da testo su noir/blu notte, dove
l'oro pieno legge già bene. */
--brand-oro-testo: #7A6229;
--brand-avorio-2: #E6DECD;
--brand-noir-2: #16181C;
--brand-blu-2: #0A121C;
/* Velatura obbligatoria sotto il testo che sta su fotografia (tavola 17). */
--brand-velo: rgba(13, 14, 16, .55);
/* ---- Alias storici ---------------------------------------------------
I nomi usati da 3.000 righe di CSS restano vivi e puntano ai token di
marca: cambiare un valore qui sopra ricolora tutto il sito. La pulizia
dei nomi avviene lotto per lotto, non in un colpo solo. */
--paper: var(--brand-avorio);
--paper-raise: #FBF7EF;
--paper-2: var(--brand-avorio-2);
--paper-3: #D8CDB6;
--ink: var(--brand-noir);
--ink-soft: #4A4F57;
--ink-faint: #8A8F98;
--navy: var(--brand-blu-notte);
--navy-2: var(--brand-blu-2);
--espresso: var(--brand-blu-notte);
--espresso-2: var(--brand-blu-2);
--accent: var(--brand-oro);
--accent-deep: var(--brand-oro-deep);
--accent-soft: var(--brand-oro-soft);
--brass: var(--brand-oro);
/* Linee */
--line: rgba(13, 14, 16, .14);
/* --line-strong era .26, e a .26 il filetto di OGNI comando secondario e di
OGNI campo dei moduli misurava 1,79:1 sull'avorio — 59 elementi su 6 rotte,
censiti uno per uno in docs/brand/qa/r-rifiniture-sistema.md §2. WCAG
1.4.11 chiede 3:1 al confine di un comando.
.46 è il primo valore con un margine: .45 cade esatto su 3,000:1 e
qualunque ritocco futuro a un fondo lo riporterebbe sotto. Misurato
rendendo le alfa sul sito vero, non calcolato a tavolino.
Perché proprio questa soglia e non una a piacere: lo STESSO componente su
fondo scuro stava già a 3,19:1 (`.hero-brand-testo .ed-btn-outline`, riga
~735, rgba(242,236,223,.38)). Il chiaro era rimasto indietro: è una svista
di simmetria, non una scelta.
Nessun colore nuovo — la palette lo vieta: è lo stesso --brand-noir
(#0D0E10), cambia solo la velatura.
⚠ CHI TOCCA QUESTO VALORE GUARDI ANCHE public/crea-guida.css (.cg-custom-apply:disabled):
lì il token era finito a fare da FONDO invece che da filetto, e alzarlo
insieme avrebbe portato quel pulsante da 1,54:1 a 1,09:1. Decisione del
committente del 30/07/2026. */
--line-strong: rgba(13, 14, 16, .46);
--line-light: rgba(242, 236, 223, .18);
/* --line-light-strong era .34, ed è ESATTAMENTE la stessa svista di simmetria
che il 30/07 ha portato --line-strong da .26 a .46, guardata dall'altro
lato. Su fondo scuro .34 misura 2,815:1 (button.ed-pill della prima
schermata, censimento del 03/08), sotto il 3:1 di WCAG 1.4.11 — mentre lo
STESSO componente, il pulsante secondario dell'hero, dichiara a mano
rgba(242,236,223,.38) e sta a 3,188:1 (riga ~735). Il token era rimasto
indietro rispetto al valore scritto per esteso a due schermate di distanza.
.38 non è quindi un valore scelto a piacere: è quello che il sito già usa,
reso e misurato il 03/08 su ogni superficie scura in cui il token arriva —
.ed-pill 3,195:1, i campi e i pulsanti del Memory Book 3,16-3,22:1, le
frecce del visore di /anteprima 3,195:1. Nessun colore nuovo: è lo stesso
avorio di marca (#F2ECDF), cambia solo la velatura.
LA TRAPPOLA DI --line-strong QUI NON C'È, e la si è cercata PRIMA di
muovere il token, non dopo: --line-light-strong compare in tre punti
(.ed-btn-ghost qui sotto, .ed-dark .ed-pill, .prezzi span di home.html) e
in tutti e tre fa da BORDO, mai da fondo. Nessuna riga compagna serve —
e questa frase esiste perché la prossima persona non debba rifare la
ricerca per scoprire che non serviva.
Il fratello chiaro --line (.14) invece NON si può alzare, e la ragione sta
scritta in public/crea-guida.css accanto alle pastiglie del configuratore.
Sorvegliato da test/r-filetto-comandi.test.js, regole C e D. */
--line-light-strong: rgba(242, 236, 223, .38);
/* Stati */
--error: #A3402E;
--error-bg: #F6E5DF;
/* --ok era #4D7C52: 4,16-4,17:1 su --ok-bg e su --paper, sotto il 4,5:1
richiesto (misurato da .ed-note-ok e .avviso-ok, audit lotto 2 task 6).
Scurito a parità di tinta a 4,88-4,93:1 su entrambi gli sfondi chiari in
cui il token compare oggi: la correzione vive qui, non nei due usi. */
--ok: #437049;
--ok-bg: #E7F0E5;
/* Tipografia — vedi Task 3 per il caricamento dei font */
--serif: 'Cormorant Garamond', 'Iowan Old Style', Garamond, Georgia, serif;
--sans: 'Archivo', 'Segoe UI', -apple-system, system-ui, sans-serif;
--mono: 'Consolas', ui-monospace, monospace;
/* Spazio */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
--section: clamp(72px, 10vw, 144px);
/* Angoli vivi ovunque: le uniche eccezioni del brandbook sono l'icona
dell'app e il tag bagaglio. */
--r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0;
--r-app-icon: 22%;
--r-tag: 12px;
/* Ombre: mai sul marchio, discrete altrove. */
--shadow-sm: 0 2px 12px rgba(13, 14, 16, .10);
--shadow-md: 0 18px 44px rgba(13, 14, 16, .16);
--shadow-lg: 0 40px 90px rgba(10, 18, 28, .34);
/* Contenitore */
--maxw: 1240px;
--maxw-text: 68ch;
/* Motion */
--ease: cubic-bezier(.16, 1, .3, 1);
--ease-soft: cubic-bezier(.32, .72, 0, 1);
--dur-1: .2s; --dur-2: .4s; --dur-3: .8s;
/* Z */
--z-header: 50; --z-overlay: 80; --z-skip: 100;
/* Altezza dell'header fisso — unica fonte di verità. .ed-header-inner usa
questo token per la propria min-height (invece di un padding verticale
fisso) e body.ed-shell-solid lo riusa identico per l'offset del
contenuto: un solo numero, non due che devono restare uguali per
coincidenza. 97px = 1px di bordo + 96px di inner (60px del lockup
.ed-brand, centrato verticalmente in min-height 96px). */
--header-h: 97px;
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ed {
margin: 0;
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Peso 500: è il Display della tavola 04 («DISPLAY — CORMORANT 500 · 44/48»).
Fino al 29/07 questa riga diceva 400 e, con specificità (0,1,2), schiacciava a
400 anche le pagine che dichiaravano 500 sul proprio h1 (ordine, regalo,
feedback, legali, agenzie): il peso prescritto non arrivava mai a video.
Il CORPO non cambia: resta 17/28,05 (body.ed sopra), per decisione presa. */
body.ed h1, body.ed h2, body.ed h3, body.ed h4 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.02;
letter-spacing: -.005em;
margin: 0;
text-wrap: balance;
}
body.ed p { margin: 0; }
/* ---- Il colore dei link: un DEFAULT, non una regola che vince su tutti ------
A che serve. Il foglio del browser colora ogni di blu (rgb(0,0,238)). Su
un sito dove il colore lo decide il contesto — header noir, footer noir,
sezioni .ed-dark — quel blu va sostituito da "prendi il colore di chi ti
contiene". Questo è tutto ciò che serve.
Perché :where(). La versione precedente scriveva
body.ed a:not(.ed-btn) { color: inherit }
che ha specificità (0,2,2) e quindi batteva OGNI regola scritta sul singolo
link. Le vittime documentate sono TREDICI. Il numero è stato contato una
voce per volta il 29/07 perché ne circolavano due sbagliati: «undici» qui
(l'elenco ne nominava dieci) e «otto» nel rapporto C1 e nell'indice
dell'audit — dove otto non era un totale, era l'ORDINE d'arrivo di
`.ed-textlink`, l'ottava. Eccole, con la fonte:
1 la navigazione | documento di apertura §3.1
2 il bottone dell'hero | (sette difetti già pagati)
3 l'hover della navigazione |
4 l'hover del footer |
5 lo skip-link |
6 l'anello di focus |
7 i pulsanti-link |
8 `.ed-textlink`, che la tavola 23 vuole oro | audit v1 §5 (l'ottava)
9 i link nel corpo di /privacy-policy, /terms,
/agency-pilot: stessa tinta del testo, nessuna
sottolineatura — WCAG 1.4.1 non soddisfatto | audit v4 §4
10 quattro link di /crea-guida, fra cui quello
all'informativa privacy | audit v2 §20
11 la voce di fase attiva di /crea-guida
(`.cg-steps-list a.is-active`, mai navy) | audit v2 §21
12 `.dcard`, le nove mete della home: noir su
fotografia scura | revisione lotto 3
13 `` senza variante: rendeva
in BLU browser rgb(0,0,238) — prodotto dal
`:not(.ed-btn)` della stessa regola | controprova C1 §A
Tredici, per una regola che doveva solo scavalcare il foglio del browser.
:where() azzera la specificità di tutto ciò che contiene: questa regola vale
(0,0,0). Basta e avanza per battere il foglio del browser (che è di origine
inferiore, quindi perde a prescindere dalla specificità), e perde contro
qualunque regola d'autore — comprese quelle di una sola classe, che è dove il
colore dei link è giusto che viva. Il perimetro resta identico a prima
(`body.ed a`), perché anche `body.ed` sta dentro il :where().
Perché non c'è più :not(.ed-btn). Serviva quando questa regola vinceva su
tutto: senza, i CTA-link ereditavano l'ink e sparivano sul fondo del bottone.
A specificità zero il problema non può ripresentarsi — .ed-btn-primary,
.ed-btn-ink, .ed-btn-outline e .ed-btn-ghost dichiarano il colore con una
classe (0,1,0) e vincono. Toglierlo ha anzi chiuso un difetto vivo: sulla home
`` senza variante rendeva in BLU browser, rgb(0,0,238)
misurato ("Scegli i tuoi capitoli").
AGGIORNAMENTO 29/07 (cantiere Z): quel pulsante era l'UNICO `.ed-btn` senza
variante di tutto il sito, e la variante l'ha presa — `ed-btn-ink`, perché
senza fondo restava a 1,00:1 dal testo vicino (WCAG 1.4.1). Chi cercasse qui
il caso di prova non lo trova più nelle pagine; la ragione per cui questa
regola sta a specificità zero resta però esattamente questa. */
:where(body.ed a) { color: inherit; }
body.ed img { display: block; max-width: 100%; }
/* I controlli di modulo NON ereditano font-family dal contenitore: il foglio del
browser gliene impone una propria, e il calcolato esce "Arial". Misurati 53
elementi su /crea-guida, .ed-nav-toggle su ogni pagina a 390, 14 su /anteprima
e 6 su /memory-book. Oggi nessun glifo Arial è visibile perché quei nodi non
contengono testo diretto — basta aggiungerne uno perché lo diventi, ed è il
modo tipico in cui una terza famiglia entra in un sito a due famiglie.
Solo `font-family`: `font: inherit` porterebbe con sé anche corpo e
interlinea e rifarebbe la misura dei campi.
:where() la tiene a specificità zero: è il default di sistema, e qualunque
regola di pagina può ancora scavalcarla di proposito (per esempio un campo
che vuole il monospazio). */
:where(button, input, select, textarea) { font-family: inherit; }
/* Anello di focus di sistema (Task 3 Step 2, corretto alla fonte in sede di
revisione lotto 2): di default è oro-testo, l'unico oro che raggiunge 3:1
(soglia richiesta per gli anelli di focus) sui fondi CHIARI dove il body
nasce — avorio e paper-raise. L'oro pieno (--accent) usato prima misurava
1,96:1 lì: sotto soglia su ogni pagina che non lo sovrascrive esplicitamente.
Le regole sotto coprono gli UNICI due casi in cui oro-testo smette di
leggersi: i fondi scuri di marca (dove torna l'oro pieno, già verificato
leggibile su noir/blu notte — stessa nota della riga ~30) e i fondi già
oro pieno (CTA primario, skip-link), dove l'anello deve essere noir per
non sparire su se stesso.
Geometria: 2px, offset 2px, angolo vivo (decisione del committente, 29/07).
Non 1px come la riga in calce alla tavola 23: a 1px l'anello sparisce sui
fondi chiari, ed è stato scartato dopo averlo guardato. */
body.ed :focus-visible { outline: 2px solid var(--brand-oro-testo); outline-offset: 2px; border-radius: 0; }
body.ed .ed-header :focus-visible,
body.ed .ed-footer :focus-visible,
body.ed .ed-dark :focus-visible,
body.ed .on-dark:focus-visible,
body.ed .hero-brand :focus-visible,
body.ed .ed-card-dark :focus-visible,
body.ed[data-shell-theme="dark"] :focus-visible {
outline-color: var(--accent);
}
/* Superfici chiare annidate in una pagina/sezione scura (stessa famiglia di
.ed-surface-light usata più sotto per i titoli): l'anello torna oro-testo
perché il fondo lì sotto è di nuovo chiaro. */
body.ed[data-shell-theme="dark"] .ed-surface-light :focus-visible,
body.ed .ed-dark .ed-surface-light :focus-visible {
outline-color: var(--brand-oro-testo);
}
/* Fondi già oro pieno: l'anello deve essere noir, altrimenti oro-su-oro è
invisibile (misurato 1,00:1). Dichiarata per ultima apposta: a specificità
pari con le regole "fondo scuro" qui sopra (un CTA primario può stare
dentro l'header), l'ordine nel foglio decide ed è questa a dover vincere.
L'anello va DENTRO. Con l'offset positivo del default, il filetto noir del
CTA d'intestazione cadeva fuori dal bottone, cioè sul noir dell'header:
noir su noir, 1,00:1, nessun segno di fuoco visibile su tutte le pagine
(audit v3 §1, misurato). Con offset negativo il filetto resta sul fondo oro
del bottone, dove il noir legge (8,38:1 misurato). -3px e non -2px perché
.ed-btn ha 1,5px di bordo: l'anello deve stare dentro il bordo, non sopra. */
body.ed .ed-btn-primary:focus-visible,
body.ed .ed-skip:focus-visible {
outline-color: var(--brand-noir);
outline-offset: -3px;
}
/* ==========================================================================
Layout
========================================================================== */
.ed-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }
.ed-section { padding-block: var(--section); position: relative; }
.ed-section--tight { padding-block: clamp(48px, 6vw, 88px); }
.ed-dark { background: var(--espresso); color: var(--paper); }
.ed-dark h1, .ed-dark h2, .ed-dark h3, .ed-dark h4 { color: var(--paper); }
/* Occhiello di sezione. STESSA TRACCIATURA DI .ed-label: la tavola 04 definisce
UNA riga sola per questo ruolo — «UI label · Archivo 600 · 12 · tracking 220
(0,22em) · maiuscolo». Fino al 29/07 qui c'era .28em, cioè 3,3152px su
11,84px, contro i 2,64px su 12px di .ed-label: due componenti con la stessa
funzione e due tracciature diverse, su tutte le pagine e tutte le larghezze
(audit v1 §17). Unificata a .22em. Il corpo resta .74rem: è un occhiello di
sezione, non l'etichetta di un campo, e cambiarlo sarebbe una decisione di
scala, non la chiusura di questo scostamento. */
.ed-eyebrow {
display: inline-block; font-family: var(--sans);
font-size: .74rem; font-weight: 600; letter-spacing: .22em;
text-transform: uppercase; color: var(--brand-oro-testo);
}
.ed-dark .ed-eyebrow, .ed-eyebrow.on-dark { color: var(--accent-soft); }
/* 500 come i titoli: è lo stesso Display della tavola 04, usato anche fuori dai
tag h1-h4 (occhielli display, numeri, aperture di sezione). */
.ed-display { font-family: var(--serif); font-weight: 500; line-height: .98; letter-spacing: -.03em; }
.ed-h1 { font-size: clamp(2.8rem, 6.5vw, 5.6rem); line-height: .98; }
.ed-h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.ed-h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
/* Di norma il titolo sta su avorio, quindi l'enfasi in corsivo usa l'oro-testo
(oro pieno qui sotto AA anche per il testo grande, 1.9:1). Dentro .ed-dark
(o .on-dark) il titolo sta su noir/blu notte, dove l'oro pieno legge bene:
qui torna l'oro di marca, non l'oro-testo pensato per fondi chiari. */
.ed-display em, .ed-h1 em, .ed-h2 em, .ed-h3 em { font-style: italic; color: var(--brand-oro-testo); }
.ed-dark .ed-display em, .ed-dark .ed-h1 em, .ed-dark .ed-h2 em, .ed-dark .ed-h3 em,
.ed-display.on-dark em, .ed-h1.on-dark em, .ed-h2.on-dark em, .ed-h3.on-dark em { color: var(--accent); }
.ed-lead { max-width: 56ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.7; }
.ed-dark .ed-lead { color: rgba(242, 236, 223, .82); }
.ed-muted { color: var(--ink-soft); }
/* ==========================================================================
Skip link
========================================================================== */
/* Noir, non avorio: lo skip-link appare su fondo oro (--accent), e oro con
testo chiaro non raggiunge AA (stessa ragione di .ed-btn-primary sotto).
Il colore torna qui dentro, con una sola classe: serviva un aggancio
`html body.ed a.ed-skip` (0,1,3) finché il default dei link valeva (0,2,2).
Ora quel default è a specificità zero e una classe basta. */
.ed-skip {
position: absolute; left: -9999px; top: 0; z-index: var(--z-skip);
background: var(--accent); color: var(--brand-noir); padding: 12px 18px;
font-family: var(--sans); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--r-xs) 0;
}
.ed-skip:focus { left: 0; top: 0; }
/* ==========================================================================
Header — noir pieno, filetto oro sottilissimo, nessuna ombra (tavola 21)
========================================================================== */
/* Colore dichiarato qui, sul contenitore, non sui singoli link (trappola §3.1
del documento di apertura: «su fondo scuro il colore si dichiara sul
contenitore»). Il testo dell'header arriva per eredità naturale da questa
riga; i link non ne dichiarano uno proprio, così non c'è una seconda fonte
di verità da tenere allineata quando l'header cambia fondo. */
.ed-header {
position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
background: var(--brand-noir);
color: var(--brand-avorio);
transition: border-color var(--dur-2) var(--ease);
border-bottom: 1px solid rgba(201, 166, 98, .22);
}
/* LA NAVIGAZIONE SFORA A DESTRA, E QUANTO: dichiarato, non lasciato ambiguo.
Il marchio è a filo con la colonna dei contenuti (--maxw 1240px) a OGNI
larghezza — misurato su 11 rotte, 0px di scarto. La navigazione no: sopra i
~1200px esce dal bordo destro della colonna e arriva a +70,2px a 1440 e oltre.
È un EFFETTO COLLATERALE, non una scelta: una fascia a tutta larghezza voluta
avrebbe spostato anche il marchio, e la colonna è dichiarata proprio qui col
`max-width` che la nav sfora per traboccamento del flex.
Perché non è azzerato. Il riquadro di contenuto della colonna vale 1112px
fissi da 1280px in su (1240 − 2×64 di padding). Il lockup ne prende 206,1 e il
gap dell'header 36: alla navigazione ne restano 869,9. Le SETTE voci al
tracking pieno .22em della tavola 04 misurano 820,1px di soli glifi; sei passi
al minimo leggibile di 8px ne aggiungono 48, per 868,1 — cioè un header con le
voci attaccate. Il tracking pieno con sette voci NON entra nella colonna da
1240. Le uscite erano tre: scendere a ≈.146em (si perde la forma della tavola),
ridurre le voci a tre (scelta di prodotto, rifiutata dal committente il 29/07),
o allargare la fascia oltre la colonna (sposta il marchio su tutte le 11 rotte).
Nessuna è una rifinitura di CSS.
LA REGOLA CHE VALE, ed è sorvegliata da test/n-navigazione.test.js: la
navigazione può entrare nel margine destro, mai superarlo, e lascia sempre
almeno 20px di respiro al CTA — barra di scorrimento classica compresa.
Misurato oggi: sforo 118,2px → 70,2px, respiro minimo −5px → +23,3px. */
.ed-header-inner {
max-width: var(--maxw); margin-inline: auto;
min-height: calc(var(--header-h) - 1px); /* -1px: il bordo inferiore vive su .ed-header */
padding-inline: clamp(20px, 5vw, 64px);
display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
}
.ed-header.is-solid, .ed-header--solid {
background: var(--brand-noir);
border-bottom-color: rgba(201, 166, 98, .22);
}
/* Lockup composto: simbolo vettoriale + logotipo tipografico. Il clear space
vale metà altezza del simbolo su tutti i lati (tavola 03). Testo avorio
sempre (header e footer sono noir pieno, mai un fondo chiaro sotto).
LE MISURE VENGONO DALLA TAVOLA 21, LETTE SUI PIXEL — non scelte a occhio.
La tavola è un PNG 1500×844 in cui la scheda del sito misura 758px ed è
etichettata «DESKTOP 1440»: 1px di tavola = 1,900px CSS. Con quella scala
(campionamento in docs/brand/qa/marchio-scatti/tavola21-misure.json):
simbolo ≈30-34 · logotipo largo 186,2 con maiuscole alte 15,2
lockup intero 220,4 · altezza dell'intestazione 108,3
Il sito stava a simbolo 30, maiuscole 14, lockup 206,1. Con 22px di
logotipo e 32 di simbolo il lockup misura 221,2 contro i 220,4 della tavola
e le maiuscole 15 contro 15,2: la tavola riprodotta, non interpretata.
E QUI STA LA COSA DA NON DIMENTICARE. Il committente ha detto «il logo è
piccolo e poco visibile». La misura dice che nella tavola il marchio NON è
più grande del nostro: +2px di simbolo e +1px di maiuscole. Quello che
cambia davvero è (a) il tratto del simbolo, che a 30px valeva un terzo di
pixel — vedi TRATTO_RIDOTTO in scripts/brand/geometry.mjs — e (b) il peso
della navigazione accanto, che sul sito era 1,25× il logotipo dove la
tavola la tiene a 0,56× (vedi .ed-nav a più sotto). Ingrandire il marchio
oltre queste misure è stato provato e scartato: a 28/42px il clear space
della tavola 03 passa da 21px a 8,7 a 390, e il simbolo resta sottile
comunque (quota di segno sopra 3:1 al 47%, contro il 70% col tratto giusto).
Il gap scende da 12 a 10 perché il simbolo è cresciuto di 2: lo stacco fra
segno e logotipo resta lo stesso a video, e il lockup non sfonda i 220,4
della tavola.
L'altezza dell'intestazione NON cambia: il lockup passa da 60 a 62px di
ingombro (15+32+15) e --header-h vale 97, cioè 96 di inner — 62 ci sta
dentro con lo stesso margine di prima. Misurato, non dedotto. */
.ed-brand {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px;
text-decoration: none;
}
/* Vale anche per il simbolo del piè di pagina (.ed-footer-brand usa la stessa
classe): header e footer restano lo stesso lockup, com'è sempre stato. */
.ed-brand-simbolo { width: 32px; height: 32px; display: block; }
.ed-brand .ed-logotype { font-size: 22px; color: var(--brand-avorio); }
/* Non scoperto a .ed-brand: il lockup si ripete identico nel footer
(.ed-footer-brand), dove "NOIR" deve restare oro e non corsivo. */
.ed-logotype em { font-style: normal; color: var(--brand-oro); }
/* Il passo fra le voci cresce con la finestra, come il tracking qui sotto e con
la stessa rampa 1120→1440 (10px → 17px). Prima erano due valori a scalino
(clamp(12,1.4vw,20) sotto la soglia, clamp(14,2vw,28) sopra) che saltavano
INSIEME al tracking nello stesso pixel: due salti sommati fanno i 114px di
respiro che sparivano in un pixel. Il tetto è 17 e non 28 perché il conto lo
impone: vedi il commento sul tracking.
ERA 13→20, ED È SCESO DI 3 IL 30/07. È il prezzo del marchio alla misura
della tavola 21, ed è giusto che lo paghi la navigazione.
Il lockup è passato da 206,1 a 220,5px: +14,4px presi al budget orizzontale
della barra. Subito sopra la soglia del pannello quel budget non ha margine,
e il conto è tornato alla cifra — misurato con la barra di scorrimento
classica, cioè con innerWidth 1121 e clientWidth 1104:
marchio com'era → respiro del CTA 23,3px a 1121
marchio nuovo → respiro del CTA 8,9px a 1121 (23,3 − 14,4)
La guardia N chiede almeno 20px e diventava rossa su 26 larghezze, da 1121 a
1146. NON è stata aggirata: è stato misurato dove il difetto comincia e
finisce (docs/brand/qa/marchio-applicato/respiro-cta.json) e sono stati
provati a runtime tutti i rimedi possibili, con questo esito a 1121:
passo della nav −3px .................. 26,9px ← scelto
stacco header 3vw → 1,6vw ............. 24,5px
padding del marchio 15 → 6 ............ 26,9px
Perché questo e non gli altri. Lo stacco a 1,6vw porta la distanza fra
marchio e prima voce a 17,9px contro i 16 che la tavola 03 pretende: 1,9px di
margine sul clear space, cioè nessuno — e a 1440 toglie aria al marchio
(36 → 23) proprio nella riga che il committente ha scelto guardandola.
Il padding a 6 fa peggio: il clear space scenderebbe SOTTO il minimo.
Il passo invece non tocca né il clear space del marchio (resta 33,6-36) né il
tracking della tavola 04: stringe soltanto il respiro fra una voce e l'altra,
che è la cosa che deve stare un passo indietro. A 10,06px nel punto più
stretto resta sopra gli 8px dichiarati qui sotto come minimo leggibile.
La PENDENZA della rampa non cambia (2,2vw): è una traslazione di −3px, quindi
l'argomento di monotonia del commento sul tracking resta valido tale e quale
e la prova 3 della guardia N — «nessun burrone» — continua a leggere la
stessa derivata. Effetto collaterale: a 1440 il CTA guadagna 18px di respiro
(70,9 → 88,9). */
.ed-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, calc(2.2vw - 14.6px), 17px); }
/* LA VOCE DI MENU STA UN PASSO INDIETRO AL MARCHIO — e il numero è uno solo.
Fino al 30/07 qui non c'era `color` e la voce ereditava l'avorio pieno di
.ed-header: 16,41:1 sul noir. Sembra un pregio e invece è il difetto che il
committente ha visto a occhio («il logo è piccolo e poco visibile»).
Si misura sull'INCHIOSTRO reso, non sul corpo dichiarato: si contano i pixel
che si staccano dal fondo e si somma di quanto se ne staccano (stesso metodo
del totale del carrello, c-rifiniture-residue.md §1). A 1440, misurato:
logotipo «CARTONOIR» 20px peso 400 massa d'inchiostro 63 207
voce «DESTINAZIONI» 12px peso 600 massa d'inchiostro 79 214
Una voce di menu pesava 1,25× il logotipo intero. Sulla tavola 21 ne pesa
0,56×. La gerarchia non era debole: era ROVESCIATA, di un fattore 2,2 — con
un corpo di 12px contro 20, perché il peso 600 e il maiuscolo riempiono più
inchiostro di quanto il corpo lasci credere.
.67 di avorio rende rgb(166,163,155) = 7,68:1 sul noir (misurato a video,
non calcolato). Tre conti dicono che è il valore giusto e non uno qualsiasi:
· è DENTRO la forbice della tavola 21, dove le voci stanno fra 6,5 e 8,8:1
— la variante non è più spenta della tavola, è la tavola;
· resta 1,7 volte il 4,5:1 che le WCAG chiedono a un testo di 12px, e
nessuna violazione di contrasto nasce da qui (verificato con
`npm run test:contrasto` e `npm run test:browser`);
· porta il rapporto voce÷logotipo a 0,70×, il più vicino allo 0,56× della
tavola fra tutte le varianti provate il 30/07.
I glifi NON rimpiccioliscono: corpo, peso e tracking sono identici e l'area
d'inchiostro cala dello 0,6%, cioè il rumore dell'antialiasing. Cambia solo
la luminosità (massa −33%).
SPECIFICITÀ (0,2,1), e va tenuta lì. Sotto i 1120px questa navigazione non è
una barra: è un pannello a fondo AVORIO, dove l'avorio attenuato sarebbe
illeggibile (~1,2:1). Quel pannello si riprende il colore con
`.ed-header .ed-nav a` — anch'essa (0,2,1) ma dichiarata dopo, quindi vince.
Con `.ed-header` davanti questa riga salirebbe a (0,3,1), batterebbe il
pannello e spegnerebbe il menu di ogni telefono. Provato di proposito: la
guardia in test/r-marchio-intestazione.test.js è nata da lì.
Il tema scuro (0,4,1) e il CTA oro (escluso dal :not) restano sopra. */
.ed-nav a:not(.ed-btn-primary) { color: rgba(242, 236, 223, .67); }
/* Voci di navigazione nella forma della tavola 21: Archivo 600, 12px,
maiuscolo, tracking .22em — la stessa riga "Label UI" della tavola 04, che
il resto del sistema applica già a .ed-label e .ed-eyebrow.
Il sito ne ha SETTE dove la tavola ne mostra tre: il committente ha deciso
(29/07) di adottarne la forma senza toccare l'architettura, perché quelle
sette voci portano a pagine che esistono e servono — ridurle a tre sarebbe
una scelta di prodotto, non di veste. Misurato dopo il cambio: a 1440 le
sette voci maiuscole con tracking stanno su una riga sola e non schiacciano
il CTA. Sotto i 1120px la navigazione passa comunque al pannello mobile.
IL TRACKING CRESCE, NON SALTA — e il perché sta nei numeri.
Il tracking pieno .22em costa 114px sulle sette voci (706,3px a .1em →
820,1px a .22em, misurati). La prima correzione lo dava tutto in un pixel con
`@media (max-width: 1340px)`: a 1340 il CTA aveva 114px di respiro, a 1341 ne
aveva 3,5 — e con una barra di scorrimento classica da 17px ne aveva **−5**,
cioè usciva dall'area utile. Invisibile a ogni misura sommaria, perché
l'header ritaglia: eccedenza orizzontale 0 e `elementFromPoint` sul bordo del
CTA = null. Il difetto era doppio, perché nello stesso pixel saltava anche il
passo fra le voci (≈19px → ≈27px): due salti sommati.
Qui il tracking è una rampa lineare fra 1120px (dove comincia la barra: sotto
c'è il pannello) e 1440px, dove vale il valore pieno della tavola 04:
.1em a 1120 → .22em a 1440 (.45vw − 3,84px, agli estremi esatto)
La pendenza NON è libera. Il margine del CTA cresce di 0,5px per pixel di
finestra e la navigazione se ne mangia 79,03px per ogni px di tracking più
6px per ogni px di passo: perché il respiro non cali mai, deve valere
79,03 · (dtracking/dW) + 6 · (dpasso/dW) ≤ 0,5
che con .0045 e .021875 fa 0,4876. Il margine resta quindi monotòno crescente
a ogni larghezza: niente più soglia da cui cadere.
Effetto collaterale utile: la barra di scorrimento non è più un burrone. Le
media query di Chrome contano i 17px della barra, il layout no; su una rampa
quei 17px valgono 0,077px di tracking (≈8px di navigazione), assorbiti dal
margine. Su uno scalino valevano 114px. */
.ed-nav a { text-decoration: none; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: clamp(.1em, calc(.45vw - 3.84px), .22em); text-transform: uppercase; white-space: nowrap; transition: color var(--dur-1) var(--ease); }
/* LO STATO ATTIVO SALE, NON SCENDE. Regola, non preferenza: un elemento non
può essere più forte da fermo di quando ci passi sopra.
C'ERA UNA SECONDA RIGA QUI, ed è stata tolta il 30/07:
.ed-header.is-solid .ed-nav a:hover, .ed-header--solid .ed-nav a:hover,
.ed-header.is-solid .ed-nav a[aria-current="page"],
.ed-header--solid .ed-nav a[aria-current="page"] { color: var(--accent-deep); }
Dava --accent-deep (#A8873F) alle intestazioni solide. Era l'eredità di
quando «solida» voleva dire fondo CHIARO. Oggi non è più vero e si legge tre
righe sopra: `.ed-header` e `.ed-header.is-solid, .ed-header--solid` hanno
lo stesso identico `background: var(--brand-noir)`. Su quel noir #A8873F
misura 5,70:1 — cioè su /ordine, /regalo, /crea-guida e ogni altra pagina a
intestazione solida la voce indicata era **più spenta** di quelle che non
stavi indicando (16,41 a riposo → 5,70 sotto il mouse). Ed era incoerente
con se stessa: la riga non copriva `:focus-visible`, quindi la stessa voce
valeva 5,70 col mouse e 11,66 col Tab.
Misurato a video il 30/07 su / (trasparente) e /ordine (solida):
marchio-applicato/misure-prima.json → `stati.hover`.
Tolta la riga, l'unico colore attivo della barra è --accent-soft (#E0C68C,
11,66:1 sul noir) e il verso è giusto ovunque: 7,68 → 11,66.
:not(.ed-btn-primary) — il CTA oro pieno non è una voce di menu: il suo
testo resta noir (riga più sotto), sennò oro chiaro su fondo oro fa 1,00:1.
Prima ci si arrivava per ordine nel foglio; ora è detto.
Prefissate con .ed-header (0,3,1): restano sopra la riga del riposo (0,2,1)
e sopra il default dei link, che è :where(...) e vale zero. */
.ed-header .ed-nav a:not(.ed-btn-primary):hover,
.ed-header .ed-nav a:not(.ed-btn-primary):focus-visible,
.ed-header .ed-nav a:not(.ed-btn-primary)[aria-current="page"] { color: var(--accent-soft); }
@media (max-width: 1120px) { .ed-nav .ed-nav-hide { display: none; } }
/* ==========================================================================
Bottoni
========================================================================== */
.ed-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 15px 28px;
font-family: var(--sans); font-size: .98rem; font-weight: 600; line-height: 1;
text-decoration: none; white-space: nowrap; cursor: pointer;
border: 1.5px solid transparent; border-radius: var(--r-pill);
transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.ed-btn:hover { transform: translateY(-2px); }
.ed-btn:active { transform: translateY(0) scale(.985); }
.ed-btn-primary { background: var(--brand-oro); color: var(--brand-noir); border-color: var(--brand-oro); }
.ed-btn-primary:hover { background: var(--brand-oro-soft); border-color: var(--brand-oro-soft); box-shadow: 0 16px 34px rgba(201, 166, 98, .35); }
.ed-btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ed-btn-ink:hover { background: var(--ink); border-color: var(--brand-oro); color: var(--brand-oro); box-shadow: var(--shadow-md); }
.ed-btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.ed-btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); }
.ed-btn-ghost { background: transparent; color: var(--paper); border-color: var(--line-light-strong); }
.ed-btn-ghost:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
/* Stato disabilitato (tavola 23): fondo smorzato, testo attenuato, nessun
effetto al passaggio del mouse, cursore vietato — vale per tutte le
varianti. :disabled copre i