@repobit/dex-system-design 0.23.8 → 0.23.10

package/src/components/awards/awards.css.js

@@ -1,94 +1,124 @@
-import { css } from 'lit';
+import { css } from "lit";
 
+/** Orbit Awards — desktop: Figma 1882:9342 (Frame 14); mobile: 1882:9346 (Frame 15, 360) */
 export const awardsCSS = css`
   :host {
     display: block;
-    font-family: 'Segoe UI', Arial, sans-serif;
-    background: #EDF9FF;
-    color: var(--color-neutral-1000);
-    padding-bottom: var(--spacing-32);
+    font-family: var(--typography-fontFamily-sans);
+    background: var(--layout-awards-section-background);
+    box-sizing: border-box;
+    // padding-bottom: var(--spacing-32);
+  }
+
+  .bd-awards-root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-48);
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding);
+    box-sizing: border-box;
+    max-width: 100%;
   }
 
+  /* Frame 12 — trust cluster 793px, gap 24px intro → badges */
   .bd-awards-trust-banner {
-    border-radius: 8px;
-    margin: var(--spacing-16) auto;
-    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-24);
+    width: 100%;
+    max-width: var(--layout-awards-cluster-max-width);
+    margin: 0 auto;
     text-align: center;
-    padding-top: var(--spacing-24);
+    box-sizing: border-box;
   }
 
-  @media (min-width: 481px) {
-    .bd-awards-trust-banner {
-      padding: var(--spacing-28) var(--spacing-32) var(--spacing-0);
-      margin: var(--spacing-20) auto;
-    }
+  .bd-awards-tagline {
+    color: var(--color-blue-500);
+    font-size: var(--typography-fontSize-lg, 1.125rem);
+    font-weight: 600;
+    letter-spacing: 0.02em;
   }
 
-  @media (min-width: 769px) {
-    .bd-awards-trust-banner {
-      padding: var(--spacing-32) var(--spacing-40) var(--spacing-0);
-      margin: var(--spacing-24) auto;
-      margin-bottom: var(--spacing-16);
-    }
+  .bd-awards-section-title {
+    color: var(--color-blue-500);
+    font-size: var(--typography-fontSize-xl);
+    font-weight: 700;
+    margin: var(--spacing-0) var(--spacing-0) var(--spacing-14);
   }
 
-  .bd-awards-laurel-icon {
-    color: #1565c0;
-    font-size: var(--typography-fontSize-4xl, 2.25rem);
-    margin-bottom: var(--spacing-8);
-    display: block;
+  .bd-awards-feature-title {
+    color: var(--color-blue-500);
+    font-size: var(--typography-fontSize-xl);
+    font-weight: 700;
+    margin: var(--spacing-0) var(--spacing-0) var(--spacing-14);
   }
 
-  .bd-awards-tagline {
+  /* Frame 1 — laurel + copy, gap 16px, max 631px */
+  .bd-awards-trust-intro {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-16);
+    width: 100%;
+    max-width: var(--layout-awards-intro-max-width);
+    box-sizing: border-box;
+  }
+
+  .bd-awards-laurel-icon {
     color: var(--color-blue-500);
-    font-size: var(--typography-fontSize-lg, 1.125rem);
-    font-weight: 600;
-    letter-spacing: 0.02em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-80);
+    height: var(--spacing-80);
+    flex-shrink: 0;
   }
 
-  .bd-awards-headline {
-    font-size: var(--typography-fontSize-2xl) !important;
-    font-weight: 800;
-    line-height: 1.3;
-    color: var(--color-neutral-1000);
-    margin: var(--spacing-0) var(--spacing-0) var(--spacing-12);
+  .bd-awards-laurel-icon bd-icon {
+    --bd-icon-w: var(--spacing-80);
+    --bd-icon-h: var(--spacing-80);
   }
 
-  @media (min-width: 481px) {
-    .bd-awards-headline {
-      font-size: var(--typography-fontSize-2xl) !important;
-    }
+  .bd-awards-laurel-icon svg {
+    width: 100%;
+    height: 100%;
   }
 
-  @media (min-width: 769px) {
-    .bd-awards-headline {
-      font-size: var(--typography-fontSize-3xl) !important;
-    }
+  .bd-awards-headline-line {
+    display: block;
+    width: 100%;
+    white-space: normal;
+    word-break: break-word;
   }
 
-  .bd-awards-subtext {
-    font-size: var(--typography-fontSize-sm);
-    color: var(--color-neutral-1000);
-    line-height: 1.55;
-    margin: var(--spacing-0) var(--spacing-0) var(--spacing-24);
-    padding: var(--spacing-8) var(--spacing-40);
+  .bd-awards-trust-intro .bd-awards-subtext {
+    width: 100%;
+    max-width: 100%;
+    padding: 0 var(--spacing-8);
+    box-sizing: border-box;
   }
 
-  @media (min-width: 481px) {
-    .bd-awards-subtext {
-      font-size: var(--typography-fontSize-base);
-      padding: var(--spacing-8) var(--spacing-16);
+  @media (min-width: 576px) {
+    .bd-awards-trust-intro .bd-awards-subtext {
+      padding: 0 var(--spacing-16);
     }
   }
 
-  /* Awards Bar */
+  .bd-awards-secret-section .bd-awards-section-title {
+    display: block;
+    margin: 0 0 var(--spacing-16);
+  }
+
+  /* Single badge strip */
   .bd-awards-bar {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: var(--spacing-8);
-    border-radius: var(--radius-none) var(--radius-none) var(--radius-md) var(--radius-md);
-    padding: var(--spacing-10) var(--spacing-8);
+    align-items: center;
+    gap: var(--spacing-32);
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .bd-awards-badge {
@@ -100,196 +130,99 @@ export const awardsCSS = css`
     padding: var(--spacing-0);
   }
 
