diff --git a/.stylelintrc.json b/.stylelintrc.json index c0272c7c..5e78bc0a 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,7 @@ { "extends": ["stylelint-config-standard", "stylelint-config-prettier"], "rules": { - "selector-class-pattern": null + "selector-class-pattern": null, + "property-no-vendor-prefix": null } } \ No newline at end of file diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index d9ac4c22..0d66c47e 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -325,10 +325,6 @@ main .section.stat-container.carousel-container div.carousel-wrapper { padding: var(--spacer-layout-06) 0 var(--spacer-layout-06); } - main .section div.carousel-wrapper { - padding-top: var(--spacer-layout-07); - } - .section.carousel-container .default-content-wrapper { padding-top: 0; padding-bottom: var(--spacer-layout-07); diff --git a/blocks/content-intro/content-intro.css b/blocks/content-intro/content-intro.css index c775d34c..9d8e9e50 100644 --- a/blocks/content-intro/content-intro.css +++ b/blocks/content-intro/content-intro.css @@ -19,6 +19,10 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe line-height: 160%; } +.content-intro .content-intro__col-1 h1 { + margin: unset; +} + .content-intro .content-intro__col-2 blockquote { margin: var(--spacer-element-05) 0 0; } @@ -106,10 +110,16 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe } .content-intro-stat .content-intro .content-intro__col-2 h2 { + width: 150px; font-size: var(--font-size-96); margin-top: 0; margin-bottom: var(--spacer-element-05); line-height: 120%; + background: var(--gradient-vertical); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; } .content-intro-stat .content-intro .content-intro__col-2 p { @@ -176,6 +186,11 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe flex-shrink: 0; gap: var(--gap-120); max-width: 1128px; + padding-bottom: var(--spacer-element-10); + } + + .content-intro .content-intro__col-1 h2#explore-our-platform { + font-size: 64px; } .content-intro .content-intro__inner h2 + p { @@ -231,5 +246,6 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe .content-intro-stat .content-intro .content-intro__col-2 h2 { font-size: var(--font-size-128); + width: 195px; } } \ No newline at end of file diff --git a/blocks/image-flush-bottom/image-flush-bottom.css b/blocks/image-flush-bottom/image-flush-bottom.css index 36a675ff..947e6bad 100644 --- a/blocks/image-flush-bottom/image-flush-bottom.css +++ b/blocks/image-flush-bottom/image-flush-bottom.css @@ -7,7 +7,7 @@ main .section.image-flush-bottom-container > .image-flush-bottom-wrapper { } main .section > .columns-wrapper + .image-flush-bottom-wrapper { - margin-top: var(--spacer-layout-06); + margin-top: var(--spacer-layout-04); } /* Block - Image Flush Bottom */ @@ -34,6 +34,10 @@ main .section > .columns-wrapper + .image-flush-bottom-wrapper { .image-flush-bottom { width: calc(100% - 72px); } + + main .section > .columns-wrapper + .image-flush-bottom-wrapper { + margin-top: var(--spacer-layout-06); + } } /* Desktop */ diff --git a/blocks/linkable-cards/linkable-cards.css b/blocks/linkable-cards/linkable-cards.css index 4e6b2624..731190b8 100644 --- a/blocks/linkable-cards/linkable-cards.css +++ b/blocks/linkable-cards/linkable-cards.css @@ -62,7 +62,6 @@ main .section > .linkable-cards-wrapper:last-child { border-style: solid; border-color: var(--primary-purple); border-radius: 50%; - background-image: var(--gradient-to-right-white); background-position: 0 0; background-size: 200% auto; transition: all .3s ease-in; @@ -105,7 +104,6 @@ main .section > .linkable-cards-wrapper:last-child { .section[data-theme] .linkable-cards .card span.icon { border-color: var(--theme-button-border); - background-image: var(--theme-button-bg); } .section[data-theme] .linkable-cards .card a:hover span.icon { diff --git a/blocks/solution-header/solution-header.css b/blocks/solution-header/solution-header.css index 1cdb6fea..a4331553 100644 --- a/blocks/solution-header/solution-header.css +++ b/blocks/solution-header/solution-header.css @@ -2,7 +2,6 @@ .solution-header-wrapper { opacity: 0; position: fixed; - border-bottom: 1px solid var(--neutral-sand); width: 100%; height: 140px; background-color: var(--neutral-bone); @@ -62,6 +61,37 @@ visibility: hidden; } +.solution-header-wrapper .solution-header .gradient-left { + position: absolute; + left: 0; + top: 65px; + width: var(--spacer-element-09); + height: 40px; + background: linear-gradient(90deg, #FAF8F6 0%, #faf8f600 50%); +} + +.solution-header-wrapper.is-sticky .solution-header .gradient-left { + height: 50px; + top: 0; + left: 88px; + background: linear-gradient(90deg, #20201F 0%, #20201f00 50%); +} + +.solution-header-wrapper .solution-header .gradient-right { + position: absolute; + right: 0; + top: 65px; + width: var(--spacer-element-09); + height: 40px; + background: linear-gradient(270deg, #FAF8F6 0%, #faf8f600 50%); +} + +.solution-header-wrapper.is-sticky .solution-header .gradient-right { + height: 50px; + top: 0; + background: linear-gradient(270deg, #20201F 0%, #20201f00 50%); +} + .solution-header ul { display: flex; align-items: flex-end; @@ -74,11 +104,15 @@ font-family: var(--sans-serif-font-medium); list-style: none; height: 100%; + padding-left: var(--spacer-element-05); +} + +.solution-header ul li:first-child { padding-left: var(--spacer-element-07); } .solution-header ul li:last-child { - padding-right: var(--spacer-element-07); + padding-right: var(--spacer-element-05); } .solution-header ul li a { @@ -126,9 +160,9 @@ body.microsites.header-visible main { .solution-header-wrapper.is-sticky .solution-header .icon { display: block; - width: var(--spacer-layout-03); + width: 56px; height: var(--spacer-layout-03); - clip-path: circle(50% at 50% 50%); + border-right: 1px solid var(--neutral-grey-tint140); } .solution-header-wrapper.is-sticky .solution-header .icon svg { @@ -136,13 +170,12 @@ body.microsites.header-visible main { } .solution-header-wrapper.is-sticky .solution-header .solution-header__col-1 { - margin: var(--spacer-element-05) var(--spacer-element-07); + margin: var(--spacer-element-05) var(--spacer-element-01) var(--spacer-element-05) var(--spacer-element-08); } .solution-header-wrapper.is-sticky .solution-header .solution-header__col-2 { border-color: transparent; margin: 0; - border-left: 1px solid var(--neutral-grey-tint140); } .solution-header-wrapper.is-sticky .solution-header ul li a { @@ -157,6 +190,34 @@ body.microsites.header-visible main { justify-content: center; } + .solution-header-wrapper .solution-header .gradient-left { + display: none; + } + + .solution-header-wrapper.is-sticky .solution-header .gradient-left { + display: none; + } + + .solution-header-wrapper .solution-header .gradient-right { + display: none; + } + + .solution-header-wrapper.is-sticky .solution-header .gradient-right { + display: none; + } + + .solution-header ul li:first-child { + padding-left: unset; + } + + .solution-header-wrapper.is-sticky .solution-header .icon { + width: 68px; + } + + .solution-header-wrapper.is-sticky .solution-header .icon svg { + width: 106px; + } + .solution-header .solution-header__inner .solution-header__col-1 { margin: var(--spacer-element-07) var(--spacer-element-08); } @@ -246,6 +307,7 @@ body.microsites.header-visible main { } .solution-header-wrapper { + border-bottom: 1px solid var(--neutral-sand); height: var(--nav-height-desktop); } @@ -279,9 +341,11 @@ body.microsites.header-visible main { width: var(--spacer-element-09); height: var(--spacer-element-09); clip-path: circle(50% at 50% 50%); + border: unset; } .solution-header-wrapper.is-sticky .solution-header .icon svg { height: var(--spacer-element-09); + width: unset; } } \ No newline at end of file diff --git a/blocks/solution-header/solution-header.js b/blocks/solution-header/solution-header.js index 7544da80..d50b8489 100644 --- a/blocks/solution-header/solution-header.js +++ b/blocks/solution-header/solution-header.js @@ -1,3 +1,5 @@ +import { createTag } from '../../scripts/scripts.js'; + export default function decorate(block) { const blockName = block.getAttribute('data-block-name'); if (!blockName) { @@ -77,7 +79,7 @@ export default function decorate(block) { const observerOptions = { root: null, rootMargin: '0px', - threshold: 0.5, // Trigger when 50% of the element is in the viewport + threshold: 0.2, // Trigger when 50% of the element is in the viewport }; // Create Intersection Observer callback function @@ -124,4 +126,31 @@ export default function decorate(block) { } }); }); + + const navbar = document.querySelector('.solution-header__col-2'); + window.addEventListener('scroll', () => { + // Find the selected navigation item + const selectedNavItem = navbar.querySelector('a.active'); + + // Scroll to the selected navigation item if it's not fully visible + if (selectedNavItem) { + const navbarRect = navbar.getBoundingClientRect(); + const selectedItemRect = selectedNavItem.getBoundingClientRect(); + if (selectedItemRect.right > navbarRect.right) { + // Scroll to the right to make the selected item fully visible + navbar.scrollLeft += (selectedItemRect.right - navbarRect.right) + 20; + } else if (selectedItemRect.left < navbarRect.left) { + // Scroll to the left to make the selected item fully visible + navbar.scrollLeft -= (navbarRect.left - selectedItemRect.left) + 20; + } + } + }); + + // Create new div element to inject + const gradientLeft = createTag('div', { class: 'gradient-left' }); + const gradientRight = createTag('div', { class: 'gradient-right' }); + + // Insert the new div elements before and after the target div + navbar.insertBefore(gradientLeft, navbar.firstChild); + navbar.appendChild(gradientRight); }