/* ========================================================================== Team page (page-team.php): the roster grids (template-parts/team/roster.php) and their bio dialogs, plus the "Life in the Pack" culture section (template-parts/team/culture.php).
carries wf-industry wf-service wf-team, so the shared section primitives (.wf-industry__section, .wf-home-head, .wf-ind-overview__*, .wf-svc-grid/.wf-svc-tile, .wf-ind-more) already apply via industry.css and service.css -- only the team-only components live here. SPECIFICITY NOTE -- same as industry.css/service.css: Elementor's kit stylesheet ships element rules at 0-1-1 (.elementor-kit-6 a / button / img), which beat a bare single class, so the resets below re-assert link colour, image radius and button styling inside the .wf-team scope; each component below re-applies its own radius afterwards. ========================================================================== */ /* ---------- Scope resets ---------- */ body .wf-team a { color: inherit; text-decoration: none; } body .wf-team img { border-radius: 0; max-width: 100%; height: auto; } .wf-team [hidden] { display: none !important; } /* The dialog renders in the browser's top layer (or, in the setAttribute fallback, simply overlays the page), so the scroll lock belongs on rather than anything inside .wf-team. */ html.wf-dialog-open { overflow: hidden; } /* ---------- Roster cards ---------- */ .wf-team .wf-team__grid { display: grid; grid-template-columns: 1fr; gap: 32px 24px; margin: 0; padding: 0; list-style: none; } .wf-team .wf-team__card { display: flex; flex-direction: column; gap: 10px; margin: 0; text-align: center; } .wf-team .wf-team__open { display: block; width: 100%; padding: 0; margin: 0 0 4px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; } .wf-team .wf-team__open:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 4px; border-radius: var(--wf-radius-md); } .wf-team .wf-team__img, .wf-team .wf-team__placeholder { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--wf-radius-md); object-fit: cover; } .wf-team .wf-team__img { /* Headshots are transparent PNG cutouts on some members, same as the team-spotlight element, so the box needs its own off-white ground. */ background: var(--wf-bg); border: 1px solid var(--wf-border); } .wf-team .wf-team__placeholder { display: flex; align-items: center; justify-content: center; background: var(--wf-navy); color: var(--wf-white); font: 700 clamp(1.5rem, 4vw, 2.25rem)/1 var(--wf-font-display); letter-spacing: .02em; } .wf-team .wf-team__name { margin: 0; font-size: 1.125rem; color: var(--wf-text-dark); } .wf-team .wf-team__role { margin: 0; font: 500 .9375rem/1.4 var(--wf-font-body); color: var(--wf-text-mute); } .wf-team .wf-team__bio { margin: 0; font: 400 .9375rem/1.6 var(--wf-font-body); color: var(--wf-text); } .wf-team .wf-team__bio p { margin: 0; } .wf-team .wf-team__bio p + p { margin-top: .5em; } .wf-team .wf-team__card .wf-ind-more { justify-content: center; margin-top: auto; padding-top: 8px; } @media (min-width: 600px) { .wf-team .wf-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* A lone card (or the leftover odd one) never stretches to half the row. */ .wf-team .wf-team__grid--1 { grid-template-columns: minmax(0, 320px); justify-content: center; } } @media (min-width: 900px) { .wf-team .wf-team__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wf-team .wf-team__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Bio dialog ---------- */ .wf-team-dialog { position: fixed; inset: 0; z-index: 1000; margin: auto; width: min(92vw, 960px); max-width: 960px; max-height: 88vh; overflow-y: auto; padding: 32px; border: none; border-radius: var(--wf-radius-lg); box-shadow: var(--wf-shadow-lg); background: var(--wf-white); color: var(--wf-text); } .wf-team-dialog::backdrop { background: rgba(10, 22, 40, .6); } .wf-team-dialog .wf-team-dialog__close { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--wf-bg); border: 1px solid var(--wf-border); border-radius: 999px; color: var(--wf-text-dark); cursor: pointer; } .wf-team-dialog .wf-team-dialog__close:hover, .wf-team-dialog .wf-team-dialog__close:focus-visible { background: var(--wf-bg-blue); outline: 2px solid var(--wf-blue); outline-offset: 2px; } .wf-team-dialog .wf-team-dialog__inner { display: flex; flex-direction: column; gap: 24px; } .wf-team-dialog .wf-team-dialog__media { flex: none; width: 100%; max-width: 220px; margin-inline: auto; } .wf-team-dialog .wf-team-dialog__img, .wf-team-dialog .wf-team-dialog__placeholder { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--wf-radius-md); object-fit: cover; background: var(--wf-bg); } .wf-team-dialog .wf-team-dialog__placeholder { display: flex; align-items: center; justify-content: center; background: var(--wf-navy); color: var(--wf-white); font: 700 clamp(2rem, 6vw, 3rem)/1 var(--wf-font-display); } .wf-team-dialog .wf-team-dialog__name { margin: 0 0 4px; } .wf-team-dialog .wf-team-dialog__role { margin: 0 0 12px; font: 500 1rem/1.4 var(--wf-font-body); color: var(--wf-text-mute); } .wf-team-dialog .wf-team-dialog__contact { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; font: 600 .9375rem/1.4 var(--wf-font-body); } .wf-team-dialog .wf-team-dialog__contact a { color: var(--wf-blue); } .wf-team-dialog .wf-team-dialog__contact a:hover, .wf-team-dialog .wf-team-dialog__contact a:focus-visible { color: var(--wf-blue-hover); } .wf-team-dialog .wf-team-dialog__bio { font: 400 1rem/1.7 var(--wf-font-body); color: var(--wf-text); } .wf-team-dialog .wf-team-dialog__bio p { margin: 0 0 1em; } .wf-team-dialog .wf-team-dialog__bio p:last-child { margin-bottom: 0; } @media (min-width: 760px) { .wf-team-dialog .wf-team-dialog__inner { flex-direction: row; align-items: flex-start; } .wf-team-dialog .wf-team-dialog__media { width: 260px; margin-inline: 0; } .wf-team-dialog .wf-team-dialog__body { flex: 1; min-width: 0; } } /* ---------- Culture gallery ("Life in the Pack") ---------- */ .wf-team .wf-team__gallery { display: grid; grid-template-columns: 1fr; gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; } .wf-team .wf-team__gallery-item { margin: 0; overflow: hidden; border-radius: var(--wf-radius-md); aspect-ratio: 4 / 3; } .wf-team .wf-team__gallery-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--wf-radius-md); } @media (min-width: 600px) { .wf-team .wf-team__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .wf-team .wf-team__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }