/* ==========================================================================
RTL overrides — loaded ONLY for right-to-left locales (currently Arabic).
Wired in each template via:
so left-to-right pages never download or apply any of this.
The base theme is Foundry / Bootstrap 3, whose layout primitives use
physical `float` + `margin-left/right` that the browser does NOT auto-flip
for `dir="rtl"`. This file flips the ones the site actually uses:
the top nav, the 12-col grid + offsets, a few utilities, and swaps in an
Arabic-capable webfont. Selectors are scoped under [dir="rtl"] both to lift
specificity above theme.css/bootstrap.css and as a belt-and-suspenders guard.
========================================================================== */
/* --------------------------------------------------------------------------
1. Typography — Noto Sans Arabic has real Arabic glyphs (Raleway/Lato do
not) and still carries a clean Latin set, so "Remote Mouse" etc. stay
legible. The webfont itself is pulled by a conditional in each
RTL template's (next to the rtl.css link) rather than @import
here — parallel load, and consistent with how the site loads Raleway/
Lato. This file only assigns the family.
-------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3,
[dir="rtl"] .h4, [dir="rtl"] .h5, [dir="rtl"] .h6,
[dir="rtl"] p, [dir="rtl"] .menu li a, [dir="rtl"] .btn {
font-family: "Noto Sans Arabic", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* --------------------------------------------------------------------------
2. Top navigation bar
theme.css floats the logo group left and the menu group right, floats
each menu item left with margin-right spacing, and anchors the dropdown
submenus to the right edge. Mirror all of that.
-------------------------------------------------------------------------- */
[dir="rtl"] .module.left,
[dir="rtl"] .module-group.left { float: right; }
[dir="rtl"] .module.right,
[dir="rtl"] .module-group.right { float: left; }
[dir="rtl"] .menu > li {
float: right;
margin-right: 0;
margin-left: 32px;
}
[dir="rtl"] .menu > li:last-child { margin-left: 0; }
/* Top-level dropdown chevron (the language switcher's "expandable" cue).
theme.css:932 pins it right:0 with padding-right:18px reserving its space.
Under RTL the label right-aligns and would sit on top of a right:0 chevron
— on mobile that chevron is the ONLY hint the row expands, so mirror both
the reserved padding and the chevron to the left. (The nested submenu
chevron is handled separately just below and stays more specific.) */
[dir="rtl"] .has-dropdown { padding-right: 0; padding-left: 18px; }
[dir="rtl"] .has-dropdown:after { right: auto; left: 0; }
/* dropdown submenu (language switcher) — anchor to the opposite edge */
[dir="rtl"] .menu > li:last-child > ul { right: auto; left: 0; }
[dir="rtl"] .menu > li:last-child > ul ul { left: auto; right: 100%; }
[dir="rtl"] .menu > li > ul > li > ul { left: auto; right: 100%; }
[dir="rtl"] .menu > li > ul > .has-dropdown:after { right: auto; left: 24px; }
[dir="rtl"] .menu > li > ul > li i { margin-right: 0; margin-left: 2px; }
/* Mobile hamburger divider (xs nav). The hamburger is a
.module.widget-handle.mobile-toggle, and its border-left is set by several
base rules per nav state: generic .mobile-toggle #ccc (theme.css:1440),
transparent nav white/!important (:1511), transparent.fixed #ccc (:1566),
bg-dark white (:1579), removed when the menu is open (custom.css:213).
Under RTL the hamburger floats to the LEFT edge, so that divider lands on
the page's left margin — mirror it to the right. The .module.widget-handle
qualifier is needed to out-specify the !important transparent rule; the
second block restores the white divider colour on the dark/transparent nav. */
@media (max-width: 990px) {
[dir="rtl"] .module.widget-handle.mobile-toggle {
border-left: none !important;
border-right: 1px solid #ccc !important;
}
/* Intentional RTL-only softening: LTR uses .2 alpha, but the mirrored
hamburger lands over the busier/darker part of the hero photo where the
same divider reads noticeably heavier — dialled down to .15 so it looks
as subtle as the LTR side. Deliberately not symmetric with the LTR value. */
[dir="rtl"] nav.transparent .module.widget-handle.mobile-toggle,
[dir="rtl"] nav.bg-dark .module.widget-handle.mobile-toggle {
border-right-color: rgba(255, 255, 255, 0.15) !important;
}
[dir="rtl"] .nav-open .module.widget-handle.mobile-toggle {
border-right: none !important;
}
}
/* --------------------------------------------------------------------------
3. Grid — Bootstrap 3 floats columns left; float them right so rows read
right-to-left. CRUCIAL: mirror Bootstrap's own per-breakpoint scoping.
Bootstrap floats a column only inside the media query that ALSO gives it
a width (.col-sm-* ≥768, .col-md-* ≥992, .col-lg-* ≥1200); below that the
column is a plain full-width block. A blanket float on a width-less block
makes it shrink-to-fit its content instead of filling the row — that was
collapsing the Downloads macOS/(.dmg) cards to ~343px between 400–767px.
So scope each prefix to the same breakpoint (.col-xs-* floats at all
widths, matching Bootstrap). */
[dir="rtl"] .row > [class*="col-xs-"] { float: right; }
@media (min-width: 768px) { [dir="rtl"] .row > [class*="col-sm-"] { float: right; } }
@media (min-width: 992px) { [dir="rtl"] .row > [class*="col-md-"] { float: right; } }
@media (min-width: 1200px) { [dir="rtl"] .row > [class*="col-lg-"] { float: right; } }
/* --------------------------------------------------------------------------
4. Column offsets — Bootstrap pushes with physical margin-left. Re-map to
margin-right at the same breakpoints/percentages. Only the offset classes
the templates actually use are covered (xs-1, sm-1/2, md-1/2/3).
-------------------------------------------------------------------------- */
[dir="rtl"] .col-xs-offset-1 { margin-left: 0; margin-right: 8.33333333%; }
[dir="rtl"] .col-xs-offset-0 { margin-right: 0; }
@media (min-width: 768px) {
[dir="rtl"] .col-sm-offset-1 { margin-left: 0; margin-right: 8.33333333%; }
[dir="rtl"] .col-sm-offset-2 { margin-left: 0; margin-right: 16.66666667%; }
[dir="rtl"] .col-sm-offset-0 { margin-right: 0; }
}
@media (min-width: 992px) {
[dir="rtl"] .col-md-offset-1 { margin-left: 0; margin-right: 8.33333333%; }
[dir="rtl"] .col-md-offset-2 { margin-left: 0; margin-right: 16.66666667%; }
[dir="rtl"] .col-md-offset-3 { margin-left: 0; margin-right: 25%; }
[dir="rtl"] .col-md-offset-0 { margin-right: 0; }
}
/* --------------------------------------------------------------------------
5. Directional utilities
-------------------------------------------------------------------------- */
/* !important mirrors theme.css:525 `.text-left { text-align: left !important }`
— without it the flip loses to that rule (e.g. the FAQ answer panels, which
wrap the accordion in .tab-content.text-left). */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
/* Inline button spacing: theme.css:742 gaps buttons with margin-right:8px and
zeroes it on :last-child/:last-of-type. Under RTL the row reverses, so the
gap must come from margin-left and the reset must zero margin-left — else
the last button in a group loses its gap (visible as the cramped
Linux/Windows pair in the Get-Now modal). Mirror both rules. */
[dir="rtl"] .btn { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .btn:last-child,
[dir="rtl"] .btn:last-of-type { margin-left: 0; }
[dir="rtl"] .pull-left { float: right; }
[dir="rtl"] .pull-right { float: left; }
/* custom.css .padding60 adds left padding on desktop — mirror to the right */
[dir="rtl"] .padding60 { padding-left: 0; padding-right: 60px; }
@media (max-width: 767px) {
[dir="rtl"] .padding60 { padding-right: 0; }
}
/* index.php inline .qrcode hover panel is pinned right:30px — pin it left */
[dir="rtl"] .qrcode { right: auto; left: 30px; }
/* --------------------------------------------------------------------------
6. "As seen in" press-logo carousel (flexslider). Its slide positioning is
JS-computed against document flow; under dir="rtl" the transform math
runs the wrong way and the slides scroll off-screen (blank strip). The
logos are brand marks with no reading direction, so pin the whole widget
back to LTR rather than flip it — matches the original animation exactly.
-------------------------------------------------------------------------- */
[dir="rtl"] .logo-carousel { direction: ltr; }
/* --------------------------------------------------------------------------
7. .image-edge feature panels (homepage "text + product shot" pairs).
Each text block is position:absolute inside a position:relative
.container. For an absolutely-positioned box with auto left/right, the
browser anchors it to the *inline-start* edge — which flips to the RIGHT
under dir="rtl". That drags the panel whose text belongs on the LEFT
(feature area 2, image on the right) on top of its own image.
These panels are a paired composition (copy beside a matching shot);
mirroring their sides adds nothing, so we keep the LTR arrangement and
only let the Arabic copy read right-to-left. The left-side panel is the
one WITHOUT the theme's `.right` helper — pin it back to the left. The
col width (col-md-5) already caps the text, so right-aligned lines stay
clear of the image instead of running to the page edge.
-------------------------------------------------------------------------- */
[dir="rtl"] .image-edge .container div[class*="col-"]:not(.right) {
left: 0;
right: auto;
}
/* --------------------------------------------------------------------------
8. "More From Us" section (section.image-bg) — text column sits over a
full-bleed background photo whose subject is on the right. Unlike the
grid elsewhere, here we do NOT want the column mirrored to the right:
that would drop the copy on top of the busy side of the image. Keep the
block on the left (as in LTR) and let only the Arabic text run RTL.
Scoped to `section.image-bg` so the two `li.image-bg` hero sliders are
unaffected. Undoes the general .row column float-flip (rule 3) here.
-------------------------------------------------------------------------- */
[dir="rtl"] section.image-bg .row > [class*="col-"] { float: left; }
/* --------------------------------------------------------------------------
9. Downloads hero (.downloads-hero-bg) — same intent as rule 8: the intro
sits beside a centered device photo, with an empty offset column
reserving the photo's space, so mirroring drops the text onto the
devices. But this row is a FLEX container (.row-flex), so the float-flip
(rule 3) doesn't touch it — instead RTL reverses the flex order. Restore
LTR ordering on the container (text back to the right) and keep only the
Arabic text running RTL. Also restore the offset to its LTR side (rule 4
flipped it to margin-right) for this block.
-------------------------------------------------------------------------- */
[dir="rtl"] .downloads-hero-bg .row-flex { direction: ltr; }
[dir="rtl"] .downloads-hero-bg .row-flex > [class*="col-"] { direction: rtl; }
@media (min-width: 768px) {
[dir="rtl"] .downloads-hero-bg .col-sm-offset-1 { margin-left: 8.33333333%; margin-right: 0; }
}