/* * Hero delle pagine interne — dall'originale `.page-hero` (styles.css r.24–37, * r.55–61, r.847–857, r.1239–1250). Markup: index.html r.480–489 e gemelli. * * ⚠️ È CONDIVISO: lo usano prodotti, contatti, pronto, bio, apicoltura e news * (sei pagine su otto — azienda e miscelazione hanno un'apertura diversa). * Cambiare un valore qui li cambia tutti e sei. * * In questo file: tutto l'aspetto e le animazioni d'apertura. * Markup in templates/phero.php, controlli in includes/widgets/class-phero.php. * Nessun .js: le entrate sono CSS con ritardi fissi, come nell'hero della home. * * ⚠️ Due regole dell'originale sono CODICE MORTO e NON sono state portate: * · `.page-hero h1{font-weight:600!important}` (r.34) — la batte * `.page:not([data-page="home"]) h1{font-weight:400!important}` (r.690), * che ha specificità (0,2,1) contro (0,1,1). Il titolo pesa **400**: * misurato, non dedotto. * · `.page-hero-inner{padding:154px …}` (r.27) — la sovrascrive r.847 con * 178px. Vale 178px. * * Cascata MISURATA sull'originale (1440/1024/900/860/700/560/375): * * >900 861–900 561–860 ≤560 * altezza min 452px 452px 372px 320px * padding inner 178/40/56 178/40/56 150/24/44 134/20/36 * titolo 54px 54px 40px 32px * lead 19px 19px 17px 17px * briciole mb 22px 22px 22px 16px * onda puntini min(58%,730) min(78%,460) min(78%,460) 88% * e opacità .9 .6 .6 .45 * * ⚠️ I gradini NON coincidono: l'altezza cambia a 860, l'onda di puntini a 900. * Sono due media query diverse nell'originale, non un errore. * * Indice: sezione · onda di puntini · immagine · velo · impaginato · * briciole · occhiello · titolo · lead · entrate · breakpoint · * reduced-motion ed editor */ /* ---------- sezione ---------- */ .adea-phero{ position:relative;overflow:hidden;display:flex;align-items:flex-end; min-height:var(--adea-phero-minh,452px); background:var(--adea-phero-bg,#0a1618); font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif); line-height:normal; /* il Kit impone 1.5; l'originale eredita normal dal body */ } /* ---------- onda di puntini ---------- Sta SOPRA il velo ma SOTTO il contenuto (l'impaginato ha z-index 2): decora senza mai toccare la leggibilità di briciole, titolo e testo. */ .adea-phero::after{ content:"";position:absolute;left:0;bottom:0;z-index:1;pointer-events:none; width:var(--adea-phero-dots-w,min(58%,730px));aspect-ratio:620/420; /* copia locale: un percorso relativo dal plugin verso il tema si romperebbe se il tema figlio venisse rinominato */ background:url('../img/hero-dots.svg') left bottom / contain no-repeat; opacity:var(--adea-phero-dots-op,.9); } /* ---------- immagine e velo ---------- Due livelli separati come nell'hero della home: l'immagine si muove (Ken Burns + zoom d'ingresso), il velo deve restare fermo. */ .adea-phero-img{ position:absolute;inset:0;background-size:cover;background-position:center; transform-origin:center center; animation:adeaPheroKen var(--adea-phero-ken-dur,22s) ease-in-out infinite; } @keyframes adeaPheroKen{ 0% {transform:scale(1.16) translate3d(0,0,0)} 50% {transform:scale(1.22) translate3d(-1.5%,1.2%,0)} 100%{transform:scale(1.16) translate3d(0,0,0)} } .adea-phero-veil{ position:absolute;inset:0; background:var(--adea-phero-veil,linear-gradient(92deg,rgba(4,17,34,.92) 0%,rgba(4,17,34,.72) 44%,rgba(4,17,34,.4) 100%)); } /* ---------- impaginato ---------- */ .adea-phero-inner{ position:relative;z-index:2;max-width:var(--adea-phero-maxw,1240px);margin:0 auto;width:100%; padding:var(--adea-phero-pad,178px 40px 56px); } /* ---------- briciole ---------- */ .adea-phero-crumb{ font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-size:14px; color:rgba(255,255,255,.72);margin-bottom:var(--adea-phero-crumb-mb,22px); } .adea-phero-crumb a{color:rgba(255,255,255,.72);cursor:pointer;text-decoration:none;transition:color .2s ease} .adea-phero-crumb a:hover,.adea-phero-crumb a:focus-visible{color:#fff} .adea-phero-crumb .sep{margin:0 8px;color:rgba(255,255,255,.38)} .adea-phero-crumb .cur{color:#fff;font-weight:600} /* ---------- occhiello ---------- Non è `.adea-c-kicker`: è il velo chiaro su foto scura, lo stesso dell'hero della home (7px 14px, 12px, .08em, maiuscoletto). */ .adea-phero-kicker{ display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2); font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.9);margin-bottom:20px; } /* ---------- titolo e lead ---------- */ .adea-phero-title{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-weight:400; /* 400, non 600: vedi la nota sul codice morto in testa */ font-size:var(--adea-phero-title-size,54px);line-height:1.04;letter-spacing:-.03em; color:#fff;margin:0; } .adea-phero-lead{ font-size:var(--adea-phero-lead-size,19px);line-height:1.6; color:rgba(255,255,255,.85);margin:20px 0 0;max-width:730px; } /* ---------- entrate ---------- Come nell'hero della home: CSS puro con ritardi fissi, non l'osservatore. Nell'originale i ritardi sono legati alla POSIZIONE (`:nth-child`); qui ognuno porta il suo, così togliere un elemento dal pannello non sfasa gli altri. ⚠️ animation-delay DOPO la shorthand e nella stessa regola. */ .adea-phero-rise{ opacity:0; animation:adeaPheroIn var(--adea-phero-rise-dur,1s) cubic-bezier(.2,.75,.25,1) both; animation-delay:var(--adea-phero-rise-delay,0s); } @keyframes adeaPheroIn{ from{opacity:0;transform:translateY(42px) scale(.97);filter:blur(8px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} } .adea-phero-veil{animation:adeaPheroVeilIn 1.3s ease both} @keyframes adeaPheroVeilIn{from{opacity:0}to{opacity:1}} /* zoom d'ingresso dell'immagine, sopra al Ken Burns */ .adea-phero-img{animation:adeaPheroKen var(--adea-phero-ken-dur,22s) ease-in-out infinite,adeaPheroZoomIn 1.6s cubic-bezier(.2,.8,.25,1) both} @keyframes adeaPheroZoomIn{from{opacity:0}to{opacity:1}} /* ---------- variante "con scheda sovrapposta" ---------- Usata dalla pagina azienda: sotto l'hero c'è una scheda bianca che risale sopra la fotografia, e il testo dell'hero deve lasciarle spazio. */ .adea-phero--overlap .adea-phero-inner{padding-bottom:var(--adea-phero-pad-b-ovl,150px)} @media(max-width:560px){ .adea-phero--overlap .adea-phero-inner{padding-bottom:var(--adea-phero-pad-b-ovl-560,96px)} } /* ---------- breakpoint originali (misurati) ---------- ⚠️ 900 e 860 sono due gradini distinti: l'onda cambia a 900, l'altezza a 860. */ @media(max-width:900px){ .adea-phero{--adea-phero-dots-w:min(78%,460px);--adea-phero-dots-op:.6} } @media(max-width:860px){ /* ⚠️ proprietà, non variabile: Elementor stampa --adea-phero-minh su QUESTO stesso elemento con specificità più alta e vincerebbe. */ .adea-phero{min-height:var(--adea-phero-minh-860,372px)} .adea-phero-inner{--adea-phero-pad:150px 24px 44px} .adea-phero-title{--adea-phero-title-size:var(--adea-phero-title-size-860,40px)} .adea-phero-lead{--adea-phero-lead-size:17px} } @media(max-width:560px){ .adea-phero{min-height:var(--adea-phero-minh-560,320px);--adea-phero-dots-w:88%;--adea-phero-dots-op:.45} .adea-phero-inner{--adea-phero-pad:134px 20px 36px} .adea-phero-title{--adea-phero-title-size:var(--adea-phero-title-size-560,32px)} .adea-phero-crumb{--adea-phero-crumb-mb:16px} } /* ---------- reduced-motion ed editor ---------- Nell'originale le entrate stanno sotto `no-preference`, quindi con reduced-motion sono già ferme; il Ken Burns invece continuerebbe. Lo fermiamo, ⚠️ DEVIAZIONE DICHIARATA come nell'hero della home, sul fotogramma 0% (scale 1.16) per non far saltare l'inquadratura. */ @media(prefers-reduced-motion:reduce){ .adea-phero-rise{opacity:1!important;animation:none!important;transform:none!important;filter:none!important} .adea-phero-veil{animation:none!important} .adea-phero-img{animation:none!important;transform:scale(1.16)} } .elementor-editor-active .adea-phero-rise{opacity:1!important;animation:none!important;transform:none!important;filter:none!important} .elementor-editor-active .adea-phero-veil{animation:none!important} .elementor-editor-active .adea-phero-img{animation:none!important;transform:scale(1.16)} /* ---------- filo verde e bottone (aggiunti il 2026-08-05 per il nuovo disegno della Linea Pronto). Sono facoltativi: senza testo il bottone non viene stampato e il filo si accende da un interruttore. ---------- */ .adea-phero-rule{ width:64px;height:4px;border-radius:999px;background:var(--adea-verde,#42AD59); margin:0 0 22px; } .adea-phero-inner .adea-c-cta{margin-top:30px} @media(max-width:560px){ .adea-phero-rule{width:52px;height:3px;margin-bottom:18px} .adea-phero-inner .adea-c-cta{margin-top:24px;font-size:16px;padding-left:22px} .adea-phero-inner .adea-c-cta__icon{width:44px;height:44px} }