/* ===== CONFORMITAS — sito definitivo (colori istituzionali + arancio Initiativa) ===== */ /* legal pages (privacy / cookie) — scroll normale */ .legal{max-width:920px;margin:0 auto;padding:calc(78px + 54px) 36px 80px} .legal .eyebrow{margin-bottom:12px} .legal h1{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.02em;color:#212751} .legal .sub{color:#5b6072;font-size:1.05rem;margin:12px 0 30px} .legal-embed{background:#fff;border:1px solid rgba(33,39,81,.12);border-radius:16px;padding:30px;box-shadow:0 18px 44px rgba(33,39,81,.06)} .legal-embed a{color:#FE6307} @media(max-width:900px){.legal{padding:120px 22px 60px}.legal-embed{padding:20px}} :root{ /* accento Initiativa */ --orange:#FE6307; --orange-d:#9A4F1E; --orange-2:#E8812A; --orange-l:#F5B590; /* blu istituzionale Conformitas */ --blue:#212751; --blue-l:#a7d4f9; --blue-d:#171b3a; --navy:#212751; --navy-d:#171b3a; /* neutri caldi */ --cream:#F4F1ED; --cream-2:#F6E4D2; --paper:#FBFAF8; --ink:#212751; --mut:#5b6072; --line:rgba(33,39,81,.12); --font:'Inter',system-ui,sans-serif; --display:'Sora',system-ui,sans-serif; --nav-h:78px; } /* =================================================================== NUOVO STILE SITO: sfondo foto per pagina + scroll verticale + liste a mini-card uniformi + transizione "wow" tra pagine =================================================================== */ /* effetto WOW al cambio pagina (View Transitions API) — attivo su tutto il sito */ @view-transition{ navigation: auto; } ::view-transition-old(root){ animation:.6s cubic-bezier(.76,0,.24,1) both wow-out; } ::view-transition-new(root){ animation:.6s cubic-bezier(.76,0,.24,1) both wow-in; } @keyframes wow-out{ to{ transform:translateX(-22%); opacity:.25; } } @keyframes wow-in{ from{ transform:translateX(100%); } } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root){ animation-duration:.01ms; } } /* varianti di direzione: la classe su della pagina di ARRIVO decide come entra */ html.vt-v::view-transition-old(root){ animation-name:vt-v-out; } html.vt-v::view-transition-new(root){ animation-name:vt-v-in; } @keyframes vt-v-out{ to{ transform:translateY(-22%); opacity:.25; } } @keyframes vt-v-in{ from{ transform:translateY(100%); } } html.vt-d::view-transition-old(root){ animation-name:vt-d-out; } html.vt-d::view-transition-new(root){ animation-name:vt-d-in; } @keyframes vt-d-out{ to{ transform:translate(-16%,-16%); opacity:.2; } } @keyframes vt-d-in{ from{ transform:translate(100%,100%); } } html.vt-d2::view-transition-old(root){ animation-name:vt-d2-out; } html.vt-d2::view-transition-new(root){ animation-name:vt-d2-in; } @keyframes vt-d2-out{ to{ transform:translate(16%,-16%); opacity:.2; } } @keyframes vt-d2-in{ from{ transform:translate(-100%,100%); } } /* pagina con sfondo foto fisso (una foto per pagina/tema) */ body.vpage{background:#0f1228;color:#fff} .pbg{position:fixed;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat} .pbg-ov{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,18,40,.86),rgba(15,18,40,.72) 40%,rgba(15,18,40,.85))} main.vpage{position:relative;z-index:1} .psec{position:relative;padding:110px 0;color:#fff} .psec.hero{min-height:100vh;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 10px)} .psec .wrap{position:relative;z-index:2} body.vpage .eyebrow{color:var(--orange-l)} .psec h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1.06;letter-spacing:-.02em;margin:14px 0 18px;color:#fff} .psec h1 .o,.psec h2 .o{color:var(--orange)} .psec h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.02em;color:#fff} .psec p.lead{font-size:1.15rem;color:rgba(255,255,255,.9);max-width:780px;margin:0 0 16px} .psec .muted{color:rgba(255,255,255,.72)} .psec .chap{color:rgba(255,255,255,.6)} .psec .chap b{color:var(--orange)} /* header scuro coerente sulle pagine-foto */ header.dark-solid{background:rgba(15,18,40,.92)!important;backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.08)} body.vpage .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff} body.vpage .btn-ghost:hover{background:#fff;color:var(--ink)} /* slider hero (2 slide, manuale, no autoplay) */ .hslider{position:relative;min-height:44vh} .hslide{display:none;animation:hsfade .5s ease} .hslide.active{display:block} @keyframes hsfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .hnav{display:flex;align-items:center;gap:18px;margin-top:30px} .hdots{display:flex;gap:10px} .hdots button{width:40px;height:5px;border-radius:3px;border:none;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:.3s} .hdots button.active{background:var(--orange);width:56px} .hprev,.hnext{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s} .hprev:hover,.hnext:hover{background:var(--orange);border-color:var(--orange)} /* variante hero con FOTO che cambiano insieme al testo (opzione A) */ .heroslides{position:relative;overflow:hidden} .hbg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease} .hbg.active{opacity:1} .hbg-ov{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(15,18,40,.82),rgba(15,18,40,.68) 40%,rgba(15,18,40,.86))} /* divisorio morbido tra hero-foto e contenuti sotto */ .heroslides::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(15,18,40,.65))} .heroslides::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 22%,rgba(255,255,255,.55) 78%,transparent);box-shadow:0 0 22px rgba(255,255,255,.18)} /* reveal on scroll */ .rv{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.22,1,.36,1)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s} /* ---- liste a mini-card uniformi (numeri o icone) ---- */ .mlist{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0} .mlist.c3{grid-template-columns:repeat(3,1fr)} .mlist.c4{grid-template-columns:repeat(4,1fr)} .mcard{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:18px 18px;transition:.25s} .mcard:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);transform:translateY(-3px)} .mcard .n{font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff;background:var(--orange);min-width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .mcard .i{min-width:34px;height:34px;border-radius:9px;background:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0} .mcard .i svg{width:18px;height:18px;stroke:#fff;stroke-width:2.4;fill:none} .mcard .tx h4{font-family:var(--display);font-weight:700;font-size:1.02rem;margin-bottom:4px;color:#fff} .mcard .tx p{font-size:.9rem;color:rgba(255,255,255,.82);line-height:1.42} .mcard.mini{padding:13px 15px} .mcard.mini .n,.mcard.mini .i{min-width:26px;height:26px;border-radius:8px;font-size:.76rem} .mcard.mini .i svg{width:15px;height:15px} .mcard.center{align-items:center} /* ---- card grande in vetro + coppie normative ---- */ .glass{background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15);border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.35)} .pair{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;margin-top:34px} .pair .norm{padding:34px 36px} .pair .norm + .norm{border-left:1px solid rgba(255,255,255,.12)} .norm .code{font-family:var(--display);font-weight:800;font-size:2rem;color:#fff;line-height:1} .norm .tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-l);margin:8px 0 12px} .norm .desc{font-size:.96rem;color:rgba(255,255,255,.85);margin-bottom:16px} .norm .rt{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;display:block} .norm .reqs{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* ---- sezione arancione di chiusura ---- */ .close-sec{position:relative;background:linear-gradient(135deg,var(--orange),var(--orange-d));text-align:center;padding:100px 0;color:#fff;z-index:1} .close-sec h2{color:#fff} .close-sec p{color:rgba(255,255,255,.95);font-size:1.2rem;max-width:560px;margin:16px auto 30px} .close-sec .btn{background:#fff;color:var(--orange-d)} .close-sec .btn:hover{background:#0f1228;color:#fff} /* split testo + visual sulle pagine-foto */ .psplit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .pshot{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.4);min-height:360px;background-size:cover;background-position:center;position:relative} .pshot .tagph{position:absolute;left:14px;bottom:14px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.5);padding:6px 12px;border-radius:999px;color:#fff} /* tabella listino su sfondo scuro */ .dtable-wrap{overflow-x:auto;border-radius:22px;margin-top:20px} .dtable{width:100%;border-collapse:separate;border-spacing:0;color:#fff;min-width:640px} .dtable th,.dtable td{padding:20px 22px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)} .dtable thead th{background:rgba(255,255,255,.07);font-family:var(--display);font-weight:800;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.18)} .dtable tbody th{text-align:left;font-weight:600;background:rgba(255,255,255,.03);font-size:.98rem} .dtable td{font-family:var(--display);font-weight:800;font-size:1.25rem} .dtable tr:last-child td,.dtable tr:last-child th{border-bottom:none} .dtable tbody tr.hl td{color:var(--orange-l)} .dtable tbody tr.hl th{background:rgba(254,99,7,.14)} /* listino a card (On premises / Cloud) */ .pcard-h{padding:18px 26px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.14)} .pcard-h b{font-family:var(--display);font-size:1.3rem;color:#fff} .pcard-h span{color:rgba(255,255,255,.62);font-size:.95rem;display:block;margin-top:3px} .pcard-h small{color:rgba(255,255,255,.6);font-size:.92rem;font-weight:400;margin-left:10px} .prow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 26px;border-bottom:1px solid rgba(255,255,255,.1)} .prow:last-child{border-bottom:none} .prow>span{color:#fff;font-size:1.12rem;font-weight:600} .prow>span small{display:block;color:rgba(255,255,255,.6);font-size:.9rem;font-weight:400;margin-top:2px} .prow b{font-family:var(--display);font-size:1.6rem;color:#fff;white-space:nowrap} .plist{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;max-width:940px;margin-top:8px} @media(max-width:760px){.plist{grid-template-columns:1fr}} /* listino: titolo a sx, loghi+intro a dx, card affiancate sotto */ .listino-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;margin-bottom:24px} .listino-sub{color:rgba(255,255,255,.72);font-size:1.15rem;margin-top:4px} .listino-brand{text-align:right;max-width:440px} .listino-logos{display:flex;align-items:center;gap:14px;justify-content:flex-end} .glpi-chip{display:inline-flex;align-items:center;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.5);border-radius:10px;padding:4px 9px;box-shadow:0 6px 16px rgba(0,0,0,.16)} .glpi-chip img{height:50px;display:block} .listino-cards{max-width:none} @media(max-width:760px){.listino-top{align-items:flex-start}.listino-brand{text-align:left;max-width:none}.listino-logos{justify-content:flex-start;flex-wrap:wrap}.listino-logos img[src*="logo_light"]{height:18px!important}.listino-logos img[src*="glpi-network"]{height:36px!important}} /* mockup "finto dashboard" (placeholder app Conformitas) */ .appmock{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.5);background:#0d1524} .appmock .ambar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#0a111e;border-bottom:1px solid rgba(255,255,255,.08)} .appmock .ambar i{width:10px;height:10px;border-radius:50%;display:block} .appmock .ambar i:nth-child(1){background:#ff5f56}.appmock .ambar i:nth-child(2){background:#ffbd2e}.appmock .ambar i:nth-child(3){background:#27c93f} .appmock .ambar .u{margin-left:10px;font-size:.72rem;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);padding:4px 12px;border-radius:6px} .appmock .ambody{display:grid;grid-template-columns:128px 1fr;min-height:320px} .appmock .amside{background:#0a111e;border-right:1px solid rgba(255,255,255,.07);padding:14px 10px} .appmock .amside .brand{font-family:var(--display);font-weight:800;font-size:.82rem;color:#fff;margin-bottom:14px;padding:0 6px} .appmock .amitem{display:flex;align-items:center;gap:8px;padding:8px;border-radius:7px;font-size:.72rem;color:rgba(255,255,255,.55);margin-bottom:2px} .appmock .amitem.on{background:rgba(254,99,7,.16);color:var(--orange-l)} .appmock .amitem .sq{width:13px;height:13px;border-radius:4px;background:currentColor;opacity:.55} .appmock .ammain{padding:16px} .appmock .amkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .appmock .amkpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px} .appmock .amkpi .l{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45)} .appmock .amkpi .v{font-family:var(--display);font-weight:800;font-size:1.4rem;margin-top:4px;color:#fff} .appmock .amkpi .v.g{color:#3ddc84}.appmock .amkpi .v.b{color:var(--blue-l)}.appmock .amkpi .v.o{color:var(--orange)} .appmock .amchart{display:flex;align-items:flex-end;gap:7px;height:108px;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px} .appmock .amchart span{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(var(--blue-l),rgba(167,212,249,.2))} .appmock .amchart span:nth-child(3n){background:linear-gradient(var(--orange),rgba(254,99,7,.2))} .mocknote{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:10px;text-align:center} /* slider screenshot app (conformitas) */ .shotslider{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.5);background:#0d1524} .shotslider .shots{position:relative;aspect-ratio:16/10} .shotslider .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .6s ease} .shotslider .shot.active{opacity:1} .shotdots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:2} .shotdots button{width:30px;height:4px;border-radius:3px;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.3s} .shotdots button.active{background:var(--orange);width:46px} .shotslider{cursor:zoom-in} .shothint{text-align:center;font-size:.82rem;color:rgba(255,255,255,.62);margin-top:10px} .shothint::before{content:"⤢";margin-right:6px;color:var(--orange-l)} /* lightbox screenshot */ .lb{position:fixed;inset:0;z-index:200;background:rgba(8,10,25,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:48px} .lb.open{display:flex} .lb img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:0 40px 90px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18)} .lb button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1} .lb button:hover{background:var(--orange);border-color:var(--orange)} .lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;font-size:1.5rem} .lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;font-size:1.9rem} .lb-prev{left:26px}.lb-next{right:26px} .lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:.08em} @media(max-width:700px){.lb{padding:16px}.lb-prev{left:10px}.lb-next{right:10px}.lb-prev,.lb-next{width:44px;height:44px;font-size:1.5rem}} /* card "esplora sezione" (home) */ .seccard{display:block;text-decoration:none;padding:28px;transition:.25s} .seccard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1)} .seccard h3{font-family:var(--display);color:#fff;font-size:1.18rem;margin-bottom:8px} .seccard p{color:rgba(255,255,255,.8);font-size:.94rem;margin-bottom:14px;line-height:1.45} .seccard .more{color:var(--orange-l);font-weight:600;font-size:.9rem} .seccard:hover .more{color:var(--orange)} @media(max-width:900px){.appmock .ambody{grid-template-columns:96px 1fr}} @media(max-width:900px){ .mlist,.mlist.c3,.mlist.c4,.pair,.norm .reqs,.psplit{grid-template-columns:1fr} .pair .norm + .norm{border-left:none;border-top:1px solid rgba(255,255,255,.12)} .psec{padding:80px 0} } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font);background:var(--cream);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:1200px;margin:0 auto;padding:0 36px;width:100%} h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em} a{color:inherit;text-decoration:none} .eyebrow{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)} .chap{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.06em;color:var(--mut);margin-bottom:18px;display:block} .chap b{color:var(--orange)} .tcol{color:var(--blue)}.ocol{color:var(--orange)} /* ---------- NAV ---------- */ header{position:fixed;inset:0 0 auto 0;z-index:100;transition:.35s} header.scrolled{background:rgba(244,241,237,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} /* header over dark sections: light menu text */ header.over-dark{background:linear-gradient(180deg,rgba(23,27,58,.6),rgba(23,27,58,0));box-shadow:none} header.over-dark .menu>a,header.over-dark .has-sub>span,header.over-dark .has-sub>a,header.over-dark .menu>a.current{color:#fff} header.over-dark .menu>a:hover,header.over-dark .has-sub:hover>span,header.over-dark .has-sub:hover>a{color:var(--orange-l)} header.over-dark .has-sub>span::after,header.over-dark .has-sub>a::after{border-color:rgba(255,255,255,.85)} header.over-dark .burger span{background:#fff} .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)} header .wrap.nav{max-width:1300px} /* barra nav un po' piu' larga del contenuto: spazio allo switcher */ .menu a,.has-sub>a,.has-sub>span,.langsw,.nav>.btn-primary{white-space:nowrap} /* niente testo a capo nella barra */ .logo{display:flex;align-items:center;flex:0 0 auto} .logo img{height:26px;width:auto;display:block} .logo .logo-light{display:none} header.over-dark .logo .logo-dark{display:none} header.over-dark .logo .logo-light{display:block} .menu{display:flex;gap:20px;font-size:.93rem;font-weight:500;align-items:center} .menu>a,.has-sub>span,.has-sub>a{position:relative;padding:6px 0;transition:.2s} .menu>a:hover,.has-sub:hover>span,.has-sub:hover>a{color:var(--orange)} .menu>a.current{color:var(--orange)} .menu>a.current::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange)} .has-sub{position:relative;cursor:pointer} .has-sub>span,.has-sub>a{display:flex;gap:5px;align-items:center} .has-sub>span::after,.has-sub>a::after{content:"";width:5px;height:5px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);margin-top:-3px} .sub{position:absolute;top:150%;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;min-width:215px;opacity:0;visibility:hidden;transition:.25s;box-shadow:0 22px 50px rgba(43,38,34,.16)} .has-sub:hover .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .sub a{display:block;padding:9px 14px;border-radius:9px;font-size:.9rem;color:var(--ink)} header.over-dark .sub a{color:var(--ink)} .sub a:hover{background:var(--cream);color:var(--orange)} .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.88rem;cursor:pointer;transition:.25s;border:none} .btn-primary{background:var(--orange);color:#fff} .btn-primary:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 14px 30px rgba(254,99,7,.3)} .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,165,243,.3)} .btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent} .btn-ghost:hover{background:var(--ink);color:var(--cream)} .burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px;z-index:101} .burger span{width:26px;height:2px;background:var(--ink);display:block;transition:transform .25s,opacity .2s} .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* switcher lingua (desktop) */ .langsw{display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600;font-family:var(--display)} .langsw a{color:inherit;opacity:.55;padding:2px 2px;transition:.2s} .langsw a:hover{opacity:1} .langsw a.on{opacity:1;color:var(--orange)} .langsw span{opacity:.35} header.over-dark .langsw{color:#fff} header.over-dark .langsw a.on{color:var(--orange-l)} /* ---------- FULLPAGE SHELL (multi-direction panel slide) ---------- */ .snap{height:100vh;overflow:hidden;position:relative;scrollbar-width:none} .snap::-webkit-scrollbar{display:none} .sec{height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:calc(var(--nav-h) + 30px) 0 70px;overflow:hidden} .sec.center{text-align:center} .fp-on .fp-track{position:static;transform:none} .fp-on .sec,.fp-on .foot-sec{position:absolute;top:0;left:0;width:100%;height:100vh;opacity:0;pointer-events:none;will-change:transform,opacity} .fp-on .sec.fp-active,.fp-on .foot-sec.fp-active{opacity:1;pointer-events:auto} .fp-on .foot-sec{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:34px} .fp-anim{position:fixed;left:0;right:0;bottom:0;height:3px;background:var(--orange);z-index:95;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.86,0,.07,1);opacity:.55} /* clickable up/down affordance (for users without a scroll wheel) */ .fp-nav{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:96;display:flex;flex-direction:row;gap:12px;align-items:center} .fp-btn{width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(254,99,7,.4);transition:transform .3s,opacity .3s,background .2s} .fp-btn svg{width:22px;height:22px;stroke:#fff;stroke-width:2.4;fill:none} .fp-btn:hover{background:var(--orange-d);transform:translateY(-3px)} .fp-up{background:#fff;color:var(--orange);box-shadow:0 12px 26px rgba(43,38,34,.18)} .fp-up svg{stroke:var(--orange)} .fp-up:hover{background:var(--orange);box-shadow:0 12px 26px rgba(254,99,7,.4)} .fp-up:hover svg{stroke:#fff} .fp-btn.hide{opacity:0;pointer-events:none;transform:scale(.6)} /* reveal */ .rv{opacity:0;transform:translateY(36px);transition:.9s cubic-bezier(.22,1,.36,1)} .in .rv,.rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s} /* ---------- DOTS ---------- */ .dots{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:16px} .dots a{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--mut);opacity:.45;transition:.25s;position:relative} .dots a.active{background:var(--orange);border-color:var(--orange);opacity:1;transform:scale(1.3)} .dots a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.74rem;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);padding:4px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 6px 16px rgba(0,0,0,.08)} .dots a:hover span{opacity:1} /* ---------- HERO SLIDER ---------- */ .hero{padding:0;overflow:hidden} .slides{position:absolute;inset:0} .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;display:flex;align-items:center;pointer-events:none} .slide.active{opacity:1;pointer-events:auto} .slide .bg{position:absolute;inset:0;z-index:0;background:#212751 center/cover no-repeat;filter:brightness(1.16) saturate(1.04)} .slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(23,27,58,.68) 0%,rgba(23,27,58,.38) 46%,rgba(23,27,58,.08) 100%),linear-gradient(0deg,rgba(23,27,58,.38),transparent 55%)} .s1 .bg{background-image:url('slide1.jpg')} .s2 .bg{background-image:url('slide2.jpg')} .s3 .bg{background-image:url('slide3.jpg')} .hero-copy{position:relative;z-index:2;width:100%;max-width:720px;color:#fff} .hero-copy h1{font-size:clamp(2.6rem,5.6vw,4.8rem);font-weight:800;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)} .hero-copy h1 .b{color:var(--blue-l)}.hero-copy h1 .o{color:var(--orange)} .hero-copy p{font-size:1.2rem;color:rgba(255,255,255,.92);max-width:560px;margin:24px 0 32px} .hero-copy .eyebrow{color:var(--orange-l)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .hero-copy .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff} .hero-copy .btn-ghost:hover{background:#fff;color:var(--ink)} .glpi-tag{margin-top:28px;font-size:.86rem;color:rgba(255,255,255,.82)}.glpi-tag b{color:#fff} /* visual panel */ .hvis{aspect-ratio:1/1;border-radius:26px;position:relative;overflow:hidden;box-shadow:0 40px 80px rgba(11,39,64,.34)} .hvis.tech{background:linear-gradient(160deg,#212751,#171b3a)} .hvis .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:34px 34px} .chev-stack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .chev{width:60px;height:118px;clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);animation:flow 2.6s ease-in-out infinite} .chev:nth-child(1){background:var(--blue)}.chev:nth-child(2){background:var(--blue-l);animation-delay:.18s}.chev:nth-child(3){background:var(--orange);animation-delay:.36s} @keyframes flow{0%,100%{opacity:.45;transform:translateX(-8px)}50%{opacity:1;transform:translateX(8px)}} .hvis .vlab{position:absolute;left:24px;bottom:22px;color:#cfe7f6;font-family:var(--display);font-size:.8rem;letter-spacing:.1em} .hvis .vlab b{color:#fff;display:block;font-size:1.05rem;letter-spacing:0} .hvis.photo-fill{background:linear-gradient(150deg,#212751,#171b3a);display:flex;align-items:flex-end} /* hero slider real images (vertical photos centred inside the square) */ .hvis.shot{background-color:#212751;background-size:cover;background-position:center;background-repeat:no-repeat} .s1 .hvis.shot{background-image:url('slide1.jpg')} .s2 .hvis.shot{background-image:url('slide2.jpg')} .s3 .hvis.shot{background-image:url('slide3.jpg')} .hvis .tag{position:relative;margin:18px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.9);padding:6px 12px;border-radius:999px;font-weight:600;color:var(--ink)} .slider-dots{position:absolute;left:36px;bottom:44px;z-index:5;display:flex;gap:10px} .slider-dots button{width:38px;height:4px;border-radius:3px;border:none;background:rgba(43,38,34,.18);cursor:pointer;transition:.3s;padding:0} .slider-dots button.active{background:var(--orange);width:54px} .hero-foot{position:absolute;right:36px;bottom:38px;z-index:5;display:flex;align-items:center;gap:18px;padding:10px 14px;border-radius:14px;background:rgba(244,241,237,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(23,27,58,.3);border:1px solid rgba(255,255,255,.5)} .hero-logos{display:flex;align-items:center;gap:14px} .hero-logos .hl-label{font-size:.72rem;letter-spacing:.04em;color:var(--mut);font-weight:600} .hero-logos img{display:block;width:auto} .hero-logos .hl-glpi{height:22px} .hero-logos .hl-ini{height:18px} .hero-logos .hl-sep{width:1px;height:18px;background:rgba(43,38,34,.2)} .btn-sm{padding:9px 16px;font-size:.82rem} .hero-foot .btn-ghost{border-color:rgba(43,38,34,.35);color:var(--ink)} .hero-foot .btn-ghost:hover{background:var(--ink);color:#fff} .ni-lbl{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-d,var(--blue));margin:20px 0 14px} .ni-note{margin-top:18px;font-size:.95rem;color:var(--mut);font-style:italic;max-width:520px} .mu-list{max-width:560px} .scroll-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:5;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:8px} .scroll-hint .m{width:22px;height:34px;border:2px solid var(--mut);border-radius:12px;position:relative;opacity:.6} .scroll-hint .m::after{content:"";width:4px;height:7px;background:var(--orange);border-radius:2px;position:absolute;left:50%;top:6px;transform:translateX(-50%);animation:mw 1.6s infinite} @keyframes mw{0%{opacity:0;top:6px}30%{opacity:1}60%{opacity:0;top:17px}100%{opacity:0}} /* page hero */ .phero{background:radial-gradient(110% 80% at 90% -10%,rgba(0,165,243,.15),transparent 55%),var(--cream)} .phero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800} .phero h1 .b{color:var(--blue)}.phero h1 .o{color:var(--orange)} .phero p{font-size:1.2rem;color:var(--mut);max-width:600px;margin-top:22px} /* ---------- HELPERS ---------- */ .bighead{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:700} .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .split.narrow{grid-template-columns:.95fr 1.05fr} .lead{color:var(--mut);font-size:1.1rem;max-width:560px} /* sottotitoli hero piu' grandi (leggibilita') */ .psec.hero .lead,.hslide .lead{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.6;max-width:660px} .photo{border-radius:20px;position:relative;overflow:hidden;min-height:440px;display:flex;align-items:flex-end} .photo.tech{background:linear-gradient(150deg,#212751,#171b3a)} .photo.warm{background:linear-gradient(150deg,#d9c3a8,#caa97f)} .photo .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px} .photo .tag{position:relative;margin:16px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.9);padding:6px 12px;border-radius:999px;font-weight:600} .photo .ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.4}.photo .ico svg{width:90px;height:90px} /* pain */ .pain{list-style:none;display:flex;flex-direction:column;gap:14px} .pain li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:18px 20px;font-size:1rem} .pain li b{font-family:var(--display)} .quote-big{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.22;letter-spacing:-.02em} .quote-big .hl{color:var(--orange)} /* feature cards (V1 style) */ .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} .fcard{background:#fff;border-radius:18px;padding:30px;border:1px solid var(--line);transition:.3s} .fcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(43,38,34,.12)} .fcard .fi{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue-d));display:flex;align-items:center;justify-content:center;margin-bottom:18px} .fcard:nth-child(3n+2) .fi{background:linear-gradient(135deg,var(--orange),var(--orange-d))} .fcard .fi svg{width:26px;height:26px;stroke:#fff} .fcard h3{font-size:1.14rem;margin-bottom:8px} .fcard p{color:var(--mut);font-size:.94rem} /* audience */ .aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px} .aud{display:flex;gap:18px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff} .aud .n{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--orange);line-height:1} .aud h3{font-size:1.08rem;margin-bottom:6px}.aud p{color:var(--mut);font-size:.93rem} /* timeline */ .tl{list-style:none;display:flex;flex-direction:column;gap:6px} .tl li{display:flex;gap:18px;padding:16px;border-radius:14px;transition:.25s} .tl li:hover{background:#fff} .tl .n{font-family:var(--display);font-weight:700;color:var(--blue);font-size:1.05rem;min-width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center} .tl h3{font-size:1.08rem;margin-bottom:4px}.tl p{color:var(--mut);font-size:.93rem} /* ---------- DARK compliance band (contrast) ---------- */ .dark{background:var(--navy);color:#eaf4fb} .dark .eyebrow{color:var(--blue-l)}.dark .chap{color:#7ea6c2}.dark .chap b{color:var(--orange-l)} .dark h2,.dark h1{color:#fff}.dark .lead{color:#a9c7da} .norm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} .norm{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px;transition:.3s;cursor:pointer} .norm:hover{background:rgba(255,255,255,.09);transform:translateY(-6px);border-color:var(--blue)} .norm .code{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--blue-l)} .norm:nth-child(odd) .code{color:var(--orange-l)} .norm h3{color:#fff;font-size:1.02rem;margin:12px 0 8px}.norm p{color:#a9c7da;font-size:.88rem} /* compass symbol as brand graphic (used as provided) */ .compass-deco{position:absolute;top:15vh;right:5%;width:180px;height:auto;z-index:1;pointer-events:none} @media(max-width:900px){.compass-deco{width:110px;top:auto;bottom:24px;right:20px;opacity:.85}} /* compass as large side graphic on light hero (mono_blu) */ .compass-side{position:absolute;top:50%;right:5%;transform:translateY(-50%);width:clamp(200px,30vh,320px);height:auto;z-index:0;pointer-events:none} @media(max-width:1200px){.compass-side{display:none}} /* compass as small corner graphic on light section with wide content (mono_blu) */ .compass-corner{position:absolute;top:calc(var(--nav-h) + 20px);right:5%;width:150px;height:auto;z-index:1;pointer-events:none} @media(max-width:1100px){.compass-corner{display:none}} /* #cosa (conformitas): compatta per far stare titolo+sottotitolo+intro+6 card */ #cosa .bighead{font-size:clamp(1.7rem,3vw,2.5rem)} #cosa .fgrid{margin-top:26px} #cosa .fcard{padding:22px} #cosa .fcard .fi{width:44px;height:44px;margin-bottom:12px} #cosa .fcard h3{font-size:1.05rem;margin-bottom:6px} #cosa .fcard p{font-size:.9rem} /* competenze cards (chi siamo) */ .fcard .tl-tag{font-style:italic;color:var(--ink);font-size:.94rem;margin:2px 0 8px} .fcard ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:5px} .fcard ul li{font-size:.85rem;color:var(--mut);padding-left:15px;position:relative;line-height:1.35} .fcard ul li::before{content:"›";position:absolute;left:0;color:var(--orange);font-weight:700} /* compliance page norm sections */ .norm-sec .code{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);color:var(--orange);line-height:1} .norm-sec.blue .code{color:var(--blue)} .norm-sec .sub-t{font-size:1.05rem;color:var(--mut);font-weight:600;margin:6px 0 18px;font-family:var(--display)} .checklist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:8px} .checklist li{display:flex;gap:12px;align-items:flex-start;font-size:1rem} .checklist li svg{min-width:22px;height:22px;margin-top:2px;stroke:var(--blue)} /* ===== Compliance B — layout differenziato (stepper + datasheet panel) ===== */ .cx-modello{background:radial-gradient(120% 80% at 50% -10%,rgba(0,165,243,.10),transparent 55%),var(--cream)} .cx-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:48px 0 14px;max-width:1000px;margin-left:auto;margin-right:auto} .cx-flow::before{content:"";position:absolute;top:26px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,var(--orange),var(--blue));opacity:.4} .cx-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .cx-dot{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue-d);font-family:var(--display);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 8px 20px rgba(11,39,64,.10)} .cx-node:nth-child(odd) .cx-dot{border-color:var(--orange);color:var(--orange)} .cx-node p{font-size:.92rem;color:var(--ink);max-width:170px;line-height:1.4} .cx-closer{font-size:1.1rem;color:var(--mut);max-width:720px;margin:18px auto 0} .cx-closer b{color:var(--ink);font-family:var(--display);font-weight:700} .cx-sec .wrap{display:flex;justify-content:center} .cx-panel{position:relative;width:100%;max-width:960px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:46px 52px;overflow:hidden;box-shadow:0 34px 80px rgba(11,39,64,.12)} .cx-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,39,64,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,39,64,.04) 1px,transparent 1px);background-size:36px 36px;pointer-events:none} .cx-accent{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--orange)} .cx-sec.blue .cx-accent{background:var(--blue)} .cx-watermark{position:absolute;right:-6px;top:-26px;font-family:var(--display);font-weight:800;font-size:12rem;line-height:1;color:rgba(254,99,7,.06);pointer-events:none;letter-spacing:-.05em} .cx-sec.blue .cx-watermark{color:rgba(0,165,243,.08)} .cx-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px} .cx-kicker{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.03em;color:var(--mut)} .cx-index{font-family:var(--display);font-weight:800;font-size:.86rem;letter-spacing:.12em;color:var(--orange);white-space:nowrap} .cx-sec.blue .cx-index{color:var(--blue)} .cx-head{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px} .cx-code{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;color:var(--orange)} .cx-sec.blue .cx-code{color:var(--blue)} .cx-tag{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);background:var(--cream);border:1px solid var(--line);padding:7px 13px;border-radius:999px} .cx-lead{position:relative;font-size:1.18rem;color:var(--ink);max-width:780px;margin:4px 0 24px} .cx-divider{position:relative;height:1px;background:var(--line);margin-bottom:22px} .cx-lbl{position:relative;font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:18px} .cx-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px 34px} .cx-item{display:flex;gap:14px;align-items:flex-start} .cx-item .cx-n{flex:none;width:32px;height:32px;border-radius:10px;background:rgba(254,99,7,.1);color:var(--orange);font-family:var(--display);font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center} .cx-sec.blue .cx-item .cx-n{background:rgba(0,165,243,.12);color:var(--blue-d)} .cx-item p{font-size:1rem;color:var(--ink);line-height:1.5} .cx-note{position:relative;margin-top:24px;font-size:.95rem;color:var(--mut);font-style:italic;display:flex;gap:11px;align-items:flex-start} .cx-note::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--orange)} /* pricing mini */ .price-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .pm{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;text-align:left;transition:.3s} .pm.feat{border:2px solid var(--orange);box-shadow:0 26px 50px rgba(254,99,7,.16)} .pm h3{font-size:1.1rem} .pm .amt{font-family:var(--display);font-weight:800;font-size:2rem;margin:10px 0 2px} .pm .amt .b{color:var(--blue)}.pm.feat .amt{color:var(--orange)} .pm .note{font-size:.8rem;color:var(--mut)} /* home pricing table (Basic tier preview) */ .ptable{max-width:580px;margin:38px auto 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;text-align:left;box-shadow:0 18px 44px rgba(43,38,34,.06)} .ptrow{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 26px;border-bottom:1px solid var(--line)} .ptrow:last-child{border-bottom:none} .ptrow .l{font-size:1.04rem} .ptrow .l b{font-family:var(--display);font-weight:700} .ptrow .v{font-family:var(--display);font-weight:800;font-size:1.5rem;white-space:nowrap} .ptrow .v .b{color:var(--blue)} .ptrow.feat{background:rgba(254,99,7,.07)} .ptrow.feat .v{color:var(--orange)} .ptag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--orange);padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle} .ptier{font-size:.96rem;color:var(--mut);margin-top:12px} /* full pricing table (listino page) */ .ltable-wrap{width:100%;max-width:960px;margin:36px auto 0;overflow-x:auto} .ltable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(33,39,81,.07);min-width:620px} .ltable th,.ltable td{padding:18px 20px;text-align:center;border-bottom:1px solid var(--line)} .ltable thead th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem;border-bottom:none} .ltable thead th small{display:block;font-family:var(--font);font-weight:500;font-size:.72rem;color:var(--blue-l);letter-spacing:.04em;margin-top:2px} .ltable tbody th{text-align:left;font-weight:600;color:var(--ink);background:var(--cream);font-size:.98rem} .ltable td{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink)} .ltable tr:last-child td,.ltable tr:last-child th{border-bottom:none} .ltable tbody tr.hl th{background:var(--cream-2)} .ltable tbody tr.hl td{color:var(--orange)} .ltable .promo{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--orange);padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle} /* contact page */ .form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 18px 44px rgba(33,39,81,.07)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field label{font-size:.84rem;font-weight:600;color:var(--ink)} .field input,.field textarea{font-family:var(--font);font-size:1rem;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);transition:.2s;width:100%} .field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(254,99,7,.12);background:#fff} .field input.err,.field textarea.err{border-color:#d94141;box-shadow:0 0 0 3px rgba(217,65,65,.12)} .form-flash{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:.92rem;line-height:1.45} .form-flash.ok{background:rgba(38,166,91,.12);border:1px solid rgba(38,166,91,.5);color:#1c7c47} .form-flash.err{background:rgba(217,65,65,.1);border:1px solid rgba(217,65,65,.45);color:#b23030} .field textarea{resize:vertical;min-height:110px} .contact-info{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:26px} .contact-info li{display:flex;gap:14px;align-items:flex-start} .contact-info .ci-ic{width:42px;height:42px;border-radius:11px;background:rgba(33,39,81,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-info .ci-ic svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.8} .contact-info b{display:block;font-family:var(--display);font-size:.95rem} .contact-info span{color:var(--mut);font-size:.92rem} .privacy-check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--mut);margin:6px 0 18px;cursor:pointer;line-height:1.4} .privacy-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange);flex-shrink:0} .privacy-check a{color:var(--orange);font-weight:600} /* contatti su pagina-foto: testo chiaro */ body.vpage .contact-info b{color:#fff} body.vpage .contact-info span,body.vpage .contact-info a{color:rgba(255,255,255,.85)} body.vpage .contact-info .ci-ic{background:rgba(255,255,255,.12)} body.vpage .contact-info .ci-ic svg{stroke:#fff} @media(max-width:900px){.form-row{grid-template-columns:1fr}} /* CTA */ .cta{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;text-align:center} .cta h2{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem)} .cta p{font-size:1.2rem;opacity:.95;max-width:560px;margin:18px auto 32px} .cta .btn{background:#fff;color:var(--orange)}.cta .btn:hover{background:var(--navy);color:#fff} /* footer */ .foot-sec{background:var(--navy);color:#9fc0d6;padding:60px 0 34px;min-height:auto;display:block} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} .foot-sec h4{color:#fff;font-family:var(--display);font-size:.95rem;margin-bottom:14px} .foot-sec a{display:block;padding:5px 0;font-size:.9rem}.foot-sec a:hover{color:var(--blue-l)} .foot-sec p{font-size:.9rem} .foot-bottom{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:.84rem;flex-wrap:wrap;gap:8px} /* mobile + tablet/laptop stretti: barra a burger (il menu completo + switcher + CTA non ci sta sotto ~1140) */ .mobile-menu{display:none} @media(max-width:1140px){ .snap{height:auto;overflow:visible} .sec{height:auto;min-height:auto;padding:104px 0 64px} .fp-anim,.fp-nav{display:none} .dots,.menu{display:none} .wrap.nav{padding:0 18px} /* header più compatto: spazio al burger */ .nav{gap:12px} .nav>.btn-primary{display:none} /* la CTA demo va nel menu burger */ /* header sempre scuro (come lo stato di scroll) */ header,header.over-dark,header.dark-solid{background:rgba(15,18,40,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.08)} header .burger span,header.over-dark .burger span{background:#fff} .logo{min-width:0} .logo img{height:20px;width:auto} /* logo più piccolo su mobile */ .logo .logo-dark{display:none} .logo .logo-light{display:block} .burger{display:flex;flex:0 0 auto} .hero-grid,.split,.split.narrow,.fgrid,.aud-grid,.price-mini,.norm-grid,.foot-grid{grid-template-columns:1fr;gap:28px} .slide{position:relative;opacity:1;pointer-events:auto;min-height:86vh} .slide:not(.active){display:none} .hvis{display:none} .hero-foot{position:static;flex-direction:column;align-items:flex-start;gap:16px;margin:8px 36px 0;padding:20px 0 0;background:none;backdrop-filter:none;box-shadow:none;border:none;border-top:1px solid var(--line);border-radius:0} .hero-foot .btn-ghost{border-color:rgba(43,38,34,.35);color:var(--ink)} .cx-flow{grid-template-columns:1fr;gap:16px;max-width:360px} .cx-flow::before{left:26px;right:auto;top:9%;bottom:9%;width:2px;height:auto} .cx-node{flex-direction:row;text-align:left;gap:16px} .cx-node p{max-width:none} .cx-panel{padding:32px 24px;border-radius:20px} .cx-grid{grid-template-columns:1fr;gap:14px} .cx-watermark{font-size:7rem;top:-12px} .cx-top{flex-direction:row;flex-wrap:wrap;gap:8px} .photo{min-height:280px} .mobile-menu.open{display:flex;flex-direction:column;position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(15,18,40,.98);backdrop-filter:blur(12px);z-index:99;padding:24px 32px 40px;overflow-y:auto} .mobile-menu a{display:block;padding:16px 0;font-size:1.15rem;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--display);color:#fff} .mobile-menu a:active{color:var(--orange-l)} .mobile-menu .mm-parent{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;padding:16px 0;font-size:1.15rem;font-family:var(--display);color:#fff;text-align:left} .mobile-menu .mm-parent::after{content:"";width:8px;height:8px;border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);transform:rotate(45deg);transition:transform .25s;margin:-4px 4px 0 0} .mobile-menu .mm-group.open .mm-parent{color:var(--orange-l)} .mobile-menu .mm-group.open .mm-parent::after{transform:rotate(-135deg);border-color:var(--orange-l)} .mobile-menu .mm-sub{display:flex;flex-direction:column;overflow:hidden;max-height:0;transition:max-height .3s ease} .mobile-menu .mm-group.open .mm-sub{max-height:340px} .mobile-menu .mm-sub a{padding:11px 0 11px 16px;font-size:.98rem;font-family:var(--font);color:rgba(255,255,255,.66);border-bottom:1px solid rgba(255,255,255,.07)} .mobile-menu .mm-sub a:first-child{padding-top:14px} .mobile-menu .mm-sub a::before{content:"›";color:var(--orange-l);margin-right:9px} .mobile-menu .mm-cta{display:flex;justify-content:center;margin-top:26px;padding:16px;font-size:1rem;color:#fff;border:none;border-radius:14px} .langsw{display:none} /* lo switcher desktop non serve su mobile */ .mobile-menu .mm-lang{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)} .mobile-menu .mm-lang a{display:inline-block;padding:9px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.92rem;font-family:var(--font);color:rgba(255,255,255,.82)} .mobile-menu .mm-lang a.on{background:var(--orange);border-color:var(--orange);color:#fff} .psec.hero img[src*="group-145"]{max-width:80vw;height:auto!important} /* Partner: logo teclib non tagliato */ .mobile-menu .ms{font-size:.8rem;color:var(--mut);padding:14px 0 4px;text-transform:uppercase;letter-spacing:.1em} }