diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css new file mode 100644 index 0000000..c21be45 --- /dev/null +++ b/blocks/breadcrumb/breadcrumb.css @@ -0,0 +1,34 @@ +.breadcrumb { + color: rgb(0 161 159); + font-size: 16px; +} + +.breadcrumb a:any-link { + color: rgb(0 161 159); + font-family: rwe-light; +} + +.breadcrumb ul { + list-style: none; + padding: 0; + display: flex; + flex-direction: row; + gap: 4px; + margin: 0; +} + +.breadcrumb ul li:last-of-type { + font-weight: 600; +} + +.breadcrumb li span { + font-size: 14px; + margin-left: 4px; + font-weight: 700; +} + +.breadcrumb.dark { + background: #1d4477; + color: var(--white); + padding: 16px; +} diff --git a/blocks/breadcrumb/breadcrumb.js b/blocks/breadcrumb/breadcrumb.js new file mode 100644 index 0000000..9b81701 --- /dev/null +++ b/blocks/breadcrumb/breadcrumb.js @@ -0,0 +1,8 @@ +export default function decorate(block) { + block.querySelectorAll('ul li:not(:last-of-type)').forEach((el) => { + const iconEl = document.createElement('span'); + iconEl.classList.add('icon-rwe-anchor-right'); + + el.append(iconEl); + }); +} diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css new file mode 100644 index 0000000..c7eb90c --- /dev/null +++ b/blocks/carousel/carousel.css @@ -0,0 +1,143 @@ +.carousel { + padding-top: 16px; +} + +.carousel .carousel-slides-container { + position: relative; +} + +.carousel .carousel-slides, +.carousel .carousel-slide-indicators { + list-style: none; + margin: 0; + padding: 0; +} + +.carousel .carousel-slides { + display: flex; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + overflow: scroll clip; +} + +.carousel .carousel-slides::-webkit-scrollbar { + display: none; +} + +.carousel .carousel-slide { + flex: 0 0 100%; + scroll-snap-align: start; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + width: 100%; + min-height: min(50vw, calc(100dvh - var(--header-height))); +} + +.carousel .carousel-slide:has(.carousel-slide-content[data-align="center"]) { + align-items: center; +} + +.carousel .carousel-slide:has(.carousel-slide-content[data-align="right"]) { + align-items: flex-end; +} + +.carousel .carousel-slide .carousel-slide-image { + display: flex; + flex-direction: row; + gap: 24px; + max-width: 100%; + margin: 0 8px; +} + +.carousel .carousel-slide .carousel-slide-image p { + display: flex; + gap: 16px; +} + +.carousel .carousel-slide .carousel-slide-image .video-block { + width: calc(50% - 12px); +} + +.carousel .carousel-slide .carousel-slide-image picture { + width: calc((100% - 32px) / 3); + inset: 0; +} + +.carousel .carousel-slide .carousel-slide-image picture > img { + height: 100%; + width: 100%; + object-fit: cover; +} + +.carousel .carousel-slide .carousel-slide-content { + z-index: 1; + margin: 68px; + padding: 16px; + color: white; + background-color: rgba(19 19 19 / 75%); + position: relative; + width: var(--slide-content-width, auto); +} + +.carousel .carousel-slide-indicators { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 6px 12px; + padding: 12px; + background-color: var(--light-color); + line-height: 0; +} + +.carousel .carousel-slide-indicator { + display: flex; + align-items: center; +} + +.carousel .carousel-slide-indicator button { + width: 14px; + height: 14px; + margin: 0; + padding: 0; + border-radius: 50%; + background-color: #3ed8c3; + transition: all 0.2s; + border: none; +} + +.carousel .carousel-slide-indicator button:disabled, +.carousel .carousel-slide-indicator button:focus-visible { + background-color: #00a19f; + width: 18px; + height: 18px; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.carousel .slide-button { + position: relative; + margin: 0; + padding: 0; + background-color: transparent; + color: #00a19f; + border: none; +} + +.carousel .slide-button:hover, +.carousel .slide-button:focus-visible { + background-color: transparent; +} + +@media (width >= 600px) { + .carousel .carousel-slide .carousel-slide-content { + --slide-content-width: calc((100% - 184px) / 2); + + margin: 92px; + } + + .carousel .carousel-slide .carousel-slide-content[data-align="justify"] { + --slide-content-width: auto; + } +} diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js new file mode 100644 index 0000000..ec115ab --- /dev/null +++ b/blocks/carousel/carousel.js @@ -0,0 +1,151 @@ +import { fetchPlaceholders } from '../../scripts/aem.js'; + +function updateActiveSlide(slide) { + const block = slide.closest('.carousel'); + const slideIndex = parseInt(slide.dataset.slideIndex, 10); + block.dataset.activeSlide = slideIndex; + + const slides = block.querySelectorAll('.carousel-slide'); + + slides.forEach((aSlide, idx) => { + aSlide.setAttribute('aria-hidden', idx !== slideIndex); + aSlide.querySelectorAll('a').forEach((link) => { + if (idx !== slideIndex) { + link.setAttribute('tabindex', '-1'); + } else { + link.removeAttribute('tabindex'); + } + }); + }); + + const indicators = block.querySelectorAll('.carousel-slide-indicator'); + indicators.forEach((indicator, idx) => { + if (idx !== slideIndex) { + indicator.querySelector('button').removeAttribute('disabled'); + } else { + indicator.querySelector('button').setAttribute('disabled', 'true'); + } + }); +} + +function showSlide(block, slideIndex = 0) { + const slides = block.querySelectorAll('.carousel-slide'); + let realSlideIndex = slideIndex < 0 ? slides.length - 1 : slideIndex; + if (slideIndex >= slides.length) realSlideIndex = 0; + const activeSlide = slides[realSlideIndex]; + + activeSlide.querySelectorAll('a').forEach((link) => link.removeAttribute('tabindex')); + block.querySelector('.carousel-slides').scrollTo({ + top: 0, + left: activeSlide.offsetLeft, + behavior: 'smooth', + }); +} + +function bindEvents(block) { + const slideIndicators = block.querySelector('.carousel-slide-indicators'); + if (!slideIndicators) return; + + slideIndicators.querySelectorAll('button').forEach((button) => { + button.addEventListener('click', (e) => { + const slideIndicator = e.currentTarget.parentElement; + showSlide(block, parseInt(slideIndicator.dataset.targetSlide, 10)); + }); + }); + + block.querySelector('.slide-prev').addEventListener('click', () => { + showSlide(block, parseInt(block.dataset.activeSlide, 10) - 1); + }); + block.querySelector('.slide-next').addEventListener('click', () => { + showSlide(block, parseInt(block.dataset.activeSlide, 10) + 1); + }); + + const slideObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) updateActiveSlide(entry.target); + }); + }, { threshold: 0.5 }); + block.querySelectorAll('.carousel-slide').forEach((slide) => { + slideObserver.observe(slide); + }); +} + +function createSlide(row, slideIndex, carouselId) { + const slide = document.createElement('li'); + slide.dataset.slideIndex = slideIndex; + slide.setAttribute('id', `carousel-${carouselId}-slide-${slideIndex}`); + slide.classList.add('carousel-slide'); + + row.querySelectorAll(':scope > div').forEach((column, colIdx) => { + column.classList.add(`carousel-slide-${colIdx === 0 ? 'image' : 'content'}`); + slide.append(column); + }); + + const labeledBy = slide.querySelector('h1, h2, h3, h4, h5, h6'); + if (labeledBy) { + slide.setAttribute('aria-labelledby', labeledBy.getAttribute('id')); + } + + return slide; +} + +let carouselId = 0; +export default async function decorate(block) { + carouselId += 1; + block.setAttribute('id', `carousel-${carouselId}`); + const rows = block.querySelectorAll(':scope > div'); + const isSingleSlide = rows.length < 2; + + const placeholders = await fetchPlaceholders(); + + block.setAttribute('role', 'region'); + block.setAttribute('aria-roledescription', placeholders.carousel || 'Carousel'); + + const container = document.createElement('div'); + container.classList.add('carousel-slides-container'); + + const slidesWrapper = document.createElement('ul'); + slidesWrapper.classList.add('carousel-slides'); + block.prepend(slidesWrapper); + + let slideIndicators; + if (!isSingleSlide) { + const slideIndicatorsNav = document.createElement('nav'); + slideIndicatorsNav.setAttribute('aria-label', placeholders.carouselSlideControls || 'Carousel Slide Controls'); + slideIndicators = document.createElement('ol'); + slideIndicators.classList.add('carousel-slide-indicators'); + slideIndicatorsNav.append(slideIndicators); + block.append(slideIndicatorsNav); + } + + rows.forEach((row, idx) => { + const slide = createSlide(row, idx, carouselId); + slidesWrapper.append(slide); + + if (slideIndicators) { + const indicator = document.createElement('li'); + indicator.classList.add('carousel-slide-indicator'); + indicator.dataset.targetSlide = idx; + indicator.innerHTML = ``; + slideIndicators.append(indicator); + } + row.remove(); + }); + + slideIndicators.innerHTML = ` + + ${slideIndicators.innerHTML} + + `; + + container.append(slidesWrapper); + block.prepend(container); + + if (!isSingleSlide) { + bindEvents(block); + } +} diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index f2b203e..c2a33d9 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -21,7 +21,7 @@ @media (width >= 900px) { .columns > div { - align-items: center; + align-items: flex-start; flex-direction: unset; gap: 24px; } diff --git a/blocks/facts/facts.css b/blocks/facts/facts.css new file mode 100644 index 0000000..0d13c21 --- /dev/null +++ b/blocks/facts/facts.css @@ -0,0 +1,33 @@ +.facts { + display: flex; + flex-direction: column; + width: 100%; + gap: 32px; + margin-top: 16px; +} + +.facts > div { + display: flex; + flex-direction: row; + width: 100%; + gap: 16px; +} + +.facts > div > div { + flex: 1; + text-align: center; + background-color: var(--white); + padding: 16px; +} + +.facts .facts-value { + font-size: 24px; + line-height: 28px; + font-family: rwe-bold; + color: #00a19f; +} + +.facts p { + margin: 0; + font-family: rwe-medium; +} diff --git a/blocks/facts/facts.js b/blocks/facts/facts.js new file mode 100644 index 0000000..12374a2 --- /dev/null +++ b/blocks/facts/facts.js @@ -0,0 +1,4 @@ +export default function decorate(block) { + block.querySelectorAll(':scope > div > div > p:first-child') + .forEach((el) => el.classList.add('facts-value')); +} diff --git a/blocks/header/header.css b/blocks/header/header.css index 53e4e61..2a18222 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,268 +1,48 @@ -/* header and nav layout */ -header .nav-wrapper { - background-color: var(--background-color); - width: 100%; - z-index: 2; - position: fixed; +.header { + background: linear-gradient(225deg, #00a19f, #1d4477); } -header nav { - box-sizing: border-box; - display: grid; - grid-template: - 'hamburger brand tools' var(--nav-height) - 'sections sections sections' 1fr / auto 1fr auto; - align-items: center; - gap: 0 24px; - margin: auto; - max-width: 1248px; - height: var(--nav-height); - padding: 0 24px; - font-family: var(--body-font-family); -} - -header nav[aria-expanded='true'] { - grid-template: - 'hamburger brand' var(--nav-height) - 'sections sections' 1fr - 'tools tools' var(--nav-height) / auto 1fr; - overflow-y: auto; - min-height: 100dvh; -} - -@media (width >= 900px) { - header nav { - display: flex; - justify-content: space-between; - gap: 0 32px; - max-width: 1264px; - padding: 0 32px; - } - - header nav[aria-expanded='true'] { - min-height: 0; - overflow: visible; - } -} - -header nav p { - margin: 0; - line-height: 1; -} - -header nav a:any-link { - color: currentcolor; +.header nav { + display: flex; + justify-content: space-between; + height: 130px; + padding: 0 32px; + color: var(--white); } -/* hamburger */ -header nav .nav-hamburger { - grid-area: hamburger; - height: 22px; +.header .section { display: flex; align-items: center; } -header nav .nav-hamburger button { - height: 22px; +.header .section p { margin: 0; - border: 0; - border-radius: 0; - padding: 0; - background-color: var(--background-color); - color: inherit; - overflow: initial; - text-overflow: initial; - white-space: initial; -} - -header nav .nav-hamburger-icon, -header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { - box-sizing: border-box; - display: block; - position: relative; - width: 20px; -} - -header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { - content: ''; - position: absolute; - background: currentcolor; -} - -header nav[aria-expanded='false'] .nav-hamburger-icon, -header nav[aria-expanded='false'] .nav-hamburger-icon::before, -header nav[aria-expanded='false'] .nav-hamburger-icon::after { - height: 2px; - border-radius: 2px; - background: currentcolor; -} - -header nav[aria-expanded='false'] .nav-hamburger-icon::before { - top: -6px; -} - -header nav[aria-expanded='false'] .nav-hamburger-icon::after { - top: 6px; -} - -header nav[aria-expanded='true'] .nav-hamburger-icon { - height: 22px; -} - -header nav[aria-expanded='true'] .nav-hamburger-icon::before, -header nav[aria-expanded='true'] .nav-hamburger-icon::after { - top: 3px; - left: 1px; - transform: rotate(45deg); - transform-origin: 2px 1px; - width: 24px; - height: 2px; - border-radius: 2px; -} - -header nav[aria-expanded='true'] .nav-hamburger-icon::after { - top: unset; - bottom: 3px; - transform: rotate(-45deg); -} - -@media (width >= 900px) { - header nav .nav-hamburger { - display: none; - visibility: hidden; - } -} - -/* brand */ -header .nav-brand { - grid-area: brand; - flex-basis: 128px; - font-size: var(--heading-font-size-s); - font-weight: 700; - line-height: 1; -} - -header nav .nav-brand img { - width: 128px; - height: auto; } -/* sections */ -header nav .nav-sections { - grid-area: sections; - flex: 1 1 auto; - display: none; - visibility: hidden; -} - -header nav[aria-expanded='true'] .nav-sections { - display: block; - visibility: visible; - align-self: start; -} - -header nav .nav-sections ul { +.header .section ul { + display: flex; + flex-direction: row; list-style: none; - padding-left: 0; - font-size: var(--body-font-size-s); -} - -header nav .nav-sections ul > li { - font-weight: 500; -} - -header nav .nav-sections ul > li > ul { - margin-top: 0; + gap: 16px; + font-size: 15px; + font-family: medium; + padding: 0; } -header nav .nav-sections ul > li > ul > li { - font-weight: 400; +.header .icon-logo { + min-height: 32px; + width: auto; } -@media (width >= 900px) { - header nav .nav-sections { - display: block; - visibility: visible; - white-space: nowrap; - } - - header nav[aria-expanded='true'] .nav-sections { - align-self: unset; - } - - header nav .nav-sections .nav-drop { - position: relative; - padding-right: 16px; - cursor: pointer; - } - - header nav .nav-sections .nav-drop::after { - content: ''; - display: inline-block; - position: absolute; - top: 0.5em; - right: 2px; - transform: rotate(135deg); - width: 6px; - height: 6px; - border: 2px solid currentcolor; - border-radius: 0 1px 0 0; - border-width: 2px 2px 0 0; - } - - header nav .nav-sections .nav-drop[aria-expanded='true']::after { - top: unset; - bottom: 0.5em; - transform: rotate(315deg); - } - - header nav .nav-sections ul { - display: flex; - gap: 24px; - margin: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li { - flex: 0 1 auto; - position: relative; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul { - display: none; - position: relative; - } - - header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul { - display: block; - position: absolute; - left: -24px; - width: 200px; - top: 150%; - padding: 16px; - background-color: var(--light-color); - white-space: initial; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul::before { - content: ''; - position: absolute; - top: -8px; - left: 16px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid var(--light-color); - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > li { - padding: 8px 0; - } +.header a:any-link { + color: var(--white); + text-decoration: none; + display: flex; + flex-direction: row; + gap: 8px; } -/* tools */ -header nav .nav-tools { - grid-area: tools; +.header a:any-link span { + color: #3ed8c3; + width: 20px; } diff --git a/blocks/header/header.js b/blocks/header/header.js index cb2157c..01d55ae 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,108 +1,6 @@ import { getMetadata } from '../../scripts/aem.js'; import { loadFragment } from '../fragment/fragment.js'; -// media query match that indicates mobile/tablet width -const isDesktop = window.matchMedia('(min-width: 900px)'); - -function closeOnEscape(e) { - if (e.code === 'Escape') { - const nav = document.getElementById('nav'); - const navSections = nav.querySelector('.nav-sections'); - const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); - if (navSectionExpanded && isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(navSections); - navSectionExpanded.focus(); - } else if (!isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleMenu(nav, navSections); - nav.querySelector('button').focus(); - } - } -} - -function closeOnFocusLost(e) { - const nav = e.currentTarget; - if (!nav.contains(e.relatedTarget)) { - const navSections = nav.querySelector('.nav-sections'); - const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); - if (navSectionExpanded && isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(navSections, false); - } else if (!isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleMenu(nav, navSections, false); - } - } -} - -function openOnKeydown(e) { - const focused = document.activeElement; - const isNavDrop = focused.className === 'nav-drop'; - if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) { - const dropExpanded = focused.getAttribute('aria-expanded') === 'true'; - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(focused.closest('.nav-sections')); - focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true'); - } -} - -function focusNavSection() { - document.activeElement.addEventListener('keydown', openOnKeydown); -} - -/** - * Toggles all nav sections - * @param {Element} sections The container element - * @param {Boolean} expanded Whether the element should be expanded or collapsed - */ -function toggleAllNavSections(sections, expanded = false) { - sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => { - section.setAttribute('aria-expanded', expanded); - }); -} - -/** - * Toggles the entire nav - * @param {Element} nav The container element - * @param {Element} navSections The nav sections within the container element - * @param {*} forceExpanded Optional param to force nav expand behavior when not null - */ -function toggleMenu(nav, navSections, forceExpanded = null) { - const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true'; - const button = nav.querySelector('.nav-hamburger button'); - document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden'; - nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); - toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true'); - button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); - // enable nav dropdown keyboard accessibility - const navDrops = navSections.querySelectorAll('.nav-drop'); - if (isDesktop.matches) { - navDrops.forEach((drop) => { - if (!drop.hasAttribute('tabindex')) { - drop.setAttribute('tabindex', 0); - drop.addEventListener('focus', focusNavSection); - } - }); - } else { - navDrops.forEach((drop) => { - drop.removeAttribute('tabindex'); - drop.removeEventListener('focus', focusNavSection); - }); - } - - // enable menu collapse on escape keypress - if (!expanded || isDesktop.matches) { - // collapse menu on escape press - window.addEventListener('keydown', closeOnEscape); - // collapse menu on focus lost - nav.addEventListener('focusout', closeOnFocusLost); - } else { - window.removeEventListener('keydown', closeOnEscape); - nav.removeEventListener('focusout', closeOnFocusLost); - } -} - /** * loads and decorates the header, mainly the nav * @param {Element} block The header block element @@ -119,46 +17,6 @@ export default async function decorate(block) { nav.id = 'nav'; while (fragment.firstElementChild) nav.append(fragment.firstElementChild); - const classes = ['brand', 'sections', 'tools']; - classes.forEach((c, i) => { - const section = nav.children[i]; - if (section) section.classList.add(`nav-${c}`); - }); - - const navBrand = nav.querySelector('.nav-brand'); - const brandLink = navBrand.querySelector('.button'); - if (brandLink) { - brandLink.className = ''; - brandLink.closest('.button-container').className = ''; - } - - const navSections = nav.querySelector('.nav-sections'); - if (navSections) { - navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => { - if (navSection.querySelector('ul')) navSection.classList.add('nav-drop'); - navSection.addEventListener('click', () => { - if (isDesktop.matches) { - const expanded = navSection.getAttribute('aria-expanded') === 'true'; - toggleAllNavSections(navSections); - navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); - } - }); - }); - } - - // hamburger for mobile - const hamburger = document.createElement('div'); - hamburger.classList.add('nav-hamburger'); - hamburger.innerHTML = ``; - hamburger.addEventListener('click', () => toggleMenu(nav, navSections)); - nav.prepend(hamburger); - nav.setAttribute('aria-expanded', 'false'); - // prevent mobile nav behavior on window resize - toggleMenu(nav, navSections, isDesktop.matches); - isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); - const navWrapper = document.createElement('div'); navWrapper.className = 'nav-wrapper'; navWrapper.append(nav); diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 974eaf2..b8a6601 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -1,19 +1,25 @@ .hero-container .hero-wrapper { max-width: unset; padding: 0; + color: var(--white); } .hero { position: relative; - padding: 40px 24px; - min-height: 300px; + height: calc(100vh - var(--nav-height)); } -.hero h1 { - max-width: 1200px; - margin-left: auto; - margin-right: auto; - color: var(--background-color); +.hero > div { + display: flex; + align-items: center; + height: 100%; + padding: 16px; +} + +.hero > div > div { + margin: auto; + padding: 0 24px; + width: 1170px; } .hero picture { @@ -29,9 +35,3 @@ width: 100%; height: 100%; } - -@media (width >= 900px) { - .hero { - padding: 40px 32px; - } -} \ No newline at end of file diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index e69de29..363e6e8 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -0,0 +1,6 @@ +export default function decorate(block) { + const picture = block.querySelector('picture'); + const pictureParentEl = picture.parentElement; + + pictureParentEl.replaceWith(picture); +} diff --git a/blocks/press-releases/press-releases.css b/blocks/press-releases/press-releases.css new file mode 100644 index 0000000..1609d22 --- /dev/null +++ b/blocks/press-releases/press-releases.css @@ -0,0 +1,83 @@ +.press-releases .press-releases-heading { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-bottom: 16px; +} + +.press-releases .press-releases-heading a { + font-size: 15px; + line-height: 22px; + font-family: rwe-medium; + color: #00a19f; + display: flex; + align-items: center; +} + +.press-releases .press-releases-heading a:hover { + text-decoration: none; +} + +.press-releases .press-releases-heading a span { + margin-left: 10px; + font-size: 24px; +} + +.press-releases .press-releases-table { + display: flex; + flex-direction: column; + gap: 16px; +} + +.press-releases .press-releases-item { + background: var(--white); + display: flex; +} + +.press-releases .press-release-date { + width: 90px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgb(0 161 159); + color: var(--white); + gap: 10px; + min-height: 90px; + font-size: 16px; +} + +.press-releases .press-release-date strong { + font-family: rwe-bold; + font-size: 38px; + line-height: 38px; +} + +.press-releases p { + margin: 0; +} + +.press-releases .press-release-text { + padding: 16px; + display: flex; + align-items: center; + flex-grow: 1; +} + +.press-releases .button-container { + display: flex; + align-items: center; +} + +.press-releases .button-container .button { + background: transparent; + color: #00a19f; + transition: background-color 0.2s ease; +} + +.press-releases .button-container .button:hover { + background-color: #00a19f; + border-color: #00a19f; + color: #fff; +} diff --git a/blocks/press-releases/press-releases.js b/blocks/press-releases/press-releases.js new file mode 100644 index 0000000..6162a98 --- /dev/null +++ b/blocks/press-releases/press-releases.js @@ -0,0 +1,22 @@ +export default function decorate(block) { + const [heading, link] = block.querySelectorAll(':scope > div:first-child > div'); + const releases = [...block.querySelectorAll(':scope > div:not(:first-child)')]; + + link.querySelector('a').classList.remove('button'); + + releases.forEach((el) => { + el.classList.add('press-releases-item'); + el.querySelector(':scope > div').classList.add('press-release-date'); + el.querySelector(':scope > div:nth-child(2)').classList.add('press-release-text'); + }); + + block.innerHTML = ` +
+ ${heading.outerHTML} + ${link.outerHTML} +
+
+ ${releases.map((el) => el.outerHTML).join('')} +
+ `; +} diff --git a/blocks/subnav/subnav.css b/blocks/subnav/subnav.css new file mode 100644 index 0000000..30be5c2 --- /dev/null +++ b/blocks/subnav/subnav.css @@ -0,0 +1,19 @@ +.subnav ul { + margin: 0; + list-style: none; + display: flex; + padding: 8px 0; + gap: 16px; + width: 100%; + justify-content: space-between; +} + +.subnav ul li { + display: flex; + flex: 1; +} + +.subnav a.button { + width: 100%; + margin: 0; +} diff --git a/blocks/subnav/subnav.js b/blocks/subnav/subnav.js new file mode 100644 index 0000000..d266a02 --- /dev/null +++ b/blocks/subnav/subnav.js @@ -0,0 +1,5 @@ +export default function decorate(block) { + block.querySelectorAll('a').forEach((link) => { + link.classList.add('button'); + }); +} diff --git a/fonts/RWESans-Bold.woff2 b/fonts/RWESans-Bold.woff2 new file mode 100644 index 0000000..8ce5d56 Binary files /dev/null and b/fonts/RWESans-Bold.woff2 differ diff --git a/fonts/RWESans-Light.woff2 b/fonts/RWESans-Light.woff2 new file mode 100644 index 0000000..79edca1 Binary files /dev/null and b/fonts/RWESans-Light.woff2 differ diff --git a/fonts/RWESans-Medium.woff2 b/fonts/RWESans-Medium.woff2 new file mode 100644 index 0000000..34fa7a1 Binary files /dev/null and b/fonts/RWESans-Medium.woff2 differ diff --git a/fonts/RWESans-Regular.woff2 b/fonts/RWESans-Regular.woff2 new file mode 100644 index 0000000..e2503ba Binary files /dev/null and b/fonts/RWESans-Regular.woff2 differ diff --git a/fonts/RWE_Icon_Font.ttf b/fonts/RWE_Icon_Font.ttf new file mode 100644 index 0000000..fac9293 Binary files /dev/null and b/fonts/RWE_Icon_Font.ttf differ diff --git a/fonts/roboto-bold.woff2 b/fonts/roboto-bold.woff2 deleted file mode 100644 index 4aeda71..0000000 Binary files a/fonts/roboto-bold.woff2 and /dev/null differ diff --git a/fonts/roboto-condensed-bold.woff2 b/fonts/roboto-condensed-bold.woff2 deleted file mode 100644 index dd0eb2b..0000000 Binary files a/fonts/roboto-condensed-bold.woff2 and /dev/null differ diff --git a/fonts/roboto-medium.woff2 b/fonts/roboto-medium.woff2 deleted file mode 100644 index 8b1aebb..0000000 Binary files a/fonts/roboto-medium.woff2 and /dev/null differ diff --git a/fonts/roboto-regular.woff2 b/fonts/roboto-regular.woff2 deleted file mode 100644 index b65a361..0000000 Binary files a/fonts/roboto-regular.woff2 and /dev/null differ diff --git a/fonts/rwe-iconfont.woff b/fonts/rwe-iconfont.woff new file mode 100644 index 0000000..8c748e8 Binary files /dev/null and b/fonts/rwe-iconfont.woff differ diff --git a/icons/arrow.svg b/icons/arrow.svg deleted file mode 100644 index 559f3a1..0000000 --- a/icons/arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/icons/logo.svg b/icons/logo.svg new file mode 100644 index 0000000..e9c6439 --- /dev/null +++ b/icons/logo.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/icons/phone.svg b/icons/phone.svg new file mode 100644 index 0000000..1252c8e --- /dev/null +++ b/icons/phone.svg @@ -0,0 +1,10 @@ + + + + + RWE + + + + + \ No newline at end of file diff --git a/icons/search.svg b/icons/search.svg deleted file mode 100644 index 637c677..0000000 --- a/icons/search.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/images/loosefield1-p-800.png b/images/loosefield1-p-800.png new file mode 100644 index 0000000..d3a2b16 Binary files /dev/null and b/images/loosefield1-p-800.png differ diff --git a/images/loosefield2-p-800.png b/images/loosefield2-p-800.png new file mode 100644 index 0000000..e21ca96 Binary files /dev/null and b/images/loosefield2-p-800.png differ diff --git a/scripts/scripts.js b/scripts/scripts.js index a76308b..ddd6ab1 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1,5 +1,4 @@ import { - buildBlock, loadHeader, loadFooter, decorateButtons, @@ -14,21 +13,6 @@ import { sampleRUM, } from './aem.js'; -/** - * Builds hero block and prepends to main in a new section. - * @param {Element} main The container element - */ -function buildHeroBlock(main) { - const h1 = main.querySelector('h1'); - const picture = main.querySelector('picture'); - // eslint-disable-next-line no-bitwise - if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) { - const section = document.createElement('div'); - section.append(buildBlock('hero', { elems: [picture, h1] })); - main.prepend(section); - } -} - /** * load fonts.css and set a session storage flag */ @@ -45,15 +29,41 @@ async function loadFonts() { * Builds all synthetic blocks in a container element. * @param {Element} main The container element */ -function buildAutoBlocks(main) { +function buildAutoBlocks() { try { - buildHeroBlock(main); + // auto bolocks here } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); } } +const customDecorateIcon = (main) => { + const fontIcons = [...main.querySelectorAll('.icon')] + .filter((el) => [...el.classList].find((className) => className.startsWith('icon-rwe'))); + + fontIcons.forEach((icon) => { + icon.classList.remove('icon'); + }); + + decorateIcons(main); +}; + +const decorateVidoeBlocks = (main) => { + main.querySelectorAll('a[href$=".mp4"], a[href$=".mov"]').forEach((videoLink) => { + const videoEl = document.createElement('video'); + videoEl.classList.add('video-block'); + videoEl.setAttribute('controls', ''); + + const sourceEl = document.createElement('source'); + sourceEl.src = videoLink.href; + sourceEl.type = 'video/mp4'; + + videoEl.appendChild(sourceEl); + videoLink.parentNode.replaceWith(videoEl); + }); +}; + /** * Decorates the main element. * @param {Element} main The main element @@ -62,10 +72,11 @@ function buildAutoBlocks(main) { export function decorateMain(main) { // hopefully forward compatible button decoration decorateButtons(main); - decorateIcons(main); + customDecorateIcon(main); buildAutoBlocks(main); decorateSections(main); decorateBlocks(main); + decorateVidoeBlocks(main); } /** diff --git a/styles/fonts.css b/styles/fonts.css index 319c400..907fc09 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,36 +1,60 @@ -/* stylelint-disable max-line-length */ @font-face { - font-family: roboto-condensed; + font-family: rwe-light; + src: url("../fonts/RWESans-Light.woff2") format("woff2"), + url("../fonts/RWESans-Light.eot") format("eot"), + url("../fonts/RWESans-Light.woff") format("woff"), + url("../fonts/RWEWEB-Light.svg") format("svg"); + font-weight: 400; font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/roboto-condensed-bold.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: roboto; + font-family: rwe-regular; + src: url("../fonts/RWESans-Regular.woff2") format("woff2"), + url("../fonts/RWESans-Regular.woff") format("woff"), + url("../fonts/RWESans-Regular.eot") format("eot"), + url("../fonts/RWEWEB-Regular.svg") format("svg"); + font-weight: 400; font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/roboto-bold.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: roboto; + font-family: rwe-medium; + src: url("../fonts/RWESans-Medium.woff2") format("woff2"), + url("../fonts/RWESans-Medium.woff") format("woff"), + url("../fonts/RWESans-Medium.eot") format("eot"), + url("../fonts/RWEWEB-Medium.svg") format("svg"); + font-weight: 400; font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/roboto-medium.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: roboto; + font-family: rwe-bold; + src: url("../fonts/RWESans-Bold.woff2") format("woff2"), + url("../fonts/RWESans-Bold.woff") format("woff"), + url("../fonts/RWESans-Bold.eot") format("eot"), + url("../fonts/RWEWEB-Bold.svg") format("svg"); + font-weight: 400; font-style: normal; +} + +@font-face { + font-family: rwe-iconfont; + src: url("../fonts/rwe-iconfont.eot?v=3.13.0"); + src: url("../fonts/rwe-iconfont.woff?v=3.13.0") format("woff"), + url("../fonts/rwe-iconfont.eot?#iefix&v=3.13.0") format("eot"), + url("../fonts/rwe-iconfont.ttf?v=3.13.0") format("truetype"), + url("../fonts/rwe-iconfont.svg#rwe-iconfont&v=3.13.0") format("svg"); font-weight: 400; - font-display: swap; - src: url('../fonts/roboto-regular.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-style: normal; +} + +@font-face { + font-family: "RWE_Icon_Font"; + src: url("../fonts/RWE_Icon_Font.eot?v=1.1") format("embedded-opentype"), + url("../fonts/RWE_Icon_Font.ttf?v=1.1") format("truetype"), + url("../fonts/RWE_Icon_Font.woff?v=1.1") format("woff"), + url("../fonts/RWE_Icon_Font.svg?v=1.1#RWE_Icon_Font") format("svg"); + font-weight: 400; + font-style: normal; } diff --git a/styles/styles.css b/styles/styles.css index 24425c9..0fabb6c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -12,71 +12,40 @@ :root { /* colors */ - --background-color: white; - --light-color: #f8f8f8; - --dark-color: #505050; - --text-color: #131313; - --link-color: #3b63fb; - --link-hover-color: #1d3ecf; - - /* fonts */ - --body-font-family: roboto, roboto-fallback, sans-serif; - --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif; - - /* body sizes */ - --body-font-size-m: 22px; - --body-font-size-s: 19px; - --body-font-size-xs: 17px; - - /* heading sizes */ - --heading-font-size-xxl: 55px; - --heading-font-size-xl: 44px; - --heading-font-size-l: 34px; - --heading-font-size-m: 27px; - --heading-font-size-s: 24px; - --heading-font-size-xs: 22px; + --white: #fff; + --text-color: #1d4477; + --body-font-family: ""; + --font-size: 16px; + --link-color: #00b1eb; /* nav height */ - --nav-height: 64px; + --nav-height: 130px; } /* fallback fonts */ @font-face { - font-family: roboto-condensed-fallback; + font-family: rwe-bold; size-adjust: 88.82%; - src: local('Arial'); + src: local("Arial"); } @font-face { font-family: roboto-fallback; size-adjust: 99.529%; - src: local('Arial'); -} - -@media (width >= 900px) { - :root { - /* body sizes */ - --body-font-size-m: 18px; - --body-font-size-s: 16px; - --body-font-size-xs: 14px; - - /* heading sizes */ - --heading-font-size-xxl: 45px; - --heading-font-size-xl: 36px; - --heading-font-size-l: 28px; - --heading-font-size-m: 22px; - --heading-font-size-s: 20px; - --heading-font-size-xs: 18px; - } + src: local("Arial"); +} + +* { + box-sizing: border-box; } body { display: none; margin: 0; - background-color: var(--background-color); + background-color: var(--white); color: var(--text-color); - font-family: var(--body-font-family); - font-size: var(--body-font-size-m); + font-family: rwe-normal, sans-serif; + font-size: 15px; line-height: 1.6; } @@ -100,24 +69,69 @@ footer .footer[data-block-status="loaded"] { h1, h2, -h3, -h4, -h5, -h6 { - margin-top: 0.8em; - margin-bottom: 0.25em; - font-family: var(--heading-font-family); - font-weight: 600; - line-height: 1.25; - scroll-margin: 40px; +h3 { + font-family: rwe-bold, sans-serif; + font-weight: 400; + width: 100%; + margin-top: 0; +} + +h1 { + font-size: 32px; + line-height: 36px; +} + +h1, +h2 { + margin: 0; +} + +h2 { + font-size: 24px; + line-height: 28px; +} + +h3 { + font-size: 18px; + line-height: 24px; + margin: 0; } -h1 { font-size: var(--heading-font-size-xxl); } -h2 { font-size: var(--heading-font-size-xl); } -h3 { font-size: var(--heading-font-size-l); } -h4 { font-size: var(--heading-font-size-m); } -h5 { font-size: var(--heading-font-size-s); } -h6 { font-size: var(--heading-font-size-xs); } +h4 { + font-size: 15px; + line-height: 22px; + margin: 0; +} + +@media (width >= 1280px) { + h1 { + font-size: 68px; + line-height: 74px; + } + + h2 { + font-size: 32px; + line-height: 38px; + } + + h3 { + font-size: 24px; + line-height: 32px; + } + + h4, + p { + font-size: 18px; + line-height: 27px; + } +} + +p { + font-size: 15px; + line-height: 22px; + font-family: rwe-regular, sans-serif; + margin: 0; +} p, dl, @@ -158,6 +172,14 @@ a:any-link { color: var(--link-color); text-decoration: none; word-break: break-word; + text-align: center; + overflow: visible; + font-size: 15px; + line-height: 22px; + font-family: rwe-regural, sans-serif; + border: none; + background-color: transparent; + padding: 0; } a:hover { @@ -171,29 +193,31 @@ button { box-sizing: border-box; display: inline-block; max-width: 100%; - margin: 12px 0; - border: 2px solid transparent; - border-radius: 2.4em; - padding: 0.5em 1.2em; - font-family: var(--body-font-family); - font-style: normal; + margin: 0 8px 0 0; + border: 2px solid rgb(0 161 159); + border-radius: 5px; + padding: 8px 16px; + font-family: rwe-medium, sans-serif; + font-size: 15px; font-weight: 500; - line-height: 1.25; + line-height: 18px; text-align: center; text-decoration: none; - background-color: var(--link-color); - color: var(--background-color); + color: var(--white); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + text-decoration-color: var(--white); + background-color: rgb(0 161 159); } a.button:hover, a.button:focus, button:hover, button:focus { - background-color: var(--link-hover-color); + background-color: #3ed8c3; + border-color: #3ed8c3; cursor: pointer; } @@ -233,7 +257,7 @@ main > .section { } main > .section > div { - max-width: 1200px; + max-width: 1170px; margin: auto; padding: 0 24px; } @@ -242,12 +266,6 @@ main > .section:first-of-type { margin-top: 0; } -@media (width >= 900px) { - main > .section > div { - padding: 0 32px; - } -} - /* section metadata */ main .section.light, main .section.highlight { @@ -255,3 +273,81 @@ main .section.highlight { margin: 0; padding: 40px 0; } + +main .section.background-grey { + background: rgb(232 232 228); + padding: 16px; + background-image: url("/images/loosefield2-p-800.png"), + url("/images/loosefield1-p-800.png"); + background-repeat: no-repeat, no-repeat; + background-position: 120% 0%, -20% 0; + background-size: contain, contain; +} + +main .section.background-dark-blue { + background: #1d4477; +} + +p strong { + font-family: rwe-bold; +} + +.section.text-center .default-content-wrapper { + text-align: center; +} + +.section.content-center .default-content-wrapper { + margin: auto; + width: max-content; +} + +.section.margin-0 { + margin: 0; +} + +/* icons */ +span[class^="icon-rwe"] { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: "RWE_Icon_Font"; + font-size: 20px; +} + +span.icon-rwe-menu::before { + content: ""; +} + +span.icon-rwe-talk::before { + content: ""; +} + +span.icon-rwe-apps::before { + content: ""; +} + +span.icon-rwe-globe::before { + content: ""; +} + +span.icon-rwe-search::before { + content: ""; +} + +span.icon-rwe-anchor-down::before { + content: ""; +} + +span.icon-rwe-anchor-right::before { + content: ""; +} + +span.icon-rwe-anchor-left::before { + content: "" +} + +span.icon-rwe-eye::before { + content: "" +} + +.video-block { + width: 100%; +} \ No newline at end of file