/* Right-to-left overrides for the Hebrew and Arabic pages. * * Loaded only by /he/ and /ar/, after style.css, from the head block that * scripts/website_i18n.py injects. * * dir="rtl" on already flips text alignment, flex and grid flow, so * this file only handles what the browser cannot infer: elements pinned with * physical left/right offsets, glyphs that point somewhere, Latin runs that * must not be re-ordered, and a font stack that actually has the letters. */ /* --- Typography ------------------------------------------------------------- * Inter carries no Hebrew or Arabic glyphs, so without this every page falls * back to whatever the OS picks, which on Windows is a poor match for the * Latin text beside it. Noto covers both scripts and is loaded alongside * Inter, which stays first so brand names and numerals keep the site's look. */ [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { font-family: "Inter", "Noto Sans Hebrew", "Noto Sans Arabic", "Segoe UI", Tahoma, "Arial Hebrew", "Geeza Pro", sans-serif; } /* Arabic sits lower and needs more room between lines than Latin. */ [lang="ar"] body { line-height: 1.85; } /* --- Latin and numeric runs ------------------------------------------------- * A string like "Cal+" or "10M+" is Latin inside an RTL paragraph. Without * isolation the bidirectional algorithm moves the trailing "+" to the far * side, so the wordmark renders as "+Cal" and the stat as "+10M". */ [dir="rtl"] .logo, [dir="rtl"] .hero-stat-number, [dir="rtl"] .stat-number, [dir="rtl"] .price, [dir="rtl"] code, [dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; } /* Keep the logo hard against the start edge it is laid out from. */ [dir="rtl"] .logo { text-align: right; } /* --- Pinned elements -------------------------------------------------------- * Each of these uses a physical offset, which dir="rtl" does not touch. */ [dir="rtl"] .nav-subscribe-menu { right: auto; left: 0; } [dir="rtl"] .more-card-arrow { right: auto; left: 16px; } /* The overlapping avatar row pulls each image onto the previous one; in RTL * the overlap has to come off the other edge or the stack fans out backwards. */ [dir="rtl"] .hero-join-avatar { margin-left: 0; margin-right: -10px; } [dir="rtl"] .hero-join-avatar:first-child { margin-right: 0; } /* The review rail's fade masks are a mirrored pair, so both the position and * the gradient direction have to swap or the fades point into the content. */ [dir="rtl"] .reviews-scroll-wrapper::before { left: auto; right: 0; transform: scaleX(-1); } [dir="rtl"] .reviews-scroll-wrapper::after { right: auto; left: 0; transform: scaleX(-1); } /* --- Directional glyphs ----------------------------------------------------- * Chevrons and arrows carry meaning ("onward", "back"). The site uses ~52 * right-chevrons for list rows and a handful of arrows for carousels; all of * them must point the other way. Vertical chevrons are left alone. */ [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-chevron-left, [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-left, [dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-angle-left, [dir="rtl"] .more-card-arrow { transform: scaleX(-1); } /* --- Horizontal scrollers --------------------------------------------------- * A rail that is scrolled with scrollLeft in script starts at the wrong end * once the writing direction flips; anchoring the start edge keeps the first * card visible on load. */ [dir="rtl"] .reviews-scroll, [dir="rtl"] .cards-scroll { direction: rtl; } /* Form fields hold e-mail addresses and codes, which are always Latin. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }