/** * Blog list — griglia delle schede articolo. * * Le schede le compone il Query Loop con blocchi di core: immagine in * evidenza, autore, data, categoria, titolo, estratto e "leggi tutto". Qui * sta la veste — la griglia, la fascia dei metadati sopra allo scatto, e i * dettagli tipografici che i supports non esprimono. * * I filtri hanno un foglio suo, dentro al blocco che li produce. */ .blog-list { padding-block: clamp( 48px, 6vw, 96px ) clamp( 72px, 9vw, 120px ); padding-inline: var(--wp--preset--spacing--50); } .blog-list__inner { max-width: var(--wp--custom--layout--frame); margin-inline: auto; } /* --- Le due righe di stacco ------------------------------------------- */ .blog-list__divider, .blog-list__sep { border: 0; border-top: 1px solid var(--wp--preset--color--gray-line); } .blog-list__divider { margin: clamp( 18px, 2vw, 24px ) 0 clamp( 36px, 4vw, 56px ); } .blog-list__sep { margin: clamp( 48px, 6vw, 80px ) 0 clamp( 28px, 3vw, 40px ); } /* --- La griglia ------------------------------------------------------- */ /* Due classi e non una: `.wp-block-post-template` porta già `display: flex` dalla foglia di stile di core, con la stessa specificità di una classe. Con un solo selettore la griglia non si applicherebbe. */ .blog-list .wp-block-post-template.blog-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp( 40px, 4.5vw, 64px ) clamp( 28px, 3vw, 56px ); margin: 0; padding: 0; list-style: none; } .blog-cards > li { display: flex; flex-direction: column; margin: 0; } /* --- Lo scatto e la fascia dei metadati -------------------------------- */ .blog-card__media { position: relative; } /* La fascia sta sopra allo scatto solo se uno scatto c'è. Un articolo senza immagine in evidenza è normale — il blocco di core in quel caso non emette niente — e senza questa condizione la fascia resterebbe assoluta dentro a un contenitore alto zero, sovrapposta al titolo. */ .blog-card__media:has( img ) { overflow: hidden; border-radius: 4px; } /* Il blocco immagine in evidenza porta la sua figura: va appiattita, altrimenti il margine di core stacca la fascia dal fondo dello scatto. */ .blog-card__media .wp-block-post-featured-image { margin: 0; } .blog-card__media img { display: block; width: 100%; /* Il riferimento taglia gli scatti in 16:11 a prescindere dalle proporzioni del file: le schede sono affiancate e devono allinearsi. */ aspect-ratio: 16 / 11; object-fit: cover; transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ); } .blog-card__media:hover img, .blog-card__media:focus-within img { transform: scale( 1.06 ); } .blog-card__meta { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; } /* I due gruppi della fascia sono flex, ma restano `core/group` con layout `flow`: core dà a ogni figlio dal secondo in poi un `margin-block-start` pari al block gap, 24px. Qui quel margine spingeva la categoria giù dal bordo alto — annullando il suo `align-self: flex-start` e facendola sembrare fuori posto — e allontanava la data dall'autore, dove il riferimento mette i 2px del `gap`. La spaziatura in un contenitore flex la deve dare il gap, non i margini dei figli. */ .blog-card__meta > *, .blog-card__meta-left > * { margin-block: 0; } .blog-card__media:has( img ) .blog-card__meta { position: absolute; inset: auto 0 0; padding: 24px 22px; /* Il velo scuro non basta da solo: sotto c'è una foto qualsiasi, e la sfocatura è ciò che tiene leggibile il bianco su una zona chiara. */ background-color: rgba( 0, 0, 0, 0.35 ); border-top: 1px solid rgba( 255, 255, 255, 0.18 ); backdrop-filter: blur( 14px ) saturate( 140% ); -webkit-backdrop-filter: blur( 14px ) saturate( 140% ); } /* Senza scatto la fascia resta nel flusso, sopra al titolo, e il bianco che il pattern le mette addosso qui non si leggerebbe: torna al petrolio della sezione. Serve `!important` perché le classi di colore dei preset lo portano a loro volta — è la stessa leva che usa il resto del tema per scavalcare un colore messo come attributo del blocco. */ .blog-card__media:not( :has( img ) ) .blog-card__meta { padding-block-end: 4px; color: var(--wp--preset--color--petrol) !important; } .blog-card__meta-left { display: flex; flex-direction: column; gap: 2px; align-self: flex-end; line-height: 1.25; } .blog-card__author { font-weight: 700; } .blog-card__date { font-weight: 400; opacity: 0.95; } .blog-card__terms { align-self: flex-start; font-weight: 600; white-space: nowrap; } /* La categoria è un link al suo archivio: nella fascia deve leggersi come il resto del testo, non come un link rosso su fondo scuro. */ .blog-card__terms a { color: inherit; text-decoration: none; } .blog-card__terms a:hover, .blog-card__terms a:focus-visible { color: inherit; text-decoration: underline; } /* --- Testo della scheda ------------------------------------------------ */ .blog-card__title { margin: clamp( 20px, 2.2vw, 30px ) 0 clamp( 12px, 1.2vw, 18px ); font-weight: 700; /* La radice dà 0,98 a tutti i titoli: su tre righe di scheda è troppo stretto, e il riferimento apre a 1,25. */ line-height: 1.25; } .blog-card__title a { color: inherit; text-decoration: none; } .blog-card__title a:hover, .blog-card__title a:focus-visible { color: inherit; text-decoration: underline; } .blog-card__desc { margin: 0 0 clamp( 22px, 2.4vw, 32px ); line-height: 1.5; } /* --- L'invito --------------------------------------------------------- */ /* `core/read-more` rende direttamente l'ancora, non un contenitore con un'ancora dentro: la veste va su questo elemento. */ .blog-card__cta { /* `align-self` su un figlio della colonna flex: il bottone si stringe sul testo invece di attraversare la scheda. Il margine automatico in alto lo tiene incollato al fondo, così gli inviti di due schede affiancate si allineano anche quando i titoli hanno un numero di righe diverso. */ align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 14px; /* La ricetta del bottone principale del sito — fondo `rosso`, testo bianco, pillola, 14px per 28px — perché è la stessa cosa che fa: portare da qualche parte. Ripetuta qui e non ereditata perché questo non è un `core/button`: `core/read-more` scrive un'ancora sua, che gli attributi del bottone non li può portare, e nemmeno `styles.elements.button` di theme.json la raggiunge. Il riferimento è `.vicino__cta`. */ padding: 14px 28px; border-radius: var(--wp--custom--radius--pill); background-color: var(--wp--preset--color--rosso); color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--btn-text); font-weight: 700; text-decoration: none; transition: background-color 0.2s ease; } .blog-card__cta:hover, .blog-card__cta:focus-visible { background-color: var(--wp--preset--color--rosso-dark); color: var(--wp--preset--color--white); } /* La freccia è decorazione: non dice niente che il testo non dica già, quindi è un fondo e non un'immagine nel documento. */ .blog-card__cta::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; background-image: var(--cn-media-btn-arrow); background-repeat: no-repeat; background-position: center; background-size: contain; } /* --- "Carica Altri" ---------------------------------------------------- */ .blog-list__loadmore { display: flex; justify-content: center; } /* Core rende la paginazione come una riga flex con margini fra le voci: qui la voce è una sola, e il contenitore serve solo a centrarla. */ .blog-list__loadmore .wp-block-query-pagination { margin: 0; } .blog-list__loadmore .wp-block-query-pagination-next { margin: 0; padding: 14px 32px; border: 1.5px solid var(--wp--preset--color--petrol); border-radius: var(--wp--custom--radius--pill); background-color: transparent; color: var(--wp--preset--color--petrol); font-size: var(--wp--preset--font-size--body); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .blog-list__loadmore .wp-block-query-pagination-next:hover, .blog-list__loadmore .wp-block-query-pagination-next:focus-visible { background-color: var(--wp--preset--color--petrol); color: var(--wp--preset--color--white); } /* Mentre la richiesta è in volo la lista resta al suo posto ma si spegne: è l'unico segnale che qualcosa sta arrivando. */ .blog-cards[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s ease; } /* --- Archivio di categoria e tag --------------------------------------- */ /* Il modello `archive` riusa questa sezione e le sue schede, e cambia solo come si sfoglia: là c'è la pillola «Carica Altri», che è la faccia di un accodamento fatto dal modulo dei filtri, qui la paginazione per intero, perché quel modulo non esce e ogni voce è una navigazione vera. */ .blog-list--archivio .blog-list__pagination { display: flex; justify-content: center; margin-block-start: clamp( 48px, 6vw, 80px ); padding-block-start: clamp( 28px, 3vw, 40px ); border-top: 1px solid var(--wp--preset--color--gray-line); } /* Un archivio che sta in una pagina sola non ha nessuna voce da mostrare, ma il `