/* ========================================================================== * BrandMentions — Google Translate custom UI. * Hides Google's default top banner and styles the in-app language modal. * ========================================================================== */ /* --- Neutralize Google's banner & tooltips ---------------------------------- * Google Translate's banner iframe is inserted dynamically and is positioned * via an inline style that pushes `` down by ~40px. We target every * selector Google uses (past & present) and reset the body offset from the * root element so the layout stays intact. * -------------------------------------------------------------------------- */ .goog-te-banner-frame.skiptranslate, .goog-te-banner-frame, iframe.goog-te-banner-frame, iframe.skiptranslate, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, #goog-gt-tt, .goog-te-balloon-frame, div#goog-gt-, .goog-te-spinner-pos { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; opacity: 0 !important; pointer-events: none !important; } html, html[style], body, body[style] { top: 0 !important; margin-top: 0 !important; position: static !important; } .goog-tooltip, .goog-tooltip:hover, .goog-text-highlight { background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Remove the "highlight" Google paints on translated nodes. */ font[style*="background-color"] { background-color: transparent !important; box-shadow: none !important; } /* --- Neutralize wrappers injected by Google Translate ---------------- * Google Translate replaces every translated text node with one (or more * nested) wrappers. Those extra DOM * nodes cause subtle visual regressions on translated UI: * - they break selectors that target the direct child / nth-child of the * parent (e.g. `.chip > span`, `li:first-child`); * - they create their own inline box, so :hover decorations like underline, * borders, or background colors paint around the rectangle instead * of around the original element; * - they introduce their own vertical-align baseline, sometimes nudging * translated text by 1-2px relative to siblings. * `display: contents` removes the box from the layout tree entirely: * its children are rendered as if they were direct descendants of the parent, * so styles, hovers and selectors behave identically to the untranslated UI. * Supported in every evergreen browser (Chrome 65+, Firefox 37+, Safari 11.1+, * Edge 79+). On older browsers falls back to `display: inline` and * behaves the same as before this rule was added — i.e. no regression. * `font[color]` is excluded so any legitimate hand-written legacy `` * tag still renders normally; Translate never sets that attribute. */ font:not([color]) { display: contents !important; } /* The hidden source element. */ #google_translate_element { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* --- Modal ------------------------------------------------------------------ */ .bm-translate-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(45, 38, 64, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100000; opacity: 0; transition: opacity 180ms ease; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .bm-translate-modal--visible { opacity: 1; } .bm-translate-modal__card { background: #ffffff; border-radius: 12px; width: 440px; max-width: calc(100% - 40px); padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); position: relative; box-sizing: border-box; } .bm-translate-modal__close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; font-size: 22px; line-height: 1; color: #6c757d; cursor: pointer; padding: 6px 10px; border-radius: 6px; } .bm-translate-modal__close:hover { background: #f3f4f8; color: #2d2640; } .bm-translate-modal__title { font-size: 18px; font-weight: 600; color: #212529; margin-bottom: 6px; } .bm-translate-modal__subtitle { font-size: 13px; color: #6c757d; margin-bottom: 18px; line-height: 1.45; } .bm-translate-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } /* --- "More languages" secondary section (search + scrollable grid) -------- */ .bm-translate-modal__secondary { margin-bottom: 4px; } .bm-translate-modal__search { width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 13px; color: #212529; background: #ffffff; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; } .bm-translate-modal__search::placeholder { color: #9ca3af; } .bm-translate-modal__search:focus { border-color: #5b4dff; box-shadow: 0 0 0 3px rgba(91, 77, 255, 0.12); } /* The secondary grid is the scroll viewport. Height sized for roughly 6 rows * of 2 columns (~12 languages) before scrolling kicks in; matches the * visual weight of the modal without letting the list dominate. * `overscroll-behavior: contain` prevents wheel events from bubbling to the * page body when scrolling inside the list. */ .bm-translate-modal__grid--secondary { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin-bottom: 0; /* Thin scrollbar styling — Firefox first, then WebKit. */ scrollbar-width: thin; scrollbar-color: #c9c7d4 transparent; } .bm-translate-modal__grid--secondary::-webkit-scrollbar { width: 8px; } .bm-translate-modal__grid--secondary::-webkit-scrollbar-track { background: transparent; } .bm-translate-modal__grid--secondary::-webkit-scrollbar-thumb { background: #c9c7d4; border-radius: 4px; } .bm-translate-modal__grid--secondary::-webkit-scrollbar-thumb:hover { background: #a5a0b8; } .bm-translate-modal__no-results { font-size: 12px; color: #9ca3af; text-align: center; padding: 24px 0 8px; font-style: italic; } .bm-translate-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #f8f9fa; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; font-family: inherit; text-align: left; } .bm-translate-option:hover { border-color: #5b4dff; background: #ffffff; transform: translateY(-1px); } .bm-translate-option--active { border-color: #5b4dff; background: #efedff; } .bm-translate-option__native { font-size: 14px; font-weight: 600; color: #212529; line-height: 1.2; } .bm-translate-option__label { font-size: 11px; color: #6c757d; margin-top: 2px; } .bm-translate-modal__actions { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 0 0; margin-bottom: 16px; } .bm-translate-modal__dismiss, .bm-translate-modal__more-langs { background: transparent; border: 0; padding: 0; font-size: 12px; color: #6c757d; cursor: pointer; font-family: inherit; text-decoration: underline; } .bm-translate-modal__dismiss:hover, .bm-translate-modal__more-langs:hover { color: #5b4dff; } .bm-translate-modal__disclaimer { margin-top: 14px; padding: 10px 12px; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 11px; line-height: 1.5; color: #6c757d; display: flex; align-items: flex-start; gap: 8px; } .bm-translate-modal__disclaimer svg { flex-shrink: 0; margin-top: 2px; color: #9ca3af; } .bm-translate-modal__disclaimer span { flex: 1; } @media (max-width: 480px) { .bm-translate-modal__grid { grid-template-columns: 1fr; } }