/* The Farsi (/fa/) and Arabic (/ar/) pages. Loaded after /style.css, and only by pages whose is dir="rtl", so every rule is scoped to that and the English pages never see it. What this corrects: style.css was written for English with Persian islands in it — Latin letter-spacing and uppercase, left-anchored ornaments, a marquee that runs off the left edge, and "english" translation lines set LTR. Farsi and Arabic chrome is set in Vazirmatn, as the app sets it. */ html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input { font-family: 'Vazirmatn', var(--sans); } /* Arabic script joins its letters; tracking breaks the joins, uppercase is a no-op. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .hero-badge, html[dir="rtl"] .stat-label, html[dir="rtl"] .share-label, html[dir="rtl"] .site-nav-brand { letter-spacing: 0; text-transform: none; } html[dir="rtl"] .hero h1 { line-height: 1.45; } /* style.css pads the em to keep an italic Latin gradient from clipping; upright Arabic script has nothing to clip, and the padding reads as a double space. */ html[dir="rtl"] .hero h1 em { font-style: normal; padding: 0; margin: 0; } html[dir="rtl"] .features-hero h1 em, html[dir="rtl"] .page-hero h1 em { font-style: normal; padding: 0; margin: 0; } /* A translation line under a Persian hemistich. `.ltr-translation` is the English one on a Farsi page, set left-to-right inside the RTL page. */ html[dir="rtl"] .app-hemistich.rtl-translation { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; text-align: right; direction: rtl; margin-top: 2px; } html[dir="rtl"] .voice-translation { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-bottom: 16px; flex: 1; } html[dir="rtl"] .closing-translation { font-size: 17px; color: var(--text-muted); margin-bottom: 4px; } html[dir="rtl"] .verse-translation { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-top: 6px; } html[dir="rtl"] .ltr-translation { direction: ltr; text-align: left; font-family: var(--sans); } html[dir="rtl"] .voice-translation.ltr-translation, html[dir="rtl"] .closing-translation.ltr-translation { text-align: center; font-style: italic; } html[dir="rtl"] .voice-translation.ltr-translation { text-align: left; } html[dir="rtl"] .dict-def { line-height: 1.8; } /* Mirror what was anchored to the left. */ html[dir="rtl"] .voice-card::before { left: auto; right: 24px; } html[dir="rtl"] .tap-cursor { right: auto; left: 60px; } html[dir="rtl"] .survey-option:hover:not(:has(input:checked)), html[dir="rtl"] .survey-option:hover:not(.checked) { transform: translateX(-4px); } html[dir="rtl"] .prose ul { padding-left: 0; padding-right: 24px; } html[dir="rtl"] .promise-text h2 { text-align: right; } /* In RTL the track hangs from the right edge, so translating it left by half empties the strip from the right. Run it the other way. */ html[dir="rtl"] .poet-track { animation-name: marquee-rtl; } @keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* The language link in the nav. */ .site-nav-lang { font-weight: 600 !important; }