/* ═══════════════════════════════════════════════════════════ Lead popup — reusable модальное окно с формой Triggered by any element with [data-popup="lead"] Lives OUTSIDE #scale-wrapper (injected to ) ═══════════════════════════════════════════════════════════ */ .lead-popup { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .lead-popup.is-open { display: flex; } .lead-popup__backdrop { position: absolute; inset: 0; background: rgba(18, 19, 19, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lead-popup__frame { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--color-dark); color: var(--color-cocane); border-radius: 32px; padding: 48px 40px 40px; z-index: 1; } .lead-popup__close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--color-cocane); cursor: pointer; transition: background 0.2s ease; padding: 0; } .lead-popup__close:hover { background: rgba(255, 255, 255, 0.16); } .lead-popup__close svg { width: 16px; height: 16px; } .lead-popup__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .lead-popup__title { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.2; text-transform: uppercase; margin: 0; } .lead-popup__desc { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--color-grey); margin: 0; } .lead-popup__form { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; } .lead-popup__fields { display: flex; flex-direction: column; gap: 12px; width: 100%; } .lead-popup__input, .lead-popup__textarea { width: 100%; padding: 18px 20px; border: 1px solid var(--color-grey); border-radius: 16px; background: transparent; font-family: 'Onest', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: -0.14px; color: var(--color-cocane); outline: none; transition: border-color 0.2s ease; } .lead-popup__textarea { height: 100px; resize: none; } .lead-popup__input::placeholder, .lead-popup__textarea::placeholder { color: var(--color-grey); } .lead-popup__input:focus, .lead-popup__textarea:focus { border-color: var(--color-cocane); } /* Invalid state */ .lead-popup__input.is-invalid, .lead-popup__phone-row.has-error .lead-popup__phone { border-color: var(--color-pink); } .lead-popup__error-label { display: block; font-family: 'Onest', sans-serif; font-size: 12px; line-height: 1.3; color: var(--color-pink); margin-top: -6px; padding-left: 4px; } .lead-popup__textarea-group { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* Phone row — country code select + phone input */ .lead-popup__phone-row { display: flex; gap: 8px; width: 100%; } .lead-popup__country { flex: 0 0 auto; width: 126px; padding: 16px 36px 16px 18px; border: 1px solid var(--color-grey); border-radius: 16px; background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; font-family: 'Onest', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: 0.4px; color: var(--color-cocane); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 0.2s ease; } .lead-popup__country:focus { border-color: var(--color-cocane); } .lead-popup__country option { background: #1A1A1B; color: var(--color-cocane); } .lead-popup__phone { flex: 1 1 auto; min-width: 0; } .lead-popup__counter { font-family: 'Onest', sans-serif; font-size: 12px; line-height: 1.3; color: var(--color-grey); align-self: flex-start; } .lead-popup__submit { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.4; text-transform: uppercase; color: var(--color-lime); transition: opacity 0.2s ease; } .lead-popup__submit:hover { opacity: 0.75; } .lead-popup__submit:disabled { opacity: 0.4; cursor: not-allowed; } .lead-popup__submit-icon { width: 20px; height: 20px; } /* States — success / error */ .lead-popup__state { display: none; flex-direction: column; gap: 16px; align-items: flex-start; padding: 24px 0; } .lead-popup.is-success .lead-popup__form, .lead-popup.is-error .lead-popup__form, .lead-popup.is-success .lead-popup__head, .lead-popup.is-error .lead-popup__head { display: none; } .lead-popup.is-success .lead-popup__success, .lead-popup.is-error .lead-popup__error { display: flex; } .lead-popup__state-title { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; text-transform: uppercase; margin: 0; } .lead-popup__state-text { font-family: 'Onest', sans-serif; font-size: 14px; line-height: 1.4; color: var(--color-grey); margin: 0; } .lead-popup__success .lead-popup__state-title { color: var(--color-lime); } .lead-popup__error .lead-popup__state-title { color: var(--color-pink); } /* Mobile */ @media (max-width: 1199px) { .lead-popup { padding: 12px; } .lead-popup__frame { border-radius: 24px; padding: 40px 20px 24px; } .lead-popup__title { font-size: 22px; } .lead-popup__close { top: 12px; right: 12px; } .lead-popup__head { margin-bottom: 24px; } .lead-popup__country { width: 110px; padding: 16px 30px 16px 14px; background-position: right 10px center; font-size: 16px; } } /* Body lock when popup is open */ body.lead-popup-open { overflow: hidden; }