/* ═══════════════════════════════════════════════════════════ RADIANT OPTIMIZER — Translation & Language Layout Fix Prevents Google Translate from breaking page layouts on any language. Applied globally across ALL pages. ═══════════════════════════════════════════════════════════ */ /* ── 1. Stop Google Translate from nudging the page down ── */ body { top: 0 !important; position: static !important; margin-top: 0 !important; } /* ── 2. Hide all Google Translate UI chrome ── */ .goog-te-banner-frame, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip-content, .goog-text-highlight, .goog-te-highlight, .skiptranslate, #google_translate_element, .goog-te-menu-frame, .goog-te-gadget, .VIpgJd-ZVi9od-ORHb, .VIpgJd-ZVi9od-SmfZ-Yx1VJ, iframe.skiptranslate { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ── 3. Protect flex / grid layouts from injection ── Google Translate wraps every text node in a element. These can silently break flex-gap, line-height and alignment. */ #nav font, #nav span font, #nav a font, #nav button font, #nav li font, .nav-brand font, .nav-links font, .nav-cta font, .nav-burger font, #radiant-lang-switcher font, .lang-btn font, .lang-dropdown font, .footer-inner font, footer font, h1 font, h2 font, h3 font, h4 font, h5 font, h6 font { display: inline !important; line-height: inherit !important; font-size: inherit !important; font-family: inherit !important; vertical-align: baseline !important; color: inherit !important; } /* ── 4. Keep the navigation bar LTR in every language ── */ #nav, .nav-brand, .nav-links, #radiant-lang-switcher, .lang-btn, .lang-dropdown { direction: ltr !important; unicode-bidi: embed !important; text-align: left !important; } /* ── 5. Preserve nav flex layout during translation ── */ #nav { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 24px; /* sensible default; overridden by page-specific CSS */ } .nav-brand { display: flex !important; align-items: center !important; flex-shrink: 0 !important; white-space: nowrap !important; overflow: hidden !important; } .nav-brand-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 180px !important; /* notranslate hint — the JS also adds the class */ display: inline-block !important; } .nav-links { display: flex !important; align-items: center !important; flex-shrink: 0 !important; white-space: nowrap !important; } .nav-cta, .nav-burger { flex-shrink: 0 !important; white-space: nowrap !important; } /* ── 6. Lang-switcher stays intact ── */ #radiant-lang-switcher { flex-shrink: 0 !important; position: relative !important; z-index: 9100 !important; display: flex !important; align-items: center !important; } .lang-dropdown { direction: ltr !important; text-align: left !important; position: absolute !important; right: 0 !important; top: calc(100% + 8px) !important; } /* ── 7. RTL language support (Arabic, Hebrew, etc.) ── translate.js sets [dir="rtl"] on for RTL locales. */ [dir="rtl"] body { direction: rtl; text-align: right; } /* The nav pill always stays left-to-right */ [dir="rtl"] #nav { direction: ltr !important; } /* Flip main content containers for RTL */ [dir="rtl"] section, [dir="rtl"] article, [dir="rtl"] .news-card, [dir="rtl"] .review-card, [dir="rtl"] .feature-card, [dir="rtl"] .pricing-card, [dir="rtl"] .dash-panel { direction: rtl; text-align: right; } /* Keep left-aligned elements that should stay LTR in RTL mode */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .font-mono, [dir="rtl"] [class*="mono"], [dir="rtl"] .badge, [dir="rtl"] .tag, [dir="rtl"] .price, [dir="rtl"] .stat-number { direction: ltr !important; unicode-bidi: bidi-override; text-align: right; } /* ── 8. CJK & long-word overflow protection ── Japanese / Chinese / Korean text needs different word-break rules */ body { word-break: normal; overflow-wrap: break-word; } :lang(ja) body, :lang(zh) body, :lang(zh-CN) body, :lang(ko) body { word-break: break-all; } /* ── 9. Prevent translated headlines from blowing up layout ── */ h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* ── 10. Ensure every page's body bg is correct after translate ── */ html, body { background-color: #0A0A0B; /* var(--black) fallback */ } /* ── 11. Mobile nav stays sane in RTL ── */ [dir="rtl"] #mobileMenu { direction: rtl; text-align: right; } [dir="rtl"] #mobileMenu .mm-close { left: 24px; right: auto; } /* ── 12. Footer layout preservation ── */ footer, .site-footer, [class*="footer"] { direction: ltr; /* reset; RTL applied only to inner copy */ } [dir="rtl"] footer, [dir="rtl"] .site-footer, [dir="rtl"] [class*="footer"] { direction: rtl; }