/* ========================================================================== LinkTec - RTL stylesheet (Arabic) Loaded ONLY on pages with . All selectors are scoped to html[dir="rtl"] so the file is safe even if accidentally loaded on an LTR page. ========================================================================== */ html[dir="rtl"] { text-align: right; } /* Body font swap: Arabic uses IBM Plex Sans Arabic with Inter as Latin fallback. */ html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .hero-title, html[dir="rtl"] .hero-eyebrow, html[dir="rtl"] .hero-subtitle, html[dir="rtl"] .section-tag { font-family: 'IBM Plex Sans Arabic', 'Outfit', 'Inter', sans-serif; } /* Playfair italic (used in display headings) doesn't ship Arabic glyphs; fall back to the IBM Plex Arabic so the serif emphasis still renders. */ html[dir="rtl"] em.text-serif, html[dir="rtl"] .text-serif { font-family: 'IBM Plex Sans Arabic', 'Playfair Display', Georgia, serif; font-style: italic; } /* --- Layout direction --------------------------------------------------- */ /* The header pill uses grid/flex which respect dir automatically, but the mobile drop-down is positioned with right: 0 — flip to left in RTL. */ html[dir="rtl"] .lang-switcher-menu { right: auto; left: 0; } /* Footer grid — items naturally flow start-to-end; keep dir inheritance. */ html[dir="rtl"] .footer-grid { direction: rtl; } /* --- Numbers, prices, codes: keep LTR ------------------------------------ */ html[dir="rtl"] .price, html[dir="rtl"] .stat, html[dir="rtl"] .number, html[dir="rtl"] .hero-branch__num, html[dir="rtl"] .pillar-number, html[dir="rtl"] .method-number, html[dir="rtl"] .pricing-amount, html[dir="rtl"] time { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Emails, URLs, code, phone numbers — must stay LTR. */ html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] .email, html[dir="rtl"] .url, html[dir="rtl"] .phone, html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="https://wa.me"], html[dir="rtl"] [dir="ltr"] { direction: ltr; unicode-bidi: embed; display: inline-block; text-align: left; } /* Brand wordmark stays LTR. */ html[dir="rtl"] .logo-wordmark, html[dir="rtl"] .intro-logo, html[dir="rtl"] .intro-tagline { direction: ltr; unicode-bidi: embed; } /* --- Directional icons -------------------------------------------------- */ /* Right-pointing CTA arrows flip horizontally so they point toward the start of the reading direction (i.e. to the left in RTL). */ html[dir="rtl"] .btn-arrow, html[dir="rtl"] .card-link svg, html[dir="rtl"] .icon-arrow-right { transform: scaleX(-1); } /* Logos and brand marks must NEVER be flipped. */ html[dir="rtl"] .logo img, html[dir="rtl"] .logo-img, html[dir="rtl"] .footer-brand img { transform: none; } /* Theme toggle icons (sun/moon) and decorative SVGs stay as-is. */ html[dir="rtl"] .theme-toggle svg, html[dir="rtl"] .lang-chevron, html[dir="rtl"] .icon-sun, html[dir="rtl"] .icon-moon { transform: none; } /* Hamburger lines should not flip. */ html[dir="rtl"] .menu-toggle svg { transform: none; } html[dir="rtl"] .menu-toggle.is-open svg { transform: rotate(-90deg); } /* --- Hero & content ----------------------------------------------------- */ html[dir="rtl"] .hero-content, html[dir="rtl"] .hero-cta, html[dir="rtl"] .hero-branches { text-align: right; } html[dir="rtl"] .hero-branch { text-align: right; } html[dir="rtl"] .hero-branch__num { margin-right: 0; margin-left: 12px; } /* Method connector arrow heads flip naturally with scaleX above. */ /* --- Cards -------------------------------------------------------------- */ html[dir="rtl"] .pillar-card, html[dir="rtl"] .method-step, html[dir="rtl"] .module-preview-card, html[dir="rtl"] .showcase-card, html[dir="rtl"] .card { text-align: right; } /* Pillar number sits in the top-left in LTR — move to top-right in RTL. */ html[dir="rtl"] .pillar-number { right: auto; left: var(--space-6, 1.5rem); } /* --- Header navigation -------------------------------------------------- */ html[dir="rtl"] .header-nav { direction: rtl; } /* Theme-toggle / lang-switcher / CTA group inside .header-actions — flex already handles ordering, but we want the lang-switcher dropdown's anchor to keep its leading dot on the right side. */ html[dir="rtl"] .lang-switcher-menu li[aria-selected="true"] a::before, html[dir="rtl"] .lang-switcher-menu li:not([aria-selected="true"]) a::before { margin-left: 0; margin-right: 0; } /* --- Footer ------------------------------------------------------------- */ html[dir="rtl"] .footer-col, html[dir="rtl"] .footer-brand, html[dir="rtl"] .footer-bottom, html[dir="rtl"] .footer-legal { text-align: right; } html[dir="rtl"] .footer-social { direction: ltr; /* social icons stay in conventional order */ } /* --- Forms -------------------------------------------------------------- */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"] { text-align: left; direction: ltr; } html[dir="rtl"] label { text-align: right; display: block; } /* --- Misc utility ------------------------------------------------------- */ /* Section subtitles and labels should follow document direction. */ html[dir="rtl"] .section-subtitle, html[dir="rtl"] .section-header { text-align: center; /* already centered in the LTR design; keep it. */ } /* Sidebar/pillar lists where bullets sit to the inline-start. */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } html[dir="rtl"] .footer ul, html[dir="rtl"] .nav-link { padding-right: 0; }