-  /* Desktop Awards */
-  .bd-awards-desktop {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
-    gap: 24px;
-    align-items: center;
+  /* Desktop: rows are invisible wrappers */
+  .bd-awards-row {
+    display: contents;
   }
 
-  /* Mobile Awards - hidden on desktop */
-  .bd-awards-mobile {
+  /* Mobile rows hidden on desktop */
+  .bd-awards-row--mobile-only {
     display: none;
   }
 
-  /* Mobile styles (max-width: 599px) */
-  @media (max-width: 599px) {
-    .bd-awards-desktop {
-      display: none !important;
-    }
-
-    .bd-awards-mobile {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-8);
-      padding: var(--spacing-10) var(--spacing-4);
-    }
-
-    .bd-awards-mobile-row {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      gap: var(--spacing-18);
-    }
-
-    .bd-awards-mobile .bd-awards-badge svg,
-    .bd-awards-mobile .bd-awards-badge svg * {
-      stroke: none !important;
-      stroke-width: 0 !important;
-      outline: none !important;
-      border: none !important;
-    }
-
-    .bd-awards-mobile .bd-awards-badge svg rect {
-      stroke: none !important;
-      stroke-width: 0 !important;
-    }
-
-    .bd-awards-mobile .bd-awards-badge svg [stroke] {
-      stroke: none !important;
-    }
-
-    /* Bottom row - flexbox for tight centering, no empty gaps */
-    .bd-awards-mobile-row--bottom {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      gap: 12px;
-      padding-top: var(--spacing-8);
-    }
+  /* All badges: uniform height from token, width from each SVG's natural aspect ratio */
+  .bd-awards-badge bd-icon {
+    --bd-icon-h: var(--spacing-64);
+    --bd-icon-w: auto;
+  }
 
-    .bd-awards-mobile-row--bottom .bd-awards-badge {
-      padding: var(--spacing-0);
-      margin: var(--spacing-0);
-    }
+  /* ── Lower block ── */
 
-    .bd-awards-secret-section bd-p[kind="regular"] {
-      font-size: var(--typography-fontSize-sm);
-      line-height: 1.5;
-    }
+  .bd-awards-lower {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-32);
+    width: 100%;
+    max-width: 1228px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-24);
+    box-sizing: border-box;
   }
 
-  /* Secret Section */
   .bd-awards-secret-section {
     text-align: center;
-    padding: var(--spacing-0) var(--spacing-16) var(--spacing-16);
-    max-width: 849px;
-    margin: var(--spacing-0) auto;
+    padding: 0 var(--spacing-16) var(--spacing-16);
+    width: 100%;
+    box-sizing: border-box;
   }
 
-  @media (min-width: 481px) {
+  @media (min-width: 576px) {
     .bd-awards-secret-section {
       padding: var(--spacing-8) var(--spacing-20) var(--spacing-16);
     }
   }
 
-  @media (min-width: 769px) {
+  @media (min-width: 768px) {
     .bd-awards-secret-section {
       padding: var(--spacing-8) var(--spacing-24) var(--spacing-16);
     }
   }
 
-  .bd-awards-section-title {
-    color: var(--color-blue-500);
-    font-size: var(--typography-fontSize-xl);
-    font-weight: 700;
-    margin: var(--spacing-0) var(--spacing-0) var(--spacing-14);
-  }
-
-  @media (min-width: 481px) {
-    .bd-awards-section-title {
-      font-size: var(--typography-fontSize-2xl);
-    }
-  }
-
-  @media (min-width: 769px) {
-    .bd-awards-section-title {
-      font-size: var(--typography-fontSize-2xl);
-    }
-  }
-
-  .bd-awards-section-subtext {
-    font-size: var(--typography-fontSize-sm);
-    color: var(--color-neutral-1000);
-    line-height: 1.6;
-    margin: var(--spacing-0);
-  }
+  /* ── Feature cards grid ── */
 
-  /* Feature Cards */
   .bd-awards-features-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--spacing-16);
-    max-width: 849px;
-    margin: var(--spacing-20) auto var(--spacing-32);
-    padding: var(--spacing-0) var(--spacing-16);
-  }
-
-  @media (min-width: 481px) {
-    .bd-awards-features-grid {
-      padding: var(--spacing-0) var(--spacing-20);
-      margin: var(--spacing-22) auto var(--spacing-36);
-    }
+    gap: var(--spacing-32);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
   }
 
