/* ───────────────────────────────────────────────────────────────────────── Arabic overrides, loaded only by /ar/ on top of styles.css. Most of the layout mirrors on its own: flex and grid follow the document's direction, so dir="rtl" on does the bulk of the work. What is listed here is the set of places that hardcode a physical side and therefore do not mirror by themselves. Kept as a separate file rather than [dir="rtl"] rules inside styles.css so the English and French pages never download a single byte of it. ───────────────────────────────────────────────────────────────────────── */ /* Arabic needs a face with real Arabic coverage. Nunito and DM Sans have none, so text would fall back to the system default and lose the brand entirely. Tajawal is what the app itself uses for Arabic, so the two now match. */ body, .nav__brand, h1, h2, h3, .btn, .feat__title, .hero__note, .section-sub { font-family: "Tajawal", "Nunito", system-ui, -apple-system, sans-serif; } /* Arabic text sits taller in its line box; a little extra leading stops the diacritics and descenders from touching the row above. */ body { line-height: 1.75; } h1, h2, h3 { line-height: 1.45; } /* The hero headline is a left-anchored composition in English. Mirrored, its accent pill and line breaks need to hang off the right edge instead. */ .hero__copy { text-align: right; } /* Decorative, absolutely positioned pieces are placed with physical left/right values, so they have to be swapped by hand. */ .float-chip--done { left: auto; right: -8%; } .float-chip--new { right: auto; left: -7%; } /* The device is rotated for style; mirroring the rotation keeps it leaning into the page rather than away from it. */ .phone { transform: rotate(2deg); } /* Side buttons live on physical edges of a physical object. A real iPhone does not move its buttons in Arabic, so pin them back where they were. */ .phone__btn--action, .phone__btn--volup, .phone__btn--voldown { left: -4px; right: auto; } .phone__btn--power { right: -4px; left: auto; } /* The screenshots are of the app's own Arabic build, which is already RTL. Nothing here should flip them a second time. */ .showcase__shot, .phone__shot { transform: none; } /* Feature rows read icon-then-text in both directions; flex handles the order, but the text block keeps its own alignment. */ .feat { text-align: right; } /* The step connector is a symmetric row of dots, so it needs no flipping. Checked rather than assumed: the markup is
. */ /* The narrow-screen chip positions in styles.css are physical too. */ @media (max-width: 920px) { .float-chip--done { left: auto; right: 4%; } .float-chip--new { right: auto; left: 2%; } }