s, not buttons — no click affordance.
(The global .teaser-team-card click delegate in main.js still
fires on these, but openModal() no-ops with no data-modal-target
to resolve, so nothing opens.) */
.teaser-team-card--static {
cursor: default;
}
.teaser-team-card__image {
display: block;
aspect-ratio: 471 / 553;
overflow: hidden;
}
.teaser-team-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.teaser-team-card__body {
display: block;
padding: 16px;
flex: 1 1 auto;
}
.teaser-team-rule {
display: block;
border-top: 3px solid var(--yellow);
margin-bottom: 10px;
}
.bg_white .teaser-team-rule { border-top: 3px solid var(--darkgrey);}
.teaser-team-card__name {
display: block;
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(13px, 0.8vw + 10px, 16px);
line-height: 1.15;
margin-bottom: 4px;
}
.teaser-team-card__job {
display: block;
font-family: 'ABC Whyte', sans-serif;
font-size: 13px;
line-height: 1.4;
}
/* Card body text colour follows its own background, not the section's
— bg_grey cards (Board) need white text, bg_white cards (YAB) need
dark text. */
.teaser-team-card__body.bg_grey .teaser-team-card__name,
.teaser-team-card__body.bg_grey .teaser-team-card__job {
color: var(--white);
}
.teaser-team-card__body.bg_white .teaser-team-card__name,
.teaser-team-card__body.bg_white .teaser-team-card__job {
color: var(--darkgrey);
}
.teaser-team__cta-wrap {
margin-top: 32px;
}
.teaser-team__cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
/* ── Modal — deliberately named teaser-team-modal-*, not
team-modal-*, because main.js has a dedicated block wired to these
exact selectors (#teaser-team-modal, .teaser-team-card,
.teaser-team-modal__body, etc). Layout below is copied from the
"team" module's .team-modal CSS so both look identical, but the
class names stay separate to match the JS that's already live. ── */
.teaser-team-modal-overlay {
position: fixed;
inset: 0;
background: rgba(30, 30, 30, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.teaser-team-modal-overlay.is-open {
opacity: 1;
visibility: visible;
}
.teaser-team-modal {
position: relative;
background: var(--white);
max-width: 900px;
width: 100%;
display: flex;
flex-wrap: wrap;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.teaser-team-modal__close {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
background: var(--darkgrey);
color: var(--white);
border: none;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 1;
}
.teaser-team-modal__body {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.teaser-team-modal__image {
flex: 0 0 auto;
height: 553px;
aspect-ratio: 256 / 300;
}
.teaser-team-modal__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.teaser-team-modal__content {
flex: 1 1 300px;
max-height: 553px;
overflow-y: auto;
padding: 40px;
}
.teaser-team-modal__name {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(22px, 1.5vw + 14px, 30px);
line-height: 1.15;
color: var(--darkgrey);
margin: 0 0 6px;
}
.teaser-team-modal__job {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--grey);
font-size: 16px;
margin: 0 0 16px;
}
.teaser-team-modal__pronouns {
font-family: 'ABC Whyte', sans-serif;
color: var(--grey);
margin: 0 0 16px;
}
.teaser-team-modal__bio p {
font-family: 'ABC Whyte', sans-serif;
color: var(--darkgrey);
margin: 0 0 1em;
}
.teaser-team-modal__bio p:last-child {
margin-bottom: 0;
}
body.teaser-team-modal-open {
overflow: hidden;
}
@media (max-width: 767px) {
.teaser-team-modal {
max-height: 90vh;
overflow-y: auto;
}
.teaser-team-modal__image {
flex-basis: 100%;
height: 260px;
}
.teaser-team-modal__content {
max-height: none;
padding: 24px;
}
}
/* ============================================================
GRANT ENQUIRY
============================================================ */
.grant-enquiry {
padding-top:80px; padding-bottom:20px;
color: var(--white);
}
.grant-enquiry__intro {
font-family: 'ABC Whyte', sans-serif;
font-weight: 600;
font-size: clamp(18px, 1.2vw + 12px, 22px);
max-width: 700px;
margin-bottom: 48px;
}
.grant-enquiry__intro p {
margin: 0 0 1em;
}
.grant-enquiry__intro p:last-child {
margin-bottom: 0;
}
.grant-enquiry__notes-title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(20px, 1.5vw + 14px, 28px);
margin: 0 0 32px;
}
.grant-enquiry__bullets {
list-style: none;
margin: 0 0 48px;
padding: 0;
max-width: 900px;
}
.grant-enquiry__bullet {
display: flex;
gap: 20px;
margin-bottom: 32px;
}
.grant-enquiry__bullet:last-child {
margin-bottom: 0;
}
.grant-enquiry__bullet-marker {
flex: 0 0 18px;
width: 18px;
height: 18px;
background: var(--yellow);
margin-top: 4px;
}
.grant-enquiry__bullet-text {
font-family: 'ABC Whyte', sans-serif;
font-weight: 600;
}
.grant-enquiry__bullet-text p {
margin: 0;
}
.grant-enquiry__rule {
border: none;
border-top: 1px solid var(--yellow);
margin: 0;
}
@media (max-width: 767px) {
.grant-enquiry__bullet {
gap: 14px;
}
}
/* ============================================================
ADDRESS
============================================================ */
.address {
overflow: hidden;
}
.address__box {
display: flex;
align-items: center;
min-height: 320px;
padding: 40px 60px;
}
.address__box-inner {
max-width: 480px;
}
.address__box--1 {
background: var(--grey);
color: var(--white);
}
.address__box--1 .address__box-inner {
}
.address__box--1 .address__box-inner p {
margin: 0;
}
.address__box--1 .address__box-inner a {
color: var(--yellow);
text-decoration: underline;
}
.address__box--2 {
background: var(--yellow);
color: var(--darkgrey);
}
.address__box--2 .address__box-inner p {
margin: 0;
}
@media (max-width: 767px) {
.address__box {
min-height: 0;
padding: 32px 24px;
}
}
/* ============================================================
MODULE: plain_text
============================================================ */
.module--plain_text {
padding: 80px 0;
}
.module--plain_text.bg-white {
background: var(--white);
color: var(--darkgrey);
}
.module--plain_text.bg-grey {
background: var(--grey);
color: var(--white);
}
.module--plain_text.bg-darkgrey {
background: var(--darkgrey);
color: var(--white);
}
.module--plain_text__container--reduced {
max-width: 760px;
}
.module--plain_text__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(24px, 2vw + 14px, 36px);
line-height: 1.1;
margin: 0 0 24px;
}
.module--plain_text__text {
font-family: 'ABC Whyte', sans-serif;
}
.module--plain_text__text p {
margin: 0 0 1.4em;
}
.module--plain_text__text p:last-child {
margin-bottom: 0;
}
.bg-darkgrey .module--plain_text__text p a {
color: var(--yellow) !important;
text-decoration: none;
}
.bg-darkgrey .module--plain_text__text p a:hover {
color: var(--white) !important;
text-decoration: none;
}
/* Side-by-side: title stays put in its own column at the top of the
row rather than trying to vertically center against variable-length
text next to it. */
.module--plain_text--side-by-side .module--plain_text__row {
align-items: flex-start;
}
.module--plain_text--side-by-side .module--plain_text__title {
margin-bottom: 0;
}
@media (max-width: 767px) {
.module--plain_text--side-by-side .module--plain_text__title {
margin-bottom: 16px;
}
}
/* ============================================================
defaultpage
============================================================ */
.defaultpage {padding:80px 0 }
/* ============================================================
MODULE BOX: drop arrow (title_and_text, show_arrow toggle)
Bleeds out of its own panel into whatever sits below it.
Requires .module-box__panel to allow overflow — if any ancestor
has overflow:hidden, this gets clipped at the panel's bottom edge.
============================================================ */
.module-box__panel {
position: relative;
z-index: 1;
}
.module-box__drop-arrow {
position: absolute;
left: 80px;
bottom: -50px;
width: clamp(90px, 12vw, 200px);
color: var(--yellow);
z-index: 2;
pointer-events: none;
}
@media (max-width: 992px) {
.module-box__drop-arrow {
display: none;
}
}
/* ============================================================
DONATE
============================================================ */
.donate { padding-top: 70px;
padding-bottom: 70px;}
/* ============================================================
404 HERO
============================================================ */
/* Layout, sizing, and the gradient overlay now come from the shared
.template-parts/module + .has-headline classes (see modules.css,
"MODULE: Header image/video") — this block only owns the 404-specific
headline/text/CTA typography. */
.error-404-hero__headline {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(40px, 5vw + 20px, 90px);
line-height: 0.95;
margin: 0 0 16px;
}
.error-404-hero__text {
font-family: 'ABC Whyte', sans-serif;
font-weight: 600;
font-size: 18px;
margin: 0 0 24px;
}
.error-404-hero__cta {
display: inline-block;
background: var(--yellow);
color: var(--darkgrey);
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
padding: 16px 32px;
}
.error-404-hero__cta:hover {
opacity: 0.85;
}
@media (max-width: 767px) {
.error-404-hero__cta {
padding: 14px 28px;
}
}
.template-parts\/module .container > .row {
width: 100%;
}
/* ============================================================
HAMILTON TERMS
============================================================ */
.hamilton-terms {
padding-bottom: 80px;
color: var(--white);
}
.hamilton-terms__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 32px;
}
.hamilton-terms__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 48px);
line-height: 1;
margin: 0 0 32px;
}
.hamilton-terms__divider {
border: none;
border-top: 1px solid var(--yellow);
margin: 48px 0 24px;
}
.hamilton-terms__section-title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--yellow);
font-size: clamp(20px, 1.4vw + 14px, 26px);
margin: 0 0 24px;
}
.hamilton-terms__text {
font-family: 'ABC Whyte', sans-serif;
}
.hamilton-terms__text p {
margin: 0 0 1.4em;
}
.hamilton-terms__text p:last-child {
margin-bottom: 0;
}
.hamilton-terms__text ul,
.hamilton-terms__text ol {
margin: 0 0 1.4em;
padding-left: 1.4em;
}
.hamilton-terms__text li {
margin-bottom: 0.6em;
}
.hamilton-terms__text li:last-child {
margin-bottom: 0;
}
/* ============================================================
HAMILTON FOOTER
============================================================ */
.hamilton-footer {
padding: 80px 0;
text-align: center;
}
.hamilton-footer__logo {
margin-bottom: 40px;
}
.hamilton-footer__logo img {
max-width: 320px;
height: auto;
margin: 0 auto;
}
.hamilton-footer__text {
font-family: 'ABC Whyte', sans-serif;
color: var(--darkgrey);
max-width: 800px;
margin: 0 auto 48px;
}
.hamilton-footer__text p {
margin: 0;
}
.hamilton-footer__text a {
color: var(--darkgrey);
text-decoration: underline;
}
.hamilton-footer__partner-logo {
margin-bottom: 32px;
}
.hamilton-footer__partner-logo img {
max-width: 220px;
height: auto;
margin: 0 auto;
}
.hamilton-footer__terms {
display: inline-block;
font-family: 'ABC Whyte', sans-serif;
font-weight: 600;
color: var(--purple);
text-decoration: none;
font-size: 18px;
}
.hamilton-footer__terms:hover {
text-decoration: underline;
}
/* ============================================================
HAMILTON BOARD
============================================================ */
.hamilton-board {
padding-bottom: 80px;
color: var(--white);
}
.hamilton-board__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 32px;
}
.hamilton-board__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 48px);
line-height: 1;
margin: 0 0 24px;
}
.hamilton-board__intro {
font-family: 'ABC Whyte', sans-serif;
}
.hamilton-board__intro p {
margin: 0;
}
.hamilton-board__divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin: 48px 0 24px;
}
.hamilton-board__section-title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--yellow);
font-size: clamp(18px, 1.2vw + 12px, 22px);
margin: 0 0 24px;
}
.hamilton-board__grid {
display: flex;
flex-wrap: wrap;
}
/* ── Card ─────────────────────────────────────────────────── */
.hc-board-card-wrap {
margin-bottom: 24px;
display: flex;
}
.hc-board-card {
display: flex;
flex-direction: column;
width: 100%;
}
.hc-board-card__image {
display: block;
aspect-ratio: 321 / 306;
overflow: hidden;
}
.hc-board-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hc-board-card__body {
display: block;
padding: 20px;
flex: 1 1 auto;
background: rgba(255, 255, 255, 0.08);
}
.hc-board-rule {
display: block;
border-top: 3px solid var(--yellow);
margin-bottom: 12px;
}
.hc-board-card__name {
display: block;
font-family: Anton, sans-serif;
font-weight: 400;
color: var(--white);
text-transform: uppercase;
font-size: clamp(15px, 1vw + 11px, 18px);
line-height: 1.15;
}
/* ============================================================
HAMILTON REPORT
============================================================ */
.hamilton-report-header {
padding-bottom: 60px;
color: var(--white);
}
.hamilton-report-header__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 32px;
}
.hamilton-report-header__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 48px);
line-height: 1;
margin: 0 0 24px;
}
.hamilton-report-header__intro {
font-family: 'ABC Whyte', sans-serif;
}
.hamilton-report-header__intro p {
margin: 0;
}
.hamilton-report-header__intro em,
.hamilton-report-header__intro i {
font-style: italic;
color: var(--yellow);
}
/* ── Boxes ────────────────────────────────────────────────── */
.hamilton-report__row {
display: flex;
flex-wrap: wrap;
min-height: 340px;
margin-top:30px; margin-bottom:30px;
}
.hamilton-report__image {
flex: 0 0 45%;
max-width: 45%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.hamilton-report__image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.hamilton-report__content {
flex: 1;
color: var(--white);
padding: 48px 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hamilton-report__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(22px, 1.5vw + 14px, 30px);
line-height: 1;
margin: 0 0 16px;
}
.hamilton-report__text {
font-family: 'ABC Whyte', sans-serif;
margin: 0 0 24px;
}
.hamilton-report__cta {
display: inline-block;
background: var(--yellow);
color: var(--darkgrey);
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
padding: 16px 32px;
align-self: flex-start;
}
.hamilton-report__cta:hover {
opacity: 0.85;
}
@media (max-width: 767px) {
.hamilton-report__row {
min-height: 0;
}
.hamilton-report__image,
.hamilton-report__content {
flex: 0 0 100%;
max-width: 100%;
}
.hamilton-report__image {
height: 240px;
}
.hamilton-report__content {
padding: 32px 24px;
}
}
/* ============================================================
QUOTE FULL
============================================================ */
.quote-full {
padding: 140px 0;
text-align: center;
}
.quote-full__mark {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: 70px;
line-height: 1;
color: var(--darkgrey);
margin-bottom: 8px;
}
.quote-full__text {
font-family: 'ABC Whyte', sans-serif;
font-weight: 700;
color: var(--darkgrey);
font-size: clamp(20px, 1.5vw + 14px, 28px);
line-height: 1.4;
max-width: 900px;
margin: 0 auto 32px;
}
.quote-full__attribution {
margin: 0;
}
.quote-full__name {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--darkgrey);
font-size: 16px;
letter-spacing: 0.02em;
}
.quote-full__role {
font-family: 'ABC Whyte', sans-serif;
color: var(--darkgrey);
font-size: 15px;
}
/* ============================================================
HAMILTON NAV (shared across intro / report / board sections)
============================================================ */
.hamilton-nav {
display: flex;
justify-content: flex-end;
gap: 32px;
padding: 40px 0 32px;
}
.hamilton-nav__link {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 0.02em;
color: var(--white);
text-decoration: none;
}
.hamilton-nav__link.is-active {
color: var(--yellow);
}
.hamilton-nav__link:hover {
color: var(--yellow);
}
/* ============================================================
HAMILTON INTRO
============================================================ */
.hamilton-intro {
padding-bottom: 80px;
color: var(--white);
}
.hamilton-intro__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 32px;
opacity:1;
}
.hamilton-intro__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 48px);
line-height: 1;
margin: 0 0 40px;
}
.hamilton-intro__columns {
margin-bottom: 40px;
}
.hamilton-intro__column {
font-family: 'ABC Whyte', sans-serif;
}
.hamilton-intro__column p {
margin: 0 0 1.6em;
}
.hamilton-intro__column p:last-child {
margin-bottom: 0;
}
.hamilton-intro__column em,
.hamilton-intro__column i {
font-style: italic;
}
.hamilton-intro__quote {
max-width: 700px;
margin: 0 auto 40px;
text-align: center;
}
.hamilton-intro__quote-text {
font-family: 'ABC Whyte', sans-serif;
font-style: italic;
font-size: clamp(18px, 1.2vw + 14px, 22px);
margin: 0 0 12px;
}
.hamilton-intro__quote-name {
font-family: Anton, sans-serif;
text-transform: uppercase;
font-size: 14px;
color: var(--yellow);
margin: 0;
}
.hamilton-intro__ctas {
text-align: center;
}
.hamilton-intro__cta-link {
display: block;
font-family: 'ABC Whyte', sans-serif;
text-decoration: underline;
font-size: 18px;
margin-bottom: 32px;
}
.hamilton-intro__cta-link1 {
display: block;
font-family: 'ABC Whyte', sans-serif;
font-size: 18px;
margin-bottom: 32px;
}
.hamilton-report-header p a {color: var(--yellow);}
.hamilton-report-header p a:hover {color: white;}
.hamilton-intro__cta-button {
display: inline-block;
background: var(--yellow);
color: var(--darkgrey) !important;
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
padding: 20px 48px;
}
.hamilton-intro__cta-button:hover {
opacity: 0.85;
}
@media (max-width: 767px) {
.hamilton-nav {
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
padding: 24px 0;
}
}
/* ============================================================
GRAVITY FORMS THEME OVERRIDE
Targets the GF 2.5+ "no-framework" markup (gform-theme--no-framework),
so there's no existing grid/layout CSS to fight — this is close to
a from-scratch skin on top of GF's bare structural classes.
============================================================ */
.gform_wrapper.gravity-theme .gfield_required {
color: var(--yellow) !important;
}
.gform_wrapper.gravity-theme {
font-family: 'ABC Whyte', sans-serif;
}
.gform_wrapper.gravity-theme .gform_fields {
display: block;
}
.gform_wrapper.gravity-theme .gfield {
margin-bottom: 32px;
}
/* ── Labels ───────────────────────────────────────────────── */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform-field-label {
font-family: Anton, sans-serif;
font-weight: 400 !important;
text-transform: uppercase;
color: var(--white);
font-size: 20px;
letter-spacing: 0;
margin-bottom: 12px;
}
label.gfield_label, legend.gfield_label {color:var(--yellow) !important; }
.gchoice .gform-field-label { font-family: 'ABC Whyte', sans-serif !important; text-transform:none !important;}
/* Required indicator: this form currently shows "(Required)" as
visible text via GF's own setting. Switching Form Settings →
Required Field Indicator to "Asterisk" in the GF admin is the
proper fix — this CSS is a stand-in until/unless that's changed. */
.gform_wrapper.gravity-theme .gfield_required_text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.gform_wrapper.gravity-theme .gfield_required::before {
content: '*';
color: inherit;
}
/* Sub-labels (First / Last under the name field) */
.gform_wrapper.gravity-theme .gform-field-label--type-sub {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
text-transform: none;
color: var(--white);
font-size: 18px;
margin-top: 8px;
margin-bottom: 0;
}
/* ── Inputs ───────────────────────────────────────────────── */
.gform_wrapper.gravity-theme input[type='text'],
.gform_wrapper.gravity-theme input[type='email'],
.gform_wrapper.gravity-theme input[type='tel'],
.gform_wrapper.gravity-theme input[type='url'],
.gform_wrapper.gravity-theme input[type='number'],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
width: 100%;
background: #4d4d4d;
border: none;
border-radius: 0;
color: var(--white);
font-family: 'ABC Whyte', sans-serif;
font-size: 16px;
padding: 16px;
box-shadow: none;
}
.gform_wrapper.gravity-theme textarea {
min-height: 420px;
resize: vertical;
}
.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme textarea:focus,
.gform_wrapper.gravity-theme select:focus {
outline: 2px solid var(--yellow);
outline-offset: -2px;
}
/* ── Name field: First / Last side by side ───────────────────
gform-grid-row / gform-grid-col exist in the markup but have no
layout CSS since GF's own framework isn't loaded on this form. */
.gform_wrapper.gravity-theme .ginput_complex.gform-grid-row {
display: flex;
gap: 40px;
flex-wrap: wrap;
}
.gform_wrapper.gravity-theme .gform-grid-col {
flex: 1 1 240px;
}
/* ── Submit button ────────────────────────────────────────── */
.gform_wrapper.gravity-theme .gform_footer {
margin-top: 24px;
padding: 0;
}
.gform_wrapper.gravity-theme .gform_button.button {
background: var(--yellow);
color: var(--darkgrey);
border: none;
border-radius: 0;
font-family: Anton, sans-serif;
text-transform: uppercase;
font-weight: 400; font-size: clamp(18px, 1.5vw + 12px, 28px); text-transform:uppercase;
padding: 8px 40px;
cursor: pointer; transition: background-color 0.3s ease;
}
.gform_wrapper.gravity-theme .gform_button.button:hover {
opacity: 0.85;
}
/* ── Validation ───────────────────────────────────────────── */
.gform_wrapper.gravity-theme .gfield_description,
.gform_wrapper.gravity-theme .gform_description {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.gform_wrapper.gravity-theme .validation_message,
.gform_wrapper.gravity-theme .gfield_validation_message {
color: #ff6b6b;
font-family: 'ABC Whyte', sans-serif;
margin-top: 8px;
}
.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error textarea {
outline: 2px solid #ff6b6b;
outline-offset: -2px;
}
@media (max-width: 575px) {
.gform_wrapper.gravity-theme .ginput_complex.gform-grid-row {
flex-direction: column;
gap: 24px;
}
.gform_wrapper.gravity-theme textarea {
min-height: 280px;
}
}
/* ============================================================
TEXT IMAGE SLIDER
============================================================ */
.text-image-slider__inner {
display: flex;
min-height: 500px;
}
.text-image-slider__col--text {
flex: 0 0 50%;
max-width: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 60px 5vw 40px 5vw;
}
.text-image-slider__col--media {
flex: 0 0 50%;
max-width: 50%;
overflow: hidden;
}
/* ── Header (fixed, never slides) ────────────────────────── */
.text-image-slider__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 24px;
opacity:1;
}
.text-image-slider__general-title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--white);
font-size: clamp(22px, 1.5vw + 14px, 30px);
margin: 0 0 40px;
}
/* ── Text track ───────────────────────────────────────────── */
.text-image-slider__text-viewport {
overflow: hidden;
flex: 1 1 auto;
}
.text-image-slider__text-track {
display: flex;
transition: transform 0.5s ease;
height: 100%;
}
.text-image-slider__text-slide {
flex: 0 0 100%;
max-width: 100%;
}
.text-image-slider__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--yellow);
font-size: clamp(32px, 2.5vw + 18px, 48px);
line-height: 1;
margin: 0 0 24px;
}
.text-image-slider__body {
font-family: 'ABC Whyte', sans-serif;
color: var(--white);
margin-bottom: 24px;
}
.text-image-slider__body p {
margin: 0 0 1em;
}
.text-image-slider__body p:last-child {
margin-bottom: 0;
}
.text-image-slider__cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
/* ── Nav (fixed, never slides) ───────────────────────────── */
.text-image-slider__nav {
display: flex;
gap: 20px;
margin-top: 24px;
}
.text-image-slider__prev,
.text-image-slider__next {
background: none;
border: none;
color: var(--mediumgrey);
font-size: 22px;
cursor: pointer;
padding: 4px;
}
.text-image-slider__prev:hover,
.text-image-slider__next:hover {
color: var(--white);
}
/* ── Media track ──────────────────────────────────────────── */
.text-image-slider__media-viewport {
overflow: hidden;
height: 100%;
}
.text-image-slider__media-track {
display: flex;
height: 100%;
transition: transform 0.5s ease;
}
.text-image-slider__media-slide {
flex: 0 0 100%;
max-width: 100%;
height: 100%;
}
.text-image-slider__media-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.text-image-slider__embed,
.text-image-slider__embed iframe,
.text-image-slider__video {
width: 100%;
height: 100%;
}
.text-image-slider__video {
object-fit: cover;
}
/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 991px) {
.text-image-slider__inner {
flex-direction: column;
min-height: 0;
}
.text-image-slider__col--text,
.text-image-slider__col--media {
flex: 1 1 100%;
max-width: 100%;
}
.text-image-slider__col--media {
height: 360px;
}
.text-image-slider__col--text {
padding: 40px 24px;
}
}
/* ============================================================
PARTNERS
============================================================ */
.partners__gridcontainer {padding-bottom:80px;}
.partners__header {
padding: 40px 0 80px;
color: var(--white);
}
.partners__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 44px);
line-height: 1;
margin: 16px 0 24px;
}
.partners__filter {
border: 1px solid var(--grey);
background: var(--white);
padding: 10px 16px;
padding-right: 40px; /* room for the custom arrow */
font-family: 'ABC Whyte', sans-serif;
font-size: 16px;
margin-top: 12px;
width: 100%;
max-width: 490px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 21px center; /* was effectively ~16px in, now 5px further left */
background-size: 12px 8px;
}
.partners__intro {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
max-width: 720px;
margin-top: 16px;
}
.partners__intro p {
margin: 0;
}
.partners__intro a {
color: var(--purple);
text-decoration: underline;
}
.partners__grid {
padding-top: 40px;
}
/* ── Card ─────────────────────────────────────────────────── */
.partner-card-wrap {
margin-bottom: 24px;
display: flex;
overflow: hidden;
}
.partner-card {
all: unset;
display: flex;
flex-direction: column;
width: 100%;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow: hidden;
}
.partner-card:hover {
z-index: 2;
position: relative;
overflow: hidden;
}
.partner-card:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
}
.partner-card__logo {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
background: var(--white);
padding: 40px;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.partner-card__logo {
min-height: 0;
}
.partner-card__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.partner-card__logo:hover {
transform: scale(1.04);
}
.partner-card__body {
display: block;
padding: 20px;
flex: 1 1 auto;
overflow: hidden;
}
.partner-rule {
display: block;
border-top: 2px solid var(--yellow);
margin-bottom: 12px;
}
.partner-card__name {
display: block;
font-family: Anton, sans-serif;
font-weight: 400;
color: var(--white);
text-transform: uppercase;
font-size: clamp(15px, 1vw + 11px, 18px);
line-height: 1.15;
margin-bottom: 12px;
}
.partner-card__cta {
display: block;
font-family: Anton, sans-serif;
text-transform: uppercase;
font-size: 14px;
}
.partners__empty {
font-family: 'ABC Whyte', sans-serif;
padding: 40px 0;
color: var(--white);
}
/* ── Modal ────────────────────────────────────────────────── */
.partner-modal-overlay {
position: fixed;
inset: 0;
background: rgba(30, 30, 30, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.partner-modal-overlay.is-open {
opacity: 1;
visibility: visible;
}
.partner-modal {
position: relative;
background: var(--white);
max-width: 900px;
width: 100%;
display: flex;
flex-wrap: wrap;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.partner-modal__close {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
background: var(--darkgrey);
color: var(--white);
border: none;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 1;
}
.partner-modal__body {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.partner-modal__logo {
flex: 0 0 auto;
height: 400px;
aspect-ratio: 256 / 300;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
background: var(--white);
}
.partner-modal__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.partner-modal__content {
flex: 1 1 300px;
max-height: 553px;
overflow-y: auto;
padding: 40px;
}
.partner-modal__name {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(22px, 1.5vw + 14px, 30px);
line-height: 1.15;
color: var(--darkgrey);
margin: 0 0 16px;
}
.partner-modal__description p {
font-family: 'ABC Whyte', sans-serif;
color: var(--darkgrey);
margin: 0 0 1em;
}
.partner-modal__description p:last-child {
margin-bottom: 0;
}
.partner-modal__link {
display: inline-block;
font-family: 'ABC Whyte', sans-serif;
font-weight: 600;
color: var(--darkgrey);
text-decoration: underline;
margin-top: 16px;
}
body.partner-modal-open {
overflow: hidden;
}
@media (max-width: 767px) {
.partner-modal {
max-height: 90vh;
overflow-y: auto;
}
.partner-modal__logo {
flex-basis: 100%;
height: 260px;
padding: 24px;
}
.partner-modal__content {
max-height: none;
padding: 24px;
}
}
/* ============================================================
MULTIPLE COLUMNS
============================================================ */
.multiple-columns {
padding: 40px 0 60px;
color: var(--white);
}
.multiple-columns__rule {
border: none;
border-top: 1px solid var(--white);
margin: 0 0 32px;
}
.multiple-columns__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(24px, 2vw + 14px, 34px);
line-height: 1;
margin: 0 0 32px;
}
.multiple-columns__grid {
display: grid;
grid-template-columns: repeat(var(--col-count, 3), 1fr);
gap: 40px;
}
.multiple-columns__column {
font-family: 'ABC Whyte', sans-serif;
}
.multiple-columns__column p {
margin: 0 0 1em;
}
.multiple-columns__column p:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.multiple-columns__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.multiple-columns__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
STATS BOX
============================================================ */
.stats-box {
padding: 40px 0 80px;
color: var(--white);
}
.stats-box__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(24px, 2vw + 14px, 34px);
line-height: 1;
margin: 0 0 32px;
}
.stats-box__intro {
font-family: 'ABC Whyte', sans-serif;
max-width: 640px;
margin-bottom: 32px;
}
.stats-box__intro p {
margin: 0 0 1em;
}
.stats-box__intro p:last-child {
margin-bottom: 0;
}
.stat-box-wrap {
margin-bottom: 30px;
}
.stat-box {
padding: 24px;
min-height: 300px;
}
.stat-box--yellow {
background: var(--yellow);
color: var(--darkgrey);
}
.stat-box--teal {
background: var(--teal);
color: var(--white);
}
.stat-box--periwinkle {
background: var(--periwinkle);
color: var(--white);
}
.stat-box__label {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 8px;
}
.stat-box__stat {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(56px, 6vw + 20px, 90px);
line-height: 1;
margin-bottom: 16px;
}
.stat-box__text {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
margin: 0;
max-width: 32ch;
}
@media (max-width: 767px) {
.stat-box {
min-height: 0;
}
}
/* ============================================================
STAT INTRO
============================================================ */
.stat-intro {
padding: 40px 0 0;
color: var(--white);
}
.stat-intro__rule-top {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 32px;
opacity:1;
}
.stat-intro__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 44px);
line-height: 1;
margin: 0 0 32px;
}
.stat-intro__row {
padding-bottom: 40px;
}
.stat-intro__text {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
}
.stat-intro__text p {
margin: 0 0 1em;
}
.stat-intro__text p:last-child {
margin-bottom: 0;
}
.stat-intro__chart svg { height:auto;}
.stat-intro__chart {
display: flex;
justify-content: center;
}
.stat-intro__stat-large {
font-family: Anton, sans-serif;
font-weight: 400;
color: var(--yellow);
font-size: clamp(56px, 6vw + 20px, 100px);
line-height: 1;
margin-bottom: 12px;
}
.stat-intro__stat-small {
font-family: 'ABC Whyte', sans-serif;
font-weight: 600;
font-size: 18px;
max-width: 30ch;
}
.stat-intro__rule-bottom {
border: none;
border-top: 2px solid var(--white);
margin: 0;
opacity:1;
}
@media (max-width: 991px) {
.stat-intro__chart {
margin: 32px 0;
}
.stat-intro__stat {
margin-top: 8px;
}
}
/* ============================================================
STATS
============================================================ */
.stats {
padding: 60px 0 80px;
color: var(--white);
}
.stats__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(32px, 3vw + 18px, 52px);
line-height: 1;
margin: 0 0 24px;
}
.stats__intro {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
margin-bottom: 48px;
}
.stats__intro p {
margin: 0 0 1em;
}
.stats__intro p:last-child {
margin-bottom: 0;
}
.stat-item {
margin-bottom: 48px;
}
.stat-item__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 16px;
opacity:1;
}
.stat-item__large {
font-family: Anton, sans-serif;
font-weight: 400;
color: var(--yellow);
font-size: clamp(56px, 6vw + 20px, 110px);
line-height: 1;
margin-bottom: 16px;
}
.stat-item__small {
font-family: 'ABC Whyte', sans-serif;
font-weight: 400;
font-size: clamp(16px, 1vw + 12px, 20px);
line-height: clamp(24px, 1vw + 18px, 30px);
letter-spacing: 0;
max-width: 30ch;
}
@media (max-width: 767px) {
.stat-item__large {
font-size: clamp(48px, 14vw, 72px);
}
}
/* ============================================================
CARDS
============================================================ */
.cards {
padding: 50px 0 80px;
background-color:white;
}
.cards__header {
margin-bottom: 40px;
}
.cards__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(28px, 2.5vw + 16px, 44px);
line-height: 1;
margin: 16px 0 16px;
}
.cards__intro {
font-family: 'ABC Whyte', sans-serif;
}
.cards__intro p {
margin: 0 0 1em;
}
.cards__intro p:last-child {
margin-bottom: 0;
}
.cards__cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
.card-item {
margin-bottom: 24px;
}
.card-item__image {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.card-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-item__body {
padding: 24px;
min-height: 240px;
}
.card-rule {
display: block;
border-top: 3px solid var(--yellow);
margin-bottom: 16px;
}
.card-item__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--white);
font-size: clamp(20px, 1.2vw + 14px, 26px);
line-height: 1.15;
margin: 0 0 16px;
}
.card-item__text {
font-family: 'ABC Whyte', sans-serif;
color: var(--white);
margin: 0 0 16px;
}
.card-item__cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
}
.cards__grid {
display: flex;
flex-wrap: wrap;
}
.card-item {
display: flex;
flex-direction: column;
}
.card-item__body {
flex: 1 1 auto;
min-height: 0;
}
/* ============================================================
CHARTS
============================================================ */
.charts {
padding: 120px 0 80px;
color: var(--white);
}
.charts__rule-top {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 32px;
}
.charts__title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(32px, 3vw + 18px, 52px);
line-height: 1;
margin: 0 0 24px;
}
.charts__intro {
font-family: 'ABC Whyte', sans-serif;
max-width: 900px;
}
.charts__intro p {
margin: 0 0 1em;
}
.charts__intro p:last-child {
margin-bottom: 0;
}
.charts__intro a {
color: var(--yellow);
text-decoration: underline;
}
.charts__rule {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin: 40px 0 32px;
}
.charts__row-title {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(22px, 1.5vw + 14px, 30px);
margin: 0 0 24px;
}
.charts__chart {
}
/* ============================================================
TEAM
============================================================ */
.team {
padding-top: 50px;
padding-bottom: 80px;
background-color:white;
}
.team__title {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(32px, 3vw + 18px, 56px);
line-height: 1;
text-transform: uppercase;
margin: 16px 0 24px;
}
.team__header {
margin-bottom: 40px;
}
.team__intro {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
}
.team__intro p {
margin: 0;
}
.team__intro a {
color: var(--purple);
text-decoration: underline;
}
.team__intro a:hover {
color: var(--periwinkle);
}
.team__filter {
border: 1px solid var(--grey);
background: var(--white);
padding: 10px 16px;
padding-right: 40px; /* room for the custom arrow */
font-family: 'ABC Whyte', sans-serif;
font-size: 16px;
margin-top: 12px;
width: 100%;
max-width: 490px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 21px center; /* was effectively ~16px in, now 5px further left */
background-size: 12px 8px;
}
/* ── Grid card ────────────────────────────────────────────── */
.team__grid {
display: flex;
flex-wrap: wrap;
}
.team-card-wrap {
margin-bottom: 24px;
display: flex;
}
.team-card {
all: unset;
display: flex;
flex-direction: column;
width: 100%;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.team-card:hover {
transform: scale(1.05);
z-index: 2;
position: relative;
}
.team-card:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
}
.team-card__image {
display: block;
aspect-ratio: 471 / 553;
overflow: hidden;
}
.team-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-card__body {
display: block;
padding: 20px;
flex: 1 1 auto;
}
.team-rule {
display: block;
border-top: 3px solid var(--yellow);
margin-bottom: 12px;
}
.team-card__name {
display: block;
font-family: Anton, sans-serif;
font-weight: 400;
color: var(--white);
text-transform: uppercase;
font-size: clamp(16px, 1vw + 12px, 20px);
line-height: 1.15;
margin-bottom: 4px;
}
.team-card__job {
display: block;
font-family: 'ABC Whyte', sans-serif;
color: var(--white);
font-size: 14px;
}
.team__empty {
font-family: 'ABC Whyte', sans-serif;
padding: 40px 0;
}
/* ── Modal ────────────────────────────────────────────────── */
.team-modal-overlay {
position: fixed;
inset: 0;
background: rgba(30, 30, 30, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.team-modal-overlay.is-open {
opacity: 1;
visibility: visible;
}
.team-modal {
position: relative;
background: var(--white);
max-width: 900px;
width: 100%;
display: flex;
flex-wrap: wrap;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.team-modal__close {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
background: var(--darkgrey);
color: var(--white);
border: none;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 1;
}
.team-modal__body {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.team-modal__image {
flex: 0 0 auto;
height: 400px;
aspect-ratio: 256 / 300;
}
.team-modal__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-modal__content {
flex: 1 1 300px;
max-height: 400px;
overflow-y: auto;
padding: 40px;
}
.team-modal__name {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(22px, 1.5vw + 14px, 30px);
line-height: 1.15;
color: var(--darkgrey);
margin: 0 0 6px;
}
.team-modal__job {
font-family: Anton, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--grey);
font-size: 16px;
margin: 0 0 16px;
}
.team-modal__pronouns {
font-family: 'ABC Whyte', sans-serif;
color: var(--grey);
margin: 0 0 16px;
}
.team-modal__bio p {
font-family: 'ABC Whyte', sans-serif;
color: var(--darkgrey);
margin: 0 0 1em;
}
.team-modal__bio p:last-child {
margin-bottom: 0;
}
body.team-modal-open {
overflow: hidden;
}
@media (max-width: 767px) {
.team-modal {
max-height: 90vh;
overflow-y: auto;
}
.team-modal__image {
flex-basis: 100%;
height: 260px;
}
.team-modal__content {
max-height: none;
padding: 24px;
}
}
/* ============================================================
NEWS OVERVIEW
============================================================ */
.news-overview {
padding-top: 50px;
padding-bottom: 80px;
background-color:white;
}
.news-overview__title {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(32px, 3vw + 18px, 56px);
line-height: 1;
text-transform: uppercase;
margin: 16px 0 32px;
}
/* ── Filter bar ───────────────────────────────────────────── */
.news-filter-bar {
display: flex;
gap: 16px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.news-filter-bar__search {
position: relative;
flex: 1 1 0;
}
.news-filter-bar__search input {
width: 100%;
border: 1px solid var(--grey);
background: var(--white);
padding: 12px 44px 12px 16px;
font-family: 'ABC Whyte', sans-serif;
font-size: 16px;
}
.news-filter-bar__search-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.news-filter-bar__category {
flex: 1 1 0;
border: 1px solid var(--grey);
background: var(--white);
padding: 12px 16px;
font-family: 'ABC Whyte', sans-serif;
font-size: 16px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 21px center; /* was effectively ~16px in, now 5px further left */
background-size: 12px 8px;
}
/* ── Shared bits: rule + pill ─────────────────────────────── */
.news-rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 16px;
}
.news-pill {
display: inline-block;
align-self: flex-start;
border: 1px solid var(--yellow);
color: var(--yellow);
font-family: Anton, sans-serif;
font-weight: 400;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 6px 14px;
text-decoration: none;
}
.news-pill:hover {
opacity: 0.8;
}
/* ── Featured post ────────────────────────────────────────── */
.news-featured {
margin-bottom: 40px;
}
.news-featured__image {
aspect-ratio: 1440 / 810;
overflow: hidden;
}
.news-featured__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-featured__body {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: top;
}
.news-featured__title {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(22px, 1.5vw + 14px, 32px);
line-height: 1.15;
text-transform: uppercase;
margin: 0 0 16px;
}
.news-featured__title a {
color: var(--white);
text-decoration: none;
}
.news-featured__excerpt {
color: var(--white);
font-family: 'ABC Whyte', sans-serif;
margin: 0 0 24px;
max-width: 46ch;
}
/* ── 3-up grid row ────────────────────────────────────────── */
.news-grid-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.news-card {
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
.news-card__image {
display: block;
aspect-ratio: 400 / 360;
overflow: hidden;
}
.news-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-card__body {
padding: 32px 24px;
flex: 1 1 auto;
}
.news-card__title {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(18px, 1vw + 12px, 22px);
line-height: 1.2;
text-transform: uppercase;
margin: 0 0 16px;
}
.news-card__title a {
color: var(--white);
text-decoration: none;
}
.news-card__body,
.news-featured__body {
display: flex;
flex-direction: column;
}
.news-card__body .news-pill,
.news-featured__body .news-pill {
margin-top: auto;
align-self: flex-start;
}
.news-featured__body a.news-pill {color:white !important}
.news-card__body a.news-pill {color:white !important}
hr.news-rule {opacity:1;}
/* ── Social placeholder row ───────────────────────────────── */
.news-social-row {
margin-bottom: 40px;
}
.news-social-row__instagram {
position: relative;
min-height: 260px;
}
.news-placeholder-image {
width: 100%;
height: 100%;
min-height: 260px;
background: repeating-linear-gradient(
45deg,
var(--grey),
var(--grey) 10px,
var(--darkgrey) 10px,
var(--darkgrey) 20px
);
color: var(--white);
font-family: 'ABC Whyte', sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.news-social-row__icon {
position: absolute;
top: 16px;
right: 16px;
color: var(--white);
font-family: Anton, sans-serif;
font-size: 20px;
}
.news-social-row__linkedin {
position: relative;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.news-social-row__text {
color: var(--white);
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
font-size: clamp(16px, 1vw + 12px, 20px);
max-width: 60ch;
margin: 0 0 24px;
}
.news-social-row__cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
}
.news-social-row__instagram {
aspect-ratio: 1 / 1;
}
.news-social-row__instagram .sbi {
padding-bottom: 0 !important;
}
.news-social-row__instagram #sbi_images {
padding: 0 !important;
}
/* ── Load more ────────────────────────────────────────────── */
.news-load-more-wrap {
text-align: right;
}
.news-load-more {
font-family: Anton, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
}
.news-empty {
font-family: 'ABC Whyte', sans-serif;
padding: 40px 0;
}
/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 991px) {
.news-featured__body {
padding: 30px;
}
.news-social-row__linkedin,
.news-social-row__instagram {
min-height: 200px;
}
}
/* ============================================================
YOUNG LEWIS
============================================================ */
.young-lewis {
padding-top: 80px;
padding-bottom: 170px;
overflow: hidden;
}
.young-lewis__heading {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(40px, 4vw + 20px, 76px);
line-height: 0.95;
letter-spacing: 0;
text-transform: uppercase;
color: var(--white);
margin: 0;
}
@media (max-width: 991px) {
.young-lewis__heading {
padding-bottom: 30px;
}
}
.young-lewis__rule {
border: none;
border-top: 2px solid var(--yellow);
margin: 0 0 24px;
}
.young-lewis__text {
color: var(--white);
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
max-width: 640px;
margin-bottom: 40px;
}
.young-lewis__text p {
margin: 0 0 1em;
}
.young-lewis__text p:last-child {
margin-bottom: 0;
}
.young-lewis__block--second {
margin-top: 100px;
}
/* Overlapping image pair */
.young-lewis__images {
position: relative;
max-width: 560px;
}
.young-lewis__image--primary {
width: 72%;
}
.young-lewis__image--primary img {
width: 100%;
height: auto;
display: block;
}
.young-lewis__image--secondary {
position: absolute;
right: 0;
bottom: -12%;
width: 48%;
}
.young-lewis__image--secondary img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
/* ── Scroll reveal animation ─────────────────────────────── */
.yl-animate {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
transition-delay: calc(var(--yl-delay, 0) * 0.15s);
}
.young-lewis__image.yl-animate {
transform: translateY(50px) scale(0.96);
}
.yl-animate.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.yl-animate {
transition: none;
transform: none;
opacity: 1;
}
}
/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 991px) {
.young-lewis__block--second {
margin-top: 60px;
}
.young-lewis__images {
max-width: 420px;
margin: 0 auto 40px;
}
}
/* ── VIDEO ──────────────────────────────────────────────── */
.module_video {
line-height: 0;
}
.module_video_wrapper {
width: 100%;
}
/* 16:9 responsive iframe wrapper */
.module_video_responsive {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.module_video_responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
background-size: cover;
background-position: center;
}
/* Direct video file */
.module_video_self {
width: 100%;
height: auto;
display: block;
}
/* If the editor pastes raw embed code, make sure it fills width */
.module_video_wrapper > iframe,
.module_video_wrapper > video {
width: 100%;
display: block;
}
/* ── IMAGE ──────────────────────────────────────────────── */
.module_image {
line-height: 0;
}
.module_image_img {
width: 100%;
height: auto;
display: block;
}
/* ── IMPACT COMMITTEE ──────────────────────────────────────────────── */
.module_impact_committee {
padding: 60px 0;
}
.module_ic_cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
font-size: 1rem;
}
.module_ic_intro_row {
margin-top: 32px;
margin-bottom: 48px;
}
.module_ic_box {
padding: 32px 28px;
height: 100%;
min-height: 280px;
display: flex;
flex-direction: column;
}
.module_ic_box_title {
font-family: Anton, sans-serif;
text-transform: uppercase;
margin-bottom: 24px;
}
.module_ic_box_text {
font-size: 0.95rem;
margin-top: auto;
}
.module_ic_box_text p {
margin: 0;
}
/* ── GRANTMAKING ──────────────────────────────────────────────── */
.module_grantmaking {
padding: 60px 0;
}
.module_grantmaking_header {
margin-bottom: 40px;
}
.module_grantmaking_cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
font-size: 1rem;
}
.module_grantmaking_body {
align-items: flex-start;
}
.module_grantmaking_left {
padding-right: 24px;
}
.module_grantmaking_intro_rule {
border-color: var(--white);
opacity: 1;
margin-bottom: 24px;
margin-top: 0;
}
.module_grantmaking_intro {
margin-bottom: 32px;
}
.module_grantmaking_bullets {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.module_grantmaking_bullet {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}
.module_grantmaking_bullet_num {
font-family: Anton, sans-serif;
font-size: clamp(48px, 5vw, 70px);
line-height: 1;
flex-shrink: 0;
width: 48px;
text-align: center;
}
.module_grantmaking_bullet_text {
padding-top: 8px;
}
.module_grantmaking_bullet_text p {
margin: 0;
}
.module_grantmaking_lower {
padding-top:40px;
}
.module_grantmaking_lower a {
color: var(--yellow);
text-decoration: underline;
cursor: pointer;
}
@media (max-width: 991px) {
.module_grantmaking_left {
padding-right: 0;
margin-bottom: 40px;
}
}
/* ── Modal ── */
.grantmaking_modal_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.grantmaking_modal_overlay.is-active {
display: flex;
}
.grantmaking_modal {
background: var(--white);
max-width: 900px;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.grantmaking_modal_close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--grey);
line-height: 1;
padding: 4px 8px;
font-family: Anton, sans-serif;
letter-spacing: 0.04em;
z-index: 1;
}
.grantmaking_modal_close:hover {
color: var(--purple);
}
.grantmaking_modal_inner {
display: flex;
flex-direction: column;
}
.grantmaking_modal_image {
width: 100%;
height: 240px;
overflow: hidden;
flex-shrink: 0;
display:none;
}
.grantmaking_modal_image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.grantmaking_modal_content {
padding: 32px;
overflow-y: auto;
max-height: 60vh;
}
@media (min-width: 992px) {
.grantmaking_modal {
height: 400px;
}
.grantmaking_modal_inner {
flex-direction: row;
height: 100%;
}
.grantmaking_modal_image {
width: 350px;
height: 400px;
flex-shrink: 0;
}
.grantmaking_modal_content {
flex: 1;
padding: 40px 48px 40px 40px;
overflow-y: auto;
max-height: none;
height: 100%;
box-sizing: border-box;
}
}
.grantmaking_modal_content h4 {
font-family: Anton, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 16px;
color: var(--darkgrey);
}
.grantmaking_modal_body {
font-size: 0.95rem;
color: var(--darkgrey);
margin-bottom: 24px;
}
.grantmaking_modal_body p {
margin-bottom: 12px;
}
.grantmaking_modal_cta {
font-family: Anton, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
font-size: 1rem;
}
body.modal-open {
overflow: hidden;
}
/* ── BENEFITS ──────────────────────────────────────────────── */
.module_benefits {
padding: 60px 0;
}
.module_benefits_header {
margin-bottom: 40px;
}
.module_benefits_intro {
padding-top: 8px;
}
.module_benefits_intro a {
font-family: Anton, sans-serif;
color: var(--yellow);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
display: block;
margin-top: 8px;
}
.module_benefits_intro a .arrowright {
margin-left: 6px;
}
.module_benefits_intro a:hover {
opacity: 0.8;
}
.module_benefits_row {
margin-bottom: 48px;
}
.module_benefits_row_title {
margin-bottom: 20px;
text-transform: uppercase;
}
.module_benefits_box {
padding: 32px 28px;
height: 100%;
min-height: 340px;
}
.module_benefits_box_rule {
opacity: 1;
border: 2px solid var(--white);
margin-bottom: 24px;
margin-top: 0;
}
.module_benefits_box h4 {
text-transform: uppercase;
margin-bottom: 16px;
}
/* ============================================================
MODULE: Vacancies
============================================================ */
.module_vacancy_none {
padding: 40px 0;
}
.module_vacancies {
padding: 60px 0;
}
.module_vacancy_item {
padding-bottom: 8px;
}
/* ── Department badge ──────────────────────────────────────── */
.module_vacancy_dept_col {
margin-bottom: 20px;
}
.module_vacancy_badge {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 320px;
padding: 16px 20px;
}
.module_vacancy_badge--periwinkle {
background: var(--periwinkle);
}
.module_vacancy_badge--purple {
background: var(--purple);
}
.module_vacancy_badge--teal {
background: var(--teal);
}
.module_vacancy_badge_icon {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.module_vacancy_badge_text {
font-family: Anton, sans-serif;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
}
/* ── Trigger / title row ───────────────────────────────────── */
.module_vacancy_trigger_col {
padding-top: 14px;
}
.module_vacancy_trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
text-align: left;
}
.module_vacancy_title {
text-transform: uppercase;
margin: 0;
}
.module_vacancy_toggle {
flex-shrink: 0;
color: var(--yellow);
font-family: Anton, sans-serif;
font-size: clamp(22px, 2vw + 12px, 30px);
line-height: 1;
}
.module_vacancy_toggle_minus {
display: none;
}
.module_vacancy_trigger[aria-expanded="true"] .module_vacancy_toggle_plus {
display: none;
}
.module_vacancy_trigger[aria-expanded="true"] .module_vacancy_toggle_minus {
display: inline;
}
/* ── Panel (deadline / download / bullets / apply) ─────────── */
.module_vacancy_panel {
padding-top: 20px;
}
.module_vacancy_deadline {
margin-bottom: 16px;
}
.module_vacancy_deadline strong {
font-family: Anton, sans-serif;
letter-spacing: 0.04em;
color: var(--white);
}
.module_vacancy_pack_link {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.module_vacancy_bullets {
list-style: none;
padding: 0;
margin: 0 0 24px;
line-height: clamp(24px, 1vw + 18px, 30px);
}
.module_vacancy_bullets li {
position: relative;
padding-left: 20px;
margin-bottom: 6px;
}
.module_vacancy_bullets li::before {
content: '•';
position: absolute;
left: 0;
color: var(--yellow);
}
.module_vacancy_apply {
font-family: Anton, sans-serif;
font-size: 1.25rem;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.module_vacancy_apply:hover {
opacity: 0.8;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
.module_vacancy_trigger_col {
padding-top: 0;
}
}
@media (max-width: 767px) {
.module_vacancy_dept_col {
margin-bottom: 16px;
}
.module_vacancy_panel {
padding-top: 16px;
}
.module_vacancy_panel_left {
margin-bottom: 16px;
}
}
/* ── VALUES ──────────────────────────────────────────────── */
.module_values {
padding: 80px 0;
}
.module_values_left {
padding-right: 40px;
}
@media (min-width: 992px) {
.module_values_left {
position: sticky;
top: 40px;
align-self: flex-start;
}
}
.module_values_right {
padding-top: 8px;
}
.module_values_item {
padding-bottom: 32px;
}
.module_values_rule {
border: solid 2px var(--yellow);
opacity: 1;
margin-bottom: 20px;
}
.module_values_item h4 {
margin-bottom: 10px;
text-transform: uppercase;
}
.module_values_item p {
margin: 0;
}
@media (max-width: 767px) {
.module_values_left {
padding-right: 0;
margin-bottom: 40px;
}
}
/* ── impact model──────────────────────────────────────────────── */
.impact_model {
padding: 60px 0;
}
.impact_model_box_inner {
border: 2px solid var(--yellow);
padding: 48px 40px;
height: 100%;
}
.impact_model_box_inner h2.large {
margin-bottom: 24px;
}
.impact_model_box_inner h4 {
margin: 0;
}
@media (max-width: 767px) {
.impact_model_box + .impact_model_box {
margin-top: 24px;
}
}
/* ── pillar card──────────────────────────────────────────────── */
.pillar_card {
display: flex;
flex-direction: column;
}
.pillar_card_image {
width: 100%;
}
.pillar_card_image img {
width: 100%;
aspect-ratio: 720 / 600;
object-fit: cover;
display: block;
}
.pillar_card_content {
flex-grow: 1;
padding: 110px 90px;
color: var(--white);
}
.pillar_title {
margin-bottom: 16px;
}
.pillar_text {
margin: 0;
}
/* ── NEWS TEASER ──────────────────────────────────────────────── */
.newsteaser {padding: 90px 0 }
.teaser_news_row {
row-gap: 32px;
}
.teaser_news_card {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: var(--white);
}
.teaser_news_image img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.teaser_news_content {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
padding: 24px;
min-height: 280px;
}
.teaser_news_topline {
width: 100%;
height: 2px;
margin-bottom: 16px;
}
.teaser_news_card .news_teaser {
color: var(--white);
margin: 0;
}
.teaser_news_tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.teaser_news_tag {
border: 1px solid;
padding: 6px 16px;
}
.teaser_news_top {
display: flex;
flex-direction: column;
}
.tags .attribution_title {margin-bottom:20px;}
.tags {padding-bottom:60px;}
/* ============================================================
MODULE: Young People Boxes
============================================================ */
.module-ypb {
background-color: var(--grey);
padding-top: 60px;
padding-bottom: 80px;
}
/* ── Header ──────────────────────────────────────────────── */
.module-ypb__header {
border-top: 2px solid var(--yellow);
padding-top: 30px;
margin-bottom: 40px;
}
.module-ypb__header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.module-ypb__title {
color: var(--white);
margin: 0;
}
/* ── CTA link ────────────────────────────────────────────── */
.module-ypb__cta {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(14px, 1vw + 10px, 18px);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--yellow);
text-decoration: none;
white-space: nowrap;
transition: color 250ms ease;
}
.module-ypb__cta:hover {
color: var(--periwinkle);
}
.module-ypb__cta-icon {
font-size: 1.1em;
line-height: 1;
}
/* ── Grid ────────────────────────────────────────────────── */
.module-ypb__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ── Box ─────────────────────────────────────────────────── */
.boxbutton{margin-top:30px;}
.module-ypb__box {
display: flex;
flex-direction: column;
min-height: 320px;
}
.module-ypb__box--periwinkle { background-color: var(--periwinkle); }
.module-ypb__box--teal { background-color: var(--teal); }
.module-ypb__box--purple { background-color: var(--purple); }
.module-ypb__box-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 36px 32px 40px;
}
.module-ypb__box-inner hr {
height: 2px;
color: #fff;
background: #fff;
font-size: 0;
border: 0;
opacity: 1;
}
/* ── Box title ───────────────────────────────────────────── */
.module-ypb__box-title {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(22px, 2vw + 12px, 32px);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0;
color: var(--white);
margin: 0 0 auto;
padding-bottom: 1.5rem;
}
/* ── Box text ────────────────────────────────────────────── */
.module-ypb__box-text {
font-family: 'ABC Whyte', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1vw + 11px, 18px);
line-height: 1.55;
color: var(--white);
margin: 0;
padding-top: 1.5rem;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
.module-ypb__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.module-ypb {
padding-top: 40px;
padding-bottom: 50px;
}
.module-ypb__grid {
grid-template-columns: 1fr;
gap: 8px;
}
.module-ypb__box {
min-height: 240px;
}
.module-ypb__box-inner {
padding: 28px 24px 32px;
}
.module-ypb__header-inner {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
MODULE: Accordion
============================================================ */
.module-accordion {
color: var(--white);
padding-top: 80px;
padding-bottom: 80px;
}
/* ── Header ─────────────────────────────────────────────── */
.module-accordion__header {
border-top: 2px solid var(--yellow);
padding-top: 40px;
margin-bottom: 60px;
}
.module-accordion__title {
color: var(--white);
margin-bottom: 0.5em;
}
.module-accordion__intro {
color: var(--white);
margin-top: 1.25rem;
}
.module-accordion__intro p {
color: var(--white);
margin-bottom: 0;
}
.module-accordion__intro a {
color: var(--white);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.module-accordion__intro a:hover {
color: var(--yellow);
}
/* ── List ────────────────────────────────────────────────── */
.module-accordion__list {
border-top: 2px solid rgba(255, 255, 255, 1);
}
/* ── Item ────────────────────────────────────────────────── */
.module-accordion__item {
border-bottom: 2px solid rgba(255, 255, 255, 1);
}
/* ── Trigger (button) ────────────────────────────────────── */
.module-accordion__question {
margin: 0;
}
.module-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
padding: 28px 0;
background: none;
border: none;
color: var(--white);
text-align: left;
cursor: pointer;
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(18px, 1.5vw + 10px, 26px);
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0;
transition: color 250ms ease;
}
.module-accordion__trigger:hover {
color: var(--yellow);
}
.module-accordion__trigger:hover .module-accordion__icon {
color: var(--yellow);
}
/* Keep collapsed/expanded state colour consistent */
.module-accordion__trigger[aria-expanded="true"] {
color: var(--white);
}
.module-accordion__question-text {
flex: 1;
}
/* ── Icon ────────────────────────────────────────────────── */
.module-accordion__icon {
flex-shrink: 0;
color: var(--yellow);
font-family: Anton, sans-serif;
font-size: clamp(22px, 2vw + 12px, 30px);
line-height: 1;
transition: color 250ms ease;
}
.module-accordion__icon-minus {
display: none;
}
/* When open, swap + for − */
.module-accordion__trigger[aria-expanded="true"] .module-accordion__icon-plus {
display: none;
}
.module-accordion__trigger[aria-expanded="true"] .module-accordion__icon-minus {
display: inline;
}
/* ── Answer ──────────────────────────────────────────────── */
.module-accordion__answer {
padding: 0 0 30px 0;
}
.module-accordion__answer p {
color: var(--white);
margin-bottom: 1em;
}
.module-accordion__answer p:last-child {
margin-bottom: 0;
}
.module-accordion__answer a {
color: var(--yellow);
}
.module-accordion__answer a:hover {
color: var(--periwinkle);
}
.module-accordion__answer ul,
.module-accordion__answer ol {
color: var(--white);
padding-left: 1.25rem;
margin-bottom: 1rem;
}
.module-accordion__answer li {
margin-bottom: 0.4em;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
.module-accordion {
padding-top: 50px;
padding-bottom: 50px;
}
.module-accordion__header {
margin-bottom: 40px;
}
.module-accordion__trigger {
padding: 22px 0;
}
}
/* ============================================================
MODULE: Research
============================================================ */
.download-icon__fill {
fill: currentColor;
}
.titleblock { padding-bottom: 0; margin-bottom: 0; }
.research {
padding-top: 60px;
padding-bottom: 80px;
}
.research .paddingbtm40 {
padding-bottom: 40px;
}
/* ── Row ─────────────────────────────────────────────────── */
.module-research__row {
display: flex;
align-items: stretch;
margin-bottom: 30px;
}
.module-research__row:last-child {
border-bottom: none;
}
/* ── Image — always left ─────────────────────────────────── */
.module-research__image {
flex: 0 0 48%;
max-width: 48%;
overflow: hidden;
}
.module-research__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Content — always right ──────────────────────────────── */
.module-research__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 60px 70px;
}
.module-research__content h4 {
margin-bottom: 1rem;
}
.module-research__content p {
color: var(--white);
margin-bottom: 0;
}
.module-research__content a.yellowtext {
display: inline-flex;
align-items: center;
gap: 0.45em;
margin-top: auto;
padding-top: 2rem;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
.module-research__row {
flex-direction: column;
}
.module-research__image {
flex: none;
max-width: 100%;
aspect-ratio: 16 / 9;
}
.module-research__content {
padding: 40px 30px;
}
}
/* ============================================================
POST
============================================================ */
/* ── HERO ──────────────────────────────────────────────── */
.article-hero {
position: relative;
overflow: hidden;
}
.article-hero__image {
width: 100%;
aspect-ratio: 16 / 9;
}
@media (max-width: 767.98px) {
.article-hero__image {
aspect-ratio: 1 / 1;
}
}
.article-block--text p b, .article-block--text p strong {font-weight:500;}
h1.article {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(28px, 2.5vw + 18px, 50px);
line-height: clamp(36px, 2.5vw + 24px, 60px);
letter-spacing: 0;
text-transform: uppercase;
margin-top:50px;
}
.article-block iframe {padding-top:40px; padding-bottom:40px;}
.article-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.article-hero_text {padding-top:40px; padding-bottom:40px;}
.article-cat-pill {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(20px, 1.5vw + 12px, 30px);
line-height: clamp(28px, 1.5vw + 18px, 40px);
letter-spacing: 0;
text-transform: uppercase;
padding:10px;
}
.article-hero__title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 800;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 1.5rem;
max-width: 800px;
}
.article-hero__meta-label {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(16px, 1vw + 12px, 22px);
line-height: clamp(24px, 1vw + 18px, 32px);
letter-spacing: 0.02em;
text-transform: uppercase
}
.article-hero__meta-value {
font-family: 'ABC Whyte', sans-serif;
font-weight: 500;
font-size: clamp(16px, 1vw + 12px, 25px);
line-height: clamp(24px, 1vw + 18px, 35px);
letter-spacing: 0;
}
/* ── CONTENT BLOCKS ────────────────────────────────────── */
.article-block {
padding-top: 2rem;
padding-bottom: 2rem;
}
/* ── QUOTE ─────────────────────────────────────────────── */
.article-quote {
padding: 3rem 0;
}
.article-quote--yellow {
background-color: #ffd700;
color: #000;
}
.article-quote--grey {
background-color: #4a5568;
color: #fff;
}
.article-quote__inner {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.article-quote__icon {
display: block;
font-size: 5rem;
line-height: 1;
margin-bottom: 0.5rem;
}
.bg_grey .largerquote {color:var(--white);}
.bg_grey .quotemark {color:var(--white);}
.quote-full .bg_grey {color:var(--white);}
.article-quote__text {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-weight: 600;
font-style: italic;
line-height: 1.5;
margin-bottom: 1rem;
border: none;
padding: 0;
}
.article-quote__attribution {
display: block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-style: normal;
}
/* ── MEDIA BLOCK ───────────────────────────────────────── */
.article-media {
position: relative;
}
.article-media__image {
width: 100%;
display: block;
}
.article-media__video-trigger {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.article-media__play-btn {
width: 70px;
height: 70px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.article-media__play-btn::after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 22px;
border-color: transparent transparent transparent #000;
margin-left: 4px;
}
.article-media__caption {
font-size: 0.8rem;
color: #666;
margin-top: 0.5rem;
}
/* ── TAGS ──────────────────────────────────────────────── */
.article-tags {
padding: 2rem 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.article-tag-pill {
display: inline-block;
border: 1px solid #ccc;
color: #333;
text-transform: uppercase;
font-size: clamp(16px, 1vw + 12px, 20px);
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.35em 0.9em;
margin: 0.25rem;
text-decoration: none;
transition: background 0.2s, color 0.2s;
font-family: "Anton", sans-serif;
}
.article-tag-pill:hover {
background: #000;
color: #fff;
border-color: #000;
}
/* ── RELATED ARTICLES ──────────────────────────────────── */
.related-articles {
padding: 4rem 0;
background: #f8f8f8;
}
.related-articles__heading {
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 2rem;
}
.related-article-card {
display: block;
text-decoration: none;
color: inherit;
}
.related-article-card__image-wrap {
position: relative;
aspect-ratio: 637 / 360;
overflow: hidden;
}
.related-article-card__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.related-article-card:hover img {
transform: scale(1.04);
}
.related-article-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem;
color: #fff;
}
.related-article-card__title {
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1.25;
margin: 0.5rem 0 0;
}
/* ============================================================
Module: Slider
============================================================ */
.module--slider {
background-color: var(--color-grey-dark);
padding-top: 40px;
overflow: hidden;
padding-bottom: 0px !important;
}
/* Header row: title left, arrows right */
.module--slider .slider__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
border-top: 2px solid var(--color-yellow);
padding-top: 20px;
margin-bottom: 24px;
}
.module--slider .slider__title {
font-size: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-yellow);
margin: 0;
}
.module--slider .slider__header-right {
display: flex;
align-items: center;
gap: 4px;
}
.module--slider .slider__arrow {
background: none;
border: none;
color: var(--yellow);
padding: 0 6px;
cursor: pointer;
transition: opacity 0.2s ease;
display: inline-flex;
align-items: center;
}
.module--slider .slider__arrow:hover {
opacity: 0.7;
}
.module--slider .slider__arrow svg {
display: block;
width: 16px;
height: auto;
}
/* Intro text */
.module--slider .slider__intro {
color: var(--white);
font-size: 1rem;
margin-bottom: 50px;
}
.module--slider .slider__intro p {
margin: 0;
}
/* Slick track */
.module--slider .slider__track {
display: block;
}
.module--slider .slider__slide {
position: relative;
outline: none;
}
/* Image slide */
.module--slider .slider__image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* Video slide */
.module--slider .slider__video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.module--slider .slider__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.module--slider .slider__poster.is-hidden {
opacity: 0;
pointer-events: none;
}
.module--slider .slider__play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.55);
border: 2px solid var(--color-white);
border-radius: 50%;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
cursor: pointer;
transition: background 0.2s ease;
z-index: 2;
}
.module--slider .slider__play-btn svg {
width: 28px;
height: 28px;
margin-left: 4px;
color:white;
}
.module--slider .slider__play-btn:hover {
background: rgba(0, 0, 0, 0.75);
}
.module--slider .slider__play-btn.is-hidden {
display: none;
}
.module--slider .slider__video-embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.module--slider .slider__video-embed iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ============================================================
MODULE: Box
============================================================ */
.artop {margin-top:30px;}
.arimage {width:100%; height:auto;}
.module-box .bg-grey a.btnclass {color: var(--yellow);}
.module-box .bg-white a.btnclass {color: var(--purple);}
.module-box .bg-grey a.btnclass:hover {color: var(--periwinkle);}
.module-box .bg-white a.btnclass:hover {color: var(--periwinkle);}
.module-box a.btnclass {
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(18px, 1vw + 12px, 28px);
line-height: clamp(20px, 1vw + 12px, 26px);
letter-spacing: 0.01em;
text-align: center;
text-transform: uppercase;
margin-top:30px;
display:inline-block;
}
.module-box__panel { min-height: 600px;
}
.module-box {
display: flex;
flex-wrap: wrap;
min-height: 600px;
}
.module-box__panel--image .module-box__inner {
padding: 0;
}
/* Single box: fills half the section */
.module-box__panel {
flex: 0 0 50%;
max-width: 50%;
display: flex;
align-items: center;
}
.module-box__inner {
padding: 70px 60px;
width: 100%;
}
/* Background colours */
.bg-yellow { background-color: var(--yellow); }
.bg-grey { background-color: var(--grey); }
.bg-white { background-color: #fff; }
.bg-periwinkle { background-color: var(--periwinkle); }
.bg-teal { background-color: var(--teal); }
.bg-purple { background-color: var(--purple); }
/* vertical_centre layout centres its content */
.module-box--1-up .module-box__panel,
.module-box__panel[class*="vertical_centre"] {
justify-content: center;
text-align: center;
}
.module-box__line-title {
border-bottom: 2px solid currentColor;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
.module-box__grid-item {
margin-bottom: 1.5em;
}
.module-box__video {
position: relative;
width: 100%;
}
.module-box__video-poster {
width: 100%;
display: block;
}
.module-box__panel--image .module-box__inner {
padding: 0;
height: 100%;
}
.module-box__panel--image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Mobile: stack full width, respect mobile_order */
@media (max-width: 991px) {
.module-box {
flex-direction: column;
}
.module-box__panel {
flex: 1 1 100%;
order: 0; /* overridden by inline style from mobile_order field */
flex: 1 1 100%;
max-width: 100%;
order: 0;
}
.module-box__panel { min-height: 0px;
}
.module-box__inner {
padding: 50px 15px;
}
}
.module-box__panel--quote {
background-color: var(--yellow);
}
.module-box__panel--quote .module-box__inner {
padding: 70px 60px;
}
.module-box__quote p {
font-size: clamp(18px, 1.5vw + 12px, 25px);
line-height: clamp(26px, 1.5vw + 18px, 35px);
margin-bottom: 1.5rem;
}
.module-box__quote cite {
font-style: normal;
font-weight: 600;
font-size: 0.95rem;
}
/* Slick overrides */
.module-box__quote-carousel .slick-dots {
bottom: -30px;
}
.module-box__quote-carousel .slick-dots li button:before {
color: #000;
}
.module-box__panel--video .module-box__inner {
padding: 0;
height: 100%;
}
.module-box__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.module-box__video-file {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.module-box__panel--video {
position: relative;
}
/* ============================================================
MODULE: Pillars
============================================================ */
.split-section {
display: flex;
}
.split-left,
.split-right {
flex: 1;
padding-top: 90px;
padding-bottom: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.split-left {
background-color: var(--periwinkle);
}
.split-right {
background-color: var(--teal);
}
@media (max-width: 991px) {
.split-section {
flex-direction: column;
}
}
/* ============================================================
MODULE: full-width
============================================================ */
.full-width {padding-top:50px; padding-bottom:40px;}
/* ============================================================
MODULE: title text text
============================================================ */
.word-fade-up .word {
display: inline-block;
opacity: 0;
transform: translateY(0.4em);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.word-fade-up.is-inview .word {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.word-fade-up .word {
opacity: 1;
transform: none;
transition: none;
}
}
.title_text_text {}
.title_text {padding-top:110px; padding-bottom:110px;}
.title_text a.yellowtext {display:inline-block; margin-top:50px;}
@media (max-width: 767px) {
.title_text_text{padding-left:15px; padding-right:15px;}
.title_text {padding-top:0px; padding-bottom:40px;}
.title_text h2 {padding-top:40px; padding-bottom:40px;}
}
/* ============================================================
MODULE: Header image/video
============================================================ */
.template-parts\/module {
position: relative;
min-height: 670px;
background-size: cover;
background-position: center;
overflow: hidden;
}
/* Gradient overlay — replicates your PNG programmatically */
.template-parts\/module.has-headline::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.75) 25%,
rgba(0, 0, 0, 0.4) 45%,
rgba(0, 0, 0, 0.1) 60%,
transparent 75%
);
z-index: 1;
}
/* Video sits behind everything */
.template-parts\/module .bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Container needs to clear the pseudo-element */
.template-parts\/module .container {
position: relative;
z-index: 2;
padding-top: 70px;
min-height: 670px;
display: flex;
align-items: flex-start;
padding-bottom: 60px;
}
/* On mobile, full-width gradient */
@media (max-width: 767px) {
.template-parts\/module.has-headline::before {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.6) 60%,
rgba(0, 0, 0, 0.3) 100%
);
}
}
/* ============================================================
MODULE: Header image/video — MOBILE LAYOUT
Append this AFTER your existing "MODULE: Header image/video" block.
Desktop (768px+) is completely untouched — these rules only fire
below 768px, and only override the specific properties needed to
turn the full-bleed overlay into a stacked image + solid text block.
============================================================ */
@media (max-width: 767px) {
/* No more full-bleed background box on mobile — the real
![]()
below now provides the image. */
.template-parts\/module {
min-height: 0;
}
/* Gradient overlay was only ever there to keep text readable over
the background image — not needed once text moves off the image
entirely. */
.template-parts\/module.has-headline::before {
display: none;
}
.imgheader-mobile-image {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
}
/* Text block: drop the flex/min-height overlay positioning and
give it its own solid background instead. */
.template-parts\/module .imgheader-content {
display: block;
min-height: 0;
padding: 10px 15px;
background: var(--grey);
}
.template-parts\/module .imgheader-content .col-12 {
max-width: none;
}
.template-parts\/module .bg-video.d-md-none {
display: block;
position: static;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center top;
}
}