.jsf-newsletter-page .entry-title:empty {
display: none;
}
.jsf-newsletter-page .site-main {
width: 100%;
max-width: none !important;
padding: 0 !important;
}
.jsf-newsletter-page .page-content {
width: 100%;
}
.jsf-newsletter-box,
.jsf-newsletter-box * {
box-sizing: border-box;
}
.jsf-newsletter-box {
width: 100%;
margin: 0 auto 84px;
background: #fff;
color: #222;
font-family: 'Poppins', sans-serif;
}
.jsf-newsletter-head {
width: min(880px, calc(100% - 40px));
margin: 0 auto;
padding: clamp(68px, 9vw, 118px) 0 clamp(32px, 4vw, 48px);
text-align: center;
}
.jsf-newsletter-box h1 {
margin: 0;
color: #2c3d55;
font: 400 clamp(62px, 9vw, 92px)/1.05 'Oooh Baby', cursive;
}
.jsf-newsletter-head h2 {
margin: 18px 0 14px;
color: #2c3d55;
font-family: 'Poppins', sans-serif;
font-size: clamp(27px, 3.3vw, 40px);
font-weight: 600;
line-height: 1.25;
}
.jsf-newsletter-intro {
max-width: 720px;
margin: 0 auto;
color: #343434;
font-size: clamp(16px, 1.8vw, 19px);
line-height: 1.75;
}
.jsf-newsletter-topics {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 26px;
margin: 24px 0 0;
padding: 0;
list-style: none;
color: #4b555a;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.jsf-newsletter-topics li + li::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
margin: 0 26px 1px 0;
border-radius: 50%;
background: #c7ef00;
}
.jsf-newsletter-content {
width: min(760px, calc(100% - 40px));
margin: 0 auto;
padding: 28px 0 0;
border-top: 1px solid #d8dddb;
}
.jsf-newsletter-box form {
display: grid;
gap: 21px;
}
.jsf-newsletter-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.jsf-newsletter-box label {
display: grid;
gap: 8px;
color: #2c3d55;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
}
.jsf-newsletter-box input[type='text'],
.jsf-newsletter-box input[type='email'],
.jsf-newsletter-box input[type='date'],
.jsf-newsletter-box select {
width: 100%;
min-height: 54px;
padding: 13px 15px;
border: 1px solid #7c8385;
border-radius: 0;
background: #fff;
color: #222;
font: 400 16px/1.45 'Poppins', sans-serif;
}
.jsf-newsletter-box select {
appearance: auto;
}
.jsf-newsletter-box input::placeholder {
color: #8a9092;
}
.jsf-newsletter-box input:focus,
.jsf-newsletter-box select:focus {
border-color: #2c3d55;
outline: 3px solid rgba(199, 239, 0, .55);
outline-offset: 1px;
}
.jsf-newsletter-interest > small {
color: #6f7679;
font-size: 12px;
font-weight: 400;
}
.jsf-newsletter-personal {
border-top: 1px solid #d8dddb;
border-bottom: 1px solid #d8dddb;
}
.jsf-newsletter-personal summary {
padding: 16px 0;
cursor: pointer;
list-style: none;
}
.jsf-newsletter-personal summary::-webkit-details-marker {
display: none;
}
.jsf-newsletter-personal summary > span {
position: relative;
display: grid;
gap: 2px;
padding-right: 32px;
}
.jsf-newsletter-personal summary > span::after {
content: '+';
position: absolute;
top: 50%;
right: 2px;
color: #2c3d55;
font-size: 22px;
font-weight: 400;
line-height: 1;
transform: translateY(-50%);
}
.jsf-newsletter-personal[open] summary > span::after {
content: '−';
}
.jsf-newsletter-personal summary strong {
color: #2c3d55;
font-size: 14px;
font-weight: 600;
}
.jsf-newsletter-personal summary small {
color: #6f7679;
font-size: 12px;
}
.jsf-newsletter-personal .jsf-newsletter-fields {
padding: 4px 0 18px;
}
.jsf-newsletter-consent {
display: grid !important;
grid-template-columns: auto 1fr;
align-items: start;
gap: 12px !important;
padding: 2px 0;
color: #343434 !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
.jsf-newsletter-consent input {
width: 21px;
height: 21px;
margin: 1px 0 0;
accent-color: #2c3d55;
}
.jsf-newsletter-consent-copy {
display: grid;
gap: 3px;
}
.jsf-newsletter-consent-copy small,
.jsf-newsletter-privacy {
color: #6f7679;
font-size: 12px;
line-height: 1.55;
}
.jsf-newsletter-box a {
color: #536700;
text-underline-offset: 3px;
}
.jsf-newsletter-box button {
width: fit-content;
min-width: 220px;
min-height: 50px;
padding: 14px 25px;
border: 0;
border-radius: 0;
background: #c7ef00;
color: #000;
font: 600 12px/1.25 'Poppins', sans-serif;
letter-spacing: 1.15px;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, transform .2s;
}
.jsf-newsletter-box button:hover {
background: #b5d900;
transform: translateY(-1px);
}
.jsf-newsletter-box button:focus-visible,
.jsf-newsletter-personal summary:focus-visible {
outline: 3px solid #2c3d55;
outline-offset: 3px;
}
.jsf-newsletter-message {
margin: 0 0 24px;
padding: 14px 16px;
border-left: 5px solid #c7ef00;
background: #f4f6f4;
font-size: 14px;
line-height: 1.6;
}
.jsf-newsletter-message--alert {
border-left-color: #b23a32;
background: #fff3f1;
color: #772a25;
}
.jsf-newsletter-honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
.jsf-newsletter-resend {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #d8dddb;
}
.jsf-newsletter-resend button {
background: #2c3d55;
color: #fff;
}
.jsf-newsletter-resend button:hover {
background: #1d293b;
}
.jsf-newsletter-preferences > h2 {
margin: 0 0 10px;
color: #2c3d55;
font: 600 clamp(27px, 3vw, 36px)/1.25 'Poppins', sans-serif;
}
.jsf-newsletter-preferences > p {
margin: 0 0 26px;
color: #4b555a;
font-size: 15px;
line-height: 1.7;
}
.jsf-newsletter-privacy {
margin: 14px 0 0;
}
.jsf-newsletter-faq {
width: min(1120px, calc(100% - 40px));
margin: clamp(68px, 9vw, 112px) auto 0;
padding-top: 48px;
border-top: 1px solid #d8dddb;
}
.jsf-newsletter-faq > h2 {
margin: 0 0 30px;
color: #2c3d55;
font-family: 'Poppins', sans-serif;
font-size: clamp(28px, 3vw, 38px);
font-weight: 600;
line-height: 1.25;
text-align: center;
}
.jsf-newsletter-faq-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px;
}
.jsf-newsletter-faq article {
padding-top: 17px;
border-top: 4px solid #c7ef00;
}
.jsf-newsletter-faq h3 {
margin: 0 0 10px;
color: #2c3d55;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.45;
}
.jsf-newsletter-faq p {
margin: 0;
color: #343434;
font-size: 15px;
line-height: 1.7;
}
@media (max-width: 700px) {
.jsf-newsletter-box {
margin-bottom: 58px;
}
.jsf-newsletter-head {
width: min(100% - 30px, 880px);
padding-top: 54px;
}
.jsf-newsletter-box h1 {
font-size: clamp(58px, 18vw, 76px);
}
.jsf-newsletter-head h2 {
margin-top: 12px;
}
.jsf-newsletter-topics {
gap: 7px 13px;
font-size: 10px;
}
.jsf-newsletter-topics li + li::before {
margin-right: 13px;
}
.jsf-newsletter-content,
.jsf-newsletter-faq {
width: min(100% - 32px, 760px);
}
.jsf-newsletter-fields,
.jsf-newsletter-faq-grid {
grid-template-columns: 1fr;
}
.jsf-newsletter-box button {
width: 100%;
}
.jsf-newsletter-faq-grid {
gap: 25px;
}
}
@media (prefers-reduced-motion: reduce) {
.jsf-newsletter-box button {
transition: none;
}
}