/** * WACI language switcher. * * A bespoke control over the Google Translate engine. Google's own UI is * suppressed at the foot of this file — left alone it injects a fixed banner * and shifts down with an inline `top`, which breaks the header. * * Selectors are scoped with two classes throughout. The Elementor kit styles * bare `button`, `input` and `a` at (0,1,1), which beats a single class, so * single-class rules here would lose and the site's chunky orange button * styling would leak into the control. */ .waci-lang { --lg-ink: #282828; --lg-muted: #6b6764; --lg-line: #ece9e7; --lg-soft: #faf9f8; --lg-accent: #d05418; box-sizing: border-box; flex: 0 0 auto; font-family: Jost, system-ui, -apple-system, "Segoe UI", sans-serif; position: relative; } .waci-lang *, .waci-lang *::before, .waci-lang *::after { box-sizing: inherit; } /* Hidden until the script has seated it in the header, so it never flashes at the foot of the page where it is rendered. */ .waci-lang[hidden] { display: none; } /* * The header container the switcher is seated in stacks its children, which * would drop the control onto its own line and make the top bar taller. Lay * it out as a row so the switcher sits beside the social links. The class is * added by the script, so this only ever affects the container we touched. */ .waci-lang-host { align-items: center !important; column-gap: 16px; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; } .waci-lang-host > * { margin-block: 0 !important; } /* ----------------------------------------------------------------- trigger */ .waci-lang .waci-lang__btn { align-items: center; background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .3) !important; border-radius: 999px !important; box-shadow: none !important; color: #fff !important; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 11px !important; font-weight: 600 !important; gap: 6px; letter-spacing: .08em !important; line-height: 1 !important; margin: 0 !important; padding: 6px 11px !important; text-transform: uppercase !important; transition: background-color .18s ease, border-color .18s ease; } .waci-lang .waci-lang__btn:hover, .waci-lang.is-open .waci-lang__btn { background: rgba(255, 255, 255, .22) !important; border-color: rgba(255, 255, 255, .6) !important; } .waci-lang .waci-lang__btn svg { height: 14px; opacity: .9; width: 14px; } /* * Seated on the white header row rather than the coloured top bar — which is * what happens once the top bar is hidden on narrow screens. White-on-white * would be invisible. */ .waci-lang.is-light .waci-lang__btn { background: transparent !important; border-color: var(--lg-line) !important; color: var(--lg-ink) !important; } .waci-lang.is-light .waci-lang__btn:hover, .waci-lang.is-light.is-open .waci-lang__btn { background: var(--lg-soft) !important; border-color: var(--lg-accent) !important; color: var(--lg-accent) !important; } /* ------------------------------------------------------------------- panel */ .waci-lang .waci-lang__panel { background: #fff; border: 1px solid var(--lg-line); border-radius: 14px; box-shadow: 0 26px 60px -20px rgba(28, 28, 28, .42); display: flex; flex-direction: column; max-height: min(72vh, 560px); opacity: 0; position: absolute; right: 0; top: calc(100% + 10px); transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; visibility: hidden; width: 340px; z-index: 100000; } .waci-lang.is-open .waci-lang__panel { opacity: 1; transform: none; visibility: visible; } .waci-lang .waci-lang__head { align-items: center; border-bottom: 1px solid var(--lg-line); display: flex; justify-content: space-between; padding: 14px 16px 12px; } .waci-lang .waci-lang__eyebrow { color: var(--lg-accent); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .waci-lang .waci-lang__close { background: transparent !important; border: 0 !important; border-radius: 50% !important; color: var(--lg-muted) !important; cursor: pointer; display: inline-flex; height: 24px; margin: 0 !important; padding: 0 !important; transition: background-color .16s ease, color .16s ease; width: 24px; } .waci-lang .waci-lang__close:hover { background: var(--lg-soft) !important; color: var(--lg-ink) !important; } .waci-lang .waci-lang__close svg { height: 14px; margin: auto; width: 14px; } /* ------------------------------------------------------------------ search */ .waci-lang .waci-lang__search { align-items: center; border: 1px solid var(--lg-line); border-radius: 9px; display: flex; gap: 8px; margin: 12px 16px 4px; padding: 8px 11px; transition: border-color .18s ease; } .waci-lang .waci-lang__search:focus-within { border-color: var(--lg-accent); } .waci-lang .waci-lang__search > svg { color: var(--lg-muted); flex: 0 0 auto; height: 13px; width: 13px; } .waci-lang .waci-lang__search input { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--lg-ink) !important; flex: 1; font-family: inherit; font-size: 14px !important; margin: 0 !important; min-height: 0 !important; min-width: 0; outline: 0; padding: 0 !important; } .waci-lang .waci-lang__search input::placeholder { color: #a9a5a2; } /* -------------------------------------------------------------------- list */ .waci-lang .waci-lang__list { overflow-y: auto; padding: 6px 8px 4px; scrollbar-width: thin; } .waci-lang .waci-lang__list::-webkit-scrollbar { width: 6px; } .waci-lang .waci-lang__list::-webkit-scrollbar-thumb { background: #d8d4d1; border-radius: 999px; } .waci-lang .waci-lang__group[hidden] { display: none; } .waci-lang .waci-lang__region { color: #9a9693; display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; padding: 10px 8px 4px; text-transform: uppercase; } .waci-lang .waci-lang__item { align-items: baseline; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; color: var(--lg-ink) !important; cursor: pointer; display: flex; font-family: inherit; gap: 8px; letter-spacing: 0 !important; margin: 0 !important; padding: 8px 9px !important; text-align: left; text-transform: none !important; transition: background-color .16s ease; width: 100%; } .waci-lang .waci-lang__item[hidden] { display: none; } .waci-lang .waci-lang__item:hover, .waci-lang .waci-lang__item:focus-visible { background: var(--lg-soft) !important; } .waci-lang .waci-lang__native { font-size: 14.5px; font-weight: 600; line-height: 1.3; } .waci-lang .waci-lang__en { color: var(--lg-muted); font-size: 11.5px; } .waci-lang .waci-lang__tick { color: var(--lg-accent); flex: 0 0 auto; margin-left: auto; opacity: 0; } .waci-lang .waci-lang__tick svg { height: 13px; width: 13px; } .waci-lang .waci-lang__item.is-active { background: #fdf2ec !important; } .waci-lang .waci-lang__item.is-active .waci-lang__native { color: var(--lg-accent); } .waci-lang .waci-lang__item.is-active .waci-lang__tick { opacity: 1; } .waci-lang .waci-lang__empty { color: var(--lg-muted); font-size: 13px; margin: 0; padding: 18px 10px; text-align: center; } .waci-lang .waci-lang__note { border-top: 1px solid var(--lg-line); color: #8b8784; font-size: 11.5px; line-height: 1.5; margin: 0; padding: 11px 16px 13px; } /* --------------------------------------------------------- small screens */ @media (max-width: 860px) { /* Anchor to the viewport: inside the header the panel would be clipped by the bar's own bounds. */ .waci-lang .waci-lang__panel { border-radius: 16px 16px 0 0; bottom: 0; left: 0; max-height: 78vh; position: fixed; right: 0; top: auto; transform: translateY(16px); width: auto; } .waci-lang .waci-lang__native { font-size: 15.5px; } .waci-lang .waci-lang__item { padding: 11px 9px !important; } } @media (prefers-reduced-motion: reduce) { .waci-lang .waci-lang__panel, .waci-lang .waci-lang__btn, .waci-lang .waci-lang__item { transition-duration: .01ms !important; } } /* ========================================================================= Suppress Google's own chrome The widget otherwise injects a fixed banner iframe and pushes down with an inline `top`, which breaks the header. These rules remove the banner and the tooltip while leaving the