/* Theme Name: Rivalta 5 Stelle Theme URI: https://rivalta5stelle.it/ Author: MoVimento 5 Stelle Rivalta di Torino Description: Block theme (FSE) del sito del MoVimento 5 Stelle di Rivalta di Torino. Colori, font e layout si governano da Aspetto → Editor → Stili; hero e feed notizie sono blocchi custom renderizzati in PHP. Version: 0.1.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: rivalta5stelle Tags: full-site-editing, block-patterns, news, one-column, custom-colors, custom-menu, editor-style, translation-ready */ /* ========================================================================== Rivalta 5 Stelle — foglio di stile del tema I token (colori, font, spaziature) sono definiti in theme.json ed esposti come variabili --wp--preset--*. Qui NON si ridefiniscono: si usano. Le misure del progetto grafico sono rilevate dal PDF "Bozza - sito Rivalta M5S" su canvas 1200px; i rapporti sono conservati in unità relative. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Font — sottoinsieme latin-ext Il subset "latin" (dichiarato in theme.json) copre l'italiano per intero. Questi si scaricano solo se in pagina compaiono caratteri fuori subset. -------------------------------------------------------------------------- */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-condensed-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-condensed-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. Costanti del progetto grafico -------------------------------------------------------------------------- */ /* Tutte le misure marcate "(PDF)" sono rilevate dal progetto grafico su canvas 1200 px e riportate come clamp(min, N vw, valore@1200). */ :root { /* Testata: 65,4 px (PDF). L'hero usa la stessa variabile per scivolarci sotto: se si cambia qui, l'hero si riallinea da solo. */ --r5s-header-height: clamp(56px, 5.45vw, 65.4px); /* Hero: 1200 × 472 (PDF). */ --r5s-hero-ratio: 1200 / 472; /* Card notizie: immagine 227,1 × 132,9 con angoli da 11,5 px (PDF). */ --r5s-card-ratio: 227.1 / 132.9; --r5s-radius-card: 11.5px; --r5s-radius-pill: 14px; --r5s-radius-box: 17px; --r5s-transition: 0.18s ease; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; /* Le àncore (#notizie) non devono finire sotto la testata sticky. */ scroll-padding-top: var(--r5s-header-height); } img { max-width: 100%; height: auto; } :where(a):focus-visible, :where(button):focus-visible, :where(input):focus-visible, :where(summary):focus-visible { outline: 3px solid var(--wp--preset--color--blu); outline-offset: 3px; border-radius: 2px; } /* Il link "salta al contenuto" lo stampa già il core nei block theme (wp_enqueue_block_template_skip_link): qui si allinea solo ai colori. */ .skip-link.screen-reader-text:focus { background: var(--wp--preset--color--giallo); color: var(--wp--preset--color--nero); font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 600; text-decoration: none; } .r5s-screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Testata Nel progetto grafico è una barra bianca semitrasparente sopra la foto dell'hero: si vede il fogliame attraverso. Resta sticky sullo scroll. -------------------------------------------------------------------------- */ .r5s-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--wp--preset--color--blu-chiaro) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Fallback per browser senza color-mix. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .r5s-header { background: rgba(239, 248, 254, 0.9); } } .r5s-header > .wp-block-group, .r5s-header.wp-block-group { min-height: var(--r5s-header-height); } .r5s-header__logo img { display: block; width: auto; height: clamp(30px, 3.8vw, 45.6px); /* 45,6 px (PDF) */ } .r5s-header .wp-block-navigation { --navigation-layout-justification-setting: flex-end; } .r5s-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--nero); text-decoration: none; } .r5s-header .wp-block-navigation .wp-block-navigation-item__content:hover, .r5s-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--blu); text-decoration: none; } /* -------------------------------------------------------------------------- 5. Icone social (blocco nativo core/social-links) Nel progetto grafico sono quadrati arrotondati, non cerchi. -------------------------------------------------------------------------- */ .wp-block-social-links .wp-social-link { border-radius: 5px; transition: transform var(--r5s-transition); width: var(--r5s-social-size); height: var(--r5s-social-size); padding: calc(var(--r5s-social-size) * 0.17); } .wp-block-social-links .wp-social-link svg { width: 100%; height: 100%; } .wp-block-social-links .wp-social-link:hover, .wp-block-social-links .wp-social-link:focus-within { transform: translateY(-2px); opacity: 1; } /* Il progetto grafico le vuole a 13 px in testata e 21,1 nel footer: troppo piccole da usare davvero (e sotto i 24 px minimi di area cliccabile, WCAG 2.5.8). Ingrandite di proposito. */ .r5s-header .wp-block-social-links { --r5s-social-size: 24px; gap: 8px; } .r5s-footer .wp-block-social-links { --r5s-social-size: 32px; gap: 10px; } /* -------------------------------------------------------------------------- 6. Blocco Hero (r5s/hero) Foto ritagliata da una curva, banda gialla rastremata sotto, bollino 2050 che sborda in basso a destra. Le due forme sono SVG con lo stesso viewBox (1200 × 472): allineate per costruzione, qualunque sia la larghezza. -------------------------------------------------------------------------- */ .wp-block-r5s-hero { position: relative; } /* Quando l'hero apre la pagina scivola sotto la testata semitrasparente. */ .wp-block-post-content > .wp-block-r5s-hero:first-child, main > .wp-block-r5s-hero:first-child, .wp-site-blocks > main > .wp-block-r5s-hero:first-child { margin-top: calc(-1 * var(--r5s-header-height)); } .r5s-hero__graphic { position: relative; aspect-ratio: var(--r5s-hero-ratio); min-height: 240px; } .r5s-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: url("assets/images/hero-mask.svg"); mask-image: url("assets/images/hero-mask.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* --- dissolvenza fra le due foto, «oggi» e «domani» --- Richiesta del cliente (25 settembre 2026): due foto che si alternano da sole, ognuna con la sua scritta. Tutto in CSS, senza JavaScript: due immagini sovrapposte e quattro animazioni sullo stesso ciclo. Il ciclo è di 10 s: 4 s di foto ferma, 1 s di dissolvenza, e altrettanto per la seconda. Per cambiare il ritmo basta --r5s-hero-ciclo: le percentuali dei fotogrammi restano proporzionate. */ .r5s-hero__graphic.is-dissolvenza { --r5s-hero-ciclo: 10s; } /* Il ritardo negativo fa partire il ciclo già a un quarto: aprendo la pagina il primo cambio arriva dopo 1,5 s invece di 4 (il cliente lo trovava lento a partire, 29 settembre 2026). Dal secondo in poi il ritmo è quello di prima. Vale per tutte e quattro le animazioni, altrimenti foto e scritte si sfasano. */ .r5s-hero__image.is-seconda { position: absolute; inset: 0; opacity: 0; animation: r5s-hero-entra var(--r5s-hero-ciclo) linear calc(var(--r5s-hero-ciclo) * -0.25) infinite; } /* La scritta della prima foto fa il percorso opposto: sparisce quando l'altra compare. Se la seconda foto non c'è, l'etichetta resta ferma e visibile. */ .r5s-hero__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; padding: 0.26em 0.8em 0.2em; /* Bianco al 72%: la foto si intravede (chiesto dal cliente il 25 settembre 2026). Misurato sul sito: il blu sul riquadro fa 3,7:1 sulla foto «domani» e 3,8:1 su «oggi» — sotto il 4,5:1 del testo normale. Per questo il testo sta sempre nella soglia del «testo grande» (da 24 px, o da 18,7 px in grassetto): 19 px in grassetto sul telefono, 28 su desktop. Abbassando ancora il bianco, o rimpicciolendo il carattere, non si legge più. */ background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: var(--r5s-radius-pill); color: var(--wp--preset--color--blu); font-size: clamp(19px, 2.1vw, 28px); font-weight: 700; letter-spacing: 0.1em; line-height: 1.1; text-transform: uppercase; white-space: nowrap; } .r5s-hero__graphic.is-dissolvenza .r5s-hero__label { animation: r5s-hero-esce var(--r5s-hero-ciclo) linear calc(var(--r5s-hero-ciclo) * -0.25) infinite; } .r5s-hero__graphic.is-dissolvenza .r5s-hero__label.is-seconda { opacity: 0; animation-name: r5s-hero-entra; } /* Niente pausa col puntatore sopra l'hero: c'era, il cliente non la voleva (29 settembre 2026). Chi ha chiesto meno animazioni non vede comunque la dissolvenza, vedi più avanti prefers-reduced-motion. */ @keyframes r5s-hero-entra { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes r5s-hero-esce { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } } .r5s-hero__band { position: absolute; inset: 0; background-image: url("assets/images/hero-band.svg"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } /* Bollino 2050 — posizione rilevata dal progetto grafico: centro a 76,1% della larghezza, diametro 17,7%. */ .r5s-hero__badge { position: absolute; /* Nel progetto grafico il centro sta al 76,1% della larghezza, che lascia a destra un vuoto pari al 15% dello schermo: il cliente l'ha chiesto più a destra (settembre 2026). Ora è ancorato al bordo destro con un margine che si stringe sugli schermi piccoli — da 96 px sui monitor grandi a 14 sul telefono — invece di crescere in proporzione. Alzato poi dall'84,4% al 76,5% (e spostato ancora un filo a destra) per coprire il cartello giallo della vetrina che si vede nella foto «oggi», sempre su richiesta del cliente. Se si cambia la foto «oggi», questa posizione non ha più motivo di essere: si può tornare al progetto. */ right: clamp(14px, 5vw, 96px); top: 76.5%; width: 17.7%; min-width: 84px; transform: translateY(-50%); z-index: 3; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18)); } /* Se il tema non supporta mask-image la foto resta comunque leggibile: niente curva, ma nessun buco nel layout. */ @supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) { .r5s-hero__band { display: none; } } /* -------------------------------------------------------------------------- 7. Blocco Feed notizie (r5s/news-feed) -------------------------------------------------------------------------- */ .wp-block-r5s-news-feed { --r5s-feed-accent: var(--wp--preset--color--giallo); --r5s-feed-label-text: var(--wp--preset--color--nero); --r5s-feed-gap: clamp(20px, 4.95vw, 59.3px); /* 59,3 px (PDF) */ /* --r5s-feed-columns-max arriva inline da render.php (scelta nell'editor). Le media query riducono --r5s-feed-columns senza mai superarla. */ --r5s-feed-columns: var(--r5s-feed-columns-max, 3); } .wp-block-r5s-news-feed.is-accent-rosso { --r5s-feed-accent: var(--wp--preset--color--rosso); --r5s-feed-label-text: var(--wp--preset--color--bianco); } .wp-block-r5s-news-feed.is-accent-blu { --r5s-feed-accent: var(--wp--preset--color--blu); --r5s-feed-label-text: var(--wp--preset--color--bianco); } /* --- etichetta categoria + filetto --- */ .r5s-feed__head { display: flex; align-items: flex-end; border-bottom: 2px solid var(--r5s-feed-accent); /* filetto 2 px (PDF) */ margin-bottom: clamp(24px, 3.32vw, 39.8px); /* filetto -> foto: 39,8 px (PDF) */ } .r5s-feed__label { display: inline-block; margin: 0; /* Riquadro 43,6 px con 11,3 px di respiro laterale (PDF). */ padding: 3px clamp(9px, 0.94vw, 11.3px) 2px; background: var(--r5s-feed-accent); color: var(--r5s-feed-label-text); border-radius: var(--r5s-radius-pill) var(--r5s-radius-pill) 0 0; font-size: var(--wp--preset--font-size--x-large); font-weight: 600; line-height: 1.2; } .r5s-feed__label a { color: inherit; text-decoration: none; } .r5s-feed__label a:hover, .r5s-feed__label a:focus-visible { text-decoration: underline; } /* --- carosello --- */ .r5s-feed__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .r5s-feed__viewport::-webkit-scrollbar { display: none; } .r5s-feed__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--r5s-feed-columns) - 1) * var(--r5s-feed-gap)) / var(--r5s-feed-columns)); gap: var(--r5s-feed-gap); margin: 0; padding: 0; list-style: none; } /* Con pochi articoli le card non devono stirarsi su tutta la riga. Solo sopra i 900 px: la classe has-no-overflow la mette render.php confrontando il numero di articoli con l'attributo `columns` (3), ma sotto i 900 px le media query riducono --r5s-feed-columns a 2 e poi a 1,12. Lì le card non ci stanno più e, senza scorrimento, uscirebbero dalla pagina trascinandosi dietro tutto il layout. È successo passando da 4 a 3 articoli per categoria: sotto i 640 px la home sbordava a 991 px. */ @media (min-width: 901px) { .wp-block-r5s-news-feed.has-no-overflow .r5s-feed__viewport { overflow-x: visible; } } .r5s-card { scroll-snap-align: start; display: flex; flex-direction: column; /* Nel progetto grafico titolo ed estratto sono righe consecutive dello stesso ritmo: nessuno spazio fra loro, solo sotto la foto. */ gap: 0; } .r5s-card__media { display: block; aspect-ratio: var(--r5s-card-ratio); overflow: hidden; border-radius: var(--r5s-radius-card); margin-bottom: 12.4px; /* foto -> titolo (PDF) */ background: var(--wp--preset--color--grigio-chiaro); } .r5s-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--r5s-transition); } .r5s-card__media:hover img, .r5s-card__media:focus-visible img { transform: scale(1.03); } .r5s-card__title { margin: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--wp--preset--color--nero); } .r5s-card__title a { color: inherit; text-decoration: none; } .r5s-card__title a:hover, .r5s-card__title a:focus-visible { text-decoration: underline; } .r5s-card__excerpt { margin: 0; color: var(--wp--preset--color--nero); line-height: 1.2; /* passo riga 22,8 px su 19 px (PDF) */ } .r5s-card__date { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--grigio); text-transform: uppercase; letter-spacing: 0.02em; } /* --- paginazione --- */ /* La paginazione non è nel progetto grafico, che ha due frecce: l'ha chiesta il cliente il 16 settembre 2026, sul modello di un sito di notizie (numeri in cerchi grigi, quello attivo pieno, «Successiva ›» e «Ultima »» ai lati). Il cerchio attivo prende il colore dell'etichetta del feed. Non "correggerla" verso le frecce della Bozza. Una pagina sono le card intere nel riquadro, calcolate da view.js: 3 da desktop, 2 sotto i 900 px, 1 sotto i 640. */ /* Il carosello scatta solo sull'inizio delle pagine: scorrendolo a mano non si resta a metà fra due pagine. Senza JavaScript scatta su ogni card, come prima. */ .r5s-feed__track.is-paged .r5s-card { scroll-snap-align: none; } .r5s-feed__track.is-paged .r5s-card.is-page-start { scroll-snap-align: start; } .r5s-feed__pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; /* come le vecchie frecce */ font-size: var(--wp--preset--font-size--medium); line-height: 1; } /* Fra un feed e il successivo restano 16 px: con le frecce bastavano, con una barra piena sembrava l'inizio del feed sotto. Il respiro in più va solo lì. Il margine collassa con i 16 px del feed successivo: lo spazio vero è 40 px, il doppio di quello sopra la barra. */ .wp-block-r5s-news-feed:not(:last-child) .r5s-feed__pager { margin-bottom: 40px; } /* display: flex vincerebbe sull'attributo hidden, che view.js usa quando le card stanno tutte in una pagina. */ .r5s-feed__pager[hidden] { display: none; } .r5s-feed__page-numbers { display: flex; gap: 8px; } /* 40 × 40: l'area cliccabile non deve scendere sotto i 24 px (WCAG 2.5.8). */ .r5s-feed__page-number, .r5s-feed__page-edge { min-width: 40px; height: 40px; padding: 0; border: 0; font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--r5s-transition), box-shadow var(--r5s-transition), color var(--r5s-transition); } .r5s-feed__page-number { border-radius: 50%; background: var(--wp--preset--color--grigio-chiaro); color: var(--wp--preset--color--nero); } .r5s-feed__page-number:hover { box-shadow: inset 0 0 0 2px var(--r5s-feed-accent); } .r5s-feed__page-number[aria-current] { background: var(--r5s-feed-accent); color: var(--r5s-feed-label-text); box-shadow: none; cursor: default; } .r5s-feed__page-edge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; background: none; color: var(--wp--preset--color--blu); } .r5s-feed__page-edge:hover:not(:disabled) .r5s-feed__page-text { text-decoration: underline; text-underline-offset: 2px; } .r5s-feed__page-edge:disabled { color: var(--wp--preset--color--grigio); opacity: 0.45; cursor: default; } .r5s-feed__empty { margin: 0; padding: clamp(24px, 4vw, 40px) 0; color: var(--wp--preset--color--grigio); text-align: center; } /* -------------------------------------------------------------------------- 8. Sezione "Pillole di Programma" Il riquadro ha il bordo volutamente interrotto in alto a sinistra, dove passa la scritta corsiva. L'interruzione si ottiene coprendo l'angolo con un rettangolo del colore della sezione: la scritta ci sta sopra. -------------------------------------------------------------------------- */ .r5s-pillole { --r5s-pillole-bg: var(--wp--preset--color--blu); background: var(--r5s-pillole-bg); /* 54,2 px sopra il riquadro (PDF); sotto era lo spazio del pulsante "Scopri il programma", tolto: si usa la stessa misura per simmetria. */ padding-block: clamp(36px, 4.52vw, 54.2px); } /* Riquadro e appello «Unisciti al nostro gruppo di lavoro». L'appello non è nel progetto grafico: l'ha chiesto il cliente il 17 settembre 2026, accanto alle Pillole. Sotto i 1100 px scende sotto il riquadro, largo come lui. Sopra i 1100 px la fila prende la larghezza wide (1000 px, come testata e footer) e il riquadro passa da 800 a 680 px: la voce più lunga («I Servizi Sociali, la Sanità e la Terza Età») misura 546 px e con i 56 px di margine interno per lato ci sta ancora su una riga, con una ventina di px di scarto. Se le voci si allungano, o il carattere cresce, andranno a capo e il riquadro si allungherà: ricontrollare. */ .r5s-pillole__row { display: grid; grid-template-columns: minmax(0, 800px); justify-content: center; row-gap: clamp(32px, 4.5vw, 48px); } /* Annulla il margine fra blocchi del layout "flow": qui lo spazio è il gap. */ .r5s-pillole__row > * { margin-block: 0; } @media (min-width: 1100px) { .r5s-pillole__row { grid-template-columns: 680px minmax(0, 1fr); justify-content: stretch; align-items: center; column-gap: 40px; } } .r5s-appello { color: var(--wp--preset--color--bianco); font-size: var(--wp--preset--font-size--large); line-height: 1.3; text-wrap: pretty; } .r5s-appello > * + * { margin-block-start: 0.8em; } /* Giallo su blu è 3,9:1: basta solo per il testo grande (WCAG 1.4.3, almeno 24 px, o 18,7 px in grassetto). Invito e indirizzo restano sopra quella soglia. */ .r5s-appello__invito { color: var(--wp--preset--color--giallo); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; line-height: 1.15; text-wrap: balance; } .r5s-appello a { color: var(--wp--preset--color--giallo); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; /* l'indirizzo non deve mai sbordare */ } .r5s-appello a:hover { color: var(--wp--preset--color--bianco); } /* Il contorno di focus del tema è blu: sulla fascia blu sparirebbe. */ .r5s-appello a:focus-visible { outline-color: var(--wp--preset--color--giallo); } .r5s-pillole__box { position: relative; border: 2px solid var(--wp--preset--color--giallo); /* 2 px, raggio 16,8 (PDF) */ border-radius: var(--r5s-radius-box); padding: clamp(20px, 2.17vw, 26px) clamp(20px, 4.7vw, 56.3px) clamp(20px, 2.55vw, 30.6px); } .r5s-pillole__title { --r5s-lettering-w: clamp(190px, 30vw, 328px); position: absolute; top: calc(var(--r5s-lettering-w) * -0.0845); left: calc(var(--r5s-lettering-w) * -0.1186); width: var(--r5s-lettering-w); margin: 0; padding-right: calc(var(--r5s-lettering-w) * 0.0366); background: var(--r5s-pillole-bg); line-height: 0; } .r5s-pillole__title img { display: block; width: 100%; height: auto; } .r5s-pillole__list { margin: 0; padding-left: 0; list-style: none; color: var(--wp--preset--color--bianco); /* Nel PDF i punti sono 8 a 38,72 px. Con il nono punto (settembre 2026) il carattere è ridotto in proporzione, ×8/9, così il riquadro resta alto come nel progetto: 460 px a 1280 px di larghezza, misurato. Se i punti cambiano ancora, aggiornare il rapporto (8 / numero di punti). */ font-size: calc(var(--wp--preset--font-size--xx-large) * 8 / 9); font-weight: 500; line-height: 1.291; /* stesso rapporto del PDF: passo riga 50 px su 38,72 px */ text-transform: uppercase; } .r5s-pillole__list > li { position: relative; padding-left: 0.62em; text-wrap: balance; } .r5s-pillole__list > li::before { content: "•"; position: absolute; left: 0; } /* La scritta corsiva sborda a sinistra del riquadro: sotto una certa larghezza non c'è spazio e la si riporta dentro. */ @media (max-width: 600px) { .r5s-pillole__title { left: 0; } } /* -------------------------------------------------------------------------- 9. Piè di pagina -------------------------------------------------------------------------- */ /* Il footer è un template part: WordPress lo rende come