-  @media (min-width: 560px) {
+  @media (min-width: 768px) {
     .bd-awards-features-grid {
       grid-template-columns: 1fr 1fr;
-      gap: var(--spacing-20);
-      padding: var(--spacing-0) var(--spacing-24);
-      margin: var(--spacing-24) auto var(--spacing-40);
+      gap: var(--spacing-32);
     }
   }
 
+  /* ── Feature card ── */
+
   .bd-awards-feature-card {
-    background: var(--color-neutral-0);
+    background: var(--color-neutral-25, #fafafa);
     border-radius: var(--radius-3xl);
-    padding: var(--spacing-24) var(--spacing-20);
-    text-align: left;
-  }
-
-  @media (min-width: 481px) {
-    .bd-awards-feature-card {
-      padding: var(--spacing-24) var(--spacing-22);
-    }
-  }
-
-  @media (min-width: 769px) {
-    .bd-awards-feature-card {
-      padding: var(--spacing-28) var(--spacing-24);
-    }
-  }
-
-  .bd-awards-laurel-icon {
-    width: 100px;
-    height: 100px;
-    margin: 0 auto 24px;
+    padding: var(--spacing-32);
     display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .bd-awards-laurel-icon svg {
-    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    box-sizing: border-box;
     height: 100%;
+    text-align: left;
   }
 
-  @media (max-width: 599px) {
-    .bd-awards-laurel-icon {
-      width: 80px;
-      height: 80px;
-      margin-bottom: 16px;
-    }
+  .bd-awards-feature-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    align-self: stretch;
   }
 
   .bd-awards-feature-icon {
-    width: 48px;
-    height: 48px;
-    margin-bottom: 24px;
+    flex-shrink: 0;
+    width: var(--icon-2xl-size);
+    height: var(--icon-2xl-size);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -307,22 +240,92 @@ export const awardsCSS = css`
     object-fit: contain;
   }
 
-  @media (max-width: 599px) {
-    .bd-awards-feature-icon {
-      width: 32px;
-      height: 32px;
-      margin-bottom: 16px;
-    }
-  }
-
-  .bd-awards-badge--dark bd-icon svg,
-  .bd-awards-badge--dark bd-icon img {
-    filter: brightness(0.9);
+  .bd-awards-feature-card .bd-awards-feature-title {
+    display: block;
+    margin: 0;
   }
 
-  /* Badge img reset */
   .bd-awards-badge img {
     display: block;
     object-fit: contain;
   }
+
+  /* ── Mobile (≤ 599px) ── */
+
+  @media (max-width: 599px) {
+    .bd-awards-root {
+      padding: var(--spacing-24);
+      gap: var(--spacing-24);
+    }
+
+    .bd-awards-trust-banner {
+      align-items: stretch;
+      max-width: 100%;
+    }
+
+    .bd-awards-trust-intro {
+      gap: var(--spacing-8);
+      max-width: none;
+      padding: 0 var(--spacing-24);
+      box-sizing: border-box;
+    }
+
+    .bd-awards-laurel-icon {
+      width: var(--spacing-40);
+      height: var(--spacing-40);
+    }
+
+    .bd-awards-laurel-icon bd-icon {
+      --bd-icon-w: var(--spacing-40);
+      --bd-icon-h: var(--spacing-40);
+    }
+
+    .bd-awards-trust-intro .bd-awards-subtext {
+      padding: 0;
+    }
+
+    .bd-awards-bar {
+      // flex-direction: column;
+      align-items: center;
+      // gap: var(--spacing-16);
+    }
+
+    /* Hide desktop rows (3+3+1), show mobile rows (3+4) */
+    .bd-awards-row--desktop-only {
+      display: none;
+    }
+
+    .bd-awards-row--mobile-only {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: var(--spacing-16);
+      width: 100%;
+    }
+
+    /* Mobile badge height — half of desktop */
+    .bd-awards-badge bd-icon {
+      --bd-icon-h: var(--spacing-32);
+      --bd-icon-w: auto;
+    }
+
+    .bd-awards-lower {
+      gap: var(--spacing-16);
+      padding: 0 var(--spacing-8);
+    }
+
+    .bd-awards-secret-section .bd-awards-section-title {
+      margin-bottom: var(--spacing-8);
+    }
+
+    .bd-awards-secret-section {
+      padding: 0 var(--spacing-24) var(--spacing-16);
+    }
+
+    .bd-awards-features-grid {
+      gap: var(--spacing-32);
+      padding: 0;
+    }
+  }
 `;