/* * Corpus Phase 2 — HUB page type. 53 pages: one per family, the entry point to that family. * Group 2 (HUB + DIRECTORY + FORECAST), 2026-09-03. Scoped entirely to * `[data-gg-page-type="hub"]` on , so it can never fight the other five page-type * stylesheets or the base `.gg-programmatic-page` theme. * * Contract: docs/handoff/CORPUS-PHASE2-DESIGN-20260903.md §4.4 (composition) and §4.1 * (shared geometry tokens, restated here as literals per that section's own instruction — * Cleo has no linear type scale, so these are not derived from a clamp). * * Reference: Cleo `/news`. Grammar borrowed (grid, radii, motion), colours are ours — * `--gg-ink` / `--gg-accent` / `--gg-blush` / `--gg-paper`, defined in * css/programmatic-editorial-theme.css and never restated here as hex literals. */ [data-gg-page-type="hub"] .gg-corpus-hub { width: min(100% - 64px, 1280px); margin: 48px auto 0; padding: 0 32px; } @media (max-width: 760px) { [data-gg-page-type="hub"] .gg-corpus-hub { width: 100%; padding: 0 20px; } } /* 1. Eyebrow (mono) + visible H1 — the news shape, not the learn shape. */ [data-gg-page-type="hub"] .gg-corpus-hub__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 400 11.9px/1.2 Simplon, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gg-muted); } [data-gg-page-type="hub"] .gg-corpus-hub__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--gg-accent); } [data-gg-page-type="hub"] .gg-corpus-hub h1 { color: var(--gg-ink); } /* 2 + 3. The featured stage — 8-column lead card + a 3-card side rail. */ [data-gg-page-type="hub"] .gg-corpus-hub__stage { display: grid; grid-template-columns: repeat(8, 1fr); gap: 24px; margin-top: 36px; } [data-gg-page-type="hub"] .gg-corpus-hub__lead { grid-column: span 6; position: relative; overflow: hidden; min-height: 452px; border-radius: 40px; color: #fff; background: var(--gg-ink); } [data-gg-page-type="hub"] .gg-corpus-hub__lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } [data-gg-page-type="hub"] .gg-corpus-hub__lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(45, 23, 76, 0.55)); } [data-gg-page-type="hub"] .gg-corpus-hub__lead-copy { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 36px; } [data-gg-page-type="hub"] .gg-corpus-hub__lead-kicker { display: inline-flex; min-height: 30px; align-items: center; padding: 0 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.74); color: var(--gg-ink); font: 400 10px Simplon, monospace; text-transform: uppercase; } [data-gg-page-type="hub"] .gg-corpus-hub__lead-title { max-width: 22ch; margin: 14px 0 0; font: 300 46px/1 PPNeue, Arial, sans-serif; letter-spacing: -0.045em; color: #fff; } [data-gg-page-type="hub"] .gg-corpus-hub__rail { grid-column: span 2; display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; } [data-gg-page-type="hub"] .gg-corpus-hub__rail-card { position: relative; overflow: hidden; min-height: 316px; padding: 30px 40px; border-radius: 28px; background: radial-gradient(circle, rgba(112, 82, 164, 0.55) 1.4px, transparent 1.5px) 8px 8px / 40px 40px, linear-gradient(157deg, #e8e2f2, #dfe6ec 46%, #e9e4dd); color: var(--gg-ink); } [data-gg-page-type="hub"] .gg-corpus-hub__rail-card:empty { background: var(--gg-blush); } [data-gg-page-type="hub"] .gg-corpus-hub__rail-card h3 { font: 350 22px/1.1 PPNeue, Arial, sans-serif; margin: 0; } @media (max-width: 1119px) and (min-width: 761px) { [data-gg-page-type="hub"] .gg-corpus-hub__stage { grid-template-columns: repeat(4, 1fr); } [data-gg-page-type="hub"] .gg-corpus-hub__lead { grid-column: span 4; min-height: 380px; } [data-gg-page-type="hub"] .gg-corpus-hub__rail { grid-column: span 4; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } } @media (max-width: 760px) { [data-gg-page-type="hub"] .gg-corpus-hub__stage { grid-template-columns: repeat(4, 1fr); gap: 14px; } [data-gg-page-type="hub"] .gg-corpus-hub__lead { grid-column: span 4; min-height: 320px; border-radius: 28px; } [data-gg-page-type="hub"] .gg-corpus-hub__lead-copy { left: 22px; right: 22px; bottom: 24px; } [data-gg-page-type="hub"] .gg-corpus-hub__lead-title { font-size: 32px; } [data-gg-page-type="hub"] .gg-corpus-hub__rail { grid-column: span 4; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 10px; } [data-gg-page-type="hub"] .gg-corpus-hub__rail-card { min-height: 150px; padding: 18px; border-radius: 20px; } } /* 4. Index grid — the page's own link list, re-laid, never re-authored. */ [data-gg-page-type="hub"] .gg-corpus-hub__grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 62px 0 20px; padding: 0; list-style: none; } [data-gg-page-type="hub"] .gg-corpus-hub__grid.cleo-block-grid__list { flex-wrap: nowrap; overflow-x: auto; } @media (max-width: 760px) { [data-gg-page-type="hub"] .gg-corpus-hub__grid { scroll-snap-type: x mandatory; flex-wrap: nowrap; overflow-x: auto; } } [data-gg-page-type="hub"] .gg-corpus-hub__grid-item { min-width: calc((100% - 36px) / 4); scroll-snap-align: start; } @media (max-width: 1119px) and (min-width: 761px) { [data-gg-page-type="hub"] .gg-corpus-hub__grid-item { min-width: calc((100% - 24px) / 3); } } @media (max-width: 760px) { [data-gg-page-type="hub"] .gg-corpus-hub__grid-item { min-width: 78vw; } } [data-gg-page-type="hub"] .gg-corpus-hub__grid-item a { display: block; min-height: 96px; padding: 20px 22px; border: 1px solid var(--gg-line); border-radius: 28px; color: var(--gg-ink); background: #fff; /* >= 1.6 body / >= 1.35 heading: the owner rubric measures Indic matras, and Devanagari is set inline on `lang="en"` corpus pages, so the leading has to clear matras for every script. Same call and same rationale as `.gg-corpus-dek` in css/corpus-article.css. */ font: 400 15px/1.6 PPNeue, Arial, sans-serif; transition: transform 0.22s var(--gg-ease), border-color 0.22s var(--gg-ease); } [data-gg-page-type="hub"] .gg-corpus-hub__grid-item a:hover { transform: translateY(-3px); border-color: var(--gg-accent); } @media (prefers-reduced-motion: reduce) { [data-gg-page-type="hub"] .gg-corpus-hub__grid-item a { transition: none; } [data-gg-page-type="hub"] .gg-corpus-hub__grid-item a:hover { transform: none; } }