/* ============================================================= People search — clustered results with pill filter /our-people (people_search:block_our_people). Overrides the html_list style output via templates/views/views-view-list--people-search--block-our-people.html.twig + preprocess_views_view_list__people_search__block_our_people() (Phase C — src/Search/PeopleSearchPreprocess.php). Reuses Phase 1's shipped .np-person-card chrome (css/detail.css) for the cards themselves; this file adds the pill row, section chrome, grid layout, and the role-cluster hue cascade via data-cluster. ============================================================= */ .np-people-results { margin: 6px 0 24px; } /* ---------- role-cluster pill tabs ---------- */ .np-people-tabs { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid #2c2c2b; } .np-people-tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; /* 3px hued border 2026-08-19 — universal person-category pill theme per stacked-cluster-hue design guidance (memory feedback_stacked_ cluster_hue_wins). Distinguishes clusters at a glance where 1px grey read too homogeneous. --hue cascades in from the data-cluster selector map below (line 88+); "All" pill has no --hue → neutral fallback. Padding trimmed 6px→5px inline / 13px→12px block so the pill's outer box stays visually the same height (2px added to border on each side). */ border: 3px solid var(--hue, #e4e0d8); background: #fff; color: #2c2c2b; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s, color .15s; } .np-people-tab::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hue, #6c675f); flex: none; } .np-people-tab--all::before { background: #6c675f; } .np-people-tab-n { color: #6c675f; font-weight: 700; } .np-people-tab:hover { border-color: var(--hue-dk, #6c675f); } .np-people-tab[aria-current="page"] { background: #2c2c2b; border-color: #2c2c2b; color: #fff; } .np-people-tab[aria-current="page"] .np-people-tab-n { color: rgba(255,255,255,.75); } .np-people-tab[aria-current="page"]::before { background: #fff; } /* ---------- cluster section ---------- */ /* Feed the section's cluster hue to the person cards inside it, so a card carries its category on its top border the way publication tiles carry their type (role-browse.css .np-person-card). --hue is already resolved here by the data-cluster map above; this only re-publishes it under the name the card reads, so the card needs no knowledge of which surface it is on. */ .np-people-cluster { margin-bottom: 32px; scroll-margin-top: 90px; --np-card-hue: var(--hue); } .np-people-cluster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--hue, #e4e0d8); } .np-people-cluster-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: #2c2c2b; letter-spacing: -.1px; } .np-people-cluster-n { color: #6c675f; font-weight: 600; font-size: 14px; } .np-people-seeall { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--hue-dk, #2c2c2b); } .np-people-seeall:hover { text-decoration: underline; } .np-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } /* ---------- role-cluster hue axis (data-cluster) ---------- The four current clusters + Other (residue). Tokens live in css/colors.css. Future clusters listed in people-search-pills-plan.md §10.1 (community-networks-local, community-networks-international) are pre-allocated below so adding them is a map edit + reindex, no colour pass. (Renamed from local-community / international-community 2026-07-15 per person-cluster-rename-plan.md.) MUST cover every key PersonTypeRules::clusters() returns — an unmapped cluster's pill silently falls back to the #6c675f neutral. `board` was missing from 2026-08-14 (when it was promoted to a first-class cluster) until 2026-08-17; see documentation/person-type-subtabs-plan.md §3. This map is the twin of the --tile-hue map in css/colors.css (tiles, not pills) — adding a cluster means editing BOTH files. Three consumers per row (all reading `--hue` / `--hue-dk` off the cascaded ancestor): - `.np-people-tab` — landing-list pill row (data-cluster attr; search-form pill). - `.np-people-cluster` — landing-list section wrapper (heading tint, card top-border via re-publish to --np-card-hue at line 50). - `.np-cpl-pill` — chassis sibling pill on /people/category/ canonicals (data-collection attr, slug = field_cluster_key which IS the cluster key). Added 2026-08-19 for visual parity with the landing-list surface. Mai/alternative editorial siblings carry non-cluster slugs (mai-editorial / alternative-editorial) which don't match here → fall back to grey neutral, unchanged. */ .np-people-tab[data-cluster="leadership"], .np-people-cluster[data-cluster="leadership"], .np-cpl-pill[data-collection="leadership"] { --hue: var(--np-role-leadership); --hue-dk: var(--np-role-leadership-dk); } .np-people-tab[data-cluster="kaumatua"], .np-people-cluster[data-cluster="kaumatua"], .np-cpl-pill[data-collection="kaumatua"] { --hue: var(--np-role-kaumatua); --hue-dk: var(--np-role-kaumatua-dk); } .np-people-tab[data-cluster="researchers"], .np-people-cluster[data-cluster="researchers"], .np-cpl-pill[data-collection="researchers"] { --hue: var(--np-role-researchers); --hue-dk: var(--np-role-researchers-dk); } .np-people-tab[data-cluster="support"], .np-people-cluster[data-cluster="support"], .np-cpl-pill[data-collection="support"] { --hue: var(--np-role-support); --hue-dk: var(--np-role-support-dk); } .np-people-tab[data-cluster="other"], .np-people-cluster[data-cluster="other"], .np-cpl-pill[data-collection="other"] { --hue: var(--np-role-other); --hue-dk: var(--np-role-other-dk); } .np-people-tab[data-cluster="community-networks-local"], .np-people-cluster[data-cluster="community-networks-local"], .np-cpl-pill[data-collection="community-networks-local"] { --hue: var(--np-role-community-networks-local); --hue-dk: var(--np-role-community-networks-local-dk); } .np-people-tab[data-cluster="mai-groups"], .np-people-cluster[data-cluster="mai-groups"], .np-cpl-pill[data-collection="mai-groups"] { --hue: var(--np-role-mai-groups); --hue-dk: var(--np-role-mai-groups-dk); } .np-people-tab[data-cluster="community-networks-international"], .np-people-cluster[data-cluster="community-networks-international"], .np-cpl-pill[data-collection="community-networks-international"] { --hue: var(--np-role-community-networks-international); --hue-dk: var(--np-role-community-networks-international-dk); } .np-people-tab[data-cluster="journal-publications"], .np-people-cluster[data-cluster="journal-publications"], .np-cpl-pill[data-collection="journal-publications"] { --hue: var(--np-role-journal-publications); --hue-dk: var(--np-role-journal-publications-dk); } .np-people-tab[data-cluster="board"], .np-people-cluster[data-cluster="board"], .np-cpl-pill[data-collection="board"] { --hue: var(--np-role-board); --hue-dk: var(--np-role-board-dk); } /* A/B toggle retired 2026-07-14 to the shared .np-page-toggle in css/page-toggle.css — extended to a two-visible-button pair covering publications + people + kōrero (4-way). See documentation/ page-toggle-shared-plan.md. */ /* ── Person-type sub-pills (2026-08-14) ────────────────────────────────── Second row under the cluster pills on /people/landing-list, shown only when a cluster is active. Deliberately a near-copy of .np-pubsearch-subtab* in css/publication-search.css — the two landing-list siblings should not diverge visually for a row that does the same job. Kept as its own block rather than shared: per documentation/css-organisation.md each landing owns its listing CSS, and a shared rule would need a new neutral prefix across both templates. Revisit if a third surface wants it. */ .np-people-subtabs { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: -8px 0 22px; padding-left: 2px; } .np-people-subtab { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid #e4e0d8; background: #faf8f4; color: #4a453d; font-size: 12px; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s, color .15s; } .np-people-subtab-n { color: #8a857c; font-weight: 700; } .np-people-subtab:hover { border-color: var(--hue, #6c675f); } .np-people-subtab[aria-current="page"] { background: var(--hue-dk, #2c2c2b); border-color: var(--hue-dk, #2c2c2b); color: #fff; } .np-people-subtab[aria-current="page"] .np-people-subtab-n { color: rgba(255,255,255,.8); } /* The leading "All " pill reads as the parent of the row. */ .np-people-subtab--all { font-weight: 700; }