Sam Rolfe
6ac0e1ff47
- Diagrams carry a print style block, so they print as ink on white rather than as dark panels; the client wall and the chips go white with a hairline. - docs/phase-7-notes.md records what batch 1 shipped, how to add a mark or an image, and the Lighthouse measurements taken after the batch (100/100/100/100, CLS 0, mobile and desktop). (cherry picked from commit ae9282e5f62b8c7ee149ebf96f8d3f00067a49e2)
1467 lines
23 KiB
CSS
1467 lines
23 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 ------------------------------------------------------------ */
|
|
|
|
/*
|
|
Two rows: the name and the search on the first, the six areas plus the index
|
|
on the second. The area names are long and the marks made them longer, so a
|
|
single row either overlapped the search form or scrolled the nav out of
|
|
reach. Two rows give every link a real target at every width.
|
|
*/
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
display: grid;
|
|
grid-template-columns: var(--nav-w) minmax(0, 1fr);
|
|
grid-template-areas:
|
|
"brand search"
|
|
"nav nav";
|
|
gap: 0.5rem 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 {
|
|
grid-area: brand;
|
|
}
|
|
|
|
.nav-search {
|
|
grid-area: search;
|
|
justify-self: end;
|
|
width: min(28rem, 100%);
|
|
}
|
|
|
|
.nav-rail {
|
|
grid-area: nav;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* The area mark replaces the old two-letter badge. It is decoration; the nav
|
|
label beside it is the accessible name. */
|
|
.nav-mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.nav-link:hover .nav-mark,
|
|
.nav-current .nav-mark {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.area-icon {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* ---- 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-mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
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-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.14rem 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);
|
|
}
|
|
|
|
/* Monochrome and currentColor, so the chip and the mark share one colour and
|
|
no icon ever adds a request. */
|
|
.tech-mark {
|
|
display: block;
|
|
flex: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: currentColor;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.tech-chip:hover {
|
|
border-color: var(--line-strong);
|
|
color: var(--text);
|
|
}
|
|
|
|
.tech-chip:hover .tech-mark {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ---- client wall ------------------------------------------------------- */
|
|
/*
|
|
One typeface, one size, one tile. Mixed brand marks would read as broken;
|
|
a consistent grid reads as deliberate. Tiles are the same height whatever
|
|
the length of the name, so the wall never looks like a failed image load.
|
|
*/
|
|
.client-wall {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
|
|
gap: 1px;
|
|
margin: 1rem 0 1.6rem;
|
|
padding: 1px;
|
|
background: var(--line);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
list-style: none;
|
|
}
|
|
|
|
.client-tile {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 4.2rem;
|
|
padding: 0.6rem 0.75rem;
|
|
background: var(--surface);
|
|
text-align: center;
|
|
}
|
|
|
|
.client-name {
|
|
font-size: 0.88rem;
|
|
line-height: 1.25;
|
|
letter-spacing: 0.01em;
|
|
color: var(--text-dim);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.client-tile:hover .client-name {
|
|
color: var(--text);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.search-areas {
|
|
margin: 0.6rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem 1.1rem;
|
|
}
|
|
|
|
.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,
|
|
.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;
|
|
}
|
|
|
|
/* The wall and the chips are surfaces, not decoration: on paper they go
|
|
white with a hairline, and the marks keep their shape in one ink. */
|
|
.client-wall {
|
|
background: #bbb;
|
|
border-color: #bbb;
|
|
}
|
|
|
|
.client-tile,
|
|
.tech-chip {
|
|
background: #fff;
|
|
border-color: #bbb;
|
|
}
|
|
|
|
.client-name,
|
|
.tech-chip {
|
|
color: #111;
|
|
}
|
|
|
|
.nav-mark,
|
|
.pillar-mark {
|
|
color: #000;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|