/* ========================================================================== MaedX — Persian / right-to-left overlay Load AFTER styles.css, only on pages with . Everything else is shared, so a change to the design system reaches both languages automatically. ========================================================================== */ :root { --font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif; } body { line-height: 1.85; } /* Persian type does not want the tight Latin tracking */ h1, h2, h3, h4, .kpi .v, .chart-tip strong { letter-spacing: 0; } h1, h2, h3 { line-height: 1.5; } .pitch { line-height: 1.6; } /* the arrow has to point the other way */ .link-arrow::after { content: "←"; } .link-arrow:hover::after { transform: translateX(-3px); } /* numbers, units and charts stay left-to-right */ .panel, .chart, .course-meta, .case__row dd, code, .article-meta { direction: ltr; } .case__row dd, .course-meta, .article-meta { text-align: right; } .panel__block h4, .metric { direction: rtl; } .metrics .val { direction: ltr; } /* a latin word inside Persian text keeps its own direction */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* the numbered list counter reads better with Persian digits */ .numbered > li::before { font-family: var(--font); } /* language switch in the header */ .lang-switch { font-size: 13px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 7px 12px; transition: border-color var(--t), color var(--t); white-space: nowrap; } .lang-switch:hover { color: #fff; border-color: var(--yellow); } /* prose tuned for Persian */ .prose { font-size: 17px; line-height: 1.95; max-width: 62ch; } .prose h2 { font-size: 22px; } .prose blockquote { font-size: 18px; line-height: 1.9; } @media (max-width: 780px) { .lang-switch { display: none; } }