/* Bearings — shared layout rules (design tokens + look: DreamLab system below).
Layout pattern follows the programme-finder convention (accordion
filters, labelled cards with a "Who's it for?" block) but the identity
is Bearings' own. Plain CSS file (never a Python string: no escaping
layer). */
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.55 var(--body); color:var(--ink);
background:var(--page); }
a { color:var(--accent); text-underline-offset:.15em; }
a:hover { color:var(--accent-hover); }
h1,h2,h3,h4 { font-family:var(--display); letter-spacing:-.015em;
line-height:1.12; margin:0; color:var(--ink); }
::selection { background:var(--sun); color:var(--ink); }
button, input, select, textarea { font:inherit; color:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, label:focus-within {
outline:3px solid var(--hot); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-999px; top:0; background:var(--brand);
color:#fff; padding:.6rem 1rem; z-index:90; border-radius:0 0 10px 0; }
.skip:focus { left:0; }
.wrap { max-width:76rem; margin:0 auto; padding:0 1.25rem; }
/* ---------- top bar ---------- */
.topbar { background:var(--paper); border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:40; }
.topbar .wrap { display:flex; align-items:center; gap:1rem 2rem;
min-height:4.4rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none;
color:var(--ink); }
.brand svg { width:34px; height:34px; flex:none; }
.brand b { font:800 1.35rem/1 var(--display); letter-spacing:-.03em; }
.brand small { display:block; font:500 .68rem/1.2 var(--body); color:var(--hint);
letter-spacing:.02em; margin-top:.15rem; }
.topbar nav { display:flex; gap:.2rem 1.3rem; flex-wrap:wrap; align-items:center;
margin-left:auto; }
.topbar nav a { color:var(--ink2); text-decoration:none; font-weight:600;
font-size:.93rem; padding:.35rem 0; border-bottom:2px solid transparent; }
.topbar nav a:hover { color:var(--hot); }
.topbar nav a.here { color:var(--hot); border-bottom-color:var(--hot); }
.topbar nav a.cta-nav { background:var(--brand); color:#fff; border-radius:999px;
padding:.5rem 1.05rem; border:0; }
.topbar nav a.cta-nav:hover { background:var(--brand2); color:#fff; }
@media (max-width:82rem) { }
@media (max-width:52rem) {
.hero .wrap { padding-top:2rem; padding-bottom:2rem; }
.topbar { position:static; }
.topbar nav { margin-left:0; gap:.2rem 1rem; padding-bottom:.7rem; }
}
/* ---------- hero + bands ---------- */
.hero { background:var(--paper); border-bottom:1px solid var(--line);
position:relative; overflow:hidden; }
.hero .wrap { padding-top:3rem; padding-bottom:2.6rem; position:relative; }
.hero::before { content:""; position:absolute; left:0; top:2.2rem; bottom:2.2rem;
width:26px; background:repeating-linear-gradient(-45deg, var(--green) 0 7px,
transparent 7px 14px); }
.kicker { font:700 .74rem/1.2 var(--body); text-transform:uppercase;
letter-spacing:.14em; color:var(--hot); margin:0 0 .8rem; }
.hero h1 { font-size:clamp(2.1rem, 5vw, 3.6rem); font-weight:800;
max-width:22ch; }
.hero .lede { font-size:1.12rem; color:var(--muted); max-width:44rem;
margin:1rem 0 0; }
.stats { display:flex; gap:.8rem 2.4rem; flex-wrap:wrap; margin-top:1.8rem; }
.stats div { border-left:3px solid var(--green); padding-left:.8rem; }
.stats b { display:block; font:800 1.65rem/1.1 var(--display); color:var(--brand); }
.stats span { font-size:.8rem; color:var(--hint); }
.band { background:var(--band); }
.band.mint { background:var(--band2); }
.band .wrap { padding-top:2.2rem; padding-bottom:2.2rem; }
.band h2 { font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:800; }
.band p { color:var(--ink2); max-width:48rem; }
/* ---------- buttons, chips, forms ---------- */
.btn { display:inline-flex; align-items:center; gap:.45rem; border:0;
cursor:pointer; background:var(--accent); color:#fff; font-weight:700;
padding:.72rem 1.3rem; border-radius:999px; text-decoration:none;
font-size:.95rem; transition:background .15s, transform .12s; }
.btn:hover { background:var(--accent-hover); color:#fff; transform:translateY(-1px); }
.btn.dark { background:var(--brand); }
.btn.dark:hover { background:var(--brand2); }
.btn.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--line2); }
.btn.ghost:hover { border-color:var(--ink); color:var(--ink); }
.btn.small { padding:.45rem .9rem; font-size:.85rem; }
.linkbtn { background:none; border:0; padding:0; cursor:pointer;
color:var(--accent); font-weight:600; text-decoration:underline;
text-underline-offset:.15em; font-size:inherit; }
.chip { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
border:1.5px solid var(--line2); background:var(--paper); color:var(--ink2);
border-radius:999px; padding:.34rem .8rem; font-size:.86rem; font-weight:500;
transition:border-color .15s, background .15s; text-align:left; }
.chip:hover { border-color:var(--brand); }
.chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.chip .n { font-size:.72rem; color:var(--hint); font-variant-numeric:tabular-nums; }
.chip.on .n { color:#c7d3ff; }
.field { display:block; margin:0 0 1rem; }
.field > span { display:block; font-weight:700; font-size:.9rem; margin-bottom:.35rem; }
.field input[type=email], .field input[type=text], .field select {
width:100%; padding:.7rem .85rem; border:1.5px solid var(--line2);
border-radius:10px; background:var(--paper); }
.field input:focus, .field select:focus { border-color:var(--brand); outline:none;
box-shadow:0 0 0 3px rgba(7,55,187,.18); }
.checks { display:flex; flex-wrap:wrap; gap:.4rem; }
.checks label { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
border:1.5px solid var(--line2); background:var(--paper); border-radius:999px;
padding:.32rem .8rem .32rem .55rem; font-size:.86rem; }
.checks label:has(input:checked) { border-color:var(--brand); background:var(--band2); }
.checks input { accent-color:var(--brand); margin:0; flex:none; }
/* Filter chips and tick-box pills whose label wraps onto two or three lines
(long subsector names in a narrow filter column): a full pill radius curves
in on the text, so it looks jammed against the left edge (Pete 2026-10-04).
1.25rem is still a full pill for any single-line chip (up to 40px tall),
but a wrapped label gets a rounded box with room at both sides. */
.chipcol .chip, .checks label { border-radius:1.25rem; text-align:left; line-height:1.35; }
.chipcol .chip { padding:.45rem .9rem; }
.checks label { padding:.45rem .9rem .45rem .75rem; }
.chipcol .chip .n { flex:none; }
@media (max-width:60rem) { .checks label { min-height:2.5rem; } }
/* ---------- opportunity cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr));
gap:1.1rem; }
.opp { background:var(--paper); border:1px solid var(--line);
border-radius:var(--radius); padding:1.15rem 1.2rem 1rem; display:flex;
flex-direction:column; gap:.55rem; box-shadow:var(--shadow);
transition:transform .15s, box-shadow .15s, border-color .15s; position:relative; }
.opp:hover { transform:translateY(-2px); border-color:var(--brand);
box-shadow:0 14px 30px -18px rgba(7,55,187,.45); }
.opp .top { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.kind { font:700 .72rem/1 var(--body); text-transform:uppercase; letter-spacing:.1em;
color:var(--accent); }
.tag { font:600 .7rem/1 var(--body); border-radius:999px; padding:.28rem .55rem;
background:var(--band); color:var(--ink2); white-space:nowrap; }
.tag.local { background:var(--local-soft); color:var(--local); }
.tag.regional { background:#e7f5f4; color:#0f6e78; }
.tag.global { background:transparent; border:1px dashed var(--line2); color:var(--muted); }
.tag.new { background:var(--hot); color:#fff; }
.tag.open { background:var(--ok-soft); color:var(--ok); }
.tag.acad { background:#eef1f5; color:#3f4a5a; }
.opp h3 { font-size:1.18rem; font-weight:700; line-height:1.22; }
.opp h3 a { color:var(--ink); text-decoration:none; }
.opp h3 a:hover { color:var(--accent); text-decoration:underline; }
.opp .with { font-size:.84rem; color:var(--hint); margin:-.3rem 0 0; }
.opp .sum { font-size:.9rem; color:var(--muted); margin:0; display:-webkit-box;
-webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.who { background:var(--band2); border-radius:10px; padding:.6rem .75rem;
font-size:.86rem; color:var(--ink2); }
.who b { display:block; font-family:var(--display); font-size:.9rem; color:var(--brand);
margin-bottom:.15rem; }
.who ul { margin:.25rem 0 0; padding:0; list-style:none; }
.who li { padding-left:.9rem; position:relative; }
.who li::before { content:"–"; position:absolute; left:0; color:var(--brand); }
.who .unk { color:var(--hint); font-style:italic; }
.facts { display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:.86rem;
margin-top:auto; padding-top:.4rem; border-top:1px solid var(--line); }
.facts .val { font-weight:700; color:var(--ink); }
.facts .dl { color:var(--ink2); }
.facts .dl.soon { color:var(--soon); font-weight:700; }
.opp .foot { display:flex; align-items:center; gap:.5rem; }
.go { margin-right:auto; font-weight:700; text-decoration:none; color:var(--accent);
font-size:.92rem; display:inline-flex; gap:.35rem; align-items:center; }
.go:hover { text-decoration:underline; }
.go .arr { transition:transform .15s; }
.go:hover .arr { transform:translateX(3px); }
.icon { background:none; border:0; cursor:pointer; color:var(--hint);
font-size:1.05rem; padding:.2rem .3rem; border-radius:6px; line-height:1; }
.icon:hover { color:var(--accent); }
.icon.on { color:#d49a00; }
.fitline { font-size:.8rem; color:var(--ok); font-weight:600; }
/* feature cards: solid harbour green, sun-yellow titles */
.feature { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.feature .kind { color:var(--brand-ink); opacity:.85; }
.feature h3 a { color:var(--sun); font-size:1.3rem; }
.feature h3 a:hover { color:#fff; }
.feature .sum, .feature .with { color:#dfe6fb; }
.feature .who { background:rgba(255,255,255,.08); color:var(--brand-ink); }
.feature .who b, .feature .who li::before { color:var(--sun); }
.feature .facts { border-top-color:rgba(255,255,255,.15); }
.feature .facts .val, .feature .facts .dl { color:#fff; }
.feature .facts .dl.soon { color:var(--sun); }
.feature .go { color:#fff; }
.feature .tag { background:rgba(255,255,255,.12); color:#fff; }
.feature .tag.new { background:var(--hot); color:#fff; }
.feature .icon { color:#b9c7f2; }
.feature .fitline { color:#ffd3de; }
/* ---------- footer ---------- */
.sitefoot { background:var(--brand); color:#dfe6fb; margin-top:4rem; font-size:.9rem; }
.sitefoot .wrap { padding-top:2.6rem; padding-bottom:2.2rem; display:grid;
grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:1.6rem; }
.sitefoot h4 { color:#fff; font-size:1rem; margin-bottom:.6rem; }
.sitefoot a { color:#fff; text-decoration:none; display:block; padding:.15rem 0; }
.sitefoot a:hover { color:var(--sun); }
.sitefoot p { margin:.3rem 0; line-height:1.55; }
.sitefoot .fine { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.15);
padding-top:1rem; font-size:.8rem; color:#b9c7f2; }
/* ---------- report pages (coverage, dashboard, list, about) ---------- */
main.report { max-width:76rem; margin:0 auto; padding:2rem 1.25rem 1rem; }
main.report h2 { font-size:1.4rem; margin:2.2rem 0 .8rem; }
main.report section p, main.report section li { color:var(--ink2); max-width:48rem; }
table { border-collapse:collapse; width:100%; font-size:.88rem; background:var(--paper); }
th, td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line);
vertical-align:top; }
th { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hint);
background:var(--band); }
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
background:var(--paper); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr));
gap:.8rem; margin:1.2rem 0; }
.tile { background:var(--paper); border:1px solid var(--line); border-radius:12px;
padding:.9rem 1rem; }
.tile b { display:block; font:800 1.5rem/1.1 var(--display); color:var(--brand);
overflow-wrap:anywhere; }
.tile span { font-size:.78rem; color:var(--hint); }
.tile b.ok, .ok { color:var(--ok); } .tile b.warn, .warn { color:var(--warn); }
.tile b.bad, .bad { color:var(--bad); }
.badge { font-size:.72rem; padding:.18rem .45rem; border:1px solid; border-radius:6px; }
.note { font-size:.88rem; color:var(--muted); }
.cols { columns:2; max-width:36rem; line-height:1.7; padding-left:1.2rem; }
.meta { display:flex; flex-wrap:wrap; gap:.35rem .5rem; }
.meta span { font-size:.76rem; font-weight:600; border-radius:999px; padding:.25rem .6rem;
background:var(--band); color:var(--ink2); }
.meta .scope-local { background:var(--local-soft); color:var(--local); }
.meta .scope-global { background:transparent; border:1px dashed var(--line2); }
.meta .deadline-soon { background:var(--soon-soft); color:var(--soon); }
main.report .opp { margin-bottom:.8rem; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition:none !important; animation:none !important; }
}
@media (forced-colors: active) {
.opp, .chip, .btn, .tag { border:1px solid CanvasText; }
}
/* ==========================================================================
Bearings design system: DreamLab pink/purple on white
--------------------------------------------------------------------------
Brand source: dreamlab.org.uk/css/style.css (fetched 2026-09-26)
--pink #3b82f6 logo fill, headline accent, primary buttons
--purple #1d4ed8 links, form focus, kicker labels, timeline dots
--cyan #00ffff logo chromatic offset, hero orb (dark site only)
--green #7ed957 small accent
--bg #05050e their page background (dark). We invert to white.
Rules for use on white:
#3b82f6 is 3.40:1 on white, so use it only for fills, gradients, focus
rings, large display text (24px+) and decoration, never small text.
Small pink text uses --accent #0369a1 (5.99:1).
Class names match bearings/templates/site.css, so blocks can be dropped
into that file.
Fonts (one tag):
========================================================================== */
:root {
/* ---- surfaces ---- */
--page:#ffffff; /* page background: white */
--paper:#ffffff; /* cards */
--paper2:#f8fbff; /* faint lavender wash for alternating sections */
--line:#e6ebf3; /* hairlines, card borders */
--line2:#cfd8e6; /* input and chip borders (decorative, not text) */
/* ---- ink (all AA on white) ---- */
--ink:#0f172a; /* 18.41:1 headings, body copy */
--ink2:#334155; /* 10.92:1 secondary copy */
--muted:#52607a; /* 6.74:1 summaries, ledes */
--hint:#5f6b80; /* 5.65:1 meta, counts, captions (lightest allowed text) */
/* ---- brand ---- */
--brand:#1d4ed8; /* 8.66:1 DreamLab purple: primary, links, active chips */
--brand2:#1e40af; /* 11.04:1 hover/pressed purple */
--brand-deep:#1e3a8a; /* 12.16:1 gradient end, dark UI */
--brand-ink:#ffffff; /* text on purple: 8.66:1 */
--pink:#3b82f6; /* 3.40:1 DreamLab pink. Fills and decoration only */
--accent:#0369a1; /* 5.99:1 pink safe for text: kind labels, links in copy */
--accent-hover:#075985; /* 8.30:1 */
--hot:#3b82f6; /* focus ring / selection (non-text, needs 3:1: passes) */
--night:#0b1633; /* footer / email footer (white 18.42:1) */
/* ---- gradients ---- */
--grad: linear-gradient(135deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%); /* decorative: bars, rings, big numbers */
--grad-ink: linear-gradient(135deg, #0369a1 0%, #1e4fd6 55%, #1e3a8a 100%); /* carries white text, worst stop 5.99:1 */
--grad-text: linear-gradient(100deg, #2563eb 0%, #1d4ed8 100%); /* gradient headline words, worst stop 5.31:1 */
--grad-soft: linear-gradient(135deg, #eef6ff 0%, #eff4ff 100%); /* tinted panels */
/* ---- tints (for 'Who's it for?', bands, tags) ---- */
--purple-50:#eff4ff; /* who-box: --ink2 9.77:1, --brand 7.75:1 */
--purple-100:#dbe7ff; /* tag bg: --brand 6.84:1 */
--pink-50:#eef6ff; /* band: --ink2 9.89:1, --accent 5.43:1 */
--pink-100:#dbeafe;
--band:var(--purple-50); --band2:var(--pink-50);
/* ---- status ---- */
--ok:#047857; --ok-soft:#e3f6ee; /* 5.48:1 on white, 4.88:1 on soft */
--soon:#b42318; --soon-soft:#fdecea; /* 6.57:1 on white, 5.75:1 on soft; closing soon */
--warn:#8a5a00; --warn-soft:#fff4d6; /* 5.93:1 / 5.41:1 */
--bad:#b42318;
--local:#0f6e78; --local-soft:#e0f7f8; /* teal, echoes DreamLab cyan. 5.96:1 / 5.35:1 */
--dot-open:#7ed957; /* DreamLab green, status dot only */
/* legacy names still used by page templates (step numbers, sub-rows,
titles on blue bands) but never defined after the blue redesign, so
those rules silently did nothing. Soft blue, on-brand:
--sun on --brand 5.4:1 (text OK); --ink on --sun 12:1. */
--sun:#bfdbfe;
--green:#93c5fd; /* decorative rules only */
/* ---- type ---- */
--display:"Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
--body:"Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
/* ---- radius scale ---- */
--r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
--radius:var(--r-lg);
/* ---- shadow scale (purple-tinted, layered: short contact shadow + long soft one) ---- */
--shadow-xs: 0 1px 2px rgba(15,23,42,.06);
--shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06);
--shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -10px rgba(30,58,138,.16);
--shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 24px 48px -18px rgba(30,58,138,.30);
--shadow-pink: 0 14px 34px -14px rgba(59,130,246,.55);
--ring: 0 0 0 3px rgba(29,78,216,.22);
--ease: cubic-bezier(.22,1,.36,1); /* DreamLab's own --ease-out */
--measure:42rem; /* comfortable reading line (~75 chars) */
}
body { margin:0; font:16px/1.55 var(--body); color:var(--ink); background:var(--page);
font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--display); letter-spacing:-.025em;
line-height:1.08; margin:0; color:var(--ink); }
a { color:var(--brand); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { color:var(--accent); }
::selection { background:var(--pink-100); color:var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible { outline:2px solid var(--hot); outline-offset:3px; border-radius:6px; }
.num, .stats b, .tile b, .facts, .chip .n { font-variant-numeric:tabular-nums; }
/* ==========================================================================
(f) STICKY GLASS HEADER
========================================================================== */
.topbar { position:sticky; top:0; z-index:40;
background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
.topbar { background:rgba(255,255,255,.72);
-webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); }
}
.topbar .wrap { display:flex; align-items:center; gap:1rem 2rem; min-height:4.25rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand b { font:800 1.35rem/1 var(--display); letter-spacing:-.035em; }
.brand small { display:block; font:500 .68rem/1.2 var(--body); color:var(--hint); margin-top:.15rem; }
.topbar nav { display:flex; gap:.2rem .35rem; flex-wrap:wrap; align-items:center; margin-left:auto; }
.topbar nav a { color:var(--ink2); text-decoration:none; font-weight:550; font-size:.92rem;
padding:.45rem .8rem; border-radius:var(--r-pill); transition:background .15s, color .15s; }
.topbar nav a:hover { background:var(--purple-50); color:var(--brand); }
.topbar nav a.here { background:var(--purple-100); color:var(--brand); }
.topbar nav a.cta-nav { background:var(--brand); color:#fff; margin-left:.4rem; box-shadow:var(--shadow-sm); }
.topbar nav a.cta-nav:hover { background:var(--brand2); color:#fff; }
/* ==========================================================================
(a) HERO: blurred gradient orbs + faint dot grid (replaces the diagonal stripes)
Pure CSS, no images. Orbs sit to the right, so the text column stays near-white:
--muted on the strongest orb tint is still above 5:1.
IMPORTANT: delete from site.css the old
.hero::before { ... repeating-linear-gradient ... }
@media (max-width:82rem) { .hero::before { display:none; } }
========================================================================== */
.hero { position:relative; overflow:hidden; isolation:isolate; background:var(--page);
border-bottom:1px solid var(--line); }
.hero::before { /* colour orbs */
content:""; position:absolute; z-index:-2; inset:-20% -10% -30% 35%;
background:
radial-gradient(38% 45% at 70% 30%, rgba(59,130,246,.30), transparent 70%),
radial-gradient(40% 50% at 40% 70%, rgba(29,78,216,.22), transparent 70%),
radial-gradient(22% 28% at 88% 78%, rgba(0,200,220,.14), transparent 70%); /* DreamLab cyan nod */
filter:blur(48px); transform:translate3d(0,0,0);
animation:orb-drift 26s var(--ease) infinite alternate;
}
.hero::after { /* dot grid, faded out towards the edges */
content:""; position:absolute; z-index:-1; inset:0;
background-image:radial-gradient(rgba(30,58,138,.16) 1px, transparent 1.2px);
background-size:22px 22px; background-position:-11px -11px;
-webkit-mask-image:radial-gradient(ellipse 75% 70% at 65% 40%, #000 20%, transparent 75%);
mask-image:radial-gradient(ellipse 75% 70% at 65% 40%, #000 20%, transparent 75%);
}
@keyframes orb-drift {
0% { transform:translate3d(0,0,0) scale(1); }
50% { transform:translate3d(-4%,3%,0) scale(1.06); }
100% { transform:translate3d(3%,-2%,0) scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation:none; } }
@media (max-width:52rem) { .hero::before { inset:-10% -30% -10% 0; opacity:.8; } }
.hero .wrap { padding-top:4.5rem; padding-bottom:3.5rem; position:relative; }
.kicker { display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem;
font:650 .74rem/1 var(--body); text-transform:uppercase; letter-spacing:.14em; color:var(--brand);
background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-pill);
padding:.45rem .8rem .45rem .55rem; box-shadow:var(--shadow-xs); }
.kicker::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--grad); }
.hero h1 { font-size:clamp(2.3rem, 5.4vw, 4rem); font-weight:800; max-width:20ch; letter-spacing:-.03em; }
.hero h1 em, .grad-text { /* gradient words in a headline */
font-style:normal; background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent; }
@media (forced-colors: active) { .hero h1 em, .grad-text { color:CanvasText; -webkit-text-fill-color:CanvasText; background:none; } }
.hero .lede { font-size:1.15rem; color:var(--muted); max-width:42rem; margin:1.1rem 0 0; }
/* Gradient underline for section headings (alternative to gradient text) */
.u-grad { background:var(--grad) left 92% / 100% .14em no-repeat; padding-bottom:.08em; }
/* Bento stat tiles (replaces the green left-border stats) */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem,1fr)); gap:.75rem;
margin-top:2rem; max-width:48rem; }
.stats div { background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:var(--r-md);
padding:1rem 1.1rem; box-shadow:var(--shadow-sm); }
.stats div:first-child { grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end;
background:var(--grad-ink); border-color:transparent; box-shadow:var(--shadow-pink); }
.stats div:first-child b, .stats div:first-child span { color:#fff; }
.stats b { display:block; font:800 1.9rem/1.05 var(--display); letter-spacing:-.03em; color:var(--brand); }
.stats div:first-child b { font-size:2.8rem; }
.stats span { font-size:.82rem; color:var(--hint); }
/* Tinted bands */
.band { background:var(--grad-soft); border-block:1px solid var(--line); }
.band.mint { background:var(--purple-50); }
.band .wrap { padding-top:2.6rem; padding-bottom:2.6rem; }
.band h2 { font-size:clamp(1.6rem, 3vw, 2.3rem); font-weight:800; }
.band p { color:var(--ink2); max-width:48rem; }
/* ==========================================================================
(b) BUTTONS
========================================================================== */
.btn { display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer;
background:var(--brand); color:#fff; font:650 .95rem/1 var(--body);
padding:.85rem 1.35rem; border-radius:var(--r-pill); text-decoration:none;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px rgba(29,78,216,.6);
transition:background .15s, transform .15s var(--ease), box-shadow .15s; }
.btn:hover { background:var(--brand2); color:#fff; transform:translateY(-1px);
box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 26px -10px rgba(29,78,216,.7); }
.btn:active { transform:translateY(0); }
.btn.grad { background:var(--grad-ink); box-shadow:var(--shadow-pink); } /* hero CTA: white 5.99:1+ */
.btn.grad:hover { filter:brightness(.94); }
.btn.dark { background:var(--ink); } .btn.dark:hover { background:#000; }
.btn.ghost { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line2); }
.btn.ghost:hover { color:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand); }
.btn.small { padding:.5rem .95rem; font-size:.85rem; }
.btn .arr { transition:transform .15s var(--ease); } .btn:hover .arr { transform:translateX(3px); }
/* ==========================================================================
(c) CHIPS / FILTER PILLS
========================================================================== */
.chip { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
border:1px solid var(--line2); background:#fff; color:var(--ink2);
border-radius:var(--r-pill); padding:.4rem .85rem; font-size:.86rem; font-weight:500;
transition:border-color .15s, background .15s, color .15s, box-shadow .15s; }
.chip:hover { border-color:var(--brand); color:var(--brand); background:var(--purple-50); }
.chip.on, .chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff;
box-shadow:0 4px 12px -6px rgba(29,78,216,.7); }
.chip .n { font-size:.72rem; color:var(--hint); background:var(--purple-50); border-radius:var(--r-pill);
padding:.12rem .42rem; }
.chip.on .n { color:#fff; background:rgba(255,255,255,.2); }
.checks label { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
border:1px solid var(--line2); background:#fff; border-radius:var(--r-pill);
padding:.34rem .85rem .34rem .6rem; font-size:.86rem; }
.checks label:has(input:checked) { border-color:var(--brand); background:var(--purple-50); color:var(--brand); }
.checks input { accent-color:var(--brand); margin:0; }
.field input[type=email], .field input[type=text], .field select {
width:100%; padding:.75rem .9rem; border:1px solid var(--line2); border-radius:var(--r-sm); background:#fff; }
.field input:focus, .field select:focus { border-color:var(--brand); outline:none; box-shadow:var(--ring); }
.searchbox { border-radius:var(--r-pill); border:1px solid var(--line2); box-shadow:var(--shadow-sm); }
.searchbox:focus-within { border-color:var(--brand); box-shadow:var(--ring), var(--shadow-sm); }
.searchbox svg { color:var(--brand); }
.filters summary .pm::before, .filters summary .pm::after { background:var(--brand); }
/* ==========================================================================
(d) OPPORTUNITY CARD
========================================================================== */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr)); gap:1.25rem; }
.opp { position:relative; display:flex; flex-direction:column; gap:.6rem;
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
padding:1.3rem 1.35rem 1.1rem; box-shadow:var(--shadow);
transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.opp:hover { transform:translateY(-3px); border-color:#c7d7f5; box-shadow:var(--shadow-lg); }
.opp:focus-within { border-color:var(--brand); }
.opp .top { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.kind { display:inline-flex; align-items:center; gap:.4rem;
font:700 .7rem/1 var(--body); text-transform:uppercase; letter-spacing:.11em; color:var(--accent); }
.kind::before { content:""; width:.45rem; height:.45rem; border-radius:2px; background:var(--grad); }
.tag { font:600 .7rem/1 var(--body); border-radius:var(--r-pill); padding:.32rem .6rem;
background:var(--purple-100); color:var(--brand); white-space:nowrap; }
.tag.local { background:var(--local-soft); color:var(--local); }
.tag.global { background:transparent; box-shadow:inset 0 0 0 1px var(--line2); color:var(--hint); }
.tag.new { background:#2563eb; color:#fff; } /* 5.31:1 */
.tag.open { background:var(--ok-soft); color:var(--ok); }
.tag.open::before { content:""; display:inline-block; width:.42rem; height:.42rem; margin-right:.35rem;
border-radius:50%; background:var(--dot-open); vertical-align:.05em; }
.opp h3 { font-size:1.2rem; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.opp h3 a { color:var(--ink); text-decoration:none; }
.opp h3 a::after { content:""; position:absolute; inset:0; border-radius:inherit; } /* whole card clickable */
.opp h3 a:hover { color:var(--brand); }
.opp .icon, .opp .go, .opp .who a, .opp .oppdetail { position:relative; z-index:1; } /* stay above the stretched link */
.opp .with { font-size:.84rem; color:var(--hint); margin:-.3rem 0 0; }
.opp .sum { font-size:.9rem; color:var(--muted); margin:0; display:-webkit-box;
-webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.who { background:var(--purple-50); border:1px solid #dde7fb; border-radius:var(--r-md);
padding:.7rem .85rem; font-size:.86rem; color:var(--ink2); }
.who b { display:block; font:700 .78rem/1.2 var(--body); text-transform:uppercase; letter-spacing:.08em;
color:var(--brand); margin-bottom:.3rem; }
.who ul { margin:0; padding:0; list-style:none; }
.who li { padding-left:1rem; position:relative; }
.who li::before { content:""; position:absolute; left:.1rem; top:.62em; width:.38rem; height:.38rem;
border-radius:50%; background:var(--pink); }
.who .unk { color:var(--hint); font-style:italic; }
/* key facts: value on one line, deadline on the next, always in the same
place at the foot of every card so a row of cards scans like a table */
.facts { display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
font-size:.88rem; line-height:1.35; margin-top:auto;
padding-top:.75rem; border-top:1px solid var(--line); }
.facts .val { font-weight:700; font-size:.95rem; color:var(--ink); }
.facts .dl { color:var(--ink2); }
.facts .dl.rolling { color:var(--ok); font-weight:600; }
/* closing within 14 days: a calm tinted pill rather than shouting red text */
.facts .dl.soon { color:var(--soon); background:var(--soon-soft); font-weight:650;
border-radius:var(--r-pill); padding:.2rem .6rem; margin-left:-.1rem; }
.opp .foot { display:flex; align-items:center; gap:.25rem; margin:-.2rem -.3rem -.35rem 0; }
.go { margin-right:auto; font-weight:650; text-decoration:none; color:var(--brand); font-size:.94rem;
display:inline-flex; gap:.35rem; align-items:center; min-height:2.5rem; }
.go:hover { color:var(--accent); text-decoration:underline; text-underline-offset:.18em; }
.go .arr { transition:transform .15s var(--ease); } .go:hover .arr { transform:translateX(3px); }
/* save / copy: 40px touch targets */
.icon { display:inline-grid; place-items:center; min-width:2.5rem; min-height:2.5rem;
background:none; border:0; cursor:pointer; color:var(--hint); font-size:1.1rem;
padding:0; border-radius:var(--r-sm); line-height:1; }
.icon:hover { color:var(--brand); background:var(--purple-50); }
.icon.on { color:var(--accent); }
/* keyboard focus on the (stretched) title link rings the whole card */
@supports selector(:has(a)) {
.opp:has(h3 a:focus-visible) { box-shadow:0 0 0 3px var(--hot), var(--shadow); }
.opp h3 a:focus-visible { outline:none; text-decoration:underline; text-underline-offset:.15em; }
}
.fitline { font-size:.8rem; color:var(--ok); font-weight:600; }
/* ==========================================================================
(e) FEATURE CARD: closing-soon deadlines. Gradient with white text.
All text is white (min 5.99:1 on the lightest stop; ~5.0:1 inside the
12% white 'who' panel). No pink #3b82f6 behind text.
========================================================================== */
.feature { background:var(--grad-ink); border-color:transparent; color:#fff;
box-shadow:var(--shadow-pink), inset 0 1px 0 rgba(255,255,255,.18); overflow:hidden; }
.feature::before { /* fine dot texture, top-right only, decorative */
content:""; position:absolute; inset:0 0 auto auto; width:55%; height:60%; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.2px); background-size:14px 14px;
-webkit-mask-image:radial-gradient(circle at 100% 0, #000, transparent 70%);
mask-image:radial-gradient(circle at 100% 0, #000, transparent 70%); }
.feature:hover { border-color:transparent; box-shadow:0 22px 44px -16px rgba(29,78,216,.6); }
.feature .kind { color:#fff; } .feature .kind::before { background:#fff; }
.feature h3 { font-size:1.35rem; }
.feature h3 a, .feature h3 a:hover { color:#fff; }
.feature h3 a:hover { text-decoration:underline; text-underline-offset:.15em; }
.feature .sum, .feature .with { color:#fff; }
.feature .who { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff; }
.feature .who b { color:#fff; }
.feature .who li::before { background:#fff; }
.feature .facts { border-top-color:rgba(255,255,255,.22); }
.feature .facts .val, .feature .facts .dl { color:#fff; }
.feature .facts .dl.soon { color:#fff; background:rgba(15,23,42,.28); border-radius:var(--r-pill);
padding:.15rem .55rem; } /* urgent pill, white on darker */
.feature .go { color:#fff; } .feature .go:hover { color:#fff; text-decoration:underline; }
.feature .tag { background:rgba(255,255,255,.18); color:#fff; }
.feature .tag.new { background:#fff; color:var(--accent); }
.feature .icon { color:#fff; } .feature .icon:hover { background:rgba(255,255,255,.16); }
.feature .fitline { color:#fff; }
/* Report tiles (dashboard, coverage) */
.tile { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1rem 1.1rem;
box-shadow:var(--shadow-sm); }
.tile b { display:block; font:800 1.6rem/1.1 var(--display); color:var(--brand); overflow-wrap:anywhere; }
.tile span { font-size:.78rem; color:var(--hint); }
.scroll { border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
th { background:var(--purple-50); color:var(--hint); }
.meta span { background:var(--purple-50); color:var(--ink2); border-radius:var(--r-pill); }
.meta .deadline-soon { background:var(--soon-soft); color:var(--soon); }
.meta .val { background:var(--purple-100); color:var(--ink); font-weight:700; } /* award size stands out */
.meta .scope-local { background:var(--local-soft); color:var(--local); }
/* ==========================================================================
(g) FOOTER: deep night-purple with a gradient hairline on top
========================================================================== */
.sitefoot { position:relative; background:var(--night); color:#cdd8ee; margin-top:5rem; font-size:.9rem; }
.sitefoot::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); }
.sitefoot .wrap { padding-top:3rem; padding-bottom:2.2rem; display:grid;
grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:1.8rem; }
.sitefoot h4 { color:#fff; font-size:1rem; margin-bottom:.7rem; letter-spacing:-.01em; }
.sitefoot a { color:#fff; text-decoration:none; display:block; padding:.18rem 0; }
.sitefoot a:hover { color:#93c5fd; } /* 10.26:1 */
.sitefoot p { margin:.3rem 0; line-height:1.6; } /* #cdd8ee 12.17:1 */
.sitefoot .fine { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.12);
padding-top:1.1rem; font-size:.8rem; color:#a8b8d8; } /* 8.22:1 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition:none !important; animation:none !important; }
.opp:hover, .btn:hover { transform:none; }
}
@media (forced-colors: active) {
.opp, .chip, .btn, .tag, .who, .stats div { border:1px solid CanvasText; }
.hero::before, .hero::after, .feature::before { display:none; }
}
/* ==========================================================================
Wordmark (Pete 2026-09-26: "make BEARINGS in the header look cooler")
========================================================================== */
.brand { gap:.7rem; }
.brand svg { width:38px; height:38px; flex:none; filter:drop-shadow(0 6px 12px rgba(59,130,246,.35));
transition:transform .35s var(--ease); }
.brand:hover svg { transform:rotate(-18deg) scale(1.05); }
.brand .wm { display:flex; flex-direction:column; line-height:1; }
.brand b { font:800 1.5rem/1 var(--display); letter-spacing:.06em; text-transform:uppercase;
background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent; }
.brand b .beta { font:700 .6rem/1 var(--body); font-style:normal; letter-spacing:.08em;
text-transform:uppercase; vertical-align:middle; margin-left:.35rem; padding:.22rem .45rem;
border-radius:999px; background:#dbe7ff; color:#1d4ed8; -webkit-text-fill-color:#1d4ed8; }
.betanote { background:#eff4ff; border-left:4px solid #1d4ed8; border-radius:12px;
padding:.4rem 1.2rem 1rem; margin-bottom:1rem; }
.betanote h2 { margin-top:.8rem !important; }
.brand small { font:600 .6rem/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase;
color:var(--hint); margin-top:.3rem; }
@media (forced-colors: active) { .brand b { color:CanvasText; -webkit-text-fill-color:CanvasText; background:none; } }
@media (max-width:40rem), (min-width:52rem) and (max-width:84rem) { .brand small { display:none; } }
.stats div:first-child span { color:#fff; opacity:.9; }
/* long URLs/codes in summaries must wrap, never widen the page on phones */
.opp, .opp p, .opp h3, .who, .facts { overflow-wrap:anywhere; }
/* phones: the menu wraps to several rows, so the header must scroll away
rather than stick over the content (the design layer re-enabled sticky) */
@media (max-width:52rem) { .topbar { position:static; } .filters { top:auto; } }
/* One-row header (Pete 2026-09-26: "can the title be in line with the
links"): wordmark and menu share a row on anything wider than a phone;
the tagline only shows when there's room beside the menu. */
@media (min-width:52.01rem) {
.topbar .wrap { flex-wrap:nowrap; }
.brand { flex:none; }
.topbar nav { flex-wrap:nowrap; white-space:nowrap; }
}
@media (min-width:52.01rem) and (max-width:64rem) {
.topbar nav { gap:0; }
.topbar nav a { font-size:.85rem; padding-left:.5rem; padding-right:.5rem; }
}
.brand small { display:none; }
@media (min-width:88rem) { .brand small { display:block; } }
@media (max-width:52rem) { .topbar .wrap { padding-top:.7rem; } }
/* 'Might be relevant': the less-certain results, below the sure ones */
.maybe-h { grid-column:1 / -1; margin:1.8rem 0 .1rem; padding-top:1.3rem; border-top:2px solid var(--line); }
.maybe-h h2 { display:flex; align-items:center; gap:.5rem; font:700 1.2rem/1.2 var(--display);
margin:0; color:var(--ink); }
.maybe-h .cnt { font:650 .76rem/1 var(--body); color:var(--ink2); background:var(--purple-50);
border-radius:var(--r-pill); padding:.25rem .55rem; font-variant-numeric:tabular-nums; }
.maybe-h .note { margin:.35rem 0 0; max-width:46rem; }
/* phones: the closing-soon trio keeps title, who and key facts but drops
the summary, so the full list starts sooner */
@media (max-width:40rem) {
.feature .sum { display:none; }
.opp { padding:1.1rem 1.1rem 1rem; }
}
/* ==========================================================================
Compact page header (Pete 2026-09-26: "the header area is fine on the
homepage, but make it smaller on the other pages so users can get right
to the searching, especially on smaller screens"). The homepage keeps the
full hero; every other page uses .hero.compact.
========================================================================== */
.hero.compact .wrap { padding-top:1.5rem; padding-bottom:1.4rem; }
.hero.compact .kicker { margin-bottom:.6rem; padding:.32rem .65rem .32rem .45rem; font-size:.68rem; }
.hero.compact h1 { font-size:clamp(1.55rem, 3vw, 2.2rem); max-width:none; }
.hero.compact .lede { font-size:1rem; margin-top:.45rem; }
@media (max-width:40rem) {
.hero.compact .wrap { padding-top:1.1rem; padding-bottom:1rem; }
.hero.compact .kicker { display:none; }
}
/* Find opportunities: title + one stat line on the left, the 'Show me what
fits' card on the right — one strip instead of hero + profile band. */
.finder .wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 30rem);
gap:1rem 2rem; align-items:center; }
.statline { display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; margin:.6rem 0 0;
font-size:.9rem; color:var(--hint); }
.statline b { font:800 1.05rem/1 var(--display); color:var(--brand); margin-right:.2rem;
font-variant-numeric:tabular-nums; }
.fitcard { position:relative; overflow:hidden; border-radius:var(--r-lg); padding:1.05rem 1.2rem;
background:var(--grad-ink); color:#fff; box-shadow:var(--shadow-pink);
display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; }
.fitcard::after { content:""; position:absolute; right:-2.5rem; top:-2.5rem; width:8rem; height:8rem;
border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
pointer-events:none; }
.fitcard .fc-text { flex:1 1 14rem; min-width:0; }
.fitcard h2 { font-size:1.15rem; font-weight:800; color:#fff; }
.fitcard h2::before { content:"✦ "; color:#bfdbfe; }
.fitcard p { margin:.25rem 0 0; font-size:.86rem; color:#e0ebff; line-height:1.4; }
.fitcard .acts { display:flex; gap:.6rem 1rem; align-items:center; flex-wrap:wrap; }
.fitcard .btn { background:#fff; color:var(--brand); box-shadow:none; }
.fitcard .btn:hover { background:#eff4ff; color:var(--brand2); }
.fitcard .switch { color:#fff; font-size:.9rem; }
.fitcard .switch input { background:rgba(255,255,255,.35); }
.fitcard .switch input:checked { background:#fff; }
.fitcard .switch input:checked::after { background:var(--brand); }
@media (max-width:60rem) {
.finder .wrap { grid-template-columns:1fr; gap:.8rem; }
}
@media (max-width:40rem) {
.finder .wrap { padding-top:.9rem; padding-bottom:.9rem; }
.statline { font-size:.82rem; gap:.2rem .8rem; }
.statline .opt { display:none; } /* keep the line to one row on phones */
.fitcard { padding:.85rem 1rem; }
.fitcard p { display:none; } /* the heading + button say it */
}
@media (forced-colors: active) { .fitcard { border:1px solid CanvasText; } }
/* Homepage: a prominent route into Find opportunities, straight under the
search hero (Pete 2026-09-26: "encourage people to find opportunities as
well as the search — this should be quite prominent"). */
.orbrowse { margin:.9rem 0 0; font-weight:600; color:var(--hint); }
.orbrowse a { font-weight:700; }
.findband { margin-top:2.2rem; }
.findband .fb { position:relative; overflow:hidden; isolation:isolate; display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1.5rem 2.5rem; align-items:center;
background:var(--grad-ink); color:#fff; border-radius:var(--r-xl); padding:2.2rem 2.4rem;
box-shadow:var(--shadow-lg); }
.findband .fb::after { content:""; position:absolute; z-index:-1; right:-6rem; top:-6rem;
width:22rem; height:22rem; border-radius:50%;
background:radial-gradient(circle, rgba(147,197,253,.35), transparent 70%); }
.findband .fb-kicker { margin:0 0 .5rem; font:700 .78rem/1 var(--body); letter-spacing:.14em;
text-transform:uppercase; color:#bfdbfe; }
.findband h2 { font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:800; color:#fff; }
.findband p { color:#e0ebff; margin:.6rem 0 0; max-width:38rem; }
.findband ul { list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.findband li { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
border-radius:var(--r-pill); padding:.32rem .8rem; font-size:.86rem; color:#fff; }
.findband .ctas { display:flex; flex-direction:column; gap:.75rem; align-items:stretch; }
.findband .btn.big { justify-content:center; text-align:center; font-size:1.08rem; padding:.95rem 1.4rem; }
.findband .btn:not(.ghost) { background:#fff; color:var(--brand); box-shadow:0 10px 24px -10px rgba(0,0,0,.45); }
.findband .btn:not(.ghost):hover { background:#eff4ff; color:var(--brand2); }
.findband .btn.ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75); }
.findband .btn.ghost:hover { background:rgba(255,255,255,.12); color:#fff; }
.findband .ctas small { color:#dbe7ff; text-align:center; }
@media (max-width:52rem) {
.findband .fb { grid-template-columns:1fr; padding:1.6rem 1.3rem; }
}
@media (forced-colors: active) { .findband .fb { border:1px solid CanvasText; } }
/* printable full list: download + print bar (hidden when printing) */
.listbar { display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin:0 0 1.4rem; }
.listbar .note { margin:0; }
@media print { .listbar, .topbar, .sitefoot { display:none !important; } }
/* ==========================================================================
Shared chrome polish (2026-10-01): header, focus, skip link, reading
measure, print. Chrome and secondary pages only; no card/filter rules.
========================================================================== */
/* skip link: a real, obvious button when it receives focus */
.skip { font-weight:700; text-decoration:underline; text-underline-offset:.18em; }
.skip:focus { outline:3px solid var(--sun); outline-offset:0; color:#fff; }
/* focus ring stays visible on the dark/blue bands */
.sitefoot a:focus-visible, .findband a:focus-visible, .alertband a:focus-visible {
outline-color:#fff; }
/* nav: 40px targets; the current page is marked by weight as well as tint
(the legacy underline left a stray bottom edge on the pill) */
.topbar nav a { display:inline-flex; align-items:center; min-height:2.5rem;
border-bottom:0; }
.topbar nav a.here { font-weight:700; }
.topbar nav a.cta-nav { font-weight:650; }
.topbar .cta-mob { display:none; }
/* phones: wordmark + alerts button on one row, the five page links on two
compact rows below (was three rows plus the button) */
@media (max-width:52rem) {
.topbar .wrap { gap:.25rem .75rem; padding-top:.5rem; min-height:0; }
.brand { min-height:2.75rem; }
.topbar .cta-mob { display:inline-flex; margin-left:auto; padding:.6rem .95rem;
font-size:.85rem; min-height:2.5rem; box-shadow:var(--shadow-sm); }
.topbar nav { width:calc(100% + 1.1rem); gap:0 .1rem; margin:0 -.55rem; padding-bottom:.4rem; }
.topbar nav a { padding:.4rem .55rem; font-size:.9rem; }
.topbar nav a.cta-nav { display:none; }
}
@media (max-width:24rem) {
.brand b { font-size:1.3rem; letter-spacing:.04em; }
.brand b .beta { margin-left:.25rem; }
.topbar .cta-mob { padding:.55rem .8rem; font-size:.8rem; }
}
@media (max-width:21rem) { .brand b .beta { display:none; } }
/* home hero on phones: less dead space above the headline so the browse
button and search box reach the first screen */
@media (max-width:40rem) {
.hero:not(.compact) .wrap { padding-top:1.75rem; padding-bottom:2.2rem; }
.hero:not(.compact) h1 { font-size:2.05rem; }
.hero:not(.compact) .lede { font-size:1.04rem; }
.hero:not(.compact) .kicker { font-size:.66rem; letter-spacing:.1em; }
}
/* report pages (about, privacy, contact, coverage, dashboard) */
main.report section p, main.report section li { max-width:var(--measure); }
main.report h2 { scroll-margin-top:5rem; }
main.report li + li { margin-top:.3rem; }
/* footer: comfortable tap rows */
.sitefoot a { padding:.3rem 0; }
.sitefoot a:hover { text-decoration:underline; text-underline-offset:.18em; }
/* links inside the fine print run inline with the sentence (the credit) */
.sitefoot .fine a { display:inline; padding:0; text-decoration:underline; text-underline-offset:.18em; }
/* print: content only, plain ink */
@media print {
.skip, .hero::before, .hero::after, .findband, .alertband, .cta-mob { display:none !important; }
body { background:#fff; color:#000; }
.hero { border:0; }
.hero .wrap { padding:0 0 1rem; }
}
/* ==========================================================================
Finder layout, shared by Find opportunities and Coming soon: filter
sidebar, pill search, type bar and results toolbar.
========================================================================== */
.layout { display:grid; grid-template-columns:17.5rem minmax(0, 1fr); gap:2.2rem;
padding-top:2rem; align-items:start; }
/* a grid item's min-width defaults to its content: without this, one wide
unbreakable row in the results widens the column past a phone screen */
.layout > * { min-width:0; }
/* a little inner padding so the search box's focus ring and the chips'
outlines aren't clipped by the scrolling panel's edge */
.filters { position:sticky; top:5.4rem; max-height:calc(100vh - 6rem);
overflow:auto; padding:.3rem .5rem .5rem .3rem; margin:-.3rem 0 0 -.3rem;
scrollbar-width:thin; }
.flabel { font-weight:600; color:var(--hint); margin:0 0 .4rem; }
.searchbox { display:flex; align-items:center; gap:.65rem; background:var(--paper);
border:1.5px solid var(--line2); border-radius:var(--r-pill);
padding:.45rem 1.1rem .45rem 1.05rem; margin:0 0 1.1rem;
box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s; }
.searchbox svg { width:18px; height:18px; flex:none; color:var(--brand); }
.searchbox input { border:0; background:transparent; flex:1; font-size:1rem;
padding:.3rem 0; min-width:0; }
.searchbox input:focus { outline:none; }
.searchbox input::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
.searchbox .qclear { flex:none; display:inline-grid; place-items:center; width:2rem; height:2rem;
margin:-.3rem -.55rem -.3rem 0; border:0; border-radius:50%; background:transparent;
color:var(--hint); cursor:pointer; font-size:1.1rem; line-height:1; }
.searchbox .qclear:hover { background:var(--purple-50); color:var(--brand); }
.searchbox .qclear[hidden] { display:none; }
.showres { display:none; }
.ftcount { font:700 .72rem/1 var(--body); background:var(--brand); color:#fff;
border-radius:999px; padding:.2rem .45rem; }
.ftcount:empty { display:none; }
.searchbox:focus-within { border-color:var(--brand); box-shadow:var(--ring), var(--shadow-sm); }
.filters details { border-bottom:1px solid var(--line); }
.filters summary { list-style:none; cursor:pointer; display:flex;
align-items:center; gap:.5rem; padding:.8rem 0; font:700 1.08rem/1.2 var(--display); }
.filters summary::-webkit-details-marker { display:none; }
.filters summary .pm { margin-left:auto; width:14px; height:14px; position:relative; flex:none; }
.filters summary .pm::before, .filters summary .pm::after { content:""; position:absolute;
background:var(--accent); left:0; right:0; top:6px; height:2.5px; border-radius:2px; }
.filters summary .pm::after { transform:rotate(90deg); transition:transform .15s; }
.filters details[open] summary .pm::after { transform:rotate(0deg); }
.filters summary .cnt { font:700 .7rem/1 var(--body); background:var(--brand);
color:#fff; border-radius:999px; padding:.2rem .45rem; }
.filters summary .cnt:empty { display:none; }
.chipcol { display:flex; flex-wrap:wrap; gap:.35rem; padding:0 0 1rem; }
.clearall { margin-top:1rem; }
.toolbar { display:flex; gap:.6rem 1rem; align-items:center; flex-wrap:wrap;
margin-bottom:.8rem; }
.count { font-size:.95rem; color:var(--muted); }
.count b { font:800 1.25rem/1 var(--display); color:var(--ink); }
.tools { margin-left:auto; display:flex; gap:.6rem; align-items:center; }
/* own chevron, inset from the pill's rounded edge (Pete 2026-10-01: the
browser's arrow sat too close to the right) */
.tools select { border:1.5px solid var(--line2); border-radius:999px;
padding:.38rem 2.6rem .38rem .95rem; appearance:none; -webkit-appearance:none;
background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.1rem center / 12px 8px;
cursor:pointer; }
/* type-of-opportunity tabs under the chosen sector (Pete 2026-10-01): one
segmented row of four broad types, then the finer kinds of the one chosen */
.kindbar { margin:-.2rem 0 1.3rem; }
.kindbar[hidden], .kindbar .ksub[hidden] { display:none; }
.kseg { display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px;
max-width:100%; padding:3px; background:var(--purple-50); border:1px solid var(--line2);
border-radius:var(--r-sm); }
.kseg button { display:flex; align-items:center; justify-content:center; gap:.4rem;
min-height:2.5rem; padding:.35rem 1rem; border:0; border-radius:7px; background:transparent;
color:var(--ink2); font:600 .9rem/1.15 var(--body); cursor:pointer; white-space:nowrap;
transition:background .15s, color .15s; }
.kseg button:hover { background:var(--paper); color:var(--brand); }
.kseg button[aria-pressed="true"] { background:var(--brand); color:#fff;
box-shadow:0 4px 12px -6px rgba(29,78,216,.7); }
.kseg .n { font-weight:500; font-size:.78rem; color:var(--hint); font-variant-numeric:tabular-nums; }
.kseg button[aria-pressed="true"] .n { color:#dbe4ff; }
.ksub { display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 0; }
.ksub .chip { font-size:.82rem; padding:.3rem .75rem; }
.mobile-toggle { display:none; }
@media (max-width:60rem) {
.layout { grid-template-columns:minmax(0, 1fr); gap:1rem; }
.filters { position:static; max-height:none; display:none; }
.filters.shown { display:block; }
/* the keyword search stays visible on phones; the rest folds away */
.filters:not(.shown) { display:block; }
.filters:not(.shown) > :not(.searchbox) { display:none; }
.filters:not(.shown) .searchbox { margin-bottom:.2rem; }
.filters { margin:0; padding:0; overflow:visible; }
/* filter button: full width, a proper touch target, shows how many
filters are on while the panel is folded away */
.mobile-toggle { display:flex; justify-content:center; gap:.5rem; width:100%;
min-height:2.75rem; font-size:.95rem; }
/* sticky 'Show N results' at the foot of the open filter panel */
.filters.shown .showres { display:flex; justify-content:center; width:100%;
position:sticky; bottom:.75rem; z-index:5; margin-top:1rem; min-height:3rem; font-size:1rem; }
.filters.shown .clearall { display:block; margin:1rem auto 0; min-height:2.5rem; }
/* the type tabs fill the width as equal cells, count under the label,
so all of them show at once with nothing to swipe */
.kseg { display:grid; width:100%; grid-auto-columns:minmax(0, 1fr); }
.kseg button { flex-direction:column; gap:.1rem; padding:.35rem .15rem; min-height:3rem; }
.filters summary { min-height:2.75rem; padding:.5rem 0; }
.tools { margin-left:0; width:100%; flex-wrap:wrap; }
.tools select { flex:1; min-height:2.5rem; }
.tools .chip { min-height:2.5rem; }
.searchbox .qclear { width:2.5rem; height:2.5rem; }
}
/* Saved for later (2026-10-04): the top-bar link appears once something is
saved; the toast carries a 'View saved' link */
.topbar nav a.nav-saved[hidden] { display:none; }
.topbar nav a.nav-saved span[aria-hidden] { color:var(--pink); }
#toast.act { pointer-events:auto; }
#toast a { color:#bfdbfe; font-weight:700; margin-left:.4rem; text-decoration:underline; }
.tag.notyet { background:var(--purple-100); color:var(--brand); }
#savedextra { margin:0 0 1.8rem; }
#savedextra .cards { margin-bottom:1rem; }
.savedbar { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; margin:0 0 1.2rem; }