/* =========================================================================== WoH Forum — homepage Traduzione del frame Figma "homepage definitiva" (node 314:5129). Le misure nei commenti sono quelle del frame a 1440px di larghezza. =========================================================================== */ /* ---------- Font ---------------------------------------------------------- Il kit Adobe Fonts `qjj4epd` è collegato con un in testa a index.html. Le famiglie si chiamano "ivyepic" e "ivypresto-display" (minuscole): sono i nomi che serve Typekit, non quelli di Figma. Il kit però contiene oggi solo quattro tagli — ivyepic 900 tondo, ivyepic 800 e 900 corsivo, ivypresto-display 700 corsivo — e il design non ne usa nessuno dei quattro. Se si punta alle famiglie Typekit adesso, il matching CSS ripiega sull'unico taglio disponibile e l'intero sito viene in IvyEpic Black, con la citazione in corsivo grassetto. Perciò le due variabili in `:root` restano sui ripieghi di sistema, e le famiglie Typekit si accendono da sole: `main.js` controlla quali tagli il kit dichiara davvero e, solo se ci sono tutti e dieci, mette `font-kit` su . Nessuna riga da scambiare a mano — appena il progetto web viene pubblicato completo, al ricarico successivo il sito usa i font veri. La lista dei dieci è in assets/README.md. Nota sui pesi: Adobe numera IvyPresto Display Thin come **100**, non 200. Quindi la citazione e i sottotitoli lo chiedono a 100. Ivy Epic invece segue la numerazione attesa: Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700. Il ripiego del sans è Avenir Next, non Optima: Optima ha le aste svasate e dà a tutto il sito un'aria calligrafica che con IvyEpic non c'entra nulla. Avenir Next è geometrico-umanista come IvyEpic e regge il confronto molto meglio. Per il serif Didot resta la scelta giusta: è quello col contrasto più alto fra i font di sistema, vicino al carattere di IvyPresto. Suisse Intl (--font-ui, solo le etichette della fascia loghi) non è nel kit e non è su Adobe Fonts: resta comunque sul fallback. */ /* ---------- I font installati sul computer --------------------------------- Chi ha IvyEpic e IvyPresto Display attivi via Adobe Creative Cloud li ha installati come font di sistema: e' il motivo per cui Figma li mostra giusti. Il browser puo' usarli, ma va chiesto per nome — e non con il nome `ivyepic`, che il kit Typekit ha gia' occupato: lo dichiara con soli quattro tagli e oscurerebbe quelli locali. Da qui il nome distinto. Se il font non e' installato la sorgente `local()` fallisce e si passa alla famiglia successiva della pila: nessun effetto collaterale. ATTENZIONE: questo vale solo su chi ha i font installati — chi progetta. Per i visitatori del sito non cambia nulla: a loro i font arrivano solo dal progetto web Adobe. Vedi assets/README.md. */ @font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Light'); font-weight: 300; font-style: normal; } @font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Regular'); font-weight: 400; font-style: normal; } @font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Medium'); font-weight: 500; font-style: normal; } @font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-SemiBold'); font-weight: 600; font-style: normal; } @font-face { font-family: 'IvyEpic Locale'; src: local('IvyEpic-Bold'); font-weight: 700; font-style: normal; } /* IvyEpic Medium Italic non risulta installato: per "Magnifica Humanitas" il browser inclina da se' il Medium. Non dichiariamo una faccia corsiva con sorgente tonda, altrimenti resterebbe dritta. */ @font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-Thin'); font-weight: 100; font-style: normal; } @font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-Light'); font-weight: 300; font-style: normal; } @font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-LightItalic'); font-weight: 300; font-style: italic; } @font-face { font-family: 'IvyPresto Locale'; src: local('IvyPrestoDisplay-Regular'); font-weight: 400; font-style: normal; } /* ---------- Variabili di tema --------------------------------------------- */ :root { --sand: #d8d8ca; --sand-soft: rgba(216, 216, 201, .6); --red: #ba4637; /* box primo dialogo, accenti */ --red-warm: #bb4637; /* bottone hero, "forum" nel titolo */ --grey: #d9d9d9; /* quadrato dietro al chevron dell'intro */ --verdino: #dadaca; /* fondo del footer */ --ink: #000; --ink-soft: #1d1d1b; /* etichette e filetti della fascia loghi */ --on-red: #fff; --btn-text: #f2f1df; /* testo del bottone "Vai al programma" */ --on-panel: #fcfcf9; /* testo sui pannelli delle card */ --ardesia: #2e3b46; /* banda della citazione, Versione 2 */ --font-sans: 'IvyEpic Locale', 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif; --font-serif: 'IvyPresto Locale', 'Didot', 'Bodoni 72', Georgia, serif; --font-ui: 'Suisse Intl', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; /* Larghezza del frame Figma. I margini di 50px li fa il padding dei contenitori, non questa misura: sottrarli qui li conterebbe due volte e spingerebbe tutto il contenuto verso il centro. */ --maxw: 1440px; --gutter: clamp(20px, 3.5vw, 50px); } /* Acceso da main.js solo quando il kit Adobe dichiara tutti i tagli che il design usa. Finché ne manca uno restano i ripieghi: meglio un carattere di sistema coerente che IvyEpic Black su tutto il sito. */ html.font-kit { --font-sans: "ivyepic", 'IvyEpic Locale', 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif; --font-serif: "ivypresto-display", 'IvyPresto Locale', 'Didot', 'Bodoni 72', Georgia, serif; } /* ---------- Base ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* il chevron dell'intro porta al sito */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-sans); font-weight: 400; line-height: 1.4; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4, p, ul, blockquote, figure { margin: 0; } ul { padding: 0; list-style: none; } .accent { color: var(--red); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Testata ------------------------------------------------------- Versione 2, frame 580:8420. La landing si apre su questa composizione: nella Versione 1 era la schermata di intro a parte, con la sua lastra a tutto schermo e il chevron. Qui e' una banda normale nel flusso, su bianco. Il frame e' 1440x982 e tutto dentro sta in posizione assoluta. Per non inseguire i numeri uno per uno c'e' una sola scala, `--u`, che vale 1/1440 della larghezza utile: ogni misura e' il numero di Figma moltiplicato per `--u`, e sopra i 1440 la composizione smette di crescere e si centra. Marchi 81x81 a (172,50) e (62,150), logotipo 665x285 a (163,280), mappamondo 759 a x=856 — che sborda di 175px oltre il bordo. */ .testata { position: relative; overflow-x: clip; /* il mappamondo sborda a destra */ background: #fff; } .testata-inner { --u: calc(min(100vw, var(--maxw)) / 1440); position: relative; /* la larghezza segue la scala: riducendo `--u` la composizione rimpicciolisce e resta centrata, invece di appoggiarsi al margine sinistro */ width: calc(1440 * var(--u)); max-width: 100%; margin-inline: auto; height: calc(982 * var(--u)); } /* ---- i due marchi ---- */ /* I due marchi sono una coppia gia' composta dentro a un file solo: la forma in alto a destra e quella in basso a sinistra stanno nella stessa immagine. Il riquadro e' largo 191 — la distanza fra il bordo sinistro dell'asterisco (x=62) e quello destro della croce (x=253) nel frame — cosi' ogni forma viene 81, la misura del frame. */ .marchi { position: absolute; z-index: 1; left: calc(62 * var(--u)); top: calc(50 * var(--u)); width: calc(191 * var(--u)); aspect-ratio: 370 / 312; display: block; } .marchi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* ---- il logotipo ---- */ /* Il logotipo e' una griglia 2x3: tre righe da 333x95 dentro a un riquadro di 665x285. WORDS a sinistra, of HOPE a destra, FORUM a sinistra. A tutta larghezza le righe verrebbero alte il doppio e il blocco sconfinerebbe sul testo sotto. */ .wordmark { position: absolute; z-index: 1; left: calc(163 * var(--u)); top: calc(197 * var(--u)); width: calc(665 * var(--u)); height: calc(285 * var(--u)); margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0; } .wordmark img { width: 100%; height: auto; display: block; } .wordmark-words { grid-area: 1 / 1; } .wordmark-of-hope { grid-area: 2 / 2; } .wordmark-forum { grid-area: 3 / 1; } /* ---- il titolo esteso e il payoff ---- Stanno fra il logotipo e "Primo dialogo": (163,522) nella schermata desktop, larghi 640 perche' il titolo cada su due righe come li'. */ .testata-claim { position: absolute; z-index: 1; left: calc(163 * var(--u)); top: calc(522 * var(--u)); width: calc(640 * var(--u)); } .testata-titolo { font-weight: 700; font-size: calc(34 * var(--u)); line-height: 1.05; letter-spacing: -.01em; color: var(--ink-soft); } /* Le due schermate spezzano il titolo in punti diversi: due righe sul desktop, dove l'a capo lo fa da solo la colonna da 640, e tre su mobile, dopo "Innovation:" e dopo "for". Quelli sono a capo voluti, non di larghezza — a 353 il testo starebbe su due righe — quindi stanno nell'HTML e qui restano spenti. Lo spazio prima di ogni `
` serve: spegnendolo con `display: none` l'a capo sparisce e con lui l'unico stacco fra le due parole, che finivano attaccate ("Innovation:Words"). Su mobile e' uno spazio a fine riga, che non si vede. */ .testata-titolo br { display: none; } .testata-payoff { margin-top: calc(10 * var(--u)); font-weight: 400; font-size: calc(20 * var(--u)); line-height: 1.2; color: var(--ink-soft); } /* ---- quando e dove ---- */ .testata-quando { position: absolute; z-index: 1; left: calc(163 * var(--u)); top: calc(652 * var(--u)); width: calc(600 * var(--u)); } /* Tagli letti dal frame: etichetta SemiBold 16, "23-25" SemiBold 45 in rosso, il mese SemiBold 40. Stavano nel blocco dell'intro e vanno rimessi qui. */ .intro-label { font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1.375; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); } .intro-dates { margin-top: calc(13 * var(--u)); display: flex; align-items: baseline; gap: calc(14 * var(--u)); line-height: 1; } .intro-day { font-weight: 600; font-size: calc(45 * var(--u)); color: var(--red-warm); } .intro-month { font-weight: 600; font-size: calc(40 * var(--u)); color: var(--ink-soft); } /* Il bottone: 215x39 nel frame, e il testo non scala con --u perche' sotto una certa misura diventerebbe illeggibile. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-width: calc(215 * var(--u)); height: calc(39 * var(--u)); padding-inline: calc(22 * var(--u)); background: var(--red-warm); color: var(--btn-text); font-weight: 600; font-size: max(12px, calc(16 * var(--u))); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; } .btn:hover { background: var(--red); } .testata-luogo { margin-top: calc(19 * var(--u)); font-weight: 700; font-size: calc(25 * var(--u)); line-height: 1.05; color: var(--ink-soft); } .testata-luogo span { font-weight: 400; font-size: calc(20 * var(--u)); text-transform: uppercase; } .testata-quando .btn { margin-top: calc(34 * var(--u)); } /* ---- il mappamondo ---- Il fondo della testata e' bianco come il filmato, quindi qui non serve ne' la maschera ne' la fusione: il bianco del video sparisce da solo. */ .testata-globe { position: absolute; z-index: 0; /* su mobile il logotipo gli passa sopra */ /* Ancorato a destra e centrato in verticale, non fissato con l'angolo in alto a sinistra. Nel frame e' gia' cosi' — sborda di 175 oltre il blocco e il suo centro cade a meta' banda — e serve perche' rimpicciolendolo non scappi verso l'alto e verso sinistra. */ left: auto; right: calc(-175 * var(--u)); top: 50%; translate: 0 -50%; /* `--globo` permette di ridurre il mappamondo piu' del resto, senza toccare la scala della composizione */ width: calc(759 * var(--u) * var(--globo, 1)); aspect-ratio: 1; margin: 0; pointer-events: none; } .testata-globe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* mai reso trasparente: Safari nega l'autoplay agli elementi invisibili */ } .testata-globe::before { content: ''; position: absolute; inset: 0; z-index: 1; background: url('../assets/img/mondo.jpg') center / cover no-repeat; transition: opacity .4s ease; } .testata-globe.sta-suonando::before { opacity: 0; } .testata-globe video::-webkit-media-controls, .testata-globe video::-webkit-media-controls-enclosure, .testata-globe video::-webkit-media-controls-start-playback-button { display: none !important; } /* ---------- Testata: sequenza di composizione ----------------------------- E' la stessa della schermata di intro della Versione 1: i marchi entrano, poi il logotipo riga per riga, poi le scritte. Qui in piu' entrano anche il luogo e il bottone, che nella Versione 1 stavano nella hero. */ @keyframes intro-pop { from { opacity: 0; scale: .72; } to { opacity: 1; scale: 1; } } @keyframes intro-from-l { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: 0; } } @keyframes intro-from-r { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0; } } @keyframes intro-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0; } } .marchi { animation: intro-pop .5s ease-out .10s both; } .wordmark-words { animation: intro-from-l .6s ease-out .45s both; } .wordmark-of-hope { animation: intro-from-r .6s ease-out .62s both; } .wordmark-forum { animation: intro-from-l .6s ease-out .79s both; } .testata-claim { animation: intro-rise .5s ease-out .90s both; } .intro-label { animation: intro-rise .5s ease-out 1.00s both; } .intro-dates { animation: intro-rise .5s ease-out 1.12s both; } .testata-luogo { animation: intro-rise .5s ease-out 1.24s both; } .testata-quando .btn { animation: intro-rise .5s ease-out 1.40s both; } /* Il mappamondo entra in dissolvenza come gli altri, ma l'opacita' NON puo' stare sul riquadro: e' il contenitore del