dal paragrafo (article non puo' stare dentro p) e resta un

vuoto: qui non deve aggiungere spazio. L'ascoltatore audio non ne risente, e' su [stripe-voci], piu' in alto. */ .albero-ricordi-page .voci-elenco > p { margin: 0; } .albero-ricordi-page .voce + .voce { margin-top: 2rem; } .albero-ricordi-page .voce-lettore { display: block; width: 100%; margin-top: .5rem; } .albero-ricordi-page .voce-trascrizione { margin-top: .75rem; } .albero-ricordi-page .voce-trascrizione summary { cursor: pointer; color: var(--ricordi-titolo); font-weight: 600; } .albero-ricordi-page .voce-testo { margin-top: .5rem; } /* --------------------------------------------------------------------- 17) FASCIA DI TESTATA — solo template «Albero dei ricordi – speciale» Tre strati come nella home: immagine, velo, testo. Due differenze: 1) l'immagine e' un con due , non uno sfondo CSS. La home usa un solo file per slide e lo ritaglia con cover; qui i file sono due, 1920x720 e 1080x1000, e il telefono deve scaricare solo il proprio. object-fit:cover fa il lavoro che nella home fa background-size:cover. 2) il velo e' bianco pieno al 60%, non il gradiente nero della home. Misurato campionando i pixel delle due illustrazioni nelle zone dove cade il testo, a 1440, 768 e 390: testo #3D1A52 senza velo ...... 48-54% dell'area sotto 4,5:1 bianco + gradiente home ....... 32-40% sotto 4,5:1 #3D1A52 + velo bianco 60% ..... 0% sotto 4,5:1, minimo 5,7:1 Il gradiente della home funziona perche' le sue slide sono fotografie scure con il soggetto a destra; qui l'illustrazione e' chiara e piena su tutta la larghezza, e schiarire batte scurire. Altezza: min-height in vh piu' padding, come la home, ma con una progressione regolare 55/50/45 invece del 55/35/45 del sito, dove il tablet risulta piu' basso del telefono. --------------------------------------------------------------------- */ .albero-ricordi-page .hero-albero { position: relative; overflow: hidden; } .albero-ricordi-page .hero-albero-immagine { position: absolute; inset: 0; } .albero-ricordi-page .hero-albero-immagine img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; } /* VELO — non serve piu'. Con le immagini definitive il testo cade sempre su lavanda pulito. Misurato sui rettangoli reali dei glifi: 1440 min 11,55:1 0% sotto 4,5 768 dentro il pulito dopo aver stretto la colonna, vedi sotto 390 fascia pulita 49,1% del file = 177px sui 360 della fascia, contro i 92 del blocco titolo+sottotitolo L'elemento resta nel markup, senza fondo: se un domani una fotografia prendesse il posto dell'illustrazione, basta ridargli un colore. */ .albero-ricordi-page .hero-albero-velo { position: absolute; inset: 0; } /* Da 768 a 991 l'immagine desktop mostra il lavanda pulito solo fino a meta' larghezza (le foglie partono dal 50,2% del file). La colonna col-md-8 e' larga il 66,7%, quindi la coda del sottotitolo finiva sulle foglie. Il titolo misura 338px e lo spazio pulito 348: ci sta, basta che il sottotitolo vada a capo prima. */ @media (min-width: 768px) and (max-width: 991.98px) { .albero-ricordi-page .hero-albero-corpo > div { max-width: 50%; } } /* Su mobile il testo si ancora IN ALTO, dove l'immagine e' pulita, non al centro dove c'e' la chioma. Su desktop il centraggio resta. */ .albero-ricordi-page .hero-albero-corpo { padding-top: 4.5rem; padding-bottom: 4.5rem; min-height: 55vh; } @media (max-width: 991.98px) { .albero-ricordi-page .hero-albero-corpo { min-height: 50vh; } } @media (max-width: 575.98px) { .albero-ricordi-page .hero-albero-corpo { min-height: 45vh; } } /* Mobile: il testo si ancora IN ALTO, dove l'immagine e' pulita, ma non incollato al bordo. UN TERZO NON CI STA, misurato. La chioma inizia al 49,1% del file, che su una fascia da 360px sono 177px; il blocco titolo+sottotitolo ne misura 83, e il sottotitolo va a capo su due righe. Posizionandolo a un terzo (120px) finisce a 203 e sfora di 26px: min 1,00:1, 3,7% dell'area sotto soglia. Il massimo che resta pulito su una finestra da 800 e' 94px, cioe' il 26%. 8vh e' il valore che regge anche sui telefoni bassi: il blocco ha altezza FISSA in pixel mentre fascia e chioma scalano in vh, quindi il margine si stringe al calare della finestra. A 600px di viewport la chioma e' a 133 e il blocco a 48-131: passa per un pelo. A 800 cade a 64px, il 17,8% della fascia, con 30px di margine. Questo blocco va DOPO le regole base: stessa specificita', a parita' vince l'ultimo. Messo prima, il padding-top di 4.5rem lo sovrascriveva. */ @media (max-width: 767.98px) { .albero-ricordi-page .hero-albero-corpo { align-items: flex-start !important; padding-top: 8vh; } } /* Il titolo prende la scala h1 del sito (app.css:158), che e' la sua: qui l'H1 e' davvero questo, non un titolo di slide come nella home. */ /* Titolo e sottotitolo sono una cosa sola: il secondo precisa il primo. Si stringe dentro e si allarga fuori, cosi' il blocco si legge come unita'. Valori della scala del sito: 0.5rem e 1.5rem sono gli spazi Bootstrap 2 e 4 sulla base rem da 18px, cioe' 9px e 27px. */ .albero-ricordi-page .hero-albero-titolo { color: var(--ricordi-testo); margin-bottom: 0.5rem; } /* Lo spazio sotto il blocco lo porta l'utility mb-4 nel markup, non una regola qui: le utility di spaziatura di Bootstrap sono !important e vincerebbero comunque. mb-4 = 1.5rem = 27px sulla base rem da 18. */ .albero-ricordi-page .hero-albero-occhiello { color: var(--ricordi-titolo); } /* ===================================================================== SEGNAPOSTO — DA RIMUOVERE PRIMA DELLA PUBBLICAZIONE Serve solo a rendere inequivocabile, in fase di validazione, che cosa è contenuto reale e che cosa è in attesa di materiale. ===================================================================== */ .segnaposto { border: 2px dashed var(--ricordi-foglia-2); background-color: #ffffff; color: var(--ricordi-testo); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-size: 0.75rem; line-height: 1.4; } .segnaposto-nota { border-left: 4px solid var(--ricordi-foglia-2); background-color: #ffffff; color: var(--ricordi-testo); padding: 0.5rem 1rem; font-size: 0.75rem; } /* --------------------------------------------------------------------- 13) GALLERY Le fotografie si aprono nella stessa Modal dei ricordi. Il