/* ═══════════════════════════════════════════════════════════════════ Japsons Realty — right-to-left overrides (Arabic) Loaded by i18n.js only while an RTL language is active. dir="rtl" on already handles text direction, inline flow, list markers, and — importantly — flex and grid axis order, which reverse automatically. What remains is the decorative layer: the gold rules, hairline accents, edge padding and absolutely positioned furniture, none of which are direction-aware. ═══════════════════════════════════════════════════════════════════ */ .jr-rtl body { text-align: right; } /* ── typography ─────────────────────────────────────────────────── */ .jr-rtl h1, .jr-rtl h2, .jr-rtl h3, .jr-rtl h4, .jr-rtl p, .jr-rtl li, .jr-rtl blockquote, .jr-rtl figcaption, .jr-rtl .section-head, .jr-rtl .about-copy, .jr-rtl .hero-body { text-align: right; } .jr-rtl [style*="text-align:left"], .jr-rtl [style*="text-align: left"] { text-align: right !important; } /* Arabic sits differently on the line: slightly more leading, and the tight Latin letter-spacing has to come off or the script breaks up. */ .jr-rtl p, .jr-rtl li, .jr-rtl blockquote { line-height: 1.95; } .jr-rtl .eyebrow, .jr-rtl .mega-col-title, .jr-rtl .footer-col-h, .jr-rtl .btn, .jr-rtl .nav-links a, .jr-rtl .nav-cta-link, .jr-rtl .ldr-msg-kicker, .jr-rtl .ldr-sig-role, .jr-rtl .home-ldr-role, .jr-rtl .stat-label, .jr-rtl .svc-tile-tag { letter-spacing: 0.04em; } .jr-rtl .ldr-hero-eyebrow { letter-spacing: 0.06em; } /* Latin-only display treatments have no Arabic equivalent. */ .jr-rtl .serif-italic, .jr-rtl em, .jr-rtl i, .jr-rtl .ldr-hero-title em, .jr-rtl .ldr-msg-title em { font-style: normal; } /* Numerals, prices, phone numbers, e-mail and permit references stay LTR. */ .jr-rtl .price, .jr-rtl .prop-price, .jr-rtl .stat-num, .jr-rtl .fc-reg, .jr-rtl a[href^="tel:"], .jr-rtl a[href^="mailto:"], .jr-rtl .footer-contact-item a, .jr-rtl .curr-val { direction: ltr; unicode-bidi: embed; text-align: right; } .jr-rtl .footer-legal-row, .jr-rtl .footer-bottom { text-align: right; } /* ── decorative rules and accents ───────────────────────────────── */ .jr-rtl .eyebrow-row::before, .jr-rtl .eyebrow-row::after, .jr-rtl .ldr-hero-eyebrow::before, .jr-rtl .ldr-msg-kicker::before { order: 2; } .jr-rtl .ldr-hero-rule, .jr-rtl .home-ldr-eyebrow { transform-origin: right center; } .jr-rtl .ldr-hero-rule { margin-left: auto; margin-right: 0; } /* Gold hairlines used as quote/lead accents flip to the right edge. */ .jr-rtl .about-lead, .jr-rtl .ldr-lead, .jr-rtl .quote-accent { border-left: 0; border-right: 2px solid var(--gold, #B8963E); padding-left: 0; padding-right: 1.4rem; } .jr-rtl .home-ldr-quote + .home-ldr-quote { border-left: 0; border-right: 1px solid var(--border, #E8E0D4); } @media (max-width: 768px) { .jr-rtl .home-ldr-quote + .home-ldr-quote { border-right: 0; border-top: 1px solid var(--border, #E8E0D4); } } /* ── message panels on the leadership page ──────────────────────── */ .jr-rtl .ldr-msg--md .ldr-panel { margin-right: 0; margin-left: auto; } .jr-rtl .ldr-msg--chair .ldr-panel { margin-left: 0; margin-right: auto; } /* ── header and menus ───────────────────────────────────────────── */ .jr-rtl .mega-close { right: auto; left: 2.5rem; } .jr-rtl .mega-col a:hover { padding-left: 0; padding-right: 0.5rem; } .jr-rtl .nav-links a::after { left: auto; right: 0; } .jr-rtl .lp-back { transform: scaleX(-1); display: inline-block; } /* ── carousels: arrows swap sides, track direction stays LTR ───── The scroller is driven by scrollLeft in JavaScript, so forcing the track back to LTR keeps the existing arrow logic correct while the cards themselves still render their Arabic content right-to-left. */ .jr-rtl .svc-tile-grid, .jr-rtl .prop-scroller, .jr-rtl .comm-scroller, .jr-rtl .ls-scroller { direction: ltr; } .jr-rtl .svc-tile, .jr-rtl .prop-card, .jr-rtl .comm-card, .jr-rtl .ls-card { direction: rtl; text-align: right; } .jr-rtl .svc-arrow-prev { left: auto; right: 4px; transform: scaleX(-1); } .jr-rtl .svc-arrow-next { right: auto; left: 4px; transform: scaleX(-1); } /* ── cards and overlay text ─────────────────────────────────────── */ .jr-rtl .comm-card-title, .jr-rtl .ls-card-title, .jr-rtl .prop-badge, .jr-rtl .svc-tile-title { left: auto; right: 1rem; text-align: right; } .jr-rtl .prop-badge { left: auto; right: 12px; } /* ── forms ──────────────────────────────────────────────────────── */ .jr-rtl input, .jr-rtl select, .jr-rtl textarea { text-align: right; } .jr-rtl input[type="tel"], .jr-rtl input[type="email"], .jr-rtl input[type="number"] { direction: ltr; text-align: right; } .jr-rtl select { background-position: left 0.8rem center; padding-right: 0.9rem; padding-left: 2.2rem; } .jr-rtl .form-row label { text-align: right; } /* ── footer ─────────────────────────────────────────────────────── */ .jr-rtl .footer-links a:hover { padding-left: 0; padding-right: 0.3rem; } .jr-rtl .fc-reg span { margin-right: 0; margin-left: 1.5rem; } /* ── floating furniture ─────────────────────────────────────────── */ .jr-rtl .wa-float, .jr-rtl .back-to-top { right: auto; left: 22px; } .jr-rtl .ticker-track { animation-direction: reverse; } /* The gold J on the leadership page is a symmetric brand mark and is deliberately left unflipped. */ .jr-rtl .ldr-j, .jr-rtl .ldr-j-svg, .jr-rtl .about-j-mark { transform: none; }