/* * faithful-ar.css — dedicated Arabic (RTL) type + layout system for the /ar/ faithful pages. * Linked AFTER faithful-en.css. This is NOT a thin RTL patch: Arabic has its own optical size, * weight, line-height and spacing needs, so the EN/CN-tuned type is re-specified here rather than * inherited. flips base direction; flexbox rows mirror automatically, so this * file handles what direction alone does not: Arabic type, chrome that must stay LTR, mirrored * directional icons, and a few spacing corrections. * * Scope note: Latin runs (brand/model names "Stelato S9", numerals, units kWh/km/mm) are left to * the browser's Unicode bidi algorithm, which renders them LTR in place — no needed. */ /* ============================================================================ 1. TYPE SYSTEM — Arabic gets its own families, weights and rhythm ---------------------------------------------------------------------------- Noto Kufi Arabic = geometric, premium, pairs with the intelligent-EV tone → display/headings. Tajawal = clean humanist Gulf sans, comfortable at text sizes → body/UI. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@500;600;700;800&family=Tajawal:wght@400;500;700&display=swap'); html[dir="rtl"] body { font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; /* Arabic never uses inter-letter spacing — the script is cursive; any tracking breaks joins. */ letter-spacing: normal; /* kashida/ligature-friendly rendering */ -webkit-font-feature-settings: "liga" 1, "calt" 1; font-feature-settings: "liga" 1, "calt" 1; } /* Display + headings: geometric Kufi, generous leading (Arabic ascenders/diacritics sit tall). */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .header-tag-title, html[dir="rtl"] [class*="title"], html[dir="rtl"] [class*="headline"] { font-family: 'Noto Kufi Arabic', 'Tajawal', sans-serif; font-weight: 700; letter-spacing: normal; line-height: 1.45; /* vs Latin ~1.1 — Arabic headings need the room */ word-spacing: 0.02em; } /* Hero title reads a touch large in Kufi at the CN/EN px; trim + settle the two-line rhythm. */ html[dir="rtl"] h1.header-tag-title { font-size: 0.9em; line-height: 1.5; } /* Body copy: comfortable Arabic measure — more line-height, slightly heavier base weight so the thinner Tajawal strokes hold up on the dark UI. */ html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] .txt, html[dir="rtl"] [class*="desc"], html[dir="rtl"] [class*="intro"], html[dir="rtl"] [class*="text"] { line-height: 1.9; font-weight: 400; } /* Footnote / legal small print: keep readable — small Arabic needs even more leading. */ html[dir="rtl"] .section-footnote, html[dir="rtl"] [class*="footnote"] { line-height: 2; font-size: 0.95em; } /* ============================================================================ 2. ALIGNMENT — let direction do it; DON'T force right (that broke centering) ---------------------------------------------------------------------------- Every text element in the scraped CSS uses `text-align: start` or `center` (verified — none use explicit `left`). Under : • `start` → resolves to RIGHT automatically (body copy, headings, footnotes) • `center` → STAYS CENTER (hero titles, centred CTAs) So a blanket `text-align: right` is both unnecessary AND wrong — it right-aligns content the design centres. We add NO text-align override; direction handles it. ⚠️ SCOPE CORRECTION (30-07-2026). The audit above was run against the BRAND HUB stylesheets and holds there — indexv31.css + button.css + swiper carry ~23 physical declarations between them. It does NOT hold for MODEL pages, which are a different order of problem: main-v3.css (stelato-s9) 263 physical declarations, incl. 43 text-align: left main-v24.css (stelato-s9t) 205 main-v1.css (maextro-s800-grand-design) 199 main.hima-v1.css (shangjie-h5) 195 main-v7.css (maextro-s800) 179 main.css (shangjie-z7) 144 That is why /ar/stelato works on this file alone while model pages need mirroring. Those are handled by rtlcss (scripts/build-rtl-css.mjs) rather than overrides here — see docs/arabic-rtl-scaffold.md §4. This file stays scoped to what a mirror tool cannot know: Arabic type, the chrome-LTR pin, and spacing corrections. A verified claim about a codebase expires the moment someone adds the case it ruled out. The `.hero-notes-en` rule further down introduced the first explicit physical alignment in this file, after the audit was written. ========================================================================== */ /* Spec-stat blocks: keep the number and its unit on one line (Arabic "مم/كم" were wrapping off the value). Numerals + Latin units render LTR inside the RTL block via bidi isolation. */ html[dir="rtl"] .category-s2-txt-wrap [class*="param"], html[dir="rtl"] .category-s2-txt-wrap [class*="data"], html[dir="rtl"] .category-s2-txt-wrap [class*="spec"] { unicode-bidi: isolate; } html[dir="rtl"] .category-s2-txt-wrap [class*="unit"] { white-space: nowrap; } /* ============================================================================ 3. CHROME IS NOW ARABIC + RTL (changed 05-09-2026, at the client's request). This block used to pin .site-hd/.site-ft to direction:ltr to hold the old "chrome stays English" decision — the very flip its own comment anticipated. It only loaded on FAITHFUL pages (home, hubs, model pages), never on the DE-authored ones, so the homepage nav mirrored the opposite way to /ar/showroom. The chrome now inherits dir=rtl like every other page; only the font is pinned, because marque names (Maextro, S800, V800) stay Latin in the nav. ========================================================================== */ html[dir="rtl"] .site-hd, html[dir="rtl"] .site-ft { font-family: 'Tajawal', 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif; } /* ============================================================================ 3b. MIRROR PHYSICAL SPACING — flexbox reverses ORDER, not the scraped CSS's physical margin-left/right & padding-left. Under dir=rtl those land on the wrong side (text collides with media / indents point the wrong way), so we swap each asymmetric one. Values kept as % where the source is % so they stay responsive. These section types repeat across every model + hub. ========================================================================== */ /* s2 gallery: the text column's gap from the media (was margin-left: 4%). */ html[dir="rtl"] .category-s2-txt-wrap { margin-left: 0; margin-right: 4%; } /* s1 experience tiles: inter-tile gap (margin-right → margin-left). */ html[dir="rtl"] .s1-con2, html[dir="rtl"] .s1-con3 { margin-right: 0; margin-left: 16px; } /* Footnote ordered list: the number indent (padding-left → padding-right). */ html[dir="rtl"] .section-footnote ol, html[dir="rtl"] .section-footnote ul { padding-left: 0; padding-right: 14px; } /* Gallery tab labels (.text-bullet): the active-underline is an absolute ::after pinned to left:0 — it must sit under the START of the RTL text, i.e. the right edge. */ html[dir="rtl"] .text-bullet::after { left: auto; right: 0; } /* ============================================================================ 4. DIRECTIONAL ICONS — mirror chevrons/arrows that point "forward" ========================================================================== */ html[dir="rtl"] .s1-arrow, html[dir="rtl"] [class*="arrow"], html[dir="rtl"] [class*="chevron"] { display: inline-block; transform: scaleX(-1); /* "›" forward-affordance now points into the RTL flow (left) */ } /* The chrome is RTL now, so its arrows SHOULD mirror with everything else — the exception that kept them unflipped existed only for the LTR chrome. */ /* ── RTL fixes for JS-positioned chrome ────────────────────────────────────── These are the class rtlcss structurally CANNOT fix: the position is written by the ported CN JavaScript at runtime, so no stylesheet transform can see it. */ /* Tab-nav underline. main.js sets `--indicator-offset` from `tabNavItems[i].offsetLeft` — a PHYSICAL left coordinate — and the bar is moved with translateX(). In LTR the ::after box starts at the track's left edge, so that works. Under dir=rtl a block box narrower than its container is placed at the RIGHT edge instead (CSS 2.1 §10.3.3 resolves the over-constrained equation against margin-left), so adding a left-measured offset pushes the bar further right — it lands under the wrong tab, or off the track. Restoring LTR on the indicator alone puts the box back at the left edge and makes the JS's physical offset correct again. Safe: the element is decorative (::before is the track, ::after is the bar); it holds no text, so no glyph order is affected. Affects 10 ported model pages, not just the Grand Design. */ html[dir='rtl'] .tabnav-indicator { direction: ltr !important; } /* Bevelled CTA labels. `.button-copy` is position:absolute + white-space:nowrap, centred over a FIXED-WIDTH SVG background — the shape cannot grow with the text. Arabic sets wider than the CN original ("شاهد الفيديو الكامل" vs 观看完整视频), so the label reaches and passes the bevel edge. Trim ~12% for RTL only; nowrap is kept so an over-long label fails visibly instead of silently wrapping out of the shape. */ html[dir='rtl'] .button-container .button-copy { font-size: 0.82vw !important; } @media (max-aspect-ratio: 11/10) { html[dir='rtl'] .button-container .button-copy { font-size: 3.2vw !important; } } /* Class-named headings. Several ported pages use `
` rather than a real heading element, so none of the selectors above reach them — they kept the CN `letter-spacing`, which BREAKS Arabic cursive joins, and the Kufi face never applied. */ html[dir='rtl'] [class~='h1'], html[dir='rtl'] [class~='h2'], html[dir='rtl'] [class~='h3'] { font-family: 'Noto Kufi Arabic', 'Tajawal', sans-serif; letter-spacing: normal !important; line-height: 1.45; } /* `width: max-content` headings clip in Arabic. The CN line fits the viewport; the Arabic rendering of the same line does not, and max-content refuses to wrap — so the text runs past the edge and is cut. Let it wrap within the viewport instead of overflowing it. */ /* ⚠️ Scoped to the DIV-headings only. An earlier version also matched [class*='headline'] and [class*='title'], which outranked the deliberate "white-space: nowrap; width: max-content" on the homepage's .progress-headline banner labels and broke "Maextro S800 Grand Design" onto four lines. Anything relying on nowrap must NOT be caught here. */ html[dir='rtl'] [class~='h1']:not(.tabnav-item):not(.tabnav-label), html[dir='rtl'] [class~='h2']:not(.tabnav-item):not(.tabnav-label), html[dir='rtl'] [class~='h3']:not(.tabnav-item):not(.tabnav-label) { max-width: min(92vw, 100%); width: auto; white-space: normal; overflow-wrap: break-word; } /* Stacked paragraph carousels (.stack-list). The CN technique overlaps siblings with `margin-left: -100%`, which rtlcss correctly mirrors — direction is NOT the bug. The bug is height: with negative margins the container is sized by the FIRST item alone, and Arabic wraps to more lines than the CN original, so a taller later slide spills out of the container and over the image above it. Grid stacking sizes the container to the TALLEST item and drops the margin trick entirely, so it holds for any translation length. */ html[dir='rtl'] .stack-list { display: grid !important; } html[dir='rtl'] .stack-list > .stack-item { grid-area: 1 / 1 !important; margin: 0 !important; width: 100%; } /* Tab strips (.tabnav-list). The CN labels are short; their Arabic runs 2-3x longer, so the row exceeds the viewport, main.js flips the container to `is-scroll`, and the first/last tabs sit cut off at the edges. The scroll position itself is computed from LTR geometry (`tabNavList.offsetLeft + itemLeft`) so it cannot be corrected in CSS — instead give the row a realistic chance of FITTING: trim the label size and the inter-tab gap for RTL only. Where it still overflows the strip stays scrollable, which is no worse than today. Labels keep nowrap so a tab never becomes two lines and desyncs the underline, which measures a single-row offsetLeft. */ html[dir='rtl'] .tabnav-item, html[dir='rtl'] .tabnav-label { font-size: 0.86em !important; white-space: nowrap; } html[dir='rtl'] .tabnav-line-x .tabnav-list { gap: 1.8vw !important; } /* Keep the ends clear of the viewport edge so a cut tab reads as scrollable, not broken. */ html[dir='rtl'] .tabnav-container.is-scroll { scroll-padding-inline: 4vw; } /* Video CTA proportions in Arabic. Scoped to the two MASKED sections by name on purpose: a bare .button-container .button-copy would also hit unmasked buttons on this page whose padding is 0, and padding them would break their layout. This button is NOT a fixed-size image — the bevel is a CSS mask (pv-mask-img.svg, mask-size:100%) that stretches to the content box, so padding alone reshapes it. The CN/EN label is short, and the Arabic runs longer, which pushed the shape toward a tall stubby block. Widen the horizontal padding and tighten the vertical so the hexagon keeps its intended flat, wide proportion. RTL-only: the English button already sits correctly at the source values. */ html[dir='rtl'] .section-pv .button-container .button-copy, html[dir='rtl'] .section-collections .button-container .button-copy { /* Proportions ADAPTED FROM the V800 .modal-open-button, measured rather than guessed: height = 3.5 x font-size, side space = 1.58 x font-size. Expressed in em so the shape tracks the font at every breakpoint instead of needing a separate vw value per viewport — which is what my earlier hand-tuned padding kept getting wrong. */ font-size: 0.833333vw !important; /* Block padding is 0.75em, NOT the 1.15em the text alone would need: this button also holds a play icon (1.667vw ≈ 2em) which is taller than the text line and therefore sets the content height. 2em icon + 2 x 0.75em = 3.5em total — the same height as the V800 CTA. */ /* Side padding matches the .picture-button-container CTA on /ar/maextro/s800 (2.41em), which is the simplest and most robust of these buttons — no mask, no fixed SVG, sized purely by padding so it cannot distort. Height stays 3.5em, set by the play icon. */ padding: 0.75em 2.4em !important; } @media (max-aspect-ratio: 11/10) { html[dir='rtl'] .section-pv .button-container .button-copy, html[dir='rtl'] .section-collections .button-container .button-copy { /* Only the font changes on mobile; the em padding rescales with it. */ font-size: 3.2vw !important; } } /* V800-style bevelled CTAs (.modal-open-button). The label is position:absolute with NO left/right offsets, so it renders at its STATIC position — which an LTR centred flex parent puts roughly in the middle, but which RTL resolves from the right edge. The box hugs its own content (nowrap), so a longer Arabic label grows leftward and escapes the fixed-width SVG bevel entirely. Pin it across the button and centre the text, matching the CN original where the label sits centred with clear space either side. */ html[dir='rtl'] .modal-open-button .button-copy { left: 0 !important; right: 0 !important; text-align: center !important; } /* ── Video CTA: collapse the 5-layer bevel to ONE shape (RTL only) ─────────────── The scraped button stacks five independently-sized layers: .button-copy (the masked fill), .icon-bg, .border (the outline picture), .border-light and the .left/.right hover sweeps. Each is sized in its own vw units, so ANY change to the fill's padding desyncs the outline — the fill became 41px tall while .border stayed 59px, which is the mismatched double-edge that kept showing up no matter how the padding was tuned. Arabic needs different metrics than the CN label it was drawn for, so rather than chase five layers into alignment, hide the decorative ones and keep the single masked hexagon. One layer cannot misalign with itself. The English page keeps the full five-layer treatment untouched. */ html[dir='rtl'] .section-pv .button-container .border, html[dir='rtl'] .section-pv .button-container .border-light, html[dir='rtl'] .section-pv .button-container .icon-bg, html[dir='rtl'] .section-collections .button-container .border, html[dir='rtl'] .section-collections .button-container .border-light, html[dir='rtl'] .section-collections .button-container .icon-bg { display: none !important; } /* Hover affordance for the collapsed RTL video CTA. Hiding .border / .border-light also removed the button's hover feedback, so give it back — but WITHOUT reintroducing a second element that can drift out of alignment. Because the fill is mask-clipped, a drop-shadow filter traces the MASK SILHOUETTE rather than the element's box, so it hugs the hexagon exactly at any size. Two stacked shadows: a tight one reads as a crisp outline, a wider soft one as the glow the original .border-light provided. Also lifts the fill slightly so the state change is legible without motion. */ html[dir='rtl'] .section-pv .button-container .button-copy, html[dir='rtl'] .section-collections .button-container .button-copy { transition: background-color 0.3s ease, filter 0.3s ease; } html[dir='rtl'] .section-pv .button-container:hover .button-copy, html[dir='rtl'] .section-collections .button-container:hover .button-copy { background-color: rgba(0, 0, 0, 0.55) !important; /* Four 1px-offset silhouettes build a genuine 1px OUTLINE around the mask shape (a single zero-offset drop-shadow only blurs, which read as a faint haze rather than an edge). The fifth, soft shadow supplies the glow the original .border-light gave. */ filter: drop-shadow(1px 0 0 rgba(255, 242, 227, 0.9)) drop-shadow(-1px 0 0 rgba(255, 242, 227, 0.9)) drop-shadow(0 1px 0 rgba(255, 242, 227, 0.9)) drop-shadow(0 -1px 0 rgba(255, 242, 227, 0.9)) drop-shadow(0 0 6px rgba(255, 242, 227, 0.35)); } @media (prefers-reduced-motion: reduce) { html[dir='rtl'] .section-pv .button-container .button-copy, html[dir='rtl'] .section-collections .button-container .button-copy { transition: none; } }