/* Design system webgas.net — palette e font presi dal sito WordPress esistente
(giallo #ffd501, nero #0d0d0d, Montserrat + Open Sans) così la migrazione non
cambia identità mentre cambia infrastruttura.
Niente Tailwind: 6 template su ~130 pagine non giustificano un build step su
un progetto che vive di "push e Pages serve la cartella". */
@import url('fonts.css');
:root {
--yellow: #ffd501;
/* ⚠️ NON è «il giallo che va bene sul chiaro»: #d9b400 su bianco dà 2,00:1,
e nemmeno lui passa AA. Resta solo per fondi scuri o per bordi e riempimenti,
MAI per testo su fondo chiaro — lì va `--ink`, come fa la produzione.
Il 2026-08-22 un giudice l'ha ritrovato su `about-us` (6 occorrenze) e
`work-with-us` (8): la variabile era stata corretta nel commento, non negli usi. */
--yellow-deep: #d9b400;
--ink: #0d0d0d;
--ink-soft: #3a3a3a;
--ink-faint: #6e6e6e;
--ground: #ffffff;
--ground-alt: #fafafa;
--muro-cella: #f5f5f5;
--rule: #e0e0e0;
--display: 'Montserrat', system-ui, sans-serif;
--body: 'Open Sans', system-ui, sans-serif;
--measure: 68ch;
--gutter: clamp(20px, 5vw, 64px);
}
/* ⚠️ NIENTE tema scuro automatico.
webgas.net su WordPress non ha un tema scuro: le sezioni di contenuto sono
bianche con testo nero, e solo l'eroe e alcune fasce sono nere per scelta
editoriale. Finché questo file rispettava `prefers-color-scheme`, chi ha il
Mac in modalità scura vedeva la versione statica in una palette che il sito
originale non produce mai — bianco e nero invertiti sezione per sezione. È
questa la ragione per cui il confronto blu/verde sembrava sbagliato nei
colori e nell'alternanza: non era l'alternanza, era il tema.
Il blocco `[data-theme="dark"]` resta per una scelta esplicita (oggi non c'è
nessun interruttore che la imposti); l'@media che lo attivava da solo no. */
:root[data-theme="dark"] {
--ink: #f2f2f0;
--ink-soft: #c4c4c0;
--ink-faint: #8f8f8a;
--ground: #0d0d0d;
--ground-alt: #161616;
--muro-cella: #1c1c1c;
--rule: #2b2b2b;
--yellow-deep: #ffd501;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font: 17px/1.65 var(--body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* ⚠️ 1180px meno due gutter da 64px lasciavano 1052px di contenuto, contro i
1200px misurati in produzione: tutta la pagina rientrava di ~75px per lato. */
.wrap { max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto;
padding-inline: var(--gutter); }
/* ⚠️ usata su due titoli dell'HTML e mai definita: "services that make you big"
e "Still unsure about your needs?" restavano minuscoli, in produzione no. */
.maiuscolo { text-transform: uppercase; }
.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 20px; }
/* ---- chrome condiviso: modificare qui, non nelle singole pagine ---- */
.site-head {
border-bottom: 1px solid var(--rule);
position: sticky; top: 0; z-index: 20;
background: var(--ground);
}
/* Header trasparente sopra l'hero scuro, come il transparent-header di Astra
(il post ha theme-transparent-header-meta attivo). Sta SOPRA l'hero invece di
spingerlo giù, quindi l'hero parte da bordo pagina. */
.site-head.is-transparent {
position: absolute; inset-inline: 0; top: 0;
background: transparent; border-bottom: 0;
}
.has-transparent-head { position: relative; }
/* Il marchio spinge tutto il resto a destra: logo a sinistra, bandiere e
hamburger appaiati a destra, come in produzione. */
.brand { position: relative; margin-right: auto; }
/* ⚠️ Qui stavano il blocco `is-stuck` e lo scambio del logo: dopo 80px di
scroll l'intestazione passava a `position: fixed`, si accorciava a 62px e
scambiava il logo chiaro con quello scuro. Il commento diceva «lo stesso
comportamento del tema Astra».
MISURATO il 2026-08-21 in `?__lane=blue` su cinque tipi di pagina: la
produzione NON lo fa. `#masthead` resta `position: absolute` e il clone
sticky `#ast-fixed-header` è `visibility: hidden`, perché
`header_main_stick_meta` vale `disabled`. In produzione l'intestazione
scorre via con la pagina e non rientra finché non si risale in cima.
Tolto invece che sovrascritto: due definizioni dello stesso elemento con
ruoli opposti sono la trappola già costata la barra del questionario.
Senza `is-stuck` la variante scura del logo non era più raggiungibile da
nessuno stato, quindi l'`` è uscita da `shell()`:
un'immagine in meno da scaricare su ognuna delle 384 pagine. */
/* ── Le bandiere ─────────────────────────────────────────────────────────────
Due, come la produzione, non un interruttore verso l'altra lingua. Stanno
nella barra accanto all'hamburger, NON dentro il cassetto. */
.lang-flags { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lang-flags a {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 3px;
opacity: .55; transition: opacity .15s ease;
}
.lang-flags a:hover, .lang-flags a:focus-visible { opacity: 1; }
/* ⚠️ 18x12 di bandierina è sotto qualunque soglia tattile: il riquadro da 44
è invisibile ma è ciò che si tocca. La lingua corrente si legge senza dover
confrontare due immagini. */
.lang-flags a[aria-current="page"] { opacity: 1; outline: 1px solid rgba(255,255,255,.55); }
.lang-flags img { display: block; width: 18px; height: 12px; }
.site-head .wrap {
display: flex; align-items: center; gap: 16px;
min-height: 72px;
}
.brand {
font-family: var(--display); font-weight: 700; font-size: 19px;
text-decoration: none; letter-spacing: -0.02em;
display: inline-flex; align-items: center; gap: 2px;
}
.brand i { font-style: normal; color: var(--yellow-deep); }
.nav { display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; }
.nav a {
font-family: var(--display); font-size: 14px; font-weight: 600;
text-decoration: none; color: var(--ink-soft);
padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); }
/* CTA a tutta larghezza su giallo pieno, poi il footer scuro: è la chiusura
di ogni pagina del sito, non solo dei case study. */
.foot-cta { background: var(--yellow); color: #0d0d0d; padding-block: clamp(56px, 8vw, 96px); }
.foot-cta .wrap {
display: grid; gap: 32px; align-items: center;
grid-template-columns: minmax(0, 1.4fr) auto;
}
@media (max-width: 820px) { .foot-cta .wrap { grid-template-columns: 1fr; } }
.foot-cta h2 { color: #0d0d0d; font-size: clamp(30px, 4.4vw, 46px); }
.foot-cta p { margin-top: 16px; max-width: 46ch; color: #1b1b1b; }
.btn-solid {
justify-self: end;
display: inline-block; background: #0d0d0d; color: var(--yellow);
font-family: var(--display); font-weight: 600; font-size: 14px;
letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
padding: 20px 34px; transition: background-color .15s ease;
}
.btn-solid:hover { background: #262626; }
@media (max-width: 820px) { .btn-solid { justify-self: start; } }
.site-foot { background: #141414; color: #c9c9c4; font-size: 15px; }
.foot-grid {
display: grid; gap: clamp(28px, 5vw, 56px);
grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.4fr);
padding-block: clamp(48px, 7vw, 76px);
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 46px; width: auto; }
.foot-legal { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: #8b8b85; max-width: 40ch; }
.foot-links { display: grid; gap: 11px; align-content: start; }
.foot-links a { color: #e8e8e4; text-decoration: none; font-size: 16px; }
.foot-links a:hover { color: var(--yellow); }
.foot-right { display: grid; gap: 30px; align-content: start; }
.foot-consult {
justify-self: start; font-family: var(--display); font-weight: 600;
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
color: #0d0d0d; background: var(--yellow); padding: 13px 20px; text-decoration: none;
}
.foot-consult:hover { background: #ffe14d; }
.foot-offices { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.foot-follow h3 {
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: #8b8b85; margin-bottom: 12px;
}
.foot-offices address {
font-style: normal; font-size: 14px; line-height: 1.7; color: #b4b4ae;
padding-left: 24px; position: relative;
}
/* segnaposto della sede: un pin disegnato in CSS, invece di caricare FontAwesome
intero per due icone */
.foot-offices address::before {
content: ''; position: absolute; left: 0; top: 4px;
width: 11px; height: 11px; border: 2px solid var(--yellow); border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
}
.foot-bottom {
display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
padding-block: 22px; border-top: 1px solid #2a2a2a;
font-size: 13.5px; color: #8b8b85;
}
.foot-social { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-social a { color: #c9c9c4; font-size: 14px; }
.foot-social a:hover { color: var(--yellow); }
.foot-policies { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-policies a { color: #8b8b85; font-size: 13.5px; }
.foot-policies a:hover { color: #c9c9c4; }
/* ---- case study: struttura fedele al template Elementor ----
hero scuro a tutta altezza, nome del brand in giallo maiuscolo, hook sotto;
poi sezioni alternate e la fascia scura dei risultati. */
/* ⚠️ `.hero` è `display: flex` e `.wrap` è un suo elemento: senza
`min-width: 0` non scende sotto la propria misura di contenuto, e una parola
lunga nell'h1 («INFRASTRUCTURE») faceva sfondare la pagina di 2px a 320.
È la stessa trappola delle celle del muro clienti — `min-width: auto` è il
valore iniziale per gli elementi flex, e va spento a mano. */
.hero > .wrap { min-width: 0; }
.hero {
background: #1c1c1c;
background-image: radial-gradient(ellipse at 50% 40%, #333 0%, #141414 70%);
color: #fff;
text-align: center;
padding-block: clamp(120px, 18vh, 190px) clamp(80px, 14vh, 150px);
display: flex; align-items: center; min-height: 62vh;
}
.hero-eyebrow {
font-family: var(--display); font-weight: 600;
font-size: clamp(20px, 2.4vw, 30px); color: #fff; margin-bottom: 4px;
}
.hero h1 {
/* ⚠️ Il minimo era 46px: su un telefono una parola sola come
«REPLATFORMING» chiede 415px e la pagina traboccava. MISURATA la
produzione il 2026-08-22 sulla stessa pagina: a 390px usa **34,47px**, e
su `lead-generation-funnel` mette pure `overflow-wrap: break-word`. Sono
gli stessi due strumenti, non una deviazione. Sopra i ~511px non cambia
niente, perché lì vince il 9vw. */
font-size: clamp(30px, 9vw, 104px); overflow-wrap: break-word;
text-transform: uppercase; color: var(--yellow);
line-height: 1; letter-spacing: -0.01em;
}
.hero-hook {
font-family: var(--display); font-weight: 700;
font-size: clamp(17px, 2.1vw, 26px); color: #fff;
margin-top: 28px; max-width: 46ch; margin-inline: auto; text-wrap: balance;
}
.hero-industry {
display: inline-block; margin-top: 26px;
font-family: var(--display); font-weight: 600; font-size: 13px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--yellow); border: 1px solid var(--yellow); padding: 7px 14px;
}
.sec { padding-block: clamp(48px, 8vw, 88px); }
.sec-alt { background: var(--ground-alt); }
.sec-grid {
display: grid; gap: clamp(20px, 4vw, 56px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
align-items: start;
}
@media (max-width: 820px) { .sec-grid { grid-template-columns: 1fr; } }
.sec h2 { text-wrap: balance; }
.sec-sub { color: var(--ink-faint); margin-top: 10px; max-width: 60ch; }
.prose p + p, .prose ul { margin-top: 16px; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 12px; }
.prose li { padding-left: 26px; position: relative; color: var(--ink-soft); }
.prose li::before {
content: ''; position: absolute; left: 0; top: 0.62em;
width: 12px; height: 3px; background: var(--yellow);
}
/* `a { color: inherit }` toglie ogni segnale visivo ai link — invisibili
dentro una lista di prosa come la rassegna stampa (/it/press/), dove
sono l'unico contenuto cliccabile della sezione. */
.prose .rassegna a { text-decoration: underline; text-underline-offset: 3px; }
.prose .rassegna a:hover { color: var(--yellow-deep); }
/* I risultati sono il motivo per cui un prospect apre la pagina: fascia scura,
come nell'originale, così staccano dal resto. */
.sec-dark { background: #141414; color: #fff; }
.sec-dark h2 { color: #fff; }
.sec-dark .sec-sub { color: #b5b5b0; }
.kpis {
display: grid; gap: 24px; margin-top: 40px;
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
/* ⚠️ Sotto i 400px il `minmax(165px)` non entra due volte e i riquadri
passavano a UNA colonna: su `why-choose-webgas` le cinque fasce di KPI
pesavano 4.962px, il 33% della pagina, e il telefono era +3.728px rispetto
alla produzione. Due colonne ne restituiscono circa 2.500. Il gap si stringe
perché a 320px due colonne da 165 non ci starebbero altrimenti. */
@media (max-width: 480px) {
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 18px 10px; }
}
.kpi {
text-align: center; padding: 24px 14px; border: 1px solid #2e2e2e;
/* il numero scala sulla CARD, non sulla viewport: con 5 KPI le colonne si
stringono e un valore lungo (+144,5%) usciva dal riquadro sovrapponendosi
al successivo. min-width:0 serve perché una traccia grid non si restringe
sotto il contenuto senza. */
container-type: inline-size;
min-width: 0;
}
.kpi b {
display: block; font-family: var(--display); font-weight: 700;
font-size: clamp(26px, 21cqi, 54px); line-height: 1.05;
color: var(--yellow); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.kpi span { display: block; margin-top: 12px; font-size: 15px; color: #d8d8d4; }
.btn {
display: inline-block; margin-top: 40px;
font-family: var(--display); font-weight: 600; font-size: 15px;
color: var(--yellow); text-decoration: none;
border: 2px solid var(--yellow); padding: 13px 26px;
transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--yellow); color: #141414; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ground-alt); margin-top: 24px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.brand img { height: 44px; width: auto; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
/* ⚠️ Eccezione VOLUTA, decisa dal committente: il nastro dei marchi scorre
sempre, per parità con la produzione — che la preferenza non la vede
nemmeno, perché lì il movimento lo fa Swiper da JavaScript e nessuna media
query CSS può fermarlo.
Mitigazioni tenute: la pista si ferma al passaggio del mouse e quando il
focus entra, così chi ha bisogno di bloccarla può farlo. */
.nastro-pista { animation: scorri var(--durata, 60s) linear infinite !important; }
}
/* ---- indice case study ---- */
.hero-index { min-height: 40vh; }
.hero-index h1 { text-transform: uppercase; }
.cards {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
display: flex; flex-direction: column; gap: 12px;
padding: 28px 24px 24px;
border: 1px solid var(--rule); text-decoration: none; color: inherit;
transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card-sector {
font-family: var(--display); font-size: 11.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.card h2 { font-size: 22px; }
.card-desc { font-size: 14px; line-height: 1.5; color: var(--ink-faint); }
/* i KPI sono il motivo per cui si clicca: stanno in fondo e pesano.
Fino a 5 per card (parità con produzione, misurata il 2026-08-24) — ogni
coppia valore/etichetta resta raggruppata (.card-kpi-item) così un giro
a capo non separa un numero dalla sua etichetta. */
.card-kpi {
margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule);
display: flex; gap: 14px 20px; flex-wrap: wrap;
}
.card-kpi-item { display: inline-flex; align-items: baseline; gap: 8px; }
.card-kpi b {
font-family: var(--display); font-weight: 700; font-size: 30px;
color: var(--yellow-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.card-kpi span { font-size: 13.5px; color: var(--ink-faint); }
.card-more {
font-family: var(--display); font-size: 12.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
border-bottom: 2px solid var(--yellow); align-self: flex-start; padding-bottom: 2px;
}
/* ---- servizi ---- */
.hero-cta {
display: inline-block; margin-top: 34px;
font-family: var(--display); font-weight: 600; font-size: 14px;
letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
background: var(--yellow); color: #0d0d0d; padding: 17px 30px;
transition: background-color .15s ease;
}
.hero-cta:hover { background: #ffe14d; }
/* ── La CTA dell'eroe ────────────────────────────────────────────────────────
MISURATA in produzione il 2026-08-22: 400x48, `16px/700`, crenatura **4px**,
padding `12px 24px`; sotto i 767px scende a 12px (339x42). Il verde aveva
288x57 con `14px/600` e 1,4px di crenatura.
⚠️ NON si cambia `.hero-cta` in generale: i pulsanti della produzione non
sono uniformi. Censiti sulla home lo stesso giorno, sono cinque stili —
«See how it helps» e «Take the survey» hanno `letter-spacing: normal` e peso
600, le tre porte in filo `11px/700` con 4px, «Book a Strategy Call»
`14px/700`. La nota «crenatura 1,4px contro 4px SU TUTTI» era falsa. */
.hero-home .hero-cta {
font-size: 16px; font-weight: 700; letter-spacing: 4px; padding: 12px 24px;
/* il contenuto del pulsante è alto 24px in produzione: 16 x 1,5 */
line-height: 1.5;
}
@media (max-width: 767px) {
.hero-home .hero-cta { font-size: 12px; }
/* ⚠️ Sul telefono la produzione lascia all'eroe 10px di margine per lato,
non i 20 del `--gutter`. Con 350px di riga invece di 370 il titolo andava
a capo tre volte invece di due: la prima banda ne chiede 358. Vale solo
per l'eroe della home — le altre fasce tengono il gutter di sistema. */
.hero-home > .wrap { padding-inline: 10px; }
}
/* La freccia in giù dopo il testo: in produzione è un SVG Font Awesome
(`e-fas-long-arrow-alt-down`, viewBox 0 0 256 512) dentro
`span.elementor-button-icon`, 16x16 e nero — per questo cercarla in
`::after` non la trovava. Qui è decorativa, quindi sta nel CSS; la maschera
le fa prendere il colore del testo. */
.hero-home .hero-cta::after {
content: ""; display: inline-block; vertical-align: -2px;
width: 16px; height: 16px; margin-left: 10px; background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 767px) { .hero-home .hero-cta::after { width: 12px; height: 12px; } }
.quotes {
display: grid; gap: 24px; margin-top: 32px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.quotes .quote {
margin: 0; padding: 26px; background: var(--ground);
border-left: 4px solid var(--yellow);
}
.quotes .quote p { font-size: 16.5px; line-height: 1.6; }
.quotes .quote footer {
margin-top: 14px; font-size: 13.5px; color: var(--ink-faint);
font-family: var(--display); font-weight: 600;
}
.vids {
display: grid; gap: 24px; margin-top: 32px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.vid { margin: 0; }
.vid figcaption {
margin-top: 10px; font-family: var(--display); font-weight: 600;
font-size: 14px; color: var(--ink-soft);
}
/* Titoli di sezione. ⚠️ Misurati sulla produzione dal vivo: 32px, MAIUSCOLI,
centrati, senza filetto. Prima erano 40px minuscoli a bandiera con un filetto
nero da 5px: un sistema diverso, su 7 sezioni. `display:block` resta perche'
senza di lui i pulsanti tornano ad affiancarsi al titolo e a coprirlo. */
.sec-lead h2 {
font-size: clamp(22px, 2.4vw, 32px);
text-transform: uppercase;
text-align: center;
display: block; width: auto;
max-width: min(30ch, 100%); margin-inline: auto;
}
.sec-lead.sec-dark h2 { color: var(--yellow); }
.sec-lead .sub {
font-style: italic; font-size: clamp(16px, 1.9vw, 21px);
color: var(--ink-soft); margin-top: 14px; max-width: 60ch;
text-align: center; margin-inline: auto;
}
.sec-lead.sec-dark .sub { color: #c9c9c4; }
.sec-lead .prose { margin-top: 26px; max-width: 78ch; }
.sec-dark .prose { color: #d8d8d4; }
.sec-dark .acts li { color: #d8d8d4; }
/* fascia loghi clienti */
.logos-sec { padding-block: clamp(40px, 6vw, 64px); }
.logos-title {
text-align: center; font-family: var(--display); font-weight: 700;
font-size: 15px; margin-bottom: 30px;
}
.logos {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: clamp(24px, 4vw, 56px);
}
.logos img {
height: 52px; width: auto; object-fit: contain;
filter: grayscale(1); opacity: .72; transition: opacity .15s ease, filter .15s ease;
}
.logos img:hover { filter: none; opacity: 1; }
/* barra CTA fissa in fondo, come sull'originale */
.sticky-cta {
position: sticky; bottom: 0; z-index: 15;
background: var(--ground); border-top: 1px solid var(--rule);
padding-block: 14px;
}
.sticky-cta .wrap {
display: flex; flex-wrap: wrap; gap: 16px;
align-items: center; justify-content: space-between;
}
.sticky-cta p { font-size: 15px; }
.sticky-cta a {
font-family: var(--display); font-weight: 600; font-size: 13.5px;
background: var(--ink); color: var(--ground); text-decoration: none;
padding: 12px 22px; white-space: nowrap;
}
.sticky-cta a:hover { background: var(--yellow); color: #0d0d0d; }
/* form di contatto nativo delle pagine servizio */
.lead-form { display: grid; gap: 14px; }
.lead-form label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.lead-form input, .lead-form textarea {
font: inherit; font-size: 16px; padding: 12px 14px;
border: 1px solid var(--rule); background: var(--ground); color: var(--ink);
}
.lead-form input:focus, .lead-form textarea:focus { border-color: var(--ink); outline: none; }
.lead-form .check { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
.lead-form .check input { width: 18px; height: 18px; accent-color: var(--yellow); }
.lead-form button {
justify-self: start; margin-top: 6px; cursor: pointer;
font-family: var(--display); font-weight: 600; font-size: 14px;
letter-spacing: .1em; text-transform: uppercase;
background: var(--yellow); color: #0d0d0d; border: 2px solid var(--yellow); padding: 15px 30px;
}
.lead-form button:hover { background: #ffe14d; }
.lead-form button[disabled] { opacity: .6; cursor: default; }
.wg-form-error { margin-top: 12px; color: #b3261e; font-size: 14px; }
.wg-form-ok { font-size: 17px; }
/* Galleria dei progetti di portfolio fusi dentro l'indice dei case study.
Voci non cliccabili di proposito: quei progetti non hanno una pagina propria,
e un link che gira a vuoto è peggio di nessun link. Vedi build_galleria.py. */
.sec-galleria { border-top: 1px solid var(--rule); }
.galleria-occhiello { color: var(--soft); margin: 0 0 22px; max-width: 60ch; }
.galleria {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 14px 28px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.galleria li {
padding: 14px 0; border-top: 1px solid var(--rule);
display: flex; flex-direction: column; gap: 3px;
}
.galleria li b { font-weight: 620; }
.galleria li span { color: var(--soft); font-size: 14px; }
/* Contenuto del portfolio del cliente portato dentro il suo case study.
Il titolo resta nella colonna sinistra di .sec-grid, tutte le sottosezioni
stanno in un solo contenitore a destra. Vedi build_merge_portfolio.py. */
.sec-fuso h3 { font-size: 18px; font-weight: 620; margin: 0 0 8px; }
.sec-fuso .prose + h3 { margin-top: 28px; }
/* Articoli del blog ricostruiti (build_blog.py). Il contenuto arriva pulito dal
dump REST: qui serve solo dargli una colonna leggibile e una gerarchia. */
.post-head { padding: clamp(48px, 8vw, 96px) 0 0; }
.post-date { color: var(--ink-faint); font-size: 14px; margin: 0 0 12px; }
.post-head h1 { max-width: 22ch; text-wrap: balance; }
.post-body { max-width: 68ch; padding: 32px 0 clamp(56px, 9vw, 104px); }
.post-body > p, .post-body > ul, .post-body > ol { margin: 0 0 20px; }
.post-body h2 { margin: 44px 0 14px; }
.post-body h3 { margin: 32px 0 10px; font-size: 19px; font-weight: 620; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li { margin: 8px 0; }
.post-body img { max-width: 100%; height: auto; margin: 28px 0; }
.post-body blockquote {
margin: 28px 0; padding-left: 20px;
border-left: 3px solid var(--yellow, #f4c430); color: var(--soft, #57524a);
}
.post-body pre { overflow-x: auto; padding: 16px; background: rgba(0,0,0,.04); }
/* Pagine ricostruite dall'albero Elementor (build_pagine.py). Ogni contenitore
di primo livello diventa una .sec, e due di fila sommavano 176px di vuoto.
⚠️ La regola era `.sec + .sec`, che azzerava il respiro anche sopra le fasce
con un fondo proprio: dalla seconda sezione in poi il titolo stava incollato
al bordo della banda. Ora la classe la mette `cuci_sezioni()` in fase di
generazione, e solo quando il fondo è davvero lo stesso di prima. */
.sec.continua { padding-top: 0; }
/* ⚠️ Qui c'era `.sec:has(> .wrap > .fluentform) { padding-top: 0 }`. Colpiva
due cose sole: `.sec-modulo`, che il padding a zero se lo dà già da sé più
sotto, e `.sec-quiz` — dove era un difetto. Sulla home il questionario è una
fascia BIANCA subito sotto una nera: con padding-top 0 il titolo «Non sei
ancora sicuro delle tue esigenze?» stava incollato al bordo, a 0px dalla
giuntura. In produzione ce ne sono 56 (misurato il 2026-08-22).
È lo stesso difetto che questo file racconta per la vecchia `.sec + .sec`,
entrato da un'altra porta. Cancellata invece che aggirata. */
.ff-form-title, .fluentform .ff-el-group > .ff-el-input--label:empty { display: none; }
.sec > .wrap > h2 + .prose, .sec > .wrap > h1 + .prose { margin-top: 14px; }
/* Immagini nelle pagine ridisegnate dall'albero Elementor. Senza vincolo un logo
cliente da 1200px riempie la colonna: nell'originale la misura la dava il CSS
per-elemento di Elementor, che qui non c'è. */
/* Un'immagine isolata dentro una sezione: a piena larghezza un ritratto
1920×2483 diventava alto 2.500px e occupava tre schermate da solo.
⚠️ Centrarla la staccava dalla colonna di testo e la incollava al pulsante
sopra: resta allineata a sinistra come tutto il resto, con la sua aria. */
.sec > .wrap > img { max-width: 100%; height: auto; display: block;
/* ⚠️ 46vh su un'illustrazione quadrata da 1080px la faceva alta 374px:
un'icona di calendario grande come mezzo schermo. Un'immagine isolata
dentro una sezione di testo è un'illustrazione, non il contenuto. */
max-height: 320px; max-width: min(100%, 400px); width: auto; margin-top: 34px; }
.sec > .wrap > .loghi { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.sec > .wrap > .loghi img { max-height: 56px; width: auto; opacity: .85; }
.quotes .quote + p { margin-top: -6px; color: var(--ink-faint); font-size: 14px; }
/* Testimonianze: per ogni cliente logo, video e citazione. Senza raggrupparle si
ottengono dieci lettori video a piena altezza impilati. */
.testimonianze { display: grid; gap: 40px; margin-top: 36px; align-items: start;
/* ⚠️ `min(340px, 100%)` e non `340px`: a 320px la colonna restava larga 340 e
la pagina usciva a 360 — misurato su `_anteprima/reviews` (sei
`article.testimonianza`) e su `_anteprima/about-us` (`div.reparto`).
Con `min()` la colonna non supera mai il contenitore. */
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.testimonianza { border: 1px solid var(--rule); padding: 24px; display: grid; gap: 16px; }
.testimonianza .marchio { width: auto; max-width: 300px; justify-self: start; }
.testimonianza .marchio { filter: none; }
.testimonianza .video { aspect-ratio: 16/9; }
.testimonianza .video iframe { width: 100%; height: 100%; border: 0; }
.testimonianza blockquote { margin: 0; }
.sec .wrap > img[src*="logo"] { max-height: 60px; width: auto; }
/* Evidenziatore del marchio: nell'originale «FREE CALL» ha fondo giallo e testo
nero, non testo giallo. È il device che regge i titoli di tutte le landing. */
.mark { background: var(--yellow); color: #0d0d0d; padding: 0 .16em; }
/* Il modulo sta su una scheda chiara che scavalca l'eroe scuro: è così
nell'originale, ed è ciò che dà contrasto ai campi. */
.sec-modulo { background: transparent; padding-top: 0; }
.sec-modulo > .wrap { background: #fff; color: #16150f; padding: clamp(28px,5vw,56px);
position: relative; }
/* ⚠️ La scheda risale sull'eroe SOLO se viene subito dopo l'eroe. Applicata
ovunque, su work-with-us mangiava il titolo «Fill the form on the right»
che la precede. */
.hero + .sec-modulo > .wrap { margin-top: clamp(-120px, -9vw, -48px); }
.sec-modulo .ff-el-input--label label { color: #16150f; font-weight: 600; }
.sec-modulo .ff-el-form-control {
background: #f7f7f5; border: 1px solid #dcdcd6; border-radius: 6px;
padding: 14px 16px; font-size: 15px; color: #16150f; width: 100%;
}
.sec-modulo .ff-el-form-control:focus {
outline: none; border-color: var(--yellow); background: #fff;
}
.sec-modulo .ff-el-form-control::placeholder { color: #9a9a92; }
.sec-modulo .ff-el-is-error .text-danger, .sec-modulo .ff-el-input--label.asterisk-right label:after,
.sec-modulo .ff_t_c label a { color: #c0392b; }
.sec-modulo .ff-btn-submit {
background: var(--yellow); color: #0d0d0d; border: 0; border-radius: 6px;
font-family: var(--display); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; padding: 16px 30px; cursor: pointer;
}
.sec-modulo .ff-btn-submit:hover { background: #ffe14d; }
/* Quando un titolo contiene l'evidenziatore, il resto va in bianco: giallo su
giallo-evidenziato non si legge, e nell'originale «Book a» è bianco. */
.hero h1:has(.mark) { color: #fff; }
/* ── Il titolo dell'eroe, con le bande gialle ────────────────────────────────
MISURATO in produzione il 2026-08-22. Le misure sono a scalini, non fluide:
**56px** da 1025 in su, **36px** fra 768 e 1024, **22px** da 767 in giù.
L'interlinea è sempre 1,3 (72,8 su 56; 46,8 su 36; 28,6 su 22).
⚠️ Lo stacco fra le bande NON si disegna: nasce dalla differenza fra
interlinea e altezza della banda. In produzione la banda è alta 68 dentro
un'interlinea di 72,8, e restano ~5px di nero. Qui la banda usciva 76 dentro
71,92 — più ALTA della riga — e le bande si sovrapponevano di 5px, saldate
in un blocco unico. La colpa è del padding verticale `.06em` di `.mark`: in
produzione il padding è `0px 5px`, orizzontale e basta. */
/* ⚠️ `text-wrap: balance` (riga 59, su tutti gli h1/h2/h3) pareggia le righe;
la produzione invece RIEMPIE. Con lo stesso corpo e lo stesso font le bande
uscivano 896+817 invece di 1106+623, e il titolo andava a capo dopo «and»
invece che dopo «Start» — la differenza che l'handoff attribuiva al corpo del
carattere, e che invece era il bilanciamento. Sugli altri titoli `balance`
resta: qui si toglie perché la parità lo chiede. */
.hero h1:has(.mark) { font-size: 56px; line-height: 1.3; text-wrap: wrap; }
@media (max-width: 1024px) { .hero h1:has(.mark) { font-size: 36px; } }
@media (max-width: 767px) { .hero h1:has(.mark) { font-size: 22px; } }
/* ⚠️ Il padding di `.mark` nell'eroe sta più sotto, nel blocco `.hero-home`:
una definizione sola, non due a distanza di 500 righe. */
.sec-dark h2:has(.mark), .sec-dark h3:has(.mark) { color: #fff; }
/* Il campo trappola antispam di CleanTalk: sul mirror lo nasconde il CSS del
plugin, che qui non carichiamo. Lasciato visibile è un riquadro vuoto sotto
il pulsante di invio. */
input[name^="apbct"], .apbct-email-encoder, .ff-el-group input[id^="apbct"] { display: none !important; }
/* Link di salto al contenuto: visibile solo con la tastiera. */
.skip { position:absolute; left:-9999px; top:0; z-index:100;
background:var(--yellow); color:#0d0d0d; padding:12px 18px; font-weight:700; }
.skip:focus { left:0; }
/* ── Correzioni dopo la revisione a due giudici sulla pagina contatti ────────
I difetti erano tutti dello stesso tipo: componenti nati per la fascia scura
riusati su fondo chiaro, dove i loro colori non hanno contrasto. */
/* Le quattro tappe del processo vivono in una sezione chiara, non in .sec-dark:
con i colori originali erano 1,4:1 su bianco, cioè invisibili. */
.sec:not(.sec-dark) .kpi { border-color: var(--rule); }
.sec:not(.sec-dark) .kpi b { color: var(--ink); }
.sec:not(.sec-dark) .kpi span { color: var(--ink-soft); }
/* La scheda del modulo: bianco su bianco in tema chiaro faceva sparire il
contenitore. Serve un bordo che la stacchi in entrambi i temi. */
.sec-modulo > .wrap { border: 1px solid var(--rule); box-shadow: 0 18px 48px rgba(0,0,0,.10); }
/* I campi ereditavano Arial e la textarea il monospace del browser. */
/* ⚠️ 16px, non 15: sotto i 16px iOS Safari INGRANDISCE la pagina appena si
tocca un campo, e chi compila deve ripizzicare per rimpicciolire — sul
modulo principale di conversione del sito. La produzione usa 18px sul
desktop e 16,4 sul telefono, quindi era anche una regressione. Misurato da
un giudice il 2026-08-23: 5 campi su 5 sotto soglia.
⚠️ Questa regola vince su quella a riga ~616: due definizioni per lo stesso
elemento, ancora. Se un giorno si consolidano, il corpo va tenuto >= 16. */
.sec-modulo .ff-el-form-control { font: inherit; font-size: 16px; }
.sec-modulo .ff-el-form-control::placeholder { color: #6b6b64; } /* era 2,64:1 */
.sec-modulo .ff-btn-submit { font-size: 16px; }
/* Il rosso degli obbligatori: la regola di FluentForm ha specificità più alta
della nostra e usa una variabile che il CSS mancante non definiva mai. */
.sec-modulo { --fluentform-danger: #c0392b; }
.sec-modulo .ff_t_c a, .sec-modulo .ff-el-input--label.ff-el-is-required label:after { color: #c0392b; }
.sec-modulo input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--yellow); }
/* Il focus era spento da una regola più specifica e sostituito da un bordo
giallo che su bianco fa 1,42:1: chi naviga da tastiera non vedeva dov'era. */
.sec-modulo .ff-el-form-control:focus-visible,
.sec-modulo .ff-btn-submit:focus-visible {
outline: 3px solid #0d0d0d; outline-offset: 2px; border-color: #0d0d0d;
}
/* (storico) .sec + .sec azzerava la spaziatura anche alle fasce con sfondo: il filetto
del titolo cadeva esattamente sul bordo della fascia. */
.sec-modulo + .sec { padding-top: clamp(48px, 8vw, 88px); }
/* L'evidenziatore su più righe: senza clone il padding va solo al primo e
all'ultimo frammento e le bande si toccano. */
.mark { -webkit-box-decoration-break: clone; box-decoration-break: clone;
padding: .06em .16em; }
h2 .mark, h3 .mark { line-height: 1.45; }
/* L'ancora del modulo deve fermarsi sotto l'intestazione fissa. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* I passi di un processo: elenco ordinato, non griglia di metriche. Il numero è
una posizione — piccolo e in alto a sinistra — non un dato da 54px al centro. */
.passi { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: none;
display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.passi li { display: grid; gap: 8px; align-content: start;
padding: 20px 20px 22px; border: 1px solid var(--rule);
border-top: 3px solid var(--yellow); }
.passi li b { font-family: var(--display); font-size: 26px; font-weight: 700;
line-height: 1; color: var(--ink); }
.passi li span { font-size: 16px; line-height: 1.45; color: var(--ink); }
.sec-dark .passi li { border-color: #2e2e2e; border-top-color: var(--yellow); }
.sec-dark .passi li b { color: var(--yellow); }
.sec-dark .passi li span { color: #e4e4e0; }
/* Una pagina che porta già un modulo non ha bisogno del richiamo finale ai
contatti: è l'elemento più grande della pagina e rimanda dove sei già. */
/* ⚠️ La regola nasconde il richiamo finale sulle pagine che portano già un
modulo di contatto. Sulla home il modulo è un QUESTIONARIO di
qualificazione a metà pagina, non un contatto: senza questa eccezione
la pagina più visitata del sito finiva senza chiamata all'azione. */
body.ha-modulo:not(.home) .foot-cta { display: none; }
/* Titolo e pulsante in una fascia: erano due inline-block che si contendevano la
riga, col bottone incollato 3px dopo il titolo e allineato alla sua ultima
riga. Con la griglia il titolo respira e l'azione sta al suo posto. */
.sec-azione > .wrap {
display: grid; grid-template-columns: minmax(0, 1.5fr) auto;
align-items: center; gap: clamp(24px, 4vw, 56px);
}
.sec-azione > .wrap > h2 { max-width: 34ch; margin: 0; }
.sec-azione > .wrap > .hero-cta { margin-top: 0; }
@media (max-width: 720px) {
.sec-azione > .wrap { grid-template-columns: 1fr; }
}
/* Le posizioni aperte: un elenco cliccabile, non una griglia di schede — sono
poche e cambiano spesso. */
.offerte { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.offerte li { border-bottom: 1px solid var(--rule); }
.offerte a { display: flex; justify-content: space-between; align-items: center; gap: 20px;
padding: 20px 4px; text-decoration: none; color: inherit; transition: padding-left .15s ease; }
.offerte a:hover { padding-left: 12px; }
.offerte a span { font-family: var(--display); font-weight: 600; font-size: 18px; }
.offerte a em { font-style: normal; font-size: 13px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.sec-dark .offerte a em { color: var(--yellow); }
.sec-dark .offerte, .sec-dark .offerte li { border-color: #2e2e2e; }
/* Un pulsante dentro una griglia non deve stirarsi a tutta colonna. */
.hero-cta { justify-self: start; width: fit-content; }
/* Fascia loghi clienti (widget image-carousel: qui sono loghi davvero, lo dice
il tipo di widget). Scorre orizzontalmente invece di impilarsi. */
.loghi { display: flex; flex-wrap: wrap; gap: 34px 52px; align-items: center; margin-top: 30px; }
/* L'altezza di ciascun marchio la calcola `ritaglia_marchi.py` (area costante)
e la scrive inline: qui si dice solo come si comportano insieme. */
.loghi img { width: auto; max-width: 300px; opacity: .9; filter: grayscale(1); }
.loghi img:hover { opacity: 1; filter: none; }
.sec-dark .loghi img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .85; }
/* image-box: immagine con titolo e testo. */
/* ⚠️ L'icona sopra il testo, a piena larghezza, lasciava un'icona da 72px
sospesa su una riga tutta sua. Sta accanto: è un'etichetta, non un'immagine. */
.riquadro { display: grid; grid-template-columns: 64px minmax(0, 1fr);
gap: 6px 18px; align-items: center; align-content: start; margin-top: 8px; }
.riquadro img { max-width: 64px; height: auto; grid-row: span 2; }
.riquadro > :only-child { grid-column: 1 / -1; }
.riquadro h3 { font-size: 20px; font-weight: 620; margin: 0; }
/* Il footer raggruppa i servizi sotto un'intestazione, come l'originale: in fila
con gli altri link la sezione non si distingueva. */
.foot-gruppo { display: block; margin: 18px 0 6px; font-family: var(--display);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.foot-links a.foot-sub { padding-left: 14px; position: relative; }
.foot-links a.foot-sub::before { content: ""; position: absolute; left: 0; top: .9em;
width: 6px; height: 1px; background: currentColor; opacity: .5; }
.foot-prefs { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ── Footer allineato a quello di WordPress ─────────────────────────────────
Le differenze non erano nei link ma nella disposizione: i riconoscimenti in
un riquadro bianco a colori nella colonna destra, «Follow us» con le icone
sulla stessa riga, le due sedi affiancate, il pulsante sotto i link. */
.foot-col { display: grid; gap: 26px; align-content: start; }
/* I riconoscimenti stanno su un riquadro bianco perché sono loghi a colori
pensati per fondo chiaro: in grigio su nero non si leggevano e avevano
altezze diverse fra loro. */
.foot-badges {
background: #fff; border-radius: 4px; padding: 14px 18px;
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 18px;
}
.foot-badges img { height: 34px; width: auto; object-fit: contain; }
/* Le due sedi affiancate, come nell'originale. */
.foot-offices { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* «Follow us» e le icone sulla stessa riga: erano impilati, e i link a testo
occupavano una riga intera ciascuno. */
.foot-follow { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.foot-follow h3 { margin: 0; font-family: var(--display); font-size: 17px;
font-weight: 700; color: var(--yellow); letter-spacing: .01em; text-transform: none; }
.foot-social { display: flex; gap: 16px; align-items: center; }
.foot-social a { color: #cfcfc9; display: inline-flex; text-decoration: none;
transition: color .15s ease; }
.foot-social a:hover { color: var(--yellow); }
.foot-right { display: grid; gap: 26px; align-content: start; }
/* Proporzioni del footer: la colonna centrale era 221px, troppo stretta — il
pulsante andava a tre righe e gli indirizzi spezzavano «Via Generale Giordano
/ Orsini 5». Misurato, non stimato. */
.foot-grid { grid-template-columns: minmax(0, 1.15fr) minmax(230px, .95fr) minmax(0, 1.5fr); }
.foot-consult { justify-self: start; }
@media (min-width: 721px) { .foot-consult { white-space: nowrap; } }
.foot-offices { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* I loghi dei riconoscimenti hanno proporzioni molto diverse fra loro: vincolare
l'altezza li lasciava a 28-59px di larghezza dentro un riquadro da 387. Si
vincola la larghezza e si lascia libera l'altezza, con un tetto. */
.foot-badges img { height: auto; max-height: 44px; width: auto; max-width: 84px; }
@media (max-width: 900px) {
.foot-grid { grid-template-columns: 1fr; }
}
/* Fascia gialla: nell'originale alcune sezioni hanno il giallo del marchio come
fondo pieno. Il testo va scuro, non bianco. */
.sec-giallo { background: var(--yellow); color: #0d0d0d; }
.sec-giallo h2, .sec-giallo h3 { color: #0d0d0d; }
.sec-giallo .prose { color: #24220c; }
.sec-giallo .hero-cta { background: #0d0d0d; color: var(--yellow); }
/* ── Moduli a più passi: resi a pagina unica ─────────────────────────────────
⚠️ Difetto grave, non estetico. FluentForm nasconde i passi successivi con
`.fluentform-step { display:none }` e li rivela aggiungendo `.active` dal suo
JavaScript — che sul sito statico non gira, perché forms.js clona il form per
riprendere il controllo dell'invio.
Risultato misurato sul modulo candidature: 4 campi visibili su 14, «Avanti»
inerte, e il pulsante di invio MAI raggiungibile. Il canale candidature
sarebbe morto.
Rimedio: si mostrano tutti i passi e si nascondono i comandi che non
funzionano. Il modulo diventa una pagina sola — più lunga, ma completa. */
.fluentform-step { display: block !important; float: none !important;
height: auto !important; width: 100% !important; overflow: visible !important; }
.ff-step-container, .ff-step-body { width: 100% !important; transform: none !important;
overflow: visible !important; }
/* ⚠️ I comandi restano nascosti finché il passo-passo NON è cablato: se il JS
non gira, il modulo deve restare a pagina unica e inviabile. La classe
`ff-passi` la mette forms.js solo a cablaggio riuscito. */
.ff-step-header, .step-nav, .ff-el-progress { display: none !important; }
form.ff-passi .fluentform-step { display: none !important; }
/* ⚠️ `display: block` NON basta. Il foglio del plugin tiene ogni passo a
`float:left; height:1px; overflow-x:hidden` e lo apre solo con `.active`.
Mostrando il passo senza annullare quelle tre proprietà si ottiene una
scatola alta 1px: misurata sul passo 2, altezza 3px con dentro un campo
invisibile. Il modulo sembrava avanzare e non mostrava niente. */
form.ff-passi .fluentform-step.attivo {
display: block !important; float: none !important; height: auto !important;
width: 100% !important; overflow: visible !important; }
form.ff-passi .fluentform-step + .fluentform-step { margin-top: 0; padding-top: 0;
border-top: 0; }
/* ⚠️ La barra vive dentro `.ff-step-header`, che la regola sopra nasconde:
scoprire il figlio non basta se il padre resta `display:none`. */
form.ff-passi .ff-step-header { display: block !important; }
form.ff-passi .ff-el-progress { display: block !important; margin-bottom: 22px; }
form.ff-passi .ff-el-progress-status { font-family: var(--display); font-weight: 600;
font-size: 13px; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 8px; }
/* pista e riempimento sono definiti più sotto, in un punto solo:
`.ff-el-progress` = pista, `.ff-el-progress-bar` = riempimento. */
form.ff-passi .step-nav { display: flex !important; gap: 12px; margin-top: 26px;
justify-content: flex-end; }
form.ff-passi button.ff-btn-next, form.ff-passi button.ff-btn-prev {
font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .06em;
text-transform: uppercase; border: 0; border-radius: 6px; padding: 15px 30px;
cursor: pointer; float: none !important; box-shadow: none; }
form.ff-passi button.ff-btn-next {
background: var(--yellow) !important; color: #0d0d0d !important; }
form.ff-passi button.ff-btn-prev {
background: transparent !important; color: #6e6e6e !important;
border: 1px solid #d8d8d4 !important; }
/* al primo passo non si torna indietro, all'ultimo non si va avanti */
form.ff-passi .fluentform-step:first-of-type button.ff-btn-prev,
form.ff-passi .fluentform-step:last-of-type button.ff-btn-next { display: none; }
form.ff-passi .ff-manca { outline: 2px solid #c0392b; outline-offset: 6px; border-radius: 4px; }
/* Le quattro scelte devono leggersi come quattro scelte, non come una tabella. */
/* Le quattro scelte devono leggersi come quattro scelte, non come una tabella:
nell'originale sono separate da 14-15px, qui condividevano i bordi. */
.ff_item_selectable_wrapper { display: flex !important; flex-wrap: wrap; gap: 14px; }
.ff_item_selectable_wrapper .ff_item_selectable {
border-radius: 10px; border: 1px solid #e0e0dc !important; flex: 1 1 170px; }
.ff_item_selectable_wrapper .ff_item_selectable:hover { border-color: var(--yellow) !important; }
/* Le sezioni del modulo, ora che sono tutte in fila, hanno bisogno di respiro. */
.fluentform-step + .fluentform-step { margin-top: 26px; padding-top: 26px;
border-top: 1px solid var(--rule); }
/* ── Rifiniture di accessibilità e uso ───────────────────────────────────────
Misurate: la casella del consenso era 13×13 px (minimo raccomandato 24), i
link delle policy nel footer avevano un'area di tocco alta 17 px, e tre testi
scendevano sotto i 13 px. */
input[type="checkbox"], input[type="radio"] {
width: 22px; height: 22px; accent-color: var(--yellow); flex: 0 0 auto;
}
.ff-el-form-check label, .ff_t_c label {
display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
}
.foot-policies a, .foot-prefs { padding: 6px 0; display: inline-block; }
.foot-legal, .foot-badges + .foot-bottom, .galleria li span { font-size: 13px; }
.hero-eyebrow, .foot-social a { min-height: 24px; }
/* Le immagini nelle pagine ridisegnate non devono far saltare il testo mentre
caricano: se il generatore non ha trovato le dimensioni, almeno non collassano. */
.sec img:not([width]) { min-height: 1px; }
/* ── /about-us/ : impaginazione dichiarata a mano ────────────────────────── */
.hero-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero .hero-hook { max-width: 62ch; margin-top: 18px; }
.storia { display: grid; gap: clamp(28px, 5vw, 64px);
grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); align-items: start; }
.storia img { width: 100%; height: auto; }
@media (max-width: 820px) { .storia { grid-template-columns: 1fr; } }
.titolo-minore { font-size: clamp(20px, 2.4vw, 26px); }
/* La formula del metodo: una riga sola, non cinque sezioni impilate. */
.formula { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
margin: 30px 0 26px; }
.formula .sigla { font-family: var(--display); font-weight: 800;
font-size: clamp(38px, 6vw, 66px); line-height: 1; color: var(--yellow); }
.formula .segno { font-family: var(--display); font-weight: 700;
font-size: clamp(24px, 3.4vw, 38px); color: #8f8f8a; }
.formula .voce { font-family: var(--display); font-weight: 600;
font-size: clamp(15px, 1.7vw, 19px); letter-spacing: .06em; text-transform: uppercase;
align-self: center; }
.distintivi { display: grid; gap: 26px; margin-top: 32px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.distintivi article { border-top: 3px solid var(--yellow); padding-top: 18px; }
.distintivi h3 { margin: 0 0 10px; font-size: 20px; font-weight: 620; }
.reparti { display: grid; gap: 44px; margin-top: 34px; }
.reparto > h3 { font-family: var(--display); font-size: 13px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink); margin: 0 0 18px; }
.sec-dark .reparto > h3 { color: var(--yellow); }
.squadra { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px;
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.squadra li { display: grid; gap: 4px; }
.squadra li img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.squadra li b { font-size: 17px; font-weight: 620; margin-top: 8px; }
.squadra li span { font-size: 14px; color: var(--ink-faint); }
/* I due fondatori: scheda larga, ritratto a sinistra, biografia accanto. */
.fondatori { display: grid; gap: 26px;
/* ⚠️ `min(340px, 100%)` e non `340px`: a 320px la colonna restava larga 340 e
la pagina usciva a 360 — misurato su `_anteprima/reviews` (sei
`article.testimonianza`) e su `_anteprima/about-us` (`div.reparto`).
Con `min()` la colonna non supera mai il contenitore. */
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.fondatori article { display: grid; grid-template-columns: 148px minmax(0, 1fr);
gap: 20px; align-items: start; }
.fondatori img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.fondatori h3 { margin: 0 0 8px; font-size: 21px; font-weight: 650; }
.fondatori .prose { font-size: 15px; }
.fondatori .prose b { color: var(--ink); font-weight: 620; }
.sec-dark .fondatori .prose b { color: var(--yellow); }
.linkedin { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600;
border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
@media (max-width: 480px) { .fondatori article { grid-template-columns: 108px minmax(0, 1fr); } }
.fondatori .ruolo { display: block; font-family: var(--display); font-size: 13px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
margin: 0 0 14px; }
.sec-dark .fondatori .ruolo { color: var(--yellow); }
.fondatori .prose br + br { display: none; }
/* Le schede della squadra: le righe si impacchettano in alto, altrimenti quando
un ruolo va a capo la griglia ridistribuisce lo spazio e quella scheda scivola
fuori allineamento rispetto alle vicine. */
.squadra li { align-content: start; }
.squadra li b { line-height: 1.25; }
.squadra li span { line-height: 1.4; }
/* Immagini che NON sono loghi: fogli di creatività, ritratti della squadra.
⚠️ Erano un nastro con `overflow-x: auto`: i fogli 1920×1080 uscivano larghi
460px e tagliati sul bordo destro, senza alcun segno che si potesse scorrere.
In griglia ci stanno tutti; la misura della cella la decide la forma. */
.griglia-img { display: grid; gap: 20px; margin-top: 30px;
grid-template-columns: repeat(auto-fill, minmax(var(--cella), 1fr)); }
.griglia-img.larga { --cella: 320px; }
.griglia-img.ritratti { --cella: 150px; }
.griglia-img img { width: 100%; height: auto; display: block; }
/* I lavori: il collage merita la misura per essere letto, e un nome — un
collage senza etichetta non dice di chi è. */
.lavori { display: grid; gap: 26px; margin-top: 30px;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.lavoro { margin: 0; }
.lavoro img { width: 100%; height: auto; display: block; }
.lavoro a { text-decoration: none; color: inherit; display: block; }
.lavoro figcaption {
margin-top: 10px; font-family: var(--display); font-weight: 620; font-size: 15px;
border-bottom: 2px solid transparent; display: inline-block;
}
.lavoro a:hover figcaption { border-bottom-color: var(--yellow); }
.sec-dark .lavoro figcaption { color: var(--ink); }
/* Due pulsanti di fila si toccavano: fra loro restava solo lo spazio bianco
fra due inline-block, cinque pixel, e leggevano come un blocco giallo unico
diviso da un filo. */
.hero-cta + .hero-cta { margin-left: 14px; }
/* Una testimonianza per cliente: marchio, parole, firma, eventuale video.
⚠️ I video sono Vimeo con privacy per dominio: rispondono 200 solo con
Referer webgas.net e 403 altrove. In anteprima restano neri — è la
configurazione del video, non il markup. */
.testimonianza { align-content: start; }
.testimonianza .dice { font-size: 16px; }
.testimonianza .dice p { margin: 0 0 12px; }
.testimonianza .firma {
font-style: normal; font-family: var(--display); font-weight: 600;
font-size: 14px; color: var(--ink-faint); line-height: 1.5;
}
.testimonianza .video { aspect-ratio: 16/9; margin-top: 4px; }
.testimonianza .hero-cta { margin-top: 8px; justify-self: start; font-size: 13px; padding: 13px 22px; }
/* ── la lente: il collage a schermo intero ───────────────────────────────── */
.lavoro .apri {
display: block; width: 100%; padding: 0; border: 0; background: none;
cursor: zoom-in; position: relative;
}
.lavoro .apri::after {
content: ''; position: absolute; inset: 0;
background: rgba(13, 13, 13, 0); transition: background .16s ease;
}
.lavoro .apri:hover::after { background: rgba(13, 13, 13, .06); }
.lavoro .apri:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.lavoro figcaption a { color: inherit; text-decoration: none;
border-bottom: 2px solid transparent; }
.lavoro figcaption a:hover { border-bottom-color: var(--yellow); }
dialog.lente {
border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
width: 100%; height: 100%; background: transparent; overflow: hidden;
}
dialog.lente::backdrop { background: rgba(6, 6, 6, .96); backdrop-filter: blur(6px); }
dialog.lente figure {
margin: 0; height: 100%;
display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
padding: clamp(16px, 4vw, 52px);
}
dialog.lente img {
max-width: min(1400px, 92vw); max-height: 82vh;
width: auto; height: auto; object-fit: contain;
}
dialog.lente figcaption {
display: flex; gap: 16px; align-items: baseline; padding-top: 16px;
font-family: var(--display); font-size: 14px; color: #f2f2f0;
}
dialog.lente .conta { color: #8f8f8a; font-variant-numeric: tabular-nums; }
dialog.lente button {
position: absolute; border: 0; background: rgba(255, 255, 255, .1);
color: #fff; cursor: pointer; line-height: 1;
width: 48px; height: 48px; font-size: 30px; border-radius: 50%;
display: grid; place-items: center; transition: background .15s ease;
}
dialog.lente button:hover { background: var(--yellow); color: #0d0d0d; }
dialog.lente button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
dialog.lente .chiudi { top: 18px; right: 18px; font-size: 34px; }
dialog.lente .prec { left: 18px; top: 50%; transform: translateY(-50%); }
dialog.lente .succ { right: 18px; top: 50%; transform: translateY(-50%); }
dialog.lente.sola .prec, dialog.lente.sola .succ { display: none; }
@media (max-width: 560px) {
dialog.lente .prec { left: 10px; } dialog.lente .succ { right: 10px; }
dialog.lente button { width: 42px; height: 42px; }
}
dialog.lente[open] { animation: lente-entra .2s ease both; }
@keyframes lente-entra { from { opacity: 0; transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) {
dialog.lente[open] { animation: none; }
.lavoro .apri::after { transition: none; }
}
/* ── /portfolio/ : un progetto per fascia ────────────────────────────────── */
.progetto-testa { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px);
flex-wrap: wrap; }
.progetto-testa .marchio { width: auto; max-width: 190px; }
.sec-progetto h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.sec-progetto .sec-sub { margin: 6px 0 0; font-size: 16px; color: var(--ink-faint);
font-style: italic; }
.sec-progetto .prose { margin-top: 22px; max-width: 72ch; }
.sec-progetto .lavori { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sec-progetto .hero-cta { margin-top: 30px; }
/* ── indice dei lavori: muro dei clienti e navigazione insieme ───────────── */
.indice-lavori {
position: sticky; top: 62px; z-index: 40;
background: var(--ground); border-bottom: 1px solid var(--rule);
padding-block: 14px;
}
.indice-lavori > .wrap {
display: flex; gap: clamp(18px, 3vw, 40px); align-items: center;
overflow-x: auto; scrollbar-width: thin; padding-block: 4px;
}
.indice-lavori a {
flex: none; display: grid; place-items: center; min-height: 34px;
text-decoration: none; opacity: .72; transition: opacity .15s ease;
border-bottom: 2px solid transparent; padding-bottom: 4px;
}
.indice-lavori a:hover, .indice-lavori a:focus-visible { opacity: 1; }
.indice-lavori a[aria-current="true"] { opacity: 1; border-bottom-color: var(--yellow); }
/* ⚠️ niente `grayscale`: il marchio di un cliente si mostra nei suoi colori.
Il grigio resta dove è un device voluto — la fascia stampa e i badge partner. */
.indice-lavori img { height: 26px; width: auto; max-width: 116px;
object-fit: contain; }
.indice-lavori span {
font-family: var(--display); font-weight: 600; font-size: 13px;
letter-spacing: .04em; color: var(--ink); white-space: nowrap;
}
/* l'ancora non deve finire sotto le due barre appiccicate */
.sec-progetto { scroll-margin-top: 124px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 720px) {
.indice-lavori { top: 56px; padding-block: 10px; }
.indice-lavori img { height: 22px; }
}
/* La colonna segue la forma delle immagini del progetto: quattro ritratti 9:16
in fila stanno bene, due schermate 16:9 pure — mescolarli in celle uguali no.
Il verso lo calcola il generatore sul rapporto medio, non il CSS. */
.lavori.verticali { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.lavori.orizzontali { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.lavori.quadre { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 620px) {
.lavori.verticali, .lavori.orizzontali, .lavori.quadre {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
/* ══ home ═══════════════════════════════════════════════════════════════════
⚠️ L'eroe deve contenere TUTTO: occhiello, titolo, gancio e azione. Nella
versione generata paragrafo e pulsante cadevano nella sezione bianca dopo,
e il primo schermo restava senza una chiamata all'azione. */
.hero-home { position: relative; overflow: hidden; text-align: center;
padding-block: clamp(90px, 13vh, 150px) clamp(80px, 12vh, 140px); }
.hero-home > .wrap { position: relative; z-index: 2; }
.hero-home .hero-hook { max-width: 62ch; margin: 22px auto 0; }
.hero-home .hero-cta { margin-top: 34px; }
/* Il marcatore giallo: due barre con una gola in mezzo, non una lastra unica.
`box-decoration-break: clone` è ciò che spezza lo sfondo riga per riga. */
/* ⚠️ Il marcatore è un pennarello, non un mattone: in produzione la banda è
1,43× l'altezza delle maiuscole, qui era 1,82 e le tre righe si saldavano
con gole da 3px. line-height e padding verticale sono le due leve. */
/* ⚠️ Qui c'erano `line-height: 1.16` e `padding: 0 .16em`, scritti per lo
stesso problema e senza misurarlo. Erano entrambi morti o dannosi:
l'interlinea la fissa ora `.hero h1:has(.mark)` a 1,3, che è più specifica;
e `box-decoration-break: clone` lo dà già `.mark`.
Il padding invece VINCEVA su una regola scritta più in alto con la stessa
specificità, solo perché stava più in basso — la trappola delle due
definizioni per lo stesso elemento, di nuovo.
In produzione il padding è `0px 5px` a ogni larghezza: fisso, non in em. */
.hero-home h1 .mark { padding: 0 5px; }
/* l'eroe può respirare più largo del resto della pagina */
.hero-home > .wrap { max-width: 1280px; }
.hero-home .hero-hook { font-weight: 400; }
/* Il grafico che si disegna: sta dietro, non ruba il posto al testo. */
/* ⚠️ Era `position: absolute; inset: auto 4% 0 auto`: il grafico stava
nell'angolo in basso a destra, DIETRO al testo. Misurato dal secondo giudice
il 2026-08-22: si sovrapponeva al paragrafo dell'eroe per il 25% a 1405px,
il 32% a 1024 (dove copriva anche il pulsante) e il **49% a 767** — e sotto
i 768 usciva dallo schermo, 46px tagliati a 767 e 23 a 390.
In produzione sta SOTTO la CTA, centrato e libero: a 390px il contenitore è
370x142 a y=438, mentre la CTA finisce a 324. Qui torna nel flusso. */
.hero-anim { width: min(255px, 62%); margin: 30px auto 0;
aspect-ratio: 862 / 777; opacity: .9; pointer-events: none; }
.occhiello { font-family: var(--display); font-size: 13px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
.promesse { display: grid; gap: clamp(22px, 4vw, 48px);
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* I servizi sono schede su fondo pieno, non paragrafi impilati: è il secondo
componente del sistema, e da solo sblocca metà dei rilievi sulla home. */
/* ── Le caselle dei servizi ──────────────────────────────────────────────────
MISURATA la produzione il 2026-08-22: NON è una griglia di caselle uguali.
Sono quattro riquadri in 2x2 **asimmetrico** — riga 1: 576x494 e 576x494;
riga 2: 720x381 e 420x381 (l'invito al questionario). Tutti con fondo
TRASPARENTE, bordo `2px rgb(69,69,69)`, raggio 24 e padding 40.
Il verde ne metteva tre uguali da 384x606 in fila e lasciava la quarta
orfana su una seconda riga: 3+1, che è il modo peggiore di disporne quattro.
⚠️ Flexbox e non grid: le due righe hanno proporzioni DIVERSE (50/50 e
63/37), e un solo `grid-template-columns` non può descriverle entrambe. */
.servizi { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px; }
.servizi > * { flex: 1 1 calc(50% - 12px); }
.servizi > :nth-child(3) { flex: 1 1 calc(63% - 12px); }
.servizi > :nth-child(4) { flex: 1 1 calc(37% - 12px); }
@media (max-width: 767px) { .servizi > * { flex: 1 1 100%; } }
/* ⚠️ `align-content: start` lasciava 185px di fondo vuoto — il 39% della
scheda — perché la griglia le allunga tutte alla più alta. Il blu
centra, e infatti lo stesso squilibrio lì non si nota. */
.servizio { background: transparent; border: 2px solid #454545; border-radius: 24px;
padding: clamp(24px, 3vw, 40px);
display: grid; align-content: center; gap: 14px; }
.servizio h3 { margin: 0; font-family: var(--display); font-weight: 700;
font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.servizio .prose { font-size: 18px; line-height: 1.6; color: #fff; }
.servizio .hero-cta { border-radius: 6px; justify-self: start; margin-top: 6px; font-size: 13px;
padding: 13px 22px; text-transform: none; letter-spacing: .02em; }
.missione { border-left: 3px solid var(--yellow); padding-left: 22px; margin: 30px 0; }
.missione .kpi { border: 0; padding: 0; text-align: left; }
.missione .kpi b { font-family: var(--body); font-weight: 600; font-size: 17px;
display: block; margin-bottom: 8px; color: var(--ink); }
.missione .kpi span { font-size: 20px; font-family: var(--display); font-weight: 600;
color: var(--yellow); font-size: clamp(18px, 2.2vw, 24px); }
/* Il questionario su fondo scuro, come nell'originale: una scheda bianca su
bianco con un filetto da 1px non si vede. */
/* Il questionario: 56px sopra e sotto, come in produzione — non gli 88 del
`.sec` generico. */
.sec-quiz { background: #fff; color: var(--ink); padding-block: 56px; }
.sec-quiz .fluentform { margin-top: 30px; }
.sec-quiz h2, .sec-quiz .sec-sub, .sec-quiz > .wrap > .prose { color: var(--ink); }
/* Le testimonianze video: elenco a sinistra, riproduttore a destra. */
/* ⚠️ SPECCHIATA rispetto a prima. Misurata la produzione il 2026-08-21 a
1405px: il lettore (`e-tabs-content-wrapper`) sta a x=103 ed è largo 804,
l'elenco (`e-tabs-wrapper`) a x=907 ed è largo 396 — lettore a SINISTRA,
elenco a destra, e attaccati: fra i due non c'è stacco (907 = 103 + 804).
Il verde li aveva invertiti e distanziati di 26px.
⚠️ Nel DOM l'elenco resta PRIMO, come in produzione: il `tablist` prima dei
`tabpanel` è anche l'ordine giusto per chi naviga da tastiera. A invertirli
è solo la griglia, non il markup. */
.playlist { display: grid; gap: 0; margin-top: 32px;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.playlist .riproduttore { grid-column: 1; grid-row: 1; }
.playlist .scelte { grid-column: 2; grid-row: 1;
display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.playlist .scelte button {
display: flex; align-items: center; gap: 12px;
background: none; border: 0; border-left: 3px solid transparent; cursor: pointer;
padding: 10px 14px; text-align: left; color: inherit; font: inherit;
font-family: var(--display); font-size: 15px; font-weight: 600;
}
/* La miniatura di ogni voce, 75x42 come in produzione. */
.playlist .scelte img { width: 75px; height: 42px; object-fit: cover; flex: 0 0 auto; }
.playlist .scelte span { flex: 1 1 auto; min-width: 0; }
.playlist .scelte button:hover { background: rgba(255,255,255,.06); }
.playlist .scelte button[aria-selected="true"] {
background: rgba(255,255,255,.09); border-left-color: var(--yellow); }
.playlist .scelte i { font-style: normal; font-size: 13px; color: var(--ink-faint);
flex: 0 0 auto; }
.playlist .video { aspect-ratio: 16/9; }
.playlist .video iframe { width: 100%; height: 100%; border: 0; }
/* In colonna sola il lettore va per primo: è quello che si guarda. Senza
rimettere `grid-row: auto` i due si sovrapporrebbero, perché a entrambi la
griglia sopra assegna la riga 1. */
/* ⚠️ 767px, non 820: MISURATO in produzione il 2026-08-21 — a 768 lettore ed
elenco sono ancora affiancati (461 + 227), a 767 si impilano. È lo stesso
salto del muro dei clienti. */
@media (max-width: 767px) {
.playlist { grid-template-columns: 1fr; gap: 18px; }
.playlist .riproduttore { grid-column: 1; grid-row: auto; order: -1; }
.playlist .scelte { grid-column: 1; grid-row: auto; max-height: 200px; }
}
/* ⚠️ La quarta casella aveva un fondo e un bordo suoi per «distinguersi senza
gridare». In produzione è identica alle altre: stesso bordo 2px, stesso
fondo trasparente. A distinguerla basta che sia l'ultima e più stretta. */
/* ── Focus visibile ovunque, non solo dentro .sec-modulo ─────────────────────
⚠️ La correzione esisteva da tempo ma era scoped su `.sec-modulo`, che la
home non ha: sui pulsanti gialli, sulle anteprime dei casi studio e sui
campi del questionario l'anello restava giallo su bianco — 1,42:1, cioè
invisibile proprio a chi naviga da tastiera. Ora la regola è globale e si
inverte solo sulle fasce scure. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid #0d0d0d; outline-offset: 3px; border-radius: 2px;
}
.sec-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.hero :where(a, button, [tabindex]):focus-visible,
dialog.lente :where(button, [tabindex]):focus-visible {
outline-color: var(--yellow);
}
/* ⚠️ Pista e riempimento erano invertiti: in FluentForm `.ff-el-progress` è la
pista e `.ff-el-progress-bar` è il riempimento. Coloravo lo `span` interno,
che resta a larghezza zero: la barra leggeva 0% a ogni passo. */
form.ff-passi .ff-el-progress { background: #d7d7d2; border-radius: 999px;
height: 8px; overflow: hidden; margin-bottom: 22px; }
form.ff-passi .ff-el-progress-bar { background: var(--yellow); height: 100%;
width: 0; border-radius: 999px; transition: width .25s ease;
text-indent: -9999px; overflow: hidden; }
form.ff-passi .ff-el-progress-bar span { display: none; }
/* ⚠️ `.ff_item_selectable_wrapper` non esiste in nessuna delle due pagine:
era CSS morto. Le classi vere del plugin sono queste. */
.ff_el_checkable_photo_holders { display: flex !important; flex-wrap: wrap;
gap: 14px; }
.ff_el_checkable_photo_holders .ff-el-image-holder,
.ff_el_checkable_photo_holders label {
border-radius: 10px; border: 1px solid #c9c9c2 !important; }
/* ── Schermo stretto ─────────────────────────────────────────────────────────
⚠️ Giudizio letto dal codice e poi corretto: NESSUNA media query toccava
`.site-head`, `.nav` o `.brand`. Sotto i ~700px i sei link andavano a capo su
due o tre righe e l'intestazione cresceva in altezza — e siccome sull'eroe è
sovrapposta, le righe in più cadevano sull'occhiello e sul titolo. In più
`.servizi` chiedeva colonne da 340px dentro un contenitore da 335 (iPhone SE)
o 320 (Android da 360): la pagina scorreva in orizzontale. */
@media (max-width: 760px) {
/* ⚠️ Qui `.site-head .wrap` andava a capo e `.nav` diventava un nastro che
scorreva in orizzontale: servivano quando i link stavano nella barra.
Ora la barra tiene solo marchio, bandiere e hamburger — non ha niente da
mandare a capo, e la nav è un cassetto sovrapposto. Regole tolte, non
sovrascritte. */
.brand img { height: 34px; }
.servizi { grid-template-columns: 1fr; }
.promesse { grid-template-columns: 1fr; }
.playlist { grid-template-columns: 1fr; }
.hero-home > .wrap { max-width: 100%; }
}
@media (max-width: 400px) {
.servizi, .lavori, .lavori.verticali, .lavori.orizzontali,
.griglia-img.larga { grid-template-columns: 1fr; }
.griglia-img:not(.ritratti) { grid-template-columns: 1fr; }
.griglia-img.ritratti { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* ── Gerarchia dei pulsanti ──────────────────────────────────────────────────
⚠️ Tre pulsanti gialli identici in fila vuol dire nessun pulsante primario.
In produzione ce ne sono tre livelli: giallo pieno per l'azione principale,
contorno con la freccia per le secondarie. Il verso lo dice il generatore
(prima azione = primaria), non il CSS. */
/* ⚠️ Bordo `currentColor` e raggio ZERO, misurati in produzione il 2026-08-21:
«See all Reviews» ha `border: 1px rgb(13,13,13)` — lo stesso colore del
testo — e `border-radius: 0px`. Il verde usava `var(--rule)` (#e0e0e0, molto
più pallido) e 6px di raggio.
⚠️ E niente freccia: la nota «contorno più freccia, come in produzione» era
una deduzione, non una misura. In produzione questi pulsanti non ne hanno. */
.hero-cta.secondaria {
background: transparent; color: var(--ink);
border: 1px solid currentColor; border-radius: 0;
}
.hero-cta.secondaria:hover { background: transparent; border-color: var(--ink); }
.sec-dark .hero-cta.secondaria, .hero .hero-cta.secondaria {
color: #f2f2f0; border-color: rgba(255,255,255,.35);
}
/* In produzione i gruppi di pulsanti delle fasce sono centrati: «See all Case
studies» sta a x=550 in una banda 103–1303, centro 703 su 703. */
.sec-lead .hero-azioni { justify-content: center; }
.sec-dark .hero-cta.secondaria:hover, .hero .hero-cta.secondaria:hover {
border-color: var(--yellow); color: var(--yellow);
}
/* Le due promesse: in produzione il marcatore è nero con testo bianco, non
giallo con testo nero. È il contrario di quello che facevo. */
.promesse .mark { background: #0a0a0a; color: #fff; }
/* ── Il taglio diagonale fra le fasce: NON fatto, di proposito ───────────────
In produzione il passaggio fra fascia scura e chiara è inclinato (misurato in
BLUE-5: 17px di dislivello su 1447 di larghezza, ~0,7°). Ho provato a
riprodurlo con uno pseudo-elemento e `clip-path`: la regola non rendeva
niente di visibile, e una regola che non fa niente è peggio di una mancanza —
resta lì a far credere che il problema sia risolto. Tolta.
Se lo si vuole davvero, la strada giusta è un