@deriv-web-design/ui 0.0.17 → 0.0.19

package/dist/index.css

@@ -1517,6 +1517,37 @@
   flex-shrink: 0;
 }
 
+/* primitives/Tabs/Tabs.css */
+:root {
+  --tabs-gap: var(--spacing-8);
+}
+.tabs-menu {
+  display: flex;
+  align-items: center;
+  gap: var(--tabs-gap);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding-bottom: var(--spacing-4);
+  margin-bottom: calc(var(--spacing-4) * -1);
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.tabs-menu::-webkit-scrollbar {
+  display: none;
+}
+.tabs-menu .chip {
+  white-space: nowrap;
+}
+.tabs-menu .chip.selected {
+  background-color: var(--color-slate-1200);
+  border-color: var(--color-slate-1200);
+  color: var(--color-slate-50);
+}
+.tabs-menu .chip.selected .label {
+  font-weight: var(--font-weight-regular);
+}
+
 /* templates/FeatureCards/FeatureCards.css */
 .fc-section {
   width: 100%;
@@ -1653,161 +1684,516 @@
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
-/* components/Footer/Footer.css */
-.footer {
-  background-color: var(--footer-background);
-  width: 100%;
-  font-family: var(--font-family-base);
+.fcs-grid--twoCards {
+  grid-template-columns: 1fr;
+  gap: var(--spacing-24);
+  align-items: stretch;
 }
-.footer__inner {
+@media (min-width: 768px) {
+  .fcs-grid--twoCards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 992px) {
+  .fcs-grid--twoCards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+.fcs-twoCardWrap {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-32);
-  padding: var(--spacing-32) var(--spacing-16);
+  align-self: stretch;
+  min-width: 0;
   width: 100%;
-  max-width: 640px;
-  min-width: 320px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  overflow: hidden;
+  min-height: 0;
 }
-.footer__header {
+.fcs-twoCard {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-24);
-  border-bottom: 1px solid var(--footer-header-divider);
-  padding-bottom: var(--spacing-32);
+  flex: 1;
+  flex-direction: column;
+  min-height: min-content;
+  min-width: 0;
   width: 100%;
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.footer__logo-wrapper {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
+.fcs-twoCard--light {
+  background-color: var(--color-slate-75);
 }
-.footer__logo {
-  height: 32px;
-  width: auto;
-  min-width: 1px;
-  display: block;
+.fcs-twoCard--dark {
+  background-color: var(--color-slate-1200);
 }
-.footer__social {
+.fcs-twoCard-body {
+  flex: 0 0 auto;
   display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  flex-shrink: 0;
+  flex-direction: column;
+  gap: 0;
+  padding: var(--spacing-32);
 }
-.footer__social--in-header {
-  display: none;
+.fcs-twoCard:not(:has(.fcs-twoCard-imageSection)) .fcs-twoCard-body {
+  flex: 1 1 auto;
 }
-.footer__social--standalone {
+.fcs-twoCard-content {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-8);
-  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-16);
 }
-.footer__social-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--footer-social-icon-color);
-  text-decoration: none;
-  flex-shrink: 0;
-  overflow: hidden;
+.fcs-twoCard-title {
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+  color: var(--text-primary);
+  margin: 0;
 }
-.footer__social-icon svg {
-  width: 16px;
-  height: 16px;
-  display: block;
+.fcs-twoCard--dark .fcs-twoCard-title {
+  color: var(--color-slate-50);
 }
-.footer__social-icon:hover {
-  opacity: 0.8;
+.fcs-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);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--color-slate-1200);
+  margin: 0;
 }
-.footer__ai-bar.footer__ai-bar--inline {
-  display: none;
+.fcs-twoCard--dark .fcs-twoCard-description {
+  color: var(--color-slate-50);
 }
-.footer__ai-section {
-  border-bottom: 1px solid var(--footer-header-divider);
-  padding-bottom: var(--spacing-32);
-  width: 100%;
-  box-sizing: border-box;
+.fcs-twoCard-linkWrap {
+  margin-top: 0;
 }
-.footer__ai-bar {
-  background-color: var(--footer-surface);
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-16);
+.fcs-twoCard-platformsOuter {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: var(--spacing-16);
+  margin-top: var(--spacing-24);
+  flex-shrink: 0;
 }
-.footer__ai-bar--block {
-  flex-direction: column;
+.fcs-twoCard-platformsHeading {
+  margin: 0;
+  font-family: var(--typography-body-lg-font-family);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--typography-body-lg-line-height);
+  color: var(--text-primary);
 }
-.footer__ai-bar-label {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-xs);
+.fcs-twoCard--dark .fcs-twoCard-platformsHeading {
   color: var(--color-slate-50);
-  text-align: center;
-  white-space: nowrap;
 }
-.footer__ai-bar-icons {
+.fcs-twoCard--light .fcs-twoCard-platformsHeading {
+  color: var(--text-primary);
+}
+.fcs-twoCard-platformRow {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+.fcs-platformLink {
+  display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
+  text-decoration: none;
+  color: var(--text-primary);
 }
-.footer__ai-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-md);
+.fcs-platformLink:hover {
+  text-decoration: underline;
+}
+.fcs-platformLink:focus-visible {
+  outline: 2px solid var(--color-coral-700);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+.fcs-platformLink--dark {
+  color: var(--color-slate-50);
+}
+.fcs-platformLink-icon {
   display: block;
-  object-fit: cover;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  object-fit: contain;
 }
-.footer__nav--columns {
-  display: none;
+.fcs-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);
 }
-.footer__column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-32);
-  flex: 1 0 0;
+.fcs-twoCard-imageSection {
+  margin-top: auto;
+  flex: 0 0 auto;
+  width: 100%;
+  aspect-ratio: 592 / 363.51;
+  position: relative;
+  overflow: hidden;
+  background-color: transparent;
 }
-.footer__nav-section {
-  display: flex;
-  flex-direction: column;
+.fcs-twoCard-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: bottom center;
+  display: block;
+}
+.fcs-oneCardShell {
+  width: 100%;
+  box-sizing: border-box;
+}
+.fcs-oneCardGrid {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  align-items: stretch;
   gap: var(--spacing-16);
+  width: 100%;
+  max-width: calc(64 * var(--spacing-16));
+  margin-inline: auto;
+  border-radius: var(--spacing-32);
+  overflow: hidden;
 }
-.footer__nav-title {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--line-height-md);
-  color: var(--footer-nav-title-color);
-  margin: 0;
-  white-space: nowrap;
+@media (min-width: 768px) {
+  .fcs-oneCardGrid {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    max-height: calc(30 * var(--spacing-16));
+    min-height: calc(30 * var(--spacing-16));
+  }
 }
-.footer__nav-links {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.fcs-oneCardLeft {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-16);
+  gap: 0;
+  padding: var(--spacing-32);
+  box-sizing: border-box;
+  min-height: 0;
+  min-width: 0;
 }
-.footer__nav--accordion {
+.fcs-oneCardContentBlock {
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-16);
+  min-width: 0;
+}
+.fcs-oneCardRight {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  background-color: var(--color-slate-1200);
+  box-sizing: border-box;
+}
+@media (max-width: 767px) {
+  .fcs-oneCardRight {
+    padding: 0 var(--spacing-16);
+  }
+}
+.fcs-oneCardImage {
+  display: block;
   width: 100%;
+  height: auto;
+  margin: 0;
+  object-fit: contain;
+  object-position: center bottom;
 }
-.footer__accordion-item {
+@media (min-width: 768px) {
+  .fcs-oneCardRight {
+    padding: 0;
+  }
+  .fcs-oneCardImage {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+}
+
+/* templates/FeatureBullets/FeatureBullets.module.css */
+.section {
   width: 100%;
+  background-color: var(--color-slate-50);
 }
-.footer__accordion-toggle {
+.container {
+  display: flex;
+  flex-direction: column;
+  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) {
+  .container {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.split {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-24);
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .split {
+    flex-direction: row;
+    align-items: center;
+    gap: 8rem;
+  }
+  .split--image-left {
+    flex-direction: row-reverse;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-24);
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .content {
+    gap: var(--spacing-32);
+    width: 540px;
+    flex-shrink: 0;
+  }
+}
+.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;
+}
+.bulletList {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bulletItem {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  padding: var(--spacing-16) 0;
+  border-bottom: 1px solid var(--color-slate-100);
+}
+.bulletItem:first-child {
+  padding-top: 0;
+}
+.bulletItem:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  color: var(--color-slate-1200);
+  margin-top: 2px;
+}
+.icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.bulletText {
+  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;
+}
+.imageWrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+  background-color: transparent;
+}
+@media (min-width: 992px) {
+  .imageWrapper {
+    flex: 1 0 0;
+    width: auto;
+    border-radius: 2rem;
+  }
+}
+.image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+
+/* components/Footer/Footer.css */
+.footer {
+  background-color: var(--footer-background);
+  width: 100%;
+  font-family: var(--font-family-base);
+}
+.footer__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-32);
+  padding: var(--spacing-32) var(--spacing-16);
+  width: 100%;
+  max-width: 640px;
+  min-width: 320px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.footer__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-24);
+  border-bottom: 1px solid var(--footer-header-divider);
+  padding-bottom: var(--spacing-32);
+  width: 100%;
+}
+.footer__logo-wrapper {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.footer__logo {
+  height: 32px;
+  width: auto;
+  min-width: 1px;
+  display: block;
+}
+.footer__social {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-shrink: 0;
+}
+.footer__social--in-header {
+  display: none;
+}
+.footer__social--standalone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+.footer__social-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--footer-social-icon-color);
+  text-decoration: none;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.footer__social-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+.footer__social-icon:hover {
+  opacity: 0.8;
+}
+.footer__ai-bar.footer__ai-bar--inline {
+  display: none;
+}
+.footer__ai-section {
+  border-bottom: 1px solid var(--footer-header-divider);
+  padding-bottom: var(--spacing-32);
+  width: 100%;
+  box-sizing: border-box;
+}
+.footer__ai-bar {
+  background-color: var(--footer-surface);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-16);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+.footer__ai-bar--block {
+  flex-direction: column;
+}
+.footer__ai-bar-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-xs);
+  color: var(--color-slate-50);
+  text-align: center;
+  white-space: nowrap;
+}
+.footer__ai-bar-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.footer__ai-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-md);
+  display: block;
+  object-fit: cover;
+}
+.footer__nav--columns {
+  display: none;
+}
+.footer__column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  flex: 1 0 0;
+}
+.footer__nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.footer__nav-title {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-md);
+  color: var(--footer-nav-title-color);
+  margin: 0;
+  white-space: nowrap;
+}
+.footer__nav-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.footer__nav--accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.footer__accordion-item {
+  width: 100%;
+}
+.footer__accordion-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2933,12 +3319,17 @@
   border-radius: var(--radius-2xl);
   padding: var(--spacing-24);
   width: 100%;
+  max-width: 414px;
   overflow: hidden;
   position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  --stats-value-featured-size: 4rem;
+  --stats-value-featured-lh: 4.5rem;
+  --stats-value-size: 2.5rem;
+  --stats-value-lh: 3rem;
 }
 .stats__card-track {
   position: relative;
@@ -3021,8 +3412,8 @@
 }
 .stats__award-image {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 140px;
+  height: auto;
   object-fit: contain;
   object-position: center;
 }
