/* ========================================================================== rtl.css — RTL overrides for right-to-left layouts (Persian & Arabic) Applied whenever , which the server sets for fa and ar. ========================================================================== */ /* ---- Font overrides for RTL ---- */ [dir="rtl"] { --font-body: "Pinar", "AzarMehr", -apple-system, sans-serif; --font-heading: "AzarMehr", "Pinar", -apple-system, sans-serif; --font-script: "AzarMehr", Georgia, serif; font-feature-settings: "liga" 1, "calt" 1; letter-spacing: normal; } /* ---- Global RTL ---- */ [dir="rtl"] { text-align: right; unicode-bidi: plaintext; } /* ---- Navbar ---- */ [dir="rtl"] .navbar-contact-btn { margin-left: 0; margin-right: 2px; } [dir="rtl"] .navbar-mobile-contact { margin-left: 0; margin-right: auto; } [dir="rtl"] .navbar-mobile-close { right: auto; left: var(--gutter, 24px); } [dir="rtl"] .navbar-chevron { margin-left: 0; margin-right: 2px; } @media (max-width: 768px) { [dir="rtl"] .navbar-hamburger { margin-left: 0; margin-right: auto; } } /* ---- Footer ---- */ [dir="rtl"] .closing-cta-grid { text-align: right; } [dir="rtl"] .closing-cta-link { flex-direction: row-reverse; } [dir="rtl"] .closing-cta-link-arrow { transform: scaleX(-1); } [dir="rtl"] .closing-cta-avatar { margin-left: 0; margin-right: -6px; } [dir="rtl"] .closing-cta-avatar:first-child { margin-right: 0; } [dir="rtl"] .closing-cta-avatar-count { margin-left: 0; margin-right: 8px; } [dir="rtl"] .footer-social { justify-self: start; } [dir="rtl"] .footer-brand { text-align: right; } @media (max-width: 768px) { [dir="rtl"] .footer-brand { text-align: center; } [dir="rtl"] .footer-social { justify-self: center; } } /* ---- Scroll progress button ---- */ [dir="rtl"] .scroll-progress-btn { right: auto; left: 24px; } @media (max-width: 480px) { [dir="rtl"] .scroll-progress-btn { left: 16px; } } /* ---- Theme Switcher ---- */ [dir="rtl"] .theme-switcher { right: auto; left: 24px; } [dir="rtl"] .theme-switcher-popover { right: auto; left: 0; } @media (max-width: 768px) { [dir="rtl"] .theme-switcher { left: 16px; } } @media (max-width: 480px) { [dir="rtl"] .theme-switcher { left: 12px; } } /* ---- Hero (Home) ---- */ [dir="rtl"] .hero-description { text-align: right; } [dir="rtl"] .hero-actions { justify-content: center; } [dir="rtl"] .hero-btn svg { order: 2; margin-left: 0; margin-right: 8px; } [dir="rtl"] .hero-overline { direction: rtl; font-family: var(--font-body); letter-spacing: normal; } [dir="rtl"] .hero-subheadline { font-family: var(--font-body); } [dir="rtl"] .hero-popover { left: 50%; right: auto; transform: translateX(-50%) scale(0.92) translateY(8px); } [dir="rtl"] .hero-status-wrapper:hover .hero-popover, [dir="rtl"] .hero-status-wrapper.popover-active .hero-popover { transform: translateX(-50%) scale(1) translateY(0); } [dir="rtl"] .hero-popover-header { direction: rtl; } [dir="rtl"] .hero-popover-label, [dir="rtl"] .hero-popover-badge { font-family: var(--font-body); letter-spacing: normal; } [dir="rtl"] .hero-popover-date { font-family: var(--font-body); } [dir="rtl"] .hero-cursor { margin-left: 0; margin-right: 2px; } /* ---- About page ---- */ [dir="rtl"] .bio-row { direction: rtl; } [dir="rtl"] .bio-stats { direction: rtl; } [dir="rtl"] .bio-stat { text-align: right; } [dir="rtl"] .bio-quote { border-left: none; border-right: 4px solid var(--accent); } [dir="rtl"] .timeline-content--right { text-align: left; } [dir="rtl"] .timeline-content { text-align: right; } [dir="rtl"] .endorsement-person { direction: rtl; } [dir="rtl"] .endorsement-quote { text-align: right; } [dir="rtl"] .exp-proficiency-list li { padding-left: 0; padding-right: 18px; } [dir="rtl"] .exp-proficiency-list li::before { left: auto; right: 0; } /* ---- Experience page ---- */ [dir="rtl"] .exp-job-header { direction: rtl; } [dir="rtl"] .exp-job-title-row { direction: rtl; } [dir="rtl"] .exp-job-item { direction: rtl; } [dir="rtl"] .exp-job-item p { text-align: right; } [dir="rtl"] .exp-job-num { margin-right: 0; margin-left: 14px; } [dir="rtl"] .exp-summary-name { direction: rtl; } [dir="rtl"] .exp-name-bullet { margin-right: 0; margin-left: 10px; } [dir="rtl"] .exp-principle-bullet { margin-right: 0; margin-left: 12px; } [dir="rtl"] .exp-edu-node { margin-right: 0; margin-left: 16px; } [dir="rtl"] .exp-proficiency-bullet { margin-right: 0; margin-left: 8px; } /* ---- Work page ---- */ [dir="rtl"] .work-list-item { text-align: right; direction: rtl; } [dir="rtl"] .work-list-number { margin-right: 0; margin-left: 14px; } [dir="rtl"] .work-detail-inner { text-align: right; } [dir="rtl"] .work-detail-number { right: auto; left: 32px; } [dir="rtl"] .work-detail-github { direction: rtl; } [dir="rtl"] .work-detail-github svg { margin-right: 0; margin-left: 8px; } @media (max-width: 860px) { [dir="rtl"] .work-detail-number { left: 20px; right: auto; } [dir="rtl"] .work-modal-close { right: auto; left: 14px; } [dir="rtl"] .work-modal-title { padding-right: 0; padding-left: 44px; text-align: right; } [dir="rtl"] .work-modal-subtitle, [dir="rtl"] .work-modal-desc { text-align: right; } [dir="rtl"] .work-modal-github { direction: rtl; } [dir="rtl"] .work-modal-github svg { margin-right: 0; margin-left: 8px; } } /* ---- Contact page ---- */ [dir="rtl"] .contact-info-card { text-align: right; } /* Mirror the form hero card's accent glow to the start (top-right) side. */ [dir="rtl"] .contact-form-block { background: radial-gradient(130% 110% at 100% 0%, var(--accent-soft) 0%, transparent 55%), var(--card); } [dir="rtl"] .contact-map-info { text-align: right; } [dir="rtl"] .contact-detail-header { direction: rtl; } [dir="rtl"] .contact-local-time { direction: rtl; } [dir="rtl"] .contact-local-time svg { margin-right: 0; margin-left: 8px; } [dir="rtl"] .contact-availability-badge { direction: rtl; } [dir="rtl"] .contact-avail-dot { margin-right: 0; margin-left: 8px; } [dir="rtl"] .contact-form-label { text-align: right; } [dir="rtl"] .contact-input { text-align: right; } [dir="rtl"] .contact-submit-btn { direction: rtl; } [dir="rtl"] .contact-submit-arrow { transform: scaleX(-1); } [dir="rtl"] .contact-faq-toggle { direction: rtl; text-align: right; } [dir="rtl"] .contact-faq-answer { text-align: right; } [dir="rtl"] .contact-interest-pills { direction: rtl; } [dir="rtl"] .contact-map-label { direction: rtl; } [dir="rtl"] .contact-map-label svg { margin-right: 0; margin-left: 6px; } [dir="rtl"] .contact-copy-btn { right: auto; left: 0; } /* ---- Eyebrow rows ---- */ [dir="rtl"] .about-eyebrow-row { direction: rtl; } /* ---- Command palette ---- */ [dir="rtl"] .cmd-palette-input { text-align: right; } [dir="rtl"] .cmd-palette-item { direction: rtl; } /* ---- Blog page ---- */ [dir="rtl"] .blog-search { padding-left: 16px; padding-right: 44px; text-align: right; } [dir="rtl"] .blog-search-icon { left: auto; right: 16px; } [dir="rtl"] .blog-card-tag { margin-left: 0; margin-right: auto; } [dir="rtl"] .blog-modal-content { text-align: right; line-height: 1.9; } [dir="rtl"] .blog-modal-content p { line-height: 1.9; } [dir="rtl"] .blog-modal-content ol, [dir="rtl"] .blog-modal-content ul { padding-left: 0; padding-right: 24px; } [dir="rtl"] .blog-modal-content pre, [dir="rtl"] .blog-modal-content code { direction: ltr; text-align: left; unicode-bidi: isolate; } [dir="rtl"] .blog-card { text-align: right; } [dir="rtl"] .blog-card-arrow { transform: scaleX(-1); } [dir="rtl"] .blog-card:hover .blog-card-arrow { transform: scaleX(-1) translateX(2px); } [dir="rtl"] .blog-modal-header { direction: rtl; } [dir="rtl"] .blog-modal-title { text-align: right; } [dir="rtl"] .blog-filters { direction: rtl; } /* ---- Language switcher button ---- */ .lang-switch-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer; flex-shrink: 0; transition: color 0.2s ease, background 0.2s ease; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .lang-switch-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } [data-theme="light"] .lang-switch-btn { color: rgba(0, 0, 0, 0.5); } [data-theme="light"] .lang-switch-btn:hover { color: #000; background: rgba(0, 0, 0, 0.06); } /* Mobile lang switch */ .navbar-mobile-lang-switch { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 9999px; border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); background: transparent; color: var(--text, #f2f1ec); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } .navbar-mobile-lang-switch:hover { background: rgba(255, 255, 255, 0.06); } /* ---- General fixes ---- */ [dir="rtl"] .eyebrow-rule { margin-left: 0; margin-right: auto; } /* ---- RTL mobile timeline fix ---- */ @media (max-width: 760px) { [dir="rtl"] .timeline-line { left: auto; right: 26px; } [dir="rtl"] .timeline-content, [dir="rtl"] .timeline-content--right { text-align: right; } }