/*! * LANGA Tools — Seasonal top bar. * * Colours arrive as inline custom properties set by the loader, taken from * the effect itself, so the same season looks the same on every site. * * @since 2.7.7 */ .langa-fx-bar { --langa-fx-bg: #222; --langa-fx-fg: #fff; --langa-fx-accent: #fff; position: relative; z-index: 99998; /* under #wpadminbar (99999), over site headers */ display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 44px 9px 16px; background: var(--langa-fx-bg); color: var(--langa-fx-fg); font-size: 15px; line-height: 1.35; font-family: inherit; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); } .langa-fx-bar.langa-fx-sticky { position: sticky; top: 0; } /* The track is the visible window. Overflow is hidden here so the text can travel inside it when, and only when, it does not fit. */ .langa-fx-track { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: center; } .langa-fx-text { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; max-width: 100%; } .langa-fx-icon { font-size: 1.15em; line-height: 1; color: var(--langa-fx-accent); } /* Marquee: added by the loader only on real overflow, and never when the visitor asked for reduced motion. Duration is set inline so speed stays constant and long phrases simply take longer. */ .langa-fx-bar.langa-fx-scroll .langa-fx-track { text-align: left; } .langa-fx-bar.langa-fx-scroll .langa-fx-text { will-change: transform; animation-name: langa-fx-marquee; animation-timing-function: linear; animation-iteration-count: infinite; padding-left: 100%; } .langa-fx-bar.langa-fx-scroll:hover .langa-fx-text, .langa-fx-bar.langa-fx-scroll:focus-within .langa-fx-text { animation-play-state: paused; } @keyframes langa-fx-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .langa-fx-close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .7; font-size: 19px; line-height: 1; cursor: pointer; } .langa-fx-bar[dir="rtl"] { padding: 9px 16px 9px 44px; } .langa-fx-bar[dir="rtl"] .langa-fx-close { right: auto; left: 10px; } .langa-fx-bar[dir="rtl"].langa-fx-scroll .langa-fx-track { text-align: right; } .langa-fx-close:hover, .langa-fx-close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .15); } @media (max-width: 600px) { .langa-fx-bar { font-size: 13.5px; padding: 8px 38px 8px 12px; } .langa-fx-bar[dir="rtl"] { padding: 8px 12px 8px 38px; } .langa-fx-close { width: 24px; height: 24px; font-size: 17px; right: 7px; } .langa-fx-bar[dir="rtl"] .langa-fx-close { right: auto; left: 7px; } } @media print { .langa-fx-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .langa-fx-bar.langa-fx-scroll .langa-fx-text { animation: none; padding-left: 0; } .langa-fx-bar.langa-fx-scroll .langa-fx-track { text-align: center; } } /* 2.7.7.1 — due correzioni dal collaudo sui siti vivi, 14/08/2026. 1) Gli effetti (.ltc-*-wrap) sono fixed a z-index 999999 e cadevano SOPRA la fascia invece che dietro. La fascia sale sopra il livello decorativo: vale per tutti gli effetti senza toccarne il CSS. 2) Dopo un click la X restava con l'anello di focus. Resta per chi naviga da tastiera, sparisce per chi usa il mouse. */ .langa-fx-bar { z-index: 1000001; } .langa-fx-close:focus:not(:focus-visible) { outline: none; box-shadow: none; } .langa-fx-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* 2.7.7.2 — BLINDATURA, 14/08/2026, da italycafe.com. La X ereditava lo stile dei bottoni del tema: fondo nero, bordo e un pezzo bianco sotto che era uno pseudo-elemento del tema. Su 43 siti con 43 fogli di stile non si puo' sperare che nessuno tocchi un