diff --git a/public/assets/cta-bg-pattern.svg b/public/assets/cta-bg-pattern.svg index ccaa496..1cd6362 100644 --- a/public/assets/cta-bg-pattern.svg +++ b/public/assets/cta-bg-pattern.svg @@ -1,4 +1,4 @@ - + diff --git a/public/assets/why-illustration.mp4 b/public/assets/why-illustration.mp4 new file mode 100644 index 0000000..c71424d Binary files /dev/null and b/public/assets/why-illustration.mp4 differ diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 98e0c2e..cde7185 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -7,8 +7,6 @@ export interface Props { const { t } = Astro.props const logoFull = "/assets/footer-logo.png"; -const androidIcon = "/assets/footer-android-icon.svg"; -const appleIcon = "/assets/footer-apple-icon.svg"; --- -
-
- Android -
-

{t.android}

-

{t.androidCta}

-
-
-
-
- Apple -
-
-

{t.ios}

-

{t.iosCta}

-
-
-
- - - diff --git a/src/components/WhyTalkPro.astro b/src/components/WhyTalkPro.astro index 4e8d8a7..11f5794 100644 --- a/src/components/WhyTalkPro.astro +++ b/src/components/WhyTalkPro.astro @@ -40,7 +40,17 @@ const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-
- {t.illustrationAlt} +
diff --git a/src/styles/download.css b/src/styles/download.css index 8774c72..72b5188 100644 --- a/src/styles/download.css +++ b/src/styles/download.css @@ -14,8 +14,8 @@ position: absolute; top: 50%; left: 50%; - width: 100%; - max-width: 1920px; + width: 1920px; + max-width: none; height: 923px; pointer-events: none; transform: translate(-50%, -50%); @@ -35,34 +35,41 @@ .download-cta__content { display: flex; + order: 2; flex: 1; flex-direction: column; - align-items: flex-start; + align-items: center; justify-content: center; min-width: 0; gap: 36px; overflow: clip; + text-align: center; } .download-cta__copy { display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; width: 100%; gap: 16px; } .download-cta__heading { + --download-heading-title-size: 32px; display: flex; - flex-wrap: wrap; - align-items: flex-start; + flex-wrap: nowrap; + align-items: center; flex-shrink: 0; gap: 20px; + max-width: 100%; } .download-cta__title { + position: relative; + top: -4px; margin: 0; - font-size: 32px; + flex-shrink: 0; + font-size: var(--download-heading-title-size); font-weight: 700; line-height: 1.2; color: #1a1a1a; @@ -72,8 +79,8 @@ .download-cta__logo-frame { position: relative; flex-shrink: 0; - width: 188px; - height: 72px; + width: calc(var(--download-heading-title-size) * 3.9167); + height: calc(var(--download-heading-title-size) * 1.5); } .download-cta__logo { @@ -88,10 +95,11 @@ .download-cta__description { max-width: 542px; margin: 0; - font-size: 18px; + font-size: 16px; font-weight: 400; line-height: 1.5; color: #7a726d; + text-align: center; } .store-badges { @@ -189,10 +197,11 @@ .download-cta__phone { position: relative; - display: none; + display: block; + order: 1; flex-shrink: 0; - width: 418px; - height: 510px; + width: min(418px, calc(100vw - 32px)); + aspect-ratio: 418 / 510; } .download-cta__phone-crop { @@ -211,17 +220,36 @@ height: 136.1%; } -@media (min-width: 570px) { - .store-badges { - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; +@media (max-width: 397px) { + .download-cta__heading { + --download-heading-title-size: clamp(24px, 8vw, 32px); + gap: clamp(8px, 2.5vw, 12px); + } + + .download-cta__title { + line-height: 1; } } -@media (min-width: 768px) { - .download-cta__title { - font-size: 40px; +@media (max-width: 569px) { + .store-badge { + width: min(100%, calc(100vw - 32px)); + } +} + +@media (min-width: 570px) { + .download-cta__heading { + --download-heading-title-size: 40px; + } + + .download-cta__description { + font-size: 18px; + } + + .store-badges { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; } } @@ -236,12 +264,31 @@ padding: 0 24px; } - .download-cta__title { - font-size: 48px; + .download-cta__content { + order: 1; + align-items: flex-start; + text-align: left; + } + + .download-cta__copy { + align-items: flex-start; + } + + .download-cta__description { + text-align: left; + } + + .store-badges { + justify-content: flex-start; + } + + .download-cta__heading { + --download-heading-title-size: 48px; } .download-cta__phone { - display: block; + order: 2; + width: 418px; } } diff --git a/src/styles/footer.css b/src/styles/footer.css index c075a96..ced231a 100644 --- a/src/styles/footer.css +++ b/src/styles/footer.css @@ -61,46 +61,6 @@ color: #7a726d; } -.site-footer__links { - display: flex; - align-items: center; - flex-shrink: 0; - gap: 32px; - line-height: normal; -} - -.site-footer__link-column { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 160px; - gap: 24px; - overflow: clip; -} - -.site-footer__link, -.site-footer__text { - margin: 0; - font-size: 14px; - line-height: normal; - color: #4a4a4a; - white-space: nowrap; -} - -.site-footer__link { - font-weight: 400; - text-decoration: none; - transition: color 160ms ease; -} - -.site-footer__link:hover { - color: #f28a4b; -} - -.site-footer__text--heading { - font-weight: 500; -} - .site-footer__divider { width: 100%; height: 1px; diff --git a/src/styles/hero.css b/src/styles/hero.css index a68e9ec..417ae7e 100644 --- a/src/styles/hero.css +++ b/src/styles/hero.css @@ -1,259 +1,278 @@ .hero { - position: relative; - display: flex; - align-items: flex-start; - justify-content: center; - width: 100%; - min-height: 600px; - overflow: hidden; + position: relative; + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + min-height: 600px; + overflow: hidden; } .hero__bg { - position: absolute; - inset: 0; - width: 100%; - max-width: none; - height: 100%; - object-fit: cover; - pointer-events: none; + position: absolute; + inset: 0; + width: 100%; + max-width: none; + height: 100%; + object-fit: cover; + pointer-events: none; } .hero__inner { - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100%; - max-width: 1280px; - height: 100%; - gap: 40px; - margin: 0 auto; - padding: 0 16px; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 1280px; + height: 100%; + gap: 40px; + margin: 0 auto; + padding: 0 16px; } .hero__phone-column { - position: relative; - z-index: 2; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding-top: 24px; - pointer-events: none; + position: relative; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding-top: 24px; + pointer-events: none; } .hero__phone-frame { - position: relative; - z-index: 2; - width: min(320px, 100%); - height: 527px; + position: relative; + z-index: 2; + width: min(320px, 100%); + height: 527px; } .hero__phone-crop { - position: absolute; - inset: 0; - overflow: hidden; - pointer-events: none; + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; } .hero__phone { - position: absolute; - top: -7.18%; - left: -2.67%; - width: 105.35%; - max-width: none; - height: 114.36%; + position: absolute; + top: -7.18%; + left: -2.67%; + width: 105.35%; + max-width: none; + height: 114.36%; } .hero__content { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - flex-shrink: 0; - width: 100%; - height: 100%; - gap: 60px; - padding: 32px 0; - overflow: clip; + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + flex-shrink: 0; + width: 100%; + height: 100%; + gap: 60px; + padding: 32px 0; + overflow: clip; } .hero__badge { - display: flex; - align-items: center; - flex-shrink: 0; - padding: 12px 16px; - overflow: clip; - background: #fff; - border: 1px solid #f08458; - border-radius: 999px; + display: flex; + align-items: center; + flex-shrink: 0; + padding: 12px 16px; + overflow: clip; + background: #fff; + border: 1px solid #f08458; + border-radius: 999px; } .hero__badge-text { - margin: 0; - font-size: 14px; - font-weight: 700; - line-height: normal; - color: #0d0d0d; + margin: 0; + font-size: 14px; + font-weight: 700; + line-height: normal; + color: #0d0d0d; } .hero__copy { - display: flex; - flex-direction: column; - align-items: flex-start; - flex-shrink: 0; - width: 100%; - gap: 24px; + display: flex; + flex-direction: column; + align-items: flex-start; + flex-shrink: 0; + width: 100%; + gap: 24px; } .hero__title { - width: 100%; - font-size: 40px; - font-weight: 700; - line-height: 1.1; - color: #2e2a28; + width: 100%; + font-size: 40px; + font-weight: 700; + line-height: 1.1; + color: #2e2a28; } .hero__title-line { - margin: 0; - line-height: 1.1; + margin: 0; + line-height: 1.1; } .hero__description { - width: 100%; - margin: 0; - font-size: 18px; - font-weight: 400; - line-height: 1.5; - color: #7a726d; + width: 100%; + margin: 0; + font-size: 18px; + font-weight: 400; + line-height: 1.5; + color: #7a726d; } .hero__actions { - display: flex; - flex-wrap: wrap; - align-items: center; - flex-shrink: 0; - gap: 14px; - overflow: clip; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + flex-shrink: 0; + gap: 14px; + overflow: clip; } .hero__button { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - padding: 14px 24px; - overflow: clip; - border-radius: 17px; - text-decoration: none; - transition: background-color 160ms ease; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + padding: 14px 24px; + overflow: clip; + border-radius: 17px; + text-decoration: none; + transition: background-color 160ms ease; } .hero__button--primary { - background: #f28a4b; + background: #f28a4b; } .hero__button--primary:hover { - background: #e07a3b; + background: #e07a3b; } .hero__button--secondary { - background: rgba(255, 255, 255, 0.55); - border: 1px solid #e3d9d1; + background: rgba(255, 255, 255, 0.55); + border: 1px solid #e3d9d1; } .hero__button--secondary:hover { - background: #fff; + background: #fff; } .hero__button-label { - font-size: 15px; - font-weight: 700; - line-height: normal; - white-space: nowrap; + font-size: 15px; + font-weight: 700; + line-height: normal; + white-space: nowrap; } .hero__button--primary .hero__button-label { - color: #fff; + color: #fff; } .hero__button--secondary .hero__button-label { - color: #2e2a28; + color: #2e2a28; } .hero__tags { - display: flex; - flex-wrap: wrap; - align-items: center; - flex-shrink: 0; - gap: 10px; - overflow: clip; + display: flex; + flex-wrap: wrap; + align-items: center; + flex-shrink: 0; + gap: 10px; + overflow: clip; } .hero__tag { - display: flex; - align-items: center; - flex-shrink: 0; - padding: 9px 14px; - overflow: clip; - background: rgba(255, 255, 255, 0.68); - border: 1px solid #fff; - border-radius: 999px; + display: flex; + align-items: center; + flex-shrink: 0; + padding: 9px 14px; + overflow: clip; + background: rgba(255, 255, 255, 0.68); + border: 1px solid #fff; + border-radius: 999px; } .hero__tag-text { - font-size: 14px; - font-weight: 700; - line-height: normal; - color: #7a726d; - white-space: nowrap; + font-size: 14px; + font-weight: 700; + line-height: normal; + color: #7a726d; + white-space: nowrap; +} + +@media (max-width: 433px) { + .hero__actions { + flex-direction: column; + justify-content: center; + width: 100%; + } + + .hero__button { + width: min(100%, calc(100vw - 32px)); + padding-right: 14px; + padding-left: 14px; + } + + .hero__button-label { + font-size: clamp(13px, 3.5vw, 15px); + } } @media (min-width: 768px) { - .hero__title { - font-size: 56px; - } + .hero__title { + font-size: 56px; + } } -@media (min-width: 1023px) { - .hero { - height: 891px; - } +@media (min-width: 1024px) { + .hero { + height: 891px; + } - .hero__inner { - flex-direction: row; - padding: 0 24px; - } + .hero__inner { + flex-direction: row; + padding: 0 24px; + } - .hero__phone-column { - align-items: center; - justify-content: flex-start; - flex: 1; - min-width: 0; - height: 100%; - padding-top: 60px; - } + .hero__phone-column { + align-items: center; + justify-content: flex-start; + flex: 1; + min-width: 0; + height: 100%; + padding-top: 60px; + } - .hero__phone-frame { - width: 100%; - height: auto; - aspect-ratio: 673 / 1108; - } + .hero__phone-frame { + width: 100%; + height: auto; + aspect-ratio: 673 / 1108; + } - .hero__content { - width: 660px; - padding: 80px 0; - } + .hero__content { + width: 660px; + padding: 80px 0; + } - .hero__title { - font-size: 72px; - } + .hero__title { + font-size: 72px; + } } @media (min-width: 1280px) { - .hero__inner { - padding: 0; - } + .hero__inner { + padding: 0; + } } diff --git a/src/styles/preview.css b/src/styles/preview.css index 7cf6fd5..ff51b0d 100644 --- a/src/styles/preview.css +++ b/src/styles/preview.css @@ -1,162 +1,237 @@ .app-preview { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - gap: 60px; - padding: 64px 16px 0; - overflow: hidden; - background: #fef0eb; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + gap: 60px; + padding: 64px 16px 0; + overflow: hidden; + background: #fef0eb; } .app-preview__header { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100%; - max-width: 940px; - gap: 40px; - margin: 0 auto; - overflow: clip; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 940px; + gap: 40px; + margin: 0 auto; + overflow: clip; } .app-preview__title { - width: 100%; - margin: 0; - font-size: 32px; - font-weight: 700; - line-height: 1.2; - color: #1a1a1a; - text-align: center; + width: 100%; + margin: 0; + font-size: 32px; + font-weight: 700; + line-height: 1.2; + color: #1a1a1a; + text-align: center; } .app-preview__description { - width: 100%; - margin: 0; - font-size: 18px; - font-weight: 400; - line-height: 1.5; - color: #7a726d; - text-align: center; + width: 100%; + margin: 0; + font-size: 18px; + font-weight: 400; + line-height: 1.5; + color: #7a726d; + text-align: center; } .app-preview__carousel { - display: flex; - align-items: flex-end; - justify-content: center; - flex-shrink: 0; - width: 100%; - gap: 12px; + box-sizing: border-box; + display: flex; + align-items: flex-end; + justify-content: center; + flex-shrink: 0; + width: 100%; + gap: 24px; + padding: 0 16px; + overflow: hidden; } .app-preview__side-phone { - position: relative; - display: none; - flex-shrink: 0; - width: 336px; - height: 396px; - overflow: hidden; - opacity: 0.2; - pointer-events: none; - transition: opacity 300ms ease; + position: relative; + display: none; + flex-shrink: 0; + width: 336px; + height: 396px; + overflow: hidden; + opacity: 0.2; + pointer-events: none; + transition: opacity 300ms ease; } .app-preview__phone-image { - position: absolute; - top: -0.03%; - left: 0; - width: 100%; - max-width: none; - height: 175.34%; - transition: opacity 300ms ease; + position: absolute; + top: -0.03%; + left: 0; + width: 100%; + max-width: none; + height: 175.34%; + transition: opacity 300ms ease; } .app-preview__control-wrap { - display: flex; - align-items: flex-end; - align-self: stretch; - flex-shrink: 0; + display: flex; + align-items: flex-end; + align-self: stretch; + flex-shrink: 0; } .app-preview__control-inner { - display: flex; - align-items: center; - justify-content: center; - height: 100%; + display: flex; + align-items: center; + justify-content: center; + height: 100%; } .app-preview__button { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - width: 48px; - height: 48px; - background: #f08458; - border: 0; - border-radius: 9999px; - cursor: pointer; - transition: background-color 160ms ease, transform 160ms ease; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 48px; + height: 48px; + background: #f08458; + border: 0; + border-radius: 9999px; + cursor: pointer; + transition: + background-color 160ms ease, + transform 160ms ease; } .app-preview__button:hover { - background: #e07a3b; + background: #e07a3b; } .app-preview__button:active { - transform: scale(0.95); + transform: scale(0.95); } .app-preview__button-icon { - display: block; - width: 24px; - height: 24px; + display: block; + width: 24px; + height: 24px; } .app-preview__button-icon--next { - transform: rotate(180deg); + transform: rotate(180deg); } .app-preview__center-phone { - position: relative; - flex-shrink: 0; - width: min(420px, calc(100vw - 144px)); - aspect-ratio: 459 / 542; - overflow: hidden; - pointer-events: none; + position: relative; + flex-shrink: 0; + width: min(420px, calc(100vw - 168px)); + aspect-ratio: 459 / 542; + overflow: hidden; + pointer-events: none; +} + +@media (max-width: 594px) { + .app-preview__carousel { + gap: 12px; + } + + .app-preview__button { + width: 40px; + height: 40px; + } + + .app-preview__button-icon { + width: 20px; + height: 20px; + } + + .app-preview__center-phone { + width: min(420px, calc(100vw - 120px)); + } +} + +@media (max-width: 554px) { + .app-preview__carousel { + gap: 8px; + padding: 0 12px; + } + + .app-preview__button { + width: 36px; + height: 36px; + } + + .app-preview__button-icon { + width: 18px; + height: 18px; + } + + .app-preview__center-phone { + width: min(420px, calc(100vw - 104px)); + } +} + +@media (max-width: 540px) { + .app-preview__center-phone { + width: min(390px, calc(100vw - 120px)); + } } @media (min-width: 768px) { - .app-preview__title { - font-size: 40px; - } + .app-preview__title { + font-size: 40px; + } + + .app-preview__carousel { + gap: clamp(10px, 1.4vw, 16px); + padding: 0 clamp(16px, 3vw, 32px); + } + + .app-preview__side-phone, + .app-preview__control-wrap { + display: flex; + } + + .app-preview__side-phone { + display: block; + width: clamp(128px, 17vw, 190px); + height: auto; + aspect-ratio: 336 / 396; + } + + .app-preview__center-phone { + width: clamp(220px, 31vw, 320px); + } } @media (min-width: 1023px) { - .app-preview { - padding: 120px 130px 0; - } + .app-preview { + padding: 120px clamp(32px, 6vw, 130px) 0; + } - .app-preview__title { - font-size: 48px; - } + .app-preview__title { + font-size: 48px; + } - .app-preview__side-phone, - .app-preview__control-wrap { - display: flex; - } + .app-preview__side-phone, + .app-preview__control-wrap { + display: flex; + } - .app-preview__carousel { - gap: 20px; - } + .app-preview__carousel { + gap: clamp(16px, 1.4vw, 20px); + padding: 0; + } - .app-preview__side-phone { - display: block; - } + .app-preview__side-phone { + display: block; + width: clamp(190px, 20vw, 336px); + } - .app-preview__center-phone { - width: 459px; - height: 542px; - aspect-ratio: auto; - } + .app-preview__center-phone { + width: clamp(300px, 27vw, 459px); + height: auto; + aspect-ratio: 459 / 542; + } } diff --git a/src/styles/sections.css b/src/styles/sections.css index ab8e690..932df33 100644 --- a/src/styles/sections.css +++ b/src/styles/sections.css @@ -1,347 +1,409 @@ .experience { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 64px 16px; - background: #fff; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 64px 16px; + background: #fff; } .experience__inner { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - max-width: 1008px; - gap: 40px; - margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + max-width: 1008px; + gap: 40px; + margin: 0 auto; } .experience__title { - width: 100%; - margin: 0; - font-size: 32px; - font-weight: 700; - line-height: 1.2; - color: #1a1a1a; - text-align: center; + width: 100%; + margin: 0; + font-size: 32px; + font-weight: 700; + line-height: 1.2; + color: #1a1a1a; + text-align: center; } .experience__body { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; } .experience__grid { - display: grid; - grid-template-columns: minmax(0, 1fr); - justify-content: center; - width: 100%; - gap: 24px; + display: grid; + grid-template-columns: minmax(0, 1fr); + justify-content: center; + width: 100%; + gap: 24px; } .experience-card { - display: flex; - flex-direction: column; - align-items: center; - justify-self: center; - width: 100%; - max-width: 320px; - gap: 28px; - padding: 0 0 36px; - overflow: hidden; - background: linear-gradient(to bottom, #fef0eb, #fff); - border-radius: 30px 30px 0 0; + display: flex; + flex-direction: column; + align-items: center; + justify-self: center; + width: 100%; + max-width: 320px; + gap: 28px; + padding: 0 0 36px; + overflow: hidden; + background: linear-gradient(to bottom, #fef0eb, #fff); + border-radius: 30px 30px 0 0; } .experience-card__media { - position: relative; - flex-shrink: 0; - width: 100%; - aspect-ratio: 320 / 232; - overflow: hidden; + position: relative; + flex-shrink: 0; + width: 100%; + aspect-ratio: 320 / 232; + overflow: hidden; } .experience-card__media--tinted { - display: flex; - flex-direction: column; - align-items: flex-start; - background: #ffeddf; + display: flex; + flex-direction: column; + align-items: flex-start; + background: #ffeddf; } .experience-card__media-crop { - position: absolute; - inset: 0; - overflow: hidden; - pointer-events: none; + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; } .experience-card__image { - position: absolute; - max-width: none; + position: absolute; + max-width: none; } .experience-card__image--one { - top: -58.58%; - left: 0; - width: 100%; - height: 298.5%; + top: -58.58%; + left: 0; + width: 100%; + height: 298.5%; } .experience-card__image--two { - top: -335.6%; - left: -5.95%; - width: 137.79%; - height: 411.28%; + top: -335.6%; + left: -5.95%; + width: 137.79%; + height: 411.28%; } .experience-card__image--three { - top: -99.23%; - left: 0; - width: 100%; - height: 298.5%; + top: -99.23%; + left: 0; + width: 100%; + height: 298.5%; } .experience-card__copy { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100%; - gap: 16px; - max-width: 248px; - padding: 0; - overflow: clip; - text-align: center; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + gap: 16px; + max-width: 248px; + padding: 0; + overflow: clip; + text-align: center; } .experience-card__title { - width: 100%; - margin: 0; - font-size: 24px; - font-weight: 600; - line-height: 1.4; - letter-spacing: -0.47px; - color: #0d0d0d; + width: 100%; + margin: 0; + font-size: 24px; + font-weight: 600; + line-height: 1.4; + letter-spacing: -0.47px; + color: #0d0d0d; } .experience-card__description { - width: 100%; - margin: 0; - font-size: 16px; - font-weight: 500; - line-height: 1.5; - letter-spacing: -0.18px; - color: #7a726d; + width: 100%; + margin: 0; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + letter-spacing: -0.18px; + color: #7a726d; } .experience__caption { - width: 100%; - margin: 0; - font-size: 18px; - font-weight: 400; - line-height: 1.5; - color: #7a726d; - text-align: center; + width: 100%; + margin: 0; + font-size: 18px; + font-weight: 400; + line-height: 1.5; + color: #7a726d; + text-align: center; } .use-cases { - display: flex; - align-items: flex-start; - justify-content: center; - width: 100%; - padding: 64px 16px; - background: #fef0eb; + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + padding: 64px 16px; + background: #fef0eb; } .use-cases__inner { - display: grid; - grid-template-columns: minmax(0, 1fr); - width: 100%; - max-width: 1280px; - gap: 32px; - margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1fr); + width: 100%; + max-width: 1280px; + gap: 32px; + margin: 0 auto; } .use-cases__copy { - 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; +} + +@media (max-width: 1294px) { + .use-cases__inner { + grid-template-columns: minmax(0, 1128px); + justify-content: center; + } + + .use-cases__copy { + justify-self: start; + width: min(580px, 100%); + max-width: 580px; + margin: 0; + } + + .use-cases__title, + .use-cases__description { + max-width: 100%; + } } .section-eyebrow { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - padding: 12px 24px; - background: #fff; - border: 1px solid #fbbfa3; - border-radius: 9999px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + padding: 12px 24px; + background: #fff; + border: 1px solid #fbbfa3; + border-radius: 9999px; } .section-eyebrow__text { - font-size: 14px; - font-weight: 700; - line-height: normal; - color: #f08458; - text-align: center; - white-space: nowrap; + font-size: 14px; + font-weight: 700; + line-height: normal; + color: #f08458; + text-align: center; + white-space: nowrap; } .use-cases__title { - width: 100%; - margin: 0; - font-size: 32px; - font-weight: 700; - line-height: 1.2; - color: #1a1a1a; + width: 100%; + margin: 0; + font-size: 32px; + font-weight: 700; + line-height: 1.2; + color: #1a1a1a; + text-align: left; } .use-cases__description { - width: 100%; - margin: 0; - font-size: 18px; - font-weight: 400; - line-height: 1.5; - color: #7a726d; + width: 100%; + margin: 0; + font-size: 18px; + font-weight: 400; + line-height: 1.5; + color: #7a726d; + text-align: left; +} + +@media (max-width: 768px) { + .use-cases__copy { + align-items: flex-start; + justify-self: stretch; + width: 100%; + max-width: none; + text-align: left; + } + + .use-cases__title, + .use-cases__description { + text-align: left; + } } .use-cases__rows { - display: flex; - flex-direction: column; - align-items: stretch; - min-width: 0; - overflow: hidden; - border-radius: 30px; - gap: 1px; + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + max-width: 1128px; + min-width: 0; + margin: 0 auto; + overflow: hidden; + border-radius: 30px; + gap: 1px; } .use-case-row { - display: grid; - grid-template-columns: minmax(0, 1fr); - width: 100%; - overflow: hidden; - background: #faede8; + display: grid; + grid-template-columns: minmax(0, 1fr); + width: 100%; + overflow: hidden; + background: #faede8; } .use-case-row__title-cell, .use-case-row__description-cell { - display: flex; - align-items: center; - min-width: 0; - padding: 16px 24px; + display: flex; + align-items: center; + min-width: 0; + padding: 16px 24px; } .use-case-row__title-cell { - background: #f08458; + background: #f08458; } .use-case-row__description-cell { - background: #fff; + background: #fff; } .use-case-row__title { - min-width: 0; - margin: 0; - font-size: 18px; - font-weight: 600; - line-height: normal; - color: #fff; + min-width: 0; + margin: 0; + font-size: 18px; + font-weight: 600; + line-height: normal; + color: #fff; } .use-case-row__description { - min-width: 0; - margin: 0; - font-size: 15px; - font-weight: 500; - line-height: 1.5; - color: #7a726d; + min-width: 0; + margin: 0; + font-size: 15px; + font-weight: 500; + line-height: 1.5; + color: #7a726d; +} + +@media (max-width: 639px) { + .use-cases__rows { + gap: 24px; + overflow: visible; + border-radius: 0; + } + + .use-case-row { + overflow: hidden; + background: #fff; + border-radius: 16px; + } + + .use-case-row__title-cell, + .use-case-row__description-cell { + padding: 24px; + } + + .use-case-row__title { + font-size: 20px; + } } @media (min-width: 640px) { - .use-case-row { - grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr); - min-height: 120px; - } + .use-case-row { + grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr); + height: 120px; + } - .use-case-row__title-cell, - .use-case-row__description-cell { - padding: 24px 36px; - } + .use-case-row__title-cell, + .use-case-row__description-cell { + padding: 24px 36px; + } - .use-case-row__title { - font-size: 20px; - } + .use-case-row__title { + font-size: 20px; + } } @media (min-width: 768px) { - .experience__title, - .use-cases__title { - font-size: 40px; - } + .experience__title, + .use-cases__title { + font-size: 40px; + } } @media (min-width: 626px) { - .experience__grid { - grid-template-columns: repeat(2, minmax(0, 320px)); - } + .experience__grid { + grid-template-columns: repeat(2, minmax(0, 320px)); + } - .experience-card:nth-child(3):last-child { - grid-column: 1 / -1; - justify-self: center; - } + .experience-card:nth-child(3):last-child { + grid-column: 1 / -1; + justify-self: center; + } } @media (min-width: 920px) { - .experience__grid { - grid-template-columns: repeat(3, minmax(0, 320px)); - } + .experience__grid { + grid-template-columns: repeat(3, minmax(0, 320px)); + } - .experience-card:nth-child(3):last-child { - grid-column: auto; - } + .experience-card:nth-child(3):last-child { + grid-column: auto; + } } @media (min-width: 1023px) { - .experience { - padding: 120px 16px; - } + .experience { + padding: 120px 16px; + } - .experience-card { - height: 477px; - } + .experience-card { + height: 477px; + } - .experience-card__title { - white-space: nowrap; - } + .experience-card__title { + white-space: nowrap; + } - .experience__title, - .use-cases__title { - font-size: 48px; - } + .experience__title, + .use-cases__title { + font-size: 48px; + } } -@media (min-width: 1200px) { - .use-cases { - padding: 120px 64px; - } +@media (min-width: 1295px) { + .use-cases { + padding: 120px 64px; + } - .use-cases__inner { - grid-template-columns: minmax(420px, 540px) minmax(560px, 1fr); - align-items: center; - gap: 40px; - } + .use-cases__inner { + grid-template-columns: minmax(420px, 540px) minmax(560px, 1fr); + align-items: center; + gap: 40px; + } } @media (min-width: 1440px) { - .use-cases { - padding-right: 130px; - padding-left: 130px; - } + .use-cases { + padding-right: 130px; + padding-left: 130px; + } } diff --git a/src/styles/trust.css b/src/styles/trust.css index 7617734..c398c69 100644 --- a/src/styles/trust.css +++ b/src/styles/trust.css @@ -158,13 +158,34 @@ height: 100%; } +@media (max-width: 1022px) { + .trust-card__copy { + align-items: center; + text-align: center; + } + + .trust-card__title, + .trust-card__description { + text-align: center; + } +} + @media (min-width: 768px) { .trust__title { font-size: 40px; } .trust__grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + } + + .trust__divider { + display: block; + align-self: center; + } + + .trust__divider:nth-of-type(4) { + display: none; } } diff --git a/src/styles/why.css b/src/styles/why.css index 6f334aa..61f4939 100644 --- a/src/styles/why.css +++ b/src/styles/why.css @@ -91,13 +91,16 @@ order: 1; align-self: center; flex-shrink: 0; - width: 320px; - height: 320px; + width: 480px; + max-width: calc(100vw - 32px); + height: 480px; + max-height: calc(100vw - 32px); } .why__illustration-image { position: absolute; inset: 0; + display: block; width: 100%; height: 100%; object-fit: contain; @@ -216,10 +219,6 @@ font-size: 48px; } - .why__illustration { - width: 480px; - height: 480px; - } } @media (min-width: 1280px) {