/* ========================================================= RTL overrides for the Arabic version of Ulfa Loaded after style.css when ========================================================= */ :root { --font-serif: 'Amiri', 'Cormorant Garamond', serif; --font-sans: 'IBM Plex Sans Arabic', 'Inter', sans-serif; } body { direction: rtl; text-align: right; } /* Tighter letter-spacing for Arabic — kerning behaves differently */ .h-display, .h-section, .h-sub, .hero__title-line, .work__title, .process__step-title, .contact__detail-value, .about__quote, .philosophy__quote, .footer__brand, .footer__tagline { letter-spacing: 0; font-weight: 400; } /* Arabic headlines render visually larger than Latin at the same point size. Scale all display typography down ~20-25% for visual parity with the EN version. */ .hero__title-line { font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 1.4; font-weight: 700; /* Amiri at bold reads as Cormorant Regular weight visually */ } .h-display { font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.25; } .h-section { font-size: clamp(1.625rem, 3vw, 2.625rem); line-height: 1.3; } .h-sub { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.4; } .philosophy__quote { font-size: clamp(1.625rem, 3.75vw, 3rem); line-height: 1.45; } .about__quote { font-size: 1.25rem; line-height: 1.7; } .wedge__step-title { font-size: 1.5rem; line-height: 1.4; } .work__title { font-size: 1.25rem; line-height: 1.4; } .process__step-title { font-size: 1.1875rem; line-height: 1.4; } /* Hero intro paragraph — Arabic body text reads more comfortably at slightly tighter line-height */ .hero__intro, .about__body, .process__intro, .contact__body { line-height: 1.85; } /* Arabic numerals look better at slightly heavier weight */ .wedge__step-number, .process__step-num { font-weight: 500; } /* Eyebrow text: Arabic doesn't have uppercase, drop letter-spacing */ .eyebrow, .contact__detail-label, .footer__col-title, .work__category, .hero__scroll-cue { text-transform: none; letter-spacing: 0.04em; } /* Buttons */ .btn__arrow { transform: scaleX(-1); } .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); } /* Hero / about images now use real photos — no placeholder text needed */ /* Contact form: form fields stay LTR for numbers/emails but RTL for labels */ .field input[type="email"], .field input[type="tel"] { direction: ltr; text-align: right; } /* Footer alignment fix */ .footer__bottom { direction: rtl; } /* Italic Arabic — Cormorant-italic on the 3rd hero line — Arabic doesn't italicize the same way; use color shift instead of italic */ .hero__title-line:nth-child(3) { font-style: normal; color: var(--ochre); } .about__quote, .philosophy__quote { font-style: normal; } /* Hero scroll cue arrow direction flip — already handled by general direction:rtl on body */