carries
the gradient. */
body.page-alumni-list .main-inner {
background: linear-gradient(180deg, #FFFFFF 0%, #FFECD2 100%) !important;
background-attachment: scroll !important;
background-repeat: no-repeat !important;
background-size: auto !important;
}
/* .main-inner padding — restore TOP clearance under the site header, keep
the bottom clearance above the footer, zero the sides.
H1-CLIP FIX (measured on the live render via headless Chromium): on desktop
`header.headerBlock` is `position: fixed; top:0; height:64px; z-index:50000`,
so it overlaps the top of the content area. A previous revision zeroed the
top padding (`padding: 0 0 150px`), which let the card tuck under the fixed
header and sliced ~16px off the top of the H1 "Mentorpiece Alumni". Restore
the site's original 75px top rhythm (style.css `main.main-inner{padding:75px 0}`):
measured H1 top then lands at 123px, clearing the 64px header. On mobile the
header is `position: sticky` and stays IN FLOW, so it already pushes content
down — no extra top padding is needed there (see the mobile block below,
which keeps top:0 and the lighter 30px bottom clearance).
We deliberately KEEP the bottom padding: the layout is a flexbox sticky
footer (body is a flex column, main has flex:1 and .m2p-footer is its
in-flow sibling), so padding-bottom inside main is the only thing clearing
the orange footer from the last credential row. */
body.page-alumni-list .main-inner {
padding: 75px 0 150px !important;
margin: 0 !important;
}
/* Page card — wrap the whole list in a white card with rounded corners,
soft shadow, and left/right margins matching the diploma detail page.
Padding mirrors .entry-content-wrap on the detail page (--global-boxed-spacing
= 2rem) so both pages have the same internal breathing room. */
body.page-alumni-list .main-inner > .container {
max-width: 842px !important;
margin: 1rem auto 3rem !important;
padding: 2rem !important;
background: #ffffff !important;
border-radius: 1rem !important;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
}
/* Page header treatment — H1 inside the card.
Mirror the detail page's h1.entry-title rhythm: 32px, left-aligned,
weight 700, color #1A202C, line-height 1.5, no decorative accent rule.
The detail page H1 is followed directly by the "DATE ISSUED" badge
with no separator pill, so we drop the pill here too. */
body.page-alumni-list .main-inner > .container > h1 {
text-align: left;
font-size: 32px;
font-weight: 700;
line-height: 1.5;
letter-spacing: -0.005em;
color: #1A202C;
margin: 0 0 1rem;
position: relative;
}
/* Spacing before the first credential row — separate the H1 from the
register with a clear margin (rhymes with the detail page's gap between
the H1 + meta cluster and the diploma figure). */
body.page-alumni-list .main-inner > .container > h1 ~ .container:first-of-type {
margin-top: 1.5rem !important;
}
/* Row container — restyle the hand-coded .container wrapper into a credential
card row. We keep it as a row (not stacked card) but elevate it. */
body.page-alumni-list .main-inner .container[style*="border-bottom"] {
max-width: 100% !important;
padding: 1.25rem 1.5rem !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 0 !important;
background: transparent !important;
transition: background-color 200ms ease, padding-left 200ms ease, box-shadow 200ms ease !important;
position: relative !important;
margin: 0 !important;
}
/* Hover state — peach wash + 3px orange edge accent. Mirrors the
credential-register vocabulary used on .m2p-cat-entry__link. */
body.page-alumni-list .main-inner .container[style*="border-bottom"]:hover {
background: #FFF5EB !important;
padding-left: calc(1.5rem + 3px) !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"]::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #fb6b00;
transform: scaleY(0);
transform-origin: center top;
transition: transform 200ms ease;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"]:hover::before {
transform: scaleY(1);
}
/* Row layout — keep Bootstrap's .row but tighten alignment */
body.page-alumni-list .main-inner .container[style*="border-bottom"] > .row {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
margin: 0 !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] > .row > [class*="col-"] {
padding: 0 !important;
flex: 1 1 auto;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] > .row > [class*="col-"]:last-child {
flex: 0 0 auto;
}
/* Name link — the inline style sets font-size:20px;font-weight:600;color:#000.
We override to a serif editorial treatment with orange-on-hover. */
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="font-size"] {
font-family: Georgia, "Times New Roman", Times, serif !important;
font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
color: #1A202C !important;
text-decoration: none !important;
transition: color 180ms ease !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="font-size"]:hover,
body.page-alumni-list .main-inner .container[style*="border-bottom"]:hover a[style*="font-size"] {
color: #fb6b00 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 0.2em !important;
}
/* Download button — the inline style is an outlined ghost button:
border:1px solid #fb6b00; padding:10px 20px; color:#000.
We promote it to the editorial primary CTA: orange fill, white text,
rounded, with a soft shadow and a sliding arrow on hover. */
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="border:"][style*="#fb6b00"],
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="border: 1px solid #fb6b00"] {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
background: #fb6b00 !important;
border: 1px solid #fb6b00 !important;
border-radius: 0.5rem !important;
padding: 0.625rem 1.25rem !important;
color: #ffffff !important;
font-family: inherit !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.01em !important;
box-shadow: 0 4px 14px rgba(251, 107, 0, 0.22) !important;
transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
white-space: nowrap !important;
position: static !important; /* override inline position:relative */
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="#fb6b00"]:hover,
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="#fb6b00"]:focus-visible {
background: #c85600 !important;
border-color: #c85600 !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(251, 107, 0, 0.32) !important;
text-decoration: none !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="#fb6b00"]:focus-visible {
outline: none !important;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px #fb6b00,
0 6px 20px rgba(251, 107, 0, 0.32) !important;
}
/* Append a small download arrow after the button label without touching markup */
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="#fb6b00"]::after {
content: "↓";
display: inline-block;
font-size: 0.875rem;
margin-left: 0.125rem;
transition: transform 180ms ease;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="#fb6b00"]:hover::after {
transform: translateY(2px);
}
/* The wrapping — kill any positioning quirks */
body.page-alumni-list .main-inner #parent {
display: inline-block !important;
position: static !important;
}
/* Mobile: card has tighter padding; rows stack name on top, button below */
@media screen and (max-width: 600px) {
/* On mobile the header is `position: sticky` and stays in flow, so it
already pushes the content down — no top padding is needed to clear it
(verified: H1 top 99px below the 63px header). Drop back to top:0 and
tighten the footer clearance to match style.css's own
`main.main-inner { padding: 30px 0 }` mobile rhythm — 150px of dead
space is excessive on a phone. */
body.page-alumni-list .main-inner {
padding: 0 0 30px !important;
}
body.page-alumni-list .main-inner > .container {
margin: 1rem !important;
padding: 1.25rem !important;
border-radius: 0.75rem !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] {
padding: 1rem 0.5rem !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] > .row {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem !important;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] > .row > [class*="col-"]:last-child {
flex: 1 1 auto;
}
body.page-alumni-list .main-inner .container[style*="border-bottom"] a[style*="#fb6b00"] {
width: 100% !important;
justify-content: center !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
body.page-alumni-list .main-inner .container[style*="border-bottom"],
body.page-alumni-list .main-inner .container[style*="border-bottom"]::before,
body.page-alumni-list .main-inner .container[style*="border-bottom"] a {
transition: none !important;
}
}