/* ========================================================= PEOPLE PAGE ONLY (Requires: ) ========================================================= */ /* ---- Grid of member tiles ---- */ .people-page .people-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; } @media (max-width: 980px){ .people-page .people-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px){ .people-page .people-grid{ grid-template-columns: 1fr; } } /* ---- Clickable person tile ---- */ .people-page .person-tile{ border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 14px; background: #fff; display:flex; gap:12px; align-items:center; cursor:pointer; text-align:left; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .people-page .person-tile:hover, .people-page .person-tile:focus-visible{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: rgba(0,0,0,.14); outline:none; } /* ---- Avatar used in tiles + modal header ---- */ .people-page .avatar{ width:84px; height:84px; border-radius:25px; object-fit:cover; border: 1px solid rgba(0,0,0,.08); flex: 0 0 auto; background:#f8fafc; } .people-page .tile-meta{ min-width:0; } .people-page .tile-name{ font-weight:800; line-height:1.1; margin:0; font-size:1.03rem; } .people-page .tile-role{ margin:2px 0 0; opacity:.78; font-size:.92rem; } .people-page .tile-area{ margin:6px 0 0; font-size:.88rem; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---- PI fixed card ---- */ .people-page .pi-card{ border: 1px solid rgba(0,0,0,.08); border-radius: 18px; background:#fff; overflow:hidden; } .people-page .pi-head{ display:flex; align-items:center; gap:14px; padding:16px; border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.02); } .people-page .pi-avatar{ width:100px; height:100px; border-radius:25px; object-fit:cover; border: 1px solid rgba(0,0,0,.08); flex: 0 0 auto; background:#f8fafc; } .people-page .pi-head h3{ margin:0; font-size:1.25rem; line-height:1.15; } .people-page .pi-head p{ margin:4px 0 0; opacity:.78; } /* PI body 2 columns */ .people-page .pi-body{ padding:16px; display:grid; grid-template-columns: 1.4fr .6fr; gap:14px; } @media (max-width: 820px){ .people-page .pi-body{ grid-template-columns:1fr; } } /* ---- Panels (used in PI and Modal) ---- */ .people-page .panel{ border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 14px; background:#fff; } .people-page .panel h4{ margin:0 0 10px; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; opacity:.78; } /* Key/value in modal details */ .people-page .kv2{ display:grid; grid-template-columns:120px 1fr; gap:8px 10px; font-size:.95rem; } .people-page .kv2 .k{ font-weight:800; opacity:.78; } /* Education list formatting */ .people-page .edu-list{ list-style:none; padding-left:0; margin:0; } .people-page .edu-list li{ position:relative; padding-left:18px; margin-bottom:16px; } .people-page .edu-list li::before{ content:"-"; position:absolute; left:0; color:#444; } .people-page .degree{ font-weight:600; font-size:1rem; } .people-page .institution{ font-size:.85rem; color:#666; margin-top:2px; } /* ---- Link chips (rename from pill -> chip to avoid collision) ---- */ .people-page .link-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .people-page .chip{ display:inline-flex; align-items:center; gap:6px; border: 1px solid rgba(0,0,0,.12); padding: 6px 10px; border-radius: 999px; font-size:.9rem; text-decoration:none; background:#fff; } .people-page .chip:hover{ background: rgba(0,0,0,.03); text-decoration:none; } /* ---- Modal ---- */ .people-page .modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:18px; z-index:9999; } .people-page .modal-backdrop.active{ display:flex; } .people-page .modal{ width:min(820px, 100%); background:#fff; border-radius:18px; box-shadow: 0 24px 70px rgba(0,0,0,.25); overflow:hidden; border: 1px solid rgba(0,0,0,.10); } .people-page .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.02); } .people-page .modal-title{ display:flex; align-items:center; gap:12px; min-width:0; } .people-page .modal-title h3{ margin:0; font-size:1.1rem; line-height:1.15; } .people-page .modal-title p{ margin:2px 0 0; opacity:.78; font-size:.92rem; } .people-page .icon-btn{ border: 1px solid rgba(0,0,0,.12); background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer; font-weight:700; } .people-page .icon-btn:hover{ background: rgba(0,0,0,.03); } .people-page .modal-body{ padding:16px; display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; } @media (max-width: 820px){ .people-page .modal-body{ grid-template-columns:1fr; } } /* ---- Gallery (from your page) ---- */ .people-page .gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .people-page .gallery-item{ background:#fff; border-radius:12px; overflow:hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transition: transform .25s ease, box-shadow .25s ease; } .people-page .gallery-item:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.1); } .people-page .gallery-item img{ width:100%; height:220px; object-fit:cover; display:block; cursor: zoom-in; } .people-page .gallery-item .cap{ padding: .75rem 1rem; font-size: .9rem; color:#555; background:#fafafa; border-top: 1px solid rgba(0,0,0,0.05); } @media (max-width: 900px){ .people-page .gallery{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .people-page .gallery{ grid-template-columns:1fr; } .people-page .gallery-item img{ height:200px; } } /* Optional highlight first 3 */ .people-page .gallery-item:nth-child(1), .people-page .gallery-item:nth-child(2), .people-page .gallery-item:nth-child(3){ border: 2px solid rgba(30,130,76,0.25); } /* ---- Lightbox ---- */ .people-page .lightbox{ position: fixed; inset: 0; background: rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:1000; } .people-page .lightbox img{ max-width:90%; max-height:90%; border-radius:8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .people-page .lightbox.active{ opacity:1; pointer-events:auto; cursor: zoom-out; }