/* ========================================================================== TRANSLATION - language switcher, notice bar, and undoing Google's own UI. ========================================================================== */ /* --- Suppressing the widget's built-in chrome -------------------------------- The Google widget injects a fixed banner iframe at the top of the page and pushes down with an inline `top: 40px`, which breaks a sticky header and shifts every fixed element. We render our own switcher and our own notice, so the stock UI is removed outright. The !important on body top is unavoidable: the widget sets it as an inline style. ---------------------------------------------------------------------------- */ .skiptranslate, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } body { top: 0 !important; } /* The widget also wraps translated runs in tags; make sure they cannot introduce a colour or size of their own. */ font { background: transparent !important; box-shadow: none !important; color: inherit !important; font-size: inherit !important; } #google_translate_element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; top:0; } /* --- Switcher ----------------------------------------------------------------- A native

, so it opens, closes and takes keyboard focus with no JavaScript at all - the script only fills in the current language and handles the switch itself. ---------------------------------------------------------------------------- */ .lang-switch { position: relative; } .lang-switch__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; font-size: 13px; font-weight: 700; color: var(--color-navy-900); cursor: pointer; list-style: none; white-space: nowrap; } /* Safari draws its own disclosure triangle on

unless told not to. */ .lang-switch__toggle::-webkit-details-marker { display: none; } .lang-switch__toggle:hover { border-color: var(--color-primary-ink); color: var(--color-primary-ink); } .lang-switch__toggle svg:first-child { color: var(--color-primary-ink); } .lang-switch[open] .lang-switch__toggle svg:last-child { transform: rotate(180deg); } .lang-switch__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 268px; padding: 12px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16); } .lang-switch__note { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); font-size: 11.5px; line-height: 1.5; color: var(--color-text-muted); } .lang-switch__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; } .lang-switch__option { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--color-navy-900); } .lang-switch__option:hover { background: var(--color-bg-alt); } .lang-switch__option.is-active { background: var(--color-primary-ink); color: #fff; } .lang-switch__native { font-size: 14px; font-weight: 700; } .lang-switch__english { font-size: 11.5px; color: var(--color-text-muted); } .lang-switch__option.is-active .lang-switch__english { color: rgba(255, 255, 255, 0.82); } /* In the mobile drawer the menu is part of the flow rather than a popover - a floating panel inside an already-scrolling drawer is a trap. */ .lang-switch--drawer { margin-top: 14px; } .lang-switch--drawer .lang-switch__toggle { width: 100%; justify-content: space-between; } .lang-switch--drawer .lang-switch__menu { position: static; width: 100%; margin-top: 8px; box-shadow: none; } /* --- "This page was translated" notice --------------------------------------- Fixed to the bottom rather than the top: the top is where the header and the ticker already are, and a bar that pushes the page down on load is the exact behaviour we removed from Google's own widget. ---------------------------------------------------------------------------- */ .translate-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 14px; width: calc(100% - 32px); max-width: 660px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--color-navy-dark); color: #fff; box-shadow: 0 16px 40px rgba(5, 22, 46, 0.34); } .translate-bar__text { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; line-height: 1.5; color: #C2DDE0; } .translate-bar__text svg { flex: 0 0 auto; margin-top: 1px; color: var(--color-accent); } .translate-bar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .translate-bar__revert { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; cursor: pointer; } .translate-bar__revert:hover { background: rgba(255, 255, 255, 0.14); } .translate-bar__dismiss { display: inline-flex; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #C2DDE0; cursor: pointer; } .translate-bar__dismiss:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } @media (max-width: 620px) { .translate-bar { flex-wrap: wrap; gap: 10px; } .translate-bar__actions { width: 100%; margin-left: 0; justify-content: flex-end; } } /* --- Right-to-left ------------------------------------------------------------ Arabic, Persian and Urdu. This flips reading direction and the handful of places the layout hardcodes a side; it is not a full RTL rebuild of the theme, but it is the difference between readable and not. ---------------------------------------------------------------------------- */ .is-rtl body { direction: rtl; text-align: right; } .is-rtl .lang-switch__menu { right: auto; left: 0; } .is-rtl .lang-switch__option { text-align: right; } .is-rtl .translate-bar__actions { margin-left: 0; margin-right: auto; } /* Anything genuinely directional - icon rows, arrows, progress steps - stays left-to-right, because mirroring an arrow that means "next" reverses its meaning rather than translating it. */ .is-rtl .story-tags, .is-rtl .opp-steps, .is-rtl .breadcrumbs { direction: ltr; } /* Fixed width so swapping between "English" and "Bahasa Indonesia" does not resize the header button and shift everything beside it. */ .lang-switch__current { display: inline-block; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }