/* ══════════════════════════════════════════════════════════════ UNIVERSAL ENQUIRY MODAL · enquiry-modal.css Add inside (after main.css) ══════════════════════════════════════════════════════════════ */ /* ── Overlay ────────────────────────────────────────────────── */ .eq-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 6, 30, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* Animate in */ opacity: 0; transition: opacity 0.25s ease; } .eq-overlay.eq-visible { opacity: 1; } /* hidden state (uses HTML hidden attr as base; JS swaps classes) */ .eq-overlay[hidden] { display: none !important; } /* ── Card ───────────────────────────────────────────────────── */ .eq-card { position: relative; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; background: var(--white, #fff); border-radius: 20px; padding: 44px 44px 36px; box-shadow: 0 32px 80px rgba(10, 6, 30, 0.35); /* Slide-up animate */ transform: translateY(28px); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .eq-overlay.eq-visible .eq-card { transform: translateY(0); } /* Subtle purple top-border accent */ .eq-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--purple, #3b1f6e), var(--gold, #c9a84c)); border-radius: 20px 20px 0 0; } /* ── Close button ───────────────────────────────────────────── */ .eq-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; background: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #888); cursor: pointer; transition: background 0.18s, color 0.18s; } .eq-close:hover { background: var(--bg-soft, #f5f2ff); color: var(--purple, #3b1f6e); } /* ── Header ─────────────────────────────────────────────────── */ .eq-header { margin-bottom: 28px; } .eq-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 6px 0 8px; color: var(--text-dark, #1a1a2e); line-height: 1.2; } .eq-subtitle { font-size: 0.9rem; color: var(--text-muted, #777); margin: 0; } /* ── Form inherits ct-form styles from contact page ─────────── */ /* (ct-field, ct-input-wrap, ct-form-row, etc. already in main.css) */ .eq-form .ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── Send error banner ──────────────────────────────────────── */ .eq-send-error { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 16px; background: #fff2f2; border: 1px solid #ffcdd2; border-radius: 8px; color: #c62828; font-size: 0.88rem; } /* ── Scrollbar (thin, branded) ──────────────────────────────── */ .eq-card::-webkit-scrollbar { width: 5px; } .eq-card::-webkit-scrollbar-thumb { background: var(--purple-light, #c9b8f0); border-radius: 4px; } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 600px) { .eq-card { padding: 36px 22px 28px; border-radius: 16px; } .eq-form .ct-form-row { grid-template-columns: 1fr; } }