Sam Rolfe
84fc585c91
One Go binary serves a pre-rendered site. No Node, no bundler, no node_modules:
htmx and the SSE extension are vendored files, Markdown and code highlighting
run at build time (goldmark + chroma), and the server only writes files.
Implements docs/phase-2-static-site.md:
2.1 service skeleton cmd/build (content -> dist), cmd/server (dist -> HTTP),
env-configured, 127.0.0.1:8096, /healthz with separate
static / ai / search readiness, --health-check probe,
deploy/compose.yml + deploy/Dockerfile at 120m
2.2 rendering templ components (Layout, Nav, PillarCard, Stage,
EvidenceTable, CodeBlock, Timeline, Footer);
`make generate` is a build step and is byte-stable
2.3 navigation six-area rail, <details> disclosure under 900px,
breadcrumbs, aria-current, L1/L2/L3 with artefact pages
2.4 stage panel internal/stage owns the contract; RouteDriver (fragment
swap) and SSEDriver (event stream) differ only in the
Binding, never in layout. fragment ids live in the
contract so route files, links and streamed frames agree
2.5 search SQLite FTS5 over titles and body, rebuilt by the build;
one handler returns a page without HTMX, a fragment with
it. Visitors' FTS operators are never honoured
2.6 quality floor print stylesheet, JS-off navigation, focus states,
semantic landmarks, dark default; security headers
Definition of Done evidence (see issue AUD-142):
A1 all pages 200 in a network namespace with no external route
one binary serves the site; make dist writes 45 pages, 86 fragments, 40 docs
templ generate is deterministic (md5 identical across runs)
6 L1 + 6 L2 pages, artefact pages reachable in <= 3 clicks
FTS5 returns sensible hits for zigbee / signage / routing (tested)
Lighthouse 100 performance and 100 accessibility, mobile and desktop
first byte well inside 100ms over loopback (test)
panel renders from a route driver and re-points at the stream untouched
print legible: /edge/ renders to a 3-page PDF with the print stylesheet
Also fixes found while finishing the build:
- reject "." / ".." path segments before ServeMux redirects them into a file
outside the asset directory (/static/../build.json now 404, was 307->200)
- make test is the real gate: go test ./... plus the validator self-test
1361 lines
21 KiB
CSS
1361 lines
21 KiB
CSS
/*
|
|
* Ai Resume — the whole stylesheet.
|
|
*
|
|
* Dark by default, one accent, no web fonts (the system stack is faster and the
|
|
* page must render before any network request beyond this file). Everything
|
|
* here is layout and colour; no content decisions live in CSS.
|
|
*
|
|
* Sections: tokens · base · chrome · nav · stage panel · pages · prose ·
|
|
* evidence · search · footer · responsive · print.
|
|
*/
|
|
|
|
/* ---- tokens ------------------------------------------------------------ */
|
|
|
|
:root {
|
|
--bg: #0b0d10;
|
|
--surface: #12161b;
|
|
--surface-2: #171d24;
|
|
--line: #242c35;
|
|
--line-strong: #33404d;
|
|
--text: #e8ecf1;
|
|
--text-dim: #b3bcc8;
|
|
--text-muted: #8d97a5;
|
|
--accent: #6ee7c6;
|
|
--accent-ink: #04211a;
|
|
--link: #8ecbff;
|
|
--link-hover: #b9dfff;
|
|
|
|
--ok: #56d364;
|
|
--info: #79c0ff;
|
|
--warn: #e3b341;
|
|
--bad: #ff7b72;
|
|
--faded: #9aa4b2;
|
|
|
|
--radius: 10px;
|
|
--radius-sm: 6px;
|
|
--pad: clamp(1rem, 2.2vw, 2rem);
|
|
--measure: 68ch;
|
|
--nav-w: 17rem;
|
|
--stage-w: minmax(22rem, 30rem);
|
|
|
|
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ---- base -------------------------------------------------------------- */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-sans);
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
img,
|
|
svg,
|
|
video {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom-color: currentColor;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
line-height: 1.2;
|
|
margin: 0 0 0.5rem;
|
|
font-weight: 650;
|
|
letter-spacing: -0.011em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(1.75rem, 3.2vw, 2.6rem);
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(1.25rem, 2vw, 1.6rem);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
top: -3rem;
|
|
z-index: 50;
|
|
padding: 0.5rem 0.9rem;
|
|
background: var(--accent);
|
|
color: var(--accent-ink);
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0.5rem;
|
|
}
|
|
|
|
/* ---- chrome ------------------------------------------------------------ */
|
|
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
display: grid;
|
|
grid-template-columns: var(--nav-w) minmax(0, 1fr) auto;
|
|
gap: var(--pad);
|
|
align-items: center;
|
|
padding: 0.7rem var(--pad);
|
|
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
color: var(--text);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--line-strong);
|
|
background: var(--surface-2);
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.brand-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: 650;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.brand-sub {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-disclosure {
|
|
display: none;
|
|
}
|
|
|
|
.nav-rail {
|
|
display: flex;
|
|
gap: 0.15rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.nav-rail::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.7rem;
|
|
border-radius: var(--radius-sm);
|
|
border-bottom: 0;
|
|
color: var(--text-dim);
|
|
white-space: nowrap;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: var(--surface-2);
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-current {
|
|
background: var(--surface-2);
|
|
color: var(--text);
|
|
box-shadow: inset 0 -2px 0 var(--accent);
|
|
}
|
|
|
|
.nav-gutter {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.nav-current .nav-gutter {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ---- shell ------------------------------------------------------------- */
|
|
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) var(--stage-w);
|
|
gap: var(--pad);
|
|
align-items: start;
|
|
max-width: 96rem;
|
|
margin: 0 auto;
|
|
padding: var(--pad);
|
|
}
|
|
|
|
.main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.main > * + * {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.crumbs ol {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.crumbs li {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.crumb-sep {
|
|
color: var(--line-strong);
|
|
}
|
|
|
|
/* ---- search form ------------------------------------------------------- */
|
|
|
|
.search {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.search input[type="search"] {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 0.5rem 0.7rem;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-sm);
|
|
font: inherit;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.search input[type="search"]::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.search button {
|
|
padding: 0.5rem 0.9rem;
|
|
background: var(--surface-2);
|
|
color: var(--text);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-sm);
|
|
font: inherit;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search button:hover {
|
|
background: var(--line);
|
|
}
|
|
|
|
.nav-search {
|
|
justify-self: end;
|
|
width: min(24rem, 100%);
|
|
}
|
|
|
|
.hero-search,
|
|
.page-search {
|
|
margin-top: 1.25rem;
|
|
width: min(34rem, 100%);
|
|
}
|
|
|
|
/* ---- stage panel ------------------------------------------------------- */
|
|
|
|
.stage {
|
|
position: sticky;
|
|
top: 4.6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100vh - 6rem);
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stage-head {
|
|
padding: 0.8rem 1rem;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.stage-title {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.stage-driver {
|
|
margin: 0.2rem 0 0;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.stage-body {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
min-height: 12rem;
|
|
}
|
|
|
|
.stage-empty {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stage-empty-title {
|
|
margin: 0 0 0.35rem;
|
|
color: var(--text-dim);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stage-hint {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stage-foot {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 1rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.stage-foot a {
|
|
border-bottom: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stage-foot a:hover {
|
|
color: var(--link);
|
|
}
|
|
|
|
.frag-head {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.frag-kind {
|
|
margin: 0;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.frag-title {
|
|
margin: 0.15rem 0 0;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.frag-sub {
|
|
margin: 0.2rem 0 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.frag-foot {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
padding-top: 0.7rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.frag-doc {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.frag-links {
|
|
margin: 0;
|
|
padding-left: 1.1rem;
|
|
}
|
|
|
|
.frag-note {
|
|
display: block;
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.frag-text > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.frag-text {
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
.frag-text h2 {
|
|
font-size: 1.05rem;
|
|
margin-top: 1.2rem;
|
|
}
|
|
|
|
.frag-text h3 {
|
|
font-size: 0.98rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ---- pages ------------------------------------------------------------- */
|
|
|
|
.hero {
|
|
padding: clamp(1.5rem, 4vw, 3rem);
|
|
background: linear-gradient(160deg, var(--surface-2), var(--surface) 60%);
|
|
border: 1px solid var(--line);
|
|
border-radius: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
.hero-kicker {
|
|
margin: 0 0 0.6rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.hero-title {
|
|
margin: 0;
|
|
max-width: 30ch;
|
|
font-size: clamp(1.9rem, 4.4vw, 3.2rem);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero-support {
|
|
margin: 0.7rem 0 0;
|
|
font-size: clamp(1rem, 1.6vw, 1.2rem);
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.hero-facts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem 1.1rem;
|
|
margin: 1.2rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.hero-facts span::before {
|
|
content: "▸ ";
|
|
color: var(--line-strong);
|
|
}
|
|
|
|
.pillars {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.pillar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.1rem 1.2rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.pillar:hover {
|
|
border-color: var(--line-strong);
|
|
}
|
|
|
|
.pillar-kicker {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin: 0 0 0.4rem;
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pillar-gutter {
|
|
font-family: var(--font-mono);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.pillar-title {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.pillar-title a {
|
|
color: var(--text);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.pillar-title a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
.pillar-claim {
|
|
margin: 0.5rem 0 0;
|
|
color: var(--text-dim);
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
.pillar-foot {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
margin: auto 0 0;
|
|
padding-top: 0.9rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pillar-go {
|
|
font-weight: 600;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.pillar-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.metrics {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin: 0.8rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
gap: 0.35rem;
|
|
align-items: baseline;
|
|
padding: 0.2rem 0.55rem;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.chip strong {
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chip span {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tech {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
margin: 0.8rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tech li {
|
|
padding: 0.12rem 0.45rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.honesty {
|
|
padding: 1.2rem 1.4rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.honesty h2 {
|
|
margin-top: 0;
|
|
font-size: 1.05rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.honesty ul {
|
|
margin: 0;
|
|
padding-left: 1.1rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.doc-head {
|
|
padding-bottom: 1.1rem;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.doc-kicker {
|
|
margin: 0 0 0.4rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.doc-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.doc-claim {
|
|
margin: 0.6rem 0 0;
|
|
max-width: var(--measure);
|
|
font-size: 1.08rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.doc-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
margin-top: 0.9rem;
|
|
}
|
|
|
|
.chip-plain {
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.doc-evidence,
|
|
.doc-sub,
|
|
.doc-back,
|
|
.doc-timeline {
|
|
padding-top: 1.2rem;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.section-note {
|
|
margin: 0.2rem 0 0.9rem;
|
|
font-size: 0.86rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.drill-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.drill-list li {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
padding: 0.45rem 0.6rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.drill-kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.doc-foot {
|
|
margin-top: 1.5rem;
|
|
padding-top: 0.9rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.doc-foot p {
|
|
margin: 0.15rem 0;
|
|
}
|
|
|
|
/* ---- confidence labels ------------------------------------------------- */
|
|
|
|
.conf {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.04em;
|
|
padding: 0.08rem 0.4rem;
|
|
border: 1px solid currentColor;
|
|
border-radius: var(--radius-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.conf-delivered {
|
|
color: var(--ok);
|
|
}
|
|
|
|
.conf-running {
|
|
color: var(--info);
|
|
}
|
|
|
|
.conf-in-progress {
|
|
color: var(--warn);
|
|
}
|
|
|
|
.conf-abandoned {
|
|
color: var(--bad);
|
|
}
|
|
|
|
.conf-historic {
|
|
color: var(--faded);
|
|
}
|
|
|
|
/* ---- evidence table ---------------------------------------------------- */
|
|
|
|
.evidence {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.evidence caption {
|
|
text-align: left;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.evidence th,
|
|
.evidence td {
|
|
padding: 0.5rem 0.6rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--line);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.evidence thead th {
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
border-bottom: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.evidence tbody tr:hover {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.evidence .kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.evidence-group + .evidence-group {
|
|
margin-top: 1.6rem;
|
|
}
|
|
|
|
.evidence-group h2 {
|
|
font-size: 1rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ---- timeline ---------------------------------------------------------- */
|
|
|
|
.timeline {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-left: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding: 0 0 1.1rem 1.1rem;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -4px;
|
|
top: 0.55rem;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.timeline-period {
|
|
margin: 0;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timeline-body h3 {
|
|
margin: 0.15rem 0 0.3rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.timeline-body p {
|
|
margin: 0 0 0.4rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ---- search results ---------------------------------------------------- */
|
|
|
|
.search-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.search-empty {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.results {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.result {
|
|
padding: 0.9rem 1rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.result h2 {
|
|
margin: 0;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.result-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin: 0.35rem 0;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.result-snippet {
|
|
margin: 0;
|
|
font-size: 0.88rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.result-snippet mark,
|
|
mark {
|
|
background: color-mix(in srgb, var(--accent) 25%, transparent);
|
|
color: var(--text);
|
|
padding: 0 0.15em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ---- prose (server-rendered Markdown) ---------------------------------- */
|
|
|
|
.prose {
|
|
max-width: var(--measure);
|
|
font-size: 1.02rem;
|
|
}
|
|
|
|
.prose > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.prose h2 {
|
|
margin-top: 2rem;
|
|
padding-top: 0.8rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.prose h3 {
|
|
margin-top: 1.5rem;
|
|
font-size: 1.08rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.prose p,
|
|
.prose li {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.prose strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
padding-left: 1.3rem;
|
|
}
|
|
|
|
.prose li + li {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.prose blockquote {
|
|
margin: 1.2rem 0;
|
|
padding: 0.6rem 1rem;
|
|
border-left: 3px solid var(--line-strong);
|
|
background: var(--surface);
|
|
color: var(--text-dim);
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
}
|
|
|
|
.prose code {
|
|
padding: 0.1em 0.35em;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.prose pre {
|
|
margin: 1.2rem 0;
|
|
padding: 0.9rem 1rem;
|
|
overflow-x: auto;
|
|
background: #0d1117;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.prose pre code {
|
|
padding: 0;
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
.prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.2rem 0;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.prose th,
|
|
.prose td {
|
|
padding: 0.45rem 0.6rem;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
|
|
.prose th {
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.prose hr {
|
|
margin: 2rem 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.prose img {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* code exhibits, shared by the panel and the page */
|
|
|
|
figure.code {
|
|
margin: 1rem 0 0;
|
|
background: #0d1117;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
figure.code figcaption {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.6rem;
|
|
padding: 0.45rem 0.7rem;
|
|
border-bottom: 1px solid var(--line);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
figure.code .code-lang {
|
|
color: var(--accent);
|
|
}
|
|
|
|
figure.code pre {
|
|
margin: 0;
|
|
padding: 0.8rem 0.9rem;
|
|
overflow-x: auto;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
figure.media {
|
|
margin: 0;
|
|
}
|
|
|
|
figure.media figcaption {
|
|
margin-top: 0.4rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ---- footer ------------------------------------------------------------ */
|
|
|
|
.footer {
|
|
max-width: 96rem;
|
|
margin: 0 auto;
|
|
padding: 1.6rem var(--pad) 2.4rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.84rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.footer p {
|
|
margin: 0.35rem 0;
|
|
}
|
|
|
|
.footer-line {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-copy {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
/* ---- responsive: nav collapses below 900 px ---------------------------- */
|
|
|
|
@media (max-width: 1180px) {
|
|
.shell {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.stage {
|
|
position: static;
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.topbar {
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas:
|
|
"brand toggle"
|
|
"search search";
|
|
row-gap: 0.6rem;
|
|
}
|
|
|
|
.brand {
|
|
grid-area: brand;
|
|
}
|
|
|
|
.nav-search {
|
|
grid-area: search;
|
|
width: 100%;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.nav-rail {
|
|
display: none;
|
|
}
|
|
|
|
.nav-disclosure {
|
|
grid-area: toggle;
|
|
display: block;
|
|
position: relative;
|
|
justify-self: end;
|
|
}
|
|
|
|
.nav-toggle {
|
|
padding: 0.45rem 0.8rem;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-toggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.nav-disclosure[open] .nav {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 0.4rem);
|
|
z-index: 30;
|
|
display: grid;
|
|
min-width: 15rem;
|
|
padding: 0.4rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
|
|
}
|
|
|
|
.nav-disclosure .nav {
|
|
display: none;
|
|
}
|
|
|
|
.nav-disclosure[open] .nav {
|
|
display: grid;
|
|
}
|
|
|
|
.nav-link {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.pillars {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.evidence thead {
|
|
display: none;
|
|
}
|
|
|
|
.evidence tr {
|
|
display: grid;
|
|
gap: 0.15rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.evidence td {
|
|
border: 0;
|
|
padding: 0.1rem 0;
|
|
}
|
|
|
|
.timeline {
|
|
border-left: 0;
|
|
}
|
|
|
|
.timeline-item {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ---- print ------------------------------------------------------------- */
|
|
|
|
@media print {
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
|
|
body {
|
|
background: #fff;
|
|
color: #111;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.topbar,
|
|
.nav,
|
|
.nav-disclosure,
|
|
.stage,
|
|
.search,
|
|
.skip-link,
|
|
.footer-links,
|
|
.hero-search,
|
|
.page-search {
|
|
display: none !important;
|
|
}
|
|
|
|
.shell {
|
|
display: block;
|
|
padding: 0;
|
|
}
|
|
|
|
.main {
|
|
max-width: none;
|
|
}
|
|
|
|
.hero,
|
|
.pillar,
|
|
.result,
|
|
.honesty,
|
|
.drill-list li,
|
|
.stage,
|
|
.prose blockquote {
|
|
background: #fff;
|
|
border-color: #bbb;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
.prose strong,
|
|
.doc-title {
|
|
color: #000;
|
|
}
|
|
|
|
.prose p,
|
|
.prose li,
|
|
.doc-claim,
|
|
.pillar-claim,
|
|
.timeline-body p,
|
|
.result-snippet {
|
|
color: #222;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* Print the destination of a link, so a paper copy keeps its evidence. */
|
|
.prose a[href^="/"]::after,
|
|
.evidence a[href^="/"]::after,
|
|
.drill-list a[href^="/"]::after {
|
|
content: " (" attr(href) ")";
|
|
font-family: var(--font-mono);
|
|
font-size: 8pt;
|
|
color: #555;
|
|
}
|
|
|
|
.prose h2 {
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
.pillar,
|
|
.timeline-item,
|
|
.result,
|
|
.evidence tr {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.conf {
|
|
border-color: #999;
|
|
color: #000;
|
|
}
|
|
|
|
figure.code pre,
|
|
.prose pre {
|
|
background: #f6f6f6;
|
|
border: 1px solid #ccc;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid #bbb;
|
|
color: #333;
|
|
}
|
|
}
|