/* =========================================================================== MEMBERS-LISTING — text-only people grid grouped into named sections (Board Office, Board Members, Ex-officio Members). Section bg white, 1198 px teal-75 divider at the top, then three groups each with a terracotta serif H2 + a 4-column grid of cells. Each cell holds a teal sans NAME and an optional terracotta sans TITLE. Used by the Board of Directors page. Sibling patterns with photos live under `team-grid-*` — keep this one strictly text. Source: docs/figma/board-of-directors/_slices/04-members-listing.png =========================================================================== */ .wp-block-group.hodc-members-listing { background: var(--wp--preset--color--white); /* Figma section measures 718 px tall (top divider to slice end). With * vertical content rhythm matching Figma exactly, that resolves to * ~93 px bottom padding (vs the 109 the Figma slice geometry literally * suggests — the 16 px discrepancy is the bottom of the Figma slice * including the start of the next section's terracotta band). */ padding: 0 0 93px; } /* Inner content rail. Grid is left-anchored at viewport x=260 in the * Figma frame (not centered). Within a 1200-max-width-centered rail * (left edge at viewport x=120 in 1440 vw) that's a 138 px left padding. */ .hodc-members-listing__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px 0 24px; box-sizing: border-box; } /* Top divider — 1 px solid Johannes/75 teal, full-rail width. * Override the core separator's default styling. */ .hodc-members-listing__divider { margin: 0; border: 0; border-top: 1px solid var(--wp--preset--color--primary-75); opacity: 1; background: none; } /* Group spacing. First group (Board Office) sits 87 px below the divider; * subsequent groups (Board Members, Ex-officio) follow with 48 px gap * from the previous group's last content row. * * Padding-left pushes the group's content (headings + rows) from the * inner rail's content-box left edge (viewport x=144 = rail-x=120 + 24 * padding) to viewport x=260, matching the Figma left-anchor for both * the H2 heading and the cell grid. */ .hodc-members-listing__group { padding-top: 87px; padding-left: 116px; margin: 0 !important; /* override WP layout-flow 24px block-gap */ } .hodc-members-listing__group + .hodc-members-listing__group { padding-top: 48px; } /* Kill the WP layout-flow auto-margin on direct children of __group too — * the heading and row positions must come from explicit margins below. */ .hodc-members-listing__inner > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .hodc-members-listing__group > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Heading: Source Serif Pro 28 weight 400, -1% letter, color terracotta. * Line-height pinned to 1.0 (28 px) so the cap-top of the text sits flush * with the group's padding-top edge. Figma uses 52 lineHeight as a * placeholder spacing — we express that spacing explicitly via the * __row margin-top below, not as line-height (browsers add leading * symmetrically which throws off vertical rhythm). */ .hodc-members-listing__heading { margin: 0; padding: 0; font-family: "source-serif-pro", Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.01em; color: var(--wp--preset--color--accent); text-align: left; } /* Grid rows — 4-col grid with no inter-column gap. Match Figma column * starts at viewport x=260/470/682/894 within a 1440 viewport: relative to * the 1200 rail (which starts at viewport x=120), that's rail-x=140 for * col 1, then 210/212/212 px steps. Total grid width ~844 px, left-anchored * 140 px from the rail's left edge. */ .hodc-members-listing__row { margin: 24px 0 0 !important; /* Was 52 px — tightened per #9889860189 (Stephanie asked for less space between the section heading and the names list). */ padding: 0; /* left-anchor inherited from __group */ gap: 28px 0; /* row-gap 28 px when columns wrap (5th+ column drops to a new row); no column gap keeps the Figma 4-col 210/210/210/210 grid intact. Per #9934465035 (Alandria needed to add a 5th board member but the section was content-locked). */ max-width: 840px; /* 4 cols × 210 px = 840 — caps the row so a 5th+ column wraps to a new visual row instead of stretching the existing row past the 4-col grid. Group padding- left (116 px) already anchors the row left of the 1200 rail's center. */ flex-wrap: wrap !important; /* allow Board Office / Ex-officio to wrap to a second visual row when editors add a 5th+ column via the inserter. !important needed because Gutenberg's generated .wp-container-core-columns-is- layout-* container rule pins flex-wrap to nowrap by default on wp-columns. */ } .hodc-members-listing__row .wp-block-column { flex: 0 0 210px !important; /* explicit flex-grow:0 + flex-shrink:0 + flex-basis:210px in one shorthand. !important required because Gutenberg's generated wp-block-column layout sets flex on every column with higher specificity. Without this, a 5th+ column shrinks to fit the row instead of wrapping. */ max-width: 210px; padding: 0; } /* Name typography — Mr Eaves XL San OT Reg 400 / 28 / line-height 1.0 * (matches Figma cap-height alignment), color primary teal. */ .hodc-members-listing__name { margin: 0; font-family: "mreavesxlmodotheavy", system-ui, sans-serif; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); } /* Name → title gap (Figma: 10 px). */ .hodc-members-listing__name + .hodc-members-listing__title { margin-top: 10px !important; } /* Name → next-name gap in Board Members (two-row stack, Figma: 21 px). */ .hodc-members-listing__name + .hodc-members-listing__name { margin-top: 21px !important; } /* Title typography — Mr Eaves XL San OT Reg 400 / 18 / 24 lh, terracotta. */ .hodc-members-listing__title { margin: 0; font-family: "mreavesxlmodotheavy", system-ui, sans-serif; font-weight: 400; font-size: 18px; line-height: 24px; color: var(--wp--preset--color--accent); } /* Mobile — NOT IN FIGMA. Stack to 2 columns at tablet, 1 column on phone. * Bring grid back into the centered rail (drop the 140 px left offset). */ @media (max-width: 1024px) { .wp-block-group.hodc-members-listing { padding-bottom: clamp(56px, 8vw, 109px); } .hodc-members-listing__group { padding-top: clamp(48px, 6vw, 87px); /* Forrest 6/13 (BC #9993800723, leadership_and_staff2.PNG): desktop * sets padding-left: 116px to match Figma's left-anchored grid; on * mobile that pushed names to ~140 px from the left edge of a 390 vw, * crowding everything against the right gutter. Reset to 0 so content * aligns with the inner rail's natural 24 px gutter. */ padding-left: 0; } .hodc-members-listing__group + .hodc-members-listing__group { padding-top: clamp(32px, 5vw, 48px); } .hodc-members-listing__row { padding: 0; gap: 24px; } .hodc-members-listing__row .wp-block-column { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); } } @media (max-width: 600px) { .hodc-members-listing__row .wp-block-column { flex-basis: 100%; max-width: 100%; } }