/* ============================================================ WePack - rtl.css RTL layout overrides for Hebrew (/he/) Applied when is set ============================================================ */ /* --- Rubik font (Hebrew only) ------------------------------ */ /* Overrides --font-head and --font-body custom properties; every var(--font-head) / var(--font-body) usage in style.css and form elements (font: inherit) pick up Rubik automatically. */ html[lang="he"] { --font-head: 'Rubik', sans-serif; --font-body: 'Rubik', sans-serif; } /* --- Hebrew heading weight -------------------------------- */ /* Rubik at 800/700 reads too heavy in Hebrew - 500 is visually balanced */ html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3, html[lang="he"] h4 { font-weight: 500; } /* --- Direction & Text ------------------------------------- */ [dir="rtl"] { direction: rtl; } [dir="rtl"] .section-sub { margin-right: 0; } /* --- Header ----------------------------------------------- */ [dir="rtl"] .lang-switcher { direction: ltr; /* keep EN | RU | HE in logical order */ } /* --- Navigation ------------------------------------------- */ [dir="rtl"] .nav__list { direction: rtl; } /* --- Mobile drawer ---------------------------------------- */ /* panel slides in from the left in RTL */ [dir="rtl"] .mobile-menu__panel { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 48px rgba(44, 24, 16, 0.14); } [dir="rtl"] .mobile-menu.is-open .mobile-menu__panel { transform: none; } [dir="rtl"] .mobile-menu__list { direction: rtl; } /* --- Hero ------------------------------------------------- */ /* In RTL, CSS grid reverses column order automatically: hero__content appears on the right, hero__visual on the left */ [dir="rtl"] .hero::before { right: auto; left: -150px; } [dir="rtl"] .hero::after { left: auto; right: 8%; } [dir="rtl"] .hero__content { align-items: flex-start; } /* Flip floating image badges for RTL */ [dir="rtl"] .hero__img-badge { right: auto; left: 18px; } [dir="rtl"] .hero__stat { left: auto; right: 20px; } /* --- Service cards ---------------------------------------- */ [dir="rtl"] .service-icon { margin-left: 0; } /* --- Gallery ---------------------------------------------- */ [dir="rtl"] .gallery-tabs { direction: rtl; } [dir="rtl"] .ba-label { text-align: right; } /* Carousel flex and transforms must stay LTR regardless of page direction. translateX(-N*100%) is always a physical leftward move; if the flex container inherits direction:rtl the slides stack right-to-left and navigation goes to empty space instead of the next slide. */ [dir="rtl"] .ba-carousel, [dir="rtl"] .ba-slides, [dir="rtl"] .ba-slide { direction: ltr; } /* Testimonials carousel — same fix: keep track/slides LTR so the JS translateX calculation works identically to EN/RU. Card content is explicitly reset to RTL so Hebrew text stays right-aligned. */ [dir="rtl"] .tc-slider, [dir="rtl"] .tc-track, [dir="rtl"] .tc-slide { direction: ltr; } [dir="rtl"] .tc-card { direction: rtl; text-align: right; } /* --- Why us ----------------------------------------------- */ [dir="rtl"] .why-item { flex-direction: row-reverse; } [dir="rtl"] .why-body { text-align: right; } /* --- Who for ---------------------------------------------- */ [dir="rtl"] .who-quote { padding-left: 0; padding-right: 24px; } [dir="rtl"] .who-quote::before { left: auto; right: 0; } /* --- How it works ----------------------------------------- */ [dir="rtl"] .steps::before { left: calc(10% + 1px); right: calc(10% + 1px); } /* --- Contact form ----------------------------------------- */ [dir="rtl"] .contact-link { flex-direction: row-reverse; } [dir="rtl"] .form-group label { text-align: right; } [dir="rtl"] .form-group select { /* Move chevron to left side for RTL */ background-position: left 16px center; padding-right: 16px; padding-left: 44px; } /* --- Testimonials ----------------------------------------- */ [dir="rtl"] .testimonial-text { text-align: right; } [dir="rtl"] .testimonial-author { flex-direction: row-reverse; } /* --- Footer ----------------------------------------------- */ [dir="rtl"] .footer__brand p { margin-left: 0; } [dir="rtl"] .footer__bottom { flex-direction: row-reverse; } @media (max-width: 768px) { [dir="rtl"] .footer__bottom { flex-direction: column; } } /* --- About Modal ------------------------------------------ */ [dir="rtl"] .about-modal__body { flex-direction: row-reverse; } [dir="rtl"] .about-modal__content { padding: 36px 32px 36px 36px; } [dir="rtl"] .about-modal__header { padding-right: 0; padding-left: 40px; } [dir="rtl"] .about-modal__list li { padding-left: 0; padding-right: 14px; } [dir="rtl"] .about-modal__list li::before { left: auto; right: 0; } [dir="rtl"] .about-modal__checks li { flex-direction: row-reverse; } @media (max-width: 768px) { [dir="rtl"] .about-modal__body { flex-direction: column; } [dir="rtl"] .about-modal__header { padding-left: 44px; padding-right: 0; } [dir="rtl"] .about-modal__content { padding: 20px 20px 32px; } }