/* ── Arabic RTL overrides for Eventiere ── */ /* Import parent shared.css first via in HTML, then this file */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap'); /* Font override */ body { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; } /* Nav: RTL handled by dir="rtl" on — browser auto-reverses flex direction. Just ensure proper spacing and no double-reverse. */ nav { direction: rtl; } .nav-logo { order: 0; } .nav-links { flex-direction: row; order: 0; gap: 1.5rem; } .nav-ctas { flex-direction: row; order: 0; gap: 0.75rem; } .nav-toggle { order: 0; } /* Dropdown: in RTL, browser flips left→right automatically. Override shared.css positioning to work with RTL flow. */ .nav-dropdown { left: auto; right: 0; transform: translateY(-6px); } .nav-links li.open .nav-dropdown { transform: translateY(0); } /* Breadcrumb: flip chevron direction */ .breadcrumb svg { transform: scaleX(-1); } /* Logos: flip border side */ .logos-label { padding-right: 0; padding-left: 1.5rem; border-right: none; border-left: 1px solid var(--border); } /* Step number decorative line */ .hiw-step-num::before, .step-num::before { display: none; } .hiw-step-num::after, .step-num::after { content: ''; display: block; width: 18px; height: 1px; background: var(--accent); } /* Stats: border direction */ .stat-item { border-right: none; border-left: 1px solid var(--border); } .stat-item:last-child { border-left: none; } .stat-item:first-child { border-left: 1px solid var(--border); } /* Horizontal grid borders in stat-row responsive */ @media (max-width: 900px) { .stat-item:nth-child(2) { border-left: none; } .stat-item:nth-child(3) { border-left: 1px solid var(--border); border-right: none; } .stat-item:nth-child(4) { border-left: none; border-right: none; } } /* Feature stat label spacing */ .feat-stat span { margin-left: 0; margin-right: 0.2rem; } /* Footer CTA right alignment */ .cta-band-right { align-items: flex-start; } /* Page hero: max-width on sub applies RTL */ .page-hero .sub { text-align: right; } /* Hero note: right-align on desktop */ .hero-note { justify-content: flex-start; } /* Arabic letter-spacing: Tajawal doesn't need negative tracking */ h1 { letter-spacing: -0.01em; } h2 { letter-spacing: -0.01em; } .section-head h2 { letter-spacing: -0.01em; } /* Eyebrow: no letter-spacing for Arabic */ .eyebrow, .step-num, .hiw-step-num, footer h4, .plan-name, .logos-label { letter-spacing: 0; } /* Workflow steps: RTL grid */ .workflow-step { grid-template-columns: 1fr 56px; direction: rtl; } .workflow-step-num { order: 2; } /* Integration grid borders */ .integration-item { border-left: none !important; border-right: 1px solid var(--border); } .integration-item:first-child { border-right: none; } /* WA float tooltip: flip to left side */ .wa-tooltip { right: auto; left: 64px; transform: translateY(-50%); } /* Demo checklist: flip alignment */ .demo-checklist li { flex-direction: row-reverse; text-align: right; } .demo-checklist li .check { margin-top: 1px; } /* Form select arrow: flip to left side */ select { background-position: left 14px center; padding-right: 14px; padding-left: 36px; } /* Back arrow in demo nav-back: flip */ .nav-back svg { transform: scaleX(-1); } /* Exit popup close: flip to left */ .exit-close { right: auto; left: 1rem; } /* Cookie banner: maintain LTR layout for action buttons */ #cookie-banner { direction: rtl; } /* Language toggle */ .lang-toggle { font-family: 'Inter', 'Tajawal', sans-serif; letter-spacing: 0.04em; } /* Back to top button stays fixed — no change needed */ /* Testi full grid-column span stays */ /* Footer brand tagline */ .footer-brand p { text-align: right; } /* Pricing cards stacked left border becomes right in RTL */ @media (min-width: 769px) { .cta-right { align-items: flex-start; } }