/* Sartist — header, footer e menu mobile. Caricato su TUTTO il sito. Nessuna regola su body/h1/p/a: qui dentro si tocca solo ciò che ha classe sa-. */ :root{ --ink:#141619; --cloth:#1E222B; --cloth-2:#2A2F3B; --chalk:#EFECE5; --paper:#F7F5F0; --paper-2:#EEEBE3; --brass:#C2954A; --brass-lo:#8A6522; --brass-ink:#775719; --thread:#7C8698; --thread-dark:#59616F; --rule:#343B49; --rule-light:#DBD7CD; --display:"Bodoni Moda",'Didot','Times New Roman',serif; --body:"Archivo",'Helvetica Neue',Arial,sans-serif; --wrap:1240px; --gut:clamp(20px,5vw,64px); --hdr-h:70px; } .sa-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)} .sa-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sa-hdr a:focus-visible,.sa-hdr button:focus-visible,.sa-ftr a:focus-visible,.sa-mnav a:focus-visible,.sa-mnav summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px} .sa-hdr,.sa-ftr,.sa-mnav{font-family:var(--body);line-height:1.5;-webkit-box-sizing:border-box} .sa-hdr *,.sa-ftr *,.sa-mnav *{box-sizing:border-box} .sa-ftr h4{font-family:var(--body)} /* ---------------- header ---------------- */ .sa-hdr{position:sticky;top:0;z-index:60;background:rgba(20,22,25,.92);backdrop-filter:blur(10px);color:var(--chalk);border-bottom:1px solid var(--rule)} .sa-hdr-bar{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);height:var(--hdr-h);display:flex;align-items:center;gap:clamp(14px,3vw,34px)} .sa-brand{flex:none;display:block;line-height:0} .sa-brand img{width:116px;height:auto} .sa-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0} .sa-nav-item{position:relative} .sa-nav-btn{font-family:var(--body);font-size:14.5px;font-weight:500;background:none;border:0;color:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:2px;text-decoration:none} .sa-nav-btn:hover{background:#242833} .sa-nav-btn svg{opacity:.55;transition:transform .2s ease} .sa-nav-item[data-open="true"] .sa-nav-btn{background:#242833} .sa-nav-item[data-open="true"] .sa-nav-btn svg{transform:rotate(180deg)} .sa-mega{position:absolute;top:calc(100% + 1px);left:0;background:var(--cloth);border:1px solid var(--rule);border-radius:2px;padding:26px 28px;min-width:min(700px,88vw);box-shadow:0 30px 70px rgba(0,0,0,.55);display:none} .sa-nav-item[data-open="true"] .sa-mega{display:block} .sa-mega-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:16px} .sa-mega-head strong{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600} .sa-mega-head a{font-size:13.5px;color:var(--thread);text-decoration:none} .sa-mega-head a:hover{color:var(--chalk)} .sa-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px 26px} .sa-mega-grid.sa-one{grid-template-columns:1fr} .sa-mega-grid a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-decoration:none;padding:7px 0;font-size:14.5px;color:#D3D8E2;border-bottom:1px solid transparent} .sa-mega-grid a:hover{color:var(--chalk);border-bottom-color:var(--rule)} .sa-mega-grid a span{font-size:12.5px;color:var(--thread);font-variant-numeric:tabular-nums} .sa-mega-grid a:hover span{color:var(--brass)} .sa-hdr-right{display:flex;align-items:center;gap:10px;flex:none} .sa-icon-btn{background:none;border:1px solid var(--rule);border-radius:2px;color:inherit;width:38px;height:38px;display:grid;place-items:center;cursor:pointer} .sa-icon-btn:hover{border-color:var(--brass);color:var(--brass)} .sa-btn-sm{font-family:var(--body);font-size:13.5px;font-weight:600;background:var(--brass);color:#17120A;border:0;border-radius:2px;padding:11px 17px;text-decoration:none;white-space:nowrap} .sa-btn-sm:hover{background:#D3A757} .sa-burger{display:none} @media(max-width:1080px){.sa-nav{display:none}.sa-burger{display:grid}.sa-hdr-bar{justify-content:space-between}} @media(max-width:560px){.sa-btn-sm{display:none}} /* ---------------- footer ---------------- */ .sa-ftr{background:var(--ink);color:#B6BFCE;padding:clamp(56px,7vw,84px) 0 0;border-top:1px solid var(--rule)} .sa-ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(30px,4vw,56px);padding-bottom:50px} @media(max-width:900px){.sa-ftr-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.sa-ftr-grid{grid-template-columns:1fr}} .sa-ftr h4{font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600;margin:0 0 18px} .sa-ftr-brand .sa-brand{margin-bottom:16px} .sa-ftr-brand .sa-brand img{width:132px} .sa-ftr-brand p{font-size:15px;line-height:1.58;max-width:34ch;color:#959EAF;margin-bottom:20px} .sa-ftr-links{display:flex;flex-direction:column;gap:1px} .sa-ftr-links a{text-decoration:none;font-size:14.5px;padding:5px 0;color:#B6BFCE;display:flex;justify-content:space-between;gap:10px} .sa-ftr-links a:hover{color:var(--chalk)} .sa-ftr-links a span{font-size:12.5px;color:var(--thread);font-variant-numeric:tabular-nums} .sa-wa{display:inline-flex;align-items:center;gap:9px;text-decoration:none;border:1px solid var(--rule);border-radius:2px;padding:10px 16px;font-size:14px;color:var(--chalk)} .sa-wa:hover{border-color:var(--brass);color:var(--brass)} .sa-ftr-cols2{columns:2;column-gap:22px} .sa-ftr-cols2 a{break-inside:avoid} @media(max-width:560px){.sa-ftr-cols2{columns:1}} .sa-ftr-bottom{border-top:1px solid var(--rule);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--thread)} .sa-ftr-bottom nav{display:flex;flex-wrap:wrap;gap:20px} .sa-ftr-bottom a{text-decoration:none} .sa-ftr-bottom a:hover{color:var(--chalk)} .sa-note{background:#FFF8E6;border:1px solid #E8D9A8;border-left:3px solid var(--brass);padding:16px 20px;font-size:14.5px;color:#5C4A1E;border-radius:2px} .sa-note b{font-weight:600} /* ---------------- menu mobile ---------------- */ .sa-mnav-in{padding:8px var(--gut) 26px} .sa-mnav details{border-bottom:1px solid var(--rule)} .sa-mnav summary{ list-style:none;cursor:pointer;padding:16px 30px 16px 0;position:relative; font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--chalk); } .sa-mnav summary::-webkit-details-marker{display:none} .sa-mnav summary::after{ content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%); font-size:20px;color:var(--brass);line-height:1; } .sa-mnav details[open] summary::after{content:"–"} .sa-mnav-grid{ display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:0 0 16px; } @media(max-width:420px){.sa-mnav-grid{grid-template-columns:1fr}} .sa-mnav-grid a{ display:flex;justify-content:space-between;align-items:baseline;gap:8px; text-decoration:none;font-size:14.5px;color:#C2C9D6;padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); } .sa-mnav-grid a span{font-size:12.5px;color:var(--thread);font-variant-numeric:tabular-nums} .sa-mnav-grid a:active{color:var(--brass)} .sa-mnav-links{display:flex;flex-direction:column;padding-top:8px} .sa-mnav-links a{ text-decoration:none;font-size:15.5px;font-weight:600;color:var(--chalk); padding:16px 0;border-bottom:1px solid var(--rule); } .sa-mnav-cta{ display:block;text-align:center;margin-top:18px;background:var(--brass); color:#17120A;text-decoration:none;font-weight:600;font-size:15px; padding:15px 20px;border-radius:2px; } /* ---------------- ricerca nell'header ---------------- */ .sa-hdr-search{ display:flex;align-items:center;background:#22262F;border:1px solid var(--rule); border-radius:2px;height:38px;overflow:hidden; } .sa-hdr-search input{ border:0;outline:0;background:transparent;color:var(--chalk); font-family:var(--body);font-size:13.5px;padding:0 12px;width:150px;min-width:0; } .sa-hdr-search input::placeholder{color:var(--thread)} .sa-hdr-search input:focus{width:190px} .sa-hdr-search button{ border:0;background:transparent;color:var(--thread);cursor:pointer; padding:0 11px;height:100%;display:grid;place-items:center; } .sa-hdr-search:focus-within{border-color:var(--brass)} .sa-hdr-search button:hover{color:var(--brass)} @media(max-width:1240px){.sa-hdr-search input{width:120px}} @media(max-width:1080px){.sa-hdr-search{display:none}} .sa-mnav-search{display:flex;gap:8px;padding:14px 0 6px} .sa-mnav-search input{ flex:1;min-width:0;background:var(--ink);border:1px solid var(--rule);border-radius:2px; color:var(--chalk);font-family:var(--body);font-size:15px;padding:12px 14px;outline:0; } .sa-mnav-search input::placeholder{color:var(--thread)} .sa-mnav-search input:focus{border-color:var(--brass)} .sa-mnav-search button{ border:0;border-radius:2px;background:var(--brass);color:#17120A; font-family:var(--body);font-weight:600;font-size:14.5px;padding:0 18px;cursor:pointer; } /* ---------------- menu mobile con
(senza JS) ---------------- */ .sa-mnav-wrap{display:none;position:static} @media(max-width:1080px){.sa-mnav-wrap{display:block}} .sa-mnav-wrap summary{ list-style:none;cursor:pointer;width:38px;height:38px; display:grid;place-items:center;border:1px solid var(--rule);border-radius:2px; color:var(--chalk); } .sa-mnav-wrap summary::-webkit-details-marker{display:none} .sa-mnav-wrap summary::marker{content:""} .sa-mnav-wrap summary:hover{border-color:var(--brass);color:var(--brass)} .sa-mnav-wrap summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px} .sa-mnav-wrap .sa-burger-close{display:none} .sa-mnav-wrap[open] .sa-burger-ico{display:none} .sa-mnav-wrap[open] .sa-burger-close{display:block} .sa-mnav-wrap[open] summary{border-color:var(--brass);color:var(--brass)} /* il pannello esce a tutta larghezza sotto la barra */ .sa-mnav{ position:absolute;left:0;right:0;top:100%; background:var(--cloth);border-top:1px solid var(--rule); max-height:calc(100vh - var(--hdr-h));overflow-y:auto; box-shadow:0 24px 50px rgba(0,0,0,.5); } /* Mega-menu desktop anche senza JavaScript. Il JS aggiunge solo il "click per fissare"; hover e focus da tastiera funzionano comunque, perche' su questo sito l'esecuzione degli script non e' garantita (il plugin di performance interferisce). */ @media(hover:hover) and (min-width:1081px){ .sa-nav-item:hover > .sa-mega{display:block} } .sa-nav-item:focus-within > .sa-mega{display:block} /* Il tema impone un colore link globale (oro) che vinceva sui bottoni CTA: il testo usciva oro su fondo oro, contrasto 1.17 — di fatto illeggibile. Selettori piu' specifici per riprendere il controllo dei nostri elementi. */ .sa-hdr a.sa-btn-sm, .sa-hdr a.sa-btn-sm:hover, .sa-hdr a.sa-btn-sm:focus, .sa-mnav a.sa-mnav-cta, .sa-mnav a.sa-mnav-cta:hover, .sa-mnav a.sa-mnav-cta:focus{ color:#17120A; } .sa-hdr a.sa-nav-btn, .sa-hdr a.sa-nav-btn:hover{ color:var(--chalk); } .sa-hdr .sa-mega-grid a{ color:#D3D8E2; } .sa-hdr .sa-mega-grid a:hover{ color:var(--chalk); } .sa-mnav .sa-mnav-links a{ color:var(--chalk); } .sa-mnav .sa-mnav-grid a{ color:#C2C9D6; } /* Le voci "Regioni"/"Citta'" sono