/* =========================================================================== RTL overrides — loaded ONLY when (Arabic locale). The dir="rtl" attribute on already: - reverses inline/text flow - makes flex rows render right-to-left - makes CSS logical properties work correctly This file ONLY addresses what dir="rtl" does NOT automatically fix, and protects LTR/numeric widgets from mirroring. =========================================================================== */ /* ---------------------------------------------------------------- Base */ body { text-align: right; } /* ---------------------------------------------------------------- Header / nav */ /* .nav is flex; dir=rtl already reverses it so brand appears on the right. .nav-links uses margin-left:auto in LTR to push itself right; flip to margin-right:auto. */ .nav-links { margin-left: 0; margin-right: auto; } /* Mobile: align nav items right; fix hamburger margin */ @media (max-width: 940px) { .nav-links { margin-right: 0; } .nav-links a { text-align: right; } .nav-toggle { margin-left: 0; margin-right: auto; } } /* ---------------------------------------------------------------- Language switcher */ /* In LTR: menu anchors to right:0 (drops left from the button). In RTL: anchor to left:0 (drops right from the button, stays within viewport). */ .lang-switch-menu { left: 0; right: auto; } /* ---------------------------------------------------------------- Nav dropdowns (RTL) */ /* Mirror the menu anchor to the right edge of the trigger */ .nav-menu { left: auto; right: 0; } /* Mobile: flip indent from left to right */ @media (max-width: 940px) { .nav-menu { padding: 0 16px 4px 0; } .nav-links a { text-align: right; } } /* Language names / URLs in the dropdown are always LTR */ .lang-switch-menu a { direction: ltr; text-align: left; } /* ---------------------------------------------------------------- Hero */ /* The accent underline ::after uses left:0; right:0 (physical props). dir=rtl does NOT flip physical left/right, so reposition manually. */ .hero h1 .accent::after { left: 0; right: 0; } /* full-width — no change needed */ /* ---------------------------------------------------------------- Stat band */ /* CSS grid columns don't auto-reverse with dir=rtl. Force LTR on the band so the 6-column visual order stays intact. Individual cells reverse back to RTL for proper Arabic label alignment. */ .stat-band { direction: ltr; } .stat { direction: rtl; text-align: center; } /* Big counter numbers are always Arabic-Indic or Western digits — keep LTR */ .stat .num { direction: ltr; display: block; unicode-bidi: isolate; } /* ---------------------------------------------------------------- Aspiration tiles (.asp-tile) */ /* The large tile number is a display numeral */ .asp-tile .num { direction: ltr; unicode-bidi: isolate; } /* Decorative tile icon: position:absolute right:-10px bottom:-10px in LTR. Flip to left corner in RTL. */ .asp-tile .tile-icon { right: auto; left: -10px; } /* ---------------------------------------------------------------- Directional arrow icons */ /* All uses of icon('arrow-right') in templates place the SVG either: a) as the last flex/inline item in .btn/.go/.breadcrumb (trailing arrow) b) standalone between breadcrumb segments Strategy: flip SVG icons that appear as the LAST child of their flex parent, and flip the standalone breadcrumb separators. Leading/functional icons (gamepad, chart, book-open) appear as FIRST child — not flipped. */ /* Trailing arrows inside flex buttons (last svg child) */ .btn > svg.icon:last-child, .btn > svg.icon:last-of-type { transform: scaleX(-1); } /* .go inline spans: "Explore →" → "Explore ←" */ .go svg.icon, .go .icon { transform: scaleX(-1); } /* Breadcrumb separator arrows */ .breadcrumb svg.icon { transform: scaleX(-1); } /* ---------------------------------------------------------------- Section headers */ .section-head { text-align: right; } .section-head.center { text-align: center; } /* ---------------------------------------------------------------- Progress bars & level bars */ /* Progress fills via width on a child span inside overflow:hidden. In RTL the block-start edge is the right side, so the bar would fill from right. Force LTR so bars always fill left→right visually. */ .progress, .level-bar, .quiz-progress, .scenario-meter .bar { direction: ltr; } .progress > span, .level-bar > span, .quiz-progress > span, .scenario-meter .bar > span { direction: ltr; } /* ---------------------------------------------------------------- Chart.js canvas & spark widgets */ /* Charts render on canvas with their own coordinate system — keep LTR */ canvas { direction: ltr; unicode-bidi: isolate; } .kpi .spark, .kpi .spark canvas { direction: ltr; } /* ---------------------------------------------------------------- Numeric / count-up widgets */ /* [data-count] animated JS counters */ [data-count] { direction: ltr; display: inline-block; unicode-bidi: isolate; } /* KPI card values */ .kpi .val { direction: ltr; unicode-bidi: isolate; } .kpi .val small { direction: ltr; } /* ---------------------------------------------------------------- Moonshot percent labels */ /* Percentage is always a numeral */ .moon-pct { direction: ltr; unicode-bidi: isolate; } /* ---------------------------------------------------------------- Dashboard toolbar */ /* .spacer uses margin-left:auto in LTR; flip */ .dash-toolbar .spacer { margin-left: 0; margin-right: auto; } /* ---------------------------------------------------------------- Timeline */ /* Spine (::before on .timeline) is left:9px in LTR. Item dots (::before on .tl-item) are left:-25px. Flip both to the right side. */ .timeline { padding-left: 0; padding-right: 30px; } .timeline::before { left: auto; right: 9px; } .tl-item { padding-left: 0; padding-right: 8px; } .tl-item::before { left: auto; right: -25px; } /* ---------------------------------------------------------------- Leaderboard row hover */ /* Flip the slide direction */ .lb-row:hover { transform: translateX(-4px); } /* ---------------------------------------------------------------- Quiz options hover */ .opt:hover { transform: translateX(-3px); } .opt .marker { flex: none; } /* keep marker on logical start (right) */ /* ---------------------------------------------------------------- Scenario choice hover */ .choice { text-align: right; } .choice:hover { transform: translateX(-4px); } /* ---------------------------------------------------------------- Map rank rows */ .map-rank .row { flex-direction: row-reverse; } /* ---------------------------------------------------------------- Footer */ .footer-inner { text-align: right; } /* footer-bottom is flex, dir=rtl reverses it naturally */ .site-footer a { text-align: right; } /* ---------------------------------------------------------------- Form inputs */ .field input, .field select, .field textarea { text-align: right; direction: rtl; } /* Email/URL/number always have LTR values */ input[type="email"], input[type="url"], input[type="number"] { direction: ltr; text-align: left; } /* ---------------------------------------------------------------- Kente accent strip */ /* The repeating gradient starts from the left edge. scaleX(-1) starts from the right edge, which is more natural for an RTL document's visual start. */ .kente { transform: scaleX(-1); } /* ---------------------------------------------------------------- Toast notifications */ /* Keep toast-wrap on bottom-right (universal UI convention). Slide animation direction: in LTR translateX(120%) slides in from right. Keep as-is — it reads naturally from the right regardless of page direction. */ /* ---------------------------------------------------------------- Profile page */ /* kente strip: position:absolute top:0 left:0 → flip to right */ .profile-head .kente { left: auto; right: 0; transform: none; } /* ---------------------------------------------------------------- HUD chip */ /* "Lv X | XP" numbers should be LTR */ .hud-chip { direction: ltr; unicode-bidi: isolate; } /* ---------------------------------------------------------------- Protect inherently LTR content */ code, pre { direction: ltr; unicode-bidi: isolate; text-align: left; }