.ykm-team-grid {
--ykm-team-bg: #eef3f7;
--ykm-team-text: #334155;
--ykm-team-muted: #5f6f7f;
--ykm-team-accent: #5cc6c7;
--ykm-team-badge-text: #ffffff;
--ykm-team-card-shadow: 0 10px 24px rgba(2, 20, 48, 0.08);
--ykm-team-flip-shadow: 0 14px 30px rgba(2, 20, 48, 0.14);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.6rem;
}
.ykm-team-grid[data-shuffle="pending"] {
visibility: hidden;
}
.ykm-team-grid[data-shuffle="done"] {
visibility: visible;
}
@media (max-width: 1100px) {
.ykm-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.ykm-team-grid {
grid-template-columns: 1fr;
}
}
.ykm-team-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: var(--ykm-team-bg);
box-shadow: var(--ykm-team-card-shadow);
}
.ykm-team-card.has-vita {
background: transparent;
box-shadow: none;
overflow: visible;
perspective: 1400px;
}
.ykm-card-inner {
position: relative;
min-height: 100%;
cursor: pointer;
outline: none;
}
.ykm-team-card.has-vita .ykm-card-inner {
position: relative;
display: grid;
height: auto;
width: 100%;
transition: height 0.35s ease;
border-radius: 24px;
overflow: hidden;
}
.ykm-card-face {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.ykm-team-card.has-vita .ykm-card-face {
position: absolute;
inset: 0;
width: 100%;
display: flex;
flex-direction: column;
min-height: 100%;
border-radius: 24px;
overflow: hidden;
background: var(--ykm-team-bg);
box-shadow: var(--ykm-team-flip-shadow);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease, visibility 0.2s ease;
will-change: transform;
}
.ykm-team-card.has-vita .ykm-card-front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ykm-team-card.has-vita .ykm-card-back {
z-index: 1;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
overflow: visible;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ykm-team-card.has-vita .ykm-card-inner.is-flipped .ykm-card-front {
z-index: 1;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ykm-team-card.has-vita .ykm-card-inner.is-flipped .ykm-card-back {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ykm-card-static,
.ykm-card-face {
display: flex;
flex-direction: column;
height: 100%;
}
.ykm-card-media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
flex: 0 0 auto;
}
.ykm-team-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ykm-team-img--placeholder {
background: #d9e3ec;
}
.ykm-badge {
position: absolute;
left: 12px;
top: 12px;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.78rem;
font-weight: 700;
color: var(--ykm-team-badge-text);
background: var(--ykm-team-accent);
text-transform: uppercase;
}
.ykm-card-body {
padding: 1rem 1.1rem 1.25rem;
}
.ykm-name {
margin: 0 0 0.4rem;
color: var(--ykm-team-text);
font-size: 1.45rem;
line-height: 1.2;
}
.ykm-role {
margin: 0;
color: var(--ykm-team-muted);
line-height: 1.45;
}
.ykm-vita {
margin-top: 0.85rem;
color: var(--ykm-team-text);
line-height: 1.55;
font-size: 0.98rem;
}
.ykm-card-inner:focus-visible {
box-shadow: 0 0 0 3px rgba(92, 198, 199, 0.38);
} .ykm-team-grid .ykm-vita .wp-block-list.is-style-check {
list-style: none;
padding-left: 0;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-check li {
position: relative;
padding-left: 1.8em;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-check li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 1em;
height: 1em;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232e7d32' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-arrow {
list-style: none;
padding-left: 0;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-arrow li {
position: relative;
padding-left: 1.8em;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-arrow li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 1em;
height: 1em;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill li {
position: relative;
padding-left: 2.2em;
margin: 0 0 0.5em 0;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill li::before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
width: 1.35em;
height: 1.35em;
border-radius: 999px;
background: var(--theme-palette-color-2, #5cc6c7);
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill li::after {
content: "";
position: absolute;
left: 0.34em;
top: 0.58em;
width: 0.72em;
height: 0.72em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: #fff;
}
@media (max-width: 600px) {
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill li {
padding-left: 2em;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill li::before {
width: 1.2em;
height: 1.2em;
}
.ykm-team-grid .ykm-vita .wp-block-list.is-style-pill li::after {
left: 0.31em;
top: 0.54em;
width: 0.64em;
height: 0.64em;
}
}