/* * RTL for the Arabic copy (one_sdk/ar/). * * The landing is a pixel-positioned composition layered over Spine * animations, with JS sliders and many flex rows. Letting * mirror ALL of that pushes wide flex blocks to the right, clips the stages and * reverses the sliders (which compute transforms assuming LTR). So instead of * mirroring the geometry we KEEP THE LAYOUT LTR — identical to EN — and only * flip the TEXT to read right-to-left. stays for semantics and * to flip the standalone overlays (switcher, chat) that live outside .page. * * iPhone 11 / iOS Safari 13+ safe: direction / text-align / fixed offsets only. */ /* 1. Pin all in-page geometry back to LTR: flex order, slider transforms and the absolute stages all behave exactly as on the EN page. */ .page { direction: ltr; } /* Header nav: reverse item order for RTL reading. The bar itself stays LTR (logo left / switcher right); only the nav items flow right-to-left. */ .site-nav { direction: rtl; } /* 2. Copy that is left-aligned on EN → right-aligned, RTL flow. (direction:rtl also right-starts the flex text containers like the H1.) */ .hero__title, .hero__subtitle-wrap, .hero__lead, .hero__desc, .integration__title-blue, .integration__title-main, .integration__subtitle, .integration__card-title, .integration__card-text, .integration__card2-title, .integration__card2-text, .comparison__heading, .comparison__solo-title, .comparison__solo-text, .comparison__symphony-title, .comparison__symphony-text, .comparison__m-solo-title, .comparison__m-solo-text, .comparison__m-symphony-title, .comparison__m-symphony-text, .architecture__subtitle, .architecture__desc, .l10n-heading, .features__card-title, .features__card-text, .features__m-title, .features__m-text, .cases__name, .cases__quote, .vreviews__cap, .cta-section__copy-title, .cta-section__copy-sub, .cta-section__trusted-text, .comparison__table-feature-label, .comparison__table-solo-header, .comparison__table-symphony-name, .comparison__table-row-label, .comparison__table-solo-cell, .comparison__table-symphony-cell, .comparison__m-row-label, .comparison__m-cell-solo, .comparison__m-cell-sym, .comparison__m-hdr-solo, .comparison__m-hdr-sym { direction: rtl; text-align: right; } /* 2b. Comparison data cells: the columns stay in EN (LTR) order (so they keep matching the cards + connector lines above), so align each cell's text to its column's start (left) like EN instead of ragged-right with a gap. */ .comparison__table-solo-cell, .comparison__table-symphony-cell { justify-content: flex-end; text-align: left; } /* 3. Headings that are centred on EN stay centred — just shape RTL. */ .apps__heading, .apps__subtitle, .cases__heading, .cases__subtitle, .vreviews__heading, .vreviews__subtitle, .features__m-heading { direction: rtl; } /* 4. Lead form + A/B pop-up: labels and text inputs read RTL; technical inputs (email / url / phone) stay LTR. */ .formlead-form, .labelblock-6, .privacy-label, .h3text-xl, .ptext-sm, .try-a-free-ab-test-with-casai, .start-seeing-results, .abpop__form, .abpop__label, .abpop__privacy, .abpop__title, .abpop__sub, .abpop__micro, .inputname-5, .abpop__input, .messenger-dropdown { direction: rtl; text-align: right; } input[type="email"], input[type="url"], input[type="tel"], .iti--separate-dial-code .iti__selected-flag, #field-appstore, #field-email, #ap-app, #ap-email { direction: ltr; text-align: left; } /* 5. Modals / pop-up live outside .page (inherit html dir=rtl, which is the right reading direction for Arabic) — just keep their text right-aligned. */ #success-modal .modal, #error-modal .modal, .abpop__dialog { text-align: right; } /* 6. Floating chat widget → left edge (conventional for RTL). */ .cas-chat { right: auto; left: 22px; } .cas-chat__callout { right: auto; left: 98px; } .cas-chat__panel { right: auto; left: 0; } @media (max-width: 768px) { .cas-chat { right: auto; left: 16px; } .cas-chat__callout { right: auto; left: 78px; } }