/* * CoptAra — RTL overrides for the Arabic (/ar/) pages. * Loaded by base.html only when lang == 'ar' (after the LTR sheets). * dir="rtl" on flips flex layouts automatically; this sheet covers * the leftovers: Arabic font stack, physical paddings/borders, bubble corners. */ /* ONE Arabic reading font everywhere (Raven: match the kids-stories font). Redefining the font tokens means every element styled with var(--font-serif) or var(--font-sans) switches automatically. The font itself is loaded as a webfont in base.html for lang=ar. */ html[dir="rtl"] { --font-serif: "Noto Naskh Arabic", Georgia, serif; --font-sans: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; } html[dir="rtl"] body { font-family: var(--font-sans); } /* Arabic needs a touch more line-height for diacritics */ html[dir="rtl"] .msg__bubble { line-height: 2; } /* Chat bubble corner accents: mirror the "tail" corner (.msg--divine on the Divine page, .msg--nour on the Luna page) */ html[dir="rtl"] .msg--divine .msg__bubble, html[dir="rtl"] .msg--nour .msg__bubble { border-radius: var(--radius-lg) 2px var(--radius-lg) var(--radius-lg); } html[dir="rtl"] .msg--user .msg__bubble { border-radius: 2px var(--radius-lg) var(--radius-lg) var(--radius-lg); } /* Luna header "Kids Corner" pill: auto-margin flips sides in RTL */ html[dir="rtl"] .chat-hd__back { margin-left: 0; margin-right: auto; } /* Crisis bubble: accent border moves to the right edge */ html[dir="rtl"] .msg--crisis .msg__bubble { border-left: none; border-right: 3px solid var(--color-accent); border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg); padding-left: 14px; padding-right: var(--space-lg); } /* Collapsible sources: indent from the right instead of the left */ html[dir="rtl"] .sources-body { padding-left: 0; padding-right: 0.8em; border-left: none; border-right: 2px solid var(--color-border); } /* Streaming cursor sits to the left of the text flow in RTL */ html[dir="rtl"] .stream-cursor { margin-left: 0; margin-right: 1px; } /* Keep Latin brand name + URLs readable inside RTL text */ html[dir="rtl"] .sources-body a { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Arabic script breaks with letter-spacing (it disconnects the letters) */ html[dir="rtl"] .hero__eyebrow, html[dir="rtl"] .section__label, html[dir="rtl"] .readings-tile__meta, html[dir="rtl"] .feature-card__badge, html[dir="rtl"] .kids-card__badge, html[dir="rtl"] .readings-landing__eyebrow, html[dir="rtl"] .kids-hero__eyebrow { letter-spacing: 0 !important; } /* Legal pages: list/blockquote indents flip */ html[dir="rtl"] .legal__content ul, html[dir="rtl"] .legal__content ol { padding-left: 0; padding-right: 1.4em; } /* Arabic nav tabs: Naskh renders visually smaller than the Latin stack at the same px size — give the tabs one notch up (Arabic pages only) */ html[dir="rtl"] .nav__links a { font-size: var(--text-lg); /* 18px — Naskh needs it */ }