/* ============================================================================ rtl.css — Arabic (RTL) layer for the JES website ---------------------------------------------------------------------------- Loaded AFTER page.css + i18n.css, ONLY meaningful on Arabic pages. Two scopes: html[lang="ar"] → Arabic TYPE system (fonts, no italics, no tracking, size/line-height bump, color-only heading accent). html[dir="rtl"] → DIRECTIONAL chrome that the logical-property migration could not express (forward arrows, the nav drawer side, select dropdown arrow, marquee direction, asymmetric radius/shadow). Block layout, text-align and box-model flips happen automatically from dir="rtl" + the logical properties in the shared sheets — this file only handles the genuinely directional leftovers. Everything here is scoped so EN/DE/NL pages are completely unaffected. Font metrics + size bump are CONSERVATIVE — tuned for real from renders in the Phase 2 pilot. See docs/i18n/localization-standard-ar.md §6. ============================================================================ */ /* ── 1. Arabic font tokens ───────────────────────────────────────────────── Override the family tokens so Arabic text renders in IBM Plex Sans Arabic (with Noto Sans Arabic as a shipped fallback), while KEEPING the Latin stack at the tail so preserved tokens (BIM, Revit, ISO 19650, client names) still render in Plus Jakarta Sans seamlessly inside Arabic runs. --serif has no Arabic glyphs (DM Serif Display is Latin-only) so it also maps to the Arabic sans — the heading accent becomes color-only (§4). --mono stays Commit Mono: Latin-token labels (ISO 19650, LOD) keep it. */ html[lang="ar"] { --sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", 'Plus Jakarta Sans', -apple-system, sans-serif; --serif: "IBM Plex Sans Arabic", "Noto Sans Arabic", 'Plus Jakarta Sans', -apple-system, sans-serif; /* --mono intentionally unchanged (Latin Commit Mono). */ /* Kill ALL letter-spacing by neutralising the tracking tokens — tracking severs Arabic connected script. Heading tokens (negative) and eyebrow tokens (positive) all go to 0. Hardcoded em-tracking is caught in §2. */ --ls-display: 0; --ls-h2: 0; --ls-h3: 0; --ls-h4: 0; --ls-eyebrow: 0; --ls-eyebrow-sm: 0; --ls-mono-xs: 0; /* Conservative size / line-height bump: Arabic reads smaller and tighter at the same px, and diacritics/ascenders need air. +~5% body, +0.15 line. Applied via the body-size tokens so the whole scale lifts proportionally. Tuned for real in the pilot. */ --fs-body: 15.75px; --lh-body: 1.7; /* 15 → 15.75, 1.55 → 1.70 */ --fs-body-lg: 17.85px; --lh-body-lg: 1.7; /* 17 → 17.85 */ --fs-body-sm: 13.65px; --lh-body-sm: 1.65; /* 13 → 13.65 */ --lh-h2: 1.2; /* headings need more leading in Arabic than the tight Latin 1.04 */ --lh-h3: 1.25; --lh-h4: 1.35; } /* Base body size lift (the html/body rule in page.css sets 16px explicitly). */ html[lang="ar"] body { font-size: 16.8px; /* 16 → 16.8 ≈ +5% */ line-height: 1.7; } /* ── 2. Script hygiene: no tracking, no italics, no hyphenation ───────────── Universal zero-tracking catches hardcoded letter-spacing (.16em, .18em, .2em on marquee/eyebrow labels) that tokens don't cover. Safe on the short Latin acronyms that appear inside Arabic prose. */ html[lang="ar"] * { letter-spacing: 0 !important; } /* No italics anywhere in Arabic — DM Serif italic and any font-style: italic would fake-slant Arabic glyphs. Neutralise globally, then restore accent colour on the heading below. */ html[lang="ar"] em, html[lang="ar"] i, html[lang="ar"] .lead-title, html[lang="ar"] cite { /* !important is deliberate: per-page accent rules like `.v6-top .card h3 em` out-specify this neutralizer and re-slant Arabic glyphs (6 leaks caught on the pilot pages, 2026-07-02). No italics in Arabic is a hard locale rule. */ font-style: normal !important; font-family: inherit !important; /* pull off --serif (Latin) onto the Arabic sans */ } /* Arabic does not hyphenate. i18n.css enables hyphens for de/nl; make sure ar never inherits it, and keep long strings from being broken mid-word. */ html[lang="ar"] { -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; word-break: normal; } /* text-transform: uppercase is meaningless for Arabic (harmless, but the mono eyebrows carried semantic weight via caps in EN). Re-express with weight so Arabic labels read as labels, not shouty tofu. Only affects Arabic-text labels; Latin-token labels keep their own rendering. */ html[lang="ar"] .sec-tag, html[lang="ar"] .eye, html[lang="ar"] .lm-eyebrow, html[lang="ar"] .pp-eyebrow { text-transform: none; font-weight: 600; } /* ── 3. Heading accent — color only (decision 1.4) ───────────────────────── The one per heading keeps its garnet colour but drops slant + serif. Mirrors the EN accent rule in page.css (.sect-head h2 em / h3.t em), which used font-family:var(--serif) + font-style:italic + color:var(--red). */ html[lang="ar"] .sect-head h2 em, html[lang="ar"] .sect-head h3.t em, html[lang="ar"] h1 em, html[lang="ar"] h2 em, html[lang="ar"] h3 em, html[lang="ar"] h4 em, html[lang="ar"] h5 em, html[lang="ar"] h6 em { font-family: inherit; font-style: normal; font-weight: inherit !important; /* uniform weight — the accent is COLOR ONLY: bold heading → bold red, regular heading → regular red. !important because per-section accent rules (.sol-aca .aca-h2 em, .pd-v4 .pd-title em, …) out-specify this rule and left thin-red-on-bold- black mismatches (Aaish, pilot rounds 1+3, 2026-07-02). EN gets contrast from the serif-italic FAMILY at its own weight; Arabic must not. */ color: var(--red); /* garnet #870000 — same token as EN */ } /* On-ink headings whose EM was white in EN keep white (e.g. .mfc-a h4 em). */ html[lang="ar"] .mfc-a .body h4 em { color: #fff; font-style: normal; } /* ── 3b. Bidi islands are ATOMIC ───────────────────────────────────────────── A holding "LOD 200" or "(BEP)" must never line-break inside itself or detach from its parentheses — mid-island wraps produced split/ mirrored fragments like «( LOD / 200» in narrow columns (Aaish, 2026-07-02). Copy-side rule: parentheses go INSIDE the span (standard §6.3). */ html[lang="ar"] span[dir="ltr"], html[lang="ar"] bdi { unicode-bidi: isolate; /* nowrap keeps the island unsplittable ("(LOD / 200)"). Do NOT add display:inline-block here: box-ifying the island disables the browser's no-break-before-punctuation rule, orphaning sentence periods onto the next line after an island (caught on /ar/solutions/consultants, 2026-07-02). Narrow-column clipping is handled at the source instead: grid/flex list items use U+2066/U+2069 character isolates, not spans (standard §6.3-3b). */ white-space: nowrap; } /* Arabic runs ~20-25% shorter than EN, so hero/section headings written for EN line lengths rag badly (a lone «من» on its own line on the consultants hero). Balance multi-line headings. */ html[lang="ar"] h1, html[lang="ar"] h2 { text-wrap: balance; } /* ============================================================================ DIRECTIONAL CHROME — html[dir="rtl"] Each block below resolves one entry from the rtl_logical_props.py "directional leftovers" report or a known forward-meaning glyph. ============================================================================ */ /* ── 4. Forward-meaning arrows / chevrons → mirror ───────────────────────── These SVGs/glyphs point in the reading direction ("next", "see all", "go"). In RTL "forward" is leftward, so flip them horizontally. Logos, diagrams and the plus/minus accordion toggle are NOT flipped (handled/omitted below). */ html[dir="rtl"] .cta-ar, /* CTA + "see all" horizontal arrow (header, cards, footer) */ html[dir="rtl"] .card-arrow, /* hub-tile / card corner arrow */ html[dir="rtl"] .cta .chev, /* chevron inside CTAs */ html[dir="rtl"] .hub-see .chev, html[dir="rtl"] .lm-cta .cta-ar, html[dir="rtl"] .arr > svg, /* classless arrow svg inside .arr tile/card links (hub tiles, service cards, resources cards — 2026-07-03 bulk review; flips the ICON only, never the .arr container, see note below) */ html[dir="rtl"] .btn > svg, /* classless arrow svg inside .btn spans (lead-magnets pack tiles, 2026-07-03) */ html[dir="rtl"] .dgm-arrow svg { /* IM hub-and-spoke flow arrows (2026-07-02 bulk review) */ transform: scaleX(-1); } /* Do NOT add container selectors like `.arr` here: .arr wraps TEXT + svg, and scaleX(-1) on it mirror-flips the Arabic label AND double-flips the .cta-ar svg back to LTR direction (caught by Aaish on the /ar/ pilot, 2026-07-02). Flip only the icon element itself. */ /* The nav dropdown chevron (▾) and accordion chevrons point DOWN, not forward — do NOT flip those. The forward nav-chev is only the top-level down caret, left alone. Breadcrumb separators (if any "/") are direction-neutral glyphs. */ /* ── 5. Mobile nav drawer — slide from the LEFT (the "end" side) in RTL ───── page.css pins the drawer at right:0 and slides it with translateX(100%). The codemod left right:0 physical (the block's translateX read as a transform, so its offsets were preserved), so mirror it explicitly: anchor to the left edge, slide in from the left, and flip the drop shadow to fall rightward. The inner separator border is already `border-inline-start` (right edge in RTL) from the migration, so it is NOT re-specified here. */ @media (max-width: 1200px) { html[dir="rtl"] .nav-a .links { right: auto; left: 0; transform: translateX(-100%); box-shadow: 18px 0 44px -26px rgba(0,0,0,0.30); /* shadow now falls to the right */ } html[dir="rtl"] .nav-a.nav-open .links { transform: translateX(0); } } /* ── 6. Select dropdown arrow → move to the LEFT in RTL ───────────────────── .cs-form select (case-study.css) and any select using the same pattern paint the custom chevron at `right 13px`. In RTL the arrow belongs on the left and the text padding flips (the padding already flipped via padding-inline-end in the migration, so only the background-position needs mirroring). */ html[dir="rtl"] .cs-form select, html[dir="rtl"] select { background-position: left 13px center; } /* ── 7. Logo marquee — RTL scroll direction ───────────────────────────────── .ps-marquee .track animates `marquee-rtl` (translateX 0 → -50%), scrolling content leftward. In RTL the natural travel is rightward — but do NOT use `animation-direction: reverse`: reversed frame-0 = translateX(-50%), and with RTL flex anchoring (track right-edge pinned to the wrap) that places the whole track off-canvas, so the strip renders EMPTY and takes most of the 60s loop to fill (caught on /ar/ pilot render, 2026-07-02). Instead run a mirrored keyframe 0 → +50%: frame-0 fully populated, travels rightward, loops seamlessly on the duplicated track exactly like the LTR original. */ html[dir="rtl"] .ps-marquee .track { animation-name: marquee-rtl-flip; } @keyframes marquee-rtl-flip { from { transform: translateX(0); } to { transform: translateX(50%); } } /* ── 7b. Home hero image — mirror for RTL ─────────────────────────────────── The hero render is composed with the building on the RIGHT and breathing room on the LEFT for the EN headline. In RTL the copy moves right and lands on top of the building linework. Mirror the image so its white space swaps sides and the Arabic headline sits in clear air (Aaish, 2026-07-02). Applies to the desktop and the mobile bg-div variant. */ html[dir="rtl"] .hero-bg img, html[dir="rtl"] .hero-img-m { transform: scaleX(-1); } /* ── 8. Asymmetric border-radius (privacy/terms callout) ─────────────────── `border-radius: 0 6px 6px 0` (a left-flat, right-rounded tab) has no logical shorthand. In RTL the flat edge should be on the right. */ html[dir="rtl"] .legal-callout, html[dir="rtl"] [style*="border-radius: 0 6px 6px 0"] { border-radius: 6px 0 0 6px; } /* ── 9. Directional inset box-shadows (iso-guide left accent bar) ─────────── `box-shadow: inset 3px 0 0 var(--red)` draws a red bar on the LEFT edge. In RTL it should sit on the right (the "start" edge). */ html[dir="rtl"] .iso-clause, html[dir="rtl"] [class*="clause"] { /* only applies where the EN rule used inset 3px 0 0; scoped narrowly to the iso-guide clause blocks. If a clause uses a different shadow this is a no-op because the property is only set where the EN sheet set it. */ } /* Note: the specific iso-guide inset-bar selectors are re-declared in the AR pilot once the iso-guide is transcreated (v1.1). Left as a marker so the leftover is tracked, not silently dropped. */ /* ── 10. Directional translateX animations (hero card-rise) ──────────────── The pinned-hero card-rise and any translateX intro animations are motion, not layout. They read fine mirrored in RTL because they animate on the Y/opacity axis primarily; the horizontal component (if any) is decorative and screen- physical, so it is intentionally NOT sign-flipped here. Revisit in the pilot if a specific hero animation looks wrong in RTL — none observed as directional in the current set. */ /* ── 11. Content-figure SVGs stay LTR canvases (2026-07-03 bulk review) ───── Journal
diagrams and iso-guide .isog-fig figures are drawn on an LTR coordinate canvas with English labels (EN-by-design this phase). Under dir=rtl the inherited direction makes start-anchored runs draw right-to-left off the viewBox (labels clipped to their tails: "FIT", "ONE", "?whose number is right") and reorders mixed runs ("WKS BEFORE PC 3"). Restore the canvas direction; geometry is untouched. */ html[dir="rtl"] figure svg, html[dir="rtl"] .isog-fig svg { direction: ltr; } /* ── 12. iso-pack nested file lists — physical padding-left leftover ──────── lead-magnets/iso-19650-pack inline style: `ul.files li { padding:4px 0 4px 15px }` (physical) while its tick is `inset-inline-start:0` (logical). In RTL the tick lands on the right but the clearance stays left → tick overlaps the first Arabic letter of every file item (2026-07-03 review, both widths). Inline page