/* ============================================================= barrio_npm_prototype — project detail page /project/ (node + bundle=project, canonical route) Phases 1 + 2 of prototypes/project-detail-by-patai.html — covers: · Pātai-hued title band with niho pattern · Two-column layout (content + facts rail at desktop; stacks at 880px) · Hero with type badge + featured pill overlay · Body + pull quote · Downloads section (icon + name + size rows) · Related links section (name + ↗ rows) · Rail rows: Matakitenga, Wā timeline, Whare wānanga host, Kaiārahi lead, Kaupapa programme · Browse-back link Phase 3 (deferred): breadcrumb, project code, accessibility audit. Shared chrome extracted out of this file: css/rail.css (the facts-rail box + related cards) and css/{researcher,story,video}-modal.css (the modals). ============================================================= */ /* Hue cascade — outer wrapper carries data-patai="" so --hue and --hue-dk reach every coloured surface on the page. Same pattern as .np-patai-spotlight on the listing pages. */ .np-project-detail { --hue: #6c675f; --hue-dk: #2c2c2b; } .np-project-detail[data-patai="puawai"] { --hue: var(--np-patai-puawai); --hue-dk: var(--np-patai-puawai-dk); } .np-project-detail[data-patai="mauri"] { --hue: var(--np-patai-mauri); --hue-dk: var(--np-patai-mauri-dk); } .np-project-detail[data-patai="whanau"] { --hue: var(--np-patai-whanau); --hue-dk: var(--np-patai-whanau-dk); } .np-project-detail[data-patai="teao"] { --hue: var(--np-patai-teao); --hue-dk: var(--np-patai-teao-dk); } /* .np-project-band + .np-band-pattern + .np-project-band-inner + .np-band-kicker + .np-project-title retired 2026-08-19 per Day 4 of node-header-unification-plan.md (+ project-detail-header-unification.md §5A) — kicker + h1 now render in the shared .np-hero from page.html.twig. The bespoke niho-pattern band is gone; per-project- type kicker + featured-impact meta chip live in the hero instead. */ /* ---------- Layout ---------- Desktop: 2 columns — content 2fr, rail 1fr. Mobile (≤880px): rail stacks above content so the metadata is immediately visible (prototype's behaviour). */ .np-project-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; margin-bottom: 50px; } /* ---------- Content column ---------- */ .np-project-content { min-width: 0; /* prevent grid blowout on long titles in body */ } /* Hero image block — only renders when the project has a featured image (2026-08-19 iteration). Compact tukutuku-cover fallback for image-less projects retired; its decorative pattern moved to `.np-rail-badges` (below). Aspect-ratio 16:9, image-covers, badges overlay bottom-left. */ .np-project-hero { position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 28px; aspect-ratio: 16 / 9; background-size: cover; background-position: center; } .np-project-hero-badges { position: absolute; bottom: 16px; left: 16px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; } .np-project-hero-badges .np-type-badge { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 5px; color: #fff; background: #6c675f; } .np-project-hero-badges .np-type-badge[data-t="full"] { background: var(--np-pt-full); } .np-project-hero-badges .np-type-badge[data-t="scoping"] { background: var(--np-pt-scoping-dk); } .np-project-hero-badges .np-type-badge[data-t="doctoral"] { background: var(--np-pt-doctoral); } .np-project-hero-badges .np-type-badge[data-t="internship"] { background: var(--np-pt-internship); } .np-project-hero-badges .np-type-badge[data-t="programme"] { background: var(--np-pt-programme); } .np-project-hero-badges .np-type-badge[data-t="whakaaweawe"] { background: var(--np-pt-whakaaweawe); } .np-project-hero-badges .np-type-badge[data-t="featured-impact"] { background: var(--np-pt-featured-impact); } /* .np-feat-pill retired 2026-08-19 per Day 4 D-PJ3 — the Whakaaweawe · Featured impact chip in the .np-hero meta-slot is the single source of the featured-impact signal. */ /* ---------- Tukutuku banner on the rail's badges section ---------- Rehomed the tukutuku pattern from the retired image-less hero fallback (`.np-project-hero` when no featured image) to the top of `.np-rail-inner` as a decorative banner behind the type/feat badges. Bleeds to the rail-inner's inner edges via negative margins; `overflow: hidden` clips the pattern to the banner box. Scoped to `.np-project-detail` so the shared `.np-rail-inner` + `.np-rail-badges` (also used by publication + arotahi rails) keep their default plain treatment. */ .np-project-detail .np-rail-badges { position: relative; margin: -20px -22px 18px; /* bleed to rail-inner's padding edges */ padding: 14px 22px; background: linear-gradient(135deg, var(--hue-dk), var(--hue)); overflow: hidden; border-radius: 4px 4px 0 0; /* matches rail-inner's top corners (radius 8, minus 4 accent border) */ } .np-project-detail .np-rail-badges::before { content: ''; position: absolute; inset: 0; background-image: url('../images/npm-pattern-white.png'); background-repeat: no-repeat; background-position: 100% center; background-size: auto 250%; opacity: .22; pointer-events: none; } /* Ensure badges sit above the tukutuku pattern. */ .np-project-detail .np-rail-badges .np-type-badge, .np-project-detail .np-rail-badges .np-feat-pill { position: relative; z-index: 1; } /* Body — typography for the rendered field text. */ .np-project-body { font-size: 15.5px; line-height: 1.65; color: #2c2c2b; } .np-project-body h2 { font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--hue); color: #2c2c2b; } .np-project-body h3 { font-weight: 600; font-size: 18px; margin: 26px 0 8px; } .np-project-body p { margin: 0 0 16px; } .np-project-body p:last-child { margin-bottom: 0; } .np-project-body a { color: var(--hue-dk); } .np-project-body a:hover { text-decoration: underline; } .np-project-body ul, .np-project-body ol { margin: 0 0 16px; padding-left: 24px; } .np-project-body li { margin-bottom: 6px; } /* Pull quote — italic block with Pātai-hued left rule. Two consumers share this treatment: 1. `.np-project-quote` — the summary-driven pull quote rendered above the body (from body.summary, dedup-suppressed when the summary is a prefix of body.value; see ProjectDetail\Sections\ContentSection::quote()). 2. `.np-project-body blockquote` — inline blockquotes editors write inside the body via CKEditor's Quote button. Same visual so editors don't need to remember a class name — every quote gets the Pātai-hued rule automatically. */ .np-project-quote, .np-project-body blockquote { font-style: italic; font-size: 18px; line-height: 1.55; color: #2c2c2b; padding: 6px 0 6px 18px; border-left: 4px solid var(--hue); margin: 28px 0; } .np-project-quote p, .np-project-body blockquote p { margin: 0 0 8px; } .np-project-quote p:last-child, .np-project-body blockquote p:last-child { margin-bottom: 0; } .np-project-quote cite, .np-project-body blockquote cite { display: block; font-style: normal; font-size: 13px; color: #6c675f; margin-top: 8px; } /* ---------- Facts rail (right column) ---------- */ .np-project-rail { min-width: 0; } /* The shared rail chrome (.np-rail-* box + badges / rows / classification) and the related-researcher / related-story cards moved to css/rail.css — shared with the featured-publication + arotahi rails. */ /* ---------- Gallery (content column) ---------- Multi-value field_image rendered as a flexible CSS Grid. Auto-fit handles 3+ cleanly (column count flexes with viewport); count-based overrides reshape the 1- and 2-image cases that auto-fit handles awkwardly. Image style 400_x_300_px scale-and-crops uploads to a uniform 4:3 thumbnail; object-fit: cover keeps the cells consistent when the source isn't already that ratio. */ /* .np-project-gallery + .np-project-videos wrappers retired 2026-08-19 — images + videos now share a single .np-project-media section that uses the shared _media-grid partial; the CSS lives grouped with the person's rules in person-detail.css (`.np-person-content .np-media-*, .np-project-content .np-media-*`). See combined-media-grid.md. The `.np-project-media` outer heading here just supplies the section margin — matches the person's `.np-person-media` block. */ .np-project-media { margin: 28px 0 0; } .np-project-media h3 { font-weight: 600; font-size: 17px; margin: 0 0 10px; color: #2c2c2b; } /* The gallery grid + items + count-based sizing + lightbox modal moved to the shared css/image-grid.css component (see _image-grid.html.twig + _gallery-modal.html.twig). Only the .np-project-gallery wrapper + heading stay here (project-owned framing). */ /* ---------- Downloads + related-links sections (content column) ---------- Both follow the same structural pattern:
wrapper with an

, then an unstyled
    with one
  • per entry. Shared rules live in the combined selectors; per-row content differences split into the family-specific blocks below. */ .np-project-downloads, .np-project-links { margin: 28px 0 0; } .np-project-downloads h3, .np-project-links h3 { font-weight: 600; font-size: 17px; margin: 0 0 10px; color: #2c2c2b; } .np-dl-list, .np-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .np-dl-list li, .np-link-list li { border-top: 1px solid #e4e0d8; } .np-dl-list li:first-child, .np-link-list li:first-child { border-top: 0; } .np-dl-list a, .np-link-list a { display: flex; align-items: center; gap: 10px; padding: 12px 4px; text-decoration: none; color: #2c2c2b; transition: background .15s; } .np-dl-list a:hover, .np-link-list a:hover { background: #faf8f3; color: var(--hue-dk); } /* Download rows moved to the shared .np-file list (_attachment-list.html.twig, styled in detail.css) — the old .np-dl-ic/nm/sz row styles were retired with that swap. .np-dl-list here now only serves .np-link-list. */ /* Related-link row — title + ↗ external indicator. */ .np-link-list .np-link-nm { flex: 1; font-size: 14px; font-weight: 600; color: var(--hue-dk); } .np-link-list .np-link-ext { color: #6c675f; font-size: 14px; } /* The gallery lightbox modal (.np-gallery-modal*) moved to the shared css/image-grid.css component (see _gallery-modal.html.twig). */ /* .np-project-videos wrappers retired 2026-08-19 with the .np-project-gallery retirement above — videos + images now share the .np-project-media section (see block above). */ /* The researcher, story + video modals moved to css/researcher-modal.css, css/story-modal.css, css/video-modal.css — shared modal chrome, also used on person pages and /replay-media. */ /* ---------- Responsive ---------- */ @media (max-width: 880px) { .np-project-layout { grid-template-columns: 1fr; gap: 24px; } /* Rail moves ABOVE content — prototype's mobile behaviour. */ .np-project-rail { order: -1; } } @media (max-width: 560px) { /* .np-project-band-inner rule retired with the band (Day 4). */ .np-project-hero { aspect-ratio: 4 / 3; } /* (The single-gallery-image phone override moved to css/image-grid.css.) */ } /* ---------- Kairangahau · Researchers grid — full-width below layout ---- Rich person cards (`_person-card.html.twig`) in a `repeat(auto-fit, minmax(280px, 1fr))` grid, mirroring the people-search / people-landing-list surface so the researcher browse experience stays consistent across the site. Card chrome comes from `role-browse.css` + `detail.css` (the ambient .np-person-card rules people-search already loads) — this block only supplies the section heading + grid container. Retired earlier the same day: an in-house tile grid (~120px squares with `Kaiārahi` pill overlay) — swapped to person-cards for site- wide consistency and richer researcher information at the browse moment. Kaiārahi lead returned to the rail column above (compact link + inline template) so it's visible without scrolling. */ .np-project-people { margin: 32px 0 40px; } .np-project-people-head { margin: 0 0 20px; font-size: 20px; font-weight: 700; color: #2c2c2b; } /* Default (3+ researchers) — cards fill the row via 1fr so wide teams read as a coherent grid. `data-count="1"` / `data-count="2"` variants below cap the max card width so singletons + pairs don't stretch to full-width. `justify-content: start` left-aligns any partial row (rare with 3+ cards, but keeps overflow trailing right rather than centering). */ .np-project-people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; justify-content: start; } /* Small-N cap: 1-2 cards → max 380px each (~1/3 of a 1140 container). Prevents a lone researcher from stretching card content across the full page width, and keeps a pair at natural size with trailing whitespace rather than each card taking half the container. */ .np-project-people-grid[data-count="1"], .np-project-people-grid[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); } /* Wrapper around each card — establishes the positioning context for the optional Kaiārahi pill overlay on the lead's card. Card partial itself ships as `.np-person-card` inside `.np-tile-region` (`_person-card.html.twig`); the wrap sits outside it. */ .np-project-people-card-wrap { position: relative; display: flex; min-width: 0; } .np-project-people-card-wrap > .contextual-region, .np-project-people-card-wrap > .np-tile-region { flex: 1; min-width: 0; } /* Kaiārahi pill — filled corner-badge on the lead's card. Top-left inset over the portrait area. --hue-dk fill + white text for contrast; small shadow so it lifts off busy portraits. */ .np-project-people-lead-pill { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 9px; border-radius: 4px; background: var(--hue-dk, #2c2c2b); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }