/* ============================================================ D'ALESSANDRO TRASPORTI — DESIGN SYSTEM Palette: RED (logo) + CHARCOAL/SILVER. Namespaced sotto .da-site. I font (Poppins + Inter) sono SELF-HOSTED in /fonts (subset latin). I pesi above-the-fold sono precaricati via nel . ============================================================ */ /* ---- Font self-hosted (niente connessione esterna a Google, niente render-block) ---- */ /* Inter: variable font (un solo file copre tutti i pesi 100-900). */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter.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} /* Poppins: pesi statici usati dal design system. */ @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.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:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.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} *{box-sizing:border-box} /* overflow-x:clip evita lo scroll orizzontale su mobile (lo "spazio bianco" a destra) SENZA rompere position:sticky della navbar, a differenza di overflow-x:hidden. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{margin:0;background:#fff;overflow-x:clip;width:100%;max-width:100%} /* ============================================================ D'ALESSANDRO TRASPORTI — DESIGN SYSTEM Namespaced under .da-site to avoid conflicts inside Divi. Brand palette: RED (logo) + CHARCOAL/SILVER (grey). ============================================================ */ .da-site{ /* --- Brand colors --- */ --red:#D11827; --red-600:#B3121F; --red-700:#8E0E19; --red-glow:rgba(209,24,39,.35); --charcoal:#24282D; --charcoal-2:#1A1D21; --ink:#111417; --slate:#464C53; --slate-2:#6B727A; --silver:#9AA0A6; --line:#E4E8EC; --mist:#EEF1F4; --paper:#F6F8FA; --white:#FFFFFF; /* --- Gradients --- */ --grad-red:linear-gradient(135deg,#E01B2B 0%,#9E1119 100%); --grad-dark:linear-gradient(160deg,#2A2F35 0%,#121417 100%); --grad-steel:linear-gradient(160deg,#3A4047 0%,#1B1E22 100%); /* --- Shape & motion --- */ --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px; --sh-sm:0 2px 8px rgba(20,23,26,.06); --sh-md:0 10px 30px rgba(20,23,26,.10); --sh-lg:0 24px 60px rgba(20,23,26,.16); --sh-red:0 16px 40px -8px var(--red-glow); --ease:cubic-bezier(.22,.61,.36,1); --container:1200px; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--slate); line-height:1.65; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* --- Reset (scoped) --- */ .da-site *,.da-site *::before,.da-site *::after{box-sizing:border-box;margin:0;padding:0} .da-site img{max-width:100%;height:auto;display:block} .da-site a{color:inherit;text-decoration:none} .da-site ul{list-style:none} .da-site h1,.da-site h2,.da-site h3,.da-site h4{ font-family:'Poppins',sans-serif;color:var(--ink);line-height:1.12;font-weight:700;letter-spacing:-.02em} .da-site p{margin:0 0 1rem} .da-site section{position:relative} /* --- Layout helpers --- */ .da-site .da-wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,40px)} .da-site .da-sec{padding:clamp(64px,9vw,120px) 0} .da-site .da-grid{display:grid;gap:28px} .da-site .da-grid>*{min-width:0} @media(max-width:980px){.da-site .da-grid[style*="repeat(3"],.da-site .da-grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:600px){.da-site .da-grid[style*="repeat("]{grid-template-columns:1fr!important}} .da-site .da-center{text-align:center} .da-site .da-mw{max-width:720px} .da-site .da-mw.da-center{margin-left:auto;margin-right:auto} /* --- Eyebrow + titles --- */ .da-site .da-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Poppins'; font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--red);margin-bottom:18px} .da-site .da-eyebrow::before{content:"";width:26px;height:2px;background:var(--red);border-radius:2px} .da-site .da-eyebrow.da-on-dark{color:#ff8a92} .da-site .da-eyebrow.da-on-dark::before{background:#ff8a92} .da-site .da-title{font-size:clamp(2rem,4.6vw,3.25rem);margin-bottom:20px} .da-site .da-title-sm{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:16px} .da-site .da-lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--slate-2);max-width:640px} .da-site .da-center .da-lead{margin-inline:auto} .da-site .da-red{color:var(--red)} /* --- Buttons --- */ .da-site .da-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins';font-weight:600; font-size:.98rem;padding:15px 30px;border-radius:var(--r-pill);border:2px solid transparent; cursor:pointer;transition:all .35s var(--ease);position:relative;overflow:hidden} .da-site .da-btn svg{width:18px;height:18px;transition:transform .35s var(--ease)} .da-site .da-btn-primary{background:var(--grad-red);color:#fff;box-shadow:var(--sh-red)} .da-site .da-btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 46px -8px var(--red-glow)} .da-site .da-btn-primary:hover svg{transform:translateX(4px)} .da-site .da-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .da-site .da-btn-ghost:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px)} .da-site .da-btn-light{background:#fff;color:var(--ink)} .da-site .da-btn-light:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)} .da-site .da-btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .da-site .da-btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff} /* ===== Skip link (visibile solo con focus da tastiera) ===== */ .da-skip{position:absolute;left:-9999px;top:0;z-index:2000;padding:12px 20px; background:var(--ink,#111);color:#fff;border-radius:0 0 8px 0;font-weight:600;text-decoration:none} .da-skip:focus{left:0} /* ============================ NAVBAR ============================ */ .da-site .da-nav{position:sticky;top:0;z-index:1000;transition:all .4s var(--ease); background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(228,232,236,.7)} .da-site .da-nav.da-scrolled{background:rgba(255,255,255,.92);box-shadow:var(--sh-sm)} .da-site .da-nav-inner{display:flex;align-items:center;justify-content:space-between; height:78px;transition:height .4s var(--ease)} .da-site .da-nav.da-scrolled .da-nav-inner{height:66px} .da-site .da-logo{display:flex;align-items:center;gap:12px;font-family:'Poppins';font-weight:800; font-size:1.15rem;color:var(--ink);letter-spacing:-.02em} .da-site .da-logo img{height:52px;width:auto} .da-site .da-nav.da-scrolled .da-logo img{height:46px} .da-site .da-logo b{color:var(--red)} .da-site .da-menu{display:flex;align-items:center;gap:4px} .da-site .da-menu a{font-family:'Poppins';font-weight:500;font-size:.95rem;color:var(--charcoal); padding:10px 16px;border-radius:var(--r-pill);position:relative;transition:color .3s} .da-site .da-menu a::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px; background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);border-radius:2px} .da-site .da-menu a:hover{color:var(--red)} .da-site .da-menu a:hover::after,.da-site .da-menu a.da-active::after{transform:scaleX(1)} .da-site .da-menu a.da-active{color:var(--red)} .da-site .da-nav-cta{margin-left:10px} .da-site .da-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .da-site .da-burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:all .3s var(--ease)} .da-site .da-burger.da-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .da-site .da-burger.da-open span:nth-child(2){opacity:0} .da-site .da-burger.da-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* Mobile menu — full screen */ .da-site .da-mobile{position:fixed;inset:0;z-index:1200;color:#fff; background:var(--grad-dark);transform:translateX(100%);visibility:hidden; transition:transform .5s var(--ease),visibility .5s var(--ease); padding:16px clamp(22px,7vw,40px) calc(24px + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain} .da-site .da-mobile.da-open{transform:translateX(0);visibility:visible} .da-site .da-mobile::before{content:"";position:absolute;top:-150px;right:-120px;width:360px;height:360px; border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(209,24,39,.34),transparent 70%)} .da-site .da-mob-top{position:relative;display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:52px;flex-shrink:0} .da-site .da-mob-brand{display:inline-flex;align-items:center;font-family:'Poppins';font-weight:800; font-size:1.24rem;letter-spacing:-.02em;color:#E01B2B; background:var(--grad-red);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .da-site .da-mob-brand b{color:inherit;font-weight:800} .da-site .da-mob-close{flex:none;width:46px;height:46px;display:grid;place-items:center; border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); color:#fff;cursor:pointer;transition:background .3s var(--ease),border-color .3s,transform .35s var(--ease)} .da-site .da-mob-close:hover{background:var(--grad-red);border-color:transparent;transform:rotate(90deg)} .da-site .da-mob-close svg{width:22px;height:22px} /* Voci principali numerate */ .da-site .da-mob-links{position:relative;display:flex;flex-direction:column;flex:1;justify-content:center; gap:2px;margin:10px 0} .da-site .da-mob-links>a{display:flex;align-items:center;gap:16px; padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.1)} .da-site .da-mob-links>a, .da-site .da-mob-parent-link{font-family:'Poppins';font-weight:600;color:#fff;line-height:1; font-size:clamp(1.5rem,7vw,2rem);letter-spacing:-.025em;transition:color .25s} .da-site .da-mob-links>a:hover, .da-site .da-mob-parent-link:hover{color:#ff8a92} .da-site .da-mob-links>a.da-active, .da-site .da-mob-parent-link.da-active{color:#ff8a92} .da-site .da-mob-num{font-family:'Inter',sans-serif;font-weight:600;font-size:.82rem;color:var(--red); width:2.4ch;flex:none;letter-spacing:.03em} .da-site .da-mob-lbl{flex:1} .da-site .da-mob-go{width:22px;height:22px;flex:none;color:rgba(255,255,255,.35); transition:transform .25s var(--ease),color .25s} .da-site .da-mob-links>a:hover .da-mob-go{color:#ff8a92;transform:translateX(5px)} .da-site .da-overlay{position:fixed;inset:0;background:rgba(10,12,14,.55);backdrop-filter:blur(3px); z-index:1100;opacity:0;visibility:hidden;transition:.4s} .da-site .da-overlay.da-open{opacity:1;visibility:visible} /* ============================ MEGA MENU (Servizi) ============================ */ .da-site .da-has-mega{position:static;display:flex;align-items:center} .da-site .da-mega-trigger{display:inline-flex;align-items:center;gap:6px} .da-site .da-mega-caret{width:12px;height:12px;transition:transform .3s var(--ease)} .da-site .da-has-mega[data-open="true"]>.da-mega-trigger{color:var(--red)} .da-site .da-has-mega[data-open="true"]>.da-mega-trigger::after{transform:scaleX(1)} .da-site .da-has-mega[data-open="true"] .da-mega-caret{transform:rotate(180deg)} .da-site .da-mega{position:absolute;top:calc(100% + 10px);left:0;right:0;margin-inline:auto; width:min(940px,calc(100vw - 40px));z-index:1400;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden; opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s} .da-site .da-has-mega[data-open="true"] .da-mega{opacity:1;visibility:visible;transform:translateY(0)} .da-site .da-mega a::after{content:none} .da-site .da-mega-inner{display:grid;grid-template-columns:1.05fr 1fr;min-height:336px} .da-site .da-mega-list{padding:16px;display:flex;flex-direction:column;gap:4px;background:var(--paper)} .da-site .da-mega-head{font-family:'Poppins';font-size:.72rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--slate-2);padding:8px 12px 10px} .da-site .da-mega-item{position:relative;display:flex;align-items:center;gap:14px;padding:12px; border-radius:var(--r);cursor:pointer;transition:background .25s,transform .25s;overflow:hidden} .da-site .da-mega-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0); width:3px;height:60%;background:var(--grad-red);border-radius:2px;transition:transform .25s var(--ease)} .da-site .da-mega-item.is-active{background:#fff;box-shadow:var(--sh-sm)} .da-site .da-mega-item.is-active::before{transform:translateY(-50%) scaleY(1)} .da-site .da-mega-icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red);transition:.3s var(--ease)} .da-site .da-mega-icon svg{width:22px;height:22px} .da-site .da-mega-item.is-active .da-mega-icon{background:var(--grad-red);color:#fff;transform:scale(1.05)} .da-site .da-mega-txt strong{display:block;font-family:'Poppins';font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.25} .da-site .da-mega-txt span{display:block;font-size:.8rem;color:var(--slate-2)} .da-site .da-mega-arrow{margin-left:auto;color:var(--red);opacity:0;transform:translateX(-6px);transition:.25s var(--ease)} .da-site .da-mega-arrow svg{width:17px;height:17px} .da-site .da-mega-item.is-active .da-mega-arrow{opacity:1;transform:none} .da-site .da-mega-preview{position:relative;padding:28px;border-left:1px solid var(--line);overflow:hidden} .da-site .da-mega-preview::before{content:"";position:absolute;inset:0;z-index:0;opacity:.6; background:radial-gradient(60% 55% at 78% 18%,var(--glow,#ffe1e3) 0%,transparent 60%), radial-gradient(50% 50% at 12% 92%,#fff0f1 0%,transparent 55%)} .da-site .da-pv{position:relative;z-index:1;display:none;flex-direction:column;height:100%} .da-site .da-pv.is-active{display:flex;animation:da-pv-in .4s var(--ease)} @keyframes da-pv-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .da-site .da-pv-badge{align-self:flex-start;font-family:'Poppins';font-size:.72rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--red-700);background:rgba(255,255,255,.72); border:1px solid #ffc9cd;padding:5px 12px;border-radius:var(--r-pill);backdrop-filter:blur(4px)} .da-site .da-pv-ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:#fff; background:var(--grad-red);margin:14px 0 4px;box-shadow:var(--sh-red)} .da-site .da-pv-ic svg{width:28px;height:28px} .da-site .da-pv-title{display:block;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);margin:0} .da-site .da-pv-desc{font-size:.92rem;color:var(--slate-2);margin-top:8px;max-width:38ch} .da-site .da-pv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .da-site .da-pv-chip{font-size:.75rem;font-weight:500;color:var(--slate);background:rgba(255,255,255,.85); border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px} .da-site .da-pv-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto; padding-top:22px;font-family:'Poppins';font-weight:600;font-size:.9rem;color:var(--red);transition:gap .25s} .da-site .da-pv-cta svg{width:16px;height:16px} .da-site .da-pv-cta:hover{gap:12px;color:var(--red-700)} .da-site .da-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 28px;border-top:1px solid var(--line);background:var(--paper);font-size:.82rem;color:var(--slate-2)} .da-site .da-mega-foot a{font-family:'Poppins';font-weight:600;color:var(--red);display:inline-flex;align-items:center;gap:6px} .da-site .da-mega-foot a svg{width:15px;height:15px} .da-site .da-mega-foot a:hover{gap:10px;transition:gap .25s} /* Mobile submenu (Servizi) */ .da-site .da-mob-group{display:flex;flex-direction:column} .da-site .da-mob-parent{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)} .da-site .da-mob-parent-link{flex:1;display:flex;align-items:center;gap:16px;padding:15px 2px} .da-site .da-mob-sub-toggle{flex:none;width:54px;height:58px;display:grid;place-items:center; background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;transition:color .25s} .da-site .da-mob-sub-toggle:hover{color:#ff8a92} .da-site .da-mob-chevron{width:24px;height:24px;transition:transform .35s var(--ease)} .da-site .da-mob-group.da-open .da-mob-sub-toggle{color:#ff8a92} .da-site .da-mob-group.da-open .da-mob-chevron{transform:rotate(180deg)} .da-site .da-mob-sub{display:flex;flex-direction:column;gap:8px;overflow:hidden;max-height:0;opacity:0; padding:0 2px 0 calc(2.4ch + 16px); transition:max-height .45s var(--ease),opacity .35s var(--ease),padding .45s var(--ease)} .da-site .da-mob-group.da-open .da-mob-sub{opacity:1;padding-top:12px;padding-bottom:6px} .da-site .da-mob-scard{display:flex!important;align-items:center;gap:13px;padding:11px 13px!important; border:1px solid rgba(255,255,255,.1)!important;border-radius:14px;background:rgba(255,255,255,.04); font-size:1rem!important;transition:background .25s,border-color .25s} .da-site .da-mob-scard:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)!important} .da-site .da-mob-scard-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:rgba(209,24,39,.16);color:#ff8a92} .da-site .da-mob-scard-ic svg{width:21px;height:21px} .da-site .da-mob-scard-txt{display:flex;flex-direction:column;line-height:1.3;gap:1px} .da-site .da-mob-scard-txt strong{font-family:'Poppins';font-weight:600;font-size:1rem;color:#fff} .da-site .da-mob-scard-txt span{font-size:.8rem;color:rgba(255,255,255,.58)} /* Mobile menu — footer (CTA + contatti) */ .da-site .da-mob-foot{position:relative;flex-shrink:0;padding-top:16px} .da-site .da-mob-cta{display:flex;align-items:center;justify-content:center;gap:10px; background:var(--grad-red);color:#fff;font-family:'Poppins';font-weight:600;font-size:1.05rem; padding:16px;border-radius:999px;box-shadow:0 16px 40px -12px rgba(209,24,39,.6); transition:transform .3s var(--ease),box-shadow .3s} .da-site .da-mob-cta svg{width:18px;height:18px;transition:transform .3s var(--ease)} .da-site .da-mob-cta:hover{transform:translateY(-2px);box-shadow:0 22px 48px -12px rgba(209,24,39,.7)} .da-site .da-mob-cta:hover svg{transform:translateX(4px)} .da-site .da-mob-contacts{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:18px} .da-site .da-mob-contacts a{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif; font-size:.95rem;color:rgba(255,255,255,.72);transition:color .25s} .da-site .da-mob-contacts a:hover{color:#fff} .da-site .da-mob-contacts svg{width:16px;height:16px;color:var(--red);flex:none} /* Mobile menu — animazioni d'ingresso a cascata */ .da-site .da-mob-top,.da-site .da-mob-foot{opacity:0;transform:translateY(10px)} .da-site .da-mob-links>a, .da-site .da-mob-links>.da-mob-group{opacity:0;transform:translateX(-18px)} .da-site .da-mobile.da-open .da-mob-top{animation:da-mob-in .5s var(--ease) .05s forwards} .da-site .da-mobile.da-open .da-mob-links>a, .da-site .da-mobile.da-open .da-mob-links>.da-mob-group{ animation:da-mob-in .5s var(--ease) forwards;animation-delay:calc(var(--mi,1) * .07s + .14s)} .da-site .da-mobile.da-open .da-mob-foot{animation:da-mob-in .5s var(--ease) .52s forwards} @keyframes da-mob-in{to{opacity:1;transform:none}} /* ============================ HERO ============================ */ .da-site .da-hero{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff; padding:clamp(90px,14vw,150px) 0 clamp(70px,10vw,120px)} .da-site .da-hero-media{position:absolute;inset:0;z-index:0} .da-site .da-hero-media img{width:100%;height:100%;object-fit:cover;opacity:.28; transform:scale(1.08);animation:da-kenburns 20s ease-in-out infinite alternate} .da-site .da-hero-media::after{content:"";position:absolute;inset:0; background:linear-gradient(115deg,rgba(17,20,23,.92) 0%,rgba(17,20,23,.72) 45%,rgba(17,20,23,.35) 100%)} .da-site .da-hero-glow{position:absolute;z-index:1;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,var(--red-glow),transparent 68%); top:-160px;right:-120px;filter:blur(20px);animation:da-float 9s ease-in-out infinite} .da-site .da-hero-inner{position:relative;z-index:2;max-width:760px} .da-site .da-hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:22px;letter-spacing:-.03em} .da-site .da-hero h1 em{font-style:normal;color:transparent;background:var(--grad-red); -webkit-background-clip:text;background-clip:text} .da-site .da-hero p{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(255,255,255,.82);max-width:560px;margin-bottom:34px} .da-site .da-hero-cta{display:flex;flex-wrap:wrap;gap:14px} .da-site .da-hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill); font-size:.85rem;font-weight:500;color:#fff;margin-bottom:26px;backdrop-filter:blur(8px)} .da-site .da-hero-badge b{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill); background:var(--grad-red);font-family:'Poppins';font-weight:600;font-size:.78rem} /* Small page hero (interior pages) — testo + immagine, con strada animata sullo sfondo */ .da-site .da-phero{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff; padding:clamp(112px,15vw,164px) 0 clamp(72px,9vw,112px)} /* Strada animata in prospettiva */ .da-site .da-phero-clip{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .da-site .da-road{position:absolute;bottom:0;left:50%;width:200%;max-width:1700px;height:64%; transform:translateX(-50%);perspective:560px} .da-site .da-lanes{position:absolute;inset:0;transform:rotateX(64deg);transform-origin:bottom center;overflow:hidden} .da-site .da-lane{position:absolute;bottom:0;width:9px;height:230%;left:50%;margin-left:-4.5px; background:repeating-linear-gradient(180deg,#E01B2B 0 48px,transparent 48px 124px); opacity:.55;animation:da-road-move 1.1s linear infinite} .da-site .da-lane.l2{transform:translateX(-165px) skewX(-16deg);opacity:.30; background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 48px,transparent 48px 124px)} .da-site .da-lane.l3{transform:translateX(165px) skewX(16deg);opacity:.30; background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 48px,transparent 48px 124px)} .da-site .da-lane.l4{transform:translateX(-350px) skewX(-30deg);opacity:.16} .da-site .da-lane.l5{transform:translateX(350px) skewX(30deg);opacity:.16} @keyframes da-road-move{to{background-position:0 124px}} .da-site .da-phero-clip::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#14171A 0%,rgba(20,23,26,0) 42%,rgba(20,23,26,0) 78%,rgba(20,23,26,.55) 100%)} .da-site .da-phero .da-hero-glow{position:absolute;z-index:1;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,var(--red-glow),transparent 68%);top:-170px;right:-120px;filter:blur(20px)} /* Griglia: testo a sinistra, immagine a destra */ .da-site .da-phero .da-wrap{position:relative;z-index:2} .da-site .da-phero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,56px);align-items:center} .da-site .da-phero-copy{max-width:600px} .da-site .da-phero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.55rem);letter-spacing:-.03em;margin:0 0 18px;line-height:1.1} .da-site .da-phero h1 em{font-style:normal;background:var(--grad-red); -webkit-background-clip:text;background-clip:text;color:transparent} .da-site .da-phero p{color:rgba(255,255,255,.82);font-size:clamp(1rem,1.8vw,1.2rem);max-width:560px;margin:0 0 30px} .da-site .da-phero-cta{display:flex;flex-wrap:wrap;gap:14px} /* Immagine a destra */ .da-site .da-phero-media{position:relative;border-radius:var(--r-lg);overflow:hidden; border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh-lg)} .da-site .da-phero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;display:block} /* Breadcrumb */ .da-site .da-crumbs{display:flex;gap:10px;align-items:center;font-size:.85rem;color:rgba(255,255,255,.6); margin-bottom:20px;font-weight:500;flex-wrap:wrap} .da-site .da-crumbs a:hover{color:#ff8a92} .da-site .da-crumbs span{color:var(--red)} @media(max-width:860px){ .da-site .da-phero-grid{grid-template-columns:1fr;gap:36px} .da-site .da-phero-media{max-width:560px;margin:0 auto;width:100%} } @media(prefers-reduced-motion:reduce){ .da-site .da-lane{animation:none} } /* ============================ CARDS ============================ */ .da-site .da-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:34px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; position:relative;overflow:hidden} .da-site .da-card::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px; background:var(--grad-red);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)} .da-site .da-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:transparent} .da-site .da-card:hover::before{transform:scaleY(1)} .da-site .da-ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red);margin-bottom:22px;transition:.4s var(--ease)} .da-site .da-ic svg{width:28px;height:28px} .da-site .da-card:hover .da-ic{background:var(--grad-red);color:#fff;transform:rotate(-6deg) scale(1.05)} .da-site .da-card h3{font-size:1.28rem;margin-bottom:10px} .da-site .da-card p{color:var(--slate-2);font-size:.98rem;margin:0} .da-site .da-card-num{position:absolute;top:20px;right:26px;font-family:'Poppins';font-weight:800; font-size:2.6rem;color:var(--mist);line-height:1;z-index:0} /* Card in evidenza nel bento: occupa 2 colonne */ .da-site .da-card-feat{grid-column:span 2} /* Griglia servizi 2+3: prima riga 2 card, seconda riga 3 card, tutte equispaziate */ .da-site .da-grid-2-3{grid-template-columns:repeat(6,1fr)} .da-site .da-grid-2-3>:nth-child(-n+2){grid-column:span 3} .da-site .da-grid-2-3>:nth-child(n+3){grid-column:span 2} /* Griglia servizi 3+2: prima riga 3 card, seconda riga 2 card, tutte equispaziate */ .da-site .da-grid-3-2{grid-template-columns:repeat(6,1fr)} .da-site .da-grid-3-2>:nth-child(-n+3){grid-column:span 2} .da-site .da-grid-3-2>:nth-child(n+4){grid-column:span 3} /* Griglia vantaggi in card (3 per riga; ultima riga centrata se incompleta) */ .da-site .da-adv-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:48px} .da-site .da-adv{flex:0 1 calc((100% - 48px)/3);min-width:0; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s} .da-site .da-adv:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent} .da-site .da-adv-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red);margin-bottom:16px} .da-site .da-adv-ic svg{width:22px;height:22px} .da-site .da-adv b{display:block;font-family:'Poppins';font-size:1.05rem;margin-bottom:6px} .da-site .da-adv span{color:var(--slate-2);font-size:.94rem;line-height:1.55} /* Image cards / gallery */ .da-site .da-imgcard{border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--sh-md); background:#111;aspect-ratio:3/2} .da-site .da-imgcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .da-site .da-imgcard:hover img{transform:scale(1.09)} .da-site .da-imgcard-cap{position:absolute;inset:auto 0 0 0;padding:26px 22px 20px;color:#fff; background:linear-gradient(transparent,rgba(10,12,14,.85));font-family:'Poppins';font-weight:600; transform:translateY(8px);opacity:.9;transition:.4s var(--ease)} .da-site .da-imgcard:hover .da-imgcard-cap{transform:translateY(0);opacity:1} .da-site .da-imgcard-cap small{display:block;font-weight:400;font-size:.8rem;color:rgba(255,255,255,.75);margin-top:3px} /* ============================ STATS ============================ */ .da-site .da-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .da-site .da-stat{text-align:center;padding:14px} .da-site .da-stat-n{font-family:'Poppins';font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem); line-height:1;color:var(--ink);letter-spacing:-.03em} .da-site .da-stat-n .da-suf{color:var(--red)} .da-site .da-stat-l{font-size:.92rem;color:var(--slate-2);margin-top:8px;font-weight:500} .da-site .da-on-dark .da-stat-n{color:#fff} .da-site .da-on-dark .da-stat-l{color:rgba(255,255,255,.65)} /* ============================ FEATURE / SPLIT ============================ */ .da-site .da-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,72px);align-items:center} .da-site .da-split.da-rev .da-split-media{order:2} .da-site .da-media-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)} .da-site .da-media-frame img{width:100%;height:100%;object-fit:cover} /* Variante per sezioni con testo lungo: media allineata in alto e sticky, così resta in vista */ .da-site .da-split-sticky{align-items:start} .da-site .da-split-sticky .da-split-media{position:sticky;top:100px} .da-site .da-media-badge{position:absolute;left:24px;bottom:24px;background:#fff;border-radius:var(--r); padding:18px 22px;box-shadow:var(--sh-md);display:flex;align-items:center;gap:14px} .da-site .da-media-badge .da-mb-n{font-family:'Poppins';font-weight:800;font-size:2rem;color:var(--red);line-height:1} .da-site .da-media-badge .da-mb-l{font-size:.82rem;color:var(--slate-2);line-height:1.3} .da-site .da-check{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px} .da-site .da-check svg{flex:none;width:24px;height:24px;color:var(--red);margin-top:2px} .da-site .da-check b{display:block;color:var(--ink);font-family:'Poppins';font-weight:600;font-size:1.02rem} .da-site .da-check span{font-size:.95rem;color:var(--slate-2)} /* ============================ CTA BAND ============================ */ .da-site .da-cta{position:relative;overflow:hidden;background:var(--grad-red);color:#fff;border-radius:var(--r-xl); padding:clamp(44px,6vw,72px);text-align:center} .da-site .da-cta::before,.da-site .da-cta::after{content:"";position:absolute;border-radius:50%; background:rgba(255,255,255,.1)} .da-site .da-cta::before{width:320px;height:320px;top:-140px;left:-80px} .da-site .da-cta::after{width:240px;height:240px;bottom:-120px;right:-40px} .da-site .da-cta>*{position:relative;z-index:1} .da-site .da-cta h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:14px} .da-site .da-cta p{color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 28px;font-size:1.08rem} .da-site .da-cta .da-hero-cta{justify-content:center} /* ============================ FOOTER ============================ */ .da-site .da-foot{background:var(--charcoal-2);color:rgba(255,255,255,.72);padding:72px 0 0} .da-site .da-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:52px} .da-site .da-foot h4, .da-site .da-foot-title{display:block;color:#fff;font-size:1rem;margin-bottom:20px;font-family:'Poppins';font-weight:600} .da-site .da-foot-logo{display:flex;align-items:center;gap:12px;font-family:'Poppins';font-weight:800; font-size:1.25rem;color:#fff;margin-bottom:18px} .da-site .da-foot-logo b{color:var(--red)} .da-site .da-foot p{font-size:.94rem;line-height:1.75;color:rgba(255,255,255,.6)} .da-site .da-foot li{margin-bottom:12px} .da-site .da-foot a{color:rgba(255,255,255,.68);font-size:.94rem;transition:color .25s,padding .25s} .da-site .da-foot ul a:hover{color:#fff;padding-left:6px} .da-site .da-foot-contact li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:rgba(255,255,255,.66)} .da-site .da-foot-contact svg{flex:none;width:18px;height:18px;color:var(--red);margin-top:3px} .da-site .da-foot-socials{display:flex;gap:10px;margin-top:20px} .da-site .da-foot-socials a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.06);color:#fff;transition:.3s var(--ease)} .da-site .da-foot-socials a:hover{background:var(--grad-red);transform:translateY(-4px)} .da-site .da-foot-socials svg{width:18px;height:18px} .da-site .da-foot-bar{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;display:flex; justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;color:rgba(255,255,255,.5)} .da-site .da-foot-bar a:hover{color:#fff} .da-site .da-badge-iso{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill); background:rgba(255,255,255,.06);font-size:.8rem;color:rgba(255,255,255,.7);font-weight:500} /* ============================ FORMS ============================ */ .da-site .da-form{display:grid;gap:18px} .da-site .da-field{display:flex;flex-direction:column;gap:7px} .da-site .da-field label{font-family:'Poppins';font-weight:500;font-size:.88rem;color:var(--ink)} .da-site .da-field input,.da-site .da-field textarea,.da-site .da-field select{ font-family:inherit;font-size:1rem;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm); background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s;width:100%} .da-site .da-field input:focus,.da-site .da-field textarea:focus,.da-site .da-field select:focus{ outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(209,24,39,.1)} .da-site .da-field textarea{min-height:140px;resize:vertical} .da-site .da-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} /* Info tiles */ .da-site .da-info{display:flex;gap:18px;align-items:flex-start;padding:24px;background:#fff; border:1px solid var(--line);border-radius:var(--r);transition:.35s var(--ease)} .da-site .da-info:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:transparent} .da-site .da-info .da-info-ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red)} .da-site .da-info .da-info-ic svg{width:24px;height:24px} .da-site .da-info h3,.da-site .da-info h4{font-size:1.05rem;margin-bottom:4px} .da-site .da-info p,.da-site .da-info a{font-size:.95rem;color:var(--slate-2);margin:0} .da-site .da-info a:hover{color:var(--red)} /* ============================ ANIMATIONS ============================ */ .da-site [data-reveal]{opacity:0;transform:translateY(34px); transition:opacity .8s var(--ease),transform .8s var(--ease)} .da-site [data-reveal].da-in{opacity:1;transform:none} .da-site [data-reveal="left"]{transform:translateX(-40px)} .da-site [data-reveal="right"]{transform:translateX(40px)} .da-site [data-reveal="scale"]{transform:scale(.92)} .da-site [data-reveal].da-in{transform:none} .da-site [data-delay="1"]{transition-delay:.1s} .da-site [data-delay="2"]{transition-delay:.2s} .da-site [data-delay="3"]{transition-delay:.3s} .da-site [data-delay="4"]{transition-delay:.4s} .da-site [data-delay="5"]{transition-delay:.5s} @keyframes da-kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.15) translate(-2%,-2%)}} @keyframes da-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}} @keyframes da-spin{to{transform:rotate(360deg)}} @keyframes da-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Marquee (trusted brands) */ .da-site .da-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .da-site .da-marquee-track{display:flex;width:max-content;animation:da-marquee 72s linear infinite} .da-site .da-marquee:hover .da-marquee-track{animation-play-state:paused} .da-site .da-marquee-item{font-family:'Poppins';font-weight:700;font-size:1.5rem;color:var(--silver); opacity:.7;white-space:nowrap;transition:.3s;margin-right:64px} .da-site .da-marquee-item:hover{opacity:1;color:var(--red)} .da-site .da-marquee-logo{height:42px;width:auto;margin-right:64px;flex:0 0 auto;object-fit:contain; filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s} .da-site .da-marquee-logo:hover{filter:none;opacity:1} /* Section tints */ .da-site .da-bg-paper{background:var(--paper)} .da-site .da-bg-mist{background:var(--mist)} .da-site .da-bg-dark{background:var(--grad-dark);color:rgba(255,255,255,.8)} .da-site .da-bg-dark .da-title,.da-site .da-bg-dark h2,.da-site .da-bg-dark h3{color:#fff} /* Divider shape */ .da-site .da-wave{display:block;width:100%;height:auto;line-height:0} /* ============================ RESPONSIVE ============================ */ @media(max-width:980px){ .da-site .da-menu,.da-site .da-nav-cta{display:none} .da-site .da-burger{display:flex} .da-site .da-split{grid-template-columns:1fr;gap:36px} .da-site .da-split.da-rev .da-split-media{order:0} .da-site .da-split-sticky .da-split-media{position:static} .da-site .da-stats{grid-template-columns:repeat(2,1fr);gap:32px 16px} .da-site .da-foot-grid{grid-template-columns:1fr 1fr;gap:36px} } @media(max-width:600px){ .da-site{font-size:16px} .da-site .da-form-row{grid-template-columns:1fr} .da-site .da-foot-grid{grid-template-columns:1fr} .da-site .da-hero-cta{flex-direction:column;align-items:stretch} .da-site .da-hero-cta .da-btn{justify-content:center} .da-site .da-card{padding:26px} } @media(prefers-reduced-motion:reduce){ .da-site *,.da-site *::before,.da-site *::after{animation:none!important;transition-duration:.01ms!important} .da-site [data-reveal]{opacity:1;transform:none} .da-site .da-mob-top,.da-site .da-mob-foot, .da-site .da-mob-links>a,.da-site .da-mob-links>.da-mob-group{opacity:1;transform:none} } /* ============================================================ HERO SLIDER (home) — namespaced sotto .das-slider Indipendente dal design system .da-site. Vanilla, nessuna libreria. ============================================================ */ .das-slider{ --red:#D11827; --red-2:#9E1119; --grad-red:linear-gradient(135deg,#E01B2B 0%,#9E1119 100%); --ink:#111417; --white:#fff; --ease:cubic-bezier(.22,.61,.36,1); --container:1200px; --h:92vh; /* altezza slider */ position:relative; width:100%; height:var(--h); min-height:560px; overflow:hidden; background:#111417; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#fff; isolation:isolate; } .das-slider *,.das-slider *::before,.das-slider *::after{box-sizing:border-box;margin:0;padding:0} .das-slider img{display:block;width:100%;height:100%;object-fit:cover} .das-slider a{color:inherit;text-decoration:none} /* ---------- SLIDES ---------- */ .das-track{position:absolute;inset:0} .das-slide{position:absolute;inset:0;opacity:0;visibility:hidden; transition:opacity 1s var(--ease),visibility 1s var(--ease);z-index:1} .das-slide.is-active{opacity:1;visibility:visible;z-index:2} .das-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .das-bg img{transform:scale(1.02)} .das-slide.is-active .das-bg img{ animation:das-kenburns 8s ease-out forwards} .das-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(15,17,20,.92) 0%,rgba(15,17,20,.72) 42%,rgba(15,17,20,.28) 100%)} @keyframes das-kenburns{from{transform:scale(1.02)}to{transform:scale(1.16)}} /* red accent glow */ .das-glow{position:absolute;z-index:1;width:560px;height:560px;border-radius:50%; top:-180px;right:-140px;pointer-events:none; background:radial-gradient(circle,rgba(209,24,39,.4),transparent 68%);filter:blur(10px)} /* ---------- CONTENT ---------- */ .das-wrap{position:relative;z-index:3;height:100%;width:100%; max-width:var(--container);margin:0 auto; padding:0 clamp(24px,6vw,96px); display:flex;flex-direction:column;justify-content:center} .das-content{max-width:720px} .das-eyebrow{display:inline-flex;align-items:center;gap:12px; font-family:'Poppins';font-weight:600;font-size:clamp(.72rem,1.4vw,.82rem); letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:22px} .das-eyebrow::before{content:"";width:44px;height:2px;background:var(--red);border-radius:2px} .das-slider .das-title{font-family:'Poppins';font-weight:800;color:#fff; font-size:clamp(2.3rem,6.2vw,5rem);line-height:1.04;letter-spacing:-.03em; margin-bottom:24px} .das-slider .das-title em{font-style:normal;color:transparent;background:var(--grad-red); -webkit-background-clip:text;background-clip:text} .das-text{font-size:clamp(1.02rem,1.7vw,1.28rem);line-height:1.65; color:rgba(255,255,255,.82);max-width:560px;margin-bottom:36px} .das-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center} .das-btn{display:inline-flex;align-items:center;gap:11px; font-family:'Poppins';font-weight:600;font-size:1rem; padding:16px 32px;border-radius:999px;border:2px solid transparent;cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s,border-color .35s} .das-btn svg{width:18px;height:18px;transition:transform .35s var(--ease)} .das-btn-primary{background:var(--grad-red);color:#fff;box-shadow:0 16px 40px -8px rgba(209,24,39,.5)} .das-btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 50px -8px rgba(209,24,39,.6)} .das-btn-primary:hover svg{transform:translateX(4px)} .das-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)} .das-btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-3px)} /* ---------- TEXT ENTRANCE ANIMATION (per active slide) ---------- */ .das-slide .das-eyebrow, .das-slide .das-title, .das-slide .das-text, .das-slide .das-cta{opacity:0;transform:translateY(38px);transition:none} .das-slide.is-active .das-eyebrow{animation:das-up .8s var(--ease) .35s forwards} .das-slide.is-active .das-title{animation:das-up .9s var(--ease) .5s forwards} .das-slide.is-active .das-text{animation:das-up .9s var(--ease) .68s forwards} .das-slide.is-active .das-cta{animation:das-up .9s var(--ease) .86s forwards} @keyframes das-up{to{opacity:1;transform:none}} /* ---------- VERTICAL SOCIAL LABEL (bordo sinistro) ---------- */ .das-side{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(120px,16vh,150px);z-index:4; display:flex;flex-direction:column;align-items:center;gap:18px} .das-side::after{content:"";width:2px;height:70px;background:linear-gradient(rgba(255,255,255,.6),transparent)} .das-side a{writing-mode:vertical-rl;transform:rotate(180deg); font-family:'Poppins';font-weight:600;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase; color:rgba(255,255,255,.7);transition:color .3s} .das-side a:hover{color:var(--red)} /* ---------- BOTTOM BAR: numbers + progress + arrows ---------- */ .das-bar{position:absolute;left:0;right:0;bottom:0;z-index:5; padding:clamp(20px,3vw,34px) clamp(24px,6vw,96px); display:flex;align-items:center;gap:clamp(20px,4vw,48px); max-width:var(--container);margin:0 auto} .das-count{font-family:'Poppins';font-weight:700;font-size:clamp(1rem,2vw,1.25rem); color:#fff;letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums} .das-count .das-cur{color:#fff} .das-count .das-sep{color:rgba(255,255,255,.35);margin:0 6px} .das-count .das-tot{color:rgba(255,255,255,.45);font-size:.72em} .das-progress{flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden;max-width:520px} .das-progress i{display:block;height:100%;width:0;background:var(--grad-red);border-radius:2px} .das-progress i.run{animation:das-fill var(--dur,6s) linear forwards} @keyframes das-fill{from{width:0}to{width:100%}} .das-dots{display:flex;gap:10px} .das-dots button{width:11px;height:11px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.28);transition:.35s var(--ease)} .das-dots button.is-active{background:var(--red);width:30px;border-radius:6px} .das-arrows{display:flex;gap:12px;margin-left:auto} .das-arrows button{width:56px;height:56px;border-radius:50%;cursor:pointer; display:grid;place-items:center;background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.28);color:#fff; transition:background .3s,border-color .3s,transform .3s var(--ease)} .das-arrows button:hover{background:var(--grad-red);border-color:transparent;transform:translateY(-3px)} .das-arrows button svg{width:20px;height:20px} /* ---------- RESPONSIVE ---------- */ @media(max-width:900px){ .das-slider{--h:88vh} .das-side{display:none} .das-dots{display:none} } @media(max-width:600px){ /* Altezza reale (i figli sono assoluti, quindi "auto" collassava): riempie lo schermo sotto la navbar */ .das-slider{--h:calc(100svh - 78px);min-height:560px;padding:0} .das-wrap{min-height:0;padding:96px clamp(22px,6vw,40px) 172px;justify-content:center} .das-content{max-width:100%} .das-wrap .das-title,.das-wrap .das-text{overflow-wrap:break-word} .das-eyebrow{margin-bottom:16px} .das-slider .das-title{font-size:clamp(1.7rem,7.4vw,2.7rem);line-height:1.1;margin-bottom:16px} .das-text{font-size:1.02rem;line-height:1.6;max-width:none;margin-bottom:26px} .das-cta{flex-direction:column;align-items:stretch} .das-btn{justify-content:center;padding:15px 26px} .das-arrows button{width:46px;height:46px} .das-progress{max-width:none} .das-bar{gap:16px;padding:16px 22px calc(16px + env(safe-area-inset-bottom,0px))} } @media(prefers-reduced-motion:reduce){ .das-slider *{animation:none!important} .das-slide .das-eyebrow,.das-slide .das-title,.das-slide .das-text,.das-slide .das-cta{opacity:1;transform:none} } /* ============================================================ COMPONENTI PAGINE INTERNE (azienda / servizi / flotta / contatti / news) Aggiunti per completare il design system .da-site. ============================================================ */ /* --- Grid helpers a classe --- */ .da-site .da-grid-2{grid-template-columns:repeat(2,1fr)} .da-site .da-grid-3{grid-template-columns:repeat(3,1fr)} .da-site .da-grid-4{grid-template-columns:repeat(4,1fr)} /* --- Split body (colonna testo negli split) --- */ .da-site .da-split-body{min-width:0} .da-site .da-veyebrow{display:inline-block;font-family:'Poppins';font-weight:700;font-size:.78rem; letter-spacing:.06em;color:var(--red);margin-bottom:10px} /* --- Bottone full width --- */ .da-site .da-btn-block{width:100%;justify-content:center} /* ============================ FLOTTA: scheda tecnica ============================ */ .da-site .da-spec{margin-top:22px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r);padding:8px 22px 14px} .da-site .da-spec-head{display:flex;align-items:center;gap:10px;font-family:'Poppins';font-weight:600; font-size:.9rem;color:var(--red);padding:14px 0 12px;border-bottom:1px solid var(--line)} .da-site .da-spec-head svg{width:20px;height:20px;flex:none} .da-site .da-spec-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0; border-bottom:1px dashed var(--line)} .da-site .da-spec-row:last-child{border-bottom:0} .da-site .da-spec-k{color:var(--slate-2);font-size:.92rem} .da-site .da-spec-v{color:var(--ink);font-weight:600;font-size:.92rem;text-align:right;font-family:'Poppins'} .da-site .da-use{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px; background:linear-gradient(135deg,#fff0f1,#ffe1e3);border-radius:var(--r);color:var(--ink)} .da-site .da-use svg{flex:none;width:22px;height:22px;color:var(--red);margin-top:2px} .da-site .da-use span{font-size:.95rem;color:var(--slate)} .da-site .da-use b{color:var(--ink);font-family:'Poppins'} /* ============================ FLOTTA: banner tecnologia (feature 3) ============================ */ .da-site .da-feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(40px,6vw,60px)} .da-site .da-feat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);padding:30px;transition:transform .4s var(--ease),background .4s} .da-site .da-feat:hover{transform:translateY(-6px);background:rgba(255,255,255,.08)} .da-site .da-feat-ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center; background:var(--grad-red);color:#fff;margin-bottom:18px} .da-site .da-feat-ic svg{width:26px;height:26px} .da-site .da-feat h3{color:#fff;font-size:1.18rem;margin-bottom:9px} .da-site .da-feat p{color:rgba(255,255,255,.7);font-size:.95rem;margin:0} /* ============================ SERVIZI: processo ============================ */ .da-site .da-proc{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;counter-reset:proc} .da-site .da-proc-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:30px 26px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s} .da-site .da-proc-step:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent} .da-site .da-proc-num{position:relative;display:flex;align-items:center;justify-content:space-between; font-family:'Poppins';font-weight:800;font-size:2.6rem;line-height:1;color:var(--mist);margin-bottom:14px} .da-site .da-proc-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red)} .da-site .da-proc-ic svg{width:24px;height:24px} .da-site .da-proc-step h3{font-size:1.12rem;margin-bottom:8px} .da-site .da-proc-step p{color:var(--slate-2);font-size:.94rem;margin:0} /* ============================ SERVIZI: settori serviti ============================ */ .da-site .da-sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .da-site .da-sector{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:20px 22px;transition:.35s var(--ease)} .da-site .da-sector:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:transparent} .da-site .da-sector-ic{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red)} .da-site .da-sector-ic svg{width:24px;height:24px} .da-site .da-sector b{display:block;font-family:'Poppins';font-weight:600;color:var(--ink);font-size:1.02rem} .da-site .da-sector small{color:var(--slate-2);font-size:.88rem} /* ============================ SERVIZI: FAQ accordion ============================ */ .da-site .da-acc{max-width:820px;margin-left:auto;margin-right:auto} .da-site .da-acc-item{background:#fff;border:1px solid var(--line);border-radius:var(--r); margin-bottom:14px;overflow:hidden;transition:box-shadow .3s,border-color .3s} .da-site .da-acc-item.da-open{box-shadow:var(--sh-md);border-color:transparent} .da-site .da-acc-h{margin:0;font:inherit;font-weight:inherit} .da-site .da-acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px; padding:22px 26px;background:none;border:0;cursor:pointer;text-align:left;font-family:'Poppins'; font-weight:600;font-size:1.05rem;color:var(--ink)} .da-site .da-acc-icn{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red);transition:transform .35s var(--ease),background .3s} .da-site .da-acc-icn svg{width:18px;height:18px} .da-site .da-acc-item.da-open .da-acc-icn{transform:rotate(135deg);background:var(--grad-red);color:#fff} .da-site .da-acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .da-site .da-acc-item.da-open .da-acc-a{max-height:420px} .da-site .da-acc-a p{margin:0;padding:0 26px 24px;color:var(--slate-2);font-size:.97rem;line-height:1.7} /* ============================ AZIENDA: timeline ============================ */ .da-site .da-tl{position:relative;max-width:760px;margin:0 auto;padding-left:8px} .da-site .da-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px; background:linear-gradient(var(--red),var(--line))} .da-site .da-tl-item{position:relative;padding:0 0 34px 40px} .da-site .da-tl-item:last-child{padding-bottom:0} .da-site .da-tl-dot{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%; background:var(--red);box-shadow:0 0 0 5px rgba(209,24,39,.14)} .da-site .da-tl-year{display:inline-block;font-family:'Poppins';font-weight:700;font-size:.82rem; color:var(--red);letter-spacing:.04em;margin-bottom:6px} .da-site .da-tl-item h3{font-size:1.18rem;margin-bottom:8px} .da-site .da-tl-item p{color:var(--slate-2);font-size:.96rem;margin:0} /* ============================ CONTATTI: form + info ============================ */ .da-site .da-info-stack{display:grid;gap:16px} .da-site .da-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(26px,4vw,40px);box-shadow:var(--sh-md)} .da-site .da-form-card h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:8px} .da-site .da-form-card>p{color:var(--slate-2);margin-bottom:26px} .da-site .da-consent{display:flex;gap:12px;align-items:flex-start} .da-site .da-consent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--red)} .da-site .da-consent label{font-size:.85rem;color:var(--slate-2);line-height:1.55} .da-site .da-consent a{color:var(--red);text-decoration:underline} .da-site .da-form-ok{display:none;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r); background:#e7f6ee;color:#1e7a45;font-size:.92rem} .da-site .da-form-ok svg{flex:none;width:24px;height:24px;margin-top:1px} .da-site .da-form-ok small{display:block;opacity:.85;margin-top:3px} /* ============================ CONTATTI: sedi ============================ */ .da-site .da-sedi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} .da-site .da-sede-card{padding-top:44px} .da-site .da-sede-tag{position:absolute;top:22px;right:26px;font-family:'Poppins';font-weight:600; font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--red); background:linear-gradient(135deg,#fff0f1,#ffe1e3);padding:5px 12px;border-radius:var(--r-pill)} .da-site .da-sede-card h3{font-size:1.3rem;margin-bottom:20px} .da-site .da-detail-list{display:grid;gap:16px;margin-bottom:24px} .da-site .da-detail{display:flex;gap:14px;align-items:flex-start} .da-site .da-detail-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,#fff0f1,#ffe1e3);color:var(--red)} .da-site .da-detail-ic svg{width:20px;height:20px} .da-site .da-detail b{display:block;font-family:'Poppins';font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:2px} .da-site .da-detail p,.da-site .da-detail a{color:var(--slate-2);font-size:.94rem;margin:0} .da-site .da-detail a:hover{color:var(--red)} /* ============================ CONTATTI: mappa (iframe) ============================ */ .da-site .da-map-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--line);line-height:0} .da-site .da-map-frame iframe{width:100%;height:clamp(300px,42vw,440px);border:0;display:block} /* Messaggio di errore del form (variante rossa di .da-form-ok) */ .da-site .da-form-err{background:#fdecec;color:var(--red-700)} .da-site .da-form-err a{color:inherit;text-decoration:underline} /* ============================ CONTATTI: mappa Italia (SVG) ============================ */ .da-site .da-mapcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:26px;box-shadow:var(--sh-md);position:relative} .da-site .da-italy{display:block;width:100%;height:auto;max-height:520px;margin:0 auto} .da-site .da-reg{fill:#DBE1E7;stroke:#fff;stroke-width:2;transition:fill .3s} .da-site .da-reg-on{fill:url(#daHiGrad)} /* Mappa rete distributiva: grigio chiaro di default, rosso al passaggio (solo hover, non cliccabile) */ .da-site .da-reg-link{cursor:default;outline:none} .da-site .da-reg-link:hover .da-reg, .da-site .da-reg-link:focus-visible .da-reg{fill:url(#daHiGrad)} .da-site .da-reg-link:focus-visible .da-reg{stroke:var(--charcoal);stroke-width:2.5} .da-site .da-map-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none; transform:translate(-50%,calc(-100% - 12px));background:var(--charcoal);color:#fff; font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.01em; padding:6px 13px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .15s ease; box-shadow:0 8px 20px rgba(0,0,0,.18)} .da-site .da-map-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--charcoal)} .da-site .da-map-tip.is-on{opacity:1} .da-site .da-map-hint{color:var(--slate-2);font-size:.86rem} .da-site .da-reg-label{fill:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:20px; text-anchor:middle;pointer-events:none} .da-site .da-isl circle{fill:var(--red)} .da-site .da-isl-label{fill:var(--slate);font-family:'Inter',sans-serif;font-size:17px;font-weight:600} .da-site .da-hq-pin{fill:var(--charcoal)} .da-site .da-hq-dot{fill:#fff} .da-site .da-hq-ping{fill:var(--red);opacity:.35;transform-box:fill-box;transform-origin:center; animation:da-ping 2.6s var(--ease) infinite} .da-site .da-hq-ping2{animation-delay:1.3s} .da-site .da-hq-label{fill:var(--ink);font-family:'Poppins',sans-serif;font-weight:700;font-size:20px} .da-site .da-hq-sub{fill:var(--slate-2);font-family:'Inter',sans-serif;font-size:16px} @keyframes da-ping{0%{transform:scale(.35);opacity:.5}80%,100%{transform:scale(2.4);opacity:0}} .da-site .da-maplegend{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;padding-top:18px; border-top:1px solid var(--line)} .da-site .da-maplegend span{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--slate-2)} .da-site .da-lgd-dot{width:14px;height:14px;border-radius:4px;display:inline-block} .da-site .da-lgd-hi{background:var(--grad-red)} .da-site .da-lgd-base{background:var(--mist);border:1px solid var(--line)} .da-site .da-lgd-pin{width:12px;height:12px;border-radius:50%;background:var(--charcoal);display:inline-block; box-shadow:0 0 0 4px rgba(209,24,39,.2)} /* ============================ NEWS: chips / filtri ============================ */ .da-site .da-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px} .da-site .da-chip{font-family:'Poppins';font-weight:500;font-size:.88rem;padding:9px 20px;border-radius:var(--r-pill); border:1.5px solid var(--line);background:#fff;color:var(--slate);cursor:pointer;transition:.25s var(--ease)} .da-site .da-chip:hover{border-color:var(--red);color:var(--red)} .da-site .da-chip.da-on{background:var(--grad-red);color:#fff;border-color:transparent;box-shadow:var(--sh-red)} /* ============================ NEWS: card articoli ============================ */ .da-site .da-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .da-site .da-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s} .da-site .da-post:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:transparent} .da-site .da-post-img{position:relative;aspect-ratio:3/2;overflow:hidden} .da-site .da-post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .da-site .da-post:hover .da-post-img img{transform:scale(1.08)} .da-site .da-cat-badge{position:absolute;top:14px;left:14px;z-index:2;font-family:'Poppins';font-weight:600; font-size:.72rem;letter-spacing:.03em;color:#fff;background:var(--grad-red);padding:5px 12px; border-radius:var(--r-pill);box-shadow:var(--sh-sm)} .da-site .da-post-body{display:flex;flex-direction:column;flex:1;padding:24px} .da-site .da-post-date{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--slate-2); font-weight:500;margin-bottom:12px} .da-site .da-post-date svg{width:16px;height:16px;color:var(--red)} .da-site .da-post-body h3{font-size:1.18rem;line-height:1.3;margin-bottom:10px} .da-site .da-post-body>p{color:var(--slate-2);font-size:.94rem;margin-bottom:18px} .da-site .da-post-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto; padding-top:16px;border-top:1px solid var(--line)} .da-site .da-post-meta{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--slate-2)} .da-site .da-post-meta b{color:var(--ink);font-family:'Poppins';font-weight:600;font-size:.82rem} .da-site .da-dot{width:4px;height:4px;border-radius:50%;background:var(--silver);display:inline-block} .da-site .da-post-read{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins';font-weight:600; font-size:.85rem;color:var(--red);transition:gap .25s var(--ease)} .da-site .da-post-read svg{width:16px;height:16px} .da-site .da-post-read:hover{gap:10px} /* News: articolo in evidenza */ .da-site .da-feat-media{aspect-ratio:16/10} .da-site .da-feat-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600; font-size:.78rem;color:var(--red);background:linear-gradient(135deg,#fff0f1,#ffe1e3);padding:7px 15px; border-radius:var(--r-pill);margin-bottom:16px} .da-site .da-feat-tag svg{width:16px;height:16px} .da-site .da-read-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin:20px 0 24px} .da-site .da-avatar{display:flex;align-items:center;gap:12px} .da-site .da-avatar-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--grad-dark);color:#fff;font-family:'Poppins';font-weight:700;font-size:.85rem;flex:none} .da-site .da-avatar b{display:block;font-family:'Poppins';font-weight:600;color:var(--ink);font-size:.92rem} .da-site .da-avatar span{font-size:.82rem;color:var(--slate-2)} /* News: paginazione */ .da-site .da-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:52px} .da-site .da-pager a{min-width:44px;height:44px;padding:0 6px;display:inline-flex;align-items:center; justify-content:center;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--slate); font-family:'Poppins';font-weight:600;font-size:.9rem;transition:.25s var(--ease)} .da-site .da-pager a:hover{border-color:var(--red);color:var(--red)} .da-site .da-pager a.da-on{background:var(--grad-red);color:#fff;border-color:transparent} .da-site .da-pager a svg{width:18px;height:18px} /* News: newsletter (dentro .da-cta) */ .da-site .da-news-form{display:flex;gap:12px;max-width:520px;margin:24px auto 0;flex-wrap:wrap} .da-site .da-news-form input{flex:1;min-width:220px;padding:15px 20px;border:0;border-radius:var(--r-pill); font-size:1rem;color:var(--ink);background:#fff} .da-site .da-news-form input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.35)} .da-site .da-news-ok{display:none;align-items:center;justify-content:center;gap:10px;max-width:520px; margin:18px auto 0;padding:12px 18px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:#fff;font-size:.92rem} .da-site .da-news-ok svg{width:20px;height:20px;flex:none} .da-site .da-news-note{font-size:.8rem;color:rgba(255,255,255,.75);margin:16px 0 0} /* ============================ RESPONSIVE (pagine interne) ============================ */ @media(max-width:980px){ .da-site .da-grid-3,.da-site .da-grid-4{grid-template-columns:repeat(2,1fr)} .da-site .da-grid-2-3,.da-site .da-grid-3-2{grid-template-columns:repeat(2,1fr)} .da-site .da-adv{flex-basis:calc((100% - 24px)/2)} .da-site .da-grid-2-3>:nth-child(-n+2),.da-site .da-grid-2-3>:nth-child(n+3), .da-site .da-grid-3-2>:nth-child(-n+3),.da-site .da-grid-3-2>:nth-child(n+4){grid-column:auto} .da-site .da-feat3{grid-template-columns:1fr} .da-site .da-proc{grid-template-columns:repeat(2,1fr)} .da-site .da-sectors{grid-template-columns:repeat(2,1fr)} .da-site .da-sedi-grid{grid-template-columns:1fr} .da-site .da-posts{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .da-site .da-grid-2,.da-site .da-grid-3,.da-site .da-grid-4,.da-site .da-grid-2-3,.da-site .da-grid-3-2{grid-template-columns:1fr} .da-site .da-adv{flex-basis:100%} .da-site .da-card-feat{grid-column:auto} .da-site .da-proc,.da-site .da-sectors,.da-site .da-posts{grid-template-columns:1fr} .da-site .da-read-meta{flex-direction:column;align-items:flex-start;gap:10px} .da-site .da-news-form{flex-direction:column} .da-site .da-news-form input{min-width:0} .da-site .da-news-form .da-btn{justify-content:center} } /* ============================================================ DETTAGLIO ARTICOLO (articolo.html) ============================================================ */ .da-site .da-art-hero{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff; padding:clamp(118px,16vw,168px) 0 clamp(96px,13vw,150px)} .da-site .da-art-hero-inner{position:relative;z-index:2;max-width:840px} .da-site .da-art-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600; font-size:.76rem;letter-spacing:.03em;color:#fff;background:var(--grad-red);padding:7px 15px; border-radius:var(--r-pill);margin-bottom:20px} .da-site .da-art-title{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px} .da-site .da-art-lead{color:rgba(255,255,255,.82);font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.6; max-width:680px;margin-bottom:28px} .da-site .da-art-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .da-site .da-art-meta .da-avatar b{color:#fff} .da-site .da-art-meta .da-avatar span{color:rgba(255,255,255,.6)} .da-site .da-art-metaitem{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:rgba(255,255,255,.78)} .da-site .da-art-metaitem svg{width:17px;height:17px;color:#ff8a92} .da-site .da-art-cover{max-width:980px;margin:clamp(-72px,-8vw,-112px) auto 0;position:relative;z-index:3; padding:0 clamp(20px,5vw,40px)} .da-site .da-art-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg); box-shadow:var(--sh-lg);border:5px solid #fff} .da-site .da-art-cover figcaption{width:fit-content;max-width:100%;margin:14px auto 0;font-size:.84rem; font-weight:500;color:var(--slate);background:rgba(209,24,39,.06);border:1px solid rgba(209,24,39,.16); border-radius:var(--r-pill);padding:7px 18px;text-align:center} .da-site .da-art-cover figcaption::before{content:"";display:inline-block;vertical-align:middle;width:5px; height:5px;border-radius:50%;background:var(--red);margin-right:9px;margin-top:-2px} .da-site .da-art-wrap{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,64px) 0 clamp(20px,4vw,40px)} .da-site .da-art-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px} .da-site .da-tagchip{font-family:'Poppins';font-weight:500;font-size:.8rem;color:var(--slate); background:var(--mist);padding:6px 14px;border-radius:var(--r-pill)} /* Tipografia contenuto */ .da-site .da-prose{color:var(--slate);font-size:1.08rem;line-height:1.8} .da-site .da-prose p{margin:0 0 1.15em} .da-site .da-prose h2{font-family:'Poppins';color:var(--ink);font-size:1.6rem;line-height:1.25; margin:1.7em 0 .5em;letter-spacing:-.01em} .da-site .da-prose h3{font-family:'Poppins';color:var(--ink);font-size:1.25rem;margin:1.5em 0 .4em} .da-site .da-prose ul,.da-site .da-prose ol{padding-left:1.4em;margin:0 0 1.2em} .da-site .da-prose li{margin-bottom:.55em} .da-site .da-prose li::marker{color:var(--red)} .da-site .da-prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px} .da-site .da-prose strong{color:var(--ink);font-weight:700} .da-site .da-prose blockquote{margin:1.5em 0;padding:6px 0 6px 24px;border-left:3px solid var(--red); font-size:1.15rem;line-height:1.6;color:var(--ink);font-style:italic} .da-site .da-prose img{border-radius:var(--r);margin:1.4em 0;box-shadow:var(--sh-sm)} .da-site .da-prose figure{margin:1.5em 0} .da-site .da-prose figure figcaption{width:fit-content;max-width:100%;margin:12px auto 0;font-size:.84rem; font-weight:500;color:var(--slate);text-align:left;padding-left:14px;border-left:3px solid var(--red)} /* Condivisione */ .da-site .da-art-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:clamp(32px,5vw,48px) 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .da-site .da-art-share b{font-family:'Poppins';font-weight:600;font-size:.9rem;color:var(--ink);margin-right:4px} .da-site .da-art-share a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; border:1px solid var(--line);color:var(--slate);transition:.25s var(--ease)} .da-site .da-art-share a:hover{background:var(--grad-red);color:#fff;border-color:transparent;transform:translateY(-3px)} .da-site .da-art-share a svg{width:18px;height:18px} /* Box autore */ .da-site .da-authorbox{display:flex;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-lg);padding:24px;margin-top:clamp(30px,5vw,44px)} .da-site .da-authorbox .da-avatar-ic{width:58px;height:58px;font-size:1.05rem} .da-site .da-authorbox b{display:block;font-family:'Poppins';font-weight:600;color:var(--ink);font-size:1.05rem} .da-site .da-authorbox p{margin:4px 0 0;font-size:.92rem;color:var(--slate-2);line-height:1.6} .da-site .da-art-back{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(30px,5vw,44px); font-family:'Poppins';font-weight:600;font-size:.92rem;color:var(--red)} .da-site .da-art-back svg{width:18px;height:18px;transition:transform .25s var(--ease)} .da-site .da-art-back:hover svg{transform:translateX(-4px)} @media(max-width:600px){ .da-site .da-art-cover img{aspect-ratio:4/3;border-width:4px} .da-site .da-authorbox{flex-direction:column;text-align:center} }