/* ═══════════════════════════════════════════════════════════════════ RTL overrides — loaded ONLY when (Arabic locale). English / LTR pages never see this file (conditional load in base_paper.html + base.html). Keeps the LTR footprint untouched. Strategy: 1. Switch typography to Arabic-friendly fonts (Naskh for body / editorial, Kufi for headlines — same family pairing Al Jazeera / Asharq Al-Awsat use). 2. Flip every directional CSS property that doesn't auto-mirror: margin-left ↔ margin-right, padding-left ↔ padding-right, text-align: left ↔ right, border-left ↔ border-right, etc. 3. Mirror the homepage's signature visual elements: hero accent gutter moves to the right edge, photo-left features become photo-right, founder card photo + text swap sides. 4. Mirror the bullet glyphs that point left → right. Selectors are scoped under [dir="rtl"] so they only apply when the document direction is RTL. Use !important sparingly and only where the LTR rule's specificity would otherwise win. ═══════════════════════════════════════════════════════════════════ */ /* ─── Global typography for RTL ─────────────────────────────────────── */ html[dir="rtl"] body, html[dir="rtl"] { font-family: 'Noto Naskh Arabic', 'Cairo', 'Tahoma', 'Arial', sans-serif; line-height: 1.65; /* Arabic glyphs need more breathing room */ letter-spacing: 0 !important; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .nl-lead-head, html[dir="rtl"] .hv2-hero h1, html[dir="rtl"] .hv2-section-title, html[dir="rtl"] .hv2-record-headline, html[dir="rtl"] .hv2-founder-letter h2 { font-family: 'Noto Kufi Arabic', 'Tajawal', 'Cairo', sans-serif !important; letter-spacing: 0 !important; /* Arabic does not need negative tracking */ line-height: 1.25 !important; } /* Arabic typography conventions: no italic emphasis (Arabic doesn't italicize). Replace italic with a subtle weight bump or an underline. */ html[dir="rtl"] em, html[dir="rtl"] i, html[dir="rtl"] .hv2-hero-dek, html[dir="rtl"] .hv2-section-dek, html[dir="rtl"] .hv2-feature .feat-dek, html[dir="rtl"] .hv2-record-dek { font-style: normal !important; font-weight: 600; } /* Mono / Courier fonts have very poor Arabic shaping — fall back to the body font when displaying Arabic text within a mono block. Numbers + symbols (which we mostly keep in English) still render in Plex Mono fine. */ html[dir="rtl"] .mono, html[dir="rtl"] [class*="-mono"] { font-family: 'IBM Plex Mono', 'Noto Naskh Arabic', monospace; } /* ─── Universal direction-aware flips ───────────────────────────────── */ /* Text alignment — most "text-align: left" becomes "right" in RTL. Tables and numeric content keep left-alignment (numbers stay LTR). */ html[dir="rtl"] body { text-align: right; } /* Lists — bullet indentation flips */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; } /* Bullet glyphs that point a direction — flip arrows */ html[dir="rtl"] .nl-kicker::before { content: '\25C2 '; } /* ◂ instead of ▸ */ html[dir="rtl"] .hv2-method-step ul li::before { content: '◂ '; } html[dir="rtl"] .hv2-feature .feat-bullet { padding-right: 22px; padding-left: 0; } html[dir="rtl"] .hv2-feature .feat-bullet::before { right: 0; left: auto; } /* Arrow indicators (→) flip to (←) on RTL */ html[dir="rtl"] .hv2-btn .arrow, html[dir="rtl"] .arrow { transform: scaleX(-1); display: inline-block; } html[dir="rtl"] .hv2-btn:hover .arrow { transform: scaleX(-1) translateX(2px); } /* ─── Header / nav ───────────────────────────────────────────────────── */ /* Nav rail items keep centred — flexbox auto-mirrors. */ html[dir="rtl"] .mh-rail-inner { direction: rtl; } html[dir="rtl"] .mh-util { flex-direction: row-reverse; } html[dir="rtl"] .mh-edition { text-align: center; } /* Notification bell badge sticks to the wrong side after dir flip — pin it. */ html[dir="rtl"] .mh-bell-badge { right: auto; left: -4px; } /* ─── Hero (index.html — hv2-hero) ───────────────────────────────────── */ /* Accent gutter — was on the left in LTR; flip to the right edge */ html[dir="rtl"] .hv2-hero::before { left: auto; right: 0; } html[dir="rtl"] .hv2-hero-inner { padding: 56px 38px 48px 32px; /* swap left/right */ } /* Hero eyebrow + trust pills already flex-wrap — direction:rtl handles it */ html[dir="rtl"] .hv2-hero-eyebrow, html[dir="rtl"] .hv2-trust-strip, html[dir="rtl"] .hv2-cta-row { direction: rtl; } /* The skewed AI accent block looks the same in both directions, no flip needed */ /* Hero card header pulls items to the wrong side after dir flip */ html[dir="rtl"] .hv2-hero-card-header { flex-direction: row-reverse; } /* Stat cells — right-border flips to left-border so the inner divider stays between cells, not outside the card */ html[dir="rtl"] .hv2-hero-stat { border-right: none; border-left: 1px solid var(--t-border); } html[dir="rtl"] .hv2-hero-stat:nth-child(2n) { border-left: none; } /* Sparkline labels (CAP) — flip the flex direction so deltas stay right-side */ html[dir="rtl"] .hv2-hero-card .sparkline-wrap .cap { direction: rtl; } /* ─── Live signals + recent closed strips ───────────────────────────── */ html[dir="rtl"] .hv2-sig-card .sig-top, html[dir="rtl"] .hv2-sig-card .sig-prices .row, html[dir="rtl"] .hv2-feat-signal .row1, html[dir="rtl"] .hv2-feat-signal .conv-row { direction: rtl; } /* Recent closed strip — keep horizontal scroll LTR (tickers + dollar amounts read LTR even on RTL pages); flip the OUTER section heading only */ html[dir="rtl"] .hv2-recent-strip { direction: ltr; } html[dir="rtl"] .hv2-recent-card { direction: ltr; } /* ML conviction bar fills from the right in RTL — flip the gradient origin */ html[dir="rtl"] .hv2-sig-card .sig-conviction .bar .fill, html[dir="rtl"] .hv2-feat-signal .conv-row .bar .fill { left: auto; right: 0; } /* Top stripe on signal cards animates from left in LTR → flip origin */ html[dir="rtl"] .hv2-sig-card::before { transform-origin: right; } /* ─── Methodology gates ───────────────────────────────────────────────── */ /* Step number badge stuck to the wrong corner after flip */ html[dir="rtl"] .hv2-method-step::before { right: auto; left: -1px; } /* ─── Founder letter (§5b) ───────────────────────────────────────────── */ /* The whole grid: photo column stays on the right, letter on the left in RTL (since reading order flows right→left, the photo should anchor the start of the eye-path). */ html[dir="rtl"] .hv2-founder-grid { grid-template-columns: 1fr 280px; /* reversed */ } /* The giant decorative quote mark — flip from left side to right side */ html[dir="rtl"] .hv2-founder-letter { padding: 22px 56px 22px 8px; /* swap left/right padding */ } html[dir="rtl"] .hv2-founder-letter::before { left: auto; right: -4px; content: '\201D'; /* closing curly-double-quote — RTL convention */ } /* Kicker line decoration */ html[dir="rtl"] .hv2-founder-kicker::before { display: none; } html[dir="rtl"] .hv2-founder-kicker::after { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--t-accent); margin-right: 8px; } /* Drop-cap — float right instead of left */ html[dir="rtl"] .hv2-founder-letter p:first-of-type::first-letter { float: right; padding-left: 10px; padding-right: 0; } /* Founder signature — was rotated -2°; flip the sign so the visual tilt matches the RTL reading direction */ html[dir="rtl"] .hv2-founder-sig .signed { transform: rotate(2deg); transform-origin: right center; } /* Footer of letter — flex direction reverses */ html[dir="rtl"] .hv2-founder-sig { flex-direction: row-reverse; } /* ─── Crypto analyzer feature + Research lab feature (photo features) ── */ /* Both currently use grid-template-columns with photo on one side. In RTL the eye enters from the right; we keep the existing visual layout but reverse the column order so the photo lands at the start of the eye-path. */ html[dir="rtl"] .hv2-feature-grid { direction: rtl; } html[dir="rtl"] .hv2-research-grid { direction: rtl; } /* Feature photo caption tag — pin to the right corner in RTL */ html[dir="rtl"] .hv2-feature-photo .badge-new { left: auto; right: 14px; } html[dir="rtl"] .hv2-feature-photo .caption { text-align: right; } /* Research lab overlay card — bottom-right in LTR, flip to bottom-left in RTL */ html[dir="rtl"] .hv2-research-photo .overlay-card { right: auto; left: -1px; border-left: none; border-right: 1px solid var(--t-border-strong); } /* ─── Tools grid ──────────────────────────────────────────────────────── */ /* Tool card pill + label — they're absolutely positioned at left:12 / left:14; need to flip to right:* */ html[dir="rtl"] .hv2-tool-thumb .pill { left: auto; right: 12px; } html[dir="rtl"] .hv2-tool-thumb .label { left: auto; right: 14px; } /* ─── Live ticker tape (TradingView) ─────────────────────────────────── */ /* The label is anchored at left:0 in LTR. Flip to right:0 and adjust the container's left-padding (now right-padding) to give the widget room. */ html[dir="rtl"] .hv2-ticker .ticker-label { left: auto; right: 0; } html[dir="rtl"] .hv2-ticker .tradingview-widget-container { padding-left: 0; padding-right: 130px; } @media (max-width: 820px) { html[dir="rtl"] .hv2-ticker .tradingview-widget-container { padding-right: 110px; padding-left: 0; } } @media (max-width: 540px) { html[dir="rtl"] .hv2-ticker .tradingview-widget-container { padding-right: 92px; padding-left: 0; } } /* ─── Track record cards ─────────────────────────────────────────────── */ /* Background icon was top-right; flip to top-left in RTL */ html[dir="rtl"] .hv2-class-card .icon-bg { right: auto; left: -18px; } /* ─── FAQ ─────────────────────────────────────────────────────────────── */ /* Toggle indicator (+/−) anchored at right:* in LTR; flip to left:* */ html[dir="rtl"] .hv2-faq-item summary { padding: 18px 0 18px 36px; } html[dir="rtl"] .hv2-faq-item summary::after { right: auto; left: 4px; } html[dir="rtl"] .hv2-faq-item .answer { padding: 0 0 22px 36px; } /* Kicker LHS column dash decoration */ html[dir="rtl"] .hv2-kicker::before { margin-right: 0; margin-left: 8px; } /* ─── Final CTA + section heads ───────────────────────────────────────── */ html[dir="rtl"] .hv2-final-inner { direction: rtl; } html[dir="rtl"] .hv2-section-head { direction: rtl; } /* ─── Tables: keep alignment left for numeric, right for text ─────────── */ html[dir="rtl"] table td, html[dir="rtl"] table th { text-align: right; } html[dir="rtl"] table td.num, html[dir="rtl"] table td[data-numeric], html[dir="rtl"] .mono-num { text-align: left; /* numbers always read LTR even on RTL pages */ direction: ltr; unicode-bidi: bidi-override; } /* ─── Forms ──────────────────────────────────────────────────────────── */ html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"], html[dir="rtl"] textarea { text-align: right; } /* But: email/URL inputs should stay LTR (English-only characters) */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[name="ticker"], html[dir="rtl"] input[data-ltr] { text-align: left; direction: ltr; } /* ─── Footer ─────────────────────────────────────────────────────────── */ html[dir="rtl"] .mf-bottom, html[dir="rtl"] .mf-grid, html[dir="rtl"] .mf-col { direction: rtl; } html[dir="rtl"] .mf-col a { text-align: right; display: block; }