/* NOTA PER IL RIUSO: i valori di :root (colori, font, raggi, ombre) sono
quelli di BULB. Sostituiscili con i design token della nuova consegna. La
STRUTTURA (nav, footer, bottoni, form, card, FAQ, reveal, skin WPForms) è
invece riusabile così com'è. */
/* ===========================================================================
sv-base.css — design system condiviso, caricato su OGNI pagina.
Struttura dalla consegna BULB (formato x-dc), tema scuro. Stile dal
RESTYLING del 24/9/2026 sulla presentazione di marca "Presentazione
BULB_26.11.25" (linea FUNCTIONAL): palette, gradiente, righe della griglia,
sopratitoli fra parentesi quadre, bottoni squadrati. Posizioni ed elementi
delle pagine non sono cambiati. Lo stato di prima è in
.backup/2026-09-24-prima-del-restyling/ (vedi STATO-PROGETTO.md).
- Palette: una sola, in :root. Le palette alternative dello scheletro
(data-palette) sono state tolte: erano per un tema chiaro e qui avrebbero
invertito testo e fondo. L'unica variante è la fascia .band-cream, che
ridefinisce i token solo dentro di sé.
- Caratteri: due set commutabili, rebranding (default) e consegna, scelti
con data-font sull'elemento html (vedi il blocco "Type" qui sotto).
- La skin WPForms in fondo al file è tutta in !important: il foglio del
plugin è accodato dopo questo.
=========================================================================== */
:root {
/* Altezza della barra della testata (senza il bordo da 1px). Una pagina che la
cambia ridefinisce questa variabile: la usano .nav e, da telefono, lo spazio
che il body lascia alla testata fissa (sv-responsive.css). Dal 19/10. */
--nav-h: 72px;
/* Palette BULB, linea FUNCTIONAL — i valori sono quelli della presentazione
di marca, letti dal PDF (non campionati a occhio). I nomi --bulb-* servono
a chi legge; i componenti usano i ruoli qui sotto, mai questi direttamente.
Regola colore della presentazione per il fondo indaco: lettere bianche,
accento rosso e lime, tono viola. */
--bulb-indigo: #170144; /* BULB SPACE scuro */
--bulb-black: #1D1A1F; /* BLACK */
--bulb-violet: #5740E2; /* BULB SPACE */
--bulb-red: #DC0034; /* 01 FUNCTIONAL */
--bulb-red-hot: #F80034; /* la luce del gradiente Functional */
--bulb-red-deep: #BC0430; /* un passo sotto il rosso nella scala Functional */
--bulb-bordeaux: #750030; /* il tono scuro della linea Functional */
--bulb-lime: #B1F900; /* ACCENT LIME */
--bulb-light-grey: #D6D6D6; /* LIGHT GREY */
--bulb-middle-grey: #B4B3B4; /* MIDDLE GREY */
/* Il sito e' scuro: --bg e' lo sfondo, --ink e' il TESTO (chiaro).
Le sezioni chiare usano la classe .band-cream, non una palette alternativa. */
--bg: var(--bulb-indigo);
--bg-alt: #1D0754; /* indaco con il 10% di viola: lo stacco delle fasce */
--bg-deep: var(--bulb-black);
--surface: #230C60; /* indaco con il 18% di viola: campi, schede, popup */
--surface-2: #291370;
--ink: #ffffff;
--ink-soft: var(--bulb-light-grey);
--ink-mute: var(--bulb-middle-grey);
--accent: var(--bulb-red); /* riempimenti: bottoni, pallini, pin */
/* Il rosso Functional sull'indaco fa 3.6:1: basta per i riempimenti e il testo
grande, non per quello normale. --accent-dark è la sua versione più CHIARA
per il testo piccolo (5.4:1 sull'indaco, 4.7:1 sulle schede); --accent-hot
è la luce del gradiente, solo per il testo grande (le parole in evidenza
dei titoli, 4.5:1). */
--accent-dark: #FF3D5E;
--accent-hot: var(--bulb-red-hot);
--accent-soft: rgba(248,0,52,.30);
--accent-tint: rgba(220,0,52,.14);
--tone: var(--bulb-violet); /* il "tono" delle regole colore: linee, aloni */
--tone-soft: rgba(87,64,226,.30);
--border: rgba(255,255,255,.13);
--border-soft: rgba(255,255,255,.07);
/* Segnaposto dei campi: il middle grey fa 7.8:1 sul fondo dei campi e resta
distinguibile dal testo digitato, che è bianco. */
--placeholder: var(--bulb-middle-grey);
--success: var(--bulb-lime); /* citta' attive, conferme, numeri dei passi */
--warning: var(--bulb-lime); /* sopratitoli di richiamo: il giallo della consegna non è nella palette */
/* Sezione chiara (recensioni): il LIGHT GREY della presentazione, testo
BLACK. I nomi --cream-* restano per compatibilità con i template. */
--cream: var(--bulb-light-grey);
--cream-ink: var(--bulb-black);
--cream-soft: #46434A;
/* Grigio di servizio: 5.2:1 sul light grey, 7.5:1 sul bianco delle schede. */
--cream-mute: #56535A;
--cream-border: #C4C3C6;
/* Il gradiente Functional (pagine 41-43 della presentazione): una luce rossa
che sfuma nel bordeaux e nell'indaco. Le luci stanno ai bordi, lontano dal
testo piccolo: al centro il fondo resta scuro. */
--grad-functional:
radial-gradient(58% 85% at 76% -12%, rgba(248,0,52,.62), rgba(117,0,48,.40) 42%, transparent 72%),
radial-gradient(45% 70% at 4% 112%, rgba(220,0,52,.46), rgba(117,0,48,.30) 45%, transparent 75%),
radial-gradient(40% 60% at 102% 104%, rgba(87,64,226,.26), transparent 70%);
/* Grid line (pagine 32-43): righe verticali sottili, sei colonne. */
--grid-line: rgba(255,255,255,.07);
/* ── Type: due set intercambiabili ──────────────────────────────────────
Il set attivo si sceglie da Impostazioni sito → Brand → Set tipografico:
scrive data-font sull'elemento html. Qui sotto c'è il set del REBRANDING
(Red Hat Display + Space Grotesk, gli stessi del sito di sviluppo); il set
della consegna è definito subito dopo ed è a un clic di distanza. Tutti e
cinque i font sono self-hostati, quindi tornare indietro non richiede di
riscaricare niente né di toccare il codice.
I ruoli sono tre e i template usano SOLO questi, mai il nome di un font:
--font-display titoli ed etichette di interfaccia
--font-sans testo corrente
--font-mono sopratitoli e microtesti spaziati
Nel set nuovo il ruolo "mono" NON è un monospaziato: il rebranding usa il
display in maiuscolo spaziato, come fa il sito di sviluppo. Per questo la
spaziatura è un token a parte: il monospaziato regge 0.22em, Red Hat
Display a quella distanza si sfilaccia. */
--font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-display); /* nessun serif in questo progetto */
--font-mono: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
--mono-tracking: 0.16em;
--mono-weight: 600;
/* Layout */
--container: 1240px;
--gutter: 24px;
/* Angoli stretti: la linea Functional è fatta di blocchi squadrati (il ">"
nel quadrato, i riquadri divisi da righe). Prima erano 8 / 14 / 22 e
bottoni a pillola. */
--radius-s: 4px;
--radius-m: 8px;
--radius-l: 12px;
/* Shadow — su fondo scuro l'ombra e' nera, non color inchiostro */
--shadow-sm: 0 1px 2px rgba(0,0,0,.30);
--shadow-md: 0 10px 30px -12px rgba(0,0,0,.55);
--shadow-lg: 0 30px 70px -24px rgba(0,0,0,.70);
}
/* ===== Set tipografico della consegna (rollback) =====
Si attiva scegliendo "Consegna originale" nelle impostazioni sito. Ridefinisce
soltanto i tre ruoli e la loro spaziatura: nessuna misura, nessun colore e
nessuna regola di layout dipendono dal set, quindi il passaggio nei due sensi
non sposta niente altro. */
:root[data-font="consegna"] {
--font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-display);
--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--mono-tracking: 0.22em;
--mono-weight: 400;
}
/* ===== Sezione chiara =====
La consegna alterna fondo scuro e una sola fascia chiara (recensioni e
recensioni video): era crema, dal restyling è il light grey di BULB.
Non e' una palette alternativa del sito: e' una sezione, quindi ridefinisce
i token SOLO dentro di se'. Cosi' card, bottoni e form dentro la fascia
restano gli stessi componenti, senza varianti duplicate. */
.band-cream {
--bg: var(--cream);
--bg-alt: #CDCCCF;
--surface: #ffffff;
--ink: var(--cream-ink);
--ink-soft: var(--cream-soft);
--ink-mute: var(--cream-mute);
--border: var(--cream-border);
--border-soft: #CBCACD;
/* Sul chiaro la luce rossa del gradiente non regge (2.9:1): il rosso pieno
per il testo grande, un passo più scuro per quello piccolo (4.5:1). */
--accent-hot: var(--bulb-red);
--accent-dark: var(--bulb-red-deep);
--grid-line: rgba(29,26,31,.08);
background: var(--cream);
color: var(--cream-ink);
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* rete di sicurezza contro gli sfori orizzontali */
}
/* ⚠️ height:auto non è cosmetico. WordPress stampa width e height sull'
(giustamente: servono al browser per riservare lo spazio ed evitare i salti
di layout). Quegli attributi valgono come dichiarazioni di stile, quindi
l'altezza risulta DEFINITA — e una `aspect-ratio` messa nel CSS viene
ignorata, perché si applica solo quando una delle due misure è auto.
Senza questa riga le griglie con ritaglio quadrato mostrano la foto alta
quanto l'originale, e la cella resta mezza vuota. */
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
margin: 0; font-family: var(--font-display); font-weight: 800;
line-height: 1.1; letter-spacing: -0.02em;
}
/* Il titolo principale di ogni pagina è in maiuscolo, come "BULB® FUNCTIONAL
SPACE" nella presentazione: Black, interlinea stretta. Gli h2 restano in
minuscolo, sono frasi lunghe. */
h1 { font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
h2 { font-weight: 900; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
/* ===== Type ===== */
/* La consegna non ha un serif: l'enfasi nei titoli e' la parola nel rosso
acceso del gradiente Functional (solo testo grande, vedi --accent-hot).
La classe resta .serif per compatibilita' col motore (wp_kses_post nei titoli). */
.serif { font-family: inherit; font-weight: inherit; font-style: normal; color: var(--accent-hot); }
.mono { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 0.85em; letter-spacing: 0.04em; }
/* Sopratitolo fra parentesi quadre, come "[ FNCTNL2025 ]" e "[ ACCENT ]" nella
presentazione: testo bianco, parentesi nel rosso acceso. Le parentesi sono
decorazione: il testo alternativo vuoto dopo la barra le toglie agli screen
reader. */
.eyebrow {
font-family: var(--font-mono);
font-size: 13px; font-weight: var(--mono-weight); letter-spacing: var(--mono-tracking);
text-transform: uppercase; color: var(--ink);
display: inline-block;
}
.eyebrow::before, .eyebrow::after { color: var(--accent-hot); font-weight: 400; letter-spacing: 0; }
.eyebrow::before { content: "[" / ""; margin-right: .75em; }
.eyebrow::after { content: "]" / ""; margin-left: .55em; }
/* ⚠️ Le parentesi allungano la riga di due caratteri: sotto i 640px il
sopratitolo va a capo (sv-responsive.css), altrimenti sforerebbe. */
/* ===== Container ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* ===== Buttons ===== */
/* Squadrati, in maiuscolo spaziato, con il ">" della presentazione in fondo
(disegnato col bordo: nessun carattere da leggere, nessuna icona da caricare).
Il rosso Functional porta il bianco a 5.1:1; al passaggio scurisce, perché
la luce rossa col testo bianco scenderebbe a 4.2:1. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
padding: 14px 22px; border-radius: var(--radius-s);
font-family: var(--font-display); font-weight: 800; font-size: 14px;
letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
border: 1px solid transparent; cursor: pointer;
transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--bulb-red-deep); color: #fff; }
.btn-primary::after {
content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-right: 2px;
border: solid currentColor; border-width: 2px 2px 0 0;
transform: rotate(45deg); transition: transform .2s ease;
}
.btn-primary:hover::after { transform: translateX(3px) rotate(45deg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: #000; }
.btn-sm { padding: 10px 14px; font-size: 12.5px; gap: 10px; }
.btn-sm.btn-primary::after { width: 6px; height: 6px; }
.btn-lg { padding: 18px 28px; font-size: 15px; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { transition: none; } }
/* ===== Header ===== */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in oklab, var(--bg) 85%, transparent);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--border-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-mark {
width: 34px; height: 34px; border-radius: 8px;
background: var(--ink); color: var(--bg);
display: grid; place-items: center;
font-weight: 700; font-size: 14px; letter-spacing: 0;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
/* Voci in maiuscolo spaziato, come le etichette della presentazione. */
.nav-links a {
font-family: var(--font-display); font-size: 13px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink); position: relative; padding: 8px 0;
}
/* --accent (rosso pieno) sull'indaco dà 3.6:1, sotto la soglia di 4.5:1 per il
testo normale. --accent-dark è la variante più CHIARA e arriva a 5.4:1.
Vale per ogni testo accento su fondo scuro: il rosso pieno resta ai
riempimenti (bottoni, pallini), dove la soglia è più bassa. */
.nav-links a:hover { color: var(--accent-dark); text-decoration: none; }
.nav-links a.active { color: var(--accent-dark); }
/* La voce della pagina aperta ha la riga rossa sotto, come le barre di colore
della presentazione. */
@media (min-width: 961px) {
.nav-links a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
height: 2px; background: var(--accent);
}
}
.nav-links .has-mega { display: flex; align-items: center; gap: 4px; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.tel-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tel-link svg { color: var(--accent); }
/* Mega menu (desktop) */
.mega-wrap { position: relative; }
.mega {
position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-m); padding: 14px;
width: 640px; box-shadow: var(--shadow-lg);
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px);
transition: opacity .15s ease, transform .15s ease;
}
.mega-wrap:hover .mega, .mega-wrap:focus-within .mega {
opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-item { display: block; padding: 12px 14px; border-radius: var(--radius-s); text-decoration: none !important; }
.mega-item:hover { background: var(--bg-alt); }
.mega-item .t { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; display: block; color: var(--ink); }
.mega-item .d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.mega-foot {
grid-column: 1 / -1; border-top: 1px solid var(--border-soft);
padding: 12px 14px 4px; font-size: 12px; color: var(--ink-mute);
display: flex; justify-content: space-between;
}
/* Burger — assente nella consegna (era un'app desktop-first): aggiunto qui.
Visibilità e drawer sono gestiti nel layer responsive. */
.nav-burger {
display: none; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0;
background: transparent; border: 1px solid var(--border); border-radius: var(--radius-s);
color: var(--ink); flex-direction: column; gap: 4px;
}
.nav-burger span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* Selettore della lingua (plugin BULB Lingue, azione sv_testata_azioni): c'è
solo sulle pagine con una traduzione collegata. Sta fuori da .nav-cta, quindi
resta visibile anche da telefono. La lingua della pagina è la pastiglia piena. */
.lingue {
display: flex; align-items: center; gap: 2px; flex-shrink: 0;
padding: 3px; border: 1px solid var(--border); border-radius: 999px;
}
.lingue-voce {
font-family: var(--font-mono); font-weight: var(--mono-weight);
font-size: 12px; letter-spacing: .12em; line-height: 1;
padding: 8px 10px; border-radius: 999px; color: var(--ink);
}
a.lingue-voce:hover { background: var(--border-soft); color: var(--ink); text-decoration: none; }
.lingue-voce.is-attiva { background: var(--ink); color: var(--bg); }
/* ===== Sections ===== */
section { padding: 96px 0; }
section.section-tight { padding: 64px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; max-width: 720px; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.025em; }
.section-head h2 em { font-style: normal; }
.section-head h2 .serif { color: var(--accent-dark); }
.section-head p { color: var(--ink-soft); font-size: 17px; max-width: 56ch; }
/* ===== Footer =====
Dal 24/9 sera è il footer dei layout di `Bulb_ landing FL/`. Qui c'è quello
della v2, che dal 25/9 vale per tutto il sito (le due landing, home e
conferme): fondo rosso Functional, la scritta grande in maiuscolo, l'hashtag, e
sotto una riga sola con contatti, link dei menu e marchio con l'etichetta.
Il markup ha ancora payoff e riga legale del footer della v1 (una riga sola,
i due testi a destra), che oggi nessuna pagina mostra. */
.site-footer {
background: var(--bulb-red); color: #fff;
padding: 64px 0 40px; margin-top: 0; overflow: hidden;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-manifesto-titolo {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
letter-spacing: -.04em; line-height: .9;
/* 140px come il layout; da telefono si ferma a 34px, perché "INFINITE USES"
a 48px (il minimo del layout) è più largo dello schermo. */
font-size: clamp(34px, 10vw, 140px); margin: 0;
}
/* Nel layout è Neue Machina: qui il carattere del testo corrente, che nel nostro
set tipografico ne fa le veci. */
.foot-hashtag {
margin: 20px 0 0; font-family: var(--font-sans); font-weight: 400;
font-size: clamp(28px, 4.5vw, 64px); letter-spacing: -.01em; line-height: 1;
}
.foot-riga {
display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.35);
}
/* Senza la scritta grande la riga apre il footer: niente spazio sopra. */
.site-footer > .container > .foot-riga:first-child { margin-top: 0; }
.foot-contatti, .foot-menu ul {
display: flex; gap: 8px 24px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
}
.foot-menu { display: flex; gap: 8px 32px; flex-wrap: wrap; }
.foot-menu-col { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
.foot-menu-titolo {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .8;
}
.foot-firma { display: flex; align-items: center; gap: 10px; }
.foot-marchio { display: inline-flex; }
.foot-marchio .brand-logo { height: 18px; width: auto; }
.foot-marchio:hover { text-decoration: none; }
.foot-etichetta { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.foot-etichetta::before { content: "[ " / ""; }
.foot-etichetta::after { content: " ]" / ""; }
/* Payoff e riga legale erano del footer della v1. */
.foot-claim, .foot-legal { display: none; }
.foot-bottom {
margin-top: 20px;
font-family: var(--font-mono); font-size: 12.5px;
}
.foot-bottom a { text-decoration: underline; text-underline-offset: 3px; }
/* «Preferenze cookie» è un bottone (riapre il pannello di Iubenda) con l'aspetto dei link accanto. */
.foot-bottom .foot-preferenze {
background: none; border: 0; padding: 0; margin: 0; border-radius: 0;
font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* ===== Form ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea {
background: var(--surface); border: 1px solid var(--border);
padding: 14px 16px; border-radius: var(--radius-s);
font-size: 15px; outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-tint);
}
.field textarea { resize: vertical; min-height: 110px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.checkbox-row input { margin-top: 3px; accent-color: var(--accent); }
/* ===== Card ===== */
.card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-m);
padding: 28px;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--border); box-shadow: var(--shadow-md); }
/* ===== Tag / chip ===== */
.tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: var(--radius-s);
background: var(--accent-tint); color: var(--accent-dark);
font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.tag-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); display: inline-block; }
/* ===== FAQ accordion (markup statico + toggle JS) ===== */
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 24px 0; border: 0; background: transparent; text-align: left;
font-weight: 600; font-size: 18px; color: var(--ink); gap: 16px;
}
.faq-q:hover { text-decoration: none; }
.faq-icon {
width: 28px; height: 28px; border-radius: 999px;
background: var(--bg-alt); color: var(--ink);
display: grid; place-items: center; flex-shrink: 0;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.faq-item.open .faq-icon { background: var(--accent); color: #fff; transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease; }
.faq-item.open .faq-a { max-height: 600px; padding-bottom: 24px; }
.faq-a > div { color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 68ch; }
/* ===== CTA form (blocco contatti condiviso) ===== */
.cta-form-wrap {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
border: 1px solid var(--border); border-radius: var(--radius-l);
overflow: hidden; background: var(--surface);
}
.cta-form-aside { padding: 48px 44px; background: var(--ink); color: var(--bg); }
.cta-form-aside h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 14px; color: var(--bg); line-height: 1.25; padding-bottom: 0.15em; }
.cta-form-aside .eyebrow { color: #a8a08c; }
.cta-form-aside .lead { color: #a8a08c; margin-top: 20px; max-width: 34ch; font-size: 16px; line-height: 1.6; }
.cta-contacts { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.cta-contact { display: flex; gap: 12px; align-items: center; }
.cta-contact:hover { text-decoration: none; }
.cta-contact-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; flex-shrink: 0; }
.cta-contact-k { font-size: 12px; color: #a8a08c; letter-spacing: .06em; text-transform: uppercase; }
.cta-contact-v { font-weight: 600; margin-top: 2px; }
.cta-form-body { padding: 48px 44px; display: flex; flex-direction: column; gap: 16px; }
/* ===== Skin WPForms =====
WPForms stampa il proprio markup: qui lo si riporta allo stile della consegna
(stessi input di .field, stesso bottone di .btn-primary). */
.wpforms-container { margin: 0 !important; }
.wpforms-container .wpforms-form { display: flex; flex-direction: column; gap: 16px; }
.wpforms-container .wpforms-field-container {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.wpforms-container .wpforms-field { padding: 0 !important; width: auto !important; }
/* Il campo nascosto non ha niente da mostrare, ma il suo contenitore è pur
sempre un figlio della griglia: senza questo occuperebbe una cella e
lascerebbe un buco in mezzo al modulo. */
.wpforms-container .wpforms-field-hidden { display: none !important; }
/* A tutta larghezza tutto tranne le coppie brevi (telefono e città), che
stanno affiancate. Il nome va per intero: mezza riga per "Nome e cognome"
è il campo che si riempie sempre e si legge peggio. */
.wpforms-container .wpforms-field-name,
.wpforms-container .wpforms-field-select,
.wpforms-container .wpforms-field-textarea,
.wpforms-container .wpforms-field-email,
.wpforms-container .wpforms-field-radio,
.wpforms-container .wpforms-field-checkbox { grid-column: 1 / -1; }
/* Il testo che compare con «Altro» sotto «Come ci hai trovato?» (moduli delle
landing): un campo di testo da solo, a mezza riga lascerebbe un buco accanto. */
.wpforms-container .wpforms-field.come-trovato-altro { grid-column: 1 / -1; }
/* Etichette come quelle della presentazione: maiuscolo spaziato. */
.wpforms-container .wpforms-field-label {
font-family: var(--font-display) !important;
font-size: 12px !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
color: var(--ink-soft) !important; margin-bottom: 8px !important;
}
.wpforms-container .wpforms-required-label { color: var(--accent); }
/* La descrizione di un campo ("Puoi scegliere più di una risposta"): WPForms la
stampa in grigio scuro, invisibile sul fondo scuro. */
.wpforms-container .wpforms-field-description {
font-size: 12.5px !important; line-height: 1.4 !important;
color: var(--ink-mute) !important; margin-top: 8px !important;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
padding: 14px 16px !important;
border-radius: var(--radius-s) !important;
font-size: 15px !important;
font-family: var(--font-sans) !important;
color: var(--ink) !important;
outline: none !important;
box-shadow: none !important;
max-width: 100% !important;
width: 100% !important;
height: auto !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 4px var(--accent-tint) !important;
}
.wpforms-container textarea { resize: vertical; min-height: 110px !important; }
/* Il segnaposto: WPForms lo mette nero al 70%, illeggibile sul fondo scuro.
Serve !important perché il suo foglio è accodato dopo quello del tema. */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder,
.wpforms-container select::placeholder { color: var(--placeholder) !important; opacity: 1 !important; }
.wpforms-container input::-webkit-input-placeholder,
.wpforms-container textarea::-webkit-input-placeholder { color: var(--placeholder) !important; opacity: 1 !important; }
/* La prima voce "vuota" di una tendina è un segnaposto travestito da opzione */
.wpforms-container select:invalid,
.wpforms-container select .wpforms-field-select-placeholder { color: var(--placeholder) !important; }
/* !important su tutta la skin WPForms: il foglio del plugin viene accodato
dopo quello del tema, quindi a parità di specificità vince lui. */
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul {
display: flex !important; flex-wrap: wrap !important; gap: 8px 10px !important;
margin: 0 !important; padding: 0 !important;
}
.wpforms-container .wpforms-field-checkbox ul { flex-direction: column !important; }
.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li {
display: flex !important; align-items: center; gap: 10px;
width: auto !important; flex: 0 0 auto; margin: 0 !important;
}
.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
width: auto !important; accent-color: var(--accent); flex-shrink: 0;
}
.wpforms-container .wpforms-field-checkbox li { align-items: flex-start; }
.wpforms-container .wpforms-field-checkbox input[type="checkbox"] { margin-top: 3px; }
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label {
font-size: 13px !important; color: var(--ink-soft) !important; font-weight: 400 !important;
}
/* Le scelte "Da solo / Con un PT / Deciderò" nella consegna sono pastiglie
affiancate: qui restano radio veri (accessibili), dal restyling squadrate. */
.wpforms-container .wpforms-field-radio li {
border: 1px solid var(--border); border-radius: var(--radius-s);
padding: 9px 14px; background: var(--surface);
/* WPForms dà width:100% alle voci: senza queste due righe le pastiglie
si impilano una per riga invece di stare in fila. */
width: auto !important; flex: 0 0 auto;
}
.wpforms-container .wpforms-field-radio li:has(input:checked) {
border-color: var(--accent); background: var(--accent-tint);
}
/* L'etichetta "Privacy" del gruppo checkbox è ridondante: conta il testo dell'opzione.
Da WPForms 2.0 (15/9) l'etichetta è il