/* ===================================================================== CLASMA — sito clasma.it Token allineati a clasma_consumer/ui/clasma.css (design system del prodotto): stessa rampa neutra, stessi colori-ruolo, stessa tipografia. Il colore passa da UN token solo, --accent, commutato da [data-agent] sull'elemento . Nessun componente sa che gli agenti esistono. ⚠️ ORDINE: il default di --accent sta in :root PRIMA dei selettori di tema. Un :root messo DOPO li annullerebbe tutti (stessa specificita', vince l'ordine) — errore gia' fatto una volta nel prodotto. ===================================================================== */ /* ============ 01 · TOKEN ============ */ :root{ /* rampa neutra — identica al prodotto */ --n-0:#000; --n-50:#08080a; --n-100:#0a0a0a; --n-150:#0e0e0e; --n-200:#101010; --n-250:#141414; --n-300:#191919; --n-350:#1f1f1f; --n-400:#262626; --n-450:#2f2f2f; --n-500:#3a3a3a; --n-600:#5a5a5a; --n-700:#8a8a8a; --n-800:#a2a2a2; --n-900:#d4d4d6; --n-1000:#f4f4f5; --bg:var(--n-100); --bg-sunken:var(--n-50); --surface-1:var(--n-250); --surface-2:var(--n-200); --surface-3:var(--n-300); --field:var(--n-150); --line:var(--n-400); --line-strong:var(--n-450); --line-field:#666; /* bordo di campi e caselle: 3,4:1 sul campo, criterio WCAG 1.4.11 */ --text-1:var(--n-1000); --text-2:var(--n-800); --text-3:var(--n-700); --on-accent:var(--n-100); --ok:#8fe07a; --danger:#ff8585; /* colori-ruolo: chiarezza normalizzata in banda 8,5–10,2:1 su --bg, misurata nel design system. Senza normalizzazione il cambio agente cambierebbe la LUMINOSITA' della pagina, non solo la tinta. */ --role-core:#c9cdd4; --role-logistica:#2ecc71; --role-scrittura:#3fc9bb; --role-finance:#ff9147; --role-coding:#74b0ff; --role-controlli:#a8b2c1; /* acciaio, normalizzato nella stessa banda (misurato 9,2:1) */ /* stato di partenza: bianco. Nessun agente scelto = nessuna tinta. */ --accent:var(--n-1000); --accent-soft:rgba(244,244,245,.12); --accent-glow:rgba(244,244,245,.26); --font-display:'Archivo','Inter',system-ui,sans-serif; --font-body:'Inter',system-ui,'Segoe UI',Roboto,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --fs-3xs:10px; --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:clamp(19px,2.2vw,22px); --fs-2xl:clamp(24px,3.4vw,31px); --fs-3xl:clamp(29px,4.6vw,42px); --fs-hero:clamp(30px,5.8vw,62px); --lh-tight:1.06; --lh-snug:1.3; --lh-body:1.62; --tr-tight:-.022em; --tr-label:.16em; --wm-track-lg:.16em; --wm-track-sm:.10em; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-12:96px; --sp-14:128px; --r-xs:6px; --r-sm:10px; --r-md:13px; --r-lg:18px; --r-xl:26px; --r-pill:999px; --r-circle:50%; --sh-2:0 18px 44px -22px rgba(0,0,0,.75); --sh-3:0 40px 90px -30px rgba(0,0,0,.85); --ease:cubic-bezier(.22,.61,.36,1); --dur:.34s; /* UNA griglia sola (25/9): testata, binario, postazione, sezioni e piede. Fino al 24/9 le sezioni vecchie stavano in 1160 px e il binario in 1360: il titolo dell'eroe partiva 100 px a sinistra del marchio, e la pagina sembrava fatta di due siti */ --wrap:1360px; --head-h:64px; /* la CARTA (25/9): la stessa superficie in tutta la pagina — schede, schema, trailer, modulo e le carte della postazione (che in piu' hanno il vetro, perche' sotto scorre la scena) */ --carta-bg:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 100%); --carta-bordo:rgba(255,255,255,.085); --carta-bordo-2:rgba(255,255,255,.17); --carta-ombra:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -34px rgba(0,0,0,.85); --filo:rgba(255,255,255,.085); /* le righe sottili fra le voci: domande, «perche' noi», tempi */ --fs-card:14.5px; /* il testo dentro le carte (era 13 px: troppo fitto accanto al binario) */ } /* ---- temi agente. DOPO il default, mai prima. ---- */ html[data-agent="logistica"]{ --accent:var(--role-logistica); --accent-soft:rgba(46,204,113,.13); --accent-glow:rgba(46,204,113,.30); } html[data-agent="scrittura"]{ --accent:var(--role-scrittura); --accent-soft:rgba(63,201,187,.13); --accent-glow:rgba(63,201,187,.30); } html[data-agent="finance"] { --accent:var(--role-finance); --accent-soft:rgba(255,145,71,.13); --accent-glow:rgba(255,145,71,.30); } html[data-agent="coding"] { --accent:var(--role-coding); --accent-soft:rgba(116,176,255,.13);--accent-glow:rgba(116,176,255,.30); } html[data-agent="controlli"]{ --accent:var(--role-controlli); --accent-soft:rgba(168,178,193,.13);--accent-glow:rgba(168,178,193,.30); } /* ============ 02 · RESET E BASE ============ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + var(--sp-6))} body{ margin:0;background:var(--bg);color:var(--text-1); font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} p{margin:0 0 var(--sp-4)} h1,h2,h3,h4{margin:0} ::selection{background:var(--accent-soft);color:var(--text-1)} *{scrollbar-width:thin;scrollbar-color:var(--n-500) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--n-450);border-radius:var(--r-pill)} ::-webkit-scrollbar-thumb:hover{background:var(--n-500)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)} :focus:not(:focus-visible){outline:none} .skip{ position:absolute;left:var(--sp-4);top:-100px;z-index:200; background:var(--accent);color:var(--on-accent); padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);font-weight:600; transition:top .2s var(--ease); } .skip:focus{top:var(--sp-4)} /* ============ 03 · PRIMITIVE DI IMPAGINAZIONE ============ */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6)} /* 112 px sopra e sotto (erano 128): con le righe tolte, due sezioni di fila lasciavano 256 px di nero */ .section{padding-block:112px;position:relative} @media (max-width:720px){ .section{padding-block:var(--sp-10)} } /* LA LUCE (25/9): ogni sezione ha la sua pozza di luce tinta dall'agente, come l'alone del binario (sezione 25) e lo studio del 3D. Fino al 24/9 le sezioni vecchie erano nero piatto separato da righe grigie: accanto alla parte in 3D sembravano un altro sito. Dove sta la pozza lo dice la sezione (--luce-x/--luce-y); la maschera la sfuma in alto e in basso, cosi' non taglia mai. */ .section::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(42% 46% at var(--luce-x,16%) var(--luce-y,28%),var(--accent-glow),transparent 72%); opacity:.34; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); } #agenti{--luce-x:86%;--luce-y:16%} #dati{--luce-x:84%;--luce-y:52%} #come{--luce-x:12%;--luce-y:26%} #dentro{--luce-x:88%;--luce-y:30%} #perche{--luce-x:12%;--luce-y:20%} #trailer{--luce-x:50%;--luce-y:56%} #faq{--luce-x:14%;--luce-y:30%} #contatto{--luce-x:82%;--luce-y:44%} .eyebrow{ font-family:var(--font-mono);font-size:var(--fs-2xs); letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--accent);margin:0 0 var(--sp-4); display:flex;align-items:center;gap:var(--sp-3); transition:color var(--dur) var(--ease); } .eyebrow::before{ content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none; } .h2{ font-family:var(--font-display);font-weight:800; font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--tr-tight); max-width:20ch;text-wrap:balance; } .h3{ font-family:var(--font-display);font-weight:700; font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:-.01em; } .lede{ font-size:var(--fs-lg);color:var(--text-2);max-width:62ch; margin-top:var(--sp-5); } .head-block{max-width:780px;margin-bottom:var(--sp-10)} .muted{color:var(--text-2)} .hl{color:var(--text-1);font-weight:600} /* bianco = evidenziare */ .mono{font-family:var(--font-mono)} /* texture a puntini: e' la "grana" del marchio, non un fondale a caso */ .dots::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(circle at 1px 1px,rgba(244,244,245,.055) 1px,transparent 0); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0,#000 20%,transparent 78%); mask-image:radial-gradient(ellipse 80% 70% at 50% 0,#000 20%,transparent 78%); } .section > .wrap{position:relative;z-index:1} /* ============ 04 · BOTTONI ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); padding:13px var(--sp-6);border-radius:var(--r-pill); border:1px solid transparent;cursor:pointer; font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),transform .12s var(--ease),box-shadow var(--dur) var(--ease); white-space:nowrap; } .btn:active{transform:translateY(1px)} .btn-primary{ background:var(--accent);color:var(--on-accent); box-shadow:0 14px 40px -18px var(--accent-glow); } .btn-primary:hover{filter:brightness(1.08)} .btn-ghost{ background:transparent;color:var(--text-1);border-color:var(--line-strong); } .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn .arw{transition:transform var(--dur) var(--ease)} .btn:hover .arw{transform:translateX(3px)} .btn-lg{padding:16px var(--sp-7);font-size:var(--fs-md)} /* ============ 05 · TESTATA ============ */ .site-head{ position:sticky;top:0;z-index:100; height:var(--head-h);display:flex;align-items:center; background:rgba(10,10,10,.72); border-bottom:1px solid transparent; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease); } @supports (backdrop-filter:blur(1px)){ .site-head{backdrop-filter:saturate(140%) blur(14px)} } .site-head.is-stuck{background:rgba(10,10,10,.92);border-bottom-color:var(--line)} .head-in{display:flex;align-items:center;gap:var(--sp-6);height:100%} .lockup{display:flex;align-items:center;gap:10px;flex:none} .wordmark{ font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm); letter-spacing:var(--wm-track-sm);text-transform:uppercase; } .nav{display:flex;gap:var(--sp-6);margin-left:auto;font-size:var(--fs-sm)} .nav a{color:var(--text-2);transition:color .2s var(--ease);position:relative;padding-block:4px} .nav a:hover{color:var(--text-1)} .nav .btn{display:none} /* vive solo dentro il menu piccolo */ .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .26s var(--ease); } .nav a:hover::after{transform:scaleX(1)} .head-cta{flex:none} .nav-toggle{ display:none;margin-left:auto;background:transparent;border:1px solid var(--line); border-radius:var(--r-sm);width:40px;height:40px;cursor:pointer; align-items:center;justify-content:center; } .nav-toggle .bars{width:16px;height:10px;position:relative;display:block} .nav-toggle .bars::before,.nav-toggle .bars::after{ content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--text-1); transition:transform .26s var(--ease),top .26s var(--ease); } .nav-toggle .bars::before{top:0} .nav-toggle .bars::after{top:8.5px} .nav-toggle[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg)} @media (max-width:900px){ .nav-toggle{display:inline-flex} .head-cta{display:none} .nav{ position:fixed;inset:var(--head-h) 0 auto 0; flex-direction:column;gap:0;margin:0; background:var(--bg-sunken);border-bottom:1px solid var(--line); padding:var(--sp-3) var(--sp-6) var(--sp-6); font-size:var(--fs-lg); transform:translateY(-8px);opacity:0;visibility:hidden; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .nav.is-open{transform:none;opacity:1;visibility:visible} .nav a{padding-block:var(--sp-4);border-bottom:1px solid var(--line)} .nav .btn{display:inline-flex;margin-top:var(--sp-5);width:100%} } /* ============ 06 · EROE ============ Dal 23/9 l'eroe e' la prima BATTUTA del binario del prodotto (sezione 25): qui solo la tipografia; griglia e palco stanno in fondo al foglio. */ .battuta-eroe h1{ font-family:var(--font-display);font-weight:800; font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:-.03em; margin:0;text-wrap:balance; } .battuta-eroe h1 .swap{ color:var(--accent); transition:color var(--dur) var(--ease),opacity .2s var(--ease); } .battuta-eroe h1 .swap.is-out{opacity:0} .battuta-eroe .lede{margin-top:var(--sp-6);font-size:clamp(16px,1.6vw,19px)} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)} @media (max-width:560px){ .hero-cta .btn{flex:1 1 100%} } .hero-note{ margin-top:var(--sp-6);font-family:var(--font-mono);font-size:var(--fs-2xs); letter-spacing:.06em;color:var(--text-3);text-transform:uppercase; } /* cristallo — il marchio in SVG: ripiego del palco finche' il 3D non c'e', e figura accanto all'eroe nella pagina compatta */ .crystal{width:100%;height:auto;overflow:visible;animation:float 9s ease-in-out infinite} .crystal .halo{fill:var(--accent);opacity:.22;filter:blur(30px);transition:fill var(--dur) var(--ease)} @keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}} .rip-cristallo .ring{ position:absolute;width:min(78%,360px);aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-circle); opacity:.5;animation:spin 34s linear infinite; } .rip-cristallo .ring::before{ content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px; border-radius:var(--r-circle);background:var(--accent); box-shadow:0 0 14px 2px var(--accent-glow);transition:background var(--dur) var(--ease); } @keyframes spin{to{transform:rotate(360deg)}} /* ============ 07 · SCELTA DELL'AGENTE ============ */ .picker{ display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-8); padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-pill); background:var(--surface-2);width:max-content;max-width:100%; } @media (max-width:560px){ .picker{border-radius:var(--r-lg)} .chip{flex:1 1 40%} } .chip{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:9px var(--sp-4);border-radius:var(--r-pill); border:1px solid transparent;background:transparent;color:var(--text-2); font-size:var(--fs-sm);font-weight:500;white-space:nowrap; transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease); } .chip .dot{ width:8px;height:8px;border-radius:var(--r-circle);flex:none; background:var(--c);box-shadow:0 0 10px 0 var(--c); } .chip:hover{color:var(--text-1);background:var(--surface-3)} .chip[aria-pressed="true"]{ color:var(--text-1);background:var(--surface-1);border-color:var(--line-strong); } /* ============ 08 · SCHEDE AGENTE ============ */ .agent-grid{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3); } @media (max-width:1100px){ .agent-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:760px){ .agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .agent-grid{grid-template-columns:minmax(0,1fr)} } .agent{ position:relative;overflow:hidden;isolation:isolate; background:var(--carta-bg);border:1px solid var(--carta-bordo);border-radius:var(--r-lg);box-shadow:var(--carta-ombra); padding:var(--sp-7) var(--sp-6) var(--sp-6);display:flex;flex-direction:column; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); } .agent::before{ content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--c); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } /* la luce del SUO colore, dietro la mascotte: le cinque schede restano riconoscibili insieme */ .agent::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(85% 55% at 100% 0%,color-mix(in srgb,var(--c) 17%,transparent),transparent 72%); opacity:.75;transition:opacity var(--dur) var(--ease); } .agent:hover,.agent:focus-within{border-color:var(--carta-bordo-2);transform:translateY(-3px)} .agent:hover::before,.agent:focus-within::before{transform:scaleX(1)} .agent:hover::after,.agent:focus-within::after{opacity:1} /* la gamma scelta (dai chip dell'eroe o da «Scegli…»): la sua scheda si accende, le altre restano */ html[data-agent="logistica"] .agent.a-logistica,html[data-agent="scrittura"] .agent.a-scrittura, html[data-agent="finance"] .agent.a-finance,html[data-agent="coding"] .agent.a-coding, html[data-agent="controlli"] .agent.a-controlli{ border-color:color-mix(in srgb,var(--c) 55%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 34px 70px -34px color-mix(in srgb,var(--c) 45%,transparent); } html[data-agent="logistica"] .agent.a-logistica::before,html[data-agent="scrittura"] .agent.a-scrittura::before, html[data-agent="finance"] .agent.a-finance::before,html[data-agent="coding"] .agent.a-coding::before, html[data-agent="controlli"] .agent.a-controlli::before{transform:scaleX(1)} html[data-agent="logistica"] .agent.a-logistica::after,html[data-agent="scrittura"] .agent.a-scrittura::after, html[data-agent="finance"] .agent.a-finance::after,html[data-agent="coding"] .agent.a-coding::after, html[data-agent="controlli"] .agent.a-controlli::after{opacity:1} .agent-top{margin-bottom:var(--sp-5)} .agent-glyph{ width:38px;height:38px;flex:none;border-radius:var(--r-sm);margin-bottom:var(--sp-4); display:grid;place-items:center; background:color-mix(in srgb,var(--c) 13%,transparent); border:1px solid color-mix(in srgb,var(--c) 34%,transparent); color:var(--c); } @supports not (background:color-mix(in srgb,red 10%,transparent)){ .agent-glyph{background:var(--surface-3);border-color:var(--line-strong)} } .agent-glyph svg{width:19px;height:19px} .agent h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.005em;line-height:1.2} .agent .role{ font-family:var(--font-mono);font-size:var(--fs-3xs);letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--c); } .agent p{color:var(--text-2);font-size:var(--fs-card);line-height:1.55;margin-bottom:var(--sp-5)} .agent ul{list-style:none;margin:0 0 var(--sp-6);padding:var(--sp-5) 0 0;display:grid;gap:10px;border-top:1px solid var(--filo)} .agent li{ position:relative;padding-left:20px;font-size:var(--fs-card);color:var(--text-2); line-height:1.45; } .agent li::before{ content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px; border-radius:2px;background:var(--c);opacity:.85; } .agent .pick{ margin-top:auto;align-self:flex-start;background:transparent;border:1px solid var(--carta-bordo-2); color:var(--text-1);border-radius:var(--r-pill);padding:9px var(--sp-5); font-size:var(--fs-xs);font-weight:600;cursor:pointer; transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease); } .agent .pick:hover{border-color:var(--c);color:var(--c)} .agent .pick[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--on-accent)} /* ============ 09 · BLOCCO DATI (on-prem) ============ */ .split{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--sp-10);align-items:center; } @media (max-width:940px){ .split{grid-template-columns:minmax(0,1fr);gap:var(--sp-9)} } .claims{list-style:none;margin:var(--sp-8) 0 0;padding:0;display:grid;gap:var(--sp-7)} .claims li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:start} /* i numeri come quelli della postazione (.battuta-post .num): un cerchio col bordo dell'accento */ .claims .n{ font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-1); border:1px solid var(--accent);border-radius:var(--r-circle);background:var(--accent-soft); width:30px;height:30px;display:grid;place-items:center;margin-top:1px; transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease); } .claims strong{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.3;margin-bottom:6px} .claims span{color:var(--text-2);font-size:var(--fs-md)} /* schema: l'edificio, e la freccia che non esce */ .diagram{ background:var(--carta-bg);border:1px solid var(--carta-bordo);border-radius:var(--r-lg);box-shadow:var(--carta-ombra); padding:var(--sp-8); margin:0; /* il margine di serie di
(40 px ai lati) lo rientrava: sul telefono lo schema usciva largo 196 px con le scritte a 5 px (misurato il 23/9) */ } @media (max-width:560px){ .diagram{padding:var(--sp-5)} } .diagram svg{width:100%;height:auto} .diagram .box{fill:var(--surface-1);stroke:var(--line-strong)} .diagram .lbl{fill:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em} .diagram .lbl-1{fill:var(--text-1);font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em} .diagram .acc{fill:var(--accent);transition:fill var(--dur) var(--ease)} .diagram .accs{stroke:var(--accent);transition:stroke var(--dur) var(--ease)} .diagram .no{stroke:var(--danger);stroke-width:1.6;stroke-linecap:round} .diagram figcaption{ margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--text-3); font-family:var(--font-mono);letter-spacing:.04em; } /* ============ 10 · I TEMPI (come funziona) ============ Fino al 24/9 qui c'erano «tre passi» (arriva la macchina, la chiavetta installa, l'agente impara): i primi due li racconta gia' la postazione, in cinque passi, e due conte diverse per la stessa cosa confondevano. Ora: quanto ci vuole, in tre tempi (gli stessi della FAQ «Quanto ci vuole per partire?»). Il tempo e' scritto grande come i numeri dei passi del binario. */ .tempi{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-8);grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:860px){ .tempi{grid-template-columns:minmax(0,1fr);gap:var(--sp-9)} } .tempi li{position:relative;padding-top:var(--sp-7);border-top:1px solid var(--filo)} .tempi .tempo{ font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.03em; color:var(--accent);margin:0 0 var(--sp-5);font-variant-numeric:tabular-nums;transition:color var(--dur) var(--ease); } .tempi h3{margin:0 0 var(--sp-3)} .tempi p:not(.tempo){color:var(--text-2);font-size:var(--fs-md);margin:0;max-width:40ch} /* ============ 11 · CAPACITA' ============ */ .caps-grid{display:grid;gap:var(--sp-9) var(--sp-8)} /* ⚠️ Colonne CONTATE, non auto-fit: i riquadri sono 6, e con auto-fit a 1160px ne entravano 4 per riga — le due celle avanzate restavano vuote e il fondo grigio della griglia si vedeva come un rettangolo sbagliato. Tre colonne = due righe piene; due colonne = tre righe piene. */ .caps-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){ .caps-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .caps-grid{grid-template-columns:minmax(0,1fr)} } .cap{padding-top:var(--sp-6);border-top:1px solid var(--filo)} .cap h3{font-size:var(--fs-lg);font-family:var(--font-display);font-weight:700;margin-bottom:var(--sp-2)} .cap p{font-size:var(--fs-md);color:var(--text-2);margin:0;max-width:40ch} .cap .ico{ width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:var(--sp-5); color:var(--accent);background:var(--accent-soft);border:1px solid var(--carta-bordo); box-shadow:0 14px 30px -16px var(--accent-glow); transition:color var(--dur) var(--ease),background var(--dur) var(--ease); } .cap .ico svg{width:21px;height:21px} /* ============ 12 · DOMANDE ============ */ /* come il binario: il titolo resta fermo a sinistra (sticky), le domande scorrono a destra */ .faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-10);align-items:start} .faq-grid > .head-block{position:sticky;top:calc(var(--head-h) + var(--sp-9));margin-bottom:0} @media (max-width:940px){ .faq-grid{grid-template-columns:minmax(0,1fr);gap:0} .faq-grid > .head-block{position:static;margin-bottom:var(--sp-9)} } .faq-list{display:grid;border-top:1px solid var(--filo)} .qa{border-bottom:1px solid var(--filo);transition:background .2s var(--ease)} .qa summary{ cursor:pointer;list-style:none;padding:var(--sp-6) var(--sp-2) var(--sp-6) 0; display:flex;align-items:center;gap:var(--sp-4); font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.35; transition:color .2s var(--ease); } .qa summary:hover{color:var(--accent)} .qa summary::-webkit-details-marker{display:none} .qa summary::after{ content:"";margin-left:auto;flex:none;width:10px;height:10px; border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-2px,-2px); transition:transform .26s var(--ease),border-color .2s var(--ease); } .qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--accent)} .qa .body{padding:0 var(--sp-9) var(--sp-7) 0;color:var(--text-2);font-size:var(--fs-md);max-width:68ch} .qa .body p:last-child{margin-bottom:0} /* ============ 13 · CONTATTO ============ */ .contact{background:var(--bg-sunken)} .contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:var(--sp-10)} @media (max-width:940px){ .contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-9)} } .contact-side .h2{max-width:12ch} .direct{margin-top:var(--sp-8);display:grid;gap:var(--sp-4)} .direct a{ display:flex;align-items:center;gap:var(--sp-4); border:1px solid var(--carta-bordo);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5); background:var(--carta-bg);box-shadow:var(--carta-ombra);transition:border-color .2s var(--ease); } .direct a:hover{border-color:var(--accent)} .direct .ico{color:var(--accent);flex:none;transition:color var(--dur) var(--ease)} .direct .ico svg{width:18px;height:18px} .direct .t{font-size:var(--fs-sm);font-weight:600} .direct .s{font-size:var(--fs-xs);color:var(--text-3);font-family:var(--font-mono)} form.demo{ background:var(--carta-bg);border:1px solid var(--carta-bordo);border-radius:var(--r-lg);box-shadow:var(--carta-ombra); padding:var(--sp-8);display:grid;gap:var(--sp-5); } @media (max-width:560px){ form.demo{padding:var(--sp-6)} } .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)} @media (max-width:640px){ .row2{grid-template-columns:minmax(0,1fr)} } .field{display:grid;gap:7px} .field label{font-size:var(--fs-xs);color:var(--text-2);font-weight:600;letter-spacing:.01em} .field .req{color:var(--accent);transition:color var(--dur) var(--ease)} .field input,.field select,.field textarea{ background:var(--field);border:1px solid var(--line-field);border-radius:var(--r-sm); padding:12px var(--sp-4);font-size:var(--fs-sm);width:100%; transition:border-color .2s var(--ease),background .2s var(--ease); } .field textarea{resize:vertical;min-height:104px;line-height:1.5} .field select{ appearance:none;cursor:pointer;padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%), linear-gradient(135deg,var(--text-3) 50%,transparent 50%); background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .field select option{background:var(--surface-1);color:var(--text-1)} .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-3)} .field input:focus,.field select:focus,.field textarea:focus{ /* lo stesso anello di 2 px di bottoni e link (col solo bordo da 1 px il fuoco si vedeva poco, soprattutto con l'accento grigio della gamma Controlli: 23/9) */ outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);background:var(--surface-2); } .field.err input,.field.err textarea,.field.err select{border-color:var(--danger)} .field .msg{font-size:var(--fs-2xs);color:var(--danger);min-height:0} .field.err .msg{min-height:1.2em} /* trappola per i robot: mai visibile, mai raggiungibile da tastiera */ .trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-xs);color:var(--text-2)} .consent input{ appearance:none;-webkit-appearance:none; width:18px;height:18px;flex:none;margin-top:1px;cursor:pointer; border:1px solid var(--line-field);border-radius:5px;background:var(--field); display:grid;place-content:center; transition:background .18s var(--ease),border-color .18s var(--ease); } .consent input::before{ content:"";width:10px;height:10px;transform:scale(0); transition:transform .16s var(--ease); background:var(--on-accent); clip-path:polygon(14% 47%,0 61%,40% 100%,100% 22%,86% 9%,38% 71%); } .consent input:hover{border-color:var(--text-3)} .consent input:checked{background:var(--accent);border-color:var(--accent)} .consent input:checked::before{transform:scale(1)} .consent a{color:var(--text-1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)} .consent a:hover{text-decoration-color:var(--accent)} .form-foot{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap} .form-state{font-size:var(--fs-xs);font-family:var(--font-mono);letter-spacing:.03em} .form-state.ok{color:var(--ok)} .form-state.ko{color:var(--danger)} .btn[data-busy="1"]{opacity:.6;pointer-events:none} .form-done{ border:1px solid var(--carta-bordo-2);background:var(--carta-bg);box-shadow:var(--carta-ombra);border-radius:var(--r-lg); padding:var(--sp-9) var(--sp-8);text-align:center; } .form-done .tick{ width:46px;height:46px;margin:0 auto var(--sp-5);border-radius:var(--r-circle); display:grid;place-items:center;color:var(--on-accent);background:var(--accent); } .form-done h3{margin-bottom:var(--sp-3)} .form-done p{color:var(--text-2);font-size:var(--fs-sm);margin:0} /* ============ 14 · PIEDE ============ */ .site-foot{border-top:1px solid var(--line);padding-block:var(--sp-9);font-size:var(--fs-xs)} /* ⚠️ Era un flex con .foot-note{width:100%}: NON andava a capo, perche' il max-width:78ch riduce la dimensione ipotetica dell'elemento sotto il 100% e cosi' ci sta in riga. Con la griglia, grid-column:1/-1 e' una riga sua e basta — il max-width torna a fare solo il suo mestiere, la misura del testo. */ .foot-in{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-6);align-items:center} .foot-links{display:flex;gap:var(--sp-5);flex-wrap:wrap;color:var(--text-2);justify-self:end} .foot-links a{padding-block:6px;display:inline-block} .foot-links a:hover{color:var(--text-1)} .foot-note{grid-column:1/-1;color:var(--text-3);font-size:var(--fs-2xs);line-height:1.6;max-width:78ch;margin:0} .foot-legal{grid-column:1/-1;color:var(--text-3);font-size:var(--fs-2xs);line-height:1.6;max-width:90ch;margin:0} .foot-legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)} .foot-legal a:hover{color:var(--text-2)} @media (max-width:720px){ .foot-in{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)} .foot-links{justify-self:start} } /* ============ 15 · COMPARSA + MOTO RIDOTTO ============ */ html.js .rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)} html.js .rise.is-in{opacity:1;transform:none} /* stessa specificita' della regola sopra (0,2,1): un .rise.is-in nudo perderebbe */ .rise.d1{transition-delay:.07s} .rise.d2{transition-delay:.14s} .rise.d3{transition-delay:.21s} .rise.d4{transition-delay:.28s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } html.js .rise{opacity:1;transform:none} } /* ============ 16 · PAGINE DI TESTO (privacy) ============ */ .doc{max-width:74ch;padding-block:var(--sp-12)} .doc h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-3xl);letter-spacing:var(--tr-tight);margin-bottom:var(--sp-3)} .doc .updated{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--sp-9)} .doc h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);margin:var(--sp-9) 0 var(--sp-4)} .doc p,.doc li{color:var(--text-2);font-size:var(--fs-sm)} .doc ul{padding-left:var(--sp-5);display:grid;gap:8px;margin:0 0 var(--sp-4)} .doc a{color:var(--text-1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)} .doc a:hover{text-decoration-color:var(--accent)} .doc table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-5);font-size:var(--fs-xs)} .doc th,.doc td{text-align:left;padding:10px var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top} .doc th{color:var(--text-1);font-weight:600} .doc td{color:var(--text-2)} .doc-back{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-9);color:var(--text-2);font-size:var(--fs-sm)} .doc-back:hover{color:var(--accent)} /* (25/9) le pagine di testo come la home: la stessa luce in alto e la testata con le voci a destra e l'ultima («Richiedi una demo») come il bottone della home. Il markup lo genera pagine_doc.py: qui solo CSS, cosi' le pagine non si rigenerano */ .doc{position:relative;isolation:isolate} .doc::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:-120px;width:min(1200px,100vw);height:640px; transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 34%,var(--accent-glow),transparent 72%);opacity:.3} .head-links{margin-left:auto;align-items:center;font-size:var(--fs-sm);gap:var(--sp-6)} .head-links a:hover{color:var(--text-1)} .head-links a:last-child{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);padding:10px var(--sp-5);font-weight:600; box-shadow:0 14px 40px -18px var(--accent-glow)} .head-links a:last-child:hover{color:var(--on-accent);filter:brightness(1.08)} @media (max-width:620px){ .head-links{gap:var(--sp-4);font-size:var(--fs-xs)} .head-links a:not(:last-child):not(:first-child){display:none} /* sul telefono: Home e il bottone */ } /* ============ 17 · MODIFICATORI DI COLORE PER AGENTE ============ --c e' il colore della SCHEDA (sempre il suo, anche quando l'agente scelto e' un altro). --accent e' il colore della PAGINA. Sono due cose diverse di proposito: le quattro schede devono restare riconoscibili tutte insieme. Niente style="" nel markup, cosi' la CSP resta stretta. */ .a-logistica{--c:var(--role-logistica)} .a-scrittura{--c:var(--role-scrittura)} .a-finance {--c:var(--role-finance)} .a-coding {--c:var(--role-coding)} .a-controlli{--c:var(--role-controlli)} .a-core {--c:var(--role-core)} /* facce del cristallo */ /* Il marchio: il cristallo sfaccettato inciso sulla scatola, dentro un rombo. Le facce hanno fill-opacity nel markup (l'opacita' la usano le comparse): qui passa solo il colore, che e' quello dell'agente scelto. */ .cx{fill:var(--accent);transition:fill var(--dur) var(--ease)} .cs{stroke:#9AA7B8;stroke:color-mix(in srgb,var(--accent) 62%,#E8ECF3); transition:stroke var(--dur) var(--ease)} .diagram .cs{stroke-width:3.4} .lockup .mark{width:15px;height:22px;flex:none} /* ===================================================================== IL TRAILER E L'OGGETTO — aggiunti il 10/9/2026 Le regole stanno IN FONDO apposta: nessuna @media prima della sua base, se no vince l'ultima a parità di specificità (già preso due volte). ===================================================================== */ /* fascia del trailer: più stretta di una sezione piena */ .band{padding-block:var(--sp-12)} /* la locandina e' un render del motore 3D (25/9), una per gamma come le altre figure: la vecchia era un fotogramma del trailer con un render d'agosto e del testo cucito dentro */ .film-card{position:relative;border-radius:var(--r-xl);overflow:hidden; border:1px solid var(--carta-bordo);background:var(--bg-sunken); box-shadow:var(--carta-ombra),0 60px 140px -70px var(--accent-glow)} .film-poster{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer; position:relative;aspect-ratio:16/9;color:inherit;text-align:left} .film-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .film-veil{position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,9,11,0) 0%,rgba(8,9,11,.05) 52%,rgba(8,9,11,.86) 100%)} /* il tasto sta nel lato buio della locandina (la macchina e' a destra, dal 70% in la'): al centro la toccava */ .film-play{position:absolute;left:33%;top:46%;transform:translate(-50%,-50%); width:74px;height:74px;border-radius:50%;display:grid;place-items:center; background:var(--accent);color:var(--on-accent); box-shadow:0 18px 50px -12px var(--accent-glow); transition:transform var(--dur) var(--ease)} .film-play svg{width:28px;height:28px;margin-left:3px} .film-poster:hover .film-play,.film-poster:focus-visible .film-play{transform:translate(-50%,-50%) scale(1.07)} .film-lab{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-8) var(--sp-9); display:flex;flex-direction:column;gap:var(--sp-2)} .film-lab .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .film-lab .t{font-family:var(--font-display);font-weight:800;font-size:var(--fs-2xl);line-height:1.15;letter-spacing:-.015em; color:var(--text-1);text-wrap:balance;max-width:24ch} .film-frame{position:relative;height:0;padding-bottom:calc(56.25% + 92px)} .film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .film-alt{margin:var(--sp-5) 0 0;font-size:var(--fs-sm);color:var(--text-3);text-align:center} .film-alt a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px} .film-alt a:hover{color:var(--accent)} /* il triangolino sul tasto dell'eroe */ .btn .tri{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor;margin-right:9px;flex:none} .btn .sec{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px; letter-spacing:.12em;color:var(--text-3);margin-left:8px} /* le tre cose che arrivano al cliente */ /* l'interfaccia e' una schermata: bordo sottile e piu' spazio dentro il riquadro */ /* il guscio per gamma: vedi la sezione 20 in fondo (esploso a otto fotogrammi) */ @media (max-width:900px){ .film-lab{padding:var(--sp-5)} .film-play{width:60px;height:60px} .film-play svg{width:23px;height:23px} } @media (max-width:620px){ .film-lab .t{font-size:var(--fs-lg)} } @media (prefers-reduced-motion:reduce){ .film-play{transition:none} } /* ===================================================================== 18 · L'EROE CHE VIVE — aggiunto l'11/9/2026 Riga di strumenti del trailer, cristallo che si compone, mascotte. ===================================================================== */ .hud{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-6); font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase; color:var(--text-3); } .hud b{font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums} .hud .out b{color:var(--accent);transition:color var(--dur) var(--ease)} .hud .live{display:inline-flex;align-items:center;gap:8px;color:var(--text-2)} .hud .live i{ width:7px;height:7px;border-radius:var(--r-circle);background:var(--accent); box-shadow:0 0 10px 1px var(--accent-glow);animation:hudpulse 2.2s ease-in-out infinite; transition:background var(--dur) var(--ease); } .hud .sep{width:1px;height:12px;background:var(--line-strong)} @keyframes hudpulse{0%,100%{opacity:1}50%{opacity:.35}} /* il cristallo si compone: cinque onde di faccette, poi il rombo si disegna. Le faccette hanno fill-opacity nel markup: qui si anima SOLO opacity, che si compone. */ html.js .crystal .cx{opacity:0;transform-box:fill-box;transform-origin:center} .crystal.is-vivo .cx{animation:facein .7s var(--ease) forwards} .crystal .w0{animation-delay:.15s} .crystal .w1{animation-delay:.26s} .crystal .w2{animation-delay:.37s} .crystal .w3{animation-delay:.48s} .crystal .w4{animation-delay:.59s} @keyframes facein{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} html.js .crystal .rombo{stroke-dasharray:421;stroke-dashoffset:421} .crystal.is-vivo .rombo{animation:disegna 1.5s cubic-bezier(.3,.8,.3,1) forwards .1s} @keyframes disegna{to{stroke-dashoffset:0}} html.js .crystal .cs:not(.rombo){opacity:0} .crystal.is-vivo .cs:not(.rombo){animation:facein .6s var(--ease) forwards .7s} /* mascotte: SVG generato, decorativo, fermo quando e' fuori schermo */ .masc{pointer-events:none} .masc svg{width:100%;height:100%;display:block;overflow:visible} .masc:not(.viva) svg *{animation-play-state:paused!important} .masc-hero{ position:absolute;right:-9%;bottom:-3%;width:40%;aspect-ratio:200/240; opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease); } .masc-hero.is-vivo{opacity:1;transform:none} .masc-card{position:absolute;top:8px;right:8px;width:60px;height:72px;opacity:.92} .contact-title{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap} .contact-title .h2{flex:1 1 12ch} .masc-contatto{width:92px;height:110px;flex:none;margin-bottom:6px} @media (max-width:940px){ .masc-hero{width:34%;right:-6%} } @media (max-width:560px){ .masc-card{width:48px;height:58px} .masc-contatto{width:72px;height:86px} } /* la locandina del trailer ha del testo cucito dentro: sotto i 620px l'etichetta scende SOTTO l'immagine invece di coprirla */ @media (max-width:620px){ .film-poster{aspect-ratio:auto} .film-poster img{position:static;aspect-ratio:16/9;height:auto} .film-veil{bottom:auto;height:0} .film-play{top:28vw} .film-lab{position:static;padding:var(--sp-4) var(--sp-5) var(--sp-5)} } /* ===================================================================== 19 · MODULO: legenda e facoltativi ===================================================================== */ .form-legend{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--text-3)} .field .opt,.consent .opt{font-weight:400;color:var(--text-3)} /* ===================================================================== 20 · L'OGGETTO CHE SI MONTA — otto fotogrammi per gamma, guidati dallo scorrimento ===================================================================== */ /* ===================================================================== 21 · LO SCHEMA CHE VIVE — la scena 4 del trailer, innescata da .is-in Ogni elemento porta una classe di sequenza s0..s7 = il suo ritardo. ===================================================================== */ .diagram .fill{fill:var(--surface-1);stroke:var(--line-strong)} .diagram .link{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-dasharray:4 4;transition:stroke var(--dur) var(--ease)} .diagram .dead{stroke:var(--n-600);stroke-width:1.3;fill:none;stroke-dasharray:3 4} .diagram .cross{stroke:var(--danger);stroke-width:2;stroke-linecap:round;fill:none} .diagram .pkt{fill:var(--accent);transition:fill var(--dur) var(--ease)} .diagram .dim{opacity:.55} .diagram .lbl-out{fill:var(--text-3);font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em} .diagram .cs{stroke-width:2.6} html.js .diagram .sk{opacity:0} html.js .diagram .pop{opacity:0;transform-box:fill-box;transform-origin:center} html.js .diagram .pkt{opacity:0} html.js .diagram .dr{stroke-dasharray:60!important;stroke-dashoffset:60} .diagram.is-in .sk{animation:sk .55s var(--ease) forwards} .diagram.is-in .dim.sk{animation-name:skdim} .diagram.is-in .pop{animation:pop .4s var(--ease) forwards} .diagram.is-in .dr{animation:disegna .6s cubic-bezier(.3,.8,.3,1) forwards} .diagram.is-in .pkt{animation:pacchetto 3.4s ease-in-out infinite} .diagram.is-in .pkt.p2{animation-delay:2.6s} .diagram.is-in .lbl-out{animation:sk .5s var(--ease) forwards,lampeggia 1.1s ease-in-out 2.4s 2} .diagram .s0{animation-delay:0s} .diagram .s1{animation-delay:.15s} .diagram .s2{animation-delay:.3s} .diagram .s3{animation-delay:.5s} .diagram .s4{animation-delay:.65s} .diagram .s5{animation-delay:.95s} .diagram .s6{animation-delay:1.3s} .diagram .s7{animation-delay:1.55s} .diagram.is-in .pkt.s5{animation-delay:1s} .diagram.is-in .pkt.p2.s5{animation-delay:2.7s} @keyframes sk{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} @keyframes skdim{from{opacity:0;transform:translateY(3px)}to{opacity:.55;transform:none}} @keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} @keyframes pacchetto{ 0%{opacity:0;transform:translateX(0)} 8%{opacity:1} 42%{transform:translateX(42px);opacity:1} 54%{transform:translateX(42px)} 90%{opacity:1;transform:translateX(0)} 100%{opacity:0;transform:translateX(0)} } @keyframes lampeggia{0%,100%{opacity:1}50%{opacity:.25}} /* ===================================================================== 22 · I TEMPI — la linea che si riempie (sopra ogni tempo, sul filo) ===================================================================== */ .tempi li::after{ content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .25s,background var(--dur) var(--ease); } .tempi li.is-in::after{transform:scaleX(1)} .tempi li.d1::after{transition-delay:.6s} .tempi li.d2::after{transition-delay:.95s} /* ===================================================================== 23 · PERCHE' NOI — cinque righe, nessun nome ===================================================================== */ .vs{display:grid} .vs-head,.vs-row{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start} .vs-head{ padding:0 0 var(--sp-4);border-bottom:1px solid var(--filo);font-family:var(--font-mono);font-size:var(--fs-3xs); letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-3); } .vs-row{ padding:var(--sp-6) 0;border-bottom:1px solid var(--filo); transition:background .2s var(--ease); } .vs-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.028),transparent 80%)} .vs-row h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);margin:0} .vs-row p{margin:0;font-size:var(--fs-md);color:var(--text-2)} .vs-row .vs-noi{color:var(--text-1);border-left:2px solid var(--accent);padding-left:var(--sp-4);transition:border-color var(--dur) var(--ease)} .vs-k{display:none} @media (max-width:760px){ .vs-head{display:none} .vs{border-top:1px solid var(--filo)} .vs-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)} .vs-k{display:block;font-family:var(--font-mono);font-size:var(--fs-3xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-3);margin-bottom:4px} } .predisposto{margin:var(--sp-8) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center} .predisposto .k{ font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--accent);margin-right:var(--sp-2);transition:color var(--dur) var(--ease); } .predisposto .tag{border:1px solid var(--carta-bordo-2);background:var(--carta-bg);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-xs);color:var(--text-2)} /* ===================================================================== 24 · MOTO RIDOTTO per tutto quello che e' stato aggiunto sopra (la regola globale della sezione 15 azzera gia' durate e transizioni; qui si fissa lo STATO FINALE, cosi' niente resta nascosto). ===================================================================== */ @media (prefers-reduced-motion:reduce){ html.js .crystal .cx,html.js .crystal .cs:not(.rombo),html.js .diagram .sk,html.js .diagram .pop,html.js .diagram .pkt{opacity:1;animation:none!important} html.js .diagram .dim{opacity:.55} html.js .crystal .rombo,html.js .diagram .dr{stroke-dashoffset:0;animation:none!important} .diagram.is-in .pkt{transform:translateX(21px)} .hud .live i{animation:none} .masc svg *{animation:none!important} .tempi li::after{transform:scaleX(1)} .masc-hero{opacity:1;transform:none} } /* ===================================================================== 25 · IL BINARIO DEL PRODOTTO — 23/9/2026 Una griglia: a sinistra le battute di testo, a destra il PALCO che resta a schermo (sticky) e mostra l'oggetto; sul telefono il palco e' una fascia in alto e il testo scorre sotto. Senza JS o con moto ridotto la pagina e' COMPATTA: lo decide un foglio a parte, assets/compatta.css, caricato da