/* ============================================================================= app-rtl.css — Arabic / RTL overrides for the QDE theme. Drupal loads this file automatically when the active language direction is RTL (e.g. Arabic) because of the `direction: rtl` flag in qde.libraries.yml. All rules are scoped under [dir="rtl"], which Drupal adds to for RTL languages — safe to load globally; inert on LTR pages. The inherited `direction: rtl` on already handles: • Default text alignment (right) • Flex row reversal • Inline element order This file only needs to override physical properties (left/right/padding-left/ padding-right/border-left/border-right/transform-origin) and apply Cairo font. ============================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap"); /* ── 1. Base: font & letter-spacing ─────────────────────────────────────────── */ [dir="rtl"], [dir="rtl"] body { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; } /* Arabic glyphs must not have Latin letter-spacing — it breaks joining */ [dir="rtl"] * { letter-spacing: 0 !important; } /* Headings / display text */ [dir="rtl"] .section-title, [dir="rtl"] .hero-title, [dir="rtl"] .kp-hero-title, [dir="rtl"] .tenders-hero-title, [dir="rtl"] .resources-hero-title, [dir="rtl"] .news-hero-title, [dir="rtl"] .footer h5, [dir="rtl"] .brand { font-family: "Cairo", Arial, sans-serif; } /* Monospace elements — Cairo replaces JetBrains Mono for Arabic */ [dir="rtl"] .mono-label, [dir="rtl"] .kp-step-num, [dir="rtl"] .kp-step-meta, [dir="rtl"] .kp-step-tag { font-family: "Cairo", Arial, sans-serif; text-transform: none; } /* ── 2. Navigation — underline animation & arrows ───────────────────────────── */ /* Underline expands from the right in RTL */ [dir="rtl"] .nav-links a::after { transform-origin: right; } /* Arrow icons: flip the horizontal translation on hover */ [dir="rtl"] .btn:hover .arrow { transform: translate(-2px, -2px); } [dir="rtl"] .vault-cta:hover .arrow { transform: translate(-2px, -2px); } [dir="rtl"] .card-link:hover .arrow { transform: translate(-3px, -3px); } /* eco-card action arrow — flip horizontal scaleX via rotate */ [dir="rtl"] .eco-card-action .arrow { transform: scaleX(-1); } [dir="rtl"] .eco-card-action:hover .arrow { transform: scaleX(-1) translate(-3px, 3px); } /* ── 3. Mobile navigation ────────────────────────────────────────────────────── */ /* Section headings and links align to the start (right) in RTL */ [dir="rtl"] .mobile-nav-section h6, [dir="rtl"] .mobile-nav-section a { text-align: right; } /* ── 4. Section body text ───────────────────────────────────────────────────── */ /* Explicit text-align: left in LTR → override to right for RTL */ [dir="rtl"] .section-body, [dir="rtl"] .eco-card, [dir="rtl"] .section-head, [dir="rtl"] .sticky-slide, [dir="rtl"] .sticky-copy { text-align: right; } /* ── 5. Eco-card decorative number (positioned top-right → top-left in RTL) ─── */ [dir="rtl"] .eco-card-numeral { right: auto; left: 28px; } @media (min-width: 1100px) { [dir="rtl"] .eco-card-numeral { left: 40px; right: auto; } } @media (max-width: 767px) { [dir="rtl"] .eco-card-numeral { left: 20px; right: auto; } } /* ── 6. News row ──────────────────────────────────────────────────────────────── */ /* Bottom-border underline animation expands from right */ [dir="rtl"] .news-row::before { transform-origin: right center; } /* News row arrow appears from the left in RTL (was from the left/translateX(-6px)) */ [dir="rtl"] .news-arrow { transform: translateX(6px); } [dir="rtl"] .news-row:hover .news-arrow { transform: translateX(0); } /* ── 7. Vault features list ───────────────────────────────────────────────────── */ [dir="rtl"] .vault-features li { padding-left: 0; padding-right: 22px; } /* Diamond bullet: move from left edge to right edge */ [dir="rtl"] .vault-features li::before { left: auto; right: 0; } /* ── 8. Tier list (membership / tier section shared across all pages) ─────────── */ [dir="rtl"] .tier-list li { padding-left: 0; padding-right: 22px; } /* Arrow-check bullet: move to right side and flip direction */ [dir="rtl"] .tier-list li::before { left: auto; right: 0; border-left: none; border-right: 1.5px solid currentColor; transform: rotate(45deg); } /* Apply the right color for each page context */ [dir="rtl"] .page-home .tier-list li::before { border-right-color: rgba(255, 245, 220, 0.55); border-bottom-color: rgba(255, 245, 220, 0.55); } [dir="rtl"] .page-kimberley .tier-list li::before, [dir="rtl"] .page-tenders .tier-list li::before, [dir="rtl"] .page-news .tier-list li::before, [dir="rtl"] .page-resources .tier-list li::before { border-right-color: var(--accent); border-bottom-color: var(--accent); } /* ── 9. Tier card list (tenders page feature list) ────────────────────────────── */ [dir="rtl"] .tier-card-list li { padding-left: 0; padding-right: 18px; } [dir="rtl"] .tier-card-list li::before { left: auto; right: 0; } /* ── 10. Affiliate row ────────────────────────────────────────────────────────── */ [dir="rtl"] .affiliate-row { text-align: right; /* Override the padding-left transition with padding-right */ transition: background 0.3s ease, padding-right 0.4s cubic-bezier(0.2, 0, 0, 1); } [dir="rtl"] .affiliate-row[data-active] { padding-left: 0; padding-right: 24px; } /* Active left-bar indicator — move to right side */ [dir="rtl"] .affiliate-row::after { left: auto; right: 0; } /* ── 11. KP pullquote ─────────────────────────────────────────────────────────── */ [dir="rtl"] .kp-pullquote { border-left: none; border-right: 2px solid var(--accent-soft); padding-left: 0; padding-right: 24px; } /* ── 12. KP FAQ question button ───────────────────────────────────────────────── */ [dir="rtl"] .kp-faq-question { text-align: right; flex-direction: row-reverse; } [dir="rtl"] .kp-faq-head { text-align: right; } /* ── 13. Form / label helpers ─────────────────────────────────────────────────── */ /* Required asterisk: swap from left-margin to right-margin */ [dir="rtl"] .kp-field label .req { margin-left: 0; margin-right: 4px; } /* ── 14. Modal / overlay text ─────────────────────────────────────────────────── */ [dir="rtl"] .apply-modal, [dir="rtl"] .contact-modal { text-align: right; direction: rtl; } /* ── 15. Footer ───────────────────────────────────────────────────────────────── */ /* footer-bottom already uses justify-content: space-between inside a flex row that is automatically reversed by direction: rtl — no explicit override needed unless the reversed order looks wrong visually. */ /* Footer address column text */ [dir="rtl"] .footer-address-col p, [dir="rtl"] .footer-address-col a { text-align: right; } /* ── 16. Coming soon page ─────────────────────────────────────────────────────── */ /* Font: use Cairo for all coming-soon text in Arabic */ [dir="rtl"] .page-coming-soon, [dir="rtl"] .page-coming-soon body { font-family: "Cairo", Arial, sans-serif; } [dir="rtl"] .page-coming-soon .title, [dir="rtl"] .page-coming-soon .eyebrow, [dir="rtl"] .page-coming-soon .lede, [dir="rtl"] .page-coming-soon .capture button, [dir="rtl"] .page-coming-soon .capture input[type="submit"], [dir="rtl"] .page-coming-soon .foot { font-family: "Cairo", Arial, sans-serif; letter-spacing: 0; text-transform: none; } /* Kite watermark: mirror from right to left in RTL */ [dir="rtl"] .page-coming-soon .kite { right: auto; left: -22vw; } /* Center content: keep centred but switch to RTL reading direction */ [dir="rtl"] .page-coming-soon .center { text-align: center; direction: rtl; } /* Eyebrow: already centred flex row — no change needed */ /* Title: ensure RTL line breaking and font */ [dir="rtl"] .page-coming-soon .title { direction: rtl; } /* Lede: text alignment */ [dir="rtl"] .page-coming-soon .lede { text-align: center; } /* Capture label: move off-screen to the right instead of left */ [dir="rtl"] .page-coming-soon .capture label { left: auto; right: -9999px; } /* Email capture form: reverse the row so the input leads on the right */ @media (min-width: 600px) { [dir="rtl"] .page-coming-soon .capture form { flex-direction: row-reverse; } } @media (max-height: 600px) { [dir="rtl"] .page-coming-soon .capture form { flex-direction: row-reverse; } } /* Keep email addresses visually LTR inside the RTL input */ [dir="rtl"] .page-coming-soon .capture input[type="email"] { direction: ltr; text-align: right; } [dir="rtl"] .page-coming-soon .capture input[type="email"]::placeholder { direction: rtl; text-align: right; } /* Flip the capture button arrow */ [dir="rtl"] .page-coming-soon .capture button .arrow, [dir="rtl"] .page-coming-soon .capture button:hover .arrow, [dir="rtl"] .page-coming-soon .capture input[type="submit"] .arrow, [dir="rtl"] .page-coming-soon .capture input[type="submit"]:hover .arrow { transform: scaleX(-1); } /* Capture note: centre-aligned, just ensure direction */ [dir="rtl"] .page-coming-soon .capture-note { text-align: center; direction: rtl; } /* Footer bar: reverse column order and flip text alignment */ @media (min-width: 700px) { [dir="rtl"] .page-coming-soon .foot { flex-direction: row-reverse; } [dir="rtl"] .page-coming-soon .foot > :first-child { text-align: right; } [dir="rtl"] .page-coming-soon .foot > :nth-child(2) { text-align: center; } [dir="rtl"] .page-coming-soon .foot > :last-child { text-align: left; } } /* ── 17. Scroll progress bar — keep left-to-right growth ─────────────────────── */ /* The scroll-progress bar fills from the left (0% → 100%) even in RTL. The `left: 0` and `width` animation are intentional — no override needed. */ /* ── 18. News listing page (.page-news) RTL overrides ────────────────────────── */ /* Hero: gradient fades from right to left in RTL */ [dir="rtl"] .page-news .hero::before { background: linear-gradient(270deg, rgba(10, 15, 26, 1) 0%, rgba(10, 15, 26, 0.88) 12%, rgba(10, 15, 26, 0.65) 32%, rgba(10, 15, 26, 0.30) 52%, rgba(10, 15, 26, 0) 72%); } /* Hero image: mirror the translateX offset direction */ @media (min-width: 900px) { [dir="rtl"] .page-news .hero-media .hero-photo, [dir="rtl"] .page-news .hero-media .hero-video, [dir="rtl"] .page-news .hero-media .hero-image { transform: translateX(-8%) scale(1.06); transform-origin: left center; object-position: left center; } } /* Hero text alignment */ [dir="rtl"] .page-news .hero-copy, [dir="rtl"] .page-news .hero-title, [dir="rtl"] .page-news .hero-lede { text-align: right; } /* Search input: padding swapped so icon sits on the right */ [dir="rtl"] .page-news .news-search input { padding: 14px 46px 14px 44px; } /* Search icon: swap from left to right */ [dir="rtl"] .page-news .news-search-icon { left: auto; right: 18px; } /* Search clear button: swap from right to left */ [dir="rtl"] .page-news .news-search-clear { right: auto; left: 14px; } /* Feature badge: swap from top-left to top-right */ [dir="rtl"] .page-news .feature-badge { left: auto; right: 16px; } /* Feature card body text alignment */ [dir="rtl"] .page-news .feature-card-body { text-align: right; } /* Feature card title link colour (no change needed, inherits) */ [dir="rtl"] .page-news .feature-card-title a { color: inherit; } /* Archive row aside: flip text alignment and column alignment */ @media (min-width: 700px) { [dir="rtl"] .page-news .archive-row-aside { align-items: flex-start; text-align: left; } } /* Kicker line (decorative horizontal rule): swap margin side */ [dir="rtl"] .page-news .kicker-line { margin-right: 0; margin-left: 14px; } /* Section body text alignment */ [dir="rtl"] .page-news .section-body { text-align: right; } /* Newsletter form: reverse the pill row so input leads on the right */ @media (min-width: 600px) { [dir="rtl"] .page-news .newsletter-form { flex-direction: row-reverse; padding: 6px 8px 6px 6px; } } /* Keep email addresses visually LTR inside the RTL input */ [dir="rtl"] .page-news .newsletter-form input[type="email"] { direction: ltr; text-align: right; } [dir="rtl"] .page-news .newsletter-form input[type="email"]::placeholder { direction: rtl; text-align: right; } /* CTA strip text alignment */ [dir="rtl"] .page-news .cta-strip-eyebrow, [dir="rtl"] .page-news .cta-strip-title, [dir="rtl"] .page-news .cta-strip-lede { text-align: right; } /* Sticky counter: swap from top-right to top-left */ [dir="rtl"] .page-news .sticky-counter { right: auto; left: 24px; } /* Marquee: reverse direction for RTL reading */ [dir="rtl"] .page-news .marquee-track { animation-direction: reverse; }