/* =========================================================================== CAMBIO LINGUA — FZ INOX --------------------------------------------------------------------------- Regola numero uno: il link porta alla GEMELLA DELLA PAGINA IN CUI SI STA, mai alla home. L'indirizzo lo prende dall'hreflang di quella stessa pagina, scritto dentro il file al momento della costruzione. Lo stato "lingua corrente" NON sta nel markup ma si legge da : cosi' lo stesso identico markup vale per il sito inglese e per quello italiano, e la macchina della traduzione non deve toccarlo. Se lo stato fosse scritto nel markup, l'italiano erediterebbe "inglese corrente". Le bandiere sono SVG dentro il CSS, non emoji: su Windows le emoji bandiera non esistono e Chrome le disegna come due lettere. =========================================================================== */ .langsw{display:flex;align-items:center;gap:4px} .langsw a{ display:inline-flex;align-items:center;gap:7px; font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);padding:7px 9px;border-radius:7px; transition:color .2s,background .2s; } .langsw a:hover{color:var(--bone);background:rgba(255,255,255,.06)} .langsw .sep{width:1px;height:13px;background:var(--line);flex:none} /* la bandierina */ .langsw i{ width:19px;height:13px;flex:none;display:block;border-radius:2px; background-size:cover;background-position:center; opacity:.5;transition:opacity .2s; box-shadow:0 0 0 1px rgba(255,255,255,.16); } .langsw a:hover i{opacity:1} .langsw .f-it{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23F4F5F0'/%3E%3Crect width='1' height='2' fill='%23008C45'/%3E%3Crect x='2' width='1' height='2' fill='%23CD212A'/%3E%3C/svg%3E")} .langsw .f-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23FFF' stroke-width='6'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23FFF' stroke-width='10'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")} /* lingua in cui si sta gia': accesa, e non si comporta da collegamento */ html[lang="en"] .langsw .l-en, html[lang="it"] .langsw .l-it{color:var(--bone);background:rgba(255,255,255,.05);cursor:default} html[lang="en"] .langsw .l-en i, html[lang="it"] .langsw .l-it i{opacity:1} /* --- nella barra in alto: sta DENTRO .nav-r, quindi sotto gli 881px sparisce da solo insieme al resto dei link, e al suo posto c'e' quello del menu' --- */ header .langsw{margin-left:-14px} /* recupera il gap di 30px di .nav-r */ /* ⚠️ Fra 901 e 1060px la barra e' ancora quella grande ma lo spazio finisce: misurato a 901px in italiano, fra il logo e i link restavano 0px. Qui si stringono le distanze invece di togliere le iniziali, che devono restare. */ @media(max-width:1060px){ header .nav-r{gap:18px} /* il -14px qui sopra annullava un gap di 30px: con gap 18 restavano 4px veri fra il pulsante del preventivo e il riquadro acceso della lingua. -2px riporta lo stacco a 16px, come sopra i 1061px. */ header .langsw{margin-left:-2px} header .langsw a{padding:7px 6px;gap:6px} } /* --- nel menu' del telefono: bersagli da 44px, la misura del banco di prova --- */ .drawer .langsw{margin-top:30px;gap:8px} /* ⚠️ `.drawer a{color:var(--bone)}` ha la stessa forza di `.langsw a` e sta in un foglio caricato dopo: senza questa riga, nel menu' le due lingue risultavano dello stesso colore e non si capiva in quale si fosse. Misurato, non dedotto. */ .drawer .langsw a{color:var(--dim)} html[lang="en"] .drawer .langsw .l-en, html[lang="it"] .drawer .langsw .l-it{color:var(--bone)} /* ⚠️ Stesso inciampo del `color` qui sopra, e sullo stesso identico selettore: `.drawer a{font-family:var(--serif)}` (base-*.css, e inline in home e progetti) ha la STESSA forza (0,1,1) di `.langsw a` e sta in un foglio caricato dopo, quindi IT ed EN uscivano in Instrument Serif mentre tutto il resto del menu' e' in Inter. `.drawer .langsw a` vale (0,3,1) e vince a prescindere dall'ordine dei fogli, anche dove il CSS base e' inline. Misurato, non dedotto. */ .drawer .langsw a{ font-family:var(--sans); font-size:13px;letter-spacing:.18em;gap:10px; min-height:44px;padding:0 14px; border:1px solid var(--line);border-radius:40px; } .drawer .langsw a:hover{padding-left:14px} /* annulla lo scorrimento dei link del menu' */ .drawer .langsw i{width:22px;height:15px} .drawer .langsw .sep{display:none} /* ⚠️ La soglia vera e 881px, non 901: a decidere il passaggio al menu del telefono e @media(max-width:880px) nei fogli di base. Con 901 il cambio lingua del menu restava visibile anche fra 881 e 900px, dove la barra grande c e gia. */ @media(min-width:881px){.drawer .langsw{display:none}}