/* agency-pro.css — the look for the Pro (dealer/agency) side.
*
* CONSUMERS
* A. www/agency/index-content.php — the recruitment pitch, itself rendered in two places:
* 1. /agency/ via www/agency/index.php (retail domain)
* 2. the HOME PAGE of silkcardspro.com, via the `if ($is_pro_domain)` branch in
* www/index.php:30, www/index-v2.php:32 and www/index-photos.php:31.
* B. www/agency/partner.php — the membership-tier detail behind the pitch ($page_css).
* C. inc/page/pro-closing.php — the shared closing block both of the above end with.
*
* ⚠️ THAT IS WHY (A) LINKS THIS SHEET ITSELF rather than relying on $page_css.
* header-v2.php loads exactly two sheets: henry_common.css (always) and css/$page_css
* (varies) — and (A)'s four consumers set THREE different $page_css values
* (agency-pro.css, henry_home_cool.css, henry_home_photos.css). There is no single
* $page_css slot that block could occupy, so it carries a guarded and every
* consumer — including one nobody has written yet — inherits the look without being
* edited. The guard is what keeps /agency/ from requesting this sheet twice.
*
* ⭐ AND THE PRO BRANCH *IS* TESTABLE FROM THIS BOX. An earlier version of this header
* said it was not. That was wrong, and wrong in the direction that ships a whole branch
* unverified. config.php:70 sets $is_pro_domain from a substring test for "pro" on
* SERVER_NAME, and Apache sets no UseCanonicalName, so SERVER_NAME follows the Host
* header: curl -H "Host: henrypro.silkcards.com" http://localhost:8080/
* Measured 2026-08-21: HTTP 200, SilkCards Pro …, this sheet present in the
* Pro homepage's link list. Full mechanism, control and limits: GOTCHAS #325.
*
* ASSUMES: henry_common.css is already loaded (header-v2.php:158, unconditional). Every
* token below (--gold, --ink, --body, --line, --soft, --max, --radius-*, --font) and every
* class this markup reuses (.btn, .btn-dark, .btn-outline-dark, .btn-row, .eyebrow, .lead,
* .center) is defined there. If that ever stops being true, this sheet renders unstyled
* text rather than breaking — but the buttons lose their shape, which is visible.
*
* NAMESPACE: every selector this file OWNS is prefixed .ap- (agency pro). Nothing here
* restyles a class defined elsewhere — that is the standing rule about not styling classes
* you do not own, and it matters doubly here because this sheet loads on the Pro homepage
* alongside henry_home_cool.css.
*/
/* Screen-reader-only text — a heading that names a section for assistive technology without
drawing anything. Two sections here have no visible heading in the copy (the copy is a
deliverable and inventing a visible one is not this port's job), so their elements
point aria-labelledby at one of these.
⚠️ THIS IS THE SITE'S FOURTH COPY OF THIS RULE and that is a real, filed problem, not a
choice made here. .sr-only is already defined independently in henry_app.css,
henry_overview_v2.css and shogun-font-awesome.min.css — so it drifts by construction, and
any page loading none of them renders sr-only text as ORDINARY VISIBLE TEXT. It belongs
single-homed in henry_common.css, which every v2 page loads unconditionally.
It is NOT moved there in this change because that is a site-wide sheet edit and this is a
page port — the fix belongs to the surface it changes. Filed for its own pass, together
with the open question of whether www/product.php:1244's sr-only
is affected (none of
the six sheets a product page loads defines .sr-only; the branch did not render on the one
product probed, so it is latent rather than confirmed).
Copied byte-for-byte from henry_app.css so the four copies at least agree today. */
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The block's outer wrapper. It carries a real rule rather than being a bare hook, because
class-check.php flags any class the sheets do not define and a permanently-flagged name
trains the next reader to skim that report. It is also the scope every selector below
could be nested under if this sheet ever has to coexist with a page that owns .ap-*. */
.ap-page {
font-family: var(--font);
color: var(--body);
}
/* ── Section rhythm ─────────────────────────────────────────────────────────── */
.ap-section {
padding: clamp(56px, 7vw, 104px) 24px;
}
.ap-section--soft { background: var(--soft); }
.ap-section--tight { padding-top: 0; }
.ap-wrap {
max-width: var(--max);
margin: 0 auto;
}
.ap-wrap--narrow { max-width: 860px; }
/* ── Hero ───────────────────────────────────────────────────────────────────── */
.ap-hero {
background: var(--cream);
padding: clamp(64px, 8vw, 116px) 24px clamp(48px, 6vw, 84px);
text-align: center;
}
.ap-hero h1 {
font-size: clamp(30px, 4.2vw, 54px);
line-height: 1.12;
color: var(--ink);
max-width: 16ch;
margin: 0 auto;
}
.ap-hero .lead { margin-left: auto; margin-right: auto; }
.ap-hero .btn-row { justify-content: center; }
/* The strap line under the hero CTA — three short phrases, one rhythm. */
.ap-strap {
margin-top: clamp(32px, 4vw, 52px);
padding-top: 26px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px clamp(20px, 4vw, 48px);
font-size: clamp(15px, 1.4vw, 19px);
font-weight: 700;
color: var(--ink);
}
/* ── Split: a photograph beside a paragraph ─────────────────────────────────── */
.ap-split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(28px, 4vw, 64px);
}
.ap-split--flip .ap-split-media { order: 2; }
.ap-split-media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.ap-split-body p {
color: var(--body);
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.7;
margin: 0 0 18px;
}
.ap-split-body p:last-child { margin-bottom: 0; }
.ap-split-body em { font-style: italic; font-weight: 700; color: var(--ink); }
/* ── A statement line on its own ────────────────────────────────────────────── */
.ap-statement h2 {
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.3;
color: var(--ink);
margin: 0;
}
/* ⚠️ THE 19px FLOOR IS LOAD-BEARING, NOT TASTE. This line carries the .ap-statement em
accent below, which resolves to --blue-dark at 3.51:1 on this ground. WCAG AA holds
NORMAL text to 4.5:1 and LARGE text to 3:1, where "large" is >=24px, or >=18.66px when
bold. This text is bold, so at >=18.66px it is large text and 3.51 passes; below that it
is normal text and 3.51 fails.
The clamp was originally `clamp(17px, 1.7vw, 23px)` and I wrote a comment claiming it was
held to the 3:1 floor "because it is large text (>=24px)". That was wrong twice over — it
never reaches 24px, and at 375px it resolved to 17px, i.e. NORMAL text failing 4.5.
Measured, not reasoned: the sweep reported "Make More Money." at 3.51 against a 4.5 floor
at 375px wide. Raising the floor to 19px makes it large text at EVERY width, so the same
colour clears the 3:1 bar everywhere instead of only on desktop. */
.ap-statement p {
margin: 18px 0 0;
font-size: clamp(19px, 1.7vw, 23px);
font-style: italic;
font-weight: 700;
color: var(--ink);
}
/* The accent half of a statement headline. The legacy pages did this with an inline
— a hand-picked cyan that is not a palette token. --blue-dark
is the site's own link/accent colour and is what every other new-look page uses.
⚠️ It measures 3.79:1 on white (3.51 on the --soft ground this sits on), under the 4.5
WCAG AA floor for NORMAL text. That is a KNOWN, FILED, SITE-WIDE token problem —
design-help.php measures the identical 3.79 on the same token — not something introduced
here, and it is deliberately not "fixed" locally: a one-page override would leave the
same colour failing everywhere else while looking solved. Darkening a brand-adjacent
token is the owner's call.
⭐ WHAT *IS* FIXED HERE is the size, which is ours: the 19px floor on .ap-statement p
above keeps this bold text at or above the 18.66px LARGE-text threshold at every width,
where the applicable floor is 3:1 and 3.51 clears it. Do not lower that floor without
re-measuring — it is the only reason this accent is compliant. */
.ap-statement em {
font-style: italic;
color: var(--blue-dark);
}
/* ── Banner: photo with the message beneath it ──────────────────────────────── */
.ap-banner-media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.ap-banner-body { margin-top: clamp(26px, 3vw, 40px); }
.ap-banner-body h2 {
font-size: clamp(26px, 3.2vw, 42px);
line-height: 1.15;
color: var(--ink);
margin: 0;
}
/* ── Three reasons ──────────────────────────────────────────────────────────── */
.ap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
margin-top: clamp(34px, 4vw, 54px);
}
.ap-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: clamp(24px, 2.6vw, 36px);
text-align: center;
}
.ap-card img {
width: 56px;
height: 56px;
display: block;
margin: 0 auto 18px;
}
.ap-card h3 {
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.25;
color: var(--ink);
margin: 0 0 12px;
}
.ap-card p {
color: var(--body);
font-size: 15px;
line-height: 1.65;
margin: 0;
}
.ap-card .ap-card-link { display: inline-block; margin-top: 14px; }
/* ── The closing offer, framed ──────────────────────────────────────────────── */
.ap-frame {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--white);
padding: clamp(28px, 3.4vw, 52px);
text-align: center;
}
.ap-frame h2 {
font-size: clamp(24px, 3vw, 40px);
line-height: 1.18;
color: var(--ink);
margin: 0 0 clamp(24px, 3vw, 36px);
}
.ap-frame img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
margin-bottom: clamp(24px, 3vw, 36px);
}
.ap-frame .btn-row { justify-content: center; margin-top: 0; }
/* ── Closing help line ──────────────────────────────────────────────────────── */
.ap-help {
border-top: 1px solid var(--line);
padding: clamp(36px, 4vw, 56px) 24px;
text-align: center;
}
.ap-help p {
max-width: 720px;
margin: 0 auto;
font-size: clamp(17px, 1.7vw, 22px);
line-height: 1.5;
color: var(--ink);
}
/* Inline links inside prose. .app-link is an app-look class this file does not own, so the
Pro pitch declares its own rather than borrowing it. */
.ap-link {
color: var(--blue-dark);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.ap-link:hover { color: var(--ink); }
/* ── Narrow screens ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.ap-split { grid-template-columns: 1fr; }
/* The flip is a desktop-only alternation. On one column the photo always leads, so the
reading order is photo-then-text on every split rather than alternating unpredictably. */
.ap-split--flip .ap-split-media { order: 0; }
.ap-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════════
PARTNER PAGE — the membership-tier detail behind the pitch.
Added by /agency/partner.php. Everything above is shared with the Pro home.
════════════════════════════════════════════════════════════════════════════ */
/* ── Tier comparison ────────────────────────────────────────────────────────
The previous revision built this as a
with 1px
border-spacing faking column rules, a fixed height="710", and font sizes in
vw. Three separate defects: a table is the wrong element for three parallel
offers (it is not tabular data, and it cannot reflow), the fixed height
guaranteed clipping or dead space at any width but one, and a vw font size
has no floor — 1.0vw is 12.8px at 1280 and 3.8px at 375, i.e. unreadable on
a phone. Same defect class as the contact page's 1.1vw body copy. Now a
grid of cards with clamped type. */
.ap-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 26px);
margin-top: clamp(30px, 3.5vw, 48px);
align-items: stretch;
}
/* TWO tiers, not three (Business Affiliate was dropped, owner-directed 2026-08-21).
This is a modifier rather than a change to the rule above, so restoring a third tier is
deleting one class rather than rediscovering what the widths used to be.
⚠️ THE max-width IS THE POINT, not the column count. Two cards in the full 1240px wrap
measure ~607px each — a 9-item list at that width leaves most of the card empty and the
ticks strand a long way from their text, which reads as a layout fault rather than a
design. Capping the pair at 920px puts each card at ~447px, which is close to the ~397px
each card had when there were three, so the two survivors keep the proportions they were
drawn at instead of being stretched to fill the gap the removed tier left. */
.ap-tiers--two {
grid-template-columns: repeat(2, 1fr);
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.ap-tier {
position: relative;
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: clamp(22px, 2.4vw, 34px);
}
.ap-tier-name {
font-size: clamp(16px, 1.5vw, 20px);
font-weight: 800;
color: var(--ink);
text-align: center;
margin: 0 0 20px;
}
/* The benefit list. The previous revision hung a PNG tick off list-style-image
(/agency/i/offercheck2.png) — a 235-byte raster that cannot recolour, cannot
scale and disappears against a dark ground. A CSS mark costs nothing and
inherits the palette. */
.ap-tier ul {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.ap-tier li {
position: relative;
padding-left: 26px;
margin-bottom: 11px;
font-size: 15px;
line-height: 1.45;
color: var(--body);
}
.ap-tier li::before {
content: "";
position: absolute;
left: 4px;
top: 6px;
width: 5px;
height: 9px;
border: solid var(--blue-dark);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ap-tier li.ap-tier-sub {
padding-left: 0;
font-weight: 800;
color: var(--ink);
margin-bottom: 14px;
}
.ap-tier li.ap-tier-sub::before { content: none; }
.ap-tier .btn-row { margin-top: 24px; justify-content: center; }
/* A tier that is not open yet. The previous revision covered the card with an
absolutely-positioned at 35% black and height:710px —
and used the SAME id twice on one page, which is invalid. More importantly a
translucent black veil over live text leaves that text in the accessibility
tree and selectable, so a screen reader read out an offer nobody can buy.
Here the state is declared once, the card is dimmed, and the marker is a real
heading rather than a decorative overlay. */
.ap-tier--soon { background: var(--soft); }
.ap-tier--soon .ap-tier-body { opacity: .45; }
.ap-tier-soon-mark {
display: inline-block;
align-self: center;
margin-bottom: 18px;
padding: 6px 14px;
border-radius: 999px;
background: var(--ink);
color: var(--white);
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
/* ── Who it is for ──────────────────────────────────────────────────────────
Two audiences, each a photograph, a label and the five things they get. The
previous revision put the label in a #43BDED bar built from 12px borders and
the list in a separate bordered box below, so the photo, its label and its
list were three visually disconnected blocks. */
.ap-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.6vw, 34px);
margin-top: clamp(30px, 3.5vw, 48px);
}
.ap-aud {
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--white);
display: flex;
flex-direction: column;
}
.ap-aud img { display: block; width: 100%; height: auto; }
.ap-aud h3 {
margin: 0;
padding: 16px 20px;
background: var(--ink);
color: var(--white);
font-size: clamp(15px, 1.4vw, 18px);
text-align: center;
}
.ap-aud ul {
list-style: none;
margin: 0;
padding: clamp(20px, 2.2vw, 28px);
flex: 1;
}
.ap-aud li {
position: relative;
padding-left: 26px;
margin-bottom: 14px;
font-size: 15px;
line-height: 1.5;
color: var(--body);
}
.ap-aud li:last-child { margin-bottom: 0; }
.ap-aud li::before {
content: "";
position: absolute;
left: 4px;
top: 7px;
width: 5px;
height: 9px;
border: solid var(--blue-dark);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ── What to expect · the seven steps ───────────────────────────────────────
These were a 1282x575 PNG (/agency/i/expect-text.png) with every word baked
into the raster: unreadable on a phone, invisible to search, and silent to a
screen reader. The words below are transcribed from that image exactly —
this is a transcription, not a rewrite. */
.ap-steps {
list-style: none;
counter-reset: apstep;
margin: clamp(30px, 3.5vw, 48px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: clamp(14px, 1.8vw, 22px);
}
.ap-steps li {
counter-increment: apstep;
position: relative;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 22px 18px 18px;
font-size: 15px;
line-height: 1.45;
color: var(--ink);
font-weight: 700;
}
.ap-steps li::before {
content: counter(apstep);
display: block;
margin-bottom: 10px;
width: 26px;
height: 26px;
border-radius: 999px;
background: var(--ink);
color: var(--white);
font-size: 12px;
font-weight: 800;
line-height: 26px;
text-align: center;
}
/* ── Narrow screens ─────────────────────────────────────────────────────────
The tier grid drops to one column BEFORE the card grid does: three tiers of
9-14 benefits each are the widest content on the page, and they become a
cramped unreadable column well above the 860px breakpoint the rest uses. */
@media (max-width: 1040px) {
.ap-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.ap-audience { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════════
STOCK REFERENCE — /agency/paper. Added 2026-08-21 with that page's move to
the new look. Each stock is a photo beside its description (the shared
.ap-split, narrowed: the legacy page ran a ~385px image beside wide text, so
a 50/50 split would blow the photos up past their information value), then
the accents as a chip list replacing a one-row layout