diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index cc5f4fa5..16a43370 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -15,14 +15,16 @@ main .hero { } main .hero h1 { - max-width: 1200px; - margin-left: auto; - margin-right: auto; + line-height: 1.2; + padding: 0; color: white; + font-size: 44px; + text-shadow: 0 0 6px rgba(0,0,0,50%); } main .hero picture { position: absolute; + height : 310px; z-index: -1; top: 0; left: 0; @@ -37,3 +39,7 @@ main .hero img { width: 100%; height: 100%; } + +main .hero a:hover { + color: white; +} diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index e69de29b..b9bcab3f 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -0,0 +1,23 @@ +export default function decorate() { + const heroClass = document.getElementsByClassName('hero block'); + heroClass[0].children[0].setAttribute('class', 'outer'); + heroClass[0].children[0].children[0].setAttribute('class', 'vertical'); + const heroDiv = heroClass[0].children[0].children[0]; + const pTags = heroDiv.getElementsByTagName('p'); + let innerElements = ''; + for (let i = 0; i < pTags.length; i += 1) { + if (pTags[i].outerHTML.includes('class')) { + innerElements += pTags[i].innerHTML.replace('class="button"', 'style="background-color:#000;" class="hs-button" target="_blank"'); + } else if (i === 1) { + const heroTitle = pTags[i].outerHTML.replace(//g, ''); + innerElements += heroTitle.replace(/<\/p>/g, '
'); + } else if (i === 2) { + const heroDescription = pTags[i].outerHTML.replace(//g, ''); + innerElements += heroDescription.replace(/<\/p>/g, '
'); + } else { + const heroImage = pTags[i].outerHTML.replace(//g, ''); + innerElements += heroImage.replace(/<\/p>/g, '
'); + } + } + heroDiv.innerHTML = `

${innerElements}

`; +} diff --git a/scripts/delayed.js b/scripts/delayed.js index 4f632597..5a5e663b 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -4,4 +4,33 @@ import { sampleRUM } from './aem.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); -// add more delayed functionality here +// google tag manager -start +function loadGTM() { + const scriptTag = document.createElement('script'); + scriptTag.innerHTML = ` + let gtmId = 'GTM-MLWV3QQ'; + // googleTagManager + (function (w, d, s, l, i) { + w[l] = w[l] || []; + w[l].push({ + 'gtm.start': + new Date().getTime(), event: 'gtm.js' + }); + var f = d.getElementsByTagName(s)[0], + j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; + j.async = true; + j.src = + 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; + f.parentNode.insertBefore(j, f); + })(window, document, 'script', 'dataLayer', gtmId); + `; + document.head.prepend(scriptTag); +} +// google tag manager -end + +if ( + !window.location.hostname.includes('localhost') + && !document.location.hostname.includes('.hlx.page') +) { + loadGTM(); +} diff --git a/styles/Typo.css b/styles/Typo.css index 4cffaf94..66414457 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -107,12 +107,11 @@ url("../fonts/ald-icons.svg?dgljk#ald-icons") format("svg") } - -.img-colorbox-popup::after,[class*=" icon-"],[class^="icon-"] { +.img-colorbox-popup::after, +[class*=" icon-"], +[class^="icon-"] { speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-family: ald-icons!important; + font-family: ald-icons !important; font-style: normal; font-variant: normal; font-weight: 400; @@ -619,6 +618,7 @@ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; + margin-right: .4em } input[type="number"]::-webkit-inner-spin-button, @@ -676,3 +676,507 @@ textarea { select { padding: 0.4em 0.6em; } + +#hs-pwd-widget-password { + height: auto !important; + margin: 5px 0 !important +} + +input[type="email"]:focus, +input[type="number"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="text"]:focus +{ + border-color: #ec8f2d; + outline: none +} + +select,select:focus, +textarea:focus { + padding: .4em .6em; + border-color: #ec8f2d; + outline: none +} + +.blog-pagination a, +.button, +.cta_button, +.hs-button, +.readmore, +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + background-color: #ec8f2d; + border-radius: 5px; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: Brown-Ald, Helvetica, Arial, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 100%; + margin: 0; + padding: .8em 1.3em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: background .3s; + vertical-align: middle; + width: auto +} + +.blog-pagination a:hover, +.button:hover, +.cta_button:hover, +.hs-button:hover, +.readmore:hover, +button:hover, +input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover { + background-color: #fff; + color: #ec8f2d; + text-decoration: none +} + +body.red #content-wrapper button, +body.red .blog-pagination a, +body.red .button, +body.red .cta_button, +body.red .hs-button, +body.red .readmore, +body.red input[type="button"], +body.red input[type="reset"], +body.red input[type="submit"] { + background-color: #d1222b; + border-color: #d1222b; + color: #fff +} + +body.red #content-wrapper button:hover, +body.red .blog-pagination a:hover, +body.red .button:hover, +body.red .cta_button:hover, +body.red .hs-button:hover, +body.red .readmore:hover, +body.red input[type="button"]:hover, +body.red input[type="reset"]:hover, +body.red input[type="submit"]:hover { + background-color: #fff; + color: #d1222b +} + +.button.green, +body.green #content-wrapper button, +body.green .blog-pagination a, +body.green .button, +body.green .cta_button, +body.green .hs-button, +body.green .readmore, +body.green input[type="button"], +body.green input[type="reset"], +body.green input[type="submit"] { + background-color: #78a12e; + border-color: #78a12e; + color: #fff +} + +.button.green:hover, +body.green #content-wrapper button:hover, +body.green .blog-pagination a:hover, +body.green .button:hover, +body.green .cta_button:hover, +body.green .hs-button:hover, +body.green .readmore:hover, +body.green input[type="button"]:hover, +body.green input[type="reset"]:hover, +body.green input[type="submit"]:hover { + background-color: #fff; + color: #78a12e +} + +body.blue #content-wrapper button, +body.blue .blog-pagination a, +body.blue .button, +body.blue .cta_button, +body.blue .hs-button, +body.blue .readmore, +body.blue input[type="button"], +body.blue input[type="reset"], +body.blue input[type="submit"] { + background-color: #0097ca; + border-color: #0097ca; + color: #fff +} + +body.blue #content-wrapper button:hover, +body.blue .blog-pagination a:hover, +body.blue .button:hover, +body.blue .cta_button:hover, +body.blue .hs-button:hover, +body.blue .readmore:hover, +body.blue input[type="button"]:hover, +body.blue input[type="reset"]:hover, +body.blue input[type="submit"]:hover { + background-color: #fff; + color: #0097ca +} + +.button.grey, +body.grey #content-wrapper button, +body.grey .blog-pagination a, +body.grey .button, +body.grey .cta_button, +body.grey .hs-button, +body.grey .readmore, +body.grey input[type="button"], +body.grey input[type="reset"], +body.grey input[type="submit"] { + background-color: #76797f; + border-color: #76797f; + color: #fff +} + +.button.grey:hover, +body.grey #content-wrapper button:hover, +body.grey .blog-pagination a:hover, +body.grey .button:hover, +body.grey .cta_button:hover, +body.grey .hs-button:hover, +body.grey .readmore:hover, +body.grey input[type="button"]:hover, +body.grey input[type="reset"]:hover, +body.grey input[type="submit"]:hover { + background-color: #fff; + color: #76797f +} + +body.purple #content-wrapper button, +body.purple .blog-pagination a, +body.purple .button, +body.purple .cta_button, +body.purple .hs-button, +body.purple .readmore, +body.purple input[type="button"], +body.purple input[type="reset"], +body.purple input[type="submit"] { + background-color: #6f2a8e; + border-color: #6f2a8e; + color: #fff +} + +body.purple #content-wrapper button:hover, +body.purple .blog-pagination a:hover, +body.purple .button:hover, +body.purple .cta_button:hover, +body.purple .hs-button:hover, +body.purple .readmore:hover, +body.purple input[type="button"]:hover, +body.purple input[type="reset"]:hover, +body.purple input[type="submit"]:hover { + background-color: #fff; + color: #6f2a8e +} + +#sidebar .cta_button, +.cta_button_img, +.cta_button_img:hover { + background: none !important; + border: 0 !important; + padding: 0 !important; + transition: none +} + +.table { + display: table; + table-layout: fixed; + width: 100% +} + +.table .row { + display: table-row +} + +.responsive-embed { + display: block; + height: 0; + overflow: hidden; + padding-bottom: 56.25%; + position: relative +} + +.responsive-embed embed, +.responsive-embed iframe, +.responsive-embed img, +.responsive-embed object { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100% +} + +.cols-row, +.cols2-row, +.cols3-row { + clear: both; + display: block; + width: 100% +} + +.cols2-row .col1, +.half-left { + float: left; + width: 47% +} + +.cols2-row .col2, +.half-right { + float: right; + width: 47% +} + +.cols-70-30 .col1 { + width: 68% +} + +.cols-30-70 .col1, +.cols-70-30 .col2 { + width: 26% +} + +.cols-30-70 .col2 { + width: 68% +} + +.cols3-row .col1, +.cols3-row .col2, +.cols3-row .col3 { + display: inline; + float: left; + margin-left: 5%; + width: 30% +} + +.cols3-row .col1 { + margin-left: 0 +} + +.col1>h2:first-child, +.col1>h3:first-child, +.col2>h2:first-child, +.col2>h3:first-child, +.col3>h2:first-child, +.col3>h3:first-child { + margin-top: 0; + padding-top: 0 +} + +.flexcols2 .col { + padding-top: 2em; + width: 47% +} + +.flexcols2 .col:nth-child(odd) { + clear: both; + float: left +} + +.flexcols2 .col:nth-child(2n) { + float: right +} + +.mmg-rollover-menu .col { + padding-top: 50px +} + +.flexcols2 .col:first-child, +.flexcols2 .col:nth-child(2), +.flexcols2 .item1, +.flexcols2 .item2, +.flexcols3 .item1, +.flexcols3 .item2, +.flexcols3 .item3, +.mmg-rollover-menu .item1 { + padding-top: 0 +} + +.flexcols2 .item1, +.flexcols2 .item3, +.flexcols2 .item5, +.flexcols2 .item7, +.flexcols2 .item9 { + clear: both; + float: left +} + +.flexcols2 .item10, +.flexcols2 .item2, +.flexcols2 .item4, +.flexcols2 .item6, +.flexcols2 .item8 { + float: right +} + +.flexcols3 .col { + float: left; + margin-left: 5%; + width: 30% +} + +.flexcols3 .col:nth-child(3n+1) { + clear: both; + margin-left: 0 +} + +.img-half-right, +.img-medium-right, +.img-small-right { + display: block; + float: right; + margin: .4em 0 1em 4%; + position: relative; + z-index: 2 +} + +.img-half-left, +.img-medium-left, +.img-small-left { + display: block; + float: left; + margin: .4em 4% 1em 0; + position: relative; + z-index: 2 +} + +.img-half-left, +.img-half-right { + width: 45% +} + +.img-medium-left, +.img-medium-right { + width: 30% +} + +.img-small-left, +.img-small-right { + width: 15% +} + +.img-full-width, +.img-half-left img, +.img-half-right img, +.img-medium-left img, +.img-medium-right img, +.img-small-left img, +.img-small-right img { + display: block; + width: 100% +} + +.img-full-width { + margin: 0 0 .5em +} + +.img-colorbox-popup { + border-radius: 5px; + box-shadow: 0 2px 8px rgba(0 0 0 / 10%); + box-sizing: border-box; + cursor: pointer; + margin: .6em 0; + padding: 10px +} + +.img-colorbox-popup::after { + clear: both; + color: #e46b29; + display: block; + padding-top: 5px; + text-align: right +} + +.img-colorbox-popup.half-right { + margin-left: 3% +} + +.img-colorbox-popup.half-left { + margin-right: 3% +} + +#hs_form_target_form, +.hs-form { + clear: both; + width: 100% +} + +.hs-form-field, +.hs_submit { + display: block; + padding: .5em 0 .8em; + width: 100% +} + +.block.subscribe .hs_submit { + padding-bottom: 0 +} + +.hs-field-desc { + color: #999; + font-size: .9em; + line-height: normal +} + +.hs-form input[type="email"], +.hs-form input[type="password"], +.hs-form input[type="search"], +.hs-form input[type="tel"], +.hs-form input[type="text"], +.hs-form select, +.hs-form textarea { + width: 100% !important +} + +.hs-form fieldset { + background: none; + max-width: none !important; + width: 100% +} + +.hs-form .hsformerror { + background: #f72e00; + border: 0; + color: #fff; + font-size: .9em; + padding: .5em 1.5em .5em 1em; + z-index: 99 +} + +.hs-form .hsformerror .close-form-error { + color: #fff !important; + font-size: 1em !important; + right: 5px; + top: 0 +} + +.hs-form .hsformerror p { + padding: 0 +} + +.hs-form .hsformerror em { + border-color: #f72e00 transparent transparent +} + +form.hs-form .hs-input[type="checkbox"] { + width: auto !important +} + +.hs-error-msgs { + color: red; + font-size: .9em; + line-height: normal +} \ No newline at end of file