/* ========================================================================== "ابدأ الآن" modal — replaces the login/register buttons on the landing page. ========================================================================== */ .start-now-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; /* No backdrop-filter: measured at ~15fps with it on, even with the hero's blobs paused behind it (site-content.js still stamps start-now-open on , harmless either way) — the filter itself is expensive here, not just the animation behind it. Same call glass.css already made for the dashboard cards ("the most expensive thing this file could possibly ask for"). A solid scrim keeps the open/close transition smooth. */ background: rgba(0, 0, 0, 0.72); animation: start-now-fade-in 0.25s ease; } .start-now-overlay[hidden] { display: none; } @keyframes start-now-fade-in { from { opacity: 0; } to { opacity: 1; } } .start-now-modal { position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 2rem 1.75rem 1.75rem; border-radius: 20px; background: var(--surface, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); animation: start-now-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="dark"] .start-now-modal { background: var(--surface, #1e1e2e); } @keyframes start-now-pop-in { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .start-now-close { position: absolute; top: 0.75rem; left: 0.75rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: var(--text, #333); font-size: 1.1rem; cursor: pointer; transition: background 0.2s, transform 0.2s; } .start-now-close:hover { background: rgba(0, 0, 0, 0.12); transform: rotate(90deg); } [data-theme="dark"] .start-now-close { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .start-now-close:hover { background: rgba(255, 255, 255, 0.2); } .start-now-title { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 800; text-align: center; color: var(--text, #1a1a2e); } [data-theme="dark"] .start-now-title { color: var(--text, #f0f0f0); } .start-now-subtitle { margin: 0 0 1rem; font-size: 1rem; text-align: center; color: var(--text-muted, #666); } [data-theme="dark"] .start-now-subtitle { color: var(--text-muted, #aaa); } .start-now-body { margin-bottom: 1.25rem; font-size: 0.95rem; line-height: 1.7; text-align: center; white-space: pre-line; color: var(--text, #444); } [data-theme="dark"] .start-now-body { color: var(--text, #ccc); } .start-now-links { display: flex; flex-direction: column; gap: 0.6rem; } .start-now-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; border-radius: 12px; font-size: 1rem; font-weight: 600; text-decoration: none; text-align: center; justify-content: center; color: #fff; background: var(--brand, #667eea); transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; cursor: pointer; border: none; } .start-now-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); opacity: 0.92; } .start-now-link i { font-size: 1.2rem; } /* Brand-coloured variants — the admin picks the icon, the CSS picks the colour from the icon name so WhatsApp is green, login is blue, etc. */ .start-now-link.icon-whatsapp { background: #25d366; } .start-now-link.icon-telegram { background: #0088cc; } .start-now-link.icon-facebook-f { background: #1877f2; } .start-now-link.icon-youtube { background: #ff0000; } .start-now-link.icon-instagram { background: #e4405f; } .start-now-link.icon-phone { background: #25d366; } .start-now-link.icon-envelope { background: #ea4335; } /* Mobile */ @media (max-width: 480px) { .start-now-modal { padding: 1.75rem 1.25rem 1.25rem; } .start-now-title { font-size: 1.35rem; } .start-now-subtitle { font-size: 0.9rem; } .start-now-body { font-size: 0.88rem; } }