diff --git a/src/styles/download.css b/src/styles/download.css index 034ba9c..d15ed20 100644 --- 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; diff --git a/src/styles/sections.css b/src/styles/sections.css index ab99e29..d8a571a 100644 --- 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; } diff --git a/src/styles/trust.css b/src/styles/trust.css index a016395..7a52e95 100644 --- 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; + } }