/* Clinovia — Arabic (RTL) overrides. Loaded only when the document is (Arabic locale). style.css is written mostly in physical properties (left/right, margin-left, translateX, float-free); this file mirrors every directional rule so the layout flips cleanly with no horizontal overflow. extra.css already uses logical properties, so only a few of its rules need a nudge here. Everything is scoped to [dir="rtl"] so it never affects the other 5 locales. */ /* --------------------------------------------------------------- base font */ /* The stack itself comes from the locale-aware `--sans` override in , which keeps Latin brand tokens in Plus Jakarta Sans and hands Arabic glyphs to Noto Sans Arabic. Arabic has no italic, so the serif accent stays upright. */ [dir="rtl"] body { font-family: var(--sans); } [dir="rtl"] .acc, [dir="rtl"] .hero__title em, [dir="rtl"] .h1 em, [dir="rtl"] .h2 em { font-style: normal; } /* Keep Latin / numeric tokens (phones, e-mail, times, codes) left-to-right inside RTL text so they never get visually reordered. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] .head-call b, [dir="rtl"] .lang__opt .code, [dir="rtl"] .foot__langs a, [dir="rtl"] .drawer__langs a, [dir="rtl"] .stat__num, [dir="rtl"] .band__stat b, [dir="rtl"] .fcard__meta b, [dir="rtl"] .lbox__count, [dir="rtl"] .ltr, [dir="rtl"] bdi { unicode-bidi: isolate; direction: ltr; } /* generic inline LTR helper the view agents can reach for */ [dir="rtl"] .ltr { display: inline-block; } /* ------------------------------------------------------------------- buttons */ [dir="rtl"] .btn { padding: 7px 26px 7px 7px; } [dir="rtl"] .btn--sm { padding: 5px 20px 5px 5px; } /* horizontal arrow glyphs point the other way */ [dir="rtl"] .btn__ico svg, [dir="rtl"] .link-arrow svg, [dir="rtl"] .sidelist__item svg, [dir="rtl"] .hub-card__link svg, [dir="rtl"] .pcard__go, [dir="rtl"] .lbox__nav svg { transform: scaleX(-1); } /* mirror the hover nudge/rotation */ [dir="rtl"] .btn:hover .btn__ico { transform: rotate(45deg); } [dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .hub-card:hover .hub-card__link svg { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .pcard:hover .pcard__go { transform: scaleX(-1) translateX(3px); } /* -------------------------------------------------------------------- topbar */ [dir="rtl"] .topbar__right { margin-left: 0; margin-right: auto; } /* ---------------------------------------------------------- header / nav */ [dir="rtl"] .head-actions { margin-left: 0; margin-right: auto; } [dir="rtl"] .drop { left: auto; right: 0; } [dir="rtl"] .mega__col { border-left: 0; border-right: 1px solid var(--line-soft); } [dir="rtl"] .mega__col:first-child { border-right: 0; padding-left: 20px; padding-right: 4px; } [dir="rtl"] .mega__preview { padding: 0 20px 0 0; border-left: 0; border-right: 1px solid var(--line-soft); } [dir="rtl"] .lang__menu { left: 0; right: auto; } [dir="rtl"] .lang__opt { text-align: right; } [dir="rtl"] .lang__opt .code { margin-left: 0; margin-right: auto; } [dir="rtl"] .navbar { padding-left: 0; } @media (max-width: 1200px) { [dir="rtl"] .navbar { padding-right: 20px; } } /* ----------------------------------------------------------- mobile drawer */ [dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-102%); } [dir="rtl"] .drawer.is-on { transform: translateX(0); } [dir="rtl"] .macc__btn { text-align: right; } [dir="rtl"] .macc__panel a { padding: 9px 14px 9px 0; border-left: 0; border-right: 2px solid var(--line); } /* ----------------------------------------------------------------- hero */ [dir="rtl"] .hero__badges { margin-left: 0; margin-right: auto; } [dir="rtl"] .hero__badge { padding-left: 0; padding-right: 20px; } [dir="rtl"] .hero__badge::before { left: auto; right: 0; } [dir="rtl"] .badge-cf { padding: 9px 14px 9px 18px; } @media (max-width: 860px) { [dir="rtl"] .hero__badges { margin-right: 0; } } /* prev/next slider arrows already flip via .btn__ico / svg rule below */ [dir="rtl"] .hero__arrow--prev svg { transform: rotate(180deg) scaleX(-1); } /* --------------------------------------------------------------- stats */ [dir="rtl"] .stats__grid .stat + .stat { border-left: 0; border-right: 1px solid var(--line); padding-left: 0; padding-right: 30px; } @media (max-width: 860px) { [dir="rtl"] .stats__grid .stat:nth-child(2), [dir="rtl"] .stats__grid .stat:nth-child(4) { border-right: 1px solid var(--line); padding-right: 24px; } } /* ----------------------------------------------------- popular services */ [dir="rtl"] .pcard__go { margin-left: 0; margin-right: auto; } /* ---------------------------------------------------------------- about */ [dir="rtl"] .fcard h3 em { margin-left: 0; margin-right: .18em; } [dir="rtl"] .fcard__glow { right: auto; left: -70px; } [dir="rtl"] .fcard__list a:hover { padding-left: 0; padding-right: 5px; } [dir="rtl"] .fcard__meta { margin-left: 0; margin-right: auto; } /* ---------------------------------------------------------------- steps */ [dir="rtl"] .step::before { left: auto; right: 0; } /* ----------------------------------------------------------------- band */ [dir="rtl"] .band__stat { right: auto; left: 20px; } /* ----------------------------------------------------------------- team */ [dir="rtl"] .doc { text-align: right; } [dir="rtl"] .doc__socials { left: auto; right: 16px; } /* ------------------------------------------------------------------ faq */ [dir="rtl"] .faq__aside::after { right: auto; left: -60px; } [dir="rtl"] .acc__btn { text-align: right; } /* -------------------------------------------------------- inside-out / gut */ [dir="rtl"] .gut__chip { left: auto; right: 18px; } /* ------------------------------------------------------- before / after */ [dir="rtl"] .ba__tag--before { left: auto; right: 14px; } [dir="rtl"] .ba__tag--after { right: auto; left: 14px; } @media (max-width: 1200px) { [dir="rtl"] .pop__media .ba__tag--after { right: auto; left: 62px; } } /* ---------------------------------------------------------- floating dock */ [dir="rtl"] .dock { right: auto; left: 22px; align-items: flex-start; } [dir="rtl"] .dock__btn::after { right: auto; left: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); } [dir="rtl"] .dock__btn:hover::after { transform: translateY(-50%); } @media (max-width: 680px) { [dir="rtl"] .dock { left: 14px; } } /* --------------------------------------------------------------- chat */ [dir="rtl"] .chat { right: auto; left: 22px; } [dir="rtl"] .chat__close { margin-left: 0; margin-right: auto; } [dir="rtl"] .chat__chip { text-align: right; } @media (max-width: 680px) { [dir="rtl"] .chat { left: 14px; } } /* --------------------------------------------------------------- popup */ [dir="rtl"] .pop__close { right: auto; left: 14px; } /* --------------------------------------------------------------- ticker */ [dir="rtl"] .ticker { padding-left: 0; padding-right: 16px; } [dir="rtl"] .ticker__item { padding-right: 0; padding-left: 14px; } /* marquee scrolls toward the RTL reading direction (rightward) */ [dir="rtl"] .ticker__track { animation-name: tick-rtl; } @keyframes tick-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (max-width: 680px) { [dir="rtl"] .ticker { padding-left: 0; padding-right: 14px; } } /* --------------------------------------------------------- treatment cards */ [dir="rtl"] .tcard__ico { left: auto; right: 22px; } /* ---------------------------------------------------------------- sidelist */ [dir="rtl"] .sidelist__item:hover { padding-left: 0; padding-right: 4px; } /* ---------------------------------------------------------- trust strip */ [dir="rtl"] .tstrip__ht { margin-left: 0; margin-right: auto; } @media (max-width: 900px) { [dir="rtl"] .tstrip__ht { margin-right: 0; } } /* ------------------------------------------------------- gallery + lightbox */ [dir="rtl"] .galcell__cap { text-align: right; } [dir="rtl"] .lbox__close { right: auto; left: 18px; } @media (max-width: 720px) { [dir="rtl"] .lbox__nav--prev { left: auto; right: 24px; } [dir="rtl"] .lbox__nav--next { right: auto; left: 24px; } } /* --------------------------------------------------------- breadcrumbs */ /* the separator span is decorative; the crumb order flips automatically with dir=rtl. Flip a chevron/arrow separator if one is used. */ [dir="rtl"] .crumb svg { transform: scaleX(-1); } /* ========================================================================== extra.css nudges (mostly logical already) ========================================================================== */ /* on-page nav pill radius follows the logical border side */ [dir="rtl"] .onpage__list a { border-radius: 8px 0 0 8px; } /* the play button centering is symmetric (left:50%/translateX) — no change */