/* couriers.css — page-scoped sheet for site/couriers/*.html. Loaded AFTER tpl.css, per the
about.css / ai-transformation.css precedent. Created 2026-08-22 with REQ-016 / ADR-020.
Rollback: delete this file and the in tools/build-courier-pages.mjs head(), then re-run
the generator; the pages fall back to unaccented house chrome and stay readable.
── ADR-020, the one rule this file bends and why ──────────────────────────────────────────
tpl.css line ~2514 states the non-red accents are "regions ONLY … never brand chrome". A
carrier page is the first surface where a THIRD PARTY's colour is the subject of the page
rather than decoration on ours, so ADR-020 extends the mechanism rather than inventing one:
each page sets --region and nothing else. Every consuming primitive (the top rule, the kicker,
the .bcell sweep) already reads --region and needs no change. Red keeps its job everywhere
else on the page — the CTA, the eyebrow, the footer — so the ≤5% red rule is untouched.
── contrast ───────────────────────────────────────────────────────────────────────────────
Every --region value below is the TEXT-SAFE variant, ≥4.5:1 on the light paper ramp, exactly
the split tpl.css already makes between --india (fill) and --india-ink (text). Two are NOT the
brand's headline hex and that is deliberate:
DHL #D40511 red, not the #FFCC00 yellow — the yellow is 1.4:1 on paper.
BOX NOW #1F7A12, darkened from the brand #44D62C, which is 1.8:1 on paper.
The MARKS keep their true brand colour; only text and rules use the token. Dark-theme twins
are lightened to clear 4.5:1 on the dark paper ramp. */
.cr--dhl { --region: #D40511; --cr-mark-h: clamp(20px, 2.0vw, 28px); }
.cr--ups { --region: #351C15; --cr-mark-h: clamp(34px, 3.4vw, 46px); }
.cr--fedex { --region: #4D148C; --cr-mark-h: clamp(24px, 2.4vw, 34px); }
/* ACS: the logo red #E42229 measures 4.41:1 on the hero wash — just under AA. Darkened to
#D01E24 (measured 5.0:1) for text and rules; the MARK keeps the true #E42229. */
.cr--acs { --region: #D01E24; --cr-mark-h: clamp(22px, 2.2vw, 30px); }
.cr--boxnow { --region: #1F7A12; --cr-mark-h: clamp(34px, 3.4vw, 46px); }
/* Geniki Taxydromiki: the logo blue #004FA0 measures 7.08:1 on paper, so the brand hex IS the
text-safe one here and nothing had to be darkened. The red in the mark is the envelope, not
the wordmark, so it is not a candidate for the token. */
.cr--geniki { --region: #004FA0; --cr-mark-h: clamp(26px, 2.6vw, 36px); }
/* Skroutz Point: the brand orange #F68B24 is 2.15:1 on paper — the same problem BOX NOW's green
has. Darkened to #A85400 (measured 4.72:1) for text and rules; the MARK keeps the true
#F68B24. On the dark ramp the brand hex clears on its own at 7.57:1, so the dark twin below
is the real orange rather than a lightened stand-in. */
.cr--skroutzpoint { --region: #A85400; --cr-mark-h: clamp(22px, 2.2vw, 30px); }
.cr--hub { --region: var(--red-ink); --hero-pos: 80% center; }
html[data-theme="dark"] .cr--dhl { --region: #F2635C; }
html[data-theme="dark"] .cr--ups { --region: #C9A38E; }
html[data-theme="dark"] .cr--fedex { --region: #B392D8; }
html[data-theme="dark"] .cr--acs { --region: #F2726F; }
html[data-theme="dark"] .cr--boxnow { --region: #5FC94E; }
html[data-theme="dark"] .cr--geniki { --region: #5B9BE0; }
html[data-theme="dark"] .cr--skroutzpoint { --region: #F68B24; }
/* ── hero ──────────────────────────────────────────────────────────────────────────────────
Non-photographic on purpose (ADR-020). channels/ carries brand feeling in a baked 1920x720
photo per slug; there is no honest photograph of a carrier ACCOUNT, and a stock parcel shot
would be decoration standing in for an argument. The brand signal here is the accent rule,
the carrier's own mark at true colour, and the type — nothing to bake, nothing to re-bake
when a carrier restyles. */
.cr-hero {
position: relative;
padding-top: clamp(48px, 6vw, 96px);
border-top: 3px solid var(--region, var(--red));
background:
linear-gradient(180deg, color-mix(in srgb, var(--region, var(--red)) 5%, transparent) 0%, transparent 320px),
var(--paper-50);
}
.cr-hero .eyebrow { color: var(--region, var(--red-ink)); }
.cr-hero .hero-lede { max-width: 620px; }
.cr-hero .hero-cta { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 12px; }
/* The mark sits bottom-right of the hero on desktop, in its own true brand colour — the one
place on the site where a third-party mark is NOT reduced to a single house tone, because
here the mark is the page's subject rather than one tile in a logo row (contrast with the
#global-gateway row, which ADR-019 governs and which keeps the reduction). */
.cr-mark {
display: block;
height: var(--cr-mark-h, clamp(24px, 2.4vw, 34px));
width: auto; max-width: 100%;
margin-top: clamp(28px, 3.4vw, 44px);
}
@media (min-width: 861px) {
.cr-hero .wrap { position: relative; }
.cr-mark {
position: absolute; right: clamp(20px, 4vw, 48px); bottom: 0;
margin-top: 0;
height: calc(var(--cr-mark-h, 34px) * 1.5);
opacity: .92;
}
}
/* == hero, photographic (2026-08-24, ADR-024) ==============================================
The five carrier pages now open on a real photograph of that carrier's own vehicles or
hardware, so they take the house .hero-photo.hero-multi pattern from tpl.css and only the
carrier-specific parts live here. The hub kept .cr-hero above until 2026-09-01: no hub frame
had been supplied, and a hub hero of one carrier's truck would pick a favourite among the
five. The owner then supplied a frame that favours nobody - TPL's own liveried airliner - so
the hub now takes the same pattern (slug 'hub' in the bake script). .cr-hero itself stays:
the amazon pages, geniki and skroutz-point still open on the comb.
--hero-pos is the reason each page needs a line of its own. The masters are 3.16:1 and every
hero box is narrower than that (480-720px tall, and pinned to 1024/720 and 430/620 below the
breakpoints), so the browser crops the sides. Centre-cropping puts the scissors through the
subject on four of the five frames, because the subject is not centred in any of them: the
value is the subject's centre as a percentage across the master, measured off the file.
THE EYEBROW IS THE ONE THING THAT CANNOT USE --region HERE. The light-ramp tokens above are
text-safe on PAPER, which is what they were tuned for - and the scrim is permanently dark
whatever the theme is, so UPS's #351C15 would land near-black on near-black. This is the same
trap the band-inverse sections hit: a fixed dark band needs theme-invariant literals, not
tokens that flip. --region-inv carries the lightened dark-ramp twin and never flips, so the
eyebrow reads in both themes. Measured against the scrim's left end (a 94% #08080A wash over
the brightest of the five frames): 5.4:1 DHL, 8.5:1 UPS, 7.3:1 FedEx, 6.0:1 ACS, 8.9:1 BOX NOW.
The 3px accent rule stays on top of the photo: it is the one piece of carrier chrome that read
as structure rather than decoration, and it still separates the crumb bar from the hero. */
.cr-hero-photo { border-top: 3px solid var(--region, var(--red)); }
/* --hero-pos applies to the DESKTOP file only. The tablet and mobile files are already
art-directed crops - the window was chosen in the bake script - so re-offsetting them
here would crop a deliberate frame a second time (measured at 390: a 430x620 source in a
375x844 box is cropped 210px horizontally, and 80% took 168 of that off the left, cutting
into the DHL cab the portrait exists to show). Above 1024 the file IS the full master, so
the offset is the only thing keeping the subject in frame. */
@media (min-width: 1025px) {
.cr-hero-photo .hero-bg { object-position: var(--hero-pos, center); }
}
.cr-hero-photo .eyebrow { color: var(--region-inv, var(--red-ink-inverse)); }
.cr-hero-photo .hero-lede { max-width: 620px; }
.cr-hero-photo .hero-cta { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 12px; }
.cr--dhl { --hero-pos: 80% center; --region-inv: #F2635C; }
.cr--ups { --hero-pos: center; --region-inv: #C9A38E; }
.cr--fedex { --hero-pos: 36% center; --region-inv: #B392D8; }
.cr--acs { --hero-pos: 57% center; --region-inv: #F2726F; }
.cr--boxnow { --hero-pos: 74% center; --region-inv: #5FC94E; }
/* ACS is the one frame whose subject crosses the TEXT column rather than sitting beside it: the
trailer flank runs through the middle of the master, so its white panel and the ACS lockup land
under the h1's second clause (measured at 1440: the lockup's letters span x 642-896 against a
headline ending at 880, and two sets of display letterforms overlapping reads as an accident).
Cropping cannot solve it - at 1920 the box is as wide as the master and there is no crop left to
spend - so this page alone deepens the MIDDLE of the scrim: .84 -> .91 at the 44% stop and
.60 -> .74 at 74%. That drops the lockup to a texture behind the type while leaving the tractor
at the right end readable, which is the half of the frame the wash still lets through. */
.cr--acs .hero-scrim {
background: linear-gradient(90deg,
rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .91) 44%, rgba(8, 8, 10, .74) 74%, rgba(8, 8, 10, .40) 100%);
}
/* The planned-lane flag was built for paper: --paper-0 fill, --hairline border, --ink-soft text.
All three flip with the theme and none of them survive on the dark band, so on the photo hero
it becomes a glass chip - a white hairline and white text over the scrim, with the dot keeping
the lightened accent so it still reads as that carrier's colour. */
.cr-hero-photo .cr-flag {
background: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .42);
color: rgba(255, 255, 255, .92);
}
.cr-hero-photo .cr-flag-dot { background: var(--region-inv, var(--red)); }
/* PHONES NEED THEIR OWN SCRIM. .hero-photo's wash is 90deg at every width - it drops to .34 at
the right end - which works on desktop because the text column is capped at 620px and lives in
the strong end. On a phone the text spans the full width, so its right end sits in the weakest
part of the wash. Measured at 390 on the DHL frame, glyph runs sampled against the pixels
actually painted under them: the lede came out at 4.55:1 against a 4.5 floor. That is a pass
on paper and far too close to ship - the brightest pixel under it was rgb(108,107,107), the
cab windscreen.
So below 720 the wash flattens instead of fading: .94 to .80 rather than .94 to .34. The frame
reads as a dark image at that point, which is the same thing the left half of any desktop photo
hero on this site already does, and the same measurement then gives the lede 11:1.
Not fixed in tpl.css on purpose: every .hero-photo page shares that scrim, and changing it
there would re-tune D2C, B2B2C, cross-docking, about and the case studies off the back of a
carrier-page measurement. */
@media (max-width: 720px) {
.cr-hero-photo .hero-scrim {
background: linear-gradient(90deg,
rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .89) 44%, rgba(8, 8, 10, .84) 74%, rgba(8, 8, 10, .80) 100%);
}
}
/* Planned-lane flag. Deliberately NOT red: red on this site means "you are here", and an error
colour would read as a fault. This is a statement of fact about a date. */
.cr-flag {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 20px; padding: 8px 14px;
border: 1px solid var(--hairline); border-radius: 9999px;
background: var(--paper-0);
font-family: var(--font-mono); font-size: 12px; font-weight: 500;
letter-spacing: .04em; color: var(--ink-soft);
}
.cr-flag-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--region, var(--red));
}
/* ── tracking panel ────────────────────────────────────────────────────────────────────────
Field rules inherited from the .rs-field lessons in tpl.css: 16px minimum so iOS Safari does
not zoom the viewport on focus, 44px minimum target, ink focus ring rather than red, and
--error for the invalid state so a mistyped number never reads as brand chrome. */
.trk { background: var(--paper-0); }
.trk .eyebrow { color: var(--region, var(--red-ink)); }
.trk-form { margin-top: clamp(24px, 3vw, 34px); max-width: 640px; }
.trk-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.trk-field { display: block; flex: 1 1 320px; min-width: 0; }
.trk-field > span {
display: block;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-muted); margin-bottom: 6px;
}
.trk-field input {
width: 100%; font: inherit; font-size: 16px; line-height: 1.5;
font-family: var(--font-mono); letter-spacing: .02em;
color: var(--ink); background: var(--paper-50);
border: 1px solid var(--hairline); border-radius: 8px;
padding: 13px 16px; min-height: 48px;
transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.trk-field input::placeholder { color: var(--ink-muted); font-weight: 400; }
.trk-field input:focus-visible {
outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink);
}
html[data-theme="dark"] .trk-field input { background: rgba(255, 255, 255, .06); }
.trk-go { flex: none; min-height: 48px; }
.trk-hint { margin: 12px 0 0; font-size: 13px; color: var(--ink-muted); max-width: 60ch; }
.trk-err {
margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--error);
display: flex; align-items: center; gap: 8px;
}
/* Non-colour signal alongside the colour one — the invalid state must not depend on hue. */
.trk-err::before {
content: "!"; display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; flex: none; border-radius: 50%;
border: 1.5px solid currentColor;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.trk-field input[aria-invalid="true"] { border-color: var(--error); }
.trk-alt { margin: 18px 0 0; font-size: 14px; }
.trk-alt a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.trk-alt a:hover { color: var(--region, var(--red-ink)); }
/* With JS on, the plain-link escape hatch is redundant for the query-param carriers but stays
for ACS (path deep link, no GET-form equivalent) and for anyone whose paste fails validation. */
/* ── argument cards ────────────────────────────────────────────────────────────────────────
Flat, not the frosted .wwd-card family: the SHARP no-glass rule allows glass only where there
is imagery or content behind it to blur, and this section sits on flat paper. (The lanes
section above IS over an image band, which is why the glass is legitimate there and not here.)
2026-08-24: these were the one block on the page with no scroll motion and no hover state at
all, so they now run the site-wide .card-arrive mechanism — reveal in from their own column,
then a sequenced rule-trace on hover. ADR-025 records the rollout; tpl.css (~6816) and tpl.js
(~4571) own the mechanism and neither is touched here. What this file adds is the three things
that are carrier-specific:
1. The trace is the CARRIER's accent, not --red-ink. Every straight edge of the card draws
in DHL red / FedEx purple / UPS brown, which is ADR-020 point 1 doing exactly what it
already does for the section rule, the kicker and the .bcell sweep. --region is the
text-safe variant, so it is ≥4.5:1 on paper before it is ever asked to carry a 1.4px line.
2. The 3px accent top rule is GONE from the card, and that is deliberate rather than lost.
The card's border is now drawn by the SVG frame (.base), measured from the real box, so a
CSS border-top would have painted a second edge 1px off the traced one. The carrier signal
moves to the //01 kicker, which reads the same token — the .card--gr/--us/--in precedent
in tpl.css line 2653 is the same move.
3. The kicker is a mono index, which is what gives the three cards a rhythm at rest. It was
the missing hierarchy: title + paragraph and nothing else is why these read as boxes.
The section's own vertical rhythm is unchanged; only the surface, the index line and the
motion are new. */
.cr-args {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
margin-top: clamp(28px, 3.4vw, 44px);
}
@media (max-width: 960px) { .cr-args { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cr-args { grid-template-columns: 1fr; } }
/* --paper-0, up from --paper-50: on the section's --paper-100 ground a 50-on-100 card is a 4-value
step and barely separates (measured off the pre-change capture). The frame's hairline is doing
the work of the border now, so the surface has to do the work of the lift. */
.cr-arg {
background: var(--paper-0);
padding: clamp(24px, 2.4vw, 30px);
gap: 0;
}
.cr-arg .kicker { color: var(--region, var(--red-ink)); display: block; margin-bottom: 14px; }
.cr-arg h3 { font-size: 18px; margin-bottom: 10px; }
.cr-arg p { color: var(--ink-soft); font-size: 15px; }
/* The trace and the hover kicker take the carrier accent. Scoped to .cr-page so the rollout
cannot reach another page's cards by accident. */
.cr-page .card-arrive .frame .trace-h,
.cr-page .card-arrive .frame .trace-v { stroke: var(--region, var(--red-ink)); }
.cr-page .card-arrive:hover .kicker,
.cr-page .card-arrive:focus-within .kicker { color: var(--region, var(--red-ink)); }
/* Equal heights across the row, and a floor so a two-line argument does not sit half the height
of a five-line one. Lower than .card-arrive's own clamp in tpl.css (260-340) because these
carry no icon, no foot chip and no CTA — just index, title, paragraph. */
.cr-args .card-arrive .card {
display: flex; flex-direction: column;
min-height: clamp(210px, 17vw, 250px);
}
@media (max-width: 640px) { .cr-args .card-arrive .card { min-height: 0; } }
/* See the .cr-why comment in tools/build-courier-pages.mjs. clip, never hidden: hidden would make
this section a scroll container and Chromium then latches any wheel gesture carrying horizontal
delta to it and discards the vertical, which is the case-study rail bug (HANDOFF, 13th stream)
re-created. overflow-y stays visible so the hover lift is not cropped — clip is the one value
that may pair with visible. */
.cr-why { overflow-x: clip; }
/* Below the 3-up breakpoint the columns no longer map to left/centre/right, so a card would enter
from a side it is not on — the one thing the spec's data-dir rule exists to prevent. Cancel the
horizontal leg and let them rise straight into place. Equal specificity to
.card-arrive[data-dir="l"] in tpl.css, won on source order: this sheet loads after it. */
@media (max-width: 960px) { .cr-args .card-arrive { --tx: 0; --rot: 0deg; } }
/* ── the shared rating band ────────────────────────────────────────────────────────────────
.band-inverse is theme-invariant dark, so per the tpl.css convention this block leaves the
band's own colour handling alone and only sets measure and rhythm here. */
.cr-rate .lede { max-width: 68ch; }
.cr-rate .lede + .lede { margin-top: 18px; }
.cr-rate .hero-cta { margin-top: clamp(26px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 12px; }
/* ── hub cards ─────────────────────────────────────────────────────────────────────────────
Reuses .mf-card/.aud-card wholesale; the only additions are the accent rule and a mark slot.
No .ca art band, because there is no baked card art for couriers by design (see hero note). */
.cr-card { border-top: 3px solid var(--region, var(--red)); }
.cr-card .aud-kick { color: var(--region, var(--ink-muted)); }
.cr-card-mark {
height: 26px; width: auto; max-width: 120px; flex: none;
/* object-fit keeps very wide wordmarks true when max-width bites: DHL's 240x34 wants 183px at
this height and was squashing to 120 without it. */
object-fit: contain;
/* At rest the mark sits back so the card's own title leads and five different brand colours do
not fight across one row; on hover it comes to full strength. Opacity only — the mark keeps
its true brand colour under ADR-020 point 3 and is never re-toned, greyscaled or tinted. */
opacity: .78;
transition: opacity 260ms var(--ease);
}
.cr-card:hover .cr-card-mark,
.cr-card:focus-within .cr-card-mark { opacity: 1; }
.cr-card-mark.cr-mark--shield { height: 38px; }
/* The lane list. Mono, because it is a list of service names out of the ERP rather than prose, and
it matches the //01 index on the carrier pages' argument cards. Each row is ticked with a short
accent rule instead of a bullet — the same 3px accent language as the card's top rule, at list
scale. Sits directly under the body copy; .mf-foot keeps its margin-top:auto so the CTA stays
pinned to the bottom whatever the lane count (2 or 3 today). */
.cr-lanes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.cr-lanes li {
position: relative; padding-left: 20px;
font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
letter-spacing: .01em; color: var(--ink-soft);
}
.cr-lanes li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 11px; height: 2px; background: var(--region, var(--red));
}
/* min-height comes down with the void: .aud-card's 340-420 floor was set for cards that carry an
icon block, and even with the lane list these run shorter. Same media gate as the rule it
overrides in tpl.css (~5258) so the mobile stack is untouched. */
@media (min-width: 821px) { .cr-card.aud-card { min-height: clamp(300px, 26vw, 360px); } }
/* .mf-card's shared conic sweep is hard-coded to var(--red) in tpl.css. On the hub each card IS
one carrier, so its outline traces that carrier's accent — the same extension ADR-020 already
made for the .bcell sweep, and the reason --region is set per card via .cr--. The recipe
is copied rather than referenced because a conic-gradient's colour cannot be swapped from
outside the declaration; everything else (geometry, mask, the 280ms --sweep transition) is
identical to tpl.css ~5121, so the two cannot drift in shape, only in hue. */
.cr-card::after {
background: conic-gradient(from 135deg,
transparent 0 calc(180deg - var(--sweep)),
var(--region, var(--red)) calc(180deg - var(--sweep)) calc(180deg + var(--sweep)),
transparent calc(180deg + var(--sweep)));
}
/* The corner chevron warms to the carrier too, instead of the sitewide red. */
@media (hover: hover) and (pointer: fine) { .cr-card:hover .mf-more { color: var(--region, var(--red-ink)); } }
.cr-card:focus-within .mf-more { color: var(--region, var(--red-ink)); }
/* ── next-carrier nav + trademark line ─────────────────────────────────────────────────────*/
.cr-next { margin-top: clamp(34px, 4vw, 52px); }
.cr-next-list {
list-style: none; margin: 12px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 10px;
}
.cr-next-list a {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 8px;
min-height: 44px; padding: 0 18px;
border: 1px solid var(--hairline); border-radius: 9999px;
background: var(--paper-0); color: var(--ink);
font-size: 14.5px; font-weight: 600; text-decoration: none;
transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
/* A chip is too small for the rule-trace, so it gets the other half of the same idea: the accent
arrives as a fill that wipes in from the left edge under the label. It is a pseudo-element
rather than a background-position animation so nothing paints outside the pill's radius, and
the label stays --ink throughout — the fill is a 12% tint, not a solid, so contrast never moves
(measured 12.1:1 on the darkest of the five tints, DHL, against the 4.5 floor). */
.cr-next-list a::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: color-mix(in srgb, var(--region, var(--red)) 12%, transparent);
transform: scaleX(0); transform-origin: left center;
transition: transform 300ms var(--ease);
}
/* isolation:isolate, not a z-index race. The chip's label is an inline text node with no element
to lift, and inline content paints BEFORE positioned descendants — so a z-index:0 fill would
sit on top of the words. z-index:-1 puts the fill behind the text and above the pill's own
background, and the isolate keeps that -1 inside the chip instead of punching through to
whatever is behind the section. */
.cr-next-list a { isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
.cr-next-list a:hover { border-color: var(--region, var(--ink)); transform: translateY(-2px); }
.cr-next-list a:hover::before { transform: scaleX(1); }
}
.cr-next-list a:focus-visible { border-color: var(--region, var(--ink)); }
.cr-next-list a:focus-visible::before { transform: scaleX(1); }
.cr-next-tag {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.cr-tm { margin-top: 40px; font-size: 12.5px; color: var(--ink-muted); max-width: 76ch; }
/* ── motion ────────────────────────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
.trk-field input, .cr-next-list a, .cr-next-list a::before,
.cr-card-mark { transition: none; }
.cr-next-list a:hover { transform: none; }
}
html.a11y-no-motion .trk-field input,
html.a11y-no-motion .cr-next-list a,
html.a11y-no-motion .cr-next-list a::before,
html.a11y-no-motion .cr-card-mark { transition: none; }
html.a11y-no-motion .cr-next-list a:hover { transform: none; }
/* ── hub: the section heads ────────────────────────────────────────────────────────────────
The seven carriers sit in three .mfsec sections (tpl.css, tail) — international, Greek
domestic, out-of-home — each on its own ground with an eyebrow, an h2 and a lede. That
component carries the ground, the padding and the track count; the only thing wanted here is
a measure on the lede, so a group's line of purpose wraps at reading width instead of running
the full wrap above a three-card row. */
.cr-page .mfsec .lede { max-width: 68ch; }
/* ONE CARD HEIGHT ACROSS ALL THREE GROUPS. Inside a group the grid already stretches the row,
but three separate grids each size to their own content, and the rows landed at 370/342/354
(measured at 1200) — three different card heights down one page, which is exactly what the
grouping was meant to stop. A floor is the only thing that can level SEPARATE grids, so the
desktop floor is raised to the tallest real card (DHL, three lanes) and every row meets it.
.mfsec owns the mechanism and the breakpoint (tpl.css, tail); the only thing set here is the
number. It is the tallest this page's tallest card (DHL, the one carrier with three lanes)
gets at ANY desktop width — 410px at 1920, where the card's vw-scaled padding peaks, against
375 at 1101 and 384 at 1200. See the .mfsec note on why that maximum is flat and not a
clamp(): natural card height is a V across the range, not a slope.
It supersedes the clamp() a few rules up, tuned for the old single seven-card grid. */
.cr-page .mfsec { --mfsec-card-min: 412px; }
/* The two shield marks (UPS, BOX NOW) are 38px against the wordmarks' 26px, so on a row of
three the shield card's title started 12px lower than its neighbours'. It read as a
misalignment rather than as two shapes of logo. A floor the height of the taller mark levels
every title in the row and costs the wordmark cards nothing but the 12px they were already
giving away. Same 1101px gate as the rest of the row rules. */
@media (min-width: 1101px) { .cr-page .mfsec .mf-top { min-height: 38px; } }
/* ── Amazon hub: per-service marks ─────────────────────────────────────────────────────────
The carriers each bring their own brand mark, which is what makes .cr-card-mark's 26px slot
work: six different logos down a row, each identifying its card at a glance. The six /amazon/
cards had the opposite problem — every one of them is Amazon, so the slot repeated one wordmark
six times and identified nothing. They now carry the specific service lockup (Seller Central,
Vendor Central, FBA, Advertising, Vine Voice, Prime), which is the part that actually differs.
Twice the carriers' height, because these are two-part lockups: at 26px the qualifier — the
half that carries the meaning — sits under 9px. The max-width doubles with it, or the wider
lockups hit the 120px cap and never reach the height at all. */
.cr-card-mark.cr-mark--service {
height: 52px; max-width: min(290px, 100%);
/* The widest lockup (Advertising, 5.45:1) needs 284px to stand 52px tall. A cap under that
holds the height and takes the width, which squashes the wordmark rather than shrinking it —
object-fit is the belt to that braces, so a narrow card letterboxes instead of distorting. */
object-fit: contain; object-position: right center;
}
/* On a one-up card the mark shares its row with the LIVE label, and the widest lockup wants
284px of a ~268px remainder. Stepping the height down is what keeps it whole: shrinking the
width instead would letterbox the logo inside a 52px box and leave a ragged gap under it.
Same 640px gate .mf-grid uses to drop --ca-pad to 22px, so the two move together. */
@media (max-width: 640px) { .cr-card-mark.cr-mark--service { height: 40px; } }