/* ============================================================ WF ZOO — VESTITO DEL SITO + HOME (portato dal prototipo hi-fi) ------------------------------------------------------------ Stack: CSS vanilla, GPU-only (transform/opacity/filter). Brand vars in wf-tokens.css · @font-face in theme.json. Foto/loghi: ../img/ · font: ../fonts/ (via theme.json). ============================================================ */ /* Reset minimale del prototipo */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-body); color:var(--nero); background:var(--bianco); line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:var(--font-heading); font-weight:400; line-height:1.05; letter-spacing:.5px; text-transform:uppercase; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; } /* BUTTONS */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:50px; font-family:var(--font-body); font-weight:700; font-size:16px; border:none; cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s; letter-spacing:.2px; white-space:nowrap; } .btn-primary{ background:var(--giallo); color:var(--nero); box-shadow:0 6px 18px rgba(252,186,3,.35); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); background:var(--giallo-scuro); } .btn-ghost{ background:transparent; color:var(--nero); border:2px solid var(--nero); } .btn-ghost:hover{ transform:translateY(-3px); background:var(--nero); color:var(--bianco); } .btn-green{ background:var(--verde); color:#fff; box-shadow:0 6px 18px rgba(75,107,38,.3); } .btn-green:hover{ transform:translateY(-3px); background:var(--verde-scuro); } .btn-white{ background:#fff; color:var(--nero); } .btn-white:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18); } .btn-outline-w{ background:transparent; color:#fff; border:2px solid #fff; } .btn-outline-w:hover{ background:#fff; color:var(--verde-scuro); transform:translateY(-3px); } /* MOTORE MICRO-INTERAZIONI — bordo luminoso che SCORRE attorno alla card (colore = --edge) */ @property --fxang{ syntax:''; initial-value:0deg; inherits:false; } .fx-int{ position:relative; } .fx-int::before{ content:''; position:absolute; inset:0; z-index:6; border-radius:inherit; padding:3px; pointer-events:none; opacity:0; transition:opacity .35s ease; background:conic-gradient(from var(--fxang), transparent 0deg, var(--edge, var(--giallo)) 50deg, #fff 90deg, var(--edge, var(--giallo)) 130deg, transparent 210deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; } .fx-int:hover::before{ opacity:1; animation:fxspin 2.4s linear infinite; } @keyframes fxspin{ to{ --fxang:360deg; } } @media (prefers-reduced-motion: reduce){ .fx-int::before{ transition:none; } .fx-int:hover::before{ animation:none; } } /* NAVBAR (il tag
è il template-part del tema) */ header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--bordo); transition:box-shadow .3s; } header.scrolled{ box-shadow:0 4px 20px rgba(0,0,0,.06); } .nav{ display:flex; align-items:center; justify-content:space-between; height:78px; } .nav .nav-logo img{ height:50px; width:auto; display:block; } .nav-menu .menu{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; } .nav-menu .menu > li{ position:relative; } .nav-menu .menu > li > a{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px; padding:10px 12px; border-radius:10px; transition:color .2s, background .2s; /* le voci non vanno mai a capo: "Biglietti e Visite" spezzato su due righe alzava tutta la barra e si leggeva male */ white-space:nowrap; } .nav-menu .menu > li > a:hover{ color:var(--giallo-scuro); background:var(--crema); } /* WordPress produce .sub-menu e .menu-item-has-children; il nostro markup a mano usava .submenu e .has-sub. Valgono entrambi, cosi' la navbar e' identica sia col menu gestito dal pannello sia con la riserva scritta a mano. */ .nav-menu .has-sub > a::after, .nav-menu .menu-item-has-children > a::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.55; } .nav-menu .submenu, .nav-menu .sub-menu{ list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 4px); left:0; min-width:248px; background:#fff; border:1px solid var(--bordo); border-radius:16px; box-shadow:0 18px 40px rgba(26,26,26,.16); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:120; } .nav-menu .menu > li:hover > .submenu, .nav-menu .menu > li:focus-within > .submenu, .nav-menu .menu > li:hover > .sub-menu, .nav-menu .menu > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; } .nav-menu .submenu a, .nav-menu .sub-menu a{ display:block; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:600; color:var(--nero); white-space:nowrap; transition:background .15s, color .15s; } .nav-menu .submenu a:hover, .nav-menu .sub-menu a:hover{ background:var(--crema); color:var(--giallo-scuro); } .nav-cta{ display:flex; align-items:center; gap:14px; } .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; } .burger span{ width:26px; height:3px; background:var(--nero); border-radius:3px; } /* utility: testo solo per screen reader (h1 SEO nascosto) */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ===== HERO — una immagine (leone) + due colonne testo (Fondazione sx / Zoo dx) ===== */ .hero-split{ position:relative; min-height:min(92vh,880px); overflow:hidden; background:#0a0a08; display:flex; align-items:flex-end; } .wf-home .hero-split{ padding:0; } .hp-bg{ position:absolute; inset:-9% 0; z-index:0; will-change:transform; } /* layer del parallax */ /* Inquadratura desktop: il leone va CENTRATO, con il muso libero dai loghi. Con `cover` il crop lasciava la testa a sinistra e il logo Fondazione cadeva sul muso. 165% + fuoco a 2%/22% porta il soggetto al centro. Lo scale(1.06) resta: serve al parallasse per non scoprire i bordi. NB: taratura legata a lion-hero.jpg — se si cambia la foto, rifarla. */ .hp-bg-img{ position:absolute; inset:0; background-position:2% 22%; background-size:165% auto; transform:scale(1.06); } /* HERO slideshow: i 5 layer si alternano in dissolvenza lenta (JS, ogni 10s). Il Ken Burns gira su TUTTE le slide, sincronizzato (stesso timeline): così quando una foto sostituisce l'altra sono alla STESSA scala → crossfade fluido, niente scatto. */ .hp-slide{ opacity:0; transition:opacity 2.4s ease; } .hp-slide.is-active{ opacity:1; } .hps-lion{ background-image:url('../img/lion-hero.jpg'); } .hps-procione{ background-image:url('../img/lion-hero.jpg'); } /* visitatori che si prendono cura */ .hps-leopardo{ background-image:url('../img/exp-leopardo.jpg'); } .hps-capre{ background-image:url('../img/an-capre.jpg'); } /* bambini con gli animali */ .hps-banditi{ background-image:url('../img/exp-banditi.jpg'); } @media (prefers-reduced-motion: no-preference){ .hp-slide{ animation:kenburns 18s ease-in-out infinite alternate; } } .hp-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.1) 60%), linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)); } .hp-grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px clamp(46px,7vh,88px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:end; } /* colonne CENTRATE nelle loro metà (contenuto simmetrico, non incollato ai bordi) */ .hp-col{ max-width:440px; display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 auto; animation:fadeRise .9s both; } .hp-zoo{ animation-delay:.14s; } .hp-col .btn{ align-self:center !important; } .hp-logo-box{ justify-content:center; } /* separazione col COLORE, niente linea: velo azzurro a sx (Fondazione), caldo/dorato a dx (Zoo) */ .hero-split::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(18,97,164,.30) 0%, rgba(18,97,164,.10) 42%, rgba(224,164,0,.10) 58%, rgba(224,164,0,.30) 100%); } @media (max-width:820px){ .hero-split::after{ display:none; } } /* occhiello netto FONDAZIONE / ZOO */ .hp-eyebrow{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; font-size:clamp(16px,1.5vw,21px); letter-spacing:3px; color:var(--giallo); margin-bottom:12px; } /* BRAND: la Fondazione è BLU (#1261a4, dal logo) — mai verde, mai giallo */ .hp-found .hp-eyebrow{ color:#1261a4; text-shadow:0 0 10px rgba(255,255,255,.30), 0 2px 6px rgba(0,0,0,.55); } /* box-logo ad altezza FISSA → i due loghi (proporzioni diverse) restano allineati */ .hp-logo-box{ height:clamp(88px,10vw,150px); display:flex; align-items:flex-end; margin-bottom:clamp(18px,2vw,26px); } /* Desktop: loghi piu' bassi e un filo piu' piccoli, cosi' non salgono sul volto del leone (richiesta di Bea). La box e' allineata in basso: ridurne l'altezza fa scendere il logo verso il titolo. Mobile invariato (override a 820px). */ @media (min-width:821px){ .hp-logo-box{ height:clamp(70px,7.2vw,104px); margin-bottom:clamp(14px,1.5vw,20px); } } .hp-logo-img{ display:block; width:auto; max-height:100%; filter:drop-shadow(0 4px 20px rgba(0,0,0,.6)); } /* titolo bloccato a 2 righe, sub a 3 righe → stesse altezze nelle due colonne */ .hp-head{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:#fff; font-size:clamp(28px,3.3vw,50px); line-height:1.06; letter-spacing:.5px; margin-bottom:16px; text-shadow:0 2px 6px rgba(0,0,0,.62), 0 0 30px rgba(0,0,0,.72); min-height:2.12em; } /* max-width tarata perché ENTRAMBE le descrizioni cadano su 3 righe: a piena colonna (440px) quella della Fondazione ne riempiva solo 2 e le due colonne risultavano sbilanciate. A 420px vanno a 3 righe tutte e due. */ .hp-sub{ color:#fff; font-size:clamp(15px,1.15vw,17px); line-height:1.55; margin-bottom:24px; text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.68); min-height:4.65em; max-width:420px; margin-inline:auto; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .hp-col .btn{ align-self:flex-start; margin-top:auto; } /* HERO interattivo: passando sul logo/scritte tutta la colonna si solleva e si illumina (come le card) */ .hp-int{ position:relative; border-radius:22px; transition:transform .45s cubic-bezier(.34,1.56,.64,1); } .hp-found{ --glowcol:rgba(18,97,164,.85); } /* BLU Fondazione */ .hp-zoo{ --glowcol:rgba(252,186,3,.82); } /* NIENTE riquadri/box in nessuno stato (scelta cliente): all'hover SOLO il sollevamento del logo */ .hp-int::before{ display:none !important; } .hp-int:hover, .hp-int:focus-within{ transform:none; } .hp-int:hover .hp-logo-img, .hp-int:focus-within .hp-logo-img{ transform:translateY(-6px); filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); } .hp-int .hp-logo-img{ transition:transform .35s ease, filter .35s ease; } .hp-int:hover .hp-logo-img{ filter:drop-shadow(0 4px 26px var(--glowcol)); } .hp-int .hp-eyebrow, .hp-int .hp-logo-img{ transition:color .35s ease, filter .35s ease; } @media (prefers-reduced-motion: reduce){ .hp-int, .hp-int::before, .hp-int .hp-eyebrow, .hp-int .hp-logo-img{ transition:none; } .hp-int:hover, .hp-int:focus-within{ transform:none; } } .hero-split .scroll-cue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; } .hero-split .scroll-cue .line{ width:1px; height:42px; background:rgba(255,255,255,.28); position:relative; overflow:hidden; } .hero-split .scroll-cue .line::after{ content:''; position:absolute; left:0; top:0; width:1px; height:16px; background:linear-gradient(rgba(255,255,255,0), #fff); animation:scrolldown 1.7s cubic-bezier(.6,0,.4,1) infinite; } @media (max-width:820px){ /* ============ HERO "DA APP" ============ Su mobile la hero mostra UNA sola anima: il leone, il titolo Zoo e basta, in ~70% dello schermo. Cosi' i chip informativi entrano nella prima schermata. La Fondazione ha la sua striscia subito sotto i chip (.wf-fond-strip), il bottone lo fa la barra fissa in basso. */ .hero-split{ min-height:0; height:min(70vh,600px); } .hp-found{ display:none; } .hp-scrim{ background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.12) 70%); } .hp-logo-img{ filter:drop-shadow(0 3px 9px rgba(0,0,0,.8)) drop-shadow(0 0 20px rgba(0,0,0,.5)); } .hp-grid{ grid-template-columns:1fr; gap:0; padding:0 24px 26px; } .hp-col{ max-width:520px; } .hp-zoo{ justify-self:center; } .hp-head{ min-height:0; margin-bottom:0; } .btn{ padding:12px 22px; font-size:15px; white-space:normal; max-width:100%; text-align:center; justify-content:center; } /* i pulsanti con l'etichetta lunga sbordavano dalle card sul telefono */ .hp-zoo .btn-primary{ display:none; } .hp-sub{ min-height:0; -webkit-line-clamp:3; max-width:none; } /* due righe tagliavano la frase a meta' */ .hp-logo-box{ height:clamp(58px,15vw,88px); } /* striscia Fondazione: compatta, accento blu brand */ .wf-fond-strip{ display:flex; align-items:center; gap:14px; margin:0 16px 4px; padding:14px 16px; background:#fff; border-left:4px solid #1261a4; border-radius:12px; text-decoration:none; box-shadow:0 1px 5px rgba(0,0,0,.06); } .wf-fond-strip__testo{ font-family:var(--font-body); font-size:14px; line-height:1.45; color:var(--nero); } .wf-fond-strip__testo strong{ display:block; color:#1261a4; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; } .wf-fond-strip__freccia{ margin-left:auto; color:#1261a4; font-size:20px; } /* novita' a scorrimento laterale, stile rail da app */ .nv-grid, .nv-grid.nv-1, .nv-grid.nv-2, .nv-grid.nv-3{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; gap:14px; padding:4px 2px 10px; } .nv-grid::-webkit-scrollbar{ display:none; } .nv-grid .nv-card, .nv-grid.nv-1 .nv-card{ flex:0 0 80%; max-width:320px; scroll-snap-align:start; flex-direction:column; } /* la foto è orizzontale col leone a SINISTRA: su ritratto il crop centrale mostrerebbe solo lo sfondo → sposto il fuoco sul soggetto. NB: valore tarato su lion-hero.jpg; se si cambia la foto hero, riverificare questo posizionamento. */ .hp-bg-img{ background-position:29% 38%; background-size:cover; } .hp-slide{ animation:none; } .hero-split .scroll-cue{ display:none; } } @media (prefers-reduced-motion: reduce){ .hp-bg-img, .hp-col{ animation:none; } .hero-split .scroll-cue .line::after{ animation:none; } } /* HERO (due temi, immagine continua + parallax) */ .hero2{ position:relative; height:calc(100vh - 78px); min-height:620px; max-height:920px; overflow:hidden; padding:0; display:flex; align-items:flex-end; background:#0a0a0a; } .hero2 .media{ position:absolute; inset:-9% 0; z-index:0; will-change:transform; } /* ============ FASCIA RAPIDA (solo mobile, sotto la hero) ============ */ .wf-quick{ display:none; } @media (max-width:820px){ .wf-quick{ display:block; background:var(--crema, #faf6ee); padding-bottom:16px; } .wf-chips{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:14px 16px; } .wf-chips::-webkit-scrollbar{ display:none; } .wf-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--nero); background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:50px; padding:9px 15px; text-decoration:none; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.05); } .wf-chip-dot{ width:8px; height:8px; border-radius:50%; background:#3f9c46; } .wf-chip.is-closed .wf-chip-dot{ background:#c0392b; } } .hero2 .bg{ position:absolute; inset:0; background-image:url('../img/lion-hero.jpg'); background-size:cover; background-position:center; transform:scale(1.06); animation:kenburns 28s ease-in-out infinite alternate; } @keyframes kenburns{ 0%{transform:scale(1.06) translate(0,0)} 100%{transform:scale(1.16) translate(-2%,-2%)} } .hero2 .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,.08) 60%), linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)); } .hero2 .grid{ position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:0 32px 6%; display:grid; grid-template-columns:1fr 1fr; gap:6%; align-items:end; } .hero2 .col{ max-width:440px; animation:fadeRise .9s both; } .hero2 .col.zoo{ justify-self:end; animation-delay:.16s; } .hero2 .badge{ display:inline-flex; align-items:center; margin-bottom:20px; } .hero2 .badge img{ display:block; width:auto; filter:drop-shadow(0 2px 16px rgba(0,0,0,.85)); } .hero2 .found .badge img{ height:118px; } .hero2 .zoo .badge img{ height:66px; } .hero2 h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; letter-spacing:.5px; font-size:clamp(28px,3vw,44px); line-height:1.05; color:#fff; margin-bottom:14px; text-shadow:0 3px 24px rgba(0,0,0,.55); } .hero2 p{ font-size:16px; line-height:1.55; color:rgba(255,255,255,.92); margin-bottom:22px; max-width:400px; text-shadow:0 1px 12px rgba(0,0,0,.5); } .hero2 .scroll-cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.75); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; animation:cueFade 1s both .7s; } @keyframes cueFade{ from{opacity:0} to{opacity:1} } .hero2 .scroll-cue .line{ width:1px; height:46px; background:rgba(255,255,255,.22); position:relative; overflow:hidden; } .hero2 .scroll-cue .line::after{ content:''; position:absolute; left:0; top:0; width:1px; height:18px; background:linear-gradient(rgba(255,255,255,0), #fff); animation:scrolldown 1.7s cubic-bezier(.6,0,.4,1) infinite; } @keyframes scrolldown{ 0%{transform:translateY(-18px)} 100%{transform:translateY(46px)} } @keyframes fadeRise{ from{opacity:0; transform:translateY(24px); filter:blur(8px)} to{opacity:1; transform:none; filter:blur(0)} } /* CIFRE */ .cifre{ background:var(--nero); color:#fff; position:relative; overflow:hidden; } .cifre::after{ content:''; position:absolute; top:0; right:0; width:38%; height:100%; pointer-events:none; background:linear-gradient(120deg, transparent 42%, rgba(252,186,3,.12)); clip-path:polygon(42% 0,100% 0,100% 100%,0 100%); } .cifre-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); align-items:start; gap:clamp(8px,2vw,28px); padding:52px 0; text-align:center; } .cifra{ position:relative; } .cifra .num{ font-family:var(--font-heading); font-size:clamp(54px,5vw,72px); color:var(--giallo); line-height:1; display:inline-block; } .cifra .num::after{ content:''; display:block; width:36px; height:4px; background:var(--giallo); border-radius:3px; margin:14px auto 0; transform:skewX(-18deg); } .cifra .lab{ font-weight:700; font-size:13px; color:#dcdcdc; margin-top:14px; letter-spacing:1.5px; text-transform:uppercase; } .cifra:not(:last-child)::after{ content:''; position:absolute; right:-10px; top:14%; height:60%; width:2px; background:rgba(255,255,255,.10); transform:skewX(-12deg); } /* SECTIONS (scoping .wf-home per non toccare future pagine core) */ .wf-home section{ padding:96px 0; } /* annulla il block-gap di WP tra le sezioni full-bleed (toglie le strisce bianche sopra/sotto le bande) */ .wf-home > *{ margin-block:0 !important; } .section-head{ text-align:center; max-width:720px; margin:0 auto 56px; } .section-head .kicker{ color:var(--giallo-scuro); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:14px; display:block; margin-bottom:14px; } .section-head h2{ font-size:clamp(32px,4.4vw,50px); margin-bottom:16px; } .section-head p{ font-size:18px; color:var(--grigio); } /* ============================================================ NOVITÀ IN EVIDENZA — subito sotto l'hero (richiesta del cliente) Alimentata dagli eventi marcati "in evidenza" in The Events Calendar. Stati: 1, 2 o 3 card (.nv-1/.nv-2/.nv-3) oppure il blocco di rimando al calendario quando non c'è nulla in evidenza (.nv-empty). ============================================================ */ .novita{ background:var(--crema); } .wf-home .novita{ padding:clamp(56px,7vw,88px) 0; } .novita .section-head{ margin-bottom:clamp(30px,4vw,44px); } .nv-grid{ display:grid; gap:22px; max-width:var(--maxw); margin:0 auto; } .nv-grid.nv-1{ grid-template-columns:1fr; } .nv-grid.nv-2{ grid-template-columns:repeat(2,1fr); } .nv-grid.nv-3{ grid-template-columns:repeat(3,1fr); } .nv-card{ position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--bordo); border-radius:22px; box-shadow:0 12px 34px rgba(26,26,26,.06); text-decoration:none; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s; } .nv-card:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(26,26,26,.14), 0 0 34px -8px var(--giallo); border-color:var(--giallo); } .nv-photo{ display:block; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--crema-2); transition:transform .6s ease; } .nv-card:hover .nv-photo{ transform:scale(1.05); } .nv-body{ display:flex; flex-direction:column; align-items:flex-start; padding:22px 24px 26px; flex:1; } .nv-date{ display:inline-block; font-weight:700; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--nero); background:var(--giallo); border-radius:50px; padding:5px 12px; margin-bottom:14px; } .nv-body h3{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:var(--nero); font-size:clamp(19px,1.7vw,23px); line-height:1.12; margin:0 0 10px; } .nv-body p{ color:var(--grigio); font-size:.98rem; line-height:1.6; margin:0 0 16px; } .nv-link{ margin-top:auto; font-weight:700; font-size:14px; letter-spacing:.3px; color:var(--verde); } .nv-card:hover .nv-link{ color:var(--verde-scuro); } .nv-cta{ text-align:center; margin-top:34px; } /* Una sola novità: la card diventa orizzontale, così non resta una foto enorme */ .nv-grid.nv-1 .nv-card{ flex-direction:row; align-items:stretch; } .nv-grid.nv-1 .nv-photo{ flex:0 0 46%; aspect-ratio:auto; } .nv-grid.nv-1 .nv-body{ justify-content:center; padding:clamp(28px,3.4vw,48px); } .nv-grid.nv-1 .nv-body h3{ font-size:clamp(24px,2.6vw,34px); } /* Stato vuoto: nessun evento in evidenza */ .nv-empty{ position:relative; display:flex; align-items:stretch; overflow:hidden; max-width:var(--maxw); margin:0 auto; background:#fff; border:1px solid var(--bordo); border-radius:22px; box-shadow:0 12px 34px rgba(26,26,26,.06); text-decoration:none; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s; } .nv-empty:hover{ transform:translateY(-5px); box-shadow:0 26px 56px rgba(26,26,26,.14), 0 0 34px -8px var(--verde); border-color:var(--verde); } .nv-empty-photo{ flex:0 0 44%; background-size:cover; background-position:center; background-color:var(--crema-2); transition:transform .6s ease; } .nv-empty:hover .nv-empty-photo{ transform:scale(1.04); } .nv-empty-body{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(30px,3.6vw,52px); } .nv-empty-body .nv-date{ background:var(--verde); color:#fff; } .nv-empty-body h3{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:var(--nero); font-size:clamp(24px,2.6vw,34px); line-height:1.1; margin:0 0 12px; } .nv-empty-body p{ color:var(--grigio); font-size:1.02rem; line-height:1.6; margin:0 0 18px; } @media (max-width:900px){ .nv-grid.nv-3{ grid-template-columns:repeat(2,1fr); } .nv-grid.nv-3 .nv-card:last-child{ grid-column:1 / -1; } } @media (max-width:680px){ .nv-grid.nv-2, .nv-grid.nv-3{ grid-template-columns:1fr; } .nv-grid.nv-3 .nv-card:last-child{ grid-column:auto; } .nv-grid.nv-1 .nv-card, .nv-empty{ flex-direction:column; } .nv-grid.nv-1 .nv-photo{ flex:none; aspect-ratio:16/10; } .nv-empty-photo{ flex:none; aspect-ratio:16/10; } } @media (prefers-reduced-motion: reduce){ .nv-card, .nv-empty, .nv-photo, .nv-empty-photo{ transition:none; } .nv-card:hover, .nv-empty:hover{ transform:none; } .nv-card:hover .nv-photo, .nv-empty:hover .nv-empty-photo{ transform:none; } } /* DUE ANIME — editoriale chiaro con OUTLINE (brand come accento, niente colore pieno) */ .splitband{ position:relative; background:var(--crema); } .wf-home .splitband{ padding:clamp(60px,8vw,96px) 0; } .anime-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:var(--maxw); margin:0 auto; padding:0 28px; } .anime{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; background:#fff; border:2px solid; border-radius:24px; padding:clamp(32px,3.4vw,52px); box-shadow:0 14px 38px rgba(26,26,26,.05); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s; } .anime:hover{ transform:translateY(-6px); box-shadow:0 28px 58px rgba(26,26,26,.13), 0 0 36px -8px var(--edge,var(--giallo)); } .anime-found{ border-color:rgba(75,107,38,.42); --edge:var(--verde); } .anime-found:hover{ border-color:var(--verde); } .anime-zoo{ border-color:rgba(252,186,3,.6); --edge:var(--giallo); } .anime-zoo:hover{ border-color:var(--giallo-scuro); } @media (prefers-reduced-motion: reduce){ .anime{ transition:none !important; } } /* numero-anno come accento grafico d'angolo, tenue, in parallax */ .anime > *:not(.anime-num){ position:relative; z-index:1; } .anime-num{ position:absolute; z-index:0; right:-.04em; bottom:-.2em; font-family:var(--font-heading); font-weight:400; line-height:.7; font-size:clamp(130px,17vw,280px); pointer-events:none; -webkit-user-select:none; user-select:none; will-change:transform; } .anime-found .anime-num{ color:rgba(75,107,38,.10); } .anime-zoo .anime-num{ color:rgba(224,164,0,.16); } .anime-tag{ font-weight:700; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px; } .anime-found .anime-tag{ color:var(--verde); } .anime-zoo .anime-tag{ color:var(--giallo-scuro); } .anime .sb-title{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:var(--nero); font-size:clamp(28px,3vw,44px); line-height:1.02; letter-spacing:.5px; margin-bottom:16px; } .anime .sb-text{ color:var(--grigio); font-size:16px; line-height:1.65; margin-bottom:24px; max-width:44ch; } /* corpo testo troncato a ~3 righe, espandibile con "Leggi tutto" → le due card si vedono insieme. Il fade sfuma verso il bianco del fondo card e dà il senso del "continua". */ .anime-body{ position:relative; font-size:16px; line-height:1.65; max-width:44ch; max-height:calc(1.65em * 3); overflow:hidden; margin-bottom:6px; transition:max-height .55s ease; } .anime-body::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2.6em; background:linear-gradient(rgba(255,255,255,0), #fff); pointer-events:none; transition:opacity .3s; } .anime.is-open .anime-body{ max-height:60em; } .anime.is-open .anime-body::after{ opacity:0; } .anime-body .sb-text{ margin-bottom:14px; } .anime-body .sb-text:last-child{ margin-bottom:0; } .anime-more{ background:none; border:0; padding:4px 0; margin-bottom:18px; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.3px; display:inline-flex; align-items:center; gap:7px; } .anime-more::after{ content:'\25be'; font-size:.85em; transition:transform .3s; } .anime.is-open .anime-more::after{ transform:rotate(180deg); } .anime-found .anime-more{ color:#1261a4; } .anime-zoo .anime-more{ color:var(--giallo-scuro); } @media (prefers-reduced-motion: reduce){ .anime-body{ transition:none; } } .anime-link{ font-weight:700; font-size:15px; color:var(--nero); display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--giallo); padding-bottom:3px; transition:color .2s; } .anime-link::after{ content:'\2192'; transition:transform .25s; } .anime-link:hover{ color:var(--verde); } .anime-zoo .anime-link:hover{ color:var(--giallo-scuro); } .anime-link:hover::after{ transform:translateX(5px); } /* bottone nero pieno (usato nel padrinato) */ .btn-dark{ background:var(--nero); color:#fff; } .btn-dark:hover{ transform:translateY(-3px); background:#000; box-shadow:0 10px 26px rgba(0,0,0,.32); } @media (max-width:820px){ .anime-grid{ grid-template-columns:1fr; gap:20px; } } /* ESPERIENZE — bento: 1 in evidenza grande (sx) + 3 affianco (dx) */ .exp-bento{ display:grid; grid-template-columns:1.35fr .95fr; grid-template-rows:repeat(3,1fr); gap:18px; min-height:540px; } .exp-card{ position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); display:block; isolation:isolate; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .exp-card:hover{ transform:translateY(-7px); box-shadow:0 26px 58px rgba(0,0,0,.34), 0 0 38px -6px var(--edge,var(--giallo)); } .exp-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform .6s cubic-bezier(.2,.8,.2,1); } .exp-card:hover .exp-bg{ transform:scale(1.07); } /* la card in evidenza ha la foto viva (zoom lento continuo) */ @media (prefers-reduced-motion: no-preference){ .exp-featured .exp-bg{ animation:vt-ken 13s ease-in-out infinite alternate; } } .exp-card::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(16,12,6,.94) 4%, rgba(16,12,6,.5) 44%, rgba(16,12,6,0) 80%); } .exp-featured{ grid-column:1; grid-row:1/4; } .exp-side{ grid-column:2; } .ec-leoni{ background-image:url('../img/exp-leoni.jpg'); } .ec-leopardo{ background-image:url('../img/exp-leopardo.jpg'); } .ec-banditi{ background-image:url('../img/exp-banditi.jpg'); } .ec-pony{ background-image:url('../img/exp-pony.jpg'); } .exp-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; color:#fff; } .exp-featured .exp-body{ padding:clamp(24px,2.4vw,34px); } .exp-body h3{ color:#fff; font-size:20px; margin-bottom:6px; text-shadow:0 2px 14px rgba(0,0,0,.5); } .exp-featured .exp-body h3{ font-size:clamp(24px,2.4vw,34px); margin-bottom:10px; } .exp-featured .exp-body p{ color:rgba(255,255,255,.92); font-size:15px; line-height:1.55; margin-bottom:12px; max-width:46ch; } .exp-link{ font-weight:700; color:var(--giallo); display:inline-flex; align-items:center; gap:7px; transition:gap .25s; } .exp-card:hover .exp-link{ gap:13px; } .exp-badge{ position:absolute; top:16px; left:16px; z-index:2; background:var(--giallo); color:var(--nero); font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:6px 13px; border-radius:50px; box-shadow:0 4px 14px rgba(0,0,0,.25); } .exp-cta{ text-align:center; margin-top:44px; } @media (max-width:900px){ .exp-bento{ grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:14px; min-height:0; } .exp-featured{ grid-column:1/-1; grid-row:1; min-height:330px; } .exp-side{ grid-column:auto; grid-row:2; min-height:200px; } } @media (max-width:540px){ .exp-bento{ grid-template-columns:1fr; } .exp-featured, .exp-side{ grid-column:1; min-height:240px; } } @media (prefers-reduced-motion: reduce){ .exp-card, .exp-bg{ transition:none !important; } } /* CARE — accordion espandibile su SCURO (stacco dalle altre sezioni): hover = bordo verde luminoso, clic apre. */ .care{ background:#15160d; color:#fff; } .care .section-head h2{ color:#fff; } .care .section-head .kicker{ color:var(--giallo); } .care-acc{ display:flex; flex-direction:column; gap:14px; max-width:900px; margin:0 auto; } .ca-item{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden; --edge:var(--verde); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s, background .3s; } .ca-item:hover{ transform:translateY(-3px); background:rgba(255,255,255,.06); box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 36px -10px var(--verde); border-color:rgba(75,107,38,.7); } .acc-head{ width:100%; display:flex; align-items:center; gap:clamp(14px,2vw,22px); padding:16px clamp(20px,2.4vw,28px); background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; } .acc-head:focus-visible{ outline:3px solid var(--giallo); outline-offset:-3px; border-radius:18px; } .ca-letter{ font-family:var(--font-heading); font-weight:400; font-size:clamp(40px,5vw,62px); line-height:.8; color:var(--giallo); flex:0 0 auto; width:.95em; text-align:center; } .ca-word{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; font-size:clamp(19px,2vw,27px); color:#fff; letter-spacing:.5px; flex:1; } .acc-ico{ flex:0 0 auto; width:24px; height:24px; position:relative; } .acc-ico::before, .acc-ico::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--giallo); border-radius:2px; transition:transform .3s ease; } .acc-ico::before{ width:16px; height:3px; } .acc-ico::after{ width:3px; height:16px; } .ca-item.open .acc-ico::after, .acc-item.open .acc-ico::after{ transform:translate(-50%,-50%) scaleY(0); } /* "+" diventa "-" all'apertura (anche nella visita) */ .acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s ease; } .ca-item.open .acc-body, .acc-item.open .acc-body{ grid-template-rows:1fr; } /* apre anche l'accordion "Pianifica la visita" (era chiuso: bug) */ .acc-body > div{ overflow:hidden; } .acc-body p{ margin:0; padding:0 clamp(20px,2.4vw,28px) 22px clamp(74px,9vw,108px); color:rgba(255,255,255,.72); font-size:15.5px; line-height:1.65; } @media (prefers-reduced-motion: reduce){ .ca-item, .acc-body, .acc-ico::after{ transition:none !important; } } /* VISITA — il "tagliando": foto ambiente + biglietto staccabile */ .visita{ background:var(--crema); } .visita-ticket{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 30px 64px rgba(26,26,26,.13); border:1px solid var(--bordo); --edge:var(--giallo); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .visita-ticket:hover{ transform:translateY(-4px); box-shadow:0 38px 72px rgba(26,26,26,.17), 0 0 38px -8px var(--giallo); } .vt-photo{ position:relative; overflow:hidden; min-height:560px; background:#11140c; } /* slideshow: le immagini si alternano da sole (dissolvenza) + zoom lento continuo */ .vt-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s ease; } .vt-slide.is-active{ opacity:1; } .vs-leoni{ background-image:url('../img/img-ingresso.jpg'); } .vs-leopardo{ background-image:url('../img/an-wallaby-due.jpg'); background-position:center 58%; } .vs-banditi{ background-image:url('../img/edu-pannello.jpg'); background-position:center; } @media (prefers-reduced-motion: no-preference){ .vt-slide{ animation:vt-ken 10s ease-in-out infinite alternate; } .vs-leopardo{ animation-delay:-3.3s; } .vs-banditi{ animation-delay:-6.6s; } } @keyframes vt-ken{ from{ transform:scale(1.04); } to{ transform:scale(1.16); } } /* notch della perforazione (in alto e in basso sulla giunzione centrale) */ .visita-ticket::before, .visita-ticket::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; background:var(--crema); z-index:4; } .visita-ticket::before{ top:-13px; } .visita-ticket::after{ bottom:-13px; } .vt-panel{ position:relative; padding:clamp(34px,3.6vw,58px); } /* linea tratteggiata della perforazione */ .vt-panel::before{ content:''; position:absolute; left:0; top:18px; bottom:18px; width:2px; background:repeating-linear-gradient(to bottom, var(--bordo) 0 7px, transparent 7px 15px); } .vt-kicker{ display:block; font-weight:700; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--giallo-scuro); margin-bottom:12px; } .vt-panel h2{ font-size:clamp(30px,3.4vw,46px); line-height:1; margin-bottom:24px; } .vt-list{ list-style:none; margin:0 0 8px; padding:0; } /* righe espandibili (accordion): hover illumina, clic apre i dettagli */ .vt-row{ border-bottom:1px solid var(--bordo); } .vt-head{ width:100%; display:flex; align-items:center; gap:16px; padding:15px 14px; margin:0 -14px; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; border-radius:14px; transition:background-color .25s ease; } .vt-head:hover{ background:rgba(252,186,3,.10); } .vt-head:focus-visible{ outline:3px solid var(--giallo); outline-offset:-3px; } .vt-htxt{ flex:1; display:flex; flex-direction:column; gap:2px; } .vt-htitle{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; font-size:19px; color:var(--nero); letter-spacing:.3px; } .vt-hsum{ font-size:13.5px; color:var(--grigio); } .vt-list .acc-body p{ color:var(--grigio); font-size:15.5px; line-height:1.55; padding:0 14px 0 calc(48px + 16px); } /* niente padding sul contenitore: impediva il collasso completo dell'accordion (testo che spuntava tagliato) */ .vt-list .acc-body > div{ padding:0; } .vt-list .acc-body p:last-child, .vt-list .acc-body .vt-link:last-child{ margin-bottom:16px; } .vt-list .acc-body .vt-link{ margin-left:calc(48px + 16px + 14px); } .vt-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--verde); border-bottom:2px solid var(--giallo); padding-bottom:2px; margin-top:8px; } .vt-link:hover{ color:var(--giallo-scuro); } .vt-row:last-child{ border-bottom:none; } .vt-ico{ flex:0 0 48px; height:48px; border-radius:50%; background:rgba(252,186,3,.18); display:grid; place-items:center; box-shadow:0 0 0 6px rgba(252,186,3,.06); } .vt-ico svg{ width:24px; height:24px; stroke:var(--verde-scuro); } .vt-list .acc-body p + p{ margin-top:4px; } .vt-row strong{ color:var(--nero); } .vt-note{ font-size:13px !important; color:var(--giallo-scuro); font-weight:700; margin-top:4px; } .vt-cta{ margin-top:26px; } /* --- DINAMICA: ingresso righe in sequenza + icone vive --- */ /* le 3 righe entrano una dopo l'altra quando il tagliando arriva in vista */ /* stesso gate dei .reveal: senza JS le righe restano visibili invece che sparire */ html.wf-anim .vt-list .vt-row{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); } html.wf-anim .visita-ticket.in .vt-row{ opacity:1; transform:none; } .visita-ticket.in .vt-row:nth-child(2){ transition-delay:.1s; } .visita-ticket.in .vt-row:nth-child(3){ transition-delay:.2s; } /* hover/focus: l'icona fa un micro-pop */ .vt-ico{ transition:transform .25s ease; } .vt-head:hover .vt-ico, .vt-head:focus-visible .vt-ico{ transform:scale(1.08); } /* loop affettivi delle 3 icone — partono solo quando la sezione è visibile (.in) */ .vt-ico--clock svg polyline{ transform-box:view-box; transform-origin:12px 12px; } .visita-ticket.in .vt-ico--clock svg polyline{ animation:vt-tick 1.5s steps(2,end) infinite; } .visita-ticket.in .vt-ico--pin svg{ animation:vt-bounce 2.2s ease-in-out infinite; } .visita-ticket.in .vt-ico--ticket svg{ transform-box:view-box; transform-origin:center; animation:vt-stamp 2.8s ease-in-out infinite; } @keyframes vt-tick{ 0%,100%{ transform:rotate(-16deg); } 50%{ transform:rotate(16deg); } } @keyframes vt-bounce{ 0%,55%,100%{ transform:translateY(0); } 72%{ transform:translateY(-8px); } 86%{ transform:translateY(-3px); } } @keyframes vt-stamp{ 0%,58%,100%{ transform:rotate(0); } 70%{ transform:rotate(-16deg); } 80%{ transform:rotate(8deg); } 90%{ transform:rotate(-3deg); } } @media (prefers-reduced-motion: reduce){ .visita-ticket{ transition:none !important; } .vt-list .vt-row{ opacity:1 !important; transform:none !important; transition:none !important; } .vt-ico, .vt-ico svg, .vt-ico--clock svg polyline{ animation:none !important; transform:none !important; } } /* PADRINATO — fascia CTA immersiva: foto lemure (soggetto a dx) + velo scuro, testo a sx. Rompe la sequenza di card su crema → è il momento di conversione "far parte al progetto". NB: foto tarata su an-lemure.jpg (soggetto a destra); se si cambia, riverificare il fuoco. */ .padrinato.padr-hero{ position:relative; overflow:hidden; background:#0a0a08; padding:0; } .padr-bg{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; } .padr-img{ position:absolute; inset:0; background:url('../img/an-lemure.jpg') 68% center/cover; transform:scale(1.05); } .padr-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,8,6,.92) 0%, rgba(8,8,6,.74) 32%, rgba(8,8,6,.30) 60%, rgba(8,8,6,.04) 100%), linear-gradient(0deg, rgba(8,8,6,.32), rgba(8,8,6,.12)); } .padr-hero .wrap{ position:relative; z-index:2; } .padr-inner{ max-width:600px; color:#fff; padding:clamp(84px,14vh,158px) 0; } .padr-hero .padr-eyebrow{ display:block; font-family:var(--font-accent); font-style:italic; font-size:clamp(16px,1.5vw,20px); color:var(--giallo); margin-bottom:16px; text-shadow:0 1px 10px rgba(0,0,0,.6); } .padr-hero h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; font-size:clamp(34px,5vw,64px); line-height:1.02; letter-spacing:.5px; color:#fff; margin-bottom:20px; text-shadow:0 2px 22px rgba(0,0,0,.5); } .padr-hero p{ font-size:clamp(15px,1.2vw,17.5px); line-height:1.7; color:rgba(255,255,255,.92); max-width:52ch; margin-bottom:30px; text-shadow:0 1px 12px rgba(0,0,0,.55); } .padr-actions{ display:flex; gap:16px; flex-wrap:wrap; } .btn-outline-dark{ background:transparent; color:var(--nero); border:2px solid var(--nero); } .btn-outline-dark:hover{ background:var(--nero); color:#fff; transform:translateY(-3px); } @media (prefers-reduced-motion: no-preference){ .padr-img{ animation:vt-ken 16s ease-in-out infinite alternate; } } @media (prefers-reduced-motion: reduce){ .padr-bg{ transform:none !important; } } @media (max-width:820px){ .padr-img{ background-position:72% center; } .padr-scrim{ background:linear-gradient(180deg, rgba(8,8,6,.5) 0%, rgba(8,8,6,.42) 42%, rgba(8,8,6,.86) 100%); } .padr-inner{ max-width:none; text-align:center; padding:clamp(64px,10vh,112px) 0; } .padr-actions{ justify-content:center; } } /* FOOTER (il tag