/* ============================================================ rtl.css — RTL-specific overrides Applied when [dir="rtl"] is set on ============================================================ */ /* ── Nav logo ───────────────────────────────────────────────── */ [dir="rtl"] .nav__logo { flex-direction: row-reverse; } /* ── Hero text align ────────────────────────────────────────── */ [dir="rtl"] .hero__content { align-items: flex-start; text-align: start; } [dir="rtl"] .hero__subtitle { text-align: start; } /* ── Game hook border ───────────────────────────────────────── */ [dir="rtl"] .game__hook { border-inline-start: 3px solid var(--c-green); border-inline-end: none; } /* ── Screenshots scrolling direction ───────────────────────── */ /* Already handled via separate @keyframes in sections.css */ /* ── Card icons ─────────────────────────────────────────────── */ [dir="rtl"] .card__icon { margin-inline-end: 0; } /* ── Stat label ─────────────────────────────────────────────── */ [dir="rtl"] .stat-item { align-items: flex-start; } /* ── Footer layout mirror ───────────────────────────────────── */ [dir="rtl"] .footer__logo { flex-direction: row-reverse; } [dir="rtl"] .footer__bottom { flex-direction: row-reverse; } /* ── Eyebrow line ───────────────────────────────────────────── */ [dir="rtl"] .eyebrow { flex-direction: row-reverse; } /* ── Buttons icon order ─────────────────────────────────────── */ [dir="rtl"] .btn { flex-direction: row-reverse; } /* ── Font override for Arabic ───────────────────────────────── */ [dir="rtl"] { --font-head: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Inter', system-ui, sans-serif; --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Inter', system-ui, sans-serif; } [dir="rtl"] body { font-family: var(--font-body); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-head); } /* ── Section header alignment ───────────────────────────────── */ [dir="rtl"] .section__header--center { text-align: center; } [dir="rtl"] .section__header--center .eyebrow { justify-content: center; } /* ── Platform list ──────────────────────────────────────────── */ [dir="rtl"] .platform-list { flex-direction: row-reverse; } /* ── Game meta rows ─────────────────────────────────────────── */ [dir="rtl"] .game__actions { flex-direction: row-reverse; } [dir="rtl"] .hero__actions { flex-direction: row-reverse; } /* ── Screenshots fade edges (RTL — scroll goes right) ──────── */ [dir="rtl"] .screenshots__track-wrap::before { background: linear-gradient(to left, var(--c-dark), transparent); } [dir="rtl"] .screenshots__track-wrap::after { background: linear-gradient(to right, var(--c-dark), transparent); } /* ── Contact cards ──────────────────────────────────────────── */ [dir="rtl"] .contact-cards { direction: rtl; } /* ── Mobile nav links alignment ────────────────────────────── */ [dir="rtl"] .nav__mobile a { text-align: start; } /* ── Blog tag filter ────────────────────────────────────────── */ [dir="rtl"] .tag-filter { direction: rtl; } /* ── Post body list indentation ────────────────────────────── */ [dir="rtl"] .post-body ul, [dir="rtl"] .post-body ol { padding-inline-start: 24px; padding-inline-end: 0; }