/* ═══════════════════════════════════════════════════════════════════════════
PAI LANDING CSS — Design system Profession.ai, versione STANDALONE
---------------------------------------------------------------------------
Estratto da professionai-website (app/globals.css + pattern reali delle
pagine) e verificato sugli stili computati di https://profession.ai.
I valori sono quelli RESI a schermo con .
Usare SOLO per landing standalone fuori dal repo Next.
Dentro il repo si usano le utility Tailwind → vedi patterns.md.
═══════════════════════════════════════════════════════════════════════════ */
/* ─── Font ────────────────────────────────────────────────────────────────
General Sans self-hosted (titoli). Atkinson Hyperlegible (corpo) va
caricato nell'HTML: nel repo Next arriva da next/font/google, in una
landing standalone dal Google Fonts del template. */
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* ─── Token ───────────────────────────────────────────────────────────────
Valori BRAND-ON. I verdi legacy del :root del sito (#15C988, #3DF0A0)
sono inattivi: non usarli. */
:root {
color-scheme: dark;
/* Fondi e testo neutro */
--ink: #0E110C; /* fondo scuro principale (= background del body) */
--ink-2: #151A12; /* superficie elevata / card su scuro */
--ink-3: #0C1009; /* superficie più profonda (media, preview) */
--paper: #F0F2EB; /* testo su scuro */
--muted: rgba(240, 242, 235, .75); /* testo secondario su scuro */
--line: rgba(240, 242, 235, .14); /* bordi su scuro */
--line-2: rgba(240, 242, 235, .08); /* bordi tenui */
--line-warm: #28301F; /* bordo caldo delle card scure (alternativa a --line) */
/* Brand — verdi */
--verde: #00CCB2; /* Dark Green: AZIONE (bottoni, link, focus, accenti) */
--verde-2: #84FFBE; /* Light Green: SOLO bagliori, gradienti, hover */
--verde-band: #00CCB2; /* fondo fascia teal */
--verde-deep: #06453C; /* teal come TESTO su fondo chiaro (AA) */
--verde-strong: #019683; /* teal come testo su chiaro, variante */
--on-verde: #06150E; /* testo SOPRA il verde (bottoni) */
--on-band: #06170E; /* testo SOPRA la fascia teal/viola */
/* Brand — accenti di ruolo */
--urgency: #F18F01; /* arancio: prezzo, promo, urgenza, scadenze */
--urgency-hover: #FF9E1B;
--urgency-on-dark: #F2B86A; /* arancio come TESTO su scuro (AA) */
--urgency-text: #A86400; /* arancio come TESTO su chiaro (AA) */
--on-urgency: #1F1100; /* testo SOPRA l'arancio */
--gold: #F6C453; /* giallo/oro: badge secondari, welfare */
--ai: #8980F5; /* viola: AI / metodo / ProfAI + fondo fascia viola */
--ai-text: #564BC4; /* viola come TESTO su chiaro (AA) */
--ai-soft: #B5AFFA; /* purple-300: viola come TESTO su SCURO (11.4:1) */
--data-accent: #9FB4FF; /* azzurro: area Data */
/* Fascia chiara (light band) — nel sito sono esadecimali ripetuti, qui tokenizzati */
--light-bg: #F2F0E8; /* fondo fascia chiara */
--light-bg-2: #EDEAE0; /* superficie secondaria su chiaro */
--light-card: #FBFAF5; /* card su chiaro */
--light-title: #14130F; /* titoli su chiaro */
--light-body: #5C594F; /* corpo / muted su chiaro */
--light-line: #DBD8CD; /* bordi su chiaro */
--radius: 8px;
/* Anello di focus. Su scuro #84FFBE rende 15.42:1; sulle fasce colorate rende
1.66:1 (invisibile) → lì si passa a --ring-on-band (9.04:1 su teal,
5.69:1 su viola). Vedi la sezione "Focus". */
--ring: #84FFBE;
--ring-on-band: #06170E;
/* Layout */
--wrap: 1240px;
/* Il gutter rispetta la safe-area (notch, angoli arrotondati, barra iOS).
Richiede viewport-fit=cover nel meta del documento. */
--gutter-base: clamp(20px, 4vw, 52px);
--gutter: max(var(--gutter-base), env(safe-area-inset-left, 0px));
--section-y: clamp(64px, 8vw, 104px);
/* Scala z-index semantica: mai valori arbitrari tipo 999. */
--z-base: 1;
--z-sticky: 50;
--z-drawer-backdrop: 60;
--z-drawer: 70;
--z-toast: 80;
/* Tipografia */
--font-display: 'General Sans', 'Proxima Nova', 'Montserrat', 'Poppins', system-ui, sans-serif;
--font-body: 'Atkinson Hyperlegible', 'Proxima Nova', 'Montserrat', 'Poppins', system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ─── Reset minimo ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { border-color: var(--line); }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--ink);
color: var(--paper);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--verde-2); color: var(--on-verde); }
/* Titoli: General Sans + kerning brand −0.02em.
:where() = specificità 0, così un letter-spacing per-elemento vince sempre. */
:where(h1, h2, h3, h4, .pai-display) {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -.02em;
margin: 0;
/* Righe di lunghezza più uniforme sui titoli: evita l'ultima riga con una
parola sola. Non cambia dimensioni né kerning. */
text-wrap: balance;
}
/* Sui titoli hero balance costa troppo (troppe righe) e non serve: lì le righe
sono spezzate a mano. */
.pai-h1, .pai-cta-title { text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
/* ─── Layout ─────────────────────────────────────────────────────────────── */
.pai-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.pai-section { padding-block: var(--section-y); }
/* overflow-clip, NON overflow-x:hidden: hidden trasforma l'elemento in
scroll-container e crea resistenza al primo scroll. */
.pai-main { overflow: clip; position: relative; }
/* Ancore: senza questo un link a #sezione porta il titolo SOTTO la nav sticky.
88px è il valore usato dal sito (verificato su #storie in produzione). */
:target, .pai-section[id], section[id], [id].pai-anchor { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Hero: padding in vh, cresce col contenuto (il sito non usa min-height). */
.pai-hero { padding-block: clamp(40px, 7vh, 82px) clamp(34px, 5vh, 54px); position: relative; }
/* ══ I TRE HERO DEL SITO ══════════════════════════════════════════════════
Non c'è un solo hero: ce ne sono tre, e si scelgono in base alla pagina.
1. `.pai-hero` HOME. Fondo piatto, nessun bagliore, titolo
enorme (9vw) su 4 righe, paragrafo + CTA in
fondo. Serve a fare una dichiarazione.
2. `.pai-hero--split` PAGINA MASTER / PRODOTTO. min-height 84vh,
centrato, glow field a 3 gradienti, 2 colonne
con la foto del coach mascherata a destra,
badge, riga di riprova sociale. Serve a vendere.
3. `.pai-hero--stats` LANDING MASTERCLASS / EVENTO. Fondo piatto, pill
di stato con puntino luminoso, titolo su 4 righe
con stagger RAPIDO (.06s), striscia di 3 numeri
sotto. Serve a dare i fatti in fretta.
Errore da non fare: usare l'hero della home per una pagina prodotto. È il
motivo per cui una landing sembra "il template" e non il sito. */
/* ── Hero 2: split con foto, alto, centrato ──────────────────────────────── */
/* ⚠️ `min-height: 84vh` + centraggio verticale valgono SOLO da 1101px, dove la
colonna della foto esiste e riempie l'altezza. Sotto quella soglia la foto
scompare, il contenuto resta alto ~430px e il centraggio lascia 160px di
vuoto sopra E sotto: l'hero sembra sfondato e la sezione seguente appiccicata.
Sotto 1101px quindi l'hero si comporta come quello della home: cresce col
contenuto, con il padding verticale standard. */
.pai-hero--split {
position: relative; isolation: isolate;
display: flex; align-items: center;
/* 84vh a OGNI larghezza, come il sito (`min-h-[84vh]`, senza media query).
Tenuto solo sul desktop, su tablet l'hero collassava all'altezza del
contenuto (~484px su 1024) e sembrava un'intestazione schiacciata invece
di un hero. */
min-height: 84vh;
padding-block: clamp(40px, 7vh, 82px) clamp(34px, 5vh, 54px);
overflow: hidden;
}
@media (min-width: 1101px) {
/* 84vh e non 100vh: l'hero deve stare tutto in un portatile 13" (1280×720)
lasciando intravedere la sezione dopo. Il padding è tarato su quel caso: a
52px l'hero arrivava a 722px e sforava di due pixel. */
.pai-hero--split { padding-block: clamp(30px, 3.4vw, 44px); }
}
.pai-hero-split-grid {
position: relative; z-index: 2; width: 100%;
display: grid; grid-template-columns: 1.05fr .9fr;
align-items: center; gap: clamp(24px, 4vw, 56px);
}
/* Ritmo interno dell'hero split, cablato qui invece di lasciarlo al markup:
sono i valori del sito (lead 28px, riprova 30px, CTA 34px) e sbagliarli è
l'errore che fa sembrare l'hero "compresso". */
.pai-hero--split .pai-lead { margin-top: 28px; max-width: 52ch; }
.pai-hero--split .pai-trust { margin-top: 30px; }
.pai-hero--split .pai-trust + .pai-btn-row { margin-top: 34px; }
.pai-hero--split .pai-lead + .pai-btn-row { margin-top: 34px; }
@media (max-width: 1100px) { .pai-hero-split-grid { grid-template-columns: 1fr; } }
/* Colonna foto: sotto 1100px scompare, non si rimpicciolisce. */
.pai-hero-figure { position: relative; align-self: end; height: clamp(440px, 52vw, 620px); display: none; }
@media (min-width: 1101px) { .pai-hero-figure { display: block; } }
/* La maschera fa "fondere" il ritaglio nel fondo invece di farlo sembrare un
PNG appiccicato.
⚠️ Il sito sfuma il 16%, ma lo abbina a uno `scale` diverso per ogni foto.
Applicata al 16% su un ritaglio con un braccio teso verso sinistra, la
sfumatura si mangia la mano e sembra un difetto di sfocatura. Qui si sfuma il
7%: basta a staccare il bordo, non tocca il soggetto.
REGOLA: usare un ritaglio che indica VERSO il testo (a sinistra); uno che
indica fuori dalla pagina manda lo sguardo dalla parte sbagliata. */
.pai-hero-figure img {
width: 100%; height: 100%; object-fit: contain; object-position: bottom;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%);
mask-image: linear-gradient(90deg, transparent, #000 7%);
}
/* ── HeroSpot: bagliore che segue il cursore ─────────────────────────────
Va dentro un hero `position: relative`. Lo muove pai-landing.js.
`mix-blend-mode: screen` è ciò che lo fa sembrare luce e non un cerchio
verde: senza, è una macchia. Disattivato con prefers-reduced-motion. */
.pai-herospot {
position: absolute; left: 0; top: 0; z-index: -1;
width: 520px; height: 520px; border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0; transition: opacity .5s;
pointer-events: none;
mix-blend-mode: screen;
background: radial-gradient(circle,
color-mix(in srgb, var(--verde-2) 28%, transparent),
color-mix(in srgb, var(--verde) 10%, transparent) 40%,
transparent 70%);
}
/* ── Link "torna a" sopra il titolo ─────────────────────────────────────── */
.pai-back {
display: block; width: fit-content; margin-bottom: 28px;
font-family: var(--font-mono); font-size: 14px; color: var(--muted);
transition: color .2s;
}
.pai-back:hover { color: var(--verde); }
/* ── Badge con bagliore (pre-vendita, lancio) ───────────────────────────── */
.pai-badge-glow {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 24px; border-radius: 9999px;
border: 1px solid color-mix(in srgb, var(--verde-2) 45%, transparent);
background: color-mix(in srgb, var(--verde) 14%, transparent);
padding: 10px 18px;
font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; color: var(--verde);
box-shadow: 0 0 36px -12px var(--verde);
}
.pai-badge-glow svg { width: 19px; height: 19px; flex: none; }
.pai-badge-glow b, .pai-badge-glow strong { color: var(--paper); font-weight: 600; }
/* ── Pill di stato con puntino luminoso (hero evento/masterclass) ───────── */
.pai-status {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 26px; border-radius: 9999px;
border: 1px solid var(--line); padding: 8px 15px;
font-family: var(--font-mono); font-size: 14px; color: var(--verde);
white-space: nowrap;
}
.pai-status::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
background: var(--verde); box-shadow: 0 0 9px var(--verde);
}
/* Variante urgenza: il sito la usa quando la data è vicina. */
.pai-status--urgency { color: var(--urgency-on-dark); }
.pai-status--urgency::before { background: var(--urgency); box-shadow: 0 0 9px var(--urgency); }
/* ── Nastro diagonale d'angolo ──────────────────────────────────────────── */
.pai-ribbon {
position: absolute; right: -70px; top: 52px; z-index: 6;
width: 300px; transform: rotate(45deg);
background: var(--urgency); padding-block: 10px;
text-align: center; font-family: var(--font-mono); font-size: 15px;
font-weight: 700; text-transform: uppercase; letter-spacing: .24em;
color: var(--on-urgency);
box-shadow: 0 14px 38px -8px rgba(0,0,0,.6);
pointer-events: none;
}
/* ── Riga di riprova sociale sotto il lead ──────────────────────────────── */
.pai-trust {
display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
margin-top: 30px; font-size: 1.05rem; color: var(--muted);
}
.pai-trust b { font-weight: 600; color: var(--paper); }
.pai-trust-sep { width: 1px; height: 18px; background: var(--line); flex: none; }
/* Sotto i 560 la riga va a capo e il separatore resterebbe appeso in fondo alla
prima riga. Il sito ha lo stesso difetto, qui lo togliamo. */
@media (max-width: 560px) { .pai-trust-sep { display: none; } }
.pai-trust svg { width: 16px; height: 16px; fill: var(--verde); color: var(--verde); }
/* ── Striscia di numeri sotto l'hero (masterclass) ──────────────────────── */
.pai-statstrip {
display: flex; flex-wrap: wrap;
margin-top: 52px; border-top: 1px solid var(--line);
}
.pai-statstrip > * {
flex: 1 1 150px; min-width: 150px;
padding: 20px 24px 20px 0; border-right: 1px solid var(--line);
}
.pai-statstrip > *:last-child { border-right: 0; }
@media (max-width: 980px) { .pai-statstrip > * { min-width: 50%; } }
.pai-statstrip .pai-stat-v { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.pai-statstrip .pai-stat-k { margin-top: 3px; }
/* ── Spec strip: pannello a 4 celle con bordi interni ───────────────────── */
.pai-specstrip {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden; border-radius: 16px;
border: 1px solid var(--line); background: var(--ink-2);
}
/* Quattro colonne solo sopra i 1100, lo stesso punto in cui l'hero si sdoppia:
sotto, la cella scende oltre i ~230px che servono al valore piu' lungo e il
testo va a capo in modo diverso in ogni cella. */
@media (max-width: 1100px) { .pai-specstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pai-specstrip > * { padding: clamp(20px, 2.4vw, 28px); border-right: 1px solid var(--line); }
.pai-specstrip > *:last-child { border-right: 0; }
@media (max-width: 1100px) {
.pai-specstrip > * { border-bottom: 1px solid var(--line); }
.pai-specstrip > *:nth-child(2n) { border-right: 0; }
.pai-specstrip > *:nth-last-child(-n+2) { border-bottom: 0; }
}
/* Etichetta di cella: mono 13px teal con icona. */
.pai-spec-k {
display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--verde);
}
.pai-spec-k svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Il corpo scala con la larghezza: a 1.5rem fisso il valore piu' lungo
("Riconosciuta in UE") chiede 259px di cella e a 4 colonne va a capo sotto i
1140px. Con il clamp la cella necessaria scende a ~230px e le 4 colonne
reggono fino al breakpoint. */
.pai-spec-v { font-family: var(--font-display); font-size: clamp(1.28rem, 1.15vw + .55rem, 1.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.pai-spec-sub { margin-top: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
/* Misuratore a 3 segmenti (livello del percorso). */
.pai-meter { display: flex; gap: 6px; margin-bottom: 12px; }
.pai-meter > * { height: 7px; flex: 1; border-radius: 3px; background: var(--line); }
.pai-meter > .on { background: var(--verde); box-shadow: 0 0 10px color-mix(in srgb, var(--verde) 50%, transparent); }
/* Riga sotto il titolo: paragrafo a sinistra, CTA a destra, allineati in basso.
Va a capo da sola quando lo spazio non basta, senza breakpoint. */
.pai-hero-foot {
margin-top: 44px; display: flex; flex-wrap: wrap;
align-items: flex-end; justify-content: space-between; gap: 26px;
}
/* Numero/lettera in cima alla card (01, 02, a, b…). */
.pai-num { font-family: var(--font-mono); font-size: 14px; letter-spacing: .05em; color: var(--verde); }
.pai-band-light .pai-num { color: var(--verde-deep); }
.pai-band-teal .pai-num, .pai-band-ai .pai-num { color: var(--on-band); }
/* ── Ritmo verticale ──────────────────────────────────────────────────────
Valori MISURATI sul sito in produzione, non scelti a occhio. Il ritmo di una
sezione è sempre questo, in quest'ordine:
occhiello
↓ 22px (il sito usa mb-[22px] 30× e mb-6=24px 32×: 22 è la media)
H2
↓ 16px titolo → testo che lo spiega
paragrafo lead (max 52ch)
↓ 32px testo → riga di CTA
bottoni
↓ 40→62px blocco introduttivo → griglia di contenuto
Usa queste classi, non margini arbitrari: sono i quattro salti che servono.
Se ti serve un quinto, probabilmente la sezione sta facendo due cose. */
.pai-mt-sm { margin-top: 16px; } /* titolo → testo */
.pai-mt { margin-top: 20px; } /* fra elementi affini */
.pai-mt-lg { margin-top: 32px; } /* testo → CTA */
.pai-mt-xl { margin-top: clamp(40px, 5vw, 62px); } /* intro → griglia */
/* ─── Fasce di sezione: la sequenza dei colori ────────────────────────────
Questa è la sequenza REALE della home, letta in produzione dall'alto in basso:
scuro(hero) → CHIARO → scuro → CHIARO → scuro → scuro → CHIARO → scuro
→ TEAL → CHIARO → VIOLA(chiusura)
Da cui quattro regole, in ordine di importanza:
1. Si ALTERNA scuro/chiaro. Due chiare di fila mai: la pagina perde il
pavimento e sembra un altro sito. Due scure di fila sì, succede quando due
sezioni sono la stessa idea in due tempi.
2. Il TEAL compare UNA VOLTA, verso la fine, sul momento di riprova sociale
(la community, i numeri, le storie). Usarlo due volte lo svaluta.
3. Il VIOLA CHIUDE la pagina, sull'ultima CTA. Non si usa a metà.
4. Si parte scuro e si chiude colorato. L'hero è sempre scuro e piatto.
Il padding verticale invece è COSTANTE su tutte le fasce
(clamp 64→104px): il ritmo lo dà il colore, non lo spazio. */
.pai-band-dark { background: var(--ink); color: var(--paper); }
.pai-band-light { background: var(--light-bg); color: var(--light-title); }
.pai-band-teal { background: var(--verde-band); color: var(--on-band); }
.pai-band-ai { background: var(--ai); color: var(--on-band); }
.pai-band-light .pai-body, .pai-band-light .pai-lead { color: var(--light-body); }
.pai-divider-top { border-top: 1px solid var(--line); }
.pai-band-light.pai-divider-top,
.pai-band-light + .pai-band-light { border-top-color: var(--light-line); }
/* ─── Tipografia (scala reale, sempre in clamp) ───────────────────────────── */
/* H1 hero: 9vw fino a 7.25rem, leading .9, kerning −.02em.
Valori identici a quelli resi dalla home (misurati: 115.2px / 103.68px / −2.304px).
Il leading .9 è più basso del font: i descender (g, p, q) sfondano il line-box e
con l'overflow:hidden del reveal verrebbero tagliati. Lo spazio glielo ridà
.pai-rise-line con padding+margine negativo, quindi qui il leading resta stretto
come nel sito SENZA il taglio. */
.pai-h1 {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(2.4rem, 9vw, 7.25rem);
line-height: .9; letter-spacing: -.02em;
}
/* Per headline lunghe multi-riga senza animazione a righe: leading più sicuro. */
.pai-h1--safe { line-height: 1.02; }
.pai-h1--sm { font-size: clamp(2.2rem, 6.4vw, 5.6rem); line-height: 1.06; }
/* Hero di rinnovo: due righe, e l'insieme deve stare in un viewport da 720px
di altezza (portatile 13").
⚠️ Il tetto è basso di proposito. Nell'hero a due colonne il testo sta in
~585px, non nella larghezza del viewport: con la scala di --sm le due righe
andavano a capo diventandone quattro e l'hero arrivava a 821px. La misura
che conta è "Continua il viaggio" (19 caratteri) dentro 585px. */
.pai-h1--rinnovo { font-size: clamp(1.9rem, 4.2vw, 3.35rem); line-height: 1.1; }
/* H1 dell'hero SPLIT (pagina master): più piccolo perché divide lo spazio con
la foto, su 2 righe, con `max-width` in ch per forzare l'andata a capo.
`padding-bottom: .08em` è il rimedio del sito ai descender (g/p/q) tagliati
dall'overflow-hidden delle righe animate: con leading 1.14 serve ancora. */
.pai-h1--split {
font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.14;
max-width: 14ch; padding-bottom: .08em;
}
/* ⚠️ `max-width: 14ch` funziona con i titoli del sito, che sono corti
("Diventa Data Scientist"). Con una competenza lunga ("AI Automation
Specialist") 14ch la spezza su 4 righe e l'hero non ci sta in 84vh.
Regola: se il titolo supera ~22 caratteri, usa anche .pai-h1--split-wide. */
.pai-h1--split-wide { max-width: 20ch; font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
/* H1 dell'hero STATS (masterclass/evento): il più grande di tutti, leading 1.2
perché sta su 4 righe e deve restare leggibile. */
.pai-h1--stats { font-size: clamp(2.6rem, 8.6vw, 7.6rem); line-height: 1.2; }
/* Le righe dell'hero costruiscono enfasi crescente: grigia (setup) → attenuata
(.pai-out) → bianca piena → colorata (la promessa). L'ordine non si cambia. */
.pai-h1-setup { color: var(--muted); font-weight: 500; }
.pai-h1-promise { color: var(--verde); }
.pai-h2 {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.9rem, 4vw, 3.1rem);
line-height: 1; letter-spacing: -.02em;
max-width: 20ch;
}
.pai-h2--wide { max-width: 24ch; }
.pai-h2--full { max-width: none; }
.pai-h3 {
font-family: var(--font-display); font-weight: 600;
font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em;
}
/* Corpo. Il sito alza la scala di +2px: sm=16, base=18. */
.pai-lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--muted); max-width: 54ch; }
.pai-lead--lg { font-size: clamp(1.12rem, 1.5vw, 1.3rem); }
/* Misura di riga limitata a ~68ch: oltre le 75ch l'occhio perde il rigo. */
.pai-body { font-size: 1.05rem; line-height: 1.6; color: var(--muted); max-width: 68ch; }
.pai-body--full { max-width: none; }
.pai-small { font-size: 16px; line-height: 1.5; color: var(--muted); }
/* Testo bianco attenuato: un gradino sotto il bianco pieno. */
.pai-out { color: color-mix(in srgb, var(--paper) 80%, transparent); }
/* Keyword del titolo: gradiente verde su testo (hero). */
.pai-kw {
color: var(--verde);
background: linear-gradient(100deg, var(--verde) 0%, var(--verde) 38%, #CFFFE9 50%, var(--verde) 62%, var(--verde) 100%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Keyword con bagliore (variante più usata nelle sezioni SCURE). */
.pai-kw-glow { color: var(--verde); text-shadow: 0 0 22px color-mix(in srgb, var(--verde-2) 30%, transparent); }
/* Keyword SOPRA una fascia colorata (teal/viola): bianco con ombra, NON verde —
su fondo teal o viola il bagliore verde non si legge.
⚠️ CONTRASTO: è il pattern del sito (components/cta-section.tsx) ed è
volutamente lasciato identico, ma va usato sapendo che misura **2.88:1 su
viola** e **1.81:1 su teal**, sotto la soglia 3:1 anche per il testo grande.
L'ombra aiuta l'occhio ma non conta per WCAG.
→ Su TEAL non usarlo (1.81:1 è troppo basso): usa .pai-kw-band--aa.
→ Su VIOLA passa solo come evidenziazione decorativa di una parola dentro una
frase già leggibile in #06170E; se la parola porta informazione, --aa. */
.pai-kw-band { color: var(--paper); text-shadow: 0 1px 3px rgba(6, 23, 14, .5); }
/* Alternativa conforme: enfasi con sottolineatura e peso invece che con un
colore più chiaro, quindi senza perdere contrasto (5.69:1 su viola,
9.04:1 su teal). */
.pai-kw-band--aa {
color: var(--on-band); text-shadow: none;
text-decoration: underline; text-decoration-thickness: .07em;
text-underline-offset: .12em; text-decoration-color: color-mix(in srgb, var(--on-band) 45%, transparent);
}
/* ─── CTA di chiusura ────────────────────────────────────────────────────
Titolo molto più grande dell'H2 di sezione: è l'ultima cosa che si legge.
Allineata a SINISTRA (non centrata), su fascia viola nel sito reale. */
.pai-cta-title {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(2.4rem, 7vw, 5.4rem);
line-height: 1; letter-spacing: -.02em;
max-width: 15ch;
}
/* Il sito usa .74 di opacità: su teal rende 5.29:1 ✓ ma su viola solo 3.92:1,
sotto la soglia per il testo sotto i 18px. .85 rende 4.71:1 su viola e resta
visivamente identico. */
.pai-cta-lead { margin-top: 22px; max-width: 50ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(6, 23, 14, .85); }
/* Chip di urgenza in cima alla CTA (solo se c'è una scadenza vera). */
.pai-chip-urgency {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
border-radius: 9999px; background: var(--urgency); padding: 6px 14px;
font-family: var(--font-mono); font-size: 14px; font-weight: 600;
letter-spacing: .02em; color: var(--on-urgency);
}
/* Foto ritagliata che sbuca dal basso della fascia. Solo da 1080px in su:
sotto coprirebbe il testo. Il contenuto va allineato dal lato OPPOSTO. */
.pai-cta-person {
position: absolute; bottom: 0; z-index: 1; display: none;
height: 98%; width: auto; object-fit: contain; object-position: bottom;
pointer-events: none;
}
.pai-cta-person--right { right: clamp(0px, 4vw, 72px); }
.pai-cta-person--left { left: clamp(0px, 4vw, 72px); }
@media (min-width: 1080px) { .pai-cta-person { display: block; } }
/* Il contenuto della CTA deve stare sopra la foto. */
.pai-cta-body { position: relative; z-index: 2; }
/* ─── Eyebrow / occhiello ─────────────────────────────────────────────────
mono 14px, tracking .05em, quadratino 8px con raggio 1px. Una per sezione. */
.pai-label {
display: flex; align-items: center; gap: 10px;
margin-bottom: 22px;
font-family: var(--font-mono); font-size: 14px; letter-spacing: .05em;
color: var(--verde);
}
.pai-label::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--verde); flex: none; }
.pai-band-light .pai-label { color: var(--verde-deep); }
.pai-band-light .pai-label::before { background: var(--verde-band); }
.pai-band-teal .pai-label, .pai-band-ai .pai-label { color: var(--on-band); }
.pai-band-teal .pai-label::before, .pai-band-ai .pai-label::before { background: var(--on-band); }
/* Occhiello di urgenza (promo/prezzo) su scuro: arancio leggibile. */
.pai-label--urgency { color: var(--urgency-on-dark); }
.pai-label--urgency::before { background: var(--urgency); }
/* Occhiello VIOLA: sul sito le sezioni "metodo / AI / ProfAI" hanno l'occhiello
viola, non teal (misurato: #564BC4 su chiaro, #B5AFFA su viola). Il colore
dell'occhiello segue il RUOLO della sezione, non è sempre verde. */
.pai-label--ai { color: var(--ai-soft); }
.pai-label--ai::before { background: var(--ai); }
.pai-band-light .pai-label--ai { color: var(--ai-text); }
.pai-band-light .pai-label--ai::before { background: var(--ai); }
/* Sulla fascia viola NON si usa il viola chiaro: su #8980F5 non si legge.
Vale la regola base (inchiostro scuro), quindi qui non c'è override. */
/* ─── Bottoni ─────────────────────────────────────────────────────────────
Pill, peso 600, font del CORPO (non display), freccia → in mono, gap 10px.
Sul sito esistono DUE misure, entrambe misurate in produzione:
· hero / CTA finale padding 15/28 → altezza 56px (.pai-btn, default)
· dentro una sezione padding 14/26 → altezza 52px (.pai-btn--md)
· nella nav padding 10/14 → altezza ~36px (.pai-btn--sm)
Il bordo è SEMPRE dichiarato (1.5px, trasparente sui pieni): così un bottone
pieno e uno outline affiancati hanno la stessa altezza al pixel. Togliere il
bordo dai pieni li fa sembrare 3px più bassi. */
.pai-btn {
display: inline-flex; align-items: center; gap: 10px;
border-radius: 9999px;
padding: 15px 28px;
font-weight: 600; font-size: 16px;
/* NON mettere line-height: 1. Il sito lascia il line-height del corpo: con 1
il bottone viene alto 48px invece di 56px, cioè 8px più basso su OGNI CTA
della pagina. 1.45 riproduce l'altezza reale (15+23+15+3 = 56px). */
line-height: 1.45;
border: 1.5px solid transparent;
transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.pai-btn--md { padding: 14px 26px; }
.pai-btn .pai-arrow { font-family: var(--font-mono); }
/* Il micro-sollevamento vale solo dove c'è un vero hover: su touch l'hover
"resta appiccicato" dopo il tap. */
@media (hover: hover) and (pointer: fine) {
.pai-btn:hover { transform: translateY(-2px); }
}
/* Su touch il bersaglio minimo è 44×44 (WCAG 2.5.5). */
@media (pointer: coarse) {
.pai-btn { min-height: 48px; }
.pai-btn--sm { min-height: 44px; padding: 11px 16px; }
.pai-nav-links a, .pai-footer-list a, .pai-logo { min-height: 44px; display: inline-flex; align-items: center; }
/* I link legali sono inline dentro una riga di testo: allargarli in altezza
spezzerebbe la riga, quindi si allarga l'area con il padding. */
.pai-footer-bottom a { padding-block: 10px; }
}
/* Feedback al tap, dove l'hover non esiste. */
.pai-btn:active { transform: translateY(0) scale(.985); }
/* 1. Azione primaria su scuro */
.pai-btn--verde { background: var(--verde); color: var(--on-verde); }
.pai-btn--verde:hover { background: var(--verde-2); }
/* 2. Secondaria su scuro (outline) */
.pai-btn--ghost { border-color: rgba(240,242,235,.34); color: var(--paper); }
.pai-btn--ghost:hover { background: var(--paper); color: var(--ink); }
/* 3. Promo / urgenza — solo prezzo, scadenze, offerte */
.pai-btn--promo { background: var(--urgency); color: var(--on-urgency); }
.pai-btn--promo:hover { background: var(--urgency-hover); }
/* 4. Su fascia teal/viola: pieno scuro */
.pai-btn--on-band { background: var(--on-band); color: var(--verde); }
.pai-btn--on-band:hover { color: var(--verde-2); }
/* 5. Su fascia teal/viola: outline */
.pai-btn--on-band-ghost { border-color: var(--on-band); color: var(--on-band); }
.pai-btn--on-band-ghost:hover { background: var(--on-band); color: var(--verde); }
/* 6. Su fascia chiara: pieno scuro */
.pai-btn--on-light { background: var(--light-title); color: var(--paper); }
.pai-btn--on-light:hover { background: #000; }
.pai-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* ─── Navbar / footer ────────────────────────────────────────────────────
Nav: sticky, fondo semitrasparente + blur, bordo sotto.
ATTENZIONE: backdrop-filter crea un containing block per i position:fixed
figli → un drawer a tutto schermo va messo FUORI dalla nav. */
.pai-nav {
position: sticky; top: 0; z-index: var(--z-sticky);
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--ink) 82%, transparent);
backdrop-filter: blur(12px);
}
.pai-nav-inner {
max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.pai-nav-links { display: flex; align-items: center; gap: 26px; font-size: 16px; }
.pai-nav-links a { color: var(--paper); transition: color .2s; }
.pai-nav-links a:hover { color: var(--verde); }
/* CTA compatte della nav: più piccole di quelle di sezione. */
.pai-btn--sm { padding: 10px 14px; font-size: 16px; }
.pai-logo { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.pai-logo span { color: var(--verde); }
/* ── Menu mobile ──────────────────────────────────────────────────────────
Sotto 900px i link inline non ci stanno. NON si nascondono e basta: la
navigazione resta raggiungibile da un drawer a tutto schermo.
⚠️ Il drawer è un SIBLING della nav, non un figlio: `backdrop-filter` sulla
nav crea un containing block e un `position: fixed` interno verrebbe
ancorato lì invece che al viewport. È il gotcha documentato nel sito. */
.pai-nav-toggle {
display: none;
align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 9999px;
border: 1.5px solid rgba(240, 242, 235, .34); color: var(--paper);
}
.pai-nav-toggle:hover { background: var(--paper); color: var(--ink); }
.pai-nav-toggle svg { width: 20px; height: 20px; }
.pai-drawer {
position: fixed; inset: 0; z-index: var(--z-drawer);
display: flex; flex-direction: column; gap: 6px;
padding: calc(env(safe-area-inset-top, 0px) + 24px) var(--gutter)
calc(env(safe-area-inset-bottom, 0px) + 24px);
background: var(--ink);
overflow-y: auto; overscroll-behavior: contain;
/* Chiuso: fuori dal flusso E fuori dal tab order (visibility, non solo opacity). */
visibility: hidden; opacity: 0; transform: translateY(-8px);
transition: opacity .28s cubic-bezier(.16, 1, .3, 1),
transform .28s cubic-bezier(.16, 1, .3, 1),
visibility .28s;
}
[data-mobile-menu="open"] .pai-drawer { visibility: visible; opacity: 1; transform: none; }
/* Blocca lo scroll del documento col drawer aperto. */
[data-mobile-menu="open"] { overflow: hidden; }
/* Convenzione del sito: col menu aperto si nasconde la chrome flottante. */
[data-mobile-menu="open"] [data-floating-chrome] { display: none; }
.pai-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
/* :not(.pai-btn) è obbligatorio: senza, questa regola trasforma anche la CTA del
drawer in un link di menu (padding 4px, bordo sotto, 1.5rem display). */
.pai-drawer a:not(.pai-btn) {
display: flex; align-items: center; min-height: 52px;
padding: 4px 0; border-bottom: 1px solid var(--line);
font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
letter-spacing: -.02em; color: var(--paper);
}
.pai-drawer a:not(.pai-btn):hover,
.pai-drawer a:not(.pai-btn):focus-visible { color: var(--verde); }
.pai-drawer .pai-btn-row { margin-top: 26px; }
.pai-drawer .pai-btn { flex: 1 1 auto; justify-content: center; }
/* La barra della nav non va MAI a capo: se lo spazio manca si toglie un
elemento, non si aggiunge una riga. */
.pai-nav-inner .pai-btn-row { flex-wrap: nowrap; }
.pai-nav-inner .pai-btn--sm { white-space: nowrap; }
@media (max-width: 900px) {
.pai-nav-links { display: none; }
.pai-nav-toggle { display: inline-flex; }
/* La secondaria ("Campus") vive nel drawer. */
.pai-nav-inner .pai-btn--ghost { display: none; }
}
/* Sotto 640px anche la CTA principale esce dalla barra: logo + CTA + toggle
non stanno in 390px e la nav andrebbe a due righe. Resta logo + hamburger,
e la CTA è il primo elemento che si trova aprendo il menu. */
@media (max-width: 640px) {
.pai-nav-inner .pai-btn--verde { display: none; }
}
@media (min-width: 901px) {
.pai-drawer { display: none; }
}
.pai-footer {
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--ink-2) 50%, transparent);
padding-block: clamp(48px, 6vw, 72px);
}
.pai-footer-cols { display: grid; gap: 42px; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 860px) { .pai-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pai-footer-cols { grid-template-columns: 1fr; } }
/* Intestazioni di colonna del footer. ATTENZIONE: non seguono la convenzione
degli occhielli in pagina. Sul sito:
· occhiello in pagina → minuscolo, `// così`, text-transform: none, ls .05em
· intestazione footer → sorgente capitalizzato ("Offerta Formativa"),
reso in MAIUSCOLO via text-transform, ls .04em
Il testo nel markup va scritto capitalizzato, non in minuscolo: se qualcuno
togliesse il text-transform deve restare leggibile. */
.pai-footer h4 {
font-family: var(--font-mono); font-size: 14px; font-weight: 400;
text-transform: uppercase; letter-spacing: .04em;
color: var(--verde); margin: 0 0 14px;
}
.pai-footer a { color: var(--muted); font-size: 16px; transition: color .2s; }
.pai-footer a:hover { color: var(--paper); }
.pai-footer-list { display: flex; flex-direction: column; gap: 10px; }
.pai-footer-bottom {
max-width: var(--wrap); margin: 32px auto 0; padding: 24px var(--gutter) 0;
border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
font-size: 16px; color: var(--muted);
}
/* ─── Card ───────────────────────────────────────────────────────────────
REGOLA DEL RAGGIO. Sul sito il padding scala col raggio, sempre di 6px:
r18 → p24 · r20 → p26 · r24 → p28. Non è un vezzo: se il padding è più
piccolo del raggio, l'angolo arrotondato "mangia" il contenuto e il testo
sembra spinto verso l'angolo. Se cambi il raggio, cambia il padding. */
.pai-card {
border-radius: 18px;
border: 1px solid var(--line);
background: var(--ink-2);
padding: 24px;
transition: border-color .2s, transform .2s, background-color .2s;
}
/* Card più grandi: per contenuti densi o sezioni a 1-2 colonne. */
.pai-card--lg { border-radius: 20px; padding: 26px; }
.pai-card--xl { border-radius: 24px; padding: 28px; }
/* Su schermi larghi le card grandi possono respirare di più. */
@media (min-width: 1100px) {
.pai-card--lg { padding: clamp(26px, 2.4vw, 32px); }
.pai-card--xl { padding: clamp(28px, 3vw, 38px); }
}
@media (hover: hover) and (pointer: fine) {
.pai-card:hover { border-color: var(--verde); transform: translateY(-4px); }
.pai-card--flat:hover { transform: none; }
}
.pai-card--deep { background: var(--ink-3); border-color: var(--line-warm); }
.pai-band-light .pai-card { background: var(--light-card); border-color: var(--light-line); color: var(--light-title); }
.pai-band-teal .pai-card, .pai-band-ai .pai-card {
background: rgba(6,23,14,.05); border-color: rgba(6,23,14,.18); color: var(--on-band);
}
/* ══ CARD A COLORE DI RUOLO ═══════════════════════════════════════════════
⚠️ Le card del sito NON sono tutte grigie. La formula, ricorrente in tutto il
codice, è sempre la stessa:
bordo = color-mix( 26–45%, transparent)
fondo = all'8–16% di opacità
accento = la variante del ruolo leggibile su scuro
Il colore però segue il RUOLO, non il gusto: teal = azione e metodo,
viola = AI/ProfAI, arancio = prezzo e urgenza, oro = riconoscimenti,
azzurro = area Data. Una griglia dove ogni card ha un colore diverso "per
vivacità" è sbagliata quanto una dove sono tutte grigie: il colore deve dire
qualcosa. Regola pratica: se le card di una griglia rappresentano cose dello
stesso tipo, restano neutre; se rappresentano ruoli diversi, prendono il loro. */
.pai-card--verde {
border-color: color-mix(in srgb, var(--verde-2) 32%, transparent);
background: color-mix(in srgb, var(--verde) 8%, transparent);
}
.pai-card--verde .pai-num { color: var(--verde-2); }
.pai-card--ai {
border-color: color-mix(in srgb, var(--ai) 34%, transparent);
background: color-mix(in srgb, var(--ai) 10%, transparent);
}
.pai-card--ai .pai-num { color: var(--ai-soft); }
.pai-card--gold {
border-color: rgba(246,196,83,.42);
background: rgba(246,196,83,.10);
}
.pai-card--gold .pai-num { color: var(--gold); }
.pai-card--data {
border-color: color-mix(in srgb, var(--data-accent) 34%, transparent);
background: color-mix(in srgb, var(--data-accent) 8%, transparent);
}
.pai-card--data .pai-num { color: var(--data-accent); }
/* Card promo: accento arancio. È l'unica col gradiente, perché il prezzo è
l'elemento che deve staccare di più. */
.pai-card--promo {
border-color: color-mix(in srgb, var(--urgency) 55%, transparent);
background: linear-gradient(150deg, rgba(241,143,1,.16), rgba(241,143,1,.04));
}
.pai-card--promo .pai-num { color: var(--urgency-on-dark); }
/* Hover: ogni variante vira al pieno del proprio ruolo, non al teal. */
@media (hover: hover) and (pointer: fine) {
.pai-card--verde:hover { border-color: var(--verde); }
.pai-card--ai:hover { border-color: var(--ai); }
.pai-card--gold:hover { border-color: var(--gold); }
.pai-card--data:hover { border-color: var(--data-accent); }
}
@media (hover: hover) and (pointer: fine) {
.pai-band-light .pai-card:hover { border-color: var(--verde-deep); }
.pai-card--promo:hover { border-color: var(--urgency); }
}
/* Griglie. Le classi --2/--3/--4 fissano il numero di colonne; il `min()` col
100% su --2 e --4 evita l'overflow quando il viewport è più stretto del
minimo della colonna (il caso 320px).
Il gap NON è uniforme: sul sito cresce quando le colonne sono meno e più
larghe (2 col → 28px, 3 col → 20px, griglie dense → 12px). Colonne larghe
con gap stretto sembrano incollate. */
.pai-grid { display: grid; gap: 20px; }
.pai-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 28px; }
/* Come i piani: 3 → 1, mai il passaggio intermedio a 2 che lascia orfana la
terza card. Il sito fa lo stesso a max-[880px]:grid-cols-1. */
.pai-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 880px) { .pai-grid--3 { grid-template-columns: 1fr; } }
.pai-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 20px; }
/* Griglia densa: pill, loghi, tag. */
.pai-grid--dense { gap: 12px; }
/* Cap: senza questo, su schermi molto larghi --3 diventerebbe a 4 colonne. */
@media (min-width: 1100px) {
.pai-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pai-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pai-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ══ ALTERNATIVE ALLE CARD ════════════════════════════════════════════════
Il sito NON mette tutto in card. Per i contenuti in sequenza usa liste con
bordi orizzontali, che sono più editoriali e reggono testi lunghi. Se hai 3
paragrafi da 40 parole, questa è la forma giusta, non tre card affiancate. */
/* ── Righe numerate (sezione "il problema") ──────────────────────────────── */
.pai-listrows { margin-top: clamp(34px, 4vw, 46px); border-top: 1px solid var(--line); }
.pai-band-light .pai-listrows { border-color: var(--light-line); }
.pai-listrow {
display: grid; grid-template-columns: auto 1fr;
align-items: start; gap: clamp(20px, 4vw, 44px);
padding: 30px 4px; border-bottom: 1px solid var(--line);
}
.pai-band-light .pai-listrow { border-color: var(--light-line); }
/* Il numero è GRANDE e in display: è l'ancora visiva della riga. */
.pai-listrow-n {
font-family: var(--font-display); font-weight: 600; line-height: 1;
font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--verde);
}
.pai-band-light .pai-listrow-n { color: var(--verde-deep); }
.pai-listrow h3 { margin-bottom: 8px; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -.01em; }
.pai-listrow p { max-width: 72ch; line-height: 1.6; color: var(--muted); }
.pai-band-light .pai-listrow p { color: var(--light-body); }
/* ── Checklist a due colonne (sezione "cosa saprai fare") ───────────────── */
.pai-checkrows {
margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 48px; border-top: 1px solid var(--line);
}
@media (max-width: 980px) { .pai-checkrows { grid-template-columns: 1fr; } }
.pai-checkrow {
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.pai-checkrow-ico {
display: grid; place-items: center; flex: none;
width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde);
}
.pai-checkrow-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.pai-checkrow p { font-size: 1.08rem; line-height: 1.45; color: rgba(240,242,235,.85); }
.pai-band-light .pai-checkrows, .pai-band-light .pai-checkrow { border-color: var(--light-line); }
.pai-band-light .pai-checkrow p { color: var(--light-body); }
/* ── Pull-quote / affermazione forte ────────────────────────────────────────
⚠️ Ha una banda colorata a SINISTRA (3px). Le linee guida generiche di design
la vietano come "side-stripe", ma è un pattern reale del sito e resta com'è.
Usala UNA volta per pagina, per la frase che riassume la tesi. */
.pai-quote {
margin-top: 34px; max-width: 60ch;
border-left: 3px solid var(--verde-band);
border-radius: 0 12px 12px 0;
background: color-mix(in srgb, var(--verde-band) 7%, transparent);
padding: 24px 28px;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3;
}
.pai-quote b, .pai-quote strong { font-weight: 600; color: var(--verde-deep); }
.pai-band-dark .pai-quote b, .pai-quote b { color: var(--verde); }
.pai-band-light .pai-quote { color: var(--light-title); }
.pai-band-light .pai-quote b { color: var(--verde-deep); }
/* ══ TABELLA PREZZI ═══════════════════════════════════════════════════════
Ricostruita dalla sezione #iscrizione delle pagine master. Tre regole che
NON si negoziano:
1. Le card hanno la STESSA ALTEZZA. La griglia è `align-items: stretch` e
dentro la card la lista è `flex: 1`, così le CTA finiscono tutte sulla
stessa riga. Card di altezze diverse fanno sembrare la pagina rotta.
2. Il piano consigliato NON è una tinta leggera: è un fondo **teal pieno**
con testo scuro, ombra proiettata e badge che sborda dal bordo. Se la
differenza non si vede da lontano, non è un piano consigliato.
3. Sul piano teal la CTA è **arancione**, non verde: sul verde il verde
sparisce. È l'unico punto della pagina dove serve un terzo colore. */
.pai-plans {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 24px;
align-items: stretch; /* ← mai `start`: è ciò che produce altezze diverse */
}
@media (min-width: 900px) { .pai-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tre piani: 3 colonne sopra 900px, UNA sotto — mai due, perché la terza card
resterebbe orfana a metà riga. Sotto i 900 la colonna si tappa a 460px e si
centra, altrimenti su tablet le card diventano fasce larghissime.
Ladder copiata da agent-nights/page.tsx:142 del sito:
grid-cols-3 max-[900px]:grid-cols-1 max-[900px]:max-w-[460px] */
.pai-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ⚠️ La soglia è 1100, non 900 come sul sito: le nostre CTA sono più lunghe
delle sue ("Passa all'accesso a vita"). Misurato a 901px con 3 colonne: card
da 260px, prezzo spezzato su due righe e bottone su TRE. Sotto i 1100 la
pagina è già in assetto tablet (niente foto nell'hero, spec strip a 2
colonne), quindi una colonna sola è anche più coerente. */
@media (max-width: 1100px) {
.pai-plans--3 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
/* Il piano consigliato sta al centro e sporge sopra e sotto gli altri due.
Si usa margine negativo + padding, non `transform: scale()`: lo scale
sfoca il testo, deforma il raggio dei bordi e sposta il badge fuori posto.
Solo a 3 colonne: quando le card si impilano, sporgere non ha senso. */
@media (min-width: 1101px) {
.pai-plans--3 .pai-plan--best {
margin-block: -18px;
padding-block: calc(clamp(28px, 3vw, 38px) + 18px);
}
}
.pai-plan {
position: relative; display: flex; flex-direction: column;
border-radius: 20px; border: 1px solid var(--line); background: var(--ink-2);
padding: clamp(28px, 3vw, 38px);
transition: border-color .2s;
}
@media (hover: hover) and (pointer: fine) { .pai-plan:hover { border-color: var(--verde); } }
/* Etichetta del piano: mono-like, maiuscolo, tracking largo. */
.pai-plan-kicker {
font-size: 14px; font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; color: var(--muted);
}
.pai-plan-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
/* Prezzo: grande davvero (fino a 4rem), leading .9, pieno barrato allineato
alla base. Un prezzo piccolo non regge una tabella prezzi. */
.pai-plan-price {
display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
margin: 20px 0 6px;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(3rem, 5vw, 4rem); line-height: .9; letter-spacing: -.02em;
}
.pai-plan-was {
margin-bottom: 6px;
font-family: var(--font-sans); font-size: 1.2rem; font-weight: 400;
letter-spacing: 0; color: var(--muted); text-decoration: line-through;
}
/* Riquadro "paga a rate": è una scatola dentro la card, non una riga di testo. */
.pai-ratebox {
margin-bottom: 20px; border-radius: 12px;
border: 1px solid var(--line); background: rgba(255,255,255,.03);
padding: 12px 16px;
}
.pai-ratebox-k { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pai-ratebox-v { margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(240,242,235,.88); }
.pai-ratebox-v b { font-weight: 600; color: var(--verde); }
/* Riga di contesto sotto le rate (inizio classe, welfare…). */
.pai-plan-meta { margin-bottom: 28px; font-size: 1.05rem; color: var(--muted); }
.pai-plan-meta b { font-weight: 600; color: var(--verde); }
/* Durata sotto il nome del piano ("+ 6 mesi"): è la formula delle landing di
rinnovo storiche, dove la card diceva solo nome, durata, prezzo e bottone. */
.pai-plan-dur { margin-top: 6px; font-size: 1.02rem; color: var(--verde); font-weight: 600; }
.pai-plan--best .pai-plan-dur { color: var(--on-band); opacity: .78; }
/* Rate: UNA riga sotto il prezzo, non una scatola. Il riquadro .pai-ratebox
pesava troppo dentro una card già densa. */
.pai-plan-rate { margin-bottom: 28px; font-size: .95rem; color: var(--muted); }
.pai-plan--best .pai-plan-rate { color: var(--on-band); opacity: .8; }
/* Lista con spunta in cerchio. `flex: 1` è ciò che allinea le CTA in fondo. */
.pai-plan-list {
flex: 1; margin-bottom: 32px;
display: flex; flex-direction: column; gap: 14px;
list-style: none; padding: 0;
}
.pai-plan-list > * {
display: flex; align-items: flex-start; gap: 12px;
font-size: 1.05rem; line-height: 1.4; color: rgba(240,242,235,.88);
}
.pai-plan-list svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.pai-plan-list .no { color: rgba(240,242,235,.45); }
/* La CTA sta in fondo, a tutta larghezza, più alta di un bottone normale.
⚠️ Dopo la CTA non deve esserci NIENTE. Basta una nota sotto una sola card
per disallineare le CTA di tutta la fila, anche con le card alte uguali:
note e disclaimer vanno sopra la CTA, o fuori dalla griglia. */
.pai-plan > .pai-btn { margin-top: auto; width: 100%; justify-content: center; padding: 16px 28px; font-size: 1.05rem; }
.pai-plan-fine { margin-top: 12px; font-size: 13px; line-height: 1.4; color: rgba(240,242,235,.55); }
.pai-plan-note { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }
/* ── Il piano consigliato: fondo TEAL PIENO ─────────────────────────────── */
.pai-plan--best {
background: var(--verde-band); border-color: transparent;
color: var(--on-band);
box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--verde-band) 65%, transparent);
}
.pai-plan--best .pai-plan-kicker { color: color-mix(in srgb, var(--on-band) 70%, transparent); }
.pai-plan--best .pai-plan-name,
.pai-plan--best .pai-plan-price { color: var(--on-band); }
.pai-plan--best .pai-plan-was { color: rgba(6,23,14,.5); }
.pai-plan--best .pai-ratebox { border-color: rgba(6,23,14,.2); background: rgba(6,23,14,.05); }
.pai-plan--best .pai-ratebox-k { color: rgba(6,23,14,.62); }
.pai-plan--best .pai-ratebox-v { color: var(--on-band); }
.pai-plan--best .pai-ratebox-v b { color: var(--on-band); }
.pai-plan--best .pai-plan-meta { color: rgba(6,23,14,.72); }
.pai-plan--best .pai-plan-meta b { color: var(--on-band); }
.pai-plan--best .pai-plan-list > * { color: var(--on-band); font-weight: 500; }
.pai-plan--best .pai-plan-note { color: rgba(6,23,14,.72); }
@media (hover: hover) and (pointer: fine) { .pai-plan--best:hover { border-color: transparent; } }
/* Badge che sborda dal bordo superiore. */
.pai-plan-badge {
position: absolute; top: -14px; right: clamp(28px, 3vw, 38px);
border-radius: 9999px; background: var(--on-band); color: var(--verde);
padding: 6px 14px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
/* Icona quadrata del piano (48px), per i piani non-best. */
.pai-plan-head { display: flex; align-items: center; gap: 14px; }
.pai-plan-ico {
display: flex; align-items: center; justify-content: center; flex: none;
width: 48px; height: 48px; border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--verde-2) 38%, transparent);
background: color-mix(in srgb, var(--verde) 12%, transparent);
font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--verde);
}
.pai-plan--best .pai-plan-ico {
border-color: rgba(6,23,14,.25); background: rgba(6,23,14,.1); color: var(--on-band);
}
/* ══ FASCIA INFO a due celle (sopra la tabella prezzi) ════════════════════
Due contesti affiancati con colori DIVERSI: sinistra teal (quando inizi),
destra oro/arancio (quanto e come paghi). È il posto dove il sito usa due
ruoli-colore vicini senza che stonino. */
.pai-infoband {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: hidden; border-radius: 14px;
border: 1px solid var(--line); background: rgba(21,26,18,.5);
}
@media (max-width: 560px) { .pai-infoband { grid-template-columns: 1fr; } }
.pai-infoband > * {
display: flex; align-items: center; gap: 16px;
padding: clamp(20px, 2.4vw, 26px); border-right: 1px solid var(--line);
}
.pai-infoband > *:last-child { border-right: 0; }
@media (max-width: 560px) {
.pai-infoband > * { border-right: 0; border-bottom: 1px solid var(--line); }
.pai-infoband > *:last-child { border-bottom: 0; }
}
.pai-infoband > *:first-child { background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 9%, transparent), transparent); }
.pai-infoband > *:last-child { background: linear-gradient(180deg, color-mix(in srgb, var(--urgency) 10%, transparent), transparent); }
.pai-infoband-ico {
display: flex; align-items: center; justify-content: center; flex: none;
width: 44px; height: 44px; border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--verde-2) 38%, transparent);
background: color-mix(in srgb, var(--verde) 12%, transparent); color: var(--verde);
}
.pai-infoband > *:last-child .pai-infoband-ico {
border-color: color-mix(in srgb, var(--urgency) 45%, transparent);
background: color-mix(in srgb, var(--urgency) 15%, transparent); color: var(--urgency-on-dark);
}
.pai-infoband-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pai-infoband-k { margin-bottom: 6px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--verde); }
.pai-infoband > *:last-child .pai-infoband-k { color: var(--urgency-on-dark); }
.pai-infoband-v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.pai-infoband-sub { margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--muted); }
/* ══ TRUST BAR ════════════════════════════════════════════════════════════
Quattro rassicurazioni sotto l'offerta, separate da un filo orizzontale.
Icona 24px teal a filo, titolo in grassetto, riga sotto muted. */
.pai-trustbar { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 56px; }
.pai-trustbar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
@media (max-width: 860px) { .pai-trustbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pai-trustbar-grid > * { display: flex; align-items: center; gap: 12px; }
.pai-trustbar svg { width: 24px; height: 24px; flex: none; color: var(--verde); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pai-trustbar b { display: block; font-weight: 600; color: var(--paper); line-height: 1.25; }
.pai-trustbar span span { font-size: .95rem; color: var(--muted); }
/* ─── Pill / chip / badge ─────────────────────────────────────────────────
Misure reali del sito: mono 14px, padding 6/12, altezza ~35px, `rounded-full`.
⚠️ REGOLA: una pill contiene ETICHETTE, non frasi. Sul sito sono tutte da 1-3
parole ("Python", "SQL", "Machine Learning"). Con `rounded-full` una frase che
va a capo produce un blob con gli angoli che tagliano le righe: è il difetto
più visibile del sistema. Quindi la pill NON va a capo (`nowrap`).
Se il testo è una frase, hai due strade oneste:
· accorcialo a un'etichetta ("posti limitati"), oppure
· usa `.pai-pill--note`, che è un altro oggetto: raggio 12px, più righe
ammesse, allineato in alto. */
.pai-pill {
display: inline-flex; align-items: center; gap: 8px;
border-radius: 9999px; border: 1px solid var(--line);
padding: 6px 12px;
font-family: var(--font-mono); font-size: 14px; line-height: 1.45; color: var(--muted);
white-space: nowrap;
}
/* Nota multi-riga: NON è una pill, ha un raggio compatibile con l'andare a capo. */
.pai-pill--note {
white-space: normal; border-radius: 12px; align-items: flex-start;
padding: 10px 14px; max-width: 44ch; text-wrap: pretty;
}
/* Badge sopra un'immagine: fondo pieno, senza bordo (variante misurata 7/14). */
.pai-pill--overlay {
padding: 7px 14px; font-size: 13px; border: 0;
background: rgba(10,10,10,.66); color: #fff;
backdrop-filter: blur(6px);
}
.pai-pill--verde { border-color: color-mix(in srgb, var(--verde) 40%, transparent); color: var(--verde); }
.pai-pill--promo { border-color: rgba(241,143,1,.42); background: rgba(241,143,1,.12); color: var(--urgency-on-dark); }
.pai-pill--gold { border-color: rgba(246,196,83,.42); background: rgba(246,196,83,.12); color: var(--gold); }
.pai-band-light .pai-pill { border-color: var(--light-line); color: var(--light-body); }
.pai-band-teal .pai-pill, .pai-band-ai .pai-pill { border-color: rgba(6,23,14,.28); background: rgba(6,23,14,.06); color: var(--on-band); }
/* ─── Statistiche / numeri ───────────────────────────────────────────────── */
.pai-stat-v { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
.pai-stat-k { font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; color: var(--muted); margin-top: 8px; }
.pai-band-light .pai-stat-k { color: var(--light-body); }
.pai-band-teal .pai-stat-k, .pai-band-ai .pai-stat-k { color: color-mix(in srgb, var(--on-band) 75%, transparent); }
/* ─── Ticker / marquee ───────────────────────────────────────────────────
Contenuto DUPLICATO 2× nel markup e traslato di -50%: è così che il loop
risulta continuo. Testo minuscolo, separatori "·". */
.pai-ticker { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); }
.pai-ticker-track {
display: inline-block; padding-block: 11px;
font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; color: var(--verde);
animation: pai-scrollL 32s linear infinite;
}
.pai-ticker-track > span > span { padding-inline: 26px; }
.pai-marquee-track { animation: pai-scrollL 40s linear infinite; }
.pai-ticker:hover .pai-ticker-track, .pai-marquee-track:hover { animation-play-state: paused; }
@keyframes pai-scrollL { to { transform: translateX(-50%); } }
/* ─── Sfondi ed effetti ──────────────────────────────────────────────────── */
/* Campo di bagliori: 3 radiali sovrapposti. Va su un figlio assoluto -z-1. */
.pai-glowfield {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(46% 56% at 30% 42%, color-mix(in srgb, var(--verde) 22%, transparent), transparent 62%),
radial-gradient(40% 50% at 72% 55%, color-mix(in srgb, var(--verde-2) 16%, transparent), transparent 64%),
radial-gradient(38% 48% at 52% 28%, color-mix(in srgb, var(--verde-deep) 22%, transparent), transparent 66%);
/* ⚠️ SENZA QUESTA MASCHERA SI VEDE UNA LINEA NETTA in fondo alla sezione.
Il secondo radiale è centrato al 55% con raggio 50%, quindi arriva al 105%
dell'altezza: al bordo inferiore è ANCORA opaco e l'overflow:hidden del
contenitore lo taglia di netto, lasciando un gradino visibile.
La maschera porta l'opacità a zero prima del bordo, quindi il bagliore
sfuma sempre, qualunque sia l'altezza della sezione. */
-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
}
/* Se il bagliore deve invece proseguire nella sezione successiva (due sezioni
scure consecutive), togli la maschera con questa variante. */
.pai-glowfield--bleed { -webkit-mask-image: none; mask-image: none; }
/* Aurora: macchia che respira lentamente. 20s per le sezioni, 14s per i blob. */
.pai-aurora {
position: absolute; inset: -40%; z-index: -1; pointer-events: none;
background: radial-gradient(40% 40% at 70% 24%, color-mix(in srgb, var(--verde-2) 30%, transparent), transparent 60%);
animation: pai-auro 20s ease-in-out infinite;
}
.pai-aurora--blob {
inset: auto; right: -90px; top: -180px; width: 380px; height: 380px;
border-radius: 9999px; filter: blur(12px);
background: radial-gradient(circle, color-mix(in srgb, var(--verde-2) 40%, transparent), transparent 62%);
animation-duration: 14s;
}
@keyframes pai-auro {
0%, 100% { transform: translate(-6%, -4%) scale(1); }
50% { transform: translate(7%, 5%) scale(1.16); }
}
/* Velo scuro sul fondo delle immagini (per far leggere il testo sopra). */
.pai-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,23,14,.5)); }
/* Bagliore d'apertura sezione: sfumatura dall'alto. */
.pai-topglow { background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 9%, transparent), transparent); }
.pai-topglow--promo { background: linear-gradient(180deg, color-mix(in srgb, var(--urgency) 10%, transparent), transparent); }
/* Superficie teal profonda (card "premium" su fascia scura). */
.pai-surface-teal { background: radial-gradient(130% 130% at 72% 8%, #1b4533, #0c1510 70%); }
/* ─── Animazioni d'ingresso ──────────────────────────────────────────────── */
/* Scroll-reveal. REGOLA: il contenuto è visibile PER DEFAULT e l'animazione è
un miglioramento opt-in. Lo stato nascosto vale solo sotto `html.pai-js`,
classe che uno script inline mette prima del render (vedi template.html).
Senza JS, con JS a metà, in un renderer headless o in una scheda in background
la pagina resta leggibile invece di uscire bianca — è un bug che si vede solo
in produzione, quando lo screenshot o il crawler arriva a sezione vuota. */
/* Lo stato nascosto lo aggiunge il JS (classe `--pre`), NON il CSS. Motivo,
verificato sperimentalmente: se lo stato nascosto arriva dal CSS e la rivelazione
dipende da una TRANSIZIONE, in un documento con `visibilityState: hidden`
(scheda in background, renderer di anteprime social, Lighthouse) le transizioni
restano in pausa e l'elemento resta congelato a opacità 0 → sezione bianca,
anche con il JS perfettamente funzionante. Mettendo lo stato nascosto dal JS,
qualunque percorso di fallimento lascia la pagina VISIBILE. */
.pai-reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.pai-reveal--pre { opacity: 0; transform: translateY(16px); }
/* Usata dal JS nei percorsi di emergenza: rivela senza animare. */
.pai-reveal--now { transition: none !important; }
/* Hero: la riga sale da sotto. Il genitore DEVE avere overflow:hidden.
padding-bottom + margin-bottom negativo dello stesso valore = spazio per i
descender dentro il box che clippa, senza spostare le righe di un pixel. */
.pai-rise-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.pai-rise {
display: inline-block; transform: translateY(110%);
animation: pai-rise .85s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes pai-rise { to { transform: translateY(0); } }
/* Hero: comparsa in dissolvenza (sottotitolo, CTA). */
.pai-fade { opacity: 0; animation: pai-fade .8s forwards; }
@keyframes pai-fade { to { opacity: 1; } }
/* Ritardi a scaletta: righe .12/.22/.32/.42s, poi testo .7s, CTA .82s. */
/* Stagger LENTO (home): le righe salgono una per volta, si nota. 100ms di passo. */
.pai-d1 { animation-delay: .12s } .pai-d2 { animation-delay: .22s }
.pai-d3 { animation-delay: .32s } .pai-d4 { animation-delay: .42s }
.pai-d5 { animation-delay: .7s } .pai-d6 { animation-delay: .82s }
/* Stagger RAPIDO (landing masterclass/evento): 60ms di passo, le righe salgono
quasi insieme. Da usare quando il titolo è su 4 righe e l'attesa infastidisce.
Il sito usa questo sulle landing a conversione, quello lento sulla home. */
.pai-f1 { animation-delay: 0s } .pai-f2 { animation-delay: .06s }
.pai-f3 { animation-delay: .12s } .pai-f4 { animation-delay: .18s }
.pai-f5 { animation-delay: .7s } .pai-f6 { animation-delay: .9s }
/* Hero master: il lead entra a .6s, la riprova a .75s, le CTA a .9s. */
.pai-s1 { animation-delay: .15s } .pai-s2 { animation-delay: .3s }
.pai-s3 { animation-delay: .6s } .pai-s4 { animation-delay: .75s }
.pai-s5 { animation-delay: .9s }
/* Micro-animazioni di richiamo (usare con parsimonia, solo su promo). */
@keyframes pai-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes pai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(241,143,1,.4); } 60% { box-shadow: 0 0 0 8px rgba(241,143,1,0); } }
@keyframes pai-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.pai-nudge { animation: pai-nudge 1.8s ease-in-out infinite; }
.pai-pulse { animation: pai-pulse 2s ease-out infinite; }
.pai-floaty { animation: pai-floaty 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.pai-reveal, .pai-reveal--pre { opacity: 1; transform: none; transition: none; }
.pai-rise { animation: none; transform: none; }
.pai-fade { animation: none; opacity: 1; }
.pai-kw { -webkit-text-fill-color: var(--verde); background: none; }
.pai-ticker-track, .pai-marquee-track, .pai-aurora,
.pai-nudge, .pai-pulse, .pai-floaty { animation: none !important; }
/* Anche i micro-movimenti al passaggio del mouse e il drawer: chi chiede meno
movimento non vuole nemmeno questi. Resta il cambio di colore. */
.pai-btn:hover, .pai-card:hover, .pai-btn:active { transform: none; }
.pai-drawer { transition: opacity .01ms, visibility .01ms; transform: none; }
.pai-skip { transition: none; }
}
/* ─── Schermi bassi e landscape su telefono ──────────────────────────────
L'hero è tarato in vh: a 420px di altezza (telefono coricato) il titolo da
9vw più i padding non lasciano spazio al resto. Qui si comprime. */
@media (max-height: 520px) and (orientation: landscape) {
.pai-hero { padding-block: 24px 20px; }
.pai-h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); }
.pai-section { padding-block: clamp(40px, 6vw, 64px); }
}
/* ─── Stampa ─────────────────────────────────────────────────────────────
Una landing viene stampata o salvata in PDF più spesso di quanto si pensi
(chi deve far approvare un corso in azienda). Senza queste regole escono
pagine nere e sezioni vuote. */
@media print {
.pai-reveal, .pai-reveal--pre, .pai-fade, .pai-rise { opacity: 1 !important; transform: none !important; animation: none !important; }
body { background: #fff; color: #000; }
.pai-nav, .pai-drawer, .pai-nav-toggle, .pai-skip,
.pai-ticker, .pai-aurora, .pai-glowfield, [data-floating-chrome] { display: none !important; }
.pai-band-light, .pai-band-teal, .pai-band-ai, .pai-card { background: #fff !important; color: #000 !important; }
.pai-card { border: 1px solid #999 !important; break-inside: avoid; }
.pai-h1, .pai-h2, .pai-h3, .pai-cta-title { color: #000 !important; }
.pai-body, .pai-lead, .pai-cta-lead, .pai-stat-k { color: #333 !important; }
.pai-section { padding-block: 24px; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}
/* ─── Form (tema scuro, con i fix iOS del sito) ──────────────────────────── */
/* Etichetta del campo. Serve SEMPRE: il placeholder non è un'etichetta, sparisce
appena si scrive e gli screen reader non lo annunciano in modo affidabile.
Se il design non la vuole a vista, usa .pai-field-label--sr (resta per la
tastiera e per lo screen reader) invece di ometterla. */
.pai-field-label {
display: block; margin-bottom: 8px;
font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em;
color: var(--muted);
}
.pai-field-label--sr {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pai-field {
width: 100%; border-radius: 14px;
border: 1px solid var(--line); background: rgba(255,255,255,.06);
padding: 12px 16px; font-size: 16px; color: var(--paper);
outline: none; transition: border-color .2s;
}
/* .35 rendeva 3.08:1 (sotto la soglia): il placeholder è testo e vuole 4.5:1.
.55 rende 5.4:1 sul fondo reale del campo. */
.pai-field::placeholder { color: rgba(255,255,255,.55); }
.pai-field:focus { border-color: var(--verde); }
/* Autofill iOS/WebKit: ridipinge i campi di chiaro e li rende illeggibili. */
.pai-field:-webkit-autofill, .pai-field:-webkit-autofill:hover,
.pai-field:-webkit-autofill:focus, .pai-field:-webkit-autofill:active {
-webkit-text-fill-color: var(--paper);
-webkit-box-shadow: 0 0 0 1000px #282c25 inset;
caret-color: var(--paper);
transition: background-color 600000s 0s, color 600000s 0s;
}
/* ─── Focus visibile (accessibilità) ─────────────────────────────────────
Contrasti misurati: Light Green su scuro = 15.42:1 ✓, ma sulle fasce teal e
viola scende a 1.66:1 → anello praticamente invisibile. Sulle fasce colorate
e su quella chiara si usa quindi l'inchiostro scuro (9.04:1 su teal,
5.69:1 su viola, 16.67:1 su chiaro), sopra la soglia 3:1 per elementi non
testuali (WCAG 1.4.11). */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.pai-band-light :focus-visible,
.pai-band-teal :focus-visible,
.pai-band-ai :focus-visible { outline-color: var(--ring-on-band); }
/* Sul bottone scuro dentro una fascia colorata l'anello scuro sparirebbe:
lì torna il verde chiaro, che sul pieno #06170E rende 15:1. */
.pai-band-teal .pai-btn--on-band:focus-visible,
.pai-band-ai .pai-btn--on-band:focus-visible { outline-color: var(--ring); }
/* ─── Skip link ──────────────────────────────────────────────────────────
Primo elemento focalizzabile del documento: da tastiera salta la nav. */
.pai-skip {
position: absolute; left: var(--gutter); top: 8px; z-index: var(--z-toast);
transform: translateY(-200%);
border-radius: 9999px; background: var(--verde); color: var(--on-verde);
padding: 12px 20px; font-weight: 600;
transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.pai-skip:focus { transform: none; }
/* ─── Utility di servizio ────────────────────────────────────────────────── */
.pai-scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.pai-scrollbar-hide::-webkit-scrollbar { display: none; }
.pai-mono { font-family: var(--font-mono); }
.pai-center { text-align: center; }
.pai-center .pai-h2 { margin-inline: auto; }
.pai-center .pai-label { justify-content: center; }
.pai-center .pai-lead { margin-inline: auto; }
.pai-center .pai-btn-row { justify-content: center; }
.pai-relative { position: relative; }
.pai-clip { overflow: clip; }
/* ══ ACCORDION / PROGRAMMA ════════════════════════════════════════════════
Dalla sezione programma delle pagine master. Tre dettagli che lo fanno
sembrare "del sito" invece che un accordion qualsiasi:
· la riga si SPOSTA a destra sull'hover (`padding-left`, non `transform`,
così il bordo inferiore resta fermo);
· il `+` RUOTA di 45° e diventa una ×, invece di essere sostituito;
· l'apertura anima `grid-template-rows: 0fr → 1fr`, non `max-height`:
l'altezza è quella reale del contenuto, senza numeri magici da indovinare. */
.pai-accordion { margin-top: 36px; border-top: 1px solid var(--line); }
.pai-band-light .pai-accordion { border-color: var(--light-line); }
.pai-acc { border-bottom: 1px solid var(--line); }
.pai-band-light .pai-acc { border-color: var(--light-line); }
.pai-acc-head {
display: grid; grid-template-columns: 48px 1fr 34px;
align-items: center; gap: 18px; width: 100%;
padding: 20px 0; text-align: left;
}
/* Lo scarto a destra sull'hover si ottiene spostando SOLO le due celle di
sinistra con `transform`, non animando il `padding` del contenitore.
Il sito usa `hover:pl-3` (padding), che dà lo stesso risultato visivo ma è una
proprietà di LAYOUT: ogni frame ricalcola la griglia. Qui il risultato è
identico e non tocca il layout.
Il `+` resta fermo di proposito: è il punto d'ancoraggio della riga, e vederlo
scorrere insieme al testo fa sembrare che si sposti tutta la riga. */
.pai-acc-n, .pai-acc-t { transition: transform .2s; }
@media (hover: hover) and (pointer: fine) {
.pai-acc-head:hover .pai-acc-n,
.pai-acc-head:hover .pai-acc-t { transform: translateX(12px); }
}
@media (max-width: 600px) { .pai-acc-head { grid-template-columns: 40px 1fr 30px; } }
.pai-acc-n { font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.pai-band-light .pai-acc-n { color: var(--light-body); }
.pai-acc-t {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.1rem, 2.1vw, 1.5rem); letter-spacing: .012em;
color: var(--paper);
}
.pai-band-light .pai-acc-t { color: var(--light-title); }
.pai-acc-plus {
justify-self: end; font-family: var(--font-display); font-size: 1.5rem;
color: var(--muted); transition: transform .3s, color .2s;
}
.pai-acc[open] .pai-acc-t, .pai-acc[open] .pai-acc-plus { color: var(--verde); }
.pai-band-light .pai-acc[open] .pai-acc-t,
.pai-band-light .pai-acc[open] .pai-acc-plus { color: var(--verde-deep); }
.pai-acc[open] .pai-acc-plus { transform: rotate(45deg); }
/* Il corpo: griglia 0fr→1fr, l'unico modo pulito di animare "auto". */
/* ⚠️ NON usare il trucco `grid-template-rows: 0fr → 1fr`, per quanto sia il
modo elegante di animare "auto". Misurato su Chrome 148: con `overflow:
hidden` sul figlio la traccia resta a ZERO anche impostando `auto` o
`max-content`, quindi il corpo non si apre mai; togliendo l'overflow si apre
ma `0fr` non lo richiude piu'. Rotto in entrambi i versi.
Qui si anima l'altezza in pixel: il JS la misura, la imposta, e a fine
transizione la rimette su `auto` cosi' il testo resta libero di rifloware se
la finestra cambia. Niente numeri magici e niente max-height inventata. */
.pai-acc-body { overflow: hidden; height: 0; transition: height .3s ease; }
.pai-acc-body p { max-width: 74ch; padding: 0 4px 22px 66px; line-height: 1.6; color: var(--muted); }
.pai-band-light .pai-acc-body p { color: var(--light-body); }
@media (max-width: 600px) { .pai-acc-body p { padding-left: 52px; } }
/* Con nativo: togli il marcatore del browser. */
.pai-acc > summary { list-style: none; cursor: pointer; }
.pai-acc > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) {
.pai-acc-head, .pai-acc-plus, .pai-acc-body { transition: none; }
}
/* ══ FOTO ═════════════════════════════════════════════════════════════════
Una landing senza foto è asettica. Il sito ne usa in tre modi:
1. `.pai-figure` — foto di sezione, raggio 20px, bordo, aspect 4/5 o 16/10
2. `.pai-hero-figure` — ritaglio del coach nell'hero (già sopra, con maschera)
3. `.pai-personcard` — card docente: foto 4/5 + nome + ruolo
Regole: SEMPRE `width`/`height` (niente salti di layout), `loading="lazy"`
sotto la piega, `alt=""` + `aria-hidden` se la foto è decorativa. */
.pai-figure {
position: relative; overflow: hidden;
border-radius: 20px; border: 1px solid var(--line); background: var(--ink-3);
aspect-ratio: 4 / 5;
}
.pai-band-light .pai-figure { border-color: var(--light-line); background: var(--light-line); }
.pai-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
/* Leggera desaturazione: le foto del sito non sono mai sature al 100%. */
.pai-figure img { filter: saturate(.92) contrast(1.02); }
.pai-figure--wide { aspect-ratio: 16 / 10; }
.pai-figure--square { aspect-ratio: 1; }
/* Su desktop la foto di sezione può restare agganciata mentre il testo scorre. */
@media (min-width: 861px) { .pai-figure--sticky { position: sticky; top: 88px; } }
@media (max-width: 860px) { .pai-figure { aspect-ratio: 16 / 10; } }
/* Velo scuro in basso, per far reggere il testo sopra la foto. */
.pai-figure--scrim::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, transparent 55%, rgba(6,23,14,.5));
}
/* Placeholder: quando la foto non c'è ancora. Va SOSTITUITO, non lasciato in
produzione: il tratteggio serve proprio a farsi notare in revisione. */
.pai-figure--placeholder {
display: grid; place-items: center;
border-style: dashed; border-color: color-mix(in srgb, var(--verde) 40%, transparent);
background: color-mix(in srgb, var(--verde) 5%, transparent);
}
.pai-figure--placeholder::before {
content: attr(data-nota);
font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
color: var(--verde); text-align: center; padding: 20px; max-width: 30ch;
}
/* ── Card persona (docente, coach, studente) ───────────────────────────── */
.pai-personcard {
width: 236px; flex: none; overflow: hidden;
border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2);
}
.pai-band-light .pai-personcard { border-color: var(--light-line); background: var(--light-card); }
.pai-personcard-img { position: relative; aspect-ratio: 4 / 5; border-bottom: 1px solid var(--line); background: var(--ink-3); }
.pai-band-light .pai-personcard-img { border-color: var(--light-line); background: #EDEAE0; }
.pai-personcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pai-personcard-body { padding: 14px 16px; }
.pai-personcard-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.pai-personcard-role { margin-top: 3px; font-size: 1.05rem; color: var(--muted); }
.pai-band-light .pai-personcard-role { color: var(--light-body); }
.pai-personcard-tag {
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: 14px; color: var(--verde);
}
.pai-band-light .pai-personcard-tag { border-color: var(--light-line); color: var(--verde-deep); }
/* Riga di card persona che scorre in orizzontale su schermi stretti. */
.pai-personrow { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
/* ── Testo + foto affiancati ─────────────────────────────────────────────
Foto a sinistra (più stretta), contenuto a destra. Sotto 860px la foto va
sopra e diventa panoramica. Proporzione dal sito: 0.82fr / 1fr. */
.pai-split {
display: grid; grid-template-columns: 0.82fr 1fr;
align-items: start; gap: clamp(28px, 4vw, 60px);
}
@media (max-width: 860px) { .pai-split { grid-template-columns: 1fr; gap: 24px; } }
.pai-split--flip > :first-child { order: 2; }
/* ══ RICONOSCIMENTO UNIVERSITARIO ═════════════════════════════════════════
Dal componente `AccreditationsSection` del sito. Pannello a due colonne su
fascia CHIARA: a sinistra il riconoscimento (Polo/IUL), a destra la garanzia
(enti terzi). Va usato tale e quale: i loghi e le diciture sono materiale
legale, non decorazione.
⚠️ EQF6: si dice "riconoscimento universitario" e "valida in tutta l'UE".
MAI "livello 6" né "Regione Lombardia". */
.pai-accred {
position: relative; overflow: hidden; margin-top: 44px;
border-radius: 26px; border: 1px solid var(--light-line); background: var(--light-card);
box-shadow: 0 34px 70px -40px rgba(20,19,15,.22);
}
/* Alone teal in alto a sinistra: lo stesso del sito. */
.pai-accred::before {
content: ""; position: absolute; left: -160px; top: -256px;
width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--verde-deep) 8%, transparent), transparent 64%);
}
.pai-accred-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 880px) { .pai-accred-grid { grid-template-columns: 1fr; } }
.pai-accred-col { padding: clamp(30px, 3.4vw, 52px); border-right: 1px solid var(--light-line); }
.pai-accred-col:last-child { border-right: 0; }
@media (max-width: 880px) {
.pai-accred-col { border-right: 0; border-bottom: 1px solid var(--light-line); }
.pai-accred-col:last-child { border-bottom: 0; }
}
.pai-accred-k { margin-bottom: 22px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; color: var(--verde-deep); }
/* Sigillo: cerchio 96px con anello tratteggiato interno. */
.pai-accred-seal {
position: relative; display: grid; place-items: center;
width: 96px; height: 96px; border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--verde-deep) 35%, transparent);
background: radial-gradient(circle, color-mix(in srgb, var(--verde) 10%, transparent), transparent 70%);
}
.pai-accred-seal::before {
content: ""; position: absolute; inset: 7px; border-radius: 50%;
border: 1px dashed color-mix(in srgb, var(--verde-deep) 38%, transparent);
}
.pai-accred-seal svg { width: 42px; height: 42px; fill: none; stroke: var(--verde-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pai-accred-seal-cap { margin-top: 14px; font-family: var(--font-mono); font-size: 16px; line-height: 1.5; letter-spacing: .04em; color: var(--light-body); }
/* Elenco dei riconoscimenti: spunta in cerchio teal-deep. */
.pai-accred-list { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.pai-accred-list > * { display: flex; align-items: flex-start; gap: 14px; }
.pai-accred-tick {
display: grid; place-items: center; flex: none; margin-top: 2px;
width: 22px; height: 22px; border-radius: 50%;
background: color-mix(in srgb, var(--verde-deep) 13%, transparent);
}
.pai-accred-tick svg { width: 12px; height: 12px; fill: none; stroke: var(--verde-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pai-accred-list p { font-size: 1.08rem; line-height: 1.45; color: var(--light-title); }
.pai-accred-list b { font-weight: 600; }
.pai-accred-list span { color: var(--light-body); }
.pai-accred-h { margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(1.3rem,2.2vw,1.7rem); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--light-title); }
.pai-accred-sub { margin-bottom: 26px; font-size: 1.05rem; line-height: 1.5; color: var(--light-body); }
/* Loghi degli enti: altezza uniforme, allineati alla base ottica. */
/* I quattro loghi stanno su UNA riga. Con `flex-wrap` andavano a capo 3+1 e il
quarto restava spaiato sotto, che a colpo d'occhio sembra un errore di
caricamento. Griglia a 4 colonne: si rimpiccioliscono insieme invece di
spezzarsi, e `min-width: 0` sulle celle è ciò che permette loro di stringersi
sotto la larghezza naturale dell'immagine. */
.pai-accred-badges {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center; gap: clamp(12px, 2vw, 28px);
}
.pai-accred-badges img {
height: clamp(48px, 6.5vw, 86px); width: 100%; max-width: 110px;
object-fit: contain; display: block;
}
/* Sotto i 420px quattro loghi diventano illeggibili: si passa a 2×2. */
@media (max-width: 420px) { .pai-accred-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ══ LE STORIE ═══════════════════════════════════════════════════════════
Da aggiungere in fondo a pai-landing.css.
Ricalcata su components/testimonials-section.tsx: recensioni testuali in
griglia ferma, video in un nastro che scorre.
═══════════════════════════════════════════════════════════════════════ */
.pai-stories-rating {
margin-top: 16px; font-family: var(--font-mono); font-size: 14px; color: var(--muted);
}
.pai-stories-rating b { font-weight: 600; color: var(--paper); }
/* ── Recensioni testuali: griglia FERMA ────────────────────────────────── */
/* Qui il passaggio intermedio a 2 colonne va bene: le recensioni sono sei,
pari, e non resta nessuna card orfana a metà riga. È il motivo per cui
.pai-grid--3 salta invece da 3 a 1 e questa no. */
.pai-reviews {
margin-top: clamp(28px, 3.5vw, 40px);
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 920px) { .pai-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pai-reviews { grid-template-columns: 1fr; } }
.pai-review {
display: flex; flex-direction: column;
border-radius: 16px; border: 1px solid var(--line);
background: var(--ink-2); padding: 24px;
}
/* flex:1 sul testo = tutte le firme allineate in fondo, quale che sia la
lunghezza della citazione. Senza, le card si sfilacciano. */
.pai-review blockquote { flex: 1; font-size: 1rem; line-height: 1.55; color: rgba(240,242,235,.86); }
.pai-review blockquote::before { content: "\201C"; }
.pai-review blockquote::after { content: "\201D"; }
.pai-review figcaption {
margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 12px;
}
.pai-review figcaption img {
width: 40px; height: 40px; flex: none;
border-radius: 50%; object-fit: cover; background: #0c1510;
}
.pai-review figcaption > span { display: flex; flex-direction: column; line-height: 1.25; }
.pai-review figcaption b { font-family: var(--font-display); font-weight: 600; color: var(--paper); }
.pai-review figcaption span span { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
/* ── Video: NASTRO che scorre ──────────────────────────────────────────── */
.pai-vid-label { margin-top: clamp(36px, 4vw, 48px); }
.pai-vids {
position: relative; margin-top: 28px; overflow: hidden;
content-visibility: auto;
/* Sfuma ai bordi invece di tagliare le card di netto. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.pai-vids-track {
display: flex; width: max-content; gap: 16px;
animation: pai-scroll-l 60s linear infinite;
}
/* Pausa solo dove c'è un mouse vero: su touch l'hover resta incollato.
In riproduzione il nastro si ferma comunque (classe messa dal JS). */
@media (hover: hover) and (pointer: fine) {
.pai-vids:hover .pai-vids-track { animation-play-state: paused; }
}
.pai-vids.is-playing .pai-vids-track { animation-play-state: paused; }
/* -50%, non -100%: le card sono duplicate, mezza corsa è un giro completo. */
@keyframes pai-scroll-l {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ⚠️ La card e' un