/* ========================================================================== Arabic (right-to-left). Loaded only on /ar/ pages, after every other sheet. Flex and grid layouts mirror by themselves once ; this file mirrors the rules that name a physical side (left/right, borders, margins that push things apart, translateX) and sets Arabic type. ========================================================================== */ /* ---------- type ---------- */ html[lang="ar"] { --font: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; } /* Spacing letters apart breaks the joined Arabic script. */ [lang="ar"] body, [lang="ar"] body * { letter-spacing: 0 !important; } [lang="ar"] body { line-height: 1.75; } [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { line-height: 1.35; } [lang="ar"] .hero h1 { line-height: 1.25; } [lang="ar"] .eyebrow, [lang="ar"] .brand-tag, [lang="ar"] .section-label, [lang="ar"] .dash-stat-label, [lang="ar"] .admin-stat-label, [lang="ar"] .dir-section-label, [lang="ar"] .admin-field-label, [lang="ar"] .wizard-review-label, [lang="ar"] .legal-toc h2, [lang="ar"] .footer-col h4, [lang="ar"] .dash-pill, [lang="ar"] .admin-badge, [lang="ar"] .dir-verified, [lang="ar"] .content-lang-tag { text-transform: none; font-size: .86rem; } /* Icons keep their own font. */ [lang="ar"] .material-symbols-outlined { font-family: "Material Symbols Outlined"; } /* Numbers, addresses and codes read left-to-right even inside Arabic text. */ [dir="rtl"] a[href^="https://wa.me"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"], [dir="rtl"] .footer-col p, [dir="rtl"] .hours dd { unicode-bidi: isolate; } [dir="rtl"] a[href^="https://wa.me"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: right; } [dir="rtl"] input[type="email"]::placeholder, [dir="rtl"] input[type="tel"]::placeholder { direction: ltr; } /* What people typed (bios, names, messages) may be English: each paragraph takes its direction from its own first letters, so punctuation stays put. */ [dir="rtl"] .dir-card-bio, [dir="rtl"] .dir-section-body, [dir="rtl"] .dir-card-name, [dir="rtl"] .dir-profile-id h2, [dir="rtl"] .dash-bubble, [dir="rtl"] .dash-row-title, [dir="rtl"] .dash-thread-name, [dir="rtl"] .dash-thread-last, [dir="rtl"] .admin-card-title, [dir="rtl"] .admin-card-bio, [dir="rtl"] .admin-field-value, [dir="rtl"] .admin-list-title, [dir="rtl"] .admin-enquiry-body, [dir="rtl"] .featured-who, [dir="rtl"] .dash-who, [dir="rtl"] .dir-account-name, [dir="rtl"] textarea, [dir="rtl"] input[type="text"], [dir="rtl"] input[type="search"], [dir="rtl"] input:not([type]) { unicode-bidi: plaintext; } /* ---------- header ---------- */ [dir="rtl"] .skip-link { left: auto; right: 16px; } [dir="rtl"] .site-nav { margin-right: 0; margin-left: auto; } @media (max-width: 1100px) { [dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; } } /* ---------- forms ---------- */ [dir="rtl"] .form-group select, [dir="rtl"] select.input { background-position: left 12px center; padding-right: 14px; padding-left: 40px; } [dir="rtl"] .form-group input[type=file]::file-selector-button { margin-right: 0; margin-left: 12px; } [dir="rtl"] .dir-sort select { background-position: left 10px center; padding: 8px 14px 8px 34px; } [dir="rtl"] .admin-search { background-position: right 14px center; padding: 10px 40px 10px 16px; } /* ---------- homepage ---------- */ [dir="rtl"] .link-arrow:hover .material-symbols-outlined { transform: translateX(-3px); } [dir="rtl"] .journey-steps .step-tag { margin-left: 0; margin-right: auto; } [dir="rtl"] .journey-float { left: auto; right: -34px; } [dir="rtl"] .hero-visual::before { inset: 30px 40px -24px -24px; } [dir="rtl"] .hero::after { right: auto; left: -180px; } [dir="rtl"] .hero-orbit { right: auto; left: -140px; } @media (max-width: 960px) { [dir="rtl"] .hero-orbit { left: -160px; } } @media (max-width: 640px) { [dir="rtl"] .journey-float { right: 12px; left: 12px; } } [dir="rtl"] .cta-band-actions { justify-content: flex-start; } @media (max-width: 960px) { [dir="rtl"] .cta-band-actions { justify-content: flex-start; } } /* decorative shapes, mirrored */ [dir="rtl"] .page-hero::after { right: auto; left: -120px; } [dir="rtl"] .page-hero::before { right: auto; left: -110px; } [dir="rtl"] .founders-hero::before { left: auto; right: -200px; } [dir="rtl"] .cta-band::before { left: auto; right: -90px; } [dir="rtl"] .cta-band::after { right: auto; left: -80px; } [dir="rtl"] .dash-page::before, [dir="rtl"] .admin-page::before, [dir="rtl"] .auth-page::before { right: auto; left: -25vmax; } [dir="rtl"] .dash-page::after, [dir="rtl"] .admin-page::after, [dir="rtl"] .auth-page::after { left: auto; right: -20vmax; } /* ---------- floating WhatsApp button: bottom-left in Arabic ---------- */ [dir="rtl"] .wa-fab { right: auto; left: 20px; padding: 12px 14px 12px 18px; } @media (max-width: 760px) { [dir="rtl"] .wa-fab.is-always { right: auto; left: 16px; } } /* ---------- booking modal (script.js) ---------- */ [dir="rtl"] .modal-close { right: auto; left: 16px; } [dir="rtl"] .modal-header { padding-right: 0; padding-left: 40px; } /* ---------- mentor directory ---------- */ [dir="rtl"] .dir-close { right: auto; left: 16px; } [dir="rtl"] .dir-modal-title { padding-right: 0; padding-left: 44px; } [dir="rtl"] .dir-tabs { margin-right: 0; margin-left: 44px; } [dir="rtl"] .dir-icon-btn { margin-right: 0; margin-left: 44px; } [dir="rtl"] .dir-record { border-left: 0; border-right: 3px solid var(--brand-200); padding: 2px 14px 2px 0; } [dir="rtl"] .dir-choice-price { margin-left: 0; margin-right: auto; } [dir="rtl"] .dir-summary-row span:last-child { text-align: left; } @media (max-width: 640px) { [dir="rtl"] .dir-profile-head { text-align: right; } } /* ---------- mentor application ---------- */ [dir="rtl"] .wizard-buttons #prevBtn { margin-right: 0; margin-left: auto; } @media (max-width: 720px) { [dir="rtl"] .wizard-buttons #prevBtn { margin-left: 0; } } /* ---------- dashboards ---------- */ [dir="rtl"] .dash-slot-pill { padding: 6px 14px 6px 8px; } [dir="rtl"] .dash-slot-pill.is-booked { padding-right: 14px; padding-left: 14px; } [dir="rtl"] .dash-thread-list { border-right: 0; border-left: 1px solid var(--line); } @media (max-width: 860px) { [dir="rtl"] .dash-thread-list { border-left: 0; } } [dir="rtl"] .dash-thread-item { text-align: right; border-left: 0; border-right: 3px solid transparent; } [dir="rtl"] .dash-thread-item.is-active { border-right-color: var(--brand); } [dir="rtl"] .dash-bubble-them { border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; } [dir="rtl"] .dash-bubble-me { border-bottom-right-radius: 18px; border-bottom-left-radius: 6px; } /* Arabic tab names are longer: on phones they wrap instead of being cut. */ @media (max-width: 480px) { [dir="rtl"] .dash-tab { white-space: normal; line-height: 1.3; text-align: center; padding: 7px 4px; } } /* ---------- admin ---------- */ [dir="rtl"] .admin-drawer { right: auto; left: 0; animation-name: drawerInRtl; } @keyframes drawerInRtl { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } } [dir="rtl"] .admin-record { border-left: 0; border-right: 3px solid var(--brand-200); padding-left: 0; padding-right: 14px; } [dir="rtl"] .content-dirty { margin-right: 0; margin-left: auto; } /* ---------- legal pages ---------- */ [dir="rtl"] .legal-toc ol { margin-left: 0; margin-right: 20px; } [dir="rtl"] .policy-section li { padding-left: 0; padding-right: 22px; } [dir="rtl"] .policy-section li::before { left: auto; right: 4px; } [dir="rtl"] .policy-callout { border-left: 1px solid #fbd999; border-right: 4px solid var(--accent); } /* ---------- language switcher (shared, both directions) ---------- */ /* The Arabic page already shows Mahmood's name in Arabic: no need to repeat it. */ [lang="ar"] .support-name-ar { display: none; }