- because the sequence carries the meaning --
* a screen reader should announce these as a numbered series. The connecting
* line is drawn on the list, behind the year markers, rather than as a border
* on each item, so it does not extend past the first and last markers.
*/
.elpis-timeline {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--30 );
}
.elpis-timeline li {
display: grid;
grid-template-columns: auto 1fr;
gap: var( --wp--preset--spacing--40 );
align-items: center;
}
.elpis-timeline-year {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border: 1px solid var( --wp--preset--color--accent );
border-radius: 50%;
background-color: var( --wp--preset--color--base );
color: var( --wp--preset--color--primary-deep );
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--small );
font-weight: 600;
}
/* The vertical connector, inset to the year markers' centre line. */
.elpis-timeline::before {
content: "";
position: absolute;
top: 2rem;
bottom: 2rem;
left: 2rem;
width: 1px;
background-color: var( --wp--preset--color--accent );
}
.elpis-timeline-card {
padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
}
.elpis-timeline-card h3 {
margin: 0;
font-size: var( --wp--preset--font-size--large );
color: var( --wp--preset--color--primary-deep );
}
.elpis-timeline-card p {
margin: var( --wp--preset--spacing--20 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}
.elpis-about-drives {
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: var( --wp--preset--spacing--40 );
align-items: center;
margin-top: var( --wp--preset--spacing--60 );
padding: var( --wp--preset--spacing--40 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
}
@media ( max-width: 700px ) {
.elpis-about-drives {
grid-template-columns: 1fr;
}
}
.elpis-about-drives h3 {
margin: 0;
font-size: var( --wp--preset--font-size--large );
color: var( --wp--preset--color--primary-deep );
}
.elpis-about-drives p {
margin: var( --wp--preset--spacing--20 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}
/* PLACEHOLDER IMAGE slot -- neutral fill, no src on the img inside. */
.elpis-about-drives-media {
aspect-ratio: 16 / 7;
border-radius: 4px;
background-color: var( --wp--preset--color--primary-tint );
overflow: hidden;
}
.elpis-about-drives-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* The About comp separates its four figures with hairlines, where the
* homepage's band does not. A left border on every item but the first, rather
* than a right border on all but the last, so it survives the 2-column
* reflow -- at two per row the item starting each row is the one that must
* lose its rule, and :nth-child does that cleanly where :last-child cannot.
*/
.elpis-stat-row--ruled .elpis-stat + .elpis-stat {
border-left: 1px solid rgba( 255, 255, 255, 0.2 );
}
@media ( max-width: 600px ) {
.elpis-stat-row--ruled .elpis-stat:nth-child( odd ) {
border-left: 0;
}
}
/* ---------------------------------------------------------------------------
Our programs
--------------------------------------------------------------------------- */
/*
* A fifth tint for the programme rows. The comp uses purple here; theme.json
* has none and none is added -- CLAUDE.md's colour discipline reserves the four
* category colours for the four homepage routes and warns that a colour used
* for anything else stops carrying meaning. primary-deep is an existing token,
* already the theme's link colour, and reads as distinct from teal-mid beside
* it. See patterns/page-programs.php for the full reasoning.
*/
.elpis-card-icon--deep {
background-color: var( --wp--preset--color--primary-deep );
color: var( --wp--preset--color--base );
}
.elpis-card h3.is-deep {
color: var( --wp--preset--color--primary-deep );
}
.elpis-help-card-link--primary-deep,
.elpis-help-card-link--primary-deep:hover,
.elpis-help-card-link--primary-deep:focus {
color: var( --wp--preset--color--primary-deep );
}
/* The comp's supporting paragraph under the hero lede -- longer and quieter
than the lede itself. */
.elpis-page-hero-note {
margin: var( --wp--preset--spacing--30 ) 0 0;
max-width: 58ch;
color: var( --wp--preset--color--primary-tint );
font-size: var( --wp--preset--font-size--small );
}
/*
* Five across at full width. An explicit count rather than the shared auto-fit
* grid: five equal programmes are a set, and auto-fit would reflow them 4+1 at
* some widths, which reads as one programme being different from the rest.
*/
.elpis-programs-summary,
.elpis-programs-detail {
grid-template-columns: repeat( 5, 1fr );
}
@media ( max-width: 1100px ) {
.elpis-programs-summary,
.elpis-programs-detail {
grid-template-columns: repeat( 2, 1fr );
}
}
@media ( max-width: 600px ) {
.elpis-programs-summary,
.elpis-programs-detail {
grid-template-columns: 1fr;
}
}
/*
* The tinted programme tile. Each carries a faint wash of its own hue, per the
* comp. Drawn with color-mix against white rather than five new palette
* entries: these are sub-12% surfaces, not design tokens anything else will
* reuse, and adding five near-white slugs to theme.json would put them in the
* editor's colour picker where they have no business being.
*/
.elpis-program-tile {
position: relative;
padding-top: var( --wp--preset--spacing--50 );
}
.elpis-program-tile--teal { background-color: color-mix( in srgb, var( --wp--preset--color--teal-mid ) 7%, #FFFFFF ); }
.elpis-program-tile--leaf { background-color: color-mix( in srgb, var( --wp--preset--color--leaf ) 9%, #FFFFFF ); }
.elpis-program-tile--gold { background-color: color-mix( in srgb, var( --wp--preset--color--gold-cta ) 12%, #FFFFFF ); }
.elpis-program-tile--deep { background-color: color-mix( in srgb, var( --wp--preset--color--primary-deep ) 7%, #FFFFFF ); }
.elpis-program-tile--coral { background-color: color-mix( in srgb, var( --wp--preset--color--coral ) 10%, #FFFFFF ); }
/*
* The number badge. aria-hidden in the markup: the cards are already an
* ordered set visually, and the number is decoration above a heading that
* names the programme -- announcing "1" before that name adds nothing.
*/
.elpis-program-num {
position: absolute;
top: var( --wp--preset--spacing--30 );
left: var( --wp--preset--spacing--30 );
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
color: var( --wp--preset--color--primary-deep );
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 600;
}
/* Five programme names across one row need a step down from the shared card
heading size, or every one of them wraps to four lines. */
.elpis-programs-summary .elpis-card h3 {
font-size: var( --wp--preset--font-size--medium );
}
.elpis-program-detail {
position: relative;
padding-top: 0;
overflow: hidden;
}
/* PLACEHOLDER IMAGE slot, bled to the card's edges -- so its own negative
margins cancel the card padding that everything below it keeps. */
.elpis-program-media {
aspect-ratio: 3 / 2;
width: calc( 100% + var( --wp--preset--spacing--40 ) * 2 );
margin: 0 calc( var( --wp--preset--spacing--40 ) * -1 ) var( --wp--preset--spacing--40 );
background-color: var( --wp--preset--color--primary-tint );
overflow: hidden;
}
.elpis-program-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.elpis-program-detail h3 {
margin-top: 0;
font-size: var( --wp--preset--font-size--large );
}
.elpis-program-detail h4 {
margin: var( --wp--preset--spacing--40 ) 0 0;
font-size: var( --wp--preset--font-size--small );
font-weight: 700;
color: var( --wp--preset--color--contrast );
}
/* "Our flagship program". accent-deep ink on a 25% gold tint measures 5.4:1. */
.elpis-program-badge {
display: inline-block;
margin: var( --wp--preset--spacing--20 ) 0 0;
padding: 0.15rem var( --wp--preset--spacing--30 );
border-radius: 999px;
background-color: color-mix( in srgb, var( --wp--preset--color--gold-cta ) 25%, #FFFFFF );
color: var( --wp--preset--color--accent-deep );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/*
* The "Elpis does not provide therapy" caveat. Set apart deliberately: it
* corrects a reasonable misreading of the programme's own name, and burying it
* in body copy is how a family ends up applying for the wrong thing.
*/
.elpis-program-note {
margin: var( --wp--preset--spacing--30 ) 0 0;
padding: var( --wp--preset--spacing--30 );
border-left: 3px solid var( --wp--preset--color--accent );
background-color: var( --wp--preset--color--shell );
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
/* Pins each detail card's action to the foot of the shared row height, so the
five buttons line up across cards whose sub-lists differ in length. */
.elpis-program-detail .elpis-btn {
width: 100%;
margin-top: auto;
}
.elpis-program-detail .elpis-check-list {
margin-bottom: var( --wp--preset--spacing--40 );
}
/*
* The Programs comp lays its FAQ out as three open columns on the teal band
* rather than one stacked accordion. The
elements stay -- still the
* right element, still collapsing on narrow screens where three will not fit.
*/
.elpis-faq--columns {
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: var( --wp--preset--spacing--40 );
align-items: start;
}
@media ( max-width: 900px ) {
.elpis-faq--columns {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------------
Resources & forms, and Transparency — document cards
--------------------------------------------------------------------------- */
/* The comp's "1. Beneficiary assistance" heading: an icon disc, then the
numbered title, centred as a unit. */
.elpis-numbered-head {
display: flex;
align-items: center;
justify-content: center;
gap: var( --wp--preset--spacing--30 );
margin-bottom: var( --wp--preset--spacing--20 );
}
.elpis-numbered-head h2 {
margin: 0;
font-size: var( --wp--preset--font-size--x-large );
text-transform: uppercase;
letter-spacing: 0.02em;
}
.elpis-doc-card {
justify-content: flex-start;
}
/* The form code, e.g. "(D-01)". Sits directly under its title as one unit, so
the shared card-paragraph top margin is removed. */
.elpis-doc-code {
margin: var( --wp--preset--spacing--10 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
}
/* Pins each card's download action to the foot of the shared row height, so
the buttons line up across cards whose descriptions differ in length. */
.elpis-doc-btn {
width: 100%;
margin-top: auto;
}
.elpis-doc-card > p:not( .elpis-doc-code ) {
margin-bottom: var( --wp--preset--spacing--40 );
}
/*
* "Coming soon" is plain text, not a disabled button -- a disabled control
* that a keyboard user can still reach but never operate is worse than a
* statement of fact. See patterns/page-transparency.php.
*/
.elpis-doc-pending {
/* Same reason as .elpis-btn: width:100% plus padding, and no universal
border-box reset in WordPress. */
box-sizing: border-box;
width: 100%;
margin-top: auto;
padding: 0.9rem var( --wp--preset--spacing--30 );
border-radius: 4px;
background-color: var( --wp--preset--color--shell );
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Five document cards per row where they exist as a set of five. */
.elpis-cards--five {
grid-template-columns: repeat( 5, 1fr );
}
@media ( max-width: 1100px ) {
.elpis-cards--five {
grid-template-columns: repeat( 2, 1fr );
}
}
@media ( max-width: 600px ) {
.elpis-cards--five {
grid-template-columns: 1fr;
}
}
.elpis-cards--pair {
grid-template-columns: repeat( 2, 1fr );
}
@media ( max-width: 800px ) {
.elpis-cards--pair {
grid-template-columns: 1fr;
}
}
/* A wide single-document card: icon, text, action in one row. */
.elpis-doc-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var( --wp--preset--spacing--40 );
align-items: center;
text-align: left;
}
@media ( max-width: 700px ) {
.elpis-doc-row {
grid-template-columns: 1fr;
justify-items: start;
}
}
.elpis-doc-row-text h3 {
margin: 0;
font-size: var( --wp--preset--font-size--large );
}
.elpis-doc-row-text p {
margin: var( --wp--preset--spacing--20 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}
/* The "Important reminder" strip. */
.elpis-notice {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var( --wp--preset--spacing--40 );
align-items: center;
margin-top: var( --wp--preset--spacing--50 );
padding: var( --wp--preset--spacing--40 );
border-radius: 4px;
border: 1px solid var( --wp--preset--color--primary-tint );
background-color: var( --wp--preset--color--base );
}
@media ( max-width: 800px ) {
.elpis-notice {
grid-template-columns: 1fr;
}
}
.elpis-notice-icon {
display: flex;
align-items: center;
justify-content: center;
width: var( --wp--preset--spacing--50 );
height: var( --wp--preset--spacing--50 );
border-radius: 50%;
background-color: var( --wp--preset--color--primary-deep );
color: var( --wp--preset--color--base );
}
.elpis-notice-icon svg {
width: 60%;
height: 60%;
}
.elpis-notice h3 {
margin: 0;
font-size: var( --wp--preset--font-size--small );
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var( --wp--preset--color--primary-deep );
}
.elpis-notice p {
margin: var( --wp--preset--spacing--10 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}
.elpis-notice-link {
display: inline-flex;
align-items: center;
gap: var( --wp--preset--spacing--20 );
min-height: 44px;
font-size: var( --wp--preset--font-size--small );
font-weight: 700;
}
.elpis-notice-link svg {
flex: 0 0 auto;
width: var( --wp--custom--icon--sm );
height: var( --wp--custom--icon--sm );
}
/* ---------------------------------------------------------------------------
Transparency — the commitment/FAQ split
--------------------------------------------------------------------------- */
.elpis-transparency-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var( --wp--preset--spacing--50 );
align-items: start;
}
@media ( max-width: 900px ) {
.elpis-transparency-split {
grid-template-columns: 1fr;
}
}
.elpis-panel {
padding: var( --wp--preset--spacing--50 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
}
.elpis-panel > h2 {
margin: 0 0 var( --wp--preset--spacing--40 );
font-size: var( --wp--preset--font-size--x-large );
text-align: center;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.elpis-panel--dark {
background-color: var( --wp--preset--color--teal-deep );
color: var( --wp--preset--color--base );
}
.elpis-panel--dark > h2 {
color: var( --wp--preset--color--base );
text-align: left;
text-transform: none;
letter-spacing: -0.01em;
}
.elpis-panel--dark > p {
margin: 0 0 var( --wp--preset--spacing--40 );
color: var( --wp--preset--color--primary-tint );
font-size: var( --wp--preset--font-size--small );
}
.elpis-commitment-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--40 );
}
.elpis-commitment-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: var( --wp--preset--spacing--30 );
align-items: center;
}
.elpis-commitment-list p {
margin: 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}
.elpis-contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--20 );
font-size: var( --wp--preset--font-size--small );
}
.elpis-contact-list li {
display: flex;
align-items: flex-start;
gap: var( --wp--preset--spacing--30 );
min-height: 44px;
}
.elpis-contact-list svg {
flex: 0 0 auto;
width: var( --wp--custom--icon--sm );
height: var( --wp--custom--icon--sm );
/* Optical alignment with the first line of a 1.7 line-height label. */
margin-top: 0.55em;
color: var( --wp--preset--color--accent );
}
/* White on teal-deep, 10.34:1 -- theme.json's global link colour would be
near-invisible here, the same problem the footer and utility bar solve. */
.elpis-contact-list a,
.elpis-contact-list a:hover,
.elpis-contact-list a:focus {
color: var( --wp--preset--color--base );
overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
Our people
--------------------------------------------------------------------------- */
.elpis-people {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var( --wp--preset--spacing--40 );
}
.elpis-people--five { grid-template-columns: repeat( 5, 1fr ); }
.elpis-people--six { grid-template-columns: repeat( 6, 1fr ); }
.elpis-people--seven { grid-template-columns: repeat( 7, 1fr ); }
@media ( max-width: 1100px ) {
.elpis-people--five,
.elpis-people--six,
.elpis-people--seven {
grid-template-columns: repeat( 3, 1fr );
}
}
@media ( max-width: 700px ) {
.elpis-people--five,
.elpis-people--six,
.elpis-people--seven {
grid-template-columns: repeat( 2, 1fr );
}
}
.elpis-person {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
text-align: center;
}
/*
* The comp renders trustees, partners and ambassadors as dark gold-framed
* portrait cards. Without photographs that treatment would be a dark rectangle
* with a name in it, so the frame is kept and the portrait area carries an
* initials monogram instead of an invented image.
*/
.elpis-person--formal {
background-color: var( --wp--preset--color--teal-deep );
border: 1px solid var( --wp--preset--color--accent );
color: var( --wp--preset--color--base );
}
/*
* PLACEHOLDER IMAGE: an initials monogram, aria-hidden in the markup because
* the name beside it already carries the meaning. Replace with a real ![]()
* and real alt text once the organisation supplies portraits.
*/
.elpis-person-photo {
display: flex;
align-items: center;
justify-content: center;
width: var( --wp--preset--spacing--70 );
height: var( --wp--preset--spacing--70 );
border-radius: 4px;
background-color: var( --wp--preset--color--primary-deep );
color: var( --wp--preset--color--accent );
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--x-large );
font-weight: 600;
letter-spacing: 0.02em;
}
.elpis-person-photo--round {
border-radius: 50%;
background-color: var( --wp--preset--color--primary-tint );
color: var( --wp--preset--color--primary-deep );
}
.elpis-person-name {
margin: var( --wp--preset--spacing--30 ) 0 0;
font-size: var( --wp--preset--font-size--small );
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.elpis-person--formal .elpis-person-name {
color: var( --wp--preset--color--base );
}
/* accent on teal-deep measures 4.38:1 -- past the 4.5:1 threshold only for
large text, so the role sits at x-small BOLD and takes the lighter
primary-tint instead (8.90:1) on the dark cards. */
.elpis-person-role {
margin: var( --wp--preset--spacing--20 ) 0 0;
padding: 0.1rem var( --wp--preset--spacing--30 );
border-radius: 999px;
background-color: var( --wp--preset--color--primary-deep );
color: var( --wp--preset--color--primary-tint );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.elpis-person-role--gold {
background-color: transparent;
padding: 0;
color: var( --wp--preset--color--accent-deep );
}
.elpis-person-quote {
margin: var( --wp--preset--spacing--30 ) 0 0;
padding: 0;
border: 0;
}
.elpis-person-quote p {
margin: 0;
color: var( --wp--preset--color--primary-tint );
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--x-small );
font-style: italic;
line-height: 1.5;
}
.elpis-person-meta {
margin: var( --wp--preset--spacing--20 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
.elpis-person-bio {
margin: var( --wp--preset--spacing--20 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
/* ---------------------------------------------------------------------------
Our people — organisational chart
--------------------------------------------------------------------------- */
.elpis-people-structure {
display: grid;
grid-template-columns: 3fr 2fr;
gap: var( --wp--preset--spacing--50 );
align-items: start;
}
@media ( max-width: 900px ) {
.elpis-people-structure {
grid-template-columns: 1fr;
}
}
/*
* Nested lists, not a drawn diagram. The parent/child relationships are in the
* markup where a screen reader can walk them; the CSS only draws boxes. An SVG
* chart would need every one of those relationships restated in a text
* alternative to convey as much.
*/
.elpis-orgchart,
.elpis-orgchart ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var( --wp--preset--spacing--20 );
}
/*
* The officer row runs horizontally under "Board of trustees", per the comp.
* `.elpis-orgchart ul` above is class-plus-element and would otherwise
* out-specify a plain `.elpis-orgchart-row`, leaving the five officers stacked
* in one column — so the nested case is spelled out explicitly rather than
* relying on source order.
*/
.elpis-orgchart-row,
.elpis-orgchart ul.elpis-orgchart-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var( --wp--preset--spacing--20 );
list-style: none;
margin: var( --wp--preset--spacing--20 ) 0 0;
padding: 0;
}
.elpis-orgchart-node {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 );
border-radius: 4px;
background-color: var( --wp--preset--color--primary-deep );
color: var( --wp--preset--color--base );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
text-align: center;
}
.elpis-orgchart-node--top {
background-color: var( --wp--preset--color--teal-deep );
}
/* Ink on gold, 7.55:1 -- CLAUDE.md's gold rule applies to a filled surface
here exactly as it does to a button. */
.elpis-orgchart-node--gold {
background-color: var( --wp--preset--color--gold-cta );
color: var( --wp--preset--color--contrast );
}
.elpis-orgchart-committees {
margin-top: var( --wp--preset--spacing--30 );
}
.elpis-orgchart-base {
margin: var( --wp--preset--spacing--30 ) 0 0;
text-align: center;
}
.elpis-culture {
padding: var( --wp--preset--spacing--50 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
}
.elpis-culture h2 {
margin: 0 0 var( --wp--preset--spacing--40 );
font-size: var( --wp--preset--font-size--x-large );
text-align: center;
}
.elpis-culture dl {
margin: 0;
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--40 );
}
.elpis-culture dl > div {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: var( --wp--preset--spacing--30 );
align-items: center;
}
.elpis-culture-icon {
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
width: var( --wp--preset--spacing--50 );
height: var( --wp--preset--spacing--50 );
color: var( --wp--preset--color--primary-deep );
}
.elpis-culture-icon svg {
width: 70%;
height: 70%;
}
.elpis-culture dt {
font-weight: 700;
font-size: var( --wp--preset--font-size--small );
color: var( --wp--preset--color--primary-deep );
}
.elpis-culture dd {
margin: 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
/* ---------------------------------------------------------------------------
News & events
--------------------------------------------------------------------------- */
.elpis-featured {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var( --wp--preset--spacing--50 );
align-items: center;
padding: var( --wp--preset--spacing--40 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
}
@media ( max-width: 900px ) {
.elpis-featured {
grid-template-columns: 1fr;
}
}
/* PLACEHOLDER IMAGE slot. */
.elpis-featured-media {
aspect-ratio: 16 / 10;
border-radius: 4px;
background-color: var( --wp--preset--color--primary-tint );
overflow: hidden;
}
.elpis-featured-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* accent-deep, 6.11:1 -- not the gold-cta the comp uses, which is 2.31:1 and
fails outright as text. */
.elpis-featured-date {
margin: 0;
color: var( --wp--preset--color--accent-deep );
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.elpis-featured-text h3 {
margin: var( --wp--preset--spacing--20 ) 0 0;
font-size: var( --wp--preset--font-size--xx-large );
line-height: 1.2;
}
.elpis-featured-text > p {
margin: var( --wp--preset--spacing--30 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}
.elpis-featured-facts {
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: var( --wp--preset--spacing--30 );
margin: var( --wp--preset--spacing--40 ) 0;
}
@media ( max-width: 600px ) {
.elpis-featured-facts {
grid-template-columns: 1fr;
}
}
.elpis-featured-facts dt {
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--large );
font-weight: 600;
color: var( --wp--preset--color--primary-deep );
}
.elpis-featured-facts dd {
margin: 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
.elpis-news-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var( --wp--preset--spacing--50 );
align-items: start;
}
@media ( max-width: 900px ) {
.elpis-news-split {
grid-template-columns: 1fr;
}
}
.elpis-panel-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var( --wp--preset--spacing--30 );
margin-bottom: var( --wp--preset--spacing--40 );
}
.elpis-panel-head h2 {
margin: 0;
font-size: var( --wp--preset--font-size--x-large );
text-transform: uppercase;
letter-spacing: 0.02em;
}
.elpis-btn--small {
min-height: 44px;
padding: 0.5rem var( --wp--preset--spacing--30 );
font-size: var( --wp--preset--font-size--x-small );
}
.elpis-event-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--30 );
}
.elpis-event-list li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var( --wp--preset--spacing--30 );
align-items: center;
padding: var( --wp--preset--spacing--30 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
}
@media ( max-width: 600px ) {
.elpis-event-list li {
grid-template-columns: auto 1fr;
}
}
.elpis-event-list h3 {
margin: 0;
font-size: var( --wp--preset--font-size--small );
font-weight: 700;
color: var( --wp--preset--color--primary-deep );
}
.elpis-event-list p {
margin: var( --wp--preset--spacing--10 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
.elpis-event-details {
display: inline-flex;
align-items: center;
gap: var( --wp--preset--spacing--20 );
min-height: 44px;
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
text-decoration: none;
}
.elpis-event-details svg {
flex: 0 0 auto;
width: var( --wp--custom--icon--sm );
height: var( --wp--custom--icon--sm );
}
/*
* PLACEHOLDER IMAGE x5. Empty slots with a neutral fill -- no stock
* photography of children ships (CLAUDE.md). The container is aria-hidden in
* the markup because empty slots are decoration; that attribute must come off
* when real photographs and their alt text go in.
*/
.elpis-gallery {
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: var( --wp--preset--spacing--20 );
}
.elpis-gallery-slot {
aspect-ratio: 1;
border-radius: 4px;
background-color: var( --wp--preset--color--primary-tint );
}
.elpis-gallery-slot--wide {
grid-column: span 3 / span 3;
aspect-ratio: 3 / 1;
}
@media ( min-width: 601px ) {
.elpis-gallery-slot--wide {
grid-column: span 3 / span 3;
aspect-ratio: 5 / 2;
}
}
/* ---------------------------------------------------------------------------
Figure rows (News & events, Get involved)
--------------------------------------------------------------------------- */
.elpis-figure-row {
display: grid;
grid-template-columns: repeat( 6, 1fr );
gap: var( --wp--preset--spacing--30 );
margin: 0;
}
@media ( max-width: 1000px ) {
.elpis-figure-row {
grid-template-columns: repeat( 3, 1fr );
}
}
@media ( max-width: 560px ) {
.elpis-figure-row {
grid-template-columns: repeat( 2, 1fr );
}
}
.elpis-figure {
padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
border-radius: 4px;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--lift );
text-align: center;
}
.elpis-figure dt {
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--xx-large );
font-weight: 600;
color: var( --wp--preset--color--primary-deep );
}
.elpis-figure dd {
margin: var( --wp--preset--spacing--10 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--x-small );
}
/* ---------------------------------------------------------------------------
Get involved
--------------------------------------------------------------------------- */
.elpis-page-hero-aside {
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--40 );
}
.elpis-hero-quote {
margin: 0;
padding: 0 0 0 var( --wp--preset--spacing--40 );
border-left: 3px solid var( --wp--preset--color--accent );
}
.elpis-hero-quote p {
margin: 0;
color: var( --wp--preset--color--base );
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--large );
font-style: italic;
line-height: 1.5;
}
.elpis-help-grid {
grid-template-columns: repeat( 3, 1fr );
}
@media ( max-width: 1000px ) {
.elpis-help-grid {
grid-template-columns: repeat( 2, 1fr );
}
}
@media ( max-width: 640px ) {
.elpis-help-grid {
grid-template-columns: 1fr;
}
}
.elpis-way-card {
padding-top: 0;
overflow: hidden;
}
/* PLACEHOLDER IMAGE slot, bled to the card edges with the icon disc overlapping
its lower-left corner as the comp draws it. */
.elpis-way-media {
position: relative;
aspect-ratio: 5 / 2;
width: calc( 100% + var( --wp--preset--spacing--40 ) * 2 );
margin: 0 calc( var( --wp--preset--spacing--40 ) * -1 ) var( --wp--preset--spacing--40 );
background-color: var( --wp--preset--color--primary-tint );
}
.elpis-way-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.elpis-way-media .elpis-card-icon {
position: absolute;
left: var( --wp--preset--spacing--40 );
bottom: calc( var( --wp--preset--spacing--30 ) * -1 );
}
.elpis-way-card h3 {
margin-top: 0;
text-transform: uppercase;
font-size: var( --wp--preset--font-size--large );
}
.elpis-way-card .elpis-btn {
margin-top: auto;
}
.elpis-way-card > p {
margin-bottom: var( --wp--preset--spacing--40 );
}
.elpis-give-row {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat( 9, 1fr );
gap: var( --wp--preset--spacing--20 );
}
@media ( max-width: 1100px ) {
.elpis-give-row {
grid-template-columns: repeat( 5, 1fr );
}
}
@media ( max-width: 700px ) {
.elpis-give-row {
grid-template-columns: repeat( 3, 1fr );
}
}
.elpis-give-row li {
display: flex;
flex-direction: column;
align-items: center;
gap: var( --wp--preset--spacing--20 );
padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--20 );
border-radius: 4px;
background-color: var( --wp--preset--color--shell );
text-align: center;
font-size: var( --wp--preset--font-size--x-small );
font-weight: 700;
color: var( --wp--preset--color--primary-deep );
}
.elpis-give-icon {
display: flex;
align-items: center;
justify-content: center;
width: var( --wp--preset--spacing--50 );
height: var( --wp--preset--spacing--50 );
color: var( --wp--preset--color--primary-deep );
}
.elpis-give-icon svg {
width: 100%;
height: 100%;
}
.elpis-impact-together {
display: grid;
grid-template-columns: 1fr 3fr;
gap: var( --wp--preset--spacing--50 );
align-items: center;
}
@media ( max-width: 900px ) {
.elpis-impact-together {
grid-template-columns: 1fr;
}
}
.elpis-impact-together h2 {
margin: 0;
font-size: var( --wp--preset--font-size--x-large );
text-transform: uppercase;
letter-spacing: 0.02em;
}
.elpis-impact-together > div > p {
margin: var( --wp--preset--spacing--30 ) 0 0;
color: var( --wp--preset--color--muted );
font-size: var( --wp--preset--font-size--small );
}