/* ════════════════════════════════════════════════════════════════════════ * i18n.css — non-English marketing-site stylesheet (i18n Phase 4). * * Loaded by base.html ONLY when LANGUAGE_CODE != 'en' (see the conditional * in pages/base.html), so English pays zero cost. Two jobs: * * 1. PER-SCRIPT FONTS — Nunito Sans (the brand face) covers Latin + * Cyrillic, so French / Portuguese / Russian render fine with no extra * font. Hindi (Devanagari) and Arabic need a Noto face; base.html loads * the matching Google Font, and the rules below point the body at it. * * 2. RTL BASELINE (Arabic only, scoped to [dir="rtl"]) — * is set in base.html via LANGUAGE_BIDI. Because the site chrome is * overwhelmingly flexbox + `gap`, the main + cross axes mirror * automatically under `direction: rtl`, and default `text-align: start` * already right-aligns text. So RTL work here is limited to (a) flipping * HARD-CODED physical properties (text-align:left, left/right offsets, * one-sided borders) and (b) mirroring directional icons. fr/pt/ru also * load this file but are LTR, so the [dir="rtl"] scope leaves them alone. * * NOTE: deep per-page RTL polish (About / Contact / Project galleries, etc.) * needs visual QA on the /ar/ URLs — this sheet establishes the chrome + * global baseline; page-level fine-tuning is a documented follow-up. * ════════════════════════════════════════════════════════════════════════ */ /* ─── 1 · Per-script fonts ────────────────────────────────────────────── * Higher specificity than base.css's `* { font-family: "Nunito Sans" }` * (which is specificity 0), and this file loads after base.css, so these win. * The brand face is kept as the final fallback for Latin glyphs mixed into * the copy (brand names, URLs, numerals). */ html[lang="hi"], html[lang="hi"] * { font-family: "Noto Sans Devanagari", "Nunito Sans", sans-serif; } html[lang="ar"], html[lang="ar"] * { font-family: "Noto Sans Arabic", "Nunito Sans", sans-serif; } /* ════════════════════════════════════════════════════════════════════════ * 2 · RTL BASELINE — Arabic (everything below is scoped to [dir="rtl"]). * ════════════════════════════════════════════════════════════════════════ */ /* Inline-direction default. `direction` is already set by the dir attribute; * this is belt-and-suspenders for any element that resets it. */ [dir="rtl"] body { direction: rtl; } /* Flip the handful of HARD-CODED `text-align: left` declarations in the * chrome so headings/links read from the right. (Centered text is * direction-agnostic and left as-is.) */ [dir="rtl"] .site-nav__item-link, [dir="rtl"] .site-footer__context-text, [dir="rtl"] .site-footer__section-heading, [dir="rtl"] .site-footer__section-link, [dir="rtl"] .lang-switcher__option { text-align: right; } /* ─── Navbar (RTL) ────────────────────────────────────────────────────── * The two-row navbar is flex + gap, so logo↔actions and the primary list * mirror automatically. Only the absolutely-positioned mobile close button * and the nested-row divider use physical sides — flip those. */ [dir="rtl"] .site-nav.site-nav--mobile .site-nav__exit { right: auto; left: 12px; } [dir="rtl"] .site-nav--mobile .site-nav__inside-list .site-nav__item > #site-nav__dropdown-down { border-left: 0; border-right: 1px solid var(--border-subtle); margin: -16px 12px -16px 0; padding: 16px 18px 16px 4px; } /* Mega-menu column rule sits on the right edge in LTR; move it to the left. */ [dir="rtl"] .dropdown { border-right: 0; border-left: 1px solid var(--border-default); } [dir="rtl"] .flex-item::before { left: auto; right: 0; } /* The "Back" affordance spacing in the mobile sub-menu. */ [dir="rtl"] .site-nav__item-svg[src*="chevron-left.svg"]::after { margin-left: 0; margin-right: 0.5em; } /* ─── Footer (RTL) ────────────────────────────────────────────────────── * Mostly flex; flip the one-sided spacings + the divider border. */ [dir="rtl"] .site-footer__contact { margin-left: 0; margin-right: 3%; } [dir="rtl"] .site-footer__contact-icon { margin-right: 0; margin-left: 1.6px; } /* ─── Directional icons (RTL) ─────────────────────────────────────────── * Chevrons / arrows / "next-prev" glyphs point the wrong way when the layout * mirrors. Flip horizontally. Logos, social icons and the globe are NOT * directional, so target only the known directional ones. */ [dir="rtl"] .site-nav__search-toggle-icon, /* magnifier handle */ [dir="rtl"] .breadcrumbs__separator, [dir="rtl"] .carousel-arrow, [dir="rtl"] .slider-arrow, [dir="rtl"] [class*="chevron"], [dir="rtl"] [class*="arrow"], [dir="rtl"] .lang-switcher__caret { transform: scaleX(-1); } /* The caret already animates rotate(180deg) when open — combine with the * mirror so it still flips cleanly in RTL. */ [dir="rtl"] .lang-switcher[open] .lang-switcher__caret { transform: scaleX(-1) rotate(180deg); } /* ─── Language switcher (RTL) ─────────────────────────────────────────── * The nav menu hangs from the right in LTR; in RTL anchor it to the left. * Footer menu likewise. */ [dir="rtl"] .lang-switcher--nav .lang-switcher__menu { right: auto; left: 0; } [dir="rtl"] .lang-switcher--footer .lang-switcher__menu { left: auto; right: 0; } [dir="rtl"] .lang-switcher__option { text-align: right; } /* ─── Lists & quotes (RTL) ────────────────────────────────────────────── * Bulleted/numbered list markers and blockquote bars sit on the start edge; * `direction: rtl` moves markers to the right automatically, but explicit * left padding on prose blocks needs mirroring. Scope to the article/CMS * body so we don't disturb flex utility lists. */ [dir="rtl"] .APTED-content ul, [dir="rtl"] .APTED-content ol, [dir="rtl"] .Article-content ul, [dir="rtl"] .Article-content ol { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] blockquote { border-left: 0; border-right: 4px solid var(--border-default); padding-left: 0; padding-right: 1em; }