Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(feat): Change styling for responsive layout

Browse Source
This commit is contained in:
SeekingGamer
2026-05-19 10:51:38 +08:00
parent 0220aa5ff8
commit 2a2d5fb9e5
3 changed files with 238 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/download.css
View File

@@ -232,7 +232,7 @@ a.store-badge {
height: 292px; height: 292px;
} }
@media (min-width: 577px) { @media (min-width: 578px) {
.download-cta__phone { .download-cta__phone {
width: min(418px, calc(100vw - 32px)); width: min(418px, calc(100vw - 32px));
height: auto; height: auto;

20
src/styles/sections.css
View File

@@ -92,7 +92,7 @@
} }
.experience-card__image--one { .experience-card__image--one {
top: -86.50%; top: -86.5%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 298.5%; height: 298.5%;
@@ -316,7 +316,7 @@
color: #7a726d; color: #7a726d;
} }
@media (max-width: 640px) { @media (max-width: 578px) {
.use-cases__rows { .use-cases__rows {
gap: 24px; gap: 24px;
overflow: visible; overflow: visible;
@@ -368,7 +368,7 @@
} }
} }
@media (min-width: 1024px) { @media (min-width: 578px) {
.experience__grid { .experience__grid {
grid-template-columns: repeat(2, minmax(0, 320px)); grid-template-columns: repeat(2, minmax(0, 320px));
} }
@@ -384,7 +384,7 @@
} }
} }
@media (min-width: 640px) { @media (min-width: 578px) {
.use-case-row { .use-case-row {
grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr); grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr);
height: 120px; height: 120px;
@@ -425,6 +425,12 @@
} }
} }
@media (min-width: 576px) {
.experience-card__title {
white-space: nowrap;
}
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.experience { .experience {
padding-top: 60px; padding-top: 60px;
@@ -432,10 +438,6 @@
padding-left: 36px; padding-left: 36px;
padding-right: 36px; padding-right: 36px;
} }
.experience-card__title {
white-space: nowrap;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@@ -452,7 +454,7 @@
} }
} }
@media (min-width: 1295px) { @media (min-width: 1201px) {
.use-cases { .use-cases {
padding: 60px 64px; padding: 60px 64px;
} }

452
src/styles/trust.css
View File

@@ -1,328 +1,328 @@
.trust { .trust {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 60px 16px; padding: 60px 16px;
background: #fff; background: #fff;
} }
.trust__inner { .trust__inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
max-width: 1280px; max-width: 1280px;
gap: 40px; gap: 40px;
margin: 0 auto; margin: 0 auto;
} }
.trust__header { .trust__header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
gap: 24px; gap: 24px;
overflow: clip; overflow: clip;
} }
.trust__title { .trust__title {
width: 100%; width: 100%;
margin: 0; margin: 0;
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
letter-spacing: var(--ls-28); letter-spacing: var(--ls-28);
color: #1a1a1a; color: #1a1a1a;
} }
.trust__description { .trust__description {
width: 100%; width: 100%;
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
letter-spacing: var(--ls-15); letter-spacing: var(--ls-15);
color: #7a726d; color: #7a726d;
} }
.trust__grid { .trust__grid {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
gap: 32px; gap: 32px;
} }
.trust-card { .trust-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
min-width: 0; min-width: 0;
gap: 16px; gap: 16px;
padding: 24px; padding: 24px;
border-radius: 30px; border-radius: 30px;
} }
.trust-card__icon-frame { .trust-card__icon-frame {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 128px; width: 128px;
height: 128px; height: 128px;
} }
.trust-card__icon-crop { .trust-card__icon-crop {
position: absolute; position: absolute;
inset: 0; inset: 0;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
} }
.trust-card__icon { .trust-card__icon {
position: absolute; position: absolute;
max-width: none; max-width: none;
} }
.trust-card__icon--one { .trust-card__icon--one {
top: 7.04%; top: 7.04%;
left: -31.48%; left: -31.48%;
width: 312.73%; width: 312.73%;
height: 174.55%; height: 174.55%;
} }
.trust-card__icon--two { .trust-card__icon--two {
top: 3.1%; top: 3.1%;
left: -164.72%; left: -164.72%;
width: 335.61%; width: 335.61%;
height: 187.32%; height: 187.32%;
} }
.trust-card__icon--three { .trust-card__icon--three {
top: -105.62%; top: -105.62%;
left: -187.93%; left: -187.93%;
width: 378.86%; width: 378.86%;
height: 211.46%; height: 211.46%;
} }
.trust-card__icon--four { .trust-card__icon--four {
top: 0; top: 0;
left: 4.14%; left: 4.14%;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.trust-card__copy { .trust-card__copy {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
gap: 8px; gap: 8px;
} }
.trust-card__title { .trust-card__title {
width: 100%; width: 100%;
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
letter-spacing: var(--ls-16); letter-spacing: var(--ls-16);
color: #0d0d0d; color: #0d0d0d;
} }
.trust-card__description { .trust-card__description {
width: 100%; width: 100%;
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
letter-spacing: var(--ls-15); letter-spacing: var(--ls-15);
color: #7a726d; color: #7a726d;
} }
.trust__divider { .trust__divider {
position: relative; position: relative;
display: none; /* shown only in desktop flex row via 1023px breakpoint */ display: none; /* shown only in desktop flex row via 1023px breakpoint */
flex-shrink: 0; flex-shrink: 0;
width: 0; width: 0;
height: 118px; height: 118px;
} }
.trust__divider-frame { .trust__divider-frame {
position: absolute; position: absolute;
inset: 0 -0.5px; inset: 0 -0.5px;
} }
.trust__divider-image { .trust__divider-image {
display: block; display: block;
width: 100%; width: 100%;
max-width: none; max-width: none;
height: 100%; height: 100%;
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.trust-card__copy { .trust-card__copy {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.trust-card__title, .trust-card__title,
.trust-card__description { .trust-card__description {
text-align: center; text-align: center;
} }
} }
@media (min-width: 440px) { @media (min-width: 440px) {
.trust { .trust {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.trust__title { .trust__title {
font-size: 32px; font-size: 32px;
letter-spacing: var(--ls-32); letter-spacing: var(--ls-32);
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.trust { .trust {
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.trust__title { .trust__title {
font-size: 36px; font-size: 36px;
letter-spacing: var(--ls-36); letter-spacing: var(--ls-36);
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.trust { .trust {
padding-left: 36px; padding-left: 36px;
padding-right: 36px; padding-right: 36px;
} }
.trust__title { .trust__title {
font-size: 42px; font-size: 42px;
letter-spacing: var(--ls-42); letter-spacing: var(--ls-42);
} }
.trust__grid { .trust__grid {
position: relative; position: relative;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
} }
@media (min-width: 768px) and (max-width: 1023px) { @media (min-width: 768px) and (max-width: 1023px) {
.trust__grid > .trust-card:nth-child(1), .trust__grid > .trust-card:nth-child(1),
.trust__grid > .trust-card:nth-child(5) { .trust__grid > .trust-card:nth-child(5) {
position: relative; position: relative;
} }
.trust__grid > .trust-card:nth-child(1)::after, .trust__grid > .trust-card:nth-child(1)::after,
.trust__grid > .trust-card:nth-child(5)::after { .trust__grid > .trust-card:nth-child(5)::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -16px; right: -16px;
transform: translateY(-50%); transform: translateY(-50%);
width: 0; width: 0;
height: 118px; height: 118px;
border-left: 1px solid rgba(240, 132, 88, 0.5); border-left: 1px solid rgba(240, 132, 88, 0.5);
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.trust { .trust {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
padding-left: 28px; padding-left: 28px;
padding-right: 28px; padding-right: 28px;
} }
.trust__grid { .trust__grid {
display: flex; display: flex;
gap: 14px; gap: 14px;
} }
.trust-card { .trust-card {
flex: 1; flex: 1;
padding: 16px 8px; padding: 16px 8px;
} }
.trust-card__icon-frame { .trust-card__icon-frame {
width: 112px; width: 112px;
height: 112px; height: 112px;
} }
.trust-card__copy { .trust-card__copy {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.trust-card__title { .trust-card__title {
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
letter-spacing: var(--ls-15); letter-spacing: var(--ls-15);
text-align: center; text-align: center;
} }
.trust-card__description { .trust-card__description {
font-size: 14px; font-size: 14px;
line-height: 1.45; line-height: 1.45;
letter-spacing: var(--ls-14); letter-spacing: var(--ls-14);
text-align: center; text-align: center;
} }
.trust__divider { .trust__divider {
display: block; display: block;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.trust__title { .trust__title {
font-size: 48px; font-size: 48px;
letter-spacing: var(--ls-48); letter-spacing: var(--ls-48);
} }
.trust__description { .trust__description {
font-size: 18px; font-size: 18px;
letter-spacing: var(--ls-18); letter-spacing: var(--ls-18);
} }
.trust__grid { .trust__grid {
gap: 24px; gap: 24px;
} }
.trust-card { .trust-card {
padding: 24px; padding: 24px;
} }
.trust-card__icon-frame { .trust-card__icon-frame {
width: 128px; width: 128px;
height: 128px; height: 128px;
} }
.trust-card__title { .trust-card__title {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
letter-spacing: var(--ls-16); letter-spacing: var(--ls-16);
} }
.trust-card__description { .trust-card__description {
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
letter-spacing: var(--ls-15); letter-spacing: var(--ls-15);
} }
} }
@media (min-width: 1376px) { @media (min-width: 1376px) {
.trust { .trust {
padding-top: 120px; padding-top: 120px;
padding-bottom: 120px; padding-bottom: 120px;
padding-left: 120px; padding-left: 120px;
padding-right: 120px; padding-right: 120px;
} }
} }