/* ═══════════════════════════════════════════════════ Cenection — Modal de Aviso do Site Substitui os alert() nativos do navegador por uma janela própria, no padrão visual do site. ═══════════════════════════════════════════════════ */ .site-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(30, 20, 55, 0.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; padding: 20px; } .site-modal-overlay.is-visible { opacity: 1; visibility: visible; } .site-modal { background: #ffffff; border-radius: 16px; max-width: 400px; width: 100%; padding: 28px 28px 24px; text-align: center; box-shadow: 0 20px 50px rgba(75, 46, 131, 0.35); transform: translateY(-12px) scale(0.97); transition: transform 0.2s ease; } .site-modal-overlay.is-visible .site-modal { transform: translateY(0) scale(1); } .site-modal-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .site-modal-icon svg { width: 26px; height: 26px; } /* Tipos */ .site-modal--info .site-modal-icon { background: #6a3ea740; color: #6a3ea7; } .site-modal--error .site-modal-icon { background: #ef444442; color: #ef4444; } .site-modal--warning .site-modal-icon { background: #f59f0b55; color: #f59e0b; } .site-modal-message { color: #1e293b; font-size: 1rem; line-height: 1.5; margin-bottom: 22px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .site-modal-btn { background: linear-gradient(135deg, #6a3ea7, #4B2E83); color: #ffffff; border: none; border-radius: 50px; padding: 10px 28px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: inherit; } .site-modal-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(106, 62, 167, 0.35); } /* ===== Confirmação (dois botões) ===== */ .site-modal-actions { display: flex; gap: 12px; justify-content: center; } .site-modal-btn--secondary { background: #f1f5f9; color: #334155; } .site-modal-btn--secondary:hover { box-shadow: 0 8px 20px rgba(51, 65, 85, 0.15); } .site-modal-btn--danger { background: linear-gradient(135deg, #ef4444, #b91c1c); } .site-modal-btn--danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35); } /* Modo escuro — segue o mesmo padrão do resto do site: atributo [data-theme="dark"] na tag , com as variáveis definidas em css/dark-mode.css */ [data-theme="dark"] .site-modal-overlay { background: rgba(10, 6, 20, 0.7); } [data-theme="dark"] .site-modal { background: var(--dark-surface, #4B2E83); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .site-modal-message { color: var(--dark-text, #e8e8f0); } [data-theme="dark"] .site-modal-btn--secondary { background: var(--dark-input-bg, #3a2550); color: var(--dark-text, #e8e8f0); }