/* ============================================================================= home-sue.css — nuova home SUE (intestazione bianca, fascia blu, Novità) Caricato per ultimo in SUE_MAIN.aspx. Tutte le classi hanno prefisso nh- perche' la pagina carica anche ICONE.css, Sue.css, sue-login.css, style.css e Page.css, che definiscono classi generiche (.logo, .button_home, body.all): il prefisso evita collisioni. ATTENZIONE: la classe .nh-page va SOLO sul div che racchiude il markup della home nuova, MAI sul . Sotto c'e' un reset box-sizing:border-box su tutti i discendenti: ExtJS 3.4 assume content-box, e con la classe sul body si rompono larghezze e altezze di finestra di login, griglie del desktop e combo (margini sbagliati a destra e in basso su ogni schermata). #docbody e #intesta, dove ExtJS disegna, devono restare fuori da .nh-page. ============================================================================= */ /* Le variabili stanno su :root e non su .nh-page perche' il pannello di dettaglio (.nh-vis) e' fuori dal contenitore della home: dentro .nh-page non arriverebbero e colori e font si perderebbero. Le custom property non hanno alcun effetto su ExtJS, quindi tenerle globali e' innocuo. */ :root{ --nh-blu-900:#0A2E4F; --nh-blu-800:#0B3D6B; --nh-blu-700:#0E5AA7; --nh-blu-500:#0E8EE9; --nh-blu-100:#E6F1FB; --nh-blu-050:#F4F9FE; --nh-ar-600:#E86F2A; --nh-ar-500:#FA8950; --nh-ar-100:#FEF0E7; --nh-gr-900:#1F2A33; --nh-gr-600:#5A6B7A; --nh-gr-300:#D7E1EA; --nh-r:14px; --nh-ombra:0 1px 2px rgba(11,61,107,.06),0 8px 24px rgba(11,61,107,.08); --nh-ombra-hi:0 2px 4px rgba(11,61,107,.08),0 14px 36px rgba(11,61,107,.16); --nh-font:"Open Sans",-apple-system,"Segoe UI",Roboto,sans-serif; } .nh-page{ font-family:var(--nh-font); color:var(--nh-gr-900); line-height:1.6; background:#fff; text-align:left; } .nh-page *{box-sizing:border-box} .nh-wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- intestazione ---------- */ .nh-head{background:#fff;border-bottom:1px solid var(--nh-gr-300)} .nh-head-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:20px 0} .nh-stemma{justify-self:start;line-height:0} .nh-stemma img{display:block;height:96px;width:auto;max-width:130px;object-fit:contain;border:0} .nh-firma{justify-self:end;line-height:0;opacity:.92} .nh-firma:hover{opacity:1} .nh-firma img{display:block;width:140px;height:auto;border:0} .nh-titolo{text-align:center} .nh-titolo .nh-sue{font-size:34px;font-weight:800;letter-spacing:.16em;line-height:1.1;margin:0;color:var(--nh-blu-800)} .nh-titolo .nh-ente{font-size:17px;font-weight:700;margin:2px 0 0;color:var(--nh-blu-700)} .nh-titolo .nh-claim{font-size:12.5px;margin:3px 0 0;color:var(--nh-gr-600)} /* ---------- fascia blu con i due accessi ---------- */ .nh-hero{background:linear-gradient(165deg,var(--nh-blu-900) 0%,var(--nh-blu-700) 100%); border-bottom:5px solid var(--nh-ar-500);padding:46px 0 52px;position:relative;overflow:hidden} .nh-hero:after{content:"";position:absolute;right:-90px;top:-120px;width:420px;height:420px; border-radius:50%;background:rgba(255,255,255,.045)} .nh-hero .nh-wrap{position:relative} .nh-hero h1{font-size:29px;line-height:1.25;margin:0 auto 10px;color:#fff;max-width:800px;text-align:center;font-weight:700} .nh-sub{margin:0 auto 30px;color:rgba(255,255,255,.8);max-width:740px;font-size:15.5px;text-align:center} .nh-accessi{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--nh-r);overflow:hidden; background:#fff;box-shadow:0 14px 40px rgba(4,20,36,.34);max-width:900px;margin:0 auto} .nh-accesso{padding:22px 24px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;cursor:pointer} .nh-accesso+.nh-accesso{border-left:2px solid var(--nh-gr-300)} .nh-accesso:hover{background:var(--nh-blu-050);text-decoration:none} .nh-kicker{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px} .nh-accesso-ext .nh-kicker{color:var(--nh-ar-600)} .nh-accesso-int .nh-kicker{color:var(--nh-blu-700)} .nh-accesso h2{font-size:18.5px;margin:0;line-height:1.3;color:var(--nh-blu-900);font-weight:700} .nh-accesso p{margin:0;font-size:13.5px;color:var(--nh-gr-600)} .nh-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700; font-size:15px;border-radius:10px;padding:11px 16px;border:2px solid transparent;letter-spacing:.02em} .nh-accesso-ext .nh-cta{background:var(--nh-ar-500);border-color:var(--nh-ar-500);color:#fff} .nh-accesso-ext:hover .nh-cta{background:var(--nh-ar-600);border-color:var(--nh-ar-600)} .nh-accesso-int .nh-cta{background:#fff;border-color:var(--nh-blu-700);color:var(--nh-blu-700)} .nh-accesso-int:hover .nh-cta{background:var(--nh-blu-700);color:#fff} .nh-cta svg{width:17px;height:17px} /* ---------- i tre tasti ---------- */ .nh-sez{padding:44px 0} .nh-sez-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;flex-wrap:wrap} .nh-sez-head h2{font-size:22px;margin:0;color:var(--nh-blu-900);font-weight:700} .nh-fil{display:inline-block;width:34px;height:4px;background:var(--nh-ar-500);border-radius:2px;vertical-align:middle;margin-right:11px} .nh-sez-head p{margin:0;color:var(--nh-gr-600);font-size:14px} .nh-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .nh-tile{display:flex;flex-direction:column;gap:9px;padding:22px;background:#fff;border:2px solid var(--nh-gr-300); border-radius:var(--nh-r);text-decoration:none;color:inherit;box-shadow:var(--nh-ombra);cursor:pointer} .nh-tile:hover{border-color:var(--nh-ar-500);box-shadow:var(--nh-ombra-hi);text-decoration:none} .nh-ico{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center; background:var(--nh-blu-100);color:var(--nh-blu-700)} .nh-tile:hover .nh-ico{background:var(--nh-ar-100);color:var(--nh-ar-600)} .nh-ico svg{width:25px;height:25px} .nh-tile h3{margin:0;font-size:16.5px;color:var(--nh-blu-900);line-height:1.3;font-weight:700} .nh-tile p{margin:0;font-size:13.5px;color:var(--nh-gr-600)} /* ---------- Novità ---------- */ .nh-novita{background:var(--nh-blu-050);border-top:1px solid var(--nh-gr-300);border-bottom:1px solid var(--nh-gr-300)} .nh-lista{display:flex;flex-direction:column;gap:22px} .nh-nov{background:#fff;border:1px solid var(--nh-gr-300);border-left:5px solid var(--nh-ar-500); border-radius:var(--nh-r);padding:22px 24px 24px;box-shadow:var(--nh-ombra)} .nh-nov.nh-t2{border-left-color:var(--nh-blu-500)} .nh-nov.nh-t3{border-left-color:#3F9C63} .nh-nov-meta{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap} .nh-data{font-size:12.5px;font-weight:700;color:var(--nh-gr-600)} .nh-tipo{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:999px} .nh-tipo1{background:var(--nh-ar-100);color:var(--nh-ar-600)} .nh-tipo2{background:var(--nh-blu-100);color:var(--nh-blu-700)} .nh-tipo3{background:#E7F3EC;color:#2F7A4C} .nh-nov h3{margin:0 0 6px;font-size:19px;color:var(--nh-blu-900);line-height:1.3;font-weight:700} .nh-nov h3 a{color:inherit;text-decoration:none} .nh-nov h3 a:hover{text-decoration:underline} .nh-testo{margin:0;font-size:14.5px;color:var(--nh-gr-600);max-width:900px} .nh-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px} .nh-shot{border-radius:10px;border:1px solid var(--nh-gr-300);overflow:hidden;position:relative; cursor:zoom-in;display:block;width:100%;padding:0;background:none} .nh-shot img{display:block;width:100%;height:auto;border:0} .nh-shot:hover{border-color:var(--nh-ar-500);box-shadow:var(--nh-ombra-hi)} .nh-cap{position:absolute;left:0;right:0;bottom:0;font-size:11px;text-align:left;color:#fff; background:linear-gradient(180deg,rgba(10,46,79,0),rgba(10,46,79,.78));padding:16px 10px 7px} .nh-azioni{margin-top:16px} .nh-apri{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--nh-blu-700); text-decoration:none;border:2px solid var(--nh-blu-100);background:var(--nh-blu-050);border-radius:9px;padding:8px 14px;cursor:pointer} .nh-apri:hover{border-color:var(--nh-blu-700);background:#fff;text-decoration:none} .nh-apri svg{width:15px;height:15px} .nh-tutte-row{margin-top:26px;text-align:center} .nh-tutte{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--nh-blu-700); text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px} .nh-tutte:hover{border-bottom-color:var(--nh-ar-500)} /* ---------- fascia GeoData ---------- */ .nh-marchio{background:#fff;border-top:1px solid var(--nh-gr-300);padding:52px 0 56px} .nh-marchio-row{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap} .nh-marchio-logo{width:216px;height:auto;border:0} .nh-marchio-testo{max-width:520px} .nh-mt1{margin:0;font-size:18px;color:var(--nh-blu-900);line-height:1.4} .nh-mt1 strong{color:var(--nh-blu-700)} .nh-mt2{margin:8px 0 18px;font-size:14px;color:var(--nh-gr-600)} .nh-marchio-btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;text-decoration:none; color:#fff;background:var(--nh-blu-700);border:2px solid var(--nh-blu-700);border-radius:10px;padding:10px 18px} .nh-marchio-btn:hover{background:var(--nh-ar-500);border-color:var(--nh-ar-500);color:#fff;text-decoration:none} .nh-marchio-btn svg{width:16px;height:16px} /* ---------- riga legale ---------- */ .nh-legale{background:var(--nh-blu-900);border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.62);font-size:12px;padding:17px 0} .nh-legale .nh-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .nh-legale a{color:rgba(255,255,255,.62)} .nh-lg-ente{display:flex;flex-direction:column;gap:3px} .nh-lg-rag{color:rgba(255,255,255,.72)} .nh-lg-luogo{color:rgba(255,255,255,.45)} /* ---------- pannello di dettaglio novità ---------- */ .nh-vis{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(6,26,45,.74);z-index:1200; display:none;overflow-y:auto;padding:30px 20px 44px; font-family:var(--nh-font);color:var(--nh-gr-900);line-height:1.6;text-align:left} .nh-vis *{box-sizing:border-box} .nh-vis.nh-aperto{display:block} .nh-pannello{max-width:880px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden; box-shadow:0 26px 70px rgba(0,0,0,.42);border-top:5px solid var(--nh-ar-500)} .nh-pan-head{padding:26px 32px 24px;border-bottom:1px solid var(--nh-gr-300);background:var(--nh-blu-050)} .nh-pan-head h3{margin:0;font-size:24px;line-height:1.25;color:var(--nh-blu-900);font-weight:700} .nh-pan-head p{margin:9px 0 0;font-size:15px;color:var(--nh-gr-600)} .nh-chiudi{position:fixed;top:22px;right:26px;z-index:1210;width:42px;height:42px;border:0;border-radius:11px; cursor:pointer;background:#fff;color:var(--nh-blu-900);display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.3)} .nh-chiudi:hover{background:var(--nh-ar-500);color:#fff} .nh-chiudi svg{width:20px;height:20px} .nh-pan-corpo{padding:26px 32px 32px;display:flex;flex-direction:column;gap:26px} .nh-pan-corpo img{display:block;width:100%;height:auto;border:1px solid var(--nh-gr-300);border-radius:12px} .nh-pan-cap{margin:10px 2px 0;font-size:13px;color:var(--nh-gr-600)} @media (max-width:900px){ .nh-griglia{grid-template-columns:repeat(2,1fr)} .nh-accessi{grid-template-columns:1fr} .nh-accesso+.nh-accesso{border-left:0;border-top:2px solid var(--nh-gr-300)} .nh-shots{grid-template-columns:1fr 1fr} .nh-head-row{grid-template-columns:auto 1fr;row-gap:16px} .nh-titolo{text-align:left} .nh-firma{grid-column:1 / -1;justify-self:start} } @media (max-width:600px){ .nh-griglia,.nh-shots{grid-template-columns:1fr} .nh-titolo .nh-sue{font-size:27px} .nh-hero h1{font-size:22px} .nh-stemma img{height:74px} .nh-firma img{width:112px} .nh-pan-head,.nh-pan-corpo{padding-left:20px;padding-right:20px} }