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.
532 lines
10 KiB
532 lines
10 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;
|
|
|
|
/* 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;
|
|
|
|
width: 1280px;
|
|
}
|
|
|
|
/* компоненты */
|
|
|
|
/* 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;
|
|
}
|
|
.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 */
|
|
|
|
|
|
/* product */
|
|
.product{
|
|
margin: -24px;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: start;
|
|
}
|
|
.product__item{
|
|
margin: 24px;
|
|
|
|
width: calc(33.3% - 48px);
|
|
|
|
background-color: var(--background-grey);
|
|
|
|
border-radius: 24px;
|
|
}
|
|
.product__product-card{
|
|
height: 274px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.product__images{
|
|
height: 242px;
|
|
object-fit: contain;
|
|
}
|
|
.product__content-card{
|
|
padding: 15px;
|
|
}
|
|
.product__title{
|
|
margin-top: 8px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
}
|
|
.product__price{
|
|
margin-top: 8px;
|
|
|
|
font-family: var(--font-family);
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
line-height: 200%;
|
|
text-transform: uppercase;
|
|
color: var(--text-black);
|
|
}
|
|
.product__price::after{
|
|
content: '₽';
|
|
}
|
|
.product__bye{
|
|
margin-top: 8px;
|
|
}
|
|
/* product */
|
|
|
|
/* compound */
|
|
.compound{
|
|
margin: -5px;
|
|
|
|
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;
|
|
}
|
|
/* compound */
|
|
|
|
/* button */
|
|
.button{
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 120%;
|
|
color: var(--text-black);
|
|
|
|
border-radius: 20px;
|
|
}
|
|
.button--white{
|
|
width: 100%;
|
|
|
|
padding: 12px;
|
|
|
|
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 */ |