/* Design system condiviso del sito RuneGuardians: variabili, reset, tipografia di base, divisori, il gate di reveal delle sezioni e i componenti (bottoni, card luminose, countdown, barra di navigazione, torna su) usati da tutte le pagine generate. Le regole specifiche di una singola pagina restano inline in quella pagina. Restyle 2026-09-25 (docs/specs/2026-09-25-restyle-sito-design.md): il linguaggio del template Virex — display condensato, testo in gradiente, bottoni scuri che brillano, card dagli angoli grandi — tradotto in oro + blu runico. Fase 1: sistema, barra, home. Fase 2: galleria col lightbox, privacy, la fascia dei Cinque Eredi. Fase 3: /lancio/, /il-mondo/, /contatti/ — e i componenti che servivano a loro (titolo di pagina, elenco di fatti, ritratto, cornice del video, targa). */ :root { --abisso: #0B131E; --fondale: #13202E; --carta: #E9E1CC; --carta-nota: #A79E8C; /* pergamena attenuata per note e microcopy */ --oro: #C9A35A; --oro-chiaro: #E3C98F; --runa: #35B6E8; --brace: #A94036; /* Altezza reale di .barra-sito (misurata con getBoundingClientRect a 1280px e 1440px dopo il restyle: 86.1875px — wordmark 58px + padding verticale .85rem*2 + il bordo inferiore di 1px; il bottone Kickstarter nella barra e' piu' basso del wordmark e non la allunga). Unica fonte per chiunque debba posizionarsi SOTTO la barra sticky (es. .nascita-media qui sotto): mai un secondo numero scritto a mano altrove, che potrebbe scivolare fuori sincrono se la barra cambia. */ --altezza-barra: 86.1875px; /* --- Il linguaggio Virex, nei colori del marchio --- Oro + blu runico: il blu e' quello in cui le rune brillano nelle tavole stesse (TAVOLE-EVOLUZIONE), non un colore importato. */ --grad-titolo: linear-gradient(100deg, #F2D48A 0%, #C9A35A 48%, #35B6E8 100%); --grad-bordo: linear-gradient(100deg, #E3C98F 0%, #35B6E8 100%); --bagliore-oro: rgba(227, 201, 143, .38); --bagliore-runa: rgba(53, 182, 232, .42); /* il bagliore a due capi di bottoni e card: oro a sinistra, runa a destra, come il gradiente del bordo che lo emette */ --bagliore: -6px 0 20px var(--bagliore-oro), 6px 0 20px var(--bagliore-runa); --bagliore-forte: -8px 0 30px rgba(227, 201, 143, .62), 8px 0 30px rgba(53, 182, 232, .66); --notte: #070B12; /* il fondo dei bottoni: sotto l'abisso */ --vetro: rgba(19, 32, 46, .72); /* il fondo delle card luminose */ /* raggi: piccolo per i controlli, grandi per card e immagini */ --raggio-s: 10px; --raggio-m: 18px; --raggio-l: 28px; /* le tre voci: display condensato, testo corrente, etichetta rituale */ --font-display: "Changa", "Arial Narrow", sans-serif; --font-testo: "Alegreya", Georgia, serif; --font-rito: "Cinzel", serif; /* scala dei titoli */ --titolo-display: clamp(2.3rem, 4.5vw, 4rem); --titolo-sezione: clamp(1.9rem, 3.9vw, 3.1rem); --titolo-card: clamp(1.2rem, 2vw, 1.5rem); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Come ogni altra animazione del file: prefers-reduced-motion la spegne. Lo scroll fluido e' esattamente cio' che quella preferenza esiste per sopprimere, e questo sito ha una sezione a scroll agganciato lunga circa 3700px. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* La rete di sicurezza: con reduced-motion NIENTE si muove, nemmeno le transizioni di hover di bottoni e card. Le regole animate stanno gia' dentro no-preference; questa copre anche cio' che un giorno qualcuno dimentichera' di metterci. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { background: var(--abisso); color: var(--carta); font-family: var(--font-testo); font-size: 18px; line-height: 1.65; } ::selection { background: var(--runa); color: var(--abisso); } a { color: var(--runa); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--oro-chiaro); } :focus-visible { outline: 2px solid var(--runa); outline-offset: 3px; border-radius: 2px; } p + p { margin-top: 1em; } /* ------------------------------------------------ sistema di design --- */ /* Le classi qui sotto sono il vocabolario del restyle: si chiamano per cio' che SONO (un testo in gradiente, un bottone che brilla, una card luminosa), non per la pagina dove sono comparse per prime, perche' le fasi 2 e 3 le applicano a galleria, lancio, mondo e contatti. */ /* Il titolo di sezione (h2 di base su ogni pagina): condensato, maiuscolo. .titolo-sezione e' lo stesso stile per chi non e' un h2. */ h2, .titolo-sezione { font-family: var(--font-display); font-weight: 800; font-size: var(--titolo-sezione); line-height: 1.04; text-transform: uppercase; letter-spacing: .005em; margin-bottom: 1.1rem; color: var(--oro-chiaro); } /* inline-block: il box del titolo stringe sul testo, cosi' il gradiente va davvero dall'oro al blu sulla parola e non si perde nel vuoto di una colonna larga (un h2 a blocco restava quasi tutto d'oro). Centrato o a sinistra lo decide il text-align della sezione, come per il testo. */ h2 { display: inline-block; max-width: 100%; } /* un titolo che segue un paragrafo apre una parte nuova: aria sopra */ p + h2 { margin-top: 2.4rem; } /* nelle colonne di lettura lunga (/il-mondo/, /contatti/) il display a piena taglia schiaccerebbe il testo: stessa voce, un gradino sotto */ .colonna-lettura h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } /* Testo riempito col gradiente dei titoli. Il colore pieno qui sopra resta come ripiego per i browser senza background-clip:text: mai testo invisibile. */ .testo-gradiente { color: var(--oro-chiaro); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .testo-gradiente, h2, .titolo-sezione { background-image: var(--grad-titolo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } /* Su un titolo che va a capo il gradiente si ripete riga per riga (come in Virex): va messo su uno inline dentro al titolo, perche' box-decoration-break vale solo sugli elementi inline. Su un blocco il gradiente si stenderebbe sull'intera larghezza e le righe corte resterebbero tutte d'oro. */ span.testo-gradiente { -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Il titolo di display: enorme, condensato, maiuscolo (l'hero). */ .titolo-display { font-family: var(--font-display); font-weight: 800; font-size: var(--titolo-display); line-height: .98; letter-spacing: -.005em; text-transform: uppercase; } /* L'eco in contorno sotto il titolo pieno — la firma di Virex. Solo decorazione (aria-hidden nel markup): ripete una parola gia' letta nel titolo e sfuma verso il basso, come un'eco che si spegne. */ .titolo-eco { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--titolo-display); line-height: .98; text-transform: uppercase; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(227, 201, 143, .6); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 95%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 95%); user-select: none; pointer-events: none; } /* Il titolo di una card. */ .titolo-card { font-family: var(--font-display); font-weight: 700; font-size: var(--titolo-card); line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; color: var(--oro-chiaro); } /* L'etichetta piccola e rituale: l'unico posto dove Cinzel sopravvive. */ .etichetta-rito { font-family: var(--font-rito); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--carta-nota); } /* --- bottoni --- Scuri, bordo sottile in gradiente, bagliore esterno a due capi. Il bordo in gradiente e' il trucco padding-box/border-box: niente pseudo-elementi, quindi il bottone resta un qualunque. .bottone-ks (Kickstarter) e' il primario storico, usato da /lancio/ e dal countdown: resta un alias di .bottone-primario, cosi' nessuna pagina va ritoccata per cambiare aspetto. */ .bottone-primario, .bottone-ks, .bottone-secondario { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; padding: 1rem 1.8rem; border-radius: var(--raggio-s); text-decoration: none; cursor: pointer; } .bottone-primario, .bottone-ks { color: #FFF8E6; border: 1.5px solid transparent; background: linear-gradient(var(--notte), var(--notte)) padding-box, var(--grad-bordo) border-box; box-shadow: var(--bagliore); } .bottone-primario:hover, .bottone-ks:hover { color: #FFFFFF; background: linear-gradient(#0D1827, #0D1827) padding-box, var(--grad-bordo) border-box; box-shadow: var(--bagliore-forte); } .bottone-secondario { color: var(--oro-chiaro); border: 1px solid rgba(227, 201, 143, .42); background: rgba(7, 11, 18, .55); } .bottone-secondario:hover { color: var(--carta); border-color: var(--runa); box-shadow: 0 0 22px var(--bagliore-runa); } @media (prefers-reduced-motion: no-preference) { .bottone-primario, .bottone-ks, .bottone-secondario { transition: box-shadow .3s ease, transform .3s ease, color .3s ease, border-color .3s ease; } .bottone-primario:hover, .bottone-ks:hover, .bottone-secondario:hover { transform: translateY(-2px); } } /* --- card luminosa --- Angoli grandi, fondo di vetro scuro, bordo in gradiente attenuato. Il vetro e' dipinto sopra un abisso pieno (secondo strato), altrimenti il gradiente del bordo trasparirebbe da sotto il fondo semitrasparente. */ .card-luce { border-radius: var(--raggio-l); border: 1px solid transparent; background: linear-gradient(var(--vetro), var(--vetro)) padding-box, linear-gradient(var(--abisso), var(--abisso)) padding-box, linear-gradient(100deg, rgba(227,201,143,.6), rgba(53,182,232,.6)) border-box; box-shadow: -6px 0 28px rgba(227,201,143,.09), 6px 0 28px rgba(53,182,232,.13); } /* --- immagine arrotondata dal bordo luminoso --- */ .immagine-luce { display: block; border-radius: var(--raggio-l); border: 1px solid rgba(227, 201, 143, .35); box-shadow: -10px 0 36px rgba(227,201,143,.13), 10px 0 36px rgba(53,182,232,.2), 0 24px 50px rgba(0,0,0,.55); } /* La colonna di testo: usata dal footer condiviso di involucro() su ogni pagina generata, e da molte sezioni come larghezza di base (le pagine che vogliono una colonna piu' stretta o piu' larga la sovrascrivono localmente, es. .founder .colonna, .numero-uno .colonna). */ .colonna { max-width: 44rem; margin: 0 auto; } /* Il divisore di sezione: la linea col diamante, presa dal wordmark, ora da oro a runa come il resto. Quando entra in scena, la linea si distende e il diamante si accende. */ .runa-divisore { display: flex; align-items: center; gap: .8rem; max-width: 21rem; margin: 4.5rem auto; color: var(--oro-chiaro); opacity: .7; } .runa-divisore::before, .runa-divisore::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); transform: scaleX(1); transform-origin: right; } .runa-divisore::after { background: linear-gradient(90deg, var(--runa), transparent); transform-origin: left; } .runa-divisore svg { flex: none; filter: drop-shadow(0 0 6px var(--bagliore-runa)); } @media (prefers-reduced-motion: no-preference) { .runa-divisore::before, .runa-divisore::after { transform: scaleX(0); } .runa-divisore svg { opacity: 0; transform: rotate(-90deg) scale(.6); } .runa-divisore.visto::before, .runa-divisore.visto::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.6,.2,1); } .runa-divisore.visto svg { opacity: 1; transform: none; transition: opacity .7s ease .45s, transform .7s cubic-bezier(.2,.6,.2,1) .45s; } } /* Le sezioni entrano in scena una volta, in ordine (solo se il JS c'è: il gate html.js evita pagine invisibili senza script). */ @media (prefers-reduced-motion: no-preference) { html.js .scena { opacity: 0; transform: translateY(1.6rem); } html.js .scena.visto { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.25,1); } } /* ------------------------------------------------------- countdown --- */ /* Le quattro cifre in piccole card luminose, il numero in display. Stesso blocco su home e /lancio/ (sito_comune.blocco_countdown). */ .conto { padding: 3rem 1.5rem; text-align: center; background: radial-gradient(60rem 14rem at 50% 50%, rgba(53,182,232,.07), transparent 70%); } .conto .quando { font-family: var(--font-rito); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--carta-nota); margin-bottom: 1.2rem; } .conto-cifre { display: flex; justify-content: center; gap: clamp(.5rem, 2.4vw, 1.2rem); } .conto-cifre .blocco { min-width: clamp(4.4rem, 15vw, 7rem); padding: .8rem .6rem .7rem; border-radius: var(--raggio-m); border: 1px solid transparent; background: linear-gradient(var(--vetro), var(--vetro)) padding-box, linear-gradient(var(--abisso), var(--abisso)) padding-box, linear-gradient(100deg, rgba(227,201,143,.5), rgba(53,182,232,.5)) border-box; } .conto-cifre .numero { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5.4vw, 3.3rem); line-height: 1; color: var(--oro-chiaro); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(53,182,232,.35); } @media (prefers-reduced-motion: no-preference) { .conto-cifre .numero.battito { animation: battito .5s ease; } @keyframes battito { 0% { transform: translateY(-.14em); opacity: .35; } 100% { transform: none; opacity: 1; } } } .conto-cifre .unita { font-family: var(--font-display); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--carta-nota); margin-top: .35rem; } .conto-finita { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; color: var(--oro-chiaro); } .conto-cta { margin-top: 1.8rem; } /* ------------------------------------------------------------- barra --- */ /* L'impianto di Virex: wordmark a sinistra, navigazione maiuscola al centro, la chiamata all'azione che brilla a destra. */ .barra-sito { position: sticky; top: 0; z-index: 50; /* min-height, non height fissa: il contenuto resta libero di crescere, ma non puo' MAI rendere la barra piu' bassa di --altezza-barra — il numero che .nascita-media usa per non finire sotto di lei. */ min-height: var(--altezza-barra); display: flex; align-items: center; gap: 1rem; padding: .85rem clamp(1rem, 4vw, 3rem); background: rgba(8, 13, 21, .8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(227, 201, 143, .16); } /* Il marchio della barra e' wordmark-barra.png: un derivato di wordmark.png ritagliato col Pillow sul riquadro dell'alfa (+4px), perche' l'originale 768x512 e' per il 60% vuoto trasparente e a qualunque altezza le lettere restavano minuscole (~80px di larghezza a 1440: illeggibile). wordmark.png resta com'e': lo usano l'hero e /lancio/. Rifarlo, se l'originale cambia: img = Image.open("wordmark.png"); x0,y0,x1,y1 = alfa>8 .getbbox(); img.crop((x0-4, y0-4, x1+4, y1+4)).save("wordmark-barra.png") 58px di altezza = ~202px di scritta: il marchio e' la cosa piu' leggibile della barra, e la barra resta alta quanto prima (--altezza-barra). */ .barra-sito .marchio { flex: none; } .barra-sito .marchio img { height: 58px; width: auto; display: block; } .barra-sito nav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); margin: 0 auto; } .barra-sito nav a { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--carta); text-decoration: none; padding: .35rem 0; position: relative; } /* la voce attiva: testo oro e il filo in gradiente sotto, come Virex */ .barra-sito nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad-bordo); transform: scaleX(0); transform-origin: left; } .barra-sito nav a:hover { color: var(--oro-chiaro); } .barra-sito nav a.qui { color: var(--oro-chiaro); } .barra-sito nav a.qui::after, .barra-sito nav a:hover::after { transform: scaleX(1); } @media (prefers-reduced-motion: no-preference) { .barra-sito nav a::after { transition: transform .3s ease; } } /* La chiamata all'azione della barra: il bottone primario, piu' compatto. Su mobile resta visibile (e' l'azione della campagna) ma dice solo «Kickstarter»: il resto dell'etichetta si nasconde, non si tronca. */ .barra-cta { flex: none; padding: .7rem 1.2rem; font-size: .85rem; } .barra-burger { display: none; background: none; border: 0; cursor: pointer; } @media (max-width: 760px) { .barra-sito nav { position: absolute; inset: 100% 0 auto; flex-direction: column; gap: .2rem; margin: 0; background: var(--fondale); padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid rgba(227, 201, 143, .18); } .barra-sito nav a { padding: .55rem 0; font-size: 1.05rem; align-self: flex-start; } .barra-sito nav[hidden] { display: none; } .barra-burger { display: block; color: var(--oro-chiaro); font-size: 1.5rem; padding: .2rem .3rem; } /* A 380px una barra di 86px si mangia lo schermo: il wordmark scende a 40px e il padding si stringe. min-height va azzerato: --altezza-barra resta il numero valido SOLO per lo scroll-telling desktop (che non gira sotto 761px). */ .barra-sito { min-height: 0; padding-top: .55rem; padding-bottom: .55rem; gap: .6rem; } /* il piu' grande che sta accanto a «Kickstarter» e al burger anche a 360px (misurato: ~153px di scritta, 10px d'aria prima del bottone) */ .barra-sito .marchio img { height: 44px; } .barra-sito .marchio { margin-right: auto; } .barra-cta { padding: .55rem .85rem; font-size: .78rem; letter-spacing: .05em; } .barra-cta-lungo { display: none; } } /* ---------------------------------------------------------- torna su --- */ /* Compare dopo il primo schermo (rune.js aggiunge .visibile). Senza JS il gate html.js non scatta e resta semplicemente sempre visibile: un link a #top funziona anche cosi'. */ .torna-su { position: fixed; right: clamp(.9rem, 2.5vw, 1.8rem); bottom: clamp(.9rem, 2.5vw, 1.8rem); z-index: 40; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: var(--raggio-s); color: var(--oro-chiaro); border: 1.5px solid transparent; background: linear-gradient(var(--notte), var(--notte)) padding-box, var(--grad-bordo) border-box; box-shadow: var(--bagliore); } .torna-su:hover { color: #FFFFFF; box-shadow: var(--bagliore-forte); } html.js .torna-su { opacity: 0; visibility: hidden; transform: translateY(.6rem); } html.js .torna-su.visibile { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: no-preference) { html.js .torna-su { transition: opacity .35s ease, transform .35s ease, visibility .35s, box-shadow .3s ease; } } /* -------------------------------------------------------- hero home --- */ /* La home: titolo di display e azioni a sinistra, a destra un poster con i Cinque Eredi in armatura di Fusione che si dissolvono l'uno nell'altro. I poster sono ritagli 4:5 delle tavole d'evoluzione (genera_sito, SLIDE_HERO: una figura intera dalla fascia «Fusione»), e il pannello ha lo STESSO rapporto: "cover" riempie la cornice senza ritagliare altro. L'altezza e' il viewport MENO la barra, cosi' tutto l'hero — bottoni compresi — sta nel primo schermo. */ .hero-home { position: relative; min-height: calc(100svh - var(--altezza-barra)); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); /* a tutta larghezza, con la colonna da 78rem ricavata dal padding: cosi' gli aloni di ::before coprono l'intero schermo senza essere tagliati ai bordi della colonna e senza sforare (niente 100vw, che conta anche la barra di scorrimento e fa scorrere la pagina in orizzontale) */ padding: 2.5rem max(1.5rem, calc((100% - 78rem) / 2)) 3rem; isolation: isolate; } /* L'aura dietro al poster: un alone runico e uno dorato, niente immagine. */ .hero-home::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(34rem 30rem at 72% 50%, rgba(53,182,232,.15), transparent 70%), radial-gradient(40rem 26rem at 22% 40%, rgba(227,201,143,.07), transparent 70%); } /* Nessun marchio nell'hero (richiesta Enzo 2026-09-26): il wordmark vive solo nella barra, e il titolo e' il primo elemento della colonna di testo — niente margine sopra, nessun vuoto appeso. */ .hero-testo h1 { margin-top: 0; } .hero-testo .titolo-eco { margin-top: -.12em; } .hero-testo .occhiello { margin-top: .9rem; font-size: 1.2rem; font-style: italic; color: var(--carta); max-width: 32em; } .hero-azioni { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; } /* width: 100% (non min(24rem, Nvw)) apposta: un valore legato al viewport non si accorge quando la sua COLONNA di griglia e' piu' stretta del viewport (successo fra 860 e ~950px: il pannello restava a 384px fissi mentre la colonna si stringeva, e la pagina scrollava in orizzontale). Il max-width resta il tetto sui viewport larghi. */ .hero-arte { justify-self: center; width: 100%; max-width: 26rem; } .hero-slide { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raggio-l); border: 1.5px solid transparent; background: linear-gradient(var(--fondale), var(--fondale)) padding-box, var(--grad-bordo) border-box; box-shadow: -14px 0 50px rgba(227,201,143,.2), 14px 0 50px rgba(53,182,232,.3), 0 30px 70px rgba(0,0,0,.6); } .hero-slide .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--raggio-l) - 2px); opacity: 0; transition: opacity 1.4s ease; } .hero-slide .slide.viva { opacity: 1; } /* La base del poster sfuma nell'abisso: nasconde l'attacco del fregio della tavola d'evoluzione e fa "posare" la figura. */ .hero-slide::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(11,19,30,.85)); } @media (prefers-reduced-motion: no-preference) { /* Il respiro: lo zoom lento della slide viva. Si riavvia da solo ogni volta che il JS sposta la classe "viva" su un'altra immagine. */ .hero-slide .slide.viva { animation: hero-respiro 12s ease-in-out forwards; } @keyframes hero-respiro { from { transform: scale(1); } to { transform: scale(1.06); } } } /* Stessa soglia della barra di navigazione: sopra i 760px la barra e' gia' desktop, quindi anche l'hero deve esserlo — altrimenti fra 761 e 860px si vedeva la barra desktop sopra un hero impilato da telefono. */ @media (max-width: 760px) { .hero-home { grid-template-columns: 1fr; min-height: auto; padding: 2.2rem 1.25rem 3rem; } .hero-arte { margin-top: .5rem; max-width: 20rem; } } /* ----------------------------------------------------------- numeri --- */ /* I contatori della home: tre numeri veri, calcolati dal generatore (genera_sito._numeri_home) — mai scritti a mano. Il numero finale e' GIA' nel markup: senza JS o con reduced-motion si legge quello, e il conteggio animato (rune.js) parte da zero solo quando c'e' da mostrarlo. */ .numeri { padding: 1rem 1.5rem 2rem; } .numeri-lista { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); max-width: 62rem; margin: 0 auto; } .numeri-voce { padding: 1.8rem 1.4rem 1.6rem; text-align: center; } .numeri-cifra { display: inline-block; /* il gradiente sulla cifra, non sulla card */ font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; } .numeri-etichetta { display: block; margin-top: .7rem; } /* Qui l'etichetta rituale prende Changa invece di Cinzel: in Cinzel la cifra 1 e' una I maiuscola, e «Numero 1» si leggeva «Numero I». */ .numeri-etichetta.etichetta-rito { font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; } /* Sul telefono restano tre colonne, strette: tre card impilate a tutta larghezza occupavano uno schermo intero per tre numeri. */ @media (max-width: 760px) { .numeri { padding: .5rem 1rem 1.5rem; } .numeri-lista { gap: .5rem; } .numeri-voce { padding: 1.1rem .4rem 1rem; border-radius: var(--raggio-m); } .numeri-cifra { font-size: clamp(2rem, 10vw, 2.6rem); } .numeri-etichetta.etichetta-rito { font-size: .64rem; letter-spacing: .06em; line-height: 1.35; margin-top: .45rem; } } /* --------------------------------------------- come nasce una tavola --- */ /* Il markup (genera_sito._blocco_nascita_tavola) e' un'unica
    : per ciascuno dei 4 stadi, un
  1. con testo poi immagine, in quest'ordine. Questa e' GIA' la versione corretta per prefers-reduced-motion e per chi non ha JS: una lista verticale semplice, senza sticky ne' animazioni. Lo scroll-telling qui sotto e' un potenziamento CSS puro sopra la STESSA lista (nessun markup duplicato), attivo solo dentro l'@media che richiede sia "html.js" sia "(prefers-reduced-motion: no-preference)": senza JS l'una non scatta (niente html.js), con le animazioni ridotte l'altra non scatta (niente no-preference). */ .nascita { padding: 5rem 1.5rem 3rem; } .nascita-intro { text-align: center; margin-bottom: 3rem; } .nascita-intro h2 { margin-bottom: .8rem; } .nascita-sottotitolo { color: var(--carta-nota); font-style: italic; max-width: 34em; margin: 0 auto; } .nascita-lista { list-style: none; max-width: 64rem; margin: 0 auto; } .nascita-stadio { display: flex; flex-direction: column; gap: 1.5rem; padding: 2.5rem 0; } .nascita-stadio + .nascita-stadio { border-top: 1px solid rgba(227,201,143,.14); } .nascita-testo h3 { font-family: var(--font-display); font-weight: 800; color: var(--oro-chiaro); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .7rem; } .nascita-testo p { max-width: 34em; } .nascita-media img { display: block; width: 100%; height: auto; border-radius: var(--raggio-m); border: 1px solid rgba(227,201,143,.3); box-shadow: -8px 0 30px rgba(227,201,143,.1), 8px 0 30px rgba(53,182,232,.16), 0 18px 44px rgba(0,0,0,.5); } .nascita-vignette-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; max-width: 30rem; } .nascita-vignette-griglia img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; } /* Se il numero di vignette e' dispari, l'ultima chiude a tutta larghezza — com'e' nella griglia reale della tavola-20 (V3 sotto V1+V2). */ .nascita-vignette-griglia img:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 1.4; } /* ------------------------------------------------- lo scroll-telling --- */ /* Solo da schermi larghi: una sezione a scorrimento fissa (sticky) alta 400vh su un telefono e' spesso insopportabile, quindi sotto 760px — la STESSA soglia di .barra-sito e di .hero-home — la sezione resta SEMPRE la lista statica qui sopra: e' una scelta, non una svista. */ @media (min-width: 761px) and (prefers-reduced-motion: no-preference) { html.js .nascita-lista { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; } html.js .nascita-stadio { display: contents; } html.js .nascita-stadio + .nascita-stadio { border-top: none; } html.js .nascita-testo { grid-column: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 1rem; opacity: .3; transition: opacity .5s ease; } html.js .nascita-stadio.stadio-vivo .nascita-testo { opacity: 1; } html.js .nascita-media { grid-column: 1; grid-row: 1 / -1; position: sticky; /* Sotto la barra sticky, non sotto di essa: senza questo offset la cima di ogni tavola finiva tagliata e in parte coperta dalla barra. L'altezza si riduce della stessa misura, altrimenti un box ancora alto 100vh sfonderebbe il fondo per la quota guadagnata in cima. */ top: var(--altezza-barra); height: calc(100vh - var(--altezza-barra)); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.97); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); pointer-events: none; } /* Solo il figlio diretto (le immagini a stadio singolo): la griglia di vignette dello stadio 2 e' un livello piu' sotto e ha le sue regole. 78% dello spazio VERO disponibile, calcolato sul box gia' ridotto della barra, cosi' l'immagine non lo sfonda mai. */ html.js .nascita-media > img { max-height: calc((100vh - var(--altezza-barra)) * 0.78); width: auto; max-width: 100%; } html.js .nascita-stadio.stadio-vivo .nascita-media { opacity: 1; transform: none; pointer-events: auto; } /* Le vignette dello stadio 2 entrano sfalsate: una ogni 80ms, dal basso. */ html.js .nascita-vignette-griglia img { transform: translateY(1.4rem); opacity: 0; transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .5s ease; } html.js .nascita-vignette-griglia img:nth-child(1) { transition-delay: 0ms; } html.js .nascita-vignette-griglia img:nth-child(2) { transition-delay: 80ms; } html.js .nascita-vignette-griglia img:nth-child(3) { transition-delay: 160ms; } html.js .nascita-vignette-griglia img:nth-child(4) { transition-delay: 240ms; } html.js .nascita-stadio.stadio-vivo .nascita-vignette-griglia img { transform: none; opacity: 1; } } /* --------------------------------------------- restanti sezioni home --- */ /* Due colonne immagine/testo, immagini arrotondate col bordo luminoso: l'impaginazione di Virex. Usata dalla home (L'albo esiste gia'); i Cinque Eredi, dal restyle fase 2, sono una fascia (.fascia-eredi). */ .riga-doppia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } .riga-doppia img { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; border-radius: var(--raggio-l); border: 1px solid rgba(227,201,143,.35); box-shadow: -10px 0 36px rgba(227,201,143,.13), 10px 0 36px rgba(53,182,232,.2), 0 24px 50px rgba(0,0,0,.55); } .riga-doppia p { font-size: 1.12rem; } @media (max-width: 760px) { .riga-doppia { grid-template-columns: 1fr; } .riga-doppia img { max-width: 16rem; } } .risonanza { padding: 4rem 1.5rem; } .sezione-albo { padding: 4rem 1.5rem; } /* Galleria, Kickstarter e iscrizione: sezioni centrate. Kickstarter e iscrizione sono card luminose (l'argomento finale e il form), la galleria resta aperta: un invito, non un riquadro. */ .galleria-invito, .kickstarter-blocco, .iscrizione-home { padding: 3rem 1.5rem; text-align: center; } .galleria-invito .colonna, .kickstarter-blocco .colonna, .iscrizione-home .colonna { max-width: 44rem; } .galleria-invito p:not(.conto-cta), .kickstarter-blocco p:not(.conto-cta), .iscrizione-home .colonna > p { font-size: 1.1rem; } .kickstarter-blocco .card-luce, .iscrizione-home .card-luce { padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.4rem, 5vw, 3.6rem); } /* Il blocco Kickstarter e' l'argomento di chiusura: alone runico dietro. */ .kickstarter-blocco .card-luce { box-shadow: -10px 0 60px rgba(227,201,143,.14), 10px 0 60px rgba(53,182,232,.22); } .kickstarter-blocco .bottone-ks { font-size: 1.1rem; padding: 1.15rem 2.4rem; } .iscrizione-home .iscrizione { margin: 2rem auto 0; text-align: left; } /* ------------------------------------------------- form iscrizione --- */ /* Il form MailerLite (.iscrizione): usato da /lancio/ (due volte) e dalla home (#iscrizione). Vive qui, non duplicato nello stile locale della landing; l'handler JS condiviso vive in sito_comune.py (script_iscrizione_mailerlite) perche' e' comportamento, non aspetto. */ .iscrizione { margin-top: 2rem; max-width: 32rem; } .iscrizione label { display: block; font-size: .95rem; color: var(--carta-nota); margin-bottom: .45rem; } .iscrizione-riga { display: flex; gap: .7rem; flex-wrap: wrap; } .iscrizione input[type="email"] { flex: 1 1 14rem; font: inherit; font-size: 1.02rem; color: var(--carta); background: rgba(7,11,18,.8); border: 1px solid rgba(227,201,143,.4); border-radius: var(--raggio-s); padding: .85rem 1.1rem; } .iscrizione input[type="email"]::placeholder { color: var(--carta-nota); opacity: .8; } .iscrizione input[type="email"]:focus { border-color: var(--runa); outline: none; box-shadow: 0 0 0 1px var(--runa), 0 0 20px rgba(53,182,232,.3); } /* Il bottone del form: il primario del sistema (scuro, bordo in gradiente, bagliore), con la lama di luce che lo attraversa ogni tanto. */ .iscrizione button { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: #FFF8E6; border: 1.5px solid transparent; background: linear-gradient(var(--notte), var(--notte)) padding-box, var(--grad-bordo) border-box; box-shadow: var(--bagliore); border-radius: var(--raggio-s); padding: .85rem 1.6rem; cursor: pointer; position: relative; overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .iscrizione button { transition: box-shadow .3s ease; } .iscrizione button::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,252,240,.28), transparent); animation: lama 4.8s ease-in-out infinite; } @keyframes lama { 0%, 64% { left: -60%; } 82% { left: 130%; } 100% { left: 130%; } } } .iscrizione button:hover { box-shadow: var(--bagliore-forte); } .promessa { margin-top: .8rem; font-size: .95rem; color: var(--carta-nota); } .esito { margin-top: .9rem; font-size: 1rem; color: var(--runa); display: none; } .esito.visibile { display: block; } /* --------------------------------------------------------- galleria --- */ /* Restyle fase 2: il linguaggio della home portato in Galleria. L'indice (galleria/index.html) e' una griglia di card luminose, una per sezione, con la miniatura della prima opera svelata e il contatore reale (sito_vetrina.conteggi()) con la cifra grande in gradiente. */ .galleria-indice { padding: 4.5rem 1.5rem 3rem; } .galleria-intro { text-align: center; margin-bottom: 3rem; } .galleria-intro p { color: var(--carta-nota); font-size: 1.1rem; max-width: 34em; margin: 1rem auto 0; } /* il contatore: Changa, non Cinzel (in Cinzel l'1 e' una I maiuscola) */ .galleria-contatore { font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); } .galleria-intro .galleria-contatore { margin-top: 1.1rem; } .galleria-sezioni { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); max-width: 72rem; margin: 0 auto; } .sezione-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--carta); } .sezione-card:hover { color: var(--carta); box-shadow: var(--bagliore); } .sezione-card-arte { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; color: var(--oro-chiaro); background: radial-gradient(circle at 50% 50%, rgba(53,182,232,.12), transparent 65%), var(--notte); border-bottom: 1px solid rgba(227,201,143,.16); } .sezione-card-arte img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .sezione-card-arte svg { opacity: .8; filter: drop-shadow(0 0 10px var(--bagliore-runa)); } .sezione-card-corpo { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem 1.6rem 1.6rem; } /* il titolo della card e' un h2 (la struttura della pagina), con la voce di .titolo-card: la taglia di sezione qui sarebbe enorme */ .sezione-card h2 { font-size: var(--titolo-card); font-weight: 800; margin: 0; } .sezione-card-sotto { color: var(--carta-nota); font-size: 1rem; line-height: 1.5; } .sezione-card .galleria-contatore { margin-top: auto; padding-top: .8rem; display: flex; align-items: baseline; gap: .55rem; } .contatore-cifra { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { .sezione-card { transition: box-shadow .35s ease, transform .35s ease; } .sezione-card-arte img { transition: transform .6s cubic-bezier(.2,.6,.2,1); } .sezione-card:hover { transform: translateY(-3px); } .sezione-card:hover .sezione-card-arte img { transform: scale(1.05); } } /* La pagina di una sezione (galleria//index.html): link di ritorno all'indice, titolo e contatore, poi la griglia — card pubblicate e card sigillate fianco a fianco, stessa forma. */ .galleria-sezione { padding: 3rem 1.5rem 3rem; } .galleria-torna { max-width: 72rem; margin: 0 auto 1.5rem; } .galleria-torna a { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--oro-chiaro); } .galleria-torna a:hover { color: var(--runa); } .galleria-griglia { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); max-width: 72rem; margin: 2.5rem auto 0; } /* La forma e' della sezione (genera_sito.FORMA_SEZIONE), mai dell'opera: le sheet A3 orizzontali stanno intere nella card, le tavole verticali e i sigilli quadrati pure. */ .galleria-griglia.forma-orizzontale { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); --forma: 3307 / 2339; } .galleria-griglia.forma-verticale { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); --forma: 5 / 8; } .galleria-griglia.forma-quadrata { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); --forma: 1 / 1; } /* Sul telefono sigilli e tavole verticali stanno in due colonne: una sola card a tutta larghezza per 58 sigilli era una pagina lunghissima. Le sheet orizzontali restano una per riga, o non si leggerebbero. */ @media (max-width: 760px) { .galleria-griglia.forma-verticale, .galleria-griglia.forma-quadrata { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .forma-verticale .opera-card figcaption, .forma-quadrata .opera-card figcaption { padding: .7rem .75rem .85rem; } .forma-verticale .opera-card h3, .forma-quadrata .opera-card h3 { font-size: .8rem; letter-spacing: .03em; } } .opera-card { display: flex; flex-direction: column; border-radius: var(--raggio-m); overflow: hidden; border: 1px solid transparent; background: linear-gradient(var(--vetro), var(--vetro)) padding-box, linear-gradient(var(--abisso), var(--abisso)) padding-box, linear-gradient(100deg, rgba(227,201,143,.45), rgba(53,182,232,.45)) border-box; box-shadow: -4px 0 20px rgba(227,201,143,.06), 4px 0 20px rgba(53,182,232,.09); } .opera-apri { display: block; overflow: hidden; aspect-ratio: var(--forma, 4 / 5); background: var(--notte); } .opera-apri img { display: block; width: 100%; height: 100%; object-fit: cover; } .opera-apri:focus-visible { outline-offset: -3px; } .opera-card:hover, .opera-card:focus-within { background: linear-gradient(var(--vetro), var(--vetro)) padding-box, linear-gradient(var(--abisso), var(--abisso)) padding-box, var(--grad-bordo) border-box; box-shadow: var(--bagliore); } @media (prefers-reduced-motion: no-preference) { .opera-card { transition: box-shadow .35s ease, transform .35s ease; } .opera-apri img { transition: transform .6s cubic-bezier(.2,.6,.2,1); } .opera-card:hover { transform: translateY(-3px); } .opera-card:hover .opera-apri img, .opera-apri:focus-visible img { transform: scale(1.05); } } .opera-card figcaption { padding: .9rem 1.1rem 1.1rem; } .opera-card h3 { font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--oro-chiaro); } .opera-card figcaption p { margin-top: .35rem; font-size: .92rem; color: var(--carta-nota); } /* La card sigillata: nessuna immagine, nessun link, solo il rombo runico (decorativo, aria-hidden) e «Ancora sigillato». Stessa forma delle pubblicate della sua sezione; il bordo tratteggiato dice «chiuso». */ .opera-card.sigillata { align-items: center; justify-content: center; gap: .9rem; aspect-ratio: var(--forma, 4 / 5); border: 1px dashed rgba(227,201,143,.3); background: radial-gradient(circle at 50% 45%, rgba(53,182,232,.09), transparent 62%), rgba(7,11,18,.55); box-shadow: none; } .opera-card.sigillata:hover { box-shadow: none; transform: none; } .opera-card.sigillata svg { color: var(--oro-chiaro); opacity: .7; filter: drop-shadow(0 0 8px var(--bagliore-runa)); } .opera-card.sigillata p { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--carta-nota); } /* La riga finale quando le sigillate superano MAX_SIGILLATE_MOSTRATE (genera_sito.py): a tutta larghezza della griglia, non un'altra card. */ .galleria-altre-sigillate { grid-column: 1 / -1; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--carta-nota); padding: 1rem 0 0; } /* --------------------------------------------------------- lightbox --- */ /* Il nativo delle sezioni della Galleria (genera_sito ._LIGHTBOX_HTML, comportamento in rune.js). A tutto schermo e trasparente: il velo e' ::backdrop, e un clic sul vuoto attorno all'immagine chiude (rune.js). Senza JS non si apre mai: il link della card porta all'immagine grande. */ .lightbox { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--carta); overflow: hidden; } .lightbox::backdrop { background: rgba(4, 7, 12, .96); } html:has(.lightbox[open]) { overflow: hidden; } .lightbox-telaio { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); padding: clamp(1rem, 3vw, 2rem) clamp(.8rem, 3vw, 2rem); } .lightbox-figura { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .lightbox-cornice { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; } .lightbox-cornice img { display: block; max-width: 100%; max-height: calc(100svh - 10.5rem); width: auto; height: auto; border-radius: var(--raggio-m); border: 1px solid rgba(227,201,143,.35); box-shadow: -14px 0 50px rgba(227,201,143,.16), 14px 0 50px rgba(53,182,232,.24), 0 30px 70px rgba(0,0,0,.6); background: var(--notte); } .lightbox-didascalia { text-align: center; max-width: 44rem; } .lightbox-testo { margin-top: .3rem; font-size: .98rem; color: var(--carta-nota); } .lightbox-testo:empty { display: none; } .lightbox-posizione { margin-top: .45rem; font-family: var(--font-display); letter-spacing: .14em; } .lightbox-chiudi, .lightbox-freccia { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: var(--raggio-s); color: var(--oro-chiaro); cursor: pointer; border: 1.5px solid transparent; background: linear-gradient(var(--notte), var(--notte)) padding-box, var(--grad-bordo) border-box; box-shadow: var(--bagliore); } .lightbox-chiudi:hover, .lightbox-freccia:hover { color: #FFFFFF; box-shadow: var(--bagliore-forte); } .lightbox-chiudi { position: absolute; top: clamp(.8rem, 2.5vw, 1.6rem); right: clamp(.8rem, 2.5vw, 1.6rem); z-index: 1; } @media (prefers-reduced-motion: no-preference) { .lightbox-chiudi, .lightbox-freccia { transition: box-shadow .3s ease, color .3s ease; } .lightbox[open] .lightbox-cornice img { animation: lightbox-entra .35s ease; } @keyframes lightbox-entra { from { opacity: .2; transform: scale(.98); } to { opacity: 1; transform: none; } } } /* Sul telefono le frecce scendono in basso ai lati della didascalia: visibili e grandi quanto un pollice, senza rubare larghezza all'opera. */ @media (max-width: 760px) { .lightbox-telaio { grid-template-columns: minmax(0, 1fr); padding: 4.4rem .75rem 1rem; } .lightbox-figura { grid-column: 1; grid-row: 1; } .lightbox-cornice img { max-height: calc(100svh - 13rem); border-radius: var(--raggio-s); } .lightbox-didascalia { padding: 0 3.8rem; min-height: 3.2rem; } .lightbox-freccia { position: absolute; bottom: 1rem; } .lightbox-prima { left: .75rem; } .lightbox-dopo { right: .75rem; } } /* -------------------------------------------------- i Cinque Eredi --- */ /* La fascia dei Cinque Eredi in armatura di Fusione (genera_sito ._fascia_eredi): home (La Risonanza), /lancio/ e /il-mondo/. Un sceglie l'immagine: sopra i 760px la fila intera (circa 4:1), sotto la composizione 3 + 2 (EREDI_INSIEME_STRETTO), cosi' sul telefono si vedono tutti e cinque senza scorrere. Stesso CSS per tutte e due: larga quanto la colonna, altezza dal rapporto dell'immagine. */ .fascia-eredi { max-width: 68rem; margin: 2.8rem auto 0; padding: 0 1.5rem; } .fascia-eredi picture { display: block; } .fascia-eredi img { width: 100%; height: auto; } .fascia-eredi figcaption { font-size: .85rem; color: var(--carta-nota); font-style: italic; text-align: right; padding-top: .7rem; } .risonanza-testo { text-align: center; } .risonanza-testo p { font-size: 1.12rem; } @media (max-width: 760px) { /* le sezioni che la ospitano hanno gia' 1.5rem di lato: niente doppio */ .fascia-eredi { margin-top: 1.8rem; padding: 0; } .fascia-eredi img { border-radius: var(--raggio-m); } .fascia-eredi figcaption { text-align: center; } } /* ---------------------------------------------------------- privacy --- */ /* L'informativa (genera_sito.pagina_privacy): il testo legale e' copiato parola per parola dalla pagina a mano, quindi qui si veste solo il markup che aveva gia' (h1, h2, p, .nota). */ .privacy { padding: 5.5rem 1.5rem 1rem; } /* come .apertura-pagina */ /* il titolo e' .titolo-pagina (qui sotto): la privacy lo prende per selettore, perche' il suo markup e' copiato cosi' com'era */ .privacy p + h2 { margin-top: 2rem; } .privacy .nota { font-style: italic; color: var(--carta-nota); font-size: .9rem; margin-top: 2.5rem; } /* --------------------------------------------------- titolo di pagina --- */ /* L'h1 delle pagine interne senza hero (/il-mondo/, /contatti/, privacy): display Changa in gradiente, un gradino sotto il display della home. inline-block per la stessa ragione degli h2: il gradiente arriva al blu sulla parola, non si perde in una colonna larga. */ .titolo-pagina, .privacy h1 { display: inline-block; max-width: 100%; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.005em; color: var(--oro-chiaro); margin-bottom: 1.4rem; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .titolo-pagina, .privacy h1 { background-image: var(--grad-titolo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } /* L'apertura di una pagina interna: l'aria sotto la barra e un alone runico leggero dietro al titolo, come l'hero della home in piccolo. */ .apertura-pagina { padding: 5.5rem 1.5rem 1.5rem; background: radial-gradient(50rem 18rem at 50% 0%, rgba(53,182,232,.08), transparent 70%); } /* ---------------------------------------------------- elenco di fatti --- */ /* Tre affermazioni brevi in card luminose affiancate (/lancio/, «Non compri una promessa»): il rombo runico sopra, il grassetto come titolo della card in Changa, il resto in testo corrente. */ .elenco-fatti { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); max-width: 64rem; margin: 2.5rem auto; } .elenco-fatti li { padding: 1.7rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; font-size: 1rem; line-height: 1.55; } .elenco-fatti svg { color: var(--oro-chiaro); filter: drop-shadow(0 0 6px var(--bagliore-runa)); } .elenco-fatti strong { display: block; margin-bottom: .4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; color: var(--oro-chiaro); } @media (max-width: 760px) { .elenco-fatti { grid-template-columns: 1fr; gap: .9rem; } .elenco-fatti li { padding: 1.3rem 1.3rem 1.2rem; } } /* ---------------------------------------------------------- ritratto --- */ /* Una persona vera (l'autore): foto rotonda col bordo in gradiente e il bagliore a due capi, accanto a nome e testo, dentro una card-luce. */ .ritratto-card { display: flex; gap: clamp(1.2rem, 3vw, 2rem); align-items: center; padding: clamp(1.4rem, 3vw, 2rem); } .ritratto-luce { width: 7.5rem; height: 7.5rem; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: var(--grad-bordo) border-box; box-shadow: var(--bagliore); filter: grayscale(1) contrast(1.02); } .ritratto-nome { margin-bottom: .45rem; } .ritratto-card p:not(.ritratto-nome) { font-size: .98rem; color: var(--carta-nota); } @media (max-width: 540px) { .ritratto-card { flex-direction: column; text-align: center; } } /* ------------------------------------------------------ cornice video --- */ /* Il lettore del trailer: la stessa cornice del poster della home (bordo in gradiente, bagliore oro/runa, angoli grandi). Il