/* Digital Vessel v3 — direzione immersiva ed editoriale. Caricato dopo site.css; agisce solo sulle pagine con (per ora la homepage). Stessi caratteri del marchio con ruoli nuovi: Newsreader per i titoli, Space Grotesk per testo e interfaccia. */ /* font di riserva calibrati: mentre i font Google si caricano il testo occupa già quasi lo stesso spazio, così la sostituzione non sposta il layout (misurato: Space Grotesk ≈ 108% di Arial, Newsreader ≈ 97% di Times New Roman) */ @font-face{font-family:"Space Grotesk Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:108%} @font-face{font-family:"Newsreader Fallback";src:local("Times New Roman"),local("Times"),local("Liberation Serif");size-adjust:97%} .v3{ --navy:#06182A; --sans:"Space Grotesk","Space Grotesk Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Newsreader","Newsreader Fallback",ui-serif,Georgia,serif; --navy-2:#0B2438; --paper:#F3F4F2; --cool:#E6ECF0; --white:#FFFFFF; --text:#0A1A29; --text-soft:#475866; --text-faint:#5C6C78; --line:rgba(10,26,41,.14); --blue:#2A6CA6; --cyan:#35D6EE; --cyan-soft:#8FE6F4; --on-navy:#E9EEF1; --on-navy-soft:#AFC2CF; --line-navy:rgba(175,194,207,.2); --ease:cubic-bezier(.2,.7,.2,1); --head-h:76px; --sec:clamp(5.5rem,12vw,11rem); background:var(--paper); color:var(--text); font-family:var(--sans); font-weight:400; font-size:clamp(1rem,.25vw + .95rem,1.1rem); line-height:1.7; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .v3{ --paper:#0B1C2A;--cool:#0E2233;--white:#0F2638;--text:#E7EBE8;--text-soft:#B3C3CE;--text-faint:#93A6B3; --line:rgba(175,194,207,.2);--blue:#7DB6E6;--navy:#050F19; } } :root[data-theme="dark"] .v3{ --paper:#0B1C2A;--cool:#0E2233;--white:#0F2638;--text:#E7EBE8;--text-soft:#B3C3CE;--text-faint:#93A6B3; --line:rgba(175,194,207,.2);--blue:#7DB6E6;--navy:#050F19; } .v3 p{font-size:inherit;line-height:inherit;max-width:52ch} .v3 h3{font-family:var(--sans);font-size:1.12rem;font-weight:600;letter-spacing:-.01em} /* ---------- titoli ---------- */ .v3 .x-display{ font-family:var(--serif);font-weight:300;letter-spacing:-.035em;line-height:1; font-size:clamp(2.2rem,4.3vw,4.2rem);max-width:15ch; } .v3 .x-display em{font-style:italic;color:var(--blue)} .v3 .x-navy .x-display,.v3 .x-close .x-display{color:#F5F8F7} .v3 .x-navy .x-display em,.v3 .x-close .x-display em{color:var(--cyan-soft)} .v3 .idx{display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--blue);margin-bottom:.9rem} .v3 .x-navy .idx{color:var(--cyan)} /* ---------- header: trasparente sulla hero, chiaro durante lo scorrimento ---------- */ .v3 .site-head{ position:fixed;left:0;right:0;top:0; background:rgba(243,244,242,.94);border-bottom:0; box-shadow:0 1px 0 rgba(10,26,41,.07),0 12px 30px rgba(10,26,41,.06); transition:background-color .45s var(--ease),box-shadow .45s var(--ease); } @supports (backdrop-filter:blur(12px)){.v3 .site-head{backdrop-filter:blur(14px)}} .v3 .head-in{min-height:var(--head-h)} /* logo senza superficie: versione navy su fondo chiaro, versione chiara sopra la hero */ .v3 .brand{background:none;border-radius:4px;padding:6px 0;margin-left:0;box-shadow:none} .v3 .brand img{height:38px} .v3 .brand .logo-light{display:none} .js .v3 .site-head:not(.is-scrolled):not(.open) .brand .logo-dark{display:none} .js .v3 .site-head:not(.is-scrolled):not(.open) .brand .logo-light{display:block} .v3 .nav{gap:.35rem} .v3 .nav a,.v3 .nav-trigger{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text);position:relative;transition:color .3s} .v3 .nav a:not(.head-cta)::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.15rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .v3 .nav a:not(.head-cta):hover,.v3 .nav-trigger:hover,.v3 .nav-trigger[aria-expanded="true"]{background:none} .v3 .nav a:not(.head-cta):hover::after,.v3 .nav a[aria-current="page"]:not(.head-cta)::after{transform:scaleX(1)} .v3 .nav a[aria-current="page"]:not(.head-cta),.v3 .nav-trigger.is-current{box-shadow:none} .v3 .nav .head-cta{border-radius:999px;padding:.72rem 1.2rem;margin-left:.8rem;border:1px solid var(--text);background:transparent;color:var(--text);transition:background-color .3s,color .3s,border-color .3s} .v3 .nav .head-cta:hover{background:var(--text);color:var(--paper)} .v3 .lang{border-left-color:var(--line)} .v3 .lang span,.v3 .lang a{font-size:.74rem;letter-spacing:.1em;color:var(--text)} .v3 .lang a{opacity:.62} .v3 .lang a:hover{opacity:1;background:none} .v3 .subnav{border-radius:14px;padding:.5rem;border-color:rgba(10,26,41,.1);box-shadow:0 20px 44px rgba(6,24,42,.16);background:#fff} .v3 .subnav a{color:#0A1A29;text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500;border-radius:8px} .v3 .subnav a::after{display:none} .v3 .navgroup.open .subnav{animation:xFadeDown .24s var(--ease)} .v3 .menu-btn{border-radius:999px;padding:.55rem 1.05rem;font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text);border-color:var(--line);transition:color .3s,border-color .3s} /* stato "in cima": solo con JS (classe js impostata nel ), mai testo chiaro su fondo chiaro senza script */ .js .v3 .site-head:not(.is-scrolled):not(.open){background:transparent;box-shadow:none;backdrop-filter:none} .js .v3 .site-head:not(.is-scrolled):not(.open) .nav > a, .js .v3 .site-head:not(.is-scrolled):not(.open) .nav-trigger, .js .v3 .site-head:not(.is-scrolled):not(.open) .lang span, .js .v3 .site-head:not(.is-scrolled):not(.open) .lang a, .js .v3 .site-head:not(.is-scrolled):not(.open) .menu-btn{color:#fff} .js .v3 .site-head:not(.is-scrolled):not(.open) .menu-btn{border-color:rgba(255,255,255,.55)} .js .v3 .site-head:not(.is-scrolled):not(.open) .lang{border-left-color:rgba(255,255,255,.3)} @media (max-width:1180px){.v3 .nav a,.v3 .nav-trigger{padding-inline:.45rem;letter-spacing:.09em}.v3 .nav .head-cta{margin-left:.3rem}} @media (max-width:1040px){ .v3{--head-h:64px} .v3 .brand img{height:33px} .v3 .nav{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;left:0;right:0;top:100%;background:var(--paper); padding:.6rem var(--pad) 1.5rem;max-height:calc(100dvh - var(--head-h));overflow-y:auto; box-shadow:0 24px 40px rgba(6,24,42,.16); visibility:hidden;opacity:0;transform:translateY(-12px); transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s; } .v3 .site-head.open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s} .v3 .nav a,.v3 .nav-trigger{font-size:.9rem;letter-spacing:.08em;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--text)} .v3 .nav a::after{display:none} .v3 .nav a[aria-current="page"]{color:var(--blue)} .v3 .subnav{background:none;box-shadow:none;padding:0;border-radius:0} .v3 .subnav a{padding:.9rem 0 .9rem 1rem;border-radius:0;color:var(--text)} .v3 .nav .head-cta{display:block;text-align:center;margin:1.2rem 0 0;padding:1rem;border-radius:999px;background:var(--navy);color:#fff;border-color:var(--navy)} .v3 .subnav-label{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem} } @media (max-width:400px){ .v3 .head-in{gap:.4rem} .v3 .brand{padding:5px 0} .v3 .brand img{height:27px} .v3 .lang span,.v3 .lang a{padding:.7rem .32rem} .v3 .menu-btn{padding:.5rem .8rem;letter-spacing:.08em} } /* ---------- pulsanti e link ---------- */ .v3 .btn{ border-radius:999px;padding:1.05rem 1.65rem;display:inline-flex;align-items:center;gap:.7rem;min-height:48px; font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; transition:background-color .3s,border-color .3s,color .3s,transform .35s var(--ease),box-shadow .35s var(--ease); } /* pulsante principale: gradiente blu → azzurro, testo bianco (contrasto ≥ 4.5:1 su tutto il gradiente) */ .v3 .btn-primary,.v3 .btn-ink,.v3 .band .btn,.v3 .nav a.head-cta{ background:linear-gradient(120deg,#0E3263 0%,#1A5698 45%,#2272B0 75%,#1A5698 100%); background-size:220% 100%;background-position:0% 50%; color:#fff;border:1px solid rgba(143,230,244,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px rgba(34,114,176,.32); transition:background-position .6s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease),border-color .3s; } .v3 .btn-primary:hover,.v3 .btn-ink:hover,.v3 .band .btn:hover,.v3 .nav a.head-cta:hover{ background-position:100% 50%;color:#fff;border-color:rgba(143,230,244,.7);transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px rgba(53,214,238,.28),0 6px 18px rgba(14,50,99,.35); } .v3 .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .v3 .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)} .v3 .btn .arr,.v3 .x-link .arr{display:inline-block;transition:transform .35s var(--ease)} .v3 .btn:hover .arr,.v3 .x-link:hover .arr{transform:translateX(5px)} .v3 .x-link{font-weight:600;font-size:.9rem;color:var(--blue);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .4s var(--ease)} .v3 .x-link:hover{background-size:100% 1px} /* ---------- sezioni ---------- */ .v3 .x-sec{padding-block:var(--sec)} .v3 .x-light{background:var(--paper)} .v3 .x-cool{background:var(--cool)} .v3 .x-white{background:var(--white)} .v3 .x-navy{background:var(--navy);color:var(--on-navy)} .v3 .x-navy p{color:var(--on-navy-soft)} .v3 .x-navy h3{color:#F5F8F7} /* ---------- hero ---------- */ .v3 .x-hero{position:relative;min-height:max(640px,100svh);display:flex;align-items:center;background:var(--navy);color:#fff;overflow:hidden} .v3 .x-hero-media{position:absolute;inset:0} .v3 .x-hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%} .v3 .x-hero-media::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,rgba(5,15,25,.78) 0%,rgba(5,15,25,.5) 38%,rgba(5,15,25,.05) 70%), linear-gradient(0deg,rgba(5,15,25,.55) 0%,rgba(5,15,25,0) 35%), linear-gradient(180deg,rgba(5,15,25,.45) 0%,rgba(5,15,25,0) 22%)} .v3 .x-hero-in{position:relative;width:100%;padding-top:calc(var(--head-h) + clamp(3rem,8vh,6rem));padding-bottom:clamp(3.5rem,9vh,7rem)} .v3 .x-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.7rem,5.6vw,5.7rem);line-height:.96;letter-spacing:-.04em;max-width:11ch;color:#F7F9F8} .v3 .x-hero h1 em{display:block;font-style:italic;color:var(--cyan-soft)} .v3 .x-hero-lede{margin-top:2.2rem;max-width:44ch;font-size:clamp(1.02rem,.35vw + .96rem,1.18rem);color:#C7D5DE} .v3 .x-hero-lede em{font-style:normal;color:#fff} .v3 .x-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem} /* smartphone nella hero: allineato al margine destro del contenuto */ .v3 .x-hero-phone{ position:absolute;z-index:1;margin:0; right:max(var(--pad),calc((100% - 1180px) / 2 + var(--pad))); bottom:clamp(1.5rem,5vh,4rem); width:clamp(230px,24vw,380px); } .v3 .x-hero-phone img{width:100%;height:auto;max-height:calc(100svh - var(--head-h) - 7rem);object-fit:contain;filter:drop-shadow(0 30px 45px rgba(0,0,0,.55))} .v3 .x-hero-phone figcaption{text-align:center;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,238,241,.72);margin-top:.2rem} @media (max-width:900px){ .v3 .x-hero-phone{top:calc(var(--head-h) + 1rem);bottom:auto;right:var(--pad);width:clamp(130px,34vw,250px)} .v3 .x-hero-phone img{max-height:none} } /* ---------- 1. problema ---------- */ .v3 .x-split-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,7rem);align-items:end} .v3 .x-aside p{color:var(--text-soft);max-width:44ch} .v3 .x-chain{margin-top:clamp(4.5rem,9vw,8rem);border-top:1px solid var(--line)} .v3 .x-chain .chain{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:.8rem 2rem;padding-block:2.4rem;border-bottom:1px solid var(--line);margin:0} .v3 .x-chain .chain-label{grid-column:1;grid-row:1 / span 2;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0;padding-top:.7rem} .v3 .x-chain .chain-track{grid-column:2;gap:.5rem 0} .v3 .x-chain .chain-note{grid-column:2;margin:.6rem 0 0;color:var(--text-soft);font-size:.98rem} .v3 .x-chain .node{border-radius:999px;padding:.7rem 1.15rem;font-size:.86rem;background:transparent;border-color:rgba(10,26,41,.22);color:var(--text-soft)} .v3 .x-chain .node.person{background:var(--navy);border-color:var(--navy);color:#fff} .v3 .x-chain .node.ai{background:rgba(42,108,166,.1);border-color:var(--blue);color:var(--blue)} .v3 .x-chain .link{background:rgba(10,26,41,.25)} .v3 .x-quote{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.1vw,2.05rem);line-height:1.25;letter-spacing:-.015em;max-width:26ch;margin:clamp(4rem,8vw,7rem) 0 0 auto;color:var(--text)} /* ---------- 2. persone: immagine a tutta altezza + testo ---------- */ .v3 .x-people,.v3 .x-status{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(680px,100svh,1000px)} .v3 .x-bleed-media{position:relative;overflow:hidden;margin:0;min-height:420px} .v3 .x-bleed-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .v3 .x-people .x-bleed-media img{object-position:38% 40%} .v3 .x-bleed-text{align-self:center;padding:clamp(4.5rem,9vw,9rem) clamp(1.25rem,6vw,7.5rem);max-width:760px} .v3 .x-roles{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;border-top:1px solid var(--line-navy)} .v3 .x-roles li{display:grid;grid-template-columns:3rem minmax(0,10rem) minmax(0,1fr);gap:.3rem 1.2rem;padding:1.5rem 0;border-bottom:1px solid var(--line-navy);align-items:baseline} .v3 .x-roles .idx{margin:0} .v3 .x-roles p{margin:0;font-size:.98rem} /* ---------- 3. cosa fa: dispositivi protagonisti ---------- */ .v3 .x-center{margin-inline:auto;text-align:center} .v3 .x-device{max-width:1240px;margin:clamp(3rem,6vw,5.5rem) auto 0;padding-inline:var(--pad)} .v3 .x-device img{width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(6,24,42,.22))} .v3 .x-device figcaption{text-align:center;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-top:.6rem} .v3 .x-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4.5rem);margin-top:clamp(3.5rem,7vw,6rem)} .v3 .x-feat{border-top:1px solid var(--line);padding-top:1.6rem} .v3 .x-feat h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,1.8vw,1.75rem);letter-spacing:-.02em;margin-bottom:.8rem} .v3 .x-feat p{color:var(--text-soft);font-size:.98rem;max-width:36ch} .v3 .x-more{margin-top:1.2rem} /* ---------- 4. stato: testo + immagine a tutta altezza a destra ---------- */ .v3 .x-status{grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:0;align-items:start} /* foto con tablet: proporzioni originali (lo schermo dell'app non viene tagliato); resta affiancata al testo durante lo scorrimento, che rimane naturale */ .v3 .x-status .x-bleed-media{position:sticky;top:calc(var(--head-h) + 2.5rem);align-self:start;aspect-ratio:1672/941;min-height:0;margin-block:clamp(4.5rem,9vw,9rem)} @media (max-width:900px){.v3 .x-status .x-bleed-media{position:relative;top:auto;margin-block:0}} .v3 .x-status .x-bleed-text{justify-self:end} .v3 .x-lead{margin-top:1.6rem;font-size:1.1rem;color:#D1DDE5 !important} .v3 .x-status .status-list{margin-top:2.2rem;gap:1.05rem} .v3 .x-status .status-list li{color:var(--on-navy-soft);font-size:.96rem} .v3 .x-status .mark{border-radius:999px;padding:.26rem .65rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase} .v3 .x-status .mark.now{background:rgba(53,214,238,.1);color:var(--cyan);border-color:rgba(53,214,238,.45)} .v3 .x-status .mark.next{background:rgba(227,172,79,.1);color:#E3AC4F;border-color:rgba(227,172,79,.45)} .v3 .x-status .status-foot{margin-top:2rem;font-size:.94rem;color:#93A8B6} .v3 .x-status figcaption{position:absolute;left:1.5rem;bottom:1.2rem;z-index:1;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)} /* display di plancia: render scontornato, mai ritagliato */ .v3 .x-status{align-items:center} .v3 .x-status-device{margin:0;padding:clamp(3rem,6vw,6rem) clamp(1.25rem,4vw,4.5rem) clamp(3rem,6vw,6rem) 0} .v3 .x-status-device img{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))} .v3 .x-status .x-status-device figcaption{position:static;text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#93A8B6;margin-top:.8rem;text-shadow:none} @media (max-width:900px){.v3 .x-status-device{padding:0 var(--pad) clamp(3.5rem,10vw,5rem)}} /* ---------- 5. le quattro porte ---------- */ .v3 .x-door-list{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line)} .v3 .x-door-list .door{ position:relative;isolation:isolate;margin:0;border-radius:0; grid-template-columns:minmax(0,1fr) auto;gap:2rem;padding:clamp(1.8rem,3.5vw,2.8rem) clamp(.5rem,2vw,1.5rem); border-bottom:1px solid var(--line);transition:color .3s; } .v3 .x-door-list .door::before{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1} .v3 .x-door-list .door:hover{background:none} .v3 .x-door-list .door:hover::before,.v3 .x-door-list .door:focus-visible::before{transform:none} .v3 .x-door-list .door-t{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.5vw,2.4rem);letter-spacing:-.03em;line-height:1.08;margin-bottom:.7rem;transition:color .3s} .v3 .x-door-list .door:hover .door-t{color:var(--blue)} .v3 .x-door-list .door-d{color:var(--text-soft);max-width:54ch;font-size:.98rem} .v3 .x-door-list .door-go{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:.8rem} .v3 .x-door-list .door-go::after{content:"→";font-size:1.1rem;letter-spacing:0;transition:transform .35s var(--ease)} .v3 .x-door-list .door:hover .door-go::after{transform:translateX(6px)} /* ---------- 6. chiusura fotografica a tutta larghezza ---------- */ .v3 .x-close{position:relative;min-height:clamp(620px,92svh,960px);display:flex;align-items:flex-end;background:var(--navy);color:#fff;overflow:hidden} .v3 .x-close-media{position:absolute;inset:0} .v3 .x-close-media img{width:100%;height:100%;object-fit:cover;object-position:65% 55%} .v3 .x-close-media::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,rgba(5,15,25,.86) 0%,rgba(5,15,25,.55) 42%,rgba(5,15,25,.1) 75%), linear-gradient(0deg,rgba(5,15,25,.7) 0%,rgba(5,15,25,0) 50%)} .v3 .x-close-in{position:relative;width:100%;padding-block:clamp(6rem,14vh,10rem) clamp(4rem,9vh,7rem)} .v3 .x-close .x-display{max-width:17ch} .v3 .x-close p{margin-top:1.8rem;color:#CBD8E0;max-width:44ch} /* ---------- band e footer ---------- */ .v3 .band{background:var(--paper);color:var(--text)} .v3 .band .wrap{padding-block:clamp(4.5rem,9vw,7.5rem)} .v3 .band h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,2.8vw,2.7rem);letter-spacing:-.03em;line-height:1.08;color:var(--text);max-width:18ch} .v3 .band p{color:var(--text-soft);margin-top:1rem;font-size:1rem} .v3 .site-foot{background:var(--navy)} .v3 .foot-col h2{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem} /* footer: logo chiaro senza superficie */ .v3 .foot-logo{background:none;padding:0;border-radius:0;margin-bottom:1.3rem} .v3 .foot-logo img{height:44px} .v3 .foot-company{color:var(--on-navy-soft)} /* ===================================================================== PAGINE INTERNE ===================================================================== */ /* hero di pagina: stessa struttura della homepage, più contenuta */ .v3 .x-page-hero.has-photo{min-height:clamp(560px,80svh,860px)} .v3 .x-page-hero.is-plain{min-height:clamp(420px,62svh,640px);background: radial-gradient(90% 120% at 85% 10%,rgba(34,114,176,.35) 0%,rgba(6,24,42,0) 60%), radial-gradient(60% 80% at 10% 100%,rgba(53,214,238,.10) 0%,rgba(6,24,42,0) 60%),var(--navy)} .v3 .x-page-hero h1{font-size:clamp(2.4rem,4.8vw,4.6rem);max-width:17ch;line-height:1} .v3 .x-page-hero .kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 1.6rem} .v3 .x-page-hero .kicker::before{content:"";width:28px;height:1px;background:currentColor} .v3 .x-page-hero .lede{margin-top:1.8rem;max-width:52ch;font-size:clamp(1.05rem,.4vw + .98rem,1.22rem);color:#D0DCE4} .v3 .x-page-hero p{color:#AFC2CF;max-width:56ch} .v3 .x-page-hero p strong{color:#fff;font-weight:500} .v3 .x-page-hero .lede + p{margin-top:1.2rem} .v3 .x-page-hero .hero-actions{margin-top:2.4rem;gap:.8rem} .v3 .x-page-hero .nf-text,.v3 .x-page-hero h1 + p{margin-top:1.4rem} .v3 .x-page-hero .x-hero-media img{object-position:62% 45%} .v3.inner .x-page-hero .x-hero-in{padding-bottom:clamp(3.5rem,9vh,6.5rem)} .v3 .x-page-hero.photo-right .x-hero-media img{object-position:var(--pos,50% 50%)} @media (min-width:901px){ .v3 .x-page-hero.photo-right .x-hero-media{left:46%} .v3 .x-page-hero.photo-right .x-hero-media::after{background: linear-gradient(90deg,var(--navy) 0%,rgba(6,24,42,.6) 16%,rgba(6,24,42,0) 42%), linear-gradient(180deg,rgba(5,15,25,.5) 0%,rgba(5,15,25,0) 24%)} .v3 .x-page-hero.photo-right .x-hero-in > *{max-width:min(41vw,580px)} .v3 .x-page-hero.photo-right h1{font-size:clamp(2.3rem,3.7vw,3.8rem)} } @media (max-width:900px){ .v3 .x-page-hero.is-plain{align-items:flex-end} .v3 .x-page-hero.is-plain .x-hero-in{padding-top:calc(var(--head-h) + 4rem)} } /* sezioni */ .v3 .section{padding-block:clamp(4.5rem,9vw,8.5rem)} .v3 .section + .section{padding-top:0} .v3 .section.tint,.v3 .section.dark, .v3 .section.tint + .section:not(.tint),.v3 .section.dark + .section:not(.dark), .v3 .section.x-after-hero{padding-top:clamp(4.5rem,9vw,8.5rem)} .v3 .section.tint + .section.tint{padding-top:0} .v3 .tint{background:var(--cool)} .v3 .section.dark{background:var(--navy)} .v3 main .section p{color:var(--text-soft);max-width:62ch} .v3 main .section.dark p{color:var(--on-navy-soft)} .v3 main .kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .v3 main .kicker::before{content:"";width:22px;height:1px;background:currentColor} .v3 main .head-block h2,.v3 main .section.dark h2{ font-family:var(--serif);font-weight:300;letter-spacing:-.03em;line-height:1.04; font-size:clamp(2rem,3.5vw,3.3rem);max-width:19ch; } .v3 main .section.dark h2{color:#F5F8F7;max-width:22ch} .v3 main .head-block + *{margin-top:clamp(1.8rem,3vw,2.8rem)} .v3 .cols{gap:clamp(2.2rem,4vw,4rem) clamp(1.6rem,3.5vw,3.5rem)} .v3 .feat{border-top:1px solid var(--line);padding-top:1.4rem} .v3 .feat h3,.v3 .step h3,.v3 .status h3,.v3 .entry h2,.v3 .col h3{ font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.3rem,1.7vw,1.6rem);margin-bottom:.7rem; } .v3 .feat p,.v3 .col p{font-size:.98rem;max-width:48ch} .v3 .feat a,.v3 main .section p a{color:var(--blue)} .v3 .status{background:var(--white);border:0;border-radius:18px;padding:clamp(1.6rem,3.5vw,2.6rem);box-shadow:0 1px 0 var(--line),0 18px 40px rgba(6,24,42,.05)} .v3 .status h3{font-size:clamp(1.5rem,2vw,1.9rem)} .v3 .status > p,.v3 .status-list li,.v3 .status-foot{color:var(--text-soft)} .v3 .mark{border-radius:999px;padding:.24rem .65rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase} .v3 .steps{border-top-color:var(--line)} .v3 .step{padding-block:2.2rem;border-bottom-color:var(--line)} .v3 .step-n{font-size:.74rem;letter-spacing:.14em;color:var(--blue);padding-top:.5rem} .v3 .step-n::before{content:"0"} .v3 .step h3{font-size:clamp(1.45rem,2vw,1.9rem)} .v3 .packs li{padding-block:1.4rem;border-bottom-color:var(--line)} .v3 .packs b{font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:-.02em} .v3 .team .member{padding-block:1.5rem;border-bottom-color:var(--line)} .v3 .team .member b{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:-.02em} .v3 .entries{border-top-color:var(--line)} .v3 .entry{padding-block:1.8rem;border-bottom-color:var(--line)} .v3 .btn-outline{border-color:var(--text);color:var(--text);background:none} .v3 .btn-outline:hover{background:var(--text);color:var(--paper);transform:translateY(-2px)} .v3 .section .hero-actions{gap:.8rem} /* immagini nelle sezioni */ .v3 .split{gap:clamp(2.5rem,6vw,6rem)} .v3 .split .cols-2,.v3 .split .cols-3{grid-template-columns:minmax(0,1fr)} .v3 .figure img{border-radius:6px} .v3 .figure figcaption{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-top:.8rem} .v3 .figure.device img{border-radius:0;background:none;filter:drop-shadow(0 30px 40px rgba(6,24,42,.2))} .v3 .figure.device figcaption{text-align:center} .v3 .figure.device-phone{max-width:380px;margin-inline:auto} .v3 .figure.device-wide{max-width:1000px;margin:clamp(2.5rem,5vw,4rem) auto} .v3 .figure.portrait-photo{max-width:440px} .v3 .x-device-band{padding-block:clamp(3.5rem,7vw,6rem)} .v3 .x-device-band .x-device{margin-top:0} /* visione: manifesto editoriale su fondo chiaro */ .v3 .x-manifesto .wrap{max-width:860px} .v3 main .x-manifesto p{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,.9vw + .95rem,1.55rem);line-height:1.55;color:var(--text);max-width:36ch;margin-bottom:1.6rem} .v3 main .x-manifesto p.open{font-size:clamp(1.45rem,1.4vw + 1rem,2.1rem);line-height:1.35;max-width:30ch} .v3 .x-manifesto .sign{border-top-color:var(--line)} .v3 .x-manifesto .sign b{color:var(--text);font-family:var(--serif);font-weight:400;font-size:1.3rem} .v3 .x-manifesto .sign span{color:var(--text-faint)} /* moduli */ .v3 .field label{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase} .v3 .field input,.v3 .field select,.v3 .field textarea{font-family:var(--sans);background:var(--white);border-radius:10px;border-color:rgba(10,26,41,.28);padding:.8rem .9rem} .v3 .form-off{border-radius:12px} .v3 .todo-box{border-radius:16px} .v3 .legal-sec h2{font-family:var(--serif);font-weight:400} /* ---------- mobile e tablet ---------- */ @media (max-width:900px){ .v3 .x-split-head{grid-template-columns:minmax(0,1fr);gap:2rem} .v3 .x-chain .chain{grid-template-columns:minmax(0,1fr)} .v3 .x-chain .chain-label,.v3 .x-chain .chain-track,.v3 .x-chain .chain-note{grid-column:1;grid-row:auto} .v3 .x-chain .chain-label{padding-top:0} .v3 .x-quote{margin-left:0} .v3 .x-people,.v3 .x-status{grid-template-columns:minmax(0,1fr);min-height:0} .v3 .x-bleed-media{min-height:0;aspect-ratio:4/3} .v3 .x-people .x-bleed-media{aspect-ratio:4/5;max-height:80svh} .v3 .x-bleed-text{padding:clamp(3.5rem,10vw,5rem) var(--pad);max-width:none} .v3 .x-status .x-bleed-text{justify-self:stretch} .v3 .x-feats{grid-template-columns:minmax(0,1fr);gap:2.4rem} .v3 .x-door-list .door{grid-template-columns:minmax(0,1fr);gap:1rem} } @media (min-width:601px) and (max-width:900px){.v3 .x-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}} @media (max-width:900px){ .v3 .x-hero{align-items:flex-end} /* su smartphone la foto occupa la parte alta, così l'imbarcazione resta visibile sopra il titolo */ .v3 .x-hero-media{bottom:auto;height:64%} .v3 .x-hero-media img{object-position:74% 62%} .v3 .x-hero-media::after{background: linear-gradient(0deg,rgba(6,24,42,1) 0%,rgba(6,24,42,.6) 28%,rgba(6,24,42,0) 55%), linear-gradient(180deg,rgba(5,15,25,.55) 0%,rgba(5,15,25,0) 25%)} .v3 .x-hero-in{padding-top:48svh} .v3 .x-hero h1{font-size:clamp(2.5rem,8.5vw,4rem)} .v3 .x-hero-lede{margin-top:1.5rem} } @media (max-width:760px){ .v3 .x-hero h1{font-size:clamp(2.5rem,10.5vw,3.5rem)} .v3 .x-roles li{grid-template-columns:2.4rem minmax(0,1fr)} .v3 .x-roles li p{grid-column:2} .v3 .x-close-media::after{background:linear-gradient(0deg,rgba(5,15,25,.95) 0%,rgba(5,15,25,.7) 50%,rgba(5,15,25,.3) 100%)} } /* ---------- regia del movimento ---------- */ @keyframes xFade{from{opacity:0}to{opacity:1}} @keyframes xFadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:no-preference){ /* ingresso delle hero: solo dissolvenza (nessuno spostamento o cambio di scala), solo CSS */ .v3 .x-hero-media img{animation:xFade 1.4s ease-out both} .v3 .x-hero-in > *{animation:xFade 1.1s ease-out both} .v3 .x-hero-in > :nth-child(1){animation-delay:.1s} .v3 .x-hero-in > :nth-child(2){animation-delay:.3s} .v3 .x-hero-in > :nth-child(3){animation-delay:.45s} .v3 .site-head{animation:xFade .9s .2s both} /* smartphone: entra da destra verso sinistra, una sola volta */ .v3 .x-hero-phone{animation:xPhoneIn 1.5s cubic-bezier(.16,.84,.24,1) .55s both} } @keyframes xPhoneIn{from{opacity:0;transform:translate3d(110px,0,0)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:no-preference) and (max-width:760px){ .v3 .x-hero-phone{animation-name:xPhoneInSm;animation-duration:1.1s} } @keyframes xPhoneInSm{from{opacity:0;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}} /* comparsa allo scorrimento: JS nasconde solo ciò che è fuori dalla finestra */ .v3 .rv{opacity:0;transform:translateY(34px)} .v3 .rv-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)} /* immagini: dissolvenza e leggero rientro della scala */ .v3 [data-reveal="img"].rv{transform:none} .v3 [data-reveal="img"].rv img{transform:scale(1.08)} .v3 [data-reveal="img"].rv-in{transition:opacity 1.2s var(--ease)} .v3 [data-reveal="img"].rv-in img{transform:none;transition:transform 1.8s var(--ease)} @media (max-width:760px){ .v3 .rv{transform:translateY(16px)} .v3 [data-reveal="img"].rv img{transform:scale(1.03)} .v3 .rv-in{transition-duration:.6s} } @media (prefers-reduced-motion:reduce){ .v3 .rv,.v3 [data-reveal="img"].rv img{opacity:1;transform:none} .v3 .btn:hover{transform:none} } /* ---------- prodotto: avviso informativo nella hero ---------- */ .v3 .x-page-hero .x-notice{ display:flex;gap:.85rem;align-items:flex-start;margin-top:1.8rem;max-width:62ch; background:#E8EDF0;color:#14222E;border-radius:12px;padding:1.05rem 1.25rem; } .v3 .x-notice-icon{flex:0 0 auto;color:#2A6CA6;margin-top:.15rem} .v3 .x-page-hero .x-notice p{margin:0;max-width:none;color:#1E2E3B;font-size:.96rem;line-height:1.6} .v3 .x-page-hero .x-notice p strong{color:#0A1A29;font-weight:600} /* ---------- visione: manifesto su due colonne ---------- */ .v3 main .x-manifesto p{break-inside:avoid} @media (min-width:901px){ .v3 .x-manifesto .wrap{max-width:1180px;column-count:2;column-gap:clamp(3rem,6vw,6rem)} .v3 main .x-manifesto p{max-width:none;font-size:clamp(1.12rem,.55vw + .95rem,1.32rem)} .v3 main .x-manifesto p.open{column-span:all;max-width:34ch;font-size:clamp(1.45rem,1.4vw + 1rem,2.1rem);margin-bottom:clamp(2.5rem,4vw,3.5rem)} .v3 .x-manifesto .sign{column-span:all} } /* ---------- chi siamo: sezione BioNIRS con fotografia di sfondo ---------- */ .v3 .section.x-photo-band{position:relative;overflow:hidden;background:var(--navy);padding-block:clamp(6rem,13vw,10.5rem)} .v3 .section.x-photo-band + .section{padding-top:clamp(4.5rem,9vw,8.5rem)} .v3 .x-band-media{position:absolute;inset:0} .v3 .x-band-media img{width:100%;height:100%;object-fit:cover;object-position:40% 40%} .v3 .x-band-media::after{content:"";position:absolute;inset:0;background: linear-gradient(270deg,rgba(6,24,42,.94) 0%,rgba(6,24,42,.82) 34%,rgba(6,24,42,.25) 62%,rgba(6,24,42,.1) 100%)} .v3 .x-photo-band .wrap{position:relative} .v3 .x-photo-band .wrap > *{margin-left:auto;max-width:min(520px,42%)} .v3 main .x-photo-band h2{color:#F5F8F7} .v3 main .x-photo-band p{color:#D0DCE4} @media (max-width:900px){ /* su mobile la foto sta sopra il testo, senza velature sui volti */ .v3 .section.x-photo-band{padding-top:0} .v3 .x-band-media{position:relative;inset:auto;aspect-ratio:3/2;margin-bottom:clamp(2.5rem,8vw,3.5rem)} .v3 .x-band-media::after{background:linear-gradient(0deg,rgba(6,24,42,1) 0%,rgba(6,24,42,0) 35%)} .v3 .x-photo-band .wrap > *{margin-left:0;max-width:none} } /* homepage: su smartphone il dispositivo nella hero non viene mostrato */ @media (max-width:760px){.v3 .x-hero-phone{display:none}} /* homepage "Un prototipo…": smartphone verticale, dimensione contenuta e centrata */ .v3 .x-status-device.is-phone{display:flex;justify-content:center} .v3 .x-status-device.is-phone img{width:min(100%,400px)} @media (max-width:900px){.v3 .x-status-device.is-phone img{width:min(78%,340px)}} /* prodotto: display di plancia dopo la hero */ .v3 .x-device.x-device-display{max-width:1060px} /* dimensioni massime pari a circa metà della risoluzione reale: nitide anche su schermi ad alta densità */ .v3 .figure.device-wide.is-infographic{max-width:760px} .v3 .x-status-device.is-phones{display:flex;justify-content:center} .v3 .x-status-device.is-phones img{width:min(100%,560px)} .v3 .figure.device-phone.is-small{max-width:340px} @media (max-width:900px){.v3 .x-status-device.is-phones img{width:min(100%,460px)}} /* prodotto, funzione 5: foto di sfondo con il tablet visibile a sinistra */ .v3 .x-photo-f5 .x-band-media img{object-position:30% 55%} .v3 main .x-photo-band .kicker{color:var(--cyan)} @media (max-width:900px){.v3 .x-photo-f5 .x-band-media img{object-position:28% 55%}} .v3 main .x-photo-band .wrap > .kicker{display:flex} /* menu: il pulsante Soluzioni usa la stessa altezza di riga dei link, così tutte le voci stanno sulla stessa linea */ .v3 .nav-trigger{line-height:1.7} @media (min-width:1041px){.v3 .nav-trigger{display:inline-flex;align-items:center}} .v3 .nav-trigger::after{transform:translateY(-1px) rotate(45deg)} .v3 .nav-trigger[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)} /* chi siamo: due paragrafi affiancati */ .v3 .x-two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem)} .v3 main .x-two-cols p{max-width:none;margin:0} @media (max-width:760px){.v3 .x-two-cols{grid-template-columns:minmax(0,1fr)}} /* visione: passaggio graduale dal navy alla foto (la foto parte più a sinistra, sotto la sfumatura) */ @media (min-width:901px){ .v3 .x-page-hero.photo-right.soft-fade .x-hero-media{left:30%} .v3 .x-page-hero.photo-right.soft-fade .x-hero-media::after{background: linear-gradient(90deg,var(--navy) 0%,rgba(6,24,42,.94) 12%,rgba(6,24,42,.78) 24%,rgba(6,24,42,.52) 38%,rgba(6,24,42,.26) 54%,rgba(6,24,42,.08) 72%,rgba(6,24,42,0) 88%), linear-gradient(180deg,rgba(5,15,25,.45) 0%,rgba(5,15,25,0) 24%)} } /* ===================================================================== v4 — FASE 1: tipografia Montserrat, confronto, icone, WhatsApp ===================================================================== */ /* Montserrat (SIL Open Font License), ospitato localmente — alternativa libera a Gotham */ @font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900; src:url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900; src:url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations"),url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* font di riserva calibrato (misurato: Montserrat ≈ 111% di Arial) per evitare salti durante il caricamento */ @font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:111%} .v3{ --sans:"Montserrat","Montserrat Fallback","Helvetica Neue",Helvetica,Arial,sans-serif; --serif:"Montserrat","Montserrat Fallback","Helvetica Neue",Helvetica,Arial,sans-serif; font-family:var(--sans);font-weight:400; font-size:clamp(.97rem,.18vw + .93rem,1.05rem);line-height:1.75;letter-spacing:.005em; } /* titoli: peso leggero e spaziatura stretta, come nel riferimento; corsivi sostituiti dal solo colore */ .v3 .x-display,.v3 .x-hero h1,.v3 main .head-block h2,.v3 main .section.dark h2,.v3 .band h2{font-weight:300;letter-spacing:-.035em} .v3 .x-display{font-size:clamp(1.95rem,3.7vw,3.5rem);line-height:1.06;max-width:17ch} .v3 .x-hero h1{font-size:clamp(2.3rem,4.6vw,4.6rem);line-height:1.02;max-width:12ch} .v3 .x-page-hero h1{font-size:clamp(2.1rem,3.9vw,3.8rem);line-height:1.05;max-width:18ch} .v3 .x-page-hero.photo-right h1{font-size:clamp(2rem,3.1vw,3.1rem)} .v3 main .head-block h2,.v3 main .section.dark h2{font-size:clamp(1.75rem,2.9vw,2.7rem);line-height:1.1;max-width:22ch} .v3 .band h2{font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.12} .v3 .x-display em,.v3 .x-hero h1 em{font-style:normal;font-weight:300} .v3 .x-quote{font-weight:300;letter-spacing:-.02em;font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.35} .v3 .x-feat h3,.v3 .feat h3,.v3 .step h3,.v3 .status h3,.v3 .entry h2,.v3 .col h3,.v3 .packs b,.v3 .team .member b,.v3 .legal-sec h2,.v3 .x-manifesto .sign b{ font-family:var(--sans);font-weight:500;letter-spacing:-.01em;line-height:1.25} .v3 .x-feat h3,.v3 .feat h3,.v3 .col h3{font-size:clamp(1.08rem,1.25vw,1.25rem)} .v3 .step h3{font-size:clamp(1.15rem,1.5vw,1.4rem)} .v3 .status h3{font-size:clamp(1.25rem,1.7vw,1.6rem);font-weight:400} .v3 .x-roles h3{font-weight:600;font-size:1rem} .v3 .x-door-list .door-t{font-weight:300;font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:-.025em;line-height:1.15} .v3 main .x-manifesto p{font-family:var(--sans);font-weight:300;font-size:clamp(1.05rem,.45vw + .95rem,1.2rem);line-height:1.7} .v3 main .x-manifesto p.open{font-weight:300;font-size:clamp(1.3rem,1.2vw + .95rem,1.8rem);line-height:1.4;letter-spacing:-.015em} .v3 .x-hero-lede,.v3 .x-page-hero .lede{font-weight:400} .v3 p strong,.v3 .x-hero-lede em{font-weight:600} /* menu, pulsanti, etichette: maiuscolo leggibile */ .v3 .nav a,.v3 .nav-trigger,.v3 .lang span,.v3 .lang a,.v3 .menu-btn{font-size:.7rem;font-weight:600;letter-spacing:.12em} .v3 .btn{font-size:.72rem;font-weight:600;letter-spacing:.13em} .v3 .x-page-hero .kicker,.v3 main .kicker,.v3 .label,.v3 .idx,.v3 .x-door-list .door-go,.v3 .mark,.v3 .foot-col h2,.v3 .field label,.v3 .x-chain .chain-label{font-weight:600} .v3 .subnav a{font-size:.86rem;font-weight:500} @media (max-width:1180px){.v3 .nav a,.v3 .nav-trigger{letter-spacing:.08em;padding-inline:.4rem}} @media (max-width:1040px){.v3 .nav a,.v3 .nav-trigger{font-size:.84rem;letter-spacing:.06em}} .v3 .field input,.v3 .field select,.v3 .field textarea,.v3 .form-off,.v3 .consent{font-family:var(--sans)} .v3 .site-foot{font-family:var(--sans)} .v3 .foot-brand b{font-weight:600} /* ---------- confronto Com'è oggi / La nostra visione ---------- */ .v3 .x-compare{margin-top:clamp(4rem,8vw,7rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2rem);align-items:stretch} .v3 .x-cmp{border-radius:18px;padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column} .v3 .x-cmp.is-now{background:var(--white);border:1px solid var(--line)} .v3 .x-cmp.is-vision{background:radial-gradient(120% 90% at 100% 0%,rgba(34,114,176,.35) 0%,rgba(6,24,42,0) 60%),var(--navy);color:#E9EEF1;border:1px solid rgba(53,214,238,.28)} .v3 .x-cmp-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem;color:var(--text-faint)} .v3 .x-cmp.is-vision .x-cmp-label{color:var(--cyan)} .v3 .x-cmp-title{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;margin:0} .v3 .x-cmp.is-vision .x-cmp-title{color:#F5F8F7} .v3 .x-cmp-lead{font-weight:500;margin:.8rem 0 0;color:var(--text)} .v3 .x-cmp.is-vision .x-cmp-lead{color:#F5F8F7} .v3 .x-cmp-note{margin:auto 0 0;padding-top:1.4rem;font-size:.95rem;color:var(--text-soft);max-width:none} .v3 .x-cmp.is-vision .x-cmp-note{color:#B9C9D4} .v3 .x-flow{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 0} .v3 .x-flow li{display:inline-flex;align-items:center} .v3 .x-flow li:not(:last-child)::after{content:"→";margin:0 .45rem;color:var(--text-faint);font-size:.95rem} .v3 .x-cmp.is-vision .x-flow li:not(:last-child)::after{color:#7F98A9} .v3 .x-flow span,.v3 .x-flow strong{display:inline-block;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--text-soft)} .v3 .x-cmp.is-vision .x-flow span{border-color:rgba(175,194,207,.3);color:#C9D6DE} .v3 .x-cmp.is-now .x-flow .is-key strong{background:var(--text);border-color:var(--text);color:var(--paper)} .v3 .x-cmp.is-vision .x-flow .is-key strong{background:var(--cyan);border-color:var(--cyan);color:#04202B;box-shadow:0 0 0 4px rgba(53,214,238,.18),0 0 22px rgba(53,214,238,.45)} @media (max-width:900px){.v3 .x-compare{grid-template-columns:minmax(0,1fr)}} /* schermi stretti: lo schema scorre in verticale, con le frecce verso il basso */ @media (max-width:560px){ .v3 .x-flow{gap:.5rem 0} .v3 .x-flow span,.v3 .x-flow strong{padding:.42rem .68rem;font-size:.68rem;letter-spacing:.08em} .v3 .x-flow li:not(:last-child)::after{margin:0 .3rem} } /* ---------- icone al posto dei numeri ---------- */ .v3 .x-ico{display:block;width:28px;height:28px} .v3 .x-door-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;margin-bottom:1rem;color:var(--blue);background:rgba(42,108,166,.09);transition:background-color .3s,color .3s} .v3 .x-door-list .door:hover .x-door-ico,.v3 .x-door-list .door:focus-visible .x-door-ico{background:var(--blue);color:#fff} .v3 .step-n.step-ico{padding-top:0} .v3 .step-n.step-ico::before{content:none} .v3 .step-n.step-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;color:var(--blue);background:rgba(42,108,166,.09)} /* ---------- pulsante WhatsApp ---------- */ .wa-float{ position:fixed;z-index:55;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(6,24,42,.28);transition:transform .25s ease,box-shadow .25s ease; } .wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,24,42,.34)} .wa-float:focus-visible{outline:3px solid #0A1A29;outline-offset:3px;box-shadow:0 0 0 3px #fff,0 8px 24px rgba(6,24,42,.28)} /* con il menu mobile aperto il pulsante si nasconde, per non coprire le voci */ .site-head.open ~ .wa-float{visibility:hidden;opacity:0} /* spazio in fondo alla pagina: nessun link del footer resta sotto il pulsante */ .v3 .foot-bot{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))} @media (min-width:1041px){.v3 .foot-bot{padding-bottom:1.35rem;padding-right:88px}} @media (max-width:420px){.wa-float{width:52px;height:52px}} @media (prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}} /* ===================================================================== v4 — FASE 2: immagini e team ===================================================================== */ /* fotografie a tutta larghezza (non dispositivi scontornati) */ .v3 .figure.photo-wide{max-width:1000px;margin:0 auto clamp(2.5rem,5vw,4rem)} .v3 .figure.photo-wide img{border-radius:14px} /* visione: foto tra il manifesto e le firme, su tutta la larghezza delle colonne */ .v3 .x-manifesto .x-manifesto-photo{column-span:all;margin:clamp(2rem,4vw,3rem) 0 0;break-inside:avoid} /* broker: tablet nella colonna accanto al testo */ .v3 .split .figure.device:not(.device-phone):not(.device-wide){max-width:560px} /* ---------- team: card fotografiche ---------- */ .v3 .x-team{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)} @media (max-width:900px){.v3 .x-team{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.v3 .x-team{grid-template-columns:minmax(0,1fr);max-width:420px}} .v3 .tm-card{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--navy);isolation:isolate} .v3 .tm-media{position:absolute;inset:0} .v3 .tm-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .v3 .tm-card:hover .tm-media img{transform:scale(1.03)} /* segnaposto finché non arrivano le foto: monogramma neutro, nessun volto */ .v3 .tm-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:radial-gradient(90% 70% at 70% 20%,rgba(34,114,176,.45) 0%,rgba(6,24,42,0) 65%),linear-gradient(160deg,#0E2A44 0%,#06182A 100%); color:rgba(233,238,241,.22);font-size:clamp(3.5rem,7vw,5.5rem);font-weight:200;letter-spacing:.04em} /* nome e ruolo sempre leggibili */ .v3 .tm-info{position:absolute;left:0;right:0;bottom:0;padding:3.2rem 1.4rem 1.3rem; background:linear-gradient(0deg,rgba(6,24,42,.92) 0%,rgba(6,24,42,.7) 45%,rgba(6,24,42,0) 100%);color:#F5F8F7} .v3 .tm-name{font-size:1.2rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:0;color:#F5F8F7} .v3 main .tm-role{margin:.3rem 0 0;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);max-width:none} /* LinkedIn: compare al passaggio del mouse e al focus; sempre visibile sui dispositivi touch */ .v3 .tm-in{position:absolute;top:14px;right:14px;z-index:1;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.92);color:#0A66C2;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,background-color .2s} .v3 .tm-in svg{width:22px;height:22px} .v3 .tm-card:hover .tm-in,.v3 .tm-card:focus-within .tm-in{opacity:1;transform:none} .v3 .tm-in:hover{background:#fff} .v3 .tm-in:focus-visible{opacity:1;transform:none;outline:3px solid var(--cyan);outline-offset:3px} @media (hover:none){.v3 .tm-in{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.v3 .tm-in,.v3 .tm-media img{transition:none}.v3 .tm-card:hover .tm-media img{transform:none}} .v3 main .x-team .tm-role{color:#8FE6F4} /* ===================================================================== v4.1 — testi più contenuti su desktop, icone ruoli, porte, titoli con slide-up ===================================================================== */ .v3{font-size:clamp(.95rem,.12vw + .92rem,1rem)} .v3 .x-display{font-size:clamp(1.85rem,3.1vw,3rem)} .v3 .x-hero h1{font-size:clamp(2.2rem,4vw,3.9rem)} .v3 .x-page-hero h1{font-size:clamp(2rem,3.3vw,3.2rem)} .v3 .x-page-hero.photo-right h1{font-size:clamp(1.9rem,2.7vw,2.7rem)} .v3 main .head-block h2,.v3 main .section.dark h2{font-size:clamp(1.65rem,2.5vw,2.3rem)} .v3 .band h2{font-size:clamp(1.5rem,2.1vw,2rem)} .v3 .x-quote{font-size:clamp(1.2rem,1.6vw,1.55rem)} .v3 .x-cmp-title{font-size:clamp(1.45rem,1.9vw,1.85rem)} .v3 .x-door-list .door-t{font-size:clamp(1.25rem,1.7vw,1.6rem)} .v3 .x-hero-lede,.v3 .x-page-hero .lede{font-size:clamp(1rem,.3vw + .93rem,1.1rem)} .v3 main .x-manifesto p.open{font-size:clamp(1.25rem,1vw + .95rem,1.6rem)} /* icone al posto dei numeri: "A chi cambia la giornata" */ .v3 .x-role-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--cyan);background:rgba(53,214,238,.1);align-self:start} .v3 .x-roles li{grid-template-columns:3.4rem minmax(0,10rem) minmax(0,1fr);align-items:start} .v3 .x-roles li h3{padding-top:.55rem} .v3 .x-roles li p{padding-top:.5rem} @media (max-width:760px){.v3 .x-roles li{grid-template-columns:3.4rem minmax(0,1fr)}.v3 .x-roles li p{grid-column:2;padding-top:0}} /* "Da dove salite a bordo?" */ .v3 .x-doors-intro{margin-top:1.4rem;color:var(--text-soft);max-width:60ch} .v3 .x-door-list{margin-top:clamp(2.5rem,5vw,4rem)} .v3 main .door-k{margin:0 0 .45rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);max-width:none} /* titoli: righe che salgono da una maschera (attivato da JS solo se il movimento non è ridotto) */ .v3 .ls-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .16em;margin:-.08em -.06em -.16em} .v3 .ls-i{display:inline-block;transform:translate3d(0,135%,0);opacity:0;transition:transform 1.05s cubic-bezier(.2,.75,.2,1),opacity 1.05s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--ln,0) * 110ms + var(--ld,0ms))} .v3 .ls-on .ls-i{transform:none;opacity:1} /* hero: finché lo script non prende in carico il titolo resta nascosto, ma al massimo per 2,5 s */ @media (prefers-reduced-motion:no-preference){ .js .v3 .x-hero-in > h1:not(.ls-ready){animation:none;opacity:0;animation:lsFallback 0s 2.5s forwards} .js .v3 .x-hero-in > h1.ls-ready{animation:none;opacity:1} } @keyframes lsFallback{to{opacity:1}} @media (prefers-reduced-motion:reduce){.v3 .ls-i{transform:none;opacity:1;transition:none}} /* flotte: foto dell'operatore davanti al monitor; testo a sinistra, schermo della flotta visibile a destra */ .v3 .x-photo-fleet .x-band-media img{object-position:62% 45%} .v3 .x-photo-fleet .x-band-media::after{background:linear-gradient(90deg,rgba(6,24,42,.95) 0%,rgba(6,24,42,.86) 30%,rgba(6,24,42,.35) 55%,rgba(6,24,42,.05) 75%)} .v3 .x-photo-fleet .wrap > *{margin-left:0;margin-right:auto} @media (max-width:900px){.v3 .x-photo-fleet .x-band-media::after{background:linear-gradient(0deg,rgba(6,24,42,1) 0%,rgba(6,24,42,0) 35%)}} /* v4.2: H1 leggermente più grandi; titolo della homepage più grande, "La decisione resta" su una riga */ .v3 .x-hero h1{font-size:clamp(2.3rem,5vw,4.7rem);max-width:none} .v3 .x-page-hero h1{font-size:clamp(2.15rem,3.7vw,3.6rem)} .v3 .x-page-hero.photo-right h1{font-size:clamp(2rem,3vw,3rem)} .v3.home .x-hero-in > h1{max-width:calc(min(1180px,100vw) - 2 * var(--pad) - clamp(230px,24vw,380px) - 2.5rem)} @media (max-width:900px){.v3.home .x-hero-in > h1{max-width:none}} /* fascia finale: titolo più grande */ .v3 .band h2{font-size:clamp(1.75rem,2.7vw,2.6rem);max-width:20ch} /* hero con foto a tutta larghezza (Cantieri): titolo su più righe come nelle altre pagine */ .v3 .x-page-hero.has-photo:not(.photo-right) h1{max-width:13ch} /* ancora "Scopri come funziona": scorrimento morbido e spazio per l'header fisso */ @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} .v3 .x-cmp.is-vision{scroll-margin-top:calc(var(--head-h) + 1.5rem)}