/* ========================================================================== Arabic. Loads on top of app.css, only on /ar/ pages. It is deliberately small, and it is small because app.css was converted to logical properties rather than duplicated: margin-inline-start, border-inline-end, text-align: start. Every box, rule and gutter in the design system mirrors itself from the dir attribute on , with no second copy to keep in step. What is left here is the part direction alone cannot do: 1 Arabic type, self-hosted, and the metrics that make it sit at the same optical size as the Latin faces it replaces 2 the four typographic conventions that are wrong in Arabic and right in English: tracking, italics, and two glyph directions 3 the bidirectional isolation that keeps a phone number, a time and an email address from being reordered by the paragraph around them 4 the language switcher 5 article bodies, which stay English and therefore stay left to right Contents 1 Fonts 2 Type conventions 3 Direction: glyphs and motion 4 Bidirectional isolation 5 The language switcher 6 Untranslated article bodies ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts IBM Plex Sans Arabic for text and UI, Noto Naskh Arabic for display. The pairing is the Latin one carried across rather than a new decision. DM Sans is a rational geometric sans and Plex Arabic is drawn on the same logic, so a heading and a label keep the relationship they have in English. Cormorant is an editorial serif and Naskh is the Arabic register that reads the same way: considered and written rather than technical. Kufi, the usual reach for an AI company, would have said something the English side of this site does not say. Both carry a Latin subset of their own and both are ordered AFTER the Latin faces on purpose. The copy on this site mixes scripts by design, because the terms that carry the meaning are English: ERP, CRM, RAG, MLOps, Microsoft Teams, Anthropic. Those runs stay in DM Sans and Cormorant, which is the brand, and only the Arabic falls through to the faces below. size-adjust is what makes that mixing survive. An Arabic face set at the same em as a Latin one reads smaller, so an English term inside an Arabic sentence would otherwise look a size too big. The two values below were tuned against the rendered pages at 1440 and 390, not calculated. -------------------------------------------------------------------------- */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 104%; src: url('../fonts/plex-arabic-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; /* 600 and up. The site sets 700 only through and , and Plex Arabic Bold is a heavier colour than DM Sans Bold at the same nominal weight, so one face covers the range without the Arabic reading louder than the English beside it. */ font-weight: 600 700; font-display: swap; size-adjust: 104%; src: url('../fonts/plex-arabic-600.woff2') format('woff2'); } @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 500 700; font-display: swap; size-adjust: 92%; src: url('../fonts/naskh-arabic-500-700.woff2') format('woff2'); } [dir="rtl"] { --sans: 'DM Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Newsreader', 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif; /* Arabic sits on a deeper baseline and carries marks above and below the line, so the Latin rhythm crowds it. One step looser everywhere the design system sets a line-height by hand. */ --ar-leading-tight: 1.35; --ar-leading-body: 1.85; /* The two display steps come down, by about 4% against the English values since 2026-08-18 and by about 12% before it. Not a taste adjustment. Arabic says the same sentence in more characters than English does here, and Naskh sets wider than Cormorant, so the hero headline that is two lines in English was running to four in Arabic and pushing the buttons under it to the bottom edge of a 900px viewport. These two values are absolute rather than relative, so they did not move when the English steps came down with the change of Latin face; the gap between the two narrowed instead, which is correct, because Newsreader sets closer to Naskh's width than Cormorant did. The clamp is kept, so the reduction holds at every width rather than only at the one it was measured on. The lower bounds are untouched: at 390px the English is already at its floor and the Arabic has room. */ --step-5: clamp(2.5rem, 1.6rem + 3.3vw, 3.7rem); --step-4: clamp(2.1rem, 1.5rem + 2.4vw, 3rem); } /* -------------------------------------------------------------------------- 2. Type conventions Three things that are correct in the English design system and wrong here. -------------------------------------------------------------------------- */ /* 2.1 Tracking. Arabic is a joined script. Letter-spacing does not space it, it opens gaps inside strokes that are meant to be continuous, which is the single most common way an otherwise careful site announces that nobody read the Arabic. The design system sets tracking in 33 separate rules, from -0.005em on headings to 0.14em on the eyebrow. Every one of them has to come off. ON THE !important It is here on purpose and it is the only one in this file. This is not a preference being forced past a more specific rule, it is an invariant of the script: there is no element on an Arabic page that should carry tracking, so there is no rule this could wrongly beat. The alternative was an enumerated selector list, which was tried first and is what caught this: it named the elements that hold copy and missed .offer-card__len and .founder__role, which are divs, so "45 دقيقة" shipped rendered as seven disconnected letters. A list that has to be kept in step with 33 rules in another file will drift again, and the failure mode is silent to anybody who does not read Arabic. */ [dir="rtl"], [dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: normal !important; } /* 2.2 Italics. No Arabic face has one. A browser asked for italic anyway will slant the upright, and a slanted Naskh looks like a rendering fault rather than emphasis. The emphasis still has to happen, so it moves to the devices Arabic actually uses: weight and colour. h1 em already carries --accent-text in the English design system, so the accent is not a new idea here, only the whole of the idea. Contrast is unchanged at 7.63:1 on --bg. */ [dir="rtl"] :is(h1, h2, h3, .display) em, [dir="rtl"] .quote blockquote, [dir="rtl"] em, [dir="rtl"] i { font-style: normal; } [dir="rtl"] :is(h1, h2, .display) em { font-weight: 600; /* The English rule reserves descender clearance for italic y/g/j/p/q tails. Upright Arabic needs none, and the reserve reads as a gap. */ padding-bottom: 0; display: inline; } [dir="rtl"] .quote blockquote { /* The rule down the start edge and the display face were already carrying most of the quotation. Without the slant they carry all of it. */ font-weight: 500; } /* 2.3 Leading. */ [dir="rtl"] :is(h1, h2, h3, .display) { line-height: var(--ar-leading-tight); } [dir="rtl"] .lead, [dir="rtl"] .prose p, [dir="rtl"] .article-lede { line-height: var(--ar-leading-body); } /* -------------------------------------------------------------------------- 3. Direction: glyphs and motion Four things point somewhere. A mirrored layout has to point the other way, and none of them is reached by a logical property: two are pseudo-element glyphs, one is a character in the markup, one is a transform. -------------------------------------------------------------------------- */ /* Forward. The English rule is a rightwards arrow that nudges 3px right. */ [dir="rtl"] .jump::after { content: '\2190'; } [dir="rtl"] .jump:hover::after { transform: translateX(-3px); } /* Back. */ [dir="rtl"] .back-link::before { content: '\2192'; } /* The calendar's previous and next chevrons are ‹ and › in the markup. Flipping the glyph rather than swapping the two links keeps "previous" as the first control in source order, which is what the tab order and the aria-labels both depend on. */ [dir="rtl"] .cal__nav > span { display: inline-block; transform: scaleX(-1); } /* The reveal on the homepage offer card enters from the side the card sits on. Mirrored, the card is on the other side, so it enters from the other one. */ [dir="rtl"] [data-reveal="right"] { transform: translateX(-24px); } [dir="rtl"] [data-reveal].is-in { transform: none; } /* -------------------------------------------------------------------------- 4. Bidirectional isolation A telephone number, a clock time and an email address are left-to-right runs sitting inside right-to-left paragraphs, and the bidi algorithm resolves their neutral characters against the paragraph rather than against the run. Left alone, +1 (844) 844-0097 renders with the plus at the wrong end and the brackets reversed, which is not a styling nicety: it is a phone number the reader cannot dial. `isolate` keeps the run out of the paragraph's resolution and `direction` sets its own. The paragraph stays right-aligned; only what is inside these flips back. -------------------------------------------------------------------------- */ [dir="rtl"] :is( a[href^="tel:"], a[href^="mailto:"], .slot__time, .slot__meta, .booking__done-when, .days__span, .cal__month, .post-card__meta, .post-lead__meta, .article-meta time, code, kbd, samp ) { direction: ltr; unicode-bidi: isolate; } /* The office address is a block, so it keeps the page's alignment and isolates its contents rather than turning the whole box around. */ [dir="rtl"] address { unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 5. The language switcher One link, in the footer, printing the language it goes to in that language's own script. No globe icon, no chevron, no dropdown. Two languages do not need a menu. Not scoped to [dir="rtl"] in app.css. That file loads on both languages and the switcher exists in both, so its rules live there. What is here is only the part that has to change under Arabic. -------------------------------------------------------------------------- */ [dir="rtl"] .lang-switch { /* The English name of the language, inside an Arabic nav. Its own run. */ direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 6. Untranslated article bodies 62 post bodies are hand-written HTML in the database and rule 4 in CLAUDE.md forbids writing to them, so an article under /ar/ is Arabic chrome around an English body. Forcing the body itself back to left-to-right is not a compromise, it is the correct rendering: the text is English and marked lang="en" in the markup, and an English paragraph laid out right-to-left has its punctuation at the wrong end of every sentence. blog-legacy.css is the article CSS contract and is not touched. It loads on these views as it always has, and it is written for a left-to-right box, which is exactly what this hands it. -------------------------------------------------------------------------- */ [dir="rtl"] .article-inner { direction: ltr; text-align: start; } /* The notice above the body is the site speaking, not the article, so it stays Arabic and stays mirrored. */ [dir="rtl"] .article-lang-note { direction: rtl; text-align: start; max-width: var(--measure); margin: 0 auto var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-inline-start: 2px solid var(--accent); border-radius: var(--r); background: var(--surface); color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; }