/* ============================================================ IPN Language Translator — styles Visible custom UI + Google Translate branding overrides ============================================================ */ /* ---- Visible language button (matches portal header) ---- */ .language-selector { position: relative; display: inline-block; z-index: 990; margin-right: 10px; } .language-button { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; background-color: #ffffff; border: 1px solid #d7d7d7; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1; color: #212529; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .language-button:hover, .language-button:focus { background-color: #f8f9fa; border-color: #198754; /* portal primary green */ color: #198754; } .language-button .language-icon { width: 16px; height: 16px; margin-right: 6px; } .language-button .icon-text { margin-right: 6px; font-size: 16px; line-height: 1; } /* ---- Dropdown panel with language cards ---- */ .language-panel { position: absolute; top: calc(100% + 5px); right: 0; left: auto; width: min(260px, calc(100vw - 24px)); background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 990; overflow: hidden; max-height: 500px; overflow-y: auto; } .language-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-bottom: 1px solid #eee; position: sticky; top: 0; background-color: #fff; z-index: 1; } .language-panel-header h5 { margin: 0; font-size: 15px; font-weight: 500; } .language-panel-header .close-button { background: none; border: none; font-size: 18px; cursor: pointer; color: #666; padding: 0 4px; } .language-panel-header .close-button:hover { color: #333; } .language-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; } .language-card { &:last-child:nth-child(odd) { grid-column: 1 / -1; } display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; border-radius: 6px; cursor: pointer; transition: all .2s ease; text-align: center; } .language-card:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,.1); } .language-card.selected { border: 2px solid #4285f4; box-shadow: 0 0 0 1px #4285f4; } .language-card .native-name { font-size: 15px; font-weight: 500; margin-bottom: 3px; line-height: 1.2; } .language-card .english-name { font-size: 11px; color: rgba(0,0,0,.6); line-height: 1.2; } /* ============================================================ Google Translate overrides — hide Google's own UI & banner ============================================================ */ /* The hidden host element that Google needs to exist */ #google_translate_element { position: absolute; visibility: hidden; width: 0; height: 0; overflow: hidden; } /* Google injects a top banner and pushes down — stop it */ .goog-te-banner-frame { display: none !important; } body { top: 0 !important; } /* Hide Google's gadget text/logo/"Powered by" */ .goog-te-gadget { color: transparent !important; font-size: 0 !important; } .goog-te-gadget img { display: none !important; } .goog-te-gadget-simple { background-color: transparent !important; border: none !important; } .goog-te-gadget-icon { display: none !important; } /* Hide the hover tooltip / original-text popup */ .goog-te-menu1, .goog-te-menu2, .goog-te-tooltip, .goog-te-glossary-item, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } #goog-gt-tt { visibility: hidden !important; } #goog-gt-original-text { display: none !important; } /* Remove the yellow highlight Google adds to translated text */ .goog-text-highlight { background-color: transparent !important; color: inherit !important; font-weight: normal !important; box-shadow: none !important; } /* Hide the various dynamically-named Google overlays */ .VIpgJd-ZVi9od-ORHb, .VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate, .VIpgJd-ZVi9od-aZ2wEe, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-l4eHX-hSRGPd { display: none !important; }