@deriv-web-design/ui 0.0.4 → 0.0.5

package/dist/index.css

@@ -3025,50 +3025,40 @@
 
 /* templates/CTABanner/CTABanner.css */
 :root {
-  --ctab-bg: var(--color-coral-500);
-  --ctab-grid-line: var(--color-opacity-white-16);
-  --ctab-grid-cell: var(--spacing-96);
-  --ctab-headline-size: var(--font-size-5xl);
-  --ctab-headline-lh: var(--line-height-5xl);
-  --ctab-headline-color: var(--color-slate-50);
-  --ctab-headline-weight: var(--font-weight-extra-bold);
-  --ctab-btn-bg: var(--color-slate-1200);
-  --ctab-btn-bg-hover: var(--color-slate-1100);
-  --ctab-btn-text: var(--color-slate-50);
-  --ctab-btn-radius: var(--radius-full);
-  --ctab-btn-px: var(--spacing-24);
-  --ctab-btn-py: var(--spacing-16);
-  --ctab-btn-size: var(--font-size-md);
-  --ctab-btn-lh: var(--line-height-xs);
-  --ctab-btn-weight: var(--font-weight-extra-bold);
-  --ctab-btn-min-width: var(--spacing-96);
-  --ctab-avatar-size: var(--spacing-64);
-  --ctab-avatar-radius: var(--radius-xl);
-  --ctab-avatar-shadow: var(--shadow-md);
   --ctab-max-width: 80rem;
-  --ctab-stage-height: 42.5rem;
-  --ctab-section-min-height: 42.25rem;
-  --ctab-hero-gap: var(--spacing-16);
-  --ctab-hero-max-width: 52.875rem;
-  --ctab-parallax-near: var(--spacing-64);
-  --ctab-parallax-mid: var(--spacing-96);
-  --ctab-parallax-far: var(--spacing-112);
-  --ctab-parallax-edge: var(--spacing-112);
-  --ctab-parallax-blur: var(--spacing-16);
-  --ctab-spring-stiffness: 80;
-  --ctab-spring-damping: 30;
+  --ctab-stage-height: calc(11 * var(--ctab-grid-cell));
+  --ctab-hero-max-width: 90%;
+  --ctab-avatar-radius: var(--radius-xl);
+  --ctab-grid-cell: calc((100vw - 2 * var(--spacing-24)) / 5);
+  --ctab-avatar-size: var(--ctab-grid-cell);
+  --ctab-section-min-height: var(--ctab-stage-height);
+}
+@media (min-width: 480px) and (max-width: 767px) {
+  :root {
+    --ctab-hero-max-width: 80%;
+    --ctab-grid-cell: calc((100vw - 2 * var(--spacing-24)) / 7);
+  }
 }
 @media (min-width: 768px) and (max-width: 991px) {
   :root {
-    --ctab-avatar-size: 5rem;
-    --ctab-avatar-radius: var(--radius-2xl);
+    --ctab-stage-height: 48rem;
     --ctab-hero-max-width: 70%;
+    --ctab-avatar-radius: var(--radius-2xl);
+    --ctab-grid-cell: calc((100vw - 2 * var(--spacing-24)) / 11);
+    --ctab-section-min-height: var(--ctab-stage-height);
   }
 }
 @media (min-width: 992px) {
   :root {
-    --ctab-avatar-size: var(--spacing-96);
+    --ctab-stage-height: 42.5rem;
+    --ctab-hero-max-width: 52.875rem;
     --ctab-avatar-radius: var(--radius-2xl);
+    --ctab-grid-cell: 6rem;
+    --ctab-avatar-size: 6rem;
+    --ctab-section-min-height: 42.5rem;
+  }
+  .ctab:not(.ctab--compact) {
+    --ctab-stage-height: 54rem;
     --ctab-section-min-height: 54rem;
   }
 }
@@ -3076,7 +3066,7 @@
   position: relative;
   width: 100%;
   min-height: var(--ctab-section-min-height);
-  background-color: var(--ctab-bg);
+  background-color: var(--color-coral-500);
   font-family: var(--font-family-base);
   box-sizing: border-box;
   overflow: hidden;
