/* ============================================================ DAVID VALMORI — DESIGN SYSTEM (home definitiva, sintesi A+B+C) Base: variante A "Editoriale" (vincitrice). Innesti: B → griglia compatta "Quattro strade", chip a pillola, filosofia a tutta pagina, progress bar, parallax hero. C → doppia didascalia hero, marker puntiformi timeline, ritratto in colonna in "Chi sono". Palette: #0a0a0b / #101010 / #000 / bianco / #EC8666 (hover #ef9d80) Font: Gotham (corpo) · Bebas Neue (display) — via fonts.css locale. INDICE DEI BLOCCHI 01 · Token & reset 02 · Primitive editoriali (wrap, eyebrow, sec-head, h-display, lead) 03 · Bottoni 04 · Cornice foto (.frame) 05 · Reveal (solo html.js + motion gradito) 06 · Progress bar di lettura 07 · Header + menu mobile 08 · 01 Hero (+ doppia didascalia, parallax hook) 09 · 02 Chi sono (timeline puntiforme, ritratto fermo in colonna) 10 · 03 Metodo E.T.I.C.O. (+ card keyline coral) 11 · 04 A chi mi rivolgo (chip a pillola) 12 · 05 Quattro strade (griglia compatta 4-up) 13 · 06 Evento 14 · 07 Risultati (ledger, note sotto il nome) 15 · 08 Filosofia (momento isolato, tipografia pacata) 16 · 09 Contenuti 17 · 10 CTA finale 18 · Footer ============================================================ */ /* ============ 01 · TOKEN & RESET ============ */ :root{ --bg:#0a0a0b; --bg-2:#101010; --ink:#ffffff; --ink-70:rgba(255,255,255,.70); --ink-55:rgba(255,255,255,.55); --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.25); --coral:#EC8666; --coral-hi:#ef9d80; --coral-12:rgba(236,134,102,.12); --coral-35:rgba(236,134,102,.35); --font-body:"Gotham","Helvetica Neue",Helvetica,Arial,sans-serif; --font-display:"Bebas Neue","Arial Narrow",Impact,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); /* curva lunga e morbida: parte decisa e si posa piano, senza scatto finale */ --ease-soft:cubic-bezier(.16,1,.3,1); --pad:clamp(1.5rem,5vw,4.5rem); --max:1240px; --sec-y:clamp(4.75rem,10.2vh,8.5rem); /* respiro delle sezioni, accorciato del 14% */ } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} /* Quando si clicca una voce del menu la sezione non deve incollarsi al bordo alto: sotto la barra fissa ci vuole aria, se no la testatina finisce mezza coperta. Questo stacco vale per tutte le ancore della pagina. */ html{scroll-padding-top:76px} } /* ============ NIENTE SCORRIMENTO LATERALE, MAI ============ Regola di ferro: la pagina non si sposta di lato né da desktop né da telefono. La garanzia sta qui, sulla radice, e non nella speranza che ogni singolo elemento non sfori: se qualcosa esce, viene tagliato e basta. `clip` e non `hidden` perché hidden sulla radice crea un contenitore di scorrimento e manda in tilt gli elementi che si agganciano (position:sticky). `hidden` resta come rete per i browser vecchi che non conoscono `clip`. */ html,body{max-width:100%;overflow-x:hidden} @supports (overflow-x:clip){ html,body{overflow-x:clip} } body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:400; font-size:clamp(.9375rem,.9rem + .15vw,1.0625rem); line-height:1.75; -webkit-font-smoothing:antialiased; } ::selection{background:var(--coral);color:#0a0a0b} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul{list-style:none} :focus-visible{outline:2px solid var(--coral);outline-offset:3px} /* ============ 02 · PRIMITIVE EDITORIALI ============ */ .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)} .eyebrow{ font-family:var(--font-body);font-weight:700; font-size:.6875rem;letter-spacing:.38em;text-transform:uppercase; color:var(--coral); } .sec{padding-block:var(--sec-y);position:relative} .sec + .sec{border-top:1px solid var(--line-soft)} /* testata di sezione: numero · etichetta · linea */ .sec-head{ display:flex;align-items:baseline;gap:1.25rem; margin-bottom:clamp(2.35rem,5.1vw,3.8rem); } /* testatine di sezione: un filo più grandi, numero ed etichetta insieme così il rapporto fra i due resta quello di prima */ .sec-num{ font-family:var(--font-display);font-weight:400; font-size:1.18rem;letter-spacing:.14em; color:var(--coral); } /* Lo spazio fra le lettere resta quello scelto finché c'è posto: sotto i 523px di finestra si stringe da solo, in proporzione. Serve perché l'etichetta sta su una riga sola e le più lunghe ("Formazione, ricerca e studio") a 360px uscivano dallo schermo di 57px, allargando la pagina. Su desktop non cambia niente: lì .38em è sempre il valore più piccolo dei due. */ .sec-label{ font-weight:700;font-size:min(.775rem,2.9vw);letter-spacing:min(.38em,.45vw); text-transform:uppercase;color:var(--ink-55);white-space:nowrap; } .sec-head::after{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-.35em)} .h-display{ font-family:var(--font-display);font-weight:400; letter-spacing:.015em;line-height:.96; font-size:clamp(2.75rem,6.2vw,5.25rem); text-transform:uppercase; } .h-display em{font-style:normal;color:var(--coral)} .lead{color:var(--ink-70);max-width:56ch} /* ============ 03 · BOTTONI ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.7em; font-weight:700;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase; padding:1.05em 2.1em;border:1px solid transparent; transition:background-color .3s ease,color .3s ease,border-color .3s ease; cursor:pointer;white-space:nowrap; } /* schermi piccolissimi (iPhone SE di prima generazione, 320px): i bottoni stanno su una riga sola, e i più lunghi non ci entravano. Qui e solo qui respiro e spaziatura si stringono, quel tanto che basta. */ @media (max-width:340px){ .btn{padding-inline:1.3em;letter-spacing:.14em} } .btn-solid{background:var(--coral);color:#0a0a0b;border-color:var(--coral)} /* hover: il pieno si svuota, restano bordo e testo salmone */ .btn-solid:hover{background:transparent;border-color:var(--coral);color:var(--coral)} .btn-line{border-color:var(--line-strong);color:var(--ink)} .btn-line:hover{border-color:var(--coral);color:var(--coral)} .btn .arr{font-family:var(--font-body);font-weight:400;transition:transform .3s ease} .btn:hover .arr{transform:translateX(4px)} /* ============ 04 · CORNICE FOTO (mai full-bleed) ============ */ .frame{ position:relative;border:1px solid var(--line); padding:.625rem;background:var(--bg-2); } .frame img{width:100%;height:100%;object-fit:cover} /* involucro interno: e' lui a tagliare la foto che sborda per il movimento, cosi' la cornice non taglia il proprio angolo salmone */ .frame-in{display:block;position:relative;width:100%;height:100%;overflow:hidden} .frame figcaption{ position:absolute;left:.625rem;bottom:-1.9rem; font-size:.625rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase; color:var(--ink-55); } .frame::after{ /* segno d'angolo coral, dettaglio editoriale */ content:"";position:absolute;top:-1px;right:-1px;width:1.5rem;height:1.5rem; border-top:1px solid var(--coral);border-right:1px solid var(--coral); } /* ============ 05 · REVEAL — pattern no-JS ============ Gli stati nascosti valgono SOLO se il JS ha marcato e il motion è gradito: a JS spento la pagina è interamente visibile. */ @media (prefers-reduced-motion:no-preference){ html.js .rev{opacity:0;transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--d,0s)} html.js .rev.in{opacity:1;transform:none} } /* ============ 06 · PROGRESS BAR DI LETTURA (da B) ============ */ #progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:120; background:var(--coral);pointer-events:none; } @media (prefers-reduced-motion:reduce){#progress{display:none}} /* ============ 07 · HEADER + MENU MOBILE ============ */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:100; border-bottom:1px solid transparent; transition:background-color .35s ease,border-color .35s ease; } .hdr.on{background:rgba(10,10,11,.88);border-bottom-color:var(--line-soft);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .hdr-in{ max-width:var(--max);margin:0 auto;padding:1.1rem var(--pad); display:flex;align-items:center;justify-content:space-between;gap:2rem; } .hdr-logo img{height:32px;width:auto;aspect-ratio:1000/168} .hdr-nav{display:flex;align-items:center;gap:2rem} .hdr-nav a{ font-weight:500;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-70);transition:color .25s ease; } .hdr-nav a:hover{color:var(--coral)} /* Evento: la voce piu' importante del sito — logica colore INVERTITA: coral di default, si spegne sul grigio del menu quando ci passi sopra */ /* Nessuna voce e' salmone per partito preso: il salmone segna dove sei. La voce si accende quando la sezione corrispondente e' quella che stai guardando, e si spegne appena la superi. */ .hdr-nav a.qui{color:var(--coral)} .hdr-nav a.qui:hover{color:var(--coral)} /* il selettore .hdr-nav a è più specifico: il bottone va scritto allo stesso livello, se no eredita il grigio del menu e in hover diventa salmone su salmone */ .hdr-nav a.hdr-cta{ font-weight:700;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase; color:var(--coral);border:1px solid var(--coral-35);padding:.7em 1.5em; transition:background-color .25s ease,color .25s ease,border-color .25s ease; } .hdr-nav a.hdr-cta:hover{background:var(--coral);border-color:var(--coral);color:#0a0a0b} /* "CONTATTAMI" (David, 22/08): voce di menu come le altre, senza cornice, a sinistra di Candidati. Candidati resta l'unica azione con il rettangolo, cosi' l'occhio ha un solo bersaglio forte. TERZO GIRO: il grassetto NON e' piu' su Contattami, e' su EVENTO (sotto). Togliendo la cornice e la voce "Metodo" la fila si e' accorciata di 133px, e il bottone non ha piu' bisogno di sparire sugli schermi piccoli: la regola che lo nascondeva sotto i 1500px e' stata eliminata. */ .hdr-nav a.hdr-contatta:hover{color:var(--coral)} /* "EVENTO" IN EVIDENZA (David, 22/08): grassetto BIANCO, perche' e' la voce che porta soldi. Niente colore diverso: nella barra l'unica cosa colorata resta il bottone Candidati. NIENTE MISURE PROPRIE: corpo, spaziatura e stampatello restano quelli delle altre voci, cambia solo il peso. Se qui si mette un font-size, la voce stona e si scolla dalle regole che stringono la barra sugli schermi medi. */ .hdr-nav a.nav-evt{ font-weight:700;color:var(--ink); } .hdr-nav a.nav-evt:hover{color:var(--coral)} .burger{ display:none;background:none;border:0;cursor:pointer;padding:.5rem; flex-direction:column;gap:6px; } .burger span{display:block;width:26px;height:1px;background:var(--ink);transition:transform .3s ease,opacity .3s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* BLOCCO DELLO SFONDO. Solo overflow:hidden non basta da telefono: se la pagina e' gia' scorsa, il dito continua a muoverla sotto al pannello aperto. Qui il body viene proprio fissato, e site.js si segna a che altezza era per rimetterlo esattamente li' alla chiusura. */ body.nav-lock{overflow:hidden;position:fixed;left:0;right:0;width:100%} /* IL MENU A PANINO ARRIVA FINO A 1299px (David, 22/08). Prima si fermava a 900 e fra 901 e 1299 restava la fila di voci, che pero' in quello spazio non ci sta: per farcela stare era stata stretta fino a 9,6px, cioe' illeggibile, ed e' proprio quello che David ha visto aprendo il sito da una finestra piu' piccola. Misurato: a 901px la fila a grandezza piena sborda di 306 pixel, a 1260 di 16. Non c'era una terza strada: o testo minuscolo o panino. Meglio il panino. LA SOGLIA E' 1300 E NON 1290 PERCHE' A 1290 SBORDAVA DI UN PIXEL ESATTO (misurato: 1227 su 1226). Da 1292 in su ci sta; 1300 lascia sei pixel di margine, che con i caratteri e' meglio non tirare al filo. ATTENZIONE: qui e' cambiata SOLO la soglia della barra. Tutto il resto del sito continua a passare a mobile a 900px, e non e' un errore: sono due cose diverse, la barra ha un problema suo di spazio. */ @media (max-width:1299px){ /* il pattern overlay vale solo con JS attivo; a JS spento niente burger morto né pannello nascosto (i link restano nel footer) */ html.js .burger{display:flex} html:not(.js) .hdr-nav{display:none} html.js .hdr-nav{ /* height:100dvh e non inset:0: da telefono la barra degli indirizzi si apre e si chiude, e con inset:0 il pannello restava della misura di prima. dvh e' l'altezza VERA della finestra in quel momento. */ position:fixed;left:0;right:0;top:0;height:100dvh;z-index:50; background:#0a0a0b; flex-direction:column;justify-content:center;gap:1.35rem; overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease; } html.js .hdr-nav.open{opacity:1;visibility:visible} /* le voci stavano a 2,2rem l'una dall'altra e il blocco veniva cosi' alto che la prima finiva quasi sotto al logo (David, 23/08: "chi sono e' troppo in alto"). A 1,35rem il blocco si accorcia e si centra davvero. */ .hdr-nav a{font-size:1.1rem;letter-spacing:.3em;padding:.35rem 0} .hdr-logo,.burger{position:relative;z-index:60} } /* ============ 08 · 01 HERO ============ */ .hero{ min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding-top:7rem;padding-bottom:0; } .hero-grid{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr); gap:clamp(2.5rem,6vw,6rem);align-items:end; } .hero-title{ font-family:var(--font-display);font-weight:400; font-size:clamp(4.6rem,13.2vw,12.5rem); line-height:.86;letter-spacing:.01em;text-transform:uppercase; margin:1.6rem 0 2.2rem; } .hero-title .l2{display:block;color:var(--coral)} .hero-roles{display:flex;flex-direction:column;gap:.35rem;margin-bottom:2rem} .hero-role-main{font-weight:700;font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase} .hero-role-sub{font-weight:500;font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-55)} .hero-quote{ font-style:italic;font-weight:400;color:var(--ink-70); max-width:44ch;padding-left:1.4rem;border-left:1px solid var(--coral); margin-bottom:2.8rem; } /* fascia ridotta: meno vuoto tra il rail e la sezione 02 */ .hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:clamp(2.2rem,4.5vh,3.2rem)} .hero-ph{position:relative;margin-bottom:clamp(2.2rem,4.5vh,3.2rem)} .hero-ph .frame{aspect-ratio:4/5;max-height:min(62vh,580px)} .hero-ph .frame img{object-position:46% 22%} /* doppia didascalia sotto la cornice (da C) */ .hero-plate{ display:flex;justify-content:space-between;align-items:center;gap:.9rem; margin-top:.9rem; font-size:.625rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase; color:var(--ink-55); } .hero-plate .dot{width:4px;height:4px;background:var(--coral);transform:rotate(45deg);flex:none} .hero-meta{ border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:center; padding-block:1.1rem; font-size:.625rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-55); } .hero-meta .n{font-family:var(--font-display);font-size:.95rem;letter-spacing:.14em;color:var(--coral)} /* MOBILE: apre l'impatto tipografico, la foto arriva dopo */ @media (max-width:900px){ .hero{min-height:auto;padding-top:6.5rem} .hero-grid{grid-template-columns:1fr;align-items:start} .hero-title{margin-top:1.2rem;font-size:clamp(4.2rem,19vw,7.5rem)} .hero-ph{max-width:420px;margin-bottom:2.4rem} .hero-ph .frame{aspect-ratio:4/5;max-height:52vh} } @media (max-width:520px){ .hero-ctas .btn{flex:1 1 100%} } /* ============ 09 · 02 CHI SONO ============ */ #chi-sono.sec{padding-top:clamp(2rem,4vh,3.2rem)} /* la testata 02 sale verso la firma */ .chi-grid{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr); gap:clamp(2.5rem,6vw,6rem);align-items:start; } .chi-grid .h-display{margin-bottom:1.8rem;max-width:14ch} .chi-grid .lead{margin-bottom:3.2rem} .tl{border-top:1px solid var(--line)} .tl li{ display:grid;grid-template-columns:9.5rem 1fr;gap:1.5rem; padding:1.35rem 0 1.35rem 1.3rem;border-bottom:1px solid var(--line); align-items:baseline;position:relative; } /* marker puntiforme coral (da C) */ .tl li::before{ content:"";position:absolute;left:0;top:2rem; width:5px;height:5px;border-radius:50%;background:var(--coral); } .tl-year{ font-family:var(--font-display);font-size:1.5rem;line-height:1; letter-spacing:.05em;color:var(--coral);white-space:nowrap; } .tl-txt{font-size:.9em;color:var(--ink-70)} /* ritratto fermo nella colonna foto. Era sticky, ma non si è mai visto: l'overflow:hidden della sezione lo teneva neutralizzato. Quando la sezione è passata a overflow:visible per la nebbia, lo sticky si è svegliato e la foto ha iniziato ad agganciarsi e staccarsi a scatti. Uno sticky non si rallenta, è un aggancio: quindi resta ferma. */ .chi-ph{align-self:stretch} .chi-ph .frame{aspect-ratio:2/3} /* respiro leggero dentro la cornice, come nella sezione 05: la foto è appena più alta del riquadro e usa quel margine per muoversi con lo scorrimento. Poco, così non scopre i bordi e non taglia la mano che indica. */ .chi-ph .frame img{ position:relative;object-position:38% 46%; height:107%;top:-3.5%;will-change:transform; } @media (max-width:900px){ .chi-grid{grid-template-columns:1fr} .chi-ph{max-width:420px} .tl li{grid-template-columns:6.5rem 1fr;gap:1rem;padding-left:1.1rem} .tl li::before{top:1.9rem} .tl-year{font-size:1.25rem} } /* Da telefono la colonna dell'anno era larga 104px per scriverci "2016", che ne occupa 36: 68px di vuoto rubati al testo, che restava in 204px su 342 e andava a capo ogni tre parole (una voce arrivava a sette righe). Con "auto" la colonna si stringe sul contenuto e il testo passa a ~272px. La griglia resta a due colonne: gli anni restano incolonnati come prima. */ @media (max-width:560px){ .tl li{grid-template-columns:auto 1fr;gap:1.1rem} } /* ============ 10 · 03 METODO ============ */ .met-head{max-width:30ch;margin-bottom:1.8rem} .met-intro{margin-bottom:clamp(3rem,6vw,4.5rem)} .met-grid{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);border-left:1px solid var(--line); } .met-card{ border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(1.75rem,3vw,2.75rem); display:flex;flex-direction:column;gap:1.1rem;min-height:15rem; background:transparent; transition:background-color .4s ease; position:relative; } .met-card:hover{background:var(--bg-2)} .met-card::after{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--coral);transition:width .45s ease; } .met-card:hover::after{width:100%} .met-letter{ font-family:var(--font-display);font-size:clamp(3rem,4.5vw,4.25rem); line-height:.9;color:var(--coral); } /* card "+ Vendita etica": keyline coral, MAI campitura piena */ .met-plus{box-shadow:inset 0 0 0 1px var(--coral-35)} .met-plus:hover{box-shadow:inset 0 0 0 1px var(--coral)} .met-plus .met-letter{color:var(--coral);font-size:clamp(2.2rem,3.4vw,3rem)} .met-name{font-weight:700;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase} .met-txt{font-size:.875em;color:var(--ink-55);line-height:1.7} @media (max-width:900px){.met-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.met-grid{grid-template-columns:1fr}.met-card{min-height:0}} /* ============ 11 · 04 A CHI MI RIVOLGO ============ */ /* il titolo ha bisogno di larghezza, se no si spezza in troppe righe: la foto gli lascia spazio e recupera sconfinando oltre il margine destro */ .chi2-grid{ display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr); gap:clamp(2.5rem,5vw,4.5rem);align-items:center; } /* qui il titolo non ha margine sotto: glielo dà il testo che lo accompagna */ .chi2-grid .lead{margin-top:clamp(1.8rem,3vw,2.6rem)} .chi2-grid .lead + .lead{margin-top:1.15rem} .chips{display:flex;flex-wrap:wrap;gap:.75rem;margin:2.4rem 0 2.6rem} /* chip a pillola (da B) */ .chip{ font-weight:500;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase; padding:.72em 1.5em;border:1px solid var(--line);border-radius:100px;color:var(--ink-70); transition:border-color .3s ease,color .3s ease,background-color .3s ease; } .chip:hover{border-color:var(--coral-35);color:var(--coral);background:var(--coral-12)} .nota{ font-style:italic;color:var(--ink-70);font-size:.9em; padding-left:1.4rem;border-left:1px solid var(--coral);max-width:46ch; } /* la nota può essere su più blocchi: la barra salmone li abbraccia tutti */ .nota p + p{margin-top:1.05rem} /* 3/2 invece di 4/3: è il formato nativo dello scatto, quindi niente ritaglio. Il ritaglio sta su .ph-clip e non sulla cornice: overflow:hidden sulla cornice mangerebbe il segno d'angolo salmone, che sporge di un pixel. */ .ph-clip{display:block;position:relative;overflow:hidden;aspect-ratio:3/2} .chi2-ph .ph-clip img{ position:absolute;left:0;top:-11%;width:100%;height:122%;object-fit:cover; will-change:transform; /* il movimento lo dà site.js */ } /* spostata di 12px verso sinistra. La foto è larga esattamente quanto il riquadro, quindi object-position in orizzontale non farebbe nulla: si allarga di 24px e la si sposta di 12, così non scopre il bordo destro. */ .chi2-ph .frame img{object-position:22% 40%} /* la foto esce dal margine destro: si sposta verso il bordo dello schermo e restituisce al titolo la larghezza che gli serviva */ .chi2-ph{margin-right:calc(-1 * clamp(1rem,6vw,7rem))} @media (max-width:900px){ .chi2-grid{grid-template-columns:1fr} .chi2-ph{margin-right:0} /* a una colonna lo sconfinamento sborderebbe */ } /* ============ 12 · 05 QUATTRO STRADE (griglia compatta 4-up, da B) ============ */ .per-title{margin-bottom:clamp(2.55rem,5.1vw,3.8rem)} /* le card escono dalla colonna del sito e usano tutta la larghezza utile: restano quattro, ma molto più grandi. Il margine negativo le ricentra, perché margin auto non centra un blocco più largo del suo contenitore. */ .strade{ --larghezza:min(1320px,calc(var(--vw,100vw) - 2 * var(--pad))); width:var(--larghezza);margin-left:calc((100% - var(--larghezza))/2); display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.8vw,1.7rem); /* una sola curva e una sola durata per tutto quello che si muove qui dentro: è l'incoerenza fra tempi diversi che faceva sembrare l'insieme a scatti */ --t:.75s; } .strada{ position:relative;display:block;overflow:hidden; border:1px solid var(--line);background:var(--bg-2); transition:border-color var(--t) var(--ease-soft),transform var(--t) var(--ease-soft),box-shadow var(--t) var(--ease-soft); } /* il bordo salmone in hover è un filo più spesso: l'ombra interna aggiunge mezzo pixel al bordo vero senza spostare di una virgola il contenuto */ .strada:hover{ border-color:var(--coral-35);transform:translateY(-7px); box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 0 0 1.2px var(--coral-35); } .strada .ph{position:relative;display:block;aspect-ratio:3/4.35;overflow:hidden} /* viraggio salmone leggerissimo: le quattro foto vengono da luci e giornate diverse, e questo velo le porta tutte nella stessa temperatura */ .strada .ph::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:var(--coral);opacity:.17;mix-blend-mode:soft-light; } .strada .ph img{ width:100%;height:100%;object-fit:cover; transition:transform var(--t) var(--ease-soft),opacity var(--t) var(--ease-soft); } .strada:hover .ph img{transform:scale(1.06)} .strada::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(10,10,11,.05) 0%,rgba(10,10,11,.22) 46%,rgba(10,10,11,.92) 100%); } .strada-idx{ position:absolute;top:.9rem;left:.9rem;z-index:2; font-family:var(--font-display);font-size:.85rem;letter-spacing:.14em; color:var(--ink);background:rgba(10,10,11,.6);padding:.25em .7em; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); } .strada .info{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1rem,1.8vw,1.5rem)} .strada .kick{ font-weight:700;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase; color:var(--coral);display:block;margin-bottom:.45rem; } .strada .nome{ display:block;font-family:var(--font-display);font-weight:400; font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1.04;letter-spacing:.02em;text-transform:uppercase; } /* la descrizione si apre sulla sua altezza vera (da 0fr a 1fr), non su un max-height a occhio: era quello a far finire la transizione prima del tempo e a chiudere con uno scatto. */ .strada .desc{ display:grid;grid-template-rows:0fr;opacity:0;margin-top:0; transition:grid-template-rows var(--t) var(--ease-soft),opacity var(--t) var(--ease-soft),margin-top var(--t) var(--ease-soft); } .strada .desc > span{ display:block;overflow:hidden; font-size:.9375rem;line-height:1.6;color:var(--ink-70); } .strada:hover .desc{grid-template-rows:1fr;opacity:1;margin-top:.7rem} .strada .linea{ display:block;width:1.75rem;height:1px;background:var(--coral);margin-top:.9rem; transition:width var(--t) var(--ease-soft); } .strada:hover .linea{width:3.5rem} /* dove non c'è l'hover (telefono, tablet) la descrizione sta sempre aperta. Va aperta con grid-template-rows, non con max-height: da quando la card si apre sull'altezza vera, max-height non ha più alcun effetto e le descrizioni restavano invisibili su tutti i telefoni. */ @media (hover:none){ .strada .desc{grid-template-rows:1fr;opacity:1;margin-top:.6rem} } @media (max-width:1000px){.strade{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){ .strade{grid-template-columns:1fr} .strada .ph{aspect-ratio:4/3.4} .strada .desc{grid-template-rows:1fr;opacity:1;margin-top:.6rem} } /* ============ 13 · 06 EVENTO ============ */ .evt{background:var(--bg-2)} .evt-grid{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr); gap:clamp(2.5rem,6vw,6rem);align-items:center; } .evt-title{ font-family:var(--font-display);font-size:clamp(3.2rem,7vw,6.5rem); line-height:.92;letter-spacing:.015em;text-transform:uppercase; margin-bottom:1.6rem; } .evt-title .l2{display:block;color:var(--coral)} /* variante con il logo ufficiale al posto del lettering */ .evt-title--logo{margin-bottom:1.9rem;line-height:0} .evt-title--logo img{width:clamp(260px,34vw,470px);height:auto} .evt-txt{margin-bottom:2.4rem;max-width:46ch} .evt-ph .frame{aspect-ratio:3/2} .evt-ph .frame img{object-position:50% 28%} @media (max-width:900px){ .evt-grid{grid-template-columns:1fr} /* la foto stava PRIMA del testo (order:-1): David la vuole dopo il bottone "Scopri l'evento", cioe' nell'ordine in cui e' scritta (23/08) */ } /* ============ 14 · 07 RISULTATI (ledger) ============ */ .ris-title{margin-bottom:1.8rem;max-width:16ch} .ris-list{border-top:1px solid var(--line)} .ris-row{ display:grid; grid-template-columns:minmax(11rem,16rem) 1fr; gap:1.5rem;align-items:baseline; padding-block:1.6rem;border-bottom:1px solid var(--line); transition:background-color .35s ease,padding-left .35s ease; } .ris-row:hover{background:var(--bg-2);padding-left:1rem} .ris-val{ font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,3rem); line-height:1;letter-spacing:.02em;color:var(--coral);white-space:nowrap; } .ris-val--long{font-size:clamp(1.5rem,2.3vw,2.1rem);white-space:normal;line-height:1.1} .ris-who{font-weight:700;font-size:.9375rem;letter-spacing:.04em} .ris-role{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-55);margin-top:.2rem} /* nota temporale sotto il nome, in small caps — mai orfana a destra */ .ris-note{ display:block;font-weight:500;font-size:.6563rem;letter-spacing:.26em; text-transform:uppercase;color:var(--ink-55);margin-top:.5rem; } .disclaimer{ margin-top:2.2rem;font-size:.75rem;color:var(--ink-55);max-width:72ch;line-height:1.8; } @media (max-width:768px){ .ris-row{grid-template-columns:minmax(8rem,10rem) 1fr} .ris-row:hover{padding-left:0} } @media (max-width:480px){ .ris-row{grid-template-columns:1fr;row-gap:.4rem} } /* ============ 15 · 08 FILOSOFIA — momento isolato (respiro da B, voce di A) ============ */ /* La coda era clamp(7rem,16vh,12rem): su una finestra alta 900 faceva 144px contro i 91,8 di tutte le altre sezioni, e su uno schermo piu' alto arrivava a 192 (David, 23/08: "troppo spazio prima del blocco sotto"). Serviva a lasciare posto alla didascalia sotto la cornice, che pero' QUI NON C'E': la foto dell'abbraccio non ha didascalia. Quindi si usa la coda normale delle sezioni. */ .fil{background:#060607;padding-block:clamp(2.6rem,6vh,4.4rem) var(--sec-y)} /* fra la punta della freccia e il numero della sezione non ci va nessuna riga */ .exp + .fil{border-top:0} .fil .sec-head{margin-bottom:clamp(2.2rem,4.6vh,3.4rem)} .fil-quote{ font-family:var(--font-body);font-weight:500;font-style:italic; font-size:clamp(1.22rem,2.7vw,1.88rem);line-height:1.45; max-width:40ch;margin:0 auto;text-align:center; } .fil-quote .mark{color:var(--coral);font-style:normal} .fil-sign{ margin:2.6rem auto 0;display:flex;align-items:center;justify-content:center;gap:1.1rem; font-weight:500;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-55); } .fil-sign::before,.fil-sign::after{content:"";width:3rem;height:1px;background:var(--coral)} /* l'abbraccio B/N: contenuto e sobrio, mai monumentale */ .fil-ph{max-width:760px;margin:clamp(3rem,7vh,5rem) auto 0} .fil-ph .frame{aspect-ratio:3/2;background:var(--bg-2)} .fil-ph .frame img{object-position:50% 46%;filter:grayscale(1);height:110%;position:relative;top:-5%;will-change:transform} .fil-ph .frame figcaption{bottom:-1.9rem} /* ============ 16 · 09 CONTENUTI ============ */ /* col testo di presentazione sotto, il titolo non deve piu' tenere tutta l'aria: la stacca lui dalle card */ .con-title{margin-bottom:clamp(1.1rem,2vw,1.6rem)} .con-intro{max-width:62ch;margin-bottom:clamp(2.6rem,5vw,3.8rem)} .con-grid{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);border-left:1px solid var(--line); } .con-card{ border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(1.75rem,3vw,2.5rem); display:flex;flex-direction:column;gap:1rem;min-height:18rem; transition:background-color .4s ease;position:relative; } .con-card:hover{background:var(--bg-2)} .con-kick{ font-weight:700;font-size:.625rem;letter-spacing:.32em;text-transform:uppercase;color:var(--coral); } .con-name{font-weight:700;font-size:1.0625rem;line-height:1.45;letter-spacing:.01em;max-width:26ch} .con-txt{font-size:.875em;color:var(--ink-55);line-height:1.7} .con-more{ margin-top:auto;font-weight:700;font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase; color:var(--ink-55);display:flex;align-items:center;gap:.6rem; transition:color .3s ease; } .con-card:hover .con-more{color:var(--coral)} .con-more .arr{transition:transform .3s ease} .con-card:hover .con-more .arr{transform:translateX(5px)} @media (max-width:900px){.con-grid{grid-template-columns:1fr}.con-card{min-height:0}} /* ============ PAGINA CONTATTI · le strade ============ Tab rettangolari in colonna, bandierati a sinistra, con gli angoli appena stondati (David, 22/08). Prima erano le card a tre colonne del blog e sembravano anteprime di articoli. AL PASSAGGIO DEL MOUSE SI ACCENDE SOLO IL BORDO (David, secondo giro: "non tutto quanto compreso il testo"). Titolo, descrizione ed etichetta restano del loro colore; la freccia si sposta ma non cambia tinta, perche' il movimento dice "ci si clicca" senza aggiungere un altro colore. Niente fondo acceso: quello illuminava tutta la riga ed era troppo. */ .ct-strade{display:flex;flex-direction:column;gap:1.15rem;margin-top:clamp(2rem,4vw,3rem)} .ct-strada{ display:flex;align-items:center;gap:1.5rem; padding:clamp(1.25rem,2.3vw,1.7rem) clamp(1.35rem,2.4vw,1.9rem); /* IL BORDO E' GIA' SALMONE (David, 22/08, quarto giro: "preferisco, proviamo"). Prima era grigio e diventava salmone col mouse sopra. Adesso la riga si presenta gia' accesa e col mouse cambia il TITOLO, che passa da bianco a salmone. Cosi' si vede da subito che sono cinque cose su cui si clicca. */ border:1px solid var(--coral);border-radius:12px;background:transparent; /* il bagliore che si accende col mouse: e' box-shadow e non un bordo piu' spesso, se no la riga cambierebbe misura e le altre si sposterebbero */ box-shadow:0 0 0 rgba(236,134,102,0); transition:box-shadow .38s var(--ease-soft); } .ct-in{flex:1;display:block;min-width:0} .ct-testo{ display:block;font-weight:700;line-height:1.35; font-size:clamp(1rem,1.5vw,1.22rem);letter-spacing:-.005em;color:var(--ink); transition:color .38s var(--ease-soft); } .ct-desc{ display:block;margin-top:.42rem;max-width:64ch; color:var(--ink-55);font-size:clamp(.86rem,.95vw,.94rem);line-height:1.6; } /* CHI TI RISPONDE (David, 22/08): una riga salmone sotto la descrizione, solo sulle strade dove non risponde David in persona. Serve a togliere la sorpresa di trovarsi a scrivere a un nome che non ti aspetti. Resta salmone anche col mouse sopra: sulla riga si accende solo il bordo. */ .ct-chi{ display:block;margin-top:.45rem;color:var(--coral); font-size:clamp(.8rem,.9vw,.88rem);line-height:1.5;font-weight:700; } /* IL SEGNO DI MARCHIO accanto al nome del videocorso (David, 22/08: Testimonianze che vendono e' ®, Offerta Irresistibile e' ©). Piu' piccolo e alzato, e con la spaziatura fra le lettere azzerata: dentro un titolo in stampatello spaziato, un ® a grandezza piena pesa come una parola e si porta dietro lo spazio dell'ultima lettera. */ .vc-marchio{ font-size:.62em;letter-spacing:0;vertical-align:super;margin-left:.12em; } /* l'etichetta che dice dove si va a finire: piccola, grigia, mai in mezzo */ .ct-dove{ flex:none;font-weight:700;font-size:.625rem;letter-spacing:.28em; text-transform:uppercase;color:var(--ink-40,rgba(255,255,255,.38)); } .ct-strada .arr{ flex:none;color:var(--ink-55); transition:transform .38s var(--ease-soft); } /* col mouse sopra cambia SOLO il titolo: descrizione, riga salmone di chi ti risponde ed etichetta restano dove sono. La freccia si sposta ma non cambia colore: il movimento dice "ci si clicca" senza aggiungere un'altra tinta. */ .ct-strada:hover .ct-testo{color:var(--coral)} /* col mouse sopra la riga di chi ti risponde diventa BIANCA (David, 22/08): restando salmone faceva a botte col titolo, che col mouse diventa salmone anche lui, e nella riga si leggevano due salmoni uguali uno sopra l'altro. */ .ct-strada:hover .ct-chi{color:var(--ink)} .ct-strada:hover .arr{transform:translateX(6px)} /* IL BORDO SI ILLUMINA (David, 22/08, quinto giro). Il bordo e' gia' salmone pieno, quindi non poteva "accendersi" cambiando colore: non c'era piu' colore da dare. Si accende con un alone salmone tutto intorno, che e' quello che l'occhio legge come luce. Due strati: uno stretto che ispessisce il bordo senza spostare niente, e uno largo e morbido che sfuma nel nero. */ .ct-strada:hover{ box-shadow:0 0 0 1px rgba(236,134,102,.55), 0 0 22px rgba(236,134,102,.22); } /* da telefono l'etichetta va sotto il testo: in riga stringeva il titolo a due parole per riga */ @media (max-width:560px){ .ct-strada{flex-wrap:wrap;gap:.6rem 1rem} .ct-in{flex:1 0 100%} .ct-dove{order:2} .ct-strada .arr{order:3;margin-left:auto} } /* la riga di esito sotto ai moduli: "Un attimo..." mentre spedisce, oppure l'errore se ActiveCampaign risponde male o non risponde. In condizioni normali non si vede mai. */ .nl-esito{ margin:.2rem 0 .6rem;font-size:.8125rem;line-height:1.5;color:var(--ink-55); } .nl-esito[hidden]{display:none} .nl-esito--male{color:var(--coral);font-weight:700} .nl-sec .nl-esito--male{color:#c0392b} /* ============ I DUE POP-UP (David, 22/08) ============ Stessa meccanica del pannello video che c'e' gia' (.vp): il velo e il riquadro entrano in dissolvenza, mai a scatto. Il bottone di chiusura e' quello di casa, la parola "Chiudi" con la freccia: mai la crocetta bianca del browser. */ .pop{position:fixed;inset:0;z-index:140;display:grid;place-items:center; padding:clamp(1rem,4vw,2.4rem)} .pop[hidden]{display:none} .pop-velo{position:absolute;inset:0;background:rgba(8,8,9,.86);opacity:0; transition:opacity .45s var(--ease-soft)} .pop.aperta .pop-velo{opacity:1} .pop-in{ position:relative;width:min(470px,100%); background:var(--bg-2);border:1px solid var(--coral);border-radius:14px; padding:clamp(1.7rem,3.4vw,2.4rem); opacity:0;transform:translateY(16px) scale(.985); transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft); } .pop.aperta .pop-in{opacity:1;transform:none} /* il pannello riceve il fuoco all'apertura ma non deve mostrare il contorno: non e' una cosa su cui si clicca, e' solo il punto in cui si entra */ .pop-in:focus,.pop-in:focus-visible{outline:none} .pop-kick{ font-weight:700;font-size:.625rem;letter-spacing:.32em;text-transform:uppercase; color:var(--coral);margin-bottom:.6rem; } .pop-titolo{font-size:clamp(2rem,4.4vw,2.7rem);line-height:.95;margin-bottom:.9rem} .pop-titolo em{font-style:normal;color:var(--coral)} /* nella finestra della conferma anche il punto del titolo e' verde: se restasse salmone farebbe a pugni con la spunta due centimetri sopra */ .pop--ok .pop-titolo em{color:var(--ok)} .pop-txt{color:var(--ink-70);font-size:.9375rem;line-height:1.65;margin-bottom:1.4rem} .pop-txt strong{color:var(--ink)} .pop-form{display:flex;flex-direction:column;gap:.85rem} /* I CAMPI DENTRO IL POP-UP SONO SCURI. Riusano la classe .nl-in del modulo in pagina, che pero' e' nata dentro una sezione CHIARA: sul pannello nero uscivano due rettangoli grigio chiaro che sembravano incollati sopra. Qui il fondo e' quasi nero, il bordo e' un salmone appena acceso e il testo e' bianco. Il colore del testo va detto per esteso: i campi ereditano il nero della sezione chiara e su fondo scuro non si leggerebbe piu' niente. */ .pop-form .nl-in{ background:rgba(255,255,255,.04); border:1px solid rgba(236,134,102,.28); color:var(--ink); transition:border-color .3s var(--ease-soft),background-color .3s var(--ease-soft); } .pop-form .nl-in:focus{ outline:none;border-color:var(--coral);background:rgba(255,255,255,.06); } .pop-form .nl-lab{color:var(--ink-55)} .pop-privacy{font-size:.8125rem;color:var(--ink-55);display:flex;align-items:flex-start;gap:.6rem} .pop-privacy a{color:var(--ink-70);text-decoration:underline;text-underline-offset:3px} .pop-privacy a:hover{color:var(--coral)} /* la casella da spuntare: quella di serie e' bianca e sul nero fa da faro. accent-color la porta sul salmone del sito. */ .pop-privacy input{accent-color:var(--coral);margin-top:.15rem;flex:none} .pop-campo{display:block} .pop-privacy{margin-top:.1rem} .pop-invia{justify-content:center;text-align:center} /* "No, grazie": deve esserci ma non deve competere col bottone salmone */ .pop-no{ display:block;margin:1.1rem auto 0;background:none;border:0;cursor:pointer; font:inherit;font-size:.8125rem;letter-spacing:.06em;color:var(--ink-55); text-decoration:underline;text-underline-offset:3px; transition:color .3s var(--ease-soft); } .pop-no:hover,.pop-no:focus-visible{color:var(--ink)} /* --- la finestra della conferma --- */ .pop--webinar .pop-in{width:min(520px,100%);text-align:center} /* "NUOVO WEBINAR!" sopra al computer */ /* "NUOVO WEBINAR!" grosso (David, 22/08: era piccolissimo). Non e' piu' un occhiello da .6875rem: e' il carattere dei titoloni, in salmone, e fa da insegna sopra al computer. La spaziatura fra le lettere scende a .06em perche' a questo corpo quella larga sfonderebbe la finestra. */ .pop-nuovo{ font-family:var(--font-display);font-weight:400; font-size:clamp(1.6rem,3.4vw,2.15rem);line-height:1; letter-spacing:.06em;text-transform:uppercase; color:var(--coral);margin-bottom:1rem; } /* IL BAGLIORE CHE LAMPEGGIA PIANO (David, 22/08). E' un alone dietro al computer, non un'ombra sul bordo del pannello: il mockup e' un PNG senza sfondo, quindi il bagliore deve stargli dietro e vedersi attraverso. Sette secondi a giro e opacita' fra .35 e 1: deve respirare, non pulsare. Se uno ha chiesto meno animazioni resta acceso fisso, non lampeggia. */ .pop-mockup-giro{ display:block;position:relative;width:82%;margin:0 auto .4rem; } .pop-mockup-giro::before{ content:"";position:absolute;left:50%;top:52%;translate:-50% -50%; width:118%;height:112%;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(50% 50% at 50% 50%,rgba(236,134,102,.42),rgba(236,134,102,.12) 55%,transparent 72%); animation:pop-respiro 7s var(--ease-soft) infinite; } @keyframes pop-respiro{ 0%,100%{opacity:.35;transform:scale(.94)} 50% {opacity:1;transform:scale(1.04)} } @media (prefers-reduced-motion:reduce){ .pop-mockup-giro::before{animation:none;opacity:.7} } .pop-mockup{ display:block;position:relative;z-index:1;width:100%;max-width:none;height:auto; } /* la data sta su UNA riga sola (David): niente
nell'HTML e qui il white-space che impedisce al browser di mandarla a capo per conto suo. Il corpo e' un filo piu' piccolo del titolo di prima proprio per farcela stare dentro i 520px del pannello. */ .pop--webinar .pop-titolo{ font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.02;white-space:nowrap; } /* il conto alla rovescia: piccolo, in fila, coi numeri a larghezza fissa se no passando da 10 a 9 secondi la riga si sposta */ .pop-conto{ display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap; margin:.9rem 0 1.1rem; font-weight:700;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-55); } .pop-conto[hidden]{display:none} .pop-conto b{ display:block;font-weight:700;font-size:1.45rem;letter-spacing:.02em; color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1; } .pop--webinar .pop-txt{margin-bottom:0} .pop--webinar .pop-invia{display:flex;margin-top:1.5rem} .pop--ok .pop-in{text-align:center} .pop-spunta{display:block;width:74px;height:74px;margin:0 auto 1.1rem} .pop-spunta svg{width:100%;height:100%;display:block} /* LA SPUNTA E' VERDE (David, 22/08). Non il verde acceso dei messaggi di sistema, che su questo sito urlerebbe: un verde smorzato, #52c091, che sta accanto al salmone senza litigarci. E' l'unico verde del sito, e sta qui perche' deve dire "e' andata" a colpo d'occhio. */ :root{--ok:#52c091} .pop-spunta-giro{ fill:none;stroke:rgba(82,192,145,.35);stroke-width:2; stroke-dasharray:183;stroke-dashoffset:183; transition:stroke-dashoffset .7s var(--ease-soft); } .pop-spunta-segno{ fill:none;stroke:var(--ok);stroke-width:4.5; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:52;stroke-dashoffset:52; transition:stroke-dashoffset .5s var(--ease-soft) .28s; } /* il tratto si scrive quando la finestra e' gia' aperta: prima il cerchio, poi la spunta. Se uno ha chiesto meno animazioni, si vede e basta. */ .pop--ok.aperta .pop-spunta-giro, .pop--ok.aperta .pop-spunta-segno{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){ .pop-spunta-giro,.pop-spunta-segno{transition:none;stroke-dashoffset:0} } .pop-chiudi{ margin-top:1.4rem;background:none;border:0;cursor:pointer;font:inherit; font-weight:700;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-55);transition:color .3s var(--ease-soft); } .pop-chiudi:hover,.pop-chiudi:focus-visible{color:var(--coral)} .pop-chiudi-t{display:inline-flex;align-items:center;gap:.5em} /* ============ 17 · 10 CTA FINALE ============ */ .cta-grid{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3.6fr); gap:clamp(2.5rem,6vw,6rem);align-items:center; } .cta-title{margin-bottom:1.6rem;max-width:14ch} .cta-title em{font-style:normal;color:var(--coral)} .cta-title .l2{display:block;color:var(--coral)} .cta-txt{margin-bottom:2.6rem;max-width:40ch} .cta-ctas{display:flex;flex-wrap:wrap;gap:1rem} /* la sezione finale ha l'aula alle spalle: mani alzate, velo scuro sopra perche' il titolo resti leggibile */ .cta-sec{position:relative;overflow:hidden} .cta-sec > .cta-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .cta-bg img{width:100%;height:112%;object-fit:cover;object-position:50% 46%; position:relative;top:-6%;opacity:.9;will-change:transform} .cta-bg::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.5) 26%,rgba(10,10,11,.5) 70%,rgba(10,10,11,.94) 100%), /* solo dietro al testo, e solo per un terzo di schermo */ linear-gradient(90deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,.25) 34%,transparent 52%)} .cta-sec .wrap{position:relative;z-index:1} /* nella pagina Formazione il titolo della chiusura e' in Bebas come le altre */ #candidati .cta-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.92; font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:.01em} #candidati .cta-title .l2{display:block;color:var(--coral)} .cta-ph .frame{aspect-ratio:3/4} .cta-ph .frame img{object-position:50% 38%;height:107%;position:relative;top:-3.5%;will-change:transform} @media (max-width:900px){ .cta-grid{grid-template-columns:1fr} .cta-ph{max-width:340px} } @media (max-width:520px){ .cta-ctas .btn{flex:1 1 100%} } /* ============ 18 · FOOTER ============ */ .ftr{position:relative;overflow:hidden;border-top:1px solid var(--line);background:#000;padding-block:clamp(2.4rem,4.5vw,3.4rem) 0} /* due aloni salmone in diagonale: uno in alto a sinistra, uno in basso a destra */ .ftr::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(56% 82% at 2% 4%,rgba(236,134,102,.18),transparent 72%), radial-gradient(56% 82% at 98% 96%,rgba(236,134,102,.18),transparent 72%); } /* colonna del footer più raccolta della griglia del sito */ .ftr .wrap{position:relative;z-index:1;max-width:880px} .ftr-top{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:1.2rem;margin-bottom:2rem; } /* logo + tagline: colonna centrata (l'immagine block non si centra col solo text-align) */ .ftr-top > div{display:flex;flex-direction:column;align-items:center} /* logo footer: centrale e ben visibile (feedback David) */ .ftr-logo img{height:42px;width:auto;aspect-ratio:1000/168} .ftr-tag{margin-top:1.2rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);font-weight:500} .ftr-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem} /* desktop: link del footer tutti su una riga */ @media (min-width:768px){.ftr-nav{flex-wrap:nowrap}.ftr-nav a{white-space:nowrap}} .ftr-nav a{ font-weight:500;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-55);transition:color .25s ease; } .ftr-nav a:hover{color:var(--coral)} /* la riga in fondo esce dalla colonna e va da un bordo all'altro della pagina: la firma tutta a sinistra, il nome della pagina tutto a destra */ .ftr-btm{ border-top:1px solid var(--line-soft); padding:1rem var(--pad);margin-top:0; width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw)/2); display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem; font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55); } .ftr-btm .n{font-family:var(--font-display);letter-spacing:.14em;color:var(--ink-55)} /* ============================================================ PAGINE INTERNE — chi-è (entità) + legali (privacy, cookie) Stesso sistema della home: primitive riusate (.sec-head, .tl, .met-grid, .ris-list, .frame). Qui solo ciò che la home non ha. ============================================================ */ /* --- hero compatto di pagina interna (sotto header fisso) --- */ .pg-hero{padding-top:clamp(8.5rem,15vh,11rem);padding-bottom:clamp(3rem,6vh,4.5rem)} /* hero con foto di sfondo: la foto sta sotto tutto, la nebbia salmone sopra di lei, il testo sopra a tutti. La dissolvenza verso il nero è volutamente lunga (parte a un terzo di altezza) così l'immagine non finisce mai di netto */ /* senza il riquadro foto l'hero vive di immagine: si dà un'altezza propria e appoggia il testo in basso, così la foto ha spazio e non restano vuoti */ .pg-hero--foto{ min-height:min(82vh,800px); display:flex;flex-direction:column;justify-content:flex-end; padding-top:clamp(7rem,12vh,9rem); padding-bottom:clamp(2rem,4vh,3.25rem); /* l'aria in cui muore la sfumatura */ } /* invito a scorrere: etichetta + filo verticale con una scintilla che scende */ .scroll-hint{ display:inline-flex;flex-direction:column;align-items:flex-start;gap:.75rem; margin-top:clamp(1.6rem,3.5vh,2.6rem); font-weight:700;font-size:.625rem;letter-spacing:.3em;text-transform:uppercase; color:var(--ink-55);transition:color .3s ease; } .scroll-hint:hover{color:var(--coral)} .scroll-line{position:relative;display:block;width:1px;height:56px;background:rgba(255,255,255,.16);overflow:hidden} .scroll-line::after{ content:"";position:absolute;left:0;top:0;width:1px;height:20px;background:var(--coral); animation:scroll-run 2.6s cubic-bezier(.4,0,.2,1) infinite; } @keyframes scroll-run{ 0%{transform:translateY(-24px);opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{transform:translateY(56px);opacity:0} } @media (prefers-reduced-motion:reduce){ .scroll-line::after{animation:none;height:100%;opacity:.45} } .pg-hero--foto .pg-title{margin-bottom:1.5rem} .pg-hero--foto .lead{max-width:62ch} .pg-hero--foto .lead + .lead{margin-top:1.15rem} /* gli a capo voluti valgono da tablet in su; su schermo stretto il testo si impagina da solo, se no restano righe mozze */ @media (max-width:760px){.brk{display:none}} /* i capitoli attaccano subito: l'aria sopra il primo la dà già l'hero */ #capitoli.sec{padding-top:0;padding-bottom:clamp(1.5rem,3vh,2.5rem)} #capitoli .storia-cap:first-of-type{padding-top:clamp(1.2rem,3vw,2.2rem)} .pg-hero--foto>.pg-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .pg-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;opacity:.58} /* tre veli sovrapposti: 1) scudo scuro sotto il testo · 2) vignetta con il "buco" sul viso, che resta la zona più leggibile · 3) dissolvenza finale */ .pg-hero-bg::after{content:"";position:absolute;inset:0;background: radial-gradient(74% 40% at 30% 70%,rgba(10,10,11,.95) 0%,rgba(10,10,11,.68) 45%,rgba(10,10,11,.20) 78%,transparent 95%), radial-gradient(58% 46% at 46% 26%,transparent 0%,rgba(10,10,11,.22) 55%,rgba(10,10,11,.62) 100%), linear-gradient(180deg,rgba(10,10,11,.45) 0%,rgba(10,10,11,.10) 20%,rgba(10,10,11,.16) 50%,rgba(10,10,11,.3) 68%,rgba(10,10,11,.52) 82%,rgba(10,10,11,.78) 93%,var(--bg) 100%)} .pg-hero--foto.fog::before{z-index:1} .pg-hero--foto>.wrap{position:relative;z-index:2;width:100%} @media (max-width:900px){ .pg-hero-bg img{object-position:58% 24%;opacity:.28} } /* la nebbia dell'hero di pagina nasce dal bordo sinistro dello schermo e si ridimensiona in percentuale: mai un taglio netto sulla colonna di testo */ .pg-hero.fog::before{ inset:0; background: radial-gradient(58% 82% at 0% 16%,rgba(236,134,102,.24),transparent 72%), radial-gradient(34% 52% at 24% 0%,rgba(236,134,102,.10),transparent 74%); } /* ============ CHI E' DAVID: apertura con la foto dell'aula ============ Chiesta da David il 23/08: la foto prende lo schermo da sinistra a destra e sfuma sotto al titolo. Sopra si vede l'aula, sotto c'e' il nero pieno su cui si leggono ruoli, testo, valutazioni e pastiglie. Le fermate della sfumatura NON sono a occhio: sono misurate sulla posizione vera del titolo (vedi RIPRESA). */ .pg-hero--aula{position:relative;overflow:hidden;isolation:isolate} .pg-hero--aula>.pg-hero-bg{position:absolute;left:0;right:0;top:0;height:100%;z-index:0;pointer-events:none} /* la foto e' quasi tutta dentro il riquadro (2400x1600 in un box piu' largo che alto): cosi' com'e', il quarto superiore e' soffitto e controsoffitto, e la parte viva (David con la mano alzata e l'aula che alza le mani) finiva nella zona che la sfumatura spegne. Si stringe l'inquadratura verso il basso: il soffitto esce, David e le mani salgono nella fascia che resta accesa. 1,3 di ingrandimento su una foto da 2400px non perde nitidezza. */ .pg-hero--aula .pg-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.66; transform:scale(1.24);transform-origin:62% 92%} /* due veli: uno scuro leggero su tutta la foto perche' il bianco del soffitto non spari, e la discesa al nero che si chiude appena sotto al titolo. MISURATO: da schermo il titolo finisce al 52,6% dell'altezza dell'apertura e i ruoli cominciano al 55,8%, quindi il nero e' pieno al 62%. Da telefono le stesse due misure sono 34,6% e 37,5%, percio' li' la discesa e' piu' corta e si chiude al 46%: con le fermate del desktop la foto sarebbe rimasta accesa dietro al testo. Se il titolo cambia lunghezza, queste fermate vanno rimisurate. */ .pg-hero--aula .pg-hero-bg::after{ content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(10,10,11,.62) 0%,rgba(10,10,11,.28) 16%,rgba(10,10,11,.34) 34%,rgba(10,10,11,.62) 46%,rgba(10,10,11,.93) 56%,var(--bg) 62%); } .pg-hero--aula>.wrap{position:relative;z-index:2} @media (max-width:900px){ /* Da telefono la foto NON prende tutta l'altezza dell'apertura: se lo fa, un riquadro 390x1000 su una foto 2400x1600 mostra una fessura verticale fatta di soffitto, e David sparisce. Qui la foto e' una fascia alta ~420px: cosi' si vede tutta l'altezza della foto e si taglia solo di lato, dove c'e' aula da perdere. Il titolo cade dentro la fascia (dal 25% al 35% dell'apertura, misurato) e la fascia muore poco sotto. */ .pg-hero--aula>.pg-hero-bg{height:clamp(360px,46vh,460px)} .pg-hero--aula .pg-hero-bg img{object-position:62% 88%;transform:none;opacity:.82} .pg-hero--aula .pg-hero-bg::after{ background:linear-gradient(180deg,rgba(10,10,11,.40) 0%,rgba(10,10,11,.14) 18%,rgba(10,10,11,.42) 58%,rgba(10,10,11,.88) 84%,var(--bg) 100%); } } .pg-title{ font-family:var(--font-display);font-weight:400; font-size:clamp(3.4rem,8vw,7rem);line-height:.9; letter-spacing:.01em;text-transform:uppercase; margin:1.4rem 0 1.8rem; } .pg-title .l2{display:block;color:var(--coral)} /* quando i formatori aprono la pagina, serve l'aria che aveva l'intestazione */ .pg-apre{padding-top:clamp(8.5rem,15vh,11rem)} .pg-apre .pg-grid{margin-top:.6rem} .pg-apre .mentori{margin-top:clamp(2rem,4vw,3rem)} .pg-grid{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3.4fr); gap:clamp(2.5rem,6vw,6rem);align-items:start; } /* foto di pagina: contenute su desktop (feedback David: mai enormi) */ /* width:100% e non solo max-width: con justify-self:end la colonna si restringe al contenuto, e finche' la foto "lazy" non e' caricata la cornice collassa a una ventina di pixel e la didascalia sborda. Con la larghezza dichiarata la cornice sta in piedi da sola. */ .pg-ph{width:100%;max-width:340px;justify-self:end} .pg-ph .frame{aspect-ratio:2/3} .pg-ph .frame img{object-position:50% 30%} @media (max-width:900px){ .pg-grid{grid-template-columns:1fr} .pg-ph{max-width:320px;justify-self:start} } /* --- valutazioni + badge del metodo (respiro generoso: feedback David) --- */ .pg-rating{ display:flex;flex-wrap:wrap;align-items:center;gap:.9rem; margin-top:2.4rem; font-size:.8125rem;font-weight:500;letter-spacing:.06em;color:var(--ink-70); } .pg-rating .stars{color:var(--coral);letter-spacing:.18em;font-size:.9375rem} /* il puntino di mezzo fra Google e Trustpilot: da telefono la riga va a capo e il separatore restava appeso in fondo alla prima riga. Sotto i 700px sparisce: le due valutazioni stanno gia' su due righe distinte. Le stelle hanno anche loro aria-hidden, per questo sono escluse. */ @media (max-width:700px){.pg-rating > span[aria-hidden="true"]:not(.stars){display:none}} .pg-badges{display:flex;flex-wrap:wrap;gap:1.2rem;margin:2.6rem 0 1rem} .pg-badge{ font-weight:700;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-70);border:1px solid var(--line-strong); padding:1.05em 1.9em;white-space:nowrap; } @media (max-width:520px){.pg-badge{white-space:normal;text-align:center;flex:1 1 100%}} /* --- scheda "in sintesi": ledger a due colonne --- */ .sheet{border-top:1px solid var(--line)} .sheet-row{ display:grid;grid-template-columns:minmax(9rem,15rem) 1fr;gap:1.5rem; padding-block:1.25rem;border-bottom:1px solid var(--line); align-items:baseline;margin:0; } .sheet-row dt{ font-weight:700;font-size:.6875rem;letter-spacing:.3em; text-transform:uppercase;color:var(--coral); } .sheet-row dd{color:var(--ink-70);font-size:.9em;margin:0} @media (max-width:640px){.sheet-row{grid-template-columns:1fr;row-gap:.35rem}} /* --- enfasi bianca dentro un paragrafo attenuato (feedback David) --- */ .pg-strong{color:var(--ink);font-weight:700} /* --- enfasi salmone su una porzione di frase --- */ .hl-coral{color:var(--coral)} /* --- nota fonti a fine pagina --- */ .pg-fonti{ margin-top:clamp(2.5rem,5vw,3.5rem); font-size:.75rem;color:var(--ink-55);max-width:72ch;line-height:1.8; } /* --- pagine legali: colonna di lettura sobria --- */ .legal{max-width:760px} .legal-updated{ margin-top:1.6rem; font-weight:500;font-size:.6875rem;letter-spacing:.26em; text-transform:uppercase;color:var(--ink-55); } .legal h2{ font-family:var(--font-display);font-weight:400; font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.05; letter-spacing:.03em;text-transform:uppercase; margin:clamp(2.8rem,5vw,3.6rem) 0 1.1rem; } .legal h2 em{font-style:normal;color:var(--coral)} .legal p{color:var(--ink-70);margin-bottom:1.1rem;font-size:.9375em} .legal ul{margin:0 0 1.1rem} .legal li{ color:var(--ink-70);font-size:.9375em; position:relative;padding-left:1.3rem;margin-bottom:.55rem; } .legal li::before{ content:"";position:absolute;left:0;top:.8em; width:5px;height:5px;border-radius:50%;background:var(--coral); } .legal a{color:var(--coral);border-bottom:1px solid var(--coral-35);transition:border-color .25s ease} .legal a:hover{border-bottom-color:var(--coral)} .legal strong{color:var(--ink)} /* placeholder visibile per i dati mancanti — da compilare prima del cutover */ .da-completare{ background:var(--coral-12);border:1px dashed var(--coral-35); padding:.08em .45em;color:var(--coral);font-style:normal; } /* ============================================================ V2 — REVISIONE DA FEEDBACK DAVID (doc "MODIFICHE SITO", 11/07) Nebbia salmone · sezioni bianche · hero full-bleed · V-divider fasce foto · recensioni · videotestimonianze · word-cloud · formazione/attestati · storia · articoli blog · badge UE ============================================================ */ /* --- logo header: mai schiacciato (il flex lo comprimeva) --- */ .hdr-logo{flex:none;display:block} .hdr-logo img{height:32px;width:auto;max-width:none} .ftr-logo img{max-width:none} /* nav più fitto: niente voci spezzate su due righe */ .hdr-nav{gap:clamp(1.1rem,1.8vw,1.9rem)} .hdr-nav a{white-space:nowrap} /* desktop: menu centrato nella barra (spazio uguale a sx e dx), logo ancorato a sinistra */ @media (min-width:1300px){ .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;max-width:none} .hdr-logo{grid-column:1;justify-self:start} .hdr-nav{grid-column:2;justify-self:center;gap:clamp(1rem,1.6vw,1.7rem)} .hdr-nav a,.hdr-cta{letter-spacing:.16em} } /* ATTENZIONE ALL'ORDINE: il blocco qui sotto DEVE stare dopo le regole della barra scritte sopra. A parita' di peso vince chi sta piu' in basso nel foglio: messo vicino a .hdr-cta, cinquecento righe piu' su, veniva ignorato e la barra continuava a sbordare (ci sono cascato il 22/08, ed e' la stessa trappola gia' scritta per il blocco europeo e per la foto del capitolo 2016). */ /* SUGLI SCHERMI LARGHI LA BARRA CRESCE (David, 22/08: aperto il sito da un Chrome piu' largo del suo, "il menu e' piccolissimo"). IL CONTO CHE LO SPIEGA: il corpo era fisso a 12px sopra i 1260, quindi la fila restava larga 1001px sempre, e la fetta di schermo che occupava crollava: 64,6% a 1512, 57,9% a 1728, 52,1% a 1920, 39,1% a 2560. Non era il menu a rimpicciolirsi, era lo schermo a crescere sotto. Adesso corpo e logo salgono con la larghezza, ma con un tetto: .73vw fino a un massimo di 1rem per le voci, 1,9vw fino a 42px per il logo. Sotto i 1640px circa non cambia NIENTE, perche' li' il valore in vw e' ancora piu' piccolo del minimo: lo schermo di David resta identico a prima. Verificato che la fila continui a stare dentro il margine fino a 2560. */ @media (min-width:1300px){ .hdr-nav a{font-size:clamp(.75rem,.73vw,1rem)} .hdr-logo img{height:clamp(32px,1.9vw,42px)} } /* --- nebbia salmone: alone morbido coral su fondo scuro --- */ .fog{position:relative;overflow:hidden} /* eccezione: solo la sezione delle recensioni lascia uscire la sua nebbia in basso, ed e' quella delle card, non quella della sezione */ #dicono.fog{overflow:hidden;overflow-x:clip;overflow-y:visible} #dicono.fog::before{inset:0 -10%} .fog::before{ content:"";position:absolute;inset:-20% -10%;pointer-events:none;z-index:0; background: radial-gradient(52% 42% at 18% 8%,rgba(236,134,102,.20),transparent 68%), radial-gradient(46% 38% at 86% 92%,rgba(236,134,102,.13),transparent 70%), radial-gradient(30% 26% at 70% 18%,rgba(236,134,102,.07),transparent 75%); } .fog > *{position:relative;z-index:1} /* scia di nebbie dentro una sezione lunga: una a metà (tenue, a sinistra), una verso la fine (centro-sinistra). Posizione in percentuale sull'altezza, così resta al posto giusto qualunque sia la lunghezza della pagina */ .fog-trail{position:relative;overflow:hidden} .fog-trail>*{position:relative;z-index:1} .fog-trail::before,.fog-trail::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:0} .fog-trail::before{inset:0; background: radial-gradient(34% 15% at 4% 21%,rgba(236,134,102,.12),transparent 70%), radial-gradient(40% 18% at 100% 50%,rgba(236,134,102,.13),transparent 72%)} .fog-trail::after{bottom:4%;height:36%; background:radial-gradient(48% 62% at 24% 60%,rgba(236,134,102,.16),transparent 70%)} /* LA NEBBIA DELLA PAGINA CONTATTI (David, 22/08: "cosi' fanno schifo, lascia solo le prime due in alto e non farle schiacciate ma normali come nel resto del sito"). PERCHE' LI' VENIVANO SCHIACCIATE, ed e' un conto, non un gusto: i raggi di .fog-trail sono in PERCENTUALE sul riquadro, e la sezione dei casi studio e' alta 5758px mentre questa e' alta 990. Lo stesso alone "34% x 15%" diventa 514x864 pixel di la' (tondo alto) e 514x148 di qua (una striscia 3,5 a 1). Qui i raggi sono rifatti in modo che in PIXEL vengano tondi come quelli del resto del sito: circa 480x415 e 450x375, cioe' il rapporto 1,2 di .fog. VIA IL TERZO, quello in basso (.fog-trail::after): David ne vuole due sole. ATTENZIONE se si ritoccano: il centro verticale non puo' salire piu' di tanto. La nebbia deve spegnersi PRIMA del bordo alto, se no si legge una riga netta contro la sezione di sopra (regola gia' scritta per Chi sono e per le recensioni di Experience). Il conto: il centro deve stare almeno al 70% del raggio verticale, cioe' non sopra il 30% circa. */ body.pg-contatti .fog-trail::before{ background: radial-gradient(32% 42% at 6% 34%,rgba(236,134,102,.13),transparent 70%), radial-gradient(30% 38% at 96% 30%,rgba(236,134,102,.10),transparent 72%); } body.pg-contatti .fog-trail::after{content:none} /* variante leggera: presenza appena percepibile, per le sezioni di testo */ .fog--soft::before{ background: radial-gradient(46% 42% at 6% 15%,rgba(236,134,102,.13),transparent 70%), radial-gradient(30% 30% at 64% 4%,rgba(236,134,102,.06),transparent 74%); } /* "Chi sono": qui la nebbia deve morire da sola, mai contro un bordo. La riga netta non la faceva l'overflow ma la geometria: il secondo alone aveva il centro al 4% dell'altezza, quindi sul bordo alto era ancora acceso e lì si tagliava. Ora tutti e due i cerchi stanno dentro il riquadro, con il pieno tenuto lontano dal bordo alto: il primo vive fra il 2% e il 70%, il secondo fra il 2% e il 46%, così in cima arrivano già spenti. La manopola è la seconda cifra di "at": più bassa, più in alto sale il salmone. Non deve mai scendere sotto il raggio che la segue, se no il cerchio esce dal riquadro e la riga netta torna. */ /* Verticalmente la nebbia deve restare libera di uscire, se no torna la riga netta. Orizzontalmente no: il ::before sborda del 10% per lato (inset -10%) e quella parte cade comunque fuori dalla finestra, non si vede, allarga soltanto la pagina. Quindi si taglia solo in orizzontale: "clip" permette di tenere l'altro asse visible, cosa che "hidden" non consente. */ #chi-sono.fog{overflow:visible} @supports (overflow:clip){ #chi-sono.fog{overflow-x:clip;overflow-y:visible} } #chi-sono.fog--soft::before{ background: radial-gradient(42% 34% at 8% 36%,rgba(236,134,102,.15),transparent 72%), radial-gradient(30% 22% at 62% 24%,rgba(236,134,102,.07),transparent 76%); } /* variante bassa: nebbia che sale dal fondo (fascia firma del brand) */ .fog--rise::before{ inset:auto -10% -30% -10%;height:90%; background: radial-gradient(60% 55% at 50% 100%,rgba(236,134,102,.22),transparent 72%), radial-gradient(38% 40% at 82% 96%,rgba(236,134,102,.10),transparent 70%); } /* --- sezione bianca di stacco --- */ .sec--light{ background:#f7f4f1;color:#131313; --ink:#131313; --ink-70:rgba(19,19,19,.74); --ink-55:rgba(19,19,19,.56); --line:rgba(19,19,19,.14); --line-soft:rgba(19,19,19,.08); --line-strong:rgba(19,19,19,.30); --bg-2:#efeae5; --coral-12:rgba(236,134,102,.14); } /* anche qui la selezione resta salmone come nel resto del sito: sul crema il testo quasi nero sopra il salmone si legge benissimo */ .sec--light ::selection{background:var(--coral);color:#0a0a0b} .sec--light .frame{background:#fff} .sec + .sec--light,.sec--light + .sec{border-top:0} /* --- divisore a V (bordo della sezione scura che scende a punta) --- */ .vcut{ height:clamp(3rem,7vw,5.5rem);background:#f7f4f1;position:relative; } .vcut::before{ content:"";position:absolute;inset:-1px 0 0; /* sborda di 1px in alto */ background:var(--vcut-bg,#101010); clip-path:polygon(0 0,100% 0,100% 22%,50% 100%,0 22%); } /* V al contrario: la sezione chiara scende a punta e riporta al nero */ .vcut--down{background:var(--bg)} .vcut--grigia{background:#161514} .vcut--down::before{background:#f7f4f1} /* la V sta fra due sezioni, quindi spezza il selettore che toglie il bordo fra sezione scura e chiara: va rimesso a mano, se no ricompare la riga grigia */ .vcut + .sec,.vcut + .sec--light{border-top:0} /* la nebbia di questa sezione deve morire prima del fondo: sotto attacca la V, e un alone tagliato sul bordo si legge come una banda di colore diverso */ #per-chi.fog::before{ background: radial-gradient(52% 32% at 18% 24%,rgba(236,134,102,.20),transparent 68%), radial-gradient(46% 24% at 86% 58%,rgba(236,134,102,.13),transparent 70%), radial-gradient(30% 18% at 70% 28%,rgba(236,134,102,.07),transparent 75%); } /* blocco UE su fondo scuro: il badge blu e il testo bianco si leggono meglio */ /* fondo piu' scuro (David, 22/08): era #161514, cioe' (22,21,20). Adesso e' var(--bg-2), il grigio scuro che il sito usa gia' altrove: (16,16,16). Resta staccato dal nero della pagina, che e' (10,10,11), ma di poco. */ /* IL BLOCCO UE STA SOPRA LA NEBBIA DELLE RECENSIONI (David, 22/08: "la sfumatura NON DEVE toccare il blocco della Commissione Europea"). La sezione "Dicono di me" e' l'unica del sito a cui e' concesso di far uscire la nebbia dal bordo di sotto (#dicono.fog ha overflow-y:visible, e' scritto apposta piu' su): serviva ad ammorbidire il passaggio. Da quando il blocco UE le sta subito sotto, quella nebbia gli finiva addosso e sul grigio si vedeva come una macchia calda. Misurato: al centro del blocco era (31,24,22) invece del (16,16,16) di fianco. Portandolo sopra con lo z-index e' tornato (16,16,16) ovunque. NON e' stato tolto lo scarico della nebbia: quello resta, serve altrove. */ .sec--ue{ padding-top:clamp(2.5rem,5vw,4rem);background:var(--bg-2); position:relative;z-index:1;isolation:isolate; } /* il marchio sta sul nero della sezione: niente riquadro blu dietro */ .sec--ue .ue-badge{background:none;border:0;padding:0} /* --- fascia foto divisoria, stretta e responsiva --- */ .band{ position:relative;height:clamp(180px,26vw,320px);overflow:hidden; } /* l'immagine è più alta della fascia: le serve un margine sopra e sotto per respirare col movimento della pagina senza scoprire mai i bordi. Lo scostamento vero lo dà site.js, agganciato allo scroll. */ .band img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;will-change:transform} .band::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,10,11,.42),rgba(10,10,11,.08) 45%,rgba(10,10,11,.46)); } .band--fog::after{ background:linear-gradient(180deg,rgba(10,10,11,.48),rgba(10,10,11,.12) 50%,rgba(10,10,11,.5)), radial-gradient(60% 90% at 50% 100%,rgba(236,134,102,.28),transparent 70%); } /* variante per le sezioni chiare: nessun velo. Sul nero il velo serve a far sprofondare la foto, sul crema faceva l'opposto: sbiancava i bordi e sporcava l'immagine di lattiginoso. Qui la foto è già chiara e luminosa, quindi si appoggia pulita sul fondo, come una stampa. */ .band--light::after{content:none} /* fascia video: come la fascia foto, ma più alta (circa metà dell'altezza che il video avrebbe a tutta pagina) e con dentro un