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.
 
 
 
template-for-verstka/assets/css/gp-style-mobile.css

210 lines
3.1 KiB

/* Стили для мобильных устройств */
@media only screen and (max-width: 576px) {
.wrapper{
width: 100%;
}
.phone--hone{
display: none;
}
/* component */
.link{
font-size: 14px;
}
/* header */
.header{
padding: 24px 16px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.header__wrapper{
padding: 0;
}
.header__phone{
display: flex;
align-items: center;
}
.header-phone__item{
margin-left: 24px;
width: 32px;
height: 32px;
transition: opacity .3s;
}
.header-phone__item > img{
width: 100%;
height: 100%;
}
.header-phone__item:first-child{
margin-left: 0;
}
.header-phone__item:active{
opacity: .8;
}
.button-menu{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.button-menu__open{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity .3s;
}
.button-menu__close{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity .3s;
opacity: 0;
}
.button-menu.open .button-menu__open{
opacity: 0;
}
.button-menu.open .button-menu__close{
opacity: 1;
}
.phone-menu{
position: absolute;
top: 112px;
right: 0;
left: 0;
width: 100%;
}
.phone-menu__block-content{
/* height: 0; */
/* overflow: hidden; */
}
.phone-menu__content{
padding: 0 16px 40px 16px;
}
.phone-menu__block{
margin-top: 32px;
}
.phone-menu__title{
font-weight: 700;
font-size: 32px;
color: var(--text-white);
}
.phone-menu__list{
list-style-type: none;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
color: var(--text-white);
}
.phone-menu__list a{
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
color: var(--text-white);
text-decoration: none;
}
.phone-menu__list li{
margin-top: 24px;
}
.phone-menu__list li:first-child{
margin-top: 0;
}
.phone-menu--next{
display: block;
background-image: url(/assets/img/icon/arrow-right.svg);
background-repeat: no-repeat;
background-position: center right;
}
.phone-menu__text{
margin-top: 24px;
display: block;
font-weight: 400;
font-size: 16px;
color: var(--text-white);
}
.phone-menu__text:first-child{
margin-top: 0;
}
.phone-menu__text > a {
color: var(--text-white);
}
.phone-menu__text--no-line{
text-decoration: none;
}
.phone-social{
margin-top: 24px;
display: flex;
align-items: center;
}
/* header */
/* footer */
.footer{
padding: 40px 16px;
}
.footer__wrapper{
display: block;
}
.footer__item{
margin-top: 40px;
}
.footer-menu__item{
margin-left: 53px;
}
.footer-menu__item:first-child{
margin-left: 0;
}
.footer-menu__list{
font-size: 14px;
}
.footer-menu__list li{
margin-top: 16px;
}
.footer-menu__list li:first-child{
margin-top: 0;
}
.footer__text{
display: block;
font-size: 18px;
}
.footer__about{
display: flex;
flex-direction: column;
align-items: start;
}
.footer-about__link{
margin-top: 24px;
}
/* footer */
}