/* ZASK — RTL layout stylesheet. Scope: every page is now an independent static file (no build step, no shared partials - each page has its own copy of the header/footer markup). This file is shared by reference: any page that links it AND sets dir="rtl" on its tag gets these fixes; a page that doesn't link it, or doesn't set dir="rtl", is completely unaffected. Every rule below is guarded by the html[dir="rtl"] attribute for exactly that reason. This file does not translate or add content, remove any section, or change section order. It only corrects physical (left/right) CSS values that Tailwind's compiled utilities and this template's custom menu/header CSS use, so content lays out correctly in a right-to-left direction. Two kinds of rules live here: - Shared-component fixes (sections 1-8 below): target the header/nav/ dropdowns/mobile-drawer/marquee/footer markup that's copied verbatim into every page, so they apply automatically to ANY page using that same markup, with no extra work. - Page-specific content fixes (further down, one section per page): target a given page's own unique sections, scoped through an ID/class specific enough to that page's markup that it cannot match on other pages by accident. Layout systems that are direction-aware by spec (CSS Grid and Flexbox auto-placement, plus normal inline text flow) already mirror correctly under dir="rtl" without any rule here. Rather than leaving that implicit, section 3 below makes the header's 3-zone order an explicit `order` assignment (not just inherited direction), so the zone sequence is guaranteed and self-documenting regardless of DOM order elsewhere. */ /* -------------------------------------------------------------------- 1. Base direction -------------------------------------------------------------------- */ html[dir="rtl"] { direction: rtl; } /* -------------------------------------------------------------------- 1b. Brand and integrations marquees — isolate from page direction The jQuery Marquee plugin (js/vendors.min.js) builds a plain block div hundreds of thousands of pixels wide to hold the looping content, with no margin set on it. Per the CSS2.1 box model, when a block box's width plus margins cannot fit its container ("over-constrained"), the browser resolves it by pinning the box to the container's direction-start edge and discarding the other margin - the box is pinned to the LEFT under direction:ltr (the normal, intended behavior: content starts at the left edge, overflow clipped on the right), but pinned to the RIGHT under direction:rtl instead. Since this container's actual logo content sits near the wrapper's own left edge (they are floated left by the plugin) while the wrapper's far right edge is what lands in view, the visible clipped window under RTL ends up showing empty filler space instead of the logos - they are not gone, just positioned entirely out of view. This plugin has no RTL awareness of its own (unlike Owl Carousel, which is handled separately via its own documented `rtl` option), so the fix is to isolate just these three containers back to direction: ltr - they hold only images and short English brand/tool names, so this has no effect on readability, and nothing outside these three elements is affected. */ html[dir="rtl"] .loop_carousel_left, html[dir="rtl"] .loop_carousel_right, html[dir="rtl"] .loop_carousel_brands { direction: ltr; } /* In the Brands & Customers strip, overflow-hidden sits directly on .loop_carousel_brands (already covered above). Everywhere else on the site (Integrations, and the Value Proposition / Benefits horizontal strips), each loop_carousel_left/_right sits inside a separate OUTER div that carries overflow-hidden instead - that outer div needs the same isolation, for the same reason. This used to be scoped to "#integrations .overflow-hidden" only, which broke the very next place this same outer-wrapper pattern got reused (the two new horizontal strips - their .overflow-hidden wrapper wasn't covered, so the exact same bug came back: the whole strip landing outside its own clipped view, invisible). Scoped with :has() instead now, so it automatically covers any current or future overflow-hidden wrapper around a loop_carousel_* element, regardless of what page or what other classes/IDs it carries. */ html[dir="rtl"] .overflow-hidden:has(> .loop_carousel_left), html[dir="rtl"] .overflow-hidden:has(> .loop_carousel_right), html[dir="rtl"] .overflow-hidden:has(> .loop_carousel_brands) { direction: ltr; } /* -------------------------------------------------------------------- 2. Hero — decorative background shape (absolute, physical left-offset in the source markup) -------------------------------------------------------------------- */ html[dir="rtl"] #hero > .absolute.-z-1 { left: auto; right: -10%; } @media (width >= 48rem) { html[dir="rtl"] #hero > .absolute.-z-1 { right: 0; } } @media (width >= 62rem) { html[dir="rtl"] #hero > .absolute.-z-1 { right: 12%; } } /* -------------------------------------------------------------------- 3. Header — explicit 3-zone order (Logo | Nav | CTA) The header is built as 3 real flex siblings (.zask-logo-zone, .wsmenu, .zask-cta-zone) inside .wsmainwp. Rather than depending only on the interaction between inherited direction and default DOM order, each zone's position is set explicitly via `order`, so the sequence is guaranteed no matter what. Result: Logo sits at the RTL reading-start side (right), CTA at the opposite (left), Nav fills the space between. -------------------------------------------------------------------- */ @media (width >= 62rem) { html[dir="rtl"] .zask-logo-zone { order: 1; margin-right: 0; margin-left: 3.5rem; } html[dir="rtl"] .wsmenu { order: 2; } html[dir="rtl"] .zask-cta-zone { order: 3; } /* Explicit reversal of the nav links themselves (Solutions, Products, Projects, Company, Resources), for the same reason as above: rather than depending only on inherited direction to flip .wsmenu-list's flex order, force it directly so the sequence reads correctly from the right (Solutions, nearest the logo) to the left (Resources, nearest the CTA) regardless of any other interaction. Each item's own content, dropdown/mega-menu panel, and hover behavior are untouched - only the container's main-axis order is reversed. */ html[dir="rtl"] .wsmenu-list { flex-direction: row-reverse; } } /* -------------------------------------------------------------------- 4. Solutions mega-menu The panel is intentionally centered under the header (left:50% + translateX(-50%), from Stage 9's own design, matching the approved reference) - centering is direction-agnostic and stays correct as-is under RTL, so it is NOT changed here. What DOES need to flip is the column divider: the 4-column grid auto-mirrors under RTL (CSS Grid respects `direction` for auto-placement), so the divider that used to sit on each column's left (separating it from the column before it) must move to its right to still sit between the same pair of columns. Category label, item icons and item labels use gap-based spacing (direction-agnostic) and are unaffected. -------------------------------------------------------------------- */ @media (width >= 62rem) { html[dir="rtl"] .zask-solutions-panel .magamenu_links { padding-right: 0; padding-left: 1rem; } html[dir="rtl"] .zask-solutions-panel .magamenu_links + .magamenu_links { border-left: none; border-right: 1px solid #edeef2; padding-left: 0; padding-right: 2.5rem; } } /* -------------------------------------------------------------------- 5. Company / Resources dropdowns menu.css hard-codes text-align:left and an asymmetric hover-padding nudge on .sub-menu items; this rule is unguarded by breakpoint in menu.css, so it reaches both the desktop popup and the mobile slide-down accordion version of the same markup - the fix below is left unguarded too, to match. The dropdown panel itself has no left/right of its own in menu.css (it self-positions from its trigger
  • 's static position), so no positioning override is needed for "opening direction" - it already follows its trigger, which is itself correctly reordered by section 3 above. -------------------------------------------------------------------- */ html[dir="rtl"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { text-align: right; } html[dir="rtl"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover { padding: 11px 15px 11px 5px; } /* -------------------------------------------------------------------- 6. Mobile menu toggle and slide-out drawer menu.css opens the mobile drawer from the right. The drawer panel (.wsmenu-list, width:350px) is positioned using a classic auto-margin slide trick: margin-left is left at its inherited "auto" (from the desktop rule's `margin: 0 auto 0 auto`, never reset by the mobile rule), while margin-right toggles between -350px (closed - the auto margin-left absorbs the rest of the space, pushing the panel fully off the right edge) and 0 (open - flush against the right edge). Mirroring this for a left-opening drawer means keeping the SAME "one side auto, one side toggled" shape, just swapped: margin-RIGHT must be set to `auto` explicitly here (nothing upstream sets it to auto for us), while margin-left toggles between -350px and 0. Setting BOTH margins to definite values (as an earlier pass here mistakenly did) makes the box over-constrained, and per the CSS2.1 resolution rule for that case, the browser then discards margin-LEFT specifically when direction is rtl - silently overriding whatever this file said and breaking the slide entirely. Using `auto` avoids that rule firing at all. The mobile header bar's own squeeze-out-of-the-way effect (.wsactive .wsmobileheader) only works because it shares the drawer's `right:0` anchor - margin-right there directly retreats the bar's right edge inward. Mirroring it needs the anchor itself flipped to `left:0` first, or the mirrored margin-left has no visible effect (the free "right" offset just absorbs it instead of moving anything). Toggle icon: same size and spacing as the original template, mirrored left-for-right - not a redesigned/simplified version of it. Original: margin: 7px 0 0 15px; padding: 16px 35px 16px 0; (top/right/bottom/left) Mirrored here by swapping the right and left values in each shorthand, with every number unchanged. */ @media (max-width: 991px) { html[dir="rtl"] .wsanimated-arrow { right: auto; left: 0; margin: 25px 0px 0 15px; padding: 16px 0 16px 35px; } html[dir="rtl"] .wsmenu { right: auto; left: 0; } html[dir="rtl"] .wsmenu > .wsmenu-list { margin-left: -350px; margin-right: auto; } html[dir="rtl"] .wsactive .wsmenu > .wsmenu-list { margin-left: 0; } html[dir="rtl"] .wsmobileheader { right: auto; left: 0; } html[dir="rtl"] .wsactive .wsmobileheader { margin-right: 0; margin-left: 350px; } html[dir="rtl"] .wsactive .wsmenucontainer { margin-right: 0; margin-left: 300px; } html[dir="rtl"] .overlapblackbg { left: auto; right: 0; } html[dir="rtl"] .wsmenu > .wsmenu-list > li > a { text-align: right; } /* Mobile logo: same size and top margin as the original template (mt-6.25, max-h-8 - untouched, not resized). Only the horizontal padding side is mirrored, since that's the one physical value that actually depends on which edge the logo sits near. */ html[dir="rtl"] .smllogo { padding-left: 0; padding-right: 1rem; } } /* -------------------------------------------------------------------- 7. Digital Products — "Explore Product" button Flex-reversed under RTL, so the icon now sits to the left of the label; its physical left margin and its glyph direction both need to flip to read correctly. -------------------------------------------------------------------- */ html[dir="rtl"] #products .ml-2 { margin-left: 0; margin-right: 0.5rem; } html[dir="rtl"] #products .flaticon-right-arrow { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------------------- 8. List bullet indentation Tailwind's `ml-4` on list-disc elements reserves indentation space on the physical left for the bullet; under RTL the bullet renders on the right, so the reserved space must move to the right as well. -------------------------------------------------------------------- */ html[dir="rtl"] ul.list-disc.ml-4 { margin-left: 0; margin-right: 1rem; } /* -------------------------------------------------------------------- 9. Integrations — tool name label next to each logo `.flex items-center` reverses under RTL, moving the name label to the left of the logo; its physical left margin must move with it. -------------------------------------------------------------------- */ html[dir="rtl"] #integrations .ml-3 { margin-left: 0; margin-right: 0.75rem; } @media (width >= 36rem) { html[dir="rtl"] #integrations .sm\:ml-4 { margin-left: 0; margin-right: 1rem; } } /* -------------------------------------------------------------------- 10. Testimonials — quote icon position + author name next to avatar -------------------------------------------------------------------- */ html[dir="rtl"] #reviews .absolute.right-7 { right: auto; left: 1.75rem; } html[dir="rtl"] #reviews .ml-3 { margin-left: 0; margin-right: 0.75rem; } @media (width >= 25.875rem) { html[dir="rtl"] #reviews .xs\:ml-4 { margin-left: 0; margin-right: 1rem; } } /* -------------------------------------------------------------------- 11. "New Customers" stat card — menu icon in the top corner -------------------------------------------------------------------- */ html[dir="rtl"] .absolute.-top-2.right-0 { right: auto; left: 0; } /* -------------------------------------------------------------------- 12. FAQs — "more questions" text/button row Becomes a flex row at md+, reversing the button to the left of the text; the accordion's own list-disc item (Q3) is covered by rule 8. -------------------------------------------------------------------- */ @media (width >= 48rem) { html[dir="rtl"] #faqs .md\:ml-8 { margin-left: 0; margin-right: 2rem; } html[dir="rtl"] #faqs .md\:text-left { text-align: right; } } /* -------------------------------------------------------------------- 13. Blog — share icon cluster on each card -------------------------------------------------------------------- */ html[dir="rtl"] #blog .absolute.right-4 { right: auto; left: 1rem; } /* -------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------- */ @media (width >= 62rem) { html[dir="rtl"] footer .xl\:pl-10 { padding-left: 0; padding-right: 2.5rem; } html[dir="rtl"] footer .lg\:pr-5 { padding-right: 0; padding-left: 1.25rem; } } @media (width >= 48rem) { html[dir="rtl"] .footer-copyright.md\:text-left { text-align: right; } } /* ====================================================================== PAGE: web-development.html Its shared header/nav/dropdowns/mobile-drawer/footer are already covered by the shared-component sections above (same markup, same classes). A few of its content sections happen to reuse the exact same IDs/classes as the homepage's own sections (#reviews' review- author flex gap, #faqs' "more questions" row, footer's lg:pr-5) and are already fixed by the rules above without any page-specific scoping needed. What follows are the fixes specific to sections that only exist on this page, or that reuse an ID with different classes. ====================================================================== */ /* Hero - text alignment override. (Its former badge, email quick-form and .hero-12 background-image class were removed during content integration and the Hero-background-parity pass, so the rules that used to target them here are gone too - this is the one still-present piece.) */ @media (width >= 62rem) { html[dir="rtl"] #hero .lg\:text-left { text-align: right; } } /* Features (icon + text pairs, xl:flex) - the section has no ID of its own, but these two exact utility combinations only occur here on this page, so no extra scoping wrapper is needed. */ @media (width >= 75rem) { html[dir="rtl"] .xl\:text-left { text-align: right; } html[dir="rtl"] .xl\:ml-6 { margin-left: 0; margin-right: 1.5rem; } } /* Benefits section (check-icon + text rows) */ html[dir="rtl"] #benefits .ml-2\.5 { margin-left: 0; margin-right: 0.625rem; } /* "Endless Possibilities" text+image block: the outer whitesmoke box and its inner text wrapper carry large one-sided padding (pl-3.5 through xl:pl-20 / pr-3.5 through xl:pr-10) meant as a gutter toward the image column. Same low-priority cosmetic case as the homepage's img-block/ txt-block padding (intentionally left as-is there too): the 2-column grid itself already mirrors correctly under RTL, so skipping this only leaves a bit of unused padding on the wrong side rather than any actual content or functional break - not fixed here for the same reason, to avoid a partial, breakpoint-incomplete fix. */ /* How It Works / Process is now a text-center, direction-agnostic big- number step grid (see the content-to-design revision) - no icon/text flex rows left to flip, and divide-x uses logical border-inline properties already, so no RTL rule is needed here at all. The Testimonials and Awards Badges sections that used to need rules here were removed in an earlier content-integration pass; those rules are gone too. */ /* Footer links wrapper - this page uses xl:pl-14 (the homepage uses xl:pl-10, already handled above); same fix, different value. */ @media (width >= 75rem) { html[dir="rtl"] footer .xl\:pl-14 { padding-left: 0; padding-right: 3.5rem; } }