/* ========================================================= RTL Layout Overrides (active when ) ========================================================= */ /* ── Typography ─────────────────────────────────────────── */ /* Sans replaces PP Neue Montreal for all body/UI text */ [dir="rtl"] body { font-family: "Thmanyah Sans", sans-serif; } /* Serif replaces Degular Display for headings */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "Thmanyah Serif", serif; letter-spacing: 0; } /* Serif replaces GT Alpina on hero h1 (same family, Light weight) */ [dir="rtl"] .hero-text h1 { font-family: "Thmanyah Serif", serif; font-weight: 300; letter-spacing: 0; } /* Serif replaces GT Alpina on blockquote */ [dir="rtl"] .quote-section blockquote { font-family: "Thmanyah Serif", serif; font-weight: 300; letter-spacing: 0; } /* ── Simple nav dropdown RTL ─────────────────────────────── */ [dir="rtl"] .nav-dropdown-menu { left: auto; right: 0; } /* ── Navbar stays LTR regardless of page direction ──────── */ [dir="rtl"] .navbar, [dir="rtl"] .navbar-inner, [dir="rtl"] .nav-links, [dir="rtl"] .navbar-actions { direction: ltr; } /* ── Experience accent stripe ───────────────────────────── */ [dir="rtl"] .xp-past-row::before { left: auto; right: -12px; } /* ── Certifications accent stripe ───────────────────────── */ [dir="rtl"] .cert-row::before { left: auto; right: -12px; } /* ── Directional fill on cert links ─────────────────────── */ [dir="rtl"] .cert-link::after { transform: translateX(100%); } [dir="rtl"] .cert-link:hover::after { transform: translateX(0); } /* ── Skill bar fills from right ─────────────────────────── */ [dir="rtl"] .skill-bar span { margin-right: 0; margin-left: auto; transform-origin: right center; } /* ── Hero image shape ────────────────────────────────────── */ [dir="rtl"] .hero-image-shape { right: auto; left: 0; } /* ── Nav overlay footer text ─────────────────────────────── */ [dir="rtl"] .nav-overlay-watermark { text-align: right; } /* ── Featured more arrow ─────────────────────────────────── */ [dir="rtl"] .featured-more { direction: rtl; } /* ── Section lead max-width stays readable in RTL ───────── */ [dir="rtl"] .section-lead { text-align: right; } /* ── Tags wrap correctly ─────────────────────────────────── */ [dir="rtl"] .tags { justify-content: flex-end; } /* ── Eyebrows ────────────────────────────────────────────── */ /* Tracking is set for Latin caps; on Arabic it only pulls the cursive joins apart, and uppercase has no effect. */ [dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; } /* ── Contact form label alignment ───────────────────────── */ [dir="rtl"] .contact-form-field label { text-align: right; } /* ── Resume box content ──────────────────────────────────── */ [dir="rtl"] .resume-box-content { text-align: right; } /* ── Version string in footer-bottom ────────────────────── */ [dir="rtl"] .footer-bottom { direction: rtl; } /* ── Language cards ─────────────────────────────────────── */ /* Non-Arabic phrase text must stay LTR — character spans flow left→right */ [dir="rtl"] .lang-card:not([data-lang="arabic"]) .lang-phrase { direction: ltr; text-align: left; } /* Language names use Serif in Arabic layout */ [dir="rtl"] .lang-name { font-family: "Thmanyah Serif", serif; letter-spacing: 0; } /* ── Quote centered fine in both directions ──────────────── */ [dir="rtl"] .quote-section blockquote { text-align: center; } /* ── Lang switcher ───────────────────────────────────────── */ .lang-switcher { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); transition: border-color var(--transition), color var(--transition); line-height: 1; } .lang-switcher:hover { border-color: var(--border-color); color: var(--text-secondary); } .lang-flag { border-radius: 2px; display: block; flex-shrink: 0; }