From 9e59e5bf55fb5c6dfdcccc4b618d9221aa60e68a Mon Sep 17 00:00:00 2001 From: josec Date: Tue, 4 Jul 2023 15:51:12 +0200 Subject: [PATCH 1/4] Replace megamenu background image by simple gradient --- blocks/header/header-megamenu.js | 3 --- blocks/header/header.css | 4 ++-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/blocks/header/header-megamenu.js b/blocks/header/header-megamenu.js index 43a2cdb08..17400ae07 100644 --- a/blocks/header/header-megamenu.js +++ b/blocks/header/header-megamenu.js @@ -87,9 +87,6 @@ function buildMegaMenu(block, content) { ), ); - const backgroundImg = content.querySelector('.submenu-background img'); - submenu.style.backgroundImage = `url(${backgroundImg.src})`; - // Get the list item in the header block that contains a div with attribute menu-id // that matches the menuId const item = block.querySelector(`div[menu-id="${menuId}"]`).closest('li'); diff --git a/blocks/header/header.css b/blocks/header/header.css index 2cf5da30f..68da60ee1 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -482,7 +482,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: linear-gradient(90deg,rgba(21 145 164 / 100%) 0,rgba(50 159 121 / 100%) 50%,rgba(97 178 73 / 100%) 100%) !important; } header .cards-submenu > div { @@ -1726,7 +1726,7 @@ header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth } header .nav-tabs .menu-nav-submenu { - min-height: 782px; + min-height: 750px; padding-bottom: 9.4%; box-shadow: inset 0 19px 33px -28px #333F; background-repeat: no-repeat; From 60ee0282edcdd56e7f9e09be3756f33aca756d1b Mon Sep 17 00:00:00 2001 From: josec Date: Tue, 4 Jul 2023 16:47:24 +0200 Subject: [PATCH 2/4] Add wave --- blocks/header/header.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/blocks/header/header.css b/blocks/header/header.css index 68da60ee1..37aa6d358 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -485,6 +485,17 @@ header .nav-tabs .menu-nav-submenu { background: linear-gradient(90deg,rgba(21 145 164 / 100%) 0,rgba(50 159 121 / 100%) 50%,rgba(97 178 73 / 100%) 100%) !important; } +header .nav-tabs .menu-nav-submenu::after { + background-image: url("/images/wave-background-bottom.webp"), url("/images/wave-background-bottom.png"); + background-size: 100% 100%; + height: 82px; + width: 100%; + position: absolute; + padding: 0; + bottom: 0; + content: ""; +} + header .cards-submenu > div { display: flex; flex-wrap: wrap; From 8c494206910969721bb3215582f9e42727ed88d6 Mon Sep 17 00:00:00 2001 From: josec Date: Wed, 5 Jul 2023 13:30:53 +0200 Subject: [PATCH 3/4] Invert colors --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 37aa6d358..bf4b5b199 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -482,7 +482,7 @@ header .nav-tabs .menu-nav-submenu { opacity: 1; visibility: visible; position: absolute; - background: linear-gradient(90deg,rgba(21 145 164 / 100%) 0,rgba(50 159 121 / 100%) 50%,rgba(97 178 73 / 100%) 100%) !important; + background: linear-gradient(90deg, rgba(97 178 73 / 100%) 0, rgba(50 159 121 / 100%) 50%, rgba(21 145 164 / 100%) 100%) !important; } header .nav-tabs .menu-nav-submenu::after { From c800a60c347784aab252a56e8cf184fd83459739 Mon Sep 17 00:00:00 2001 From: josec Date: Wed, 5 Jul 2023 13:37:51 +0200 Subject: [PATCH 4/4] Fix color --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index bf4b5b199..ddde00b46 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -482,7 +482,7 @@ header .nav-tabs .menu-nav-submenu { opacity: 1; visibility: visible; position: absolute; - background: linear-gradient(90deg, rgba(97 178 73 / 100%) 0, rgba(50 159 121 / 100%) 50%, rgba(21 145 164 / 100%) 100%) !important; + background: linear-gradient(90deg, rgb(64, 172, 100) 0, rgba(70 146 140) 50%, rgb(17, 149, 185) 100%) !important; } header .nav-tabs .menu-nav-submenu::after {