You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1364 lines
23 KiB
1364 lines
23 KiB
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Переменные, шрифты, UI kit */
|
|
|
|
/*
|
|
700 - Bold
|
|
600 - SemiBold / Demi
|
|
500 - Medium
|
|
400 - Regular
|
|
*/
|
|
|
|
/* Craftwork Grotesk */
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk Bold"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
|
|
url("../fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
|
|
font-weight: 700;
|
|
}
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk SemiBold"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
|
|
url("../fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk Medium"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
|
|
url("../fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk Regular"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
|
|
url("../fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
|
|
url("../fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf");
|
|
font-weight: 400;
|
|
}
|
|
/* Craftwork Grotesk */
|
|
|
|
/* din 2014 */
|
|
@font-face {
|
|
font-family: "DIN 2014 Rounded";
|
|
src: local("DIN 2014 Rounded Demi"),
|
|
url("../fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
|
|
url("../fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
|
|
url("../fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf");
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: "DIN 2014 Rounded";
|
|
src: local("DIN 2014 Rounded Regular"),
|
|
url("../fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
|
|
url("../fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
|
|
url("../fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf");
|
|
font-weight: 400;
|
|
}
|
|
/* din 2014 */
|
|
|
|
/* roboto */
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: local("Roboto Medium"),
|
|
url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
|
|
url("../fonts/roboto/Roboto-Medium.woff") format("woff"),
|
|
url("../fonts/roboto/roboto-medium.ttf") format("ttf");
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: local("Roboto Regular"),
|
|
url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
|
|
url("../fonts/roboto/Roboto-Regular.woff") format("woff"),
|
|
url("../fonts/roboto/roboto-medium.ttf") format("ttf");
|
|
font-weight: 400;
|
|
}
|
|
/* roboto */
|
|
|
|
/* Глобальные переменные: */
|
|
|
|
:root {
|
|
/* fonts */
|
|
--font-family: "Craftwork Grotesk", sans-serif;
|
|
--second-family: "DIN 2014 Rounded", sans-serif;
|
|
--third-family: "Roboto", sans-serif;
|
|
|
|
/* color */
|
|
/* text */
|
|
--text-white: #fff;
|
|
--text-black: #121212;
|
|
--text-dark: #2b2b3b;
|
|
--text-grey: #999;
|
|
--text-red: #fa0505;
|
|
--text-0: #000;
|
|
--text-3: #333;
|
|
--text-6: #666;
|
|
|
|
/* background */
|
|
--background-white: #fff;
|
|
--background-black: #121212;
|
|
--background-grey: #f2f2f2;
|
|
|
|
/* gradient */
|
|
--gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%);
|
|
--gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%);
|
|
--gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%);
|
|
}
|
|
|
|
|
|
/* общие */
|
|
button{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wrapper{
|
|
margin: 0 auto;
|
|
|
|
max-width: 1600px;
|
|
}
|
|
|
|
/* компоненты */
|
|
|
|
/* lang*/
|
|
.lang{
|
|
position: relative;
|
|
}
|
|
.lang__open{
|
|
padding: 12px 15px;
|
|
|
|
width: 74px;
|
|
|
|
background: none;
|
|
border: none;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.lang__open:hover{
|
|
opacity: .8;
|
|
}
|
|
.lang-open p{
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
|
|
text-align: start;
|
|
|
|
color: var(--text-black);
|
|
}
|
|
.lang-open__arrow{
|
|
margin-left: 7.25px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.lang-open__black{
|
|
|
|
}
|
|
.lang-open__white{
|
|
display: none;
|
|
}
|
|
.lang__content{
|
|
position: absolute;
|
|
top: 33px;
|
|
left: -13px;
|
|
|
|
height: 0;
|
|
|
|
border-radius: 6px;
|
|
|
|
transition: height .2s ease-out;
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
|
|
background-color: var(--background-white);
|
|
|
|
z-index: 100;
|
|
}
|
|
.lang__list{
|
|
width: 104px;
|
|
|
|
padding: 8px;
|
|
|
|
list-style-type: none;
|
|
}
|
|
.lang__item{
|
|
margin-top: 8px;
|
|
}
|
|
.lang__item:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.lang__link{
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
padding: 4px;
|
|
|
|
border-radius: 6px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-dark);
|
|
|
|
text-decoration: none;
|
|
|
|
position: relative;
|
|
|
|
transition: background-color .2s ease-out;
|
|
}
|
|
.lang__link:hover,
|
|
.lang__item.active .lang__link{
|
|
background-color: var(--background-grey);
|
|
}
|
|
.lang__item.active .lang__link::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 8px;
|
|
|
|
width: 16px;
|
|
height: 12px;
|
|
|
|
background-image: url(../img/svg/main/arrow-selected.svg);
|
|
}
|
|
/* lang */
|
|
|
|
|
|
/* mini-profile */
|
|
.mini-profile{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.mini-profile__item{
|
|
margin-left: 8px;
|
|
}
|
|
.mini-profile__item:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.mini-profile__button{
|
|
display: block;
|
|
|
|
padding: 8px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background: none;
|
|
border: none;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.mini-profile__button:hover{
|
|
opacity: .8;
|
|
}
|
|
.mini-profile__icon{
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
}
|
|
.mini-profile__icon.white{
|
|
display: none;
|
|
}
|
|
/* mini-profile */
|
|
|
|
|
|
/* main-menu */
|
|
.main-menu{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
list-style-type: none;
|
|
}
|
|
.main-menu__item{
|
|
margin-left: 24px;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.main-menu__item:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.main-menu__item:hover{
|
|
opacity: .8;
|
|
|
|
background: #f2f2f2;
|
|
border-radius: 24px;
|
|
}
|
|
.header.white .main-menu__item:hover .main-menu__link{
|
|
color: var(--text-black);
|
|
}
|
|
.main-menu__item:active{
|
|
opacity: 1;
|
|
}
|
|
.main-menu__link{
|
|
display: block;
|
|
|
|
padding: 8px 12px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
color: var(--text-black);
|
|
|
|
text-decoration: none;
|
|
|
|
transition: color .2s ease-out;
|
|
}
|
|
.main-menu__button{
|
|
padding: 8px 32px 8px 12px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
color: var(--text-black);
|
|
|
|
border: none;
|
|
border-radius: 24px;
|
|
|
|
background: var(--gradient-turquoise);
|
|
|
|
position: relative;
|
|
}
|
|
.main-menu__button::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
|
|
width: 13px;
|
|
height: 8px;
|
|
|
|
background-image: url(../img/svg/main/arrow-black.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
/* main-menu */
|
|
|
|
|
|
/* form */
|
|
.form{
|
|
width: 100%;
|
|
|
|
padding: 24px 24px 43px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
border-radius: 24px;
|
|
background: var(--gradient-turquoise);
|
|
}
|
|
.form__item{
|
|
margin-top: 16px;
|
|
}
|
|
.form__title{
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 133%;
|
|
color: var(--text-black);
|
|
}
|
|
.form__input{
|
|
width: 100%;
|
|
|
|
border-radius: 20px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--text-black);
|
|
|
|
background: var(--background-white);
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
|
|
color: var(--text-black);
|
|
}
|
|
.form__input::placeholder{
|
|
color: var(--text-grey);
|
|
}
|
|
.form__input--textarea{
|
|
height: 96px;
|
|
resize: none;
|
|
}
|
|
.form__button{
|
|
width: 100%;
|
|
|
|
padding: 12px 24px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-white);
|
|
|
|
border-radius: 16px;
|
|
border: none;
|
|
background: var(--background-black);
|
|
|
|
cursor: pointer;
|
|
|
|
transition: background-color .2s ease-out;
|
|
}
|
|
.form__button:hover{
|
|
opacity: .8;
|
|
}
|
|
|
|
.label{
|
|
padding-bottom: 4px;
|
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
}
|
|
.label::after{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 2px;
|
|
right: -20px;
|
|
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
background-image: url(../img/svg/main/question.svg);
|
|
|
|
cursor: pointer;
|
|
}
|
|
.label__title{
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
color: var(--text-3);
|
|
}
|
|
.label__question{
|
|
position: absolute;
|
|
|
|
padding: 8px;
|
|
|
|
border-radius: 6px;
|
|
transition: height .2s ease-out;
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
background-color: var(--background-white);
|
|
|
|
opacity: 0;
|
|
transition: opacity .2s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
.label:hover .label__question{
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
/* form */
|
|
|
|
|
|
/* social media */
|
|
.social-media{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.social-media__item{
|
|
margin-left: 32px;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.social-media__item:hover{
|
|
opacity: .8;
|
|
}
|
|
.social-media__item:first-child{
|
|
margin-left: 0px;
|
|
}
|
|
.social-media__icon{
|
|
width: 32px;
|
|
aspect-ratio: 1;
|
|
}
|
|
/* social media */
|
|
|
|
|
|
/* breadcrumbs */
|
|
.breadcrumbs{
|
|
margin: 24px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.breadcrumbs__item{
|
|
display: block;
|
|
|
|
padding: 0px 16px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
color: var(--text-6);
|
|
|
|
text-decoration: none;
|
|
|
|
position: relative;
|
|
}
|
|
.breadcrumbs__item:first-child{
|
|
padding-left: 0;
|
|
}
|
|
.breadcrumbs__item:nth-child(n+2)::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -12px;
|
|
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
|
|
background-image: url(../img/svg/main/arrow-breadcrumbs.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
/* breadcrumbs */
|
|
|
|
/* compound */
|
|
.compound{
|
|
margin: -5px;
|
|
|
|
min-height: 33.95px;
|
|
|
|
display: flex;
|
|
align-items: start;
|
|
}
|
|
.compound__item{
|
|
margin: 5px;
|
|
|
|
padding: 4px 8px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 133%;
|
|
color: var(--text-black);
|
|
|
|
border-radius: 16px;
|
|
background-color: var(--background-white);
|
|
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
.compound__item:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.product__footer{
|
|
margin: 48px 24px 24px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.product__footer--error{
|
|
margin: 45px 0;
|
|
}
|
|
/* compound */
|
|
|
|
/* button */
|
|
.button{
|
|
font-family: var(--font-family);
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
|
|
border-radius: 20px;
|
|
|
|
cursor: pointer;
|
|
}
|
|
.button--100-perc{
|
|
width: 100%;
|
|
}
|
|
.button--white{
|
|
padding: 11px 24px;
|
|
|
|
text-align: center;
|
|
|
|
background-color: var(--background-white);
|
|
border: 1px solid var(--background-black);
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.button--white:hover{
|
|
opacity: .8;
|
|
}
|
|
.button--white.active{
|
|
background: var(--background-black);
|
|
color: var(--background-white);
|
|
}
|
|
.button--gradient{
|
|
background: var(--gradient-turquoise);
|
|
border: none;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.button--gradient:hover{
|
|
opacity: .8;
|
|
}
|
|
.button--base{
|
|
padding: 12px 24px;
|
|
}
|
|
.button--high{
|
|
height: 56px;
|
|
|
|
padding: 16px 24px 24px 24px;
|
|
|
|
font-weight: 700;
|
|
text-align: center;
|
|
|
|
position: relative;
|
|
}
|
|
.button--icon{
|
|
padding-right: 56px;
|
|
|
|
text-align: start;
|
|
}
|
|
.button--filter::after{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 24px;
|
|
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
|
|
background-image: url(../img/svg/main/filter.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.button--black{
|
|
padding: 7px 15px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 133%;
|
|
color: var(--text-white);
|
|
|
|
background: var(--background-black);
|
|
border: 1px solid var(--text-white);
|
|
}
|
|
.button--link{
|
|
text-decoration: none;
|
|
}
|
|
.button--red-48-px{
|
|
border-radius: 48px;
|
|
}
|
|
.to-know{
|
|
width: 100%;
|
|
|
|
padding: 12px 24px 7px 24px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
border: none;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.to-know:hover{
|
|
opacity: .8;
|
|
}
|
|
.to-know p{
|
|
padding-bottom: 4px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
|
|
border-bottom: 1px var(--text-black) solid;
|
|
|
|
cursor: pointer;
|
|
}
|
|
.to-know--background-none{
|
|
background: none;
|
|
}
|
|
.back{
|
|
margin-top: 16px;
|
|
margin-left: 16px;
|
|
|
|
padding: 8px;
|
|
padding-left: 32px;
|
|
|
|
background: none;
|
|
border: none;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
|
|
text-decoration: none;
|
|
|
|
position: relative;
|
|
}
|
|
.back::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 0;
|
|
|
|
margin-right: 8px;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
background-image: url(../img/svg/main/arrow-back.svg);
|
|
}
|
|
|
|
.back::after{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 0;
|
|
|
|
width: calc(100% - 8px);
|
|
height: 1px;
|
|
|
|
background: var(--text-black);
|
|
}
|
|
/* button */
|
|
|
|
/* select */
|
|
.select{
|
|
max-width: 144px;
|
|
|
|
position: relative;
|
|
}
|
|
.select__state{
|
|
width: 100%;
|
|
|
|
padding: 11px 47px 11px 13px;
|
|
|
|
/* pointer-events:none; */
|
|
|
|
border: 1px solid var(--background-black);
|
|
border-radius: 20px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.select:hover .select__state{
|
|
opacity: .8;
|
|
}
|
|
.select::after{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 20.5px;
|
|
right: 21.5px;
|
|
|
|
width: 17px;
|
|
height: 10px;
|
|
|
|
background-image: url(../img/svg/main/arrow-black.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
|
|
pointer-events: none;
|
|
}
|
|
.state__block{
|
|
position: absolute;
|
|
top: 48px;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 0;
|
|
overflow: hidden;
|
|
|
|
transition: height .2s ease-out;
|
|
}
|
|
.state__content{
|
|
padding: 8px;
|
|
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
|
|
background-color: var(--background-white);
|
|
|
|
list-style-type: none;
|
|
}
|
|
.state__content li{
|
|
margin-top: 8px;
|
|
}
|
|
.state__content li:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.state__button{
|
|
width: 100%;
|
|
|
|
padding: 4px 32px 4px 4px;
|
|
|
|
background: none;
|
|
border: none;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-dark);
|
|
text-align: start;
|
|
|
|
border-radius: 6px;
|
|
|
|
transition: background-color .2s ease-out;
|
|
|
|
position: relative;
|
|
}
|
|
.state__button:hover,
|
|
.state__button.active{
|
|
background-color: var(--background-grey);
|
|
}
|
|
|
|
.state__button.active::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 8px;
|
|
width: 16px;
|
|
height: 12px;
|
|
background-image: url(../img/svg/main/arrow-selected.svg);
|
|
}
|
|
|
|
/* select */
|
|
|
|
/* counter */
|
|
.counter{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.counter__input{
|
|
width: 48px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
text-align: center;
|
|
color: var(--text-black);
|
|
|
|
pointer-events: none;
|
|
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.counter__button{
|
|
width: 48px;
|
|
height: 48px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border: 1px solid var(--text-3);
|
|
border-radius: 24px;
|
|
|
|
background: var(--background-white);
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.counter__button:hover{
|
|
opacity: .8;
|
|
}
|
|
.counter--small{
|
|
|
|
}
|
|
.counter--small .counter__button{
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.counter--small{
|
|
|
|
}
|
|
/* counter */
|
|
|
|
/* modal */
|
|
.modal{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: rgba(0, 0, 0, 0.25);
|
|
|
|
z-index: 200;
|
|
|
|
opacity: 0;
|
|
transition: opacity .2s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
.modal.active{
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.modal__aside{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
width: 0;
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
transition: width .4s ease-out;
|
|
}
|
|
.modal__item{
|
|
height: 100%;
|
|
|
|
padding: 24px;
|
|
|
|
background: var(--background-white);
|
|
|
|
position: relative;
|
|
|
|
display: none;
|
|
|
|
filter: blur(10px);
|
|
transition: filter .2s ease-out;
|
|
}
|
|
.modal__item--no-title{
|
|
padding-top: 72px;
|
|
}
|
|
.modal__item.active{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.modal__close{
|
|
position: absolute;
|
|
top: 32px;
|
|
right: 24px;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.modal__header{}
|
|
.modal__title{
|
|
padding-right: 48px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 36px;
|
|
line-height: 111%;
|
|
text-transform: uppercase;
|
|
color: var(--text-black);
|
|
}
|
|
.modal__small-title{
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 100%;
|
|
text-transform: uppercase;
|
|
color: var(--text-black);
|
|
}
|
|
.modal__text{
|
|
margin-top: 16px;
|
|
|
|
padding-right: 10px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-0);
|
|
}
|
|
.modal__form-sub{
|
|
margin-top: 48px;
|
|
}
|
|
.modal-form-sub__submit{
|
|
margin-top: 64px;
|
|
}
|
|
.modal__block-button{
|
|
margin-top: 24px;
|
|
}
|
|
.modal__button{
|
|
margin-top: 16px;
|
|
}
|
|
.modal__button:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.modal__content{
|
|
margin-top: 24px;
|
|
}
|
|
.modal__filter{
|
|
width: 400px;
|
|
}
|
|
.modal__footer{
|
|
border-top: 1px solid var(--text-6);
|
|
padding-top: 23px;
|
|
}
|
|
.modal__block-price{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.modal-block-price__title{
|
|
font-family: var(--font-family);
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
}
|
|
.modal-block-price__price{
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 100%;
|
|
text-transform: uppercase;
|
|
text-align: right;
|
|
color: var(--text-black);
|
|
}
|
|
.modal-block-price__price::after{
|
|
content: 'Р';
|
|
}
|
|
.modal__basket{
|
|
width: 600px;
|
|
}
|
|
.modal__to-know,
|
|
.modal__to-know-submit{
|
|
width: 412px;
|
|
}
|
|
.modal-basket__item{
|
|
padding-top: 23px;
|
|
padding-right: 15px;
|
|
padding-bottom: 24px;
|
|
|
|
display: flex;
|
|
|
|
border-top: 1px solid #f2f2f2;
|
|
|
|
position: relative;
|
|
}
|
|
.modal-basket__item::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 6px;
|
|
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
|
|
background-image: url(../img/svg/main/basket.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.modal-basket__item:hover .modal-basket__item::before{
|
|
opacity: .8;
|
|
}
|
|
.modal-basket__item--return{
|
|
padding-right: 5px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.modal-basket__item--return .modal-basket-item__title{
|
|
padding-right: 10px;
|
|
}
|
|
.modal-basket__item--return::before{
|
|
display: none;
|
|
}
|
|
.modal-basket-item__return{
|
|
border-radius: 20px;
|
|
padding: 4px 24px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-white);
|
|
|
|
background: var(--background-black);
|
|
|
|
border: none;
|
|
}
|
|
.modal-basket-item__block-image{
|
|
width: 128px;
|
|
aspect-ratio: 1;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.modal-basket-item__image{
|
|
width: 96px;
|
|
aspect-ratio: 1;
|
|
|
|
object-fit: contain;
|
|
}
|
|
.modal-basket-item__content{
|
|
margin-left: 16px;
|
|
}
|
|
.modal-basket-item__title{
|
|
padding-right: 40px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
}
|
|
.modal-basket-item__sub-title{
|
|
margin-top: 8px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 133%;
|
|
color: var(--text-black);
|
|
}
|
|
.modal-basket-item__control{
|
|
margin-top: 24px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.modal-basket-item__price{
|
|
font-family: var(--font-family);
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
text-align: right;
|
|
color: var(--text-black);
|
|
}
|
|
.modal-basket-item__price::after{
|
|
content: 'Р';
|
|
|
|
padding-left: 4px;
|
|
}
|
|
.modal__basket .modal__header{
|
|
height: calc(100% - 92px);
|
|
margin-bottom: -36px;
|
|
}
|
|
.modal__basket .modal__content{
|
|
height: calc(100% - 100px);
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
.modal__basket .modal__content::-webkit-scrollbar {
|
|
width: 7px;
|
|
background-color: #f9f9fd;
|
|
}
|
|
.modal__basket .modal__content::-webkit-scrollbar-thumb {
|
|
background-color: var(--background-black);
|
|
border-radius: 2px;
|
|
}
|
|
/* modal */
|
|
|
|
/* toggle */
|
|
.toggle{
|
|
padding-top: 26px;
|
|
padding-bottom: 25px;
|
|
|
|
border-bottom: 1px solid var(--text-3);
|
|
|
|
position: relative;
|
|
}
|
|
.toggle::after{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 0;
|
|
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
|
|
background-image: url(../img/svg/main/black-x.svg);
|
|
transform: rotate(45deg);
|
|
transition: transform .2s;
|
|
pointer-events: none;
|
|
}
|
|
.toggle.active::after{
|
|
transform: rotate(0deg);
|
|
}
|
|
.toggle__title{
|
|
padding-right: 30px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
color: var(--text-black);
|
|
|
|
cursor: pointer;
|
|
}
|
|
.toggle__block-content{
|
|
height: 0;
|
|
overflow: hidden;
|
|
|
|
transition: height .2s ease-out;
|
|
}
|
|
.toggle__content{
|
|
padding-top: 24px;
|
|
}
|
|
.toggle-content__item{
|
|
margin: 12px -12px -12px -12px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.toggle-content__item:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.toggle-content__element{
|
|
margin: 12px;
|
|
}
|
|
.toggle-content__element--width-perc-100{
|
|
width: 100%;
|
|
}
|
|
.toggle-content__element--width-perc-50{
|
|
width: calc(50% - 24px);
|
|
}
|
|
.toggle__text{
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
}
|
|
/* toggle */
|
|
|
|
/* checkbox */
|
|
.checkbox{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
}
|
|
.checkbox__state{
|
|
border-radius: 4px;
|
|
|
|
width: 18px;
|
|
height: 18px;
|
|
|
|
border: 2px solid var(--background-black);
|
|
background: var(--background-white);
|
|
|
|
flex-shrink: 0;
|
|
}
|
|
.checkbox.active .checkbox__state{
|
|
background-color: var(--background-black);
|
|
|
|
background-image: url(../img/svg/main/arrow-selected-white.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.checkbox__input{
|
|
display: none;
|
|
}
|
|
.checkbox__label{
|
|
padding-left: 8px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-dark);
|
|
|
|
cursor: pointer;
|
|
}
|
|
.checkbox__label a{
|
|
color: #76ce75;
|
|
|
|
text-decoration: none;
|
|
}
|
|
.checkbox--small{
|
|
margin-top: 24px;
|
|
}
|
|
.checkbox--small .checkbox__label{
|
|
padding-left: 24px;
|
|
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 133%;
|
|
}
|
|
/* checkbox */
|
|
|
|
/* radio */
|
|
.radio{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.radio__input{
|
|
width: 18px;
|
|
aspect-ratio: 1;
|
|
|
|
accent-color: var(--background-black);
|
|
|
|
cursor: pointer;
|
|
}
|
|
.radio__label{
|
|
padding-left: 8px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-dark);
|
|
|
|
cursor: pointer;
|
|
}
|
|
/* radio */
|
|
|
|
|
|
@keyframes slidein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
} |