/* ========================================================================= * i18n.css — per-language presentation overlay * * Loaded LAST in the so it wins over the theme bundles and the inline * font-enforcement rules. Responsibilities: * 1. Map each language to an appropriate font stack. * 2. Provide language-switcher styling. * 3. A couple of direction-neutral helpers. * * Direction (rtl/ltr) itself is handled by loading the matching theme bundle * and the attribute — not here. * ========================================================================= */ /* ---- Web brand fonts (loaded once for every page that pulls i18n.css) ---- * Vazirmatn → Persian/Arabic UI · Inter → Latin UI · Fraunces → Latin display. * They are the *first* choice in each stack below, with the previous * system-font lists kept as graceful fallbacks for offline use. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap'); /* ---- Font stacks (per language) ---------------------------------------- * We expose the language font as a CSS variable, then apply it to every * element EXCEPT icon elements. Icon glyph fonts (Font Awesome / Line Awesome / * Flaticon) live on tags (and a few icon class spans) in this theme, so we * exclude those with :not(...) — otherwise the font override would replace the * icon font and the glyphs would render as empty boxes / letters. */ html[lang="fa"] { --app-font: 'Vazirmatn', iranyekan, 'IRANSans', Tahoma, Arial, sans-serif; } html[lang="ar"] { --app-font: 'Vazirmatn', 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif; } html[lang="en"], html[lang="de"] { --app-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; } html[lang="ja"] { --app-font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', 'Yu Gothic UI', Meiryo, system-ui, sans-serif; } html[lang="zh"] { --app-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', system-ui, sans-serif; } /* Latin-script locales get the Fraunces display serif on headings & brand * titles (a Latin serif cannot render Persian/Arabic/CJK, so those locales * intentionally keep their body font for headings). Placed AFTER the broad * font rule below via higher specificity so it wins. */ /* Base font inherited by the document. */ html[lang] body { font-family: var(--app-font, inherit); } /* Apply the language font to everything that is NOT an icon. The :not() chain * skips tags, icons, and any element whose class carries an icon * glyph token (fa-*, la-*, flaticon*, socicon*, kt-svg-icon*). */ html[lang] body *:not(i):not(svg):not([class*="flaticon"]):not([class*="fa-"]):not([class*="la-"]):not([class*="socicon"]):not([class*="kt-svg"]) { font-family: var(--app-font) !important; } /* Icons ( tags and icon-class spans) are excluded above, so Font Awesome / * Line Awesome / Flaticon keep their own glyph fonts untouched. */ /* Latin display serif on headings (Latin-script locales only). */ html[lang="en"] body :is(h1, h2, h3, .kt-portlet__head-title, .kt-subheader__title, .kt-login__title), html[lang="de"] body :is(h1, h2, h3, .kt-portlet__head-title, .kt-subheader__title, .kt-login__title) { font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important; letter-spacing: .2px; } /* ---- Language switcher -------------------------------------------------- */ .kt-lang-switch .kt-header__topbar-icon { font-size: 20px; line-height: 1; } .kt-lang-switch .dropdown-menu { min-width: 200px; } .kt-lang-switch .kt-nav__link-flag { font-size: 18px; margin-inline-end: 10px; } .kt-lang-switch .kt-nav__item--active .kt-nav__link { background-color: rgba(55, 74, 251, 0.08); border-radius: 4px; } .kt-lang-switch .kt-nav__link-text { font-size: 15px; } /* ---- Direction-aware niceties ------------------------------------------ */ /* Numbers, prices and codes should always read left-to-right even inside RTL. */ .ltr-embed, .kt-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }