/* ============================================================
Partners page — quieter reference-page counterpart to the
landing page. Same tokens, smaller type scale, more air.
Categories are CSS-only radio tabs: no JavaScript.
To add a category: one , one .ptab-panel.
To add a partner: one .partner-row inside a panel.
============================================================ */
/* ---- Shared header hardening ------------------------------
The wordmark must never absorb the overflow: without this the
global `img { max-width:100% }` lets it collapse to a smear
before the nav gives up any width. Applies to both pages. */
.topnav__inner { gap: 32px; }
.topnav__logo { flex-shrink: 0; }
.topnav__logo img { flex-shrink: 0; max-width: none; }
.topnav__links { flex-shrink: 1; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.topnav__cta { flex-shrink: 0; }
/* ---- Quiet utility links in the top nav ------------------- */
.topnav__links a.quiet { color: var(--fg-quiet); }
.topnav__links a.quiet:hover { color: var(--action-blue); }
.topnav__links a.is-current { color: var(--action-blue); }
/* ---- Page masthead --------------------------------------- */
.pmast { padding: 72px 0 56px; }
.pmast__eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-mono); font-size: 13px;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--fg-quiet);
margin-bottom: 28px;
}
.pmast__eyebrow::before, .pmast__eyebrow::after {
content: ''; display: inline-block;
width: 32px; height: 1px; background: var(--fg-quiet);
}
.pmast h1 {
font-size: 64px; font-weight: 400;
line-height: 1.05; letter-spacing: -2px;
max-width: 900px; margin-bottom: 28px;
text-wrap: balance;
}
.pmast h1 em { font-style: normal; font-weight: 700; color: var(--action-blue); }
.pmast__lead {
font-size: 21px; font-weight: 300; line-height: 1.6;
color: var(--fg); max-width: 620px;
}
/* ---- Category tabs (pure CSS) ----------------------------
Each radio sits immediately before its own label. Both the active
tab and the visible panel are matched with :has() on .ptabs —
sibling combinators off :checked compute stale on some engines. */
.ptabs { padding-bottom: 120px; }
.ptabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ptabs__bar {
display: flex; flex-wrap: wrap; gap: 8px;
border-bottom: 1px solid rgba(42,42,42,0.12);
padding-bottom: 0;
margin-bottom: 8px;
}
.ptabs__bar label {
display: inline-flex; align-items: baseline; gap: 9px;
padding: 14px 22px;
font-size: 15px; font-weight: 500; letter-spacing: 0.2px;
color: var(--fg-quiet);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
user-select: none;
}
.ptabs__bar label:hover { color: var(--fg); }
.ptabs__bar label .count {
font-family: var(--font-mono); font-size: 11.5px;
color: var(--fg-faint);
}
.ptabs__radio:focus-visible + label { outline: 2px solid var(--action-blue); outline-offset: 3px; }
/* Active tab. :has() on the ancestor is the only shape that invalidates
reliably here — both `~ .bar label` and `:checked + label` compute stale. */
.ptabs:has(#cat-automation:checked) label[for="cat-automation"],
.ptabs:has(#cat-quality:checked) label[for="cat-quality"],
.ptabs:has(#cat-services:checked) label[for="cat-services"] {
color: var(--fg); border-bottom-color: var(--action-blue);
}
.ptabs:has(#cat-automation:checked) label[for="cat-automation"] .count,
.ptabs:has(#cat-quality:checked) label[for="cat-quality"] .count,
.ptabs:has(#cat-services:checked) label[for="cat-services"] .count {
color: var(--action-blue);
}
.ptab-panel { display: none; }
.ptabs:has(#cat-automation:checked) .ptab-panel--automation,
.ptabs:has(#cat-quality:checked) .ptab-panel--quality,
.ptabs:has(#cat-services:checked) .ptab-panel--services { display: block; }
/* ---- Category blurb -------------------------------------- */
.ptab-panel__note {
font-size: 15px; font-weight: 300; line-height: 1.6;
color: var(--fg-quiet);
max-width: 560px;
padding: 26px 0 4px;
}
/* ---- Partner row ----------------------------------------- */
.partner-row {
display: grid;
grid-template-columns: 220px 1fr 150px;
gap: 48px;
padding: 40px 0;
border-top: 1px solid rgba(42,42,42,0.12);
align-items: start;
}
.partner-row:last-child { border-bottom: 1px solid rgba(42,42,42,0.12); }
.partner-row__mark { padding-top: 4px; }
.partner-row__mark img {
height: 38px; width: auto; max-width: 190px;
object-fit: contain; object-position: left center;
}
.partner-row__cat {
display: block;
font-family: var(--font-mono); font-size: 11.5px;
letter-spacing: 1.3px; text-transform: uppercase;
color: var(--fg-faint);
margin-top: 18px;
}
.partner-row h3 {
font-size: 26px; font-weight: 700;
letter-spacing: -0.4px;
margin-bottom: 14px;
}
.partner-row__line {
font-size: 18px; font-weight: 300; line-height: 1.6;
color: var(--fg);
max-width: 620px;
margin-bottom: 18px;
}
.partner-row__body {
font-size: 15.5px; font-weight: 300; line-height: 1.7;
color: var(--fg-quiet);
max-width: 620px;
margin-bottom: 20px;
}
.partner-row__with {
border-top: 1px solid var(--border);
padding-top: 18px;
max-width: 620px;
}
.partner-row__with dt {
font-family: var(--font-mono); font-size: 11.5px;
letter-spacing: 1.3px; text-transform: uppercase;
color: var(--fg-quiet);
margin-bottom: 8px;
}
.partner-row__with dd {
margin: 0;
font-size: 15.5px; font-weight: 300; line-height: 1.7;
color: var(--fg);
}
.partner-row__link {
font-size: 13.5px; font-weight: 500;
color: var(--action-blue);
display: inline-flex; gap: 6px; align-items: center;
white-space: nowrap;
padding-top: 6px;
}
.partner-row__link:hover { color: var(--brand-blue-deep); }
.partner-row__link .arrow { transition: transform .25s var(--ease); }
.partner-row__link:hover .arrow { transform: translateX(3px); }
/* Provisional copy — replace and delete the class. */
.needs-copy {
color: var(--fg-faint);
border-left: 2px dashed var(--border-strong);
padding-left: 14px;
}
/* ---- Empty category -------------------------------------- */
.ptab-empty {
border-top: 1px solid rgba(42,42,42,0.12);
padding: 72px 0 64px;
}
.ptab-empty p {
font-size: 18px; font-weight: 300; line-height: 1.6;
color: var(--fg-quiet);
max-width: 560px;
margin-bottom: 20px;
}
/* ---- Closing CTA ----------------------------------------- */
.pcta { background: #fff; padding: 110px 0; }
.pcta__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: start;
}
.pcta h2 {
font-size: 42px; font-weight: 400;
line-height: 1.1; letter-spacing: -1px;
max-width: 460px;
}
.pcta h2 em { font-style: normal; font-weight: 700; color: var(--action-blue); }
.pcta__col p {
font-size: 17px; font-weight: 300; line-height: 1.7;
color: var(--fg); max-width: 480px;
margin-bottom: 24px;
}
.pcta__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* bTrade supplied a white-on-dark wordmark while the other two partners
supplied light-background marks. Until a dark-on-light variant exists,
that one mark gets the dark plate it was drawn for. The logo itself is
never inverted or recolored. Delete the class once the asset is swapped. */
.mark-ondark {
background: #132031;
padding: 9px 15px;
border-radius: 8px;
box-sizing: content-box;
}
/* The plated mark takes the strip's fade like every other mark — the
wordmark's contrast is internal to the chip, so it survives the
opacity. Only the chip's box shrinks, to match the 30px mark height. */
.pstrip__marks img.mark-ondark { height: 20px; padding: 5px 12px; }
/* ---- Homepage partner strip ------------------------------ */
.pstrip { padding: 80px 0; }
.pstrip__inner {
border-top: 1px solid rgba(42,42,42,0.12);
border-bottom: 1px solid rgba(42,42,42,0.12);
/* longhand only — the `padding` shorthand would wipe .wrap's 0 32px inset */
padding-top: 34px;
padding-bottom: 34px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 32px;
}
.pstrip__label {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--fg-quiet);
white-space: nowrap;
}
.pstrip__marks { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.pstrip__marks img {
height: 30px; width: auto; max-width: 150px;
object-fit: contain;
opacity: 0.55;
filter: saturate(0);
transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.pstrip__marks img.lg {
height:39px;
}
.pstrip__marks img:hover { opacity: 1; filter: none; }
.pstrip__link {
font-size: 13.5px; font-weight: 500;
color: var(--action-blue);
display: inline-flex; gap: 6px; align-items: center;
white-space: nowrap;
}
.pstrip__link .arrow { transition: transform .25s var(--ease); }
.pstrip__link:hover .arrow { transform: translateX(3px); }