diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css new file mode 100644 index 000000000..3fb7e0a00 --- /dev/null +++ b/blocks/v2-cards/v2-cards.css @@ -0,0 +1,86 @@ +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; +} + +.v2-cards__card-item { + background: var(--c-primary-white); + color: var(--c-primary-black); +} + +.v2-cards__picture-wrapper { + padding: 0; +} + +.v2-cards__text-wrapper { + padding: 24px; +} + +.v2-cards__picture { + display: flex; +} + +.v2-cards__image { + background: var(--c-tertiary-light-cool-gray); + aspect-ratio: 16/9; + width: 100%; + object-fit: cover; +} + +.v2-cards__heading { + font-family: var(--ff-subheadings-medium); + font-size: var(--headline-5-font-size); + line-height: var(--headline-5-line-height); + margin: 0 0 7px; +} + +.v2-cards__text-wrapper p { + margin: 0; + color: var(--c-primary-black); + font-family: var(--ff-body); + font-size: var(--body-1-font-size); + font-style: normal; + line-height: var(--body-1-line-height); + letter-spacing: 0.16px; +} + +.v2-cards__text-wrapper .v2-cards__button-container { + margin-top: 16px; +} + +.v2-cards__button-container .v2-cards__button:any-link { + align-items: flex-start; +} + +.v2-cards__button-container .icon { + stroke: currentcolor; + width: 16px; + height: 16px; +} + +.v2-cards__button-container .icon svg { + width: 16px; + height: 16px; +} + +@media (min-width: 744px) { + .v2-cards { + flex-flow: row wrap; + gap: 16px; + padding: 0; + justify-content: center; + } + + .v2-cards__card-item { + max-width: calc((100% - 32px) / 3); + } +} diff --git a/blocks/v2-cards/v2-cards.js b/blocks/v2-cards/v2-cards.js new file mode 100644 index 000000000..c5042726c --- /dev/null +++ b/blocks/v2-cards/v2-cards.js @@ -0,0 +1,33 @@ +const blockClass = 'v2-cards'; + +export default async function decorate(block) { + const cardsItems = [...block.querySelectorAll(':scope > div')]; + cardsItems.forEach((el) => el.classList.add(`${blockClass}__card-item`)); + + const cardsSections = [...block.querySelectorAll(':scope > div > div')]; + cardsSections.forEach((el) => { + el.classList.add(`${blockClass}__text-wrapper`); + }); + + const pictures = [...block.querySelectorAll('picture')]; + pictures.forEach((el) => { + el.classList.add(`${blockClass}__picture`); + el.parentElement.classList.add(`${blockClass}__picture-wrapper`); + el.parentElement.classList.remove(`${blockClass}__text-wrapper`); + }); + + const images = [...block.querySelectorAll('img')]; + images.forEach((el) => el.classList.add(`${blockClass}__image`)); + + const cardsHeadings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + cardsHeadings.forEach((el) => el.classList.add(`${blockClass}__heading`)); + + const buttons = [...block.querySelectorAll('.button-container')]; + buttons.forEach((el) => { + el.classList.add(`${blockClass}__button-container`); + [...el.querySelectorAll('a')].forEach((link) => { + link.classList.add('standalone-link', `${blockClass}__button`); + link.classList.remove('button', 'button--primary'); + }); + }); +} diff --git a/blocks/v2-testimonial/v2-testimonial.css b/blocks/v2-testimonial/v2-testimonial.css index bc9616b33..c9e4ac4ab 100644 --- a/blocks/v2-testimonial/v2-testimonial.css +++ b/blocks/v2-testimonial/v2-testimonial.css @@ -60,8 +60,8 @@ } .v2-testimonial__author svg { - width: 34px; - height: 27px; + width: 32px; + height: 32px; } .v2-testimonial__video-link-wrapper { diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg new file mode 100644 index 000000000..43dcfa439 --- /dev/null +++ b/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/play.svg b/icons/play.svg index d3cc2f502..1f32c6132 100644 --- a/icons/play.svg +++ b/icons/play.svg @@ -1,11 +1,4 @@ - - - - - - - - - + + + diff --git a/icons/speach.svg b/icons/speach.svg index 61e507d69..064c77e0e 100644 --- a/icons/speach.svg +++ b/icons/speach.svg @@ -1,7 +1,6 @@ - - - - - - \ No newline at end of file + + + + + + diff --git a/styles/styles.css b/styles/styles.css index df30ed5c1..46f5df45e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -104,7 +104,7 @@ /* Helvetica Neue LT Pro, 65 Medium, 18px, 140% */ --headline-5-font-size: 1.125rem; /* 18px */ - --headline-5-line-height: 150%; + --headline-5-line-height: 140%; /* Helvetica Neue LT Pro, 55 Roman / Helvetica Neue LT Pro, 75 Bold, 16px, 150% */ --body-1-font-size: 1rem; /* 16px */ @@ -245,6 +245,7 @@ h4, h5, h6 { margin-top: 1em; margin-bottom: 0.5em; scroll-margin: calc(var(--nav-height-m) + 1em); + font-weight: normal; } h1, h2 { @@ -254,13 +255,13 @@ h1, h2 { h1 { font-size: var(--headline-1-font-size); line-height: var(--headline-1-line-height); - letter-spacing: var(--headline-1-line-letter-spacing); + letter-spacing: var(--headline-1-letter-spacing); } h2 { font-size: var(--headline-2-font-size); line-height: var(--headline-2-line-height); - letter-spacing: var(--headline-2-line-letter-spacing); + letter-spacing: var(--headline-2-letter-spacing); } h3 { @@ -424,6 +425,7 @@ main .section.black-background { main .section.dark-background { background-color: var(--c-secondary-graphite); + color: var(--c-primary-white); } main .section.center { @@ -944,6 +946,7 @@ main .section.responsive-title h1 { padding: 0; } +.section.header-with-mark > .default-content-wrapper:first-child > h1:first-child::before, .redesign-v2 .with-marker::before { content: ''; margin: 0; @@ -955,14 +958,38 @@ main .section.responsive-title h1 { top: -18px; } +.redesign-v2 a.standalone-link { + align-items: center; + color: var(--c-primary-black); + display: inline-flex; + font-family: var(--ff-body-bold); + font-size: var(--button-font-size); + gap: 4px; + letter-spacing: 1.12px; + line-height: var(--button-line-height); + background: transparent; +} + +.redesign-v2 a.standalone-link:active, +.redesign-v2 a.standalone-link:visited { + color: var(--c-tertiary-cool-gray); +} + +.redesign-v2 a.standalone-link:hover, +.redesign-v2 a.standalone-link:focus { + color: var(--c-tertiary-cool-gray); + text-decoration: underline; +} + @media (min-width: 1040px) { .redesign-v2 .section { padding: 80px 0; } .redesign-v2 .section > div { - padding: 0 200px; + padding: 0; margin: 0 auto; + max-width: 1040px; } .redesign-v2 .with-marker::before {