.tpb-team,.tpb-profile{box-sizing:border-box;font-family:var(--tpb-body-font);color:var(--tpb-text)} .tpb-team *,.tpb-profile *{box-sizing:border-box} .tpb-team{background:transparent} .tpb-team-grid{display:grid;grid-template-columns:repeat(var(--tpb-columns,3),minmax(0,1fr));gap:var(--tpb-grid-gap);align-items:start} .tpb-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;background:var(--tpb-card-bg);color:var(--tpb-text);border:var(--tpb-card-border-width) solid var(--tpb-border);border-radius:var(--tpb-card-radius);box-shadow:var(--tpb-card-shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .tpb-card:hover{transform:translateY(-2px)} .tpb-card__media{display:block;position:relative;overflow:hidden;aspect-ratio:var(--tpb-image-ratio);background:color-mix(in srgb,var(--tpb-card-bg) 92%,var(--tpb-cyan));text-decoration:none} .tpb-card__image{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--tpb-image-position)} .tpb-card__placeholder{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,var(--tpb-text) 0%,color-mix(in srgb,var(--tpb-text) 72%,var(--tpb-purple)) 100%);font:700 clamp(42px,8vw,96px)/1 var(--tpb-heading-font);letter-spacing:-.055em;color:var(--tpb-featured-text);text-shadow:0 1px 0 rgba(0,0,0,.08)}.tpb-card__placeholder::before,.tpb-card__placeholder::after{content:"";position:absolute;z-index:-1;border-radius:999px;pointer-events:none}.tpb-card__placeholder::before{width:72%;aspect-ratio:1;right:-22%;top:-28%;background:color-mix(in srgb,var(--tpb-cyan) 35%,transparent)}.tpb-card__placeholder::after{width:54%;aspect-ratio:1;left:-18%;bottom:-26%;background:color-mix(in srgb,var(--tpb-purple) 34%,transparent)} .tpb-card__body{display:flex;flex:1;flex-direction:column;gap:16px;padding:var(--tpb-card-padding)} .tpb-card__body--align-left{text-align:left} .tpb-card__body--align-center{text-align:center} .tpb-card__body--align-right{text-align:right} .tpb-card__body--align-left .tpb-socials{justify-content:flex-start} .tpb-card__body--align-center .tpb-socials{justify-content:center} .tpb-card__body--align-right .tpb-socials{justify-content:flex-end} .tpb-card__body--align-left .tpb-profile-action--button,.tpb-card__body--align-left .tpb-profile-action--text{align-self:flex-start} .tpb-card__body--align-center .tpb-profile-action--button,.tpb-card__body--align-center .tpb-profile-action--text{align-self:center} .tpb-card__body--align-right .tpb-profile-action--button,.tpb-card__body--align-right .tpb-profile-action--text{align-self:flex-end} .tpb-card__main{display:flex;flex-direction:column;gap:7px} .tpb-card__name{margin:0;font:700 var(--tpb-name-size)/1.2 var(--tpb-heading-font);letter-spacing:-.02em;color:var(--tpb-text)} .tpb-card__name a{color:inherit;text-decoration:none} .tpb-card__role{margin:0;font:400 var(--tpb-role-size)/1.5 var(--tpb-body-font);color:var(--tpb-muted)} .tpb-card__summary{margin-top:8px;font:400 var(--tpb-body-size)/1.55 var(--tpb-body-font);color:var(--tpb-muted)} .tpb-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto} .tpb-social-link{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--tpb-social-border);border-radius:999px;background:var(--tpb-social-bg);color:var(--tpb-social-text);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .tpb-social-link:hover,.tpb-social-link:focus-visible{background:var(--tpb-text);color:var(--tpb-card-bg);border-color:var(--tpb-text);transform:translateY(-1px)} .tpb-social-link svg{width:16px;height:16px;fill:currentColor} .tpb-profile-action{margin-top:2px;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;font:700 14px/1.2 var(--tpb-heading-font);border-radius:var(--tpb-action-radius);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .tpb-profile-action--bar{padding:7px 8px 7px 14px;background:var(--tpb-action-bg);color:var(--tpb-action-text);border:1px solid color-mix(in srgb,var(--tpb-border) 84%,transparent)} .tpb-profile-action--button{width:max-content;padding:8px 8px 8px 16px;background:var(--tpb-action-bg);color:var(--tpb-action-text);border:1px solid var(--tpb-border)} .tpb-profile-action--text{width:max-content;min-height:36px;padding:0;background:transparent;color:var(--tpb-action-text);border:0} .tpb-profile-action:hover,.tpb-profile-action:focus-visible{background:var(--tpb-action-hover-bg);color:var(--tpb-action-hover-text);outline:none} .tpb-profile-action:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--tpb-purple) 38%,transparent)} .tpb-profile-action__icon{flex:0 0 auto;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--tpb-action-icon-bg);color:var(--tpb-action-icon-text);transition:transform .18s ease,background .18s ease,color .18s ease} .tpb-profile-action:hover .tpb-profile-action__icon,.tpb-profile-action:focus-visible .tpb-profile-action__icon{background:var(--tpb-action-icon-hover-bg);color:var(--tpb-action-icon-hover-text);transform:translateX(2px)} .tpb-profile-action__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* Featured card treatment */ .tpb-card--featured{background:var(--tpb-featured-bg);color:var(--tpb-featured-text);border-color:var(--tpb-featured-border);border-radius:var(--tpb-featured-radius);box-shadow:var(--tpb-featured-shadow)} .tpb-card--featured .tpb-card__media{aspect-ratio:var(--tpb-image-ratio)} .tpb-card--featured .tpb-card__body{padding:var(--tpb-featured-padding)} .tpb-card--featured .tpb-card__name{font-size:var(--tpb-featured-name-size);color:var(--tpb-featured-text)} .tpb-card--featured .tpb-card__role{font-size:var(--tpb-featured-role-size);color:var(--tpb-featured-muted)} .tpb-card--featured .tpb-card__summary{font-size:var(--tpb-featured-body-size);color:var(--tpb-featured-muted)} .tpb-card--featured .tpb-profile-action--bar,.tpb-card--featured .tpb-profile-action--button{background:var(--tpb-featured-action-bg);color:var(--tpb-featured-action-text);border-color:transparent} .tpb-card--featured .tpb-profile-action--text{color:var(--tpb-featured-text)} .tpb-card--featured .tpb-profile-action__icon{background:var(--tpb-featured-action-icon-bg);color:var(--tpb-featured-action-icon-text)} .tpb-card--featured .tpb-profile-action:hover,.tpb-card--featured .tpb-profile-action:focus-visible{background:var(--tpb-featured-action-hover-bg);color:var(--tpb-featured-action-hover-text)} .tpb-card--featured .tpb-profile-action:hover .tpb-profile-action__icon,.tpb-card--featured .tpb-profile-action:focus-visible .tpb-profile-action__icon{background:var(--tpb-featured-action-icon-hover-bg);color:var(--tpb-featured-action-icon-hover-text)} .tpb-card--featured .tpb-social-link{border-color:color-mix(in srgb,var(--tpb-featured-text) 30%,transparent)} /* Exactly three people, one featured, standard three-column layout. * Standard cards size to their own content instead of stretching to the * featured founder card. The featured card is raised slightly to establish * hierarchy without changing column width or portrait geometry. */ @media (min-width:1201px){ .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-team-grid{ align-items:start; } .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-card{ height:auto; align-self:start; } .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-card:not(.tpb-card--featured){ min-height:0; } .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-card--featured{ transform:translateY(-28px); } .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-card--featured:hover{ transform:translateY(-30px); } } /* Card-only members deliberately have no profile CTA or stretched card link. * Their social/contact controls follow the biography naturally rather than * being pushed to the bottom of an artificially stretched card. */ .tpb-card--profile-disabled .tpb-card__body{ flex:0 0 auto; } .tpb-card--profile-disabled .tpb-socials{ margin-top:2px; } /* Exactly three people: editorial featured split */ .tpb-count--3 .tpb-grid--featured-split{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch} .tpb-count--3.tpb-featured-align--left .tpb-grid--featured-split .tpb-card--featured{grid-column:1;grid-row:1 / span 2} .tpb-count--3.tpb-featured-align--left .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured){grid-column:2} .tpb-count--3.tpb-featured-align--right .tpb-grid--featured-split{grid-template-columns:minmax(280px,1fr) minmax(0,1.35fr)} .tpb-count--3.tpb-featured-align--right .tpb-grid--featured-split .tpb-card--featured{grid-column:2;grid-row:1 / span 2} .tpb-count--3.tpb-featured-align--right .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured){grid-column:1} .tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured){display:grid;grid-template-columns:minmax(130px,38%) minmax(0,1fr)} .tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured) .tpb-card__media{height:100%;aspect-ratio:auto;min-height:240px} .tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured) .tpb-card__body{padding:18px;gap:12px} .tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured) .tpb-card__summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tpb-count--3 .tpb-grid--featured-split .tpb-card--featured .tpb-card__media{min-height:420px} /* Exactly three people: centred feature above two equal cards */ .tpb-count--3 .tpb-grid--featured-center{grid-template-columns:repeat(2,minmax(0,1fr))} .tpb-count--3 .tpb-grid--featured-center .tpb-card--featured{grid-column:1 / -1;display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(0,1fr)} .tpb-count--3 .tpb-grid--featured-center .tpb-card--featured .tpb-card__media{height:100%;aspect-ratio:auto;min-height:410px} /* Full and wider featured card behaviour in larger grids */ .tpb-grid--featured-full .tpb-card--featured{grid-column:1 / -1} .tpb-grid--featured-wide .tpb-card--featured{grid-column:span 2} /* Filters */ .tpb-filter{margin:0 0 22px} .tpb-filter--tabs{display:flex;flex-wrap:wrap;gap:9px} .tpb-filter--tabs button,.tpb-filter--dropdown select{font:700 13px/1 var(--tpb-heading-font);border:1px solid var(--tpb-border);background:var(--tpb-card-bg);color:var(--tpb-text);border-radius:999px;min-height:40px;padding:0 15px} .tpb-filter--tabs button{cursor:pointer} .tpb-filter--tabs button.is-active{background:var(--tpb-text);color:var(--tpb-card-bg);border-color:var(--tpb-text)} .tpb-filter--dropdown select{min-width:220px;border-radius:10px} .tpb-card[hidden]{display:none!important} /* Dark palette */ .tpb-theme--dark{--tpb-card-bg:var(--tpb-dark-card-bg);--tpb-text:var(--tpb-dark-text);--tpb-muted:var(--tpb-dark-muted);--tpb-border:var(--tpb-dark-border);--tpb-social-bg:var(--tpb-dark-card-bg);--tpb-social-text:var(--tpb-dark-text);--tpb-social-border:var(--tpb-dark-border)} .tpb-member-image{display:block;max-width:100%;height:auto}.tpb-member-image-link{display:block}.tpb-member-image--placeholder{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;max-width:100%;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,var(--tpb-text,#005461) 0%,color-mix(in srgb,var(--tpb-text,#005461) 72%,var(--tpb-purple,#6257E3)) 100%);color:var(--tpb-featured-text,#F0EEE9);font:700 clamp(54px,10vw,110px)/1 var(--tpb-heading-font,Metropolis,Arial,Helvetica,sans-serif);letter-spacing:-.055em}.tpb-member-image--placeholder::before,.tpb-member-image--placeholder::after{content:"";position:absolute;z-index:-1;border-radius:999px}.tpb-member-image--placeholder::before{width:72%;aspect-ratio:1;right:-22%;top:-28%;background:color-mix(in srgb,var(--tpb-cyan,#4EB6B0) 35%,transparent)}.tpb-member-image--placeholder::after{width:54%;aspect-ratio:1;left:-18%;bottom:-26%;background:color-mix(in srgb,var(--tpb-purple,#6257E3) 34%,transparent)} /* Responsive leadership behaviour. * Laptop/tablet: featured people move first. With exactly one featured person, * it spans the full row and becomes a compact horizontal card; standard members * then use two columns. With several featured people, they lead the same two-column * grid unless the shortcode explicitly requests full-row featured cards. */ @media (max-width:1200px){ .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-card--featured{transform:none} .tpb-count--3[data-tpb-featured-count="1"].tpb-featured-size--standard .tpb-card--featured:hover{transform:translateY(-2px)} .tpb-team-grid{--tpb-columns:2!important;grid-template-columns:repeat(2,minmax(0,1fr))!important} .tpb-team[data-tpb-featured-count]:not([data-tpb-featured-count="0"]) .tpb-card--featured{order:-1} /* Reset the bespoke desktop three-person geometry. */ .tpb-count--3 .tpb-grid--featured-split,.tpb-count--3 .tpb-grid--featured-center{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto} .tpb-count--3 .tpb-grid--featured-split .tpb-card,.tpb-count--3 .tpb-grid--featured-center .tpb-card{grid-column:auto;grid-row:auto} .tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured),.tpb-count--3.tpb-featured-align--left .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured),.tpb-count--3.tpb-featured-align--right .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured){display:flex;grid-column:auto} .tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured) .tpb-card__media{height:auto;min-height:0;aspect-ratio:var(--tpb-image-ratio)} /* One featured member: full-width, first, horizontal. */ .tpb-team[data-tpb-featured-count="1"] .tpb-team-grid .tpb-card--featured{grid-column:1 / -1!important;grid-row:auto!important;order:-1;display:grid!important;grid-template-columns:minmax(240px,.88fr) minmax(0,1.12fr);align-items:stretch} .tpb-team[data-tpb-featured-count="1"] .tpb-team-grid .tpb-card--featured .tpb-card__media{height:auto;min-height:0;aspect-ratio:var(--tpb-image-ratio)} .tpb-team[data-tpb-featured-count="1"] .tpb-team-grid .tpb-card--featured .tpb-card__body{min-width:0} /* Multiple featured members: lead the two-column grid. Wide no longer forces every featured card full-width at laptop/tablet sizes; explicit full remains full. */ .tpb-team:not([data-tpb-featured-count="0"]):not([data-tpb-featured-count="1"]) .tpb-grid--featured-wide .tpb-card--featured{grid-column:auto} .tpb-grid--featured-full .tpb-card--featured{grid-column:1 / -1} } /* Mid-width card typography. The horizontal featured layout has substantially * more visual scale than a standard card, so preserve readable proportions * instead of allowing saved desktop values to feel undersized between the * laptop and mobile layouts. Larger user-configured values still win. */ @media (min-width:681px) and (max-width:1200px){ .tpb-card__name{font-size:max(var(--tpb-name-size),22px)} .tpb-card__role{font-size:max(var(--tpb-role-size),15px)} .tpb-card__summary{font-size:max(var(--tpb-body-size),16px);line-height:1.6} .tpb-card--featured .tpb-card__name{font-size:max(var(--tpb-featured-name-size),34px)} .tpb-card--featured .tpb-card__role{font-size:max(var(--tpb-featured-role-size),16px)} .tpb-card--featured .tpb-card__summary{font-size:max(var(--tpb-featured-body-size),17px);line-height:1.65} .tpb-profile-action{font-size:15px} } /* Mobile: one uncomplicated column. Featured members always lead, retain their * featured visual treatment, but all desktop/laptop spanning and horizontal-card * geometry is removed. */ @media (max-width:680px){ .tpb-team-grid,.tpb-count--3 .tpb-grid--featured-split,.tpb-count--3 .tpb-grid--featured-center{grid-template-columns:minmax(0,1fr)!important;gap:20px} .tpb-team[data-tpb-featured-count]:not([data-tpb-featured-count="0"]) .tpb-card--featured{order:-1} .tpb-card,.tpb-card--featured,.tpb-count--3 .tpb-grid--featured-split .tpb-card:not(.tpb-card--featured),.tpb-count--3 .tpb-grid--featured-center .tpb-card--featured,.tpb-team[data-tpb-featured-count="1"] .tpb-team-grid .tpb-card--featured{grid-column:auto!important;grid-row:auto!important;display:flex!important;grid-template-columns:none!important} .tpb-card__media,.tpb-team[data-tpb-featured-count="1"] .tpb-team-grid .tpb-card--featured .tpb-card__media{height:auto!important;min-height:0!important;aspect-ratio:var(--tpb-image-ratio)} .tpb-card--featured .tpb-card__media,.tpb-team[data-tpb-featured-count="1"] .tpb-team-grid .tpb-card--featured .tpb-card__media{aspect-ratio:var(--tpb-image-ratio)} .tpb-card__body,.tpb-card--featured .tpb-card__body{padding:20px} .tpb-card--featured .tpb-card__name{font-size:clamp(24px,var(--tpb-featured-name-size),28px)} .tpb-filter--tabs{gap:7px} .tpb-filter--tabs button{min-height:38px;padding:0 12px} } @media (prefers-reduced-motion:reduce){.tpb-card,.tpb-social-link,.tpb-profile-action,.tpb-profile-action__icon{transition:none!important}} /* ======================================================================== * Reusable Team Profile components * * These shortcodes intentionally expose CSS custom properties and stable * BEM-style classes so theme / Cornerstone CSS can restyle them without * changing plugin markup. * ======================================================================== */ .tpb-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .tpb-team-links, .tpb-team-meta, .tpb-mini-profile{ --tpb-component-text:var(--tpb-text,#1F2937); --tpb-component-muted:var(--tpb-muted,#667085); --tpb-component-bg:var(--tpb-card-bg,#FFFFFF); --tpb-component-border:var(--tpb-border,#D0D5DD); --tpb-component-accent:var(--tpb-cyan,#0EA5A4); --tpb-component-secondary:var(--tpb-purple,#7C3AED); --tpb-component-heading-font:var(--tpb-heading-font,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); --tpb-component-body-font:var(--tpb-body-font,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); --tpb-component-radius:14px; --tpb-component-icon-size:32px; --tpb-component-gap:10px; box-sizing:border-box; color:var(--tpb-component-text) } .tpb-team-links *, .tpb-team-meta *, .tpb-mini-profile *{box-sizing:border-box} /* Link groups: [tpb_team_contact] and [tpb_team_social]. */ .tpb-team-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tpb-component-gap);margin:0;padding:0;font-family:var(--tpb-component-body-font)} .tpb-team-links--icon-text,.tpb-team-links--text{flex-direction:column;align-items:flex-start} .tpb-team-link{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;min-height:var(--tpb-component-icon-size);color:var(--tpb-component-text);font:700 14px/1.3 var(--tpb-component-heading-font);text-decoration:none;transition:color .18s ease,transform .18s ease} .tpb-team-link:hover{color:var(--tpb-component-secondary);transform:translateX(2px)} .tpb-team-link:focus-visible{outline:3px solid color-mix(in srgb,var(--tpb-component-accent) 65%,transparent);outline-offset:3px;border-radius:6px} .tpb-team-link__icon{flex:0 0 var(--tpb-component-icon-size);display:inline-grid;place-items:center;width:var(--tpb-component-icon-size);height:var(--tpb-component-icon-size);border-radius:999px;background:var(--tpb-component-text);color:var(--tpb-component-bg);transition:background .18s ease,color .18s ease,transform .18s ease} .tpb-team-link__icon svg{display:block;width:15px;height:15px;fill:currentColor} .tpb-team-link:hover .tpb-team-link__icon{background:var(--tpb-component-secondary);color:#fff} .tpb-team-link__label{min-width:0} /* Icon-only variation remains a true circular control. */ .tpb-team-links--icons{flex-direction:row;align-items:center} .tpb-team-links--icons .tpb-team-link{display:grid;place-items:center;width:var(--tpb-component-icon-size);height:var(--tpb-component-icon-size);min-height:var(--tpb-component-icon-size);gap:0;border-radius:999px;background:var(--tpb-component-bg);color:var(--tpb-component-text);border:1px solid var(--tpb-component-border);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .tpb-team-links--icons .tpb-team-link:hover{background:var(--tpb-component-accent);color:var(--tpb-component-text);border-color:var(--tpb-component-accent);transform:translateY(-1px)} .tpb-team-links--icons .tpb-team-link__icon{width:auto;height:auto;min-width:0;background:transparent;color:inherit;transform:none} .tpb-team-links--icons .tpb-team-link:hover .tpb-team-link__icon{background:transparent;color:inherit} /* Text-only variation. */ .tpb-team-links--text .tpb-team-link{min-height:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* [tpb_team_meta] */ .tpb-team-meta{font-family:var(--tpb-component-body-font)} span.tpb-team-meta{display:inline} ul.tpb-team-meta{margin:0;padding:0;list-style:none} .tpb-team-meta--list{display:flex;flex-direction:column;gap:5px} .tpb-team-meta--list .tpb-team-meta__item{position:relative;padding-left:14px;color:var(--tpb-component-text);font:400 14px/1.45 var(--tpb-component-body-font)} .tpb-team-meta--list .tpb-team-meta__item::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tpb-component-accent)} .tpb-team-meta--chips{display:flex;flex-wrap:wrap;gap:7px} .tpb-team-meta--chips .tpb-team-meta__item{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid var(--tpb-component-border);border-radius:999px;background:var(--tpb-component-bg);color:var(--tpb-component-text);font:700 12px/1.2 var(--tpb-component-heading-font)} /* [tpb_team_mini_profile] */ .tpb-mini-profile{ --tpb-mini-bg:var(--tpb-component-bg); --tpb-mini-text:var(--tpb-component-text); --tpb-mini-muted:var(--tpb-component-muted); --tpb-mini-border:var(--tpb-component-border); --tpb-mini-radius:18px; --tpb-mini-shadow:0 12px 34px rgba(15,23,42,.08); --tpb-mini-padding:22px; display:grid; min-width:0; overflow:hidden; border:1px solid var(--tpb-mini-border); border-radius:var(--tpb-mini-radius); background:var(--tpb-mini-bg); color:var(--tpb-mini-text); box-shadow:var(--tpb-mini-shadow); font-family:var(--tpb-component-body-font) } .tpb-mini-profile--horizontal{grid-template-columns:minmax(150px,32%) minmax(0,1fr);align-items:stretch} .tpb-mini-profile--stacked{grid-template-columns:minmax(0,1fr)} .tpb-mini-profile--compact{grid-template-columns:82px minmax(0,1fr);align-items:center;overflow:visible;padding:14px;gap:14px} .tpb-mini-profile--bare{grid-template-columns:minmax(120px,28%) minmax(0,1fr);align-items:start;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;gap:18px} .tpb-mini-profile__media{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--tpb-mini-bg) 90%,var(--tpb-component-accent))} .tpb-mini-profile__image-link{display:block;width:100%;height:100%;text-decoration:none} .tpb-mini-profile__image{display:block;width:100%;height:100%;min-height:180px;object-fit:cover;object-position:50% 35%}.tpb-mini-profile__placeholder{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100%;min-height:180px;overflow:hidden;background:linear-gradient(135deg,var(--tpb-component-text) 0%,color-mix(in srgb,var(--tpb-component-text) 72%,var(--tpb-component-secondary)) 100%);color:var(--tpb-component-bg);font:700 clamp(34px,6vw,72px)/1 var(--tpb-component-heading-font);letter-spacing:-.055em}.tpb-mini-profile__placeholder::before,.tpb-mini-profile__placeholder::after{content:"";position:absolute;z-index:-1;border-radius:999px}.tpb-mini-profile__placeholder::before{width:72%;aspect-ratio:1;right:-22%;top:-28%;background:color-mix(in srgb,var(--tpb-component-accent) 35%,transparent)}.tpb-mini-profile__placeholder::after{width:54%;aspect-ratio:1;left:-18%;bottom:-26%;background:color-mix(in srgb,var(--tpb-component-secondary) 34%,transparent)} .tpb-mini-profile--stacked .tpb-mini-profile__media{aspect-ratio:16/10} .tpb-mini-profile--compact .tpb-mini-profile__media{width:82px;height:82px;border-radius:14px} .tpb-mini-profile--compact .tpb-mini-profile__image,.tpb-mini-profile--compact .tpb-mini-profile__placeholder{min-height:0;width:100%;height:100%} .tpb-mini-profile--bare .tpb-mini-profile__media{border-radius:14px} .tpb-mini-profile__body{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:13px;padding:var(--tpb-mini-padding)} .tpb-mini-profile--compact .tpb-mini-profile__body,.tpb-mini-profile--bare .tpb-mini-profile__body{padding:0} .tpb-mini-profile__identity{display:flex;min-width:0;flex-direction:column;gap:5px} .tpb-mini-profile__name{margin:0;color:var(--tpb-mini-text);font:700 21px/1.15 var(--tpb-component-heading-font);letter-spacing:-.02em} .tpb-mini-profile__name a{color:inherit;text-decoration:none} .tpb-mini-profile__name a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .tpb-mini-profile__role{margin:0;color:var(--tpb-component-accent);font:700 13px/1.4 var(--tpb-component-heading-font)} .tpb-mini-profile__excerpt{max-width:62ch;color:var(--tpb-mini-muted);font:400 14px/1.55 var(--tpb-component-body-font)} .tpb-mini-profile__actions{display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-top:2px} .tpb-mini-profile__actions .tpb-team-links{--tpb-component-icon-size:30px;--tpb-component-gap:8px} .tpb-mini-profile__actions .tpb-team-link{font-size:13px} /* Component-specific classes passed by the mini-profile renderer. */ .tpb-mini-profile__contact,.tpb-mini-profile__social{margin:0} @media (max-width:680px){ .tpb-mini-profile--horizontal,.tpb-mini-profile--bare{grid-template-columns:minmax(0,1fr)} .tpb-mini-profile--horizontal .tpb-mini-profile__media,.tpb-mini-profile--bare .tpb-mini-profile__media{aspect-ratio:16/10} .tpb-mini-profile--horizontal .tpb-mini-profile__image,.tpb-mini-profile--bare .tpb-mini-profile__image{min-height:0} .tpb-mini-profile__body{padding:18px} } @media (prefers-reduced-motion:reduce){ .tpb-team-link,.tpb-team-link__icon{transition:none!important} } /* ========================================================= WHOLE-CARD PROFILE LINK Interaction-only layer. Existing card layout and design remain unchanged from 0.20.0. ========================================================= */ .tpb-card { position: relative; isolation: isolate; cursor: pointer; } .tpb-card__primary-link { position: absolute; inset: 0; z-index: 1; display: block; border-radius: inherit; color: inherit; text-decoration: none; } .tpb-card__primary-link:focus { outline: none; } .tpb-card__primary-link:focus-visible { outline: 3px solid var(--tpb-accent); outline-offset: 4px; } /* Team Members without a full profile remain presentational cards. */ .tpb-card--profile-disabled { cursor: default; } .tpb-card--profile-disabled:hover { transform: none; } /* Social links remain separate actions and sit above the profile overlay. */ .tpb-card .tpb-socials, .tpb-card .tpb-social-link { position: relative; z-index: 2; } /* The visible action sits above the stretched profile link so it can own its own pointer hover state. Clicking it is forwarded to the card's primary link by frontend.js, while the rest of the card remains clickable through the stretched overlay. */ .tpb-card .tpb-profile-action { position: relative; z-index: 2; pointer-events: auto; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .tpb-card__primary-link { transition: none !important; } } /* v0.21.16 - portrait-led team photography. * Every team card uses the same 4:5 image window. Images fill that window * naturally with a modest upper-centre crop; featured cards do not change * the photograph's geometry. */ .tpb-card__media{ position:relative; width:100%; height:auto; min-height:0; aspect-ratio:var(--tpb-image-ratio,4 / 5); overflow:hidden; background:var(--tpb-card-bg); } .tpb-card__media .tpb-card__image{ display:block; width:100%; height:100%; max-width:none; margin:0; object-fit:cover; object-position:var(--tpb-image-position,50% 20%); transform:none; } .tpb-card--featured .tpb-card__media{ width:100%; height:auto; min-height:0; aspect-ratio:var(--tpb-image-ratio,4 / 5); } .tpb-card--featured .tpb-card__media .tpb-card__image{ object-fit:cover; object-position:var(--tpb-image-position,50% 20%); transform:none; }