/* Peptide Corpus — partner portal page layer
==================================================================================================
WHAT THIS IS. The page layer for the seven partner screens, in the same role that web/site.css
plays for the landing page and web/doc.css plays for the 800 generated pages: the design system
in design/ supplies the tokens and the primitives, and this file supplies the arrangements that
only these screens need.
NOTHING HERE IS A NEW COLOUR. Every value resolves through a semantic token from
design/tokens/colors.css, so both themes hold with no [data-theme="dark"] branch in this file.
No token was added; nothing in design/ was edited.
── The pt- prefix, and why every class carries it ────────────────────────────────────────────
Three of these screens are www pages and therefore already have doc.css: /partners, and the two
states of the demo frame. Those use the real .wrap / .doc / .card / .btn / .site-head /
.site-foot from doc.css, exactly as the demo does today — copying rather than reinventing, per
the brief. The other four are portal-host pages with no doc.css at all, and are self-contained
the way app/signin.html is.
So this file must be ADDITIVE on one host and SELF-SUFFICIENT on the other, which it can only be
if it never redefines a name doc.css owns. Hence pt-. In particular .pt-btn is a second button
class and that is deliberate, not an oversight: it is the button for the portal host, drawn from
the same tokens as doc.css's .btn so the two are indistinguishable on screen. If the portal ends
up sharing doc.css after all, delete .pt-btn and use .btn — do not leave both live on one page.
── Not defined here, on purpose ──────────────────────────────────────────────────────────────
Every .pc-* class. The demo's rank cards, its rail, its sortbar and its ledger belong to
web/doc.css and are in use. The demo frame links doc.css and inherits them untouched; this file
frames the demo and does not reach inside it.
================================================================================================== */
/* ── The two lockups ──────────────────────────────────────────────────────────────────────────
BOTH ARE THE SAME MARK PLUS HTML TEXT, and that is deliberate rather than lazy.
`brand/peptide-corpus-logo-*.svg` is the canonical lockup and the right file for a PNG export,
an email or a slide. In a page it is the wrong tool: it is a fixed two-colour artwork, so it
needs one file per theme and it cannot inherit --accent. The header already solved this — the
mark is inline SVG taking `fill: var(--accent)`, the words are real text — so the wordmark
themes, scales with the type ramp, and stays selectable and searchable.
PerfectCart gets the identical treatment. It does NOT get a mark of its own: one geometry
across the family is the point, and the previous logos/perfectcart.png was a raster with a dark
background baked in, which read as a dark tile dropped onto a light page. */
.pt-lockup { display: inline-flex; align-items: center; gap: var(--space-3); }
.pt-lockup .brand-mark { width: 34px; height: 34px; flex: none; }
.pt-lockup .mark-bg { fill: var(--accent); }
.pt-lockup .mark-tri {
fill: none; stroke: var(--on-accent); stroke-width: 8;
stroke-linejoin: round; stroke-linecap: round;
}
.pt-lockup-words { display: grid; gap: 1px; }
.pt-lockup-name {
font-size: var(--text-xl); font-weight: var(--weight-extrabold);
letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--text);
}
.pt-lockup-name b { color: var(--accent); font-weight: var(--weight-extrabold); }
/* The endorsement line. --text-subtle would fail contrast on --bg and colors.css reserves it for
decoration, so this takes --text-muted and earns its quietness from size and tracking instead. */
.pt-lockup-by {
font-size: var(--text-2xs); font-weight: var(--weight-extrabold);
letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
.pt-lockup-lg .brand-mark { width: 44px; height: 44px; }
.pt-lockup-lg .pt-lockup-name { font-size: var(--text-2xl); }
/* ── Shared primitives for the portal host ────────────────────────────────────────────────────
The portal has no doc.css, so it needs its own wrap, button and card. Same tokens, same shapes
and the same radii as the public side; a partner moving between the two should not be able to
tell which host drew the page. */
.pt-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 36px); }
.pt-narrow { max-width: 880px; }
/* doc.css's .sr-only and .skip, under pt- names because the portal host does not load doc.css.
The three www screens use the doc.css originals; only the portal screens use these. */
.pt-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;
}
.pt-skip {
position: absolute; left: var(--space-3); top: -60px; z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pt-skip:focus { top: var(--space-3); }
.pt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--control-h-lg); padding: 0 var(--space-5);
border: 1px solid transparent; border-radius: var(--radius-sm);
font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-bold);
cursor: pointer; text-align: center;
transition: background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.pt-btn:hover { text-decoration: none; }
.pt-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pt-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pt-btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.pt-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.pt-btn-sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.pt-btn-block { width: 100%; }
.pt-btn[disabled] { opacity: .6; cursor: not-allowed; }
.pt-link {
color: var(--accent); font-weight: var(--weight-semibold);
text-decoration: underline; text-underline-offset: 2px;
}
/* "Forgot your password?" is a button, not a link — it sends the reset mail from this page rather
than navigating. It has to LOOK like a link, so the button chrome comes off explicitly. */
button.pt-link {
padding: 0; border: 0; background: none; font: inherit;
font-size: var(--text-xs); cursor: pointer;
}
button.pt-link[disabled] { opacity: .6; cursor: not-allowed; }
/* A stated absence, which on this product is a value and not an empty cell. Dashed, quiet, and
never mistaken for a filled field — see rule 7 in AGENTS.md. */
.pt-absent {
display: inline-flex; align-items: center;
padding: 2px var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted);
}
/* yes / no in the comparison table.
NEITHER IS A HUE, and both of the obvious choices were measured and rejected:
--success on --bg 3.29:1 green "yes". Under the 4.5:1 AA floor in LIGHT mode, and there is
no --success-text the way there is a --warning-text.
--text-subtle 3.44:1 grey "no". Also under it, and colors.css says outright that
--text-subtle is decoration only and meaningful small print
belongs on --text-muted. A cell in a pricing table is meaningful.
So the pair is weight and tone instead: "yes" at full strength, "no" one step back. The words
carry the meaning on their own, the partner column is already tinted by the rule below, and the
table survives forced colours and anyone who cannot separate hues. */
/* A MARK, WITH THE WORD STILL THERE FOR ANYTHING THAT IS NOT LOOKING. Eleven rows of the words
"yes" and "no" is eleven rows a reader has to actually read; a tick and a cross are scanned in
one pass down the column, which is the only reason this table exists. The word stays in the
cell as .pt-sr-only text, so a screen reader hears "yes" and not the name of a glyph — and a
mark drawn with a mask has no alt text to lose. */
.pt-yes::after, .pt-no::after {
content: ""; display: inline-block; width: 16px; height: 16px;
vertical-align: -.18em; background: currentColor;
mask: var(--pt-mark) center / contain no-repeat;
-webkit-mask: var(--pt-mark) center / contain no-repeat;
}
.pt-yes { color: var(--accent); font-weight: var(--weight-bold);
--pt-mark: url('data:image/svg+xml,'); }
.pt-no { color: var(--text-subtle); font-weight: var(--weight-regular); --pt-mark: var(--ico-x); }
/* ==================================================================================================
PUBLIC PAGE — /partners
Additive over doc.css. Only the pieces that page needs and no other page has.
================================================================================================== */
/* The two hero buttons. A row on desktop, a stack on a phone, and the stack is full width so the
invite-code door is not a 40%-wide target at 360px. */
.pt-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
@media (max-width: 420px) {
.pt-cta-row { display: grid; }
.pt-cta-row > .btn, .pt-cta-row > .pt-btn { width: 100%; }
}
/* The price, stated once as a band rather than buried in a paragraph. Three figures, three cells,
so a vendor scanning for "what does this cost" finds it in one pass. */
.pt-price {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-3); margin: var(--space-8) 0;
padding: var(--space-5); background: var(--surface);
border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
}
.pt-price div { min-width: 0; }
.pt-price b {
display: block; font-family: var(--font-mono); font-size: var(--text-2xl);
font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.pt-price span { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
/* Listed vs Partner. Two narrow value columns and one wide label column, fixed rather than
auto, so "yes"/"no" line up as columns instead of drifting with the label above them. */
.pt-compare { table-layout: fixed; min-width: 460px; }
.pt-compare th:first-child, .pt-compare td:first-child { width: auto; }
.pt-compare th:not(:first-child), .pt-compare td:not(:first-child) { width: 92px; text-align: center; }
.pt-compare tbody th { font-weight: var(--weight-medium); }
/* The partner column is the one being sold; a tint marks it without adding a colour. */
.pt-compare th:last-child, .pt-compare td:last-child { background: var(--selected-tint); }
/* Row labels WRAP. doc.css sets `white-space: nowrap` on every `.doc th`, which is right for the
two column heads and wrong for the eleven row heads under them: "Buyer age-confirmed and agreed
to your terms" cannot fit 276px on one line, so it ran under the tick beside it. */
.pt-compare tbody th { white-space: normal; }
/* BOTH COLUMNS, OR THE TABLE ARGUES ONE SIDE. The 460px floor put the Partner column — the one
being sold — to start at x=387 on a 375px screen, off the edge, reachable only by a sideways
drag nothing signalled. A reader saw a list of features and one column of ticks, which reads as
"listed already does this". Narrow value columns cost a few pixels of tick; a column the reader
never finds costs the comparison. */
@media (max-width: 560px) {
.pt-compare { min-width: 0; }
/* 74px is measured, not chosen: "Partner" sets its own column, and doc.css keeps a column head on
one line, so the floor is that word (62px) plus the padding either side. Declaring anything
narrower under `table-layout: fixed` does not narrow the table — the head overflows and the
scroller gets it back as a sideways drag, which is the bug this rule is here to remove. */
.pt-compare th:not(:first-child), .pt-compare td:not(:first-child) { width: 74px; padding-inline: 5px; }
.pt-compare tbody th { padding-inline: 8px; }
}
/* The four ways to connect. Each is a card with a number, a claim, and — the point of the
section — what it PROVES, which is a different field from what it costs you. */
.pt-shapes { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
/* min-width: 0 because these are grid items. Without it a grid item is at least its min-content
wide, and the nowrap tag on card three pushed the whole COLUMN — and therefore all four cards —
14px past the viewport at 360. */
.pt-shape {
min-width: 0;
padding: var(--space-5); background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* Wraps, so the "where most partners will sit" tag drops under the heading on a phone instead of
sitting beside it and widening the card. */
.pt-shape > h3 {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold);
}
.pt-shape > h3 > i {
flex: none; font-style: normal; font-family: var(--font-mono);
font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* The glyph sits on a flex row set to align-items: baseline, and a box with no text in it has no
useful baseline — it would hang below the numeral. Centred against the heading instead. */
.pt-shape > h3 > .pt-glyph { align-self: center; }
.pt-shape p { margin: 0 0 var(--space-3); max-width: 62ch; }
/* Label left, value right, on a grid rather than a run of sentences — "You do" and "Proves" are
the two comparable facts across all four shapes and they have to line up to be compared. */
.pt-shape dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.pt-shape dt {
font-size: var(--text-xs); font-weight: var(--weight-extrabold);
text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
padding-top: 2px;
}
.pt-shape dd { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); }
@media (max-width: 520px) {
.pt-shape dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1) 0; }
.pt-shape dd { margin-bottom: var(--space-3); }
.pt-shape dd:last-child { margin-bottom: 0; }
}
/* Where most partners will sit. One card marked, for the same reason only the winner's total goes
green on a rank card: a mark every card carries is decoration. */
.pt-shape.is-common { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.pt-shape-tag {
display: inline-flex; align-items: center; margin-left: auto;
padding: 3px var(--space-2); border-radius: var(--radius-pill);
background: var(--accent); color: var(--on-accent);
font-size: var(--text-2xs); font-weight: var(--weight-extrabold);
text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap;
}
/* ── What sits behind the basket ──────────────────────────────────────────────────────────────
A card grid, because the argument here is BREADTH — six things a competitor's directory does not
have — and breadth reads as a grid and does not read as a paragraph. Three across on a wide
screen, two on a tablet, one on a phone.
THE STATUS PILL IS THE LOAD-BEARING PART. docs/pro-launch-plan.md exists because a card once
sold eight features of which one existed. Everything on this grid is live; everything not live
is in the dimmed list below it, labelled, in the same treatment site.css uses for .plan-soon.
If you add a card here, it ships today or it goes in the list. */
/* BREAKS OUT OF THE PROSE COLUMN, the same way and by the same arithmetic as .pc-shell in doc.css.
`.wrap.doc` is 860px because that is a comfortable measure for sentences; eight cards inside it
give three columns and a lone orphan on row three. At the full 1160 they land four and four. */
/* ONE, TWO OR FOUR COLUMNS, NEVER THREE, and that is the whole reason this is not auto-fit.
There are eight cards. auto-fit picked three at around 1024px and left a two-card orphan row
with a hole in it. Every count here divides eight, so the grid is always complete: 4+4, 2+2+2+2,
or a single column. If a ninth card is ever added, this rule has to be revisited — that is the
cost of pinning the counts, and it is worth it. */
.pt-stack {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: var(--space-3); margin: var(--space-6) 0;
width: min(1160px, calc(100vw - 2 * clamp(18px, 4vw, 36px)));
margin-inline: calc((100% - min(1160px, 100vw - 2 * clamp(18px, 4vw, 36px))) / 2);
}
@media (min-width: 620px) { .pt-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .pt-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Flex column, not grid, so the status pill can be pushed to the bottom with margin-top: auto.
Grid items stretch to the tallest in the row, so the pills then sit on one baseline across the
row instead of floating at whatever height each card's prose happens to end. */
.pt-stackcard {
min-width: 0; padding: var(--space-5);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
}
/* The glyph. A tinted square rather than a bare icon: at 16px on a white card an outline icon
reads as a smudge, and the square gives it a ground without adding a colour. */
.pt-stackcard-ico {
width: 34px; height: 34px; flex: none; display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent);
}
.pt-stackcard-ico::before {
content: ""; width: 17px; height: 17px; background: currentColor;
mask: var(--pt-ico) center / contain no-repeat;
-webkit-mask: var(--pt-ico) center / contain no-repeat;
}
/* An inline