/* ===================================================================== HOME HERO — context="home" (.eedf-ctx-home). MODELLO "MODALE": - #app = palco full-screen con immagine di sfondo persistente. - LANDING (view-type non ingaggiato) = hero centrata, testo bianco, niente box. - INGAGGIO (clic "Scegli il tipo" -> tipi; poi marca; poi modello): la vista attiva diventa un OVERLAY fisso (backdrop scuro che sfuma la hero) con una CARD bianca centrata e SCROLLABILE (max-height) -> "box sovrapposto" con z-index alto, scroll interno: la hero non si allunga e le liste lunghe non vengono tagliate. - RISULTATI = escono nel layout normale (lista lunga, scroll di pagina). H1 preservato (SEO). Desktop: modale. Mobile (<=720): hero semplice (gli step su mobile passano dal layout compatto/sheet esistente). ===================================================================== */ /* full-bleed SCROLLBAR-SAFE a livello ROOT. PROBLEMA: 100vw include la larghezza della scrollbar verticale -> la hero sborda di scrollbar/2 dentro la zona della scrollbar a destra (striscia visibile solo su desktop con scrollbar classica). SOLUZIONE: sottraiamo la larghezza reale della scrollbar, misurata in JS (eedf.js) e iniettata come --eedf-sbw su . Fallback 0px = comportamento legacy se il JS non gira. */ .eedf-root.eedf-ctx-home{ width: calc(100vw - var(--eedf-sbw, 0px)); margin-left: calc(50% - 50vw + (var(--eedf-sbw, 0px) / 2)); margin-right: calc(50% - 50vw + (var(--eedf-sbw, 0px) / 2)); } .eedf-ctx-home .stepper-wrap{ display: none; } @media (min-width: 721px){ /* ---------- PALCO con sfondo persistente ---------- */ /* hero contenuta (NON 100vh: l'header la spingeva giù e l'immagine larga risultava super-zoomata/sgranata). ~560px -> contenuto centrato nel visibile + meno crop. */ .eedf-ctx-home #app{ position: relative; min-height: clamp(460px, 64vh, 600px); overflow: hidden; } .eedf-ctx-home.home-types-open #app{ min-height: 100vh; } /* il modale resta a tutto schermo */ .eedf-ctx-home #app::before{ content: ""; position: absolute; inset: 0; z-index: 0; background-color: #0b2a24; background-image: var(--eedf-hero-img); background-size: cover; background-position: center 42%; background-repeat: no-repeat; } .eedf-ctx-home #app::after{ content: ""; position: absolute; inset: 0; z-index: 1; /* overlay verticale leggero e uniforme: niente vignetta radiale (bordi scuri/sgranati), solo quel tanto che serve a far risaltare il testo bianco centrato */ background: linear-gradient(180deg, rgba(6,26,21,.62) 0%, rgba(6,26,21,.46) 45%, rgba(6,26,21,.60) 100%); } /* ---------- LANDING (hero): view-type non ingaggiato ---------- */ .eedf-ctx-home:not(.home-types-open) #view-type.active{ position: relative; z-index: 2; min-height: clamp(460px, 64vh, 600px); display: flex; align-items: center; padding-bottom: 74px; /* spazio per la barra carrello + trust non in fondo */ } .eedf-ctx-home:not(.home-types-open) #view-type.active > .wrap{ margin: auto; width: 100%; max-width: 820px; text-align: center; padding: clamp(40px, 8vh, 90px) clamp(16px, 4vw, 40px); } .eedf-ctx-home:not(.home-types-open) #view-type .view-head{ max-width: 760px; margin: 0 auto; } .eedf-ctx-home:not(.home-types-open) #view-type .view-head h1{ color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.5px; margin: 0 0 14px; text-shadow: 0 2px 22px rgba(0,0,0,.28); } .eedf-ctx-home:not(.home-types-open) #view-type .view-head h1 em{ color: #2ee6ac; font-style: normal; } .eedf-ctx-home:not(.home-types-open) #view-type .view-head .sub{ color: rgba(255,255,255,.9); font-size: clamp(16px, 1.4vw, 20px); max-width: 560px; margin: 0 auto; } /* ingresso CTA + ricerca + trust, centrati */ .eedf-ctx-home .home-entry{ margin: 30px auto 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; } .eedf-ctx-home .home-pick{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 0 30px; border: 0; cursor: pointer; width: 100%; background: linear-gradient(180deg, #16b083, #0a8f66); color: #fff; font-weight: 800; font-size: clamp(16px, 1.4vw, 19px); border-radius: 14px; box-shadow: 0 12px 30px rgba(15,174,126,.42); transition: transform .15s ease, box-shadow .2s ease; } .eedf-ctx-home .home-pick:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15,174,126,.52); } .eedf-ctx-home .home-pick svg{ width: 22px; height: 22px; flex: none; } .eedf-ctx-home .home-or{ color: rgba(255,255,255,.72); font-size: 13px; font-weight: 600; text-align: center; } .eedf-ctx-home .home-search{ position: relative; display: flex; align-items: center; cursor: pointer; background: rgba(255,255,255,.97); border-radius: 14px; min-height: 56px; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .eedf-ctx-home .home-search svg{ position: absolute; left: 16px; width: 20px; height: 20px; color: #6b7b78; pointer-events: none; } .eedf-ctx-home .home-search input{ width: 100%; border: 0; background: transparent; outline: 0; cursor: pointer; padding: 0 18px 0 46px; min-height: 56px; font-size: 15px; color: #0c2a23; font-family: inherit; } .eedf-ctx-home .hero-trust{ display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px 18px; margin: 26px auto 0; color: #fff; font-size: clamp(11.5px, 1.5vw, 14px); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.5); max-width: 100%; } .eedf-ctx-home .hero-trust span{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .eedf-ctx-home .hero-trust svg{ width: 18px; height: 18px; color: #2ee6ac; flex: none; } /* ---------- INGAGGIO: vista attiva = OVERLAY fisso + CARD scrollabile ---------- */ .eedf-ctx-home.home-types-open #view-type.active, .eedf-ctx-home #view-brand.active, .eedf-ctx-home #view-model.active{ position: fixed; inset: 0; z-index: 100000; /* sopra l'header del tema (z 1000) */ display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vh, 48px); background: rgba(6,26,21,.74); /* backdrop solido (niente blur: perf) */ animation: eedfFlowIn .2s ease both; } @keyframes eedfFlowIn{ from{ opacity: 0; } to{ opacity: 1; } } .eedf-ctx-home.home-types-open #view-type.active > .wrap, .eedf-ctx-home #view-brand.active > .wrap, .eedf-ctx-home #view-model.active > .wrap{ margin: 0; width: 100%; max-width: 1040px; max-height: 86vh; overflow-y: auto; overflow-x: hidden; background: #fff; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.45); padding: clamp(22px, 3vw, 40px); text-align: left; -webkit-overflow-scrolling: touch; animation: eedfCardIn .24s cubic-bezier(.2,.7,.3,1) both; } @keyframes eedfCardIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } } /* titoli/intro centrati dentro la card (testo scuro di default = leggibile) */ .eedf-ctx-home.home-types-open #view-type .view-head, .eedf-ctx-home #view-brand .view-head, .eedf-ctx-home #view-model .view-head{ text-align: center; } .eedf-ctx-home.home-types-open #view-type .view-head h1{ font-size: clamp(22px, 2.4vw, 30px); } /* il back-btn (Cambia tipo/marca) dentro la card: centrato, stile default scuro */ .eedf-ctx-home #view-brand .back-btn, .eedf-ctx-home #view-model .back-btn{ margin: 0 auto 16px; } /* swap landing/tipi: nasconde ingresso quando si aprono i tipi */ .eedf-ctx-home:not(.home-types-open) #view-type .type-grid{ display: none; } .eedf-ctx-home.home-types-open #view-type .home-entry, .eedf-ctx-home.home-types-open #view-type .hero-trust, .eedf-ctx-home.home-types-open #view-type .view-head .sub{ display: none; } /* ---------- RISULTATI: escono dal palco -> layout normale ---------- */ .eedf-ctx-home.results-open #app{ min-height: 0; overflow: visible; } .eedf-ctx-home.results-open #app::before, .eedf-ctx-home.results-open #app::after{ display: none; } } /* ===================== MOBILE (<=720px): hero semplice ===================== */ @media (max-width: 720px){ .eedf-ctx-home #view-type{ position: relative; min-height: clamp(540px, 88vh, 780px); display: flex; align-items: center; overflow: hidden; } .eedf-ctx-home #view-type::before{ content:""; position:absolute; inset:0; z-index:0; background:#0b2a24 var(--eedf-hero-img) center/cover no-repeat; } .eedf-ctx-home #view-type::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(6,26,21,.5) 0%, rgba(6,26,21,.66) 100%); } .eedf-ctx-home #view-type .wrap{ position:relative; z-index:2; text-align:center; padding: 40px 18px; } .eedf-ctx-home #view-type .view-head h1{ color:#fff; font-size: clamp(26px,7vw,34px); line-height:1.08; } .eedf-ctx-home #view-type .view-head h1 em{ color:#2ee6ac; font-style:normal; } .eedf-ctx-home #view-type .view-head .sub{ color:rgba(255,255,255,.88); } .eedf-ctx-home .home-entry{ margin: 24px auto 0; display:flex; flex-direction:column; gap:12px; } .eedf-ctx-home .home-pick{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; border:0; border-radius:13px; background:linear-gradient(180deg,#18c592,#0fae7e); color:#042019; font-weight:800; font-size:16px; } .eedf-ctx-home .home-pick svg{ width:20px; height:20px; } .eedf-ctx-home .home-or{ color:rgba(255,255,255,.72); font-size:12px; text-align:center; } .eedf-ctx-home .home-search{ position:relative; display:flex; align-items:center; background:#fff; border-radius:13px; min-height:52px; } .eedf-ctx-home .home-search svg{ position:absolute; left:14px; width:18px; height:18px; color:#6b7b78; } .eedf-ctx-home .home-search input{ width:100%; border:0; background:transparent; outline:0; padding:0 14px 0 42px; min-height:52px; font-size:14px; color:#0c2a23; font-family:inherit; } .eedf-ctx-home .hero-trust{ display:flex; flex-direction:column; gap:8px; margin:18px auto 0; color:rgba(255,255,255,.92); font-size:13px; font-weight:600; align-items:center; } .eedf-ctx-home .hero-trust span{ display:inline-flex; align-items:center; gap:8px; } .eedf-ctx-home .hero-trust svg{ width:16px; height:16px; color:#2ee6ac; } .eedf-ctx-home:not(.home-types-open) #view-type .type-grid{ display:none; } /* === HOME mobile: solo i 3 step + immagine hero intravista dietro la card === */ /* su mobile #view-type è nascosto: lo sfondo hero va su #app (contenitore visibile della card) */ .eedf-ctx-home.mobile-shell #app{ position:relative; background:#0b2a24 var(--eedf-hero-img) center 40% / cover no-repeat; min-height: clamp(440px, 64vh, 560px); display:flex; flex-direction:column; justify-content:center; padding:22px 0 80px; } .eedf-ctx-home.mobile-shell #app::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(6,26,21,.30) 0%, rgba(6,26,21,.50) 50%, rgba(6,26,21,.72) 100%); } /* card centrata verticalmente: immagine incornicia sopra E sotto (armonia) */ .eedf-ctx-home.mobile-shell #mobileCard{ position:relative; z-index:1; margin:0 auto; } /* via "Sai già il modello?" + "Dove lo trovo?" + il divisore "oppure": restano solo i 3 step */ .eedf-ctx-home #mobileCard .mc__fast, .eedf-ctx-home #mobileCard .mc__div{ display:none !important; } }