/* ============================================================ EcomNightHQ — RTL & Arabic Language Overrides Activated when ============================================================ */ /* ── Arabic Font (loaded dynamically by i18n.js) ─────────── */ /* Cairo is injected via JS only when AR is selected */ [lang="ar"] { --font-display: 'Cairo', sans-serif; --font-body: 'Cairo', sans-serif; --font-mono: 'Cairo', monospace; } /* ── Arabic text-rendering fixes ────────────────────────── The whole site is designed for a Latin display font (Clash Display / Satoshi) and many headings use tight, sometimes negative letter-spacing (e.g. -1px to -2px) to compress that font. Arabic script is cursive/contextual — letters must stay connected to their neighbors and diacritic marks (tashkeel) are positioned relative to the base letter. Any negative (or even nonzero) letter-spacing breaks that shaping: letters can visually collide/overlap and diacritics can appear to float in the wrong place. Force normal spacing for Arabic, and give headings extra line-height/vertical breathing room since Cairo renders taller line boxes (with tashkeel) than the tight headline line-heights (1.05–1.15) used elsewhere. ─────────── */ [lang="ar"] * { letter-spacing: normal !important; } [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .hero-title, [lang="ar"] .ch-hero-title, [lang="ar"] .section-title, [lang="ar"] .cinematic-statement, [lang="ar"] .cinematic-statement-sm { /* Was 1.5 — that reserved a lot of empty vertical space above/below every Arabic heading site-wide (visible as a large gap before the hero title, and oversized gaps between headings and surrounding text). 1.3 still gives Cairo's taller line boxes/tashkeel enough room to avoid clipping, without the extra empty space. */ line-height: 1.3 !important; } /* Headings that mix Arabic text with an untranslated Latin brand name (e.g. "لماذا تأسست EcomNight") are built from multiple s. Isolate each span's bidi context so the browser never reorders/overlaps the Latin word against its Arabic neighbors. */ [lang="ar"] h1 span, [lang="ar"] h2 span, [lang="ar"] h3 span, [lang="ar"] .section-title span { unicode-bidi: isolate; display: inline-block; } /* ── Base Direction ─────────────────────────────────────── */ [dir="rtl"] { direction: rtl; } /* ── Navbar ──────────────────────────────────────────────── */ [dir="rtl"] .nav-container { flex-direction: row; } [dir="rtl"] .nav-links { flex-direction: row; } [dir="rtl"] .nav-actions { flex-direction: row; } [dir="rtl"] .nav-icon { margin-right: 0; margin-left: 5px; } [dir="rtl"] .nav-link { flex-direction: row; } [dir="rtl"] .nav-link::after { left: auto; right: 0; } /* Brand name stays LTR */ [dir="rtl"] .logo-text { direction: ltr; } /* Nav font size for Arabic */ [lang="ar"] .nav-link { font-size: 0.82rem; letter-spacing: 0; } /* ── Mobile Nav Right ────────────────────────────────────── */ /* ── Mobile Menu ─────────────────────────────────────────── */ [dir="rtl"] .mobile-nav-icon { margin-right: 0; margin-left: 12px; } [dir="rtl"] .mobile-link { text-align: right; } [dir="rtl"] .mobile-link::before { order: 1; } [lang="ar"] .mobile-link { font-size: clamp(1.4rem, 3.5vw, 2.2rem); } /* ── Footer ──────────────────────────────────────────────── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-logo { flex-direction: row; align-items: center; justify-content: flex-start; } [dir="rtl"] .footer-socials { justify-content: flex-start; } [dir="rtl"] .footer-links-list { text-align: right; } [dir="rtl"] .footer-contact-list { text-align: right; } [dir="rtl"] .footer-contact-item { flex-direction: row; } [dir="rtl"] .footer-bottom { flex-direction: row; } [dir="rtl"] .footer-brand { text-align: right; display: flex; flex-direction: column; align-items: flex-start; } [dir="rtl"] .footer-link:hover { transform: translateX(-4px); } [dir="rtl"] .footer-newsletter-card { flex-direction: row-reverse; } [dir="rtl"] .footer-newsletter-input-wrap { flex-direction: row-reverse; } [dir="rtl"] .footer-newsletter-btn { border-radius: 10px 0 0 10px; } [dir="rtl"] .footer-newsletter-input { text-align: right; } [lang="ar"] .footer-brand-desc { font-size: 0.9rem; line-height: 1.9; } /* ── Back-to-top button ──────────────────────────────────── */ /* Intentionally NOT moved — stays bottom-right in both LTR and RTL */ /* ── Custom cursor (never affected by RTL) ───────────────── */ [dir="rtl"] .custom-cursor, [dir="rtl"] .custom-cursor * { direction: ltr; } /* ── Ticker ──────────────────────────────────────────────── */ [dir="rtl"] .ticker-track { animation-direction: reverse; } /* ── Buttons (flip arrow) ────────────────────────────────── */ /* NOTE: .btn is NOT reversed — user wants buttons unaffected in RTL */ /* NOTE: .btn-arrow svg NOT flipped — style.css already flips .btn-arrow */ [dir="rtl"] .btn-arrow { transform: none; } /* override style.css scaleX(-1) — keep arrow as-is */ [dir="rtl"] .svc-card-cta svg { transform: scaleX(-1); } [dir="rtl"] .card-link svg { transform: scaleX(-1); } /* ── Hero (Home) ─────────────────────────────────────────── */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-cta { justify-content: flex-start; } [dir="rtl"] .micro-trust { justify-content: flex-start; } [dir="rtl"] .trust-badge { justify-content: flex-start; } [dir="rtl"] .micro-stat { text-align: right; } /* Reduce hero title size for Arabic — Cairo font is wider than Clash Display */ [lang="ar"] .hero-title { font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.4; } /* Dynamic rotating word ("ليست مجرد صفحات") — anchor to the right in RTL so there is no empty gap between the static text and the rotating word. */ [dir="rtl"] .dynamic-word { left: auto; right: 0; } /* ── Philosophy / Bento ──────────────────────────────────── */ [dir="rtl"] .card-inner { text-align: right; } [dir="rtl"] .card-label { text-align: right; } /* ── Services Section (Home) ─────────────────────────────── */ [dir="rtl"] .svc-features { text-align: right; } [dir="rtl"] .svc-featured-content { text-align: right; } [dir="rtl"] .svc-standard-content { text-align: right; } /* ── Testimonials ────────────────────────────────────────── */ [dir="rtl"] .testimonial-card-inner { text-align: right; } [dir="rtl"] .testimonial-author-info { text-align: right; } /* ── Get Started / Contact (Home) ────────────────────────── */ /* NOTE: .get-started-container is a CSS GRID — direction:rtl in style.css handles column order */ /* NOTE: .gs-feature direction:rtl already in style.css — do NOT add flex-direction:row-reverse (double-reverse bug) */ [dir="rtl"] .get-started-content { text-align: right; } [dir="rtl"] .get-started-features { direction: rtl; } [dir="rtl"] .gs-feature-text { text-align: right; } [dir="rtl"] .gs-label { text-align: right; } [dir="rtl"] .gs-input { text-align: right; direction: rtl; } [dir="rtl"] .gs-form-header { text-align: right; } /* ── Services Page ───────────────────────────────────────── */ /* Services hero is centered — keep badge, CTAs and trust row centered */ [dir="rtl"] .hero-ctas { justify-content: center; } [dir="rtl"] .hero-trust { justify-content: center; } /* Section / detail headers stay CENTERED in Arabic (title + tag + desc) */ [dir="rtl"] .section-header, [dir="rtl"] .detail-header { text-align: center; } [dir="rtl"] .section-header p, [dir="rtl"] .detail-header p, [dir="rtl"] .section-desc, [dir="rtl"] .hero-description { text-align: center; } [dir="rtl"] .services-grid { direction: rtl; } [dir="rtl"] .service-card { text-align: right; } [dir="rtl"] .card-features li { text-align: right; } [dir="rtl"] .process-step { text-align: right; } [dir="rtl"] .step-content { text-align: right; } [dir="rtl"] .check-item { text-align: right; } [dir="rtl"] .features-checklist { text-align: right; } /* Store / Course / Payment / Why sections */ [dir="rtl"] .store-feature { text-align: right; } [dir="rtl"] .why-card { text-align: right; } [dir="rtl"] .module-info { text-align: right; } [dir="rtl"] .module-marker { flex-shrink: 0; } /* FAQ */ [dir="rtl"] .faq-question { text-align: right; } [dir="rtl"] .faq-answer p { text-align: right; } /* CTA section */ [dir="rtl"] .cta-content { text-align: center; } [dir="rtl"] .cta-trust { justify-content: center; } /* Keep centered section headers */ [dir="rtl"] .services-header, [dir="rtl"] .testimonials-header { text-align: center; } /* ── Store Creation Page ─────────────────────────────────── */ /* Hero + process steps are centered by design — keep centered in AR */ [dir="rtl"] .sc-hero { text-align: center; } [dir="rtl"] .sc-hero-cta { justify-content: center; } [dir="rtl"] .sc-step { text-align: center; } [dir="rtl"] .sc-plan { text-align: right; } [dir="rtl"] .sc-why-card { text-align: right; } [dir="rtl"] .sc-faq-q { text-align: right; } [dir="rtl"] .sc-faq-a-inner { text-align: right; } [dir="rtl"] .sc-cta-box { text-align: center; } /* ── Coaching Page ───────────────────────────────────────── */ /* Hero is centered by design — keep centered in AR */ [dir="rtl"] .ch-hero { text-align: center; } [dir="rtl"] .ch-hero-cta { justify-content: center; } [dir="rtl"] .ch-result-card { text-align: right; } [dir="rtl"] .ch-spec-card { text-align: center; } [dir="rtl"] .ch-acc-header { text-align: right; } [dir="rtl"] .ch-acc-body { text-align: right; } [dir="rtl"] .ch-acc-body-inner { text-align: right; } [dir="rtl"] .ch-acc-topics { text-align: right; padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] .ch-acc-outcome { text-align: right; } [dir="rtl"] .ch-faq-q { text-align: right; } [dir="rtl"] .ch-results-nav-btn svg { transform: scaleX(-1); } [dir="rtl"] .ch-faq-a-inner { text-align: right; } [dir="rtl"] .ch-apply-header { text-align: center; } [dir="rtl"] .ch-form-group { text-align: right; } [dir="rtl"] .ch-form-group label { text-align: right; display: block; } [dir="rtl"] .ch-consult-left { text-align: right; } [dir="rtl"] .ch-form-input, [dir="rtl"] .ch-form-select, [dir="rtl"] .ch-form-textarea { text-align: right; direction: rtl; } [dir="rtl"] .ch-consult-box { direction: rtl; text-align: right; } [dir="rtl"] .ch-consult-content { text-align: right; } /* ── About Page ──────────────────────────────────────────── */ /* The hero is a single centered column (no side-by-side video anymore), so Arabic should stay centered too instead of flipping to right-aligned — otherwise the badge/buttons/stats end up misaligned relative to the centered title/description above them. */ [dir="rtl"] .about-hero-content { text-align: center; } [dir="rtl"] .about-hero-cta { justify-content: center; } [dir="rtl"] .about-hero-stats { justify-content: center; } [dir="rtl"] .about-hero-badge { justify-content: center; } [dir="rtl"] .hero-stat { text-align: center; } [dir="rtl"] .section-badge { justify-content: center; } [dir="rtl"] .result-card-info { text-align: right; } /* ── Contact Page ────────────────────────────────────────── */ [dir="rtl"] .contact-hero-inner { text-align: right; } [dir="rtl"] .contact-hero-inner .hero-badge { justify-content: flex-end; } [dir="rtl"] .contact-info-cards { direction: rtl; } [dir="rtl"] .contact-info-card { text-align: right; } [dir="rtl"] .contact-form-group label { text-align: right; display: block; } [dir="rtl"] .contact-input, [dir="rtl"] .contact-textarea, [dir="rtl"] .contact-select { text-align: right; direction: rtl; } /* ── Policies Page ───────────────────────────────────────── */ [dir="rtl"] .pol-layout { direction: rtl; } [dir="rtl"] .pol-sidebar { border-right: none; border-left: 1px solid var(--border-subtle); } [dir="rtl"] .pol-toc-link { border-left: none; border-right: 3px solid transparent; padding-left: 1rem; padding-right: 1.25rem; flex-direction: row; text-align: right; } [dir="rtl"] .pol-toc-link.active { border-right-color: var(--accent); border-left-color: transparent; } [dir="rtl"] .pol-section-card { text-align: right; } [dir="rtl"] .pol-section-head { flex-direction: row; text-align: right; } [dir="rtl"] .pol-section-title, [dir="rtl"] .pol-section-meta, [dir="rtl"] .pol-intro, [dir="rtl"] .pol-h4, [dir="rtl"] .pol-hero, [dir="rtl"] .pol-hero-title, [dir="rtl"] .pol-hero-desc { text-align: right; } [dir="rtl"] .pol-toc-title { text-align: right; } [dir="rtl"] .pol-list { padding-right: 1.5rem; padding-left: 0; text-align: right; } [dir="rtl"] .pol-h3 { flex-direction: row; } [dir="rtl"] .pol-callout { border-left: none; border-right: 4px solid; text-align: right; } [dir="rtl"] .pol-callout.note { border-right-color: var(--accent); } [dir="rtl"] .pol-callout.warn { border-right-color: #f59e0b; } [dir="rtl"] .pol-callout.danger { border-right-color: #ef4444; } [dir="rtl"] .pol-mobile-toc { text-align: right; } [dir="rtl"] .pol-mobile-toc-list a { text-align: right; } [dir="rtl"] .pol-contact-item { text-align: right; } /* ── Course Detail Page (Dropshipping) ────────────────────── */ [dir="rtl"] .cd-back-link svg { transform: scaleX(-1); } [dir="rtl"] .cd-hero-left { text-align: right; } [dir="rtl"] .cd-badge-row { justify-content: flex-start; } [dir="rtl"] .cd-hero-desc { text-align: right; } [dir="rtl"] .cd-pf-item { text-align: right; } [dir="rtl"] .cd-module-info { text-align: right; } [dir="rtl"] .cd-module-topics-title { text-align: right; } [dir="rtl"] .cd-module-topics { text-align: right; } [dir="rtl"] .cd-module-outcome { text-align: right; } [dir="rtl"] .cd-audience-card { text-align: right; } [dir="rtl"] .cd-audience-card ul li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .cd-audience-card ul li::before { left: auto; right: 0; } [dir="rtl"] .cd-faq-question { text-align: right; } [dir="rtl"] .cd-faq-answer p { text-align: right; } /* ── Courses Page ────────────────────────────────────────── */ [dir="rtl"] .course-card-content { text-align: right; } [dir="rtl"] .course-card-cta svg { transform: scaleX(-1); } [dir="rtl"] .course-card-badge { right: auto; left: 16px; } [dir="rtl"] .why-item { text-align: center; } /* ── Global text alignment helpers ──────────────────────── */ [dir="rtl"] p, [dir="rtl"] li { text-align: right; } /* Keep centered where it matters */ [dir="rtl"] .services-label, [dir="rtl"] .testimonials-label, [dir="rtl"] .services-title, [dir="rtl"] .testimonials-title, [dir="rtl"] .services-subtitle, [dir="rtl"] .testimonials-subtitle, [dir="rtl"] .sc-section-header, [dir="rtl"] .sc-cta-box p, [dir="rtl"] .proof-stats-bar { text-align: center; } /* ── Proof stats ─────────────────────────────────────────── */ [dir="rtl"] .proof-stat { text-align: center; } /* ── Form error messages ─────────────────────────────────── */ [dir="rtl"] .gs-error, [dir="rtl"] .ch-form-error { text-align: right; } /* ── Login Page ──────────────────────────────────────────── */ [dir="rtl"] .login-header { text-align: center; } [dir="rtl"] .login-form .form-label { text-align: right; display: block; } [dir="rtl"] .login-form .form-input { text-align: right; direction: rtl; } [dir="rtl"] .login-form .field-error { text-align: right; } /* ── Responsive tweaks for RTL ───────────────────────────── */ @media (max-width: 768px) { [dir="rtl"] .footer-bottom { flex-direction: column; align-items: center; } [dir="rtl"] .footer-newsletter-card { flex-direction: column; align-items: flex-end; } [dir="rtl"] .get-started-container { flex-direction: column; } [dir="rtl"] .about-hero-container { flex-direction: column; } [dir="rtl"] .ch-consult-inner { flex-direction: column; } [dir="rtl"] .hero-trust { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; } }