@deriv-web-design/ui 0.0.15 → 0.0.17

package/dist/index.css

@@ -62,14 +62,14 @@
   pointer-events: none;
 }
 .coral_primary {
-  background-color: var(--color-coral-500);
+  background-color: var(--color-coral-700);
   color: var(--color-slate-50);
 }
 .coral_primary:hover:not(:disabled) {
-  background-color: var(--color-coral-600);
+  background-color: var(--color-coral-800);
 }
 .coral_primary:active:not(:disabled) {
-  background-color: var(--color-coral-700);
+  background-color: var(--color-coral-900);
 }
 .coral_primary:disabled {
   opacity: 0.24;
@@ -77,8 +77,8 @@
 }
 .coral_secondary {
   background-color: transparent;
-  color: var(--color-coral-500);
-  border-color: var(--color-coral-500);
+  color: var(--color-coral-700);
+  border-color: var(--color-coral-700);
 }
 .coral_secondary:hover:not(:disabled) {
   background-color: rgba(255, 68, 79, 0.08);
@@ -1198,7 +1198,7 @@
   background-color: var(--color-slate-1200);
 }
 .card-primary.style--brand {
-  background-color: var(--color-coral-500);
+  background-color: var(--color-coral-700);
 }
 .card-primary.style--image {
   background-color: transparent;
@@ -1554,7 +1554,7 @@
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
   line-height: var(--typography-h2-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
 }
 .fc-sectionDescription {
@@ -1621,7 +1621,7 @@
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
   line-height: var(--typography-h2-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
 }
 .fcs-sectionDescription {
@@ -2133,7 +2133,7 @@
   --hero-dark-bg: var(--color-slate-1200);
   --hero-light-bg: var(--color-slate-75);
   --hero-text-light: var(--color-slate-50);
-  --hero-text-dark: var(--color-slate-1200);
+  --hero-text-dark: var(--text-primary);
   --hero-subtitle-size: var(--typography-body-md-font-size);
   --hero-subtitle-lh: var(--typography-body-md-line-height);
   --hero-subtitle-weight: var(--font-weight-semi-bold);
@@ -2875,7 +2875,7 @@
 :root {
   --stats-bg: var(--color-slate-50);
   --stats-card-bg: var(--color-slate-75);
-  --stats-text-primary: var(--color-slate-1200);
+  --stats-text-primary: var(--text-primary);
   --stats-title-size: var(--typography-h2-font-size);
   --stats-title-lh: var(--typography-h2-line-height);
   --stats-desc-size: var(--typography-body-md-font-size);
@@ -3096,10 +3096,10 @@
 /* templates/FeatureScroll/FeatureScroll.css */
 :root {
   --fs-bg: var(--color-slate-50);
-  --fs-text-primary: var(--color-slate-1200);
+  --fs-text-primary: var(--text-primary);
   --fs-text-muted: var(--color-slate-500);
-  --fs-link-color: var(--color-coral-500);
-  --fs-link-hover: var(--color-coral-600);
+  --fs-link-color: var(--color-coral-700);
+  --fs-link-hover: var(--color-coral-800);
   --fs-media-bg: transparent;
   --fs-font-family: var(--font-family-base);
   --fs-header-family: var(--typography-h2-font-family);
@@ -3322,10 +3322,10 @@
 :root {
   --ssc-bg: var(--color-slate-50);
   --ssc-font-family: var(--font-family-base);
-  --ssc-header-color: var(--color-slate-1200);
+  --ssc-header-color: var(--text-primary);
   --ssc-card-light-bg: var(--color-slate-75);
   --ssc-card-light-text: var(--color-slate-1200);
-  --ssc-card-coral-bg: var(--color-coral-500);
+  --ssc-card-coral-bg: var(--color-coral-700);
   --ssc-card-coral-text: var(--color-slate-50);
   --ssc-card-dark-bg: var(--color-slate-1200);
   --ssc-card-dark-text: var(--color-slate-50);
@@ -3514,7 +3514,7 @@
   position: relative;
   width: 100%;
   min-height: var(--ctab-section-min-height);
-  background-color: var(--color-coral-500);
+  background-color: var(--color-coral-700);
   font-family: var(--font-family-base);
   box-sizing: border-box;
   overflow: hidden;
@@ -4425,8 +4425,8 @@
 :root {
   --dnt-text-day: var(--color-slate-1400);
   --dnt-text-night: var(--color-slate-50);
-  --dnt-btn-bg: var(--color-coral-500);
-  --dnt-btn-bg-hover: var(--color-coral-600);
+  --dnt-btn-bg: var(--color-coral-700);
+  --dnt-btn-bg-hover: var(--color-coral-800);
   --dnt-btn-text: var(--color-slate-50);
   --dnt-btn-radius: var(--radius-full);
   --dnt-btn-px: var(--spacing-24);
@@ -4455,6 +4455,9 @@
   width: 100%;
   font-family: var(--font-family-base);
 }
+.dnt--webflow-v2 {
+  --dnt-wrapper-height: 200vh;
+}
 .dnt__sticky {
   position: sticky;
   top: 0;
@@ -4478,6 +4481,107 @@
 .dnt__bg--night {
   z-index: 1;
 }
+.dnt__v2-background-wrapper {
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.dnt__v2-bg-day {
+  z-index: 1;
+  opacity: 1;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 100% 100%;
+  overflow: hidden;
+}
+.dnt__v2-bg-night {
+  z-index: 0;
+  width: 100%;
+  height: 100vh;
+  margin-top: -100vh;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 100% 100%;
+}
+.dnt--webflow-v2 .dnt__v2-bg-day,
+.dnt--webflow-v2 .dnt__v2-bg-night {
+  background-attachment: fixed;
+}
+.dnt__sticky--webflow-v2 {
+  z-index: 0;
+}
+.dnt--webflow-v2 .dnt__sticky--webflow-v2 {
+  height: 100dvh;
+  min-height: 100vh;
+}
+@media screen and (max-width: 991px) {
+  .dnt--webflow-v2 .dnt__v2-bg-day {
+    position: sticky;
+    top: 0;
+    background-position: 30% 0;
+    background-repeat: repeat;
+    background-size: auto 100vh;
+  }
+  .dnt--webflow-v2 .dnt__v2-bg-night {
+    background-position: 30% 0;
+    background-repeat: repeat;
+    background-size: auto 100vh;
+  }
+  .dnt--webflow-v2 .dnt__sticky--webflow-v2 .dnt__content {
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: var(--spacing-112) var(--dnt-content-px) var(--dnt-content-py) var(--dnt-content-px);
+  }
+  .dnt--webflow-v2 .dnt__text-wrap {
+    max-width: 100%;
+    width: 100%;
+  }
+  .dnt--webflow-v2 .dnt__headline--inline-day-night {
+    width: 60%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .dnt--webflow-v2 .dnt__headline--inline-day-night {
+    width: 80%;
+  }
+}
+@media screen and (max-width: 479px) {
+  .dnt--webflow-v2 .dnt__v2-bg-day {
+    background-position: 40% 0;
+  }
+  .dnt--webflow-v2 .dnt__v2-bg-night {
+    background-position: 40% 0;
+  }
+  .dnt--webflow-v2 .dnt__sticky--webflow-v2 .dnt__content {
+    padding: var(--spacing-80) var(--dnt-content-px) var(--dnt-content-py) var(--dnt-content-px);
+  }
+  .dnt--layout-v2 .dnt__inner {
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+  }
+  .dnt--webflow-v2.dnt--headline-h1 .dnt__headline {
+    font-size: 3.5rem;
+    line-height: 4rem;
+  }
+  .dnt--webflow-v2 .dnt__description {
+    margin-top: 0;
+  }
+}
 .dnt__content {
   position: relative;
   z-index: 2;
@@ -4498,6 +4602,9 @@
   margin: 0 auto;
   box-sizing: border-box;
 }
+.dnt--layout-v2 .dnt__inner {
+  max-width: 83rem;
+}
 .dnt__text-wrap {
   display: flex;
   flex-direction: column;
@@ -4518,6 +4625,30 @@
   font-weight: var(--typography-h2-font-weight);
   line-height: var(--typography-h2-line-height);
 }
+.dnt__headline--inline-day-night {
+  display: block;
+}
+.dnt__headline-prefix {
+  white-space: pre;
+}
+.dnt__headline-pair {
+  display: inline-block;
+  position: relative;
+  vertical-align: bottom;
+}
+.dnt__headline-wday,
+.dnt__headline-wnight {
+  display: inline-block;
+}
+.dnt__headline-wnight {
+  vertical-align: bottom;
+}
+.dnt--headline-h1 .dnt__headline {
+  font-family: var(--typography-h1-font-family);
+  font-size: var(--typography-h1-font-size);
+  font-weight: var(--typography-h1-font-weight);
+  line-height: var(--typography-h1-line-height);
+}
 .dnt__description {
   margin: 0;
   font-family: var(--font-family-base);
@@ -4525,6 +4656,12 @@
   font-weight: var(--dnt-desc-weight);
   line-height: var(--dnt-desc-lh);
 }
+.dnt--desc-body-lg .dnt__description {
+  font-family: var(--typography-body-lg-font-family);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--typography-body-lg-font-weight);
+  line-height: var(--typography-body-lg-line-height);
+}
 .dnt__btn {
   display: inline-flex;
   align-items: center;
@@ -4558,7 +4695,7 @@
   --lm-section-height: 50rem;
   --lm-max-width: var(--content-width-1280);
   --lm-layout-gap: var(--spacing-112);
-  --lm-card-bg: transparent;
+  --lm-card-bg: var(--color-slate-1000);
   --lm-card-radius: var(--radius-lg);
   --lm-card-radius-mobile: var(--radius-2xl);
   --lm-card-px: var(--spacing-16);
@@ -4584,7 +4721,7 @@
   --lm-disc-lh: var(--typography-body-sm-line-height);
   --lm-disc-color: var(--color-slate-400);
   --lm-disc-weight: var(--typography-body-sm-font-weight);
-  --lm-link-color: var(--color-coral-500);
+  --lm-link-color: var(--color-coral-700);
   --lm-link-size: var(--typography-link-md-font-size);
   --lm-link-weight: var(--typography-link-md-font-weight);
   --lm-text-width: 32.625rem;
@@ -4677,7 +4814,7 @@
   transition: color 0.2s ease;
 }
 .lm__link:hover {
-  color: var(--color-coral-600);
+  color: var(--color-coral-800);
 }
 .lm__link-icon {
   display: inline-flex;
@@ -4840,9 +4977,9 @@
 /* templates/Steps/Steps.css */
 :root {
   --steps-bg: var(--color-slate-50);
-  --steps-title-color: var(--color-slate-1200);
-  --steps-number-color: var(--color-coral-500);
-  --steps-item-title-color: var(--color-slate-1200);
+  --steps-title-color: var(--text-primary);
+  --steps-number-color: var(--color-coral-700);
+  --steps-item-title-color: var(--text-primary);
   --steps-item-desc-color: var(--color-slate-600);
   --steps-divider-color: var(--color-slate-200);
 }
@@ -4973,9 +5110,9 @@
   --db-card-bg-light: var(--color-slate-50);
   --db-card-bg-light-2: var(--color-slate-100);
   --db-card-bg-dark: var(--color-slate-1200);
-  --db-title-color-light: var(--color-slate-1200);
+  --db-title-color-light: var(--text-primary);
   --db-title-color-dark: var(--color-slate-50);
-  --db-subtitle-color-light: var(--color-slate-1200);
+  --db-subtitle-color-light: var(--text-primary);
   --db-subtitle-color-dark: var(--color-slate-50);
   --db-disclaimer-color-light: var(--color-slate-500);
   --db-disclaimer-color-dark: var(--color-slate-500);
@@ -5154,4 +5291,44 @@
     width: auto;
   }
 }
+
+/* templates/TextScroll/TextScroll.css */
+.ts {
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.ts__inner {
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .ts__inner {
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+}
+@media (min-width: 1280px) {
+  .ts__inner {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.ts__text {
+  margin: 0;
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--typography-h4-font-weight);
+  line-height: var(--typography-h4-line-height);
+  color: var(--text-primary);
+}
+@media (min-width: 768px) {
+  .ts__text {
+    text-align: center;
+  }
+}
+.ts__word {
+  display: inline;
+  white-space: pre-wrap;
+  will-change: opacity;
+}
 /*# sourceMappingURL=index.css.map */