/* ═══════════════════════════════════════════════════ COMING SOON POPUP — Matches muslimglobe.com theme Paste CSS in your style.css or inside ═══════════════════════════════════════════════════ */ #mg-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.75); animation: mgOverlayIn 0.4s ease both; } @keyframes mgOverlayIn { from { opacity: 0; } to { opacity: 1; } } #mg-dialog { position: relative; width: 100%; max-width: 500px; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.7); animation: mgDialogIn 0.45s cubic-bezier(0.34,1.4,0.64,1) both; animation-delay: 0.1s; } @keyframes mgDialogIn { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Header bar — matches .top-bar gradient from site ── */ .mg-header { background: linear-gradient(135deg, #f89d5a 0%, #e8732a 50%, #c95c1a 100%); padding: 28px 32px 22px; text-align: center; position: relative; } .mg-header::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .mg-crescent-icon { font-size: 48px; color: white; display: block; margin-bottom: 10px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); position: relative; z-index: 1; animation: mgFloat 3s ease-in-out infinite; } @keyframes mgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px);} } .mg-header h2 { font-family: 'Open Sans', Arial, sans-serif; font-size: 28px; font-weight: 800; color: #ffffff; margin: 0 0 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.25); letter-spacing: 1px; text-transform: uppercase; position: relative; z-index: 1; } .mg-header h2 span { color: #fff9e6; } .mg-header p { font-size: 13px; color: rgba(255,255,255,0.85); margin: 0; position: relative; z-index: 1; } /* ── Body — matches site's white/light sections ── */ .mg-body { background: #ffffff; padding: 28px 32px; } /* ── Stats row ── */ .mg-stats { display: flex; gap: 0; margin-bottom: 24px; border: 1px solid #f0f0f0; border-radius: 4px; overflow: hidden; } .mg-stat { flex: 1; text-align: center; padding: 14px 8px; border-right: 1px solid #f0f0f0; } .mg-stat:last-child { border-right: none; } .mg-stat strong { display: block; font-size: 20px; font-weight: 800; color: #e8732a; font-family: 'Open Sans', Arial, sans-serif; line-height: 1; margin-bottom: 4px; } .mg-stat span { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 1px; } /* ── Features list — matches site's .features ul.right style ── */ .mg-feature-list { list-style: none; padding: 0; margin: 0 0 24px; } .mg-feature-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f5f5f5; font-size: 13.5px; color: #555; font-family: Arial, sans-serif; line-height: 1.4; } .mg-feature-list li:last-child { border-bottom: none; } .mg-feature-list li .fa { color: #e8732a; font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; } .mg-feature-list li .mg-new { margin-left: auto; background: #e8732a; color: white; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; } /* ── Buttons — matches .btn-download from site ── */ .mg-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .mg-btn-android { flex: 1; min-width: 140px; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #e8732a, #c95c1a); color: #ffffff !important; text-decoration: none; padding: 11px 20px; border-radius: 4px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 3px 12px rgba(232,115,42,0.4); text-transform: uppercase; letter-spacing: 0.5px; } .mg-btn-android:hover { opacity: 0.9; transform: translateY(-1px); } .mg-btn-android .fa { font-size: 22px; } .mg-btn-close { flex: 1; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: #999; border: 1px solid #ddd; padding: 11px 20px; border-radius: 4px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; } .mg-btn-close:hover { background: #f8f8f8; color: #555; border-color: #ccc; } /* ── Footer strip — matches site's dark footer tone ── */ .mg-footer { background: #222222; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .mg-footer p { font-size: 11px; color: rgba(255,255,255,0.4); margin: 0; font-family: Arial, sans-serif; } .mg-footer .mg-social { display: flex; gap: 10px; } .mg-footer .mg-social a { color: rgba(255,255,255,0.35); font-size: 13px; text-decoration: none; transition: color 0.2s; } .mg-footer .mg-social a:hover { color: #e8732a; } /* ── X close button ── */ #mg-close-x { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; color: white; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; line-height: 1; } #mg-close-x:hover { background: rgba(255,255,255,0.35); } /* ── Dismiss animation ── */ #mg-overlay.mg-out { animation: mgFadeOut 0.3s ease forwards; } @keyframes mgFadeOut { to { opacity: 0; pointer-events: none; } } /* ── Demo page background ── */ /* body { margin: 0; min-height: 100vh; background: #1a1a1a; }*/