/* ============================================================ RTL / Arabic design layer — loaded AFTER the page stylesheet on Arabic pages (). Every rule is scoped with [dir="rtl"] so the file is inert on LTR pages. ============================================================ */ /* ---- Arabic typography ---- */ [dir="rtl"] body{font-family:'Tajawal','Vazirmatn','Inter',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif} [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:'Amiri','Fraunces',Georgia,serif;line-height:1.3;letter-spacing:normal} /* Persian (Farsi) uses the Arabic script but reads better in a Persian typeface */ [lang="fa"] body{font-family:'Vazirmatn','Tajawal','Inter',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif} [lang="fa"] h1,[lang="fa"] h2,[lang="fa"] h3,[lang="fa"] h4{font-family:'Vazirmatn','Amiri',Georgia,serif} /* Arabic has no italics — keep the accented words upright, just coloured */ [dir="rtl"] .hero h1 em,[dir="rtl"] .page-hero h1 em,[dir="rtl"] .whysky-quote .q,[dir="rtl"] .prose blockquote{font-style:normal} /* Letter-spacing breaks Arabic letter joining — reset it on every spaced/label style */ [dir="rtl"] .eyebrow,[dir="rtl"] .crumb,[dir="rtl"] .fee-step,[dir="rtl"] .pmeta,[dir="rtl"] .fkicker, [dir="rtl"] .art-cat,[dir="rtl"] .pcat,[dir="rtl"] .chip,[dir="rtl"] .toc h4,[dir="rtl"] .fcol h3, [dir="rtl"] .vmw .card h3,[dir="rtl"] .callout .ct,[dir="rtl"] .share .sl,[dir="rtl"] .cred-foot, [dir="rtl"] .hero-trust .stat .l,[dir="rtl"] .about-stats .l,[dir="rtl"] .whysky-stats .l, [dir="rtl"] .prog .pmeta,[dir="rtl"] .doc-card .idx,[dir="rtl"] .cert-card .cap .kw, [dir="rtl"] .member .role,[dir="rtl"] .art-meta .mfact,[dir="rtl"] .nl-note,[dir="rtl"] .copy{letter-spacing:normal} /* Numeric/latin runs (prices, dates, phones) stay left-to-right inside RTL text */ [dir="rtl"] .fee-price,[dir="rtl"] .hero-trust .stat .n,[dir="rtl"] .about-stats .n, [dir="rtl"] .whysky-stats .n,[dir="rtl"] .wcard .wnum,[dir="rtl"] .fcontact a[href^="tel"]{direction:ltr;unicode-bidi:isolate} /* ---- Header: mobile drawer slides from the LEFT ---- */ @media(max-width:940px){ [dir="rtl"] nav.main{inset:0 auto 0 0;transform:translateX(-105%);box-shadow:20px 0 60px rgba(16,36,55,.16)} [dir="rtl"] nav.main.open{transform:none} } /* Language dropdown now hangs from the left edge (button sits on the left) */ [dir="rtl"] .lang-menu{right:auto;left:0} /* ---- Directional icons: flip horizontal arrows ---- */ [dir="rtl"] .i-arrow,[dir="rtl"] .pmore svg,[dir="rtl"] .pnav svg{transform:scaleX(-1)} /* ---- Floating contact bar: dock to the LEFT on desktop ---- */ @media(min-width:769px){ [dir="rtl"] .fab{right:auto;left:0;align-items:flex-start} [dir="rtl"] .fab a{border-radius:0 16px 16px 0;box-shadow:6px 10px 24px rgba(16,36,55,.22)} [dir="rtl"] .fab a:hover .lbl{padding-left:0;padding-right:18px} } /* ============ INDEX-specific ============ */ /* Hero: dark side of the wash follows the text to the right */ [dir="rtl"] .hero-img{background: linear-gradient(270deg,var(--ink) 5%,rgba(10,26,56,.55) 45%,rgba(10,26,56,.15) 100%), url('/assets/img/hero-campus.jpg') center/cover no-repeat} [dir="rtl"] .hero-bg{background: radial-gradient(120% 90% at 15% 15%, rgba(226,31,47,.30), transparent 55%), radial-gradient(100% 120% at 90% 110%, rgba(226,31,47,.16), transparent 50%), linear-gradient(200deg,var(--ink) 0%,var(--ink-2) 50%,var(--ink-3) 80%,#0d1f30 100%)} [dir="rtl"] .about-media .badge{left:auto;right:16px} [dir="rtl"] .contact-split .cinfo{margin-left:var(--pad);margin-right:max(var(--pad),calc(50vw - var(--wrap)/2 + var(--pad)))} [dir="rtl"] .cert-slide{margin-right:0;margin-left:1.3rem} /* Full-bleed sections use a left-margin trick that breaks in RTL — make it symmetric */ [dir="rtl"] .cert-carousel,[dir="rtl"] .contact-split{width:auto;margin-inline:calc(50% - 50vw)} /* ============ BLOG-specific ============ */ [dir="rtl"] .page-hero .hero-bg{background: radial-gradient(120% 90% at 15% 15%, rgba(226,31,47,.30), transparent 55%), radial-gradient(100% 120% at 90% 110%, rgba(226,31,47,.16), transparent 50%), linear-gradient(200deg,var(--ink) 0%,var(--ink-2) 50%,var(--ink-3) 80%,#0d1f30 100%)} [dir="rtl"] .pcover .pcat{left:auto;right:1rem} [dir="rtl"] .pcover .pico{left:auto;right:1.1rem} [dir="rtl"] .pcover .glyph{right:auto;left:-.4rem} [dir="rtl"] .feat-media .tag{left:auto;right:1.1rem} [dir="rtl"] .feat-body{padding-left:clamp(1.5rem,3vw,2.6rem);padding-right:0} @media(max-width:820px){[dir="rtl"] .feat-body{padding-left:clamp(1.4rem,5vw,2rem);padding-right:clamp(1.4rem,5vw,2rem)}} [dir="rtl"] .nl-note a svg{transform:scaleX(-1)} /* ============ ARTICLE-specific ============ */ [dir="rtl"] .progress{left:auto;right:0} [dir="rtl"] .art-hero .hero-img{background: linear-gradient(180deg,rgba(13,25,40,.5),rgba(13,25,40,.84)), linear-gradient(260deg,rgba(13,25,40,.92) 0%,rgba(16,36,55,.62) 52%,rgba(16,36,55,.3) 100%), url('/assets/img/hero-russia.jpg') center/cover no-repeat} [dir="rtl"] .art-hero .hero-bg{background:radial-gradient(110% 95% at 12% 8%, rgba(226,31,47,.34), transparent 55%)} /* Drop cap floats to the right */ [dir="rtl"] .prose > p:first-of-type::first-letter{float:right;margin:.35rem 0 .1rem .7rem} /* Lists: bullets/numbers on the right */ [dir="rtl"] .prose ul li,[dir="rtl"] .prose ol li{padding-left:0;padding-right:1.9rem} [dir="rtl"] .prose ul li::before{left:auto;right:.15rem} [dir="rtl"] .prose ol li::before{left:auto;right:0} /* Blockquote rule on the right */ [dir="rtl"] .prose blockquote{border-left:0;border-right:4px solid var(--sunset);padding:.4rem 1.6rem .4rem 0} /* TOC guide line on the right */ [dir="rtl"] .toc a{border-left:0;border-right:2px solid var(--line);padding-left:0;padding-right:.9rem;margin-left:0;margin-right:-.9rem} [dir="rtl"] .toc a:hover{border-right-color:var(--sunset)} [dir="rtl"] .share .sl{margin-right:0;margin-left:.2rem}