feat(headshot-list-marketo): add Headshot Link block as fragment below body text area - 774 & 859

blocks/headshot-list/headshot-list.css

@@ -0,0 +1,124 @@
+/* Headshot List */
+.headshot-list-wrapper {
+  margin-bottom: var(--spacer-layout-05);
+}
+
+.headshot-list-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.headshot-list__item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  max-width: var(--text-max-container);
+  gap: var(--spacer-element-08);
+  margin-bottom: var(--spacer-layout-02);
+}
+
+.headshot-list__item:last-child {
+  margin-bottom: 0;
+}
+
+.headshot-list__image {
+  width: var(--spacer-layout-05);
+}
+
+.headshot-list__image img {
+  width: var(--spacer-layout-05);
+  height: var(--spacer-layout-05);
+  object-fit: cover;
+  border-radius: 50%;
+  border: 1px solid var(--neutral-sand);
+}
+
+.headshot-list__content {
+  max-width: 552px;
+  width: 75%;
+}
+
+.headshot-list__content .headshot-list__title {
+  font-family: var(--sans-serif-font-light);
+  font-size: var(--font-size-18);
+  font-style: normal;
+  font-weight: 300;
+  margin: 0;
+}
+
+.headshot-list__content h4 {
+  font-family: var(--sans-serif-font-regular);
+  font-size: var(--font-size-16);
+  font-style: normal;
+  font-weight: 300;
+  margin: var(--spacer-element-03) 0 0;
+}
+
+.headshot-list__content p {
+  font-size: var(--font-size-16);
+  margin: var(--spacer-element-07) 0 0 0;
+}
+
+.headshot-list__content hr {
+  display: block;
+  margin: var(--spacer-element-08) 0 0;
+  border: 0;
+  height: 1px;
+  width: 100%;
+  background-color: var(--neutral-sand);
+}
+
+.headshot-list__content .headshot-list__socials {
+  margin-top: var(--spacer-element-05);
+}
+
+.headshot-list__content .headshot-list__socials a {
+  display: inline-block;
+  margin-right: var(--spacer-element-05);
+}
+
+.headshot-list__content .headshot-list__socials span.icon {
+  display: block;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border: solid 1px var(--neutral-sand);
+  border-radius: 50%;
+  background-color: var(--neutral-white);
+  background-image: var(--gradient-to-right-white);
+  background-position: 0 0;
+  background-size: 200% auto;
+  transition: all .3s ease-in-out;
+}
+
+.headshot-list__content .headshot-list__socials a:hover span.icon,
+.headshot-list__content .headshot-list__socials a:active span.icon {
+  background-image: var(--gradient-to-right);
+  background-position: 100% 0;
+}
+
+.headshot-list__content .headshot-list__socials span.icon svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.headshot-list__content .headshot-list__socials a:hover span.icon svg *,
+.headshot-list__content .headshot-list__socials a:active span.icon svg * {
+  fill: var(--neutral-white);
+}
+
+/* Desktop */
+@media only screen and (min-width: 1200px) {
+  .headshot-list-wrapper {
+    margin-bottom: var(--spacer-layout-06);
+  }
+
+  .headshot-list__item {
+    margin-bottom: var(--spacer-layout-04);
+  }
+
+  .headshot-list__content .headshot-list__title {
+    font-size: var(--font-size-24);
+  }
+}

blocks/headshot-list/headshot-list.js

@@ -0,0 +1,19 @@
+import { lookupPeople, createHeadshotList } from '../../scripts/scripts.js';
+
+export default async function decorate(block) {
+  [...block.children].forEach(async (element) => {
+    const pathnames = [...element.querySelectorAll('a')].map((a) => {
+      const url = new URL(a.href);
+      if (url.hostname.endsWith('.page') || url.hostname.endsWith('.live') || url.hostname.endsWith('merative.com') || url.hostname.startsWith('localhost')) return url.pathname;
+      return a.href;
+    });
+
+    block.textContent = '';
+    const pageList = await lookupPeople(pathnames);
+    if (pageList.length) {
+      pageList.forEach((row) => {
+        block.append(createHeadshotList(row, 'headshot-list__item'));
+      });
+    }
+  });
+}

blocks/leadspace/leadspace.css

