/* ============================================ RTL (Right-to-Left) Stylesheet for Arabic Applied via ============================================ */ /* Base direction override */ [dir="rtl"] { direction: rtl; text-align: right; } /* Typography adjustments for Arabic */ [dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Inter', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .hero__title, [dir="rtl"] .article-header__title, [dir="rtl"] .section-title, [dir="rtl"] .card__title, [dir="rtl"] .sidebar-card__title { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0; } /* Header */ [dir="rtl"] .header__inner { flex-direction: row-reverse; } [dir="rtl"] .nav__links { flex-direction: row-reverse; } [dir="rtl"] .nav__actions { flex-direction: row-reverse; } /* Logo stays left in LTR languages; in RTL, flip to right */ [dir="rtl"] .logo { order: 2; } [dir="rtl"] .nav { order: 1; } /* Breadcrumb */ [dir="rtl"] .breadcrumb { direction: rtl; } [dir="rtl"] .breadcrumb__sep { transform: scaleX(-1); display: inline-block; } /* Article layout — flip sidebar */ [dir="rtl"] .article-layout > .container { direction: rtl; } [dir="rtl"] .article-sidebar { order: -1; } /* Cards grid */ [dir="rtl"] .card { text-align: right; } [dir="rtl"] .card__meta { flex-direction: row-reverse; } [dir="rtl"] .card__arrow { transform: scaleX(-1); } /* Article body */ [dir="rtl"] .article-body { text-align: right; } [dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol { padding-right: 1.5em; padding-left: 0; } [dir="rtl"] .article-body li { text-align: right; } /* Callout boxes */ [dir="rtl"] .article-callout { border-left: none; border-right: 4px solid var(--color-primary, #6C63FF); padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .article-cta { text-align: right; } /* Sidebar */ [dir="rtl"] .sidebar-card { text-align: right; } /* Footer */ [dir="rtl"] .footer__inner { direction: rtl; } [dir="rtl"] .footer__col { text-align: right; } [dir="rtl"] .footer__col ul { padding-right: 0; } [dir="rtl"] .footer__bottom { flex-direction: row-reverse; } /* Hero section */ [dir="rtl"] .hero { text-align: right; } [dir="rtl"] .hero__badges { justify-content: flex-end; } /* Newsletter */ [dir="rtl"] .newsletter__form { flex-direction: row-reverse; } [dir="rtl"] .newsletter input[type="email"] { text-align: right; direction: ltr; /* Keep email input LTR */ } /* Section headers */ [dir="rtl"] .section-header { flex-direction: row-reverse; } [dir="rtl"] .section-link { direction: ltr; } /* Mobile nav */ [dir="rtl"] .mobile-nav { text-align: right; } [dir="rtl"] .mobile-nav__link { text-align: right; } /* Reading progress bar — flip to right */ [dir="rtl"] .reading-progress { right: 0; left: auto; transform-origin: right; } /* Tag badges */ [dir="rtl"] .article-header__tag, [dir="rtl"] .card__tag { text-align: right; } /* Article header meta */ [dir="rtl"] .article-header__meta { flex-direction: row-reverse; justify-content: flex-end; } /* Skip link */ [dir="rtl"] .skip-link { right: 1rem; left: auto; } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; font-size: 0.8125rem; font-weight: 500; } [dir="rtl"] .lang-switcher { margin-left: 0; margin-right: 0.75rem; } .lang-switcher a, .lang-switcher span { padding: 0.2rem 0.4rem; border-radius: 4px; text-decoration: none; color: inherit; opacity: 0.6; transition: opacity 0.2s; } .lang-switcher a:hover { opacity: 1; } .lang-switcher .lang-active { opacity: 1; font-weight: 700; background: rgba(108, 99, 255, 0.1); } /* Comparison tables */ [dir="rtl"] table { direction: rtl; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* Blockquotes */ [dir="rtl"] blockquote { border-left: none; border-right: 3px solid var(--color-primary, #6C63FF); padding-left: 0; padding-right: 1rem; } /* Google fonts import for Arabic */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');