/* i18n.css — language selector, per-script typography and the RTL mirroring layer. Tokens are the product's own (--premium-*, --sb-*); nothing new is introduced. */ /* ---------------------------------------------------------------- typography */ /* The active language's stack is set on by the server and updated on switch by i18n.js, so a language change re-types the whole page without any per-language CSS rule. */ :root { --i18n-font-stack: "Inter", "Segoe UI", system-ui, sans-serif; } body.udemy-bg { font-family: var(--i18n-font-stack); } /* Nastaliq needs vertical room; its default line box clips descenders in dense tables. */ html[lang="ur"] { line-height: 1.9; } /* ------------------------------------------------------------------ selector */ .lang-select { position: relative; flex-shrink: 0; } .lang-select__trigger { display: inline-flex; align-items: center; gap: 0.45rem; height: 40px; padding-inline: 0.6rem; border: 1px solid var(--sb-border, var(--premium-border, #e4e9f5)); border-radius: 10px; background: #fff; color: var(--sb-text, var(--premium-text, #171a25)); font-size: 0.85rem; font-weight: 600; line-height: 1; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .lang-select__trigger:hover { color: var(--premium-primary, #5b3df5); border-color: var(--premium-primary, #5b3df5); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(91, 61, 245, 0.14); } .lang-select__trigger:focus-visible { outline: 2px solid var(--premium-primary, #5b3df5); outline-offset: 2px; } .lang-select__globe { font-size: 0.9rem; color: var(--premium-primary, #5b3df5); } .lang-select__current { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lang-select__caret { font-size: 0.62rem; color: var(--premium-muted, #606a7f); transition: transform 0.2s ease; } .lang-select.is-open .lang-select__caret { transform: rotate(180deg); } .lang-select.is-busy .lang-select__trigger { opacity: 0.6; pointer-events: none; } /* The one loud detail: the panel unfolds from the trigger, and each language is set in its own script at a size that lets you actually read it. Everything else stays quiet. */ .lang-select__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 1040; min-width: 15rem; padding: 0.5rem; background: var(--premium-surface, #fff); border: 1px solid var(--sb-border, var(--premium-border, #e4e9f5)); border-radius: var(--premium-radius, 14px); box-shadow: var(--premium-shadow, 0 12px 36px rgba(30, 41, 59, 0.08)); transform-origin: top var(--i18n-panel-origin, right); animation: lang-select-unfold 0.18s cubic-bezier(0.2, 0.8, 0.3, 1); } [dir="rtl"] .lang-select__panel { --i18n-panel-origin: left; } @keyframes lang-select-unfold { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .lang-select__heading { margin: 0.15rem 0.55rem 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--premium-muted, #606a7f); } .lang-select__list { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; } .lang-select__option { position: relative; width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 0; border-radius: 9px; background: transparent; color: var(--premium-text, #171a25); text-align: start; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lang-select__option:hover { background: var(--premium-surface-2, #f9faff); } .lang-select__option:focus-visible { outline: 2px solid var(--premium-primary, #5b3df5); outline-offset: -2px; } .lang-select__option.is-active { background: rgba(91, 61, 245, 0.07); color: var(--premium-primary-dark, #4a2fe0); } /* Accent rail marks the current language — thinner and calmer than a filled row. */ .lang-select__option.is-active::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0.42rem; width: 2px; border-radius: 2px; background: var(--premium-primary, #5b3df5); } .lang-select__native { flex: 1; font-size: 1.02rem; font-weight: 600; line-height: 1.5; } .lang-select__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--premium-muted, #606a7f); } .lang-select__check { font-size: 0.7rem; color: var(--premium-primary, #5b3df5); opacity: 0; } .lang-select__option.is-active .lang-select__check { opacity: 1; } .lang-select__fallback { display: flex; flex-wrap: wrap; gap: 0.3rem; padding-top: 0.4rem; } .lang-select__fallback button { border: 1px solid var(--sb-border, #e4e9f5); border-radius: 8px; background: #fff; padding: 0.25rem 0.5rem; font-size: 0.8rem; } @media (max-width: 575.98px) { .lang-select__current { display: none; } .lang-select__trigger { width: 40px; padding-inline: 0; justify-content: center; } .lang-select__caret { display: none; } .lang-select__panel { position: fixed; inset-inline: 0.75rem; top: calc(var(--topbar-h, 60px) + 0.5rem); min-width: 0; } } @media (prefers-reduced-motion: reduce) { .lang-select__panel { animation: none; } .lang-select__trigger, .lang-select__caret, .lang-select__option { transition: none; } .lang-select__trigger:hover { transform: none; } } /* ----------------------------------------------------------------- RTL layer */ /* The 13 existing stylesheets predate this feature and use physical left/right properties. Rather than rewrite them (a separate, mechanical pass), this layer mirrors the shared chrome under [dir="rtl"]. All CSS written from here on uses logical properties instead, so this layer stops growing. */ /* .app-shell is a grid with named areas, and grid placement follows `direction` — the sidebar column moves to the right side on its own under RTL. So there is deliberately no margin or offset for the topbar/main here: adding one only reserves a second sidebar's worth of empty space. The sidebar's divider is the one physical property that does need mirroring, since it must sit against the content, not against the viewport edge. */ [dir="rtl"] .app-sidebar { border-right: 0; border-left: 1px solid var(--sb-border); } /* Below 992px the sidebar leaves the grid and becomes a fixed off-canvas drawer, anchored left and hidden with a negative translate. Anchoring it right without flipping the translate would park the closed drawer in the middle of the screen, so both change together. */ @media (max-width: 991.98px) { [dir="rtl"] .app-sidebar { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .app-shell.is-drawer-open .app-sidebar { transform: translateX(0); } } [dir="rtl"] .app-topbar__search-btn .kbd-group { margin-left: 0; margin-right: auto; } [dir="rtl"] .app-topbar__icon-btn .nav-count-badge, [dir="rtl"] .app-topbar__icon-btn .notification-alert-badge { right: auto; left: -4px; } [dir="rtl"] .dropdown-menu-end { --bs-position: start; right: auto; left: 0; } [dir="rtl"] .toast-container.end-0 { right: auto; left: 0; } /* Bootstrap spacing utilities are physical; these are the ones the chrome relies on. */ [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } /* Directional icons mirror; icons that mean a thing rather than a direction do not (a clock still runs clockwise, a logo is not flipped, a magnifier keeps its handle). */ [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-left, [dir="rtl"] .fa-arrow-right-to-bracket, [dir="rtl"] .fa-right-from-bracket, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-chevron-left, [dir="rtl"] .fa-angles-left, [dir="rtl"] .fa-angles-right, [dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-angle-left, [dir="rtl"] .fa-caret-right, [dir="rtl"] .fa-caret-left, [dir="rtl"] .fa-reply, [dir="rtl"] .fa-share, [dir="rtl"] .i18n-mirror { transform: scaleX(-1); } /* Progress fills grow from the inline start, which flips with direction. */ [dir="rtl"] .progress-bar { float: right; }