/* * Arabic overlay for /rent-villas/ar/ — loaded ONLY by the ar pages. * * dir="rtl" on already mirrors the flow, the flex rows and the logical * alignment (the page uses `text-align: start`, so columns flip correctly on * their own). This file fixes only what direction cannot: * * 1. Type. Montserrat has no Arabic coverage at all. * 2. Optical size. Arabic needs more height than Latin to stay legible, and * this layout sizes its smallest text in vw — at 1280px the catalogue * button label computed to 8.96px and the phone link to 9.33px, which is * below the practical floor for Arabic: the dots and diacritics that * distinguish ب ت ث ن merge together. * 3. Weight. The hero h1 is Montserrat 300 — elegant in Latin, spindly in * Arabic, where the same weight reads as washed out against the photo. * 4. The handful of physical (left/right) offsets Webflow hard-codes. * * The size overrides deliberately mirror the source's own unit system — vw * above 767px, rem below — so Arabic keeps scaling with the rest of the page * instead of freezing at a fixed px while everything around it moves. */ /* 1 ------------------------------------------------------------------ type */ /* Tajawal is a geometric Arabic face drawn to sit with geometric Latin sans, which is what Montserrat is — Noto Sans Arabic is a neutral text face and read flat next to the rest of the brand. Noto stays as the fallback. Webflow sets font-family on ~200 selectors at varying specificity, so a scoped wildcard is the only rule that reliably wins. Icon fonts are excluded: they carry glyphs, not text. */ [dir="rtl"] body, [dir="rtl"] body *:not([class*="w-icon"]):not(.w-icon-dropdown-toggle) { font-family: "Tajawal", "Noto Sans Arabic", "Montserrat", -apple-system, system-ui, sans-serif !important; } /* 2 ---------------------------------------------------------- optical size */ @media (min-width: 768px) { [dir="rtl"] .button-text { font-size: .88vw; } /* was .7vw → 8.96px */ [dir="rtl"] .header-phone-link-text { font-size: .92vw; } /* was ~.73vw → 9.33px */ [dir="rtl"] .nav-item-text { font-size: 1vw; } /* was ~.83vw → 10.66px */ [dir="rtl"] .contacts-online-text { font-size: 1vw; } /* was ~.83vw → 10.66px */ [dir="rtl"] .disclaimer { font-size: 1vw; } /* was .8vw → 10.24px */ [dir="rtl"] .num-text.big { font-size: 1.18vw; } /* was 1vw → 12.8px */ } @media (max-width: 767px) { [dir="rtl"] .button-text { font-size: 1.35rem; } [dir="rtl"] .disclaimer, [dir="rtl"] .disclaimer.mob { font-size: .85rem; } [dir="rtl"] .num-text, [dir="rtl"] .num-text.big { font-size: 1.05rem; } } /* em-based, so it scales with its button either way. */ [dir="rtl"] .button-arrow-text { font-size: 1.45em; } /* Arabic sits taller in the line box than Latin at the same size. Montserrat's display leading (1.05–1.3 on headings) clips ascenders and crowds the element below, so give every text run room. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .quiz-heading, [dir="rtl"] .call-form-heading, [dir="rtl"] .contacts-heading, [dir="rtl"] .politics-heading, [dir="rtl"] .quiz-question, [dir="rtl"] .steps-heading { line-height: 1.45 !important; } [dir="rtl"] p, [dir="rtl"] .p, [dir="rtl"] .p32, [dir="rtl"] .quiz-text, [dir="rtl"] .call-form-text, [dir="rtl"] .contacts-item-text, [dir="rtl"] .footer-text, [dir="rtl"] .policy, [dir="rtl"] .policy-label, [dir="rtl"] .form-group-label, [dir="rtl"] .radio-label, [dir="rtl"] .quiz-list-item-text, [dir="rtl"] .button-arrow-text, [dir="rtl"] .hero-list-item, [dir="rtl"] .contact-item-heading { line-height: 1.7 !important; } /* 2b ------------------------------------------------------------- tracking */ /* Letter-spacing is the single most damaging thing you can do to Arabic. Latin is a row of separate glyphs that tolerates tracking; Arabic is cursive — the letters JOIN, and putting space between them severs those joins, so a word renders as a line of disconnected stumps rather than a word. The theme sets `letter-spacing: .02em` on `.body`, which EVERY element inherits, plus .7px on phone and footer links and .1em–.75em on the numbered/slide elements. All of it has to be neutralised here — this is what made the Arabic page look broken rather than merely foreign. `word-spacing` goes with it: the theme's spacing was tuned against Montserrat's Latin metrics, and Arabic word gaps are already wider. */ [dir="rtl"] body, [dir="rtl"] body * { letter-spacing: normal !important; word-spacing: normal !important; } /* uppercase is a no-op on Arabic (the script is unicameral), but in the source it travels together with heavy tracking on the hero CTA and the section headings. Cleared so nothing re-introduces spacing behind the rule above. */ [dir="rtl"] .button-arrow-text, [dir="rtl"] .section-heading.medium { text-transform: none !important; } /* Arabic has no italic tradition; a synthesised oblique is a rendering artefact, not an emphasis. Weight carries emphasis instead. */ [dir="rtl"] em, [dir="rtl"] i, [dir="rtl"] dfn { font-style: normal; font-weight: 600; } /* 3 ---------------------------------------------------------------- weight */ /* A 300 heading disappears in Arabic. 500 matches the colour Montserrat 300 has in Latin; stays relatively bolder, so the emphasis survives. */ [dir="rtl"] h1, [dir="rtl"] .h1, [dir="rtl"] h2, [dir="rtl"] .h2 { font-weight: 500; } [dir="rtl"] .p32 { font-weight: 400; } /* 4 ------------------------------------------- physical offsets Webflow pins */ /* The floating WhatsApp CTA and the back-to-top control are pinned with a physical `right`, which stays on the right in an RTL page and lands on top of the (now right-hand) content column. */ [dir="rtl"] .zen-wa-fab { right: auto; left: 16px; } [dir="rtl"] .to-top { right: auto; left: 20px; } @media (max-width: 767px) { [dir="rtl"] .zen-wa-fab { right: auto; left: 12px; } } /* The quiz card's photo of the team is a background-image painted on .quiz-inner at a physical offset (-25.6px), so it cannot mirror with the layout. When the columns flipped, the form landed on top of the photo and the right half of the card went empty. Pin the card's column order to the artwork it is built around — the text inside each column still reads right-to-left, which is the part that matters. */ [dir="rtl"] .quiz-inner { flex-direction: row-reverse; } /* The cookie banner is a flex row justified to flex-end; in RTL that resolves to the left corner, where the FAB already sits. flex-start puts it back bottom-right. */ [dir="rtl"] #zen-consent { justify-content: flex-start; } /* Arrow glyphs are directional images: point them the way the reader travels. .quiz-arrow is the quiz's Next control and .quiz-arrow.prev its Back — left unflipped they told an Arabic reader to go backwards to continue. .to-top is vertical and deliberately not in this list. */ /* `scale`, not `transform: scaleX(-1)`: Webflow's IX2 writes an inline `transform` on these during their entrance animation, which silently won over a transform-based flip on whichever arrows had animated by then. The independent `scale` property composes with that inline transform instead of fighting it. */ [dir="rtl"] .form-arrow, [dir="rtl"] .quiz-arrow { scale: -1 1; } /* Latin runs inside Arabic sentences (phone, e-mail, ฿ amounts) must keep their own direction, or bidi reorders the digits and drops the currency symbol and the full stop at the wrong end of the line. */ [dir="rtl"] .header-phone, [dir="rtl"] .mail-link, [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* intl-tel-input is an LTR widget; forced RTL puts the dial code on the wrong side of the field. */ [dir="rtl"] .iti { direction: ltr; } [dir="rtl"] .iti input { text-align: right; }