/* ============================================================ TEMA · Minimal — rifatto il 30/08/2026 Solo variabili più il vestito (in fondo al file): il tema non sa nulla dell'evento (architettura §2), e ciò che si muove anima SOLO transform e opacity (dottrina §5). LA REGOLA D'AUTORE, in tre righe. 1 · Bianco freddo, non carta: il fondo è il muro di uno studio, non un foglio ingiallito — niente grana, niente avorio, niente ottone. 2 · Una faccia sola dal 300 all'800 (Space Grotesk) e una scala coraggiosa: nomi enormi e leggeri con la spaziatura stretta, etichette minuscole e larghe. Il contrasto è di misura, non di ornamento. 3 · Un accento solo, il blu elettrico, speso dove decide qualcosa: il filo della busta, la ceralacca, il tratto sotto i nomi, la firma. Il resto è inchiostro su bianco, con geometrie nette e fili da un pixel. Nasce dal verdetto di Mirko del 30/08/2026 sulla versione precedente («risulta abbastanza triste e antico, io con minimal intendevo una cosa pulita ma molto moderna, comunque bella da vedere»): via la carta calda, l'ottone spento e la romana da libro, che insieme facevano cartoleria d'epoca. Minimal non è vuoto e non è antico: è contemporaneo. ============================================================ */ /* UNA FAMIGLIA SOLA. 'Grot' è Space Grotesk variabile (300–700): grottesca contemporanea con abbastanza carattere da non sembrare l'interfaccia del sistema — terminali tagliati netti, controforme aperte, cifre distinte. Copre TUTTI i ruoli: i nomi a 90 px in 300, il testo a 17 in 300, le etichette a 10 in 500. Un tema che parla con una voce sola, cambiando solo peso e spaziatura, è ciò che «minimal moderno» vuol dire — e costa 22 KB invece dei 70 delle tre facce di prima. 'GrotB' è la stessa faccia nell'istanza statica 700, dedicata all'hero: il motore lo disegna a 900 e il browser ingrassa da sé quel poco che manca (come su Neon). I pesi dichiarati sono quelli VERI dei file (architettura §10): il congelamento porta il descrittore dentro la faccia serializzata, e bitmap e vettore devono scegliere la stessa. */ @font-face{font-family:'Grot';src:url(../font/grot.woff2) format('woff2'); font-weight:300 700;font-display:block} @font-face{font-family:'GrotB';src:url(../font/grot7.woff2) format('woff2'); font-weight:700;font-display:block} :root{ /* --- fondamenta --- Bianco freddo e neutro, appena sotto il bianco pieno: così il cartoncino e la busta — che sono bianco vero — si staccano dal fondo come oggetti posati, senza una sola ombra in più. Il grigio del fondo è neutro con un soffio di blu: un off-white caldo tornerebbe carta, e la carta era il problema. */ --bg:#f4f4f6; --fondo-rgb:244,244,246; /* base del velo radiale, in RGB */ --ink:#1a1a1f; --ink-forte:#0b0b0f; --ink-caldo:#111116; /* qui «caldo» vale «l'inchiostro più pieno» */ --muted:#6b6b76; /* 4,8:1 sul fondo: grigio leggibile, mai smorto */ --hair:rgba(17,17,24,.13); /* La vignetta di un tema chiaro non è un'ombra: è il minimo indispensabile perché un fondo piatto non legga come un riempimento. Tre centesimi d'inchiostro agli angoli e basta. */ --vignetta:radial-gradient(134% 100% at 50% 42%,transparent 56%, rgba(17,17,26,.035) 86%,rgba(17,17,26,.07) 100%); /* --- l'accento unico: blu elettrico --- Il motore chiama «oro» questa rampa e la usa per tre cose: il filo della busta (gradiente a cinque fermate), il testo delle etichette (--oro-2) e la firma. Perciò --oro-2 è il tono di mezzo, quello che deve reggere come inchiostro: 7,5:1 sul fondo a 10 px. Un blu-indaco, non un blu di sistema — sotto la soglia del ciano resta elettrico senza diventare un'interfaccia. Su un matrimonio è «qualcosa di blu»; su un diciottesimo è la cosa più sveglia dello schermo. */ --oro-1:#4d54ff; --oro-2:#2b31d9; --oro-3:#1b1fa8; --oro-scuro:#101242; --oro-bagliore:rgba(43,49,217,.22); --cta-inchiostro:#ffffff; --cta-ombra:rgba(43,49,217,.18); /* --- accenti atmosferici: al limite del percettibile --- L'alone della busta è un'ombra fredda, non una luce: su bianco un oggetto che fluttua si stacca per ombra. I veli e le due aurore sono l'unico movimento continuo del fondale — quattro centesimi di blu e di grigio che si spostano lentissimi: senza, un tema senza particelle sarebbe fermo come una schermata di caricamento. */ --acc-1:rgba(43,49,217,.9); --acc-alone:rgba(24,24,40,.085); --acc-velo-1:rgba(43,49,217,.045); --acc-velo-2:rgba(20,20,34,.035); --acc-aur-1:rgba(43,49,217,.045); --acc-aur-2:rgba(120,124,160,.05); /* i due colori d'alone del contratto: qui non li usa nessuno, perché le liste di ombre (più sotto) sono tutte `none`. Restano definiti e trasparenti, così un blocco futuro che li citasse non accenderebbe niente per sbaglio. */ --acc-glow-testo:rgba(0,0,0,0); --acc-glow-testo-2:rgba(0,0,0,0); --anello:rgba(43,49,217,.34); /* l'onda che nasce dall'hero: un filo d'accento */ /* --- niente pulviscolo, e resta una scelta --- Coi ganci della fase A-bis il silenzio è strutturale: conteggi a zero, twinkle, bagliori e flora non entrano proprio nel DOM — niente strati che animano invisibili. Su un fondo bianco qualunque cosa alla deriva diventa un corpo estraneo che l'occhio si mette a seguire, e la brillantezza di questo tema è un'altra: le micro-transizioni precise (il tratto che si disegna sotto i nomi, l'anello dell'hero, il colore che scatta al tocco). Cuore e scie restano dichiarati ad alfa zero: l'unico consumatore rimasto è lo sbuffo del sigillo, che tace per scelta — la risposta al tocco è la falda che cade e scopre la fodera blu. */ --tw-n:0; --glint-n:0; --flora-n:0; --fx-cuore:rgba(17,17,24,0); --fx-scia:rgba(17,17,24,0); --fx-scia-fine:rgba(17,17,24,0); --fx-scia-oro:rgba(43,49,217,0); --fx-scia-oro-fine:rgba(43,49,217,0); /* --- l'apertura: la sola festa --- Burst a punto — dischetti pieni, senza alone — che il flutter del motore inclina in paillette. La gamma è quella del tema e niente altro: inchiostro, i tre blu, due grigi. Nessun bianco: su un fondo bianco un coriandolo bianco è un buco. */ --fx-forma:punto; --fx-coriandoli:#0e0e14 #2b31d9 #4d54ff #9aa0ff #b6b6c2 #dcdce4; /* --- vetro finto --- Su bianco il velo è inchiostro diluito, non bianco. Il bordo è la vera finitura: una hairline netta da un pixel, mai un contorno. */ --glass:rgba(17,17,24,.028); --glass-chiaro:rgba(17,17,24,.042); --glass-line:rgba(17,17,24,.12); /* --- ombre e bagliori dei blocchi --- Nessun bagliore, nessuna ombra sotto al testo: i nomi, la data, il luogo, i titoli e la chiusura stanno nudi sul bianco. È tutto ciò che «minimal» vuol dire, e il motore le espone come liste intere: si dice con una parola. */ --nomi-bagliore:none; --data-ombra:none; --luogo-ombra:none; --titolo-bagliore:none; --chiusura-bagliore:none; --pan-titolo-bagliore:none; /* Le ombre dei vetri sono ombre corte e fredde: un contatto da un pixel che dice «appoggiato» e una diffusa bassa. Niente luce interna in cima — su bianco non si vedrebbe, e il rilievo lo porta il filo del bordo. */ --btn-ombra:0 1px 2px rgba(17,17,26,.05),0 8px 20px rgba(17,17,26,.06); --pastiglia-ombra:0 1px 2px rgba(17,17,26,.05),0 5px 12px rgba(17,17,26,.05); --replay-ombra:0 1px 2px rgba(17,17,26,.05),0 5px 14px rgba(17,17,26,.06); /* la lastra di countdown e IBAN: qui è un rettangolo appena inciso nel bianco — serve soprattutto all'IBAN, dove tiene insieme il codice e il tasto Copia */ --riquadro-fondo:rgba(17,17,24,.022); --riquadro-filo:rgba(17,17,24,.10); /* --- caratteri (ruoli, non nomi: il motore usa i ruoli) --- */ --font-hero:'GrotB',system-ui,sans-serif; --font-corsivo:'Grot',system-ui,sans-serif; --font-testo:'Grot',system-ui,sans-serif; --font-etichetta:'Grot',system-ui,sans-serif; /* cosa scaricare prima del segnale d'invito: "peso corpo ruolo" (§3). Corsivo, testo ed etichetta sono lo stesso file: basta toccarlo una volta, e i tre pesi sono istanze della stessa variabile. */ --precarica:300 82 corsivo, 300 17 testo, 500 11 etichetta, 900 200 hero; /* --- easing --- Nessun rimbalzo: qui niente fa il carino. Le curve partono decise e si posano, la falda cade con un peso quasi meccanico. */ --spring:cubic-bezier(.22,.9,.24,1); --ease:cubic-bezier(.25,.9,.26,1); --flap:cubic-bezier(.42,.02,.14,1); /* --- busta: cartoncino bianco, filo e fodera blu --- La busta è bianca su bianco e si legge per due cose sole: il filo d'accento che ne disegna il bordo — una keyline, come sulla cartoleria di studio — e la fodera elettrica che si scopre quando la falda cade. Mezzo secondo di blu pieno in faccia, che è tutto il colpo di scena di cui questo tema ha bisogno. */ --busta-corpo-0:#eaeaee; --busta-corpo-1:#e3e3e8; --busta-corpo-2:#d8d8df; --busta-fronte-0:#fbfbfd; --busta-fronte-1:#f4f4f7; --busta-fronte-2:#e9e9ef; --busta-falda-0:#ffffff; --busta-falda-1:#fafafc; --busta-falda-2:#f0f0f5; --busta-fodera-0:#4d54ff; --busta-fodera-1:#2b31d9; --busta-fodera-2:#171b8f; /* la luce da sopra sul fronte: bianco pieno che si spegne nel proprio bianco a zero, mai in «transparent» (che è nero) */ --busta-riflesso:rgba(255,255,255,.88); --busta-riflesso-fine:rgba(255,255,255,0); --biglietto-0:#ffffff; --biglietto-1:#f8f8fb; --biglietto-filo:rgba(17,17,24,.10); --biglietto-inchiostro:#0b0b0f; /* inchiostro dei nomi sulla partecipazione */ /* due cartoncini bianchi uno dentro l'altro si separano solo per ombra: un contatto stretto più una diffusa, entrambe fredde, mai nere */ --biglietto-ombra:0 -2px 4px rgba(17,17,26,.06),0 -14px 30px rgba(17,17,26,.12); /* Il sigillo non è più ceralacca: è un bollo pieno di colore, stampato. Le quattro fermate stanno vicine di proposito — un disco quasi piatto con una sola luce in alto a sinistra — perché la cera lucida con quattro toni era il dettaglio più «matrimonio 2008» della scena. */ --sigillo-0:#4c53f8; --sigillo-1:#3339e6; --sigillo-2:#2c32da; --sigillo-3:#2126bd; --sigillo-inchiostro:#ffffff; /* iniziale in negativo sul blu */ /* La & degli sposi sul bollo è l'unica eccezione tipografica del tema, ed è leggibilità, non gusto: la & della Grottesca è una «Et» geometrica bellissima a 90 px fra i nomi — dove il contesto la spiega — e ambigua a 33, bianca dentro un disco, dove passa per una B. Su un invito di nozze il segno che unisce i due nomi è l'ultima cosa che può essere ambigua (la stessa ragione per cui il Neon scartò Grand Hotel). Il motore offre il gancio: qui la & del bollo prende la faccia di sistema — convenzionale su ogni piattaforma, zero byte da scaricare, e nessuno la confronta con quella dei nomi perché stanno in due scene diverse. Fra i nomi resta la nostra, che è una delle cose belle di questa faccia. */ --sigillo-unione-font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --sigillo-unione-corpo:31px; --sigillo-ombra:drop-shadow(0 2px 4px rgba(17,17,26,.16)) drop-shadow(0 10px 22px rgba(28,32,150,.20)); /* niente rilievo sotto la lettera: un bollo stampato non imprime */ --sigillo-rilievo:none; /* --- pannello (dress code e simili) --- */ --pannello-0:#ffffff; --pannello-1:#f7f7fa; --pannello-velo:rgba(12,12,20,.34); --pannello-ombra:0 -1px 0 rgba(17,17,24,.08),0 -20px 50px rgba(17,17,26,.14); /* i campioni del dress code sono chip stampati: un filo d'inchiostro intorno invece della lucidatura bianca */ --colori-ombra:0 1px 3px rgba(17,17,26,.12),inset 0 0 0 1px rgba(17,17,26,.08); /* --- hero: la scena su cui poggia --- Ombra fredda e corta: il numero è un oggetto appoggiato al muro bianco, non un blocco che galleggia su una macchia. */ --hero-ombra:rgba(17,17,26,.26); --hero-suolo:rgba(17,17,26,.15); /* --- finiture dell'hero: 7 fermate di gradiente + colori estrusione --- Le fermate sono lette agli offset 0/.30/.455/.51/.68/.88/1: la quarta è la rottura scura (l'orizzonte del metallo), le altre sono luce. estr-a è la faccia dell'estrusione più vicina al glifo, estr-b la più lontana: la profondità nasce dal salto fra le due. Qui il metallo si è tolto di mezzo. Le quattro finiture sono MATERIE, non leghe: inchiostro, gesso, cobalto, acciaio. Le fermate di ognuna stanno vicine — il numero è una tinta piena con un fianco più scuro, che è come il 3D si disegna oggi; l'argento carta di prima, con sette toni e una rottura nera in mezzo, faceva plastica lucida su fondo chiaro. Il motore passa comunque sopra la faccia un colpo di luce diagonale (bianco al 32%, cablato in hero3d): con le fermate compresse resta l'unico riflesso, e legge come una luce da studio invece che come una lucidatura. champagne è il ripiego obbligato del motore: qui è l'INCHIOSTRO, la finitura di serie del tema — nome del contratto, materia del tema, così un invito che cambia tema non ricade su niente di strano. */ --fin-champagne:#22222a #1c1c22 #26262e #101015 #1e1e25 #24242b #16161b; --fin-champagne-estr-a:30 30 38; --fin-champagne-estr-b:10 10 14; /* gesso: il numero bianco sul muro bianco, che esiste solo per i suoi fianchi grigi e l'ombra — la finitura più silenziosa del catalogo */ --fin-gesso:#ffffff #f2f2f5 #ffffff #cfcfd6 #e6e6eb #fbfbfd #dcdce2; --fin-gesso-estr-a:210 210 218; --fin-gesso-estr-b:150 150 160; /* la finitura del tema: l'accento portato al corpo grande, una volta sola */ --fin-cobalto:#a9adff #3a41ea #7a80ff #171b8f #545bfa #8f95ff #2a30d8; --fin-cobalto-estr-a:34 38 160; --fin-cobalto-estr-b:10 12 60; /* acciaio: il grigio freddo per quando il numero deve stare zitto */ --fin-argento:#ffffff #dfe1e6 #f8f9fb #8d919b #c4c7ce #eef0f3 #a7abb4; --fin-argento-estr-a:130 134 142; --fin-argento-estr-b:30 32 38; /* --- texture e decorazioni del tema --- NIENTE GRANA. La fibra di carta era ciò che rendeva «stampato» il tema vecchio, ed è esattamente ciò che lo faceva sembrare d'epoca: qui la superficie è liscia, e la profondità la portano il velo, le due aurore e la vignetta — gradienti, non rumore. In più se ne vanno 13,3 KB di base64 (il foglio resta lungo uguale: quei byte sono diventati commenti, che si comprimono e non si dipingono) e precarica() non ha più un'immagine da decodificare prima dell'apertura. */ --texture:none; --texture-dim-1:100% 100%; --texture-dim-2:100% 100%; /* niente stella: la variabile veste i glint a stella e le stelline attorno all'hero, e qui sarebbero brillantini appesi a un muro bianco. `none` è un'immagine valida: gli elementi restano, vuoti. Attorno all'hero parla solo l'anello — un'onda che si allarga, non una lucina. */ --stella:none; } /* ============================================================ LE GRAFIE (decisione 12) — le alternative curate alla Grottesca di serie. Nel Minimal le sei ombre di testo sono `none` di proposito: qualunque faccia entri qui deve reggere NUDA sul bianco. La domanda non è «quale corsivo da partecipazione» — in questo tema un corsivo sarebbe un ospite di un altro tema — ma «quale ALTRA modernità». · 'Jost' (jost.woff2, OFL) — la GEOMETRICA: cerchi e linee, un Futura contemporaneo. Dove la Grottesca è tagliata e tecnica, questa è rotonda e distesa: la stessa pulizia con un'altra temperatura, la più «moda» delle tre. · 'Instr' (instr.woff2 — Instrument Serif, OFL) — la ROMANA MODERNA: display ad alto contrasto, del 2022, non una romana da libro. È il grado di calore per chi lo chiede, dato con una didascalia da museo e non con uno script — e su questo fondo freddo, senza ottone attorno, legge editoriale invece che antica. Era la serie del tema vecchio: resta, come scelta del cliente, e non è più la voce del tema. Scartate, per la cronaca di chi verrà: Fraunces (romana morbida: è calore da stamperia, la temperatura sbagliata), Cormorant italica (cancelleresca: bella, ma riporta la cartoleria che questo tema ha appena buttato fuori), Space Mono (troppo «terminale»: su un invito il nome non è un output). I file NON stanno in tema.font: è il contratto del preload (guscio.js) — la faccia di un'alternativa la scarica solo l'invito che l'ha scelta. La taratura è nel descrittore size-adjust, a parità di em sull'altezza delle maiuscole della Grottesca (cap 700/1000): Jost ha la stessa identica cap e non chiede nulla, Instrument Serif 720/1000 → 97%. Dove size-adjust non c'è (Safari 16 e prima) la faccia resta quella giusta al suo corpo naturale: degrado senza danno, come da matrice §6. I pesi dichiarati sono quelli veri dei file (architettura §10). La & di entrambe è convenzionale e leggibile anche dentro il bollo — al contrario di quella della serie — quindi ognuna si riprende la propria: la faccia della grafia scelta è già precaricata, e il segno degli sposi torna della stessa mano dei nomi. Queste regole vivono DOPO il :root della serie: la sentinella di prove-catalogo legge il primo --font-corsivo del file come la serie del tema. ============================================================ */ @font-face{font-family:'Jost';src:url(../font/jost.woff2) format('woff2'); font-weight:300 700;font-display:block} @font-face{font-family:'Instr';src:url(../font/instr.woff2) format('woff2'); font-weight:400;font-display:block;size-adjust:97%} :root[data-grafia=jost]{--font-corsivo:'Jost',system-ui,sans-serif; --sigillo-unione-font:'Jost',system-ui,sans-serif;--sigillo-unione-corpo:33px} /* la romana vuole il generico giusto — serif, non sans — e un filo di spaziatura in più dei sans: le sue grazie non sopportano il -3,5% con cui la Grottesca stringe i nomi */ :root[data-grafia=instrument]{--font-corsivo:'Instr',Georgia,serif; --nomi-tracciatura:-.012em; --sigillo-unione-font:'Instr',Georgia,serif;--sigillo-unione-corpo:34px} /* ============================================================ IL VESTITO — le regole oltre le variabili. Qui il tema fa l'unica cosa che le variabili non sanno fare: la SCALA. Il motore dà misure buone per ogni tema; un minimal moderno vuole spaziature strette sui corpi grandi, larghissime sui corpi piccoli, e geometrie meno morbide. Dottrina invariata: in movimento solo transform e opacity, e le uniche transizioni di pittura sono micro (≤200 ms, su elementi piccoli, al tocco). ============================================================ */ /* --- i corpi grandi: leggeri e stretti --- Il peso 300 su un nome di 90 px è ciò che separa un invito contemporaneo da un titolo di giornale, e la spaziatura negativa tiene insieme le parole invece di lasciarle scorrere. Il corpo NON si tocca: le due media query del motore (schermo basso, orizzontale) devono continuare a vincere. */ .mv-nomi{font-weight:300;letter-spacing:var(--nomi-tracciatura,-.035em);line-height:1.1} .mv-nomi > span{font-weight:300} .mv-bigl-nomi{font-weight:300;letter-spacing:var(--nomi-tracciatura,-.03em)} .mv-chiusura{font-weight:300;letter-spacing:-.03em;line-height:1.14} .mv-pan-titolo{font-weight:300;letter-spacing:-.03em} .mv-testo h3{font-weight:400;letter-spacing:-.025em} .mv-data{font-weight:500;letter-spacing:-.02em} .mv-tappa-luogo{font-weight:500;letter-spacing:-.015em} /* Il segno sul bollo. Il motore lo mette in un , che di suo è NERETTO: nella Grottesca il 700 chiude le controforme, e l'iniziale a 36 px si impasta. Peso 500: un tondo pieno la vuole solida, non grassa. */ .mv-sigillo b{font-weight:500} /* (la & del bollo la vestono --sigillo-unione-font e -corpo, nel :root) */ /* --- i corpi piccoli: minuscoli e larghi --- L'occhiello di un tema di carta grida in maiuscoletto spaziatissimo; qui è una didascalia da segnaletica: 9,5-10 px, peso 500, un quarto di em. La coppia spaziatura/rientro resta l'invariante del motore (--ls), quindi si tocca una variabile sola. */ .mv-occhiello{font-weight:500;font-size:10px;--ls:.26em} .mv-tappa-titolo{font-weight:500;font-size:9.5px;--ls:.26em} .mv-pan-occhiello{font-weight:500;font-size:9.5px;--ls:.26em} .mv-hint span{font-weight:500;font-size:10px;--ls:.32em} .mv-tappa-ora,.mv-ora{letter-spacing:.02em} .mv-tappa-indirizzo,.mv-lista-nota{letter-spacing:.01em} .mv-firma-occhiello{letter-spacing:.14em} .mv-firma-occhiello span{padding-left:.14em} /* --- il filetto: un tratto solo --- Il rombo fra due sfumature è il segno più «partecipazione» del motore. Qui diventa una barra piena d'accento, corta e netta: la stessa che apre la copertina OG nelle chat, così l'invito e la sua anteprima si somigliano. E si DISEGNA quando il blocco entra in scena — l'unico movimento vero del tema, un solo transform su un elemento di 64×2 px. */ .mv-filetto{gap:0;width:auto;margin:16px 0 18px} .mv-filetto b{display:none} .mv-filetto i{flex:none;width:64px;height:2px;background:var(--oro-2); transform:scaleX(0);transform-origin:50% 50%} /* il blocco è : si tiene il primo tratto e si toglie il secondo */ .mv-filetto i:last-child{display:none} .reveal .mv-filetto i{transform:scaleX(1); transition:transform .9s var(--ease) calc(var(--d,.1s) + .3s)} /* in anteprima, a riposo, non c'è nessuna entrata da aspettare: il tratto c'è già (senza questa riga resterebbe a scaleX(0), cioè invisibile) */ body[data-anteprima].mv-fermo .mv-filetto i{transform:none;transition:none} /* --- la keyline della busta: un inchiostro solo --- Il filo del bordo nasce da un gradiente a cinque fermate (--oro-1/3/scuro/ 2/1): su un metallo è la luce che gira, su una busta bianca era un arcobaleno che andava dal blu acceso al blu notte e ritorno, e si vedeva. Qui le cinque fermate dicono lo stesso colore: una keyline stampata in una tinta sola, come sulla cartoleria di studio. */ .mv-g-oro-0,.mv-g-oro-1,.mv-g-oro-2,.mv-g-oro-3,.mv-g-oro-4{stop-color:var(--oro-2)} /* --- geometrie nette --- Le pastiglie a 100 px di raggio sono il vocabolario morbido del motore. Un minimal moderno preferisce il rettangolo appena smussato: stesse misure, stessi tocchi da 44 px, altro carattere. Restano tondi il sigillo, che è un bollo, e il tasto di ritorno, che è un'icona. */ .mv-btn{border-radius:14px} .mv-tappa-mappa,.mv-lista-link{border-radius:10px} .mv-cd,.mv-iban{border-radius:14px} .mv-iban-copia{border-radius:9px} .mv-cta{border-radius:12px} .mv-pan{border-radius:20px 20px 0 0} .mv-pan-chiudi{border-radius:14px} .mv-biglietto{border-radius:4px} .mv-biglietto::after{border-radius:2px} .mv-maniglia{width:36px;height:3px} /* --- niente lucido che scorre --- Il riflesso che attraversa bottoni e firma ogni sette secondi è un vetro patinato: su questo tema legge come una demo. Spento, si spegne anche la sua animazione — due elementi in meno che si muovono di continuo. */ .mv-btn::after,.mv-cta::after{display:none} /* --- la firma: un pieno, non un lingotto --- Il gradiente diagonale a quattro fermate faceva metallo. Qui è una tinta con un solo scarto verticale, nessuna lucidatura interna e un'ombra sola, colorata: un tasto contemporaneo. */ .mv-cta{background:linear-gradient(180deg,#3a41f0,#2b31d9); box-shadow:0 1px 2px rgba(17,17,26,.12),0 8px 18px var(--cta-ombra); letter-spacing:.16em} .mv-cta span{padding-left:.16em} /* --- il tocco: l'unica pittura che si muove --- Dottrina §5.2, l'eccezione: micro-transizioni discrete su elementi piccoli. Premendo, il filo del vetro diventa accento per un attimo. È il segnale di vita che un tema senza particelle si può permettere — e costa un colore di bordo su un elemento di 54 px. */ .mv-btn,.mv-tappa-mappa,.mv-lista-link,.mv-iban-copia,.mv-pan-chiudi{ transition:transform .3s var(--spring),border-color .18s ease} .mv-btn:active,.mv-tappa-mappa:active,.mv-lista-link:active, .mv-iban-copia:active,.mv-pan-chiudi:active{border-color:var(--oro-2)}