/
card markup would be invalid inside one, whereas is transparent and
keeps the clickable cards byte-identical to the static ones. Bootstrap's collapse
data-api calls preventDefault() on anchor triggers, so the href never jumps the
page; it is there as a no-JS fallback. Detail panels sit outside the grid (see
index.html) so an open panel spans the full width rather than stretching one grid
row; Bootstrap animates the height and toggles aria-expanded, which is what the
open-state styling below keys off. */
.area-card-toggle {
display: block;
cursor: pointer;
color: inherit;
text-decoration: none;
/* .area-card already sets background, padding, and the red left rule. */
}
.area-card-toggle:hover { color: inherit; text-decoration: none; }
.area-more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.6rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-red);
}
.area-more i { font-size: 0.7rem; transition: transform 0.2s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .area-more i { transition: none; } }
.area-card-toggle[aria-expanded="true"] {
background: var(--bs-cool-gray);
box-shadow: 0 4px 16px rgba(12, 35, 75, 0.12);
}
.area-card-toggle[aria-expanded="true"] .area-more i { transform: rotate(180deg); }
/* ── Research area detail panels ──
The gap above the panel lives on .area-detail, not on the .collapse wrapper, so
it simply is not rendered while the wrapper is display:none; .collapsing clips
with overflow:hidden, so it does not disturb the height animation either. */
.area-detail {
margin-top: 0.75rem;
background: #fff;
border: 1px solid #dee2e6;
border-top: 4px solid var(--bs-red);
padding: 1.5rem 1.5rem 1.3rem;
}
.area-detail > *:last-child { margin-bottom: 0; }
.area-detail ul:last-child { margin-bottom: 0; }
/* ── People ── */
.people-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0.75rem;
}
.person-card {
background: #fff;
border: 1px solid #dee2e6;
border-top: 4px solid var(--bs-red);
padding: 1.3rem 1.1rem;
text-align: center;
transition: box-shadow 0.2s;
}
.person-card:hover { box-shadow: 0 4px 16px rgba(12, 35, 75, 0.12); }
.person-card .avatar {
width: 110px;
height: 110px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 0.75rem;
display: block;
box-shadow: 0 4px 16px rgba(12, 35, 75, 0.18);
}
/* Placeholder for members without a photo yet. */
.person-card .avatar-blank {
background: var(--bs-cool-gray);
color: var(--bs-blue);
font-size: 2.2rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.person-card .person-name { font-weight: 700; color: var(--bs-blue); line-height: 1.3; }
.person-card .person-role { color: #495057; font-size: 0.85rem; margin-top: 0.15rem; }
.person-card .person-links { margin-top: 0.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
/* Empty-roster note, e.g. "no alumni yet". */
.roster-empty { color: #495057; font-style: italic; margin-bottom: 0; }
/* ── Code / repositories ── */
.repo-entry {
background: #fff;
border: 1px solid #dee2e6;
border-left: 4px solid var(--bs-red);
padding: 1.1rem 1.3rem;
margin-bottom: 0.75rem;
display: flex;
align-items: flex-start;
gap: 0.9rem;
transition: box-shadow 0.2s;
}
.repo-entry:hover { box-shadow: 0 4px 16px rgba(12, 35, 75, 0.12); }
.repo-entry:last-child { margin-bottom: 0; }
.repo-entry > i {
color: var(--bs-red);
font-size: 1.1rem;
flex-shrink: 0;
margin-top: 0.25rem;
}
.repo-name { font-weight: 700; color: var(--bs-blue); line-height: 1.4; margin-bottom: 0.2rem; }
.repo-desc { color: #495057; margin-bottom: 0.6rem; }
.repo-entry .pub-links { margin-top: 0; }