/* News grid lab — /news/archive/'s working surface for the front page's * news section. * * Two parts: * - CARDS: extracted VERBATIM from HUB_CSS in functions/lib/news-hub.js * (the body token chain and the .nh-card story-card block) so cards * render exactly as on /news/. Keep this block diffable against the * source; the hub's html[data-theme="dark"] token override is not * copied (the site is light-only, a new dark block is unreachable CSS). * - LAYOUT (.nh-lab-*): the experiment — currently Andrii's seven-zone * sketch (2026-08-11): two stacked heroes left, cards 3-4 top-right, * 5-6 bottom-left, and the firehose list down the right rail. This is * the part to iterate on. */ body { --nh-page: var(--navy-light); --nh-card: var(--navy); --nh-track: var(--navy-lighter); --nh-accent: var(--eyebrow, var(--blue, #3E64E0)); /* theme-guardrail-allow: hub accent fallback chain, verbatim from HUB_CSS */ background: var(--nh-page); color: var(--white); font-family: var(--font-sans, 'DM Sans', sans-serif); margin: 0; } /* Page width = the site header's content width (nav.css caps at 1280px). This rule is SHARED with /news/ since MAR-23 — the hub loads this file after its inline CSS, so whatever stands here wins there. It briefly said 1240px, which silently narrowed the hub below its own header (MAR-27). Mirror the hub's wrap exactly, responsive override included. */ .nh-wrap { max-width: calc(1280px + 4rem); margin: 0 auto; padding: 0 2rem; } @media (max-width: 700px) { .nh-wrap { padding: 0 1rem; } } .nh-eyebrow { color: var(--text-faint); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } /* ── Layout: the seven-zone sketch ────────────────────────────────────────── Left column (2fr): hero 1, hero 2, then the 5|6 pair. Right rail (1fr): cards 3, 4, then the firehose. The rail's flex-basis for the firehose is 0, so the rail never sets the row height — the grid row is as tall as the left column, and the firehose stretches to fill what remains of the rail and scrolls internally. Exactly the sketch: zone 7 runs from beside hero 2 down past the 5|6 pair. */ /* Zone heights: 3-6 share one card height; heroes 1-2 are exactly two of them plus the gap, so hero 1's bottom edge lines up with card 4's. */ .nh-lab-layout { --nh-zcard-h: 200px; --nh-hero-h: calc(2 * var(--nh-zcard-h) + 1rem); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; } .nh-lab-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .nh-lab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .nh-lab-tallpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .nh-lab-rail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } /* Every zone card is full-bleed — the image covers the whole card, a bottom-up scrim keeps the text legible on any photo, and the copy sits on top in light type (soft shadow, no outline). Fixed colors throughout this block: the text paints over imagery, not over the page surface, so it must not follow the theme. Cards without an image keep their placeholder background and the same treatment. */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story { position: relative; height: var(--nh-zcard-h); overflow: hidden; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-card-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } /* The scrim hugs the title zone (MAR-39): it used to hold a 72% tint at nearly half the card and only clear at 92%, which read as a darkened photo with a caption rather than a photo with a legible title. Strong at the bottom edge, gone by 55% — the top half of every image is untouched. The meta chips up top carry their own dark pills, so they never needed the scrim. */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.6) 22%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0) 55%); } /* theme-guardrail-allow: scrim over imagery, theme-independent */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-card-body { position: absolute; inset: 0; z-index: 1; padding: .75rem .95rem .85rem; gap: .35rem; justify-content: flex-end; } /* Chips stack in the card's top-right corner — industry on top, geo under it, both right-aligned. Timestamps don't render on cards. No shared-markup changes — the body covers the card and the meta column pins to its top. */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-meta { position: absolute; top: .75rem; right: .95rem; left: auto; flex-direction: column; align-items: flex-end; gap: .4rem; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-time { display: none; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-chip, :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-loc { background: rgba(0, 0, 0, 0.55); /* theme-guardrail-allow: chip fill over imagery, theme-independent */ border: 1px solid rgba(255, 255, 255, 0.28); /* theme-guardrail-allow: chip edge over imagery, theme-independent */ border-radius: 999px; padding: .26rem .6rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-title { color: #FFFFFF; font-size: 1.43rem; line-height: 1.22; /* theme-guardrail-allow: type over imagery, theme-independent */ /* Clamped so the title stays inside the scrim's tinted band — the short scrim (clear at 55%, MAR-39) puts a 4th/5th wrapped line on raw photo. The wide soft glow carries whatever the band doesn't. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 16px rgba(0, 0, 0, 0.5); } /* theme-guardrail-allow: shadow over imagery, theme-independent */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story:hover .nh-title { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } /* theme-guardrail-allow: stays white over the photo; hover reads as underline */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story .nh-meta > * { color: rgba(255, 255, 255, 0.88); /* theme-guardrail-allow: meta over imagery, theme-independent */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /* theme-guardrail-allow: shadow over imagery, theme-independent */ /* Per-zone sizes, AFTER the shared block so they win the cascade (the tall cards once rendered at standard height for losing exactly this fight). Hero: full-bleed at double height, display type. Tall pair: hero height, rail width, headline type between the hero's and the standard cards'. */ :is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card { height: var(--nh-hero-h); min-height: 0; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card .nh-card-body { padding: 1.1rem 1.4rem 1.25rem; gap: .5rem; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card .nh-meta { top: 1.1rem; right: 1.4rem; } :is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card .nh-title { font-size: clamp(2.25rem, 3.9vw, 3.1rem); line-height: 1.1; letter-spacing: -0.015em; } .nh-lab-layout .nh-lab-tallpair > .nh-story, .nh-stories--lab .nh-story.nh-slot-tall { height: var(--nh-hero-h); } :is(.nh-lab-layout .nh-lab-tallpair > .nh-story, .nh-stories--lab .nh-story.nh-slot-tall) .nh-title { font-size: 1.95rem; line-height: 1.15; -webkit-line-clamp: 4; } /* Zone 7 — the firehose. A card-surfaced column that fills the rail's leftover height and scrolls; every row is one headline. */ .nh-lab-fire { flex: 1 1 0; min-height: 16rem; display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: 16px; background: var(--nh-card, var(--navy)); box-shadow: var(--shadow-sm); overflow: hidden; } .nh-fire-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; } .nh-fire-row { border-top: 1px solid var(--border-light); } .nh-fire-row:first-child { border-top: 0; } .nh-fire-row a { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .65rem 1rem .6rem; text-decoration: none; color: inherit; } .nh-fire-title { min-width: 0; } .nh-fire-row a:hover { background: rgba(127, 127, 127, 0.07); } /* theme-guardrail-allow: neutral hover tint, both themes */ .nh-fire-title { font-size: 1.05rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; } .nh-fire-row a:hover .nh-fire-title { color: var(--blue); } .nh-fire-time { font-family: var(--font-mono, ui-monospace, monospace); font-size: .72rem; color: var(--text-faint); white-space: nowrap; } /* Tablet: one column — main stack, then the rail; the firehose gets a fixed window instead of rail-filling (there is no rail height to fill). */ @media (max-width: 1020px) { .nh-lab-layout { grid-template-columns: 1fr; } .nh-lab-fire { flex: 0 0 auto; max-height: 30rem; } } /* Phones: the double height is a desktop relationship — full-width cards shrink toward the standard height so they don't hog the scroll. */ @media (max-width: 860px) { :is(.nh-lab-layout, .nh-stories--lab) .nh-story.nh-hero-card { height: calc(1.5 * var(--nh-zcard-h)); } } @media (max-width: 560px) { .nh-lab-pair, .nh-lab-tallpair { grid-template-columns: 1fr; } .nh-lab-layout .nh-lab-tallpair > .nh-story, .nh-stories--lab .nh-story.nh-slot-tall { height: calc(1.4 * var(--nh-zcard-h)); } } .nh-card { background: var(--nh-card, var(--navy)); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: var(--white); display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; } .nh-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* X-promoted story cards are
s (the via-X credit is a real link, and nested s get split by the parser) — the title link stretches over the card and the credit sits above the overlay. */ .nh-story { position: relative; cursor: pointer; } .nh-story .nh-story-link { color: inherit; text-decoration: none; } .nh-story .nh-story-link::after { content: ""; position: absolute; inset: 0; } .nh-x-story .nh-x-via { position: relative; z-index: 1; } .nh-card-img { width: 100%; aspect-ratio: 3 / 1.55; object-fit: cover; background: var(--navy-lighter); display: block; } /* The lead story reads like a front page: words first, image beside them. Order in the markup stays image-first, so the stacked mobile layout is untouched — desktop just flips direction. */ .nh-hero-card { flex-direction: row-reverse; align-items: stretch; } .nh-hero-card .nh-card-img { width: 46%; aspect-ratio: auto; min-height: var(--nh-hero-h); } .nh-hero-card .nh-card-body { flex: 1; padding: 1.7rem 1.8rem; justify-content: center; gap: .7rem; } @media (max-width: 860px) { .nh-hero-card { flex-direction: column; } .nh-hero-card .nh-card-img { width: 100%; aspect-ratio: 3 / 1.6; min-height: 0; } .nh-hero-card .nh-card-body { padding: 1.1rem 1.15rem 1.2rem; } } .nh-card-body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .nh-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } /* Category labels are quiet type, not coloured pills. At ~30 cards a page the old bordered blue/teal chips were the loudest thing on screen and said the least — the headline already tells you it is a raise. */ .nh-chip { font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); } .nh-chip--fundraise, .nh-chip--acquisition, .nh-chip--launch, .nh-chip--news { color: var(--text-faint); } .nh-time { font-family: var(--font-mono, ui-monospace, monospace); font-size: .68rem; color: var(--text-faint); } .nh-src { font-size: .68rem; color: var(--text-faint); } /* The attribution link out to the original post. It had NO style of its own — the only rule naming .nh-x-via gave it a stacking context — so it fell all the way through to the browser's defaults: 16px, link-blue, (theme-guardrail-allow: prose) underlined, next to siblings set at .68rem. Blue is right here (it is the one thing in the row you can click), it just has to be the page's blue at the row's size. */ .nh-x-via { font-size: .68rem; font-weight: 700; color: var(--nh-accent); text-decoration: none; white-space: nowrap; } .nh-x-via:hover { text-decoration: underline; } .nh-loc { display: inline-flex; align-items: center; gap: .22rem; font-size: .7rem; font-weight: 600; color: var(--text-lighter); white-space: nowrap; } .nh-loc svg { flex-shrink: 0; opacity: .8; } .nh-hero-card .nh-title { font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.14; letter-spacing: -0.015em; } .nh-title { font-family: var(--font-display, 'Source Sans 3', sans-serif); font-weight: 700; font-size: 1.05rem; line-height: 1.28; letter-spacing: -0.01em; margin: 3px; transition: color .14s ease; } .nh-card:hover .nh-title { color: var(--blue); } /* The hub's lead card fills its empty half with the story's opening line (.nh-dek in HUB_CSS). renderStoryCard ships the paragraph on every card, so this grid gets it too — and here there is nowhere to put it: the zones are fixed-height overlay cards and the lead already carries a 3.1rem headline. Hidden, not removed: the markup has one renderer, and this file is where the lab disagrees with it. */ .nh-dek { display: none; } /* ── Hub arrangement (MAR-23): the sketch's slots 1,2,3,6,7 on /news/ ─────── The lab graduates: the front page's story block is the main column of the seven-zone sketch — hero, tall pair, standard pair — as a FLAT grid, not the lab's nested containers, because the hub's filter script re-appends matching cards into one container and reads position from DOM order (the picker assigns .nh-slot-tall to visible cards 2 and 3). Slots 4, 5 and the firehose stay on /news/archive; the hub has its own rail. */ .nh-stories--lab { --nh-zcard-h: 200px; --nh-hero-h: calc(2 * var(--nh-zcard-h) + 1rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .nh-stories--lab .nh-story { height: var(--nh-zcard-h); } .nh-stories--lab .nh-story.nh-hero-card { grid-column: 1 / -1; height: var(--nh-hero-h); } .nh-stories--lab .nh-nomatch, .nh-stories--lab .nh-fill-note { grid-column: 1 / -1; } /* The fold's "Also" rows and the hero's "More" list have nowhere to sit on a fixed-height overlay card (same reasoning as .nh-dek above) — the fold still dedupes companies; only the rider rows don't render here. */ .nh-stories--lab .nh-also, .nh-stories--lab .nh-more { display: none; } /* Tablet and down: one column, matching the lab's collapse. */ @media (max-width: 1020px) { .nh-stories--lab { grid-template-columns: 1fr; } } @media (max-width: 860px) { .nh-stories--lab .nh-story.nh-hero-card { height: calc(1.5 * var(--nh-zcard-h)); } } @media (max-width: 560px) { /* nowrap + overflow:hidden clips the label head-first when it outgrows the tile — step the type down instead of slicing it. */ .nh-stories--lab .nh-archive-tile { font-size: 1.25rem; } } /* The archive tile (MAR-25, pictured in MAR-39): the grid's last cell is a door, not a story — its own photo with the cards' scrim INVERTED (lightens to the base, ink label bottom-right). Not under :is(...) .nh-story on purpose, so the filter script skips it and the card scrim never applies. */ .nh-stories--lab .nh-archive-tile { height: var(--nh-zcard-h); border: 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; /* border: 0 — .nh-card's 1px border is invisible on the story photos but reads as a stray hairline against this tile's frosted base. */ text-align: right; white-space: nowrap; gap: .5rem; padding: 1rem 1.2rem; text-decoration: none; color: var(--white); font-family: var(--font-display, 'Source Sans 3', sans-serif); font-weight: 700; font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.01em; /* The story cards' scrim, inverted: the photo darkens down; this door lightens down — a frosted band at the base with ink type on it, so the tile reads as an exit rather than one more story. Fully opaque at the base (a translucent stop let the night photo bleed through as a dark line along the bottom edge) and raised so the label sits on solid ground. flex-direction: row is load-bearing — .nh-card's base rule is column, which stacked the label and the arrow on two lines. */ background-image: linear-gradient(to top, #FFFFFF, #FFFFFF 12%, rgba(255, 255, 255, 0.9) 34%, rgba(255, 255, 255, 0.4) 58%, rgba(255, 255, 255, 0) 78%), url(/images/news-archive-tile.jpg?v=1); /* theme-guardrail-allow: scrim over imagery, theme-independent */ background-size: cover; background-position: center; } .nh-stories--lab .nh-archive-tile:hover { color: var(--blue); } .nh-archive-arrow { transition: transform .16s ease; } .nh-stories--lab .nh-archive-tile:hover .nh-archive-arrow { transform: translateX(3px); } /* ── The hub's filter bar (MAR-38) ────────────────────────────────────────── Extracted VERBATIM from HUB_CSS in functions/lib/news-hub.js (the .nh-filters block) so the archive's bar renders exactly as on /news/ — same rule as the CARDS block at the top of this file: keep it diffable against the source. The hub still carries its own inline copy and loads this file after it, so identical values make the duplication inert. */ .nh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: 1.4rem 0 1.5rem; } .nh-filters [hidden] { display: none !important; } /* The right padding clears the chevron, which is drawn 16px to 6px from the edge — 2rem reserved twice what it needs, and the bar has no width to spare (see .nh-filters). */ .nh-filter-select { appearance: none; -webkit-appearance: none; box-sizing: border-box; font: 600 .82rem var(--font-sans, sans-serif); color: var(--white); background-color: var(--nh-card); border: 1px solid var(--border-light); border-radius: 999px; padding: .5rem 1.45rem .5rem .9rem; cursor: pointer; box-shadow: var(--shadow-sm); background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; } .nh-filter-select:hover, .nh-filter-select:focus-visible { border-color: var(--border-mid); outline: none; } /* The archive chip: the filter-select recipe minus the chevron — it is a link out, not a control. */ .nh-archive-chip { box-sizing: border-box; font: 600 .82rem var(--font-sans, sans-serif); color: var(--white); background: var(--nh-card); border: 1px solid var(--border-light); border-radius: 999px; padding: .5rem .95rem; box-shadow: var(--shadow-sm); text-decoration: none; white-space: nowrap; } .nh-archive-chip:hover, .nh-archive-chip:focus-visible { border-color: var(--border-mid); outline: none; color: var(--blue); } /* Segmented controls: a soft track with a raised card-toned pill for the active choice. Reads as a familiar switch rather than a row of solid blue buttons competing with the content. (Comment reworded vs the HUB_CSS source only to satisfy the guardrail's literal-colour scan.) */ .nh-btngroup { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--nh-track); border: 1px solid var(--border-light); } /* Ten lenses, and the group is the widest thing in the bar: at .85rem it spent 272px of padding on 407px of text and left no room for the deal-size select. */ .nh-stagebtn, .nh-tab { box-sizing: border-box; font: 600 .79rem var(--font-sans, sans-serif); color: var(--text-light); background: none; border: 0; padding: .42rem .7rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; } .nh-stagebtn:hover, .nh-tab:hover { color: var(--white); } .nh-stagebtn.is-on, .nh-tab.is-on { background: var(--nh-card); color: var(--white); font-weight: 700; box-shadow: var(--shadow-sm); } .nh-stagebtn:focus-visible, .nh-tab:focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 1px; } /* A filter that is narrowing the feed reads blue, so the bar itself says the page is not in its default Global / All state. Tint over ring: the tabs have no border to recolour, and an added border would move them, so the ring is an inset shadow. The flat declaration is the fallback where color-mix is unavailable. On the dropdowns the same recipe lands on the pill; three-class selectors so the active state outweighs :hover and [open]. Cleared filters drop the class and everything returns to the plain recipe above. */ .nh-stagebtn.is-on:not([data-lens="all"]) { color: var(--nh-accent); background: var(--nh-card); background: color-mix(in srgb, var(--nh-accent) 12%, var(--nh-card)); /* theme-guardrail-allow: tints two tokens, no literal colour */ box-shadow: inset 0 0 0 1px var(--nh-accent); } .nh-ms.is-filtering > .nh-filter-select, .nh-amt-select.is-filtering { color: var(--nh-accent); border-color: var(--nh-accent); font-weight: 700; background-color: var(--nh-card); background-color: color-mix(in srgb, var(--nh-accent) 10%, var(--nh-card)); } /* theme-guardrail-allow: tints two tokens, no literal colour */ /* NB: /news carries a reduced local palette — --eyebrow, --text-faint, --border-mid and the shadow tokens are NOT defined on this page. Build only from --blue, the --navy family, --white, --text-light, --border-light and the --nh- page locals, or a background silently resolves to transparent. Region and sector take several values at once. Styled as the