/* Hallmark · genre: atmospheric · macrostructure: Photographic · theme: system-managed (DESIGN.md) * nav: N10 floating-on-scroll morph (knobs: threshold=88px, pill max 60rem, blur 18px) * footer: Ft1 mast-headed (knobs: wordmark display 2xl · tagline roman body · links inline) * hero: H6 photographic fold (knobs: full-bleed · text overlaid lower-left · caption→headline * exception on fold 1 only, per il principio 1 del brief: la chiarezza viene prima dell'impatto) * sections: F5 annotated screenshot (margin labels, frame hairline — MAI finta barra browser, * gate 47) · S5 bottom-anchored · F3 tabular spec sheet · C2 inline form-as-CTA * enrichment: video 3D del padiglione, fornito dall'utente e diretto per questa pagina * (30s → 7.5 MB @1440, 2.9 MB @960), scrubbato dallo scroll. Non è stock. * pre-emit critique: P5 H5 E5 S5 R5 V5 * * DIVERSIFICAZIONE — build precedenti in .hallmark/log.json: * Workbench (N12 / Ft4) · Narrative Workflow (N9+N3 / Ft5). Nessun asse condiviso qui. * Il tema NON ruota: DESIGN.md è il sistema bloccato del progetto e su progetti * system-managed la regola si inverte — le pagine devono condividere il sistema. * * I token di colore e tipografia arrivano da web/style.css (DESIGN.md). Qui solo token * con prefisso --pv-. Nessun colore o font inline: tutto passa da var(). * * IL PADIGLIONE È SEMPRE NOTTE, in entrambi i temi — come la login (DESIGN.md firma 4). * Non si inverte: è un video, e il video è buio. */ /* ═══════════════════════════════════════════════════════════════════ TOKEN ═══════════════════════════════════════════════════════════════════ */ .pv-page { /* Spazio — scala 4pt, nomi semantici */ --pv-s-3xs: 4px; --pv-s-2xs: 8px; --pv-s-xs: 12px; --pv-s-sm: 18px; --pv-s-md: 28px; --pv-s-lg: 44px; --pv-s-xl: 72px; --pv-s-2xl: 112px; --pv-s-3xl: 168px; /* Misure */ --pv-page: 1320px; --pv-read: 62ch; --pv-nav-h: 60px; /* La corsa dello scroll dentro il padiglione. Più è lunga, meno filmato avanza a ogni tacca di rotella — ed è metà della fluidità. Trenta secondi di camera in movimento sono tanti da scrubbare: a 720vh un transito fra due stanze si consumava in tre clic di rotella, con salti di 3 fotogrammi per aggiornamento. A 1200vh scendono a circa un fotogramma. Sono ~12 schermate: molte, ma è quello che costa un fly-through che non scatta. */ --pv-track: 1200vh; /* Notte del padiglione — fissa nei due temi, e ora e' la STESSA tela del tema scuro dell'app invece di due neri-verdi leggermente diversi. */ --pv-night: #0f1918; /* = --bg (tema scuro) */ --pv-night-2: #172523; /* = --surface (tema scuro) */ /* Il verde profondo di DESIGN.md (#1d3937) come CAMPO, non come filetto. La notte del padiglione e' quasi nera perche' li' e' cinema — e va bene per il fly-through. Sotto, pero', quattro bande piatte quasi nere di fila spegnevano la pagina: nessuna sorgente di luce e nessun colore della tavolozza a una scala che si vedesse. Le sezioni scure risalgono verso il verde man mano che si scende; la piu' satura e' la chiamata all'azione, la piu' scura resta il colophon. */ --pv-deep: #16302b; --pv-deep-2: #1e463a; /* DOVE CADE LA CATENA DI QUOTA. Un solo valore, perche' lo usano due cose che devono coincidere al pixel: la posizione della quota verticale e il punto in cui la maschera del fiume taglia le schede. Quando erano due numeri scollegati le schede continuavano OLTRE la quota — la corsia finiva a 51px dal bordo e la linea stava a 110, e in mezzo restavano schede appese fuori dal disegno. Il `50%` si risolve sulla larghezza dell'elemento che lo usa: sezione e fiume sono entrambi larghi quanto la pagina, quindi danno lo stesso punto. Il `max()` tiene la quota dentro lo schermo sotto i 1320px. */ --pv-quota-x: max(22px, calc(50% - var(--pv-page) / 2 + 20px)); --pv-orlo: calc(var(--pv-quota-x) + 4px); /* l'asse della linea, non il suo bordo */ /* Il fondo della banda delle domande: l'unico CAMPO cromatico pieno della pagina. La seconda meta' era scuro / carta / carta / scuro — quattro valori e nessun colore, e lo smeraldo della tavolozza esisteva solo dentro i bottoni. Qui diventa una superficie, con le schede di carta che ci galleggiano sopra: e' il contrasto che mancava, e lo porta la tavolozza del marchio, non un accento preso a prestito. Due valori per tema, non uno solo che cambia: col tema chiaro lo smeraldo puo' respirare, col tema scuro va tenuto piu' basso o mangia la banda dell'accesso che gli sta sotto. */ --pv-faq-bg: #1b4b3f; /* La scheda dev'essere PIU' CHIARA del campo, sempre: col tema scuro `--raised` (#1d2e2b) e' piu' scuro e meno saturo dello smeraldo, quindi le schede arretravano invece di galleggiarci sopra. */ --pv-carta-bg: var(--raised); /* ── GLI INCHIOSTRI DELLA NOTTE, AGGANCIATI AL TEMA SCURO DEL PRODOTTO ── Le bande notturne restano scure nei DUE temi (DESIGN.md firma 4, come la login), quindi non possono usare `var(--ink)` &co: quei token si ribaltano con l'interruttore, queste superfici no. Ma non devono nemmeno essere inchiostri INVENTATI. Sono esattamente i valori del tema scuro di style.css, fissati: stessa identita', stessa scala, solo sganciati dal tema. Prima divergevano di poco — #f1ece1 contro #ece7dc — ed e' la deriva peggiore, quella che non si vede e non si sa spiegare. Se cambiano i token scuri nell'app, vanno riportati qui. */ --pv-on-night: #ece7dc; /* = --ink (tema scuro) */ --pv-on-night-2: #a8b5ad; /* = --ink-2 (tema scuro) */ --pv-on-night-3: #76857d; /* = --ink-3 (tema scuro) */ --pv-gold-night: #c2b183; /* = --gold-ink (tema scuro) */ --pv-green-night: #8ecfb8; /* = --accent-soft */ --pv-hairline-night: rgba(214, 202, 188, .16); /* = --hairline (tema scuro) */ --pv-hairline-night-2: rgba(214, 202, 188, .08); /* = --hairline-2 (tema scuro) */ /* La sabbia di DESIGN.md, quarto colore del marchio. Nel sistema c'era gia' — e' la base dei filetti, rgba(214,202,188,·) — ma non era mai stata usata come inchiostro. Serve sulle superfici piu' chiare della notte, dove il secondario non arriva a 4,5:1. */ --pv-sand: #d6cabc; /* ── REGOLA DI LEGGIBILITA' DELLA NOTTE ─────────────────────────── `--pv-on-night-3` e' leggibile SOLO sulla tela base (--pv-night). Su ogni superficie sollevata — night-2, deep, smeraldo — il testo piccolo sale di un gradino, perche' il fondo si schiarisce e il terziario scende sotto soglia. Misurato su pixel realmente disegnati, non sul valore del token: i veli sovrapposti contano. su --pv-night terziario 4,62:1 OK su --pv-night-2 terziario 4,09:1 -> secondario 7,45:1 su --pv-deep terziario 3,63:1 -> secondario 6,62:1 su smeraldo+velo secondario 3,82:1 -> sabbia 5,04:1 */ /* Il velo sotto le didascalie. Non è una scurita piatta sul video: sono due gradienti che pesano solo dove sta il testo, cioè in basso a sinistra. Serve perché il padiglione non è sempre buio — l'archivio e la sala di controllo sono ambienti avorio, e lì il testo bianco su bianco sparisce. */ /* Velo generale: solo una calibratura leggera, perché le stanze avorio non sfondino. Il lavoro di leggibilità lo fa il velo della singola didascalia, qui sotto. */ --pv-veil: linear-gradient( to top, rgba(8, 16, 15, .34) 0%, rgba(8, 16, 15, .10) 40%, rgba(8, 16, 15, .08) 75%, rgba(8, 16, 15, .22) 100% ); /* Veli direzionali: ogni didascalia porta il suo, orientato dove sta lei. Un velo solo in basso a sinistra non serve a un testo in alto a destra, e nel padiglione le zone scure cambiano stanza per stanza. */ --pv-sc-bottom: linear-gradient(to top, rgba(8,16,15,.94) 0%, rgba(8,16,15,.74) 24%, rgba(8,16,15,.26) 50%, rgba(8,16,15,0) 70%); --pv-sc-top: linear-gradient(to bottom, rgba(8,16,15,.94) 0%, rgba(8,16,15,.74) 24%, rgba(8,16,15,.26) 50%, rgba(8,16,15,0) 70%); --pv-sc-mid: linear-gradient(to bottom, rgba(8,16,15,0) 0%, rgba(8,16,15,.52) 24%, rgba(8,16,15,.80) 50%, rgba(8,16,15,.52) 76%, rgba(8,16,15,0) 100%); --pv-sc-left: linear-gradient(to right, rgba(8,16,15,.78) 0%, rgba(8,16,15,.48) 28%, rgba(8,16,15,.10) 56%, rgba(8,16,15,0) 72%); --pv-sc-right: linear-gradient(to left, rgba(8,16,15,.78) 0%, rgba(8,16,15,.48) 28%, rgba(8,16,15,.10) 56%, rgba(8,16,15,0) 72%); /* Ritmo verticale delle sezioni. Deliberatamente disuguale. */ --pv-rhythm-tight: clamp(56px, 8vh, 88px); --pv-rhythm-base: clamp(88px, 13vh, 152px); --pv-rhythm-wide: clamp(120px, 19vh, 216px); /* Tipografia — scala fluida, tutto da DESIGN.md */ /* Scala accorciata in cima. Misurato a 1500px: il titolo dell'accesso stava a 64,5px contro un testo da 17 — un salto di 3,8x, che si legge come due elementi che non si parlano. Titoli giu' e testi su, cosi' i rapporti scendono a 3,4x sull'accesso e 2,3x sulle sezioni (erano 2,5). I gradini intermedi non si toccano: H2->H3->corpo erano gia' 1,63 e 1,71, cioe' giusti. */ --pv-display: clamp(2.4rem, 1.3rem + 3.6vw, 3.95rem); --pv-display-s: clamp(1.9rem, 1.1rem + 3vw, 3.2rem); --pv-h2: clamp(1.7rem, 1.1rem + 2.2vw, 2.45rem); --pv-h3: clamp(1.25rem, 1rem + .9vw, 1.65rem); --pv-kicker: 10.5px; /* Larghezza a cui è impaginata la riproduzione dell'editor: deve reggere le 11 colonne CON il pannello assistente aperto (296px). Sotto questa, la tabella si spacca. Il riquadro viene poi rimpicciolito per stare nel contenitore. */ --pv-ide-ref: 1180px; /* Riduzione minima: sotto questa il testo dell'editor (12,5px) scende sotto i 9px e l'interfaccia smette di essere leggibile. Da lì in poi si scorre invece di rimpicciolire. */ --pv-ide-min: 1; /* Una sola durata per il morph della nav: dieci proprietà su una curva sola si leggono come un movimento, su dieci curve come dieci. */ --pv-dur: 520ms; /* Il rosso mattone di DESIGN.md, nelle due varianti per fondo scuro: bordo del campo in errore e inchiostro del messaggio. */ --pv-err: #d98a7f; --pv-err-ink: #e0a49a; /* Superfici della barra: stesso colore, due opacità, così la transizione fra barra e pill non passa mai per una tinta diversa. */ --pv-bar-off: rgba(12, 22, 20, 0); --pv-pill-off: rgba(18, 33, 31, 0); --pv-pill-on: rgba(18, 33, 31, .82); --pv-field: rgba(18, 33, 31, .7); /* Ombre: base nera come DESIGN.md sul tema scuro, offset + blur morbido, mai alone. */ --pv-shadow-pill: 0 10px 34px -14px rgba(0, 0, 0, .62); --pv-shadow-lift: 0 40px 90px -50px rgba(0, 0, 0, .9); --pv-shadow-agent: -8px 0 24px -12px rgba(0, 0, 0, .28); --pv-z-rail: 40; --pv-z-nav: 500; } /* ═══════════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════════ */ html:has(body.pv-page) { height: auto; overflow-y: auto; overflow-x: clip; /* mai hidden: rompe position:sticky (gate 34) */ /* NIENTE scroll-behavior: smooth. Insieme a scroll-snap-type sullo stesso elemento è un incastro: quando l'aggancio scatta, il browser anima lo scroll verso il fermo mentre la rotella lo sta ancora spingendo, e le due animazioni si contendono la stessa posizione. Lo scorrimento morbido lo gestisce il JS, che è anche l'unico a sapere dove sono i fermi. Gli spostamenti animati si chiedono caso per caso. */ } body.pv-page { height: auto; min-height: 100vh; overflow-x: clip; overflow-y: visible; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .pv-page *, .pv-page *::before, .pv-page *::after { box-sizing: border-box; } .pv-page h1, .pv-page h2, .pv-page h3 { font-family: var(--font-serif); font-weight: 400; font-style: normal; /* mai corsivo nei titoli */ letter-spacing: -0.015em; line-height: 1.08; overflow-wrap: anywhere; min-width: 0; margin: 0; } .pv-page p { margin: 0; } .pv-page ol, .pv-page ul { margin: 0; padding: 0; list-style: none; } /* ── IL RITMO DEL BLOCCO DI TESTA ───────────────────────────────── I due reset qui sopra azzerano i margini di titoli e paragrafi con specificita' (0,1,1) — classe + elemento. Ogni `margin-block-start` scritto piu' avanti su `.pv-head__h`, `.pv-head__t`, `.pv-access__h`, `.pv-access__t` e `.pv-app__cap` sta a (0,1,0) e NON HA MAI FATTO NULLA: fra il numero di tavola e il suo titolo c'erano zero pixel, misurati. Un margine che non si applica non da' errore, non si vede nel foglio e si scopre solo misurando il rettangolo renderizzato. Qui il ritmo si dichiara una volta sola, con la specificita' che serve (0,2,0), e i valori sono scelti — non ereditati per caso. */ .pv-page .pv-head__h, .pv-page .pv-access__h { margin-block-start: 18px; } /* il cartiglio e il titolo sono un blocco solo */ .pv-page .pv-head__t { margin-block-start: 14px; } /* titolo e lede sono un pensiero solo */ .pv-page .pv-access__t { margin-block-start: 20px; } .pv-page .pv-app__cap { margin-block-start: var(--pv-s-sm); } .pv-page :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); /* il ring non si anima mai: deve comparire istantaneo */ } .pv-night-surface :focus-visible { outline-color: var(--pv-green-night); } .pv-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--primary); color: var(--primary-ink); padding: 10px 16px; border-radius: var(--r-sm); font-size: 14px; text-decoration: none; } .pv-skip:focus { left: var(--pv-s-xs); top: var(--pv-s-xs); } .pv-shell { width: 100%; max-width: var(--pv-page); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } /* La gabbia stretta e' sparita. Serviva a non abbandonare mezzo schermo accanto a un elenco di domande e a un modulo di due campi, ma restringeva anche il MARGINE SINISTRO: da quando ogni sezione e' una tavola numerata appesa alla stessa quota verticale, un cartiglio che rientra di 170px spezza la spina che tiene insieme la serie. La misura di riga adesso la danno i singoli blocchi di testo (max-width in ch), che e' il posto giusto: e' una proprieta' del testo, non del contenitore. */ /* ── LA QUOTA DI MARGINE ────────────────────────────────────────── Ogni sezione della seconda meta' porta, nel margine sinistro, la quota che la misura in altezza: filetto con tacche alle estremita', come la catena laterale di una tavola. E' quello che trasforma quattro riquadri impilati in un disegno — texture continua senza inventare contenuto. Vive nel canale della gabbia, quindi non tocca il testo; sotto i 64rem quel canale non c'e' piu' e sparisce invece di stringersi addosso. Tre gradienti in un elemento solo perche' uno pseudo-elemento non puo' avere pseudo-elementi propri, e non vale un div per un filetto. */ .pv-app, .pv-out, .pv-faq, .pv-access { position: relative; } /* Il contenitore delle quattro tavole: esiste solo per dare alla catena di quota un corpo unico su cui misurarsi. */ .pv-tavole { position: relative; } .pv-quotaV { display: none; } @media (min-width: 64rem) { .pv-quotaV { display: block; position: absolute; inset-block: var(--pv-rhythm-tight); inset-inline-start: var(--pv-quota-x); width: 9px; pointer-events: none; /* Sopra le sezioni: sono fratelli posizionati e senza questo la attraverserebbero coprendola. */ z-index: 3; /* UNA catena per quattro tavole significa una linea che attraversa la notte, la carta e lo smeraldo. Quindi non puo' piu' prendere il colore dalla sezione: serve un oro solo, di mezzo fra le due varianti di DESIGN.md (#7d7048 chiaro, #c2b183 scuro), abbastanza saturo da leggersi sulla carta e abbastanza chiaro da accendersi sul nero. Stessa ragione per la traccia spenta: una sabbia trasparente si posa sia sul chiaro sia sullo scuro senza sparire in nessuno dei due. */ --luce: #ab9663; --q: rgba(145, 133, 90, .34); background: linear-gradient(var(--q), var(--q)) 4px 0 / 1px 100% no-repeat, linear-gradient(var(--q), var(--q)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--q), var(--q)) 0 100% / 9px 1px no-repeat; } /* IL RIEMPIMENTO. La quota si accende man mano che la si percorre: la percentuale la scrive il JS in --avanzamento. Si anima `transform`, non `height` — una scala su un elemento di 1px la fa il compositor, un'altezza che cambia a ogni fotogramma no (DESIGN.md: solo transform e opacity). */ .pv-quotaV::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 3.5px; /* 2px contro l'1px della quota spenta: il tratto percorso si distingue per spessore prima ancora che per luce, quindi si legge anche dove un bagliore non puo' funzionare — cioe' sulla carta chiara. */ width: 2px; height: 100%; transform-origin: top; transform: scaleY(var(--avanzamento, 0)); background: linear-gradient(to bottom, color-mix(in srgb, var(--luce) 30%, transparent) 0%, var(--luce) 22%, var(--luce) 100%); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--luce) 78%, transparent), 0 0 22px 4px color-mix(in srgb, var(--luce) 34%, transparent); } /* LA LUCCIOLA: la testa del riempimento. Un pallino che scende con lo scroll, con due aloni — uno stretto e caldo, uno largo e tenue. */ .pv-quotaV::after { content: ""; position: absolute; inset-inline-start: -1px; inset-block-start: calc(var(--avanzamento, 0) * 100%); width: 11px; height: 11px; margin-block-start: -5px; border-radius: 50%; /* Il nucleo e' piu' chiaro del colore della luce: una sorgente ha sempre il centro piu' bianco del suo alone, ed e' quello che la fa leggere come accesa invece che come un pallino colorato. */ background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--luce) 30%, #fff) 0%, var(--luce) 58%, color-mix(in srgb, var(--luce) 88%, transparent) 100%); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--luce) 92%, transparent), 0 0 34px 9px color-mix(in srgb, var(--luce) 55%, transparent), 0 0 68px 22px color-mix(in srgb, var(--luce) 28%, transparent); /* Si accende solo mentre la sezione e' attraversata: una lucciola ferma a fondo corsa su ogni sezione della pagina sarebbe una decorazione, non un indicatore. */ opacity: var(--acceso, 0); transition: opacity 420ms var(--ease); } } @media (prefers-reduced-motion: reduce) { .pv-quotaV::before { transform: scaleY(1); } .pv-quotaV::after { display: none; } } /* Linea di quota: la firma grafica del progetto. Tacche alle estremità. */ .pv-quota { display: block; height: 1px; background: var(--hairline); position: relative; border: 0; margin: 0; } .pv-quota::before, .pv-quota::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--hairline); } .pv-quota::before { left: 0; } .pv-quota::after { right: 0; } /* ═══════════════════════════════════════════════════════════════════ N10 · NAV CHE SI TRASFORMA IN PILL Un solo DOM, due modi visivi, una sola curva. Le quattro leggi: altezza costante · offset in transform · cross-fade di ogni proprietà condivisa · una sola durata. ═══════════════════════════════════════════════════════════════════ */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--pv-z-nav); padding-block: 0; background-color: var(--pv-bar-off); border-block-end: 1px solid transparent; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: padding-block var(--pv-dur, 520ms) var(--ease), background-color var(--pv-dur, 520ms) var(--ease), border-block-end-color var(--pv-dur, 520ms) var(--ease), -webkit-backdrop-filter var(--pv-dur, 520ms) var(--ease), backdrop-filter var(--pv-dur, 520ms) var(--ease); } .nav__inner { display: flex; align-items: center; gap: var(--pv-s-sm); width: 100%; max-width: var(--pv-page); min-height: var(--pv-nav-h); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); padding-block: 0; border-radius: 0; background-color: var(--pv-pill-off); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); box-shadow: none; transform: translateY(0); transition: max-width var(--pv-dur, 520ms) var(--ease), min-height var(--pv-dur, 520ms) var(--ease), padding-inline var(--pv-dur, 520ms) var(--ease), border-radius var(--pv-dur, 520ms) var(--ease), background-color var(--pv-dur, 520ms) var(--ease), -webkit-backdrop-filter var(--pv-dur, 520ms) var(--ease), backdrop-filter var(--pv-dur, 520ms) var(--ease), box-shadow var(--pv-dur, 520ms) var(--ease), transform var(--pv-dur, 520ms) var(--ease); } /* Legge 1 — l'altezza totale non cambia mai: quello che l'inner perde in min-height, l'outer lo riprende in padding-block. 60 = 52 + 2·4. */ .nav.is-floating { padding-block: var(--pv-s-3xs); } .nav.is-floating .nav__inner { max-width: 60rem; min-height: 52px; padding-inline: var(--pv-s-sm); border-radius: 999px; background-color: var(--pv-pill-on); -webkit-backdrop-filter: saturate(1.35) blur(18px); backdrop-filter: saturate(1.35) blur(18px); box-shadow: var(--pv-shadow-pill), 0 0 0 1px var(--pv-hairline-night-2) inset; transform: translateY(10px); /* Legge 2 — mai padding/margin */ } .nav__mark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 18px; letter-spacing: -0.01em; color: var(--pv-on-night); text-decoration: none; white-space: nowrap; } .nav__mark svg { flex: none; opacity: .82; } /* Il logotipo resta pieno: l'opacita' .82 serviva a smorzare un'icona di contorno accanto al testo, ma qui il logotipo E' il testo — sbiadirlo lo farebbe leggere come disattivato. */ .nav__mark .logotipo-metriq { flex: none; height: 23px; } .nav__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--pv-s-2xs); } .nav__link { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--pv-on-night-2); padding: 10px 12px; border-radius: var(--r-sm); white-space: nowrap; /* mai testo cliccabile su due righe (gate 49) */ transition: color 160ms var(--ease); } .nav__link:hover { color: var(--pv-on-night); } /* Interruttore del tema sulla barra: pastiglia tonda, stessa famiglia dei controlli della nav. Mostra l'ICONA DELLA DESTINAZIONE, non dello stato corrente — un bottone dice cosa fa, non dove sei. */ .nav__tema { appearance: none; -webkit-appearance: none; cursor: pointer; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--pv-hairline-night); background: none; color: var(--pv-on-night-2); transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); } .nav__tema:hover { color: var(--pv-on-night); border-color: var(--pv-gold-night); transform: rotate(-18deg); } /* Niente regola generica `.nav__tema svg { display: block }`: con la sua specificita' (classe + elemento) batteva il `display: none` sull'icona non attiva, e si vedevano sole e luna sovrapposte. Il blocco lo mette direttamente lo stato visibile qui sotto. */ /* Col tema chiaro attivo si offre la luna; col tema scuro, il sole. */ .pv-tema__sole { display: none; } .pv-tema__luna { display: block; } :root[data-theme="dark"] .pv-tema__sole { display: block; } :root[data-theme="dark"] .pv-tema__luna { display: none; } .nav__cta { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--primary-ink); background: var(--primary); padding: 11px 18px; border-radius: 999px; white-space: nowrap; transition: background-color 160ms var(--ease), transform 160ms var(--ease); } .nav__cta:hover { background: var(--primary-h); transform: translateY(-1px); } .nav__cta:active { transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════ IL PADIGLIONE Stato di partenza = pila statica: sette fotografie con la loro didascalia, che funziona senza JS, senza video, con reduced-motion e sul telefono. Il modo scrubbato è un'aggiunta, e si accende solo quando il JS ha verificato che ha senso accenderlo. ═══════════════════════════════════════════════════════════════════ */ .pv { position: relative; background: var(--pv-night); color: var(--pv-on-night); } .pv-media { display: none; } .pv-beats { display: block; } .pv-beat { position: relative; padding-block: var(--pv-s-2xl) var(--pv-s-xl); } /* La prima stanza attacca subito sotto la barra: senza video la pagina deve poter dire cosa fa MetrIQ già alla prima schermata. */ .pv-beat--open { padding-block-start: calc(var(--pv-nav-h) + var(--pv-s-sm)); } .pv-beat__shot { display: block; width: 100%; object-fit: cover; margin-block-end: var(--pv-s-md); /* NON in 16/9 pieno: a 1440px sarebbero 810px di fotografia, cioè tutta la prima schermata, e il titolo finirebbe sotto la piega. La fotografia prende poco più di metà campo e lascia entrare il testo. */ height: min(52vh, 460px); } .pv-beat--open .pv-beat__shot { height: min(46vh, 420px); } .pv-beat__body { width: 100%; max-width: var(--pv-page); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } .pv-beat__room { font-family: var(--font-mono); font-size: var(--pv-kicker); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--pv-gold-night); margin-block-end: var(--pv-s-sm); } .pv-beat__h { font-size: var(--pv-display-s); color: var(--pv-on-night); max-width: 20ch; } .pv-beat__t { font-size: clamp(15px, .9rem + .25vw, 17px); line-height: 1.62; color: var(--pv-on-night-2); max-width: 46ch; } /* Il margine sta in una regola A PARTE, e non dentro quella qui sopra, per due motivi. Primo: a una sola classe (0,1,0) perdeva contro `.pv-page p { margin: 0 }` (0,1,1) — misurato, fra il titolo di stanza e la sua didascalia c'erano zero pixel dalla stanza 2 alla 7. La stanza 1 respirava perche' la sua regola `.pv-beat--open .pv-beat__t` ha due classi e il reset non la batte: una sola schermata su sette con l'aria giusta, che e' peggio di nessuna. Secondo: alzare la specificita' dell'INTERA regola avrebbe portato con se' anche `max-width: 46ch`, e sotto i 40rem c'e' `.pv-beat__t { max-width: none }` che avrebbe smesso di applicarsi — il testo sarebbe rimasto incolonnato sul telefono. Resta prima della regola dell'apertura: a pari specificita' vince l'ultima, quindi la stanza 1 tiene i suoi 28px. */ .pv-page .pv-beat__t { margin-block-start: var(--pv-s-sm); } /* — la prima schermata: l'unica che porta un H1 e una chiamata — */ .pv-beat--open .pv-beat__h { font-family: var(--font-serif); font-size: var(--pv-display); line-height: 1.04; max-width: 17ch; } .pv-beat--open .pv-beat__t { font-size: clamp(16px, .95rem + .3vw, 18.5px); max-width: 52ch; /* più aria sotto un display grande: a line-height 1,04 il sottotitolo appoggiato a 18px sembra incastrato sotto l'ultima riga */ margin-block-start: var(--pv-s-md); } .pv-open__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pv-s-sm); margin-block-start: var(--pv-s-md); } /* La CTA della landing e' piu' grande del controllo standard del software, e deve esserlo: --ctl-h (44px) e' la misura di un campo dentro uno strumento, dove i controlli sono tanti e devono stare zitti. Qui di controlli ce n'e' uno e chiede l'unica cosa che la pagina vuole. 52px con corpo 16 e un'ombra che lo stacca dal fondo — resta la stessa pastiglia emerald di DESIGN.md, solo alla scala giusta per questo contesto. */ .pv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border-radius: 999px; border: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer; background: var(--primary); color: var(--primary-ink); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .55); transition: background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease); } .pv-btn:hover { background: var(--primary-h); transform: translateY(-1px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .62); } .pv-btn:active { transform: translateY(0); } .pv-btn[disabled] { opacity: .45; pointer-events: none; } /* C3 · link tipografico — solo parola, freccia, filetto */ .pv-link { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--pv-on-night-2); padding-block-end: 3px; border-block-end: 1px solid var(--pv-hairline-night); transition: color 160ms var(--ease), border-color 160ms var(--ease); } .pv-link:hover { color: var(--pv-on-night); border-block-end-color: var(--pv-gold-night); } /* ───────────────────────────────────────────────────────────────── MODO SCRUBBATO — si accende solo con .pv-live sul ───────────────────────────────────────────────────────────────── */ .pv-live .pv { height: var(--pv-track); } /* Il palco è l'unico elemento con un'altezza vera; video e didascalie ci si agganciano con inset:0. Niente griglia sovrapposta e niente catena di height:100%: provata, e la riga della griglia non si fermava all'altezza del palco — le didascalie finivano impaginate su 1072px invece di 889 e scivolavano sotto il bordo dello schermo. Un contenitore posizionato e due figli assoluti non lasciano spazio all'interpretazione. */ .pv-live .pv-stage { position: sticky; inset-block-start: 0; height: 100svh; overflow: clip; } /* ── I fermi di lettura ────────────────────────────────────────── Non più `scroll-snap` del browser: l'aggancio CSS interviene mentre la rotella sta ancora spingendo e i due si contendono la posizione — è lo stuttering che si sente proprio sui checkpoint. Ora i fermi sono solo marcatori di posizione: se ne occupa il JS, che sa anche quando la mano si è fermata e quindi non contrasta mai nessuno. */ .pv-stop { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; } .pv-live .pv-media { display: block; position: absolute; inset: 0; } .pv-video { display: block; width: 100%; height: 100%; object-fit: cover; /* il video parte già dentro la stanza giusta: nessuna barra nera */ background: var(--pv-night); } /* Assoluto sopra il video: senza posizionamento finisce in flusso SOTTO il video, con altezza zero, e il testo resta a fondo perduto sulle stanze avorio. */ .pv-veil { position: absolute; inset: 0; pointer-events: none; background: var(--pv-veil); } .pv-live .pv-beats { position: absolute; inset: 0; } .pv-live .pv-beat { position: absolute; inset: 0; /* La didascalia resta dentro la stessa colonna del resto della pagina, non incollata al bordo dello schermo. */ max-width: var(--pv-page); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); padding-block: calc(var(--pv-nav-h) + var(--pv-s-lg)) clamp(56px, 11vh, 116px); display: grid; align-content: end; justify-items: start; /* Contesto di impilamento sempre presente: senza, il velo a z-index -1 scapperebbe dietro al video quando l'opacità del blocco tocca 1 (a opacity:1 il contesto non si crea da solo). */ isolation: isolate; opacity: 0; pointer-events: none; /* nessuna transizione qui: l'opacità la guida lo scroll, fotogramma per fotogramma. Una transition la farebbe inseguire. Niente visibility:hidden sul blocco: il testo di TUTTE le stanze deve restare leggibile a uno screen reader, che non scorre per fotogrammi. A sparire dall'ordine di tabulazione sono solo i comandi. */ } .pv-live .pv-beat.is-on { pointer-events: auto; } .pv-live .pv-beat:not(.is-on) a, .pv-live .pv-beat:not(.is-on) button { visibility: hidden; } .pv-live .pv-beat__shot { display: none; } /* Il velo della singola didascalia. Si allarga a tutto il viewport anche se il blocco è contenuto nella colonna, e sfuma con la didascalia perché ne eredita l'opacità. */ .pv-live .pv-beat::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; pointer-events: none; background: var(--pv-sc-v, var(--pv-sc-bottom)), var(--pv-sc-h, var(--pv-sc-left)); } /* ── dove sta la didascalia ────────────────────────────────────── Scelta stanza per stanza sul fotogramma di sosta, cercando dove l'immagine è scura e vuota. Non ruota per gusto: nell'archivio e nella sala di organizzazione il basso a sinistra è l'unico punto che tiene, e spostarle altrove costerebbe leggibilità. */ /* L'apertura sta piu' in alto delle altre stanze: sotto di lei, al centro, c'e' l'invito a scorrere, e i due non devono contendersi la stessa fascia. Vale solo nel modo scrubbato — senza video la prima schermata e' una fotografia con il testo sotto, e li' non c'e' niente da scansare. */ .pv-live .pv-beat--open { padding-block-end: clamp(132px, 20vh, 190px); } .pv-live .pv-beat[data-pos^="t"] { align-content: start; --pv-sc-v: var(--pv-sc-top); } .pv-live .pv-beat[data-pos^="m"] { align-content: center; --pv-sc-v: var(--pv-sc-mid); } .pv-live .pv-beat[data-pos^="b"] { align-content: end; --pv-sc-v: var(--pv-sc-bottom); } /* Il blocco si sposta a destra, ma il testo resta allineato a sinistra: un paragrafo di tre righe allineato a destra si legge peggio. */ .pv-live .pv-beat[data-pos$="r"] { justify-items: end; --pv-sc-h: var(--pv-sc-right); } .pv-live .pv-beat[data-pos$="l"] { justify-items: start; --pv-sc-h: var(--pv-sc-left); } .pv-live .pv-beat__body { max-width: 46ch; margin-inline: 0; padding-inline: 0; } .pv-live .pv-beat--open .pv-beat__body { max-width: 54ch; } /* L'ultima stanza resta in basso a sinistra come tutte le altre. Provata centrata sulla veduta aerea — che è simmetrica e la reggerebbe — ma lì l'immagine è al suo punto più chiaro e il velo non arriva: il testo spariva. Photographic lo dice anche in astratto: la didascalia sta in un angolo, mai centrata. */ /* ───────────────────────────────────────────────────────────────── LA CATENA DI QUOTE — avanzamento come linea quotata, non come barra Sette tacche, una per stanza. Cliccabili. ───────────────────────────────────────────────────────────────── */ .pv-rail { display: none; } .pv-live .pv-rail { display: grid; position: fixed; inset-block-start: 50%; inset-inline-end: clamp(16px, 2.4vw, 34px); transform: translateY(-50%); z-index: var(--pv-z-rail); gap: 0; opacity: 0; transition: opacity 320ms var(--ease); } .pv-live .pv-rail.is-on { opacity: 1; } .pv-rail__tick { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 26px auto; align-items: center; gap: 10px; padding: 7px 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pv-on-night-3); text-align: start; transition: color 220ms var(--ease); } .pv-rail__tick::before { content: ""; height: 1px; background: var(--pv-hairline-night); transform: scaleX(.42); transform-origin: right center; transition: transform 320ms var(--ease), background-color 320ms var(--ease); } .pv-rail__tick:hover { color: var(--pv-on-night-2); } .pv-rail__tick:hover::before { transform: scaleX(.7); } .pv-rail__tick.is-here { color: var(--pv-on-night); } .pv-rail__tick.is-here::before { transform: scaleX(1); background: var(--pv-gold-night); } .pv-rail__label { white-space: nowrap; opacity: 0; transition: opacity 220ms var(--ease); } .pv-rail__tick.is-here .pv-rail__label, .pv-rail:hover .pv-rail__label { opacity: 1; } /* ── L'INVITO A SCORRERE ────────────────────────────────────────── Stava in basso a DESTRA, a 9,5px e nel grigio piu' tenue della pagina: era una nota a pie' di schermata, non un invito. Su una landing il cui contenuto e' tutto sotto la piega, e' l'unica istruzione che conta. Ora e' centrato in basso — dove l'occhio finisce la prima schermata — con la freccia SOTTO il testo, cosi' il gesto segue la lettura invece di precederla. Sparisce comunque al primo movimento: serve a partire, non a restare. */ .pv-scroll-hint { display: none; } .pv-live .pv-scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 9px; position: absolute; inset-block-end: clamp(24px, 4vh, 42px); inset-inline: 0; width: max-content; margin-inline: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--pv-on-night); /* Sta sopra il video, che sotto cambia luce stanza per stanza: l'alone scuro e' quello che lo tiene leggibile senza stendere un velo su tutta la schermata. */ text-shadow: 0 1px 12px rgba(8, 16, 15, .95), 0 0 34px rgba(8, 16, 15, .75); transition: opacity 320ms var(--ease); pointer-events: none; } .pv-scroll-hint__freccia { display: block; filter: drop-shadow(0 1px 10px rgba(8, 16, 15, .95)); animation: pv-scendi 2s var(--ease) infinite; } /* Solo transform e opacity, come vuole DESIGN.md: la discesa la fa il compositor e non costa un ricalcolo per fotogramma — sopra c'e' un video scrubbato, e li' ogni fotogramma e' gia' impegnato. */ @keyframes pv-scendi { 0%, 100% { transform: translateY(0); opacity: .5; } 45% { transform: translateY(7px); opacity: 1; } } .pv-live.pv-moved .pv-scroll-hint { opacity: 0; } @media (prefers-reduced-motion: reduce) { .pv-scroll-hint__freccia { animation: none; opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════ USCITA DAL PADIGLIONE → L'INTERFACCIA F5 · schermata annotata, etichette a margine. Nessuna finta barra del browser: la superficie è quella vera, disegnata dal foglio di stile del prodotto. ═══════════════════════════════════════════════════════════════════ */ .pv-app { position: relative; /* Attacca sul nero del padiglione — la giuntura non deve avere un gradino — e sale verso il verde mentre si scende: e' il momento in cui si esce dal buio della sala e si accende il banco di lavoro. */ background: linear-gradient(to bottom, var(--pv-night) 0%, var(--pv-night) 22%, var(--pv-deep) 100%); color: var(--pv-on-night); /* In coda basta il ritmo stretto: la sezione seguente apre gia' con il suo --pv-rhythm-base, e sommati facevano trecento pixel di nulla. */ padding-block: var(--pv-rhythm-wide) var(--pv-rhythm-tight); } /* la giuntura: il buio del padiglione si alza, la luce del prodotto entra */ .pv-app::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: clamp(80px, 12vh, 160px); background: linear-gradient(to bottom, var(--pv-night-2), transparent); pointer-events: none; } /* La griglia dell'editor non regge sotto ~900px: le righe usano colspan, e togliere colonne disallinea tutto. Invece di deformarla, la riproduzione è sempre impaginata su una larghezza di riferimento fissa (--pv-ide-ref) e rimpicciolita in proporzione per stare nel contenitore. Il fattore lo calcola il JS sulla larghezza reale del contenitore, non del viewport. */ .pv-app__fit { /* Sotto una certa soglia rimpicciolire ancora non mostra l'interfaccia: la cancella. Da lì in poi il riquadro si scorre di lato — dentro di sé, mai la pagina (il body resta inchiodato). */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--pv-hairline-night); border-radius: var(--r-md); background: var(--surface); /* Col tema scuro la superficie dell'editor e' scura quanto la notte attorno: senza un anello di stacco il riquadro non si legge come un oggetto appoggiato sopra, ma come un buco nella pagina. */ box-shadow: var(--pv-shadow-lift), 0 0 0 1px var(--pv-hairline-night-2), 0 0 60px -20px rgba(0, 0, 0, .8); } .pv-ide { width: var(--pv-ide-ref, 1180px); zoom: var(--pv-ide-zoom, 1); display: flex; flex-direction: column; /* Piu' alto da quando la schermata si prova: la conversazione e' meta' della dimostrazione, e in 560px restava schiacciata in una scatolina con la barra di scorrimento — il momento in cui MetrIQ chiede invece di indovinare non deve arrivare dentro una fessura. */ height: min(78vh, 720px); background: var(--surface); /* La sezione e' una banda notturna e detta `color: var(--pv-on-night)`. Le celle dell'editor (.ce-th, .ce-td…) non dichiarano un colore proprio: ereditavano quindi l'inchiostro della notte, quasi bianco, e col tema chiaro finivano bianche su carta. Dentro il riquadro comanda l'inchiostro del prodotto, non quello della banda. */ color: var(--ink); } /* Il pannello dell'assistente e' piu' largo qui che nell'app: qui e' lui il protagonista, non una barra laterale di servizio. */ .pv-ide__agent { width: min(34%, 340px); } .pv-ide__body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; } /* La tabella cresce quando l'assistente aggiunge una voce: con `overflow: hidden` le righe nuove finivano semplicemente tagliate fuori dal riquadro, cioe' la dimostrazione non si vedeva. NIENTE `overscroll-behavior: contain` qui, per quanto sembri l'istinto giusto: e' ridondante — il gestore della rotella in landing-v2.js gia' cede l'evento all'area finche' ha strada — ed e' una trappola nel ripiego. Misurato: con `contain`, arrivati a fondo corsa e col padiglione non attivo, la pagina non riparte piu' finche' non si sposta il puntatore fuori dal riquadro. L'aggancio nativo deve restare. */ .pv-ide__tw { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; } /* Nel riquadro c'è meno spazio che nell'app: senza questo «1.273,13» si spezza in due righe e «unitario €» / «TOTALE €» si toccano. */ .pv-ide .ce-th-num, .pv-ide .ce-td-num { white-space: nowrap; } .pv-ide .ce-th-num { min-width: 64px; padding-inline: 10px; } .pv-ide .ce-th:nth-child(9), .pv-ide .ce-th:nth-child(10) { min-width: 92px; } .pv-ide .ce-th-desc { width: 34%; } /* Pannello assistente: a 340px la colonna TOTALE € finisce sotto quella accanto (è un difetto dell'editor, riprodurlo in vetrina non ha senso). */ .pv-ide__agent { flex: none; width: min(30%, 296px); display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-inline-start: 1px solid var(--hairline); background: var(--raised); } .pv-ide__agent-h { font-family: var(--font-serif); font-size: 15px; color: var(--ink); } .pv-ide__agent-p { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); padding-block-end: 8px; border-block-end: 1px solid var(--hairline-2); } .pv-ide__agent .ce-agent-msg { font-size: 12.5px; } /* ── IL BANCO DI PROVA ──────────────────────────────────────────── La conversazione scorre, le opzioni restano ancorate in basso: chi arriva deve vedere subito che c'e' qualcosa da toccare, senza cercarlo. */ .pv-ide__chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; /* All'apertura c'e' un messaggio solo: allineato in alto lasciava mezzo pannello vuoto sopra il campo di scrittura, che nessuna conversazione vera fa. `safe` e' obbligatorio — con `flex-end` secco, quando i messaggi superano l'altezza, i primi finiscono fuori dall'area scorrevole e diventano irraggiungibili. */ justify-content: safe flex-end; padding-block-end: 4px; scroll-behavior: smooth; } /* All'assistente si SCRIVE. I suggerimenti stanno sopra il campo e lo RIEMPIONO invece di inviare: restano un aiuto a partire per chi non sa cosa chiedere, non un menù che prende il posto della conversazione. Una landing che promette un agente conversazionale e poi fa cliccare bottoni racconta un prodotto diverso da quello che vende. */ .pv-ide__suggerimenti { flex: none; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-block: 10px 8px; border-block-start: 1px solid var(--hairline-2); } .pv-sugg__eti { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); width: 100%; margin-block-end: 2px; } .pv-sugg { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: var(--font-sans); font-size: 11.5px; line-height: 1.3; color: var(--ink-2); background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 10px; transition: color 160ms var(--ease), border-color 160ms var(--ease); } .pv-sugg:hover { color: var(--ink); border-color: var(--gold-ink); } .pv-ide__scrivi { flex: none; display: flex; gap: 6px; align-items: stretch; } .pv-ide__input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink); background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r-sm); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); } .pv-ide__input::placeholder { color: var(--ink-3); } .pv-ide__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); } .pv-ide__invia { flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--primary-ink); background: var(--primary); border: 0; border-radius: var(--r-sm); transition: background-color 160ms var(--ease), transform 160ms var(--ease); } .pv-ide__invia:hover { background: var(--primary-h); transform: translateY(-1px); } .pv-ide__invia:active { transform: translateY(0); } /* Mentre l'assistente scrive il campo si spegne: si vede che sta lavorando, invece di ingoiare in silenzio quello che scrivi. */ .pv-ide__scrivi.is-occupato .pv-ide__input { opacity: .55; } .pv-ide__scrivi.is-occupato .pv-ide__invia { opacity: .4; pointer-events: none; } .pv-ide__input:disabled { cursor: default; } .pv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* «Sta scrivendo»: tre punti che respirano. E' l'unico momento animato del demo — il resto e' il computo che cambia, e quello deve restare il protagonista. */ .pv-pensa { display: flex; gap: 5px; align-items: center; width: fit-content; } .pv-pensa i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: pv-respira 1.1s var(--ease) infinite; } .pv-pensa i:nth-child(2) { animation-delay: .16s; } .pv-pensa i:nth-child(3) { animation-delay: .32s; } @keyframes pv-respira { 0%,100% { opacity: .28; } 50% { opacity: 1; } } /* Il lampo va SOLO sulle celle il cui valore e' davvero cambiato: e' la differenza fra dimostrare un ricalcolo e fare un effetto. */ .pv-cambiato { animation: pv-lampo 1500ms var(--ease) 1; } @keyframes pv-lampo { 0% { background: color-mix(in srgb, var(--gold-ink) 34%, transparent); } 100% { background: transparent; } } .pv-riga--nuova td { animation: pv-lampo 1800ms var(--ease) 1; } .pv-ide__solo-desktop { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .pv-pensa i { animation: none; opacity: .6; } .pv-cambiato, .pv-riga--nuova td { animation-duration: 1ms; } } /* È una riproduzione, non l'app: i controlli non si cliccano */ .pv-ide__btn { cursor: default; user-select: none; } .pv-ide__foot { flex: none; font-family: var(--font-sans); font-size: 11px; line-height: 1.5; color: var(--ink-3); padding: 9px 16px; border-block-start: 1px solid var(--hairline-2); background: var(--surface); } /* La riga su cui verte la domanda dell'assistente, marcata in oro */ .pv-ide__ask td { background: color-mix(in srgb, var(--gold-ink) 12%, transparent); } /* ── LA GRAMMATICA DELLA SECONDA META' ──────────────────────────── Il padiglione e' cinema; questa meta' e' il TAVOLO DA DISEGNO. Non e' una decorazione scelta a gusto: DESIGN.md ha due firme visive — la carta millimetrata («SOLO su superfici di lavoro/misura») e la linea di quota — e questa meta' e' esattamente la superficie di misura. Finora non ne usavo nessuna delle due. Sparisce anche il kicker mono che stava sopra OGNI sezione: sei etichette uguali non sono un sistema, sono una grammatica subita. Al suo posto l'etichetta siede su una linea di quota che corre fino al bordo della colonna — come una quota siede sulla sua catena. */ /* ── IL CARTIGLIO ───────────────────────────────────────────────── La testa di sezione smette di essere «etichetta + titolo» e diventa il cartiglio di una tavola: numero di tavola a sinistra, denominazione, catena di quota che corre fino al bordo della colonna. Il numero e' anche il PICCO DI SCALA che mancava: sotto il padiglione l'elemento piu' grande era un titolo da 43px, cioe' la gerarchia di un articolo. Un numerale da 90px lo alza senza gonfiare un titolo — e in una serie di tavole i numeri che si ripetono sono il sistema, non rumore. Sta in mono e in oro perche' DESIGN.md assegna l'oro al «gesto della misura»: questo lo e'. */ .pv-page { counter-reset: tavola; } .pv-head { margin-block-end: var(--pv-s-lg); } .pv-head__label { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: var(--pv-kicker); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; /* --ink-3 sarebbe l'inchiostro "giusto" per un'etichetta, ma su carta si ferma a 3,37:1 (2,79 sul fondo sabbia) e questa e' mono da 10,5px, cioe' testo piccolo. Vale per tutto il sistema, non solo qui: vedi la nota nel blocco token. */ color: var(--ink-2); } /* Il numero di tavola. `counter` invece di scriverlo nel markup: rinumerare a mano quattro sezioni ogni volta che se ne sposta una e' un errore che aspetta solo di succedere. */ .pv-head__label::before { counter-increment: tavola; content: counter(tavola, decimal-leading-zero); flex: none; /* Scende con il titolo: a 92px contro un H2 di 36,8 il numero dominava la tavola invece di numerarla. A 80 il rapporto e' 2,17 — lo stesso che corre fra H2 e lede, quindi la testa della sezione ha un ritmo solo. */ font-size: clamp(48px, 6.1vw, 80px); line-height: .82; letter-spacing: -.02em; font-weight: 400; /* A meno di questa densita' non legge come un numerale ma come una macchia sul foglio: e' un elemento del cartiglio, non una filigrana. */ color: color-mix(in srgb, var(--gold-ink) 46%, transparent); font-variant-numeric: tabular-nums; /* Niente margini negativi: sbilanciavano la scatola e la catena di quota finiva sopra l'occhio della cifra invece che al suo centro. */ } .pv-head__label i { flex: 1 1 auto; position: relative; height: 1px; background: var(--hairline); } /* Le tacche di estremita': è quello che distingue una linea di quota da un filetto qualsiasi. */ .pv-head__label i::before, .pv-head__label i::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--hairline); } .pv-head__label i::before { left: 0; } .pv-head__label i::after { right: 0; } .pv-head__h { font-size: var(--pv-h2); color: var(--ink); max-width: 22ch; margin-block-start: var(--pv-s-md); /* piu' aria SOPRA il titolo che sotto */ } .pv-head__t { font-size: 17px; line-height: 1.62; /* un gradino su: avvicina il lede al suo titolo */ color: var(--ink-2); max-width: 58ch; margin-block-start: var(--pv-s-xs); } /* Sulle bande notturne la stessa grammatica cambia solo inchiostro. */ .pv-night-surface .pv-head__label { color: var(--pv-on-night-3); } /* Sul campo smeraldo il terziario si ferma a 2,55:1 e il secondario a 3,82, perche' sopra la banda corre un velo bianco al 7% che schiarisce proprio la fascia dove sta l'etichetta — il fondo reale li' e' #325746, non #1b4b3f. (L'ho scoperto campionando i pixel disegnati: sul valore del token il conto tornava, ed era sbagliato.) Scurire lo smeraldo fino a far passare il terziario vorrebbe dire portarlo a #0b1f1a, cioe' buttare via il solo momento cromatico della pagina. La sabbia del marchio ci arriva senza toccare nulla: 5,04:1. */ .pv-faq .pv-head__label { color: var(--pv-sand); } .pv-night-surface .pv-head__label::before { color: color-mix(in srgb, var(--pv-gold-night) 26%, transparent); } .pv-night-surface .pv-head__label i, .pv-night-surface .pv-head__label i::before, .pv-night-surface .pv-head__label i::after { background: var(--pv-hairline-night); } .pv-night-surface .pv-head__h { color: var(--pv-on-night); } .pv-night-surface .pv-head__t { color: var(--pv-on-night-2); } /* ── Note a margine dell'interfaccia ────────────────────────────── Non piu' tre colonne uguali con tre etichette uguali: era il contenitore pigro, e l'oro ripetuto tre volte contraddiceva la regola di DESIGN.md («ogni schermata ha al massimo un gesto d'oro pieno»). Larghezze disuguali, appese alla stessa linea di quota. */ .pv-app__notes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--pv-s-lg); margin-block-start: var(--pv-s-lg); counter-reset: nota; } /* Tre note appese a tre quote affiancate, ognuna con la sua sigla: la stessa grammatica delle uscite della consegna, cosi' e' un sistema e non un trattamento inventato una volta sola. */ .pv-app__note { position: relative; padding-block-start: var(--pv-s-md); border-block-start: 1px solid var(--pv-hairline-night); } .pv-app__note::before { counter-increment: nota; content: counter(tavola, decimal-leading-zero) "." counter(nota); position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: translateY(-50%); padding-inline-end: 12px; background: var(--pv-deep); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--pv-gold-night); } .pv-app__note::after { content: ""; position: absolute; inset-block-start: -3px; inset-inline-end: 0; width: 1px; height: 7px; background: var(--pv-gold-night); } /* Il titolo della nota era PIU' PICCOLO del suo testo: la gerarchia al contrario, tre volte di fila. */ .pv-app__note dt { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--pv-on-night); margin-block-end: 6px; } .pv-app__note dd { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--pv-on-night-2); } /* Niente max-width sul blocco: la linea di quota deve correre per tutta la colonna, come in ogni altra sezione. Due lunghezze diverse dello stesso elemento sembrano un caso, non un sistema. Il testo lo si limita da se'. L'intestazione sta SOPRA il riquadro (invito, poi cosa si prova), quindi il margine grosso va sotto, non sopra: la sezione ha gia' il suo respiro dal ritmo di pagina, e --pv-s-xl in cima la faceva galleggiare mentre l'invito restava incollato alla cosa a cui invita. `.pv-head` non ci arriva — il contenitore qui e' `.pv-app__head`. */ .pv-app__head { margin-block-end: var(--pv-s-xl); } /* Il lede e' l'unica istruzione della sezione: se non si legge da un metro, il visitatore non sa che deve scrivere. Un gradino piu' luminoso e un corpo piu' grande del testo corrente delle altre sezioni. */ .pv-app__head .pv-head__t { font-size: 17px; max-width: 66ch; /* e' il lede piu' lungo della pagina: a 58ch cadeva su cinque righe */ color: color-mix(in srgb, var(--pv-on-night) 64%, var(--pv-on-night-2)); } /* L'azione da compiere, in verde: l'oro di questa schermata e' gia' speso dal bottone «Esporta» dentro l'editor (un gesto pieno per schermata). */ .pv-azione { font-weight: 600; color: var(--pv-green-night); } /* La didascalia e' una nota a margine del riquadro, non un paragrafo a se': appesa al suo filetto, come una quota alla catena. Portava anche l'informazione piu' delicata della sezione (le risposte sono preparate) al grado di grigio meno leggibile della pagina. */ .pv-app__cap { font-family: var(--font-mono); font-size: 11px; line-height: 1.62; color: var(--pv-on-night-2); margin-block-start: var(--pv-s-sm); padding-inline-start: 14px; border-inline-start: 1px solid var(--pv-hairline-night); max-width: 96ch; /* il mono a 11px sta stretto: a 62ch la nota diventava un blocchetto di tre righe mozze */ } /* La mini-CTA dopo la prova. Non un bottone: il bottone pieno e' gia' speso nell'apertura e nell'accesso, e ripeterlo qui farebbe tre gesti uguali in una pagina che per il resto sussurra. Link + freccia e' la grammatica con cui il software chiede di agire (.computi-workflow-btn), quindi qui fa due cose insieme: colma il buco di conversione e anticipa il prodotto. */ .pv-app__ora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-block-start: var(--pv-s-lg); padding-block-start: var(--pv-s-md); border-block-start: 1px solid var(--pv-hairline-night); font-size: 15px; color: var(--pv-on-night-2); } .pv-azione-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--pv-green-night); /* = --accent-soft: l'emerald su scuro del software */ text-decoration: none; } .pv-azione-link i { font-style: normal; transition: transform 220ms var(--ease); } .pv-azione-link:hover i { transform: translateX(4px); } /* ═══════════════════════════════════════════════════════════════════ F3 · COSA TI CONSEGNA — l'elenco tecnico Non una tabella qualsiasi: un ELENCO DI CONSEGNA, con la sua riga di intestazione. Quella riga e' l'unica etichetta maiuscola che si e' guadagnata il posto, perche' nomina delle colonne — cioe' porta informazione, non tono. ═══════════════════════════════════════════════════════════════════ */ .pv-out { position: relative; /* --bg, non --surface: la tela del software e' la sabbia, e questa e' la sezione in cui la landing deve gia' assomigliare a dove stai per entrare. `--surface` (quasi bianco) nel prodotto non esiste come fondo di pagina, solo come pannello — usarlo qui era un colore fuori dal sistema. */ background: var(--bg); padding-block: var(--pv-rhythm-base); border-block: 1px solid var(--hairline-2); } /* La carta millimetrata: la firma che DESIGN.md riserva alle superfici di lavoro/misura, e questa e' il foglio del computo. I gradienti NON si riscrivono qui — la classe `.paper-grid` di web/style.css possiede gia' il motivo (8px + 40px con velo oro), e duplicarlo sarebbe una seconda verita' da tenere allineata. Qui resta solo la maschera, che e' l'unica cosa specifica di questa sezione: la carta sfuma prima dei bordi, perche' e' una superficie di lavoro e non una texture stesa sulla pagina. */ .pv-out__carta { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(120% 78% at 50% 46%, #000 42%, transparent 100%); mask-image: radial-gradient(120% 78% at 50% 46%, #000 42%, transparent 100%); } .pv-out > .pv-shell { position: relative; } /* Due colonne: a sinistra cosa esce, a destra la scena che lo mostra. L'elenco tecnico passa da tre colonne a una sola incolonnata — a meta' larghezza le tre colonne si sarebbero ridotte a tre strisce di parole spezzate, e la riga d'intestazione «Cosa esce / Cosa contiene / Formato» avrebbe nominato colonne che non esistono piu'. */ .pv-out__due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); gap: clamp(32px, 4.5vw, 68px); align-items: start; } .pv-out__fig { margin: 0; position: sticky; top: calc(var(--pv-nav-h) + var(--pv-s-md)); } .pv-out__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--hairline); box-shadow: var(--shadow-2); } /* La didascalia non e' appesa a un filetto qualunque: e' la quota che misura la scena, tacche alle estremita' comprese. E' anche quello che riempie la colonna destra senza inventare contenuto. */ .pv-out__fig figcaption { position: relative; margin-block-start: var(--pv-s-sm); padding-block-start: 15px; border-block-start: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; line-height: 1.62; color: var(--ink-2); } .pv-out__fig figcaption::before, .pv-out__fig figcaption::after { content: ""; position: absolute; inset-block-start: -3px; width: 1px; height: 7px; background: var(--gold-ink); } .pv-out__fig figcaption::before { inset-inline-start: 0; } .pv-out__fig figcaption::after { inset-inline-end: 0; } /* Ogni uscita e' una voce quotata: il filetto che la apre porta la sua sigla incassata, come una catena di quote porta la sua misura. La sigla e' `02.1`, `02.2`… — la prima cifra e' il numero di tavola, e viene dallo stesso contatore del cartiglio, quindi non puo' andare fuori sincrono. */ .pv-spec { margin-block-start: var(--pv-s-lg); counter-reset: voce; } .pv-spec__row { position: relative; padding-block: var(--pv-s-md); border-block-start: 1px solid var(--hairline); } .pv-spec__row::before { counter-increment: voce; content: counter(tavola, decimal-leading-zero) "." counter(voce); position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: translateY(-50%); padding-inline-end: 12px; /* Il fondo resta --surface anche ora che la sezione e' sabbia: la sigla diventa una targhetta appena piu' chiara incassata nel filetto — che e' come un numero di quota sta su una tavola — e l'oro ci recupera il contrasto (3,81:1 sulla sabbia, 4,59:1 qui). */ background: var(--surface); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--gold-ink); } /* La tacca di chiusura, all'estremita' opposta alla sigla: e' quello che distingue una quota da un filetto qualunque. A sinistra non puo' stare — la cifra ci si siede sopra e la copre — e comunque una catena porta la misura a un capo e la tacca all'altro. */ .pv-spec__row::after { content: ""; position: absolute; inset-block-start: -3px; inset-inline-end: 0; width: 1px; height: 7px; background: var(--gold-ink); } .pv-spec__row:last-child { border-block-end: 1px solid var(--hairline); } .pv-spec__k { font-family: var(--font-serif); font-size: var(--pv-h3); color: var(--ink); } .pv-spec__v { margin: 6px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); max-width: 46ch; } /* I formati stanno ora IN RIGA sotto la descrizione, non in una colonna propria: incolonnati verticalmente in mezza pagina diventavano una torre di tre parole sperduta. */ .pv-spec__u { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: var(--pv-s-xs) 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); /* misurato 2,97:1 con --ink-3 sulla carta millimetrata */ font-variant-numeric: tabular-nums; } /* L'UNICO gesto d'oro pieno di questa schermata, come vuole DESIGN.md: il formato principale di ogni consegna. */ .pv-spec__u b { font-weight: 500; color: var(--gold-ink); } /* ═══════════════════════════════════════════════════════════════════ DOMANDE — elenco di definizioni, nessun accordion ═══════════════════════════════════════════════════════════════════ */ /* Era il punto piu' cupo della pagina, e stava nel mezzo: la banda scendeva a --bg mentre sopra e sotto risalgono verso il verde, cioe' un avvallamento proprio dove il lettore deve fermarsi a leggere. Un velo di primario che entra dall'alto la ricuce alle due sezioni vicine — in entrambi i temi, perche' e' lo stesso token a cambiare valore. */ :root[data-theme="dark"] .pv-page { --pv-faq-bg: #133830; --pv-carta-bg: #1e4b3f; } .pv-faq { background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .07) 0%, transparent 68%), var(--pv-faq-bg); color: var(--pv-on-night); padding-block: var(--pv-rhythm-base); overflow: hidden; } /* ── IL FIUME ───────────────────────────────────────────────────── Le domande scorrono in continuo, a filo di pagina. Il movimento non lo fa un'animazione CSS: `animation-play-state: paused` si ferma di colpo, e un corso d'acqua che si inchioda non e' elegante. Lo guida un ciclo in JS che porta la velocita' a zero per interpolazione — rallenta, si posa, e alla ripartenza riprende quota. La striscia esce dalla colonna e corre per tutta la pagina: e' quello che la distingue da un elenco, prima ancora che si muova. */ .pv-fiume { margin-block-start: calc(var(--pv-s-lg) - 22px); /* La maschera ritaglia sul riquadro dell'elemento: senza questo respiro verticale taglierebbe via proprio il sollevamento e l'ombra della scheda in primo piano. */ padding-block: 22px; /* La corsia finisce ESATTAMENTE sulla catena di quota, non al bordo della finestra: la quota e' il bordo del disegno, e una scheda che la scavalca sta fuori dal foglio. Sfumatura corta, 30px — abbastanza da non tranciare, abbastanza poco da leggersi come un bordo e non come una dissolvenza. */ --pv-sfuma: 30px; -webkit-mask-image: linear-gradient(to right, transparent var(--pv-orlo), #000 calc(var(--pv-orlo) + var(--pv-sfuma)), #000 calc(100% - var(--pv-orlo) - var(--pv-sfuma)), transparent calc(100% - var(--pv-orlo))); mask-image: linear-gradient(to right, transparent var(--pv-orlo), #000 calc(var(--pv-orlo) + var(--pv-sfuma)), #000 calc(100% - var(--pv-orlo) - var(--pv-sfuma)), transparent calc(100% - var(--pv-orlo))); } .pv-fiume__pista { display: flex; width: max-content; will-change: transform; } .pv-fiume__serie { display: flex; align-items: stretch; /* tutte le schede alte quanto la piu' alta */ gap: var(--pv-s-md); /* Il passo dell'anello include il vuoto finale: senza, alla ricucitura due schede si toccherebbero e si vedrebbe il punto di giunzione. */ padding-inline-end: var(--pv-s-md); margin: 0; } .pv-carta { position: relative; flex: 0 0 clamp(258px, 25vw, 336px); display: flex; flex-direction: column; padding: var(--pv-s-md); /* --r-lg come .computi-workflow-card nel software: e' lo stesso oggetto, una scheda grande che si sfoglia. DESIGN.md assegna --r-md ai pannelli e --r-lg alle card grandi. */ border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--pv-carta-bg); box-shadow: var(--shadow-1); transition: transform 460ms var(--ease), box-shadow 460ms var(--ease), border-color 460ms var(--ease), opacity 320ms var(--ease); } .pv-carta__q { font-family: var(--font-serif); font-size: 1.16rem; line-height: 1.28; color: var(--ink); } .pv-carta__a { margin: var(--pv-s-xs) 0 0; font-size: 14px; line-height: 1.66; color: var(--ink-2); /* NIENTE attenuazione a riposo. L'avevo messa per abbassare il rumore di una parete di testo in movimento, ma e' incompatibile con la leggibilita': misurato, col tema scuro la risposta non raggiunge 4,5:1 a NESSUNA opacita' sotto 1 (a 0,90 sta a 4,05). E lo stato a riposo e' proprio quello in cui il testo va letto. Il primo piano lo portano gia' la scala, il sollevamento, il bordo d'oro e l'arretramento delle altre schede: bastano, e non costano contrasto. */ transition: opacity 460ms var(--ease); } .pv-carta__a em { font-style: normal; color: var(--ink); font-weight: 600; } .pv-carta__a a { color: inherit; text-underline-offset: 3px; } /* Il primo piano: la scheda sotto il puntatore sale, le altre arretrano. Un ingrandimento senza l'arretramento delle altre non e' un primo piano, e' solo una scheda piu' grossa. */ .pv-fiume__pista:hover .pv-carta, .pv-fiume__pista:focus-within .pv-carta { opacity: .48; } .pv-fiume__pista .pv-carta:hover, .pv-fiume__pista .pv-carta:focus-visible { opacity: 1; z-index: 2; transform: translateY(-8px) scale(1.035); border-color: color-mix(in srgb, var(--gold-ink) 42%, var(--hairline)); box-shadow: var(--shadow-2); } /* (la regola che riportava a 1 l'opacita' della risposta al passaggio del mouse non serve piu': a riposo la risposta e' gia' piena) */ /* Il comando all'estremita' della linea di quota. Sta su campo smeraldo in entrambi i temi, quindi porta l'inchiostro notturno fisso. */ .pv-fiume__stop { appearance: none; -webkit-appearance: none; cursor: pointer; flex: none; background: none; border: 1px solid var(--pv-hairline-night); border-radius: 999px; padding: 3px 11px; font-family: var(--font-mono); font-size: var(--pv-kicker); letter-spacing: .16em; text-transform: uppercase; /* E' un comando, non un'etichetta: prende l'inchiostro pieno. Sta nella fascia alta della banda, la piu' schiarita dal velo, e li' persino la sabbia si ferma a 4,24:1. */ color: var(--pv-on-night); transition: color 200ms var(--ease), border-color 200ms var(--ease); } .pv-fiume__stop:hover { color: var(--pv-on-night); border-color: var(--pv-gold-night); } /* Senza JS, o con il movimento disattivato, resta una striscia che si scorre a mano — mai un blocco fermo tagliato a meta'. */ .pv-fiume--fermo { overflow-x: auto; overscroll-behavior-x: contain; } /* ═══════════════════════════════════════════════════════════════════ C2 · ACCESSO — il modulo E' la chiamata all'azione E' il momento della conversione, e prima era la composizione piu' debole della pagina: titolo piccolo, modulo stretto nel terzo sinistro, due terzi di vuoto. Qui il titolo prende la scala del display e il modulo prende peso — un'ultima affermazione, non un piede di pagina. ═══════════════════════════════════════════════════════════════════ */ .pv-access { /* E' il momento della conversione: deve essere il punto piu' SATURO della pagina, non il piu' vuoto. Era un rettangolo quasi nero con dentro un campo email — cioe' la sezione che chiede qualcosa era anche quella che dava meno. Un campo di smeraldo con la luce che entra da sinistra in alto, dove sta il titolo. */ background: radial-gradient(130% 108% at 16% -10%, var(--pv-deep-2) 0%, transparent 62%), linear-gradient(to bottom, var(--pv-deep) 0%, #102420 100%); color: var(--pv-on-night); /* Piu' aria sopra che sotto: il colophon deve seguire subito, non dopo una campata vuota. */ padding-block: var(--pv-rhythm-wide) var(--pv-rhythm-base); } .pv-access__h { font-size: var(--pv-display); line-height: 1.04; color: var(--pv-on-night); max-width: 14ch; margin-block-start: var(--pv-s-md); /* il cartiglio sta sopra: piu' aria sopra un titolo che sotto */ } .pv-access__t { font-size: 17px; line-height: 1.62; color: var(--pv-on-night-2); max-width: 46ch; margin-block-start: var(--pv-s-md); } .pv-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--pv-s-xs); margin-block-start: var(--pv-s-lg); max-width: 34rem; } .pv-form__field { flex: 1 1 16rem; min-width: 0; } .pv-form__label { display: block; font-family: var(--font-mono); font-size: var(--pv-kicker); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-on-night-3); margin-block-end: 9px; } .pv-input { /* 52px come il bottone accanto: se il campo restasse a --ctl-h (44) i due controlli del modulo di conversione non si allineerebbero piu'. */ width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--pv-hairline-night); background: var(--pv-field); color: var(--pv-on-night); font-family: var(--font-sans); font-size: 15.5px; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); } /* Come sul campo smeraldo: l'accesso non sta sulla notte piena ma sul verde profondo, e li' l'inchiostro terziario si ferma a 3,63:1. Tutto il testo piccolo della sezione sale al secondario — 6,62:1. La regola generale che ne esce, e vale per chiunque tocchi questo foglio: `--pv-on-night-3` e' leggibile SOLO sulla notte piena (--pv-night). Su qualunque superficie risalita verso il verde si usa `--pv-on-night-2`. */ .pv-access .pv-form__label, .pv-access .pv-access__fine, .pv-access .pv-input::placeholder { color: var(--pv-on-night-2); } .pv-input::placeholder { color: var(--pv-on-night-3); } .pv-input:focus { outline: none; border-color: var(--pv-green-night); box-shadow: 0 0 0 3px var(--focus); } .pv-input[aria-invalid="true"] { border-color: var(--pv-err); } .pv-form .pv-btn { flex: 0 0 auto; } .pv-note { font-size: 13.5px; line-height: 1.55; margin-block-start: var(--pv-s-xs); min-height: 1.4em; } .pv-note--ok { color: var(--pv-green-night); } .pv-note--err { color: var(--pv-err-ink); } .pv-access__fine { font-size: 13px; line-height: 1.6; color: var(--pv-on-night-3); max-width: 46ch; margin-block-start: var(--pv-s-sm); } /* ═══════════════════════════════════════════════════════════════════ Ft1 · COLOPHON CON TESTATA ═══════════════════════════════════════════════════════════════════ */ .pv-foot { background: var(--pv-night-2); color: var(--pv-on-night-2); padding-block: var(--pv-s-xl) var(--pv-s-lg); border-block-start: 1px solid var(--pv-hairline-night-2); } .pv-foot__band { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pv-s-sm) var(--pv-s-md); } .pv-foot__mark { display: inline-block; /* contiene il logotipo, che e' un blocco */ color: var(--pv-on-night); /* la maschera ritaglia questo colore */ text-decoration: none; } /* L'altezza segue la curva che aveva il corpo del testo, moltiplicata per 0,886. Non e' un numero scelto a occhio: nel logotipo la maiuscola occupa il 79% dell'altezza dell'inchiostro — sotto la linea di base scende il calibro della Q — mentre in un testo la maiuscola sta attorno al 70% del corpo. Dare al logotipo la stessa cifra del font lo farebbe leggere un quarto piu' grande della parola che sostituisce. */ .pv-foot__mark .logotipo-metriq { height: clamp(1.77rem, 1.24rem + 1.95vw, 2.66rem); } .pv-foot__tag { font-size: 15px; line-height: 1.5; color: var(--pv-on-night-2); max-width: 34ch; } .pv-foot__links { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--pv-s-sm); } .pv-foot__links a, .pv-foot__theme { font-size: 13.5px; color: var(--pv-on-night-2); text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-sans); transition: color 160ms var(--ease); } .pv-foot__links a:hover, .pv-foot__theme:hover { color: var(--pv-on-night); } .pv-foot__rule { margin-block: var(--pv-s-md); border-color: var(--pv-hairline-night-2); } .pv-quota--night { background: var(--pv-hairline-night); } .pv-quota--night::before, .pv-quota--night::after { background: var(--pv-hairline-night); } .pv-foot__meta { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .04em; /* Il colophon siede su --pv-night-2, cioe' una superficie sollevata, non sulla tela base: li' il terziario scende a 4,09:1. Secondario, 7,45:1. */ color: var(--pv-on-night-2); display: flex; flex-wrap: wrap; gap: 4px 14px; } /* ═══════════════════════════════════════════════════════════════════ RIVELAZIONE ALLO SCROLL Non un'animazione nuova: `mq-rise` e' la firma 3 di DESIGN.md (fade + rise + blur, stagger 90ms) e la usa gia' tutto il prodotto. Qui cambia solo l'innesco — l'ingresso in campo invece del caricamento. La classe di partenza la mette il JS, mai il CSS: se lo script non gira il contenuto deve restare visibile, non invisibile per sempre. ═══════════════════════════════════════════════════════════════════ */ .pv-rivela { opacity: 0; } .pv-rivela.is-dentro { animation: mq-rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); } @media (prefers-reduced-motion: reduce) { .pv-rivela, .pv-rivela.is-dentro { opacity: 1; animation: none; } } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — verificata a 320 / 375 / 414 / 768 ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 65rem) { /* Qui l'assistente sta in sovrimpressione e non ruba larghezza alla tabella: il riferimento può essere più stretto, e la riproduzione resta più leggibile una volta rimpicciolita. */ .pv-page { --pv-ide-ref: 940px; --pv-ide-min: 0.66; } .pv-ide__agent { position: absolute; inset: 0 0 0 auto; width: 62%; z-index: 4; box-shadow: var(--pv-shadow-agent); } } @media (max-width: 40rem) { /* Sul telefono si accetta di scorrere il riquadro: 0,72 tiene la tabella a ~9px, che è il minimo in cui «SOMMANO m2» resta una parola e non una riga di puntini. */ .pv-page { --pv-ide-min: 0.72; } } @media (max-width: 60rem) { .pv-app__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* La scena passa SOPRA il testo: un'immagine larga quanto la colonna annuncia la sezione meglio di quanto la chiuda, e sotto i 60rem non resterebbe comunque abbastanza larghezza per starle accanto. */ .pv-out__due { grid-template-columns: minmax(0, 1fr); } .pv-out__fig { position: static; order: -1; margin-block-end: var(--pv-s-md); } .pv-foot__links { margin-inline-start: 0; width: 100%; } } @media (max-width: 40rem) { .pv-page { --pv-nav-h: 56px; } /* Fuori il solo salto interno. «Accedi» resta: e' la porta di chi e' GIA' dentro, e nasconderla non protegge nulla perche' lo stesso link vive nel footer — dove pero' cade a 11.191px su una pagina da 11.371, cioe' al 98% dello scorrimento. Un beta tester che torna dal telefono non deve attraversare tutta la landing per rientrare. */ .nav__link[href^="#"] { display: none; } .pv-app__notes { grid-template-columns: minmax(0, 1fr); } .pv-beat__t { max-width: none; } .pv-open__cta .pv-btn { width: 100%; } /* Passare a colonna non basta: due proprieta' pensate per la riga cambiano significato quando gira l'asse, e il modulo di iscrizione — il punto di conversione della pagina — arrivava sul telefono con il campo appoggiato al bordo destro e un buco di 240px sopra il pulsante. `align-items: end` in riga allinea il pulsante al fondo del campo; in colonna allinea al bordo INLINE, cioe' a destra: il campo finiva a x=328 su 611 di larghezza. Va riportato a stretch. `flex: 1 1 240px` sul campo: in riga quel 240px e' una larghezza di base, in colonna diventa un'ALTEZZA di base. Da qui il vuoto. */ .pv-form { flex-direction: column; align-items: stretch; } .pv-form__field { flex: 0 0 auto; } .pv-form .pv-btn { width: 100%; align-self: stretch; } .pv-foot__band { display: block; } .pv-foot__tag { margin-block-start: var(--pv-s-2xs); } .pv-foot__links { margin-block-start: var(--pv-s-sm); } } /* ═══════════════════════════════════════════════════════════════════ REDUCED MOTION — ogni animazione degrada allo stato finale (DESIGN.md) Il modo scrubbato non si accende proprio: lo decide il JS. Qui si spegne quel poco che resta. ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html:has(body.pv-page) { scroll-behavior: auto; } .pv-page *, .pv-page *::before, .pv-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; /* solo opacità, mai spostamenti */ } .pv-btn:hover, .nav__cta:hover { transform: none; } }