.fs-team-x {
--orange: #ff6a00;
--ink: #111111;
position: relative;
width: 100%;
padding: clamp(80px, 9vw, 150px) 0 clamp(110px, 10vw, 170px);
background: none;
overflow: hidden;
isolation: isolate;
font-family: "Montserrat", Arial, sans-serif;
}
.fs-team-x-bg {
display: none;
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
}
.fs-team-x-glow {
position: absolute;
width: 760px;
height: 760px;
right: -250px;
top: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 106, 0, .10), rgba(255, 106, 0, .025) 40%, transparent 70%);
filter: blur(25px);
animation: fsGlowFloat 9s ease-in-out infinite alternate;
}
@keyframes fsGlowFloat {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(-80px, 70px, 0) scale(1.15);
}
}
.fs-team-x-stage {
position: relative;
max-width: 1600px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(24px, 2.5vw, 42px);
align-items: start;
}
.fs-person {
--shift: 0px;
position: relative;
transform-style: preserve-3d;
opacity: 0;
transform: translate3d(0, calc(90px + var(--shift)), 0) scale(.92);
transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.15s cubic-bezier(.16, 1, .3, 1);
will-change: transform, opacity;
}
.fs-person.is-in {
opacity: 1;
transform: translate3d(0, var(--shift), 0) scale(1);
}
.fs-person-1 {
--shift: 70px;
}
.fs-person-2 {
--shift: 0px;
}
.fs-person-3 {
--shift: 115px;
}
.fs-person-4 {
--shift: 35px;
}
.fs-person-2 {
transition-delay: .08s;
}
.fs-person-3 {
transition-delay: .16s;
}
.fs-person-4 {
transition-delay: .24s;
}
.fs-person-visual {
position: relative;
transform-style: preserve-3d;
transition: transform .55s cubic-bezier(.16, 1, .3, 1);
will-change: transform;
}
.fs-person-frame {
position: relative;
width: 100%;
aspect-ratio: 0.72 / 1;
overflow: hidden;
border-radius: 50px;
background: #ecebea;
box-shadow: 0 40px 90px rgba(0, 0, 0, .09);
transition: box-shadow .6s ease, filter .6s ease;
isolation: isolate;
}
.fs-person-frame:before {
content: "";
position: absolute;
inset: 0;
z-index: 5;
border-radius: 50px;
padding: 2px;
background: conic-gradient(from 180deg, transparent 0deg, transparent 80deg, var(--orange) 125deg, var(--orange) 155deg, transparent 205deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transform: rotate(-90deg);
transition: opacity .45s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.fs-person-frame:after {
content: "";
position: absolute;
width: 320px;
height: 320px;
left: var(--mx, 50%);
top: var(--my, 50%);
z-index: 4;
border-radius: 50%;
transform: translate(-50%, -50%) scale(.35);
background: radial-gradient(circle, rgba(255, 255, 255, .38) 0%, rgba(255, 106, 0, .12) 30%, transparent 70%);
opacity: 0;
transition: opacity .35s ease, transform .5s ease;
pointer-events: none;
}
.fs-person:hover .fs-person-frame:before {
opacity: 1;
transform: rotate(0deg);
}
.fs-person:hover .fs-person-frame:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.fs-person-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
transform: scale(1.02);
filter: saturate(.86) contrast(1.02);
transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter .7s ease;
will-change: transform;
}
.fs-person:hover .fs-person-frame img {
transform: scale(1.08);
filter: saturate(1) contrast(1.04);
}
.fs-person:hover .fs-person-frame {
box-shadow: 0 55px 110px rgba(0, 0, 0, .16);
}
.fs-person-ring {
position: absolute;
width: clamp(70px, 7vw, 120px);
height: clamp(70px, 7vw, 120px);
right: -10px;
bottom: 15px;
border-radius: 50%;
border: 1px solid rgba(255, 106, 0, .7);
transform: translateZ(40px) scale(.8);
opacity: .25;
transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
pointer-events: none;
}
.fs-person-ring:before {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--orange);
left: 50%;
top: -5px;
box-shadow: 0 0 25px rgba(255, 106, 0, .8);
}
.fs-person:hover .fs-person-ring {
transform: translateZ(55px) scale(1.05) rotate(25deg);
opacity: 1;
}
.fs-person-name {
position: relative;
z-index: 10;
margin: 34px 0 0;
padding: 0 10px;
text-align: left;
color: var(--ink);
line-height: .95;
letter-spacing: -.045em;
pointer-events: none;
}
.fs-person-name span,
.fs-person-name strong {
display: block;
transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.fs-person-name span {
font-size: clamp(18px, 1.35vw, 24px);
font-weight: 500;
color: rgba(17, 17, 17, .55);
}
.fs-person-name strong {
font-size: clamp(27px, 2.3vw, 39px);
font-weight: 600;
margin-top: 6px;
}
.fs-person:hover .fs-person-name span {
transform: translateX(6px);
}
.fs-person:hover .fs-person-name strong {
transform: translateX(12px);
}
.fs-person-name:after {
content: "";
display: block;
width: 38px;
height: 3px;
background: var(--orange);
margin-top: 16px;
transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.fs-person:hover .fs-person-name:after {
width: 100%;
}
@media(max-width:1100px) {
.fs-team-x-stage {
grid-template-columns: repeat(2, 1fr);
gap: 100px 30px;
}
.fs-person-1,
.fs-person-2,
.fs-person-3,
.fs-person-4 {
--shift: 0px;
}
.fs-person-2,
.fs-person-4 {
transform: translateY(55px) scale(.92);
}
.fs-person-2.is-in,
.fs-person-4.is-in {
transform: translateY(55px) scale(1);
}
}
@media(max-width:640px) {
.fs-team-x {
padding: 70px 18px 100px;
}
.fs-team-x-stage {
grid-template-columns: 1fr;
gap: 80px;
}
.fs-person,
.fs-person-2,
.fs-person-4 {
--shift: 0px;
transform: translateY(70px) scale(.94);
}
.fs-person.is-in,
.fs-person-2.is-in,
.fs-person-4.is-in {
transform: none;
}
.fs-person-frame {
aspect-ratio: .78 / 1;
border-radius: 35px;
}
.fs-person-frame:before {
border-radius: 35px;
}
.fs-person-name {
text-align: left;
padding: 0 8px;
}
.fs-person-ring {
right: 0;
bottom: 10px;
}
}
@media(prefers-reduced-motion:reduce) {
.fs-team-x *,
.fs-team-x *:before,
.fs-team-x *:after {
animation: none !important;
transition: none !important;
}
}