/* ========================================================= DigiForge — RTL overrides (Arabic and future RTL locales) Loaded ONLY on pages whose , so the 17 LTR languages never receive these rules. Everything is scoped under html[dir="rtl"]; physical left/right are mirrored, logical layout (flex/grid/text) is left to the browser. ========================================================= */ /* Arabic-capable type via system fonts (the project self-hosts its Latin fonts and deliberately avoids external Google Fonts requests). When real Arabic copy lands, a self-hosted Arabic webface can be dropped in here. Latin placeholders still render fine in the meantime. */ html[dir="rtl"]{ --f-display:'Segoe UI','Tahoma','Noto Sans Arabic','Space Grotesk',sans-serif; --f-body:'Segoe UI','Tahoma','Noto Sans Arabic','Plus Jakarta Sans',sans-serif; } /* ---- LTR islands: brand lockup & code must not be mirrored ---- */ html[dir="rtl"] .logo{direction:ltr;} html[dir="rtl"] .code-card, html[dir="rtl"] .code-body, html[dir="rtl"] .marquee-track{direction:ltr;text-align:left;} /* ---- header / nav ---- */ html[dir="rtl"] .nav a::after{transform-origin:right;} /* ---- language switcher (desktop dropdown) ---- */ html[dir="rtl"] .lang-menu{right:auto;left:0;transform-origin:top left;} /* ---- mobile menu ---- */ html[dir="rtl"] .mm-inner .m-link:hover, html[dir="rtl"] .mm-inner .m-link.active{padding-left:2px;padding-right:10px;} html[dir="rtl"] .mm-inner .m-link::after{transform:scaleX(-1) rotate(45deg);} html[dir="rtl"] .mm-inner .m-link:hover::after, html[dir="rtl"] .mm-inner .m-link.active::after{transform:scaleX(-1) rotate(45deg) translate(1px,-1px);} /* ---- buttons: mirror the forward arrow + keep the hover nudge pointing forward ---- */ html[dir="rtl"] .btn svg{transform:scaleX(-1);} html[dir="rtl"] .btn-primary:hover svg, html[dir="rtl"] .btn-ghost:hover svg{transform:scaleX(-1) translateX(3px);} /* ---- service cards (home) ---- */ html[dir="rtl"] .card .num{right:auto;left:24px;} html[dir="rtl"] .card-go svg{transform:scaleX(-1);} html[dir="rtl"] .card:hover .card-go svg{transform:scaleX(-1) translateX(3px);} /* ---- module chips ---- */ html[dir="rtl"] .mod-chip:hover{transform:translateX(-4px);} /* ---- work cards ---- */ html[dir="rtl"] .work-cat{left:auto;right:14px;} html[dir="rtl"] .project-mark{left:auto;right:clamp(22px,4vw,38px);} html[dir="rtl"] .visual-code, html[dir="rtl"] .visual-ai, html[dir="rtl"] .visual-search, html[dir="rtl"] .visual-flower, html[dir="rtl"] .visual-building{right:auto;left:30px;} /* ---- footer ---- */ html[dir="rtl"] .footer-col a:hover, html[dir="rtl"] .footer-col a.active{transform:translateX(-3px);} /* ---- service / detail pages ---- */ html[dir="rtl"] .sp-meta-item .v{text-align:left;} html[dir="rtl"] .sp-step:hover{transform:translateX(-4px);} html[dir="rtl"] .faq-q{text-align:right;} html[dir="rtl"] .related-card .arr{transform:scaleX(-1);} html[dir="rtl"] .related-card:hover h3 .arr{transform:scaleX(-1) translate(3px,-3px);} /* ---- capabilities page tech rows ---- */ html[dir="rtl"] .ct-desc{text-align:left;} /* ---- contact form ---- */ html[dir="rtl"] .field label .req{margin-left:0;margin-right:2px;} html[dir="rtl"] .cselect-trigger{text-align:right;} /* ---- about page decorative quote mark ---- */ html[dir="rtl"] .about-quote .qmark{left:auto;right:26px;} /* ---- chat / AI assistant widget: move to bottom-left, mirror internals ---- */ html[dir="rtl"] .dfa{right:auto;left:clamp(14px,4vw,28px);} html[dir="rtl"] .dfa-launcher{margin-left:0;margin-right:auto;} html[dir="rtl"] .dfa-panel{right:auto;left:0;transform-origin:bottom left;} html[dir="rtl"] .dfa-mark svg{right:auto;left:-3px;} html[dir="rtl"] .dfa-cursor{margin-left:0;margin-right:1px;} html[dir="rtl"] .dfa-send svg{transform:scaleX(-1);} html[dir="rtl"] .dfa-msg.me{border-bottom-right-radius:16px;border-bottom-left-radius:5px;} html[dir="rtl"] .dfa-msg.bot{border-bottom-left-radius:16px;border-bottom-right-radius:5px;} /* ---- generic opt-in helper for any explicitly-tagged directional icon ---- */ html[dir="rtl"] .directional-icon{transform:scaleX(-1);} /* ---- responsive: capabilities tech desc realigns when rows stack ---- */ @media (max-width:560px){ html[dir="rtl"] .ct-desc{text-align:right;} } /* ---- responsive: chat widget on small screens ---- */ @media (max-width:520px){ html[dir="rtl"] .dfa{right:auto;left:10px;} } /* ---- Knowledge Base article body (mirror bullets, numbers, quote bar, sources) ---- */ html[dir="rtl"] .prose ul li{padding-left:0;padding-right:26px;} html[dir="rtl"] .prose ul li::before{left:auto;right:4px;} html[dir="rtl"] .prose ol li{padding-left:0;padding-right:38px;} html[dir="rtl"] .prose ol li::before{left:auto;right:0;} html[dir="rtl"] .prose blockquote{padding:6px 26px 6px 0;border-left:0;border-right:3px solid var(--ember);} html[dir="rtl"] .art-sources li{padding-left:0;padding-right:20px;} html[dir="rtl"] .art-sources li::before{left:auto;right:1px;} /* Arabic/RTL has no drop-cap convention (cursive joining breaks on an isolated enlarged first letter) — render the first letter normally instead. */ html[dir="rtl"] .prose p:first-of-type::first-letter{float:none;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;color:inherit;font-family:inherit;} /* article: reading progress fills from the right; category pill mirrors to the right */ html[dir="rtl"] .read-progress{left:auto;right:0;} html[dir="rtl"] .kb-card .cat-pill{left:auto;right:13px;} @media (max-width:760px){ html[dir="rtl"] .art-hero .breadcrumb{text-align:right;} }