diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index 3fb7e0a00..2af06551b 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -1,12 +1,7 @@ -main .section.v2-cards-container .v2-cards-wrapper { - padding: 0; -} - .v2-cards { display: flex; flex-direction: column; gap: 24px; - padding: 16px; justify-content: center; max-width: var(--wrapper-width); margin: auto; @@ -76,7 +71,6 @@ main .section.v2-cards-container .v2-cards-wrapper { .v2-cards { flex-flow: row wrap; gap: 16px; - padding: 0; justify-content: center; } diff --git a/blocks/v2-columns/v2-columns.css b/blocks/v2-columns/v2-columns.css index efb3dec7c..d1a7f6318 100644 --- a/blocks/v2-columns/v2-columns.css +++ b/blocks/v2-columns/v2-columns.css @@ -5,6 +5,7 @@ width: 100%; justify-content: center; align-items: flex-start; + color: var(--c-primary-black); } .v2-columns__column--with-image, @@ -33,11 +34,13 @@ padding: 40px 0; } -.v2-columns__column--with-text .v2-columns__pretitle { - font-family: var(--ff-accents-regular); - font-size: var(--accent-2-font-size); - line-height: var(--accent-2-line-height); - margin: 0; +.v2-columns__heading { + word-wrap: break-word; +} + +.v2-columns-container .default-content-wrapper h2, +.v2-columns__heading.h2 { + font-family: var(--ff-headline-medium); } .v2-columns__column--with-text .v2-columns__heading { @@ -49,20 +52,21 @@ margin: 0 0 32px; } +.v2-columns__column--with-text .v2-columns__body a { + color: var(--c-primary-black); + border-bottom: 1px solid var(--c-accent-red); + text-decoration: none; +} + .v2-columns__column--with-text a.button { width: fit-content; - margin: 0; + margin-top: 12px; } .v2-columns__column--with-text a.button:not(a.button:first-of-type) { margin: 5px 0 0; } -.v2-columns--info { - padding: 24px 16px; - background: var(--c-primary-white); -} - .v2-columns--info .v2-columns__column { gap: 8px; } @@ -119,22 +123,19 @@ order: unset; } - .v2-columns__column--with-text { + .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text { padding: 0 56px; } - .v2-columns__column--with-text .v2-columns__heading { - margin: 0; + .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text .v2-columns__heading { + margin: 24px 0 12px; + font-size: var(--headline-1-font-size); } .v2-columns__column--with-text .v2-columns__body { margin: 0 0 14px; } - .v2-columns--info { - padding: 20px 40px; - } - .v2-columns--info .v2-columns__row { justify-content: space-between; align-items: flex-start; @@ -154,3 +155,10 @@ width: 100%; } } + +@media (min-width: 1200px) { + .v2-columns--info { + padding: 20px 40px; + background: var(--c-primary-white); + } +} diff --git a/blocks/v2-columns/v2-columns.js b/blocks/v2-columns/v2-columns.js index 2e04118e8..86d98c214 100644 --- a/blocks/v2-columns/v2-columns.js +++ b/blocks/v2-columns/v2-columns.js @@ -35,7 +35,7 @@ export default async function decorate(block) { }); bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`)); - const buttons = [...col.querySelectorAll('a')]; + const buttons = [...col.querySelectorAll('.button-container a')]; buttons.forEach((btn) => { btn.classList.add('button', 'button--large', 'button--primary'); @@ -59,7 +59,7 @@ export default async function decorate(block) { const pretitleText = prevEl && !prevEl.classList.contains('icon') && prevEl.textContent; if (pretitleText) { - const pretitle = createElement('span', { classes: `${blockName}__pretitle` }); + const pretitle = createElement('span', { classes: 'pretitle' }); pretitle.textContent = pretitleText; prevEl.replaceWith(pretitle); } @@ -89,7 +89,7 @@ export default async function decorate(block) { heading.replaceWith(newHeadingEl); }); - const buttons = [...block.querySelectorAll('a')]; + const buttons = [...block.querySelectorAll('.button-container a')]; buttons.forEach((button) => { button.classList.add('standalone-link', `${blockName}__button`); button.classList.remove('button', 'button--primary', 'button--large'); diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css index f884c7c5b..2a5814410 100644 --- a/blocks/v2-hero/v2-hero.css +++ b/blocks/v2-hero/v2-hero.css @@ -24,7 +24,8 @@ padding: 40px 16px; display: flex; flex-direction: column; - max-width: 1040px; + max-width: var(--wrapper-width); + width: 100%; } .v2-hero__heading { @@ -60,8 +61,6 @@ @media (min-width: 1200px) { .v2-hero__content { - max-width: 1040px; - width: 1040px; margin: 0 auto; padding: 0 0 78px; } @@ -92,7 +91,6 @@ height: 68px; padding: 0; max-width: unset; - width: 100%; @media (min-width: 1200px) { min-height: 160px; diff --git a/blocks/v2-solutions/v2-solutions.css b/blocks/v2-solutions/v2-solutions.css new file mode 100644 index 000000000..4c618f2a5 --- /dev/null +++ b/blocks/v2-solutions/v2-solutions.css @@ -0,0 +1,74 @@ +.v2-solutions-container { + display: flex; + flex-direction: column; +} + +.v2-solutions-wrapper { + flex-basis: 33.33%; +} + +.v2-solutions-container.v2-cards-container { + margin: auto; +} + +.v2-solutions-container.v2-cards-container .v2-cards-wrapper { + flex-basis: 66.66%; +} + +.v2-solutions-container.v2-cards-container .v2-cards__card-item { + width: 100%; +} + +.v2-solutions h1 { + font: normal var(--headline-1-font-size)/1.15 var(--ff-headline-medium); + margin-top: 12px; +} + +.v2-solutions h1 + p { + font: normal var(--body-font-size-s)/1.5 var(--ff-body); +} + +@media (min-width: 744px) { + .v2-solutions-container { + flex-direction: row; + } + + .v2-solutions-container.v2-cards-container { + margin: auto; + } + + .v2-solutions-container.v2-cards-container .v2-cards-wrapper { + padding-left: 0; + } + + .v2-solutions-container.v2-cards-container .v2-cards { + justify-content: flex-end; + } + + .v2-solutions-container.v2-cards-container .v2-cards__card-item { + max-width: calc(50% - 8px); + } +} + +@media (min-width: 1200px) { + .v2-solutions { + padding-right: 16px; + } + + .v2-solutions-container.v2-cards-container { + display: grid; + grid-template-columns: 1fr 320px 720px 1fr; + } + + .v2-solutions-container.v2-cards-container .v2-solutions-wrapper { + grid-column: 2; + } + + .v2-solutions-container.v2-cards-container .v2-cards__card-item { + max-width: calc(50% - 24px); + } + + .v2-solutions h1 { + font-size: var(--headline-1-font-size); + } +} diff --git a/blocks/v2-solutions/v2-solutions.js b/blocks/v2-solutions/v2-solutions.js new file mode 100644 index 000000000..38d7b8e42 --- /dev/null +++ b/blocks/v2-solutions/v2-solutions.js @@ -0,0 +1,7 @@ +import { adjustPretitle, unwrapDivs } from '../../scripts/common.js'; + +export default function decorate(block) { + const content = block.querySelector(':scope > div > div'); + adjustPretitle(content); + unwrapDivs(block); +} diff --git a/blocks/v2-tabbed-carousel/v2-tabbed-carousel.css b/blocks/v2-tabbed-carousel/v2-tabbed-carousel.css index faa0731da..263307e30 100644 --- a/blocks/v2-tabbed-carousel/v2-tabbed-carousel.css +++ b/blocks/v2-tabbed-carousel/v2-tabbed-carousel.css @@ -16,6 +16,10 @@ background-color: var(--bg-color); } +main .section.v2-tabbed-carousel-container { + padding: 0; +} + .v2-tabbed-carousel__items { align-items: flex-end; display: flex; diff --git a/blocks/v2-testimonial/v2-testimonial.css b/blocks/v2-testimonial/v2-testimonial.css index c9e4ac4ab..c1c3130bd 100644 --- a/blocks/v2-testimonial/v2-testimonial.css +++ b/blocks/v2-testimonial/v2-testimonial.css @@ -1,38 +1,51 @@ /* stylelint-disable selector-class-pattern */ +.v2-testimonial-wrapper { + --testimonial-padding: 90px; +} + .v2-testimonial { position: relative; display: flex; flex-direction: column; + margin: 0 auto; } .v2-testimonial__blockquote-column { - background-color: #2b2b2b; + background-color: var(--c-secondary-graphite); padding: 48px 16px; color: var(--c-primary-white); font: var(--body-2-font-size)/var(--body-2-line-height) var(--ff-body); letter-spacing: 0.3px; - padding-right: calc(100vw - 510px); } .v2-testimonial__blockquote-column strong { font-family: var(--ff-body-bold); + font-weight: normal; } .v2-testimonial__heading { color: var(--c-primary-white); - font: var(--headline-1-font-size)/var(--headline-1-line-height) var(--ff-headline-medium); + font: var(--headline-2-font-size)/var(--headline-2-line-height) var(--ff-headline-medium); letter-spacing: -0.64px; margin: 24px 0; } .v2-testimonial__blockquote { font: var(--testimonial-font-size)/var(--testimonial-line-height) var(--ff-testimonial); - letter-spacing: -0.36px; + letter-spacing: var(--testimonial-letter-spacing); margin: 40px 0; text-indent: 0; } +@supports not (hanging-punctuation: first) { + .v2-testimonial__blockquote p::before { + display: inline-block; + width: 0.75rem; + margin-left: -0.75rem; + } +} + .v2-testimonial__image { width: 100%; display: flex; @@ -64,6 +77,11 @@ height: 32px; } +.v2-testimonial__author strong { + font-family: var(--ff-body-bold); + font-weight: normal; +} + .v2-testimonial__video-link-wrapper { margin: 0; display: flex; @@ -112,7 +130,9 @@ @media (min-width: 1200px) { .v2-testimonial { - padding-bottom: 100px; + margin: 0 auto; + max-width: 1440px; + padding-bottom: 60px; } .v2-testimonial__image-row { @@ -130,8 +150,13 @@ z-index: 1; } + .v2-testimonial__blockquote-column > * { + max-width: 430px; + margin-left: auto; + } + .v2-testimonial__blockquote-column { - padding: 54px 200px 34px 90px; + padding: 54px var(--testimonial-padding) 34px; } .v2-testimonial__video-section { @@ -143,12 +168,21 @@ width: calc(50% + 80px); } + .v2-testimonial--overlap .v2-testimonial__blockquote-column > * { + max-width: 510px; + } + .v2-testimonial--media-left { display: flex; justify-content: flex-end; flex-direction: row; } + .v2-testimonial--media-left .v2-testimonial__blockquote-column > * { + margin-right: auto; + margin-left: unset; + } + .v2-testimonial--media-left .v2-testimonial__image-row { left: 0; right: unset; diff --git a/blocks/v2-testimonial/v2-testimonial.js b/blocks/v2-testimonial/v2-testimonial.js index e6c3e0cf1..febe77efb 100644 --- a/blocks/v2-testimonial/v2-testimonial.js +++ b/blocks/v2-testimonial/v2-testimonial.js @@ -63,7 +63,15 @@ export default async function decorate(block) { }); const blockquotes = [...col.querySelectorAll('blockquote')]; - blockquotes.forEach((bq) => bq.classList.add(`${blockClass}__blockquote`)); + blockquotes.forEach((bq) => { + const em = bq.querySelector('em'); + + if (em) { + em.outerHTML = em.innerHTML; + } + + bq.classList.add(`${blockClass}__blockquote`); + }); // recognizing the column with blockquotes blockquotes.forEach((bq) => { diff --git a/icons/battery.svg b/icons/battery.svg new file mode 100644 index 000000000..b713ffc4c --- /dev/null +++ b/icons/battery.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/icons/checkmark.svg b/icons/checkmark.svg new file mode 100644 index 000000000..f0c591b91 --- /dev/null +++ b/icons/checkmark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/connected.svg b/icons/connected.svg index 29d314d0c..3f2dfe4ac 100644 --- a/icons/connected.svg +++ b/icons/connected.svg @@ -1,6 +1,8 @@ - - - - - - + + + + + + + + \ No newline at end of file diff --git a/icons/customer-story.svg b/icons/customer-story.svg new file mode 100644 index 000000000..a0e39038d --- /dev/null +++ b/icons/customer-story.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/icons/customized.svg b/icons/customized.svg index f69eeb11e..c36539b34 100644 --- a/icons/customized.svg +++ b/icons/customized.svg @@ -1,11 +1,15 @@ - - - - - - - - + + + + + + + + + + + + diff --git a/icons/download.svg b/icons/download.svg index 2e032ecc2..65eacd709 100644 --- a/icons/download.svg +++ b/icons/download.svg @@ -1,6 +1,8 @@ - - - + + + + + \ No newline at end of file diff --git a/icons/electricity.svg b/icons/electricity.svg new file mode 100644 index 000000000..d1a7a9f31 --- /dev/null +++ b/icons/electricity.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/lightning-bolt.svg b/icons/lightning-bolt.svg new file mode 100644 index 000000000..87a3953db --- /dev/null +++ b/icons/lightning-bolt.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/icons/maintenance.svg b/icons/maintenance.svg new file mode 100644 index 000000000..cecca83a4 --- /dev/null +++ b/icons/maintenance.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/icons/network.svg b/icons/network.svg new file mode 100644 index 000000000..a85509040 --- /dev/null +++ b/icons/network.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/icons/performance-monitoring.svg b/icons/performance-monitoring.svg new file mode 100644 index 000000000..80a5dc0e7 --- /dev/null +++ b/icons/performance-monitoring.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/speach.svg b/icons/speach.svg deleted file mode 100644 index 064c77e0e..000000000 --- a/icons/speach.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/media/dots.svg b/media/dots.svg new file mode 100644 index 000000000..f2a28b1aa --- /dev/null +++ b/media/dots.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/scripts/common.js b/scripts/common.js index c179c325b..f515f5c73 100644 --- a/scripts/common.js +++ b/scripts/common.js @@ -138,6 +138,20 @@ export const removeEmptyTags = (block) => { }); }; +export const unwrapDivs = (element) => { + Array.from(element.children).forEach((node) => { + if (node.tagName === 'DIV' && node.attributes.length === 0) { + while (node.firstChild) { + element.insertBefore(node.firstChild, node); + } + node.remove(); + unwrapDivs(element); + } else { + unwrapDivs(node); + } + }); +}; + export const variantsClassesToBEM = (blockClasses, expectedVariantsNames, blockName) => { expectedVariantsNames.forEach((variant) => { if (blockClasses.contains(variant)) { @@ -200,3 +214,24 @@ export const generateId = (prefix = 'id') => { idValue += 1; return `${prefix}-${idValue}`; }; + +export const adjustPretitle = (element) => { + const headingSelector = 'h1, h2, h3, h4, h5, h6'; + + [...element.querySelectorAll(headingSelector)].forEach((heading) => { + const isNextElHeading = heading.nextElementSibling?.matches(headingSelector); + if (!isNextElHeading) { + return; + } + + const currentLevel = Number(heading.tagName[1]); + const nextElLevel = Number(heading.nextElementSibling.tagName[1]); + + if (currentLevel > nextElLevel) { + const pretitle = createElement('span', { classes: ['pretitle'] }); + pretitle.append(...heading.childNodes); + + heading.replaceWith(pretitle); + } + }); +}; diff --git a/scripts/scripts.js b/scripts/scripts.js index 7106cf9d8..c21839c6a 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -17,6 +17,7 @@ import { toClassName, loadScript, getHref, + createOptimizedPicture, } from './lib-franklin.js'; import { @@ -25,6 +26,7 @@ import { loadDelayed, getPlaceholders, slugify, + variantsClassesToBEM, } from './common.js'; import { isVideoLink, @@ -274,6 +276,24 @@ export function decorateLinks(block) { }); } +function decorateSectionBackgrounds(main) { + const variantClasses = ['black-background', 'gray-background', 'background-with-dots']; + + main.querySelectorAll(':scope > .section').forEach((section) => { + // transform background color variants into BEM classnames + variantsClassesToBEM(section.classList, variantClasses, 'section'); + + // If the section contains a background image + const src = section.dataset.backgroundImage; + + if (src) { + const picture = createOptimizedPicture(src, '', false); + section.prepend(picture); + section.classList.add('section--with-background'); + } + }); +} + const createInpageNavigation = (main) => { const navItems = []; const tabItemsObj = []; @@ -401,6 +421,7 @@ export function decorateMain(main, head) { buildAutoBlocks(main, head); decorateSections(main); decorateBlocks(main); + decorateSectionBackgrounds(main); decorateLinks(main); // Truck carousel diff --git a/styles/styles.css b/styles/styles.css index 4a213ad94..98d603d08 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -496,7 +496,7 @@ main img { } @media (min-width: 900px) { - .section > div { + :where(html:not(.redesign-v2)) .section > div { max-width: 1200px; margin: auto; } @@ -777,6 +777,9 @@ main .section.responsive-title h1 { --v2-space-small: 16px; --color-icon: var(--c-primary-black); --color-icon-accent: var(--c-primary-gold); + --section-max-width: 1920px; + --section-padding: 40px 0; + --section-div-padding: 24px var(--v2-space-small); font-size: 16px; @@ -836,7 +839,7 @@ main .section.responsive-title h1 { /* GT America, Extended Roman, 24px, 120%, -2% / 18px, 120%, -2% */ --testimonial-font-size: 1.125rem; /* 18px */ --testimonial-line-height: 120%; - --testimonial-letter-spacing: -2%; + --testimonial-letter-spacing: -.0225rem; /* Motions */ --duration-small: 160ms; @@ -1001,18 +1004,119 @@ main .section.responsive-title h1 { border-color: #D9D9D9; } +/* Section Background colors */ +.section--black-background, +.section--gray-background { + --card-background: var(--c-primary-white); + --card-text: var(--c-primary-black); +} + +.section--black-background { + --text-color: var(--c-primary-white); + + color: var(--text-color); + background-color: var(--c-secondary-graphite); +} + +.section--gray-background { + --text-color: var(--c-primary-black); + + color: var(--text-color); + background-color: var(--c-secondary-silver); +} + +.section--background-with-dots { + position: relative; + z-index: 1; +} + +.section--background-with-dots::after { + background-image: url('../../media/dots.svg'); + background-position: top right 10px; + bottom: 0; + content: ''; + display: block; + height: 60%; + height: round(60%, 24px); + width: 40%; + width: round(40%, 24px);; + position: absolute; + right: 0; + z-index: 1; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.section--background-with-dots > div { + position: relative; + z-index: 2; +} + +.section--with-background { + --section-padding: 0; + --text-color: var(--c-primary-white); + + aspect-ratio: 2 / 1; + color: var(--text-color); + display: flex; + flex-direction: column; + margin-left: auto; + margin-right: auto; + max-width: var(--section-max-width); + position: relative; +} + +.section--with-background .default-content-wrapper { + background-color: var(--c-secondary-graphite); +} + +.section--with-background > picture:first-of-type img { + display: block; + height: 100%; + object-fit: cover; + width: 100%; +} + +/* End section Background colors */ + /* stylelint-disable-next-line no-descending-specificity */ .redesign-v2 .section { - padding: 40px 0; + padding: var(--section-padding); scroll-margin-top: calc(var(--nav-height) + var(--inpage-navigation-height)); } /* stylelint-disable-next-line no-descending-specificity */ .redesign-v2 .section > div { - padding: 0 var(--v2-space-small); - margin: 0 auto; + padding: var(--section-div-padding); + max-width: var(--wrapper-width); + margin-left: auto; + margin-right: auto; + width: 100%; +} + +/* Remove padding top of consecutive sections with background image or colors */ +.redesign-v2 .section:first-child, +.redesign-v2 .v2-testimonial-container, +.section:not(.section--black-background, .section--gray-background, .v2-hero-container, .section--with-background) + .section:not(.section--black-background, .section--gray-background, .section--with-background) { + padding-top: 0; +} + +/* Prevent padding in blocks that contain multiple sections */ +/* stylelint-disable-next-line no-descending-specificity */ +.section:has(+ .v2-truck-lineup-container, + .v2-tabbed-carousel-wrapper) { + padding-bottom: 0; +} + +/* Prevent margins for first and last element of a text */ +.redesign-v2 .section > div.default-content-wrapper > *:first-child { + margin-top: 0; +} + +.redesign-v2 .section > div.default-content-wrapper > *:last-child { + margin-bottom: 0; } +/* END Prevent margins for first and last element of a text */ + .redesign-v2 .section > .full-width { padding: 0; margin: 0; @@ -1024,7 +1128,8 @@ main .section.responsive-title h1 { padding: 0; } -.section.header-with-mark > .default-content-wrapper:first-child > h1:first-child::before, +.section.header-with-mark > .default-content-wrapper:first-of-type > h1:first-child::before, +.section.header-with-mark > .default-content-wrapper:first-of-type > h2:first-child::before, .redesign-v2 .with-marker::before { content: ''; margin: 0; @@ -1048,8 +1153,7 @@ main .section.responsive-title h1 { background: transparent; } -.redesign-v2 a.standalone-link:active, -.redesign-v2 a.standalone-link:visited { +.redesign-v2 a.standalone-link:active { color: var(--c-tertiary-cool-gray); } @@ -1060,18 +1164,28 @@ main .section.responsive-title h1 { } @media (min-width: 1040px) { - .redesign-v2 .section { - padding: 80px 0; + .section.header-with-mark > .default-content-wrapper:first-of-type > h1:first-child::before, + .section.header-with-mark > .default-content-wrapper:first-of-type > h2:first-child::before, + .redesign-v2 .with-marker::before { + width: 65px; } +} - .redesign-v2 .section > div { - margin: 0 auto; - max-width: var(--wrapper-width); - padding: 0; +@media (min-width: 744px) { + .section--background-with-dots::after { + height: 75%; + height: round(75%, 24px); + width: 55%; + width: round(55%, 24px); + background-position: top right; } - .redesign-v2 .with-marker::before { - width: 65px; + .section--with-background { + --text-color: var(--c-primary-black); + } + + .section--with-background .default-content-wrapper { + background-color: transparent; } } @@ -1083,9 +1197,38 @@ main .section.responsive-title h1 { --headline-2-font-size: 2rem; /* 32px */ --headline-3-font-size: 2rem; /* 32px */ --testimonial-font-size: 1.5rem; /* 24px */ + --testimonial-letter-spacing: -.03rem; + --section-div-padding: 24px 0; + --section-padding: 56px 0; + } + + .section--with-background { + --section-padding: 56px 0; + --text-color: var(--c-primary-white); + + justify-content: flex-end; + } + + .redesign-v2 .v2-testimonial-container { + padding: var(--section-div-padding); + } + + .section--with-background > picture:first-of-type img { + display: block; + height: 100%; + left: 50%; + object-fit: cover; + position: absolute; + top: 0; + transform: translateX(-50%); + width: 100%; + z-index: -1; } } +.redesign-v2 .pretitle { + font: normal var(--accent-2-font-size)/1.2 var(--ff-accents); +} /* CLS OPTIMIZATION */ .v2-hero {