Add new hero variant styles

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

@@ -209,6 +209,103 @@
       color: var(--grayscale-black);
     }
   }
+
+  &--fp_white {
+    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;
+
+    @include breakpoint($narrow) {
+      box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
+      padding-bottom: 40px;
+    }
+
+    @include breakpoint($wide) {
+      border-top: 1px solid rgba(16, 126, 171, 0.1);
+      padding: 0;
+    }
+
+    @include breakpoint($extrawide) {
+      margin-left: -2rem;
+      margin-right: -2rem;
+      margin-top: 0;
+    }
+
+    @include breakpoint($xlarge) {
+      margin-top: 0;
+    }
+
+    .hy-hero__content-container {
+      @include breakpoint(max-width 959px) {
+        padding-bottom: 0;
+      }
+
+      @include breakpoint($extrawide) {
+        padding-left: 32px; // Original 24px + 8px
+        padding-right: 8px;
+      }
+
+      @include breakpoint($xlarge) {
+        padding-left: 0;
+      }
+    }
+
+    .hy-hero__image-container {
+      @include breakpoint($wide) {
+        padding: 0;
+      }
+    }
+
+    .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);
+    }
+
+    .hy-hero__title {
+      &:not(.hy-hero__title--overlay) {
+        span {
+          color: var(--grayscale-black);
+        }
+      }
+
+      h1 {
+        color: var(--grayscale-black);
+      }
+
+      &--overlay {
+        span {
+          background-color: var(--grayscale-slightly-gray);
+          box-shadow: 24px 0 0 var(--grayscale-slightly-gray), -24px 0 0 var(--grayscale-slightly-gray);
+          color: var(--grayscale-slightly-gray);
+          display: inline;
+          position: relative;
+
+          @include breakpoint($narrow) {
+            box-shadow: 48px 0 0 var(--grayscale-slightly-gray), -48px 0 0 var(--grayscale-slightly-gray);
+          }
+
+          @include breakpoint($wide) {
+            box-shadow: 32px 0 0 var(--grayscale-slightly-gray), 0 0 0 var(--grayscale-slightly-gray);
+          }
+
+          @include breakpoint($extrawide) {
+            box-shadow: 40px 0 0 var(--grayscale-slightly-gray), 0 0 0 var(--grayscale-slightly-gray);
+          }
+        }
+      }
+    }
+
+    .hy-hero__description {
+      background-color: var(--grayscale-slightly-gray);
+      color: var(--grayscale-black);
+    }
+  }
 }
 
 .hy-hero__container {

src/global/_colors.scss

@@ -7,6 +7,7 @@
   --link-blue: #0479a5;
   --link-disabled: #767676;
   --grayscale-white: #fff;
+  --grayscale-slightly-gray: #fefefe;
   --grayscale-light: #f8f8f8;
   --grayscale-medium: #d2d2d2;
   --grayscale-background-box: #f5f5f5;