/* Сгенерировано scripts/build-original-css.mjs. Не редактировать вручную. */ @charset "utf-8"; /* Порядок повторяет исходный сайт: стили компонентов Bitrix выводились в раньше основного common.css шаблона. */ /* components/projects_v2.css */ .about-wrapper { margin: var(--about-footer-margin); border-radius: 12px 12px 20px 20px; } .about-wrapper--black { border-radius: 12px 12px 0 0; background: #000; } .about-wrapper__top { display: flex; justify-content: space-between; margin-bottom: 64px; padding: 48px 48px 0 48px; } .about-wrapper__top__item { flex-shrink: 0; } .about-wrapper__top__copy { color: var(--color-white); min-width: 150px; width: 100%; opacity: 0.4; } .about-wrapper__top__right-gap { max-width: 80px; width: 100%; } .about-wrapper__title { color: var(--general-white); max-width: 856px; /*margin-bottom: 48px;*/ } .about-wrapper__texts { display: flex; justify-content: space-between; max-width: 813px; margin-top: 48px; } .about-wrapper__texts-item { font-size: var(--font-p1-size-1440); line-height: 120%; letter-spacing: -0.02em; color: var(--general-white); opacity: 0.4; max-width: 342px; } .about-wrapper__item-top { display: flex; justify-content: space-between; margin-bottom: 8px; } .about_project_cards_bg { background-size: cover; width: 100%; } .about-wrapper__text-container { position: relative; width: 100%; display: flex; flex-direction: column; z-index:1; } .about-wrapper__business-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3%; margin-top: 20px; } @media (max-width: 1080px) { .about-wrapper__business-container { transform: scale(0.8); } } @media (max-width: 864px) { .about-wrapper__business-container { transform: scale(0.7); } .about-wrapper__text-container { bottom: 80px; } } @media (max-width: 748px) { .about-wrapper__business-container { transform: scale(0.6); } } @media (max-width: 640px) { .about-wrapper__business-container { transform: scale(0.5); } .about-wrapper__business-container { margin-top: 0; justify-content: space-around; gap: 10%; } .about-wrapper__business-container div:nth-last-child(n+2) { margin-top: 15px; } } @media (max-width: 530px) { .about-wrapper__business-container { transform: scale(0.4); } } @media (max-width: 476px) { .about-wrapper__text-container { bottom: 23px; } } .about-wrapper__project-cards__item { max-width: 152px; } .about-wrapper__item-title, .about-wrapper__item-year { font-size: var(--font-p2-size-1440); line-height: 120%; color: var(--general-white); } .about-wrapper__item-img { overflow: hidden; border-radius: 6px; height: 103px; } .about-wrapper__item-img img { width: 100%; height: 100%; } .about-wrapper__text { font-size: var(--font-h2-size-1440); line-height: 90%; letter-spacing: -0.06em; text-align: center; color: var(--color-white); max-width: 1166px; margin: 0 auto; } .about-wrapper__gradient-items { display: flex; flex-flow: row nowrap; width: 100%; align-items: flex-end; position: relative; z-index:0 } .about-wrapper__gradient-items .horizontal-gradient_about, .about-wrapper__gradient-items .horizontal-gradient_about_black { z-index: 2; } .gradient-item--overlay { position: absolute; top: -1px; /* Фикс верхнего бордера, который периодически появляется */ left: 0; height: 100%; width: 100%; z-index: 1; background: linear-gradient(to bottom, black 80%, white 100%); } .gradient-item--overlay-black{ position: absolute; top: 1px; left: 0; height: 100%; width: 100%; z-index: 1; background: linear-gradient(to bottom, black 80%, rgba(0, 0, 0, 0.41) 100%); } .about-wrapper__gradient-items--bottom{ top: -100px; } .about-wrapper__gradient-items--top{ align-items: flex-start; top:100px; } .about-wrapper__gradient-items .horizontal-gradient { /*transform: matrix(1.005, 0, 0, -1.005, 0, 0);*/ } @media (max-width: 1024px) { .about-wrapper__top { flex-direction: column; } .about-wrapper__texts { max-width: 100%; gap: 24px; } .about-wrapper__texts-item { flex: 1 1; } } @media (max-width: 768px) { .about-wrapper__texts { margin-top: 24px; } } @media (max-width: 476px) { .about-wrapper__texts { flex-direction: column; } } @media (max-width: 1366px) { .about-wrapper__gradient-items--top{ align-items: flex-start; top:100px; } .about-wrapper__gradient-items--bottom { top: -130px; } } @media (max-width: 768px) { .about-wrapper__gradient-items--top{ top:unset; } .about-wrapper__top__central-gap{ height:20px } .about-wrapper__gradient-items--bottom { top: -130px; } } @media (max-width: 476px) { .about-wrapper__gradient-items--top{ top:15px; } .about-wrapper__gradient-items--bottom { top:-70px; } .about-wrapper__top { padding: 16px 16px 0 16px; } } /* components/services.css */ .services-wrapper { margin: var(--main-margin); } .services-wrapper__title { margin-bottom: 60px; } .services-items { display: grid; grid-template-columns: repeat(2, 1fr); } .services-item { border-top: 1px solid var(--color-stroke); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 516px; height: 100%; } .services-item_odd { border-right: 1px solid var(--color-stroke); padding: 48px 48px 48px 24px; } .services-item_even { padding: 48px 24px 48px 48px; } .services-item__title { display: flex !important; align-items: center; margin-bottom: 24px; justify-content: space-between; } .services-item__title:hover { cursor: pointer; } .services-item__title i { min-width: 28px; min-height: 28px; border-radius: 50%; margin-left: 5px; background-color: var(--color-violet); display: flex; align-items: center; justify-content: center; cursor: pointer; display: none !important; } .services-item__title:hover img { animation: MoveRightInitial 0.2s forwards, MoveRightEnd 0.4s forwards 0.2s; } @keyframes MoveRightInitial { to { transform: translate3d(250%, 0, 0); } } @keyframes MoveRightEnd { from { transform: translate3d(-150%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .services-item__text { max-width: 370px; } .services-item__labels { display: flex; flex-wrap: wrap; gap: 8px; } .services-item__label { color: var(--color-violet); background-color: var(--color-light-pink); border-radius: 42px; padding: 8px 12px; } @media (max-width: 768px) { .services-wrapper { margin-left: 36px; margin-right: 36px; } .services-items { grid-template-columns: repeat(1, 1fr); } .services-item { min-height: 100%; height: auto; gap: 64px; padding: 36px 0; } .services-item_odd { border-right: none; padding: 36px 0; } .services-item__text { max-width: 100%; } .services-item__label { padding: 6px; } .services-item__labels.p1-style { font-size: var(--font-p2-size-360); } } /* components/work_process.css */ .pipeline-wrapper { margin: var(--main-margin); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .pipeline-wrapper h2 { margin-bottom: 64px; } .pipeline-wrapper__table { display: grid; width: 100%; grid-auto-flow: row; } .pipeline-wrapper__table__row:first-child { border-top: 1px solid var(--color-stroke); } .pipeline-wrapper__table__row { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--color-stroke); padding-top: 35px; padding-bottom: 35px; } .pipeline-wrapper__table__row__number { display: flex; align-items: flex-start; justify-content: flex-start; color: var(--color-violet); } .pipeline-wrapper__table__row__title { display: flex; justify-content: left; align-items: flex-start; } .pipeline-wrapper__table__row:last-child { border: none; padding-bottom: 0; } .pipeline-wrapper__table__row__description { opacity: 0.5; } @media (max-width: 768px) { .pipeline-wrapper { margin-left: 16px; margin-right: 16px; } .pipeline-wrapper__table__row { grid-auto-flow: row; grid-template-columns: 1fr; gap: 16px; } } /* components/directions.css */ .directions-wrapper { margin: var(--main-margin); display: flex; flex-direction: column; } .directions-wrapper h2 { margin-bottom: 64px; } .directions-wrapper__items { display: flex; flex-flow: row wrap; row-gap: 64px; } .directions-wrapper__items_bottom-margin { /*margin-bottom: 64px;*/ } .directions-wrapper__item { display: flex; flex-direction: column; justify-content: space-between; height: 296px; flex: 1 1 348px; border-right: 1px solid var(--color-stroke); padding-left: 16px; padding-right: 16px; } .directions-wrapper__item:first-child { padding-left: 0; } .directions-wrapper__item:nth-child(4n), .directions-wrapper__item:last-child { padding-right: 0; border-right: none; } .directions-wrapper__item__title { display: flex; justify-content: space-between; gap: 20px; } .directions-wrapper__item__title div:last-child { color: var(--color-violet); } .directions-wrapper__item__text { text-align: right; display: flex; justify-content: flex-end; margin-left: 20%; opacity: 0.5; } .directions-wrapper__line { border: 1px solid var(--color-stroke); } @media (min-width: 1092px) and (max-width: 1439px) { .directions-wrapper__item:nth-child(4n) { border-right: 1px solid var(--color-stroke); padding-right: 16px; } .directions-wrapper__item:nth-child(3n) { padding-right: 0; border: none; } } @media (min-width: 769px) and (max-width: 1091px) { .directions-wrapper__item:nth-child(3n) { border-right: 1px solid var(--color-stroke); padding-right: 16px; } .directions-wrapper__item:nth-child(2n) { padding-right: 0; border: none; } } @media (max-width: 768px) { .directions-wrapper__items { row-gap: 36px; } .directions-wrapper__item { flex: 1 1 100%; height: auto; border-right: none; border-left: 1px solid var(--color-stroke); padding: 38px 0 38px 16px; gap: 16px; } .directions-wrapper__item:first-child { padding-left: 16px; } .directions-wrapper__item:last-child { padding-right: 0; border-left: 1px solid var(--color-stroke); } .directions-wrapper__item br { display: none; } .directions-wrapper__item__text { text-align: left; justify-content: flex-start; margin: 0; } } /* components/team.css */ .team-wrapper { margin: var(--main-margin); display: flex; flex-direction: column; align-items: stretch; } .team-wrapper__title-block { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; } .team-wrapper__title-block__buttons { display: flex; flex-flow: row nowrap; gap: 8px; } .team-wrapper .slider { max-height: 100%; } .team-wrapper .slider__slide { flex-flow: column nowrap; height: auto; border: none; background: none; padding-left: 8px; padding-right: 8px; } .team-wrapper__slide-image-container { border-top: 1px solid var(--color-stroke); font-size: 0; line-height: 0; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; padding-top: 16px; padding-bottom: 16px; } .team-wrapper__slide-image-container img { width: 100%; height: 100%; max-height: 325px; object-fit: contain; object-position: center; transform: scale(1); border-radius: 6px; } .team-wrapper__slide-text-container { display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; align-items: flex-end; } .team-wrapper__slide-text-container__position { text-align: right; color: var(--color-black); opacity: 0.5; width: min-content; height: 45px; display: flex; align-items: center; } @media (max-width: 768px) { .team-wrapper__slide-text-container__position { align-items: flex-start; } } .team-wrapper__slide-text-container__name { width: -webkit-min-content; width: -moz-min-content; width: min-content; } @media (max-width: 991px) { .team-wrapper__slide-image-container img { height: 356px; } } @media (max-width: 768px) { .team-wrapper { margin-left: 22px; margin-right: 22px; } .team-wrapper .slider { width: 90%; overflow: visible; } .team-wrapper__slide-text-container { flex-direction: column; align-items: flex-start; } .team-wrapper__slide-image-container img { height: 356px; } .team-wrapper__slide-text-container__position { width: auto; } .team-wrapper__title-block__buttons { display: none; } } @media (max-width: 582px) { .team-wrapper .slider { width: 60%; } .team-wrapper__slide-image-container img { height: 300px; } } @media (max-width: 476px) { .team-wrapper .slider { width: 85%; } } @media (max-width: 360px) { .team-wrapper { margin-left: 16px; margin-right: 16px; } .team-wrapper__slide-image-container img { height: 210px; } } .news-detail h3:first-child { display: none; } /* components/articles.css */ .articles-wrapper { margin: var(--main-margin); display: flex; flex-direction: column; align-items: stretch; } .articles-wrapper__title-block { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; } .articles-wrapper__title-block__buttons { display: flex; flex-flow: row nowrap; gap: 8px; } .articles-wrapper .slider__slide { flex-flow: column nowrap; height: auto; border: none; background: none; padding-left: 8px; padding-right: 8px; } .articles-wrapper .slider__slide a { text-decoration: none; color: inherit; } .articles-wrapper__slide-text-container__title:hover { color: var(--color-violet); } .articles-wrapper__slide-image-container { position: relative; font-size: 0; line-height: 0; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-bottom: 16px; border-radius: 6px; } .articles-wrapper__slide-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .articles-wrapper__slide-image-container img:hover { transform: scale(1.05); transition: transform 0.3s ease; } .articles-wrapper__slide-text-container { display: flex; flex-flow: column nowrap; width: 100%; } .articles-wrapper__slide-text-container__position { color: var(--color-black); opacity: 0.5; } .articles-wrapper__slide-image-container__time { position: absolute; top: 12px; right: 10px; background: var(--color-light-pink); color: var(--color-violet); font-weight:500; padding: 8px 12px; border-radius: 20px; } @media (max-width: 991px) { .articles-wrapper__slide-image-container img { height: 356px; } } @media (max-width: 768px) { .articles-wrapper { margin-left: 22px; margin-right: 22px; } .articles-wrapper .slider { width: 100%; overflow: visible; } .articles-wrapper__slide-text-container { flex-direction: column; align-items: flex-start; } .articles-wrapper__slide-image-container img { height: 356px; } .articles-wrapper__slide-text-container__position { width: auto; } .articles-wrapper__title-block__buttons { display: none; } } @media (max-width: 582px) { .articles-wrapper .slider { width: 100%; } .articles-wrapper__slide-image-container img { height: 320px; } } @media (max-width: 476px) { .articles-wrapper .slider { /*width: 85%;*/ } } @media (max-width: 360px) { .articles-wrapper { margin-left: 16px; margin-right: 16px; } .articles-wrapper__slide-image-container img { /*height: 210px;*/ } } /* components/articles_page.css */ .articles-page__grid-wrapper{ display: flex; flex-direction: column; gap: 32px; width: 100%; } .articles-page__grid__tags-container{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; } .articles-page__grid__tag{ padding: 14px 18px; font-family: Manrope, sans-serif; font-weight: 500; font-size: 16px; line-height: 120%; text-align: center; border-radius: 40px; border: 1px solid #E2E2E2; color:#0C0C0C; background-color: #fff; } .articles-page__grid__tag.active{ border: 1px solid #0C0C0C; background-color: #0C0C0C; color: #fff; } .articles-page__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 15px; row-gap: 64px; width: 100%; } .articles-page__grid > * { min-width: 0; } .articles-page-card{ width: 100%; min-width: 0; } .articles-page-card__link{ display: flex; flex-direction: column; gap: 16px; } .articles-page-card__image-wrapper{ width: 100%; position:relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; } .articles-page-card__image{ width: 100%; height: 100%; object-fit: cover; display: block; } .articles-page-card__time{ position: absolute; background-color: #F8F1FC; color: #742ABE; padding: 8px 12px; top: 3%; right: 2%; border-radius: 42px; } .articles-page-card__content{ display: flex; flex-direction: column; gap:4px; } .articles-page-card__title{ font-family: Manrope, sans-serif; font-weight: 500; font-size: 24px; line-height: 120%; color: #0C0C0C; } .articles-page-card__date{ font-family: Manrope, sans-serif; font-weight: 500; font-size: 16px; line-height: 120%; color: #0C0C0C; } .articles-load-more{ display:flex; background-color: #0C0C0C; text-align: center; color: #fff; font-weight: 500; font-size: 16px; line-height: 120%; align-self: center; border-radius: 40px; width:328px; height: 64px; justify-content: center; align-items: center; } .articles-page__articles-container{ display: flex; flex-direction: column; gap: 64px; justify-content: center; } @media (max-width: 768px) { .articles-page__grid { grid-template-columns: repeat(2, 1fr); column-gap: 36px; row-gap: 32px; } .articles-page-card__title{ font-family: Manrope, sans-serif; font-weight: 500; font-size: 24px; line-height: 120%; color: #0C0C0C; } .articles-page-card__date{ font-family: Manrope, sans-serif; font-weight: 500; font-size: 16px; line-height: 120%; color: #0C0C0C; } } @media (max-width: 360px) { .articles-page__grid { grid-template-columns: 1fr; } .articles-page-card__title{ font-size: 18px; color: #0C0C0C; } .articles-load-more{ width:100%; } } /* components/articles_page_wrapper.css */ .articles-page{ margin-top: var(--header-height); } .articles-page__wrapper{ padding-top: 48px; margin-left: var(--main-margin-blocks); margin-right: var(--main-margin-blocks); display: flex; flex-direction: column; align-items: stretch; gap: 64px; } .articles__title{ font-family: Manrope, sans-serif; font-weight: 500; line-height: 90%; } @media (max-width: 768px) { .articles-page__wrapper{ margin-left:36px; margin-right:36px; gap:40px; padding-top: 24px; } } @media (max-width: 360px) { .articles-page__wrapper{ margin-left:16px; margin-right:16px; } } /* components/article_detail.css */ .article { font-family: "Manrope", sans-serif; } .article__header { display: flex; flex-direction: column; gap: 16px; padding: 8px 16px; } .article__header-content { display: flex; flex-direction: column; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid #E2E2E2; } .article__date { font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: rgba(12, 12, 12, 0.5019607843); } .article__title { font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -0.05em; color: #0C0C0C; } .article__meta { display: flex; flex-direction: column; gap: 20px; } .article__author { display: flex; align-items: center; gap: 16px; } .article__author-picture { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1px solid #E2E2E2; } .article__author-picture img { width: 100%; height: 100%; object-fit: cover; } .article__author-details { display: flex; flex-direction: column; gap: 4px; } .article__author-name { font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: #0C0C0C; } .article__author-position { font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: rgba(12, 12, 12, 0.5019607843); } .article__tags { display: flex; gap: 8px; } .article__tag { font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; padding: 8px 12px; background-color: #F8F1FC; color: #742ABE; border-radius: 42px; } .article__content { padding: 24px 16px 0; } .article__content .section { margin-block: 24px; } .article__content h3, .article__content .h3 { font-weight: 500; font-size: 24px; letter-spacing: -0.05em; line-height: 1.1; margin-block: 20px; color: #0C0C0C; } .article__content h4, .article__content .h4 { font-weight: 500; font-size: 20px; letter-spacing: -0.04em; line-height: 1.1; margin-block: 20px; color: #0C0C0C; } .article__content h5, .article__content .h5 { font-weight: 500; font-size: 18px; letter-spacing: -0.04em; line-height: 1.2; margin-block: 20px; color: #0C0C0C; } .article__content p { margin-block: 16px; font-size: 14px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; color: #0C0C0C; } .article__content .quote { margin-block: 20px; padding-block: 20px; border-block: 1px solid #E2E2E2; display: flex; gap: 16px; } .article__content .quote::before { content: url("components/images/quote.svg"); width: 24px; height: 24px; flex: 0 0 auto; } .article__content .quote__image { width: 46px; height: 46px; border-radius: 4px; flex: 0 0 auto; } .article__content .quote__content { display: flex; flex-direction: column; gap: 8px; } .article__content .quote__text { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #0C0C0C; } .article__content .quote__author { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: rgba(12, 12, 12, 0.5019607843); } .article__content ul { font-size: 14px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; list-style-type: initial; padding-inline-start: 24px; margin-block: 20px; } .article__content ul li { margin-block: 8px; color: #0C0C0C; } .article__content .images { display: flex; flex-direction: column; gap: 12px; margin-block: 20px; } .article__content .images img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #E2E2E2; margin-inline: auto; } .article__content .images__caption { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: rgba(12, 12, 12, 0.5019607843); } .article__content ol { font-size: 14px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; list-style: decimal; padding-inline-start: 24px; margin-block: 20px; color: #0C0C0C; } .article__content ol li { margin-block: 8px; } .article__content ol li * { margin-block: 8px; } .article__content *:first-child { margin-top: 0; } .article__content *:last-child { margin-bottom: 0; } .more-articles { display: flex; flex-direction: column; gap: 36px; } .more-articles__button { padding: 22px 24px 23px; background-color: #0C0C0C; border-radius: 40px; width: 100%; display: block; color: #FFFFFF; text-align: center; font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; } .more-articles__button-wrapper { padding-inline: 16px; } @media (min-width: 768px) { .article__header { padding: 8px 36px; gap: 24px; max-width: 928px; margin-inline: auto; } .article__title { font-size: 52px; } .article__meta { flex-direction: row; justify-content: space-between; align-items: center; } .article__author { gap: 24px; } .article__author-picture { width: 64px; height: 64px; } .article__content { padding: 24px 36px 0; max-width: 928px; margin-inline: auto; } .article__content h3, .article__content .h3 { font-size: 44px; } .article__content h4, .article__content .h4 { font-size: 32px; } .article__content h5, .article__content .h5 { font-size: 24px; } .article__content .quote { padding: 24px 36px 24px 0; gap: 36px; } .article__content .quote::before { width: 36px; height: 36px; } .article__content .quote__image { width: 76px; height: 76px; } .article__content ul li { margin-block: 12px; } .article__content *:first-child { margin-top: 0; } .article__content *:last-child { margin-bottom: 0; } .more-articles { gap: 64px; } .more-articles__button-wrapper { padding-inline: 36px; } } @media (min-width: 991px) { .article__header { padding: 48px 0 0; max-width: 856px; } .article__header-content { gap: 40px; } .article__title { font-size: 64px; } .article__author-name { font-size: 24px; letter-spacing: -0.04em; } .article__content { padding: 48px 0 0; max-width: 856px; } .article__content .section { margin-block: 48px; } .article__content h3, .article__content .h3 { font-size: 48px; margin-block: 24px; } .article__content h4, .article__content .h4 { letter-spacing: -0.05em; margin-block: 24px; } .article__content p { margin-block: 24px; font-size: 16px; } .article__content .quote { padding: 36px 36px 36px 0; margin-block: 24px; } .article__content .quote__image { width: 92px; height: 92px; } .article__content .quote__text { font-size: 24px; letter-spacing: -0.04em; } .article__content ul { margin-block: 24px; font-size: 16px; } .article__content ul li { margin-block: 16px; } .article__content ol { margin-block: 24px; font-size: 16px; } .article__content ol li { margin-block: 16px; } .article__content .images { margin-block: 24px; gap: 16px; } .article__content .images img { border: 1px solid #F3F3F3; } .article__content *:first-child { margin-top: 0; } .article__content *:last-child { margin-bottom: 0; } .more-articles__button { min-width: 328px; width: max-content; margin-inline: auto; } .more-articles__button-wrapper { padding-inline: 24px; } } /*# sourceMappingURL=style.css.map */ /* components/feedback.css */ .feedback-popup-container { position: fixed; top: 0; right: -950px; width: 720px; height: 100vh; background-color: white; z-index: 1002; transition: right 0.6s ease; padding: 48px; visibility: visible; opacity: 1; transform: translateX(100%); } .feedback-popup-container_mobile { width: 720px; right: 0; transition: all 0.6s ease-in-out; transform: translateX(100%); } .feedback-form-container_active-mobile { transform: translateX(0); overflow-y:auto; } .feedback-form-container_active { width: 720px; visibility: visible; opacity: 1; right: 0; } .feedback-popup__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .feedback-popup__header button { background: none; border: none; cursor: pointer; } .feedback-popup-container svg path { color: var(--color-violet); } .feedback-popup-container svg rect { color: var(--color-light-pink); } .feedback-form { display: flex; flex-direction: column; align-items: stretch; margin-top: 48px; gap: 36px; height: calc(100% - 107px); } .feedback-form input, .feedback-form textarea { width: 100%; padding: 10px; background: none; border: none; outline: none; border-bottom: 1px solid var(--color-stroke); color: var(--color-black); font-size: var(--font-p1-size-1440); font-style: normal; font-family: var(--font-family), sans-serif; transition: border-bottom 0.1s ease-in-out; } .feedback-form textarea { height: 139px; overflow-y: scroll; } .feedback-form textarea::-webkit-scrollbar { width: 2px; } .feedback-form textarea::-webkit-scrollbar-track { background: var(--color-stroke); } .feedback-form textarea::-webkit-scrollbar-thumb { background-color: var(--color-violet); border-radius: 2px; border: none; } .feedback-form textarea::-webkit-scrollbar-thumb:hover { background-color: var(--color-violet); } .feedback-form input::placeholder, .feedback-form textarea::placeholder { color: var(--color-black); font-size: var(--font-p1-size-1440); font-style: normal; font-family: var(--font-family), sans-serif; letter-spacing: -0.02em; transition: opacity 0.1s ease-in-out; } .feedback-form label.feedback-form__send_error input::placeholder, .feedback-form label.feedback-form__send_error textarea::placeholder { color: var(--color-additional-red); } .feedback-form input:focus, .feedback-form textarea:focus { border-bottom: 1px solid var(--color-black); transition: border-bottom 0.1s ease-in-out; } .feedback-form input:focus, .feedback-form textarea:focus { border-bottom: 1px solid var(--color-black); transition: border-bottom 0.1s ease-in-out; } .feedback-form input:focus.feedback-form__send_error, .feedback-form input.feedback-form__send_error, .feedback-form textarea:focus.feedback-form__send_error, .feedback-form textarea.feedback-form__send_error { color: var(--color-additional-red); border-bottom: 1px solid var(--color-additional-red); transition: border-bottom 0.1s ease-in-out; } .feedback-form input:focus::placeholder, .feedback-form textarea:focus::placeholder { opacity: 0; transition: opacity 0.1s ease-in-out; } .feedback-form__file-upload { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 50px; } .feedback-form__file-upload button { background: var(--color-additional-pressed-pink); color: var(--color-violet); border: none; outline: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 192px; height: 48px; border-radius: 6px; font-size: var(--font-p1-size-1440); cursor: pointer; } .feedback-form__file-upload__file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; max-width: calc(100% - 40px); display: inline-block; } .feedback-form__send-button-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; gap: 16px; margin-top: auto; } .feedback-form__send-button-wrapper button { height: 64px; background: var(--color-black); color: var(--color-white); padding: 16px; } .feedback-form__send-button-wrapper span { color: var(--color-black); font-size: var(--font-p1-size-1440); opacity: 0.5; letter-spacing: -0.02em; } .feedback-form__file-upload__status { max-width: 350px; } .feedback-form__send_error { color: var(--color-additional-red); } .feedback-popup-success { right: 0; display: flex; gap: 30px; flex-direction: column; justify-content: space-between; transition: all 0.6s ease-in-out; } .feedback-popup-success.feedback-form-container_active { transform-origin: 100% 0px; transform: scale(1); } .feedback-popup-success__header { position: relative; height: 48px; } .feedback-popup-success__close { position: absolute; top: 0; right: 0; } .feedback-popup-success__body { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .feedback-popup-success__footer { text-align: center; } @media (max-width: 768px) { .feedback-popup-container { width: 100vw; height: 100vh; padding: 36px; } .feedback-form-container_active { overflow-y: auto; } } @media (max-width: 476px) { .feedback-popup-container { padding: 16px; } .feedback-form__send-button-wrapper span { font-size: 14px; text-align: center; } } /* assets/styles/common.css */ @charset "utf-8"; /* assets/styles/reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* assets/styles/normalize.css */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* assets/styles/fonts.css */ @charset "UTF-8"; @font-face { font-family: 'Manrope'; src: url(assets/fonts/Manrope-Medium.woff2) format('woff2'), url(assets/fonts/Manrope-Medium.woff) format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url(assets/fonts/Manrope-SemiBold.woff2) format('woff2'), url(assets/fonts/Manrope-SemiBold.woff) format('woff'); font-weight: 600; font-style: normal; font-display: swap; } /* assets/styles/variables.css */ @charset "UTF-8"; :root { --transition: all 0.3s ease; /* Font */ --font-h1-size-1440: 128px; --font-h1-size-768: 72px; --font-h1-size-360: 46px; --font-h2-size-1440: 85px; --font-h2-size-768: 64px; --font-h2-size-360: 42px; --font-h3-size-1440: 48px; --font-h3-size-360: 24px; --font-h4-size-1440: 32px; --font-h4-size-360: 20px; --font-h5-size-1440: 24px; --font-h5-size-360: 18px; --font-p1-size-1440: 16px; --font-p1-size-360: 16px; --font-p2-size-1440: 14px; --font-p2-size-360: 12px; --font-family: "Manrope"; --letter-spacing: -0.02em; /* Colors */ --color-black: #0C0C0C; --color-violet: #742ABE; --color-stroke: #E2E2E2; --color-light-pink: #F8F1FC; --color-white: #fff; --general-white: #fff; /* Additional colors */ --color-additional-gradient-horizontal-about: linear-gradient(0deg, #FFFFFF 0%, #742ABE 40%, rgba(116, 42, 190, 0.4) 70%, rgba(12, 12, 12, 0) 100%); --color-additional-gradient-horizontal-about_black: linear-gradient(0deg, rgba(12,12,12,0.52) 0%, #742ABE66 40%, #742ABE, rgba(12, 12, 12, 0.32)); --color-additional-gradient-horizontal-footer: linear-gradient(180deg, #FFFFFF 0%, #742ABE 40%, rgba(116, 42, 190, 0.4) 70%, rgba(12, 12, 12, 0) 100%); --color-additional-gradient-vertical: linear-gradient(270deg, #FBF8FF -0.02%, #C9A1F1 50%, #FBF8FF 100.02%); --color-additional-hover-black: #2A2A2A; --color-additional-red: #FF2C2C; --color-additional-pressed-pink: #E9DDF0; /* Additional colors from developers */ --color-additional-gray: #858585; /* Header */ --header-height: 80px; /* Buttons */ --button-border-radius: 40px; --button-burger-border-radius: 6px; /* Gradient block sizes */ --main-margin-blocks: 24px; --about-footer-margin-blocks: 12px; /* Footer gaps */ --footer-contact-width-side: 48px; /* Common variables */ --vertical-spacing-blocks: 180px; @media (max-width: 768px) { --vertical-spacing-blocks: 140px; --main-margin-block: 36px; --about-footer-margin-blocks: 16px; } @media (max-width: 360px) { --vertical-spacing-blocks: 120px; --main-margin-block: 16px; --about-footer-margin-blocks: 4px; } --main-margin: var(--vertical-spacing-blocks) var(--main-margin-blocks) 0; --about-footer-margin: var(--vertical-spacing-blocks) var(--about-footer-margin-blocks) 0; --max-width: 1440px; } /* assets/animations/animations.css */ .text-headers-animation { overflow: hidden; transition: all 1s ease-out; } .text-h1-h2_animated { display: block; transform: translateY(100%); opacity: 0; transition: all 1s ease-out; } .text-h3-p2_animated { display: block; transform: translateY(30%); opacity: 0; transition: all 1s ease-out; } .inner-block_animated { transform: translateY( 20% ); opacity: 0; transition: all 1s ease-out; } .block_animated { transform: translateY( 10% ); opacity: 0; transition: all 1s ease-out; } .text-headers-animation.loaded .text-h1-h2_animated, .text-non-headers-animation.loaded .text-h3-p2_animated, .blocks-animation.loaded .block_animated, .inner-block_animated.loaded{ transform: translateY(0); opacity: 1; transition: all 0.6s ease-out; } /* assets/blocks/header/header.css */ .header-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 24px; height: 0; visibility: hidden; opacity: 0; transition: all 0.3s ease; position: fixed; top: 0; width: 100vw; max-width: var(--max-width); z-index: 100; background: white; } .header-wrapper.header_active { height: var(--header-height); opacity: 1; visibility: visible; } .header-wrapper.header_hidden { height: 0; opacity: 0; visibility: hidden; } .header__logo { color: var(--color-black); height: 18px; } .header__navigation-items { display: flex; flex-direction: row; list-style-type: none; gap: 16px; } .header__navigation-items li { display: flex; justify-content: center; } .header__navigation-items li a { text-decoration: none; color: var(--color-black); letter-spacing: -0.012em; transition: all 0.3s ease; } .header__navigation-items li a:hover { color: var(--color-violet); cursor: pointer; transition: all 0.3s ease; } header .feedback-button:hover { background: var(--color-additional-hover-black); } header .feedback-button:active { background: var(--color-black); } .header__mobile-menu-button { display: none; } .header__mobile-navigation__menu .header__navigation-items { flex-direction: column; align-items: flex-start; } .header__mobile-navigation { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 0; right: 0; max-width: 768px; width: 100%; height: 100vh; padding: 100px 36px 36px; z-index: 99; background-color: #fff; transform: translateX(100%); transition: all 0.6s ease; } .header__mobile-navigation.active { transform: translateX(0); } .header__mobile-navigation .feedback-button { width: 100%; height: 64px; } .header__mobile-navigation .header__navigation-items { gap: 36px; } @media (max-width: 768px) { .header-wrapper .feedback-button, .header-wrapper .header__navigation { display: none; } .header__mobile-menu-button { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 48px; height: 48px; border-radius: var(--button-burger-border-radius); border:none; background: var(--color-black); padding: 12px; } .header__mobile-menu-button span { display: block; width: 100%; height: 2px; background-color: #fff; transition: all 0.3s ease; } .header__mobile-menu-button.active span:first-child { transform: rotate(45deg) translate(6px, 6px); } .header__mobile-menu-button.active span:nth-child(2) { opacity: 0; } .header__mobile-menu-button.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } /* Стили для пунктов меню с подменю */ .has-submenu { position: relative; } .has-submenu > a { position: relative; display: flex; align-items: center; } .submenu { position: absolute; top: calc(100% + 10px); left: 0; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; list-style: none; margin: 0; padding: 0; } /* Раскрытие подменю при наведении */ .has-submenu > a:hover + .submenu, .has-submenu > a:focus + .submenu, .submenu:hover { opacity: 1; visibility: visible; transform: translateY(0); } /* Стили для пунктов подменю */ .submenu li:last-child { border-bottom: none; } .submenu a { display: block; padding: 12px 16px; color: #333; text-decoration: none; transition: background-color 0.3s ease; white-space: nowrap; } /* assets/blocks/hero/hero.css */ .hero-wrapper { margin-top: var(--header-height); } .hero-wrapper__img-wrapper { overflow: hidden; padding-bottom: 1px; } .hero-wrapper__img-wrapper svg { width: 100%; height: auto; /*position: relative;*/ transform: translateY(100%); opacity: 0; filter: blur(7px); transition: transform 1s cubic-bezier(0, 0, 0, 1), opacity 1s cubic-bezier(0, 0, 0, 1), filter 0.4s ease-in-out; } .hero-wrapper__img-wrapper svg.show { transform: translateY(0); opacity: 1; filter: blur(0); overflow: visible; } .hero-wrapper__description { padding: 30px 0 16px 0; text-align: center; font-size: 16px; color: var(--color-black); max-width: 374px; margin: 0 auto; } .hero-wrapper__description p { margin: 0; padding: 0; font-size: var(--font-p1-size-1440); } .hero-wrapper__title { text-align: center; color: var(--color-black); max-width: 675px; margin: 0 auto; } .hero-wrapper__title.hero-wrapper__title_mobile { display: none; } .hero-wrapper__texts { display: flex; flex-direction: column; } .hero-wrapper__loc-n-clock-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; max-width: calc(100% - 48px); margin: 0 auto; /*top: -42px;*/ position: relative; height: 0; } .hero-wrapper__city, .hero-wrapper__time { padding: 8px 12px; background-color: #F8F1FC; border-radius: 42px; font-size: 16px; line-height: 120%; letter-spacing: -0.02em; color: #742ABE; min-width: 90px; text-align: center; } @media (min-width: var(--max-width)) { .hero-wrapper__loc-n-clock-wrapper { max-width: calc(var(--max-width) - 48px); } } @media (max-width: 950px) { .hero-wrapper__loc-n-clock-wrapper { justify-content: center; align-items: center; gap: 8px; margin: 16px 0 0; position: static; height: auto; } } @media (max-width: 768px) { .hero-wrapper__loc-n-clock-wrapper { position: static; justify-content: center; align-items: center; gap: 8px; width: 100%; max-width: 100%; } .hero-wrapper__texts { margin-top: 64px; flex-direction: column-reverse; } .hero-wrapper__description { padding: 16px 0; } } @media (max-width: 582px) { .hero-wrapper__title.hero-wrapper__title_desktop { display: none; } .hero-wrapper__title.hero-wrapper__title_mobile { display: block; } } /* assets/blocks/review/review.css */ .review-wrapper { margin: var(--main-margin); display: flex; justify-content: space-between; align-items: stretch; } .review-wrapper__image-wrapper { height: auto; width: 100%; overflow: hidden; } .review-wrapper__image-wrapper img { border-radius: 6px; height: 100%; width: 100%; object-fit: cover; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; margin-right: 10px; } .review-wrapper__gap { width: 15%; } .review-wrapper__review-container { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; flex-grow: 1; min-height: 482px; } .review-wrapper__review-container svg { width: 78px; height: 78px; } .review-wrapper__review-container svg path { color: var(--color-violet); } .review-wrapper__review-container__line { border: 1px solid var(--color-stroke); } .review-wrapper__review-container__author { display: flex; align-items: center; gap: 12px; } .review-wrapper__review-container__author-image { width: 78px; height: 78px; border-radius: 50%; border: 1px solid var(--color-stroke); overflow: hidden; } .review-wrapper__review-container__author-image img { width: 100%; height: 100%; object-fit: cover; } .review-wrapper__review-container__author-text div:last-child { opacity: 0.5; } @media (max-width: 1024px) { .review-wrapper__image-wrapper { display:none; } .review-wrapper__gap { display: none; } } /* assets/blocks/footer/footer.css */ .footer-wrapper { margin: var(--about-footer-margin); display: flex; align-items: center; flex-direction: column; color: var(--color-white); border-radius: 20px 20px 0 0; } .footer-wrapper--black { background: #000; width: 100%; border-radius: 0 0 12px 12px; display: flex; align-items: center; flex-direction: column; } .gradient-item--overlay-alt { position: absolute; top: 1px; /* Фикс нижнего бордера, который периодически появляется */ left: 0; height: 100%; width: 100%; z-index: 1; background: linear-gradient(to top, black 80%, white 100%); } .footer-wrapper a { text-decoration: none; color: var(--color-white); } .footer-wrapper__gradient-items { display: flex; flex-flow: row nowrap; width: 100%; align-items: flex-start; position: relative; } .footer-wrapper__gradient-items .horizontal-gradient_footer { z-index: 2; } .footer-wrapper__title-wrapper { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 16px; gap: 16px; position: relative; top: -80px; z-index: 3; } .footer-wrapper__title-wrapper span.h5-style { text-align: center; } .footer-wrapper__title-wrapper__title { display: flex; align-items: center; justify-content: center; flex-direction: column; } .footer-wrapper__vertical-line { display: flex; margin: 36px; } .footer-wrapper__vertical-line div { height: 245px; } .footer-wrapper__vertical-line div:first-child { border-left: 1px solid var(--color-stroke); opacity: 0.12; } .footer-wrapper__contacts-wrapper { width: calc(100% - 2 * var(--footer-contact-width-side)); display: flex; flex-direction: column; align-items: center; } .footer-wrapper__contacts-wrapper__container { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .footer-wrapper__contacts-wrapper__email-n-phone { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .footer-wrapper__contacts-wrapper__email-n-phone p { opacity: 0.5; } .footer-wrapper__contacts-wrapper__email-n-phone_right { align-items: flex-end; } .footer-wrapper__contacts-wrapper__qr-code-n-address { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; } .footer-wrapper__contacts-wrapper__qr-code-n-address a { background: #ffffff0a; } .footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 180px; padding: 12px; gap: 12px; background-color: rgb(255, 255, 255, 0.04); border-radius: 6px; transition: all 0.3s ease; } .footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code-wrapper:hover { background-color: var(--color-additional-hover-black); transition: all 0.3s ease; } .footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code__telegram-logo { display: none; } .footer-wrapper__socials { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; margin-bottom: 36px; } .footer-wrapper__social { padding: 20px; background-color: rgb(255, 255, 255, 0.04); border-radius: 6px; width: 70px; height: 70px; transition: all 0.3s ease; } .footer-wrapper__social svg { width: 30px; height: 30px; } .footer-wrapper__social:hover { background-color: var(--color-additional-hover-black); cursor: pointer; transition: all 0.3s ease; } .footer-wrapper__social:active { background-color: var(--color-black); cursor: pointer; } .footer-wrapper__additional-information { display: flex; flex-direction: row; justify-content: space-between; width: calc(100% - 2 * var(--footer-contact-width-side)); margin-bottom: 48px; } .footer-wrapper__additional-information, .footer-wrapper__additional-information a { color: rgba(255, 255, 255, 0.4); transition: all 0.3s ease; } .footer-wrapper__additional-information a:hover { color: rgba(255, 255, 255, 1); transition: all 0.3s ease; } .footer-wrapper .footer-button { background-color: var(--color-white); color: var(--color-black); width: 380px; height: 64px; position: relative; } .footer-wrapper .footer-button:hover { background-color: var(--color-light-pink); color: var(--color-violet); } .footer-wrapper .footer-button:active { background-color: var(--color-additional-pressed-pink); color: var(--color-violet); } @media (max-width: 1140px) { .footer-wrapper__contacts-wrapper__email-n-phone a { font-size: clamp(1.25rem, 0.5882rem + 2.9412vw, 2rem); /*h4-style*/ } } @media (max-width: 922px) { .footer-wrapper__contacts-wrapper__email-n-phone a { font-size: clamp(1.125rem, 0.7941rem + 1.4706vw, 1.5rem); /*h5-style*/ } } @media (max-width: 768px) { .footer-wrapper { margin-bottom: 16px; } .footer-wrapper .footer-button { width: calc(100% - 48px); } .footer-wrapper__contacts-wrapper__email-n-phone a { font-size: clamp(1.5rem, 0.3971rem + 4.902vw, 2.75rem); /*h3-style*/ } .footer-wrapper__contacts-wrapper__container { flex-direction: column; } .footer-wrapper__contacts-wrapper__qr-code-n-address { flex-direction: column-reverse; order: 1; gap: 16px; } .footer-wrapper__contacts-wrapper__qr-code-n-address a { width: 100%; } .footer-wrapper__contacts-wrapper__qr-code-n-address a .p2-style { display: flex; align-items: center; } .footer-wrapper__contacts-wrapper__qr-code-n-address a p::after{ content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 16px; /* расстояние между текстом и иконкой */ background: url('data:image/svg+xml;utf8,') no-repeat center/contain; } .footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code-wrapper { width: 100%; padding: 20px; flex-direction: row; align-items: center; gap: 16px; } .footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code-wrapper svg.footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code__telegram-logo { display: inline-block; width: 16px; height: 16px; } .footer-wrapper__contacts-wrapper__qr-code-n-address__qr-code__qr-code, .footer-wrapper__contacts-wrapper__qr-code-n-address p.h5-style br { display: none; } .footer-wrapper__contacts-wrapper__qr-code-n-address p.h5-style { font-size: var(--font-p2-size-1440); } .footer-wrapper__contacts-wrapper__qr-code-n-address p.h5-style span:after { content: ","; } .footer-wrapper__contacts-wrapper__email-n-phone { align-items: center; margin-bottom: 8px; } .footer-wrapper__contacts-wrapper__email-n-phone p { display: none; } .footer-wrapper__vertical-line div { height: 120px; } .footer-wrapper__additional-information { flex-direction: column; align-items: center; gap: 8px; } } @media (max-width: 476px) { .footer-wrapper { margin-bottom: 4px; } .footer-wrapper__title-wrapper { top: -40px; } .footer-wrapper .footer-button { width: calc(100% - 32px); margin-top: 40px; } .footer-wrapper__title-wrapper__title { text-align: center; } .footer-wrapper__additional-information { font-size: var(--font-p2-size-360); } } html { box-sizing: border-box; font-size: var(--font-p1-size-1440); font-family: var(--font-family), sans-serif; color: var(--color-black); overflow-x: hidden; } *, *::before, *::after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; font-weight: 500; } a { text-decoration: none; } /* html::-webkit-scrollbar { width: 18px; } html::-webkit-scrollbar-track { background: none; border: 4px solid white; border-radius: 18px; } html::-webkit-scrollbar-thumb { background-color: var(--color-stroke); border-radius: 12px; border: 6px solid white; } html::-webkit-scrollbar-thumb:hover { background-color: var(--color-black); }*/ h1, .h1-style { font-size: var(--font-h1-size-1440); line-height: 90%; letter-spacing: -0.06em; } .hidden-h1 { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } h2, .h2-style { font-size: var(--font-h2-size-1440); line-height: 90%; letter-spacing: -0.06em; } h3, .h3-style { font-size: var(--font-h3-size-1440); line-height: 110%; letter-spacing: -0.05em; } h4, .h4-style { font-size: var(--font-h4-size-1440); line-height: 110%; letter-spacing: -0.05em; } h5, .h5-style { font-size: var(--font-h5-size-1440); line-height: 120%; letter-spacing: -0.04em; } p { line-height: 120%; letter-spacing: -0.02em; } .p1-style { font-size: var(--font-p1-size-1440); line-height: 120%; letter-spacing: -0.02em; } .p2-style { font-size: var(--font-p2-size-1440); line-height: 120%; letter-spacing: -0.02em; } @media (min-width: 769px) and (max-width: 1440px) { h1, .h1-style { font-size: clamp(4.5rem, 0.5rem + 8.3333vw, 8rem); } h2, .h2-style { font-size: clamp(4rem, 2.5rem + 3.125vw, 5.3125rem); } h3, .h3-style { font-size: clamp(2.75rem, 2.4643rem + 0.5952vw, 3rem); } } @media (min-width: 361px) and (max-width: 768px) { h1, .h1-style { font-size: clamp(2.875rem, 1.4412rem + 6.3725vw, 4.5rem); } h2, .h2-style { font-size: clamp(2.625rem, 1.4118rem + 5.3922vw, 4rem); } h3, .h3-style { font-size: clamp(1.5rem, 0.3971rem + 4.902vw, 2.75rem); } h4, .h4-style { font-size: clamp(1.25rem, 0.5882rem + 2.9412vw, 2rem); } h5, .h5-style { font-size: clamp(1.125rem, 0.7941rem + 1.4706vw, 1.5rem); } } @media (max-width: 360px) { h1, .h1-style { font-size: var(--font-h1-size-360); } h2, .h2-style { font-size: var(--font-h2-size-360); } h3, .h3-style { font-size: clamp(1.5rem, 0.3971rem + 4.902vw, 2.75rem); } h4, .h4-style { font-size: clamp(1.25rem, 0.5882rem + 2.9412vw, 2rem); } h5, .h5-style { font-size: clamp(1.125rem, 0.7941rem + 1.4706vw, 1.5rem); } } #scale-container { max-width: 1440px; transform-origin: 0 0; } .action-button { border: none; border-radius: var(--button-border-radius); width: 100%; cursor: pointer; } .feedback-button { height: 48px; width: 160px; background: var(--color-black); color: var(--color-white); } .no-scroll { overflow: hidden; } .page-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: none; } .page-overlay_active, .page-overlay-success_active { display: block; } .hidden { display: none; } .max-width-container, header { max-width: var(--max-width); margin: 0 auto; } .observer-stop { height: 2px; width: 100%; background: none; border: none; } .horizontal-gradient_about { background: var(--color-additional-gradient-horizontal-about); } .horizontal-gradient_about_black { background: var(--color-additional-gradient-horizontal-about_black); } .horizontal-gradient_footer { background: var(--color-additional-gradient-horizontal-footer); } .gradient-item-1 { flex-basis: 8.85%; height: 559px; } .gradient-item-2 { flex-basis: 8.31%; height: 527px; } .gradient-item-3 { flex-basis: 7.36%; height: 459px; } .gradient-item-4 { flex-basis: 6.62%; height: 419px; } .gradient-item-5 { flex-basis: 6.3%; height: 396px; } .gradient-item-6 { flex-basis: 5.51%; height: 345px; } .gradient-item-7 { flex-basis: 4.93%; height: 314px; } .gradient-item-8 { flex-basis: 4.24%; height: 293px; } .gradient-item-1_bottom-left { border-bottom-left-radius: 12px; } .gradient-item-1_bottom-right { border-bottom-right-radius: 12px; } .gradient-item-1_top-left { border-top-left-radius: 12px; } .gradient-item-1_top-right { border-top-right-radius: 12px; } .gradient-item-top-8 { flex-basis: 4.24%; height: 293px; } .gradient-item-top-7 { flex-basis: 4.93%; height: 314px; } .gradient-item-top-6 { flex-basis: 5.51%; height: 345px; } .gradient-item-top-5 { flex-basis: 6.3%; height: 396px; } .gradient-item-top-4 { flex-basis: 6.62%; height: 419px; } .gradient-item-top-3 { flex-basis: 7.36%; height: 459px; } .gradient-item-top-2 { flex-basis: 8.31%; height: 527px; } .gradient-item-top-1 { flex-basis: 8.85%; height: 559px; } .slider { position: relative; width: calc(100% + 16px); left: -8px; overflow: hidden; } .slider__container { display: flex; transition: transform 0.3s ease-in-out; align-items: flex-start; } .slider__slide { min-width: 25%; height: 300px; display: flex; justify-content: center; align-items: center; background-color: var(--color-light-pink); border-right: 1px solid var(--color-violet); color: var(--color-black); font-size: 2em; } .slider__button { display: flex; justify-content: center; align-items: center; background-color: var(--color-light-pink); color: var(--color-violet); border: none; border-radius: 6px; width: 48px; height: 48px; cursor: pointer; font-size: 2em; } .slider__button svg { width: 28px; height: 28px; } .slider__button:hover, .slider__button:active { background-color: var(--color-additional-pressed-pink); } .slider__button:disabled { background-color: var(--color-additional-pressed-pink); opacity: 0.2; cursor: default; } .slider__button-prev svg { transform: rotate(180deg); } .main__mobile-button { display: none; margin: var(--main-margin); } .main__mobile-button .feedback-button { width: 100%; } .main-content { padding-top: 80px; } .simple-container { padding: 0 36px; max-width: 928px; margin: 0 auto; } .simple-section { padding-top: 48px; font-family: 'Manrope', sans-serif; color: var(--color-black); font-weight: 500; font-size: 16px; line-height: 120%; letter-spacing: -0.02em; } .simple-section h1 { font-weight: 600; font-size: 64px; line-height: 110%; letter-spacing: -0.05em; padding-bottom: 32px; border-bottom: 1px solid #E2E2E2; margin-bottom: 48px; } .simple-section .h1-simple-small { font-size: 52px; } .simple-section h2 { margin-top: 48px; margin-bottom: 16px; } .simple-section a { text-decoration: underline; color: var(--color-violet); } .simple-section p { margin-bottom: 16px; } .simple-section ul { padding-left: .3em; } .simple-section ul li { margin-bottom: 16px; position: relative; padding-left: 1em; } .simple-section ul li::before { content: "•"; position: absolute; left: 0; } .simple-section ol { padding-left: 1em; margin-top: 48px; } .simple-section ol > li { list-style: decimal; margin-bottom: 16px; padding-left: 5px; } .cookie { display: none; position: fixed; z-index: 999; flex-direction: column; padding: 16px 16px 16px 24px; max-width: 669px; right: 24px; bottom: 32px; background: #FFFFFF; box-shadow: 0px 181px 73px rgba(0, 0, 0, 0.01), 0px 102px 61px rgba(0, 0, 0, 0.05), 0px 45px 45px rgba(0, 0, 0, 0.09), 0px 11px 25px rgba(0, 0, 0, 0.1); border-radius: 8px; } .showflex { display: flex; } .cookie__settings { transform: scaleY(0); transform-origin: bottom; opacity: 0; max-height: 0; overflow: hidden; transition: var(--transition); } .cookie__settings.active { max-height: 1000px; transform: scaleY(1); opacity: 1; margin-bottom: 12px; } .cookie__settings-wrapper { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; } .cookie__settings-item label { display: flex; gap: 16px; align-items: center; } .cookie__settings-item-content { display: flex; flex-direction: column; } .cookie__settings-item-description { color: #868686; } .cookie__settings-item-description a { color: var(--color-violet); } .cookie__settings-item-description a:hover { text-decoration: underline; } .cookie__wrapper { display: flex; gap: 30px; align-items: center; } .cookie__content a { color: var(--color-violet); } .cookie__content a:hover { text-decoration: underline; } .cookie__buttons-wrapper { display: flex; gap: 16px; align-items: center; } .cookie__button-more { content: ''; border: none; width: 24px; height: 24px; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L15 8M15 8C15 9.65685 16.3431 11 18 11C19.6569 11 21 9.65685 21 8C21 6.34315 19.6569 5 18 5C16.3431 5 15 6.34315 15 8ZM9 16L21 16M9 16C9 17.6569 7.65685 19 6 19C4.34315 19 3 17.6569 3 16C3 14.3431 4.34315 13 6 13C7.65685 13 9 14.3431 9 16Z' stroke='%23742ABE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background: var(--color-violet); cursor: pointer; transition: var(--transition); } .cookie__button-more:hover { background: var(--color-black); } .cookie__button-accept { display: flex; align-items: center; padding: 12px; height: 48px; border-radius: 6px; background: var(--color-light-pink); color: var(--color-violet); font-weight: 500; font-size: 16px; line-height: 120%; letter-spacing: -0.02em; border: none; cursor: pointer; transition: var(--transition); } .cookie__button-accept:hover { background: var(--color-additional-pressed-pink); } .cookie__settings-item input { margin: 0; width: 0; height: 0; display: flex; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .cookie__settings-item input + label:before { content: ""; display: inline-block; vertical-align: top; height: 24px; width: 24px; min-width: 24px; color: rgba(0, 0, 0, 0.275); border: solid 0.06em var(--color-violet); border-radius: 4px; background: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.40705 7.3125L11.4696 0.25C11.6362 0.0833335 11.8307 0 12.0529 0C12.2751 0 12.4696 0.0833335 12.6362 0.25C12.8029 0.416667 12.8862 0.614722 12.8862 0.844167C12.8862 1.07361 12.8029 1.27139 12.6362 1.4375L4.99038 9.10417C4.82372 9.27083 4.62927 9.35417 4.40705 9.35417C4.18483 9.35417 3.99039 9.27083 3.82372 9.10417L0.240385 5.52083C0.073718 5.35417 -0.00628205 5.15639 0.000384615 4.9275C0.00705128 4.69861 0.0939955 4.50056 0.261218 4.33333C0.42844 4.16611 0.626496 4.08278 0.855385 4.08333C1.08427 4.08389 1.28205 4.16722 1.44872 4.33333L4.40705 7.3125Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center; background-size: 0; will-change: color, border, background, background-size, box-shadow; transform: translate3d(0, 0, 0); transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s; } .cookie__settings-item input:enabled:active + label:before, .cookie__settings-item input:enabled + label:active:before { background-color: #f0f0f0; } .cookie__settings-item input:checked + label:before { background-color: var(--color-violet); background-size: 14px; /*background-position-x: 2px;*/ color: rgba(0, 0, 0, 0.075); } .cookie__settings-item input:checked:enabled:active + label:before, .cookie__settings-item input:checked:enabled + label:active:before { background-color: var(--main-grey); color: rgba(0, 0, 0, 0.275); } .cookie__settings-item input:disabled + label:before { opacity: 0.5; } .cookie__settings-item input + label { -webkit-user-select: none; user-select: none; } @media (min-width: 1920px) and (max-width: 1920.98px) { .gradient-item-1 { flex-basis: 168px; } .gradient-item-2 { flex-basis: 157px; } .gradient-item-3 { flex-basis: 140px; } .gradient-item-4 { flex-basis: 125px; } .gradient-item-5 { flex-basis: 120px; } .gradient-item-6 { flex-basis: 104px; } .gradient-item-7 { flex-basis: 93px; } .gradient-item-8 { flex-basis: 80px; } .gradient-item-top-1 { flex-basis: 168px; } .gradient-item-top-2 { flex-basis: 157px; } .gradient-item-top-3 { flex-basis: 140px; } .gradient-item-top-4 { flex-basis: 125px; } .gradient-item-top-5 { flex-basis: 120px; } .gradient-item-top-6 { flex-basis: 104px; } .gradient-item-top-7 { flex-basis: 93px; } .gradient-item-top-8 { flex-basis: 80px; } } @media (max-width: 1366px) { .gradient-item-1 { height: 530px; } .gradient-item-2 { height: 500px; } .gradient-item-3 { height: 435px; } .gradient-item-4 { height: 397px; } .gradient-item-5 { height: 376px; } .gradient-item-6 { height: 327px; } .gradient-item-7 { height: 298px; } .gradient-item-8 { height: 278px; } .gradient-item-top-1 { height: 530px; } .gradient-item-top-2 { height: 500px; } .gradient-item-top-3 { height: 435px; } .gradient-item-top-4 { height: 397px; } .gradient-item-top-5 { height: 376px; } .gradient-item-top-6 { height: 327px; } .gradient-item-top-7 { height: 298px; } .gradient-item-top-8 { height: 278px; } } @media (max-width: 768px) { .main__mobile-button { display: block; } .gradient-item-1 { flex-basis: 11.14%; height: 364px; } .gradient-item-2 { flex-basis: 10.06%; height: 332px; } .gradient-item-3 { flex-basis: 9.51%; height: 314px; } .gradient-item-4 { flex-basis: 8.42%; height: 274px; } .gradient-item-5 { flex-basis: 7.61%; height: 249px; } .gradient-item-6 { display: none; } .gradient-item-7 { display: none; } .gradient-item-8 { flex-basis: 6.52%; height: 232px; } .gradient-item-top-1 { flex-basis: 11.14%; height: 364px; } .gradient-item-top-2 { flex-basis: 10.06%; height: 332px; } .gradient-item-top-3 { flex-basis: 9.51%; height: 314px; } .gradient-item-top-4 { flex-basis: 8.42%; height: 274px; } .gradient-item-top-5 { flex-basis: 7.61%; height: 249px; } .gradient-item-top-6 { display: none; } .gradient-item-top-7 { display: none; } .gradient-item-top-8 { flex-basis: 6.52%; height: 232px; } .no-scroll { /*position: fixed;*/ } .simple-section { padding-top: 8px; font-size: 14px; } .simple-section h1 { font-size: 52px; margin-bottom: 32px; } .simple-section .h1-simple-small { font-size: 42px; } .simple-section h2 { margin-top: 24px; } .cookie { left: 50%; transform: translateX(-50%); right: 0; width: 92%; } } @media (max-width: 576px) { .simple-container { padding: 0 16px; } .simple-section { padding-top: 8px; } .simple-section h1 { font-size: 42px; line-height: 90%; letter-spacing: -0.06em; } .simple-section .h1-simple-small { font-size: 30px; } .cookie { padding-left: 16px; } .cookie__wrapper { flex-direction: column; gap: 12px; } .cookie__buttons-wrapper { flex-direction: row-reverse; } .cookie__buttons-wrapper { width: 100%; } .cookie__button-accept { flex-grow: 1; justify-content: center; } .cookie__settings-wrapper { margin-top: 12px; gap: 12px; } .cookie__settings.active { margin-bottom: 20px; } .cookie__settings-item label { align-items: flex-start; } .cookie__settings-item input + label:before { margin-top: 4px; } } @media (max-width: 476px) { .gradient-item-1 { height: 174px; } .gradient-item-2 { height: 159px; } .gradient-item-3 { height: 150px; } .gradient-item-4 { height: 131px; } .gradient-item-5 { height: 119px; } .gradient-item-8 { height: 111px; } .gradient-item-top-1 { height: 174px; } .gradient-item-top-2 { height: 159px; } .gradient-item-top-3 { height: 150px; } .gradient-item-top-4 { height: 131px; } .gradient-item-top-5 { height: 119px; } .gradient-item-top-8 { height: 111px; } }