.kk-newsletter {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--50, 1.5rem);
background-color: var(--wp--preset--color--ink, #1c1c1c);
color: var(--wp--preset--color--white, #fff);
}
.kk-newsletter__inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem 3rem;
width: 100%;
max-width: var(--wp--style--global--wide-size, 1066px);
margin-inline: auto;
}
.kk-newsletter__copy {
flex: 1 1 auto;
min-width: 0;
max-width: 28rem;
}
.kk-newsletter__heading {
margin: 0;
font-family: var(--wp--preset--font-family--hepta-slab, "Hepta Slab", serif);
font-size: var(--wp--preset--font-size--xx-large, 2rem);
line-height: 1.25;
font-weight: 500;
color: var(--wp--preset--color--white, #fff);
}
.kk-newsletter__description {
margin: 0.75rem 0 0;
font-family: var(--wp--preset--font-family--host-grotesk, "Host Grotesk", sans-serif);
font-size: var(--wp--preset--font-size--medium, 1rem);
line-height: 1.45;
font-weight: 400;
color: var(--wp--preset--color--white, #fff);
}
.kk-newsletter__form {
display: flex;
align-items: stretch;
flex: 0 1 26.125rem;
width: 100%;
max-width: 26.125rem;
height: 2.75rem;
min-height: 2.75rem;
padding: 0 0 0 1.375rem;
box-sizing: border-box;
background: var(--kk-newsletter-field, #464645);
border-radius: 999px;
gap: 0.5rem;
position: relative;
}
.kk-newsletter__input {
flex: 1 1 auto;
min-width: 0;
height: 2.75rem;
border: 0;
background: transparent;
color: var(--wp--preset--color--white, #fff);
font-family: var(--wp--preset--font-family--host-grotesk, "Host Grotesk", sans-serif);
font-size: var(--wp--preset--font-size--medium, 1rem);
line-height: 1.3;
padding: 0;
outline: none;
box-shadow: none;
}
.kk-newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.72);
opacity: 1;
}
.kk-newsletter__input:focus,
.kk-newsletter__input:focus-visible {
outline: none;
box-shadow: none;
}
.kk-newsletter__form:focus-within {
outline: 2px solid var(--wp--preset--color--white, #fff);
outline-offset: 2px;
}
.kk-newsletter__submit.wp-element-button,
.kk-newsletter__submit {
flex: 0 0 auto;
align-self: stretch;
margin: 0;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--white, #fff);
color: var(--wp--preset--color--ink, #1c1c1c);
font-family: var(--wp--preset--font-family--host-grotesk, "Host Grotesk", sans-serif);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.2;
height: 2.75rem;
padding: 0.625rem 1.25rem;
cursor: pointer;
white-space: nowrap;
appearance: none;
transition:
background-color 0.3s ease-in-out,
color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
}
.kk-newsletter__submit.wp-element-button:hover,
.kk-newsletter__submit.wp-element-button:focus-visible,
.kk-newsletter__submit:hover,
.kk-newsletter__submit:focus-visible {
background: var(--wp--preset--color--ink, #1c1c1c);
color: var(--wp--preset--color--cream, #f2f0eb);
} .kk-newsletter .wpcf7 {
flex: 0 1 26.125rem;
width: 100%;
max-width: 26.125rem;
}
.kk-newsletter .wpcf7 form.wpcf7-form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin: 0;
}
.kk-newsletter .wpcf7 .kk-newsletter__form {
flex: 0 0 auto;
max-width: none;
width: 100%;
}
.kk-newsletter .wpcf7 .kk-newsletter__form p {
display: contents;
margin: 0;
}
.kk-newsletter .wpcf7 .kk-newsletter__form br {
display: none;
}
.kk-newsletter .wpcf7 .kk-newsletter__form .wpcf7-form-control-wrap {
flex: 1 1 auto;
min-width: 0;
width: auto;
display: flex;
align-items: center;
height: 2.75rem;
position: relative;
}
.kk-newsletter .wpcf7 input[type="email"],
.kk-newsletter .wpcf7 .kk-newsletter__input {
display: block;
width: 100%;
height: 2.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--wp--preset--color--white, #fff);
box-shadow: none;
line-height: 1.3;
}
.kk-newsletter .wpcf7 input[type="email"]::placeholder,
.kk-newsletter .wpcf7 .kk-newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.72);
opacity: 1;
}
.kk-newsletter .wpcf7 input[type="email"]:focus,
.kk-newsletter .wpcf7 input[type="email"]:focus-visible,
.kk-newsletter .wpcf7 .kk-newsletter__input:focus,
.kk-newsletter .wpcf7 .kk-newsletter__input:focus-visible,
.kk-newsletter .wpcf7 input.wpcf7-not-valid {
outline: none;
box-shadow: none;
border: 0;
background: transparent;
}
.kk-newsletter .wpcf7 input[type="submit"],
.kk-newsletter .wpcf7 .wpcf7-submit,
.kk-newsletter .wpcf7 .kk-newsletter__submit {
flex: 0 0 auto;
align-self: stretch;
width: auto;
max-width: none;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
appearance: none;
}
.kk-newsletter .wpcf7 .wpcf7-not-valid-tip {
display: none;
}
.kk-newsletter .wpcf7 form .wpcf7-response-output {
margin: 0;
padding: 0.5rem 0.75rem;
background: rgba(255, 255, 255, 0.1);
color: var(--wp--preset--color--white, #fff);
border-color: rgba(255, 255, 255, 0.4);
}
.kk-newsletter .wpcf7 form.sent .wpcf7-response-output {
border-color: var(--wp--preset--color--green, #42b676);
color: var(--wp--preset--color--white, #fff);
}
.kk-newsletter .wpcf7 form.failed .wpcf7-response-output,
.kk-newsletter .wpcf7 form.aborted .wpcf7-response-output,
.kk-newsletter .wpcf7 form.spam .wpcf7-response-output,
.kk-newsletter .wpcf7 form.invalid .wpcf7-response-output,
.kk-newsletter .wpcf7 form.unaccepted .wpcf7-response-output {
border-color: var(--wp--preset--color--orange, #ff5b23);
color: var(--wp--preset--color--white, #fff);
}
.kk-newsletter .wpcf7-spinner {
position: absolute;
right: 1.25rem;
top: 50%;
width: 1.25rem;
height: 1.25rem;
margin: 0;
transform: translateY(-50%);
background-color: var(--wp--preset--color--ink, #1c1c1c);
pointer-events: none;
}
@media (max-width: 781px) {
.kk-newsletter {
padding-block: var(--wp--preset--spacing--60, 2rem);
}
.kk-newsletter__inner {
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
}
.kk-newsletter__copy {
flex: 0 0 auto;
max-width: none;
}
.kk-newsletter__form,
.kk-newsletter .wpcf7 {
flex: 0 0 auto;
max-width: none;
}
}