/* ============================================================= barrio_npm_prototype — landing submenu colour groups Per-L2 --cluster-hue overrides for the landing submenu (menu--main--landing.html.twig) AND (since 2026-07-17 nav-colour-bars-plan.md) for the top navbar L1 items + mega-menu L2 items. Each rule keys on the name-based class np-landing-group-- (slug = LandingGroupClass::slug(title), ASCII) and applies to: - .np-landing-item--parent — landing submenu L2 card - .np-landing-item--child — landing submenu L3 (inherits parent hue) - .np-top-item — navbar L1 top-nav item (left colour bar) - .np-l2-item — mega-menu L2 dropdown item (left colour bar) So a whole section — the L1 top-nav item, its L2 items in the mega-menu dropdown, the L2 landing submenu tiles, and their L3 children — reads as one colour. Editing one rule here recolours all four surfaces at once. ADDITIVE: overrides the single dark-neutral fallback in landing-submenu.css for the groups listed here. A slug not listed here falls back to the neutral band (submenu) or a transparent bar (navbar). The submenu shows ONE section at a time, so hues only need to be distinct WITHIN a section. All 7 sections cycle the same 5-hue palette by position: 0 blue #2b6cb0 · 1 teal #2c7a7b · 2 gold #b7791f · 3 terracotta #c05621 · 4 green #2f855a (6th item wraps to blue) Inline hex per rule so any single item can be re-tuned independently. Contrast: white title sits over the gradient's dark stop — all 5 hues pass WCAG AA there (verified 2026-07-12). EXCEPTION: the three "article content-type" tiles under "Ngā Pūrongo me ngā Hui" (nga-purongo, hui-events, he-korero) reference --np-ct-article-* tokens from colors.css directly, because those tiles' hues are deliberately linked to the article spotlight bands the reader lands on. Re-tune them via colors.css, not here. Editing here breaks the tile-to-spotlight visual handshake. REGENERABLE: this file holds ONLY these group rules, so a later phase (a generator — see landing-submenu-color-groups-plan.md Phase E) can rewrite it wholesale from the live menu. Seeded 2026-07-12; navbar surfaces added 2026-07-17. Tune freely. ============================================================= */ /* ---- L1 top-nav items + .np-hero band (navbar colour bar per nav-colour-bars-plan.md; hero band added 2026-08-18). ---- */ /* Same 5-hue cycle as the L2 blocks; 7 L1 items wrap at 6 (blue) + 7 (teal). .np-hero.np-landing-group-- is added by page.html.twig using the L1 slug resolved in barrio_npm_prototype_preprocess_page — the hero picks up the same --cluster-hue as its section's top-nav bar. */ .np-top-item.np-landing-group--ko-wai-matou, .np-hero.np-landing-group--ko-wai-matou { --cluster-hue: #2b6cb0; } /* blue */ .np-top-item.np-landing-group--nga-whakaputanga, .np-hero.np-landing-group--nga-whakaputanga { --cluster-hue: #2c7a7b; } /* teal */ .np-top-item.np-landing-group--rangahau-me-te-manaaki, .np-hero.np-landing-group--rangahau-me-te-manaaki { --cluster-hue: #b7791f; } /* gold */ .np-top-item.np-landing-group--hononga-a-hapori, .np-hero.np-landing-group--hononga-a-hapori, .np-top-item.np-landing-group--tuhononga-a-hapori, .np-hero.np-landing-group--tuhononga-a-hapori { --cluster-hue: #c05621; } /* terracotta */ .np-top-item.np-landing-group--hononga-a-ao, .np-hero.np-landing-group--hononga-a-ao, .np-top-item.np-landing-group--tuhononga-a-ao, .np-hero.np-landing-group--tuhononga-a-ao { --cluster-hue: #2f855a; } /* green */ /* Dual `hononga` + `tuhononga` selectors: Phase 2 C6 renamed these two L1 menu titles from "Hononga Ā-…" → "Tūhononga ā-…" (Paora te reo correction). Kept the old selectors as aliases in case any other menu entry still slugs to the old form (defensive) + to keep this file diff-reviewable alongside the new selectors. */ .np-top-item.np-landing-group--nga-rauemi, .np-hero.np-landing-group--nga-rauemi { --cluster-hue: #2b6cb0; } /* blue (wrap) */ .np-top-item.np-landing-group--nga-purongo-me-nga-hui, .np-hero.np-landing-group--nga-purongo-me-nga-hui { --cluster-hue: #2c7a7b; } /* teal (wrap) */ /* ---- Ko Wai Mātou (/about) ---- */ .np-landing-item--parent.np-landing-group--npm-whanau, .np-landing-item--child.np-landing-group--npm-whanau, .np-l2-item.np-landing-group--npm-whanau { --cluster-hue: #2b6cb0; } /* blue */ .np-landing-item--parent.np-landing-group--pou-whainga, .np-landing-item--child.np-landing-group--pou-whainga, .np-l2-item.np-landing-group--pou-whainga { --cluster-hue: #2c7a7b; } /* teal */ .np-landing-item--parent.np-landing-group--hitori, .np-landing-item--child.np-landing-group--hitori, .np-l2-item.np-landing-group--hitori { --cluster-hue: #b7791f; } /* gold */ .np-landing-item--parent.np-landing-group--purongo-a-tau, .np-landing-item--child.np-landing-group--purongo-a-tau, .np-l2-item.np-landing-group--purongo-a-tau { --cluster-hue: #c05621; } /* terracotta */ .np-landing-item--parent.np-landing-group--whakapa-mai, .np-landing-item--child.np-landing-group--whakapa-mai, .np-l2-item.np-landing-group--whakapa-mai { --cluster-hue: #2f855a; } /* green */ /* ---- Ngā Whakaputanga ---- */ .np-landing-item--parent.np-landing-group--nga-hua-rangahau-a-matou, .np-landing-item--child.np-landing-group--nga-hua-rangahau-a-matou, .np-l2-item.np-landing-group--nga-hua-rangahau-a-matou, .np-landing-item--parent.np-landing-group--a-matou-whakaputanga-rangahau, .np-landing-item--child.np-landing-group--a-matou-whakaputanga-rangahau, .np-l2-item.np-landing-group--a-matou-whakaputanga-rangahau { --cluster-hue: #2b6cb0; } /* blue */ /* Dual nga-hua-rangahau-a-matou + a-matou-whakaputanga-rangahau selectors — Phase 2 C6 row 110 renamed this L2 title from "Ngā Hua Rangahau a Mātou" → "Ā mātou whakaputanga rangahau · Our Research Outputs" (Paora te reo correction — compound shifted from "hua" fruits to "whakaputanga" publications). L3 children (Pukapuka, Pūrongo Rangahau, Te Arotahi, Wānanga Paetukutuku, Annual Reports) inherit this blue via the parent- cluster-hue cascade documented in landing-submenu.css §255-256. */ .np-landing-item--parent.np-landing-group--alternative-journal, .np-landing-item--child.np-landing-group--alternative-journal, .np-l2-item.np-landing-group--alternative-journal { --cluster-hue: #2c7a7b; } /* teal */ .np-landing-item--parent.np-landing-group--mai-journal, .np-landing-item--child.np-landing-group--mai-journal, .np-l2-item.np-landing-group--mai-journal { --cluster-hue: #b7791f; } /* gold */ /* ---- Rangahau me te Manaaki ---- */ /* Browse axes on /research/landing — the three primary CTAs. Seeded 2026-08-15; they had no hue at all and were falling back to the dark neutral, so the most important tiles on the page were the only ones wearing the "awaiting colour" placeholder. Terracotta is in the 5-hue palette and unused on this page, so it reads as distinct from the blues/teals/gold below. Their full-bleed treatment lives in css/landing-submenu.css — only the hue belongs in this (regenerable) file. A three-step ramp of ONE hue rather than three hues: the row stays legible as a single family (these are three ways into the same thing) while each card is still tellable apart. Darkening left → right, because darkening is the safe direction — white text gains contrast, never loses it. Widened 2026-08-15 from -14/-28 to -22/-42. The original steps were already perceptually EVEN (L* 49.5 / 42.7 / 35.8, gaps 6.7 and 6.9) — the row was simply too tight to tell apart at a glance, with a pattern overlay on each card and space between them. Now L* 49.5 / 38.9 / 28.7, gaps 10.6 and 10.2. All the headroom is at the DARK end: #c05621 is pinned by the AA floor, so the ramp can only be widened downward. Stopped short of -50%, where L* 24.5 starts reading as a different colour family (dark brown) rather than the same hue, which would cost the coherence the ramp exists for. Contrast vs white, computed 2026-08-15: 4.57 / 6.74 / 9.81 at the hue, all passing WCAG AA for normal text — which the 16.8px bold title needs, being under the 18.66px large-text threshold. The lightest step is the constraint; do not lighten #c05621 without re-checking. */ .np-landing-item--parent.np-landing-group--browse-by-patai, .np-l2-item.np-landing-group--browse-by-patai { --cluster-hue: #c05621; } /* terracotta */ .np-landing-item--parent.np-landing-group--browse-by-pae, .np-l2-item.np-landing-group--browse-by-pae { --cluster-hue: #96431a; } /* terracotta -22% */ .np-landing-item--parent.np-landing-group--browse-by-type, .np-l2-item.np-landing-group--browse-by-type { --cluster-hue: #6f3213; } /* terracotta -42% */ .np-landing-item--parent.np-landing-group--rangahau, .np-landing-item--child.np-landing-group--rangahau, .np-l2-item.np-landing-group--rangahau { --cluster-hue: #2b6cb0; } /* blue */ .np-landing-item--parent.np-landing-group--manaaki, .np-landing-item--child.np-landing-group--manaaki, .np-l2-item.np-landing-group--manaaki { --cluster-hue: #2c7a7b; } /* teal */ .np-landing-item--parent.np-landing-group--whakaaweawe-o-npm, .np-landing-item--child.np-landing-group--whakaaweawe-o-npm, .np-l2-item.np-landing-group--whakaaweawe-o-npm { --cluster-hue: #b7791f; } /* gold */ /* ---- Hononga Ā-Hapori ---- */ .np-landing-item--parent.np-landing-group--te-tira-takimano, .np-landing-item--child.np-landing-group--te-tira-takimano, .np-l2-item.np-landing-group--te-tira-takimano { --cluster-hue: #2b6cb0; } /* blue */ .np-landing-item--parent.np-landing-group--te-kupenga-o-mai, .np-landing-item--child.np-landing-group--te-kupenga-o-mai, .np-l2-item.np-landing-group--te-kupenga-o-mai { --cluster-hue: #2c7a7b; } /* teal */ .np-landing-item--parent.np-landing-group--kanapu, .np-landing-item--child.np-landing-group--kanapu, .np-l2-item.np-landing-group--kanapu { --cluster-hue: #b7791f; } /* gold */ /* ---- Hononga Ā-Ao ---- */ .np-landing-item--parent.np-landing-group--hui-rangahau-a-nga-iwi-taketake-o-te-ao, .np-landing-item--child.np-landing-group--hui-rangahau-a-nga-iwi-taketake-o-te-ao, .np-l2-item.np-landing-group--hui-rangahau-a-nga-iwi-taketake-o-te-ao { --cluster-hue: #2b6cb0; } /* blue */ .np-landing-item--parent.np-landing-group--hui-taumata-rangahau-panonitanga-ahuarangi-taketake-a-ao, .np-landing-item--child.np-landing-group--hui-taumata-rangahau-panonitanga-ahuarangi-taketake-a-ao, .np-l2-item.np-landing-group--hui-taumata-rangahau-panonitanga-ahuarangi-taketake-a-ao { --cluster-hue: #2c7a7b; } /* teal */ .np-landing-item--parent.np-landing-group--international-community, .np-landing-item--child.np-landing-group--international-community, .np-l2-item.np-landing-group--international-community { --cluster-hue: #b7791f; } /* gold — Kāhu L3 inherits via the child-selector row */ /* nga-huihuinga — dormant. Was position-2 in this section before "International Community" replaced it (menu restructure captured 2026-08-25 via npm_menu:import). Also no longer appears in "Ngā Pūrongo me ngā Hui" after that section's parallel restructure — the earlier "SHARED slug" note is stale. Kept in case user testing brings it back, matching the general dormant-rules convention documented in "Ngā Pūrongo me ngā Hui" below. */ .np-landing-item--parent.np-landing-group--nga-huihuinga, .np-landing-item--child.np-landing-group--nga-huihuinga, .np-l2-item.np-landing-group--nga-huihuinga { --cluster-hue: #b7791f; } /* gold */ /* ---- Ngā Rauemi ---- */ .np-landing-item--parent.np-landing-group--rapua-a-matou-rauemi, .np-landing-item--child.np-landing-group--rapua-a-matou-rauemi, .np-l2-item.np-landing-group--rapua-a-matou-rauemi { --cluster-hue: #2b6cb0; } /* blue */ .np-landing-item--parent.np-landing-group--puna-matauranga, .np-landing-item--child.np-landing-group--puna-matauranga, .np-l2-item.np-landing-group--puna-matauranga { --cluster-hue: #2c7a7b; } /* teal */ .np-landing-item--parent.np-landing-group--a-matou-ataata, .np-landing-item--child.np-landing-group--a-matou-ataata, .np-l2-item.np-landing-group--a-matou-ataata { --cluster-hue: #b7791f; } /* gold */ /* ---- Ngā Pūrongo me ngā Hui ---- */ /* The three article content-type tiles (news / events / our stories) reference --np-ct-article-* directly — the tile hue is deliberately linked to the spotlight band the reader lands on (article-teaser.css, article-listing.css, article-detail.css). Exception to this file's "inline hex per rule" convention noted in the header. */ .np-landing-item--parent.np-landing-group--nga-purongo, .np-landing-item--child.np-landing-group--nga-purongo, .np-l2-item.np-landing-group--nga-purongo { --cluster-hue: var(--np-ct-article-news); } /* linked to News spotlight */ .np-landing-item--parent.np-landing-group--hui-events, .np-landing-item--child.np-landing-group--hui-events, .np-l2-item.np-landing-group--hui-events { --cluster-hue: var(--np-ct-article-events); } /* linked to Events spotlight */ .np-landing-item--parent.np-landing-group--he-korero, .np-landing-item--child.np-landing-group--he-korero, .np-l2-item.np-landing-group--he-korero { --cluster-hue: var(--np-ct-article-our-stories); } /* linked to Our stories spotlight — was teal */ /* E-pānui + Kōrero-videos aren't article content types — they take ordinary palette hues chosen to complement the warm terracotta trio above. Warm gold + a bridging green make row 2 sit as a coordinated companion to the three-terracotta row 1. */ .np-landing-item--parent.np-landing-group--e-panui, .np-landing-item--child.np-landing-group--e-panui, .np-l2-item.np-landing-group--e-panui { --cluster-hue: #b7791f; } /* gold — was blue, extended to warm palette */ .np-landing-item--parent.np-landing-group--korero-videos, .np-landing-item--child.np-landing-group--korero-videos, .np-l2-item.np-landing-group--korero-videos { --cluster-hue: #2f855a; } /* green — was unmapped */ /* nga-huihuinga (gold) is defined under "Hononga Ā-Ao" above — shared slug. */ /* Dormant rules: nga-wananga, nga-hui-rangahau, nga-awheawhe-me-nga-wananga-a-ipurangi — these slugs don't appear in the current live menu (restructured), but the rules are kept intentionally in case user testing brings any of these L2s back. Zero runtime cost while dormant — no matching HTML — and the mapping is ready if the slug reappears. Not a cleanup target. */ .np-landing-item--parent.np-landing-group--nga-wananga, .np-landing-item--child.np-landing-group--nga-wananga, .np-l2-item.np-landing-group--nga-wananga { --cluster-hue: #c05621; } /* terracotta */ .np-landing-item--parent.np-landing-group--nga-hui-rangahau, .np-landing-item--child.np-landing-group--nga-hui-rangahau, .np-l2-item.np-landing-group--nga-hui-rangahau { --cluster-hue: #2f855a; } /* green */ .np-landing-item--parent.np-landing-group--nga-awheawhe-me-nga-wananga-a-ipurangi, .np-landing-item--child.np-landing-group--nga-awheawhe-me-nga-wananga-a-ipurangi, .np-l2-item.np-landing-group--nga-awheawhe-me-nga-wananga-a-ipurangi { --cluster-hue: #2b6cb0; } /* blue (wrap) */