@deriv-web-design/ui 0.1.9 → 0.1.10

package/block-registry.json

@@ -2836,7 +2836,8 @@
       "deriv",
       "dark",
       "search",
-      "help-centre"
+      "help-centre",
+      "navbar"
     ],
     "sectionType": "header",
     "global": false,
@@ -2851,7 +2852,8 @@
       "secondaryButton",
       "leftVisual",
       "rightVisual",
-      "search"
+      "search",
+      "underNavbar"
     ],
     "variants": [
       "visuals",
@@ -2878,7 +2880,8 @@
       "secondaryButton": true,
       "eyebrow": true,
       "parallax": true,
-      "search": true
+      "search": true,
+      "navbarClearance": true
     },
     "imageRoles": [
       "left-visual",
@@ -2960,6 +2963,12 @@
         "required": true,
         "maxLength": 80
       },
+      "underNavbar": {
+        "type": "boolean",
+        "required": false,
+        "description": "Set true when the fixed Navbar sits above this header (header is the first section on the page). Reserves top clearance equal to the navbar's footprint so the centred title does not slide under the fixed pill. Defaults to false.",
+        "default": false
+      },
       "variant": {
         "type": "string",
         "required": true,

package/components.manifest.json

@@ -2014,6 +2014,12 @@
           "required": true,
           "description": "Main heading"
         },
+        "underNavbar": {
+          "type": "boolean",
+          "required": false,
+          "description": "Set to `true` when the fixed `Navbar` is rendered above this header (it is the first section on the page). Reserves top clearance equal to the navbar's footprint so the vertically-centred title never slides under the fixed pill. Defaults to `false` — leave it off when there is no navbar above the header.",
+          "default": false
+        },
         "variant": {
           "type": "HeaderVariant",
           "required": true,

package/dist/index.css

@@ -2834,7 +2834,8 @@
   --hero-body-lh: var(--typography-body-md-line-height);
   --hero-split-padding-top-mobile: var(--spacing-80);
   --hero-split-padding-top-tablet: var(--spacing-96);
-  --hero-split-padding-top-desktop: var(--spacing-96);
+  --hero-split-radius: 1.5rem;
+  --hero-split-min-height: 35.25rem;
   --hero-shrink-radius: 3.5rem;
   --hero-padding-top-mobile: var(--spacing-80);
   --hero-padding-top-tablet: var(--spacing-96);
@@ -2909,19 +2910,18 @@
   gap: var(--spacing-24);
 }
 .hero--split {
+  background-position: left center;
+  border-bottom-left-radius: var(--hero-split-radius);
+  border-bottom-right-radius: var(--hero-split-radius);
   animation: hero-split-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
 }
 @keyframes hero-split-shrink {
   0% {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-shrink-radius);
-    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2978,9 +2978,17 @@
   height: 100%;
   display: block;
 }
