:root { /* Misura da progetto per la hero. Su schermi stretti sborda molto: la responsività la sistemiamo dopo. */ --title-font-size: 280px; --title-letter-spacing: -0.099em; --title-line-height: 0.75; --title-top: 9px; /* Ritocco orizzontale del titolo: l'italic "pende" e sembra decentrato. Valori negativi lo spostano a sinistra, positivi a destra. Es. -14px */ --title-nudge-x: 0px; /* Punto su cui è centrata la sagoma, sempre per il suo CENTRO (non per un bordo): sagome fini e sagome grandi restano nello stesso posto. --stamp-center-x è relativo alla colonna sinistra (metà schermo su desktop). Puoi usare % o px fissi. I ritocchi per singola sagoma sono i campi offsetX / offsetY in stickerDefinitions (di norma 0). */ --stamp-center-x: 50%; --stamp-center-y: 55%; /* ---- Sezioni (About / CV / Contatti): dimensioni e spazi ---- */ --about-text-size: clamp(15px, 1.5vw, 19px); /* grandezza del corpo del testo */ --about-line-height: 1.5; --about-width: 620px; /* larghezza della colonna di testo */ --about-pad-top: 16vh; /* spazio sopra il titolo del pannello */ --about-title-size: clamp(30px, 5vw, 60px); /* come i titoli progetto */ /* ---- Testo che "arriva dal basso e si mette a fuoco" (apertura sezione) ---- */ --reveal-up-dist: 26px; /* di quanto parte più in basso */ --reveal-up-blur: 6px; /* quanto parte sfocato */ --reveal-up-dur: 0.5s; /* durata per elemento */ --reveal-up-stagger: 0.07s; /* ritardo a cascata tra un elemento e il successivo */ --nav-x: 36px; /* distanza del menu dal bordo sinistro */ --bg-color: #F8F8F3; --bg-color-rgb: 248, 248, 243; --fg-color: #2E2E3E; --fg-color-rgb: 46, 46, 62; /* Minutaggio del video nel visore: sempre il "chiaro" del sito (qui è --bg-color, la crema chiara) con dietro una sfumatura nel "colore scuro" del momento (qui --fg-color). In dark mode i due ruoli si scambiano (vedi sotto), così restano sempre coerenti col tema. */ --pv-time-color: var(--bg-color); --pv-time-shade-rgb: var(--fg-color-rgb); } /* html.dark-mode oltre a body.dark-mode: su telefono, quando la barra degli indirizzi si nasconde/mostra, l'altezza reale della pagina cambia e può sporgere oltre il — si vede il colore di fondo di , che deve quindi conoscere anche lui il tema scuro (altrimenti resta chiaro a strisce sopra/sotto). Il JS mette la classe su entrambi, vedi "Dark mode" in script.js. */ body.dark-mode, html.dark-mode { --bg-color: #0F0F19; --bg-color-rgb: 15, 15, 25; --fg-color: #F9F9EC; --fg-color-rgb: 249, 249, 236; /* qui i ruoli si scambiano: --fg-color è ORA il chiaro, --bg-color lo scuro */ --pv-time-color: var(--fg-color); --pv-time-shade-rgb: var(--bg-color-rgb); } /* ---- Font: Aleo ---- */ @font-face { font-family: 'Aleo'; src: url('assets/Aleo-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Aleo'; src: url('assets/Aleo-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Aleo'; src: url('assets/Aleo-ExtraLightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Aleo'; src: url('assets/Aleo-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Aleo'; src: url('assets/Aleo-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: var(--bg-color); overflow: hidden; /* niente scroll di pagina: le sezioni si aprono col click */ transition: background-color 0.25s ease; font-family: 'Aleo', Georgia, serif; color: var(--fg-color); /* niente zoom (doppio tocco / pinch) su TUTTO il sito. L'unica eccezione è il visore foto a tutto schermo, che ha uno zoom suo (vedi #photo-viewer). */ touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { -webkit-tap-highlight-color: transparent; } /* ---- Header / titolo ---- */ #site-header { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: flex; flex-direction: column; align-items: center; /* sborda simmetrico: D tagliata a sx, E a dx */ justify-content: flex-start; /* a battuta in alto */ padding-top: var(--title-top); box-sizing: border-box; overflow: hidden; /* taglia ciò che esce dai lati */ } #site-title { font-family: 'Aleo', Georgia, serif; font-style: italic; color: var(--fg-color); font-size: var(--title-font-size); letter-spacing: var(--title-letter-spacing); line-height: var(--title-line-height); text-align: center; white-space: nowrap; margin: 0; /* Sequenza aprendo ABOUT / CV (variabili impostate dal JS): 1) --title-scroll-scale 1 -> ~0.09 : si rimpicciolisce restando al centro 2) --title-scroll-x 0 -> -Npx : poi scivola nell'angolo alto-SINISTRA --title-scroll-y 0 -> +Npx : e scende un filo, all'altezza della X In LAVORI / CONTATTI le variabili restano a 0: il titolo non si muove e viene sfocato dal frost. --title-page-scroll: SOLO in About/CV, quanto hai scorso il testo verso l'alto — il logo mini scorre via insieme (invece di restare fisso sopra al testo). Torna sempre a 0 prima/durante la chiusura, così l'animazione di ritorno parte dal punto giusto (vedi "Dark mode"/sezioni in script.js). */ transform-origin: top center; transform: translate(calc(var(--title-nudge-x) + var(--title-scroll-x, 0px)), calc(var(--title-scroll-y, 0px) - var(--title-page-scroll, 0px))) scale(var(--title-scroll-scale, 1)); transition: color 0.25s ease; } /* Solo in ABOUT / CV (body.hero-away) il logo mini passa DAVANTI a tutto ed è cliccabile (torna alla home). In CONTATTI resta dietro al frost. */ body.hero-away #site-header { z-index: 13; } body.hero-away #site-title { pointer-events: auto; cursor: pointer; } /* Ritocco per singola riga (positivo = destra). Di norma 0. */ #site-title .tt-name { font-weight: 200; /* Daniele Natale — Extra Light Italic */ display: inline-block; transform: translateX(var(--title-name-nudge-x, -15px)); } #site-title .tt-tag { font-weight: 400; /* a tutto tondo — Italic */ display: inline-block; transform: translateX(var(--title-tag-nudge-x, -15px)); } /* ---- Menu di navigazione (in basso a sinistra) ---- */ #main-nav { position: fixed; left: var(--nav-x); bottom: 36px; z-index: 5; display: flex; flex-direction: column; gap: 2px; font-family: 'Aleo', Georgia, serif; font-weight: 300; /* Light (ripiega su Regular finché manca il file) */ font-size: 18px; line-height: 1.32; transition: opacity 0.45s ease, filter 0.45s ease; } #main-nav a { width: -moz-fit-content; width: fit-content; /* solo il testo è area di hover */ color: var(--fg-color); text-decoration: none; text-underline-offset: 3px; cursor: pointer; transition: color 0.2s ease; } #main-nav a:hover, #main-nav a.active { /* .active = sezione aperta */ text-decoration: underline; } #main-nav .nav-year { color: var(--fg-color); opacity: 0.5; } /* dentro una sezione il menu sparisce del tutto (si dissolve piano): per cambiare sezione si esce con la X e si riclicca */ body.in-section #main-nav { opacity: 0; filter: blur(4px); pointer-events: none; } /* ---- Pulsante dark mode (in basso a destra) ---- */ #mode-btn { position: fixed; bottom: 36px; right: 48px; width: 28px; height: 28px; z-index: 5; background: none; border: none; cursor: pointer; padding: 0; -webkit-mask-image: url('assets/mode-button.svg'); mask-image: url('assets/mode-button.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--fg-color); transition: background-color 0.25s ease; } /* Nelle sezioni testuali (About / CV / Contatti) il dark mode resta visibile e cliccabile: sale sopra il frost di #sections. In "Lavori" invece nessuna regola lo solleva, quindi resta coperto dalle foto — ed è voluto. */ body.in-section #mode-btn { z-index: 14; } /* ---- Canvas 3D ---- */ #canvas-container { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100vh; /* il frutto parte invisibile e compare in dissolvenza quando è pronto (classe .fruit-in aggiunta dal JS) — niente "scatto" al caricamento */ opacity: 0; transition: opacity 0.5s ease; } #canvas-container.fruit-in { opacity: 1; } /* ABOUT / CV: mentre/dopo il volo la mela sta SOPRA a tutto, nitida (niente frost, niente overlay che la copre). */ body.hero-away #canvas-container { z-index: 20; pointer-events: none; } #canvas-container canvas { display: block; touch-action: none; } /* ============================================================ OVERLAY — fase 1 ============================================================ */ #overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: sans-serif; color: var(--fg-color); } #overlay.active { pointer-events: auto; } #overlay::before { content: ''; position: absolute; inset: 0; background: rgba(var(--bg-color-rgb), 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 0.6s ease, backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease; } #overlay.active::before { background: rgba(var(--bg-color-rgb), 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* Dimensione / posizione arrivano dal JS (campo `stamp` di ogni progetto). Il JS inietta qui dentro un

), la grandezza si regola qui / #contatti-heading { font-family: 'Aleo', Georgia, serif; font-weight: 200; font-style: italic; font-size: clamp(26px, 4vw, 46px); / ← grandezza del titolo contatti / margin: 0 0 32px; } #contatti-list { list-style: none; margin: 0; padding: 0; font-family: 'Aleo', Georgia, serif; font-weight: 300; font-size: clamp(20px, 3vw, 34px); / ← grandezza delle voci di contatto / line-height: 1.8; } #contatti-list a { color: var(--fg-color); text-decoration: none; } #contatti-list a:hover { text-decoration: underline; text-underline-offset: 4px; } / --- testo che "arriva dal basso e si mette a fuoco" all'apertura --- / .reveal-up { opacity: 0; transform: translateY(var(--reveal-up-dist)); filter: blur(var(--reveal-up-blur)); transition: opacity var(--reveal-up-dur) ease, transform var(--reveal-up-dur) cubic-bezier(0.22, 1, 0.36, 1), filter var(--reveal-up-dur) ease; transition-delay: calc(var(--i, 0) var(--reveal-up-stagger)); } .reveal-up.in { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1 !important; transform: none !important; filter: none !important; } #canvas-container { transform: none !important; } } /* ============================================================ ACHIEVEMENT "collezione completa" + bagliore mela d'oro ============================================================ / / Bagliore caldo che avvolge la mela durante la trasformazione in oro. L'opacità è guidata dall'animazione qui sotto; JS aggiunge/toglie .on. / #apple-glow { position: fixed; left: 50%; top: 48%; / ← centro del bagliore (circa il centro della mela) / width: 170vmax; / ← quanto è GRANDE il bagliore / height: 170vmax; transform: translate(-50%, -50%) scale(0.8); z-index: 3; / sopra il canvas (z 2), sotto overlay/sezioni / pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 242, 210, 0.98) 0%, rgba(255, 228, 160, 0.72) 20%, rgba(255, 216, 130, 0.30) 40%, rgba(255, 210, 120, 0) 62%); mix-blend-mode: plus-lighter; } #apple-glow.on { animation: apple-glow-pulse 2s ease forwards; / durata ≈ RAMP+HOLD+FADE del JS / } @keyframes apple-glow-pulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 26% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 32% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } } / Avviso frosted a tutto schermo / #achievement { position: fixed; inset: 0; z-index: 30; / sopra ogni altra cosa / display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; background: rgba(var(--bg-color-rgb), 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: opacity 0.45s ease, background 0.6s ease, backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease; } #achievement.show { opacity: 1; pointer-events: auto; background: rgba(var(--bg-color-rgb), 0.5); / ← quanto attenua lo sfondo / backdrop-filter: blur(18px); / ← quanto sfoca lo sfondo / -webkit-backdrop-filter: blur(18px); } .achievement-card { max-width: 430px; text-align: center; color: var(--fg-color); transform: translateY(20px) scale(0.96); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, opacity 0.5s ease 0.08s; } #achievement.show .achievement-card { transform: none; opacity: 1; } / Segnaposto ★ mostrato solo se manca il file dello sticker-premio / .achievement-badge { width: 60px; height: 60px; margin: 0 auto 20px; border: 1.5px solid var(--fg-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; } / Sticker-premio dentro l'avviso: si può prendere col mouse (o col dito) / #achievement-sticker { display: block; width: 132px; / ← grandezza dello sticker nell'avviso / height: auto; margin: 0 auto 22px; cursor: grab; -webkit-user-drag: none; user-select: none; / col dito, senza questo il browser può "rubare" il trascinamento come se fosse uno scroll della pagina: il trascinamento non parte davvero e il rilascio arriva quasi subito, come se lo sticker sparisse e ricomparisse altrove sul frutto. touch-action:none lascia gestire tutto al JS. / touch-action: none; transition: transform 0.2s ease, filter 0.2s ease; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18)); } #achievement-sticker:hover { transform: translateY(-3px) scale(1.04); } #achievement-sticker:active { cursor: grabbing; } .achievement-kicker { font-family: 'Aleo', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin: 0 0 10px; } #achievement-title { font-family: 'Aleo', Georgia, serif; font-weight: 200; font-style: italic; font-size: clamp(30px, 5vw, 46px); / ← grandezza del titolo dell'avviso / line-height: 1.05; margin: 0 0 16px; } .achievement-body { font-family: 'Aleo', Georgia, serif; font-weight: 300; font-size: clamp(15px, 1.6vw, 18px); / ← grandezza del testo dell'avviso / line-height: 1.55; margin: 0 auto 18px; max-width: 34ch; } .achievement-hint { font-family: 'Aleo', Georgia, serif; font-weight: 400; font-style: italic; font-size: 13px; letter-spacing: 0.02em; opacity: 0.55; margin: 0; } / Sticker-premio mentre lo si trascina verso la mela / #trophy-flyer { position: fixed; z-index: 25; / sopra la scena, sotto l'avviso (z 30) / width: 200px; / sovrascritto dal JS (TROPHY_STICKER.pickupWidth) / / Si muove con "left"/"top" (il JS li aggiorna ad ogni frame), esattamente come #flying-sticker — che su telefono funziona bene. Avevo provato a spostarlo con "transform" per un glitch minore su Safari (un alone quadrato attorno all'ombra durante il trascinamento), ma su telefono reale lo sticker SPARIVA del tutto per tutta la durata del trascinamento: molto peggio del glitch che volevo risolvere. Se l'alone dovesse ripresentarsi, meglio togliere il filtro SOLO durante il trascinamento piuttosto che ritoccare qui il metodo di spostamento. / transform: translate(-50%, -50%); pointer-events: none; user-select: none; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28)); / "si stacca": un piccolo ingrandimento quando lo prendi (classe .picked, JS), con un filo di rimbalzo. / transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); } #trophy-flyer.picked { transform: translate(-50%, -50%) scale(1.12); } body.placing-trophy, body.placing-trophy #canvas-container canvas { cursor: grabbing; } / mentre si sceglie il punto sulla mela, il menu/darkmode non distraggono / body.placing-trophy #main-nav, body.placing-trophy #mode-btn { opacity: 0.25; pointer-events: none; } body.in-section #trophy-flyer { display: none; } / BUG risolto: l'avviso "collezione completa" impiega fino a 0.6s per sfumare (vedi #achievement più sotto) — durante un trascinamento veloce restava sopra lo sticker (z-index più alto) per l'intera durata del gesto, e lo sticker sembrava invisibile finché non rilasciavi. Appena parte il trascinamento lo togliamo di scatto, senza aspettare la dissolvenza. / body.placing-trophy #achievement { transition: none !important; opacity: 0 !important; pointer-events: none !important; } @media (prefers-reduced-motion: reduce) { #apple-glow.on { animation: none; opacity: 0; } .achievement-card { transition: none; } #achievement-sticker:hover { transform: none; } } / ============================================================ RESPONSIVE — prima passata (bozza, da rivedere con calma) Tutto qui dentro è in @media: sopra 1200px il sito è INVARIATO. Per annullare completamente: cancella da qui fino a fine file. ============================================================ / / ---- Tablet e sotto: il titolo hero smette di essere fisso a 280px e diventa proporzionale alla larghezza (continua a sbordare un po' ai lati, come nel design). ---- / @media (max-width: 1200px) { :root { --title-font-size: 19vw; } } / ---- Tablet in verticale e telefono: l'overlay progetto diventa una PILA verticale scrollabile (titolo → descrizione → sagoma → dati → foto). Tutto in flusso: niente più posizionamenti assoluti che si accavallano. Sopra questa soglia (desktop / tablet landscape) resta a 2 colonne. ---- / @media (max-width: 820px) { :root { --title-font-size: 19vw; --nav-x: 20px; } #main-nav { bottom: 20px; font-size: 15px; } #mode-btn { right: 20px; bottom: 20px; } #close-btn, #section-close { top: 18px; right: 20px; } / la barra indirizzi di Safari/Chrome che si nasconde mentre scorri cambia l'altezza reale della finestra: con "100%" può restare uno strappo sopra o sotto col colore sbagliato (si nota con la dark mode). 100dvh = altezza "dinamica" che segue quel cambiamento. / html, body { min-height: 100dvh; } / niente selezione testo/callout ("Copia", lente d'ingrandimento) col dito: capitava trascinando lo sticker oro che invece selezionava lo schermo. / { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* titolo hero: centrato davvero (niente nudge -15px per riga) / :root { --title-name-nudge-x: 0px; --title-tag-nudge-x: 0px; --title-nudge-x: 0px; } / Sfondo dell'overlay pieno: copre titolo/menu/frutto che stanno dietro (su desktop bastava il frost semitrasparente, qui il contenuto scrolla). / #overlay { background: rgba(var(--bg-color-rgb), 0); transition: background 0.4s ease; } #overlay.active { background: rgba(var(--bg-color-rgb), 1); } #overlay.active::before { display: none; } / l'overlay scrolla e impila colonna-sx poi foto / #overlay { display: flex; flex-direction: column; } #overlay.active { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #left-column { position: static; width: 100%; min-height: 100%; / almeno uno schermo, anche se il testo è breve / flex-shrink: 0; / MAI più basso del suo contenuto: con un testo lungo, senza questa riga flexbox lo comprimeva a un solo schermo e le foto sotto finivano sovrapposte al testo (che continuava oltre) / box-sizing: border-box; display: flex; flex-direction: column; align-items: center; / colonna centrata (larghezza testo limitata sotto) / padding: 62px 18px 28px; } #project-text { position: static; left: auto; top: auto; width: 100%; max-width: 600px; } #project-meta { width: 100%; max-width: 600px; } #photo-column { max-width: 600px; margin: 0 auto; } #project-title { font-size: clamp(26px, 7vw, 40px); max-width: none; margin-bottom: 12px; } #project-description { max-width: none; font-size: 15px; line-height: 1.45; } / la sagoma va PRIMA di tutto: appena tocchi lo sticker lo vedi "atterrare". Su telefono la RIQUADRATURA è FISSA (non segue più width/height del JS): gli sticker hanno grandezze diverse e prima spostavano su/giù il testo e il pulsante "sfoglia". La sagoma e lo sticker ci stanno dentro con object-fit. / #drop-zone { position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; transform: none !important; order: -2; / prima di tutto: sagoma → dati → testo / margin: 6px auto 26px; flex: none; width: min(66vw, 260px) !important; height: 190px !important; } #drop-zone svg { object-fit: contain; } / lo sticker collezionato (telefono): riempie la sagoma e SCROLLA con la pagina. --stamp-scale è un ritocco PER STICKER (campo stamp.mobileScale in stickerDefinitions, script.js): alcuni PNG hanno molto margine trasparente e appaiono più piccoli degli altri anche a parità di sagoma. / #stamp-sticker { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-touch-callout: none; --stamp-scale: 1; transform: scale(var(--stamp-scale)); } #stamp-sticker.land { animation: stamp-land 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); } / attaccato lo sticker, il tratteggio della sagoma sparisce del tutto / #drop-zone:has(#stamp-sticker:not([hidden])) path { opacity: 0; } / niente #flying-sticker su telefono (era quello che restava incollato allo schermo) / #flying-sticker { display: none !important; } / Tipologia / Progetto n° / Anno: subito dopo la sagoma (non dopo il testo, che varia di lunghezza) così stanno SEMPRE alla stessa altezza e sono visibili appena si apre il progetto, senza dover scorrere. / #project-meta { position: static !important; left: auto; bottom: auto; order: -1; padding: 0; margin: 4px 0 22px; grid-template-columns: 1fr 1fr; row-gap: 18px; column-gap: 12px; text-align: center; } .meta-item { align-items: center; } .meta-item:nth-child(1) { order: 1; } .meta-item:nth-child(3) { order: 2; } .meta-item:nth-child(2) { order: 3; grid-column: 1 / -1; margin-top: 4px; } / sfoglia progetti / .meta-label { font-size: 11px; } .meta-value { font-size: 14px; } / Tipologia va a volte su due righe, a volte su una: riservando lo spazio per due righe la riga di "Progetto n°" sotto non sale/scende più a seconda del progetto aperto. / .meta-item:nth-child(1) .meta-value { min-height: 2.6em; } / "Progetto n°": frecce grandi da toccare, numero al centro / .meta-item:nth-child(2) .meta-nav { gap: 0; justify-content: center; width: 100%; max-width: 280px; margin: 2px auto 0; } .meta-nav button { font-size: 30px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--fg-color-rgb), 0.35); border-radius: 999px; } .meta-nav button:active { background: rgba(var(--fg-color-rgb), 0.1); } .meta-nav #meta-number { font-size: 15px; min-width: 5em; } #photo-column { position: static; width: 100%; height: auto; top: auto; right: auto; bottom: auto; overflow: visible; padding: 22px 18px 40px; } / ---- sezioni testo (About / CV / Contatti) ---- / / (overflow-y ora è nella regola base di #sections.shown, vale ovunque) / / padding-bottom piccolo (~5mm su schermo) apposta: ora che il riquadro non "inghiotte" più questo spazio (vedi nota sopra su min-height), un valore piccolo qui è già abbastanza — l'ultima riga del footer non deve restare incollata al bordo, ma nemmeno finire troppo in alto. / .section-panel { padding: 84px 20px 20px; box-sizing: border-box; min-height: 100%; } / Footer: SOLO su mobile (su desktop resta nascosto, vedi regola base). Margine sopra ridotto rispetto al desktop (era 45vh): su schermi bassi 45vh spingeva la mail troppo vicino al bordo inferiore, "a battuta". Ritocca "20vh" per spostare il footer più su/giù. / .section-footer { display: block; margin-top: 20vh; } / CV: le tre colonne (Info e contatti / Competenze / Soft Skills) si impilano una sotto l'altra invece di stare fianco a fianco. / .panel-inner.cv-inner { max-width: 100%; } .cv-grid { grid-template-columns: 1fr; row-gap: 36px; margin-top: 40px; } / ABOUT: titolo alla grandezza del titolo progetto su telefono (stessa formula di #project-title), colonna a piena larghezza. Le 3 "cose giocose" restano AFFIANCATE anche qui (non si impilano): si stringono e il testo va a capo, come nel mockup. / .about-inner { max-width: 100%; } .section-panel[data-panel="about"] .panel-title { font-size: clamp(26px, 7vw, 40px); } .about-facts { gap: 16px; margin-top: 36px; } .about-fact { padding-left: 10px; } .about-fact-label, .about-fact-value { font-size: 11.5px; } } @keyframes stamp-land { 0% { opacity: 0; transform: scale(calc(var(--stamp-scale) 1.6)) rotate(-7deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(var(--stamp-scale)) rotate(0); } } /* ---- Telefono stretto: titolo un filo più piccolo, testi ridotti ---- / @media (max-width: 560px) { :root { --title-font-size: 17.5vw; } #project-title { font-size: clamp(24px, 8.5vw, 36px); } #project-description { font-size: 14.5px; } #contatti-list { font-size: clamp(17px, 4.6vw, 22px); word-break: break-word; } #contatti-heading { font-size: clamp(24px, 7vw, 34px); } } / ============================================================ FOTO DI PROGETTO — griglia + visore a tutto schermo Il visore (#photo-viewer) è l'UNICO punto del sito dove lo zoom (pinch / doppio-tap) è permesso: lo gestisce il JS sull'immagine. ============================================================ / / Le foto vere (quando ci sono) al posto dei riquadri grigi. / .photo-shot { width: 100%; display: block; border-radius: 0px; background: rgba(var(--fg-color-rgb), 0.08); cursor: zoom-in; flex-shrink: 0; } / Miniatura video nella colonna: è un