diff --git a/blocks/headshot-list/headshot-list.css b/blocks/headshot-list/headshot-list.css new file mode 100644 index 00000000..f7c1bb39 --- /dev/null +++ b/blocks/headshot-list/headshot-list.css @@ -0,0 +1,124 @@ +/* Headshot List */ +.headshot-list-wrapper { + margin-bottom: var(--spacer-layout-05); +} + +.headshot-list-wrapper:last-of-type { + margin-bottom: 0; +} + +.headshot-list__item { + display: flex; + flex-direction: row; + align-items: flex-start; + max-width: var(--text-max-container); + gap: var(--spacer-element-08); + margin-bottom: var(--spacer-layout-02); +} + +.headshot-list__item:last-child { + margin-bottom: 0; +} + +.headshot-list__image { + width: var(--spacer-layout-05); +} + +.headshot-list__image img { + width: var(--spacer-layout-05); + height: var(--spacer-layout-05); + object-fit: cover; + border-radius: 50%; + border: 1px solid var(--neutral-sand); +} + +.headshot-list__content { + max-width: 552px; + width: 75%; +} + +.headshot-list__content .headshot-list__title { + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-18); + font-style: normal; + font-weight: 300; + margin: 0; +} + +.headshot-list__content h4 { + font-family: var(--sans-serif-font-regular); + font-size: var(--font-size-16); + font-style: normal; + font-weight: 300; + margin: var(--spacer-element-03) 0 0; +} + +.headshot-list__content p { + font-size: var(--font-size-16); + margin: var(--spacer-element-07) 0 0 0; +} + +.headshot-list__content hr { + display: block; + margin: var(--spacer-element-08) 0 0; + border: 0; + height: 1px; + width: 100%; + background-color: var(--neutral-sand); +} + +.headshot-list__content .headshot-list__socials { + margin-top: var(--spacer-element-05); +} + +.headshot-list__content .headshot-list__socials a { + display: inline-block; + margin-right: var(--spacer-element-05); +} + +.headshot-list__content .headshot-list__socials span.icon { + display: block; + position: relative; + width: 40px; + height: 40px; + border: solid 1px var(--neutral-sand); + border-radius: 50%; + background-color: var(--neutral-white); + background-image: var(--gradient-to-right-white); + background-position: 0 0; + background-size: 200% auto; + transition: all .3s ease-in-out; +} + +.headshot-list__content .headshot-list__socials a:hover span.icon, +.headshot-list__content .headshot-list__socials a:active span.icon { + background-image: var(--gradient-to-right); + background-position: 100% 0; +} + +.headshot-list__content .headshot-list__socials span.icon svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.headshot-list__content .headshot-list__socials a:hover span.icon svg *, +.headshot-list__content .headshot-list__socials a:active span.icon svg * { + fill: var(--neutral-white); +} + +/* Desktop */ +@media only screen and (min-width: 1200px) { + .headshot-list-wrapper { + margin-bottom: var(--spacer-layout-06); + } + + .headshot-list__item { + margin-bottom: var(--spacer-layout-04); + } + + .headshot-list__content .headshot-list__title { + font-size: var(--font-size-24); + } +} diff --git a/blocks/headshot-list/headshot-list.js b/blocks/headshot-list/headshot-list.js new file mode 100644 index 00000000..a6789cbd --- /dev/null +++ b/blocks/headshot-list/headshot-list.js @@ -0,0 +1,19 @@ +import { lookupPeople, createHeadshotList } from '../../scripts/scripts.js'; + +export default async function decorate(block) { + [...block.children].forEach(async (element) => { + const pathnames = [...element.querySelectorAll('a')].map((a) => { + const url = new URL(a.href); + if (url.hostname.endsWith('.page') || url.hostname.endsWith('.live') || url.hostname.endsWith('merative.com') || url.hostname.startsWith('localhost')) return url.pathname; + return a.href; + }); + + block.textContent = ''; + const pageList = await lookupPeople(pathnames); + if (pageList.length) { + pageList.forEach((row) => { + block.append(createHeadshotList(row, 'headshot-list__item')); + }); + } + }); +} diff --git a/blocks/leadspace/leadspace.css b/blocks/leadspace/leadspace.css index ad2574dc..2aca4acf 100644 --- a/blocks/leadspace/leadspace.css +++ b/blocks/leadspace/leadspace.css @@ -52,6 +52,7 @@ } .leadspace h4:first-of-type { + font-family: var(--sans-serif-font-medium); font-size: var(--font-size-11); letter-spacing: .2em; line-height: var(--line-height-120); @@ -439,6 +440,7 @@ main div.leadspace-wrapper { .leadspace:not(.document) > div:first-child > div:nth-child(1) { width: 334px; + padding: var(--spacer-layout-05) 0; } .leadspace.brand-logo > div:first-child > div:nth-child(1) { @@ -582,7 +584,7 @@ main div.leadspace-wrapper { .leadspace:not(.document) > div:first-child > div:nth-child(1) { width: 552px; - padding: 96px 0; + padding: var(--spacer-layout-06) 0; margin: auto auto auto 0; } diff --git a/blocks/marketo/marketo.css b/blocks/marketo/marketo.css index b925dd1f..39020c0d 100644 --- a/blocks/marketo/marketo.css +++ b/blocks/marketo/marketo.css @@ -2,14 +2,6 @@ /* stylelint-disable selector-class-pattern */ /* stylelint-disable no-descending-specificity */ -.section.marketo-container .default-content-wrapper h2 { - margin-bottom: 80px; -} - -.section.marketo-container .default-content-wrapper h3 { - margin-bottom: var(--spacer-layout-02) -} - .section.marketo-container.multiple .marketo-wrapper { display: flex; flex-direction: column; @@ -60,53 +52,6 @@ margin: 0 0 var(--spacer-element-10); } -/* Read more/less button */ -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more { - border-bottom: 1px solid var(--neutral-sand); -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - gap: var(--spacer-element-03); - font-weight: 700; - margin-bottom: var(--spacer-layout-02); - cursor: pointer; -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a:hover, -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a:active { - background: transparent; - color: var(--neutral-carbon); - /* stylelint-disable-line */ - -webkit-text-fill-color: unset;} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > a { - margin-top: var(--spacer-layout-06); -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a::after { - content: ''; - width: 16px; - height: 16px; - background: url('../../icons/arrow-up-black.svg') no-repeat; - transform: rotate(180deg); -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > a::after { - transform: unset; -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > p:first-of-type ~ *:not(a) { - display: none; -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > p:first-of-type ~ *:not(a) { - display: revert; -} - .marketo { width: 100%; } @@ -129,6 +74,7 @@ letter-spacing: .01em !important; line-height: 160% !important; width: 100% !important; + margin: 0 0 var(--spacer-element-07) 0; } .mktoForm .mktoFieldWrap .mktoHtmlText p { @@ -140,6 +86,10 @@ width: 100% !important; } +.mktoForm .mktoFieldWrap .mktoHtmlText a { + padding: 0 !important; +} + .mktoForm .mktoFormRow { clear: both !important; } @@ -162,7 +112,6 @@ .mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText small { float: right; font-size: var(--font-size-16); - margin-top: 37px; text-align: right !important; } @@ -170,7 +119,6 @@ -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; - background: var(--primary-purple) !important; border: 0 !important; border-radius: 40px !important; box-sizing: border-box !important; @@ -187,17 +135,17 @@ margin: 37px 0; max-height: 62px !important; padding: 11px 16px 11px 24px !important; - transition: all .4s ease-in-out !important; width: auto !important; + background-image: var(--gradient-to-right); + background-position: 0 0; + background-size: 200% auto; + transition: all .4s ease-in-out; } .mktoForm .mktoButtonWrap .mktoButton:active, .mktoForm .mktoButtonWrap .mktoButton:hover { - /* background-image: -webkit-gradient(linear, right top, left top, from(#fa1e32), to(var(--primary-purple))) !important; */ - background-image: linear-gradient(270deg, #fa1e32, var(--primary-purple)) !important; - - /* -webkit-transition: all .2s ease-in-out !important; */ - transition: all .2s ease-in-out !important; + border: 2px solid transparent; + background-position: 96% 0; } .mktoForm .mktoButtonWrap .mktoButton::after { @@ -230,7 +178,11 @@ } .mktoForm .mktoFormCol .mktoLabel { - padding-bottom: var(--spacer-layout-01) !important; + padding-bottom: var(--spacer-element-04) !important; +} + +.mktoForm .mktoGutter.mktoHasWidth { + height: auto; } .mktoForm .mktoRequiredField .mktoLabel::after { @@ -244,7 +196,8 @@ .mktoForm .mktoTextField, .mktoForm select.mktoField, .mktoForm textarea.mktoField { - appearance: none !important; + /* stylelint-disable property-no-vendor-prefix */ + -webkit-appearance: none; background: var(--neutral-bone) !important; border-color: var(--neutral-carbon) !important; border-width: 0 0 1px !important; @@ -396,6 +349,9 @@ input[type=radio] { opacity: 1 !important; height: 20px !important; width: 20px !important; + flex-basis: 20px; + flex-shrink: 0; + cursor: pointer; } .mktoForm select.mktoField[multiple] { @@ -416,8 +372,9 @@ input[type=radio] { display: flex; width: auto !important; align-items: center; - padding: 0.3em; - float: left; + padding: 0 !important; + margin: var(--spacer-element-07) 0; + float: left !important; } .mktoForm .mktoRadioList > label { @@ -426,7 +383,7 @@ input[type=radio] { font-size: var(--font-size-16) !important; letter-spacing: 0.16px; line-height: 160% !important; - margin: 0 32px 0 8px !important; + margin: 0 var(--spacer-element-07) 0 var(--spacer-element-04) !important; } /* Media queries */ diff --git a/blocks/marketo/marketo.js b/blocks/marketo/marketo.js index 47492c66..dac6772c 100644 --- a/blocks/marketo/marketo.js +++ b/blocks/marketo/marketo.js @@ -41,8 +41,6 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { return false; }); - // const conReasonField = document.querySelector('#contactmeHowcanwehelp'); - // const noButtonReasons = ['Customer Support']; let hasTrackedFormLoad = false; window.MktoForms2.whenReady((f) => { if (!hasTrackedFormLoad && window._satellite) { @@ -51,19 +49,6 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { }); hasTrackedFormLoad = true; } - // Keeping the below code that I got from the original site. - // function noMoreButton() { - // const reason = conReasonField.value; - // if (noButtonReasons.includes(reason)) { - // f.submittable(false); - // document.querySelector('.mktoForm .mktoButtonRow').style.display = 'none'; - // return false; - // } - // f.submittable(true); - // document.querySelector('.mktoForm .mktoButtonRow').style.display = 'block'; - // return false; - // } - // if (conReasonField) conReasonField.addEventListener('change', noMoreButton); f.addHiddenFields({ RBN_Referral_URL_Cargo__c: document.URL, @@ -90,64 +75,40 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { }; export default function decorate(block) { + // Read block configuration const blockConfig = readBlockConfig(block); const marketoId = placeholders.marketoid; + + // Extract form configuration details + const formTitle = blockConfig['form-title']; const formId = blockConfig['form-id']; const successUrl = blockConfig['success-url']; - const section = block.closest('.section.marketo-container'); - - // Handle headings in the section - if (section.children.length > 0) { - section.classList.add('multiple'); - } - - // Move heading to its own wrapper - const h2 = section.querySelector('h2:first-of-type, h3:first-of-type'); - if (h2 && h2.parentElement) { - const h2Wrapper = h2.parentElement; - const clonedWrapper = h2Wrapper.cloneNode(); - clonedWrapper.classList.add('heading'); - clonedWrapper.appendChild(h2); - section.prepend(clonedWrapper); - if (h2Wrapper.children.length === 0) { - h2Wrapper.parentElement.removeChild(h2Wrapper); - } - } - - // Move remaining content to marketo wrapper - section.querySelectorAll('.marketo-wrapper > div:not(.marketo)').forEach((div) => { - if (div.querySelector('h6')) { - div.classList.add('spacious'); - } - }); - - // Add read more/less link to default content - const defaultContent = section.querySelectorAll('.default-content-wrapper:not(.heading)'); - defaultContent.forEach((wrapper) => { - if (wrapper.querySelectorAll(':scope > p:first-of-type ~ *').length > 0) { - const showMore = createTag('a', { role: 'button' }); - showMore.textContent = 'Read more'; - showMore.addEventListener('click', () => { - wrapper.classList.toggle('open'); - showMore.textContent = wrapper.classList.contains('open') ? 'Read less' : 'Read more'; - }); - wrapper.classList.add('show-more'); - wrapper.appendChild(showMore); - } - }); if (formId && marketoId) { + // Create the form element const formElement = createTag('form', { id: `mktoForm_${formId}` }); block.textContent = ''; + + // Create and append form title (if available) + if (formTitle) { + const titleElement = createTag('h2', { id: `${formTitle.toLowerCase()}` }); + titleElement.textContent = formTitle; + block.append(titleElement); + } + + // Append the form element block.append(formElement); + // Set up an observer to embed the Marketo form when block is in view const observer = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) { + // Embed the Marketo form embedMarketoForm(marketoId, formId, successUrl); observer.disconnect(); } }); + + // Start observing the block observer.observe(block); - // window.setTimeout(() => embedMarketoForm(marketoId, formId, successUrl), 3000); } } diff --git a/scripts/scripts.js b/scripts/scripts.js index 81d58789..cd9a2ae3 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -283,6 +283,33 @@ export async function lookupBlogs(pathnames) { return (result); } +/** + * Gets details about people that are indexed + * @param {Array} pathnames list of pathnames + */ + +export async function lookupPeople(pathnames) { + if (!window.peopleIndex) { + const resp = await fetch(`${window.hlx.codeBasePath}/people/query-index.json`); + const json = await resp.json(); + const lookup = {}; + json.data.forEach((row) => { + lookup[row.path] = row; + if (row.image.startsWith('/default-meta-image.png')) { + row.image = getRandomDefaultImage(); + } else { + row.image = `/${window.hlx.codeBasePath}${row.image}`; + } + }); + window.peopleIndex = { + data: json.data, + lookup, + }; + } + const result = pathnames.map((path) => window.peopleIndex.lookup[path]).filter((e) => e); + return (result); +} + /** * Fetches and transforms data from a JSON file * @param {string} path - The path to the JSON file @@ -498,6 +525,85 @@ export function createDocumentCard(row, styles) { return (card); } +/** + * Creates a Headshot List using a JSON object and style associated with the List + * @param {Object} row JSON Object typically coming from an index array item + * @param {Array} styles Class names that needs to be added to the List root div + */ +export function createHeadshotList(row, styles) { + const list = document.createElement('div'); + if (styles) list.classList.add(styles); + + // Add image + if (row.image !== '0' && row.title !== '0') { + const listImage = document.createElement('div'); + listImage.classList.add('headshot-list__image'); + listImage.appendChild(createOptimizedPicture(row.image, row.title)); + list.prepend(listImage); + } + + // Add content + const listContent = document.createElement('div'); + listContent.classList.add('headshot-list__content'); + + if (row.title) { + listContent.innerHTML += `
${row.title}
`; + } + + if (row['display-title']) { + listContent.innerHTML += `

${row['display-title']}

`; + } + + if (row.description) { + listContent.innerHTML += `

${row.description}

`; + } + + listContent.innerHTML += '
'; + + // Socials + const socialLinks = []; + + if (row.twitter) { + socialLinks.push({ + href: row.twitter, + label: 'Open Twitter', + iconClass: 'icon-twitter', + }); + } + + if (row.linkedin) { + socialLinks.push({ + href: row.linkedin, + label: 'Open LinkedIn', + iconClass: 'icon-linkedin', + }); + } + + if (socialLinks.length > 0) { + const listContentSocial = document.createElement('div'); + listContentSocial.classList.add('headshot-list__socials'); + + socialLinks.forEach((linkInfo) => { + const link = document.createElement('a'); + link.href = linkInfo.href; + link.target = '_blank'; + link.setAttribute('aria-label', linkInfo.label); + + const iconSpan = document.createElement('span'); + iconSpan.classList.add('icon', linkInfo.iconClass); + link.appendChild(iconSpan); + + listContentSocial.appendChild(link); + }); + + decorateIcons(listContentSocial); + listContent.appendChild(listContentSocial); + } + list.appendChild(listContent); + + return list; +} + /** * Gets details about documents that are indexed * @param {Array} pathnames list of pathnames @@ -605,26 +711,45 @@ function decorateOnlyPicture(main) { } /** - * Move any content in a Marketo section under marketo wrapper. + * Restructure DOM into Two Column Layout. * @param main */ -function decorateMarketo(main) { - // Move remaining content to marketo wrapper - const wrapper = main.querySelector('.marketo-wrapper'); - if (!wrapper) { +function restructureContentLayout(main) { + // Find the Section Content Body element + const sectionContentBody = main.querySelector('.section-content-body'); + if (!sectionContentBody) { return; } - const section = wrapper.closest('.section'); - [...section.children].forEach((div) => { - if (div === wrapper) { - return; - } - if (div.nextElementSibling === wrapper) { - wrapper.prepend(div); - } else { - wrapper.appendChild(div); - } - }); + + // Find the Marketo element + const marketoWrapper = main.querySelector('.marketo-wrapper'); + if (!marketoWrapper) { + return; + } + + // Check if '.section-content-body__text' already exists, otherwise create it + let contentBodyText = main.querySelector('.section-content-body__text'); + if (!contentBodyText) { + contentBodyText = document.createElement('div'); + contentBodyText.classList.add('section-content-body__text'); + + // Get all parent-level elements within '.section-content-body' + const parentElements = Array.from(sectionContentBody.children); + + // Iterate through the parent-level elements + parentElements.forEach((element) => { + // Check if the element is not equal to '.marketo-wrapper' + if (!element.classList.contains('marketo-wrapper')) { + contentBodyText.appendChild(element); + } + }); + + // Insert '.section-content-body__text' before '.marketo-wrapper' + sectionContentBody.insertBefore(contentBodyText, marketoWrapper); + + // Add '.section-content-body__form' class to '.marketo-wrapper' + marketoWrapper.classList.add('section-content-body__form'); + } } /** @@ -641,7 +766,7 @@ export function decorateMain(main) { buildAutoBlocks(main); decorateSections(main); decorateBlocks(main); - decorateMarketo(main); + restructureContentLayout(main); } /** diff --git a/styles/styles.css b/styles/styles.css index 05e73f3a..86f89eb7 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -201,6 +201,7 @@ --gap-48: 48px; --gap-84: 84px; --gap-120: 120px; + --gap-216: 216px; /* section widths */ --secton-max-container: 1128px; @@ -209,6 +210,7 @@ --section-width-tablet-small: 696px; --section-width-tablet-large: 928px; --text-max-container: 648px; + --sidebar-max-container: 360px; } html { @@ -359,42 +361,7 @@ blockquote { margin: var(--spacer-element-05) 0 var(--spacer-element-05); } -.article-content-wrapper h1 { -font-size: var(--font-size-32); -max-width: var(--text-max-container); -margin: 16px 0; -} - -.article-content-wrapper p + p { - margin: var(--spacer-element-09) 0 var(--spacer-element-09); -} - -.article-content-wrapper p.lede { - font-size: var(--font-size-18); - max-width: var(--text-max-container); -} - -.article-content-wrapper p.only-picture { - margin-top: var(--spacer-element-08); -} - -/* Article Detail - Publication Info */ -.article-content-wrapper .publication-info-wrapper { - font-size: var(--font-size-16); - margin-top: var(--spacer-element-08); - line-height: 160%; -} - -.article-content-wrapper .publication-info-wrapper .pipe { - color: var(--neutral-sand); - margin: 0 var(--spacer-element-05); -} - -/* Article Detail - Divider */ -.article-content-wrapper .divider { - margin: var(--spacer-layout-04) 0; -} - +/* No Paddings */ .no-pad.section, .no-pad.section .default-content-wrapper, .no-pad.section p { @@ -402,7 +369,13 @@ margin: 16px 0; padding: 0; } -/* removes extra space around images */ +.no-pad-bottom.section, +.no-pad-bottom.section .default-content-wrapper, +.no-pad-bottom.section p { + padding-bottom: 0; +} + +/* Removes extra space around images */ main p.only-picture, main div.only-picture, main source { @@ -913,6 +886,43 @@ main ul a:not(.button):active { padding-top: 0; } +/* Article Detail */ +.article-content-wrapper h1 { + font-size: var(--font-size-32); + max-width: var(--text-max-container); + margin: var(--spacer-element-05) 0; +} + +.article-content-wrapper p + p { + margin: var(--spacer-element-09) 0 var(--spacer-element-09); +} + +.article-content-wrapper p.lede { + font-size: var(--font-size-18); + max-width: var(--text-max-container); +} + +.article-content-wrapper p.only-picture { + margin-top: var(--spacer-element-08); +} + +/* Article Detail - Publication Info */ +.article-content-wrapper .publication-info-wrapper { + font-size: var(--font-size-16); + margin-top: var(--spacer-element-08); + line-height: 160%; +} + +.article-content-wrapper .publication-info-wrapper .pipe { + color: var(--neutral-sand); + margin: 0 var(--spacer-element-05); +} + +/* Article Detail - Divider */ +.article-content-wrapper .divider { + margin: var(--spacer-layout-04) 0; +} + .article-content-wrapper .default-content-wrapper p.button-container > a { text-decoration: none; margin-bottom: var(--spacer-layout-03); @@ -1249,7 +1259,118 @@ main pre { background-color: var(--neutral-bone); } -/* All except mobile */ +/* Section - Content body */ +main > .section-content-body { + width: calc(100% - var(--spacer-layout-04)); + max-width: var(--secton-max-container); + margin: 0 auto; + padding: var(--spacer-layout-05) 0 var(--spacer-layout-05) 0; +} + +main .section-content-body > div:first-child, +.section-content-body .section-content-body__text { + width: 100%; + padding: 0 !important; + margin-bottom: var(--spacer-layout-05); +} + +main .section.section-content-body > div:last-child { + padding-bottom: 0; +} + +.section-content-body .section-content-body__text h3 { + margin: var(--spacer-layout-05) 0 var(--spacer-layout-02) 0; +} + +.section-content-body .section-content-body__text .default-content-wrapper h3:first-child { + margin-top: 0; +} + +.section-content-body .section-content-body__text h6 { + font-size: var(--font-size-18); + font-family: var(--sans-serif-font-regular); + margin-top: var(--spacer-layout-04); +} + +.section-content-body .section-content-body__text .default-content-wrapper p, +.section-content-body .section-content-body__text .default-content-wrapper ul, +.section-content-body .section-content-body__text .default-content-wrapper ol { + font-size: var(--font-size-16); + margin: 0 0 var(--spacer-element-05) 0; +} + +.section-content-body .section-content-body__text, +.section-content-body .section-content-body__form { + width: 100%; + padding: 0; +} + +.section-content-body .section-content-body__form h2, +.section-content-body .section-content-body__form h3 { + margin-top: 0; +} + +/* Section - Content body with Read more/less button */ +.section-content-body .section-content-body__text.show-more { + border-bottom: 1px solid var(--neutral-sand); +} + +.section-content-body .section-content-body__text.show-more > button { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + gap: var(--spacer-element-03); + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-16); + font-weight: 700; + margin: 0 auto var(--spacer-layout-02) auto; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.section-content-body .section-content-body__text.show-more > button:hover { + background: transparent; + color: var(--neutral-carbon); + /* stylelint-disable-line */ + -webkit-text-fill-color: unset; +} + +.section-content-body .section-content-body__text.show-more.open > button { + margin-top: var(--spacer-layout-06); +} + +.section-content-body .section-content-body__text.show-more > button::after { + content: ''; + width: 14px; + height: 14px; + background: url('../../icons/arrow-up-black.svg') no-repeat; + background-size: contain; + transform: rotate(180deg); +} + +.section-content-body .section-content-body__text.show-more.open > button::after { + transform: unset; +} + +.section-content-body .section-content-body__text.show-more > *:not(button) { + display: none; +} + +.section-content-body .section-content-body__text.show-more.open > *:not(button), +.section-content-body .section-content-body__text.show-more > .default-content-wrapper:first-of-type { + display: revert; +} + +/* Section - Content body with sidebar text */ +main > .section-content-body.section-with-sidebar .section-content-body__text p { + font-size: var(--font-size-16); + font-family: var(--sans-serif-font-light); + margin: var(--spacer-element-05) 0; +} + +/* Tablet */ @media only screen and (min-width: 768px) { main { padding-top: var(--nav-height-mobile) @@ -1340,6 +1461,19 @@ main pre { height: 354px; } + /* Section - Content body */ + main > .section-content-body { + width: calc(100% - 72px); + padding: var(--spacer-layout-06) 0 var(--spacer-layout-07) 0; + } + + .section-content-body .section-content-body__text h3 { + margin: var(--spacer-layout-06) 0 var(--spacer-layout-04) 0; + } + + .section-content-body .section-content-body__text h6 { + font-size: var(--font-size-21); + } } /* All except desktop */ @@ -1692,4 +1826,63 @@ main pre { .section.section-content-band-list .only-picture picture { width: 312px; } + + /* Section - Content body */ + main > .section-content-body { + width: 100%; + display: flex; + flex-direction: row; + align-items: flex-start; + gap: var(--gap-120); + padding: var(--spacer-layout-06) 0 var(--spacer-layout-07) 0; + } + + main .section-content-body > div:first-child, + .section-content-body .section-content-body__text { + width: var(--text-max-container); + } + + .section-content-body .section-content-body__text .default-content-wrapper h3, + .section.marketo-container .default-content-wrapper h3 { + margin: var(--spacer-layout-06) 0 var(--spacer-layout-04) 0; + } + + .section-content-body .section-content-body__text .default-content-wrapper p, + .section-content-body .section-content-body__text .default-content-wrapper ul, + .section-content-body .section-content-body__text .default-content-wrapper ol { + font-size: var(--font-size-21); + margin: 0 0 var(--spacer-element-10) 0; + } + + .section-content-body .section-content-body__form { + width: var(--sidebar-max-container); + } + + /* Section - Content body with sidebar text */ + main > .section-content-body.section-with-sidebar { + flex-direction: row-reverse; + gap: var(--gap-216); + } + + .section-content-body.section-with-sidebar .section-content-body__form { + width: 649px; + } + + main .section-content-body.section-with-sidebar > div:first-child, + .section-content-body.section-with-sidebar .section-content-body__text { + width: 264px; + } + + /* Section - Content body with Read more/less button */ + .section-content-body .section-content-body__text.show-more { + border-bottom: 0; + } + + .section-content-body .section-content-body__text.show-more > button { + display: none; + } + + .section-content-body .section-content-body__text.show-more > *:not(button) { + display: inherit; + } }