@@ -3034,15 +3425,36 @@
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-16);
   width: 100%;
+  max-width: 414px;
 }
-@media (min-width: 768px) {
-  .stats__header {
-    align-items: center;
+.stats__awards-mobile .stats__award {
+  width: 100%;
+}
+.stats__awards-mobile .stats__award-image {
+  width: 100%;
+  height: auto;
+}
+@media (min-width: 768px) {
+  .stats__header {
+    align-items: center;
     text-align: center;
   }
   .stats__inner {
     gap: var(--spacing-48);
   }
+  .stats__card {
+    padding: var(--spacing-72);
+    --stats-value-featured-size: var(--font-size-5xl);
+    --stats-value-featured-lh: var(--line-height-5xl);
+    --stats-value-size: var(--font-size-3xl);
+    --stats-value-lh: var(--line-height-3xl);
+  }
+  .stats__card-track {
+    height: 270px;
+  }
+  .stats__fade {
+    height: 65px;
+  }
 }
 @media (min-width: 992px) {
   .stats__inner {
@@ -3062,6 +3474,7 @@
   }
   .stats__card {
     width: 414px;
+    max-width: none;
     height: 414px;
     padding: var(--spacing-72);
     flex-shrink: 0;
@@ -3079,14 +3492,15 @@
     width: 196px;
     flex-shrink: 0;
     align-items: center;
+    will-change: transform;
   }
   .stats__awards-col--left,
   .stats__awards-col--right {
     justify-content: center;
   }
   .stats__awards-col .stats__award-image {
-    width: 140px;
-    height: 140px;
+    width: 196px;
+    height: auto;
   }
   .stats__awards-mobile {
     display: none;
@@ -3342,7 +3756,7 @@
   --ssc-content-gap: var(--spacing-24);
   --ssc-sticky-top: var(--spacing-80);
   --ssc-peek-offset: var(--spacing-16);
-  --ssc-card-min-height: 60vh;
+  --ssc-card-min-height: 31.25rem;
   --ssc-img-height-mobile: 21rem;
 }
 .ssc {
@@ -4686,6 +5100,12 @@
 .dnt__btn:hover {
   background-color: var(--dnt-btn-bg-hover);
 }
+@media screen and (max-width: 991px) {
+  .dnt__btn {
+    width: 100%;
+    align-self: stretch;
+  }
+}
 
 /* templates/LogoMarquee/LogoMarquee.css */
 :root {
@@ -4928,9 +5348,9 @@
   --download-badge-transition: opacity 100ms ease, box-shadow 100ms ease;
   --download-badge-focus-color: var(--color-blue-600);
   --download-badge-light-bg: var(--color-slate-50);
-  --download-badge-light-border: var(--spacing-2) solid var(--color-slate-1200);
+  --download-badge-light-border: 1px solid var(--color-slate-1200);
   --download-badge-dark-bg: var(--color-slate-800);
-  --download-badge-dark-border: var(--spacing-2) solid transparent;
+  --download-badge-dark-border: 1px solid transparent;
   --download-badge-img-height: var(--spacing-32);
 }
 .download-badge {
@@ -5168,6 +5588,7 @@
   .db-card {
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
     gap: var(--spacing-80);
     padding: var(--spacing-48);
   }
@@ -5220,24 +5641,24 @@
   }
 }
 .db-qr-text__title--desktop {
-  font-family: var(--typography-h5-font-family);
-  font-size: var(--typography-h5-font-size);
-  font-weight: var(--typography-h5-font-weight);
-  line-height: var(--typography-h5-line-height);
+  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);
 }
 .db-qr-text__subtitle--desktop {
   margin: 0;
-  font-family: var(--typography-h3-font-family);
-  font-size: var(--typography-h3-font-size);
-  font-weight: var(--typography-h3-font-weight);
-  line-height: var(--typography-h3-line-height);
-}
-.db-qr-text__title--mobile {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
   line-height: var(--typography-h5-line-height);
 }
+.db-qr-text__title--mobile {
+  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);
+}
 .db-section--light .db-qr-text__title--desktop,
 .db-section--light .db-qr-text__title--mobile,
 .db-section--light-2 .db-qr-text__title--desktop,
@@ -5331,4 +5752,670 @@
   white-space: pre-wrap;
   will-change: opacity;
 }
