/* ============================================================ rtl.css — Arabic (RTL) overrides for AECLINIC Loaded LAST and ONLY when $siteLang === 'ar' (html[dir="rtl"]). The page already has dir="rtl" on , so flexbox / grid auto-mirror; this file only fixes PHYSICAL-direction props (left/right paddings, floats, absolute offsets, arrows) and applies the Arabic typography. Selectors mirror real class names found in styles.css / homepage.css / inner-base.css / inner-mobile.css / pages/*.css — nothing invented. ============================================================ */ /* ===== Typography: Arabic font stacks ====================== Most components read their font from CSS custom properties (--f-serif / --serif for display, --f-sans / --sans for body). Overriding the vars on the root covers those in one shot; explicit rules below cover selectors that hard-code the Latin families. Latin fallbacks stay so the "AECLINIC" brand word and numerals still render in Inter/Playfair. */ html[dir="rtl"]{ --f-serif: "Noto Kufi Arabic", 'Playfair Display', Georgia, serif; --serif: "Noto Kufi Arabic", 'Playfair Display', Georgia, serif; --f-sans: "Noto Naskh Arabic", 'Inter', -apple-system, sans-serif; --sans: "Noto Naskh Arabic", 'Inter', -apple-system, sans-serif; } /* Body / base text — styles.css hard-codes 'Inter' on body */ html[dir="rtl"], html[dir="rtl"] body{ font-family: "Noto Naskh Arabic", 'Inter', -apple-system, sans-serif; } /* Display & heading classes that hard-code 'Playfair Display' (var-based ones are already covered above, listed for clarity) */ [dir="rtl"] .h-display, [dir="rtl"] .h-section, [dir="rtl"] .h-card, [dir="rtl"] .h-small, [dir="rtl"] .precta-name, [dir="rtl"] .precta__title, [dir="rtl"] .menu-nav-link, [dir="rtl"] .menu-tagline, [dir="rtl"] .menu-address-name, [dir="rtl"] .modal-title, [dir="rtl"] .mf-success__title, [dir="rtl"] .reason-num, [dir="rtl"] .stage-num, [dir="rtl"] .faq-q > div:first-child{ font-family: "Noto Kufi Arabic", 'Playfair Display', Georgia, serif; } /* Eyebrow / label runs — keep uppercase off Arabic (letter-spacing and text-transform:uppercase mangle Arabic shaping) */ [dir="rtl"] .eyebrow, [dir="rtl"] .hero-eyebrow, [dir="rtl"] .layer-label, [dir="rtl"] .precta-tag, [dir="rtl"] .breadcrumb, [dir="rtl"] .spec-num, [dir="rtl"] .stat-label{ text-transform: none; letter-spacing: 0; } /* Arabic has no italics — neutralise decorative italics but keep the accent colour/weight that other rules already supply */ [dir="rtl"] .italic, [dir="rtl"] .menu-tagline, [dir="rtl"] .modal-title, [dir="rtl"] .mf-success__title, [dir="rtl"] .philosophy blockquote{ font-style: normal; } /* Footer mobile block defines its own local font vars */ [dir="rtl"] .footer--mob{ --display: "Noto Kufi Arabic", 'Playfair Display', Georgia, serif; --sans: "Noto Naskh Arabic", 'Inter', system-ui, -apple-system, sans-serif; } /* ===== Default text alignment ============================== Body copy is left-aligned by default in LTR; flip to right. Centred components keep their own text-align:center rules (higher/equal specificity, later) so they are unaffected. */ [dir="rtl"] body{ text-align: right; } /* Rows/blocks explicitly set to text-align:left in LTR */ [dir="rtl"] .ba-grid, [dir="rtl"] .ba .h-section, [dir="rtl"] .reasons-cta, [dir="rtl"] .media-card, [dir="rtl"] button.media-card, [dir="rtl"] .page-homepage .topbar-tagline, [dir="rtl"] .topbar--inner .topbar-tagline{ text-align: right; } /* Numeric / phone / email runs must stay LTR so digits and the "+7 …" / "@" don't scramble inside RTL context */ [dir="rtl"] .topbar-phone span, [dir="rtl"] .mf-phone-hint a, [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] .gallery-login__text a, [dir="rtl"] .gallery-consult__phone{ direction: ltr; unicode-bidi: isolate; } /* ===== Topbar =============================================== */ /* push the right-hand cluster to the (visual) left edge */ [dir="rtl"] .topbar-end{ margin-left: 0; margin-right: auto; } /* phone hover nudge — mirror the horizontal shift */ [dir="rtl"] .topbar-phone:hover, [dir="rtl"] .topbar-phone:focus-visible{ transform: translateX(-2px); } /* brand block on desktop: swap the 20px gap side + auto margin */ [dir="rtl"] .page-homepage .topbar-brand, [dir="rtl"] .topbar--inner .topbar-brand{ margin-left: auto; margin-right: 20px; } /* back link chevron points the other way in RTL */ [dir="rtl"] .topbar-back svg{ transform: scaleX(-1); } /* ===== Menu overlay ======================================== */ /* divider between the two halves moves to the other side */ [dir="rtl"] .menu-left{ border-right: none; border-left: 1px solid rgba(26,24,20,0.09); } @media (max-width: 768px){ [dir="rtl"] .menu-left{ border-left: none; } } /* sub-nav indent flips from left to right */ [dir="rtl"] .menu-sub-link{ padding: 10px 38px 10px 0; } @media (min-width: 769px) and (max-width: 1024px){ [dir="rtl"] .menu-sub-link{ padding: 6px 28px 6px 0; } } @media (max-width: 768px){ [dir="rtl"] .menu-sub{ padding: 4px 14px 8px 0; } [dir="rtl"] .menu-sub-link{ padding: 8px 10px 8px 0; } } /* directional arrows are right-pointing SVGs → mirror them */ [dir="rtl"] .list-row__arrow{ transform: scaleX(-1) translateY(1px); } [dir="rtl"] .menu-dir-arrow{ transform: scaleX(-1) translateY(5px); } [dir="rtl"] .menu-nav-item.open .menu-dir-arrow{ transform: scaleX(-1) translateY(5px) rotate(90deg); } @media (max-width: 768px){ [dir="rtl"] .menu-dir-arrow{ margin-left: 0; margin-right: 10px; transform: scaleX(-1) translateY(4px); } [dir="rtl"] .menu-nav-item.open .menu-dir-arrow{ transform: scaleX(-1) translateY(4px) rotate(90deg); } } /* spec-card inline arrow gap */ [dir="rtl"] .spec-card-head .spec-title .list-row__arrow{ margin-left: 0; margin-right: 12px; } /* location block: flush to the (visual) left, text follows */ [dir="rtl"] .menu-loc p{ text-align: left; } @media (max-width: 768px){ [dir="rtl"] .menu-loc{ margin-left: 0; margin-right: auto; } [dir="rtl"] .menu-loc p{ text-align: left; } } /* ===== Footer ============================================== */ /* grid columns + flex rows auto-mirror under dir=rtl; only the text alignment of copy blocks needs nudging (inherits right from body — nothing else required). */ /* ===== Modal / booking form ================================ */ /* segmented time-options: divider flips to the right edge */ [dir="rtl"] .mf-time-option + .mf-time-option{ border-left: none; border-right: 1px solid rgba(26,24,20,.12); } /* checkbox / label rows use flex+gap → auto-mirror, no change */ /* ===== Homepage: hero & sections =========================== */ /* hero-grid / about-grid / surgeon-grid / spec-grid are grids or flex; they mirror automatically. Only the "stage" cards carry a physical left border + left padding. */ [dir="rtl"] .stage{ border-left: none; border-right: 2px solid var(--accent); padding: 8px 28px 8px 0; } @media (max-width: 768px){ [dir="rtl"] .stage{ border-right: none; padding: 24px 0; } } /* ===== Inner-page generic patterns (inner-mobile.css) ====== These blocks only exist inside the mobile media query, so the overrides are scoped to match. */ @media (max-width: 768px){ [dir="rtl"] .stat{ text-align: right; } [dir="rtl"] .stat-num, [dir="rtl"] .stat-label{ text-align: right; } [dir="rtl"] .stat:nth-child(odd){ padding-right: 0; padding-left: 12px; } [dir="rtl"] .stat:nth-child(even){ padding-left: 0; padding-right: 12px; border-left: none; border-right: 1px solid rgba(26,24,20,.1); } [dir="rtl"] .timeline-year{ text-align: right; padding-right: 0; } [dir="rtl"] .timeline-content{ padding-left: 0; } } /* ===== Surgeon page: quotes & lightboxes =================== */ /* decorative quotation marks swap corners */ [dir="rtl"] .philosophy blockquote::before{ left: auto; right: 0; } [dir="rtl"] .philosophy blockquote::after{ right: auto; left: 0; } /* doc lightbox: prev/next arrows swap sides + mirror the glyph */ [dir="rtl"] .doc-lightbox__nav{ transform: translateY(-50%) scaleX(-1); } [dir="rtl"] .doc-lightbox__nav--prev{ left: auto; right: -56px; } [dir="rtl"] .doc-lightbox__nav--next{ right: auto; left: -56px; } [dir="rtl"] .doc-lightbox__close{ right: auto; left: 0; } @media (max-width: 768px){ [dir="rtl"] .doc-lightbox__nav{ transform: scaleX(-1); } [dir="rtl"] .doc-lightbox__nav--prev{ left: auto; right: calc(50% - 48px); } [dir="rtl"] .doc-lightbox__nav--next{ right: auto; left: calc(50% - 48px); } [dir="rtl"] .doc-lightbox__close{ right: auto; left: 8px; } } /* video lightbox close (mirrors doc lightbox) */ [dir="rtl"] .video-lightbox__close{ right: auto; left: 10px; } /* ===== Latin-script blocks inside RTL ======================= */ /* Hospital name / postal address / location lines are English (LTR). Left in an RTL context their commas and
line breaks land on the wrong side and read as broken. Isolate them back to LTR so wrapping and punctuation are correct, while keeping them aligned to the panel edge. */ [dir="rtl"] .menu-address-name, [dir="rtl"] .menu-address-text, [dir="rtl"] .menu-address-text a, [dir="rtl"] .menu-loc-text, [dir="rtl"] .footer__venue, [dir="rtl"] .topbar-tagline{ direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .menu-address-name, [dir="rtl"] .menu-address-text{ text-align: right; } [dir="rtl"] .menu-loc-text{ text-align: left; }