, then — for the two-item layout — a

around the .news-card tiles (the single-item feature layout skips that last .row). That nested content only takes its natural (shorter) height, leaving a gap below it: the parent .row only stretches the two .col-md-6 *columns* to equal height, it doesn't hand that height down through every wrapper in between, so the existing "height:100%" on .news-card two rules below has nothing to resolve against. Turn each link in that chain into a flex column so the .news-card tiles actually fill the stretched height instead of leaving it empty. */ #latest-news .row > .col-md-6 { display: flex; } #latest-news .row > .col-md-6 > * { flex: 1; display: flex; flex-direction: column; } #latest-news .row > .col-md-6 .news { flex: 1; display: flex; flex-direction: column; } /* 1.5rem to match the gy-4 gap the outer .row now uses between this column and the feature card next to it (see Homecolibri.html) - was 10px, a leftover plugin default that read as a different, smaller gap once cards from both rows stack in the same column on mobile. */ #latest-news .row > .col-md-6 .news > .row { flex: 1; display: flex; flex-direction: column; margin: 0; gap: 1.5rem; } /* The plugin also inlines its own "margin-bottom: 10px" on every tile (including the last one) for spacing between them — replaced here by the gap above, and cancelled with !important (the only way to beat an inline style) so the last tile's own border actually touches the bottom instead of stopping 10px short of it. Scoped to #latest-news so the plugin's own spacing is untouched anywhere else it's used. */ #latest-news .row > .col-md-6 .news-card { flex: 1; margin-bottom: 0 !important; } #latest-news .row > div:nth-child(2) .news-thumb { background: var(--c-gold-tint); color: #9C7600; } #latest-news .row > div:nth-child(2) .news-tag { color: #9C7600; } #latest-news .row > div:nth-child(2) .news-card { border-radius: 28px 6px 28px 6px; } #latest-news .row > div:nth-child(3) .news-thumb { background: var(--c-burnt-tint); color: var(--c-burnt); } #latest-news .row > div:nth-child(3) .news-tag { color: var(--c-burnt); } #news-grid .row > div:nth-child(3n+2) .news-thumb { background: var(--c-gold-tint); color: #9C7600; } #news-grid .row > div:nth-child(3n+2) .news-tag { color: #9C7600; } #news-grid .row > div:nth-child(3n+2) .news-card { border-radius: 28px 6px 28px 6px; } #news-grid .row > div:nth-child(3n+3) .news-thumb { background: var(--c-burnt-tint); color: var(--c-burnt); } #news-grid .row > div:nth-child(3n+3) .news-tag { color: var(--c-burnt); } /* ========================================================================== News filter bar + pagination ========================================================================== */ .news-filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; } .news-filter-pill { font-family: var(--font-heading); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-primary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; padding: .5rem 1.1rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .news-filter-pill:hover { border-color: var(--text-primary); } .news-filter-pill.is-active { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); } /* Stakeholder categories in "A collaborative approach" — card treatment matching .vision-card/.partner-logo (colour-cycled icon circle, alternating corner rounding) instead of a flat label. */ .stakeholder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; } @media (max-width: 991.98px) { .stakeholder-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .stakeholder-grid { grid-template-columns: 1fr; } } .stakeholder-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 6px 24px 6px 24px; padding: 1.25rem 1.5rem; transition: transform .25s ease, box-shadow .25s ease; } .stakeholder-card:nth-child(2n) { border-radius: 24px 6px 24px 6px; } .stakeholder-card:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(14, 49, 19, 0.1); } .stakeholder-card__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stakeholder-card__icon svg { width: 24px; height: 24px; } .stakeholder-card p { margin-bottom: 0; font-weight: 600; font-size: .95rem; } .stakeholder-card:nth-child(3n+1) .stakeholder-card__icon { background: var(--c-moss-tint); color: var(--c-moss); } .stakeholder-card:nth-child(3n+2) .stakeholder-card__icon { background: var(--c-gold-tint); color: var(--text-primary); } .stakeholder-card:nth-child(3n+3) .stakeholder-card__icon { background: var(--c-burnt-tint); color: var(--c-burnt); } /* ========================================================================== Work package interaction flow (About > Focus areas). Built from the site's own card component (.wp-flow-card — same cut-corner/border-accent language as .stakeholder-card/.partner-logo) inside colour-washed phase zones, full container width. Each card/the .wp-flow__coord band opens the matching .wp-detail card, zooming out of that exact spot via a manual FLIP transform animation (see initFocusAreaDiagram in main.js — transform only, never opacity, so it reads as a zoom and not a cross-fade) — no separate list duplicating the same content underneath. ========================================================================== */ .wp-flow { border: 1.5px dashed var(--c-espresso); border-radius: 16px 48px 16px 48px; opacity: .9; padding: 1.75rem; } @media (min-width: 768px) { .wp-flow { padding: 2.25rem; } } .wp-flow__coord { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: var(--c-espresso); color: var(--c-white); border-radius: 6px 24px 6px 24px; padding: 1rem 1.5rem; font-family: var(--font-heading); font-weight: 700; font-size: .95rem; text-align: center; cursor: pointer; border: 0; width: 100%; transition: transform .2s ease, box-shadow .2s ease; } .wp-flow__coord:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .2); } .wp-flow__coord:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } /* WP4 and WP6+7 are also standalone .wp-flow__coord bands now (not just WP8, .wp-flow's original first child) — give every one after the first the same 1rem rhythm .wp-zone already uses between siblings. */ .wp-flow > .wp-flow__coord:not(:first-child) { margin-top: 1rem; } /* Communication and coordination are "ongoing throughout the project" like Stakeholders, but common to any project rather than specific to this one — per client feedback they keep this compact band shape (unlike .wp-stakeholders below) but lose the solid fill so they don't outweigh the analysis/strategy/stakeholders zones, which use the same tint language. */ .wp-flow__coord--tint { background: var(--c-espresso-tint); color: var(--text-primary); } .wp-flow__coord-note { font-weight: 400; font-style: italic; font-size: .78rem; opacity: .75; } /* Stakeholder engagement is project-specific and called out (per client feedback) with the same tinted-zone + white-card language as .wp-zone/.wp-flow-card, sized as its own hero band rather than the plain .wp-flow__coord bar the other "ongoing throughout" work packages use. */ .wp-stakeholders { all: unset; display: block; box-sizing: border-box; width: 100%; cursor: pointer; background: var(--c-burnt-tint); border-radius: 16px 48px 16px 48px; padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; } @media (min-width: 768px) { .wp-stakeholders { padding: 2rem; } } .wp-stakeholders:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12); } .wp-stakeholders:focus-visible { outline: 2px solid var(--c-burnt); outline-offset: 2px; } .wp-stakeholders__label { display: block; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--c-burnt); margin: 0 0 1.1rem; } .wp-stakeholders__inner { display: block; text-align: left; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 6px solid var(--c-burnt); border-radius: 6px 24px 6px 24px; padding: 1.25rem 1.5rem; } .wp-stakeholders__heading { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--text-primary); } .wp-stakeholders__note { display: block; margin-top: .3rem; font-size: .82rem; font-style: italic; font-weight: 400; color: var(--text-muted); } .wp-connector { display: flex; justify-content: center; margin: 1rem 0; } .wp-connector svg { width: 22px; height: 22px; color: var(--text-muted); opacity: .6; } .wp-zone { border-radius: 16px 48px 16px 48px; padding: 1.5rem; margin-top: 1rem; position: relative; } @media (min-width: 768px) { .wp-zone { padding: 2rem; } } .wp-zone--analysis { background: var(--c-moss-tint); } .wp-zone--strategy { background: var(--c-gold-tint); } .wp-zone--outcomes { background: rgba(255, 197, 2, .08); } .wp-zone--support { background: rgba(14, 49, 19, .05); } /* Side arrows flanking Analysis phase (see the HTML comment on .wp-side-arrow in Focusareas.html for why). Same stroke/color/opacity as .wp-connector svg — the stem is a stretched to fill the flex space (preserveAspectRatio="none" + vector-effect="non-scaling-stroke" keeps it a crisp constant-width round-capped line instead of a plain filled rectangle), capped by the connector's own chevron tip cropped to its actual stroke bounds, in the margin the zone gives up on each side. */ .wp-zone--analysis { margin-left: 2.5rem; margin-right: 2.5rem; } .wp-side-arrow { position: absolute; top: 0; /* .wp-connector below the zone is 1rem margin + a 22px arrow, so its tip sits 38px past the zone's own bottom edge — but the connector's own ink stops a few px short of its 22px box (empty margin below the chevron in the original icon), so matching box-to-box at -38px actually renders the tip ~4px lower than the connector's. -34px is what lines the two arrowheads up in practice (checked pixel-by- pixel). */ bottom: -34px; display: flex; flex-direction: column; align-items: center; color: var(--text-muted); opacity: .6; pointer-events: none; } .wp-side-arrow__stem { flex: 1; width: 22px; display: block; overflow: visible; } .wp-side-arrow__tip { width: 22px; height: 13.75px; flex-shrink: 0; display: block; overflow: visible; } .wp-side-arrow--left { right: 100%; margin-right: .4rem; } .wp-side-arrow--right { left: 100%; margin-left: .4rem; } /* Below 560px there's not enough margin left for a 22px arrow — shrink the zone's margin and the arrows together instead of hiding them, so WP4's continuous-involvement arrows stay visible at every width. */ @media (max-width: 560px) { .wp-zone--analysis { margin-left: 1.25rem; margin-right: 1.25rem; } .wp-side-arrow__stem { width: 16px; } .wp-side-arrow__tip { width: 16px; height: 10px; } .wp-side-arrow--left { margin-right: .3rem; } .wp-side-arrow--right { margin-left: .3rem; } } .wp-zone__label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; margin: 0 0 1.1rem; } .wp-zone--analysis .wp-zone__label { color: var(--c-moss); } .wp-zone--strategy .wp-zone__label { color: #9C7600; } .wp-zone--outcomes .wp-zone__label, .wp-zone--support .wp-zone__label { color: var(--c-espresso); } :root[data-theme="dark"] .wp-zone--strategy .wp-zone__label { color: var(--c-gold); } :root[data-theme="dark"] .wp-zone--outcomes .wp-zone__label, :root[data-theme="dark"] .wp-zone--support .wp-zone__label { color: var(--text-muted); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wp-zone--strategy .wp-zone__label { color: var(--c-gold); } :root:not([data-theme="light"]) .wp-zone--outcomes .wp-zone__label, :root:not([data-theme="light"]) .wp-zone--support .wp-zone__label { color: var(--text-muted); } } .wp-row--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media (max-width: 991.98px) { .wp-row--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .wp-row--3 { grid-template-columns: 1fr; } } .wp-row--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } @media (max-width: 575.98px) { .wp-row--2 { grid-template-columns: 1fr; } } .wp-flow-card { all: unset; display: flex; align-items: flex-start; gap: 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 6px solid var(--c-moss); border-radius: 6px 24px 6px 24px; padding: 1.5rem 1.75rem; cursor: pointer; box-sizing: border-box; width: 100%; transition: transform .25s ease, box-shadow .25s ease; } .wp-flow-card:nth-child(2n) { border-radius: 24px 6px 24px 6px; } .wp-flow-card:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(14, 49, 19, 0.1); } .wp-flow-card:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; } /* Made invisible (not just repositioned) for the duration of the open/close animation — visibility:hidden keeps its layout space (nothing reflows) while the expanded .wp-detail zooms to/from that spot. Also used on .wp-flow__coord, which isn't a .wp-flow-card but shares this state. */ .wp-flow-card--hidden { visibility: hidden; } .wp-flow-card[data-accent="engage"] { border-left-color: var(--c-burnt); } .wp-flow-card[data-accent="strategy"] { border-left-color: var(--c-gold); } .wp-flow-card[data-accent="support"] { border-left-color: var(--border-subtle); } .wp-flow-card__heading { flex: 1; min-width: 0; } .wp-flow-card__phase { display: block; font-family: var(--font-heading); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .25rem; } .wp-flow-card__heading h3 { font-family: var(--font-heading); font-size: 1rem; margin: 0; line-height: 1.3; } .wp-outcome { all: unset; display: block; box-sizing: border-box; width: 100%; text-align: left; cursor: pointer; background: var(--c-gold); color: var(--c-forest); border-radius: 6px 24px 6px 24px; padding: 1.5rem 1.75rem; transition: transform .25s ease, box-shadow .25s ease; } .wp-outcome:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(14, 49, 19, 0.1); } .wp-outcome:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; } .wp-outcome h3 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0; } .wp-scrim { position: fixed; inset: 0; background: rgba(14, 20, 15, 0.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1035; } .wp-scrim.is-visible { opacity: 1; pointer-events: auto; } body.wp-lock-scroll { overflow: hidden; } .wp-detail { position: fixed; inset: 0; margin: auto; width: min(560px, 90vw); max-height: min(75vh, 560px); overflow-y: auto; z-index: 1036; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 6px solid var(--c-moss); border-radius: 6px 24px 6px 24px; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .35); padding: 1.5rem 3rem 1.75rem 1.5rem; } .wp-detail[hidden] { display: none; } /* Same fix as .partner-modal.is-animating: hide overflow while the FLIP zoom is resizing the box, so the fixed-size content inside doesn't flash a scrollbar (both axes — overflow-y other than visible forces overflow-x to auto too) before settling at its final size. */ .wp-detail.is-animating { overflow: hidden; } .wp-detail[data-accent="engage"] { border-left-color: var(--c-burnt); } .wp-detail[data-accent="strategy"] { border-left-color: var(--c-gold); } .wp-detail[data-accent="support"] { border-left-color: var(--border-subtle); } .wp-detail[data-accent="coord"] { border-left-color: var(--c-espresso); } .wp-detail__phase { display: block; font-family: var(--font-heading); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .3rem; } .wp-detail h3 { margin: 0 0 .7rem; font-size: 1.05rem; line-height: 1.3; } .wp-detail p.lead { font-family: var(--font-heading); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 .6rem; } .wp-detail p.body { color: var(--text-muted); } .wp-detail__close { all: unset; position: absolute; top: .9rem; right: 1rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; line-height: 1; } .wp-detail__close:hover { background: var(--bg-tinted); } .news-pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 3rem; } .news-pagination-page, .news-pagination-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-heading); font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .news-pagination-arrow svg { width: 16px; height: 16px; } .news-pagination-page:hover, .news-pagination-arrow:hover { border-color: var(--text-primary); } .news-pagination-page.is-active { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); } .news-pagination-ellipsis { color: var(--text-muted); padding: 0 .25rem; } /* ========================================================================== News — tag chip shared by cards and the detail page, and the EXT:news markup that turns .news-card into a whole-card (the homepage mock only ever used it on a plain div, so these resets weren't needed until List/Item.html and List/ItemFeatured.html started rendering real, linked news items). ========================================================================== */ .news-tag { font-weight: 700; color: var(--c-moss); text-decoration: none; } .news-tags { display: inline-flex; flex-wrap: wrap; gap: .4rem; } .news-card { display: block; color: inherit; text-decoration: none; } .news-list-empty { text-align: center; color: var(--text-muted); padding: 3rem 0; } /* ========================================================================== News detail (EXT:news single view) — header/teaser/body/pager/backlink are capped to a readable column; the related-news grid below stays full container width so its cards can sit 3-up like the list page. ========================================================================== */ .news-detail__header, .news-detail__teaser, .news-detail__body, .news-detail__pager, .news-detail__backlink, .news-detail__share, .news-detail__image, .news-detail__video, .news-detail__audio, .news-img-wrap { max-width: 48rem; margin-left: auto; margin-right: auto; } .news-detail__header { margin-bottom: 2rem; } .news-detail__header h1 { margin-bottom: .75rem; } .news-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-family: var(--font-heading); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .news-detail__teaser { margin-bottom: 2rem; color: var(--text-primary); } .news-detail__body { margin-bottom: 2.5rem; } .news-detail__body p:last-child { margin-bottom: 0; } .news-detail__image, .news-detail__video, .news-detail__audio { display: block; width: 100%; height: auto; border-radius: 6px 28px 6px 28px; margin-bottom: 2rem; } .news-img-wrap img, .mediaelement-image img { width: 100%; height: auto; border-radius: 6px 28px 6px 28px; } .news-img-wrap { margin-bottom: 2rem; } .news-img-caption { margin-top: .5rem; font-size: .85rem; color: var(--text-muted); } .news-detail__pager { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; margin-bottom: 2rem; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .news-detail__pager-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--text-primary); text-decoration: none; } .news-detail__pager-link--next { margin-left: auto; } .news-detail__pager-link:hover { color: var(--c-moss); } .news-detail__backlink { margin-bottom: 2rem; } .news-detail__backlink a { color: var(--text-primary); text-decoration: none; font-weight: 600; } .news-detail__backlink a:hover { color: var(--c-moss); } .news-detail__backlink .btn-arrow { transform: rotate(180deg); } .news-detail__share { margin-bottom: 2.5rem; } .news-related-wrap { margin-top: 3rem; } .news-related { margin-bottom: 2.5rem; } .news-related h4, .news-related .section-eyebrow { margin-bottom: 1.25rem; } .news-related-list { list-style: none; padding: 0; margin: 0; } .news-related-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border-subtle); } .news-related-list a { color: var(--text-primary); font-weight: 600; text-decoration: none; } .news-related-list a:hover { color: var(--c-moss); } .news-related-list__size, .news-related-list__desc { color: var(--text-muted); font-size: .85rem; } /* ========================================================================== Footer ========================================================================== */ .colibri-footer { background-color: var(--surface-brand); color: var(--c-white); padding: 3.5rem 0 2rem; } .colibri-footer a { color: var(--c-white); opacity: .85; } .colibri-footer a:hover { opacity: 1; } .colibri-footer .footer-meta { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 2rem; padding-top: 1.5rem; font-size: .8rem; opacity: .75; } .footer-eu-badge { display: inline-flex; align-items: center; line-height: 0; } /* ========================================================================== Concept B — bold graphic system (split panels, big numerals, zigzag) ========================================================================== */ .hero-split { display: flex; align-items: stretch; min-height: 100vh; overflow: hidden; border-bottom: none; background: none; padding: 0; } .hero-split__panel--text { flex: 0 0 60%; background: var(--surface-brand); color: var(--c-white); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-height) + 3rem) 4rem 4rem; } .hero-split__panel--text h1 { color: var(--c-white); font-size: clamp(2.6rem, 5vw, 3rem); line-height: 1.05; } .hero-split__panel--text .lede { font-size: 1.15rem; max-width: 34rem; opacity: .95; } .hero-split__panel--mark { flex: 1; position: relative; background: var(--surface-brand); overflow: hidden; } .hero-split__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Grayscale/color-blend treatment is a Home-only effect — internal pages (About, Focus Areas, Partners, ...) use .hero-split--compact and show their photo as-is, no filter/overlay. */ .hero-split:not(.hero-split--compact) .hero-split__photo { filter: grayscale(1) contrast(1.1); } .hero-split:not(.hero-split--compact) .hero-split__panel--mark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--c-forest) 10%, var(--c-gold) 110%); mix-blend-mode: color; } .hero-split:not(.hero-split--compact) .hero-split__panel--mark::before { content: ''; position: absolute; inset: 0; /*background: var(--c-forest);*/ opacity: .2; z-index: 1; } /* Compact variant for internal-page heroes (About, Focus Areas) — the plain .hero-split is sized for the Home landing hero (100vh) which is too tall once it's just a page title + a couple of paragraphs. */ .hero-split--compact { min-height: 500px; } .hero-split--compact .hero-split__panel--text { padding: calc(var(--header-height) + 2.5rem) 3rem 2.5rem; } .hero-split--compact .hero-split__panel--text h1 { font-size: clamp(2.2rem, 4vw, 2.8rem); } @media (max-width: 991.98px) { .hero-split { flex-direction: column; min-height: auto; } .hero-split__panel--text { flex: none; padding: calc(var(--header-height) + 2.5rem) 1.5rem 2.5rem; } .hero-split__panel--mark { flex: none; height: 220px; } } .numbered-row { display: flex; align-items: center; gap: 3rem; border-top: 3px solid var(--c-forest); padding: 3.5rem 0; } .numbered-row:last-of-type { border-bottom: 3px solid var(--c-forest); } .numbered-row__index { flex: 0 0 auto; font-family: var(--font-heading); font-weight: 700; font-size: 6rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--c-forest); } .numbered-row:nth-child(2) .numbered-row__index { -webkit-text-stroke-color: var(--c-moss); } .numbered-row:nth-child(3) .numbered-row__index { -webkit-text-stroke-color: var(--c-burnt); } .numbered-row__body h3 { margin-bottom: .5rem; } .numbered-row__body p { max-width: 40rem; margin-bottom: 0; } @media (max-width: 767.98px) { .numbered-row { gap: 1.5rem; padding: 2rem 0; } .numbered-row__index { font-size: 3.2rem; } } .timeline-zigzag { background: var(--surface-brand); } .timeline-zigzag h2, .timeline-zigzag .section-eyebrow { color: var(--c-white); } .timeline-zigzag h2::after { background: var(--c-gold); } /* Body copy sitting directly in a .timeline-zigzag section (not inside a .roadmap-card, which sets its own white) — e.g. the intro paragraph above the cards — needs an explicit light colour on the dark forest background instead of the default (dark-on-light) --text-muted. */ .timeline-zigzag > .container > .row p, .timeline-zigzag .lede { color: rgba(255, 255, 255, 0.85); } .text-white a{color:#fff} .roadmap-stagger { position: relative; margin-top: 1rem; } .roadmap-card { position: relative; padding: 1.75rem 2.25rem; color: var(--c-white); border-radius: 6px 28px 6px 28px; box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18); transition: transform .25s ease, box-shadow .25s ease; } .roadmap-card:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28); } .roadmap-card__icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 63% 37% 54% 46% / 55% 45% 55% 45%; background: rgba(255, 255, 255, 0.18); color: var(--c-white); margin-bottom: 1.25rem; transition: transform .25s ease, background-color .25s ease; } .roadmap-card__icon svg { width: 44px; height: 44px; } .roadmap-card:hover .roadmap-card__icon { transform: scale(1.08); background: rgba(255, 255, 255, 0.3); } .roadmap-card:nth-child(2) { border-radius: 28px 6px 28px 6px; } .roadmap-card:nth-child(2) .roadmap-card__icon { border-radius: 46% 54% 37% 63% / 45% 55% 45% 55%; } .roadmap-card:nth-child(3) .roadmap-card__icon { border-radius: 54% 46% 63% 37% / 63% 37% 63% 37%; } .roadmap-card:nth-child(4) .roadmap-card__icon { border-radius: 37% 63% 46% 54% / 54% 46% 63% 37%; } .roadmap-card__body h3 { color: var(--c-white); margin-bottom: .5rem; } .roadmap-card__body p { opacity: .9; margin-bottom: 0; max-width: 28rem; } .roadmap-card:nth-child(1) { background: var(--c-forest); border: 1px solid rgba(255,255,255,.25); width: 68%; } .roadmap-card:nth-child(2) { background: var(--c-moss-deep); width: 56%; margin-left: auto; margin-top: -2rem; z-index: 1; } .roadmap-card:nth-child(3) { background: var(--c-burnt); width: 80%; margin-top: -2rem; } /* 4th card — only appears in staggers with 4 items (e.g. About > "Shared vision"); the Home roadmap-teaser only ever renders 3 cards, so this rule simply never matches there. Gold background instead of another dark tone, so the last card reads as an accent rather than blending into the three dark cards before it — paired with the same dark-text- on-gold combination already used on .btn-colibri, since white text on gold fails contrast (~1.6:1). */ .roadmap-card:nth-child(4) { background: var(--c-gold); color: var(--c-forest); width: 60%; margin-left: auto; margin-top: -2rem; z-index: 1; } .roadmap-card:nth-child(4) .roadmap-card__body h3 { color: var(--c-forest); } .roadmap-card:nth-child(4) .roadmap-card__icon { } .roadmap-card:nth-child(4):hover .roadmap-card__icon { background: rgba(14, 49, 19, 0.22); } @media (max-width: 767.98px) { .roadmap-card, .roadmap-card:nth-child(2), .roadmap-card:nth-child(3), .roadmap-card:nth-child(4) { width: 100%; margin-left: 0; margin-top: 1rem; padding: 1.5rem; } } /*FOCUS*/ .focus-stagger { position: relative; margin-top: 1rem; } .focus-card { display: block; text-decoration: none; border: 1px solid rgba(255,255,255,.25); /*color: var(--c-white);*/ color: var(--c-forest); /*text-shadow: 0 1px 3px rgba(14, 49, 19, .7), 0 0 14px rgba(14, 49, 19, .4);*/ border-radius: 6px 28px 6px 28px; overflow: hidden; position: relative; box-shadow: 0 0.75rem 1.5rem rgba(14, 49, 19, 0.12); transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease; } .focus-card a{color: var(--c-forest);text-decoration:none} .focus-card:nth-child(1) { background-color: var(--c-gold); } .focus-card:nth-child(2) { border-radius: 28px 6px 28px 6px; border: none; background-color: var(--c-burnt); } .focus-card:nth-child(3) { border: none; background-color: var(--c-moss); } .focus-card:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 3rem rgba(14, 49, 19, 0.22); } .focus-card:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .focus-card__arrow { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); transition: transform .25s ease, background-color .25s ease; } .focus-card__arrow svg { width: 18px; height: 18px; } .focus-card:hover .focus-card__arrow { transform: translateX(4px); background: rgba(255, 255, 255, 0.32); } .focus-card:nth-child(2) .focus-card__arrow { background: var(--c-burnt); border: 1px solid rgba(255, 255, 255, .4); } .focus-card:nth-child(2):hover .focus-card__arrow { background: var(--c-burnt); border-color: rgba(255, 255, 255, .7); } .focus-card__index { display: block; font-family: var(--font-heading); font-weight: 700; line-height: .9; opacity: .5; margin-bottom: .75rem; } .focus-card__body{padding: 2.5rem 3rem;} .focus-card__body h3 { margin-bottom: .5rem; } .focus-card__body p { opacity: .9; margin-bottom: 0; max-width: 28rem; } .focus-card .row { --bs-gutter-x: 0; margin: 0; } .focus-card .row > [class*="col-"] { padding: 0; } .focus-card .row img.img-fluid { display: block; width: 100%; height: 100%; object-fit: cover; } .focus-card:nth-child(1) { width: 68%; } .focus-card:nth-child(1) .focus-card__index { font-size: 7rem; } .focus-card:nth-child(2),.focus-card:nth-child(4) { width: 68%; margin-left: auto; margin-top: -2rem; z-index: 1; } .focus-card:nth-child(2) .focus-card__index, .focus-card:nth-child(3) .focus-card__index { font-size: 5rem; } .focus-card:nth-child(3) { width: 80%; margin-top: -2rem; } .focus-card:nth-child(3) .focus-card__index { font-size: 6rem; } @media (max-width: 767.98px) { /* Below md, the desktop side-by-side image+text row and its offset stagger both lose their reason to exist (no room for a row, no room to shift cards sideways), which previously left three flat, uniform, full-width blocks stacked directly on each other - hence "shopping list". Recreating the desktop cascade's energy at this width instead of just going full-width: cards keep overlapping, alternate their horizontal inset and pick up a slight alternating rotation; each card's image becomes a full-bleed background (same technique as .news-card--feature) with the text in a bottom scrim, rather than a stacked photo-then-solid-colour-block. */ .focus-stagger { padding: .5rem 0 1.5rem; } .focus-card:nth-child(1) { width: 96%; margin: 0 4% 0 0; padding: 0; /* Unlike the other two cards, the first card never had its base 1px border overridden to none - invisible next to a small inset photo, but a visible ring around the edge now that the photo fills the whole card. */ border: none; transform: rotate(-0.8deg); position: relative; z-index: 3; } .focus-card:nth-child(2) { width: 92%; margin: -1.5rem 0 0 8%; padding: 0; transform: rotate(0.9deg); position: relative; z-index: 2; } .focus-card:nth-child(3) { width: 96%; margin: -1.5rem 4% 0 0; padding: 0; transform: rotate(-0.5deg); position: relative; z-index: 1; } .focus-card .row { position: relative; min-height: 420px; margin: 0; } /* The second card has its text column before the image column in source order (desktop puts the photo on the right there) - without an explicit z-index the image, painted later, would sit on top of and hide the text scrim. */ .focus-card .col-md-4 { position: absolute; inset: 0; height: 100%; padding: 0; z-index: 1; } .focus-card .col-md-4 img.img-fluid { width: 100%; height: 100%; object-fit: cover; } .focus-card .col-md-8 { position: absolute; left: 0; right: 0; bottom: 0; /* !important: needed to beat the higher-specificity ".focus-card .row > [class*='col-']{ padding: 0 }" reset above. */ padding: 2rem 1.5rem 2rem !important; z-index: 2; } /* Overrides the inline style="margin-top:2rem" on the third card's body (a desktop-only nudge to line up with its offset image row). */ .focus-card .focus-card__body { padding: 0; margin-top: 0 !important; } .focus-card__body h3 { color: var(--c-white); } .focus-card__body p { color: rgba(255, 255, 255, .85); opacity: 1; max-width: none; } /* Scrim tinted to each card's own "-deep" partner colour (rather than one shared neutral tone) so the cards keep their gold/burnt/moss identity even once they're photo-led instead of solid colour. */ .focus-card:nth-child(1) .col-md-8 { background: linear-gradient(180deg, rgba(79, 47, 39, 0) 0%, rgba(79, 47, 39, .72) 45%, rgba(79, 47, 39, .94) 100%); } .focus-card:nth-child(2) .col-md-8 { background: linear-gradient(180deg, rgba(180, 40, 5, 0) 0%, rgba(180, 40, 5, .72) 45%, rgba(180, 40, 5, .94) 100%); } .focus-card:nth-child(3) .col-md-8 { background: linear-gradient(180deg, rgba(51, 91, 23, 0) 0%, rgba(51, 91, 23, .72) 45%, rgba(51, 91, 23, .94) 100%); } } /**/ .stagger-cards { position: relative; margin-top: 2.5rem; } .stagger-card { position: relative; padding: 2.5rem 3rem; color: var(--c-white); margin-top: -1.5rem; } .stagger-cards > .stagger-card:first-child { margin-top: 0; } .stagger-card__index { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 4.5rem; line-height: .9; opacity: .5; margin-bottom: .75rem; } .stagger-card__body h3 { color: var(--c-white); margin-bottom: .5rem; } .stagger-card__body p { opacity: .9; margin-bottom: 0; max-width: 30rem; } .stagger-card:nth-child(odd) { width: 72%; } .stagger-card:nth-child(even) { width: 60%; margin-left: auto; } .stagger-card:nth-child(4n+1) { background: var(--c-forest); border: 1px solid rgba(255,255,255,.25); } .stagger-card:nth-child(4n+2) { background: var(--c-moss); } .stagger-card:nth-child(4n+3) { background: var(--c-burnt); } .stagger-card:nth-child(4n+4) { background: var(--c-espresso); } @media (max-width: 767.98px) { .stagger-card { width: 100% !important; margin-left: 0 !important; margin-top: 1rem; padding: 2rem; } .stagger-cards > .stagger-card:first-child { margin-top: 0; } .stagger-card__index { font-size: 3rem; } } .glance-row { display: flex; flex-wrap: wrap; gap: 2.5rem; } .glance-stat { flex: 1 1 240px; border-left: 4px solid var(--c-gold); padding-left: 1.25rem; } /* One icon per "Project at a glance" stat (client-requested — flag/euro/ clock/partners), sourced from Lucide (ISC license, lucide.dev) — its stroke-icon style already matches the site's own inline SVGs (btn-arrow, theme toggle). */ .glance-stat__icon { display: block; width: 40px; height: 40px; color: var(--c-gold); margin-bottom: 1rem; } .glance-stat__value { font-family: var(--font-heading); font-weight: 700; font-size: 3.5rem; line-height: 3.5rem; color: var(--text-primary); } #project-glance .glance-stat__value--text { font-size: 2rem; line-height: 2rem; } .glance-stat__value--compact { font-size: 2.85rem; } .glance-stat p { color: var(--text-muted); } .glance-stat__detail { font-size: .85rem; line-height: 1.4; margin-top: .35rem; margin-bottom: 0; opacity: .75; } .photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; aspect-ratio: 4 / 3; width: 100%; background: var(--bg-tinted); border: 1px dashed var(--border-subtle); border-radius: 6px 32px 6px 32px; color: var(--text-muted); text-align: center; padding: 1.5rem; box-sizing: border-box; } .img-fluid{ border-radius: 6px 32px 6px 32px;} .photo-placeholder svg { width: 40px; height: 40px; opacity: .5; } .photo-placeholder span { font-family: var(--font-heading); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; } .photo-placeholder--wide { aspect-ratio: 21 / 7; border-radius: 12px 56px 12px 56px; } /* Consortium partner logo placeholders (see About.html comment) — auto-scrolling marquee, card-style tiles colour-cycled like .vision-card, until the real logo images are provided. */ .partners-marquee { /* Clip only horizontally (hides the looping track's off-screen half) — overflow-y stays visible so the .partner-logo hover shadow/lift isn't cut off at the top/bottom of the strip. */ overflow-x: hidden; overflow-y: visible; padding: .5rem 0 1.25rem; -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); } .partners-track { display: flex; gap: 1.5rem; width: max-content; animation: partners-scroll 40s linear infinite; } .partners-marquee:hover .partners-track, .partners-track.is-modal-open { animation-play-state: paused; } .partners-marquee:has(:focus-visible) .partners-track { animation-play-state: paused; } .partners-set { display: flex; gap: 1.5rem; } @keyframes partners-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } .partners-marquee { overflow-x: auto; } .partners-set[aria-hidden="true"] { display: none; } } .partner-logo { /* Intrinsic width, not a fixed 150px: real logos range from near-square marks to wide lockups, and forcing them all into the same width box was squeezing wide ones down to fit — see .partner-logo__icon below. min/max keep the marquee's rhythm from swinging too far either way. Fixed white background regardless of theme, matching the logo chip inside it — in dark mode a themed (dark) tile around a fixed-white chip left a jarring seam between the two. */ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 110px; max-width: 220px; min-height: 130px; background: #fff; /* Fixed, not var(--border-subtle): that token turns near-white in dark mode, which would vanish against this now-always-white tile. */ border: 1px solid rgba(14, 49, 19, 0.15); border-radius: 6px 24px 6px 24px; transition: transform .25s ease, box-shadow .25s ease; /* The interactive copy of this tile is a