+
+/* templates/StickyMarketCards/StickyMarketCards.css */
+:root {
+  --smc-bg: var(--color-slate-75);
+  --smc-font-family: var(--font-family-base);
+  --smc-header-color: var(--text-primary);
+  --smc-card-light-bg: var(--color-slate-75);
+  --smc-card-light-text: var(--color-slate-1200);
+  --smc-card-coral-bg: var(--color-coral-700);
+  --smc-card-coral-text: var(--color-slate-50);
+  --smc-card-dark-bg: var(--color-slate-1200);
+  --smc-card-dark-text: var(--color-slate-50);
+  --smc-header-size: var(--typography-h2-font-size);
+  --smc-header-lh: var(--typography-h2-line-height);
+  --smc-header-weight: var(--typography-h2-font-weight);
+  --smc-sticky-top: var(--spacing-96);
+  --smc-peek: var(--spacing-16);
+  --smc-padding-v: var(--spacing-32);
+  --smc-padding-h: var(--spacing-64);
+  --smc-min-height: 15.625rem;
+  --smc-gap: var(--spacing-64);
+  --smc-content-gap: var(--spacing-24);
+  --smc-card-dark-rgb:
+    24,
+    28,
+    37;
+  --smc-card-coral-rgb:
+    255,
+    68,
+    79;
+  --smc-card-light-rgb:
+    246,
+    247,
+    248;
+}
+.smc {
+  width: 100%;
+  background-color: var(--smc-bg);
+  font-family: var(--smc-font-family);
+  box-sizing: border-box;
+}
+.smc__inner {
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .smc__inner {
+    padding: var(--spacing-56) var(--spacing-24);
+    gap: var(--spacing-64);
+  }
+}
+@media (min-width: 992px) {
+  .smc__inner {
+    padding: var(--spacing-112) var(--spacing-24);
+    gap: var(--spacing-80);
+  }
+}
+.smc__header-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .smc__header-wrap {
+    align-items: center;
+    text-align: center;
+  }
+}
+.smc__header {
+  font-size: var(--smc-header-size);
+  font-weight: var(--smc-header-weight);
+  line-height: var(--smc-header-lh);
+  color: var(--smc-header-color);
+  margin: 0;
+}
+.smc__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);
+  color: var(--color-slate-1200);
+  margin: 0;
+  max-width: 640px;
+}
+.smc__track {
+  display: flex;
+  flex-direction: column;
+  gap: var(--smc-gap);
+  padding-bottom: var(--spacing-96);
+  width: 100%;
+  max-width: var(--content-width-846);
+  margin: 0 auto;
+}
+.smc__card {
+  position: sticky;
+  top: calc(var(--smc-sticky-top) + var(--smc-card-index) * var(--smc-peek));
+}
+.smc__card-inner {
+  position: relative;
+  border-radius: var(--spacing-32);
+  padding: var(--smc-padding-v) var(--smc-padding-h);
+  min-height: var(--smc-min-height);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  transform-origin: top center;
+  transition: transform 0.1s ease-out, filter 0.1s ease-out;
+  will-change: transform, filter;
+}
+.smc__card-inner--light {
+  background-color: var(--smc-card-light-bg);
+  color: var(--smc-card-light-text);
+}
+.smc__card-inner--coral {
+  background-color: var(--smc-card-coral-bg);
+  color: var(--smc-card-coral-text);
+}
+.smc__card-inner--dark {
+  background-color: var(--smc-card-dark-bg);
+  color: var(--smc-card-dark-text);
+}
+.smc__card-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+.smc__card-bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.smc__card-overlay {
+  position: absolute;
+  inset: 0;
+}
+.smc__card-overlay--dark {
+  background-color: rgba(var(--smc-card-dark-rgb), 0.85);
+}
+.smc__card-overlay--coral {
+  background-color: rgba(var(--smc-card-coral-rgb), 0.85);
+}
+.smc__card-overlay--light {
+  background-color: rgba(var(--smc-card-light-rgb), 0.85);
+}
+.smc__card-content {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr 1.25fr;
+  width: 100%;
+  align-items: center;
+  gap: var(--smc-content-gap);
+}
+.smc__card-title-wrap {
+  flex: 1;
+}
+.smc__card-desc-wrap {
+  flex: 1;
+}
+.smc__card-title {
+  margin: 0;
+  font-family: var(--font-family-base);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+  color: inherit;
+}
+.smc__card-desc {
+  margin: 0;
+  font-family: var(--font-family-base);
+  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: inherit;
+  opacity: 0.95;
+}
+@media (max-width: 767px) {
+  .smc__card-inner {
+    padding: var(--spacing-24) var(--spacing-32);
+  }
+  .smc__card-content {
+    grid-template-columns: 1fr;
+    align-items: flex-start;
+    gap: var(--spacing-24);
+  }
+}
+
+/* templates/Table/Table.css */
+:root {
+  --tbl-bg: var(--color-slate-50);
+  --tbl-border: var(--color-slate-100);
+  --tbl-header-bg: var(--color-slate-75);
+  --tbl-row-hover-bg: var(--color-slate-75);
+  --tbl-text: var(--text-primary);
+  --tbl-text-muted: var(--text-tertiary);
+  --tbl-font-family: var(--font-family-base);
+  --tbl-col-main-width: 11rem;
+  --tbl-col-normal-width: 6rem;
+  --tbl-col-big-width: 14rem;
+  --tbl-row-height: var(--spacing-56);
+  --tbl-cell-px: var(--spacing-16);
+  --tbl-hint-bg: var(--color-slate-1200);
+  --tbl-hint-border: var(--color-slate-1200);
+  --tbl-hint-radius: var(--radius-md);
+  --tbl-hint-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --tbl-hint-width: 13rem;
+  --tbl-hint-text: var(--color-slate-50);
+  --tbl-hint-text-muted: var(--color-slate-300);
+}
+.tbl-section {
+  width: 100%;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  font-family: var(--tbl-font-family);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .tbl-section {
+    padding: var(--spacing-56) var(--spacing-24);
+    gap: var(--spacing-64);
+  }
+}
+@media (min-width: 992px) {
+  .tbl-section {
+    padding: var(--spacing-112) var(--spacing-24);
+    gap: var(--spacing-80);
+  }
+}
+.tbl-section__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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);
+  color: var(--tbl-text);
+  margin: 0;
+}
+.tbl {
+  width: 100%;
+  background-color: var(--tbl-bg);
+  font-family: var(--tbl-font-family);
+  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  color: var(--tbl-text);
+  box-sizing: border-box;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--tbl-border);
+  overflow: hidden;
+}
+.tbl__topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+  padding: var(--spacing-16) var(--spacing-24);
+  border-bottom: 1px solid var(--tbl-border);
+  background-color: var(--tbl-bg);
+  flex-wrap: wrap;
+}
+.tbl__search-wrap {
+  flex: 1;
+  min-width: 160px;
+  max-width: 320px;
+}
+.tbl__search-wrap .sf-wrapper {
+  height: var(--spacing-40);
+}
+.tbl__search-wrap .sf-input {
+  font-size: var(--typography-body-sm-font-size);
+}
+.tbl__summary {
+  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  color: var(--tbl-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.tbl__scroll-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.tbl__table {
+  width: 100%;
+  min-width: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
+  text-align: left;
+}
+.tbl__tr {
+  background-color: var(--tbl-bg);
+  transition: background-color 0.1s;
+  height: var(--tbl-row-height);
+}
+.tbl__tbody .tbl__tr:hover {
+  background-color: var(--tbl-row-hover-bg);
+}
+.tbl__th,
+.tbl__td {
+  padding: var(--spacing-12) var(--tbl-cell-px);
+  box-sizing: border-box;
+  vertical-align: middle;
+  position: relative;
+  width: var(--tbl-col-normal-width);
+  min-width: var(--tbl-col-normal-width);
+  border-bottom: 1px solid var(--tbl-border);
+}
+.tbl__tbody .tbl__tr:last-child .tbl__td {
+  border-bottom: none;
+}
+.tbl__th--big,
+.tbl__td--big {
+  width: var(--tbl-col-big-width);
+  min-width: var(--tbl-col-big-width);
+}
+.tbl__th--main,
+.tbl__td--main {
+  width: var(--tbl-col-main-width);
+  min-width: var(--tbl-col-main-width);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background-color: var(--tbl-bg);
+  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.03);
+}
+.tbl__tbody .tbl__tr:hover .tbl__td--main {
+  background-color: var(--tbl-row-hover-bg);
+}
+.tbl__th {
+  background-color: var(--tbl-header-bg);
+  font-weight: normal;
+  vertical-align: top;
+  padding-bottom: var(--spacing-12);
+  padding-top: var(--spacing-12);
+  position: sticky;
+  top: 0;
+  z-index: 4;
+}
+.tbl__th--main {
+  background-color: var(--tbl-header-bg);
+  z-index: 5;
+}
+.tbl__th-inner {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+}
+.tbl__col-label {
+  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--tbl-text);
+  line-height: 1.4;
+}
+.tbl__col-label--dashed {
+  border-bottom: 1px dashed var(--color-slate-400);
+  cursor: help;
+}
+.tbl__global-hint {
+  position: fixed;
+  z-index: 9999;
+  transform: translate(-50%, -100%);
+  width: var(--tbl-hint-width);
+  background-color: var(--tbl-hint-bg);
+  border: 1px solid var(--tbl-hint-border);
+  border-radius: var(--tbl-hint-radius);
+  box-shadow: var(--tbl-hint-shadow);
+  padding: var(--spacing-12);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.15s, visibility 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  text-transform: none;
+  letter-spacing: normal;
+  white-space: normal;
+}
+.tbl__global-hint--visible {
+  opacity: 1;
+  visibility: visible;
+}
+.tbl__global-hint-desc {
+  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  color: var(--tbl-hint-text);
+  line-height: 1.5;
+}
+.tbl__global-hint-arrow {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: var(--tbl-hint-bg);
+}
+.tbl__cell-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-12);
+  min-width: 0;
+  overflow: hidden;
+}
+.tbl__cell-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  object-fit: contain;
+  flex-shrink: 0;
+  display: block;
+}
+.tbl__cell-text {
+  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  color: var(--tbl-text);
+  line-height: 1.4;
+  white-space: normal;
+  word-break: break-word;
+}
+.tbl__cell-text--bold {
+  font-weight: var(--font-weight-semi-bold);
+}
+.tbl__empty-cell {
+  padding: var(--spacing-48) var(--spacing-24);
+  text-align: center;
+  font-size: var(--typography-body-md-font-size);
+  color: var(--tbl-text-muted);
+}
+.tbl__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--spacing-16) var(--spacing-24);
+  border-top: 1px solid var(--tbl-border);
+  background-color: var(--tbl-bg);
+}
+.tbl-section__info-box {
+  margin-top: var(--spacing-40);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--spacing-8);
+}
+.tbl-section__info-icon {
+  color: var(--color-slate-400);
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  width: 1rem;
+  height: 1rem;
+}
+.tbl-section__info-text {
+  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  color: var(--tbl-text-muted);
+  line-height: 1.5;
+  margin: 0;
+  text-align: left;
+}
+.tbl__pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  width: auto;
+}
+@media (max-width: 767px) {
+  .tbl__topbar {
+    flex-direction: column;
+    align-items: center;
+    padding: var(--spacing-16);
+    gap: var(--spacing-16);
+  }
+  .tbl__search-wrap {
+    max-width: 100%;
+    width: 100%;
+  }
+  .tbl__summary {
+    text-align: center;
+  }
+  .tbl__th--main,
+  .tbl__td--main {
+    width: calc(var(--tbl-col-main-width) * 0.7 + var(--spacing-16));
+    min-width: calc(var(--tbl-col-main-width) * 0.7 + var(--spacing-16));
+  }
+  .tbl__footer {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--spacing-16);
+  }
+  .tbl__pagination-wrap {
+    justify-content: center;
+  }
+}
+
+/* templates/Leaders/Leaders.module.css */
+.section {
+  width: 100%;
+  background-color: var(--color-slate-50);
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+  width: 100%;
+  align-items: center;
+  gap: var(--spacing-48);
+}
+@media (min-width: 992px) {
+  .container {
+    padding: var(--spacing-112) var(--spacing-24);
+    gap: var(--spacing-80);
+  }
+}
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  max-width: var(--content-width-846);
+}
+.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(--color-slate-1200);
+  margin: 0;
+}
+.gridWrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-24);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 992px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-32);
+  }
+}
+.extraCards {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  width: 100%;
+}
+.extraCardsOpen {
+  grid-template-rows: 1fr;
+}
+.extraGrid {
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-24);
+  padding-top: var(--spacing-24);
+}
+@media (min-width: 768px) {
+  .extraGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 992px) {
+  .extraGrid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-32);
+    padding-top: var(--spacing-32);
+  }
+}
+.extraCard {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.extraCardVisible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-24);
+  background-color: var(--color-slate-50);
+  border-radius: var(--radius-2xl);
+  width: 100%;
+}
+.imageWrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-slate-100);
+}
+.image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+.name {
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+  color: var(--color-slate-1200);
+  margin: 0;
+}
+.role {
+  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;
+}
+.link {
+  margin-top: calc(var(--spacing-8) * -1);
+}
+.link :global(.icon) {
+  color: #0072B1 !important;
+}
+.link:hover :global(.icon) {
+  color: #005582 !important;
+}
+.actions {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-top: var(--spacing-16);
+}
 /*# sourceMappingURL=index.css.map */