/* ════════════════════════════════════════════════════════════
CANDELA 12.9 — Design System
Dark · Vetro · Luce. Un principio: una sorgente di luce
dietro una superficie di vetro. Tutto deriva da lì.
Uso: non è supportato l'elemento è sconosciuto, quindi in
linea: senza questa riga il contenuto di modali, drawer, palette e
lightbox comparirebbe in mezzo alla pagina. Nel layer non esiste
nessuna regola `display` su dialog, quindi non c'è conflitto. */
dialog:not([open]){display:none}
/* Custom property registrate: dichiarare il tipo limita l'invalidazione di
stile al sottoalbero che le usa davvero, invece di marcare l'intero
documento a ogni frame di scorrimento. Fuori dal layer perché @property
non partecipa alla cascata dei layer. Chi non la supporta la ignora e
tutto continua a funzionare come prima. */
@property --cd-scroll{syntax:'';inherits:true;initial-value:0}
@property --cd-x{syntax:'';inherits:true;initial-value:50%}
@property --cd-a{syntax:'';inherits:true;initial-value:0}
@property --cd-b{syntax:'';inherits:true;initial-value:1}
@layer candela{
/* ── 00 · TOKENS ─────────────────────────────────────────── */
:root{
/* Versione leggibile a runtime: getComputedStyle(document.documentElement)
.getPropertyValue('--cd-version'). È una dichiarazione, non un commento,
quindi sopravvive alla minificazione. Gemella di Candela.version. */
--cd-version:"12.16";
/* 1 a sinistra→destra, -1 a destra→sinistra: attraversa i calc()
delle animazioni, che sotto [dir] non si potrebbero riscrivere. */
--cd-dir:1;
/* Il segnale di fuoco, in un token solo. Il valore e' il freddo, per
la dottrina che regge tutto il sistema: l'accent e' del prodotto,
il freddo e' dell'interfaccia — e il fuoco e' interfaccia.
Nella 12.2 era stato provato neutro e si e' visto che era peggio:
bianco al 75% su vetro scuro contrasta PIU' del blu, quindi grida
di piu' invece di meno, e per giunta perde il significato.
Cambiarlo qui lo cambia in tutte e undici le regole che lo usano.
Metterlo a `transparent` lo spegne ovunque — e con lui il solo modo
che ha chi naviga da tastiera di sapere dov'e' (WCAG 2.4.7). */
--cd-focus:var(--cd-cool-500);
--cd-focus-velo:var(--cd-glow-cool-2);
/* ── L'ordine di impilamento ───────────────────────────────
Erano undici numeri sparsi nel foglio e una nota nel changelog.
Un design system deve POSSEDERE il proprio ordine: se sta solo
nella testa di chi l'ha scritto, il primo componente nuovo lo
rompe, e il modo in cui te ne accorgi e' un menu sotto un toast.
Qui sopra si legge, e chi aggiunge un livello lo aggiunge qui. */
--cd-z-sticky:40; /* intestazioni di tabella, colonne fisse */
--cd-z-nav:60; /* barra di navigazione */
--cd-z-menu:70; /* dropdown */
--cd-z-tip:80; /* tooltip */
--cd-z-pageline:110; /* barra di avanzamento della lettura */
--cd-z-top:112; /* torna su */
--cd-z-cookie:115; /* banner del consenso */
--cd-z-bulk:118; /* barra della selezione multipla */
--cd-z-navpill:130; /* menu a pillola: chiude tutto */
--cd-z-toast:140; /* avvisi: stanno sopra a tutto tranne… */
--cd-z-skip:200; /* …salta al contenuto, che viene prima */
--cd-sbw:0px; --cd-gap-fix:0px;
color-scheme:dark;
/* Accent — la sorgente calda. Cambia solo questo per ritemare
l'intero sistema: tinte, glow e bottoni seguono da soli. */
--cd-accent-rgb:227,185,107; /* champagne (default) */
/* Luce fredda — interfaccia: focus, link, selezione. Fissa. */
--cd-cool-rgb:113,137,255;
/* Segnali */
--cd-ok-rgb:84,224,174; --cd-warn-rgb:255,194,77; --cd-bad-rgb:255,96,132;
--cd-ok:rgb(var(--cd-ok-rgb)); --cd-warn:rgb(var(--cd-warn-rgb)); --cd-bad:rgb(var(--cd-bad-rgb));
/* Ink — profondità virata al blu: il nero neutro spegne il glow */
--cd-ink-950:#040409; --cd-ink-900:#08080F; --cd-ink-800:#0D0D18;
--cd-ink-700:#141422; --cd-ink-600:#1D1D2E; --cd-ink-500:#2A2A3F;
/* Testo */
--cd-text-hi:#F5F6FB; --cd-text-mid:#AFB4C6; --cd-text-low:#878CA1;
/* Tinte derivate dall'accent. I valori statici sono la riserva per chi non
ha color-mix: perché facciano davvero da riserva le versioni calcolate
devono stare in un blocco @supports separato (sotto), non due righe più
giù nello stesso blocco — lì la cascata terrebbe comunque l'ultima e la
riserva non scatterebbe mai. */
--cd-accent-100:#FFF6E6; --cd-accent-300:#F6DCA8; --cd-accent-500:rgb(var(--cd-accent-rgb));
--cd-accent-600:#C99A47; --cd-accent-800:#7A5A26; --cd-accent-ink:#221806;
--cd-cool-100:#E8F0FF; --cd-cool-300:#AEC6FF; --cd-cool-500:rgb(var(--cd-cool-rgb));
/* Vetro — 4 elevazioni: blur, opacità e bordo crescono insieme */
--cd-g1-blur:12px; --cd-g1-bg:rgba(255,255,255,.030); --cd-g1-brd:rgba(255,255,255,.06); --cd-g1-sat:120%;
--cd-g2-blur:20px; --cd-g2-bg:rgba(255,255,255,.050); --cd-g2-brd:rgba(255,255,255,.09); --cd-g2-sat:140%;
--cd-g3-blur:32px; --cd-g3-bg:rgba(255,255,255,.070); --cd-g3-brd:rgba(255,255,255,.13); --cd-g3-sat:165%;
--cd-g4-blur:48px; --cd-g4-bg:rgba(255,255,255,.090); --cd-g4-brd:rgba(255,255,255,.18); --cd-g4-sat:185%;
/* LA LASTRA — il pavimento sotto il vetro dei comandi che GALLEGGIANO.
Il vetro del sistema e' BIANCO al 3-9%: su fondo scuro schiarisce, ed
e' esattamente il suo mestiere. Sopra una tile quasi bianca schiarisce
lo stesso, e la superficie sparisce — misurato con la fotocamera, non
dedotto: la lente sopra il bianco puro sta a 2,04:1 e i tasti dello
zoom a 1,00:1, cioe' inchiostro e fondo sono lo STESSO pixel. La
soglia e' 4,5.
Non e' un'idea nuova, ed e' la ragione per cui e' quella giusta:
`.cd-mappa__prezzo` ha lo stesso inchiostro all'86% da quando esiste,
perche' e' sempre stata sopra le tile; e le due reti di ripiego
portano gia' questi stessi comandi a `--cd-ink-700` opaco. Il vetro
impara qui quel che il NON-vetro sapeva gia'.
0,80 e' misurato: porta l'icona a 8,01:1 sul bianco puro, e sulla
pagina scura costa 16,16 -> 15,48, cioe' niente — scuro su scuro resta
scuro. Sotto 0,64 il bianco non passa piu'.
NON si applica a `.cd-g1..g4`: quelle vivono DENTRO la pagina, sopra
l'atmosfera scura del sistema, e non galleggiano su niente. Toccarle
sposterebbe ogni card e ogni pannello per un problema che non hanno. */
--cd-lastra:rgba(13,13,24,.80);
/* Rim light — la riga di luce sul bordo superiore del vetro */
--cd-rim:inset 0 1px 0 rgba(255,255,255,.14);
--cd-rim-strong:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.4);
/* Glow — sempre due strati: bloom stretto + alone largo.
La scala passa da --cd-glow-rgb, non direttamente dall'accent: così lo
stesso gradino di luce vale anche per una tinta semantica. Si ridichiara
SUL COMPONENTE (`.cd-btn--danger{--cd-glow-rgb:var(--cd-bad-rgb)}`), mai
su un contenitore, altrimenti tinge anche i figli. */
--cd-glow-rgb:var(--cd-accent-rgb);
--cd-glow-1:0 0 10px -2px rgba(var(--cd-glow-rgb),.30);
--cd-glow-2:0 0 22px -4px rgba(var(--cd-glow-rgb),.42), 0 0 52px -14px rgba(var(--cd-glow-rgb),.28);
--cd-glow-3:0 0 34px -6px rgba(var(--cd-glow-rgb),.50), 0 0 90px -20px rgba(var(--cd-glow-rgb),.34);
--cd-glow-4:0 0 48px -8px rgba(var(--cd-glow-rgb),.60), 0 0 140px -26px rgba(var(--cd-glow-rgb),.40);
--cd-glow-cool-2:0 0 22px -4px rgba(var(--cd-cool-rgb),.45), 0 0 56px -14px rgba(var(--cd-cool-rgb),.30);
--cd-glow-cool-3:0 0 34px -6px rgba(var(--cd-cool-rgb),.52), 0 0 92px -20px rgba(var(--cd-cool-rgb),.36);
/* Ombra proiettata — separa, non illumina */
--cd-cast-1:0 2px 8px rgba(0,0,0,.35);
--cd-cast-2:0 10px 30px rgba(0,0,0,.45);
--cd-cast-3:0 24px 70px rgba(0,0,0,.55);
/* Forma */
--cd-r-xs:8px; --cd-r-sm:12px; --cd-r-md:18px; --cd-r-lg:26px; --cd-r-xl:36px; --cd-r-full:999px;
/* Ritmo (base 4) */
--cd-s-1:4px; --cd-s-2:8px; --cd-s-3:12px; --cd-s-4:16px; --cd-s-5:24px;
--cd-s-6:32px; --cd-s-7:48px; --cd-s-8:64px; --cd-s-9:96px; --cd-s-10:140px;
/* Scala tipografica. Prima erano 87 dichiarazioni letterali su 18 valori,
mezzi pixel compresi: non una scala, ma aggiustamenti a occhio componente
per componente. Il difetto non era estetico — [data-density="compact"]
rimappava gli spazi e lasciava il testo dov'era, perché nessun componente
ereditava una misura. I mezzi pixel qui vengono assorbiti, non tokenizzati. */
--cd-size-1:10px; --cd-size-2:11px; --cd-size-3:12px; --cd-size-4:13px;
--cd-size-5:14px; --cd-size-6:15px; --cd-size-7:16px; --cd-size-8:17px;
--cd-size-9:19px; --cd-size-10:21px; --cd-size-11:23px; --cd-size-12:24px;
--cd-size-13:44px;
/* Tipografia */
--cd-f-display:'Bricolage Grotesque','Inter Tight',system-ui,sans-serif;
--cd-f-body:'Inter Tight',system-ui,-apple-system,sans-serif;
--cd-f-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
/* Movimento */
--cd-ease:cubic-bezier(.22,1,.36,1);
--cd-ease-in:cubic-bezier(.55,0,.45,1);
--cd-t-fast:160ms; --cd-t-mid:280ms; --cd-t-slow:520ms;
/* La durata delle USCITE, in un token solo. Stava scritta due volte —
`.19s` qui e `190` dentro closeTop — e con lo stesso valore in tutti e
due i posti, il che sembra allineato e non lo e': l'animazione parte al
fotogramma DOPO che la classe e' comparsa, quindi il dialog si chiudeva
con la coda ancora da fare. Adesso il numero sta qui, il JS lo legge dal
foglio e ci aggiunge il fotogramma di ritardo. */
--cd-t-out:220ms;
--cd-maxw:1180px;
}
/* Preset accent — applica data-accent su o su un contenitore */
[data-accent="champagne"]{--cd-accent-rgb:227,185,107}
[data-accent="copper"] {--cd-accent-rgb:222,120,86}
[data-accent="emerald"] {--cd-accent-rgb:74,222,170}
[data-accent="violet"] {--cd-accent-rgb:168,124,255}
[data-accent="rose"] {--cd-accent-rgb:255,122,162}
[data-accent="arctic"] {--cd-accent-rgb:113,137,255}
[data-accent="pearl"] {--cd-accent-rgb:216,222,238}
/* Le tinte calcolate: sovrascrivono la riserva statica solo dove color-mix
esiste. Vale anche per l'accent dichiarato su un singolo contenitore. */
@supports (color:color-mix(in oklab,red,blue)){
:root,[data-accent]{
--cd-accent-100:color-mix(in oklab, rgb(var(--cd-accent-rgb)) 20%, #FFFDF6);
--cd-accent-300:color-mix(in oklab, rgb(var(--cd-accent-rgb)) 56%, #FFF9EC);
--cd-accent-600:color-mix(in oklab, rgb(var(--cd-accent-rgb)) 80%, #17110A);
--cd-accent-800:color-mix(in oklab, rgb(var(--cd-accent-rgb)) 42%, #100D08);
--cd-accent-ink:color-mix(in oklab, rgb(var(--cd-accent-rgb)) 26%, #090705);
}
}
/* ── 01 · RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body::before{content:none}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--cd-ink-900);color:var(--cd-text-mid);
font-family:var(--cd-f-body);font-size:var(--cd-size-7);line-height:1.65;font-weight:300;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;color:var(--cd-text-hi);font-family:var(--cd-f-display);font-weight:500;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
img,svg,video{display:block;max-width:100%}
a{color:var(--cd-cool-300);text-decoration:none;transition:color var(--cd-t-fast) var(--cd-ease)}
/* Dentro un blocco di testo il collegamento si distingue SOLO per il colore,
e il freddo accanto a --cd-text-mid fa 1,21:1 — sotto il 3:1 che serve
quando il colore e' l'unica differenza. La sottolineatura e' la seconda
differenza, e dentro un paragrafo non e' una scelta di gusto.
E' la seconda volta che questo difetto compare: la prima nel banner del
consenso (11.2), la seconda in un rimando dentro la documentazione. Due
volte lo stesso difetto vuol dire che mancava la regola, non la toppa.
Fuori dai paragrafi — nav, footer, elenchi di collegamenti — il
collegamento e' gia' isolato e la regola non si applica. */
p>a:not(.cd-btn){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
text-decoration-color:rgba(var(--cd-cool-rgb),.5);transition:color var(--cd-t-fast) var(--cd-ease),text-decoration-color var(--cd-t-fast) var(--cd-ease)}
p>a:not(.cd-btn):hover{text-decoration-color:var(--cd-cool-300)}
a:hover{color:var(--cd-cool-100)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--cd-focus);outline-offset:3px;border-radius:var(--cd-r-xs)}
::selection{background:rgba(var(--cd-accent-rgb),.28);color:var(--cd-text-hi)}
/* Nessuno stile sulla barra di scorrimento: dichiarare una larghezza su
::-webkit-scrollbar converte le barre a sovrapposizione in barre classiche,
che si prendono una corsia permanente sul lato destro. Lasciata al sistema,
la barra resta sopra il contenuto e non riserva spazio. */
/* ── 02 · ATMOSFERA — le sorgenti dietro il vetro ────────── */
.cd-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cd-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.cd-orb--a{width:52vw;height:52vw;inset-inline-start:-12vw;top:-14vw;background:radial-gradient(circle,rgba(var(--cd-accent-rgb),.55),transparent 68%);animation:cd-drift-a 34s var(--cd-ease-in) infinite alternate}
.cd-orb--b{width:46vw;height:46vw;inset-inline-end:-10vw;top:22vh;background:radial-gradient(circle,rgba(var(--cd-cool-rgb),.5),transparent 68%);animation:cd-drift-b 42s var(--cd-ease-in) infinite alternate}
.cd-orb--c{width:38vw;height:38vw;inset-inline-start:26vw;bottom:-12vw;background:radial-gradient(circle,rgba(167,90,255,.34),transparent 70%);animation:cd-drift-c 50s var(--cd-ease-in) infinite alternate}
@keyframes cd-drift-a{to{transform:translate3d(14vw,18vh,0) scale(1.18)}}
@keyframes cd-drift-b{to{transform:translate3d(-16vw,-12vh,0) scale(.85)}}
@keyframes cd-drift-c{to{transform:translate3d(10vw,-16vh,0) scale(1.12)}}
.cd-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.032;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ── 03 · VETRO — g1 appoggiato · g2 card · g3 nav · g4 modale */
.cd-g1,.cd-g2,.cd-g3,.cd-g4{position:relative;border:1px solid}
.cd-g1{background:var(--cd-g1-bg);border-color:var(--cd-g1-brd);-webkit-backdrop-filter:blur(var(--cd-g1-blur)) saturate(var(--cd-g1-sat));backdrop-filter:blur(var(--cd-g1-blur)) saturate(var(--cd-g1-sat));box-shadow:var(--cd-rim)}
.cd-g2{background:var(--cd-g2-bg);border-color:var(--cd-g2-brd);-webkit-backdrop-filter:blur(var(--cd-g2-blur)) saturate(var(--cd-g2-sat));backdrop-filter:blur(var(--cd-g2-blur)) saturate(var(--cd-g2-sat));box-shadow:var(--cd-rim),var(--cd-cast-1)}
.cd-g3{background:var(--cd-g3-bg);border-color:var(--cd-g3-brd);-webkit-backdrop-filter:blur(var(--cd-g3-blur)) saturate(var(--cd-g3-sat));backdrop-filter:blur(var(--cd-g3-blur)) saturate(var(--cd-g3-sat));box-shadow:var(--cd-rim-strong),var(--cd-cast-2)}
.cd-g4{background:var(--cd-g4-bg);border-color:var(--cd-g4-brd);-webkit-backdrop-filter:blur(var(--cd-g4-blur)) saturate(var(--cd-g4-sat));backdrop-filter:blur(var(--cd-g4-blur)) saturate(var(--cd-g4-sat));box-shadow:var(--cd-rim-strong),var(--cd-cast-3)}
/* ── 04 · LAYOUT ─────────────────────────────────────────── */
.cd-wrap{position:relative;z-index:2;max-width:var(--cd-maxw);margin-inline:auto;padding-inline:var(--cd-s-5)}
.cd-sec{position:relative;z-index:2;padding-block:var(--cd-s-9)}
/* `--cd-col` e' la larghezza MINIMA di una colonna; `--cd-cols` il numero
MASSIMO. Il secondo termine del `max()` vale un ennesimo del contenitore
meno i vuoti: una traccia non puo' essere piu' stretta di cosi', quindi
N+1 colonne non ci stanno mai. E' la tecnica standard per mettere un
tetto a `auto-fit`, che da solo non ne ha.
Il predefinito 99 lascia tutto com'era: a quel numero il secondo termine
e' negativo per qualunque contenitore reale, e `max()` sceglie `--cd-col`.
Una pagina che non dichiara `--cd-cols` non si accorge di questa riga. */
.cd-grid{display:grid;gap:var(--cd-s-4);
grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--cd-col,280px),
(100% - (var(--cd-cols,99) - 1) * var(--cd-s-4)) / var(--cd-cols,99))),1fr))}
.cd-stack{display:flex;flex-direction:column;gap:var(--cd-gap,var(--cd-s-4))}
.cd-cluster{display:flex;flex-wrap:wrap;gap:var(--cd-gap,var(--cd-s-3));align-items:center}
.cd-split{display:flex;justify-content:space-between;align-items:center;gap:var(--cd-s-4);flex-wrap:wrap}
.cd-center{display:grid;place-items:center}
/* ── 05 · TIPOGRAFIA ─────────────────────────────────────── */
.cd-display{font-family:var(--cd-f-display);font-size:clamp(44px,8vw,104px);font-weight:200;letter-spacing:-.055em;color:var(--cd-text-hi);line-height:1;font-variation-settings:'opsz' 96}
.cd-display--glow{background:linear-gradient(178deg,var(--cd-text-hi) 26%,rgba(var(--cd-accent-rgb),.75) 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-h1{font-size:clamp(34px,5vw,56px)} .cd-h2{font-size:clamp(28px,4vw,40px)} .cd-h3{font-size:var(--cd-size-11)} .cd-h4{font-size:var(--cd-size-9)}
.cd-lead{font-size:var(--cd-size-9);color:var(--cd-text-mid)}
.cd-small{font-size:var(--cd-size-5);color:var(--cd-text-low)}
.cd-mono{font-family:var(--cd-f-mono);font-size:var(--cd-size-3);letter-spacing:.13em;text-transform:uppercase}
.cd-eyebrow{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cd-accent-500);display:inline-flex;align-items:center;gap:var(--cd-s-2);margin-bottom:var(--cd-s-4)}
.cd-eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--cd-accent-500))}
.cd-text-hi{color:var(--cd-text-hi)} .cd-text-mid{color:var(--cd-text-mid)} .cd-text-low{color:var(--cd-text-low)} .cd-text-accent{color:var(--cd-accent-500)}
/* ── 06 · BOTTONI — in hover si accendono, non si muovono ── */
.cd-btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--cd-s-2);
padding:11px 22px;border-radius:var(--cd-r-full);border:1px solid transparent;
font-size:var(--cd-size-5);font-weight:500;line-height:1;white-space:nowrap;
transition:transform var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease),background var(--cd-t-fast) var(--cd-ease),border-color var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease);
}
.cd-btn:active{transform:translateY(1px) scale(.985)}
.cd-btn--primary{background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-500));color:var(--cd-accent-ink);box-shadow:var(--cd-glow-2),inset 0 1px 0 rgba(255,255,255,.5)}
.cd-btn--primary:hover{box-shadow:var(--cd-glow-3),inset 0 1px 0 rgba(255,255,255,.6)}
.cd-btn--glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--cd-text-hi);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--cd-rim)}
.cd-btn--glass:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24)}
.cd-btn--ghost{background:transparent;color:var(--cd-text-mid)}
.cd-btn--ghost:hover{color:var(--cd-text-hi);background:rgba(255,255,255,.05)}
.cd-btn--cool{background:rgba(var(--cd-cool-rgb),.16);border-color:rgba(var(--cd-cool-rgb),.4);color:var(--cd-cool-100);box-shadow:var(--cd-glow-cool-2)}
.cd-btn--cool:hover{background:rgba(var(--cd-cool-rgb),.26);box-shadow:var(--cd-glow-cool-3)}
.cd-btn--danger{--cd-glow-rgb:var(--cd-bad-rgb);background:rgba(var(--cd-bad-rgb),.14);border-color:rgba(var(--cd-bad-rgb),.4);color:var(--cd-bad)}
.cd-btn--danger:hover{background:rgba(var(--cd-bad-rgb),.24);box-shadow:var(--cd-glow-2)}
.cd-btn--sm{padding:7px 15px;font-size:var(--cd-size-4)}
.cd-btn--lg{padding:15px 30px;font-size:var(--cd-size-7)}
.cd-btn--icon{width:40px;height:40px;padding:0;border-radius:var(--cd-r-full)}
.cd-btn[disabled],.cd-btn.is-loading{opacity:.34;pointer-events:none;box-shadow:none}
.cd-btn.is-loading::before{content:"";width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:cd-spin .7s linear infinite}
@keyframes cd-spin{to{transform:rotate(360deg)}}
/* ── 07 · FORM — il focus è sempre luce fredda ───────────── */
.cd-field{width:100%}
.cd-label{display:block;font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.1em;text-transform:uppercase;color:var(--cd-text-low);margin-bottom:var(--cd-s-2)}
.cd-input,.cd-select,.cd-textarea{
width:100%;padding:13px 16px;border-radius:var(--cd-r-sm);background-color:rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.1);color:var(--cd-text-hi);
transition:border-color var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease),background var(--cd-t-fast) var(--cd-ease);
}
.cd-input::placeholder,.cd-textarea::placeholder{color:var(--cd-text-low)}
/* Il glow da solo è un alone sfocato: il contorno pieno di 2px porta il
contrasto che serve (1.4.11), il glow resta il linguaggio del sistema. */
.cd-input:focus,.cd-select:focus,.cd-textarea:focus{outline:none;border-color:rgba(var(--cd-cool-rgb),.6);box-shadow:0 0 0 2px var(--cd-focus),var(--cd-focus-velo);background-color:rgba(0,0,0,.4)}
.cd-textarea{min-height:110px;resize:vertical;line-height:1.6}
.cd-select{appearance:none;-webkit-appearance:none;padding-inline-end:42px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E8296' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center}
.cd-hint{font-size:var(--cd-size-4);color:var(--cd-text-low);margin-top:var(--cd-s-2)}
.cd-field.is-error .cd-input,.cd-field.is-error .cd-select,.cd-field.is-error .cd-textarea{--cd-glow-rgb:var(--cd-bad-rgb);border-color:rgba(var(--cd-bad-rgb),.6);box-shadow:var(--cd-glow-2)}
.cd-field.is-error .cd-hint{color:var(--cd-bad)}
.cd-field.is-ok .cd-input{border-color:rgba(var(--cd-ok-rgb),.5)}
/* Gruppo input + icona/prefisso */
.cd-input-group{position:relative}
.cd-input-group .cd-input{padding-inline-start:44px}
.cd-input-group>svg,.cd-input-group>.cd-input-ico{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
width:20px;height:20px;display:grid;place-items:center;font-size:var(--cd-size-10);line-height:1;
color:var(--cd-text-low);pointer-events:none}
.cd-input-group>.cd-input-ico>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.cd-input-group .cd-input:focus~.cd-input-ico,.cd-input-group:focus-within>.cd-input-ico{color:var(--cd-cool-300)}
/* Checkbox / Radio */
.cd-check,.cd-radio{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.3);cursor:pointer;display:inline-grid;place-items:center;transition:border-color var(--cd-t-fast) var(--cd-ease),background var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
.cd-check{border-radius:6px} .cd-radio{border-radius:50%}
.cd-check::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform var(--cd-t-fast) var(--cd-ease);background:var(--cd-accent-ink);clip-path:polygon(14% 44%,0 62%,40% 100%,100% 16%,84% 2%,38% 68%)}
.cd-radio::before{content:"";width:9px;height:9px;border-radius:50%;transform:scale(0);transition:transform var(--cd-t-fast) var(--cd-ease);background:var(--cd-accent-ink)}
.cd-check:checked,.cd-radio:checked{background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-500));border-color:transparent;box-shadow:var(--cd-glow-1)}
.cd-check:checked::before,.cd-radio:checked::before{transform:scale(1)}
/* Un'etichetta e' testo, e il testo va a capo. Senza flex-wrap una
scelta con una didascalia lunga allarga il documento oltre il
viewport a 320 px — succedeva davvero, e nessuno lo vedeva perche'
il body ritaglia. La misura non e' della pagina: e' del componente,
e chiunque scriva una label lunga ne eredita il difetto.
Nessun `flex:none` qui: i tre controlli ce l'hanno gia' nelle loro
regole, e metterlo sul contenitore (`.cd-choice>input`, 0-1-1) lo
farebbe vincere su `.cd-check` (0-1-0) — cioe' esattamente la classe
di difetto per cui esiste `npm run specificita`, che infatti l'ha
segnalato appena scritto. */
.cd-choice{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--cd-s-3);font-size:var(--cd-size-5);color:var(--cd-text-mid);cursor:pointer;user-select:none}
/* Una scelta che si prende la riga intera. `.cd-choice` e' fatta per una
voce sola in mezzo al testo: e' `inline-flex` e va a capo SOTTO il segno,
il che a 272 px — la larghezza utile del pannello del menu su un telefono
da 320 — spezza «Con terrazza abitabile» lasciando la casella orfana in
cima. E' la stessa famiglia di difetto che l'audit ha gia' trovato una
volta, su questa stessa classe.
Qui la riga e' un blocco: il nome va a capo ACCANTO al segno, e il
conteggio si appoggia al fondo — lo stesso gesto del delle voci
del menu e del delle lingue, che il sistema fa gia' in due posti. E'
la forma di un filtro a faccette: marca, zona, servizi, dove le voci sono
molte e ognuna porta un numero.
Nessun fondo in hover, e non e' una dimenticanza: il conteggio e'
`--cd-text-low`, e schiarire il fondo sotto un testo tenue ne ABBASSA il
contrasto. Il minimo del sistema e' 4,51:1 contro una soglia di 4,5 — non
c'e' margine per una superficie in piu'. In hover si accende il nome. */
.cd-choice--riga{display:flex;flex-wrap:nowrap;width:100%;
padding:9px 12px;border-radius:var(--cd-r-xs);
transition:color var(--cd-t-fast) var(--cd-ease)}
.cd-choice--riga>span{min-width:0}
.cd-choice--riga>small{margin-inline-start:auto;flex:none;padding-inline-start:var(--cd-s-3);
font-family:var(--cd-f-mono);font-size:var(--cd-size-2);color:var(--cd-text-low)}
.cd-choice--riga:hover,.cd-choice--riga:has(:checked){color:var(--cd-text-hi)}
/* Switch */
.cd-switch{appearance:none;-webkit-appearance:none;width:52px;height:29px;flex:none;border-radius:var(--cd-r-full);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);position:relative;cursor:pointer;transition:background var(--cd-t-mid) var(--cd-ease),border-color var(--cd-t-mid) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
.cd-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:21px;height:21px;border-radius:50%;background:var(--cd-text-low);transition:transform var(--cd-t-mid) var(--cd-ease),background var(--cd-t-mid) var(--cd-ease)}
.cd-switch:checked{background:rgba(var(--cd-accent-rgb),.22);border-color:rgba(var(--cd-accent-rgb),.5);box-shadow:var(--cd-glow-1)}
.cd-switch:checked::after{transform:translateX(calc(23px * var(--cd-dir)));background:var(--cd-accent-300)}
/* Range */
.cd-range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:var(--cd-r-full);background:rgba(255,255,255,.14);cursor:pointer}
.cd-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--cd-accent-300);box-shadow:var(--cd-glow-2);border:none}
.cd-range::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:var(--cd-accent-300);box-shadow:var(--cd-glow-2)}
/* ── 08 · BADGE · CHIP · TAG ─────────────────────────────── */
.cd-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--cd-r-full);font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.06em}
.cd-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 9px 1px currentColor}
.cd-badge--ok{color:var(--cd-ok);background:rgba(var(--cd-ok-rgb),.1);border:1px solid rgba(var(--cd-ok-rgb),.26)}
.cd-badge--warn{color:var(--cd-warn);background:rgba(var(--cd-warn-rgb),.1);border:1px solid rgba(var(--cd-warn-rgb),.26)}
.cd-badge--bad{color:var(--cd-bad);background:rgba(var(--cd-bad-rgb),.1);border:1px solid rgba(var(--cd-bad-rgb),.26)}
.cd-badge--info{color:var(--cd-cool-300);background:rgba(var(--cd-cool-rgb),.1);border:1px solid rgba(var(--cd-cool-rgb),.26)}
.cd-tag{display:inline-block;font-family:var(--cd-f-mono);font-size:var(--cd-size-1);letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--cd-r-full);border:1px solid rgba(255,255,255,.14);color:var(--cd-text-mid);background:rgba(255,255,255,.05)}
.cd-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--cd-r-full);font-size:var(--cd-size-4);color:var(--cd-text-mid);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all var(--cd-t-fast) var(--cd-ease)}
.cd-chip:hover{color:var(--cd-text-hi);border-color:rgba(255,255,255,.24)}
.cd-chip.is-active{color:var(--cd-accent-300);background:rgba(var(--cd-accent-rgb),.12);border-color:rgba(var(--cd-accent-rgb),.45);box-shadow:var(--cd-glow-1)}
/* La pastiglia di colore dentro un chip. Il colore di un prodotto — il blu
di una camicia, il bianco di una parete — e' CONTENUTO, non tema: arriva
dal markup, ed e' l'unico posto del sistema in cui un colore scritto a
mano non contraddice la regola dei token. Si scrive su `color` e non su
`background`, cosi' e' una dichiarazione sola e il chip resta un chip. Il
velo interno serve ai colori quasi neri, che su fondo scuro sparirebbero
contro il bordo.
La regola stava in locale dentro docs.html: era gia' il modo del sistema
senza essere del sistema, e chi copiava non se la portava dietro. */
.cd-chip>i{width:11px;height:11px;flex:none;border-radius:50%;font-style:normal;
background:currentColor;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* ── 09 · CARD ───────────────────────────────────────────── */
.cd-card{border-radius:var(--cd-r-lg);padding:var(--cd-s-6)}
.cd-card--tight{padding:var(--cd-s-5)}
.cd-card--flush{padding:0;overflow:hidden}
.cd-card--hover{transition:transform var(--cd-t-mid) var(--cd-ease),box-shadow var(--cd-t-slow) var(--cd-ease)}
.cd-card--hover:hover{transform:translateY(-5px);box-shadow:var(--cd-rim-strong),var(--cd-cast-3),var(--cd-glow-2)}
/* L'ALTEZZA O LA PROPORZIONE, e i predefiniti sono quelli di sempre.
`height:150px` fisso vuol dire che su una scheda larga il doppio
l'immagine passa da 1,9:1 a 2,4:1 — la stessa foto, due formati. Chi
vuole una proporzione stabile dichiara `--cd-card-ratio` e mette
l'altezza in `auto`; chi non dichiara niente resta a 150 px, e nessuna
pagina esistente si sposta di un pixel.
Due token e non uno: `aspect-ratio` da solo perde contro un'altezza
dichiarata, quindi chi sceglie la proporzione deve poter togliere di
mezzo l'altezza. */
.cd-card__media{height:var(--cd-card-alt,150px);aspect-ratio:var(--cd-card-ratio,auto);background:linear-gradient(130deg,rgba(var(--cd-accent-rgb),.32),rgba(var(--cd-cool-rgb),.24));border-bottom:1px solid rgba(255,255,255,.08)}
.cd-card__body{padding:var(--cd-s-5)}
.cd-price{font-family:var(--cd-f-mono);color:var(--cd-accent-500);font-size:var(--cd-size-6)}
/* ── 10 · NAV ────────────────────────────────────────────── */
.cd-nav{position:sticky;top:var(--cd-s-4);z-index:var(--cd-z-nav);margin:var(--cd-s-4) auto 0;max-width:var(--cd-maxw);width:calc(100% - var(--cd-s-5)*2);display:flex;align-items:center;justify-content:space-between;gap:var(--cd-s-4);padding-block:var(--cd-s-3);padding-inline:var(--cd-s-5) var(--cd-s-3);border-radius:var(--cd-r-full)}
.cd-nav__brand{font-family:var(--cd-f-display);font-weight:600;letter-spacing:.16em;font-size:var(--cd-size-4);color:var(--cd-text-hi);text-transform:uppercase}
.cd-nav__links{display:flex;gap:var(--cd-s-2);list-style:none;margin:0;padding:0}
.cd-nav__links a{font-family:var(--cd-f-mono);font-size:var(--cd-size-3);color:var(--cd-text-low);padding:var(--cd-s-2) var(--cd-s-3);border-radius:var(--cd-r-full);transition:color var(--cd-t-fast) var(--cd-ease),background var(--cd-t-fast) var(--cd-ease)}
.cd-nav__links a:hover,.cd-nav__links a.is-active{color:var(--cd-text-hi);background:rgba(255,255,255,.06)}
@media(max-width:860px){.cd-nav__links{display:none}}
/* ── 11 · MODAL — ────────── */
.cd-modal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;color:inherit;overflow:hidden}
.cd-modal[open] .cd-modal__panel{animation:cd-modal-in var(--cd-t-mid) var(--cd-ease)}
.cd-modal.is-closing .cd-modal__panel{animation:cd-modal-out var(--cd-t-out) var(--cd-ease-in) forwards}
/* L'uscita rifa' il gesto dell'entrata al contrario, e con la stessa
ampiezza: prima erano 14 px in entrata contro 10 in uscita, e la
differenza bastava a far sembrare che l'uscita non ci fosse. */
@keyframes cd-modal-out{to{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes cd-fade-out{to{opacity:0}}
@keyframes cd-fade-in{from{opacity:0}}
/* Lo sfondo aveva l'uscita e non l'entrata: usciva in dissolvenza e
compariva di scatto. La regola sta PRIMA di quella d'uscita, che ha la
stessa specificita' e deve vincere per ordine quando arriva is-closing. */
.cd-modal[open]::backdrop,.cd-palette[open]::backdrop,
.cd-drawer[open]::backdrop,.cd-lightbox[open]::backdrop{animation:cd-fade-in var(--cd-t-mid) var(--cd-ease)}
.cd-modal.is-closing::backdrop,.cd-palette.is-closing::backdrop,
.cd-drawer.is-closing::backdrop,.cd-lightbox.is-closing::backdrop{animation:cd-fade-out var(--cd-t-out) var(--cd-ease-in) forwards}
.cd-modal::backdrop{background:rgba(4,4,9,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cd-modal__panel{border-radius:var(--cd-r-xl);padding:var(--cd-s-7)}
.cd-modal__panel>h3{margin-bottom:var(--cd-s-3)}
@keyframes cd-modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
/* ── 12 · DROPDOWN — [data-cd-dropdown] > button + .cd-menu */
[data-cd-dropdown]{position:relative;display:inline-block}
/* visibility oltre a opacity: opacita' e pointer-events non tolgono nulla
dall'ordine di tabulazione, quindi le voci di un dropdown chiuso
restavano raggiungibili con Tab. Stessa guardia del pannello del menu. */
.cd-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:210px;z-index:var(--cd-z-menu);border-radius:var(--cd-r-md);padding:var(--cd-s-2);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity var(--cd-t-fast) var(--cd-ease),transform var(--cd-t-fast) var(--cd-ease),visibility 0s linear var(--cd-t-fast)}
.cd-menu--right{inset-inline-start:auto;inset-inline-end:0}
/* Una proprieta' DISCRETA come `visibility` dentro una transizione con
durata non si anima: scatta a meta' corsa. Messa cosi' faceva due danni
opposti — in entrata il pannello restava invisibile per i primi
millisecondi (e il fuoco da tastiera non poteva entrarci: focus() su un
ramo invisibile non fa niente e non lancia), in uscita spariva a fila
mezza dissolvenza. La forma giusta e' un RITARDO: 0s di durata, ritardo
pari all'animazione in uscita, e nessun ritardo in entrata.
Trovato con le frecce del dropdown, e riguardava altri tre componenti. */
[data-cd-dropdown].is-open .cd-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition:opacity var(--cd-t-fast) var(--cd-ease),transform var(--cd-t-fast) var(--cd-ease),visibility 0s}
.cd-menu__item{display:flex;align-items:center;gap:var(--cd-s-3);width:100%;text-align:start;padding:10px 13px;border-radius:var(--cd-r-xs);border:0;background:transparent;font-size:var(--cd-size-5);color:var(--cd-text-mid);transition:background var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease)}
.cd-menu__item:hover{background:rgba(255,255,255,.07);color:var(--cd-text-hi)}
.cd-menu__item.is-danger:hover{background:rgba(var(--cd-bad-rgb),.12);color:var(--cd-bad)}
.cd-menu__sep{height:1px;margin:var(--cd-s-2) var(--cd-s-2);background:rgba(255,255,255,.08)}
/* ── 13 · TABS — [data-cd-tabs] ──────────────────────────── */
.cd-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--cd-r-full)}
.cd-tab{padding:8px 18px;border-radius:var(--cd-r-full);border:1px solid transparent;background:transparent;font-size:var(--cd-size-4);font-weight:500;color:var(--cd-text-low);transition:all var(--cd-t-fast) var(--cd-ease)}
.cd-tab:hover{color:var(--cd-text-hi)}
.cd-tab[aria-selected="true"]{color:var(--cd-accent-300);background:rgba(var(--cd-accent-rgb),.12);border-color:rgba(var(--cd-accent-rgb),.4);box-shadow:var(--cd-glow-1)}
.cd-tabpanel[hidden]{display:none}
.cd-tabpanel{padding-top:var(--cd-s-5)}
/* Il pannello entra dal lato da cui arrivi: il movimento dice la direzione */
.cd-js .cd-tabpanel:not([hidden]){animation:cd-view-fwd .34s var(--cd-ease)}
.cd-js .cd-tabpanel:not([hidden])[data-dir="back"]{animation-name:cd-view-back}
/* ── 14 · ACCORDION — ───────────── */
.cd-acc{border-radius:var(--cd-r-md);overflow:hidden}
.cd-acc+.cd-acc{margin-top:var(--cd-s-3)}
.cd-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--cd-s-4);padding:var(--cd-s-4) var(--cd-s-5);font-weight:500;color:var(--cd-text-hi);transition:background var(--cd-t-fast) var(--cd-ease)}
.cd-acc summary::-webkit-details-marker{display:none}
.cd-acc summary::after{content:"";width:9px;height:9px;flex:none;border-right:1.6px solid var(--cd-text-low);border-bottom:1.6px solid var(--cd-text-low);transform:rotate(45deg);transition:transform var(--cd-t-mid) var(--cd-ease)}
.cd-acc[open] summary::after{transform:rotate(225deg);border-color:var(--cd-accent-500)}
.cd-acc summary:hover{background:rgba(255,255,255,.04)}
.cd-acc__body{padding:0 var(--cd-s-5) var(--cd-s-5);font-size:var(--cd-size-6);overflow:hidden}
/* Il focus resta dentro: overflow:hidden tagliava l'anello lasciando una riga */
.cd-acc summary:focus-visible{outline-offset:-3px}
/* La freccia gira al click, non alla fine dell'animazione */
.cd-acc.is-opening summary::after{transform:rotate(225deg);border-color:var(--cd-accent-500)}
.cd-acc.is-closing summary::after{transform:rotate(45deg);border-color:var(--cd-text-low)}
/* ── 15 · TOAST — via Candela.toast() ────────────────────── */
.cd-toaster{position:fixed;bottom:var(--cd-s-5);inset-inline-end:calc(var(--cd-s-5) + var(--cd-gap-fix));z-index:var(--cd-z-toast);display:flex;flex-direction:column;gap:var(--cd-s-3);max-width:min(380px,calc(100vw - 32px))}
.cd-toast{border-radius:var(--cd-r-md);padding:var(--cd-s-4) var(--cd-s-5);display:flex;gap:var(--cd-s-3);align-items:flex-start;animation:cd-toast-in var(--cd-t-mid) var(--cd-ease)}
.cd-toast.is-leaving{animation:cd-toast-out var(--cd-t-mid) var(--cd-ease-in) forwards}
.cd-toast::before{content:"";width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:var(--cd-cool-500);box-shadow:0 0 10px 1px var(--cd-cool-500)}
.cd-toast--ok::before{background:var(--cd-ok);box-shadow:0 0 10px 1px var(--cd-ok)}
.cd-toast--warn::before{background:var(--cd-warn);box-shadow:0 0 10px 1px var(--cd-warn)}
.cd-toast--bad::before{background:var(--cd-bad);box-shadow:0 0 10px 1px var(--cd-bad)}
.cd-toast b{display:block;color:var(--cd-text-hi);font-weight:500;font-size:var(--cd-size-5)}
.cd-toast p{font-size:var(--cd-size-4);color:var(--cd-text-mid)}
@keyframes cd-toast-in{from{opacity:0;transform:translateX(calc(24px * var(--cd-dir)))}to{opacity:1;transform:none}}
@keyframes cd-toast-out{to{opacity:0;transform:translateX(calc(24px * var(--cd-dir)))}}
/* ── 16 · TOOLTIP — data-cd-tip="testo" ──────────────────── */
[data-cd-tip]{position:relative}
[data-cd-tip]::after{content:attr(data-cd-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(3px);padding:6px 11px;border-radius:var(--cd-r-xs);background:var(--cd-ink-600);border:1px solid rgba(255,255,255,.14);color:var(--cd-text-hi);font-size:var(--cd-size-3);font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--cd-t-fast) var(--cd-ease),transform var(--cd-t-fast) var(--cd-ease);z-index:var(--cd-z-tip);box-shadow:var(--cd-cast-2)}
[data-cd-tip]:hover::after,[data-cd-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── 17 · TABELLA ────────────────────────────────────────── */
.cd-table-wrap{border-radius:var(--cd-r-md);overflow:auto}
.cd-table{width:100%;border-collapse:collapse;font-size:var(--cd-size-5)}
.cd-table th{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.1em;text-transform:uppercase;color:var(--cd-text-low);text-align:start;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.cd-table td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--cd-text-mid)}
.cd-table tbody tr{transition:background var(--cd-t-fast) var(--cd-ease)}
.cd-table tbody tr:hover{background:rgba(255,255,255,.035)}
.cd-table tbody tr.is-selected{background:rgba(var(--cd-cool-rgb),.08);box-shadow:inset 2px 0 0 var(--cd-cool-500)}
.cd-table tr:last-child td{border-bottom:0}
/* ── 18 · ALERT ──────────────────────────────────────────── */
.cd-alert{display:flex;gap:var(--cd-s-3);padding:var(--cd-s-4) var(--cd-s-5);border-radius:var(--cd-r-md);font-size:var(--cd-size-5);border:1px solid;align-items:flex-start}
.cd-alert b{display:block;font-weight:500;margin-bottom:2px}
.cd-alert--info{background:rgba(var(--cd-cool-rgb),.08);border-color:rgba(var(--cd-cool-rgb),.28);color:var(--cd-cool-100)}
.cd-alert--ok{background:rgba(var(--cd-ok-rgb),.08);border-color:rgba(var(--cd-ok-rgb),.28);color:var(--cd-ok)}
.cd-alert--warn{background:rgba(var(--cd-warn-rgb),.08);border-color:rgba(var(--cd-warn-rgb),.28);color:var(--cd-warn)}
.cd-alert--bad{background:rgba(var(--cd-bad-rgb),.08);border-color:rgba(var(--cd-bad-rgb),.28);color:var(--cd-bad)}
.cd-alert .cd-alert__txt{color:var(--cd-text-mid)}
/* ── 19 · PROGRESS · SPINNER · SKELETON ──────────────────── */
.cd-progress{height:7px;border-radius:var(--cd-r-full);background:rgba(255,255,255,.08);overflow:hidden}
.cd-progress>i{display:block;height:100%;width:var(--value,40%);border-radius:inherit;background:linear-gradient(90deg,var(--cd-accent-600),var(--cd-accent-300));box-shadow:var(--cd-glow-1);transition:width var(--cd-t-slow) var(--cd-ease)}
.cd-spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--cd-accent-500);animation:cd-spin .8s linear infinite;filter:drop-shadow(0 0 6px rgba(var(--cd-accent-rgb),.5))}
.cd-skel{border-radius:var(--cd-r-xs);background:linear-gradient(100deg,rgba(255,255,255,.05) 40%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 60%);background-size:220% 100%;animation:cd-shimmer 1.4s linear infinite}
.cd-skel--text{height:13px} .cd-skel--title{height:22px;width:56%} .cd-skel--media{height:140px;border-radius:var(--cd-r-md)}
@keyframes cd-shimmer{to{background-position:-120% 0}}
/* ── 20 · PAGINATION · BREADCRUMB ────────────────────────── */
.cd-pages{display:inline-flex;gap:6px;align-items:center}
.cd-page{min-width:38px;height:38px;padding:0 8px;border-radius:var(--cd-r-sm);display:grid;place-items:center;font-family:var(--cd-f-mono);font-size:var(--cd-size-4);color:var(--cd-text-low);border:1px solid transparent;background:transparent;transition:all var(--cd-t-fast) var(--cd-ease)}
.cd-page:hover{color:var(--cd-text-hi);background:rgba(255,255,255,.06)}
.cd-page.is-active{color:var(--cd-accent-300);background:rgba(var(--cd-accent-rgb),.12);border-color:rgba(var(--cd-accent-rgb),.4);box-shadow:var(--cd-glow-1)}
.cd-crumbs{display:flex;flex-wrap:wrap;gap:var(--cd-s-2);align-items:center;font-family:var(--cd-f-mono);font-size:var(--cd-size-3)}
.cd-crumbs a{color:var(--cd-text-low)} .cd-crumbs a:hover{color:var(--cd-text-hi)}
.cd-crumbs li{display:flex;gap:var(--cd-s-2);align-items:center;list-style:none}
.cd-crumbs li+li::before{content:"/";color:var(--cd-ink-500)}
.cd-crumbs [aria-current]{color:var(--cd-accent-500)}
.cd-crumbs{margin:0;padding:0}
/* ── 21 · AVATAR · DIVIDER · KBD ─────────────────────────── */
.cd-avatar{
--cd-avatar-ring:rgba(4,4,9,.8);
width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
font-family:var(--cd-f-mono);font-size:var(--cd-size-4);letter-spacing:.02em;color:var(--cd-accent-100);
background:linear-gradient(160deg,rgba(var(--cd-accent-rgb),.26),rgba(var(--cd-accent-rgb),.1)),var(--cd-ink-700);
border:1px solid rgba(var(--cd-accent-rgb),.34);box-shadow:var(--cd-rim)}
/* Senza questa riserva, dove color-mix non esiste l'avatar perde del tutto
lo sfondo: la dichiarazione sopra è valida ovunque, questa la raffina. */
@supports (background:color-mix(in oklab,red,blue)){
.cd-avatar{background:linear-gradient(160deg,color-mix(in oklab,rgb(var(--cd-accent-rgb)) 30%,var(--cd-ink-700)),color-mix(in oklab,rgb(var(--cd-accent-rgb)) 12%,var(--cd-ink-800)))}
}
.cd-avatar--sm{width:32px;height:32px;font-size:var(--cd-size-2)}
.cd-avatar--more{color:var(--cd-text-mid);background:var(--cd-ink-600);border-color:rgba(255,255,255,.14)}
.cd-avatar-stack{display:flex;isolation:isolate}
.cd-avatar-stack .cd-avatar{margin-inline-start:-6px;box-shadow:0 0 0 2px var(--cd-avatar-ring),var(--cd-rim)}
.cd-avatar-stack .cd-avatar:first-child{margin-inline-start:0}
.cd-avatar-stack .cd-avatar:hover{z-index:1}
.cd-divider{display:flex;align-items:center;gap:var(--cd-s-4);margin:var(--cd-s-6) 0;color:var(--cd-text-low);font-family:var(--cd-f-mono);font-size:var(--cd-size-2);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.cd-divider::before,.cd-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.cd-kbd{font-family:var(--cd-f-mono);font-size:var(--cd-size-3);padding:3px 8px;border-radius:6px;background:var(--cd-ink-700);border:1px solid rgba(255,255,255,.14);border-bottom-width:2px;color:var(--cd-text-hi)}
/* ── 22 · UTILITIES ──────────────────────────────────────── */
.cd-glow-1{box-shadow:var(--cd-glow-1)} .cd-glow-2{box-shadow:var(--cd-glow-2)}
.cd-glow-3{box-shadow:var(--cd-glow-3)} .cd-glow-4{box-shadow:var(--cd-glow-4)}
.cd-r-sm{border-radius:var(--cd-r-sm)} .cd-r-md{border-radius:var(--cd-r-md)} .cd-r-lg{border-radius:var(--cd-r-lg)} .cd-r-xl{border-radius:var(--cd-r-xl)} .cd-r-full{border-radius:var(--cd-r-full)}
.cd-hide{display:none!important}
.cd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── 23 · ACCESSIBILITÀ & FALLBACK ───────────────────────── */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html{scroll-behavior:auto}
}
@media (prefers-reduced-transparency:reduce){
.cd-g1,.cd-g2,.cd-g3,.cd-g4,.cd-nav,.cd-btn--glass,.cd-modal::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
.cd-g1,.cd-g2{background:var(--cd-ink-700)} .cd-g3,.cd-g4{background:var(--cd-ink-600)}
.cd-orb{opacity:.16}
}
/* ── 24 · DRAWER — pannello laterale */
/* vh prima, dvh dopo: dove dvh non è supportato la dichiarazione cade e
resta quella sopra, invece di lasciare l'altezza al contenuto. */
.cd-drawer{border:0;padding:0;background:transparent;color:inherit;max-width:none;width:min(340px,86vw);height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin-block:0;margin-inline:auto 0;overflow:hidden}
.cd-drawer[open] .cd-drawer__panel{animation:cd-drawer-in var(--cd-t-mid) var(--cd-ease)}
.cd-drawer.is-closing .cd-drawer__panel{animation:cd-drawer-out var(--cd-t-out) var(--cd-ease-in) forwards}
.cd-drawer::backdrop{background:rgba(4,4,9,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cd-drawer__panel{height:100%;padding:var(--cd-s-6);display:flex;flex-direction:column;gap:var(--cd-s-2);
overflow:auto;overscroll-behavior:contain;border-radius:0;
border-width:0;border-inline-start:1px solid var(--cd-g4-brd);
box-shadow:inset 1px 0 0 rgba(255,255,255,.06),-30px 0 70px rgba(0,0,0,.5)}
@keyframes cd-drawer-in{from{transform:translateX(calc(36px * var(--cd-dir)));opacity:0}}
@keyframes cd-drawer-out{to{transform:translateX(calc(36px * var(--cd-dir)));opacity:0}}
/* Burger — compare sotto gli 860px, dove la nav nasconde i link */
.cd-burger{display:none;width:40px;height:40px;border-radius:var(--cd-r-full);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background var(--cd-t-fast) var(--cd-ease)}
.cd-burger:hover{background:rgba(255,255,255,.11)}
.cd-burger i{display:block;width:15px;height:1.6px;background:var(--cd-text-hi);border-radius:2px}
@media(max-width:860px){.cd-burger{display:inline-flex}}
/* ── 25 · SPOTLIGHT — alone che segue il puntatore (.cd-spot) */
.cd-spot{overflow:hidden}
.cd-spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--cd-t-mid) var(--cd-ease);background:radial-gradient(240px circle at var(--cd-mx,50%) var(--cd-my,50%),rgba(var(--cd-accent-rgb),.13),transparent 65%)}
.cd-spot:hover::after{opacity:1}
/* ── 26 · REVEAL — [data-cd-reveal] · [data-cd-stagger] ───── */
.cd-js [data-cd-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--cd-ease),transform .7s var(--cd-ease)}
.cd-js [data-cd-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--cd-ease),transform .6s var(--cd-ease)}
.cd-js [data-cd-reveal].is-in{opacity:1;transform:none}
.cd-js [data-cd-stagger].is-in>*{opacity:1;transform:none}
/* ── 27 · STAT — con contatore [data-cd-count] ────────────── */
.cd-stat{display:flex;flex-direction:column;gap:6px}
.cd-stat b{font-family:var(--cd-f-display);font-size:clamp(34px,4.5vw,52px);font-weight:200;letter-spacing:-.04em;color:var(--cd-text-hi);line-height:1;font-variant-numeric:tabular-nums}
.cd-stat span{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.13em;text-transform:uppercase;color:var(--cd-text-low)}
/* ── 28 · STEPPER — processi e timeline ───────────────────── */
.cd-steps{display:flex;flex-direction:column}
.cd-step{display:grid;grid-template-columns:30px 1fr;gap:var(--cd-s-4);padding-bottom:var(--cd-s-6);position:relative}
.cd-step::before{content:"";position:absolute;inset-inline-start:14px;top:32px;bottom:4px;width:1.6px;background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.04))}
.cd-step:last-child{padding-bottom:0}
.cd-step:last-child::before{display:none}
.cd-step__dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--cd-f-mono);font-size:var(--cd-size-2);color:var(--cd-text-low);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.cd-step.is-done .cd-step__dot{color:var(--cd-accent-ink);background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-500));border-color:transparent;box-shadow:var(--cd-glow-1)}
.cd-step.is-done::before{background:linear-gradient(rgba(var(--cd-accent-rgb),.5),rgba(var(--cd-accent-rgb),.1))}
.cd-step.is-now .cd-step__dot{color:var(--cd-accent-300);border-color:rgba(var(--cd-accent-rgb),.55);box-shadow:var(--cd-glow-2)}
.cd-step h3,.cd-step h4,.cd-step h5{font-size:var(--cd-size-6);font-family:var(--cd-f-body);font-weight:500;letter-spacing:0}
.cd-step p{font-size:var(--cd-size-5);color:var(--cd-text-low);margin-top:3px}
/* ── 29 · PRICING ─────────────────────────────────────────── */
.cd-plan{display:flex;flex-direction:column;gap:var(--cd-s-4);padding:var(--cd-s-6);border-radius:var(--cd-r-lg)}
.cd-plan--hot{border-color:rgba(var(--cd-accent-rgb),.4);box-shadow:var(--cd-rim-strong),var(--cd-cast-2),var(--cd-glow-2)}
.cd-plan__price{font-family:var(--cd-f-display);font-size:var(--cd-size-13);font-weight:200;letter-spacing:-.04em;color:var(--cd-text-hi);line-height:1}
.cd-plan__price small{font-family:var(--cd-f-mono);font-size:var(--cd-size-3);color:var(--cd-text-low);letter-spacing:.08em}
.cd-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--cd-size-5)}
.cd-plan li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cd-accent-500);box-shadow:0 0 8px var(--cd-accent-500);margin-inline-end:11px;vertical-align:3px}
/* ── 30 · GALLERY + LIGHTBOX ──────────────────────────────── */
.cd-gallery{display:flex;gap:var(--cd-s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--cd-s-2)}
.cd-gallery>*{flex:0 0 min(78%,420px);scroll-snap-align:start;border-radius:var(--cd-r-md);overflow:hidden;aspect-ratio:16/10;cursor:zoom-in;border:1px solid rgba(255,255,255,.1)}
.cd-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.cd-lightbox{border:0;background:transparent;padding:0;max-width:min(1100px,94vw);cursor:zoom-out;overflow:hidden}
.cd-lightbox::backdrop{background:rgba(4,4,9,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cd-lightbox img{width:100%;height:auto;border-radius:var(--cd-r-lg);box-shadow:var(--cd-cast-3)}
.cd-lightbox[open] img{animation:cd-modal-in var(--cd-t-mid) var(--cd-ease)}
.cd-lightbox.is-closing img{animation:cd-modal-out var(--cd-t-out) var(--cd-ease-in) forwards}
/* ── 31 · COMMAND PALETTE — ⌘K · Candela.palette() ────────── */
.cd-palette{border:0;padding:0;background:transparent;color:inherit;width:min(560px,92vw);margin-top:12vh;overflow:hidden}
.cd-palette[open] .cd-palette__panel{animation:cd-modal-in var(--cd-t-fast) var(--cd-ease)}
.cd-palette.is-closing .cd-palette__panel{animation:cd-modal-out var(--cd-t-out) var(--cd-ease-in) forwards}
.cd-palette::backdrop{background:rgba(4,4,9,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cd-palette__panel{border-radius:var(--cd-r-lg);overflow:hidden}
.cd-palette__input{width:100%;padding:16px 18px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.1);color:var(--cd-text-hi);font-size:var(--cd-size-6)}
/* Anello interno, non l'outline globale: il pannello è overflow:hidden e
l'input sta a filo del bordo, quindi outline-offset:3px verrebbe tagliato. */
.cd-palette__input:focus{outline:none}
.cd-palette__input:focus-visible{outline:2px solid var(--cd-focus);outline-offset:-2px}
.cd-palette__input::placeholder{color:var(--cd-text-low)}
.cd-palette__list{max-height:300px;overflow:auto;padding:8px}
.cd-palette__item{display:flex;align-items:center;gap:var(--cd-s-3);width:100%;text-align:start;padding:11px 13px;border-radius:var(--cd-r-xs);border:0;background:transparent;font-size:var(--cd-size-5);color:var(--cd-text-mid);transition:background var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease)}
.cd-palette__item .cd-kbd{margin-inline-start:auto}
.cd-palette__item:hover{background:rgba(255,255,255,.06);color:var(--cd-text-hi)}
.cd-palette__item.is-hot{background:rgba(var(--cd-cool-rgb),.12);color:var(--cd-cool-100)}
.cd-palette__empty{padding:18px 14px;font-size:var(--cd-size-4);color:var(--cd-text-low)}
/* ── 32 · EMPTY STATE ─────────────────────────────────────── */
.cd-empty{text-align:center;padding:var(--cd-s-8) var(--cd-s-5);border:1px dashed rgba(255,255,255,.14);border-radius:var(--cd-r-lg)}
.cd-empty__ico{width:52px;height:52px;margin:0 auto var(--cd-s-4);border-radius:50%;display:grid;place-items:center;background:rgba(var(--cd-accent-rgb),.1);border:1px solid rgba(var(--cd-accent-rgb),.3);box-shadow:var(--cd-glow-1);color:var(--cd-accent-300);font-size:var(--cd-size-10)}
.cd-empty h4{margin-bottom:6px}
.cd-empty p{font-size:var(--cd-size-5);color:var(--cd-text-low);max-width:38ch;margin-inline:auto}
/* ── 33 · PAGELINE — progresso di scorrimento ─────────────── */
.cd-pageline{position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;height:2px;z-index:var(--cd-z-pageline);pointer-events:none}
/* scaleX invece di width: la larghezza è layout, la trasformazione è
composita — la barra si aggiorna senza rientrare nel layout della pagina. */
.cd-pageline i{display:block;height:100%;width:100%;transform:scaleX(var(--cd-scroll,0));transform-origin:left;background:linear-gradient(90deg,var(--cd-accent-600),var(--cd-accent-300));box-shadow:var(--cd-glow-1)}
/* ── 34 · RIFINITURE ──────────────────────────────────────── */
h1,h2,h3,h4,h5{text-wrap:balance}
@media (prefers-reduced-motion:reduce){
.cd-js [data-cd-reveal],.cd-js [data-cd-stagger]>*{opacity:1!important;transform:none!important}
}
/* ── 35 · HERO + SOURCE — la firma: la sorgente dietro il vetro */
.cd-hero{position:relative;z-index:2;padding:var(--cd-s-9) 0 var(--cd-s-10);text-align:center}
.cd-source{position:relative;width:100%;height:260px;display:grid;place-items:center;margin-bottom:calc(var(--cd-s-7)*-1)}
.cd-source__core{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 42% 36%,var(--cd-accent-100),var(--cd-accent-500) 44%,var(--cd-accent-600) 70%,var(--cd-accent-800));box-shadow:var(--cd-glow-4),0 0 200px 36px rgba(var(--cd-accent-rgb),.22);animation:cd-pulse 5.5s ease-in-out infinite}
.cd-source__pane{position:absolute;bottom:6px;width:min(540px,86%);height:104px;border-radius:var(--cd-r-lg);display:grid;place-items:center}
@keyframes cd-pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.045);filter:brightness(1.12)}}
/* ── 36 · FOOTER ──────────────────────────────────────────── */
/* ── FOOTER ───────────────────────────────────────────────────
La fine della pagina è l'ultima sorgente di luce: un bagliore
basso che sale dal bordo, non un blocco spento. Il filo in alto
fa da taglio fra il contenuto e la chiusura. */
.cd-footer{position:relative;z-index:2;margin-top:var(--cd-s-9);
padding:var(--cd-s-9) 0 calc(var(--cd-s-6) + 52px);overflow:hidden;isolation:isolate}
.cd-footer::before{content:"";position:absolute;left:50%;bottom:-46%;translate:-50% 0;
width:min(1100px,130%);aspect-ratio:2/1;pointer-events:none;z-index:-1;
background:radial-gradient(ellipse at center,rgba(var(--cd-accent-rgb),.2),transparent 60%);
filter:blur(26px)}
/* Un secondo alone freddo, più largo e più basso: dà profondità al fondo */
.cd-footer .cd-footer__base::after{content:"";position:absolute;left:50%;bottom:-140px;translate:-50% 0;
width:min(760px,90%);height:220px;pointer-events:none;z-index:-1;border-radius:50%;
background:radial-gradient(ellipse at center,rgba(var(--cd-cool-rgb),.1),transparent 65%);filter:blur(34px)}
.cd-footer__base{position:relative}
.cd-footer::after{content:"";position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(var(--cd-accent-rgb),.45) 28%,rgba(var(--cd-cool-rgb),.3) 68%,transparent)}
/* Marchio sovradimensionato che affiora dal fondo, tagliato dal bordo */
.cd-footer__mark{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:-.34em;pointer-events:none;user-select:none;z-index:-1;
font-family:var(--cd-f-display);font-weight:200;font-size:clamp(72px,16vw,210px);line-height:.8;
text-align:center;letter-spacing:-.045em;
background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 68%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-footer__top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:var(--cd-s-7) var(--cd-s-6)}
@media(max-width:900px){.cd-footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cd-footer__top{grid-template-columns:1fr 1fr;gap:var(--cd-s-6) var(--cd-s-5)}
.cd-footer__brand{grid-column:1/-1}}
.cd-footer__brand{display:flex;flex-direction:column;gap:var(--cd-s-3);max-width:40ch}
.cd-footer__name{font-family:var(--cd-f-display);font-size:var(--cd-size-10);letter-spacing:-.02em;color:var(--cd-text-hi)}
.cd-footer__claim{font-size:var(--cd-size-5);line-height:1.65;color:var(--cd-text-low)}
.cd-footer__col{display:flex;flex-direction:column;align-items:flex-start}
/* Intestazione di colonna: ristretta a .cd-footer__col e a .cd-footer__title.
Non `.cd-footer h3,h4,h5`, che colpiva anche il titolo del blocco d'invito
riducendolo a un'etichetta da 10px, più piccola del paragrafo sotto. */
.cd-footer__col h3,.cd-footer__col h4,.cd-footer__col h5,.cd-footer__title{
font-family:var(--cd-f-mono);font-size:var(--cd-size-1);font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--cd-text-low);margin-bottom:var(--cd-s-4)}
/* Il collegamento di TESTO si accende e si sottolinea da sinistra. I
collegamenti che portano un'icona sono esclusi: `[data-cd-social]` e'
esattamente il modo in cui il sistema dice "qui dentro c'e' un segno,
non delle parole", e una sottolineatura che cresce sotto un disco non
vuol dire niente.
L'esclusione non e' cosmetica. Senza, questa regola vale 0,2,1 e batte
`.cd-footer__social a` (0,1,1) su `display` e `padding`: i bottoni
social restavano `inline-block` con `padding:5px 0` invece che griglia
centrata, e l'icona dentro si allineava alla linea di base. In mono
stava 3,5px troppo in alto e non si notava; a colori il badge da 36
traboccava di 5px dal suo collegamento, scoprendo in cima una falce
del cerchio sottostante — che in hover si accendeva per conto suo, ed
e' l'ombra "storta" che si vedeva. Difetto presente dalla 11.0, emerso
solo quando il badge ha riempito il bottone. */
.cd-footer a:not(.cd-btn,[data-cd-social]){position:relative;display:inline-block;color:var(--cd-text-mid);font-size:var(--cd-size-5);padding:5px 0;
transition:color var(--cd-t-fast) var(--cd-ease)}
.cd-footer a:not(.cd-btn,[data-cd-social])::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:3px;height:1px;
background:currentColor;opacity:.45;transform:scaleX(0);transform-origin:left;
transition:transform .32s var(--cd-ease)}
.cd-footer a:not(.cd-btn,[data-cd-social]):hover,.cd-footer a:not(.cd-btn,[data-cd-social]):focus-visible{color:var(--cd-text-hi)}
.cd-footer a:not(.cd-btn,[data-cd-social]):hover::after,.cd-footer a:not(.cd-btn,[data-cd-social]):focus-visible::after{transform:scaleX(1)}
/* Blocco d'invito: una sola azione calda, in fondo */
.cd-footer__cta{margin-top:var(--cd-s-8);padding:var(--cd-s-6);border-radius:var(--cd-r-lg);
display:flex;align-items:center;justify-content:space-between;gap:var(--cd-s-5);flex-wrap:wrap}
.cd-footer__cta p{max-width:46ch;font-size:var(--cd-size-5);color:var(--cd-text-low);margin-top:6px}
.cd-footer__base{margin-top:var(--cd-s-8);padding-top:var(--cd-s-5);border-top:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;justify-content:space-between;gap:var(--cd-s-4);flex-wrap:wrap;
font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.08em;color:var(--cd-text-low)}
.cd-footer__base a{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.08em}
.cd-footer__legal{display:flex;gap:var(--cd-s-4);flex-wrap:wrap}
.cd-footer__social{display:flex;gap:8px}
.cd-footer__social a{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;
color:var(--cd-text-mid);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
transition:color var(--cd-t-fast) var(--cd-ease),border-color var(--cd-t-fast) var(--cd-ease),
background var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
/* Guardia per un collegamento senza `data-cd-social` messo nella fila:
quello la sottolineatura ce l'ha ancora, e qui non la vogliamo. */
.cd-footer__social a::after{display:none}
.cd-footer__social a:hover{color:var(--cd-accent-300);border-color:rgba(var(--cd-accent-rgb),.45);
background:rgba(var(--cd-accent-rgb),.08);box-shadow:var(--cd-glow-1)}
/* Qui c'era una regola `.cd-footer__social svg{…}` che dettava misura,
riempimento e tratto a QUALUNQUE svg del footer. Era il difetto contro
cui mette in guardia la regola 10 del sistema: un selettore largo che
scavalca il componente. Vale 0,3,0 col `:not` con cui la 11.1 l'aveva
toppata, e teneva i contatti a 17px anche a colori accesi, dove il
badge deve prendersi i 36 del bottone. Non serve piu': `.cd-ico` e
`.cd-marchio` dichiarano da se' misura, riempimento e tratto, e la
misura del footer arriva dalle variabili qui sotto (sezione 62).
Nessuna regola: e' voluto. */
/* Variante essenziale: una riga sola, per siti piccoli */
.cd-footer--slim{padding:var(--cd-s-7) 0 var(--cd-s-6)}
.cd-footer--slim .cd-footer__base{margin-top:0;padding-top:0;border-top:0}
@media(max-width:520px){
.cd-footer__base{flex-direction:column;align-items:flex-start;gap:var(--cd-s-4)}
.cd-footer__cta{flex-direction:column;align-items:flex-start}
}
@media (forced-colors:active){
.cd-footer::before,.cd-footer__mark{display:none}
.cd-footer::after{background:CanvasText}
}
/* ── 37 · MARQUEE — striscia loghi/parole; duplica il contenuto per il loop */
.cd-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cd-marquee__track{display:flex;gap:var(--cd-s-8);width:max-content;animation:cd-marquee 26s linear infinite}
.cd-marquee:hover .cd-marquee__track{animation-play-state:paused}
/* Il testo del marquee sta un gradino piu' su della scala tenue, e non e'
una scelta estetica: e' l'unico punto del sistema che passa DAVANTI a un
orb, cioe' sopra la parte piu' chiara dell'atmosfera. Misurato sui pixel
con `npm run contrast`: con --cd-text-low faceva 4,05:1 contro una soglia
di 4,5. Il fondo li' non e' l'inchiostro della pagina, e' la sorgente —
dedurlo dal CSS avrebbe dato una risposta sbagliata. */
.cd-marquee__track>*{font-family:var(--cd-f-mono);font-size:var(--cd-size-4);letter-spacing:.22em;text-transform:uppercase;color:var(--cd-text-mid);white-space:nowrap}
@keyframes cd-marquee{to{transform:translateX(calc(-50% * var(--cd-dir)))}}
/* ── 38 · QUOTE / TESTIMONIAL ─────────────────────────────── */
.cd-quote{border-radius:var(--cd-r-lg);padding:var(--cd-s-6);display:flex;flex-direction:column;gap:var(--cd-s-4)}
.cd-quote blockquote{margin:0;font-size:var(--cd-size-8);line-height:1.6;font-weight:300;color:var(--cd-text-hi)}
.cd-quote blockquote::before{content:"\201C";display:block;font-family:var(--cd-f-display);font-size:var(--cd-size-13);line-height:.6;color:var(--cd-accent-500);margin-bottom:10px;text-shadow:0 0 18px rgba(var(--cd-accent-rgb),.5)}
.cd-quote footer{display:flex;align-items:center;gap:var(--cd-s-3);font-size:var(--cd-size-4);color:var(--cd-text-low)}
/* ── 39 · COOKIE — [data-cd-cookie="chiave"] + bottoni accept/decline */
.cd-cookie{border-radius:var(--cd-r-lg);padding:var(--cd-s-5);display:flex;gap:var(--cd-s-4);align-items:center;flex-wrap:wrap}
.cd-cookie p{flex:1 1 260px;font-size:var(--cd-size-4);color:var(--cd-text-mid)}
/* Accetta e rifiuta portano la STESSA classe. Fino alla 11.1 erano
`--primary` (gradiente d'accent piu' --cd-glow-2) contro `--ghost`
(trasparente): un bottone acceso contro un'etichetta. E' il rilievo
piu' ricorrente dell'applicazione europea sui cookie, ed era anche
una violazione della regola 3 di questo sistema — l'accent e' del
prodotto, e «accetta i cookie» non e' il prodotto.
Il banner e' gia' vetro (cd-g3) e `--glass` porta il proprio blur:
sarebbe vetro dentro vetro. Rinuncia allo sfocato e tiene il fondo,
come fa la pillola sotto il pannello del menu (sezione 55). */
.cd-cookie .cd-btn--glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.09)}
.cd-cookie .cd-btn--glass:hover{background:rgba(255,255,255,.14)}
/* Il link all'informativa e' SOTTOLINEATO, e non e' una scelta di gusto:
il sistema toglie la sottolineatura a tutti i collegamenti (riga 194) e
li distingue col colore freddo, ma qui il testo attorno e' --cd-text-mid
e il freddo ci sta accanto a 1,21:1 — sotto il 3:1 che serve quando il
colore e' l'unica differenza. Dentro un blocco di testo la sottolineatura
e' la seconda differenza. (Trovato da npm run audit: due violazioni
serious comparse nello stesso momento in cui il link e' stato aggiunto.) */
.cd-cookie a{color:var(--cd-cool-300);text-decoration:underline;text-underline-offset:2px}
/* Il banner fisso parte NASCOSTO e lo accende il JS. E' il contrario di
prima ed e' l'unico modo di non farlo lampeggiare: con `defer` lo script
gira a parsing finito, e alle visite di ritorno il banner faceva in tempo
a essere dipinto prima di sparire. Nascosto di default non c'e' niente da
togliere — c'e' qualcosa che entra.
Senza JS non compare mai, ed e' corretto: senza JS non parte nemmeno una
delle risorse che dovrebbe bloccare (le src sono `data-cd-src`, gli script
sono `text/plain`, la miniatura remota non viene scritta). Non c'e' niente
da chiedere.
`visibility` oltre a `opacity`: opacita' e pointer-events non tolgono
nulla dall'ordine di tabulazione — la sezione 40 lo aveva gia' imparato
sul torna-su. */
.cd-cookie--fix{position:fixed;inset-inline-start:var(--cd-s-4);bottom:var(--cd-s-4);z-index:var(--cd-z-cookie);
max-width:min(560px,calc(100vw - 32px));box-shadow:var(--cd-rim-strong),var(--cd-cast-3);
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
transition:opacity var(--cd-t-mid) var(--cd-ease),transform var(--cd-t-mid) var(--cd-ease),visibility 0s linear var(--cd-t-mid)}
.cd-cookie--fix.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
transition:opacity var(--cd-t-mid) var(--cd-ease),transform var(--cd-t-mid) var(--cd-ease),visibility 0s}
/* Il pannello delle preferenze vive dentro .cd-modal__panel, quindi niente
vetro proprio. Le righe: testo a sinistra, interruttore a destra, e sulla
riga «Necessari» un cd-tag invece di un interruttore disabilitato — un
interruttore che non si puo' spostare e' una bugia con un'animazione, e
per giunta un controllo `disabled` esce dalla tabulazione senza dire
perche'. */
.cd-cookie__cats{list-style:none;margin:var(--cd-s-5) 0;padding:0;display:flex;flex-direction:column;gap:var(--cd-s-2)}
.cd-cookie__cat{display:flex;align-items:flex-start;gap:var(--cd-s-4);padding:var(--cd-s-3) var(--cd-s-4);
border-radius:var(--cd-r-sm);border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.cd-cookie__cat-txt{flex:1 1 200px;cursor:pointer}
.cd-cookie__cat>.cd-switch,.cd-cookie__cat>.cd-tag{margin-inline-start:auto;flex:none;margin-top:2px}
.cd-cookie__nome{display:block;font-size:var(--cd-size-6);font-weight:500;color:var(--cd-text-hi)}
.cd-cookie__desc{display:block;font-size:var(--cd-size-4);color:var(--cd-text-low);margin-top:3px}
@media(max-width:420px){
.cd-cookie__cat{flex-wrap:wrap}
.cd-cookie__cat>.cd-switch,.cd-cookie__cat>.cd-tag{margin-inline-start:0}
}
/* Un banner IN LINEA (senza --fix) non ha un'animazione d'ingresso: o c'e'
o non c'e'. Vale comunque la regola dell'anti-lampeggio — parte nascosto
e lo accende il JS — altrimenti alle visite di ritorno resterebbe a
schermo per sempre, perche' dalla 12.0 il modulo governa `is-on` e non
piu' `is-hidden`. Solo dove c'e' `data-cd-cookie`: le dimostrazioni
statiche dello specimen sono banner finti e devono restare visibili. */
.cd-cookie[data-cd-cookie]:not(.cd-cookie--fix):not(.is-on){display:none}
/* La 11.1 nascondeva il banner con questa classe: resta valida. */
.cd-cookie.is-hidden{display:none}
/* ── 40 · BACK TO TOP — [data-cd-top]; appare dopo 600px ──── */
/* Il torna-su e' invisibile finche' non si scorre, ma restava nell'ordine
di tabulazione: un bottone fantasma su ogni pagina che lo usa. */
.cd-top{position:fixed;inset-inline-end:calc(var(--cd-s-4) + var(--cd-gap-fix));bottom:var(--cd-s-4);z-index:var(--cd-z-top);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--cd-text-hi);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--cd-rim),var(--cd-cast-1);opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity var(--cd-t-mid) var(--cd-ease),visibility 0s linear var(--cd-t-mid),transform var(--cd-t-mid) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
.cd-top.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition:opacity var(--cd-t-mid) var(--cd-ease),visibility 0s,transform var(--cd-t-mid) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
.cd-top:hover{box-shadow:var(--cd-rim),var(--cd-glow-2)}
/* ── 41 · SKIP LINK — primo elemento del body ─────────────── */
.cd-skip{position:fixed;top:10px;inset-inline-start:10px;z-index:var(--cd-z-skip);transform:translateY(-200%);padding:10px 18px;border-radius:var(--cd-r-full);background:var(--cd-ink-600);border:1px solid rgba(var(--cd-cool-rgb),.5);color:var(--cd-text-hi);font-size:var(--cd-size-4);transition:transform var(--cd-t-fast) var(--cd-ease)}
.cd-skip:focus-visible{transform:none;outline:none;box-shadow:var(--cd-focus-velo)}
/* ── 42 · MODALITÀ — densità e profondità dell'inchiostro ─── */
[data-density="compact"]{--cd-s-4:12px;--cd-s-5:20px;--cd-s-6:24px;--cd-s-7:36px;--cd-s-8:48px;--cd-s-9:72px;--cd-s-10:104px;
/* Il testo di interfaccia scende di un gradino, i titoli e il display no:
un pannello denso perde spazio, non gerarchia. Prima questa modalità
rimappava solo i margini e il testo restava dov'era. */
--cd-size-4:12px; --cd-size-5:13px; --cd-size-6:14px; --cd-size-7:15px; --cd-size-8:16px}
[data-density="compact"] body{font-size:var(--cd-size-6)}
[data-ink="abisso"]{--cd-ink-950:#010104;--cd-ink-900:#030308;--cd-ink-800:#07070E;--cd-ink-700:#0C0C15;--cd-ink-600:#12121E}
/* ── 43 · VALIDAZIONE NATIVA — :user-invalid, zero JS ─────── */
.cd-input:user-invalid,.cd-select:user-invalid,.cd-textarea:user-invalid,
.cd-input[aria-invalid="true"],.cd-select[aria-invalid="true"],.cd-textarea[aria-invalid="true"]{
--cd-glow-rgb:var(--cd-bad-rgb);border-color:rgba(var(--cd-bad-rgb),.6);box-shadow:var(--cd-glow-2)}
.cd-field:has(:user-invalid) .cd-hint{color:var(--cd-bad)}
.cd-input:user-valid{border-color:rgba(var(--cd-ok-rgb),.45)}
/* Riserva per chi non ha :user-invalid: il ramo aria-invalid sopra vale
ovunque, basta che la validazione di progetto lo imposti. Nessun ramo
:invalid, che colorerebbe di rosso i campi vuoti prima di toccarli. */
/* ── 44 · SCROLLSPY + SCROLL LOCK ─────────────────────────── */
[data-cd-spy] a.is-active{color:var(--cd-text-hi);background:rgba(var(--cd-accent-rgb),.10);box-shadow:inset 2px 0 0 var(--cd-accent-500)}
/* Il blocco dello scorrimento passa dalla classe che il JS commuta: lo stato
è già noto (l'array `stack` del gestore overlay) e la classe funziona
ovunque. Il ramo :has resta come riserva dichiarativa per il caso senza JS,
in una regola separata così un :has non supportato non porta via l'altra. */
html.cd-modal-locked{overflow:hidden;--cd-gap-fix:var(--cd-sbw)}
html:has(dialog:modal){overflow:hidden;--cd-gap-fix:var(--cd-sbw)}
/* ── 45 · GRAFICI — SVG senza dipendenze, via data-attribute ──
data-cd-spark="1,4,2,8" data-cd-bars="3,7,5" data-cd-ring="72"
Temperatura: default accent · --cool · --ok · --bad */
.cd-chart{display:block;color:var(--cd-accent-500)}
.cd-chart--cool{color:var(--cd-cool-500)}
.cd-chart--ok{color:var(--cd-ok)}
.cd-chart--bad{color:var(--cd-bad)}
.cd-chart{position:relative}
.cd-chart--spark{height:44px}
.cd-chart--bars{height:44px}
.cd-chart--ring{width:78px;height:78px}
.cd-chart svg{display:block;width:100%;height:100%;overflow:visible}
.cd-chart--glow svg{filter:drop-shadow(0 0 7px color-mix(in srgb,currentColor 55%,transparent))}
.cd-chart__val{fill:var(--cd-text-hi);font:500 12px var(--cd-f-mono)}
/* La rivelazione della linea usa clip-path, non stroke-dasharray: con
preserveAspectRatio=none + non-scaling-stroke il dash spezza il tratto. */
.cd-js .cd-chart--spark svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--cd-ease) .1s}
.cd-js .cd-chart--spark.is-in svg{clip-path:inset(0 0 0 0)}
.cd-chart__dot{position:absolute;width:7px;height:7px;border-radius:50%;background:currentColor;
box-shadow:0 0 9px 1px currentColor;transform:translate(50%,-50%);pointer-events:none}
.cd-js .cd-chart__dot{opacity:0;transition:opacity .45s var(--cd-ease) .85s}
.cd-js .cd-chart--spark.is-in .cd-chart__dot{opacity:1}
.cd-js .cd-chart__bar{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform .6s var(--cd-ease)}
.cd-js .cd-chart.is-in .cd-chart__bar{transform:none}
.cd-js .cd-chart__ring{stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--cd-ease) .1s}
.cd-js .cd-chart.is-in .cd-chart__ring{stroke-dashoffset:calc(100 - var(--v,0))}
.cd-num{font-variant-numeric:tabular-nums;text-align:end}
/* ── 46 · APP SHELL — sidebar + topbar per CRM e pannelli ───── */
/* ════════════════════════════════════════════════════════════
CATALOGO — la lista e la mappa, e chi delle due si vede
Un catalogo con una mappa ha due forme, e la larghezza decide quale:
· sotto la soglia UNA ALLA VOLTA. Lista o mappa, mai mezze e mezze:
su un telefono una mappa alta 200 px non e' una mappa, e una lista
larga 160 non e' una lista. Chi commuta e' il selettore nel rail.
· sopra la soglia CONVIVONO, lista a sinistra e mappa a destra. Qui
il selettore non serve — le due viste ci sono tutte e due — e
infatti sparisce; al suo posto, dentro la mappa, il tasto che la
allarga a tutta pagina e la restringe.
LA SOGLIA E' SCRITTA UNA VOLTA. Il foglio e' mobile-first: la forma a
una vista e' la base, e la seconda sta tutta dentro un solo
`@media (min-width:1100px)`. Due media query — una `max` e una `min` —
sarebbero due numeri da tenere allineati a mano, e alla prima
modifica ne resterebbe indietro uno: fra 1100 e 1101 non si vedrebbe
piu' niente, o si vedrebbe tutto due volte. Non e' un'ipotesi: e' la
forma di difetto che questo progetto ha corretto quattro volte.
La modalita' la scrive il framework sul `` (`cd-modo-griglia`,
`cd-modo-mappa`), perche' chi deve leggerla e' il layout — che sta
dall'altra parte del documento rispetto al menu. */
.cd-catalogo{display:grid;gap:var(--cd-s-5);align-items:start}
/* Sotto la soglia si vede una vista sola. La regola nomina la classe sul
``, non uno stato del catalogo: la modalita' e' del documento, e
due cataloghi nella stessa pagina direbbero la stessa cosa. */
.cd-modo-mappa .cd-catalogo__lista,
.cd-modo-griglia .cd-catalogo__mappa{display:none}
/* ── MODALITA' MAPPA: A TUTTO SCHERMO, A OGNI LARGHEZZA ──────
La mappa esce dal flusso e prende il viewport. Non e' un overlay e non
fa finta di esserlo: e' una vista della pagina, scelta dal selettore.
`--cd-z-nav` e non un livello alto: sopra il contenuto e SOTTO la
pillola, che deve restare l'unica cosa raggiungibile — il tasto Menu,
la lente e il selettore. Sotto anche il banner del consenso, e di
proposito: coprirlo vorrebbe dire che chi non ha ancora acconsentito
non puo' piu' farlo, cioe' una mappa che non mostrera' mai una tile.
Nascondere un comando legale per fare spazio a cio' che quel comando
sblocca e' un cerchio che non si chiude.
Gli angoli vanno a zero: una cornice arrotondata su una vista che
copre lo schermo lascia quattro spicchi di pagina agli angoli, ed e'
l'unico posto da cui si vedrebbe che sotto c'e' dell'altro. */
.cd-modo-mappa .cd-catalogo__mappa{
position:fixed;inset:0;z-index:var(--cd-z-nav);height:auto;margin:0}
.cd-modo-mappa .cd-catalogo__mappa .cd-mappa{
height:100%;border-radius:0;border:0}
/* IL FISSO NON ESCE DAL CONTESTO DI CHI LO CONTIENE, e questa e' la riga
che lo ricorda. La mappa a tutto schermo e' `position:fixed` con
`z-index:var(--cd-z-nav)`, cioe' 60 — ma sta dentro `main.cd-wrap`, che
e' `position:relative;z-index:2` e quindi apre un contesto di
impilamento suo. Dentro quel contesto il 60 vale, fuori no: per il
resto della pagina quella mappa e' un elemento a z 2, e `.cd-footer` —
anche lui z 2, ma DOPO nel documento — le passava sopra.
Si vedeva: il footer di Maximus in trasparenza sopra la mappa a tutto
schermo. E si poteva CLICCARE: `elementFromPoint` a meta' schermo
rispondeva `footer.cd-footer`, e in un punto perfino un ``. Cioe'
dei link raggiungibili sopra una mappa che li copriva.
Il rimedio non e' alzare la mappa — dentro il suo contesto e' gia' in
cima — ma alzare IL CONTESTO. Il contenitore che porta il catalogo sale
allo stesso livello che la mappa chiedeva, e la pillola (130) e il
banner del consenso (115) restano sopra come devono. */
html.cd-modo-mappa .cd-wrap:has(.cd-catalogo),
html.cd-modo-mappa .cd-sec:has(.cd-catalogo){z-index:var(--cd-z-nav)}
/* Il corpo non scorre mentre la mappa e' a tutto schermo, con la stessa
riga con cui non scorre sotto il menu aperto: `--cd-gap-fix` rimette i
pixel della barra di scorrimento sparita, o la pillola scatterebbe di
lato nell'istante del passaggio. La regola nomina il catalogo perche'
la modalita' vive sul anche dove un catalogo non c'e'. */
html.cd-modo-mappa:has(.cd-catalogo){overflow:hidden;--cd-gap-fix:var(--cd-sbw)}
/* «Torna su» in una vista che non scorre e' un comando che non fa niente. */
html.cd-modo-mappa:has(.cd-catalogo) .cd-top{opacity:0;visibility:hidden;pointer-events:none}
/* ── La mappa ───────────────────────────────────────────────
La scatola e' il sistema di riferimento di tutto quel che c'e' dentro:
`position:relative` una volta qui, e pillole, tile e comandi si
posizionano rispetto a lei invece che rispetto alla pagina.
`touch-action:none` SOLO sulla tela: senza, il dito che trascina la
mappa scorre la pagina; messo piu' in alto, la pagina non si
scorrerebbe piu' nemmeno accanto alla mappa. */
.cd-mappa{position:relative;overflow:hidden;touch-action:none;
/* Trascinare la mappa non deve selezionare il documento: senza questa
riga il gesto del pan lasciava la mappa evidenziata, e la selezione
rimasta faceva partire un trascinamento nativo al gesto dopo. */
user-select:none;-webkit-user-select:none;
min-height:320px;border-radius:var(--cd-r-md);
border:1px solid var(--cd-g1-brd);background:var(--cd-ink-950);
cursor:grab}
.cd-mappa.is-trascino{cursor:grabbing}
/* Lo sfondo senza consenso: due sorgenti calde spente in lontananza e una
griglia che si muove col trascinamento. Non e' una carta e non finge di
esserlo — dice «mappa» e mostra le distanze, che e' quel che serve
finche' le tile non arrivano. */
.cd-mappa__sfondo{position:absolute;inset:0;
background-image:
radial-gradient(60% 50% at 22% 18%, rgba(var(--cd-accent-rgb),.10), transparent 70%),
radial-gradient(50% 60% at 78% 72%, rgba(var(--cd-cool-rgb),.10), transparent 70%),
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size:100% 100%,100% 100%,80px 80px,80px 80px}
/* Con le tile accese il disegno se ne va e sotto resta un grigio chiaro,
non il nero della scatola: una tile che arriva su un fondo nero fa
lampeggiare il riquadro a ogni trascinamento, e con la mappa di giorno
quel lampo e' un buco. Il grigio e' vicino al fondo di OSM, cosi' il
pieno e il vuoto si somigliano. */
.cd-mappa.is-tile{background:#e8e4dd}
.cd-mappa.is-tile .cd-mappa__sfondo{opacity:0}
.cd-mappa__tile{position:absolute;inset:0}
.cd-mappa__tile img{position:absolute;top:0;inset-inline-start:0;
-webkit-user-drag:none;
transform-origin:0 0;pointer-events:none}
/* LE TILE SI VEDONO COM'E' LA MAPPA, cioe' di giorno. Qui c'era un
`grayscale(.55) brightness(.62)` messo perche' una mappa chiara dentro
un sistema scuro stona: il risultato pero' non era "una mappa
ammorbidita", era una mappa NOTTURNA — e OpenStreetMap una versione
notturna non ce l'ha, quindi mostravamo una cosa che non esiste.
Le pillole hanno un guscio scuro proprio e sul chiaro si leggono
meglio di prima, non peggio: era il filtro a togliere contrasto, non
a darne. */
.cd-mappa__pin{position:absolute;inset:0}
/* Il filo del ventaglio: dice da dove viene una pillola che si e' appena
staccata dal suo gruppo. `transform-origin` a sinistra perche' la
rotazione deve avvenire attorno al centro del gruppo, non attorno al
centro del filo. */
.cd-mappa__filo{position:absolute;top:0;inset-inline-start:0;height:1px;
transform-origin:0 50%;pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.12))}
/* Una pillola aperta a ventaglio e' la stessa pillola, con un anello che
la lega alle sorelle. */
.cd-mappa__prezzo.is-aperta:not(:hover):not(.is-evidenziata){
box-shadow:var(--cd-cast-2),0 0 0 1px rgba(var(--cd-accent-rgb),.35)}
/* I figli del contenitore delle pillole sono posizionati col transform, e
il transform ha bisogno di un punto da cui partire. */
.cd-mappa__prezzo,.cd-mappa__gruppo{position:absolute;top:0;inset-inline-start:0;
white-space:nowrap;cursor:pointer;
font-family:var(--cd-f-mono);font-size:var(--cd-size-3);letter-spacing:-.01em;
border-radius:var(--cd-r-full);
transition:background var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease),
box-shadow var(--cd-t-fast) var(--cd-ease),border-color var(--cd-t-fast) var(--cd-ease)}
.cd-mappa__prezzo{padding:5px 11px;
color:var(--cd-text-hi);background:rgba(13,13,24,.86);
border:1px solid rgba(255,255,255,.18);box-shadow:var(--cd-cast-2);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cd-mappa__prezzo:hover,.cd-mappa__prezzo.is-evidenziata{
color:var(--cd-accent-ink);
background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-600));
border-color:transparent;box-shadow:var(--cd-glow-2);
/* Chi si evidenzia sale sopra le altre: una pillola accesa mezza
coperta da una spenta e' peggio di nessuna evidenziazione. */
z-index:2}
.cd-mappa__prezzo:focus-visible,.cd-mappa__gruppo:focus-visible{
outline:2px solid var(--cd-focus);outline-offset:2px;z-index:3}
.cd-mappa__gruppo{display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;
color:var(--cd-accent-ink);font-size:var(--cd-size-5);
background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-600));
border:0;box-shadow:var(--cd-glow-2)}
.cd-mappa__gruppo:hover{box-shadow:var(--cd-glow-3)}
/* ── LA PRESSIONE SI ACCENDE, NON SI MUOVE ──────────────────
QUI NON SI PUO' SCRIVERE UN TRANSFORM, E IL MOTIVO VALE PER TUTTI I
SEGNI DELLA MAPPA. Stanno a `top:0;inset-inline-start:0` e vanno in
posizione SOLO con il `transform` che il JS scrive in linea: il loro
`transform-origin` e' percio' il centro della scatola FERMA, cioe'
l'angolo di `.cd-mappa__pin`, non il centro di dove il segno si vede. E
le proprieta' autonome — `scale`, `translate`, `rotate` — si compongono
PRIMA di `transform`, quindi agiscono sul risultato e rimpiccioliscono
l'intera distanza dall'angolo.
La 12.12 aveva messo qui `scale:.92`. Misurato: un gruppo a (400,500)
saltava a (370,462), cioe' 38 px in su e 30 a sinistra; a (900,820)
sessantaquattro. Il segno e' un cerchio di 38 px, quindi finiva
completamente fuori da sotto il cursore — il rilascio cadeva su un
altro elemento e **l'evento `click` non nasceva mai**. Cliccare un
gruppo non faceva niente, e il salto in alto ERA il motivo per cui non
faceva niente: una causa sola per tutti e due i sintomi.
Era anche contro la regola 4 del sistema — «hover = accensione, non
movimento» — prima ancora di essere rotta. La pressione spegne il
bagliore invece di spostare il segno: passandoci sopra sale a `glow-3`,
premendolo scende a `glow-1`. Si legge come premuto, non tocca un
pixel di geometria, e non introduce nessun valore nuovo. */
.cd-mappa__gruppo:active{box-shadow:var(--cd-glow-1)}
.cd-mappa__zoom{position:absolute;z-index:2;inset-block-end:var(--cd-s-3);inset-inline-end:var(--cd-s-3);
display:flex;flex-direction:column;gap:1px;border-radius:var(--cd-r-sm);overflow:hidden}
.cd-mappa__zoom button{width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
/* Stanno DENTRO la mappa, sopra le tile: sono il caso peggiore di tutti
e nessuno se n'era accorto perche' non compaiono nella fotografia da
cui e' partita questa versione. Misurati sopra il bianco puro prima
della correzione: 1,00:1 — il segno e il fondo erano letteralmente lo
stesso pixel. Col solo pavimento e il grigio di prima si fermavano a
4,19:1, sotto la soglia: il bianco qui non e' una scelta estetica. */
font-size:var(--cd-size-9);line-height:1;color:var(--cd-text-hi);
border:1px solid var(--cd-g3-brd);background:linear-gradient(var(--cd-g3-bg),var(--cd-g3-bg)),var(--cd-lastra);
-webkit-backdrop-filter:blur(var(--cd-g3-blur));backdrop-filter:blur(var(--cd-g3-blur))}
.cd-mappa__zoom button:hover{background:linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.11)),var(--cd-lastra)}
/* L'attribuzione non e' un vezzo: chi fornisce le tile la pretende, ed e'
la ragione per cui la disegna il componente e non la pagina — una pagina
che se la dimentica mette il sito fuori licenza senza saperlo. */
.cd-mappa__attr{position:absolute;z-index:2;inset-block-end:0;inset-inline-start:0;
padding:3px 8px;border-start-end-radius:var(--cd-r-xs);
font-size:var(--cd-size-1);color:var(--cd-text-low);background:rgba(4,4,9,.6);
pointer-events:none}
.cd-mappa__attr:empty{display:none}
/* La scheda che la mappa sta indicando. `outline` e non `border`: un bordo
sposterebbe il contenuto di un pixel e la lista tremerebbe a ogni
passaggio del cursore. */
.cd-card.is-evidenziata{outline:2px solid rgba(var(--cd-accent-rgb),.65);outline-offset:2px;
box-shadow:var(--cd-glow-2)}
@media (min-width:1100px){
.cd-catalogo{grid-template-columns:minmax(0,1fr) minmax(420px,44%)}
/* Affiancata, la mappa riempie la sua colonna in altezza. */
.cd-catalogo__mappa .cd-mappa{height:100%}
/* Sopra la soglia `griglia` non nasconde piu' la mappa: convivono, ed
e' la vista divisa. `mappa` invece continua a togliere la lista —
li' la mappa e' a tutto schermo e la lista non avrebbe dove stare. */
.cd-modo-griglia .cd-catalogo__mappa{display:block}
/* La mappa resta in vista mentre si scorre la lista: e' l'unico motivo
per cui affiancarle serve a qualcosa. */
.cd-catalogo__mappa{position:sticky;top:var(--cd-s-5);
height:calc(100vh - var(--cd-s-7));height:calc(100dvh - var(--cd-s-7))}
/* Il selettore resta anche qui, e comanda: `griglia` e' la vista
divisa — lista e mappa affiancate — e `mappa` porta la mappa a tutto
schermo, come sul telefono. Un comando solo, uguale a ogni larghezza,
invece di un selettore sotto la soglia e un tasto dentro la mappa
sopra: erano due strade per lo stesso posto, e due stati da tenere
allineati. */
}
.cd-app{position:relative;z-index:2;display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.cd-side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:var(--cd-s-1);padding:var(--cd-s-5);border-inline-end:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);overflow-y:auto}
.cd-side__link{display:flex;align-items:center;gap:var(--cd-s-3);padding:10px 13px;border-radius:var(--cd-r-sm);color:var(--cd-text-mid);font-size:var(--cd-size-5);transition:background var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease)}
.cd-side__link:hover{background:rgba(255,255,255,.05);color:var(--cd-text-hi)}
.cd-side__link.is-active{color:var(--cd-accent-300);background:rgba(var(--cd-accent-rgb),.10);box-shadow:inset 2px 0 0 var(--cd-accent-500)}
.cd-side__sep{height:1px;background:rgba(255,255,255,.07);margin:var(--cd-s-3) 0}
.cd-side__foot{margin-top:auto;padding-top:var(--cd-s-4)}
.cd-topbar{position:sticky;top:0;z-index:var(--cd-z-sticky);display:flex;align-items:center;gap:var(--cd-s-4);padding:var(--cd-s-3) var(--cd-s-6);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(8,8,15,.6);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.cd-main{padding:var(--cd-s-6);min-width:0}
@media(max-width:940px){.cd-app{grid-template-columns:minmax(0,1fr)}.cd-side{display:none}}
/* ── 47 · DISH — riga di menu con prezzo a puntini ────────── */
.cd-dish{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px var(--cd-s-4);padding:var(--cd-s-4) 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cd-dish:last-child{border-bottom:0}
.cd-dish__name{display:flex;align-items:baseline;gap:var(--cd-s-3);min-width:0;color:var(--cd-text-hi);font-weight:500;font-size:var(--cd-size-7)}
.cd-dish__name::after{content:"";flex:1;min-width:24px;border-bottom:1px dotted rgba(255,255,255,.2);transform:translateY(-3px)}
.cd-dish__price{font-family:var(--cd-f-mono);font-size:var(--cd-size-6);color:var(--cd-accent-500);white-space:nowrap}
.cd-dish__desc{grid-column:1/-1;font-size:var(--cd-size-5);color:var(--cd-text-low);max-width:60ch}
.cd-dish__tags{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
/* ── 48 · QTY — selettore quantità [data-cd-qty] ──────────── */
.cd-qty{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:var(--cd-r-full);background:rgba(0,0,0,.28);overflow:hidden}
.cd-qty button{width:36px;height:36px;border:0;background:transparent;color:var(--cd-text-mid);font-size:var(--cd-size-8);line-height:1;transition:background var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease)}
.cd-qty button:hover{background:rgba(255,255,255,.07);color:var(--cd-text-hi)}
.cd-qty input{width:44px;text-align:center;background:transparent;border:0;color:var(--cd-text-hi);font-family:var(--cd-f-mono);font-size:var(--cd-size-5);-moz-appearance:textfield;appearance:textfield}
.cd-qty input::-webkit-outer-spin-button,.cd-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cd-qty input:focus{outline:none}
/* :focus-visible e non :focus, così l'anello non si accende al click nel campo */
.cd-qty input:focus-visible{outline:2px solid var(--cd-focus);outline-offset:-2px}
/* ── 49 · COMPARE — prima/dopo con cursore ────────────────── */
.cd-compare{position:relative;overflow:hidden;border-radius:var(--cd-r-md);border:1px solid rgba(255,255,255,.12);aspect-ratio:16/10}
.cd-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-compare img:last-of-type{clip-path:inset(0 calc(100% - var(--cd-x,50%)) 0 0)}
.cd-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cd-compare::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:var(--cd-x,50%);width:2px;transform:translateX(-1px);background:var(--cd-accent-300);box-shadow:var(--cd-glow-2);pointer-events:none}
.cd-compare::before{content:"↔";position:absolute;top:50%;inset-inline-start:var(--cd-x,50%);transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(8,8,15,.75);border:1px solid rgba(var(--cd-accent-rgb),.6);color:var(--cd-accent-300);box-shadow:var(--cd-glow-1);font-size:var(--cd-size-5);z-index:1;pointer-events:none}
.cd-compare__tag{position:absolute;bottom:10px;font-family:var(--cd-f-mono);font-size:var(--cd-size-1);letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--cd-r-full);background:rgba(8,8,15,.7);color:var(--cd-text-mid);pointer-events:none}
.cd-compare__tag--a{inset-inline-start:10px}.cd-compare__tag--b{inset-inline-end:10px}
/* ── 50 · VIDEO — facade leggera [data-cd-video="idYouTube"] ─
Il fondo non e' piu' nero: senza `data-cd-poster` la facciata non
ha nessuna immagine da mostrare, perche' dalla 11.2 non va piu' a
prendersi la miniatura da i.ytimg.com prima che l'utente abbia
detto qualcosa. Un rettangolo nero direbbe «rotto»; una superficie
del sistema dice «pronto, e non ho chiamato nessuno». Con un poster
la sua url() sovrascrive questo strato e il gradiente sparisce. */
.cd-video{position:relative;aspect-ratio:16/9;border-radius:var(--cd-r-md);overflow:hidden;border:1px solid rgba(255,255,255,.12);cursor:pointer;
background:radial-gradient(120% 120% at 28% 0%,var(--cd-ink-600),var(--cd-ink-950)) center/cover no-repeat}
/* Il dominio, scritto sulla facciata. E' l'informazione che trasforma
il clic in un'azione informata invece che in un riflesso — cioe' cio'
che rende legittima la facciata a due clic. In mono e in minuscolo:
e' un fatto tecnico, non un richiamo. */
.cd-video__nota{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:1;padding:8px 12px;
font-family:var(--cd-f-mono);font-size:var(--cd-size-1);letter-spacing:.06em;
color:var(--cd-text-mid);text-align:center;
background:linear-gradient(transparent,rgba(4,4,9,.72))}
/* A video partito i due spariscono davvero, non solo sotto l'iframe:
l'iframe li copre (z-index 2) ma il tasto resta un , cioe' un
punto di fuoco invisibile — proprio il difetto che la 10.10 ha
inseguito in tutto il sistema. `:has` e non il combinatore di
fratelli: l'iframe viene aggiunto in coda, quindi sta DOPO. */
.cd-video:has(iframe) .cd-video__nota,.cd-video:has(iframe) .cd-video__play{display:none}
.cd-video::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(4,4,9,.08),rgba(4,4,9,.42));pointer-events:none}
.cd-video__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--cd-accent-rgb),.92);color:var(--cd-accent-ink);font-size:var(--cd-size-9);box-shadow:var(--cd-glow-3);z-index:1;border:0;transition:transform var(--cd-t-fast) var(--cd-ease)}
.cd-video:hover .cd-video__play{transform:scale(1.08)}
.cd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
/* ── 51 · COUNTDOWN — [data-cd-until="2026-12-31T20:00"] ──── */
.cd-count{display:inline-flex;gap:var(--cd-s-3)}
.cd-count__seg{min-width:58px;text-align:center;padding:10px 8px;border-radius:var(--cd-r-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.cd-count__seg b{display:block;font-family:var(--cd-f-display);font-size:var(--cd-size-12);font-weight:300;color:var(--cd-text-hi);font-variant-numeric:tabular-nums;line-height:1.1}
.cd-count__seg span{font-family:var(--cd-f-mono);font-size:var(--cd-size-1);letter-spacing:.12em;text-transform:uppercase;color:var(--cd-text-low)}
.cd-count.is-over .cd-count__seg b{color:var(--cd-text-low)}
/* ── 52 · STAMPA — su carta il dark diventa chiaro da solo ── */
@media print{
body{background:#fff!important;color:#333}
.cd-atmosphere,.cd-grain,.cd-pageline,.cd-nav,.cd-top,.cd-cookie,.cd-burger,.cd-skip,.cd-btn,.cd-video,.cd-gate,dialog{display:none!important}
.cd-g1,.cd-g2,.cd-g3,.cd-g4,.cd-card,.cd-count__seg{background:#fff!important;border-color:#ddd!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
h1,h2,h3,h4,h5,.cd-text-hi,.cd-dish__name,.cd-stat b{color:#111!important}
p,td,.cd-text-mid,.cd-text-low,.cd-small,.cd-lead,.cd-dish__desc{color:#333!important}
.cd-price,.cd-dish__price,.cd-eyebrow,.cd-text-accent{color:#111!important}
.cd-display--glow{background:none!important;-webkit-text-fill-color:#111;color:#111!important}
.cd-dish__name::after{border-color:#bbb}
a{color:#111}
}
/* ── 53 · SOLIDITÀ — correzioni da audit ──────────────────── */
@media(max-width:720px){
/* will-change:auto insieme ad animation:none: senza, il browser continua a
promuovere tre livelli da 52vw, 46vw e 38vw con blur(90px) per
un'animazione che qui non gira più. */
.cd-orb{filter:blur(48px);opacity:.35;animation:none;will-change:auto}
.cd-orb--c{display:none}
.cd-grain{display:none}
}
/* Con un overlay aperto l'atmosfera è coperta, ma continuerebbe a muoversi:
ogni frame costringe il compositore a rifare la sfocatura del retro di
OGNI superficie in vetro visibile. Ferma, il costo va a zero. */
html.cd-nav-locked .cd-orb,html:where(:has(dialog:modal)) .cd-orb{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.cd-orb{will-change:auto}}
.cd-compare:has(input:focus-visible){outline:2px solid var(--cd-focus);outline-offset:3px}
.cd-modal__panel,.cd-drawer__panel,.cd-palette__list,.cd-menu,.cd-side{overscroll-behavior:contain}
@media print{
[data-cd-reveal],[data-cd-stagger]>*{opacity:1!important;transform:none!important}
/* La sparkline si rivela con clip-path da quando ha smesso di usare
stroke-dasharray: senza questo reset, un grafico non ancora entrato nel
viewport si stampa ritagliato a larghezza zero, cioè non si stampa. */
.cd-chart--spark svg{clip-path:none!important}
.cd-chart__dot{opacity:1!important}
.cd-chart__bar{transform:none!important}
.cd-chart__ring{stroke-dashoffset:calc(100 - var(--v,0))!important}
.cd-compare input{display:none}
}
/* ── 54 · RESISTENZA — ambienti ostili ────────────────────── */
/* Windows High Contrast / Contrast Themes: niente colori nostri,
lo stato passa a bordi e outline di sistema. Il testo col
gradiente tornerebbe invisibile: lo riportiamo pieno. */
@media (forced-colors:active){
.cd-atmosphere,.cd-grain,.cd-pageline{display:none}
.cd-display--glow{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}
.cd-chip.is-active,.cd-tab[aria-selected="true"],.cd-page.is-active,.cd-side__link.is-active,[data-cd-spy] a.is-active,.cd-nav__links a.is-active{outline:2px solid CanvasText;outline-offset:-2px}
.cd-badge,.cd-alert,.cd-cookie--fix{border-width:2px}
.cd-progress{border:1px solid CanvasText}
.cd-progress>i{background:Highlight}
/* Spunta, pallino e pomello sono forme su un fondo pieno: con i colori
forzati il fondo viene sostituito e la forma sparisce dentro di esso.
Ridipinti con i colori di sistema, che sono l'unica cosa che qui vale —
e restano quelli scelti dall'utente, non i nostri. */
.cd-check:checked,.cd-radio:checked{background:Highlight;border:2px solid Highlight}
.cd-check:checked::before,.cd-radio:checked::before{background:HighlightText}
.cd-switch{border:1px solid CanvasText}
.cd-switch::after{background:CanvasText}
.cd-switch:checked{background:Highlight;border:2px solid Highlight}
.cd-switch:checked::after{background:HighlightText}
.cd-step.is-done .cd-step__dot,.cd-step.is-now .cd-step__dot{border:2px solid Highlight}
.cd-compare::after{background:none;border-inline-start:2px solid CanvasText}
.cd-source__core{border:2px solid CanvasText}
}
/* Contrasto aumentato: testi più chiari, bordi del vetro più netti */
@media (prefers-contrast:more){
:root{--cd-text-mid:#C8CCDA;--cd-text-low:#A9AEC1;
--cd-g1-brd:rgba(255,255,255,.16);--cd-g2-brd:rgba(255,255,255,.2);
--cd-g3-brd:rgba(255,255,255,.26);--cd-g4-brd:rgba(255,255,255,.32)}
.cd-input,.cd-select,.cd-textarea{border-color:rgba(255,255,255,.28)}
}
/* Reflow 320px: i componenti a fila avvolgono, i bottoni vanno a capo */
.cd-count,.cd-pages,.cd-tabs{flex-wrap:wrap}
@media (max-width:380px){
.cd-btn{white-space:normal}
.cd-empty{padding:var(--cd-s-6) var(--cd-s-4)}
}
/* Topbar su schermi molto stretti: il badge cede il passo alla ricerca */
@media (max-width:520px){.cd-topbar .cd-badge{display:none}}
/* ── 55 · NAVPILL — menu a pillola fluttuante ─────────────────
Stati: data-state="closed" (Menu + hamburger) · "open" (Close + X)
· "sub" (Back + freccia). Le stesse tre linee formano tutti e tre
i segni: nessuna icona sostituita, solo trasformata. */
/* Le misure del menu stanno qui, in cima, perche' servono in piu' posti e
una di loro serve anche al JS. E' la lezione della 12.6: un numero scritto
in due punti si sfasa al primo ripensamento, e nessuno se ne accorge
finche' non lo vede storto qualcuno.
`--cd-navpill-barra` e' la larghezza della barra di ricerca, ed e' un
CONTO, non una misura: la barra deve cominciare dove comincia il TESTO del
pannello, cosi' da leggersi come la riga d'intestazione della sua colonna.
Prima si allineava al bordo del pannello, e sembrava una scelta piu' pulita
perche' i due numeri combaciavano esattamente. Ma nel pannello non c'e'
niente che stia su quel bordo: il testo comincia 33 px piu' in la' — 1 px
di bordo piu' 32 di riempimento — quindi la barra risultava piu' larga
della colonna a sinistra e piu' stretta a destra, allineata a nulla. E il
suo cappuccio tondo, appoggiato sul bordo del pannello, si leggeva come se
ne uscisse fuori. Era il difetto segnalato.
Dal bordo dello schermo si tolgono, in ordine: il rientro del rail, la
compensazione della barra di scorrimento, il gap, la ×, il riempimento
della vista e il bordo del pannello.
`--cd-gap-fix` DEVE stare nel conto: a menu aperto vale la larghezza della
barra di scorrimento (una quindicina di pixel), e ometterlo farebbe
sbordare la barra oltre il bordo del pannello — dalla parte peggiore.
Il bordo si conta a parte e non dentro il rientro, perche' il rientro deve
restare un valore usabile come `padding` e un `padding:33px` sarebbe una
bugia: sotto 641 px il bordo non c'e' e il token vale zero. */
.cd-navpill{
--cd-navpill-alt:46px; /* pallini, lente, × e barra: tutti alti uguale */
--cd-navpill-gap:8px; /* il gap del rail */
/* Da 641 a 1000 px il pannello restava inchiodato al suo minimo: su uno
schermo da 900 era largo quanto su uno da 641, e con il catalogo dei
filtri dentro restavano 275 px di colonna. La curva nuova alza il
pavimento e il tetto. Satura a 1333 px, non prima: a 1280 il pannello
e' 460,8 e non 480. */
--cd-navpill-pannello:clamp(360px,36vw,480px);
--cd-navpill-rientro:var(--cd-s-6); /* il riempimento della vista: un numero solo */
--cd-navpill-bordo:1px; /* il bordo del pannello, che sta DENTRO la larghezza */
--cd-navpill-arrivo:.5s; /* quanto ci mette il pannello ad arrivare */
/* Quanto l'etichetta aspetta, chiudendo il MENU, prima di riprendersi la
larghezza: il tempo che serve ai pallini per rientrare nella pillola.
Era l'unico ritardo del sistema senza un nome — `.2s` scritto nudo — ed
era meta' dei 197 ms per cui i due percorsi di ritorno divergevano.
Negli overlay non c'e' (non ci sono pallini da attendere): li' la
classe `is-quick` lo esclude alla fonte. */
--cd-navpill-attesa-pallini:.2s;
/* LO STANDARD DELLA RICOMPARSA: quanto ci mette il rail a tornare al suo
posto — il tasto Menu che si riprende la larghezza e la lente che
rinasce accanto a lui. E' UNO SOLO, e vale in ogni situazione in cui il
rail torna: chiudendo il menu, chiudendo una modale, un drawer, la
palette, il lightbox, il consenso — e qualunque overlay scritto domani,
perche' il motore osserva l'attributo `open` di ogni del
documento e li fa passare tutti dalla stessa porta.
Nel percorso del MENU e' il RITARDO che la lente aspetta prima di
rientrare; nel percorso degli OVERLAY e' la DURATA della morfosi, dopo
la quale la lente parte. Due ruoli, un numero: i due percorsi si fermano
nello stesso istante per identita' e non per coincidenza.
Prima erano due: questo token e un `430` scritto a mano nel motore. Si
assomigliavano, quindi sembravano allineati, e sarebbero divergiti al
primo ripensamento senza che niente protestasse — e' il difetto che
questo progetto ha gia' corretto tre volte. Il motore adesso lo CHIEDE
al foglio, come fa gia' per la durata d'uscita degli overlay. */
/* L'ANTICIPO: di quanto la lente parte PRIMA che il tasto Menu abbia
finito di tornare pieno. Non e' impazienza, e' la coda inerte della
curva. `--cd-ease` e' un ease-out cosi' marcato che il tasto fa il 94,5%
della corsa nel 45% del tempo: misurato in un browser vero, arriva a un
pixel dal pieno a 266 ms su 448 dichiarati, e da li' in poi per 153 ms
NON SI MUOVE PIU' NIENTE. Far partire la lente alla fine dichiarata
lascia quell'aria morta; farla partire un anticipo prima la toglie.
I 180 ms non sono una preferenza: 448 - 180 = 268, cioe' l'istante in
cui il tasto arriva. E' la coda, misurata.
E' LA REGOLA UNICA DEL RITORNO, e vale in ogni chiusura: menu, modale,
drawer, palette, lightbox, consenso, e qualunque finestra scritta domani. */
--cd-navpill-anticipo:.18s;
/* Quando la lente rientra, chiudendo il MENU. Non e' piu' un numero suo:
DISCENDE dalla regola. Il tasto Menu, li', e' pieno dopo l'attesa dei
pallini piu' la posa; la lente parte un anticipo prima. Fa .44s — cioe'
esattamente quel che c'era scritto a mano prima, ma adesso ci arriva per
costruzione invece di combaciarci per fortuna.
Nel percorso degli overlay lo stesso numero e' la DURATA della morfosi,
che il motore chiede al foglio; e li' la lente non aspetta un ritardo,
perche' e' la Web Animations API a portarla, con lo stesso anticipo
sottratto alla durata. Due percorsi, una regola, un numero. */
--cd-navpill-consegna:calc(var(--cd-navpill-attesa-pallini) + var(--cd-navpill-posa)
- var(--cd-navpill-anticipo));
--cd-navpill-morfosi-in:.38s; /* e quanto ci mette a contrarsi, che e' un altro gesto */
/* LA POSA: quanto ci mette un pezzo del rail a posarsi al suo posto. Non
e' un numero nuovo — e' quello che questo componente scriveva gia' SEI
volte a mano: il transform di pillola, pallini e lente; la cella della
griglia dell'etichetta e il suo margine; le tre linee dell'hamburger; la
discesa delle voci del pannello. Sei copie dello stesso gesto, e nessun
modo di accorgersi se una divergeva. */
--cd-navpill-posa:.42s;
/* IL PASSO DEL RAIL: quanto un pezzo aspetta quello prima di lui. E'
l'intervallo fra il globo e il pallino accanto — la battuta con cui il
menu principale si apre — e serve TRE volte, perche' e' una cosa sola:
lo sfalsamento dei pallini, il tempo che la lente ha per togliersi di
mezzo, l'attesa della barra di ricerca.
E' il senso di tutta la 12.9. La barra ne aspettava DUE, e in mezzo non
si muoveva niente di visibile: con questa curva l'87,5% del lavoro e'
fatto in un terzo del tempo, quindi la lente e' invisibile (97%) gia' a
149 ms mentre la barra partiva a 280 — 131 ms di buco, campionati a
passi di 1 ms sulla curva vera del browser. Il menu principale non ne
ha: ogni pallino parte quando quello prima ha fatto i suoi sette ottavi.
Scritto una volta sola, «la barra entra con la battuta dei pallini» e'
vero per IDENTITA' e non per somiglianza.
Il buco non e' AZZERATO, e' dimezzato: 65 ms. La lente a un passo e'
invisibile a 75, e la barra parte a 140. Chiuderlo del tutto vorrebbe
dire farla partire a 75 — cioe' rinunciare proprio all'identita' col
passo dei pallini, che e' il motivo per cui si e' toccato tutto questo.
Sessantacinque millesimi sono il prezzo dichiarato di quell'identita'. */
--cd-navpill-passo:.14s;
/* La posa da cui entra un pezzo del rail, e in cui esce la lente. Era
scritta due volte identica — sulla lente che se ne va e sui pallini che
aspettano — e il glifo della barra e' il terzo che ne ha bisogno.
`--cd-dir` la specchia da se'. */
--cd-navpill-fuori:translateX(calc(22px * var(--cd-dir))) scale(.55);
/* Quanto dura la corsa della barra: quel che resta per fermarsi insieme
al pannello, se parte un passo dopo il tasto Menu. Uguale in entrata e
in uscita — un'uscita piu' corta dell'entrata e' un difetto che questo
progetto ha gia' corretto una volta. */
--cd-navpill-corsa:calc(var(--cd-navpill-arrivo) - var(--cd-navpill-passo));
/* E quanto dura la sua ACCENSIONE, che NON e' la stessa cosa della corsa.
I pallini si accendono in due terzi del tempo in cui si posano — 280 su
420 — e quel divario e' cio' che li fa leggere come oggetti che si
posano: sono pieni 140 ms prima di essersi fermati. La barra le faceva
uguali, e un oggetto che diventa opaco nell'istante esatto in cui si
ferma non atterra: arriva.
Due terzi e' la PROPORZIONE di la', non la durata: la finestra qui e'
piu' corta e va trasposta, non copiata. 360 · 2/3 fa 240 intero, ed e'
il motivo per cui il passo giusto e' 140 e non 160. */
--cd-navpill-luce:calc(var(--cd-navpill-corsa) * 2 / 3);
/* Quanto dura il RIENTRO DELLA LENTE. Prima erano due token in prestito —
la posa del rail per il movimento, il tempo medio del sistema per
l'ingombro — e nessuno dei due parlava di lei: `--cd-navpill-posa` ha sei
consumatori (pallini, etichetta, hamburger, glifo, voci del pannello) e
`--cd-t-mid` ne ha quarantotto in tutto il sistema. Per farla piu' svelta
senza trascinarsi dietro mezzo design system le serviva un orologio suo.
E' la posa del rail MENO UN PASSO: la lente si posa una battuta prima
dei pezzi che condividono il rail, che e' la stessa grammatica con cui i
pallini si sfalsano l'uno dall'altro. Fa 280 — due passi, il gradino che
la lente gia' occupava col suo ingombro, e lo stesso numero che
l'ingombro aveva prendendolo in prestito. Quindi MOVIMENTO E INGOMBRO
FINISCONO INSIEME, e l'accensione resta un passo avanti: 140 su 280,
la stessa proporzione dei pallini.
Costa 140 ms in meno dei 420 di prima e non tocca niente della
coreografia d'uscita. */
--cd-navpill-ritorno:calc(var(--cd-navpill-posa) - var(--cd-navpill-passo));
--cd-navpill-barra:calc(var(--cd-navpill-pannello) - var(--cd-navpill-rientro)
- var(--cd-navpill-bordo) - var(--cd-s-4) - var(--cd-gap-fix)
- var(--cd-navpill-gap) - var(--cd-navpill-alt));
position:fixed;top:var(--cd-s-4);inset-inline-end:calc(var(--cd-s-4) + var(--cd-gap-fix));
z-index:var(--cd-z-navpill);display:flex;align-items:flex-start}
.cd-navpill__rail{display:flex;align-items:center;gap:var(--cd-navpill-gap);position:relative;z-index:2}
.cd-navpill__dots{display:flex;align-items:center;gap:var(--cd-navpill-gap)}
/* Superficie condivisa da pillola e pallini (vetro g3) */
.cd-navpill__toggle,.cd-navpill__dot,.cd-navpill__cerca,.cd-navpill__modo{
/* Il velo bianco resta esattamente dov'era: gli si mette un pavimento
SOTTO, invece di sostituirlo. Cosi' il vetro resta vetro — la lastra
sopra il bianco e sopra le tile compone due colori diversi, ed e' una
delle cose che la prova verifica: se coincidessero, o la sfocatura non
lavora o la lastra e' opaca, e una lastra opaca non e' piu' vetro. */
border:1px solid var(--cd-g3-brd);background:linear-gradient(var(--cd-g3-bg),var(--cd-g3-bg)),var(--cd-lastra);
-webkit-backdrop-filter:blur(var(--cd-g3-blur)) saturate(var(--cd-g3-sat));
backdrop-filter:blur(var(--cd-g3-blur)) saturate(var(--cd-g3-sat));
box-shadow:var(--cd-rim-strong),var(--cd-cast-2);
transition:background var(--cd-t-fast) var(--cd-ease),border-color var(--cd-t-fast) var(--cd-ease),
box-shadow var(--cd-t-mid) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease),
opacity var(--cd-t-mid) var(--cd-ease),transform var(--cd-navpill-posa) var(--cd-ease),visibility .3s}
/* `background` e' una SCORCIATOIA: scritta da sola qui azzererebbe la
lastra, e l'icona diventerebbe illeggibile proprio nell'istante in cui
il puntatore ci sta sopra. Il selettore prende anche il segmento del
modo, che da questa lista mancava fin dalla 12.10 — e ora che il riposo
e' gia' `--cd-text-hi` l'evidenziazione DEVE farla la superficie: un
hover che cambia colore da hi a hi non dice niente. */
.cd-navpill__toggle:hover,.cd-navpill__dot:hover,.cd-navpill__cerca:hover,.cd-navpill__modo label:hover{
background:linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.11)),var(--cd-lastra);
border-color:rgba(255,255,255,.24)}
.cd-navpill__toggle{
display:inline-flex;align-items:center;gap:0;height:var(--cd-navpill-alt);padding:0 14px;border-radius:var(--cd-r-full);
color:var(--cd-text-hi);font-family:var(--cd-f-mono);font-size:var(--cd-size-2);font-weight:500;
letter-spacing:.16em;text-transform:uppercase;line-height:1}
.cd-navpill.is-open .cd-navpill__toggle,.cd-navpill.is-overlay .cd-navpill__toggle{padding:0 13px}
/* Etichetta: la cella della griglia collassa da 1fr a 0fr. La pillola stringe
fino a 46px esatti — un cerchio — e il bordo destro non si muove di un pixel. */
.cd-navpill__label{display:grid;grid-template-columns:1fr;margin-inline-start:6px;margin-inline-end:12px;
transition:grid-template-columns var(--cd-navpill-posa) var(--cd-ease),margin var(--cd-navpill-posa) var(--cd-ease),opacity .2s var(--cd-ease)}
.cd-navpill__label>span{overflow:hidden;white-space:nowrap;text-align:start}
.cd-navpill.is-open .cd-navpill__label,.cd-navpill.is-overlay .cd-navpill__label{grid-template-columns:0fr;margin-inline-start:0;margin-inline-end:0;opacity:0}
/* In chiusura la pillola si riapre per ultima, dopo il rientro dei pallini */
.cd-navpill:not(.is-open):not(.is-overlay):not(.is-quick) .cd-navpill__label{transition-delay:var(--cd-navpill-attesa-pallini)}
/* ── La ricerca, legata al tasto Menu ─────────────────────────
Non e' un elenco di casi in cui sparisce: e' una regola sola. Il
pulsante c'e' quando il tasto Menu e' nel suo stato di riposo, e se ne
va nell'istante in cui quello comincia ad accorciarsi. Cosi' copre il
menu, la modale, il drawer, la palette, il lightbox, il consenso — e
quel che verra' dopo, perche' non nomina nessuno di loro: nomina il
tasto Menu.
La sfasatura e' voluta. In USCITA parte insieme (ritardo zero): due cose
che se ne vanno insieme si leggono come un gesto solo. In ENTRATA
aspetta, perche' il tasto Menu si sta riprendendo la sua larghezza e la
ricerca gli entrerebbe addosso. Il ritardo e' .44s perche' tanto dura la
morfosi quando si apre il MENU: la posa del rail (`--cd-navpill-posa`)
sulla cella della griglia dell'etichetta.
Negli overlay la morfosi dura 430 ms e la guida la Web Animations API, e
per tre versioni questo commento ha detto che «un valore solo li copre
entrambi». Era vero come intenzione e falso come codice: la coperta del
morph spegneva le transizioni proprio nell'istante in cui il valore
cambiava, e la lente non aspettava 440 ms — non aspettava niente,
scattava. Adesso in quel percorso il ritardo non e' DICHIARATO, e'
CONSUMATO: la lente parte quando il morph finisce (`is-strascico`) e il
token vale zero (`is-quick`). Un'attesa sola, detta una volta come numero
e una volta come fatto — e un fatto non si sfasa, perche' non e' scritto
da nessuna parte.
Sta fra i pallini e il tasto, e uscendo si porta via anche l'ingombro:
la larghezza si chiude INSIEME alla dissolvenza, non prima e non dopo.
Nella 12.4 l'ingombro restava, con la motivazione «o il resto del rail
scivola». Era sbagliata due volte. Primo: quel che scivolerebbe sono i
pallini, che entrano dalla destra proprio in quel momento — il loro
`translateX` va nella stessa direzione, quindi lo scorrimento si somma
al loro ingresso invece di disturbarlo. Secondo: il tasto e' ultimo in
un flex ancorato a destra e non si muove mai comunque. Non c'era niente
da proteggere — c'era solo un buco di 54 px fra l'ultimo pallino e la ×.
La correzione ovvia sarebbe azzerare la larghezza di scatto, e sarebbe
sbagliata anche quella: un elemento largo zero non si vede sfumare, e
l'animazione d'uscita sparirebbe. Per questo la larghezza ha la stessa
durata dell'opacita'. In chiusura prende il ritardo di .44s come tutto
il resto, e a quel punto i pallini si sono gia' spenti da un pezzo.
`min-width:0` e `padding:0` servono perche' la larghezza arrivi davvero
a zero: su un elemento flex `min-width:auto` la teneva a 14 px — bordi
piu' riempimento — e il buco restava. Il margine negativo toglie il gap
rimasto orfano: il rail e' un flex con `gap:8px`, e senza resterebbero
due gap affiancati, cioe' 16 px invece di 8. */
/* La FORMA della lente: solo lei ce l'ha. */
.cd-navpill__cerca{
width:var(--cd-navpill-alt);height:var(--cd-navpill-alt);border-radius:50%;display:grid;place-items:center;flex:none;
color:var(--cd-text-hi)}
/* ── IL MOVIMENTO, SCRITTO UNA VOLTA PER TUTTI I COMANDI DEL RAIL ──
Lente e selettore di modalita' sono due oggetti diversi che fanno la
STESSA cosa: stanno nel rail a riposo e se ne vanno quando il menu si
apre. La coreografia e' undici transizioni e quattro token; scritta due
volte si sfaserebbe al primo ritocco, e in silenzio — nessuno strumento
confronta due animazioni. Quindi la regola resta una, e la lista dei
selettori cresce. Chi aggiunge domani un terzo comando al rail lo
aggiunge QUI, e ha finito. */
.cd-navpill__cerca,.cd-navpill__modo{
/* Il ritardo sta DENTRO la scorciatoia, uno per proprieta'. Era
`transition-delay:.44s`, cioè un valore solo per tutte e undici — e le
prime quattro sono quelle con cui un bottone risponde al mouse: fondo,
bordo, ombra, colore. Passandoci sopra non succedeva niente per quasi
mezzo secondo, e altrettanto uscendo: l'effetto c'era e non si leggeva
come una risposta.
Un PASSO per sparire, DUE per stringersi: non e' una svista. L'opacita'
e' l'unica cosa che la barra di ricerca deve aspettare, e a un passo la
lente e' gia' a zero; la larghezza invece muove il RAIL — i pallini
stanno prima di lei nel flex e la sua chiusura li trascina — e la
coreografia dei pallini e' esattamente la cosa che non si tocca.
Separandole, la vista ricerca guadagna 140 ms di corsa e il menu
principale resta identico al pixel.
Il ritardo serve solo alla SCOMPARSA, che deve aspettare che i pallini
si siano spenti. Scritto qui accanto a ciascuna proprieta' invece che in
una seconda lista posizionale: due liste da tenere allineate a mano si
sfasano al primo che ne allunga una sola, e la specifica ricicla la piu'
corta invece di protestare. */
transition:background var(--cd-t-fast) var(--cd-ease) 0s,
border-color var(--cd-t-fast) var(--cd-ease) 0s,
box-shadow var(--cd-t-mid) var(--cd-ease) 0s,
color var(--cd-t-fast) var(--cd-ease) 0s,
opacity var(--cd-navpill-passo) var(--cd-ease) var(--cd-navpill-consegna),
transform var(--cd-navpill-ritorno) var(--cd-ease) var(--cd-navpill-consegna),
visibility var(--cd-navpill-passo) var(--cd-ease) var(--cd-navpill-consegna),
width var(--cd-navpill-ritorno) var(--cd-ease) var(--cd-navpill-consegna),
margin var(--cd-navpill-ritorno) var(--cd-ease) var(--cd-navpill-consegna),
padding var(--cd-navpill-ritorno) var(--cd-ease) var(--cd-navpill-consegna),
border-width var(--cd-navpill-ritorno) var(--cd-ease) var(--cd-navpill-consegna)}
.cd-navpill__cerca svg{width:19px;height:19px;fill:none;stroke:currentColor;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ── IL SELETTORE DI MODALITA' ──────────────────────────────────
Un segmentato dentro il rail: due slot, uno acceso. La forma e' quella
di `.cd-seg` — stesso raggio, stesso riempimento, stessa pastiglia sotto
la voce scelta — perche' e' lo stesso gesto, e due grammatiche per «scegli
uno fra pochi» sarebbero due cose da imparare.
Alto quanto tutto il resto del rail (`--cd-navpill-alt`), largo 84: due
slot da 38 piu' i 3+3 di riempimento e i 2 di gap. Misurato a 320 px, dove
il rail lascia scoperti 120 px sugli ultimi 136: con il selettore la parte
visibile arriva a 212 su 304 disponibili, e il tasto Menu non perde nulla
di quel che aveva. */
.cd-navpill__modo{
display:inline-flex;align-items:center;gap:2px;flex:none;
height:var(--cd-navpill-alt);padding:3px;border-radius:var(--cd-r-full);
/* IL SEGNO SI MISURA COL SUO TOKEN, non con una regola che lo scavalca.
Il selettore chiede il glifo con `data-cd-ico`, e il framework crea un
`svg.cd-ico` che porta gia' fill, stroke, spessore ed estremi giusti.
Una regola `.cd-navpill__modo svg` avrebbe ridichiarato tutto e avrebbe
BATTUTO la classe del componente: contenitore con tag nudo contro classe,
ed e' esattamente il difetto che `specificita` esiste per trovare — l'ha
trovato, quattro volte, su width height fill e stroke.
`--cd-social-mono` e' la misura che quel componente legge da se', ed e'
il modo documentato di dirgli quanto essere grande. */
--cd-social-mono:19px}
.cd-navpill__modo label{
position:relative;z-index:1;display:grid;place-items:center;
width:38px;height:100%;border-radius:var(--cd-r-full);
color:var(--cd-text-hi);cursor:pointer;
transition:color var(--cd-t-fast) var(--cd-ease)}
/* Il radio c'e' e non si vede: `display:none` lo toglierebbe dall'ordine di
tabulazione e dal gruppo, cioe' proprio le due cose per cui e' un radio. */
.cd-navpill__modo input{position:absolute;opacity:0;width:0;height:0;margin:0}
.cd-navpill__modo label:has(input:checked){color:var(--cd-accent-300)}
.cd-navpill__modo label:has(input:checked)::before{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
/* LA PASTIGLIA HA UN FONDO SUO, e non e' un vezzo: la tinta accent al
14% SCHIARISCE il fondo proprio sotto un glifo gia' chiaro, cioe' il
segnale di stato rendeva meno leggibile la cosa che segnala. Misurato
sul bianco puro: 5,05:1 con la sola lastra, 6,48:1 con questa riga.
Alzare invece tutta la lastra del rail costerebbe il vetro su ogni
pagina scura del sistema per un segmento su cinque comandi. */
background:linear-gradient(rgba(var(--cd-accent-rgb),.14),rgba(var(--cd-accent-rgb),.14)),rgba(13,13,24,.30);
border:1px solid rgba(var(--cd-accent-rgb),.45);
box-shadow:var(--cd-glow-1)}
/* Il fuoco sta sul RADIO ma si disegna intorno alla sua pastiglia: l'anello
attorno a un input largo zero sarebbe un punto. */
.cd-navpill__modo label:has(input:focus-visible){outline:2px solid var(--cd-focus);outline-offset:2px}
/* LA LENTE NON SEGUE `is-overlay`: SEGUE IL MORPH. `is-overlay` se ne va a
t=0 perche' `morph()` deve MISURARE lo stato d'arrivo prima di animarlo, e
in quell'istante la coperta piu' in basso tiene le transizioni spente: il
valore di riposo veniva committato li' dal riflusso forzato, e togliere la
coperta 430 ms dopo non faceva nascere niente, perche' non c'era piu'
niente da cambiare. Misurato: chiudendo una modale la lente passava da
`0%/w0/hidden` a `100%/w46/visible` DENTRO LO STESSO TASK, con zero eventi
di transizione. Non una transizione uccisa: una mai nata. Col menu faceva
invece tutta la sua coreografia — ed era il difetto che si vedeva.
`is-strascico` e' l'abito dell'overlay che resta addosso finche' il morph
non e' finito. Tiene la lente fuori attraverso lo SPOSTAMENTO DEL NODO —
la pillola vive dentro il e ci torna a casa sull'evento `close` —
e la lascia andare quando la coperta cade: la transizione nasce li', a
nodo gia' rientrato, e nessuno puo' piu' cancellarla.
Lasciarla nascere PRIMA non funziona, ed e' misurato: escludendo la lente
dalla coperta le transizioni nascono a 213 ms e lo spostamento le cancella
tutte a 381. La Web Animations API sopravvive a quello spostamento, le
transizioni no — ed e' il motivo per cui `morph()` esiste.
IL PATTO: `is-strascico` puo' portare SOLO cio' che la Web Animations API
non guida e che `morph()` non misura. Il riempimento del tasto e la cella
dell'etichetta non vanno aggiunti qui: sono i valori che il morph rilegge
per sapere dove arrivare, e trattenerli vorrebbe dire animare da un punto
al punto stesso e poi scattare a fine corsa. */
.cd-navpill.is-open .cd-navpill__cerca,.cd-navpill.is-overlay .cd-navpill__cerca,
.cd-navpill.is-open .cd-navpill__modo,.cd-navpill.is-overlay .cd-navpill__modo{
opacity:0;visibility:hidden;pointer-events:none;
transform:var(--cd-navpill-fuori);
width:0;min-width:0;padding:0;border-width:0;margin-inline-start:-8px;
transition-delay:0s}
/* Le etichette dentro il selettore devono sparire con lui: un `width:0` sul
guscio non stringe i figli, che hanno misura propria, e resterebbero a
sbordare da una scatola larga zero mentre il rail si chiude. */
.cd-navpill.is-open .cd-navpill__modo label,.cd-navpill.is-overlay .cd-navpill__modo label{
width:0;overflow:hidden}
/* E nel percorso overlay il ritardo vale ZERO — che non e' un secondo
numero, e' un'attesa GIA' CONSUMATA. `--cd-navpill-consegna` esiste perche'
la lente non rientri addosso al tasto Menu che si sta riprendendo la
larghezza; qui la lente parte quando il morph e' FINITO, cioe' dopo quella
attesa. Sommarne altri 440 la farebbe atterrare mezzo secondo dopo tutto
il resto.
Un token suo — `--cd-navpill-consegna-overlay` — sarebbe la copia del
numero che vive in `morph()`, e si sfaserebbe al primo ripensamento, in
silenzio: il modo di non sfasare due numeri non e' tenerli allineati, e'
non averne un secondo. La classe e' quella che dice gia' «percorso
overlay», e lo dice gia' per l'etichetta poco piu' su. */
.cd-navpill.is-quick .cd-navpill__cerca,.cd-navpill.is-quick .cd-navpill__modo{transition-delay:0s}
/* Senza animazione il ritardo sarebbe una pausa morta e basta. */
@media (prefers-reduced-motion:reduce){ .cd-navpill__cerca,.cd-navpill__modo{transition-delay:0s} }
/* Nella vista della ricerca il pannello e' quello di sempre, ma senza gli
altri pulsanti dell'header. */
.cd-navpill.is-cerca .cd-navpill__dots{display:none}
/* ── La barra di ricerca del rail — .cd-navpill__barra ────────
Nella vista della ricerca, accanto alla ×, alla sua stessa altezza e con
la sua stessa superficie: una pillola che e' un campo.
IL SUO BORDO INIZIALE CASCA SU QUELLO DEL PANNELLO. Non e' un vezzo: e'
cio' che la fa leggere come la riga d'intestazione del pannello invece che
come un oggetto che gli galleggia accanto. La larghezza e' quindi un conto
e non una misura — vedi `--cd-navpill-barra` in cima alla sezione.
Sotto 641 px il pannello va a tutto schermo e quel bordo non esiste piu':
il bersaglio cambia perche' e' cambiato il pannello, e si usa la stessa
grondaia da 16 px che il rail ha gia' dall'altra parte. A 320 px la barra
e' 234 px e il rail riempie lo schermo esatto: 16+234+8+46+16. Nessun
`min-width` di sicurezza: un pavimento la farebbe sbordare a sinistra.
NIENTE `backdrop-filter`, a differenza degli altri pezzi del rail. La
barra vive solo sopra il pannello, che e' gia' vetro g4: vetro su vetro
fa latte, non profondita' — e' la stessa ragione per cui piu' in basso
toggle e pallini ci rinunciano a menu aperto. In piu' evita di rifare la
sfocatura di una regione che cresce di 350 px in 360 ms.
LA GRIGLIA E' IL VECCHIO PULSANTE TONDO, INTATTO. La prima traccia e'
larga quanto lui, quindi la lente resta a 23 px dal bordo iniziale: lo
stesso posto che occupava dentro il cerchio. A barra larga zero i due
segni cadono nello STESSO PIXEL — il bordo di coda della barra casca su
quello iniziale della lente, e tutt'e due centrano il glifo a 23 px da li'
— ed e' per questo che piu' sotto il glifo riprende la posa in cui la
lente e' morta invece di comparire da fermo. Sono due nodi — un
non puo' contenere un lo stroke finiva ereditato dalle forme dentro
il simbolo: un contorno chiaro in currentColor attorno alla bandiera, e —
quando le bande erano tracciati distinti — una riga chiara su ogni confine.
Qui la portata viene ristretta. */
.cd-navpill__dot .cd-flag svg{width:100%;height:100%;stroke:none;stroke-width:0;fill:initial}
.cd-navpill.is-open .cd-navpill__dot{opacity:1;transform:none;visibility:visible;pointer-events:auto}
/* Il globo è la metà che si stacca: parte sovrapposto alla pillola e scivola
nel proprio posto mentre questa si contrae. Gli altri seguono in sequenza. */
.cd-navpill__dot--home{transform:translateX(calc(54px * var(--cd-dir))) scale(.5)}
.cd-navpill.is-open .cd-navpill__dot--home{transition-delay:0s,0s,0s,0s,0s,0s,0s}
.cd-navpill.is-open .cd-navpill__dot:nth-last-child(2){transition-delay:0s,0s,0s,0s,var(--cd-navpill-passo),var(--cd-navpill-passo),var(--cd-navpill-passo)}
.cd-navpill.is-open .cd-navpill__dot:nth-last-child(3){transition-delay:0s,0s,0s,0s,.2s,.2s,.2s}
.cd-navpill.is-open .cd-navpill__dot:nth-last-child(4){transition-delay:0s,0s,0s,0s,.26s,.26s,.26s}
/* In chiusura la sequenza si inverte davvero: prima i pallini esterni,
poi il globo che rientra nella × */
.cd-navpill:not(.is-open) .cd-navpill__dot--home{transition-delay:0s,0s,0s,0s,.16s,.16s,.16s}
.cd-navpill:not(.is-open) .cd-navpill__dot:nth-last-child(2){transition-delay:0s,0s,0s,0s,.1s,.1s,.1s}
.cd-navpill:not(.is-open) .cd-navpill__dot:nth-last-child(3){transition-delay:0s,0s,0s,0s,.05s,.05s,.05s}
.cd-navpill__dot.is-active{color:var(--cd-accent-300);border-color:rgba(var(--cd-accent-rgb),.5);box-shadow:var(--cd-rim),var(--cd-glow-1)}
.cd-navpill__dot b{position:absolute;top:-2px;inset-inline-end:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--cd-r-full);
display:grid;place-items:center;font-size:var(--cd-size-1);font-weight:500;color:var(--cd-accent-ink);
background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-500));box-shadow:var(--cd-glow-1)}
/* Overlay: la parte restante della pagina va in sfocatura */
.cd-navpill__scrim{position:fixed;inset:0;z-index:-1;background:rgba(4,4,9,.5);
-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
opacity:0;pointer-events:none;transition:opacity .4s var(--cd-ease)}
.cd-navpill.is-open .cd-navpill__scrim{opacity:1;pointer-events:auto}
/* Pannello: da tablet in su occupa tutta l'altezza sul bordo destro,
con larghezza contenuta. Non galleggia mai. */
.cd-navpill__panel{position:fixed;top:0;inset-inline-end:0;bottom:0;height:100vh;height:100dvh;z-index:1;
width:var(--cd-navpill-pannello);overflow:hidden;
border-inline-start:1px solid var(--cd-g4-brd);
/* LA LASTRA VALE ANCHE QUI, e la 12.12 se l'era dimenticata. Aveva dato
il pavimento ai comandi del rail, alla barra di ricerca e ai tasti
della mappa — a tutto quel che galleggia — e aveva lasciato fuori il
PANNELLO, che galleggia come gli altri e per giunta e' largo mezzo
schermo.
Sopra una mappa chiara lo scrim al 50% compone un grigio medio, e il
velo bianco al 9% del vetro g4 lo schiarisce ancora: misurato, le
voci stavano a 2,80:1 e i contatori a 1,74:1 — cioe' quasi invisibili
— contro una soglia di 4,5. Con il pavimento: 12,10 e 5,62. Sulla
pagina scura, dove tutto questo non serviva, il conto passa da 14,9 a
14,7: niente. */
background:linear-gradient(var(--cd-g4-bg),var(--cd-g4-bg)),var(--cd-lastra);
-webkit-backdrop-filter:blur(var(--cd-g4-blur)) saturate(var(--cd-g4-sat));
backdrop-filter:blur(var(--cd-g4-blur)) saturate(var(--cd-g4-sat));
box-shadow:inset 1px 0 0 rgba(255,255,255,.06),-30px 0 70px rgba(0,0,0,.5);
/* visibility, non solo opacity: opacità e trasformazione non tolgono un
elemento dall'ordine di tabulazione né dall'albero di accessibilità, e a
menu chiuso le voci restavano raggiungibili con Tab e leggibili dagli
screen reader. È discreta, quindi commuta a fine transizione e l'uscita
animata resta intera. Stessa guardia che i pallini hanno già. */
opacity:0;visibility:hidden;transform:translateX(calc(100% * var(--cd-dir)));transform-origin:center right;pointer-events:none;
transition:opacity .34s var(--cd-ease),transform var(--cd-navpill-arrivo) var(--cd-ease),
visibility var(--cd-navpill-arrivo) var(--cd-ease)}
.cd-navpill.is-open .cd-navpill__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Su smartphone: a tutto schermo.
Qui si riscrivono i TOKEN, non le regole: il conto della barra resta uno
solo per tutti i viewport, e il riempimento della vista non ha piu' una
seconda copia da tenere allineata.
`100vw` come larghezza del pannello e' un accordo implicito e va detto: il
pannello vero sta su `inset-inline-start:0; inset-inline-end:0`, cioe' sul
blocco contenitore, che include la barra di scorrimento solo quando c'e'.
A menu aperto la pagina e' bloccata, la barra sparisce e i due coincidono —
ed e' `--cd-gap-fix` dentro il conto a tenerli d'accordo. Il giorno che
qualcuno togliesse `width:auto` dalla riga qui sotto, la barra sborderebbe
di una quindicina di pixel e nessuno strumento lo vedrebbe: `audit` salta
i sottoalberi dentro un `position:fixed`.
`.cd-navpill__item` e `.cd-navpill__lang` NON stanno qui: le loro regole
base vengono piu' in basso nel foglio e le scavalcherebbero. Stanno subito
dopo di quelle. Le media query non aggiungono specificita', e per tre
versioni questi tre valori — pensati per il pollice — non sono mai
arrivati sul telefono. */
@media (max-width:640px){
.cd-navpill{--cd-navpill-pannello:100vw;--cd-navpill-rientro:var(--cd-s-5);--cd-navpill-bordo:0px}
.cd-navpill__panel{inset-inline-start:0;inset-inline-end:0;width:auto;border-inline-start:0;
transform:translateY(-14px);transform-origin:top center;box-shadow:none}
.cd-navpill__scrim{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
/* Chiusura universale: la pillola vive nel top layer del dialog aperto */
.cd-navpill--solo{position:fixed;top:var(--cd-s-4);inset-inline-end:calc(var(--cd-s-4) + var(--cd-gap-fix));z-index:var(--cd-z-navpill);display:flex;
animation:cd-pill-in .34s var(--cd-ease) both}
.cd-navpill--solo.is-leaving{animation:cd-pill-out .22s var(--cd-ease-in) both}
@keyframes cd-pill-in{from{opacity:0;transform:scale(.55)}}
@keyframes cd-pill-out{to{opacity:0;transform:scale(.55)}}
/* Per tutta la durata del morph le transizioni CSS sono spente: servono i
valori reali di partenza e arrivo per misurare, e soprattutto nessuna
transizione deve restare in corso alla fine — altrimenti, cancellata
l'animazione, l'etichetta tornerebbe al valore di una transizione ancora a
metà e la pillola si riespanderebbe prima di ricollassare. */
.cd-navpill.is-morphing,.cd-navpill.is-morphing *{transition:none!important}
/* Negli overlay non ci sono pallini da attendere: il ritardo pensato per la
chiusura del menu viene escluso alla fonte (con una regola a parte perdeva
per specificità e il ritardo restava). */
.cd-navpill--solo .cd-navpill__toggle{padding:0 13px}
.cd-navpill.is-overlay .cd-navpill__scrim,.cd-navpill.is-overlay .cd-navpill__panel{display:none}
/* Variante inline: per specimen e documentazione (non si apre) */
.cd-navpill--inline{position:static;display:inline-flex}
.cd-navpill--inline .cd-navpill__scrim,.cd-navpill--inline .cd-navpill__panel{display:none}
.cd-navpill--inline .cd-navpill__dot{opacity:1;transform:none;pointer-events:auto}
/* Viste: avanti scivola da destra, indietro da sinistra */
.cd-navpill__view{display:none}
.cd-navpill__view{scrollbar-width:none}
.cd-navpill__view::-webkit-scrollbar{width:0;height:0;display:none}
.cd-navpill__view.is-active{display:block;height:100%;overflow:auto;overscroll-behavior:contain;
padding:104px var(--cd-navpill-rientro) var(--cd-s-7);
-webkit-mask-image:linear-gradient(to bottom,transparent 64px,#000 96px);
mask-image:linear-gradient(to bottom,transparent 64px,#000 96px)}
.cd-js .cd-navpill__view.is-active{animation:cd-view-fwd .36s var(--cd-ease)}
.cd-js .cd-navpill__view.is-active[data-dir="back"]{animation-name:cd-view-back}
@keyframes cd-view-fwd{from{opacity:0;transform:translateX(calc(16px * var(--cd-dir)))}}
@keyframes cd-view-back{from{opacity:0;transform:translateX(calc(-16px * var(--cd-dir)))}}
.cd-navpill__head{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.16em;text-transform:uppercase;
/* L'occhiello sale di un gradino con le voci: era `--cd-text-low`, che
sul pannello sopra una mappa chiara faceva 1,74:1. */
color:var(--cd-text-mid);margin-bottom:var(--cd-s-5);display:block}
/* Voci: entrano in sequenza quando il pannello si apre */
.cd-navpill__item{display:flex;align-items:center;gap:var(--cd-s-3);width:100%;text-align:start;
padding:13px 14px;border-radius:var(--cd-r-sm);border:1px solid transparent;background:transparent;
/* LE VOCI DI UN MENU SONO LA COSA DA LEGGERE, non un contorno: stanno
al colore piu' chiaro del sistema. Erano a `--cd-text-mid`, che e' il
colore del testo di servizio — e sopra un fondo chiaro le portava a
2,80:1. */
color:var(--cd-text-hi);font-family:var(--cd-f-display);font-size:var(--cd-size-10);font-weight:400;letter-spacing:-.02em;
transition:background 110ms linear,color 110ms linear,border-color 110ms linear;transition-delay:0s!important}
/* L'hover non cambia piu' colore perche' non avrebbe piu' niente da dire:
il riposo e' gia' `hi`. L'evidenziazione la fa la superficie, come per
il tasto Menu e per la lente. */
.cd-navpill__item:hover{background:rgba(255,255,255,.06)}
.cd-navpill__item.is-active{color:var(--cd-accent-300);background:rgba(var(--cd-accent-rgb),.1);border-color:rgba(var(--cd-accent-rgb),.35)}
/* Il contatore accanto alla voce: era il testo piu' tenue del sistema su
una superficie che non ne aveva i mezzi. Un numero che nessuno legge e'
un numero che tanto vale togliere. */
.cd-navpill__item small{margin-inline-start:auto;font-family:var(--cd-f-mono);font-size:var(--cd-size-2);color:var(--cd-text-mid)}
/* Sul telefono le voci si ingrossano per il pollice. Questo blocco stava
duecento righe piu' in su, insieme al resto delle regole per smartphone, e
perdeva contro la regola base qui sopra: stessa specificita', scritta dopo.
Per tre versioni il corpo e' rimasto 21 px invece di 23 e il riempimento
13 invece di 14 — misurato. Una media query non alza il peso di niente. */
@media (max-width:640px){
.cd-navpill__item{font-size:var(--cd-size-11);padding:14px}
}
/* La barra delle azioni del pannello: quanti risultati, azzera, vedi.
Resta ferma in fondo mentre il resto scorre.
NON e' un ornamento. Col menu aperto la pagina e' dietro uno scrim sfocato
ED e' inerte: chi filtra da qui non vede cosa sta succedendo, e su telefono
il pannello e' a tutto schermo e non vede proprio niente. Il conteggio e'
l'unico ritorno che riceve.
IN FONDO, non in cima, per due motivi. La vista sfuma i propri primi 96 px
con una maschera, e un'intestazione appiccicata li' sarebbe mezza
trasparente proprio mentre annuncia un numero. E su telefono il fondo e'
dove arriva il pollice.
Nessun vetro proprio: il pannello e' gia' g4 e vetro su vetro fa latte. Al
suo posto una sfumatura verso il basso — la maschera di sopra, rovesciata:
il contenuto non si tronca sotto la barra, si spegne.
I margini negativi la portano a filo dei bordi, che il riempimento della
vista terrebbe rientrata; quello in basso annulla la coda, senza la quale
`bottom:0` la fermerebbe staccata dal fondo. */
.cd-navpill__azioni{position:sticky;bottom:0;z-index:1;
display:flex;align-items:center;gap:var(--cd-s-3);
margin:var(--cd-s-5) calc(var(--cd-navpill-rientro) * -1) calc(var(--cd-s-7) * -1);
padding:var(--cd-s-4) var(--cd-navpill-rientro) var(--cd-s-5);
border-top:1px solid rgba(255,255,255,.09);
background:linear-gradient(to top,var(--cd-ink-900) 64%,transparent)}
.cd-navpill__azioni b{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);
letter-spacing:.06em;color:var(--cd-text-hi);font-weight:500}
.cd-navpill__azioni .cd-btn:last-child{margin-inline-start:auto}
/* Il riempimento per telefono arriva dal token, quindi qui non serve piu'
niente: era una seconda copia dello stesso numero. */
/* Dentro un accordion le voci del menu NON entrano in cascata. Il ritardo si
conta sul genitore diretto, quindi ogni accordion farebbe ripartire la
discesa da capo: quattro accordion darebbero quattro cascate in
contemporanea invece di una. Peggio: dentro un chiuso gli
elementi non sono renderizzati, l'animazione non parte, e aprendolo si
moltiplicherebbe con l'opacita' che l'accordion sta gia' animando da se' —
il contenuto entrerebbe due volte. */
.cd-acc .cd-navpill__item{animation:none;opacity:1;transform:none}
.cd-js .cd-navpill__item{opacity:0;transform:translateY(9px)}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item{animation:cd-item-in var(--cd-navpill-posa) var(--cd-ease) both}
@keyframes cd-item-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(1){animation-delay:.10s}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(2){animation-delay:.15s}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(3){animation-delay:.20s}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(4){animation-delay:.25s}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(5){animation-delay:.30s}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(6){animation-delay:.35s}
.cd-js .cd-navpill.is-open .cd-navpill__view.is-active .cd-navpill__item:nth-child(n+7){animation-delay:.40s}
/* Lingue: il blocco vive nella §56, insieme al radio e alle bandiere.
Qui restava una seconda dichiarazione degli stessi selettori con valori
divergenti — vinceva comunque la §56, quindi era codice morto. */
.cd-navpill__lang:hover .cd-navpill__radio{border-color:rgba(255,255,255,.42)}
html.cd-nav-locked{overflow:hidden;--cd-gap-fix:var(--cd-sbw)}
@media print{.cd-navpill{display:none!important}}
@media (forced-colors:active){
.cd-navpill__scrim{background:Canvas}
.cd-navpill__dot.is-active,.cd-navpill__item.is-active,.cd-navpill__lang.is-active{outline:2px solid Highlight;outline-offset:-2px}
}
/* Dove il pannello passa sotto la pillola, la pillola rinuncia al proprio
blur: vetro su vetro produrrebbe latte, non profondità.
`is-strascico` sta qui per la stessa ragione, letta all'incontrario. In
uscita da un overlay lo sfondo sfocato del resta nel top layer per
tutta la sua uscita, e la pillola ci sta DENTRO: riprendendosi il blur a
t=0 — com'era — se lo rimetteva sopra quello del dialog, cioe' proprio il
latte che questa regola esiste per evitare, a ogni chiusura, e nessuno lo
guardava perche' nessuno stava guardando li'. Ora se lo riprende a fine
morfosi, quando sotto non c'e' piu' niente da sfocare due volte — e il
fondo, che nella lista della superficie condivisa e' una transizione vera,
ci arriva invece di scattare. */
.cd-navpill.is-open .cd-navpill__toggle,.cd-navpill.is-overlay .cd-navpill__toggle,
.cd-navpill.is-strascico .cd-navpill__toggle,
.cd-navpill.is-open .cd-navpill__dot{
/* Aperto, il menu spegne la sfocatura — ma sopra una mappa bianca a
tutto schermo lo scrim al 50% compone un grigio medio, e un bianco
all'8% sopra quello e' di nuovo niente. La lastra serve anche qui.
Il valore deve restare IDENTICO a quello della barra di ricerca:
`prove.mjs` verifica che le due superfici si somiglino, ed e' giusto
che lo faccia. */
-webkit-backdrop-filter:none;backdrop-filter:none;
background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--cd-lastra)}
.cd-navpill.is-open .cd-navpill__dot.is-active{
background:linear-gradient(rgba(var(--cd-accent-rgb),.14),rgba(var(--cd-accent-rgb),.14)),var(--cd-lastra)}
/* ── 56 · BANDIERE — SVG inline, nessuna immagine esterna ───── */
/* Nessuna cornice: la bandiera è la bandiera, non un francobollo incorniciato */
.cd-flag{display:block;width:27px;height:18px;flex:none;border-radius:3px;overflow:hidden;forced-color-adjust:none}
.cd-flag svg{display:block;width:100%;height:100%}
.cd-flag--round{width:25px;height:25px;border-radius:50%;background:var(--cd-ink-950)}
/* Il quadrato entra nel cerchio senza ritaglio, quindi le bande restano a un
terzo esatto; il fondo scuro dietro evita la sfrangiatura ai poli. */
/* Elenco lingue: bandiera · nome · codice · selezione all'estrema destra */
.cd-navpill__langs{display:flex;flex-direction:column;gap:6px}
.cd-navpill__lang{display:flex;align-items:center;gap:13px;width:100%;text-align:start;
padding:11px 14px;border-radius:var(--cd-r-sm);border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.03);color:var(--cd-text-mid);
font-family:var(--cd-f-body);font-size:var(--cd-size-6);font-weight:300;letter-spacing:0;
transition:background var(--cd-t-fast) var(--cd-ease),color var(--cd-t-fast) var(--cd-ease),
border-color var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
/* Il codice della lingua sta nello stesso pannello delle voci: sale
con loro, o resta l'unica cosa che non si legge. */
.cd-navpill__lang b{margin-inline-start:auto;font-family:var(--cd-f-mono);font-size:var(--cd-size-2);font-weight:500;color:var(--cd-text-mid);letter-spacing:.06em}
/* Stessa storia della riga qui sopra: stava nel blocco per smartphone, che
nel foglio viene prima, e non e' mai arrivata. */
@media (max-width:640px){
.cd-navpill__lang{padding:13px 14px;font-size:var(--cd-size-7)}
}
.cd-navpill__code{display:block}
.cd-navpill__lang:hover{background:rgba(255,255,255,.07);color:var(--cd-text-hi);border-color:rgba(255,255,255,.18)}
.cd-navpill__lang.is-active{color:var(--cd-accent-300);background:rgba(var(--cd-accent-rgb),.1);
border-color:rgba(var(--cd-accent-rgb),.4)}
.cd-navpill__lang.is-active b{color:var(--cd-accent-500)}
/* Pallino di selezione: stesso linguaggio del radio del sistema */
.cd-navpill__radio{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.3);
transition:background var(--cd-t-fast) var(--cd-ease),border-color var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease)}
.cd-navpill__radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cd-accent-ink);
transform:scale(0);transition:transform var(--cd-t-fast) var(--cd-ease)}
.cd-navpill__lang.is-active .cd-navpill__radio{border-color:transparent;box-shadow:var(--cd-glow-1);
background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-500))}
.cd-navpill__lang.is-active .cd-navpill__radio::after{transform:scale(1)}
@media (forced-colors:active){
.cd-navpill__lang.is-active .cd-navpill__radio{border:2px solid Highlight}
.cd-flag{border:1px solid CanvasText}
}
/* Con un overlay aperto gli elementi fissi della pagina escono di scena:
sono cronologia della pagina, non dell'overlay. */
/* :where(:has(…)) e non :has(…) nudo: un selettore non supportato dentro una
lista separata da virgole invalida l'INTERA regola, quindi su un browser
senza :has saltava anche il ramo .cd-nav-locked, che di :has non ha
bisogno. Dentro :where l'ignoto non porta via nulla. */
html.cd-nav-locked .cd-top,html.cd-modal-locked .cd-top,html:where(:has(dialog:modal)) .cd-top,
html.cd-nav-locked .cd-cookie--fix,html.cd-modal-locked .cd-cookie--fix,html:where(:has(dialog:modal)) .cd-cookie--fix{
/* `visibility` oltre a opacita' e pointer-events: quelle due tolgono il
banner dalla vista e dal mouse, non dalla tabulazione. Il torna-su qui
accanto usa visibility dal suo stato base proprio per questo, e il
banner era rimasto indietro: sotto una modale restava raggiungibile
col Tab, dentro una pagina resa `inert`. */
opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(10px)}
html.cd-nav-locked .cd-pageline,html.cd-modal-locked .cd-pageline,html:where(:has(dialog:modal)) .cd-pageline{opacity:0}
.cd-pageline{transition:opacity var(--cd-t-mid) var(--cd-ease)}
/* ── 57 · FILE — l'unico controllo nativo che rompeva la lingua ──
Il bottone di sistema si stila con ::file-selector-button: nessun JS,
nessun input nascosto sotto un finto bottone (che toglie il nome del
file agli screen reader e la gestione nativa del drag). */
.cd-file{width:100%;padding:9px 12px;border-radius:var(--cd-r-sm);
background-color:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);
color:var(--cd-text-mid);font-size:var(--cd-size-5);cursor:pointer;
transition:border-color var(--cd-t-fast) var(--cd-ease),box-shadow var(--cd-t-mid) var(--cd-ease),background var(--cd-t-fast) var(--cd-ease)}
.cd-file::file-selector-button{
margin-inline-end:12px;padding:8px 16px;border-radius:var(--cd-r-full);
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
color:var(--cd-text-hi);font:inherit;font-size:var(--cd-size-4);font-weight:500;line-height:1;cursor:pointer;
transition:background var(--cd-t-fast) var(--cd-ease),border-color var(--cd-t-fast) var(--cd-ease)}
.cd-file::file-selector-button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24)}
.cd-file:focus{outline:none;border-color:rgba(var(--cd-cool-rgb),.6);box-shadow:0 0 0 2px var(--cd-focus),var(--cd-focus-velo)}
.cd-file:hover{border-color:rgba(255,255,255,.2)}
.cd-file.is-filled{border-color:rgba(var(--cd-ok-rgb),.45)}
/* Zona di rilascio: il file si trascina, non solo si sceglie */
.cd-file-drop{position:relative;display:block}
.cd-file-drop.is-over .cd-file{border-color:rgba(var(--cd-accent-rgb),.6);background-color:rgba(var(--cd-accent-rgb),.07);box-shadow:var(--cd-glow-1)}
@media (forced-colors:active){
.cd-file::file-selector-button{border:1px solid ButtonText}
.cd-file.is-filled{border:2px solid Highlight}
}
/* ── 58 · RANGE DOPPIO — un intervallo, due maniglie ─────────
Due input veri sovrapposti: ognuno resta un controllo nativo con la
sua etichetta e le sue frecce. Il binario e il segmento pieno sono
disegnati dal contenitore; agli input resta solo la maniglia, e i
pointer-events passano solo su quella — altrimenti quello sopra
coprirebbe l'altro e una delle due maniglie sarebbe irraggiungibile. */
/* La maniglia nativa NON viaggia su tutta la pista: percorre
larghezza − maniglia, rientrata di mezza maniglia a ogni estremo. Un
segmento posizionato a percentuale della pista intera sbaglia fino a
mezza maniglia — massimo agli estremi, dove si vede di più. Qui la
posizione si calcola con la stessa geometria del browser, e --cd-thumb
è dichiarata una volta sola per tutti e tre i punti che la usano. */
.cd-range-dual{position:relative;height:28px;display:block;--cd-thumb:17px;--cd-a:0;--cd-b:1}
.cd-range-dual::before,.cd-range-dual::after{content:"";position:absolute;top:50%;
height:3px;margin-top:-1.5px;border-radius:var(--cd-r-full);pointer-events:none}
.cd-range-dual::before{inset-inline-start:0;inset-inline-end:0;background:rgba(255,255,255,.14);z-index:0}
.cd-range-dual::after{
inset-inline-start:calc(var(--cd-thumb) / 2 + var(--cd-a) * (100% - var(--cd-thumb)));
inset-inline-end:calc(100% - (var(--cd-thumb) / 2 + var(--cd-b) * (100% - var(--cd-thumb))));
background:linear-gradient(90deg,var(--cd-accent-600),var(--cd-accent-300));box-shadow:var(--cd-glow-1);
z-index:1}
/* Le maniglie sopra il segmento: sono fratelli posizionati, e senza z-index
deciderebbe l'ordine nel DOM — lo pseudo-elemento e' l'ultimo, quindi il
riempimento passava DAVANTI alle maniglie e le tagliava con una riga. */
.cd-range-dual input{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:2;
-webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.cd-range-dual input:focus{outline:none}
.cd-range-dual input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
width:var(--cd-thumb);height:var(--cd-thumb);border-radius:50%;background:var(--cd-accent-300);
box-shadow:var(--cd-glow-2);border:none;cursor:grab}
.cd-range-dual input::-moz-range-thumb{pointer-events:auto;width:var(--cd-thumb);height:var(--cd-thumb);border:none;
border-radius:50%;background:var(--cd-accent-300);box-shadow:var(--cd-glow-2);cursor:grab}
.cd-range-dual input:active::-webkit-slider-thumb{cursor:grabbing}
.cd-range-dual input:active::-moz-range-thumb{cursor:grabbing}
.cd-range-dual input:focus-visible::-webkit-slider-thumb{box-shadow:var(--cd-glow-2),0 0 0 3px var(--cd-focus)}
.cd-range-dual input:focus-visible::-moz-range-thumb{box-shadow:var(--cd-glow-2),0 0 0 3px var(--cd-focus)}
.cd-range-dual__out{display:flex;justify-content:space-between;gap:var(--cd-s-4);
font-family:var(--cd-f-mono);font-size:var(--cd-size-3);color:var(--cd-text-mid);margin-top:6px}
.cd-range-dual__out b{color:var(--cd-text-hi);font-weight:500}
@media (forced-colors:active){
.cd-range-dual::before{background:CanvasText;height:1px}
.cd-range-dual::after{background:Highlight;height:3px}
}
@media (prefers-reduced-transparency:reduce){.cd-range-dual::after{box-shadow:none}}
/* ── 59 · BULK — cosa fare con le righe selezionate ──────────
La selezione e' interfaccia, quindi luce fredda: la barra non usa
l'accent, che resta del prodotto. Sta sopra la pagina ma sotto i
toast, e sparisce quando un overlay prende lo schermo. */
.cd-bulk{position:fixed;left:50%;bottom:var(--cd-s-5);transform:translateX(-50%) translateY(14px);
z-index:var(--cd-z-bulk);display:flex;align-items:center;gap:var(--cd-s-4);
padding-block:12px;padding-inline:var(--cd-s-5) 14px;border-radius:var(--cd-r-full);
max-width:calc(100vw - 32px);
border:1px solid rgba(var(--cd-cool-rgb),.35);background:rgba(var(--cd-cool-rgb),.1);
-webkit-backdrop-filter:blur(var(--cd-g3-blur)) saturate(var(--cd-g3-sat));
backdrop-filter:blur(var(--cd-g3-blur)) saturate(var(--cd-g3-sat));
box-shadow:var(--cd-rim-strong),var(--cd-cast-3),var(--cd-glow-cool-2);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--cd-t-mid) var(--cd-ease),transform var(--cd-t-mid) var(--cd-ease),visibility 0s linear var(--cd-t-mid)}
.cd-bulk.is-on{opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto;
transition:opacity var(--cd-t-mid) var(--cd-ease),transform var(--cd-t-mid) var(--cd-ease),visibility 0s}
.cd-bulk__n{font-family:var(--cd-f-mono);font-size:var(--cd-size-4);color:var(--cd-cool-100);white-space:nowrap}
.cd-bulk__n b{color:var(--cd-text-hi);font-weight:500}
.cd-bulk__sep{width:1px;align-self:stretch;background:rgba(255,255,255,.14)}
.cd-bulk .cd-btn{white-space:nowrap}
@media(max-width:560px){
.cd-bulk{inset-inline-start:var(--cd-s-4);inset-inline-end:var(--cd-s-4);transform:translateY(14px);
border-radius:var(--cd-r-lg);flex-wrap:wrap;justify-content:center}
.cd-bulk.is-on{transform:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.cd-bulk{background:var(--cd-ink-600)}
}
@media (prefers-reduced-transparency:reduce){
.cd-bulk{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cd-ink-600)}
}
@media (forced-colors:active){.cd-bulk{border:2px solid Highlight}}
/* Un overlay aperto e' un altro livello di attenzione: la barra si toglie */
html.cd-nav-locked .cd-bulk,html.cd-modal-locked .cd-bulk,html:where(:has(dialog:modal)) .cd-bulk{
opacity:0!important;pointer-events:none!important}
/* ── 60 · LISTE — filtri, pagine, ordinamento ────────────────
Solo gli stati che il comportamento accende: il resto e' gia' nel
sistema (cd-chip, cd-pages, cd-table). */
.cd-list-empty{display:none}
[data-cd-list].is-empty + .cd-list-empty,[data-cd-list].is-empty ~ .cd-list-empty{display:block}
/* L'intestazione ordinabile resta un con aria-sort — il
ruolo di intestazione di colonna non si perde — e il framework ci mette
dentro un vero: cosi' il controllo e' un controllo, con la sua
tabulazione e il suo Invio, senza che l'autore debba scriverlo. */
.cd-table th[data-cd-sort]{padding:0;white-space:nowrap}
.cd-th-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:7px;width:100%;
padding:14px 18px;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;
transition:color var(--cd-t-fast) var(--cd-ease),background var(--cd-t-fast) var(--cd-ease)}
.cd-th-btn:hover{color:var(--cd-text-hi);background:rgba(255,255,255,.035)}
.cd-th-btn:focus-visible{outline:2px solid var(--cd-focus);outline-offset:-2px}
.cd-th-btn::after{content:"";width:0;height:0;flex:none;border:4px solid transparent;
border-top-color:currentColor;opacity:.3;margin-top:2px;
transition:opacity var(--cd-t-fast) var(--cd-ease),transform var(--cd-t-fast) var(--cd-ease)}
.cd-table th[aria-sort="ascending"] .cd-th-btn::after{opacity:1;transform:rotate(180deg);border-top-color:var(--cd-accent-500)}
.cd-table th[aria-sort="descending"] .cd-th-btn::after{opacity:1;border-top-color:var(--cd-accent-500)}
.cd-table th.cd-num .cd-th-btn{justify-content:flex-end}
@media (forced-colors:active){
.cd-table th[aria-sort] .cd-th-btn::after{border-top-color:Highlight}
}
/* ── 61 · ICONE DI CONTATTO — data-cd-social="nome" ─────────
Quattro segni di sistema — email, telefono, mappa, sito — riquadro
24, tratto 1.6, estremi tondi. Fino alla 11.0 erano dodici: gli otto
sociali sono usciti, sostituiti dai marchi veri della sezione 62.
Qui restano quelli che un marchio non ce l'hanno, ed e' il motivo per
cui restano segni disegnati invece che loghi approssimati.
Stesso attributo `data-cd-social` per tutti e diciannove: il nome
sceglie la tabella, l'autore non deve saperlo.
La dimensione si detta con font-size sul contenitore, cosi' l'icona
sta accanto al testo senza numeri magici. */
.cd-ico{width:var(--cd-social-mono,1.06em);height:var(--cd-social-mono,1.06em);flex:none;display:block;
fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Fuori dal footer: un collegamento con icona e testo accanto */
.cd-ico-link{display:inline-flex;align-items:center;gap:8px}
@media (forced-colors:active){.cd-ico{stroke:currentColor}}
/* ── 62 · MARCHI — data-cd-social="instagram" ───────────────
I quindici loghi veri. Dalla 11.1 sono LE icone sociali del sistema:
stesso attributo dei quattro segni di contatto qui sopra, e il nome
sceglie la tabella. Nello stesso footer si mescolano senza attriti.
Non sono un ridisegno dei tracciati che c'erano — sono i marchi, con
le proporzioni e i colori che hanno. Un logo ridisegnato per stare
in una famiglia resta un'approssimazione di quel logo, e la 10.5 e
la 10.7 avevano gia' provato due volte quella strada.
Ogni marchio ha due facce. Il glifo da solo, che prende il colore
del testo come qualsiasi altra icona, e il badge completo col disco
di marca. Si sceglie una volta per tutto il sito, su :
· Candela.marchiStile('colore')
senza attributo · Candela.marchiStile('mono')
Il default e' mono, e non per prudenza: quindici dischi saturi
addosso a un fondo scuro sono quindici buchi di luce che si
contendono l'attenzione con il contenuto. A colori hanno senso dove
sono il contenuto — una pagina contatti, un elenco di profili.
Il glifo e' inciso nel disco a grandezza di logo: poco piu' di un
terzo del riquadro. Da solo sarebbe minuscolo, quindi in mono si
ingrandisce di 1.3406 — il numero che porta l'ingombro MEDIO dei
quindici a 17, la misura dei tracciati a linea. Uno solo per tutti,
non uno a testa: che la "f" di Facebook stia piu' larga del fulmine
di Snapchat e' una decisione di chi li ha disegnati, e adattare
ognuno al proprio riquadro la cancellerebbe. */
:root{--cd-social-zoom:1.3406}
.cd-marchio{width:var(--cd-social-mono,1.06em);height:var(--cd-social-mono,1.06em);
flex:none;display:block;fill:currentColor;stroke:none}
.cd-marchio__glifo{transform:scale(var(--cd-social-zoom));transform-origin:12px 12px;transform-box:view-box}
/* Snapchat e TikTok hanno un disegno diverso nelle due facce — un
contorno, due copie sfalsate — quindi ne portano due e se ne mostra
una. Gli altri tredici hanno un glifo solo, senza suffisso, che
resta visibile in tutte e due le modalita'. */
.cd-marchio__disco,.cd-marchio__glifo--c,.cd-ico__disco{display:none}
/* A colori: torna il disco, il glifo scende alla sua misura di marchio
e l'inchiostro diventa bianco. I tracciati che nel logo hanno un
colore proprio se lo portano scritto addosso e non lo sentono. */
[data-cd-marchi="colore"] .cd-marchio,[data-cd-marchi="colore"] .cd-ico{
width:var(--cd-social-colore,1.42em);height:var(--cd-social-colore,1.42em)}
[data-cd-marchi="colore"] .cd-marchio{fill:var(--cd-social-inchiostro,#fff)}
[data-cd-marchi="colore"] .cd-marchio__glifo{transform:none}
[data-cd-marchi="colore"] .cd-marchio__disco,[data-cd-marchi="colore"] .cd-marchio__glifo--c,
[data-cd-marchi="colore"] .cd-ico__disco{display:block}
[data-cd-marchi="colore"] .cd-marchio__glifo--m{display:none}
/* ── Il disco dei contatti ──────────────────────────────────
Email, telefono, mappa e sito non hanno un marchio da indossare, e
in un footer misto restavano gli unici spenti mentre tutto il resto
si accendeva: mezza fila di badge pieni e mezza di vetro vuoto.
Adesso hanno un disco anche loro, e ognuno il suo colore: arancio la
posta, verde il telefono, rosso la mappa, blu il sito. Sono le
convenzioni che si riconoscono senza leggere, ed e' l'unico punto
del sistema dove un colore non passa dall'accent — per la stessa
ragione per cui non ci passano i marchi: qui il colore E' il segno.
I due stop e l'asse a 45 gradi sono gli stessi dei quindici, cosi'
nella stessa fila i dischi sembrano parenti invece che due mondi.
I valori stanno in Candela.iconColors, accanto a quelli dei marchi.
Il glifo qui e' gia' disegnato alla misura del glifo solo, mentre
quello dei marchi e' inciso nel disco: le due famiglie sono a un
giro di scala l'una dall'altra, e a colori il contatto lo fa
all'indietro. Lo stesso numero, diviso invece che moltiplicato. */
.cd-ico__disco{stroke:none}
[data-cd-marchi="colore"] .cd-ico__glifo{
transform:scale(calc(1 / var(--cd-social-zoom)));transform-origin:12px 12px;transform-box:view-box;
stroke:var(--cd-social-inchiostro,#fff)}
/* Il ripiego per un'icona aggiunta senza colore: l'accent del sito. Si
riconosce dall'assenza dell'attributo `fill`, che il framework scrive
solo quando un colore c'e' davvero — una regola `fill` senza guardia
qui batterebbe il gradiente di tutti e quattro, perche' il CSS vince
sugli attributi di presentazione. */
.cd-marchio__disco:not([fill]),.cd-ico__disco:not([fill]){fill:var(--cd-accent-500)}
/* Il pozzo dei gradienti: uno per marchio, condiviso da tutte le copie
in pagina. Non `display:none` — un paint server dentro un ramo tolto
dal rendering e' terreno incerto fra i motori; zero per zero fuori
dal flusso lo trattano tutti allo stesso modo. */
.cd-marchi-defs{position:absolute;width:0;height:0;overflow:hidden}
/* Nel footer il badge E' il bottone: lasciargli sotto il vetro sarebbe
un cerchio dentro un cerchio. Vale per tutte e due le famiglie — il
disco d'accent di un contatto e' un disco pieno come quello di un
marchio. Il `:has` resta perche' un collegamento del footer puo'
contenere altro, e in quel caso il vetro deve restare. */
.cd-footer__social{--cd-social-mono:17px;--cd-social-colore:36px}
[data-cd-marchi="colore"] .cd-footer__social a:has(.cd-marchio),
[data-cd-marchi="colore"] .cd-footer__social a:has(.cd-ico){border:0;background:none}
/* In hover il bagliore sale di un gradino rispetto alla modalita' mono,
e non e' un capriccio: `--cd-glow-1` ha diffusione -2 e sfocatura 10,
cioe' vive fra i 24 e i 44 di diametro, e il badge opaco da 36 se ne
mangia i tre quarti. In mono il glifo e' 17 e il bagliore si vede
tutto; qui resterebbe un filo di quattro pixel. `--cd-glow-2` e' piu'
largo e ricompare da sotto il disco. */
[data-cd-marchi="colore"] .cd-footer__social a:has(.cd-marchio):hover,
[data-cd-marchi="colore"] .cd-footer__social a:has(.cd-ico):hover{background:none;box-shadow:var(--cd-glow-2)}
/* In contrasto forzato i colori di marca non arrivano comunque: resta la
sagoma sola, che il sistema operativo sa tingere — cioe' esattamente la
modalita' mono, riaccesa da sotto.
Ogni riga ripete il selettore della modalita' a colori accanto al
proprio, perche' una media query NON aggiunge specificita': scritte
solo come `.cd-marchio__disco`, valgono 0,1,0 e perdono contro
`[data-cd-marchi="colore"] .cd-marchio__disco`, che vale 0,2,0. Alla
prima stesura era cosi', e il disco restava acceso — visto emulando
forced-colors, non dedotto. */
@media (forced-colors:active){
.cd-marchio,[data-cd-marchi="colore"] .cd-marchio{fill:currentColor}
.cd-marchio__disco,[data-cd-marchi="colore"] .cd-marchio__disco,
.cd-ico__disco,[data-cd-marchi="colore"] .cd-ico__disco{display:none}
/* e il glifo del contatto torna alla sua misura e al colore di sistema */
[data-cd-marchi="colore"] .cd-ico__glifo{transform:none;stroke:currentColor}
/* Anche la faccia a colori torna a quella mono: il contorno di Snapchat
e le copie sfalsate di TikTok sono differenze di colore, e in una
tavolozza imposta diventano sagome sovrapposte. */
.cd-marchio__glifo--c,[data-cd-marchi="colore"] .cd-marchio__glifo--c{display:none}
.cd-marchio__glifo--m,[data-cd-marchi="colore"] .cd-marchio__glifo--m{display:block}
/* E il bottone si riprende il bordo che la modalita' a colori gli
aveva tolto: senza disco sotto, un marchio senza contorno galleggia. */
[data-cd-marchi="colore"] .cd-footer__social a:has(.cd-marchio),
[data-cd-marchi="colore"] .cd-footer__social a:has(.cd-ico){border:1px solid}
}
/* ── 63 · SEGNAPOSTO DI CONSENSO — [data-cd-src] in attesa ───
Un rettangolo grigio e' la resa: dice «rotto», non «in attesa di una
tua scelta». Qui il posto vuoto ha la grammatica dello stato vuoto —
tratteggio, disco con l'alone — e una riga in mono che NOMINA il terzo
che verrebbe contattato: e' quell'informazione a rendere il clic un
consenso invece di un riflesso.
Nessun backdrop-filter, apposta: il segnaposto vive dentro una card o
dentro la cornice di un video, e il blur dentro il blur fa latte. Non
avendone, non va aggiunto ai due elenchi di ripiego (@supports not
(backdrop-filter) e prefers-reduced-transparency). */
.cd-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cd-s-3);
text-align:center;padding:var(--cd-s-6) var(--cd-s-5);
border:1px dashed rgba(255,255,255,.14);border-radius:var(--cd-r-md);background:rgba(0,0,0,.28)}
/* Dentro la facciata video copre la cornice: li' il posto ce l'ha gia'. */
.cd-video>.cd-gate{position:absolute;inset:0;z-index:2;border:0;border-radius:0;background:rgba(4,4,9,.62)}
.cd-gate__ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
background:rgba(var(--cd-accent-rgb),.1);border:1px solid rgba(var(--cd-accent-rgb),.3);
box-shadow:var(--cd-glow-1);color:var(--cd-accent-300);font-size:var(--cd-size-9)}
.cd-gate__title{font-size:var(--cd-size-7);font-weight:500;color:var(--cd-text-hi)}
.cd-gate__host{font-family:var(--cd-f-mono);font-size:var(--cd-size-2);letter-spacing:.1em;
text-transform:uppercase;color:var(--cd-text-low);word-break:break-word}
.cd-gate__actions{display:flex;flex-wrap:wrap;gap:var(--cd-s-2);justify-content:center}
/* L'attributo `hidden` da solo non basta: la regola del browser vale (0,0,0)
e QUALUNQUE display d'autore la scavalca. E' successo due volte nella stessa
giornata — `img,svg,video{display:block}` (riga 193) lasciava a schermo
l'immagine bloccata come icona rotta accanto al proprio segnaposto, e
`.cd-cookie__cat{display:flex}` mostrava nel pannello le finalita' che il
sito non dichiara. Due selettori d'attributo valgono (0,2,0) e bastano:
niente !important. Visto in fotografia, non leggendo — nel DOM l'attributo
c'era davvero, ed e' per questo che un test che controlla `el.hidden`
passava mentre lo schermo diceva il contrario. */
[data-cd-src][hidden],.cd-cookie__cat[hidden]{display:none}
/* Come nel banner: dentro una superficie in vetro il bottone rinuncia al proprio. */
.cd-gate .cd-btn--glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.09)}
.cd-gate .cd-btn--glass:hover{background:rgba(255,255,255,.14)}
@media (forced-colors:active){.cd-gate{border:2px solid CanvasText}}
/* ── 64 · TESTO LUNGO — .cd-prosa ───────────────────────────
Ogni sito ha una pagina che il sistema non copriva: il chi siamo,
un articolo, le note legali, una scheda tecnica. Fino alla 11.3
quel testo usciva dal CMS come
nudi, e il
framework aveva stili solo per le classi — quindi o si annotava
ogni tag a mano, o la pagina piu' testuale del sito era l'unica
senza tipografia.
`.cd-prosa` e' l'unico punto del sistema che stila i TAG invece
delle classi, ed e' voluto: e' fatto per contenuto che arriva da
fuori e che non si puo' annotare. Vive dentro un contenitore, non
sul , cosi' la deroga resta circoscritta.
La misura di lettura sta in --cd-prosa-larga (66 caratteri, non
una scelta di gusto: sotto i 45 l'occhio torna a capo troppo
spesso, sopra i 75 perde la riga). Il ritmo verticale nasce dai
margini di distacco fra elementi diversi, non da margini uguali
ovunque: un titolo dopo un paragrafo respira, un titolo dopo un
titolo no. */
.cd-prosa{max-width:var(--cd-prosa-larga,66ch);font-size:var(--cd-size-6);line-height:1.72;color:var(--cd-text-mid)}
.cd-prosa>*+*{margin-top:var(--cd-s-4)}
.cd-prosa h2,.cd-prosa h3,.cd-prosa h4{color:var(--cd-text-hi);font-family:var(--cd-f-display);font-weight:500;line-height:1.22;letter-spacing:-.01em}
.cd-prosa h2{font-size:var(--cd-size-11)}
.cd-prosa h3{font-size:var(--cd-size-9)}
.cd-prosa h4{font-size:var(--cd-size-7)}
/* Il distacco sopra un titolo e' maggiore di quello sotto: cosi' il
titolo appartiene al testo che introduce, non a quello che chiude. */
.cd-prosa *+h2{margin-top:var(--cd-s-8)}
.cd-prosa *+h3{margin-top:var(--cd-s-7)}
.cd-prosa *+h4{margin-top:var(--cd-s-6)}
.cd-prosa h2+*,.cd-prosa h3+*,.cd-prosa h4+*{margin-top:var(--cd-s-3)}
.cd-prosa a{color:var(--cd-cool-300);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
text-decoration-color:rgba(var(--cd-cool-rgb),.45);transition:text-decoration-color var(--cd-t-fast) var(--cd-ease)}
.cd-prosa a:hover{text-decoration-color:var(--cd-cool-300)}
.cd-prosa strong,.cd-prosa b{color:var(--cd-text-hi);font-weight:500}
.cd-prosa em,.cd-prosa i{font-style:italic}
.cd-prosa ul,.cd-prosa ol{padding-inline-start:1.35em}
.cd-prosa li+li{margin-top:var(--cd-s-2)}
.cd-prosa li::marker{color:var(--cd-accent-500)}
.cd-prosa blockquote{margin-inline-start:0;padding-inline-start:var(--cd-s-5);border-inline-start:2px solid rgba(var(--cd-accent-rgb),.45);
color:var(--cd-text-hi);font-size:var(--cd-size-7);line-height:1.55}
.cd-prosa code{font-family:var(--cd-f-mono);font-size:.88em;padding:.15em .4em;border-radius:var(--cd-r-xs);
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:var(--cd-accent-300)}
.cd-prosa pre{padding:var(--cd-s-5);border-radius:var(--cd-r-md);background:rgba(0,0,0,.32);
border:1px solid rgba(255,255,255,.09);overflow-x:auto}
.cd-prosa pre code{padding:0;background:none;border:0;color:var(--cd-text-mid);font-size:var(--cd-size-4)}
.cd-prosa hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin-block:var(--cd-s-7)}
.cd-prosa img,.cd-prosa video{border-radius:var(--cd-r-md);max-width:100%;height:auto}
.cd-prosa figure{margin-inline:0}
.cd-prosa figcaption{margin-top:var(--cd-s-3);font-size:var(--cd-size-3);color:var(--cd-text-low);text-align:center}
.cd-prosa table{width:100%;border-collapse:collapse;font-size:var(--cd-size-5)}
.cd-prosa th,.cd-prosa td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:start}
.cd-prosa th{color:var(--cd-text-hi);font-weight:500}
/* Il testo lungo e' la cosa che piu' spesso finisce su carta. */
@media print{.cd-prosa{max-width:none;color:#333}.cd-prosa a{color:#111}}
/* ── 65 · DATA E ORA — input[type=date|time|month|week] ─────
Era l'ultimo controllo nativo che rompeva la lingua del sistema,
come il campo file prima della 11.0: fondo bianco di sistema,
testo nero, e l'icona del calendario invisibile su fondo scuro
perche' il browser la disegna nera. `color-scheme:dark` sul
controllo dice al motore di ridisegnare TUTTO il widget in scuro —
compreso il calendario a comparsa, che nessun CSS puo' raggiungere.
E' la stessa dichiarazione che la riga 4 mette su :root, ripetuta
qui perche' i controlli nativi non la ereditano sempre. */
.cd-input[type="date"],.cd-input[type="time"],.cd-input[type="datetime-local"],
.cd-input[type="month"],.cd-input[type="week"]{color-scheme:dark;min-height:44px}
/* L'icona del calendario: bianca, opaca quanto il resto, e cliccabile
su tutto il campo invece che sui suoi 16 px. */
.cd-input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer;
transition:opacity var(--cd-t-fast) var(--cd-ease)}
.cd-input:hover::-webkit-calendar-picker-indicator{opacity:.9}
.cd-input::-webkit-datetime-edit-fields-wrapper{padding:0}
.cd-input::-webkit-datetime-edit-text{color:var(--cd-text-low);padding:0 2px}
/* ── 66 · SEGMENTATO — .cd-seg ──────────────────────────────
Due o tre scelte che stanno tutte a schermo: un menu a tendina le
nasconderebbe dietro un clic e un gruppo di radio le sparpaglia.
Sotto ci sono radio veri — frecce, gruppo, nome accessibile e
lettura da parte degli screen reader arrivano dal browser, non da
noi. Il cursore e' un solo pseudo-elemento che scorre, non un
fondo per ogni voce: cosi' il movimento e' continuo e c'e' una
sola superficie accesa, come vuole la regola del bagliore. */
.cd-seg{display:inline-flex;position:relative;padding:3px;gap:2px;border-radius:var(--cd-r-full);
background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1)}
.cd-seg label{position:relative;z-index:1;display:grid;place-items:center;padding:7px 16px;border-radius:var(--cd-r-full);
font-size:var(--cd-size-4);color:var(--cd-text-low);cursor:pointer;white-space:nowrap;
transition:color var(--cd-t-fast) var(--cd-ease)}
.cd-seg input{position:absolute;opacity:0;width:0;height:0;margin:0}
.cd-seg label:hover{color:var(--cd-text-hi)}
.cd-seg input:checked+span{color:var(--cd-accent-ink)}
.cd-seg label:has(input:checked){color:var(--cd-accent-ink)}
.cd-seg label:has(input:checked)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(180deg,var(--cd-accent-300),var(--cd-accent-500));box-shadow:var(--cd-glow-1)}
.cd-seg label:has(input:focus-visible){outline:2px solid var(--cd-focus);outline-offset:2px}
@media (forced-colors:active){
.cd-seg label:has(input:checked){background:Highlight;color:HighlightText;forced-color-adjust:none}
}
/* ── 67 · TOOLTIP NEL LIVELLO ALTO — .cd-tip ────────────────
Il tooltip della sezione 16 e' uno ::after sul grilletto: dentro
qualunque antenato con overflow:hidden sparisce, e ai bordi dello
schermo esce. Il rimedio non e' spostare l'elemento, e' cambiargli
piano: `popover` lo mette nel livello alto del browser, dove non
esistono ritagli ne' z-index.
Il CSS della sezione 16 resta e vale ancora dove il popover non
c'e': il JS aggiunge `cd-tip-js` su solo se il browser lo
sostiene, e solo allora la vecchia via si spegne. Nessuna delle
due e' un ripiego dell'altra — sono la stessa cosa su due piani. */
html.cd-tip-js [data-cd-tip]::after{content:none}
.cd-tip{position:fixed;margin:0;inset:auto;padding:6px 11px;border:1px solid rgba(255,255,255,.14);
border-radius:var(--cd-r-xs);background:var(--cd-ink-600);color:var(--cd-text-hi);
font-size:var(--cd-size-3);line-height:1.4;max-width:min(280px,calc(100vw - 24px));
box-shadow:var(--cd-cast-2);opacity:0;transform:translateY(3px);
transition:opacity var(--cd-t-fast) var(--cd-ease),transform var(--cd-t-fast) var(--cd-ease);
overflow:visible}
.cd-tip:popover-open{opacity:1;transform:none}
.cd-tip::backdrop{background:none}
@media (prefers-reduced-motion:reduce){.cd-tip{transition:none;transform:none}}
@media (forced-colors:active){.cd-tip{border:1px solid CanvasText}}
/* ── 68 · COMBOBOX — .cd-combo [data-cd-combo] ──────────────
Era il pezzo di form che mancava e il piu' difficile da fare a
mano: un campo che filtra un elenco mentre si scrive, con le
frecce, l'annuncio del numero di risultati e la semantica giusta.
Il sistema ne aveva gia' uno addosso senza saperlo — la palette
dei comandi (sezione 44) e' un combobox completo dalla 10.9, con
`role="combobox"`, `aria-expanded`, `aria-activedescendant` e il
conteggio annunciato. Qui quel comportamento esce dall'overlay e
diventa un controllo di modulo.
Un