/* ============================================================ TOKEN — l'unica fonte di colori, spazi e misure. Regola: nei componenti solo variabili, mai valori a mano. Nota rispetto al sito del vet: là i colori del tema scuro sono scritti tre volte (media query + due override) ed è una trappola — ne cambi uno e dimentichi gli altri. Qui il tema lo imposta sempre lo script nel , quindi ogni valore compare UNA volta. ============================================================ */ :root { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --step--1: .82rem; --step-0: 1rem; --step-1: 1.15rem; --step-2: 1.45rem; --step-3: 1.9rem; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius: 10px; --radius-sm: 6px; --maxw: 1240px; --measure: 68ch; --tap: 44px; /* bersaglio minimo per il dito */ --transition: 150ms ease; } :root[data-theme="light"] { --paper: #F5F4EF; --surface: #FFFFFF; --surface-2: #FAF9F4; --ink: #1C221F; --ink-soft: #5C665F; --brand: #2B5F52; --brand-strong: #1B4438; --brand-tint: #E6EFE9; --warn: #8A5A12; --warn-tint: #FBF0DC; --border: #E0DED2; --shadow: 0 1px 2px rgba(20,26,23,.05), 0 8px 24px -14px rgba(20,26,23,.22); } :root[data-theme="dark"] { --paper: #111614; --surface: #1A211E; --surface-2: #212A26; --ink: #EBEAE1; --ink-soft: #9BA69E; --brand: #7CC4AB; --brand-strong: #97D8C0; --brand-tint: #1C2C27; --warn: #E0B061; --warn-tint: #2C2415; --border: #2B342F; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.6); } /* ============================================================ BASE */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-text-size-adjust: 100%; } h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); } h1 { font-size: var(--step-2); } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); } p { margin: 0 0 var(--space-3); max-width: var(--measure); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } .skip { position: absolute; left: -9999px; background: var(--brand); color: var(--paper); padding: var(--space-3); border-radius: var(--radius); } .skip:focus { left: var(--space-4); top: var(--space-4); z-index: 20; } /* ============================================================ TESTATA */ .top { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); } .top-in { max-width: var(--maxw); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4); } .top h1 { margin: 0; font-size: var(--step-1); } .top .sub { color: var(--ink-soft); font-size: var(--step--1); margin: 0; } .top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .saved { font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; } /* ============================================================ LAYOUT */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } @media (max-width: 900px) { .wrap { grid-template-columns: minmax(0, 1fr); } /* In colonna il riepilogo va IN FONDO: se sta in cima ti tocca scavalcarlo ogni volta che apri lo strumento per fare una domanda. */ .side { position: static; } } /* ============================================================ SEZIONI */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--shadow); } .card > h2 { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; font-size: var(--step-1); } /* Macrosezione chiudibile: testata cliccabile + corpo che si apre/chiude. Il chevron sta a DESTRA e ruota quando si chiude. */ .mac { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-4); box-shadow: var(--shadow); overflow: hidden; } .mac-head { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; } .mac-head:hover { background: var(--surface-2); } .mac-head h2 { flex: 1; font-size: var(--step-1); margin: 0; } .chev { width: 22px; height: 22px; color: var(--ink-soft); flex: none; transition: transform var(--transition); } .mac.is-closed .chev { transform: rotate(-90deg); } .mac-body { padding: 0 var(--space-5) var(--space-5); } .mac.is-closed .mac-body { display: none; } /* Sotto-titolo dentro un blocco (gruppi di moduli, «Missione e visione»…). */ .sub, .qsub { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin: var(--space-5) 0 var(--space-2); } /* Etichetta del modulo a cui appartengono le domande. */ .modtag { display: inline-block; font-size: var(--step--1); font-weight: 700; letter-spacing: .03em; color: var(--brand-strong); background: var(--brand-tint); border-radius: 999px; padding: 2px var(--space-3); margin: var(--space-4) 0 var(--space-2); } .qnone { font-size: var(--step--1); color: var(--ink-soft); font-style: italic; margin: 0 0 var(--space-4); } .note { background: var(--brand-tint); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--step--1); max-width: var(--measure); } /* ============================================================ CAMPI */ .field { margin-bottom: var(--space-4); max-width: var(--measure); } .field label { display: block; font-weight: 600; margin-bottom: var(--space-2); } .field .hint { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--space-2); } input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea, select { width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition); } input:hover, textarea:hover, select:hover { border-color: var(--ink-soft); } textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; } textarea.list { font-family: var(--font-mono); font-size: var(--step--1); } /* Campo largo (ripetibili, colori): non stretto alla misura di lettura. */ .field--wide { max-width: none; } /* Campi ripetibili — schede aggiungibili (servizi, FAQ, tappe, confronto, canali). */ .rep-list { margin-bottom: var(--space-2); } .rep-row.card-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-2); background: var(--surface-2); } .card-row > input, .card-row > textarea { width: 100%; margin-bottom: var(--space-2); } .card-row > textarea { min-height: 3.5rem; } .pair-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--space-2); } .rep-x, .cp-x { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); border-radius: var(--radius-sm); width: 2rem; height: 2rem; cursor: pointer; flex: none; } /* Selettore colori: quadratino nativo + esadecimale + RGB, più colori. */ .cp-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; } .cp-native { width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; } .cp-name { width: 7rem; } .cp-hex { width: 9.5rem; font-family: var(--font-mono); text-transform: uppercase; } .cp-rgb { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); min-width: 9rem; } /* ============================================================ MODULI */ /* container-type: la riga del modulo reagisce alla larghezza della SUA colonna (non della finestra), così va bene sia nel pannello stretto sia da telefono. */ .mods { display: grid; gap: var(--space-2); container-type: inline-size; } /* La CARD del modulo: il bordo avvolge testata E esempio, così aprendo l'esempio la card si ESPANDE e lo contiene (niente riquadro separato). */ .mod-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; transition: border-color var(--transition), background var(--transition); } .mod-item:hover { border-color: var(--brand); } .mod-item.on { border-color: var(--brand); background: var(--brand-tint); } .mod-item.fixed { opacity: .85; } .mod-item.fixed:hover { border-color: var(--border); } /* La testata cliccabile (contiene la casella): trasparente, dentro la card. Flex con a-capo: quando è stretta, i tag e «vedi esempio» vanno sotto invece di schiacciare il testo. */ .mod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); min-height: var(--tap); cursor: pointer; } .mod-item.fixed .mod { cursor: default; } .mod > input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; } .mic { width: 22px; height: 22px; color: var(--ink-soft); flex: none; } .mod-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 11rem; } .mod-name { font-weight: 600; } .mod-does { font-size: var(--step--1); color: var(--ink-soft); } .mod-tags { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; flex: 0 0 auto; } .tag { font-size: var(--step--1); font-weight: 600; padding: 2px var(--space-2); border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .tag-size { color: var(--ink-soft); } /* Il significato non è mai affidato al solo colore: c'è sempre la parola. */ .tag-maint { background: var(--warn-tint); color: var(--warn); border-color: transparent; } .tag-new { background: var(--brand-tint); color: var(--brand-strong); border-color: transparent; } /* «vedi esempio»: espande l'esempio SOTTO la riga (come le macrosezioni), col chevron che ruota. È un