/* ============================================================ FAN AL-MAHARAH — RTL STYLESHEET (Arabic) Loaded on Arabic pages: Imports and overrides style.css for RTL direction ============================================================ */ @import url('style.css'); /* --- FONTS OVERRIDE --- */ :root { --font-display: 'Noto Sans Arabic', 'Cairo', Georgia, serif; --font-body: 'Noto Sans Arabic', 'Cairo', system-ui, sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Cairo:wght@400;600;700&display=swap'); /* --- DIRECTION CORE --- */ html[lang="ar"], html[dir="rtl"] { direction: rtl; text-align: right; } body { font-family: var(--font-body); direction: rtl; text-align: right; } /* --- NAV RTL --- */ /* --- OVERVIEW SECTION RTL --- */ .overview-visual-pattern { right: auto; left: -25%; } /* --- HERO RTL --- */ .hero::before { right: auto; left: -15%; } .hero::after { left: auto; right: -10%; } .hero-inner { direction: rtl; } .hero-trust { flex-direction: row-reverse; } .hero-trust-item { flex-direction: row-reverse; } /* --- PAGE HERO RTL --- */ /* --- SERVICE CARD RTL --- */ .service-card::after { transform-origin: right; } .service-list li { text-align: right; } .service-list li::before { margin-top: 2px; } .cand-flag { right: auto; left: 10px; flex-direction: row-reverse; } .cand-avail { left: auto; right: 10px; } .cand-avail-overlay { right: auto; left: 10px; } .cand-new { top: 10px; left: auto; right: 10px; } .cand-card-footer { flex-direction: row; } .cand-role-line { flex-direction: row; } /* --- FILTER SIDEBAR RTL --- */ .filter-sidebar { direction: rtl; } /* --- CANDIDATES TOOLBAR RTL --- */ .candidates-toolbar { flex-direction: row-reverse; } /* --- STEPS RTL --- */ .steps-row::before { background: linear-gradient(270deg, var(--brand), var(--gold)); left: calc(16.6% + 30px); right: calc(16.6% + 30px); } /* --- PROCESS LIST RTL --- */ .process-list { direction: rtl; } .process-item { text-align: right; } /* --- CONTACT RTL --- */ .ci-label { direction: rtl; } /* --- TRUST STRIP RTL --- */ .trust-item { flex-direction: row-reverse; } /* --- ABOUT FEATURES RTL --- */ .about-visual { direction: rtl; } .about-lic-badge { left: 20px; right: 20px; direction: rtl; } .about-feat { text-align: right; } /* --- FOOTER RTL --- */ .site-footer { direction: rtl; } .footer-grid { direction: rtl; } .footer-bottom { flex-direction: row-reverse; } /* --- TESTIMONIAL RTL --- */ .t-author { flex-direction: row-reverse; } /* --- FORM RTL --- */ .form-group { direction: rtl; } .form-group input, .form-group select, .form-group textarea { text-align: right; direction: rtl; } /* --- MODAL RTL --- */ .modal-head { flex-direction: row-reverse; } .modal-fields { direction: rtl; } .modal-field-label { direction: rtl; } /* --- WA FLOAT RTL --- */ .wa-float { right: auto; left: 26px; align-items: flex-start; } /* --- COMPLIANCE RTL --- */ .compliance-item { direction: rtl; text-align: right; } /* --- TYPOGRAPHY ARABIC OVERRIDES --- */ h1, h2, h3, h4, h5 { font-family: 'Noto Sans Arabic', 'Cairo', serif; font-weight: 700; letter-spacing: 0; line-height: 1.35; } p, li, span, label, a { font-family: 'Noto Sans Arabic', 'Cairo', sans-serif; letter-spacing: 0; line-height: 1.85; } .eyebrow { letter-spacing: 0; font-family: 'Noto Sans Arabic', sans-serif; } /* --- RESPONSIVE RTL FIXES --- */ @media(max-width:900px) { .candidates-layout { grid-template-columns: 1fr; } .filter-sidebar { direction: rtl; } } @media(max-width:680px) { .hero-ctas { flex-direction: column; } .nav-inner { flex-direction: row-reverse; } } /* ============================================================ RTL OVERRIDES — Row cards, blog, video ============================================================ */ /* Row card RTL: swap photo to right side */ .cand-card{direction:rtl} .cand-flag{right:auto;left:10px} .cand-card-body{text-align:right} .cand-skills{justify-content:flex-start} /* Blog RTL */ .blog-card{direction:rtl;text-align:right} .blog-card-cat{left:auto;right:12px} .blog-card-date{flex-direction:row-reverse} .blog-card-date::before{display:none} .blog-card-read{flex-direction:row-reverse} .blog-row-card{direction:rtl} .blog-row-cat{left:auto;right:12px} .blog-row-body{text-align:right} .blog-sidebar{direction:rtl;text-align:right} .blog-recent-item{flex-direction:row-reverse} .blog-tag-cloud{flex-direction:row-reverse} /* Post RTL */ .post-hero{direction:rtl;text-align:right} .post-meta{flex-direction:row-reverse} .post-layout{direction:rtl} .post-content{text-align:right;direction:rtl} .post-content blockquote{border-left:none;border-right:3px solid var(--brand);border-radius:var(--radius-md) 0 0 var(--radius-md)} .post-content ul,.post-content ol{margin:0 24px 18px 0} .post-content ul{list-style-type:disc} .post-content ol{list-style-type:decimal} .post-share{flex-direction:row-reverse} .post-cta{direction:rtl} .post-sidebar-widget{direction:rtl;text-align:right} .post-toc{direction:rtl;text-align:right} .related-item{flex-direction:row-reverse} /* RTL: filter sidebar stays LEFT in Arabic (it flips to right naturally with rtl grid) */ /* The grid in RTL already puts sidebar on right; override to keep logical order */ .candidates-layout{direction:rtl} .candidates-layout .candidates-main{direction:rtl} .candidates-toolbar{flex-direction:row-reverse} /* Legal RTL */ .legal-prose ul { margin-left: 0; margin-right: 20px; } /* ============================================================ LANDING PAGE NEW DESIGNS RTL (Nationalities & Cities) ============================================================ */ .landing-page-hero { text-align: right; } .landing-page-hero .breadcrumb { justify-content: flex-start; } .landing-post-content { text-align: right; direction: rtl; } .landing-post-content h2, .landing-post-content h3 { padding-left: 0; padding-right: 18px; } .landing-post-content h2::before, .landing-post-content h3::before { left: auto; right: 0; } /* ============================================================ BLOG PAGES RTL OVERRIDES ============================================================ */ .blog-hero, .post-hero { text-align: right; } .blog-hero .breadcrumb, .post-hero .breadcrumb { justify-content: flex-start; } .blog-row-card { direction: rtl; } .blog-row-cat { left: auto; right: 14px; } .blog-row-body { text-align: right; } .blog-sidebar-widget { text-align: right; } .blog-recent-item { flex-direction: row-reverse; text-align: right; } .post-layout { direction: rtl; } .post-content h2, .post-content h3 { padding-left: 0; padding-right: 18px; text-align: right; } .post-content h2::before, .post-content h3::before { left: auto; right: 0; } .post-content blockquote { border-left: none; border-right: 3px solid var(--brand); border-radius: var(--radius-md) 0 0 var(--radius-md); } /* RTL overrides for user content tables and lists */ html[lang="ar"] .editor-content, html[dir="rtl"] .editor-content { text-align: right; direction: rtl; } html[lang="ar"] .editor-content h2, html[lang="ar"] .editor-content h3, html[dir="rtl"] .editor-content h2, html[dir="rtl"] .editor-content h3 { padding-left: 0; padding-right: 18px; text-align: right; } html[lang="ar"] .editor-content h2::before, html[lang="ar"] .editor-content h3::before, html[dir="rtl"] .editor-content h2::before, html[dir="rtl"] .editor-content h3::before { left: auto; right: 0; } html[lang="ar"] .editor-content ul, html[lang="ar"] .editor-content ol, html[dir="rtl"] .editor-content ul, html[dir="rtl"] .editor-content ol { margin: 0 24px 22px 0 !important; } html[lang="ar"] .editor-content th, html[dir="rtl"] .editor-content th { text-align: right !important; } html[lang="ar"] .editor-content blockquote, html[dir="rtl"] .editor-content blockquote { border-left: none; border-right: 3px solid var(--brand); border-radius: var(--radius-md) 0 0 var(--radius-md); } /* RTL overrides for table cell vertical borders */ html[lang="ar"] .editor-content th, html[dir="rtl"] .editor-content th, html[lang="ar"] .editor-content td, html[dir="rtl"] .editor-content td { border-right: none !important; border-left: 1px solid var(--border); } html[lang="ar"] .editor-content th:last-child, html[dir="rtl"] .editor-content th:last-child, html[lang="ar"] .editor-content td:last-child, html[dir="rtl"] .editor-content td:last-child { border-left: none !important; } /* RTL override for SEO Rich Text lists */ html[lang="ar"] .seo-rich-text ul, html[lang="ar"] .seo-rich-text ol, html[dir="rtl"] .seo-rich-text ul, html[dir="rtl"] .seo-rich-text ol { padding-left: 0; padding-right: 20px; } /* Force right-alignment for general content columns, editor text, and grids in RTL */ html[lang="ar"] .editor-content, html[lang="ar"] .editor-content p, html[lang="ar"] .editor-content h2, html[lang="ar"] .editor-content h3, html[lang="ar"] .grid-2 h2, html[lang="ar"] .grid-2 p, html[dir="rtl"] .editor-content, html[dir="rtl"] .editor-content p, html[dir="rtl"] .editor-content h2, html[dir="rtl"] .editor-content h3, html[dir="rtl"] .grid-2 h2, html[dir="rtl"] .grid-2 p { text-align: right !important; } /* RTL overrides for about page floated visual container */ html[lang="ar"] .about-visual-container, html[dir="rtl"] .about-visual-container { float: left; margin-left: 0; margin-right: 36px; } @media (max-width: 900px) { html[lang="ar"] .about-visual-container, html[dir="rtl"] .about-visual-container { float: none; margin-right: 0; } }