/* ========================================================================== Per-language typography + RTL support. Loaded last on every page (any language) so it can override page-specific stylesheets. Three kinds of rules live here: 1. Font swaps, scoped by [lang="xx"] (the set by resolveLang() in config/i18n.php) — Poppins doesn't cover every script, so languages using one it can't render get their own web font layered in front of it. 2. RTL layout fixes (Arabic and any future right-to-left language), scoped under [dir="rtl"] — set on by i18nDir(). Most of the site's layout (nav, header, footer, hero, cards) is built with flexbox/grid, which is direction-aware by spec: setting `direction: rtl` on automatically mirrors flow order, gaps, and text-align for those without any extra rules. What direction does NOT auto-fix: - absolutely-positioned elements using physical left/right (popovers) - inline SVG arrow/chevron icons whose paths are drawn left-to-right Both are handled explicitly below. Numeric editor inputs (dimensions, bleed value) are deliberately kept LTR — this matches how RTL design tools (CAD software, spreadsheets) typically handle numeric fields, so "163" never risks rendering as "361". 3. Non-English hero heading size cap — the English copy was hand-tuned short to fit a large font size; every translation runs longer, so at the same size it wraps onto 3+ lines and dwarfs the rest of the hero section. Scoped by :root:not([lang="en"]) rather than per language, so it applies uniformly to every current and future translation without needing a new rule each time a language is added. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Noto+Sans+Malayalam:wght@100..900&display=swap"); :root[dir="rtl"], [dir="rtl"] { font-family: Cairo, Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; } :root[lang="ml"], [lang="ml"] { font-family: "Noto Sans Malayalam", Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; } [dir="rtl"] body { direction: rtl; text-align: right; } /* Popovers positioned with physical `right: 0` need to flip to the visual trailing edge (now the left) under RTL — `left`/`right` are not direction-aware. */ [dir="rtl"] .lang-switcher-panel, [dir="rtl"] .download-menu-panel { right: auto; left: 0; } [dir="rtl"] .lang-switcher-panel { transform-origin: top left; } /* Trigger padding is intentionally asymmetric (snug around the badge, looser around the chevron) — under RTL the flex row reverses which side each sits on, so the padding needs to reverse too. */ [dir="rtl"] .lang-switcher-trigger { padding: 3px 3px 3px 8px; } /* `.hero-copy { text-align: left }` in home.css is a physical value, not the direction-aware `start`/`end` — `direction: rtl` does NOT flip left/right text-align on its own, so the hero heading and paragraph stayed pinned to the left edge of their column even after the column itself moved to the right side of the page. */ [dir="rtl"] .hero-copy { text-align: right; } /* Keep numeric fields (dimensions, bleed value) reading left-to-right so digits never reverse; their leading icon / unit chip stay at their designed physical offsets since those are unaffected by `direction`. */ [dir="rtl"] .input-group input, [dir="rtl"] .bleed-input-group input { direction: ltr; } /* Directional arrow/chevron icons — anything whose SVG path visually implies "forward"/"back" in reading order needs mirroring; icons that point up/down or aren't direction-implying (help, more, reset, download tray, dropdown carets) are intentionally left alone. */ [dir="rtl"] .template-browse-arrow { right: auto; left: 17px; } [dir="rtl"] .template-browse-copy h3 { margin: 0 0 8px 34px; } [dir="rtl"] .template-card-copy > span[aria-hidden="true"] { right: auto; left: 16px; } /* home.css has several .hero-copy h1 / .mh-hero h1 rules of equal specificity across breakpoints (one itself !important) — !important here is the only reliable way to win over all of them regardless of viewport width. */ :root:not([lang="en"]) .hero-copy h1 { font-size: clamp(2.15rem, 3vw, 3.2rem) !important; line-height: 1.15 !important; } :root:not([lang="en"]) .mh-hero h1 { font-size: 1.35rem !important; line-height: 1.25 !important; } [dir="rtl"] .home-link svg, [dir="rtl"] a.m-appbar-icon[href="./"] svg, [dir="rtl"] .home-primary-action svg, [dir="rtl"] .mh-cta svg, [dir="rtl"] .home-section-head a svg, [dir="rtl"] .mh-section-head a svg, [dir="rtl"] .community-copy a svg, [dir="rtl"] .mh-community-card a svg, [dir="rtl"] .template-browse-arrow, [dir="rtl"] .template-card-copy span[aria-hidden="true"], [dir="rtl"] .mt-card-chevron, [dir="rtl"] .m-export-chevron, [dir="rtl"] .settings-chevron { transform: scaleX(-1); } /* The workflow step arrow is positioned with physical `right` and also carries its own `translateY(-50%)` for vertical centering (unlike the other mirrored icons above) — the mirror transform must be combined with that, not replace it, and the arrow needs to move to the left edge since under RTL "next" points left. */ [dir="rtl"] .workflow-card:not(:last-child)::after { right: auto; left: -3.05rem; transform: translateY(-50%) scaleX(-1); } /* Bug-report modal (ui-refresh.css): the hero icon badge is a normal flex child so it already moves to the right under RTL (first DOM child = "start" = right edge in a mirrored row), but the decorative paper-plane and the close button are both `position: absolute` with a physical `right` offset, which direction can't auto-flip — left unfixed, they stay stacked on the same right edge as the now-mirrored icon badge instead of moving to the opposite side. */ [dir="rtl"] .dl-bug-hero { padding: 22px 22px 20px 52px; } [dir="rtl"] .dl-bug-hero__deco { right: auto; left: 72px; } [dir="rtl"] .dl-bug-hero .dl-bug-dialog__close { right: auto; left: 14px; } /* Same physical-offset issue on every field's leading icon (mail, bug/issue-type) — pinned to the left, but the label above and the input's own text sit right-aligned, so the icon needs to move to the right (the leading edge under RTL) to match. */ [dir="rtl"] .dl-bug-input-icon > svg { left: auto; right: 11px; } [dir="rtl"] .dl-bug-input-icon input, [dir="rtl"] .dl-bug-input-icon select { padding-left: 11px; padding-right: 33px; }