/* ========================================================================== Right-to-left overrides. Every rule here is scoped to [dir="rtl"], which is set on from the locale's `dir` field (src/_data/i18n.js -> layouts/base.njk). Nothing in this file can reach an LTR page, so the English, Spanish and Indonesian layouts are provably untouched by it. Why an override sheet rather than converting style.css to logical properties: style.css is ~11k lines with ~200 direction-sensitive declarations, and the large majority of those are symmetric pairs (centring, full-bleed) that RTL does not care about. Rewriting all of them to logical properties would put three shipped locales at risk to fix the ~40 that actually matter. This file fixes exactly those, and is loaded on every page but is inert without dir="rtl". Order matters: this must load AFTER style.css and nav.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Arabic typography The two things that most often make an Arabic page look wrong are both inherited from Latin display styling. -------------------------------------------------------------------------- */ /* Inter carries no Arabic. Without a face of its own the browser falls back to a system default whose weights do not match the rest of the site. */ [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; } /* Arabic is a cursive script: letters join. Tracking — positive OR negative — either breaks those joins or crowds them, and the site uses ~120 letter-spacing declarations tuned for Latin display type (0.12em on kickers, -0.085em on hero headings). All of them are wrong here; `normal` is the only correct value for Arabic, so it is forced across the subtree. The attribute is repeated deliberately, to buy specificity. 63 of those letter-spacing declarations are already `!important`, and between two `!important` author declarations specificity decides regardless of load order. The most specific are `.site-nav.js-mobile-nav .logo-text` at (0,3,0) and `body.is-store-page .store-hero h1` at (0,2,2), so the override has to outrank both: three attributes plus the :not() argument scores (0,4,1). Pseudo-elements are included because several counters and bullets are drawn in ::before. .logo-text is exempt on purpose. It is the Latin "PETIOLE" wordmark, whose tracking is part of the mark rather than Latin display styling leaking onto Arabic — it should look identical in every locale. The reset does drop tracking from short Latin runs inside Arabic text — brand names, DOIs, emails. That is the right trade: those are inline body text, not display type, and default tracking suits them. */ html[dir="rtl"][dir="rtl"][dir="rtl"] *:not(.logo-text), html[dir="rtl"][dir="rtl"][dir="rtl"] *:not(.logo-text)::before, html[dir="rtl"][dir="rtl"][dir="rtl"] *:not(.logo-text)::after { letter-spacing: normal !important; } /* Arabic sits on a taller effective body relative to its cap height and carries dots and diacritics above and below the baseline, so Latin leading reads cramped. A small bump across running text, not headings. */ [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] dd, [dir="rtl"] figcaption, [dir="rtl"] blockquote, [dir="rtl"] summary, [dir="rtl"] td, [dir="rtl"] th { line-height: 1.85; } /* Latin runs inside Arabic text: product names, DOIs, species binomials, code, and above all figures — "0.95–2.56%", "£129.00", "+10,000". `isolate` keeps the bidi algorithm from dragging adjacent neutrals (a sign, a percent, a dash, a currency symbol) to the wrong end of the run. */ [dir="rtl"] .ltr, [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp, [dir="rtl"] var { direction: ltr; unicode-bidi: isolate; } /* Latin text that must stay in the RTL flow but keep its own internal order — e.g. a species name mid-sentence. isolate without a direction flip. */ [dir="rtl"] .bidi-isolate { unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 2. Custom list bullets and counters The pattern throughout style.css is `li { position: relative; padding-left: X }` plus `li::before { position: absolute; left: 0 }`. Both halves have to flip together or the marker lands on top of the text. -------------------------------------------------------------------------- */ [dir="rtl"] .prose li, [dir="rtl"] .blog-post-content li, [dir="rtl"] .flow-list li, [dir="rtl"] .store-feature-list li, [dir="rtl"] .founder-highlights li, [dir="rtl"] .legal-page .prose li, [dir="rtl"] .legal-container li { padding-left: 0; } [dir="rtl"] .prose li { padding-right: 2.5rem; } [dir="rtl"] .blog-post-content li, [dir="rtl"] .legal-page .prose li, [dir="rtl"] .legal-container li { padding-right: 2rem; } [dir="rtl"] .flow-list li, [dir="rtl"] .store-feature-list li { padding-right: 2.1rem; } [dir="rtl"] .founder-highlights li { padding-right: 1.9rem; } [dir="rtl"] .legal-container ol li, [dir="rtl"] .legal-page .prose ol li { padding-left: 0; padding-right: 2.45rem; } /* Markers: every ::before pinned to left:0 moves to right:0. */ [dir="rtl"] .prose li::before, [dir="rtl"] .blog-post-content li::before, [dir="rtl"] .flow-list li::before, [dir="rtl"] .store-feature-list li::before, [dir="rtl"] .founder-highlights li::before, [dir="rtl"] .legal-content ul li::before, [dir="rtl"] .legal-content ol li::before, [dir="rtl"] .legal-container ul li::before, [dir="rtl"] .legal-container ol li::before, [dir="rtl"] .legal-page .prose ul li::before, [dir="rtl"] .legal-page .prose ol li::before { left: auto; right: 0; } /* Numbered step lists: the counter chip is inset from the edge, not flush. */ [dir="rtl"] .blog-step-list li { padding-left: 0; padding-right: 4.6rem; } [dir="rtl"] .blog-step-list li::before { left: auto; right: 1.1rem; } @media (max-width: 700px) { [dir="rtl"] .blog-step-list li { padding-left: 0; padding-right: 3.5rem; } } /* -------------------------------------------------------------------------- 3. Directional borders A left rule becomes a right rule; the matching asymmetric padding and the one-sided border-radius go with it. -------------------------------------------------------------------------- */ [dir="rtl"] .prose blockquote { border-left: 0; border-right: 2px solid var(--black); padding: 1rem 3rem 1rem 0; } [dir="rtl"] .blog-post-content blockquote { border-left: 0; border-right: 4px solid #7e876d; border-radius: 22px 0 0 22px; } /* Column dividers in the proof bars: the divider sits between cells, so it moves to the other edge and the exemption moves to the first child. */ [dir="rtl"] .pro-proof-shell div, [dir="rtl"] .spruce-proof-shell div { border-right: 0; border-left: 1px solid rgba(255, 255, 255, 0.16); } [dir="rtl"] .pro-proof-shell div:last-child, [dir="rtl"] .spruce-proof-shell div:last-child { border-left: 1px solid rgba(255, 255, 255, 0.16); } [dir="rtl"] .pro-proof-shell div:first-child, [dir="rtl"] .spruce-proof-shell div:first-child { border-left: 0; } @media (max-width: 900px) { [dir="rtl"] .pro-proof-shell div, [dir="rtl"] .spruce-proof-shell div, [dir="rtl"] .pro-proof-shell div:last-child, [dir="rtl"] .spruce-proof-shell div:first-child, [dir="rtl"] .spruce-proof-shell div:last-child { border-left: 0; border-right: 0; } } /* -------------------------------------------------------------------------- 4. Text alignment `text-align: left` in the source means "align to the start of the line", so in RTL it becomes right. Alignments that are genuinely physical — a figure that must sit against the trailing edge — flip the other way. -------------------------------------------------------------------------- */ [dir="rtl"] .prose, [dir="rtl"] .vertical-step, [dir="rtl"] header.hero-section, [dir="rtl"] .bottom-wrapper, [dir="rtl"] .store-section-header, [dir="rtl"] .legal-table td, [dir="rtl"] .plate-table td, [dir="rtl"] .plate-table__caption { text-align: right; } /* Spec values are set flush against the trailing edge of their row. */ [dir="rtl"] .plate-card__specs strong { text-align: left; } /* -------------------------------------------------------------------------- 5. Timeline (company history) A centre-spine timeline with cards alternating side to side. The spine is centred with translateX(-50%) so it needs nothing; the alternation and the card tails do. -------------------------------------------------------------------------- */ [dir="rtl"] .timeline__card { text-align: right; } [dir="rtl"] .timeline__item:nth-child(even) .timeline__card { text-align: left; } [dir="rtl"] .timeline__item:nth-child(even) .timeline__card::after { margin-left: 0; margin-right: auto; } @media (max-width: 900px) { /* Single-column mobile layout: the spine moves to the trailing edge and every card aligns the same way again. */ [dir="rtl"] .timeline::before { left: auto; right: 0.7rem; } [dir="rtl"] .timeline__year, [dir="rtl"] .timeline__card, [dir="rtl"] .timeline__item:nth-child(even) .timeline__card { text-align: right; } [dir="rtl"] .timeline__item:nth-child(even) .timeline__card::after { margin-right: 0; margin-left: auto; } } @media (max-width: 600px) { [dir="rtl"] .timeline__card { padding-left: 0; padding-right: 50px; } [dir="rtl"] .timeline__year { left: auto; right: 20px; text-align: right; } } /* -------------------------------------------------------------------------- 6. Decorative absolute positioning Floating cards, badges and chips that are placed against one edge. Purely visual, but they read as broken if they stay put while the text mirrors. `left: 50%` pairs with translateX(-50%) elsewhere and is deliberately not touched — that is centring, not a side. -------------------------------------------------------------------------- */ [dir="rtl"] .chip-one { left: auto; right: 16%; } [dir="rtl"] .chip-two { right: auto; left: 12%; } [dir="rtl"] .chip-three { left: auto; right: 18%; } [dir="rtl"] .spruce-orbit-card.main { left: auto; right: 6%; } [dir="rtl"] .spruce-orbit-card.image { right: auto; left: 0; } [dir="rtl"] .spruce-orbit-card.action { left: auto; right: 0; } [dir="rtl"] .store-product-image span { left: auto; right: 1rem; } [dir="rtl"] .store-free-placeholder__tag { right: auto; left: 13%; transform: rotate(14deg); } [dir="rtl"] .plate-card__badge { left: auto; right: 0.75rem; } /* -------------------------------------------------------------------------- 7. Buttons and navigation -------------------------------------------------------------------------- */ [dir="rtl"] .btn-secondary { margin-left: 0; margin-right: 1rem; } /* The hamburger is pushed to the trailing edge of the bar. */ [dir="rtl"] .site-nav.js-mobile-nav .mobile-nav-toggle { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .nav-lang { margin-left: 0; margin-right: 0.4rem; } /* Hover nudge on nav links travels toward the start of the line. */ [dir="rtl"] .prose-nav a:hover, [dir="rtl"] .footer-links a:hover { padding-left: 0; padding-right: 8px; } /* -------------------------------------------------------------------------- 8. Widgets that must stay physically LTR The before/after image curtain is a geometric widget over two photographs. The photographs are not mirrored, its handle position is written by JS as a physical `left` percentage, and its drag maths reads clientX against rect.left. Mirroring the container would desynchronise the overlay from the handle. Pinning it to LTR keeps it pixel-identical to the other locales and is invisible to the reader — it carries no text, only alt attributes. -------------------------------------------------------------------------- */ [dir="rtl"] .image-curtain-demo { direction: ltr; } /* Tables of figures read better with their numeric columns in a stable order, but the header and label columns must still mirror — so tables themselves flip normally and only genuinely Latin cells opt out via .ltr. */ [dir="rtl"] table { text-align: right; }