/* WT26 Staff — frontend styles * Used by single + archive templates, the Gutenberg block, the Divi modules, * and the Breakdance element. Keep theme-agnostic — no Divi/Breakdance/etc. * specific selectors, and NO font-family declarations: the directory must * inherit the host theme's type so it sits naturally inside any framework. * * ---------- Sizing text: never a bare rem ---------- * That "inherit the host theme's type" rule covers SIZE as well as family, and * bare rem quietly broke it. rem measures against , which is not where a * theme puts its body size: eight of the ported WT themes set * `html { font-size: 62.5% }` so they can write 22px as 2.2rem, and against * that root a 1.2rem name rendered a flat 12px next to 22px body copy. * * Bare em is not the answer either — Divi's body is 14px and Enfold's is 13px, * so em alone would shrink the two networks that were never broken. * * So every text size here is `max( , )`, and new ones must be too. * It takes whichever is bigger, so the em half tracks the host theme while the * rem half holds the size we shipped before. It can only raise a size, and only * where we were already rendering below the surrounding text. Because both * terms scale proportionally, the name/job-title hierarchy holds either way. * * ---------- Sizing BOXES: plain px ---------- * Same root, different fix. A photo column, a grid track, an icon button and a * form measure are design constants, not text, and a bare rem shrank every one * of them to 62.5% on those themes: the list-layout photo column resolved to * 100px instead of 160px, the 40px icon buttons to 25px with 12.5px glyphs, and * the grid packed 145px tracks instead of 232px. Two of these were written with * `/* 40px *\/` right beside them, so px was always the intent. * * These are px now. On a 16px-root theme px and rem are the same number, so * nothing moves on Divi, Enfold, or any 16px theme; on a 10px-root theme they * finally render at the size they were drawn at. Text still scales for a * reader who enlarges their browser font, because text uses the max() pair. * * Padding, margin and gap stay in rem. They compress on a 62.5% theme but * nothing breaks, and converting them is where regressions live. */ /* ---------- List wrapper (grid + list layouts) ---------- */ .wt26-staff-list { display: grid; gap: 1.5rem; margin: 0 0 2rem; padding: 0; list-style: none; } .wt26-staff-list--grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); align-items: stretch; } /* ---------- Card ---------- */ .wt26-staff-card { display: flex; flex-direction: column; gap: 0; min-width: 0; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: rgba(0, 0, 0, 0.02); overflow: hidden; } .wt26-staff-card__photo-link { display: block; line-height: 0; } .wt26-staff-card__photo { display: block; width: 100%; max-width: 100%; aspect-ratio: 250 / 290; object-fit: cover; /* The placeholder SVG paints its own neutral background, so photo-less cards look intentional rather than broken. */ background: rgba(0, 0, 0, 0.04); } .wt26-staff-card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-width: 0; padding: 1rem; } .wt26-staff-card__name { margin: 0; font-size: max(1.2em, 1.2rem); font-weight: 600; line-height: 1.3; } .wt26-staff-card__name a { text-decoration: none; color: inherit; } .wt26-staff-card__name a:hover, .wt26-staff-card__name a:focus-visible { text-decoration: underline; } /* Name subtitle (pronouns, credentials) hugs the name it belongs to — the negative margin cancels most of the card body's gap. */ .wt26-staff-card__subtitle { margin: -0.4rem 0 0; font-size: max(0.9em, 0.9rem); font-weight: 400; /* 0.75 matches the job title and keeps AA contrast for themes with body text up to ~#444 on the near-white card; 0.7 already fails at #444. */ opacity: 0.75; } /* Job title is the subheading: muted, always smaller than the name. The max(em, rem) pair scales both this and the name proportionally, so a large-base-font theme (e.g. Twenty Twenty-Five) still can't invert the name/title hierarchy. */ .wt26-staff-card__job-title { margin: 0; font-size: max(1em, 1rem); font-weight: 600; opacity: 0.75; } .wt26-staff-card__preview { margin: 0; font-size: 0.95em; line-height: 1.5; opacity: 0.85; } /* Read-more sits at the bottom of the card even when previews vary in length, so links line up across a row. Underlined — never color-only. */ .wt26-staff-card__more { margin-top: auto; align-self: flex-start; padding-top: 0.25rem; font-weight: 600; text-decoration: underline; } .wt26-staff-card__more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ---------- Contact icon buttons (email / phone) ---------- * Customers are non-technical: the icons must read as tappable buttons, not * mystery glyphs — visible border + background, ≥40px touch targets, and a * clear focus ring. Nothing here is hover-only. */ .wt26-staff-card__icons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wt26-staff-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 6px; background: #fff; color: inherit; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .wt26-staff-card__icon:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.45); } .wt26-staff-card__icon:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .wt26-staff-icon { width: 20px; height: 20px; flex: 0 0 auto; } /* ---------- List layout: photo-left horizontal rows ---------- */ .wt26-staff-list--list { gap: 1.25rem; } .wt26-staff-list--list .wt26-staff-card { flex-direction: row; align-items: stretch; } .wt26-staff-list--list .wt26-staff-card__photo-link { flex: 0 0 clamp(104px, 22vw, 160px); /* Don't stretch to the card. A long bio made the column taller while its width stayed capped, and object-fit: cover then cropped the portrait to a sliver — the longer the bio, the narrower the face. */ align-self: flex-start; } .wt26-staff-list--list .wt26-staff-card__photo { width: 100%; height: auto; aspect-ratio: 250 / 290; } @media (max-width: 480px) { .wt26-staff-list--list .wt26-staff-card { flex-direction: column; } .wt26-staff-list--list .wt26-staff-card__photo-link { flex-basis: auto; /* The card stacks here, so the cross axis is horizontal: without this the flex-start above would shrink the photo to its intrinsic width instead of spanning the card. */ align-self: stretch; } } /* ---------- Empty state ---------- */ .wt26-staff-empty { padding: 1.5rem; border: 1px dashed rgba(0, 0, 0, 0.2); border-radius: 4px; text-align: center; opacity: 0.7; } /* ---------- Pagination (matches wt26-publications) ---------- */ .wt26-staff-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1.5rem 0; } .wt26-staff-pagination .page-numbers { display: inline-block; padding: 0.35em 0.7em; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; text-decoration: none; } /* The current page must be a filled chip. `background: currentColor` cannot do that here: currentColor resolves to this element's own `color`, which the very next line sets to #fff — so the chip would render white-on-white (1:1) and the current page number would be invisible. Use an explicit dark chip; themes can override it. White on #23272b = 15.6:1. */ .wt26-staff-pagination .page-numbers.current { background: #23272b; border-color: #23272b; color: #fff; } /* ---------- Archive wrapper (PHP fallback template) ---------- */ /* Classic themes (Divi, Breakdance-classic) hand our template an unstyled
; without this the grid runs edge-to-edge at every viewport. Block themes never hit this template (they use the registered block template's constrained group). */ .wt26-staff-archive { box-sizing: border-box; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 2.5rem 1.25rem 3.5rem; } .wt26-staff-archive__header { margin: 0 0 1.5rem; } .wt26-staff-archive__title { margin: 0 0 0.5rem; } .wt26-staff-archive__description { opacity: 0.85; } /* ---------- Single profile detail header ---------- */ .wt26-staff-detail { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin: 0 0 1.5rem; } .wt26-staff-detail__photo { flex: 0 1 248px; margin: 0; min-width: 0; } .wt26-staff-detail__photo img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 250 / 290; object-fit: cover; border-radius: 6px; } .wt26-staff-detail__meta { flex: 1 1 224px; min-width: 0; } /* Name subtitle (pronouns, credentials) leads the meta column, closest to the page title it annotates. */ .wt26-staff-detail__subtitle { margin: 0 0 0.5rem; font-size: max(1em, 1rem); opacity: 0.75; } /* Prominent subheading directly under the page title. */ .wt26-staff-detail__job-title { margin: 0 0 0.5rem; font-size: max(1.2em, 1.2rem); font-weight: 600; opacity: 0.8; } .wt26-staff-detail__departments { margin: 0 0 0.5rem; font-size: 0.95em; } .wt26-staff-detail__departments a { text-decoration: underline; } @media (max-width: 600px) { .wt26-staff-detail { flex-direction: column; } .wt26-staff-detail__photo { flex-basis: auto; width: 100%; max-width: 248px; } } /* ---------- Contact section (single profile) ---------- */ .wt26-staff-contact { margin: 2.5rem 0 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.12); } .wt26-staff-contact__heading { margin: 0 0 0.75rem; } .wt26-staff-contact__phone, .wt26-staff-contact__fallback { margin: 0 0 1rem; } /* ---------- Contact form ---------- * Labels above inputs, 16px+ input text (also stops iOS zoom-on-focus), * generous padding, thick focus rings. Non-technical users: everything * visible, nothing hover-only. */ .wt26-staff-form { max-width: 576px; } .wt26-staff-form__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; } .wt26-staff-form__field label { font-weight: 600; } .wt26-staff-form__required { margin-left: 0.25rem; font-weight: 400; font-size: 0.9em; opacity: 0.7; } .wt26-staff-form__field input, .wt26-staff-form__field textarea { width: 100%; max-width: 100%; padding: 0.65rem 0.75rem; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; background: #fff; color: inherit; font-size: max(1em, 16px); /* the 16px floor is literal: iOS zooms a focused input below it, and 1rem alone is 10px on a 62.5%-root theme */ font-family: inherit; line-height: 1.4; } .wt26-staff-form__field textarea { resize: vertical; } .wt26-staff-form__field input:focus-visible, .wt26-staff-form__field textarea:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 1px; } /* Honeypot: removed from view and from the tab/AT order, but NOT display:none — some bots skip hidden fields. Mirrors the inline belt-and-suspenders style the form ships with. */ .wt26-staff-form__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } /* Status region: neutral by design — the JS only writes text into it (no success/error class), so a colored box could mislabel the message. It shows a quiet bordered note whenever it has content. */ .wt26-staff-form__status { margin: 0 0 1rem; font-weight: 600; } .wt26-staff-form__status:not(:empty) { padding: 0.75rem 1rem; border: 1px solid rgba(0, 0, 0, 0.25); border-left-width: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.03); } .wt26-staff-form__actions { margin: 0; } .wt26-staff-form__submit { display: block; width: 100%; padding: 0.8rem 1.25rem; border: 1px solid #1d4ed8; border-radius: 6px; background: #1d4ed8; /* white on #1d4ed8 = 6.3:1 */ color: #fff; font-size: max(1em, 1rem); font-family: inherit; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease; } .wt26-staff-form__submit:hover { background: #1e40af; border-color: #1e40af; } .wt26-staff-form__submit:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; } .wt26-staff-form__submit:disabled { opacity: 0.6; cursor: default; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .wt26-staff-card__icon, .wt26-staff-form__submit { transition: none; } } /* The profile's theme-printed featured image is suppressed server-side (wt26_staff_suppress_theme_thumbnail); themes that guard the wrapper on has_post_thumbnail() still print an empty shell that can hold layout (floats/margins) - hide it. */ .single-wt26_staff .featured-image { display: none; }