/* ════════════════════════════════════════════════════════════════════════ AR.CSS — Arabic / RTL layer Linked LAST on every *-ar.html page, after that page's own stylesheet. dir="rtl" on already flips flexbox, grid, text alignment and text direction, so this file only has to do two things: 1. Swap in the Arabic font stacks 2. Mirror the handful of rules that pin a physical side (left/right, directional padding/borders, translateX offsets, ← arrows) ════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════ 1. TYPOGRAPHY Arabic families sit SECOND in each stack on purpose. The browser resolves fonts per glyph, so Latin characters (jersey numbers, "Al Riffa SC", "+974", "2025/26") keep rendering in Bebas/Barlow exactly as on the English side, and only Arabic glyphs fall through to Noto Kufi / Tajawal. ══════════════════════════════════════════════════ */ [dir="rtl"] body { font-family: 'Barlow', 'Tajawal', sans-serif; } /* Display / heading faces — Bebas Neue first, Noto Kufi Arabic behind it */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .nav-club-name, [dir="rtl"] .footer-club, [dir="rtl"] .hero-title, [dir="rtl"] .section-title, [dir="rtl"] .section-heading, [dir="rtl"] .hero-club-name, [dir="rtl"] .hero-stat-num, [dir="rtl"] .panel-heading, [dir="rtl"] .form-title, [dir="rtl"] .success-title, [dir="rtl"] .article-title, [dir="rtl"] .timeline-card-title, [dir="rtl"] .identity-title, [dir="rtl"] .mgmt-name, [dir="rtl"] .coach-name, [dir="rtl"] .player-name, [dir="rtl"] .modal-name, [dir="rtl"] .squad-loading-text, [dir="rtl"] .card-loading-text, [dir="rtl"] .news-card-title { font-family: 'Bebas Neue', 'Noto Kufi Arabic', sans-serif; /* Arabic is a connected script — letter-spacing breaks the joins */ letter-spacing: normal; } /* Condensed UI faces — labels, nav, buttons, tags */ [dir="rtl"] .nav-links a, [dir="rtl"] .nav-cta, [dir="rtl"] .section-label, [dir="rtl"] .section-eyebrow, [dir="rtl"] .hero-eyebrow, [dir="rtl"] .hero-cta, [dir="rtl"] .hero-stat-lbl, [dir="rtl"] .hero-tagline, [dir="rtl"] .match-competition, [dir="rtl"] .match-team-name, [dir="rtl"] .match-info-label, [dir="rtl"] .countdown-label, [dir="rtl"] .league-table th, [dir="rtl"] .news-tag, [dir="rtl"] .news-date, [dir="rtl"] .article-tag, [dir="rtl"] .article-date, [dir="rtl"] .article-back, [dir="rtl"] .timeline-card-tag, [dir="rtl"] .identity-label, [dir="rtl"] .value-num, [dir="rtl"] .mgmt-role-badge, [dir="rtl"] .filter-btn, [dir="rtl"] .position-group-label, [dir="rtl"] .coach-role-badge, [dir="rtl"] .player-position, [dir="rtl"] .player-pos-overlay, [dir="rtl"] .modal-badge, [dir="rtl"] .modal-detail-label, [dir="rtl"] .field-label, [dir="rtl"] .form-eyebrow, [dir="rtl"] .success-eyebrow, [dir="rtl"] .submit-btn, [dir="rtl"] .perk span { font-family: 'Barlow Condensed', 'Tajawal', sans-serif; letter-spacing: normal; } /* Line-height gets a little room for Arabic's taller ascenders/descenders. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .hero-title, [dir="rtl"] .section-title, [dir="rtl"] .section-heading, [dir="rtl"] .panel-heading, [dir="rtl"] .form-title, [dir="rtl"] .success-title, [dir="rtl"] .article-title, [dir="rtl"] .news-card-title { line-height: 1.35; } /* The hero headline is two big display lines. 1.35 is right for body-sized headings but makes it tall enough to overflow the hero on a short laptop screen, where the top line gets clipped by the nav — so it gets its own tighter figure. */ [dir="rtl"] .hero-title { line-height: 1.15; } [dir="rtl"] .article-body p, [dir="rtl"] .article-lead, [dir="rtl"] .timeline-card-body, [dir="rtl"] .identity-body, [dir="rtl"] .section-sub, [dir="rtl"] .coach-bio { line-height: 1.95; } /* Latin-only runs inside an Arabic page (the +974 prefix, the email echoed back on the success screen) must not be re-ordered by the bidi algorithm. */ [dir="rtl"] .phone-prefix, [dir="rtl"] .success-name { direction: ltr; unicode-bidi: isolate; } /* ══════════════════════════════════════════════════ 2. LANGUAGE SWITCHER Each option is written in its own language, so "English" needs the Latin face while "العربية" needs the Arabic one — the lang attribute on each row decides. ══════════════════════════════════════════════════ */ [dir="rtl"] .nav-lang-opt[lang="en"] { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1.5px; } [dir="rtl"] .nav-lang-opt[lang="ar"] { font-family: 'Tajawal', 'Barlow Condensed', sans-serif; letter-spacing: normal; } /* ══════════════════════════════════════════════════ 3. MIRRORED LAYOUT — styles.css (home, news, article) ══════════════════════════════════════════════════ */ /* Hero crest watermark: pinned to the right on LTR → left on RTL */ [dir="rtl"] .hero-logo-watermark { right: auto; left: 4rem; } /* The hero wash is heaviest behind the headline. That headline sits on the right in Arabic, so the horizontal gradient runs the other way; the vertical one is unchanged. */ [dir="rtl"] .hero-overlay { background: linear-gradient( to left, rgba(8,42,43,0.88) 0%, rgba(8,42,43,0.62) 32%, rgba(8,42,43,0.22) 62%, rgba(8,42,43,0.05) 100% ), linear-gradient( to bottom, rgba(8,42,43,0.35) 0%, rgba(8,42,43,0.10) 35%, rgba(8,42,43,0.25) 72%, rgba(8,42,43,0.55) 100% ); } /* League table: the club-name column is the only left-aligned one */ [dir="rtl"] .league-table th:nth-child(2), [dir="rtl"] .league-table td:nth-child(2) { text-align: right; } /* Accent bar marking the Al Riffa row */ [dir="rtl"] .league-table tr.alriffa td:first-child { border-left: none; border-right: 3px solid var(--primary); } /* ══════════════════════════════════════════════════ 4. MIRRORED LAYOUT — news.css / article.css ══════════════════════════════════════════════════ */ [dir="rtl"] .page-banner-watermark { right: auto; left: 3rem; } /* Pull-quote accent bar + its rounded corners */ [dir="rtl"] .article-quote { border-left: none; border-right: 3px solid var(--primary); border-radius: 4px 0 0 4px; } /* "Back to News" arrow must point the other way */ [dir="rtl"] .article-back::before { content: '→'; } /* ══════════════════════════════════════════════════ 5. MIRRORED LAYOUT — club.css ══════════════════════════════════════════════════ */ /* Decorative hero corner brackets: top-left ↔ top-right, bottom-right ↔ bottom-left */ [dir="rtl"] .hero-corner--tl { left: auto; right: 3rem; border-width: 2px 2px 0 0; } [dir="rtl"] .hero-corner--br { right: auto; left: 3rem; border-width: 0 0 2px 2px; } /* Timeline — the spine stays centred, but each card's side and its slide-in direction have to swap so "left" cards sit on the right in RTL. */ [dir="rtl"] .timeline-item { padding-right: 0; padding-left: calc(50% + 2.5rem); transform: translateX(30px); } [dir="rtl"] .timeline-item[data-side="right"] { padding-left: 0; padding-right: calc(50% + 2.5rem); transform: translateX(-30px); } [dir="rtl"] .timeline-item.visible { transform: translateX(0); } /* Timeline below 900px — the spine moves to the edge and every card lines up beside it, so the whole stack flips to the right edge. */ @media (max-width: 900px) { [dir="rtl"] .timeline::before { left: auto; right: 1rem; } [dir="rtl"] .timeline-item, [dir="rtl"] .timeline-item[data-side="right"] { padding-left: 0; padding-right: 3rem; transform: translateX(20px); } [dir="rtl"] .timeline-item[data-side="right"] { transform: translateX(-20px); } [dir="rtl"] .timeline-item.visible { transform: translateX(0); } [dir="rtl"] .timeline-node { left: auto; right: 1rem; } } /* ══════════════════════════════════════════════════ 6. MIRRORED LAYOUT — squad.css ══════════════════════════════════════════════════ */ /* Giant page-header watermark — Latin "SQUAD" becomes Arabic, and moves side */ [dir="rtl"] .page-header::before { content: 'الرفاع'; right: auto; left: 2rem; font-family: 'Noto Kufi Arabic', sans-serif; } /* Oversized shirt number behind the coach portrait */ [dir="rtl"] .coach-number { left: auto; right: 1rem; } /* Shirt-number chip on each player card */ [dir="rtl"] .player-number-overlay { left: auto; right: 0.7rem; border-left: none; border-right: 2px solid rgba(255,255,255,0.4); } /* Modal: watermark number and the close button */ [dir="rtl"] .modal-number-bg { left: auto; right: 0.5rem; } [dir="rtl"] .modal-close { right: auto; left: 1rem; } @media (max-width: 768px) { [dir="rtl"] .page-header::before { right: auto; left: 0.5rem; } } /* ══════════════════════════════════════════════════ 7. MIRRORED LAYOUT — membership.css ══════════════════════════════════════════════════ */ /* Divider between the branding panel and the form panel */ [dir="rtl"] .right-panel { border-left: none; border-right: 1px solid var(--border); } /* Field icons move to the leading (right) edge of the input */ [dir="rtl"] .field-group:not(#group-phone) .field-icon { left: auto; right: 1rem; } [dir="rtl"] .field-group:not(#group-phone) .field-input { padding-left: 1rem; padding-right: 2.8rem; } /* The phone field deliberately stays left-to-right. "+974 00000000" is a single LTR unit, and mirroring it strands the prefix on the opposite side of the box from the digits being typed. Everything outside the input wrap — the label and the hint below it — still reads right-to-left. */ [dir="rtl"] #group-phone .field-input-wrap { direction: ltr; } /* Directional arrows: the submit arrow and the "back to homepage" chevron */ [dir="rtl"] .submit-btn-arrow, [dir="rtl"] .success-back-btn svg { transform: scaleX(-1); } [dir="rtl"] .submit-btn:hover .submit-btn-arrow { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .success-back-btn:hover { transform: translateX(3px); } /* Panel entry animations slide in from the opposite edge */ @keyframes slideInLeftRTL { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRightRTL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } [dir="rtl"] .left-panel { animation-name: slideInLeftRTL; } [dir="rtl"] .right-panel { animation-name: slideInRightRTL; } @media (max-width: 900px) { /* Stacked layout — the divider becomes a top border in both directions */ [dir="rtl"] .right-panel { border-right: none; border-top: 1px solid var(--border); } }