diff --git a/blocks/header/header-megamenu-components.js b/blocks/header/header-megamenu-components.js index dcba10134..b770d4143 100644 --- a/blocks/header/header-megamenu-components.js +++ b/blocks/header/header-megamenu-components.js @@ -10,7 +10,15 @@ import { formatEventDates } from '../latest-events/latest-events.js'; import { sortDataByDate, summariseDescription } from '../../scripts/scripts.js'; function wrapLinkAroundComponent(link, component, removeLink = false) { - const linkCopy = a({ href: link.href }); + let linkCopy; + + if (component.nextElementSibling && component.nextElementSibling.tagName === 'A') { + linkCopy = a({ href: component.nextElementSibling.href }); + component.nextElementSibling.remove(); + } else { + linkCopy = a({ href: link.href }); + } + // Insert the new div before the existing div component.parentNode.insertBefore(linkCopy, component); // Move the existing div inside the new div @@ -24,11 +32,16 @@ function wrapLinkAroundComponent(link, component, removeLink = false) { } function buildLargeCardsMenu(cardContent) { - const link = cardContent.querySelector('a'); - const picture = cardContent.querySelector('picture'); - - if (link && picture) { - wrapLinkAroundComponent(link, picture); + const links = cardContent.querySelectorAll('a'); + const pictures = cardContent.querySelectorAll('picture'); + + if (links && pictures) { + wrapLinkAroundComponent(links[0], pictures[0]); + pictures.forEach((picture) => { + if (picture.nextElementSibling && picture.nextElementSibling.tagName === 'A') { + wrapLinkAroundComponent(picture.nextElementSibling.href, picture); + } + }); } return cardContent; diff --git a/blocks/header/header-megamenu.js b/blocks/header/header-megamenu.js index 20ec2e00d..90b2fbc98 100644 --- a/blocks/header/header-megamenu.js +++ b/blocks/header/header-megamenu.js @@ -1,4 +1,3 @@ -/* eslint-disable linebreak-style */ import buildRightSubmenu from './header-megamenu-components.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import buildSearch from './menus/search.js'; @@ -30,13 +29,14 @@ function getTitlesWithLineDividers(content) { const titleIds = []; const lineDividers = content.querySelectorAll('p'); lineDividers.forEach((lineDivider) => { - if (!lineDivider.textContent.includes('--')) { + if (!lineDivider.textContent.trim().includes('--')) { return; } - - // get the h2 id immediately after the p element - const h2Id = lineDivider.nextElementSibling.id; - titleIds.push(h2Id); + if (lineDivider.nextElementSibling !== null) { + // get the h2 id immediately after the p element + const h2Id = lineDivider.nextElementSibling.id; + titleIds.push(h2Id); + } }); return titleIds; diff --git a/blocks/header/header.css b/blocks/header/header.css index ed0eaa4ce..dc275ba08 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -52,7 +52,7 @@ header .navbar-header { } header .nav-brand:not(.custom-logo) { - background-image: url('/images/header-menus/logo.svg'); + background-image: url("/images/header-menus/logo.svg"); background-position: top; background-repeat: no-repeat; width: 220px; @@ -232,7 +232,7 @@ header .image-card-submenu > div > div > p { header .image-card-submenu > div > div > p:last-child { padding: 0 20px 20px; - font-family: 'Proxima Nova Light', sans-serif; + font-family: "Proxima Nova Light", sans-serif; font-size: 16px; font-weight: 400; text-transform: none; @@ -486,7 +486,7 @@ header nav .nav-tools { /* submenus */ header .nav-tabs .menu-nav-submenu-close { - background: url('../../icons/close-dropdown.svg') no-repeat center/contain; + background: url("../../icons/close-dropdown.svg") no-repeat center/contain; top: 180px; right: 20px; border-radius: 100%; @@ -518,7 +518,7 @@ header .nav-tabs .menu-nav-submenu { opacity: 1; visibility: visible; position: absolute; - background: var(--background-color) url('/images/header-background-filler.jpg') no-repeat right bottom; + background: var(--background-color) url("/images/header-background-filler.jpg") no-repeat right bottom; } header .cards-submenu img { @@ -543,7 +543,7 @@ header .mobile-menu { overflow-x: hidden; overflow-y: auto; transform: translate(-100%, 0); - transition: transform .4s ease; + transition: transform 0.4s ease; z-index: -9; opacity: 0; visibility: hidden; @@ -665,7 +665,7 @@ header .mobile-menu-subcategories { position: fixed; padding: 0; border: 0; - transition: transform .4s ease; + transition: transform 0.4s ease; border-top-left-radius: 0; border-top-right-radius: 0; z-index: 1000; @@ -915,7 +915,7 @@ header .nav-tabs .menu-nav-submenu-sections > .line-divider { header .cards-submenu, header .col-2 > div, header .col-3 > div, -header .col-4 > div{ +header .col-4 > div { display: grid; gap: 20px; } @@ -1070,7 +1070,7 @@ header .large-card-submenu img { object-fit: contain; display: block; margin: auto; - transition: all .2s; + transition: all 0.2s; } header .image-right { @@ -1097,11 +1097,11 @@ header .image-center img { } header .green-blue-circle { - background-image: url('../../images/header-menus/green-blue-circle.png'); + background-image: url("../../images/header-menus/green-blue-circle.png"); } header .cutted-green-blue-circle { - background-image: url('../../images/header-menus/cutted-green-blue-circle.png'); + background-image: url("../../images/header-menus/cutted-green-blue-circle.png"); } header .image-with-text-submenu img { @@ -1145,7 +1145,7 @@ header .cards-submenu p { } header .cards-submenu p:first-child img { - transition: all .4s; + transition: all 0.4s; } header .menu-nav-submenu-section[submenu-id="3d-biology"] .cards-submenu p:first-child img { @@ -1160,7 +1160,7 @@ header .cards-submenu p:nth-child(2) { header .cards-submenu p:first-child:hover img { transform: scale(1.15); - transition: all .4s; + transition: all 0.4s; } header .cards-submenu p:nth-child(1) { @@ -1247,7 +1247,7 @@ header .actionable-card-submenu:not(.company-right-submenu) > div:nth-child(2) > margin-bottom: 10px; } -header .actionable-card-submenu > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n+2) { +header .actionable-card-submenu > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n + 2) { line-height: 1.3; font-size: 16px; font-family: var(--ff-proxima-light); @@ -1260,7 +1260,7 @@ header .nav-tabs .menu-nav-category a:hover { header .actionable-card-submenu > div:nth-child(2) > div:nth-child(1) > p > a { font-family: var(--ff-proxima-regular); - transition: all .2s; + transition: all 0.2s; border: 0; color: var(--text-white); position: relative !important; @@ -1277,11 +1277,18 @@ header .actionable-card-submenu > div:nth-child(2) > div:nth-child(1) > p > a:ho color: var(--button-bg-color); } -div.actionable-card-submenu.service-support-right-submenu.right-submenu-content > div:nth-child(2) > div > p:nth-child(1) { +div.actionable-card-submenu.service-support-right-submenu.right-submenu-content + > div:nth-child(2) + > div + > p:nth-child(1) { margin-bottom: 20px; } -div.actionable-card-submenu.service-support-right-submenu.right-submenu-content.customercare-portal.btn-new-tab > div:nth-child(2) > div > p:nth-last-of-type(-n+2) > a:hover { +div.actionable-card-submenu.service-support-right-submenu.right-submenu-content.customercare-portal.btn-new-tab + > div:nth-child(2) + > div + > p:nth-last-of-type(-n + 2) + > a:hover { color: var(--background-color-green) !important; background-color: white !important; } @@ -1322,8 +1329,16 @@ header .actionable-card-submenu.text-only > div:nth-child(2) > div:nth-child(1) margin-top: 0; } -.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(2) > a, -.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(1) > a { +.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase + > div:nth-child(2) + > div:nth-child(1) + > p:nth-last-of-type(2) + > a, +.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase + > div:nth-child(2) + > div:nth-child(1) + > p:nth-last-of-type(1) + > a { background-color: transparent; width: 300px; line-height: 10px; @@ -1337,12 +1352,24 @@ header .actionable-card-submenu.text-only > div:nth-child(2) > div:nth-child(1) padding: 0; } -.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(2) > a { +.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase + > div:nth-child(2) + > div:nth-child(1) + > p:nth-last-of-type(2) + > a { background-position: 160px center !important; } -.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(2) > a:hover, -.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(1) > a:hover { +.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase + > div:nth-child(2) + > div:nth-child(1) + > p:nth-last-of-type(2) + > a:hover, +.actionable-card-submenu.service-support-right-submenu.right-submenu-content.text-only.proxima-nova-lt.uppercase + > div:nth-child(2) + > div:nth-child(1) + > p:nth-last-of-type(1) + > a:hover { color: var(--text-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' xmlns:xlink='http://www.w3.org/1999/xlink' width='13.000000pt' height='13.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' fill='%23ffffff' stroke='none'%3E%3Cpath d='M100 273 c-95 -49 -87 -193 13 -232 105 -40 206 61 166 166 -27 70 -111 101 -179 66z m110 -18 c32 -17 60 -61 60 -95 0 -53 -57 -110 -110 -110 -53 0 -110 57 -110 110 0 33 28 78 58 94 35 20 66 20 102 1z'/%3E%3Cpath d='M155 190 l29 -30 -29 -30 c-16 -17 -24 -30 -19 -30 6 0 23 14 39 30 l29 30 -29 30 c-16 17 -33 30 -39 30 -5 0 3 -13 19 -30z'/%3E%3C/g%3E%3C/svg%3E"); } @@ -1362,15 +1389,14 @@ header .actionable-card-submenu.col-1 > div:nth-child(2) > div:nth-child(1) > p: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' xmlns:xlink='http://www.w3.org/1999/xlink' width='13.000000pt' height='13.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' fill='%23ffffff' stroke='none'%3E%3Cpath d='M100 273 c-95 -49 -87 -193 13 -232 105 -40 206 61 166 166 -27 70 -111 101 -179 66z m110 -18 c32 -17 60 -61 60 -95 0 -53 -57 -110 -110 -110 -53 0 -110 57 -110 110 0 33 28 78 58 94 35 20 66 20 102 1z'/%3E%3Cpath d='M155 190 l29 -30 -29 -30 c-16 -17 -24 -30 -19 -30 6 0 23 14 39 30 l29 30 -29 30 c-16 17 -33 30 -39 30 -5 0 3 -13 19 -30z'/%3E%3C/g%3E%3C/svg%3E"); } - header .actionable-card-submenu > div:nth-child(2) > div:nth-child(2) img { max-width: 250px; max-height: 127px; } header .actionable-card-submenu.customercare-portal h3, -header .actionable-card-submenu.customercare-portal p:nth-child(4n+2), -header .actionable-card-submenu.customercare-portal p:nth-child(4n+3) { +header .actionable-card-submenu.customercare-portal p:nth-child(4n + 2), +header .actionable-card-submenu.customercare-portal p:nth-child(4n + 3) { line-height: 1.5; color: rgba(255 255 255 / 75%); } @@ -1383,14 +1409,14 @@ header .actionable-card-submenu.customercare-portal h3 { margin-bottom: 10px; } -header .actionable-card-submenu.customercare-portal p:nth-child(4n+2), -header .actionable-card-submenu.customercare-portal p:nth-child(4n+3) { +header .actionable-card-submenu.customercare-portal p:nth-child(4n + 2), +header .actionable-card-submenu.customercare-portal p:nth-child(4n + 3) { text-transform: none; font-size: 12px; } header .actionable-card-submenu.customercare-portal > div:nth-child(1) { - background-image: url('/images/header-menus/spectranet-customer-portal.svg'); + background-image: url("/images/header-menus/spectranet-customer-portal.svg"); height: 89px; padding: 10px; margin-bottom: 20px; @@ -1402,7 +1428,7 @@ header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div { width: 100%; } -header .actionable-card-submenu.customercare-portal div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n+2) { +header .actionable-card-submenu.customercare-portal div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n + 2) { width: auto; float: left; margin-bottom: 0; @@ -1424,11 +1450,16 @@ header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth } } -header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n+1) { +header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n + 1) { line-height: 1.2; } -header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth-child(1) > p:nth-last-of-type(-n+1) > a { +header + .actionable-card-submenu.customercare-portal + > div:nth-child(2) + > div:nth-child(1) + > p:nth-last-of-type(-n + 1) + > a { border: 1px solid var(--background-color-green); } @@ -1436,7 +1467,7 @@ header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth header .right-submenu-content p strong > a, header .right-submenu-content p em > a { font-family: var(--ff-proxima-regular); - transition: all .2s; + transition: all 0.2s; color: var(--text-white); position: relative; border-radius: 0; @@ -1457,13 +1488,17 @@ header .right-submenu-content p em > a { font-style: normal; } +header .right-submenu-content.border-color-green p em > a { + border-color: var(--text-green); +} + header .right-submenu-content p strong > a:hover, header .right-submenu-content p em > a:hover { color: var(--button-bg-color); background-color: var(--text-white); } -header .products-right-submenu, +/* header .products-right-submenu, */ header .applications-right-submenu { background-color: rgba(0 0 0 / 30%); color: var(--header-actionable-submenu-text-color); @@ -1487,13 +1522,13 @@ header .applications-right-submenu p { font-size: 1rem; } -header .products-right-submenu > div, +/* header .products-right-submenu > div, */ header .applications-right-submenu > div { display: flex; flex-wrap: wrap; } -header .products-right-submenu > div > div, +/* header .products-right-submenu > div > div, */ header .applications-right-submenu > div > div { flex-basis: 50%; max-width: 50%; @@ -1503,17 +1538,17 @@ header .applications-right-submenu > div > div { position: relative; } -header .products-right-submenu > div > div:last-child, +/* header .products-right-submenu > div > div:last-child, */ header .applications-right-submenu > div > div:last-child { padding: 0; } -header .products-right-submenu > div > div:last-child p, +/* header .products-right-submenu > div > div:last-child p, */ header .applications-right-submenu > div > div:last-child p { margin: 0; } -header .products-right-submenu > div > div:last-child p:last-child picture:first-child img, +/* header .products-right-submenu > div > div:last-child p:last-child picture:first-child img, */ header .applications-right-submenu > div > div:last-child picture:first-child img { position: absolute; width: 100%; @@ -1524,35 +1559,132 @@ header .applications-right-submenu > div > div:last-child picture:first-child im object-position: left; } -header .products-right-submenu > div > div:last-child p:last-child picture:last-child img, header .applications-right-submenu > div > div:last-child picture:last-child img { position: absolute; - left: -70px; right: auto; - top: 60%; z-index: 1; pointer-events: none; width: auto; -} - -header .applications-right-submenu > div > div:last-child picture:last-child img { left: -30%; top: 45%; } -header .products-right-submenu > div > div:last-child p:first-child img { +/* PRODUCTS MENU */ +header .products-right-submenu { + padding: 0; + display: flex; + gap: 20px; + background-color: rgba(0 0 0 / 30%); + color: var(--header-actionable-submenu-text-color); +} + +header .products-right-submenu > div:first-child { + z-index: 1; + display: grid; + grid-template-columns: 40% 60%; +} + +header .products-right-submenu > div:first-child > div, +header .products-right-submenu > div:first-child > div:first-child { + padding: 40px; +} + +header .products-right-submenu > div:first-child > div { + text-align: center; + padding-right: 0; +} + +header .products-right-submenu > div:first-child > div img { + width: 100%; + height: auto; +} + +header .products-right-submenu > div:first-child > div:first-child { + text-align: left; +} + +header .products-right-submenu > div:first-child > div:last-child { + position: absolute; + right: 20%; + bottom: -21%; + padding: 0; +} + +header .products-right-submenu > div:first-child > div:not(:first-child) h3 { + font-size: 18px; + max-width: 60%; + margin: auto; +} + +header .products-right-submenu > div:first-child > div:not(:first-child) h3 a { + color: var(--text-white); +} + +header .products-right-submenu > div:first-child > div:not(:first-child) p { + max-width: 60%; + margin: 1.25rem auto; +} + +header .products-right-submenu > div:last-child { + position: absolute; + right: 0; + top: 0; + width: 60%; + pointer-events: none; +} + +header .products-right-submenu > div:last-child img { + width: 100%; + max-height: 100%; + object-fit: cover; +} + +/* 3D Biology */ +header .biology-3d-right-submenu:last-child { + height: auto; +} + +header .nav-tabs .menu-nav-submenu-section .biology-3d-right-submenu:last-child h3 { + text-transform: none; + max-width: 90%; + text-align: center; + margin: auto; +} + +header .image-card-submenu.biology-3d-right-submenu:last-child picture > img { + position: absolute; +} + +header .biology-3d-right-submenu:last-child > div > div:last-child p:first-child img { position: absolute; max-height: 100%; - max-width: 85%; width: 100%; bottom: -80px; + z-index: 1; + max-width: 100%; height: auto; right: 0; - z-index: 1; + left: 0; + object-fit: contain; + transition: all 0.2s; +} + +header .biology-3d-right-submenu:last-child > div > div:last-child p:last-child img { + max-width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: -1; +} + +header .biology-3d-right-submenu:last-child:hover > div > div:last-child p:first-child img { + cursor: pointer; + transform: scale(1.1); } /* COMPANY MENU */ -header .company-right-submenu { + +/* header .company-right-submenu { padding: 0; border: none; background-color: rgba(0 0 0 / 30%); @@ -1586,7 +1718,7 @@ header .company-right-submenu div:first-child > div:first-child picture img { clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); max-height: 100%; margin: 0; - transition: all .3s ease-in-out; + transition: all 0.3s ease-in-out; } header .company-right-submenu > div:first-child > div:nth-child(2) { @@ -1611,6 +1743,60 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { width: 200px; height: 201px; max-height: 100%; +} */ + +header .company-right-submenu { + padding: 0; + background-color: transparent; +} + +header .company-right-submenu div { + position: relative; +} + +header .company-right-submenu > div:first-child { + display: grid; + grid-template-columns: 2fr 1.5fr; + gap: 20px; + align-items: center; + text-align: right; +} + +header .company-right-submenu > div:first-child img { + width: 100%; +} + +header .company-right-submenu > div:first-child > div:last-child { + font-size: 16px; + display: block; + text-align: right; + padding: 32px 24px; + position: relative; +} + +header .company-right-submenu > div:nth-child(2) { + position: absolute; + left: 0; + right: 0; + bottom: -40px; + pointer-events: none; +} + +header .company-right-submenu > div:last-child { + position: absolute; + left: 0; + width: 100%; + top: 0; + max-height: 100%; + pointer-events: none; + height: 100%; + z-index: -1; +} + +header .company-right-submenu > div:last-child > div:last-child img { + width: 100%; + max-height: 100%; + object-fit: cover; } /* cellesce-page */ @@ -1648,6 +1834,11 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { header nav { justify-content: space-between; } + + /* header .products-right-submenu > div > div:first-child, */ + header .applications-right-submenu > div > div:first-child { + padding-right: 70px; + } } @media (max-width: 991px) { @@ -1696,7 +1887,7 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { padding-bottom: 0; } - header .company-links img{ + header .company-links img { margin: auto; display: block; } @@ -1752,7 +1943,7 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { header .cards-submenu.cards-submenu.customercare-portal p > a > picture img { margin-top: 20px; - transition: all .2s ease-in-out; + transition: all 0.2s ease-in-out; } header .cards-submenu.cards-submenu.customercare-portal p > a > picture img:hover { @@ -1815,7 +2006,7 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { } header .searchlink { - background-image: url('/images/orange-search.webp'); + background-image: url("/images/orange-search.webp"); display: block; background-repeat: no-repeat; height: 42px; @@ -1841,8 +2032,8 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { position: absolute; height: 2000px; padding-bottom: 9.4%; - background-color: #008DA9; - box-shadow: inset 0 19px 33px -28px #333F; + background-color: #008da9; + box-shadow: inset 0 19px 33px -28px #333f; } header .menu-nav-search-view > div { @@ -1960,7 +2151,7 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { position: relative; background: var(--header-color-orange); font-size: 15px; - transition: all .3s; + transition: all 0.3s; justify-content: center; } @@ -1986,11 +2177,11 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { header .nav-tabs .menu-nav-submenu { min-height: 782px; - box-shadow: inset 0 19px 33px -28px #333F; + box-shadow: inset 0 19px 33px -28px #333f; background-repeat: no-repeat; background-size: cover; background-color: transparent; - transition: all .1s ease; + transition: all 0.1s ease; min-width: 12.5rem; } @@ -2107,7 +2298,7 @@ header .company-right-submenu div:nth-child(2) > div:last-child picture img { max-width: 100%; vertical-align: top; height: auto; - transition: all .4s; + transition: all 0.4s; } .blog-cards-submenu .blog-posts-block img:hover {