/* ========================================================================== Language switcher (public site) Two jobs: style our own control, and suppress the UI the Google Website Translator widget injects - its banner iframe is position:fixed and pushes down by ~40px, which shifts the whole page on every translated view. ========================================================================== */ /* Google's own gadget and banner: the widget is used only as the engine. */ #google_translate_element, .goog-te-gadget, .goog-te-banner-frame, .goog-logo-link { display: none !important; } .skiptranslate iframe { display: none !important; visibility: hidden !important; } body { top: 0 !important; /* undo the offset the banner adds */ } /* Translated runs are highlighted yellow on hover by default; it looks broken on a dark navbar. */ .goog-text-highlight { background: none !important; box-shadow: none !important; } .goog-tooltip, .goog-tooltip:hover { display: none !important; } .pp-lang { position: relative; } .pp-lang-toggle { display: flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: #fff; font-size: .875rem; line-height: 1; padding: .45rem .8rem; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .pp-lang-toggle:hover, .pp-lang-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); } .pp-lang-toggle:focus-visible { outline: 2px solid #0098ff; outline-offset: 2px; } .pp-lang-globe { flex: 0 0 auto; opacity: .9; } .pp-lang-caret { flex: 0 0 auto; opacity: .8; transition: transform .15s ease; } .pp-lang-toggle[aria-expanded="true"] .pp-lang-caret { transform: rotate(180deg); } .pp-lang-menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 1050; width: 16rem; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: .6rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: .6rem; } .pp-lang-search { width: 100%; border: 1px solid #dfe3e6; border-radius: .4rem; font-size: .875rem; padding: .4rem .6rem; margin-bottom: .5rem; } .pp-lang-search:focus { border-color: #0098ff; outline: none; box-shadow: 0 0 0 3px rgba(0, 152, 255, .15); } .pp-lang-list { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; } .pp-lang-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: .35rem; color: #1f2933; font-size: .875rem; padding: .4rem .55rem; } .pp-lang-item:hover { background: #f1f5f8; } .pp-lang-item.is-active { background: rgba(0, 152, 255, .12); color: #0079cc; font-weight: 600; } .pp-lang-item:focus-visible { outline: 2px solid #0098ff; outline-offset: -2px; } .pp-lang-empty { color: #6b7280; font-size: .8125rem; padding: .5rem .55rem; } .pp-lang-credit { border-top: 1px solid #eef1f4; color: #9aa5b1; font-size: .6875rem; margin-top: .5rem; padding-top: .45rem; text-align: right; } /* Collapsed navbar: the menu is full width under the toggle rather than a floating card. */ @media (max-width: 991.98px) { .pp-lang { width: 100%; margin-top: .5rem; } .pp-lang-toggle { width: 100%; justify-content: center; } .pp-lang-menu { left: 0; right: 0; width: auto; } }