+.hero--split .hero__text {
+  gap: 0;
+}
 .hero--split .hero__subtitle {
-  font-size: var(--typography-h4-font-size);
-  line-height: var(--typography-h4-line-height);
+  font-size: var(--typography-h5-font-size);
+  line-height: var(--typography-h5-line-height);
+  font-weight: var(--typography-h5-font-weight);
+}
+.hero--split .hero__description {
+  margin-top: var(--spacing-16);
+  opacity: 1;
 }
 .hero--split .hero__buttons {
   align-items: stretch;
@@ -3204,53 +3212,50 @@
   .hero__inner {
     padding: var(--spacing-48) var(--spacing-32);
   }
+  .hero--split {
+    --hero-split-radius: 4rem;
+  }
   .hero--split .hero__inner {
     max-width: var(--content-width-1280);
-    padding-top: var(--hero-split-padding-top-desktop);
-    padding-bottom: var(--spacing-96);
+    padding-top: 0;
+    padding-bottom: 0;
     padding-left: var(--spacing-32);
     padding-right: var(--spacing-32);
     height: 100vh;
+    min-height: var(--hero-split-min-height);
     justify-content: center;
     align-items: flex-start;
   }
   .hero--split .hero__content {
     flex-direction: column;
-    gap: var(--spacing-32);
+    gap: var(--spacing-24);
     max-width: 600px;
   }
   .hero--split .hero__left {
     width: 100%;
   }
   .hero--split .hero__body {
-    gap: var(--spacing-32);
-  }
-  .hero--split .hero__subtitle {
-    line-height: var(--typography-h5-line-height);
+    gap: var(--spacing-24);
   }
   .hero--split .hero__image-slot {
     position: absolute;
-    top: var(--spacing-72);
-    right: auto;
-    left: 50%;
+    inset: auto -4% -14% auto;
     transform: none;
-    z-index: 4;
+    z-index: 1;
     width: 50%;
-    height: calc(100% - 5px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height: 100%;
+    display: block;
     overflow: visible;
     pointer-events: none;
     max-width: none;
   }
   .hero--split .hero__image-slot img {
     height: 100%;
-    width: auto;
+    width: 100%;
     max-height: none;
     max-width: none;
     object-fit: contain;
-    object-position: center;
+    object-position: 40% 100%;
   }
   .hero--split .hero__buttons {
     flex-direction: row;
@@ -3261,10 +3266,14 @@
   .hero--split .hero__overlay {
     background:
       linear-gradient(
-        to right,
-        var(--hero-dark-bg) 0%,
-        var(--color-opacity-slate-88) 40%,
-        var(--color-opacity-slate-24) 100%);
+        180deg,
+        rgba(0, 0, 0, 0.4) 0%,
+        rgba(255, 255, 255, 0) 12%),
+      linear-gradient(
+        84.29deg,
+        rgba(0, 0, 0, 0.2) 22%,
+        rgba(143, 143, 143, 0.04) 84%,
+        rgba(0, 0, 0, 0) 100%);
   }
   .hero--centered .hero__inner {
     padding-top: var(--hero-padding-top-desktop);
@@ -3318,6 +3327,8 @@
   --header-text-light: var(--color-slate-50);
   --header-dark-min-height: 420px;
   --header-dark-min-height-desktop: 460px;
+  --header-navbar-clearance: 0px;
+  --header-light-min-height: 540px;
   --header-subtitle-size: var(--typography-body-md-font-size);
   --header-subtitle-lh: var(--typography-body-md-line-height);
   --header-subtitle-weight: var(--font-weight-semi-bold);
@@ -3333,10 +3344,13 @@
   box-sizing: border-box;
   overflow: hidden;
   background-color: var(--header-light-bg);
-  min-height: 540px;
+  min-height: calc(var(--header-light-min-height) + var(--header-navbar-clearance));
   display: flex;
   align-items: center;
 }
+.header--under-navbar {
+  --header-navbar-clearance: var(--navbar-height, 4rem);
+}
 .header__grid {
   position: absolute;
   inset: 0;
@@ -3372,12 +3386,12 @@
   max-width: var(--content-width-1280);
   margin: 0 auto;
   box-sizing: border-box;
-  padding: var(--spacing-24) var(--spacing-16);
+  padding: calc(var(--spacing-24) + var(--header-navbar-clearance)) var(--spacing-16) var(--spacing-24);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  min-height: 540px;
+  min-height: calc(var(--header-light-min-height) + var(--header-navbar-clearance));
 }
 .header__content {
   display: flex;
@@ -3463,11 +3477,11 @@
 .header--dark,
 .header--dark-search {
   background-color: var(--header-dark-bg);
-  min-height: var(--header-dark-min-height);
+  min-height: calc(var(--header-dark-min-height) + var(--header-navbar-clearance));
 }
 .header--dark .header__inner,
 .header--dark-search .header__inner {
-  min-height: var(--header-dark-min-height);
+  min-height: calc(var(--header-dark-min-height) + var(--header-navbar-clearance));
 }
 .header--dark .header__grid,
 .header--dark-search .header__grid {
@@ -3521,7 +3535,7 @@
 }
 @media (min-width: 768px) {
   .header__inner {
-    padding: var(--spacing-40) var(--spacing-24);
+    padding: calc(var(--spacing-40) + var(--header-navbar-clearance)) var(--spacing-24) var(--spacing-40);
     align-items: center;
   }
   .header__content {
@@ -3539,8 +3553,11 @@
   }
 }
 @media (min-width: 992px) {
+  .header--under-navbar {
+    --header-navbar-clearance: calc(var(--navbar-height, 4rem) + var(--spacing-16) * 2);
+  }
   .header__inner {
-    padding: var(--spacing-48) var(--spacing-32);
+    padding: calc(var(--spacing-48) + var(--header-navbar-clearance)) var(--spacing-32) var(--spacing-48);
     position: relative;
   }
   .header__content {
@@ -3551,7 +3568,7 @@
   .header--dark-search,
   .header--dark .header__inner,
   .header--dark-search .header__inner {
-    min-height: var(--header-dark-min-height-desktop);
+    min-height: calc(var(--header-dark-min-height-desktop) + var(--header-navbar-clearance));
   }
   .header__buttons {
     flex-direction: row;