/* ============================================================================ i18n-type.css - script-aware typography for Arabic and Hebrew. WHY THIS FILE EXISTS The product is a Latin design with Arabic poured into it. Measured before this file was written: 141 letter-spacing declarations across the app, 2 of them RTL-scoped; 44 text-transform:uppercase, none scoped; body line-height 1.5 for a script that needs ~1.8; and --dx-font-display was "Fraunces","Georgia",serif with no Arabic or Hebrew face at all, used by all eight heading rules. Arabic is cursive - positive tracking severs the joins inside a word, so Arabic text rendered as disconnected letterforms on every screen. That is the whole of the "very ugly in other languages" complaint. HOW IT WINS WITHOUT ADDING TO THE !important PILE index.php alone carries 1,154 !important; out-specifying that is not possible. But nearly everything writes `font-family: var(--x) !important`, and var() resolves against the INHERITED value - so redefining the *variable* under :root:lang(ar) (specificity 0,2,0 vs the base :root's 0,1,0) is picked up by every one of those !important declarations for free. None of the font custom properties are declared !important anywhere, which is what makes this work. THE ONE TRAP --font-display / --font-script / --font-body are owned by TWO documents: inc/layout.php for site chrome, and rsvp.php PER TEMPLATE from the designer's chosen face. Redefining those names here would clobber every invitation's design. So only --dx-* (dashboard) and --rd-* (landing) are redefined; the ambiguous names are handled with direct selectors, which are cheap because the base rules are bare-element weak, and in rsvp.php's own PHP. SCOPE Every rule below is gated on :lang(ar)/:lang(he) or [dir=rtl]. Nothing here can affect en/de/es. Load this LAST, after every stylesheet it needs to beat. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Font stacks, via custom properties (zero new !important) --------------------------------------------------------------------------- */ :root:lang(ar) { /* Amiri is a Naskh serif - it sits against Fraunces/Cormorant the way a serif should. IBM Plex Sans Arabic is the humanist sans companion to Figtree/Inter. Both are loaded explicitly; neither relies on a system fallback. */ --dx-font-display: 'Amiri', 'Noto Naskh Arabic', Georgia, serif; --dx-font-ui: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Figtree', sans-serif; --rd-font-display: 'Amiri', 'Noto Naskh Arabic', Georgia, serif; --rd-font-sans: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif; /* Tangerine has no Arabic coverage at all, so script text fell to the browser's generic cursive. Aref Ruqaa is the calligraphic equivalent. */ --rd-font-script: 'Aref Ruqaa', 'Amiri', serif; } :root:lang(he) { --dx-font-display: 'Frank Ruhl Libre', 'Noto Serif Hebrew', Georgia, serif; --dx-font-ui: 'Assistant', 'Noto Sans Hebrew', 'Figtree', sans-serif; --rd-font-display: 'Frank Ruhl Libre', 'Noto Serif Hebrew', Georgia, serif; --rd-font-sans: 'Assistant', 'Noto Sans Hebrew', sans-serif; --rd-font-script: 'Frank Ruhl Libre', serif; } /* public-theme.css sets `h1,h2,h3{font-family:Georgia,...!important}` at (0,0,1). Georgia has no Arabic or Hebrew glyphs, so headings on every auth and legal page fell to an unspecified system serif. (0,1,1) + !important takes it back. */ :is(html[lang="ar"], html[lang="he"]) :is(h1, h2, h3) { font-family: var(--dx-font-display, 'Amiri'), 'Noto Naskh Arabic', 'Noto Serif Hebrew', Georgia, serif !important; } /* The chrome/auth pages set font-family on a bare `body` (0,0,1), so a single class-free element selector (0,0,1 + :lang pseudo-class = 0,1,1) beats it without touching --font-sans, which rsvp.php owns per template. */ :lang(ar) body { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif; } :lang(he) body { font-family: 'Assistant', 'Noto Sans Hebrew', sans-serif; } /* --------------------------------------------------------------------------- 2. Tracking. THE ONLY BLANKET !important IN THIS FILE. Arabic letters join. Any letter-spacing - positive or negative - breaks the joins and produces text a native reader sees as broken. Hebrew does not join, but Latin tracking values are still wrong for it. This removes damage rather than adding it, which is why the blunt instrument is justified here. Opt out on a specific element with class="i18n-keep-tracking". --------------------------------------------------------------------------- */ :is(html[lang="ar"], html[lang="he"]) *:not(.i18n-keep-tracking) { letter-spacing: 0 !important; } /* word-spacing tuned for Latin is wrong here for the same reason. */ :is(html[lang="ar"], html[lang="he"]) *:not(.i18n-keep-tracking) { word-spacing: normal; } /* --------------------------------------------------------------------------- 3. Leading. Arabic ascenders, descenders and diacritics collide at Latin leading. Body was 1.5 (dash.css) / 1.65 (index.php); headings ran 1.0-1.12. --------------------------------------------------------------------------- */ :lang(ar) body, :lang(he) body { line-height: 1.8; } :is(html[lang="ar"], html[lang="he"]) :is( h1, h2, h3, h4, .rdHero__title, .rdStoriesTitle, .rdStoryRow__title, .rdCare__title, .rdHow__title, .rdPricing__title, .rdFaq__title, .rdFinal__title, .rdVoices__title, .rd-display, .rd-h2, .rd-h3, .dx-hero-name, .dx-pagehead h1, .dx-topbar-event .name, .dx-panel-head h2, .dx-modal h2 ) { line-height: 1.35 !important; } /* Numeric display (countdown, stat tiles) stays tight - digits are Latin. */ :is(html[lang="ar"], html[lang="he"]) :is(.dx-countdown .n, .dx-stat .v, .num) { line-height: 1.2 !important; } /* --------------------------------------------------------------------------- 4. Optical size. Arabic and Hebrew read smaller and lighter than Latin at the same nominal px, so a hierarchy tuned on Cormorant/Fraunces flattens out. --------------------------------------------------------------------------- */ :is(html[lang="ar"], html[lang="he"]) :is(h1, h2, .rdHero__title, .rd-display, .dx-hero-name, .dx-pagehead h1) { font-weight: 600; } /* The size bump is scoped to class hooks only. On bare h1/h2 the `em` replaced the element's own size with 1.08x its PARENT's, which collapsed /login.php?lang=ar's heading to body size (the old landing only survived it because its sizes were !important). */ :is(html[lang="ar"], html[lang="he"]) :is(.rdHero__title, .rd-display, .dx-hero-name, .dx-pagehead h1) { font-size: 1.08em; } /* uppercase is a no-op on Arabic and Hebrew glyphs, so an all-caps eyebrow keeps its damage and loses its emphasis. Give those elements the emphasis back via size and weight instead. */ :is(html[lang="ar"], html[lang="he"]) :is( .dx-eyebrow, .rd-eyebrow, .rdVoices__eyebrow, .rdStoryRow__eyebrow, .dx-table th, .table-wrap th, .step-meta, .lbl, .kicker ) { font-size: 0.95em; font-weight: 600; } /* --------------------------------------------------------------------------- 5. RTL leaks that logical properties never covered. --------------------------------------------------------------------------- */ /* assets/dash.css:398 - the magnifier is pinned to the physical left, while the input's extra padding goes on the inline start, so in Arabic the icon lands on top of the text. */ [dir="rtl"] .searchbox .mag { left: auto; right: .7rem; } /* assets/dash.css:621 / :646 - template badges pinned to the physical right. */ [dir="rtl"] .preset-grid.gallery .preset-card .pill, [dir="rtl"] .preset-card .pill { right: auto; left: 12px; } /* rsvp.php:4962 - the mobile program block is force-left-aligned with no RTL override, and mobile is where WhatsApp invitations are opened. */ @media (max-width: 767px) { [dir="rtl"] .sa-prog-item { text-align: right; } } /* Bullet lists written with a physical padding-left hang outside the box in RTL. */ [dir="rtl"] ul[style*="padding-left"] { padding-left: 0 !important; padding-right: 1.2rem; } /* --------------------------------------------------------------------------- 6. Bidi. Latin and numeric runs inside RTL text reorder their own punctuation unless isolated. dashboard.php:6688 already proves the fix for one case; this generalises it to the containers that actually hold mixed content. --------------------------------------------------------------------------- */ [dir="rtl"] :is(.gname, .gmeta, .mono, .num, .dx-chip, .rdSpec__line) { unicode-bidi: isolate; } /* Phone numbers and emails are inherently LTR whatever the page direction. */ [dir="rtl"] .phone, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; unicode-bidi: isolate; text-align: start; } /* --------------------------------------------------------------------------- 7. Directional icons. body.rtl .i-flip already exists in dash.css and is used zero times; cover the pager chevrons by shape instead. --------------------------------------------------------------------------- */ [dir="rtl"] .i-flip, [dir="rtl"] .dx-pager svg, [dir="rtl"] .pager svg { transform: scaleX(-1); } /* --------------------------------------------------------------------------- 8. Invitation hero faces for designs that name a Latin-only face. rsvp.php sets the couple's names on many designs in a named Latin face with !important (Cinzel, Fraunces, Caveat, Sacramento, Montserrat). None of those has Arabic or Hebrew glyphs, so ar/he names fell to whatever system font the guest's device had. Each of those rules now reads font-family: '', var(--sa-rtl-, ) !important; These variables exist only here, only for ar/he: on every other page the rule computes exactly the old stack. Per-character fallback hands each Arabic/Hebrew glyph to the face below. Latin glyphs (a Latin name, the ampersand) keep the design's face where it is loaded (Cinzel, Montserrat); Fraunces, Caveat and Sacramento are named but never loaded, so on ar/he pages the face below draws those too, instead of a system font. Both scripts are in both stacks - a Hebrew invitation can carry Arabic names. The faces are loaded by every invitation's font links: - serif/script: Amiri Bold / Frank Ruhl Libre - the owner's choice for the envelope names (2026-09-25). Aref Ruqaa, the only script-style Arabic face loaded, was rejected by the owner for the envelope and the ads. - deco: Reem Kufi, rsvp.php's own Arabic partner for Cinzel. - sans: Cairo / Heebo, the invitations' own Arabic/Hebrew body faces. --------------------------------------------------------------------------- */ :root:lang(ar) { --sa-rtl-serif: 'Amiri', 'Frank Ruhl Libre', serif; --sa-rtl-script: 'Amiri', 'Frank Ruhl Libre', serif; --sa-rtl-deco: 'Reem Kufi', 'Amiri', 'Frank Ruhl Libre', serif; --sa-rtl-sans: 'Cairo', 'Heebo', system-ui; } :root:lang(he) { --sa-rtl-serif: 'Frank Ruhl Libre', 'Amiri', serif; --sa-rtl-script: 'Frank Ruhl Libre', 'Amiri', serif; --sa-rtl-deco: 'Frank Ruhl Libre', 'Reem Kufi', 'Amiri', serif; --sa-rtl-sans: 'Heebo', 'Cairo', system-ui; }