/* =============================================
Easterseals Arkansas - Corporate partners
The partner grid on /about/our-partners/, rendered
by scripts/generate_partners.py. Builds on
css/base.css and css/site.css using brand tokens
only. Signature pattern: logo tile over the
partner name and its story, grouped by
sponsorship tier.
NAMESPACE: partner-tier / partner-tile, NOT
partner-group / partner-card and NOT a section
class of "partners". All three of those names are
already taken by dead rules that no page uses.
css/pages.css carries an older stacked-card
treatment under `.partner-group` / `.partner-card`
whose `.partner-card h3 a` is (0,1,2) and silently
repaints a partner name orange, and css/base.css
carries a `.partners` flex logo strip that would
turn this section into a centred flex row and cap
every logo at 30px. Both blocks should be deleted,
but pages.css and base.css are edited by other
sessions, so this file steps around them instead
of fighting them.
============================================= */
/* ---------- Sponsorship tiers ---------- */
.partner-tier { margin-top: 56px; }
.partner-tier:first-child { margin-top: 0; }
.partner-tier-head {
color: var(--color-secondary);
margin-bottom: 28px;
}
/* ---------- The grid ----------
COLUMN SIZING: minmax(0, 1fr), never a bare 1fr. A bare 1fr resolves to
minmax(auto, 1fr), so a column refuses to shrink below its min-content width and
one long unbroken string in a partner story pushes the whole document sideways.
That is how a grid added to this site produced 51px of horizontal page scroll
below 1400px on 2026-09-30. The matching min-width: 0 on the tile stops the same
thing one level down, where the flex item has its own auto minimum.
TWO COLUMNS, not the four that .staff-card-grid uses. A staff card is a name and
a job title; a partner tile carries one or two paragraphs of copy and needs the
measure. Every sponsorship tier currently holds exactly 4 partners, so two
columns fill both rows with no orphan.
Default align-items (stretch) is deliberate: tiles in a row match heights, so a
row of a 1-paragraph and a 2-paragraph partner does not read as ragged. */
.partner-tier-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.partner-tile {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 28px 26px;
}
/* ---------- Logo tile ----------
Logos arrive at wildly different intrinsic sizes (86x47 up to 250x125). By
default cap the height and never upscale. The Independence and Empowerment
tiers below override this with a fixed width, because logo size is how the
page shows tier, and that upscales a small bitmap (today only Welsco,
198px to 230px, 1.16x). width/height stay on the ![]()
so the box is
reserved before load. */
.partner-tile-logo {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 88px;
margin-bottom: 18px;
}
.partner-tile-logo img {
max-width: 100%;
max-height: 88px;
width: auto;
height: auto;
object-fit: contain;
}
/* ---------- Name ----------
Navy on white measures 10.12:1. The brand orange --color-primary #cf4b04 is
4.51:1, which clears AA by 0.01, and it is the colour the dead pages.css block
would have applied. Navy matches .staff-card-name and every other card heading
in this build, so the whole site reads consistently. */
.partner-tile-name {
font-size: 1.25rem;
font-weight: 800;
line-height: 1.3;
color: var(--color-secondary);
margin-bottom: 12px;
}
.partner-tile-name a { color: inherit; text-decoration: none; }
.partner-tile-name a:hover { text-decoration: underline; }
/* NAME ALIGNMENT: 7 of the 12 partners have no logo. In a tier where some do and
some do not, the logo-less tiles reserve the same band so every name in a row
starts on the same line instead of floating to the top of its tile. A tier with no
logos at all (Dignity today) never gets the modifier and never pays for a dead
band, so the reservation only costs space where it buys alignment. */
.partner-tier-grid--has-logos .partner-tile--no-logo::before {
content: "";
display: block;
min-height: 88px;
margin-bottom: 18px;
}
/* ---------- Heading tile ----------
A tile that opens with an h2 instead of a logo and a name (the Latest Updates
and Advocacy News tiles on /advocacy/). The h2 keeps exactly the size and colour
of `.prose h2` in css/pages.css, so a section heading does not change size when
it moves into a tile; the tile's .partner-tile-name (1.25rem) is not used. */
.partner-tile > h2 {
color: var(--color-secondary);
font-size: clamp(1.5rem, 3vw, 2rem);
margin: 0 0 16px;
}
/* ---------- Story ---------- */
.partner-tile-body { color: var(--color-text-body); }
.partner-tile-body p {
font-size: 1rem;
line-height: 1.7;
margin: 0 0 12px;
}
.partner-tile-body p:last-child { margin-bottom: 0; }
/* Two partner stories carry an inline link. Underline it: inside a run of body copy
a colour change alone is not a sufficient affordance. */
.partner-tile-body a {
color: var(--color-secondary);
text-decoration: underline;
}
.partner-tile-name a:focus-visible,
.partner-tile-body a:focus-visible {
outline: 2px solid var(--color-secondary);
outline-offset: 2px;
}
/* ---------- Tier hierarchy (iprov-agency/eas-easterseals#160) ----------
Logo size is the importance signal, as on the WordPress page. The generator
tags each tier with partner-tier--.
INDEPENDENCE: one partner per row at the container's full width, the logo in
a fixed 230px column on the left (Jen's size) and the name and story on the
right, the logo centred on the height of the text. Every Independence partner
has a logo; a tile without one drops the logo column and runs its text full
width rather than leaving a 230px hole. */
.partner-tier--independence .partner-tier-grid { grid-template-columns: minmax(0, 1fr); }
.partner-tier--independence .partner-tile {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: 40px;
align-items: start;
}
.partner-tier--independence .partner-tile--no-logo { display: block; }
.partner-tier--independence .partner-tile--no-logo::before { display: none; }
.partner-tier--independence .partner-tile-logo {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
min-height: 0;
margin-bottom: 0;
}
.partner-tier--independence .partner-tile-logo img {
width: 230px;
max-width: 100%;
max-height: none;
}
.partner-tier--independence .partner-tile-name,
.partner-tier--independence .partner-tile-body { grid-column: 2; }
/* EMPOWERMENT: the two-column grid stays. Each logo fits a 200x64 slot inside
the same 88px band, keeping its ratio: a wide mark (Arkansas Blue Cross,
5.3:1) gets the width so its wordmark reads, a compact one (ABC, Legacy)
gets the height and stays narrow, and nothing outgrows the 230px
Independence logos. The files are 2x the slot (400x128 at most), so
width/height auto only ever scales them down. */
.partner-tier--empowerment .partner-tile-logo img {
max-width: min(200px, 100%);
max-height: 64px;
}
/* ---------- Responsive ---------- */
@media (max-width: 760px) {
.partner-tier-grid { grid-template-columns: minmax(0, 1fr); }
.partner-tile { padding: 24px 20px; }
.partner-tier { margin-top: 44px; }
/* One column from here down, so a logo-less tile has no row-mate to align with
and the reserved band would be 106px of dead space on a phone. */
.partner-tier-grid--has-logos .partner-tile--no-logo::before { display: none; }
/* Independence stacks again: the logo above the name, left-aligned like the
text, 230px wide or the tile's width when that is narrower. */
.partner-tier--independence .partner-tile {
display: flex;
align-items: stretch;
}
.partner-tier--independence .partner-tile-logo {
align-self: stretch;
margin-bottom: 18px;
}
}