per field: label, a
CF7 inserts itself,
then the control. Rows of two fields are wrapped in .mp-form__row. */
.wpcf7-form p {
margin-block: 0 var(--wp--preset--spacing--40);
}
.wpcf7-form label {
display: block;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
color: var(--wp--preset--color--ink);
margin-block-end: 0.45rem;
}
/* CF7 puts a
after every label; without this it opens a blank line
between the label and its field. */
.wpcf7-form label + br {
display: none;
}
.wpcf7-form .wpcf7-form-control-wrap {
display: block;
}
.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="number"], select, textarea) {
box-sizing: border-box;
inline-size: 100%;
min-block-size: 3.25rem;
padding: 0.85rem 1rem;
font-family: inherit;
/* Never below 16px: iOS zooms the page on focus otherwise. */
font-size: max(1rem, var(--wp--preset--font-size--small));
line-height: 1.4;
color: var(--wp--preset--color--ink);
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--small);
box-shadow: 0 1px 2px rgb(19 26 51 / 0.04);
transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
-webkit-appearance: none;
appearance: none;
}
.wpcf7-form :is(input, select, textarea)::placeholder {
color: var(--wp--preset--color--muted);
opacity: 1;
}
.wpcf7-form :is(input, select, textarea):hover {
border-color: rgb(37 60 131 / 0.45);
}
.wpcf7-form :is(input, select, textarea):focus-visible {
outline: 0;
border-color: var(--wp--preset--color--navy);
box-shadow: 0 0 0 3px rgb(248 152 29 / 0.4);
}
.wpcf7-form textarea {
block-size: 9rem;
min-block-size: 7rem;
resize: vertical;
}
.wpcf7-form :is(input[type="submit"], button[type="submit"]) {
box-sizing: border-box;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
background: var(--wp--preset--color--gold);
border: 0;
border-radius: var(--wp--custom--radius--small);
padding: 1.05rem 1.75rem;
min-block-size: 3.25rem;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.wpcf7-form :is(input[type="submit"], button[type="submit"]):hover {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--white);
}
.wpcf7-form :is(input[type="submit"], button[type="submit"]):active {
transform: translateY(1px);
}
.wpcf7-form :is(input[type="submit"], button[type="submit"]):focus-visible {
outline: 2px solid var(--wp--preset--color--navy);
outline-offset: 3px;
}
/* Submitting: the button sits beside CF7's spinner. */
.wpcf7-form .wpcf7-spinner {
margin-inline-start: 0.75rem;
}
/* Validation. */
.wpcf7-form .wpcf7-not-valid {
border-color: #a4141b;
}
.wpcf7-not-valid-tip {
display: block;
margin-block-start: 0.4rem;
color: #a4141b;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
}
.wpcf7-form .wpcf7-response-output {
margin: var(--wp--preset--spacing--30) 0 0;
padding: 0.9rem 1.1rem;
border-radius: var(--wp--custom--radius--small);
border: 1px solid var(--wp--preset--color--hairline);
background: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
color: var(--wp--preset--color--ink);
}
.wpcf7-form.sent .wpcf7-response-output {
border-color: #1e7b3a;
background: #e8f5ec;
color: #145227;
}
.wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output {
border-color: #a4141b;
background: #fbecec;
color: #7a0f14;
}
.wpcf7-form.init .wpcf7-response-output {
display: none;
}
/* The white card the forms sit in is a container, so a two-field row
collapses when the *card* is narrow (a 58% column on a tablet), not
only when the viewport is. */
.mp-panelcard {
container-type: inline-size;
}
.mp-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--wp--preset--spacing--40);
}
@container (max-width: 30rem) {
.mp-form__row {
grid-template-columns: 1fr;
}
.wpcf7-form :is(input[type="submit"], button[type="submit"]) {
inline-size: 100%;
}
}
@supports not (container-type: inline-size) {
@media (max-width: 40rem) {
.mp-form__row {
grid-template-columns: 1fr;
}
.wpcf7-form :is(input[type="submit"], button[type="submit"]) {
inline-size: 100%;
}
}
}
/* The newsletter field in the footer sits on ink. */
.mp-footer .mc4wp-form :is(input[type="email"], input[type="text"]) {
inline-size: 100%;
padding: 0.85rem 1rem;
font: inherit;
border: 1px solid rgb(245 242 234 / 0.28);
border-radius: var(--wp--custom--radius--small);
background: rgb(255 255 255 / 0.06);
color: var(--wp--preset--color--cream);
margin-block-end: var(--wp--preset--spacing--20);
}
.mp-footer .mc4wp-form input::placeholder {
color: rgb(245 242 234 / 0.55);
}
.mp-footer .mc4wp-form input[type="submit"] {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
background: var(--wp--preset--color--gold);
border: 0;
border-radius: var(--wp--custom--radius--small);
padding: 0.9rem 1.5rem;
cursor: pointer;
}
/* ==================================================================
GiveWP
The plugin ships its own component CSS; this only re-points the parts
that would otherwise carry the plugin's default blue and square edges.
================================================================== */
.mp-give .give-form-title,
.mp-give .give-goal-progress {
margin-block-end: var(--wp--preset--spacing--40);
}
.give-form-wrap,
.give-goal-progress,
#give-recurring-form,
form.give-form {
border-radius: var(--wp--custom--radius--large);
}
.give-btn,
.give-submit,
#give-purchase-button,
.give-donation-level-btn,
input[type="submit"].give-submit {
font-family: var(--wp--preset--font-family--body) !important;
font-size: var(--wp--preset--font-size--small) !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--ink) !important;
background: var(--wp--preset--color--gold) !important;
border: 0 !important;
border-radius: var(--wp--custom--radius--small) !important;
padding: 1rem 1.6rem !important;
cursor: pointer;
}
.give-btn:hover,
.give-submit:hover,
#give-purchase-button:hover,
input[type="submit"].give-submit:hover {
background: var(--wp--preset--color--ink) !important;
color: var(--wp--preset--color--white) !important;
}
.give-donation-level-btn.give-default-level {
background: var(--wp--preset--color--navy) !important;
color: var(--wp--preset--color--white) !important;
}
.give-progress-bar > span {
background: var(--wp--preset--color--gold) !important;
}
.give-form input[type="text"],
.give-form input[type="email"],
.give-form input[type="tel"],
.give-form input[type="number"],
.give-form select,
.give-form textarea {
border: 1px solid var(--wp--preset--color--hairline) !important;
border-radius: var(--wp--custom--radius--small) !important;
padding: 0.8rem 0.95rem !important;
font: inherit !important;
color: var(--wp--preset--color--body) !important;
}
.give_error,
.give_warning,
.give_success {
border-radius: var(--wp--custom--radius--small);
}
/* ==================================================================
Header
A full-bleed dark utility bar flush with the top of the viewport,
then a cream row with logo, centred navigation and the donate
button. Two edge-to-edge strips, each with its own inner max-width,
rather than one inset panel.
================================================================== */
.mp-header {
margin: 0;
}
.mp-utilitybar {
font-size: var(--wp--preset--font-size--x-small);
padding-block: 0.65rem;
}
.mp-utilitybar__inner {
row-gap: 0.35rem;
column-gap: var(--wp--preset--spacing--40);
}
.mp-utilitybar p {
margin: 0;
display: inline-flex;
align-items: center;
}
.mp-utilitybar a {
color: inherit;
text-decoration: none;
}
.mp-utilitybar a:hover {
text-decoration: underline;
}
.mp-utilitybar__promo,
.mp-u-mail,
.mp-u-tel {
letter-spacing: 0.02em;
text-transform: uppercase;
}
.mp-utilitybar__promo strong {
font-weight: 700;
}
.mp-u-sep {
margin-inline: 0.15em;
opacity: 0.55;
}
/* A small line icon ahead of each item: person, envelope, handset. */
.mp-u-icon {
display: inline-flex;
flex: 0 0 auto;
inline-size: 1em;
block-size: 1em;
margin-inline-end: 0.5em;
color: var(--wp--preset--color--gold);
}
.mp-u-icon svg {
inline-size: 100%;
block-size: 100%;
display: block;
}
.mp-utilitybar__contact {
gap: 0.4rem var(--wp--preset--spacing--40);
}
/* Hairline between the email and the phone number. */
.mp-utilitybar__contact .mp-divider {
position: relative;
padding-inline-start: var(--wp--preset--spacing--40);
}
.mp-utilitybar__contact .mp-divider::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 50%;
translate: 0 -50%;
block-size: 1em;
inline-size: 1px;
background: currentColor;
opacity: 0.3;
}
/* Social icon slots: visual placeholders, not links, until the
foundation supplies its real accounts - a dead "#" link would be
worse than an inert one. */
.mp-u-social {
list-style: none;
margin: 0;
padding: 0;
padding-inline-start: var(--wp--preset--spacing--40);
position: relative;
display: flex;
gap: 0.55rem;
}
.mp-u-social::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 50%;
translate: 0 -50%;
block-size: 1em;
inline-size: 1px;
background: currentColor;
opacity: 0.3;
}
.mp-u-social__icon {
inline-size: 1.75em;
block-size: 1.75em;
border-radius: 50%;
border: 1px solid rgb(245 242 234 / 0.35);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--cream);
cursor: default;
}
.mp-u-social__icon svg {
inline-size: 0.85em;
block-size: 0.85em;
}
.mp-masthead-row {
background: var(--wp--preset--color--white);
}
.mp-masthead {
column-gap: var(--wp--preset--spacing--50);
row-gap: var(--wp--preset--spacing--30);
padding-block: var(--wp--preset--spacing--30);
}
.mp-masthead__logo {
flex: 0 0 auto;
}
/* The navigation takes the middle and centres within it, so the logo sits
left and the button right however wide the menu happens to be. */
.mp-masthead > .wp-block-navigation {
flex: 1 1 auto;
min-inline-size: 0;
}
.mp-masthead__cta {
flex: 0 0 auto;
}
.mp-masthead__cta .wp-block-button__link {
white-space: nowrap;
padding-block: 0.85rem;
}
.mp-nav {
font-family: var(--wp--preset--font-family--body);
font-weight: 500;
font-size: var(--wp--preset--font-size--small);
}
.mp-nav a {
text-decoration: none;
transition: color var(--wp--custom--transition);
}
/*
* Core's navigation block ships its own colour rule for the link text:
* .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit; }
* The doubled class is a deliberate specificity bump (0,3,0) that beats a
* plain ".mp-nav a" (0,1,1) outright, regardless of load order - so the link
* was always silently falling through to `inherit`, never actually reaching
* ink or gold-deep. Matching the same trick, with an extra ancestor class for
* headroom, is what a theme.json `styles.blocks.core/navigation` override
* compiles down to anyway; doing it directly here keeps it visible.
*/
.mp-header .mp-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
color: var(--wp--preset--color--ink);
}
.mp-header .mp-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.mp-header .mp-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--gold-deep);
}
/* The chevron core/navigation draws beside a submenu label ("Pages"). */
.mp-nav .wp-block-navigation__submenu-icon svg {
inline-size: 0.7em;
block-size: 0.7em;
}
/* ==================================================================
Hero
================================================================== */
/* The panel shares the shell width and bottom radius with the inner
pages' title band, and sits flush under the masthead the same way. */
.mp-hero {
box-sizing: border-box;
inline-size: min(100% - 2 * var(--mp-shell-gutter), var(--mp-shell-max));
margin-inline: auto;
overflow: hidden;
margin-block: 0;
align-items: stretch;
border-radius: 0 0 var(--mp-shell-radius) var(--mp-shell-radius);
min-block-size: clamp(26rem, 40vw, 38rem);
}
.wp-site-blocks > main:has(> .mp-hero-section:first-child) {
margin-block-start: 0;
}
.mp-hero.wp-block-columns {
gap: 0;
/* Core gives any block carrying a background 1.25em/2.375em of padding.
The two columns set their own, and the photograph has to reach the
panel edge, so it is cleared here. */
padding: 0;
}
.mp-hero > .wp-block-column {
margin-block: 0;
}
.mp-hero__copy {
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 8vw, 8rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.mp-hero__eyebrow {
margin-block-end: 0.9rem;
}
.mp-hero__title {
margin-block: 0 0.9rem;
line-height: 1.06;
letter-spacing: -0.025em;
}
/* The picked-out word goes gold with a gold rule beneath it. The rule is a
background image so it can draw itself in on load (see "Motion"). */
.mp-hero__title mark.mp-underline {
color: var(--wp--preset--color--gold);
background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) no-repeat 0 100% / 100% 0.12em;
padding-inline: 0.02em;
}
.mp-hero__sub {
max-width: 38ch;
color: var(--wp--preset--color--cream);
opacity: 0.85;
margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}
.mp-hero__actions {
gap: var(--wp--preset--spacing--40);
}
.mp-hero__actions .wp-block-buttons {
margin: 0;
}
/* Secondary action: a heart and an underlined gold link, not a button. */
.mp-hero__link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--gold);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
transition: color var(--wp--custom--transition);
}
.mp-hero__link:hover {
color: var(--wp--preset--color--white);
}
.mp-hero__link-icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.6rem;
block-size: 1.6rem;
color: var(--wp--preset--color--gold);
}
.mp-hero__link-icon svg {
inline-size: 100%;
block-size: 100%;
}
/*
* A quiet secondary action: underlined text, no fill. Used wherever a dark
* panel needs a second, lower-emphasis link beside its main button - the
* hero today, the interior-page closing CTA as well.
*/
.on-dark .mp-btn-quiet .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--cream);
padding-inline: 0;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
text-decoration-color: rgb(245 242 234 / 0.45);
}
.on-dark .mp-btn-quiet .wp-block-button__link:hover {
background: transparent;
color: var(--wp--preset--color--gold);
text-decoration-color: currentColor;
}
/* Three classes deep: core's .wp-block-column.is-vertically-aligned-center
sets align-self: center at (0,2,0), and this column must stretch to the
panel's full height for the absolutely placed photograph to fill it. */
.mp-hero > .mp-hero__media.wp-block-column {
align-self: stretch;
position: relative;
min-block-size: 100%;
}
/* The photograph dissolves into the panel along its inner edge. */
.mp-hero__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgb(19 26 51) 0%, rgb(19 26 51 / 0.7) 14%, rgb(19 26 51 / 0.25) 34%, rgb(19 26 51 / 0) 56%);
}
.mp-hero__media .mp-hero__img {
margin: 0;
position: absolute;
inset: 0;
}
/* Filling its column absolutely, the photograph no longer dictates the
panel's height - the copy and the panel's own minimum do. */
.mp-hero__media img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 60% 40%;
display: block;
}
/* ==================================================================
Programme strip under the hero
================================================================== */
.mp-pillars {
list-style: none;
margin: 0;
padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.mp-pillar {
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--30);
padding-inline: clamp(1rem, 2.5vw, 2rem);
border-inline-start: 1px solid var(--wp--preset--color--hairline);
}
.mp-pillar:first-child {
padding-inline-start: 0;
border-inline-start: 0;
}
.mp-pillar__icon {
flex: 0 0 auto;
inline-size: 2.75rem;
block-size: 2.75rem;
color: var(--wp--preset--color--gold);
}
.mp-pillar__icon svg {
inline-size: 100%;
block-size: 100%;
display: block;
}
.mp-pillar__text {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-inline-size: 0;
}
.mp-pillar__title {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--large);
font-weight: 700;
line-height: 1.2;
color: var(--wp--preset--color--ink);
}
.mp-pillar__desc {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
line-height: 1.5;
}
/* ==================================================================
Section rhythm
Each band gets its own ground so the page reads as distinct sections
rather than one continuous scroll.
================================================================== */
.mp-hero-section {
padding-block-end: clamp(3rem, 7vw, 5rem);
}
/* A soft shape offset behind the intro photograph. */
.mp-intro__media {
position: relative;
}
.mp-intro__media::before {
content: "";
position: absolute;
inset-block-start: -1.75rem;
inset-inline-start: -1.75rem;
inline-size: 62%;
block-size: 58%;
background: var(--wp--preset--color--mist);
border-start-start-radius: var(--wp--custom--radius--panel);
z-index: 0;
}
.mp-intro__media .mp-intro__img {
position: relative;
z-index: 1;
}
/* ==================================================================
Responsive
================================================================== */
@media (max-width: 66rem) {
.mp-pillars {
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--40);
}
.mp-pillar:nth-child(odd) {
padding-inline-start: 0;
border-inline-start: 0;
}
}
@media (max-width: 60rem) {
/* The hero stacks: copy first, photograph beneath it. */
.mp-hero.wp-block-columns {
flex-wrap: wrap !important;
}
.mp-hero > .wp-block-column {
flex-basis: 100% !important;
}
/* Stacked: the photograph is back in the flow, under the copy. */
.mp-hero__media .mp-hero__img,
.mp-hero__media img {
position: static;
}
.mp-hero__media img {
block-size: auto;
aspect-ratio: 16 / 10;
}
.mp-masthead {
flex-wrap: wrap !important;
}
.mp-masthead > .wp-block-navigation {
order: 3;
flex-basis: 100%;
}
.mp-nav {
justify-content: flex-start;
}
}
/* Below the point where the navigation collapses to a toggle, it belongs
beside the logo rather than on a row of its own. */
@media (max-width: 37.5rem) {
.mp-masthead {
row-gap: var(--wp--preset--spacing--30);
}
.mp-masthead__logo {
flex: 1 1 auto;
}
.mp-masthead > .wp-block-navigation {
order: 2;
flex: 0 0 auto;
}
.mp-masthead__cta {
order: 3;
flex: 1 0 100%;
}
.mp-masthead__cta .wp-block-button {
inline-size: 100%;
}
.mp-masthead__cta .wp-block-button__link {
display: block;
text-align: center;
}
}
@media (max-width: 46rem) {
.mp-utilitybar__inner {
justify-content: center;
text-align: center;
}
.mp-utilitybar__contact {
justify-content: center;
}
.mp-u-social {
padding-inline-start: 0;
}
.mp-u-social::before {
content: none;
}
.mp-utilitybar__contact .mp-divider {
padding-inline-start: 0;
}
.mp-utilitybar__contact .mp-divider::before {
content: none;
}
.mp-pillars {
grid-template-columns: 1fr;
}
.mp-pillar {
padding-inline: 0;
border-inline-start: 0;
}
.mp-intro__media::before {
content: none;
}
}
@media (max-width: 30rem) {
/* The email address alone is 39 characters; at this width it wins the row
and pushes everything else out, so the phone number carries the bar. */
.mp-utilitybar__contact .mp-u-mail {
display: none;
}
}
/* The root gap would leave a strip of page ground between the last section
and the footer; both carry their own colour, so they should meet. */
.wp-site-blocks > footer.mp-footer,
.wp-site-blocks > footer {
margin-block-start: 0;
}
/* ==================================================================
Interior page header
The single-column, text-only counterpart to the homepage hero -
same dark rounded panel, no photograph.
================================================================== */
/* The band: shell width (see --mp-shell-* under "Shell"), flush under
the masthead, square on top and rounded underneath, on the white page
ground - it reads as a tab hanging from the header. */
.mp-pagehead {
box-sizing: border-box;
inline-size: min(100% - 2 * var(--mp-shell-gutter), var(--mp-shell-max));
margin-inline: auto;
padding: clamp(4rem, 10vw, 7.5rem) clamp(1.5rem, 5vw, 4rem);
border-radius: 0 0 var(--mp-shell-radius) var(--mp-shell-radius);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mp-pagehead .mp-eyebrow {
margin-block-end: 0.6rem;
}
.mp-pagehead h1 {
margin: 0;
max-width: 30ch;
}
/* ==================================================================
Vision and mission
Two stacked quote-style statements beside the offset photograph,
echoing the two-circle layout the foundation's own banner uses -
in the site's own type and colour, not copied from it.
================================================================== */
.mp-vm-grid {
gap: var(--wp--preset--spacing--40);
}
.mp-vm-label {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
margin: 0 0 0.35rem;
}
.mp-vm-item .mp-vision {
margin-block: 0;
}
.mp-vm-item .mp-vision p {
font-size: var(--wp--preset--font-size--large);
}
/* ==================================================================
Values grid
================================================================== */
.mp-values-section .mp-eyebrow {
margin-block-end: var(--wp--preset--spacing--20);
}
.mp-values-section h2 {
margin-block-end: var(--wp--preset--spacing--40);
}
.mp-values-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wp--preset--spacing--30);
}
.mp-value-chip {
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--small);
padding: 1.1rem 1.25rem;
text-align: center;
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--ink);
transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.mp-value-chip:hover {
border-color: var(--wp--preset--color--gold);
transform: translateY(-2px);
}
/* ==================================================================
Interior-page responsive
================================================================== */
@media (max-width: 60rem) {
.mp-vm-grid {
flex-direction: row;
flex-wrap: wrap;
}
.mp-vm-item {
flex: 1 1 16rem;
}
.mp-values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 46rem) {
.mp-vm-grid {
flex-direction: column;
}
.mp-values-grid {
grid-template-columns: 1fr;
}
}
/* ==================================================================
Highlight cards
Two programme photos with an icon badge, beside a dark donate card -
sits between the hero and the intro section.
================================================================== */
.mp-highlights {
gap: var(--wp--preset--spacing--40);
}
.mp-hicard {
background: var(--wp--preset--color--white);
border-radius: var(--wp--custom--radius--large);
padding: var(--wp--preset--spacing--30);
box-shadow: 0 1px 2px rgb(19 26 51 / 0.04);
}
.mp-hicard__media {
position: relative;
margin: 0 0 var(--wp--preset--spacing--40);
border-radius: var(--wp--custom--radius--medium);
overflow: visible;
}
.mp-hicard__media img {
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius: var(--wp--custom--radius--medium);
}
.mp-hicard__badge {
position: absolute;
inset-block-end: -1.1rem;
inset-inline-start: 1.25rem;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px -6px rgb(19 26 51 / 0.4);
}
.mp-hicard__badge svg {
inline-size: 1.3rem;
block-size: 1.3rem;
}
.mp-hicard h2 {
margin-block: 0 0.35rem;
}
.mp-hicard p {
margin: 0;
color: var(--wp--preset--color--muted);
}
.mp-hicard--cta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.6rem;
padding: var(--wp--preset--spacing--40);
}
.mp-hicard--cta h2 {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--large);
line-height: 1.25;
margin: 0;
}
.mp-hicard--cta p {
color: var(--wp--preset--color--cream);
opacity: 0.85;
}
.mp-hicard--cta .wp-block-buttons {
margin-block-start: 0.4rem;
}
/* The hand-drawn arrow: gold on the dark card, muted on white. */
.mp-hicard__squiggle {
inline-size: 4.5rem;
block-size: auto;
color: var(--wp--preset--color--gold);
align-self: flex-end;
margin-block-start: -0.5rem;
}
.mp-hicard__squiggle--center {
align-self: center;
color: var(--wp--preset--color--gold);
opacity: 0.8;
margin-block: 0.2rem 0;
}
/* ==================================================================
Intro accents: photo badge and the two-item highlight pair
================================================================== */
.mp-intro__media {
position: relative;
}
.mp-intro__badge {
position: absolute;
inset-block-end: -1.25rem;
inset-inline-end: 10%;
inline-size: 3.25rem;
block-size: 3.25rem;
border-radius: 50%;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px -6px rgb(19 26 51 / 0.4);
z-index: 2;
}
.mp-intro__badge svg {
inline-size: 1.5rem;
block-size: 1.5rem;
}
.mp-badgepair {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--40);
margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.mp-badgepair__item {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1 1 12rem;
}
.mp-badgepair__icon {
flex: 0 0 auto;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--mist);
color: var(--wp--preset--color--navy);
display: flex;
align-items: center;
justify-content: center;
}
.mp-badgepair__icon svg {
inline-size: 1.35rem;
block-size: 1.35rem;
}
.mp-badgepair__text {
display: flex;
flex-direction: column;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
line-height: 1.35;
}
.mp-badgepair__text strong {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--ink);
font-weight: 600;
}
/* ==================================================================
Front-page responsive: highlights + intro accents
================================================================== */
/*
* Core's columns block ships its own responsive rules with higher
* specificity than a plain ".mp-highlights .mp-hicard" selector -
* `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`
* (0,3,0), forcing 100% width below 782px regardless of source order.
* Three cards don't make a clean two-up grid anyway (one is always left
* on its own row), so rather than fight core for an intermediate step,
* this matches its own breakpoint with equal-or-greater specificity:
* three-up above 60rem, stacked below it.
*/
@media (max-width: 60rem) {
.mp-highlights.wp-block-columns {
flex-wrap: wrap !important;
}
.mp-highlights.wp-block-columns .mp-hicard.wp-block-column {
flex-basis: 100% !important;
}
}
@media (max-width: 46rem) {
.mp-intro__badge {
inset-inline-end: 1.5rem;
}
}
/* ==================================================================
Facts strip
Four short, verifiable facts as icon pills - deliberately not a
fundraising-total or partner-count strip; there are no audited
figures to publish, so this states only what is actually true.
================================================================== */
.mp-facts-section {
padding-block: var(--wp--preset--spacing--50);
}
.mp-facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wp--preset--spacing--30);
}
.mp-fact {
display: flex;
align-items: center;
gap: 0.85rem;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
padding: 1.1rem 1.25rem;
box-shadow: 0 1px 2px rgb(19 26 51 / 0.04);
}
.mp-fact__icon {
flex: 0 0 auto;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--mist);
color: var(--wp--preset--color--navy);
display: flex;
align-items: center;
justify-content: center;
}
.mp-fact__icon svg {
inline-size: 1.35rem;
block-size: 1.35rem;
}
.mp-fact__text {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.mp-fact__value {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
color: var(--wp--preset--color--ink);
line-height: 1.2;
}
.mp-fact__label {
font-size: var(--wp--preset--font-size--x-small);
color: var(--wp--preset--color--muted);
line-height: 1.35;
}
/* ==================================================================
Core goals band
================================================================== */
.mp-goalscard {
padding: var(--wp--preset--spacing--40);
border-radius: var(--wp--custom--radius--large);
box-shadow: 0 24px 60px -32px rgb(19 26 51 / 0.35);
}
.mp-goalscard h3 {
margin: 0 0 var(--wp--preset--spacing--30);
}
.mp-goalscard .mp-checklist {
margin-block: 0;
border-block-start: 0;
padding-block-start: 0;
}
/* ==================================================================
FAQ teaser
================================================================== */
.mp-faqteaser .mp-faq {
padding-block: var(--wp--preset--spacing--30);
}
.mp-faqteaser .mp-faq:first-of-type {
border-block-start: 1px solid var(--wp--preset--color--hairline);
}
/* ==================================================================
About-page responsive
================================================================== */
@media (max-width: 60rem) {
.mp-facts {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 46rem) {
.mp-facts {
grid-template-columns: 1fr;
}
}
/* ==================================================================
Projects archive
Page-head panel, then a featured-project spotlight, then the card
grid for the rest. No Raised/Goal figures - the CPT has no such
data to report honestly.
================================================================== */
.mp-pagehead-section {
margin-block-end: var(--wp--preset--spacing--70);
}
.mp-projects-intro {
margin-block-end: var(--wp--preset--spacing--70);
}
.mp-featured-project {
margin-block-end: var(--wp--preset--spacing--70);
}
/* A white card around the whole row, echoing .mf-card - the photo
and text both sit inset from the card edge rather than the photo
bleeding to it. */
.mp-featured.wp-block-columns {
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
box-shadow: 0 1px 2px rgb(19 26 51 / 0.05);
padding: var(--wp--preset--spacing--40);
}
.mp-featured__media img {
display: block;
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.mp-featured h2 {
font-size: var(--wp--preset--font-size--xx-large);
margin: 0 0 0.5rem;
}
.mp-featured h2 a {
color: var(--wp--preset--color--navy);
text-decoration: none;
}
.mp-featured h2 a:hover {
text-decoration: underline;
}
.mp-featured .wp-block-post-excerpt {
margin-block-end: var(--wp--preset--spacing--40);
}
.mp-featured .mf-btn {
margin-block-start: var(--wp--preset--spacing--30);
}
@media (max-width: 60rem) {
.mp-featured.wp-block-columns {
flex-wrap: wrap !important;
}
/* Matches core's own .wp-block-columns:not(...) > .wp-block-column
(0,3,0) with equal-or-greater specificity - see the highlights
section fix above for the same issue. */
.mp-featured.wp-block-columns.wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
}
/* ==================================================================
Homepage sections
Centred section heads, the "how we work" icon cards, the projects
bar under the card grid, and the latest-news band.
================================================================== */
.mp-section-head {
margin-block-end: var(--wp--preset--spacing--60);
}
.mp-section-head .mp-eyebrow {
margin-block-end: 0.6rem;
}
.mp-section-head h2 {
margin: 0;
}
/* --- how we work --- */
.mp-how__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wp--preset--spacing--40);
}
.mp-how__card {
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
box-shadow: 0 1px 2px rgb(19 26 51 / 0.05);
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.mp-how__card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -24px rgb(19 26 51 / 0.45);
}
.mp-how__icon {
inline-size: 4.25rem;
block-size: 4.25rem;
border-radius: 50%;
background: var(--wp--preset--color--mist);
color: var(--wp--preset--color--navy);
display: flex;
align-items: center;
justify-content: center;
margin-block-end: var(--wp--preset--spacing--30);
}
.mp-how__icon svg {
inline-size: 2rem;
block-size: 2rem;
}
.mp-how__title {
font-size: var(--wp--preset--font-size--large);
margin: 0 0 0.5rem;
}
.mp-how__text {
margin: 0;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
line-height: 1.5;
}
/* --- projects bar --- */
.mp-projects-bar {
margin-block-start: var(--wp--preset--spacing--50);
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
gap: var(--wp--preset--spacing--40);
border: 1px solid var(--wp--preset--color--hairline);
}
.mp-projects-bar__text {
margin: 0;
display: flex;
align-items: center;
gap: 0.85rem;
font-weight: 600;
color: var(--wp--preset--color--ink);
}
.mp-projects-bar__badge {
flex: 0 0 auto;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
display: flex;
align-items: center;
justify-content: center;
}
.mp-projects-bar__badge svg {
inline-size: 1.35rem;
block-size: 1.35rem;
}
.mp-projects-bar .wp-block-buttons {
margin: 0;
}
/* --- responsive --- */
@media (max-width: 60rem) {
.mp-how__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 40rem) {
.mp-how__grid {
grid-template-columns: 1fr;
}
}
/* ==================================================================
Interior shell (phase 2)
One page-head panel, one white card, one pagination and one
entry-navigation style for every interior page.
================================================================== */
.mp-pagehead__lead {
margin: var(--wp--preset--spacing--30) auto 0;
max-width: 58ch;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.55;
color: var(--wp--preset--color--body);
}
.mp-pagehead .mp-pagehead__search {
inline-size: 100%;
max-width: 34rem;
margin: var(--wp--preset--spacing--40) auto 0;
}
.mp-pagehead--tall {
padding-block: clamp(4.5rem, 11vw, 8rem);
}
.mp-pagehead .wp-block-buttons {
margin-inline: auto;
}
/* The white card interior pages set their content in. */
.mp-panelcard {
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
box-shadow: 0 1px 2px rgb(19 26 51 / 0.05);
padding: clamp(1.5rem, 4vw, 2.5rem);
}
.mp-panelcard > :first-child {
margin-block-start: 0;
}
.mp-panelcard .mp-faq:first-child {
padding-block-start: 0;
}
.mp-panelcard .mp-faq:last-child {
border-block-end: 0;
padding-block-end: 0;
}
.mp-panelcard .wpcf7 > form > p:last-of-type {
margin-block-end: 0;
}
.mp-formrow,
.mp-teamrow {
margin-block-start: var(--wp--preset--spacing--40);
}
.mp-teamrow .mp-panelcard {
block-size: 100%;
}
.mp-teamrow .mp-panelcard h2 {
margin-block: 0 var(--wp--preset--spacing--30);
}
.mp-teamrow .mp-panelcard p:last-child {
margin-block-end: 0;
}
/* Query pagination as pills. */
.mp-pagination {
gap: 0.4rem;
}
.mp-pagination :is(a, .current, .dots) {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 2.6rem;
padding: 0.6rem 0.9rem;
border-radius: var(--wp--custom--radius--pill);
border: 1px solid var(--wp--preset--color--hairline);
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--navy);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
text-decoration: none;
}
.mp-pagination .current {
background: var(--wp--preset--color--navy);
border-color: var(--wp--preset--color--navy);
color: var(--wp--preset--color--white);
}
.mp-pagination a:hover {
background: var(--wp--preset--color--mist);
}
/* Single post foot: category line, then previous/next. */
.mp-entry-foot .wp-block-post-terms {
color: var(--wp--preset--color--muted);
margin-block-end: var(--wp--preset--spacing--40);
}
.mp-entry-nav {
gap: var(--wp--preset--spacing--30);
padding-block-start: var(--wp--preset--spacing--40);
border-block-start: 1px solid var(--wp--preset--color--hairline);
}
.mp-entry-nav .wp-block-post-navigation-link {
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--medium);
padding: 0.9rem 1.2rem;
font-size: var(--wp--preset--font-size--small);
max-width: 24rem;
}
.mp-entry-nav .wp-block-post-navigation-link a {
text-decoration: none;
color: var(--wp--preset--color--navy);
font-weight: 600;
}
.mp-entry-nav .post-navigation-link__label {
display: block;
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
margin-block-end: 0.2rem;
}
/* Footer social row reuses the header's icon style, on ink. */
.mp-footer__social {
margin-block-start: var(--wp--preset--spacing--40);
}
/* GiveWP single form: rendered through the classic wrapper, so the
panel and card are plain markup and need their own widths. */
.mp-give__wrap {
max-width: 78rem;
margin-inline: auto;
padding-inline: var(--wp--style--root--padding-right, 1.5rem);
}
.mp-give__card {
max-width: 46rem;
margin: var(--wp--preset--spacing--50) auto 0;
}
.mp-give .give-form-title,
.mp-give h1:empty {
display: none;
}
.mp-give .mf-back {
max-width: 46rem;
margin-inline: auto;
}
@media (max-width: 60rem) {
.mp-contactcards.wp-block-columns,
.mp-formrow.wp-block-columns,
.mp-teamrow.wp-block-columns {
flex-wrap: wrap !important;
}
}
/* The footer copy of the social row has nothing to its left to divide from. */
.mp-footer__social {
padding-inline-start: 0;
}
.mp-footer__social::before {
display: none;
}
/* A previous/next slot with no neighbour renders an empty box otherwise. */
.mp-entry-nav .wp-block-post-navigation-link:not(:has(a)) {
display: none;
}
/* ==================================================================
Contact page
Details list beside the form, then a white FAQ band with the
accordion items as separate cards.
================================================================== */
.mp-panelcard--mist {
border-color: transparent;
box-shadow: none;
}
.mp-panelcard--mist .wpcf7-form :is(input, select, textarea) {
border-color: var(--wp--preset--color--hairline);
}
.mp-contactlist {
list-style: none;
margin: var(--wp--preset--spacing--40) 0 0;
padding: var(--wp--preset--spacing--40);
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--30);
}
.mp-contactlist__item {
display: flex;
align-items: center;
gap: 0.9rem;
}
.mp-contactlist__icon {
flex: 0 0 auto;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--gold);
display: flex;
align-items: center;
justify-content: center;
}
.mp-contactlist__icon svg {
inline-size: 1.3rem;
block-size: 1.3rem;
}
.mp-contactlist__text {
display: flex;
flex-direction: column;
min-inline-size: 0;
font-weight: 600;
color: var(--wp--preset--color--ink);
overflow-wrap: anywhere;
}
.mp-contactlist__text a {
text-decoration: none;
color: var(--wp--preset--color--navy);
}
.mp-contactlist__text a:hover {
text-decoration: underline;
}
.mp-contactlist__label {
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mpenzi-eyebrow);
margin-block-end: 0.15rem;
}
/* "Looking for something else?" card under the FAQ intro. */
.mp-askcard {
margin-block-start: var(--wp--preset--spacing--40);
padding: var(--wp--preset--spacing--40);
background: var(--wp--preset--color--cream);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
}
.mp-askcard__head {
display: flex;
align-items: center;
gap: 0.9rem;
margin-block-end: var(--wp--preset--spacing--30);
}
.mp-askcard__icon {
flex: 0 0 auto;
inline-size: 3rem;
block-size: 3rem;
border-radius: var(--wp--custom--radius--medium);
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
color: var(--wp--preset--color--gold-deep);
display: flex;
align-items: center;
justify-content: center;
}
.mp-askcard__icon svg {
inline-size: 1.5rem;
block-size: 1.5rem;
}
.mp-askcard__text {
display: flex;
flex-direction: column;
}
.mp-askcard__text strong {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--large);
color: var(--wp--preset--color--ink);
}
.mp-askcard__text span {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
}
.mp-askcard__btn {
display: block;
text-align: center;
}
/* Accordion items as separate cards, marker on the right. */
.mp-faq--card {
background: var(--wp--preset--color--cream);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--medium);
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
margin-block-end: var(--wp--preset--spacing--30);
}
.mp-faq--card:last-child {
margin-block-end: 0;
}
.mp-faq--card summary {
justify-content: space-between;
font-size: var(--wp--preset--font-size--medium);
}
.mp-faq--card summary::before {
content: none;
}
.mp-faq--card summary::after {
content: "+";
font-weight: 400;
font-size: var(--wp--preset--font-size--large);
line-height: 1;
color: var(--wp--preset--color--gold-deep);
flex: 0 0 auto;
}
.mp-faq--card[open] summary::after {
content: "–";
}
.mp-faq--card p {
padding-inline-start: 0;
}
@media (max-width: 60rem) {
.mp-faqband .wp-block-columns {
flex-wrap: wrap !important;
}
}
/* Contact page: form card and details list, tightened. */
.mp-panelcard--mist {
padding: clamp(1.25rem, 4vw, 2.5rem);
}
.mp-panelcard--mist .wpcf7-form :is(input, select, textarea) {
box-shadow: none;
}
.mp-panelcard--mist .wpcf7-form :is(input, select, textarea):focus-visible {
box-shadow: 0 0 0 3px rgb(248 152 29 / 0.4);
}
.mp-contactlist__text a[href^="mailto:"] {
font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 60rem) {
.mp-formrow.wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
.mp-contactlist {
margin-block-end: var(--wp--preset--spacing--30);
}
}
@media (max-width: 40rem) {
.mp-contactlist {
padding: var(--wp--preset--spacing--30);
}
}
/* ==================================================================
Shell
The utility bar and every inner page's title band share one inset
width: a little narrower than the viewport, capped, so on the white
page ground they read as tabs hanging from the top edge.
================================================================== */
:root {
--mp-shell-gutter: clamp(0.75rem, 3vw, 3rem);
--mp-shell-max: 112rem;
--mp-shell-radius: clamp(1.5rem, 4vw, 3rem);
}
/* Utility bar: inset, rounded underneath, flush with the top edge. */
.mp-utilitybar.alignfull {
box-sizing: border-box;
inline-size: min(100% - 2 * var(--mp-shell-gutter), var(--mp-shell-max));
max-inline-size: none;
margin-inline: auto !important;
border-radius: 0 0 var(--wp--custom--radius--medium) var(--wp--custom--radius--medium);
}
/* Any page that opens with the title band pulls it up against the
masthead - no root gap, no top padding on main. */
.wp-site-blocks > main:has(.mp-pagehead-section) {
margin-block-start: 0;
padding-block-start: 0 !important;
}
.wp-site-blocks > main:has(.mp-pagehead-section) > .wp-block-post-content > .mp-pagehead-section:first-child,
.wp-site-blocks > main > .mp-pagehead-section:first-child,
.mp-give > .mp-pagehead-section {
margin-block-start: 0;
}
/* The band keeps its own text measure regardless of shell width. */
.mp-pagehead > * {
max-inline-size: 78rem;
}
.mp-pagehead h1 {
max-width: 24ch;
}
/* GiveWP's classic wrapper: the band sits outside the 78rem wrap. */
.mp-give__wrap {
margin-block-start: var(--wp--preset--spacing--70);
}
.mp-give__card {
margin-block-start: 0;
}
@media (max-width: 40rem) {
.mp-utilitybar.alignfull {
border-radius: 0 0 var(--wp--custom--radius--small) var(--wp--custom--radius--small);
}
}
/* On a phone the bar keeps only the call to action. */
@media (max-width: 30rem) {
.mp-u-lead {
display: none;
}
}
/* Hero, stacked: the photograph sits under the copy and fades upward
into the panel instead of sideways. */
@media (max-width: 60rem) {
.mp-hero {
min-block-size: 0;
}
.mp-hero__copy {
padding: clamp(2.25rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem);
}
.mp-hero__media::before {
background: linear-gradient(180deg, rgb(19 26 51) 0%, rgb(19 26 51 / 0.45) 22%, rgb(19 26 51 / 0) 55%);
}
}
/* ==================================================================
Donate page
Two payment cards (mobile money, bank transfer), then three steps.
================================================================== */
.mp-payrow {
margin-block-start: 0;
}
.mp-paycard {
block-size: 100%;
box-sizing: border-box;
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
box-shadow: 0 1px 2px rgb(19 26 51 / 0.05);
}
.mp-paycard__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 3.5rem;
block-size: 3.5rem;
border-radius: 50%;
background: var(--wp--preset--color--mist);
color: var(--wp--preset--color--navy);
margin-block-end: var(--wp--preset--spacing--30);
}
.mp-paycard__icon svg {
inline-size: 1.7rem;
block-size: 1.7rem;
}
.mp-paycard__title {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--x-large);
font-weight: 700;
color: var(--wp--preset--color--ink);
margin: 0 0 var(--wp--preset--spacing--30);
}
.mp-paycard__rows {
margin: 0;
display: flex;
flex-direction: column;
}
.mp-paycard__row {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding-block: var(--wp--preset--spacing--30);
border-block-start: 1px solid var(--wp--preset--color--hairline);
}
.mp-paycard__row:last-child {
padding-block-end: 0;
}
.mp-paycard__row dt {
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mpenzi-eyebrow);
}
.mp-paycard__row dd {
margin: 0;
font-weight: 600;
color: var(--wp--preset--color--ink);
overflow-wrap: anywhere;
}
/* The number itself: large, and selected whole on a tap or click. */
.mp-paycard__value {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.02em;
color: var(--wp--preset--color--navy);
user-select: all;
-webkit-user-select: all;
}
.mp-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--40);
counter-reset: step;
}
.mp-step {
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--hairline);
border-radius: var(--wp--custom--radius--large);
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.mp-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
margin-block-end: var(--wp--preset--spacing--30);
}
.mp-step__title {
font-size: var(--wp--preset--font-size--large);
margin: 0 0 0.4rem;
}
.mp-step__text {
margin: 0;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
}
@media (max-width: 60rem) {
.mp-payrow.wp-block-columns {
flex-wrap: wrap !important;
}
.mp-steps {
grid-template-columns: 1fr;
}
}
/* Donate page, interim: one centred card until the account details are in. */
.mp-paynote {
max-width: 46rem;
margin-inline: auto;
text-align: center;
}
.mp-paynote h2 {
margin-block: 0 var(--wp--preset--spacing--30);
max-width: 24ch;
margin-inline: auto;
}
.mp-paynote p:last-child {
margin-block-end: 0;
}
/* Projects archive: the featured card straddles the title band's lower
edge, the same way the gold panel straddles a section join. */
.mp-pagehead-section:has(+ .mp-featured-project) {
margin-block-end: 0;
}
.mp-pagehead-section:has(+ .mp-featured-project) .mp-pagehead {
padding-block-end: calc(clamp(4rem, 10vw, 7.5rem) + var(--mp-sep-overlap));
}
.mp-featured-project {
position: relative;
z-index: 2;
margin-block-start: calc(-1 * var(--mp-sep-overlap));
}
.mp-featured.wp-block-columns {
box-shadow: 0 24px 60px -32px rgb(19 26 51 / 0.35);
}
/* ==================================================================
Motion
Scroll-reveal, load-in for the hero and title band, and the small
hover/press responses. Everything here is inside a reduced-motion
guard, and the hidden states only apply once html.js is present, so
nothing is ever hidden from someone without JavaScript.
================================================================== */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
@keyframes mp-rise {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes mp-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mp-photo {
from {
opacity: 0;
transform: scale(1.05);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes mp-draw {
from {
background-size: 0 0.12em;
}
to {
background-size: 100% 0.12em;
}
}
/* --- scroll reveal --- */
html.js:not(.mp-motion-off) [data-reveal] {
opacity: 0;
}
html.js:not(.mp-motion-off) [data-reveal].is-inview {
animation: mp-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
animation-delay: calc(var(--mp-i, 0) * 90ms);
}
/* Entrance played: hand transform back to the element's own hover rules. */
html.js:not(.mp-motion-off) [data-reveal].is-revealed {
opacity: 1;
animation: none;
}
/* --- hero and title band, on load --- */
html.js:not(.mp-motion-off) .mp-hero__copy > * {
animation: mp-rise 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
html.js:not(.mp-motion-off) .mp-hero__copy > :nth-child(1) { animation-delay: 80ms; }
html.js:not(.mp-motion-off) .mp-hero__copy > :nth-child(2) { animation-delay: 180ms; }
html.js:not(.mp-motion-off) .mp-hero__copy > :nth-child(3) { animation-delay: 300ms; }
html.js:not(.mp-motion-off) .mp-hero__copy > :nth-child(4) { animation-delay: 420ms; }
html.js:not(.mp-motion-off) .mp-hero__title mark.mp-underline {
animation: mp-draw 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) 900ms both;
}
html.js:not(.mp-motion-off) .mp-hero__media img {
animation: mp-photo 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
html.js:not(.mp-motion-off) .mp-pillar {
animation: mp-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
html.js:not(.mp-motion-off) .mp-pillar:nth-child(1) { animation-delay: 500ms; }
html.js:not(.mp-motion-off) .mp-pillar:nth-child(2) { animation-delay: 600ms; }
html.js:not(.mp-motion-off) .mp-pillar:nth-child(3) { animation-delay: 700ms; }
html.js:not(.mp-motion-off) .mp-pagehead > * {
animation: mp-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
html.js:not(.mp-motion-off) .mp-pagehead > :nth-child(1) { animation-delay: 60ms; }
html.js:not(.mp-motion-off) .mp-pagehead > :nth-child(2) { animation-delay: 160ms; }
html.js:not(.mp-motion-off) .mp-pagehead > :nth-child(3) { animation-delay: 280ms; }
html.js:not(.mp-motion-off) .mp-pagehead > :nth-child(4) { animation-delay: 380ms; }
/* --- buttons: lift on hover, press on click --- */
.wp-element-button,
.mf-btn,
.mp-askcard__btn {
transition:
background-color var(--wp--custom--transition),
color var(--wp--custom--transition),
transform var(--wp--custom--transition),
box-shadow var(--wp--custom--transition);
}
.wp-element-button:hover,
.mf-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -14px rgb(19 26 51 / 0.55);
}
.wp-element-button:active,
.mf-btn:active {
transform: translateY(0) scale(0.98);
box-shadow: none;
}
.mp-hero__link:hover .mp-hero__link-icon {
transform: scale(1.15);
}
.mp-hero__link-icon {
transition: transform var(--wp--custom--transition);
}
/* --- cards: the photograph eases in on hover --- */
.mf-card__media img,
.mp-featured__media img {
transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mf-card:hover .mf-card__media img {
transform: scale(1.05);
}
.mp-featured__media .wp-block-post-featured-image {
overflow: hidden;
border-radius: var(--wp--custom--radius--large);
}
.mp-featured:hover .mp-featured__media img {
transform: scale(1.03);
}
.mp-how__icon,
.mp-step__num,
.mp-contactcards__icon,
.mp-paycard__icon,
.mp-fact__icon {
transition: transform var(--wp--custom--transition), background-color var(--wp--custom--transition);
}
.mp-how__card:hover .mp-how__icon,
.mp-contactcards .wp-block-column:hover .mp-contactcards__icon,
.mp-paycard:hover .mp-paycard__icon,
.mp-fact:hover .mp-fact__icon {
transform: translateY(-3px);
}
.mp-step:hover .mp-step__num {
transform: scale(1.1);
}
.mp-paycard,
.mp-step,
.mp-fact,
.mp-contactcards .wp-block-column {
transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.mp-paycard:hover,
.mp-step:hover,
.mp-contactcards .wp-block-column:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -24px rgb(19 26 51 / 0.45);
}
/* --- navigation: a gold rule slides in under the link --- */
.mp-header .mp-nav .wp-block-navigation-item__content {
position: relative;
}
.mp-header .mp-nav .wp-block-navigation-item__content::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: -0.3em;
block-size: 2px;
border-radius: 1px;
background: var(--wp--preset--color--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mp-header .mp-nav .wp-block-navigation-item__content:hover::after,
.mp-header .mp-nav .current-menu-item > .wp-block-navigation-item__content::after {
transform: scaleX(1);
}
/* --- accordions: marker turns, answer fades in --- */
.mp-faq summary::before,
.mp-faq summary::after {
transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mp-faq[open] summary::before,
.mp-faq[open] summary::after {
transform: rotate(180deg);
}
.mp-faq[open] > :not(summary) {
animation: mp-rise 0.35s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
/* --- links in prose and lists --- */
.mp-linklist a,
.mp-contactlist__text a {
transition: color var(--wp--custom--transition), translate var(--wp--custom--transition);
}
.mp-linklist a:hover {
translate: 3px 0;
}
}
/* Full-bleed bands inside page content meet edge to edge - no strip of
page ground between two coloured sections, or between the last band
and the footer. */
.wp-block-post-content > .alignfull + .alignfull {
margin-block-start: 0;
}
.wp-site-blocks > main:has(> .wp-block-post-content > .alignfull:last-child) {
padding-block-end: 0 !important;
}