diff --git a/blocks/newsletter-subscribe/newsletter-subscribe.css b/blocks/newsletter-subscribe/newsletter-subscribe.css new file mode 100644 index 0000000..15872c9 --- /dev/null +++ b/blocks/newsletter-subscribe/newsletter-subscribe.css @@ -0,0 +1,371 @@ +.newsletter-subscribe.block { + padding: 0 39px; + max-width: 1440px; + margin: 0 auto; + + --circle-svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20%2F%3E%3C%2Fsvg%3E"); +} + +.newsletter-subscribe.block .subscribe-form { + display: flex; + flex-direction: column; + gap: 30px; +} + +.newsletter-subscribe.block .subscribe-form a:hover { + color: inherit; +} + +.newsletter-subscribe.block .subscribe-form label[for*="checkbox"] { + cursor: pointer; +} + +.newsletter-subscribe.block .subscribe-form input.toggle { + cursor: pointer; + width: 51px; + height: 30px; + border-radius: 15px; + margin: 0; + appearance: none; + background: var(--circle-svg), #e1e1e3; + background-size: 22px 22px; + background-repeat: no-repeat; + background-position: 4px 4px; + transition: background 0.4s ease; +} + +.newsletter-subscribe.block .subscribe-form input.toggle:checked { + background: var(--circle-svg), #1f2022; + background-size: 22px 22px; + background-repeat: no-repeat; + background-position: 26px 4px; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper h1, +.newsletter-subscribe.block .subscribe-form .title-wrapper h2, +.newsletter-subscribe.block .subscribe-form .title-wrapper h3 { + font-family: var(--font-tungsten); + font-size: 67px; + font-weight: 600; + line-height: 66px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: black; + margin: 0 0 10px; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper [slot="description"] p { + font-family: var(--font-gotham); + text-align: center; + max-width: 500px; + font-style: normal; + font-weight: 325; + font-size: 18px; + margin: 0; + color: #4e515e; + line-height: 30px; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper [slot="tos-top"] { + color: #1f2022; + text-align: center; + font-family: var(--font-gotham); + font-size: 10px; + line-height: 13px; + letter-spacing: 0; + margin-bottom: 20px; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper [slot="tos-top"] a { + font-weight: bold; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper [slot="tos-top"] p { + margin: 0; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper [slot="description"] p:first-child { + line-height: 135%; + color: #151517; +} + +.newsletter-subscribe.block .subscribe-form .title-wrapper [slot="description"] p:last-child { + margin-bottom: 30px; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper { + width: 100%; + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 30px; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input { + height: 70px; + width: 100%; + border: 1px solid #adb4b7; + background-color: #fff; + padding-left: 7px; + box-sizing: border-box; + text-indent: 5px; + box-shadow: inset 0 1px 3px rgba(0 0 0 / 5%); + color: #4e515e; + outline: none; + font-size: 18px; + line-height: 30px; + font-family: var(--font-gotham); +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input:focus { + border: 1px solid #87b9ea; + outline: none; + box-shadow: 0 0 5px 0 #1d87ff; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input::placeholder { + color: #adb4b7; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input.invalid { + border-style: solid; + border-width: 1px; + border-color: #e76468; + box-shadow: none; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input.valid { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAApVBMVEUAAAAAc5kAbZ4AdKIGcJ8GcJ4Gb58GcZ4GcJ8GcZ4GcJ4FcJ4Fb54FcJ4FcJ4FcJ4FcJ4FcJ4FcJ4FcJ4FcJ4FcJ4NdKEQdqIUeKQWeqQcfacdfacggKkmg6s3jbE5jrJHlrdJl7hWn75aoL9hpcJurMdyrsiEuc+YxNeiytujytuy0+Hc6/Hi7vTl8PXp8/fq8/fy+Pr6/P39/v7+/v7+/v////9mbyKVAAAAFXRSTlMAFBUWUlRVgYKDhM3Oz9Dw8fLz9P7FJ1F0AAAAAWJLR0Q2R7+I0QAAAIZJREFUCB0twQcWgjAARMFVQERRCPLtDXvv5v5HMw+ckeO1Or1eHHkqNQwlE8hp5PzlgeQZKrMNaV0tKoOLndJUl8rBniFWBn1g+X2MwciweO0ZXu0KSNVhcre7kz3ixIpg/vzY2wgnlGegeNsCJ6lJQQ7rLU7uywlSSomvUr3ZzrJ2WJP0AxPADxwFmQlQAAAAAElFTkSuQmCC"); + background-position: right 5px center; + background-repeat: no-repeat; + padding-right: 25px; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .invalid-email-text { + display: none; + height: 23px; + font-size: 13px; + font-family: var(--font-gotham); + color: #e76468; + font-weight: 700; + line-height: 15px; + padding-bottom: 8px; + text-align: center; +} + +.newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input.invalid + .invalid-email-text { + display: block; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-to-all-wrapper { + max-width: 550px; + width: 100%; + margin: 0 auto 60px; + padding-top: 7px; + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-to-all-wrapper .toggle-label { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + line-height: 22px; + letter-spacing: 0.3em; + float: left; + color: #151517; + font-family: var(--font-gotham); +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 30px; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item { + display: flex; + background-color: #fff; + gap: 25px; + padding-right: 31px; + height: 203px; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .image-wrapper { + width: 285px; + height: 203px; + min-width: 285px; + min-height: 203px; + overflow: hidden; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .image-wrapper picture, +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .image-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper { + display: flex; + flex-direction: column; + gap: 12px; + margin: 25px 0 5px; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper .item-title { + font-family: var(--font-tungsten); + font-size: 42px; + font-weight: 400; + line-height: 44px; + letter-spacing: 0.05em; + text-align: left; + text-transform: uppercase; + color: #000; + height: 44px; +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper p { + margin: 0; + font-size: 14px; + font-weight: 325; + line-height: 23px; + letter-spacing: 0; + text-align: left; + color: #000; + font-family: var(--font-gotham); +} + +.newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .checkbox-wrapper { + margin-top: 33px; + margin-left: auto; +} + +.newsletter-subscribe.block .subscribe-form .form-footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.newsletter-subscribe.block .subscribe-form .form-footer .sign-up-button { + padding: 0; + border: none; + color: white; + text-transform: uppercase; + background-color: var(--link-hover-color); + border-color: var(--link-hover-color); + font-size: 18px; + font-family: var(--font-gotham); + font-weight: 400; + line-height: 43px; + letter-spacing: 0.3em; + padding-left: 44px; + padding-right: 38px; + height: 43px; + border-radius: 1.79px; + cursor: pointer; + box-shadow: 0 0 1px 0 rgba(0 0 0 / 40%); + margin-bottom: 10px; +} + +.newsletter-subscribe.block .subscribe-form .form-footer .sign-up-button:hover { + background-color: #000; +} + +.newsletter-subscribe.block .subscribe-form .form-footer [slot="footer-privacy"], +.newsletter-subscribe.block .subscribe-form .form-footer [slot="footer-tos-links"] { + color: #1f2022; + text-align: center; + font-family: var(--font-gotham); + font-size: 10px; + font-weight: 350; + line-height: 13px; + letter-spacing: 0; +} + +.newsletter-subscribe.block .subscribe-form .form-footer [slot="footer-privacy"] a, +.newsletter-subscribe.block .subscribe-form .form-footer [slot="footer-tos-links"] a { + font-weight: bold; +} + +@media (max-width: 768px) { + .newsletter-subscribe.block .subscribe-form .title-wrapper h1, + .newsletter-subscribe.block .subscribe-form .title-wrapper h2, + .newsletter-subscribe.block .subscribe-form .title-wrapper h3 { + font-size: 50px; + line-height: 52px; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper .item-title { + font-size: 36px; + } +} + +@media (max-width: 700px) { + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper .item-title { + font-size: 32px; + } +} + +@media (max-width: 600px) { + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .image-wrapper { + width: 115px; + height: 115px; + min-width: 115px; + min-height: 115px; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item { + height: 115px; + padding-right: 12px; + gap: 14px; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper { + margin-top: 10px; + gap: 0; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper .item-title { + height: 38px; + font-size: 28px; + line-height: 38px; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .checkbox-wrapper { + margin-top: 14px; + margin-left: auto; + } + + .newsletter-subscribe.block .subscribe-form .form-footer .sign-up-button { + font-size: 12px; + } +} + +@media (max-width: 500px) { + .newsletter-subscribe.block .subscribe-form .controls-wrapper .email-input { + height: 36px; + font-size: 13px; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper p { + font-size: 13px; + } + + .newsletter-subscribe.block .subscribe-form .subscribe-list .subscribe-item .text-wrapper .item-title { + font-size: 20px; + } +} diff --git a/blocks/newsletter-subscribe/newsletter-subscribe.js b/blocks/newsletter-subscribe/newsletter-subscribe.js new file mode 100644 index 0000000..7b0a6af --- /dev/null +++ b/blocks/newsletter-subscribe/newsletter-subscribe.js @@ -0,0 +1,203 @@ +import { + assignSlot, + parseFragment, + render, + ARTICLE_TEMPLATES, + validateEmail, + extractQueryFromTemplateMetaData, + getBlockId, +} from '../../scripts/scripts.js'; +import { createOptimizedPicture, getMetadata } from '../../scripts/lib-franklin.js'; + +// HTML template in JS to avoid extra waterfall for LCP blocks +const generateHtmlTemplate = (listStringHtml = '') => ` +
+
+
+ + + +
+ +
+ + +
+ + + + +
+
+`; + +const renderTemplate = (block, htmlString) => { + // Template rendering + const template = parseFragment(htmlString); + + // Identify slots + assignSlot(block, 'title', 'h1, h2, h3'); + assignSlot(block, 'description', '.newsletter-subscribe.block > div > div > div:has(h2) + div:has(p)'); + assignSlot(block, 'tos-top', '.newsletter-subscribe.block > div > div > div:has(h2) + div:has(p) + div:has(p a)'); + assignSlot( + block, + 'footer-privacy', + '.newsletter-subscribe.block > div > div > div:has(h2) + div:has(p) + div:has(p a) + div:has(p a)', + ); + assignSlot( + block, + 'footer-tos-links', + '.newsletter-subscribe.block > div > div > div:has(h2) + div:has(p) + div:has(p a) + div:has(p a) + div:has(p a)', + ); + + render(template, block, ARTICLE_TEMPLATES.NewsletterSubscribe); + + // Update block with rendered template + block.innerHTML = ''; + block.append(template); +}; + +export default async function decorate(block) { + const id = getBlockId(block); + const templateMetaData = getMetadata('template'); + const queryClassName = extractQueryFromTemplateMetaData(templateMetaData); + block.classList.add(queryClassName); + + let newslettersData; + + if (!newslettersData) { + renderTemplate(block, generateHtmlTemplate()); + } + + // re-render and add functionality when data is returned + document.addEventListener(`query:${id}`, (e) => { + newslettersData = e.detail.data; + const subscriptionsObj = {}; + + const generateListItem = ( + { + title = '', description = '', image = '', imageAlt = '', subscriptionValue = '', + } = {}, + index = 0, + ) => { + subscriptionsObj[subscriptionValue] = true; + return ` +
  • +
    + ${ + createOptimizedPicture(image, imageAlt, index < 2, [ + { media: '(max-width: 600px)', width: '115' }, + { width: '285' }, + ]).outerHTML +} +
    + +
    + +

    + ${description} +

    +
    + +
    + +
    +
  • +`; + }; + + renderTemplate( + block, + generateHtmlTemplate(newslettersData.map((item, index) => generateListItem(item, index)).join('')), + ); + + // handle email input & debounced validation + const emailField = document.querySelector('.subscribe-form .email-input'); + + let timer; + const debouncedInputValidation = () => { + clearTimeout(timer); + timer = setTimeout(() => { + const valid = !!validateEmail(emailField.value); + if (valid) { + emailField.classList.remove('invalid'); + emailField.classList.add('valid'); + } else { + emailField.classList.remove('valid'); + emailField.classList.add('invalid'); + } + }, 1000); + }; + + emailField.oninput = debouncedInputValidation; + + // handle on clicks + const subscribeToAllCheckbox = document.querySelector('.subscribe-form input[type="checkbox"]#all-checkbox'); + + const handleAllClick = (event) => { + if (event.target.checked === true) { + for (const subscription in subscriptionsObj) { + if (Object.hasOwn(subscriptionsObj, subscription)) { + subscriptionsObj[subscription] = true; + document.querySelector( + `.subscribe-form .subscribe-list input[type="checkbox"][value="${subscription}"]`, + ).checked = true; + } + } + } + }; + + subscribeToAllCheckbox.onclick = handleAllClick; + + const clickHandler = (event) => { + subscriptionsObj[event.target.value] = event.target.checked; + if (event.target.checked === false) { + subscribeToAllCheckbox.checked = false; + } + }; + + const checkboxes = document.querySelectorAll('.subscribe-form .subscribe-list input[type="checkbox"]'); + checkboxes.forEach((input) => { + input.onclick = clickHandler; + }); + + // handling submit + const subscribeForm = document.querySelector('form.subscribe-form'); + + subscribeForm.onsubmit = (event) => { + event.preventDefault(); + if (validateEmail(emailField.value)) { + emailField.classList.remove('valid'); + emailField.classList.add('invalid'); + emailField.focus(); + return; + } + const selectedSubscriptions = Object.keys(subscriptionsObj) + .filter((subscription) => subscriptionsObj[subscription]) + .join(', '); + + console.warn(`Form Submit not implemented\n +\x1b[34memail: ${emailField.value} +\x1b[31mselected Subscriptions: ${selectedSubscriptions}`); + }; + }); + + window.store.query(block); +} diff --git a/scripts/scripts.js b/scripts/scripts.js index dec7114..9c087c3 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -11,7 +11,7 @@ import { waitForLCP, loadBlocks, loadCSS, - toCamelCase, getMetadata, + toCamelCase, getMetadata, toClassName, } from './lib-franklin.js'; export const ARTICLE_TEMPLATES = { @@ -23,6 +23,7 @@ export const ARTICLE_TEMPLATES = { Gallery: 'gallery', GalleryListicle: 'gallery-listicle', ProductListing: 'product-listing', + NewsletterSubscribe: 'newsletter-subscribe', }; const LCP_BLOCKS = [...Object.values(ARTICLE_TEMPLATES), 'hero']; // add your LCP blocks to the list @@ -185,82 +186,75 @@ export function addPhotoCredit(pictures) { }); } -/** - * Find the template corresponding to the provided classname - * - * @param className - * @return {string|null} - */ -function findTemplate(className) { - return Object.values(ARTICLE_TEMPLATES).find((template) => template === className); -} - /** * Builds a template block if any found * * @param {HTMLElement} main */ function buildTemplate(main) { - [...document.body.classList].some((className) => { - const template = findTemplate(className); - if (template) { - main.querySelectorAll('.section-metadata').forEach((metadataEl) => { - metadataEl.className = 'template-section-metadata'; - }); + const template = toClassName(getMetadata('template').split('(')[0].trim()); + + if (template && Object.values(ARTICLE_TEMPLATES).includes(template)) { + // Adding base template class to body because any queries added to the + // template metadata entry are combine which will cause CSS issues. + // example: "Template (sheet query)" has a class of: "template-sheet-query" + document.body.classList.add(template); + main.querySelectorAll('.section-metadata').forEach((metadataEl) => { + metadataEl.className = 'template-section-metadata'; + }); - // TODO remove once importer fixes more cards - const checkForMoreCards = (el, elems) => { - if (el.tagName === 'P' && el.querySelector('picture') && el.querySelector('a') && el?.nextElementSibling?.tagName === 'P' && el.nextElementSibling.children[0]?.tagName === 'A' && el.nextElementSibling?.nextElementSibling.tagName === 'P' && el.nextElementSibling.nextElementSibling.children[0]?.tagName === 'A') { - const rubric = document.createElement('span'); - rubric.textContent = el.nextElementSibling.textContent.trim(); + // TODO remove once importer fixes more cards + const checkForMoreCards = (el, elems) => { + if (el.tagName === 'P' && el.querySelector('picture') && el.querySelector('a') && el?.nextElementSibling?.tagName === 'P' && el.nextElementSibling.children[0]?.tagName === 'A' && el.nextElementSibling?.nextElementSibling.tagName === 'P' && el.nextElementSibling.nextElementSibling.children[0]?.tagName === 'A') { + const rubric = document.createElement('span'); + rubric.textContent = el.nextElementSibling.textContent.trim(); - const desc = document.createElement('strong'); - desc.textContent = el.nextElementSibling.nextElementSibling.textContent.trim(); + const desc = document.createElement('strong'); + desc.textContent = el.nextElementSibling.nextElementSibling.textContent.trim(); - const link = document.createElement('a'); - link.setAttribute('href', new URL(el.querySelector('a').getAttribute('href')).pathname); + const link = document.createElement('a'); + link.setAttribute('href', new URL(el.querySelector('a').getAttribute('href')).pathname); - link.append(el.querySelector('picture')); - link.append(rubric); - link.append(desc); + link.append(el.querySelector('picture')); + link.append(rubric); + link.append(desc); - el.nextElementSibling.nextElementSibling.classList.add('remove'); - el.nextElementSibling.classList.add('remove'); - el.classList.add('remove'); + el.nextElementSibling.nextElementSibling.classList.add('remove'); + el.nextElementSibling.classList.add('remove'); + el.classList.add('remove'); - elems.push(link); + elems.push(link); - if (el.nextElementSibling.nextElementSibling.nextElementSibling) { - checkForMoreCards(el.nextElementSibling.nextElementSibling.nextElementSibling, elems); - } + if (el.nextElementSibling.nextElementSibling.nextElementSibling) { + checkForMoreCards(el.nextElementSibling.nextElementSibling.nextElementSibling, elems); } - }; - - main.querySelectorAll('h2').forEach((h2) => { - if (h2.nextElementSibling) { - const elems = []; - checkForMoreCards(h2.nextElementSibling, elems); - if (elems.length) { - main.querySelectorAll('.remove').forEach((el) => el.remove()); - const h3 = document.createElement('h3'); - h3.textContent = h2.textContent; - h3.id = h2.id; - elems.unshift(h3); - const moreCards = buildBlock('more-cards', { elems }); - h2.replaceWith(moreCards); - } + } + }; + + main.querySelectorAll('h2').forEach((h2) => { + if (h2.nextElementSibling) { + const elems = []; + checkForMoreCards(h2.nextElementSibling, elems); + if (elems.length) { + main.querySelectorAll('.remove').forEach((el) => el.remove()); + const h3 = document.createElement('h3'); + h3.textContent = h2.textContent; + h3.id = h2.id; + elems.unshift(h3); + const moreCards = buildBlock('more-cards', { elems }); + h2.replaceWith(moreCards); } - }); + } + }); - const section = document.createElement('div'); - section.append(buildBlock(template, { elems: [...main.children] })); - main.prepend(section); + const section = document.createElement('div'); + section.append(buildBlock(template, { elems: [...main.children] })); + main.prepend(section); - return true; - } + return true; + } - return false; - }); + return false; } /** @@ -478,6 +472,7 @@ window.store = new (class { 'series-cards': 100, 'tiger-cards': 35, 'tiger-vault-hero': 1, + 'newsletter-subscribe': 25, }; this.blockNames = Object.keys(this._blockQueryLimit); @@ -684,6 +679,41 @@ export const premiumArticleBanner = (customLeftoverArticles = null) => { `; }; + +export const validateEmail = (email) => email.match( + /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, +); + +/** + * Creates a class name compatible with window.store.query + * so page templates can also use that functionality like blocks. + * @param {string} Metadata string of the page that includes "(SHEET_NAME SPREADSHEET_NAME)" + * @return {string} String that is a valid class for window.store.query + */ +export const extractQueryFromTemplateMetaData = (metaDataTemplateString) => { + try { + const regex = /\((.*)\)/; + const textWithinBrackets = metaDataTemplateString.match(regex)[1]; + const classesArray = textWithinBrackets.split(',').map((string) => string.trim()); + + const foundSpreadsheet = classesArray.find((classString) => { + const convertedString = toClassName(classString); + for (const spreadsheet of window.store.spreadsheets) { + if (convertedString.endsWith(spreadsheet)) { + return true; + } + } + return false; + }); + + return foundSpreadsheet ? toClassName(foundSpreadsheet) : false; + } catch (error) { + console.log(`Something went wrong while trying to get query from ${metaDataTemplateString}`); + console.log(error); + return false; + } +}; + /** * Generates HTML for the premium article blocker. * @param {block} Block where the selector exists. diff --git a/styles/styles.css b/styles/styles.css index 4451936..11cc577 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -334,3 +334,7 @@ div.article-blocker-wrapper div.article-blocker-content a.cta:hover { } } +/* subscribe to newsletter page */ +.newsletter-subscribe main { + background-color: rgb(246 246 246); +}