/* ═══════════════════════════════════════════════════════════════════════════ SNAPLIN · Landing Design System — v1 ─────────────────────────────────────────────────────────────────────────── UN SOLO foglio per TUTTE le landing. Le differenze fra una pagina e l'altra vivono nelle VARIABILI, non in regole diverse. palette (12) → colori + font --accent, --font-heading, … stile (6) → forme --radius, --shadow, --border-w 12 × 6 = 72 combinazioni = 72 modi di riempire 9 variabili, NON 72 CSS. COME SI APPLICA A UNA PAGINA — due modi, combinabili: ← preset ← su misura Lo `style` inline vince sempre: è così che si supporta il colore del brand del professionista senza toccare questo file. REGOLE DI CASA - Ogni classe ha il prefisso `snp-`: nessuna collisione con il CSS di un eventuale dominio custom del cliente. - Nessun valore fisso di colore/raggio/ombra dentro i componenti: solo var(). - Il mobile si risolve QUI, una volta, non in ogni pagina generata. - Le immagini dichiarano sempre un aspect-ratio: è ciò che tiene il CLS < 0,1. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 0 · BASE DEI TOKEN ────────────────────────────────────────────────── DEVE stare PRIMA dei preset. `:root` e `[data-palette="…"]` hanno la STESSA specificità (0,1,0): a parità vince l'ultimo scritto. Con questo blocco in fondo al file, i font dei preset venivano sovrascritti dai default e il selettore font non faceva nulla — bug reale, trovato guardando la vetrina. */ :root{ /* ETICHETTA DI VERSIONE — il laboratorio la legge dall'anteprima e la mostra. Serve a rispondere in un colpo d'occhio alla domanda che ci ha fatto perdere tre giri: "questa pagina sta usando il CSS nuovo o una copia in cache?". Se nel pannello non compare, il foglio non è stato caricato affatto. ⚠️ Alzarla ad OGNI modifica sostanziale di questo file. */ --css-v:"2026-07-22-h"; --ink:#16191f; --mut:#5b6472; --faint:#8b939f; --surface:#ffffff; --surface-2:#f6f7f9; --line:#e6e8ec; --font-heading:system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:system-ui,-apple-system,"Segoe UI",sans-serif; --maxw:1080px; } /* ─── 1 · TOKEN: PALETTE (12) ───────────────────────────────────────────── Solo colori. Le forme stanno negli stili, i font nei font-style. --cta-bg / --on-cta : lo sfondo del bottone e il colore del testo SOPRA di esso. Non sono un vezzo: su 6 palette su 12 il testo bianco sull'accento NON raggiunge il rapporto di contrasto 4,5:1 richiesto da WCAG AA — la peggiore è rosa-elegante a 2,98. Su quelle il bottone usa la variante SCURA dell'accento, che riporta tutte sopra soglia (4,50 → 5,98). L'accento resta quello scelto per titoli e dettagli: cambia solo lo sfondo del bottone, dove la leggibilità decide se il visitatore converte o se ne va. */ :root, [data-palette="blu-fiducia"] { --accent:#2563EB; --accent-dark:#1D4ED8; --accent-light:#EFF6FF; --cta-bg:#2563EB; --on-cta:#fff; } [data-palette="verde-natura"] { --accent:#16A34A; --accent-dark:#15803D; --accent-light:#F0FDF4; --cta-bg:#15803D; --on-cta:#fff; } /* accento: 3,30 → scuro 5,02 */ [data-palette="rosa-elegante"] { --accent:#C084A0; --accent-dark:#A2647F; --accent-light:#FDF4F8; --cta-bg:#A2647F; --on-cta:#fff; } /* accento: 2,98 → scuro 4,50 */ [data-palette="arancio-energia"] { --accent:#EA580C; --accent-dark:#C2410C; --accent-light:#FFF7ED; --cta-bg:#C2410C; --on-cta:#fff; } /* accento: 3,56 → scuro 5,18 */ [data-palette="viola-premium"] { --accent:#7C3AED; --accent-dark:#6D28D9; --accent-light:#F5F3FF; --cta-bg:#7C3AED; --on-cta:#fff; } [data-palette="oro-luxury"] { --accent:#B45309; --accent-dark:#92400E; --accent-light:#FFFBEB; --cta-bg:#B45309; --on-cta:#fff; } [data-palette="nero-sofisticato"] { --accent:#374151; --accent-dark:#1F2937; --accent-light:#F9FAFB; --cta-bg:#374151; --on-cta:#fff; } [data-palette="teal-fresco"] { --accent:#0D9488; --accent-dark:#0F766E; --accent-light:#F0FDFA; --cta-bg:#0F766E; --on-cta:#fff; } /* accento: 3,74 → scuro 5,47 */ [data-palette="rosso-deciso"] { --accent:#DC2626; --accent-dark:#B91C1C; --accent-light:#FEF2F2; --cta-bg:#DC2626; --on-cta:#fff; } [data-palette="terracotta-caldo"] { --accent:#C2652A; --accent-dark:#9A4F20; --accent-light:#FDF6F0; --cta-bg:#9A4F20; --on-cta:#fff; } /* accento: 4,05 → scuro 5,98 */ [data-palette="azzurro-chiaro"] { --accent:#0284C7; --accent-dark:#0369A1; --accent-light:#F0F9FF; --cta-bg:#0369A1; --on-cta:#fff; } /* accento: 4,10 → scuro 5,93 */ [data-palette="verde-scuro"] { --accent:#065F46; --accent-dark:#064E3B; --accent-light:#ECFDF5; --cta-bg:#065F46; --on-cta:#fff; } /* ─── 1b · TOKEN: FONT (5 accoppiate) ───────────────────────────────────── MASSIMO DUE font per pagina: uno per i titoli, uno per il testo. Non di più: ogni famiglia in più è peso da scaricare e un rischio in più per l'LCP. Sono le 5 accoppiate già definite in packages/core/src/palettes.ts. */ [data-font="elegante"] { --font-heading:'Cormorant Garamond',Georgia,serif; --font-body:'DM Sans',system-ui,sans-serif; } [data-font="professionale"] { --font-heading:'Plus Jakarta Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; } [data-font="caldo"] { --font-heading:'Nunito',system-ui,sans-serif; --font-body:'Source Sans 3',system-ui,sans-serif; } [data-font="moderno"] { --font-heading:'Sora',system-ui,sans-serif; --font-body:'DM Sans',system-ui,sans-serif; } [data-font="femminile"] { --font-heading:'Playfair Display',Georgia,serif; --font-body:'Mulish',system-ui,sans-serif; } /* ─── 2 · TOKEN: STILE (6) ──────────────────────────────────────────────── Solo forme. Nessun colore. Sono i 6 preset già usati oggi dal generatore. */ :root, [data-stile="minimal"] { --radius:6px; --radius-lg:10px; --btn-radius:8px; --border-w:1px; --shadow:0 1px 3px rgba(0,0,0,.06); --shadow-lg:0 4px 16px rgba(0,0,0,.06); --sect-pad:64px; --gap:20px; } [data-stile="arrotondato"] { --radius:20px; --radius-lg:28px; --btn-radius:999px; --border-w:1px; --shadow:0 2px 8px rgba(0,0,0,.07); --shadow-lg:0 8px 28px rgba(0,0,0,.10); --sect-pad:64px; --gap:20px; } [data-stile="squadrato"] { --radius:0px; --radius-lg:0px; --btn-radius:0px; --border-w:2px; --shadow:none; --shadow-lg:none; --sect-pad:60px; --gap:18px; } [data-stile="elegante"] { --radius:2px; --radius-lg:4px; --btn-radius:2px; --border-w:1px; --shadow:0 1px 2px rgba(0,0,0,.05); --shadow-lg:0 6px 24px rgba(0,0,0,.07); --sect-pad:80px; --gap:26px; } [data-stile="bold"] { --radius:10px; --radius-lg:14px; --btn-radius:10px; --border-w:3px; --shadow:0 4px 0 var(--ink); --shadow-lg:0 8px 0 var(--ink); --sect-pad:64px; --gap:18px; } [data-stile="caldo"] { --radius:16px; --radius-lg:22px; --btn-radius:14px; --border-w:1px; --shadow:0 2px 10px rgba(120,80,40,.10); --shadow-lg:0 10px 30px rgba(120,80,40,.13); --sect-pad:68px; --gap:22px; } /* (i neutri e i font di base sono nella sezione 0, in cima: devono venire PRIMA dei preset, altrimenti li sovrascrivono) */ /* ─── 3 · BASE ────────────────────────────────────────────────────────────── */ /* ⚠️ TUTTI gli stili di base per elementi nudi stanno dentro `:where()`, che azzera la specificità del selettore (0,0,0). NON è un vezzo: è la regola che tiene in piedi il resto del foglio. Scritti in chiaro, `.snp p` e `.snp a` valgono (0,1,1) e BATTONO le classi dei componenti, che valgono (0,1,0). È già costato caro due volte: • `.snp a{color:inherit}` → ogni bottone ereditava --ink e usciva col testo quasi nero sul proprio fondo scuro (contrasto 2,97). Resisteva a qualunque correzione sui token perché il colore non veniva MAI applicato. • `.snp p{margin:0}` → azzerava `margin-inline:auto` sui sottotitoli, che restavano incollati a sinistra invece di centrarsi. In entrambi i casi funzionavano solo i punti scritti con due classi (0,2,0) — `.snp-cta .snp-btn`, `.snp-hero--centrato .snp-hero__sub` — il che rendeva il difetto incoerente e difficile da leggere. Una base deve SERVIRE i componenti, non competerci. */ .snp *{box-sizing:border-box} .snp{ margin:0; color:var(--ink); background:var(--surface); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } :where(.snp h1,.snp h2,.snp h3,.snp h4){ font-family:var(--font-heading); line-height:1.15; letter-spacing:-.02em; margin:0; text-wrap:balance; font-weight:800; } :where(.snp p){margin:0} :where(.snp img){max-width:100%; display:block} /* I link nel testo ereditano il colore del testo invece del blu del browser. È un DEFAULT, e un default non deve poter battere un componente: avvolto in `:where()`, che azzera la specificità della regola (0,0,0). Senza, il selettore era `.snp a` = (0,1,1) e vinceva su `.snp-btn` = (0,1,0): OGNI bottone ereditava --ink e usciva col testo quasi nero sul proprio fondo scuro. È il bug che ha resistito a tre round di correzioni sui token, perché il colore non veniva mai applicato — non era la variabile a mancare, era la dichiarazione a perdere la cascata. L'unico bottone corretto era quello della fascia CTA, l'unico scritto come `.snp-cta .snp-btn` = (0,2,0). REGOLA: gli stili di base per gli elementi nudi vanno SEMPRE in `:where()`, altrimenti competono con le classi dei componenti che dovrebbero solo servire. */ :where(.snp a){color:inherit} .snp-sez{padding:var(--sect-pad) 20px} .snp-sez--alt{background:var(--surface-2)} .snp-cnt{max-width:var(--maxw); margin:0 auto} .snp-sez__testa{max-width:60ch; margin:0 auto clamp(30px,4vw,46px); text-align:center} .snp-sez__titolo{font-size:clamp(24px,4vw,34px); margin-bottom:clamp(10px,1.5vw,16px)} .snp-sez__sub{color:var(--mut); font-size:17px; line-height:1.6} /* Media: aspect-ratio SEMPRE dichiarato → niente salti di layout (CLS) */ .snp-media{ border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-2); aspect-ratio:16/9; } .snp-media img{width:100%; height:100%; object-fit:cover} .snp-media--ritratto{aspect-ratio:3/4} .snp-media--quadrato{aspect-ratio:1/1} /* Bottone — usa --cta-bg/--on-cta, mai l'accento crudo: è la coppia garantita sopra il rapporto di contrasto 4,5:1 su tutte e 12 le palette. */ .snp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; /* Il testo è #fff LETTERALE, non var(--on-cta). Non è pigrizia: tutte e 12 le palette definiscono --on-cta:#fff, quindi la variabile non decide niente — aggiunge solo un anello che può rompersi. E si è rotto davvero, due volte, con bottoni dal testo quasi nero su fondo scuro (contrasto 2,97) mentre --cta-bg dello STESSO blocco arrivava correttamente. Un bottone illeggibile è il difetto più costoso di una landing: qui la leggibilità non dipende dalla catena dei token. Se un giorno servirà una palette con testo scuro sul bottone, si aggiunge una regola esplicita per QUELLA palette — l'eccezione dichiarata, non l'indirezione per tutti. Il fondo resta variabile: se fallisce si vede, non si nasconde. */ background:var(--cta-bg, var(--accent, #2563EB)); color:#fff; text-decoration:none; font-family:var(--font-heading); font-weight:800; font-size:16px; padding:15px 30px; border-radius:var(--btn-radius); border:0; box-shadow:var(--shadow); cursor:pointer; text-align:center; transition:filter .15s, transform .15s; } .snp-btn:hover{filter:brightness(.92); transform:translateY(-1px)} /* Ghost: il testo sta sul FONDO della pagina, non sull'accento → qui l'accento scuro è la scelta leggibile su bianco. */ .snp-btn--ghost{background:transparent; color:var(--accent-dark, #1D4ED8); border:var(--border-w) solid var(--accent); box-shadow:none} .snp-btn--ghost:hover{background:var(--accent-light); filter:none} /* Soft: l'azione DI APPOGGIO, quando in una sezione ce n'è più di una. Due bottoni pieni identici mettono il visitatore a scegliere invece che ad agire — la seconda azione deve leggersi come alternativa, non come pari grado. Fondo chiaro pieno (non trasparente): funziona sia sul fondo tinto dell'hero sia sul bianco delle sezioni, senza dipendere da cosa c'è sotto. Testo --accent-dark su chiaro: è la stessa coppia già verificata a ≥4,5 per la fascia CTA in negativo, quindi resta leggibile su tutte e 12 le palette. */ .snp-btn--soft{ background:#fff; color:var(--accent-dark, #1D4ED8); border:var(--border-w, 1px) solid var(--accent, #2563EB); box-shadow:none; font-weight:700; } .snp-btn--soft:hover{background:var(--accent-light, #EFF6FF); filter:none} .snp-btn--lg{font-size:17px; padding:17px 36px} /* ─── 3b · COMPONENTE: TOPBAR (barra fissa con CTA) ─────────────────────── Chrome strutturale, non una sezione: sta sopra tutto e tiene l'azione primaria sempre a portata di pollice. Promosso da componenti-v2.css (task CRO #2). */ .snp-topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px clamp(16px,4vw,30px); background:var(--surface); border-bottom:var(--border-w,1px) solid var(--line); box-shadow:var(--shadow); } .snp-topbar__brand{display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; color:var(--ink); font-size:16px} .snp-topbar__pallino{width:26px; height:26px; border-radius:50%; background:var(--accent); flex:none} /* Il marchio in barra: logo o foto del professionista. Stessa misura e stessa forma del pallino che ha sostituito, così la barra non si muove quando l'immagine arriva. `object-fit:cover` perché la foto profilo non è quadrata quasi mai. */ .snp-topbar__logo{width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; background:var(--line)} /* Testo #fff LETTERALE, come tutti i bottoni pieni: la leggibilità non dipende dalla catena dei token (vedi .snp-btn e il guardiano landing-css.test.mjs). */ .snp-topbar__cta{ font-family:var(--font-heading); font-weight:800; font-size:14px; text-decoration:none; background:var(--cta-bg, var(--accent, #2563EB)); color:#fff; padding:9px 18px; border-radius:var(--btn-radius); } /* ─── 3c · COMPONENTI ARGOMENTO: problem · benefits ────────────────────── Puro copy dall'argomento, nessun dato esterno. `problem` = il dolore del cliente (fase Interesse), `benefits` = i vantaggi concreti (fase Desiderio). Promossi da componenti-v2.css (task CRO). Il marcatore è deterministico (bordo accento / ✓), non un'icona che il modello deve inventare. */ .snp-problemi{display:grid; gap:12px; max-width:760px; margin:0 auto} .snp-problema{ background:var(--surface); border:var(--border-w,1px) solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); } .snp-problema__t{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:16px; margin:0 0 3px} .snp-problema__d{color:var(--mut); font-size:14.5px; margin:0} .snp-benefici{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap)} .snp-beneficio{ display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:var(--border-w,1px) solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); } .snp-beneficio__check{ width:30px; height:30px; border-radius:8px; background:var(--accent-light); color:var(--accent); display:grid; place-items:center; flex:none; font-weight:800; font-size:16px; } .snp-beneficio__t{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:15px; margin:0 0 3px} .snp-beneficio__d{color:var(--mut); font-size:14px; margin:0} /* mechanism (snp-metodo) — il metodo/framework: i pilastri del "perché funziona". Marcatore = bordo accento, NON un'icona che il modello debba inventare. `process` riusa .snp-passi (gli step numerati), già definito sotto. */ .snp-metodo{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(16px,3vw,28px); max-width:var(--maxw); margin:0 auto} .snp-metodo__col{padding-left:14px; border-left:3px solid var(--accent)} .snp-metodo__t{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:16px; margin:0 0 5px} .snp-metodo__d{color:var(--mut); font-size:14px; margin:0} /* qualifications (snp-qualifiche) — le CREDENZIALI (albo/certificazioni/titoli). Il contenuto arriva dal database (come le recensioni), il modello non lo scrive. Marcatore = bordo accento, niente icona. */ .snp-qualifiche{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; max-width:var(--maxw); margin:0 auto} .snp-qual{background:var(--surface); border:var(--border-w,1px) solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)} .snp-qual__t{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:14px; margin:0} .snp-qual__d{color:var(--mut); font-size:12.5px; margin:2px 0 0} /* ─── 3d · MODULI TRUST (bind-to-data) — rating · trust_bar · stats · zona ── Il contenuto arriva dai dati (numeri/credenziali/zona reali), non dal modello. */ /* rating_badge — la valutazione aggregata (Google), above-the-fold */ .snp-rating{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:13px 20px; background:var(--accent-light)} .snp-rating__stelle{color:var(--accent); font-size:17px; letter-spacing:1px} .snp-rating__voto{font-family:var(--font-heading); font-weight:800; color:var(--ink); font-size:17px} .snp-rating__n{color:var(--mut); font-size:14px} /* trust_bar — striscia di micro-fiducia (icon-free) */ .snp-trust{background:var(--accent-light); border-top:var(--border-w,1px) solid var(--line); border-bottom:var(--border-w,1px) solid var(--line)} .snp-trust__row{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,4vw,40px); padding:14px 20px; max-width:var(--maxw); margin:0 auto} .snp-trust__item{font-size:13.5px; color:var(--ink); font-weight:700} .snp-trust__item span{color:var(--mut); font-weight:500} /* stats_counter — i numeri veri */ .snp-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:clamp(16px,4vw,40px); max-width:var(--maxw); margin:0 auto; text-align:center} .snp-stat__n{font-family:var(--font-heading); font-weight:800; color:var(--accent); font-size:clamp(28px,5vw,40px); line-height:1} .snp-stat__l{color:var(--mut); font-size:14px; margin-top:6px} /* service_area — la zona servita (chip dei comuni) */ .snp-zona__comuni{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:760px; margin:0 auto} .snp-zona__chip{background:var(--accent-light); color:var(--accent-dark); border:var(--border-w,1px) solid var(--line); border-radius:20px; padding:6px 14px; font-size:13.5px; font-weight:600} /* ─── 3e · PROVA VISIVA / CONFRONTO / CHIUSURA — galleria · comparison · guarantee · footer ── */ /* galleria: griglia (foto sciolte) + prima-dopo (coppie). Le foto vengono dai dati. */ .snp-galleria{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:var(--maxw); margin:0 auto} @media(max-width:720px){.snp-galleria{grid-template-columns:repeat(2,1fr)}} .snp-galleria__img{aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); border:var(--border-w,1px) solid var(--line)} .snp-galleria__img img{width:100%; height:100%; object-fit:cover; display:block} .snp-primadopo{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:var(--maxw); margin:0 auto} .snp-pd{border-radius:var(--radius-lg,12px); overflow:hidden; border:var(--border-w,1px) solid var(--line); box-shadow:var(--shadow)} .snp-pd__coppia{display:grid; grid-template-columns:1fr 1fr} .snp-pd__lato{position:relative; aspect-ratio:1/1; background:var(--surface-2)} .snp-pd__lato img{width:100%; height:100%; object-fit:cover; display:block} .snp-pd__tag{position:absolute; top:8px; left:8px; background:rgba(0,0,0,.65); color:#fff; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:5px; text-transform:uppercase; letter-spacing:.05em} .snp-pd__cap{padding:11px 14px; font-size:13.5px; color:var(--mut); background:var(--surface)} /* comparison — "noi vs il tipico" (mai concorrenti nominati) */ .snp-confronto{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:0 auto} @media(max-width:560px){.snp-confronto{grid-template-columns:1fr}} .snp-conf{border:var(--border-w,1px) solid var(--line); border-radius:var(--radius-lg,12px); overflow:hidden} .snp-conf--noi{border-color:var(--accent)} .snp-conf__h{padding:13px 16px; font-family:var(--font-heading); font-weight:800; font-size:15px; text-align:center} .snp-conf--noi .snp-conf__h{background:var(--cta-bg, var(--accent, #2563EB)); color:#fff} .snp-conf--loro .snp-conf__h{background:var(--surface-2); color:var(--mut)} .snp-conf__li{display:flex; gap:10px; align-items:flex-start; padding:11px 16px; border-top:var(--border-w,1px) solid var(--line); font-size:14px; color:var(--ink)} .snp-conf__li:first-of-type{border-top:0} .snp-conf__mk{flex:none; font-weight:800} .snp-conf--noi .snp-conf__mk{color:var(--accent)} .snp-conf--loro .snp-conf__mk{color:var(--faint)} /* per_chi — auto-qualificazione. Volutamente PIÙ SOBRIO del confronto: qui non si vince contro qualcuno, si dice a chi si serve. Se manca la colonna "non fa per te" (--sola) la prima si centra da sola invece di restare orfana a metà griglia. */ .snp-perchi{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:0 auto} .snp-perchi--sola{grid-template-columns:1fr; max-width:480px} @media(max-width:560px){.snp-perchi{grid-template-columns:1fr}} .snp-perchi__col{border:var(--border-w,1px) solid var(--line); border-radius:var(--radius-lg,12px); padding:18px 18px 14px} .snp-perchi__col--si{border-color:var(--accent); background:var(--surface)} .snp-perchi__col--no{background:var(--surface-2)} .snp-perchi__h{font-family:var(--font-heading); font-weight:800; font-size:15px; margin-bottom:12px} .snp-perchi__col--si .snp-perchi__h{color:var(--accent-dark, var(--ink))} .snp-perchi__col--no .snp-perchi__h{color:var(--faint)} .snp-perchi__li{display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:14.5px; line-height:1.5; color:var(--ink)} .snp-perchi__col--no .snp-perchi__li{color:var(--faint)} .snp-perchi__mk{flex:none; font-weight:800; color:var(--accent)} .snp-perchi__col--no .snp-perchi__mk{color:var(--faint)} /* guarantee — le garanzie (dai dati, icon-free: marcatore ✓) */ .snp-garanzia{background:var(--accent-light)} .snp-garanzie{display:grid; gap:10px; max-width:680px; margin:0 auto} .snp-garanzia__item{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink); font-weight:600} .snp-garanzia__item::before{content:"✓"; color:var(--accent); font-weight:800; flex:none} /* legal_footer — chiusura legale */ .snp-footer{background:var(--ink); color:rgba(255,255,255,.72); padding:32px 20px} .snp-footer__in{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center} .snp-footer__brand{font-family:var(--font-heading); font-weight:800; color:#fff; font-size:16px} .snp-footer__meta{font-size:12.5px; line-height:1.7} /* Privacy e cookie: obblighi, non decorazione. Sottolineati sempre — in un footer scuro il solo colore non basta a dire che sono link, e chi li cerca li cerca in fretta. */ /* Modulo a PASSI. Nessuna regola nasconde i passi: a nasconderli è global.js quando parte, e senza JavaScript restano tutti visibili — cioè il modulo di sempre, che funziona. Metterlo qui avrebbe reso i campi contatto invisibili e il modulo non inviabile. */ .snp-form__barra{height:4px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:18px} .snp-form__barra span{display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease} .snp-form__passo{display:flex; flex-direction:column; gap:14px} .snp-form__passo[hidden]{display:none} .snp-footer__legali{font-size:12.5px} .snp-footer__legali a{color:rgba(255,255,255,.86); text-decoration:underline} .snp-footer__legali a:hover{color:#fff} /* La firma: presente, non invadente. Il logo è inline, non costa una richiesta di rete. */ .snp-footer__snaplin{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.6); text-decoration:none} .snp-footer__snaplin:hover{color:rgba(255,255,255,.9)} /* ─── 3f · OFFERTA / CONVERSIONE — case_studies · team · pricing · lead_form · booking ── */ /* case_studies — problema → azione → risultato */ .snp-casi{display:grid; gap:16px; max-width:820px; margin:0 auto} .snp-caso{background:var(--surface); border:var(--border-w,1px) solid var(--line); border-radius:var(--radius-lg,12px); padding:22px; box-shadow:var(--shadow)} .snp-caso__titolo{font-family:var(--font-heading); font-weight:800; color:var(--ink); font-size:18px; margin:0} .snp-caso__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:14px} @media(max-width:640px){.snp-caso__grid{grid-template-columns:1fr}} .snp-caso__k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:800; margin:0 0 4px} .snp-caso__v{color:var(--mut); font-size:14px; margin:0} /* team — i membri */ .snp-team{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; max-width:var(--maxw); margin:0 auto} .snp-membro{text-align:center} .snp-membro__foto{width:108px; height:108px; border-radius:50%; margin:0 auto 12px; overflow:hidden; background:var(--surface-2); border:2px solid var(--accent-light)} .snp-membro__foto img{width:100%; height:100%; object-fit:cover; display:block} .snp-membro__nome{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:15px; margin:0 0 2px} .snp-membro__ruolo{color:var(--accent-dark); font-size:13px; margin:0} /* pricing — pacchetti (mai un prezzo inventato; --top = tier in risalto) */ .snp-prezzi{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; max-width:var(--maxw); margin:0 auto} .snp-prezzo{background:var(--surface); border:var(--border-w,1px) solid var(--line); border-radius:var(--radius-lg,12px); padding:24px 20px; box-shadow:var(--shadow); text-align:center; display:flex; flex-direction:column} .snp-prezzo--top{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), var(--shadow-lg)} .snp-prezzo__badge{align-self:center; background:var(--accent-light); color:var(--accent-dark); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:20px; margin-bottom:10px} .snp-prezzo__nome{font-family:var(--font-heading); font-weight:800; font-size:17px; color:var(--ink); margin:0 0 6px} .snp-prezzo__cifra{font-family:var(--font-heading); font-weight:800; font-size:34px; color:var(--ink); margin:0 0 4px} .snp-prezzo__cifra small{font-size:14px; color:var(--mut); font-weight:500} .snp-prezzo__lista{list-style:none; margin:16px 0; padding:0; text-align:left; display:grid; gap:9px} .snp-prezzo__lista li{display:flex; gap:9px; font-size:14px; color:var(--mut)} .snp-prezzo__lista li::before{content:"✓"; color:var(--accent); font-weight:800; flex:none} /* lead_form — il form di contatto */ .snp-form__box{max-width:520px; margin:0 auto; background:var(--surface); border:var(--border-w,1px) solid var(--line); border-radius:var(--radius-lg,14px); padding:26px; box-shadow:var(--shadow-lg)} .snp-form__campo{margin-bottom:13px} .snp-form__campo label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px} .snp-form__campo input{width:100%; box-sizing:border-box; font-size:16px; padding:11px 13px; border:var(--border-w,1px) solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-family:inherit} .snp-form__campo input:focus{outline:2px solid var(--accent); border-color:var(--accent)} .snp-form__box .snp-btn{width:100%; margin-top:6px} .snp-form__nota{font-size:11.5px; color:var(--faint); text-align:center; margin-top:11px} /* lead_form — campi del form REALE (③): select, hint facoltativo, honeypot, GDPR, submit */ .snp-form__campo select{width:100%; box-sizing:border-box; font-size:16px; padding:11px 13px; border:var(--border-w,1px) solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-family:inherit} .snp-form__campo select:focus{outline:2px solid var(--accent); border-color:var(--accent)} .snp-form__opz{font-weight:400; color:var(--faint)} .snp-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; overflow:hidden} .snp-form__gdpr{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--faint); margin:2px 0 14px; line-height:1.45; cursor:pointer} .snp-form__gdpr input{margin-top:2px; accent-color:var(--accent); flex:none} .snp-form__gdpr a{color:var(--accent); text-decoration:underline} .snp-form__box button.snp-btn{appearance:none; -webkit-appearance:none; border:0; cursor:pointer; font-family:inherit} /* thank-you page (③) — la conferma dopo il submit; configurabile dal pro (blocchi) */ .snp-ty{min-height:100vh; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:48px 20px; background:var(--surface)} .snp-ty__box{max-width:560px; margin:0 auto; text-align:center} .snp-ty__badge{width:64px; height:64px; margin:0 auto 22px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; line-height:1; box-shadow:var(--shadow-lg)} .snp-ty__titolo{font-family:var(--font-heading); font-size:clamp(28px,6vw,40px); color:var(--ink); margin:0 0 12px; line-height:1.15} .snp-ty__msg{font-family:var(--font-body); font-size:17px; color:var(--faint); margin:0 auto; max-width:44ch; line-height:1.5} .snp-ty__blocchi{margin-top:30px; display:flex; flex-direction:column; gap:20px; align-items:center} .snp-ty__testo{font-family:var(--font-body); font-size:15px; color:var(--ink); margin:0; max-width:52ch; line-height:1.55} .snp-ty__media{width:100%; max-width:520px} /* `height:auto` faceva saltare la pagina mentre l'immagine caricava: era l'unico punto del motore senza spazio riservato (il resto lo dichiara dalla riga 175). */ .snp-ty__img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg,14px); display:block} .snp-ty__video{position:relative; aspect-ratio:16/9} .snp-ty__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--radius-lg,14px)} .snp-ty__cta{margin-top:4px} /* booking — slot (l'integrazione calendario reale è separata) */ .snp-booking{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:9px; max-width:560px; margin:0 auto} .snp-slot{text-align:center; border:var(--border-w,1px) solid var(--line); border-radius:var(--radius); padding:11px 6px; background:var(--surface)} .snp-slot__g{font-size:11px; color:var(--mut); text-transform:uppercase} .snp-slot__o{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:15px; margin-top:3px} .snp-slot--off{opacity:.4; text-decoration:line-through} /* ─── 4 · COMPONENTE: HERO ──────────────────────────────────────────────── Varianti = strutture di contenuto diverse, non solo layout diverso. */ /* RITMO VERTICALE — gli spazi scalano col carattere, non sono fissi. Un margine in pixel fissi sotto un titolo `clamp(30px…52px)` è giusto solo all'estremo piccolo: a 52px lo stesso spazio vale proporzionalmente la metà e la pagina si stringe. Le distanze qui sotto crescono con la stessa `vw` della scala tipografica, così il rapporto fra testo e aria resta costante. */ .snp-hero{padding:clamp(48px,8vw,96px) 20px; background:var(--accent-light)} .snp-hero__occhiello{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:clamp(12px,1.6vw,20px); } .snp-hero__titolo{font-size:clamp(30px,5.6vw,52px); margin-bottom:clamp(16px,2.4vw,28px)} .snp-hero__sub{font-size:clamp(16px,2.2vw,19px); line-height:1.6; color:var(--mut); max-width:56ch} .snp-hero__azioni{display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,3.6vw,42px)} /* variante A — centrato: titolo + sottotitolo + azioni (+ media sotto) */ .snp-hero--centrato .snp-cnt{text-align:center} .snp-hero--centrato .snp-hero__sub{margin-inline:auto} .snp-hero--centrato .snp-hero__azioni{justify-content:center} .snp-hero--centrato .snp-media{margin-top:36px} /* variante B — split: testo a sinistra, media a destra */ .snp-hero--split .snp-cnt{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center} /* variante C — immagine piena: media di sfondo, testo sopra */ .snp-hero--piena{position:relative; background:var(--ink); color:#fff; overflow:hidden} .snp-hero--piena .snp-media{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; opacity:.42; } .snp-hero--piena .snp-cnt{position:relative} .snp-hero--piena .snp-hero__sub{color:rgba(255,255,255,.88)} .snp-hero--piena .snp-hero__occhiello{color:#fff} @media (max-width:760px){ .snp-hero--split .snp-cnt{grid-template-columns:1fr; gap:28px} .snp-hero--split .snp-media{order:-1} } /* ─── 5 · COMPONENTE: SERVIZI / PROBLEMI ────────────────────────────────── Tre strutture di contenuto diverse sotto lo stesso nome. */ /* variante A — griglia di card · richiede ≥3 voci {titolo, testo} */ .snp-voci{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)} .snp-voci--2{grid-template-columns:repeat(2,1fr)} .snp-voce{ background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .snp-voce__titolo{font-size:17px; color:var(--accent-dark); margin-bottom:7px} .snp-voce__testo{color:var(--mut); font-size:15px} /* variante B — testo lungo + immagine · richiede 1 testo esteso e 1 media */ .snp-testoimg{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center} .snp-testoimg--invertito .snp-media{order:-1} .snp-testoimg__corpo p + p{margin-top:14px} .snp-testoimg__corpo{color:var(--mut); font-size:16.5px} .snp-testoimg__titolo{font-size:clamp(22px,3.4vw,30px); color:var(--ink); margin-bottom:14px} /* variante C — elenco numerato · richiede una sequenza vera */ .snp-passi{display:grid; gap:14px; counter-reset:p} .snp-passo{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); } .snp-passo__n{ width:38px; height:38px; border-radius:999px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--font-heading); font-weight:800; font-size:17px; } .snp-passo__titolo{font-size:17px; margin-bottom:5px} .snp-passo__testo{color:var(--mut); font-size:15px} @media (max-width:820px){ .snp-voci{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .snp-voci,.snp-voci--2{grid-template-columns:1fr} .snp-testoimg{grid-template-columns:1fr; gap:26px} .snp-testoimg--invertito .snp-media{order:0} } /* ─── 6 · COMPONENTE: TESTIMONIANZE ─────────────────────────────────────── Il contenuto NON è generato: arriva dalla libreria recensioni approvate. */ .snp-rec{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)} .snp-rec__card{ background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; } .snp-rec__stelle{color:var(--accent); font-size:15px; letter-spacing:2px} .snp-rec__testo{color:var(--ink); font-size:15px; flex:1} .snp-rec__autore{display:flex; align-items:center; gap:11px; font-size:14px; color:var(--mut)} .snp-rec__foto{width:38px; height:38px; border-radius:999px; object-fit:cover; background:var(--surface-2)} /* variante — citazione singola in evidenza */ .snp-rec--singola{grid-template-columns:1fr; max-width:70ch; margin-inline:auto; text-align:center} .snp-rec--singola .snp-rec__testo{font-size:clamp(19px,3vw,25px); font-family:var(--font-heading); line-height:1.35} .snp-rec--singola .snp-rec__autore{justify-content:center} @media (max-width:820px){ .snp-rec{grid-template-columns:1fr} } /* ─── 7 · COMPONENTE: FAQ ─────────────────────────────────────────────────── */ .snp-faq{max-width:76ch; margin-inline:auto; display:grid; gap:10px} .snp-faq__voce{ background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); } .snp-faq__d{font-family:var(--font-heading); font-weight:800; font-size:16px; margin-bottom:7px} .snp-faq__r{color:var(--mut); font-size:15px} /* ─── 8 · COMPONENTE: CTA ───────────────────────────────────────────────── Struttura deterministica. Destinazione e tracciamento arrivano dal DB e non sono generabili: qui c'è solo la forma. */ /* La fascia usa --cta-bg (non l'accento crudo): il titolo bianco su fondo colorato ha lo stesso problema di contrasto del bottone. */ .snp-cta{background:var(--cta-bg, var(--accent, #2563EB)); color:#fff; padding:var(--sect-pad) 20px; text-align:center} .snp-cta__titolo{font-size:clamp(24px,4vw,36px); margin-bottom:clamp(12px,1.8vw,20px)} /* Centratura con le LONGHAND, non con `margin:0 auto `. Il sottotitolo dell'hero, che usa `margin-inline:auto` in una regola a sé, si centra; questo, che usava la shorthand, restava incollato a sinistra. Le due forme dovrebbero essere equivalenti e nella pratica non lo erano: fra capire perché e scrivere la versione che si vede funzionare, in una regola di impaginazione conviene la seconda. Le longhand sono anche più difficili da azzerare per sbaglio: una shorthand riscritta altrove resetta TUTTI i lati. */ .snp-cta__sub{ color:#fff; opacity:.9; font-size:17px; line-height:1.6; max-width:56ch; margin-inline:auto; margin-bottom:clamp(24px,3.2vw,34px); margin-top:0; } /* Bottone in negativo sulla fascia: sfondo chiaro, testo scuro → sempre leggibile. */ .snp-cta .snp-btn{background:#fff; color:var(--accent-dark)} .snp-cta .snp-btn:hover{background:var(--accent-light); filter:none} /* variante — a riquadro dentro la pagina, non a fascia piena */ .snp-cta--box{ background:transparent; color:var(--ink); padding:0 20px; } .snp-cta--box .snp-cnt{ background:var(--accent-light); border:var(--border-w) solid var(--accent); border-radius:var(--radius-lg); padding:38px 28px; } .snp-cta--box .snp-cta__titolo{color:var(--ink)} .snp-cta--box .snp-cta__sub{color:var(--mut); opacity:1} .snp-cta--box .snp-btn{background:var(--cta-bg, var(--accent, #2563EB)); color:#fff} /* ─── 9 · ACCESSIBILITÀ E PREFERENZE ──────────────────────────────────────── */ .snp :focus-visible{outline:3px solid var(--accent-dark); outline-offset:2px; border-radius:4px} /* ─── 10 · BANNER DEL CONSENSO (CMP) ────────────────────────────────────────── * Le landing v1 hanno il proprio banner cotto nell'HTML generato; le v2 no — e * senza banner `snaplin_consent` non veniva scritto MAI, quindi il gate marketing * restava chiuso per sempre: niente pixel, niente CAPI, nessuna conversione. Non * un errore, un'assenza. * * Struttura in `global.js`, aspetto qui: nessuno dei due sta nel markup della * pagina, quindi cambiare il banner non impone di rigenerare le landing — lo * stesso motivo per cui snaplytics viene caricato da lì. * * I colori arrivano dalla palette (`--accent`, `--cta-bg` stanno su :root), così * il banner non stona con nessuna delle dodici. Rifiutare costa un click come * accettare, con bottoni della stessa misura: è un requisito, non un gusto. */ .snp-cmp{position:fixed; left:0; right:0; bottom:0; z-index:2147483000; padding:12px 16px; background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -8px 30px rgba(0,0,0,.14); color:var(--ink, #16191f); font-size:14px; line-height:1.45} .snp-cmp__box{max-width:1040px; margin:0 auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between} .snp-cmp__testo{margin:0; flex:1 1 300px} .snp-cmp__link{color:var(--accent, #2563EB); text-decoration:underline} .snp-cmp__azioni{display:flex; flex-wrap:wrap; gap:8px} /* 44px: sotto questa misura sul telefono si sbaglia bersaglio. */ .snp-cmp__btn{appearance:none; -webkit-appearance:none; font:inherit; font-weight:600; min-height:44px; padding:10px 18px; border-radius:8px; border:1px solid transparent; cursor:pointer} .snp-cmp__btn--ok{background:var(--cta-bg, var(--accent, #2563EB)); color:var(--on-cta, #fff)} .snp-cmp__btn--no{background:#111827; color:#fff} .snp-cmp__btn--alt{background:transparent; color:var(--ink, #16191f); border-color:#cbd5e1; text-decoration:underline} .snp-cmp__scelte{max-width:1040px; margin:12px auto 0; padding-top:12px; border-top:1px solid #e5e7eb; display:grid; gap:12px} /* `hidden` deve vincere su qualunque display dichiarato. * La regola del browser è `[hidden]{display:none}` e sta nel foglio dell'UA: perde contro * QUALSIASI regola d'autore, quindi il `display:grid` qui sopra la annullava e il pannello * delle preferenze si apriva da solo alla prima visita — con l'attributo `hidden` in * pagina, messo e ignorato. È la stessa forma di difetto dei bottoni landing: la * dichiarazione giusta che perde la cascata, non un valore sbagliato. */ .snp-cmp [hidden], .snp-video [hidden]{display:none !important} .snp-cmp__voce{display:flex; gap:10px; align-items:flex-start} .snp-cmp__voce input{flex:0 0 auto; width:18px; height:18px; margin-top:3px} .snp-cmp__nota{display:block; margin-top:2px; color:var(--mut, #5b6472); font-size:13px} @media (max-width:560px){ .snp-cmp__azioni{width:100%} .snp-cmp__btn{flex:1 1 140px} } /* ─── 11 · VIDEO DI PIATTAFORME ESTERNE ─────────────────────────────────────── * In pagina c'è la miniatura — servita da noi — e un bottone. Il player arriva al * click e solo col consenso: lo monta global.js. Qui c'è solo il vestito, e il * rapporto 16/9 riservato PRIMA che il video esista, così montandolo la pagina * non salta sotto il dito di chi ha appena cliccato. */ .snp-video{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#0b0d12} .snp-video__play{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block} .snp-video__thumb{width:100%; height:100%; object-fit:cover; display:block} /* Il triangolo: disegnato coi bordi, nessuna immagine da caricare per un pulsante. */ .snp-video__icona{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:rgba(0,0,0,.62); box-shadow:0 4px 20px rgba(0,0,0,.35); transition:background .15s ease} .snp-video__icona::after{content:""; position:absolute; top:50%; left:calc(50% + 3px); transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff} .snp-video__play:hover .snp-video__icona{background:rgba(0,0,0,.8)} .snp-video__player{width:100%; height:100%; border:0; display:block} /* Il messaggio che compare cliccando senza consenso. Dice PERCHÉ (arriva da fuori) e * offre la via d'uscita nello stesso punto: mandarlo a cercare le impostazioni * significherebbe perderlo. */ .snp-video__gate{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; background:rgba(11,13,18,.92); color:#fff} .snp-video__gate-testo{margin:0; font-size:14px; line-height:1.5; max-width:34ch} .snp-video__gate-btn{appearance:none; -webkit-appearance:none; font:inherit; font-weight:600; min-height:44px; padding:10px 18px; border:0; border-radius:8px; cursor:pointer; background:var(--cta-bg, var(--accent, #2563EB)); color:var(--on-cta, #fff)} @media (prefers-reduced-motion:reduce){ .snp *,.snp *::before,.snp *::after{animation-duration:.01ms !important; transition-duration:.01ms !important} }