/* ======================================================================== rtl.css — RTL overrides for the 4league marketing site ------------------------------------------------------------------------ Every rule in this file is scoped under [dir="rtl"] (or html[dir="rtl"][lang=…] where higher specificity is needed). A page that does NOT carry dir="rtl" on is unaffected, so the file is harmless if accidentally loaded on an LTR page. Selectors below were chosen by greppingthe live codebase for matching markup and CSS — every override targets a class that is currently used by an .html / .njk template AND has a directional rule in one of the loaded stylesheets. The "legacy template" classes that ship in responsive.css but no longer appear in any markup (.mr16, .pull-*, .extra-left/right, .banner-mock-up, .owl-*, .orange-gred, .purple-red, etc.) were intentionally NOT mirrored — they would be dead overrides. Load order: link this AFTER all other stylesheets so that selector specificity ties resolve in our favor. Sections: 1. Defensive primitives (always-LTR fields, .brand, .ltr) 2. Legal-page navbar (Bootstrap-3 markup in _navbar-legal.njk) 3. Active-locale lang-switcher gradient direction 4. Modern style.css BEM mirroring 5. Do-NOT-mirror resets (logo, store badges, social icons, prices) ======================================================================== */ /* ======================================================================== 1. Defensive primitives — applied globally so even content that escapes semantic markup keeps the right directionality. ======================================================================== */ /* Inputs whose values are intrinsically LTR (emails, phone numbers, URLs) must render LTR even on RTL pages. Same for any element opted-in via the .ltr utility class (used in Task 5 around brand strings, code snippets, version numbers, etc.). */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] .ltr { direction: ltr; text-align: left; } /* Defensive primitive used by Task 5: wraps the "4league" brand string so it stays LTR even if a translated string escapes its wrapper. */ [dir="rtl"] .brand { unicode-bidi: isolate; direction: ltr; } /* ======================================================================== 2. Legal-page navbar ------------------------------------------------------------------------ _navbar-legal.njk (used by Terms.html, PrivacyPolicy.html, delete-account.html) renders a Bootstrap-3 navbar that loads menu.css. Two menu.css rules are direction-sensitive and need mirroring: menu.css:45 .main-menu .navbar-default .navbar-nav>li>a margin: 0px 10px 0px 15px; ← asymmetric menu.css:55 .main-menu .navbar-default .navbar-nav>li>a:after left: 0; ← anchored to start edge The Bootstrap class .navbar-right (markup in _navbar-legal.njk) also floats the collapse to the right edge in LTR; under RTL it should float to the left edge. ======================================================================== */ /* Brand image hugs the right edge under RTL. */ [dir="rtl"] .navbar-default .navbar-brand, [dir="rtl"] a.navbar-brand { float: right; } /* Mirror per-link horizontal margins. */ [dir="rtl"] .main-menu .navbar-default .navbar-nav>li>a { margin: 0px 15px 0px 10px; } /* Mirror the underline pseudo-element so it grows from the right edge. */ [dir="rtl"] .main-menu .navbar-default .navbar-nav>li>a:after { left: auto; right: 0; } /* Bootstrap-3 .navbar-right floats nav to right; flip to left in RTL. .navbar-right also pins margin-right:-15px in Bootstrap-3, undo that. */ [dir="rtl"] .navbar-right { float: left !important; margin-right: 0; margin-left: -15px; } /* ======================================================================== 3. Active-locale lang-switcher gradient ------------------------------------------------------------------------ style.css:662 paints the active locale option with a 90deg gradient (purple on the start edge, red on the end edge). Under RTL the start edge is on the right, so the gradient angle flips to 270deg to keep the same visual color-on-reading-edge. Note: dir="rtl" lives on , so the override has to be a compound attribute selector on the same element (NOT [dir="rtl"] html…, which would search for as a descendant of itself). ======================================================================== */ html[dir="rtl"][lang="ar"] .nav__lang-switcher-option[data-lang="ar"] > a { background: linear-gradient(270deg, #A666EC 0%, #CA492E 96.92%); -webkit-background-clip: text; background-clip: text; } /* ======================================================================== 4. Modern style.css (BEM) mirroring ------------------------------------------------------------------------ Modern marketing pages (home / players / organizations / team-managers / team-rankings / tournaments / app) use a flex/grid stylesheet that naturally mirrors under RTL. The rules below are the ones that pin to a specific left/right edge or hard-code a directional alignment. ======================================================================== */ /* style.css:601 — lang-switcher dropdown menu pinned to right:0 (right edge of the trigger). Under RTL it should hug the left edge instead. */ [dir="rtl"] .nav__lang-switcher-menu { right: auto; left: 0; } /* style.css:590 — caret triangle's offset margin is directional. The triangle shape itself is symmetric (border-left + border-right) so it doesn't need flipping. */ [dir="rtl"] .nav__lang-switcher-caret { margin-left: 0; margin-right: 2px; } /* style.css:1532 / 1554 — pricing toggle knob slides from left edge in LTR. Under RTL it starts on the right edge and slides left. */ [dir="rtl"] .pricing__toggle-switch::after { left: auto; right: 3px; } [dir="rtl"] .pricing__toggle-input:checked ~ .pricing__toggle .pricing__toggle-switch::after { transform: translateX(-24px); } /* style.css:1565 — "Save 20%" badge sits to the right of the yearly label in LTR; flip the gap to the left side under RTL. */ [dir="rtl"] .pricing__save-badge { margin-left: 0; margin-right: 4px; } /* style.css:280, 788, 1764 — reading-edge alignment for left-aligned blocks in modern CSS. */ [dir="rtl"] .store-btn__text, [dir="rtl"] .hero__stat, [dir="rtl"] .pricing-compare__table th, [dir="rtl"] .pricing-compare__table td { text-align: right; } /* ======================================================================== 5. Do-NOT-mirror resets ------------------------------------------------------------------------ The 4league wordmark/logo, social-network glyphs (themify icons used in the legal-page footer), store badges (App Store / Google Play bitmap wordmarks), and numeric content (prices, stats, step numbers) should look identical regardless of page direction. The rules below guard against any future wholesale transform / direction inheritance that could otherwise corrupt them. All selectors below were verified to exist in current markup or in loaded CSS rules. ======================================================================== */ /* Brand marks — never mirror. */ [dir="rtl"] .nav__logo, [dir="rtl"] .nav__logo img, [dir="rtl"] a.navbar-brand img, [dir="rtl"] .store-btn, [dir="rtl"] .store-btn img, [dir="rtl"] .store-badge { transform: none; } /* Themify-icon social glyphs in legal-page footer — never mirror. */ [dir="rtl"] .ti-facebook, [dir="rtl"] .ti-twitter-alt, [dir="rtl"] .ti-youtube { transform: none; } /* Numeric content — keep LTR-flowing so digits and currency symbols stay in the expected reading order. */ [dir="rtl"] .pricing__price, [dir="rtl"] .hero__stat-number, [dir="rtl"] .how-it-works__number { direction: ltr; unicode-bidi: isolate; }