/** * IL SISTEMA * * Quello che la home nuova ha inventato, portato su tutte le altre pagine. * Si carica ovunque; le regole qui dentro sono scritte per le pagine **che non * sono la home nuova** (`main.dreammm:not(.h2)`), cosi' non le si va a * scavalcare le sue. * * Tre cose cambiano rispetto a prima: * la testata niente cresta a zigzag, un campo di particelle e un bordo * dritto - due linguaggi diversi fra la prima pagina e le * altre si notano al primo clic; * i titoli la stessa scala della home: un ruolo centrato, uno in * colonna, e il peso 800 dappertutto; * i testi 18px come il corpo del sito, e un grigio solo. */ /* ========================================================================== LA TESTATA DELLE PAGINE INTERNE ========================================================================== */ /* Lo stesso identico fondo della testata della home: stesse percentuali, stessi due colori. */ .dreammm .dm-hero--interna{ background:radial-gradient(120% 100% at 70% 40%,#101a2e,#070a12 70%); position:relative;overflow:hidden} /* E la stessa velatura in diagonale: e' quella che tiene leggibile il titolo sopra un fondo vivo, e che da' alla testata la profondita' che senza sembra un rettangolo blu. */ .dreammm .dm-hero--interna::after{content:"";position:absolute;inset:0;z-index:1; pointer-events:none; background:linear-gradient(102deg,rgba(9,14,26,.92) 16%,rgba(9,14,26,.42) 48%,rgba(9,14,26,.14))} /* La cresta non c'e' piu' nel markup, ma se una pagina vecchia la avesse ancora non deve ricomparire. */ .dreammm .dm-hero--interna .dm-hero__cresta{display:none} .dreammm .dm-particelle{position:absolute;inset:0;overflow:hidden; pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s ease} .dreammm .dm-particelle.e-disegnata{opacity:1} /* Il filo lime sul bordo basso: e' la cucitura fra scuro e chiaro che si usa su tutta la home, ed e' dritta. */ .dreammm .dm-hero--interna::before{content:"";position:absolute; left:0;right:0;bottom:0;height:1px;z-index:4;pointer-events:none; background:linear-gradient(90deg,transparent,var(--lime),transparent); background-size:38% 100%;background-repeat:no-repeat;opacity:.55; animation:h2-luce 9s linear infinite} .dreammm .dm-hero--interna .dm-wrap{position:relative;z-index:3} /* ========================================================================== I TITOLI DELLE SEZIONI INTERNE Erano `.dm-grande` a peso 900 e interlinea 0,94; la home usa 800 e 1,04. ========================================================================== */ .dreammm:not(.h2) .dm-grande{ font-family:var(--dm-display);font-weight:800; font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-.025em; text-wrap:balance} /* Il titolo dentro una colonna divide lo spazio con qualcos'altro: piu' piccolo, come nella home. */ .dreammm:not(.h2) .dm-chisiamo .dm-grande, .dreammm:not(.h2) .dm-due .dm-grande{font-size:clamp(30px,3.6vw,52px);line-height:1.05} .dreammm:not(.h2) h3{letter-spacing:-.012em} /* ========================================================================== I TESTI 18px, la misura del corpo del sito, e un grigio solo al posto di tre. ========================================================================== */ .dreammm:not(.h2) .dm-piombo{font-size:clamp(15px,1.1vw,18px);line-height:1.55; text-wrap:pretty} .dreammm:not(.h2) .dm-testo p, .dreammm:not(.h2) .dm-riga-q p, .dreammm:not(.h2) .dm-srv p, .dreammm:not(.h2) .dm-gar p{font-size:clamp(15px,1.1vw,18px);line-height:1.55; text-wrap:pretty} .dreammm:not(.h2) .dm-bianca .dm-piombo, .dreammm:not(.h2) .dm-superficie .dm-piombo, .dreammm:not(.h2) .dm-bianca .dm-testo p, .dreammm:not(.h2) .dm-superficie .dm-testo p, .dreammm:not(.h2) .dm-bianca .dm-gar p, .dreammm:not(.h2) .dm-superficie .dm-gar p{color:#3D4A52} /* ========================================================================== LE CUCITURE FRA LE SEZIONI Dritte, come nella home: dove c'era un dente o un'onda, adesso c'e' un filo. ========================================================================== */ .dreammm:not(.h2) .dm-picchi3, .dreammm:not(.h2) .dm-vetrina{position:relative} .dreammm:not(.h2) .dm-picchi3::after, .dreammm:not(.h2) .dm-vetrina::after{display:none} /* ========================================================================== GLI SFONDI SONO QUELLI DELLA HOME, NON UNA SOMIGLIANZA Prima erano scritti a occhio: aloni simili, tempi simili, posizioni simili. "Simile" su due pagine che si aprono una dopo l'altra si vede. Qui i valori sono **copiati identici** da `home2.css`: stessi colori, stesse percentuali, stessa durata del respiro. Se un giorno cambiano li', vanno cambiati qui - ed e' scritto apposta perche' non lo si dimentichi. ========================================================================== */ .dreammm:not(.h2) .dm-bianca, .dreammm:not(.h2) .dm-chiara, .dreammm:not(.h2) .dm-superficie{position:relative;isolation:isolate;background:#fff} .dreammm:not(.h2) .dm-bianca::after, .dreammm:not(.h2) .dm-chiara::after, .dreammm:not(.h2) .dm-superficie::after{ content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none; background: radial-gradient(38% 42% at 22% 30%,rgba(105,103,251,.13),transparent 70%), radial-gradient(34% 38% at 78% 72%,rgba(200,249,4,.10),transparent 70%); animation:sis-respira 26s ease-in-out infinite alternate;will-change:transform} @keyframes sis-respira{ from{transform:scale(1.04) translate3d(-1.2%,0,0)} to{transform:scale(1.12) translate3d(1.2%,-1.4%,0)} } @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .dm-bianca::after, .dreammm:not(.h2) .dm-chiara::after, .dreammm:not(.h2) .dm-superficie::after{animation:none} } /* ========================================================================== LE SEZIONI SCURE Lo stesso fondo della home: nero-blu profondo con un alone, e il campo di particelle sopra. Prima erano un blocco di navy piatto. ========================================================================== */ .dreammm:not(.h2) .dm-scura, .dreammm:not(.h2) .dm-finale, .dreammm:not(.h2) .dm-vetrina{ position:relative;overflow:hidden; background:radial-gradient(120% 100% at 70% 40%,#101a2e,#070a12 70%)} /* --- Il fondo chiaro: una sola famiglia ----------------------------------- C'erano tre trattamenti diversi - `dm-bianca`, `dm-chiara`, `dm-superficie` - e sulla stessa pagina si vedeva il salto. Adesso e' uno solo. */ .dreammm:not(.h2) .dm-chiara{background:#fff} .dreammm:not(.h2) .dm-chiara{position:relative;isolation:isolate} .dreammm:not(.h2) .dm-chiara::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(58% 44% at 12% 8%,rgba(87,84,224,.10),transparent 68%), radial-gradient(52% 40% at 88% 92%,rgba(200,249,4,.09),transparent 66%); animation:sis-respira 30s ease-in-out infinite alternate} /* ========================================================================== LE RIGHE NUMERATE DIVENTANO RIQUADRI Sono la struttura ricorrente delle pagine servizio: erano numero + testo su una riga, e su una pagina larga risultavano vuote esattamente come le garanzie della home prima di essere rifatte. Stesso rimedio, stesso aspetto. ========================================================================== */ .dreammm:not(.h2) .dm-righe{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(14px,1.6vw,24px);border:0} .dreammm:not(.h2) .dm-riga-q{position:relative;overflow:hidden; display:block; padding:clamp(20px,2.2vw,32px); border:1px solid #E2E7EE;border-radius:16px; background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(246,248,252,.72)); transition:border-color .4s ease,transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease} .dreammm:not(.h2) .dm-riga-q:hover{border-color:rgba(87,84,224,.42); transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,30,60,.09)} /* Il numero grande e scolorito dietro al testo, come nelle garanzie. */ .dreammm:not(.h2) .dm-riga-q .dm-num{position:absolute; right:clamp(12px,1.4vw,22px);top:clamp(4px,.8vw,10px); font-family:var(--dm-display);font-weight:800; font-size:clamp(46px,5vw,78px);line-height:1; color:rgba(87,84,224,.11);font-variant-numeric:tabular-nums; pointer-events:none;background:none;border:0;padding:0;width:auto;height:auto} .dreammm:not(.h2) .dm-riga-q h3{position:relative;font-family:var(--dm-display); font-weight:800;font-size:clamp(17px,1.5vw,23px);line-height:1.18; margin:0;max-width:22ch} .dreammm:not(.h2) .dm-riga-q p{position:relative;margin:10px 0 0} /* Sulle sezioni scure il riquadro si scurisce invece di schiarire. */ .dreammm:not(.h2) .dm-scura .dm-riga-q, .dreammm:not(.h2) .dm-vetrina .dm-riga-q{ border-color:rgba(255,255,255,.12); background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.02))} .dreammm:not(.h2) .dm-scura .dm-riga-q:hover, .dreammm:not(.h2) .dm-vetrina .dm-riga-q:hover{border-color:rgba(200,249,4,.34)} .dreammm:not(.h2) .dm-scura .dm-riga-q .dm-num, .dreammm:not(.h2) .dm-vetrina .dm-riga-q .dm-num{color:rgba(200,249,4,.13)} /* ========================================================================== L'ULTIMA SEZIONE Come nella home: solo la frase, il bottone e una riga sotto. ========================================================================== */ .dreammm:not(.h2) .dm-finale{text-align:center} .dreammm:not(.h2) .dm-finale .dm-wrap{position:relative;z-index:2; display:grid;justify-items:center} .dreammm:not(.h2) .dm-finale .dm-grande{ font-size:clamp(34px,5.2vw,80px);line-height:1.02;letter-spacing:-.03em} .dreammm:not(.h2) .dm-finale .dm-piombo{max-width:62ch} /* ========================================================================== COSA OTTIENI — i benefici Erano una griglia "bento" su sei colonne, con celle larghe, larghissime e piene, distribuite da una tabella nel PHP perche' ogni riga risultasse completa. Il risultato era una parete a mattoni disuguali: sembrava che le celle grandi contassero di piu', e non e' vero, sono tutte benefici. Adesso sono riquadri uguali, come le garanzie della home. ========================================================================== */ .dreammm:not(.h2) .dm-benefici{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(14px,1.6vw,24px);margin-top:clamp(26px,3.4vh,44px)} .dreammm:not(.h2) .dm-benef, .dreammm:not(.h2) .dm-benef--largo, .dreammm:not(.h2) .dm-benef--pieno{ grid-column:auto;position:relative;overflow:hidden; padding:clamp(20px,2.2vw,32px); border:1px solid rgba(255,255,255,.12);border-radius:16px; background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); transition:border-color .4s ease,transform .4s cubic-bezier(.22,1,.36,1)} .dreammm:not(.h2) .dm-benef:hover{border-color:rgba(200,249,4,.34); transform:translateY(-3px)} /* La barra in cima, la stessa delle garanzie della home: lega le due cose e si vede sempre. Il primo tentativo era un segno di spunta fatto con due bordi ruotati - e finiva sopra la prima lettera del titolo. Un segno decorativo che copre una parola non e' un segno decorativo, e' un difetto. */ .dreammm:not(.h2) .dm-benef::before{content:"";position:absolute; left:0;top:0;height:3px;width:100%; background:linear-gradient(90deg,var(--lime),rgba(200,249,4,0))} .dreammm:not(.h2) .dm-benef h3{font-family:var(--dm-display);font-weight:800; font-size:clamp(17px,1.5vw,22px);line-height:1.18;margin:0} .dreammm:not(.h2) .dm-benef p{margin:9px 0 0;color:rgba(255,255,255,.74)} /* ========================================================================== COME LAVORIAMO — i passi diventano un percorso Erano un elenco numerato, e restavano un elenco: la cosa che Gian Luca avrebbe notato per prima. Un metodo pero' e' una sequenza - lo stesso ragionamento del Metodo 3M nella home - e qui la sequenza si vede: una linea verticale, un nodo per passo, e i riquadri appesi alla linea. ========================================================================== */ /* La linea non e' un elemento a parte allineato per calcolo: **ogni riga disegna il proprio segmento** nella colonna del nodo. Il primo tentativo metteva la linea sul contenitore e il nodo in posizione assoluta dentro la riga, con una sottrazione fra due `clamp()` diversi per farli coincidere: misurati, i nodi cadevano nove pixel fuori. Un allineamento che dipende da due formule che devono dare lo stesso numero e' un allineamento che prima o poi sbaglia; qui invece nodo e segmento stanno nella stessa colonna della stessa griglia, e non possono scostarsi. */ .dreammm:not(.h2) .dm-passi{--corsia:clamp(44px,4vw,64px); display:grid;gap:0;margin-top:clamp(26px,3.4vh,44px);padding-left:0} .dreammm:not(.h2) .dm-passo{position:relative; display:grid;grid-template-columns:var(--corsia) minmax(0,1fr) auto; align-items:start;gap:8px clamp(14px,1.6vw,24px); padding:clamp(16px,1.8vw,26px) 0; border-bottom:1px solid rgba(20,30,45,.09)} .dreammm:not(.h2) .dm-passo:last-child{border-bottom:0} /* Il segmento di linea della riga, esattamente al centro della corsia. */ .dreammm:not(.h2) .dm-passo::before{content:"";position:absolute; left:calc(var(--corsia) / 2 - 1px);top:0;height:100%;width:2px; background:rgba(87,84,224,.28)} /* La linea comincia sul primo nodo e finisce sull'ultimo: non spunta sopra il primo ne' sotto l'ultimo. */ .dreammm:not(.h2) .dm-passo:first-child::before{ top:calc(clamp(16px,1.8vw,26px) + 15px);height:calc(100% - clamp(16px,1.8vw,26px) - 15px)} .dreammm:not(.h2) .dm-passo:last-child::before{ height:calc(clamp(16px,1.8vw,26px) + 15px)} .dreammm:not(.h2) .dm-passo:only-child::before{display:none} /* Il nodo: sta nella griglia, non in posizione assoluta. */ .dreammm:not(.h2) .dm-passo__n{position:relative;z-index:1; grid-column:1;grid-row:1;justify-self:center; width:30px;height:30px;border-radius:50%; display:grid;place-items:center; background:#fff;border:2px solid var(--viola-cupo); font-family:var(--dm-display);font-weight:800;font-size:13px; color:var(--viola-cupo);font-variant-numeric:tabular-nums} .dreammm:not(.h2) .dm-scura .dm-passo__n{background:#0d1622; border-color:var(--lime);color:var(--lime)} .dreammm:not(.h2) .dm-scura .dm-passo::before{background:rgba(200,249,4,.24)} .dreammm:not(.h2) .dm-scura .dm-passo{border-bottom-color:rgba(255,255,255,.1)} /* Chi fa cosa: una pillola, non una parola persa. E' l'informazione che tranquillizza - dice al cliente quanto lavoro tocca a lui. */ .dreammm:not(.h2) .dm-passo__chi{grid-column:3;grid-row:1; align-self:start;white-space:nowrap;margin-top:5px; padding:5px 12px;border-radius:999px; font-family:var(--dm-display);font-weight:800;font-size:10px; letter-spacing:.14em;text-transform:uppercase; background:rgba(87,84,224,.10);color:var(--viola-cupo); border:1px solid rgba(87,84,224,.22)} .dreammm:not(.h2) .dm-passo__chi--tu{background:rgba(200,249,4,.18); color:#5A6B00;border-color:rgba(150,190,0,.42)} .dreammm:not(.h2) .dm-passo__chi:empty{display:none} .dreammm:not(.h2) .dm-passo__testo{grid-column:2;grid-row:1} .dreammm:not(.h2) .dm-passo__testo h3{font-family:var(--dm-display);font-weight:800; font-size:clamp(17px,1.5vw,23px);line-height:1.18;margin:0} .dreammm:not(.h2) .dm-passo__testo p{margin:8px 0 0;max-width:64ch} @media (max-width:640px){ .dreammm:not(.h2) .dm-passo{grid-template-columns:var(--corsia) minmax(0,1fr)} .dreammm:not(.h2) .dm-passo__chi{grid-column:2;grid-row:2;justify-self:start;margin-top:0} } /* ========================================================================== LE DOMANDE Erano righe con una linea sotto, indistinguibili da un elenco qualunque. Adesso ogni domanda e' un riquadro come tutti gli altri riquadri del sito, e il segno di apertura e' una croce che diventa un meno: si capisce che si apre prima di provarci. ========================================================================== */ .dreammm:not(.h2) .dm-faq{display:grid;gap:clamp(10px,1.2vw,16px); margin-top:clamp(26px,3.4vh,44px);max-width:900px;border:0} .dreammm:not(.h2) .dm-voce{border:1px solid #E2E7EE;border-radius:14px; background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(246,248,252,.72)); overflow:hidden;transition:border-color .35s ease,box-shadow .35s ease} .dreammm:not(.h2) .dm-voce:hover{border-color:rgba(87,84,224,.4)} .dreammm:not(.h2) .dm-voce[aria-expanded="true"]{border-color:rgba(87,84,224,.5); box-shadow:0 10px 28px rgba(20,30,60,.07)} .dreammm:not(.h2) .dm-voce > button{position:relative; width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:clamp(16px,1.8vw,24px) clamp(58px,5vw,74px) clamp(16px,1.8vw,24px) clamp(18px,2vw,28px); font-family:var(--dm-display);font-weight:800; font-size:clamp(15.5px,1.25vw,19px);line-height:1.3;color:var(--navy)} /* Il vecchio segno del tema resta li' e si vede come un trattino verticale accanto al nuovo: va spento, non coperto. */ .dreammm:not(.h2) .dm-voce > button::before{display:none} /* Il segno di apertura: un "+" scritto, che ruota di 45 gradi e diventa una "x". Il primo tentativo erano due tratti sovrapposti con una rotazione - e usciva una T invece di una croce. Un carattere ruotato non puo' sbagliare. */ .dreammm:not(.h2) .dm-voce > button::after{content:"+";position:absolute; right:clamp(18px,2vw,26px);top:50%; width:28px;height:28px;margin-top:-14px; display:grid;place-items:center;border-radius:50%; font-family:var(--dm-display);font-weight:800;font-size:20px;line-height:1; color:var(--viola-cupo);background:rgba(87,84,224,.09); transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease} .dreammm:not(.h2) .dm-voce[aria-expanded="true"] > button::after{ transform:rotate(45deg);background:rgba(87,84,224,.16)} .dreammm:not(.h2) .dm-risposta > div{ padding:0 clamp(18px,2vw,28px) clamp(18px,2vw,26px); max-width:70ch} .dreammm:not(.h2) .dm-risposta p{color:#3D4A52} /* ========================================================================== L'ARGOMENTO — testo e scena affiancati ========================================================================== */ .dreammm:not(.h2) .dm-argomento--vetrina{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center;gap:clamp(26px,4vw,72px); margin-top:clamp(18px,2.4vh,30px)} /* La nota si prendeva il bianco a prescindere: su una sezione chiara era bianco su bianco, e la riga finale del testo spariva. Il colore lo decide la sezione, non il componente. */ .dreammm:not(.h2) .dm-argomento--vetrina .dm-nota{margin-top:18px; padding-left:16px;border-left:2px solid rgba(87,84,224,.55); font-size:clamp(14px,1vw,16px);color:#5A6570} .dreammm:not(.h2) .dm-scura .dm-argomento--vetrina .dm-nota{ border-left-color:rgba(200,249,4,.5);color:rgba(255,255,255,.62)} @media (max-width:900px){ .dreammm:not(.h2) .dm-argomento--vetrina{grid-template-columns:1fr} } /* ========================================================================== GLI ALTRI SERVIZI — riquadri con la foto In home i servizi hanno una fotografia ciascuno, e senza le stesse foto qui i riquadri sembravano spenti. Sono le **stesse immagini** della vetrina della home, abbinate per indirizzo e non per posizione. La testata e' centrata: il titolo e il testo, allineati a sinistra sotto un titolo largo quanto il contenitore, tiravano tutto da una parte sola. ========================================================================== */ /* Il titolo non va stretto: ha un a capo voluto dopo "meglio", e dentro un contenitore da 64ch andava su tre righe. Il limite di misura serve al testo, non al titolo. */ .dreammm:not(.h2) .dm-altri__testa{text-align:center} .dreammm:not(.h2) .dm-altri__testa .dm-piombo{max-width:62ch;margin-inline:auto} .dreammm:not(.h2) .dm-altri__elenco{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(14px,1.6vw,24px); margin-top:clamp(30px,3.6vw,48px);border-top:0} .dreammm:not(.h2) .dm-altro__voce{position:relative;overflow:hidden; display:flex;flex-direction:column; border:1px solid #E2E7EE;border-radius:16px;text-decoration:none; background:linear-gradient(168deg,rgba(255,255,255,.92),rgba(246,248,252,.78)); transition:border-color .35s ease,transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease} .dreammm:not(.h2) .dm-altro__voce:hover{border-color:rgba(87,84,224,.42); transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,30,60,.12)} .dreammm:not(.h2) .dm-altro__voce:focus-visible{outline:2px solid var(--viola-cupo); outline-offset:2px} /* La foto: si allarga appena al passaggio del mouse, e una velatura la lega al fondo della scheda invece di lasciarla incollata sopra. */ .dreammm:not(.h2) .dm-altro__foto{position:relative;display:block; aspect-ratio:16 / 9;overflow:hidden;background:#0d161a} .dreammm:not(.h2) .dm-altro__foto img{width:100%;height:100%;object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1),filter .45s ease; filter:saturate(.9) brightness(.94)} .dreammm:not(.h2) .dm-altro__voce:hover .dm-altro__foto img{ transform:scale(1.06);filter:saturate(1.06) brightness(1)} .dreammm:not(.h2) .dm-altro__foto::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.22)); pointer-events:none} .dreammm:not(.h2) .dm-altro__testo{display:grid;grid-template-rows:auto 1fr auto; gap:9px;padding:clamp(16px,1.8vw,24px)} .dreammm:not(.h2) .dm-altro__voce .dm-altro__nome{ font-family:var(--dm-display);font-weight:800; font-size:clamp(17px,1.5vw,22px);line-height:1.15;letter-spacing:-.022em; color:var(--navy)} .dreammm:not(.h2) .dm-altro__voce .dm-altro__riga{ font-size:clamp(14px,1vw,15.5px);line-height:1.5;color:#5A6570;max-width:34ch} .dreammm:not(.h2) .dm-altro__voce .dm-altro__fr{display:flex; color:var(--viola-cupo); transition:transform .35s cubic-bezier(.22,1,.36,1)} .dreammm:not(.h2) .dm-altro__voce:hover .dm-altro__fr{transform:translateX(6px)} /* Il riquadro non sceglie i suoi colori: li eredita dalla sezione. */ .dreammm:not(.h2) .dm-scura .dm-altro__voce{border-color:rgba(255,255,255,.12); background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.02))} .dreammm:not(.h2) .dm-scura .dm-altro__voce:hover{border-color:rgba(200,249,4,.34); box-shadow:0 18px 40px rgba(0,0,0,.38)} .dreammm:not(.h2) .dm-scura .dm-altro__voce:focus-visible{outline-color:var(--lime)} .dreammm:not(.h2) .dm-scura .dm-altro__foto::after{ background:linear-gradient(180deg,transparent 55%,rgba(8,13,20,.55))} .dreammm:not(.h2) .dm-scura .dm-altro__voce .dm-altro__nome{color:#fff} .dreammm:not(.h2) .dm-scura .dm-altro__voce .dm-altro__riga{color:rgba(255,255,255,.72)} .dreammm:not(.h2) .dm-scura .dm-altro__voce .dm-altro__fr{color:var(--lime)} @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .dm-altro__voce, .dreammm:not(.h2) .dm-altro__foto img{transition:none} } /* ========================================================================== LE TRE FASI — quando i blocchi sono una sequenza Su Il Metodo i tre riquadri non sono un elenco: sono tre momenti in quest'ordine, e il testo lo dice ("finche' non c'e' la risposta alla prima non ha senso passare alla seconda"). Il numero smette di essere un'ombra decorativa dietro al testo e diventa un nodo su una linea che si tira. La linea non e' un elemento unico allineato per calcolo: **ogni scheda disegna il proprio segmento** e lo prolunga dentro lo spazio che la separa dalla prossima. Nodo e segmento stanno nella stessa scatola, alla stessa distanza dal bordo: non possono scostarsi. ========================================================================== */ .dreammm:not(.h2) .dm-righe--fasi{--fase-gap:clamp(14px,1.6vw,24px); --fase-pad:clamp(20px,2.2vw,32px);gap:var(--fase-gap)} .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q{overflow:visible; padding-top:calc(var(--fase-pad) + 48px)} .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q::after{content:"";position:absolute; left:var(--fase-pad);right:calc(-1 * var(--fase-gap));top:calc(var(--fase-pad) + 14px); height:2px;border-radius:2px;background:rgba(87,84,224,.3); transform:scaleX(0);transform-origin:left; transition:transform .9s cubic-bezier(.22,1,.36,1) .15s} .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q:last-child::after{ right:auto;width:58px} .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q.e-entrato::after{transform:scaleX(1)} .dreammm:not(.h2) .dm-scura .dm-righe--fasi .dm-riga-q::after{ background:rgba(200,249,4,.32)} /* Il numero diventa il nodo: stessa distanza dal bordo del segmento, e il suo centro cade sulla linea. */ .dreammm:not(.h2) .dm-righe--fasi .dm-num{position:absolute;z-index:1; left:var(--fase-pad);top:var(--fase-pad);right:auto; width:30px;height:30px;border-radius:50%; display:grid;place-items:center; font-family:var(--dm-display);font-weight:800;font-size:12.5px;line-height:1; background:#fff;border:2px solid var(--viola-cupo);color:var(--viola-cupo); font-variant-numeric:tabular-nums} .dreammm:not(.h2) .dm-scura .dm-righe--fasi .dm-num{background:#0d1622; border-color:var(--lime);color:var(--lime)} /* Il nodo si accende quando il segmento lo raggiunge. */ .js-attivo .dreammm:not(.h2) .dm-righe--fasi .dm-num{transform:scale(.5);opacity:0} .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q.e-entrato .dm-num{ transform:none;opacity:1; transition:transform .5s cubic-bezier(.34,1.56,.64,1) .1s,opacity .4s ease .1s} @media (max-width:860px){ /* In colonna il segmento verso destra non porta da nessuna parte. */ .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q::after{right:auto;width:58px} } @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .dm-righe--fasi .dm-riga-q::after{transform:scaleX(1); transition:none} .js-attivo .dreammm:not(.h2) .dm-righe--fasi .dm-num{transform:none;opacity:1} } /* ========================================================================== I NUMERI Gli stessi della home: cifra grande in lime, etichetta piccola sotto, e un filo verticale che le separa. Prima erano tre blocchi di testo in fila. ========================================================================== */ .dreammm:not(.h2) .dm-cifre{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:clamp(18px,2.4vw,44px)} .dreammm:not(.h2) .dm-cifra{position:relative;padding-left:clamp(18px,2vw,30px)} .dreammm:not(.h2) .dm-cifra::before{content:"";position:absolute; left:0;top:4px;bottom:4px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--viola-cupo),rgba(87,84,224,.12))} .dreammm:not(.h2) .dm-cifra b{display:block;font-family:var(--dm-display); font-weight:800;font-size:clamp(30px,3.2vw,52px);line-height:1; letter-spacing:-.025em;font-variant-numeric:tabular-nums} .dreammm:not(.h2) .dm-bianca .dm-cifra b, .dreammm:not(.h2) .dm-chiara .dm-cifra b, .dreammm:not(.h2) .dm-superficie .dm-cifra b{color:var(--viola-cupo)} .dreammm:not(.h2) .dm-scura .dm-cifra b{color:var(--lime)} .dreammm:not(.h2) .dm-cifra span{display:block;margin-top:10px; font-size:clamp(13px,.95vw,15px);line-height:1.45;max-width:24ch} /* ========================================================================== I LAVORI — la griglia del portfolio Riquadri come tutti gli altri, con l'immagine che si allarga appena al passaggio del mouse: e' un portfolio, l'immagine e' il contenuto. ========================================================================== */ .dreammm:not(.h2) .dm-lavori{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:clamp(16px,2vw,30px)} .dreammm:not(.h2) .dm-lav{display:block;text-decoration:none;color:inherit; border:1px solid #E2E7EE;border-radius:18px;overflow:hidden; background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(246,248,252,.72)); transition:border-color .4s ease,transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease} .dreammm:not(.h2) .dm-lav:hover{border-color:rgba(87,84,224,.42); transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,30,60,.10)} .dreammm:not(.h2) .dm-lav__foto{display:block;overflow:hidden; aspect-ratio:16/10;background:#0d141c} .dreammm:not(.h2) .dm-lav__foto img{width:100%;height:100%;object-fit:cover; display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)} .dreammm:not(.h2) .dm-lav:hover .dm-lav__foto img{transform:scale(1.04)} .dreammm:not(.h2) .dm-lav__sotto{display:block; padding:clamp(16px,1.8vw,24px)} .dreammm:not(.h2) .dm-lav__nome{font-family:var(--dm-display);font-weight:800; font-size:clamp(17px,1.5vw,22px);line-height:1.15;margin:0;color:var(--navy)} .dreammm:not(.h2) .dm-lav__riga{display:block;margin-top:7px; font-size:clamp(13.5px,1vw,16px);line-height:1.5;color:#3D4A52} /* ========================================================================== IL MODULO DEI CONTATTI Era un modulo su fondo bianco, senza carattere. Adesso e' un riquadro come gli altri, con i campi che si accendono di viola quando ci si scrive dentro. ========================================================================== */ .dreammm:not(.h2) .dm-contatti__modulo{ padding:clamp(22px,2.6vw,40px); border:1px solid #E2E7EE;border-radius:18px; background:linear-gradient(168deg,rgba(255,255,255,.94),rgba(246,248,252,.8)); box-shadow:0 14px 40px rgba(20,30,60,.06)} .dreammm:not(.h2) .dm-modulo label{display:block;margin-bottom:16px; font-family:var(--dm-display);font-weight:800;font-size:12px; letter-spacing:.08em;text-transform:uppercase;color:#3D4A52} .dreammm:not(.h2) .dm-modulo input, .dreammm:not(.h2) .dm-modulo textarea, .dreammm:not(.h2) .dm-modulo select{ display:block;width:100%;margin-top:8px; padding:13px 15px;border-radius:11px; border:1px solid #DBE1EA;background:#fff; font-family:inherit;font-size:16px;line-height:1.45;color:var(--navy); letter-spacing:normal;text-transform:none;font-weight:400; transition:border-color .25s ease,box-shadow .25s ease} .dreammm:not(.h2) .dm-modulo input:focus, .dreammm:not(.h2) .dm-modulo textarea:focus, .dreammm:not(.h2) .dm-modulo select:focus{outline:0; border-color:var(--viola-cupo); box-shadow:0 0 0 4px rgba(87,84,224,.14)} .dreammm:not(.h2) .dm-modulo textarea{resize:vertical;min-height:130px} .dreammm:not(.h2) .dm-modulo__due{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:0 clamp(12px,1.4vw,20px)} /* La vetrina dei lavori recenti adesso puo' capitare chiara o scura, a seconda di come cade l'alternanza: le carte si adattano al fondo su cui stanno. */ .dreammm:not(.h2) .dm-vetrina-lavori .dm-prog__tela{border-radius:16px;overflow:hidden} .dreammm:not(.h2) .dm-chiara .dm-prog__eti b{color:var(--navy)} .dreammm:not(.h2) .dm-chiara .dm-prog__eti span{color:#3D4A52} /* ========================================================================== IL MOVIMENTO DELLE PAGINE INTERNE La home ha un disegno animato per sezione; qui non c'era niente, e la differenza si sentiva al primo clic. Si anima quello che gia' racconta qualcosa - una sequenza, una crescita, un elenco che arriva - e si anima **una volta sola**: sono pagine da leggere. ========================================================================== */ /* --- La linea dei passi che si traccia ---------------------------------- */ .js-attivo .dreammm:not(.h2) .dm-passo::before{transform:scaleY(0); transform-origin:top} .dreammm:not(.h2) .dm-passi.e-tracciata .dm-passo::before{ transform:scaleY(1); transition:transform var(--durata,1400ms) cubic-bezier(.4,0,.2,1)} .dreammm:not(.h2) .dm-passi.e-subito .dm-passo::before{transition:none} /* Il nodo si accende quando la linea lo raggiunge: il ritardo lo calcola il JavaScript dalla posizione vera del nodo, non e' un numero scelto a caso. */ .js-attivo .dreammm:not(.h2) .dm-passo__n{ opacity:0;transform:scale(.6)} .dreammm:not(.h2) .dm-passi.e-tracciata .dm-passo__n{ opacity:1;transform:none; transition:opacity .4s ease var(--quando,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--quando,0ms)} .js-attivo .dreammm:not(.h2) .dm-passo__testo, .js-attivo .dreammm:not(.h2) .dm-passo__chi{opacity:0;transform:translateY(10px)} .dreammm:not(.h2) .dm-passi.e-tracciata .dm-passo__testo, .dreammm:not(.h2) .dm-passi.e-tracciata .dm-passo__chi{ opacity:1;transform:none; transition:opacity .5s ease calc(var(--quando,0ms) + 60ms), transform .6s cubic-bezier(.22,1,.36,1) calc(var(--quando,0ms) + 60ms)} .dreammm:not(.h2) .dm-passi.e-subito .dm-passo__n, .dreammm:not(.h2) .dm-passi.e-subito .dm-passo__testo, .dreammm:not(.h2) .dm-passi.e-subito .dm-passo__chi{transition:none} /* --- I riquadri che entrano --------------------------------------------- */ .js-attivo .dreammm:not(.h2) .dm-riga-q, .js-attivo .dreammm:not(.h2) .dm-benef, .js-attivo .dreammm:not(.h2) .dm-altro__voce, .js-attivo .dreammm:not(.h2) .dm-lav{opacity:0;transform:translateY(16px)} .dreammm:not(.h2) .dm-riga-q.e-entrato, .dreammm:not(.h2) .dm-benef.e-entrato, .dreammm:not(.h2) .dm-altro__voce.e-entrato, .dreammm:not(.h2) .dm-lav.e-entrato{opacity:1;transform:none; transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1), border-color .4s ease,box-shadow .4s ease} /* La barra in cima si allunga quando il riquadro e' arrivato. */ .dreammm:not(.h2) .dm-benef::before{transform:scaleX(0);transform-origin:left; transition:transform .8s cubic-bezier(.22,1,.36,1) .15s} .dreammm:not(.h2) .dm-benef.e-entrato::before{transform:scaleX(1)} /* --- Il titolo della testata sale riga per riga, come nella home -------- */ .dreammm .dm-hero--interna .dm-mega .dm-riga{overflow:hidden;display:block} .js-attivo .dreammm .dm-hero--interna .dm-mega .dm-riga > span{display:block; transform:translate3d(0,108%,0); animation:h2-riga 1.05s cubic-bezier(.16,1,.3,1) forwards} .js-attivo .dreammm .dm-hero--interna .dm-mega .dm-riga:nth-child(1) > span{animation-delay:.18s} .js-attivo .dreammm .dm-hero--interna .dm-mega .dm-riga:nth-child(2) > span{animation-delay:.30s} @keyframes h2-riga{from{transform:translate3d(0,108%,0)}to{transform:none}} @media (prefers-reduced-motion:reduce){ .js-attivo .dreammm:not(.h2) .dm-passo::before{transform:scaleY(1)} .js-attivo .dreammm:not(.h2) .dm-passo__n, .js-attivo .dreammm:not(.h2) .dm-passo__testo, .js-attivo .dreammm:not(.h2) .dm-passo__chi, .js-attivo .dreammm:not(.h2) .dm-riga-q, .js-attivo .dreammm:not(.h2) .dm-benef, .js-attivo .dreammm:not(.h2) .dm-altro__voce, .js-attivo .dreammm:not(.h2) .dm-lav{opacity:1;transform:none} .dreammm:not(.h2) .dm-benef::before{transform:scaleX(1)} .js-attivo .dreammm .dm-hero--interna .dm-mega .dm-riga > span{animation:none;transform:none} } /* ========================================================================== OGNI COMPONENTE DEVE FUNZIONARE SU TUTTI E DUE I FONDI Da quando l'alternanza e' calcolata (e non scritta a mano), una sezione puo' capitare chiara o scura a seconda di quante la precedono. Ogni pezzo che dava per scontato il proprio fondo si e' rotto. Trovati misurando il contrasto su diciotto pagine, non guardando: "Tutti i lavori" bianco su bianco 1,00:1 le domande dei contatti navy su navy 1,00:1 le loro risposte grigio su navy 1,94:1 La regola che ne esce: un componente non sceglie i propri colori, li eredita dalla sezione in cui si trova. ========================================================================== */ /* --- Le domande, sul fondo scuro ---------------------------------------- */ .dreammm:not(.h2) .dm-scura .dm-voce, .dreammm:not(.h2) .dm-vetrina .dm-voce{ border-color:rgba(255,255,255,.13); background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.02))} .dreammm:not(.h2) .dm-scura .dm-voce:hover, .dreammm:not(.h2) .dm-vetrina .dm-voce:hover{border-color:rgba(200,249,4,.36)} .dreammm:not(.h2) .dm-scura .dm-voce[aria-expanded="true"], .dreammm:not(.h2) .dm-vetrina .dm-voce[aria-expanded="true"]{ border-color:rgba(200,249,4,.46);box-shadow:none} .dreammm:not(.h2) .dm-scura .dm-voce > button, .dreammm:not(.h2) .dm-vetrina .dm-voce > button{color:#fff} .dreammm:not(.h2) .dm-scura .dm-voce > button::after, .dreammm:not(.h2) .dm-vetrina .dm-voce > button::after{ color:var(--lime);background:rgba(200,249,4,.12)} /* Il grassetto dentro una risposta era navy, cioe' il colore pensato per il fondo chiaro: su una sezione scura diventava navy su navy. Misurato sul prezzo di un sito, "fra 3.000 e 4.000 euro": 14,26,31 su 16,26,46, cioe' un rapporto di 1,1 a 1. Illeggibile. Il colore lo decide la sezione, non il componente. */ .dreammm:not(.h2) .dm-scura .dm-risposta strong, .dreammm:not(.h2) .dm-scura .dm-risposta b, .dreammm:not(.h2) .dm-vetrina .dm-risposta strong, .dreammm:not(.h2) .dm-vetrina .dm-risposta b{color:#fff} .dreammm:not(.h2) .dm-scura .dm-risposta p, .dreammm:not(.h2) .dm-vetrina .dm-risposta p, .dreammm:not(.h2) .dm-scura .dm-risposta, .dreammm:not(.h2) .dm-vetrina .dm-risposta{color:rgba(255,255,255,.74)} /* --- I bottoni vuoti e i collegamenti, sul fondo chiaro ------------------ */ .dreammm:not(.h2) .dm-chiara .dm-btn--vuoto, .dreammm:not(.h2) .dm-bianca .dm-btn--vuoto, .dreammm:not(.h2) .dm-superficie .dm-btn--vuoto{ color:var(--navy);border-color:rgba(20,30,45,.24)} .dreammm:not(.h2) .dm-chiara .dm-btn--vuoto:hover, .dreammm:not(.h2) .dm-bianca .dm-btn--vuoto:hover, .dreammm:not(.h2) .dm-superficie .dm-btn--vuoto:hover{ border-color:var(--viola-cupo);color:var(--viola-cupo)} .dreammm:not(.h2) .dm-chiara .dm-btn--vuoto span, .dreammm:not(.h2) .dm-bianca .dm-btn--vuoto span, .dreammm:not(.h2) .dm-superficie .dm-btn--vuoto span{color:inherit} /* --- I riquadri, i titoli e le etichette, secondo il fondo --------------- */ .dreammm:not(.h2) .dm-chiara .dm-riga-q h3, .dreammm:not(.h2) .dm-bianca .dm-riga-q h3{color:var(--navy)} .dreammm:not(.h2) .dm-scura .dm-riga-q h3, .dreammm:not(.h2) .dm-vetrina .dm-riga-q h3{color:#fff} .dreammm:not(.h2) .dm-scura .dm-riga-q p, .dreammm:not(.h2) .dm-vetrina .dm-riga-q p{color:rgba(255,255,255,.74)} .dreammm:not(.h2) .dm-scura .dm-lav, .dreammm:not(.h2) .dm-vetrina .dm-lav{border-color:rgba(255,255,255,.12); background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.02))} .dreammm:not(.h2) .dm-scura .dm-lav__nome, .dreammm:not(.h2) .dm-vetrina .dm-lav__nome{color:#fff} .dreammm:not(.h2) .dm-scura .dm-lav__riga, .dreammm:not(.h2) .dm-vetrina .dm-lav__riga{color:rgba(255,255,255,.74)} /* Le date del magazine erano grigio chiaro su bianco: 2,9 contro 1. */ .dreammm .dm-bianca time, .dreammm .dm-chiara time, .dreammm .dm-superficie time{color:#5F6E78} /* ========================================================================== IL NASTRO Un nastro che si sfoglia di lato. Lo usano la home per i nove servizi e le pagine interne per i lavori: stesso meccanismo, contenuti diversi. Due modi, non uno. Senza JavaScript, o col dito, il nastro e' una fila che si scorre e si aggancia (`vt-nastro` con lo scatto nativo): funziona da sola, e i nove collegamenti sono raggiungibili comunque. Con la rotellina, il JavaScript aggiunge `vt-copertina` e le carte diventano una pila in prospettiva, con quella al centro in primo piano. ========================================================================== */ .dreammm .h2-vetrina{position:relative;overflow:hidden; /* La sezione fa da colonna: cosi' il contenuto si allunga fino in fondo. Con `height:100%` sul figlio non funzionava - una percentuale non si calcola su un `min-height`, e la pista restava alta zero mentre le carte, assolute, finivano sopra il titolo. */ display:flex;flex-direction:column; padding-block:clamp(30px,5.4vh,92px); /* L'altezza della carta cresce con lo schermo, ma **non in proporzione**: titolo, etichetta e comandi hanno un'altezza loro che non scala, e quella va sottratta prima. Con un semplice `38vh` la carta stava larga a 900px di altezza e restava un francobollo su un 27", dove lo spazio libero e' piu' del doppio. I due numeri escono da due misure vere: 300px di carta su una finestra alta 900, 620 su una alta 1440. */ --ch:clamp(230px,calc((100svh - 77px) * .63 - 243px),620px); --cw:calc(var(--ch) * .8); /* le carte sono 4:5, e cosi' --ch e' davvero l'altezza della foto */ --passo:calc(var(--cw) * .90); --alzata:calc(var(--ch) * .19)} /* quanto si alza la pila per far posto all'etichetta */ .dreammm .vt-dentro{position:relative;z-index:2; flex:1;min-height:0;display:grid; grid-template-rows:auto 1fr auto;gap:clamp(12px,2vh,22px)} /* --- Il cielo ------------------------------------------------------------- Un fondo di stelle a due strati, due nebulose e ogni tanto una scia. La regola che tiene basso il costo: **niente si ridisegna a ogni fotogramma**. Le stelle finiscono una volta sola dentro due tele, e da li' in poi si spostano le tele intere - per il browser e' come muovere un'immagine, non come disegnare mille punti sessanta volte al secondo. La profondita' viene dal fatto che i due strati vanno in direzioni opposte: `--scorsa` va da 0 a 1 mentre si sfoglia il nastro, e le stelle vicine si spostano quasi tre volte piu' delle lontane. */ .dreammm .h2-vetrina{background:#080d14} .dreammm .vt-cielo{position:absolute;inset:0;z-index:0;overflow:hidden; pointer-events:none} /* Le tele sono piu' grandi del riquadro e centrate: cosi' possono scivolare senza mai scoprire un bordo. */ /* Il campo di particelle, su tela trasparente: il fondo scuro e le due nebulose stanno sotto, in CSS, e non costano niente. La tela ci mette solo i punti. Le stelle e le galassie disegnate sono state tolte: erano belle ma erano una cosa in piu' da guardare in una sezione che ha gia' nove immagini. */ .dreammm .vt-particelle{position:absolute;inset:0; opacity:0;transition:opacity 1.2s ease} .dreammm .vt-particelle.e-disegnata{opacity:1} /* --- Gli strati di puntini ------------------------------------------------ Ognuno e' una piastrella che si ripete, grande quanto il contenitore piu' una piastrella: spostandolo di esattamente una piastrella torna identico a se' stesso, e il giro non si vede. A muoverli e' solo il CSS - nessun disegno a ogni fotogramma, che e' l'errore che questa versione e' venuta a correggere. */ .dreammm .h2-particelle, .dreammm .vt-particelle, .dreammm .ch-particelle, .dreammm .fn-particelle{overflow:hidden;pointer-events:none} .dreammm .pt-strato{position:absolute;top:-460px;left:-460px; width:calc(100% + 460px);height:calc(100% + 460px); background-repeat:repeat;will-change:transform} .dreammm .pt-strato.e-fondo{animation:pt-va-a 96s linear infinite;opacity:.7} .dreammm .pt-strato.e-mezzo{animation:pt-va-b 64s linear infinite;opacity:.85} .dreammm .pt-strato.e-avanti{animation:pt-va-c 42s linear infinite} @keyframes pt-va-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(460px,460px,0)}} @keyframes pt-va-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(460px,-460px,0)}} @keyframes pt-va-c{from{transform:translate3d(0,0,0)}to{transform:translate3d(-460px,460px,0)}} @media (prefers-reduced-motion:reduce){ .dreammm .pt-strato{animation:none} } .dreammm .vt-nebulosa{position:absolute;border-radius:50%; filter:blur(80px);mix-blend-mode:screen; transition:transform 1.2s cubic-bezier(.22,1,.36,1)} .dreammm .vt-nebulosa--a{width:min(760px,62vw);aspect-ratio:1;left:-12%;top:-30%; background:radial-gradient(circle,rgba(87,84,224,.55),rgba(60,40,140,.2) 46%,transparent 70%); transform:translateX(calc(var(--scorsa,0) * 190px)); animation:vt-deriva-a 46s ease-in-out infinite alternate} .dreammm .vt-nebulosa--b{width:min(620px,52vw);aspect-ratio:1;right:-14%;bottom:-32%; background:radial-gradient(circle,rgba(0,150,175,.26),rgba(120,150,60,.08) 44%,transparent 70%); transform:translateX(calc(var(--scorsa,0) * -170px)); animation:vt-deriva-b 58s ease-in-out infinite alternate} @keyframes vt-deriva-a{from{translate:0 0}to{translate:70px 46px}} @keyframes vt-deriva-b{from{translate:0 0}to{translate:-70px -34px}} /* Le stelle cadenti sono state tolte: viste in pagina erano un effetto da salvaschermo, non profondita'. */ /* --- La testa ------------------------------------------------------------ */ /* Il titolo ha la stessa scala degli altri della pagina: prima era la meta' e sembrava una didascalia. Sta su due righe perche' il contenitore e' largo (misurato in pixel, non in `ch`: con un carattere stretto il `ch` e' minuscolo e il titolo andava a cinque righe). */ .dreammm .vt-testa{text-align:center;max-width:min(1020px,92vw);margin-inline:auto} .dreammm .vt-titolo{font-family:var(--dm-display);font-weight:800; font-size:clamp(30px,4.2vw,58px);line-height:1.04;letter-spacing:-.025em; text-wrap:balance;margin:0} /* --- La pista ------------------------------------------------------------ */ .dreammm .vt-pista{position:relative;display:grid;align-items:center; min-height:0} /* Il modo di partenza: una fila che si scorre. Vale senza JavaScript e col dito, ed e' anche quello che vede un motore di ricerca. */ .dreammm .vt-nastro{list-style:none;margin:0;padding:0 max(16px,calc(50% - var(--cw)/2)); display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none} .dreammm .vt-nastro::-webkit-scrollbar{display:none} .dreammm .vt-carta{flex:0 0 var(--cw);scroll-snap-align:center} /* --- Il modo in prospettiva (con la rotellina) --------------------------- */ .dreammm .vt-copertina .vt-nastro{display:block;overflow:visible; padding:0;height:100%;scroll-snap-type:none} /* La pila si alza di mezza etichetta: l'etichetta sporge sotto la carta, e senza questa alzata finirebbe oltre il bordo della schermata. */ .dreammm .vt-copertina .vt-carta{position:absolute;left:50%; top:calc(50% - var(--alzata)); width:var(--cw); transform:translate(-50%,-50%) translateX(var(--ax,0px)) scale(var(--as,1)); z-index:var(--az,1);opacity:var(--ao,1); transition:transform .62s cubic-bezier(.22,1,.36,1), opacity .45s ease,filter .45s ease; will-change:transform} /* --- La carta ------------------------------------------------------------ */ .dreammm .vt-carta__area{display:block;text-decoration:none;color:inherit} .dreammm .vt-carta__foto{position:relative;display:block; aspect-ratio:4/5;border-radius:18px;overflow:hidden; background:linear-gradient(150deg,#16242b,#0d161a); box-shadow:0 18px 50px rgba(0,0,0,.5)} .dreammm .vt-carta__foto img{width:100%;height:100%;object-fit:cover;display:block} .dreammm .vt-carta__vuoto{position:absolute;inset:0; background:radial-gradient(120% 90% at 30% 20%,rgba(87,84,224,.5),transparent 70%)} /* L'icona del servizio resta sulla foto: e' il segno che distingue una carta dall'altra anche quando l'immagine e' piccola e di lato. */ /* L'icona sta su un dischetto scuro: sulle immagini chiare o affollate, da sola, spariva. */ .dreammm .vt-carta__ico{position:absolute;left:14px;top:14px; width:34px;height:34px;padding:7px;box-sizing:border-box;border-radius:50%; background:rgba(8,13,20,.62);backdrop-filter:blur(6px); fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round; stroke-linejoin:round;opacity:.96} /* --- L'etichetta sotto la carta ------------------------------------------ Il testo c'e' per tutte e nove - lo legge un motore di ricerca - ma si vede solo per quella al centro. Le altre carte mostrano la sola immagine, come nei nastri fatti bene. */ .dreammm .vt-carta__eti{display:block;text-align:center;margin-top:16px} /* Il testo qui era di due misure sotto al resto del sito - 14px contro 18 - e la sezione sembrava una didascalia lunga. Ora parte da 16 e arriva a 19. */ .dreammm .vt-carta__eti h3{font-family:var(--dm-display);font-weight:800; font-size:clamp(20px,1.9vw,30px);line-height:1.12;margin:0} .dreammm .vt-carta__txt{display:block;margin-top:9px; font-size:clamp(16px,1.15vw,19px);line-height:1.48;color:rgba(255,255,255,.72); max-width:44ch;margin-inline:auto} .dreammm .vt-carta__vai{display:inline-flex;align-items:center;gap:7px; margin-top:14px;font-family:var(--dm-display);font-weight:800;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--lime)} .dreammm .vt-carta__vai i{font-style:normal;transition:transform .3s} .dreammm .vt-carta__area:hover .vt-carta__vai i{transform:translateX(5px)} /* Nel modo in prospettiva l'etichetta appartiene alla carta al centro. Sta fuori dal riquadro della foto, percio' si toglie dal flusso: altrimenti allungherebbe la carta e la pila non sarebbe piu' centrata. */ .dreammm .vt-copertina .vt-carta__eti{position:absolute;left:50%;top:100%; width:min(46ch,86vw);transform:translateX(-50%); opacity:0;pointer-events:none;transition:opacity .4s ease} .dreammm .vt-copertina .vt-carta.e-centro .vt-carta__eti{opacity:1;pointer-events:auto} /* La carta al centro si stacca dalle altre: un alone chiaro dietro, come quando una cosa e' illuminata da vicino. */ /* Le carte di lato si spengono e si sfocano appena. Con le immagini astratte bastava rimpicciolirle; queste sono piene di testo e di colore, e a fianco della carta al centro facevano rumore. La sfocatura e' quella che fa da profondita' vera: l'occhio legge "lontano", non "scuro". */ .dreammm .vt-copertina .vt-carta .vt-carta__foto{ transition:box-shadow .5s ease,filter .5s ease; filter:saturate(.62) brightness(.58) blur(1.4px)} .dreammm .vt-copertina .vt-carta.e-vicina .vt-carta__foto{filter:saturate(.74) brightness(.7) blur(.7px)} .dreammm .vt-copertina .vt-carta.e-centro .vt-carta__foto{ filter:none; box-shadow:0 34px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.1), 0 0 120px 26px rgba(87,84,224,.34)} /* --- I comandi ----------------------------------------------------------- */ .dreammm .vt-comandi{display:flex;align-items:center;justify-content:center; gap:20px;opacity:0;transition:opacity .4s} .dreammm .vt-copertina .vt-comandi{opacity:1} .dreammm .vt-freccia{width:38px;height:38px;border-radius:50%;cursor:pointer; background:transparent;border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8);font-size:15px;line-height:1; transition:border-color .3s,color .3s,background .3s} .dreammm .vt-freccia:hover:not(:disabled){border-color:var(--lime);color:var(--lime)} .dreammm .vt-freccia:disabled{opacity:.28;cursor:default} .dreammm .vt-conta{font-family:var(--dm-display);font-weight:800;font-size:12px; letter-spacing:.18em;color:rgba(255,255,255,.55);margin:0; font-variant-numeric:tabular-nums} .dreammm .vt-conta__ora{color:var(--lime)} /* --- Schermi bassi e telefoni -------------------------------------------- */ @media (max-width:900px), (max-height:700px){ /* Sotto una certa misura la schermata unica diventa una gabbia: meglio una sezione che cresce e un nastro che si scorre col dito. */ .dreammm .h2-vetrina{--ch:clamp(220px,52vw,320px)} .dreammm .vt-dentro{height:auto;padding-block:var(--sp-lg)} .dreammm .vt-carta__eti{margin-top:12px} .dreammm .vt-carta__txt{font-size:13px} } @media (prefers-reduced-motion:reduce){ .dreammm .vt-alone{animation:none;transition:none} .dreammm .vt-copertina .vt-carta{transition:none} } /* Il paragrafo della sezione: c'era nella griglia di prima e non va perso - e' testo che spiega il servizio e che porta ricerche. Sta stretto e piccolo perche' qui il protagonista e' il nastro. */ .dreammm .vt-sotto{margin:16px 0 0;font-size:clamp(16px,1.15vw,19px); line-height:1.55;color:rgba(255,255,255,.74);max-width:70ch; margin-inline:auto;text-wrap:pretty} @media (max-height:820px){ /* Su uno schermo basso il paragrafo e' la prima cosa che si sacrifica: senza di lui il nastro respira, e il testo resta comunque nella pagina per chi legge e per chi indicizza. */ .dreammm .vt-sotto{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* E l'altezza che il paragrafo lasciava libera torna alla carta: senza questa riga la formula qui sotto continuerebbe a sottrarre uno spazio che non c'e' piu', e la carta resterebbe un francobollo. */ .dreammm .h2-vetrina{--ch:clamp(210px,calc((100svh - 77px) * .63 - 195px),620px)} } /* Il nastro sulle pagine interne: le stesse regole della home, ma la sezione qui puo' capitare chiara. Le carte, i comandi e le etichette prendono i colori dal fondo su cui si trovano invece di darlo per scontato - e' la regola che il sito ha imparato a sue spese. */ .dreammm .dm-chiara.h2-vetrina, .dreammm .dm-bianca.h2-vetrina{background:#fff} .dreammm .dm-chiara.h2-vetrina .vt-titolo, .dreammm .dm-chiara.h2-vetrina .vt-carta__eti h3{color:var(--navy)} .dreammm .dm-chiara.h2-vetrina .vt-sotto, .dreammm .dm-chiara.h2-vetrina .vt-carta__txt{color:#3D4A52} .dreammm .dm-chiara.h2-vetrina .vt-freccia{border-color:rgba(20,30,45,.22);color:var(--navy)} .dreammm .dm-chiara.h2-vetrina .vt-freccia:hover:not(:disabled){border-color:var(--viola-cupo);color:var(--viola-cupo)} .dreammm .dm-chiara.h2-vetrina .vt-conta{color:#5F6E78} .dreammm .dm-chiara.h2-vetrina .vt-conta__ora{color:var(--viola-cupo)} .dreammm .dm-chiara.h2-vetrina .vt-carta__vai, .dreammm .dm-chiara.h2-vetrina .lv-tutti{color:var(--viola-cupo)} .dreammm .dm-chiara.h2-vetrina .lv-tutti:hover{border-bottom-color:var(--viola-cupo)} /* Sul chiaro l'alone viola dietro la carta al centro non serve, e anzi sbava: 120px di sfocatura con 26px di diffusione, su bianco, arrivano fin sotto il titolo della sezione e lo rendono illeggibile. La regola c'era gia' ma non e' mai scattata: cercava `.vt-copertina` come **discendente** della sezione, e invece `.vt-copertina` sta sulla sezione stessa. Un selettore che non trova niente non da' errore, e il difetto e' rimasto in piedi su tre pagine. Ora si aggancia al fondo e basta, e l'ombra e' piu' raccolta. */ .dreammm .dm-chiara .vt-carta.e-centro .vt-carta__foto, .dreammm .dm-bianca .vt-carta.e-centro .vt-carta__foto, .dreammm .dm-superficie .vt-carta.e-centro .vt-carta__foto{ box-shadow:0 20px 44px rgba(20,30,60,.16),0 0 0 1px rgba(20,30,45,.07)} /* Le carte di lato, sul chiaro, non vanno scurite: diventavano grigie e sporche sul bianco. Si allontanano schiarendo e perdendo colore. */ .dreammm .dm-chiara .vt-copertina .vt-carta .vt-carta__foto, .dreammm .dm-bianca .vt-copertina .vt-carta .vt-carta__foto, .dreammm .dm-superficie .vt-copertina .vt-carta .vt-carta__foto{ filter:saturate(.5) contrast(.94) blur(1.1px);opacity:.5} .dreammm .dm-chiara .vt-copertina .vt-carta.e-vicina .vt-carta__foto, .dreammm .dm-bianca .vt-copertina .vt-carta.e-vicina .vt-carta__foto, .dreammm .dm-superficie .vt-copertina .vt-carta.e-vicina .vt-carta__foto{ filter:saturate(.75) blur(.5px);opacity:.76} .dreammm .dm-chiara .vt-copertina .vt-carta.e-centro .vt-carta__foto, .dreammm .dm-bianca .vt-copertina .vt-carta.e-centro .vt-carta__foto, .dreammm .dm-superficie .vt-copertina .vt-carta.e-centro .vt-carta__foto{ filter:none;opacity:1} /* Il vecchio binario trascinabile non serve piu': se restasse in qualche pagina non deve comparire meta' vecchio e meta' nuovo. */ .dreammm .dm-vetrina-lavori .dm-binario, .dreammm .dm-vetrina-lavori .dm-trascina{display:none} /* La sezione alta una schermata: era definita solo nel foglio della home, e la vetrina dei lavori sulle pagine interne veniva alta 299px invece di 823 - il nastro non aveva spazio per esistere. Meno 77px perche' la testata e' fissa: senza la sottrazione la sezione sborda di quei 77. */ .dreammm .h2-schermo{min-height:calc(100svh - 77px); display:grid;align-content:center; padding-block:clamp(40px,6vh,72px);position:relative;overflow:hidden} @media (max-width:980px){ .dreammm .h2-schermo{min-height:0;padding-block:clamp(64px,9vh,96px)} } /* La regola generica qui sopra impone `display:grid` a ogni sezione alta una schermata, e cosi' scavalcava l'impaginazione del nastro, che sta piu' su nel foglio: le carte finivano sopra il titolo. Il nastro ridichiara la sua, e la ridichiara **dopo**, perche' a parita' di peso vince l'ultima. */ .dreammm .h2-vetrina{display:flex;flex-direction:column; padding-block:clamp(30px,5.4vh,92px)} .dreammm .h2-vetrina .vt-dentro{flex:1;min-height:0;display:grid; grid-template-rows:auto 1fr auto;gap:clamp(12px,2vh,22px);align-content:stretch} /* Su fondo chiaro l'ambiente dietro il mockup non va scurito: sulla home serve a staccare la carta dal nero, qui la farebbe sembrare un rettangolo pesante appoggiato sul bianco. */ .dreammm .dm-chiara.h2-vetrina .lv-ambiente, .dreammm .dm-bianca.h2-vetrina .lv-ambiente{filter:brightness(.92) saturate(.9)} .dreammm .dm-chiara.h2-vetrina .vt-carta__foto, .dreammm .dm-bianca.h2-vetrina .vt-carta__foto{ background:linear-gradient(150deg,#eef1f6,#e3e8f0)} /* ========================================================================== I NUMERI: UNA TRACCIA DA STRUMENTO Erano quattro cifre in fila e sembravano quello che erano. Gian Luca li ha chiamati "spenti e banali", e aveva ragione. Adesso i numeri sono i nodi di una traccia che si disegna quando la sezione arriva, e che poi un impulso continua a percorrere. Misurare e' una delle tre M del metodo: questa e' l'unica sezione del sito in cui lo studio si misura, e ha senso che somigli a uno strumento. Queste regole stanno dopo il blocco "I NUMERI" piu' in alto e lo soprascrivono di proposito. ========================================================================== */ .dreammm:not(.h2) .dm-cifre{ --strip:clamp(56px,5.6vw,92px); position:relative;display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); grid-template-rows:auto var(--strip) auto; /* Niente spazio fra le colonne: il centro della colonna i deve cadere esatto a (i+0,5)/n, che e' dove l'SVG mette il nodo. Lo stacco fra una cifra e l'altra e' padding dentro la cella. */ gap:0; border:0;background:none;padding:0} /* Il contenitore della coppia sparisce dalla griglia (`display:contents`): cifra ed etichetta diventano celle della griglia esterna, la prima in riga 1 e la seconda in riga 3, e la collocazione automatica le accoppia colonna per colonna. Provata prima la strada del contenitore come griglia annidata con `subgrid`: si spaccava in due colonne per motivi che non sono riuscito a spiegarmi, e un allineamento che regge per ragioni ignote prima o poi cede. Il contenitore resta nel markup perche' sul telefono torna una scatola vera e la coppia va a capo insieme. */ .dreammm:not(.h2) .dm-cifra{display:contents} .dreammm:not(.h2) .dm-cifra b{ grid-row:1;align-self:end;justify-self:center;text-align:center; padding:0 clamp(8px,1.4vw,24px);margin:0; font-family:var(--dm-display);font-weight:800; font-size:clamp(42px,5.2vw,86px);line-height:.9;letter-spacing:-.045em; font-variant-numeric:tabular-nums;color:var(--lime)} .dreammm:not(.h2) .dm-cifra span{ grid-row:3;align-self:start;justify-self:center;text-align:center; padding:0 clamp(8px,1.4vw,24px);margin:0;max-width:24ch; font-size:clamp(13px,1vw,15.5px);line-height:1.5; color:rgba(255,255,255,.62)} /* Il componente non sceglie i suoi colori: li eredita dalla sezione. */ .dreammm:not(.h2) .dm-chiara .dm-cifra b, .dreammm:not(.h2) .dm-bianca .dm-cifra b, .dreammm:not(.h2) .dm-superficie .dm-cifra b{color:var(--viola-cupo)} .dreammm:not(.h2) .dm-chiara .dm-cifra span, .dreammm:not(.h2) .dm-bianca .dm-cifra span, .dreammm:not(.h2) .dm-superficie .dm-cifra span{color:#3D4A52} /* --- La traccia --------------------------------------------------------- Il disegno e l'impulso non usano il tratteggio. Ci avevo provato -- `stroke-dasharray` con `pathLength="100"`, che sulla carta e' la strada giusta -- ma qui la figura e' stirata in larghezza (`preserveAspectRatio: none`) e il tratto e' a spessore fisso (`non-scaling-stroke`): la lunghezza normalizzata e quella a schermo finiscono in due scale diverse e il tratteggio salta interi pezzi di curva. Misurato: 442 unita' utente di percorso contro 1210px a schermo, e il tratto centrale spariva del tutto. Qui invece si mascherano due copie della stessa curva con una finestra che scorre in orizzontale. La geometria e' lineare in x: non c'e' niente che possa andare fuori scala. */ .dreammm:not(.h2) .dm-cifre__filo, .dreammm:not(.h2) .dm-cifre__nodi{grid-row:2;grid-column:1 / -1} .dreammm:not(.h2) .dm-cifre__filo{width:100%;height:100%;display:block; overflow:visible;color:rgba(255,255,255,.34)} .dreammm:not(.h2) .dm-chiara .dm-cifre__filo, .dreammm:not(.h2) .dm-bianca .dm-cifre__filo{color:rgba(30,40,60,.26)} .dreammm:not(.h2) .dm-cifre__tratto{fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke} .dreammm:not(.h2) .dm-cifre__tratto--vivo{stroke:var(--lime);stroke-width:2.5; filter:drop-shadow(0 0 7px rgba(200,249,4,.8))} .dreammm:not(.h2) .dm-chiara .dm-cifre__tratto--vivo, .dreammm:not(.h2) .dm-bianca .dm-cifre__tratto--vivo{stroke:var(--viola-cupo); filter:drop-shadow(0 0 7px rgba(87,84,224,.5))} /* Il disegno: una tendina che si apre da sinistra. */ .dreammm:not(.h2) .dm-cifre__filo--scia{clip-path:inset(-60% 100% -60% 0); transition:clip-path 1.9s cubic-bezier(.33,0,.2,1)} .dreammm:not(.h2) .dm-cifre.e-letto .dm-cifre__filo--scia{ clip-path:inset(-60% 0 -60% 0)} /* L'impulso: una finestra che percorre la curva da fuori a sinistra a fuori a destra, quindi il rientro del ciclo non si vede. La finestra e' una maschera sfumata e non un taglio netto: col taglio si vedeva il bagliore troncato di colpo, e il rettangolo della finestra restava disegnato nell'aria. */ .dreammm:not(.h2) .dm-cifre__filo--impulso{opacity:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent); mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:13% 300%;mask-size:13% 300%; -webkit-mask-position:-22% 50%;mask-position:-22% 50%} .dreammm:not(.h2) .dm-cifre.e-letto .dm-cifre__filo--impulso{opacity:1; transition:opacity .6s ease 1.9s; animation:cif-corre 5.4s linear 1.9s infinite} @keyframes cif-corre{ from{-webkit-mask-position:-22% 50%;mask-position:-22% 50%} to{-webkit-mask-position:122% 50%;mask-position:122% 50%}} /* --- I nodi ------------------------------------------------------------- */ .dreammm:not(.h2) .dm-cifre__nodi{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); align-items:center;pointer-events:none} .dreammm:not(.h2) .dm-cifre__nodi i{justify-self:center; width:10px;height:10px;border-radius:50%;background:var(--lime); transform:scale(0); transition:transform .55s cubic-bezier(.34,1.6,.64,1); transition-delay:calc(.45s + (var(--i) - 1) * .3s)} .dreammm:not(.h2) .dm-chiara .dm-cifre__nodi i, .dreammm:not(.h2) .dm-bianca .dm-cifre__nodi i{background:var(--viola-cupo)} .dreammm:not(.h2) .dm-cifre.e-letto .dm-cifre__nodi i{transform:scale(1); animation:cif-pulsa 3.2s ease-out infinite; animation-delay:calc(1.9s + (var(--i) - 1) * .3s)} @keyframes cif-pulsa{ 0%{box-shadow:0 0 0 0 rgba(200,249,4,.45)} 70%{box-shadow:0 0 0 14px rgba(200,249,4,0)} 100%{box-shadow:0 0 0 0 rgba(200,249,4,0)}} .dreammm:not(.h2) .dm-chiara .dm-cifre.e-letto .dm-cifre__nodi i, .dreammm:not(.h2) .dm-bianca .dm-cifre.e-letto .dm-cifre__nodi i{ animation-name:cif-pulsa-chiara} @keyframes cif-pulsa-chiara{ 0%{box-shadow:0 0 0 0 rgba(87,84,224,.4)} 70%{box-shadow:0 0 0 14px rgba(87,84,224,0)} 100%{box-shadow:0 0 0 0 rgba(87,84,224,0)}} /* --- Schermi stretti ---------------------------------------------------- Sotto gli 860px le colonne non ci stanno piu' e la traccia perde senso: si toglie. Cifra ed etichetta vanno a capo insieme perche' stanno nello stesso contenitore. */ @media (max-width:860px){ .dreammm:not(.h2) .dm-cifre{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none;gap:clamp(32px,7vw,46px)} /* Il contenitore torna una scatola vera: qui il padding ereditato dalle regole piu' vecchie conta di nuovo, e va azzerato. */ .dreammm:not(.h2) .dm-cifra{display:block;padding:0} .dreammm:not(.h2) .dm-cifra b, .dreammm:not(.h2) .dm-cifra span{grid-row:auto;padding:0} .dreammm:not(.h2) .dm-cifra b{font-size:clamp(38px,9vw,56px)} .dreammm:not(.h2) .dm-cifra span{margin-top:10px} .dreammm:not(.h2) .dm-cifre__filo, .dreammm:not(.h2) .dm-cifre__nodi{display:none} } @media (max-width:460px){ .dreammm:not(.h2) .dm-cifre{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .dm-cifre__filo--scia{transition:none; clip-path:inset(-60% 0 -60% 0)} .dreammm:not(.h2) .dm-cifre__filo--impulso{display:none} .dreammm:not(.h2) .dm-cifre__nodi i{transform:scale(1);transition:none; animation:none} } /* ========================================================================== LA SCENA: UN SITO CHE, DA SOLO, NON PORTA LAVORO Al posto della fotografia. Il sito sta al centro e resta spento; poi ricerca, marchio e contenuti si collegano uno dopo l'altro e il sito si accende. E' la frase del titolo, fatta vedere invece che ripetuta. Un solo giro di fotogrammi (9s) per tutti i pezzi, e i colori presi da variabili: cosi' la stessa animazione va sia sul fondo chiaro sia su quello scuro, senza una seconda copia di tutto da tenere allineata. ========================================================================== */ .dreammm .sn-scena{ --sn-carta:#fff; --sn-bordo:#E2E7EE; --sn-bordo-on:rgba(87,84,224,.5); --sn-testo:#6B7684; --sn-testo-on:#1B2430; --sn-linea:#E7EBF2; --sn-linea-forte:#D5DAE4; --sn-acc:#5754E0; --sn-ombra:0 8px 22px rgba(20,30,60,.07); --sn-ombra-on:0 14px 34px rgba(87,84,224,.20); margin:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)} .dreammm .dm-scura .sn-scena{ --sn-carta:rgba(255,255,255,.055); --sn-bordo:rgba(255,255,255,.14); --sn-bordo-on:rgba(200,249,4,.55); --sn-testo:rgba(255,255,255,.5); --sn-testo-on:#fff; --sn-linea:rgba(255,255,255,.13); --sn-linea-forte:rgba(255,255,255,.24); --sn-acc:#C8F904; --sn-ombra:0 8px 22px rgba(0,0,0,.28); --sn-ombra-on:0 14px 36px rgba(200,249,4,.16)} .dreammm .sn-campo{position:relative;width:100%;max-width:470px; aspect-ratio:1;margin-inline:auto} /* --- I fili ------------------------------------------------------------ Qui la figura e' quadrata e la scala e' uniforme, quindi il tratteggio si comporta come dice la specifica e `pathLength` si puo' usare. */ .dreammm .sn-fili{position:absolute;inset:0;width:100%;height:100%;display:block} .dreammm .sn-filo{fill:none;stroke:var(--sn-acc);stroke-width:2; stroke-linecap:round;opacity:.6; stroke-dasharray:100;stroke-dashoffset:100; animation:sn-filo1 9s linear infinite} .dreammm .sn-filo--2{animation-name:sn-filo2} .dreammm .sn-filo--3{animation-name:sn-filo3} @keyframes sn-filo1{0%,10%{stroke-dashoffset:100}19%,86%{stroke-dashoffset:0} 93%,100%{stroke-dashoffset:100}} @keyframes sn-filo2{0%,20%{stroke-dashoffset:100}29%,86%{stroke-dashoffset:0} 93%,100%{stroke-dashoffset:100}} @keyframes sn-filo3{0%,30%{stroke-dashoffset:100}39%,86%{stroke-dashoffset:0} 93%,100%{stroke-dashoffset:100}} /* --- I tre nodi -------------------------------------------------------- Stanno esattamente sugli estremi dei fili: (52,120) (348,120) (200,352) in un riquadro di 400, cioe' 13%/30%, 87%/30%, 50%/88% dello stesso quadrato. */ .dreammm .sn-nodo{position:absolute;white-space:nowrap; padding:9px 16px;border-radius:999px; font-size:clamp(12px,.95vw,14px);font-weight:600; background:var(--sn-carta);border:1px solid var(--sn-bordo); color:var(--sn-testo);box-shadow:var(--sn-ombra); animation:sn-nodo1 9s linear infinite} .dreammm .sn-nodo--1{left:13%;top:30%} .dreammm .sn-nodo--2{left:87%;top:30%;animation-name:sn-nodo2} .dreammm .sn-nodo--3{left:50%;top:88%;animation-name:sn-nodo3} @keyframes sn-nodo1{ 0%,9%{transform:translate(-50%,-50%) scale(.94); border-color:var(--sn-bordo);color:var(--sn-testo);box-shadow:var(--sn-ombra)} 19%,86%{transform:translate(-50%,-50%) scale(1); border-color:var(--sn-bordo-on);color:var(--sn-testo-on);box-shadow:var(--sn-ombra-on)} 95%,100%{transform:translate(-50%,-50%) scale(.94); border-color:var(--sn-bordo);color:var(--sn-testo);box-shadow:var(--sn-ombra)}} @keyframes sn-nodo2{ 0%,19%{transform:translate(-50%,-50%) scale(.94); border-color:var(--sn-bordo);color:var(--sn-testo);box-shadow:var(--sn-ombra)} 29%,86%{transform:translate(-50%,-50%) scale(1); border-color:var(--sn-bordo-on);color:var(--sn-testo-on);box-shadow:var(--sn-ombra-on)} 95%,100%{transform:translate(-50%,-50%) scale(.94); border-color:var(--sn-bordo);color:var(--sn-testo);box-shadow:var(--sn-ombra)}} @keyframes sn-nodo3{ 0%,29%{transform:translate(-50%,-50%) scale(.94); border-color:var(--sn-bordo);color:var(--sn-testo);box-shadow:var(--sn-ombra)} 39%,86%{transform:translate(-50%,-50%) scale(1); border-color:var(--sn-bordo-on);color:var(--sn-testo-on);box-shadow:var(--sn-ombra-on)} 95%,100%{transform:translate(-50%,-50%) scale(.94); border-color:var(--sn-bordo);color:var(--sn-testo);box-shadow:var(--sn-ombra)}} /* --- Il sito ----------------------------------------------------------- */ .dreammm .sn-sito{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:47%;height:35%;min-width:150px; border-radius:14px;background:var(--sn-carta); border:1px solid var(--sn-bordo);box-shadow:var(--sn-ombra); padding:0 13px 12px;display:flex;flex-direction:column;gap:7px; animation:sn-sito 9s linear infinite} @keyframes sn-sito{ 0%,40%{border-color:var(--sn-bordo);box-shadow:var(--sn-ombra)} 49%,86%{border-color:var(--sn-bordo-on);box-shadow:var(--sn-ombra-on)} 94%,100%{border-color:var(--sn-bordo);box-shadow:var(--sn-ombra)}} .dreammm .sn-sito__barra{display:flex;gap:5px;align-items:center; height:24px;margin:0 -13px 4px;padding:0 12px; border-bottom:1px solid var(--sn-linea)} .dreammm .sn-sito__barra i{width:6px;height:6px;border-radius:50%; background:var(--sn-linea-forte)} .dreammm .sn-sito__riga{height:7px;border-radius:4px;background:var(--sn-linea)} .dreammm .sn-sito__riga--titolo{height:10px;width:62%;background:var(--sn-linea-forte)} .dreammm .sn-sito__riga--corta{width:46%} .dreammm .sn-sito__tasto{margin-top:auto;width:40%;height:16px;border-radius:8px; background:var(--sn-linea);animation:sn-tasto 9s linear infinite} @keyframes sn-tasto{ 0%,40%{background:var(--sn-linea);width:40%} 49%,86%{background:var(--sn-acc);width:52%} 94%,100%{background:var(--sn-linea);width:40%}} /* L'anello scatta una volta sola, nel momento in cui il sito si accende. */ .dreammm .sn-anello{position:absolute;inset:-7px;border-radius:20px; border:2px solid var(--sn-acc);opacity:0;pointer-events:none; animation:sn-anello 9s ease-out infinite} @keyframes sn-anello{ 0%,42%{opacity:0;transform:scale(.93)} 47%{opacity:.75;transform:scale(1)} 60%,100%{opacity:0;transform:scale(1.09)}} .dreammm .sn-didascalia{max-width:44ch;margin-inline:auto;text-align:center; font-size:clamp(13px,.95vw,15px);line-height:1.55;color:#5A6570} .dreammm .dm-scura .sn-didascalia{color:rgba(255,255,255,.6)} @media (max-width:760px){ .dreammm .sn-campo{max-width:380px} .dreammm .sn-nodo{padding:7px 13px;font-size:12px} } /* Chi ha chiesto meno movimento vede la scena gia' collegata: e' lo stato che conta, il resto era il racconto di come ci si arriva. */ @media (prefers-reduced-motion:reduce){ .dreammm .sn-filo{animation:none;stroke-dashoffset:0} .dreammm .sn-nodo{animation:none;transform:translate(-50%,-50%); border-color:var(--sn-bordo-on);color:var(--sn-testo-on)} .dreammm .sn-sito{animation:none;border-color:var(--sn-bordo-on); box-shadow:var(--sn-ombra-on)} .dreammm .sn-sito__tasto{animation:none;background:var(--sn-acc);width:52%} .dreammm .sn-anello{display:none} } /* ========================================================================== LA SCALA DEL POSIZIONAMENTO Il paragrafo dice: di solito si sceglie fra il freelance e la grande agenzia, noi stiamo in mezzo. Qui la stessa frase e' disegnata. I tre punti hanno misure diverse apposta: sono le dimensioni delle tre cose, non un ornamento. Tutto sta dentro un solo riquadro e le posizioni sono percentuali della sua larghezza, quindi punti ed etichette non possono scollarsi fra loro. ========================================================================== */ .dreammm .sc-scala{ --sc-linea:#DDE3EC; --sc-punto:#B9C2D0; --sc-acc:#5754E0; --sc-testo:#5A6570; --sc-testo-on:#111820; margin:clamp(28px,3.4vw,46px) 0 clamp(6px,1vw,14px)} .dreammm .dm-scura .sc-scala{ --sc-linea:rgba(255,255,255,.16); --sc-punto:rgba(255,255,255,.34); --sc-acc:#C8F904; --sc-testo:rgba(255,255,255,.55); --sc-testo-on:#fff} .dreammm .sc-pista{position:relative;height:124px; max-width:820px;margin-inline:auto} .dreammm .sc-linea{position:absolute;left:6%;right:6%;top:60px;height:2px; border-radius:2px;background:var(--sc-linea); transform:scaleX(0);transform-origin:left; animation:sc-linea 9s linear infinite} @keyframes sc-linea{0%,4%{transform:scaleX(0)} 17%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}} .dreammm .sc-punto{position:absolute;top:61px;border-radius:50%; background:var(--sc-punto);opacity:0; animation:sc-punto 9s linear infinite} .dreammm .sc-punto--sx{left:6%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px} .dreammm .sc-punto--dx{left:94%;width:19px;height:19px;margin:-9.5px 0 0 -9.5px} @keyframes sc-punto{0%,16%{opacity:0;transform:scale(.4)} 24%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}} /* Il punto centrale scende dall'alto e si mette in mezzo: e' il momento in cui la frase "noi stiamo in mezzo" diventa una posizione. */ .dreammm .sc-punto--noi{left:50%;width:14px;height:14px;margin:-7px 0 0 -7px; background:var(--sc-acc);animation-name:sc-noi} @keyframes sc-noi{0%,28%{opacity:0;transform:translateY(-18px) scale(.6)} 38%,86%{opacity:1;transform:translateY(0) scale(1)} 94%,100%{opacity:0;transform:translateY(-18px) scale(.6)}} .dreammm .sc-punto--noi i{position:absolute;inset:-7px;border-radius:50%; border:2px solid var(--sc-acc);opacity:0; animation:sc-anello 9s ease-out infinite} @keyframes sc-anello{0%,37%{opacity:0;transform:scale(.7)} 43%{opacity:.8;transform:scale(1)}56%,100%{opacity:0;transform:scale(1.5)}} .dreammm .sc-eti{position:absolute;transform:translateX(-50%); white-space:nowrap;font-size:clamp(12px,.95vw,14px); color:var(--sc-testo);opacity:0; animation:sc-eti 9s linear infinite} .dreammm .sc-eti--sx{left:6%;top:28px} .dreammm .sc-eti--dx{left:94%;top:28px} @keyframes sc-eti{0%,17%{opacity:0}25%,86%{opacity:1}94%,100%{opacity:0}} .dreammm .sc-eti--noi{left:50%;top:84px;font-weight:700; font-size:clamp(13px,1.05vw,16px);color:var(--sc-testo-on); animation-name:sc-eti-noi} @keyframes sc-eti-noi{0%,32%{opacity:0;transform:translateX(-50%) translateY(6px)} 41%,86%{opacity:1;transform:translateX(-50%) translateY(0)} 94%,100%{opacity:0;transform:translateX(-50%) translateY(6px)}} @media (max-width:640px){ .dreammm .sc-pista{height:112px} .dreammm .sc-eti{font-size:11.5px} .dreammm .sc-eti--sx{left:8%} .dreammm .sc-eti--dx{left:92%} } @media (prefers-reduced-motion:reduce){ .dreammm .sc-linea{animation:none;transform:scaleX(1)} .dreammm .sc-punto{animation:none;opacity:1;transform:none} .dreammm .sc-eti{animation:none;opacity:1;transform:translateX(-50%)} .dreammm .sc-punto--noi i{display:none} } /* ========================================================================== QUATTRO RIQUADRI VANNO A DUE PER RIGA Con la disposizione automatica quattro schede diventano tre piu' una, e quella sola in fondo sembra un errore di impaginazione. Quando sono esattamente quattro si mettono a due a due: niente orfane, e su uno schermo grande le schede tornano larghe. ========================================================================== */ @media (min-width:1000px){ .dreammm:not(.h2) .dm-righe:has(> .dm-riga-q:nth-child(4):last-child){ grid-template-columns:repeat(2,minmax(0,1fr))} } /* ========================================================================== LA CHIUSURA DELLE PAGINE INTERNE Aveva ancora il fondo viola del sito vecchio e il bottone bianco, mentre la chiusura della home e' spazio scuro con il bottone lime. Misurato: linear-gradient(#0E1A1F,#1D1B4D,#6967FB) qui contro #080D14 sulla home. Due chiusure diverse nello stesso sito si notano al primo clic. Il selettore aggiunge il nome dell'elemento perche' la vecchia regola sta in un altro foglio e vince per ordine di caricamento: cosi' la questione e' chiusa una volta sola invece di riaprirsi al prossimo giro. ========================================================================== */ .dreammm:not(.h2) section.dm-finale{ position:relative;overflow:hidden; background:radial-gradient(120% 100% at 70% 40%,#101a2e,#070a12 70%)} /* Un chiarore basso che respira: la sezione era ferma, e una pagina che finisce ferma non invita a fare niente. */ .dreammm:not(.h2) section.dm-finale::after{content:"";position:absolute; left:50%;bottom:-38%;width:min(1100px,120%);aspect-ratio:2 / 1; transform:translateX(-50%);pointer-events:none;z-index:0; background:radial-gradient(50% 50% at 50% 50%,rgba(200,249,4,.16), rgba(87,84,224,.10) 45%,transparent 72%); animation:fn-respira 14s ease-in-out infinite} @keyframes fn-respira{ 0%,100%{opacity:.55;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.08)}} /* Un filo lime sotto il titolo, che si tira quando la frase e' arrivata. */ .dreammm:not(.h2) .dm-finale .dm-grande{position:relative;padding-bottom:22px} .dreammm:not(.h2) .dm-finale .dm-grande::after{content:"";position:absolute; left:50%;bottom:0;width:clamp(70px,9vw,130px);height:2px;border-radius:2px; transform:translateX(-50%) scaleX(0);transform-origin:center; background:linear-gradient(90deg,transparent,var(--lime),transparent); transition:transform 1s cubic-bezier(.22,1,.36,1) .25s} .dreammm:not(.h2) .dm-finale .dm-grande.dentro::after{ transform:translateX(-50%) scaleX(1)} /* Il bottone: lo stesso della home, non il rettangolo bianco. */ .dreammm:not(.h2) .dm-finale .dm-btn{position:relative; background:var(--lime);color:var(--navy); margin-top:clamp(24px,3vw,38px)} .dreammm:not(.h2) .dm-finale .dm-btn span{position:relative;z-index:2; display:inline-flex;align-items:center;gap:10px} .dreammm:not(.h2) .dm-finale .dm-btn span::after{content:"";width:16px;height:9px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9.5 1l3.5 3.5L9.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9.5 1l3.5 3.5L9.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .35s cubic-bezier(.22,1,.36,1)} .dreammm:not(.h2) .dm-finale .dm-btn:hover span::after{transform:translateX(5px)} /* L'alone attorno al bottone respira allo stesso passo del chiarore in basso: due movimenti scoordinati nella stessa schermata si notano. */ .dreammm:not(.h2) .dm-finale .dm-btn::after{content:"";position:absolute; inset:-14px -20px;border-radius:inherit;z-index:-1;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(200,249,4,.30),transparent 70%); animation:fn-alone 14s ease-in-out infinite} @keyframes fn-alone{ 0%,100%{opacity:.35;transform:scale(.96)} 50%{opacity:.75;transform:scale(1.05)}} @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) section.dm-finale::after, .dreammm:not(.h2) .dm-finale .dm-btn::after{animation:none} .dreammm:not(.h2) .dm-finale .dm-grande::after{transition:none; transform:translateX(-50%) scaleX(1)} } /* ========================================================================== IN CHE COSA CREDIAMO — SU DUE COLONNE Era una colonna sola larga 489px dentro un contenitore da 1210: meta' schermo vuoto a destra, e la sezione alta 1409px, il doppio di uno schermo. Titolo e premessa restano a sinistra e non si muovono mentre si scorre l'elenco: e' il modo in cui si legge un elenco di criteri, si tiene d'occhio la domanda a cui rispondono. Nessun cambio nel markup: la colonna la decide la griglia, e i pezzi che non hanno una posizione dichiarata si mettono da soli nella prima libera, cioe' sotto il titolo. ========================================================================== */ @media (min-width:1080px){ .dreammm:not(.h2) #passaggi .dm-wrap{display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); column-gap:clamp(40px,5vw,90px);align-items:start} .dreammm:not(.h2) #passaggi .dm-passi{ grid-column:2;grid-row:1 / span 8;margin-top:0} /* Niente `position:sticky` sul titolo: l'elenco a fianco occupa otto righe della griglia e la prima riga si allarga fino a contenerne la sua quota, cosi' il titolo aveva spazio per scivolare sopra il paragrafo sotto di se'. Visto: le due frasi una addosso all'altra. */ .dreammm:not(.h2) #passaggi .dm-piombo{max-width:34ch} /* Il primo passo non deve partire piu' in alto della prima riga del titolo: senza questo la lista comincia a meta' della "I". */ .dreammm:not(.h2) #passaggi .dm-passo:first-child{padding-top:6px} } /* ========================================================================== LE SCHEDE DEI LAVORI: ORIZZONTALI, OVUNQUE Un sito e' largo, quindi la scheda di un lavoro e' larga: `--cw` la larghezza, `--ch` l'altezza della foto, e un tetto suo (`--ch-max`, che legge `vetrina.js`) perche' a parita' di altezza una scheda orizzontale occupa molto piu' spazio di una verticale e sul 27" diventava un cartellone. Stavano in `home2.css` legate a `.dreammm.h2`, cioe' alla sola home: sulla pagina Lo Studio le stesse schede ricadevano sulla proporzione di serie, quella verticale dei servizi. Misurato: 598x369 sulla home contro 326x408 sullo studio. Adesso la definizione e' una sola e sta qui. ========================================================================== */ .dreammm .h2-lavori{--cw:calc(var(--ch) * 1.62);--ch-max:370px} .dreammm .h2-lavori .vt-carta__foto{aspect-ratio:1.62} .dreammm .lv-ambiente{position:absolute;inset:0; background-size:cover;background-position:center; filter:brightness(.55) saturate(.75)} .dreammm .lv-mockup{position:absolute;left:50%;top:50%; width:84%;height:auto;transform:translate(-50%,-50%); border-radius:4px;box-shadow:0 22px 50px rgba(0,0,0,.55); object-fit:contain} /* Sul chiaro l'ambiente dietro il mockup non va scurito e l'ombra deve essere piu' leggera, altrimenti la scheda sembra un rettangolo pesante appoggiato sul bianco. */ .dreammm .dm-chiara .lv-ambiente, .dreammm .dm-bianca .lv-ambiente{filter:brightness(.92) saturate(.9)} .dreammm .dm-chiara .lv-mockup, .dreammm .dm-bianca .lv-mockup{box-shadow:0 16px 38px rgba(20,30,60,.26)} /* --- Il nome del cliente al passaggio del mouse ------------------------- Diventava #06B6D4, il ciano di serie del tema: un colore che nel marchio non esiste. Il colore lo decide la sezione, come per ogni altro pezzo -- lime sullo scuro, viola sul chiaro, dove il lime non si leggerebbe. */ .dreammm .vt-carta__area:hover h3, .dreammm .vt-carta__area:focus-visible h3{color:var(--lime)} .dreammm .dm-chiara .vt-carta__area:hover h3, .dreammm .dm-bianca .vt-carta__area:hover h3, .dreammm .dm-chiara .vt-carta__area:focus-visible h3, .dreammm .dm-bianca .vt-carta__area:focus-visible h3{color:var(--viola-cupo)} /* ========================================================================== IL RAGGIO — vicini dove serve, da remoto dove basta Due cerchi concentrici attorno a Belluno: quello stretto e' dove ci si muove di persona, quello largo e' tutto il resto. E' la frase del titolo, disegnata. Non e' una mappa e non finge di esserlo. Un profilo geografico storto, su un sito italiano, se ne accorgerebbero tutti al primo sguardo: qui non c'e' niente di geografico da sbagliare, solo una distanza. Il riquadro e' quadrato e la figura non viene stirata, quindi qui il tratteggio si comporta come dice la specifica e `pathLength` si puo' usare. ========================================================================== */ .dreammm .rg-scena{ --rg-linea:rgba(30,40,60,.16); --rg-punto:#B9C2D0; --rg-acc:#5754E0; --rg-testo:#5A6570; --rg-testo-on:#111820; margin:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)} .dreammm .dm-scura .rg-scena{ --rg-linea:rgba(255,255,255,.18); --rg-punto:rgba(255,255,255,.42); --rg-acc:#C8F904; --rg-testo:rgba(255,255,255,.6); --rg-testo-on:#fff} .dreammm .rg-campo{position:relative;width:100%;max-width:460px; aspect-ratio:1;margin-inline:auto} .dreammm .rg-cerchi{position:absolute;inset:0;width:100%;height:100%; display:block;overflow:visible} /* Gli anelli si disegnano partendo dall'alto, uno dopo l'altro. */ .dreammm .rg-anello{fill:none;stroke:var(--rg-linea);stroke-width:1.4; vector-effect:non-scaling-stroke; transform:rotate(-90deg);transform-origin:200px 200px; stroke-dasharray:100;stroke-dashoffset:100; animation:rg-traccia 11s ease-out infinite} .dreammm .rg-anello--dentro{stroke:var(--rg-acc);opacity:.6; stroke-dasharray:3 4;animation-name:rg-dentro} @keyframes rg-traccia{0%,4%{stroke-dashoffset:100} 26%,88%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:100}} @keyframes rg-dentro{0%,10%{opacity:0}22%,88%{opacity:.6}95%,100%{opacity:0}} /* I punti dentro il raggio sono fitti e accesi, quelli fuori radi e spenti: la differenza fra "ci vediamo" e "ci sentiamo". */ .dreammm .rg-vicino{fill:var(--rg-acc);opacity:0; animation:rg-punto 11s ease-out infinite; animation-delay:calc(2.4s + var(--i) * .16s)} .dreammm .rg-lontano{fill:var(--rg-punto);opacity:0; animation:rg-punto 11s ease-out infinite; animation-delay:calc(3.6s + var(--i) * .13s)} @keyframes rg-punto{0%{opacity:0;transform:scale(.4)} 6%,74%{opacity:1;transform:scale(1)}82%,100%{opacity:0;transform:scale(.4)}} .dreammm .rg-casa{fill:var(--rg-acc)} .dreammm .rg-casa-alone{fill:var(--rg-acc);opacity:.18; transform-origin:200px 200px; animation:rg-pulsa 3.4s ease-in-out infinite} @keyframes rg-pulsa{0%,100%{transform:scale(1);opacity:.18} 50%{transform:scale(1.35);opacity:.06}} .dreammm .rg-eti{position:absolute;transform:translate(-50%,-50%); white-space:nowrap;font-size:clamp(11px,.9vw,13px); letter-spacing:.02em;color:var(--rg-testo);opacity:0; animation:rg-eti 11s ease-out infinite} .dreammm .rg-eti--casa{left:50%;top:56.5%;font-weight:700; color:var(--rg-testo-on);animation-delay:2.2s} /* Le etichette stavano esattamente sulla linea del cerchio -- l'anello esterno passa a 8% dall'alto, quello interno a 28,5% -- e la attraversava il testo. Spostate appena sopra: il cerchio resta intero e la parola si legge. */ .dreammm .rg-eti--dentro{left:50%;top:23.5%;animation-delay:2.6s} .dreammm .rg-eti--fuori{left:50%;top:2.5%;animation-delay:3.8s} @keyframes rg-eti{0%{opacity:0}6%,74%{opacity:1}82%,100%{opacity:0}} .dreammm .rg-didascalia{max-width:46ch;margin-inline:auto;text-align:center; font-size:clamp(13px,.95vw,15px);line-height:1.55;color:var(--rg-testo)} @media (max-width:760px){ .dreammm .rg-campo{max-width:360px} } @media (prefers-reduced-motion:reduce){ .dreammm .rg-anello{animation:none;stroke-dashoffset:0;opacity:.6} .dreammm .rg-vicino,.dreammm .rg-lontano,.dreammm .rg-eti{ animation:none;opacity:1;transform:none} .dreammm .rg-eti{transform:translate(-50%,-50%)} .dreammm .rg-casa-alone{animation:none} } /* ========================================================================== LA CATENA — l'ordine, dentro la scheda Su "Come si combinano, in pratica" ogni scheda descrive **una sequenza**: "prima l'identita', poi i materiali e il sito". L'ordine pero' stava dentro un paragrafo, e un ordine scritto in mezzo a un testo non si vede. Gli anelli si accendono uno dopo l'altro quando la scheda arriva, con la freccia che li lega. Compare solo dove la sequenza e' stata scritta nel campo: sulle schede che sono un elenco e non un percorso non c'e' niente da mostrare. ========================================================================== */ .dreammm:not(.h2) .dm-catena{position:relative;z-index:1; display:flex;flex-wrap:wrap;align-items:center;gap:7px 6px; margin-top:clamp(14px,1.6vw,20px)} .dreammm:not(.h2) .dm-catena__anello{display:inline-flex;align-items:center; padding:5px 11px;border-radius:999px;white-space:nowrap; font-family:var(--dm-display);font-weight:700;font-size:12.5px;line-height:1; letter-spacing:.005em; border:1px solid rgba(87,84,224,.28);color:var(--viola-cupo); background:rgba(87,84,224,.07); opacity:0;transform:translateY(6px) scale(.96)} .dreammm:not(.h2) .dm-scura .dm-catena__anello{ border-color:rgba(200,249,4,.3);color:var(--lime); background:rgba(200,249,4,.08)} /* L'ordine sta dentro l'anello, non fra un anello e l'altro. Prima c'era un trattino di collegamento: quando la catena andava a capo il trattino restava appeso a inizio riga e sembrava un errore di impaginazione. Il numero invece si legge comunque vada a capo, e il conteggio lo tiene il CSS: non c'e' niente da tenere allineato col PHP. */ .dreammm:not(.h2) .dm-catena{counter-reset:dmcat} .dreammm:not(.h2) .dm-catena__anello{counter-increment:dmcat;padding-left:5px} .dreammm:not(.h2) .dm-catena__anello::before{content:counter(dmcat); display:inline-grid;place-items:center; width:17px;height:17px;margin-right:7px;border-radius:50%; font-size:10px;font-weight:800;line-height:1; /* Colori espliciti, non `currentColor`: qui lo sfondo e la cifra stanno sullo stesso elemento, e cambiare `color` cambiava anche lo sfondo -- risultato, cifra scura su fondo scuro, cioe' un pallino vuoto. */ background:var(--viola-cupo);color:#fff} .dreammm:not(.h2) .dm-scura .dm-catena__anello::before{ background:var(--lime);color:#0d1622} .dreammm:not(.h2) .dm-riga-q.e-entrato .dm-catena__anello{ opacity:1;transform:none; transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.5,.64,1); transition-delay:calc(.35s + var(--i,0) * .17s)} /* Senza JavaScript la catena si vede lo stesso, ferma. */ .dreammm:not(.h2) .dm-catena__anello{opacity:1;transform:none} .js-attivo .dreammm:not(.h2) .dm-catena__anello{opacity:0;transform:translateY(6px) scale(.96)} .js-attivo .dreammm:not(.h2) .dm-riga-q.e-entrato .dm-catena__anello{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js-attivo .dreammm:not(.h2) .dm-catena__anello{opacity:1;transform:none; transition:none} } /* ========================================================================== L'ANALISI DEL SITO — la versione per il fondo chiaro Tutto il componente era scritto per il fondo scuro: campo con sfondo bianco al 5%, bordo bianco al 16%, testo bianco. Su una sezione chiara il riquadro spariva del tutto e restava **solo il bottone lime a mezz'aria**, che e' esattamente quello che si vedeva sulle pagine servizio. Da qui in poi il componente eredita i colori dalla sezione, come tutti gli altri. ========================================================================== */ .dreammm .dm-chiara #analisi, .dreammm .dm-bianca #analisi{--au-nulla:0} .dreammm .dm-chiara .dm-audit__campo, .dreammm .dm-bianca .dm-audit__campo, .dreammm .dm-superficie .dm-audit__campo{ background:#fff;border:1px solid #D5DCE6;border-radius:12px; box-shadow:0 2px 10px rgba(20,30,60,.05)} .dreammm .dm-chiara .dm-audit__campo:focus-within, .dreammm .dm-bianca .dm-audit__campo:focus-within, .dreammm .dm-superficie .dm-audit__campo:focus-within{ border-color:var(--viola-cupo);background:#fff; box-shadow:0 0 0 3px rgba(87,84,224,.14)} .dreammm .dm-chiara .dm-audit__pre, .dreammm .dm-bianca .dm-audit__pre, .dreammm .dm-superficie .dm-audit__pre{color:#8B95A3} .dreammm .dm-chiara .dm-audit__campo input, .dreammm .dm-bianca .dm-audit__campo input, .dreammm .dm-superficie .dm-audit__campo input{color:var(--navy)} .dreammm .dm-chiara .dm-audit__campo input::placeholder, .dreammm .dm-bianca .dm-audit__campo input::placeholder, .dreammm .dm-superficie .dm-audit__campo input::placeholder{color:#9AA4B2} .dreammm .dm-chiara .dm-audit__scia, .dreammm .dm-bianca .dm-audit__scia{background:rgba(20,30,60,.1)} .dreammm .dm-chiara .dm-audit__lavoro p, .dreammm .dm-bianca .dm-audit__lavoro p{color:#5A6570} .dreammm .dm-chiara .dm-audit__voto, .dreammm .dm-bianca .dm-audit__voto{border-bottom-color:#E2E7EE} .dreammm .dm-chiara .dm-audit__pista, .dreammm .dm-bianca .dm-audit__pista{stroke:rgba(20,30,60,.12)} .dreammm .dm-chiara .dm-audit__arco, .dreammm .dm-bianca .dm-audit__arco{stroke:var(--viola-cupo)} .dreammm .dm-chiara .dm-audit__quadrante b, .dreammm .dm-bianca .dm-audit__quadrante b, .dreammm .dm-chiara .dm-audit__voto h3, .dreammm .dm-bianca .dm-audit__voto h3, .dreammm .dm-chiara .dm-audit__riga b, .dreammm .dm-bianca .dm-audit__riga b, .dreammm .dm-chiara .dm-audit__seguito h4, .dreammm .dm-bianca .dm-audit__seguito h4{color:var(--navy)} .dreammm .dm-chiara .dm-audit__voto p, .dreammm .dm-bianca .dm-audit__voto p, .dreammm .dm-chiara .dm-audit__riga span, .dreammm .dm-bianca .dm-audit__riga span, .dreammm .dm-chiara .dm-audit__seguito p, .dreammm .dm-bianca .dm-audit__seguito p{color:#5A6570} .dreammm .dm-chiara .dm-audit__dove.dm-audit__dove, .dreammm .dm-bianca .dm-audit__dove.dm-audit__dove{color:#8B95A3} .dreammm .dm-chiara .dm-audit__riga, .dreammm .dm-bianca .dm-audit__riga{border-top-color:#E7EBF2} .dreammm .dm-chiara .dm-audit__area > h4, .dreammm .dm-bianca .dm-audit__area > h4{color:var(--viola-cupo)} .dreammm .dm-chiara .dm-audit__seguito, .dreammm .dm-bianca .dm-audit__seguito{ background:rgba(87,84,224,.06);border-color:rgba(87,84,224,.22); border-radius:16px} .dreammm .dm-chiara .dm-audit__mail input, .dreammm .dm-bianca .dm-audit__mail input{ background:#fff;border:1px solid #D5DCE6;border-radius:10px;color:var(--navy)} .dreammm .dm-chiara .dm-audit__mail input::placeholder, .dreammm .dm-bianca .dm-audit__mail input::placeholder{color:#9AA4B2} .dreammm .dm-chiara .dm-audit__mail input:focus, .dreammm .dm-bianca .dm-audit__mail input:focus{border-color:var(--viola-cupo)} .dreammm .dm-chiara .dm-audit__esitomail.dm-audit__esitomail, .dreammm .dm-bianca .dm-audit__esitomail.dm-audit__esitomail{color:#3F7D00} .dreammm .dm-chiara .dm-audit__ancora, .dreammm .dm-bianca .dm-audit__ancora{color:#5A6570} .dreammm .dm-chiara .dm-audit__ancora:hover, .dreammm .dm-bianca .dm-audit__ancora:hover{color:var(--viola-cupo)} /* Il campo prende piu' aria e il bottone smette di galleggiare da solo. */ .dreammm:not(.h2) .dm-audit__via{gap:12px;align-items:stretch} .dreammm:not(.h2) .dm-audit__campo{border-radius:12px} .dreammm:not(.h2) .dm-audit__via .dm-btn{align-items:center} /* --- La sezione su due colonne ------------------------------------------ Era una colonna sola, tutta a sinistra, con meta' schermo vuoto a destra e il bottone lime sospeso in mezzo al niente. */ @media (min-width:1060px){ .dreammm:not(.h2) #analisi .dm-wrap{display:grid; /* La colonna del testo tiene di piu': il titolo ha un a capo scritto dentro, e in una colonna stretta finiva su quattro righe. */ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); column-gap:clamp(36px,4vw,64px);align-items:center} .dreammm:not(.h2) #analisi .sk-scena{grid-column:2;grid-row:1 / span 4; justify-self:center} .dreammm:not(.h2) #analisi .dm-audit{max-width:none} } /* ========================================================================== LA SCANSIONE — che cosa succede quando premi il bottone Un fascio che scorre sulla pagina e i controlli che si accendono uno dopo l'altro. Riempie la meta' destra e dice la stessa cosa del titolo: trenta secondi, quattordici controlli. ========================================================================== */ .dreammm .sk-scena{position:relative;width:100%;max-width:330px; margin-inline:auto} .dreammm .sk-finestra{position:relative;overflow:hidden; border-radius:14px;padding:0 16px 18px; display:flex;flex-direction:column;gap:9px; background:#fff;border:1px solid #E2E7EE; box-shadow:0 16px 40px rgba(20,30,60,.10)} .dreammm .dm-scura .sk-finestra{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13);box-shadow:0 16px 40px rgba(0,0,0,.34)} .dreammm .sk-barra{display:flex;gap:5px;align-items:center;height:28px; margin:0 -16px 6px;padding:0 14px;border-bottom:1px solid #EEF1F6} .dreammm .dm-scura .sk-barra{border-bottom-color:rgba(255,255,255,.12)} .dreammm .sk-barra i{width:6px;height:6px;border-radius:50%;background:#D9DEE7} .dreammm .dm-scura .sk-barra i{background:rgba(255,255,255,.24)} .dreammm .sk-riga{height:8px;border-radius:4px;background:#E7EBF2} .dreammm .dm-scura .sk-riga{background:rgba(255,255,255,.13)} .dreammm .sk-riga--titolo{height:12px;width:58%;background:#D5DAE4} .dreammm .dm-scura .sk-riga--titolo{background:rgba(255,255,255,.24)} .dreammm .sk-riga--corta{width:44%} /* Il fascio: scende, torna su, e ricomincia. */ .dreammm .sk-fascio{position:absolute;left:0;right:0;top:0;height:34%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(87,84,224,.16) 55%, rgba(87,84,224,.42) 92%,transparent); animation:sk-scorre 4.6s cubic-bezier(.5,0,.5,1) infinite} .dreammm .dm-scura .sk-fascio{ background:linear-gradient(180deg,transparent,rgba(200,249,4,.14) 55%, rgba(200,249,4,.4) 92%,transparent)} @keyframes sk-scorre{ 0%{transform:translateY(-110%)} 55%,100%{transform:translateY(300%)}} /* I controlli si accendono man mano che il fascio passa. */ .dreammm .sk-esito{position:absolute;right:-14px; display:inline-flex;align-items:center;gap:7px; padding:7px 13px 7px 10px;border-radius:999px;white-space:nowrap; font-family:var(--dm-display);font-weight:700;font-size:12px; background:#fff;border:1px solid #E2E7EE;color:var(--navy); box-shadow:0 8px 22px rgba(20,30,60,.10); opacity:0;transform:translateX(10px); animation:sk-esito 4.6s ease-out infinite; animation-delay:calc(1s + var(--i) * .55s)} .dreammm .dm-scura .sk-esito{background:#111c2b;border-color:rgba(255,255,255,.14); color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.4)} .dreammm .sk-esito--1{top:24%} .dreammm .sk-esito--2{top:47%} .dreammm .sk-esito--3{top:70%} .dreammm .sk-esito::before{content:"";width:15px;height:15px;border-radius:50%; background:rgba(63,125,0,.14); box-shadow:inset 0 0 0 1px rgba(63,125,0,.34)} .dreammm .sk-esito--no::before{background:rgba(214,69,69,.14); box-shadow:inset 0 0 0 1px rgba(214,69,69,.4)} @keyframes sk-esito{ 0%,18%{opacity:0;transform:translateX(10px)} 26%,88%{opacity:1;transform:translateX(0)} 96%,100%{opacity:0;transform:translateX(10px)}} @media (max-width:1059px){ .dreammm .sk-scena{margin-top:clamp(28px,4vw,44px);max-width:320px} } @media (prefers-reduced-motion:reduce){ .dreammm .sk-fascio{animation:none;opacity:.5;transform:translateY(120%)} .dreammm .sk-esito{animation:none;opacity:1;transform:none} } /* ========================================================================== LE TESTATE CENTRATE DELLE PAGINE SERVIZIO Titolo e testo stavano a sinistra sopra contenuti a tutta larghezza -- sei riquadri, una linea di passi -- e tiravano la pagina da una parte sola. Il limite di misura resta al testo: il titolo ha gli a capo scritti dentro e stringerlo lo manderebbe su troppe righe. ========================================================================== */ .dreammm:not(.h2) #cosa-ottieni > .dm-wrap > .dm-grande, .dreammm:not(.h2) #cosa-ottieni > .dm-wrap > .dm-piombo, .dreammm:not(.h2) #come-lavoriamo > .dm-wrap > .dm-grande, .dreammm:not(.h2) #come-lavoriamo > .dm-wrap > .dm-piombo{text-align:center} .dreammm:not(.h2) #cosa-ottieni > .dm-wrap > .dm-piombo, .dreammm:not(.h2) #come-lavoriamo > .dm-wrap > .dm-piombo{ max-width:62ch;margin-inline:auto} /* ========================================================================== LA NOTA DEI TEMPI Era una fascia a tutta larghezza con un filo lime a sinistra. Su fondo bianco il lime non regge da solo -- non ha abbastanza contrasto per fare da segno grafico e sembra sbiadito -- e la fascia larga, sotto una testata centrata, restava sbilanciata. ========================================================================== */ .dreammm:not(.h2) .dm-tempi{ margin-inline:auto;margin-top:clamp(28px,3.4vw,44px); max-width:68ch;border-radius:16px; padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px); border-left:3px solid var(--lime)} .dreammm:not(.h2) .dm-chiara .dm-tempi, .dreammm:not(.h2) .dm-bianca .dm-tempi, .dreammm:not(.h2) .dm-superficie .dm-tempi{ border-left-color:var(--viola-cupo); background:rgba(87,84,224,.06);color:#3D4A52} /* --- La pillola "tocca a te" sul chiaro --------------------------------- Era lime pallido con testo oliva: sul bianco si legge poco e stona con le altre due, che sono viola. Sul chiaro la differenza la fa il riempimento, non un secondo colore. */ .dreammm:not(.h2) .dm-chiara .dm-passo__chi--tu, .dreammm:not(.h2) .dm-bianca .dm-passo__chi--tu, .dreammm:not(.h2) .dm-superficie .dm-passo__chi--tu{ background:var(--viola-cupo);color:#fff;border-color:var(--viola-cupo)} /* Passi un filo piu' compatti: la sezione era alta 1592px per sei righe. */ .dreammm:not(.h2) #come-lavoriamo .dm-passo{ padding:clamp(14px,1.5vw,20px) 0} .dreammm:not(.h2) #come-lavoriamo .dm-passo__testo p{margin-top:6px} /* ========================================================================== GLI STRATI — quello che sta sotto una pagina finita Sostituisce una fotografia segnaposto. La didascalia diceva gia' la cosa giusta ("sotto una pagina finita ci sono gli strati che l'hanno costruita"), ma la fotografia non la faceva vedere. La vista isometrica sta tutta sul contenitore: ogni lastra si muove solo lungo un asse. Le etichette non sono agganciate alle lastre -- stanno in un elenco a parte, nello stesso ordine -- proprio per non avere due geometrie da tenere d'accordo. ========================================================================== */ .dreammm .st-scena{ --st-bordo:rgba(20,30,60,.14); --st-faccia:rgba(255,255,255,.9); --st-testo:#5A6570; --st-testo-on:#111820; --st-acc:#5754E0; margin:0;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)} .dreammm .dm-scura .st-scena{ --st-bordo:rgba(255,255,255,.2); --st-faccia:rgba(255,255,255,.07); --st-testo:rgba(255,255,255,.6); --st-testo-on:#fff; --st-acc:#C8F904} .dreammm .st-pila{position:relative;width:100%;max-width:380px; aspect-ratio:1 / .92;margin-inline:auto;perspective:1000px} .dreammm .st-dentro{position:absolute;inset:0;transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(-42deg) scale(.78)} .dreammm .st-lastra{position:absolute;left:8%;right:8%;top:14%;bottom:14%; border-radius:10px;border:1px solid var(--st-bordo); background:var(--st-faccia); animation:st-apre 10s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc(var(--i) * .1s)} /* Ogni lastra ha un disegno suo: si capisce che sono cose diverse, non quattro copie della stessa. */ .dreammm .st-lastra--1{background-image:radial-gradient(circle at 30% 34%, color-mix(in srgb,var(--st-acc) 45%,transparent) 0 6px,transparent 7px)} .dreammm .st-lastra--2{background-image: linear-gradient(var(--st-bordo) 1px,transparent 1px), linear-gradient(90deg,var(--st-bordo) 1px,transparent 1px); background-size:26px 26px} .dreammm .st-lastra--3{background-image: linear-gradient(var(--st-bordo) 3px,transparent 3px); background-size:100% 22px;background-position:0 18px} .dreammm .st-lastra--4{background-image: linear-gradient(140deg,color-mix(in srgb,var(--st-acc) 28%,transparent), transparent 62%); border-color:color-mix(in srgb,var(--st-acc) 50%,transparent)} /* La pila si apre e si richiude. La quarta lastra -- la grafica, l'unica che si vede -- e' quella che si stacca di piu'. */ @keyframes st-apre{ 0%,10%{transform:translateZ(calc(var(--i) * 2px))} 32%,72%{transform:translateZ(calc(var(--i) * 34px))} 92%,100%{transform:translateZ(calc(var(--i) * 2px))}} .dreammm .st-legenda{list-style:none;margin:0;padding:0; display:grid;gap:9px;max-width:340px;margin-inline:auto} .dreammm .st-legenda li{display:grid; grid-template-columns:11px auto 1fr;align-items:baseline;gap:9px; font-size:clamp(12.5px,.95vw,14px);color:var(--st-testo); opacity:0;transform:translateY(6px); animation:st-voce 10s ease-out infinite; animation-delay:calc(.5s + var(--i) * .34s)} .dreammm .st-legenda i{width:9px;height:9px;border-radius:3px; background:var(--st-acc);align-self:center} .dreammm .st-legenda li:nth-child(-n+3) i{opacity:.42} .dreammm .st-legenda b{font-family:var(--dm-display);font-weight:800; color:var(--st-testo-on);white-space:nowrap} @keyframes st-voce{ 0%,6%{opacity:0;transform:translateY(6px)} 18%,76%{opacity:1;transform:translateY(0)} 90%,100%{opacity:0;transform:translateY(6px)}} @media (max-width:760px){ .dreammm .st-pila{max-width:320px} } @media (prefers-reduced-motion:reduce){ .dreammm .st-lastra{animation:none;transform:translateZ(calc(var(--i) * 34px))} .dreammm .st-legenda li{animation:none;opacity:1;transform:none} } /* ========================================================================== I BENEFICI — una figura per ognuno, non sei riquadri uguali Gian Luca li ha chiamati "orribili": erano sei rettangoli con dentro del testo e una lineetta lime sopra. Adesso ognuno porta una figurina che fa vedere la cosa che dice -- le richieste che si impilano, il risultato che sale nella lista, la trattativa che si accorcia -- costruita con tre o quattro rettangoli e un fotogramma. Sono tutte animazioni di `transform` e `opacity` su elementi piccoli: non ridisegnano niente, e la figura sta in un riquadro di misura fissa, quindi non c'e' superficie che cresce con lo schermo. ========================================================================== */ .dreammm:not(.h2) .bn-fig{ --bn-acc:#5754E0; --bn-tenue:rgba(87,84,224,.34); --bn-linea:#DDE3EC; position:relative;display:block; width:76px;height:56px;margin-bottom:16px;flex:0 0 auto} .dreammm:not(.h2) .dm-scura .bn-fig, .dreammm:not(.h2) .dm-vetrina .bn-fig{ --bn-acc:#C8F904; --bn-tenue:rgba(200,249,4,.3); --bn-linea:rgba(255,255,255,.18)} .dreammm:not(.h2) .bn-fig i{position:absolute;display:block;border-radius:3px; background:var(--bn-tenue)} /* 1. Arrivano richieste: si impilano, una dopo l'altra. */ .dreammm:not(.h2) .bn-fig--richieste i{left:0;right:18px;height:10px; animation:bn-sale 4.4s ease-out infinite} .dreammm:not(.h2) .bn-fig--richieste i:nth-child(1){bottom:0;animation-delay:0s} .dreammm:not(.h2) .bn-fig--richieste i:nth-child(2){bottom:15px;animation-delay:.45s} .dreammm:not(.h2) .bn-fig--richieste i:nth-child(3){bottom:30px;width:58%;right:auto; background:var(--bn-acc);animation-delay:.9s} @keyframes bn-sale{ 0%,4%{opacity:0;transform:translateY(8px)} 16%,80%{opacity:1;transform:translateY(0)} 92%,100%{opacity:0;transform:translateY(8px)}} /* 2. Ti trovano: un risultato risale la lista. */ .dreammm:not(.h2) .bn-fig--ricerca i{left:0;right:0;height:9px} .dreammm:not(.h2) .bn-fig--ricerca i:nth-child(1){top:0} .dreammm:not(.h2) .bn-fig--ricerca i:nth-child(2){top:16px} .dreammm:not(.h2) .bn-fig--ricerca i:nth-child(3){top:32px;width:64%;right:auto; background:var(--bn-acc);animation:bn-risale 4.4s cubic-bezier(.5,0,.3,1) infinite} @keyframes bn-risale{ 0%,14%{transform:translateY(0)} 46%,84%{transform:translateY(-32px)} 96%,100%{transform:translateY(0)}} /* 3. Chiudi piu' in fretta: la barra si accorcia. */ .dreammm:not(.h2) .bn-fig--fretta i{left:0;height:10px} .dreammm:not(.h2) .bn-fig--fretta i:nth-child(1){top:10px;width:100%} .dreammm:not(.h2) .bn-fig--fretta i:nth-child(2){top:34px;width:100%; background:var(--bn-acc);transform-origin:left; animation:bn-accorcia 4.4s cubic-bezier(.4,0,.2,1) infinite} @keyframes bn-accorcia{ 0%,14%{transform:scaleX(1)} 46%,84%{transform:scaleX(.44)} 96%,100%{transform:scaleX(1)}} /* 4. Smetti di sembrare piccolo: due colonne si pareggiano. */ .dreammm:not(.h2) .bn-fig--piano i{bottom:0;width:20px;transform-origin:bottom} .dreammm:not(.h2) .bn-fig--piano i:nth-child(1){left:8px;height:52px} .dreammm:not(.h2) .bn-fig--piano i:nth-child(2){left:40px;height:52px; background:var(--bn-acc);animation:bn-pareggia 4.4s cubic-bezier(.4,0,.2,1) infinite} @keyframes bn-pareggia{ 0%,14%{transform:scaleY(.4)} 50%,84%{transform:scaleY(1)} 96%,100%{transform:scaleY(.4)}} /* 5. Funziona da telefono: il contenuto si riordina nella cornice stretta. */ .dreammm:not(.h2) .bn-fig--telefono{width:76px} .dreammm:not(.h2) .bn-fig--telefono i:nth-child(1){left:24px;top:0;width:30px;height:56px; border-radius:6px;background:none;box-shadow:inset 0 0 0 2px var(--bn-linea)} .dreammm:not(.h2) .bn-fig--telefono i:nth-child(2){left:30px;top:11px;width:18px;height:6px; background:var(--bn-acc);animation:bn-riordina 4.4s ease-out infinite} .dreammm:not(.h2) .bn-fig--telefono i:nth-child(3){left:30px;top:24px;width:18px;height:6px; animation:bn-riordina 4.4s ease-out infinite;animation-delay:.25s} @keyframes bn-riordina{ 0%,10%{opacity:0;transform:translateX(9px)} 24%,82%{opacity:1;transform:translateX(0)} 94%,100%{opacity:0;transform:translateX(9px)}} /* 6. Sai cosa sta succedendo: la linea dei dati si traccia. */ .dreammm:not(.h2) .bn-fig--dati i{bottom:0;width:12px;transform-origin:bottom; animation:bn-cresce 4.4s cubic-bezier(.3,0,.2,1) infinite} .dreammm:not(.h2) .bn-fig--dati i:nth-child(1){left:0;height:20px;animation-delay:0s} .dreammm:not(.h2) .bn-fig--dati i:nth-child(2){left:17px;height:33px;animation-delay:.16s} .dreammm:not(.h2) .bn-fig--dati i:nth-child(3){left:34px;height:45px;animation-delay:.32s} .dreammm:not(.h2) .bn-fig--dati i:nth-child(4){left:51px;height:56px; background:var(--bn-acc);animation-delay:.48s} @keyframes bn-cresce{ 0%,8%{transform:scaleY(.12)} 30%,82%{transform:scaleY(1)} 94%,100%{transform:scaleY(.12)}} @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .bn-fig i{animation:none!important;opacity:1!important; transform:none!important} } /* ========================================================================== IL PERCORSO — le tre risposte, viste come tre passaggi Il testo dice che prima di scrivere una riga di codice servono tre risposte. Qui sono tre porte da attraversare: la linea scende, ogni porta si accende quando la linea la raggiunge, e in fondo si arriva a una richiesta. Titolo e testo di ogni porta vengono dai tre punti della sezione, e le schede sotto non si stampano piu': prima erano due volte la stessa cosa nella stessa schermata. Il punto in movimento **e' la punta della linea**, non un elemento a parte: cosi' non esistono due posizioni da tenere d'accordo. E ogni porta e' **centrata sul proprio punto** (`translateY(-50%)`), quindi puo' crescere quanto vuole in altezza senza spostare niente. ========================================================================== */ .dreammm .pc-scena{ --pc-linea:#DDE3EC; --pc-carta:#fff; --pc-bordo:#E2E7EE; --pc-testo:#5A6570; --pc-testo-on:#111820; --pc-acc:#5754E0; margin:0;display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .pc-scena{ --pc-linea:rgba(255,255,255,.16); --pc-carta:rgba(255,255,255,.06); --pc-bordo:rgba(255,255,255,.14); --pc-testo:rgba(255,255,255,.72); --pc-testo-on:#fff; --pc-acc:#C8F904} .dreammm .pc-campo{position:relative;width:100%; height:clamp(430px,44vw,520px)} .dreammm .pc-binario{position:absolute;left:26px;top:3%;height:94%;width:2px; border-radius:2px;background:var(--pc-linea)} .dreammm .pc-viaggio{position:absolute;left:26px;top:3%;width:2px; border-radius:2px;background:var(--pc-acc);height:0; animation:pc-scende 10s cubic-bezier(.45,0,.55,1) infinite} @keyframes pc-scende{ 0%,6%{height:0} 22%,26%{height:16%} 38%,42%{height:46%} 54%,58%{height:76%} 70%,86%{height:94%} 95%,100%{height:0}} .dreammm .pc-viaggio::after{content:"";position:absolute;left:-5px;bottom:-6px; width:12px;height:12px;border-radius:50%;background:var(--pc-acc); box-shadow:0 0 0 5px color-mix(in srgb,var(--pc-acc) 22%,transparent)} .dreammm .pc-partenza, .dreammm .pc-arrivo{position:absolute;left:52px; font-size:clamp(12px,.95vw,13.5px);color:var(--pc-testo);white-space:nowrap} .dreammm .pc-partenza{top:calc(3% - 9px);opacity:.8} .dreammm .pc-arrivo{top:calc(97% - 9px);font-family:var(--dm-display); font-weight:800;color:var(--pc-acc);opacity:0; animation:pc-arrivo 10s ease-out infinite} @keyframes pc-arrivo{ 0%,66%{opacity:0;transform:translateY(6px)} 74%,88%{opacity:1;transform:translateY(0)} 95%,100%{opacity:0;transform:translateY(6px)}} /* Le porte, centrate sul punto in cui la linea si ferma. */ .dreammm .pc-porta{position:absolute;left:52px;right:0; padding:14px 18px 15px 40px;border-radius:14px; background:var(--pc-carta);border:1px solid var(--pc-bordo); box-shadow:0 8px 22px rgba(20,30,60,.06); transform:translate(0,-50%); animation:pc-porta 10s ease-out infinite; animation-delay:calc(var(--i) * 1.6s)} .dreammm .dm-scura .pc-porta{box-shadow:0 8px 22px rgba(0,0,0,.3)} .dreammm .pc-porta--1{top:16%} .dreammm .pc-porta--2{top:46%} .dreammm .pc-porta--3{top:76%} @keyframes pc-porta{ 0%,18%{border-color:var(--pc-bordo);transform:translate(0,-50%)} 26%,74%{border-color:color-mix(in srgb,var(--pc-acc) 60%,transparent); transform:translate(5px,-50%)} 88%,100%{border-color:var(--pc-bordo);transform:translate(0,-50%)}} .dreammm .pc-porta__segno{position:absolute;left:16px;top:20px; width:10px;height:10px;border-radius:50%;background:var(--pc-linea); animation:pc-pallino 10s ease-out infinite; animation-delay:calc(var(--i) * 1.6s)} @keyframes pc-pallino{ 0%,18%{background:var(--pc-linea)} 26%,74%{background:var(--pc-acc)} 88%,100%{background:var(--pc-linea)}} .dreammm .pc-porta h3{margin:0;font-family:var(--dm-display);font-weight:800; font-size:clamp(15px,1.25vw,19px);line-height:1.2;letter-spacing:-.02em; color:var(--pc-testo-on)} .dreammm .pc-porta p{margin:7px 0 0; font-size:clamp(13.5px,1vw,15.5px);line-height:1.5;color:var(--pc-testo)} .dreammm .pc-didascalia{max-width:52ch;text-align:center;margin-inline:auto; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--pc-testo); opacity:.85} @media (max-width:900px){ .dreammm .pc-campo{height:auto;display:flex;flex-direction:column;gap:14px; padding-left:0} .dreammm .pc-binario,.dreammm .pc-viaggio, .dreammm .pc-partenza,.dreammm .pc-arrivo{display:none} .dreammm .pc-porta{position:static;transform:none;padding-left:40px; animation:none;border-color:color-mix(in srgb,var(--pc-acc) 45%,transparent)} .dreammm .pc-porta__segno{animation:none;background:var(--pc-acc)} } @media (prefers-reduced-motion:reduce){ .dreammm .pc-viaggio{animation:none;height:94%} .dreammm .pc-porta,.dreammm .pc-porta__segno,.dreammm .pc-arrivo{animation:none} .dreammm .pc-arrivo{opacity:1;transform:none} .dreammm .pc-porta{border-color:color-mix(in srgb,var(--pc-acc) 60%,transparent)} .dreammm .pc-porta__segno{background:var(--pc-acc)} } /* ========================================================================== CORREZIONI SULLE PAGINE SERVIZIO — secondo giro ========================================================================== */ /* --- Il contenitore dei benefici ----------------------------------------- Aveva un fondo bianco all'11% **e** un bordo bianco all'11%, dietro sei schede che sono a loro volta traslucide: due veli sovrapposti, con lo sfondo della sezione che passa attraverso tutti e due. Il riquadro grande non serve: le schede si reggono da sole. */ .dreammm:not(.h2) .dm-benefici{background:none;border:0;border-radius:0; padding:0} /* --- Le schede: qualcosa deve succedere al passaggio del mouse ----------- Prima non si muoveva niente. Ora la scheda si alza, si inclina appena verso il puntatore e il bordo si accende. L'inclinazione e' minima di proposito: di piu' sembra un giocattolo. */ .dreammm:not(.h2) .dm-benef{transform-origin:center bottom; transition:border-color .35s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease} .dreammm:not(.h2) .dm-benef:hover{ transform:translateY(-5px) rotate(-.5deg); border-color:rgba(87,84,224,.45); box-shadow:0 18px 42px rgba(20,30,60,.12)} .dreammm:not(.h2) .dm-scura .dm-benef:hover, .dreammm:not(.h2) .dm-vetrina .dm-benef:hover{ border-color:rgba(200,249,4,.4); box-shadow:0 18px 42px rgba(0,0,0,.4)} /* La figurina si alza un filo di piu' della scheda: da' profondita'. */ .dreammm:not(.h2) .dm-benef .bn-fig{ transition:transform .45s cubic-bezier(.22,1,.36,1)} .dreammm:not(.h2) .dm-benef:hover .bn-fig{transform:translateY(-3px)} /* --- La nota accanto agli strati ----------------------------------------- Misurata: 273px di larghezza dentro una colonna da 605. Il limite di 38ch nasce per il testo a tutta pagina, ma qui la colonna e' gia' stretta e il risultato era una nota tagliata a meta' che sembrava un errore. */ .dreammm:not(.h2) .dm-argomento--vetrina .dm-nota{max-width:none} /* --- Le domande, centrate nella colonna --------------------------------- L'elenco era largo 887 dentro 1210 e partiva dal bordo sinistro: ne' pieno ne' centrato. */ .dreammm:not(.h2) #domande > .dm-wrap > .dm-grande{text-align:center} .dreammm:not(.h2) #domande .dm-faq{margin-inline:auto} @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .dm-benef, .dreammm:not(.h2) .dm-benef .bn-fig{transition:none} .dreammm:not(.h2) .dm-benef:hover{transform:none} } /* ========================================================================== IL NEGOZIO COLLEGATO — perche' un e-commerce costa piu' di un sito Il testo lo dice: "un e-commerce e' un pezzo di azienda, non una brochure. Tocca il magazzino, i pagamenti, le spedizioni, la fatturazione e l'assistenza". La spesa sta nei collegamenti, non nella grafica: qui i collegamenti si vedono attaccarsi uno dopo l'altro. ========================================================================== */ .dreammm .ng-scena{ --ng-carta:#fff; --ng-bordo:#E2E7EE; --ng-linea:#DDE3EC; --ng-testo:#5A6570; --ng-testo-on:#111820; --ng-acc:#5754E0; margin:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)} .dreammm .dm-scura .ng-scena{ --ng-carta:#111c2b; --ng-bordo:rgba(255,255,255,.14); --ng-linea:rgba(255,255,255,.16); --ng-testo:rgba(255,255,255,.6); --ng-testo-on:#fff; --ng-acc:#C8F904} .dreammm .ng-campo{position:relative;width:100%;max-width:420px; aspect-ratio:1;margin-inline:auto} /* Il negozio al centro. */ .dreammm .ng-shop{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:44%;border-radius:14px;padding:0 12px 12px; background:var(--ng-carta);border:1px solid var(--ng-bordo); box-shadow:0 14px 34px rgba(20,30,60,.1); display:flex;flex-direction:column;gap:7px;z-index:2} .dreammm .dm-scura .ng-shop{box-shadow:0 14px 34px rgba(0,0,0,.34)} .dreammm .ng-shop__barra{display:flex;gap:4px;align-items:center;height:22px; margin:0 -12px 3px;padding:0 11px;border-bottom:1px solid var(--ng-linea)} .dreammm .ng-shop__barra i{width:5px;height:5px;border-radius:50%;background:var(--ng-linea)} .dreammm .ng-shop__foto{height:34px;border-radius:6px;background:var(--ng-linea)} .dreammm .ng-shop__riga{height:6px;border-radius:3px;background:var(--ng-linea);width:74%} .dreammm .ng-shop__prezzo{height:9px;width:44%;border-radius:3px;background:var(--ng-acc)} .dreammm .ng-shop__cassa{margin-top:2px;height:14px;border-radius:7px; background:var(--ng-acc);opacity:.28; animation:ng-cassa 9s ease-out infinite} @keyframes ng-cassa{ 0%,62%{opacity:.28;transform:scaleX(.6);transform-origin:left} 74%,88%{opacity:1;transform:scaleX(1)} 96%,100%{opacity:.28;transform:scaleX(.6)}} /* I cinque sistemi attorno, e il filo che li collega al negozio. */ .dreammm .ng-nodo{position:absolute;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:7px;white-space:nowrap; padding:7px 12px;border-radius:999px; background:var(--ng-carta);border:1px solid var(--ng-bordo); font-family:var(--dm-display);font-weight:700;font-size:clamp(11px,.9vw,12.5px); color:var(--ng-testo);box-shadow:0 5px 14px rgba(20,30,60,.06); opacity:0;animation:ng-nodo 9s ease-out infinite; animation-delay:calc(.6s + var(--i) * .5s);z-index:3} .dreammm .dm-scura .ng-nodo{box-shadow:0 5px 14px rgba(0,0,0,.3)} .dreammm .ng-nodo::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--ng-acc)} @keyframes ng-nodo{ 0%,4%{opacity:0;transform:translate(-50%,-50%) scale(.86)} 14%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)} 94%,100%{opacity:0;transform:translate(-50%,-50%) scale(.86)}} .dreammm .ng-nodo--1{left:14%;top:16%} .dreammm .ng-nodo--2{left:86%;top:22%} .dreammm .ng-nodo--3{left:92%;top:62%} .dreammm .ng-nodo--4{left:52%;top:94%} .dreammm .ng-nodo--5{left:9%;top:66%} .dreammm .ng-fili{position:absolute;inset:0;width:100%;height:100%;z-index:1} .dreammm .ng-filo{fill:none;stroke:var(--ng-acc);stroke-width:.42; stroke-linecap:round;opacity:.38; stroke-dasharray:100;stroke-dashoffset:100; animation:ng-filo 9s ease-out infinite; animation-delay:calc(.4s + var(--i) * .5s)} @keyframes ng-filo{ 0%,4%{stroke-dashoffset:100} 16%,84%{stroke-dashoffset:0} 94%,100%{stroke-dashoffset:100}} .dreammm .ng-didascalia{max-width:48ch;margin-inline:auto;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--ng-testo)} @media (max-width:760px){ .dreammm .ng-campo{max-width:340px} } @media (prefers-reduced-motion:reduce){ .dreammm .ng-nodo{animation:none;opacity:1;transform:translate(-50%,-50%)} .dreammm .ng-filo{animation:none;stroke-dashoffset:0} .dreammm .ng-shop__cassa{animation:none;opacity:1;transform:none} } /* ========================================================================== ALTRE TRE FIGURINE Servono per i punti delle pagine servizio rimaste. Stesso impianto delle altre: quattro rettangoli e un fotogramma, dentro un riquadro di misura fissa. ========================================================================== */ /* Filtro: da tanti a pochi. Per "non serve traffico, servono le persone giuste" e per "meglio un canale presidiato che quattro abbandonati". */ .dreammm:not(.h2) .bn-fig--filtro i{border-radius:2px;height:7px} .dreammm:not(.h2) .bn-fig--filtro i:nth-child(1){left:0;top:0;width:76px} .dreammm:not(.h2) .bn-fig--filtro i:nth-child(2){left:10px;top:16px;width:56px} .dreammm:not(.h2) .bn-fig--filtro i:nth-child(3){left:22px;top:32px;width:32px} .dreammm:not(.h2) .bn-fig--filtro i:nth-child(4){left:30px;top:47px;width:16px;height:9px; border-radius:3px;background:var(--bn-acc); animation:bn-filtra 4.4s cubic-bezier(.3,0,.2,1) infinite} @keyframes bn-filtra{ 0%,14%{opacity:0;transform:translateY(-12px) scaleX(2.4)} 36%,82%{opacity:1;transform:translateY(0) scaleX(1)} 94%,100%{opacity:0;transform:translateY(-12px) scaleX(2.4)}} /* Marchio: un segno al centro e le sue applicazioni intorno. */ .dreammm:not(.h2) .bn-fig--marchio i:nth-child(1){left:28px;top:18px;width:20px;height:20px; border-radius:5px;background:var(--bn-acc)} .dreammm:not(.h2) .bn-fig--marchio i:nth-child(2){left:0;top:4px;width:18px;height:14px; border-radius:3px;animation:bn-attorno 4.4s ease-out infinite} .dreammm:not(.h2) .bn-fig--marchio i:nth-child(3){left:58px;top:6px;width:18px;height:14px; border-radius:3px;animation:bn-attorno 4.4s ease-out infinite;animation-delay:.2s} .dreammm:not(.h2) .bn-fig--marchio i:nth-child(4){left:52px;top:40px;width:24px;height:14px; border-radius:3px;animation:bn-attorno 4.4s ease-out infinite;animation-delay:.4s} @keyframes bn-attorno{ 0%,10%{opacity:0;transform:scale(.7)} 28%,82%{opacity:1;transform:scale(1)} 94%,100%{opacity:0;transform:scale(.7)}} /* Tempo: una barra che avanza per gradi. Per i cicli lunghi e la costanza. */ .dreammm:not(.h2) .bn-fig--tempo i{height:9px;border-radius:4px;top:24px} .dreammm:not(.h2) .bn-fig--tempo i:nth-child(1){left:0;width:76px} .dreammm:not(.h2) .bn-fig--tempo i:nth-child(2){left:0;width:76px;background:var(--bn-acc); transform-origin:left;animation:bn-avanza 5.2s cubic-bezier(.4,0,.2,1) infinite} .dreammm:not(.h2) .bn-fig--tempo i:nth-child(3){left:0;top:44px;width:9px;height:9px; border-radius:50%} .dreammm:not(.h2) .bn-fig--tempo i:nth-child(4){left:67px;top:44px;width:9px;height:9px; border-radius:50%;background:var(--bn-acc)} @keyframes bn-avanza{ 0%,8%{transform:scaleX(.06)} 30%{transform:scaleX(.36)} 52%{transform:scaleX(.62)} 74%,86%{transform:scaleX(1)} 96%,100%{transform:scaleX(.06)}} /* ========================================================================== I TRE PUNTI: UN OGGETTO SOLO, NON TRE SCHEDE Prima si accendevano a turno. Gian Luca ha notato la cosa giusta: mentre una era in evidenza le altre due sembravano spente. E il turno creava una gerarchia che nel contenuto non esiste -- quei tre punti valgono uguale. Adesso sono un pannello solo diviso in tre, con una luce che lo attraversa da sinistra a destra: **niente viene spento**, il movimento passa e basta. Le figurine continuano il loro giro per conto proprio. La testata sta alla larghezza piena del pannello: prima era una colonna stretta al centro e sembrava un errore di allineamento rispetto alle colonne sotto. Il limite di misura resta al solo testo, che a tutta larghezza sarebbe illeggibile. ========================================================================== */ .dreammm:not(.h2) #a-cosa-serve.a-centro > .dm-wrap > .dm-argomento{ display:block;text-align:center;max-width:none;margin-inline:auto} .dreammm:not(.h2) #a-cosa-serve.a-centro .dm-testo{max-width:78ch; margin-inline:auto} .dreammm:not(.h2) .dm-righe--unito{ position:relative;overflow:hidden;gap:0; border:1px solid #E2E7EE;border-radius:18px; background:linear-gradient(168deg,rgba(255,255,255,.92),rgba(246,248,252,.78))} .dreammm:not(.h2) .dm-scura .dm-righe--unito, .dreammm:not(.h2) .dm-vetrina .dm-righe--unito{ border-color:rgba(255,255,255,.12); background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.02))} /* Le schede perdono la loro scatola: dentro il pannello sono tre scomparti. */ .dreammm:not(.h2) .dm-righe--unito .dm-riga-q{ background:none;border:0;border-radius:0;transform:none!important; box-shadow:none!important;animation:none; border-left:1px solid #E7EBF2; padding:clamp(22px,2.4vw,34px)} .dreammm:not(.h2) .dm-scura .dm-righe--unito .dm-riga-q, .dreammm:not(.h2) .dm-vetrina .dm-righe--unito .dm-riga-q{ border-left-color:rgba(255,255,255,.1)} .dreammm:not(.h2) .dm-righe--unito .dm-riga-q:first-child{border-left:0} .dreammm:not(.h2) .dm-righe--unito .dm-num{animation:none;opacity:.4} /* La luce che attraversa il pannello: un solo movimento, per tutti e tre. */ .dreammm:not(.h2) .dm-righe--unito::after{content:"";position:absolute; top:0;bottom:0;left:0;width:38%;pointer-events:none;z-index:0; background:linear-gradient(100deg,transparent,rgba(87,84,224,.10) 45%, rgba(87,84,224,.16) 55%,transparent); transform:translateX(-110%); animation:tre-luce 7.5s cubic-bezier(.5,0,.5,1) infinite} .dreammm:not(.h2) .dm-scura .dm-righe--unito::after, .dreammm:not(.h2) .dm-vetrina .dm-righe--unito::after{ background:linear-gradient(100deg,transparent,rgba(200,249,4,.07) 45%, rgba(200,249,4,.12) 55%,transparent)} @keyframes tre-luce{ 0%{transform:translateX(-110%)} 62%,100%{transform:translateX(300%)}} .dreammm:not(.h2) .dm-righe--unito:hover::after{animation-play-state:paused} /* Il testo sta sopra la luce. */ .dreammm:not(.h2) .dm-righe--unito .dm-riga-q > *{position:relative;z-index:1} @media (max-width:860px){ .dreammm:not(.h2) .dm-righe--unito .dm-riga-q{border-left:0; border-top:1px solid #E7EBF2} .dreammm:not(.h2) .dm-scura .dm-righe--unito .dm-riga-q{ border-top-color:rgba(255,255,255,.1)} .dreammm:not(.h2) .dm-righe--unito .dm-riga-q:first-child{border-top:0} } @media (prefers-reduced-motion:reduce){ .dreammm:not(.h2) .dm-righe--unito::after{animation:none;opacity:0} } /* ========================================================================== TRE FIGURINE RIMESSE Stavano dentro il blocco del "turno che gira" e le ho portate via insieme a quello. E' la seconda volta che una rimozione a blocchi si tira dietro qualcosa che stava nello stesso commento: da qui in avanti, dopo ogni rimozione, si contano le regole che devono esserci. ========================================================================== */ .dreammm:not(.h2) .bn-fig--pubblico i{border-radius:3px} .dreammm:not(.h2) .bn-fig--pubblico i:nth-child(1){left:0;top:0;width:30px;height:8px} .dreammm:not(.h2) .bn-fig--pubblico i:nth-child(2){left:0;top:13px;width:30px;height:8px} .dreammm:not(.h2) .bn-fig--pubblico i:nth-child(3){left:0;top:26px;width:30px;height:8px} .dreammm:not(.h2) .bn-fig--pubblico i:nth-child(4){left:44px;top:13px;width:32px;height:22px; background:var(--bn-acc);animation:bn-alterna 4.4s ease-in-out infinite} @keyframes bn-alterna{ 0%,12%{opacity:.25;transform:scale(.86)} 34%,72%{opacity:1;transform:scale(1)} 90%,100%{opacity:.25;transform:scale(.86)}} .dreammm:not(.h2) .bn-fig--magazzino i:nth-child(1){left:0;top:14px;width:26px;height:28px; border-radius:5px} .dreammm:not(.h2) .bn-fig--magazzino i:nth-child(2){left:50px;top:14px;width:26px;height:28px; border-radius:5px} .dreammm:not(.h2) .bn-fig--magazzino i:nth-child(3){left:30px;top:27px;width:16px;height:2px} .dreammm:not(.h2) .bn-fig--magazzino i:nth-child(4){left:30px;top:23px;width:10px;height:10px; border-radius:2px;background:var(--bn-acc); animation:bn-navetta 3.6s cubic-bezier(.5,0,.5,1) infinite} @keyframes bn-navetta{ 0%,10%{transform:translateX(0)} 45%,55%{transform:translateX(26px)} 90%,100%{transform:translateX(0)}} .dreammm:not(.h2) .bn-fig--catalogo i:nth-child(1){left:0;top:0;width:76px;height:7px} .dreammm:not(.h2) .bn-fig--catalogo i:nth-child(2){left:0;top:13px;width:76px;height:7px} .dreammm:not(.h2) .bn-fig--catalogo i:nth-child(3){left:0;top:28px;width:28px;height:28px; border-radius:5px;background:var(--bn-acc); animation:bn-scheda 4.4s cubic-bezier(.3,0,.2,1) infinite} .dreammm:not(.h2) .bn-fig--catalogo i:nth-child(4){left:34px;top:34px;width:42px;height:7px; animation:bn-scheda 4.4s cubic-bezier(.3,0,.2,1) infinite;animation-delay:.14s} @keyframes bn-scheda{ 0%,10%{opacity:0;transform:translateY(8px)} 30%,80%{opacity:1;transform:translateY(0)} 92%,100%{opacity:0;transform:translateY(8px)}} /* --- Correzione: il testo sopra la luce, ma senza toccare le posizioni ---- Avevo messo `position:relative` su **tutti** i figli della scheda per portarli sopra la luce che passa. Cosi' pero' il numero d'ombra, che e' in posizione assoluta nell'angolo, e' rientrato nel flusso: si e' piantato in alto a sinistra, grande come un titolo. Basta lo z-index. */ .dreammm:not(.h2) .dm-righe--unito .dm-riga-q > *{position:static;z-index:auto} .dreammm:not(.h2) .dm-righe--unito .dm-riga-q > div, .dreammm:not(.h2) .dm-righe--unito .dm-riga-q > .bn-fig{position:relative;z-index:1} .dreammm:not(.h2) .dm-righe--unito .dm-num{position:absolute;z-index:1;opacity:.16} /* ========================================================================== LA PRIMA SEZIONE: TESTATA LARGA QUANTO IL PANNELLO Misurato a 2000px: il paragrafo era largo 558px sotto un titolo e sopra un pannello larghi 1192. Un terzo, e si leggeva come un errore. Primo tentativo: stringere il pannello. Sbagliato -- Gian Luca voleva il contrario, e aveva ragione: il pannello sta bene largo, e' la testata che era piccola. Il testo pero' a tutta larghezza farebbe righe da 130 caratteri, che non si leggono. Quindi il blocco arriva ai bordi del pannello ma si divide in due colonne: larghezza piena, righe da una sessantina di caratteri. I due paragrafi che ci sono cadono uno per colonna. Provata prima solo su E-commerce, poi estesa a tutte le pagine servizio. ========================================================================== */ .dreammm:not(.h2) #a-cosa-serve.a-centro > .dm-wrap > .dm-argomento{ max-width:none;margin-inline:auto} .dreammm:not(.h2) #a-cosa-serve.a-centro .dm-righe--unito{ max-width:none} @media (min-width:1100px){ .dreammm:not(.h2) #a-cosa-serve.a-centro .dm-testo{ max-width:none;columns:2;column-gap:clamp(34px,3.4vw,64px); text-align:left} .dreammm:not(.h2) #a-cosa-serve.a-centro .dm-testo p{ break-inside:avoid;margin-top:0} .dreammm:not(.h2) #a-cosa-serve.a-centro .dm-testo p + p{ margin-top:1em} } @media (max-width:1099px){ .dreammm:not(.h2) #a-cosa-serve.a-centro .dm-testo{ max-width:72ch;margin-inline:auto} } /* Il pannello resta largo, ma piu' leggero dentro: meno respiro, niente numero d'ombra (tre numeroni dentro un oggetto solo facevano rumore) e figurine piu' piccole. Tre colonne per definizione: con la disposizione automatica un pannello stretto ne teneva due e l'altezza saliva. */ .dreammm:not(.h2) .dm-righe--unito{ grid-template-columns:repeat(3,minmax(0,1fr))} /* Sotto i mille pixel tre colonne diventano tre strisce da 270px: il testo ci sta stretto e la scheda cresce in altezza. Meglio impilarle. */ @media (max-width:999px){ .dreammm:not(.h2) .dm-righe--unito{grid-template-columns:1fr} } .dreammm:not(.h2) .dm-righe--unito .dm-riga-q{ padding:clamp(18px,1.9vw,28px)} .dreammm:not(.h2) .dm-righe--unito .dm-num{display:none} .dreammm:not(.h2) .dm-righe--unito .bn-fig{ width:60px;height:44px;margin-bottom:12px;transform:scale(.82); transform-origin:left top} .dreammm:not(.h2) .dm-righe--unito .dm-riga-q h3{ font-size:clamp(16px,1.3vw,20px);max-width:24ch} .dreammm:not(.h2) .dm-righe--unito .dm-riga-q p{ font-size:clamp(14px,1vw,16px);margin-top:8px} /* ========================================================================== DUE PARTITE — perche' il posizionamento non ha un prezzo di listino Il testo lo dice: "il lavoro dipende da dove parti e da chi hai davanti. Un settore poco presidiato si affronta in pochi mesi; un mercato nazionale conteso e' una partita lunga". Qui le due partite stanno una sopra l'altra: pochi concorrenti e una barra corta, tanti concorrenti e una barra che ci mette molto di piu'. Le due barre partono nello stesso istante: e' il confronto a dire la cosa, non la velocita' in se'. Nessun numero inventato -- non c'e' scritto quanti mesi -- perche' il punto e' proprio che dipende. ========================================================================== */ .dreammm .ga-scena{ --ga-linea:#DDE3EC; --ga-rivale:#C3CBD8; --ga-testo:#5A6570; --ga-testo-on:#111820; --ga-acc:#5754E0; margin:0;display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .ga-scena{ --ga-linea:rgba(255,255,255,.16); --ga-rivale:rgba(255,255,255,.34); --ga-testo:rgba(255,255,255,.6); --ga-testo-on:#fff; --ga-acc:#C8F904} .dreammm .ga-campo{display:flex;flex-direction:column; gap:clamp(22px,2.6vw,34px);width:100%;max-width:420px;margin-inline:auto} .dreammm .ga-caso{display:grid;gap:9px} .dreammm .ga-nome{font-family:var(--dm-display);font-weight:800; font-size:clamp(13px,1.05vw,15px);color:var(--ga-testo-on)} /* I concorrenti: pochi o tanti. Compaiono uno dopo l'altro, cosi' la differenza di quantita' si nota invece di essere solo vista. */ .dreammm .ga-rivali{display:flex;flex-wrap:wrap;gap:5px;min-height:11px} .dreammm .ga-rivali i{width:11px;height:11px;border-radius:3px; background:var(--ga-rivale);opacity:0; animation:ga-rivale 11s ease-out infinite; animation-delay:calc(var(--i) * .2s + var(--r) * .09s)} @keyframes ga-rivale{ 0%,4%{opacity:0;transform:scale(.5)} 12%,88%{opacity:1;transform:scale(1)} 96%,100%{opacity:0;transform:scale(.5)}} /* La pista e la barra che la percorre. La corta arriva presto, la lunga ci mette quasi tutto il giro. */ .dreammm .ga-pista{position:relative;display:block;height:10px; border-radius:5px;background:var(--ga-linea);overflow:hidden} .dreammm .ga-pista b{position:absolute;inset:0;border-radius:5px; background:var(--ga-acc);transform:scaleX(0);transform-origin:left; animation:ga-corsa 11s cubic-bezier(.4,0,.25,1) infinite} @keyframes ga-corsa{0%,10%{transform:scaleX(0)} 100%{transform:scaleX(1)}} .dreammm .ga-caso--corta b{animation-name:ga-corta} @keyframes ga-corta{ 0%,10%{transform:scaleX(0)} 30%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)}} .dreammm .ga-caso--lunga b{animation-name:ga-lunga} /* La barra lunga chiude al 62%: prima arrivava all'88% e l'esito restava a schermo meno di mezzo secondo. */ @keyframes ga-lunga{ 0%,10%{transform:scaleX(0)} 62%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)}} .dreammm .ga-esito{font-size:clamp(12px,.92vw,13.5px);color:var(--ga-testo); opacity:0;animation:ga-esito 11s ease-out infinite} .dreammm .ga-caso--corta .ga-esito{animation-name:ga-esito-corta} .dreammm .ga-caso--lunga .ga-esito{animation-name:ga-esito-lunga} @keyframes ga-esito-corta{0%,30%{opacity:0}38%,88%{opacity:1}96%,100%{opacity:0}} @keyframes ga-esito-lunga{0%,60%{opacity:0}70%,90%{opacity:1}96%,100%{opacity:0}} @keyframes ga-esito{0%,100%{opacity:0}} .dreammm .ga-didascalia{max-width:46ch;margin-inline:auto;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--ga-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .ga-rivali i{animation:none;opacity:1;transform:none} .dreammm .ga-pista b{animation:none} .dreammm .ga-caso--corta b{transform:scaleX(.42)} .dreammm .ga-caso--lunga b{transform:scaleX(1)} .dreammm .ga-esito{animation:none;opacity:1} } /* ========================================================================== IL MARCHIO CHE NASCE, E IL SISTEMA CHE GLI CRESCE INTORNO Il testo risponde "fate anche solo il logo?" con "un logo da solo e' una maniglia senza la porta: quello che ha senso e' il sistema minimo -- marchio, colori, caratteri e le regole per usarli". Quindi la figura fa due cose in fila: prima nasce il marchio (le guide di costruzione, poi i tre segni che si incastrano, poi il nucleo), e solo dopo compaiono i tre pezzi che lo rendono un sistema. Se si fermasse al marchio direbbe il contrario del testo. La forma e' astratta di proposito: un marchio finto ma riconoscibile sembrerebbe il logo di qualcuno. Le guide che lo precedono servono a farlo leggere come un marchio in costruzione e non come un'icona. Il ciclo e' di 10s e non lascia mai le voci in scena senza il marchio: le voci escono prima che i segni si smontino. Il fotogramma "sistema senza marchio" direbbe una cosa che il testo non dice. ========================================================================== */ .dreammm .lg-scena{ --lg-carta:#fff; --lg-bordo:#E2E7EE; --lg-linea:#C7D0DC; --lg-testo:#5A6570; --lg-testo-on:#111820; --lg-acc:#5754E0; margin:0;display:flex;flex-direction:column;align-items:center; gap:clamp(18px,2.2vw,26px)} .dreammm .dm-scura .lg-scena{ --lg-carta:rgba(255,255,255,.06); --lg-bordo:rgba(255,255,255,.14); --lg-linea:rgba(255,255,255,.22); --lg-testo:rgba(255,255,255,.6); --lg-testo-on:#fff; --lg-acc:#C8F904} /* --- Il marchio --------------------------------------------------------- */ .dreammm .lg-marchio{width:clamp(146px,17vw,184px);aspect-ratio:1} .dreammm .lg-marchio svg{display:block;width:100%;height:100%;overflow:visible} /* Le guide: il reticolo su cui un marchio si costruisce davvero. Entrano per prime e si tolgono quando il segno sta in piedi da solo. */ .dreammm .lg-guide{fill:none;stroke:var(--lg-linea);stroke-width:1; opacity:0;animation:lg-guide 10s ease-in-out infinite} @keyframes lg-guide{ 0%{opacity:0} 5%,26%{opacity:1} 36%,100%{opacity:0}} /* I tre segni. Ognuno arriva dalla propria direzione e si incastra: la posizione finale e' nel path, l'animazione muove solo lo scarto. */ .dreammm .lg-lama{fill:none;stroke:var(--lg-acc);stroke-width:15; stroke-linecap:round; transform-box:fill-box;transform-origin:center; opacity:0;animation:lg-lama 10s infinite; animation-delay:calc(var(--i) * .26s)} @keyframes lg-lama{ 0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(.72); animation-timing-function:cubic-bezier(.2,.86,.3,1.18)} 22%,78%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1); animation-timing-function:cubic-bezier(.6,0,.85,.4)} 96%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(.72)}} /* Il nucleo chiude il segno: arriva per ultimo, quando i tre archi hanno gia' preso posto. */ .dreammm .lg-nucleo{fill:var(--lg-acc); transform-box:fill-box;transform-origin:center; opacity:0;animation:lg-nucleo 10s cubic-bezier(.34,1.5,.5,1) infinite} @keyframes lg-nucleo{ 0%,20%{opacity:0;transform:scale(.2)} 27%,78%{opacity:1;transform:scale(1)} 94%,100%{opacity:0;transform:scale(.2)}} /* --- Il sistema --------------------------------------------------------- Compare dopo il marchio: e' l'ordine dell'argomento, non un vezzo. Ed esce prima, perche' il sistema senza il marchio non vuol dire niente. */ .dreammm .lg-sistema{display:flex;flex-wrap:wrap;justify-content:center; gap:8px} .dreammm .lg-voce{display:inline-flex;align-items:center;gap:8px; padding:8px 14px 8px 10px;border-radius:999px;white-space:nowrap; background:var(--lg-carta);border:1px solid var(--lg-bordo); font-family:var(--dm-display);font-weight:700; font-size:clamp(12px,.95vw,13.5px);color:var(--lg-testo-on); opacity:0;animation:lg-voce 10s ease-out infinite; animation-delay:calc(2.9s + var(--i) * .3s)} @keyframes lg-voce{ 0%{opacity:0;transform:translateY(8px) scale(.94)} 8%,48%{opacity:1;transform:translateY(0) scale(1)} 57%,100%{opacity:0;transform:translateY(8px) scale(.94)}} .dreammm .lg-voce b{display:inline-flex;align-items:center;gap:3px; font-family:var(--dm-display);font-weight:800;font-size:12px; color:var(--lg-acc);line-height:1} .dreammm .lg-voce--colori em{width:9px;height:9px;border-radius:50%; background:var(--lg-acc)} .dreammm .lg-voce--colori em:nth-child(2){opacity:.6} .dreammm .lg-voce--colori em:nth-child(3){opacity:.3} .dreammm .lg-voce--regole em{width:12px;height:2px;border-radius:2px; background:var(--lg-linea)} .dreammm .lg-voce--regole em:nth-child(2){width:7px} .dreammm .lg-didascalia{max-width:44ch;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--lg-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .lg-guide{animation:none;opacity:0} .dreammm .lg-lama{animation:none;opacity:1;transform:none} .dreammm .lg-nucleo{animation:none;opacity:1;transform:none} .dreammm .lg-voce{animation:none;opacity:1;transform:none} } /* ========================================================================== QUATTRO LASTRE CHE VANNO A REGISTRO, E LA PROVA COLORE Il testo della sezione dice che il mestiere di partenza e' impaginazione e prestampa, e che "chi ha controllato prove di stampa sa quanto costa accorgersi di un colore sbagliato quando le scatole sono gia' arrivate". La figura mostra quello, nell'ordine in cui succede: le quattro lastre arrivano fuori registro e si mettono a registro, la barra di controllo si riempie, una pezza esce sbagliata e viene corretta prima della tiratura. Il foglio, i crocini e i mirini non si animano mai: sono il tavolo. Gira solo il lavoro. Cosi' la figura non ha un fotogramma vuoto. Le lastre C, M, Y sono in multiply sopra la carta bianca -- che e' quello che fanno gli inchiostri -- e il nero sta sopra in normale, cosi' a registro la pagina resta netta e fuori registro si vedono le frange. ========================================================================== */ .dreammm .gd-scena{ --gd-carta:#fff; --gd-ombra:0 18px 40px rgba(16,26,46,.14); --gd-segno:#B9C2CE; --gd-testo:#5A6570; --gd-acc:#5754E0; margin:0;display:flex;flex-direction:column;align-items:center; gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .gd-scena{ --gd-carta:#F6F7F4; --gd-ombra:0 24px 54px rgba(0,0,0,.42); --gd-segno:#AEB7C3; --gd-testo:rgba(255,255,255,.6); --gd-acc:#C8F904} .dreammm .gd-foglio{width:clamp(210px,25vw,278px);aspect-ratio:240/260} .dreammm .gd-foglio svg{display:block;width:100%;height:100%} /* Il tavolo: carta, crocini di taglio, mirini di registro. */ .dreammm .gd-carta{fill:var(--gd-carta);filter:drop-shadow(var(--gd-ombra))} .dreammm .gd-segni{fill:none;stroke:var(--gd-segno);stroke-width:1} .dreammm .gd-mirino circle{stroke-width:1.2} /* --- Le quattro lastre -------------------------------------------------- La posizione buona e' lo zero: l'animazione muove solo lo scarto, quindi il registro non puo' finire storto. */ .dreammm .gd-lastra{ opacity:0;animation:gd-registro 10s cubic-bezier(.3,.9,.25,1) infinite; animation-delay:calc(var(--i) * .18s)} .dreammm .gd-lastra--c{fill:#00AEEF;mix-blend-mode:multiply} .dreammm .gd-lastra--m{fill:#EC008C;mix-blend-mode:multiply} .dreammm .gd-lastra--y{fill:#FFE800;mix-blend-mode:multiply} .dreammm .gd-lastra--k{fill:#14181C} @keyframes gd-registro{ 0%{opacity:0;transform:translate(var(--dx),var(--dy))} 6%,22%{opacity:1} 24%,90%{opacity:1;transform:translate(0,0)} 99%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}} /* --- La barra di controllo ---------------------------------------------- */ .dreammm .gd-pezza{opacity:0;animation:gd-pezza 10s ease-out infinite; animation-delay:calc(var(--i) * .1s)} /* Le pezze seguono le lastre: sono stampate da quelle. Se ne andassero prima, o restassero dopo, la figura direbbe una cosa che non succede. */ @keyframes gd-pezza{ 0%,26%{opacity:0} 32%,88%{opacity:1} 95%,100%{opacity:0}} .dreammm .gd-pezza--c{fill:#00AEEF} .dreammm .gd-pezza--y{fill:#FFE800} .dreammm .gd-pezza--k{fill:#14181C} .dreammm .gd-pezza--r{fill:#ED1C24} .dreammm .gd-pezza--b{fill:#2E3192} /* La pezza che la figura racconta: arriva arancione, viene vista, e si corregge. L'ordine conta -- il visto arriva dopo la correzione, mai prima. */ .dreammm .gd-pezza--m{fill:#F0632A; animation:gd-pezza 10s ease-out infinite, gd-corretta 10s linear infinite; animation-delay:calc(var(--i) * .1s), 0s} @keyframes gd-corretta{ 0%,53%{fill:#F0632A} 56%,100%{fill:#EC008C}} .dreammm .gd-cerchia{fill:none;stroke:var(--gd-acc);stroke-width:2; opacity:0;animation:gd-cerchia 10s ease-out infinite} @keyframes gd-cerchia{ 0%,42%{opacity:0} 47%,53%{opacity:1} 60%,100%{opacity:0}} .dreammm .gd-visto{fill:none;stroke:var(--gd-acc);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; opacity:0;animation:gd-visto 10s ease-out infinite} @keyframes gd-visto{ 0%,62%{opacity:0;transform:translateY(3px)} 68%,88%{opacity:1;transform:translateY(0)} 94%,100%{opacity:0}} .dreammm .gd-cerchia, .dreammm .gd-visto{transform-box:fill-box;transform-origin:center} .dreammm .gd-didascalia{max-width:42ch;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--gd-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .gd-lastra{animation:none;opacity:1;transform:none} .dreammm .gd-pezza{animation:none;opacity:1} .dreammm .gd-pezza--m{fill:#EC008C} .dreammm .gd-cerchia{animation:none;opacity:0} .dreammm .gd-visto{animation:none;opacity:1;transform:none} } /* ========================================================================== UN TESTO GENERICO ESISTE GIA' IDENTICO ALTROVE Il testo risponde "usate l'intelligenza artificiale per scrivere?" con: la usiamo come assistente, non come autore, perche' un testo scritto solo da una macchina "e' corretto, generico e non dice niente che non fosse gia' scritto altrove. La differenza la fa quello che sai tu." La figura fa vedere quello: la pagina ha dietro tre copie identiche -- l'argomento del "gia' scritto altrove", non un effetto -- finche' non arriva la riga che sai solo tu. Da li' in poi le copie non corrispondono piu', e se ne vanno. La pagina e le sue righe non si animano mai: sono il tavolo. La riga generica esce prima che entri quella tua, e rientra dopo che quella tua e' uscita: e' uno scambio, e le due non devono mai stare sovrapposte nello stesso fotogramma. ========================================================================== */ .dreammm .cp-scena{ --cp-carta:#fff; --cp-bordo:#E2E7EE; --cp-riga:#D7DEE7; --cp-testo:#5A6570; --cp-acc:#5754E0; margin:0;display:flex;flex-direction:column;align-items:center; gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .cp-scena{ --cp-carta:rgba(255,255,255,.07); --cp-bordo:rgba(255,255,255,.15); --cp-riga:rgba(255,255,255,.26); --cp-testo:rgba(255,255,255,.6); --cp-acc:#C8F904} .dreammm .cp-quadro{width:clamp(230px,29vw,320px);aspect-ratio:260/200} .dreammm .cp-quadro svg{display:block;width:100%;height:100%} .dreammm .cp-carta{fill:var(--cp-carta);stroke:var(--cp-bordo);stroke-width:1} .dreammm .cp-riga{fill:var(--cp-riga)} /* Le copie: identiche, e se ne vanno quando smettono di esserlo. */ .dreammm .cp-copia{opacity:0;animation:cp-copia 10s ease-out infinite; animation-delay:calc(var(--i) * .12s)} @keyframes cp-copia{ 0%{opacity:0} 8%,42%{opacity:.5} 56%,100%{opacity:0}} /* La riga generica esce quando entra quella che sai tu: e' uno scambio, non un'aggiunta. */ .dreammm .cp-riga--generica{animation:cp-generica 10s ease-out infinite} @keyframes cp-generica{ 0%,40%{opacity:1} 45%,90%{opacity:0} 96%,100%{opacity:1}} .dreammm .cp-tua{fill:var(--cp-acc); transform-box:fill-box;transform-origin:left center; opacity:0;animation:cp-tua 10s cubic-bezier(.22,1,.36,1) infinite} @keyframes cp-tua{ 0%,47%{opacity:0;transform:translateX(46px)} 55%,86%{opacity:1;transform:translateX(0)} 92%,100%{opacity:0;transform:translateX(46px)}} .dreammm .cp-segno{fill:var(--cp-acc); opacity:0;animation:cp-segno 10s ease-out infinite} @keyframes cp-segno{ 0%,51%{opacity:0} 59%,86%{opacity:1} 92%,100%{opacity:0}} .dreammm .cp-didascalia{max-width:42ch;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--cp-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .cp-copia{animation:none;opacity:0} .dreammm .cp-riga--generica{animation:none;opacity:0} .dreammm .cp-tua, .dreammm .cp-segno{animation:none;opacity:1;transform:none} } /* ========================================================================== DUE CIFRE DISTINTE, E LA SOGLIA SOTTO LA QUALE NON SI IMPARA NIENTE Il testo dice due cose: "due cifre distinte e conviene tenerle separate: quello che paghi a Google o a Meta, e quello che paghi a noi"; e "sotto una certa soglia le campagne non raccolgono abbastanza dati per capire cosa funziona, e si finisce per pagare senza imparare niente". Le due barre restano visibilmente separate, e quella dello studio non cresce: non e' la cifra che cambia. I punti ballano finche' la barra sta sotto la soglia; quando la supera si mettono in fila. I punti si muovono solo in verticale e la loro posizione buona e' lo zero: lo scarto e' scritto sul punto, quindi la fila non puo' venire storta. ========================================================================== */ .dreammm .sg-scena{ --sg-vasca:#EDF1F5; --sg-riga:#C7D0DC; --sg-punto:#98A4B3; --sg-testo:#5A6570; --sg-eti:#7C8797; --sg-acc:#5754E0; --sg-guida:#B9C2CE; margin:0;display:flex;flex-direction:column;align-items:center; gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .sg-scena{ --sg-vasca:rgba(255,255,255,.08); --sg-riga:rgba(255,255,255,.2); --sg-punto:rgba(255,255,255,.42); --sg-testo:rgba(255,255,255,.6); --sg-eti:rgba(255,255,255,.55); --sg-acc:#C8F904; --sg-guida:rgba(255,255,255,.34)} .dreammm .sg-quadro{width:clamp(250px,31vw,340px);aspect-ratio:280/200} .dreammm .sg-quadro svg{display:block;width:100%;height:100%} .dreammm .sg-base{stroke:var(--sg-riga);stroke-width:1} .dreammm .sg-soglia{stroke:var(--sg-guida);stroke-width:1.4; stroke-dasharray:3 4} .dreammm .sg-eti{font-family:var(--dm-display);font-size:10.5px;font-weight:600; fill:var(--sg-eti);text-anchor:middle} .dreammm .sg-eti--soglia{font-size:9px;letter-spacing:.04em} /* Le due cifre. Quella dello studio sta ferma di proposito. */ .dreammm .sg-vasca{fill:var(--sg-vasca)} .dreammm .sg-guida{fill:var(--sg-guida)} .dreammm .sg-benzina{fill:var(--sg-acc); transform-box:fill-box;transform-origin:left center; animation:sg-cresce 10s cubic-bezier(.35,.85,.35,1) infinite} /* Il budget sale, si ferma un attimo sotto la soglia, e poi la supera: il momento del sorpasso e' quello in cui le colonne si assestano. */ @keyframes sg-cresce{ 0%{transform:scaleX(.06)} 26%{transform:scaleX(.62)} 34%{transform:scaleX(.66)} 42%{transform:scaleX(.78)} 55%,93%{transform:scaleX(1)} 99%,100%{transform:scaleX(.06)}} /* Le colonne: l'altezza buona e' nel disegno, il ballo e' un fattore di scala sopra quella. Si assestano quando la barra supera la soglia, non prima: il fotogramma "sopra la soglia e ancora rumore" direbbe il contrario del testo. */ .dreammm .sg-col{fill:var(--sg-punto); transform-box:fill-box;transform-origin:center bottom; opacity:0;animation:sg-col 10s ease-in-out infinite} @keyframes sg-col{ 0%{opacity:0;transform:scaleY(var(--n))} 8%,14%{opacity:1;transform:scaleY(var(--n))} 21%{transform:scaleY(var(--m))} 29%{transform:scaleY(var(--n))} 38%{transform:scaleY(var(--m))} 50%,88%{opacity:1;transform:scaleY(1)} 97%,100%{opacity:0;transform:scaleY(var(--n))}} /* La tendenza si disegna solo dopo che i punti sono in fila: prima non c'e' niente da leggere, ed e' proprio quello che dice il testo. */ .dreammm .sg-tendenza{fill:none;stroke:var(--sg-acc);stroke-width:2; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:100;stroke-dashoffset:100; animation:sg-tendenza 10s ease-out infinite} /* In chiusura l'ordine e' l'inverso dell'apertura: prima sparisce la tendenza, poi si scompongono le colonne, e per ultimo cala il budget. Cosi' non c'e' un fotogramma con i dati in fila e il budget sotto. */ @keyframes sg-tendenza{ 0%,52%{stroke-dashoffset:100} 64%,84%{stroke-dashoffset:0} 89%,100%{stroke-dashoffset:100}} .dreammm .sg-didascalia{max-width:44ch;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--sg-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .sg-benzina{animation:none;transform:none} .dreammm .sg-col{animation:none;opacity:1;transform:none} .dreammm .sg-tendenza{animation:none;stroke-dashoffset:0} } /* ========================================================================== DUE MESTIERI DIVERSI, E UN LAVORO CHE NON RESTA A META' Il testo dice che il social B2B e quello B2C "sono due mestieri con ritmi e linguaggi diversi": qui seguiamo il primo, per il secondo c'e' uno studio separato, e "preferiamo passare un lavoro a chi lo fa meglio piuttosto che tenerlo e farlo a meta'". Quindi e' un bivio vero, non un percorso. Il punto e' che tutte e due le strade arrivano da qualche parte: nessuna finisce nel vuoto, che sarebbe il contrario di quello che c'e' scritto. Le due destinazioni sono sempre in scena con la loro etichetta: anche in un fotogramma fermo la figura dice quello che deve dire. ========================================================================== */ .dreammm .bv-scena{ --bv-carta:#fff; --bv-bordo:#E2E7EE; --bv-strada:#D7DEE7; --bv-nome:#111820; --bv-sotto:#7C8797; --bv-testo:#5A6570; --bv-acc:#5754E0; margin:0;display:flex;flex-direction:column;align-items:center; gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .bv-scena{ --bv-carta:rgba(255,255,255,.07); --bv-bordo:rgba(255,255,255,.15); --bv-strada:rgba(255,255,255,.22); --bv-nome:#fff; --bv-sotto:rgba(255,255,255,.55); --bv-testo:rgba(255,255,255,.6); --bv-acc:#C8F904} .dreammm .bv-quadro{width:clamp(250px,31vw,340px);aspect-ratio:280/200} .dreammm .bv-quadro svg{display:block;width:100%;height:100%} .dreammm .bv-strada{fill:none;stroke:var(--bv-strada);stroke-width:2; stroke-linecap:round} .dreammm .bv-meta rect{fill:var(--bv-carta);stroke:var(--bv-bordo); stroke-width:1.5} .dreammm .bv-nome{font-family:var(--dm-display);font-size:16px;font-weight:800; fill:var(--bv-nome);text-anchor:middle} .dreammm .bv-sotto{font-family:var(--dm-display);font-size:9.5px;font-weight:600; fill:var(--bv-sotto);text-anchor:middle} /* Il lavoro che prende la sua strada. La corsa e' fatta di due tratti dritti, quindi il punto sta sempre sulla riga: niente da tenere d'accordo fra due formule. */ .dreammm .bv-corsa{fill:var(--bv-acc);opacity:0} .dreammm .bv-corsa--qui{animation:bv-qui 10s linear infinite} .dreammm .bv-corsa--altrove{animation:bv-altrove 10s linear infinite} @keyframes bv-qui{ 0%,2%{opacity:0;transform:translate(0,0)} 5%,14%{opacity:1} 14%{transform:translate(0,46px)} 24%{opacity:1;transform:translate(-70px,98px)} 30%,100%{opacity:0;transform:translate(-70px,98px)}} @keyframes bv-altrove{ 0%,48%{opacity:0;transform:translate(0,0)} 51%,60%{opacity:1} 60%{transform:translate(0,46px)} 70%{opacity:1;transform:translate(70px,98px)} 76%,100%{opacity:0;transform:translate(70px,98px)}} /* La destinazione si accende quando il lavoro arriva, non prima. */ .dreammm .bv-meta--qui rect{animation:bv-acceso 10s ease-out infinite} .dreammm .bv-meta--altrove rect{animation:bv-acceso 10s ease-out infinite; animation-delay:4.6s} @keyframes bv-acceso{ 0%,22%{stroke:var(--bv-bordo);stroke-width:1.5} 26%,40%{stroke:var(--bv-acc);stroke-width:2.4} 48%,100%{stroke:var(--bv-bordo);stroke-width:1.5}} .dreammm .bv-didascalia{max-width:44ch;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--bv-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .bv-corsa{animation:none;opacity:0} .dreammm .bv-meta rect{animation:none} } /* ========================================================================== SE NE VANNO I COMPITI, NON LE PERSONE Il testo risponde "sostituira' i miei dipendenti?" con: no, "quello che sostituisce sono i compiti ripetitivi che le persone fanno controvoglia"; e il risultato e' che "le stesse persone smettono di fare quel lavoro li' e cominciano a farne uno piu' utile". Quindi la persona non si muove e non sparisce mai: e' tutto l'argomento. Si muovono i compiti, uno alla volta, e alla fine al loro posto ne compare un altro. I tre compiti tengono il loro spazio anche quando se ne sono andati, cosi' la pila non salta e la riga nuova arriva dove stavano le altre. Ogni compito ha il suo giro scritto per intero, senza ritardi: un ritardo su un ciclo infinito sfasa il rientro e lascia la pila incompleta. ========================================================================== */ .dreammm .ct-scena{ --ct-carta:#fff; --ct-bordo:#E2E7EE; --ct-testo-on:#111820; --ct-persona:#2A3340; --ct-testo:#5A6570; --ct-acc:#5754E0; margin:0;display:flex;flex-direction:column;align-items:center; gap:clamp(16px,2vw,22px)} .dreammm .dm-scura .ct-scena{ --ct-carta:rgba(255,255,255,.07); --ct-bordo:rgba(255,255,255,.15); --ct-testo-on:#fff; --ct-persona:rgba(255,255,255,.82); --ct-testo:rgba(255,255,255,.6); --ct-acc:#C8F904} .dreammm .ct-tavolo{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:clamp(12px,1.6vw,18px); width:100%;max-width:360px} /* La persona non si anima mai. */ .dreammm .ct-persona svg{display:block;width:clamp(46px,6vw,62px); fill:var(--ct-persona)} .dreammm .ct-pila{position:relative;display:flex;flex-direction:column; gap:7px;align-items:center} .dreammm .ct-compito{display:inline-block;padding:6px 12px;border-radius:999px; background:var(--ct-carta);border:1px solid var(--ct-bordo); font-family:var(--dm-display);font-weight:700; font-size:clamp(11px,.86vw,12.5px);color:var(--ct-testo-on); white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} /* La pila si svuota dal basso: cosi' quelli che restano stanno sempre attaccati in cima e non si apre un buco in mezzo, che sembrerebbe un errore di impaginazione invece che il senso della cosa. */ .dreammm .ct-compito:nth-child(3){animation:ct-c1 10s ease-in-out infinite} .dreammm .ct-compito:nth-child(2){animation:ct-c2 10s ease-in-out infinite} .dreammm .ct-compito:nth-child(1){animation:ct-c3 10s ease-in-out infinite} @keyframes ct-c1{ 0%,12%{opacity:1;transform:none} 20%,86%{opacity:0;transform:translateX(84px)} 94%,100%{opacity:1;transform:none}} @keyframes ct-c2{ 0%,24%{opacity:1;transform:none} 32%,86%{opacity:0;transform:translateX(84px)} 94%,100%{opacity:1;transform:none}} @keyframes ct-c3{ 0%,36%{opacity:1;transform:none} 44%,86%{opacity:0;transform:translateX(84px)} 94%,100%{opacity:1;transform:none}} /* Arriva quando gli altri se ne sono andati, e se ne va prima che tornino: la pila non deve mai mostrare le due cose insieme. Sta fuori dal flusso, al centro della pila: cosi' la pila resta alta tre righe -- e la riga nuova compare esattamente sulla linea della persona, non sotto di lei. */ .dreammm .ct-compito--nuovo{position:absolute;top:50%;left:50%; color:var(--ct-testo-on);border-color:var(--ct-acc); animation:ct-nuovo 10s cubic-bezier(.22,1,.36,1) infinite} @keyframes ct-nuovo{ 0%,50%{opacity:0;transform:translate(-50%,-50%) translateY(7px)} 58%,84%{opacity:1;transform:translate(-50%,-50%)} 90%,100%{opacity:0;transform:translate(-50%,-50%) translateY(7px)}} .dreammm .ct-macchina svg{display:block;width:clamp(42px,5.4vw,56px); fill:none;stroke:var(--ct-acc);stroke-width:2.2;stroke-linecap:round; animation:ct-pulsa 10s ease-out infinite; transform-origin:center} .dreammm .ct-macchina .ct-corpo{fill:var(--ct-carta)} @keyframes ct-pulsa{ 0%,16%{transform:scale(1)} 20%{transform:scale(1.12)} 26%,28%{transform:scale(1)} 32%{transform:scale(1.12)} 38%,40%{transform:scale(1)} 44%{transform:scale(1.12)} 50%,100%{transform:scale(1)}} .dreammm .ct-didascalia{max-width:42ch;text-align:center; font-size:clamp(12.5px,.92vw,14.5px);line-height:1.5;color:var(--ct-testo)} @media (prefers-reduced-motion:reduce){ .dreammm .ct-compito{animation:none;opacity:1;transform:none} .dreammm .ct-compito--nuovo{animation:none;opacity:1; transform:translate(-50%,-50%)} .dreammm .ct-macchina svg{animation:none;transform:none} } /* ========================================================================== IL MOSAICO DEI LAVORI La pagina dei progetti non e' la home: qui i lavori sono il contenuto, non un assaggio. Quindi righe da due e da tre che si alternano, foto a tutto campo e il testo dentro l'immagine. Le schede della home e dello Studio restano quelle che sono: quelle sono un estratto dentro una pagina che parla d'altro, e cambiarle qui avrebbe cambiato anche loro. L'altezza e' della riga, non della scheda: le colonne hanno larghezze diverse ma le schede di una riga finiscono sempre allineate. ========================================================================== */ .dreammm .pf-griglia{ --pf-acc:#C8F904; --pf-vuoto:clamp(14px,1.6vw,24px); display:flex;flex-direction:column;gap:var(--pf-vuoto)} .dreammm .pf-riga{display:grid;gap:var(--pf-vuoto)} .dreammm .pf-riga--uno{grid-template-columns:1fr;height:clamp(280px,30vw,430px)} .dreammm .pf-riga--due{grid-template-columns:1.34fr 1fr;height:clamp(250px,25vw,370px)} .dreammm .pf-riga--rovescia{grid-template-columns:1fr 1.34fr} .dreammm .pf-riga--tre{grid-template-columns:repeat(3,1fr);height:clamp(210px,20vw,300px)} .dreammm .pf-lav{position:relative;display:block;height:100%;overflow:hidden; border-radius:18px;background:#0B1017;text-decoration:none;isolation:isolate} .dreammm .pf-lav__foto{position:absolute;inset:0;width:100%;height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease} /* La velatura: le foto sono ventuno e sono tutte diverse -- ce n'e' una di ghiaccio azzurro e una di una palestra al sole -- quindi il testo non puo' contare sull'immagine che ha sotto. Un velo uniforme calma le piu' chiare, la sfumatura in basso tiene il testo. */ .dreammm .pf-lav::after{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg, rgba(8,12,20,0) 20%, rgba(8,12,20,.34) 45%, rgba(8,12,20,.72) 66%, rgba(8,12,20,.93) 86%, rgba(8,12,20,.97) 100%), linear-gradient(180deg,rgba(8,12,20,.16),rgba(8,12,20,.16))} .dreammm .pf-lav__corpo{position:absolute;left:0;right:0;bottom:0;z-index:1; display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end; gap:clamp(10px,1.2vw,18px);padding:clamp(15px,1.5vw,24px)} .dreammm .pf-lav__testo{display:block;min-width:0} .dreammm .pf-tag{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .dreammm .pf-tag b{font-family:var(--dm-display);font-size:9.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88); line-height:1;padding:5px 9px;border-radius:999px; border:1px solid rgba(255,255,255,.32);background:rgba(10,14,22,.42)} .dreammm .pf-lav__nome{margin:0;font-family:var(--dm-display);font-weight:800; color:#fff;font-size:clamp(17px,1.45vw,23px);line-height:1.14; transition:color .3s ease} .dreammm .pf-lav__riga{display:block;margin-top:7px;max-width:46ch; color:rgba(255,255,255,.72);font-size:clamp(12px,.92vw,14px);line-height:1.45} .dreammm .pf-freccia{display:grid;place-items:center;flex:none; width:clamp(34px,2.9vw,44px);aspect-ratio:1;border-radius:50%; border:1px solid rgba(255,255,255,.38);color:#fff; transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease} .dreammm .pf-freccia svg{width:46%;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){ .dreammm .pf-lav:hover .pf-lav__foto{transform:scale(1.055)} .dreammm .pf-lav:hover .pf-lav__nome{color:var(--pf-acc)} .dreammm .pf-lav:hover .pf-freccia{background:var(--pf-acc);color:#0B1017; border-color:var(--pf-acc);transform:translateX(3px)} } .dreammm .pf-lav:focus-visible{outline:2px solid var(--pf-acc);outline-offset:3px} /* Sotto una certa larghezza le righe non hanno piu' senso: la scheda torna una sola per riga e l'altezza torna a essere la sua. */ @media (max-width:900px){ .dreammm .pf-riga{grid-template-columns:1fr;height:auto;gap:var(--pf-vuoto)} /* Niente rapporto fisso: un sommario di tre righe verrebbe tagliato dal bordo della scheda. La misura e' un minimo, e il testo puo' allungarla. */ .dreammm .pf-lav{min-height:clamp(230px,58vw,330px); display:flex;flex-direction:column;justify-content:flex-end} .dreammm .pf-lav__corpo{position:relative;left:auto;right:auto;bottom:auto} .dreammm .pf-lav__nome{font-size:20px} .dreammm .pf-lav__riga{font-size:13.5px} } @media (max-width:1180px) and (min-width:901px){ .dreammm .pf-riga--due, .dreammm .pf-riga--rovescia{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ .dreammm .pf-lav__foto{transition:none} } /* ========================================================================== LA SCHEDA DI UN LAVORO Una forma sola per tutti i tipi di progetto: la spina e' fissa e ogni blocco dopo la scheda tecnica compare solo se e' stato compilato. I lavori non sono tutti uguali -- alcuni sono siti, altri solo SEO, altri solo campagne -- e tre modelli diversi si sarebbero rotti al primo lavoro che e' due cose insieme. Tutta la pagina sta sul fondo scuro: qui le fotografie sono il contenuto, e su un fondo chiaro perderebbero la meta' della forza. I blocchi si separano con i riquadri e con le righe sottili, non cambiando colore. ========================================================================== */ /* Tutta la pagina e' scura, e due sezioni scure di fila sommavano i loro 140px sopra e sotto: 280px di vuoto fra un blocco e l'altro, che su una pagina senza cambi di colore si legge come una pagina piena di buchi. */ .dreammm.dreammm--lavoro .dm-scura{padding-block:clamp(52px,6.4vw,92px)} .dreammm.dreammm--lavoro .lv-testata{padding:0} .dreammm--lavoro{ --lv-acc:#C8F904; --lv-riga:rgba(255,255,255,.13); --lv-carta:rgba(255,255,255,.045); --lv-eti:rgba(255,255,255,.52); --lv-testo:rgba(255,255,255,.74)} /* --- La testata: il nome sta sopra la fotografia, non accanto ----------- */ .dreammm .lv-testata{position:relative;display:flex;align-items:flex-end; min-height:clamp(440px,74vh,720px);overflow:hidden;isolation:isolate} .dreammm .lv-testata__foto{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:-2} .dreammm .lv-testata::after{content:"";position:absolute;inset:0;z-index:-1; pointer-events:none; background: linear-gradient(180deg,rgba(8,12,20,.72) 0%,rgba(8,12,20,.28) 26%, rgba(8,12,20,.55) 62%,rgba(8,12,20,.9) 88%,rgba(8,12,20,.97) 100%), linear-gradient(90deg,rgba(8,12,20,.5),rgba(8,12,20,0) 62%)} .dreammm .lv-testata__corpo{position:relative;width:100%; padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(38px,5vh,66px)} .dreammm .lv-indietro{display:inline-flex;align-items:center;gap:8px; margin-bottom:clamp(18px,3vh,34px); font-family:var(--dm-display);font-size:13px;font-weight:600; color:rgba(255,255,255,.72);text-decoration:none; transition:color .25s ease} .dreammm .lv-indietro:hover{color:var(--lv-acc)} .dreammm .lv-tag{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px} .dreammm .lv-tag b{font-family:var(--dm-display);font-size:10px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.9); line-height:1;padding:6px 11px;border-radius:999px; border:1px solid rgba(255,255,255,.34);background:rgba(10,14,22,.42)} /* Il nome del cliente non e' un titolo di pagina qualsiasi: alcuni sono lunghi ("Studio dentistico Forin"), e a misura piena riempivano la larghezza intera. Meglio due righe corte che una riga smisurata. */ .dreammm .lv-nome{margin:0;max-width:16ch;color:#fff; font-size:clamp(38px,6.6vw,96px);line-height:1.02;letter-spacing:-.03em} .dreammm .lv-sommario{max-width:44ch;margin-top:14px;color:rgba(255,255,255,.82)} .dreammm .lv-vai{margin-top:clamp(20px,3vh,30px)} /* --- La scheda tecnica --------------------------------------------------- */ .dreammm .lv-scheda__griglia{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,80px);align-items:start} /* Finche' il paragrafo non c'e', la scheda tecnica sta da sola: due colonne con una vuota sono mezza pagina di niente. */ .dreammm .lv-scheda__griglia--sola{grid-template-columns:1fr;max-width:640px} .dreammm .lv-dati{margin:0;display:flex;flex-direction:column;gap:16px} .dreammm .lv-dati > div{display:grid;grid-template-columns:9rem minmax(0,1fr); gap:14px;padding-bottom:16px;border-bottom:1px solid var(--lv-riga)} .dreammm .lv-dati > div:last-child{border-bottom:0;padding-bottom:0} .dreammm .lv-dati dt{margin:0;font-family:var(--dm-display);font-size:10.5px; font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--lv-eti);line-height:1.6} .dreammm .lv-dati dd{margin:0;font-size:clamp(14px,1vw,15.5px); line-height:1.6;color:#fff} .dreammm .lv-intro__testo{margin:0;font-size:clamp(15px,1.15vw,18px); line-height:1.62;color:var(--lv-testo)} /* La riga in evidenza: la marca lime a sinistra, non il fondo -- il testo deve restare chiaro su scuro come tutto il resto. */ .dreammm .lv-tesi{margin:22px 0 0;padding-left:18px; border-left:3px solid var(--lv-acc); font-family:var(--dm-display);font-weight:700; font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:#fff} /* --- I capitoli ---------------------------------------------------------- */ .dreammm .lv-cap{display:grid;gap:clamp(24px,3.4vw,54px)} .dreammm .lv-cap--2{grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .lv-cap--3{grid-template-columns:repeat(3,minmax(0,1fr))} .dreammm .lv-cap__voce{position:relative;padding-left:clamp(20px,2.4vw,34px)} .dreammm .lv-cap__voce::before{content:"";position:absolute;left:0;top:4px; bottom:4px;width:1px;background:var(--lv-riga)} .dreammm .lv-cap__voce:first-child::before{background:var(--lv-acc);opacity:.5} .dreammm .lv-cap__voce h2{margin:0 0 14px;font-family:var(--dm-display); font-weight:800;font-size:clamp(19px,1.6vw,25px);line-height:1.15;color:#fff} .dreammm .lv-cap__testo{font-size:clamp(13.5px,1vw,15.5px);line-height:1.68; color:var(--lv-testo)} .dreammm .lv-cap__testo p{margin:0 0 .9em} .dreammm .lv-cap__testo p:last-child{margin-bottom:0} /* --- Prima e dopo -------------------------------------------------------- */ .dreammm .lv-duefoto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px);margin-top:clamp(24px,3vw,40px)} .dreammm .lv-duefoto figure{margin:0} .dreammm .lv-duefoto img{display:block;width:100%;height:auto; border-radius:14px;border:1px solid var(--lv-riga)} .dreammm .lv-duefoto figcaption{margin-top:10px;font-family:var(--dm-display); font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--lv-eti)} .dreammm .lv-duefoto figure:last-child figcaption{color:var(--lv-acc)} /* --- Le prove: la prima immagine e' la piu' grande ----------------------- */ .dreammm .lv-galleria{display:grid;gap:clamp(14px,1.8vw,24px); grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .lv-galleria--1{grid-template-columns:1fr} .dreammm .lv-galleria--3, .dreammm .lv-galleria--4{grid-template-columns:repeat(4,minmax(0,1fr))} .dreammm .lv-galleria--3 figure:first-child, .dreammm .lv-galleria--4 figure:first-child{grid-column:span 4} .dreammm .lv-galleria--3 figure:nth-child(2), .dreammm .lv-galleria--3 figure:nth-child(3){grid-column:span 2} .dreammm .lv-galleria--4 figure:nth-child(n+2){grid-column:span 2} .dreammm .lv-galleria--4 figure:nth-child(n+4){grid-column:span 4} .dreammm .lv-galleria figure{margin:0;overflow:hidden;border-radius:14px; border:1px solid var(--lv-riga);background:var(--lv-carta)} .dreammm .lv-galleria img{display:block;width:100%;height:auto} /* --- I risultati --------------------------------------------------------- */ .dreammm .lv-risultati__griglia{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,64px);align-items:start} .dreammm .lv-risultati__griglia--sola{grid-template-columns:1fr;max-width:62ch} .dreammm .lv-risultati__testo h2{margin:0 0 16px} .dreammm .lv-numeri{display:grid;gap:clamp(12px,1.4vw,18px); grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .lv-numeri--1{grid-template-columns:1fr} /* Sempre due colonne, tranne quando il valore e' uno solo. Con tre valori la riga andava a tre, e togliere un dato da una scheda ne cambiava la misura a tutte: le stesse schede diventavano piu' strette, il numero piu' piccolo, e due progetti messi a confronto non si somigliavano piu'. La misura di una scheda non deve dipendere da quanti dati siamo riusciti a recuperare. Con due colonne, tre valori fanno due piu' uno. */ .dreammm .lv-numeri--3{grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .lv-num{display:flex;flex-direction:column; padding:clamp(16px,1.6vw,22px);border-radius:16px; border:1px solid var(--lv-riga);background:var(--lv-carta)} .dreammm .lv-num b{font-family:var(--dm-display);font-weight:800; font-size:clamp(26px,2.9vw,40px);line-height:1;color:#fff; font-variant-numeric:tabular-nums} .dreammm .lv-num__eti{margin-top:9px;font-family:var(--dm-display); font-size:clamp(12px,.95vw,13.5px);font-weight:600;color:rgba(255,255,255,.8)} /* La riga che rende credibile il numero. Sta sempre sotto l'etichetta, e in grigio: e' una fonte, non un vanto. */ .dreammm .lv-num__nota{margin-top:6px;font-size:11.5px;line-height:1.45; color:var(--lv-eti)} .dreammm .lv-num__curva{display:block;width:100%;height:34px;margin-top:14px; overflow:visible} .dreammm .lv-num__curva path{fill:none;stroke:var(--lv-acc);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* --- La voce del cliente ------------------------------------------------- */ .dreammm .lv-citazione{margin:0;max-width:34ch; padding-left:clamp(20px,2.4vw,34px);border-left:3px solid var(--lv-acc)} .dreammm .lv-citazione p{margin:0;font-family:var(--dm-display);font-weight:700; font-size:clamp(20px,2.3vw,32px);line-height:1.3;color:#fff} .dreammm .lv-citazione cite{display:block;margin-top:16px;font-style:normal; font-size:13px;color:var(--lv-eti)} @media (max-width:980px){ .dreammm .lv-scheda__griglia, .dreammm .lv-risultati__griglia{grid-template-columns:1fr; gap:clamp(24px,4vw,36px)} .dreammm .lv-cap--3{grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .lv-galleria--3, .dreammm .lv-galleria--4{grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .lv-galleria--3 figure:first-child, .dreammm .lv-galleria--4 figure:first-child, .dreammm .lv-galleria--4 figure:nth-child(n+4){grid-column:span 2} .dreammm .lv-galleria--3 figure:nth-child(2), .dreammm .lv-galleria--3 figure:nth-child(3), .dreammm .lv-galleria--4 figure:nth-child(n+2){grid-column:span 1} } @media (max-width:680px){ .dreammm .lv-testata{min-height:clamp(400px,68vh,560px)} .dreammm .lv-cap, .dreammm .lv-cap--2, .dreammm .lv-cap--3{grid-template-columns:1fr} .dreammm .lv-numeri, .dreammm .lv-numeri--3{grid-template-columns:1fr} .dreammm .lv-duefoto{grid-template-columns:1fr} .dreammm .lv-galleria, .dreammm .lv-galleria--3, .dreammm .lv-galleria--4{grid-template-columns:1fr} .dreammm .lv-galleria figure{grid-column:auto !important} .dreammm .lv-dati > div{grid-template-columns:1fr;gap:4px} } /* --- La chiusura, come in tutto il resto del sito ----------------------- Le pagine servizio, Cosa facciamo, Territorio e Progetto ONLUS hanno la chiamata finale a 86px e non maiuscola. L'elenco dei progetti e la scheda di un lavoro erano rimasti alla vecchia misura -- 124px, maiuscola -- e in mezzo alle altre si vedeva. La regola sta qui una volta sola, e vale anche per le pagine che oggi la portano scritta a mano nell'attributo style. */ .dreammm .dm-finale h2{font-size:clamp(34px,6vw,86px)} /* ========================================================================== LE SCHEDE DEL MAGAZINE Erano un'immagine appoggiata sul bianco con sotto tre righe di testo: niente riquadro, niente bordo, niente che succedesse all'over. Adesso hanno la stessa cura delle schede dei progetti. Con una differenza voluta: nei progetti il testo sta *dentro* la fotografia, qui sta sotto. Le copertine degli articoli hanno gia' il titolo disegnato dentro, e sovrapporgliene un altro sarebbe illeggibile. Le stesse schede compaiono su fondo scuro (l'elenco, gli argomenti) e su fondo chiaro (in fondo a un articolo): i colori arrivano dai tratti del contenitore, uno per fondo. ========================================================================== */ .dreammm .dm-articoli{ --mg-carta:#fff; --mg-bordo:#E2E7EE; --mg-bordo-on:rgba(105,103,251,.5); --mg-titolo:#0E1A1F; --mg-testo:#5A6570; --mg-eti:#8A9AA5; --mg-acc:#6967FB; --mg-acc-testo:#fff; --mg-ombra:0 16px 36px rgba(16,26,46,.11)} .dreammm .dm-scura .dm-articoli{ --mg-carta:rgba(255,255,255,.05); --mg-bordo:rgba(255,255,255,.13); --mg-bordo-on:rgba(200,249,4,.42); --mg-titolo:#fff; --mg-testo:rgba(255,255,255,.7); --mg-eti:rgba(255,255,255,.5); --mg-acc:#C8F904; --mg-acc-testo:#0B1017; --mg-ombra:0 20px 46px rgba(0,0,0,.4)} .dreammm .mg-art{display:block} .dreammm .mg-art > a{display:flex;flex-direction:column;height:100%; overflow:hidden;border-radius:16px;text-decoration:none;color:inherit; background:var(--mg-carta);border:1px solid var(--mg-bordo); transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease} .dreammm .mg-art__foto{display:block;overflow:hidden;aspect-ratio:16/10; background:rgba(0,0,0,.22)} .dreammm .mg-art__foto img{display:block;width:100%;height:100%; object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)} .dreammm .mg-art__corpo{display:flex;flex-direction:column;flex:1; padding:clamp(15px,1.5vw,22px)} .dreammm .mg-art__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px; font-family:var(--dm-display);font-weight:700;font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--mg-eti)} .dreammm .mg-art__cat{color:var(--mg-acc);font-weight:700} .dreammm .mg-art__titolo{margin:11px 0 0;font-family:var(--dm-display); font-weight:800;font-size:clamp(17px,1.35vw,20px);line-height:1.22; letter-spacing:-.024em;color:var(--mg-titolo);text-wrap:balance; transition:color .35s ease} .dreammm .mg-art__estratto{display:block;margin-top:9px; font-size:clamp(13px,1vw,14.5px);line-height:1.55;color:var(--mg-testo)} /* Il piede sta in fondo alla scheda anche quando i titoli hanno righe diverse: senza questo le frecce ballavano di riga in riga. */ .dreammm .mg-art__piede{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-top:auto;padding-top:15px; border-top:1px solid var(--mg-bordo)} .dreammm .mg-art__leggi{font-family:var(--dm-display);font-weight:700; font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--mg-eti);transition:color .3s ease} .dreammm .mg-freccia{display:grid;place-items:center;flex:none;width:34px; aspect-ratio:1;border-radius:50%;border:1px solid var(--mg-bordo); color:var(--mg-titolo); transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease} .dreammm .mg-freccia svg{width:46%;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){ .dreammm .mg-art > a:hover{transform:translateY(-4px); border-color:var(--mg-bordo-on);box-shadow:var(--mg-ombra)} .dreammm .mg-art > a:hover .mg-art__foto img{transform:scale(1.05)} .dreammm .mg-art > a:hover .mg-art__titolo{color:var(--mg-acc)} .dreammm .mg-art > a:hover .mg-art__leggi{color:var(--mg-titolo)} .dreammm .mg-art > a:hover .mg-freccia{background:var(--mg-acc); border-color:var(--mg-acc);color:var(--mg-acc-testo);transform:translateX(3px)} } .dreammm .mg-art > a:focus-visible{outline:2px solid var(--mg-acc);outline-offset:3px} /* --- I filtri e le pagine, sul fondo scuro ------------------------------ Erano disegnati per il bianco: su scuro il testo spariva. */ .dreammm .dm-scura .dm-filtro, .dreammm .dm-scura .page-numbers{color:rgba(255,255,255,.78); border-color:rgba(255,255,255,.2)} .dreammm .dm-scura .dm-filtro:hover, .dreammm .dm-scura .page-numbers:hover{border-color:#C8F904;color:#C8F904} .dreammm .dm-scura .dm-filtro.att, .dreammm .dm-scura .page-numbers.current{background:#C8F904; border-color:#C8F904;color:#0B1017} .dreammm .dm-scura .page-numbers.dots{border-color:transparent} /* --- La colonna di un articolo ----------------------------------------- Larga come il resto del sito: il testo comincia dove comincia il titolo della testata, non dentro una striscia in mezzo alla pagina. Il limite vero non era il nostro contenitore ma i **blocchi di WordPress**, fermi a 589px: senza toglierlo, allargare il contenitore non sposta di un pixel i paragrafi. La riga viene lunga, e va bene cosi': sono articoli informativi, e la scelta e' di Gian Luca. */ .dreammm .dm-wrap--articolo .dm-articolo{font-size:17.5px;line-height:1.72} .dreammm .dm-wrap--articolo .dm-articolo > *{max-width:100%} .dreammm .dm-wrap--articolo .dm-articolo img, .dreammm .dm-wrap--articolo .dm-articolo figure{max-width:100%} @media (max-width:900px){ .dreammm .dm-wrap--articolo .dm-articolo{font-size:16.5px;line-height:1.68} } /* ========================================================================== LA PAGINA DEI CONTATTI I contenuti sono quelli di prima. Cambia dove stanno. La cosa principale: "che cosa succede dopo" non e' piu' nella colonna di lato, in corpo dieci, sotto l'indirizzo. E' il pezzo che toglie l'ansia di scrivere a uno sconosciuto, e adesso ha una sezione sua, larga quanto la pagina, con la stessa forma dei passi del Metodo. I fondi si alternano come in tutto il resto del sito: modulo sul chiaro, passi sullo scuro, domande sul chiaro. Quindi ogni pezzo qui sotto ha due vestiti -- il chiaro e' quello di partenza, lo scuro la variante -- e le stesse schede compaiono su tutti e due i fondi nella stessa pagina. ========================================================================== */ .dreammm .cn-griglia, .dreammm .cn-passi{ --cn-acc:#5754E0; --cn-vel:rgba(87,84,224,.09); --cn-carta:#fff; --cn-bordo:#E2E7EE; --cn-riga:var(--linea-scura); --cn-forte:#0E1A1F; --cn-testo:#5A6570; --cn-muto:#7C8B95} .dreammm .dm-scura .cn-griglia, .dreammm .dm-scura .cn-passi{ --cn-acc:#C8F904; --cn-vel:rgba(200,249,4,.08); --cn-carta:rgba(255,255,255,.05); --cn-bordo:rgba(255,255,255,.13); --cn-riga:rgba(255,255,255,.14); --cn-forte:#fff; --cn-testo:rgba(255,255,255,.72); --cn-muto:rgba(255,255,255,.5)} .dreammm .cn-griglia{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); gap:clamp(22px,3vw,52px);align-items:start} /* --- Il pannello del modulo --------------------------------------------- */ .dreammm .cn-modulo{padding:clamp(20px,2.6vw,38px);border-radius:20px; border:1px solid var(--cn-bordo); background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(246,248,252,.86)); box-shadow:0 14px 40px rgba(20,30,60,.06)} /* Sullo scuro il pannello e' opaco, non velato: la sezione avrebbe il campo di stelle dietro, e con un pannello trasparente le stelle si vedrebbero *dentro* i campi da compilare. Un campo di testo dev'essere una superficie. */ .dreammm .dm-scura .cn-modulo{background:#121B29;box-shadow:none} .dreammm .dm-scura .cn-modulo .dm-modulo label{color:rgba(255,255,255,.66)} .dreammm .dm-scura .cn-modulo .dm-modulo label span{color:var(--cn-acc)} .dreammm .dm-scura .cn-modulo .dm-modulo input, .dreammm .dm-scura .cn-modulo .dm-modulo textarea, .dreammm .dm-scura .cn-modulo .dm-modulo select{ background:#0D1420;border-color:rgba(255,255,255,.17);color:#fff} .dreammm .dm-scura .cn-modulo .dm-modulo input::placeholder, .dreammm .dm-scura .cn-modulo .dm-modulo textarea::placeholder{ color:rgba(255,255,255,.42)} .dreammm .dm-scura .cn-modulo .dm-modulo input:focus, .dreammm .dm-scura .cn-modulo .dm-modulo textarea:focus, .dreammm .dm-scura .cn-modulo .dm-modulo select:focus{ border-color:var(--cn-acc);box-shadow:0 0 0 4px rgba(200,249,4,.16)} .dreammm .dm-scura .cn-modulo .dm-modulo__nota.dm-modulo__nota{color:var(--cn-muto)} .dreammm .dm-scura .cn-modulo .dm-modulo__nota a{color:rgba(255,255,255,.8); text-decoration:underline;text-underline-offset:3px} .dreammm .dm-scura .cn-modulo .dm-modulo__esito.dm-modulo__esito{color:var(--cn-acc)} .dreammm .dm-scura .cn-modulo .dm-modulo__esito.dm-modulo__esito.male{color:#FF8A7A} /* --- Le schede dei recapiti ---------------------------------------------- */ .dreammm .cn-lato{display:grid;gap:clamp(14px,1.6vw,20px)} .dreammm .cn-scheda{padding:clamp(18px,2vw,26px);border-radius:18px; background:var(--cn-carta);border:1px solid var(--cn-bordo)} .dreammm .cn-segno{display:grid;place-items:center;width:38px;aspect-ratio:1; border-radius:11px;border:1px solid var(--cn-bordo); background:var(--cn-vel);color:var(--cn-acc);margin-bottom:16px} .dreammm .cn-segno svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .dreammm .cn-eti{margin:0 0 10px;font-family:var(--dm-display);font-weight:800; font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--cn-muto)} .dreammm .cn-tel{display:inline-block;font-family:var(--dm-display);font-weight:800; font-size:clamp(24px,2.5vw,32px);letter-spacing:-.03em;line-height:1.1; color:var(--cn-forte);text-decoration:none;transition:color .3s ease} .dreammm .cn-tel:hover{color:var(--cn-acc)} .dreammm .cn-mail{display:inline-flex;align-items:center;gap:9px;margin-top:12px; font-size:15px;color:var(--cn-testo);text-decoration:none; transition:color .3s ease} .dreammm .cn-mail svg{width:17px;flex:none;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .dreammm .cn-mail:hover{color:var(--cn-acc)} .dreammm .cn-dove{margin:0;font-size:15.5px;line-height:1.65;color:var(--cn-forte)} .dreammm .cn-nota{margin:12px 0 0;font-size:13.5px;line-height:1.55; color:var(--cn-muto)} /* --- Che cosa succede dopo ----------------------------------------------- La stessa forma dei passi del Metodo: numero, riga sopra che li lega, titolo, testo. Quattro in fila stanno larghi; sotto i 1100 vanno a due, e sul telefono uno per riga. */ .dreammm .cn-passi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.2vw,34px);margin:clamp(28px,3.4vw,48px) 0 0;padding:0; list-style:none} .dreammm .cn-passo{position:relative;padding-top:20px; border-top:1px solid var(--cn-riga)} .dreammm .cn-passo:first-child{border-top-color:var(--cn-acc)} .dreammm .cn-passo__n{display:block;font-family:var(--dm-display);font-weight:900; font-size:13px;letter-spacing:.08em;color:var(--cn-acc);margin-bottom:10px; font-variant-numeric:tabular-nums} .dreammm .cn-passo h3{margin:0;font-family:var(--dm-display);font-weight:800; font-size:clamp(16px,1.35vw,19px);line-height:1.22;letter-spacing:-.02em; color:var(--cn-forte);text-wrap:balance} .dreammm .cn-passo p{margin:9px 0 0;font-size:clamp(13.5px,1vw,14.5px); line-height:1.58;color:var(--cn-testo)} @media (max-width:1100px){ .dreammm .cn-griglia{grid-template-columns:1fr} .dreammm .cn-lato{grid-template-columns:repeat(2,minmax(0,1fr))} .dreammm .cn-passi{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:680px){ .dreammm .cn-lato, .dreammm .cn-passi{grid-template-columns:1fr} } /* ========================================================================== I PEZZI DI DREAMMM DENTRO ELEMENTOR La spina di una scheda progetto resta un template. Il centro si compone, e i widget disegnano con lo stesso CSS dei componenti del tema: non sono una seconda versione, sono gli stessi. Due cose servono perche' funzionino dentro il contenitore di Elementor. ========================================================================== */ /* La prima: un widget deve sapere su che fondo sta, perche' i nostri componenti hanno due vestiti. Ma la classe del fondo porta con se' anche lo sfondo e i margini della sezione, e li' quelli li mette Elementor. "dm-nudo" tiene i tratti del vestito e toglie il resto. */ .dreammm .dm-nudo{background:none;padding:0;margin:0;min-height:0} /* La seconda: il fondo della sezione -- le stelle o i quadretti -- e' uno strato dietro al contenuto, non un elemento in fila con gli altri. */ .dreammm .elementor-widget-dm-fondo{position:absolute;inset:0;z-index:0; pointer-events:none;margin:0} .dreammm .elementor-widget-dm-fondo > .elementor-widget-container{height:100%} .dreammm .dm-fondo{position:absolute;inset:0;display:block;overflow:hidden} .dreammm .dm-fondo > *{position:absolute;inset:0} /* Il contenitore che ha un fondo dentro diventa il riferimento dello strato, e tutto il resto gli sta sopra. Senza questo il fondo coprirebbe il testo. */ .dreammm .e-con:has(> .elementor-element > .elementor-widget-dm-fondo), .dreammm .e-con:has(> .elementor-widget-dm-fondo){position:relative;overflow:hidden} .dreammm .e-con:has(> .elementor-widget-dm-fondo) > .elementor-element:not(.elementor-widget-dm-fondo){ position:relative;z-index:1} /* Il centro componibile della scheda: Elementor decide le larghezze, noi solo che non tocchi i bordi dello schermo. */ .dreammm .lv-centro{position:relative} .dreammm .lv-centro .e-con{--content-width:1210px} /* --- I widget di Elementor dentro le nostre sezioni ---------------------- Elementor non sa in che sezione e' finito il suo widget: prende i colori dal kit, che sono quelli del chiaro. Su una sezione scura un titolo esce scuro su scuro, e non si legge. Qui non decidiamo il colore, diciamo solo "sei sullo scuro". Se su un singolo elemento serve un colore diverso, basta dargli la classe dm-suo-colore nella scheda Avanzate e queste regole si fanno da parte. */ .dreammm .dm-scura .elementor-element:not(.dm-suo-colore) .elementor-heading-title, .dreammm .dm-scura .elementor-element:not(.dm-suo-colore).elementor-widget-text-editor, .dreammm .dm-scura .elementor-element:not(.dm-suo-colore) .elementor-icon-list-text, .dreammm .dm-scura .elementor-element:not(.dm-suo-colore) .elementor-image-box-title{ color:#fff} .dreammm .dm-scura .elementor-element:not(.dm-suo-colore).elementor-widget-text-editor p, .dreammm .dm-scura .elementor-element:not(.dm-suo-colore).elementor-widget-text-editor li{ color:rgba(255,255,255,.74)} .dreammm .dm-scura .elementor-element:not(.dm-suo-colore) a:not(.elementor-button){ color:#C8F904} /* I titoli dentro le sezioni composte prendono la scala del sito: senza questo un h2 di Elementor sarebbe grande la meta' di uno nostro. */ .dreammm .lv-centro .elementor-heading-title{font-family:var(--dm-display); font-weight:800;letter-spacing:-.025em;line-height:1.06; text-wrap:balance} .dreammm .lv-centro h2.elementor-heading-title{font-size:clamp(30px,3.9vw,56px)} .dreammm .lv-centro h3.elementor-heading-title{font-size:clamp(19px,2.1vw,26px)} /* ========================================================================== IL VESTITO CHIARO DEI PEZZI DI UN LAVORO I componenti di una scheda progetto -- i capitoli, i numeri, la citazione -- sono nati per le sezioni scure, e il loro colore stava scritto una volta sola: bianco, a mano, non preso da una variabile. Dentro Elementor pero' il widget offre anche "Chiaro", e sul chiaro uscivano bianchi su bianco: titoli invisibili, numeri invisibili. Il testo del corpo si leggeva -- quello la variabile ce l'aveva -- quindi la pagina sembrava a posto a chi la scorreva veloce. Un'opzione che non funziona e' peggio di un'opzione che non c'e', perche' il danno si vede solo a pagina pubblicata. Qui il vestito chiaro esiste davvero. ========================================================================== */ .dreammm .dm-chiara.dm-nudo, .dreammm .dm-chiara .dm-nudo{ --lv-acc:#5754E0; --lv-riga:rgba(14,26,31,.13); --lv-carta:rgba(14,26,31,.032); --lv-eti:rgba(14,26,31,.56); --lv-testo:#3D4A52} /* I punti in cui il bianco era scritto a mano. Sono solo questi: il resto dei pezzi prende gia' il colore dalle variabili qui sopra. */ .dreammm .dm-chiara .lv-cap__voce h2, .dreammm .dm-chiara .lv-num b, .dreammm .dm-chiara .lv-citazione p, .dreammm .dm-chiara .lv-dati dd{color:#0E1A1F} .dreammm .dm-chiara .lv-num__eti{color:rgba(14,26,31,.8)} /* Il respiro sopra e sotto: nel tema era scritto solo per le sezioni scure, perche' una scheda progetto le aveva solo scure. Adesso che il chiaro c'e' davvero, senza questa riga il testo partiva incollato al bordo. */ .dreammm.dreammm--lavoro .dm-chiara{padding-block:clamp(52px,6.4vw,92px)} /* ========================================================================== I CAPITOLI E I NUMERI DIVENTANO SCHEDE Prima i capitoli erano tre colonne di testo separate da una riga sottile. A schermo la riga non bastava a farne delle unita': si leggevano come un testo unico andato a capo tre volte, e intorno restava l'alone del fondo che sembrava il bordo di una scheda mai disegnata. Adesso la scheda c'e'. I numeri erano gia' riquadri, ma spenti: il valore aveva lo stesso colore del titolo, quindi la parte piu' importante della pagina non si distingueva dal resto. Il valore prende l'accento. ========================================================================== */ .dreammm .lv-cap{gap:clamp(16px,1.6vw,22px)} .dreammm .lv-cap__voce{ padding:clamp(22px,2.2vw,32px); border-radius:18px; border:1px solid var(--lv-riga); background:var(--lv-carta)} /* La riga verticale era il segno che teneva insieme la colonna. Adesso il bordo fa quel lavoro, e la riga diventerebbe rumore. */ .dreammm .lv-cap__voce::before{display:none} /* Il titolo del capitolo prende un segno d'accento sopra, corto: e' quello che dice "qui comincia un capitolo" senza aggiungere una parola. */ .dreammm .lv-cap__voce h2{position:relative;padding-top:16px} .dreammm .lv-cap__voce h2::before{ content:"";position:absolute;left:0;top:0;width:26px;height:3px; border-radius:2px;background:var(--lv-acc)} /* I numeri: il valore e' la cosa per cui si e' arrivati fin qui. */ .dreammm .lv-num{border-color:var(--lv-riga)} .dreammm .lv-num b{color:var(--lv-acc)} /* Sul chiaro il lime non si legge: l'accento diventa il viola del marchio. La regola sta gia' nel vestito chiaro, qui basta ricordarsene per i numeri che hanno il fondo proprio. */ .dreammm .dm-chiara .lv-num b{color:var(--lv-acc)} /* --- L'alone tagliato --------------------------------------------------- Il fondo chiaro ha un gradiente che respira: sborda del 20% e si ingrandisce fino a 1.12. Nelle sezioni del tema non si vede, perche' niente lo taglia. Dentro Elementor invece il contenitore ha overflow nascosto -- gli serve per tenere dentro lo strato del fondo -- e il bordo del ritaglio diventa un rettangolo chiaro che si muove piano. Sembra una scheda, ma non lo e'. Qui il gradiente sta fermo e dentro i suoi bordi. */ .dreammm .lv-centro .e-con.dm-chiara::after{inset:0;animation:none} /* E il velo va tolto anche al widget. Il widget porta la classe del fondo per sapere che vestito indossare, ma la classe si porta dietro il gradiente della sezione: cosi' il velo veniva dipinto due volte, una dal contenitore e una dal widget dentro di lui. Il secondo e' piu' piccolo, quindi si vedevano i suoi bordi: un rettangolo chiaro che sembrava una scheda mai disegnata. Era quello l'alone. */ .dreammm:not(.h2) .dm-chiara.dm-nudo::after, .dreammm:not(.h2) .dm-scura.dm-nudo::after, .dreammm .dm-nudo::after{display:none} /* Stessa storia per lo sfondo. "dm-nudo" lo toglieva con due classi, ma la regola che lo mette ne ha tre: vinceva quella, e il widget dipingeva un rettangolo bianco pieno sopra il velo della sezione. Il rettangolo si vedeva perche' e' piu' stretto della sezione. Qui il peso e' pari e questa viene dopo, quindi passa. */ .dreammm:not(.h2) .dm-chiara.dm-nudo, .dreammm:not(.h2) .dm-scura.dm-nudo, .dreammm.dreammm--lavoro .dm-chiara.dm-nudo, .dreammm.dreammm--lavoro .dm-scura.dm-nudo{ background:none;padding:0;margin:0;min-height:0} /* ========================================================================== CONTRASTI E AREE DA TOCCARE Tutti i valori qui sotto vengono da una misura fatta sul sito servito, non da un giudizio a occhio: il rapporto di contrasto e' calcolato sul colore di sfondo vero, risalendo finche' non se ne trova uno davvero opaco. La soglia e' 4,5:1 per il testo e 3:1 per il confine di un controllo. Sotto quel numero non e' che si legge male: non si legge, e chi ha una vista normale non se ne accorge perche' sa gia' cosa c'e' scritto. ========================================================================== */ /* Il viola del marchio a 4,26:1 non basta per il testo. Ne esiste gia' uno piu' scuro nel sistema, #5754E0, che su bianco misura 5,60:1: e' quello giusto per i link nel corpo. Il viola chiaro resta buono per fondi e superfici, dove il minimo e' 3:1. Riguarda ogni link dentro gli articoli. */ .dreammm .dm-articolo a, .dreammm .mg-art a, .dreammm .dm-testo a, .dreammm .lv-cap__testo a, .dreammm .dm-piombo a{color:#5754E0} /* L'asterisco dei campi obbligatori: e' aria-hidden, quindi per chi usa un lettore di schermo ci pensa l'attributo required. Ma per chi vede e' l'unico segnale che quel campo serve, quindi il contrasto conta lo stesso. Stava a 4,26:1 a 12px. */ .dreammm label > span[aria-hidden="true"], .dreammm .dm-modulo .dm-obbligatorio, .dreammm .dm-modulo abbr[title]{color:#4B48D6} /* Le etichette dei link fra un articolo e l'altro erano a 2,90:1, a 11,5px. A quel corpo non c'e' sconto: serve la soglia piena. */ .dreammm .mg-art__leggi, .dreammm .dm-vicino > span{color:#5A6570} /* Il piede: la riga legale stava a 3,98:1 su tutte le 27 pagine. Il bianco pieno sullo stesso viola arriva a 4,98:1 e non cambia niente d'aspetto. */ .dreammm-piede .dm-piede__legale span, .dm-piede .dm-piede__legale span, footer .dm-piede__legale span{color:#fff} /* Le etichette del grafico in home erano a 3,09:1 con un corpo da 10px. Nel testo SVG conta l'attributo fill, non color: misurando color si legge un valore falso di 1,05:1. */ .dreammm #dm-grafico-anim text.h2-pc__eti{fill:rgba(255,255,255,.60);font-size:11.5px} /* --- Le aree da toccare --------------------------------------------------- Sul telefono un comando sotto i 40px si sbaglia. Il numero di telefono e l'indirizzo di posta sulla pagina contatti sono le due azioni principali di quella pagina e stavano a 24 e 26px di altezza. */ @media (max-width:900px){ .dreammm .cn-tel, .dreammm .cn-mail, .dreammm .lv-tutti, .dreammm .lv-indietro{min-height:44px;display:inline-flex;align-items:center} } .dreammm .vt-freccia{min-width:44px;min-height:44px} /* La casella del consenso nei moduli era 13x13: sotto i 24x24 che WCAG 2.2 chiede, e molto sotto quello che serve a un dito. */ .dreammm input[type=checkbox], .dreammm .elementor-field-type-acceptance input[type=checkbox]{ width:24px;height:24px;min-width:24px;accent-color:#5754E0} /* Il bordo dei campi era a 1,31:1 su bianco: con luce forte non si vede dove finisce il campo. La soglia per il confine di un controllo e' 3:1. */ .dreammm .dm-modulo input, .dreammm .dm-modulo textarea, .dreammm .dm-modulo select, .dreammm .elementor-field-group input, .dreammm .elementor-field-group textarea{border-color:#8C94A0} /* ========================================================================== RIFINITURE SUL TELEFONO DELL'11 SETTEMBRE 2026 ========================================================================== */ /* --- La manina che dice che la fila scorre (vetrina.js) ------------------ */ .dreammm .vt-scorri{position:absolute;right:12px;top:36%;z-index:6; display:flex;align-items:center;gap:8px;padding:9px 14px 9px 11px; border-radius:999px;background:rgba(8,13,20,.78); border:1px solid rgba(200,249,4,.38);color:#fff;pointer-events:none; font-family:var(--dm-display);font-size:11px;letter-spacing:.16em; text-transform:uppercase;line-height:1; box-shadow:0 8px 24px rgba(0,0,0,.28);transition:opacity .4s ease} .dreammm .vt-scorri b{font-weight:800} .dreammm .vt-scorri svg{width:22px;height:22px;fill:none;stroke:var(--lime); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; animation:vt-scorri 1.9s cubic-bezier(.45,0,.3,1) infinite} @keyframes vt-scorri{ 0%{transform:translateX(9px);opacity:0} 15%{opacity:1} 60%{transform:translateX(-11px);opacity:1} 78%,100%{transform:translateX(-11px);opacity:0}} .dreammm .vt-scorri.e-via{opacity:0} @media (prefers-reduced-motion:reduce){ .dreammm .vt-scorri svg{animation:none} } /* --- La fascia dei numeri sul telefono ------------------------------------ Erano quattro scatole scure una sotto l'altra, con la cifra schiacciata contro il bordo alto e l'etichetta attaccata sotto. Ora quattro celle su due colonne, allineate a sinistra, e sopra ogni cifra un filo con il suo nodo: la linea con i nodi della versione larga, ridotta a un segno. */ @media (max-width:860px){ .dreammm:not(.h2) .dm-cifre{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px} .dreammm:not(.h2) .dm-cifre .dm-cifra{position:relative;display:block;background:none;overflow:visible; padding:20px 0 0;margin:0;border:0;border-top:1px solid rgba(255,255,255,.16);text-align:left} .dreammm:not(.h2) .dm-cifre .dm-cifra:hover{padding-left:0} .dreammm:not(.h2) .dm-cifre .dm-cifra::before{content:"";display:block;position:absolute;left:0;top:-5px;bottom:auto; width:9px;height:9px;border-radius:50%;transform:none; background:var(--lime);box-shadow:0 0 0 4px rgba(200,249,4,.14)} .dreammm:not(.h2) .dm-cifre .dm-cifra b{justify-self:start;text-align:left;padding:0; font-size:clamp(40px,12vw,56px);line-height:.95} .dreammm:not(.h2) .dm-cifre .dm-cifra span{justify-self:start;text-align:left;padding:0; margin-top:10px;max-width:18ch;font-size:14px;line-height:1.45} .dreammm:not(.h2) .dm-chiara .dm-cifre .dm-cifra, .dreammm:not(.h2) .dm-bianca .dm-cifre .dm-cifra{border-top-color:rgba(30,40,60,.16)} .dreammm:not(.h2) .dm-chiara .dm-cifre .dm-cifra::before, .dreammm:not(.h2) .dm-bianca .dm-cifre .dm-cifra::before{background:var(--viola-cupo); box-shadow:0 0 0 4px rgba(87,84,224,.14)} } @media (max-width:460px){ .dreammm:not(.h2) .dm-cifre{grid-template-columns:repeat(2,minmax(0,1fr))} } /* --- Le carte sul fondo chiaro, in tutti i modi --------------------------- L'ombra della carta e' pensata per il fondo scuro: nera al 50%, sfocata 50 pixel. La versione per il chiaro valeva solo per la carta al centro della pila in prospettiva (`.e-centro`), che sul telefono non esiste: li' restava l'ombra scura, una fascia grigia sopra il nome del cliente, tagliata di netto dal nastro che scorre. Sul computer la carta al centro tiene la sua regola, che e' piu' specifica. */ .dreammm .dm-chiara .vt-carta__foto, .dreammm .dm-bianca .vt-carta__foto, .dreammm .dm-superficie .vt-carta__foto{ box-shadow:0 8px 20px rgba(20,30,60,.10),0 0 0 1px rgba(20,30,45,.07)}