.bella-newsletter {
--bella-newsletter-border: #2c4c23;
--bella-newsletter-text: #111;
--bella-newsletter-muted: #5e5e5e;
--bella-newsletter-accent: #2c4c23;
--bella-newsletter-accent-hover: #203819;
--bella-newsletter-surface: #d4ee97;
--bella-newsletter-error: #b42318;
--bella-newsletter-success: #2c4c23;
--bella-newsletter-focus: #2c4c23;
color: var(--bella-newsletter-text);
max-width: 390px;
width: 100%;
}
.bella-newsletter [hidden] {
display: none !important;
}
.bella-newsletter--notice {
border: 1px solid var(--bella-newsletter-border);
border-radius: 8px;
padding: 16px;
}
.bella-newsletter__open,
.bella-newsletter__button {
align-items: center;
background: var(--bella-newsletter-surface);
border: 0;
border-radius: 999px;
color: var(--bella-newsletter-accent);
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: 700;
justify-content: center;
letter-spacing: 0;
line-height: 1;
min-height: 62px;
padding: 16px 34px;
text-decoration: none;
transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.bella-newsletter__open {
width: 100%;
}
.bella-newsletter__open:hover,
.bella-newsletter__open:focus,
.bella-newsletter__button:hover,
.bella-newsletter__button:focus {
background: var(--bella-newsletter-accent);
color: #fff;
transform: translateY(-1px);
}
.bella-newsletter__panel {
position: relative;
width: 100%;
}
.bella-newsletter__form {
display: grid;
gap: 18px;
padding-top: 34px;
}
.bella-newsletter__close {
align-items: center;
background: transparent;
border: 0;
border-radius: 999px;
color: var(--bella-newsletter-accent);
cursor: pointer;
display: inline-flex;
font-size: 30px;
font-weight: 300;
height: 34px;
justify-content: center;
line-height: 1;
padding: 0;
position: absolute;
right: 0;
top: 0;
transition: background-color 160ms ease, color 160ms ease;
width: 34px;
}
.bella-newsletter__close:hover,
.bella-newsletter__close:focus {
background: var(--bella-newsletter-surface);
color: var(--bella-newsletter-accent-hover);
outline: none;
}
.bella-newsletter__fields {
display: grid;
gap: 14px;
}
.bella-newsletter__field-shell {
align-items: center;
background: #fff;
border: 1px solid var(--bella-newsletter-border);
border-radius: 999px;
display: flex;
min-height: 64px;
padding: 0 22px;
transition: border-color 160ms ease, box-shadow 160ms ease;
width: 100%;
}
.bella-newsletter__field-shell:focus-within {
border-color: var(--bella-newsletter-focus);
box-shadow: 0 0 0 3px rgba(44, 76, 35, 0.16);
}
.bella-newsletter input[type='email'],
.bella-newsletter input[type='text'],
.bella-newsletter select {
appearance: none;
background: transparent;
border: 0;
box-shadow: none;
box-sizing: border-box;
color: var(--bella-newsletter-text);
font: inherit;
font-size: 20px;
font-weight: 400;
min-height: 60px;
min-width: 0;
padding: 0;
width: 100%;
}
.bella-newsletter select {
background-image: linear-gradient(45deg, transparent 50%, var(--bella-newsletter-text) 50%), linear-gradient(135deg, var(--bella-newsletter-text) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 10px 10px, 10px 10px;
padding-right: 42px;
}
.bella-newsletter input::placeholder {
color: var(--bella-newsletter-muted);
opacity: 1;
}
.bella-newsletter input:focus,
.bella-newsletter select:focus {
box-shadow: none;
outline: none;
}
.bella-newsletter__field--invalid {
color: var(--bella-newsletter-error) !important;
}
.bella-newsletter__field-shell.bella-newsletter__field-wrap--invalid {
border-color: var(--bella-newsletter-error);
}
.bella-newsletter__actions {
display: grid;
}
.bella-newsletter__button--submit {
gap: 22px;
min-height: 60px;
width: 100%;
}
.bella-newsletter__button--submit span {
font-size: 40px;
font-weight: 300;
line-height: 0.6;
margin-left: auto;
}
.bella-newsletter__button:disabled {
cursor: wait;
opacity: 0.55;
transform: none;
}
.bella-newsletter__message {
color: var(--bella-newsletter-muted);
font-size: 20px;
line-height: 1.4;
min-height: 1.4em;
}
.bella-newsletter__message--error {
color: var(--bella-newsletter-error);
}
.bella-newsletter__message--success {
color: var(--bella-newsletter-text);
font-weight: 400;
}
.bella-newsletter__message--info {
color: var(--bella-newsletter-muted);
}
.bella-newsletter__hp {
height: 0 !important;
left: -9999px !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
}
.bella-newsletter__sr-only {
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.bella-newsletter__form.is-complete .bella-newsletter__fields,
.bella-newsletter__form.is-complete .bella-newsletter__actions {
display: none;
}
@media (max-width: 480px) {
.bella-newsletter {
max-width: 100%;
}
.bella-newsletter__open,
.bella-newsletter__button {
font-size: 18px;
min-height: 56px;
padding-left: 24px;
padding-right: 24px;
}
.bella-newsletter__field-shell {
min-height: 58px;
padding-left: 18px;
padding-right: 18px;
}
.bella-newsletter input[type='email'],
.bella-newsletter input[type='text'],
.bella-newsletter select,
.bella-newsletter__message {
font-size: 18px;
}
}