@deriv-web-design/ui 0.0.21 → 0.0.22

package/dist/index.css

@@ -370,14 +370,14 @@
   flex-shrink: 0;
 }
 
-/* primitives/Accordion/Accordion.css */
+/* primitives/Accordion/Accordion.module.css */
 .accordion {
   position: relative;
   width: 100%;
   max-width: 846px;
   box-sizing: border-box;
 }
-.accordion .header {
+.header {
   display: flex;
   align-items: center;
   gap: var(--spacing-24);
@@ -391,31 +391,31 @@
   text-align: left;
   box-sizing: border-box;
 }
-.accordion .header:focus-visible::after {
+.header:focus-visible::after {
   content: "";
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.accordion .focusRing {
+.focusRing {
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.accordion .titleWrapper {
+.titleWrapper {
   flex: 1 0 0;
   min-width: 1px;
 }
-.accordion .title {
+.title {
   font-family: var(--font-family-base);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semi-bold);
   line-height: var(--line-height-normal);
   color: var(--accordion-title-color);
 }
-.accordion .chevron {
+.chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -425,21 +425,21 @@
   color: var(--accordion-chevron-color);
   transition: transform 200ms ease;
 }
-.accordion .chevronRotated {
+.chevronRotated {
   transform: rotate(180deg);
 }
-.accordion .bodyWrapper {
+.bodyWrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 200ms ease;
 }
-.accordion .bodyWrapperOpen {
+.bodyWrapperOpen {
   grid-template-rows: 1fr;
 }
-.accordion .bodyInner {
+.bodyInner {
   overflow: hidden;
 }
-.accordion .body {
+.body {
   padding-bottom: var(--spacing-24);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
@@ -1548,79 +1548,74 @@
   font-weight: var(--font-weight-regular);
 }
 
-/* templates/FeatureCards/FeatureCards.css */
-.fc-section {
+/* templates/FaqAccordion/FaqAccordion.module.css */
+.section {
   width: 100%;
+}
+.section--white {
   background-color: var(--color-slate-50);
 }
-.fc-container {
+.section--slate {
+  background-color: var(--color-slate-75);
+}
+.container {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-48);
+  gap: var(--spacing-24);
   max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   box-sizing: border-box;
+  width: 100%;
 }
 @media (min-width: 992px) {
-  .fc-container {
+  .container {
+    gap: var(--spacing-48);
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.fc-header {
+.header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--spacing-16);
-  text-align: left;
+  gap: 1.25rem;
+  width: 100%;
 }
-@media (min-width: 768px) {
-  .fc-header {
+@media (min-width: 992px) {
+  .header {
     align-items: center;
-    text-align: center;
+    gap: var(--spacing-24);
   }
 }
-.fc-sectionTitle {
+.title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
   line-height: var(--typography-h2-line-height);
   color: var(--text-primary);
   margin: 0;
-}
-.fc-sectionDescription {
-  font-family: var(--typography-body-md-font-family);
-  font-size: var(--typography-body-md-font-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
-  margin: 0;
-  max-width: 640px;
-}
-.fc-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-16);
   width: 100%;
 }
-@media (min-width: 768px) {
-  .fc-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--spacing-24);
-  }
-}
 @media (min-width: 992px) {
-  .fc-grid {
-    grid-template-columns: repeat(3, 1fr);
+  .title {
+    text-align: center;
   }
 }
+.list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.list > * {
+  max-width: 100%;
+}
 
-/* templates/FeatureCardsSecondary/FeatureCardsSecondary.css */
-.fcs-section {
+/* templates/FeatureCards/FeatureCards.css */
+.fc-section {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.fcs-container {
+.fc-container {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-48);
@@ -1630,11 +1625,11 @@
   box-sizing: border-box;
 }
 @media (min-width: 992px) {
-  .fcs-container {
+  .fc-container {
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.fcs-header {
+.fc-header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -1642,12 +1637,12 @@
   text-align: left;
 }
 @media (min-width: 768px) {
-  .fcs-header {
+  .fc-header {
     align-items: center;
     text-align: center;
   }
 }
-.fcs-sectionTitle {
+.fc-sectionTitle {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -1655,7 +1650,7 @@
   color: var(--text-primary);
   margin: 0;
 }
-.fcs-sectionDescription {
+.fc-sectionDescription {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -1664,42 +1659,42 @@
   margin: 0;
   max-width: 640px;
 }
-.fcs-grid {
+.fc-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-16);
   width: 100%;
 }
 @media (min-width: 768px) {
-  .fcs-grid {
+  .fc-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-24);
   }
 }
 @media (min-width: 992px) {
-  .fcs-grid--3 {
+  .fc-grid--3 {
     grid-template-columns: repeat(3, 1fr);
   }
-  .fcs-grid--4 {
+  .fc-grid--4 {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-.fcs-grid--twoCards {
+.fc-grid--twoCards {
   grid-template-columns: 1fr;
   gap: var(--spacing-24);
   align-items: stretch;
 }
 @media (min-width: 768px) {
-  .fcs-grid--twoCards {
+  .fc-grid--twoCards {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .fcs-grid--twoCards {
+  .fc-grid--twoCards {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-.fcs-twoCardWrap {
+.fc-twoCardWrap {
   display: flex;
   flex-direction: column;
   align-self: stretch;
@@ -1707,7 +1702,7 @@
   width: 100%;
   min-height: 0;
 }
-.fcs-twoCard {
+.fc-twoCard {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -1718,28 +1713,28 @@
   overflow: hidden;
   box-sizing: border-box;
 }
-.fcs-twoCard--light {
+.fc-twoCard--light {
   background-color: var(--color-slate-75);
 }
-.fcs-twoCard--dark {
+.fc-twoCard--dark {
   background-color: var(--color-slate-1200);
 }
-.fcs-twoCard-body {
+.fc-twoCard-body {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   gap: 0;
   padding: var(--spacing-32);
 }
-.fcs-twoCard:not(:has(.fcs-twoCard-imageSection)) .fcs-twoCard-body {
+.fc-twoCard:not(:has(.fc-twoCard-imageSection)) .fc-twoCard-body {
   flex: 1 1 auto;
 }
-.fcs-twoCard-content {
+.fc-twoCard-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.fcs-twoCard-title {
+.fc-twoCard-title {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -1747,10 +1742,10 @@
   color: var(--text-primary);
   margin: 0;
 }
-.fcs-twoCard--dark .fcs-twoCard-title {
+.fc-twoCard--dark .fc-twoCard-title {
   color: var(--color-slate-50);
 }
-.fcs-twoCard-description {
+.fc-twoCard-description {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -1758,20 +1753,20 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.fcs-twoCard--dark .fcs-twoCard-description {
+.fc-twoCard--dark .fc-twoCard-description {
   color: var(--color-slate-50);
 }
-.fcs-twoCard-linkWrap {
+.fc-twoCard-linkWrap {
   margin-top: 0;
 }
-.fcs-twoCard-platformsOuter {
+.fc-twoCard-platformsOuter {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
   margin-top: var(--spacing-24);
   flex-shrink: 0;
 }
-.fcs-twoCard-platformsHeading {
+.fc-twoCard-platformsHeading {
   margin: 0;
   font-family: var(--typography-body-lg-font-family);
   font-size: var(--typography-body-lg-font-size);
@@ -1779,50 +1774,50 @@
   line-height: var(--typography-body-lg-line-height);
   color: var(--text-primary);
 }
-.fcs-twoCard--dark .fcs-twoCard-platformsHeading {
+.fc-twoCard--dark .fc-twoCard-platformsHeading {
   color: var(--color-slate-50);
 }
-.fcs-twoCard--light .fcs-twoCard-platformsHeading {
+.fc-twoCard--light .fc-twoCard-platformsHeading {
   color: var(--text-primary);
 }
-.fcs-twoCard-platformRow {
+.fc-twoCard-platformRow {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-16);
 }
-.fcs-platformLink {
+.fc-platformLink {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
   text-decoration: none;
   color: var(--text-primary);
 }
-.fcs-platformLink:hover {
+.fc-platformLink:hover {
   text-decoration: underline;
 }
-.fcs-platformLink:focus-visible {
+.fc-platformLink:focus-visible {
   outline: 2px solid var(--color-coral-700);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
-.fcs-platformLink--dark {
+.fc-platformLink--dark {
   color: var(--color-slate-50);
 }
-.fcs-platformLink-icon {
+.fc-platformLink-icon {
   display: block;
   width: 2rem;
   height: 2rem;
   flex-shrink: 0;
   object-fit: contain;
 }
-.fcs-platformLink-label {
+.fc-platformLink-label {
   font-family: var(--typography-body-sm-font-family);
   font-size: var(--typography-body-sm-font-size);
   font-weight: var(--typography-body-sm-font-weight);
   line-height: var(--typography-body-sm-line-height);
 }
-.fcs-twoCard-imageSection {
+.fc-twoCard-imageSection {
   margin-top: auto;
   flex: 0 0 auto;
   width: 100%;
@@ -1831,7 +1826,7 @@
   overflow: hidden;
   background-color: transparent;
 }
-.fcs-twoCard-image {
+.fc-twoCard-image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1840,11 +1835,11 @@
   object-position: bottom center;
   display: block;
 }
-.fcs-oneCardShell {
+.fc-oneCardShell {
   width: 100%;
   box-sizing: border-box;
 }
-.fcs-oneCardGrid {
+.fc-oneCardGrid {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr;
@@ -1858,14 +1853,14 @@
   overflow: hidden;
 }
 @media (min-width: 768px) {
-  .fcs-oneCardGrid {
+  .fc-oneCardGrid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     max-height: calc(30 * var(--spacing-16));
     min-height: calc(30 * var(--spacing-16));
   }
 }
-.fcs-oneCardLeft {
+.fc-oneCardLeft {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -1874,13 +1869,13 @@
   min-height: 0;
   min-width: 0;
 }
-.fcs-oneCardContentBlock {
+.fc-oneCardContentBlock {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
   min-width: 0;
 }
-.fcs-oneCardRight {
+.fc-oneCardRight {
   position: relative;
   min-width: 0;
   min-height: 0;
@@ -1888,11 +1883,11 @@
   box-sizing: border-box;
 }
 @media (max-width: 767px) {
-  .fcs-oneCardRight {
+  .fc-oneCardRight {
     padding: 0 var(--spacing-16);
   }
 }
-.fcs-oneCardImage {
+.fc-oneCardImage {
   display: block;
   width: 100%;
   height: auto;
@@ -1901,10 +1896,10 @@
   object-position: center bottom;
 }
 @media (min-width: 768px) {
-  .fcs-oneCardRight {
+  .fc-oneCardRight {
     padding: 0;
   }
-  .fcs-oneCardImage {
+  .fc-oneCardImage {
     position: absolute;
     inset: 0;
     width: 100%;
@@ -1914,6 +1909,76 @@
   }
 }
 
+/* templates/FeatureCardsIcon/FeatureCardsIcon.css */
+.fci-section {
+  width: 100%;
+  background-color: var(--color-slate-50);
+}
+.fci-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .fci-container {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.fci-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .fci-header {
+    align-items: center;
+    text-align: center;
+  }
+}
+.fci-sectionTitle {
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  color: var(--text-primary);
+  margin: 0;
+}
+.fci-sectionDescription {
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--color-slate-1200);
+  margin: 0;
+  max-width: 640px;
+}
+.fci-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .fci-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .fci-grid--3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .fci-grid--4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 /* templates/FeatureBullets/FeatureBullets.module.css */
 .section {
   width: 100%;
@@ -2099,16 +2164,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   color: var(--footer-social-icon-color);
   text-decoration: none;
   flex-shrink: 0;
   overflow: hidden;
 }
 .footer__social-icon svg {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   display: block;
 }
 .footer__social-icon:hover {
@@ -2148,8 +2213,8 @@
   gap: var(--spacing-8);
 }
 .footer__ai-icon {
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   border-radius: var(--radius-md);
   display: block;
   object-fit: cover;
@@ -2367,7 +2432,7 @@
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-normal);
   color: var(--color-slate-50);
-  margin: 0;
+  margin: var(--spacing-8) 0 0 0;
 }
 .footer__investors-card {
   background-color: var(--footer-surface);
@@ -2512,28 +2577,38 @@
   .footer__legal-block {
     align-items: flex-start;
   }
+  .footer__social-icon {
+    width: 24px;
+    height: 24px;
+  }
+  .footer__social-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .footer__ai-icon {
+    width: 24px;
+    height: 24px;
+  }
 }
 
 /* templates/Hero/Hero.css */
 :root {
   --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(--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);
-  --hero-title-size-mobile: var(--typography-h1-font-size);
-  --hero-title-lh-mobile: var(--typography-h1-line-height);
+  --hero-title-size: var(--typography-h1-font-size);
+  --hero-title-lh: var(--typography-h1-line-height);
   --hero-body-size: var(--typography-body-md-font-size);
   --hero-body-lh: var(--typography-body-md-line-height);
-  --hero-primary-padding-top-mobile: var(--spacing-80);
-  --hero-primary-padding-top-tablet: var(--spacing-96);
-  --hero-primary-padding-top-desktop: var(--spacing-96);
-  --hero-secondary-shrink-radius: 3.5rem;
-  --hero-secondary-padding-top-mobile: var(--spacing-80);
-  --hero-secondary-padding-top-tablet: var(--spacing-96);
-  --hero-secondary-padding-top-desktop: var(--spacing-112);
+  --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-shrink-radius: 3.5rem;
+  --hero-padding-top-mobile: var(--spacing-80);
+  --hero-padding-top-tablet: var(--spacing-96);
+  --hero-padding-top-desktop: var(--spacing-112);
 }
 .hero {
   position: relative;
@@ -2541,17 +2616,13 @@
   font-family: var(--font-family-base);
   box-sizing: border-box;
   overflow: hidden;
-}
-.hero__bg-image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  pointer-events: none;
-  display: block;
-  z-index: 0;
+  background-color: var(--hero-dark-bg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100vh;
+  display: flex;
+  align-items: flex-start;
 }
 .hero__overlay {
   position: absolute;
@@ -2577,19 +2648,23 @@
   font-size: var(--hero-subtitle-size);
   font-weight: var(--hero-subtitle-weight);
   line-height: var(--hero-subtitle-lh);
+  color: var(--hero-text-light);
   margin: 0;
 }
 .hero__title {
-  font-size: var(--hero-title-size-mobile);
+  font-size: var(--hero-title-size);
   font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
+  line-height: var(--hero-title-lh);
+  color: var(--hero-text-light);
   margin: 0;
 }
 .hero__description {
   font-size: var(--hero-body-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--hero-body-lh);
+  color: var(--hero-text-light);
   margin: 0;
+  opacity: 0.8;
 }
 .hero__buttons {
   display: flex;
@@ -2604,14 +2679,6 @@
   gap: var(--spacing-24);
 }
 .hero--split {
-  background-color: var(--hero-dark-bg);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 100vh;
-  display: flex;
-  align-items: flex-start;
-  overflow: hidden;
   animation: hero-split-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2623,8 +2690,8 @@
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
-    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2681,35 +2748,14 @@
   height: 100%;
   display: block;
 }
-.hero--split .hero__subtitle,
-.hero--split .hero__title,
-.hero--split .hero__description {
-  color: var(--hero-text-light);
-}
 .hero--split .hero__subtitle {
   font-size: var(--typography-h4-font-size);
   line-height: var(--typography-h4-line-height);
 }
-.hero--split .hero__title {
-  font-size: var(--typography-h1-font-size);
-  line-height: var(--typography-h1-line-height);
-}
-.hero--split .hero__description {
-  font-size: var(--typography-body-md-font-size);
-  line-height: var(--typography-body-md-line-height);
-}
 .hero--split .hero__buttons {
   align-items: stretch;
 }
 .hero--centered {
-  background-color: var(--hero-dark-bg);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 100vh;
-  display: flex;
-  align-items: flex-start;
-  overflow: hidden;
   animation: hero-centered-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2721,8 +2767,8 @@
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
-    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2741,7 +2787,7 @@
   justify-content: center;
   width: 100%;
   height: calc(100vh - 16px);
-  padding-top: var(--hero-secondary-padding-top-mobile);
+  padding-top: var(--hero-padding-top-mobile);
   padding-bottom: 0;
 }
 .hero--centered .hero__content {
@@ -2763,28 +2809,6 @@
   max-width: 640px;
   width: 100%;
 }
-.hero--centered .hero__subtitle {
-  font-size: var(--hero-subtitle-size);
-  font-weight: var(--typography-h2-font-weight);
-  line-height: var(--hero-subtitle-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--centered .hero__title {
-  font-size: var(--hero-title-size-mobile);
-  font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--centered .hero__description {
-  font-size: var(--hero-body-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--hero-body-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-  opacity: 0.8;
-}
 .hero--centered .hero__buttons {
   display: flex;
   flex-direction: column;
@@ -2793,130 +2817,7 @@
   width: 100%;
   justify-content: center;
 }
-.hero--visuals,
-.hero--minimal {
-  background-color: var(--hero-light-bg);
-  min-height: 540px;
-  display: flex;
-  align-items: center;
-}
-.hero--visuals .hero__grid,
-.hero--minimal .hero__grid {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23cfd4d8' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 40px 40px;
-}
-.hero--visuals .hero__overlay,
-.hero--minimal .hero__overlay {
-  background:
-    linear-gradient(
-      to right,
-      var(--hero-light-bg) 0%,
-      rgba(246, 247, 248, 0) 18%,
-      rgba(246, 247, 248, 0) 82%,
-      var(--hero-light-bg) 100%),
-    linear-gradient(
-      to bottom,
-      var(--hero-light-bg) 0%,
-      rgba(246, 247, 248, 0) 30%,
-      rgba(246, 247, 248, 0) 70%,
-      var(--hero-light-bg) 100%);
-}
-.hero--visuals .hero__inner,
-.hero--minimal .hero__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: var(--spacing-32);
-  padding-bottom: var(--spacing-32);
-  min-height: 540px;
-}
-.hero--visuals .hero__content,
-.hero--minimal .hero__content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-32);
-  width: 100%;
-  text-align: left;
-}
-.hero--visuals .hero__text,
-.hero--minimal .hero__text {
-  align-items: flex-start;
-  max-width: var(--content-width-846);
-}
-.hero--visuals .hero__subtitle,
-.hero--minimal .hero__subtitle {
-  color: var(--hero-text-dark);
-  font-size: var(--hero-subtitle-size);
-  font-weight: var(--hero-subtitle-weight);
-  line-height: var(--hero-subtitle-lh);
-}
-.hero--visuals .hero__title,
-.hero--minimal .hero__title {
-  color: var(--hero-text-dark);
-  font-size: var(--hero-title-size-mobile);
-  font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
-}
-.hero--visuals .hero__description,
-.hero--minimal .hero__description {
-  color: var(--hero-text-dark);
-  font-size: var(--hero-body-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--hero-body-lh);
-}
-.hero--visuals .hero__buttons,
-.hero--minimal .hero__buttons {
-  align-items: stretch;
-  justify-content: flex-start;
-  flex-direction: column;
-  width: 100%;
-}
-.hero__visual {
-  position: absolute;
-  z-index: 1;
-  overflow: hidden;
-  pointer-events: none;
-}
-.hero__visual img,
-.hero__visual > * {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
-}
-.hero__visual--left {
-  width: 160px;
-  height: 160px;
-  top: calc(50% - 80px);
-  left: -20px;
-  bottom: auto;
-  will-change: transform;
-}
-.hero__visual--right {
-  width: 160px;
-  height: 160px;
-  top: calc(50% - 80px);
-  right: -20px;
-  bottom: auto;
-  will-change: transform;
-}
 .hero--showcase {
-  background-color: var(--hero-dark-bg);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 100vh;
-  display: flex;
-  align-items: flex-start;
-  overflow: hidden;
   animation: hero-showcase-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2928,8 +2829,8 @@
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
-    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2948,7 +2849,7 @@
   justify-content: center;
   width: 100%;
   height: calc(100vh - 16px);
-  padding-top: var(--hero-secondary-padding-top-mobile);
+  padding-top: var(--hero-padding-top-mobile);
   padding-bottom: 0;
 }
 .hero--showcase .hero__content {
@@ -2969,28 +2870,6 @@
   max-width: 640px;
   width: 100%;
 }
-.hero--showcase .hero__subtitle {
-  font-size: var(--hero-subtitle-size);
-  font-weight: var(--typography-h2-font-weight);
-  line-height: var(--hero-subtitle-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--showcase .hero__title {
-  font-size: var(--hero-title-size-mobile);
-  font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--showcase .hero__description {
-  font-size: var(--hero-body-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--hero-body-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-  opacity: 0.8;
-}
 .hero--showcase .hero__buttons {
   display: flex;
   flex-direction: column;
@@ -3037,14 +2916,19 @@
     padding: var(--spacing-40) var(--spacing-24);
   }
   .hero--split .hero__inner {
-    padding-top: var(--hero-primary-padding-top-tablet);
+    padding-top: var(--hero-split-padding-top-tablet);
     padding-bottom: var(--spacing-40);
     padding-left: var(--spacing-24);
     padding-right: var(--spacing-24);
     justify-content: flex-end;
   }
+  .hero--split .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+  }
   .hero--centered .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-tablet);
+    padding-top: var(--hero-padding-top-tablet);
     padding-bottom: 0;
   }
   .hero--centered .hero__content {
@@ -3061,33 +2945,8 @@
     max-width: none;
     width: auto;
   }
-  .hero--split .hero__buttons {
-    flex-direction: row;
-    align-items: center;
-    width: auto;
-  }
-  .hero--visuals .hero__inner,
-  .hero--minimal .hero__inner {
-    align-items: center;
-  }
-  .hero--visuals .hero__content,
-  .hero--minimal .hero__content {
-    align-items: center;
-    text-align: center;
-  }
-  .hero--visuals .hero__text,
-  .hero--minimal .hero__text {
-    align-items: center;
-  }
-  .hero--visuals .hero__buttons,
-  .hero--minimal .hero__buttons {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: auto;
-  }
   .hero--showcase .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-tablet);
+    padding-top: var(--hero-padding-top-tablet);
     padding-bottom: 0;
   }
   .hero--showcase .hero__content {
@@ -3117,7 +2976,7 @@
   }
   .hero--split .hero__inner {
     max-width: var(--content-width-1280);
-    padding-top: var(--hero-primary-padding-top-desktop);
+    padding-top: var(--hero-split-padding-top-desktop);
     padding-bottom: var(--spacing-96);
     padding-left: var(--spacing-32);
     padding-right: var(--spacing-32);
@@ -3178,7 +3037,7 @@
         var(--color-opacity-slate-24) 100%);
   }
   .hero--centered .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-desktop);
+    padding-top: var(--hero-padding-top-desktop);
     padding-bottom: 0;
   }
   .hero--centered .hero__text {
@@ -3190,43 +3049,8 @@
     justify-content: center;
     width: auto;
   }
-  .hero--visuals .hero__buttons,
-  .hero--minimal .hero__buttons {
-    flex-direction: row;
-    width: auto;
-  }
-  .hero--visuals .hero__inner,
-  .hero--minimal .hero__inner {
-    position: relative;
-  }
-  .hero__visuals-wrapper {
-    flex-direction: row;
-    justify-content: center;
-    position: relative;
-  }
-  .hero--visuals .hero__visual--left {
-    width: 241px;
-    height: 241px;
-    top: calc(50% - 120px);
-    left: 48px;
-    bottom: auto;
-    right: auto;
-  }
-  .hero--visuals .hero__visual--right {
-    width: 241px;
-    height: 241px;
-    top: calc(50% - 120px);
-    right: 48px;
-    bottom: auto;
-    left: auto;
-  }
-  .hero--visuals .hero__content,
-  .hero--minimal .hero__content {
-    max-width: var(--content-width-846);
-    width: 100%;
-  }
   .hero--showcase .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-desktop);
+    padding-top: var(--hero-padding-top-desktop);
     padding-bottom: 0;
   }
   .hero--showcase .hero__text {
@@ -3257,6 +3081,202 @@
   }
 }
 
+/* templates/Header/Header.css */
+:root {
+  --header-light-bg: var(--color-slate-75);
+  --header-text-dark: var(--text-primary);
+  --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);
+  --header-title-size: var(--typography-h1-font-size);
+  --header-title-lh: var(--typography-h1-line-height);
+  --header-body-size: var(--typography-body-md-font-size);
+  --header-body-lh: var(--typography-body-md-line-height);
+}
+.header {
+  position: relative;
+  width: 100%;
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--header-light-bg);
+  min-height: 540px;
+  display: flex;
+  align-items: center;
+}
+.header__grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M 64 0 L 0 0 0 64' fill='none' stroke='%23cfd4d8' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 64px 64px;
+}
+.header__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  background:
+    linear-gradient(
+      to right,
+      var(--header-light-bg) 0%,
+      rgba(246, 247, 248, 0) 18%,
+      rgba(246, 247, 248, 0) 82%,
+      var(--header-light-bg) 100%),
+    linear-gradient(
+      to bottom,
+      var(--header-light-bg) 0%,
+      rgba(246, 247, 248, 0) 30%,
+      rgba(246, 247, 248, 0) 70%,
+      var(--header-light-bg) 100%);
+}
+.header__inner {
+  position: relative;
+  z-index: 3;
+  width: 100%;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: var(--spacing-24) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-height: 540px;
+}
+.header__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-32);
+  width: 100%;
+  text-align: left;
+}
+.header__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+}
+.header__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  align-items: flex-start;
+  max-width: var(--content-width-846);
+}
+.header__subtitle {
+  font-size: var(--header-subtitle-size);
+  font-weight: var(--header-subtitle-weight);
+  line-height: var(--header-subtitle-lh);
+  color: var(--header-text-dark);
+  margin: 0;
+}
+.header__title {
+  font-size: var(--header-title-size);
+  font-weight: var(--typography-h1-font-weight);
+  line-height: var(--header-title-lh);
+  color: var(--header-text-dark);
+  margin: 0;
+}
+.header__description {
+  font-size: var(--header-body-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--header-body-lh);
+  color: var(--header-text-dark);
+  margin: 0;
+}
+.header__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: 100%;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.header__visual {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+}
+.header__visual img,
+.header__visual > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+.header__visual--left {
+  width: 160px;
+  height: 160px;
+  top: -20px;
+  left: -20px;
+  bottom: auto;
+  right: auto;
+  will-change: transform;
+}
+.header__visual--right {
+  width: 160px;
+  height: 160px;
+  bottom: -20px;
+  right: -20px;
+  top: auto;
+  left: auto;
+  will-change: transform;
+}
+@media (min-width: 768px) {
+  .header__inner {
+    padding: var(--spacing-40) var(--spacing-24);
+    align-items: center;
+  }
+  .header__content {
+    align-items: center;
+    text-align: center;
+  }
+  .header__text {
+    align-items: center;
+  }
+  .header__buttons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+  }
+}
+@media (min-width: 992px) {
+  .header__inner {
+    padding: var(--spacing-48) var(--spacing-32);
+    position: relative;
+  }
+  .header__content {
+    max-width: var(--content-width-846);
+    width: 100%;
+  }
+  .header__buttons {
+    flex-direction: row;
+    width: auto;
+  }
+  .header--visuals .header__visual--left {
+    width: 241px;
+    height: 241px;
+    top: 48px;
+    left: 48px;
+    bottom: auto;
+    right: auto;
+  }
+  .header--visuals .header__visual--right {
+    width: 241px;
+    height: 241px;
+    bottom: 48px;
+    right: 48px;
+    top: auto;
+    left: auto;
+  }
+}
+
 /* templates/Stats/Stats.css */
 :root {
   --stats-bg: var(--color-slate-50);
@@ -6000,9 +6020,10 @@
   text-align: center;
 }
 .tbl-section__title {
-  font-size: var(--typography-h2-font-size, 2.5rem);
-  font-weight: var(--typography-h2-font-weight, 800);
-  line-height: var(--typography-h2-line-height, 1.2);
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
   color: var(--tbl-text);
   margin: 0;
 }
@@ -6010,7 +6031,7 @@
   width: 100%;
   background-color: var(--tbl-bg);
   font-family: var(--tbl-font-family);
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text);
   box-sizing: border-box;
   border-radius: var(--radius-xl);
@@ -6039,7 +6060,7 @@
   font-size: var(--typography-body-sm-font-size);
 }
 .tbl__summary {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
@@ -6115,7 +6136,7 @@
   align-items: flex-start;
 }
 .tbl__col-label {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   font-weight: var(--font-weight-semi-bold);
   color: var(--tbl-text);
   line-height: 1.4;
@@ -6150,7 +6171,7 @@
   visibility: visible;
 }
 .tbl__global-hint-desc {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-hint-text);
   line-height: 1.5;
 }
@@ -6177,7 +6198,7 @@
   display: block;
 }
 .tbl__cell-text {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text);
   line-height: 1.4;
   white-space: normal;
@@ -6215,7 +6236,7 @@
   height: 1rem;
 }
 .tbl-section__info-text {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text-muted);
   line-height: 1.5;
   margin: 0;