/* ========================================================================== MOYOTEC — Arabic RTL Stylesheet Load ONLY on /ar/ pages, AFTER the main stylesheet. Requires: -------------------------------------------------------------------------- Strategy: use CSS logical properties so the same rules work in both directions. Where a physical property is unavoidable, scope it under [dir="rtl"]. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Arabic font stack Arabic glyphs are visually denser than Latin at the same px size, so we bump the base size and line-height for readability. -------------------------------------------------------------------------- */ @font-face { font-family: 'NotoSansArabicLocal'; src: local('Noto Sans Arabic'), local('NotoSansArabic-Regular'); font-display: swap; } [dir="rtl"] { --font-arabic: 'Noto Sans Arabic', 'IBM Plex Sans Arabic', 'Dubai', 'Tahoma', 'Arial', sans-serif; --ar-size-scale: 1.06; /* ~+1px at 16px base */ --ar-line-height: 1.85; /* Arabic needs more leading than Latin */ } [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button { font-family: var(--font-arabic); font-size: calc(1rem * var(--ar-size-scale)); line-height: var(--ar-line-height); letter-spacing: 0; /* never letter-space Arabic — it breaks joining */ word-spacing: normal; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: var(--font-arabic); line-height: 1.5; letter-spacing: 0; font-weight: 700; } /* Arabic has no uppercase — these transforms do nothing but risk artifacts */ [dir="rtl"] * { text-transform: none !important; font-variant: normal; } /* -------------------------------------------------------------------------- 2. Base direction & alignment -------------------------------------------------------------------------- */ [dir="rtl"] body { direction: rtl; text-align: start; } [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] dd, [dir="rtl"] blockquote, [dir="rtl"] .text-left { text-align: start; } [dir="rtl"] .text-right { text-align: end; } [dir="rtl"] .text-center { text-align: center; } /* -------------------------------------------------------------------------- 3. Logical property conversions Replace physical margin/padding/position with logical equivalents. Adapt the selectors on the left to your actual class names. -------------------------------------------------------------------------- */ /* Generic utility remap — if the theme uses Tailwind-like utilities */ [dir="rtl"] .ml-auto { margin-left: revert; margin-inline-start: auto; } [dir="rtl"] .mr-auto { margin-right: revert; margin-inline-end: auto; } [dir="rtl"] .pl-4 { padding-left: revert; padding-inline-start: 1rem; } [dir="rtl"] .pr-4 { padding-right: revert; padding-inline-end: 1rem; } [dir="rtl"] .border-l { border-left: revert; border-inline-start: 1px solid currentColor; } [dir="rtl"] .border-r { border-right: revert; border-inline-end: 1px solid currentColor; } /* Recommended: in the MAIN stylesheet, migrate these globally margin-left -> margin-inline-start margin-right -> margin-inline-end padding-left -> padding-inline-start padding-right -> padding-inline-end left / right -> inset-inline-start / inset-inline-end text-align: left -> text-align: start text-align: right -> text-align: end border-left -> border-inline-start border-radius: 8px 0 0 8px -> border-start-start-radius etc. Doing so removes most of the need for this override file. */ /* -------------------------------------------------------------------------- 4. Header & navigation -------------------------------------------------------------------------- */ [dir="rtl"] .site-header .container, [dir="rtl"] .navbar { flex-direction: row-reverse; } [dir="rtl"] .nav-list { flex-direction: row-reverse; padding-inline-start: 0; } [dir="rtl"] .nav-list > li + li { margin-left: 0; margin-inline-start: 1.75rem; } /* Dropdown menus open toward the start edge */ [dir="rtl"] .dropdown-menu { left: auto; right: 0; inset-inline-start: auto; inset-inline-end: 0; text-align: start; } /* Language switcher stays visually consistent */ [dir="rtl"] .lang-switcher .lang-list { inset-inline-end: 0; inset-inline-start: auto; text-align: start; } /* Mobile drawer slides in from the right */ [dir="rtl"] .mobile-drawer { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .mobile-drawer.is-open { transform: translateX(0); } [dir="rtl"] .drawer-close { inset-inline-end: auto; inset-inline-start: 1rem; } /* -------------------------------------------------------------------------- 5. Icon & arrow mirroring Directional icons must flip. Brand marks, product photos, play buttons and checkmarks must NOT. -------------------------------------------------------------------------- */ [dir="rtl"] .icon-arrow-right, [dir="rtl"] .icon-arrow-left, [dir="rtl"] .icon-chevron-right, [dir="rtl"] .icon-chevron-left, [dir="rtl"] .icon-caret, [dir="rtl"] .breadcrumb-separator, [dir="rtl"] .carousel-prev, [dir="rtl"] .carousel-next, [dir="rtl"] .pagination-prev, [dir="rtl"] .pagination-next, [dir="rtl"] .btn-arrow::after, [dir="rtl"] .back-link::before { transform: scaleX(-1); } /* NEVER mirror these */ [dir="rtl"] .site-logo, [dir="rtl"] .site-logo img, [dir="rtl"] .product-image, [dir="rtl"] .product-image img, [dir="rtl"] .cert-badge, [dir="rtl"] .icon-play, [dir="rtl"] .icon-check, [dir="rtl"] .icon-whatsapp, [dir="rtl"] .flag-icon, [dir="rtl"] figure img { transform: none !important; } /* "View Details →" style CTA: arrow sits on the start edge and points left */ [dir="rtl"] .btn-arrow { flex-direction: row-reverse; } [dir="rtl"] .btn-arrow::after { content: "\2190"; /* ← */ margin-inline-start: .5rem; margin-inline-end: 0; } /* -------------------------------------------------------------------------- 6. Breadcrumbs -------------------------------------------------------------------------- */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; justify-content: flex-end; padding-inline-start: 0; } [dir="rtl"] .breadcrumb li + li::before { content: "\\"; /* reversed slash reads correctly in RTL */ margin-inline: .5rem; } /* -------------------------------------------------------------------------- 7. Cards, grids, product listing -------------------------------------------------------------------------- */ [dir="rtl"] .card, [dir="rtl"] .product-card, [dir="rtl"] .news-card, [dir="rtl"] .category-card { text-align: start; direction: rtl; } [dir="rtl"] .card-meta, [dir="rtl"] .product-card__spec { flex-direction: row-reverse; } /* Grid flow is automatically mirrored by dir=rtl for flex/grid. Only force it where a fixed order was hardcoded. */ [dir="rtl"] .grid-reverse-fix { direction: rtl; } /* Badges pinned to a corner */ [dir="rtl"] .card-badge { inset-inline-end: .75rem; inset-inline-start: auto; } /* Spec tables inside product detail */ [dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td { text-align: start; } [dir="rtl"] .spec-table th:first-child { border-inline-start: none; } /* -------------------------------------------------------------------------- 8. Forms — the contact / inquiry form -------------------------------------------------------------------------- */ [dir="rtl"] label, [dir="rtl"] .form-label { text-align: start; display: block; } [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] textarea, [dir="rtl"] select { text-align: start; direction: rtl; padding-inline: .875rem; } /* Fields whose content is Latin/numeric must stay LTR while remaining right-aligned within the RTL layout. Also set dir="ltr" in the HTML for these inputs. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[name="model"], [dir="rtl"] input[name="quantity"], [dir="rtl"] input.ltr-input { direction: ltr; text-align: end; } /* Required asterisk on the correct side */ [dir="rtl"] .required::after { content: " *"; margin-inline-start: .25rem; margin-inline-end: 0; } /* Select dropdown arrow */ [dir="rtl"] select { background-position: left .75rem center; padding-inline-start: 2.25rem; padding-inline-end: .875rem; } /* Validation messages */ [dir="rtl"] .form-error, [dir="rtl"] .form-hint { text-align: start; } /* Checkbox / radio */ [dir="rtl"] .checkbox-wrap, [dir="rtl"] .radio-wrap { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .checkbox-wrap input, [dir="rtl"] .radio-wrap input { margin-inline-end: .5rem; margin-inline-start: 0; } /* -------------------------------------------------------------------------- 9. Bidirectional text — model numbers inside Arabic sentences Wrap model numbers and specs in in the HTML: YQK-70 16-400mm² These rules make them render predictably. -------------------------------------------------------------------------- */ [dir="rtl"] bdi, [dir="rtl"] .model-no, [dir="rtl"] .spec-value, [dir="rtl"] .product-model, [dir="rtl"] code, [dir="rtl"] .sku { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: 'Arial', 'Helvetica Neue', sans-serif; } /* Phone numbers and emails */ [dir="rtl"] .phone, [dir="rtl"] .email, [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Keep Western Arabic numerals (1234) — do NOT switch to ٤٣٢١. B2B buyers read model numbers and specs in Latin digits. */ [dir="rtl"] { font-variant-numeric: lining-nums; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } /* -------------------------------------------------------------------------- 10. Footer -------------------------------------------------------------------------- */ [dir="rtl"] .site-footer { text-align: start; direction: rtl; } [dir="rtl"] .footer-cols { flex-direction: row-reverse; } [dir="rtl"] .footer-links { padding-inline-start: 0; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } [dir="rtl"] .social-icons { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- 11. Floating WhatsApp button Gulf buyers use WhatsApp heavily — keep it prominent. Mirror to the start (right) edge. -------------------------------------------------------------------------- */ [dir="rtl"] .whatsapp-float { right: auto; left: 1.25rem; /* opposite corner from LTR to avoid clashing */ inset-inline-start: 1.25rem; inset-inline-end: auto; } [dir="rtl"] .whatsapp-float .tooltip { inset-inline-start: 100%; inset-inline-end: auto; direction: rtl; } /* -------------------------------------------------------------------------- 12. Misc components -------------------------------------------------------------------------- */ /* Cookie banner */ [dir="rtl"] .cookie-banner { direction: rtl; text-align: start; } [dir="rtl"] .cookie-banner .actions { flex-direction: row-reverse; } /* Accordion / FAQ toggle icon */ [dir="rtl"] .accordion-header { flex-direction: row-reverse; } [dir="rtl"] .accordion-icon { margin-inline-end: 0; margin-inline-start: auto; } /* Progress / stepper */ [dir="rtl"] .stepper { flex-direction: row-reverse; } [dir="rtl"] .progress-bar__fill { inset-inline-start: 0; inset-inline-end: auto; } /* Tooltips */ [dir="rtl"] [data-tooltip]::after { direction: rtl; text-align: start; } /* Blockquote accent border */ [dir="rtl"] blockquote { border-left: none; border-inline-start: 3px solid currentColor; padding-inline-start: 1rem; padding-inline-end: 0; } /* Lists */ [dir="rtl"] ul, [dir="rtl"] ol { padding-inline-start: 1.5rem; padding-inline-end: 0; } /* -------------------------------------------------------------------------- 13. Search overlay (the Ctrl+K modal) -------------------------------------------------------------------------- */ [dir="rtl"] .search-modal, [dir="rtl"] .search-input { direction: rtl; text-align: start; } /* Keyboard shortcut hints stay LTR */ [dir="rtl"] .search-modal kbd, [dir="rtl"] .shortcut-hint { direction: ltr; unicode-bidi: isolate; display: inline-block; } [dir="rtl"] .search-result-item { flex-direction: row-reverse; text-align: start; } /* -------------------------------------------------------------------------- 14. Mobile adjustments Arabic wraps differently — guard against overflow on small screens. -------------------------------------------------------------------------- */ @media (max-width: 768px) { [dir="rtl"] body { font-size: calc(0.95rem * var(--ar-size-scale)); } [dir="rtl"] h1 { font-size: 1.75rem; line-height: 1.45; } [dir="rtl"] h2 { font-size: 1.4rem; line-height: 1.5; } [dir="rtl"] .navbar, [dir="rtl"] .footer-cols, [dir="rtl"] .footer-bottom { flex-direction: column; align-items: flex-start; } /* Long Arabic words should wrap, not overflow */ [dir="rtl"] * { overflow-wrap: break-word; word-break: normal; } [dir="rtl"] .whatsapp-float { inset-inline-start: 1rem; bottom: 1rem; } } /* -------------------------------------------------------------------------- 15. Print -------------------------------------------------------------------------- */ @media print { [dir="rtl"] body { direction: rtl; font-family: var(--font-arabic); } [dir="rtl"] .whatsapp-float, [dir="rtl"] .cookie-banner, [dir="rtl"] .lang-switcher { display: none !important; } } /* Arrow glyphs are directional: a hard-coded → points "backwards" in RTL. Flip the ones we emit as literal characters. */ [dir="rtl"] .cat-go, [dir="rtl"] .link-more { unicode-bidi: plaintext; } [dir="rtl"] .cat-go::after, [dir="rtl"] .link-more::after { content: ""; }