/* ============================================================================= L'articolo del magazine: copertina, testata, testo. Nodo di design 169:2665 (*Magazine - Single*). Non è un modulo del flexible content: è la parte fissa di `single-blog_post.php`, e il suo CSS sta qui perché è il path che `mcube2026_enqueue_module_assets()` sa accodare — si scarica solo sugli articoli. Nessun pin, nessun progresso, nessun JavaScript. Le misure del design, per non doverle ricercare: copertina 1448×617, angoli 24, 16 sotto l'header; pastiglia a 8 dall'angolo testata colonna 952; titolo 56 sotto la copertina, 48/56 Medium riga meta 40 sopra, 8 sotto, filetto bianco; icone 24, 8 fra loro, 16 dopo «share» testo 64 sotto il filetto; 16 fra i blocchi, 72 sopra un titolo attacco 20/32 SemiBold al 80%, le parole in grassetto in maiuscolo con alone paragrafo 18/28 Medium al 90%; elenco con 16 fra le voci citazione riquadro da 40 di padding, angoli 24, 72 sopra e sotto, 28/40 immagine esce dalla colonna fino a 1448, angoli 24; didascalia 24 sotto ========================================================================== */ .article { /* La colonna di lettura: 952 su 1512, cioè 280 di margine per lato. Dal 30 settembre è `--reading-column` di base.css: l'ha voluta anche `flexible-content/rich-text`, che ha la stessa tipografia del corpo. Il nome locale resta perché lo legge la testata. */ --article-column: var(--reading-column); /* La larghezza «piena», che è quella della copertina e delle immagini nel testo: la colonna di `.container`, cioè il frame meno i due margini di pagina. Scritta come `.container` la calcola, così segue il token se il token si muove. */ --article-wide: calc(min(var(--container-max), 100%) - 2 * var(--gutter)); /* I 16 fra il menu e la copertina: vedi `.article__cover`. ⚠ **Padding e non margine sulla copertina**, e la differenza è di 16 pixel che sparirebbero. `main` dichiara 96 di margine per l'header, e fra `main`, `.article` e la copertina non c'è né un padding né un bordo: tre margini in fila lungo la stessa discesa **collassano**, e vince il più grande. Con 16 di margine sulla copertina la copertina finirebbe a 96, non a 112. */ padding-block-start: var(--space-s); color: var(--color-text-primary); } /* ----------------------------------------------------------------------------- Copertina. -------------------------------------------------------------------------- */ /* ⚠ **Sta sotto il menu, non dietro**, e quindi non è una hero. `main` le lascia già i 96 dell'header — `.article` non porta la classe `hero-` — e i 16 di padding di `.article` la portano a 112, che è dove il design la mette: nel frame il menu è alto 112 e la copertina gli sta a filo. Da noi il menu è 96 dal 21 settembre (vedi `--header-h`), e tenere la copertina a 112 le lascia 32 dal fondo del logo, cioè il margine di pagina. Il rapporto e non l'altezza: 1448×617 è una striscia larga, e su uno schermo più stretto del frame resta la stessa striscia. `object-fit: cover` perché le immagini in evidenza sono 3:2 o 16:9 — nessuna è così larga — e l'alternativa sarebbe una copertina che cambia forma da un articolo all'altro. */ .article__cover { position: relative; width: var(--article-wide); aspect-ratio: 1448 / 617; margin-inline: auto; overflow: hidden; border-radius: var(--radius-l); background-color: var(--color-scene-bg); } /* `height: 100%` è da dire: il reset di base.css mette `height: auto` a tutte le immagini, e in assoluto un'immagine con l'altezza automatica prende la propria — non quella del riquadro. */ .article__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* L'argomento, la pastiglia del design: nera al 40%, angoli 16, padding 8/12, `label-sm` — 12 su 16, peso 600, tracking 12%, maiuscolo. ⚠ **Il tracking non è quello del nodo**, che per questa pastiglia dice 0,96px — cioè l'8% — mentre la stessa pastiglia sulle card delle ultime uscite, in fondo alla stessa pagina, dice 1,44px, cioè il 12% di `label-sm`. È lo stesso componente, e due trackings diversi a un palmo di distanza si vedrebbero: vince quello delle card, che sono istanze del componente e non un pezzo staccato. */ .article__topic { position: absolute; inset-block-start: var(--space-2xs); inset-inline-start: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-m); background-color: rgb(0 0 0 / 0.4); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* Senza copertina la pastiglia sale sopra il titolo, in flusso. */ .article__topic--inline { position: static; justify-self: start; margin-block-end: var(--space-m); } /* ----------------------------------------------------------------------------- Il tratto nero: testata e testo. -------------------------------------------------------------------------- */ /* 56 fra la copertina e il titolo (nodo 595:2433 a y 785, copertina che finisce a 729). Padding e non margine: `.article__main` è il blocco contenitore della sfumatura, e il suo bordo alto deve cadere sul fondo della copertina. */ .article__main { position: relative; padding-block-start: 3.5rem; } /* ⚠ **La sfumatura al nero di un articolo, quella automatica.** Nel design (nodo 169:2665) il fondo va a nero sotto la copertina — l'ellisse «fade to black» ha il bordo alto proprio lì, a y 728 — e il colore della pagina torna più in basso. Qui il nero comincia sotto la copertina e **finisce con la fine del testo**, per qualunque lunghezza: è la richiesta, «in automatico per tutte le news». Perché uno pseudo-elemento e non i due campi del fondo pagina: quei due sono percentuali del documento, e sotto la copertina e la fine del testo non si sanno in percentuale — dipendono da quanto è lungo l'articolo. Questo elemento invece *è* quel tratto: il suo bordo alto è il fondo della copertina, il bordo basso la fine del testo. Se la redazione compila i campi del fondo, la classe `article--fade` non esce e vincono loro (inc/page-background.php → `mcube2026_page_fade_automatic()`). Le forme sono quelle del fondo pagina, con gli stessi token: un'ellisse in cima, una fascia nera, un'ellisse in fondo capovolta. Cinque cose che non si indovinano: - ⚠ **`z-index: -1` senza un contesto di sovrapposizione in mezzo.** Né `.article__main` né i suoi antenati ne aprono uno, quindi lo pseudo-elemento dipinge nel livello negativo della radice: sopra il fondo del `body`, che si propaga al canvas, e **sotto tutto il resto** — la copertina, il testo, le card che seguono. Un `isolation` o un `container-type` su `.article__main` lo chiuderebbe dentro di lei, e a quel punto lei dipingerebbe **sopra** le sezioni in flusso che vengono dopo: il nero coprirebbe le ultime uscite; - ⚠ **Il risultato è identico a quello dei campi del fondo, grana compresa.** Là il nero è un livello del `body` sopra la grana in multiply, qui è un elemento sopra il `body`: ma il nero moltiplicato per qualunque cosa è nero, quindi a qualunque opacità della sfumatura i due danno lo stesso pixel; - **l'ellisse sborda 80 sopra il proprio bordo**, dentro la copertina. Il centro sta a un raggio verticale dal bordo — lì il nero è pieno, come per `--page-fade` — e la quarta fermata di `--fade-black` porta a zero al 110% del raggio: senza lo sbordo, al bordo alto l'ellisse sarebbe al 60% e si vedrebbe un gradino. Gli 80 in più cadono dietro la copertina, che dipinge sopra; ai lati della copertina, nei 32 di margine, l'ellisse è già a zero; - **la sfumatura d'uscita si chiude esattamente alla fine del testo**, quindi comincia 880 prima: le ultime righe tornano al colore della pagina, e le ultime uscite ci stanno sopra per intero. È il design, dove il colore torna prima della fine e la sezione «latest news» è sul fondo pieno; - **su un testo corto le due ellissi si toccano**, e i due `max()` le tengono in ordine: il centro di quella in fondo non sale mai sopra quello in cima, e la scatola non è mai più bassa di due ellissi. Vuol dire che un articolo cortissimo sborda col nero sotto di sé, sopra le ultime uscite — sfumato, senza gradini. */ .article--fade .article__main::before { --band-start: calc(1.1 * var(--page-fade-radius-y)); --band-end: max(var(--band-start), 100% - 1.1 * var(--page-fade-radius-y)); content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-start: calc(-0.1 * var(--page-fade-radius-y)); height: calc(100% + 0.1 * var(--page-fade-radius-y)); min-height: calc(2.2 * var(--page-fade-radius-y)); background-image: radial-gradient( var(--page-fade-radius-x) var(--page-fade-radius-y) at 50% var(--band-start), var(--fade-black) ), radial-gradient( var(--page-fade-radius-x) var(--page-fade-radius-y) at 50% var(--band-end), var(--fade-black) ), linear-gradient( to bottom, rgb(0 0 0 / 0) var(--band-start), #000 var(--band-start), #000 var(--band-end), rgb(0 0 0 / 0) var(--band-end) ); background-repeat: no-repeat; pointer-events: none; } /* ----------------------------------------------------------------------------- Testata. -------------------------------------------------------------------------- */ .article__head { display: grid; width: min(var(--article-column), 100% - 2 * var(--gutter)); margin-inline: auto; } /* `title-lower-lg`: 48 su 56, Medium, tracking zero, bianco pieno. È lo stile del claim della hero About, e qui è il titolo dell'articolo: il corpo dell'`

` di base.css si sostituisce per intero. */ .article__title { font-size: var(--text-title-lower-lg); line-height: var(--leading-title-lower-lg); font-weight: var(--weight-medium); } /* La riga sotto: la data a sinistra, la condivisione a destra, un filetto **bianco pieno** sotto — nel nodo 169:2689 è `border-white`, non il 20% di `--color-border`. 40 sopra e 8 sotto. */ .article__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: 2.5rem var(--space-2xs); border-block-end: 1px solid var(--color-text-primary); } /* 12 su 16, peso 600, maiuscolo — e **tracking al 18%**, che non è `label-sm` (12%): il nodo dice 2,16px su 12, sia per la data sia per «share». Non è un token perché non è uno stile del design, è un valore scritto su questi due testi; resta qui finché lo vuole questa riga soltanto. */ .article__date, .article__share-label { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .article__share { display: flex; align-items: center; gap: var(--space-s); } .article__share-list { display: flex; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; } /* Le icone sono cerchi bianchi pieni col glifo nero, come quelle del footer — e come là l'hover è un'opacità, l'unica cosa che si può cambiare su un disegno a due tinte. 24 invece di 32. */ .article__share-link { display: block; width: 1.5rem; height: 1.5rem; transition: opacity var(--duration-fast) var(--ease-out); & svg { display: block; width: 100%; height: 100%; } &:hover { opacity: 0.7; } } /* ----------------------------------------------------------------------------- Il testo. È `the_content()`, cioè markup dell'editor classico, e la sua tipografia è `.reading-text` di base.css: dal 9 ottobre la condivide con `rich-text`, `post-content` e `wysiwyg`, e le regole che stavano qui — la griglia con le immagini fuori colonna, i titoli, l'elenco, la citazione, gli stacchi — stanno lì. Qui restano le due cose solo dell'articolo: lo stacco dal filetto della testata e l'attacco. -------------------------------------------------------------------------- */ .article__body { padding-block-start: var(--space-2xl); } /* L'attacco. Il primo paragrafo è più grande — 20 su 32, SemiBold, all'80% — e le parole in grassetto dentro di lui diventano bianche, in maiuscolo e con l'alone `glow-md` del design: nel nodo 662:3335 è «FRANKFURT AIRPORT T3 LED WALLS», cioè il soggetto dell'articolo. ⚠ **Il grassetto è la leva della redazione**, ed è una scelta: l'editor classico non ha un modo di marcare «queste parole aprono l'articolo», e il grassetto nel primo paragrafo è la cosa più vicina che già si fa. Chi non lo vuole non mette un grassetto nell'attacco. `> p:first-child`, col figlio diretto: un paragrafo dentro una citazione non è un attacco. */ .article__body > p:first-child { color: rgb(255 255 255 / 0.8); font-size: 1.25rem; line-height: 2rem; font-weight: var(--weight-semibold); & strong { color: var(--color-text-primary); font-weight: inherit; text-transform: uppercase; text-shadow: 0 0 14.767px rgb(255 255 255 / 0.4), 0 0 29.533px rgb(255 255 255 / 0.4), 0 0 103.366px rgb(255 255 255 / 0.4), 0 0 206.732px rgb(255 255 255 / 0.7); } } /* ----------------------------------------------------------------------------- Layout stretto. Il design di questa larghezza non esiste, quindi qui si decide: la copertina smette di essere una striscia — a 390 sarebbe alta 150. La citazione stringe il padding in `.reading-text`. -------------------------------------------------------------------------- */ @media (max-width: 700px) { .article__cover { aspect-ratio: 3 / 2; } }