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.
743 lines
14 KiB
743 lines
14 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("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
|
|
url("/assets/fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
|
|
font-weight: 700;
|
|
}
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk SemiBold"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
|
|
url("/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk Medium"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
|
|
url("/assets/fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: "Craftwork Grotesk";
|
|
src: local("Craftwork Grotesk Regular"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
|
|
url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
|
|
url("/assets/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("/assets/fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
|
|
url("/assets/fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
|
|
url("/assets/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("/assets/fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
|
|
url("/assets/fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
|
|
url("/assets/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("/assets/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
|
|
url("/assets/fonts/roboto/Roboto-Medium.woff") format("woff"),
|
|
url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: local("Roboto Regular"),
|
|
url("/assets/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
|
|
url("/assets/fonts/roboto/Roboto-Regular.woff") format("woff"),
|
|
url("/assets/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-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;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
|
|
text-align: start;
|
|
|
|
color: var(--text-black);
|
|
|
|
position: relative;
|
|
|
|
transition: opacity .2s ease-out;
|
|
}
|
|
.lang__open::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: 19.25px;
|
|
right: 18.25px;
|
|
|
|
width: 10px;
|
|
height: 6px;
|
|
|
|
background-image: url(../img/svg/main/arrow-black.svg);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.lang__open:hover{
|
|
opacity: .8;
|
|
}
|
|
.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 */
|
|
|
|
|
|
/* 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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
/* form */
|
|
|
|
|
|
/* social media */
|
|
.social-media{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.social-media__item{
|
|
margin-left: 32px;
|
|
}
|
|
.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);
|
|
}
|
|
.compound__item:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.product__footer{
|
|
margin: 48px 24px 24px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
/* 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--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 56px 24px 24px;
|
|
|
|
font-weight: 700;
|
|
text-align: start;
|
|
|
|
position: relative;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
/* 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);
|
|
|
|
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;
|
|
}
|
|
.state__block{
|
|
position: absolute;
|
|
top: 48px;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.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: 400;
|
|
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 */ |