Merge pull request 'finn-staging' (#10 ) from finn-staging into main

Reviewed-on: #10
fix(feat): Change styling for responsive layout
2026-05-19 02:55:57 +00:00 · 2026-05-19 10:51:38 +08:00 · 2026-05-18 16:03:09 +08:00 · 2026-05-18 15:58:05 +08:00
3 changed files with 249 additions and 197 deletions
--- a/src/styles/download.css
+++ b/src/styles/download.css
@@ -232,7 +232,7 @@ a.store-badge {
    height: 292px;
 }

-@media (min-width: 577px) {
+@media (min-width: 578px) {
    .download-cta__phone {
        width: min(418px, calc(100vw - 32px));
        height: auto;
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -92,7 +92,7 @@
 }

 .experience-card__image--one {
-    top: -86.50%;
+    top: -86.5%;
    left: 0;
    width: 100%;
    height: 298.5%;
@@ -316,7 +316,7 @@
    color: #7a726d;
 }

-@media (max-width: 640px) {
+@media (max-width: 578px) {
    .use-cases__rows {
        gap: 24px;
        overflow: visible;
@@ -368,7 +368,7 @@
    }
 }

-@media (min-width: 1024px) {
+@media (min-width: 578px) {
    .experience__grid {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }
@@ -384,7 +384,7 @@
    }
 }

-@media (min-width: 640px) {
+@media (min-width: 578px) {
    .use-case-row {
        grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr);
        height: 120px;
@@ -425,6 +425,12 @@
    }
 }

+@media (min-width: 576px) {
+    .experience-card__title {
+        white-space: nowrap;
+    }
+}
+
@media (min-width: 1024px) {
    .experience {
        padding-top: 60px;
@@ -432,10 +438,6 @@
        padding-left: 36px;
        padding-right: 36px;
    }
-
-    .experience-card__title {
-        white-space: nowrap;
-    }
 }

@media (min-width: 1200px) {
@@ -452,7 +454,7 @@
    }
 }

-@media (min-width: 1295px) {
+@media (min-width: 1201px) {
    .use-cases {
        padding: 60px 64px;
    }
--- a/src/styles/trust.css
+++ b/src/styles/trust.css
@@ -1,278 +1,328 @@
 .trust {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 60px 16px;
-  background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 60px 16px;
+    background: #fff;
 }

 .trust__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  max-width: 1280px;
-  gap: 40px;
-  margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 1280px;
+    gap: 40px;
+    margin: 0 auto;
 }

 .trust__header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  gap: 24px;
-  overflow: clip;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 24px;
+    overflow: clip;
 }

 .trust__title {
-  width: 100%;
-  margin: 0;
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: var(--ls-28);
-  color: #1a1a1a;
+    width: 100%;
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: var(--ls-28);
+    color: #1a1a1a;
 }

 .trust__description {
-  width: 100%;
-  margin: 0;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 1.5;
-  letter-spacing: var(--ls-15);
-  color: #7a726d;
+    width: 100%;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: var(--ls-15);
+    color: #7a726d;
 }

 .trust__grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 32px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: 32px;
 }

 .trust-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 0;
-  gap: 16px;
-  padding: 24px;
-  border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 0;
+    gap: 16px;
+    padding: 24px;
+    border-radius: 30px;
 }

 .trust-card__icon-frame {
-  position: relative;
-  flex-shrink: 0;
-  width: 128px;
-  height: 128px;
+    position: relative;
+    flex-shrink: 0;
+    width: 128px;
+    height: 128px;
 }

 .trust-card__icon-crop {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
 }

 .trust-card__icon {
-  position: absolute;
-  max-width: none;
+    position: absolute;
+    max-width: none;
 }

 .trust-card__icon--one {
-  top: 7.04%;
-  left: -31.48%;
-  width: 312.73%;
-  height: 174.55%;
+    top: 7.04%;
+    left: -31.48%;
+    width: 312.73%;
+    height: 174.55%;
 }

 .trust-card__icon--two {
-  top: 3.1%;
-  left: -164.72%;
-  width: 335.61%;
-  height: 187.32%;
+    top: 3.1%;
+    left: -164.72%;
+    width: 335.61%;
+    height: 187.32%;
 }

 .trust-card__icon--three {
-  top: -105.62%;
-  left: -187.93%;
-  width: 378.86%;
-  height: 211.46%;
+    top: -105.62%;
+    left: -187.93%;
+    width: 378.86%;
+    height: 211.46%;
 }

 .trust-card__icon--four {
-  top: 0;
-  left: 4.14%;
-  width: 100%;
-  height: 100%;
+    top: 0;
+    left: 4.14%;
+    width: 100%;
+    height: 100%;
 }

 .trust-card__copy {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  gap: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 8px;
 }

 .trust-card__title {
-  width: 100%;
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-  letter-spacing: var(--ls-16);
-  color: #0d0d0d;
+    width: 100%;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    letter-spacing: var(--ls-16);
+    color: #0d0d0d;
 }

 .trust-card__description {
-  width: 100%;
-  margin: 0;
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: var(--ls-15);
-  color: #7a726d;
+    width: 100%;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: var(--ls-15);
+    color: #7a726d;
 }

 .trust__divider {
-  position: relative;
-  display: none; /* shown only in desktop flex row via 1023px breakpoint */
-  flex-shrink: 0;
-  width: 0;
-  height: 118px;
+    position: relative;
+    display: none; /* shown only in desktop flex row via 1023px breakpoint */
+    flex-shrink: 0;
+    width: 0;
+    height: 118px;
 }

 .trust__divider-frame {
-  position: absolute;
-  inset: 0 -0.5px;
+    position: absolute;
+    inset: 0 -0.5px;
 }

 .trust__divider-image {
-  display: block;
-  width: 100%;
-  max-width: none;
-  height: 100%;
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: 100%;
 }

-@media (max-width: 1024px) {
-  .trust-card__copy {
-    align-items: center;
-    text-align: center;
-  }
+@media (max-width: 1023px) {
+    .trust-card__copy {
+        align-items: center;
+        text-align: center;
+    }

-  .trust-card__title,
-  .trust-card__description {
-    text-align: center;
-  }
+    .trust-card__title,
+    .trust-card__description {
+        text-align: center;
+    }
 }

@media (min-width: 440px) {
-  .trust {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
+    .trust {
+        padding-left: 20px;
+        padding-right: 20px;
+    }

-  .trust__title {
-    font-size: 32px;
-    letter-spacing: var(--ls-32);
-  }
+    .trust__title {
+        font-size: 32px;
+        letter-spacing: var(--ls-32);
+    }
 }

@media (min-width: 576px) {
-  .trust {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
+    .trust {
+        padding-left: 24px;
+        padding-right: 24px;
+    }

-  .trust__title {
-    font-size: 36px;
-    letter-spacing: var(--ls-36);
-  }
+    .trust__title {
+        font-size: 36px;
+        letter-spacing: var(--ls-36);
+    }
 }

@media (min-width: 768px) {
-  .trust {
-    padding-left: 36px;
-    padding-right: 36px;
-  }
+    .trust {
+        padding-left: 36px;
+        padding-right: 36px;
+    }

-  .trust__title {
-    font-size: 42px;
-    letter-spacing: var(--ls-42);
-  }
+    .trust__title {
+        font-size: 42px;
+        letter-spacing: var(--ls-42);
+    }

-  .trust__grid {
-    position: relative;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+    .trust__grid {
+        position: relative;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
 }

-@media (min-width: 768px) and (max-width: 1024px) {
-  .trust__grid > .trust-card:nth-child(1),
-  .trust__grid > .trust-card:nth-child(5) {
-    position: relative;
-  }
+@media (min-width: 768px) and (max-width: 1023px) {
+    .trust__grid > .trust-card:nth-child(1),
+    .trust__grid > .trust-card:nth-child(5) {
+        position: relative;
+    }

-  .trust__grid > .trust-card:nth-child(1)::after,
-  .trust__grid > .trust-card:nth-child(5)::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: -16px;
-    transform: translateY(-50%);
-    width: 0;
-    height: 118px;
-    border-left: 1px solid rgba(240, 132, 88, 0.5);
-  }
+    .trust__grid > .trust-card:nth-child(1)::after,
+    .trust__grid > .trust-card:nth-child(5)::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: -16px;
+        transform: translateY(-50%);
+        width: 0;
+        height: 118px;
+        border-left: 1px solid rgba(240, 132, 88, 0.5);
+    }
 }

@media (min-width: 1024px) {
-  .trust {
-    padding-top: 60px;
-    padding-bottom: 60px;
-    padding-left: 36px;
-    padding-right: 36px;
-  }
+    .trust {
+        padding-top: 60px;
+        padding-bottom: 60px;
+        padding-left: 28px;
+        padding-right: 28px;
+    }

-  .trust__grid {
-    display: flex;
-    gap: 24px;
-  }
+    .trust__grid {
+        display: flex;
+        gap: 14px;
+    }

-  .trust-card {
-    flex: 1;
-  }
+    .trust-card {
+        flex: 1;
+        padding: 16px 8px;
+    }

-  .trust__divider {
-    display: block;
-  }
+    .trust-card__icon-frame {
+        width: 112px;
+        height: 112px;
+    }
+
+    .trust-card__copy {
+        align-items: center;
+        text-align: center;
+    }
+
+    .trust-card__title {
+        font-size: 15px;
+        line-height: 20px;
+        letter-spacing: var(--ls-15);
+        text-align: center;
+    }
+
+    .trust-card__description {
+        font-size: 14px;
+        line-height: 1.45;
+        letter-spacing: var(--ls-14);
+        text-align: center;
+    }
+
+    .trust__divider {
+        display: block;
+    }
 }

@media (min-width: 1200px) {
-  .trust__title {
-    font-size: 48px;
-    letter-spacing: var(--ls-48);
-  }
+    .trust__title {
+        font-size: 48px;
+        letter-spacing: var(--ls-48);
+    }

-  .trust__description {
-    font-size: 18px;
-    letter-spacing: var(--ls-18);
-  }
+    .trust__description {
+        font-size: 18px;
+        letter-spacing: var(--ls-18);
+    }
+
+    .trust__grid {
+        gap: 24px;
+    }
+
+    .trust-card {
+        padding: 24px;
+    }
+
+    .trust-card__icon-frame {
+        width: 128px;
+        height: 128px;
+    }
+
+    .trust-card__title {
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: var(--ls-16);
+    }
+
+    .trust-card__description {
+        font-size: 15px;
+        line-height: 1.5;
+        letter-spacing: var(--ls-15);
+    }
 }

@media (min-width: 1376px) {
-  .trust {
-    padding-top: 120px;
-    padding-bottom: 120px;
-    padding-left: 120px;
-    padding-right: 120px;
-  }
+    .trust {
+        padding-top: 120px;
+        padding-bottom: 120px;
+        padding-left: 120px;
+        padding-right: 120px;
+    }
 }
Author	SHA1	Message	Date
Finn	9f58001a56	Merge pull request 'finn-staging' (#10 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 33s Details Reviewed-on: #10	2026-05-19 02:55:57 +00:00
SeekingGamer	2a2d5fb9e5	fix(feat): Change styling for responsive layout	2026-05-19 10:51:38 +08:00
SeekingGamer	0220aa5ff8	fix(style): compact reliability row at 1024	2026-05-18 16:03:09 +08:00
SeekingGamer	7f7b44415e	fix(style): keep reliability grid at tablet widths	2026-05-18 15:58:05 +08:00