/* Rebuild chrome — loaded by layouts/public.njk as /css/module-page.css; also by ds/layout.njk (Sprint 3.5) */ /* * module-page.css — DS module landing page layout primitives * * Used on: /startups (Sprint 3), and subsequent module landing pages. * Accent passthrough: pages set --m-accent + --m-accent-soft on .module-page wrapper * for per-module color theming (founders = --c-founder / --c-founder-soft). * Sprint 3 sanctioned block: .listing-row (~45 lines) marked below. */ /* ── S6: Per-module accent tokens — set on ───────── */ [data-module="jobs"] { --m-accent: var(--c-job); --m-accent-soft: var(--c-job-soft); } [data-module="investors"] { --m-accent: var(--c-invest); --m-accent-soft: var(--c-invest-soft); } [data-module="earn"] { --m-accent: var(--c-agent); --m-accent-soft: var(--c-agent-soft); } /* ── /S6 ── */ /* ─── Avatar — initials placeholder used in founder-card ─────────────────── */ .avatar { width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-sm2); font-weight: var(--weight-bold); color: #fff; user-select: none; } /* ─── m-hero — full-width module masthead ────────────────────────────────── */ .m-hero { background: var(--p-bg-deep); border-bottom: 1px solid var(--p-line); padding: var(--space-12) 0 var(--space-10); } .m-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); } .m-hero__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .8px; text-transform: uppercase; color: var(--m-accent, var(--c-founder)); margin-bottom: var(--space-2); } .m-hero__title { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-bold); color: var(--p-ink); margin: 0 0 var(--space-4); line-height: 1.1; } .m-hero__desc { font-size: var(--text-md); color: var(--p-ink-2); max-width: 600px; margin: 0 0 var(--space-6); line-height: 1.6; } .m-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .m-hero__chip { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--p-bg-alt); border: 1px solid var(--p-line); color: var(--p-ink-2); text-decoration: none; transition: background var(--transition), border-color var(--transition), color var(--transition); } .m-hero__chip:hover, .m-hero__chip--active { background: var(--m-accent-soft, var(--c-founder-soft)); border-color: var(--m-accent, var(--c-founder)); color: var(--m-accent, var(--c-founder)); text-decoration: none; } /* ─── feat-strip — recently active / featured horizontal grid ──────────── */ .feat-strip { /* display:block resets the design sheet's `.feat-strip { display:grid; 1.4fr 1fr 1fr }` leak, which was shredding the archive listing layouts (business-franchise / services-list / saas / vendors). 2026-07-10 */ display: block; max-width: 1200px; margin: 0 auto; padding: var(--space-10) var(--space-6) 0; } .feat-strip__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .feat-strip__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--p-ink); margin: 0; } .feat-strip__more { font-size: var(--text-sm); color: var(--m-accent, var(--c-founder)); text-decoration: none; } .feat-strip__more:hover { text-decoration: underline; } .feat-strip__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); } /* ─── m-split — two-column module content layout ─────────────────────────── */ .m-split { max-width: 1200px; margin: var(--space-10) auto 0; padding: 0 var(--space-6); display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start; } .m-split__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .m-split__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--p-ink); margin: 0; } .m-split__more { font-size: var(--text-sm); color: var(--m-accent, var(--c-founder)); text-decoration: none; } .m-split__more:hover { text-decoration: underline; } .m-split__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } /* ─── m-aside — module sidebar panel ──────────────────────────────────────── */ .m-aside { background: var(--p-bg-alt); border: 1px solid var(--p-line); border-radius: var(--radius-md); padding: var(--space-5); } .m-aside__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--p-ink); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--p-line-soft); } .m-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .m-aside__item { display: flex; flex-direction: column; gap: 2px; } .m-aside__name { font-size: var(--text-sm2); font-weight: var(--weight-medium); color: var(--p-ink); text-decoration: none; } .m-aside__name:hover { color: var(--m-accent, var(--c-founder)); text-decoration: none; } .m-aside__sub { font-size: var(--text-sm); color: var(--p-ink-3); } /* ─── cta-band — module CTA band ───────────────────────────────────────────── */ /* 2026-07-10: aligned to the design band (REDESIGN_BRIEF §3.1): cocoa rounded container, cream text, real side padding, and bottom margin so the band never melts into the cocoa footer. Centering lives on __inner only, so design-markup bands (h3 + p left, buttons right) keep their grid layout. */ .cta-band { max-width: 1264px; width: calc(100% - 48px); margin: var(--space-10) auto; padding: 36px 40px; background: var(--cocoa, #2a1a0a); border-radius: 18px; } /* Inside .container (ds landings) the section rhythm owns the spacing — double margins were leaving an oversized gap before the footer. */ .container .cta-band { width: 100%; max-width: none; margin: 0; } .cta-band__inner { max-width: 600px; margin: 0 auto; padding: 0 var(--space-6); text-align: center; } .cta-band__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: #fff8e7; margin: 0 0 var(--space-4); } .cta-band__desc { font-size: var(--text-md); color: #b8a98e; margin: 0 0 var(--space-8); line-height: 1.6; } .cta-band__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* ─── related-strip — 3-item related entity strip (detail pages) ───────────── */ .related-strip { max-width: 1200px; margin: var(--space-10) auto var(--space-12); padding: 0 var(--space-6); } .related-strip__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--p-ink); margin: 0 0 var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--p-line-soft); } .related-strip__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } /* ─── Sprint 3 sanctioned block — listing-row (submodule.njk) ─────────────── */ /* ── S3-CSS: listing-row — row-style card for submodule filtered listings ── */ .listing-row { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--p-bg-alt); border: 1px solid var(--p-line); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: box-shadow var(--transition); } .listing-row:hover { box-shadow: var(--p-shadow-card); text-decoration: none; } .listing-row__thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--p-bg-deep); display: flex; align-items: center; justify-content: center; } .listing-row__thumb img { width: 100%; height: 100%; object-fit: cover; } .listing-row__avatar { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--p-ink-3); } .listing-row__body { flex: 1; min-width: 0; } .listing-row__name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--p-ink); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .listing-row__sub { font-size: var(--text-sm); color: var(--p-ink-3); margin: 0 0 var(--space-2); } .listing-row__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); } .listing-row__tag { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--p-bg-deep); color: var(--p-ink-3); } /* ── /S3-CSS ── */ /* ── S4-fix-CSS: archive filter layout + empty-state ── */ .archive-filter { width: 100%; } .filter-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; } .filter-row .form-control { flex: 1 1 160px; min-width: 100px; } .filter-row select.form-control { flex: 1 1 180px; } .empty-state { text-align: center; padding: var(--space-16) 0; } .empty-state p { color: var(--p-ink-3); margin-bottom: var(--space-6); } @media (max-width: 640px) { .filter-row { flex-direction: column; } .filter-row .form-control, .filter-row select.form-control { width: 100%; flex: none; } } /* ── /S4-fix-CSS ── */ /* ─── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 980px) { .m-split { grid-template-columns: 1fr; } .m-hero__title { font-size: var(--text-4xl); } } @media (max-width: 768px) { .feat-strip, .m-split, .related-strip { padding-left: var(--space-4); padding-right: var(--space-4); } .m-hero { padding: var(--space-8) 0; } .m-hero__inner { padding: 0 var(--space-4); } .m-hero__title { font-size: var(--text-3xl); } .cta-band__title { font-size: var(--text-2xl); } .cta-band__inner { padding: 0 var(--space-4); } }