Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/elements/team.scss
/*--------------------------------------------------------------
# Team Grid/Carousel
--------------------------------------------------------------*/
.pxl-team-carousel1 {
.pxl-item--holder {
&:before {
display: none;
}
}
.pxl-holder--inner {
background-color: unset !important;
}
}
.pxl-team-layout1 {
.pxl-item--inner {
@include transition(all 200ms linear 0ms);
&:hover {
.pxl-item--image {
box-shadow: 0px 10px 10px rgba(#000, 0.09);
.pxl-social--wrap {
opacity: 1;
bottom: 33px;
}
img {
transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
}
}
.pxl-item--holder {
.pxl-item--position {
opacity: 1;
.char {
color: $primary_color;
@include transform(translateY(-10px));
}
}
}
}
.pxl-item--image {
position: relative;
@include border-radius(8px);
overflow: hidden;
@include transition(all 200ms linear 0ms);
img {
transition: transform 500ms;
transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
transform-origin: center center;
}
.pxl-social--wrap {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%,0);
background-color: $gradient_color_from;
filter: drop-shadow(0px 18px 28.5px rgba(#000,0.54));
@include border-radius(6px);
padding: 0 15px 0 15px;
overflow: hidden;
opacity: 0;
@include transition(all 250ms linear 0ms);
.pxl-social--icon {
display: flex;
align-items: center;
}
a {
font-size: 18px;
color: #fff;
padding: 0 15px;
line-height: 72px;
position: relative;
&:hover {
&:before {
opacity: 1;
top: 0;
}
&:after {
opacity: 1;
bottom: 0;
}
}
&:before {
content: '';
position: absolute;
width: 7px;
height: 15px;
background-color: #fff;
top: -15px;
left: 50%;
transform: translate(-50%,0);
opacity: 0;
@include transition(all 200ms linear 0ms);
}
&:after {
content: '';
position: absolute;
width: 7px;
height: 15px;
background-color: #fff;
bottom: -15px;
left: 50%;
transform: translate(-50%,0);
opacity: 0;
@include transition(all 200ms linear 0ms);
}
}
}
}
.pxl-item--holder {
text-align: center;
margin-top: 19px;
@include transition(all 200ms linear 0ms);
.pxl-item--title {
margin-bottom: 3px;
a {
font-size: 30px;
@media (max-width: 676px) {
font-size: 23px;
}
}
}
.pxl-item--position {
font-size: 17px;
color: transparent;
@include transition(all 200ms linear 0ms);
opacity: 0;
.char {
transition: transform 0.2s ease, color 0.2s ease;
transition-delay: calc(var(--char-index) * 0.02s);
}
}
}
}
}
.pxl-team-layout2 {
.pxl-carousel-inner {
padding: 0 15px;
margin: 0 -15px;
}
.pxl-item--inner {
text-align: center;
@include transition(all 0.3s);
.pxl-image-social {
padding-top: 46px;
overflow: hidden;
.pxl-img-meta {
background-color: #e3e3e3;
@include border-radius(3px);
@include transition(all 0.3s);
position: relative;
}
.pxl-social--wrap {
position: absolute;
top: 19px;
right: 28px;
z-index: 2;
@include transition(all 0.3s);
a {
width: 45px;
min-width: 45px;
height: 44px;
filter: drop-shadow(0px 3px 3.5px rgba(#000,0.27));
display: flex;
align-items: center;
justify-content: center;
@include transition(all 0.3s);
position: relative;
color: #fff;
margin: 10px 0;
opacity: 0;
span {
mask-image: url(../img/circle1.png);
-webkit-mask-image: url(../img/circle1.png);
-ms-mask-image: url(../images/circle1.png);
-o-mask-image: url(../images/circle1.png);
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-ms-mask-position: center center;
-o-mask-position: center center;
overflow: hidden;
mask-size: contain;
@include transition(all 0.3s);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: $primary_color;
}
&:hover {
span {
background-color: #fff;
color: $primary_color;
}
}
}
}
.pxl-item--image {
z-index: 1;
position: relative;
@include transition(all 0.3s);
img {
margin-top: -50px;
}
.pxl-none {
opacity: 0;
}
.pxl-active {
position: absolute;
width: 100%;
height: 120%;
top: -50px;
left: 0;
img {
margin-top: 0px;
}
}
}
.pxl-content-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(3px);
overflow: hidden;
.pxl-item-shape {
position: relative;
height: 100%;
.pxl-shape1 {
background-image: url(../img/shape2-img.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
width: 110%;
height: 50%;
position: absolute;
bottom: 9px;
left: 50%;
transform: translate(-50%, -100%);
@include transition(all 200ms linear 0ms);
opacity: 0;
}
.pxl-shape2 {
background-image: url(../img/shape1-img.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
width: 102%;
height: 100%;
position: absolute;
bottom: -45%;
left: 50%;
transform: translate(-50%, -100%);
@include transition(all 200ms linear 0ms);
opacity: 0;
}
}
}
}
.pxl-item--holder {
margin-top: 14px;
.pxl-item--title {
margin-bottom: 6px;
a {
font-size: 23px;
color: #111c16;
font-weight: 700;
}
}
.pxl-item--position {
color: #737373;
font-weight: 700;
font-size: 18px;
}
}
&:hover {
.pxl-image-social {
filter: drop-shadow(0px 15px 7px rgba(#000, 0.24));
.pxl-social--wrap {
a {
opacity: 1;
transition-delay: 0s;
&:nth-child(2) {
transition-delay: 0.1s;
}
&:nth-child(3) {
transition-delay: .18s;
}
&:nth-child(4) {
transition-delay: .26s;
}
}
}
.pxl-content-shape {
.pxl-shape1 {
opacity: 1;
transform: translate(-50%,0);
}
.pxl-shape2 {
opacity: 1;
transform: translate(-50%,0);
}
}
}
}
}
}
.pxl-team-grid2 {
.pxl-item--inner {
position: relative;
text-align: center;
&:hover {
.pxl-item--image {
img {
opacity: 0.7;
}
}
.pxl-item--holder {
.pxl-item--meta {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
}
.pxl-item--image {
background-color: $link_color;
@include transition(all 0.3s);
img {
opacity: 1;
@include transition(all 0.3s);
}
}
.pxl-inner-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.pxl-item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-content: center;
padding: 0 65px;
@include transition(all 0.3s);
@media (max-width: 1366px) {
padding: 0 30px;
}
.pxl-item--meta {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
filter: drop-shadow(0px 26px 19px rgba(#000,0.24));
border: 1px solid rgba(#e6e6e6,0.05);
padding: 85px 0;
@include transition(all 0.3s);
opacity: 0;
transform: scale(0) rotate(180deg);
@media (max-width: 1366px) {
padding: 50px 0;
}
}
.pxl-item--position {
font-size: 14px;
color: $primary_color;
font-weight: 500;
font-family: "Inter";
margin-bottom: 2px;
line-height: 1;
margin-top: 5px;
}
.pxl-item--title {
font-size: 30px;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
@media (max-width: 1366px) {
font-size: 25px;
}
a {
color: #fff;
}
}
.pxl-social--wrap {
a {
width: 40px;
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: $primary_color;
border-radius: 50%;
margin: 3px;
&:hover {
background-color: $primary_color;
color: #fff;
}
}
}
}
}
}
.pxl-team-layout3 {
.pxl-swiper-slide {
padding: 0 12px;
}
.pxl-swiper-container {
margin: 0 -12px;
}
.pxl-swiper-arrow-wrap {
margin: 0;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%,-47%);
z-index: 3;
width: 115%;
@media (max-width: 1500px) {
position: unset;
transform: unset;
width: 100%;
margin-top: 10px;
}
.pxl-swiper-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #f1f1f1;
color: $link_color;
position: absolute;
top: 50%;
transform: translate(0,-50%);
font-size: 34px;
@include transition(all 0.3s);
@media (max-width: 1500px) {
position: unset;
transform: unset;
margin: 10px;
}
@media (max-width: 1200px) {
width: 54px;
height: 54px;
font-size: 20px;
}
&.pxl-swiper-arrow-prev {
left: 0;
}
&.pxl-swiper-arrow-next {
right: 0;
}
&:hover {
background-color: $primary_color;
color: #fff;
}
}
}
.pxl-item--inner {
position: relative;
padding-bottom: 86px;
@include transition(all 0.3s);
.pxl-item--image {
background-color: #f6f6f6;
border-radius: 100px;
position: relative;
overflow: hidden;
text-align: center;
padding-top: 36px;
border: 3px solid #f6f6f6;
a {
z-index: 1;
position: relative;
}
.pxl-social--wrap {
position: absolute;
top: 15.4%;
right: 32px;
@include transition(all 0.3s);
opacity: 0;
a {
display: block;
margin-bottom: 12px;
color: $link_color;
@include transition(all 0.3s);
opacity: 0;
&:last-child {
margin-bottom: 0;
}
&:hover {
color: $primary_color;
}
}
}
}
.pxl-item--holder {
text-align: center;
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%,0);
width: 100%;
@include transition(all 0.3s);
opacity: 0;
z-index: 2;
.pxl-item--title {
font-size: 18px;
text-transform: uppercase;
font-weight: 700;
font-family: "Barlow Semi Condensed";
margin-bottom: 0;
margin-left: 13px;
a {
color: #ffffff;
clip-path: polygon(5% 0%, 100% 0%, 93% 100%, 0% 100%);
background-image: linear-gradient(86deg, $gradient_color_from 0%, $gradient_color_to 100%);
border-radius: 17px 4px 20px 4px;
padding: 15px 55px 15px 41px;
display: inline-block;
}
}
.pxl-item--position {
font-size: 14px;
text-transform: uppercase;
color: #323131;
font-weight: 500;
font-family: "Barlow Semi Condensed";
border-radius: 20px 4px;
display: inline-block;
position: relative;
padding: 8px 36px;
filter: drop-shadow(0px 3px 13.5px rgba(5,5,5,0.23));
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
clip-path: polygon(5% 0%, 100% 0%, 93% 100%, 0% 100%);
z-index: -1;
}
}
}
&:hover {
.pxl-item--image {
background-color: #fff;
border-color: $primary_color;
}
.pxl-item--holder {
opacity: 1;
bottom: 25px;
}
.pxl-social--wrap {
opacity: 1;
a {
opacity: 1;
transition-delay: 0s;
&:nth-child(2) {
transition-delay: 0.1s;
}
&:nth-child(3) {
transition-delay: .18s;
}
&:nth-child(4) {
transition-delay: .26s;
}
}
}
}
}
}
//pxl-team-box
.pxl-team-box1 {
.pxl-item-inner {
position: relative;
overflow: hidden;
&:hover {
.pxl-item--img {
a {
&:after {
transform: scaleY(1);
opacity: 1;
}
}
}
.pxl-item-content {
bottom: 26px;
opacity: 1;
}
}
.pxl-item--img {
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
a {
display: block;
position: relative;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
@include transition(all 0.3s);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
transform: scaleY(0);
opacity: 0;
transform-origin: bottom;
}
}
}
.pxl-item-content {
position: absolute;
left: 29px;
bottom: 0;
opacity: 0;
@include transition(all 0.3s);
.pxl-sub-title {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
opacity: 0.5;
color: #fff;
line-height: 1.2;
margin-bottom: 11px;
}
.pxl-item-title {
line-height: 1.2;
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.96px;
color: #fff;
}
}
}
}
Back to Directory
File Manager