6556 lines
107 KiB
SCSS
6556 lines
107 KiB
SCSS
@use "mixins" as *;
|
|
@use "config" as *;
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-red);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
::placeholder {
|
|
color: #8b8f9b;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-red);
|
|
color: #fff;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 375px;
|
|
min-height: 100%;
|
|
overflow-x: hidden;
|
|
font-family: "Onest";
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
font-weight: normal;
|
|
letter-spacing: -0.01em;
|
|
color: var(--color-text);
|
|
text-decoration-skip-ink: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
@include media-max($md) {
|
|
body {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
body {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
fieldset {
|
|
border: none;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
border: none;
|
|
background: none;
|
|
box-shadow: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input {
|
|
&::-webkit-contacts-auto-fill-button,
|
|
&::-webkit-credentials-auto-fill-button,
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
&[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.inputs {
|
|
input,
|
|
textarea {
|
|
width: 100%;
|
|
outline: none;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #efefef;
|
|
&:focus {
|
|
border-color: #ccc;
|
|
}
|
|
}
|
|
input {
|
|
height: 64px;
|
|
padding: 0 20px;
|
|
}
|
|
textarea {
|
|
width: 120px;
|
|
padding: 15px 20px;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.inputs {
|
|
input {
|
|
height: 60px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.inputs {
|
|
input {
|
|
height: 56px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.inputs {
|
|
input,
|
|
textarea {
|
|
font-size: 15px;
|
|
}
|
|
input {
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.file-field {
|
|
position: relative;
|
|
display: inline-flex;
|
|
&__label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 45px;
|
|
padding-inline: 15px;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
border-radius: 100px;
|
|
background-color: #ececf1;
|
|
cursor: pointer;
|
|
transition: background-color 0.25s ease;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
flex-shrink: 0;
|
|
background: var(--icon-clip) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&:hover {
|
|
background-color: #cacdd9;
|
|
}
|
|
}
|
|
&__text {
|
|
margin-left: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&__input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
&:focus-visible {
|
|
+ .file-field__label {
|
|
outline: 2px solid var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.file-field {
|
|
&__label {
|
|
height: 40px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
button {
|
|
font: inherit;
|
|
border: none;
|
|
background: none;
|
|
appearance: none;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style-type: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--fs-h1-sm);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--fs-h2-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--fs-h3-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--fs-h3-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1360px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.container {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.container {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
&-title {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
span {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
&-descr {
|
|
margin-bottom: 50px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.section {
|
|
&-descr {
|
|
margin-bottom: 45px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.section {
|
|
&-title {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
&-descr {
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.section {
|
|
&-title {
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
&-descr {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.page {
|
|
&-title {
|
|
margin-bottom: 50px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.page {
|
|
&-title {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.page {
|
|
&-title {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 100px;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
color: var(--color-text);
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
&--lg {
|
|
height: 64px;
|
|
padding: 0 30px;
|
|
font-size: 20px;
|
|
}
|
|
&--md {
|
|
height: 58px;
|
|
padding: 0 25px;
|
|
}
|
|
&--sm {
|
|
height: 50px;
|
|
padding: 0 25px;
|
|
}
|
|
&--red {
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
&:hover {
|
|
background-color: var(--color-red-dark);
|
|
}
|
|
}
|
|
&--transp-red {
|
|
color: var(--color-red);
|
|
border: 1px solid rgba(174, 0, 27, 0.5);
|
|
&:hover {
|
|
color: #fff;
|
|
border-color: var(--color-red);
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.btn {
|
|
&--lg {
|
|
height: 60px;
|
|
}
|
|
&--md {
|
|
height: 54px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.btn {
|
|
font-size: 16px;
|
|
&--lg {
|
|
padding: 0 25px;
|
|
height: 56px;
|
|
font-size: 18px;
|
|
}
|
|
&--md {
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.btn {
|
|
font-size: 15px;
|
|
&--lg {
|
|
height: 50px;
|
|
padding: 0 20px;
|
|
font-size: 16px;
|
|
}
|
|
&--md,
|
|
&--sm {
|
|
height: 44px;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.breadcrumbs {
|
|
margin-top: 125px;
|
|
margin-bottom: fluid-clamp(20px, 65px);
|
|
&__inner {
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
&__list {
|
|
display: flex;
|
|
width: max-content;
|
|
}
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 0.6em;
|
|
aspect-ratio: 1;
|
|
margin-inline: 0.5em;
|
|
transform: rotate(180deg);
|
|
mask: var(--icon-angle-left) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-left) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: #c7c7c7;
|
|
}
|
|
&.is-active {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
span {
|
|
color: var(--color-text);
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
&__link {
|
|
padding-block: 5px;
|
|
white-space: nowrap;
|
|
color: #a0a0a0;
|
|
transition: color 0.25s ease;
|
|
}
|
|
+ section {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.breadcrumbs {
|
|
margin-top: fluid-clamp(65px, 105px);
|
|
&__inner {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.breadcrumbs {
|
|
&__inner {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
&__item {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.breadcrumbs {
|
|
&__link[href]:hover {
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
}
|
|
|
|
.single-article .breadcrumbs,
|
|
.single-news .breadcrumbs {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.swiper {
|
|
&-slide {
|
|
min-width: 0;
|
|
height: auto;
|
|
}
|
|
&-pagination {
|
|
position: relative;
|
|
display: flex;
|
|
max-width: 100%;
|
|
width: min-content;
|
|
height: 10px;
|
|
z-index: 2;
|
|
column-gap: 12px;
|
|
margin: 40px auto 0;
|
|
overflow: hidden;
|
|
&-item {
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
background-color: #d9d9d9;
|
|
transition: background-color 0.25s ease;
|
|
&.is-active {
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
&-lock {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.swiper {
|
|
&:not(.swiper-fade, .swiper-full) {
|
|
margin: 0 -20px;
|
|
padding: 0 20px;
|
|
.swiper-wrapper.is-grid {
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.swiper {
|
|
&:not(.swiper-fade, .swiper-full) {
|
|
margin: 0 -15px;
|
|
padding: 0 15px;
|
|
.swiper-wrapper.is-grid {
|
|
column-gap: 15px;
|
|
}
|
|
}
|
|
&-pagination {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.fancybox {
|
|
&__slide {
|
|
&.has-html {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-fancybox {
|
|
.f-html {
|
|
opacity: 0;
|
|
transform: translate3d(0, -50%, 0);
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
&.is-visible {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
&.is-hidden {
|
|
opacity: 0;
|
|
transform: translate3d(0, -50%, 0);
|
|
}
|
|
&.is-replacing {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: none;
|
|
}
|
|
&.is-replaced:not(.is-hidden) {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
&.is-replaced.is-hidden {
|
|
opacity: 0;
|
|
transform: translate3d(0, -50%, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.popups {
|
|
display: none;
|
|
}
|
|
|
|
.popup {
|
|
position: relative;
|
|
max-width: 520px;
|
|
width: 100%;
|
|
padding-top: fluid-clamp(25px, 50px);
|
|
padding-bottom: fluid-clamp(30px, 60px);
|
|
padding-inline: fluid-clamp(20px, 45px);
|
|
cursor: default;
|
|
border-radius: var(--radius-md);
|
|
&-title {
|
|
font-size: var(--fs-h3-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: var(--color-dark);
|
|
}
|
|
&-message {
|
|
&__info {
|
|
margin-top: fluid-clamp(15px, 25px);
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
color: var(--color-text);
|
|
}
|
|
&__ok {
|
|
margin-top: fluid-clamp(25px, 40px);
|
|
text-align: center;
|
|
&-btn {
|
|
width: 165px;
|
|
}
|
|
}
|
|
}
|
|
&-close {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
top: 15px;
|
|
right: 15px;
|
|
cursor: pointer;
|
|
mask: var(--icon-close) center no-repeat;
|
|
-webkit-mask: var(--icon-close) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-dark);
|
|
transition: background-color 0.25s ease;
|
|
&:hover {
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.popup {
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.popup {
|
|
&-close {
|
|
width: 24px;
|
|
height: 24px;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.popup {
|
|
&-message {
|
|
&__ok-btn {
|
|
width: 140px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.header {
|
|
&-main {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
padding-right: var(--f-scrollbar-compensate, 0px);
|
|
&__body {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 25px;
|
|
padding: 10px 10px 10px 20px;
|
|
border-radius: 100px;
|
|
border: 1px solid #f0f0f0;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
&-logo {
|
|
flex-shrink: 0;
|
|
&__link {
|
|
display: block;
|
|
padding-top: 5px;
|
|
img {
|
|
width: 122px;
|
|
}
|
|
}
|
|
}
|
|
&-menu {
|
|
&__item {
|
|
position: relative;
|
|
min-width: 0;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
}
|
|
&__link {
|
|
display: block;
|
|
padding: 10px 0;
|
|
color: var(--color-text);
|
|
transition: color 0.25s ease;
|
|
&:not([href]) {
|
|
cursor: default;
|
|
}
|
|
}
|
|
&__submenu-toggle {
|
|
display: none;
|
|
}
|
|
&__submenu {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
li {
|
|
font-size: 16px;
|
|
}
|
|
a {
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
}
|
|
&-buttons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
column-gap: 30px;
|
|
&__login-btn {
|
|
padding: 10px 0;
|
|
border-radius: 0;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-text);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
&:hover {
|
|
color: var(--color-red);
|
|
&::before {
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&__download-btn {
|
|
height: 50px;
|
|
padding: 0 25px;
|
|
}
|
|
&__menu-btn {
|
|
display: none;
|
|
align-content: center;
|
|
row-gap: 13%;
|
|
width: 44px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border: 1px solid #eee;
|
|
transition: row-gap 0.25s ease;
|
|
span,
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 55%;
|
|
height: 1.5px;
|
|
margin: 0 auto;
|
|
border-radius: 10px;
|
|
transform: translateY(50%);
|
|
background-color: #535369;
|
|
transition: all 0.25s ease;
|
|
}
|
|
&::after {
|
|
transform: translateY(50%) scaleX(65%);
|
|
transform-origin: 0 50%;
|
|
}
|
|
&.is-active {
|
|
row-gap: 0;
|
|
span {
|
|
width: 0;
|
|
background-color: transparent;
|
|
}
|
|
&::before {
|
|
transform: rotate(45deg) translate(1px, 1px);
|
|
}
|
|
&::after {
|
|
transform: rotate(-45deg) translate(1px, -1px);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-dropdown {
|
|
position: fixed;
|
|
display: none;
|
|
align-items: unset;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
padding: 120px 0 40px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
transform: translateY(-100%);
|
|
background-color: #fff;
|
|
transition: transform 0.4s ease-in-out;
|
|
&.is-active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
&-login__btn {
|
|
width: 100%;
|
|
color: var(--color-grey-text);
|
|
background-color: #f4f5fc;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-text);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
&:hover {
|
|
background-color: #ebecf2;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-min($lg) {
|
|
.header-menu {
|
|
&__list {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-auto-flow: column;
|
|
column-gap: 30px;
|
|
> li {
|
|
&.has-children {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
pointer-events: none;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-text);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
> a {
|
|
padding-right: 14px;
|
|
}
|
|
}
|
|
> a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&:hover {
|
|
&::after {
|
|
background-color: var(--color-red);
|
|
}
|
|
> a {
|
|
color: var(--color-red);
|
|
}
|
|
> ul {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__submenu {
|
|
position: absolute;
|
|
min-width: 200px;
|
|
max-width: 265px;
|
|
width: max-content;
|
|
top: calc(100% + 22px);
|
|
left: 0;
|
|
padding: 18px 30px;
|
|
z-index: 2;
|
|
border-radius: 20px;
|
|
background-color: var(--color-grey);
|
|
transition: visibility 0.25s ease, opacity 0.25s ease;
|
|
transition-delay: 0.02s;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 22px;
|
|
bottom: 100%;
|
|
left: 0;
|
|
}
|
|
a {
|
|
color: var(--color-grey-dark);
|
|
&:hover {
|
|
color: var(--color-grey-light);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.header {
|
|
&-main {
|
|
display: flex;
|
|
height: fluid-clamp(50px, 70px);
|
|
top: 0;
|
|
border-bottom: 1px solid #efefef;
|
|
background-color: #fff;
|
|
&__body {
|
|
height: 100%;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
}
|
|
&-logo {
|
|
&__link {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.header {
|
|
&-main {
|
|
.header-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
&-buttons {
|
|
column-gap: 10px;
|
|
&__login-btn {
|
|
display: none;
|
|
}
|
|
&__download-btn {
|
|
height: 44px;
|
|
}
|
|
&__menu-btn {
|
|
display: grid;
|
|
}
|
|
}
|
|
&-dropdown {
|
|
display: block;
|
|
}
|
|
&-menu {
|
|
margin-top: 40px;
|
|
&__list {
|
|
> li {
|
|
&.has-children {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
}
|
|
&.is-open {
|
|
> a {
|
|
color: var(--color-red);
|
|
}
|
|
> button {
|
|
transform: rotate(-180deg);
|
|
background-color: var(--color-red);
|
|
}
|
|
> ul {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__submenu-toggle {
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: auto 0;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: 10px;
|
|
-webkit-mask-size: 10px;
|
|
background-color: var(--color-text);
|
|
transition: transform 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
&__submenu {
|
|
grid-column: 1/-1;
|
|
height: 0;
|
|
overflow: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
height: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.header {
|
|
&-buttons {
|
|
&__menu-btn {
|
|
width: 40px;
|
|
}
|
|
&__download-btn {
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
&-dropdown {
|
|
padding: 110px 0 35px;
|
|
}
|
|
&-menu {
|
|
margin-top: 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.header {
|
|
&-logo__link img {
|
|
width: 100px;
|
|
}
|
|
&-buttons {
|
|
column-gap: 8px;
|
|
&__menu-btn {
|
|
width: 36px;
|
|
}
|
|
&__download-btn {
|
|
height: 36px;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&-dropdown {
|
|
padding: 95px 0 30px;
|
|
}
|
|
&-menu {
|
|
margin-top: 30px;
|
|
&__item {
|
|
font-size: 16px;
|
|
}
|
|
&__submenu li {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.hero {
|
|
overflow: hidden;
|
|
&-main {
|
|
background: linear-gradient(145deg, #f5f5f9 0%, #f5f5f9 50%, #fff5e7 100%);
|
|
&__body {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: fluid-clamp(450px, 650px, 768px) auto;
|
|
column-gap: 40px;
|
|
padding: 160px 0 50px;
|
|
z-index: 1;
|
|
}
|
|
&__left {
|
|
position: relative;
|
|
min-height: fluid-clamp(550px, 650px, 1024px);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 80%;
|
|
height: 110%;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: -1;
|
|
filter: blur(8px);
|
|
background: url(../img/bg/logo-bg.svg) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
&-title {
|
|
font-size: var(--fs-h1-lg);
|
|
span {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
&-descr {
|
|
max-width: 90%;
|
|
margin-top: 20px;
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
&-buttons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
column-gap: 12px;
|
|
row-gap: 8px;
|
|
margin-top: 50px;
|
|
}
|
|
&-qrcode {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
column-gap: 20px;
|
|
margin-top: 50px;
|
|
&__img {
|
|
display: flex;
|
|
width: fluid-clamp(90px, 110px, 1024px);
|
|
aspect-ratio: 1;
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ececec;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&__info {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: #5d5e5f;
|
|
}
|
|
}
|
|
&-stores {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
column-gap: 20px;
|
|
margin-top: 50px;
|
|
}
|
|
&-store {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 20px;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 1px;
|
|
height: 10px;
|
|
right: -1px;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
background-color: #dedede;
|
|
}
|
|
&:last-child {
|
|
padding-right: 0;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
&:hover {
|
|
.hero-store__name {
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
&__icon {
|
|
display: flex;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
}
|
|
&__name {
|
|
margin-left: 5px;
|
|
margin: 2px 0 0 5px;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
font-weight: 500;
|
|
color: #000;
|
|
transition: color 0.25s ease;
|
|
}
|
|
}
|
|
&-img {
|
|
position: absolute;
|
|
width: fluid-clamp(375px, 840px);
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
&-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
height: 100%;
|
|
}
|
|
&-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 64px;
|
|
padding: 10px 20px 10px 10px;
|
|
border-radius: 100px;
|
|
border: 1px solid #ececec;
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
&:nth-child(1) {
|
|
margin: 0 0 40% 40px;
|
|
}
|
|
&:nth-child(3) {
|
|
margin: 40px 0 14% auto;
|
|
}
|
|
&__icon {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
}
|
|
&__img {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
img {
|
|
width: auto;
|
|
}
|
|
}
|
|
&__title {
|
|
margin-left: 10px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
color: rgba(26, 20, 20, 0.8);
|
|
}
|
|
}
|
|
&-scroller {
|
|
overflow: hidden;
|
|
background-color: var(--color-dark);
|
|
&__track {
|
|
display: flex;
|
|
align-items: center;
|
|
width: max-content;
|
|
height: 54px;
|
|
}
|
|
&__group {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
will-change: transform;
|
|
}
|
|
&__item {
|
|
position: relative;
|
|
padding-right: 40px;
|
|
margin-right: 40px;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
color: #fff;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
border-radius: 50%;
|
|
transform: translateX(50%);
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&-footer {
|
|
.hero-stores {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.hero {
|
|
&-main {
|
|
&__body {
|
|
padding-top: fluid-clamp(75px, 140px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.hero {
|
|
&-main {
|
|
&__body {
|
|
padding-bottom: fluid-clamp(70px, 100px, 768px, 1024px);
|
|
}
|
|
&__left {
|
|
min-height: fluid-clamp(420px, 480px, 768px, 1024px);
|
|
}
|
|
.hero-stores {
|
|
display: none;
|
|
}
|
|
}
|
|
&-buttons {
|
|
grid-auto-flow: row;
|
|
justify-content: unset;
|
|
max-width: 280px;
|
|
}
|
|
&-qrcode {
|
|
display: none;
|
|
}
|
|
&-feature {
|
|
height: 50px;
|
|
&:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
&:nth-child(2) {
|
|
margin-left: -40px;
|
|
}
|
|
&:nth-child(3) {
|
|
margin-bottom: 0;
|
|
}
|
|
&__icon {
|
|
width: 28px;
|
|
}
|
|
&__title {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
&-scroller {
|
|
&__track {
|
|
height: 48px;
|
|
}
|
|
&__item {
|
|
padding-right: 35px;
|
|
margin-right: 35px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
&-footer {
|
|
.hero-stores {
|
|
display: grid;
|
|
}
|
|
}
|
|
&-stores {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.hero {
|
|
&-main {
|
|
&__body {
|
|
grid-template-columns: 1fr;
|
|
padding-bottom: 0;
|
|
}
|
|
&__left {
|
|
min-height: unset;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
&__right {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
&-buttons {
|
|
max-width: unset;
|
|
margin-top: 30px;
|
|
}
|
|
&-features {
|
|
position: absolute;
|
|
justify-content: center;
|
|
width: fluid-clamp(345px, 480px, 375px, 768px);
|
|
margin: 0 auto;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
&-feature {
|
|
padding: 8px 12px 8px 8px;
|
|
height: 44px;
|
|
&:nth-child(1) {
|
|
margin: 0 0 25% 60px;
|
|
}
|
|
&:nth-child(2) {
|
|
margin-left: 0;
|
|
}
|
|
&__icon {
|
|
width: 24px;
|
|
}
|
|
&__title {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&-img {
|
|
position: relative;
|
|
}
|
|
&-scroller {
|
|
&__track {
|
|
height: 42px;
|
|
}
|
|
&__item {
|
|
padding-right: 30px;
|
|
margin-right: 30px;
|
|
font-size: 14px;
|
|
&::after {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
}
|
|
}
|
|
&-stores {
|
|
column-gap: 15px;
|
|
margin-top: 40px;
|
|
}
|
|
&-store {
|
|
padding-right: 15px;
|
|
&__icon {
|
|
width: 20px;
|
|
}
|
|
&__name {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.hero {
|
|
&-img {
|
|
margin: 0 -15px;
|
|
}
|
|
&-feature {
|
|
padding: 6px 12px 6px 6px;
|
|
height: 36px;
|
|
&__icon {
|
|
width: 20px;
|
|
}
|
|
&__title {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&-scroller {
|
|
&__track {
|
|
height: 36px;
|
|
}
|
|
&__item {
|
|
padding-right: 25px;
|
|
margin-right: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&-stores {
|
|
column-gap: 12px;
|
|
margin-top: 30px;
|
|
}
|
|
&-store {
|
|
padding-right: 12px;
|
|
&__icon {
|
|
width: 16px;
|
|
}
|
|
&__name {
|
|
margin-left: 4px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.services {
|
|
margin-top: 70px;
|
|
&-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
&-title {
|
|
order: 2;
|
|
margin-top: 30px;
|
|
font: inherit;
|
|
text-align: center;
|
|
color: var(--color-text);
|
|
}
|
|
&-grid {
|
|
--item-size: 70px;
|
|
--gap-min: 20px;
|
|
--gap-max: 70px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: min(100%, calc(var(--items) * var(--item-size) + (var(--items) - 1) * var(--gap-max)));
|
|
margin: 0 auto;
|
|
gap: var(--gap-min);
|
|
}
|
|
&-item {
|
|
display: flex;
|
|
width: var(--item-size);
|
|
aspect-ratio: 1;
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.services {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.services {
|
|
margin-top: 50px;
|
|
&-grid {
|
|
--item-size: 60px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
max-width: calc(var(--item-size) * 5 + var(--gap-min) * 4);
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.services {
|
|
margin-top: 40px;
|
|
&-title {
|
|
margin-top: 25px;
|
|
}
|
|
&-grid {
|
|
--item-size: 50px;
|
|
--gap-min: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.work {
|
|
&--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
&-grid {
|
|
display: grid;
|
|
row-gap: 30px;
|
|
}
|
|
&-item {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
column-gap: 40px;
|
|
padding-top: fluid-clamp(25px, 50px);
|
|
padding-bottom: fluid-clamp(25px, 65px);
|
|
padding-inline: fluid-clamp(20px, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
&__title {
|
|
font-size: var(--fs-h3-lg);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
}
|
|
&__list {
|
|
display: grid;
|
|
row-gap: 0.6em;
|
|
margin-top: 30px;
|
|
line-height: 1.3;
|
|
}
|
|
&__li {
|
|
position: relative;
|
|
padding-left: 1.5em;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
aspect-ratio: 1;
|
|
top: 0.15em;
|
|
left: 0;
|
|
background: var(--icon-checkmark) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
&__buttons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
column-gap: 12px;
|
|
row-gap: 8px;
|
|
margin-top: 40px;
|
|
}
|
|
&__img {
|
|
aspect-ratio: 1024/680;
|
|
align-self: center;
|
|
margin: -10px 0 -20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.work {
|
|
&-grid {
|
|
row-gap: 20px;
|
|
}
|
|
&-item {
|
|
grid-template-columns: 1fr 1.1fr;
|
|
&__list {
|
|
margin-top: 20px;
|
|
}
|
|
&__buttons {
|
|
grid-auto-flow: row;
|
|
justify-content: unset;
|
|
max-width: 280px;
|
|
margin-top: 30px;
|
|
}
|
|
&__img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.work {
|
|
&-item {
|
|
grid-template-columns: 1fr;
|
|
&__buttons {
|
|
max-width: unset;
|
|
}
|
|
&__img {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.work {
|
|
&-grid {
|
|
row-gap: 10px;
|
|
}
|
|
&-item {
|
|
&__img {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.advantages {
|
|
margin-top: var(--space-section);
|
|
&-slider {
|
|
counter-reset: num;
|
|
&__wrapper.is-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-auto-rows: 1fr;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
&-item {
|
|
padding: 30px 30px 35px;
|
|
counter-increment: num;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
&::before {
|
|
content: counter(num, decimal-leading-zero);
|
|
position: absolute;
|
|
display: block;
|
|
top: 30px;
|
|
right: 30px;
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
color: #b6b6c5;
|
|
}
|
|
&__icon {
|
|
display: flex;
|
|
width: 50px;
|
|
aspect-ratio: 1;
|
|
}
|
|
&__title {
|
|
min-height: 2.2em;
|
|
margin-top: 25px;
|
|
font-size: var(--fs-h3-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
}
|
|
&__descr {
|
|
margin-top: 15px;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.advantages {
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: slide-size(2.25, 20px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.advantages {
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-auto-columns: slide-size(1.25, 15px);
|
|
}
|
|
}
|
|
&-item {
|
|
&__icon {
|
|
width: 44px;
|
|
}
|
|
&__title {
|
|
font-size: var(--fs-title-sm);
|
|
}
|
|
&__descr {
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.advantages {
|
|
&-item {
|
|
padding: 20px;
|
|
&::before {
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
&__icon {
|
|
width: 40px;
|
|
}
|
|
&__title {
|
|
margin-top: 15px;
|
|
}
|
|
&__descr {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.scheme {
|
|
margin-top: var(--space-section);
|
|
padding-top: fluid-clamp(40px, 80px);
|
|
padding-bottom: fluid-clamp(40px, 100px);
|
|
background-color: var(--color-dark);
|
|
&-title,
|
|
&-descr {
|
|
color: #fff;
|
|
}
|
|
&-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
counter-reset: num;
|
|
}
|
|
&-item {
|
|
padding: 30px 25px;
|
|
counter-increment: num;
|
|
border-radius: var(--radius-md);
|
|
background-color: #fff;
|
|
&__top,
|
|
&__img {
|
|
display: flex;
|
|
aspect-ratio: 1.3/1;
|
|
}
|
|
&__top {
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
&__img {
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
img {
|
|
width: var(--img-width);
|
|
}
|
|
}
|
|
&__qrcode {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
min-height: 0;
|
|
padding: 8px;
|
|
aspect-ratio: 1;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ececec;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&__login {
|
|
margin-top: 12px;
|
|
&-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
font-size: 16px;
|
|
color: var(--color-grey-text);
|
|
border: 1px solid #ececec;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-text);
|
|
}
|
|
&:hover {
|
|
background-color: #f4f5fc;
|
|
border-color: #f4f5fc;
|
|
}
|
|
}
|
|
}
|
|
&__title {
|
|
margin-top: 20px;
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
&::before {
|
|
content: counter(num) '.';
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
&__descr {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.scheme {
|
|
&-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
&-item {
|
|
&__top,
|
|
&__img {
|
|
aspect-ratio: 3.5/1;
|
|
}
|
|
&__top {
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
column-gap: 20px;
|
|
}
|
|
&__qrcode {
|
|
height: 100%;
|
|
}
|
|
&__login {
|
|
flex: 1;
|
|
margin-top: 0;
|
|
}
|
|
&__img img {
|
|
height: 100%;
|
|
}
|
|
&__title {
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.scheme {
|
|
&-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&-item {
|
|
display: grid;
|
|
grid-template-columns: 1.8fr 1fr;
|
|
column-gap: 30px;
|
|
&:first-child {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&__top,
|
|
&__img {
|
|
aspect-ratio: unset;
|
|
}
|
|
&__top {
|
|
order: 3;
|
|
margin-top: 30px;
|
|
}
|
|
&__qrcode {
|
|
display: none;
|
|
}
|
|
&__img {
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
&__title {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.scheme {
|
|
&-grid {
|
|
row-gap: 8px;
|
|
}
|
|
&-item {
|
|
column-gap: 15px;
|
|
padding: 20px;
|
|
&__top {
|
|
margin-top: 15px;
|
|
}
|
|
&__login-btn {
|
|
height: 40px;
|
|
font-size: 15px;
|
|
}
|
|
&__title::before {
|
|
margin-bottom: 10px;
|
|
}
|
|
&__descr {
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.income {
|
|
margin-top: var(--space-section);
|
|
&-calc {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.15fr;
|
|
column-gap: fluid-clamp(40px, 100px, 1024px);
|
|
line-height: 1.2;
|
|
&--single {
|
|
.income-calc__top {
|
|
display: none;
|
|
}
|
|
}
|
|
&__top {
|
|
display: flex;
|
|
justify-content: center;
|
|
grid-column: 1/-1;
|
|
margin-bottom: 40px;
|
|
}
|
|
&__types {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
padding: 6px;
|
|
border-radius: 100px;
|
|
border: 1px solid #ebebf1;
|
|
}
|
|
&__type {
|
|
position: relative;
|
|
&--taxi span::before {
|
|
mask-image: var(--icon-car);
|
|
-webkit-mask-image: var(--icon-car);
|
|
}
|
|
&--courier span::before {
|
|
mask-image: var(--icon-bike);
|
|
-webkit-mask-image: var(--icon-bike);
|
|
}
|
|
&--cargo span::before {
|
|
mask-image: var(--icon-truck);
|
|
-webkit-mask-image: var(--icon-truck);
|
|
}
|
|
&-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
border-radius: 100px;
|
|
&:checked {
|
|
+ span {
|
|
color: #fff;
|
|
background-color: var(--color-dark);
|
|
&::before {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 15px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
border-radius: 100px;
|
|
transition: color 0.25s ease, background-color 0.25s ease;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
margin-right: 6px;
|
|
mask-position: center;
|
|
-webkit-mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: #cacada;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
}
|
|
}
|
|
&__controls {
|
|
min-width: 0;
|
|
}
|
|
&__range {
|
|
margin-bottom: 40px;
|
|
&-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
&-value {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
color: var(--color-red);
|
|
}
|
|
&-number {
|
|
font-size: 1.5em;
|
|
}
|
|
&-input {
|
|
--range-track-height: 3px;
|
|
--range-thumb-width: 32px;
|
|
--range-thumb-height: 22px;
|
|
--range-progress: 0%;
|
|
display: block;
|
|
width: 100%;
|
|
height: var(--range-thumb-height);
|
|
margin-top: 12px;
|
|
cursor: pointer;
|
|
&::-webkit-slider-runnable-track {
|
|
height: var(--range-track-height);
|
|
border-radius: 100px;
|
|
background: linear-gradient(to right,
|
|
var(--color-red) 0%,
|
|
var(--color-red) var(--range-progress),
|
|
#dedede var(--range-progress),
|
|
#dedede 100%);
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
width: var(--range-thumb-width);
|
|
height: var(--range-thumb-height);
|
|
margin-top: calc((var(--range-track-height) - var(--range-thumb-height)) / 2);
|
|
border: 3px solid #fff;
|
|
border-radius: 100px;
|
|
background: var(--color-red);
|
|
box-shadow: 10px 4px 24px 0 #c4c4d7;
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
}
|
|
&::-moz-range-track {
|
|
height: var(--range-track-height);
|
|
border-radius: 100px;
|
|
background: #dedede;
|
|
}
|
|
&::-moz-range-progress {
|
|
height: var(--range-track-height);
|
|
border-radius: 100px;
|
|
background: var(--color-red);
|
|
}
|
|
&::-moz-range-thumb {
|
|
width: var(--range-thumb-width);
|
|
height: var(--range-thumb-height);
|
|
border: 3px solid #fff;
|
|
border-radius: 100px;
|
|
background: var(--color-red);
|
|
box-shadow: 10px 4px 24px 0 #c4c4d7;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
&:focus-visible::-webkit-slider-thumb {
|
|
outline: 2px solid var(--color-red);
|
|
}
|
|
&:focus-visible::-moz-range-thumb {
|
|
outline: 2px solid var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&__radios {
|
|
min-width: 0;
|
|
&-label {
|
|
margin-bottom: 20px;
|
|
}
|
|
&-wrapper {
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
&-inner {
|
|
display: grid;
|
|
justify-content: start;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
width: max-content;
|
|
}
|
|
}
|
|
&__radio {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
&-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
border-radius: 100px;
|
|
&:checked {
|
|
+ span {
|
|
color: #fff;
|
|
background-color: var(--color-dark);
|
|
&::before {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
border-radius: 100px;
|
|
border: 1px solid #e2e2e2;
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
}
|
|
}
|
|
&-result {
|
|
padding: 30px;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-md);
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
&__main {
|
|
min-width: 0;
|
|
}
|
|
&__total {
|
|
display: block;
|
|
margin-top: 25px;
|
|
font-size: var(--fs-h1-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&__note {
|
|
margin-top: 5px;
|
|
font-size: 18px;
|
|
}
|
|
&__stats {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr 1.5fr 1fr;
|
|
column-gap: 20px;
|
|
margin-top: 25px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #b9354a;
|
|
}
|
|
&__stat {
|
|
min-width: 0;
|
|
&-label {
|
|
font-size: 16px;
|
|
opacity: 0.6;
|
|
}
|
|
&-value {
|
|
display: block;
|
|
margin-top: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: var(--fs-title-md);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
}
|
|
}
|
|
}
|
|
&-footnote {
|
|
margin-top: 40px;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.income {
|
|
&-calc {
|
|
&__radio-label {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.income {
|
|
&-calc {
|
|
grid-template-columns: 1fr;
|
|
&__range {
|
|
margin-bottom: 30px;
|
|
}
|
|
&__radios-wrapper {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
&-result {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr 1.5fr;
|
|
column-gap: 30px;
|
|
margin-top: 45px;
|
|
&__total {
|
|
margin-top: 10px;
|
|
}
|
|
&__stats {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.income {
|
|
&-descr br {
|
|
display: none;
|
|
}
|
|
&-calc {
|
|
&__type {
|
|
&-label {
|
|
font-size: 16px;
|
|
&::before {
|
|
width: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-result {
|
|
grid-template-columns: 1fr;
|
|
&__stats {
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #b9354a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.income {
|
|
&-calc {
|
|
&__top {
|
|
margin-bottom: 30px;
|
|
}
|
|
&__types {
|
|
column-gap: 0;
|
|
}
|
|
&__type {
|
|
&-label {
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
&::before {
|
|
width: 18px;
|
|
}
|
|
}
|
|
}
|
|
&__range {
|
|
margin-bottom: 20px;
|
|
&-input {
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
&__radios {
|
|
&-label {
|
|
margin-bottom: 15px;
|
|
}
|
|
&-wrapper {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
}
|
|
&__radio-label {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&-result {
|
|
margin-top: 35px;
|
|
padding: 20px;
|
|
&__note {
|
|
font-size: 15px;
|
|
}
|
|
&__stats {
|
|
margin-top: 17px;
|
|
}
|
|
&__stat-label {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
&-footnote {
|
|
margin-top: 30px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.socials {
|
|
margin-top: var(--space-section);
|
|
padding-top: fluid-clamp(40px, 80px);
|
|
background: var(--gradient-grey);
|
|
&-title {
|
|
text-align: center;
|
|
}
|
|
&-body {
|
|
display: grid;
|
|
grid-template-columns: 1.15fr 1fr;
|
|
column-gap: fluid-clamp(40px, 115px, 768px);
|
|
margin-top: fluid-clamp(25px, 50px);
|
|
}
|
|
&-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
margin-top: fluid-clamp(25px, 50px, 1024px);
|
|
}
|
|
&-item {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: auto 1fr;
|
|
column-gap: 25px;
|
|
padding: 15px 30px;
|
|
border-radius: 15px;
|
|
color: var(--main-color);
|
|
background-color: #fff;
|
|
transition: color 0.25s ease, background-color 0.25s ease;
|
|
&:hover {
|
|
color: #fff;
|
|
background-color: var(--main-color);
|
|
.socials-item__icon {
|
|
&::before,
|
|
&::after {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
&__icon {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: var(--icon-color);
|
|
mask: var(--social-icon) center no-repeat;
|
|
-webkit-mask: var(--social-icon) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
}
|
|
&__name {
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
}
|
|
&--vk {
|
|
--main-color: #366cfe;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/vk.svg);
|
|
}
|
|
&--instagram {
|
|
--main-color: #000;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/instagram.svg);
|
|
}
|
|
&--youtube {
|
|
--main-color: #e80b2e;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/youtube.svg);
|
|
}
|
|
&--threads {
|
|
--main-color: #000;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/threads.svg);
|
|
}
|
|
&--tiktok {
|
|
--main-color: #000;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/tiktok.svg);
|
|
}
|
|
&--telegram {
|
|
--main-color: #3292dd;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/telegram.svg);
|
|
}
|
|
&--dzen {
|
|
--main-color: #000;
|
|
--icon-color: #2c3036;
|
|
--social-icon: url(../img/icons/dzen.svg);
|
|
}
|
|
&--rutube {
|
|
--main-color: #0e0333;
|
|
--icon-color: currentColor;
|
|
--social-icon: url(../img/icons/rutube.svg);
|
|
.socials-item__icon::after {
|
|
content: '';
|
|
display: block;
|
|
width: 8px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background-color: #ed143b;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
}
|
|
}
|
|
&-footnote {
|
|
margin-block: fluid-clamp(30px, 60px, 1024px);
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
}
|
|
&-img {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.socials {
|
|
&-grid {
|
|
margin-top: 0;
|
|
}
|
|
&-item {
|
|
column-gap: 15px;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.socials {
|
|
&-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&-footnote {
|
|
margin-bottom: 0;
|
|
}
|
|
&-img {
|
|
width: fluid-clamp(345px, 600px, 375px, 768px);
|
|
margin: 40px auto 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.socials {
|
|
&-item {
|
|
column-gap: 10px;
|
|
&__icon {
|
|
&::before {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
&__name {
|
|
font-size: 16px;
|
|
}
|
|
&--rutube {
|
|
.socials-item__icon::after {
|
|
width: 6px;
|
|
}
|
|
}
|
|
}
|
|
&-footnote {
|
|
margin-top: 20px;
|
|
}
|
|
&-img {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.reviews {
|
|
&--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
&-slider {
|
|
-webkit-text-size-adjust: 100%;
|
|
&__container {
|
|
padding: 0 20px;
|
|
}
|
|
&__wrapper {
|
|
width: fit-content;
|
|
margin-inline: auto;
|
|
&.is-grid {
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-auto-flow: column;
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
&__bottom {
|
|
margin-top: 60px;
|
|
&:has(.swiper-pagination-lock) {
|
|
display: none;
|
|
}
|
|
}
|
|
&__pagination {
|
|
display: flex;
|
|
height: 2px;
|
|
&-item {
|
|
flex: 1;
|
|
height: 100%;
|
|
background-color: #e2e2e2;
|
|
transition: background-color 0.25s ease;
|
|
&.is-active {
|
|
background-color: var(--color-grey-dark);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-grid {
|
|
display: grid;
|
|
row-gap: fluid-clamp(30px, 80px);
|
|
padding-top: 10px;
|
|
}
|
|
&-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 414px;
|
|
&:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
&__img {
|
|
position: relative;
|
|
aspect-ratio: 768/580;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
&__user {
|
|
margin-top: 25px;
|
|
padding-right: 20px;
|
|
line-height: 1.1;
|
|
&-name {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-dark);
|
|
}
|
|
&-descr {
|
|
margin-top: 15px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
&__comment {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
margin-top: 30px;
|
|
padding: 25px;
|
|
font-size: 18px;
|
|
border-radius: var(--radius-sm);
|
|
background-color: #f6f6f6;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
background: var(--icon-quotes) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&-text {
|
|
margin: 15px 0 auto;
|
|
}
|
|
&-link {
|
|
align-self: flex-start;
|
|
margin-top: 10px;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-item {
|
|
display: grid;
|
|
grid-template-columns: fluid-clamp(300px, 414px, 768px) 1fr;
|
|
column-gap: fluid-clamp(30px, 70px, 768px);
|
|
&__img {
|
|
position: relative;
|
|
aspect-ratio: 768/580;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
&__user {
|
|
line-height: 1.1;
|
|
&-name {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-dark);
|
|
}
|
|
&-descr {
|
|
margin-top: 15px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
&__comment {
|
|
margin-top: 30px;
|
|
padding: 25px;
|
|
font-size: 18px;
|
|
border-radius: var(--radius-sm);
|
|
background-color: #f6f6f6;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
margin-bottom: 15px;
|
|
mask: var(--icon-quotes) center no-repeat;
|
|
-webkit-mask: var(--icon-quotes) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-red);
|
|
}
|
|
&-text {
|
|
margin-top: 15px;
|
|
}
|
|
&-link {
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: fluid-clamp(30px, 80px);
|
|
text-align: center;
|
|
&.is-hidden {
|
|
display: none;
|
|
}
|
|
&__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.reviews {
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: slide-size(3, 20px);
|
|
justify-content: unset;
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
&-slide {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.reviews {
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-auto-columns: slide-size(2.25, 20px);
|
|
}
|
|
}
|
|
&-grid {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.reviews {
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-auto-columns: slide-size(1.25, 15px);
|
|
}
|
|
&__bottom {
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
&-item {
|
|
grid-template-columns: 1fr;
|
|
&__user {
|
|
margin-top: 25px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
&-showmore {
|
|
&__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.reviews {
|
|
&-slider {
|
|
&__container {
|
|
padding: 0 15px;
|
|
}
|
|
&__wrapper.is-grid {
|
|
column-gap: 15px;
|
|
}
|
|
&__bottom {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
&-slide {
|
|
&__user {
|
|
margin-top: 20px;
|
|
padding-right: 15px;
|
|
&-descr {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
&__comment {
|
|
margin-top: 25px;
|
|
padding: 20px;
|
|
font-size: 15px;
|
|
&::before {
|
|
width: 20px;
|
|
}
|
|
&-text {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
&-item {
|
|
&__user {
|
|
margin-top: 20px;
|
|
padding-right: 15px;
|
|
&-descr {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
&__comment {
|
|
margin-top: 25px;
|
|
padding: 20px;
|
|
font-size: 15px;
|
|
&::before {
|
|
width: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.payments {
|
|
margin-top: var(--space-section);
|
|
&-body {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: fluid-clamp(25px, 60px);
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(145deg, #f5f5f9 50%, #fff5e7 100%);
|
|
}
|
|
&-header {
|
|
width: fluid-clamp(300px, 800px);
|
|
z-index: 1;
|
|
}
|
|
&-descr {
|
|
margin-bottom: 0;
|
|
}
|
|
&-images {
|
|
margin-top: fluid-clamp(60px, 90px, 768px);
|
|
&__phone {
|
|
display: flex;
|
|
width: fluid-clamp(240px, 360px);
|
|
overflow: hidden;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 0;
|
|
}
|
|
}
|
|
&__messages img {
|
|
position: absolute;
|
|
&:nth-child(1) {
|
|
width: 24%;
|
|
left: 5%;
|
|
bottom: 46%;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 19%;
|
|
left: 7%;
|
|
bottom: 7%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 19%;
|
|
right: 9%;
|
|
bottom: 42%;
|
|
}
|
|
}
|
|
&__coins img {
|
|
position: absolute;
|
|
&:nth-child(1) {
|
|
width: 9%;
|
|
left: 5%;
|
|
top: 10%;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 6%;
|
|
right: 7%;
|
|
top: 14%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 16%;
|
|
right: 4%;
|
|
bottom: 4%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.payments {
|
|
&-images {
|
|
margin-top: 90px;
|
|
&__phone {
|
|
aspect-ratio: 240/260;
|
|
}
|
|
&__messages img {
|
|
&:nth-child(1) {
|
|
width: 33%;
|
|
top: 32%;
|
|
bottom: unset;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 31%;
|
|
top: 30%;
|
|
right: 5%;
|
|
left: unset;
|
|
bottom: unset;
|
|
}
|
|
&:nth-child(3) {
|
|
display: none;
|
|
}
|
|
}
|
|
&__coins img {
|
|
&:nth-child(1) {
|
|
max-width: 90px;
|
|
width: 18%;
|
|
left: 4%;
|
|
bottom: 25%;
|
|
top: unset;
|
|
}
|
|
&:nth-child(2) {
|
|
max-width: 60px;
|
|
width: 10%;
|
|
top: 47%;
|
|
}
|
|
&:nth-child(3) {
|
|
max-width: 130px;
|
|
width: 26%;
|
|
right: 8%;
|
|
bottom: 6%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.faq {
|
|
&--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
&-item {
|
|
border-bottom: 1px solid #ededed;
|
|
&:first-child {
|
|
border-top: 1px solid #ededed;
|
|
}
|
|
&__question {
|
|
position: relative;
|
|
padding-block: 25px;
|
|
padding-right: fluid-clamp(60px, 120px);
|
|
font-size: var(--fs-h3-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto 0;
|
|
background: var(--icon-cross) center no-repeat;
|
|
background-size: contain;
|
|
transition: transform 0.25s ease;
|
|
}
|
|
}
|
|
&__answer {
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
&__content {
|
|
padding-right: fluid-clamp(60px, 120px);
|
|
padding-bottom: 25px;
|
|
}
|
|
&.is-active {
|
|
.faq-item__question::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
.faq-item__answer {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.faq-item__content {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.faq-item {
|
|
&__question {
|
|
padding-block: 20px;
|
|
font-size: var(--fs-title-sm);
|
|
&::after {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
}
|
|
&__content {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.faq-item {
|
|
&__question {
|
|
padding-block: 15px;
|
|
}
|
|
&__content {
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.faq-item__question:hover {
|
|
color: var(--color-grey-dark);
|
|
}
|
|
}
|
|
|
|
|
|
.articles {
|
|
&--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
&--page {
|
|
margin-top: fluid-clamp(40px, 100px);
|
|
}
|
|
&-title {
|
|
&--sm {
|
|
margin-bottom: 40px;
|
|
font-size: var(--fs-h3-lg);
|
|
}
|
|
&--lg {
|
|
margin-bottom: 45px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
&-filter {
|
|
margin-bottom: 30px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
&__list {
|
|
display: grid;
|
|
justify-content: start;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
width: max-content;
|
|
}
|
|
&__link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
color: #798079;
|
|
border: 1px solid #dcdcdc;
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
&__item {
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
&.is-active a {
|
|
color: #fff;
|
|
border-color: var(--color-dark);
|
|
background-color: var(--color-dark);
|
|
}
|
|
}
|
|
}
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
&-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 20px;
|
|
row-gap: 50px;
|
|
transition: opacity 0.25s ease;
|
|
&.is-loading {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
&__img {
|
|
&-link {
|
|
display: block;
|
|
aspect-ratio: 768/435;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 25px;
|
|
flex: 1;
|
|
}
|
|
&__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
&__date {
|
|
font-size: 15px;
|
|
}
|
|
&__tags {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
margin-left: 15px;
|
|
}
|
|
&__tag {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #798079;
|
|
background-color: #f6f6f6;
|
|
}
|
|
&__title {
|
|
min-height: 2.4em;
|
|
margin-top: 25px;
|
|
padding-right: 20px;
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
&-link {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
width: fit-content;
|
|
overflow: hidden;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&__descr {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin: 20px 0 auto;
|
|
padding-right: 20px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
&__read {
|
|
margin-top: 30px;
|
|
&-btn {
|
|
border-color: rgba(185, 185, 185, 0.5);
|
|
}
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
transition: opacity 0.25s ease;
|
|
&.is-loading {
|
|
opacity: 0;
|
|
}
|
|
&.is-hidden {
|
|
display: none;
|
|
}
|
|
&__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.articles {
|
|
&-filter {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.articles {
|
|
&-filter {
|
|
&__item {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: slide-size(2.25, 20px);
|
|
}
|
|
}
|
|
&-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.articles {
|
|
&-title {
|
|
&--sm {
|
|
margin-bottom: 30px;
|
|
}
|
|
&--lg {
|
|
margin-bottom: 35px;
|
|
}
|
|
}
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-auto-columns: slide-size(1.25, 15px);
|
|
}
|
|
}
|
|
&-grid {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 40px;
|
|
.articles-item {
|
|
&__title {
|
|
min-height: unset;
|
|
padding-right: 0;
|
|
}
|
|
&__descr {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: 40px;
|
|
&__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.articles {
|
|
&-title {
|
|
&--sm,
|
|
&--lg {
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
&-filter {
|
|
margin-bottom: 20px;
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
&__item {
|
|
font-size: 14px;
|
|
}
|
|
&__link {
|
|
padding: 7px 12px;
|
|
}
|
|
}
|
|
&-grid {
|
|
row-gap: 30px;
|
|
}
|
|
&-item {
|
|
&__info {
|
|
margin-top: 20px;
|
|
}
|
|
&__date {
|
|
font-size: 13px;
|
|
}
|
|
&__tags {
|
|
margin-left: 10px;
|
|
}
|
|
&__tag {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
}
|
|
&__title {
|
|
margin-top: 20px;
|
|
padding-right: 15px;
|
|
}
|
|
&__descr {
|
|
margin-top: 15px;
|
|
padding-right: 15px;
|
|
font-size: 15px;
|
|
}
|
|
&__read {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.articles {
|
|
&-filter__link:hover {
|
|
border-color: #a6a6a6;
|
|
}
|
|
&-item__img-link:hover img {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.getapp {
|
|
margin-top: var(--space-section);
|
|
&-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: fluid-clamp(40px, 65px, 768px);
|
|
padding-block: fluid-clamp(25px, 65px);
|
|
padding-inline: fluid-clamp(20px, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background: url(../img/bg/dl-bg.webp) center no-repeat;
|
|
background-size: cover;
|
|
&__right {
|
|
display: grid;
|
|
align-items: end;
|
|
grid-template-columns: 1fr 2.38fr;
|
|
column-gap: fluid-clamp(40px, 65px, 768px);
|
|
max-width: 500px;
|
|
}
|
|
}
|
|
&-title {
|
|
color: #fff;
|
|
}
|
|
&-descr {
|
|
margin-top: 25px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
&-stores {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 40px;
|
|
}
|
|
&-store {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60px;
|
|
padding: 0 25px 0 20px;
|
|
border-radius: 100px;
|
|
color: #000;
|
|
background-color: #fff;
|
|
transition: background-color 0.25s ease;
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
&__icon {
|
|
display: flex;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
&__name {
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
&-qrcode {
|
|
display: flex;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&-img {
|
|
display: flex;
|
|
margin-bottom: fluid-clamp(-25px, -65px);
|
|
overflow: hidden;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.getapp {
|
|
&-body {
|
|
grid-template-columns: 1fr 1.2fr;
|
|
&__right {
|
|
grid-template-columns: 1fr 2.5fr;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
&-stores {
|
|
flex-wrap: wrap;
|
|
}
|
|
&-store {
|
|
height: 50px;
|
|
padding: 0 20px 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.getapp {
|
|
&-body {
|
|
grid-template-columns: 1.2fr 1fr;
|
|
&__right {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
&-qrcode {
|
|
display: none;
|
|
}
|
|
&-img {
|
|
width: fluid-clamp(240px, 360px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.getapp {
|
|
&-body {
|
|
grid-template-columns: 1fr;
|
|
&__right {
|
|
display: flex;
|
|
justify-content: center;
|
|
max-width: unset;
|
|
margin: 40px 0 0;
|
|
}
|
|
}
|
|
&-img {
|
|
aspect-ratio: 240/260;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.getapp {
|
|
&-body {
|
|
&__right {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
&-descr {
|
|
margin-top: 15px;
|
|
font-size: 15px;
|
|
}
|
|
&-stores {
|
|
margin-top: 25px;
|
|
}
|
|
&-store {
|
|
height: 40px;
|
|
padding: 0 15px 0 12px;
|
|
&__icon {
|
|
width: 20px;
|
|
}
|
|
&__name {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.footer {
|
|
margin-top: var(--space-section);
|
|
padding-block: fluid-clamp(35px, 65px);
|
|
border-top-left-radius: var(--radius-lg);
|
|
border-top-right-radius: var(--radius-lg);
|
|
background-color: var(--color-grey);
|
|
&-top {
|
|
&__body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.75fr 220px;
|
|
column-gap: fluid-clamp(60px, 120px, 768px);
|
|
}
|
|
}
|
|
&-logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
&__link {
|
|
img {
|
|
width: 122px;
|
|
}
|
|
}
|
|
}
|
|
&-info {
|
|
max-width: 240px;
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
color: var(--color-grey-dark);
|
|
p {
|
|
margin-bottom: 1.25em;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
&-contacts {
|
|
grid-column: 1/2;
|
|
grid-row: 2/5;
|
|
margin-top: 25px;
|
|
line-height: 1.2;
|
|
&__email {
|
|
display: flex;
|
|
font-size: 14px;
|
|
&-link {
|
|
color: var(--color-red);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
}
|
|
}
|
|
&__map {
|
|
display: flex;
|
|
font-size: 12px;
|
|
margin-top: 15px;
|
|
&-link {
|
|
position: relative;
|
|
padding-left: 1.25em;
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
left: 0;
|
|
top: 0;
|
|
mask: var(--icon-placemark) center no-repeat;
|
|
-webkit-mask: var(--icon-placemark) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-dark);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
&:hover {
|
|
color: var(--color-red);
|
|
&::before {
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-socials {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
max-width: 200px;
|
|
margin-top: 30px;
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
aspect-ratio: 1;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(209, 216, 221, 0.5);
|
|
background-color: #fff;
|
|
transition: border-color 0.25s ease;
|
|
&:hover {
|
|
border-color: #d1d1d1;
|
|
}
|
|
img {
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
}
|
|
}
|
|
}
|
|
&-menu {
|
|
grid-row: 1/3;
|
|
&__list {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: fluid-clamp(40px, 60px, 768px);
|
|
row-gap: fluid-clamp(30px, 45px, 768px);
|
|
> li > a {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
&__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
&__link {
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
&[href]:hover {
|
|
color: #8a8f9f;
|
|
}
|
|
&:not([href]) {
|
|
cursor: default;
|
|
}
|
|
}
|
|
&__submenu {
|
|
margin-top: 10px;
|
|
a {
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
&__submenu-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
&-stores {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
justify-content: start;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: fluid-clamp(30px, 50px, 768px);
|
|
grid-column: 2/4;
|
|
}
|
|
&-store {
|
|
position: relative;
|
|
display: flex;
|
|
width: 128px;
|
|
aspect-ratio: 178/50;
|
|
transition: opacity 0.25s ease;
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
&-actions {
|
|
grid-row: 1/3;
|
|
}
|
|
&-qrcode {
|
|
&__img {
|
|
display: flex;
|
|
max-width: 175px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ececec;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&__info {
|
|
margin-top: 25px;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
&-buttons {
|
|
display: grid;
|
|
row-gap: 6px;
|
|
max-width: 265px;
|
|
margin-top: 25px;
|
|
.btn {
|
|
height: 44px;
|
|
font-size: 16px;
|
|
}
|
|
&__login-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
color: var(--color-grey-text);
|
|
background-color: #dbdfec;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-text);
|
|
}
|
|
&:hover {
|
|
background-color: #cacdd9;
|
|
}
|
|
}
|
|
}
|
|
&-bottom {
|
|
margin-top: fluid-clamp(35px, 65px);
|
|
padding-top: 30px;
|
|
border-top: 1px solid #e5e8f4;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
&__body {
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 1.75fr 1fr;
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
&-details {
|
|
color: var(--color-grey-dark);
|
|
}
|
|
&-copyright {
|
|
font-size: 14px;
|
|
}
|
|
&-madein {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
&__icon {
|
|
display: flex;
|
|
width: 1.2em;
|
|
aspect-ratio: 1;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
&-registry {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
&__icon {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
}
|
|
&__text {
|
|
max-width: 265px;
|
|
margin-left: 10px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
&-links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
column-gap: 20px;
|
|
&__list {
|
|
display: grid;
|
|
row-gap: 8px;
|
|
}
|
|
&__link {
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-dark);
|
|
}
|
|
}
|
|
}
|
|
&-developer {
|
|
text-align: right;
|
|
&__link {
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
span {
|
|
color: var(--color-red);
|
|
}
|
|
&:hover {
|
|
color: var(--color-dark);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.footer-bottom__body {
|
|
grid-template-columns: calc(38vw - 105px) 1.75fr 1fr;
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.footer {
|
|
&-top {
|
|
&__body {
|
|
grid-template-columns: 1fr 1.5fr;
|
|
}
|
|
}
|
|
&-qrcode {
|
|
display: none;
|
|
}
|
|
&-info {
|
|
max-width: unset;
|
|
}
|
|
&-contacts {
|
|
grid-row: 2/3;
|
|
margin-top: 30px;
|
|
}
|
|
&-actions {
|
|
grid-column: 1/2;
|
|
grid-row: 3/4;
|
|
margin-top: 30px;
|
|
}
|
|
&-buttons {
|
|
margin-top: 0;
|
|
}
|
|
&-menu {
|
|
grid-row: 1/4;
|
|
}
|
|
&-stores {
|
|
grid-column: 1/-1;
|
|
}
|
|
&-bottom {
|
|
margin-top: 30px;
|
|
&__body {
|
|
grid-template-columns: 1fr 1.5fr;
|
|
column-gap: fluid-clamp(60px, 120px, 768px);
|
|
}
|
|
}
|
|
&-links {
|
|
column-gap: 40px;
|
|
}
|
|
&-developer {
|
|
order: 3;
|
|
margin-top: 30px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.footer {
|
|
&-top {
|
|
&__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
&-buttons {
|
|
max-width: unset;
|
|
}
|
|
&-menu {
|
|
margin-top: 30px;
|
|
&__list {
|
|
display: block;
|
|
> li {
|
|
align-items: center;
|
|
border-bottom: 1px solid #e5e7ef;
|
|
&:first-child {
|
|
border-top: 1px solid #e5e7ef;
|
|
}
|
|
&.has-children {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
}
|
|
&.is-open {
|
|
> button {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
> a {
|
|
padding: 12px 0;
|
|
}
|
|
}
|
|
}
|
|
&__item {
|
|
flex-direction: row;
|
|
}
|
|
&__submenu-toggle {
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: auto 0;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: 10px;
|
|
-webkit-mask-size: 10px;
|
|
background-color: var(--color-text);
|
|
transition: transform 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
&__submenu {
|
|
grid-column: 1/-1;
|
|
margin-top: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
height: 6px;
|
|
}
|
|
li {
|
|
font-size: 15px;
|
|
}
|
|
a {
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
}
|
|
&-socials {
|
|
max-width: unset;
|
|
}
|
|
&-bottom__body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&-links {
|
|
justify-content: unset;
|
|
}
|
|
&-details {
|
|
order: 2;
|
|
padding-top: 30px;
|
|
margin-top: 30px;
|
|
border-top: 1px solid #e5e8f4
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.footer {
|
|
&-stores {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
&-links {
|
|
flex-direction: column;
|
|
row-gap: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.blog {
|
|
margin-top: 145px;
|
|
&-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
padding-block: fluid-clamp(25px, 50px);
|
|
padding-inline: fluid-clamp(20px, 60px);
|
|
column-gap: fluid-clamp(20px, 80px);
|
|
border-radius: var(--radius-sm);
|
|
background: linear-gradient(198deg, #fef8ea 0%, #ffeff0 100%);
|
|
}
|
|
&-info {
|
|
max-width: 680px;
|
|
}
|
|
&-descr {
|
|
margin-top: fluid-clamp(15px, 30px);
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
}
|
|
&-logo {
|
|
width: fluid-clamp(48px, 112px);
|
|
margin-right: 40px;
|
|
}
|
|
&-slider {
|
|
margin-top: fluid-clamp(25px, 70px);
|
|
}
|
|
&-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 20px;
|
|
&__info {
|
|
padding-right: fluid-clamp(20px, 60px, 768px);
|
|
}
|
|
&__tags {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
column-gap: 6px;
|
|
}
|
|
&__tag {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #798079;
|
|
background-color: #f6f6f6;
|
|
}
|
|
&__title {
|
|
margin-top: 20px;
|
|
font-size: var(--fs-h3-lg);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
&-link {
|
|
display: block;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&__descr {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
&__read {
|
|
margin-top: 30px;
|
|
&-btn {
|
|
border-color: rgba(185, 185, 185, 0.5);
|
|
}
|
|
}
|
|
&__img {
|
|
align-self: start;
|
|
&-link {
|
|
display: block;
|
|
aspect-ratio: 1024/580;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.blog {
|
|
margin-top: fluid-clamp(75px, 125px);
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.blog {
|
|
&-logo {
|
|
margin-right: 0;
|
|
}
|
|
&-item {
|
|
&__img {
|
|
margin-top: 55px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.blog {
|
|
&-slider {
|
|
&__container {
|
|
border-bottom-left-radius: var(--radius-sm);
|
|
border-bottom-right-radius: var(--radius-sm);
|
|
}
|
|
}
|
|
&-item {
|
|
grid-template-columns: 1fr;
|
|
&__info {
|
|
padding-right: 0;
|
|
}
|
|
&__img {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.blog {
|
|
&-descr {
|
|
font-size: 15px;
|
|
}
|
|
&-item {
|
|
&__tag {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
}
|
|
&__title {
|
|
margin-top: 15px;
|
|
}
|
|
&__descr {
|
|
margin-top: 12px;
|
|
font-size: 15px;
|
|
}
|
|
&__read {
|
|
margin-top: 20px;
|
|
}
|
|
&__img {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.blog-item__img-link:hover img {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
|
|
.content {
|
|
> *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
> *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
h1 + h2,
|
|
h1 + h3,
|
|
h1 + h4 {
|
|
margin-top: 0;
|
|
}
|
|
h1 {
|
|
margin-bottom: fluid-clamp(25px, 70px);
|
|
text-align: center;
|
|
}
|
|
h2 + h3,
|
|
h3 + h4 {
|
|
margin-top: 0;
|
|
}
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
margin-top: fluid-clamp(30px, 60px);
|
|
margin-bottom: fluid-clamp(18px, 25px);
|
|
font-weight: 600;
|
|
}
|
|
h2 {
|
|
font-size: var(--fs-h2-sm);
|
|
}
|
|
h3,
|
|
h4 {
|
|
font-size: var(--fs-h3-sm);
|
|
line-height: 1.3;
|
|
}
|
|
p,
|
|
ul,
|
|
ol {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
li {
|
|
position: relative;
|
|
padding-left: 1.5em;
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
ul,
|
|
ol {
|
|
margin-block: 0.5em;
|
|
}
|
|
p {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
ul > li::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 0.3em;
|
|
aspect-ratio: 1;
|
|
top: 0.6em;
|
|
left: 0.6em;
|
|
border-radius: 50%;
|
|
background-color: var(--color-red);
|
|
}
|
|
ol {
|
|
counter-reset: num;
|
|
> li {
|
|
counter-increment: num;
|
|
&::before {
|
|
content: counter(num) '.';
|
|
position: absolute;
|
|
width: 1.25em;
|
|
left: 0;
|
|
top: 0;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
b,
|
|
strong {
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
color: var(--color-red);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
}
|
|
img {
|
|
margin-block: 1.75em;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.table-wrapper {
|
|
margin-block: 1.75em;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
th,
|
|
td {
|
|
padding: 15px 20px;
|
|
border: 1px solid #eee;
|
|
}
|
|
th {
|
|
text-align: left;
|
|
color: var(--color-dark);
|
|
background-color: var(--color-light);
|
|
}
|
|
}
|
|
&--sm {
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
margin-top: fluid-clamp(20px, 40px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.content {
|
|
.table-wrapper {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.content {
|
|
h3,
|
|
h4 {
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.content {
|
|
.table-wrapper {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
table {
|
|
th,
|
|
td {
|
|
padding: 10px 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.article {
|
|
&-goback {
|
|
display: flex;
|
|
margin-top: fluid-clamp(15px, 40px);
|
|
margin-bottom: 20px;
|
|
&__btn {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: var(--color-text);
|
|
transition: color 0.25s ease;
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 2.55em;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
&::before {
|
|
margin-right: 10px;
|
|
border-color: #f0f0f0;
|
|
background-color: #fff;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-color: transparent;
|
|
background: var(--icon-angle-left) center no-repeat;
|
|
background-size: 0.6em;
|
|
}
|
|
&:hover {
|
|
&::before {
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-title {
|
|
text-align: center;
|
|
}
|
|
&-img {
|
|
aspect-ratio: 1280/440;
|
|
margin-top: fluid-clamp(25px, 40px);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
&-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 30px;
|
|
margin-top: 30px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
&-date {
|
|
font-size: 15px;
|
|
}
|
|
&-tags {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
&__item {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #798079;
|
|
background-color: #f6f6f6;
|
|
}
|
|
}
|
|
&-body {
|
|
display: grid;
|
|
align-items: start;
|
|
grid-template-columns: 1fr 300px;
|
|
column-gap: fluid-clamp(40px, 125px, 1024px);
|
|
margin-top: fluid-clamp(40px, 60px);
|
|
&.no-toc {
|
|
grid-template-columns: 1fr;
|
|
margin-top: fluid-clamp(30px, 60px);
|
|
}
|
|
}
|
|
&-main {
|
|
min-width: 0;
|
|
}
|
|
&-sidebar {
|
|
position: sticky;
|
|
top: 112px;
|
|
}
|
|
&-toc {
|
|
padding: 25px 30px;
|
|
background-color: var(--color-light);
|
|
border-radius: var(--radius-sm);
|
|
&__title {
|
|
font-size: var(--fs-h3-sm);
|
|
line-height: 1.2;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
&__list {
|
|
display: grid;
|
|
row-gap: 18px;
|
|
margin-top: 25px;
|
|
max-height: calc(100vh - 260px);
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
&.is-scrollable {
|
|
padding-right: 10px;
|
|
scrollbar-width: auto;
|
|
@-moz-document url-prefix() {
|
|
scrollbar-width: thin;
|
|
}
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: #f0f0f0;
|
|
border-radius: 5px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #d9d9d9;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
&__item {
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
}
|
|
&__link {
|
|
color: var(--color-text);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.article {
|
|
&-sidebar {
|
|
top: fluid-clamp(70px, 90px);
|
|
}
|
|
&-toc {
|
|
&__list {
|
|
max-height: calc(100vh - 240px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.article {
|
|
&-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&-sidebar {
|
|
position: unset;
|
|
top: unset;
|
|
order: -1;
|
|
margin-bottom: fluid-clamp(40px, 60px);
|
|
}
|
|
&-toc {
|
|
&__list {
|
|
max-height: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.article {
|
|
&-img {
|
|
aspect-ratio: 1280/720;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.article {
|
|
&-goback {
|
|
&__btn {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&-meta {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin-top: 20px;
|
|
}
|
|
&-tags {
|
|
&__item {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
&-date {
|
|
order: 2;
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
&:first-child:last-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
&-toc {
|
|
padding: 20px;
|
|
&__list {
|
|
row-gap: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
&__item {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.requirements {
|
|
margin-top: var(--space-section);
|
|
&-title {
|
|
text-align: center;
|
|
}
|
|
&-main {
|
|
margin-top: 45px;
|
|
&__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--items), 1fr);
|
|
gap: 20px;
|
|
}
|
|
&__item {
|
|
display: grid;
|
|
align-content: center;
|
|
grid-template-columns: auto 1fr;
|
|
column-gap: 0.5em;
|
|
min-height: calc(2.6em + 24px);
|
|
padding: 12px 20px;
|
|
line-height: 1.3;
|
|
border-radius: 10px;
|
|
background-color: #f5f5fa;
|
|
&::before {
|
|
content: '';
|
|
position: relative;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0.15em;
|
|
background: var(--icon-checkmark) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&:has(p) {
|
|
align-content: start;
|
|
padding-block: 20px;
|
|
strong {
|
|
display: block;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-docs {
|
|
margin-top: 60px;
|
|
&__title {
|
|
font-size: fluid-clamp(20px, 30px);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
&__list {
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-template-columns: auto auto;
|
|
column-gap: fluid-clamp(40px, 120px, 768px);
|
|
row-gap: 15px;
|
|
margin-top: 40px;
|
|
counter-reset: num;
|
|
}
|
|
&__item {
|
|
position: relative;
|
|
padding-left: 1.85em;
|
|
line-height: 1.3;
|
|
counter-increment: num;
|
|
&::before {
|
|
content: counter(num);
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.requirements {
|
|
&-main {
|
|
margin-top: 35px;
|
|
&__list {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 8px;
|
|
}
|
|
&__item {
|
|
min-height: unset;
|
|
padding: 15px 20px;
|
|
&:has(p) {
|
|
padding-block: 15px;
|
|
}
|
|
}
|
|
}
|
|
&-docs {
|
|
margin-top: 45px;
|
|
&__list {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.requirements {
|
|
&-main {
|
|
margin-top: 25px;
|
|
}
|
|
&-docs {
|
|
margin-top: 35px;
|
|
&__list {
|
|
row-gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.cities {
|
|
margin-top: var(--space-section);
|
|
&-title {
|
|
text-align: center;
|
|
}
|
|
&-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 45px;
|
|
gap: 10px;
|
|
}
|
|
&-item {
|
|
display: flex;
|
|
min-width: 0;
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
&__link {
|
|
padding: 20px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: 100px;
|
|
border: 1px solid #e2e2e2;
|
|
color: var(--color-text);
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
&:hover {
|
|
color: #fff;
|
|
border-color: var(--color-red);
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
&.is-active a {
|
|
color: #fff;
|
|
border-color: var(--color-red);
|
|
background-color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.cities {
|
|
&-item {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.cities {
|
|
&-item {
|
|
&__link {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.cities {
|
|
&-list {
|
|
margin-top: 35px;
|
|
gap: 8px;
|
|
}
|
|
&-item {
|
|
&__link {
|
|
padding: 12px 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.cities {
|
|
&-list {
|
|
margin-top: 25px;
|
|
}
|
|
&-item {
|
|
&__link {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.jobs {
|
|
margin-top: var(--space-section);
|
|
&-body {
|
|
padding-top: fluid-clamp(25px, 60px);
|
|
padding-bottom: fluid-clamp(35px, 80px);
|
|
padding-inline: fluid-clamp(20px, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--color-red);
|
|
}
|
|
&-title {
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
&-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 45px;
|
|
gap: 10px;
|
|
}
|
|
&-item {
|
|
display: flex;
|
|
min-width: 0;
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
&__link {
|
|
padding: 20px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
border-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
&.is-active a {
|
|
color: var(--color-red);
|
|
border-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.jobs {
|
|
&-item {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.jobs {
|
|
&-item {
|
|
&__link {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.jobs {
|
|
&-list {
|
|
margin-top: 35px;
|
|
gap: 8px;
|
|
}
|
|
&-item {
|
|
&__link {
|
|
padding: 12px 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.jobs {
|
|
&-list {
|
|
margin-top: 25px;
|
|
}
|
|
&-item {
|
|
&__link {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.news {
|
|
&-grid {
|
|
display: grid;
|
|
row-gap: fluid-clamp(30px, 60px);
|
|
}
|
|
&-item {
|
|
display: grid;
|
|
grid-template-columns: fluid-clamp(300px, 414px, 768px) 1fr;
|
|
column-gap: 40px;
|
|
&__img {
|
|
&-link {
|
|
display: block;
|
|
aspect-ratio: 768/435;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
&__date {
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
}
|
|
&__title {
|
|
margin-top: 15px;
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
&-link {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
width: fit-content;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&__descr {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-top: 15px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
&__read {
|
|
margin-top: 25px;
|
|
&-btn {
|
|
border-color: rgba(185, 185, 185, 0.5);
|
|
}
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: fluid-clamp(30px, 60px);
|
|
text-align: center;
|
|
&.is-hidden {
|
|
display: none;
|
|
}
|
|
&__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.news {
|
|
&-item {
|
|
column-gap: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.news {
|
|
&-item {
|
|
grid-template-columns: 1fr;
|
|
&__info {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
&-showmore {
|
|
&__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.news {
|
|
&-item {
|
|
&__info {
|
|
margin-top: 20px;
|
|
}
|
|
&__date {
|
|
font-size: 13px;
|
|
}
|
|
&__descr {
|
|
font-size: 15px;
|
|
}
|
|
&__read {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.news {
|
|
&-item__img-link:hover img {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.download {
|
|
padding-bottom: var(--space-section);
|
|
padding-top: 165px;
|
|
text-align: center;
|
|
background-image:
|
|
url(../img/content/bag.webp),
|
|
url(../img/content/car.webp),
|
|
linear-gradient(145deg, #f5f5f9 50%, #fff5e7 100%);
|
|
background-repeat: no-repeat;
|
|
background-position:
|
|
calc(50% - 80px - 30vw) 30%,
|
|
calc(50% + 280px + 20vw) 63%,
|
|
center;
|
|
background-size:
|
|
fluid-clamp(232px, 280px, 768px) auto,
|
|
fluid-clamp(450px, 540px, 768px) auto,
|
|
cover;
|
|
&-descr,
|
|
&-info {
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
&-descr {
|
|
margin-top: 25px;
|
|
}
|
|
&-info {
|
|
margin-top: fluid-clamp(30px, 90px);
|
|
}
|
|
&-qrcode {
|
|
width: fluid-clamp(256px, 330px);
|
|
margin-top: fluid-clamp(30px, 60px);
|
|
margin-inline: auto;
|
|
padding: var(--radius-sm);
|
|
background-color: #fff;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid #ececec;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&-stores {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: fluid-clamp(35px, 50px);
|
|
}
|
|
&-store {
|
|
position: relative;
|
|
display: flex;
|
|
width: fluid-clamp(160px, 178px);
|
|
aspect-ratio: 178/50;
|
|
transition: opacity 0.25s ease;
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-min(1920px) {
|
|
.download {
|
|
background-position: calc(50% - 660px) 30%, calc(50% + 660px) 63%, center;
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.download {
|
|
padding-top: fluid-clamp(80px, 145px);
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.download {
|
|
min-height: 100vh;
|
|
background: linear-gradient(145deg, #f5f5f9 50%, #fff5e7 100%);
|
|
&-stores {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.download {
|
|
&-descr,
|
|
&-info {
|
|
font-size: 15px;
|
|
}
|
|
&-descr {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.ymaps3--map-container {
|
|
.ymaps3--map-copyrights,
|
|
.ymaps3--controls_bottom {
|
|
display: none;
|
|
}
|
|
.ymaps3--controls {
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
|
|
.contacts {
|
|
&-body {
|
|
display: grid;
|
|
align-items: stretch;
|
|
grid-template-columns: 1fr 1.42fr;
|
|
column-gap: 20px;
|
|
min-height: fluid-clamp(400px, 460px, 1024px);
|
|
}
|
|
&-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: fluid-clamp(25px, 50px);
|
|
padding-bottom: fluid-clamp(25px, 60px);
|
|
padding-inline: fluid-clamp(20px, 60px);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
&__title {
|
|
font-size: var(--fs-title-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
&__list {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
margin-top: fluid-clamp(20px, 50px);
|
|
margin-bottom: auto;
|
|
}
|
|
&__item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
&::before {
|
|
content: '';
|
|
position: relative;
|
|
display: block;
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
flex-shrink: 0;
|
|
margin-right: 12px;
|
|
top: 0.15em;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&--tel {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 700;
|
|
&::before {
|
|
background-image: var(--icon-phone);
|
|
}
|
|
a {
|
|
color: var(--color-dark);
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
&--address {
|
|
&::before {
|
|
background-image: var(--icon-location);
|
|
}
|
|
}
|
|
&--email {
|
|
&::before {
|
|
background-image: var(--icon-email);
|
|
}
|
|
a {
|
|
color: var(--color-red);
|
|
&:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
}
|
|
}
|
|
&-link {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.25s ease;
|
|
}
|
|
}
|
|
&__download {
|
|
margin-top: fluid-clamp(25px, 60px);
|
|
}
|
|
}
|
|
&-map {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--color-light);
|
|
&__container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
&__marker {
|
|
transform: translate(-50%, -100%);
|
|
&.is-open {
|
|
transform: translate(-50%, calc(-100% - 14px));
|
|
.contacts-map__marker-button {
|
|
display: none;
|
|
}
|
|
.contacts-map__popup {
|
|
display: block;
|
|
}
|
|
}
|
|
&-button {
|
|
display: block;
|
|
width: 60px;
|
|
height: 68px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
&-icon {
|
|
display: block;
|
|
width: 60px;
|
|
height: 68px;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
&__popup {
|
|
position: relative;
|
|
display: none;
|
|
width: max-content;
|
|
max-width: 260px;
|
|
min-width: 180px;
|
|
padding: 10px 36px 10px 12px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: #fff;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
&-title {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
&-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: var(--color-text);
|
|
}
|
|
&-close {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: #999;
|
|
cursor: pointer;
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: #222;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.contacts {
|
|
&-body {
|
|
grid-template-columns: 1fr;
|
|
min-height: unset;
|
|
}
|
|
&-map {
|
|
height: fluid-clamp(240px, 460px);
|
|
order: -1;
|
|
}
|
|
&-card {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.contacts {
|
|
&-card {
|
|
&__item {
|
|
&::before {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.contacts {
|
|
&-card {
|
|
margin-top: 15px;
|
|
&__list {
|
|
row-gap: 15px;
|
|
}
|
|
&__item {
|
|
&::before {
|
|
width: 18px;
|
|
}
|
|
}
|
|
&__download {
|
|
&-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.about {
|
|
&-hero {
|
|
display: grid;
|
|
grid-template-columns: 1.25fr 1fr;
|
|
column-gap: fluid-clamp(40px, 180px, 768px);
|
|
&__info {
|
|
margin-top: fluid-clamp(50px, 80px, 1024px);
|
|
font-size: var(--fs-title-lg);
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
}
|
|
&-stats {
|
|
--gap: #{fluid-clamp(40px, 135px, 1024px)};
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
column-gap: var(--gap);
|
|
margin-top: fluid-clamp(20px, 80px);
|
|
&__item {
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 1px;
|
|
height: 25px;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: calc(var(--gap) / -2);
|
|
margin: auto 0;
|
|
background-color: #d8d8e8;
|
|
}
|
|
&:last-child::after {
|
|
display: none;
|
|
}
|
|
&-value {
|
|
font-size: fluid-clamp(32px, 50px);
|
|
line-height: 1.1;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
color: var(--color-dark);
|
|
span {
|
|
font-size: fluid-clamp(18px, 24px);
|
|
}
|
|
}
|
|
&-text {
|
|
margin-top: 12px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
}
|
|
&-cards {
|
|
display: grid;
|
|
row-gap: 40px;
|
|
margin-top: var(--space-section);
|
|
}
|
|
&-card {
|
|
display: grid;
|
|
grid-template-columns: 1.7fr 1fr;
|
|
column-gap: 40px;
|
|
padding-block: fluid-clamp(25px, 50px);
|
|
padding-inline: fluid-clamp(20px, 50px);
|
|
border-radius: var(--radius-lg);
|
|
&--first {
|
|
background: var(--gradient-grey);
|
|
}
|
|
&--second {
|
|
grid-template-columns: 1fr auto;
|
|
border: 1px solid #ededed;
|
|
}
|
|
&__title {
|
|
margin-bottom: fluid-clamp(18px, 25px);
|
|
font-size: var(--fs-h2-sm);
|
|
font-weight: 600;
|
|
}
|
|
&__img,
|
|
&__logo {
|
|
grid-column: 2/3;
|
|
grid-row: 1/4;
|
|
}
|
|
&__img {
|
|
display: flex;
|
|
align-self: center;
|
|
}
|
|
&__logo {
|
|
padding-top: 10px;
|
|
img {
|
|
width: fluid-clamp(100px, 135px, 768px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.about {
|
|
&-hero {
|
|
grid-template-columns: 1fr;
|
|
&__img {
|
|
width: fluid-clamp(345px, 600px, 375px, 1024px);
|
|
margin-inline: auto;
|
|
order: -1;
|
|
}
|
|
}
|
|
&-stats {
|
|
grid-template-columns: 1fr 1fr;
|
|
row-gap: 40px;
|
|
&__item::after {
|
|
display: none;
|
|
}
|
|
}
|
|
&-cards {
|
|
row-gap: 20px;
|
|
}
|
|
&-card {
|
|
column-gap: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.about {
|
|
&-hero {
|
|
&__info {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
&-stats {
|
|
row-gap: 30px;
|
|
}
|
|
&-card {
|
|
grid-template-columns: 1fr;
|
|
&__logo {
|
|
display: none;
|
|
}
|
|
&__img {
|
|
grid-column: unset;
|
|
grid-row: unset;
|
|
margin: 5px 0 25px;
|
|
}
|
|
&__content {
|
|
order: 3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.about {
|
|
&-hero {
|
|
&__info {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
&-stats {
|
|
column-gap: 30px;
|
|
row-gap: 20px;
|
|
&__item-text {
|
|
margin-top: 8px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
&-cards {
|
|
row-gap: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.features {
|
|
margin-top: var(--space-section);
|
|
&-title {
|
|
text-align: center;
|
|
}
|
|
&-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 45px;
|
|
}
|
|
&-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
padding-block: fluid-clamp(20px, 40px);
|
|
padding-inline: fluid-clamp(20px, 45px);
|
|
border-radius: var(--radius-lg);
|
|
&--first {
|
|
border: 1px solid #ededed;
|
|
.features-card__img {
|
|
width: fluid-clamp(90px, 160px);
|
|
margin-right: fluid-clamp(-20px, -45px);
|
|
margin-block: fluid-clamp(-20px, -40px);
|
|
}
|
|
}
|
|
&--second {
|
|
background: linear-gradient(160deg, #29292d 0%, #083743 100%);
|
|
.features-card__title,
|
|
.features-card__descr {
|
|
color: #fff;
|
|
}
|
|
.features-card__img {
|
|
width: fluid-clamp(75px, 145px);
|
|
}
|
|
}
|
|
&--third {
|
|
grid-template-columns: 1fr;
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
background: var(--gradient-grey);
|
|
.features-card__img {
|
|
align-items: flex-end;
|
|
margin-top: fluid-clamp(20px, 40px);
|
|
margin-bottom: fluid-clamp(-20px, -40px);
|
|
}
|
|
}
|
|
&__title {
|
|
font-size: fluid-clamp(16px, 30px);
|
|
line-height: 1.1;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
&__descr {
|
|
margin-top: fluid-clamp(12px, 30px);
|
|
padding-right: fluid-clamp(10px, 40px, 1024px);
|
|
line-height: 1.3;
|
|
}
|
|
&__img {
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-bottom {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
&-slider {
|
|
min-width: 0;
|
|
&__wrapper.is-grid {
|
|
display: grid;
|
|
align-items: stretch;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: fluid-clamp(140px, 225px);
|
|
padding: 25px;
|
|
line-height: 1.2;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid #ededed;
|
|
&__top {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
}
|
|
&__title {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
}
|
|
&__icon {
|
|
display: flex;
|
|
width: fluid-clamp(30px, 50px);
|
|
aspect-ratio: 1;
|
|
}
|
|
&__descr {
|
|
margin-top: 20px;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
&-download {
|
|
display: flex;
|
|
width: 195px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
&__link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 25px;
|
|
border-radius: var(--radius-lg);
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
transition: background-color 0.25s ease;
|
|
&:hover {
|
|
background-color: var(--color-red-dark);
|
|
}
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: fluid-clamp(36px, 50px);
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 13px;
|
|
height: 13px;
|
|
background: var(--icon-arrow-up) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.features {
|
|
&-card {
|
|
&__descr {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
&-bottom {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: slide-size(2.5, 20px);
|
|
}
|
|
}
|
|
&-item {
|
|
&__descr {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
&-download {
|
|
display: block;
|
|
width: unset;
|
|
margin-top: 20px;
|
|
&__link {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.features {
|
|
&-cards {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 35px;
|
|
}
|
|
&-card {
|
|
&--third {
|
|
grid-column: unset;
|
|
grid-row: unset;
|
|
}
|
|
&__descr {
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&-slider {
|
|
&__wrapper.is-grid {
|
|
grid-auto-columns: slide-size(1.5, 15px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.features {
|
|
&-cards {
|
|
row-gap: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
&-card {
|
|
&__descr {
|
|
margin-top: 15px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
&-bottom {
|
|
margin-top: 15px;
|
|
}
|
|
&-item {
|
|
padding: 20px;
|
|
&__descr {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
&-download {
|
|
margin-top: 15px;
|
|
&__link {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.vacancies {
|
|
&-img {
|
|
aspect-ratio: 1280/300;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-md);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
&-subtitle {
|
|
margin-top: fluid-clamp(40px, 80px);
|
|
font-size: var(--fs-h2-sm);
|
|
text-align: center;
|
|
span {
|
|
display: inline-block;
|
|
width: 2ch;
|
|
margin-right: -2ch;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
&-filter {
|
|
position: relative;
|
|
max-width: 430px;
|
|
margin: 25px auto 0;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
&__trigger {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 15px;
|
|
width: 100%;
|
|
height: 64px;
|
|
padding-inline: 20px;
|
|
background-color: #fff;
|
|
border: 1px solid #efefef;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: border-color 0.25s ease;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-text);
|
|
transition: transform 0.25s ease;
|
|
}
|
|
}
|
|
&__value {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-text);
|
|
}
|
|
&__options {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
border: 1px solid #ccc;
|
|
transition: opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
&__link {
|
|
display: block;
|
|
padding: 15px 20px;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: color 0.25s ease, background-color 0.25s ease;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--color-grey);
|
|
}
|
|
}
|
|
&__option {
|
|
&.is-selected a {
|
|
background-color: var(--color-grey);
|
|
}
|
|
}
|
|
&.is-open {
|
|
.vacancies-filter__trigger {
|
|
border-color: #ccc;
|
|
&::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
.vacancies-filter__options {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
&-list {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
margin-top: fluid-clamp(30px, 60px, 768px);
|
|
transition: opacity 0.25s ease;
|
|
&.is-loading {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&-item {
|
|
border-radius: var(--radius-md);
|
|
background-color: #fafaff;
|
|
border: 1px solid transparent;
|
|
transition: background-color 0.25s ease, border-color 0.25s ease;
|
|
&__header {
|
|
position: relative;
|
|
padding: 25px 80px 25px 25px;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
top: 25px;
|
|
right: 25px;
|
|
background: var(--icon-angle-round) center no-repeat;
|
|
background-size: contain;
|
|
transition: transform 0.25s ease;
|
|
}
|
|
}
|
|
&__title {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
&__descr {
|
|
margin-top: 15px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
&__city {
|
|
position: relative;
|
|
margin-top: 15px;
|
|
padding-left: 1.25em;
|
|
color: var(--color-dark);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0.1em;
|
|
left: 0;
|
|
background: var(--icon-location-alt) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
&__body {
|
|
position: relative;
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
height: 1px;
|
|
top: 0;
|
|
left: 25px;
|
|
right: 25px;
|
|
background-color: #ededed;
|
|
}
|
|
}
|
|
&__content {
|
|
padding: 25px;
|
|
}
|
|
&__respond {
|
|
padding: 15px 25px 30px;
|
|
}
|
|
&.is-active {
|
|
border-color: #ededed;
|
|
background-color: transparent;
|
|
.vacancies-item__header::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
.vacancies-item__body {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: fluid-clamp(30px, 60px, 768px);
|
|
text-align: center;
|
|
transition: opacity 0.25s ease;
|
|
&.is-loading {
|
|
opacity: 0;
|
|
}
|
|
&.is-hidden {
|
|
display: none;
|
|
}
|
|
&__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@include media-max($lg) {
|
|
.vacancies {
|
|
&-filter {
|
|
&__trigger {
|
|
height: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.vacancies {
|
|
&-filter {
|
|
max-width: unset;
|
|
&__trigger {
|
|
height: 56px;
|
|
}
|
|
&__link {
|
|
padding-block: 12px;
|
|
}
|
|
}
|
|
&-img {
|
|
aspect-ratio: 1280/560;
|
|
}
|
|
&-item {
|
|
&__respond {
|
|
padding-top: 10px;
|
|
&-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-showmore {
|
|
&__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.vacancies {
|
|
&-filter {
|
|
margin-top: 20px;
|
|
font-size: 15px;
|
|
&__trigger {
|
|
height: 50px;
|
|
&::after {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
&__link {
|
|
padding-block: 10px;
|
|
}
|
|
}
|
|
&-list {
|
|
row-gap: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
&-subtitle {
|
|
span {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&-item {
|
|
&__header {
|
|
padding: 20px 70px 20px 20px;
|
|
&::after {
|
|
width: 30px;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
}
|
|
&__descr {
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
}
|
|
&__city {
|
|
margin-top: 10px;
|
|
}
|
|
&__content {
|
|
padding: 20px;
|
|
}
|
|
&__respond {
|
|
padding: 5px 20px 25px;
|
|
}
|
|
}
|
|
&-showmore {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.feedback {
|
|
margin-top: var(--space-section);
|
|
&-body {
|
|
padding-top: fluid-clamp(25px, 60px);
|
|
padding-bottom: fluid-clamp(30px, 70px);
|
|
padding-inline: fluid-clamp(20px, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
}
|
|
&-descr {
|
|
margin-top: 25px;
|
|
line-height: 1.3;
|
|
}
|
|
&-form {
|
|
&__inputs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
margin-top: 40px;
|
|
}
|
|
&__file {
|
|
margin-top: 20px;
|
|
}
|
|
&__submit {
|
|
margin-top: 40px;
|
|
&-btn {
|
|
max-width: 312px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.feedback {
|
|
&-descr {
|
|
margin-top: 20px;
|
|
}
|
|
&-form {
|
|
&__inputs {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 8px;
|
|
margin-top: 30px;
|
|
}
|
|
&__submit {
|
|
&-btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.feedback {
|
|
&-descr {
|
|
margin-top: 12px;
|
|
}
|
|
&-form {
|
|
&__inputs {
|
|
margin-top: 20px;
|
|
}
|
|
&__file {
|
|
margin-top: 15px;
|
|
}
|
|
&__submit {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.info {
|
|
margin-top: var(--space-section);
|
|
&-title {
|
|
font-size: var(--fs-h2-sm);
|
|
}
|
|
&-body {
|
|
padding-top: fluid-clamp(25px, 50px);
|
|
padding-bottom: fluid-clamp(25px, 60px);
|
|
padding-inline: fluid-clamp(20px, 50px);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid #ededed;
|
|
}
|
|
&-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: fluid-clamp(20px, 50px);
|
|
row-gap: fluid-clamp(20px, 35px);
|
|
margin-top: fluid-clamp(20px, 35px);
|
|
&__row {
|
|
grid-column: 1/-1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.info {
|
|
&-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 260px 0 100px;
|
|
flex: 1;
|
|
&-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
&-title {
|
|
font-size: fluid-clamp(80px, 110px);
|
|
}
|
|
&-gohome {
|
|
margin-top: fluid-clamp(20px, 40px);
|
|
&__btn {
|
|
width: fluid-clamp(180px, 240px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.error {
|
|
margin-top: fluid-clamp(160px, 240px);
|
|
}
|
|
}
|
|
|
|
|
|
.cookie-consent {
|
|
--offset: 40px;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
opacity: 0;
|
|
bottom: var(--offset);
|
|
transform: translateY(calc(100% + var(--offset)));
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
&.is-active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
&__dialog {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: auto 1fr auto;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
column-gap: 20px;
|
|
padding: 20px;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-grey);
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
background: var(--icon-cookie) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
&__info {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
a {
|
|
color: var(--color-red);
|
|
transition: color 0.25s ease;
|
|
&:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
}
|
|
}
|
|
&__buttons {
|
|
display: flex;
|
|
column-gap: 15px;
|
|
.btn {
|
|
height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
&__accept-btn {
|
|
padding: 0 25px;
|
|
}
|
|
&__reject-btn {
|
|
color: var(--color-grey-dark);
|
|
&:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($xl) {
|
|
.cookie-consent {
|
|
--offset: 20px;
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.cookie-consent {
|
|
&__dialog {
|
|
align-items: start;
|
|
grid-template-columns: 1fr auto;
|
|
max-width: unset;
|
|
&::before {
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
}
|
|
}
|
|
&__info {
|
|
font-size: 12px;
|
|
}
|
|
&__buttons {
|
|
justify-self: start;
|
|
margin-top: 15px;
|
|
.btn {
|
|
height: 40px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&__reject-btn {
|
|
order: 2;
|
|
}
|
|
&__accept-btn {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.cookie-consent {
|
|
--offset: 15px;
|
|
&__dialog {
|
|
&::before {
|
|
width: 28px;
|
|
}
|
|
}
|
|
&__info {
|
|
font-size: 10px;
|
|
}
|
|
&__buttons {
|
|
.btn {
|
|
height: 30px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&__accept-btn {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.specs {
|
|
margin-top: var(--space-section);
|
|
scroll-margin-top: 140px;
|
|
&-body {
|
|
display: grid;
|
|
grid-template-columns: 300px 1fr;
|
|
column-gap: fluid-clamp(45px, 70px, 1024px);
|
|
}
|
|
&-tabs {
|
|
&__list {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
border-right: 1px solid #e8e6e6;
|
|
}
|
|
&__item {
|
|
position: relative;
|
|
padding-right: 30px;
|
|
font-size: 18px;
|
|
line-height: 1.1;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
cursor: pointer;
|
|
transition: color 0.25s ease;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
right: -1px;
|
|
width: 1px;
|
|
height: 100%;
|
|
opacity: 0;
|
|
background-color: var(--color-red);
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
&.is-active {
|
|
color: var(--color-red);
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-panel {
|
|
animation: fade-in 0.5s ease both;
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
&__title {
|
|
font-size: var(--fs-title-sm);
|
|
}
|
|
&__content {
|
|
margin-top: fluid-clamp(20px, 35px);
|
|
}
|
|
&__footnotes {
|
|
margin-top: fluid-clamp(20px, 35px);
|
|
font-size: 14px;
|
|
p {
|
|
margin-bottom: 1.25em;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($lg) {
|
|
.specs {
|
|
&-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
&-tabs {
|
|
display: flex;
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
&__list {
|
|
grid-auto-flow: column;
|
|
column-gap: 20px;
|
|
border-right: none;
|
|
border-bottom: 1px solid #e8e6e6;
|
|
}
|
|
&__item {
|
|
width: fluid-clamp(160px, 220px, 375px, 1024px);
|
|
padding: 0 0 20px;
|
|
font-size: 16px;
|
|
&::after {
|
|
right: 0;
|
|
top: unset;
|
|
bottom: -1px;
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
}
|
|
}
|
|
&-panels {
|
|
margin-top: fluid-clamp(25px, 50px, 375px, 1024px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($md) {
|
|
.specs {
|
|
&-tabs {
|
|
&__item {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&-panel {
|
|
&__footnotes {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-max($sm) {
|
|
.specs {
|
|
&-tabs {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
&__list {
|
|
column-gap: 15px;
|
|
}
|
|
&__item {
|
|
padding-bottom: 15px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&-panel {
|
|
&__footnotes {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.specs-tabs__item:hover {
|
|
color: var(--color-red);
|
|
}
|
|
} |