on untranslated pages */ /* ========================================================================== 03 Arabic typography Font: IBM Plex Sans Arabic (300–700, Google Fonts, display=swap — the comes from config/locales.php `font_url`, emitted only for `ar`). Its Latin glyphs are Plex-matched, so brand names inside Arabic sentences sit on the same baseline. Plus Jakarta Sans / Inter stay as fallbacks. ========================================================================== */ /* the v3 font tokens are declared on the scopes below at (0,1,0); (0,2,0) here rebinds them for every element whose own language is Arabic (an English

keeps the Latin stack) */ :is(.v3, .v3-header, .v3-footer, .v3-offcanvas, .v3-modal):lang(ar) { --v3-font-display: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, system-ui, sans-serif; --v3-font-body: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Inter', 'Segoe UI', Tahoma, system-ui, sans-serif; } /* v3-auth.css sets a literal Inter stack on body.login (0,1,1) */ body.login:lang(ar) { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Inter', 'Segoe UI', Tahoma, system-ui, sans-serif; } /* weights: the display scale asks for 800 (dxl, nxl); Plex Sans Arabic tops out at 700 — avoid faux bold */ :is(.v3-t-dxl, .v3-t-nxl):lang(ar) { font-weight: 700; } /* tracking: negative display tracking and the .08em uppercase tracking both break Arabic letter joins */ :is(.v3-t-dxl, .v3-t-dlg, .v3-t-dmd, .v3-t-dsm, .v3-t-nxl, .v3-t-kpi-lg, .v3-t-kpi, .v3-t-hlg, .v3-t-eye, .v3-eyebrow, .v3-foot__h, .v3-tile__label, .v3-ledger__head, .v3-console__title, .v3-timeline__step, .v3-lang__btn, .v3-chip, .v3-tile__value, .v3-m-lang__h):lang(ar), .v3-ledger--cols .v3-ledger__v.v3-t-kpi:lang(ar), .v3-hero__facts .v3-tile__value:lang(ar) { letter-spacing: 0; } /* line-height: Arabic ascenders/descenders and diacritics need ≈ +12 % over the Latin scale (the responsive .v3-t-* overrides in v3.css are (0,1,0); these (0,2,0)+ rules win at every width) */ .v3-t-dxl:lang(ar) { line-height: 1.2; } .v3-t-dlg:lang(ar) { line-height: 1.25; } .v3-t-dmd:lang(ar) { line-height: 1.28; } .v3-t-dsm:lang(ar) { line-height: 1.3; } .v3-t-nxl:lang(ar) { line-height: 1.15; } .v3-t-kpi-lg:lang(ar) { line-height: 1.15; } .v3-t-kpi:lang(ar) { line-height: 1.2; } .v3-t-hlg:lang(ar) { line-height: 1.35; } .v3-t-hmd:lang(ar) { line-height: 1.45; } .v3-t-hsm:lang(ar) { line-height: 1.55; } .v3-t-blg:lang(ar) { line-height: 1.85; } .v3-t-b:lang(ar) { line-height: 1.8; } .v3-t-bsm:lang(ar) { line-height: 1.75; } .v3-t-lbl:lang(ar) { line-height: 1.55; } .v3-t-cap:lang(ar) { line-height: 1.6; } :is(.v3-t-eye, .v3-eyebrow, .v3-tile__label, .v3-foot__h, .v3-ledger__head, .v3-console__title, .v3-timeline__step):lang(ar) { line-height: 1.45; } :is(.v3-label, .v3-check, .v3-forget, .v3-ledger__k, .v3-ledger__v, .v3-timeline__t, .v3-lang__item, .v3-m-lang__item, .v3-m-foot__mail):lang(ar) { line-height: 1.55; } :is(.v3-hint, .v3-ledger__sub, .rules li, .v3-foot-legal a, .v3-foot-lang a):lang(ar) { line-height: 1.6; } :is(.v3-alert, .v3-foot__blurb, .v3-modal .modal-body p):lang(ar) { line-height: 1.75; } .v3-input:lang(ar) { line-height: 1.55; } textarea.v3-input:lang(ar) { line-height: 1.7; } body .v3-footer.f_site .copy_right:lang(ar) { line-height: 1.7; } .v3-tile__body:lang(ar) { line-height: 1.75; } .v3-ledger--bare .v3-ledger__k:lang(ar), .v3-ledger--bare .v3-ledger__v:lang(ar) { line-height: 1.55; } .v3-ledger--cols .v3-ledger__v.v3-t-kpi:lang(ar) { line-height: 1.2; } .v3-ledger--cols .v3-ledger__v.v3-t-hsm:lang(ar) { line-height: 1.55; } .v3-hero__facts .v3-tile__value:lang(ar) { line-height: 1.2; } .v3-faq .accordion-button:lang(ar) { line-height: 1.55; } .v3-faq .accordion-body:lang(ar) { line-height: 1.8; } /* the 12px caption family reads one step smaller in Arabic (no capitals) — 13px keeps the boxes (24px chip, 44px ledger head) unchanged */ :is(.v3-t-eye, .v3-eyebrow, .v3-tile__label, .v3-foot__h, .v3-ledger__head, .v3-console__title, .v3-timeline__step, .v3-chip, .v3-t-cap):lang(ar) { font-size: 13px; } .v3-hero__facts .v3-tile__body:lang(ar) { font-size: 13px; line-height: 1.6; } .v3-lang__item .v3-lang__hint:lang(ar) { font-size: 11px; } /* the two-letter code stays Latin-sized */ /* ========================================================================== 04 Bidi islands and LTR containers ========================================================================== */ /* helper for blades / translators: a Latin or numeric token inside Arabic text (email, URL, "Net 30", "USD · EUR · TRY", "1–3", "<24h", "$50") */ .v3-bidi { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* block-level values that usually hold a literal (a number, a currency list, an address): `plaintext` picks the paragraph direction from the first strong character, so "Net 30", "1,000+", "<24h" and an email stay in reading order without markup changes, while a translated Arabic value in the same slot still renders RTL. Chips and .v3-ledger__v are flex containers, so the property cannot reach their anonymous text box — those rely on the U+2066…U+2069 isolates the translators put in the strings (09 §5.2). */ [dir="rtl"] :is(.v3-tile__value, .v3-foot__mail b, a[href^="mailto:"], .v3-lang__hint, .v3-m-foot__mail span, .v3-console__title) { unicode-bidi: plaintext; } [dir="rtl"] .v3-tile__value { text-align: right; } /* a wrapped Latin value still aligns with its Arabic label */ /* LTR-by-nature inputs: the value is Latin (an address, a password). `direction` on the control remaps its own logical padding, so the padding is restated physically to keep the leading icon (inset-inline-start of .ctl = right) and the eye button (inset-inline-end = left) uncovered. */ [dir="rtl"] .v3-input:is([type="email"], [type="url"], [type="tel"], [type="password"]) { direction: ltr; text-align: right; padding-left: 14px; padding-right: 44px; } [dir="rtl"] .ctl.has-eye .v3-input { padding-left: 48px; padding-right: 44px; } /* the partner logo strip: Owl positions .owl-item with float:left and translate3d — keep it LTR */ [dir="rtl"] .owl-carousel { direction: ltr; } /* Turnstile: the widget renders Arabic inside its own iframe (language from vaI18n.turnstile); the wrapper stays LTR and the iframe sits at the form's inline-start (right) edge */ [dir="rtl"] .v3-turnstile { direction: ltr; justify-content: flex-end; } @media (max-width: 379.98px) { [dir="rtl"] .v3-contact__card .v3-turnstile > * { transform-origin: 100% 0; } } /* ========================================================================== 05 Component fix-ups — rules that are still physical in v3.css / v3-auth.css ========================================================================== */ /* close buttons (v3.css uses margin shorthands: `0 -10px 0 auto` / `0 0 0 auto`) */ [dir="rtl"] .v3-offcanvas .btn-close { margin: 0 auto 0 -10px; } [dir="rtl"] .v3-modal .btn-close { margin: 0 auto 0 0; } /* active link marker in the offcanvas: inset shadow on the inline-start edge */ [dir="rtl"] .v3-m-links a.active, [dir="rtl"] .v3-m-links .nav-link.active { box-shadow: inset -3px 0 0 #FBBC04; } /* glows / gradients drawn from the top-left in LTR */ [dir="rtl"] .v3-panel::after { background: radial-gradient(640px 420px at 92% -10%, rgba(251,188,4,.20), transparent 62%); } [dir="rtl"] .v3-platform::after { background: radial-gradient(640px 420px at 15% 0%, rgba(251,188,4,.14), transparent 62%); } [dir="rtl"] .v3-auth aside.right::after { background: radial-gradient(520px 360px at 15% 5%, var(--au-aside-glow, rgba(251,188,4,.16)), transparent 62%); } [dir="rtl"] .v3-cta { background: linear-gradient(255deg, #FBBC04 0%, #F59E0B 60%, #F08A0C 100%); } /* console "loading arc" mark: gap at the top-right in LTR → top-left */ [dir="rtl"] .v3-console__mark { border-right-color: #FBBC04; border-left-color: transparent; transform: rotate(45deg); } /* the platform screenshot is an LTR dashboard whose side menu is on the left: keep the "Demo account · sample data" caption over the content area (top-right), not over the menu */ [dir="rtl"] .v3-platform__shot figcaption { inset-inline-end: auto; inset-inline-start: 16px; } /* the play triangle points right in every language; the 2px optical nudge follows the tip */ [dir="rtl"] .v3-play .v3-i { margin-inline-start: 0; margin-inline-end: 2px; } /* v3-auth.css: body.login .v3-foot-marks { margin-left: auto } — physical, and v3.css already gives the same element margin-inline-start:auto (= margin-right in RTL): two autos centre it */ [dir="rtl"] body.login .v3-foot-marks { margin-left: 0; margin-right: auto; } @media (max-width: 575.98px) { [dir="rtl"] body.login .v3-foot-marks { margin-right: 0; } } /* ========================================================================== 06 Hero typing — word-level fade (span.typing#text_anim) The home inline script sets el.style.animation = " ease forwards" with name = v3-wordfade-in / v3-wordfade-out when dir="rtl" (reveal / hide otherwise). The span starts hidden like the LTR clip-path state and the `done` class (added after the last phrase) pins it visible. ========================================================================== */ [dir="rtl"] .typing { clip-path: none; padding-inline-end: 0; opacity: 0; will-change: opacity, transform; } [dir="rtl"] .typing.done { opacity: 1; } [dir="rtl"] .typing::after { display: none; } /* no caret: nothing is being "typed" */ @keyframes v3-wordfade-in { from { opacity: 0; transform: translateY(.15em); } to { opacity: 1; transform: none; } } @keyframes v3-wordfade-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.1em); } } /* ========================================================================== 07 Reduced motion — the v3.css block already zeroes durations; this only re-provides the RTL resting state (the script writes the last phrase and adds `done` without animating). ========================================================================== */ @media (prefers-reduced-motion: reduce) { [dir="rtl"] .typing { opacity: 1 !important; transform: none !important; animation: none !important; } }