/* YallaTonight Marketplace 2026 - Master Luxury Glassmorphism & Dual-Vibe Theme System */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Readex+Pro:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap'); :root { --font-primary: 'Cairo', 'Tajawal', sans-serif; --font-heading: 'Readex Pro', 'Tajawal', sans-serif; --bg-dark: #07070e; --bg-card: rgba(18, 18, 32, 0.65); --bg-card-hover: rgba(26, 26, 46, 0.85); --border-glass: rgba(255, 255, 255, 0.08); --border-gold: rgba(212, 175, 55, 0.4); --primary-gold: #d4af37; --primary-gold-glow: rgba(212, 175, 55, 0.3); --accent-purple: #8b5cf6; --accent-cyan: #06b6d4; --accent-neon-blue: #00f0ff; --text-main: #f8fafc; --text-muted: #94a3b8; --text-dim: #64748b; --radius-lg: 18px; --radius-md: 12px; --radius-pill: 9999px; --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --blur-glass: blur(16px); } body { background-color: var(--bg-dark); color: var(--text-main); font-family: var(--font-primary); margin: 0; padding: 0; line-height: 1.6; /* NO `direction` here. It used to be hard-coded to rtl, which overrode the correct `dir` attribute that header.php sets from the active language — so every English page rendered right-to-left and pushed its punctuation to the wrong side (".Book exclusive…", "?What is your mood today"). Direction belongs to the attribute alone; the rule below only restates it for Arabic so this file stays self-consistent. */ } html[dir="rtl"] body { direction: rtl; } html[dir="ltr"] body { direction: ltr; } /* Dual-Vibe Split Banner Styles */ .dual-vibe-container { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border-glass); } @media (max-width: 900px) { .dual-vibe-container { grid-template-columns: 1fr; } } .vibe-card { position: relative; padding: 60px 40px; display: flex; flex-direction: column; justify-content: center; transition: flex 0.4s ease, filter 0.4s ease; overflow: hidden; } .vibe-card.day-vibes { background: linear-gradient(135deg, rgba(6, 182, 212, 0.4) 0%, rgba(30, 58, 138, 0.8) 100%), url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=1200') center/cover no-repeat; } .vibe-card.night-vibes { background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(15, 15, 26, 0.9) 100%), url('https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?q=80&w=1200') center/cover no-repeat; } .vibe-card .vibe-badge { display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.85rem; margin-bottom: 12px; width: fit-content; } .day-vibes .vibe-badge { background: rgba(6, 182, 212, 0.25); color: var(--accent-cyan); border: 1px solid rgba(6, 182, 212, 0.4); } .night-vibes .vibe-badge { background: rgba(139, 92, 246, 0.25); color: var(--accent-purple); border: 1px solid rgba(139, 92, 246, 0.4); } .vibe-title { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 800; margin: 0 0 12px 0; line-height: 1.2; color: #ffffff; } .vibe-desc { font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; max-width: 480px; } /* Floating Mood Search Widget */ .mood-search-wrapper { position: relative; margin-top: -40px; z-index: 10; padding: 0 20px; max-width: 1000px; margin-left: auto; margin-right: auto; } .search-bar-3field { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 12px; background: rgba(15, 15, 26, 0.85); border: 1px solid var(--border-gold); border-radius: var(--radius-pill); padding: 12px 24px; backdrop-filter: blur(20px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } @media (max-width: 768px) { .search-bar-3field { grid-template-columns: 1fr; border-radius: var(--radius-lg); } } .search-field { display: flex; flex-direction: column; border-left: 1px solid var(--border-glass); padding-left: 16px; } .search-field:last-of-type { border-left: none; } .search-field label { font-size: 0.75rem; color: var(--primary-gold); font-weight: 700; } .search-field input, .search-field select { background: transparent; border: none; color: var(--text-main); font-family: var(--font-primary); font-size: 0.95rem; outline: none; padding: 4px 0; } .btn-primary-gold { background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%); color: #000; font-family: var(--font-heading); font-weight: 800; padding: 14px 36px; border-radius: var(--radius-pill); border: none; cursor: pointer; box-shadow: 0 4px 20px var(--primary-gold-glow); transition: transform 0.2s, box-shadow 0.2s; font-size: 1rem; } .btn-primary-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(212, 175, 55, 0.5); } /* Category Chips Grid */ .category-chips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 50px 0; } .chip-card { background: var(--bg-card); backdrop-filter: var(--blur-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; color: var(--text-main); } .chip-card:hover { background: var(--bg-card-hover); border-color: var(--border-gold); transform: translateY(-4px); box-shadow: 0 10px 30px var(--primary-gold-glow); } .chip-icon { width: 50px; height: 50px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: rgba(212, 175, 55, 0.1); color: var(--primary-gold); } .chip-info h4 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 4px 0; } .chip-info p { font-size: 0.8rem; color: var(--text-muted); margin: 0; } /* Section Titles */ .section-title-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .section-title-wrap h2 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--primary-gold); margin: 0; display: flex; align-items: center; gap: 10px; } /* Order Tracking & E-Ticket Showcase Section (Image 1 Mockup Source of Truth) */ .pic-tracking-section { background: linear-gradient(135deg, rgba(241, 245, 249, 0.96) 0%, rgba(238, 242, 255, 0.96) 100%); border-radius: 28px; padding: 48px 36px; margin: 60px 0; color: #0f172a; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } .pic-tracking-header { text-align: center; margin-bottom: 40px; } .pic-tracking-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; } .pic-tracking-sub { font-size: 1.1rem; color: #475569; margin: 0; } .pic-tracking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } @media (max-width: 900px) { .pic-tracking-grid { grid-template-columns: 1fr; } } .pic-ticket-phone-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .pic-eticket-card { background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 1px dashed #cbd5e1; max-width: 260px; width: 100%; } .pic-phone-mockup { background: #0f172a; border-radius: 36px; padding: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); border: 4px solid #334155; max-width: 240px; width: 100%; } .pic-tracking-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pic-widget-box { background: #ffffff; border-radius: 18px; padding: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; } /* ============================================================================ FLOATING WIDGET RAILS ---------------------------------------------------------------------------- Seven independently-positioned fixed elements were landing on top of each other in the bottom corners (measured on the live homepage, 2026-09-07): right rail .premium-scroll-top bottom 30px h48 -> 30-78 #backToTop bottom 22px h46 -> 22-68 OVERLAP .whatsapp-concierge-pill bottom 80px h44 -> 80-124 #aiChatWidget bottom 90px h60 -> 90-150 OVERLAP left rail #ytobHelpBtn bottom 20px h46 -> 20-66 #liveActivityTicker bottom 28px h93 -> 28-121 OVERLAP Each was authored in its own file with no knowledge of the others. Rather than chase them one by one, both corners get an explicit stacking order here, in the last stylesheet that loads. Sizes are untouched — only the bottom offsets, so nothing changes except that the widgets stop colliding. ========================================================================= */ /* Right rail, bottom-up: scroll-top, WhatsApp pill, AI concierge. */ .premium-scroll-top, html[dir="rtl"] .premium-scroll-top { bottom: 20px !important; } #backToTop { bottom: 20px !important; } .whatsapp-concierge-pill { bottom: 80px !important; } #aiChatWidget { bottom: 136px !important; } /* Left rail, bottom-up: help button, then the live-activity ticker above it. */ #ytobHelpBtn { bottom: 20px !important; } #liveActivityTicker { bottom: 78px !important; } /* Narrow screens carry a bottom nav bar; lift the whole stack clear of it and drop the ticker, which covers a third of a phone screen. */ @media (max-width: 900px) { .premium-scroll-top, html[dir="rtl"] .premium-scroll-top, #backToTop { bottom: 88px !important; } .whatsapp-concierge-pill { bottom: 148px !important; } #aiChatWidget { bottom: 204px !important; } #ytobHelpBtn { bottom: 88px !important; } #liveActivityTicker { display: none !important; } }