/* ============================================================ SAGE — riferimento sagewoodlcs.com: verde salvia + bianco arioso, Montserrat (titoli, Title Case) + Lato (corpo), oro accento minimo. Ultimo in + !important: vince e neutralizza i layer caldi #glam/#euphoria/#heroeuf/#heroeuf2/#wow/#quiet-luxury. ============================================================ */ /* ===== :root: ridefinizione token + rimappatura storici (il CSS base eredita salvia) ===== */ :root{ --sage:#576f5d!important;--sage-deep:#3f5446!important;--sage-tint:#eef2ee!important;--gold:#c9a24b!important; --bg:#ffffff!important;--bg-soft:#f5f6f4!important;--ink:#2f3a33!important;--text:#4e5a52!important;--line:#e3e7e3!important; --terra:#576f5d!important;--terra2:#3f5446!important;--amber:#c9a24b!important;--sol:#c9a24b!important; --paper:#ffffff!important;--cream:#eef2ee!important;--sand:#f5f6f4!important;--sky:#eef2ee!important;--grass:#eef2ee!important; --mut:#5b645d!important; --sh:0 26px 60px -34px rgba(47,58,51,.22)!important;--sh2:0 14px 34px -22px rgba(47,58,51,.2)!important; } html,body{background:var(--bg)!important} ::selection{background:#576f5d;color:#fff} :focus-visible{outline:3px solid #576f5d!important;outline-offset:3px} a{color:#576f5d} /* ===== HERO: foto panoramica piena, overlay leggero verde-neutro, titolo bianco Title Case ===== */ .hero{background:#2f3a33!important;min-height:96svh!important} .hero::before,.hero::after{content:none!important;display:none!important;animation:none!important;background:none!important} .hero .bg{-webkit-mask-image:none!important;mask-image:none!important;inset:-8% 0 0 0!important;filter:saturate(1.02) contrast(1.02) brightness(.98)!important} .hero .veil{background:linear-gradient(180deg,rgba(28,38,32,.30) 0%,rgba(28,38,32,.10) 26%,rgba(28,38,32,.06) 48%,rgba(28,38,32,.42) 78%,rgba(28,38,32,.66) 100%)!important;animation:none!important} .hero .eye{display:none!important} .hero .hero-brand{display:flex!important;align-items:center;gap:17px;margin:0 0 26px} .hero .hero-logo{display:block!important;width:66px;height:66px;margin:0!important;color:#fff!important;filter:drop-shadow(0 5px 16px rgba(12,18,14,.55));flex:none} .hero .hero-wm{font-family:"Fraunces",Georgia,serif!important;font-weight:600!important;font-size:clamp(2.05rem,4.6vw,3.15rem)!important;line-height:1;color:#fff!important;letter-spacing:.005em;text-shadow:0 2px 12px rgba(12,18,14,.55)} @media(max-width:560px){.hero .hero-brand{margin-bottom:18px;gap:13px}.hero .hero-logo{width:55px;height:55px}.hero .hero-wm{font-size:2rem!important}} .hero h1{font-size:clamp(2.7rem,7.2vw,6rem)!important;line-height:1.06!important} .hero .l1,.hero .l1 .w,.hero .l2,.hero .l2 .w{ color:#fff!important;-webkit-text-fill-color:#fff!important; font-family:"Montserrat",sans-serif!important;font-weight:600!important;text-transform:none!important; background:none!important;background-image:none!important;background-size:auto!important;-webkit-background-clip:border-box!important;background-clip:border-box!important; animation:none!important;filter:none!important; text-shadow:0 1px 3px rgba(20,28,23,.45),0 10px 40px rgba(20,28,23,.4)!important} .hero h1 .l2{display:block!important;padding-bottom:0!important} .hero .l2::after{content:none!important;display:none!important} @keyframes filettoIn{to{opacity:.95;transform:scaleX(1)}} .hero .lede{color:rgba(255,255,255,.94)!important;font-family:"Lato",sans-serif!important;font-weight:400!important;text-shadow:0 1px 3px rgba(20,28,23,.5),0 6px 24px rgba(20,28,23,.4)!important} .hero .btn-p{background:#576f5d!important;background-image:none!important;color:#fff!important;box-shadow:0 14px 36px -16px rgba(63,84,70,.6)!important} .hero .btn-p:hover{background:#3f5446!important;filter:none!important} .hero .btn-g{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.7)!important} .hero .btn-g:hover{background:#fff!important;color:#2f3a33!important} .scrolld{color:rgba(255,255,255,.75)!important} .scrolld i{background:linear-gradient(#fff,transparent)!important} @media(max-width:560px){ .hero .veil{background:linear-gradient(180deg,rgba(28,38,32,.30) 0%,rgba(28,38,32,.10) 28%,rgba(28,38,32,.12) 52%,rgba(28,38,32,.5) 76%,rgba(28,38,32,.72) 100%)!important} .hero h1{font-size:clamp(2.3rem,8.6vw,3rem)!important} .hero .l2{width:auto}.hero .l2::after{bottom:.04em} } /* ===== TIPOGRAFIA: Montserrat titoli + Lato corpo ===== */ body{font-family:"Lato",system-ui,sans-serif!important;font-weight:400!important;line-height:1.65!important;color:var(--text)!important;-webkit-font-smoothing:antialiased} .disp{font-family:"Montserrat",system-ui,sans-serif!important;font-weight:600!important;text-transform:none!important;letter-spacing:-.005em!important;line-height:1.1!important;color:var(--ink)} .brand{font-family:"Fraunces",Georgia,serif!important;font-weight:600!important;letter-spacing:.005em!important;text-transform:none!important;color:var(--ink)!important} .logo{color:var(--sage)!important} .kick,.eye{font-family:"Montserrat",sans-serif!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.24em!important;font-size:.74rem!important} em,.turn{font-family:"Lato",Georgia,serif!important;font-style:italic!important;font-weight:400!important;color:var(--sage)!important;-webkit-text-fill-color:var(--sage)!important;text-transform:none!important} p,.lede,.v-p,.note,.nav-links a,label{font-family:"Lato",system-ui,sans-serif!important} .stat .n,.fear .n,.panel .nn{font-family:"Montserrat",sans-serif!important;font-weight:700!important;font-variant-numeric:tabular-nums} .btn,.njoin,.nav-cta{font-family:"Montserrat",sans-serif!important;font-weight:600!important} /* ===== SEZIONI: bianco dominante + grigio-verde alternato, zero blob/raggi/gradienti caldi ===== */ .dil,.how,.jrny,.svc,.com,.gsec,.trust,.vsec{background:#ffffff!important;background-image:none!important} .jrny,.com,.gsec{background:#f5f6f4!important} .svc,.trust{background:#eef2ee!important} .vsec::before,.svc::before,.gsec::before,.dil::before,.com::before{content:none!important;display:none!important;animation:none!important;background:none!important} .panel::after{background:radial-gradient(circle,rgba(87,111,93,.10),transparent 70%)!important} .kick{color:#576f5d!important} .kick::before{background:#576f5d!important;width:34px!important;height:2px!important} .dil .big,.ch-t,.com .disp,.svc .disp,.vsec .disp,.gsec .disp,.trust .disp,.jrny .disp,.stats .disp,.how .disp,.vhead .v-t,.com .v-t,.fear h3,.panel h3{ background:none!important;background-image:none!important;-webkit-text-fill-color:#2f3a33!important;color:#2f3a33!important; font-family:"Montserrat",sans-serif!important;font-weight:600!important;text-transform:none!important;letter-spacing:-.005em!important;line-height:1.12!important} .fear .n{-webkit-text-stroke:0!important;color:#576f5d!important;-webkit-text-fill-color:#576f5d!important;background:none!important} .fear,.panel,.faqs details{background:#fff!important;border-color:#e3e7e3!important} .panel .nn{background:none!important;-webkit-text-fill-color:#3f5446!important;color:#3f5446!important;-webkit-text-stroke:0!important} .jcard .num{background:#576f5d!important;background-image:none!important;color:#fff!important;box-shadow:none!important} .stats{background:#f5f6f4!important;background-image:none!important;border-color:#e3e7e3!important} .stats .n{color:#2f3a33!important;-webkit-text-fill-color:#2f3a33!important;text-shadow:none!important;background:none!important} .stats .l{color:#4e5a52!important} .stats .kick{color:#576f5d!important}.stats .kick::before{background:#576f5d!important} .intlband{background:#eef2ee!important;background-image:none!important;border-color:#e3e7e3!important} .intlband,.intlband *{color:#2f3a33!important} .intlband b{color:#576f5d!important} .intlband .g{filter:none!important} .mq{background:#ffffff!important;border-color:#e3e7e3!important} .mq-track span,.mq span{color:#576f5d!important;-webkit-text-stroke:0!important;font-family:"Montserrat",sans-serif!important;font-weight:700!important;text-transform:uppercase!important} .mq-track b,.mq b{color:#c9a24b!important;-webkit-text-stroke:0!important} .joy .scrim,.joy-a .scrim,.joy-b .scrim{background:linear-gradient(180deg,rgba(28,38,32,.18) 0%,rgba(28,38,32,0) 40%,rgba(28,38,32,.5) 76%,rgba(28,38,32,.8) 100%)!important} .joy .in::before,.joy .in::after{content:none!important;display:none!important;animation:none!important} .joy h2{color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:"Montserrat",sans-serif!important;font-weight:600!important;text-transform:none!important;background:none!important} .joy p{color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:"Lato",sans-serif!important;font-weight:400!important} .vsec .glass,.vcard .glass{background:#ffffff!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important} .vcard .reg,.vcard .open,.vcard .soon{color:#576f5d!important} .vcard .soon{background:rgba(255,255,255,.86)!important;border-color:#e3e7e3!important} .larva .pilot,.pan .info .go,.pan .tag{background:#576f5d!important;color:#fff!important} .larva .reg{color:#3f5446!important} .larva .go{background:#576f5d!important} .scard .ic{background:#eef2ee!important;border:1px solid #e3e7e3!important} .fil:hover{border-color:#576f5d!important;background:#eef2ee!important} .fil.on{background:#576f5d!important;color:#fff!important;border-color:#576f5d!important} .tcard h3{color:#3f5446!important} .tcard a,.gcard .ggo,.gall{color:#576f5d!important} .gall{border-bottom-color:#c9a24b!important} .gcard:hover{border-color:#576f5d!important} .faqs details[open]{border-color:#576f5d!important} .faqs summary::after{font-family:"Montserrat",sans-serif!important;color:#576f5d!important} .cta{background:#3f5446!important;background-image:none!important;color:#fff!important} .cta::before,.cta::after,.cta .sole{content:none!important;display:none!important;background:none!important;animation:none!important} /* fix contrasto: TUTTO il testo del .cta chiaro sul fondo verde profondo (es. refer-a-friend di larva) */ .cta,.cta p,.cta span,.cta li,.cta strong,.cta b,.cta small,.cta h1,.cta h3,.cta h4,.cta a{color:#fff!important;-webkit-text-fill-color:#fff!important} .cta .v-t,.cta h2{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-family:"Montserrat",sans-serif!important;font-weight:600!important;text-transform:none!important} .cta .v-p,.cta .note{color:rgba(255,255,255,.92)!important;-webkit-text-fill-color:rgba(255,255,255,.92)!important;font-family:"Lato",sans-serif!important;font-weight:400!important} .cta .kick{color:#c9a24b!important;-webkit-text-fill-color:#c9a24b!important} .cta .kick::before{background:#c9a24b!important} .cta .btn-p{background:#fff!important;background-image:none!important;color:#3f5446!important;box-shadow:none!important} .cta .btn-p:hover{background:#eef2ee!important;filter:none!important} .cta .btn-p,.cta .btn-p *{color:#3f5446!important;-webkit-text-fill-color:#3f5446!important} /* FORM dentro il .cta (card BIANCA): il whitening del .cta non deve renderlo invisibile -> testo scuro leggibile */ .cta form label,.cta form .label,.cta form label *{color:#2f3a33!important;-webkit-text-fill-color:#2f3a33!important} .cta form input,.cta form select,.cta form textarea,.cta form option{color:#2f3a33!important;-webkit-text-fill-color:#2f3a33!important} .cta form input::placeholder,.cta form textarea::placeholder{color:#6a726c!important;-webkit-text-fill-color:#6a726c!important;opacity:1} .cta form p,.cta form small,.cta form .form-note,.cta form .note,.cta form .privacy,.cta form span{color:#5b645d!important;-webkit-text-fill-color:#5b645d!important} .cta form a{color:#3f5446!important;-webkit-text-fill-color:#3f5446!important} /* il bottone invia resta testo chiaro sul suo fondo salvia */ .cta form .submit,.cta form button,.cta form [type=submit],.cta form .submit *{color:#fff!important;-webkit-text-fill-color:#fff!important} /* piu respiro: interlinea piu ariosa nel testo del .cta (paragrafi colonna sinistra) */ .cta p,.cta .v-p,.cta .lede{line-height:1.7!important} .cta form label{line-height:1.5!important;margin-bottom:6px!important} /* ===== TITOLI un po' piu piccoli (richiesta utente: header troppo grandi) ===== */ .hero h1{font-size:clamp(2.05rem,4.9vw,3.5rem)!important} .dil .big,.ch-t{font-size:clamp(2.1rem,5.4vw,5rem)!important} .com .disp,.svc .disp,.vsec .disp,.trust .disp,.gsec .disp,.jrny .disp,.stats .disp,.how .disp{font-size:clamp(1.8rem,4.4vw,3.6rem)!important} .joy h2{font-size:clamp(2.2rem,6vw,4.8rem)!important} /* titoli pagina delle pagine interne (h1 nudo, es. "Le guide oneste") */ h1:not(.disp):not(.l1):not(.l2){font-size:clamp(2rem,5vw,3.8rem)!important} @media(max-width:560px){.hero h1{font-size:clamp(1.8rem,6.6vw,2.45rem)!important}} /* ===== FOTO DI SEZIONE: spezzano i muri di testo (specialmente su mobile) ===== */ /* BANNER: foto larga arrotondata sotto il titolo (nessuna ristrutturazione della sezione) */ .secban{display:block;width:100%;border-radius:18px;overflow:hidden;aspect-ratio:20/7; background-size:cover;background-position:center;box-shadow:0 26px 56px -40px rgba(47,58,51,.32);margin:18px 0 34px} @media(max-width:760px){.secban{aspect-ratio:3/2;margin:16px 0 26px}} /* RIGA AFFIANCATA: foto + colonna testo a fianco (desktop), impilati con foto sopra (mobile) */ .secrow > .wrap{display:flex;flex-direction:column;gap:26px} .secrow > .wrap > .secpic{width:100%;border-radius:18px;overflow:hidden;aspect-ratio:3/2; background-size:cover;background-position:center;box-shadow:0 26px 56px -40px rgba(47,58,51,.32)} @media(min-width:900px){ .secrow > .wrap{flex-direction:row;align-items:center;gap:54px} .secrow.picright > .wrap{flex-direction:row-reverse} .secrow > .wrap > .seccol{flex:1 1 54%;min-width:0} .secrow > .wrap > .secpic{flex:1 1 46%;align-self:stretch;aspect-ratio:auto;min-height:360px} } footer .fb{font-family:"Fraunces",Georgia,serif!important;font-weight:600!important;text-transform:none!important;color:#2f3a33!important} /* schede villaggi: struttura "foto sopra + corpo bianco sotto" definita nel CSS inline di index.html. Niente override strutturali qui (la descrizione non e' piu sovrapposta alla foto). */ .flinks a{color:#4e5a52!important} .flinks a:hover{color:#576f5d!important} /* ===== BOTTONI + NAV ===== */ .btn-p,.njoin,.nav-cta{background:#576f5d!important;background-image:none!important;color:#fff!important;box-shadow:0 14px 32px -18px rgba(63,84,70,.45)!important} .btn-p:hover,.njoin:hover,.nav-cta:hover{background:#3f5446!important;filter:none!important;transform:translateY(-1px)} .btn-g{background:transparent!important;color:#3f5446!important;border:1.5px solid #576f5d!important} .btn-g:hover{background:#576f5d!important;color:#fff!important} .btn-g::after{content:"\2192";margin-left:6px;display:inline-block;transition:transform .25s ease} .btn-g:hover::after{transform:translateX(4px)} nav.solid{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)!important;border-bottom-color:#e3e7e3!important;box-shadow:0 10px 30px -24px rgba(47,58,51,.18)!important} .nav-links a{color:#4e5a52!important;font-family:"Lato",sans-serif!important;font-weight:600!important} .nav-links a:hover{color:#576f5d!important;opacity:1!important} .lang{border-color:#e3e7e3!important;background:rgba(255,255,255,.7)!important} .lang button{color:#4e5a52!important} .lang button.on{background:#576f5d!important;color:#fff!important} /* ===== MOVIMENTO calmo ===== */ .js-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.85,.25,1)} .js-reveal.in{opacity:1;transform:none} .hero .l1,.hero .l1 .w,.hero .l2,.hero .l2 .w,.hero::before,.hero::after,.hero>.veil,.vsec::before,.svc::before,.gsec::before,.joy .in::before,.joy .in::after{animation:none!important} @media(prefers-reduced-motion:reduce){ .js-reveal{opacity:1!important;transform:none!important} .hero .bg{animation:none!important;transform:none!important} .hero .l2::after{animation:none!important;opacity:.95!important;transform:none!important} .btn-g::after{transition:none!important} } /* ===== CROSS-PAGE (pagine interne): titoli nudi + nav ===== */ /* tutti i titoli (anche h1-h6 senza .disp) -> Montserrat Title Case; NON forzo il colore per non rovinare i titoli chiari sopra le foto (hero/glass delle pagine interne) */ h1,h2,h3,h4,h5,h6{font-family:"Montserrat",system-ui,sans-serif!important;font-weight:600!important;text-transform:none!important;letter-spacing:-.005em!important} /* nav delle pagine interne (bare