/* ========================================================= About me — collage sparso di foto attorno al testo, trascinabili Fonte: assets/pagine/{S,Tablet,L,XL}.png ("About me" section) Token: tokens.css STRUTTURA (misurata con connected-components sulle 4 tavole, non a occhio): il collage e' FULL-BLEED e tagliato ai bordi in ogni tavola — in S.png il Film esce a sinistra e Music a destra, in Tablet.png il Film esce a sinistra, in XL.png swim esce a sinistra e gym a destra (bbox fino a x=1724 su canvas 1728). Quindi: contenitore a tutta larghezza + overflow hidden, NON uno scroll orizzontale e NON un riflusso a griglia (erano entrambi errori miei nei tentativi prima). Le posizioni orizzontali sono in % della larghezza (le tavole sono larghe quanto il viewport del proprio tier, quindi le % si trasferiscono 1:1); cambiano solo le dimensioni per tier. TIER (le 4 tavole -> i breakpoint condivisi di tokens.css §7.0): S.png (402px) -> base, < 600px Tablet.png (834px) -> M, 600-899 \ identiche nella sezione About: L.png (834px) -> L, 900-1279 / stesse misure per entrambe XL.png (1728px) -> XL/XXL, >= 1280px (foto ~1.9x di M/L) Ogni elemento e' spostabile con il mouse (vedi js/about-me.js): la posizione di base resta questa, il drag aggiunge un offset sopra via le custom property --drag-x/--drag-y, cosi la rotazione "as designed" non va persa quando l'utente sposta una foto. ========================================================= */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family-base); } .about-demo { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-white); } .about { width: 100%; /* taglia il bleed laterale del collage, come nelle tavole */ overflow: hidden; /* Contesto di stacking proprio: senza, lo z-index:100 di una foto in drag (sotto) non resta confinato al collage ma sale a competere direttamente con #contacts (z-index:10, page.css) nel contesto di radice, finendo sopra al form "Get in touch" che deve restare sempre in primo piano rispetto alle foto. */ isolation: isolate; } /* Il primo piano (js/about-focus.js) e' l'eccezione: DEVE uscire da questo contenimento, altrimenti il suo z-index:401 (.is-focus-host) resta comunque confinato dentro .about — sopra alle altre foto ma sotto tutto cio' che sta fuori, sfondo compreso (che vive in document.body, cioe' nel contesto di radice). Il risultato erano due bug con la stessa causa: la foto ingrandita spariva sotto "Get in touch" scorrendo oltre, e sembrava "sfocata" perche' in realta' stava SOTTO lo sfondo sfocato, non sopra. Tolta l'isolamento solo per la durata del focus (.has-about-focus, sul ): a riposo/durante un trascinamento normale il contenimento c'e' ancora. Stessa storia per l'overflow: .about e' alto quanto il collage (--about__collage, fisso), ma la foto in primo piano e' centrata nella FINESTRA, che per una foto vicino al bordo del collage e' piu' alta del riquadro di .about da quel punto in poi — overflow:hidden la tagliava di netto (piatta, senza l'angolo arrotondato) proprio li'. Toglierlo durante il focus non mostra il resto del collage fuori posto: lo sfondo scuro/sfocato copre gia' tutta la finestra sopra a ogni cosa che non sia la foto a fuoco. */ .has-about-focus .about { isolation: auto; overflow: visible; } .about__collage { position: relative; width: 100%; height: 840px; } /* ---------- Testo ---------- */ .about__text { position: absolute; left: 50%; top: 332px; transform: translateX(-50%); width: 88%; max-width: 360px; text-align: center; z-index: 5; /* il testo non si trascina */ user-select: none; } .about__title { margin: 0 0 var(--space-3); /* stesso token dei titoli delle altre sezioni (.site-section__title in page.css): le tavole variano fra ~40 e ~56px, ma la coerenza tipografica del sito ha la priorita' sul singolo mockup */ font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); color: var(--color-black); } .about__subtitle { margin: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-regular); color: var(--color-grey-2); } /* ---------- Film / Music ---------- .photo-stack ha una dimensione fissa propria in photo-carousel.css (220x300 / 260x260, pensata per il demo standalone) — qui viene ridimensionata per tier con un override scoped a .about, cosi il componente condiviso resta invariato. */ .about__item { position: absolute; cursor: var(--cursore-mano); touch-action: none; transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(0deg); } .about .photo-stack__frames { width: 118px; height: 160px; margin-bottom: var(--space-3); } .about .photo-stack--square .photo-stack__frames { width: 116px; height: 116px; } /* La riga di controlli (frecce + etichetta) ha una larghezza minima fissa in photo-carousel.css (96px la sola etichetta): a queste taglie ridotte sarebbe piu larga della foto stessa, quindi si riduce con lei. */ .about .photo-stack__nav { width: 28px; height: 28px; } .about .photo-stack__label { min-width: 56px; padding: var(--space-1) var(--space-2); font-size: var(--font-size-caption); } .about__item--film { left: -10.4%; top: 88px; --press-rotate: -1.5deg; } .about__item--music { left: 79.6%; top: 120px; --press-rotate: 1.3deg; } /* ---------- Foto statiche (placeholder grigio) ---------- Stesse classi base gia usate per lo stroke bianco + ombra + radius (tokens.css), niente di nuovo: solo posizione, dimensione e rotazione cambiano da una foto all'altra. */ .about__photo { position: absolute; cursor: var(--cursore-mano); touch-action: none; transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(var(--photo-rotate, 0deg)); } /* Il contenuto visibile vive in un figlio SEPARATO dal drag: come .card__media/.card__image (card-focus.js), il click-to-enlarge deve poter sostituire il transform di UN elemento senza cancellare quello di trascinamento dell'altro. Se stessero sullo stesso elemento, aprire il focus (che sovrascrive tutto il transform inline) cancellerebbe l'offset del drag — vedi js/about-focus.js. */ .about__photo-inner { width: 100%; height: 100%; border: var(--stroke-card-width) solid var(--stroke-card-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); /* Il grigio resta come fondo mentre l'immagine carica. */ background-color: var(--color-grey-2); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ---------- Le foto vere ---------- Cartella assets/about me_photo/ (lo spazio nel nome va encodato: il browser chiede %20, il devserver serve). Ritaglio "cover" e centrato: i riquadri hanno proporzioni diverse per tier e le foto no, quindi l'unica alternativa sarebbe deformarle. La corrispondenza segue la tavola di riferimento (assets/pagine/L.png): la piscina e il criceto in palestra stanno in basso, la persona in mezzo alla natura in alto a destra accanto a Music. */ .about__photo--swim .about__photo-inner { background-image: url("../assets/about%20me_photo/image%2024.png"); } .about__photo--gym .about__photo-inner { background-image: url("../assets/about%20me_photo/image%2025.png"); } .about__photo--watch .about__photo-inner { background-image: url("../assets/about%20me_photo/image%2026.png"); } .about__photo--bike .about__photo-inner { background-image: url("../assets/about%20me_photo/image%2027.png"); } .about__photo--torii .about__photo-inner { background-image: url("../assets/about%20me_photo/image%2032.png"); } .about__photo--hike .about__photo-inner { background-image: url("../assets/about%20me_photo/IMG_0570%201.png"); } /* Arrivato dopo le altre sei: la scalinata disegnata a mano della tavola di riferimento. */ .about__photo--sketchbook .about__photo-inner { background-image: url("../assets/about%20me_photo/acquerello.png"); } /* ---------- Feedback al press (emil-design-eng) ---------- Non nella reference: al press (non solo trascinando) l'elemento ruota di pochissimo, sollevandosi leggermente — stessa idea della thumb card (card.css, hover: rotate + scale), ma con un angolo molto piu piccolo: li' e' un hover su un'immagine grande, qui e' un tocco su una foto piccola nel collage, deve restare quasi impercettibile. */ /* Anche mentre si trascina: e' la stessa mano chiusa (vedi --cursore-mano in presence.css). Il cursore di sistema distingue grab da grabbing con due disegni diversi; qui il disegno e' gia' un pugno, e cambiarlo a meta' gesto sarebbe un guizzo senza motivo. Il figlio [role="button"] dentro la foto ha la sua regola in presence.css, o vincerebbe lui — sta sopra, ed e' lui sotto il puntatore. */ .about__item.is-dragging, .about__photo.is-dragging { z-index: 100; cursor: var(--cursore-mano); } .about__item.is-dragging { transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(var(--press-rotate, 1deg)); } .about__photo.is-dragging { transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(calc(var(--photo-rotate, 0deg) + var(--press-rotate, 1deg))) scale(1.04); } .about__photo.is-dragging .about__photo-inner { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22); } .about__item:not(.is-dragging), .about__photo:not(.is-dragging) { transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); } .about__photo-inner { transition: box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-reduced-motion: reduce) { .about__item:not(.is-dragging), .about__photo:not(.is-dragging), .about__photo-inner { transition-duration: 1ms; } } /* ---------- Foto: tier base (S, < 600px) — da S.png (canvas 402) ---------- */ .about__photo--sketchbook { left: 16.4%; top: 55px; width: 124px; height: 150px; --photo-rotate: -3deg; --press-rotate: 1.4deg; } .about__photo--hike { left: 55.2%; top: 62px; width: 110px; height: 153px; --photo-rotate: 2deg; --press-rotate: -1.2deg; } .about__photo--bike { left: -2%; top: 462px; width: 108px; height: 110px; --photo-rotate: 5deg; --press-rotate: -1.4deg; } .about__photo--swim { left: 19.4%; top: 570px; width: 137px; height: 120px; --photo-rotate: -4deg; --press-rotate: 1.6deg; } .about__photo--gym { left: 68.4%; top: 462px; width: 130px; height: 155px; --photo-rotate: 4deg; --press-rotate: -1.6deg; } .about__photo--watch { left: 52.7%; top: 610px; width: 160px; height: 130px; --photo-rotate: -3deg; --press-rotate: 1.3deg; } .about__photo--torii { left: 28.6%; top: 745px; width: 165px; height: 95px; --photo-rotate: 2deg; --press-rotate: -1.3deg; } /* ---------- M / L (600–1279px) — da Tablet.png / L.png (canvas 834) ---------- Le due tavole sono identiche pixel per pixel in questa sezione, quindi M e L condividono le stesse misure. */ @media (min-width: 600px) { .about__collage { height: 790px; } .about__text { top: 325px; max-width: 420px; } .about .photo-stack__frames { width: 150px; height: 200px; } .about .photo-stack--square .photo-stack__frames { width: 165px; height: 165px; } .about .photo-stack__nav { width: 32px; height: 32px; } .about .photo-stack__label { min-width: 72px; padding: var(--space-1) var(--space-3); font-size: var(--font-size-caption); } .about__item--film { left: -3.6%; top: 85px; } .about__item--music { left: 77.7%; top: 100px; } .about__photo--sketchbook { left: 20.3%; top: 49px; width: 140px; height: 185px; } .about__photo--hike { left: 58.6%; top: 60px; width: 150px; height: 173px; } .about__photo--swim { left: -2.2%; top: 518px; width: 150px; height: 190px; } .about__photo--bike { left: 15.6%; top: 580px; width: 170px; height: 170px; } .about__photo--torii { left: 38.6%; top: 675px; width: 168px; height: 115px; } .about__photo--watch { left: 63.5%; top: 610px; width: 200px; height: 140px; } .about__photo--gym { left: 80.3%; top: 470px; width: 165px; height: 175px; } } /* ---------- XL / XXL (≥1280px) — da XL.png (canvas 1728) ---------- Qui le foto sono ~1.9x quelle di M/L (sketchbook 140->266, hike 150->297 nelle bbox misurate), non alla dimensione nativa del componente standalone. */ @media (min-width: 1280px) { .about__collage { height: 980px; } .about__text { top: 430px; max-width: 620px; } .about__subtitle { font-size: var(--font-size-h5); } .about .photo-stack__frames { width: 250px; height: 300px; } .about .photo-stack--square .photo-stack__frames { width: 280px; height: 280px; } .about .photo-stack__nav { width: 40px; height: 40px; } .about .photo-stack__label { min-width: 96px; padding: var(--space-2) var(--space-4); font-size: var(--font-size-body); } .about__item--film { left: 4.9%; top: 120px; } .about__item--music { left: 78.1%; top: 105px; } .about__photo--sketchbook { left: 23.6%; top: 48px; width: 250px; height: 330px; } .about__photo--hike { left: 59.6%; top: 50px; width: 280px; height: 325px; } .about__photo--swim { left: -1.7%; top: 640px; width: 260px; height: 280px; } .about__photo--bike { left: 13.3%; top: 700px; width: 290px; height: 250px; } .about__photo--torii { left: 19.1%; top: 900px; width: 260px; height: 150px; } .about__photo--watch { left: 63.7%; top: 660px; width: 300px; height: 240px; } .about__photo--gym { left: 83.9%; top: 590px; width: 280px; height: 320px; } } /* ========================================================= Click-to-enlarge — vedi js/about-focus.js per il meccanismo. Stessa tecnica di card-focus.js: la foto non si clona ne' si sposta, si applica un transform che la porta al centro dello schermo, su un elemento DIVERSO da quello che porta il drag (.about__photo-inner / .photo-stack, non .about__photo / .about__item) — altrimenti aprire il focus (che sovrascrive tutto il transform inline) farebbe perdere la posizione trascinata. Per Film/Music va in primo piano il carosello INTERO, frecce comprese: ingrandito si deve poter ancora sfogliare. ========================================================= */ :root { /* Stessi tempi di card-focus.css: il primo piano di About me e' lo stesso gesto delle card di Best works, deve leggersi come lo stesso linguaggio del sito. */ --about-focus-enter: 420ms; --about-focus-exit: 340ms; } /* La transizione NON sta qui ma inline (js/about-focus.js): dentro il carosello che si ingrandisce le foto hanno gia' la loro transition per lo shuffle (photo-carousel.css), e il primo piano deve poterla spegnere (prefers-reduced-motion) senza rincorrere la specificita' — inline vince sempre. */ .is-about-focused { will-change: transform; } /* L'ospite (.about__item o .about__photo) sale sopra il resto del collage. Niente position:relative qui (a differenza di .card-list__item.is-focus-host in card-focus.css): li' serviva perche' .card-list__item e' normalmente position:static, qui invece .about__item/.about__photo sono GIA' position:absolute (e' cosi' che stanno nel collage) — sovrascriverlo a "relative" con la stessa specificita' di quella regola li butterebbe fuori dal posizionamento assoluto, nel flusso normale del documento: un salto di centinaia di pixel, non un dettaglio. */ .is-focus-host { z-index: 401; } .about__photo.is-focus-host { transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(0deg); } .about-focus__backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--about-focus-exit, 340ms) cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; } .about-focus__backdrop.is-visible { opacity: 1; pointer-events: auto; transition-duration: var(--about-focus-enter, 420ms); } .has-about-focus, .has-about-focus body { overflow: hidden; } .has-about-focus body { padding-right: var(--about-focus-barra, 0px); } @media (prefers-reduced-motion: reduce) { .about-focus__backdrop { transition: none; } }