/* ========================================================= Books & Cloud — RTL overrides Loaded only when (i.e. Arabic mode). Strategy: we don't rewrite style.css — we scope overrides under html[dir="rtl"] and flip the directional properties that actually matter for layout. ========================================================= */ /* ---------- Typography: swap Latin serif/sans for Arabic equivalents ---------- - Amiri: classical Arabic serif, the Arabic analogue of Playfair Display - Cairo: modern Arabic geometric sans, pairs well with Montserrat We apply these via body + heading selectors so existing CSS variables don't need to change. */ html[dir="rtl"] body { font-family: 'Amiri', 'Cairo', 'Segoe UI', Tahoma, sans-serif; /* Slightly larger size — Arabic letters read smaller visually than Latin */ font-size: 19px; line-height: 1.85; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .logo-text, html[dir="rtl"] .preloader-tag, html[dir="rtl"] blockquote, html[dir="rtl"] .hero h1, html[dir="rtl"] .section h2, html[dir="rtl"] .section-head h2 { font-family: 'Amiri', 'Playfair Display', 'Cormorant Garamond', serif; /* Amiri runs tight — open it up a touch */ letter-spacing: 0; line-height: 1.3; } html[dir="rtl"] .label-micro, html[dir="rtl"] .subtitle, html[dir="rtl"] .section-head .subtitle, html[dir="rtl"] .catalog-id, html[dir="rtl"] .announcement-banner .label { font-family: 'Cairo', 'Montserrat', sans-serif; /* Arabic labels don't benefit from tracking the way Latin small-caps do */ letter-spacing: 0; } html[dir="rtl"] .btn-gold, html[dir="rtl"] .btn-ghost, html[dir="rtl"] .btn-outline, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: 'Cairo', 'Montserrat', sans-serif; } /* Arabic tends to feel "too loose" if the global letter-spacing is still tuned for Latin display type — reset it on anything that might have it. */ html[dir="rtl"] * { letter-spacing: 0 !important; } /* ---------- Alignment & flow ---------- */ html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .site-main, html[dir="rtl"] .container, html[dir="rtl"] .hero-inner, html[dir="rtl"] .manifesto-inner { text-align: right; } /* ---------- Header layout ---------- The header is already flex; we just need the items to line up in the RTL order. `flex-direction: row-reverse` on the main-nav doesn't feel right (links end up in reverse word order too). Instead, we rely on `dir="rtl"` propagating naturally — we only flip the pieces that are hard-coded with margin/padding to a specific side. */ html[dir="rtl"] .header-inner { direction: rtl; } html[dir="rtl"] .main-nav { direction: rtl; } html[dir="rtl"] .main-nav a { margin-right: 0; margin-left: 0; } /* Search form — the icon is baked on the right in LTR; move it to the left */ html[dir="rtl"] .search-form input { padding-right: 14px; padding-left: 38px; text-align: right; } html[dir="rtl"] .search-form button { right: auto; left: 4px; } /* User dropdown — anchor to the left (was right in LTR) */ html[dir="rtl"] .user-menu .dropdown { right: auto; left: 0; text-align: right; } /* Header actions gap preservation */ html[dir="rtl"] .header-actions { direction: rtl; } /* Mobile menu button pops out to the left in RTL */ html[dir="rtl"] .mobile-menu-btn { margin-right: auto; margin-left: 0; } /* ---------- Logo ---------- The logo has three s — "Books" "&" "Cloud" — and we WANT those in visual left-to-right order even in Arabic mode (brand name stays English). Force ltr direction on the logo only. */ html[dir="rtl"] .logo, html[dir="rtl"] .logo-text, html[dir="rtl"] .footer-logo { direction: ltr; unicode-bidi: isolate; } /* ---------- Announcement banner ---------- The scroll-track runs left-to-right via a keyframe animation in style.css. In RTL we want it to scroll the other way so items still read "in order". */ html[dir="rtl"] .scroll-inner { animation-direction: reverse; } html[dir="rtl"] .announcement-banner .label { margin-left: 12px; margin-right: 0; } html[dir="rtl"] .announcement-banner .see-all { margin-right: auto; margin-left: 0; } /* ---------- Cart drawer ---------- In LTR the drawer slides in from the right. In RTL it feels more natural to slide in from the left. */ html[dir="rtl"] .cart-drawer { right: auto; left: 0; transform: translateX(-100%); } html[dir="rtl"] .cart-drawer.open { transform: translateX(0); } html[dir="rtl"] .cart-drawer-header, html[dir="rtl"] .cart-drawer-body, html[dir="rtl"] .cart-drawer-footer { text-align: right; } html[dir="rtl"] .cart-item { direction: rtl; } html[dir="rtl"] .cart-item img { margin-right: 0; margin-left: 14px; } html[dir="rtl"] .ci-line-total { text-align: left; } /* Cart count badge — nudge to the other side */ html[dir="rtl"] .cart-btn .cart-count { right: auto; left: -6px; } /* ---------- Book card ---------- */ html[dir="rtl"] .book-meta { text-align: right; } html[dir="rtl"] .book-back .back-cta { flex-direction: row-reverse; } /* ---------- Buttons with trailing arrows / glyphs ---------- "Enter the Collection ↳", "See all →" etc. In Arabic we use ← but the browser's own BiDi algorithm handles most of this. We just need to keep button content from misaligning. */ html[dir="rtl"] .btn-gold, html[dir="rtl"] .btn-ghost, html[dir="rtl"] .btn-outline, html[dir="rtl"] .view-all { letter-spacing: 0; } /* ---------- Book detail page ---------- */ html[dir="rtl"] .book-detail { direction: rtl; } html[dir="rtl"] .book-detail .actions { flex-direction: row-reverse; justify-content: flex-end; } html[dir="rtl"] .book-detail .description { text-align: right; } html[dir="rtl"] .book-detail blockquote, html[dir="rtl"] .book-detail p[style*="border-left"] { /* swap the gold left border for a right border on the summary pull-quote */ border-left: none !important; border-right: 3px solid var(--gold) !important; padding-left: 0 !important; padding-right: 16px !important; } /* About page pull-quote (gold accent line) — flip side */ html[dir="rtl"] .section [style*="border-left"] { border-left: none !important; border-right: 4px solid var(--gold) !important; } /* ---------- Forms ---------- */ html[dir="rtl"] .form-field label, html[dir="rtl"] .form-field input, html[dir="rtl"] .form-field textarea, html[dir="rtl"] .form-field select { text-align: right; } html[dir="rtl"] .form-field input, html[dir="rtl"] .form-field textarea { direction: rtl; } /* Phone and email fields stay LTR even in Arabic (contents are ASCII) */ html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; /* sits at the right edge of the field */ } /* ---------- Checkout ---------- */ html[dir="rtl"] .cart-total { direction: rtl; } html[dir="rtl"] .cart-total span:last-child { text-align: left; } /* ---------- Profile ---------- */ html[dir="rtl"] .profile-hero, html[dir="rtl"] .profile-hero-inner { direction: rtl; } html[dir="rtl"] .profile-meta { text-align: right; } html[dir="rtl"] .edit-profile-btn { right: auto; left: -6px; } html[dir="rtl"] .stats-grid { direction: rtl; } html[dir="rtl"] .stat-card { text-align: right; } html[dir="rtl"] .profile-tabs { direction: rtl; } html[dir="rtl"] .feed-composer, html[dir="rtl"] .feed-post { direction: rtl; text-align: right; } html[dir="rtl"] .feed-post-head { flex-direction: row-reverse; } html[dir="rtl"] .feed-post-head .mini-avatar { margin-left: 12px; margin-right: 0; } html[dir="rtl"] .post-actions { margin-left: 0; margin-right: auto; } html[dir="rtl"] .feed-post-book { flex-direction: row-reverse; } html[dir="rtl"] .feed-post-book img { margin-right: 0; margin-left: 12px; } html[dir="rtl"] .composer-row { direction: rtl; } html[dir="rtl"] .composer-actions { flex-direction: row-reverse; } html[dir="rtl"] .char-counter { direction: ltr; } /* "12 / 600" stays LTR */ html[dir="rtl"] .star-picker .star { direction: ltr; } /* stars render consistently */ html[dir="rtl"] .order-card { direction: rtl; } html[dir="rtl"] .order-amount { text-align: left; } html[dir="rtl"] .order-meta { direction: rtl; } html[dir="rtl"] .order-id, html[dir="rtl"] .order-amount, html[dir="rtl"] .status-badge { direction: ltr; unicode-bidi: isolate; } /* Favorites carousel — scroll direction flips naturally with dir=rtl; just make sure the nav buttons swap their icons' intent. */ html[dir="rtl"] .fav-prev, html[dir="rtl"] .fav-next { transform: scaleX(-1); } /* ---------- Shelf tabs ---------- */ html[dir="rtl"] .shelf-tabs { direction: rtl; } /* ---------- Footer ---------- */ html[dir="rtl"] .footer-inner { direction: rtl; } html[dir="rtl"] .footer-col { text-align: right; } html[dir="rtl"] .footer-col a { direction: rtl; } html[dir="rtl"] .footer-bottom { direction: rtl; } /* ---------- Language switcher in header ---------- */ html[dir="rtl"] .lang-menu .dropdown { right: auto; left: 0; } /* ---------- Prices, catalog numbers, order IDs ---------- */ /* Numbers should stay left-to-right (that's universal in Arabic typography). */ html[dir="rtl"] .price-lg, html[dir="rtl"] .book-meta .p, html[dir="rtl"] .ci-price, html[dir="rtl"] .ci-line-total, html[dir="rtl"] .catalog-id, html[dir="rtl"] .catalog-num, html[dir="rtl"] .artifact-counter, html[dir="rtl"] .char-counter { direction: ltr; unicode-bidi: isolate; /* Stay aligned to the trailing edge of the container */ display: inline-block; } /* ---------- Cards / misc ---------- */ html[dir="rtl"] .author-card { text-align: right; } html[dir="rtl"] .author-card .author-count { direction: rtl; } html[dir="rtl"] .vibe-chips { justify-content: flex-start; } html[dir="rtl"] .vibe-chip { direction: rtl; } /* ---------- Reveal animations — no change needed, they slide vertically. ---------- */ /* ---------- Admin ---------- */ /* Admin stays LTR (internal tool). If an admin page ever loads rtl.css accidentally, this saves us. */ html[dir="rtl"] body.admin-body { direction: ltr; text-align: left; font-family: var(--serif); }