/* * voxire-rtl.css — RTL (Right-to-Left) Foundation * ───────────────────────────────────────────────────────────────────────────── * STATUS: FOUNDATION ONLY — no Arabic routes yet. * * These rules activate only when is set. Because the English * site always uses dir="ltr" (set in _document.js), this file has zero effect * on the current site. It is infrastructure for when /ar/ routes are added. * * Implementation checklist (do NOT check off until routing exists): * [ ] Add /ar/ page routes under pages/ar/ * [ ] Add dir="rtl" lang="ar" on for those routes * [ ] Add hreflang alternate links (stubs already in _document.js) * [ ] Load Arabic web font (Cairo or Noto Sans Arabic) * [ ] Translate all string content * [ ] Update CLAUDE.md Section 7 (SEO) with Arabic page metadata * * Typography note: Arabic uses connected calligraphic letterforms and requires: * - No letter-spacing (Arabic letters must connect) * - Higher line-height (ascenders/descenders need more room) * - A dedicated Arabic-supporting font * * Sections: * 1. CSS custom properties (RTL token overrides) * 2. Direction & text alignment * 3. Flex & grid mirroring * 4. Bootstrap utility mirroring (ms-* / me-* / ps-* / pe-*) * 5. Typography adjustments * 6. Navigation * 7. Buttons & icons * 8. Cards & layout components * 9. Footer * ───────────────────────────────────────────────────────────────────────────── */ /* ============================================================================= 1. RTL TOKEN OVERRIDES ============================================================================= */ [dir="rtl"] { /* When Arabic font is loaded, switch the font stack */ /* --vx-font-body: 'Cairo', 'Noto Sans Arabic', 'Inter', sans-serif; */ /* --vx-font-heading: 'Cairo', 'Noto Sans Arabic', 'Space Grotesk', sans-serif; */ /* Letter spacing must be 0 for Arabic script */ --vx-letter-spacing-h1: 0; --vx-letter-spacing-h2: 0; --vx-letter-spacing-h3: 0; --vx-letter-spacing-h4: 0; } /* ============================================================================= 2. DIRECTION & TEXT ALIGNMENT ============================================================================= */ [dir="rtl"] body { direction: rtl; text-align: right; } /* Paragraphs and list items inherit direction; ensure alignment follows */ [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] span { text-align: right; } /* Code blocks stay LTR even in RTL context */ [dir="rtl"] pre, [dir="rtl"] code { direction: ltr; text-align: left; unicode-bidi: bidi-override; } /* ============================================================================= 3. FLEX & GRID MIRRORING Horizontal flex rows visually reverse in RTL without changing DOM order. We target the most common layout patterns in this codebase. ============================================================================= */ /* Hero tabs / horizontal pill navigation */ [dir="rtl"] .vx-hero__tabs, [dir="rtl"] .nav-tabs, [dir="rtl"] .nav-pills { flex-direction: row-reverse; } /* Inline flex rows that should mirror */ [dir="rtl"] .d-flex:not([class*="flex-column"]), [dir="rtl"] .header-actions { /* Do NOT blindly reverse all flex rows — only specific components. Add selectors here as Arabic pages are built and tested. */ } /* Grid: in RTL, first column visually becomes last */ /* CSS grid auto-handles RTL direction — no override needed for standard grids */ /* ============================================================================= 4. BOOTSTRAP UTILITY MIRRORING Bootstrap 5 has native RTL support via bs-rtl.css. Until we switch to that, mirror the most-used spacing utilities manually. ============================================================================= */ /* Margin start/end */ [dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: unset !important; margin-left: auto !important; } [dir="rtl"] .ms-1 { margin-left: unset !important; margin-right: 0.25rem !important; } [dir="rtl"] .me-1 { margin-right: unset !important; margin-left: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: unset !important; margin-right: 0.5rem !important; } [dir="rtl"] .me-2 { margin-right: unset !important; margin-left: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: unset !important; margin-right: 1rem !important; } [dir="rtl"] .me-3 { margin-right: unset !important; margin-left: 1rem !important; } [dir="rtl"] .ms-4 { margin-left: unset !important; margin-right: 1.5rem !important; } [dir="rtl"] .me-4 { margin-right: unset !important; margin-left: 1.5rem !important; } [dir="rtl"] .ms-5 { margin-left: unset !important; margin-right: 3rem !important; } [dir="rtl"] .me-5 { margin-right: unset !important; margin-left: 3rem !important; } /* Padding start/end */ [dir="rtl"] .ps-1 { padding-left: unset !important; padding-right: 0.25rem !important; } [dir="rtl"] .pe-1 { padding-right: unset !important; padding-left: 0.25rem !important; } [dir="rtl"] .ps-2 { padding-left: unset !important; padding-right: 0.5rem !important; } [dir="rtl"] .pe-2 { padding-right: unset !important; padding-left: 0.5rem !important; } [dir="rtl"] .ps-3 { padding-left: unset !important; padding-right: 1rem !important; } [dir="rtl"] .pe-3 { padding-right: unset !important; padding-left: 1rem !important; } [dir="rtl"] .ps-4 { padding-left: unset !important; padding-right: 1.5rem !important; } [dir="rtl"] .pe-4 { padding-right: unset !important; padding-left: 1.5rem !important; } [dir="rtl"] .ps-5 { padding-left: unset !important; padding-right: 3rem !important; } [dir="rtl"] .pe-5 { padding-right: unset !important; padding-left: 3rem !important; } /* Text alignment */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } /* Float */ [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } /* ============================================================================= 5. TYPOGRAPHY ADJUSTMENTS FOR ARABIC ============================================================================= */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { /* Arabic script must not have letter-spacing — characters disconnect */ letter-spacing: 0; /* Arabic needs more vertical rhythm */ line-height: 1.5; /* Placeholder: switch to Arabic font here */ /* font-family: 'Cairo', 'Noto Sans Arabic', sans-serif; */ } [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a { letter-spacing: 0; line-height: 1.8; /* Arabic needs more generous line-height */ /* font-family: 'Cairo', 'Noto Sans Arabic', 'Inter', sans-serif; */ } /* Section title sub-heading — the decorative SVG bullet is on the wrong side in RTL */ [dir="rtl"] .section-title .sub-title { flex-direction: row-reverse; } [dir="rtl"] .section-title .sub-title:before { margin-right: 0; margin-left: 10px; /* Mirror the SVG decorative element */ transform: scaleX(-1); } /* ============================================================================= 6. NAVIGATION ============================================================================= */ /* Main nav items should flow right-to-left */ [dir="rtl"] .main-menu > ul { flex-direction: row-reverse; } /* Dropdown should open to the left (not right) in RTL */ [dir="rtl"] .main-menu ul li .sub-menu, [dir="rtl"] .dropdown-menu { left: auto; right: 0; } /* Nav logo stays visually leftmost even in RTL (brand recognition) */ [dir="rtl"] .navbar-brand, [dir="rtl"] .site-logo { margin-left: 0; margin-right: 0; /* Logo is exempt from RTL mirroring — keep it on left for brand identity */ direction: ltr; } /* Hamburger toggle — stay on left on mobile for consistency */ [dir="rtl"] .navbar-toggler { margin-left: auto; margin-right: 0; } /* ============================================================================= 7. BUTTONS & ICONS ============================================================================= */ /* Arrow icon on theme-btn — rotated -45deg for LTR (northeast arrow). In RTL it should point northwest (rotate 225deg). */ [dir="rtl"] .theme-btn i, [dir="rtl"] a.theme-btn i { transform: rotate(225deg); margin-left: 0; margin-right: 10px; } [dir="rtl"] .theme-btn:hover i, [dir="rtl"] a.theme-btn:hover i { margin-right: 13px; margin-left: -3px; } /* Details btn — circle with rotated arrow */ [dir="rtl"] .details-btn { transform: rotate(225deg); } /* Read-more underline — RTL */ [dir="rtl"] .read-more { flex-direction: row-reverse; text-underline-position: under; } /* ============================================================================= 8. CARDS & LAYOUT COMPONENTS ============================================================================= */ /* Service / feature cards with left-side icon */ [dir="rtl"] .service-icon, [dir="rtl"] .icon-box { margin-left: 0; margin-right: auto; text-align: right; } /* Stat counters / numbers — keep numbers LTR (numerals are universal) */ [dir="rtl"] .counter-number, [dir="rtl"] .stat-number, [dir="rtl"] [class*="counter"] { direction: ltr; display: inline-block; } /* ============================================================================= 9. FOOTER ============================================================================= */ /* Footer links column should right-align in RTL */ [dir="rtl"] .footer-links ul, [dir="rtl"] .widget ul { padding-right: 0; padding-left: 0; /* Remove LTR list indent */ text-align: right; } /* Footer contact info — icon before text, mirrors in RTL */ [dir="rtl"] .footer-contact li, [dir="rtl"] .contact-info li { flex-direction: row-reverse; } [dir="rtl"] .footer-contact li i, [dir="rtl"] .contact-info li i { margin-left: 12px; margin-right: 0; } /* Social links in footer — stay LTR order (common convention) */ [dir="rtl"] .footer-social, [dir="rtl"] .social-links { direction: ltr; /* Social icon order is universal — don't reverse */ }