/* ============================================================ 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-copy-block { text-align: right; } [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; } /* Coaching page (1-to-1) — these are all

tags with their own text-align:center rule in coaching/style.css, but that rule's specificity (one class + element, or just one class) either ties or loses against the sitewide "[dir=rtl] p, [dir=rtl] li { text-align:right }" default above, so on the Arabic version they were silently pulled back to right-aligned. Re-declaring them here (same pattern as .section-desc above) guarantees they win regardless of stylesheet load order. */ [dir="rtl"] .ch-hero-sub, [dir="rtl"] .ch-video-subtext, [dir="rtl"] .ch-apply-desc, [dir="rtl"] .ch-form-privacy, [dir="rtl"] .ch-consult-note, [dir="rtl"] .ch-before-apply, [dir="rtl"] .ch-before-apply p { 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; } /* .ch-results-nav-btn svg is intentionally NOT mirrored here (unlike the simple inline "read more" arrows below) — the results carousel's track is forced direction:ltr in style.css and the prev/next buttons always scroll the same fixed physical direction (prevBtn: -1 card, nextBtn: +1 card) regardless of page language, so the "<" / ">" icons already match the real scroll direction in both languages. Mirroring them here made the icons point the opposite way from what actually happens when clicked in Arabic — that was the bug being fixed. */ [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-start; } [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; } } /* ── Disable double-tap-to-zoom on mobile, site-wide ────────── Not an RTL rule, but this file is the one stylesheet already loaded unconditionally on every single page, so it's the most reliable place to apply something globally in one shot. touch-action:manipulation removes the double-tap-zoom gesture (and the ~300ms tap delay) while still allowing normal pinch zoom elsewhere on the page — unlike disabling zoom via the viewport meta tag, which would block pinch-zoom too and hurt accessibility for anyone who needs to zoom in. */ html, body { touch-action: manipulation; }