/* Right-to-left adjustments. * * Loaded only on Arabic pages, after the page stylesheet, so these rules win * without needing !important. * * Most of the layout needs nothing: the site is built on flexbox and grid, * which mirror automatically once `dir="rtl"` is on . What does not * mirror is anything written with a physical direction - `margin-left`, * `text-align: left`, a transform that points an arrow - so only those are * corrected here. The rule for new CSS is to prefer logical properties * (`margin-inline-start`, `padding-inline`, `inset-inline`) and then this file * stays small. */ /* Arabic needs more line height than Latin at the same size: the script has * taller ascenders and more diacritics, and the default leading crowds them. */ :root[dir="rtl"], [dir="rtl"] { --cz-font-main: Inter, "Cairo", "Segoe UI", system-ui, sans-serif; --cz-font-display: Inter, "Cairo", "Segoe UI", system-ui, sans-serif; } :root[dir="rtl"] body, [dir="rtl"] body { line-height: 1.85; letter-spacing: 0; font-family: Inter, "Cairo", "Segoe UI", system-ui, sans-serif; } /* Letter-spacing is a Latin typographic device. Applied to Arabic it breaks the * joins between letters, which is a genuine legibility problem rather than a * stylistic one. */ [dir="rtl"] * { letter-spacing: normal !important; } /* Eyebrows and section labels use wide tracking in the English design. */ [dir="rtl"] .cz-eyebrow { letter-spacing: normal; } /* Anything explicitly left-aligned should follow the reading direction. */ [dir="rtl"] .cz-hero, [dir="rtl"] .cz-section, [dir="rtl"] .legal-block, [dir="rtl"] .booking-field, [dir="rtl"] .cz-card { text-align: right; } /* Numbers, codes, prices, times and Latin brand names stay left-to-right even * inside an Arabic sentence. Without this a phone number or a reference like * CHZ-1024 renders with its parts reordered. */ [dir="rtl"] .cz-ltr, [dir="rtl"] time, [dir="rtl"] code, [dir="rtl"] .cz-price, [dir="rtl"] .cz-reference, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="date"], [dir="rtl"] input[type="time"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: right; unicode-bidi: isolate; } /* Icons that indicate direction have to point the other way. A chevron meaning * "onwards" points left in Arabic. */ [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-angle-right, [dir="rtl"] .cz-arrow { transform: scaleX(-1); } /* Decorative icons that mean an object rather than a direction must not flip - * a mirrored car looks like a mistake. */ [dir="rtl"] .fa-car, [dir="rtl"] .fa-car-side, [dir="rtl"] .fa-plane, [dir="rtl"] .fa-van-shuttle, [dir="rtl"] .cz-brand-mark { transform: none; } /* Form controls and lists that carry a physical side in the base stylesheet. */ [dir="rtl"] .booking-consent { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] ul, [dir="rtl"] ol { padding-inline-start: 1.4rem; padding-inline-end: 0; } /* The language switch in the header should sit on the reading-start side. */ [dir="rtl"] .cz-lang-switch { margin-inline-start: 0; margin-inline-end: auto; } /* The select arrow is drawn with background-position, which is a physical * property and does not mirror. `padding-inline-end` correctly reserves space * on the left in RTL, but the arrow stayed on the right, sitting underneath the * Arabic label text. Move it to the reserved side. */ [dir="rtl"] .cz-select { background-position: 1.25rem 50%, 0.95rem 50%; } /* Display headings. * * `ch` is the width of the "0" glyph, so a max-width in `ch` measures a Latin * line. Arabic words are longer and the same value wraps a heading two or * three times more often - which is how the city hero ended up four enormous * lines deep where the English page took three. Arabic also carries more * weight at the same point size, so the top of the clamp comes down. */ [dir="rtl"] .city-hero-copy h1, [dir="rtl"] .service-hero-copy h1, [dir="rtl"] .home-hero-title { max-width: 18ch; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.15; } [dir="rtl"] .cz-section-head h2, [dir="rtl"] .cz-admin-hero h1, [dir="rtl"] .city-final-card h2, [dir="rtl"] .service-final-card h2, [dir="rtl"] .home-parallax-card h2, [dir="rtl"] .city-copy-panel h2, [dir="rtl"] .city-rating-card h2, [dir="rtl"] .city-restaurants-card h2, [dir="rtl"] .city-emergency-copy h2, [dir="rtl"] .city-gallery-head h2, [dir="rtl"] .home-city-directory-copy h2, [dir="rtl"] .service-quick-copy h2, [dir="rtl"] .city-routes-card h3 { max-width: 24ch; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.25; } /* A heading set in a display face with tight leading clips the tashkeel above * the line - the shadda on مرتّب was being cut off by the line box. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { padding-block-start: 0.12em; } /* --------------------------------------------------------------------------- Things that logical properties could not mirror on their own --------------------------------------------------------------------------- */ /* The quick-contact tooltip. * * It is positioned with inset-inline-end so it opens towards the page. That * works until an element sets its own direction: the phone tooltip carries * .cz-ltr so "+966 57 284 2746" reads correctly, and that also flips how its * own logical inset resolves - so the WhatsApp tip opened into the page and * the phone tip opened off the left edge of the screen. Positioning both from * the page's direction rather than the element's removes the ambiguity. */ .cz-floating-contact-tip { inset-inline-end: auto; right: calc(100% + 0.6rem); left: auto; } [dir="rtl"] .cz-floating-contact-tip { right: auto; left: calc(100% + 0.6rem); } /* Select chevrons. * * The caret is two gradients rather than an image, and background-position * percentages are physical however the page reads - so the space for the * caret was reserved on the correct side while the caret itself stayed on * the far one, jammed against the label. Mirroring the pair means swapping * their offsets, because the two halves have to stay in the right order. */ [dir="rtl"] .cz-select, [dir="rtl"] select.cz-input, [dir="rtl"] .booking-page select.cz-input { padding-inline-end: 2.75rem; padding-inline-start: 1rem; background-position: 0.95rem 50%, 1.25rem 50%, 0 0; } [dir="rtl"] .booking-page select.cz-input { padding-inline-end: 3.4rem; }