/* ====================================== Arabic locale (/ar) — fonts + RTL Loaded after porthe.css, only when ====================================== */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); /* Body and UI text */ [dir="rtl"] body { font-family: "Tajawal", "Poppins", sans-serif; } /* Display type — Anton has no Arabic glyphs */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .font-anton, [dir="rtl"] .porthe-large-text { font-family: "Tajawal", "Anton", sans-serif; } /* Display weight: hero, menu, and the giant footer name carry Anton's punch */ [dir="rtl"] h1, [dir="rtl"] .font-anton, [dir="rtl"] .porthe-large-text, [dir="rtl"] .mobile-header-menu-wrapper h3 { font-weight: 800; } [dir="rtl"] .font-figtree { font-family: "Tajawal", "Figtree", sans-serif; } /* Arabic glyphs need breathing room — leading-none clips ascenders/descenders */ [dir="rtl"] .leading-none { line-height: 1.2; } /* Mirror explicit physical text alignment */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* The code terminal stays LTR — code is English */ [dir="rtl"] .mockup-code, [dir="rtl"] .mockup-code pre { direction: ltr; text-align: left; } /* Keep the marquee gallery flowing LTR so the scroll-translate math holds */ [dir="rtl"] .marquee-row { direction: ltr; } /* Mirror the pill-button arrow animation for RTL — the template's base and hover transforms are hard-coded LTR, so every state needs the flip baked in */ [dir="rtl"] .porthe-btn-pill i { transform: scaleX(-1) rotate(-45deg); } [dir="rtl"] .porthe-btn-pill .icon-second i { transform: scaleX(-1) rotate(-45deg) translate(-53px, -13px); } [dir="rtl"] .porthe-btn-pill:hover .icon-first i { transform: scaleX(-1) rotate(-45deg) translateX(35px); } [dir="rtl"] .porthe-btn-pill:hover .icon-second i { transform: scaleX(-1) rotate(-45deg) translate(-12px, -8px); } /* Latin emails and URLs render left-to-right inside Arabic text */ [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; } /* Giant footer name — measured against the EN footer so both match: same width fill (~93%), same gap above the ink (107px) and below it (65px). Tajawal's line box carries big metric slack; the margins trim it away. */ [dir="rtl"] .porthe-large-text { font-size: 31cqw; line-height: 1; white-space: nowrap; margin-top: 0.07em; margin-bottom: -0.35em; } /* On mobile the negative bottom margin (tuned for the desktop layout) pulled the copyright row up over the giant name. Reset the trim, drop the size a touch, and let the descenders breathe so nothing overlaps. */ @media (max-width: 1023px) { [dir="rtl"] .porthe-large-text { font-size: 25cqw; line-height: 1.12; margin-top: 0.12em; margin-bottom: 0.18em; overflow: visible; } } /* RTL puts the logo in the same corner as the fixed menu toggle — clear it at widths where the container edge meets the toggle */ @media (min-width: 1024px) { [dir="rtl"] header .grid-cols-8, [dir="rtl"] .flat-menu-top .grid-cols-8 { padding-right: 96px; } } /* Architecture band — Arabic zone labels use Tajawal (JetBrains Mono has no Arabic glyphs) and drop the Latin letter-spacing */ .arch-zone { font-family: "Tajawal", sans-serif; font-weight: 700; letter-spacing: 0; } /* Node labels: Latin product names keep the mono look, Arabic falls to Tajawal */ .arch-label-sm, .arch-label { font-family: "JetBrains Mono", "Tajawal", sans-serif; } /* The heading already uses Tajawal via .font-figtree; tighten its tracking */ .arch-heading { letter-spacing: 0; }