/* ============================================================ Teacher Platform by Octux — RTL / Arabic layer Applies only when . Latin brand wordmark and the product mockups stay LTR; everything else mirrors. ============================================================ */ /* Arabic typeface for body copy when RTL */ [dir="rtl"] body { font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; } /* Keep the Latin brand lockup + product mockups left-to-right */ [dir="rtl"] .brand__word { direction: ltr; } [dir="rtl"] .mock, [dir="rtl"] .stage, [dir="rtl"] .float-chip { direction: ltr; text-align: left; } /* ---- text alignment flips ---- */ [dir="rtl"] .hero__copy, [dir="rtl"] .pp-copy, [dir="rtl"] .lead__copy, [dir="rtl"] .trust__copy, [dir="rtl"] .benefits-wrap > .reveal:first-child, [dir="rtl"] .card, [dir="rtl"] .benefit, [dir="rtl"] .qa__q, [dir="rtl"] .qa__a p, [dir="rtl"] .field, [dir="rtl"] .drawer, [dir="rtl"] .footer { text-align: right; } /* override the explicit left-aligned heads from branding.css */ [dir="rtl"] .trust__copy .sec-title, [dir="rtl"] .trust__copy .sec-sub, [dir="rtl"] .lead__copy .sec-title { text-align: right; } /* ---- form controls ---- */ [dir="rtl"] .input, [dir="rtl"] .textarea { text-align: right; direction: rtl; } [dir="rtl"] select.input { background-position: left 14px center; padding-right: 15px; padding-left: 38px; } /* ---- positioned decorations mirror to the other side ---- */ [dir="rtl"] .plan__badge { right: auto; left: 18px; } [dir="rtl"] .step__ico { right: auto; left: 28px; } [dir="rtl"] .footer__product { align-items: flex-start; } /* ---- Arabic shouldn't track/upper-case labels ---- */ [dir="rtl"] .eyebrow, [dir="rtl"] .footer__col h4, [dir="rtl"] .plan__badge, [dir="rtl"] .tcard__r, [dir="rtl"] .persona__tag, [dir="rtl"] .dcard__h, [dir="rtl"] .hbadge { letter-spacing: normal; } /* slightly looser leading for Arabic display sizes */ [dir="rtl"] .hero h1, [dir="rtl"] .sec-title, [dir="rtl"] .final h2 { line-height: 1.22; } [dir="rtl"] .pp-copy h3 { line-height: 1.3; } /* ============================================================ LANGUAGE TOGGLE BUTTON (works in both directions) ============================================================ */ .lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-hairline); color: var(--text-default); font-family: "Tajawal", "Poppins", sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: var(--transition-colors); white-space: nowrap; flex: none; } .lang-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: var(--navy-400); } .lang-btn svg { width: 16px; height: 16px; color: var(--octux-orange); } .lang-btn--drawer { width: 100%; justify-content: center; height: 50px; margin-bottom: 6px; font-size: 16px; } /* hide the desktop toggle on small screens (lives in the drawer there) */ @media (max-width: 760px) { .hdr__right .lang-btn { display: none; } } /* ============================================================ ARABIC TYPOGRAPHY — readability + fit ============================================================ */ [dir="rtl"] .hero h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.3; } [dir="rtl"] .sec-title { line-height: 1.34; } [dir="rtl"] .final h2 { line-height: 1.32; } [dir="rtl"] .card h3, [dir="rtl"] .pp-copy h3, [dir="rtl"] .step h3, [dir="rtl"] .problem-card h3 { line-height: 1.5; } [dir="rtl"] .sec-sub, [dir="rtl"] .card p, [dir="rtl"] .problem-card p, [dir="rtl"] .benefit span, [dir="rtl"] .pp-copy p, [dir="rtl"] .pp-list li, [dir="rtl"] .lead__points li, [dir="rtl"] .plan__feats li, [dir="rtl"] .plan__for, [dir="rtl"] .qa__a p { line-height: 1.85; } [dir="rtl"] .card p, [dir="rtl"] .problem-card p, [dir="rtl"] .benefit span, [dir="rtl"] .persona p { font-size: 14.5px; } [dir="rtl"] .qa__q { line-height: 1.55; } [dir="rtl"] .tcard__quote { line-height: 1.8; } /* keep trust-card numbers/labels tidy and never overlapping the icon */ [dir="rtl"] .trustcard b { font-size: 21px; line-height: 1.4; } [dir="rtl"] .trustcard span { line-height: 1.6; } /* a touch more breathing room inside Arabic cards so text never crowds edges */ [dir="rtl"] .card { padding: 26px 28px; } [dir="rtl"] .problem-card { gap: 16px; } [dir="rtl"] .benefit { gap: 16px; }