/* ========================================================================== template4 — RTL companion. style.css is written with CSS logical properties (margin-inline-start, inset-inline-end, border-block-end, text-align via flex order, etc.) so it already adapts correctly when is set. This file only covers what logical properties can't: swapping in the Arabic type family and mirroring the couple of gradients drawn with a literal angle. ========================================================================== */ :root { --font-ar: 'Cairo', 'IBM Plex Sans', sans-serif; } [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-ar); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-weight: 800; letter-spacing: 0; } /* Buttons (incl. the header "get a quote" CTA) hard-code --font-body (IBM Plex Sans, Latin-only) in style.css, so in Arabic they were falling back to the browser's default Arabic font instead of Cairo — a wider fallback that, combined with the header's fixed padding, pushed the CTA label onto two lines. Match it to the same Cairo family the nav links already inherit from body. */ [dir="rtl"] .btn { font-family: var(--font-ar); letter-spacing: 0; } [dir="rtl"] .eyebrow, [dir="rtl"] .t4-meta, [dir="rtl"] .info-box p, [dir="rtl"] .t4-tags a, [dir="rtl"] .t4-breadcrumbs ol, [dir="rtl"] .t4-pagination a { font-family: var(--font-mono); /* keep mono for data-like bits even in rtl */ } /* Phone numbers carry a dir="ltr" attribute (see index.blade.php) so the bidi algorithm doesn't flip the leading "+" to the end of the number. Keep them lined up with the rest of the (right-aligned) info box instead of falling back to the left edge just because of that attribute. */ [dir="rtl"] .info-box p[dir="ltr"] { text-align: right; } /* diagonal stripes drawn at a literal angle read the same either way, but mirror them so the "grain" still runs toward the leading edge in rtl */ [dir="rtl"] .t4-stripe, [dir="rtl"] .eyebrow::before { background-image: repeating-linear-gradient(45deg, var(--accent) 0 14px, var(--ink-soft) 14px 28px); } [dir="rtl"] .eyebrow::before { background-image: repeating-linear-gradient(45deg, var(--accent) 0 6px, transparent 6px 12px); } [dir="rtl"] #t4-hero::before { background: linear-gradient(180deg, rgba(16,19,23,0.55) 0%, rgba(16,19,23,0.72) 55%, rgba(16,19,23,0.96) 100%); }