/* ============================================================================ sigmix.ai marketing — ARABIC / RTL layer. WHY A SEPARATE FILE: public/newsite/site.css is the design team's delivery, served verbatim and kept byte-auditable against it (the contract, founder 2026-07-31). Nothing here edits it. This sheet loads ONLY when the marketing surface is in Arabic and adds the RTL layer the delivery never had — it ships zero [dir] rules and zero references to the Arabic font. Everything is scoped `[dir="rtl"] .smx4 …` so it is inert in English. DELIBERATELY NOT MIRRORED: the corner-bracket motif (.tk.tr/.tk.br/.pk.tr/ .pk.br, ~40 border-right rules) is a decorative frame, not a directional cue — mirroring it would just move the ornament, and a symmetric frame reads the same either way. Same for centring transforms and vertical reveals. ========================================================================== */ /* ---- 1. Typography ------------------------------------------------------ The delivered sheet builds every token on 'Space Grotesk' / 'Inter', neither of which has Arabic coverage, so Arabic fell back to a system face mid-page. --font-ar (IBM Plex Sans Arabic) is already exposed on by layout.tsx. Inputs are listed explicitly: they do not inherit font-family. */ [dir="rtl"] .smx4, [dir="rtl"] .smx4 button, [dir="rtl"] .smx4 input, [dir="rtl"] .smx4 select, [dir="rtl"] .smx4 textarea { font-family: var(--font-ar), 'Inter', system-ui, sans-serif; } /* Latin display tracking shreds cursive Arabic — STYLE-GUIDE §8. Headings need room to breathe and no letter-spacing at all. */ [dir="rtl"] .smx4 h1, [dir="rtl"] .smx4 h2, [dir="rtl"] .smx4 h3, [dir="rtl"] .smx4 h4, [dir="rtl"] .smx4 .display, [dir="rtl"] .smx4 .eyebrow, [dir="rtl"] .smx4 .btn, [dir="rtl"] .smx4 .nav-link { letter-spacing: normal; line-height: 1.5; word-spacing: normal; } /* Code, IDs and mono runs keep their Latin face + tracking. */ [dir="rtl"] .smx4 code, [dir="rtl"] .smx4 pre, [dir="rtl"] .smx4 .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; } /* ---- 2. LTR islands ----------------------------------------------------- Numbers, prices, percentages, dates, versions, emails, URLs and product IDs must render left-to-right even inside Arabic prose, or the digits and their punctuation reorder. `plaintext` lets each element pick direction from its own first strong character, which is exactly right for mixed content. */ [dir="rtl"] .smx4 .price, [dir="rtl"] .smx4 .num, [dir="rtl"] .smx4 .stat, [dir="rtl"] .smx4 .metric, [dir="rtl"] .smx4 time, [dir="rtl"] .smx4 code, [dir="rtl"] .smx4 [dir="ltr"] { unicode-bidi: plaintext; } /* An English sentence left untranslated on purpose (a product name line, a legal citation) must keep its trailing full stop at the END. */ [dir="rtl"] .smx4 p, [dir="rtl"] .smx4 li, [dir="rtl"] .smx4 figcaption, [dir="rtl"] .smx4 .sub, [dir="rtl"] .smx4 .lede { unicode-bidi: plaintext; } /* ---- 3. Text alignment -------------------------------------------------- 20 `text-align:left` rules in the delivery pin copy to the left. Centre stays centre (45 rules) — that is a composition choice, not a direction. */ [dir="rtl"] .smx4 [class*="left"], [dir="rtl"] .smx4 .col, [dir="rtl"] .smx4 .card, [dir="rtl"] .smx4 .feat, [dir="rtl"] .smx4 .row, [dir="rtl"] .smx4 table th, [dir="rtl"] .smx4 table td { text-align: start; } /* ---- 4. Accent borders + inline spacing --------------------------------- `border-left` here is a quote/callout accent stripe: a directional cue that belongs on the reading edge, so it moves. margin-left/padding-left likewise. */ [dir="rtl"] .smx4 blockquote, [dir="rtl"] .smx4 .quote, [dir="rtl"] .smx4 .callout, [dir="rtl"] .smx4 .note, [dir="rtl"] .smx4 .accent { border-left: 0; border-inline-start: 2px solid currentColor; } /* ---- 5. Directional icons ---------------------------------------------- Forward arrows/chevrons point the way the reader travels, so they flip. Brand marks, the Σ, logos, media and play buttons never do. */ [dir="rtl"] .smx4 .btn svg.arrow, [dir="rtl"] .smx4 .link svg, [dir="rtl"] .smx4 .go svg, [dir="rtl"] .smx4 .arrow, [dir="rtl"] .smx4 .chev { transform: scaleX(-1); } [dir="rtl"] .smx4 .logo svg, [dir="rtl"] .smx4 .brand svg, [dir="rtl"] .smx4 .play svg, [dir="rtl"] .smx4 img { transform: none; } /* ---- 6. Lists ----------------------------------------------------------- */ [dir="rtl"] .smx4 ul, [dir="rtl"] .smx4 ol { padding-left: 0; padding-inline-start: 1.3em; } /* ---- 7. The language pill ----------------------------------------------- */ [dir="rtl"] .smx4 .lang-link { letter-spacing: normal; } /* ---- 8. Motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [dir="rtl"] .smx4 * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }