/* ============================================================================= Arabic-locale typography for 3rb.io ----------------------------------------------------------------------------- HOW THE ARABIC FONT IS APPLIED (and why NOT with @font-face): An earlier attempt extended the existing family names (Ubuntu, Poppins, Roboto, Segoe UI, Fredoka One) with @font-face rules pointing at Cairo, scoped by unicode-range. That REGRESSED Latin rendering everywhere, because: - Segoe UI / Roboto / Fredoka One were never webfonts here (only Ubuntu and Poppins load from Google). Declaring @font-face for those names SHADOWED the local system fonts with an Arabic-only face, so Latin text could no longer use them and fell through to the next family in the stack. - For Ubuntu, the extra face declared a variable weight range (300 900), which competes with Google's discrete 400/700/900 faces during font matching. In canvas (PixiJS uses a bare `fontFamily: 'Ubuntu'` with no fallback list) that could resolve to the Arabic-only face and drop Latin glyphs to a default system font. The correct mechanism, used now: Cairo is loaded as its OWN family and is only ever referenced as a TRAILING entry in a font stack. Appending a family at the END of a stack is provably safe for Latin — the browser only reaches it for codepoints no earlier family covers (i.e. Arabic). Nothing is shadowed, so English is bit-for-bit identical in both DOM and canvas. Canvas text gets the same treatment explicitly in client/entity/Entity.js. This file therefore contains ONLY locale-scoped metric fixes. They hang off the attribute stamped by client/i18n/domLabels.js, so they are inert unless Arabic is the active locale. NOTE: `lang` only, never `dir` — layout stays LTR/fixed. No RTL. ============================================================================= */ /* Arabic is cursive: any tracking breaks the joins between letters. Harmless for the Latin tokens (VIP, usernames) and digits that share the Arabic UI. */ html[lang="ar"] * { letter-spacing: normal !important; /* direction: rtl ; */ } /* text-transform:uppercase is a no-op for Arabic (no letter case); turn it off on the eyebrow/section labels so they read cleanly. */ html[lang="ar"] .inv-section-label, html[lang="ar"] .evt-prize-eyebrow, html[lang="ar"] .gh-showcase-section-title, html[lang="ar"] .cs-section-title { text-transform: none; } /* Arabic sits taller (ascenders + diacritics) than Latin at the same size; give the multi-line text surfaces a little more leading so nothing clips. Scoped to genuine prose containers to avoid shifting fixed-height chrome. */ /* html[lang="ar"] .messageText, html[lang="ar"] .msgs-row-text, html[lang="ar"] .rbMenu p, html[lang="ar"] .clan-desc { line-height: 1.7; } */ html[lang="ar"] #searchText { right: 180px; } html[lang="ar"] .rbLoginIntroIcon { left: 165px; } html[lang="ar"] .vip-drop-tooltip, html[lang="ar"] .gh-badges-dropdown-title, html[lang="ar"] .cs-section-title, html[lang="ar"] .registerLanguageCard span, html[lang="ar"] .gh-settings-page-title, html[lang="ar"] .gh-setting-sub, html[lang="ar"] .clan-pin-message-length, html[lang="ar"] .clan-des-length, html[lang="ar"] .mega-error, html[lang="ar"] .vip-badge-container .vip-tooltip-box, html[lang="ar"] .gh-setting-label, html[lang="ar"] .clanoptinohint, html[lang="ar"] .pinnedNote, html[lang="ar"] .pinnedBy, html[lang="ar"] .toastsmain, html[lang="ar"] .clan-type-opt, html[lang="ar"] .form-description, html[lang="ar"] #userMenu, html[lang="ar"] .giftmConfirmNote, html[lang="ar"] .giftmConfirmText, html[lang="ar"] .giftmRules, html[lang="ar"] .giftmHeader .giftmHeaderText, html[lang="ar"] .rbPerkWideText b, html[lang="ar"] .rbPerkWideText em, html[lang="ar"] .themeSettings .gpSection, html[lang="ar"] .gpRow__label, html[lang="ar"] .regionCard span, html[lang="ar"] .languageCard span { text-align: right; } html[lang="ar"] .fmTooltip, html[lang="ar"] .messageText, html[lang="ar"] .promo-off, html[lang="ar"] .evt-banner-footer, html[lang="ar"] .rbXpTableWrap, html[lang="ar"] .rbXpChips, html[lang="ar"] .csp-price-block, html[lang="ar"] .clans-weekly-entry, html[lang="ar"] .cs-section, html[lang="ar"] .rbServersHeader, html[lang="ar"] .clan-ach-body, html[lang="ar"] .clan-ach-header-sub, html[lang="ar"] .clan-type-row, html[lang="ar"] .gh-settings-page-header, html[lang="ar"] .coin-popup-item, html[lang="ar"] .rbSectionLabel, html[lang="ar"] .friendCodePreviewBadge, html[lang="ar"] .apple-confirm-footer, html[lang="ar"] .rbStatsHead, html[lang="ar"] .msgDetailActions, html[lang="ar"] .msgDetailBody h3, html[lang="ar"] .msgs-row-title, html[lang="ar"] .giftmHeader, html[lang="ar"] .giftmItem, html[lang="ar"] .gpSection, html[lang="ar"] .gameplaySettings__resetRow, html[lang="ar"] .controlsSettings__reset, html[lang="ar"] .regionCard, html[lang="ar"] .clan-xp-paused-badge, html[lang="ar"] #accountCreationDate, html[lang="ar"] .clan-hero-stats-row , html[lang="ar"] .clan-pin-message-hero, html[lang="ar"] .clan-delete-section, html[lang="ar"] .clan-pin-message-main, html[lang="ar"] .clan-discord-integration, html[lang="ar"] .legend-name-color, html[lang="ar"] .clan-set-color-preview, html[lang="ar"] .clan-set-color, html[lang="ar"] .admin-feature-clanoptions, html[lang="ar"] .clan-searchbar, html[lang="ar"] .clan-details-grid, html[lang="ar"] .clan-enter-note, html[lang="ar"] .mega-error, html[lang="ar"] .gpRow, html[lang="ar"] .gh-switch-group, html[lang="ar"] .clan-inv-info { direction: rtl; } html[lang="ar"] .vsp-msg, html[lang="ar"] .csp-msg, html[lang="ar"] .coins-popup-header, html[lang="ar"] .msgDetailBody p, html[lang="ar"] .msgDetailBody, html[lang="ar"] .clan-pin-message-hero, html[lang="ar"] .clans-weekly-reset, html[lang="ar"] .form-body, html[lang="ar"] .clans-weekly-help-main, html[lang="ar"] .clan-detail-overlay, html[lang="ar"] .rbProfileOut, html[lang="ar"] #loginFriendsTabsContentFriendsAddFriend, html[lang="ar"] #friendIdBtn:hover, html[lang="ar"] .vsp-header .vsp-header-top, html[lang="ar"] .csp-header .csp-header-top, html[lang="ar"] .msgDetailHeader, html[lang="ar"] .msgs-list, html[lang="ar"] .msgs-toolbar, html[lang="ar"] .controlsSettings__hint, html[lang="ar"] .languageSettings__hint, html[lang="ar"] .publicOption, html[lang="ar"] .transfter-conf-main, html[lang="ar"] .transfter-conf, html[lang="ar"] .giftmBody { text-align: right; direction: rtl; } html[lang="ar"] .csp-msg-tag, html[lang="ar"] .vsp-msg .vsp-msg-tag { margin-right: auto; margin-left: 0; } html[lang="ar"] .vsp-card-features, html[lang="ar"] .csp-features { direction: rtl !important; } html[lang="ar"] .popup-layout { text-align: right !important; } html[lang="ar"] .gh-setting-row-chevron { transform: scaleX(-1); } html[lang="ar"] .giftmRules li { padding-left: 0; padding-right: 16px; } html[lang="ar"] .giftmRules li::before { left: auto; right: 2px; } html[lang="ar"] .coin-popup-popular-badge { right: 0px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; width: fit-content; } html[lang="ar"] .rbVipBadge { margin-left: 6px; } html[lang="ar"] .rbFullBadge { right: 26.7px; } html[lang="ar"] .friendStatus { margin-right: 5px; } html[lang="ar"] .friend-hover-view { right: 10px; } html[lang="ar"] .gh-showcase-row-right { gap: 16px; } html[lang="ar"] .event-perks-box { text-align: right; direction: ltr; } html[lang="ar"] .strike-tip-box { right: -185px; } html[lang="ar"] .rbXpNowTag { margin-right: 7px; }