.jomo-newsletter {
--newsletter-bg: #fff;
--newsletter-card: #fff;
--newsletter-text: #1f2926;
--newsletter-muted: rgba(31, 41, 38, .72);
--newsletter-border: rgba(31, 41, 38, .12);
--newsletter-action: var(--jomo-action, #44524c);
--newsletter-action-hover: var(--jomo-action-hover, #35413c);
--newsletter-action-active: var(--jomo-action-active, #29332f);
--newsletter-focus-ring: var(--jomo-focus-ring, rgba(0, 107, 69, .30));
--newsletter-error: var(--jomo-error, #9a2a20);
--newsletter-success: var(--jomo-success, #006b45);
position: relative;
width: 100%;
padding: clamp(56px, 6vw, 78px) 20px;
border-top: 1px solid rgba(31, 41, 38, .07);
background: var(--newsletter-bg);
color: var(--newsletter-text);
}
.jomo-newsletter__inner {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(300px, 390px);
gap: clamp(34px, 5vw, 64px);
align-items: center;
width: min(980px, calc(100% - 40px));
margin: 0 auto;
}
.jomo-newsletter__content { max-width: 640px; }
.jomo-newsletter__eyebrow {
display: inline-block;
margin: 0 0 14px;
color: var(--newsletter-muted);
font-family: var(--jomo-font-ui, "Manrope", Arial, sans-serif);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.2;
text-transform: uppercase;
}
.jomo-newsletter__title {
max-width: 520px;
margin: 0;
color: var(--newsletter-text);
font-family: var(--jomo-font-serif, "Instrument Serif", Georgia, serif);
font-size: clamp(32px, 3.15vw, 46px);
font-weight: 400;
letter-spacing: -.04em;
line-height: .96;
text-wrap: balance;
}
.jomo-newsletter__text {
max-width: 500px;
margin: 20px 0 0;
color: var(--newsletter-muted);
font-family: var(--jomo-font-body, "Manrope", Arial, sans-serif);
font-size: 14px;
line-height: 1.7;
text-wrap: pretty;
}
.jomo-newsletter__form {
width: 100%;
padding: clamp(22px, 2.4vw, 30px);
border: 1px solid var(--newsletter-border);
background: var(--newsletter-card);
box-shadow: 0 22px 60px rgba(31, 41, 38, .06);
}
.jomo-newsletter__fields { display: grid; gap: 12px; }
.jomo-newsletter__field { display: block; margin: 0; }
.jomo-newsletter__field input {
width: 100%;
min-height: 50px;
padding: 0 15px;
border: 1px solid rgba(31, 41, 38, .16);
border-radius: 0;
outline: 0;
background: #fff;
color: var(--newsletter-text);
font-family: var(--jomo-font-ui, "Manrope", Arial, sans-serif);
font-size: 13px;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.jomo-newsletter__field input::placeholder { color: rgba(31, 41, 38, .68); }
.jomo-newsletter__field input:focus-visible {
border-color: var(--newsletter-action);
box-shadow: 0 0 0 3px var(--newsletter-focus-ring);
}
.jomo-newsletter__field input[aria-invalid="true"] {
border-color: var(--newsletter-error);
box-shadow: 0 0 0 3px rgba(154, 42, 32, .12);
} .jomo-newsletter__button:not(.commercial-button) {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
padding: 0 20px;
border: 1px solid var(--newsletter-action);
border-radius: 0;
background: var(--newsletter-action);
color: #fff;
font-family: var(--jomo-font-ui, "Manrope", Arial, sans-serif);
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, opacity .16s ease;
}
.jomo-newsletter__button:not(.commercial-button):hover {
border-color: var(--newsletter-action-hover);
background: var(--newsletter-action-hover);
transform: translateY(-1px);
}
.jomo-newsletter__button:not(.commercial-button):active {
border-color: var(--newsletter-action-active);
background: var(--newsletter-action-active);
transform: translateY(0);
}
.jomo-newsletter__button:not(.commercial-button):focus-visible {
outline: 3px solid var(--newsletter-focus-ring);
outline-offset: 3px;
}
.jomo-newsletter__button:not(.commercial-button):disabled,
.jomo-newsletter__button:not(.commercial-button)[aria-disabled="true"] {
opacity: .56;
cursor: not-allowed;
pointer-events: none;
transform: none;
}
.jomo-newsletter__button:not(.commercial-button)[aria-busy="true"] { cursor: progress; }
.skin-comercial .jomo-newsletter__button.commercial-button {
width: 100%;
min-height: 50px;
}
.jomo-newsletter__consent {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 15px 0 0;
color: rgba(31, 41, 38, .68);
font-family: var(--jomo-font-body, "Manrope", Arial, sans-serif);
font-size: 11px;
line-height: 1.5;
cursor: pointer;
}
.jomo-newsletter__consent input {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--newsletter-action);
}
.jomo-newsletter__consent input:focus-visible {
outline: 3px solid var(--newsletter-focus-ring);
outline-offset: 2px;
}
.jomo-newsletter__feedback {
min-height: 18px;
margin: 12px 0 0;
font-family: var(--jomo-font-ui, "Manrope", Arial, sans-serif);
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
.jomo-newsletter__feedback[data-state="success"] { color: var(--newsletter-success); }
.jomo-newsletter__feedback[data-state="error"] { color: var(--newsletter-error); }
.jomo-newsletter__feedback[data-state="loading"] { color: var(--newsletter-muted); } .jomo-newsletter__hp {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.jomo-newsletter--current_home {
--newsletter-bg: #fff;
--newsletter-card: #fff;
}
.jomo-newsletter--commercial,
.jomo-newsletter--editorial {
--newsletter-bg: var(--jomo-bg, #f3eee7);
--newsletter-card: rgba(255, 255, 255, .64);
--newsletter-text: var(--jomo-text, #171411);
--newsletter-muted: var(--jomo-muted, #61584f);
--newsletter-border: var(--jomo-line, rgba(23, 20, 17, .11));
}
.skin-comercial .jomo-newsletter {
padding-top: clamp(76px, 8vw, 108px);
padding-bottom: clamp(76px, 8vw, 108px);
border-top-color: rgba(23, 20, 17, .10);
}
.skin-comercial .jomo-newsletter__inner {
grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
gap: clamp(48px, 7vw, 96px);
}
.skin-comercial .jomo-newsletter__inner:not(.commercial-shell) {
width: min(1120px, calc(100% - var(--jomo-shell-gutter, 48px)));
}
.skin-comercial .jomo-newsletter__content { max-width: 620px; }
.skin-comercial .jomo-newsletter__title { max-width: 600px; font-size: clamp(42px, 4vw, 60px); }
.skin-comercial .jomo-newsletter__text { max-width: 540px; }
.skin-comercial .jomo-newsletter__form {
border-color: var(--newsletter-border);
background: var(--newsletter-card);
box-shadow: 0 24px 70px rgba(23, 20, 17, .07);
}
.skin-comercial .jomo-newsletter__field input {
border-color: rgba(23, 20, 17, .14);
background: rgba(255, 255, 255, .82);
color: var(--newsletter-text);
font-size: 12px;
}
.skin-comercial .jomo-newsletter__field input::placeholder { color: rgba(23, 20, 17, .68); }
.skin-comercial .jomo-newsletter__consent { color: rgba(23, 20, 17, .62); }
@media (max-width: 900px) {
.jomo-newsletter,
.skin-comercial .jomo-newsletter,
.jomo-newsletter--current_home { padding: 52px 18px; }
.jomo-newsletter__inner,
.skin-comercial .jomo-newsletter__inner,
.jomo-newsletter--current_home .jomo-newsletter__inner {
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
}
.jomo-newsletter__content { max-width: none; }
.jomo-newsletter__title,
.skin-comercial .jomo-newsletter__title,
.jomo-newsletter--current_home .jomo-newsletter__title {
max-width: 100%;
font-size: clamp(31px, 10vw, 42px);
line-height: .98;
}
.jomo-newsletter__text { max-width: 100%; margin-top: 16px; font-size: 14px; line-height: 1.65; }
.jomo-newsletter__form { padding: 18px; box-shadow: 0 18px 46px rgba(31, 41, 38, .07); }
.jomo-newsletter__field input,
.jomo-newsletter__button:not(.commercial-button) { min-height: 48px; }
}
@media (max-width: 480px) {
.jomo-newsletter,
.skin-comercial .jomo-newsletter { padding-right: 16px; padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.jomo-newsletter__field input,
.jomo-newsletter__button:not(.commercial-button) { transition-duration: .01ms; }
}
@media (forced-colors: active) {
.jomo-newsletter__button:not(.commercial-button) { border: 1px solid ButtonText; }
}
.jomo-newsletter__consent a {
color: var(--newsletter-action);
text-decoration: underline;
text-underline-offset: 3px;
}