/* hub.css -- styling for the generated facet hub pages (/agencies, /grants-for, /domains). Loaded after gf.css, editorial-page.css and before gf-bridge.css, so the B1 tokens (--gf-ink...), the .gf-app aurora ground, the shared .btn, .wrap, .footer and .brand all come from there; this file only adds the hub-specific layout. Pure CSS, no JS -- the pages are fully static and CSP-safe (script-src 'self'). No dark/night slabs: the page body is , which paints the green aurora ground from gf.css. We do NOT override it with a flat fill -- the B1 look is glass/white cards over that aurora, never a paper or black slab. */ .hub { padding-top: clamp(40px, 7vh, 80px); } /* Center the hub the way the marketing pages center (landing .final, pricing, docs): the shared .wrap stays full-width and centered, but the hub's own furniture -- breadcrumb, H1, intro, count, and the card grid -- sits in a centered, width-capped column. text-align: center is set once here and inherited by the furniture below; the card interiors reset to left for readability. This keeps the crawlable structure (headings, links, ld+json) identical -- it is a pure presentation change. */ .hub .wrap { max-width: 1080px; margin-inline: auto; text-align: center; } /* Breadcrumb trail above the H1. Also serialized as BreadcrumbList JSON-LD. */ .hub-crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; } .hub-crumbs a { color: var(--ink-2); text-decoration: none; } .hub-crumbs a:hover { color: var(--accent); } .hub h1.disp { font-size: clamp(35px, 5.6vw, 60px); font-weight: 650; line-height: 1.04; letter-spacing: -0.04em; margin: 0 auto 18px; max-width: 20ch; } .hub-intro { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 64ch; margin: 0 auto 14px; } .hub-intro strong { color: var(--ink); font-weight: 600; } .hub-count { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 28px; } /* The open-grant anchor list -- the crawlable internal links that are the whole point of the hub. Responsive card grid; each card is one . */ .hub-list { list-style: none; margin: 0 auto 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; /* Centered as a group: cap the grid width and center the column so it does not stretch the full .wrap edge-to-edge, and center the tracks so a partial final row (or a single card) sits under the centered headers rather than pinning left. Card interiors reset to text-align: left below for readability. */ max-width: 1024px; justify-content: center; text-align: left; } .hub-card { margin: 0; } .hub-card a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px 18px; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; text-decoration: none; color: var(--ink); /* NB: do NOT animate/apply transform on the card. A transform on :hover moves the anchor out from under the cursor (and, on touch, the first tap resolves as :hover), which swallows the first click -- the "two-click" bug. The hover affordance is border + shadow only, so the hit target never moves and every card navigates on the first click. */ transition: border-color 0.15s, box-shadow 0.15s; } .hub-card a:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(10, 92, 66, 0.10); } .hub-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hub-card-title { font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--ink); } .hub-card-agency { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); } /* Hub-index variant (the /agencies, /grants-for, /domains landing lists): the label and the "N open" counter sit on one row. */ .hub-index .hub-card a { flex-direction: row; align-items: baseline; justify-content: space-between; } .hub-index .hub-card-title { font-size: 16px; font-weight: 600; } .hub-more { font-size: 15px; color: var(--ink-2); margin: 0 0 32px; } .hub-more a { color: var(--accent); text-decoration: none; font-weight: 500; } .hub-more a:hover { text-decoration: underline; } /* /match conversion block at the bottom of every hub. B1 frosted sage slab (mirrors .gf-slab-sage in gf.css): translucent white gradient, 1px light border, blur, a crisp sage ring + soft shadow over the aurora ground. Never a dark/night slab -- dark-green ink on glass, with the shared green .btn.solid (recolored by gf-bridge.css) as the CTA. */ .hub-cta { position: relative; margin: 40px auto 0; padding: clamp(28px, 4vw, 44px); border-radius: 26px; max-width: 760px; color: var(--gf-ink); text-align: center; background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.32)); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 0 0 1px rgba(10, 92, 66, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -30px 60px rgba(255, 255, 255, 0.15), 0 34px 90px rgba(10, 92, 66, 0.22); } .hub-cta p { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; color: var(--gf-ink); margin: 0 auto 22px; max-width: 56ch; } .hub-cta .btn.solid { display: inline-flex; } @media (max-width: 560px) { .hub-list { grid-template-columns: 1fr; } }