/* ────────────────────────────────────────────── * staff.css — /staff/ (People) * * 2026-08-26 — REBUILT IN THE CURRENT DESIGN LANGUAGE. Chase: "people 和 * awards 两个页面能不能改成我们现在的设计语言，整体的字体大小都保持一致". * * What it was: a faithful rebuild of Elementor page 3997 — dark-green title * bar, #4A9F54 cards, section heads in 41px/300 light green over a #2c8851 * rule. That was the 2024 palette and this page and /awards/ were the last two * carrying it. * * What it is now, and where each number comes from — nothing here is invented: * band .ga-band on /global-affiliates/ and /affiliated_researchers/ * black, clamp(34,3.4vw,52)/700/+.01em, 64/60 padding * section head .esg-split__title on /kpmg-case-competition/ * clamp(19,1.5vw,27)/700/-0.01em, uppercase, ink * card .esg-judge on the same page — black plate, white name in * Poppins 700, supporting line at .72 white * ground rgb(240,240,240), the ground Yuna's two mockups share * (/scholars/ and /kpmg-case-competition/) * * ⚠️ ONE DELIBERATE DEPARTURE. .esg-judge sets its supporting line at 11.5px. * A judge's card carries a title; these carry a PHONE NUMBER AND AN E-MAIL * ADDRESS that a visitor has to read off the screen and type. 13px is the * smallest that stays comfortable for that, checked against the longest * address on the page. If the two are ever unified, move the judges up rather * than moving these down. * * Enqueued SERVER-SIDE by Code Snippets #15 (is_page 22056) — the band is * server-rendered in the page content, so the sheet must be in before * first paint; do not move it to data-fetch-css. 🚨 THE VERSION STRING IN THAT * SNIPPET IS THE CACHE-BUSTER for this file. Bump it there, or returning * visitors keep the sheet they already have. * ────────────────────────────────────────────── */ /* ── Ground ─────────────────────────────────────────────────────────────── Painted with a full-bleed ::before rather than a background on the wrapper: the wrapper sits inside the theme's content column, so a background on it would stop at 1180px and leave white gutters. */ .esgri-staff-page { position: relative; } .esgri-staff-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw; background: #F0F0F0; z-index: 0; } .esgri-staff-page > * { position: relative; z-index: 1; } /* ── Band ───────────────────────────────────────────────────────────────── Same construction as .ga-band: a normal-flow block with the black painted by a full-bleed ::before. NOT `width:100vw; left:50%`, which was tried on /global-affiliates/ and misaligned the title against the cards below 1140. 🚨 EVERY DECLARATION ON THE TITLE NEEDS !important. Phlox ships `.entry-content h1 { font-size: 2.7em }` at specificity (0,1,1), which beats a bare class — the trap that held /global-affiliates/, /about/ and /kpmg-case-competition/ at a flat 43.2px. */ .esgri-staff-band { position: relative; color: #fff; } .esgri-staff-band::before { content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: 0; bottom: 0; background: #000; z-index: 0; } .esgri-staff-band__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 64px 0 60px; } .esgri-staff-band__title { font-family: "Poppins", "Noto Sans", sans-serif !important; font-size: clamp(34px, 3.4vw, 52px) !important; font-weight: 700 !important; line-height: 1.06 !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: #fff !important; margin: 0 !important; } .esgri-staff { max-width: 1180px; margin-left: auto; margin-right: auto; padding-top: 66px; padding-bottom: 78px; font-family: "Noto Sans", sans-serif; } /* ── Section heading ────────────────────────────────────────────────────── The green 2px rule is gone with the green. Neither /kpmg-case-competition/ nor /global-affiliates/ draws a rule under a section title, and the one here was the last of the 2024 palette on the page. */ /* 🚨 !important ON THE SIZE, for the h2 version of the trap the band title hits: Phlox ships `.entry-content h2 { font-size: 2.1em }` at (0,1,1), which beats a bare class. Measured on the live page before this: the clamp never applied and the heading rendered a flat 33.6px at 1600 AND at 390 — where the page title itself is 34px, so a section heading was as large as the name of the page. .esg-split__title on /kpmg-case-competition/ had the same bug and was fixed in the same commit; the two pages set at the same size on purpose. */ .esgri-staff-sectionhead { font-family: "Poppins", "Noto Sans", sans-serif !important; font-size: clamp(19px, 1.5vw, 27px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; color: #000 !important; margin: 0 0 24px !important; padding-bottom: 0 !important; border-bottom: 0 !important; } .esgri-staff-section + .esgri-staff-section { margin-top: 72px; } /* ── Card grid ──────────────────────────────────────────────────────────── 14px, the gap .esg-judges2__grid uses, not the old 20. */ .esgri-staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* ── Card ───────────────────────────────────────────────────────────────── 🚨 WHITE, NOT BLACK, SINCE 2026-08-27. The first pass at the current design language painted these black to match .esg-judge on /kpmg-case-competition/. Yuna, via Chase: "我看到people全黑的效果了，好像有點太黑" — 16 black plates in a 3-column grid is a different weight from 6 of them beside a photograph, and she sent People_page_UI.jpg (kept in this folder) with white cards on the grey ground instead. Sizes below are measured off that file at its native 1920: name ~19px, the personal details ~13px, card padding ~28px. Hover is "金底黑字" — the whole card takes the site gold and every line in it goes black. #B89642 is the same gold in-the-media.css, archive.css and voices.css declare, and the same one the affiliate names take on hover. */ .esgri-staff-card { background-color: #FFFFFF; color: var(--k-ink, #14171F); display: flex; align-items: stretch; transition: background-color .2s ease, transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s cubic-bezier(.22, .61, .36, 1); } /* ---------- hover lift (Chase, 2026-09-04) -------------------------------- "加上一个类似的hover的小浮动效果" — the same 6px lift .ins-card takes on /insights/ and /news/, so a card behaves the same way wherever the site shows one. The gold was already the hover signal here; the lift is what makes the card read as an object rather than a painted panel. 🚨 IT GOES ON THE CARD, NOT ON .__body — the gold does the opposite (see the hover note further down). The card is what moves; the body is what changes colour. Putting the transform on .__body would slide the text pane out from under the portrait. Declared here rather than in the :hover block below because the transition above has to be on the resting state for the card to ease back down. */ .esgri-staff-card:hover, .esgri-staff-card:focus-within { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, .13); } /* ── Portrait pane, 2026-09-04 ──────────────────────────────────────────── Yuna's second People mockup (`people_portrait.zip` + the layout board, this folder) puts a headshot down the right-hand edge of every card. Measured off that board: card 371 wide, photo 149 — 40.2%, so 40%. 🚨 THE PADDING MOVED FROM THE CARD TO .__body. It has to: 26px on the card would inset the photo too, and the mockup runs it flush to all three edges. A rule still targeting `.esgri-staff-card { padding }` will put the gap back. The photo has no fixed height — `align-items: stretch` on the card makes the pane as tall as the text beside it, which is what keeps the bottom edges level across a row now that the card is a row rather than a column. Height therefore still comes from the text, so `.__position` and `.__contact` keep their min-heights. Cards without a `photo` in staff.json emit no pane at all and .__body's flex:1 fills the card — a starter with no headshot is not a hole. */ .esgri-staff-card__body { flex: 1 1 auto; min-width: 0; padding: 26px 26px 24px; display: flex; flex-direction: column; } .esgri-staff-card__photo { flex: 0 0 40%; align-self: stretch; overflow: hidden; background-color: #E7E7E7; } /* The pane is a flex item of unknown height, so the image needs an explicit `height: 100%` to fill it; `object-fit: cover` then crops rather than squashing. `display: block` kills the inline-baseline gap under the img. */ .esgri-staff-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; /* faces sit high in a 550x800 headshot */ } /* 19px/600 — the size and weight .ga-name uses on the three affiliate pages, so a person is set the same way wherever the site lists people. Poppins for both lines, per Yuna: 人名 SemiBold, 個資 Regular. */ .esgri-staff-card__name { font-family: "Poppins", "Noto Sans", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.25; color: #14171F; margin: 0 0 4px; } .esgri-staff-card__position { font-family: "Poppins", "Noto Sans", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; color: #5B6474; /* two lines — keeps the dividers level across a row, as the old cards did */ min-height: 39px; } /* divider + contact + icon sit at the bottom so dividers align across a row */ .esgri-staff-card__foot { margin-top: auto; } .esgri-staff-card__divider { border-bottom: 1px solid rgba(0, 0, 0, .16); margin: 18px 0 0; } .esgri-staff-card__contact { padding-top: 14px; min-height: 38px; margin-bottom: 12px; } .esgri-staff-card__contact p { font-family: "Poppins", "Noto Sans", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #5B6474; } .esgri-staff-card__contact a { color: #5B6474; text-decoration: none; } .esgri-staff-card__contact a:hover { color: #14171F; text-decoration: underline; } /* 18px against a 19px name; the mockup draws it at about the same. */ .esgri-staff-card__linkedin { display: inline-block; color: #14171F; line-height: 1; transition: color .18s ease; } .esgri-staff-card__linkedin svg { width: 18px; height: 18px; } .esgri-staff-card__linkedin:hover { color: #000; } /* ── Hover: gold plate, black type ──────────────────────────────────────── Every line is restated rather than relying on inheritance, because each one sets its own colour above — a single rule on the card would leave the name, the role and the contact block exactly as they were. :focus-within alongside :hover so tabbing to the e-mail or the LinkedIn link lights the same card, as it does on the affiliate pages. */ /* 🚨 THE GOLD GOES ON .__body, NOT ON THE CARD. On the card it would show through nothing (the photo covers its own 40%) but would also tint the 1px the photo does not reach, and Yuna's board shows the hovered card with the photo unchanged — gold text pane, normal headshot. */ .esgri-staff-card:hover .esgri-staff-card__body, .esgri-staff-card:focus-within .esgri-staff-card__body { background-color: #B89642; } .esgri-staff-card:hover .esgri-staff-card__name, .esgri-staff-card:focus-within .esgri-staff-card__name, .esgri-staff-card:hover .esgri-staff-card__position, .esgri-staff-card:focus-within .esgri-staff-card__position, .esgri-staff-card:hover .esgri-staff-card__contact p, .esgri-staff-card:focus-within .esgri-staff-card__contact p, .esgri-staff-card:hover .esgri-staff-card__contact a, .esgri-staff-card:focus-within .esgri-staff-card__contact a, .esgri-staff-card:hover .esgri-staff-card__linkedin, .esgri-staff-card:focus-within .esgri-staff-card__linkedin { color: #000; } .esgri-staff-card:hover .esgri-staff-card__divider, .esgri-staff-card:focus-within .esgri-staff-card__divider { border-bottom-color: rgba(0, 0, 0, .32); } @media (prefers-reduced-motion: reduce) { .esgri-staff-card, .esgri-staff-card__linkedin { transition: none; } /* the shadow stays — it is the half of the lift that carries no motion */ .esgri-staff-card:hover, .esgri-staff-card:focus-within { transform: none; } } @media (max-width: 1220px) { .esgri-staff, .esgri-staff-band__inner { padding-left: 20px; padding-right: 20px; } } @media (max-width: 1180px) { .esgri-staff-band__inner { padding-top: 52px; padding-bottom: 48px; } } @media (max-width: 900px) { .esgri-staff-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .esgri-staff-band__inner { padding-top: 36px; padding-bottom: 32px; } .esgri-staff-grid { grid-template-columns: 1fr; } .esgri-staff { padding-top: 42px; padding-bottom: 52px; } .esgri-staff-section + .esgri-staff-section { margin-top: 48px; } /* single column — there are no rows to level */ .esgri-staff-card__position, .esgri-staff-card__contact { min-height: 0; } /* 40% of a phone-width card is a 130px-wide portrait — too narrow to read as a face. Stack instead: photo on top, text under it, and give the pane a real height since `stretch` no longer supplies one in a column. */ .esgri-staff-card { flex-direction: column; } .esgri-staff-card__photo { flex: 0 0 auto; width: 100%; height: 260px; } .esgri-staff-card__photo img { object-position: center 25%; } }