, inside .site-main). */
.block-donation-form .block-donation-form__box-body a {
color: var(--color-accent-text);
font-weight: var(--weight-bold);
text-decoration: none;
}
.block-donation-form__box-link {
display: inline-block;
margin-top: var(--space-4);
color: var(--color-accent-text);
font-weight: var(--weight-bold);
font-size: var(--text-sm);
}
.block-donation-form__box .button {
margin-top: var(--space-5);
}
.block-donation-form__account {
margin-top: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-surface-warm);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-md);
}
.block-donation-form__account-name {
display: block;
color: var(--color-text-muted);
font-size: var(--text-2xs);
}
.block-donation-form__account-number {
display: block;
margin-top: var(--space-1);
font-family: var(--font-display);
font-size: var(--text-h3);
color: var(--color-ink);
letter-spacing: 0.02em;
}
@media (min-width: 56rem) {
.block-donation-form__row--aside {
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-10);
align-items: start;
}
.block-donation-form__aside {
margin-top: 0;
}
}
.field__optional {
color: var(--color-text-muted);
font-weight: var(--weight-regular);
}
/* --- Person bio ------------------------------------------------------------------ */
.block-person-bio__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
align-items: center;
max-width: 42rem;
margin-inline: auto;
}
.block-person-bio__image {
width: 6.5rem;
height: 6.5rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.block-person-bio__name {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-medium);
}
.block-person-bio__role {
color: var(--color-accent-text);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.block-person-bio__bio {
margin-top: var(--space-2);
color: var(--color-text);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
/* --- Travel report -------------------------------------------------------------- */
.block-travel-report__eyebrow {
display: block;
margin-bottom: var(--space-3);
color: var(--color-accent-text);
font-size: var(--text-eyebrow);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
.block-travel-report__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: var(--weight-medium);
}
.block-travel-report__facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-5);
}
.block-travel-report__fact {
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-md);
}
.block-travel-report__fact dt {
color: var(--color-text-muted);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
.block-travel-report__fact dd {
margin-top: var(--space-1);
color: var(--color-ink);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.block-travel-report__inner {
display: grid;
gap: var(--space-8);
align-items: start;
margin-top: var(--space-6);
}
.block-travel-report__image {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.block-travel-report__body {
color: var(--color-text);
font-size: var(--text-body);
line-height: var(--leading-relaxed);
white-space: pre-line;
}
@media (min-width: 56rem) {
.block-travel-report__inner {
grid-template-columns: 1fr 1fr;
}
}
/* --- ANBI facts ------------------------------------------------------------------ */
/* The ANBI page's "Algemene gegevens": white cards two by two, a small label over the value. */
.block-anbi-facts__heading {
margin-bottom: var(--space-6);
}
.block-anbi-facts__list {
display: grid;
gap: var(--space-4);
}
.block-anbi-facts__fact {
padding: 1.5rem 1.625rem;
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-sm);
}
.block-anbi-facts__fact dt {
color: var(--color-text-muted);
font-size: 0.75rem;
font-weight: var(--weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.block-anbi-facts__fact dd {
margin: 0.375rem 0 0;
color: var(--color-ink);
font-size: var(--text-body);
line-height: 1.6;
white-space: pre-line;
}
.block-anbi-facts__fact dd a {
color: var(--color-accent-text);
text-decoration: none;
}
.block-anbi-facts__fact dd a:hover {
text-decoration: underline;
}
.block-anbi-facts__iban {
font-family: var(--font-display);
letter-spacing: 0.02em;
}
@media (min-width: 40rem) {
.block-anbi-facts__list {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Document list ---------------------------------------------------------------- */
.block-document-list__heading {
margin-bottom: var(--space-5);
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: var(--weight-medium);
}
.block-document-list__list {
display: grid;
gap: var(--space-3);
max-width: 42rem;
}
.block-document-list__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-md);
color: var(--color-ink);
font-weight: var(--weight-semibold);
}
.block-document-list__link:hover {
border-color: var(--color-accent-strong);
color: var(--color-accent-text);
}
/* --- Related posts ----------------------------------------------------------------- */
.block-related-posts__heading {
margin-bottom: var(--space-6);
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: var(--weight-medium);
}
.block-related-posts__list {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.block-related-posts__card {
display: block;
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-md);
}
.block-related-posts__card:hover {
border-color: var(--color-accent-strong);
}
.block-related-posts__title {
display: block;
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-medium);
}
.block-related-posts__excerpt {
display: block;
margin-top: var(--space-2);
color: var(--color-text);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
/* --- Product promo ------------------------------------------------------------------ */
.block-product-promo__inner {
display: grid;
gap: var(--space-8);
align-items: center;
}
.block-product-promo__image {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.block-product-promo__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: var(--weight-medium);
}
.block-product-promo__price {
margin-top: var(--space-2);
color: var(--color-accent-text);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
}
.block-product-promo__body {
margin-top: var(--space-4);
color: var(--color-text);
font-size: var(--text-body);
line-height: var(--leading-relaxed);
}
.block-product-promo__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
@media (min-width: 56rem) {
.block-product-promo__inner {
grid-template-columns: 1fr 1fr;
}
}
/* --- Blog ---------------------------------------------------------------------- */
/* After the design zip's blog artboards: the index (search, filters, a grid of
cards), a trip's page (facts and its reports in order) and a post (a reading
column). A trip is green throughout, the travel colour of the home pillars. */
.blog__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
}
.blog__head + .pg-rule {
margin-bottom: 0;
}
.blog-search {
position: relative;
flex: 0 1 24rem;
margin-left: auto;
}
@media (max-width: 39.99rem) {
.blog-search {
flex-basis: 100%;
}
}
.blog-search__icon {
position: absolute;
top: 50%;
left: 1.125rem;
color: var(--color-text-subtle);
transform: translateY(-50%);
pointer-events: none;
}
.input.blog-search__input {
width: 100%;
padding-left: 3rem;
background: var(--color-surface);
}
/* While a search as you type is on its way (site.js). */
[data-blog-results] {
transition: opacity 0.15s ease;
}
[data-blog-results][aria-busy="true"] {
opacity: 0.55;
}
.blog__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin: var(--space-7) 0 var(--space-8);
}
.blog-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.blog-filters__link {
padding: 0.5625rem 1.0625rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-strong);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease;
}
.blog-filters__link:hover {
border-color: var(--color-accent-text);
color: var(--color-accent-text);
}
.blog-filters__link--active,
.blog-filters__link--active:hover {
border-color: var(--color-ink);
background: var(--color-ink);
color: var(--color-ink-inverse);
}
.blog__count {
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.blog-grid {
display: grid;
gap: 1.625rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.blog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.blog-grid > li {
display: flex;
}
.blog-card {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-border-card);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: inherit;
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover {
box-shadow: var(--shadow-card);
transform: translateY(-2px);
}
.blog-card:focus-visible {
outline: 2px solid var(--color-accent-text);
outline-offset: 3px;
}
.blog-card__image {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--color-surface-sunken);
}
.blog-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* A trip's cover: its two lines over the photo, or over a plain green ground. */
.blog-cover {
position: relative;
container-type: inline-size;
isolation: isolate;
}
.blog-cover::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgb(20 28 18 / 0.82) 0%, rgb(20 28 18 / 0.45) 38%, rgb(20 28 18 / 0) 68%);
}
/* A thin frame inside the edge, the way a printed cover has one. */
.blog-cover::after {
content: "";
position: absolute;
inset: 0.75rem;
z-index: 2;
border: 1px solid rgb(255 255 255 / 0.45);
border-radius: calc(var(--radius-lg) - 0.5rem);
pointer-events: none;
}
.blog-cover--plain {
background:
radial-gradient(circle at 82% 18%, rgb(130 160 110 / 0.75), transparent 55%),
radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.5px) 0 0 / 14px 14px,
linear-gradient(135deg, var(--color-travel) 0%, #3E5436 100%);
}
.blog-cover--plain::before {
background: none;
}
.blog-cover__text {
position: absolute;
right: 1.75rem;
bottom: 1.5rem;
left: 1.75rem;
z-index: 3;
display: flex;
flex-direction: column;
gap: 0.5rem;
color: #FFFFFF;
text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}
.blog-cover__title {
display: -webkit-box;
overflow: hidden;
font-family: var(--font-display);
font-size: clamp(1.375rem, 8.5cqw, 2.25rem);
font-weight: var(--weight-medium);
line-height: 1.08;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.blog-cover__subtitle {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.75rem;
font-weight: var(--weight-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.blog-cover__subtitle::before {
content: "";
flex: none;
width: 1.5rem;
height: 2px;
border-radius: 1px;
background: var(--color-travel-glow);
}
.blog-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1.375rem 1.375rem 1.5rem;
}
.blog-label {
display: inline-block;
align-self: flex-start;
padding: 0.3125rem 0.6875rem;
border-radius: var(--radius-pill);
background: var(--color-surface-warm);
color: var(--color-care);
font-size: 0.6875rem;
font-weight: var(--weight-bold);
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
}
.blog-label--trip {
background: var(--color-travel-soft);
color: var(--color-travel);
}
.blog-card__title {
display: -webkit-box;
margin-top: 0.75rem;
overflow: hidden;
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.3125rem;
font-weight: var(--weight-medium);
line-height: 1.25;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.blog-card__excerpt {
display: -webkit-box;
margin-top: 0.5rem;
overflow: hidden;
color: var(--color-text);
font-size: var(--text-sm);
line-height: 1.6;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.blog-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: auto;
padding-top: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-2xs);
}
.blog-empty {
padding: var(--space-12) var(--space-5);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-sm);
text-align: center;
}
.blog-empty__title {
margin-bottom: var(--space-2);
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-h3);
}
.blog-empty .button {
margin-top: var(--space-5);
}
.blog-pages {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-12);
}
.blog-pages__number,
.blog-pages__step,
.blog-pages__gap {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.375rem;
border-radius: var(--radius-sm);
color: var(--color-text-strong);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-decoration: none;
}
.blog-pages__number,
.blog-pages__step {
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
}
.blog-pages__step {
padding-inline: var(--space-4);
}
a.blog-pages__number:hover,
.blog-pages__step:hover {
border-color: var(--color-accent-text);
color: var(--color-accent-text);
}
.blog-pages__number--current {
border-color: var(--color-ink);
background: var(--color-ink);
color: var(--color-ink-inverse);
}
/* A trip's page and a post: a centred reading column with a wider picture. */
.blog-article__header {
padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
.blog-article__column {
width: 100%;
max-width: calc(46rem + 2 * var(--shell-gutter));
margin-inline: auto;
padding-inline: var(--shell-gutter);
}
.blog-article__header .breadcrumb {
margin-bottom: var(--space-6);
}
.blog-article__title {
margin-top: 0;
color: var(--color-ink);
font-family: var(--font-display);
font-size: clamp(2rem, 4.6vw, 3rem);
font-weight: var(--weight-regular);
line-height: 1.08;
text-wrap: balance;
}
.blog-article__subtitle {
margin-top: var(--space-3);
color: var(--color-accent-text);
font-family: var(--font-display);
font-size: var(--text-subtitle);
font-style: italic;
}
.blog-article__cover {
width: 100%;
max-width: calc(62.5rem + 2 * var(--shell-gutter));
margin: var(--space-8) auto 0;
padding-inline: var(--shell-gutter);
}
.blog-article__cover img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-xl);
background: var(--color-surface-sunken);
object-fit: cover;
}
/* A trip's page shows its card's cover, larger. */
.blog-trip__cover {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-xl);
}
.blog-trip__cover img {
height: 100%;
border-radius: 0;
}
.blog-trip__cover::after {
inset: clamp(0.75rem, 2cqw, 1.25rem);
border-radius: calc(var(--radius-xl) - clamp(0.5rem, 1.5cqw, 0.875rem));
}
.blog-trip__cover .blog-cover__text {
right: clamp(1.75rem, 6cqw, 4rem);
bottom: clamp(1.5rem, 5cqw, 3.5rem);
left: clamp(1.75rem, 6cqw, 4rem);
gap: clamp(0.5rem, 1.2cqw, 0.875rem);
}
.blog-trip__cover .blog-cover__title {
font-size: clamp(1.75rem, 6cqw, 3.75rem);
}
.blog-trip__cover .blog-cover__subtitle {
font-size: clamp(0.75rem, 1.4cqw, 0.9375rem);
}
.blog-trip__cover .blog-cover__subtitle::before {
width: clamp(1.5rem, 4cqw, 2.5rem);
}
.blog-facts {
display: grid;
gap: var(--space-4);
margin-top: var(--space-8);
}
@media (min-width: 40rem) {
.blog-facts {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
.blog-facts__item {
padding: 1.375rem 1.5rem;
border: 1px solid var(--color-travel-line);
border-radius: var(--radius-md);
background: var(--color-travel-soft);
}
.blog-facts dt {
color: var(--color-travel);
font-size: 0.75rem;
font-weight: var(--weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.blog-facts dd {
margin: 0.375rem 0 0;
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.375rem;
line-height: 1.25;
}
.blog-trip__heading {
margin-top: var(--space-12);
}
.pg-rule--trip {
background: var(--color-travel);
}
.blog-reports {
display: grid;
gap: 0.875rem;
margin: 0;
padding: 0;
list-style: none;
}
.blog-report {
display: grid;
grid-template-columns: 6.5rem 1fr;
gap: var(--space-5);
align-items: center;
overflow: hidden;
border: 1px solid var(--color-border-card);
border-radius: var(--radius-md);
background: var(--color-surface);
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-report:hover {
border-color: var(--color-travel-glow);
box-shadow: var(--shadow-card);
}
/* The picture fills its column at whatever height the text gives the row, so a
portrait photo never stretches the row. */
.blog-report__image {
position: relative;
align-self: stretch;
min-height: 6.25rem;
background: var(--color-surface-sunken);
}
.blog-report__image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-report__body {
display: block;
padding: var(--space-4) var(--space-4) var(--space-4) 0;
}
.blog-report__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem;
color: var(--color-text-muted);
font-size: var(--text-2xs);
}
/* Date, dot and reading time. On a phone the card is too narrow for them on
one line and the dot would start the next, so there it is left out and the
reading time may simply go below the date. */
.blog-report__when {
display: inline-flex;
flex-wrap: wrap;
column-gap: 0.625rem;
}
@media (max-width: 29.999rem) {
.blog-report__when > [aria-hidden="true"] {
display: none;
}
}
.blog-report__title {
display: block;
margin-top: 0.5rem;
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: var(--weight-medium);
line-height: 1.25;
}
.blog-report__excerpt {
display: -webkit-box;
margin-top: 0.3125rem;
overflow: hidden;
color: var(--color-text);
font-size: var(--text-xs);
line-height: 1.55;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.blog-report__more {
display: none;
color: var(--color-travel);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
white-space: nowrap;
}
@media (min-width: 40rem) {
.blog-report {
grid-template-columns: 8.125rem 1fr auto;
gap: 1.375rem;
padding-right: var(--space-6);
}
.blog-report__body {
padding-right: 0;
}
.blog-report__more {
display: block;
}
}
/* A post: its labels and meta line, then its blocks narrowed to the reading column. */
.blog-post__meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.blog-post__content {
padding-top: var(--space-8);
}
.blog-post__content .block__shell {
max-width: calc(46rem + 2 * var(--shell-gutter));
}
.blog-post__content .pg-video,
.blog-post__content .pg-prose,
.blog-post__content .pg-post-images {
padding-block: 0;
}
.blog-post__content > * + * {
margin-top: var(--space-6);
}
.blog-post__content .pg-video__figure {
margin-top: 0;
}
.blog-steps {
display: grid;
gap: var(--space-4);
margin-top: var(--space-12);
}
@media (min-width: 40rem) {
.blog-steps {
grid-template-columns: 1fr 1fr;
}
}
.blog-steps__link {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-md);
background: var(--color-surface);
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-steps__link:hover,
.blog-steps__link:focus-visible {
border-color: var(--color-accent-light);
box-shadow: var(--shadow-card);
}
.blog-steps__link--next {
flex-direction: row-reverse;
text-align: right;
}
.blog-steps__link--empty {
visibility: hidden;
}
.blog-steps__arrow {
flex: none;
color: var(--color-accent-text);
transition: transform 0.15s ease;
}
.blog-steps__link--previous:hover .blog-steps__arrow {
transform: translateX(-3px);
}
.blog-steps__link--next:hover .blog-steps__arrow {
transform: translateX(3px);
}
.blog-steps__text {
display: block;
min-width: 0;
}
.blog-steps__label {
display: block;
color: var(--color-text-muted);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.blog-steps__title {
display: block;
margin-top: var(--space-1);
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.1875rem;
line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) {
.blog-steps__arrow {
transition: none;
}
.blog-steps__link:hover .blog-steps__arrow {
transform: none;
}
}
.blog--more {
padding-top: var(--space-4);
}
.blog--more .pg-rule {
margin-bottom: var(--space-8);
}
/* A heading block and a dividing line, in the same reading column as text. */
.pg-heading .block__shell,
.pg-divider .block__shell {
max-width: calc(46rem + 2 * var(--shell-gutter));
}
.pg-heading {
padding-top: var(--space-8);
}
.pg-heading__text {
color: var(--color-ink);
font-family: var(--font-display);
font-weight: var(--weight-regular);
line-height: 1.2;
}
.pg-heading--h2 .pg-heading__text {
font-size: var(--text-title);
}
.pg-heading--h3 .pg-heading__text {
font-size: var(--text-h3);
}
.pg-heading--h4 .pg-heading__text {
font-size: 1.25rem;
}
.pg-divider {
padding-block: var(--space-8);
}
.pg-divider__line {
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--color-border);
}
.blog-post__content .pg-heading,
.blog-post__content .pg-divider {
padding-block: 0;
}
.blog-post__content .pg-heading {
padding-top: var(--space-4);
}
.blog-post__content .pg-divider {
padding-block: var(--space-4);
}
/* The prose block: running text in a reading column. On a page it is a section
of its own and keeps the page's rhythm; in a post the post sets the spacing. */
.pg-prose {
padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.25rem, 7vw, 5.25rem);
}
.pg-prose .block__shell {
max-width: calc(46rem + 2 * var(--shell-gutter));
}
/* A legal text (blocks/legal_text.php): the main points in brief and the text in
a reading column, with its contents beside it on a wide screen and above it on
a phone. */
.pg-legal {
padding-top: clamp(1.5rem, 4vw, 2.75rem);
}
.pg-legal__inner {
display: grid;
gap: var(--space-8);
max-width: calc(66rem + 2 * var(--shell-gutter));
}
.pg-legal__main {
min-width: 0;
max-width: 46rem;
}
/* The contents, in the same shape as the portal's settings index
(portal.css, .settings-index): a quiet list, the section being read lit up
with an accent bar (site.js sets aria-current). */
.pg-legal__contents ul {
display: grid;
gap: 0.125rem;
margin: 0;
padding: 0;
list-style: none;
}
.pg-legal__contents a {
display: block;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-xs);
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.4;
text-decoration: none;
}
.pg-legal__contents a:hover,
.pg-legal__contents a:focus-visible {
background: var(--color-surface-warm);
color: var(--color-ink);
}
.pg-legal__contents a[aria-current="true"] {
background: var(--color-surface-warm);
box-shadow: inset 2px 0 0 var(--color-accent-strong);
color: var(--color-ink);
font-weight: var(--weight-semibold);
}
.pg-legal__updated {
margin-bottom: var(--space-5);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.pg-legal__summary {
margin-bottom: var(--space-8);
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-md);
background: var(--color-surface-warm);
color: var(--color-text-strong);
}
.pg-legal__summary-title {
margin-bottom: var(--space-3);
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: var(--weight-regular);
}
.pg-legal__summary ul {
display: grid;
gap: var(--space-2);
padding-left: 1.25rem;
list-style: disc;
line-height: 1.6;
}
/* A jump from the contents lands with the heading clear of the sticky header. */
.pg-legal__body h2 {
scroll-margin-top: 7rem;
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.pg-legal__body > h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
@media (min-width: 64rem) {
.pg-legal__inner--contents {
grid-template-columns: 14rem minmax(0, 46rem);
gap: var(--space-12);
align-items: start;
}
.pg-legal__contents {
position: sticky;
top: 6.5rem;
max-height: calc(100vh - 8rem);
overflow-y: auto;
}
}
.prose {
color: var(--color-text-strong);
font-size: 1.125rem;
line-height: 1.8;
overflow-wrap: anywhere;
}
.prose > * + * {
margin-top: 1.25rem;
}
.prose h2,
.prose h3 {
margin-top: 2.25rem;
color: var(--color-ink);
font-family: var(--font-display);
font-weight: var(--weight-regular);
line-height: 1.2;
}
.prose h2 {
font-size: var(--text-h3);
}
.prose h3 {
font-size: 1.25rem;
}
.prose ul {
padding-left: 1.25rem;
list-style: disc;
}
.prose li + li {
margin-top: 0.375rem;
}
.prose blockquote {
margin-inline: 0;
padding: var(--space-2) 0 var(--space-2) var(--space-5);
border-left: 3px solid var(--color-accent-light);
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.3125rem;
font-style: italic;
line-height: 1.5;
}
.prose strong {
color: var(--color-ink);
font-weight: var(--weight-bold);
}
.prose a {
color: var(--color-accent-text);
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Pictures in a reading column: one wide, or a grid of squares. */
.pg-post-images .block__shell {
max-width: calc(46rem + 2 * var(--shell-gutter));
}
.pg-post-images__list {
display: grid;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.pg-post-images__list--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pg-post-images__list--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) {
.pg-post-images__list--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.pg-post-images__figure {
margin: 0;
}
.pg-post-images__link {
display: block;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface-sunken);
}
.pg-post-images__link img {
display: block;
width: 100%;
transition: transform 0.3s ease;
}
.pg-post-images__list--two img,
.pg-post-images__list--three img {
aspect-ratio: 1;
object-fit: cover;
}
.pg-post-images__list--single img {
max-height: 80vh;
object-fit: contain;
}
.pg-post-images__link:hover img {
transform: scale(1.03);
}
.pg-post-images__caption {
margin-top: var(--space-2);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
/* A portrait phone video must not run taller than the screen. */
.blog-post__content .pg-video__player {
width: auto;
max-width: 100%;
max-height: 80vh;
margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
.blog-card,
.pg-post-images__link img {
transition: none;
}
.blog-card:hover,
.pg-post-images__link:hover img {
transform: none;
}
}
/* ==========================================================================
Designed pages (care, travel, education, book, ANBI …)
--------------------------------------------------------------------------
The blocks page_hero, page_section, page_cards and page_quotes carry the look of
the supplied page designs: warm bands, a serif heading, an accent rule, white
cards. They are built from the tokens only, like everything else on the site.
========================================================================== */
.pg {
padding-block: clamp(3.25rem, 7vw, 5.25rem);
background: var(--color-canvas);
color: var(--color-text-strong);
}
.pg--tint {
background: var(--color-surface-warm);
}
.pg--soft {
background: var(--color-surface-soft);
}
.pg--dark {
background: var(--color-surface-dark);
color: var(--color-text-on-dark);
}
.pg-rule {
display: block;
width: 3.5rem;
height: 2px;
margin: var(--space-5) 0 var(--space-6);
background: var(--color-accent-light);
}
/* --- Opening ---------------------------------------------------------------- */
.pg-hero {
padding-block: clamp(3rem, 7vw, 5.25rem);
}
.pg-hero__inner {
display: grid;
gap: var(--space-10);
align-items: center;
}
.pg-hero__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-page-hero);
font-weight: var(--weight-regular);
line-height: var(--leading-tight);
text-wrap: balance;
}
.pg-hero__subtitle {
margin-top: var(--space-3);
color: var(--color-accent-text);
font-family: var(--font-display);
font-size: var(--text-subtitle);
font-style: italic;
}
.pg-hero__body {
max-width: 38rem;
margin-top: var(--space-5);
font-size: var(--text-body);
line-height: 1.75;
white-space: pre-line;
}
/* With no picture, the text column isn't narrowed by one already, so the body can
run as wide as the design's own text column (the contact page's own body wraps
to three lines at the narrower width the picture case needs). */
.pg-hero__inner:not(.pg-hero__inner--image) .pg-hero__body {
max-width: 48rem;
}
.pg-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-8);
}
.pg-hero__image {
max-width: 14.5rem;
justify-self: start;
}
.pg-hero__image img {
width: 100%;
height: auto;
object-fit: contain;
}
.pg-hero__image--photo {
max-width: none;
height: 16rem;
overflow: hidden;
border-radius: var(--radius-xl);
}
.pg-hero__image--photo img {
height: 100%;
object-fit: cover;
}
@media (min-width: 56rem) {
.pg-hero__inner--image {
grid-template-columns: 1fr 14.5rem;
gap: var(--space-14);
}
.pg-hero__image {
justify-self: center;
}
.pg-hero__inner--photo {
grid-template-columns: 1.15fr 0.85fr;
gap: var(--space-12);
}
.pg-hero__image--photo {
justify-self: stretch;
height: 22.5rem;
}
}
/* --- Section ---------------------------------------------------------------- */
.pg-section__inner {
display: grid;
gap: var(--space-8);
align-items: center;
}
.pg-section__text {
max-width: 47rem;
}
.pg-section__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-title);
font-weight: var(--weight-regular);
line-height: 1.12;
text-wrap: balance;
}
.pg--dark .pg-section__heading {
color: var(--color-ink-inverse);
}
.pg-section__subtitle {
margin-top: var(--space-2);
color: var(--color-accent-text);
font-family: var(--font-display);
font-size: var(--text-subtitle);
font-style: italic;
}
.pg--dark .pg-section__subtitle {
color: var(--color-accent-light);
}
.pg-section__body {
margin-top: var(--space-5);
font-size: var(--text-body);
line-height: 1.78;
white-space: pre-line;
}
.pg-section__heading + .pg-rule + .pg-section__body,
.pg-rule + .pg-section__body {
margin-top: 0;
}
.pg-section__action {
margin-top: var(--space-6);
}
.pg-section__aside {
margin-top: var(--space-8);
}
.pg-section__aside-prompt {
font-size: var(--text-base);
line-height: 1.6;
}
.pg-section__aside .button {
margin-top: var(--space-5);
}
.pg-section__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pg-section__inner--photo .pg-section__image {
max-height: 22.5rem;
overflow: hidden;
border-radius: var(--radius-xl);
aspect-ratio: 4 / 3;
}
.pg-section__inner--photo .pg-section__image img {
filter: sepia(0.18) saturate(1.05);
}
.pg-section__inner--cover .pg-section__image {
max-width: 13.5rem;
}
.pg-section__inner--cover .pg-section__image img {
height: auto;
border-radius: var(--radius-xs);
box-shadow: var(--shadow-cover);
}
.pg-section__inner--round .pg-section__image {
width: 11.875rem;
height: 11.875rem;
overflow: hidden;
border-radius: 50%;
background: var(--color-border-dark);
}
@media (min-width: 56rem) {
.pg-section__inner--photo {
grid-template-columns: 0.82fr 1fr;
gap: var(--space-14);
}
.pg-section__inner--cover {
grid-template-columns: 13.5rem 1fr;
gap: var(--space-14);
}
.pg-section__inner--round {
grid-template-columns: 11.875rem 1fr;
gap: var(--space-12);
}
.pg-section__inner--aside {
grid-template-columns: 1.4fr 1fr;
gap: var(--space-12);
}
.pg-section__aside {
margin-top: 0;
padding-left: var(--space-10);
border-left: 1px solid var(--color-border-card);
}
.pg--dark .pg-section__aside {
border-left-color: rgba(250, 245, 239, 0.16);
}
.pg-section__inner--right.pg-section__inner--photo {
grid-template-columns: 1fr 0.82fr;
}
.pg-section__inner--right.pg-section__inner--cover {
grid-template-columns: 1fr 13.5rem;
}
.pg-section__inner--right.pg-section__inner--round {
grid-template-columns: 1fr 11.875rem;
}
.pg-section__inner--right .pg-section__image {
order: 2;
}
}
/* --- Cards and experiences --------------------------------------------------- */
.pg-cards__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
}
.pg-cards__intro {
margin-top: var(--space-4);
font-size: var(--text-body);
line-height: var(--leading-relaxed);
white-space: pre-line;
}
.pg-cards__list,
.pg-quotes__list {
display: grid;
gap: var(--space-6);
margin-top: var(--space-10);
}
.pg-cards__heading:only-child + .pg-cards__list,
.pg-cards__heading + .pg-quotes__list {
margin-top: var(--space-7);
}
.pg-card,
.pg-quote {
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-lg);
}
.pg-card__title {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
}
.pg-card__body {
margin-top: var(--space-3);
font-size: var(--text-base);
line-height: 1.68;
white-space: pre-line;
}
.pg-quote {
border-radius: var(--radius-md);
}
.pg-quote__text {
color: var(--color-ink);
font-size: var(--text-base);
line-height: 1.68;
white-space: pre-line;
}
.pg-quote__source {
margin-top: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
}
@media (min-width: 40rem) {
.pg-cards__list--two,
.pg-quotes__list--two {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 56rem) {
.pg-cards__list--three,
.pg-quotes__list--three {
grid-template-columns: repeat(3, 1fr);
}
}
/* One testimony (page_quotes with a single quote): the heading in a narrow
column, the words in the display face behind a thin accent rule. */
.pg-testimony {
display: grid;
gap: var(--space-6);
}
.pg-testimony__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-title);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
}
.pg-testimony__heading::after {
content: '';
display: block;
width: 3rem;
height: 2px;
margin-top: var(--space-4);
background: var(--color-accent);
}
.pg-testimony__intro {
margin-top: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-base);
}
.pg-testimony__body {
margin: 0;
padding-left: var(--space-6);
border-left: 2px solid var(--color-accent);
}
.pg-testimony__text {
margin: 0;
color: var(--color-ink);
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
line-height: 1.7;
white-space: pre-line;
}
.pg-testimony__source {
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (min-width: 56rem) {
.pg-testimony {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
gap: var(--space-12);
align-items: start;
}
}
/* Two plain sections in a row read as one page: the second needs no full gap above it. */
.pg:not(.pg--tint):not(.pg--soft):not(.pg--dark) + .pg:not(.pg--tint):not(.pg--soft):not(.pg--dark) {
padding-top: 0;
}
/* --- Forms ------------------------------------------------------------------- */
.pg-form__intro-block {
max-width: 50rem;
margin-inline: auto;
text-align: center;
}
.pg-form__heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-title);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
}
.pg-form__intro {
max-width: 38rem;
margin-top: var(--space-3);
margin-inline: auto;
font-size: var(--text-body);
line-height: var(--leading-relaxed);
white-space: pre-line;
}
.pg-form__card {
max-width: 50rem;
margin-inline: auto;
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-lg);
}
.pg-form__intro-block + .pg-form__row {
margin-top: var(--space-8);
}
.pg-form__card-heading {
margin-bottom: var(--space-6);
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: var(--weight-regular);
}
.pg-form__card .input {
border-radius: var(--radius-sm);
}
.pg-form__card .input:focus-visible {
border-radius: var(--radius-sm);
}
.pg-form__row--aside .pg-form__card {
max-width: none;
margin-inline: 0;
}
.pg-form__details {
margin-top: var(--space-8);
}
.pg-form__details-heading {
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-title);
font-weight: var(--weight-regular);
}
.pg-form__details-list {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-top: var(--space-6);
}
.pg-form__details-item dt {
color: var(--color-text-muted);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
.pg-form__details-item dd {
margin-top: var(--space-1);
font-size: var(--text-base);
color: var(--color-ink);
}
.pg-form__details-item dd a {
color: var(--color-accent-text);
font-weight: var(--weight-semibold);
}
.pg-form__details-quote {
margin-top: var(--space-8);
padding: var(--space-6);
background: var(--color-surface-warm);
border-radius: var(--radius-md);
}
.pg-form__details-quote p {
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-lead);
line-height: 1.4;
color: var(--color-ink);
}
.pg-form__details-quote cite {
display: block;
margin-top: var(--space-3);
color: var(--color-accent-text);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-style: normal;
}
@media (min-width: 56rem) {
.pg-form__row--aside {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: var(--space-12);
align-items: start;
}
.pg-form__details {
margin-top: 0;
}
}
/* minmax(0, 1fr): a column never grows past the card for its widest content
(a long choice in a dropdown, the Turnstile check), which pushed every field
out of the card on a phone. */
.pg-form__form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.pg-form__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.pg-form__grid > *,
.pg-form__card .select,
.pg-form__card .input {
min-width: 0;
max-width: 100%;
}
.pg-form__card select.input {
text-overflow: ellipsis;
}
.pg-form__trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pg-form__consent {
display: flex;
gap: var(--space-3);
align-items: flex-start;
font-size: var(--text-base);
line-height: 1.5;
}
.pg-form__consent input {
flex: none;
margin-top: 0.25rem;
}
.pg-form__form .button {
justify-self: start;
}
.pg-form__done {
padding: var(--space-6) 0;
text-align: center;
}
.pg-form__done-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: var(--color-accent-soft, var(--color-border-card));
color: var(--color-accent);
font-size: 1.75rem;
}
.pg-form__done-title {
margin-top: var(--space-4);
color: var(--color-ink);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-medium);
}
/* A phone: less padding around the fields. (The Turnstile check draws its
compact version where the normal one does not fit, assets/js/turnstile.js.) */
@media (max-width: 39.99rem) {
.pg-form__card {
padding: var(--space-6) var(--space-5);
}
}
@media (min-width: 40rem) {
.pg-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pg-form__wide {
grid-column: 1 / -1;
}
}
/* --- Video ------------------------------------------------------------------- */
.pg-video__figure {
max-width: 56rem;
margin-top: var(--space-6);
}
/* Two or more videos: side by side, smaller, from a tablet width up. */
.pg-video__list--grid {
display: grid;
gap: var(--space-6);
max-width: 56rem;
margin-top: var(--space-6);
}
.pg-video__list--grid .pg-video__figure {
margin-top: 0;
}
.blog-post__content .pg-video__list--grid {
margin-top: 0;
}
@media (min-width: 40rem) {
.pg-video__list--grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.pg-video__player {
display: block;
width: 100%;
border-radius: var(--radius-md);
background: var(--color-ink);
}
.pg-video__caption {
margin-top: var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-base);
}
.pg-video__transcript {
max-width: 56rem;
margin-top: var(--space-4);
}
.pg-video__transcript summary {
cursor: pointer;
font-weight: var(--weight-bold);
}
.pg-video__transcript p {
margin-top: var(--space-3);
line-height: var(--leading-relaxed);
white-space: pre-line;
}
/* --- Looping video in a section, region band, rows, closing note, quote with aside -- */
/* Stacked above the text on a narrow screen, the video keeps a landscape frame
that scales with its width, rather than a fixed height that turned it into a
tall, heavily cropped strip on a phone. Beside the text, from 56rem, it takes
the design's own fixed height again. */
.pg-section__inner--photo .pg-section__image--video {
height: auto;
max-height: none;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--color-ink);
aspect-ratio: 16 / 9;
}
@media (min-width: 56rem) {
.pg-section__inner--photo .pg-section__image--video {
height: 22.5rem;
aspect-ratio: auto;
}
}
.pg-section__image--video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The pause button site.js adds to a looping video (WCAG 2.2.2). */
.pg-section__image--video {
position: relative;
}
.pg-video-toggle {
position: absolute;
right: var(--space-3);
bottom: var(--space-3);
padding: var(--space-2) var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background: rgba(42, 37, 33, 0.72);
color: var(--color-ink-inverse);
font: inherit;
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
cursor: pointer;
}
/* Back to the design's own look: a warm band, the map faded in behind the text rather than
beside it in its own card. Hidden below 56rem entirely, zoom-on-click included — there is
no room for a background map beside touch-only, single-column text on a phone. */
.pg-region {
position: relative;
overflow: hidden;
padding-block: 0;
}
.pg-region__shell {
position: relative;
}
.pg-region__map {
display: none;
}
.pg-region__map img,
.pg-region__map svg {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* never distorted — see this rule's own note below */
object-position: right center;
}
@media (min-width: 56rem) {
.pg-region__shell {
/* The map is free to run taller than the text and show past its bottom edge —
this is what gives it room to be a decent size instead of being squeezed down
to whatever height the text happens to need. */
min-height: clamp(24rem, 34vw, 38rem);
}
.pg-region__map {
display: block;
position: absolute;
inset: 0 0 0 34%;
opacity: 0.7;
pointer-events: none;
/* Fades on both sides, not just the left one for the text: the right one tapers the
map away before its own box edge — the edge gen_map6.py's own three-sided viewBox
crop put much closer to real content than before — so cropping it at all never
reads as a hard, unnatural line. The left one, at 10% rather than the original 34%,
is what keeps the Caribbean cluster (closest to that edge of any pin, checked
against its own actual screen position at ≈18%) fully opaque rather than fading
out with the rest of that side. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 95%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 95%, transparent 100%);
}
/* Height drives the size, not width — the box above always matches the shell's own
full height (its top-to-bottom inset), so it can never leave a bare gap below itself
the way sizing height from width via aspect-ratio used to on a short-but-wide shell.
object-fit: cover (not contain) is what makes the drawn map itself reach that full
height too, rather than sitting centred with blank space above and below it whenever
the box turns out taller than 800:560 needs — it never distorts either way, cover
still preserves the SVG's own ratio, it just crops the world down to a smaller slice
instead of shrinking the whole thing to fit. Anchored right, same as the box itself.
Sea stays transparent (gen_map6.py has no ocean fill, on purpose — a flat rect behind
everything else once read as a pasted-on overlay, not a map), so cropping in like this
never shows a hard, unnatural edge on its own — the mask above is what handles the one
real edge left, its own box's right side, now that the viewBox itself is windowed
close around the content on that side too. */
.pg-region__map img,
.pg-region__map svg {
height: 100%;
object-fit: cover;
}
/* An inline map instead keeps its own ratio, centred in the box: sized from the box's
width, never its height. Filling the full height made the map scale with the text —
a longer text (the English one) made the band taller, the map larger, and the
right-anchored crop pushed the Caribbean pins in under the text. This way they land
at the same share of the shell's width (≈50%) however long the text runs, which is
what .pg-region__text's own 45% cap below is measured against. */
/* The land beyond the viewBox's own window (the Arctic above, the far south below) is
still drawn rather than cut at the SVG's edge, so the map runs from the band's top to
its bottom however tall the text makes it, and a zoomed-in place is only cut off by
the band itself. The box's own mask, which clips to its border box, still ends it
left and right, and the section's overflow ends it top and bottom. */
.pg-region__map.pg-region__map--interactive svg {
position: absolute;
top: 50%;
left: 0;
height: auto;
overflow: visible;
transform: translateY(-50%);
}
/* An inline map may also run on past the shell to the screen's right edge, and grows
with the room it finds there (up to a quarter larger), so it fills more of the band's
height on a wide screen. --shell is the shell's width and --spare the room beside it
(the section is the size container, so 100cqw is the screen's width). The width is
worked out so the Andaman and Nicobar pin and its label still end inside the right-hand
fade, and the left offset keeps the Caribbean pins (a third of the way into the map)
exactly where they were, clear of the running text, however large the map gets. */
.pg-region:has(.pg-region__map--interactive) {
container-type: inline-size;
}
.pg-region__map.pg-region__map--interactive {
--shell: min(var(--shell-max), 100cqw);
--spare: calc((100cqw - var(--shell)) / 2);
--map-width: clamp(0.66 * var(--shell), 0.656 * var(--shell) + 1.52 * var(--spare), 0.825 * var(--shell));
right: calc(-1 * var(--spare));
}
.pg-region__map.pg-region__map--interactive svg {
left: calc(0.215 * var(--shell) - 0.326 * var(--map-width));
width: var(--map-width);
}
}
/* An inline SVG (Media::svgMarkup()) is a live document, not a flattened picture: a pin can
be clicked, which an never allows. A country shape carries no tooltip of its own —
the eight the organisation is active in already have a pin with a name and a tooltip of
its own, and giving the same to all roughly 180 others added hover targets nobody asked
to use. */
.pg-region__map--interactive {
pointer-events: auto;
}
/* The scene site.js scales and shifts to "zoom" on a clicked place — see that file's own
docblock for the transform it computes. transform-origin 0 0 matches its math exactly. */
.pg-map__scene {
transform-origin: 0 0;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg-map__pin {
cursor: pointer;
}
/* A country the work is in zooms in on a click too (site.js); it lightens a little under
the pointer so it reads as something to press. */
.pg-map__country--zoomable {
cursor: pointer;
transition: opacity 0.15s ease;
}
.pg-map__country--zoomable:hover {
opacity: 0.8;
}
.pg-map__pin-halo {
transition: r 0.15s ease, opacity 0.15s ease;
}
.pg-map__pin-dot {
transition: r 0.15s ease;
}
.pg-map__pin:hover .pg-map__pin-dot,
.pg-map__pin--active .pg-map__pin-dot {
r: 4.4;
}
.pg-map__pin--active .pg-map__pin-halo {
r: 11;
opacity: 0.32;
animation: pg-map-pulse 1.8s ease-out infinite;
}
@keyframes pg-map-pulse {
0% { r: 7; opacity: 0.4; }
100% { r: 16; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pg-map__scene {
transition: none;
}
.pg-map__pin--active .pg-map__pin-halo {
animation: none;
}
}
/* The pretty tooltip site.js shows above (or, once too close to the map's own top edge,
below) a hovered/focused pin — the SVG's own