diff --git a/blocks/header/header.css b/blocks/header/header.css index 1721bd0b0..51ac0e30a 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -3,7 +3,6 @@ --nav-font-size-m: 16px; --nav-font-size-s: 14px; --nav-font-size-xs: 12px; - --nav-height: var(--nav-height-m); --nav-width: 1376px; --nav-ff: var(--ff-body-bold); } @@ -317,10 +316,6 @@ header .studio-search-widget { @media (min-width: 1140px) { /* header and nav layout */ - :root { - --nav-height: var(--nav-height-l); - } - header nav { display: flex; justify-content: space-between; @@ -475,4 +470,4 @@ header .studio-search-widget { .autosuggest-results-item-highlighted { background-color: #f2f2f2 !important; -} \ No newline at end of file +} diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css new file mode 100644 index 000000000..87014f5ae --- /dev/null +++ b/blocks/v2-hero/v2-hero.css @@ -0,0 +1,76 @@ +/* stylelint-disable selector-class-pattern */ +.v2-hero { + /* height of the hero block is set in main style to prevent CLS */ + position: relative; + overflow: hidden; +} + +.v2-hero__image { + position: absolute; + object-fit: cover; + height: 100%; + object-position: center; + width: 100%; +} + +.v2-hero__content-wrapper { + position: relative; + display: flex; + flex-direction: column; + height: 100%; + justify-content: flex-end; +} + +.v2-hero__content { + padding: 40px 16px; + display: flex; + flex-direction: column; + max-width: 1040px; +} + +.v2-hero__heading { + margin: 24px 0; + color: var(--c-primary-white); + font-family: var(--ff-headline-medium); + font-size: 28px; + font-style: normal; + line-height: 120%; + letter-spacing: -0.56px; + max-width: 600px; +} + +.v2-hero__cta-wrapper { + margin: 0; +} + +.v2-hero .v2-hero__cta:any-link { + margin: 0; + padding: 2px 20px 0; + height: 48px; + display: inline-flex; + align-items: center; + color: var(--c-primary-white); + text-align: center; + font-family: var(--ff-subheadings-medium); + font-size: 14px; + font-style: normal; + line-height: 18px; + letter-spacing: 1.12px; + border-radius: 2px; +} + +@media (min-width: 1200px) { + .v2-hero__content { + max-width: 1040px; + width: 1040px; + margin: 0 auto; + padding: 0 0 78px; + } + + .v2-hero__heading { + margin: 18px 0 41px; + line-height: 1.15; + font-size: 45px; + letter-spacing: -0.9px; + } +} diff --git a/blocks/v2-hero/v2-hero.js b/blocks/v2-hero/v2-hero.js new file mode 100644 index 000000000..435a48416 --- /dev/null +++ b/blocks/v2-hero/v2-hero.js @@ -0,0 +1,31 @@ +export default async function decorate(block) { + const heroClass = 'v2-hero'; + const picture = block.querySelector('picture'); + const img = picture.querySelector('img'); + img.classList.add(`${heroClass}__image`); + + if (picture.parentElement.tagName === 'P') { + picture.parentElement.remove(); + } + + const contentWrapper = block.querySelector(':scope > div'); + contentWrapper.classList.add(`${heroClass}__content-wrapper`); + + const content = block.querySelector(':scope > div > div'); + content.classList.add(`${heroClass}__content`); + + const headings = [...content.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + headings.forEach((h) => h.classList.add(`${heroClass}__heading`)); + + const firstHeading = headings[0]; + firstHeading.classList.add('with-marker'); + + const ctaButtons = content.querySelectorAll('.button-container > a'); + [...ctaButtons].forEach((b) => { + b.classList.add(`${heroClass}__cta`); + b.parentElement.classList.add(`${heroClass}__cta-wrapper`); + }); + + block.prepend(picture); + block.parentElement.classList.add('full-width'); +} diff --git a/scripts/scripts.js b/scripts/scripts.js index 988ea8b57..082ce419f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -181,7 +181,7 @@ export function createElement(tagName, classes = [], props = {}) { function buildHeroBlock(main) { const header = main.querySelector('h1'); const picture = main.querySelector('picture'); - const heroBlock = main.querySelector('.hero'); + const heroBlock = main.querySelector('.hero, .v2-hero'); if (heroBlock) return; // eslint-disable-next-line no-bitwise if (header && picture @@ -629,5 +629,4 @@ allLinks.forEach((link) => { /* REDESING CLASS CHECK */ if (getMetadata('style') === 'redesign-v2') { document.querySelector('html').classList.add('redesign-v2'); - document.querySelector('main').classList.remove('redesign-v2'); } diff --git a/styles/styles.css b/styles/styles.css index 240bf2daf..4134e2dd2 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -13,7 +13,7 @@ :root { /* Primary colors */ - --c-primary-black: #000; + --c-primary-black: #000; --c-primary-white: #fff; --c-primary-gold: #b3976b; @@ -30,7 +30,7 @@ --c-tertiary-light-warm-gray: #f7f6f3; /* Accent colors */ - --c-accent-red: #cd1a0a; + --c-accent-red: #cd1a0a; --c-accent-copper: #8f654d; /* Applied colors */ @@ -52,8 +52,8 @@ /* Secondary */ --button-secondary-gold-enabled: var(--c-primary-gold); - --button-secondary-gold-hover: #D9B781; - --button-secondary-gold-pressed: #A18860; + --button-secondary-gold-hover: #d9b781; + --button-secondary-gold-pressed: #a18860; --button-secondary-gold-disabled: #e1dfdd; /* Tertiary */ @@ -187,6 +187,13 @@ /* nav sizes */ --nav-height-m: 60px; --nav-height-l: 85px; + --nav-height: var(--nav-height-m); +} + +@media (min-width: 1140px) { + :root { + --nav-height: var(--nav-height-l); + } } *, @@ -804,9 +811,12 @@ main .section.responsive-title h1 { /* REDESIGN GLOBAL STYLES */ .redesign-v2 { + --v2-space-small: 16px; + font-size: 16px; } +/* REDESIGN Buttons */ .redesign-v2 a.button.primary, .redesign-v2 button.primary, .redesign-v2 a.button.secondary, @@ -898,4 +908,57 @@ main .section.responsive-title h1 { .redesign-v2 button.tertiary:active { background-color: var(--button-tertiary-white-pressed); border-color: #D9D9D9; -} \ No newline at end of file +} + +/* stylelint-disable-next-line no-descending-specificity */ +.redesign-v2 .section { + padding: 40px 0; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.redesign-v2 .section > div { + padding: 0 var(--v2-space-small); + margin: 0 auto; +} + +.redesign-v2 .section > .full-width { + padding: 0; + margin: 0; + width: 100%; + max-width: 100%; +} + +.redesign-v2 main .section.padding-0 { + padding: 0; +} + +.redesign-v2 .with-marker::before { + content: ''; + margin: 0; + height: 0; + width: 45px; + border-bottom: 4px solid var(--c-accent-red); + display: block; + position: relative; + top: -18px; +} + +@media (min-width: 1040px) { + .redesign-v2 .section { + padding: 80px 0; + } + + .redesign-v2 .section > div { + padding: 0 200px; + margin: 0 auto; + } + + .redesign-v2 .with-marker::before { + width: 65px; + } +} + +/* CLS OPTIMIZATION */ +.v2-hero { + height: calc(100vh - var(--nav-height)); +}