/* ============================================================ X Chess Club — ARABIC / RIGHT-TO-LEFT layer ------------------------------------------------------------ Loaded ONLY by the pages under /ar/, always AFTER site.css. It does three jobs: 1. swaps the Arabic typefaces in 2. mirrors every rule in site.css that points left or right 3. undoes the things that look wrong in Arabic — letter-spacing (it breaks the joins between letters) and the very tight English line-heights Nothing in here touches the English pages. ============================================================ */ /* ---------- 1. TYPE ------------------------------------------------ Reem Kufi — the display face. Geometric kufi, carries the same weight on the page as DRAGOTHEN does in English. IBM Plex Sans Arabic — everything else. Same design family as Inter, so the two languages feel like one site. Both are Google Fonts under the Open Font License: free to use commercially, no licence to buy. ------------------------------------------------------------------- */ :root{ --sans:'IBM Plex Sans Arabic','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,Arial,sans-serif; --serif:'Reem Kufi','IBM Plex Sans Arabic',Georgia,serif; --display:'Reem Kufi','IBM Plex Sans Arabic',Georgia,serif; } /* The wordmark stays Latin and stays DRAGOTHEN — it is the logo. */ .brand span,.f-name{font-family:'Dragothen',Georgia,serif} /* Arabic sits lower and needs more air between lines than English. */ body{font-weight:400;line-height:1.9} .lead,.chapter p,.band p,.hero p,.phero p{line-height:1.9} /* ---------- 2. NO LETTER-SPACING ---------------------------------- Arabic letters join. Any tracking at all pulls them apart and the word stops being a word. Every place site.css tracks out small uppercase English is reset here. ------------------------------------------------------------------- */ .eyebrow,.nav a,.fact,.dl dt,.field label,.status,.f-nav a, .hero-meta,.tmeta span,.chapter .num,.lb-count,.copy-field button, .copy-field code,.brand span,.social-card b,.tbl th,.f-legal, .cta,.float,.f-sub,.social-card small{letter-spacing:normal} /* a touch of size back, since Arabic reads smaller at the same px */ .eyebrow{font-size:12.5px;font-weight:600} .nav a{font-size:13.5px;font-weight:500} .dl dt,.field label{font-size:12.5px} .status{font-size:13px} .f-nav a{font-size:13.5px} .hero-meta{font-size:13.5px} .tmeta span{font-size:13.5px} .chapter .num{font-size:14px;font-weight:500} .fact{font-size:14px} /* ---------- 3. HEADLINES ------------------------------------------ The English headlines are set at line-height .94–1.06, which clips Arabic ascenders and the dots under ب ج ي. Opened up here. ------------------------------------------------------------------- */ .hero h1{line-height:1.2;letter-spacing:normal;font-size:clamp(40px,7.4vw,108px)} .phero h1{line-height:1.2;letter-spacing:normal;font-size:clamp(36px,6.4vw,88px)} h2{line-height:1.3;letter-spacing:normal} h3{line-height:1.35;letter-spacing:normal} .band h2{line-height:1.3;letter-spacing:normal} .pull{line-height:1.6;letter-spacing:normal;max-width:26ch} .f-name{line-height:1.3} /* Arabic has no italics. site.css italicises for the brass accent words — keep the colour, drop the slant. */ .hero h1 em,.phero h1 em,.band h2 em,.pull em{font-style:normal;color:var(--brass)} /* Arabic measure runs a little wider than English for the same words */ .lead{max-width:46ch} .hero p{max-width:38ch} .phero p{max-width:48ch} .chapter p{max-width:50ch} .band p{max-width:40ch} /* ---------- 4. MIRRORING ------------------------------------------- Everything below only applies when the page is dir="rtl". Flexbox and grid flip themselves; these are the rules that name a physical side and therefore do not. ------------------------------------------------------------------- */ /* the hero veil darkens the side the text sits on — now the right */ [dir=rtl] .hero-veil{ background: linear-gradient(270deg,rgba(16,15,14,.9) 0%,rgba(16,15,14,.62) 26%,rgba(16,15,14,.12) 58%,transparent 78%), linear-gradient(180deg,rgba(16,15,14,.72) 0%,rgba(16,15,14,.14) 30%,rgba(16,15,14,.5) 66%,rgba(16,15,14,.96) 100%), radial-gradient(120% 80% at 50% 100%,rgba(16,15,14,.6),transparent 62%); } @media(max-width:860px){ [dir=rtl] .hero-veil{background:linear-gradient(180deg,rgba(16,15,14,.7) 0%,rgba(16,15,14,.22) 28%,rgba(16,15,14,.66) 62%,rgba(16,15,14,.97) 100%)} } /* nav underline grows from the right */ [dir=rtl] .nav a::after{transform-origin:right} /* the photo strip is photos only — let it scroll the way it always did */ [dir=rtl] .strip{direction:ltr} /* quote rule moves to the right edge of the text */ [dir=rtl] .note{ border-left:0;border-right:2px solid var(--brass); padding:2px 16px 2px 0; } /* select arrow */ [dir=rtl] .field select{background-position:left 18px center;padding-right:16px;padding-left:44px} /* copy pill: the code sits inside the rounded end, the button at the flat end */ [dir=rtl] .copy-field{padding:11px 20px 11px 12px} /* social card arrow points up-and-away on the correct side */ [dir=rtl] .social-card .arw{margin-left:0;margin-right:auto} /* floating WhatsApp button */ [dir=rtl] .float{right:auto;left:18px} /* The spam honeypot is parked off-screen with left:-9999px. In a left-to-right page that is simply invisible; in a right-to-left one the left edge is where the page SCROLLS to, so it dragged 9999px of empty space along behind the reservations form. Park it off the other side instead. */ [dir=rtl] .hp{left:auto;right:-9999px} /* lightbox: previous is on the right in Arabic */ [dir=rtl] .lb .lb-close{right:auto;left:10px} [dir=rtl] .lb .lb-prev{left:auto;right:4px} [dir=rtl] .lb .lb-next{right:auto;left:4px} /* tables (admin only, but kept correct) */ [dir=rtl] .tbl th{text-align:right} [dir=rtl] .tbl td,[dir=rtl] .tbl th{padding-right:0;padding-left:14px} /* numbers, phone numbers, prices and the Instapay handle stay left-to-right inside otherwise right-to-left text */ [dir=rtl] .ltr,[dir=rtl] code,[dir=rtl] input[type=tel]{ direction:ltr;unicode-bidi:isolate;text-align:right; } [dir=rtl] .copy-field code{text-align:left} /* ---------- 5. THE LANGUAGE PILL ---------------------------------- .lang-sw is declared in site.css and shared with the Future Moves pages. Its margins are symmetric, so there is nothing to mirror — only the Latin label needs to stay left-to-right inside the right-to-left header. ------------------------------------------------------------------- */ [dir=rtl] .lang-sw[lang=en]{direction:ltr;unicode-bidi:isolate}