/* ========================================================= RAMADAN THEME (CLEAN + SAFE) Enable: Goals: - Unified night background across ALL sections - Visible stars (bigger + more) - Crescent fully visible (not clipped) - Lantern in navbar (desktop + mobile, RTL) - Footer stays dark like navbar ========================================================= */ /* ---------- 0) SAFETY: create a stable stacking context ---------- */ html, body { height: 100%; } html body.ramadan{ position: relative; background: #071821 !important; color: rgba(255,255,255,0.92) !important; } /* ---------- 1) GLOBAL BACKGROUND LAYERS (ALWAYS BEHIND CONTENT) ---------- */ /* gradient atmosphere (deep layer) */ html body.ramadan::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1000px 700px at 18% 12%, rgba(0, 190, 210, 0.14), transparent 60%), radial-gradient(900px 700px at 85% 25%, rgba(255, 210, 130, 0.11), transparent 62%), linear-gradient(135deg, #04141a 0%, #07212c 45%, #06131c 100%); } /* stars layer (must stay behind text) */ html body.ramadan::after{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .75; background: /* larger brighter stars */ radial-gradient(circle at 10% 18%, rgba(255,255,255,.90) 2.6px, transparent 3.3px), radial-gradient(circle at 22% 35%, rgba(255,255,255,.78) 2.4px, transparent 3.1px), radial-gradient(circle at 36% 14%, rgba(255,255,255,.86) 2.8px, transparent 3.4px), radial-gradient(circle at 48% 28%, rgba(255,255,255,.70) 2.3px, transparent 3.0px), radial-gradient(circle at 60% 16%, rgba(255,255,255,.88) 2.9px, transparent 3.6px), radial-gradient(circle at 74% 26%, rgba(255,255,255,.72) 2.4px, transparent 3.1px), radial-gradient(circle at 86% 18%, rgba(255,255,255,.82) 2.7px, transparent 3.4px), radial-gradient(circle at 92% 34%, rgba(255,255,255,.70) 2.2px, transparent 2.9px), /* extra spread stars */ radial-gradient(circle at 14% 60%, rgba(255,255,255,.55) 2.0px, transparent 2.7px), radial-gradient(circle at 30% 78%, rgba(255,255,255,.50) 1.9px, transparent 2.6px), radial-gradient(circle at 55% 70%, rgba(255,255,255,.48) 1.9px, transparent 2.6px), radial-gradient(circle at 78% 62%, rgba(255,255,255,.50) 2.0px, transparent 2.7px), radial-gradient(circle at 90% 78%, rgba(255,255,255,.46) 1.8px, transparent 2.5px); animation: ramadanTwinkle 7.5s ease-in-out infinite; } @keyframes ramadanTwinkle{ 0%,100% { opacity: .58; } 50% { opacity: .82; } } /* hide old corner deco if exists */ html body.ramadan .ramadan-corner{ display:none !important; } /* ---------- 2) UNIFY SECTION BACKGROUNDS (STOP DARK BLOCKS) ---------- */ /* Put content above background layers (BUT keep header fixed) */ html body.ramadan section, html body.ramadan footer{ position: relative; z-index: 5; } html body.ramadan header{ z-index: 900 !important; /* same as global header stacking */ position: fixed !important; /* force it to stay at the very top */ top: 0 !important; left: 0 !important; width: 100% !important; } /* remove any solid section backgrounds from other css */ html body.ramadan section, html body.ramadan .services, html body.ramadan .promotions, html body.ramadan #contact-hub, html body.ramadan #unified-form{ background: transparent !important; } /* keep section overlay very soft (if global section::before exists) */ html body.ramadan section::before{ background: linear-gradient( 180deg, rgba(255, 210, 125, 0.02), rgba(0, 0, 0, 0.28) ) !important; } /* ---------- 3) HERO: CRESCENT + NO CLIPPING ---------- */ html body.ramadan section.hero{ background: transparent !important; overflow: visible !important; /* prevent cutting crescent */ } /* crescent on right (hero only) */ body.ramadan section.hero::after{ content:""; position:absolute; right: 3%; top: 12%; width: 340px; height: 340px; pointer-events:none; z-index: 6; /* above stars layer, below text */ opacity: .92; background-repeat:no-repeat; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='30%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF' stop-opacity='0.55'/%3E%3Cstop offset='55%25' stop-color='%23FFE7B8' stop-opacity='0.98'/%3E%3Cstop offset='100%25' stop-color='%23CFA14F' stop-opacity='0.98'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='400' height='400' fill='black'/%3E%3Ccircle cx='220' cy='200' r='145' fill='white'/%3E%3Ccircle cx='275' cy='175' r='145' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='220' cy='200' r='145' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 18px rgba(255,210,125,.25)) drop-shadow(0 0 55px rgba(255,210,125,.10)); } /* ensure hero text always above crescent */ html body.ramadan section.hero .container, html body.ramadan section.hero .hero-content{ position: relative; z-index: 10 !important; } html body.ramadan .hero-content h1{ color: rgba(255,255,255,.95) !important; text-shadow: 0 12px 34px rgba(0,0,0,0.65); } html body.ramadan .hero-content p{ color: rgba(255,255,255,.82) !important; } /* ---------- 4) GLASS PANELS (PROMOS + CONTACT) ---------- */ html body.ramadan .contact-card, html body.ramadan .promo-slide{ background: rgba(10, 18, 26, 0.45) !important; border: 1px solid rgba(255, 210, 125, 0.10) !important; backdrop-filter: blur(10px); } html body.ramadan .promo-slide{ box-shadow: 0 12px 30px rgba(0,0,0,0.35); } /* IMPORTANT: do NOT touch service-card overlay so images stay clear */ /* ---------- 5) NAVBAR + LANTERN (DESKTOP + MOBILE + RTL) ---------- */ html body.ramadan header{ overflow: visible !important; } html body.ramadan nav.navbar{ overflow: visible !important; background: rgba(6, 10, 16, 0.60) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 210, 125, 0.12) !important; } /* Lantern container */ html body.ramadan nav.navbar .nav-lantern{ display: block !important; position: absolute !important; top: 0 !important; right: 18px !important; width: 54px !important; height: 125px !important; z-index: 99999 !important; pointer-events: none !important; } html body.ramadan.rtl nav.navbar .nav-lantern, html body.ramadan body.rtl nav.navbar .nav-lantern{ right: auto !important; left: 18px !important; } html body.ramadan nav.navbar .nav-lantern .lantern-string{ position: absolute !important; top: 0 !important; left: 50% !important; width: 2px !important; height: 30px !important; transform: translateX(-50%) !important; background: rgba(255, 230, 190, 0.55) !important; border-radius: 2px !important; } html body.ramadan nav.navbar .nav-lantern img{ position: absolute !important; top: 22px !important; left: 50% !important; width: 54px !important; height: auto !important; transform: translateX(-50%) rotate(0deg); transform-origin: 50% 0%; animation: navLanternSwing 4.0s ease-in-out infinite !important; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35)) drop-shadow(0 0 12px rgba(255, 200, 90, 0.25)) !important; opacity: 0.96 !important; } @keyframes navLanternSwing{ 0% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(6deg); } 100% { transform: translateX(-50%) rotate(-6deg); } } @media (prefers-reduced-motion: reduce){ html body.ramadan nav.navbar .nav-lantern img{ animation: none !important; } } /* MOBILE: keep lantern visible + avoid burger */ @media (max-width: 768px){ html body.ramadan nav.navbar .nav-lantern{ display: block !important; top: -8px !important; right: 56px !important; width: 34px !important; height: 90px !important; } html body.ramadan.rtl nav.navbar .nav-lantern, html body.ramadan body.rtl nav.navbar .nav-lantern{ right: auto !important; left: 56px !important; } html body.ramadan nav.navbar .nav-lantern img{ width: 34px !important; top: 16px !important; animation: navLanternSwingMobile 3.2s ease-in-out infinite !important; } @keyframes navLanternSwingMobile{ 0% { transform: translateX(-50%) rotate(-4deg); } 50% { transform: translateX(-50%) rotate(4deg); } 100% { transform: translateX(-50%) rotate(-4deg); } } /* crescent smaller on mobile */ body.ramadan section.hero::after{ width: 190px !important; height: 190px !important; right: 4% !important; top: 10% !important; opacity: .78 !important; } } /* ---------- 6) FOOTER: KEEP DARK LIKE NAV ---------- */ html body.ramadan footer{ background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(5,5,5,0.98)) !important; border-top: 1px solid rgba(255, 210, 125, 0.10); }