/* ============================================================ MODAL / POPUP — Charisa Child Theme Triggered by any element with data-modal-trigger="kajabi" Closed by: overlay click, close button, Escape key. ============================================================ */ /* ── OVERLAY ─────────────────────────────────────────────── */ .cm-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(13, 27, 42, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); /* hidden by default */ opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } /* When open — JS adds .cm-open to the overlay */ .cm-overlay.cm-open { opacity: 1; visibility: visible; } /* ── PANEL ───────────────────────────────────────────────── */ .cm-panel { position: relative; background: var(--warm); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; /* Decorative gold top bar */ border-top: 4px solid var(--gold); box-shadow: 0 24px 80px rgba(13, 27, 42, .35); /* Slide up on open */ transform: translateY(24px); transition: transform .35s cubic-bezier(.22, 1, .36, 1); /* Scrollbar styling */ scrollbar-width: thin; scrollbar-color: var(--rule) transparent; } .cm-overlay.cm-open .cm-panel { transform: translateY(0); } /* ── CLOSE BUTTON ────────────────────────────────────────── */ .cm-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; color: var(--text-lt); font-size: 1.1rem; line-height: 1; transition: background .2s, border-color .2s, color .2s; z-index: 2; /* Min touch target */ min-width: 44px; min-height: 44px; } .cm-close:hover { background: var(--cream); border-color: var(--navy); color: var(--navy); } /* ── PANEL INNER PADDING ─────────────────────────────────── */ .cm-body { padding: clamp(36px, 5vw, 56px); } /* ── EYEBROW ─────────────────────────────────────────────── */ .cm-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk); background: rgba(201, 168, 76, .1); padding: 4px 12px; margin-bottom: 20px; } /* ── HEADLINE ────────────────────────────────────────────── */ .cm-title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.18; color: var(--navy); margin-bottom: 12px; } .cm-title em { color: var(--gold); font-style: italic; } /* ── SUBTEXT ─────────────────────────────────────────────── */ .cm-sub { font-size: clamp(.85rem, 1.2vw, .95rem); color: var(--text-md); line-height: 1.78; margin-bottom: 28px; } /* ── KAJABI FORM WRAPPER INSIDE MODAL ────────────────────── */ /* kajabi-forms.css handles the input/button styling. These rules just ensure the form sits flush in the panel. */ .cm-body .kajabi-embed, .cm-body .magnet-form { margin: 0; } /* ── DISCLAIMER ──────────────────────────────────────────── */ .cm-note { font-size: .68rem; color: var(--text-lt); font-style: italic; margin-top: 14px; text-align: center; } /* ── DECORATIVE GOLD RULE ────────────────────────────────── */ .cm-rule { height: 1px; background: var(--rule); margin: 28px 0; } /* ── MOBILE ──────────────────────────────────────────────── */ @media (max-width: 640px) { .cm-overlay { align-items: flex-end; /* sheet slides up from bottom on mobile */ padding: 0; } .cm-panel { max-width: 100%; border-radius: 0; border-top: 4px solid var(--gold); max-height: 92vh; } .cm-body { padding: 32px 24px 40px; } } /* ── PREVENT BODY SCROLL WHEN MODAL IS OPEN ──────────────── */ /* JS adds this class to on open, removes on close */ body.cm-active { overflow: hidden; }