.team{
width:100%;
padding:70px 20px 110px;
color:#fff;
}
.team-width{
width:100%;
max-width:1120px;
margin:0 auto;
}
.team-intro{
max-width:700px;
margin-bottom:65px;
}
.team-label{
display:inline-block;
font-size:12px;
font-weight:900;
letter-spacing:2px;
color:#a78bfa;
margin-bottom:10px;
}
.team-intro h1{
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:900;
margin:0 0 16px;
letter-spacing:-2px;
}
.team-intro h1 strong{
color:#a78bfa;
}
.team-intro p{
font-size:16px;
line-height:1.7;
color:rgba(255,255,255,.65);
margin:0;
}
.team-group{
margin-bottom:75px;
}
.team-group-heading{
margin:0 0 18px 20px;
}
.team-group-heading span{
font-size:11px;
font-weight:900;
letter-spacing:1.8px;
}
.team-group-heading h2{
font-size:24px;
font-weight:900;
margin:3px 0 0;
color:#fff;
}
.team-card{
position:relative;
width:100%;
min-height:360px;
isolation:isolate;
clip-path:polygon(1.3% 2%,14% 1%,29% 2.1%,44% .7%,61% 1.8%,76% .6%,91% 1.5%,98.8% 3.2%,99.4% 17%,98.8% 34%,99.5% 52%,98.9% 69%,99.4% 85%,98% 97.5%,84% 99%,69% 98.1%,52% 99.3%,36% 98.2%,20% 99.2%,2% 98%,.7% 84%,1.2% 66%,.5% 49%,1.2% 30%,.6% 14%);
overflow:hidden;
}
.team-member{
display:none;
position:relative;
width:100%;
min-height:360px;
align-items:stretch;
}
.team-member.active{
display:flex;
animation:teamShow .35s ease;
}
@keyframes teamShow{
from{
opacity:0;
transform:translateX(12px);
}
to{
opacity:1;
transform:translateX(0);
}
}
.team-content{
position:relative;
z-index:3;
width:68%;
padding:54px 55px 60px 80px;
color:#182828;
}
.team-person{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:20px;
}
.team-person h3{
font-size:31px;
font-weight:900;
line-height:1;
margin:0;
color:#182828;
}
.team-role{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 12px;
font-size:11px;
font-weight:900;
letter-spacing:.5px;
color:#fff;
background:#182828;
clip-path:polygon(3% 8%,94% 1%,100% 20%,97% 87%,88% 100%,4% 95%,0 76%);
}
.team-content p{
max-width:680px;
font-size:14px;
font-weight:600;
line-height:1.75;
margin:0 0 12px;
color:rgba(24,40,40,.82);
}
.team-skin{
position:absolute;
z-index:2;
right:35px;
bottom:-20px;
width:31%;
height:105%;
display:flex;
align-items:flex-end;
justify-content:center;
pointer-events:none;
}
.team-skin img{
display:block;
height:92%;
max-height:355px;
width:auto;
max-width:100%;
object-fit:contain;
filter:drop-shadow(8px 12px 0 rgba(24,40,40,.09));
image-rendering:auto;
}
.team-arrow{
position:absolute;
z-index:10;
top:50%;
width:42px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border:0;
background:#182828;
color:#fff;
font-size:36px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:transform .18s ease,background .18s ease;
clip-path:polygon(12% 3%,89% 0,100% 16%,94% 88%,78% 100%,5% 94%,0 70%,4% 17%);
}
.team-arrow:hover{
transform:translateY(-50%) scale(1.08) rotate(-2deg);
}
.team-arrow-left{
left:12px;
transform:translateY(-50%);
}
.team-arrow-right{
right:12px;
transform:translateY(-50%);
}
.team-dots{
position:absolute;
z-index:10;
left:80px;
bottom:30px;
display:flex;
gap:7px;
}
.team-dots button{
width:9px;
height:9px;
padding:0;
border:0;
border-radius:50%;
background:rgba(24,40,40,.2);
cursor:pointer;
transition:.2s ease;
}
.team-dots button.active{
width:24px;
border-radius:10px;
background:#182828;
}
.team-management .team-card{
background:#b9dcf3;
}
.team-management .team-group-heading span{
color:#83c5ef;
}
.team-builders .team-card{
background:#e7e1d8;
}
.team-builders .team-group-heading span{
color:#d6c9b8;
}
.team-admins .team-card{
background:#f3b8b5;
}
.team-admins .team-group-heading span{
color:#ef8d88;
}
.team-mods .team-card{
background:#bde6ca;
}
.team-mods .team-group-heading span{
color:#7fcf99;
}
.team-helpers .team-card{
background:#f4d1a9;
}
.team-helpers .team-group-heading span{
color:#eeb875;
}
.team-builders .team-content{
width:68%;
}
.team-builders .team-skin{
right:55px;
}
@media(max-width:800px){
.team{
padding:45px 14px 80px;
}
.team-intro{
margin-bottom:50px;
}
.team-intro h1{
font-size:38px;
letter-spacing:-1px;
}
.team-group{
margin-bottom:55px;
}
.team-group-heading{
margin-left:12px;
}
.team-group-heading h2{
font-size:20px;
}
.team-card{
min-height:560px;
clip-path:polygon(2% 1%,19% 2%,39% .5%,58% 1.7%,78% .7%,98% 2%,99% 20%,98% 39%,99.5% 60%,98.5% 80%,98% 98%,78% 99%,58% 98%,38% 99.5%,18% 98%,1.5% 99%,.5% 80%,1.5% 60%,.5% 40%,1.5% 20%);
}
.team-member{
min-height:560px;
flex-direction:column;
}
.team-content,
.team-builders .team-content{
width:100%;
padding:42px 40px 235px 58px;
}
.team-person{
gap:8px;
margin-bottom:15px;
}
.team-person h3{
width:100%;
font-size:27px;
}
.team-content p{
font-size:13px;
line-height:1.65;
}
.team-skin,
.team-builders .team-skin{
right:50%;
bottom:-35px;
transform:translateX(50%);
width:100%;
height:260px;
}
.team-skin img{
height:260px;
}
.team-arrow{
top:auto;
bottom:95px;
width:38px;
height:45px;
}
.team-arrow-left{
left:16px;
transform:none;
}
.team-arrow-right{
right:16px;
transform:none;
}
.team-arrow-left:hover,
.team-arrow-right:hover{
transform:scale(1.06);
}
.team-dots{
left:50%;
bottom:25px;
transform:translateX(-50%);
}
}
@media(max-width:480px){
.team-content,
.team-builders .team-content{
padding:36px 32px 225px 52px;
}
.team-card,
.team-member{
min-height:600px;
}
.team-person h3{
font-size:24px;
}
.team-role{
font-size:9px;
}
}