/home/blackyak/www/wordpress/wp-content/themes/travivu/assets/sass/template/elements/_team.scss
.team-one{
&__single{
position: relative;
margin-bottom: 30px;
}
&__image{
border-radius: 15px;
overflow: hidden;
img{
border-radius: 15px;
transition: all 0.35s;
}
}
&__content{
position: relative;
z-index: 1;
padding-right: 30px;
margin-top: -70px;
&:before{
content: "";
position: absolute;
bottom: 30px;
left: 30px;
right: 50px;
display: block;
-webkit-mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
min-height: 152px;
background: $theme-color-2;
transition: all 0.35s;
@media(max-width: 375px){
min-height: 135px;
}
}
}
&__content-inner{
background: $bg-gray;
transition: all 0.35s;
padding: 40px 10px 20px 25px;
border-radius: 0 20px 20px 20px;
position: relative;
overflow: hidden;
width: 100%;
mask-image: url('#{$image-theme-path-base}polygon-team.png');
mask-repeat: no-repeat;
mask-size: 100%;
min-height: 159px;
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
display: flex;
align-items: flex-end;
@media(max-width: 375px){
min-height: 135px;
}
}
&__socials{
position: absolute;
bottom: 100%;
left: 40px;
margin-bottom: -65px;
z-index: 2;
background: $white;
padding: 10px;
border-radius: 30px;
opacity: 0;
transform: translateY(30px);
transition: all 0.35s;
}
&__social-control{
width: 36px;
height: 36px;
border-radius: 50%;
background: $bg-gray;
line-height: 36px;
font-size: 14px;
text-align: center;
color: $white;
&:hover{
cursor: pointer;
background: $theme-color;
}
}
&__social-links{
position: relative;
transform: translateY(30px);
z-index: -1;
transition: all 0.35s;
a{
display: block;
margin-bottom: 5px;
width: 36px;
height: 36px;
border-radius: 50%;
background: $bg-gray;
line-height: 36px;
font-size: 14px;
text-align: center;
color: $link-color;
transition: all 0.35s;
&:hover{
color: $white;
background: $theme-color;
}
}
}
&__name{
font-weight: 700;
font-size: 18px;
margin: 0;
transition: all 0.35s;
}
&__job{
font-size: 14px;
font-weight: 500;
transition: all 0.35s;
}
&__single{
&:hover{
.team-one{
&__content:before{
background: $theme-color;
}
&__content-inner{
background: $theme-color-2;
}
&__socials{
opacity: 1;
transform: translateY(0);
}
&__social-links{
transform: translateY(0);
}
&__name{
color: $white;
}
&__job{
color: $white;
}
}
}
}
}
.team-two{
&__single{
position: relative;
margin-bottom: 30px;
}
&__image{
border-radius: 20px;
position: relative;
overflow: hidden;
width: 100%;
-webkit-mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
mask-image: url('#{$image-theme-path-base}polygon-team-2.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
img{
transition: all 0.35s;
border-radius: 20px;
}
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
-webkit-transition: .5s;
transition: .5s;
background: var(--e-global-color-primary);
background: -webkit-gradient(linear,left top,left bottom,from(rgba(13,13,63,0)),to(#12292B));
background: linear-gradient(180deg,rgba(13,13,63,0) 0%,#12292B 100%);
}
}
&__content{
position: relative;
z-index: 1;
border-radius: 20px;
padding: 20px 30px;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
justify-content: center;
}
&__content-inner{
}
&__social-control{
position: absolute;
left: 15px;
top: 15px;
width: 39px;
height: 39px;
border-radius: 50%;
background: $theme-color;
line-height: 36px;
font-size: 14px;
text-align: center;
color: $white;
&:hover{
cursor: pointer;
}
}
&__social-links{
position: absolute;
top: 0;
right: 8px;
z-index: 2;
transition: all 0.35s;
border-radius: 30px;
background: #F1F3F3;
padding: 10px;
a{
display: block;
margin-bottom: 5px;
width: 36px;
height: 36px;
border-radius: 50%;
background: $white;
line-height: 36px;
font-size: 14px;
text-align: center;
color: $theme-color-2;
transition: all 0.35s;
&:hover{
color: $white;
background: $theme-color;
}
}
}
&__name{
font-weight: 600;
font-size: 22px;
margin: 0 0 5px;
color: $white;
}
&__job{
color: $white;
}
&__desc{
color: $white;
}
&__single{
&:hover{
.team-two{
&__social-links{
}
}
}
}
}
.team-three{
&__single{
position: relative;
margin-bottom: 30px;
}
&__image{
border-radius: 15px;
overflow: hidden;
img{
border-radius: 15px;
transition: all 0.35s;
}
}
&__content{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
}
&__content-inner{
background: $white;
transition: all 0.35s;
padding: 40px 15px;
padding-top: 60px;
border-radius: 0 0 16px 16px;
text-align: center;
position: relative;
overflow: hidden;
width: 100%;
-webkit-mask-image: url('#{$image-theme-path-base}polygon-team-3.png');
mask-image: url('#{$image-theme-path-base}polygon-team-3.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
&:before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
display: block;
background: $theme-color;
opacity: 0;
z-index: -1;
transition: all 0.35s;
}
}
&__socials{
position: absolute;
top: 25px;
right: 25px;
z-index: 2;
}
&__social-control{
width: 36px;
height: 36px;
border-radius: 50%;
background: $theme-color;
line-height: 36px;
font-size: 14px;
text-align: center;
color: $white;
&:hover{
cursor: pointer;
}
}
&__social-links{
position: relative;
opacity: 0;
transform: translateY(30px);
z-index: -1;
transition: all 0.35s;
a{
display: block;
margin-top: 5px;
width: 36px;
height: 36px;
border-radius: 50%;
background: $white;
line-height: 36px;
font-size: 14px;
text-align: center;
color: $theme-color-2;
transition: all 0.35s;
&:hover{
color: $white;
background: $theme-color-2;
}
}
}
&__name{
font-weight: 600;
font-size: 22px;
margin: 0 0 5px;
transition: all 0.35s;
}
&__desc{
font-size: 16px;
transition: all 0.35s;
}
&__single{
&:hover{
.team-three{
&__social-links{
opacity: 1;
transform: translateY(0);
}
&__content-inner{
&:before{
opacity: 1;
height: 100%;
}
}
&__name, &__desc{
color: $white;
}
}
}
}
}
.item-active.center{
.team-one{
&__content:before{
background: $theme-color;
}
&__content-inner{
background: $theme-color-2;
}
&__socials{
opacity: 1;
transform: translateY(0);
}
&__social-links{
transform: translateY(0);
}
&__name{
color: $white;
}
&__job{
color: $white;
}
}
.team-three{
&__social-links{
opacity: 1;
transform: translateY(0);
}
&__content-inner{
&:before{
opacity: 1;
height: 100%;
}
}
&__name, &__desc{
color: $white;
}
}
}