/* 1. Use a more-intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ *:not(dialog) { margin: 0; } body { /* 4. Add accessible line-height */ /* line-height: 1.5; */ /* 5. Improve text rendering */ -webkit-font-smoothing: antialiased; } /* 6. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 7. Inherit fonts for form controls */ input, button, textarea, select { font: inherit; } /* 8. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 9. Improve line wrapping */ p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* 10. Create a root stacking context */ #root, #__next { isolation: isolate; } h1 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; } .container { max-width: 1000px; padding: 60px 24px; margin: 0 auto; text-align: center; font-family: "Roboto", sans-serif; } .wrapper-primary { background-color: #eff6ff; } button { border: none; margin: 0; padding: 0; } .input, .button { width: 100%; } .form__button_disabled { cursor: not-allowed; opacity: 0.4; } .badge { background-color: #dbeafe; font-size: 16px; color: #1447e6; padding: 16px 24px; border-radius: 28px; display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-bottom: 24px; } .heading { font-size: 62px; font-weight: 700; } .heading-blue { color: #155dfc; } .intro { display: flex; flex-direction: column; align-items: center; } .title { max-width: 700px; } .text { width: 80%; margin: 24px auto; color: #4a5565; } .buttons { display: flex; align-items: center; gap: 10px; } .button { padding: 24px; font-size: 16px; border-radius: 12px; height: 60px; align-items: center; justify-content: center; display: flex; width: 100%; cursor: pointer; min-height: 60px; padding: 0 24px; } .button-primary { background-color: #155dfc; color: #fff; transition: background-color 0.3s linear; } .button-primary:hover { background-color: #1447e6; } .button-outlined { border: 2px solid #155dfc; color: #155dfc; background-color: #fff; } .dashboard { padding: 48px; border-radius: 12px; margin-top: 60px; background-color: #fff; border: 1px solid #e5e7eb; box-shadow: 0px 0px 20px 0px #000; position: relative; } .dashboard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-radius: 12px; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #eff6ff); pointer-events: none; } .dashboard__icon { display: flex; } .dashboard__icon svg circle { color: #155dfc; } .dashboard__content { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .dashboard__table { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; /* Автоматические строки */ gap: 5px; width: 100%; aspect-ratio: 7/5; /* Поддерживаем пропорции контейнера */ } .cell { aspect-ratio: 1/1; border-radius: 12px; } .cell-blue { background-color: #155dfc; } .cell-blue-300 { background-color: #8ec5ff; } .cell-blue-500 { background-color: #f3f4f6; } .paragraph { font-size: 20px; font-weight: 500; margin-bottom: 16px; } .text-full { max-width: 100%; } .tracker { display: flex; justify-content: space-between; gap: 20px; } .tracker-w { display: flex; align-items: center; justify-content: center; } .tracker__icon { display: flex; background-color: #dbeafe; border-radius: 12px; padding: 12px; width: fit-content; margin-bottom: 12px; height: 56px; width: 56px; } .tracker__icon svg path, .tracker__icon svg rect, .tracker__icon svg circle { color: #155dfc; } .tracker__heading { margin-bottom: 12px; font-weight: 500; height: 40px; } .tracker__text { color: #4a5565; } .reviews { background-color: #193cb8; border-radius: 12px; padding: 48px; color: #fff; margin-top: 60px; } .reviews__list { display: flex; align-items: center; justify-content: center; gap: 20px; } .reviews__heading { margin-bottom: 16px; } .reviews__text { margin-bottom: 32px; color: #dbeafe; } .reviews__item-heading { font-size: 36px; margin-bottom: 8px; } .reviews__item-text { color: #bedbff; } .reviews__item { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .wrapper__header { margin-bottom: 60px; } .form { padding: 48px; border-radius: 12px; background-color: #fff; border: 1px solid #e5e7eb; box-shadow: 1px 0px 10px 0px #000; } .form__input { position: relative; } .form__icon { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 22px; } .form__icon svg, .form__icon circle { color: #99a1af; } .form__label { text-align: left; margin-bottom: 8px; color: #364153; } .form__item { margin-bottom: 32px; } .input { padding: 24px; padding-left: 40px; font-size: 16px; border-radius: 12px; border: 2px solid #d1d5dc; transition: border-color 0.3s linear; font-family: "Roboto", sans-serif; } .input:focus { border-color: #155dfc; outline: none; } .input::placeholder { font-size: 16px; font-weight: 400; opacity: 1; } .footer { background-color: #101828; } .footer__content { padding: 60px; display: flex; justify-content: space-around; align-items: center; color: #fff; font-family: "Roboto", sans-serif; } .footer__logo { display: flex; align-items: center; justify-self: center; gap: 20px; } .form__button_disabled { cursor: not-allowed; } @media (max-width: 700px) { .tracker, .reviews__list { flex-wrap: wrap; } .heading { font-size: 40px; } .dashboard, .reviews, .form { padding: 32px; } .footer__content { padding: 30px; flex-direction: column; gap: 10px; } }