/* ========================================================= LifePassport — shared stylesheet (restyle 2026) ========================================================= */ :root{ --orange:#F39200; --amber:#F9B233; --red:#E4451F; --red-dark:#C6381A; --grad:linear-gradient(135deg,#F9B233 0%,#F39200 45%,#E4451F 100%); --grad-soft:linear-gradient(135deg,#fff4e3 0%,#ffe9d6 55%,#ffe0d8 100%); --ink:#211d1a; --muted:#6d655d; --line:#efe7dd; --bg:#ffffff; --bg-warm:#fffaf4; --shadow-sm:0 2px 8px rgba(196,56,26,.06); --shadow-md:0 18px 40px -18px rgba(196,56,26,.28); --radius:20px; --maxw:1180px; --font-head:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-head)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px} /* language block visibility (driven by ) */ html[data-lang="it"] .lang-en{display:none !important} html[data-lang="en"] .lang-it{display:none !important} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;font-family:var(--font-head);font-weight:600;font-size:.9rem;letter-spacing:.02em;padding:14px 26px;border-radius:999px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap} .btn svg{width:18px;height:18px} .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-md)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(196,56,26,.45)} .btn-ghost{background:#fff;color:var(--red);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--orange);color:var(--red-dark);transform:translateY(-2px)} .btn-white{background:#fff;color:var(--red)} .btn-white:hover{transform:translateY(-2px)} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px} .brand{display:flex;align-items:center} .brand img{height:32px;width:auto} .nav-links{display:flex;align-items:center;gap:6px;list-style:none} .nav-links a{font-family:var(--font-head);font-weight:500;font-size:.92rem;color:#4a443e;padding:9px 13px;border-radius:10px;transition:color .15s,background .15s} .nav-links a:hover,.nav-links a.active{color:var(--red);background:var(--bg-warm)} .nav-right{display:flex;align-items:center;gap:14px} .lang{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff} .lang button{border:none;background:transparent;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.04em;padding:8px 14px;color:var(--muted);transition:.15s} .lang button.active{background:var(--grad);color:#fff} .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px} .burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s} /* ---------- Hero (home) ---------- */ .hero{position:relative;overflow:hidden;background:var(--grad-soft)} .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,rgba(255,255,255,.55),transparent 60%);pointer-events:none} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:74px 0 84px} .hero h1{font-weight:800;font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.02;letter-spacing:-.015em;text-transform:uppercase} .hero h1 .amber{color:var(--orange)} .hero h1 .red{color:var(--red)} .hero-lead{margin:22px 0 12px;font-size:1.18rem;font-weight:500;color:#3f3833;max-width:34ch} .hero-body{color:var(--muted);max-width:44ch;margin-bottom:30px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .stage{position:relative;height:420px;display:flex;align-items:center;justify-content:center} .halo{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(249,178,51,.25) 55%,transparent 72%)} .card{position:relative;z-index:3;width:300px;border-radius:18px;padding:20px;color:#fff;background:var(--grad);box-shadow:0 30px 60px -20px rgba(196,56,26,.55);transform:rotate(-6deg)} .card .cardtop{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;letter-spacing:.02em} .card .cardtop svg{width:26px;height:26px} .card .label{margin-top:22px;font-size:.7rem;letter-spacing:.18em;opacity:.9} .card .code{margin-top:6px;font-family:var(--font-head);font-weight:700;font-size:1.5rem;letter-spacing:.06em;background:rgba(255,255,255,.18);border-radius:8px;padding:8px 12px;display:inline-block} .card .url{margin-top:16px;font-size:.72rem;letter-spacing:.05em;opacity:.85} .icn{position:absolute;z-index:4;width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);animation:float 6s ease-in-out infinite} .icn svg{width:28px;height:28px;color:var(--red)} .icn.i1{top:6%;left:12%;animation-delay:0s} .icn.i2{top:0;right:20%;animation-delay:.8s} .icn.i3{top:40%;right:2%;animation-delay:1.6s} .icn.i4{bottom:8%;right:16%;animation-delay:2.2s} .icn.i5{bottom:2%;left:16%;animation-delay:1.1s} .icn.i6{top:44%;left:0;animation-delay:1.9s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* ---------- Page hero (inner pages) ---------- */ .page-hero{position:relative;overflow:hidden;background:var(--grad-soft);padding:64px 0 56px} .page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 90% 10%,rgba(255,255,255,.5),transparent 60%);pointer-events:none} .page-hero .wrap{position:relative;z-index:1} .page-hero h1{font-weight:800;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.05;letter-spacing:-.015em;max-width:20ch} .page-hero p{margin-top:16px;color:#4a423b;font-size:1.1rem;max-width:60ch} /* ---------- Generic block ---------- */ section.block{padding:80px 0} .block.warm{background:var(--bg-warm)} .lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start} .lead-grid h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;line-height:1.1;letter-spacing:-.01em} .lead-grid h2 em{font-style:normal;color:var(--red)} .lead-grid p{color:var(--muted);margin-top:16px;font-size:1.04rem} .lead-grid .cta-row{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap} /* ---------- Prose (long-form content) ---------- */ .prose{max-width:820px} .prose.wide{max-width:960px} .prose h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:48px 0 4px} .prose h2:first-child{margin-top:0} .prose h2 .kicker{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:10px} .prose h3{font-size:1.2rem;font-weight:600;margin:30px 0 4px;color:var(--red-dark)} .prose p{color:#463f39;margin-top:14px;font-size:1.03rem} .prose ul{margin:16px 0 0;padding-left:0;list-style:none;display:grid;gap:12px} .prose ul li{position:relative;padding-left:32px;color:#463f39} .prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;border-radius:50%;background:var(--grad)} .prose strong{color:var(--ink)} .prose .divider{height:1px;background:var(--line);margin:56px 0;border:0} /* callout box */ .callout{background:var(--bg-warm);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:14px;padding:22px 24px;margin-top:22px} .callout p{margin-top:0} /* ---------- Action cards ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .cards.four{grid-template-columns:repeat(4,1fr)} .acard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden;display:block} .acard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s ease} .acard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent} .acard:hover::before{transform:scaleX(1)} .acard .ico{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);margin-bottom:20px} .acard .ico svg{width:28px;height:28px;color:var(--red)} .acard h3{font-size:1.1rem;font-weight:600;margin-bottom:10px;color:var(--ink)} .acard p{color:var(--muted);font-size:.96rem} .acard .go{margin-top:18px;display:inline-flex;align-items:center;gap:7px;color:var(--red);font-family:var(--font-head);font-weight:600;font-size:.9rem} .acard .go svg{width:16px;height:16px;transition:transform .2s} .acard:hover .go svg{transform:translateX(4px)} /* ---------- Info / contact cards (chi siamo) ---------- */ .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px} .info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)} .info-card .ico{width:52px;height:52px;border-radius:14px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .info-card .ico svg{width:26px;height:26px;color:var(--red)} .info-card h3{font-size:1.15rem;font-weight:600;margin-bottom:12px} .info-card p{color:var(--muted);margin-top:6px} .info-card address{font-style:normal;color:#463f39;line-height:1.8} .info-card a{color:var(--red);font-weight:500} .info-card a:hover{text-decoration:underline} /* ---------- Legal columns ---------- */ .legal-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .legal-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)} .legal-card h3{font-size:1.05rem;font-weight:600;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)} .legal-card a{display:flex;align-items:center;gap:10px;color:#463f39;padding:10px 0;font-size:.98rem;transition:color .15s} .legal-card a svg{width:16px;height:16px;color:var(--orange);flex:none} .legal-card a:hover{color:var(--red)} /* ---------- Feature list (security) ---------- */ .feature{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;padding:26px 0;border-top:1px solid var(--line)} .feature:first-of-type{border-top:0} .feature .ico{width:64px;height:64px;border-radius:16px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center} .feature .ico svg{width:30px;height:30px;color:var(--red)} .feature h3{font-size:1.2rem;font-weight:600;margin-bottom:8px} .feature p{color:#463f39} /* ---------- CTA band ---------- */ .band{background:var(--grad);color:#fff;border-radius:28px;padding:56px 48px;text-align:center;box-shadow:var(--shadow-md);position:relative;overflow:hidden} .band::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 100% 0,rgba(255,255,255,.22),transparent 60%)} .band h2{position:relative;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700} .band p{position:relative;margin:14px auto 28px;max-width:52ch;opacity:.95} .band .btn{position:relative} /* ---------- Footer ---------- */ footer{background:#211d1a;color:#cfc7bf;padding:56px 0 30px} footer .brand img{height:30px;filter:brightness(0) invert(1) sepia(0)} .foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid #3a332d} .foot-tag{max-width:34ch;color:#9c938a;font-size:.94rem;margin-top:14px} .foot-cols{display:flex;gap:60px;flex-wrap:wrap} .foot-cols h4{font-family:var(--font-head);color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px} .foot-cols a{display:block;color:#b7aea5;font-size:.94rem;padding:5px 0;transition:color .15s} .foot-cols a:hover{color:var(--amber)} .foot-bottom{padding-top:22px;font-size:.85rem;color:#8f867d;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* ---------- Responsive ---------- */ @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;padding:54px 0 60px} .stage{height:360px;order:-1} .lead-grid{grid-template-columns:1fr;gap:28px} .cards,.cards.four{grid-template-columns:1fr} .info-grid{grid-template-columns:1fr} .legal-cols{grid-template-columns:1fr} .nav-links,.nav-right .btn.desktop{display:none} .burger{display:flex} .nav-links.open{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:14px 24px 22px;gap:4px;box-shadow:var(--shadow-md)} .nav-links.open a{padding:12px 10px;border-radius:10px} } @media(max-width:520px){ .band{padding:40px 24px} section.block{padding:56px 0} .feature{grid-template-columns:1fr} }