diff --git a/blocks/iframe/iframe.css b/blocks/iframe/iframe.css new file mode 100644 index 00000000..5fb8efc2 --- /dev/null +++ b/blocks/iframe/iframe.css @@ -0,0 +1,24 @@ +.section.iframe-container .iframe-wrapper { + padding-bottom: 0; + width: auto; + margin: 0; + max-width: unset; + padding-top: 90px; +} + +.section.iframe-container .iframe-wrapper .iframe iframe { + display: block; +} + +/* Tablet */ +@media only screen and (min-width: 768px) { + .section.iframe-container .iframe-wrapper { + padding-top: var(--spacer-layout-06); + } +} + +@media only screen and (min-width: 1200px) { + .section.iframe-container .iframe-wrapper { + padding-top: var(--spacer-layout-06); + } +} \ No newline at end of file diff --git a/blocks/iframe/iframe.js b/blocks/iframe/iframe.js new file mode 100644 index 00000000..adea753d --- /dev/null +++ b/blocks/iframe/iframe.js @@ -0,0 +1,21 @@ +import { createTag } from '../../scripts/scripts.js'; + +export default function decorate(block) { + // Fetch the iframe link + const link = block.querySelector('a'); + const path = link ? link.getAttribute('href') : ''; + + // Create the iframe tag + const iframe = createTag('iframe', { class: 'iframe-window', id: 'navattic-iframe' }); + iframe.src = path; + + // Set the height and width + iframe.width = '100%'; + iframe.height = 1200; + + // Remove the elements inside iframe block + block.innerHTML = ''; + + // Append iframe to block + block.appendChild(iframe); +} diff --git a/blocks/solution-footer/solution-footer.css b/blocks/solution-footer/solution-footer.css index b349ba1c..0d61f101 100644 --- a/blocks/solution-footer/solution-footer.css +++ b/blocks/solution-footer/solution-footer.css @@ -4,10 +4,64 @@ main .section.solution-footer-container { color: var(--neutral-white); } +.solution-footer.navattic > div { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--gap-16); +} + +.solution-footer.navattic > div .button-container a { + color: var(--neutral-white); + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-14); + font-style: normal; + font-weight: var(--font-weight-light); + line-height: var(--line-height-160); + letter-spacing: 0.16px; + display: inline; +} + +.solution-footer.navattic > div div { + color: var(--neutral-white); + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-14); + font-style: normal; + font-weight: var(--font-weight-light); + line-height: var(--line-height-120); + letter-spacing: 0.16px; +} + +.solution-footer.navattic > div .button-container > a.tertiary:not(.has-icon), .solution-footer.navattic > div .button-container > a.tertiary.has-icon::before { + border-bottom: 0; +} + +.solution-footer.navattic > div .button-container > a.tertiary:active, .solution-footer.navattic > div .button-container > a.tertiary:hover { + -webkit-text-fill-color: unset; + color: unset; + border-image-source: unset; +} + +.solution-footer.navattic > div .button-container > a.tertiary:not(.has-icon):hover { + border-bottom: 1px solid #FFF; +} + +.solution-footer.navattic > div > div:first-child { + width: 100%; + padding-bottom: var(--spacer-element-08); + border-bottom: 1px solid var(--neutral-grey-tint140); +} + main .section.solution-footer-container > div:last-child { padding: var(--spacer-element-08) 0; } +.solution-footer-container:has(.navattic) { + position: relative; + bottom: 0; +} + /* Block - Solution Footer */ .solution-footer { position: relative; @@ -20,11 +74,25 @@ main .section.solution-footer-container > div:last-child { line-height: 0; } +.solution-footer.navattic .icon { + margin-left: unset; +} + +.solution-footer.navattic > div div:last-child { + color: var(--neutral-grey-tint100); + margin-top: var(--spacer-element-10); +} + .solution-footer svg { width: auto; height: 38px; } +.solution-footer.navattic > div .button-container > a.button.tertiary span.icon > svg { + height: 38px; + width: 43px; +} + .solution-footer svg #text * { fill: var(--neutral-white); } @@ -57,6 +125,15 @@ main .section.solution-footer-container > div:last-child { color: var(--neutral-white); } +.solution-footer.navattic > div .cookie-consent { + cursor: pointer; + height: 17px; +} + +.solution-footer.navattic > div .cookie-consent:hover { + border-bottom: 1px solid #FFF; +} + /* stylelint-disable no-descending-specificity */ .solution-footer ul li a, .solution-footer ul li a:not(.button):any-link { @@ -90,6 +167,19 @@ main .section.solution-footer-container > div:last-child { align-items: center; } + .solution-footer.navattic > div { + flex-direction: row; + align-items: center; + } + + .solution-footer.navattic > div .button-container a { + font-size: var(--font-size-16); + } + + .solution-footer.navattic > div div { + font-size: var(--font-size-16); + } + .solution-footer ul { display: flex; justify-content: flex-end; @@ -98,6 +188,17 @@ main .section.solution-footer-container > div:last-child { gap: var(--gap-24); } + .solution-footer.navattic > div > div:first-child { + flex-grow: 1; + padding-bottom: unset; + border-bottom: unset; + width: unset; + } + + .solution-footer.navattic div div:not(.button-container):last-child { + margin-top: unset; + } + .solution-footer .default-content-wrapper { display: flex; align-items: center; @@ -111,10 +212,23 @@ main .section.solution-footer-container > div:last-child { .solution-footer .default-content-wrapper ul + p { position: relative; } + + .solution-footer.navattic > div .button-container > a.button.tertiary span.icon > svg { + height: 48px; + width: 54px; + } + + .solution-footer.navattic > div .cookie-consent { + height: unset; + } } /* Desktop */ -@media (min-width: 1200px) { +@media (min-width: 1200px) { + .solution-footer.navattic > div { + gap: var(--gap-24); + } + main .section.solution-footer-container > div:last-child { padding: var(--spacer-element-10) 0; } diff --git a/blocks/solution-footer/solution-footer.js b/blocks/solution-footer/solution-footer.js index 3e81bba1..2027d076 100644 --- a/blocks/solution-footer/solution-footer.js +++ b/blocks/solution-footer/solution-footer.js @@ -1,4 +1,4 @@ -import { decorateMain } from '../../scripts/scripts.js'; +import { decorateMain, createTag } from '../../scripts/scripts.js'; import { loadBlocks, decorateButtons } from '../../scripts/lib-franklin.js'; /** @@ -74,4 +74,16 @@ export default async function decorate(block) { } }); } + + // Find the navattic footer list + const footerList = block.querySelector('.solution-footer.navattic > div'); + if (footerList) { + const cookieConsent = createTag('div', { class: 'cookie-consent' }); + cookieConsent.innerText = 'Cookie preferences'; + + // eslint-disable-next-line no-undef + cookieConsent.addEventListener('click', () => { OneTrust.ToggleInfoDisplay(); }); + + footerList.insertBefore(cookieConsent, footerList.children[3]); + } } diff --git a/blocks/solution-header/solution-header.css b/blocks/solution-header/solution-header.css index a4331553..db114bb0 100644 --- a/blocks/solution-header/solution-header.css +++ b/blocks/solution-header/solution-header.css @@ -52,10 +52,26 @@ border-top: 1px solid var(--neutral-sand); } +.solution-header.navattic .solution-header__inner .solution-header__col-2 { + border-color: transparent; +} + .solution-header .solution-header__inner .solution-header__col-3 { display: none; } +.solution-header.navattic .solution-header__inner[aria-expanded='true'] .nav-hamburger-icon { + height: 41px; + width: 40px; + background: url('../../icons/navattic-hamburger-close.svg') no-repeat; +} + +.solution-header.navattic .solution-header__inner[aria-expanded='false'] .nav-hamburger-icon { + height: 41px; + width: 40px; + background: url('../../icons/navattic-hamburger.svg') no-repeat; +} + .solution-header .solution-header__inner .solution-header__col-3 p:not(.button-container) { display: none; visibility: hidden; @@ -70,6 +86,10 @@ background: linear-gradient(90deg, #FAF8F6 0%, #faf8f600 50%); } +.solution-header-wrapper .solution-header.navattic .gradient-left { + display: none; +} + .solution-header-wrapper.is-sticky .solution-header .gradient-left { height: 50px; top: 0; @@ -86,6 +106,10 @@ background: linear-gradient(270deg, #FAF8F6 0%, #faf8f600 50%); } +.solution-header-wrapper .solution-header.navattic .gradient-right { + display: none; +} + .solution-header-wrapper.is-sticky .solution-header .gradient-right { height: 50px; top: 0; @@ -151,6 +175,13 @@ body.microsites.header-visible main { height: var(--spacer-layout-05); } +.solution-header.navattic .solution-header__inner { + display: flex; + justify-content: space-between; + margin: 0 var(--spacer-element-07); + align-items: center; +} + .solution-header-wrapper.is-sticky .solution-header__inner { display: flex; align-items: flex-end; @@ -158,6 +189,10 @@ body.microsites.header-visible main { transition: padding-bottom .5s ease; } +.solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner { + align-items: center; +} + .solution-header-wrapper.is-sticky .solution-header .icon { display: block; width: 56px; @@ -173,11 +208,115 @@ body.microsites.header-visible main { margin: var(--spacer-element-05) var(--spacer-element-01) var(--spacer-element-05) var(--spacer-element-08); } +.solution-header.navattic .solution-header__inner .solution-header__col-1 { + margin: 0; +} + +.solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-1 { + margin: 0; +} + .solution-header-wrapper.is-sticky .solution-header .solution-header__col-2 { border-color: transparent; margin: 0; } +.solution-header-wrapper:has(.navattic), .solution-header-wrapper.is-sticky:has(.navattic) { + width: 100%; + max-width: unset; + padding-bottom: var(--spacer-element-07) !important; + padding-top: var(--spacer-element-07) !important; + height: unset; + background: var(--neutral-carbon); + opacity: 1; + border-bottom: 1px solid var(--neutral-grey-tint140); +} + +.solution-header-wrapper .solution-header.navattic, .solution-header-wrapper.is-sticky .solution-header.navattic { + opacity: 1; +} + +.solution-header.navattic .solution-header__inner .solution-header__col-2, .solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-2 { + margin: unset; +} + +.solution-header.navattic .solution-header__inner .solution-header__col-3 { + display: none; + position: unset; +} + +.solution-header.navattic .solution-header__inner[aria-expanded='true'] .solution-header__col-3 { + display: flex; + gap: var(--gap-16); + flex-direction: column; + position: fixed; + background: var(--neutral-carbon); + top: 91px; + width: 100vw; + left: 0; + align-items: center; + padding: var(--spacer-element-07); +} + +.solution-header-wrapper.is-sticky .solution-header.navattic .icon { + width: unset; + height: unset; + clip-path: unset; + border-right: 0; +} + +.solution-header-wrapper .solution-header.navattic .icon svg, .solution-header-wrapper.is-sticky .solution-header.navattic .icon svg { + height: var(--spacer-layout-036); +} + +.solution-header.navattic .solution-header__inner .solution-header__col-3 .button.secondary { + color: var(--neutral-white); + border: 2px solid var(--neutral-white); + background-image: none; + white-space: nowrap; +} + +.solution-header.navattic .solution-header__inner .solution-header__col-3 .button.secondary:hover { + background-image: var(--gradient-to-right); +} + +.solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.secondary { + color: var(--neutral-white); + border: 2px solid var(--neutral-white); + background-image: none; + white-space: nowrap; +} + +.solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.secondary:hover { + background-image: var(--gradient-to-right); +} + +.solution-header.navattic .solution-header__inner .solution-header__col-3 .button.primary { + color: var(--neutral-white); + border: 2px solid var(--primary-purple); + background-image: var(--gradient-to-right); + background-position: 0 0; + background-size: 200% auto; + transition: all .4s ease-in-out; +} + +.solution-header.navattic .solution-header__inner .solution-header__col-3 .button.primary:hover { + background-image: var(--gradient-to-right); +} + +.solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.primary { + color: var(--neutral-white); + border: 2px solid var(--primary-purple); + background-image: var(--gradient-to-right); + background-position: 0 0; + background-size: 200% auto; + transition: all .4s ease-in-out; +} + +.solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.primary:hover { + background-image: var(--gradient-to-right); +} + .solution-header-wrapper.is-sticky .solution-header ul li a { color: var(--neutral-white); padding: var(--spacer-element-05) 0; @@ -218,10 +357,18 @@ body.microsites.header-visible main { width: 106px; } + .solution-header-wrapper.is-sticky .solution-header.navattic .icon svg { + width: auto; + } + .solution-header .solution-header__inner .solution-header__col-1 { margin: var(--spacer-element-07) var(--spacer-element-08); } + .solution-header.navattic .solution-header__inner { + margin: 0 var(--spacer-element-08); + } + .solution-header .solution-header__inner .solution-header__col-3 { display: block; max-width: 225px; @@ -229,15 +376,35 @@ body.microsites.header-visible main { top: calc(var(--spacer-element-02) * -1); right: var(--spacer-layout-036); } + + .solution-header-wrapper.is-sticky .solution-header .solution-header__inner .solution-header__col-3 { + display: none; + } + + .solution-header.navattic .solution-header__inner[aria-expanded='true'] .solution-header__col-3, + .solution-header.navattic .solution-header__inner[aria-expanded='false'] .solution-header__col-3, + .solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner[aria-expanded='true'] .solution-header__col-3, + .solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner[aria-expanded='false'] .solution-header__col-3 { + display: flex; + flex-direction: row; + gap: var(--gap-16); + position: unset; + background: unset; + width: unset; + align-items: unset; + border-top: unset; + padding: unset; + max-width: unset; + } + + .solution-header.navattic .solution-header__inner .nav-hamburger, .solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .nav-hamburger { + display: none; + } /* Sticky - Solution Header */ .solution-header-wrapper.is-sticky .solution-header .solution-header__inner .solution-header__col-1 { margin: var(--spacer-element-05) var(--spacer-element-08); } - - .solution-header-wrapper.is-sticky .solution-header .solution-header__inner .solution-header__col-3 { - display: none; - } } /* Desktop */ @@ -279,6 +446,10 @@ body.microsites.header-visible main { height: var(--spacer-layout-04); } + .solution-header.navattic .solution-header__inner { + margin: unset; + } + .solution-header .solution-header__inner .solution-header__col-1 { margin: 0; } @@ -348,4 +519,8 @@ body.microsites.header-visible main { height: var(--spacer-element-09); width: unset; } + + .solution-header-wrapper .solution-header.navattic .icon svg, .solution-header-wrapper.is-sticky .solution-header.navattic .icon svg { + height: var(--spacer-layout-04); + } } \ No newline at end of file diff --git a/blocks/solution-header/solution-header.js b/blocks/solution-header/solution-header.js index d50b8489..4c4632e0 100644 --- a/blocks/solution-header/solution-header.js +++ b/blocks/solution-header/solution-header.js @@ -127,7 +127,7 @@ export default function decorate(block) { }); }); - const navbar = document.querySelector('.solution-header__col-2'); + const navbar = document.querySelector(`.${blockName}__col-2`); window.addEventListener('scroll', () => { // Find the selected navigation item const selectedNavItem = navbar.querySelector('a.active'); @@ -153,4 +153,22 @@ export default function decorate(block) { // Insert the new div elements before and after the target div navbar.insertBefore(gradientLeft, navbar.firstChild); navbar.appendChild(gradientRight); + + // hamburger for mobile + const findNavattic = document.querySelector('.navattic'); + if (findNavattic) { + const nav = document.querySelector(`.${blockName}__inner`); + const hamburger = createTag('a', { + class: 'nav-hamburger', role: 'button', tabindex: '0', 'aria-label': 'Menu', + }); + hamburger.innerHTML = '
'; + hamburger.addEventListener('click', () => { + const expanded = nav.getAttribute('aria-expanded') === 'true'; + document.body.style.overflowY = expanded ? '' : 'hidden'; + nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); + }); + nav.append(hamburger); + nav.setAttribute('aria-expanded', 'false'); + block.append(nav); + } } diff --git a/icons/navattic-hamburger-close.svg b/icons/navattic-hamburger-close.svg new file mode 100644 index 00000000..9d555b14 --- /dev/null +++ b/icons/navattic-hamburger-close.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/icons/navattic-hamburger.svg b/icons/navattic-hamburger.svg new file mode 100644 index 00000000..799e73da --- /dev/null +++ b/icons/navattic-hamburger.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/scripts/delayed.js b/scripts/delayed.js index b9643f56..3f887e09 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -59,6 +59,16 @@ if (document.querySelector('#podcast-container-id')) { } } +// Check if the element with id 'navattic-iframe' exists in the document +if (document.querySelector('#navattic-iframe')) { + const navatticIframeURL = document.querySelector('#navattic-iframe')?.src; + if (navatticIframeURL) { + loadScript(navatticIframeURL, { + type: 'text/javascript', + }); + } +} + // Adobe Target window.targetGlobalSettings = { bodyHidingEnabled: false, diff --git a/scripts/scripts.js b/scripts/scripts.js index affff0f5..261958ee 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -974,7 +974,7 @@ async function loadLazy(doc) { const element = hash ? main.querySelector(hash) : false; if (hash && element) element.scrollIntoView(); - if (!locationCheck('block-library') && !locationCheck('quick-links') && !locationCheck('campaigns')) { + if (!locationCheck('block-library') && !locationCheck('quick-links') && !locationCheck('campaigns') && !(getMetadata('template') === 'navattic')) { loadHeader(doc.querySelector('header')); loadFooter(doc.querySelector('footer')); await buildBreadcrumb();