@@ -52,6 +52,7 @@
 }
 
 .leadspace h4:first-of-type {
+  font-family: var(--sans-serif-font-medium);
   font-size: var(--font-size-11);
   letter-spacing: .2em;
   line-height: var(--line-height-120);
@@ -439,6 +440,7 @@ main div.leadspace-wrapper {
 
   .leadspace:not(.document) > div:first-child > div:nth-child(1) {
     width: 334px;
+    padding: var(--spacer-layout-05) 0;
   }
 
   .leadspace.brand-logo > div:first-child > div:nth-child(1) {
@@ -582,7 +584,7 @@ main div.leadspace-wrapper {
 
   .leadspace:not(.document) > div:first-child > div:nth-child(1) {
     width: 552px;
-    padding: 96px 0;
+    padding: var(--spacer-layout-06) 0;
     margin: auto auto auto 0;
   }
 

blocks/marketo/marketo.css

@@ -2,14 +2,6 @@
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable no-descending-specificity */
 
-.section.marketo-container .default-content-wrapper h2 {
-  margin-bottom: 80px;
-}
-
-.section.marketo-container .default-content-wrapper h3 {
-  margin-bottom: var(--spacer-layout-02)
-}
-
 .section.marketo-container.multiple .marketo-wrapper {
   display: flex;
   flex-direction: column;
@@ -60,53 +52,6 @@
   margin: 0 0 var(--spacer-element-10);
 }
 
-/* Read more/less button */
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more {
-  border-bottom: 1px solid var(--neutral-sand);
-}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacer-element-03);
-  font-weight: 700;
-  margin-bottom: var(--spacer-layout-02);
-  cursor: pointer;
-}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a:hover,
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a:active {
-  background: transparent;
-  color: var(--neutral-carbon);
-  /* stylelint-disable-line */
-  -webkit-text-fill-color: unset;}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > a {
-  margin-top: var(--spacer-layout-06);
-}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a::after {
-  content: '';
-  width: 16px;
-  height: 16px;
-  background: url('../../icons/arrow-up-black.svg') no-repeat;
-  transform: rotate(180deg);
-}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > a::after {
-  transform: unset;
-}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > p:first-of-type ~ *:not(a) {
-  display: none;
-}
-
-.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > p:first-of-type ~ *:not(a) {
-  display: revert;
-}
-
 .marketo {
   width: 100%;
 }
@@ -129,6 +74,7 @@
   letter-spacing: .01em !important;
   line-height: 160% !important;
   width: 100% !important;
+  margin: 0 0 var(--spacer-element-07) 0;
 }
 
 .mktoForm .mktoFieldWrap .mktoHtmlText p {
@@ -140,6 +86,10 @@
   width: 100% !important;
 }
 
+.mktoForm .mktoFieldWrap .mktoHtmlText a {
+  padding: 0 !important;
+}
+
 .mktoForm .mktoFormRow {
   clear: both !important;
 }
@@ -162,15 +112,13 @@
 .mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText small {
   float: right;
   font-size: var(--font-size-16);
-  margin-top: 37px;
   text-align: right !important;
 }
 
 .mktoForm .mktoButtonWrap .mktoButton {
   -webkit-box-align: center !important;
   -ms-flex-align: center !important;
   align-items: center !important;
-  background: var(--primary-purple) !important;
   border: 0 !important;
   border-radius: 40px !important;
   box-sizing: border-box !important;
@@ -187,17 +135,17 @@
   margin: 37px 0;
   max-height: 62px !important;
   padding: 11px 16px 11px 24px !important;
-  transition: all .4s ease-in-out !important;
   width: auto !important;
+  background-image: var(--gradient-to-right);
+  background-position: 0 0;
+  background-size: 200% auto;
+  transition: all .4s ease-in-out;
 }
 
 .mktoForm .mktoButtonWrap .mktoButton:active,
 .mktoForm .mktoButtonWrap .mktoButton:hover {
-  /* background-image: -webkit-gradient(linear, right top, left top, from(#fa1e32), to(var(--primary-purple))) !important; */
-  background-image: linear-gradient(270deg, #fa1e32, var(--primary-purple)) !important;
-
-  /* -webkit-transition: all .2s ease-in-out !important; */
-  transition: all .2s ease-in-out !important;
+  border: 2px solid transparent;
+  background-position: 96% 0;
 }
 
 .mktoForm .mktoButtonWrap .mktoButton::after {
@@ -230,7 +178,11 @@
 }
 
 .mktoForm .mktoFormCol .mktoLabel {
-  padding-bottom: var(--spacer-layout-01) !important;
+  padding-bottom: var(--spacer-element-04) !important;
+}
+
+.mktoForm .mktoGutter.mktoHasWidth {
+  height: auto;
 }
 
 .mktoForm .mktoRequiredField .mktoLabel::after {
@@ -244,7 +196,8 @@
 .mktoForm .mktoTextField,
 .mktoForm select.mktoField,
 .mktoForm textarea.mktoField {
-  appearance: none !important;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-appearance: none;
   background: var(--neutral-bone) !important;
   border-color: var(--neutral-carbon) !important;
   border-width: 0 0 1px !important;
@@ -396,6 +349,9 @@ input[type=radio] {
   opacity: 1 !important;
   height: 20px !important;
   width: 20px !important;
+  flex-basis: 20px;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
 .mktoForm select.mktoField[multiple] {
@@ -416,8 +372,9 @@ input[type=radio] {
   display: flex;
   width: auto !important;
   align-items: center;
-  padding: 0.3em;
-  float: left;
+  padding: 0 !important;
+  margin: var(--spacer-element-07) 0;
+  float: left !important;
 }
 
 .mktoForm .mktoRadioList > label {
@@ -426,7 +383,7 @@ input[type=radio] {
   font-size: var(--font-size-16) !important;
   letter-spacing: 0.16px;
   line-height: 160% !important;
-  margin: 0 32px 0 8px !important;
+  margin: 0 var(--spacer-element-07) 0 var(--spacer-element-04) !important;
 }
 
 /* Media queries */