/* ========================================================================== RTL (Right-to-Left) Support Activated when is set. Flexbox/grid auto-reverse with dir="rtl"; these overrides handle physical CSS properties that don't auto-flip. ========================================================================== */ /* ---- Noto Sans Arabic — self-hosted variable-weight font ---- */ @font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('../fonts/noto-sans-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('../fonts/noto-sans-arabic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Override font families when RTL is active ---- */ [dir="rtl"] { --font-heading: 'Noto Sans Arabic', 'Instrument Sans', system-ui, sans-serif; --font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: 'Noto Sans Arabic', var(--font-body), system-ui, sans-serif !important; } [dir="rtl"] .font-heading, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] nav a, [dir="rtl"] .btn-primary, [dir="rtl"] .btn-secondary { font-family: 'Noto Sans Arabic', var(--font-heading), system-ui, sans-serif !important; } /* Slightly increase line-height for Arabic readability */ [dir="rtl"] body { line-height: 1.7 !important; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3 !important; } /* ---- Mobile menu: slide from left instead of right ---- */ [dir="rtl"] #mobile-menu { right: auto !important; left: 0 !important; border-left: none !important; border-right: 1px solid white !important; transform: translateX(-100%) !important; } [dir="rtl"] #mobile-menu.open { transform: translateX(0) !important; } /* ---- Navbar inner padding ---- */ [dir="rtl"] nav .neu { padding-left: 0.375rem !important; /* was pr-1.5 */ padding-right: 1.25rem !important; /* was pl-5 */ } /* ---- Close button in mobile menu ---- */ [dir="rtl"] #nav-close { align-self: flex-start !important; } /* ---- Theme switcher position ---- */ [dir="rtl"] #theme-switcher { right: auto !important; left: 24px !important; flex-direction: row-reverse !important; padding: 6px 6px 6px 14px !important; } /* ---- Language switcher position ---- */ [dir="rtl"] #lang-switch { right: auto !important; left: 24px !important; } [dir="rtl"] #lang-switch a { flex-direction: row-reverse !important; } /* ---- Hero floating annotations (Geometry theme): mirror positions ---- */ [dir="rtl"] .hero-cursor { flex-direction: row-reverse; } [dir="rtl"] .hero-note-left { left: auto !important; right: -8% !important; } [dir="rtl"] .hero-note-right { right: auto !important; left: -8% !important; } [dir="rtl"] .hero-note-arrow { transform: scaleX(-1) !important; } [dir="rtl"] .hero-note-left .hero-note-arrow { margin-left: auto !important; margin-right: 119px !important; } [dir="rtl"] .hero-note-right .hero-note-arrow { margin-left: auto !important; margin-right: -45px !important; } /* ---- Arrow SVGs inside buttons/links: mirror horizontally ---- */ [dir="rtl"] .btn-primary svg, [dir="rtl"] .btn-secondary svg, [dir="rtl"] .cta-section .btn-primary svg, [dir="rtl"] .cta-section .btn-secondary svg { transform: scaleX(-1); } /* ---- FAQ: flip text alignment + padding ---- */ [dir="rtl"] .faq-item button { text-align: right !important; } [dir="rtl"] .faq-item button > span:first-child { padding-right: 0 !important; padding-left: 1rem !important; /* was pr-4 */ } [dir="rtl"] .faq-item .faq-answer p { padding-right: 0 !important; padding-left: 2rem !important; /* was pr-8 */ } /* Ensure toggle circle doesn't collapse */ [dir="rtl"] .faq-toggle { flex-shrink: 0; } /* ---- Stats bar: flip border-left + padding-left ---- */ @media (min-width: 768px) { [dir="rtl"] .md\:text-left { text-align: right !important; } [dir="rtl"] .md\:border-l { border-left: none !important; border-right: 1px solid var(--divider) !important; } [dir="rtl"] .md\:pl-8 { padding-left: 0 !important; padding-right: 2rem !important; } } /* ---- Hero badge: flip asymmetric padding ---- */ [dir="rtl"] .hero-badge { padding: 4px 4px 4px 16px !important; /* mirror of 4px 16px 4px 4px */ } [dir="rtl"] .hero-badge .hero-badge-inner + span { padding-right: 0 !important; padding-left: 0.25rem !important; /* was pr-1 */ } /* ---- Contact info bar: pr-1 on badge text ---- */ [dir="rtl"] .contact-info-bar .hero-badge-inner + span, [dir="rtl"] .hero-section .hero-badge-inner + span { padding-right: 0 !important; padding-left: 0.25rem !important; } /* ---- Signup page: Login button with avatar padding ---- */ [dir="rtl"] nav a[style*="letter-spacing: -0.3px"] { padding-left: 0.375rem !important; padding-right: 1rem !important; } /* ---- Address bar snippet (ml-2) ---- */ [dir="rtl"] .hero-tilt span[class*="ml-"] { margin-left: 0 !important; margin-right: 0.5rem !important; } /* ---- Chat bubble alignment ---- */ [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .text-left { text-align: right !important; } /* ---- Legal pages: policy prose + sidebar ---- */ [dir="rtl"] .policy-prose ul { padding-left: 0 !important; padding-right: 28px !important; list-style: none !important; margin-right: 0 !important; } [dir="rtl"] .policy-prose ul li { padding-left: 0 !important; padding-right: 4px !important; text-align: right !important; position: relative !important; } [dir="rtl"] .policy-prose ul li::marker { content: none !important; } [dir="rtl"] .policy-prose ul li::before { content: '' !important; position: absolute !important; right: -15px !important; top: 0.62em !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #bfbfbf !important; } [dir="rtl"] .policy-toc h4 { padding-left: 0 !important; padding-right: 12px !important; } /* ---- Footer ---- */ /* Keep social icons in standard L-R order but align to the right */ [dir="rtl"] footer .flex.gap-3 { direction: ltr; justify-content: flex-end !important; } /* Footer column headings + links: right-align */ [dir="rtl"] footer h4, [dir="rtl"] footer ul, [dir="rtl"] footer li, [dir="rtl"] footer li a { text-align: right !important; } /* Footer brand description */ [dir="rtl"] footer p { text-align: right !important; } /* Footer ul list reset — prevent indent on wrong side */ [dir="rtl"] footer ul { padding-left: 0 !important; padding-right: 0 !important; } /* ---- Pricing toggle / save label ---- */ [dir="rtl"] .save-label { margin-left: 0 !important; margin-right: 0.5rem !important; } /* ---- Select dropdowns: flip chevron position ---- */ [dir="rtl"] select, [dir="rtl"] #currencySelect, [dir="rtl"] #theme-select { background-position: left 8px center !important; padding-left: 28px !important; padding-right: 12px !important; } /* ---- Compare table: feature name column right-align ---- */ [dir="rtl"] .compare-table th:first-child, [dir="rtl"] .compare-table td:first-child { text-align: right !important; } /* ---- Checkbox + label alignment ---- */ [dir="rtl"] label input[type="checkbox"] { margin-left: 0.75rem; margin-right: 0; } /* ---- Testimonial slider: keep LTR scroll for native drag support ---- */ [dir="rtl"] .t-track { direction: ltr; } [dir="rtl"] .t-slide { direction: rtl; } /* ---- Before/After compare section grid ---- */ [dir="rtl"] .compare-section .compare-before, [dir="rtl"] .compare-section .compare-after { text-align: right; } /* ---- Pricing check marks spacing ---- */ [dir="rtl"] .pricing-features li svg { margin-left: 0.5rem; margin-right: 0; } /* ---- General list marker alignment ---- */ [dir="rtl"] ul { padding-right: 0; } /* ---- Marquee: flip scroll direction ---- */ [dir="rtl"] .marquee { direction: ltr !important; } [dir="rtl"] .marquee-track { padding-right: 52px !important; padding-left: 0 !important; } [dir="rtl"] .marquee-slow .marquee-track { padding-left: 16px !important; } /* ---- Pricing card feature list check icon ---- */ [dir="rtl"] ul li svg { flex-shrink: 0; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { [dir="rtl"] * { transition-duration: 0.01ms !important; } } /* ---- Nav dropdown RTL ---- */ [dir="rtl"] .mob-accordion-body a { padding-left: 16px !important; padding-right: 32px !important; }