/* ============================================================================ Costruire SRL - le fotografie sul telefono. IL DIFETTO, MISURATO SUL SITO IN LINEA A 375x812 Le altezze delle fotografie erano scritte in pixel, pensate per una finestra larga. Su un telefono quella stessa altezza rende VERTICALE un riquadro che doveva essere orizzontale, e "object-fit: cover" butta via tutto il resto. Misure prese prima di questo file: hero di villa-giardino riquadro 383x762 = 94% dello schermo della fotografia se ne vedeva il 28% hero di realizzazioni 383x712 = 88% -> 27% carosello parco macchine 338x680 = 84% -> 34% planimetria della villa 338x420 = 52% -> 45% Una planimetria di cui si vede il 45% non e' una planimetria. Una foto di cantiere di cui si vede un terzo e' una striscia marrone. E una fotografia che occupa l'84% dello schermo non si guarda: si scorre via. PERCHE' IL MEDIA QUERY CHE GIA' C'ERA NON SERVIVA A NIENTE style.css riduce il carosello a 450px dentro @media(max-width:768px), ma piu' in basso il blocco "PARCO MACCHINE - STILE PREMIUM" lo rimette a 680px senza media query. Stessa specificita', vince l'ultimo scritto: la regola per il telefono era morta dal giorno in cui e' stata scritta. LA CURA Sotto i 760px la fotografia si vede INTERA. Dove serve un riquadro di altezza fissa - l'hero, che deve contenere il titolo, e il carosello, che altrimenti salterebbe a ogni scatto - le fasce vuote non restano nere: le riempie la stessa fotografia sfocata e scurita. Dove il riquadro fisso non serviva a niente - le immagini singole incolonnate - sparisce, e la foto prende la sua altezza naturale. Non e' una soluzione nuova: era gia' stata scritta per la sola pagina Gli Orti, in hero-progetto.css. Qui diventa la regola di tutto il sito, e la fotografia di sfondo non e' piu' scritta a mano dentro il CSS ma arriva da --hero-foto, impostata sulla sezione di ogni pagina. LE SPECIFICITA' CHE VANNO RISPETTATE Non basta scrivere .hero-project: style.css usa anche .orti-page .hero-project e .construction-premium-page .hero-project, che sono piu' forti e vincerebbero comunque, file dopo o file prima. Per questo i selettori qui sotto sono ripetuti per esteso. Nessun !important: serve a vincere oggi e a non far capire piu' niente domani. ORDINE DI CARICAMENTO Dopo style.css (che corregge) e prima di tocco.css (che deve restare ultimo, perche' allarga i bersagli da toccare). ========================================================================= */ @media (max-width: 760px){ /* ---------------------------------------------------------------------- 1. L'HERO DELLE PAGINE PROGETTO Era alto 86-92vh con un min-height di 680-720px: su un telefono piccolo quel minimo e' piu' alto dello schermo intero. Scende a 68vh e il minimo in pixel sparisce. ---------------------------------------------------------------------- */ .hero-project, .orti-page .hero-project, .garden-page .hero-project, .construction-premium-page .hero-project{ height: 68vh; min-height: 0; } /* il riempimento delle fasce: la stessa fotografia, sfocata e scurita. Se --hero-foto non e' impostata resta il fondo scuro della sezione. */ .hero-project::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hero-foto, none) center / cover no-repeat; /* .60 e non .45: sopra c'e' anche la velatura del testo, e le due scuriture sommate facevano sembrare le fasce nere invece che foto */ filter: blur(26px) brightness(.60) saturate(.85); transform: scale(1.15); } /* la fotografia vera: intera, un po' sopra il centro per non finire sotto la velatura del testo. "transform: none" toglie lo scale(1.02) che con contain tornerebbe a ritagliare i bordi. */ .hero-project img, .construction-premium-page .hero-project img{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 36%; transform: none; } .hero-project-overlay{ position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: 68vh; padding-top: 100px; padding-bottom: 30px; background: linear-gradient(to top, rgba(13, 13, 11, .94) 0%, rgba(13, 13, 11, .84) 24%, rgba(13, 13, 11, .30) 54%, rgba(13, 13, 11, .38) 100%); } /* ---------------------------------------------------------------------- 2. IL CAROSELLO DEL PARCO MACCHINE Nove fotografie con rapporti diversi, da 0,75 a 1,45: un riquadro quadrato e' l'unico che le contiene tutte senza farle rimpicciolire e senza far saltare la pagina a ogni scatto. Le fasce restano del fondo nero del carosello, che e' gia' nero di suo. ---------------------------------------------------------------------- */ .machine-carousel-track{ height: auto; aspect-ratio: 1 / 1; } .machine-slide img{ object-fit: contain; } /* la velatura ai bordi serviva al ritaglio a pieno formato: su una foto intera scurisce solo la foto */ .machine-slide::after{ display: none; } /* il ritaglio a mano della nona foto era una toppa al ritaglio: ora che si vede intera, non serve piu' */ .machine-slide:nth-child(9) img{ transform: none; } /* le frecce stavano sopra la fotografia e ne coprivano il centro */ .machine-carousel-btn{ width: 44px; height: 44px; } .machine-prev{ left: 8px; } .machine-next{ right: 8px; } /* ---------------------------------------------------------------------- 3. LE IMMAGINI SINGOLE DELLE SCHEDE PROGETTO Qui l'altezza fissa (420px, 360px) non serviva proprio: sul telefono le colonne diventano una sola, quindi non c'e' nessuna altra immagine a fianco da pareggiare. Tolta l'altezza, la fotografia prende la sua, e l'attributo width/height nell'HTML le riserva lo spazio giusto prima ancora di arrivare: la pagina non sobbalza. La planimetria della villa e' quella che ci guadagna di piu': da meta' planimetria a planimetria. ---------------------------------------------------------------------- */ .villa-showcase .project-image img, .orti-showcase .project-image img, .ristrutturazioni-showcase .project-image img, .realizzazioni-showcase .project-image img{ height: auto; } }