/* ============================================================ STICKR LAB — right-to-left layout Activated by dir="rtl" on (set in main.js). Most of the layout already uses logical properties, so this file only fixes what direction-agnostic CSS cannot cover. ============================================================ */ [dir="rtl"] body { direction: rtl; } [dir="rtl"] .ticker__track, [dir="rtl"] .strip__track { animation-name: slide-right; } @keyframes slide-right { from { transform: translateX(0); } to { transform: translateX(50%); } } [dir="rtl"] .ticker__item, [dir="rtl"] .spec-row dd, [dir="rtl"] .material-card__sub, [dir="rtl"] .hero__meta, [dir="rtl"] .kicker { direction: rtl; } /* Arrow-like glyphs need mirroring since they are text, not icons */ [dir="rtl"] .price-card ul li::before { content: "←"; } [dir="rtl"] .bento-card__arrow { transform: scaleX(-1); } [dir="rtl"] .bento-card__arrow:hover { transform: scaleX(-1) rotate(-45deg); } [dir="rtl"] .to-top svg, [dir="rtl"] .nav__caret { transform: scaleX(-1); } [dir="rtl"] .nav__item.is-open .nav__caret { transform: scaleX(-1) rotate(180deg); } /* Drawer slides in from the left in RTL */ [dir="rtl"] .drawer { transform: translateX(-110%); } [dir="rtl"] .drawer.is-open { transform: none; } [dir="rtl"] .drawer a.is-sub { padding-inline-start: 16px; } /* Cards whose corner treatment is directional */ [dir="rtl"] .wall-item--4 { border-radius: 4px 18px 4px 18px; } /* Sticker collage mirrors as a whole so the composition still reads */ [dir="rtl"] .hero__stage { transform: scaleX(-1); } [dir="rtl"] .hero__stage .sticker, [dir="rtl"] .hero__stage .sticker__round { transform: scaleX(-1); } [dir="rtl"] .sticker--a { transform: scaleX(-1) rotate(-7deg); } [dir="rtl"] .sticker--b { transform: scaleX(-1) rotate(4deg); } [dir="rtl"] .sticker--c { transform: scaleX(-1) rotate(8deg); } [dir="rtl"] .sticker--d { transform: scaleX(-1) rotate(-3deg); } [dir="rtl"] .sticker--e { transform: scaleX(-1) rotate(6deg); } [dir="rtl"] .cta__panel::after { inset-inline-start: -60px; inset-inline-end: auto; } [dir="rtl"] .footer-bottom nav { flex-direction: row-reverse; } [dir="rtl"] .newsletter-form { flex-direction: row; }