/* Autometa AI — RTL + Arabic font overrides * Activated by: and body.lang-ar (both set by i18n.js). * Arabic font (Tajawal) is loaded via in each HTML file. */ /* ===== Arabic font stack ===== */ body.lang-ar, body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4, body.lang-ar h5, body.lang-ar h6, body.lang-ar p, body.lang-ar a, body.lang-ar span, body.lang-ar div, body.lang-ar li, body.lang-ar button, body.lang-ar input, body.lang-ar textarea, body.lang-ar em, body.lang-ar strong { font-family: 'Tajawal', 'Noto Sans Arabic', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; letter-spacing: 0 !important; } /* Preserve font on brand wordmark dot + monospace tokens where appropriate */ body.lang-ar .mono, body.lang-ar [class*="JetBrains"] { font-family: 'JetBrains Mono', monospace !important; } /* Tighter serif italics don't translate well to Arabic — drop italic, keep weight */ body.lang-ar em, body.lang-ar .serif-em, body.lang-ar i { font-style: normal !important; font-weight: 700; } /* ===== Language toggle button (used across pages) ===== */ .lang-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; margin: 0 4px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink, #0E1116); background: transparent; border: 1px solid var(--border, #E5E9ED); border-radius: 999px; cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; line-height: 1; white-space: nowrap; } .lang-toggle:hover { background: var(--surface-alt, #F5F6F7); color: var(--ink, #0E1116); border-color: var(--ink-mute, #8A94A2); } body.lang-ar .lang-toggle { font-family: 'Inter', system-ui, sans-serif !important; } /* On cream / service pages with different tokens */ .cat-core .lang-toggle, .cat-ai .lang-toggle, .cat-custom .lang-toggle { border-color: var(--border, rgba(14,17,22,0.1)); } /* ===== RTL layout overrides ===== */ html[dir="rtl"] body { text-align: right; } /* Flex rows that look like left→right visual order need to flip */ html[dir="rtl"] .nav-inner, html[dir="rtl"] .nav-links, html[dir="rtl"] .hero-ctas, html[dir="rtl"] .svc-hero-ctas, html[dir="rtl"] .trust-row, html[dir="rtl"] .hero-body, html[dir="rtl"] .foot-grid, html[dir="rtl"] .foot-bar, html[dir="rtl"] .serv-grid, html[dir="rtl"] .subs-grid, html[dir="rtl"] .stack-grid, html[dir="rtl"] .process-grid, html[dir="rtl"] .engage-grid, html[dir="rtl"] .related-grid, html[dir="rtl"] .case-inner, html[dir="rtl"] .cal-grid, html[dir="rtl"] .pbk-grid, html[dir="rtl"] .results-cta, html[dir="rtl"] .serv-foot, html[dir="rtl"] .leak-tags, html[dir="rtl"] .heads, html[dir="rtl"] .stats-grid, html[dir="rtl"] .testimonial-inline, html[dir="rtl"] .hp-row, html[dir="rtl"] .lead-row, html[dir="rtl"] .slots-head, html[dir="rtl"] .slots-foot, html[dir="rtl"] .micro-trust, html[dir="rtl"] .breadcrumb, html[dir="rtl"] .week-nav, html[dir="rtl"] .case-metrics { direction: rtl; } /* Arrows in buttons/links — mirror direction for RTL */ html[dir="rtl"] .btn svg, html[dir="rtl"] .svc-link svg, html[dir="rtl"] .related-card .arrow, html[dir="rtl"] .nav-links svg { transform: scaleX(-1); } /* Text-based arrows in RTL should visually point right→left to match flow */ html[dir="rtl"] .sub-more, html[dir="rtl"] .svc-link, html[dir="rtl"] .watch { direction: rtl; } /* Mega menu: re-anchor + flip grid */ html[dir="rtl"] .mega { direction: rtl; } html[dir="rtl"] .mega-card { flex-direction: row-reverse; text-align: right; } /* Hero photo column should stay on the right in LTR → left in RTL */ html[dir="rtl"] .hero-body { direction: rtl; } /* Lists: dots/bullets flow from right */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.2em; padding-left: 0; } html[dir="rtl"] .svc-list li, html[dir="rtl"] .engage-included li { text-align: right; } /* Eyebrow dots */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .svc-tag { flex-direction: row-reverse; } /* Breadcrumb separators still read naturally when dir flips */ html[dir="rtl"] .breadcrumb .sep { transform: scaleX(-1); display: inline-block; } /* FAQ plus icons stay aligned */ html[dir="rtl"] .faq-q { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .faq-icn { margin-right: 0; margin-left: auto; } /* Pipeline / process cards — number circle swaps side */ html[dir="rtl"] .proc-step, html[dir="rtl"] .step { text-align: right; } /* Testimonial avatar left-of-quote → right-of-quote */ html[dir="rtl"] .testimonial-inline, html[dir="rtl"] .case-by, html[dir="rtl"] .poly-head, html[dir="rtl"] .prob-body, html[dir="rtl"] .results-head, html[dir="rtl"] .serv-head, html[dir="rtl"] .section-head { text-align: right; } /* Polaroid wall — the marquee is a visual carousel, not text flow. Keep it LTR internally so flex + translateX animation stays on-screen. Reverse the animation so it feels natural moving right-to-left in AR. */ html[dir="rtl"] .poly, html[dir="rtl"] .track-wrap, html[dir="rtl"] .track { direction: ltr !important; } html[dir="rtl"] .track { animation-direction: reverse !important; } /* Polaroid caption text still reads RTL in Arabic */ body.lang-ar .polaroid figcaption, body.lang-ar .poly-name, body.lang-ar .poly-role, body.lang-ar .poly-quote { direction: rtl; text-align: center; } /* Footer columns: push brand column to the right */ html[dir="rtl"] .foot-grid { grid-auto-flow: row; } /* Popups & mobile CTA */ html[dir="rtl"] .popup { left: auto !important; right: 20px; } html[dir="rtl"] .popup-close { right: auto; left: 10px; } html[dir="rtl"] .mobile-cta { left: auto; right: 16px; } /* Lightbox close */ html[dir="rtl"] .lightbox-close { right: auto; left: 20px; } /* Cal.com slots grid stays LTR for time readability; only wrapper flips */ html[dir="rtl"] .days-grid { direction: rtl; } /* Service page hero panel rows */ html[dir="rtl"] .hero-panel-rows .hp-row { direction: rtl; } html[dir="rtl"] .hp-row .ava { margin-right: 0; margin-left: 12px; } /* Wordmark dot — keep to left of brand in LTR, right of brand in RTL */ html[dir="rtl"] .wordmark { flex-direction: row-reverse; } /* Section padding parity */ html[dir="rtl"] section { direction: rtl; } /* Prevent numbers/units from reversing in Arabic */ body.lang-ar .stat-num, body.lang-ar .case-metric .num, body.lang-ar .engage-price, body.lang-ar .svc-num, body.lang-ar .day-header .num, body.lang-ar .big, body.lang-ar .num, body.lang-ar .badge { direction: ltr; unicode-bidi: isolate; } /* Keep email/phone/URL LTR even in AR for legibility */ body.lang-ar a[href^="mailto:"], body.lang-ar a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Hero highlight underline offset re-align in RTL */ html[dir="rtl"] .hl { background-position: right bottom; }