.pv-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.88);
}
.pv-modal-overlay.is-open {
display: flex;
}
.pv-modal {
position: relative;
width: min(100%, 520px);
padding: 42px 52px;
background: #000000;
border-radius: 0;
box-shadow: none;
color: #ffffff;
}
.pv-modal h2 {
margin: 0 0 26px 0;
font-size: 24px;
line-height: 1.2;
text-align: center;
color: #ffffff;
}
.pv-modal-intro {
margin: 0 0 20px;
color: #d1d5db;
font-size: 15px;
line-height: 1.5;
text-align: center;
}
.pv-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: transparent;
color: #ffffff;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.pv-modal-close:hover,
.pv-modal-close:focus {
background: rgba(255, 255, 255, 0.1);
}
.pv-modal-view {
display: none;
}
.pv-modal-view.is-active {
display: block;
}
.pv-problem-view h2 {
font-size: 24px;
font-weight: 800;
line-height: 1.4;
}
.pv-sales-funnel-form-view.is-active,
.pv-marketing-examples-form-view.is-active {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: 48px;
align-items: center;
width: min(100vw - 48px, 840px);
}
.pv-modal-overlay.is-wide-offer-form .pv-modal {
width: min(100%, 840px);
padding: 22px 0 28px;
}
.pv-modal-overlay.is-grow-business-form .pv-modal {
width: min(100%, 640px);
padding: 38px 64px 34px;
}
.pv-offer-art {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.pv-offer-art img {
display: block;
width: min(100%, 320px);
height: auto;
}
.pv-grow-business-form-view.is-active {
display: block;
width: 100%;
}
.pv-modal-overlay.is-form-view .pv-grow-business-form-view .pv-modal-form {
padding: 0;
gap: 14px;
}
.pv-grow-business-form-view .pv-modal-form h2 {
margin: 0 0 12px;
font-size: 24px;
font-weight: 800;
line-height: 1.45;
text-align: center;
}
.pv-grow-business-form-view .pv-modal-submit {
justify-self: stretch;
border-radius: 20px;
}
.pv-audience-options {
display: grid;
gap: 10px;
}
.pv-audience-option {
width: 100%;
min-height: 45px;
border: 0;
border-radius: 20px;
background: #19aa7c;
color: #000000;
font: inherit;
font-size: 14px;
cursor: pointer;
}
.pv-audience-option:hover,
.pv-audience-option:focus {
background: #22c08e;
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: 2px;
}
.pv-modal-form {
display: grid;
padding: 30px 40px 10px 0;
gap: 8px;
align-content: center;
}
.pv-modal-form h2 {
margin: 0 0 22px;
font-size: 25px;
line-height: 1.45;
text-align: left;
}
.pv-modal-form .pv-modal-intro {
margin: 0 0 14px;
color: #ffffff;
font-size: 16px;
font-weight: 400;
line-height: 1.45;
text-align: left;
}
.pv-modal-field {
display: grid;
margin: 0;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.pv-screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pv-modal-field input,
.pv-modal-field textarea {
width: 100%;
box-sizing: border-box;
border: 2px solid #bcbcbc;
border-radius: 0;
padding: 14px 16px;
font: inherit;
font-size: 14px;
font-weight: 700;
color: #111827;
background: #ffffff;
}
.pv-modal-field input::placeholder {
color: #8b8b8b;
opacity: 1;
}
.pv-modal-form .pv-modal-field:first-of-type input {
background: #262626;
color: #ffffff;
}
.pv-modal-field input:focus,
.pv-modal-field textarea:focus {
outline: 2px solid #19aa7c;
outline-offset: 2px;
border-color: #ffffff;
}
.pv-modal-status {
min-height: 20px;
color: #22c08e;
font-size: 14px;
}
.pv-modal-status.is-error {
color: #b91c1c;
}
.pv-modal-submit,
.pv-modal-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 20px;
padding: 14px 22px;
background: #19aa7c;
color: #000000;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.pv-modal-submit {
justify-self: start;
min-width: 194px;
margin-top: 0;
}
.pv-modal-submit:hover,
.pv-modal-trigger:hover,
.pv-modal-submit:focus,
.pv-modal-trigger:focus {
background: #22c08e;
}
.pv-modal-submit:disabled {
cursor: wait;
opacity: 0.72;
}
@media (max-width: 760px) {
.pv-modal-overlay {
padding: 16px;
}
.pv-modal {
padding: 34px 20px 24px;
}
.pv-modal-overlay.is-wide-offer-form .pv-modal,
.pv-modal-overlay.is-grow-business-form .pv-modal {
width: min(100%, 520px);
padding: 34px 20px 24px;
}
.pv-sales-funnel-form-view.is-active,
.pv-marketing-examples-form-view.is-active {
grid-template-columns: 1fr;
gap: 18px;
width: 100%;
}
.pv-offer-art {
display: none;
}
.pv-offer-art img {
width: min(100%, 260px);
}
.pv-modal h2 {
font-size: 22px;
}
.pv-modal-form {
padding: 20px 0 0 0;
}
.pv-modal-form h2,
.pv-modal-form .pv-modal-intro {
text-align: center;
}
.pv-modal-submit {
justify-self: stretch;
}
}