/* demo-home: lead-capture modal (Bootstrap 5 modal shell + Crowdo Core skin) */ /* ---------- shell ---------- */ .lead-modal{--bs-modal-zindex:1055} .lead-modal .modal-dialog{max-width:940px;width:calc(100% - 32px);margin-left:auto;margin-right:auto} .lead-modal .modal-content{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--shadow-lg);overflow:hidden; display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch} /* Bootstrap animates .modal-dialog; add the design's subtle scale on top */ .lead-modal.fade .modal-dialog{transform:translateY(14px) scale(.985);transition:transform .34s cubic-bezier(.2,.8,.25,1)} .lead-modal.show .modal-dialog{transform:none} /* Bootstrap renders the backdrop as a sibling of , so it can't be scoped to .lead-modal — demo-home has no other modal, so tuning it globally is safe. */ .modal-backdrop{--bs-backdrop-bg:#0e1018;--bs-backdrop-opacity:.55;backdrop-filter:blur(6px)} /* ---------- close ---------- */ .lead-modal__close{ position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%; border:1px solid var(--line);background:rgba(255,255,255,.75);backdrop-filter:blur(6px); color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:.16s;z-index:2;padding:0} .lead-modal__close:hover,.lead-modal__close:focus-visible{color:var(--ink);border-color:var(--ink);transform:rotate(90deg)} .lead-modal__close:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* ---------- left: form ---------- */ .lead-modal__form{padding:44px 44px 40px;display:grid;gap:var(--s-4);align-content:start;margin:0} .lead-modal__form .eyebrow{justify-self:start} .lead-modal__form h2{font-size:32px;letter-spacing:-1.2px;max-width:12ch} .lead-modal__sub{color:var(--ink-2);font-size:15.5px;margin-top:-14px} .lead-modal__field{display:grid;gap:7px} .lead-modal__field label{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3)} .lead-modal__field input{ font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:500;color:var(--ink); padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fbfcfe; transition:border-color .16s,box-shadow .16s,background .16s} .lead-modal__field input::placeholder{color:var(--ink-3);font-weight:400} .lead-modal__field input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--blue-soft)} .lead-modal__form .btn--cta{width:100%;padding:17px 26px;font-size:16.5px} .lead-modal__form.submitting .btn{opacity:.6;pointer-events:none} .lead-modal__trust{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-3);margin-top:-8px} .lead-modal__consent{font-size:12.5px;line-height:1.5;color:var(--ink-3)} .lead-modal__consent a{color:var(--blue);font-weight:600;border-bottom:1px solid rgba(47,99,246,.3)} .lead-modal__consent a:hover{border-color:var(--blue)} .lead-modal__form .form-message{margin-top:-8px} /* ---------- right: review ---------- */ .lead-modal__aside{ background:linear-gradient(165deg,#eef2ff 0%,#e8eeff 55%,#eae6ff 100%); padding:48px 44px;display:grid;align-content:center;gap:18px;position:relative;overflow:hidden;height:100%} .lead-modal__aside::after{ content:"";position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(124,92,255,.22),transparent 68%)} .lead-modal__quote{position:relative;margin:0;display:grid;gap:18px;justify-items:start} .lead-modal__quote-mark{color:var(--blue)} .lead-modal__quote p{font-size:16px;line-height:1.62;color:#2a3145;font-weight:500;margin:0} .lead-modal__quote-author{display:flex;align-items:center;gap:12px} .lead-modal__quote-avatar{ width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--blue-soft),var(--violet-soft));border:1px solid var(--line); font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--blue-ink)} .lead-modal__quote-author b{display:block;font-size:15px;font-weight:700;color:var(--ink)} .lead-modal__quote-author small{display:block;font-size:13px;color:var(--ink-3)} @media(max-width:1000px){ /* the form's own h2 carries the headline, so the review follows the form here */ .lead-modal .modal-content{grid-template-columns:1fr;max-height:88vh;overflow-y:auto} .lead-modal__aside{padding:32px 30px} .lead-modal__form{padding:32px 30px 34px} .lead-modal__form h2{font-size:27px;max-width:none} } /* ---------- thank-you modal (shown after a successful lead submit) ---------- */ .thanks-modal{--bs-modal-zindex:1065} .thanks-modal .modal-dialog{max-width:760px;width:calc(100% - 32px);margin-left:auto;margin-right:auto} .thanks-modal .modal-content{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--shadow-lg);padding:70px 56px 74px;text-align:center;align-items:center} .thanks-modal.fade .modal-dialog{transform:translateY(14px) scale(.985);transition:transform .34s cubic-bezier(.2,.8,.25,1)} .thanks-modal.show .modal-dialog{transform:none} .thanks-modal__title{font-size:46px;line-height:1.08;letter-spacing:-1.8px;margin:0} .thanks-modal__sub{color:var(--ink-2);font-size:17px;line-height:1.55;margin:20px auto 0;max-width:52ch} .thanks-modal__cta{margin-top:40px;padding:17px 34px;font-size:16.5px} @media(max-width:700px){ .thanks-modal .modal-content{padding:56px 24px 46px;max-height:88vh;overflow-y:auto} .thanks-modal__title{font-size:30px;letter-spacing:-1.1px} .thanks-modal__sub{font-size:15.5px} .thanks-modal__cta{margin-top:30px;width:100%} }