/* --------------------------------------------------------------------------- Team 2026 Design tokens taken from the "Teams Page Rework" Canva: #005CA4 active filter pill (theme --primaryColor) #E0EBF7 inactive filter pill #54565A body / heading grey #00A6CE "Bio" link #F2F8FF popup card #FF4D00 intro divider (theme --accentColorTwo) --------------------------------------------------------------------------- */ /* Tokens are declared on both roots: module.js moves an open popup to , where it would otherwise inherit none of these. */ .team-2026, .team-popup { --team-blue: var(--primaryColor, #005CA4); --team-pill-bg: #e0ebf7; --team-grey: #54565a; --team-bio: #00a6ce; --team-popup-bg: #f2f8ff; --team-disc: #f2f8ff; --team-accent: var(--accentColorTwo, #ff4d00); --team-gutter: 15px; } /* ---------------------------------------- Department filter */ .team-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.75rem; } .team-filter[hidden] { display: none; } .team-filter__pill, .team-filter__pill:hover, .team-filter__pill:focus { display: inline-block; margin: 0; padding: 9px 22px; border: 0; border-radius: 10px; box-shadow: none; background-color: var(--team-pill-bg); color: var(--team-grey); font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.375; text-align: center; text-decoration: none; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .team-filter__pill:before, .team-filter__pill:after { content: none; background-color: transparent; } .team-filter__pill:hover { background-color: #d0e2f4; color: var(--team-grey); } .team-filter__pill[aria-pressed="true"], .team-filter__pill[aria-pressed="true"]:hover, .team-filter__pill[aria-pressed="true"]:focus { background-color: var(--team-blue); color: #fff; font-weight: 600; } .team-filter__pill:focus-visible { outline: 2px solid var(--team-blue); outline-offset: 2px; } /* ---------------------------------------- Department intro copy */ .team-intro[hidden] { display: none; } .team-intro { margin: 0 0 1.5rem; } .team-intro__copy { color: var(--team-grey); font-size: 1rem; font-weight: 300; line-height: 1.6; max-width: 60rem; } .team-intro__copy p { margin: 0 0 .75rem; } .team-intro__copy p:last-child { margin-bottom: 0; } .team-intro__copy strong { font-weight: 600; } .team-intro__divider { background-color: var(--team-accent); height: 3px; margin-top: 1.25rem; max-width: 80px; width: 100%; } /* ---------------------------------------- Card grid */ .team-grid { display: flex; flex-wrap: wrap; } .team-member-card-container { padding: var(--team-gutter); background: transparent; width: 100%; } .team-member-card-container[hidden] { display: none; } .team-member-card-container.half { width: 50%; } .team-member-card-container.third { width: 33.33%; } .team-member-card-container.quarter { width: 25%; } .team-member-card { position: relative; top: 0; background-color: transparent; transition: top .2s ease; margin-bottom: 1.8rem !important; } .team-member-card:hover { top: -5px; } .team-member-card-container.rounded .team-member-card { border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden; } /* The headshots are cut-outs framed edge-to-edge (body touching the bottom of the frame), so they are meant to be circle-cropped: a square box with the disc colour behind, and the portrait filling it. The old rule cropped a 200px circle into a 220x154 box, which flattened the top and bottom. */ .team-member-card .image-container { position: relative; width: 100%; max-width: 200px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background-color: var(--team-disc); } @supports not (aspect-ratio: 1 / 1) { .team-member-card .image-container { height: 200px; } } .team-member-card__trigger, .team-member-card__trigger:hover, .team-member-card__trigger:focus { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; cursor: pointer; overflow: visible; } .team-member-card__trigger:before, .team-member-card__trigger:after { content: none; background-color: transparent; } .team-member-card__trigger:focus-visible { outline: 2px solid var(--team-blue); outline-offset: -2px; } .team-member-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-width: 0; max-width: none; object-fit: cover; object-position: center top; background-color: transparent; border-radius: 50%; cursor: pointer; } .team-member-card:hover img { opacity: .85; } .team-member-info { text-align: center; padding-top: .35rem; } .team-member-info h3 { display: block; text-align: center; margin: 0; padding: 0; color: var(--team-grey); font-size: 1.35rem; font-weight: 600; line-height: 1.25; } .team-member-info h4 { display: block; text-align: center; margin: .1rem 0 0; color: var(--team-grey); font-size: 1.1rem; font-weight: 300; line-height: 1.3; } .team-member-info p { padding: 0 20px; } .team-member-card__bio, .team-member-card__bio:hover, .team-member-card__bio:focus { display: inline-block; margin: .6rem 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--team-bio); font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: .01em; text-transform: none; text-decoration: none; cursor: pointer; } .team-member-card__bio:before, .team-member-card__bio:after { content: none; background-color: transparent; } .team-member-card__bio:hover { color: var(--team-blue); text-decoration: underline; } .team-member-card__bio:focus-visible { outline: 2px solid var(--team-blue); outline-offset: 2px; } /* ---------------------------------------- Popup / modal Self-contained: no Magnific Popup, no jQuery. */ .team-popup[hidden] { display: none !important; } .team-popup { position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; opacity: 0; transition: opacity .25s ease; } .team-popup.is-open { opacity: 1; } .team-popup__backdrop { position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0; background: rgba(11, 11, 11, .8); } .team-popup__scroll { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 1rem 8px; text-align: center; } .team-popup__dialog { position: relative; display: inline-block; width: 100%; max-width: 800px; margin: 1rem auto; padding: 2.25rem 2.25rem 2.5rem; background: var(--team-popup-bg); border-radius: 10px; color: var(--team-grey); text-align: left; transform: translateY(-12px); transition: transform .25s ease; } .team-popup.is-open .team-popup__dialog { transform: translateY(0); } .team-popup__close, .team-popup__close:hover, .team-popup__close:focus { position: absolute; top: 4px; right: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--team-grey); font-family: inherit; font-size: 2rem; font-weight: 400; line-height: 44px; text-align: center; text-decoration: none; cursor: pointer; opacity: .65; transition: opacity .15s ease; } .team-popup__close:hover, .team-popup__close:focus { opacity: 1; } .team-popup__close:before, .team-popup__close:after { content: none; background-color: transparent; } .team-popup__close:focus-visible { outline: 2px solid var(--team-blue); outline-offset: -2px; } /* Popup header: round headshot beside name / title / location / LinkedIn */ .team-popup__header { display: flex; align-items: flex-start; gap: 1.75rem; padding-right: 2.5rem; } .team-popup__avatar { flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background-color: #fff; } .team-popup__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; } .team-popup__identity { flex: 1 1 auto; min-width: 0; padding-top: .5rem; } .team-popup__name { margin: 0; color: var(--team-grey); font-size: 2rem; font-weight: 500; line-height: 1.15; } .team-popup__title { margin: .15rem 0 0; color: var(--team-grey); font-size: 1.25rem; font-weight: 300; line-height: 1.3; } .team-popup__meta { margin: .85rem 0 0; color: var(--team-grey); font-size: .95rem; font-weight: 300; line-height: 1.3; } .team-popup__meta:first-of-type { margin-top: 1.1rem; } .team-popup__icon { display: inline-block; margin-right: 8px; fill: var(--team-grey); vertical-align: middle; } .team-popup__meta .location { vertical-align: middle; } a.social-link { color: var(--team-grey); text-decoration: underline; vertical-align: middle; } a.social-link:hover { text-decoration: none; } /* Popup body: white card holding the bio, expertise and lists */ .team-popup__body { margin-top: 1.75rem; padding: 1.75rem 1.75rem 1.5rem; background-color: #fff; border-radius: 20px; } .team-popup__bio { color: var(--team-grey); font-size: 1rem; font-weight: 300; line-height: 1.6; } .team-popup__expertise { margin: 1.1rem 0 0; color: var(--team-grey); font-size: 1rem; font-weight: 300; line-height: 1.6; } .team-popup__expertise strong { color: var(--team-grey); font-weight: 600; } .team-popup__section { margin-top: 1.5rem; } .team-popup__label { margin: 0 0 .5rem; color: var(--team-grey); font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .team-popup__body .rich-text { color: var(--team-grey); font-size: 1rem; font-weight: 300; line-height: 1.6; } .team-popup__body .rich-text p { margin: 0 0 .5rem; } .team-popup__body .rich-text p:last-child { margin-bottom: 0; } .team-popup__body ul, .team-popup__body ol { margin: 0 0 0 1.1rem; padding: 0; } .team-popup__body li { margin: 0 0 .3rem; padding: 0; } .team-popup__body li:last-child { margin-bottom: 0; } .team-popup__body li::marker { color: var(--team-grey); } body.team-popup-open { overflow: hidden; } /* ---------------------------------------- Responsive */ @media (max-width: 991px) { .team-member-card-container.quarter { width: 33.33%; } } @media (max-width: 767px) { .team-member-card-container, .team-member-card-container.half, .team-member-card-container.third, .team-member-card-container.quarter { width: 100%; } .team-popup__dialog { padding: 2rem 1.25rem 1.75rem; } .team-popup__header { flex-direction: column; align-items: center; gap: 1rem; padding-right: 0; text-align: center; } .team-popup__identity { padding-top: 0; } .team-popup__name { font-size: 1.6rem; } .team-popup__title { font-size: 1.1rem; } .team-popup__body { padding: 1.25rem 1.1rem; } } @media (prefers-reduced-motion: reduce) { .team-popup, .team-popup__dialog, .team-member-card, .team-filter__pill { transition: none; } .team-popup__dialog { transform: none; } }