/* ============================================================================ §0 I CARATTERI, SERVITI DA NOI Prima arrivavano da fonts.googleapis.com. Tre problemi in uno: 1. PRIVACY. Quando il browser di un visitatore chiede un carattere a Google, gli manda il proprio indirizzo IP. Per il GDPR e' un trasferimento di dati verso gli Stati Uniti — nel 2022 un tribunale tedesco ha condannato un sito proprio per questo. Servendoli noi, il sito non fa UNA richiesta fuori: niente terze parti, e quindi niente banner dei cookie da mettere. 2. SBALLOTTAMENTO. Il carattere arrivava dopo il primo disegno, le lettere cambiavano larghezza e il titolo dell'hero spingeva giu' tutto il resto di 33 pixel. 3. VELOCITA'. Sei richieste a due domini diversi, ognuna con la sua attesa. Sono tutti e quattro VARIABILI: un file solo copre tutti i pesi. Newsreader contiene un carattere soltanto, la "&" del marchio: 2 KB invece di 143. Licenza SIL Open Font License: servirli dal proprio sito e' esplicitamente permesso. ========================================================================= */ @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700; font-display:optional;src:url("font/space-grotesk.woff2?v=2026-09-11") format("woff2")} @font-face{font-family:"Archivo";font-style:normal;font-weight:400 600; font-display:optional;src:url("font/archivo.woff2?v=2026-09-11") format("woff2")} @font-face{font-family:"DM Mono";font-style:normal;font-weight:400; font-display:optional;src:url("font/dm-mono.woff2?v=2026-09-11") format("woff2")} /* --- i ripieghi corretti ------------------------------------------------ Il vero problema non era da dove arrivano i caratteri: e' che finche' non arrivano il browser impagina con quelli di sistema, che sono LARGHI DIVERSI. Quando il carattere vero atterra, il testo si rimpagina e tutto balla. font-display:optional e' la chiave. "swap" fa disegnare col ripiego e poi SCAMBIA: il titolone passa da tre righe a due e tutto quello che sta sotto salta di 65 pixel. Con "optional" il browser, se il carattere non e' pronto al primo disegno, per QUELLA visita non lo usa affatto: niente scambio, niente salto. Alla visita successiva e' in memoria e si usa dal primo pixel. Col precaricamento la maggior parte delle prime visite fa comunque in tempo. ATTENZIONE: il rapporto va misurato SUL TESTO VERO, con il suo peso e la sua spaziatura. La prima volta l'avevo preso a peso normale e mi era uscito 106,60%: sbagliato di quasi cinque punti, perche' il titolone e' in grassetto con la spaziatura stretta. Misurato a 60px, peso 700, spaziatura -2.52px il rapporto vero e' 101,76%, e con 106,60% il titolo andava su TRE righe invece di due — 64 pixel di salto, peggio di prima. Archivo (il testo corrente) e' il 97,80% del suo ripiego. Vanno messi nella pila SUBITO DOPO il carattere vero. */ @font-face{font-family:"Space Grotesk ripiego";size-adjust:101.76%; src:local("Helvetica Neue"),local("Arial")} @font-face{font-family:"Archivo ripiego";size-adjust:97.80%; src:local("Helvetica Neue"),local("Arial")} @font-face{font-family:"DM Mono ripiego";size-adjust:99.66%; src:local("Menlo"),local("Consolas"),local("Courier New")} /* solo la "&": il resto dell'alfabeto non serve e peserebbe 143 KB */ @font-face{font-family:"Newsreader";font-style:italic;font-weight:400 600; font-display:swap;src:url("font/newsreader-italic.woff2?v=2026-09-11") format("woff2"); unicode-range:U+26} /* ============================================================================= P&P Design — foglio di stile condiviso DIREZIONE: STUDIO TECNOLOGICO — grotesco su grotesco, niente serif: la tipografia è quella di uno studio di software, non di una bottega. Fondo chiaro e freddo, la profondità si fa con il chiarore e con la griglia. REGOLE: il colore serve a marcare, mai a riempire; ogni angolo arrotondato deve giustificarsi (le tessere sono quadre); niente sezioni cupe che spengono la pagina. FIRMA: il quadrato del logo diventa il modulo del sito — mosaico dell'hero, marcatori di sezione, riquadri degli impegni, anteprime dei lavori, e la tendina che copre il passaggio tra le pagine. Una idea sola, a cinque scale. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. TOKEN -------------------------------------------------------------------------- */ :root{ /* superfici e inchiostri — neutri freddi: il caldo appesantisce, il freddo asciuga */ --paper:#F6F9F8; --surface:#FFFFFF; --sunk:#EDF3F1; --ink:#0B1412; --ink-soft:#454F4C; --ink-mute:#606B67; --line:#DDE7E3; --line-soft:#EAF0EE; /* marca */ --green:#0E6E4F; --green-lt:#25A97A; --green-soft:#E4F0EA; --ochre:#B5721F; --ochre-soft:#F7EBDB; /* L'ocra del marchio va bene come segno grafico ma sul testo piccolo si ferma a 3.8:1. --ochre-ink e' la stessa famiglia, portata sopra il 4.5:1. */ --ochre-ink:#8F5A17; /* Due inchiostri distinti, perché i due verdi hanno luminosità opposte: --on-green sta sul verde profondo, --btn-ink sul verde chiaro. Usare lo stesso per entrambi manda il pulsante sotto il 3:1. */ --on-green:#FFFFFF; --btn-ink:#04140E; /* il fondo dell'hero segue il tema: in chiaro è luce, non notte */ --hero-bg:#EAF3EF; --hero-glow:rgba(37,169,122,.20); --hero-glow-2:rgba(120,205,255,.14); /* le tessere del mosaico, in rgb sciolto: il canvas le legge da qui */ --tile-rgb:14,110,79; --tile-rgb-2:181,114,31; --tile-a:.34; /* i pannelli della scena 3D */ --pane-bg:#FFFFFF; --pane-line:#DCE7E2; --pane-shadow:0 30px 64px -28px rgba(11,50,38,.30); --pane-ink:#0B1412; --pane-mute:#68746F; --pane-sunk:#F2F7F5; /* Caratteri. Il serif nel corpo faceva "bottega artigiana": sostituito con Archivo. Space Grotesk nei titoli porta il carattere tecnico senza gridare. È il cambio che sposta la percezione più di qualsiasi altra cosa. */ --display:"Space Grotesk","Space Grotesk ripiego","Helvetica Neue",Arial,sans-serif; --body:"Archivo","Archivo ripiego","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono","DM Mono ripiego",ui-monospace,Menlo,monospace; /* misure */ --pad:clamp(20px,5vw,34px); --maxw:1100px; --r-sm:4px; --r-md:8px; --r-lg:14px; /* scala deliberata, non 12px ovunque */ --tile:34px; /* movimento — curve custom: quelle di serie sono troppo deboli */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --t-press:160ms; /* pressione di un pulsante */ --t-ui:220ms; /* menu, apri/chiudi: sotto i 300ms */ --t-tell:800ms; /* rivelazioni allo scroll: rare, possono respirare */ color-scheme:light; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --paper:#080B0A; --surface:#141D1A; --sunk:#0C1210; --ink:#EAF3EF; --ink-soft:#AEBEB8; --ink-mute:#8A9A93; --line:#243330; --line-soft:#1A2522; --green:#34C892; --green-lt:#6FE7BC; --green-soft:#0C231A; --ochre:#E0A85F; --ochre-soft:#241C12; --ochre-ink:#E0A85F; --on-green:#03120C; --btn-ink:#03120C; --hero-bg:#060908; --hero-glow:rgba(52,200,146,.26); --hero-glow-2:rgba(90,180,255,.12); --tile-rgb:52,200,146; --tile-rgb-2:224,168,95; --tile-a:.16; --pane-bg:#0C1512; --pane-line:#1D2A25; --pane-shadow:0 34px 70px -28px rgba(0,0,0,.95); --pane-ink:#E8EFEC; --pane-mute:#84968E; --pane-sunk:#080F0D; color-scheme:dark; }} :root[data-theme="dark"]{ --paper:#080B0A; --surface:#141D1A; --sunk:#0C1210; --ink:#EAF3EF; --ink-soft:#AEBEB8; --ink-mute:#8A9A93; --line:#243330; --line-soft:#1A2522; --green:#34C892; --green-lt:#6FE7BC; --green-soft:#0C231A; --ochre:#E0A85F; --ochre-soft:#241C12; --ochre-ink:#E0A85F; --on-green:#03120C; --btn-ink:#03120C; --hero-bg:#060908; --hero-glow:rgba(52,200,146,.26); --hero-glow-2:rgba(90,180,255,.12); --tile-rgb:52,200,146; --tile-rgb-2:224,168,95; --tile-a:.16; --pane-bg:#0C1512; --pane-line:#1D2A25; --pane-shadow:0 34px 70px -28px rgba(0,0,0,.95); --pane-ink:#E8EFEC; --pane-mute:#84968E; --pane-sunk:#080F0D; color-scheme:dark; } /* Blocchi accentati: rompono il ritmo SENZA spegnere la pagina. Non piu' un pannello notte: una lastra verde pallida, luminosa. */ .inv{ --paper:#E7F1ED; --surface:#F4FAF8; --sunk:#DFEDE8; --line:#CBDED7; --line-soft:#D9E9E3; background:var(--paper); color:var(--ink); position:relative; } /* reticolo di tessere in filigrana: la firma, appena percepibile */ .inv::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/var(--tile) var(--tile), linear-gradient(var(--line) 1px,transparent 1px) 0 0/var(--tile) var(--tile); -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%)} .inv > *{position:relative;z-index:1} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .inv{ --paper:#0C1512; --surface:#182320; --sunk:#0A110F; --line:#20302A; --line-soft:#18241F; }} :root[data-theme="dark"] .inv{ --paper:#0C1512; --surface:#182320; --sunk:#0A110F; --line:#20302A; --line-soft:#18241F; } /* ----------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *{box-sizing:border-box} html{overflow-x:clip;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--body);font-size:16.5px;line-height:1.62;letter-spacing:-.003em; -webkit-font-smoothing:antialiased;overflow-x:clip; transition:background var(--t-ui) ease,color var(--t-ui) ease; } img,svg,canvas{max-width:100%;display:block} a{color:inherit} /* dettagli su misura: selezione e messa a fuoco disegnate, non di serie */ ::selection{background:var(--green);color:var(--on-green)} :focus-visible{outline:2px solid var(--green-lt);outline-offset:3px;border-radius:var(--r-sm)} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative} /* NOTA: usare SEMPRE padding-inline qui dentro. La shorthand `padding` in un discendente con la stessa specificità azzera il padding laterale di .wrap. */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:var(--on-green); padding:12px 18px;border-radius:0 0 var(--r-md) 0;font-family:var(--display);text-decoration:none} .skip:focus{left:0} h1,h2,h3,h4{text-wrap:balance;font-family:var(--display);letter-spacing:-.03em;line-height:1.06} /* max-width in em, NON in ch. L'unita' ch e' la larghezza dello zero del carattere corrente: quello di Space Grotesk e' largo 64,77 contro i 55,56 del ripiego, il 16,6% in piu'. Finche' il carattere non arriva la scatola del titolo e' quindi tutt'altra, il testo va a capo in un altro punto e l'hero si accorcia di 64 pixel quando il carattere atterra. In em non dipende da niente. 17ch di Space Grotesk = 11.01em. */ h1{font-weight:700;font-size:clamp(34px,6vw,60px);letter-spacing:-.042em;margin:0 0 20px;max-width:11.01em} h2{font-weight:700;font-size:clamp(26px,3.8vw,40px);letter-spacing:-.035em;margin:0 0 14px;max-width:13.60em} h3{font-weight:600;font-size:clamp(19px,2.4vw,22px);letter-spacing:-.02em;margin:0 0 8px} /* L'enfasi nei titoli era un corsivo serif: elegante ma da rivista. Ora è il verde del marchio a peso normale: stacca senza cambiare voce. */ h1 em,h2 em,h3 em{font-style:normal;font-weight:400;color:var(--green)} p{margin:0 0 1em} p:last-child{margin-bottom:0} .lede{font-size:clamp(17px,2.1vw,20px);color:var(--ink-soft);max-width:33.20em;margin:0 0 34px} .measure{max-width:68ch} /* Etichetta di sezione: una pastiglia con il pallino verde. È lo stesso segno dell'occhiello dell'hero, ripetuto identico su ogni sezione: è quel ritorno che fa sembrare il sito un sistema invece di una sequenza di pezzi. */ .label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--green);margin:0 0 18px;display:inline-flex;align-items:center;gap:10px; padding:8px 16px 8px 14px;border:1px solid var(--line);border-radius:999px; background:var(--surface);width:fit-content} .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green); flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent)} /* etichettina piatta, per le voci dentro una scheda: non è una sezione */ .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-mute);display:flex;align-items:center;gap:10px;margin:0} .tag::before{content:"";width:9px;height:9px;background:var(--green);flex:none} section{position:relative;padding-block:clamp(62px,8vw,104px)} .rule{height:1px;background:var(--line);border:0;margin:0} /* ----------------------------------------------------------------------------- 3. RIVELAZIONI ALLO SCROLL Sono rare e viste una volta sola: possono durare più di 300ms. -------------------------------------------------------------------------- */ .rv{opacity:0;transform:translateY(20px); transition:opacity var(--t-tell) var(--ease-out),transform var(--t-tell) var(--ease-out)} .rv.in{opacity:1;transform:none} /* Chi era gia' sullo schermo al caricamento si accende senza transizione: il contenuto sopra la piega non si "rivela", c'e' e basta. Cosi' il browser lo disegna subito invece di aspettare il JavaScript. */ .rv.subito,.sp.subito,.slide.subito,.clipin.subito{transition:none!important; animation:none!important;transition-delay:0s!important} .rv[data-d="1"]{transition-delay:60ms}.rv[data-d="2"]{transition-delay:120ms} .rv[data-d="3"]{transition-delay:180ms}.rv[data-d="4"]{transition-delay:240ms} .rv[data-d="5"]{transition-delay:300ms} /* titoli: maschera parola per parola. Follow-through: le parole non arrivano insieme */ .w{display:inline-block;overflow:hidden;vertical-align:bottom; padding:.02em .06em .14em 0;margin:0 -.06em -.14em 0} .wi{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out)} .sp.in .wi{transform:none} /* variante a lettere: la parola resta ferma, si alzano le lettere una a una */ .sp-let .wi{transform:none;transition:none} .sp-let .l{display:inline-block;transform:translateY(112%); transition:transform .78s var(--ease-out)} .sp-let.in .l{transform:none} /* la riga del titolo che cambia da sola: tutte le versioni nella stessa cella di griglia, cosi' l'altezza e' quella della piu' alta e non balla niente. Entrano ed escono sfocate: la sfocatura lega i due testi invece di farli sembrare due oggetti che si scambiano. */ .gira{display:grid} .gira .g{grid-area:1/1;opacity:0;filter:blur(10px);transform:translateY(.1em); transition:opacity .5s var(--ease-out),filter .5s var(--ease-out),transform .5s var(--ease-out)} .gira .g.on{opacity:1;filter:none;transform:none} @media (prefers-reduced-motion:reduce){ .gira .g{transition:none} } /* immagini e riquadri che si scoprono dal basso (clip-path, non un fade) */ .clipin{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-out)} .clipin.in{clip-path:inset(0 0 0 0)} /* ----------------------------------------------------------------------------- 4. PULSANTI -------------------------------------------------------------------------- */ .btn{ font-family:var(--display);font-weight:500;font-size:16px; background:var(--green-lt);color:var(--btn-ink); text-decoration:none;padding:14px 24px;border-radius:var(--r-md); display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer; transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-press) ease,background var(--t-press) ease; } .btn svg{width:17px;height:17px;fill:currentColor;flex:none} .btn:active{transform:scale(.97)} /* l'interfaccia deve rispondere al dito */ .btn-solid{background:var(--green);color:var(--on-green)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn-lg{font-size:17px;padding:16px 28px} @media (hover:hover) and (pointer:fine){ .btn:hover{box-shadow:0 14px 30px -14px var(--green-lt)} .btn-ghost:hover{border-color:var(--green);color:var(--green)} } .btn-txt{font-family:var(--display);font-size:16px;color:var(--ink-soft);text-decoration:none; display:inline-block;border-bottom:1px solid var(--line); padding-bottom:5px;padding-top:14px;margin-top:-14px; transition:color var(--t-press) ease,border-color var(--t-press) ease} @media (hover:hover) and (pointer:fine){ .btn-txt:hover{color:var(--green);border-color:var(--green)} } /* ----------------------------------------------------------------------------- 5. INTESTAZIONE -------------------------------------------------------------------------- */ .hdr{position:fixed;inset:0 0 auto;z-index:60;border-bottom:1px solid transparent; transition:background var(--t-ui) ease,border-color var(--t-ui) ease} .hdr.solid{background:color-mix(in srgb,var(--paper) 87%,transparent); backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)} .bar{display:flex;align-items:center;gap:16px;padding-block:13px} /* il marchio e' un link, quindi e' un bersaglio: 38px di altezza stanno sotto i 44 che vuole un pollice. Si alza la zona che si preme, non il disegno. */ .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:1;min-width:0; min-height:44px} .glyph{width:38px;height:38px;border-radius:10px;background:var(--green); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); display:grid;place-items:center;flex:none;position:relative; transform:perspective(420px) rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg)) rotate(var(--gz,0deg)) scale(var(--gs,1)); transition:transform 340ms var(--ease-out),box-shadow 340ms var(--ease-out)} /* il riflesso che scorre sul marchio quando ci passi sopra */ .glyph::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%); opacity:0;transform:translateX(-70%); transition:opacity .25s ease,transform .75s var(--ease-out)} /* Il marchio resta in Newsreader corsivo: e' la forma dei PNG del logo. Caricato in sottoinsieme di un solo carattere, pesa poche centinaia di byte. */ .glyph i{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:600; font-size:24.5px;line-height:1;color:#fff;translate:-.5px -1.5px} @media (hover:hover) and (pointer:fine){ .brand:hover .glyph{--gs:1.07;--gz:-6deg; box-shadow:0 12px 26px -12px color-mix(in srgb,var(--green) 90%,transparent)} .brand:hover .glyph::after{opacity:1;transform:translateX(70%)} .brand:hover .bname .e{color:var(--green-lt)} /* la & si sposta appena al contrario del riquadro: da' profondita' */ .brand:hover .glyph i{transform:translate(calc(var(--gy,0deg) * -.06), calc(var(--gx,0deg) * .06))} } .glyph i{transition:transform 340ms var(--ease-out)} @media (prefers-reduced-motion:reduce){ .glyph,.glyph i,.glyph::after{transition:none;transform:none!important} } .bname{font-family:var(--display);font-weight:700;font-size:19.5px;letter-spacing:-.025em; white-space:nowrap;display:block;transition:color var(--t-ui) ease} .bname .e{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:600; font-size:1.08em;color:var(--green);letter-spacing:0; padding-inline:.03em;transition:color var(--t-ui) ease} /* "Design" pesa meno di "P&P": la prima parte e' il nome, la seconda lo qualifica */ .bname .d{font-weight:400;letter-spacing:.01em;margin-left:.06em} /* era 9px: il testo piu' piccolo di tutto il sito, e sta nel piede dove nessuno ha voglia di strizzare gli occhi. 10,5px e' il minimo che regge in maiuscolo mono. */ .bsub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-mute);display:block;margin-top:1px;white-space:nowrap; transition:color var(--t-ui) ease} /* In cima non c'e' larghezza per la riga sotto: andava a capo su due righe e sbilanciava il blocco. Il quadratino piu' il nome bastano; "Programmazione & Progettazione" resta in fondo alla pagina, dove lo spazio c'e'. */ .hdr .bsub{display:none} /* nove voci: l'intestazione si prende un po' piu' di larghezza del testo sotto, se no il menu finiva sopra il logo tra 1300 e 1500 pixel */ .hdr .wrap{max-width:1240px} .nav{display:flex;gap:clamp(12px,1.3vw,19px);font-family:var(--display);font-size:14.5px;white-space:nowrap} .nav a{text-decoration:none;color:var(--ink-soft);position:relative;padding-block:3px; transition:color var(--t-press) ease} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--green); transform:scaleX(0);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)} .nav a[aria-current="page"]{color:var(--ink)} .nav a[aria-current="page"]::after{transform:scaleX(1)} @media (hover:hover) and (pointer:fine){ .nav a:hover::after{transform:scaleX(1)} } .tools{display:flex;align-items:center;gap:8px;flex:none} .icobtn{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--line); background:transparent;color:var(--ink-soft);display:grid;place-items:center; cursor:pointer;padding:0; transition:border-color var(--t-press) ease,color var(--t-press) ease,transform var(--t-press) var(--ease-out)} .icobtn:active{transform:scale(.94)} .icobtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} @media (hover:hover) and (pointer:fine){ .icobtn:hover{color:var(--green);border-color:var(--green)} } .icobtn .sun{display:none} :root[data-theme="dark"] .icobtn .sun{display:block} :root[data-theme="dark"] .icobtn .moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .icobtn .sun{display:block} :root:not([data-theme="light"]) .icobtn .moon{display:none} } #burger{display:none} /* barra di lettura */ .read{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0); transform-origin:left;background:var(--green);opacity:0;transition:opacity var(--t-ui) ease} .hdr.solid .read{opacity:1} /* menu su telefono */ /* Menu su telefono: non piu' una tendina sotto l'intestazione, ma un pannello a tutta altezza che entra da sinistra, con le voci che arrivano una dopo l'altra. Le voci sono grosse: si premono con il pollice, non con la punta. */ /* IL PANNELLO SCORRE DA SOLO (7 ottobre 2026, segnalato da Giuseppe). Prima era `justify-content:center` con `overflow:visible` e dieci voci dentro: su iPhone SE, su un Android piccolo e su iPhone 8 Plus le voci erano 780-810px dentro uno schermo da 640-736, quindi venivano tagliate SOPRA E SOTTO — la prima a -50px, l'ultima oltre il bordo — e non c'era modo di arrivarci, perche' il pannello non era scorrevole. Il dito scivolava sulla pagina dietro, che invece scorreva: e' il difetto che Giuseppe ha visto. Tre pezzi, e servono tutti e tre: - `overflow-y:auto` perche' il pannello scorra; - `margin:auto 0` sull'elenco al posto di `justify-content:center`: centra quando c'e' spazio, ma quando non ce n'e' NON taglia (justify-content si', ed e' esattamente come nasceva il guasto); - `overscroll-behavior:contain` perche' arrivati in fondo lo scorrimento non passi alla pagina sotto. */ .mnav{position:fixed;inset:0 auto 0 0;width:min(86vw,420px);z-index:60; display:flex;flex-direction:column; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background:linear-gradient(150deg,var(--surface),var(--paper) 62%); border-right:1px solid var(--line); box-shadow:34px 0 70px -30px rgba(0,0,0,.75); transform:translateX(-102%);visibility:hidden; transition:transform .48s var(--ease-out),visibility 0s .48s} /* lo spazio in cima tiene la prima voce sotto l'intestazione fissa (71px), che col menu aperto resta visibile; in fondo si rispetta la barra del telefono */ .mnav ul{list-style:none;margin:auto 0; padding:85px clamp(26px,7vw,44px) calc(26px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:2px} .mnav a{display:block;padding:15px 0;text-decoration:none;font-family:var(--display); font-weight:600;letter-spacing:-.02em; font-size:clamp(26px,7.4vw,34px);color:var(--ink-soft); opacity:0;transform:translateX(-26px); transition:color var(--t-ui) ease,opacity .5s var(--ease-out),transform .5s var(--ease-out)} .mnav a[aria-current="page"]{color:var(--green)} /* le voci arrivano una dopo l'altra. Erano scritte fino alla settima, ma le voci sono DIECI: le ultime tre restavano a ritardo zero, cioe' entravano per prime. Se se ne aggiunge un'altra, va aggiunta anche qui. */ .mnav li:nth-child(1) a{transition-delay:.10s} .mnav li:nth-child(2) a{transition-delay:.14s} .mnav li:nth-child(3) a{transition-delay:.18s} .mnav li:nth-child(4) a{transition-delay:.22s} .mnav li:nth-child(5) a{transition-delay:.26s} .mnav li:nth-child(6) a{transition-delay:.30s} .mnav li:nth-child(7) a{transition-delay:.34s} .mnav li:nth-child(8) a{transition-delay:.38s} .mnav li:nth-child(9) a{transition-delay:.42s} .mnav li:nth-child(10) a{transition-delay:.46s} /* il velo che spegne la pagina dietro */ .velo-menu{position:fixed;inset:0;z-index:55;background:rgba(3,7,6,.62); backdrop-filter:blur(3px);opacity:0;visibility:hidden; transition:opacity .4s ease,visibility 0s .4s} /* `overflow:hidden` sul body NON ferma il dito su iPhone: la pagina scorre lo stesso. Quello che la ferma davvero e' togliere il gesto al velo e all'intestazione, che col menu aperto sono tutto quello che si tocca fuori dal pannello. */ body.menu-aperto .velo-menu, body.menu-aperto .hdr{touch-action:none} body.menu-aperto .velo-menu{opacity:1;visibility:visible;transition-delay:0s} /* con il menu aperto il tasto WhatsApp fisso sparisce: sta sopra a tutto e coprirebbe le voci */ body.menu-aperto .fab{opacity:0;pointer-events:none;transform:translateY(14px); transition:opacity .25s ease,transform .25s var(--ease-out)} @media (prefers-reduced-motion:reduce){ .mnav,.mnav a,.velo-menu{transition:none} } @media (max-width:1140px){ .nav{display:none} #burger{display:grid} .hdr .bar .btn{display:none} body.menu-aperto .mnav{transform:none;visibility:visible;transition-delay:0s} body.menu-aperto .mnav a{opacity:1;transform:none} .hdr.open{background:color-mix(in srgb,var(--paper) 95%,transparent); backdrop-filter:blur(14px);border-bottom-color:var(--line)} } /* ----------------------------------------------------------------------------- 6. HERO -------------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;isolation:isolate; background:var(--hero-bg);color:var(--ink)} #fx{position:absolute;inset:0;width:100%;height:100%;z-index:0} /* due sorgenti di luce invece di una velatura scura: la profondità si fa col chiarore. Il primo strato è una velatura del colore di fondo dietro alla colonna del testo: smorza le tessere sotto al titolo senza scurire niente. Vale per entrambi i temi. */ .hero-sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(58% 78% at 20% 48%,var(--hero-bg) 0%, color-mix(in srgb,var(--hero-bg) 55%,transparent) 42%,transparent 72%), radial-gradient(70% 55% at 12% 26%,var(--hero-glow-2),transparent 62%), radial-gradient(85% 65% at 88% 8%,var(--hero-glow),transparent 60%), radial-gradient(130% 90% at 50% 0%,transparent 42%,var(--hero-bg) 100%)} .hero-in{position:relative;z-index:2; padding-top:clamp(98px,15vw,148px);padding-bottom:clamp(58px,9vw,100px)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line); border-radius:100px;padding:6px 14px;margin:0 0 22px; background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(6px)} .dot{width:6px;height:6px;border-radius:50%;background:var(--green-lt);animation:pulse 2.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,169,122,.55)}70%{box-shadow:0 0 0 9px rgba(37,169,122,0)}100%{box-shadow:0 0 0 0 rgba(37,169,122,0)}} .hero h1 em{color:var(--green);font-weight:400} .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hnote{margin:24px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);line-height:1.8} /* zona coperta: sta accanto ai pulsanti perché è una risposta, non una nota a piè di pagina */ .zona{display:inline-flex;align-items:flex-start;gap:10px;margin:22px 0 0;padding:11px 15px; border:1px solid var(--line);border-radius:var(--r-md);max-width:44ch; background:color-mix(in srgb,var(--surface) 65%,transparent); font-size:15px;color:var(--ink-soft)} .zona svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke:var(--green); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .zona b{font-family:var(--display);font-weight:600;color:var(--ink)} @media (max-width:940px){ .hero-in{grid-template-columns:1fr;gap:38px;padding-top:96px} .hero-sticky::after{background: radial-gradient(90% 40% at 15% 20%,var(--hero-glow-2),transparent 62%), radial-gradient(95% 45% at 85% 6%,var(--hero-glow),transparent 60%), linear-gradient(180deg,color-mix(in srgb,var(--hero-bg) 82%,transparent) 0%,transparent 46%), radial-gradient(140% 90% at 50% 0%,transparent 46%,var(--hero-bg) 100%)} } /* ---------- scena 3D ---------- */ .stage{perspective:1500px;perspective-origin:52% 42%;height:clamp(340px,45vw,452px);position:relative} .deck{position:absolute;inset:0;transform-style:preserve-3d; transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,-18deg))} .pane{position:absolute;border-radius:var(--r-lg);overflow:hidden;transform-style:preserve-3d; background:var(--pane-bg);border:1px solid var(--pane-line);box-shadow:var(--pane-shadow)} .p-web{width:min(90%,442px);height:78%;left:0;top:6%} .tb{display:flex;gap:5px;align-items:center;padding:9px 12px;background:var(--pane-sunk); border-bottom:1px solid var(--pane-line)} .tb i{width:7px;height:7px;border-radius:50%;background:var(--pane-line);display:block} .tb u{flex:1;margin-left:8px;height:16px;border-radius:20px; background:color-mix(in srgb,var(--pane-line) 40%,transparent);text-decoration:none; font-family:var(--mono);font-size:8.5px;color:var(--pane-mute);display:flex;align-items:center; padding:0 8px;overflow:hidden;white-space:nowrap} .site{background:#FFFFFF;color:#0B1412;height:calc(100% - 34px);overflow:hidden;position:relative} .s-top{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #E4EDE9} .s-logo{width:17px;height:17px;border-radius:var(--r-sm);background:#0E6E4F;flex:none} .s-name{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:-.01em;flex:1} .s-nav{display:flex;gap:8px} .s-nav b{font-family:var(--display);font-weight:400;font-size:7.5px;color:#7B8480} .s-open{font-family:var(--mono);font-size:6.5px;letter-spacing:.08em;text-transform:uppercase; background:#E4F0EA;color:#0E6E4F;border-radius:20px;padding:3px 7px} .s-hero{padding:14px 12px 12px;background:linear-gradient(160deg,#EAF3EF,#FFFFFF)} .s-kick{font-family:var(--mono);font-size:6.5px;letter-spacing:.16em;text-transform:uppercase;color:#B5721F;margin:0} .s-h1{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.025em;line-height:1.05;margin:5px 0} .s-p{font-size:9px;color:#59635F;margin:0;line-height:1.5} .s-btns{display:flex;gap:6px;margin-top:10px} .s-b1{font-family:var(--display);font-size:8px;background:#0E6E4F;color:#fff;border-radius:var(--r-sm);padding:5px 9px} .s-b2{font-family:var(--display);font-size:8px;border:1px solid #D7E3DE;color:#454F4C;border-radius:var(--r-sm);padding:5px 9px} .s-dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:11px 12px 0} .s-dish{border-radius:var(--r-sm);overflow:hidden;border:1px solid #E6EFEB;background:#fff} .s-img{height:32px} .d1{background:linear-gradient(140deg,#E8B45C,#C97B2E)} .d2{background:linear-gradient(140deg,#C8543E,#8F3227)} .d3{background:linear-gradient(140deg,#8FAF63,#4E7A46)} .s-dish u{display:block;text-decoration:none;font-family:var(--display);font-size:7px;padding:4px 5px 5px;color:#28322F} .s-strip{display:flex;gap:5px;padding:11px 12px} .s-strip s{flex:1;height:5px;border-radius:20px;background:#E6EFEB;text-decoration:none} .p-ph{width:138px;height:274px;right:-1%;bottom:-6%;border-radius:24px;transform:translateZ(104px); background:#0B1412;padding:8px 6px 7px} .ph-scr{position:relative;height:100%;border-radius:18px;overflow:hidden;background:#FFFFFF;color:#0B1412} .notch{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:38px;height:4px; border-radius:20px;background:#0B1412;z-index:3} /* Le tappe sono misurate, non a occhio: schermo 294px, il pulsante fisso ne occupa 52, restano 242 di finestra su 428 di contenuto -> scorrimento max 186. Tre tappe da 93px: nessuna riga finisce mai sotto il pulsante. Se cambi il contenuto del telefono, rimisura questi tre numeri. */ .ph-roll{position:absolute;inset:0;animation:roll 15s cubic-bezier(.65,0,.35,1) infinite} @keyframes roll{ 0%,16%{transform:translateY(0)} 30%,46%{transform:translateY(-93px)} 60%,82%{transform:translateY(-186px)} 100%{transform:translateY(0)} } .ph-hd{padding:16px 10px 9px;background:linear-gradient(160deg,#EAF3EF,#FFFFFF);border-bottom:1px solid #E6EFEB} .ph-hd .s-name{font-size:12px} .ph-hd .s-open{display:inline-block;margin-top:5px} .ph-sec{padding:9px 10px;border-bottom:1px solid #EDF3F1} .ph-sec p{margin:0} .ph-k{font-family:var(--mono);font-size:6.5px;letter-spacing:.16em;text-transform:uppercase;color:#B5721F} .ph-t{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:-.01em;margin-top:3px} .ph-d{font-size:8.5px;color:#59635F;margin-top:2px;line-height:1.45} .ph-row{display:flex;align-items:center;gap:7px;margin-top:7px} .ph-row b{width:26px;height:26px;border-radius:var(--r-sm);flex:none} .ph-map{height:52px;border-radius:var(--r-sm);margin-top:6px;position:relative;overflow:hidden; background:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/13px 13px, linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/13px 13px, linear-gradient(150deg,#EAF0EA,#DCE6DE)} .ph-map i{position:absolute;left:50%;top:48%;width:9px;height:9px;margin:-5px 0 0 -5px; border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#C8543E} .ph-cta{position:absolute;left:7px;right:7px;bottom:7px;z-index:3;font-family:var(--display); font-weight:500;font-size:10px;text-align:center;background:#0E6E4F;color:#fff; border-radius:var(--r-md);padding:8px 0;box-shadow:0 8px 18px -8px rgba(14,110,79,.9)} .p-card{width:190px;height:116px;left:-8%;bottom:1%;border-radius:var(--r-lg);transform:translateZ(172px); background:var(--pane-bg);border:1px solid var(--pane-line)} .card-in{padding:14px;display:flex;flex-direction:column;height:100%;justify-content:space-between} .k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre-ink);margin:0} .stars{color:#E8B84B;font-size:13px;letter-spacing:2px;margin:6px 0 0} .nfc{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8.5px;color:var(--pane-mute); letter-spacing:.1em;text-transform:uppercase} .nfc em{font-style:normal;display:inline-block;animation:tap 2.4s var(--ease-out) infinite} @keyframes tap{0%,72%,100%{transform:translateY(0);opacity:.55}84%{transform:translateY(-3px);opacity:1}} @media (max-width:940px){.stage{height:352px}.p-web{width:80%;left:2%}.p-ph{right:0}.p-card{left:-2%}} @media (max-width:520px){.p-card{display:none}.p-web{width:86%;left:0}.p-ph{width:126px;height:250px;right:-2%}} /* ----------------------------------------------------------------------------- 7. FASCIA IMPEGNI — quattro tessere, non quattro statistiche -------------------------------------------------------------------------- */ /* Gli impegni entrano da destra e da sinistra mentre scorri: niente contatori. Righe alternate, così il movimento ha un verso e non è un elenco che sfarfalla. */ /* I quattro impegni: erano incolonnati e lasciavano mezza pagina vuota a destra. Ora sono una riga sola di quattro colonne — si leggono in un colpo d'occhio e occupano un terzo dello spazio. */ .pledges{border-block:1px solid var(--line);background:var(--sunk);overflow:hidden} .pledges .wrap{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,38px);padding-block:clamp(38px,5vw,58px)} @media (max-width:900px){.pledges .wrap{grid-template-columns:repeat(2,1fr);gap:30px}} @media (max-width:520px){.pledges .wrap{grid-template-columns:1fr;gap:24px}} .pledge{display:block;padding:0;border-top:0; border-left:1px solid var(--line-soft);padding-left:clamp(16px,2vw,26px)} .pledge:first-child{border-left:0;padding-left:0} @media (max-width:900px){ .pledge:nth-child(3){border-left:0;padding-left:0} } @media (max-width:520px){ .pledge{border-left:0;padding-left:0} } .pledge .num{font-family:var(--display);font-weight:700;font-size:clamp(42px,5vw,62px); letter-spacing:-.06em;line-height:.86;color:var(--green); font-variant-numeric:tabular-nums;display:block;margin-bottom:12px} .pledge .unit{font-family:var(--display);font-weight:600;font-size:16.5px; letter-spacing:-.01em;color:var(--ink);display:block;margin-bottom:7px} .pledge .say{font-size:14.2px;color:var(--ink-soft);margin:0;line-height:1.55;max-width:none} /* entrata laterale — la sola cosa che si muove è transform+opacity */ .slide{opacity:0;transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out)} .slide-r{transform:translateX(56px)} .slide-l{transform:translateX(-56px)} .slide.in{opacity:1;transform:none} @media (max-width:560px){.slide-r,.slide-l{transform:translateX(28px)}} /* ----------------------------------------------------------------------------- 8. SERVIZI — filetti e numerali, non card con iconcine tonde -------------------------------------------------------------------------- */ .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1200px} @media (max-width:1000px){.svcs{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.svcs{grid-template-columns:1fr}} /* Schede staccate, con l'anteprima viva in cima. Si sollevano e si inclinano verso il cursore: pochi gradi, quanto basta a farle sembrare oggetti. */ .svc{position:relative;padding:0;overflow:hidden;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg); transform:perspective(1000px) translateX(var(--tx,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--su,0px)); transition:transform 260ms var(--ease-out),border-color var(--t-ui) ease, box-shadow 260ms var(--ease-out),opacity 700ms var(--ease-out)} /* Entrata dai lati: le dispari arrivano da sinistra, le pari da destra. Vale per qualunque scheda che abbia translateX(var(--tx)) nel suo transform. */ .sv-l,.sv-r{opacity:0} .sv-l{--tx:-64px} .sv-r{--tx:64px} .sv-l.in,.sv-r.in{opacity:1;--tx:0px} .svc.sv-l,.svc.sv-r{transition-duration:700ms,var(--t-ui),260ms,700ms} @media (hover:hover) and (pointer:fine){ .svc:hover{--su:-7px;border-color:color-mix(in srgb,var(--green) 42%,var(--line)); box-shadow:0 26px 48px -26px rgba(0,0,0,.55)} } .svc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2; border-radius:inherit; background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--green) 14%,transparent),transparent 62%); transition:opacity var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .svc:hover::before{opacity:1} } .svc .corpo{padding:22px 22px 24px} .svc h3{margin:0 0 8px;font-size:19px} /* Il numero d'ordine, grande e appena visibile. Non e' decorazione a caso: dice che le schede sono un elenco e non un mucchio, e costa una riga di CSS. */ .svc .n,.riq-c .n{position:absolute;z-index:3;display:block;margin:0; font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:1; color:color-mix(in srgb,var(--ink) 13%,transparent);pointer-events:none; transition:color var(--t-ui) ease} .svc .n{top:12px;right:16px;font-size:34px} /* Sui riquadri e sulle griglie il numero NON sta nel markup: lo conta il CSS. Cosi' vale per ogni griglia, anche quelle che scriveremo domani, e nessuno si ritrova a rinumerare a mano dopo aver spostato una scheda. */ .riq,.tech{counter-reset:scheda} /* Il fondo delle schede e' allargato a 58px nelle regole di .tech > div e .riq-c, non qui: quelle usano la scrittura abbreviata di padding e piu' in basso nel foglio scavalcavano qualsiasi padding-bottom scritto in questo punto. Senza quello spazio l'ultima riga di testo finisce sotto la cifra. */ .riq-c,.tech > div{counter-increment:scheda;position:relative} .riq-c::after,.tech > div::after{content:counter(scheda,decimal-leading-zero); position:absolute;bottom:14px;right:18px;pointer-events:none; font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.04em; line-height:1;color:color-mix(in srgb,var(--ink) 12%,transparent); transition:color var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .svc:hover .n,.riq-c:hover::after,.tech > div:hover::after{ color:color-mix(in srgb,var(--green) 32%,transparent)} } .svc p{color:var(--ink-soft);margin:0 0 12px;font-size:14.5px;line-height:1.55;max-width:none} .svc .foot{font-family:var(--mono);font-size:11px;color:var(--ink-mute);letter-spacing:.03em;margin:0} /* i link dentro il piede della scheda erano alti 14px: impossibili da centrare col pollice. Cresce solo l'area, non il testo. */ .svc .foot a{display:inline-block;padding-block:15px;margin-block:-15px; color:var(--green);text-decoration:none;font-weight:500; transition:gap .25s ease} .svc .foot:last-child{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)} @media (hover:hover) and (pointer:fine){ .svc:hover .foot a{letter-spacing:.02em} } /* ---- le anteprime: mini interfacce vere, disegnate in HTML ---- */ .ante{position:relative;height:158px;overflow:hidden;flex:none; border-bottom:1px solid var(--line);background:var(--pane-sunk)} .ante *{box-sizing:border-box} .ante .fin{position:absolute;inset:14px 14px -30px;background:#fff;border-radius:8px 8px 0 0; box-shadow:0 12px 26px -14px rgba(0,0,0,.45);overflow:hidden; transition:transform 420ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .svc:hover .ante .fin{transform:translateY(-6px)} } .ante .top{height:16px;background:#EEF3F1;display:flex;align-items:center;gap:4px;padding:0 7px} .ante .top i{width:5px;height:5px;border-radius:50%;background:#CBD8D3;display:block} .ante .top u{flex:1;height:6px;border-radius:20px;background:#DDE7E3;margin-left:6px; text-decoration:none;display:block} .ante b,.ante s{display:block;border-radius:3px;text-decoration:none} .ante .bar{height:7px;background:#DCE7E2} .ante .ttl{height:9px;background:#16221E;width:58%} .ante .ttl.v{background:var(--green);width:38%} .ante .btn{height:13px;width:56px;border-radius:4px;background:var(--green)} /* 01 sito vetrina */ .a-sito .cor{padding:10px} .a-sito .nav{display:flex;gap:5px;margin-bottom:10px} .a-sito .nav s{height:5px;width:22px;background:#E2EBE7} .a-sito .nav s:last-child{background:var(--green);width:30px;margin-left:auto} .a-sito .griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px} .a-sito .griglia s{height:26px;border-radius:4px;background:linear-gradient(140deg,#BFDCCE,#6FAE92)} .a-sito .griglia s:nth-child(2){background:linear-gradient(140deg,#E8C88C,#C79A4E)} .a-sito .griglia s:nth-child(3){background:linear-gradient(140deg,#9DBBD8,#5C87AE)} /* 02 WordPress: barra scura in alto e colonna a sinistra */ .a-wp .fin{background:#F1F1F1} .a-wp .adm{height:13px;background:#1D2327;display:flex;align-items:center;gap:5px;padding:0 6px} .a-wp .adm s{height:4px;width:16px;background:#54636B;border-radius:2px} .a-wp .cor{display:flex;height:calc(100% - 13px)} .a-wp .lat{width:34px;background:#23282D;padding:7px 5px;display:flex;flex-direction:column;gap:5px} .a-wp .lat s{height:5px;background:#3C4650;border-radius:2px} .a-wp .lat s:first-child{background:var(--green)} .a-wp .fog{flex:1;padding:9px;background:#fff} .a-wp .blk{height:14px;border:1px dashed #C9D6D1;border-radius:4px;margin-bottom:6px} .a-wp .blk.pieno{border-style:solid;border-color:var(--green);background:#F0FAF6} /* 03 e-commerce */ .a-shop .cor{padding:9px} .a-shop .testa{display:flex;align-items:center;gap:5px;margin-bottom:8px} .a-shop .testa s{height:5px;width:26px;background:#E2EBE7} .a-shop .cart{margin-left:auto;width:16px;height:16px;border-radius:5px;background:var(--green); position:relative} .a-shop .cart::after{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px; border-radius:50%;background:#D9822B;border:1.5px solid #fff} .a-shop .prod{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .a-shop .prod div{border:1px solid #E6EEEA;border-radius:5px;padding-bottom:5px;overflow:hidden} .a-shop .prod i{display:block;height:30px;background:linear-gradient(140deg,#CFE4DA,#8FBBA7)} .a-shop .prod s{height:4px;background:#E2EBE7;margin:5px 5px 0} .a-shop .prod s.pr{width:52%;background:var(--green);height:5px} /* 04 gestionale */ .a-ges .fin{background:#0E1512} .a-ges .top{background:#16201C} .a-ges .top i{background:#2A3A34} .a-ges .top u{background:#22302B} .a-ges .cor{display:flex;height:calc(100% - 16px)} .a-ges .lat{width:30px;padding:7px 5px;display:flex;flex-direction:column;gap:5px; background:#0A100E} .a-ges .lat s{height:5px;background:#20302A;border-radius:2px} .a-ges .lat s:nth-child(2){background:var(--green)} .a-ges .fog{flex:1;padding:8px} .a-ges .kpi{display:flex;gap:5px;margin-bottom:7px} .a-ges .kpi div{flex:1;height:22px;border-radius:4px;background:#16211D;padding:4px} .a-ges .kpi s{height:4px;width:60%;background:var(--green);border-radius:2px} .a-ges .kpi div:nth-child(2) s{background:#D9A05B;width:44%} .a-ges .kpi div:nth-child(3) s{background:#5C87AE;width:70%} .a-ges .riga{display:flex;gap:5px;margin-bottom:4px} .a-ges .riga s{height:5px;background:#1B2622;border-radius:2px;flex:1} .a-ges .riga s:first-child{flex:0 0 22px;background:#243430} /* 05 restyling: prima e dopo, con la linea che divide */ .a-old{position:absolute;inset:14px 14px -30px;border-radius:8px 8px 0 0;overflow:hidden; background:#E9E9E6;padding:9px} .a-old s{display:block;height:6px;background:#C9C9C4;border-radius:2px;margin-bottom:6px} .a-old s:nth-child(1){width:70%;height:8px;background:#9A9A94} .a-old s:nth-child(3){width:84%}.a-old s:nth-child(4){width:60%} .a-new{position:absolute;inset:14px 14px -30px;border-radius:8px 8px 0 0;overflow:hidden; background:#fff;padding:9px; clip-path:polygon(46% 0,100% 0,100% 100%,32% 100%); transition:clip-path 520ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .svc:hover .a-new{clip-path:polygon(8% 0,100% 0,100% 100%,0% 100%)} } .a-new s{display:block;height:6px;background:#DCE7E2;border-radius:2px;margin-bottom:6px} .a-new s:nth-child(1){width:70%;height:8px;background:#16221E} .a-new s:nth-child(2){width:44%;background:var(--green);height:8px} .a-restyle .tacca{position:absolute;top:14px;bottom:0;left:50%;width:1px; background:color-mix(in srgb,var(--green) 60%,transparent);z-index:3} /* 06 card recensioni */ .a-rec{display:flex;align-items:center;justify-content:center;gap:20px;height:100%; background:radial-gradient(120% 100% at 50% 120%, color-mix(in srgb,var(--green) 16%,transparent),transparent 70%)} .a-rec .tel{width:66px;height:120px;border-radius:14px;background:#0B120F;padding:6px; border:2px solid #2C3A34;position:relative; box-shadow:0 14px 28px -14px rgba(0,0,0,.7); transition:transform 420ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .svc:hover .a-rec .tel{transform:translateY(-6px)} } .a-rec .sch{width:100%;height:100%;border-radius:7px;background:#fff;padding:6px; display:flex;flex-direction:column;gap:4px;align-items:center} .a-rec .stelle{display:flex;gap:3px;margin-top:20px} .a-rec .stelle i{width:8px;height:8px;background:#E8B44E;display:block; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .a-rec .sch s{display:block;height:5px;width:74%;background:#E2EBE7;border-radius:2px} .a-rec .carta{width:82px;height:52px;border-radius:8px;background:var(--green); position:relative;box-shadow:0 14px 26px -12px rgba(0,0,0,.6); transition:transform 420ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .svc:hover .a-rec .carta{transform:translateY(-6px) rotate(-4deg)} } .a-rec .carta::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px; border-radius:50%;border:2px solid rgba(255,255,255,.85); border-left-color:transparent;border-bottom-color:transparent; animation:nfc 2.4s ease-in-out infinite} @keyframes nfc{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.15);opacity:1}} @media (prefers-reduced-motion:reduce){.a-rec .carta::after{animation:none}} .svc .on-req{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;background:var(--ochre-soft);color:var(--ochre-ink); padding:4px 9px;border-radius:var(--r-sm);margin-left:8px;vertical-align:2px} /* ----------------------------------------------------------------------------- 10. LAVORI -------------------------------------------------------------------------- */ .work{display:grid;grid-template-columns:1.02fr 1fr;gap:34px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(22px,3.4vw,34px)} @media (max-width:820px){.work{grid-template-columns:1fr;gap:24px}} .wshot{perspective:1200px} .wshot .in-3d{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--sunk); box-shadow:0 34px 64px -36px rgba(0,0,0,.5)} .wbar{display:flex;gap:5px;align-items:center;padding:10px 12px;background:var(--sunk);border-bottom:1px solid var(--line-soft)} .wbar i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block} .wbar u{flex:1;margin-left:8px;height:15px;border-radius:20px;background:var(--paper);text-decoration:none; font-family:var(--mono);font-size:8.5px;color:var(--ink-mute);display:flex;align-items:center; padding:0 8px;overflow:hidden} .wbody{padding:24px 22px 28px;background:var(--surface)} .wbody .k{color:var(--ochre-ink)} .wbody .t2{font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,26px); letter-spacing:-.025em;margin:8px 0;color:var(--ink)} .wbody .d{font-size:14.5px;color:var(--ink-mute);margin:0} /* le tessere: qui sono gli smalti di una ceramica di Vietri */ .wtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 0} .wtiles b{display:block;height:34px} .wtiles b:nth-child(1){background:linear-gradient(140deg,#4E86B8,#2C5680)} .wtiles b:nth-child(2){background:linear-gradient(140deg,#E8C25C,#C08A28)} .wtiles b:nth-child(3){background:linear-gradient(140deg,#C8543E,#8F3227)} .wtiles b:nth-child(4){background:linear-gradient(140deg,#5FA184,#2F6B52)} .wrule{height:1px;background:var(--line-soft);margin:18px 0 13px} .wtags{display:flex;flex-wrap:wrap;gap:7px} .wtags span{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute); border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 8px} .badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;background:var(--ochre-soft);color:var(--ochre-ink); padding:5px 10px;border-radius:var(--r-sm);margin-bottom:14px} .work p{color:var(--ink-soft)} .meta{font-family:var(--mono);font-size:12px;color:var(--ink-mute);margin:0} /* griglia portfolio: regge con 1 progetto oggi e con 10 fra un anno */ .folio{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px} .folio .slot{border:1px dashed var(--line);border-radius:var(--r-lg);padding:34px 28px; display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:240px} .folio .slot p{color:var(--ink-mute);margin:0;max-width:34ch} /* ----------------------------------------------------------------------------- 11. TECNOLOGIE -------------------------------------------------------------------------- */ /* 3 colonne fisse: tutte le griglie che usano .tech hanno 6 voci, e con auto-fit ne entravano 5 lasciando un buco vuoto grande mezza sezione. */ /* Erano riquadri incollati fra loro, separati da una riga di un pixel. Ora sono schede staccate, con la stessa vita di quelle della home: si sollevano, si inclinano verso il cursore e il bordo si accende. */ .tech{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1200px} @media (max-width:900px){.tech{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.tech{grid-template-columns:1fr}} .tech > div{position:relative;background:var(--surface);padding:24px 22px 58px; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transform:perspective(1000px) translateX(var(--tx,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--su,0px)); transition:transform 260ms var(--ease-out),border-color var(--t-ui) ease, box-shadow 260ms var(--ease-out),opacity 700ms var(--ease-out)} .tech > div.sv-l,.tech > div.sv-r{transition-duration:700ms,var(--t-ui),260ms,700ms} @media (hover:hover) and (pointer:fine){ .tech > div:hover{--su:-5px;border-color:color-mix(in srgb,var(--green) 42%,var(--line)); box-shadow:0 22px 42px -24px rgba(0,0,0,.5)} } .tech > div::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; border-radius:inherit; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--green) 13%,transparent),transparent 62%); transition:opacity var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .tech > div:hover::before{opacity:1} } .tech h3{font-size:18px;margin-bottom:6px;display:flex;align-items:center;gap:9px;position:relative} .tech h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--green);flex:none} .tech p{font-size:15px;color:var(--ink-soft);margin:0;position:relative} /* ----------------------------------------------------------------------------- 12. FASCIA PREVENTIVO -------------------------------------------------------------------------- */ .band{background:var(--green);color:var(--on-green);position:relative;overflow:hidden} .band .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between; padding-block:clamp(44px,6vw,68px);position:relative;z-index:1} .band h2{color:var(--on-green);margin:0;max-width:11.66em} .band p{margin:10px 0 0;color:color-mix(in srgb,var(--on-green) 90%,var(--green));max-width:44ch} .band .btn{background:var(--on-green);color:var(--green)} @media (hover:hover) and (pointer:fine){ .band .btn:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.5)} } /* tessere in filigrana: la firma, di nuovo */ .band::before{content:"";position:absolute;inset:0;opacity:.09; background:linear-gradient(90deg,var(--on-green) 1px,transparent 1px) 0 0/var(--tile) var(--tile), linear-gradient(var(--on-green) 1px,transparent 1px) 0 0/var(--tile) var(--tile)} /* In tema scuro la lastra verde piena acceca e spezza la pagina: diventa un pannello scuro con un alone verde dietro, come i richiami del riferimento. */ :root[data-theme="dark"] .band{ background:var(--sunk); color:var(--ink); border-block:1px solid color-mix(in srgb,var(--green) 26%,var(--line))} :root[data-theme="dark"] .band::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 130% at 20% 120%, color-mix(in srgb,var(--green) 22%,transparent),transparent 68%)} :root[data-theme="dark"] .band h2{color:var(--ink)} :root[data-theme="dark"] .band p{color:var(--ink-soft)} :root[data-theme="dark"] .band .btn{background:var(--green);color:var(--btn-ink)} :root[data-theme="dark"] .band::before{opacity:.05} /* ----------------------------------------------------------------------------- 13. DOMANDE -------------------------------------------------------------------------- */ .faq{max-width:820px} .q{border-top:1px solid var(--line)} .q:last-of-type{border-bottom:1px solid var(--line)} .q summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative; font-family:var(--display);font-weight:600;font-size:clamp(17px,2.4vw,19.5px); letter-spacing:-.018em;color:var(--ink);transition:color var(--t-press) ease} .q summary::-webkit-details-marker{display:none} @media (hover:hover) and (pointer:fine){ .q summary:hover{color:var(--green)} } .q summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-8px; border-right:1.8px solid var(--green);border-bottom:1.8px solid var(--green); transform:rotate(45deg);transition:transform var(--t-ui) var(--ease-out),margin-top var(--t-ui) var(--ease-out)} .q[open] summary::after{transform:rotate(-135deg);margin-top:-3px} .q .a{padding:0 0 22px;margin:0;color:var(--ink-soft);max-width:66ch} /* ----------------------------------------------------------------------------- 14. MODULO -------------------------------------------------------------------------- */ .form{display:grid;gap:18px;max-width:560px} .field{display:flex;flex-direction:column;gap:7px} .field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)} .field .opt{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:13px} .field input,.field textarea{ font-family:var(--body);font-size:16.5px;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;width:100%; transition:border-color var(--t-press) ease,box-shadow var(--t-press) ease} .field textarea{resize:vertical;min-height:132px;line-height:1.55} .field select{width:100%;padding:12px 40px 12px 14px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--surface);color:var(--ink); font:inherit;font-size:16px;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377877F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:17px} .field select:invalid{color:var(--ink-mute)} .field select:focus{outline:0;border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)} .field select:user-invalid{border-color:#C0522F} .field select:user-invalid+.err{display:block} .field input:focus,.field textarea:focus{outline:0;border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)} .field input:user-invalid,.field textarea:user-invalid{border-color:#C0522F} .field input:user-invalid+.err{display:block} .err{display:none;font-size:13.5px;color:#C0522F;margin:0} .hp{position:absolute;left:-9999px} .form-note{font-size:14px;color:var(--ink-mute);max-width:52ch;margin:0} .form-note a{display:inline-block;padding-block:15px;margin-block:-15px} /* ----------------------------------------------------------------------------- 15. CONTATTI E PIÈ DI PAGINA -------------------------------------------------------------------------- */ .cin{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,64px);align-items:start} @media (max-width:860px){.cin{grid-template-columns:1fr;gap:30px}} /* I dettagli diventano riquadri: etichetta piccola sopra, valore grosso sotto. Sono la stessa cosa di prima, ma letti come oggetti invece che come elenco. */ .details{display:flex;flex-direction:column;gap:12px} .detail{display:flex;flex-direction:column;gap:5px; padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--surface); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 260ms var(--ease-out),border-color var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .detail:hover{border-color:color-mix(in srgb,var(--green) 40%,var(--line))} } .detail a{display:inline-block;padding-block:9px;margin-block:-9px} .detail .v,.detail a{font-family:var(--display);font-size:17.5px;color:var(--ink); text-decoration:none;word-break:break-word} @media (hover:hover) and (pointer:fine){ .detail a:hover{color:var(--green)} } .ftr{border-top:1px solid var(--line);padding-block:34px 26px;background:var(--sunk); position:relative;overflow:hidden} /* --- IL PIE' DI PAGINA CHE SI SCOPRE -------------------------------------- Il fondo resta fermo dietro la pagina; il contenuto ci scorre sopra come un foglio e lo scopre negli ultimi centimetri. Lo accende il JS (classe "svela") solo quando il piede ci sta comodo in mezzo schermo: se e' troppo alto, o sul telefono, o col movimento ridotto, resta il piede normale. Il margine sotto il contenuto e' esattamente l'altezza del piede, quindi non si perde nulla e non si crea spazio vuoto. */ body.svela .ftr{position:fixed;left:0;right:0;bottom:0;z-index:0;border-top:0} body.svela main{position:relative;z-index:1;background:var(--paper); box-shadow:0 30px 70px -40px rgba(0,0,0,.55)} body.svela .ftr .wrap{transform:translateY(calc(var(--scopri,0) * -14px)); opacity:calc(.35 + var(--scopri,0) * .65);transition:none} /* il marchio gigante in filigrana */ .ftr-marchione{margin:clamp(18px,2.5vw,30px) 0 0;font-family:var(--display);font-weight:600; font-size:clamp(52px,11.5vw,148px);line-height:.78;letter-spacing:-.045em; color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 16%,transparent); white-space:nowrap;user-select:none;pointer-events:none; transform:translateY(calc((1 - var(--scopri,1)) * 22px));opacity:calc(.25 + var(--scopri,1) * .75)} @supports not (-webkit-text-stroke:1px red){ .ftr-marchione{color:color-mix(in srgb,var(--ink) 9%,transparent);-webkit-text-stroke:0} } .ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px} @media (max-width:1080px){.ftr-grid{grid-template-columns:1fr 1fr 1fr;gap:28px} .ftr-grid > :first-child{grid-column:1 / -1}} @media (max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr;gap:26px}} @media (max-width:460px){.ftr-grid{grid-template-columns:1fr}} .ftr h3{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px} .ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .ftr a{color:var(--ink-soft);text-decoration:none;font-family:var(--display);font-size:15px} /* Il dito non e' il cursore: sotto i 44px si sbaglia link. Il testo resta della stessa misura, cresce solo l'area che risponde al tocco. */ .ftr ul a{display:block;padding-block:13px} .ftr ul li + li{margin-top:-8px} @media (hover:hover) and (pointer:fine){ .ftr a:hover{color:var(--green)} } .ftr .sig{color:var(--ink-mute);font-size:15px;max-width:34ch;margin:12px 0 0} .ftr-base{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between; font-family:var(--mono);font-size:11.5px;color:var(--ink-mute); border-top:1px solid var(--line);margin-top:32px;padding-top:20px} /* whatsapp fisso su telefono */ .fab{position:fixed;right:16px;bottom:16px;z-index:70;display:none;align-items:center;gap:9px; background:var(--green-lt);color:var(--btn-ink);text-decoration:none;font-family:var(--display); font-weight:500;font-size:15px;padding:13px 18px;border-radius:100px; box-shadow:0 14px 32px -12px rgba(0,0,0,.55); transition:transform var(--t-press) var(--ease-out)} .fab:active{transform:scale(.97)} .fab svg{width:18px;height:18px;fill:currentColor} @media (max-width:1140px){.fab{display:inline-flex}} /* --- LA LINEETTA DI AVANZAMENTO E IL TASTO TORNA SU ------------------------ Li crea il JS: non stanno nel markup di tredici pagine, e se il JS non parte non manca niente di essenziale. La lineetta sta sopra l'intestazione e si riempie col rotolo; il tasto compare dopo due schermate. */ .avanza{position:fixed;left:0;top:0;height:2px;width:100%;z-index:80; background:var(--green);transform:scaleX(var(--p,0));transform-origin:left; pointer-events:none} .sunow{position:fixed;right:16px;bottom:16px;z-index:69;width:46px;height:46px;border-radius:50%; display:grid;place-items:center;border:1px solid var(--line);background:var(--surface); color:var(--ink);cursor:pointer; opacity:0;transform:translateY(12px);pointer-events:none; box-shadow:0 12px 28px -14px rgba(0,0,0,.5); transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out), border-color var(--t-ui) ease,background-color var(--t-ui) ease} .sunow.vista{opacity:1;transform:none;pointer-events:auto} .sunow:active{transform:scale(.94)} .sunow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} @media (hover:hover) and (pointer:fine){ .sunow:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:var(--green-soft)} } /* sotto i 1080 il tondo di WhatsApp sta a destra: il torna su passa a sinistra */ @media (max-width:1140px){.sunow{right:auto;left:16px}} @media (prefers-reduced-motion:reduce){.sunow{transition:opacity var(--t-ui) ease}} /* --- IL CURSORE "APRI" E LA SCHERMATA CHE SI APRE -------------------------- Sul computer, sopra una schermata del portfolio il puntatore si porta dietro una pastiglia verde: dice cosa succede se clicchi, senza scrivere "clicca qui" da nessuna parte. Cliccando, la schermata cresce fino a riempire la finestra e solo allora si cambia pagina: il salto sparisce, si ha l'impressione di entrare dentro il lavoro. Solo con mouse e senza movimento ridotto; col dito e con la tastiera il collegamento resta un collegamento normale. */ .apripilla{position:fixed;left:0;top:0;z-index:75;pointer-events:none; padding:9px 15px;border-radius:100px;background:var(--green-lt);color:var(--btn-ink); font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.01em; opacity:0;transform:translate3d(-100px,-100px,0) scale(.85); transition:opacity 160ms ease,transform 160ms var(--ease-out)} .apripilla.vista{opacity:1} .zoomone{position:fixed;inset:0;z-index:90;overflow:hidden;background:var(--paper); transform-origin:0 0;will-change:transform} .zoomone img{width:100%;height:100%;object-fit:cover;object-position:top} .zoomvelo{position:fixed;inset:0;z-index:89;background:var(--paper);opacity:0; transition:opacity 260ms ease} /* ----------------------------------------------------------------------------- 17. TRANSIZIONI TRA PAGINE — la tendina è una tessera che scende -------------------------------------------------------------------------- */ @view-transition{navigation:auto} @media (prefers-reduced-motion:no-preference){ ::view-transition-old(root){animation:vt-out 160ms var(--ease-out) both} ::view-transition-new(root){animation:vt-in 320ms var(--ease-out) both} } @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} .glyph{view-transition-name:ppd-glyph} /* ----------------------------------------------------------------------------- 18. MOVIMENTO RIDOTTO Meno movimento e più gentile, non zero: le dissolvenze che aiutano restano. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:opacity 200ms ease} .wi{transform:none;transition:none} .clipin{clip-path:none;transition:none} .deck{transform:rotateX(6deg) rotateY(-12deg)!important} .wshot .in-3d{transform:none!important} .dot,.nfc em,.ph-roll,.tk{animation:none} .pledge::before{transform:scaleX(1)} ::view-transition-old(root),::view-transition-new(root){animation:none} *{transition-duration:120ms!important;animation-duration:1ms!important;animation-iteration-count:1!important; scroll-behavior:auto!important} } /* ----------------------------------------------------------------------------- 19. PAGINE INTERNE -------------------------------------------------------------------------- */ /* testata: deve scavalcare l'intestazione fissa */ .page-head{padding-top:clamp(114px,14vw,170px);padding-bottom:clamp(30px,4vw,50px)} .page-head h1{max-width:12.31em} .page-head .lede{margin-bottom:24px} .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-mute);margin:0 0 18px} .crumb a{text-decoration:none;display:inline-block;padding-block:15px;margin-block:-15px} @media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--green)} } /* testo lungo */ .prose{max-width:66ch} .prose h2{font-size:clamp(23px,3vw,30px);margin:44px 0 12px} .prose h2:first-child{margin-top:0} .prose p{color:var(--ink-soft)} .prose strong{color:var(--ink);font-weight:400;font-family:var(--display)} .prose ul{padding-left:0;list-style:none;margin:0 0 1em;display:flex;flex-direction:column;gap:10px} .prose ul li{color:var(--ink-soft);padding-left:26px;position:relative} .prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--green)} .prose ol{padding-left:20px;color:var(--ink-soft)} .prose ol li{margin-bottom:10px} /* elenco "cosa è incluso": due colonne di tessere */ .checks{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0} .checks li{padding:20px 22px 22px;border-top:1px solid var(--line);position:relative} .checks li strong{display:block;font-family:var(--display);font-weight:600;font-size:17.5px; letter-spacing:-.018em;color:var(--ink);margin-bottom:5px} .checks li span{color:var(--ink-soft);font-size:15.5px} .checks li::after{content:"";position:absolute;left:22px;top:0;width:20px;height:3px; background:var(--green);transform:scaleX(0);transform-origin:left; transition:transform 620ms var(--ease-out)} .checks.in li::after{transform:scaleX(1)} .checks.in li:nth-child(2)::after{transition-delay:70ms} .checks.in li:nth-child(3)::after{transition-delay:140ms} .checks.in li:nth-child(4)::after{transition-delay:210ms} .checks.in li:nth-child(5)::after{transition-delay:280ms} .checks.in li:nth-child(6)::after{transition-delay:350ms} .checks.in li:nth-child(7)::after{transition-delay:420ms} .checks.in li:nth-child(8)::after{transition-delay:490ms} @media (hover:hover) and (pointer:fine){ .checks li{transition:background var(--t-ui) ease} .checks li:hover{background:color-mix(in srgb,var(--green) 5%,transparent)} } @media (prefers-reduced-motion:reduce){ .checks li::after{transform:scaleX(1)} } /* riquadro nota */ .note{border-left:2px solid var(--green);padding:4px 0 4px 20px;max-width:62ch;color:var(--ink-soft)} .note strong{color:var(--ink);font-weight:500;font-family:var(--display)} /* scheda progetto del portfolio */ .folio .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column} .folio .card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .folio .card .body p{color:var(--ink-soft);margin:0} .folio .shot{background:var(--sunk);border-bottom:1px solid var(--line);padding:22px 22px 24px} /* pagina di ringraziamento */ .thanks{min-height:78vh;display:grid;place-content:center;text-align:center} .thanks .wrap{max-width:620px} .thanks .mark{width:64px;height:64px;background:var(--green);display:grid;place-items:center; margin:0 auto 26px;border-radius:var(--r-md)} .thanks .mark svg{width:30px;height:30px;fill:none;stroke:var(--on-green);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} .thanks h1{max-width:none} .thanks .acts{justify-content:center} /* ----------------------------------------------------------------------------- 20. SECONDA VIA DI CONTATTO — email accanto a WhatsApp -------------------------------------------------------------------------- */ .btn-mail{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn-mail svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover) and (pointer:fine){ .btn-mail:hover{border-color:var(--green);color:var(--green);box-shadow:none} } /* ----------------------------------------------------------------------------- 21. NASTRO DELLE TECNOLOGIE Movimento costante: easing lineare, altrimenti "respira" e distrae. -------------------------------------------------------------------------- */ .strip{border-block:1px solid var(--line);background:var(--surface);overflow:hidden; position:relative;padding-block:26px 30px} .strip-tit{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-mute);text-align:center;margin:0 0 22px} .strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none} .strip::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)} .strip::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)} .strip-in{display:flex;width:max-content;animation:strip 46s linear infinite; animation-play-state:running} /* Il rallentamento al passaggio del mouse lo fa il JS (modulo "LA STRISCIA DEI LOGHI"), non questa regola. Cambiare animation-duration a meta' corsa faceva saltare il nastro in avanti di decine di pixel: la posizione di un'animazione CSS e' "tempo trascorso diviso durata", quindi se la durata quasi quadruplica quella frazione crolla di colpo. Misurato: 38px di salto dopo appena 2,6 secondi, e molto di piu' a meta' ciclo. L'animazione qui sotto resta come ripiego: se il JS non parte, il nastro si muove lo stesso (senza rallentare). */ .strip-in{transition:none} .strip-in span{display:flex;align-items:center;gap:12px;padding-right:52px;white-space:nowrap; font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-mute)} /* I loghi veri, ridotti a una sola tinta: cosi' la striscia resta una striscia e non diventa un arcobaleno. Il colore vero torna solo al passaggio del mouse. In tema chiaro si spengono in nero, in tema scuro in bianco. */ .strip-in img{width:30px;height:30px;display:block; filter:grayscale(1) brightness(0) opacity(.42); transition:filter .35s ease,transform .35s var(--ease-out)} :root[data-theme="dark"] .strip-in img{filter:grayscale(1) brightness(0) invert(1) opacity(.40)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .strip-in img{ filter:grayscale(1) brightness(0) invert(1) opacity(.40)}} .strip-in span:hover img, :root[data-theme="dark"] .strip-in span:hover img{filter:none;transform:translateY(-3px) scale(1.1)} .strip-in span:hover{color:var(--ink)} @media (hover:none){.strip-in img{opacity:.55}} @media (prefers-reduced-motion:reduce){.strip-in{animation:none;flex-wrap:wrap;width:auto; justify-content:center;gap:10px}.strip-in span{padding-right:26px}} @keyframes strip{to{transform:translateX(-50%)}} /* ----------------------------------------------------------------------------- 22. TABELLA CONFRONTO (pagina gestionali) -------------------------------------------------------------------------- */ .vs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .vs > div{background:var(--surface);padding:24px 22px 26px} .vs h3{font-size:18px;margin-bottom:10px} .vs p{font-size:15px;color:var(--ink-soft);margin:0} .vs .mine{background:var(--green-soft)} .vs .mine h3{color:var(--green)} @media (max-width:760px){.vs{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ .slide{opacity:1;transform:none;transition:opacity 200ms ease} .strip-in{animation:none;width:100%;justify-content:center;flex-wrap:wrap} .strip::before,.strip::after{display:none} } /* ----------------------------------------------------------------------------- 23. CRUSCOTTO DEL GESTIONALE (pannello della scena 3D) Racconta l'altra metà del lavoro: il sito lo vedono i clienti, il gestionale lo usi tu. -------------------------------------------------------------------------- */ .gest{background:#FFFFFF;color:#0B1412;height:calc(100% - 34px);overflow:hidden;position:relative} .g-top{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #E4EDE9} .g-dot{width:17px;height:17px;border-radius:var(--r-sm);background:#0E6E4F;flex:none} .g-name{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:-.01em;flex:1} .g-tabs{display:flex;gap:7px} .g-tabs b{font-family:var(--display);font-weight:400;font-size:7.5px;color:#69746F} .g-tabs b:first-child{color:#0E6E4F;border-bottom:1.5px solid #0E6E4F;padding-bottom:2px} .g-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:11px 12px 0} .g-stat{border:1px solid #E6EFEB;border-radius:var(--r-sm);padding:7px 8px 8px} .g-stat u{display:block;text-decoration:none;font-family:var(--mono);font-size:6px;letter-spacing:.14em; text-transform:uppercase;color:#7A857F} .g-stat b{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.03em;margin-top:2px} .g-stat.hi b{color:#0E6E4F} .g-rows{padding:11px 12px 0} .g-head{display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:6px;padding-bottom:5px; border-bottom:1px solid #E6EFEB;font-family:var(--mono);font-size:6px; letter-spacing:.14em;text-transform:uppercase;color:#7A857F} .g-row{display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:6px;align-items:center; padding:6px 0;border-bottom:1px solid #F0F5F3;font-size:8px;color:#3F4A47} .g-row s{text-decoration:none;font-family:var(--display);font-weight:600;font-size:8.5px;color:#0B1412} .g-pill{font-family:var(--mono);font-size:5.5px;letter-spacing:.1em;text-transform:uppercase; border-radius:20px;padding:3px 6px;justify-self:start} .g-ok{background:#E4F0EA;color:#0E6E4F} .g-wait{background:#FBEEDC;color:#8F5A17} .g-bar{height:4px;border-radius:20px;background:#E6EFEB;position:relative;overflow:hidden} .g-bar i{position:absolute;inset:0 32% 0 0;background:#25A97A;border-radius:20px} /* email dentro la fascia verde: contorno chiaro sul verde, non un secondo pieno */ .band-mail{background:transparent;color:var(--on-green); border:1px solid color-mix(in srgb,var(--on-green) 45%,transparent)} @media (hover:hover) and (pointer:fine){ .band-mail:hover{border-color:var(--on-green); background:color-mix(in srgb,var(--on-green) 12%,transparent);box-shadow:none} } .band .acts{gap:12px} /* ----------------------------------------------------------------------------- 23bis. L'HERO: LA RETE Niente piu' fotografia. Il fondo e' una rete di punti collegati fra loro che deriva piano e si apre dove passa il cursore: un reticolo che reagisce, non un'immagine. Il titolo ci sta sopra, centrato, e la rete si spegne dietro il testo perche' la leggibilita' viene prima dell'effetto. -------------------------------------------------------------------------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; overflow:hidden;background:var(--hero-bg)} /* Attenzione: la rete e il velo si posizionano sul .hero, non su questo. .hero-sticky e' un figlio flex alto quanto il suo contenuto: se fosse lui il riferimento, il canvas lascerebbe scoperte due fasce nere sopra e sotto — ed e' esattamente il difetto che c'era. Quindi qui niente position. */ .hero-sticky{width:100%} #neb,#rete{position:absolute;inset:0;width:100%;height:100%;display:block} #neb{z-index:0} /* la nebbia, disegnata dalla scheda grafica */ #rete{z-index:1} /* la rete di punti, sopra */ /* il velo: spegne la rete al centro, dove sta il testo, e ai bordi */ .hero-velo{position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(130% 96% at 50% 4%,transparent 52%,var(--hero-bg) 96%)} .hero .hero-in{position:relative;z-index:3;display:block;max-width:1180px; padding-block:clamp(104px,12vh,132px) clamp(56px,7vh,78px)} /* la colonna centrale */ .eroe{max-width:1000px;margin-inline:auto;text-align:center; display:flex;flex-direction:column;align-items:center} .eroe .eyebrow{margin-bottom:30px} .eroe h1{margin:0;max-width:19ch;text-wrap:balance} .eroe .lede{margin:26px auto 32px;max-width:58ch;text-align:center;text-wrap:pretty} .eroe .acts{justify-content:center} /* la riga della zona, sotto i pulsanti: piu' leggera del riquadro di prima */ .zona-riga{display:inline-flex;align-items:flex-start;gap:10px;margin:30px 0 0; font-size:15px;color:var(--ink-soft);text-align:left;max-width:62ch} .zona-riga svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke:var(--green); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .zona-riga b{color:var(--ink);font-weight:600} .eroe .hnote{margin-top:26px} /* le pastiglie dei fatti, in fondo all'hero */ .fatti{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px} .fatti span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-mute); border:1px solid var(--line);border-radius:999px;padding:9px 16px; background:color-mix(in srgb,var(--surface) 62%,transparent); transition:color .25s ease,border-color .25s ease} @media (hover:hover) and (pointer:fine){ .fatti span:hover{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--line))} } @media (max-width:760px){ .hero{min-height:auto} .hero .hero-in{padding-block:78px 64px} .eroe .lede{font-size:17px} .zona-riga{text-align:left} } @media (prefers-reduced-motion:reduce){ .hero{min-height:auto} } /* ----------------------------------------------------------------------------- 25. L'ONDA FRA LE SEZIONI Una linea luminosa che ondeggia piano, con dei nodi che ci scorrono sopra. Serve a chiudere una sezione e aprire la successiva: senza, il sito e' una pila di riquadri. Disegnata su canvas perche' l'onda cambia forma nel tempo. -------------------------------------------------------------------------- */ .onda{position:relative;height:78px;overflow:hidden;background:var(--paper); border:0;display:block;width:100%;padding:0} .onda canvas{display:block;width:100%;height:100%} @media (prefers-reduced-motion:reduce){ .onda{height:1px;background:var(--line)} .onda canvas{display:none} } /* ----------------------------------------------------------------------------- 26. IL PANNELLO DELL'ASSISTENZA Un riquadro che si stacca dalla pagina: bordo che si illumina, una pioggia di segni "+" disegnata su canvas dietro il testo, e a fianco l'elenco con le spunte. Serve a dare peso all'unico servizio che si vende a chi un sito ce l'ha gia', ed e' il pubblico piu' largo che c'e' in giro. -------------------------------------------------------------------------- */ .pannello{position:relative;border-radius:22px;overflow:hidden;isolation:isolate; background:linear-gradient(160deg,var(--surface),var(--sunk) 70%); border:1px solid var(--line); transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 340ms var(--ease-out)} /* il bordo luminoso: un anello che segue il cursore */ .pannello::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%), color-mix(in srgb,var(--green) 75%,transparent),transparent 62%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .4s ease;z-index:2;pointer-events:none} @media (hover:hover) and (pointer:fine){ .pannello:hover::before{opacity:1} } .pann-segni{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0; opacity:.55;pointer-events:none} .pann-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px);align-items:center; padding:clamp(30px,4.4vw,58px)} @media (max-width:880px){.pann-in{grid-template-columns:1fr}} .pann-in h2{margin:0 0 16px} .pann-in .lede{margin-bottom:30px} /* il pulsante con l'alone */ .btn-alone{background:var(--green-lt);color:var(--btn-ink);position:relative;overflow:hidden; box-shadow:0 18px 44px -20px color-mix(in srgb,var(--green) 85%,transparent)} .btn-alone::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(0);transition:transform .8s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .btn-alone:hover::after{transform:translateX(430%)} .btn-alone:hover{box-shadow:0 22px 54px -18px color-mix(in srgb,var(--green) 95%,transparent)} } /* l'elenco con le spunte */ .spunte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .spunte li{display:flex;align-items:flex-start;gap:13px;padding:16px 19px; border:1px solid var(--line);border-radius:14px;background:var(--surface); font-size:15.5px;color:var(--ink-soft);line-height:1.5; transition:border-color var(--t-ui) ease,transform 240ms var(--ease-out),color var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .spunte li:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line)); transform:translateX(5px);color:var(--ink)} } .spunte svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;stroke:var(--green); stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* ----------------------------------------------------------------------------- 27. LE PAGINE SERVIZIO: RIQUADRI CON L'ICONA E I TRE PASSI Due mattoni soli, ripetuti su tutte le pagine di servizio. Sono la versione piccola delle schede della home: stesso comportamento, meno peso. -------------------------------------------------------------------------- */ .riq{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1200px} @media (max-width:940px){.riq{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.riq{grid-template-columns:1fr}} .riq-c{position:relative;padding:26px 24px 58px;border:1px solid var(--line); border-radius:var(--r-lg);background:var(--surface);overflow:hidden; transform:perspective(1000px) translateX(var(--tx,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--su,0px)); transition:transform 260ms var(--ease-out),border-color var(--t-ui) ease, box-shadow 260ms var(--ease-out),opacity 700ms var(--ease-out)} .riq-c.sv-l,.riq-c.sv-r{transition-duration:700ms,var(--t-ui),260ms,700ms} @media (hover:hover) and (pointer:fine){ .riq-c:hover{--su:-5px;border-color:color-mix(in srgb,var(--green) 42%,var(--line)); box-shadow:0 22px 42px -24px rgba(0,0,0,.5)} } .riq-c::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; border-radius:inherit; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--green) 13%,transparent),transparent 62%); transition:opacity var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .riq-c:hover::before{opacity:1} } .riq-c h3{margin:0 0 8px;font-size:18px;position:relative} .riq-c p{margin:0;color:var(--ink-soft);font-size:14.8px;line-height:1.58;position:relative} /* l'icona dentro il quadratino arrotondato */ .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px; background:color-mix(in srgb,var(--green) 13%,var(--sunk)); border:1px solid color-mix(in srgb,var(--green) 22%,var(--line)); margin-bottom:18px;position:relative; transition:background var(--t-ui) ease,transform 300ms var(--ease-out)} .ico svg{width:21px;height:21px;fill:none;stroke:var(--green);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} @media (hover:hover) and (pointer:fine){ .riq-c:hover .ico{transform:translateY(-2px) scale(1.06); background:color-mix(in srgb,var(--green) 22%,var(--sunk))} } /* i tre passi */ .passi{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:p} @media (max-width:860px){.passi{grid-template-columns:1fr;gap:14px}} .passi li{position:relative;padding:clamp(28px,2.6vw,38px) clamp(24px,2.2vw,32px);border:1px solid var(--line); border-radius:var(--r-lg);background:var(--surface); opacity:0;transform:translateY(26px); transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)} .passi.in li{opacity:1;transform:none} .passi.in li:nth-child(2){transition-delay:110ms} .passi.in li:nth-child(3){transition-delay:220ms} @media (prefers-reduced-motion:reduce){ .passi li{opacity:1;transform:none;transition:none} } /* la linea che collega un passo al successivo */ @media (min-width:861px){ /* Il filo che collega un passo al successivo non e' piu' fisso: si disegna mentre scorri, da sinistra a destra. Preso dall'idea di 21st.dev — loro hanno una linea verticale che cresce agganciando lo scroll per tre schermate; noi la facciamo orizzontale e senza agganciare niente, cosi' l'effetto c'e' ma la pagina non si allunga di un pixel. */ .passi li:not(:last-child)::after{content:"";position:absolute;top:44px;right:-20px; width:20px;height:2px;background:var(--line)} .passi li:not(:last-child)::before{content:"";position:absolute;top:44px;right:-20px; width:20px;height:2px;transform-origin:left; transform:scaleX(var(--filo,0));background:var(--green);z-index:1; box-shadow:0 0 8px color-mix(in srgb,var(--green) 60%,transparent)} } /* il numero e il titolo si accendono quando il passo diventa quello attivo */ .passi li .passo-n{color:color-mix(in srgb,var(--green) calc(35% + var(--acceso,0) * 65%),var(--ink-mute))} .passi li h3{opacity:calc(.72 + var(--acceso,0) * .28)} @media (prefers-reduced-motion:reduce){ .passi li:not(:last-child)::before{transform:scaleX(1)} .passi li h3{opacity:1} } .passo-n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em; color:var(--green);margin-bottom:14px} .passi h3{margin:0 0 10px;font-size:clamp(18px,1.5vw,21px)} .passi p{margin:0;color:var(--ink-soft);font-size:14.8px;line-height:1.58} /* ----------------------------------------------------------------------------- 28. LE SCHEDE SI MONTANO A PEZZI Le sei schede dei servizi hanno gia' dentro una mini interfaccia. Invece di comparire fatta, ora si compone: i pezzi partono sparsi e si mettono al loro posto mentre la scheda sale nello schermo. Ogni scheda ha il suo --a, scritto dal JavaScript, quindi le sei si montano una dopo l'altra invece che insieme. Di serie --a vale 1: se il JavaScript non gira si vede tutto montato. -------------------------------------------------------------------------- */ .svc,.riq-c,.tech > div,.passi li,.spunte li,.pledge{--a:1} @media (min-width:821px) and (prefers-reduced-motion:no-preference){ .svc,.riq-c,.tech > div,.passi li,.spunte li,.pledge{--a:0} } .ante .cor > *, .ante .fog > *, .ante .griglia > s, .ante .prod > div, .ante .kpi > div, .ante .riga, .ante .tel, .ante .carta{ transform:translate(calc(var(--px,0%) * (1 - var(--a))), calc(var(--py,0%) * (1 - var(--a)))) rotate(calc(var(--pr,0deg) * (1 - var(--a)))); opacity:calc(.12 + var(--a) * .88); transition:none} /* da dove parte ogni pezzo: sei posizioni che si ripetono, cosi' i pezzi di una stessa fila non arrivano mai tutti dalla stessa parte */ .ante *:nth-child(1){--px:-46%;--py:-30%;--pr:-11deg} .ante *:nth-child(2){--px:38%;--py:-38%;--pr:9deg} .ante *:nth-child(3){--px:-40%;--py:34%;--pr:12deg} .ante *:nth-child(4){--px:44%;--py:26%;--pr:-8deg} .ante *:nth-child(5){--px:-30%;--py:-42%;--pr:7deg} .ante *:nth-child(6){--px:34%;--py:40%;--pr:-13deg} /* il vetro della finestra si scopre insieme ai pezzi */ .ante .fin{opacity:calc(.35 + var(--a) * .65)} /* Le altre schede non hanno un'anteprima dentro: i loro pezzi sono l'icona, il titolo e il testo. Stessa idea, ampiezza molto piu' piccola — sono parole, non figure: se volano troppo diventa fastidioso da leggere. */ .riq-c .ico,.riq-c h3,.riq-c p, .tech > div h3,.tech > div p, .passi li .passo-n,.passi li h3,.passi li p, .spunte li svg, .pledge .num,.pledge .unit,.pledge .say{ transform:translate(calc(var(--px,0%) * (1 - var(--a))), calc(var(--py,0%) * (1 - var(--a)))); opacity:calc(.25 + var(--a) * .75)} /* l'icona e il numero arrivano da piu' lontano e ruotano: sono figure */ .riq-c .ico,.spunte li svg,.pledge .num{ transform:translate(calc(var(--px,0%) * (1 - var(--a))), calc(var(--py,0%) * (1 - var(--a)))) rotate(calc(var(--pr,0deg) * (1 - var(--a))))} .riq-c .ico{--px:-32%;--py:-46%;--pr:-14deg} .riq-c h3 {--px:22%;--py:-16%} .riq-c p {--px:-14%;--py:26%} .tech > div h3{--px:-18%;--py:-22%} .tech > div p {--px:12%;--py:22%} .passi li .passo-n{--px:-26%;--py:-24%} .passi li h3{--px:18%;--py:-14%} .passi li p {--px:-10%;--py:22%} .spunte li svg{--px:-60%;--py:0%;--pr:-24deg} .pledge .num {--px:-24%;--py:-30%;--pr:-9deg} .pledge .unit{--px:16%;--py:-12%} .pledge .say {--px:-8%;--py:20%} /* ----------------------------------------------------------------------------- 29. LA LUCE D'AMBIENTE Sotto l'hero la pagina era nero piatto: nessuna luce, niente che si muovesse. Tre macchie di luce molto grandi e molto sfumate, dietro a tutto, che derivano lentissime. Non si notano guardandole: si nota che la pagina non e' piu' una lastra nera. Costano un solo elemento e si muovono solo di transform, quindi le fa la scheda grafica. -------------------------------------------------------------------------- */ .ambiente{position:fixed;inset:-25%;z-index:0;pointer-events:none;overflow:hidden} .ambiente i{position:absolute;display:block;border-radius:50%;filter:blur(90px); opacity:.68;will-change:transform} .ambiente i:nth-child(1){width:52vw;height:52vw;left:-8vw;top:6vh; background:radial-gradient(circle,color-mix(in srgb,var(--green) 34%,transparent),transparent 68%); animation:vagaA 46s ease-in-out infinite} .ambiente i:nth-child(2){width:44vw;height:44vw;right:-6vw;top:38vh; background:radial-gradient(circle,color-mix(in srgb,var(--green) 27%,transparent),transparent 68%); animation:vagaB 58s ease-in-out infinite} .ambiente i:nth-child(3){width:38vw;height:38vw;left:32vw;bottom:2vh; background:radial-gradient(circle,color-mix(in srgb,var(--ochre) 18%,transparent),transparent 68%); animation:vagaC 72s ease-in-out infinite} .ambiente i:nth-child(4){width:34vw;height:34vw;right:6vw;top:-4vh; background:radial-gradient(circle,color-mix(in srgb,var(--green) 22%,transparent),transparent 68%); animation:vagaD 64s ease-in-out infinite} @keyframes vagaD{0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-10vw,16vh,0) scale(.9)}} @keyframes vagaA{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(14vw,10vh,0) scale(1.18)}} @keyframes vagaB{0%,100%{transform:translate3d(0,0,0) scale(1.1)} 50%{transform:translate3d(-12vw,-14vh,0) scale(.92)}} @keyframes vagaC{0%,100%{transform:translate3d(0,0,0) scale(.95)} 50%{transform:translate3d(-16vw,8vh,0) scale(1.2)}} /* in tema chiaro la luce c'e' ma quasi non si vede: il chiaro e' gia' luminoso */ :root[data-theme="light"] .ambiente i{opacity:.22;filter:blur(110px)} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ambiente i{ opacity:.22;filter:blur(110px)}} /* Il contenuto sta sopra la luce. ATTENZIONE: qui vanno SOLO gli elementi che uno z-index non ce l'hanno gia'. L'intestazione sta a 60, il pannello del menu a 60, il velo a 55, il tasto WhatsApp a 70: mettendoli a 1 finivano sotto alla pagina e il menu non si poteva piu' cliccare. E' successo. */ #main,.ftr{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){ .ambiente i{animation:none} } @media (max-width:760px){ .ambiente i{filter:blur(70px);opacity:.38} } /* Le schede prendono un filo di luce sul bordo alto, come se venissero illuminate da sopra. E' il dettaglio che le fa sembrare oggetti. */ .svc,.riq-c,.tech > div,.passi li,.spunte li,.pannello,.detail,.work,.q{ background-image:linear-gradient(180deg, color-mix(in srgb,var(--ink) 4%,transparent),transparent 42%)} /* ----------------------------------------------------------------------------- 30. IL PARAGRAFO CHE SI ILLUMINA LEGGENDO Il testo parte spento e le parole si accendono una dopo l'altra mentre scorri, come se qualcuno lo stesse leggendo ad alta voce. Serve sui paragrafi lunghi, quelli che di solito si saltano: costringe l'occhio a seguirli. Da mettere con parsimonia — uno per pagina, non di piu'. -------------------------------------------------------------------------- */ .leggi{--l:0} .leggi .p{transition:color .25s ease,opacity .25s ease} .leggi .p.off{color:var(--ink-mute);opacity:.45} .leggi .p.on{color:var(--ink);opacity:1} @media (prefers-reduced-motion:reduce){ .leggi .p{color:var(--ink-soft)!important;opacity:1!important} } /* ----------------------------------------------------------------------------- 31. SCHEDA PROGETTO CON SCHERMATA Come la presentano le agenzie: la schermata grande a sinistra, l'etichetta di categoria, il nome e due righe a destra. La schermata e' una fotografia vera della pagina, non un disegno: e' l'unica cosa che convince davvero. -------------------------------------------------------------------------- */ .prj{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,44px); align-items:center;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px); background-image:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,transparent),transparent 42%)} @media (max-width:860px){.prj{grid-template-columns:1fr}} .prj-shot{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line); background:var(--sunk);box-shadow:0 30px 60px -34px rgba(0,0,0,.75); transition:transform 420ms var(--ease-out)} .prj-shot img{display:block;width:100%;height:auto} @media (hover:hover) and (pointer:fine){ .prj:hover .prj-shot{transform:translateY(-6px)} } .prj-info h3{margin:12px 0 8px;font-size:clamp(19px,2.3vw,23px)} .prj-info p{color:var(--ink-soft);margin:0 0 12px;font-size:15.5px;line-height:1.6} .prj-info .foot{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute); letter-spacing:.03em;margin:0} /* ----------------------------------------------------------------------------- 32. L'ASSAGGIO DEL PORTFOLIO Tre schermate vere, in bianco e nero. Prendono colore quando ci passi sopra: e' il modo in cui le agenzie mostrano i lavori senza che la pagina diventi un carnevale. Il colore e' la ricompensa di aver guardato. -------------------------------------------------------------------------- */ .folio3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1200px} @media (max-width:900px){.folio3{grid-template-columns:1fr 1fr}} @media (max-width:620px){.folio3{grid-template-columns:1fr}} .fw{display:block;text-decoration:none;color:inherit; transform:perspective(1000px) translateX(var(--tx,0px)) translateY(var(--su,0px)); transition:transform 300ms var(--ease-out),opacity 700ms var(--ease-out)} .fw-shot{display:block;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);background:var(--sunk); box-shadow:0 26px 52px -32px rgba(0,0,0,.8)} .fw-shot img{display:block;width:100%;height:auto; filter:grayscale(1) contrast(.92) brightness(.86); transform:scale(1.01); transition:filter .5s ease,transform .6s var(--ease-out)} .fw-cat{display:block;margin:16px 0 5px;font-family:var(--mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute); transition:color var(--t-ui) ease} .fw-nome{display:block;font-family:var(--display);font-weight:600;font-size:18px; letter-spacing:-.02em;color:var(--ink)} @media (hover:hover) and (pointer:fine){ .fw:hover{--su:-6px} .fw:hover .fw-shot img{filter:none;transform:scale(1.05)} .fw:hover .fw-shot{border-color:color-mix(in srgb,var(--green) 45%,var(--line))} .fw:hover .fw-cat{color:var(--green)} } .fw:focus-visible .fw-shot img{filter:none} @media (prefers-reduced-motion:reduce){ .fw-shot img{transition:none;transform:none} } /* ----------------------------------------------------------------------------- 32bis. IL MUCCHIO CHE SI APRE Da "Stack Spread" (21st.dev). Solo sul computer e solo se la sezione entra in uno schermo: la sezione si allunga, il contenuto resta fermo al centro e le tre schede passano da ammucchiate e storte al loro posto nella griglia. Il JS scrive solo --px --py --pr --ps; la griglia finale e' quella di sempre, quindi senza JS (o col movimento ridotto) non cambia niente. -------------------------------------------------------------------------- */ #lavori.pila-on{padding-block:0;height:170vh} /* le schermate sono il contenuto: su schermi larghi devono essere grandi, se no restano tre francobolli in mezzo a una schermata vuota */ .pila-pan{max-width:1180px;margin-inline:auto} @media (min-width:1500px){ .pila-pan,.ss-pan{max-width:1320px} } /* il racconto dentro al pannello: la colonna di lettura resta stretta, ma il testo non galleggia piu' in mezzo al nero */ .pan-prosa{max-width:960px;margin-inline:auto} .pan-prosa .prose{max-width:none} #lavori.pila-on .pila-palco::before{content:"";position:absolute;inset:-10% -12%;pointer-events:none; background:radial-gradient(42% 46% at 70% 40%,color-mix(in srgb,var(--green) 13%,transparent),transparent 72%); filter:blur(28px);animation:ss-deriva 32s var(--ease-out) infinite alternate} #lavori.pila-on .pila-palco > .wrap{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){#lavori.pila-on .pila-palco::before{animation:none}} #lavori.pila-on .pila-palco{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:56px} #lavori.pila-on .folio3{position:relative} #lavori.pila-on .fw{opacity:1; transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--pr,0deg)) scale(var(--ps,1)) translateY(var(--su,0px)); transition:transform 300ms var(--ease-out);will-change:transform} #lavori.pila-on.muove .fw{transition:none} #lavori.pila-on .fw-shot{box-shadow:0 30px 60px -30px rgba(0,0,0,.85)} #lavori.pila-on .fw-cat,#lavori.pila-on .fw-nome{opacity:var(--testo,1)} #lavori.pila-on .fw:nth-child(2){z-index:3} #lavori.pila-on .fw:nth-child(1){z-index:2} #lavori.pila-on .fw:nth-child(3){z-index:1} /* ----------------------------------------------------------------------------- 32ter. PRIMA E DOPO — la maniglia che scopre il sito rifatto Due schermate sovrapposte: quella nuova e' tagliata con clip-path e il taglio segue --p. Sopra c'e' un cursore vero (input range) invisibile: cosi' funziona col dito, col mouse e con le frecce della tastiera senza scrivere una riga di accessibilita' finta. -------------------------------------------------------------------------- */ .pd{--p:52%;position:relative;margin:clamp(26px,3.6vw,44px) 0 0;overflow:hidden; border-radius:var(--r-lg);border:1px solid var(--line);background:var(--sunk); aspect-ratio:1280/800;touch-action:pan-y} .pd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} /* sul telefono un riquadro 16/10 diventa alto due dita: non ci si legge niente. Si alza il riquadro e si guarda la parte alta delle due pagine, che e' quella che racconta la differenza. */ @media (max-width:640px){ .pd{aspect-ratio:4/5} .pd img{object-position:top center} } .pd-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))} /* la riga del taglio, con la maniglia tonda nel mezzo */ .pd-man{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--surface); transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.18)} .pd-man i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px; border-radius:50%;background:var(--surface);box-shadow:0 8px 22px -8px rgba(0,0,0,.5); display:grid;place-items:center} .pd-man i::before,.pd-man i::after{content:"";position:absolute;width:0;height:0; border-block:5px solid transparent} .pd-man i::before{border-right:7px solid var(--ink);left:11px} .pd-man i::after{border-left:7px solid var(--ink);right:11px} .pd-et{position:absolute;top:14px;z-index:2;font-family:var(--mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:99px; background:rgba(8,12,11,.62);color:#fff;backdrop-filter:blur(6px)} .pd-et-a{left:14px} .pd-et-b{right:14px} /* il cursore vero, disteso su tutta l'immagine e invisibile */ .pd-r{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:3; opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent} .pd-r::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:100%} .pd-r::-moz-range-thumb{width:60px;height:100%;border:0;background:transparent} .pd:focus-within .pd-man{background:var(--green);box-shadow:0 0 0 2px var(--green)} .pd-nota{margin-top:14px;font-size:14px;color:var(--ink-mute);max-width:70ch} .pd-nota em{font-style:normal;color:var(--ink-soft)} .pd-perche{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px); margin-top:clamp(22px,3vw,34px)} @media (max-width:860px){.pd-perche{grid-template-columns:1fr 1fr}} @media (max-width:520px){.pd-perche{grid-template-columns:1fr}} .pd-perche div{border-top:1px solid var(--line);padding-top:12px} .pd-perche b{display:block;font-family:var(--display);font-size:15.5px;letter-spacing:-.01em} .pd-perche span{display:block;margin-top:5px;font-size:13.5px;color:var(--ink-mute);line-height:1.5} /* ----------------------------------------------------------------------------- 32quater. LA PAGINA RECENSIONI La scena dell'hero e' tutta CSS: card, telefono, onde, stelle, notifica. Un ciclo di sei secondi che si ferma quando esce dallo schermo (classe "ferma" dal JS) e che col movimento ridotto resta sul fotogramma finale. -------------------------------------------------------------------------- */ /* la scena: foto vera + tre schermi che si alternano. Un ciclo di nove secondi: telefono bloccato, tocco (le onde), avviso, finestra vuota, stelle e testo, notifica, e si ricomincia. Le posizioni sono in percentuale della foto: il riquadro ha il suo stesso rapporto, 4:3. */ .rc-scena{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden; background:var(--sunk);box-shadow:0 30px 60px -34px rgba(0,0,0,.6)} .rc-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .rc-schermi{position:absolute;left:30.43%;top:21.52%;width:43.5%;height:49.24%} .rc-schermi img{position:absolute;inset:0;width:100%;height:100%;opacity:0;display:block} .rc-s1{animation:rc-s1 9s linear infinite} .rc-s2{animation:rc-s2 9s linear infinite} .rc-s3{animation:rc-s3 9s linear infinite} @keyframes rc-s1{0%,20%{opacity:0}23%,36%{opacity:1}40%,100%{opacity:0}} @keyframes rc-s2{0%,36%{opacity:0}39%,50%{opacity:1}53%,100%{opacity:0}} @keyframes rc-s3{0%,50%{opacity:0}53%,92%{opacity:1}96%,100%{opacity:0}} /* le onde: ellissi schiacciate, perche' la card e' distesa sul bancone */ .rc-onde{position:absolute;left:30.3%;top:71.1%;width:0;height:0} .rc-onde i{position:absolute;left:-60px;top:-24px;width:120px;height:48px;border-radius:50%; border:2px solid rgba(232,179,58,.9);opacity:0;transform:rotate(-19deg) scale(.4); animation:rc-onda 9s var(--ease-out) infinite} .rc-onde i:nth-child(2){animation-delay:.2s} .rc-onde i:nth-child(3){animation-delay:.4s} @keyframes rc-onda{0%,8%{opacity:0;transform:rotate(-19deg) scale(.4)} 11%{opacity:.95}24%{opacity:0;transform:rotate(-19deg) scale(2.4)}100%{opacity:0}} .rc-notifica{position:absolute;left:4%;top:5%;padding:10px 15px;border-radius:14px; background:rgba(255,255,255,.94);color:#15191A;font-size:13.5px; box-shadow:0 14px 30px -14px rgba(0,0,0,.55);backdrop-filter:blur(8px); opacity:0;animation:rc-noti 9s var(--ease-out) infinite} .rc-notifica b{color:#0E6E4F;font-family:var(--display);margin-right:4px} @keyframes rc-noti{0%,70%{opacity:0;transform:translateY(-10px)}74%,92%{opacity:1;transform:none} 96%,100%{opacity:0;transform:translateY(-6px)}} .rc-scena.ferma *{animation-play-state:paused} /* movimento ridotto: si vede subito la finestra piena, niente ciclo */ @media (prefers-reduced-motion:reduce){ .rc-scena *{animation:none!important} .rc-schermi .rc-s3{opacity:1} } /* cosa sono: i due modi */ .rc-due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin:clamp(24px,3vw,38px) 0} @media (max-width:760px){.rc-due{grid-template-columns:1fr}} .rc-modo{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--surface);transform:perspective(1000px) translateX(var(--tx,0px)); transition:transform 700ms var(--ease-out),opacity 700ms var(--ease-out)} .rc-modo h3{margin:14px 0 8px;font-family:var(--display);font-size:20px;letter-spacing:-.02em} .rc-modo p{margin:0;color:var(--ink-soft)} .rc-modo-ico{display:block;width:46px;height:46px;border-radius:12px;background:var(--green-soft);position:relative} .rc-ico-nfc::before,.rc-ico-nfc::after{content:"";position:absolute;border:2.5px solid var(--green); border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)} .rc-ico-nfc::before{inset:14px 18px 18px 14px} .rc-ico-nfc::after{inset:8px 12px 12px 8px;opacity:.55} .rc-ico-qr::before{content:"";position:absolute;inset:11px;border-radius:3px; background:conic-gradient(var(--green) 25%,transparent 0 50%,var(--green) 0 75%,transparent 0) 0 0/50% 50%} /* i numeri con la fonte */ .rc-dati{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vw,44px)} @media (max-width:980px){.rc-dati{grid-template-columns:1fr 1fr}} @media (max-width:520px){.rc-dati{grid-template-columns:1fr}} .rc-dato{border-top:2px solid var(--green);padding-top:16px} .rc-dato .num-c b{font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,62px); letter-spacing:-.04em;line-height:1;color:var(--ink)} .rc-dato p{margin:12px 0 10px;color:var(--ink-soft);font-size:15px;line-height:1.5} .rc-fonte{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em; color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px;padding-block:6px} .rc-fonte:hover{color:var(--green)} /* i due grafici */ .rc-grafici{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,2.4vw,30px);margin-top:clamp(34px,4.4vw,58px)} @media (max-width:900px){.rc-grafici{grid-template-columns:1fr}} .rc-grafici figure{margin:0;padding:22px 22px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)} .rc-grafici figcaption b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.02em} .rc-grafici figcaption span{display:block;margin-top:4px;color:var(--ink-mute);font-size:14px} .rc-curva svg{width:100%;height:auto;display:block;margin:14px 0 4px;overflow:visible} .rc-assi line{stroke:var(--line);stroke-width:1.2} .rc-assi .rc-guida{stroke-dasharray:4 5;stroke:color-mix(in srgb,var(--green) 40%,var(--line))} .rc-assi text{font-family:var(--mono);font-size:11px;fill:var(--ink-mute)} .rc-linea{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round; stroke-dasharray:var(--len,700);stroke-dashoffset:calc(var(--len,700) * (1 - var(--q,1)))} .rc-area{fill:color-mix(in srgb,var(--green) 12%,transparent);opacity:var(--q,1)} .rc-punto{fill:var(--surface);stroke:var(--green);stroke-width:2.5} .rc-punto-5{fill:var(--green);opacity:var(--q5,1);transform-origin:186px 56px; transform:scale(calc(.4 + var(--q5,1) * .6))} .rc-etic{font-family:var(--display);font-size:13px;font-weight:600;fill:var(--ink);opacity:var(--q5,1)} .rc-scala{position:relative;margin:34px 0 14px} .rc-scala-b{height:14px;border-radius:99px; background:linear-gradient(90deg,#C94B3A,#E8B33A 55%,var(--green-lt));position:relative;opacity:.35} .rc-scala-b i{position:absolute;top:-6px;bottom:-6px;left:var(--da);width:calc(var(--a) - var(--da)); border-radius:99px;border:2px solid var(--green);background:color-mix(in srgb,var(--green) 25%,transparent)} .rc-scala-n{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mono); font-size:12px;color:var(--ink-mute)} .rc-scala-e{position:absolute;top:-30px;left:var(--da);width:calc(var(--a) - var(--da));text-align:center} .rc-scala-e span{font-family:var(--display);font-weight:600;font-size:14px;color:var(--green);white-space:nowrap} .rc-stelle-nota{margin:14px 0 6px;color:var(--ink-soft);font-size:14.5px;line-height:1.55} /* i formati, con le foto */ .rc-formati{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(24px,3vw,40px)} @media (max-width:900px){.rc-formati{grid-template-columns:1fr 1fr}} @media (max-width:560px){.rc-formati{grid-template-columns:1fr}} .rc-formato{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface); transform:perspective(1000px) translateX(var(--tx,0px)); transition:transform 700ms var(--ease-out),opacity 700ms var(--ease-out)} .rc-formato img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; transition:transform .8s var(--ease-out)} @media (hover:hover) and (pointer:fine){.rc-formato:hover img{transform:scale(1.05)}} .rc-formato figcaption{padding:16px 18px 18px} .rc-formato b{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.02em} .rc-formato span{display:block;margin-top:4px;color:var(--ink-mute);font-size:14px;line-height:1.5} /* la riga "in regalo" sotto cosa e' incluso: una striscia sola, discreta */ .regalo{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.6vw,30px); padding:14px 18px;border:1px dashed color-mix(in srgb,var(--green) 45%,var(--line)); border-radius:var(--r-lg);background:color-mix(in srgb,var(--green) 6%,var(--paper)); color:var(--ink-soft);text-decoration:none;font-size:15px;line-height:1.5; transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease} .regalo b{color:var(--ink);font-weight:600} .regalo-ico{flex:none;width:34px;height:22px;border-radius:5px;position:relative;color:#fff; background:linear-gradient(145deg,#1C1F1E,#0C0E0D);box-shadow:0 4px 10px -4px rgba(0,0,0,.5)} .regalo-ico::after{content:"";position:absolute;left:6px;top:7px;width:22px;height:5px; background:radial-gradient(circle,#E8B33A 38%,transparent 42%) 0 0/4.4px 5px repeat-x} /* la riga del dopo-consegna: stessa faccia del regalo, segno diverso */ .regalo-b{border-color:color-mix(in srgb,var(--ochre) 40%,var(--line)); background:color-mix(in srgb,var(--ochre) 6%,var(--paper))} .regalo-b .regalo-va{color:var(--ochre-ink)} @media (hover:hover) and (pointer:fine){ .regalo-b:hover{background:color-mix(in srgb,var(--ochre) 10%,var(--paper))} } .dopo-ico{flex:none;width:30px;height:30px;border-radius:50%;position:relative; border:2px solid color-mix(in srgb,var(--ochre) 70%,transparent)} .dopo-ico::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:9px; background:var(--ochre-ink);transform-origin:bottom center;border-radius:2px; box-shadow:0 0 0 0 transparent} .dopo-ico::before{content:"";position:absolute;left:50%;top:13px;width:2px;height:6px;margin-left:-1px; background:var(--ochre-ink);border-radius:2px;transform:rotate(80deg);transform-origin:top center} .regalo-va{margin-left:auto;color:var(--green);font-size:18px;transition:transform var(--t-ui) var(--ease-out)} @media (hover:hover) and (pointer:fine){ .regalo:hover{border-style:solid;background:color-mix(in srgb,var(--green) 10%,var(--paper))} .regalo:hover .regalo-va{transform:translateX(4px)} } /* ----------------------------------------------------------------------------- 32quinquies. I SERVIZI SCORRENDO (home) Di base e' un elenco con tutte le voci aperte e la prima schermata accanto: cosi' si legge anche senza JS e col movimento ridotto. Il JS aggiunge "ss-vivo": la sezione si allunga, il contenuto resta fermo sullo schermo e la posizione di scorrimento sceglie la voce accesa. -------------------------------------------------------------------------- */ .ss-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.4fr);gap:clamp(20px,3vw,46px); align-items:center;margin-top:clamp(22px,3vw,38px)} .ss-voci{list-style:none;margin:0;padding:0} .ss-voci li{position:relative;padding:14px 0 14px 20px;border-left:2px solid var(--line)} .ss-voci .n{font-family:var(--mono);font-size:12px;color:var(--ink-mute);margin-right:12px;vertical-align:4px} .ss-voci h3{display:inline;margin:0;font-family:var(--display);font-weight:600; font-size:clamp(21px,2.5vw,31px);letter-spacing:-.03em;color:var(--ink);transition:color .3s ease} .ss-voci p{margin:8px 0 0;color:var(--ink-soft);font-size:15.5px;line-height:1.55;max-width:44ch} .ss-voci p a{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--green); text-underline-offset:3px;padding-block:6px} .ss-voci i{position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--green); transform:scaleY(var(--q,0));transform-origin:top} .ss-quadro{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); background:var(--sunk);aspect-ratio:16/10.5;box-shadow:0 30px 60px -34px rgba(0,0,0,.6)} .ss-quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top; opacity:0;transform:scale(1.05);transition:opacity .55s var(--ease-out),transform 1s var(--ease-out)} .ss-quadro img.on{opacity:1;transform:none} .ss-quadro .ss-prima{clip-path:inset(0 50% 0 0)} .ss-taglio{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;opacity:0;transition:opacity .4s ease} .ss-quadro.pd .ss-taglio{opacity:1} .ss-conta{position:absolute;right:14px;top:12px;font-family:var(--mono);font-size:12px;color:#fff; background:rgba(0,0,0,.55);padding:4px 10px;border-radius:99px} .ss-dopo .regalo{margin-top:0} .ss-dopo{margin-bottom:clamp(40px,6vw,80px)} /* la versione viva. L'altezza era 5 x 52vh: la sezione durava troppo e, con lo sfondo nero attorno, sembrava staccata dal resto della pagina. Ora la corsa e' piu' corta e il palco ha una luce sua che deriva piano, come l'ambiente del sito: si capisce che e' una tappa, non un'isola. */ .ss.ss-vivo{height:calc(100vh + 5 * 42vh);padding-block:0} .ss-vivo .ss-palco::before{content:"";position:absolute;inset:-15% -12%;pointer-events:none; background: radial-gradient(40% 44% at 22% 26%,color-mix(in srgb,var(--green) 17%,transparent),transparent 70%), radial-gradient(36% 40% at 80% 72%,color-mix(in srgb,var(--ochre) 13%,transparent),transparent 72%); filter:blur(26px);animation:ss-deriva 28s var(--ease-out) infinite alternate} @keyframes ss-deriva{to{transform:translate3d(3%,-3%,0) scale(1.07)}} .ss-vivo .ss-palco > .wrap{position:relative;z-index:1} /* il pannello: la sezione non galleggia piu' nel nero, sta dentro una lastra con il suo bordo, la sua luce e la pioggia di "+" come il pannello del preventivo. E' anche piu' grande: prima sembrava un riquadro perso. */ .ss-pan{position:relative;isolation:isolate;border-radius:24px;overflow:hidden; border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--sunk) 72%); padding:clamp(22px,3vw,44px) clamp(20px,3vw,44px) clamp(24px,3.4vw,48px); box-shadow:0 40px 90px -50px rgba(0,0,0,.8)} .ss-pan > .pann-segni{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.75} .ss-pan > *:not(.pann-segni){position:relative;z-index:1} /* ---- LA TRAMA ---- Una griglia di puntini appena accennata, sfumata ai bordi: riempie le zone nere senza fare rumore. Costa zero (nessun canvas, nessuna immagine) e si mette addosso a una sezione con una classe. */ .trama{position:relative} .trama::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--green) 34%,transparent) 1.4px,transparent 0); background-size:30px 30px; -webkit-mask-image:radial-gradient(76% 62% at 50% 42%,#000,transparent 78%); mask-image:radial-gradient(86% 74% at 50% 44%,#000,transparent 84%); opacity:.9} .trama > *{position:relative;z-index:1} @media (prefers-reduced-motion:no-preference){ .trama::before{animation:trama-vai 40s linear infinite} } @keyframes trama-vai{to{background-position:34px 34px}} @media (prefers-reduced-motion:reduce){.ss-vivo .ss-palco::before{animation:none}} /* in una colonna flex il margine automatico del .wrap annulla lo stiramento: senza width:100% il contenuto si stringeva al centro */ .ss-palco > .wrap{width:100%} .ss-vivo .ss-palco{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; justify-content:center;padding-top:64px;overflow:hidden} .ss-vivo .ss-voci li{cursor:pointer} .ss-vivo .ss-voci h3{color:var(--ink-mute)} .ss-vivo .ss-voci li.on h3{color:var(--ink)} /* Il paragrafo della voce che non e' aperta sparisce alla vista, ma il link che contiene restava RAGGIUNGIBILE: col tasto di tabulazione ci si finiva sopra senza vedere niente, e su uno schermo stretto due link invisibili di voci diverse arrivavano a un pixel l'uno dall'altro. `visibility:hidden` lo toglie davvero dal giro; arriva in ritardo perche' la dissolvenza si veda tutta, e sulla voce aperta torna subito. */ .ss-vivo .ss-voci p{max-height:0;overflow:hidden;opacity:0;margin-top:0; visibility:hidden; transition:max-height .5s var(--ease-out),opacity .4s ease,margin-top .4s ease, visibility 0s .4s} .ss-vivo .ss-voci li.on p{max-height:150px;opacity:1;margin-top:8px; visibility:visible;transition-delay:0s} @media (hover:hover) and (pointer:fine){ .ss-vivo .ss-voci li:not(.on):hover h3{color:var(--ink-soft)} } @media (max-width:900px){ .ss-g{grid-template-columns:1fr;gap:16px} .ss-quadro{order:-1;aspect-ratio:16/10} .ss-vivo .ss-voci li{padding:7px 0 7px 14px} .ss-vivo .ss-voci p{font-size:14.5px} .ss-vivo .ss-palco{padding-top:60px} } /* telefoni bassi: il titolo della sezione lascia spazio alla schermata */ @media (max-width:900px) and (max-height:720px){ .ss-vivo .ss-palco .label{display:none} .ss-vivo .ss-quadro{aspect-ratio:16/8.5} } @media (prefers-reduced-motion:reduce){ .ss-quadro img{transition:none;transform:none} } /* ----------------------------------------------------------------------------- 33. LE DEMO DEI GESTIONALI Quattro riquadri: tre demo vere piu' quello che invita a chiedere la propria. L'ultimo e' in negativo, cosi' si distingue dalle demo senza dover scrivere "questo e' diverso". Sotto, l'avvertenza che dichiara che le aziende sono inventate: non e' un cavillo, e' la cosa che rende credibile il resto. -------------------------------------------------------------------------- */ .demos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;perspective:1200px} @media (max-width:820px){.demos{grid-template-columns:1fr}} .dcard{position:relative;padding:24px 24px 22px;border:1px solid var(--line); border-radius:var(--r-lg);background:var(--surface);overflow:hidden; background-image:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,transparent),transparent 42%); transform:perspective(1000px) translateX(var(--tx,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--su,0px)); transition:transform 260ms var(--ease-out),border-color var(--t-ui) ease, box-shadow 260ms var(--ease-out),opacity 700ms var(--ease-out)} .dcard.sv-l,.dcard.sv-r{transition-duration:700ms,var(--t-ui),260ms,700ms} @media (hover:hover) and (pointer:fine){ .dcard:hover{--su:-6px;border-color:color-mix(in srgb,var(--green) 42%,var(--line)); box-shadow:0 24px 44px -26px rgba(0,0,0,.55)} } .dcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; border-radius:inherit; background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--green) 13%,transparent),transparent 62%); transition:opacity var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .dcard:hover::before{opacity:1} } .dcard h3{margin:8px 0 12px;font-size:20px;position:relative} .dcard ul{list-style:none;margin:0 0 16px;padding:0;position:relative} .dcard li{position:relative;padding-left:20px;margin-bottom:7px;font-size:14.5px; color:var(--ink-soft);line-height:1.55} .dcard li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px; background:var(--green);border-radius:2px} .dcard .foot{margin:0;position:relative} /* :not(.btn) — se no questa regola tinge di verde anche la scritta dentro al pulsante verde, e il testo sparisce */ .dcard .foot a:not(.btn){color:var(--green);text-decoration:none;font-family:var(--display); font-weight:600;font-size:15px;display:inline-block; padding-block:12px;margin-block:-12px} /* la schermata in cima alla scheda: si capisce in mezzo secondo che c'e' qualcosa da aprire, senza dover leggere l'elenco */ .dcard-shot{display:block;margin:-24px -24px 18px;border-bottom:1px solid var(--line); overflow:hidden;background:var(--sunk);position:relative} .dcard-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center; filter:grayscale(1) contrast(1.02); transition:filter 420ms var(--ease-out),transform 620ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .dcard:hover .dcard-shot img{filter:none;transform:scale(1.03)} } /* il tasto della scheda: piu' piccolo del tasto grande della pagina, e con il colore del testo DICHIARATO — se no una regola vicina lo tinge di verde su verde e la scritta sparisce (successo due volte) */ .dcard .foot .btn{margin-top:2px;font-size:14.5px;padding:11px 18px; background:var(--green-lt);color:var(--btn-ink)} .dcard .foot .btn svg{width:15px;height:15px} /* ---- il tasto che manda alla demo, dentro le pagine servizio ---- Prima c'era un riquadro con la schermata: spezzava la pagina. Adesso e' un invito come gli altri, con la riga piccola che dice cosa succede. */ .prova{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px; margin-top:clamp(24px,3.4vw,38px)!important} .prova span{font-size:14px;color:var(--ink-soft);max-width:42em} .dcard-tu{background:var(--sunk);border-style:dashed} .dcard-tu li::before{background:var(--ochre)} .dcard-tu .foot a:not(.btn){color:var(--ochre-ink)} /* ---- IL RACCONTO A TAPPE (pagina Lavori) ---- Una colonna sola, con il filo che scende e i numeri sopra: si legge come una storia, non come un elenco di servizi. Le tappe che hanno una schermata la mettono a destra, le altre restano di solo testo. */ .storia{list-style:none;margin:clamp(26px,3.4vw,42px) 0 0;padding:0;position:relative} .storia::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:1px; background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent)} .storia li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.85fr); gap:clamp(14px,2vw,28px);align-items:start;padding:clamp(16px,2vw,26px) 0} .storia li:has(.st-shot){align-items:center} @media (max-width:860px){ .storia li{grid-template-columns:44px minmax(0,1fr)} .storia .st-shot{grid-column:2;margin-top:4px} .storia::before{left:15px} } .st-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%; font-family:var(--mono);font-size:12px;color:var(--green); background:var(--paper);border:1px solid var(--line);position:relative;z-index:1} @media (max-width:860px){.st-n{width:30px;height:30px;font-size:11px}} .st-t h3{margin:2px 0 8px;font-size:clamp(18px,1.7vw,22px)} .st-t p{margin:0;color:var(--ink-soft);max-width:60ch;line-height:1.62} .st-va{margin-top:12px!important} .st-shot{display:block;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line); background:var(--sunk);box-shadow:0 22px 44px -30px rgba(0,0,0,.7); transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)} .st-shot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(.95); transition:filter 420ms var(--ease-out),transform 620ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .st-shot:hover{transform:translateY(-3px)} .st-shot:hover img{filter:none;transform:scale(1.02)} } .avvertenza{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-lg); padding:22px 24px;background:var(--sunk)} .avvertenza h3{margin:0 0 10px;font-size:17px} .avvertenza p{margin:0 0 10px;font-size:14.5px;color:var(--ink-soft);max-width:78ch} .avvertenza p:last-child{margin-bottom:0} /* ============================================================================ §34 IL DISEGNO A DESTRA DELL'HERO jlkmedia mette una foto stock nella colonna di destra di ogni pagina servizio. Noi mettiamo un disegno fatto col codice: due kilobyte invece di sessanta, nitido a qualsiasi ingrandimento, cambia colore col tema. Il telaio e' sempre lo stesso, cambia solo quello che ci sta dentro. ========================================================================= */ /* La testa della pagina diventa due colonne. Era una sola, e la meta' destra restava nera: e' quello che faceva sembrare le pagine servizio incompiute. */ .testa2{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px,4vw,56px);align-items:center} @media (max-width:940px){ .testa2{grid-template-columns:1fr;gap:34px} .testa2 .mostra{max-width:520px} } .page-head h1{max-width:9.72em} .mostra{position:relative} .telaio{border:1px solid var(--line);border-radius:16px;background:var(--surface); overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.6)} /* la barra col semaforo: e' il segno che dice "questa e' una schermata" */ .tbar{display:flex;align-items:center;gap:6px;padding:10px 13px; background:var(--sunk);border-bottom:1px solid var(--line)} .tbar i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none} .tbar i:first-child{background:color-mix(in srgb,var(--green) 60%,var(--line))} .tbar b{margin-left:8px;font-family:var(--mono);font-size:10.5px;font-weight:400; letter-spacing:.06em;color:var(--ink-mute);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .tcorpo{position:relative;padding:16px;min-height:250px;display:flex; flex-direction:column;gap:9px} /* --- il montaggio: ogni pezzo entra al suo turno, quando la scheda compare -- */ .mostra .tcorpo [style*="--i"]{opacity:0;transform:translateY(10px) scale(.98); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms)} .mostra.in .tcorpo [style*="--i"]{opacity:1;transform:none} /* --- pezzi comuni --- Dentro c'e' testo vero, non rettangoli. Il primo tentativo era fatto di sole forme e Giuseppe l'ha bocciato con ragione: sembrava lo scheletro di un'interfaccia, non un'interfaccia. Il contenuto e' quello delle demo che esistono davvero, cosi' il disegno racconta una cosa vera. Il contenitore ha aria-hidden: e' decorazione, non si legge ad alta voce. */ .tcorpo{font-size:11px;line-height:1.3} .m-hero{display:block;border-radius:8px;background:var(--sunk); border:1px solid var(--line);padding:15px 16px} .m-hero i{display:block;font-family:var(--display);font-weight:700;font-size:15px; font-style:normal;letter-spacing:-.02em;color:var(--ink)} .m-hero u{display:block;margin-top:3px;font-size:11px;text-decoration:none; color:var(--ink-mute)} .m-hero b{display:inline-block;margin-top:12px;padding:6px 13px;border-radius:6px; background:var(--green);color:var(--on-green);font-family:var(--display); font-weight:600;font-size:11.5px} .m-riga{display:block;height:9px;border-radius:5px;background:var(--line)} .m-tre{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto} .m-tre > span{border-radius:8px;background:var(--sunk);border:1px solid var(--line); padding:9px;display:flex;flex-direction:column;gap:7px} .m-tre i{display:block;height:30px;border-radius:5px; background:color-mix(in srgb,var(--green) 16%,var(--line))} .m-tre b{font-size:11px;font-weight:500;color:var(--ink-soft)} /* --- e-commerce: le vetrine coi prezzi, il carrello, il totale --- */ .m-cima{display:flex;align-items:center;gap:12px} .m-cima > i{font-family:var(--display);font-weight:600;font-size:13px; font-style:normal;color:var(--ink)} .m-cart{position:relative;display:grid;place-items:center;width:32px;height:32px; border-radius:8px;background:var(--sunk);border:1px solid var(--line); color:var(--ink-mute);margin-left:auto;flex:none} .m-cart b{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px; border-radius:9px;background:var(--green);color:var(--on-green);font-size:10.5px; font-weight:700;display:grid;place-items:center;font-family:var(--display);line-height:1} .m-quattro{display:grid;grid-template-columns:1fr 1fr;gap:8px} .m-quattro > span{border-radius:8px;background:var(--sunk);border:1px solid var(--line); padding:9px;display:flex;flex-direction:column;gap:7px} .m-quattro i{display:block;height:38px;border-radius:5px; background:color-mix(in srgb,var(--green) 14%,var(--line))} .m-quattro b{font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink)} .m-tot{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .m-tot i{font-style:normal;font-size:11.5px;color:var(--ink-mute)} .m-tot b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--green)} /* --- WordPress: le voci, le bozze, quella online --- */ .m-wp .tcorpo{padding:0;flex-direction:row;gap:0} .m-rail{width:88px;background:var(--sunk);border-right:1px solid var(--line); padding:14px 11px;display:flex;flex-direction:column;gap:9px;flex:none} .m-rail i{font-style:normal;font-size:11px;color:var(--ink-mute)} .m-rail i:first-child{color:var(--green);font-weight:600} .m-lista{flex:1;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0} .m-post{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:9px; background:var(--sunk);border:1px solid var(--line)} .m-post i{flex:1;min-width:0;font-style:normal;font-size:11.5px;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-post b{flex:none;padding:3px 9px;border-radius:8px;font-size:10px;font-weight:600; font-family:var(--display);background:var(--line);color:var(--ink-mute)} .m-post .m-pub{background:var(--green);color:var(--on-green)} /* --- gestionale: i numeri veri e le righe con lo stato --- */ .m-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .m-kpi > span{border-radius:8px;background:var(--sunk);border:1px solid var(--line); padding:9px 11px} .m-kpi i{display:block;font-style:normal;font-size:9.5px;text-transform:uppercase; letter-spacing:.09em;color:var(--ink-mute)} .m-kpi b{display:block;margin-top:3px;font-family:var(--display);font-weight:700; font-size:19px;letter-spacing:-.03em;color:var(--green)} .m-tab{display:flex;flex-direction:column;gap:6px;margin-top:auto} .m-tab > i{display:flex;align-items:center;gap:10px;padding:7px 11px;font-style:normal; border-radius:6px;background:var(--sunk);border:1px solid var(--line)} .m-tab u{flex:1;min-width:0;text-decoration:none;font-size:11.5px;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-tab em{flex:none;padding:3px 9px;border-radius:8px;font-style:normal;font-size:10px; font-weight:600;font-family:var(--display);background:var(--line); color:var(--ink-mute)} .m-tab em.v{background:var(--green);color:var(--on-green)} .m-tab em.g{background:var(--ochre);color:var(--on-green)} /* --- assistenza: il punteggio e le barre --- */ .m-punteggio{display:grid;place-items:center;width:86px;height:86px;border-radius:50%; border:3px solid var(--green);margin:6px auto 0;line-height:1.05; background:radial-gradient(circle,color-mix(in srgb,var(--green) 12%,transparent),transparent 70%)} .m-punteggio b{font-family:var(--display);font-size:27px;font-weight:700; letter-spacing:-.03em;color:var(--green)} .m-punteggio u{font-size:9.5px;text-decoration:none;color:var(--ink-mute)} .m-eti{display:block;text-align:center;margin-top:8px;font-size:11px;color:var(--ink-mute)} .m-barre{display:flex;align-items:flex-end;gap:9px;height:88px;margin-top:auto} .m-barre i{flex:1;height:var(--h);border-radius:5px 5px 0 0; background:color-mix(in srgb,var(--green) 30%,var(--sunk)); border:1px solid var(--line);border-bottom:0} .m-barre i:last-child{background:var(--green);opacity:.85} @media (prefers-reduced-motion:reduce){ .mostra .tcorpo [style*="--i"]{opacity:1;transform:none;transition:none} } /* ============================================================================ §35 I NUMERI GRANDI Due colonne: a sinistra il discorso, a destra quattro numeri. E' il pezzo che jlkmedia ha su "Chi siamo" e noi non avevamo. I numeri sono veri e scritti anche altrove nel sito: e' l'unica cosa che un cliente verifica in dieci secondi. ========================================================================= */ .due{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(28px,4vw,56px);align-items:center} @media (max-width:900px){.due{grid-template-columns:1fr;gap:30px}} .numeri{display:grid;grid-template-columns:1fr 1fr;gap:14px} .num-c{padding:24px 22px 22px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--surface); transition:border-color var(--t-ui) ease,transform 260ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .num-c:hover{border-color:color-mix(in srgb,var(--green) 42%,var(--line)); transform:translateY(-4px)} } .num-c b{display:block;font-family:var(--display);font-weight:700; font-size:clamp(34px,4.4vw,46px);letter-spacing:-.04em;line-height:1; color:var(--green)} .num-c span{display:block;margin-top:9px;font-size:14px;line-height:1.5; color:var(--ink-soft)} /* ============================================================================ §36 LA LUCE DI FONDO, DIVERSA PER OGNI PAGINA jlkmedia mette un alone dietro l'hero di ogni pagina servizio: radial-gradient(900px at 80% -10%, ...). Noi facciamo lo stesso, ma cambiando POSIZIONE e INTENSITA' per pagina: sfogliando il menu si sente che le pagine sono diverse, senza cambiare niente della struttura. E' luce, non colore: le pagine restano tutte verdi, cambia da dove arriva. ========================================================================= */ .page-head{position:relative;isolation:isolate} .page-head::before{ content:"";position:absolute;inset:-10% -20% 0 -20%;z-index:-1;pointer-events:none; background:radial-gradient(var(--luce-r,760px) circle at var(--luce-x,78%) var(--luce-y,-6%), color-mix(in srgb,var(--green) var(--luce-i,16%),transparent), transparent 66%); } /* ogni pagina la sua provenienza */ [data-pag="siti-web-caserta"]{--luce-x:80%;--luce-y:-8%;--luce-r:820px;--luce-i:17%} [data-pag="ecommerce"] {--luce-x:16%;--luce-y:-4%;--luce-r:700px;--luce-i:15%} [data-pag="wordpress"] {--luce-x:92%;--luce-y:14%;--luce-r:640px;--luce-i:14%} [data-pag="gestionali"] {--luce-x:50%;--luce-y:-14%;--luce-r:900px;--luce-i:18%} [data-pag="assistenza"] {--luce-x:8%;--luce-y:8%;--luce-r:760px;--luce-i:16%} [data-pag="lavori"] {--luce-x:70%;--luce-y:-10%;--luce-r:820px;--luce-i:13%} [data-pag="chi-sono"] {--luce-x:30%;--luce-y:-8%;--luce-r:780px;--luce-i:13%} [data-pag="contatti"] {--luce-x:86%;--luce-y:-6%;--luce-r:720px;--luce-i:16%} [data-pag="404"] {--luce-x:50%;--luce-y:0%;--luce-r:600px;--luce-i:12%} /* Info e Privacy restano spente: sono pagine da leggere, non da guardare */ [data-pag="info"],[data-pag="privacy"],[data-pag="grazie"]{--luce-i:0%} /* Le sezioni scure alternate prendono una loro luce, piu' bassa e dall'altro lato, cosi' scorrendo la pagina la fonte si sposta invece di restare ferma. */ .inv{isolation:isolate} .inv::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(620px circle at 12% 0%, color-mix(in srgb,var(--green) 9%,transparent), transparent 62%)} .inv:nth-of-type(even)::after{background:radial-gradient(620px circle at 88% 100%, color-mix(in srgb,var(--green) 9%,transparent), transparent 62%)} @media (prefers-reduced-motion:reduce){ .page-head::before,.inv::after{opacity:.6} } /* ============================================================================ §37 LE OPERE — la pagina Lavori Prima c'era UN progetto solo, aperto a tutta pagina con un finto sito disegnato in CSS e due paragrafi che spiegavano perche' quel disegno andava bene. Quando un lavoro ha bisogno di essere difeso, il lavoro non regge: si vedeva un buco nero in mezzo alla pagina e tre francobolli illeggibili. Ora comandano le schermate: sei, grandi, e ognuna si apre davvero. ========================================================================= */ .opere{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px)} @media (max-width:880px){.opere{grid-template-columns:1fr}} /* una categoria con un lavoro solo: se resta in una colonna su due, mezza pagina sta vuota e sembra che manchi qualcosa */ .opere-uno{grid-template-columns:minmax(0,820px)} /* le ancore delle categorie non devono finire sotto l'intestazione fissa */ section[id]{scroll-margin-top:96px} .op{display:flex;flex-direction:column;min-width:0} .op-shot{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); background:var(--sunk);position:relative; box-shadow:0 22px 44px -28px rgba(0,0,0,.62); transition:transform 320ms var(--ease-out),border-color var(--t-ui) ease, box-shadow 320ms var(--ease-out)} .op-shot img{display:block;width:100%;height:auto; /* in bianco e nero, a colori quando ci passi sopra: e' il modo di jlkmedia e funziona — la griglia resta calma e il colore diventa la ricompensa */ filter:grayscale(1) contrast(1.02); transition:filter 420ms var(--ease-out),transform 620ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .op-shot:hover{transform:translateY(-6px); border-color:color-mix(in srgb,var(--green) 46%,var(--line)); box-shadow:0 30px 56px -26px rgba(0,0,0,.7)} .op-shot:hover img{filter:none;transform:scale(1.02)} } .op-shot:focus-visible{outline:2px solid var(--green);outline-offset:3px} @media (hover:none){ .op-shot img{filter:none} } .op-cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-mute);margin:18px 0 0} .op h3{font-size:clamp(20px,2.3vw,24px);letter-spacing:-.02em;margin:7px 0 0} .op-d{color:var(--ink-soft);font-size:15px;line-height:1.6;margin:9px 0 0;max-width:46ch} .op-go{margin:14px 0 0} .op-go a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--green); text-decoration:none;display:inline-block;padding-block:8px;margin-block:-8px} @media (hover:hover) and (pointer:fine){ .op-go a:hover{text-decoration:underline;text-underline-offset:4px} } /* ============================================================================ §38 IL PREVENTIVO GUIDATO Il visitatore spunta cosa gli serve e vede subito una stima di TEMPI. Mai di prezzi: il prezzo si decide guardando il lavoro, e una cifra sbagliata data da una pagina web e' peggio di nessuna cifra. Due regole imparate altrove e rispettate qui: - il riquadro con l'esito e' incollato in alto solo quando c'e' una colonna accanto. Sotto i 900px diventa normale: un elemento sticky dentro una colonna sola copre quello che sta sotto (e' il difetto della cassa di Vietri, non si rifa'); - la casella vera (radio, checkbox) resta nel documento ma nascosta alla vista, non a chi legge con la tastiera: si vede il contorno quando arriva il focus. ========================================================================= */ .pv{display:grid;grid-template-columns:1fr 380px;gap:clamp(26px,3.4vw,46px);align-items:start} @media (max-width:900px){.pv{grid-template-columns:1fr}} .pv > *{min-width:0} .pv-q{border:0;margin:0 0 clamp(22px,3vw,34px);padding:0} .pv-q legend{display:block;padding:0;margin:0 0 4px;font-family:var(--display); font-weight:600;font-size:clamp(19px,2.2vw,23px);letter-spacing:-.018em;color:var(--ink)} .pv-q .pv-aiuto{margin:0 0 14px;color:var(--ink-mute);font-size:15px;max-width:52ch} .pv-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--green);display:block;margin-bottom:7px} .pv-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .pv-opt{position:relative;display:block;cursor:pointer} .pv-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .pv-opt span{display:flex;flex-direction:column;gap:3px;min-height:56px; border:1px solid var(--line);border-radius:12px;background:var(--surface); padding:13px 15px;transition:border-color .16s ease,background .16s ease} .pv-opt b{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.25} .pv-opt u{text-decoration:none;font-size:13.5px;color:var(--ink-mute);line-height:1.35} @media (hover:hover) and (pointer:fine){.pv-opt:hover span{border-color:var(--green-lt)}} .pv-opt input:focus-visible + span{outline:2px solid var(--green-lt);outline-offset:2px} .pv-opt input:checked + span{border-color:var(--green);background:var(--green-soft)} :root[data-theme="dark"] .pv-opt input:checked + span{background:color-mix(in srgb,var(--green) 22%,transparent)} .pv-opt input:checked + span b{color:var(--green)} :root[data-theme="dark"] .pv-opt input:checked + span b{color:var(--green-lt)} /* l'esito */ .pv-esito{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px; background:var(--surface);padding:clamp(20px,2.4vw,26px); box-shadow:0 26px 54px -30px rgba(11,50,38,.26)} @media (max-width:900px){.pv-esito{position:static;top:auto}} .pv-esito h3{margin:0;font-family:var(--mono);font-weight:400;font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)} .pv-gg{display:flex;align-items:baseline;gap:9px;margin:10px 0 2px} .pv-gg b{font-family:var(--display);font-weight:700;letter-spacing:-.03em; font-size:clamp(38px,5vw,52px);line-height:1;color:var(--green); font-variant-numeric:tabular-nums} :root[data-theme="dark"] .pv-gg b{color:var(--green-lt)} .pv-gg span{font-size:15px;color:var(--ink-mute)} .pv-esito .pv-sotto{margin:0 0 16px;font-size:14.5px;color:var(--ink-mute);line-height:1.5} .pv-esito ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pv-esito li{display:flex;gap:9px;font-size:14.5px;color:var(--ink-soft);line-height:1.45} .pv-esito li svg{flex:none;width:17px;height:17px;margin-top:2px;fill:none; stroke:var(--green-lt);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pv-vuoto{font-size:14.5px;color:var(--ink-mute);line-height:1.55;margin:10px 0 0} .pv-riga{border-top:1px solid var(--line-soft);margin:18px 0 0;padding-top:16px} .pv-esito .btn{width:100%;justify-content:center;margin-top:2px} .pv-nota{margin:14px 0 0;font-size:13px;color:var(--ink-mute);line-height:1.5} /* le quattro fasi: come si spendono i giorni */ .pv-tit{margin:20px 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-mute)} .pv-fasi{display:flex;gap:3px;height:9px;margin:16px 0 12px} .pv-fasi i{border-radius:3px;transition:width .3s cubic-bezier(.23,1,.32,1)} .pv-fasi .f0,.pv-leg .f0{background:var(--green)} .pv-fasi .f1,.pv-leg .f1{background:var(--ochre-ink)} .pv-fasi .f2,.pv-leg .f2{background:var(--green-lt)} .pv-fasi .f3,.pv-leg .f3{background:var(--ink-mute)} .pv-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .pv-leg li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-mute);line-height:1.4} .pv-leg s{flex:none;width:9px;height:9px;border-radius:3px;margin-top:4px;text-decoration:none} .pv-leg b{color:var(--ink-soft);font-weight:600} /* il riepilogo delle scelte, in pastiglie */ .pv-chip{display:flex;flex-wrap:wrap;gap:6px;margin:0} .pv-chip span{font-size:12.5px;line-height:1.3;padding:4px 9px;border-radius:99px; border:1px solid var(--line);color:var(--ink-mute);background:var(--sunk)} /* ricomincia da capo */ .pv-ric{margin:4px 0 0} .pv-ric button{font:inherit;font-size:14.5px;color:var(--ink-mute);background:none; border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px} @media (hover:hover) and (pointer:fine){.pv-ric button:hover{color:var(--green)}} .pv-ric button:focus-visible{outline:2px solid var(--green-lt);outline-offset:3px;border-radius:4px} /* la scorciatoia verso il preventivo guidato, in fondo a ogni pagina */ /* la riga del riepilogo nel modulo contatti, quando si arriva da qui */ .pv-arrivo{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--green); border-radius:12px;background:var(--green-soft);padding:13px 15px;margin:0 0 18px; font-size:14.5px;color:var(--ink-soft);line-height:1.45} :root[data-theme="dark"] .pv-arrivo{background:color-mix(in srgb,var(--green) 18%,transparent)} .pv-arrivo b{color:var(--ink)} /* Le zone nel pie' di pagina: una riga di testo sotto la firma, non una colonna. Quattro voci in colonna erano alte un terzo delle altre e lasciavano un buco nero largo mezzo schermo. */ .ftr .zone-riga{margin-top:14px} .ftr .zone-riga a{font-family:inherit;font-size:inherit;color:var(--ink-soft); text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink-mute) 45%,transparent); text-underline-offset:3px} @media (hover:hover) and (pointer:fine){ .ftr .zone-riga a:hover{color:var(--green);text-decoration-color:currentColor} } /* ============================================================================ §39 LA SCELTA IN CIMA A CONTATTI Il modulo e' la strada normale; il preventivo guidato e' un'offerta per chi non sa ancora cosa chiedere. Prima era il contrario — il tasto verde in alto portava al guidato — e obbligava a sette passi anche chi aveva gia' le idee chiare. Stessa faccia della riga del regalo e di quella del dopo-consegna: e' la terza di quella famiglia, e si riconosce. ========================================================================= */ .scelta{display:flex;align-items:flex-start;gap:13px;margin:clamp(20px,2.6vw,28px) 0 0; padding:15px 17px;border:1px solid var(--line);border-radius:14px; background:var(--surface);text-decoration:none;max-width:60ch; transition:border-color .16s ease,transform .16s ease} .scelta span{font-size:15px;line-height:1.5;color:var(--ink-soft)} .scelta b{display:block;color:var(--ink);font-family:var(--display);font-weight:600; font-size:16px;margin-bottom:2px} .scelta-ico{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%; background:var(--green-soft);position:relative} .scelta-ico::after{content:"?";position:absolute;inset:0;display:grid;place-items:center; font-family:var(--display);font-weight:700;font-size:13px;color:var(--green)} :root[data-theme="dark"] .scelta-ico{background:color-mix(in srgb,var(--green) 28%,transparent)} :root[data-theme="dark"] .scelta-ico::after{color:var(--green-lt)} .scelta-va{flex:none;margin-left:auto;align-self:center;color:var(--green-lt);font-size:18px} :root[data-theme="light"] .scelta-va{color:var(--green)} @media (hover:hover) and (pointer:fine){ .scelta:hover{border-color:var(--green-lt);transform:translateY(-1px)} } @media (prefers-reduced-motion:reduce){ .scelta{transition:none} .scelta:hover{transform:none} } /* La parola in evidenza dentro la scheda. Serve il display:inline: dentro .scelta i sono blocchi (sono i titoli), e senza questo la frase si spezzava in tre righe. */ .scelta .ril{display:inline;margin:0;font-family:inherit;font-size:inherit; color:var(--green-lt)} :root[data-theme="light"] .scelta .ril{color:var(--green)} /* LA SCHEDA DENTRO IL PANNELLO DELL'INVITO (in fondo a ogni pagina). Qui era una riga di testo piccolo sotto un tasto verde grosso: la mangiava il tasto e non la leggeva nessuno. Il pannello ha gia' il suo fondo scuro, quindi la scheda non puo' usare --surface (sparirebbe): si alza con un velo bianco e si dichiara con il filo verde. */ .scelta-pan{margin-top:18px;max-width:none; border-color:color-mix(in srgb,var(--green) 34%,transparent); /* OPACO, non un velo. Col fondo semitrasparente il contrasto del testo non e' calcolabile: il browser non sa cosa ha sotto, e verify.mjs leggeva 1,17:1 su un testo che a occhio si legge benissimo. Un fondo opaco si misura, quindi si difende. */ background:color-mix(in srgb,var(--green) 8%,var(--surface))} .scelta-pan .scelta-ico{background:color-mix(in srgb,var(--green) 30%,var(--surface))} .scelta-pan .scelta-ico::after{color:var(--green-lt)} @media (hover:hover) and (pointer:fine){ .scelta-pan:hover{background:color-mix(in srgb,var(--green) 15%,var(--surface))} } /* la freccia si allinea al titolo, non al centro del paragrafo: in mezzo alle righe del corpo sembrava messa li' per caso */ .scelta-pan .scelta-va{align-self:flex-start;margin-top:1px} /* e sul telefono sparisce: rubava una ventina di pixel di larghezza alla frase, che passava da quattro righe a cinque. La scheda intera e' gia' il link. */ @media (max-width:560px){ .scelta-pan .scelta-va{display:none} } /* il modulo e' il bersaglio di un'ancora: senza questo il tasto lo porta sotto l'intestazione fissa e si vede mezzo campo */ #modulo{scroll-margin-top:110px} /* ========================================================================= §40 COL POLLICE, NON CON LA PUNTA (7 ottobre 2026) `telefono-test.mjs` ha trovato due punti in cui i link erano piccoli e appiccicati: la riga delle zone nel piede (alti 19px, a 7px l'uno dall'altro) e gli inviti "Scopri di piu'" dentro le schede (alti 31px). Si allarga la zona che si preme SENZA spostare niente: il riempimento in piu' e' compensato dal margine negativo, quindi il disegno resta identico e cambia solo quanto e' facile centrarli. ========================================================================= */ @media (max-width:1140px){ .zone-riga a{display:inline-block;padding:7px 2px;margin:-7px 0; line-height:1.15} /* NOTA: gli inviti dentro le schede ("Scopri di piu'", "Prova le demo") erano gia' alti 31px e si premono bene. Allargarli li aveva avvicinati a 2px l'uno dall'altro fra una scheda e la successiva: piu' facili da centrare da soli, piu' facili da sbagliare in coppia. Lasciati stare. */ /* il titolo di una scheda "Le altre zone" e' un link alto 19px: si allarga su tutta la riga, cosi' si preme dove capita e non solo sulla parola */ .tech h3 a{display:block;padding-block:6px;margin-block:-6px} /* il tasto "Ricomincia da capo" del preventivo era alto 39px */ #pv-ric{min-height:44px;padding-inline:14px} } /* ========================================================================= §41 I LAVORI RACCONTATI, NON SOLO MOSTRATI (9 ottobre 2026) Ogni scheda diceva COSA fa il lavoro, non PERCHE' e' fatto cosi'. Chi leggeva pensava "carino" e scorreva. Sotto la riga di sempre c'e' adesso il racconto in tre tempi — il problema, la decisione, cosa ci guadagna chi lo usa — chiuso, perche' la pagina resta corta e lo apre solo chi e' davvero interessato. E' un
vero: senza JavaScript funziona lo stesso, e quello che c'e' dentro lo legge anche Google. ========================================================================= */ /* IL TASTO DEVE SEMBRARE UN TASTO. Prima era una riga di mono maiuscolo grigio con una freccina: identica a un'etichetta, e infatti Giuseppe non l'ha vista ed era convinto che la pagina non si fosse aggiornata. Adesso e' una pastiglia con il bordo e il "+" davanti: si capisce che c'e' dell'altro sotto e che si apre. */ .op-caso{margin:14px 0 0} .op-caso summary{cursor:pointer;list-style:none;min-height:44px; display:inline-flex;align-items:center;gap:10px; padding:0 16px 0 13px;border:1px solid var(--line);border-radius:999px; font-family:var(--display);font-weight:600;font-size:14px; letter-spacing:-.01em;color:var(--ink); background:var(--surface); transition:color var(--t-ui) ease,border-color var(--t-ui) ease, background var(--t-ui) ease} .op-caso summary::-webkit-details-marker{display:none} /* il "+" disegnato con due trattini: diventa "-" quando e' aperto, e si capisce come si richiude. Niente caratteri speciali che un font puo' non avere. */ .op-caso summary::before{content:"";width:17px;height:17px;flex:none; border-radius:50%;background:var(--green-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 40%,transparent); background-image:linear-gradient(var(--green),var(--green)), linear-gradient(var(--green),var(--green)); background-size:9px 1.6px,1.6px 9px;background-position:center,center; background-repeat:no-repeat; transition:background-size .22s var(--ease-out)} .op-caso[open] summary::before{background-size:9px 1.6px,1.6px 0} :root[data-theme="dark"] .op-caso summary::before{ background-color:color-mix(in srgb,var(--green) 22%,transparent)} .op-caso summary:focus-visible{outline:2px solid var(--green);outline-offset:3px} @media (hover:hover) and (pointer:fine){ .op-caso summary:hover{border-color:var(--green); background:color-mix(in srgb,var(--green) 8%,var(--surface))} } @media (prefers-reduced-motion:reduce){ .op-caso summary::before{transition:none} } /* il tasto del racconto finiva a 7px da "Apri la demo": due bersagli diversi a meno di un polpastrello di distanza. Serve aria in mezzo. */ .op-caso + .op-go{margin-top:22px} .op-caso-in{padding-bottom:4px} .op-caso-in p{color:var(--ink-soft);font-size:14.5px;line-height:1.62; margin:11px 0 0;max-width:48ch} .op-caso-in b{display:block;color:var(--ink);font-family:var(--display); font-weight:600;font-size:15px;letter-spacing:-.01em}