/* ============================================================ css/arabic-type.css Arabic face, type scale and Latin-island handling. Loaded ONLY by /ar/ pages, AFTER every English stylesheet and immediately BEFORE css/rtl.css. English pages load neither file, so nothing in here can reach the live English site. Load order on an Arabic page: main.css -> header.css -> footer.css -> .css -> buttons.css -> arabic-type.css -> rtl.css Split of responsibility: arabic-type.css = font, size, leading, weight, tracking rtl.css = direction, mirroring, geometry Spec: docs/arabic-localization-plan.md section 4. ============================================================ */ :root { /* IBM Plex Sans Arabic is the Arabic companion to IBM Plex Sans, drawn on the same rationalist-grotesque logic Inter descends from. Noto Sans Arabic is the safety net for any glyph Plex misses; the rest is the OS fallback already named in css/main.css so the two stacks agree. */ --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, Arial, sans-serif; } /* css/main.css:1801 already points :is([lang="ar"], [dir="rtl"], bdi[lang="ar"]) at a system Arabic stack, at (0,1,0). Both declarations below are (0,1,0) or higher and load later, so they take over cleanly. is set as well as so that anything reparented outside (a in the top layer, for instance) still inherits the brand face. */ [dir="rtl"], [dir="rtl"] body { font-family: var(--font-ar); } /* ---- 1. Size ---- Arabic has no capitals and no x-height ceiling, so at Inter's 16px body size it reads visibly smaller. +6.25% is the smallest bump that closes the gap. Only `body` is touched: every component on this site sizes in rem, so nothing in the grid reflows. */ [dir="rtl"] body { font-size: 17px; } /* ---- 2. Leading ---- Arabic ascenders (ا ل ك ط) and descenders (ج ح خ ع غ ي) overlap between lines at Latin leading. Body 1.7 -> 1.9; headings, set at 1.12-1.25 in main.css, go to 1.45-1.5 or the dots under ب / ج hit the line above. */ [dir="rtl"] body { line-height: 1.9; } [dir="rtl"] :is(h1, h2, h3, h4, h5, h6) { line-height: 1.5; } [dir="rtl"] h1 { line-height: 1.45; } /* The two display strings that are set tightest of all. */ [dir="rtl"] :is(.hero-headline, .stat-number, .fact-strip dt) { line-height: 1.35; } /* ---- 3. Letter-spacing must be zero ---- Arabic is a joining script: any tracking value inserts a gap inside a single word and breaks the connected form. This codebase sets letter-spacing at 44 sites across 11 stylesheets, several of them two-class selectors inside minified lines. Enumerating 25 override selectors that each have to out-specify those is worse than one bounded `*`. The blast radius is [dir="rtl"] only, i.e. the /ar/ mirror. This is the one `!important` in the Arabic layer; do not add a second. */ [dir="rtl"] * { letter-spacing: normal !important; } /* ---- 4. Weight remap ---- IBM Plex Sans Arabic tops out at 700. The site asks for 800 in several places; without this the browser synthesises a smeared fake-bold. */ [dir="rtl"] :is(.stat-number, .fact-strip dt, .cert-brand-meta strong, .hero-headline, .catalog-hero h1, .footer-name, .brand-name) { font-weight: 700; } /* ---- 5. Latin islands keep Inter ---- Brand names, phone numbers, emails, URLs, ISO designations and spec values stay Latin inside the Arabic copy (see the do-not-translate list in the plan, section 5.1). They are marked up as or , so the selector is the markup convention, not a guess. The list is deliberately element-level: :is() matches the element itself, never its descendants, so a Font Awesome nested anywhere inside one of these keeps its own face. */ /* .spec-table td was in this list while every spec cell was Latin. On the Arabic catalogues the Certificate, System, Range, Size and Location columns are Arabic prose, and --font has no Arabic face — those cells fell back to Segoe UI/Arial and sat visibly off-register against the copy around them. Every Latin value inside these tables is already wrapped in or , both of which are still listed here, so removing the blanket cell rule loses nothing. */ [dir="rtl"] :is([lang="en"], code, .contact-value, .footer-bottom, .footer-credit, bdi) { font-family: var(--font); } /* ---- 6. The language toggle ---- css/header.css:484 scopes .lang-toggle to a system Arabic stack, and .lang-toggle-label to 17px/700 with a -1px baseline nudge, because on the English pages the label is the Arabic word "عربي". On the Arabic pages the label is the Latin word "English", so all three of those corrections are wrong: Inter needs no nudge, and 17px/700 Latin shouts next to a 15px nav. Hand the pill back to the base face and the pill's own size. */ [dir="rtl"] .lang-toggle { font-family: var(--font); } [dir="rtl"] .lang-toggle-label { font-size: 0.9375rem; font-weight: 600; transform: none; } /* ---- 7. text-transform: uppercase is a no-op on Arabic ---- .section-label, .badge, .since, .footer-col h3, .enquiry-label and .fact-strip dd all lean on uppercase to read as labels rather than as body text. Arabic has no case, so the device disappears. Weight and colour are already set on all of them; a little extra weight is what carries the distinction instead. No new colours, no new sizes. */ [dir="rtl"] :is(.section-label, .badge, .since, .footer-col h3, .enquiry-label, .fact-strip dd, .hero-proof-label, .eyebrow) { font-weight: 700; } /* ---- 8. Numerals: nothing to declare, and that is the point ---- Western digits (0-9) everywhere, per plan section 4.4: the visible phone number has to match its own tel: href, font-variant-numeric: tabular-nums (set at nine sites) only affects Latin digits, and js/main.js emits Latin digits for the animated counters and the copyright year. U+0030-0039 render as Western digits in IBM Plex Sans Arabic by default, so no declaration is needed here. Do NOT add font-feature-settings to force it: that property overrides font-variant-numeric wholesale and would silently disable the tabular alignment .fact-strip and .service-num depend on. ---- 9. Alignment: also nothing to declare ---- `text-align` inherits, and the start edge is already the right edge under dir="rtl". Declaring text-align on p/li/dd here would break the deliberately centred .section-header and .contact-card blocks. Directional text-align fixes belong in css/rtl.css, per component, and only where a stylesheet has hard-coded `left` or `right`. */