/** * Butterfields – People Cards * * Themes the People Cards plugin to the approved "Meet the team" card design * and to the site's own button / panel language. * * The card itself is built to the supplied design (example-person-card.pdf): * a full-bleed portrait photo, then the name and role set in Cormorant * Garamond directly on the page — no panel, no border, no shadow, no radius. * * The Read More button and the popup are not in that design, so they are * derived from the patterns already on the site: the pill CTAs in the page * content, and the bordered "Talk to us" panel with its dark-olive header. * * --------------------------------------------------------------------------- * Why every selector is prefixed with `body` * * The plugin registers its stylesheet on wp_enqueue_scripts but only enqueues * it when the shortcode actually renders — which happens while the_content is * being filtered, i.e. after wp_head has already printed. WordPress therefore * prints people-cards.css in the *body*, after every stylesheet this theme * puts in the head. Source order breaks specificity ties in the plugin's * favour, so a bare `.people-cards__name` here (0,1,0) would lose to the * plugin's identical selector. * * The `body` prefix lifts each rule to (0,1,1) and takes the tie back without * resorting to !important. The exception is `.people-cards-modal__close`, * where the plugin's own declarations are !important and have to be met in * kind — see that rule. * --------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * Component tokens * * The brand palette and font stacks come from :root in header.css. Only the * values the card design needs and the theme does not already name are * declared here. * ---------------------------------------------------------------------- */ :root { /* Page-content colours, matched to the Elementor global styles used by the * body copy and section headings around the cards. */ --pc-ink: #34403c; /* Headings + primary body copy */ --pc-ink-muted: #65706c; /* Secondary body copy */ --pc-cream: #faf9f4; /* Section tint, reused as the photo placeholder */ --pc-rule: rgba(113, 116, 106, 0.55); /* Hairline, as on the "Talk to us" panel */ /* Body copy inside the popup is set in Manrope to match the page's own * body text. Manrope is loaded by Elementor's global fonts rather than by * this theme, hence the full fallback stack. */ --pc-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* The design's photo: 335 x 464. Kept as the authored numbers rather than * a rounded ratio so the crop stays exactly on the design. */ --pc-photo-ratio: 335 / 464; /* * The card's largest size, and the gap between columns. * * 320px is set by the row of four: the content column measures 1365px on a * 1440px screen, and four cards plus three 24px gaps have to fit inside it * (4 x 320 + 3 x 24 = 1352). It is a shade under the design's 335px card, * so the type and padding below are scaled by the same 0.94 to keep the * card's internal proportions on the design. */ --pc-card-max: 320px; --pc-column-gap: 24px; } /* ------------------------------------------------------------------------- * Plugin token remap * * The plugin paints itself from its own custom properties. Repointing them at * the brand palette re-colours everything it styles internally — including * anything added to it later — and leaves only structure and type to override * below. Declared on the same elements the plugin declares them on, one * specificity step up. * ---------------------------------------------------------------------- */ body .people-cards, body .people-cards-modal-overlay { --people-cards-accent: var(--bf-olive-dark); --people-cards-accent-alt: var(--bf-grey); --people-cards-text: var(--pc-ink); --people-cards-font: var(--bf-font-accent); } /* ------------------------------------------------------------------------- * Grid * ---------------------------------------------------------------------- */ body .people-cards { /* The shortcode sits inside an Elementor container that already applies * the section gutter, so the plugin's own 20px would push the cards in * further than the body copy above them. */ max-width: none; padding-inline: 0; font-family: var(--pc-font-body); } /* * Four across on a desktop, then three, two and one as the screen narrows. * * The column count is set explicitly at each breakpoint rather than left to * `auto-fill`, and the grid is capped at exactly the width of that many cards. * The two work together: * * - The max-width stops the cards growing past their designed size. Tracks are * 1fr, so without it a wide container would stretch each card, scaling the * photo up and leaving the type looking small against it. * - Fixing the count stops them shrinking too far. `auto-fill` derives the * count from the track cap, which on a 1366px laptop — a very common size — * left room for only three 320px columns and a wide band of dead space. A * declared count instead lets the cards give up a few pixels each and hold * the row of four. * * Between them the card stays within 283–320px at every width, so the row is * always full and the card is always close to the design. */ body .people-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: calc(4 * var(--pc-card-max) + 3 * var(--pc-column-gap)); gap: 44px var(--pc-column-gap); } /* Each step drops a column just before the cards would fall below ~280px. */ @media (max-width: 1279px) { body .people-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(3 * var(--pc-card-max) + 2 * var(--pc-column-gap)); } } @media (max-width: 998px) { body .people-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(2 * var(--pc-card-max) + var(--pc-column-gap)); } } @media (max-width: 699px) { body .people-cards__grid { grid-template-columns: minmax(0, 1fr); max-width: var(--pc-card-max); } } /* ------------------------------------------------------------------------- * Card * ---------------------------------------------------------------------- */ /* The design has no card container: the photo sits on the page and the text * runs underneath it, so everything the plugin uses to lift the card off the * background is removed. */ body .people-cards__item { background: none; border-radius: 0; box-shadow: none; overflow: visible; } body .people-cards__photo { aspect-ratio: var(--pc-photo-ratio); border-radius: 0; background: var(--pc-cream); overflow: hidden; } /* * The registered "people-card" image size is a 600x600 square crop, so the * portrait box above crops it. `cover` with a top-weighted origin keeps the * head where the design has it rather than trimming it to centre the frame. */ body .people-cards__photo img { object-fit: cover; object-position: center top; } body .people-cards__body { /* Text is inset from the card edge while the photo stays full-bleed — * 21px against the design's 335px card. The photo's own edge is the * alignment the design reads from, so this is a plain inset, not a * container padding. * * The 15px foot is what the design leaves under the last baseline once the * line box's own descent is accounted for. With no card background it is * only felt as space before the next row, but it keeps the card box itself * on the design. */ padding: 18px 20px 15px; } /* * Name and role share one baseline rhythm in the design — the role continues * the name's line spacing rather than opening a gap after it — so both are * set at the same size and line-height with no margin between them. Only the * weight and the colour separate them. * * The size is measured off the design rather than guessed: the name occupies * 73.7% of the card's width there, which is 32px on the design's own 335px * card and 30px on this 320px one. Sizing from the ink width rather than the * cap height is deliberate — the width is a ~250px measurement, so a pixel of * antialiasing either side barely moves it, where the same pixel on a 25px cap * height would put the size out by 4%. * * The size also decides where the role breaks. "Managing Director and" is the * longest first line in the team, and at 30px it fits the 280px text column * with 7px to spare, so it wraps where the design wraps it. At 32px in this * narrower card "and" drops to the second line instead. * * 1.25 puts the baselines 37.5px apart, the design's 40px scaled by the same * 320/340. */ body .people-cards__name { margin: 0; font-family: var(--bf-font-accent); font-weight: 500; font-size: 30px; line-height: 1.25; color: var(--bf-olive-dark); } body .people-cards__subtitle { margin: 0; font-family: var(--bf-font-accent); font-weight: 400; font-size: 30px; line-height: 1.25; color: var(--bf-grey); } /* ------------------------------------------------------------------------- * Read More button * * Not in the card design. Built as an outlined pill so it belongs to the * site's CTA language (the pill buttons in the page content) without * competing with the name it sits under — the card's own weight should stay * on the photograph and the name. * * Both the popup trigger (