/* * RTL + Arabic typography for the tahiri theme. * Loaded only on the /ar/ side, after style.css (see inc/i18n.php). * * The layout is mostly flex/grid, so `direction:rtl` mirrors it for free. * What follows only fixes what direction alone cannot: absolutely positioned * decoration, directional arrows, and one-sided padding/shadows. */ /* ── Typography ──────────────────────────────────────────────────────── */ /* Poppins carries no Arabic glyphs; IBM Plex Sans Arabic pairs with the Latin forms that remain (phone numbers, IBAN, brand names). */ [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: 'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif; } [dir="rtl"] { --serif: 'IBM Plex Sans Arabic', system-ui, sans-serif; --sans: 'IBM Plex Sans Arabic', system-ui, sans-serif; } /* Arabic script sits lower and needs a little more leading than Latin. */ [dir="rtl"] body { line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.45; } /* Arabic has no italic tradition, and browsers fake it by shearing the glyphs, which reads as a rendering fault. Keep the gold accent, drop the slant. The theme sets the slant per-context (.section-title em, .hero h1 em, …), so those selectors have to be matched or they win on specificity. */ [dir="rtl"] em, [dir="rtl"] .section-title em, [dir="rtl"] .hero h1 em, [dir="rtl"] .cta-title em, [dir="rtl"] .page-hero h1 em, [dir="rtl"] .why-quote-text, [dir="rtl"] .footer-tagline, [dir="rtl"] .prose blockquote { font-style: normal; } [dir="rtl"] em { font-weight: 700; } /* Pull-quote rule sits on the other edge in RTL. */ [dir="rtl"] .prose blockquote { border-left: none; border-right: 3px solid var(--gold); border-radius: var(--radius) 0 0 var(--radius); } /* ── Direction ───────────────────────────────────────────────────────── */ [dir="rtl"] body { direction: rtl; text-align: right; } /* ── Header ──────────────────────────────────────────────────────────── */ [dir="rtl"] .header-nav a::after { left: auto; right: 0; } [dir="rtl"] .lang-dropdown { right: auto; left: 0; } @media (max-width: 900px) { [dir="rtl"] .lang-switcher { margin-left: 0; margin-right: auto; margin-inline-start: auto; } } [dir="rtl"] .mobile-nav a.active { box-shadow: inset -3px 0 0 var(--gold); } /* Breadcrumb chevrons point the other way in RTL. */ [dir="rtl"] .breadcrumb-sep { display: inline-block; transform: scaleX(-1); } /* ── Scroll-reveal animations ────────────────────────────────────────── */ [dir="rtl"] .reveal-left { transform: translateX(32px); } [dir="rtl"] .reveal-right { transform: translateX(-32px); } [dir="rtl"] .reveal-left.visible, [dir="rtl"] .reveal-right.visible { transform: translateX(0); } /* ── Home page decoration ────────────────────────────────────────────── */ [dir="rtl"] .stat-cell + .stat-cell::before { left: auto; right: 0; } [dir="rtl"] .about-badge-wrap { right: auto; left: -2rem; } [dir="rtl"] .about-accent-ring { left: auto; right: -1.5rem; } [dir="rtl"] .why-visual::before { right: auto; left: -40px; } [dir="rtl"] .why-visual::after { left: auto; right: -30px; } [dir="rtl"] .cta-section::before { right: auto; left: -100px; } [dir="rtl"] .cta-section::after { left: auto; right: -80px; } [dir="rtl"] .insight-tag { left: auto; right: 1rem; } /* Arrows: mirror the glyph and the hover nudge. */ [dir="rtl"] .insight-read svg { transform: scaleX(-1); } [dir="rtl"] .insight-card:hover .insight-read svg { transform: scaleX(-1) translateX(4px); } /* ── Floating action buttons ─────────────────────────────────────────── */ [dir="rtl"] .fab-wrap { right: auto; left: 2rem; align-items: flex-start; } [dir="rtl"] .fab-options { align-items: flex-start; } /* ── Form fields ─────────────────────────────────────────────────────── */ /* * Form controls compute `direction: ltr` here even under * (something in the plugin stack resets it), which makes the browser's default * `text-align: start` resolve to the LEFT — Arabic placeholders ended up on * the wrong edge. Set direction explicitly rather than relying on inheritance. */ /* The form and its rows need it too, not just the controls: .form-group is a flex row, and a flex container laid out LTR puts the terms checkbox to the left of its label instead of the right. */ [dir="rtl"] .wpcf7, [dir="rtl"] .wpcf7-form, [dir="rtl"] .wpcf7-form .form-group, [dir="rtl"] .wpcf7-form .form-row, [dir="rtl"] .contact-form-card, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label, [dir="rtl"] .wpcf7-form input, [dir="rtl"] .wpcf7-form textarea, [dir="rtl"] .wpcf7-form select { direction: rtl; text-align: right; } [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* Latin-only fields keep LTR so the value itself cannot reorder, but stay visually flush with the right-aligned column. Must come after the block above to win. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="date"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: right; } /* Terms checkbox sits to the right of its label in RTL. */ [dir="rtl"] .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 2px 0 0 0; } /* ── Booking form ────────────────────────────────────────────────────── */ [dir="rtl"] .booking-form-card::before { left: 0; right: 0; } [dir="rtl"] .date-wrap input[type="date"] { padding-right: 1rem; padding-left: 2.75rem; } [dir="rtl"] .date-wrap svg { right: auto; left: 1rem; } /* The select chevron is a background image pinned to one side. */ [dir="rtl"] .form-select { background-position: left 1rem center; padding-right: 1rem; padding-left: 2.75rem; } /* ── Équipe page ─────────────────────────────────────────────────────── */ [dir="rtl"] .team-founder-badge { right: auto; left: -1.5rem; } [dir="rtl"] .team-card-years { right: auto; left: .875rem; } @media (max-width: 900px) { [dir="rtl"] .team-founder-badge { left: auto; right: 280px; } } @media (max-width: 640px) { [dir="rtl"] .team-founder-badge { right: auto; left: 1rem; } } /* ── Footer ──────────────────────────────────────────────────────────── */ [dir="rtl"] .footer-legal, [dir="rtl"] .footer-bottom { text-align: right; } /* ── Latin runs inside Arabic text ───────────────────────────────────── */ /* * Phone numbers, IBAN, SWIFT and e-mail must stay LTR or the digits and * punctuation reorder into nonsense ("06 72 60 55 99" rendering as * "99 55 60 72 06"). Scoped to the element type rather than to a container * class, because these appear in the footer, the contact page and the * home-page CTA strip, each with different wrappers. * * `isolate` rather than `embed`: it also stops the run from disturbing the * order of the Arabic text around it. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] .pay-detail-value, [dir="rtl"] .copy-value, [dir="rtl"] bdi, [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="date"] { direction: ltr; unicode-bidi: isolate; } /* Keep them visually flush with the right-aligned Arabic column. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] bdi { text-align: right; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="date"] { text-align: right; } /* The blanket text-align:right above also caught the submit button. */ [dir="rtl"] input[type="submit"], [dir="rtl"] button, [dir="rtl"] .btn{text-align:center} /* The package card pins its radio to the top-right; in RTL that lands on top of the right-aligned label. Move it to the free corner. */ [dir="rtl"] .package-check{right:auto;left:.875rem}