/* ========================================================= SWS Front (platform homepage simwebshop.loc) — RTL overrides --------------------------------------------------------- Loaded conditionally by _layout/_common/header.php when . Bootstrap-rtl already covers grid/nav/forms; this file handles the platform-specific custom blocks (timeline, docs sidebar, tabs-for-carousel) not covered there. ========================================================= */ /* --------------------------------------------------------- 1) Tabs-for-carousel — homepage feature tabs --------------------------------------------------------- */ body.is-rtl #tabs-for-carousel .nav-tabs > li { margin-left: 0; margin-right: 14%; } /* --------------------------------------------------------- 2) CarouselItem marker bar (img acts as a 44×3 underline) The inline AR fix in header.php already does float:right. Add the asymmetric padding flip so text aligns under the bar. --------------------------------------------------------- */ body.is-rtl .col-lg-3.CarouselItem { padding-left: 0; padding-right: 30px; } @media (max-width: 415px) { body.is-rtl .col-lg-3.CarouselItem { padding-left: 30px; padding-right: 30px; } } /* --------------------------------------------------------- 3) Docs sidebar — left accent bar on hover/active --------------------------------------------------------- */ body.is-rtl nav.docs-sidebar ul li a:hover, body.is-rtl nav.docs-sidebar ul li a.active { border-left: 0; border-right: 3px solid #1d8dbb; } /* --------------------------------------------------------- 4) Timeline (vertical timeline component) The whole geometry mirrors. Spine + badge column move from left:5% to right:5%. Default and inverted panel arrows swap (default panel arrow points right→left; inverted points left→right). --------------------------------------------------------- */ body.is-rtl .timeline:before { left: auto; right: 5%; margin-left: 0; margin-right: -1.5px; } body.is-rtl .timeline > li > .timeline-panel { float: right; } body.is-rtl .timeline > li:not(.timeline-inverted) { padding-right: 0; padding-left: 90px; } body.is-rtl .timeline > li.timeline-inverted { padding-left: 0; padding-right: 90px; } body.is-rtl .timeline > li.timeline-inverted > .timeline-panel { float: left; } /* Default panel arrow: was right:-15px (points right). Flip to left:-15px. */ body.is-rtl .timeline > li > .timeline-panel:before { right: auto; left: -15px; border-left-width: 0; border-right-width: 15px; border-left-color: transparent; border-right-color: #ccc; } body.is-rtl .timeline > li > .timeline-panel:after { right: auto; left: -14px; border-left-width: 0; border-right-width: 14px; border-left-color: transparent; border-right-color: #fff; } /* Inverted panel arrow: was left:-15px (points left). Flip to right:-15px. */ body.is-rtl .timeline > li.timeline-inverted > .timeline-panel:before { left: auto; right: -15px; border-right-width: 0; border-left-width: 15px; border-right-color: transparent; border-left-color: #ccc; } body.is-rtl .timeline > li.timeline-inverted > .timeline-panel:after { left: auto; right: -14px; border-right-width: 0; border-left-width: 14px; border-right-color: transparent; border-left-color: #fff; } /* Center-axis badge */ body.is-rtl .timeline > li > .timeline-badge { left: auto; right: 5%; margin-left: 0; margin-right: -25px; } /* --------------------------------------------------------- 5) Plans pricing superscript "$" --------------------------------------------------------- */ body.is-rtl #plans span.sup { margin-right: 0; margin-left: -8px; } /* --------------------------------------------------------- 6) Header buttons asymmetric margins --------------------------------------------------------- */ body.is-rtl .btn-default { margin-left: 30px; margin-right: 10px; }