/* ============================================================= barrio_npm_prototype — Hononga Ā-Ao / community landing surface Two concerns, both scoped to the international-community landing family: 1. the six `video_categories` term listings restyled as cards 2. the pōwhiri photo backdrop on the Hononga Ā-Ao hero --------------------------------------------------------------- 1. video_categories term listings as cards --------------------------------------------------------------- Minimal restyle (2026-08-21, TWN) of the six `video_categories` page displays — /international/home, /video-categories/conferences, and their siblings. Those rows render taxonomy terms through Display Suite in the default view mode, markup this theme does not own, and they never had the `np-*` pass the rest of the site got: huge purple titles, red file links, no card chrome, ragged heights. SHORT-TERM AND CSS-ONLY. Deliberately does not touch the view's row plugin, which would be a config change, nor answer what the international landing should ultimately be. Both are scoped in documentation/international-community-landing-plan.md — §4 for the row-style decision, §3 for the bigger one. This buys the page a coherent look while those stay open. Scoped to `.view-video-categories`, so all six displays move together. That is intentional: they are the same listing under six titles, and styling one would start the divergence the plan warns about (§1.1). ⚠ Every selector here overrides Bootstrap utility classes DS and Views put on the markup (`px-5`, `pt-5`, `mb-3`, `mb-12`, `border`, `border-white`, `pb-3`, `text-red`, `text-uppercase`). Utilities are single-class (0-1-0), so the two-class selectors below outrank them without `!important`. If a rule here ever stops applying, check whether Barrio added another utility rather than reaching for `!important`. ============================================================= */ /* ---------- the column becomes a card frame ---------- */ /* Strips the utility padding and the white border Bootstrap draws, so the card below can own its own box. `align-items: stretch` is already Bootstrap's default on .row, so the column is full height — the card just has to fill it. */ .view-video-categories .views-row { padding: 0 10px; margin-bottom: 22px; border: 0; } /* ---------- the card ---------- */ /* Matches .np-tile-region--pub's chrome so these read as the same family as every other tile on the site. */ .view-video-categories .taxonomy-term { display: flex; flex-direction: column; height: 100%; padding: 18px 20px 20px; background: #fff; border: 1px solid #e7e2d8; border-radius: 10px; box-shadow: 0 1px 2px rgba(40, 40, 40, .05), 0 6px 18px rgba(40, 40, 40, .06); transition: border-color .12s, box-shadow .18s, transform .18s; } .view-video-categories .taxonomy-term:hover { border-color: var(--hue, #6c675f); box-shadow: 0 4px 10px rgba(40, 40, 40, .09), 0 16px 44px rgba(40, 40, 40, .10); transform: translateY(-3px); } /* DS wraps everything in .group-header; make it the flex column so the "Read more" cue can be pushed to the card's foot. */ .view-video-categories .taxonomy-term .group-header { display: flex; flex-direction: column; flex: 1; } /* ---------- title ---------- */ /* DS renders the term name in an

— wrong level for a card in a listing, and typography.css's `h1 { font-weight: 100 !important }` applies, so the weight needs !important to win. That escape hatch is the documented pattern (see CLAUDE.md, typography gotcha). */ .view-video-categories .taxonomy-term h1 { margin: 0 0 10px; padding-bottom: 0; font-size: 17px; line-height: 1.3; font-weight: 700 !important; } .view-video-categories .taxonomy-term h1 a { color: #2c2c2b; text-decoration: none; } .view-video-categories .taxonomy-term h1 a:hover { color: var(--hue-dk, #2c2c2b); text-decoration: underline; } /* ---------- description ---------- */ /* Clamped so a long blurb cannot drive the row height — the ragged columns in the reference screenshot were mostly this. */ .view-video-categories .taxonomy-term .group-header > p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #575349; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- "Related Files:" label + the file link ---------- */ /* Both arrive as

, one carrying `text-red`. Demoted to a meta label and a normal file link. */ .view-video-categories .taxonomy-term h4.field-label-above { margin: 0 0 4px; font-size: 11px; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: #8a8377; } .view-video-categories .taxonomy-term h4.text-red { margin: 0 0 12px; font-size: 13px; font-weight: 600 !important; color: inherit; } .view-video-categories .taxonomy-term h4.text-red a { color: var(--hue-dk, #2c2c2b); text-decoration: none; } .view-video-categories .taxonomy-term h4.text-red a:hover { text-decoration: underline; } /* ---------- "Read more" ---------- */ /* margin-top:auto pins it to the card foot, which is what makes the three cards line up regardless of how much body each carries. */ .view-video-categories .taxonomy-term .field--name-taxonomy-term-link { margin-top: auto; } .view-video-categories .taxonomy-term .field--name-taxonomy-term-link h4 { margin: 14px 0 0; padding-top: 0; font-size: 13px; font-weight: 700 !important; text-transform: none; } .view-video-categories .taxonomy-term .field--name-taxonomy-term-link a { color: var(--hue-dk, #2c2c2b); text-decoration: none; } .view-video-categories .taxonomy-term .field--name-taxonomy-term-link a:hover { text-decoration: underline; } /* ============================================================= 2. Hononga Ā-Ao hero — pōwhiri photo backdrop ============================================================= */ /* Puts 20241112_2024-IIRC-Powhiri_196.jpg behind the .np-hero__head on the Hononga Ā-Ao landing family. This is the re-add the theme parked for itself: both css/proto.css (the .np-hero docblock) and templates/layout/page.html.twig (above the .np-hero markup) say the photo backdrop was dropped in the 2026-08-18 pass and should come back "as a layer inside .np-hero__head with a hue tint overlay". This is that layer. The `bg_image` pipeline in page.html.twig (field_header_hero_image) is untouched and still unused — this is a fixed section photo, not a per-node one. SCOPE — .np-landing-group-- rather than a path. That class is the theme's existing per-L1-section hook (it already carries --cluster-hue from css/landing-submenu-groups.css, green #2f855a for this group), so the photo follows the section, not the URL. Verified blast radius as at 2026-08-21 is exactly two pages: /international/home and /node/2043 (the Climate Summit). Note that is NARROWER than the Hononga Ā-Ao menu tree, which has three children — the third, Ngā Huihuinga, points at /video-categories/conferences, and that page's hero resolves to --nga-rauemi instead. So menu parentage and hero L1 slug are not the same thing here; count the rendered class, don't infer it from the menu. Tighten to `body.path-international` if this should ever be one page only. ⚠ Do NOT move this onto .np-hero__head::before — that pseudo-element is already the tukutuku pattern (an npm-pattern-white.png mask tinted --hue-dk at 15% opacity). Keeping the photo on the element's own background-image leaves the two independent, and the pattern still masks correctly on top of the photo. The image is 1920×703 (2.73:1) — a band, which is why it goes here and not on `body` as a full-page wash. The commented-out picsum block in css/colors.css is that other approach if it's ever wanted; this aspect ratio would lose ~35% off the sides to `cover` on a typical desktop viewport, and background-attachment: fixed is ignored on iOS. */ .np-hero.np-landing-group--hononga-a-ao .np-hero__head { /* Layered background: the wash sits ON TOP of the photo (first layer paints last). WASH ALPHA IS A DELIBERATE TRADE-OFF, NOT A CONTRAST FIX. Settled at .6/.3 by TWN on 2026-08-21 after visual inspection (via .86/.72 and .3/.2), trading kicker legibility for photo visibility. The kicker rule below is what carries legibility now — see its note. The .np-hero__title chip is unaffected by any of this — opaque --hue fill with white text, it reads over anything. */ background-image: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .3)), url('../images/20241112_2024-IIRC-Powhiri_196.jpg'); background-size: cover; /* 40% rather than center. At container width the head is ~1140×190 (6:1) against a 2.73:1 source, so `cover` scales to WIDTH and crops hard vertically — only ~45% of the image height survives, roughly the 22–67% band. The pōwhiri subjects sit above the midline, so centring would frame the ground in front of them. */ background-position: center 40%; background-repeat: no-repeat; min-height: 190px; } /* Kicker legibility. The section default is --hue-dk (#28714d), which is a mid-tone green built to sit on white — on the photograph it measures mean 2.07:1 (desktop crop, .6/.3 wash) with 100% of sampled pixels below WCAG AA. Darkening is the fix TWN chose over lifting the wash, so the photo stays visible. #102f20 is --hue-dk taken a further ~65% toward black — still a forest green rather than a flat black, so it stays in the section's colour family. Measured over the region the kicker actually occupies: #28714d (current default) desktop mean 2.07:1 mobile 1.86:1 #153c29 (55% darker) desktop mean 4.29:1 mobile 3.84:1 #102f20 (65% darker) desktop mean 5.06:1 mobile 4.53:1 ⚠ DARKENING ALONE CANNOT CLOSE THIS. Means clear AA but worst-case stays ~1.9:1 even at near-black, because that corner of the photo contains both bright sky and deep shadow — no single text colour wins against both. 37% of sampled pixels are still below AA at #102f20. The text-shadow is what covers the rest: a white halo raises the local background luminance around the glyphs themselves, so the dark patches stop mattering. Darkening handles the light areas, the halo handles the dark ones — they are complementary, and removing either reopens half the problem. Scoped to this landing group only; every other .np-hero keeps the plain --hue-dk kicker on white. */ .np-hero.np-landing-group--hononga-a-ao .np-hero__kicker { color: #102f20; text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 8px rgba(255, 255, 255, .75); } /* Mobile — wash matched to desktop (.6/.3) on 2026-08-21 per TWN, so the hero reads the same on a phone as on a laptop. It briefly diverged at .90/.80 while desktop was being tuned; that is resolved, and the kicker rule above (which is not breakpoint-scoped) carries legibility at both sizes. Only min-height changes here, and note the crop inverts at this width: ~366×145 is 2.52:1 against the source's 2.73:1, so `cover` scales to HEIGHT and shows nearly the whole frame with ~8% trimmed off the sides. Desktop is the hard crop, not mobile — an earlier version of this comment had that backwards. Practical consequence: the vertical `background-position: center 40%` does almost nothing here, so tuning it only ever affects desktop. */ @media (max-width: 767.98px) { .np-hero.np-landing-group--hononga-a-ao .np-hero__head { min-height: 140px; } }