.team-member-card {
display: flex;
flex-direction: column;
height: 100%;
}
.team-img {
flex-shrink: 0;
}
.team-img {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
}
.team-img__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 2px;
transition: transform 0.4s ease;
} .team-img__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.4) 40%,
transparent 70%
);
border-radius: 2px;
z-index: 1;
}
.team-img__content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1.25rem;
z-index: 2;
color: #fff;
}
.team-name {
color: #fff;
}
.team-position {
font-size: 0.8rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--bs-primary);
}
.team-member-card:hover .team-indicator {
background: var(--bs-primary);
color: #000;
}
#teamOffcanvasImg {
border-radius: 2px;
}
.team-member-card:hover .team-img__img {
transform: scale(1.05);
}
.team-offcanvas {
width: min(450px, 100vw) !important;
border-left: 0;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.16);
}
.team-offcanvas .offcanvas-header.team-offcanvas-header {
padding: 1rem 1rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0;
}
.team-offcanvas-header-spacer {
flex: 1 1 auto;
}
.team-offcanvas-close {
opacity: 1;
border: 1px solid var(--bs-primary);
background-color: #fff;
flex-shrink: 0;
}
.team-offcanvas-close:hover,
.team-offcanvas-close:focus {
opacity: 1;
}
.team-offcanvas .offcanvas-body {
height: 100%;
min-height: 0;
overflow: hidden;
}
.team-offcanvas-image-wrap {
padding: 0 1.5rem 1.5rem;
}
.team-offcanvas-image-frame {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f3f3f3;
}
.team-offcanvas-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-offcanvas-text {
padding: 0 1.5rem 1.5rem;
min-height: 0;
overflow: hidden;
}
.team-offcanvas-bio {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--bs-primary) rgba(0, 0, 0, 0.08);
}
.team-offcanvas-bio::-webkit-scrollbar {
width: 10px;
}
.team-offcanvas-bio::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.06);
border-radius: 999px;
}
.team-offcanvas-bio::-webkit-scrollbar-thumb {
background: var(--bs-primary);
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.9);
}
.team-offcanvas-bio::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--bs-primary) 85%, #000 15%);
}
.team-offcanvas-bio > *:last-child {
margin-bottom: 0;
}
.team-offcanvas-footer {
flex: 0 0 auto;
background: #fff;
}
#teamPrev,
#teamNext {
width: 52px;
height: 52px;
padding: 0;
}
#teamPrev svg,
#teamNext svg {
display: block;
}
.team-fade-content {
opacity: 0;
transition: opacity 0.2s ease;
min-height: 0;
}
.team-fade-content.showing {
opacity: 1;
}
@media (max-width: 767.98px) {
.team-offcanvas {
width: 100vw !important;
}
.team-offcanvas .offcanvas-header.team-offcanvas-header {
padding: 1rem;
}
.team-offcanvas-image-wrap {
padding: 0 1rem 1rem;
}
.team-offcanvas-text {
padding: 0 1rem 1rem;
}
.team-offcanvas-footer {
padding: 1rem !important;
}
}
.team-member-card {
display: flex;
flex-direction: column;
cursor: pointer;
transition: opacity 0.2s ease;
outline-offset: 4px;
}
.team-member-card:hover {
opacity: 0.88;
}
.team-member-card:focus-visible {
outline: 2px solid var(--bs-primary);
border-radius: var(--bs-border-radius);
}
.team-img img {
width: 100%;
height: 100% !important;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.team-member-card:hover .team-img img {
transform: scale(1.04);
}
.team-indicator {
position: absolute;
bottom: 0;
right: 0;
background-color: var(--bs-primary);
color: var(--bs-primary-bg-subtle, #fff);
top: 12px;
right: 12px;
width: 32px;
height: 32px;
z-index: 3;
display: flex;
border-radius: 2px;
justify-content: center;
text-align: center;
align-items: center;
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.team-indicator .plus {
font-size: 2rem;
line-height: 1;
font-weight: 400;
}
.team-indicator .hint {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.team-member-card:hover .team-indicator,
.team-member-card:focus-visible .team-indicator {
opacity: 1;
transform: translateY(0);
}
.team-info {
padding-top: 0.75rem;
}
.team-info .h5 {
font-weight: 500;
color: var(--bs-secondary);
margin-bottom: 0.2rem;
}
.team-info .subheading {
color: var(--bs-secondary-color);
font-size: 0.85rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#teamOffcanvas {
width: min(420px, 92vw);
border-left: 1px solid var(--bs-border-color);
background-color: var(--bs-body-bg);
}
#teamOffcanvas .offcanvas-header {
border-bottom: none;
}
#teamOffcanvas .btn-close {
border: 1.5px solid var(--bs-primary) !important;
opacity: 0.85;
transition: opacity 0.2s, background-color 0.2s;
border-radius: 0;
}
#teamOffcanvas .btn-close:hover {
opacity: 1;
background-color: var(--bs-primary-bg-subtle);
}
#teamOffcanvasImg {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background-color: var(--bs-secondary-bg);
}
#teamOffcanvasLabel {
font-weight: 500;
color: var(--bs-body-color);
margin-bottom: 0.2rem;
}
#teamOffcanvasPosition {
color: var(--bs-secondary-color);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.team-bio {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--bs-secondary-color);
}
.team-bio p:last-child {
margin-bottom: 0;
}
.team-fade-content {
transition: opacity 0.2s ease;
}
.team-fade-content.fading {
opacity: 0;
}
#teamPrev,
#teamNext {
min-width: 90px;
font-size: 0.85rem;
font-weight: 500;
border-color: var(--bs-border-color);
color: var(--bs-secondary-color);
transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
#teamPrev:not(:disabled):hover,
#teamNext:not(:disabled):hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
background-color: var(--bs-primary-bg-subtle);
}
#teamPrev:disabled,
#teamNext:disabled {
opacity: 0.35;
}