/* ============================================================================ * EOG · language presentation — scripts, fonts and RTL * Loaded last on every public page, after eo-site.css and eo-mobile.css. * * Two jobs: * 1. Give Arabic and Chinese a real typeface. Nunito / Nunito Sans cover * Latin, Latin-ext, Cyrillic and Vietnamese — so EN/FR/ES/RU are already * branded correctly and need nothing here. Neither family has a single * Arabic or Han glyph, so those two languages would otherwise fall through * to whatever "sans-serif" happens to be on the device. * 2. Mirror the layout for Arabic. eo-i18n.js sets dir="rtl" on ; * everything below reacts to that. Only genuinely directional rules are * flipped — the ones inventoried out of eo-site.css. * * The webfonts themselves are NOT linked from here. eo-i18n.js injects the * Google Fonts only when Arabic or Chinese is actually selected, so the * other four languages never pay for a font they cannot read. * ========================================================================= */ /* ── 1 · Script-specific typefaces ──────────────────────────────────────── */ /* !important is deliberate: the site sets font-family inline in many places, and an inline style would otherwise win over any stylesheet rule. Scoped to a single language each, so nothing else on the site is affected. */ :root[data-lang="ar"] body, :root[data-lang="ar"] body *:not(svg):not(svg *) { font-family: 'Noto Sans Arabic', 'Nunito Sans', sans-serif !important; } :root[data-lang="zh"] body, :root[data-lang="zh"] body *:not(svg):not(svg *) { font-family: 'Noto Sans SC', 'Nunito Sans', sans-serif !important; } /* Arabic and Chinese sit taller in the line box than Latin; the site's tight display leading clips ascenders/descenders without this. */ :root[data-lang="ar"] h1, :root[data-lang="ar"] h2, :root[data-lang="ar"] h3, :root[data-lang="ar"] .section-h2, :root[data-lang="ar"] .hero-title, :root[data-lang="zh"] h1, :root[data-lang="zh"] h2, :root[data-lang="zh"] h3, :root[data-lang="zh"] .section-h2, :root[data-lang="zh"] .hero-title { line-height: 1.32; } /* The display type is set in tight, negative tracking tuned for Latin. Neither script should ever be letter-spaced — in Arabic it breaks the joins. */ :root[data-lang="ar"] *, :root[data-lang="zh"] * { letter-spacing: normal !important; } /* …but the small-caps eyebrows lose their identity at zero tracking, so give the Chinese ones a little back. Arabic stays at normal — it must. */ :root[data-lang="zh"] .section-label, :root[data-lang="zh"] .footer-hosts-eyebrow, :root[data-lang="zh"] .footer-nav h4, :root[data-lang="zh"] .mega-col-title { letter-spacing: .08em !important; } /* ── 2 · Right-to-left (Arabic) ─────────────────────────────────────────── */ /* Literal arrow glyphs (→ ↗) do not mirror on their own. Flip them visually rather than swapping every string. */ [dir="rtl"] .mm-arrow, [dir="rtl"] .nav-freesel, [dir="rtl"] .country-row-ext { display: inline-block; } [dir="rtl"] .mm-arrow { transform: scaleX(-1); } /* Nav */ [dir="rtl"] .nav-logo span { border-left: none; border-right: 1px solid rgba(30, 100, 95, .2); padding-left: 0; padding-right: 8px; } [dir="rtl"] .nav-dropdown > a::after { margin-left: 0; margin-right: 4px; } [dir="rtl"] .mega-menu a:hover { padding-left: 0; padding-right: 6px; } [dir="rtl"] .mega-menu a.mm-disabled:hover { padding-right: 0; } [dir="rtl"] .mega-menu a .mm-arrow { margin-left: 0; margin-right: 4px; } [dir="rtl"] .mm-soon { margin-left: 0; margin-right: 6px; } /* Dropdown panels anchor to the opposite edge */ [dir="rtl"] .nav-lang-menu, [dir="rtl"] .nav-profile-menu { right: auto; left: 0; } [dir="rtl"] .nav-lang-opt, [dir="rtl"] .nav-profile-menu a, [dir="rtl"] .nav-profile-menu button { text-align: right; } /* Vertical side nav */ [dir="rtl"] .sidenav { left: auto; right: 0; } [dir="rtl"] .sn-sub { left: auto; right: 100%; } [dir="rtl"] .mi-dot { margin-left: 0; margin-right: 2.2rem; } [dir="rtl"] .td { margin-left: 0; margin-right: 2rem; } /* Timeline — the rail, dots and text indent all sit on the left by default */ [dir="rtl"] .tl-line { left: auto; right: 19px; } [dir="rtl"] .tl-item { padding-left: 0; padding-right: 62px; } [dir="rtl"] .tl-dot { left: auto; right: 10px; } @media (max-width: 768px) { [dir="rtl"] .tl-line { right: 13px; } [dir="rtl"] .tl-item { padding-right: 46px; } [dir="rtl"] .tl-dot { right: 4px; } } /* Oversized decorative background words bleed off the opposite edge */ [dir="rtl"] .hero-bg-text, [dir="rtl"] .register-bg-word { right: auto; left: -2%; } [dir="rtl"] .champion-bg-word { right: auto; left: -5%; } [dir="rtl"] .split-bg-word { left: auto; right: -1%; } /* Lightbox close button */ [dir="rtl"] .lb-close { right: auto; left: 1.5rem; } /* Footer */ [dir="rtl"] .footer-side-label { left: auto; right: 18px; transform: translateY(-50%) rotate(90deg); } [dir="rtl"] .footer-host--right { justify-content: flex-start; text-align: left; } [dir="rtl"] .footer-host { flex-direction: row-reverse; } [dir="rtl"] .footer-host--right { flex-direction: row; } @media (max-width: 600px) { [dir="rtl"] .footer-host, [dir="rtl"] .footer-host--right { flex-direction: row-reverse; } } /* The skyline is a depiction of two real cities — it must never mirror. */ [dir="rtl"] .footer-skyline svg { transform: none; } /* Help panel (eo-chat.js) is fixed to the right-hand side */ [dir="rtl"] .eogc-launch, [dir="rtl"] .eogc-panel { right: auto; left: 22px; } [dir="rtl"] .eogc-search svg { left: auto; right: 23px; } [dir="rtl"] .eogc-search input { padding: 9px 34px 9px 12px; } [dir="rtl"] .eogc-q { text-align: right; padding: 11px 13px 11px 34px; } [dir="rtl"] .eogc-q::after { right: auto; left: 14px; } [dir="rtl"] .eogc-msg.bot { border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; } @media (max-width: 480px) { [dir="rtl"] .eogc-launch { right: auto; left: 14px; } [dir="rtl"] .eogc-panel { left: 8px; right: 8px; } } /* Lists indent from the correct side */ [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.2em; } /* ── 3 · Switcher affordance ────────────────────────────────────────────── */ /* Keyboard focus was invisible on the language buttons. */ .nav-lang-opt:focus-visible, .footer-lang-btn:focus-visible { outline: 2px solid var(--teal, #3ECFC9); outline-offset: 2px; }