/* ============================================================================= Modulo: CTA a tutto schermo su un video che si fonde nel fondo pagina. Dal Make "video fusione background", con l'ingresso riscritto: nel Make il filmato è già a schermo quando la scena comincia, qui **compare in dissolvenza dal fondo pagina** mentre la sezione sopra sta finendo di uscire. Struttura a due layout come gli altri moduli-scena. Il default è statico — un riquadro 16/9 col fermo immagine, headline e pulsante appoggiati in basso — e il layout animato sta dentro `@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 901px)`. Il JavaScript scrive **sei numeri** e nessuna geometria: l'ingresso (`--appear`), la sfocatura, il velo, la fusione col fondo, e opacità e posizione della headline. Tutte le interpolazioni sono `calc()` qui dentro. ⚠ **L'ingresso è un margine negativo di questo modulo, non quello di base.css.** Le due regole di adiacenza in base.css → "Passaggio fra scene" scattano solo fra due `[data-scene]` adiacenti, e sopra questa scena non c'è necessariamente una scena: in home c'è il muro dei loghi. Da qui `data-scene="after"` sul markup, che declina la sovrapposizione condivisa, più la regola `--cta-enter` qui sotto. La differenza rispetto a una giunzione fra scene è che la sezione sopra **non viene tenuta in pin**: esce davvero, ed è quello che si vuole vedere. ========================================================================== */ .cta-fullscreen { /* --- Valori guidati dal JS ---------------------------------------------- ⚠ I default **non** sono il primo fotogramma, e per una volta è voluto. Il layout animato lo scegli `scripting: enabled`, che è vero anche se questo script non gira — un errore in un altro modulo basta. Col primo fotogramma come default (`--appear: 0`, headline invisibile al 90%) il guasto sarebbe quattro schermate di niente; col fotogramma composto è la scena ferma sul proprio finale, che è una schermata sensata. È la stessa scelta di `cards-fullscreen`, dove la prende un `:not(:has(.is-active))`. */ --appear: 1; --fuse: 0; --veil-o: 1; --cta-blur: 0px; --text-o: 1; --text-y: 50; /* Il massimo che `--cta-blur` raggiunge. Non è un valore estetico: da lui dipende **di quanto il filmato deve sbordare** dal proprio riquadro, e se i due non combaciano si vede una cornice. Vedi la regola del media. */ --cta-blur-max: 8px; /* Quanto scroll dura la scena. Nel Make il contenitore è alto 400vh con la sticky alta 100, quindi la timeline corre su 300. */ --scroll-length: 300vh; /* Quanto dura l'ingresso, cioè di quanto la scena si sovrappone alla sezione sopra. Zero di default: senza niente sopra non c'è nessuna sovrapposizione da fare, e il margine negativo su un primo figlio lo infilerebbe sotto l'header, che è in `absolute` e non occupa spazio. Il layout animato lo alza a `--cta-enter-length` quando c'è davvero una sezione sopra. */ --cta-enter: 0px; --cta-enter-length: 100vh; position: relative; color: var(--color-scene-text); } /* ----------------------------------------------------------------------------- Layout statico: nessun JavaScript, movimento ridotto, o viewport stretto. -------------------------------------------------------------------------- */ .cta-fullscreen__viewport { padding-block: var(--space-section); } /* Senza `aspect-ratio` il riquadro non avrebbe altezza propria, perché tutto ciò che contiene è posizionato in assoluto. */ .cta-fullscreen__scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-l); } /* Il livello che compare e svanisce: filmato, velo e grana insieme. La headline non è qui dentro — è lei che resta quando il filmato si è fuso col fondo. Il fondo scuro sta su questo livello e non sulla sezione: se il filmato manca o non è ancora arrivato, sotto la headline bianca resta comunque qualcosa di scuro invece di un buco trasparente, e la sezione continua a lasciar vedere il fondo pagina col suo pattern come vuole il design. `position: relative` e `overflow: hidden` sono il contratto della grana (base.css → "Grana"), e servono anche a tagliare lo sbordo del filmato. */ .cta-fullscreen__backdrop { position: absolute; inset: 0; overflow: hidden; background-color: var(--color-scene-bg); } /* `width`/`height` espliciti perché il reset impone `height: auto` a video e img, che qui annullerebbe il riempimento del riquadro. */ .cta-fullscreen__media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } /* Il velo è il **colore della pagina**, non un nero: `rgba(5,53,90,.6)` nel design, cioè `--color-page-bg` al 60%. Dichiarato come colore pieno più `opacity`, così l'opacità resta il campo ACF che era e il colore segue quello che l'editor ha scelto per la pagina — il media si tinge del fondo su cui sta, che è il senso di «background blend» dell'annotazione del designer. Era `#000` a 0,5: un velo nero spegne il media, questo lo lega alla pagina. */ .cta-fullscreen__overlay { position: absolute; inset: 0; background-color: var(--color-page-bg); opacity: var(--cta-overlay, 0.6); pointer-events: none; } /* 64px fra headline e pulsante, come nel design (nodo 649:2514). */ .cta-fullscreen__content { position: absolute; inset-inline: 0; inset-block-end: var(--space-2xl); z-index: 2; display: grid; justify-items: center; gap: var(--space-2xl); padding-inline: var(--gutter); text-align: center; } /* La headline ha il riempimento sfumato — la classe `.display-gradient` la mette il PHP — anche se sta sopra un media: è la headline della *hero* l'eccezione, non questa. Vedi il commento su `.display-gradient` in base.css. 1338px nel design, che è quanto misura `84rem`. */ .cta-fullscreen__headline { max-width: 84rem; /* Niente `margin` qui: lo possiede `.display-gradient` (base.css), che ci mette un negativo per compensare il proprio padding. Un `margin: 0` in questa regola lo azzererebbe — stessa specificita', ma il CSS del modulo carica dopo — e l'accento delle maiuscole tornerebbe tagliato. Il reset di base.css lo azzera gia' per tutti. */ font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-black); text-transform: uppercase; font-feature-settings: "lnum", "pnum"; } .cta-fullscreen__line { display: block; } /* ----------------------------------------------------------------------------- Layout animato: la scena. -------------------------------------------------------------------------- */ /* soglia scene: 901px — vedi base.css → "Passaggio fra scene" */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 901px) { /* L'ingresso. La sezione si tira su di una schermata, così la sua sticky si inchioda mentre la sezione sopra ha ancora una schermata da percorrere: per quel tratto le due convivono, la scena è sopra — è dopo nel DOM — e ci compare in dissolvenza. Al termine la sezione sopra è uscita. `:not(:first-child)` non è una precauzione teorica: senza nessuno sopra il margine negativo tirerebbe la scena sotto l'header, che è in `absolute` e non occupa spazio, e sopra la spaziatura che `base.css` dà a un `main` che non apre a pieno campo. ⚠ Se la sezione sopra fosse **più bassa di una schermata**, la scena la coprirebbe dal suo primo pixel invece che dalla sua ultima schermata. Oggi non succede — sopra c'è il muro dei loghi, che è più alto — e non c'è modo di condizionarlo in CSS, perché una regola non conosce l'altezza del vicino. Si vede subito, però: la sezione sopra non si legge più. */ /* ⚠ **Il margine negativo si porta dietro `pointer-events: none`**, e le due righe vanno insieme: è lo stesso selettore perché è la stessa causa. Tirandosi su di una schermata, il **box di questa sezione** si sovrappone all'ultima schermata di quella sopra — e ci sta davanti, perché è dopo nel DOM. Per tutto quel tratto qualunque hover o click in quella zona finisce qui invece che là sotto. Non è il velo, non è il filmato, non è la sticky: è la sezione, e togliere i click a uno dei livelli interni non serve a niente perché il colpo va a finire su quello che lo contiene. È lo stesso difetto che il commento in fondo al file descrive per il pulsante — un elemento invisibile resta cliccabile — un paio di livelli più su. E non toglie niente a questa scena: l'unica cosa interattiva che ha è il pulsante, che si riprende i click con `pointer-events: auto`; la headline è già `pointer-events: none` nel layout animato, quindi non si perde nemmeno la selezione del testo. Trovato il 1 settembre con `flexible-content/projects-index`, che è una sezione lunga con righe interattive fino al proprio bordo inferiore. Nella home il difetto c'era e non si vedeva: sopra questo modulo sta il muro dei loghi, dove non c'è niente su cui passare il puntatore. */ .cta-fullscreen:not(:first-child) { --cta-enter: var(--cta-enter-length); margin-block-start: calc(-1 * var(--cta-enter)); pointer-events: none; } /* `--scene-hold` resta letto anche qui: questa scena non si sovrappone a quella sopra, ma un'altra può sovrapporsi a lei, e in quel caso base.css le chiede una coda tenuta in pin. */ .cta-fullscreen { height: calc( 100vh + var(--cta-enter) + var(--scroll-length) + var(--scene-hold, 0px) ); } .cta-fullscreen__viewport { position: sticky; inset-block-start: 0; height: 100vh; padding-block: 0; overflow: hidden; } .cta-fullscreen__scene { height: 100%; aspect-ratio: auto; border-radius: 0; } /* Le due metà del filmato: **compare** con `--appear` e **si fonde** col fondo pagina con `--fuse`. Sono due tracce e non una perché stanno alle due estremità della scena e nessuna deve sapere dell'altra; moltiplicarle è quello che le tiene indipendenti. Che la fusione sia una dissolvenza del filmato, e non un velo che sale a opacità 1 come nel Make, è deliberato: il fondo pagina del tema è un colore **più un pattern** (base.css → il fondo pagina), e un velo pieno lo coprirebbe con una tinta piatta — a schermo un rettangolo senza pattern proprio dove il resto della pagina ce l'ha. Facendo svanire il filmato ricompare il fondo vero, che è quello che il Make disegna col suo secondo gradiente. */ .cta-fullscreen__backdrop { opacity: calc(var(--appear) * (1 - var(--fuse))); } /* Il filmato **sborda dal proprio riquadro**, e non è un margine estetico: è la sfocatura. Un `blur(8px)` campiona i pixel fino a circa tre sigma oltre il bordo, e lì fuori non c'è niente — i quattro lati sfumano verso il trasparente e lasciano vedere quello che sta sotto, cioè una cornice larga una trentina di pixel che non è il filmato. Lo sbordo è calcolato su `--cta-blur-max` e non su `--cta-blur`: la geometria non può inseguire un valore che il JS cambia a ogni frame, e deve bastare al massimo che quel valore raggiunge. ⚠ Scritto come **larghezza e altezza**, non come i quattro `inset`. Su un elemento sostituito — un `