/* ───────────────────────────────────────────────────────────── Positive Energy — Arabic RTL overrides Loads AFTER styles.css to swap directional spacing & flip arrows. Body type stays Manrope for Latin glyphs but Cairo takes over for Arabic text. ───────────────────────────────────────────────────────────── */ html[dir="rtl"] { /* Editorial Arabic pairing for a warm, modern wellness brand - El Messiri: decorative serif display (≈ Instrument Serif) - Tajawal: humanist sans body (≈ Manrope) - IBM Plex Sans Arabic: monospaced labels (≈ JetBrains Mono) !important overrides the inline vars the Tweaks panel writes onto */ --font-body: "Tajawal", "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif !important; --font-display: "El Messiri", "Instrument Serif", "Newsreader", Georgia, serif !important; --font-mono: "IBM Plex Sans Arabic", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !important; } html[dir="rtl"] body { font-family: var(--font-body); font-feature-settings: "ss01", "calt", "liga"; font-weight: 400; letter-spacing: 0; line-height: 1.7; /* Arabic glyphs benefit from more leading */ } /* Display headings — El Messiri gives the editorial flourish */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; line-height: 1.15; } html[dir="rtl"] h1 { font-weight: 700; } /* Tighten very large display sizes — Arabic glyphs have more vertical mass */ html[dir="rtl"] h1 { font-size: clamp(56px, 8vw, 140px); line-height: 1.05; } /* Hero headline: extra leading so the stacked Arabic lines + diacritics breathe */ html[dir="rtl"] .hero-headline h1 { line-height: 1.28; } html[dir="rtl"] h2 { font-size: clamp(40px, 5.5vw, 88px); line-height: 1.1; } html[dir="rtl"] .contact-h { font-size: clamp(48px, 7vw, 120px); line-height: 1.12; } /* Lede / large body text uses display family for editorial feel */ html[dir="rtl"] .hero-sub, html[dir="rtl"] .contact-lede, html[dir="rtl"] .about-body p { font-family: var(--font-display); font-weight: 400; line-height: 1.65; } /* Em underline accent: Arabic doesn't italicize, so colour it instead */ html[dir="rtl"] em { font-style: normal; color: var(--accent-deep); } html[dir="rtl"] .it { font-style: normal; color: var(--accent-deep); } /* Nav: flip the order so logo stays start, CTA stays end */ html[dir="rtl"] .nav { direction: rtl; } html[dir="rtl"] .nav-links { gap: 28px; } /* Language switcher in nav */ .nav-lang { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; padding: 6px 10px; border: .5px solid var(--rule); border-radius: 999px; color: var(--ink-2); margin-inline-start: 12px; transition: background .3s var(--ease), color .3s var(--ease); } .nav-lang:hover { background: var(--ink); color: var(--paper); } /* Hero photo + meta stay in original visual order regardless of RTL. The grid in styles.css uses grid-template-areas, so we just remap. */ html[dir="rtl"] .hero-grid { /* keep portrait on the right of headline visually in LTR, on the left in RTL — natural flip */ } /* Underline accent under "intention." — flip the slope for Arabic */ html[dir="rtl"] .underline em { /* Arabic uses ‹.› dot which is naturally LTR; force inline-block for kerning */ display: inline-block; transform: translateY(.05em); } /* Buttons: flip the chevron */ html[dir="rtl"] .btn .arrow, html[dir="rtl"] .program-arrow, html[dir="rtl"] .post-link .arrow { transform: scaleX(-1); } html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); } html[dir="rtl"] .post:hover .post-link .arrow { transform: scaleX(-1) translateX(4px); } /* Service "num" badges — flip the slash visual rhythm */ html[dir="rtl"] .service .num { letter-spacing: .04em; } /* Programs list: arrow on the leading edge */ html[dir="rtl"] .program-arrow { right: auto; left: 32px; } /* Marquee should scroll right-to-left in Arabic too — flip animation direction */ html[dir="rtl"] .marquee-track { animation-direction: reverse; } /* Contact card corners — visually identical; nothing to flip */ /* Contact CTA arrow already points left in markup, fine */ /* Eyebrow line — flip the leading rule */ html[dir="rtl"] .eyebrow::before { /* still appears at the start of the line, which in RTL is the right side */ } /* Stats: keep numerals LTR within Arabic flow so they read naturally */ html[dir="rtl"] .stat-num, html[dir="rtl"] .program-num, html[dir="rtl"] .post-meta, html[dir="rtl"] .cc-head-stamp, html[dir="rtl"] .ce-num, html[dir="rtl"] .cc-key, html[dir="rtl"] .cc-sub { direction: ltr; unicode-bidi: isolate; } /* Footer RTL polish */ html[dir="rtl"] .footer-hero { grid-template-columns: 1fr 1.4fr; } html[dir="rtl"] .fcol ul li a:hover { padding-left: 0; padding-right: 8px; } html[dir="rtl"] .fcol-social a { grid-template-columns: 1fr 20px; } html[dir="rtl"] .fm-top svg { transform: scaleX(-1); } /* Reset for tight letter-spacing on Latin-tuned classes */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .nav-cta, html[dir="rtl"] .hero-badge, html[dir="rtl"] .tag, html[dir="rtl"] .chip, html[dir="rtl"] .when, html[dir="rtl"] .img-label, html[dir="rtl"] .photo-badge, html[dir="rtl"] .stat-label, html[dir="rtl"] .num, html[dir="rtl"] .post-link { letter-spacing: .04em; } /* About portrait tapes — mirror their tilt direction */ html[dir="rtl"] .ap-tape.t1 { transform: rotate(15deg); } html[dir="rtl"] .ap-tape.t2 { transform: rotate(-12deg); } /* CTA card: ensure right column stacks naturally */ html[dir="rtl"] .cta-card { direction: rtl; } html[dir="rtl"] .cta-actions { align-items: flex-start; } /* Contact section grid keeps card on the trailing side — natural RTL flip via grid */ /* Footer */ html[dir="rtl"] footer { direction: rtl; } /* Floating dark-mode toggle — pin to the left in RTL */ html[dir="rtl"] .theme-toggle { right: auto; left: 24px; }