/* Pagine di progetto — stesso linguaggio della home e di "Cosa facciamo": colore pieno a tutta area, numeri enormi in trasparenza, carte grandi. Il colore lo decide la pagina con --c sul : verde, blu, rosso. */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; } /* i titoli hanno il carattere display, il testo resta leggibile */ h1, h2, .num, .big { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; } /* ══════════════════════════════════════════ APERTURA — la carta della schermata di scelta che si apre a tutta pagina ══════════════════════════════════════════ */ .op { position: relative; background: var(--c); color: #fff; border-radius: 0 0 34px 34px; padding: calc(var(--header-h) + clamp(44px, 7vh, 84px)) 32px clamp(48px, 7vh, 86px); overflow: hidden; isolation: isolate; } /* lo stesso numerone delle carte, stessa opacità, stessa posizione */ .op__i { position: absolute; top: -8%; right: 3%; z-index: -1; font-family: var(--display); font-size: clamp(200px, 27vw, 400px); font-weight: 900; line-height: .8; color: rgba(255, 255, 255, .13); font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; } .op__in { max-width: var(--wrap); margin: 0 auto; } .op__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .8); text-decoration: none; transition: gap .18s ease, color .18s ease; } .op__back:hover { color: #fff; gap: 13px; } .op__back svg { width: 14px; height: 14px; } /* l'occhiello: identico a .mode__k delle carte */ .op__k { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin: 0 0 14px; } .op__h { margin: 0; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; max-width: 16ch; } .op__d { margin: 22px 0 0; max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .92); } .op__row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; } /* ══════════════════════════════════════════ PULSANTI ══════════════════════════════════════════ */ .b { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 28px; border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } /* bianco su fondo colorato */ .b--w { background: #fff; color: var(--c); } .b--w:hover { transform: translateY(-2px); } /* trasparente su fondo colorato */ .b--o { color: #fff; border-color: rgba(255, 255, 255, .5); } .b--o:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-2px); } /* colorato su fondo bianco */ .b--c { background: var(--c); color: #fff; } .b--c:hover { transform: translateY(-2px); filter: brightness(1.07); } .b:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .op .b:focus-visible { outline-color: #fff; } /* ══════════════════════════════════════════ SEZIONI ══════════════════════════════════════════ */ .s { padding: clamp(46px, 6vw, 84px) 0; } .s + .s { border-top: 1px solid var(--border); } .s__k { margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c); } .s__h { margin: 0 0 28px; font-size: clamp(27px, 3.3vw, 44px); line-height: 1.08; max-width: 20ch; } .s__p { margin: 0 0 18px; max-width: 66ch; font-size: 17px; line-height: 1.68; color: var(--muted); } .s__p:last-child { margin-bottom: 0; } .s__p strong, .s__p b { color: var(--ink); font-weight: 700; } /* ══════════════════════════════════════════ IL DATO GRANDE — un numero solo, alla scala dei numeri delle carte ══════════════════════════════════════════ */ .big { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 56px); align-items: center; } .big__n { font-size: clamp(70px, 10vw, 150px); line-height: .84; color: var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; } .big__n i { font-style: normal; font-size: .38em; } .big__n u { text-decoration: none; display: block; font-size: .26em; color: var(--muted); margin-top: 8px; } .big__t { margin: 0 0 12px; font-family: var(--display); font-size: clamp(21px, 2.5vw, 31px); line-height: 1.2; letter-spacing: -.02em; max-width: 24ch; } .big__d { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--muted); } /* ══════════════════════════════════════════ CARTE COLORATE — il pezzo forte, come sulla schermata di scelta ══════════════════════════════════════════ */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(280px, 34vh, 340px); padding: 28px; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--c); color: #fff; transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s ease; } /* le tre carte non sono identiche: due tinte piene e una in negativo, così la fila non è la solita griglia di scatole uguali */ .card--2 { background: color-mix(in srgb, var(--c) 78%, var(--ink)); } .card--3 { background: var(--ink); } @supports not (background: color-mix(in srgb, red 78%, blue)) { .card--2 { background: var(--c); } } .card__i { position: absolute; top: -6%; right: 4%; z-index: -1; font-family: var(--display); font-size: clamp(120px, 15vw, 210px); font-weight: 900; line-height: .8; color: rgba(255, 255, 255, .14); font-variant-numeric: tabular-nums; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .card:hover { transform: translateY(-7px); box-shadow: 0 22px 46px rgba(14, 27, 44, .24); } .card:hover .card__i { transform: translate(-6%, 4%) scale(1.06); } .card__k { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-bottom: auto; } .card__t { margin: 0 0 10px; font-family: var(--display); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.08; letter-spacing: -.02em; } .card__d { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); } /* ══════════════════════════════════════════ ADESIVI — i temi, nello stile delle tre parole dell'hero ══════════════════════════════════════════ */ .stick { display: flex; flex-wrap: wrap; gap: 11px; margin: 0; padding: 0; list-style: none; } .stick li { padding: 11px 19px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); font-size: 15px; font-weight: 700; color: var(--ink); transition: transform .2s ease, background-color .2s ease, color .2s ease; } /* ruotati appena, come adesivi appiccicati a mano: non sono allineati perfetti */ .stick li:nth-child(3n) { transform: rotate(-1.4deg); } .stick li:nth-child(3n+1) { transform: rotate(1deg); } .stick li:hover { background: var(--c); border-color: var(--c); color: #fff; transform: rotate(0) scale(1.04); } /* ══════════════════════════════════════════ RIGA DI FATTI — quello che serve sapere, senza scatole ══════════════════════════════════════════ */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2px; background: var(--ink); border-radius: 22px; overflow: hidden; } .fact { background: #fff; padding: 24px 22px; } .fact b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -.02em; } .fact span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--muted); } /* ══════════════════════════════════════════ ELENCHI ══════════════════════════════════════════ */ .li { list-style: none; margin: 0; padding: 0; } .li li { position: relative; padding: 0 0 13px 26px; font-size: 16px; line-height: 1.6; color: var(--muted); } .li li:last-child { padding-bottom: 0; } .li b { color: var(--ink); font-weight: 700; } .li li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--c); } /* la colonna dei "no": quadratini grigi, non colorati */ .li--no li::before { background: none; border: 2px solid var(--muted); border-radius: 3px; } /* ══════════════════════════════════════════ PASSI NUMERATI ══════════════════════════════════════════ */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; } .steps li { counter-increment: s; position: relative; padding: 0 0 26px 56px; } .steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: -4px; font-family: var(--display); font-size: 20px; color: var(--c); font-variant-numeric: tabular-nums; } .steps li::after { content: ""; position: absolute; left: 15px; top: 22px; bottom: 4px; width: 2px; background: var(--border); } .steps li:last-child { padding-bottom: 0; } .steps li:last-child::after { display: none; } .steps b { display: block; margin-bottom: 5px; font-size: 17px; font-weight: 750; color: var(--ink); } .steps span { font-size: 15.5px; line-height: 1.6; color: var(--muted); } /* ══════════════════════════════════════════ DUE COLONNE ══════════════════════════════════════════ */ .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.6vw, 52px); align-items: start; } .two--wide { grid-template-columns: 1.15fr .85fr; } /* riquadro su fondo chiaro */ .pan { padding: 28px 30px; border-radius: 22px; background: var(--paper); } .pan--ink { background: var(--ink); color: #fff; } .pan--ink .li li { color: rgba(255, 255, 255, .82); } .pan--ink .li b { color: #fff; } .pan__t { margin: 0 0 16px; font-family: var(--display); font-size: 19px; letter-spacing: -.015em; } .pan__p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--muted); } .pan--ink .pan__p { color: rgba(255, 255, 255, .8); } .pan__p + .pan__p { margin-top: 12px; } .pan__p b { color: var(--ink); font-weight: 700; } .pan--ink .pan__p b { color: #fff; } /* ══════════════════════════════════════════ PUBBLICAZIONI ══════════════════════════════════════════ */ .pubs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); } .pub { display: grid; grid-template-columns: 58px 1fr auto; gap: 20px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--border); transition: background-color .18s ease; } .pub:hover { background: var(--paper); } .pub__y { font-family: var(--display); font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; } .pub__t { display: block; font-family: var(--display); font-size: 19px; line-height: 1.28; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } a.pub__t:hover { color: var(--c); } .pub__t--soon { color: var(--muted); } .pub__a { margin: 7px 0 0; font-size: 14px; color: var(--muted); } .pub__d { margin: 7px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; } .pub__s { padding: 6px 13px; border-radius: 999px; border: 2px solid var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .pub__s--out { background: var(--c); border-color: var(--c); color: #fff; } /* ══════════════════════════════════════════ AVVISO NUOVE USCITE ══════════════════════════════════════════ */ .news { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; margin-top: 36px; padding: 30px 32px; border-radius: 22px; background: var(--ink); color: #fff; } .news__t { margin: 0; font-family: var(--display); font-size: 21px; letter-spacing: -.02em; } .news__d { margin: 7px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .68); } .news__f { display: flex; gap: 10px; } .news__f input { width: 250px; padding: 14px 18px; border: 2px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); font: inherit; font-size: 15px; color: #fff; } .news__f input::placeholder { color: rgba(255, 255, 255, .45); } .news__f input:focus { outline: none; border-color: var(--c); background: rgba(255, 255, 255, .14); } .news__f button { padding: 14px 26px; border: 0; border-radius: 999px; background: var(--c); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease; } .news__f button:hover { transform: translateY(-2px); filter: brightness(1.08); } .news__f button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .news__ok { grid-column: 1 / -1; margin: 0; font-size: 16px; font-weight: 700; color: var(--c); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════ STATO DEL PROGETTO ══════════════════════════════════════════ */ .state { padding: 30px 32px; border-radius: 22px; background: var(--c); color: #fff; } .state__k { margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .state__t { margin: 0 0 14px; font-family: var(--display); font-size: clamp(21px, 2.4vw, 29px); line-height: 1.15; letter-spacing: -.02em; max-width: 28ch; } .state__d { margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .9); } .state__d b { color: #fff; font-weight: 800; } /* ══════════════════════════════════════════ CHIUSURA ══════════════════════════════════════════ */ .end { background: var(--c); color: #fff; border-radius: 34px 34px 0 0; padding: clamp(50px, 7vw, 88px) 32px; text-align: center; } .end__h { margin: 0 auto; font-family: var(--display); font-size: clamp(28px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -.025em; max-width: 18ch; } .end__p { margin: 18px auto 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .9); } .end__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 32px; } /* Nella pagina storia la CTA e il footer sono un'unica chiusura: niente spicchi del fondo tra le due fasce. */ .page-end-joined .end { position: relative; z-index: 1; } .page-end-joined .foot { margin-top: -1px; border-radius: 0; } /* ══════════════════════════════════════════ CHI SIAMO — l'ultima tappa: l'invito ══════════════════════════════════════════ */ /* E' una tappa come le altre — pallino, spina, data, stesso passo del magnete — ma cambia materia: al posto di occhiello, titolo nero e numerone c'e' una lastra scura con l'invito. La fila non si interrompe, si chiude. */ .story-event--cta.is-active::before { background: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 18%, transparent); } /* la lastra prende tutta la cassa: sporge sopra la colonna di destra, che su questa tappa e' spenta, e riempie la fascia in altezza lasciando solo un filo di carta sopra e sotto. Il pallino e la spina restano fuori, a sinistra: e' l'unico segno che siamo ancora nella cronologia. */ .cta-tappa { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; overflow: hidden; margin: 16px calc(-1 * (var(--story-destra) + var(--story-gap))) 16px 0; padding: clamp(34px, 4.4vw, 76px); border-radius: 32px; background: var(--ink); color: #fff; } /* l'unico ornamento: la chiocciola nell'angolo, che dice da dove si continua senza doverlo scrivere */ .cta-tappa::before { content: "@"; position: absolute; right: .02em; bottom: -.36em; font-family: var(--display); font-size: clamp(220px, 30vw, 460px); line-height: .8; color: rgba(255, 255, 255, .05); pointer-events: none; } .cta-tappa__k { position: relative; margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c); } /* il titolo prende il carattere delle tappe (".story-event :is(h1, h2)") ma qui va bianco, un filo piu' piccolo e su righe piu' lunghe: dentro la lastra i 15ch delle altre tappe spezzavano dopo due parole */ /* il selettore nomina due classi perche' ".story-event :is(h1, h2)" pesa piu' di una classe sola: con una sola il titolo restava color inchiostro, cioe' invisibile sulla lastra */ .story-event--cta .cta-tappa__h { position: relative; max-width: 26ch; font-size: clamp(29px, 3.8vw, 52px); line-height: 1.04; color: #fff; } .cta-tappa__p { position: relative; margin: 20px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .74); } .cta-tappa__row { display: flex; flex-wrap: wrap; gap: 12px; } /* la linea sottile divide il discorso dall'azione: sopra il perche', sotto i due bottoni */ .cta-tappa__fondo { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid rgba(255, 255, 255, .16); } /* l'ultima tappa non ha un'illustrazione: la colonna si svuota invece di tenere accesa quella della tappa prima */ .story-date.senza-colonna { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; } @media (max-width: 640px) { .cta-tappa { border-radius: 24px; } } /* ══════════════════════════════════════════ CHI SIAMO — apertura senza numero, citazione, cronologia ══════════════════════════════════════════ */ /* qui non c'è un numero di progetto dietro: il titolo può respirare di più */ .op--chi .op__h { max-width: 19ch; } /* ── la citazione: il pezzo che dà voce alla pagina ── */ .quote { margin: 0; padding: 28px 30px; border-radius: 22px; background: var(--paper); border-left: 6px solid var(--c); } .quote p { margin: 0; font-family: var(--display); font-size: clamp(17px, 1.7vw, 21px); font-weight: 900; line-height: 1.42; letter-spacing: -.015em; color: var(--ink); } .quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); } /* ══════════════════════════════════════════ LA STORIA — tutta la pagina è una timeline su fondo bianco. Ogni tappa è una schermata, il magnete la aggancia al centro. ══════════════════════════════════════════ */ .story { position: relative; background: var(--paper); } /* ── la linea, ferma sullo schermo mentre le tappe passano ── */ .story__rail { position: sticky; top: 0; height: 0; z-index: 2; pointer-events: none; } .story__line, .story__fill { position: absolute; left: clamp(26px, 5vw, 62px); top: 0; width: 2px; border-radius: 2px; } .story__line { height: 100svh; background: var(--border); } /* la parte percorsa: l'altezza la scrive il JS */ .story__fill { height: var(--p, 0px); background: var(--c); transition: height .3s ease; } /* ── la tappa: una schermata intera ── */ .ev { position: relative; min-height: 100svh; display: flex; align-items: center; padding: var(--header-h) clamp(26px, 5vw, 62px) 0 clamp(66px, 9vw, 118px); scroll-margin-top: 0; } .ev__in { max-width: 900px; } /* il pallino, all'altezza del testo */ .ev::before { content: ""; position: absolute; left: clamp(20px, 5vw, 56px); top: 50%; z-index: 3; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--border); transition: background-color .4s ease, border-color .4s ease, transform .4s ease; } .ev.is-on::before { background: var(--c); border-color: var(--c); transform: scale(1.25); } /* l'ultima è un obiettivo: il pallino resta vuoto */ .ev--next.is-on::before { background: #fff; } /* ── il testo entra quando la tappa arriva al centro ── */ /* Senza JS il testo resta visibile: l'animazione si attiva solo quando lo script ha marcato la pagina, così un errore non svuota la pagina. */ .js-story .ev__y, .js-story .ev__t, .js-story .ev__d, .js-story .ev__n, .js-story .ev__row { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1); } .js-story .ev.is-on .ev__y, .js-story .ev.is-on .ev__t, .js-story .ev.is-on .ev__d, .js-story .ev.is-on .ev__n, .js-story .ev.is-on .ev__row { opacity: 1; transform: none; } /* le righe entrano una dopo l'altra */ .ev.is-on .ev__t { transition-delay: .08s; } .ev.is-on .ev__d { transition-delay: .16s; } .ev.is-on .ev__n, .ev.is-on .ev__row { transition-delay: .24s; } .ev__y { display: inline-grid; grid-template-columns: auto auto; align-items: end; gap: 12px; margin: 0 0 24px; padding: 11px 15px 10px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border)); border-top: 7px solid var(--c); border-radius: 5px 5px 12px 12px; background: #fff; color: var(--ink); box-shadow: 0 10px 26px rgba(14, 27, 44, .07); } .ev__m { font-size: clamp(12px, 1.25vw, 14px); font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; color: var(--c); } .ev__yr { font-family: var(--display); font-size: clamp(30px, 4vw, 48px); line-height: .8; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .ev__t { margin: 0 0 22px; font-family: var(--display); font-size: clamp(30px, 5vw, 62px); line-height: 1.03; letter-spacing: -.025em; max-width: 15ch; color: var(--ink); } .ev__d { margin: 0 0 32px; max-width: 54ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--muted); } .ev__d b { color: var(--ink); font-weight: 700; } .ev__n { display: flex; align-items: baseline; gap: 14px; margin: 0; padding-top: 24px; border-top: 2px solid var(--border); max-width: 440px; } .ev__n b { font-family: var(--display); font-size: clamp(38px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; } .ev__n b i { font-style: normal; font-size: .5em; } .ev__n span { font-size: 15px; color: var(--muted); } /* l'obiettivo non è un risultato: il numero resta scuro */ .ev--next .ev__n b { color: var(--ink); } .ev__row { display: flex; flex-wrap: wrap; gap: 12px; } /* pulsante chiaro, per le tappe su bianco */ .b--l { background: var(--paper); color: var(--ink); border-color: var(--border); } .b--l:hover { border-color: var(--ink); transform: translateY(-2px); } /* ── con animazioni ridotte: tutto fermo e visibile ── */ @media (prefers-reduced-motion: reduce) { .ev { min-height: 0; padding-top: 44px; padding-bottom: 44px; } .ev__y, .ev__t, .ev__d, .ev__n, .ev__row { opacity: 1; transform: none; transition: none; } .ev::before { transition: none; background: var(--c); border-color: var(--c); } .story__fill { display: none; } } @media (max-width: 700px) { .ev { padding-left: 52px; } .ev__t { max-width: none; } .ev__n { flex-direction: column; gap: 4px; } .story__line, .story__fill { left: 20px; } .ev::before { left: 14px; } } /* ── Timeline orizzontale con calendario ── */ .story { padding: clamp(54px, 7vw, 92px) 0 clamp(70px, 8vw, 110px); overflow: hidden; } .story__head { max-width: var(--wrap); margin: 0 auto 34px; padding: 0 32px; display: flex; align-items: end; justify-content: space-between; gap: 28px; } .story__k { margin: 0 0 9px; color: var(--c); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .story__head h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); max-width: 17ch; line-height: 1.05; } .story__rail { display: none; } .story__controls { display: flex; align-items: center; gap: 12px; flex: none; } .story__controls button { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; } .story__controls button:hover { background: var(--c); color: #fff; transform: scale(1.06); } .story__controls span { min-width: 64px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .story__controls b { color: var(--ink); font-size: 17px; } .story__track { display: flex; gap: 22px; overflow-x: auto; padding: 12px max(32px, calc((100vw - var(--wrap)) / 2 + 32px)) 30px; scroll-snap-type: x mandatory; scroll-padding-left: max(32px, calc((100vw - var(--wrap)) / 2 + 32px)); overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--c) transparent; } .story__track::after { content: ""; flex: 0 0 4vw; } .story .ev { flex: 0 0 min(900px, 84vw); min-height: 520px; display: grid; align-items: center; padding: clamp(30px, 5vw, 58px); border: 1px solid var(--border); border-radius: 28px; background: #fff; scroll-snap-align: start; scroll-snap-stop: always; box-shadow: 0 18px 50px rgba(14, 27, 44, .08); } .story .ev::before { display: none; } .story .ev__in { max-width: none; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr); column-gap: clamp(34px, 5vw, 68px); align-items: start; } .story .ev__y { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; width: 100%; margin: 0 0 clamp(36px, 5vw, 58px); padding: 0 0 24px; border: 0; border-bottom: 3px solid var(--c); background: transparent; box-shadow: none; color: var(--ink); } .story .ev__y::before { display: none; } .story .ev__m { order: 2; padding: 0; background: transparent; color: var(--c); font-size: clamp(13px, 1.5vw, 17px); text-align: left; } .story .ev__yr { order: 1; padding: 0; font-size: clamp(62px, 9vw, 112px); line-height: .72; text-align: left; color: var(--ink); } .story .ev__t { grid-column: 1; grid-row: 2 / span 3; } .story .ev__d, .story .ev__n, .story .ev__row { grid-column: 2; } .story .ev__t { max-width: 14ch; font-size: clamp(31px, 4vw, 54px); } .js-story .story .ev__y, .js-story .story .ev__t, .js-story .story .ev__d, .js-story .story .ev__n, .js-story .story .ev__row { opacity: 1; transform: none; } @media (max-width: 720px) { .story__head { align-items: flex-start; padding: 0 22px; } .story__controls span { display: none; } .story__track { padding-left: 22px; scroll-padding-left: 22px; } .story .ev { flex-basis: 88vw; min-height: 610px; padding: 28px; } .story .ev__in { grid-template-columns: 1fr; } .story .ev__y { grid-column: 1; width: 100%; margin-bottom: 30px; padding-bottom: 18px; } .story .ev__m { font-size: 12px; } .story .ev__yr { font-size: 58px; } .story .ev__t, .story .ev__d, .story .ev__n, .story .ev__row { grid-column: 1; } .story .ev__t { grid-row: auto; } } /* ══════════════════════════════════════════ CHI SIAMO — cronologia a calendario unico ══════════════════════════════════════════ */ .chronicle { max-width: var(--wrap); margin: 0 auto; padding: clamp(62px, 8vw, 108px) 32px clamp(72px, 9vw, 120px); } .chronicle__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 14px clamp(36px, 7vw, 90px); align-items: end; margin-bottom: 38px; } .chronicle__head > p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c); } .chronicle__head h2 { margin: 0; font-family: var(--display); font-size: clamp(35px, 5vw, 62px); line-height: .99; letter-spacing: -.035em; } .chronicle__head > span { display: block; max-width: 42ch; padding-bottom: 5px; font-size: 16px; line-height: 1.6; color: var(--muted); } .chronicle__shell { display: grid; grid-template-columns: minmax(260px, .76fr) minmax(0, 1.64fr); min-height: 610px; border: 1px solid var(--border); border-radius: 30px; background: #fff; box-shadow: 0 24px 64px rgba(14, 27, 44, .11); overflow: hidden; } .chronicle__calendar { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(34px, 5vw, 58px) clamp(28px, 4vw, 48px); background: var(--c); color: #fff; overflow: hidden; } .chronicle__calendar::after { content: ""; position: absolute; right: -34%; bottom: -14%; width: 105%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.045), 0 0 0 76px rgba(255,255,255,.035); } .chronicle__calendar-k { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .35); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .chronicle__calendar-k b { color: #fff; font-variant-numeric: tabular-nums; } .chronicle__calendar strong { position: relative; z-index: 1; display: block; margin-top: auto; font-family: var(--display); font-size: clamp(38px, 4.5vw, 58px); line-height: .9; letter-spacing: -.04em; white-space: nowrap; overflow-wrap: normal; } .chronicle__calendar em { position: relative; z-index: 1; display: block; margin-top: 10px; font-family: var(--display); font-size: clamp(72px, 8vw, 108px); font-style: normal; line-height: .78; letter-spacing: -.065em; color: rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums; } .chronicle__calendar-note { position: relative; z-index: 1; display: block; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 14px; font-weight: 700; line-height: 1.45; color: rgba(255, 255, 255, .88); } .chronicle__body { min-width: 0; display: flex; flex-direction: column; padding: clamp(30px, 4.5vw, 54px); } .chronicle__rail { position: relative; display: grid; grid-template-columns: repeat(9, minmax(54px, 1fr)); gap: 0; padding: 8px 0 28px; overflow-x: auto; scrollbar-width: none; } .chronicle__rail::-webkit-scrollbar { display: none; } .chronicle__rail::before { content: ""; position: absolute; left: 6%; right: 6%; top: 16px; height: 1px; background: var(--border); } .chronicle__rail button { position: relative; min-width: 58px; padding: 26px 4px 0; border: 0; background: none; color: #9aa8b6; font: inherit; cursor: pointer; } .chronicle__rail button::before { content: ""; position: absolute; top: 3px; left: 50%; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 1px var(--border); transform: translateX(-50%); transition: background .2s ease, box-shadow .2s ease, transform .2s ease; } .chronicle__rail button span, .chronicle__rail button b { display: block; } .chronicle__rail button span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .chronicle__rail button b { margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; } .chronicle__rail button:hover { color: var(--ink); } .chronicle__rail button.is-active { color: var(--c); } .chronicle__rail button.is-active::before { background: var(--c); box-shadow: 0 0 0 1px var(--c); transform: translateX(-50%) scale(1.35); } .chronicle__rail button:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 7px; } .chronicle__slides { flex: 1; display: grid; align-items: center; } .chronicle__event { grid-area: 1 / 1; animation: chronicle-in .42s cubic-bezier(.22, 1, .36, 1); } .chronicle__event[hidden] { display: none; } .chronicle__event > p { margin: 0 0 13px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c); } .chronicle__event h3 { margin: 0; max-width: 17ch; font-family: var(--display); font-size: clamp(30px, 4.1vw, 52px); line-height: 1.03; letter-spacing: -.035em; color: var(--ink); } .chronicle__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--border); } .chronicle__copy > p { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.66; color: var(--muted); } .chronicle__copy > p b { color: var(--ink); } .chronicle__copy > strong { display: block; min-width: 132px; max-width: 170px; font-size: 12px; line-height: 1.35; color: var(--muted); } .chronicle__copy > strong b { display: block; margin-bottom: 5px; font-family: var(--display); font-size: clamp(34px, 4vw, 50px); line-height: 1; letter-spacing: -.04em; color: var(--c); } .chronicle__links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 180px; } .chronicle__links a { color: var(--ink); font-size: 14px; font-weight: 750; text-decoration: none; border-bottom: 1px solid var(--border); } .chronicle__links a:hover { color: var(--c); border-color: var(--c); } .chronicle__event--goal h3 { color: var(--c); } .chronicle__controls { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 16px; margin-top: 32px; } .chronicle__controls button { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink); font-size: 21px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .chronicle__controls button:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; } .chronicle__controls button:disabled { opacity: .28; cursor: default; } .chronicle__controls span { height: 3px; overflow: hidden; border-radius: 99px; background: var(--border); } .chronicle__controls i { display: block; width: 11.111%; height: 100%; border-radius: inherit; background: var(--c); transition: width .34s ease; } @keyframes chronicle-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } @media (max-width: 880px) { .chronicle__head { grid-template-columns: 1fr; } .chronicle__head > span { max-width: 56ch; } .chronicle__shell { grid-template-columns: 1fr; } .chronicle__calendar { min-height: 260px; } .chronicle__calendar strong { margin-top: 48px; font-size: clamp(40px, 9vw, 66px); } .chronicle__calendar em { font-size: clamp(76px, 16vw, 126px); } } @media (max-width: 600px) { .chronicle { padding-left: 22px; padding-right: 22px; } .chronicle__shell { border-radius: 24px; } .chronicle__calendar { min-height: 230px; padding: 28px; } .chronicle__calendar strong { margin-top: 38px; } .chronicle__calendar-note { margin-top: 22px; } .chronicle__body { padding: 26px 24px 30px; } .chronicle__rail { grid-template-columns: repeat(9, 58px); } .chronicle__rail::before { left: 29px; right: 29px; } .chronicle__copy { grid-template-columns: 1fr; align-items: start; } .chronicle__copy > strong { max-width: none; } .chronicle__links { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .chronicle__event { animation: none; } .chronicle__controls i, .chronicle__rail button::before { transition: none; } } /* ── Chi siamo: timeline verticale del concept, data in alto e immagine nello spazio libero ── */ .story-scroll { max-width: var(--wrap); margin: 0 auto; /* quasi niente coda in basso: l'ultima tappa e' l'invito e il piede attacca subito dopo. I 26px che restano sono il gioco del magnete: senza di loro il bordo del piede si affaccia sotto l'ultima tappa. */ padding: 0 32px 26px; } /* le due misure stanno in variabili perche' le usa anche l'ultima tappa, che deve sporgere sopra la colonna di destra: prima erano due frazioni (1.24 e .76) e nessuna formula poteva ricavarne la larghezza. Niente percentuali: nel grigliato si misurerebbero sulla cassa, nel margine negativo della lastra sulla colonna, e la lastra restava corta di un pezzo. */ .story-scroll__layout { --story-gap: clamp(44px, 7vw, 96px); --story-destra: clamp(280px, 34vw, 470px); display: grid; grid-template-columns: minmax(0, 1fr) var(--story-destra); gap: var(--story-gap); align-items: start; } /* nel markup viene prima per accessibilità; visivamente occupa il vuoto a destra */ .story-date { grid-column: 2; transition: opacity .4s ease; grid-row: 1; position: sticky; top: var(--header-h); min-width: 0; min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); } /* la data vive in alto, in negativo: è l'orologio della storia, non un titolo. La targa stringe sul testo, quindi non ha "right": la misura la fa la data. Il corpo sta qui e non sulla b, così i margini interni crescono col carattere. */ .story-date__when { position: absolute; top: clamp(30px, 6vh, 64px); left: 0; display: inline-flex; align-items: center; padding: .3em .62em .38em; border-radius: 999px; background: var(--ink); /* la targa e un segnalibro, non un titolo: chiedendo l'anno fermo la larghezza e diventata fissa, quindi era sempre grande come il caso peggiore. Scesa di corpo, la massa si dimezza e la logica del calendario resta intatta. */ font-size: clamp(18px, 1.8vw, 26px); } .story-date__when b { font-family: var(--display); font-weight: 900; font-size: inherit; line-height: 1.06; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: .26em; } /* Effetto calendario. Il mese occupa sempre la larghezza del mese più lungo: così l'anno parte sempre dallo stesso punto e non si sposta mai, nemmeno passando da "Marzo" a "Settembre". Il ::before è un calibro invisibile — se un giorno entra un mese più lungo di settembre, va aggiornato qui. Sta su ::after e non su ::before perché l'allineamento a "baseline" guarda la PRIMA riga dell'elemento: col calibro davanti, il mese si allineava alla riga invisibile e finiva più basso dell'anno. */ .story-date__mese, .story-date__anno { display: inline-block; position: relative; /* la profondita' del foglietto che si strappa, qui sotto */ perspective: 300px; } /* Effetto calendario a strappo: quando la casella cambia, il valore nuovo sta gia' fermo al suo posto e il vecchio gli ricade davanti come un foglietto incernierato appena sopra il bordo alto. Il foglietto ha lo sfondo della targa, cosi' copre il nuovo finche' non si e' piegato via. Lo strato lo crea il JS al primo cambio; da fermo e' invisibile. */ .story-date__valore { display: inline-block; } .story-date__foglia { position: absolute; left: 0; top: 0; /* stretta sulla sua parola, non sul calibro della casella: il nuovo valore aspetta comunque sotto, non c'e' niente da coprire */ width: max-content; white-space: nowrap; /* un filo piu' chiara della targa: cadendo prende luce e si capisce che e' una scheda di carta, non il testo che si accartoccia */ background: color-mix(in srgb, var(--ink) 85%, #fff); border-radius: 6px; padding: 0 .14em; margin: 0 -.14em; transform-origin: 50% -18%; opacity: 0; pointer-events: none; } .story-date__mese::after { content: "Settembre"; display: block; height: 0; overflow: hidden; visibility: hidden; } /* al centro, dove prima stava la data gigante, si alternano le immagini */ /* La foto e' un adesivo: bordo bianco spesso come le parole della home, leggermente storta, appiccicata alla pagina senza cornice ne' fondo. Orizzontale 4:3: le foto dai seminari sono tutte cosi'. Il contenitore non taglia niente (la rotazione deve sporgere) e non ha sfondo: prima del caricamento non c'e' un rettangolo grigio che aspetta. */ .story-date__media { position: relative; width: min(100%, 470px); aspect-ratio: 4 / 3; } /* Il mucchio: ogni tappa POSA la sua stampa sopra le precedenti, che restano li' sotto a spuntare con bordi e angoli. Tornando indietro, l'ultima si solleva e se ne va. L'ordine di impilamento e' quello del documento: niente z-index da gestire. Solo transform e opacity. */ .story-date__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 9px solid #fff; border-radius: 18px; /* box-shadow e non drop-shadow: la sagoma e' un rettangolo stondato e l'ombra lo segue da sola, senza ricalcoli sul cambio di tappa. La riga bianca a +3px e' lo spessore dell'adesivo, come sulle parole. */ box-shadow: 0 3px 0 #fff, 0 12px 22px rgba(14, 27, 44, .20); opacity: 0; /* stato "in mano": sopra il mucchio, piu' grande e piu' ruotata. La posa e' la transizione verso is-posata; il ritiro e' la stessa strada al contrario, la stampa si rialza e sparisce. */ transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 34px)) rotate(calc(var(--r, 0deg) * 1.7)) scale(1.06); transition: opacity .34s ease, transform .58s cubic-bezier(.22, 1, .36, 1); will-change: transform, opacity; } .story-date__media img.is-posata { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--r, 0deg)); } /* ogni stampa ha il suo angolo e il suo piccolo scarto: e' quello che fa spuntare il mucchio da sotto la stampa in cima. Numeri a mano, nessuna formula: un mucchio vero non ha un passo regolare. */ .story-date__media img:nth-child(1) { --r: -2.4deg; --tx: -10px; --ty: 5px; } .story-date__media img:nth-child(2) { --r: 2.2deg; --tx: 13px; --ty: -3px; } .story-date__media img:nth-child(3) { --r: -1.4deg; --tx: -14px; --ty: -6px; } .story-date__media img:nth-child(4) { --r: 2.8deg; --tx: 8px; --ty: 7px; } .story-date__media img:nth-child(5) { --r: -2deg; --tx: 14px; --ty: 2px; } .story-date__media img:nth-child(6) { --r: 1.5deg; --tx: -8px; --ty: -5px; } .story-date__media img:nth-child(7) { --r: -1.7deg; --tx: 5px; --ty: -2px; } @media (prefers-reduced-motion: reduce) { .story-date__media img { transition: opacity .3s ease; } } .story-scroll__events { grid-column: 1; grid-row: 1; position: relative; padding-left: clamp(36px, 5vw, 64px); } /* i pallini stanno a meta' tappa, e la tappa e' alta come la fascia: la spina parte e finisce esattamente li', altrimenti non tocca la prima e l'ultima */ .story-scroll__events::before { content: ""; position: absolute; left: 7px; top: calc((100svh - var(--header-h)) / 2); bottom: calc((100svh - var(--header-h)) / 2); width: 2px; border-radius: 99px; background: var(--border); } .story-event { position: relative; /* alta quanto la fascia visibile, non quanto il viewport: con lo scroll-padding dell'header le tappe si posano a 0, 1x, 2x... la fascia, e il contenuto e' centrato senza padding di compenso */ min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: 0; opacity: .28; transform: translateY(18px); transition: opacity .42s ease, transform .55s cubic-bezier(.22,1,.36,1); scroll-margin-top: 0; /* ogni gesto di scroll si blocca su una tappa: data e testo restano allineati */ scroll-snap-align: center; scroll-snap-stop: always; } .story-event::before { content: ""; position: absolute; left: clamp(-64px, -5vw, -36px); top: 50%; width: 14px; height: 14px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 1px var(--border); transform: translateY(-50%); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; } /* l'invito a scorrere vive in fondo alla prima tappa: scorre via da solo e si spegne con lei quando smette di essere attiva, senza bisogno di script. Il selettore nomina due classi perche ".story-event > p" (gli occhielli verdi) pesa piu di una classe sola e gli imporrebbe il proprio colore. */ .story-event > p.story-scorri { position: absolute; left: 0; bottom: clamp(22px, 5vh, 54px); margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .story-event > p.story-scorri svg { width: 14px; height: 14px; animation: story-scorri 2.1s ease-in-out infinite; } @keyframes story-scorri { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } .story-event.is-active { opacity: 1; transform: none; } .story-event.is-active::before { background: var(--c); box-shadow: 0 0 0 1px var(--c); transform: translateY(-50%) scale(1.28); } .story-event--goal.is-active::before { background: #fff; } .story-event > p { margin: 0 0 15px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c); } .story-event :is(h1, h2) { margin: 0; max-width: 15ch; font-family: var(--display); font-size: clamp(34px, 4.7vw, 58px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); } .story-event--goal h2 { color: var(--c); } .story-event__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: end; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--border); } .story-event__copy > p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.66; color: var(--muted); } .story-event__copy > p b { color: var(--ink); } .story-event__copy > strong { display: block; min-width: 116px; max-width: 146px; font-size: 12px; line-height: 1.35; color: var(--muted); } .story-event__copy > strong b { display: block; margin-bottom: 5px; font-family: var(--display); font-size: clamp(34px, 4vw, 50px); line-height: 1; letter-spacing: -.04em; color: var(--c); } .story-event__links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 170px; } .story-event__links a { color: var(--ink); font-size: 14px; font-weight: 750; text-decoration: none; border-bottom: 1px solid var(--border); } .story-event__links a:hover { color: var(--c); border-color: var(--c); } @media (max-width: 900px) { .story-scroll__layout { grid-template-columns: 1fr; gap: 0; } .story-date { grid-column: 1; grid-row: 1; top: var(--header-h); z-index: 4; min-height: 0; align-items: flex-start; gap: 3px; margin: 0 -32px; padding: 13px 32px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); } .story-date__when { position: static; } .story-date__when b { font-size: clamp(21px, 5.4vw, 30px); } .story-date__media { display: none; } .story-scroll__events { grid-column: 1; grid-row: 2; padding-left: 38px; } .story-event { min-height: 78svh; padding-top: calc(var(--header-h) + 42px); } .story-event::before { left: -38px; top: calc(50% + 21px); } .story-scroll__events::before { top: 39svh; bottom: 39svh; } } @media (max-width: 600px) { .story-scroll { padding-left: 22px; padding-right: 22px; } .story-date { margin: 0 -22px; padding-left: 22px; padding-right: 22px; } .story-event__copy { grid-template-columns: 1fr; align-items: start; } .story-event__copy > strong { max-width: none; } .story-event__links { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .story-event, .story-event::before, .story-date__media img { transition: none; } .story-event > p.story-scorri svg { animation: none; } } /* ── domande frequenti ── */ .faq { margin: 0; } .faq > div { padding: 20px 0; border-top: 1px solid var(--border); } .faq > div:first-child { border-top: 0; padding-top: 0; } .faq dt { margin-bottom: 8px; font-size: 17.5px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); } .faq dd { margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.62; color: var(--muted); } /* la nota in coda alla fascia colorata: per l'altro pubblico */ .end__n { margin: 26px auto 0; max-width: 56ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .75); } .end__n a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .5); } .end__n a:hover { border-bottom-color: #fff; } /* elenco con testo più grande, per le sezioni senza colonne */ .li--big li { padding-bottom: 16px; font-size: 16.5px; line-height: 1.62; } /* Micro for Macro: chi mette il capitale e chi lo riceve */ .money-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 32px 0 0; padding: 0; } .money-flow li { position: relative; min-width: 0; padding: 24px 22px 26px; border: 1px solid var(--border); border-radius: 20px; background: #fff; } .money-flow li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -19px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; transform: translateY(-50%); } .money-flow span { display: block; margin-bottom: 28px; font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--c); } .money-flow strong { display: block; min-height: 2.35em; font-family: var(--display); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); } .money-flow p { margin: 15px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .money__note { margin: 18px 0 0; padding: 18px 20px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 14.5px; line-height: 1.6; color: var(--muted); } @supports not (background: color-mix(in srgb, red 7%, #fff)) { .money__note { background: var(--paper); } } @media (max-width: 980px) { .money-flow { grid-template-columns: repeat(2, 1fr); } .money-flow li:nth-child(2)::after { content: "↓"; top: auto; right: 50%; bottom: -19px; transform: translateX(50%); } } @media (max-width: 580px) { .money-flow { grid-template-columns: 1fr; } .money-flow li:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -19px; transform: translateX(50%); } .money-flow li:nth-child(2)::after { display: grid; } .money-flow strong { min-height: 0; } } /* Finance for Schools: percorsi distinti per docenti e studenti */ .audience { scroll-margin-top: calc(var(--header-h) + 18px); } .audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .audience__card { display: flex; flex-direction: column; min-width: 0; padding: clamp(26px, 4vw, 40px); border: 1px solid var(--border); border-radius: 26px; background: #fff; } .audience__card--teacher { border-top: 7px solid var(--ink); } .audience__card--student { border-top: 7px solid var(--c); } .audience__card > span { margin-bottom: 24px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--c); } .audience__card h3 { margin: 0; max-width: 17ch; font-family: var(--display); font-size: clamp(27px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -.03em; } .audience__card > p { margin: 18px 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--muted); } .audience__card ul, .audience__card ol { margin: 0 0 26px; padding-left: 20px; color: var(--ink); } .audience__card li { padding: 4px 0 4px 5px; font-size: 14.5px; line-height: 1.5; } .audience__card > a { display: inline-flex; align-self: flex-start; margin-top: auto; padding-bottom: 5px; border-bottom: 2px solid currentColor; color: var(--ink); font-size: 14.5px; font-weight: 800; text-decoration: none; } .audience__card--student > a { color: var(--c); } .audience__card > a:hover { opacity: .64; } @media (max-width: 760px) { .audience__grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════ CONTATTI — modulo e card con indirizzo ══════════════════════════════════════════ */ .contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(42px, 7vw, 92px); align-items: start; } .contact-intro { position: sticky; top: calc(var(--header-h) + 30px); } .contact-routes { display: grid; gap: 10px; margin-top: 32px; } .contact-route { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 13px; padding: 18px 19px; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .contact-route span { font-size: 12px; font-weight: 800; color: var(--c); } .contact-route b { font-size: 16px; } .contact-route i { font-style: normal; font-size: 20px; color: var(--c); transition: transform .2s ease; } .contact-route:hover { transform: translateX(7px); border-color: var(--c); box-shadow: 0 12px 30px rgba(14, 27, 44, .08); } .contact-route:hover i { transform: translateX(4px); } .contact-direct { margin: 24px 0 0; font-size: 15px; color: var(--muted); } .contact-direct a { color: var(--ink); font-weight: 750; text-underline-offset: 4px; } .contact-card { padding: clamp(26px, 4vw, 44px); border-radius: 26px; background: #fff; box-shadow: 0 18px 52px rgba(14, 27, 44, .10); } .contact-card__k { margin: 0 0 8px; color: var(--c); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .contact-card > h2 { margin: 0 0 28px; font-family: var(--display); font-size: clamp(29px, 3vw, 40px); } .contact-card .form { max-width: none; } @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } .contact-intro { position: static; } } a.card { text-decoration: none; } /* ── il modulo ── */ .form { max-width: 520px; } .form__r { margin-bottom: 18px; } .form__r label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; color: var(--ink); } .form__r label span { font-weight: 500; color: var(--muted); } .form__r input, .form__r select, .form__r textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease; } .form__r textarea { resize: vertical; min-height: 120px; line-height: 1.55; } .form__r input:focus, .form__r select:focus, .form__r textarea:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, #fff); } @supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 18%, #fff)) { .form__r input:focus, .form__r select:focus, .form__r textarea:focus { outline: 2px solid var(--c); outline-offset: 1px; } } /* il campo non compilato si segnala solo dopo il primo tentativo di invio */ .form.is-checked :invalid { border-color: var(--red); } /* Sul pannello dei contatti i campi sono pillole bianche senza bordo (".contact-form .form__r input { border: 0 }"), quindi il border-color rosso qui sopra non si disegnava: una mail con lo spazio dentro veniva rifiutata senza che si vedesse quale campo fosse. Il segnale e' un anello rosso intorno alla pillola, che sul fondo scuro si legge, piu' l'etichetta rossa. */ .contact-form.is-checked .form__r :invalid { box-shadow: 0 0 0 2px var(--red); } .contact-form.is-checked .form__r:has(:invalid) label { color: var(--red); } /* La spunta obbligatoria ha bisogno di un segnale suo: su una casella nativa il border-color non si disegna, quindi il modulo si rifiutava di partire senza mostrare niente. Contorno rosso, testo rosso e la riga qui sotto. */ .form.is-checked .form__consent input:invalid { outline: 2px solid var(--red); outline-offset: 2px; } .form.is-checked .form__consent input:invalid + span { color: var(--red); } /* l'avviso sta nella stessa riga del consenso: la riga e' larga 1015px e il testo ne usa 389, quindi c'e' spazio in abbondanza. flex: none perche' su una finestra strettina si accorci il testo, non il messaggio. */ .form__consent-err { flex: none; margin: 0; font-size: 13px; font-weight: 600; color: var(--red); } .form__p { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--muted); } .form__ok { margin: 0; padding: 20px 24px; border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); font-size: 16.5px; font-weight: 700; color: var(--c); } @supports not (background: color-mix(in srgb, red 10%, #fff)) { .form__ok { background: var(--paper); border-color: var(--border); } } /* i due recapiti principali, grandi e cliccabili */ .reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .reach__i { display: block; padding: 26px 28px; border: 1px solid var(--border); border-radius: 20px; background: #fff; text-decoration: none; color: inherit; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .reach__i:hover { border-color: var(--c); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(14, 27, 44, .1); } .reach__i:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; } .reach__k { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--c); } .reach__i b { font-family: var(--display); font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -.02em; color: var(--ink); word-break: break-word; } /* i dati legali in fondo: piccoli, non gridano */ .det { margin: 0; } .det > div { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 13px 0; border-top: 1px solid var(--border); } .det > div:first-child { border-top: 0; padding-top: 0; } .det dt { font-size: 14.5px; font-weight: 700; color: var(--ink); } .det dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); } @media (max-width: 560px) { .det > div { grid-template-columns: 1fr; gap: 4px; } } /* ── Contatti: un centralino visivo, non una pagina da compilare ── */ .contact-hub { padding-top: clamp(58px, 8vw, 104px); } /* stesse colonne della griglia dei riquadri qui sotto: il paragrafo d'appoggio parte esattamente dove parte la colonna destra */ .contact-hub__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 18px 14px; margin-bottom: 26px; } .contact-hub__head .s__k { grid-column: 1 / -1; margin-bottom: -2px; } .contact-hub__head h1 { margin: 0; font-size: clamp(32px, 4.2vw, 54px); line-height: 1; } .contact-signals { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .contact-signal { position: relative; min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 38px); border-radius: 26px; color: #fff; text-decoration: none; overflow: hidden; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; } /* ogni porta ha il suo glifo tipografico gigante, sul modello della @ del riquadro nero: lo dichiara l'HTML con data-glyph, qui si disegna */ .contact-signal::before { content: attr(data-glyph); position: absolute; left: -.16em; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: clamp(180px, 17vw, 260px); line-height: 1; color: rgba(255, 255, 255, .09); pointer-events: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .3s ease; } .contact-signal > * { position: relative; z-index: 1; } .contact-signal--green { background: var(--green); } .contact-signal--red { background: var(--red); } .contact-signal--blue { background: var(--blue); } .contact-signal--ink { background: var(--ink); } .contact-signal > span { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .78; } .contact-signal strong { font-family: var(--display); font-size: clamp(28px, 2.9vw, 40px); line-height: .98; letter-spacing: -.03em; } .contact-signal small { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.35); font-size: 14px; font-weight: 700; } .contact-signal small b { font-size: 20px; transition: transform .2s ease; } /* all'hover il riquadro si solleva pulito e il glifo gli risponde: niente più rotazione e deformazione del raggio, leggevano come un glitch */ .contact-signal:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(14, 27, 44, .16); } .contact-signal:hover::before { transform: translateY(-50%) scale(1.07) rotate(-4deg); color: rgba(255, 255, 255, .13); } .contact-signal:hover small b { transform: translate(4px, -4px); } /* Il riquadro nero: solo la scritta, una @ enorme tagliata a sinistra, e al click apre il pannello col modulo. */ .contact-signal--toggle { position: relative; appearance: none; border: 0; font: inherit; text-align: left; cursor: pointer; } /* Il pannello del modulo: si sovrappone alla griglia e copre tutti e quattro i riquadri. Si chiude con la × o con Esc. */ .contact-panel { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; padding: clamp(24px, 3.5vw, 46px); border-radius: 26px; background: var(--ink); color: #fff; overflow: hidden; } .contact-panel[hidden] { display: none; } .contact-panel:not([hidden]) { animation: contact-panel-in .3s cubic-bezier(.22, 1, .36, 1); } @keyframes contact-panel-in { from { opacity: 0; transform: scale(.98); } } .contact-panel .contact-panel__close { position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; } .contact-panel .contact-panel__close:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); } .contact-panel::before { content: "@"; position: absolute; left: -4vw; bottom: -10vw; font-family: var(--display); font-size: clamp(260px, 36vw, 520px); line-height: 1; color: rgba(255,255,255,.06); pointer-events: none; } .contact-panel > * { position: relative; z-index: 1; } .contact-panel__head { margin-bottom: 18px; padding-right: 60px; } .contact-panel__head span { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .78; } .contact-panel__head strong { font-family: var(--display); font-size: clamp(31px, 4.2vw, 54px); line-height: .98; letter-spacing: -.035em; } .contact-panel .contact-form { display: flex; flex-direction: column; flex: 1; } .contact-panel .form__r { margin-bottom: 12px; } .contact-panel .form__r label { margin-bottom: 6px; color: rgba(255,255,255,.76); } .contact-panel .contact-form__msg { display: flex; flex: 1; flex-direction: column; } .contact-panel .contact-form__msg textarea { flex: 1; min-height: 88px; } .contact-panel .contact-form__send { margin-top: auto; } .contact-panel .contact-form__send .b { background: #fff; color: var(--ink); } .contact-panel .contact-form__send .form__p { color: rgba(255,255,255,.65); } .contact-panel .form__consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 16px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .76); } .contact-panel .form__consent input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #fff; } .contact-panel .form__consent a { color: #fff; } .contact-panel .form__ok { border: 0; background: #fff; color: var(--ink); } .contact-compose { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px, 6vw, 80px); margin-top: clamp(58px, 8vw, 100px); padding: clamp(34px, 6vw, 72px); border-radius: 30px; background: var(--blue); color: #fff; overflow: hidden; } .contact-compose::before { content: "@"; position: absolute; left: -3vw; bottom: -8vw; font-family: var(--display); font-size: clamp(190px, 30vw, 430px); line-height: 1; color: rgba(255,255,255,.09); pointer-events: none; } .contact-compose__intro { position: relative; z-index: 1; } .contact-compose__intro p { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); } .contact-compose__intro h2 { margin: 0 0 22px; font-size: clamp(31px, 4vw, 52px); line-height: 1; } .contact-compose__intro span { display: block; max-width: 32ch; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.82); } .contact-form { position: relative; z-index: 1; max-width: none; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact-form .form__r label { color: #fff; } .contact-form .form__r input, .contact-form .form__r select, .contact-form .form__r textarea { border: 0; background: #fff; } .contact-form .form__r input::placeholder, .contact-form .form__r textarea::placeholder { color: #91a0b0; } .contact-form__send { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .contact-form__send .b { flex: none; background: var(--ink); color: #fff; } .contact-form__send .form__p { margin: 0; color: rgba(255,255,255,.74); text-align: right; } .contact-form__send .form__p a { color: #fff; } .contact-compose > .form__ok { position: relative; z-index: 2; grid-column: 2; background: #fff; border: 0; color: var(--blue); } @media (max-width: 820px) { .contact-hub__head, .contact-compose { grid-template-columns: 1fr; } .contact-hub__head .s__k { margin-bottom: -10px; } .contact-compose > .form__ok { grid-column: 1; } } @media (max-width: 760px) { .contact-signals { grid-template-columns: 1fr; } } @media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } .contact-signal { min-height: 230px; } .contact-form__send { align-items: flex-start; flex-direction: column; } .contact-form__send .form__p { text-align: left; } } /* ══════════════════════════════════════════ CENTRO DATI — la sezione della pagina Ricerca ══════════════════════════════════════════ */ /* titolo di terzo livello dentro una sezione lunga */ .s__t3 { margin: clamp(38px, 5vw, 56px) 0 14px; font-family: var(--display); font-size: clamp(19px, 2vw, 24px); letter-spacing: -.02em; } /* la scheda del dataset */ .ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 28px; background: var(--border); border-radius: 20px; overflow: hidden; } .ds__i { background: #fff; padding: 24px 22px; } .ds__i b { display: block; font-family: var(--display); font-size: clamp(28px, 3.2vw, 38px); line-height: 1; letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; } .ds__i span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); } /* ── le barre delle risposte corrette ── */ .bars { list-style: none; margin: 22px 0 0; padding: 0; } .bars li { display: grid; grid-template-columns: minmax(0, 320px) 1fr 62px; gap: 18px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); } .bars li:first-child { border-top: 0; } .bars__q { font-size: 15px; line-height: 1.45; color: var(--ink); } .bars__t { height: 10px; border-radius: 5px; background: var(--paper); overflow: hidden; } .bars__f { display: block; height: 100%; width: var(--w, 0%); border-radius: 5px; background: var(--c); } .bars__n { font-family: var(--display); font-size: 15px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } /* la domanda peggiore: si stacca dalle altre */ .bars--low .bars__f { background: var(--red); } .bars--low .bars__q, .bars--low .bars__n { color: var(--red); font-weight: 700; } /* ── il dato messo in evidenza ── */ .hi { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 46px); align-items: center; margin: 34px 0 0; padding: 30px 32px; border-radius: 22px; background: var(--ink); color: #fff; } .hi__n { margin: 0; font-family: var(--display); font-size: clamp(50px, 7vw, 86px); line-height: .9; letter-spacing: -.04em; color: var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; } .hi__n i { font-style: normal; font-size: .45em; } .hi__t { margin: 0 0 10px; font-family: var(--display); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.2; letter-spacing: -.02em; } .hi__d { margin: 0; max-width: 58ch; font-size: 15.5px; line-height: 1.62; color: rgba(255, 255, 255, .78); } .hi__d b { color: #fff; font-weight: 700; } /* ── i divari per sottogruppo ── */ .gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; } .gap { padding: 24px 24px 26px; border: 1px solid var(--border); border-radius: 20px; background: #fff; } .gap__k { margin: 0 0 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--c); } .gap__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--muted); } .gap__row b { font-family: var(--display); font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; } /* la prima riga di ogni divario è quella alta: prende il colore */ .gap__row:first-of-type b { color: var(--c); } .gap__d { margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .gap__d b { color: var(--ink); font-weight: 700; } @media (max-width: 820px) { .bars li { grid-template-columns: 1fr 54px; gap: 10px 14px; } .bars__q { grid-column: 1 / -1; } .hi { grid-template-columns: 1fr; gap: 14px; } } /* ══════════════════════════════════════════ PERSONE — card con il ritratto in cima. Le foto non ci sono ancora: al loro posto le iniziali su fondo colorato. Quando arrivano, basta scommentare dentro .p__ph. ══════════════════════════════════════════ */ .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .p { display: flex; flex-direction: column; padding: 0 0 24px; border: 1px solid var(--border); border-radius: 22px; background: #fff; overflow: hidden; transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease, border-color .26s ease; } .p:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(14, 27, 44, .12); border-color: var(--c); } /* il posto della foto: quadrato, come una scheda di squadra */ .p__ph { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: color-mix(in srgb, var(--c) 12%, var(--paper)); overflow: hidden; } @supports not (background: color-mix(in srgb, red 12%, #fff)) { .p__ph { background: var(--paper); } } .p__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } /* le iniziali, finché la foto non c'è */ .p__ini { font-family: var(--display); font-size: clamp(34px, 4vw, 46px); letter-spacing: -.02em; color: var(--c); opacity: .5; } .p__r { margin: 20px 22px 8px; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--c); } .p__n { margin: 0 22px 9px; font-family: var(--display); font-size: 19px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); } .p__b { margin: 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--muted); } /* i posti ancora da confermare: tratteggiati e smorzati, così non si pubblicano per sbaglio */ .p--todo { border: 2px dashed var(--border); background: var(--paper); } .p--todo:hover { transform: none; box-shadow: none; border-color: var(--border); } .p--todo .p__ph { background: var(--grigio-vuoto); } .p--todo .p__ini { color: #b3bdc8; opacity: 1; } .p--todo .p__r { color: #9aa8b6; } .p--todo .p__n, .p--todo .p__b { color: #b3bdc8; } /* link dentro il testo */ .lnk { color: var(--c); text-decoration: none; border-bottom: 1px solid currentColor; } .lnk:hover { opacity: .75; } @media (prefers-reduced-motion: reduce) { .p { transition: none; } .p:hover { transform: none; } } /* ══════════════════════════════════════════ BLOG ══════════════════════════════════════════ */ /* Gli anchor si fermano sotto l'header, lasciando visibile il titolo. */ #video, #articoli { scroll-margin-top: calc(var(--header-h) + 14px); } .video-section__k { margin: 0 0 12px; color: var(--c); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } /* Le schede video sono le stesse degli articoli: cambia solo la copertina, 16/9 invece che quadrata, e il tasto play sopra. */ .post--video .post__im { aspect-ratio: 16 / 9; } /* titolo a sinistra, filtri o link a destra */ .s__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; } /* ── stato vuoto: onesto, non una scusa ── */ .vuoto { padding: clamp(44px, 6vw, 72px) 34px; border: 2px dashed var(--border); border-radius: 22px; background: var(--paper); text-align: center; } .vuoto__i { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--border); color: var(--c); } .vuoto__i svg { width: 27px; height: 27px; } .vuoto__t { margin: 0 0 12px; font-family: var(--display); font-size: clamp(21px, 2.3vw, 27px); letter-spacing: -.02em; } .vuoto__d { margin: 0 auto; max-width: 54ch; font-size: 16.5px; line-height: 1.65; color: var(--muted); } .vuoto__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; } /* pulsante chiaro, per stare sul fondo grigio */ .b--g { background: #fff; color: var(--ink); border-color: var(--border); } .b--g:hover { border-color: var(--ink); transform: translateY(-2px); } /* ── gli articoli ── */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .post { position: relative; transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .34s ease; } /* quella puntata passa sopra le vicine mentre cresce */ .post:hover, .post:focus-within { z-index: 2; } /* quando una è puntata, le altre si ritirano. Lo scale non tocca la griglia: la 3x2 resta identica. */ .posts:hover .post:not(:hover):not(:focus-within), .posts:focus-within .post:not(:hover):not(:focus-within) { transform: scale(.94); opacity: .62; } .posts:hover .post:hover, .posts:focus-within .post:focus-within { transform: scale(1.04); } .post__l { display: flex; flex-direction: column; height: 100%; padding: 0 0 28px; border: 1px solid var(--border); border-radius: 22px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; } /* la copertina: quadrata come le grafiche dei social */ .post__im { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); } .post__im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } /* il velo di colore che sale sulla copertina */ .post__im::after { content: ""; position: absolute; inset: 0; background: var(--c); opacity: 0; transition: opacity .3s ease; } .post__l:hover .post__im img, .post__l:focus-visible .post__im img { transform: scale(1.06); } .post__l:hover .post__im::after, .post__l:focus-visible .post__im::after { opacity: .16; } .post__l:hover, .post__l:focus-visible { border-color: var(--c); box-shadow: 0 22px 46px rgba(14, 27, 44, .16); } .post__l:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; } /* il titolo prende il colore della pagina e il sommario si schiarisce */ .post__l:hover .post__t, .post__l:focus-visible .post__t { color: var(--c); } .post__l:hover .post__c, .post__l:focus-visible .post__c { background: var(--c); color: #fff; } /* il testo sotto la copertina rientra dai lati */ .post__c { align-self: flex-start; margin: 22px 24px 16px; padding: 6px 13px; border-radius: 999px; background: var(--paper); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c); transition: background-color .24s ease, color .24s ease; } .post__t { margin: 0 24px 10px; font-family: var(--display); font-size: 20px; line-height: 1.2; letter-spacing: -.02em; transition: color .24s ease; } .post__d { margin: 0 24px; font-size: 15px; line-height: 1.6; color: var(--muted); } /* sei articoli per volta: il resto sta nascosto finche' non si tocca il + */ .post[hidden] { display: none; } .posts__altro { display: flex; justify-content: center; padding-top: clamp(26px, 3vw, 38px); } .piu { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: background-color .16s ease, color .16s ease, transform .16s ease; } .piu svg { display: block; width: 20px; height: 20px; } .piu:hover { background: var(--ink); color: #fff; transform: scale(1.06); } .piu:active { transform: scale(.96); } .piu:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; } /* entrano in dissolvenza: non si tocca il transform, che serve all'effetto della griglia */ @keyframes post-entra { from { opacity: 0 } to { opacity: 1 } } .post--entra { animation: post-entra .32s ease both; } /* la data, spinta in fondo alla card: cosi' resta allineata su tutta la riga */ .post__data { margin: auto 24px 0; padding-top: 18px; font-size: 12.5px; font-weight: 650; letter-spacing: .01em; color: #8d9aa8; } /* ══════════════════════════════════════════ ARTICOLO ══════════════════════════════════════════ */ /* colonna stretta: un testo lungo si legge su 65-70 caratteri, non su 1180px */ .art { max-width: 720px; margin: 0 auto; padding: 0 32px; } .art__top { padding: calc(var(--header-h) + clamp(32px, 5vh, 60px)) 0 0; } .art__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 14px; font-weight: 650; color: var(--muted); text-decoration: none; transition: gap .18s ease, color .18s ease; } .art__back:hover { color: var(--ink); gap: 13px; } .art__back svg { width: 14px; height: 14px; } .art__c { display: inline-block; margin-bottom: 18px; padding: 7px 15px; border-radius: 999px; background: var(--c); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; } .art__h { margin: 0 0 20px; font-family: var(--display); font-size: clamp(31px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -.025em; } .art__sub { margin: 0 0 24px; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--muted); } .art__m { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 26px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 650; color: var(--muted); } /* la copertina esce dalla colonna del testo: dà respiro */ .art__cover { max-width: 940px; margin: clamp(28px, 4vw, 44px) auto; padding: 0 32px; } .art__cover img { width: 100%; height: auto; display: block; border-radius: 22px; } /* ── il corpo del testo ── */ .art__b { padding: clamp(28px, 4vw, 42px) 0 clamp(40px, 5vw, 64px); } .art__b p { margin: 0 0 22px; font-size: 18px; line-height: 1.72; color: #2b3a4a; } .art__b p:last-child { margin-bottom: 0; } .art__b strong, .art__b b { color: var(--ink); font-weight: 700; } .art__b h2 { margin: 44px 0 18px; font-family: var(--display); font-size: clamp(23px, 2.5vw, 30px); line-height: 1.16; letter-spacing: -.02em; } .art__b h3 { margin: 34px 0 14px; font-size: 20px; font-weight: 750; letter-spacing: -.01em; } .art__b ul, .art__b ol { margin: 0 0 24px; padding-left: 0; list-style: none; } .art__b li { position: relative; padding: 0 0 14px 28px; font-size: 18px; line-height: 1.68; color: #2b3a4a; } .art__b li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; border-radius: 3px; background: var(--c); } .art__b a { color: var(--c); text-decoration: none; border-bottom: 1px solid currentColor; } .art__b a:hover { opacity: .75; } /* il riquadro dentro l'articolo: un dato o un'azione da fare */ .art__box { margin: 34px 0; padding: 28px 30px; border-radius: 22px; background: var(--paper); border-left: 6px solid var(--c); } .art__box p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; } .art__box p:last-child { margin-bottom: 0; } /* il codice fiscale, da copiare */ .cf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; } .cf__n { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; } .cf__b { padding: 10px 20px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font: inherit; font-size: 14px; font-weight: 750; color: var(--ink); cursor: pointer; transition: background-color .16s ease, color .16s ease; } .cf__b:hover { background: var(--ink); color: #fff; } .cf__b:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; } /* il dato messo in evidenza a metà articolo */ .art__pull { margin: 38px 0; padding: 26px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .art__pull p { margin: 0; font-family: var(--display); font-size: clamp(20px, 2.3vw, 27px); line-height: 1.28; letter-spacing: -.02em; color: var(--ink); } /* ══════════════════════════════════════════ ADATTAMENTI ══════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .post, .post__l, .post__im img, .post__t, .post__c { transition: none; } .posts:hover .post:not(:hover):not(:focus-within), .posts:focus-within .post:not(:hover):not(:focus-within) { transform: none; opacity: 1; } .posts:hover .post:hover, .posts:focus-within .post:focus-within { transform: none; } .post__l:hover .post__im img, .post__l:focus-visible .post__im img { transform: none; } .post--entra { animation: none; } .piu { transition: none; } .piu:hover, .piu:active { transform: none; } .op__back, .b, .card, .card__i, .stick li, .news__f button, .pub { transition: none; } .b:hover, .card:hover, .stick li:hover, .news__f button:hover { transform: none; } } @media (max-width: 980px) { .cards { grid-template-columns: 1fr; } .posts { grid-template-columns: repeat(2, 1fr); } .two, .two--wide { grid-template-columns: 1fr; } .big { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 780px) { .news { grid-template-columns: 1fr; } .news__f input { width: 100%; } } @media (max-width: 700px) { .posts { grid-template-columns: 1fr; } .s__bar { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .pub { grid-template-columns: 1fr; gap: 8px; } .pub__s { justify-self: start; } .news__f { flex-direction: column; } .op, .end { padding-left: 22px; padding-right: 22px; } .wrap { padding-left: 22px; padding-right: 22px; } .op { border-radius: 0 0 26px 26px; } .end { border-radius: 26px 26px 0 0; } }