@@ -3085,19 +3075,53 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%),
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%);
+  -webkit-mask-composite: destination-in;
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%),
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%);
+  mask-composite: intersect;
   background-image:
     repeating-linear-gradient(
       to right,
       transparent 0,
       transparent calc(var(--ctab-grid-cell) - 1px),
-      var(--ctab-grid-line) calc(var(--ctab-grid-cell) - 1px),
-      var(--ctab-grid-line) var(--ctab-grid-cell)),
+      var(--color-opacity-white-16) calc(var(--ctab-grid-cell) - 1px),
+      var(--color-opacity-white-16) var(--ctab-grid-cell)),
     repeating-linear-gradient(
       to bottom,
       transparent 0,
       transparent calc(var(--ctab-grid-cell) - 1px),
-      var(--ctab-grid-line) calc(var(--ctab-grid-cell) - 1px),
-      var(--ctab-grid-line) var(--ctab-grid-cell));
+      var(--color-opacity-white-16) calc(var(--ctab-grid-cell) - 1px),
+      var(--color-opacity-white-16) var(--ctab-grid-cell));
+  background-position: var(--spacing-24) calc(1px - var(--ctab-grid-cell));
+}
+@media (min-width: 992px) {
+  .ctab__grid {
+    background-position: max(0px, calc((100vw - var(--ctab-max-width)) / 2)) calc(1px - var(--ctab-grid-cell));
+  }
 }
 .ctab__inner {
   position: relative;
@@ -3108,8 +3132,14 @@
   min-height: var(--ctab-section-min-height);
   max-width: var(--ctab-max-width);
   margin: 0 auto;
+  padding: 0 var(--spacing-24);
   box-sizing: border-box;
 }
+@media (min-width: 992px) {
+  .ctab__inner {
+    padding: 0;
+  }
+}
 .ctab__stage {
   position: relative;
   width: 100%;
@@ -3124,41 +3154,41 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--ctab-hero-gap);
-  max-width: var(--ctab-hero-max-width);
+  gap: var(--spacing-16);
+  width: var(--ctab-hero-max-width);
+  max-width: 100%;
   text-align: center;
-  padding-top: var(--spacing-48);
+  padding: var(--spacing-48) var(--spacing-24);
 }
 .ctab__headline {
   margin: 0;
   font-family: var(--font-family-base);
-  font-size: var(--ctab-headline-size);
-  font-weight: var(--ctab-headline-weight);
-  line-height: var(--ctab-headline-lh);
-  color: var(--ctab-headline-color);
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-5xl);
+  color: var(--color-slate-50);
 }
-.ctab__btn {
+.ctab__cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--ctab-btn-min-width);
-  padding: var(--ctab-btn-py) var(--ctab-btn-px);
-  background-color: var(--ctab-btn-bg);
-  color: var(--ctab-btn-text);
-  border-radius: var(--ctab-btn-radius);
+  width: auto;
+  min-width: var(--spacing-96);
+  padding: var(--spacing-16) var(--spacing-24);
+  background-color: var(--color-slate-1200);
+  color: var(--color-slate-50);
+  border-radius: var(--radius-full);
   font-family: var(--font-family-base);
-  font-size: var(--ctab-btn-size);
-  font-weight: var(--ctab-btn-weight);
-  line-height: var(--ctab-btn-lh);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-xs);
   text-decoration: none;
-  cursor: pointer;
-  border: none;
-  transition: background-color 0.3s ease;
   white-space: nowrap;
   box-sizing: border-box;
+  transition: background-color 100ms ease;
 }
-.ctab__btn:hover {
-  background-color: var(--ctab-btn-bg-hover);
+.ctab__cta:hover {
+  background-color: var(--color-slate-1100);
 }
 .ctab__avatar {
   position: absolute;
@@ -3166,7 +3196,7 @@
   height: var(--ctab-avatar-size);
   border-radius: var(--ctab-avatar-radius);
   overflow: hidden;
-  box-shadow: var(--ctab-avatar-shadow);
+  box-shadow: var(--shadow-md);
   flex-shrink: 0;
   left: var(--av-d-left, auto);
   right: var(--av-d-right, auto);
@@ -3179,7 +3209,7 @@
   display: block;
   border-radius: var(--ctab-avatar-radius);
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .ctab__avatar {
     left: var(--av-m-left, auto);
     right: var(--av-m-right, auto);