/* ===================== Fonts ===================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===================== Base ===================== */ * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } /* Honeypot anti-spam field — off-screen (not display:none, so bots still fill it). */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } :root { --black: #202221; --green: #85e878; --green-light: #cff2b3; --purple: #b488fd; --orange: #fe7239; --cream: #fcfcfa; --muted: #747c76; --hover-green: #1c703c; --hover-ink: #121212; /* active design tier width in px + the largest scale it may be blown up to; both overridden per tier below. --zoom itself is set by the inline script in index.html (see "Scaling"). */ --design: 2560; --zoom-max: 1; /* how far the mobile bottom sheet reaches past the viewport edge, in its own (pre-zoom) px -- enough to sit under any mobile browser toolbar */ --sheet-overshoot: 200px; } html, body { background: #fff; font-family: "Inter", sans-serif; color: var(--black); } .viewport { width: 100%; overflow-x: hidden; } .page { width: 100%; max-width: 2560px; margin: 0 auto; display: flex; flex-direction: column; background: #fff; } /* ===================== Scaling ===================== The layout is a pixel-perfect export at four design widths. Each tier keeps its native px values and is scaled onto the viewport with `zoom`. `zoom` only accepts a , and the pure-CSS way to turn 100vw into one, tan(atan2(100vw, 1px)), resolves to 0 in Safari 26 -- so --zoom is computed by the inline script in index.html, which also adds .scaled to . Without JS the page keeps the unscaled base rule instead of a cropped fixed width. */ @supports (zoom: 1) { .scaled .page { width: calc(var(--design) * 1px); max-width: none; /* margin: 0 auto (base rule) centers the page when --zoom hits its cap */ zoom: var(--zoom); } } @media (max-width: 1920px) { :root { --design: 1920; } } @media (max-width: 1199px) { :root { --design: 1024; /* this tier runs up to 1199px, i.e. 1.17x its design width */ --zoom-max: 1.2; } } @media (max-width: 768px) { :root { --design: 375; /* full-bleed: let the mobile tier stretch to the full viewport width (no side gutters) across 481-768px, per client request. */ --zoom-max: 3; } } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { display: block; } /* ===================== Buttons ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 36px; border: 2px solid transparent; border-radius: 12px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: var(--black); cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, box-shadow 0.15s ease, font-weight 0.15s ease; } .btn:hover, .btn:focus-visible { border-color: var(--hover-ink); box-shadow: 2px 2px 0 3px var(--hover-ink); font-weight: 700; outline: none; } .header .btn:hover, .header .btn:focus-visible { font-weight: 700; } .btn--green { background: var(--green); } .btn--cream { background: var(--cream); } /* ===================== Tags ===================== */ .tag { display: inline-flex; align-items: center; padding: 4px 0; font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -0.02em; transition: color 0.15s ease; gap: 8px; } .tag:hover, .tag:focus-visible { color: var(--hover-green); outline: none; } .tag--purple { --tag-color: var(--purple); color: var(--tag-color); } .tag--orange { --tag-color: var(--orange); color: var(--tag-color); } .tag--purple:hover, .tag--purple:focus-visible { color: #c3a0fd; color: color-mix(in srgb, var(--tag-color) 80%, #fff 20%); } .tag--orange:hover, .tag--orange:focus-visible { color: #fe8e61; color: color-mix(in srgb, var(--tag-color) 80%, #fff 20%); } .body-24 { font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--black); } .section-title { font-weight: 700; font-size: 72px; line-height: 74px; letter-spacing: -0.025em; color: var(--black); } /* mobile-only forced line break (enabled in the <=480 breakpoint) */ .br-mobile { display: none; } /* ===================== 01 HERO ===================== */ .hero { position: relative; width: 100%; height: 1440px; overflow: hidden; z-index: 0; } .hero__left { position: absolute; left: 0; top: 0; width: 1282px; height: 1440px; overflow: hidden; } .hero__bg-green { position: absolute; left: 0; top: 0; width: 1280px; height: 1440px; background: var(--green-light); z-index: 0; } .hero__curve { position: absolute; pointer-events: none; z-index: 1; } /* ---- Curve animation toggle ---- */ /* Hide all breakpoint variants by default, then show only the active one */ .hero__curve-anim { display: none; overflow: visible; } /* Default (>1920px): show 2560 SVGs */ .hero__curve-anim--2560 { display: block; } .hero__mobile-vector { display: none; } .hero__curve--1 { left: 0; top: 0; width: 468px; height: 1379px; } .hero__curve--2 { left: 0; top: 0; width: 1199px; height: 1440px; } .hero__curve--3 { left: 0; top: 318px; width: 1280px; height: 1163px; opacity: 0.55; z-index: 0; -webkit-mask-image: linear-gradient(160deg, #000 5%, transparent 65%); mask-image: linear-gradient(160deg, #000 5%, transparent 65%); } .hero__right { position: absolute; left: 1280px; top: 0; width: 1280px; height: 1440px; overflow: hidden; background: linear-gradient( 145.73deg, rgba(255, 255, 235, 0) -4.55%, rgba(205, 211, 205, 0.72) 93.39% ); } .hero__photo { position: absolute; left: 0; top: 0; width: 1280px; height: 1390px; background: url("img/9.webp") center bottom/auto 1300px no-repeat; z-index: 2; } /* Header */ .header { position: absolute; left: 150px; top: 50px; width: 2260px; height: 68px; display: flex; align-items: center; justify-content: space-between; z-index: 5; } .header__logo img { width: 211.56px; height: auto; } .header__nav { display: flex; align-items: center; gap: 40px; } .header__links { display: flex; align-items: center; gap: 25px; } .header__link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: var(--black); transition: color 0.15s ease; } .header__link svg path { transition: stroke 0.15s ease; } .header__link:hover, .header__link:focus-visible { color: var(--hover-green); outline: none; } .header__link:hover svg path, .header__link:focus-visible svg path { stroke: var(--hover-green); } /* Hero title */ .hero__title { position: absolute; left: 150px; top: 50%; transform: translateY(-50%); width: 844px; display: flex; flex-direction: column; gap: 24px; z-index: 4; } .hero__title-inner { display: flex; flex-direction: column; gap: 16px; } .hero__h1 { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 110px; line-height: 116px; letter-spacing: -0.01em; color: var(--black); } .accent-purple { color: var(--purple); } .hero__paragraph { width: 754px; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--black); } /* ===================== 02 + 03 ABOUT ===================== */ .about { position: relative; width: 100%; margin-top: -50px; padding: 170px 150px; display: flex; flex-direction: column; gap: 200px; background: #fcfcfa; border-radius: 40px 40px 0 0; z-index: 1; } /* 02 Platform */ .platform { display: flex; flex-direction: column; align-items: flex-start; gap: 80px; width: 2260px; height: 1350px; } .platform__headline { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .underline-orange { position: relative; white-space: nowrap; } .underline-orange::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 12px; background: url("img/Line.svg") no-repeat left bottom / 100% auto; /* Initial state: clipped fully from the right (hidden) */ clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.33, 1, 0.68, 1) 0.6s; } .underline-orange.line-drawn::after { clip-path: inset(0 0% 0 0); } .platform__text { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .platform__text .body-24 { width: 590px; } .cards { display: flex; justify-content: space-between; align-items: center; gap: 60px; width: 2260px; } .card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 712px; } .card__img { width: 712px; height: 800px; object-fit: cover; border-radius: 40px; } .card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 712px; } .card__title-container { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 712px; } .card__tag { --card-tag-color: var(--orange); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -0.02em; color: var(--card-tag-color); transition: color 0.15s ease; } .card__tag-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-weight: 1000; line-height: 1; letter-spacing: 0; -webkit-text-stroke: 0.035em currentColor; paint-order: stroke fill; } .card__tag:hover, .card__tag:focus-visible { color: #fe8e61; color: color-mix(in srgb, var(--card-tag-color) 80%, #fff 20%); outline: none; } .card__title { font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.025em; color: var(--black); } .card__body { width: 590px; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--black); } /* 03 Team */ .team { display: flex; flex-direction: column; align-items: flex-start; gap: 80px; width: 2260px; } .team__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 2260px; } .team__title { width: 1055px; } .highlight-green { position: relative; display: inline-block; } .highlight-green::before { content: ""; position: absolute; left: -17px; top: 6px; width: calc(100% + 34px); height: 68px; background: var(--green-light); transform: rotate(-1.5deg); z-index: -1; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(0.33, 1, 0.68, 1); } .highlight-green.line-drawn::before { clip-path: inset(0 0% 0 0); } .team__sub { width: 649px; } .team__body { display: flex; flex-direction: column; align-items: flex-start; gap: 100px; width: 2260px; } /* Feature */ .feature { position: relative; width: 2260px; height: 832px; } .feature__media { position: absolute; top: 0; width: 1130px; height: 832px; display: flex; align-items: center; justify-content: center; border-radius: 40px; } .feature__media--purple { background: #d9c9ff; } .feature__media--orange { background: #ffc9a9; } .feature__media--green { background: var(--green-light); } .feature--img-right .feature__media { left: 1130px; } .feature--img-left .feature__media { left: 0; } .window { display: flex; flex-direction: column; width: 940px; } .window__bar { display: flex; align-items: center; gap: 9.5px; height: 32px; padding: 0 14.25px; background: #f2f2f5; border-radius: 16px 16px 0 0; } .window__bar span { width: 9.5px; height: 9.5px; border-radius: 50%; } .window__bar span:nth-child(1) { background: #f3605c; } .window__bar span:nth-child(2) { background: #f8be39; } .window__bar span:nth-child(3) { background: #50c845; } .window__shot { width: 940px; height: 632px; background-size: cover; background-position: center top; border-radius: 0 0 16px 16px; } .feature__content { position: absolute; width: 589px; display: flex; flex-direction: column; align-items: flex-start; } .feature__content .card__tag { display: inline-flex; align-items: center; padding: 4px 0; margin-bottom: 16px; } .feature__content .feature__title { margin-bottom: 32px; } .feature--img-right .feature__content--left { left: 0; top: 292px; } .feature--img-left .feature__content--right { left: 1548px; top: 270px; } .tag-purple { --card-tag-color: var(--purple); color: var(--card-tag-color); } .tag-orange { --card-tag-color: var(--orange); color: var(--card-tag-color); } .tag-greendark { --card-tag-color: var(--green); color: var(--card-tag-color); } .tag-purple:hover, .tag-purple:focus-visible { color: #c3a0fd; color: color-mix(in srgb, var(--card-tag-color) 80%, #fff 20%); } .tag-orange:hover, .tag-orange:focus-visible { color: #fe8e61; color: color-mix(in srgb, var(--card-tag-color) 80%, #fff 20%); } .tag-greendark:hover, .tag-greendark:focus-visible { color: #9ded93; color: color-mix(in srgb, var(--card-tag-color) 80%, #fff 20%); } .feature__title { font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -0.025em; color: var(--black); } .feature__list { display: flex; flex-direction: column; gap: 12px; } .feature__list li { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--black); } .feature__list li span { width: 24px; text-align: center; font-size: 18px; } .feature__list--purple li span { color: var(--purple); } .feature__list--orange li span { color: var(--orange); } .feature__list--green li span { color: var(--green); } .feature__deco { position: absolute; } .feature__deco--spark { width: 230px; height: 230px; left: 457px; top: 151px; overflow: visible; } .feature__deco--arrow { width: 230px; height: 238px; left: 1015px; top: 288px; overflow: visible; } .feature__deco--heart { width: 164px; height: 187px; left: 877px; top: -11px; transform: rotate(-12.32deg); overflow: visible; } /* ===================== 04 TSTREE ===================== */ .tstree { position: relative; width: 100%; height: 849px; margin-top: -50px; z-index: 2; } .tstree__bg { position: absolute; left: 0; top: 0; width: 100%; height: 849px; background: #ffc9a9; border-radius: 40px 40px 0 0; } .tstree__photo { position: absolute; left: 1460px; top: 71px; width: 810.28px; height: 726.57px; background: url("img/tstree-family.webp") center top/cover no-repeat; } .tstree__content { position: absolute; left: 150px; top: 206px; width: 1041px; display: flex; flex-direction: column; gap: 60px; } .tstree__logo { width: 205px; height: auto; } .tstree__textblock { display: flex; flex-direction: column; gap: 20px; } .tstree__title { font-weight: 700; font-size: 72px; line-height: 74px; letter-spacing: -0.025em; color: var(--black); } .tstree__textblock .body-24 { width: 682px; } .tstree__button { width: 215px; } .spark { position: absolute; } .spark--lg-right { width: 228.35px; height: 228.35px; left: 2182px; top: 337.25px; } .spark--lg-left { width: 208.77px; height: 180.8px; left: calc(50% - 208.77px / 2 - 688.62px); top: calc(50% - 180.8px / 2 - 63.2px); transform: rotate(-10.19deg); } .spark--md-1 { width: 154.21px; height: 154.21px; left: 1170.56px; top: 88.14px; } .spark--md-2 { width: 77.1px; height: 77.1px; left: 1311.43px; top: 276.45px; } .spark--md-3 { width: 77.1px; height: 77.1px; left: 2155.43px; top: 188.97px; } /* ===================== 05 FOOTER ===================== */ .footer { width: 100%; min-height: 678px; margin-top: -50px; padding: 100px 150px 80px; display: flex; flex-direction: column; align-items: center; gap: 100px; background: #f5f5ef; border-radius: 40px 40px 0 0; position: relative; z-index: 3; } .footer__inner { width: 2260px; display: flex; flex-direction: column; gap: 80px; } .footer__text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 50px; width: 2260px; height: 366px; } .footer__title-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 712px; height: 178px; } .footer__titles { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 712px; height: 122px; } .footer__title { width: 760px; font-weight: 700; font-size: 72px; line-height: 74px; letter-spacing: -0.025em; text-align: center; white-space: nowrap; color: var(--black); } .footer__titles .body-24 { width: 420px; text-align: center; white-space: nowrap; } .footer__form { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 602px; } .footer__row { display: flex; align-items: center; gap: 8px; width: 602px; } .input { display: flex; align-items: center; flex: 1 1 404px; height: 68px; padding: 0 24px; background: #fff; border: 2.5px solid #e4e4e4; border-radius: 8px; } .input input { width: 100%; border: none; outline: none; font-family: "Inter", sans-serif; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: var(--black); background: transparent; } .input input::placeholder { color: var(--muted); } .input input.invalid, .input:has(input.invalid) { border-color: var(--orange); } .footer__submit { width: 190px; } .footer__note { width: 470px; font-weight: 400; font-size: 14px; line-height: 18px; text-align: center; color: #747c76; } .footer__arrow { display: none; } .footer__copyright { width: 2260px; display: flex; flex-direction: column; gap: 80px; } .footer__bottom { position: relative; display: flex; align-items: center; justify-content: space-between; width: 2260px; } .footer__links { display: flex; align-items: center; gap: 20px; width: 500px; } .footer__links a { font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: -0.02em; text-decoration: underline; white-space: nowrap; color: #747c76; transition: color 0.15s ease; } .footer__links a:hover, .footer__links a:focus-visible { color: var(--hover-green); outline: none; } .footer__copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: -0.02em; text-align: center; white-space: nowrap; color: #747c76; } .privacy-link { color: #1c703c; text-decoration: underline; transition: opacity 0.15s ease; } .privacy-link:hover, .privacy-link:focus-visible { opacity: 0.8; outline: none; } .footer__disclaimer { width: 100%; max-width: 1200px; margin: 0 auto; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: #747c76; } .footer__social { display: flex; align-items: center; gap: 40px; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; color: #747c76; transition: color 0.15s ease; } /* footer logo + divider: mobile-only (shown in the <=480 breakpoint) */ .footer__divider, .footer__logo { display: none; } .footer__social img { width: 32px; height: 32px; transition: filter 0.15s ease; } .footer__social a:hover, .footer__social a:focus-visible { color: var(--hover-green); outline: none; } .footer__social a:hover img, .footer__social a:focus-visible img { filter: brightness(0) saturate(100%) invert(29%) sepia(43%) saturate(934%) hue-rotate(93deg) brightness(91%) contrast(90%); } /* ===================== Modal & Toast ===================== */ .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1000; } .modal.open { display: flex; } .modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .modal__dialog { /* ponytail: one fixed 453x333 card above the mobile tier — the dialog is laid out at the 2560 design size and scaled down by a constant, so it does NOT follow --zoom. The mobile tier overrides this back to --zoom below. */ zoom: calc(453 / 713); position: relative; width: 713px; height: 524px; background: #f5f5ef; border-radius: 24px; padding: 80px; display: flex; flex-direction: column; align-items: center; gap: 50px; } .modal__close { position: absolute; right: -48px; top: -48px; width: 48px; height: 48px; border: none; background: transparent; font-size: 0; line-height: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; } .modal__close::before, .modal__close::after { content: ""; position: absolute; left: 12px; top: 22px; width: 24px; height: 4px; background: #fff; border-radius: 2px; } .modal__close::before { transform: rotate(45deg); } .modal__close::after { transform: rotate(-45deg); } /* drag handle + social: shown only in the bottom-sheet (<=480) layout */ .modal__handle, .modal__social { display: none; } .modal__view { width: 100%; } .modal__view--form { display: flex; flex-direction: column; align-items: center; gap: 50px; } .modal__view--success { min-height: 364px; justify-content: center; } .modal__title-wrap { width: 475px; height: 172px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .modal__titles { width: 475px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .modal__title { width: 475px; font-size: 48px; line-height: 68px; font-weight: 700; letter-spacing: -0.025em; text-align: center; color: var(--black); } .modal__text { width: 372px; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; text-align: center; white-space: nowrap; color: var(--black); } .modal__form { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 553px; height: 142px; } .modal__row { display: flex; align-items: center; gap: 8px; width: 553px; height: 68px; } .modal__form input { box-sizing: border-box; width: 355px; height: 68px; padding: 0 24px; border: 1px solid #e4e4e4; border-radius: 12px; font-family: "Inter", sans-serif; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: var(--black); outline: none; background: #fff; } .modal__form input::placeholder { color: var(--muted); } .modal__form input.invalid { border-color: var(--orange); } .modal__form .btn { width: 190px; height: 68px; padding: 22px 36px; font-size: 24px; line-height: 24px; } .modal__note { flex: none; width: 404px; height: 54px; font-size: 14px; line-height: 18px; font-weight: 400; text-align: center; color: var(--muted); } .modal__note a { color: var(--hover-green); transition: color 0.15s ease; } .modal__note a:hover, .modal__note a:focus-visible { color: var(--hover-green); outline: none; } .success-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .success-card__eyebrow { margin: 0 0 32px; font-size: 24px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--orange); } .success-card__title { width: 481px; margin: 0 0 24px; font-size: 48px; line-height: 58px; font-weight: 700; letter-spacing: -2.5%; color: var(--black); } .success-card__text { width: 475px; margin: 0 0 50px; font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: -0.02em; color: var(--black); } .success-card__button { width: 440px; height: 68px; padding: 22px 36px; font-size: 24px; line-height: 24px; } .success-card__button-mobile { display: none; } body.modal-open { overflow: hidden; } .toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(160%); background: #f3fdf2; color: var(--black); padding: 14px 24px; border-radius: 10px; font-size: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 1001; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } @media (min-width: 1200px) and (max-width: 1920px) { /* At 1920bp: show 1920 SVGs, hide others */ .hero__curve-anim--2560 { display: none; } .hero__curve-anim--1920 { display: block; } .hero { height: 1086px; } .hero__left, .hero__bg-green { width: 960px; height: 1080px; } .hero__curve--1 { left: 0; top: 0; width: 351px; height: 1034px; } .hero__curve--2 { left: 0; top: 0; width: 898px; height: 1080px; } .hero__right { left: 960px; width: 960px; height: 1080px; } .hero__curve--3 { left: 0; top: 214px; width: 960px; height: 872px; opacity: 1; } .hero__photo { width: 960px; height: 1080px; background-size: auto 1080px; } .header { left: 80px; top: 50px; width: 1760px; height: 68px; } .header__logo img { width: 211.56px; } .header__nav { gap: 40px; } .header__links { gap: 25px; } .header__link { gap: 10px; font-size: 24px; line-height: 24px; } .header__link svg { width: 18px; height: 18px; } .header .btn { width: 202px; height: 68px; padding: 22px 36px; font-size: 24px; line-height: 24px; } .hero__title { left: 80px; width: 880px; gap: 20px; } .hero__title-inner { width: 880px; gap: 16px; } .hero__title .tag { font-size: 24px; line-height: 28px; } .hero__h1 { width: 880px; font-family: "Inter", sans-serif; font-size: 72px; line-height: 74px; letter-spacing: -0.025em; } .hero__paragraph { width: 590px; font-size: 24px; line-height: 32px; color: #4b4c4b; } /* ===================== 02 + 03 ABOUT ===================== */ .about { padding: 120px 80px 200px; gap: 180px; } .section-title { font-size: 64px; line-height: 68px; } .highlight-green::before { left: -17px; width: calc(100% + 34px); height: 68px; } .platform { width: 1760px; height: 1191px; gap: 60px; } .platform__headline { gap: 16px; } .cards { width: 1760px; gap: 40px; } .card { width: 560px; } .card__img { width: 560px; height: 672px; border-radius: 33px; } .card__text { width: 560px; } .card__title-container { width: 560px; } .card__title { font-size: 36px; line-height: 40px; } .card__body { width: 560px; } .team { width: 1760px; gap: 60px; } .team__head { width: 1760px; } .team__body { width: 1760px; gap: 100px; } .feature { width: 1760px; height: 764px; } .feature__media { width: 1040px; height: 764px; } .feature--img-right .feature__media { left: 720px; } .feature__content { width: 589px; } .feature__title { font-size: 36px; line-height: 40px; } .feature--img-right .feature__content--left { top: 260px; } .feature--img-left .feature__content--right { left: 1200px; top: 240px; } .feature__deco--spark { width: 133px; height: 133px; left: 433px; top: 190px; } .feature__deco--arrow { width: 159px; height: 159px; left: 973px; top: 303px; } .feature__deco--heart { width: 140px; height: 160px; left: 830px; top: -48px; } /* ===================== 04 TSTREE ===================== */ .tstree { height: 739px; } .tstree__bg { height: 739px; } .tstree__photo { left: 1095px; top: 42px; width: 720px; height: 727.5px; } .tstree__content { left: 80px; top: 150px; } .tstree__title { font-size: 48px; line-height: 51px; } .tstree__textblock .body-24 { width: 511.5px; } .spark--lg-right { width: 180.038px; height: 180.038px; left: 1658.903px; top: 375.96px; } .spark--lg-left { width: 156.578px; height: 135.6px; left: 150.75px; top: 258.75px; } .spark--md-1 { width: 121.59px; height: 121.59px; left: 960px; top: 161.55px; } .spark--md-2 { width: 60.788px; height: 60.788px; left: 1071.06px; top: 310.02px; } .spark--md-3 { width: 60.788px; height: 60.788px; left: 1693.02px; top: 241.05px; } /* ===================== 05 FOOTER ===================== */ .footer { min-height: 678px; padding: 100px 80px 80px; border-radius: 40px 40px 0 0; } .footer__inner { width: 1760px; gap: 100px; } .footer__text { width: 1760px; gap: 50px; height: 366px; } .footer .tag { font-size: 24px; line-height: 28px; padding: 4px 0; } .footer__title-wrap { gap: 20px; width: 712px; height: 178px; } .footer__titles { gap: 16px; width: 712px; height: 122px; } .footer__title { font-size: 72px; line-height: 74px; width: 712px; } .footer .body-24 { font-size: 24px; line-height: 32px; } .footer__titles .body-24 { width: 372px; } .footer__form { gap: 16px; width: 602px; } .footer__row { gap: 8px; width: 602px; } .footer .input { height: 68px; padding: 0 24px; border-radius: 8px; } .footer .input input { font-size: 24px; line-height: 24px; } .footer .btn { padding: 22px 36px; font-size: 24px; line-height: 24px; border-radius: 12px; } .footer__submit { width: 190px; } .footer__note { font-size: 14px; line-height: 18px; width: 470px; } .footer__copyright { width: 1760px; } .footer__bottom { width: 1760px; } .footer__links { gap: 20px; width: 340px; } .footer__links a { font-size: 18px; line-height: 24px; } .footer__copy { font-size: 18px; line-height: 24px; white-space: nowrap; } .footer__social { gap: 40px; width: 340px; justify-content: flex-end; } .footer__social img { width: 32px; height: 32px; } } @media (max-width: 1199px) { /* At 1024bp: show 1024 SVGs, hide others */ .hero__curve-anim--2560, .hero__curve-anim--1920 { display: none; } .hero__curve-anim--1024 { display: block; } /* ===================== 01 HERO ===================== */ .hero { height: 576px; } .hero__left, .hero__bg-green { width: 512px; height: 576px; } .hero__right { left: 512px; width: 512px; height: 576px; } .hero__curve--3 { display: block; } .hero__curve--1 { left: 8px; top: 0; width: 187px; height: 576px; z-index: 2; } .hero__curve--2 { left: -6px; top: -75.6px; width: 479px; height: 576px; z-index: 2; } .hero__curve--3 { left: 0; top: 140px; width: 512px; height: 465px; opacity: 1; } .hero__photo { width: 512px; height: 576px; background-size: auto 576px; } .header { left: 40px; width: 944px; height: 44px; } .header__logo img { width: 124px; } .header__nav { gap: 40px; } .header__links { gap: 40px; } .header__link { font-size: 18px; line-height: 24px; } .header__link svg { width: 14px; height: 14px; } .header .btn { width: 150px; height: 44px; padding: 22px 36px; font-size: 14px; line-height: 18px; border-radius: 8px; } .hero__title { left: 40px; width: 432px; gap: 16px; } .hero__title-inner { width: 432px; gap: 8px; } .hero__title .tag { font-size: 14px; line-height: 18px; } .hero__h1 { width: 432px; font-size: 36px; line-height: 40px; letter-spacing: -0.025em; } .hero__paragraph { width: 342px; font-size: 14px; line-height: 18px; color: var(--black); } /* ===================== 02+03 ABOUT ===================== */ .about { padding: 88px 40px; gap: 111px; } .section-title { font-size: 30px; line-height: 36px; } .platform { width: 944px; gap: 40px; height: auto; } .platform__headline { gap: 12px; } .platform__text { gap: 16px; } .platform__text .body-24 { width: 395.2px; font-size: 14px; line-height: 18px; } .platform .btn { width: 150px; height: 44px; padding: 22px 36px; font-size: 14px; line-height: 18px; border-radius: 8px; } .cards { width: 944px; gap: 40px; } .card { width: 288px; gap: 20px; } .card__img { width: 288px; height: 345.6px; border-radius: 33px; } .card__text { width: 288px; gap: 8px; } .card__title-container { width: 288px; gap: 20px; } .card__tag { font-size: 14px; line-height: 18px; } .card__title { font-size: 24px; line-height: 32px; } .card__body { width: 268px; font-size: 14px; line-height: 18px; } /* ===================== 03 TEAM ===================== */ .team { width: 944px; gap: 32px; } .team__head { width: 944px; } .team__title { width: 432px; } .highlight-green::before { height: 39.6px; top: 0; } .team__sub { font-size: 14px; line-height: 18px; width: 412px; } .team__body { width: 944px; gap: 40px; } .feature { width: 944px; height: 348px; } .feature__media { width: 472px; height: 346.8px; border-radius: 18px; } .feature--img-right .feature__media { left: 472px; } .window { width: 426.8px; } .window__bar { gap: 4.4px; height: 14.4px; border-radius: 7.2px 7.2px 0 0; } .window__bar span { width: 4.4px; height: 4.4px; } .window__shot { width: 426.8px; height: 286.8px; border-radius: 0 0 7.2px 7.2px; } .feature__content { width: 472px; } .feature__content .card__tag { font-size: 14px; line-height: 18px; margin-bottom: 8px; } .feature__content .feature__title { font-size: 24px; line-height: 32px; margin-bottom: 12px; } .feature--img-right .feature__content--left { left: 0; top: 94.8px; } .feature--img-left .feature__content--right { left: 513.6px; top: 98.8px; } .feature__title { font-size: 24px; line-height: 32px; } .feature__list { gap: 4px; } .feature__list li { font-size: 14px; line-height: 18px; gap: 8px; } .feature__list li span { font-size: 14px; line-height: 18px; width: 22px; } .feature__deco--spark { width: 78px; height: 78px; left: 299.2px; top: 72px; } .feature__deco--arrow { width: 65px; height: 67px; left: 435px; top: 150px; } .feature__deco--heart { width: 65px; height: 74px; left: 403.8px; top: -5.2px; transform: rotate(-6.32deg); } /* ===================== 04 TSTREE ===================== */ .tstree { height: 446px; margin-top: -40px; } .tstree__bg { left: 0; top: -4px; width: 1025px; height: 446px; border-radius: 24px 24px 0 0; } .tstree__photo { left: 511px; top: 36px; width: 452px; height: 406px; } .tstree__content { left: 40px; top: 85.892px; width: 399px; gap: 40px; } .tstree__logo { width: 106px; } .tstree__textblock { gap: 12px; } .tstree__title { width: 399px; font-size: 30px; line-height: 36px; } .tstree__textblock .body-24 { width: 399px; font-size: 14px; line-height: 18px; } .tstree__button { width: 132px; height: 44px; padding: 13px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; } .spark--lg-right { width: 127px; height: 128px; left: 857px; top: 193px; } .spark--lg-left { width: 208.772px; height: 180.8px; left: 102px; top: 83.6px; transform: rotate(1deg); } .spark--md-1 { width: 86px; height: 86px; left: 380px; top: 53px; } .spark--md-2, .spark--md-3 { width: 43px; height: 43px; } .spark--md-2 { left: 459px; top: 159px; } .spark--md-3 { left: 899px; top: 110px; } /* ===================== 05 FOOTER ===================== */ .footer { min-height: 454px; margin-top: 0; padding: 60px 40px 30px; gap: 40px; border-radius: 24px 24px 0 0; } .footer__inner { width: 944px; gap: 40px; } .footer__text { width: 944px; height: 242px; gap: 24px; } .footer__title-wrap { width: 297px; height: 104px; gap: 12px; } .footer__title-wrap .tag { font-size: 14px; line-height: 18px; } .footer__titles { width: 297px; height: 66px; gap: 12px; } .footer__title { width: 297px; font-size: 30px; line-height: 36px; } .footer__titles .body-24 { width: 226px; font-size: 14px; line-height: 18px; } .footer__form { width: 602px; height: 114px; gap: 16px; } .footer__row { width: 382px; height: 44px; gap: 8px; } .footer .input { flex: 0 0 auto; width: 274px; height: 44px; padding: 0 12px; background: #fff; border-radius: 8px; } .footer .input input { font-size: 14px; line-height: 18px; } .footer .input input::placeholder { color: #a2a2a2; } .footer__submit { width: 100px; height: 44px; padding: 13px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; } .footer__note { width: 482px; font-size: 14px; line-height: 18px; } .footer__copyright { width: 944px; min-height: 82px; } .footer__bottom { width: 944px; height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 24px 18px; align-items: center; gap: 40px 0; } .footer__social { grid-column: 2; grid-row: 1; order: initial; width: 168px; height: 24px; justify-content: flex-end; gap: 24px; } .footer__social img { width: 24px; height: 24px; } .footer__links { grid-column: 1; grid-row: 2; order: initial; width: 416px; gap: 20px; } .footer__links a, .footer__copy { font-size: 14px; line-height: 18px; } .footer__copy { position: static; transform: none; grid-column: 3; grid-row: 2; order: initial; width: 273px; text-align: center; justify-self: end; } } @media (max-width: 768px) { /* ===================== 01 HERO ===================== */ .hero { height: 812.032px; margin-top: 0; z-index: 0; } .hero::before { content: none; } .hero__mobile-vector { display: block; position: absolute; box-sizing: border-box; left: 0; top: 395.508px; width: 375px; /* native aspect 375:386 -> 2560 * 386/375 */ height: 385.986px; transform: none; opacity: 0.58; filter: blur(0.6px); -webkit-mask-image: linear-gradient( 160deg, transparent 0%, #000 14%, #000 72%, transparent 100% ); mask-image: linear-gradient( 160deg, transparent 0%, #000 14%, #000 72%, transparent 100% ); pointer-events: none; z-index: 1; } .hero__left, .hero__bg-green, .hero__curve--1, .hero__curve--2, .hero__curve--3 { display: none; } .hero__right { left: 0; top: 0; width: 375px; height: 812.032px; overflow: hidden; /* background inherited from the base rule so the tint matches every tier */ } .hero__photo { left: 0; top: -14.648px; width: 375px; height: 812.032px; background-image: url("img/9.webp"); background-size: auto 424.512px; background-position: center 385.84px; background-repeat: no-repeat; z-index: 2; } .header { left: 16px; top: 16px; width: 343px; height: 44px; z-index: 5; } .header__logo img { width: 124px; } .header__nav { gap: 0; } .header__links { display: none; } .header .btn { width: 150px; height: 44px; padding: 22px 36px; border-radius: 8px; font-size: 14px; line-height: 18px; } .hero__title { left: 38px; top: 150px; width: 300px; height: 224px; transform: none; align-items: flex-start; gap: 16px; z-index: 4; } .hero__title-inner { width: 300px; align-items: center; gap: 8px; } .hero__title .tag { width: 153px; justify-content: center; font-size: 14px; line-height: 18px; } .hero__h1 { width: 300px; margin: 0; font-family: "Inter", sans-serif; font-size: 36px; line-height: 40px; letter-spacing: -0.025em; text-align: center; } .hero__h1 .accent-purple { white-space: nowrap; } .hero__paragraph { width: 300px; margin: 0; font-size: 14px; line-height: 18px; text-align: center; } .about { margin-top: -48.926px; width: 100%; padding: 60px 22px; gap: 40px; overflow: hidden; z-index: 3; } /* ===================== 02 PLATFORM ===================== */ .platform { width: 331.055px; height: auto; gap: 40px; align-items: flex-start; } .platform__headline { width: 331.055px; gap: 20px; align-items: center; } .platform .section-title { width: 331.055px; font-size: 30px; line-height: 36px; text-align: center; } .underline-orange::after { height: 7.031px; bottom: 2.051px; } .platform__text { width: 331.055px; padding: 0 24px; gap: 20px; align-items: center; } .platform__text .body-24 { width: 295px; font-size: 14px; line-height: 18px; text-align: center; } .platform .btn { width: 150px; height: 44px; padding: 22px 36px; border-radius: 8px; font-size: 14px; line-height: 18px; } /* Cards -> horizontal scroll (swipe right) */ .cards { width: 331.055px; max-width: 100%; gap: 16px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cards::-webkit-scrollbar { display: none; } .card { flex: 0 0 304px; width: 304px; gap: 20px; } .card__img { width: 304px; height: 364.805px; border-radius: 16px; } .card__text { width: 304px; gap: 8px; } .card__title-container { width: 304px; gap: 16px; } .card__tag { font-size: 14px; line-height: 18px; } .card__title { font-size: 24px; line-height: 32px; } .card__body { width: 284.033px; font-size: 14px; line-height: 18px; } /* ===================== 03 TEAM ===================== */ .team { width: 331.055px; max-width: 100%; gap: 40px; align-items: center; } .team__head { width: 331.055px; gap: 8px; align-items: center; } .team .section-title { width: 331.055px; font-size: 30px; line-height: 36px; text-align: center; } .team__title { width: 331.055px; } .highlight-green::before { left: -17px; top: 4.395px; width: calc(100% + 33.984px); height: 35.156px; transform: rotate(-2.39deg); } .team__sub { width: 295px; font-size: 14px; line-height: 18px; text-align: center; } .team__body { width: 331.055px; max-width: 100%; gap: 40px; align-items: center; } /* Feature -> vertical stack (text on top, image below) */ .feature { display: flex; flex-direction: column; width: 331.055px; max-width: 100%; height: auto; gap: 24px; overflow: visible; } .feature__media { position: relative; order: 2; left: 0; width: 331.055px; max-width: 100%; height: 251.953px; border-radius: 13.184px; overflow: visible; } .feature--img-right .feature__media, .feature--img-left .feature__media { left: 0; } .window { width: 310.107px; max-width: calc(100% - 20px); } .window__bar { gap: 3.135px; height: 10.4px; padding: 0 4.688px; border-radius: 5.273px 5.273px 0 0; } .window__bar span { width: 3.135px; height: 3.135px; } .window__shot { width: 310.107px; max-width: 100%; height: 208.594px; border-radius: 0 0 5.273px 5.273px; } .feature__content { position: static; order: 1; width: 331.055px; max-width: 100%; overflow: hidden; } .feature__content .card__tag { font-size: 14px; line-height: 18px; margin-bottom: 8px; } .feature__content .feature__title { font-size: 24px; line-height: 32px; margin-bottom: 16px; } .feature__title { font-size: 24px; line-height: 32px; } .feature__list { gap: 2px; width: 100%; } .feature__list li { font-size: 14px; line-height: 18px; gap: 8px; width: 100%; min-width: 0; align-items: flex-start; overflow-wrap: anywhere; } .feature__list li span + * { min-width: 0; } .feature__list li span { width: 24px; font-size: 18px; line-height: 24px; } .feature__deco--spark { width: 77.93px; height: 77.93px; left: 258px; top: -27px; z-index: 5; } /* arrow sits over the image top-right corner (anchored to bottom) */ .feature__deco--arrow { width: 55px; height: 57px; left: 285px; top: 200px; bottom: 196px; z-index: 5; } .feature__deco--heart { width: 55px; height: 63px; left: 281px; top: -12px; z-index: 5; } /* ===================== 04 TSTREE ===================== */ .tstree { height: 665.039px; margin-top: -20.068px; } .tstree__bg { left: 0; top: 0; width: 375px; height: 689.941px; border-radius: 24.023px 24.023px 0 0; } .br-mobile { display: inline; } .tstree__photo { left: 40.43px; top: auto; bottom: 0; width: 294.141px; height: 264.258px; background: url("img/tstree-family.webp") center top / cover no-repeat; } .tstree__content { left: calc(50% - 150px); top: 40px; width: 300px; gap: 20px; align-items: center; } .tstree__logo { width: 140.039px; } .tstree__textblock { width: 300px; gap: 12px; align-items: center; } .tstree__title { width: 300px; font-size: 30px; line-height: 36px; text-align: center; } .tstree__textblock .body-24 { width: 300px; font-size: 14px; line-height: 18px; text-align: center; } .tstree__button { width: 131.982px; height: 44px; padding: 13px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; } /* Sparkles */ .spark--lg-right { width: 82.617px; height: 83.203px; left: 271.729px; top: 505.518px; transform: none; } .spark--lg-left { width: 113.672px; height: 98.438px; left: 21.973px; top: 104px; transform: rotate(-10.19deg); } .spark--md-1 { width: 55.957px; height: 55.957px; left: 46px; top: 393.018px; } .spark--md-2 { width: 27.979px; height: 27.979px; left: 303.662px; top: 430.078px; } .spark--md-3 { width: 27.979px; height: 27.979px; left: 17.432px; top: 462.012px; } /* ===================== 05 FOOTER ===================== */ .footer { height: auto; margin-top: -20.068px; padding: 60.059px 37.5px 40px; gap: 24px; border-radius: 24.023px 24.023px 0 0; } .footer__inner { width: 300px; gap: 40px; align-items: center; } .footer__text { width: 300px; height: auto; gap: 24px; align-items: center; } .footer__title-wrap { width: 300px; height: auto; gap: 8px; } .footer__title-wrap .tag { font-size: 18px; line-height: 24px; } .footer__titles { width: 300px; height: auto; gap: 8px; } .footer__title { width: 300px; font-size: 30px; line-height: 36px; } .footer__titles .body-24 { width: 300px; font-size: 14px; line-height: 18px; white-space: normal; } .footer__form { width: 300px; height: auto; gap: 13px; } .footer__row { flex-direction: column; align-items: stretch; width: 300px; height: auto; gap: 8px; } .footer .input { flex: none; width: 300px; height: 44px; padding: 0 16px; border: 1.025px solid #e4e4e4; border-radius: 8px; } .footer .input input { font-size: 14px; line-height: 18px; text-align: center; } .footer__submit { width: 300px; height: 44px; padding: 13px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; } .footer__note { width: 300px; font-size: 14px; line-height: 18px; } .footer__copyright { width: 300px; height: auto; } .footer__bottom { display: flex; flex-direction: column; align-items: center; width: 300px; height: auto; gap: 20px; } .footer__social { order: 1; gap: 20px; justify-content: center; } .footer__social img { width: 24.023px; height: 24.023px; } .footer__divider { display: block; order: 2; width: 295.02px; height: 0; border: 0; border-top: 1.025px solid #d0d0d0; } .footer__logo { display: block; order: 3; width: 146.484px; height: auto; } .footer__links { order: 4; width: 219.727px; flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .footer__links a { font-size: 14px; line-height: 18px; } .footer__copy { position: static; transform: none; order: 5; font-size: 14px; line-height: 18px; text-align: center; width: 100%; } /* ===================== POP-UP (bottom sheet) ===================== */ /* NOTE: the modal is outside .page, so it is NOT scaled — real px here */ .modal { align-items: flex-end; } /* ponytail: safety net for the frame between an iOS viewport pan and the visualViewport sync in script.js -- the sheet keeps a strip of its own colour past the bottom edge, pulled back out of layout by a negative margin. A border, not padding: borders sit outside the scrollport, so this adds no blank space to scroll into. */ .modal__dialog { zoom: var(--zoom); width: 375px; height: auto; max-height: calc(92svh / var(--zoom) + var(--sheet-overshoot)); overflow-y: auto; padding: 60px 40px 40px; border-bottom: var(--sheet-overshoot) solid #f5f5ef; margin-bottom: calc(var(--sheet-overshoot) * -1); gap: 24px; border-radius: 24px 24px 0 0; } .modal__close { display: none; } .modal__handle { display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 6px; background: #dddddd; border-radius: 9px; cursor: pointer; } .modal__title-wrap { width: 100%; height: auto; gap: 8px; } .modal__title-wrap .tag { font-size: 18px; line-height: 24px; } .modal__titles { width: 100%; height: auto; gap: 8px; } .modal__title { width: 100%; font-size: 30px; line-height: 36px; } .modal__text { width: 100%; font-size: 14px; line-height: 18px; white-space: normal; } .modal__form { width: 100%; height: auto; gap: 13px; } .modal__row { flex-direction: column; align-items: stretch; width: 100%; height: auto; gap: 8px; } .modal__form input { width: 100%; height: 44px; padding: 0 16px; border-radius: 8px; font-size: 14px; line-height: 18px; text-align: center; } .modal__form .btn { width: 100%; height: 44px; padding: 13px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; } .modal__note { width: 100%; height: auto; font-size: 14px; line-height: 18px; } .modal__social { display: flex; align-items: center; justify-content: center; gap: 20px; } .modal__social img { width: 24px; height: 24px; } .modal__view--form { gap: 24px; } .modal__view--success { min-height: 156px; } .success-card__eyebrow { margin-bottom: 12px; font-size: 18px; line-height: 24px; } .success-card__title { width: 100%; margin-bottom: 12px; font-size: 30px; line-height: 36px; } .success-card__text { width: 300px; margin-bottom: 24px; font-size: 14px; line-height: 18px; letter-spacing: 0; } .success-card__button { width: 100%; height: 44px; padding: 13px 24px; border-radius: 8px; font-size: 14px; line-height: 14px; } .success-card__button-desktop { display: none; } .success-card__button-mobile { display: inline; } .modal.modal--success { align-items: flex-end; justify-content: center; } .modal.modal--success .modal__dialog { width: 375px; max-height: none; margin-top: 0; margin-bottom: calc(var(--sheet-overshoot) * -1); padding: 60px 40px 40px; border-bottom: var(--sheet-overshoot) solid #f5f5ef; overflow: visible; border-radius: 24px 24px 0 0; gap: 0; } .modal.modal--success .modal__handle { top: 8px; width: 40px; height: 4px; } .modal.modal--success .modal__view--success { min-height: 0; } }