/* ========================================================================== Sebyone Lab — design system condiviso (palette-colori.pdf) Usato dai micrositi PoC in lab (una cartella per PoC) e dall'hub lab/index.html. Ogni pagina imposta il settore con per cambiare l'accento cromatico. ========================================================================== */ :root{ /* Brand */ --primary:#0B6FB8; --bright:#048ADD; --orange:#F07011; --teal:#22B8D6; --yellow:#C68A00; --navy:#04304E; /* Scala blu */ --blue-50:#E7F2FA; --blue-600:#0A63A4; --blue-700:#095890; --blue-800:#074B78; --blue-900:#04304E; /* Stato */ --st-online:#0B6FB8; --st-maint:#048ADD; --st-draft:#F07011; --st-error:#FF3B30; /* Neutri iOS */ --label:#1C1C1E; --secondary:#6B7280; --gray1:#8E8E93; --gray4:#D1D1D6; --gray5:#E5E5EA; --gray6:#F2F2F7; /* Colori settore uniformi (fonte unica) */ --sec-energia:#F07011; --sec-energia-soft:#FBEDE0; --sec-industria:#04304E; --sec-industria-soft:#E7F2FA; --sec-sanita:#22B8D6; --sec-sanita-soft:#E4F7FB; --sec-ambiente:#0A7D5A; --sec-ambiente-soft:#E4F5EF; /* Accento di settore (default = brand) */ --accent:var(--primary); --accent-2:var(--bright); --accent-soft:var(--blue-50); --grad:linear-gradient(135deg,var(--accent-2),var(--accent)); --grad-deep:linear-gradient(135deg,var(--accent),var(--navy)); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"SFMono-Regular",ui-monospace,"Cascadia Code","Consolas",monospace; --maxw:1120px; --r:16px; --shadow:0 1px 3px rgba(4,48,78,.08),0 8px 28px rgba(4,48,78,.06); --shadow-lg:0 12px 40px rgba(4,48,78,.14); } /* Accenti per settore — colori uniformi: Energia=arancione, Industria=blu navy, Sanità=celeste, Ambiente=verde */ [data-sector="energia"] {--accent:#F07011;--accent-2:#F07011;--accent-soft:#FBEDE0} [data-sector="industria"]{--accent:#04304E;--accent-2:#0B6FB8;--accent-soft:#E7F2FA} [data-sector="sanita"] {--accent:#22B8D6;--accent-2:#22B8D6;--accent-soft:#E4F7FB} [data-sector="ambiente"] {--accent:#0A7D5A;--accent-2:#22B8D6;--accent-soft:#E4F5EF} [data-sector="strategico"]{--accent:#074B78;--accent-2:#048ADD;--accent-soft:#E7F2FA} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:76px} body{font-family:var(--font);color:var(--label);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} section{padding:88px 0} h1,h2,h3{line-height:1.15;letter-spacing:-.02em;color:var(--navy)} h2{font-size:clamp(28px,4vw,40px);font-weight:800} h3{font-size:20px;font-weight:700} .eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)} .lead{font-size:clamp(17px,2vw,20px);color:var(--secondary);max-width:64ch} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} /* Header */ header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--gray5)} .nav{display:flex;align-items:center;gap:28px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--navy);letter-spacing:-.02em} .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--accent-soft)} .brand sup{color:var(--orange);font-size:.6em;font-weight:700} .nav-links{display:flex;gap:22px;margin-left:auto;align-items:center} .nav-links a{font-size:14.5px;font-weight:600;color:var(--navy);opacity:.82} .nav-links a:hover{opacity:1;color:var(--accent)} .nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff !important;padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(11,111,184,.28);opacity:1 !important} .nav-cta:hover{filter:brightness(1.05)} .burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;color:var(--navy)} .burger svg{width:26px;height:26px} .back-lab{font-size:13px;font-weight:600;color:var(--secondary)} .back-lab:hover{color:var(--accent)} .preview-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--st-draft);padding:3px 10px;border-radius:999px} .sector-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:999px} /* Hero */ .hero{position:relative;background:var(--grad-deep);color:#fff;overflow:hidden;padding:108px 0 92px} .hero:before{content:"";position:absolute;inset:0;background: radial-gradient(600px 300px at 82% 8%,rgba(255,255,255,.16),transparent 60%), radial-gradient(500px 260px at 8% 92%,rgba(255,255,255,.12),transparent 60%)} .hero .wrap{position:relative;z-index:1} .hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .hero .sector-badge{background:rgba(255,255,255,.15);color:#fff} .hero h1{color:#fff;font-size:clamp(34px,5.5vw,58px);font-weight:800;max-width:16ch} .hero .tagline{margin-top:12px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)} .hero .sub{margin-top:20px;font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.85);max-width:58ch} .hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;transition:.15s;cursor:pointer} .btn-primary{background:#fff;color:var(--navy)} .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.12)} .hero-stats{margin-top:50px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:820px} .hero-stats .s .n{font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;line-height:1} .hero-stats .s .l{font-size:13px;color:rgba(255,255,255,.72);margin-top:6px} /* Grids & cards */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border:1px solid var(--gray5);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);transition:.18s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft)} .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:16px} .card .ic svg{width:24px;height:24px} .card h3{color:var(--navy);margin-bottom:8px} .card p{font-size:15px;color:var(--secondary)} .tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:6px;background:var(--accent-soft);color:var(--accent)} .alt{background:var(--gray6)} .dark{background:var(--navy);color:#fff} .dark h2,.dark h3{color:#fff}.dark .lead{color:rgba(255,255,255,.75)}.dark .eyebrow{color:var(--accent-2)} /* split */ .split{display:grid;grid-template-columns:repeat(2,1fr);gap:44px;align-items:center} .pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--gray4);font-size:13.5px;font-weight:600;color:var(--navy)} .pill svg{width:16px;height:16px;color:var(--accent-2)} /* device / feature list */ .dev-grid{margin-top:26px} .dev{background:#fff;border:1px solid var(--gray5);border-radius:14px;padding:20px} .dev .code{font-family:var(--mono);font-weight:700;color:var(--accent);font-size:14px} .dev .nm{font-weight:700;color:var(--navy);margin:2px 0 8px} .dev p{font-size:13.5px;color:var(--secondary)} /* steps (flow) */ .steps{counter-reset:s;display:grid;gap:18px;margin-top:36px} .steps.cols{grid-template-columns:repeat(4,1fr)} .step{position:relative;background:#fff;border:1px solid var(--gray5);border-radius:14px;padding:22px 20px} .step .n{font-family:var(--mono);font-weight:700;color:var(--accent);font-size:13px} .step h3{font-size:16px;margin:6px 0 6px} .step p{font-size:13.5px;color:var(--secondary)} /* app/use-case */ .app{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--gray5)} .app .ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--navy);color:var(--accent-2)} .app .ic svg{width:22px;height:22px} .app h3{font-size:16px}.app p{font-size:13.5px;color:var(--secondary);margin-top:3px} /* contact */ .contact{background:var(--grad-deep);color:#fff;text-align:center} .contact h2{color:#fff}.contact .lead{color:rgba(255,255,255,.8);margin:14px auto 0} .addr{margin-top:32px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.82)} .addr b{color:#fff;display:block;margin-bottom:4px} /* footer */ footer{background:#071f30;color:rgba(255,255,255,.6);padding:34px 0;font-size:13.5px} footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px} footer a{color:rgba(255,255,255,.8)}footer a:hover{color:#fff} /* Badge settore pieni (navbar) — colore pieno del settore, testo bianco */ .nav-sec{display:inline-flex;align-items:center;font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff !important;padding:6px 14px;border-radius:999px;line-height:1;opacity:1 !important;transition:.15s} .nav-sec:hover{filter:brightness(1.08);transform:translateY(-1px)} .nav-sec.energia{background:var(--sec-energia)} .nav-sec.industria{background:var(--sec-industria)} .nav-sec.sanita{background:var(--sec-sanita)} .nav-sec.ambiente{background:var(--sec-ambiente)} @media(max-width:900px){ .g4{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr} .steps.cols{grid-template-columns:repeat(2,1fr)} .hero-stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--gray5);padding:16px 24px;gap:16px;align-items:flex-start} .nav-links.open{display:flex} .burger{display:block} .g2,.g3,.g4{grid-template-columns:1fr} .steps.cols{grid-template-columns:1fr} .hero-stats{grid-template-columns:repeat(2,1fr)} section{padding:64px 0} .addr{gap:20px} }