/* ================================================================ * Yalla Market Landing — Responsive + RTL * Phone mockup fix: keep 280px design width, scale() to fit * ================================================================ */ /* ── Tablet ── */ @media (max-width:1024px) { .features-grid { grid-template-columns:repeat(2,1fr); } .footer-inner { grid-template-columns:1fr 1fr; gap:40px; } } /* ── Tablet / Hero stack ── */ @media (max-width:900px) { .hero { padding:100px 24px 56px; } .hero-inner { flex-direction:column; gap:40px; text-align:center; } .hero-content { order:1; display:flex; flex-direction:column; align-items:center; width: 100%; max-width: 100%; overflow: hidden; } .hero-visual { order:2; } .hero-subtitle { max-width:100%; margin-left:auto; margin-right:auto; padding: 0 10px; } .hero-buttons { justify-content:center; } .districts-inner { justify-content:center; flex-wrap: wrap; } .districts-marquee-wrap { width: 100%; } .ai-chef-inner { flex-direction:column; gap:48px; text-align:center; } .ai-chef-visual { flex:none; order:-1; } .ai-features-grid { align-items:center; text-align:center; } .contact-grid { grid-template-columns:1fr; gap:40px; } } /* ── Phone mockup: zoom-based scaling (affects layout unlike transform) ── */ @media (max-width:768px) { .hero-visual { display:flex; align-items:flex-start; justify-content:center; overflow:visible; } } @media (max-width:640px) { .phone-wrapper { zoom:0.87; } } @media (max-width:520px) { .phone-wrapper { zoom:0.78; } } @media (max-width:420px) { .phone-wrapper { zoom:0.70; } } @media (max-width:360px) { .phone-wrapper { zoom:0.62; } } /* ── Mobile nav ── */ @media (max-width:768px) { .nav-links { display:none; } .nav-cta { display:none; } .lang-switcher { display:none; } .mobile-menu-toggle { display:flex; } } @media (min-width:769px) { .mobile-menu-toggle { display:none; } .mobile-menu { display:none !important; } } /* ── Other sections ── */ @media (max-width:768px) { .hero { padding:80px 20px 40px; } .hero-title { font-size:32px; line-height: 1.2; } .hero-subtitle { font-size:15px; } .hero-badge { font-size: 11px; padding: 5px 10px; white-space: normal; text-align: center; } .features-grid { grid-template-columns:1fr; } .how-steps { flex-direction:column; align-items:center; gap:32px; } .how-steps::before { display:none; } .how-step { max-width:320px; padding:0; } .footer-inner { grid-template-columns:1fr; gap:40px; text-align:center; } .footer-brand { display:flex; flex-direction:column; align-items:center; text-align:center; } .footer-social { justify-content:center; } .footer-col { text-align:center; } .footer-col h4 { text-align:center; } .footer-col ul { align-items:center; } .footer-col .footer-contact-item { justify-content:center; } .footer-bottom { flex-direction:column; text-align:center; gap:16px; } .footer-bottom nav { justify-content:center; flex-wrap:wrap; } .footer-legal-info { text-align:center; } .legal-company-name { text-align:center; } .legal-detail { justify-content:center; flex-wrap:wrap; } .download-cta .section-title { font-size:28px; } .cta-buttons { flex-direction:column; align-items:center; } } @media (max-width:480px) { .hero-buttons { flex-direction:column; width:100%; } .store-btn { justify-content:center; width:100%; } .districts-header { font-size:9px; } } /* ================================================================ * RTL Overrides — Arabic Direction * * CRITICAL INSIGHT: applyLanguage() calls * document.documentElement.setAttribute('dir', 'rtl') * which sets direction:rtl on , inherited by ALL elements. * * For CSS flexbox with inherited direction:rtl: * flex-direction:row → main axis starts from RIGHT (RTL order) ✓ * flex-direction:row-reverse → cancels direction:rtl = LTR order ✗ * justify-content:flex-start → aligns to RIGHT ✓ * justify-content:flex-end → aligns to LEFT ✗ * * For column-flex (cross axis = inline): * align-items:flex-start → aligns children to RIGHT in RTL ✓ * align-items:flex-end → aligns children to LEFT in RTL ✗ * ================================================================ */ /* ── Base text direction ── */ [dir="rtl"] body { text-align:right; } /* ── Navbar ── * direction:rtl already reverses .navbar-inner row order. * Logo (first child) goes to RIGHT, controls to LEFT naturally. ── */ [dir="rtl"] .lang-dropdown { left:0; right:auto; transform-origin:top left; } /* column-flex child alignment: flex-start in RTL cross axis = RIGHT ✓ */ [dir="rtl"] .lang-opt-info { align-items:flex-start; text-align:right; } /* ── Mobile menu ── * direction:rtl makes flex-start = RIGHT inside each (display:flex). * Use flex-start (not flex-end) to push text to the right edge. ── */ [dir="rtl"] .mobile-nav-links { text-align:right; } [dir="rtl"] .mobile-nav-links a { justify-content:flex-start; text-align:right; } /* flex-start in RTL = RIGHT ✓ */ [dir="rtl"] .mobile-lang-label { justify-content:flex-start; text-align:right; } /* ── Section headers — always centred ── */ [dir="rtl"] .section-header { text-align:center; } [dir="rtl"] .section-label { text-align:center; display:block; } [dir="rtl"] .section-title { text-align:center; } [dir="rtl"] .section-subtitle { text-align:center; } /* ── Hero badge & store buttons (all sizes) ── * direction:rtl already reverses store-btn children (icon right, text left) ── */ [dir="rtl"] .hero-badge { direction:rtl; } [dir="rtl"] .store-btn .store-label { text-align:right; } /* ── Features ── */ [dir="rtl"] .feature-card { text-align:right; } /* ── How it works connector ── */ [dir="rtl"] .how-steps::before { left:calc(50%/3 + 1px); right:calc(50%/3 + 1px); background:linear-gradient(to left,var(--primary),var(--accent)); } /* ── AI Chef feature list ── * direction:rtl reverses each .ai-feature-item row: * icon (first child) → RIGHT, text div → LEFT ✓ ── */ [dir="rtl"] .ai-feature-item h4, [dir="rtl"] .ai-feature-item p { text-align:right; } /* ── Contact ── */ [dir="rtl"] .contact-grid { direction:rtl; } [dir="rtl"] .contact-info { text-align:right; } /* direction:rtl reverses contact-detail: icon (first child) → RIGHT ✓ */ [dir="rtl"] .contact-detail { width:100%; } [dir="rtl"] .contact-detail span, [dir="rtl"] .contact-detail a { text-align:right; } [dir="rtl"] .contact-form label { text-align:right; display:block; } [dir="rtl"] .contact-form input, [dir="rtl"] .contact-form select, [dir="rtl"] .contact-form textarea { direction:rtl; text-align:right; } [dir="rtl"] #form-status { text-align:center; } [dir="rtl"] .contact-result { text-align:right; } /* ── FAQ ── * direction:rtl reverses .faq-q row: question text RIGHT, chevron LEFT ✓ ── */ [dir="rtl"] .faq-q { text-align:right; } [dir="rtl"] .faq-a-inner { text-align:right; } [dir="rtl"] .faq-item.open .faq-chevron { transform:rotate(180deg); color:var(--primary); } [dir="rtl"] .faq-empty { text-align:center; } /* ── Footer ── */ [dir="rtl"] .footer-inner { direction:rtl; } /* .footer-logo is a flex row; direction:rtl > flex-start = RIGHT → logo on right ✓ */ [dir="rtl"] .footer-brand .footer-logo { justify-content:flex-start; } [dir="rtl"] .footer-legal-info { text-align:right; } [dir="rtl"] .legal-company-name { text-align:right; } /* ================================================================ * RTL — DESKTOP ONLY (min-width:901px) * * direction:rtl already reverses all row-flex item order. * DO NOT add flex-direction:row-reverse — it would cancel direction:rtl * and restore LTR order (double-reverse = LTR). ✗ * ================================================================ */ @media (min-width:901px) { /* Hero: direction:rtl puts hero-content (first DOM child) on RIGHT, * hero-visual on LEFT — correct for Arabic. ✓ * hero-content is column-flex: align-items:flex-start = RIGHT in RTL. */ [dir="rtl"] .hero-content { text-align:right; align-items:flex-start; } [dir="rtl"] .hero-title { text-align:right; } [dir="rtl"] .hero-subtitle { text-align:right; max-width:100%; } /* flex-start in RTL row = RIGHT ✓ */ [dir="rtl"] .hero-buttons { justify-content:flex-start; } /* AI Chef: direction:rtl puts ai-chef-content (first DOM child) on RIGHT, * ai-chef-visual on LEFT — correct for Arabic. ✓ */ [dir="rtl"] .ai-chef-content { text-align:right; } [dir="rtl"] .ai-chef-content h2, [dir="rtl"] .ai-chef-content p { text-align:right; } /* column-flex: flex-start = RIGHT in RTL ✓ */ [dir="rtl"] .ai-features-grid { align-items:flex-start; } /* How-it-works */ [dir="rtl"] .how-step, [dir="rtl"] .how-step h3, [dir="rtl"] .how-step p { text-align:right; } /* Footer brand: column-flex, align-items:flex-start = RIGHT in RTL ✓ */ [dir="rtl"] .footer-brand { display:flex; flex-direction:column; align-items:flex-start; text-align:right; } [dir="rtl"] .footer-brand p { text-align:right; max-width:280px; } [dir="rtl"] .footer-col h4 { text-align:right; } /* column-flex list: flex-start = RIGHT in RTL ✓ */ [dir="rtl"] .footer-col ul { align-items:flex-start; } [dir="rtl"] .footer-col ul a { text-align:right; } [dir="rtl"] .footer-bottom p { text-align:right; } } /* ================================================================ * RTL — MOBILE (max-width:900px) → centred stacked layout * ================================================================ */ @media (max-width:900px) { [dir="rtl"] .hero-content { align-items:center !important; text-align:center !important; } [dir="rtl"] .hero-title { text-align:center !important; } [dir="rtl"] .hero-subtitle { text-align:center !important; } [dir="rtl"] .hero-buttons { justify-content:center !important; } [dir="rtl"] .hero-badge { justify-content:center; flex-wrap:wrap; } [dir="rtl"] .ai-chef-content { text-align:center !important; } [dir="rtl"] .ai-chef-content h2, [dir="rtl"] .ai-chef-content p { text-align:center !important; } [dir="rtl"] .ai-features-grid { align-items:center !important; } [dir="rtl"] .ai-feature-item { justify-content:center; } [dir="rtl"] .ai-feature-item h4, [dir="rtl"] .ai-feature-item p { text-align:center !important; } } /* ================================================================ * RTL — MOBILE (max-width:768px) * ================================================================ */ @media (max-width:768px) { [dir="rtl"] .how-step, [dir="rtl"] .how-step h3, [dir="rtl"] .how-step p { text-align:center; } [dir="rtl"] .feature-card { text-align:right; } /* Footer: centre all columns like LTR mobile */ [dir="rtl"] .footer-brand { align-items:center !important; text-align:center !important; } [dir="rtl"] .footer-brand p { text-align:center !important; } [dir="rtl"] .footer-col h4 { text-align:center !important; } [dir="rtl"] .footer-col ul { align-items:center !important; } [dir="rtl"] .footer-col ul a { text-align:center !important; } [dir="rtl"] .footer-col .footer-contact-item { justify-content:center; } [dir="rtl"] .footer-bottom { flex-direction:column !important; text-align:center; } [dir="rtl"] .footer-bottom p { text-align:center !important; } [dir="rtl"] .footer-bottom nav { justify-content:center !important; flex-wrap:wrap; } [dir="rtl"] .footer-legal-info { text-align:center !important; } [dir="rtl"] .legal-company-name { text-align:center !important; } [dir="rtl"] .legal-detail { justify-content:center; flex-wrap:wrap; text-align:center !important; } /* Contact: hide duplicate h3+p in .contact-info on mobile */ .contact-info > h3, .contact-info > p { display:none; } } @media (min-width:769px) { .contact-info > h3, .contact-info > p { display:block; } } /* ================================================================ * Mobile Stats + Payment * ================================================================ */ @media (max-width:768px) { .stats-grid { gap:0; padding:24px 0; } .stat-item { padding:0 16px; } .stat-number { font-size:26px; } .payment-methods-strip { flex-direction:column; align-items:center; gap:12px; padding:16px 0 20px; } .payment-methods-label { text-align:center; } .payment-icons { gap:8px; } .pay-icon { padding:4px 8px; height:30px; } } @media (max-width:480px) { .stats-grid { flex-wrap:wrap; } .stat-item { min-width:45%; } .stat-sep { display:none; } .payment-methods-strip { align-items:center; } .payment-methods-label { text-align:center; } .payment-icons { justify-content:center; } }