Merge branch 'NXSTAGE-979-hero-improvements' into 'development'

NXSTAGE-979: Hero improvements

See merge request julkiset-sivut/design-system-lib!132

src/components/heading/heading.scss

@@ -235,13 +235,6 @@ h1.hy-heading__introduction {
       @include font-size(56px, 56px);
       letter-spacing: -1.8px;
     }
-
-    @include breakpoint($xlarge) {
-      // > 1400px X-Large
-      //@todo check
-      @include font-size(72px, 72px);
-      letter-spacing: -2.5px;
-    }
   }
 }
 

src/components/hy-hero/hy-hero.scss

@@ -13,11 +13,15 @@
   }
 
   @include breakpoint($xlarge) {
-    margin-left: 0;
+    margin-left: -12px;
     margin-right: 0;
     margin-top: 24px;
   }
 
+  @include breakpoint(1648px) {
+    margin-left: 0;
+  }
+
   &--blue {
     .hy-hero__content-container,
     .hy-hero__spacer-box {
@@ -122,46 +126,37 @@
 
     @include breakpoint($wide) {
       background-color: var(--grayscale-white);
-      border-bottom: 1px solid rgba(16, 126, 171, 0.1);
-      border-top: 1px solid rgba(16, 126, 171, 0.1);
-      box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1);
-      padding: 6px 0;
+      box-shadow: inset 0 -8px 8px -8px rgba(14, 104, 139, 0.1);
+      padding-bottom: 8px;
     }
 
     @include breakpoint($extrawide) {
-      box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1), inset 0 6px 6px -6px rgba(14, 104, 139, 0.1);
-      margin: 0;
+      margin-left: 0;
+      margin-right: 0;
     }
 
     @include breakpoint($xlarge) {
-      box-shadow: inset 0 -12px 12px -12px rgba(14, 104, 139, 0.1), inset 0 12px 12px -12px rgba(14, 104, 139, 0.1);
+      box-shadow: inset 0 -24px 24px -24px rgba(14, 104, 139, 0.1);
       margin-left: -32px;
       margin-right: -32px;
-      padding: 12px 0;
+      padding-bottom: 24px;
     }
 
-    .hy-hero__content-container {
-      @include breakpoint(max-width 959px) {
-        padding-bottom: 0;
-      }
-
+    .hy-hero__container {
       @include breakpoint($extrawide) {
-        padding-left: 32px; // Original 24px + 8px
-        padding-right: 8px;
+        margin-left: 8px;
+        margin-right: 8px;
       }
 
       @include breakpoint($xlarge) {
-        padding-left: 0;
+        margin-left: 32px;
+        margin-right: 32px;
       }
     }
 
-    .hy-hero__image-container {
-      @include breakpoint($wide) {
-        padding: 0;
-      }
-
-      @include breakpoint($extrawide) {
-        padding-right: 8px;
+    .hy-hero__content-container {
+      @include breakpoint(max-width 959px) {
+        padding-bottom: 0;
       }
     }
 
@@ -214,6 +209,7 @@
     border-bottom: 1px solid rgba(16, 126, 171, 0.1);
     box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1);
     padding-bottom: 2rem;
+    position: relative;
 
     @include breakpoint($narrow) {
       box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
@@ -235,6 +231,32 @@
       margin-top: 0;
     }
 
+    &:before,
+    &:after {
+      @include breakpoint($wide) {
+        content: '';
+        height: 80px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+    }
+
+    &:after {
+      @include breakpoint($wide) {
+        box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);
+        bottom: 0;
+      }
+    }
+
+    &:before {
+      @include breakpoint($wide) {
+        box-shadow: inset 0 20px 20px -20px rgba(14, 104, 139, 0.1);
+        top: 0;
+      }
+    }
+
     .hy-hero__content-container {
       @include breakpoint(max-width 959px) {
         padding-bottom: 0;
@@ -256,12 +278,6 @@
       }
     }
 
-    .hy-hero__spacer-box {
-      @include breakpoint($wide) {
-        box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1), inset 0 20px 20px -20px rgba(14, 104, 139, 0.1);
-      }
-    }
-
     .hy-hero__content-container,
     .hy-hero__spacer-box {
       background-color: var(--grayscale-slightly-gray);
@@ -304,6 +320,10 @@
     .hy-hero__description {
       background-color: var(--grayscale-slightly-gray);
       color: var(--grayscale-black);
+
+      @include breakpoint($extrawide) {
+        max-width: 34%;
+      }
     }
   }
 }
@@ -377,11 +397,21 @@
     padding: 80px 0;
   }
 
-  @include breakpoint($fullhd) {
+  @include breakpoint(1920px) {
     min-height: 600px;
   }
 }
 
+.hy-hero__content {
+  @include breakpoint($xlarge) {
+    padding-left: 12px;
+  }
+
+  @include breakpoint(1648px) {
+    padding-left: 0;
+  }
+}
+
 .hy-hero__spacer-box {
   display: none;
 
@@ -476,16 +506,16 @@
 
   @include breakpoint($wide) {
     margin-top: -8px;
-    max-width: 40.21%;
-    padding: 16px 40px 20px 0;
+    max-width: 39%;
+    padding: 16px 20px 20px 0;
   }
 
   @include breakpoint($extrawide) {
     @include font-size(18px);
     letter-spacing: -0.16px;
     line-height: 26px;
-    max-width: 40.13%;
-    padding: 28px 40px 32px 0;
+    max-width: 37%;
+    padding: 28px 20px 32px 0;
   }
 }