/** * RTL overrides for the Arabic site. * * Loaded only when the current Polylang language is Arabic, after * main.css and motion.css so it can override what actually needs to * change for right-to-left reading. Everything not listed here is * inherited as-is from the English stylesheets — this file must never * duplicate rules that already work correctly (flex/grid auto-flow, * logical `flex-start`/`flex-end` alignment, and centered `left:50% + * translateX(-50%)` patterns all mirror automatically once `dir="rtl"` * is set on and need no entry here). * * @package Intercoil */ /* ============================================================ TYPOGRAPHY — Arabic is a cursive script; any custom letter-spacing (wide tracking on labels, tight tracking on headings) breaks glyph joining and must be neutralized everywhere it was tuned for Latin type. ============================================================ */ body, h1, h2, h3, h4, h5, h6, p, span, a, button, label, li, blockquote { letter-spacing: normal !important; } /* Keep numeral + suffix pairs (e.g. "50+") in natural LTR order instead of letting the inline-flex container reverse them under RTL. */ .stats__figure { direction: ltr; } /* ============================================================ DIRECTIONAL ICONS — arrow glyphs point "forward" (right) by default; mirror them so "forward" reads correctly toward the left in RTL. ============================================================ */ .btn-arrow, .brand-panel__cta svg, .hero-carousel__arrow svg { transform: scaleX(-1); } .btn:hover .btn-arrow { transform: scaleX(-1) translateX(3px); } .brand-panel:hover .brand-panel__cta svg { transform: scaleX(-1) translateX(4px); } /* ============================================================ NAVIGATION ============================================================ */ .nav__trigger::before { transform-origin: right; } .nav__mobile-trigger { text-align: right; } /* ============================================================ HERO CAROUSEL — swap the prev/next hit zones to the reading-correct side. ============================================================ */ .hero-carousel__arrow--prev { left: auto; right: clamp(20px, 3vw, 48px); } .hero-carousel__arrow--next { right: auto; left: 0; } /* ============================================================ STATS ============================================================ */ .stats__divider { right: auto; left: 0; } /* ============================================================ BRAND STATEMENT — sweep the gradient heading in from the reading-start side. ============================================================ */ .brand-statement__heading { background-position: 100% 50%; } .brand-statement:hover .brand-statement__heading, .brand-statement__heading:hover { background-position: 0% 50%; } /* ============================================================ BRAND PORTFOLIO PANELS — mirror the alternating index numeral and the reversed panel's content/logo alignment. ============================================================ */ .brand-panel__index { right: auto; left: clamp(12px, 2vw, 24px); } .brand-panel--reverse .brand-panel__index { left: auto; right: clamp(12px, 2vw, 24px); } .brand-panel--reverse .brand-panel__content { text-align: left; } .brand-panel--reverse .brand-panel__logo-wrap { margin-left: 0; margin-right: auto; } @media (max-width: 1100px) { .brand-panel--reverse .brand-panel__content { text-align: right; } } @media (max-width: 680px) { .brand-panel__index { left: 8px; right: auto; } .brand-panel--reverse .brand-panel__index { right: 8px; left: auto; } } /* ============================================================ COLLECTIONS — sweep the tile-name underline in from the reading-start side. ============================================================ */ .collection-tile__name::after { left: auto; right: 0; transform-origin: right center; } /* ============================================================ HOSPITALITY — scroll the partner-logo marquee toward the reading direction. ============================================================ */ @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(var(--marquee-set-width, 50%)); } } /* ============================================================ KEY MILESTONES — move the progress rail to the reading-start margin. ============================================================ */ .timeline__rail { left: auto; right: max(var(--container-pad), 4vw); } /* ============================================================ MANUFACTURING ============================================================ */ .manufacturing__cert { text-align: right; } /* ============================================================ OUR LEGACY — mirror the watermark, layered photography, pillar index badge, and closing CTA arrow. ============================================================ */ .legacy-intro__watermark { right: auto; left: clamp(-4%, 2vw, 6%); } .legacy-intro__figure--primary { margin-left: 0; margin-right: auto; } .legacy-intro__figure--accent { left: auto; right: 0; } .legacy-pillar__index { left: auto; right: clamp(20px, 3vw, 28px); } .legacy-btn__arrow { display: inline-block; transform: scaleX(-1); } .legacy-btn--primary:hover .legacy-btn__arrow { transform: scaleX(-1) translateX(4px); } /* ============================================================ SUSTAINABILITY & SOCIAL RESPONSIBILITY — same layered-photography and closing-CTA pattern as Our Legacy. ============================================================ */ .sustainability-intro__figure--primary { margin-left: 0; margin-right: auto; } .sustainability-intro__figure--accent { left: auto; right: 0; } .sustainability-pillar__index { left: auto; right: clamp(20px, 3vw, 28px); } .sustainability-btn__arrow { display: inline-block; transform: scaleX(-1); } .sustainability-btn--primary:hover .sustainability-btn__arrow { transform: scaleX(-1) translateX(4px); } /* ============================================================ CERTIFICATES AND EXCELLENCE — same layered-photography and closing-CTA pattern as Our Legacy/Sustainability, plus the certification seal badge overlaid on the intro photo. ============================================================ */ .iso-intro__watermark { right: auto; left: clamp(-20px, -2vw, 40px); } .iso-intro__figure--primary { margin-left: 0; margin-right: auto; } .iso-intro__figure--accent { left: auto; right: 0; } .iso-intro__seal { right: auto; left: clamp(8px, 2vw, 24px); } .iso-record__index { left: auto; right: clamp(20px, 3vw, 28px); } .iso-btn__arrow { display: inline-block; transform: scaleX(-1); } .iso-btn--primary:hover .iso-btn__arrow { transform: scaleX(-1) translateX(4px); } /* ============================================================ BRAND PAGES — shared hero/closing components plus the Intercoil manifesto's layered photography and chapter accent image. ============================================================ */ .brand-hero__back-arrow { display: inline-block; transform: scaleX(-1); } .brand-hero__back:hover .brand-hero__back-arrow { transform: scaleX(-1) translateX(-4px); } .brand-btn__arrow { display: inline-block; transform: scaleX(-1); } .brand-btn--primary:hover .brand-btn__arrow { transform: scaleX(-1) translateX(4px); } .brand-manifesto__watermark { right: auto; left: clamp(-6%, 1vw, 4%); } .brand-manifesto__panel { right: auto; left: -4%; } .brand-manifesto__figure--primary { left: auto; right: 0; } .brand-manifesto__figure--accent { right: auto; left: 0; } .brand-chapter__layout .brand-chapter__figure-accent { right: auto; left: -6%; } .brand-chapter--reverse .brand-chapter__figure-accent { left: auto; right: -6%; } /* — Comfort Collections pages — */ .comfort-btn__arrow { display: inline-block; transform: scaleX(-1); } .comfort-btn--primary:hover .comfort-btn__arrow { transform: scaleX(-1) translateX(-4px); } .comfort-intro__watermark { right: auto; left: clamp(-4%, 2vw, 6%); } .comfort-intro__figure--primary { margin-left: 0; margin-right: auto; } .comfort-intro__figure--accent { left: auto; right: 0; } /* Mattress brand panels alternate sides by array index (independent of language direction); the ghost index number uses a physical left/right position while the content block uses logical flex alignment that auto-mirrors under RTL, so the two must be swapped together to keep the number opposite the content instead of colliding with it. */ .mattress-panel__index { right: auto; left: clamp(12px, 2vw, 24px); } .mattress-panel--reverse .mattress-panel__index { left: auto; right: clamp(12px, 2vw, 24px); } .mattress-panel--reverse .mattress-panel__logo-wrap { margin-left: 0; margin-right: auto; } /* — Industries We Serve pages — */ .industry-btn__arrow { display: inline-block; transform: scaleX(-1); } .industry-btn--primary:hover .industry-btn__arrow { transform: scaleX(-1) translateX(-4px); } .industry-split__figure-accent { right: auto; left: -6%; } .industry-split--reverse .industry-split__figure-accent { left: auto; right: -6%; } /* — Knowledge Hub pages — */ .knowledge-btn__arrow { display: inline-block; transform: scaleX(-1); } .knowledge-btn--primary:hover .knowledge-btn__arrow { transform: scaleX(-1) translateX(-4px); } .knowledge-split__figure-accent { right: auto; left: -6%; } .knowledge-split--reverse .knowledge-split__figure-accent { left: auto; right: -6%; } /* — Shared components — */ .inner-link::after { left: 100%; right: 0; } .inner-link:hover::after, .inner-link:focus-visible::after { left: 0; } .inner-link__arrow { display: inline-block; transform: scaleX(-1); } .inner-link:hover .inner-link__arrow { transform: scaleX(-1) translateX(-5px); } /* — Awards & Guinness Records — */ .awards-timeline__list::before { left: auto; right: calc(var(--awards-date-col) + (var(--awards-date-gap) / 2)); } @media (max-width: 860px) { .awards-timeline__list::before { left: auto; right: 0; } .awards-timeline__item { padding-left: 0; padding-right: clamp(20px, 5vw, 28px); } } /* — Get in Touch / action pages — */ .form-btn__arrow { display: inline-block; transform: scaleX(-1); } .form-btn--primary:hover .form-btn__arrow { transform: scaleX(-1) translateX(-4px); } .consultation-select { background-position: left 2px center; padding-right: 0; padding-left: 22px; } .warranty-select { background-position: left 16px center; padding-right: 0; padding-left: 40px; } .partner-intro__figure--primary { margin-left: 0; margin-right: auto; } .partner-intro__figure--accent { left: auto; right: 0; } .partner-steps__list::before { left: auto; right: calc(var(--step-num-col) / 2 - 6px); } .join-form { text-align: right; } .locate-search__icon { left: auto; right: 20px; } .locate-search__input { padding: 15px 50px 15px 22px; } .locate-card__main { text-align: right; }