/* Hide Google's own widget UI — we render our own switcher and only need the Element for its translation engine. The injected iframe banner also pushes down by 40px; reset that. */ #google_translate_element { display: none !important; } /* Hide every iframe Google injects with .skiptranslate — both the classic goog-te-banner-frame and the newer VIpgJd-* container that appears as soon as translation starts. We never want any of them. */ iframe.skiptranslate, .goog-te-banner-frame { display: none !important; visibility: hidden !important; } body { top: 0 !important; } /* Container — establishes a positioning context for the dropdown. */ .universalis-translator { position: relative; display: inline-flex; align-items: center; font-family: Montserrat, sans-serif; } /* Header placement — stretch the container to the full menu-row height so the trigger reads as a peer to .primary-menu__link. Hover then fills the same vertical band the menu items do, and the dropdown panel can anchor flush against the menu bar. */ .universalis-translator--at-header { align-self: stretch; } .universalis-translator--at-header .universalis-translator__trigger, .universalis-translator--at-header .universalis-translator__inline-code { height: 100%; padding-top: 0; padding-bottom: 0; } .universalis-translator--at-header .universalis-translator__panel { top: 100%; } /* ── Inline mode (≤ 3 languages) ────────────────────────────── */ /* Inline row — adjacent code buttons separated by their own thin left border (1px, low-opacity currentColor). The border is part of the second-and-after button's box, so hit-area and hover-fill stay per-button without overlap. No gap — buttons sit flush so the row reads as a tight switcher, not a button group. */ .universalis-translator--inline { gap: 0; } .universalis-translator__inline-code { appearance: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.4em 0.7em; cursor: pointer; opacity: 0.7; transition: background-color 0.15s ease, opacity 0.15s ease; } .universalis-translator__inline-code:hover, .universalis-translator__inline-code:focus-visible { background-color: rgba(255, 255, 255, 0.12); opacity: 1; outline: none; } /* Active language — keep the inherited header text colour (so it doesn't fade into the brand-coloured header background like var(--c-brand) did) and lean on weight + underline for the strongest possible read against same-colour neighbours. */ .universalis-translator__inline-code.is-active { opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; cursor: default; } /* ── Dropdown mode (> 3 languages) ──────────────────────────── */ /* Trigger sits in the header row alongside .header-search-toggle. Inherits brand text colour; hover uses the same translucent-white overlay the search toggle uses, so dark/brand backgrounds don't collapse to a light fill. */ .universalis-translator__trigger { display: inline-flex; align-items: center; gap: 0.4em; appearance: none; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0.4em 0.6em; transition: background-color 0.15s ease; } .universalis-translator__trigger:hover, .universalis-translator__trigger:focus-visible { background-color: rgba(255, 255, 255, 0.12); outline: none; } .universalis-translator__trigger svg { width: 18px; height: 18px; flex: 0 0 18px; } .universalis-translator__current { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; } /* Panel — same visual language as .primary-menu__submenu: surface fill, layered shadow, opacity-fade with subtle slide. No rounded corners — site-wide convention. */ .universalis-translator__panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; max-width: 260px; margin: 0; padding: 0.5rem 0; list-style: none; background-color: var(--c-surface, #fff); box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 8px -2px rgba(15, 23, 42, 0.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; z-index: 9100; } .universalis-translator[data-state="open"] .universalis-translator__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear; } .universalis-translator__item { margin: 0; padding: 0; } .universalis-translator__option { display: flex; align-items: baseline; gap: 0.6em; width: 100%; appearance: none; background: transparent; border: 0; color: var(--c-text, inherit); font: inherit; text-align: left; padding: 0.5em 0.85em; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .universalis-translator__option:hover, .universalis-translator__option:focus-visible { background-color: var(--c-surface-tint); color: var(--c-brand); outline: none; } /* Active language — copies the submenu active-row recipe verbatim: left-accent bar + tint background + brand-coloured bold text. Visibly stronger than hover (which lacks the bar and weight). */ .universalis-translator__item.is-active .universalis-translator__option, .universalis-translator__item.is-active .universalis-translator__option:hover, .universalis-translator__item.is-active .universalis-translator__option:focus-visible { box-shadow: inset 3px 0 0 var(--c-brand); background-color: var(--c-surface-tint); color: var(--c-brand); font-weight: 600; cursor: default; } .universalis-translator__code { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; min-width: 2.2em; color: inherit; } .universalis-translator__name { font-size: 0.9rem; color: inherit; opacity: 0.85; } /* ── Floating placement ─────────────────────────────────────── */ .universalis-translator--at-float_top_right, .universalis-translator--at-float_top_left, .universalis-translator--at-float_bottom_right, .universalis-translator--at-float_bottom_left { position: fixed; z-index: 9000; } .universalis-translator--at-float_top_right { top: 16px; right: 16px; } .universalis-translator--at-float_top_left { top: 16px; left: 16px; } .universalis-translator--at-float_bottom_right { bottom: 16px; right: 16px; } .universalis-translator--at-float_bottom_left { bottom: 16px; left: 16px; } /* Floating mode lives on light page backgrounds, not on the dark header — give the trigger a real surface skin so it reads as a button. Hover uses brand-tinted alpha instead of white overlay. */ .universalis-translator--at-float_top_right .universalis-translator__trigger, .universalis-translator--at-float_top_left .universalis-translator__trigger, .universalis-translator--at-float_bottom_right .universalis-translator__trigger, .universalis-translator--at-float_bottom_left .universalis-translator__trigger, .universalis-translator--at-float_top_right.universalis-translator--inline, .universalis-translator--at-float_top_left.universalis-translator--inline, .universalis-translator--at-float_bottom_right.universalis-translator--inline, .universalis-translator--at-float_bottom_left.universalis-translator--inline { background: var(--c-surface, #fff); border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); color: var(--c-text, inherit); } .universalis-translator--at-float_top_right .universalis-translator__trigger:hover, .universalis-translator--at-float_top_right .universalis-translator__trigger:focus-visible, .universalis-translator--at-float_top_left .universalis-translator__trigger:hover, .universalis-translator--at-float_top_left .universalis-translator__trigger:focus-visible, .universalis-translator--at-float_bottom_right .universalis-translator__trigger:hover, .universalis-translator--at-float_bottom_right .universalis-translator__trigger:focus-visible, .universalis-translator--at-float_bottom_left .universalis-translator__trigger:hover, .universalis-translator--at-float_bottom_left .universalis-translator__trigger:focus-visible, .universalis-translator--at-float_top_right .universalis-translator__inline-code:hover, .universalis-translator--at-float_top_right .universalis-translator__inline-code:focus-visible, .universalis-translator--at-float_top_left .universalis-translator__inline-code:hover, .universalis-translator--at-float_top_left .universalis-translator__inline-code:focus-visible, .universalis-translator--at-float_bottom_right .universalis-translator__inline-code:hover, .universalis-translator--at-float_bottom_right .universalis-translator__inline-code:focus-visible, .universalis-translator--at-float_bottom_left .universalis-translator__inline-code:hover, .universalis-translator--at-float_bottom_left .universalis-translator__inline-code:focus-visible { background-color: var(--c-surface-tint); color: var(--c-brand); } /* Bottom-anchored floats: panel opens upward. */ .universalis-translator--at-float_bottom_right .universalis-translator__panel, .universalis-translator--at-float_bottom_left .universalis-translator__panel { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); } .universalis-translator--at-float_bottom_right[data-state="open"] .universalis-translator__panel, .universalis-translator--at-float_bottom_left[data-state="open"] .universalis-translator__panel { transform: translateY(0); } /* Left-anchored floats: panel anchors to the left edge. */ .universalis-translator--at-float_top_left .universalis-translator__panel, .universalis-translator--at-float_bottom_left .universalis-translator__panel { right: auto; left: 0; }