/* ===================================================================== JARN Properties — Bilingual (EN / AR) layer · v5.2 Adds an Arabic, right-to-left experience on top of the existing design. Activated by + (set by jarn-i18n.js) ===================================================================== */ /* ---- Arabic typefaces, mapped onto the site's own CSS variables ---- The whole site draws type from var(--serif) / var(--sans), so swapping those two variables re-skins every heading and paragraph at once. */ body.lang-ar{ --serif:'Amiri','Cormorant Garamond',Georgia,serif; --sans:'Tajawal','DM Sans',system-ui,sans-serif; letter-spacing:normal; line-height:1.85; } /* Arabic script is cursive: Latin tracking & forced uppercase break it. */ body.lang-ar *{letter-spacing:normal !important;text-transform:none !important;} /* Arabic has no real italic — keep the accent colour, drop the slant. */ body.lang-ar em, body.lang-ar i{font-style:normal !important;} /* Tighten display leading back up after the global 1.85 bump. */ body.lang-ar .h-title, body.lang-ar .dsp, body.lang-ar h1, body.lang-ar h2{line-height:1.32;} body.lang-ar h3, body.lang-ar h4{line-height:1.4;} /* Keep Latin brand tokens / emails / handles upright inside RTL text. */ [dir="rtl"] .keep-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;} /* Numerals & punctuation around prices/phones stay sane in RTL. */ body.lang-ar{font-feature-settings:"liga" 1,"calt" 1;} /* ===================================================================== Language toggle (EN / ع) ===================================================================== */ .lang-toggle{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-width:46px;height:34px;padding:0 13px; border:1px solid rgba(255,255,255,.30); border-radius:100px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.92); font-family:'DM Sans',system-ui,sans-serif; font-size:11px;font-weight:600;line-height:1; letter-spacing:.06em; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .35s var(--ease); } .lang-toggle:hover{ border-color:var(--gold); background:rgba(196,161,101,.16); color:#fff; } .lang-toggle:active{transform:scale(.96);} .lang-toggle .lt-ico{ width:14px;height:14px;opacity:.7;flex:none; } .lang-toggle .lt-label{font-size:12px;font-weight:600;} /* the Arabic glyph in the toggle needs an Arabic face */ .lang-toggle .lt-label[lang="ar"]{font-family:'Tajawal','DM Sans',sans-serif;font-size:15px;font-weight:500;} /* Position inside the top nav: push toggle + CTA + burger to the far side. Logical margins flip automatically in RTL. */ #nav .lang-toggle{margin-inline-start:auto;margin-inline-end:14px;} /* Toggle stays visible on mobile even though nav-links / CTA are hidden. */ @media(max-width:900px){ #nav .lang-toggle{margin-inline-end:12px;height:32px;min-width:42px;padding:0 11px;} } /* Variant shown inside the mobile slide-in menu. */ #mmenu .lang-toggle{ margin-top:22px;height:42px;min-width:88px;font-size:13px; color:rgba(255,255,255,.85); } /* ===================================================================== Small RTL safety nets (mirroring of arrow-y / one-sided bits). Most layout mirrors for free via dir=rtl on flex rows. ===================================================================== */ /* Inline arrows authored as → in EN copy are swapped in the AR strings, but any decorative ::after chevrons get flipped here. */ body.lang-ar .btn-ghost svg, body.lang-ar .lt-ico{transform:scaleX(1);} /* keep icons un-mirrored */ /* Latin / numeric tokens must stay left-to-right inside RTL text: phone numbers, e-mail addresses and @handles. Isolate so they don't inherit the surrounding rtl order. (The Arabic "Email" button keeps its Arabic label because it is .btn-ghost, excluded below.) */ body.lang-ar .follow-handle, body.lang-ar .ft-soc, body.lang-ar .ft-col a[href^="mailto:"], body.lang-ar .ft-col a[href*="wa.me"], body.lang-ar a[href^="tel:"]:not(.btn-ghost):not(.btn-fill):not(.nav-cta):not(.mm-cta){ direction:ltr; unicode-bidi:isolate; } /* ===================================================================== Geometry-driven components keep their LTR coordinate system. The 3D "Our Collections" carousel and the photo lightboxes compute pixel transforms / flex order assuming left-to-right. Flipping them to RTL overlaps the text over the image and reverses the slides. We pin their *layout* to LTR and only re-flow the Arabic copy inside to RTL. ===================================================================== */ body.lang-ar .cs3d-stage, body.lang-ar .cs3d-m-stage, body.lang-ar #lb, body.lang-ar #lb-strip, body.lang-ar .lb-stage, body.lang-ar #lb-track{ direction:ltr; } /* Arabic text blocks inside those components still read right-to-left. */ body.lang-ar .cs3d-content, body.lang-ar .cs3d-m-body, body.lang-ar .cs3d-text{ direction:rtl; text-align:right; } /* The location eyebrow uses a trailing rule line (::after); in RTL it should sit on the left of the text instead of stretching oddly. */ body.lang-ar .cs3d-loc, body.lang-ar .cs3d-m-loc{justify-content:flex-end;} /* Prevent the auto language swap from flashing untranslated text: jarn-i18n.js reveals the body once the first pass has run. */ html.i18n-booting body{opacity:0;} html.i18n-ready body{opacity:1;transition:opacity .25s ease;}