/* tradeinplus — styling for the Arabic ⇄ English switch. See js/i18n.js. * * Loaded render-blocking on every page, which is what makes the cloak below * work: it has to be in effect before the first paint, not after a deferred * script gets around to it. */ /* ── Cloak ──────────────────────────────────────────────────────────────────── * Set by the inline snippet when the stored language is English, and * removed by js/i18n.js once the page has been translated. Without it an * English visitor sees a frame of right-to-left Arabic on every navigation. * * `visibility` rather than `display` so layout is still computed and the paint * that follows is instant. The snippet also clears the class on a timer, so a * script that never runs cannot leave the page permanently blank. */ html.i18n-cloak body { visibility: hidden; } /* ── English typography ─────────────────────────────────────────────────────── * The pages set `font-family: var(--font-ar)` in a few hundred places. Rather * than override each one, remap the variable itself for the English document — * every existing usage then resolves to the Latin face with no further rules. */ html[lang="en"] { --font-ar: var(--font-en, "Inter", -apple-system, BlinkMacSystemFont, sans-serif); } html[lang="en"] body { font-family: var(--font-en, "Inter", -apple-system, BlinkMacSystemFont, sans-serif); } /* ── The button ─────────────────────────────────────────────────────────────── * It carries `class="theme-toggle lang-toggle"` on purpose. Every page styles * `.theme-toggle` itself — a dark circle in the dark headers, a light one on * faq/terms — so borrowing that class is what makes the language button match * its neighbour on all 97 pages without a per-page rule here. Only the label * needs styling, since the theme button holds an icon and this one holds text. * * js/theme-toggle.js explicitly skips `.lang-toggle`, so sharing the class does * not also make this button flip the theme. */ .lang-toggle { font-family: var(--font-en, "Inter", -apple-system, sans-serif); font-size:13px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; padding: 0; text-align: center; -webkit-user-select: none; user-select: none; } /* The Arabic label is a single letter and needs the Arabic face at a larger * optical size to sit level with the icon buttons beside it. */ .lang-toggle[lang="ar"] { font-family: var(--font-ar, "IBM Plex Sans Arabic", sans-serif); font-size: 15px; font-weight: 700; } /* ── Direction-dependent corrections ────────────────────────────────────────── * The site's CSS was written right-to-left, so a number of rules use physical * sides where they meant "start" / "end". The mechanical cases (text-align, * margin/padding/border sides) are converted to logical properties at source by * scripts/i18n-logical-props.mjs, which is a no-op in Arabic and flips itself * in English. What is left here is the absolutely-positioned handful, where * the intent has to be judged element by element rather than rewritten. */ /* Skip link: anchored to the reading-start corner. */ [dir="ltr"] .skip-link { right: auto; left: 1rem; } /* Step connectors point along the reading direction. */ [dir="ltr"] .tstep:not(:last-child)::after { content: "→"; left: auto; right: 0; } /* Dialog close buttons sit in the corner the content flows away from. */ [dir="ltr"] .portal-close { left: auto; right: 1.1rem; } [dir="ltr"] #ig-close { left: auto; right: 14px; } [dir="ltr"] #nl-close { right: auto; left: 16px; } /* Photo overlay controls: remove on the far corner, condition tag on the near * one, so the two never collide whichever way the page runs. */ [dir="ltr"] .photo-remove { left: auto; right: 5px; } [dir="ltr"] .photo-tag { right: auto; left: 5px; } /* ─── Latin runs inside the RTL page ─────────────────────────────────────── * lang= carries no direction information — only dir= does. Without it the * bidi algorithm gives these runs the page's RTL base direction, and every * neutral character sitting at an edge (digit, %, +, ", ×, ·, parenthesis) * jumps to the other side: "10-core GPU" painted as "core GPU-10", "5.1 mm" * as "mm 5.1", and the used-phone grade "A+" as "+A" — 105 nodes across 34 * pages, all customer-facing. * * `unicode-bidi: plaintext` is the fix rather than `direction: ltr`: it * derives each run's base direction from its first strong character, so the * Latin lays out LTR, while the element keeps direction:rtl — which is what * `text-align: start` resolves against. 110 of these blocks rely on `start` * to sit against the right edge; forcing direction:ltr would drag them all * to the left. */ [lang="en"], [lang="en-US"], [lang="en-GB"] { unicode-bidi: plaintext; } /* plaintext also re-resolves `text-align: start` against the run's own derived * (LTR) direction, so a block-displayed English run stops hugging the page's * right edge and drifts left, away from the Arabic label beside it. Re-state * the page edge — at ZERO specificity via :where(), so any alignment the design * actually declares (centred hero labels, deliberately left-aligned data) still * wins and only the untouched `start` default is affected. * * KNOWN GAP — :where() only buys that against rules matching THIS element. An * alignment INHERITED from an ancestor carries no specificity at all, so it * loses to the declaration below. A centred Latin label therefore still gets * dragged to the edge: `.pstory-opener{text-align:center}` in * css/product-story.css parked the "iPad Air" kicker on the right instead of * over its headline, so that stylesheet now states the alignment on the * elements themselves, which is what this rule's contract expects. * * `text-align: -webkit-match-parent` (Blink/WebKit; Gecko wants it unprefixed — * Chrome 151 still reports CSS.supports('text-align','match-parent') === false) * is the real remedy: it inherits the parent's alignment but resolves an * inherited `start` against the PARENT's direction. Measured here and it does * fix the kicker with the spec rows unchanged — but it also moves ~90 more * nodes on the home page alone, across all 97 pages, so it wants its own * verification pass rather than riding along with an unrelated fix. */ :where([dir="rtl"] [lang="en"]) { text-align: right; }