/* ===================================================================== Labotemp – Page Translation (Google Translate widget) custom UI Self-contained. Does not modify any existing site styles. All selectors are namespaced under .lt-translate / #lt-* / .goog-* ===================================================================== */ /* ---- Neutralise Google's injected chrome so layout never shifts ---- */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .skiptranslate iframe, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover, div#goog-gt-, #goog-gt-tt, .jfk-bubble { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; } /* Google pushes / down when its banner shows – cancel it hard */ body, html { top: 0 !important; position: static !important; min-height: 0 !important; } body { margin-top: 0 !important; } /* Hide the default Google gadget dropdown (we drive translation ourselves) */ #google_translate_element, .lt-google-hidden { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px !important; width: 1px !important; overflow: hidden !important; } /* Kill the highlight/background Google adds to translated text */ .translated-ltr body, .translated-rtl body, font { background-color: transparent !important; box-shadow: none !important; } /* ---- Our language button ---- */ .lt-translate { position: relative; display: inline-block; font-family: inherit; } .lt-translate__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px; padding: 6px 12px; font-size: 13px; line-height: 1; color: inherit; cursor: pointer; white-space: nowrap; transition: background .16s ease, border-color .16s ease; } .lt-translate__btn:hover, .lt-translate__btn[aria-expanded="true"] { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .25); } .lt-translate__btn i { font-size: 15px; } /* Selected item in the dropdown shows a tiny inline spinner while applying */ .lt-translate__item.is-loading { pointer-events: none; opacity: .8; } .lt-translate__item.is-loading .lt-flag { visibility: hidden; } .lt-translate__item.is-loading::before { content: ""; position: absolute; left: 12px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(47, 126, 209, .25); border-top-color: #2f7ed1; animation: lt-spin .7s linear infinite; } .lt-translate__item { position: relative; } /* ---- Small non-blocking toast (bottom-left, out of the way) ---- */ #lt-toast { position: fixed; left: 18px; bottom: 18px; z-index: 2147483647; display: flex; align-items: center; gap: 10px; max-width: 78vw; padding: 11px 16px; background: #0f2c50; color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; box-shadow: 0 12px 32px rgba(15, 40, 80, .28); transform: translateY(140%); opacity: 0; transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .28s ease; pointer-events: none; } #lt-toast.is-visible { transform: translateY(0); opacity: 1; } #lt-toast .lt-toast-ring { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: lt-spin .7s linear infinite; flex: none; } #lt-toast.lt-done .lt-toast-ring { animation: none; border: none; position: relative; } #lt-toast.lt-done .lt-toast-ring::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #7ee0a1; } @keyframes lt-spin { to { transform: rotate(360deg); } } @media (max-width: 767.98px) { #lt-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; justify-content: center; } } @media (prefers-reduced-motion: reduce) { #lt-toast { transition: opacity .2s ease; transform: none; } #lt-toast .lt-toast-ring, .lt-translate__item.is-loading::before { animation-duration: 1.4s; } } .lt-translate__label { font-weight: 600; } .lt-translate__caret { font-size: 10px; opacity: .7; transition: transform .16s ease; } .lt-translate__btn[aria-expanded="true"] .lt-translate__caret { transform: rotate(180deg); } /* Compact variant for the mobile header icon bar */ .lt-translate--compact .lt-translate__btn { padding: 8px; border-radius: 50%; border-color: transparent; } .lt-translate--compact .lt-translate__label, .lt-translate--compact .lt-translate__caret { display: none; } /* ---- Dropdown panel ---- */ .lt-translate__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2147483646; min-width: 220px; max-height: 340px; overflow-y: auto; background: #ffffff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 14px; box-shadow: 0 18px 45px rgba(15, 40, 80, .18); padding: 8px; display: none; } .lt-translate__menu.is-open { display: block; } /* Open upward / left-aligned helpers (set by JS if it would overflow) */ .lt-translate__menu.lt-up { top: auto; bottom: calc(100% + 8px); } .lt-translate__menu.lt-left { right: auto; left: 0; } .lt-translate__search { width: 100%; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .12); border-radius: 9px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; outline: none; } .lt-translate__search:focus { border-color: #2f7ed1; } .lt-translate__item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; background: transparent; border: 0; border-radius: 9px; padding: 9px 10px; font-size: 13.5px; color: #1c2b3a; text-align: left; cursor: pointer; } .lt-translate__item:hover { background: rgba(47, 126, 209, .1); } .lt-translate__item.is-active { background: rgba(47, 126, 209, .14); font-weight: 700; } .lt-translate__item .lt-flag { font-size: 16px; line-height: 1; } .lt-translate__item.is-active::after { content: "\2713"; margin-left: auto; color: #2f7ed1; font-weight: 700; } .lt-translate__reset { margin-top: 6px; border-top: 1px solid rgba(0, 0, 0, .08); padding-top: 6px; } /* Dark headers: let the button inherit light colours */ .header .lt-translate__btn, .m-navbar .lt-translate__btn { color: inherit; } @media (max-width: 767.98px) { .lt-translate__menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 60vh; border-radius: 16px; } .lt-translate__menu.lt-up { top: auto; bottom: 12px; } }