/* * RTL (Right-to-Left) Stylesheet * Applied when is active. * Provides directional overrides that Tailwind's rtl: prefix cannot cover. */ /* ============================================================= Spacing ============================================================= */ /* Reverses horizontal flex spacing */ html[dir="rtl"] .rtl-space-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } /* Removes left padding added for the LTR nav divider */ html[dir="rtl"] .rtl-pl-0 { padding-left: 0; } /* Adds right padding equivalent to Tailwind pr-6 */ html[dir="rtl"] .rtl-pr-6 { padding-right: 1.5rem; } /* Adds right padding equivalent to Tailwind pr-16 */ html[dir="rtl"] .rtl-pr-16 { padding-right: 4rem; } /* ============================================================= Borders & Dividers ============================================================= */ /* Switches the nav divider border from left to right side */ html[dir="rtl"] .rtl-border-switch { border-left-width: 0; border-right-width: 1px; } /* Reverses horizontal divide border direction */ html[dir="rtl"] .rtl-divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } /* ============================================================= Positioning ============================================================= */ /* Positions element 1.5rem from the right */ html[dir="rtl"] .rtl-right-6 { right: 1.5rem; } /* Clears left: auto positioning */ html[dir="rtl"] .rtl-left-auto { left: auto; } /* Positions element at the right edge */ html[dir="rtl"] .rtl-right-0 { right: 0; } /* ============================================================= Transforms & Animations ============================================================= */ /* Rotates an element 180° for icon mirroring */ html[dir="rtl"] .rtl-rotate-180 { transform: rotate(180deg); } /* Reverses the hero CTA arrow direction on hover */ html[dir="rtl"] .group:hover .rtl-group-hover-translate-x { transform: translateX(-0.5rem) rotate(180deg); } /* Reverses the about page row hover arrow */ html[dir="rtl"] .group\/row:hover .rtl-group-hover-row-translate-x-4 { transform: translateX(-1rem); } /* Mirrors an element horizontally */ html[dir="rtl"] .rtl-scale-x-100 { transform: scaleX(-1); } /* ============================================================= Responsive — md breakpoint (768px+) ============================================================= */ @media (min-width: 768px) { /* Right-aligns text at md breakpoint */ html[dir="rtl"] .rtl-md-text-right { text-align: right; } /* Positions element 2rem from the right at md breakpoint */ html[dir="rtl"] .rtl-md-right-8 { right: 2rem; } /* Adds right padding equivalent to Tailwind pr-24 at md breakpoint */ html[dir="rtl"] .rtl-md-pr-24 { padding-right: 6rem; } }