/* ========================================================== Quantum FinOps — RTL Loads LAST, after qf-base and qf-sections. Scoping: Zoho won't let you set dir="rtl" on , so a one-line Code Snippet on the /ar page does it: With that in place every selector below matches the demo's own RTL rules unchanged. Most of the build already uses logical properties (padding-inline-*, border-block-*, margin-inline, justify-self:end), so those flip for free. What follows is only what does NOT. ========================================================== */ /* ========================================================== Font ========================================================== */ /* The demo pairs Arabic with Tajawal (300/400/500/700). Add those weights to the template's font link before enabling this. */ html[dir="rtl"] body{ font-family:"Tajawal","Raleway",system-ui,-apple-system,sans-serif; } /* ========================================================== TODO — physical values that need explicit RTL counterparts ========================================================== 1. Button container alignment (text-align:left, three places) .qf-hero-actions .zpbutton-container .qf-ei-actions .zpbutton-container .qf-cta-btn .zpbutton-container → text-align:right 2. Gradient angles 135deg buttons (qf-base, and the form submit in qf-sections) 100deg .qf-hero-title h1 span:last-child 140deg .qf-suite, .qf-cta 145deg .qf-ei-shell 90deg .qf-banner, .qf-banner-progress i → mirror the angle (e.g. 135deg becomes 225deg) 3. Radial gradient positions body 85% 10% / 10% 16% .qf-ei-shell 86% 14% / 8% 90% .qf-cta 80% 30% → mirror the x percentage (85% becomes 15%, etc.) 4. Hero orbit node positions (left/right percentages, plus the 680 and 500 breakpoint overrides) .qf-node-books .qf-node-inventory .qf-node-procurement .qf-node-crm .qf-node-analytics .qf-node-einvoice 5. Header logo — the same zpimage-size-fit !important trap as the footer logo. Set the size in the builder's image panel, not here. 6. Text alignment: every text element carries Zoho's zptext-align-left class. Set alignment per element in the builder on the Arabic page rather than fighting those classes in CSS. */ /* ========================================================== Panel backgrounds — radial positions and gradient angles ========================================================== */ html[dir="rtl"] .qf-ei-shell.zprow{ background: radial-gradient(circle at 14% 14%,rgba(211,146,30,.10),transparent 27%), radial-gradient(circle at 92% 90%,rgba(31,99,198,.07),transparent 28%), linear-gradient(215deg,#ffffff,#f8fbff); } html[dir="rtl"] .qf-cta.zprow{ background: radial-gradient(circle at 20% 30%,rgba(31,99,198,.10),transparent 32%), linear-gradient(220deg,#ffffff,#f4f8fe); }