feat(leadspace): add leadspace brand logo style (#309)

* feat(leadspace): add leadspace brand logo style * feat(leadspace): add leadspace brand logo height for mobile and tablet. * feat(leadspace): leadspace brand log line height adjustment. * feat(leadspace): add primary button arrow icon. * feat(leadspace): tertiary link issue. * feat(leadspace): fix tertiary link line-height to be consistent --------- Co-authored-by: Putra Bonaccorsi <[email protected]>
hlxsites · Aug 10, 2023 · f4ea97e · f4ea97e
1 parent a4fece3
commit f4ea97e
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 9 deletions.
diff --git a/blocks/leadspace/leadspace.css b/blocks/leadspace/leadspace.css
@@ -29,6 +29,11 @@
   clip-path: inset(50% 0 0 0 round 50% 50% 0 0);
 }
 
+.leadspace.brand-logo > div > div svg{
+  height: 45px;
+  width: auto;
+}
+
 .leadspace h1 {
   font-family: var(--serif-font);
   line-height: var(--line-height-120);
@@ -37,6 +42,11 @@
   margin: 0 0 var(--spacer-element-05);
 }
 
+.leadspace.brand-logo h1 {
+  font-size: var(--font-size-32);
+  margin: var(--spacer-element-08) 0 var(--spacer-element-05);
+}
+
 .leadspace.event h1 {
   font-size: var(--font-size-32);
 }
@@ -141,6 +151,14 @@ main div.leadspace-wrapper {
   line-height: var(--line-height-120);
 }
 
+.leadspace.brand-logo > div:first-child > div:nth-child(1) > p:last-of-type{
+  max-width: 303px;
+}
+
+.leadspace.brand-logo > div:first-child > div:nth-child(2){
+  max-width: 328px;
+}
+
 .leadspace.video > div:first-child > div:nth-child(2) {
   display: flex;
   flex-direction: row;
@@ -189,6 +207,20 @@ main div.leadspace-wrapper {
   margin: 0;
 }
 
+.leadspace.brand-logo .button-group .button-container a{
+  font-weight: var(--font-weight-regular);
+  height: unset;
+}
+
+.leadspace.brand-logo .button-group .button-container a.tertiary {
+  line-height: var(--line-height-120);
+  font-weight: var(--font-weight-medium);
+}
+
+.leadspace.brand-logo .button-group .button-container:nth-child(3){
+  margin-top: var(--spacer-element-05);
+}
+
 /* Secondary Button */
 .leadspace .button-group .button-container > em > a.button.secondary:hover,
 .leadspace .button-group .button-container > em > a.button.secondary:active {
@@ -361,11 +393,24 @@ main div.leadspace-wrapper {
     max-width: 420px;
   }
 
+  .leadspace.brand-logo > div:first-child > div:nth-child(1) > p:last-of-type {
+    max-width: 336px;
+  }
+
+  .leadspace.brand-logo .button-group .button-container a{
+    font-weight: var(--font-weight-regular);
+  }
+
   .leadspace > div:first-child > div:nth-child(2) {
     display: flex;
     flex-direction: column;
   }
 
+  .leadspace.brand-logo > div:first-child > div:nth-child(2) {
+    margin-left: var(--spacer-element-07);
+    max-width: 336px;
+  }
+
   .leadspace > div:first-child > div:nth-child(2) picture {
     margin-top: 48px;
   }
@@ -389,6 +434,10 @@ main div.leadspace-wrapper {
     width: 334px;
   }
 
+  .leadspace.brand-logo > div:first-child > div:nth-child(1) {
+    margin-bottom: var(--spacer-layout-05);
+  }
+
   .leadspace.video > div:first-child > div:nth-child(2) {
     display: flex;
     flex-direction: column;
@@ -446,11 +495,21 @@ main div.leadspace-wrapper {
     font-size: var(--font-size-21);
   }
 
+  .leadspace.brand-logo > div > div svg{
+    height: 55px;
+    width: auto;
+  }
+
   .leadspace h1 {
     font-size: var(--font-size-64);
     margin: 0 0 var(--spacer-element-07);
   }
 
+  .leadspace.brand-logo h1{
+    font-size: var(--font-size-45);
+    margin: var(--spacer-element-10) 0 var(--spacer-element-07);
+  }
+
   .leadspace.event h1 {
     font-size: var(--font-size-45);
   }
@@ -482,6 +541,23 @@ main div.leadspace-wrapper {
     width: 552px;
   }
 
+  .leadspace.brand-logo > div:first-child > div:nth-child(2){
+    max-width: 552px;
+  }
+
+  .leadspace.brand-logo .button-group .button-container:nth-child(3){
+    margin-left: var(--spacer-element-05);
+    margin-top: unset;
+  }
+
+  .leadspace > div:first-child > div:nth-child(1) > p:first-child {
+    font-size: var(--font-size-14);
+  }
+
+  .leadspace.brand-logo > div:first-child > div:nth-child(1) > p:last-of-type{
+    max-width: 420px;
+  }
+
   .leadspace:not(.document) > div:first-child > div:nth-child(1) {
     width: 552px;
     padding: 96px 0;
@@ -510,10 +586,6 @@ main div.leadspace-wrapper {
     margin-top: var(--spacer-layout-06);
   }
 
-  .leadspace > div:first-child > div:nth-child(1) > p:first-child {
-    font-size: var(--font-size-14);
-  }
-
   .leadspace.video > div:first-child > div:nth-child(2) {
     width: 45%;
     height: 850px;
@@ -530,6 +602,15 @@ main div.leadspace-wrapper {
     align-items: center;
   }
 
+  .leadspace.brand-logo .button-group {
+    margin-top: var(--spacer-element-10);
+  }
+
+  .leadspace.brand-logo .button-group .button-container a {
+    line-height: var(--line-height-160);
+    letter-spacing: var(--letter-spacing-001-em);
+  }
+
   .leadspace.video .video-wrapper {
     clip-path: circle(60% at 105% 42%);
     margin-top: 0;
@@ -576,7 +657,7 @@ main div.leadspace-wrapper {
   }
 
   .section.leadspace-container .leadspace.document {
+    padding-bottom: var(--spacer-layout-06);
     padding-top: var(--spacer-layout-06);
-    padding-bottom: var(--spacer-layout-07);
   }
 }
diff --git a/icons/arrow.svg b/icons/arrow.svg