/* ==========================================================================
PROJECT THEME ENTRY - strict cascade-layer build
===========================================================================
This is the only stylesheet entry used by project pages:
It owns the DGA vendor imports, project tokens, and project component
visuals. Do not add separate vendor stylesheet links to individual pages.
WHAT YOU GAIN
Every DGA rule sits in the `vendors` layer, which is the lowest. Any CSS you
write beats it automatically, whatever the selector, with no specificity
fight and no !important. If your team writes a lot of custom CSS over DGA,
that is worth having.
TRADEOFF
@layer can only be attached to a stylesheet through @import, and @import
hides those files from the browser's preload scanner: it cannot request
nds.critical.min.css until it has downloaded and parsed THIS file. That is
one extra round trip before any styling arrives, on every cold visit.
Measured locally, where there is no network latency at all, it still cost
about 6 ms; on a real mobile connection it is a full round trip.
DGA ships a 6 KB critical stylesheet precisely so the shell paints
immediately, and this arrangement throws that away. That is the trade.
There is no way to have both today: is
not supported by browsers (tested, the attribute is ignored).
ONE RULE
Do not mix. If any DGA stylesheet is still loaded with a plain , it
stays unlayered, and unlayered rules beat layered ones - so your theme would
silently stop winning. It is all through here, or none of it.
========================================================================== */
@layer vendors, reset, base, layout, components, theme, utilities;
/* DGA, lowest priority. Order among them is the same as the order. */
@import url("../assets/css/nds.critical.min.css") layer(vendors);
@import url("../assets/css/nds-icons.min.css") layer(vendors);
@import url("../assets/css/nds-main.min.css") layer(vendors);
@import url("../assets/css/nds-accessibility.min.css") layer(vendors);
/* Full Hugeicons stroke-rounded set (single source, avoids the trimmed-subset
gaps in hgi-rounded-stroke-min.css, e.g. the accessibility-panel glyphs). Its
relative font url resolves to /lib/hugeicons/hgi-stroke-rounded.woff2. */
@import url("../lib/hugeicons/icons.css") layer(vendors);
/* Project design tokens, above DGA. */
@import url("tokens.css") layer(theme);
/* Project component visuals live below, in @layer components. */
@layer base {
/* Skip link. Not part of DGA; this one is ours, because DGA ships none and
its absence is a WCAG 2.4.1 failure. Keep it first in the tab order. */
.skip-link {
position: absolute;
inset-inline-start: var(--spacing-xl, 16px);
inset-block-start: calc(var(--spacing-xl, 16px) * -4);
z-index: 1000;
padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
border-radius: var(--radius-sm, 4px);
background: var(--background-default, #fff);
color: var(--text-primary, #1b8354);
font-weight: 600;
text-decoration: none;
transition: inset-block-start var(--nds-transition, .2s ease);
}
.skip-link:focus-visible {
inset-block-start: var(--spacing-xl, 16px);
outline: 2px solid var(--border-focus, currentColor);
outline-offset: 2px;
}
#main-content:focus {
outline: none;
}
}
@layer layout {
/* Page-level composition you add on top of DGA. */
.wwf-sticky-nav-host {
position: sticky;
inset-block-start: 0;
/* Match the DGA main navigation's internal base stacking level. */
z-index: 1000;
}
.nds-main-nav {
border-block-end: 1px solid var(--border-neutral-primary);
box-shadow: none;
transition: box-shadow var(--nds-transition, .2s ease);
}
.nds-main-nav[data-state~="stuck"] {
box-shadow: var(--shadow-md);
}
.nds-main-nav .nds-dropdown[data-state~="open"] .nds-dropdown-menu {
/* Keep the moving panel clipped until its height transition catches
up with the NDS open state on both desktop and mobile. */
overflow: clip;
}
.nds-main-nav .nds-dropdown[data-state~="closing"] .nds-dropdown-menu {
/* Prevent stale link clicks during the DGA close timer. */
pointer-events: none;
}
@keyframes wwf-mobile-nav-reveal-overflow {
from {
overflow: clip;
}
to {
overflow: visible;
}
}
@media (max-width: 960px) {
body.nds-minimal .nds-main-nav .nds-collapse[data-state~="opened"] {
/* NDS starts the slide after applying its opened state. Delay the
overflow reveal so the drawer emerges below the header. */
animation-name: wwf-mobile-nav-reveal-overflow;
animation-duration: calc(var(--nds-transition-speed) * 1s);
animation-timing-function: step-end;
animation-fill-mode: forwards;
}
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
body.nds-minimal .nds-main-nav .nds-collapse[data-state~="opened"] {
animation-duration: 0s;
}
}
@media (prefers-reduced-motion: reduce) {
.nds-main-nav,
.skip-link {
transition: none;
}
}
html[data-a11y~="reduce-motion"] :is(.nds-main-nav, .skip-link) {
transition: none;
}
@media (min-width: 961px) {
.nds-main-nav {
/* Desktop dropdowns extend below the sticky bar; clip only inline
overflow so NDS overflow-menu items cannot scroll the page. */
overflow-inline: clip;
}
.nds-main-nav[data-state~="stuck"] .nds-dropdown-menu {
inset-block-start: var(--nds-nav-height);
}
.nds-main-nav:has(.nds-dropdown[data-state~="open"]) {
/* The NDS dropdown is fixed below the nav. Removing the no-op
transform while it is open lets it escape the inline clip and
receive pointer events without reintroducing page overflow. */
transform: none;
}
.nds-content-layout:not(.nds-wSideMenu, .nds-wSideInfo) {
--section-padding-block: var(--spacing-5xl);
}
}
}
@layer components {
/* Project components DGA does not cover. Check the NDS component library
before adding one: most patterns already exist there. */
/* Active nav item: the subtle neutral "hover" background (not the solid green
primary fill) with normal text, PLUS the NDS indicator bar to mark the page
you are on. Active state is set server-side (data-state="current" in
Header.cshtml). */
.nds-main-nav .nds-nav-link:is([data-state~="current"]) {
--btn-bg: var(--button-background-neutral-default);
--btn-bg-hover: var(--button-background-neutral-hovered);
--btn-bg-active: var(--button-background-neutral-pressed);
--btn-bg-selected: var(--button-background-neutral-default);
--btn-color: var(--text-default);
--btn-indicator-color: var(--text-default);
--btn-indicator-active: var(--text-default);
--btn-indicator-selected: var(--text-default);
}
.nds-hero-section {
--section-shadow: none;
--shadow-inset: none;
}
.nds-hero-section.nds-sub {
--background-sub-hero: var(--background-neutral-25);
}
/* Keep breadcrumbs neutral when they are composed inside a content section. */
.nds-content-section .nds-breadcrumb :where(.nds-link, a) {
--link-color: var(--link-neutral);
--link-hover: var(--link-neutral-hovered);
--link-pressed: var(--link-neutral-pressed);
--link-focused: var(--link-neutral-focused);
--link-visited: var(--link-neutral-visited);
--link-decoration: none;
}
.nds-content-section .nds-breadcrumb :where(.nds-link, a):is(:hover, :active) {
--link-decoration: underline;
}
.wwf-sub-hero--illustrated {
--wwf-sub-hero-image-size: min(52vw, var(--spacing-480, 1920px));
--wwf-sub-hero-mask: linear-gradient(to left, black 0%, black 50%, transparent 100%);
}
.wwf-sub-hero--illustrated::after {
inset-block: 0;
inset-inline-start: auto;
inset-inline-end: 0;
inline-size: var(--wwf-sub-hero-image-size);
background-image: var(--wwf-sub-hero-image);
background-position: right center;
background-size: cover;
-webkit-mask-image: var(--wwf-sub-hero-mask);
mask-image: var(--wwf-sub-hero-mask);
opacity: .8;
}
@media (min-width: 961px) {
.wwf-sub-hero--illustrated .nds-section-head {
max-inline-size: calc(65% - var(--spacing-xl, 16px));
}
}
:is(html[dir="rtl"], .rtl) .wwf-sub-hero--illustrated::after {
/* The shared mask reverses with the mirrored RTL artwork. */
background-position: left center;
scale: -1 1;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-sub-hero--illustrated::after {
opacity: .24;
}
@media (max-width: 960px) {
.wwf-sub-hero--illustrated::after {
opacity: .24;
}
}
@media (max-width: 600px) {
.wwf-sub-hero--illustrated {
--wwf-sub-hero-image-size: 100%;
}
.wwf-sub-hero--illustrated::after {
opacity: .18;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-sub-hero--illustrated::after {
opacity: .18;
}
}
/* ======= HOME ======= */
/* ---- ANNOUNCEMENT MODAL ---- */
.wwf-home-announcement-modal {
--card-width-max: 600px;
--card-padding: 0;
--card-gap: 0;
--card-radius: var(--radius-xl, 24px);
--card-border: transparent;
box-sizing: border-box;
inset: 0;
inline-size: min(600px, calc(100% - var(--spacing-4xl, 32px)));
max-inline-size: 600px;
min-block-size: 0;
max-block-size: calc(100svh - var(--spacing-7xl, 64px));
margin: auto;
/* Keep modal chrome fixed; long copy scrolls inside the content panel. */
overflow: hidden;
border-radius: var(--radius-xl, 24px);
background-color: var(--wwf-dialogue-card-bg);
box-shadow: var(--wwf-announcement-shadow);
isolation: isolate;
}
.wwf-home-announcement-modal:not([hidden]) {
display: flex;
flex-direction: column;
}
.wwf-home-announcement-modal::before {
position: absolute;
inset: 0;
z-index: 0;
background: url("media/global-dialogue-waves.webp") center top / cover no-repeat;
content: "";
filter: grayscale(1);
opacity: var(--wwf-dialogue-texture-opacity);
pointer-events: none;
}
.wwf-home-announcement-modal>* {
position: relative;
z-index: 1;
}
.wwf-home-announcement-modal__header {
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3xl, 24px) var(--spacing-5xl, 40px) 0;
}
.wwf-home-announcement-modal__icon {
--icon-bg-color: var(--colors-blue-50);
--icon-color: var(--colors-blue-700);
inline-size: 56px;
block-size: 56px;
min-inline-size: 56px;
min-block-size: 56px;
background: var(--colors-blue-50);
color: var(--colors-blue-700);
}
.wwf-home-announcement-modal__icon .nds-icon {
font-size: var(--spacing-4xl, 32px);
}
.wwf-home-announcement-modal__close {
--btn-size: var(--spacing-5xl, 40px);
--btn-height: var(--spacing-5xl, 40px);
--btn-height-min: var(--spacing-5xl, 40px);
--btn-bg: var(--background-neutral-100);
--btn-bg-hover: var(--background-neutral-200);
--btn-bg-active: var(--colors-neutral-300);
--btn-border: transparent;
--btn-border-hover: transparent;
--btn-border-active: transparent;
--btn-color: var(--wwf-announcement-close-color);
--btn-color-hover: var(--wwf-announcement-close-color);
--btn-color-active: var(--wwf-announcement-close-color);
--btn-radius: var(--radius-md, 8px);
flex: 0 0 var(--spacing-5xl, 40px);
inline-size: var(--spacing-5xl, 40px);
block-size: var(--spacing-5xl, 40px);
min-inline-size: var(--spacing-5xl, 40px);
min-block-size: var(--spacing-5xl, 40px);
}
.wwf-home-announcement-modal__close .nds-icon {
font-size: var(--spacing-3xl, 24px);
}
.wwf-home-announcement-modal__heading {
flex: 0 0 auto;
padding: var(--spacing-xl, 16px) var(--spacing-5xl, 40px) var(--spacing-3xl, 24px);
color: var(--text-oncolor-primary);
}
.wwf-home-announcement-modal__heading .nds-card-title {
margin: 0;
color: inherit;
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-home-announcement-modal__tag {
--tag-bg: var(--colors-blue-50);
--tag-border: var(--colors-blue-200);
--tag-text: var(--colors-blue-800);
margin-block-start: var(--spacing-lg, 12px);
}
.wwf-home-announcement-modal__content {
display: block;
flex: 1 1 auto;
min-block-size: 0;
padding: var(--spacing-5xl, 40px) var(--spacing-5xl, 40px) var(--spacing-4xl, 32px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--background-default);
}
.wwf-home-announcement-modal__copy {
display: block;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-home-announcement-modal__copy p {
margin: 0 0 var(--spacing-3xl, 24px);
}
.wwf-home-announcement-modal__link {
--link-color: var(--wwf-announcement-link);
--link-hover: var(--colors-blue-700);
--link-pressed: var(--colors-blue-800);
display: inline-flex;
margin-block-end: var(--spacing-3xl, 24px);
color: var(--wwf-announcement-link);
font-weight: 600;
text-decoration: underline;
}
.wwf-home-announcement-modal__link::after {
content: none;
}
.wwf-home-announcement-modal__copy .wwf-home-announcement-modal__closing-copy {
margin-block-end: 0;
color: var(--text-primary-paragraph);
}
.wwf-home-announcement-modal__actions {
display: block;
flex: 0 0 auto;
padding: 0 var(--spacing-5xl, 40px) var(--spacing-5xl, 40px);
background: var(--background-default);
}
.wwf-home-announcement-modal__cancel {
--btn-bg: var(--background-neutral-100);
--btn-bg-hover: var(--background-neutral-200);
--btn-bg-active: var(--colors-neutral-300);
--btn-border: transparent;
--btn-border-hover: transparent;
--btn-border-active: transparent;
--btn-color: var(--text-default);
--btn-color-hover: var(--text-default);
--btn-color-active: var(--text-default);
inline-size: 100%;
}
@media (max-width: 600px) {
.wwf-home-announcement-modal {
inset: 0;
inline-size: calc(100% - var(--spacing-4xl, 32px));
max-inline-size: none;
max-block-size: calc(100svh - var(--spacing-4xl, 32px));
margin: auto;
border-radius: var(--radius-xl, 24px);
}
.wwf-home-announcement-modal__header {
padding: var(--spacing-3xl, 24px) var(--spacing-3xl, 24px) 0;
}
.wwf-home-announcement-modal__heading {
padding: var(--spacing-3xl, 24px);
}
.wwf-home-announcement-modal__content {
padding: var(--spacing-3xl, 24px);
}
.wwf-home-announcement-modal__actions {
padding: 0 var(--spacing-3xl, 24px) var(--spacing-3xl, 24px);
}
}
/* ---- HERO ---- */
/* Main event hero. Markup keeps DGA/NDS structure; this file only skins it. */
.wwf-hero-section {
--section-padding-block: 0;
justify-self: stretch;
inline-size: min(100%, 100vw);
max-inline-size: 100vw;
min-block-size: max(542px, calc(100svh - var(--nds-nav-height, 72px) - 40px));
padding-inline: 0;
overflow: hidden;
background-color: var(--colors-base-black, #161616);
}
.wwf-hero {
inline-size: 100%;
max-inline-size: 100%;
margin-inline: 0;
min-block-size: max(542px, calc(100svh - var(--nds-nav-height, 72px) - 40px));
}
.wwf-hero__wrapper {
block-size: 100%;
}
.wwf-hero__slide {
position: relative;
display: flex;
align-items: center;
padding-block: var(--spacing-6xl, 48px) var(--spacing-7xl, 64px);
isolation: isolate;
}
.wwf-hero__media {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.wwf-hero__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--wwf-hero-overlay);
}
.wwf-hero__video {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
.wwf-hero__content {
display: block;
position: relative;
z-index: 1;
inline-size: 100%;
block-size: auto;
margin: 0;
}
.wwf-hero__title {
display: block;
margin-block-end: var(--spacing-md, 8px);
font-size: calc(56px * var(--user-font-scale, 1));
line-height: calc(68px * var(--user-font-scale, 1));
letter-spacing: 0;
white-space: nowrap;
color: var(--wwf-hero-title);
}
.wwf-hero__tagline {
margin-block-end: var(--spacing-3xl, 24px);
font-size: calc(28px * var(--user-font-scale, 1));
line-height: calc(34px * var(--user-font-scale, 1));
font-weight: 700;
letter-spacing: 0;
background: linear-gradient(90deg, var(--wwf-hero-tagline-start), var(--wwf-hero-tagline-end));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 400px 100%;
}
.wwf-hero__meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-sm, 6px) var(--spacing-md, 8px);
max-inline-size: 100%;
margin-block: 0 var(--spacing-4xl, 32px);
padding: var(--spacing-xs, 4px) var(--spacing-lg, 12px);
border: 1px solid var(--wwf-hero-panel-border);
border-radius: var(--radius-full, 9999px);
background: var(--wwf-hero-panel-bg);
color: var(--colors-base-white, #ffffff);
font-size: calc(14px * var(--user-font-scale, 1));
line-height: calc(20px * var(--user-font-scale, 1));
font-weight: 600;
backdrop-filter: blur(12px);
box-shadow: var(--wwf-hero-panel-shadow);
}
.wwf-hero__meta-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm, 6px);
}
.wwf-hero__meta-item .nds-icon {
font-size: calc(14px * var(--user-font-scale, 1));
}
.wwf-hero__meta-separator {
inline-size: 6px;
block-size: 6px;
border-radius: var(--radius-full, 9999px);
background-color: var(--colors-base-white, #ffffff);
}
.wwf-countdown {
display: grid;
grid-template-columns: repeat(4, 92px);
gap: var(--spacing-lg, 12px);
margin-block-end: var(--spacing-4xl, 32px);
}
.wwf-countdown__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-block-size: 82px;
padding: var(--spacing-md, 8px);
border: 1px solid var(--wwf-hero-panel-border);
border-radius: var(--radius-md, 8px);
background: var(--wwf-hero-panel-bg);
color: var(--colors-base-white, #ffffff);
backdrop-filter: blur(12px);
box-shadow: var(--wwf-hero-panel-shadow);
}
.wwf-countdown__value {
display: block;
font-size: calc(32px * var(--user-font-scale, 1));
line-height: calc(40px * var(--user-font-scale, 1));
font-weight: 700;
}
.wwf-countdown__label {
display: block;
font-size: calc(13px * var(--user-font-scale, 1));
line-height: calc(20px * var(--user-font-scale, 1));
}
.wwf-hero__cta {
--btn-size: 40px;
--btn-height: 40px;
--btn-height-min: 40px;
--btn-padding: var(--spacing-lg, 12px);
--btn-FS: 16px;
--btn-LH: 24px;
--btn-icon-size: 20px;
--btn-gap: var(--spacing-sm, 6px);
--btn-bg: var(--wwf-action-bg);
--btn-bg-hover: var(--wwf-action-bg-hover);
--btn-bg-active: var(--wwf-action-bg-active);
--btn-bg-selected: var(--wwf-action-bg-active);
--btn-border: transparent;
--btn-border-hover: transparent;
--btn-border-active: transparent;
--btn-border-selected: transparent;
--btn-color: var(--colors-base-white, #ffffff);
--btn-loading-color: var(--colors-base-white, #ffffff);
--btn-radius: var(--radius-sm, 4px);
}
@media (max-width: 960px) {
.wwf-hero {
min-block-size: 620px;
}
.wwf-hero__content {
inline-size: min(100%, 720px);
}
.wwf-hero__title {
font-size: calc(48px * var(--user-font-scale, 1));
line-height: calc(56px * var(--user-font-scale, 1));
white-space: normal;
}
.wwf-hero__tagline {
font-size: calc(26px * var(--user-font-scale, 1));
line-height: calc(36px * var(--user-font-scale, 1));
}
}
@media (max-width: 600px) {
.wwf-hero-section,
.wwf-hero {
block-size: auto;
min-block-size: 680px;
}
.wwf-hero__wrapper,
.wwf-hero__slide {
block-size: 100%;
min-block-size: 680px;
}
.wwf-hero__content {
block-size: max-content;
min-block-size: 0;
}
.wwf-hero__slide {
display: block;
padding-block: var(--spacing-5xl, 40px);
}
.wwf-hero__title {
font-size: calc(38px * var(--user-font-scale, 1));
line-height: calc(44px * var(--user-font-scale, 1));
}
.wwf-hero__tagline {
margin-block-end: var(--spacing-3xl, 24px);
font-size: calc(23px * var(--user-font-scale, 1));
line-height: calc(32px * var(--user-font-scale, 1));
}
.wwf-hero__meta {
margin-block-end: var(--spacing-4xl, 32px);
border-radius: var(--radius-lg, 16px);
font-size: calc(17px * var(--user-font-scale, 1));
line-height: calc(26px * var(--user-font-scale, 1));
}
.wwf-hero__meta-separator {
display: none;
}
.wwf-countdown {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xl, 16px);
max-inline-size: 360px;
margin-block-end: var(--spacing-4xl, 32px);
}
.wwf-countdown__item {
min-block-size: 96px;
}
.wwf-countdown__value {
font-size: calc(36px * var(--user-font-scale, 1));
line-height: calc(44px * var(--user-font-scale, 1));
}
.wwf-hero__cta {
--btn-size: 56px;
--btn-height: 56px;
--btn-height-min: 56px;
--btn-FS: 22px;
--btn-LH: 30px;
}
}
:root[data-a11y~="high-contrast"] .wwf-hero__title,
:root[data-a11y~="high-contrast"] .wwf-hero__tagline {
background: none;
color: var(--text-oncolor-primary);
}
@media (forced-colors: active) {
.wwf-hero__title,
.wwf-hero__tagline {
background: none;
color: CanvasText;
}
.wwf-hero__media::after {
background: Canvas;
}
}
/* ---- MILESTONES ---- */
.wwf-milestones__grid {
display: flex;
align-items: stretch;
gap: var(--spacing-3xl, 24px);
}
.wwf-section-tag {
--tag-bg: var(--background-neutral-100);
--tag-border: transparent;
--tag-text: var(--text-default);
--tag-height: var(--spacing-4xl, 32px);
--tag-fs: var(--typo-text-md-FS);
--tag-padding-inline: var(--spacing-xl, 16px);
border: 0;
}
.wwf-tag--solid-success {
--tag-bg: var(--colors-primary-sa-flag-50);
--tag-border: transparent;
--tag-text: var(--colors-primary-sa-flag-800);
}
.wwf-tag--solid-neutral {
--tag-bg: var(--background-neutral-100);
--tag-border: transparent;
--tag-text: var(--text-default);
}
.wwf-section-tag .nds-label,
.wwf-oncolor-tag .nds-label {
line-height: var(--typo-text-md-LH);
}
.wwf-oncolor-tag {
--tag-bg: var(--wwf-hero-panel-bg);
--tag-border: var(--wwf-hero-panel-border);
--tag-text: var(--text-oncolor-primary);
--tag-height: var(--spacing-4xl, 32px);
--tag-fs: var(--typo-text-md-FS);
--tag-padding-inline: var(--spacing-lg, 12px);
backdrop-filter: blur(12px);
box-shadow: var(--wwf-hero-panel-shadow);
}
.wwf-milestones__tag {
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-milestone-card {
--card-bg: var(--background-black);
--card-gap: var(--spacing-none, 0);
--card-padding: var(--spacing-none, 0);
--card-radius: var(--radius-lg, 16px);
--card-title: var(--text-oncolor-primary);
--card-width-max: none;
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-inline-size: 0;
block-size: var(--spacing-120, 480px);
overflow: hidden;
isolation: isolate;
}
.wwf-milestone-card--active {
flex-grow: var(--wwf-milestone-active-grow);
}
.wwf-milestone-card--active .wwf-milestone-card__title {
max-inline-size: var(--spacing-56, 224px);
}
.wwf-milestone-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--wwf-milestone-card-overlay);
pointer-events: none;
}
.wwf-milestone-card__media {
position: absolute;
inset: 0;
z-index: 0;
aspect-ratio: auto;
border-radius: inherit;
}
.wwf-milestone-card__media img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
.wwf-milestone-card__media--consultation img {
object-position: 58% center;
}
.wwf-milestone-card__media--forum img {
object-position: 36% center;
}
.wwf-milestone-card__content {
position: relative;
z-index: 2;
justify-content: flex-end;
gap: var(--spacing-xl, 16px);
min-block-size: 100%;
padding: var(--spacing-3xl, 24px);
}
.wwf-milestone-card__text {
flex: 0 0 auto;
gap: var(--spacing-xl, 16px);
}
.wwf-milestone-card__date {
align-self: flex-start;
border-radius: var(--radius-md, 8px);
}
.wwf-milestone-card__title {
font-size: var(--typo-display-clamp-sm-FS);
line-height: var(--typo-display-clamp-sm-LH);
color: var(--text-oncolor-primary);
}
.wwf-milestone-card__status {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-md, 8px);
color: var(--wwf-milestone-complete-color);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-milestone-card__status .nds-icon {
flex: 0 0 auto;
font-size: var(--typo-text-lg-FS);
}
.wwf-milestone-card__status--upcoming {
color: var(--colors-secondary-gold-500);
}
.wwf-milestone-card__actions {
flex: 0 0 auto;
margin-block-start: 0;
}
.wwf-milestone-card__actions .nds-btn {
--btn-padding: var(--spacing-lg, 12px);
--btn-gap: var(--spacing-sm, 6px);
--btn-icon-size: var(--spacing-2xl, 20px);
--btn-bg: var(--colors-neutral-800);
--btn-bg-hover: var(--colors-neutral-700);
--btn-bg-active: var(--colors-neutral-900);
--btn-bg-selected: var(--colors-neutral-900);
--btn-border: transparent;
--btn-border-hover: transparent;
--btn-border-active: transparent;
--btn-border-selected: transparent;
--btn-color: var(--text-oncolor-primary);
}
.wwf-milestone-card__active-only {
display: none;
}
.wwf-milestone-card--active .wwf-milestone-card__inactive-only {
display: none;
}
.wwf-milestone-card--active .wwf-milestone-card__active-only {
display: inline-flex;
}
.wwf-milestone-card__actions .wwf-milestone-card__register-action,
.wwf-milestone-card__actions .wwf-dialogue-card__primary {
--btn-bg: var(--wwf-action-bg);
--btn-bg-hover: var(--wwf-action-bg-hover);
--btn-bg-active: var(--wwf-action-bg-active);
--btn-bg-selected: var(--wwf-action-bg-active);
}
@media (max-width: 960px) {
.wwf-milestones__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wwf-milestone-card--active {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.wwf-milestones__grid {
grid-template-columns: minmax(0, 1fr);
}
.wwf-milestone-card {
block-size: var(--wwf-milestone-card-height-mobile);
}
.wwf-milestone-card--active {
grid-column: auto;
}
.wwf-milestone-card__content {
padding: var(--spacing-xl, 16px);
}
}
/* ---- CORE PROCESSES ---- */
.wwf-processes {
--section-bg: var(--background-neutral-25);
}
.wwf-processes__tag {
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-processes__grid {
align-items: stretch;
}
.wwf-process-card {
--card-padding: var(--spacing-3xl, 24px);
--card-gap: var(--spacing-xl, 16px);
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--featuredicons-icon-default);
text-align: start;
}
.wwf-process-card .nds-card-content {
flex: 1;
}
.wwf-process-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-process-card__action {
--btn-size: var(--spacing-4xl, 32px);
--btn-padding: var(--spacing-none, 0);
--btn-gap: var(--spacing-sm, 6px);
}
/* ---- GLOBAL WATER DIALOGUE ---- */
.wwf-dialogue .nds-section-body {
background: var(--wwf-dialogue-bg);
border-radius: var(--radius-lg, 16px);
}
.wwf-dialogue-card {
--card-bg: var(--wwf-dialogue-card-bg);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
--card-padding: var(--spacing-6xl, 48px);
--card-gap: 0;
position: relative;
isolation: isolate;
display: flex;
flex-direction: row;
align-items: center;
inline-size: 100%;
max-inline-size: none;
min-block-size: var(--wwf-dialogue-card-height);
overflow: hidden;
}
.wwf-dialogue-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url("media/global-dialogue-waves.webp") center / cover no-repeat;
filter: grayscale(1);
opacity: var(--wwf-dialogue-texture-opacity);
pointer-events: none;
}
.wwf-dialogue-card__landmarks {
position: absolute;
inset-block-end: 0;
display: block;
max-inline-size: none;
pointer-events: none;
user-select: none;
}
.wwf-dialogue-card__landmarks {
inset-inline-end: 0;
z-index: 2;
inline-size: 58.4%;
scale: -1 1;
html[dir="rtl"] & {
scale: 1;
}
}
.wwf-dialogue-card__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2xl, 20px);
inline-size: min(100%, 579px);
padding-block-end: var(--spacing-3xl, 24px);
}
.wwf-dialogue-card__eyebrow {
display: flex;
align-items: center;
gap: var(--spacing-md, 8px);
margin: 0;
color: var(--text-oncolor-primary);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 700;
}
.wwf-dialogue-card__eyebrow i {
flex: 0 0 auto;
font-size: var(--spacing-2xl, 20px);
}
.wwf-dialogue-card__title {
margin: 0;
color: var(--text-oncolor-primary);
font-size: var(--typo-display-md-FS);
line-height: var(--typo-display-md-LH);
letter-spacing: 0;
}
.wwf-dialogue-card__description {
max-inline-size: none;
margin: 0;
color: var(--text-oncolor-secondary);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
}
.wwf-dialogue-card__actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-2xl, 20px);
margin-block-start: 0;
}
.wwf-dialogue-card__actions .nds-btn {
--btn-gap: var(--spacing-sm, 6px);
--btn-icon-size: var(--spacing-2xl, 20px);
}
.wwf-dialogue-card__primary {
--btn-bg: var(--wwf-action-bg);
--btn-bg-hover: var(--wwf-action-bg-hover);
--btn-bg-active: var(--wwf-action-bg-active);
--btn-bg-selected: var(--wwf-action-bg-active);
--btn-border: transparent;
--btn-border-hover: transparent;
--btn-border-active: transparent;
--btn-border-selected: transparent;
--btn-color: var(--text-oncolor-primary);
}
.wwf-dialogue-card__secondary {
--btn-color: var(--text-oncolor-primary);
--btn-color-hover: var(--text-oncolor-primary);
--btn-color-active: var(--text-oncolor-primary);
--btn-border: transparent;
--btn-border-hover: transparent;
--btn-border-active: transparent;
}
@media (max-width: 960px) {
.wwf-dialogue-card {
align-items: flex-start;
min-block-size: 640px;
--card-padding: var(--spacing-4xl, 32px);
}
.wwf-dialogue-card__content {
inline-size: min(100%, 620px);
padding-block-end: 0;
}
.wwf-dialogue-card__landmarks {
inline-size: 85%;
}
}
@media (max-width: 600px) {
.wwf-dialogue-card {
min-block-size: 680px;
--card-padding: var(--spacing-3xl, 24px);
}
.wwf-dialogue-card__title {
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
}
.wwf-dialogue-card__description {
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-dialogue-card__actions {
flex-direction: column;
align-items: stretch;
inline-size: 100%;
}
.wwf-dialogue-card__actions .nds-btn {
justify-content: center;
}
.wwf-dialogue-card__landmarks {
inset-inline-end: -30%;
inline-size: 135%;
}
.wwf-dialogue-card__linework {
inline-size: 160%;
}
}
/* ---- NEWS ---- */
.wwf-news {
--section-bg: var(--background-default);
}
.wwf-news__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: var(--spacing-3xl, 24px);
}
.wwf-news__heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 16px);
}
.wwf-news__heading .nds-section-description {
max-inline-size: none;
}
.wwf-news__view-all {
--btn-size: var(--spacing-4xl, 32px);
--btn-border: var(--border-neutral-primary);
--btn-color: var(--text-default);
--btn-bg: var(--background-default);
}
.wwf-news__grid {
align-items: stretch;
}
.wwf-news-card {
--card-width-max: none;
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-xl, 16px);
max-inline-size: none;
text-align: start;
}
.wwf-news-card__media {
position: relative;
flex: 0 0 auto;
inline-size: 100%;
block-size: auto;
aspect-ratio: 29 / 20;
overflow: hidden;
border-radius: var(--radius-md, 8px);
}
.wwf-news-card__media img {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.wwf-news-card .nds-card-content {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-xl, 16px);
}
.wwf-news-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-news-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md, 8px);
}
.wwf-news-card__meta .nds-tag {
--tag-border: transparent;
}
.wwf-news-card__tag--program {
--tag-bg: var(--background-tertiary-50);
--tag-text: var(--text-tertiary);
--tag-border: transparent;
}
.wwf-news-card__date {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm, 6px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
white-space: nowrap;
}
.wwf-news-card__date .nds-icon {
flex: 0 0 auto;
font-size: var(--typo-text-lg-FS);
}
.wwf-news-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-news-card__action {
--btn-size: var(--spacing-4xl, 32px);
--btn-padding: var(--spacing-none, 0);
--btn-gap: var(--spacing-sm, 6px);
}
@media (max-width: 600px) {
.wwf-news__head {
grid-template-columns: minmax(0, 1fr);
}
.wwf-news__view-all {
justify-self: start;
}
}
/* ---- ORGANIZERS ---- */
.wwf-organizers {
--section-bg: var(--background-neutral-25);
}
.wwf-organizers__grid {
align-items: stretch;
}
.wwf-organizer-card {
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
--card-gap: var(--spacing-xl, 16px);
text-align: start;
}
.wwf-organizer-card__logo {
display: block;
inline-size: auto;
max-inline-size: 100%;
object-fit: contain;
object-position: left center;
}
.wwf-organizer-card__logo--mewa {
block-size: 56px;
}
.wwf-organizer-card__logo--wwc {
block-size: var(--spacing-7xl, 64px);
}
.wwf-organizers-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/banner-organizers.webp"); */
}
.wwf-organizers-hero .nds-section-description {
max-inline-size: 100%;
}
.wwf-organizers-page__institutions {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-organizers-page__institutions .nds-section-title {
max-inline-size: 1000px;
}
.wwf-organizer-card--detail {
--card-padding: var(--spacing-2xl, 20px);
--card-width-max: none;
block-size: 100%;
}
.wwf-organizer-card--detail .nds-card-content {
flex: 1;
}
.wwf-organizer-card--detail .nds-card-text {
gap: var(--spacing-md, 8px);
}
.wwf-organizer-card--detail .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-organizer-card--detail .wwf-organizer-card__logo--mewa {
block-size: var(--spacing-7xl, 64px);
}
.wwf-organizer-card__tag {
--tag-border: transparent;
align-self: flex-start;
}
.wwf-organizer-card__tag--wwc {
--tag-bg: var(--background-tertiary-50);
--tag-text: var(--text-tertiary);
}
.wwf-organizer-card--detail .nds-card-actions {
margin-block-start: auto;
}
.wwf-organizer-card__action {
--btn-size: var(--spacing-3xl, 24px);
--btn-padding: var(--spacing-none, 0);
--btn-gap: var(--spacing-md, 8px);
--btn-FS: var(--typo-text-sm-FS);
--btn-color: var(--text-primary);
}
.wwf-organizers-partnership {
--section-bg: var(--background-neutral-50);
--section-padding-block: var(--spacing-7xl, 64px);
--section-border-radius: var(--radius-lg, 16px);
}
.wwf-organizers-partnership .nds-section-description {
max-inline-size: 100%;
}
.wwf-organizers-partnership__logos {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--spacing-3xl, 24px);
}
.wwf-organizers-partnership__logo-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
display: flex;
justify-content: flex-start;
min-block-size: 112px;
}
.wwf-organizers-partnership__plus {
color: var(--text-secondary-paragraph);
font-size: var(--typo-display-md-FS);
line-height: var(--typo-display-md-LH);
font-weight: 500;
}
@media (max-width: 600px) {
.wwf-organizers-page__institutions,
.wwf-organizers-partnership {
--section-padding-block: var(--spacing-5xl, 40px);
}
.wwf-organizers-partnership__logos {
grid-template-columns: minmax(0, 1fr);
}
.wwf-organizers-partnership__plus {
justify-self: center;
}
}
/* ===== Organizers logos – card headers (Organizers page + homepage + About) ===== */
/* The logo SVGs share a 660x161 canvas; contain each within a fixed-height
header, left-aligned and vertically centred. (An earlier revision used
per-logo negative-margin crops for older artwork that had baked-in
whitespace; the current SVGs are tight, so plain containment is correct
and works regardless of which logo media is selected.) */
.wwf-organizer-card--detail > .nds-card-header,
.wwf-organizers .wwf-organizer-card > .nds-card-header,
.wwf-about-organizers .wwf-organizer-card > .nds-card-header {
display: flex;
align-items: center;
justify-content: flex-start;
block-size: 80px;
padding: 0;
margin: 0;
overflow: hidden;
}
.wwf-organizer-card--detail .wwf-organizer-card__logo,
.wwf-organizers .wwf-organizer-card .wwf-organizer-card__logo,
.wwf-about-organizers .wwf-organizer-card .wwf-organizer-card__logo {
display: block;
inline-size: auto;
block-size: auto;
max-inline-size: 100%;
max-block-size: 56px;
object-fit: contain;
object-position: left center;
margin: 0;
}
/* Partnership section */
.wwf-organizers-partnership__logo-card {
display: flex;
align-items: center;
justify-content: center;
block-size: 180px;
padding: 24px;
box-sizing: border-box;
overflow: hidden;
}
.wwf-organizers-partnership__logo-card .wwf-organizer-card__logo {
display: block;
inline-size: auto;
block-size: auto;
max-inline-size: min(100%, 320px);
max-block-size: 132px;
margin: 0;
}
/* ---- STAY CONNECTED ---- */
.wwf-stay-connected {
--section-bg: var(--wwf-dialogue-bg);
--section-padding-block: var(--spacing-7xl, 64px);
position: relative;
isolation: isolate;
min-block-size: 260px;
overflow: hidden;
}
.wwf-stay-connected::before,
.wwf-stay-connected::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.wwf-stay-connected::before {
z-index: 0;
background: var(--wwf-dialogue-card-bg);
}
.wwf-stay-connected::after {
z-index: 1;
background: url("media/global-dialogue-waves.webp") center / cover no-repeat;
filter: grayscale(1);
opacity: var(--wwf-dialogue-texture-opacity);
}
.wwf-stay-connected__linework {
position: absolute;
inset-inline-start: 0;
inset-block-end: 0;
z-index: 2;
display: block;
inline-size: 100%;
max-inline-size: none;
pointer-events: none;
user-select: none;
scale: 1 -1;
html[dir="rtl"] & {
scale: -1 -1;
}
}
.wwf-stay-connected__wrapper {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, 620px) minmax(0, 438px);
align-items: center;
justify-content: space-between;
gap: var(--spacing-7xl, 64px);
}
.wwf-stay-connected__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 16px);
}
.wwf-stay-connected :is(.nds-section-title, .nds-section-description) {
margin: 0;
color: var(--text-oncolor-primary);
}
.wwf-stay-connected .nds-section-title {
letter-spacing: 0;
}
.wwf-stay-connected .nds-section-description {
max-inline-size: 620px;
color: var(--text-oncolor-secondary);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-stay-connected--social {
--section-padding-block-start: var(--spacing-7xl, 64px);
--section-padding-block-end: var(--spacing-9xl, 96px);
--section-title-FS: var(--typo-display-sm-FS);
--section-title-LH: var(--typo-display-sm-LH);
--section-title-MB: var(--spacing-none, 0px);
--section-description-FS: var(--typo-text-md-FS);
--section-description-LH: var(--typo-text-md-LH);
}
.wwf-stay-connected--social .wwf-stay-connected__wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* The supplied design specifies a 10px text-to-social gap. */
gap: 10px;
text-align: center;
}
.wwf-stay-connected--social .wwf-stay-connected__content {
align-items: center;
gap: var(--spacing-xl, 16px);
inline-size: 100%;
}
.wwf-stay-connected--social .nds-section-title {
font-weight: 700;
}
.wwf-stay-connected--social .nds-section-description {
max-inline-size: calc(var(--nds-content-MaxWidth) - (var(--spacing-10xl, 128px) * 2));
font-size: var(--_section-description-FS);
line-height: var(--_section-description-LH);
}
.wwf-stay-connected__socials {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-lg, 12px);
}
.wwf-stay-connected__social-link {
--btn-size: var(--spacing-4xl, 32px);
--btn-height: var(--spacing-4xl, 32px);
--btn-height-min: var(--spacing-4xl, 32px);
--btn-icon-size: var(--spacing-2xl, 20px);
--btn-radius: var(--radius-md, 8px);
--btn-bg: transparent;
--btn-bg-hover: var(--wwf-hero-panel-bg);
--btn-bg-active: var(--wwf-hero-panel-border);
--btn-border: var(--wwf-hero-panel-border);
--btn-border-hover: var(--text-oncolor-primary);
--btn-border-active: var(--text-oncolor-primary);
--btn-color: var(--text-oncolor-primary);
--btn-color-hover: var(--text-oncolor-primary);
--btn-color-active: var(--text-oncolor-primary);
}
@media (max-width: 960px) {
.wwf-stay-connected__wrapper {
grid-template-columns: minmax(0, 620px);
justify-content: start;
gap: var(--spacing-4xl, 32px);
}
}
@media (max-width: 600px) {
.wwf-stay-connected:not(.wwf-stay-connected--social) {
--section-padding-block-start: var(--spacing-6xl, 48px);
--section-padding-block-end: var(--spacing-20, 80px);
}
.wwf-stay-connected__linework {
inline-size: 180%;
}
}
/* ======= POLITICAL PROCESS PAGE AND SHARED PROCESS COMPONENTS ======= */
.wwf-political-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-political.webp"); */
}
.wwf-political-hero .nds-section-description {
max-inline-size: var(--spacing-180);
}
.wwf-political-groups {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-political-groups__grid {
--gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-political-group-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-3xl, 24px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
block-size: 100%;
}
.wwf-political-group-card .nds-card-content {
flex: 1;
}
.wwf-political-group-card .nds-card-text {
gap: var(--spacing-md, 8px);
}
.wwf-political-group-card__icon {
--icon-bg-color: var(--background-success-50);
--icon-color: var(--featuredicons-icon-success);
}
.wwf-political-group-card__output {
border-block-start: 1px solid var(--border-neutral-primary);
margin-block: auto 0;
padding-block-start: var(--spacing-xl, 16px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-political-group-card .nds-card-tags {
margin-block-start: auto;
}
.wwf-political-group-card__tag--success {
--tag-bg: var(--background-success-50);
--tag-border: var(--border-success-light);
--tag-text: var(--colors-green-800);
}
.wwf-political-group-card__tag--warning {
--tag-bg: var(--background-warning-50);
--tag-border: var(--border-warning-light);
--tag-text: var(--text-warning);
}
.wwf-process-commission {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-process-commission__card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
}
.wwf-process-commission__person {
display: flex;
align-items: center;
gap: var(--spacing-2xl, 20px);
padding-block: var(--spacing-2xl, 20px);
}
.wwf-process-commission__person+.wwf-process-commission__person {
border-block-start: 1px solid var(--border-neutral-primary);
}
.wwf-process-commission__logo {
flex: none;
inline-size: var(--spacing-7xl, 64px);
block-size: var(--spacing-7xl, 64px);
display: grid;
place-items: center;
}
.wwf-process-commission__logo--wwc {
/* The supplied WWC logo is horizontal; crop to its emblem as in the reference. */
overflow: hidden;
}
.wwf-process-commission__logo--wwc img {
block-size: var(--spacing-7xl, 64px);
inline-size: var(--spacing-7xl, 64px);
object-fit: cover;
object-position: left center;
-webkit-mask-image: linear-gradient(to right, black calc(var(--spacing-7xl, 64px) - var(--spacing-lg, 12px)), transparent calc(var(--spacing-7xl, 64px) - var(--spacing-md, 8px)));
mask-image: linear-gradient(to right, black calc(var(--spacing-7xl, 64px) - var(--spacing-lg, 12px)), transparent calc(var(--spacing-7xl, 64px) - var(--spacing-md, 8px)));
}
.wwf-process-commission__logo--mewa {
border: 2px solid var(--colors-secondary-gold-500);
border-radius: var(--radius-full);
background: var(--colors-green-800);
}
.wwf-process-commission__logo--mewa img {
inline-size: 75%;
block-size: 75%;
filter: brightness(0) saturate(100%) invert(78%) sepia(43%) saturate(566%) hue-rotate(356deg) brightness(101%) contrast(93%);
}
.wwf-process-commission__person h3 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 600;
}
.wwf-process-commission__person p {
margin-block: var(--spacing-xs, 4px) 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-process-documents {
--section-padding-block: 0;
padding-block-end: var(--spacing-7xl, 64px);
}
.wwf-process-documents__card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3xl, 24px);
}
.wwf-process-documents__heading {
display: flex;
align-items: center;
gap: var(--spacing-3xl, 24px);
}
.wwf-process-documents__heading h2 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-process-documents__icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--text-default);
flex: none;
}
.wwf-process-documents__button {
--btn-radius: var(--radius-sm, 4px);
block-size: auto;
min-block-size: var(--spacing-5xl, 40px);
white-space: normal;
text-align: start;
}
.wwf-process-documents__button .nds-label {
white-space: normal;
overflow-wrap: anywhere;
}
@media (max-width: 600px) {
.wwf-process-documents__card {
align-items: stretch;
flex-direction: column;
}
}
/* ======= REGIONAL PROCESS PAGE ======= */
.wwf-regional-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-regional.webp"); */
}
.wwf-regional-hero .nds-section-description {
max-inline-size: var(--spacing-180);
}
.wwf-regional-groups {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-regional-groups__grid {
--gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-regional-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-2xl, 20px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
block-size: 100%;
}
.wwf-regional-card .nds-card-content {
flex: 1;
}
.wwf-regional-card .nds-card-text {
flex: 0 1 auto;
gap: var(--spacing-md, 8px);
}
.wwf-regional-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-regional-card__icon {
--icon-bg-color: var(--background-success-50);
--icon-color: var(--featuredicons-icon-success);
}
.wwf-regional-card__coordinators {
/* The reference uses the DGA card's 1px divider width. */
border-block-start: 1px solid var(--border-neutral-primary);
margin: 0;
padding-block-start: var(--spacing-xl, 16px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-regional-card__tags {
margin-block-start: auto;
flex-wrap: wrap;
}
.wwf-regional-tag {
--tag-fs: var(--typo-text-xs-FS);
}
.wwf-regional-tag--report {
--tag-bg: var(--colors-secondary-gold-50);
--tag-border: var(--colors-secondary-gold-300);
--tag-text: var(--colors-secondary-gold-700);
}
.wwf-regional-tag--roadmap {
--tag-bg: var(--background-success-50);
--tag-border: var(--border-success-light);
--tag-text: var(--colors-green-800);
}
.wwf-regional-tag--commitments {
--tag-bg: var(--background-warning-50);
--tag-border: var(--border-warning-light);
--tag-text: var(--text-warning);
}
.wwf-regional-documents__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--spacing-3xl, 24px);
}
@media (max-width: 960px) {
.wwf-regional-page .wwf-process-documents__card {
align-items: stretch;
flex-direction: column;
}
.wwf-regional-documents__actions {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.wwf-regional-documents__actions {
align-items: stretch;
flex-direction: column;
}
}
/* ======= THEMATIC PROCESS PAGE ======= */
.wwf-thematic-process-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-thematic.webp"); */
}
.wwf-thematic-process-hero .nds-section-description {
max-inline-size: var(--spacing-180);
}
.wwf-thematic-process-groups {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-thematic-process-groups__grid {
--gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-thematic-process-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-2xl, 20px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
block-size: 100%;
}
.wwf-thematic-process-card .nds-card-text {
gap: var(--spacing-md, 8px);
}
.wwf-thematic-process-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-thematic-process-card__icon {
--icon-bg-color: var(--background-success-50);
--icon-color: var(--featuredicons-icon-success);
}
.wwf-thematic-coordinators {
--section-bg: var(--background-neutral-50);
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-thematic-coordinators__scroll {
max-inline-size: 100%;
}
.wwf-thematic-coordinators__table {
inline-size: 100%;
table-layout: fixed;
border: 0;
border-radius: 0;
border-collapse: collapse;
border-spacing: 0;
overflow: visible;
background: transparent;
}
.wwf-thematic-coordinators__table col {
inline-size: 25%;
}
.wwf-thematic-coordinators__table thead th {
padding-block: var(--spacing-lg, 12px);
padding-inline: var(--spacing-xl, 16px);
border: 1px solid var(--border-neutral-primary);
background: var(--background-neutral-100);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 500;
text-align: start;
white-space: normal;
}
.wwf-thematic-coordinators__table tbody :is(th, td) {
padding-block: var(--spacing-lg, 12px);
padding-inline: var(--spacing-xl, 16px);
border: 0;
border-block-end: 1px solid var(--border-neutral-primary);
background: transparent;
color: var(--text-default);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 400;
text-align: start;
vertical-align: middle;
white-space: normal;
overflow-wrap: anywhere;
}
.wwf-thematic-coordinators__table .wwf-thematic-coordinators__theme :is(th, td) {
background: var(--background-neutral-100);
color: var(--text-primary-paragraph);
font-weight: 600;
}
.wwf-thematic-coordinators__theme :is(th, td) span {
display: block;
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-thematic-process-documents__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--spacing-3xl, 24px);
}
@media (max-width: 1100px) {
.wwf-thematic-process-page .wwf-process-documents__card {
align-items: stretch;
flex-direction: column;
}
.wwf-thematic-process-documents__actions {
justify-content: flex-start;
}
}
@media (max-width: 800px) {
.wwf-thematic-coordinators__table {
min-inline-size: var(--spacing-192, 768px);
}
}
@media (max-width: 600px) {
.wwf-thematic-process-documents__actions {
align-items: stretch;
flex-direction: column;
}
}
/* ======= FORUM PROCESSES PAGE ======= */
.wwf-forum-process-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-process.webp"); */
}
.wwf-forum-process-hero .nds-section-description {
max-inline-size: var(--spacing-256, 1024px);
}
.wwf-forum-process-overview,
.wwf-forum-process-framework,
.wwf-forum-process-governance,
.wwf-forum-program-governance,
.wwf-forum-process-hub {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-forum-process-kicker {
--tag-bg: var(--background-neutral-100);
--tag-border: transparent;
block-size: auto;
min-inline-size: 0;
padding-block: var(--spacing-xs, 4px);
border-radius: var(--radius-full);
line-height: var(--typo-text-md-LH);
white-space: normal;
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-forum-process-kicker .nds-label {
white-space: normal;
}
.wwf-forum-process-framework .nds-section-description,
.wwf-forum-process-governance .nds-section-description,
.wwf-forum-program-governance .nds-section-description {
max-inline-size: none;
}
.wwf-forum-process-overview__layout,
.wwf-forum-process-framework__layout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: stretch;
gap: var(--spacing-3xl, 24px);
}
.wwf-forum-process-overview__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
}
.wwf-forum-process-card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-gap: var(--spacing-3xl, 24px);
--card-border: var(--colors-neutral-300);
--card-radius: var(--radius-lg, 16px);
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--featuredicons-icon-default);
min-inline-size: 0;
}
.wwf-forum-process-card--featured {
grid-column: 1 / -1;
}
.wwf-forum-process-card .nds-card-content {
flex: 1;
}
.wwf-forum-process-card .nds-card-title {
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
}
.wwf-forum-process-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-process-card__action {
--btn-size: var(--spacing-4xl, 32px);
--btn-padding: var(--spacing-none, 0);
--btn-gap: var(--spacing-sm, 6px);
}
.wwf-forum-process-card__action .hgi {
transform: none;
}
.wwf-forum-process-diagram-card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-border: var(--colors-neutral-300);
--card-radius: var(--radius-lg, 16px);
display: grid;
place-items: center;
min-inline-size: 0;
}
.wwf-forum-process-overview .wwf-forum-process-diagram-card {
--card-padding: var(--spacing-md, 8px);
}
.wwf-forum-process-diagram {
display: block;
inline-size: min(100%, var(--spacing-120, 480px));
block-size: auto;
direction: ltr;
}
.wwf-forum-process-diagram__ring {
fill: none;
stroke: var(--wwf-forum-process-ring);
stroke-width: 2px;
stroke-dasharray: 7 8;
}
.wwf-forum-process-overview .wwf-forum-process-diagram__ring {
stroke: var(--wwf-forum-process-overview-ring);
}
.wwf-forum-process-diagram__dots {
fill: var(--wwf-forum-process-ring);
}
.wwf-forum-process-overview .wwf-forum-process-diagram__dots {
fill: var(--wwf-forum-process-overview-ring);
}
.wwf-forum-process-diagram__badge {
fill: var(--background-default);
stroke: var(--wwf-forum-process-ring);
stroke-width: 1px;
}
.wwf-forum-process-overview .wwf-forum-process-diagram__badge {
stroke: var(--wwf-forum-process-overview-ring);
}
html[data-a11y*="font-step"] .wwf-forum-process-overview .wwf-forum-process-diagram__badge {
x: 116px;
width: 248px;
}
.wwf-forum-process-diagram text {
fill: var(--text-default);
font-family: inherit;
font-size: var(--typo-text-sm-FS);
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
.wwf-forum-process-diagram .wwf-forum-process-diagram__badge-text {
fill: var(--colors-blue-900);
font-size: var(--typo-text-xs-FS);
}
.wwf-forum-process-overview .wwf-forum-process-diagram__badge-text {
fill: var(--wwf-forum-process-overview-badge-text);
}
.wwf-forum-process-overview .wwf-forum-process-diagram__node:not(.wwf-forum-process-diagram__node--program) text {
fill: var(--wwf-forum-process-overview-label);
font-size: var(--typo-text-xs-FS);
}
.wwf-forum-process-diagram__node {
cursor: pointer;
outline: none;
}
.wwf-forum-process-diagram__shape {
stroke: transparent;
stroke-width: 4px;
vector-effect: non-scaling-stroke;
}
.wwf-forum-process-diagram__node:is(:hover, :focus-visible) .wwf-forum-process-diagram__shape {
stroke: var(--wwf-forum-process-shape-hover-border);
}
.wwf-forum-process-diagram__shape--framework-political {
fill: var(--wwf-forum-process-political-fill);
}
.wwf-forum-process-overview .wwf-forum-process-diagram__shape--political {
fill: var(--wwf-forum-process-overview-political-fill);
}
.wwf-forum-process-diagram__shape--thematic {
fill: var(--wwf-forum-process-thematic-fill);
fill-opacity: .3;
}
.wwf-forum-process-diagram__shape--regional {
fill: var(--wwf-forum-process-regional-fill);
fill-opacity: .3;
}
.wwf-forum-process-diagram__shape--program {
fill: var(--wwf-forum-process-program-fill);
}
.wwf-forum-process-overview .wwf-forum-process-diagram__shape--program {
fill: var(--wwf-forum-process-overview-program-fill);
}
.wwf-forum-process-diagram__shape--framework-thematic {
fill: var(--wwf-forum-process-framework-thematic-fill);
}
.wwf-forum-process-diagram__shape--framework-regional {
fill: var(--wwf-forum-process-framework-regional-fill);
}
.wwf-forum-process-diagram__shape--outcome {
fill: var(--wwf-forum-process-outcome-fill);
}
.wwf-forum-process-diagram__node--program text {
fill: var(--colors-blue-900);
font-size: var(--typo-text-xs-FS);
}
html:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-forum-process-overview .wwf-forum-process-diagram__node[data-process="youth"] text {
transform: translateX(var(--spacing-lg, 12px));
}
html:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-forum-process-overview .wwf-forum-process-diagram__node[data-process="intersectoral"] text {
transform: translateX(calc(-1 * var(--spacing-lg, 12px)));
}
.wwf-forum-process-diagram__program-icon {
fill: none;
stroke: var(--background-default);
stroke-width: 3px;
stroke-linecap: round;
stroke-linejoin: round;
}
.wwf-forum-process-diagram__program-icon--people {
stroke-width: 2px;
}
.wwf-forum-process-interactive:has(.wwf-forum-process-diagram__node[data-process="political"]:is(:hover, :focus-visible)) [data-process-card="political"],
.wwf-forum-process-interactive:has(.wwf-forum-process-diagram__node[data-process="thematic"]:is(:hover, :focus-visible)) [data-process-card="thematic"],
.wwf-forum-process-interactive:has(.wwf-forum-process-diagram__node[data-process="regional"]:is(:hover, :focus-visible)) [data-process-card="regional"],
.wwf-forum-process-interactive:has(.wwf-forum-process-diagram__node[data-process="youth"]:is(:hover, :focus-visible)) [data-process-card="youth"],
.wwf-forum-process-interactive:has(.wwf-forum-process-diagram__node[data-process="intersectoral"]:is(:hover, :focus-visible)) [data-process-card="intersectoral"] {
--card-border: var(--wwf-forum-process-card-hover-border);
/* The DGA card's 1px border and 3px inset shadow make a stable 4px highlight. */
box-shadow: inset 0 0 0 calc(var(--spacing-xs, 4px) - 1px) var(--wwf-forum-process-card-hover-border);
}
.wwf-forum-process-framework__cards {
display: grid;
gap: var(--spacing-xl, 16px);
}
.wwf-forum-process-framework-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-border: var(--colors-neutral-300);
--card-radius: var(--radius-lg, 16px);
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--featuredicons-icon-default);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-3xl, 24px);
min-inline-size: 0;
}
.wwf-forum-process-framework-card .nds-featured-icon {
flex: none;
}
.wwf-forum-process-framework-card h3 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
}
.wwf-forum-process-framework-card p {
margin-block: var(--spacing-xs, 4px) 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-process-diagram__connections {
fill: none;
stroke-width: 2px;
stroke-dasharray: 7 6;
}
.wwf-forum-process-diagram__connections--outcome {
stroke: var(--wwf-forum-process-framework-outcome-link);
}
.wwf-forum-process-gradient-stop--thematic {
stop-color: var(--wwf-forum-process-thematic-fill);
}
.wwf-forum-process-gradient-stop--regional {
stop-color: var(--wwf-forum-process-regional-fill);
}
.wwf-forum-process-gradient-stop--political {
stop-color: var(--wwf-forum-process-framework-political-halo);
}
.wwf-forum-process-gradient-stop--blue {
stop-color: var(--wwf-forum-process-framework-gradient-blue);
}
.wwf-forum-process-gradient-stop--green {
stop-color: var(--wwf-forum-process-framework-gradient-green);
}
.wwf-forum-process-gradient-stop--orange {
stop-color: var(--wwf-forum-process-framework-gradient-orange);
}
.wwf-forum-process-diagram--framework .wwf-forum-process-diagram__halo {
fill-opacity: .2;
}
.wwf-forum-process-diagram__halo--thematic {
fill: var(--wwf-forum-process-thematic-fill);
}
.wwf-forum-process-diagram__halo--regional {
fill: var(--wwf-forum-process-regional-fill);
}
.wwf-forum-process-diagram__halo--political {
fill: var(--wwf-forum-process-framework-political-halo);
}
.wwf-forum-process-diagram--framework .wwf-forum-process-diagram__halo--outcome {
fill: var(--wwf-forum-process-framework-outcome-halo);
fill-opacity: .3;
}
.wwf-forum-process-diagram--framework text {
fill: var(--wwf-forum-process-framework-label);
font-size: var(--typo-text-sm-FS);
}
.wwf-forum-process-diagram--framework .wwf-forum-process-diagram__node:is([data-process="thematic"], [data-process="regional"], [data-process="political"]) text {
font-size: var(--typo-text-xs-FS);
}
.wwf-forum-process-diagram--framework .wwf-forum-process-diagram__badge {
stroke: var(--wwf-forum-process-overview-ring);
}
.wwf-forum-process-diagram--framework .wwf-forum-process-diagram__badge-text {
fill: var(--wwf-forum-process-overview-badge-text);
font-size: var(--typo-text-xs-FS);
}
html[data-a11y*="font-step"] .wwf-forum-process-diagram--framework .wwf-forum-process-diagram__badge {
x: 116px;
width: 248px;
}
.wwf-forum-process-governance {
--section-bg: var(--background-neutral-25);
}
.wwf-forum-process-governance__grid,
.wwf-forum-program-governance__grid {
--gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-forum-process-governance-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-border: var(--colors-neutral-300);
--card-radius: var(--radius-lg, 16px);
min-inline-size: 0;
block-size: 100%;
}
.wwf-forum-process-governance-card h3 {
margin: 0;
padding-block-end: var(--spacing-xl, 16px);
border-block-end: 1px solid var(--border-neutral-primary);
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
}
.wwf-forum-process-governance-card__logos {
display: flex;
align-items: center;
gap: var(--spacing-xl, 16px);
min-inline-size: 0;
padding-block: var(--spacing-xl, 16px);
border-block-end: 1px solid var(--border-neutral-primary);
}
.wwf-forum-process-governance-card__logos img {
display: block;
min-inline-size: 0;
block-size: auto;
object-fit: contain;
}
.wwf-forum-process-governance-card__logo--mewa {
inline-size: 62%;
max-inline-size: var(--spacing-56, 224px);
}
/* .wwf-forum-process-governance-card__logo--wwc {
inline-size: 28%;
max-inline-size: var(--spacing-24, 96px);
} */
.wwf-forum-process-governance-card p {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-process-governance-card p strong {
margin-inline-end: var(--spacing-md, 8px);
color: var(--text-default);
}
.wwf-forum-process-governance-card--soon p {
display: grid;
flex: 1;
place-items: center;
color: var(--wwf-forum-process-launching-soon);
}
.wwf-forum-process-hub {
--section-bg: var(--background-neutral-25);
}
.wwf-forum-process-hub__card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-border: var(--colors-neutral-300);
--card-radius: var(--radius-lg, 16px);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-3xl, 24px);
}
.wwf-forum-process-hub__card .nds-featured-icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--text-default);
flex: none;
}
.wwf-forum-process-hub__copy {
flex: 1;
min-inline-size: 0;
}
.wwf-forum-process-hub__copy h2 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
}
.wwf-forum-process-hub__copy p {
margin-block: var(--spacing-md, 8px) 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-process-hub__button {
--btn-radius: var(--radius-sm, 4px);
flex: none;
white-space: normal;
}
@media (max-width: 1024px) {
.wwf-forum-process-overview__layout,
.wwf-forum-process-framework__layout {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 600px) {
.wwf-forum-process-overview__cards {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: auto;
}
.wwf-forum-process-card--featured {
grid-column: auto;
}
.wwf-forum-process-hub__card {
align-items: flex-start;
flex-wrap: wrap;
}
.wwf-forum-process-hub__button {
margin-inline-start: auto;
}
}
/* ======= YOUTH PROGRAM PAGE ======= */
.wwf-youth-hero {
--background-sub-hero: var(--background-neutral-25);
}
.wwf-youth-hero .nds-section-description {
max-inline-size: var(--spacing-240, 960px);
}
.wwf-youth-intro {
--section-padding-block-start: 0;
--section-padding-block-end: var(--spacing-7xl, 64px);
}
.wwf-youth-intro__image {
inline-size: 100%;
aspect-ratio: 160 / 49;
border-radius: var(--radius-lg, 16px);
object-fit: cover;
object-position: center;
}
.wwf-youth-intro__about {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
align-items: center;
gap: var(--spacing-7xl, 64px);
margin-block-start: var(--spacing-3xl, 24px);
}
.wwf-youth-intro__copy h2 {
margin: 0 0 var(--spacing-xl, 16px);
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-youth-intro__copy p {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-youth-intro__copy p+p {
margin-block-start: var(--spacing-md, 8px);
}
.wwf-youth-intro__copy strong {
color: var(--text-default);
font-weight: 700;
}
.wwf-youth-stat {
position: relative;
display: grid;
place-items: center;
min-block-size: var(--spacing-40, 160px);
padding: var(--spacing-3xl, 24px);
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-lg, 16px);
background: var(--background-default);
box-shadow: var(--wwf-youth-program-stat-shadow);
text-align: center;
/* The clipped circle is the decorative corner treatment shown in the supplied design. */
overflow: hidden;
}
.wwf-youth-stat::after {
content: "";
position: absolute;
inset-block-start: calc(-1 * var(--spacing-3xl, 24px));
inset-inline-end: calc(-1 * var(--spacing-3xl, 24px));
inline-size: var(--spacing-24, 96px);
aspect-ratio: 1;
border-radius: var(--radius-full);
background: var(--wwf-youth-program-stat-color);
}
.wwf-youth-stat strong,
.wwf-youth-stat span {
position: relative;
z-index: 1;
}
.wwf-youth-stat strong {
color: var(--colors-blue-400);
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
font-weight: 700;
}
.wwf-youth-stat span {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 600;
}
.wwf-youth-objectives,
.wwf-youth-components,
.wwf-youth-governance {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-youth-objectives {
--section-padding-block-start: 0;
}
.wwf-youth-components {
--section-bg: var(--background-neutral-25);
}
.wwf-youth-objectives .nds-section-title,
.wwf-youth-components .nds-section-title {
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-youth-card-grid {
display: grid;
gap: var(--spacing-2xl, 20px);
align-items: stretch;
}
.wwf-youth-card-grid--objectives {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.wwf-youth-card--quarter {
grid-column: span 3;
}
.wwf-youth-card--third {
grid-column: span 4;
}
.wwf-youth-card-grid--components {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wwf-youth-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-gap: var(--spacing-2xl, 20px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
min-inline-size: 0;
block-size: 100%;
}
.wwf-youth-card__icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--featuredicons-icon-default);
}
.wwf-youth-card .nds-card-content {
flex: 1;
}
.wwf-youth-card .nds-card-text {
gap: var(--spacing-md, 8px);
}
.wwf-youth-card .nds-card-title {
color: var(--text-default);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 700;
}
.wwf-youth-card .nds-card-description {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-youth-governance__head p {
margin: 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-youth-governance__head h2 {
margin-block: var(--spacing-md, 8px) 0;
color: var(--wwf-youth-program-title-color);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-youth-coordinators {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-border: var(--wwf-youth-program-coordinators-border);
--card-radius: var(--radius-lg, 16px);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-xl, 16px);
box-shadow: var(--wwf-youth-program-coordinators-shadow);
}
.wwf-youth-coordinators__tag {
--tag-bg: var(--background-warning-50);
--tag-border: var(--border-warning-light);
--tag-text: var(--wwf-action-bg);
--tag-icon: var(--wwf-action-bg);
flex: none;
block-size: auto;
min-inline-size: 0;
padding-block: var(--spacing-sm, 6px);
border-radius: var(--radius-full);
font-weight: 700;
text-transform: uppercase;
}
.wwf-youth-coordinators__tag .nds-label {
white-space: normal;
}
.wwf-youth-coordinators p {
margin: 0;
color: var(--wwf-youth-program-coordinators-color);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 600;
}
.wwf-youth-organizations__title {
margin-block: var(--spacing-3xl, 24px) var(--spacing-xl, 16px);
color: var(--wwf-youth-program-title-color);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
}
.wwf-youth-organizations {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: var(--spacing-lg, 12px);
align-items: stretch;
}
.wwf-youth-organization {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xl, 16px);
min-inline-size: 0;
padding-block: var(--spacing-3xl, 24px);
padding-inline: var(--spacing-lg, 12px);
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-lg, 16px);
background: var(--background-default);
text-align: center;
}
.wwf-youth-organization img {
inline-size: 100%;
max-inline-size: var(--spacing-28, 112px);
block-size: var(--spacing-18, 72px);
object-fit: contain;
}
.wwf-youth-organization h4 {
margin: 0;
color: var(--colors-blue-900);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 600;
overflow-wrap: anywhere;
}
@media (max-width: 1200px) {
.wwf-youth-organizations {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.wwf-youth-intro__about {
grid-template-columns: minmax(0, 1fr);
gap: var(--spacing-3xl, 24px);
}
.wwf-youth-stat {
inline-size: min(100%, 300px);
}
.wwf-youth-card-grid--objectives,
.wwf-youth-card-grid--components {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wwf-youth-card--quarter,
.wwf-youth-card--third {
grid-column: auto;
}
.wwf-youth-organizations {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.wwf-youth-intro__image {
aspect-ratio: 4 / 3;
}
.wwf-youth-card-grid--objectives,
.wwf-youth-card-grid--components {
grid-template-columns: minmax(0, 1fr);
}
.wwf-youth-coordinators {
align-items: flex-start;
flex-direction: column;
}
.wwf-youth-organizations {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
html[data-a11y~="font-step-3"] .wwf-youth-organizations {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 600px) {
html[data-a11y~="font-step-3"] .wwf-youth-organizations {
grid-template-columns: minmax(0, 1fr);
}
}
/* ======= INTERSECTORAL PROGRAM PAGE ======= */
.wwf-intersectoral-hero {
--background-sub-hero: var(--background-neutral-25);
}
.wwf-intersectoral-hero .nds-section-description {
max-inline-size: var(--spacing-240, 960px);
}
.wwf-intersectoral-intro {
--section-padding-block-start: 0;
--section-padding-block-end: var(--spacing-7xl, 64px);
--section-row-gap: 0;
}
.wwf-intersectoral-intro__image {
inline-size: 100%;
aspect-ratio: 16 / 5;
border-radius: var(--radius-lg, 16px);
object-fit: cover;
object-position: center;
}
.wwf-intersectoral-intro__copy {
margin-block-start: var(--spacing-3xl, 24px);
}
.wwf-intersectoral-intro__copy h2,
.wwf-intersectoral-objectives .nds-section-title {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-intersectoral-intro__copy p {
margin: var(--spacing-xl, 16px) 0 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-intersectoral-acwa {
--section-padding-block: var(--spacing-7xl, 64px);
position: relative;
color: var(--text-oncolor-primary);
background:
linear-gradient(var(--wwf-dialogue-card-bg), var(--wwf-dialogue-card-bg)),
var(--wwf-intersectoral-acwa-base-bg);
/* The supplied design contains decorative waves that are intentionally clipped to this band. */
overflow: clip;
}
.wwf-intersectoral-acwa::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: var(--wwf-dialogue-texture-opacity);
background-image: url("media/global-dialogue-waves.webp");
background-position: center;
background-size: cover;
}
.wwf-intersectoral-acwa .nds-section-wrapper {
position: relative;
z-index: 1;
}
.wwf-intersectoral-acwa__layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
align-items: center;
gap: var(--spacing-8xl, 80px);
}
.wwf-intersectoral-kicker {
margin: 0;
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 400;
}
.wwf-intersectoral-acwa__copy h2 {
margin: var(--spacing-md, 8px) 0 var(--spacing-3xl, 24px);
color: inherit;
font-size: var(--typo-display-md-FS);
line-height: var(--typo-display-md-LH);
font-weight: 700;
}
.wwf-intersectoral-acwa__copy>p:not(.wwf-intersectoral-kicker) {
margin: 0;
color: var(--colors-alpha-alpha-white-80);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
}
.wwf-intersectoral-acwa__action {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-xl, 16px);
margin-block-start: var(--spacing-3xl, 24px);
}
.wwf-intersectoral-acwa__button {
--btn-bg: var(--wwf-action-bg);
--btn-bg-hover: var(--wwf-action-bg-hover);
--btn-bg-active: var(--wwf-action-bg-active);
--btn-bg-selected: var(--wwf-action-bg-active);
--btn-border: var(--wwf-action-bg);
--btn-border-hover: var(--wwf-action-bg-hover);
--btn-border-active: var(--wwf-action-bg-active);
--btn-color: var(--text-oncolor-primary);
}
.wwf-intersectoral-acwa__action small {
color: var(--wwf-intersectoral-note-color);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-xs-LH);
}
.wwf-intersectoral-metrics {
position: relative;
justify-self: center;
inline-size: min(100%, 570px);
aspect-ratio: 57 / 46;
isolation: isolate;
}
.wwf-intersectoral-metric {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
min-inline-size: 0;
block-size: 71px;
padding: var(--spacing-lg, 12px) 18px;
border-block-start: 1px solid var(--wwf-intersectoral-metric-border);
border-radius: var(--radius-lg, 16px);
background: var(--wwf-intersectoral-metric-bg);
box-shadow: var(--wwf-intersectoral-metric-shadow);
backdrop-filter: blur(24px);
}
.wwf-intersectoral-metric strong {
font-size: calc(22px * var(--user-font-scale, 1));
line-height: calc(24px * var(--user-font-scale, 1));
font-weight: 700;
}
.wwf-intersectoral-metric span {
color: var(--wwf-intersectoral-metric-label);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-xs-LH);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Diagram placement is taken from the supplied reference; cards remain in document order for assistive technology. */
.wwf-intersectoral-metric--renewables {
inset-block-start: var(--spacing-2xl, 20px);
inset-inline-start: 65px;
inline-size: 148px;
}
.wwf-intersectoral-metric--capacity {
inset-block-start: var(--spacing-2xl, 20px);
inset-inline-end: 10px;
inline-size: 204px;
}
.wwf-intersectoral-metric--water {
inset-block-start: 126px;
inset-inline-start: 48px;
inline-size: 232px;
}
.wwf-intersectoral-metric--assets {
inset-block-start: 280px;
inset-inline-end: 4px;
inline-size: 148px;
}
.wwf-intersectoral-metric--countries {
inset-block-start: 350px;
inset-inline-start: 95px;
inline-size: 148px;
}
.wwf-intersectoral-metrics__brand {
position: absolute;
z-index: 1;
inset-block-start: 50%;
inset-inline-start: 50%;
display: grid;
place-items: center;
inline-size: 232px;
aspect-ratio: 1;
border: 1px solid var(--wwf-intersectoral-logo-border);
border-radius: var(--radius-full);
background: var(--background-default);
box-shadow: var(--wwf-intersectoral-logo-shadow);
transform: translate(-50%, -50%);
}
:is(html[dir="rtl"], .rtl) .wwf-intersectoral-metrics__brand {
transform: translate(50%, -50%);
}
.wwf-intersectoral-metrics__brand::before,
.wwf-intersectoral-metrics__brand::after {
content: "";
position: absolute;
z-index: -1;
inset-block-start: 50%;
inset-inline-start: 50%;
aspect-ratio: 1;
border-radius: var(--radius-full);
transform: translate(-50%, -50%);
pointer-events: none;
}
:is(html[dir="rtl"], .rtl) .wwf-intersectoral-metrics__brand::before,
:is(html[dir="rtl"], .rtl) .wwf-intersectoral-metrics__brand::after {
transform: translate(50%, -50%);
}
.wwf-intersectoral-metrics__brand::before {
inline-size: 274px;
border: 1px solid var(--wwf-intersectoral-logo-ring);
}
.wwf-intersectoral-metrics__brand::after {
inline-size: 430px;
border: 1px dashed var(--wwf-intersectoral-logo-orbit);
}
.wwf-intersectoral-metrics__brand img {
display: block;
inline-size: min(50%, var(--spacing-24, 96px));
block-size: auto;
}
.wwf-intersectoral-acwa__reason {
margin-block-start: var(--spacing-7xl, 64px);
padding: var(--spacing-3xl, 24px) var(--spacing-4xl, 32px);
border-block-start: 1px solid var(--wwf-intersectoral-reason-border);
border-radius: var(--radius-lg, 16px);
background: var(--wwf-intersectoral-reason-bg);
backdrop-filter: blur(24px);
}
.wwf-intersectoral-acwa__reason h3 {
margin: 0 0 var(--spacing-md, 8px);
color: inherit;
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 700;
}
.wwf-intersectoral-acwa__reason p {
margin: 0;
color: var(--wwf-intersectoral-content-color);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-intersectoral-objectives,
.wwf-intersectoral-clusters,
.wwf-intersectoral-governance {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-intersectoral-objectives__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-2xl, 20px);
}
.wwf-intersectoral-objective {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
min-inline-size: 0;
block-size: 100%;
}
.wwf-intersectoral-objective .nds-featured-icon,
.wwf-intersectoral-cluster .nds-featured-icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--featuredicons-icon-default);
}
.wwf-intersectoral-cluster .nds-featured-icon {
--nds-icon-size: var(--spacing-5xl, 40px);
border-radius: var(--wwf-intersectoral-cluster-icon-radius);
}
.wwf-intersectoral-objective .nds-card-title {
color: var(--text-default);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 700;
}
.wwf-intersectoral-objective .nds-card-description {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-intersectoral-clusters {
--section-bg: var(--background-neutral-25);
}
.wwf-intersectoral-clusters__head {
gap: var(--spacing-md, 8px);
}
.wwf-intersectoral-clusters__head .nds-section-title,
.wwf-intersectoral-governance__head h2 {
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-intersectoral-clusters__head .nds-section-description {
max-inline-size: none;
}
.wwf-intersectoral-clusters__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--spacing-2xl, 20px);
align-items: stretch;
}
.wwf-intersectoral-cluster {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
grid-column: span 3;
display: flex;
flex-direction: column;
min-inline-size: 0;
block-size: 100%;
}
.wwf-intersectoral-cluster--wide {
grid-column: span 4;
}
.wwf-intersectoral-cluster h3 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 700;
}
.wwf-intersectoral-cluster__partners {
padding: var(--spacing-xl, 16px);
border-block-start: 1px solid var(--border-neutral-primary);
border-radius: var(--wwf-intersectoral-cluster-partners-radius);
background: var(--wwf-intersectoral-cluster-partners-bg);
}
.wwf-intersectoral-cluster__partners p {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-intersectoral-cluster__partners p+p {
margin-block-start: var(--spacing-xs, 4px);
}
.wwf-intersectoral-cluster__partners strong {
color: var(--text-default);
font-size: var(--typo-text-xs-FS);
}
.wwf-intersectoral-cluster ul {
display: grid;
gap: var(--spacing-md, 8px);
margin: 0;
padding: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--wwf-intersectoral-cluster-list-line-height);
list-style: none;
}
.wwf-intersectoral-cluster li {
display: grid;
grid-template-columns: var(--wwf-intersectoral-cluster-bullet-size) minmax(0, 1fr);
align-items: start;
gap: var(--spacing-lg, 12px);
padding-block: 0;
}
.wwf-intersectoral-cluster li::before {
content: "";
inline-size: var(--wwf-intersectoral-cluster-bullet-size);
block-size: var(--wwf-intersectoral-cluster-bullet-size);
margin-block-start: calc((var(--wwf-intersectoral-cluster-list-line-height) - var(--wwf-intersectoral-cluster-bullet-size)) / 2);
border-radius: var(--radius-full);
background: var(--background-neutral-100);
}
.wwf-intersectoral-governance {
position: relative;
color: var(--text-oncolor-primary);
background-color: var(--wwf-dialogue-card-bg);
overflow: clip;
}
.wwf-intersectoral-governance::after {
content: "";
position: absolute;
inset-inline-end: calc(-1 * var(--spacing-80, 320px));
inset-block-end: calc(-1 * var(--spacing-80, 320px));
inline-size: var(--spacing-96, 384px);
aspect-ratio: 1;
border-block-start: 1px solid var(--wwf-intersectoral-governance-shape-border);
border-radius: var(--radius-full);
box-shadow: var(--wwf-intersectoral-governance-shape-shadow);
pointer-events: none;
}
.wwf-intersectoral-governance .nds-section-wrapper {
position: relative;
z-index: 1;
}
.wwf-intersectoral-governance__head h2 {
margin-block-start: var(--spacing-md, 8px);
color: inherit;
font-size: var(--typo-display-md-FS);
line-height: var(--typo-display-md-LH);
}
.wwf-intersectoral-governance__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-4xl, 32px);
margin-block-start: var(--wwf-intersectoral-governance-grid-offset);
}
.wwf-intersectoral-governance__grid article {
display: flex;
flex-direction: column;
gap: 0;
min-inline-size: 0;
padding: var(--spacing-4xl, 32px);
border: 1px solid var(--wwf-intersectoral-governance-card-border);
border-radius: var(--radius-lg, 16px);
background: var(--wwf-intersectoral-governance-card-bg);
backdrop-filter: var(--wwf-intersectoral-governance-card-blur);
}
.wwf-intersectoral-governance__grid p,
.wwf-intersectoral-governance__grid h3,
.wwf-intersectoral-governance__grid span {
margin: 0;
}
.wwf-intersectoral-governance__grid p {
color: var(--wwf-intersectoral-governance-label);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-intersectoral-governance__grid h3 {
margin-block-start: var(--spacing-md, 8px);
color: inherit;
font-size: var(--typo-text-lg-FS);
line-height: var(--wwf-intersectoral-governance-title-line-height);
font-weight: 700;
}
.wwf-intersectoral-governance__grid span {
margin-block-start: var(--spacing-xl, 16px);
color: var(--colors-alpha-alpha-white-80);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
@media (max-width: 1100px) {
.wwf-intersectoral-acwa__layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--spacing-5xl, 40px);
}
.wwf-intersectoral-metrics {
inline-size: min(100%, 570px);
margin-inline: auto;
}
.wwf-intersectoral-cluster,
.wwf-intersectoral-cluster--wide {
grid-column: span 6;
}
}
@media (max-width: 960px) {
.wwf-intersectoral-objectives__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wwf-intersectoral-governance__grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 600px) {
.wwf-intersectoral-intro__image {
aspect-ratio: 4 / 3;
}
.wwf-intersectoral-acwa__copy h2 br {
display: none;
}
.wwf-intersectoral-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"brand brand"
"renew capacity"
"water water"
"countries assets";
aspect-ratio: auto;
gap: var(--spacing-xl, 16px);
}
.wwf-intersectoral-metric {
position: relative;
inset: auto;
inline-size: 100%;
block-size: auto;
min-block-size: 71px;
justify-self: stretch;
}
.wwf-intersectoral-metric--renewables {
grid-area: renew;
}
.wwf-intersectoral-metric--capacity {
grid-area: capacity;
}
.wwf-intersectoral-metric--water {
grid-area: water;
}
.wwf-intersectoral-metric--assets {
grid-area: assets;
}
.wwf-intersectoral-metric--countries {
grid-area: countries;
}
.wwf-intersectoral-metrics__brand,
:is(html[dir="rtl"], .rtl) .wwf-intersectoral-metrics__brand {
position: relative;
inset: auto;
grid-area: brand;
justify-self: center;
margin-block: 49px;
transform: none;
}
.wwf-intersectoral-metrics__brand::after {
inline-size: 330px;
}
.wwf-intersectoral-objectives__grid {
grid-template-columns: minmax(0, 1fr);
}
.wwf-intersectoral-cluster,
.wwf-intersectoral-cluster--wide {
grid-column: 1 / -1;
}
.wwf-intersectoral-governance__grid article {
padding: var(--spacing-3xl, 24px);
}
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-objectives__grid,
html[data-a11y~="font-step-3"] .wwf-intersectoral-governance__grid {
grid-template-columns: minmax(0, 1fr);
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"brand brand"
"renew capacity"
"water water"
"countries assets";
aspect-ratio: auto;
gap: var(--spacing-xl, 16px);
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metric {
position: relative;
inset: auto;
inline-size: 100%;
block-size: auto;
min-block-size: 71px;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metric--renewables {
grid-area: renew;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metric--capacity {
grid-area: capacity;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metric--water {
grid-area: water;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metric--assets {
grid-area: assets;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metric--countries {
grid-area: countries;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metrics__brand,
:is(html[dir="rtl"], .rtl)[data-a11y~="font-step-3"] .wwf-intersectoral-metrics__brand {
position: relative;
inset: auto;
grid-area: brand;
justify-self: center;
margin-block: 99px;
transform: none;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-cluster,
html[data-a11y~="font-step-3"] .wwf-intersectoral-cluster--wide {
grid-column: span 6;
}
@media (max-width: 600px) {
html[data-a11y~="font-step-3"] .wwf-intersectoral-metrics__brand,
:is(html[dir="rtl"], .rtl)[data-a11y~="font-step-3"] .wwf-intersectoral-metrics__brand {
margin-block: 49px;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-metrics__brand::after {
inline-size: 330px;
}
html[data-a11y~="font-step-3"] .wwf-intersectoral-cluster,
html[data-a11y~="font-step-3"] .wwf-intersectoral-cluster--wide {
grid-column: 1 / -1;
}
}
/* ======= PARTICIPATION OPPORTUNITIES PAGE ======= */
.wwf-participation-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/participation.webp"); */
}
.wwf-participation-hero::after {
background-position: right center;
background-size: 70%;
}
:is(html[dir="rtl"], .rtl) .wwf-participation-hero::after {
background-position: left center;
}
.wwf-participation-opportunities {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-participation-page main {
background: var(--background-default);
}
.wwf-participation-grid {
--gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-participation-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-3xl, 24px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
inline-size: 100%;
block-size: 100%;
}
/* Anchor the action to the bottom so equal-height cards align their buttons. */
.wwf-participation-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-participation-card__icon {
--icon-bg-color: var(--featuredicons-background-success-light);
--icon-color: var(--featuredicons-icon-success);
}
.wwf-participation-card .nds-card-text {
gap: var(--spacing-md, 8px);
}
.wwf-participation-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-participation-card__notice {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-lg, 12px);
padding-block-start: var(--spacing-3xl, 24px);
border-block-start: 1px solid var(--divider-color);
color: var(--text-primary-paragraph);
}
.wwf-participation-card__notice i {
font-size: var(--spacing-3xl, 24px);
line-height: 1;
color: var(--icon-default);
}
.wwf-participation-card__notice p {
margin: 0;
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-participation-card__action {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-participation-card__action .hgi-arrow-left-02 {
transform: rotate(180deg);
}
:is(html[dir="rtl"], .rtl) .wwf-participation-card__action .hgi-arrow-left-02 {
transform: none;
}
/* ======= RESOURCES PAGE ======= */
.wwf-resources-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-resources.webp"); */
}
.wwf-resources-hero::after {
background-position: right 70%;
background-size: 75%;
}
:is(html[dir="rtl"], .rtl) .wwf-resources-hero::after {
background-position: left 70%;
}
.wwf-resources-hero .nds-section-description {
max-inline-size: 720px;
}
.wwf-resources-list {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-resources-grid {
--gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-resource-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-3xl, 24px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
block-size: 100%;
}
.wwf-resource-card .nds-card-content {
flex: 1;
}
.wwf-resource-card__icon {
--icon-bg-color: var(--background-primary-50);
--icon-color: var(--featuredicons-icon-success);
}
.wwf-resource-card__tag {
--tag-bg: var(--background-neutral-50);
--tag-border: var(--border-neutral-secondary);
--tag-text: var(--text-primary-paragraph);
}
.wwf-resource-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-resource-card__download {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-resources-contact {
min-block-size: var(--spacing-56, 224px);
}
.wwf-resources-contact__action {
display: flex;
justify-content: flex-end;
inline-size: 100%;
}
.wwf-resources-contact__button {
--btn-radius: var(--radius-md, 8px);
}
@media (max-width: 960px) {
.wwf-resources-contact__action {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.wwf-resources-list {
--section-padding-block: var(--spacing-5xl, 40px);
}
}
/* ======= MEDIA CENTER PAGE ======= */
.wwf-media-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-media.webp"); */
}
.wwf-media-hero .nds-section-description {
max-inline-size: 720px;
}
.wwf-media-assets,
.wwf-media-gallery,
.wwf-media-guidelines {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-media-assets__grid,
.wwf-media-gallery__grid {
align-items: stretch;
}
.wwf-media-resource-card {
--card-gap: var(--spacing-xl, 16px);
}
.wwf-media-tag--success {
--tag-bg: var(--background-success-50);
--tag-border: var(--border-success-light);
--tag-text: var(--colors-green-800);
}
.wwf-media-tag--neutral {
--tag-bg: var(--background-neutral-50);
--tag-border: var(--border-neutral-secondary);
--tag-text: var(--colors-neutral-800);
}
.wwf-media-gallery {
--section-bg: var(--background-neutral-50);
border-radius: var(--radius-lg, 16px);
}
.wwf-media-gallery-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
block-size: 100%;
max-inline-size: none;
text-align: start;
}
.wwf-media-gallery-card__media {
position: relative;
flex: 0 0 auto;
inline-size: 100%;
block-size: auto;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius-md, 8px);
}
.wwf-media-gallery-card__media img {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.wwf-media-gallery-card .nds-card-content {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-xl, 16px);
}
.wwf-media-gallery-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-media-gallery-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-media-gallery-card__action {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-media-guidelines__card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
max-inline-size: none;
}
.wwf-media-guidelines__title {
margin: 0;
padding-block-end: var(--spacing-xl, 16px);
color: var(--text-default);
border-block-end: 1px solid var(--border-neutral-secondary);
font-size: var(--typo-text-md-FS);
font-weight: var(--font-weight-semibold, 600);
line-height: var(--typo-text-md-LH);
}
.wwf-media-guidelines__list {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 12px);
margin: 0;
padding-inline-start: var(--spacing-3xl, 24px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
@media (max-width: 600px) {
.wwf-media-assets,
.wwf-media-gallery,
.wwf-media-guidelines {
--section-padding-block: var(--spacing-5xl, 40px);
}
}
/* ======= FIRST STAKEHOLDER GALLERY PAGE ======= */
.wwf-gallery-detail-hero {
--background-sub-hero: var(--background-neutral-25);
}
.wwf-gallery-detail-hero .nds-section-description {
max-inline-size: none;
}
.wwf-gallery-detail {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-gallery-detail__grid {
--gap: var(--spacing-3xl, 24px);
align-items: start;
}
.wwf-gallery-photo-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
max-inline-size: none;
}
.wwf-gallery-photo-card__media {
position: relative;
flex: 0 0 auto;
inline-size: 100%;
block-size: auto;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius-md, 8px);
}
.wwf-gallery-photo-card__media img {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.wwf-gallery-photo-card .nds-card-actions {
justify-content: flex-start;
}
.wwf-gallery-photo-card__action {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-gallery-detail-page .nds-ipv-popup-image {
block-size: 100%;
}
@media (max-width: 600px) {
.wwf-gallery-detail {
--section-padding-block: var(--spacing-5xl, 40px);
}
}
/* ======= DISCOVER RIYADH PAGE ======= */
.wwf-riyadh-hero {
--background-sub-hero: var(--background-neutral-25);
/* --wwf-sub-hero-image: url("media/hero-aboutriyad.webp"); */
}
.wwf-riyadh-hero .nds-section-description {
max-inline-size: 720px;
}
.wwf-riyadh-overview {
--section-padding-block: var(--spacing-5xl, 40px);
}
.wwf-riyadh-overview__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-riyadh-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-md, 8px);
min-block-size: 400px;
max-inline-size: none;
text-align: start;
}
.wwf-riyadh-card--modern,
.wwf-riyadh-card--vision {
grid-column: span 2;
}
.wwf-riyadh-card__media {
position: relative;
flex: 0 0 auto;
inline-size: 100%;
block-size: 238px;
overflow: hidden;
border-radius: var(--radius-sm, 4px);
}
.wwf-riyadh-card__media img,
.wwf-riyadh-collage img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.wwf-riyadh-card--culture .wwf-riyadh-card__media img {
object-position: center top;
}
.wwf-riyadh-card--modern .wwf-riyadh-card__media img {
object-position: center 35%;
}
.wwf-riyadh-card .nds-card-content {
flex: 1;
}
.wwf-riyadh-card .nds-card-description,
.wwf-riyadh-value-card .nds-card-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-riyadh-collage {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xl, 16px);
flex: 0 0 auto;
inline-size: 100%;
block-size: 238px;
}
.wwf-riyadh-collage__lead,
.wwf-riyadh-collage__tiles img {
border-radius: var(--radius-sm, 4px);
}
.wwf-riyadh-collage__tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xl, 16px);
min-inline-size: 0;
min-block-size: 0;
}
.wwf-riyadh-vision {
--section-bg: var(--background-neutral-25);
--section-padding-block: var(--spacing-5xl, 40px);
position: relative;
overflow: hidden;
}
.wwf-riyadh-vision__mark {
position: absolute;
z-index: 0;
inset-block-start: 10px;
inset-inline-end: 0;
inline-size: 440px;
max-inline-size: none;
pointer-events: none;
}
.wwf-riyadh-vision__wrapper {
position: relative;
z-index: 1;
}
.wwf-riyadh-vision__head {
align-items: flex-start;
}
.wwf-riyadh-vision__head .nds-section-description {
max-inline-size: 760px;
}
.wwf-riyadh-vision__tag {
--tag-bg: var(--background-neutral-100);
--tag-border: transparent;
--tag-text: var(--text-default);
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-riyadh-values {
position: relative;
align-items: stretch;
}
.wwf-riyadh-value-card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--featuredicons-icon-default);
block-size: 100%;
max-inline-size: none;
text-align: start;
}
.wwf-riyadh-value-card .nds-card-content {
flex: 1;
}
@media (max-width: 960px) {
.wwf-riyadh-overview__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wwf-riyadh-card--modern {
grid-column: span 1;
}
.wwf-riyadh-card--vision {
grid-column: span 2;
}
.wwf-riyadh-vision__mark {
inset-inline-end: -180px;
opacity: 0.42;
}
}
@media (max-width: 600px) {
.wwf-riyadh-overview__grid {
grid-template-columns: minmax(0, 1fr);
}
.wwf-riyadh-card--vision {
grid-column: span 1;
}
.wwf-riyadh-card {
min-block-size: 0;
}
.wwf-riyadh-card__media,
.wwf-riyadh-collage {
block-size: auto;
}
.wwf-riyadh-card__media,
.wwf-riyadh-collage__lead {
aspect-ratio: 3 / 2;
}
.wwf-riyadh-collage {
grid-template-columns: minmax(0, 1fr);
}
.wwf-riyadh-collage__lead,
.wwf-riyadh-collage__tiles img {
block-size: auto;
}
.wwf-riyadh-collage__tiles img {
aspect-ratio: 4 / 3;
}
.wwf-riyadh-vision__mark {
inset-block-start: var(--spacing-7xl, 64px);
inset-inline-end: -220px;
inline-size: 440px;
opacity: 0.28;
}
}
/* ======= COMMUNICATION TOOLKIT PAGE ======= */
.wwf-toolkit-hero {
--background-sub-hero: var(--background-neutral-25);
}
.wwf-toolkit-hero .nds-section-description {
max-inline-size: 720px;
}
.wwf-toolkit-list {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-toolkit-body {
display: flex;
flex-direction: column;
gap: var(--spacing-4xl, 32px);
}
.wwf-toolkit-tag--success {
--tag-bg: var(--background-success-50);
--tag-border: var(--border-success-light);
--tag-text: var(--colors-green-800);
}
.wwf-toolkit-tag--info {
--tag-bg: var(--background-info-50);
--tag-border: var(--border-info-light);
--tag-text: var(--colors-blue-800);
}
.wwf-toolkit-tag--neutral {
--tag-bg: var(--background-neutral-50);
--tag-border: var(--border-neutral-secondary);
--tag-text: var(--colors-neutral-800);
}
.wwf-toolkit-alert {
--card-bg: var(--background-neutral-25);
--card-border: var(--border-neutral-primary);
--alert-stripe: var(--border-neutral-secondary);
--alert-icon-bg: var(--background-neutral-50);
--icon-color: var(--text-default);
--card-radius: var(--radius-md, 8px);
}
.wwf-toolkit-alert::after {
opacity: 1;
}
.wwf-toolkit-alert .nds-feedback-icon {
box-sizing: border-box;
inline-size: var(--spacing-10, 40px);
block-size: var(--spacing-10, 40px);
flex: 0 0 var(--spacing-10, 40px);
padding: var(--spacing-3, 12px);
background-color: var(--background-neutral-50);
}
.wwf-toolkit-alert .nds-feedback-icon .hgi {
color: var(--icon-color);
inline-size: 18px;
block-size: 18px;
font-size: 18px;
line-height: 18px;
}
@media (max-width: 600px) {
.wwf-toolkit-list {
--section-padding-block: var(--spacing-5xl, 40px);
}
}
/* ======= KNOWLEDGE HUB PAGE ======= */
.wwf-knowledge-hero,
.wwf-concept-hero {
--background-sub-hero: var(--background-neutral-25);
}
/* .wwf-knowledge-hero {
--wwf-sub-hero-image: url("media/hero-knowledga.webp");
} */
.wwf-knowledge-hero .nds-section-description,
.wwf-concept-hero .nds-section-description {
max-inline-size: none;
}
.wwf-concept-hero .nds-section-title {
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
}
.wwf-knowledge-section {
--section-padding-block: var(--spacing-7xl, 64px);
}
.wwf-knowledge-section__title {
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
}
.wwf-knowledge-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 16px);
}
.wwf-knowledge-row {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--spacing-3xl, 24px);
align-items: center;
max-inline-size: none;
text-align: start;
}
.wwf-knowledge-row__icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--text-default);
}
.wwf-knowledge-row__icon>.hgi {
inline-size: var(--spacing-6, 24px);
block-size: var(--spacing-6, 24px);
font-size: var(--spacing-6, 24px);
line-height: var(--spacing-6, 24px);
}
.wwf-concept-row__icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--text-default);
}
.wwf-concept-row__icon>.hgi {
inline-size: var(--spacing-6, 24px);
block-size: var(--spacing-6, 24px);
font-size: var(--spacing-6, 24px);
line-height: var(--spacing-6, 24px);
}
.wwf-knowledge-row__content {
display: flex;
min-inline-size: 0;
flex-direction: column;
gap: var(--spacing-xs, 4px);
}
.wwf-knowledge-row__heading {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm, 8px) var(--spacing-xl, 16px);
align-items: center;
}
.wwf-knowledge-row__heading h3,
.wwf-knowledge-row__content p {
margin: 0;
}
.wwf-knowledge-row__heading h3 {
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
font-weight: var(--font-weight-semibold, 600);
line-height: var(--typo-text-xl-LH);
}
.wwf-knowledge-row__content p {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-knowledge-row__action,
.wwf-knowledge-research-row__action {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-knowledge-reports {
--section-bg: var(--background-neutral-50);
background-color: var(--background-neutral-50);
border-radius: var(--radius-lg, 16px);
}
.wwf-knowledge-report-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
align-items: stretch;
}
.wwf-knowledge-report-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-xl, 16px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
block-size: 100%;
max-inline-size: none;
color: var(--text-display);
text-align: start;
}
.wwf-knowledge-report-card__icon {
--icon-bg-color: var(--background-success-50);
--icon-color: var(--colors-green-700);
}
.wwf-knowledge-report-card .nds-card-content {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-xl, 16px);
}
.wwf-knowledge-report-card .nds-card-title {
color: var(--text-display);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
}
.wwf-knowledge-report-card .nds-card-description {
color: var(--text-display);
}
.wwf-knowledge-report-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-knowledge-tag--info {
--tag-bg: var(--background-info-50);
--tag-border: var(--border-info-light);
--tag-text: var(--colors-blue-800);
}
.wwf-knowledge-tag--success {
--tag-bg: var(--background-success-50);
--tag-border: var(--border-success-light);
--tag-text: var(--colors-green-800);
}
.wwf-concept-tag {
align-self: flex-start;
inline-size: auto;
}
.wwf-knowledge-tag--neutral {
--tag-bg: var(--background-neutral-50);
--tag-border: var(--border-neutral-secondary);
--tag-text: var(--colors-neutral-800);
}
.wwf-knowledge-research .nds-section-head {
gap: var(--spacing-sm, 8px);
}
.wwf-knowledge-research .nds-section-description {
max-inline-size: none;
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-knowledge-research-row__action {
white-space: normal;
}
.wwf-knowledge-case-modal {
--card-width-max: var(--wwf-knowledge-case-modal-max-width);
inline-size: min(var(--wwf-knowledge-case-modal-max-width), calc(100% - var(--spacing-4xl, 32px)));
max-inline-size: var(--wwf-knowledge-case-modal-max-width);
max-block-size: calc(100svh - var(--spacing-4xl, 32px));
/* Keep the header and actions fixed while the white content panel scrolls. */
overflow: hidden;
}
.wwf-knowledge-case-modal__hero {
position: relative;
flex: 0 0 var(--wwf-knowledge-case-modal-header-height);
block-size: var(--wwf-knowledge-case-modal-header-height);
padding: var(--spacing-4xl, 32px) var(--spacing-5xl, 40px);
color: var(--text-oncolor-primary);
}
:root:is([data-a11y~="font-step-1"], [data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-knowledge-case-modal__hero {
overflow-y: auto;
overscroll-behavior: contain;
}
.wwf-knowledge-case-modal__close {
--btn-size: var(--spacing-5xl, 40px);
--btn-height: var(--spacing-5xl, 40px);
--btn-height-min: var(--spacing-5xl, 40px);
position: absolute;
inset-block-start: var(--spacing-4xl, 32px);
inset-inline-end: var(--spacing-5xl, 40px);
flex-basis: var(--spacing-5xl, 40px);
inline-size: var(--spacing-5xl, 40px);
block-size: var(--spacing-5xl, 40px);
min-inline-size: var(--spacing-5xl, 40px);
min-block-size: var(--spacing-5xl, 40px);
}
.wwf-knowledge-case-modal__hero .wwf-knowledge-case-modal__title {
max-inline-size: calc(100% - var(--spacing-7xl, 64px));
color: inherit;
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
}
.wwf-knowledge-case-modal__tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg, 12px);
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-knowledge-case-modal .wwf-knowledge-case-modal__tag {
--tag-bg: var(--background-neutral-25);
--tag-border: var(--border-neutral-primary);
--tag-text: var(--text-default);
--tag-height: var(--spacing-4xl, 32px);
--tag-fs: var(--typo-text-sm-FS);
--tag-padding-inline: var(--spacing-xl, 16px);
margin-block-start: 0;
}
.wwf-knowledge-case-modal__copy {
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-knowledge-case-modal .wwf-home-announcement-modal__content {
flex: 1 1 auto;
min-block-size: 0;
padding: var(--spacing-5xl, 40px) var(--spacing-5xl, 40px) var(--spacing-3xl, 24px);
overflow-y: auto;
overscroll-behavior: contain;
}
.wwf-knowledge-case-modal .wwf-home-announcement-modal__actions {
flex: 0 0 auto;
padding: 0 var(--spacing-5xl, 40px) var(--spacing-5xl, 40px);
}
.wwf-knowledge-case-modal .wwf-home-announcement-modal__cancel {
--btn-height: var(--spacing-5xl, 40px);
--btn-height-min: var(--spacing-5xl, 40px);
}
.wwf-knowledge-case-modal__copy .wwf-knowledge-case-modal__description-text {
margin: 0;
}
@media (max-width: 600px) {
.wwf-knowledge-case-modal__hero {
padding: var(--spacing-3xl, 24px);
}
.wwf-knowledge-case-modal__close {
--btn-size: var(--spacing-5xl, 40px);
--btn-height: var(--spacing-5xl, 40px);
--btn-height-min: var(--spacing-5xl, 40px);
inset-block-start: var(--spacing-3xl, 24px);
inset-inline-end: var(--spacing-3xl, 24px);
flex-basis: var(--spacing-5xl, 40px);
inline-size: var(--spacing-5xl, 40px);
block-size: var(--spacing-5xl, 40px);
min-inline-size: var(--spacing-5xl, 40px);
min-block-size: var(--spacing-5xl, 40px);
}
.wwf-knowledge-case-modal__hero .wwf-knowledge-case-modal__title {
max-inline-size: calc(100% - var(--spacing-16, 64px));
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-knowledge-case-modal__copy {
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-knowledge-case-modal .wwf-knowledge-case-modal__tag {
--tag-height: var(--spacing-4xl, 32px);
--tag-fs: var(--typo-text-sm-FS);
--tag-padding-inline: var(--spacing-xl, 16px);
}
.wwf-knowledge-case-modal .wwf-home-announcement-modal__content {
padding: var(--spacing-3xl, 24px);
}
.wwf-knowledge-case-modal .wwf-home-announcement-modal__actions {
padding: 0 var(--spacing-3xl, 24px) var(--spacing-3xl, 24px);
}
}
/* ======= DRAFT CONCEPT NOTES PAGES ======= */
.wwf-concept-content {
--section-padding-block: var(--spacing-20, 80px);
}
.wwf-concept-body {
display: flex;
flex-direction: column;
gap: var(--spacing-4xl, 32px);
}
.wwf-concept-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 16px);
}
.wwf-concept-row {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-lg, 16px);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--spacing-3xl, 24px);
align-items: center;
max-inline-size: none;
text-align: start;
}
.wwf-concept-row__content {
display: flex;
min-inline-size: 0;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.wwf-concept-row__content h2,
.wwf-concept-row__content h3,
.wwf-concept-row__content p {
margin: 0;
}
.wwf-concept-row__content h2,
.wwf-concept-row__content h3 {
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
font-weight: var(--font-weight-semibold, 600);
line-height: var(--typo-text-xl-LH);
}
.wwf-concept-row__content p {
overflow-wrap: anywhere;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-concept-row__download {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-concept-alert {
--card-bg: var(--background-neutral-25);
--card-border: var(--border-neutral-primary);
--alert-stripe: var(--border-neutral-secondary);
--alert-icon-bg: var(--background-neutral-50);
--icon-color: var(--text-default);
--card-radius: var(--radius-md, 8px);
}
.wwf-concept-alert::after {
opacity: 1;
}
.wwf-concept-alert .nds-feedback-icon {
box-sizing: border-box;
inline-size: var(--spacing-10, 40px);
block-size: var(--spacing-10, 40px);
flex: 0 0 var(--spacing-10, 40px);
padding: var(--spacing-3, 12px);
background-color: var(--background-neutral-50);
}
.wwf-concept-alert .nds-feedback-icon .hgi {
inline-size: 18px;
block-size: 18px;
color: var(--icon-color);
font-size: 18px;
line-height: 18px;
}
.wwf-thematic-content {
--section-padding-block-start: var(--spacing-20, 80px);
}
.wwf-thematic-tabs {
inline-size: 100%;
}
.wwf-thematic-tabs .nds-tab-list-container {
margin-block-end: var(--spacing-lg, 12px);
}
.wwf-thematic-tabs .nds-tab-list {
inline-size: max-content;
min-inline-size: 100%;
}
.wwf-thematic-tabs .nds-tab {
gap: var(--spacing-sm, 8px);
padding-inline: var(--spacing-md, 8px);
font-size: var(--typo-text-sm-FS);
white-space: normal;
}
.wwf-thematic-tabs .nds-tab .nds-label {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-thematic-tabs .nds-tab>.hgi {
inline-size: var(--spacing-xl, 16px);
block-size: var(--spacing-xl, 16px);
flex: 0 0 var(--spacing-xl, 16px);
font-size: var(--typo-text-md-FS);
line-height: var(--spacing-xl, 16px);
}
.wwf-thematic-panel__heading {
display: flex;
gap: var(--spacing-xl, 16px);
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-4xl, 32px);
}
.wwf-thematic-panel__heading h2,
.wwf-thematic-panel__heading span {
margin: 0;
}
.wwf-thematic-panel__heading h2 {
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
font-weight: var(--font-weight-semibold, 600);
line-height: var(--typo-text-xl-LH);
}
.wwf-thematic-panel__heading span {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
@media (max-width: 960px) {
.wwf-knowledge-report-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.wwf-knowledge-section,
.wwf-concept-content,
.wwf-thematic-content {
--section-padding-block: var(--spacing-5xl, 40px);
--section-padding-block-start: var(--spacing-5xl, 40px);
}
.wwf-knowledge-report-grid {
grid-template-columns: minmax(0, 1fr);
}
.wwf-knowledge-row,
.wwf-concept-row {
grid-template-columns: auto minmax(0, 1fr);
gap: var(--spacing-xl, 16px);
}
.wwf-knowledge-row__action,
.wwf-knowledge-research-row__action,
.wwf-concept-row__download {
grid-column: 1 / -1;
inline-size: 100%;
}
.wwf-thematic-panel__heading {
align-items: flex-start;
}
}
/* ======= VISA INFORMATION PAGE ======= */
.wwf-visa-section {
--section-row-gap: 0;
--section-padding-block: var(--spacing-5xl, 40px) var(--spacing-7xl, 64px);
padding-block: var(--spacing-5xl, 40px) var(--spacing-7xl, 64px);
}
.wwf-visa-breadcrumb {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-visa-section .nds-section-body {
display: block;
}
.wwf-visa-panel {
box-sizing: border-box;
inline-size: 100%;
padding: var(--spacing-6xl, 48px) var(--spacing-5xl, 40px);
border-radius: var(--radius-md, 8px);
background: var(--background-neutral-25);
}
.wwf-visa-intro {
margin-block-end: var(--spacing-3xl, 24px);
text-align: center;
}
.wwf-visa-intro .nds-section-title {
margin-block-end: var(--spacing-lg, 12px);
color: var(--text-default);
font-size: var(--typo-display-lg-FS);
line-height: var(--typo-display-lg-LH);
font-weight: 700;
letter-spacing: 0;
justify-content: center;
text-align: center;
}
.wwf-visa-intro .nds-section-description {
max-inline-size: none;
margin: 0;
color: var(--text-primary);
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visa-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-gap: 0;
--card-bg: var(--background-neutral-25);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-md, 8px);
inline-size: 100%;
}
.wwf-visa-card .nds-card-content {
gap: var(--spacing-xl, 16px);
}
.wwf-visa-card .nds-card-title {
margin-block-end: var(--spacing-lg, 12px);
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visa-card .nds-card-description {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-visa-card .nds-card-actions {
margin: 0;
}
.wwf-visa-card__action {
min-inline-size: auto;
}
.wwf-visa-card__action::after {
display: none;
content: none;
}
.wwf-visa-card--general {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-visa-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
}
.wwf-visa-grid .wwf-visa-card {
--card-border: var(--border-neutral-primary);
min-block-size: 100%;
}
.wwf-visa-documents,
.wwf-visa-timeline {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style: none;
}
.wwf-visa-documents {
gap: var(--spacing-lg, 12px);
}
.wwf-visa-documents li {
display: flex;
align-items: center;
gap: var(--spacing-xl, 16px);
min-inline-size: 0;
padding-block-end: 0;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visa-documents__number {
display: inline-grid;
inline-size: calc(var(--spacing-4xl, 32px) + var(--spacing-xs, 4px));
block-size: calc(var(--spacing-4xl, 32px) + var(--spacing-xs, 4px));
min-inline-size: calc(var(--spacing-4xl, 32px) + var(--spacing-xs, 4px));
flex: 0 0 calc(var(--spacing-4xl, 32px) + var(--spacing-xs, 4px));
place-items: center;
border-radius: var(--radius-full, 9999px);
background: var(--text-default);
color: var(--background-default);
font-size: var(--typo-text-sm-FS);
line-height: 1;
font-weight: 700;
}
.wwf-visa-timeline {
--wwf-visa-timeline-marker-size: var(--spacing-xl, 16px);
--wwf-visa-timeline-line-width: var(--spacing-xxs, 2px);
--wwf-visa-timeline-connector-height: calc(var(--spacing-5xl, 40px) + var(--spacing-xs, 4px));
--wwf-visa-timeline-marker-offset: calc((var(--typo-text-md-LH) - var(--wwf-visa-timeline-marker-size)) / 2);
gap: 0;
padding-block-start: var(--spacing-xs, 4px);
}
.wwf-visa-timeline li {
position: relative;
display: grid;
grid-template-columns: var(--wwf-visa-timeline-marker-size) minmax(0, 1fr);
align-items: start;
gap: calc(var(--spacing-md, 8px) + var(--spacing-xxs, 2px));
min-inline-size: 0;
padding-block: 0;
color: var(--wwf-visa-timeline-text);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
letter-spacing: 0;
}
.wwf-visa-timeline li[data-connector="true"] {
min-block-size: calc(var(--wwf-visa-timeline-marker-size) + var(--wwf-visa-timeline-connector-height));
}
.wwf-visa-timeline li[data-connector="true"]::after {
position: absolute;
inset-inline-start: calc((var(--wwf-visa-timeline-marker-size) - var(--wwf-visa-timeline-line-width)) / 2);
inset-block-start: calc(var(--wwf-visa-timeline-marker-offset) + var(--wwf-visa-timeline-marker-size));
inline-size: var(--wwf-visa-timeline-line-width);
block-size: calc(100% - var(--wwf-visa-timeline-marker-size));
background: var(--text-primary);
content: "";
}
.wwf-visa-timeline__marker {
position: relative;
z-index: 1;
box-sizing: border-box;
inline-size: var(--wwf-visa-timeline-marker-size);
block-size: var(--wwf-visa-timeline-marker-size);
margin-block-start: var(--wwf-visa-timeline-marker-offset);
border: var(--spacing-xs, 4px) solid var(--text-primary);
border-radius: var(--radius-full, 9999px);
background: var(--background-default);
}
.wwf-visa-timeline strong {
color: inherit;
font-weight: 700;
}
@media (max-width: 960px) {
.wwf-visa-panel {
padding: var(--spacing-5xl, 40px) var(--spacing-3xl, 24px);
}
.wwf-visa-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 600px) {
.wwf-visa-section {
--section-padding-block: var(--spacing-4xl, 32px) var(--spacing-6xl, 48px);
padding-block: var(--spacing-4xl, 32px) var(--spacing-6xl, 48px);
}
.wwf-visa-breadcrumb {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-visa-panel {
padding: var(--spacing-3xl, 24px) var(--spacing-xl, 16px);
}
.wwf-visa-intro {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-visa-card {
--card-padding: var(--spacing-xl, 16px);
}
.wwf-visa-grid {
gap: var(--spacing-3xl, 24px);
}
.wwf-visa-documents li {
align-items: flex-start;
}
.wwf-visa-card__action {
inline-size: 100%;
}
}
/* ======= VISITOR GUIDE PAGE ======= */
.wwf-visitor-hero {
--background-sub-hero: var(--background-neutral-25);
}
.wwf-visitor-hero .nds-section-description {
max-inline-size: none;
}
.wwf-visitor-section {
--section-padding-block: var(--spacing-2xl, 20px);
}
.wwf-visitor-section .nds-section-body {
display: block;
}
.wwf-visitor-block__heading {
display: flex;
align-items: baseline;
gap: var(--spacing-sm, 6px);
margin-block-end: var(--spacing-lg, 12px);
}
.wwf-visitor-block__number,
.wwf-visitor-block__heading h2 {
color: var(--text-default);
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visitor-block__heading h2 {
margin: 0;
}
.wwf-visitor-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* DGA neutral borders are 1px; the gap becomes each internal divider. */
gap: 1px;
margin: 0;
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-md, 8px);
background: var(--border-neutral-primary);
/* Keep child backgrounds inside the shared rounded group border. */
overflow: hidden;
}
.wwf-visitor-facts--arrival {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wwf-visitor-fact {
min-inline-size: 0;
padding: var(--spacing-xl, 16px);
background: var(--background-default);
}
.wwf-visitor-fact dt {
display: flex;
align-items: center;
gap: var(--spacing-sm, 6px);
margin-block-end: var(--spacing-md, 8px);
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 500;
}
.wwf-visitor-fact dt .hgi {
flex: 0 0 auto;
color: var(--text-success);
font-size: var(--spacing-2xl, 20px);
line-height: 1;
}
.wwf-visitor-fact dd {
display: flex;
flex-direction: column;
gap: var(--spacing-xxs, 2px);
margin: 0;
}
.wwf-visitor-fact strong {
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
}
.wwf-visitor-fact dd,
.wwf-visitor-fact dd span {
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-visitor-numbered-list,
.wwf-visitor-plain-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 8px);
margin: 0;
padding: 0;
list-style: none;
}
.wwf-visitor-numbered-list li {
display: flex;
align-items: flex-start;
gap: var(--spacing-md, 8px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-visitor-numbered-list li>span {
flex: 0 0 auto;
color: var(--text-success);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 700;
}
.wwf-visitor-objectives-list li {
font-size: var(--typo-text-md-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-visitor-objectives-list li>span {
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-visitor-numbered-list--compact {
gap: var(--spacing-xl, 16px);
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-visitor-numbered-list--compact li {
padding-block: 0;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-visitor-numbered-list--compact li>span {
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-visitor-discount {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-block-start: var(--spacing-4xl, 32px);
}
.wwf-visitor-discount h3 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visitor-discount strong {
display: block;
max-inline-size: 100%;
color: var(--text-default);
font-size: var(--typo-display-lg-FS);
line-height: var(--typo-display-lg-LH);
font-weight: 700;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.wwf-visitor-content-groups {
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 16px);
padding-block-start: var(--spacing-xs, 4px);
padding-inline-start: var(--spacing-3xl, 24px);
}
.wwf-visitor-content-group {
min-inline-size: 0;
}
.wwf-visitor-content-group h3 {
margin: 0 0 var(--spacing-md, 8px);
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visitor-hotel-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--colors-neutral-300);
border-radius: var(--radius-md, 8px);
/* Keep the first and last card backgrounds inside the grouped outline. */
overflow: hidden;
}
.wwf-visitor-hotel-card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-gap: 0;
--card-border: transparent;
--card-radius: 0;
display: grid;
grid-template-columns: var(--spacing-4xl, 32px) minmax(0, 1fr);
align-items: start;
column-gap: var(--spacing-3xl, 24px);
row-gap: 0;
inline-size: 100%;
border: 0;
border-radius: 0;
background: var(--background-default);
}
.wwf-visitor-hotel-card+.wwf-visitor-hotel-card {
border-block-start: 1px solid var(--colors-neutral-300);
}
.wwf-visitor-hotel-card__index {
grid-column: 1;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: var(--spacing-4xl, 32px);
color: var(--text-success);
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
font-weight: 700;
}
.wwf-visitor-hotel-card__content {
display: contents;
}
.wwf-visitor-hotel-card__head {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--spacing-xl, 16px);
min-inline-size: 0;
margin: 0;
}
.wwf-visitor-hotel-card h3 {
min-inline-size: 0;
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-visitor-tag {
--tag-height: var(--spacing-3xl, 24px);
--tag-fs: var(--typo-text-sm-FS);
--tag-padding-inline: var(--spacing-md, 8px);
flex: 0 0 auto;
}
.wwf-visitor-tag--success {
--tag-bg: var(--colors-primary-sa-flag-50);
--tag-border: var(--colors-primary-sa-flag-200);
--tag-text: var(--colors-primary-sa-flag-800);
}
.wwf-visitor-tag--info {
--tag-bg: var(--colors-blue-50);
--tag-border: var(--colors-blue-200);
--tag-text: var(--colors-blue-800);
}
.wwf-visitor-hotel-card__distance {
grid-column: 2;
grid-row: 2;
margin: 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-visitor-hotel-details {
grid-column: 1 / -1;
grid-row: 3;
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 16px);
margin: var(--spacing-xl, 16px) 0;
}
.wwf-visitor-hotel-details div {
min-inline-size: 0;
}
.wwf-visitor-hotel-details dt {
margin: 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 400;
}
.wwf-visitor-hotel-details dd {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
overflow-wrap: anywhere;
}
.wwf-visitor-hotel-contact {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--spacing-md, 8px) var(--spacing-xl, 16px);
}
.wwf-visitor-hotel-contact a {
display: inline-flex;
align-items: center;
gap: var(--spacing-md, 8px);
min-inline-size: 0;
max-inline-size: 100%;
}
.wwf-visitor-hotel-contact a span {
min-inline-size: 0;
overflow-wrap: anywhere;
}
.wwf-visitor-hotel-contact .hgi {
flex: 0 0 auto;
font-size: var(--spacing-2xl, 20px);
line-height: 1;
}
.wwf-visitor-hotel-details a,
.wwf-visitor-contact-link {
color: var(--text-success);
text-decoration: none;
}
.wwf-visitor-hotel-details a:hover,
.wwf-visitor-plain-list a:hover {
text-decoration: underline;
}
.nds-btn.wwf-visitor-map-link {
--btn-height: var(--spacing-6xl, 48px);
--btn-height-min: var(--spacing-6xl, 48px);
--btn-padding: var(--spacing-xl, 16px);
--btn-FS: var(--typo-text-sm-FS);
--btn-LH: var(--typo-text-sm-LH);
--btn-icon-size: var(--spacing-xl, 16px);
--btn-radius: var(--radius-md, 8px);
--btn-color: var(--text-success);
--btn-border: var(--colors-primary-sa-flag-600-primary);
grid-column: 1 / -1;
grid-row: 4;
justify-self: start;
min-inline-size: auto;
/* Exact design stroke; DGA does not expose a button border-width variable. */
border-width: 1.5px;
}
.wwf-visitor-map-link .nds-label {
font-weight: 600;
}
.wwf-visitor-map-link .hgi {
inline-size: var(--spacing-xl, 16px);
block-size: var(--spacing-xl, 16px);
font-size: var(--spacing-xl, 16px);
line-height: 1;
}
.wwf-visitor-plain-list {
gap: var(--spacing-md, 8px);
padding-inline-start: var(--spacing-4xl, 32px);
list-style: decimal;
}
.wwf-visitor-plain-list li {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
padding-block: 0;
padding-inline-start: var(--spacing-lg, 12px);
}
.wwf-visitor-plain-list li::marker {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
}
.wwf-visitor-plain-list a {
color: inherit;
text-decoration: none;
}
.wwf-visitor-table {
inline-size: 100%;
margin-block-start: 0;
table-layout: fixed;
border: 0;
border-radius: 0;
border-collapse: collapse;
border-spacing: 0;
overflow: visible;
background: transparent;
}
.wwf-visitor-table-section .wwf-visitor-block__heading {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-visitor-table :is(th, thead td) {
block-size: var(--spacing-6xl, 48px);
padding-block: var(--spacing-md, 8px);
padding-inline: var(--spacing-xl, 16px);
border: 1px solid var(--colors-neutral-300);
background-color: var(--colors-neutral-100);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 500;
}
.wwf-visitor-table tbody td {
block-size: var(--spacing-7xl, 64px);
padding-block: var(--spacing-md, 8px);
padding-inline: var(--spacing-xl, 16px);
border: 0;
border-block-end: 1px solid var(--colors-neutral-300);
background-color: var(--background-default);
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-visitor-table tbody tr:nth-child(even) td {
background-color: var(--background-default);
}
.wwf-visitor-weather {
display: inline-flex;
align-items: center;
gap: var(--spacing-lg, 12px);
}
.wwf-visitor-weather .hgi {
color: var(--text-default);
flex: 0 0 auto;
inline-size: var(--spacing-3xl, 24px);
block-size: var(--spacing-3xl, 24px);
font-size: var(--spacing-3xl, 24px);
line-height: 1;
}
.wwf-visitor-note {
margin: var(--spacing-xl, 16px) 0 0;
color: var(--wwf-visitor-note-color);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-visitor-contact-list {
max-inline-size: 760px;
padding-block-start: var(--spacing-xs, 4px);
}
.wwf-visitor-contact-list .wwf-visitor-contact-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-md, 8px);
min-inline-size: 0;
color: var(--text-success);
line-height: var(--typo-text-md-LH);
text-decoration: none;
vertical-align: top;
}
.wwf-visitor-contact-link .hgi {
flex: 0 0 auto;
/* Fixed icon size from the Visitor Guide reference; no DGA 18px size token exists. */
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 18px;
block-size: 18px;
font-size: 18px;
line-height: 18px;
}
.wwf-visitor-contact-link span {
min-inline-size: 0;
overflow-wrap: anywhere;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-facts {
grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 960px) {
.wwf-visitor-facts,
.wwf-visitor-facts--arrival {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.wwf-visitor-section {
--section-padding-block: var(--spacing-2xl, 20px);
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-block__heading {
align-items: flex-start;
flex-direction: column;
gap: var(--spacing-xxs, 2px);
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-block__heading h2 {
max-inline-size: 100%;
overflow-wrap: anywhere;
}
.wwf-visitor-facts,
.wwf-visitor-facts--arrival {
grid-template-columns: minmax(0, 1fr);
}
.wwf-visitor-content-groups {
padding-inline-start: var(--spacing-xl, 16px);
}
.wwf-visitor-hotel-card {
--card-padding: var(--spacing-xl, 16px);
grid-template-columns: var(--spacing-4xl, 32px) minmax(0, 1fr);
column-gap: var(--spacing-lg, 12px);
}
.wwf-visitor-hotel-card__head {
align-items: flex-start;
flex-direction: column;
gap: var(--spacing-md, 8px);
}
.wwf-visitor-map-link {
inline-size: 100%;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card {
grid-template-columns: minmax(0, 1fr);
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card__index,
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card__head,
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card__distance,
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-details,
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-map-link {
grid-column: 1;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card__index {
grid-row: 1;
justify-content: flex-start;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card__head {
grid-row: 2;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-card__distance {
grid-row: 3;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-hotel-details {
grid-row: 4;
}
:root:is([data-a11y~="font-step-2"], [data-a11y~="font-step-3"]) .wwf-visitor-map-link {
grid-row: 5;
}
}
/* ======= OFFICIAL AGENDA PAGE ======= */
.wwf-agenda-schedule {
--section-padding-block-start: var(--spacing-7xl, 64px);
--section-padding-block-end: var(--spacing-7xl, 64px);
}
.wwf-agenda-venue {
--section-padding-block-start: var(--spacing-7xl, 64px);
--section-padding-block-end: var(--spacing-7xl, 64px);
}
.wwf-agenda-days {
display: flex;
gap: var(--spacing-xl, 16px);
margin: 0 0 var(--spacing-4xl, 32px);
padding: 0;
list-style: none;
}
.wwf-agenda-day {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
inline-size: var(--wwf-agenda-day-size);
min-block-size: var(--wwf-agenda-day-size);
flex: 0 0 var(--wwf-agenda-day-size);
border: 1px solid var(--colors-neutral-200);
border-radius: var(--radius-lg, 16px);
background: var(--colors-neutral-50);
color: var(--text-secondary-paragraph);
text-align: center;
}
.wwf-agenda-day[aria-current="date"] {
border-color: var(--wwf-agenda-day-active-bg);
background: var(--wwf-agenda-day-active-bg);
color: var(--text-oncolor-primary);
}
.wwf-agenda-day__weekday {
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-xs-LH);
font-weight: 500;
text-transform: uppercase;
}
.wwf-agenda-day__date {
font-size: var(--typo-display-md-FS);
line-height: var(--typo-display-md-LH);
font-weight: 700;
}
.wwf-agenda-day__month {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-agenda-day-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3xl, 24px);
margin-block-end: var(--spacing-4xl, 32px);
}
.wwf-agenda-day-summary h2 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-agenda-day-summary p {
margin: 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
text-align: end;
}
.wwf-agenda-table {
--min-width: 880px;
inline-size: 100%;
table-layout: fixed;
border: 0;
border-radius: 0;
border-collapse: collapse;
border-spacing: 0;
overflow: visible;
background: transparent;
}
.wwf-agenda-table :is(th, thead td) {
block-size: var(--spacing-6xl, 48px);
padding-block: var(--spacing-md, 8px);
padding-inline: var(--spacing-xl, 16px);
border: 1px solid var(--colors-neutral-300);
background-color: var(--colors-neutral-100);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 500;
white-space: normal;
}
.wwf-agenda-page .wwf-agenda-table tbody td {
block-size: var(--spacing-7xl, 64px);
padding-block: var(--wwf-agenda-table-cell-padding-block);
padding-inline: var(--spacing-xl, 16px);
border: 0;
border-block-end: 1px solid var(--colors-neutral-300);
background-color: var(--background-default);
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
vertical-align: middle;
}
.wwf-agenda-cell {
display: inline-flex;
align-items: center;
gap: var(--spacing-lg, 12px);
min-inline-size: 0;
}
.wwf-agenda-cell .hgi {
flex: 0 0 auto;
inline-size: var(--wwf-agenda-table-icon-size);
block-size: var(--wwf-agenda-table-icon-size);
color: var(--colors-primary-sa-flag-600-primary);
font-size: var(--wwf-agenda-table-icon-size);
line-height: 1;
}
.wwf-agenda-tag {
--tag-height: var(--spacing-3xl, 24px);
--tag-fs: var(--typo-text-xs-FS);
--tag-padding-inline: var(--spacing-md, 8px);
float: none;
}
.wwf-agenda-venue__head {
display: block;
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-agenda-venue>.nds-section-wrapper {
display: block;
}
.wwf-agenda-venue__head h2 {
margin: 0 0 var(--spacing-md, 8px);
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-agenda-venue__head p {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-agenda-facts {
margin: 0;
}
.wwf-agenda-facts .wwf-registration-event-fact {
padding-block: var(--wwf-agenda-fact-padding-block);
}
.wwf-agenda-facts .wwf-registration-event-fact dt .hgi {
flex: 0 0 auto;
inline-size: var(--spacing-xl, 16px);
block-size: var(--spacing-xl, 16px);
color: var(--text-success);
font-size: var(--spacing-xl, 16px);
line-height: 1;
}
.wwf-agenda-page .wwf-agenda-map>img {
aspect-ratio: var(--wwf-agenda-map-aspect-ratio);
box-shadow: none;
}
.wwf-agenda-map figcaption {
margin-block-start: var(--spacing-3xl, 24px);
}
.wwf-agenda-page .wwf-agenda-map h3,
.wwf-agenda-page .wwf-agenda-map figcaption p,
.wwf-agenda-page .wwf-agenda-map .wwf-registration-directions {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-agenda-map .wwf-registration-directions {
--btn-gap: var(--spacing-md, 8px);
margin-block-start: 0;
}
.wwf-agenda-map .wwf-registration-directions .hgi {
inline-size: var(--spacing-xl, 16px);
block-size: var(--spacing-xl, 16px);
font-size: var(--spacing-xl, 16px);
}
@media (max-width: 600px) {
.wwf-agenda-schedule {
--section-padding-block-start: var(--spacing-5xl, 40px);
}
.wwf-agenda-day-summary {
align-items: flex-start;
flex-direction: column;
gap: var(--spacing-md, 8px);
}
.wwf-agenda-day-summary p {
text-align: start;
}
.wwf-agenda-venue {
--section-padding-block-end: var(--spacing-7xl, 64px);
}
.wwf-agenda-page .wwf-agenda-map>img {
aspect-ratio: 4 / 3;
}
}
/* ======= REGISTRATION PAGE ======= */
.wwf-registration-section {
--section-padding-block: var(--spacing-5xl, 40px) var(--spacing-7xl, 64px);
padding-block: var(--spacing-5xl, 40px) var(--spacing-7xl, 64px);
}
.wwf-registration-section .nds-section-body {
align-items: flex-start;
}
.wwf-registration-section .nds-info-content {
gap: 0;
}
.wwf-registration-section .nds-breadcrumb-nav {
margin-block-end: var(--spacing-4xl, 32px);
}
.wwf-registration-intro {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-registration-intro .nds-section-title {
margin-block-end: var(--spacing-lg, 12px);
}
.wwf-registration-intro .nds-section-description {
max-inline-size: 680px;
margin: 0;
}
.wwf-registration-alert {
--card-width-max: none;
--card-bg: var(--background-neutral-25);
--card-border: var(--border-neutral-primary);
--card-radius: var(--radius-md, 8px);
--alert-stripe: var(--border-neutral-secondary);
--alert-icon-bg: var(--background-neutral-50);
--icon-color: var(--text-default);
gap: var(--spacing-xl, 16px);
margin-block-end: var(--spacing-4xl, 32px);
padding: var(--spacing-xl, 16px);
}
.wwf-registration-alert::after {
opacity: 1;
}
.wwf-registration-alert .nds-feedback-icon {
box-sizing: border-box;
inline-size: var(--spacing-10, 40px);
block-size: var(--spacing-10, 40px);
min-inline-size: var(--spacing-10, 40px);
min-block-size: var(--spacing-10, 40px);
flex: 0 0 var(--spacing-10, 40px);
display: grid;
padding: var(--spacing-2, 8px);
place-items: center;
background-color: var(--background-neutral-50);
}
.wwf-registration-alert .nds-feedback-icon :is(.hgi, .nds-icon) {
color: var(--icon-color);
font-size: 18px;
line-height: 18px;
}
.wwf-registration-clock-icon {
position: relative;
box-sizing: border-box;
display: block;
inline-size: var(--spacing-5, 20px);
block-size: var(--spacing-5, 20px);
min-inline-size: var(--spacing-5, 20px);
min-block-size: var(--spacing-5, 20px);
flex: 0 0 var(--spacing-5, 20px);
aspect-ratio: 1;
border: 1.5px solid currentColor;
border-radius: var(--radius-full, 9999px);
color: var(--icon-color);
}
.wwf-registration-clock-icon::before,
.wwf-registration-clock-icon::after {
position: absolute;
inset-inline-start: 50%;
inset-block-start: 50%;
inline-size: 1.5px;
border-radius: var(--radius-full, 9999px);
background: currentColor;
content: "";
transform-origin: center top;
}
.wwf-registration-clock-icon::before {
block-size: 5px;
transform: translate(-50%, -100%);
}
.wwf-registration-clock-icon::after {
block-size: 4px;
transform: translate(-50%, 0) rotate(-45deg);
}
.wwf-registration-required {
margin-block: 0 var(--spacing-4xl, 32px);
color: var(--text-error);
}
.wwf-registration-form {
display: flex;
flex-direction: column;
gap: var(--spacing-4xl, 32px);
}
.wwf-registration-card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-gap: var(--spacing-2xl, 20px);
--card-radius: var(--radius-md, 8px);
--card-border: var(--border-neutral-primary);
inline-size: 100%;
}
.wwf-registration-card__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xl, 16px);
}
.wwf-registration-card__title {
display: inline-flex;
align-items: center;
gap: var(--spacing-md, 8px);
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-registration-card__title .hgi {
flex: 0 0 auto;
inline-size: var(--spacing-3xl, 24px);
block-size: var(--spacing-3xl, 24px);
font-size: var(--spacing-3xl, 24px);
line-height: 1;
}
.wwf-registration-primary-tag {
--tag-bg: var(--background-primary-50);
--tag-border: transparent;
--tag-text: var(--colors-primary-sa-flag-800);
flex: 0 0 auto;
}
.wwf-registration-fields {
gap: var(--spacing-2xl, 20px) var(--spacing-xl, 16px);
}
.wwf-registration-fields .nds-form-container {
margin: 0;
}
.wwf-registration-field--full {
grid-column: 1 / -1;
}
.wwf-registration-choice-group {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.wwf-registration-choice-group legend {
margin-block-end: var(--spacing-lg, 12px);
color: var(--text-default);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
font-weight: 600;
}
.wwf-registration-choice-group legend>span {
color: var(--text-error);
}
.wwf-registration-choice-group>.nds-form-footer:not([hidden]) {
margin-block-start: var(--spacing-lg, 12px);
}
.wwf-registration-checks,
.wwf-registration-radios {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--spacing-lg, 12px);
}
.wwf-registration-checks .nds-form-container {
margin: 0;
}
.wwf-registration-radio-option.nds-form-container {
box-sizing: border-box;
inline-size: 100%;
margin: 0;
padding: var(--spacing-xl, 16px);
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-md, 8px);
}
.wwf-registration-radio-option .nds-form-header {
flex: 1;
}
.wwf-registration-actions {
margin-block-start: 0;
}
.wwf-registration-submit {
--btn-bg: var(--wwf-action-bg);
--btn-bg-hover: var(--wwf-action-bg-hover);
--btn-bg-active: var(--wwf-action-bg-active);
--btn-bg-selected: var(--wwf-action-bg-active);
}
.wwf-registration-stepper-panel {
--card-width-max: none;
--card-padding: var(--spacing-4xl, 32px);
--card-bg: var(--background-neutral-50);
--card-radius: var(--radius-xl, 16px);
--card-border: transparent;
--stepper-button-current: var(--background-primary);
--stepper-button-upcomming: var(--colors-neutral-300);
--stepper-line-completed: var(--colors-neutral-300);
--stepper-line-upcomming: var(--colors-neutral-300);
--stepper-text-primary: var(--colors-neutral-800);
--stepper-text-secondary: var(--colors-neutral-700);
--stepper-text-tertiary: var(--colors-neutral-700);
--wwf-registration-stepper-connector-height: var(--spacing-24, 96px);
--wwf-registration-breadcrumb-offset: calc(var(--typo-text-md-LH, 24px) + var(--spacing-4xl, 32px));
--nds-sideinfo-top-offset: var(--spacing-6xl, 48px);
flex: 0 0 var(--nds-sideinfo-width, 400px);
inline-size: var(--nds-sideinfo-width, 400px);
min-block-size: auto;
position: sticky;
top: calc(var(--nds-nav-height, 72px) + var(--spacing-md, 8px) + var(--nds-sideinfo-top-offset));
block-size: fit-content;
}
.wwf-registration-stepper-panel .nds-stepper {
block-size: 100%;
}
.wwf-registration-stepper-panel .nds-stepper-title {
color: var(--stepper-text-primary);
}
.wwf-registration-stepper-panel .nds-stepper-step:last-child .nds-stepper-title {
font-weight: 400;
}
@media (min-width: 961px) {
.wwf-registration-stepper-panel {
margin-block-start: var(--wwf-registration-breadcrumb-offset);
}
.wwf-registration-stepper-panel .nds-stepper {
--stepper-gap: var(--wwf-registration-stepper-connector-height);
block-size: auto;
}
.wwf-registration-stepper-panel .nds-stepper-step:not(:last-child) {
flex: none;
block-size: var(--stepper-size);
}
.wwf-registration-stepper-panel .nds-stepper-step:not(:last-child) .nds-stepper-base::after {
inset-block-end: auto;
block-size: var(--wwf-registration-stepper-connector-height);
}
}
@media (max-width: 960px) {
.wwf-registration-stepper-panel {
order: -1;
flex-basis: auto;
inline-size: 100%;
min-block-size: auto;
position: static;
}
}
@media (max-width: 600px) {
.wwf-registration-section {
--section-padding-block: var(--spacing-4xl, 32px) var(--spacing-6xl, 48px);
padding-block: var(--spacing-4xl, 32px) var(--spacing-6xl, 48px);
}
.wwf-registration-required,
.wwf-registration-form {
margin-block-end: 0;
}
.wwf-registration-alert .nds-alert-description br {
display: none;
}
.wwf-registration-card {
--card-padding: var(--spacing-xl, 16px);
}
.wwf-registration-card__heading {
align-items: flex-start;
flex-direction: column;
}
.wwf-registration-field--full {
grid-column: auto;
}
.wwf-registration-actions .nds-btn {
inline-size: 100%;
}
}
/* ---- SIDE EVENT SUBMISSION ---- */
.wwf-side-event-page .wwf-registration-intro .nds-section-title {
max-inline-size: var(--spacing-180, 720px);
}
.wwf-side-event-page .nds-form-container:not([hidden])[data-required] .nds-form-header .nds-label::before {
content: none;
}
.wwf-side-event-page .nds-form-container:not([hidden])[data-required] .nds-form-header .nds-label::after {
color: var(--controls-control-text-error);
content: " *";
}
.wwf-side-event-checks--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
}
.wwf-side-event-section-block {
padding-block: var(--spacing-2xl, 20px);
border-block-start: 1px solid var(--divider-color);
}
.wwf-side-event-section-block--first {
padding-block-start: 0;
border-block-start: 0;
}
.wwf-side-event-section-block--last {
padding-block-end: 0;
}
.wwf-side-event-textarea--large {
min-block-size: var(--spacing-10xl, 128px);
}
.wwf-side-event-textarea--medium {
min-block-size: var(--spacing-9xl, 96px);
}
@media (min-width: 961px) {
.wwf-side-event-page .wwf-registration-stepper-panel {
margin-block-start: 0;
}
}
@media (max-width: 600px) {
.wwf-side-event-checks--grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---- COUNTRY PAVILION EXPRESSION OF INTEREST ---- */
.wwf-country-pavilion-page .wwf-registration-intro .nds-section-title {
max-inline-size: var(--spacing-160, 640px);
}
.wwf-country-pavilion-page .nds-form-container:not([hidden])[data-required] .nds-form-header .nds-label::before {
content: none;
}
.wwf-country-pavilion-page .nds-form-container:not([hidden])[data-required] .nds-form-header .nds-label::after {
color: var(--controls-control-text-error);
content: " *";
}
.wwf-registration-hint,
.wwf-country-pavilion-hint {
display: flex;
align-items: flex-start;
gap: var(--spacing-md, 8px);
margin: var(--spacing-md, 8px) 0 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-registration-hint .hgi,
.wwf-country-pavilion-hint .hgi {
flex: 0 0 auto;
margin-block-start: var(--spacing-xxs, 2px);
font-size: var(--spacing-xl, 16px);
line-height: 1;
}
.wwf-country-pavilion-legend-hint {
margin: calc(var(--spacing-lg, 12px) * -1) 0 var(--spacing-xl, 16px);
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-country-pavilion-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xl, 16px) var(--spacing-4xl, 32px);
}
.wwf-country-pavilion-options .nds-form-header label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
}
.wwf-country-pavilion-option-description {
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
font-weight: 400;
line-height: var(--typo-text-sm-LH);
}
.wwf-country-pavilion-requirements {
margin-block-start: var(--spacing-6xl, 48px);
}
.wwf-country-pavilion-requirements textarea {
min-block-size: var(--spacing-24, 96px);
resize: vertical;
}
@media (min-width: 961px) {
.wwf-country-pavilion-page .wwf-registration-stepper-panel {
margin-block-start: 0;
}
}
@media (max-width: 600px) {
.wwf-country-pavilion-options {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---- REGISTRATION SUCCESS ---- */
.wwf-registration-success-content {
inline-size: 100%;
min-inline-size: 0;
}
.wwf-registration-success-summary {
display: flex;
align-items: center;
flex-direction: column;
padding: var(--spacing-5xl, 40px);
border-radius: var(--radius-xl, 16px);
background: var(--background-neutral-50);
text-align: center;
}
.wwf-registration-success-icon {
display: grid;
inline-size: var(--spacing-8xl, 80px);
block-size: var(--spacing-8xl, 80px);
margin-block-end: var(--spacing-4xl, 32px);
border-radius: var(--radius-full, 9999px);
place-items: center;
background: var(--colors-primary-sa-flag-100);
color: var(--colors-primary-sa-flag-600-primary);
}
.wwf-registration-success-icon .hgi {
font-size: var(--spacing-5xl, 40px);
line-height: 1;
}
.wwf-registration-success-summary>.nds-section-title {
margin: 0;
color: var(--text-default);
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
letter-spacing: 0;
}
.wwf-registration-success-lead {
margin: var(--spacing-lg, 12px) 0 var(--spacing-3xl, 24px);
color: var(--text-success);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
}
.wwf-registration-success-actions {
box-sizing: border-box;
inline-size: 100%;
padding: var(--spacing-3xl, 24px);
border-radius: var(--radius-md, 8px);
background: var(--background-neutral-100);
}
.wwf-registration-success-actions>p {
margin: 0 0 var(--spacing-3xl, 24px);
color: var(--text-secondary-paragraph);
}
.wwf-registration-success-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-lg, 12px);
}
.wwf-registration-success-buttons .nds-btn {
min-inline-size: 176px;
}
.wwf-registration-learn {
--btn-bg: var(--background-default);
--btn-bg-hover: var(--background-neutral-50);
--btn-bg-active: var(--background-neutral-200);
--btn-bg-selected: var(--background-neutral-200);
--btn-border: transparent;
--btn-border-hover: var(--border-neutral-primary);
--btn-color: var(--text-default);
}
.wwf-registration-event {
padding: var(--spacing-4xl, 32px) 0 var(--spacing-5xl, 40px);
}
.wwf-registration-event__head {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-registration-event__head .nds-section-title {
margin: 0 0 var(--spacing-md, 8px);
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
letter-spacing: 0;
}
.wwf-registration-event__head p {
margin: 0;
color: var(--text-secondary-paragraph);
}
.wwf-registration-event-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
overflow: hidden;
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-md, 8px);
background: var(--background-default);
}
.wwf-registration-event-fact {
min-inline-size: 0;
padding: var(--spacing-2xl, 20px);
}
.wwf-registration-event-fact+.wwf-registration-event-fact {
border-inline-start: 1px solid var(--border-neutral-primary);
}
.wwf-registration-event-fact dt {
display: flex;
align-items: center;
gap: var(--spacing-md, 8px);
margin-block-end: var(--spacing-md, 8px);
color: var(--text-default);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-registration-event-fact dt .nds-icon {
flex: 0 0 auto;
color: var(--text-success);
font-size: var(--spacing-3xl, 24px);
}
.wwf-registration-event-fact dd {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
margin: 0;
}
.wwf-registration-event-fact strong {
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-registration-event-fact dd span {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-registration-map {
margin: var(--spacing-3xl, 24px) 0 0;
}
.wwf-registration-map>img {
display: block;
box-sizing: border-box;
inline-size: 100%;
aspect-ratio: 1680 / 566;
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-md, 8px);
object-fit: cover;
box-shadow: 0 1px 2px -1px #0000001a, 0 1px 3px 0 #0000001a;
}
.wwf-registration-map>iframe {
display: block;
box-sizing: border-box;
inline-size: 100%;
aspect-ratio: 1680 / 566;
border: 0;
border-radius: var(--radius-md, 8px);
box-shadow: 0 1px 2px -1px #0000001a, 0 1px 3px 0 #0000001a;
}
.wwf-registration-map figcaption {
margin-block-start: var(--spacing-3xl, 24px);
}
.wwf-registration-map h3 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
letter-spacing: 0;
}
.wwf-registration-map figcaption p {
margin: 0;
color: var(--text-primary-paragraph);
}
.wwf-registration-directions {
--btn-height: fit-content;
--btn-padding: 0;
--btn-gap: var(--spacing-lg, 12px);
--btn-color: var(--colors-primary-sa-flag-600-primary);
--btn-color-hover: var(--colors-primary-sa-flag-700);
margin-block-start: var(--spacing-md, 8px);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 600;
}
.wwf-registration-directions .hgi {
inline-size: var(--spacing-3xl, 24px);
block-size: var(--spacing-3xl, 24px);
font-size: var(--spacing-3xl, 24px);
line-height: 1;
}
@media (max-width: 600px) {
.wwf-registration-success-summary {
padding: var(--spacing-4xl, 32px) var(--spacing-xl, 16px);
}
.wwf-registration-success-summary>.nds-section-title {
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-registration-success-actions {
padding: var(--spacing-xl, 16px);
}
.wwf-registration-success-buttons {
align-items: stretch;
flex-direction: column;
flex-wrap: nowrap;
}
.wwf-registration-success-buttons .nds-btn {
inline-size: 100%;
min-inline-size: 0;
}
.wwf-registration-event-facts {
grid-template-columns: minmax(0, 1fr);
}
.wwf-registration-event-fact+.wwf-registration-event-fact {
border-inline-start: 0;
border-block-start: 1px solid var(--border-neutral-primary);
}
.wwf-registration-map>img {
aspect-ratio: 4 / 3;
}
}
/* ---- SPONSORSHIP EXPRESSION OF INTEREST ---- */
.wwf-sponsorship-page .wwf-registration-intro .nds-section-title {
max-inline-size: var(--spacing-180, 720px);
}
.wwf-sponsorship-page .wwf-registration-intro .nds-section-title>span {
display: block;
}
.wwf-sponsorship-intro__lead {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
font-weight: 700;
line-height: var(--typo-text-md-LH);
}
.wwf-registration-intro .wwf-sponsorship-intro__description {
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-sponsorship-intro__note {
margin: var(--spacing-xl, 16px) 0 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-sponsorship-page .nds-form-container:not([hidden])[data-required] .nds-form-header .nds-label::before {
content: none;
}
.wwf-sponsorship-page .nds-form-container:not([hidden])[data-required] .nds-form-header .nds-label::after {
color: var(--controls-control-text-error);
content: " *";
}
.wwf-sponsorship-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-lg, 12px) var(--spacing-4xl, 32px);
}
.wwf-sponsorship-comments {
margin-block-start: var(--spacing-2xl, 20px);
}
.wwf-sponsorship-page .nds-textarea>.nds-form-control>textarea {
min-block-size: var(--spacing-24, 96px);
resize: vertical;
}
@media (min-width: 961px) {
.wwf-sponsorship-page .wwf-registration-stepper-panel {
margin-block-start: 0;
}
}
@media (max-width: 600px) {
.wwf-sponsorship-options {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---- INQUIRY FORM AND CONFIRMATION ---- */
.wwf-inquiry-interest-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-lg, 12px) var(--spacing-4xl, 32px);
}
.wwf-inquiry-page .nds-textarea>.nds-form-control>textarea {
min-block-size: var(--spacing-24, 96px);
resize: vertical;
}
.wwf-inquiry-success-summary {
inline-size: 100%;
}
.wwf-inquiry-success-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
inline-size: 100%;
margin-block-end: var(--spacing-3xl, 24px);
gap: var(--spacing-xl, 16px);
text-align: start;
}
.wwf-inquiry-success-card {
box-sizing: border-box;
min-inline-size: 0;
padding: var(--spacing-3xl, 24px);
border-radius: var(--radius-md, 8px);
background: var(--background-default);
}
.wwf-inquiry-success-card__icon {
display: grid;
inline-size: var(--spacing-6xl, 48px);
block-size: var(--spacing-6xl, 48px);
margin-block-end: var(--spacing-xl, 16px);
border-radius: var(--radius-full, 9999px);
place-items: center;
background: var(--background-neutral-50);
color: var(--text-default);
}
.wwf-inquiry-success-card__icon .hgi {
inline-size: var(--spacing-3xl, 24px);
block-size: var(--spacing-3xl, 24px);
font-size: var(--spacing-3xl, 24px);
line-height: 1;
}
.wwf-inquiry-success-card h2 {
margin: 0 0 var(--spacing-md, 8px);
color: var(--text-default);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-inquiry-success-card p {
margin: 0;
color: var(--text-secondary-paragraph);
}
.wwf-inquiry-success-buttons {
inline-size: min(100%, 576px);
}
.wwf-inquiry-success-buttons .nds-btn {
flex: 1 1 0;
}
@media (max-width: 600px) {
.wwf-inquiry-interest-options,
.wwf-inquiry-success-details {
grid-template-columns: minmax(0, 1fr);
}
.wwf-inquiry-success-card {
padding: var(--spacing-xl, 16px);
}
.wwf-inquiry-success-buttons {
inline-size: 100%;
}
}
/* ======= LEGAL CONTENT PAGES ======= */
.wwf-legal-page :is(h1, h2, h3, h4) {
letter-spacing: 0;
}
.wwf-legal-hero__lead {
margin-block: 0 var(--spacing-3xl, 24px);
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
}
.wwf-legal-hero .nds-section-description {
max-inline-size: none;
}
.wwf-legal-content article>.nds-section-title:not(:first-child) {
margin-block-start: var(--spacing-4xl, 32px);
}
.wwf-legal-content article>h3 {
margin-block: var(--spacing-lg, 12px) var(--spacing-md, 8px);
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
}
.wwf-legal-contact-card {
--card-width-max: none;
--card-padding: 0;
--card-gap: 0;
--card-radius: var(--radius-md, 8px);
--card-border: var(--border-neutral-primary);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-inline-size: none;
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-legal-contact-card--single {
grid-template-columns: minmax(0, 1fr);
}
.wwf-legal-contact-card__item {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 8px);
min-inline-size: 0;
padding: var(--spacing-xl, 16px);
}
.wwf-legal-contact-card__item+.wwf-legal-contact-card__item {
border-inline-start: 1px solid var(--border-neutral-primary);
}
.wwf-legal-contact-card__label {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm, 6px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-xs-LH);
}
.wwf-legal-contact-card__label .nds-icon {
flex: 0 0 auto;
color: var(--text-primary);
font-size: var(--typo-text-lg-FS);
}
.wwf-legal-contact-card__item>a {
overflow-wrap: anywhere;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 700;
text-decoration: none;
}
@media (max-width: 600px) {
.wwf-legal-contact-card {
grid-template-columns: minmax(0, 1fr);
}
.wwf-legal-contact-card__item+.wwf-legal-contact-card__item {
border-inline-start: 0;
border-block-start: 1px solid var(--border-neutral-primary);
}
}
/* ======= SEARCH PAGE ======= */
.wwf-search-results {
padding-block: var(--spacing-4xl, 32px) var(--spacing-7xl, 64px);
}
.wwf-search-results>.nds-section-wrapper {
display: block;
}
.wwf-search-form {
margin-block-end: var(--spacing-5xl, 40px);
}
.wwf-search-results__heading {
margin-block-end: var(--spacing-4xl, 32px);
text-align: start;
}
.wwf-search-list {
--gap: var(--spacing-2xl, 20px);
}
.wwf-search-card {
--card-width-max: none;
--card-padding: var(--spacing-xl, 16px);
--card-gap: var(--spacing-2xl, 20px);
text-align: start;
}
.wwf-search-card .nds-card-content {
inline-size: 100%;
}
.wwf-search-card__tag {
--tag-bg: var(--background-neutral-50);
--tag-border: var(--border-neutral-secondary);
--tag-text: var(--text-primary-paragraph);
}
.wwf-search-card__action {
--btn-radius: var(--radius-sm, 4px);
}
.wwf-search-empty {
padding: var(--spacing-7xl, 64px) var(--spacing-xl, 16px);
color: var(--text-secondary-paragraph);
text-align: center;
}
.wwf-search-empty .nds-icon {
margin-block-end: var(--spacing-lg, 12px);
color: var(--icon-default);
font-size: var(--spacing-4xl, 32px);
}
.wwf-search-empty p {
margin: 0;
}
@media (max-width: 600px) {
.wwf-search-results {
padding-block: var(--spacing-3xl, 24px) var(--spacing-5xl, 40px);
}
.wwf-search-form,
.wwf-search-results__heading {
margin-block-end: var(--spacing-4xl, 32px);
}
}
/* ======= ACCESSIBILITY TOGGLE (hidden) ======= */
/* The floating accessibility launcher is hidden (the footer Accessibility
Tools apply settings directly). Kept in the DOM so the NDS bundle still
initialises and restores saved settings; only visually removed. */
.wwf-a11y-toggle-hidden {
display: none !important;
}
/* ======= HEADER SEARCH (nav reveal) ======= */
/* Drops the DGA search component (.wwf-search-results) below the main nav
when the search icon is clicked. site.js toggles the [hidden] attribute.
The panel breaks out of the nav's content-wrapper to span the full
viewport, so the section's own max(32px, 50% - 640px) side padding
centres the bar to the content width exactly like the Search page. */
.wwf-header-search {
inline-size: 100vw;
margin-inline: calc(50% - 50vw);
border-block-start: 1px solid var(--border-neutral-secondary);
background: var(--background-neutral-0, #fff);
}
.wwf-header-search[hidden] {
display: none;
}
/* Compact the full-page search section so it reads as a nav dropdown. */
.wwf-header-search .wwf-search-results {
padding-block: var(--spacing-xl, 16px);
}
.wwf-header-search .wwf-search-form {
margin-block-end: 0;
}
/* ======= 11TH WORLD WATER FORUM EVENT ======= */
.wwf-forum-overview {
--section-padding-block-start: var(--spacing-5xl, 40px);
--section-padding-block-end: var(--spacing-8xl, 80px);
}
.wwf-forum-overview>.nds-section-wrapper {
display: block;
}
.wwf-forum-overview .nds-breadcrumb-nav {
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-forum-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 412px);
align-items: start;
gap: var(--spacing-3xl, 24px);
}
.wwf-forum-main {
min-inline-size: 0;
}
.wwf-forum-intro {
display: block;
margin-block-end: var(--spacing-6xl, 48px);
}
.wwf-forum-intro>.nds-section-title {
max-inline-size: var(--spacing-140, 560px);
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
}
.wwf-forum-intro__tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md, 8px);
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-forum-intro__tags>.nds-tag {
--tag-fs: var(--typo-text-xs-FS);
}
.wwf-forum-intro>p {
max-inline-size: 760px;
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-forum-feature__image {
display: block;
box-sizing: border-box;
inline-size: 100%;
aspect-ratio: 15 / 7;
margin-block-end: var(--spacing-4xl, 32px);
border-radius: var(--radius-lg, 12px);
object-fit: cover;
}
.wwf-forum-feature h2,
.wwf-forum-section-head h2,
.wwf-forum-foundations h2 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
font-weight: 700;
letter-spacing: 0;
}
.wwf-forum-feature h2 {
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-forum-feature p {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-forum-feature p+p {
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-forum-facts {
margin-block-start: var(--spacing-4xl, 32px);
}
.wwf-forum-map {
margin-block-start: var(--spacing-4xl, 32px);
}
.wwf-forum-map>img {
aspect-ratio: 1680 / 554;
}
.wwf-forum-map figcaption {
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-forum-map h3,
.wwf-forum-map figcaption p,
.wwf-forum-map .wwf-registration-directions {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-objectives,
.wwf-forum-foundations,
.wwf-forum-faq {
margin-block-start: var(--spacing-8xl, 80px);
}
.wwf-forum-section-head {
display: block;
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-forum-section-head p,
.wwf-forum-foundations__head p {
margin: var(--spacing-md, 8px) 0 0;
color: var(--text-primary-paragraph);
}
.wwf-forum-objectives__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
}
.wwf-forum-objective-card {
--card-width-max: none;
--card-padding: var(--spacing-3xl, 24px);
--card-gap: var(--spacing-xl, 16px);
--card-radius: var(--radius-lg, 12px);
align-items: flex-start;
}
.wwf-forum-objective-card>.nds-featured-icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--icon-default);
flex: 0 0 auto;
}
.wwf-forum-objective-card .nds-card-title {
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
}
.wwf-forum-objective-card .nds-card-description {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-venue {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr);
gap: var(--spacing-4xl, 32px);
margin-block-start: var(--spacing-8xl, 80px);
padding: var(--spacing-4xl, 32px);
border-radius: var(--radius-xl, 16px);
background: linear-gradient(145deg, var(--colors-blue-800) 0%, var(--colors-blue-900) 100%);
color: var(--text-oncolor-primary);
overflow: clip;
}
.wwf-forum-venue::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("media/global-dialogue-waves.webp") center / cover no-repeat;
opacity: var(--wwf-dialogue-texture-opacity);
pointer-events: none;
}
.wwf-forum-venue__content>.nds-tag {
--tag-bg: var(--background-default);
--tag-text: var(--text-default);
--tag-border: transparent;
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-forum-venue h2 {
margin: 0;
color: inherit;
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
letter-spacing: 0;
}
.wwf-forum-venue__location {
display: flex;
align-items: center;
gap: var(--spacing-md, 8px);
margin: var(--spacing-md, 8px) 0 var(--spacing-3xl, 24px);
color: var(--colors-alpha-alpha-white-80);
}
.wwf-forum-venue__content>p:not(.wwf-forum-venue__location),
.wwf-forum-venue__visual>p {
margin: 0;
color: var(--text-oncolor-primary);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-forum-venue__content>p+p {
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-forum-venue__visual {
min-inline-size: 0;
}
.wwf-forum-venue__image-wrap {
position: relative;
margin-block-end: var(--spacing-xl, 16px);
border-radius: var(--radius-lg, 12px);
overflow: clip;
}
.wwf-forum-venue__image-wrap::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--wwf-forum-venue-image-overlay);
pointer-events: none;
}
.wwf-forum-venue__image-wrap>img {
display: block;
inline-size: 100%;
aspect-ratio: 1;
border-radius: inherit;
object-fit: cover;
transform: scaleX(-1);
}
.wwf-forum-rating {
position: absolute;
inset-block-start: var(--spacing-xl, 16px);
inset-inline-start: var(--spacing-xl, 16px);
display: flex;
flex-direction: column;
padding: var(--spacing-lg, 12px);
border-radius: var(--radius-md, 8px);
z-index: 2;
background: var(--colors-alpha-alpha-white-60);
color: var(--text-default);
box-shadow: var(--wwf-forum-rating-shadow);
backdrop-filter: blur(var(--spacing-lg, 12px));
-webkit-backdrop-filter: blur(var(--spacing-lg, 12px));
}
.wwf-forum-rating strong {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-rating>span:not(.wwf-forum-rating__stars) {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-xs-FS);
line-height: var(--typo-text-xs-LH);
}
.wwf-forum-rating__stars {
color: var(--wwf-action-bg);
letter-spacing: 0;
}
.wwf-forum-venue__action {
--btn-bg: var(--background-default);
--btn-bg-hover: var(--background-neutral-100);
--btn-color: var(--text-default);
--btn-border: transparent;
margin-block-start: var(--spacing-xl, 16px);
}
.wwf-forum-foundations__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-3xl, 24px);
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-forum-foundations__head>div {
min-inline-size: 0;
}
.wwf-forum-foundations__head>.nds-btn {
flex: 0 0 auto;
}
.wwf-forum-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
overflow: hidden;
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-md, 8px);
}
.wwf-forum-stats>div {
min-inline-size: 0;
padding: var(--spacing-3xl, 24px);
}
.wwf-forum-stats>div+div {
border-inline-start: 1px solid var(--border-neutral-primary);
}
.wwf-forum-stats dt {
display: inline-block;
margin-block-end: var(--spacing-md, 8px);
background: var(--wwf-forum-counter-gradient);
background-clip: text;
color: transparent;
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
font-weight: 700;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 120px;
}
.wwf-forum-stats>div:last-of-type dt {
background-size: 25px;
}
.wwf-forum-stats dd {
margin: 0;
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-accordion {
--card-width-max: none;
--card-padding: 0;
--card-gap: 0;
--card-radius: var(--radius-lg, 12px);
--accordion-header-height: calc(var(--spacing-7xl, 64px) + var(--spacing-md, 8px));
--accordion-lg-header-padding: var(--spacing-3xl, 24px);
overflow: clip;
}
.wwf-forum-accordion .nds-accordion-title {
color: var(--text-default);
}
.wwf-forum-accordion .nds-accordion-body p {
margin: 0;
color: var(--text-primary-paragraph);
}
.wwf-forum-accordion .nds-accordion-body {
padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
}
.wwf-forum-sidebar {
position: sticky;
inset-block-start: calc(var(--nds-nav-height, 72px) + var(--spacing-xl, 16px));
display: grid;
gap: var(--spacing-xl, 16px);
min-inline-size: 0;
}
.wwf-forum-sidebar-card {
--card-width-max: none;
--card-padding: 0;
--card-gap: 0;
--card-radius: var(--radius-lg, 16px);
--card-border: var(--border-neutral-primary);
min-inline-size: 0;
overflow: clip;
box-shadow: var(--shadow-xl);
}
.wwf-forum-registration__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xl, 16px);
padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
border-block-end: 1px solid var(--border-neutral-primary);
}
.wwf-forum-registration__head>div {
min-inline-size: 0;
}
.wwf-forum-registration__head>div>span {
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-registration__head h2 {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
letter-spacing: 0;
}
.wwf-forum-registration__body {
padding: var(--spacing-3xl, 24px);
}
.wwf-forum-registration__body>p {
margin: 0 0 var(--spacing-2xl, 20px);
color: var(--text-primary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-forum-registration__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-2xl, 20px) var(--spacing-xl, 16px);
}
.wwf-forum-registration__actions>.nds-btn {
min-inline-size: 0;
inline-size: 100%;
}
.wwf-forum-registration__primary {
--btn-bg: var(--wwf-action-bg);
--btn-bg-hover: var(--wwf-action-bg-hover);
--btn-bg-active: var(--wwf-action-bg-active);
--btn-bg-selected: var(--wwf-action-bg-active);
}
.wwf-forum-registration__visa {
grid-column: 1 / -1;
}
html[data-a11y~="font-step-3"] .wwf-forum-registration__actions {
grid-template-columns: minmax(0, 1fr);
}
html[data-a11y~="font-step-3"] .wwf-forum-registration__visa {
grid-column: auto;
}
@media (max-width: 960px) {
.wwf-forum-layout {
grid-template-columns: minmax(0, 1fr);
}
.wwf-forum-main {
display: contents;
}
.wwf-forum-main>* {
order: 2;
}
.wwf-forum-intro {
order: 0;
}
.wwf-forum-sidebar {
order: 1;
position: static;
}
}
@media (max-width: 768px) {
.wwf-forum-venue {
grid-template-columns: minmax(0, 1fr);
}
.wwf-forum-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wwf-forum-stats>.wwf-forum-stat--new-row-tablet {
border-inline-start: 0;
}
.wwf-forum-stats>.wwf-forum-stat--new-row-tablet,
.wwf-forum-stats>.wwf-forum-stat--new-row-tablet~div {
border-block-start: 1px solid var(--border-neutral-primary);
}
}
@media (max-width: 600px) {
.wwf-forum-overview {
--section-padding-block-start: var(--spacing-5xl, 40px);
--section-padding-block-end: var(--spacing-6xl, 48px);
}
.wwf-forum-intro,
.wwf-forum-objectives,
.wwf-forum-venue,
.wwf-forum-foundations,
.wwf-forum-faq {
margin-block-start: var(--spacing-6xl, 48px);
}
.wwf-forum-intro {
margin-block-start: 0;
margin-block-end: var(--spacing-4xl, 32px);
}
.wwf-forum-feature__image {
aspect-ratio: 4 / 3;
margin-block-end: var(--spacing-3xl, 24px);
}
.wwf-forum-objectives__grid {
grid-template-columns: minmax(0, 1fr);
}
.wwf-forum-venue {
padding: var(--spacing-3xl, 24px) var(--spacing-xl, 16px);
}
.wwf-forum-foundations__head {
flex-direction: column;
}
.wwf-forum-foundations__head>.nds-btn {
inline-size: 100%;
}
.wwf-forum-stats {
grid-template-columns: minmax(0, 1fr);
}
.wwf-forum-stats>div+div,
.wwf-forum-stats>.wwf-forum-stat--new-row-tablet {
border-inline-start: 0;
border-block-start: 1px solid var(--border-neutral-primary);
}
.wwf-forum-registration__actions {
grid-template-columns: minmax(0, 1fr);
}
.wwf-forum-quick-links .wwf-forum-registration__actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wwf-forum-registration__visa {
grid-column: auto;
}
}
/* ---- ABOUT THE FORUM PAGE ---- */
.wwf-about-hero {
position: relative;
isolation: isolate;
padding-inline: max(var(--nds-viewport-padding), calc((100% - var(--nds-content-MaxWidth)) / 2));
background: var(--colors-blue-900);
color: var(--text-oncolor-primary);
}
.wwf-about-hero__media {
position: absolute;
inset-block: 0;
inset-inline-end: -270px;
z-index: 0;
inline-size: 64%;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 42%);
mask-image: linear-gradient(to right, transparent 0%, black 42%);
pointer-events: none;
}
html[dir="rtl"] .wwf-about-hero__media {
-webkit-mask-image: linear-gradient(to left, transparent 0%, black 42%);
mask-image: linear-gradient(to left, transparent 0%, black 42%);
}
.wwf-about-hero__media::before,
.wwf-about-hero__media::after {
content: "";
position: absolute;
inset: 0;
}
.wwf-about-hero__media::before {
background: url("media/about-hero.webp") center 42% / cover no-repeat;
opacity: var(--wwf-about-hero-image-opacity);
scale: -1 1;
}
html[dir="rtl"] .wwf-about-hero__media::before {
scale: 1 1;
}
.wwf-about-hero__media::after {
background: var(--wwf-about-hero-overlay);
}
html[dir="rtl"] .wwf-about-hero__media::after {
background: var(--wwf-about-hero-overlay-rtl);
}
.wwf-about-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
/* background: url("media/global-dialogue-waves.webp") center / cover no-repeat; */
opacity: var(--wwf-dialogue-texture-opacity);
pointer-events: none;
}
.wwf-about-hero__wrapper {
align-items: center;
padding-block: var(--spacing-8xl, 80px);
}
.wwf-about-hero__content {
inline-size: min(50%, 640px);
}
.wwf-about-hero h1 {
margin: 0 0 var(--spacing-md, 8px);
color: inherit;
font-size: var(--typo-display-xl-FS);
line-height: var(--typo-display-xl-LH);
letter-spacing: 0;
}
.wwf-about-hero__tagline {
margin: 0 0 var(--spacing-xl, 16px);
font-size: var(--typo-display-sm-FS);
line-height: var(--typo-display-sm-LH);
font-weight: 700;
background: linear-gradient(90deg, var(--wwf-hero-tagline-start), var(--wwf-hero-tagline-end));
--webkit-background-clip: text;
background-clip: text;
background-size: 430px 100%;
color: transparent;
}
.wwf-about-hero__description {
max-inline-size: 560px;
margin: 0 0 var(--spacing-4xl, 32px);
color: var(--colors-alpha-alpha-white-80);
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-xl-LH);
}
.wwf-about-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xl, 16px);
}
.wwf-about-hero__actions .nds-btn {
--btn-height: var(--spacing-5xl, 40px);
--btn-height-min: var(--spacing-5xl, 40px);
--btn-size: var(--spacing-5xl, 40px);
--btn-radius: var(--radius-sm, 4px);
}
.wwf-about-hero__framework {
--btn-bg: var(--background-default);
--btn-bg-hover: var(--background-neutral-100);
--btn-bg-active: var(--background-neutral-200);
--btn-border: transparent;
--btn-color: var(--text-default);
}
.wwf-about-hero__inquiry {
--btn-bg: var(--wwf-about-inquiry-bg);
--btn-bg-hover: var(--colors-alpha-alpha-white-30);
--btn-bg-active: var(--colors-alpha-alpha-white-40);
--btn-border: var(--colors-alpha-alpha-white-20);
--btn-color: var(--text-oncolor-primary);
}
.wwf-about-section {
--section-padding-block: var(--spacing-7xl, 64px);
--section-title-FS: var(--typo-display-sm-FS);
--section-title-LH: var(--typo-display-sm-LH);
--section-description-FS: var(--typo-text-md-FS);
--section-description-LH: var(--typo-text-md-LH);
}
.wwf-about-section__head {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.wwf-about-section-tag {
--tag-bg: var(--colors-primary-sa-flag-50);
--tag-border: var(--colors-primary-sa-flag-200);
--tag-text: var(--colors-primary-sa-flag-800);
margin-block-end: var(--spacing-xl, 16px);
}
.wwf-about-section__head>.nds-section-title {
margin-block-end: var(--spacing-md, 8px);
letter-spacing: 0;
}
.wwf-about-section__head>.nds-section-description {
max-inline-size: none;
margin: 0;
color: var(--text-default);
}
.wwf-about-platform {
--section-padding-block: var(--spacing-5xl, 40px);
--section-row-gap: var(--spacing-5xl, 40px);
}
.wwf-about-platform__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
}
.wwf-about-platform-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-gap: var(--spacing-xl, 16px);
--card-radius: var(--radius-md, 8px);
--card-border: var(--border-neutral-primary);
block-size: 100%;
}
.wwf-about-platform-card .nds-featured-icon,
.wwf-about-governance__item .nds-featured-icon,
.wwf-about-explore-row .nds-featured-icon {
--icon-bg-color: var(--background-neutral-100);
--icon-color: var(--icon-default);
}
.wwf-about-platform-card .nds-card-content {
flex: 1;
}
.wwf-about-platform-card .nds-card-title,
.wwf-about-organizer-card .nds-card-title {
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
}
.wwf-about-platform-card .nds-card-description,
.wwf-about-organizer-card .nds-card-description {
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-about-platform-card .nds-card-actions,
.wwf-about-organizer-card .nds-card-actions {
margin-block-start: auto;
}
.wwf-about-organizer-card .wwf-organizer-card__action {
--btn-color: var(--text-default);
--btn-color-hover: var(--text-primary);
}
.wwf-about-platform-card .nds-card-actions,
.wwf-about-card-disclosure {
inline-size: 100%;
}
.wwf-about-card-disclosure .wwf-about-card-action {
--btn-padding: 0;
--btn-height: var(--spacing-3xl, 24px);
--btn-height-min: var(--spacing-3xl, 24px);
--btn-color: var(--text-default);
--btn-FS: var(--typo-text-sm-FS);
--btn-bg-hover: var(--button-background-transparent-default);
--btn-bg-active: var(--button-background-transparent-default);
align-self: flex-start;
justify-content: flex-start;
inline-size: fit-content;
padding: 0;
}
.wwf-about-card-action__expanded,
.wwf-about-card-action[aria-expanded="true"] .wwf-about-card-action__collapsed {
display: none;
}
.wwf-about-card-action[aria-expanded="true"] .wwf-about-card-action__expanded {
display: inline;
}
.wwf-about-card-action .nds-hgi-arrow-down-01::before {
transition: transform var(--nds-transition);
}
.wwf-about-card-action[aria-expanded="true"] .nds-hgi-arrow-down-01::before {
transform: rotate(90deg);
}
.wwf-about-card-details .nds-accordion-body {
padding: var(--spacing-lg, 12px) 0 0;
}
.wwf-about-card-details p {
margin: 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-about-purpose-section {
--section-padding-block: var(--spacing-5xl, 40px);
background: var(--background-neutral-25);
}
.wwf-about-purpose-section .nds-section-wrapper {
background: black;
border-radius: var(--radius-md, 8px);
}
.wwf-about-purpose {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-block-size: 172px;
padding: var(--spacing-5xl, 40px);
border-radius: var(--radius-md, 8px);
inline-size: 100%;
background: var(--wwf-dialogue-card-bg);
color: var(--text-oncolor-primary);
/* The supplied bubbles are decorative and intentionally contained by the banner. */
overflow: clip;
}
.wwf-about-purpose::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url("media/global-dialogue-waves.webp") center / cover no-repeat;
opacity: var(--wwf-dialogue-texture-opacity);
pointer-events: none;
}
.wwf-about-purpose__content {
position: relative;
z-index: 1;
}
.wwf-about-purpose h2 {
margin: 0 0 var(--spacing-xl, 16px);
color: inherit;
font-size: var(--typo-display-md-FS);
line-height: var(--typo-display-md-LH);
letter-spacing: 0;
text-transform: uppercase;
}
.wwf-about-purpose p {
margin: 0;
color: var(--colors-alpha-alpha-white-80);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
}
.wwf-about-purpose p strong {
color: var(--text-oncolor-primary);
}
.wwf-about-purpose__bubbles {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
z-index: 1;
inline-size: 200px;
pointer-events: none;
}
.wwf-about-journey__heading {
margin: 0 0 var(--spacing-3xl, 24px);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
letter-spacing: 0;
}
.wwf-about-journey {
--section-padding-block: var(--spacing-5xl, 40px);
--section-row-gap: var(--spacing-4xl, 32px);
}
.wwf-about-timeline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xl, 16px);
}
.wwf-about-timeline__column {
--wwf-timeline-step-offset: var(--spacing-md, 8px);
position: relative;
display: grid;
grid-auto-rows: minmax(calc(var(--spacing-9xl, 96px) + var(--spacing-lg, 12px)), auto);
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.wwf-about-timeline__column--staggered {
--wwf-timeline-step-offset: calc(var(--spacing-4xl, 32px) + var(--spacing-xs, 4px));
}
.wwf-about-timeline__column::before {
content: "";
position: absolute;
z-index: 0;
inset-block: var(--spacing-xs, 4px) 0;
inset-inline-start: calc(var(--spacing-md, 8px) - 1px);
inline-size: 2px;
background: var(--colors-neutral-200);
}
.wwf-about-timeline__column .nds-stepper-step {
position: relative;
z-index: 1;
align-items: flex-start;
inline-size: 100%;
min-block-size: calc(var(--spacing-9xl, 96px) + var(--spacing-lg, 12px));
padding-block-end: 0;
translate: 0 var(--wwf-timeline-step-offset);
}
.wwf-about-timeline__column .nds-stepper-base::after {
display: none;
}
.wwf-about-timeline__column .nds-stepper-content {
min-inline-size: 0;
}
.wwf-about-timeline__column .nds-stepper-title {
margin: 0;
color: var(--text-default);
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
font-weight: 600;
}
.wwf-about-timeline__column .nds-stepper-description {
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-about-timeline__meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm, 6px);
margin-block-start: var(--spacing-md, 8px);
}
.wwf-about-location-tag,
.wwf-about-status-tag {
--tag-height: var(--spacing-3xl, 24px);
--tag-fs: var(--typo-text-xs-FS);
--tag-padding-inline: var(--spacing-md, 8px);
}
.wwf-about-location-tag {
--tag-bg: var(--background-default);
--tag-border: var(--border-neutral-primary);
--tag-text: var(--text-secondary-paragraph);
}
.wwf-about-status-tag--completed {
--tag-bg: var(--colors-primary-sa-flag-50);
--tag-border: var(--colors-primary-sa-flag-200);
--tag-text: var(--colors-primary-sa-flag-800);
}
.wwf-about-status-tag--upcoming {
--tag-bg: var(--wwf-about-warning-bg);
--tag-border: var(--wwf-about-warning-border);
--tag-text: var(--wwf-about-warning-text);
}
.wwf-about-status-tag--future {
--tag-bg: var(--colors-blue-50);
--tag-border: var(--colors-blue-200);
--tag-text: var(--colors-blue-800);
}
.wwf-about-timeline__column [data-milestone-state="current"] .nds-stepper-circle,
.wwf-about-timeline__column [data-milestone-state="completed"] .nds-stepper-circle {
border-color: var(--colors-primary-sa-flag-600);
background: var(--colors-primary-sa-flag-600);
}
/* Completed milestones are a solid green dot. NDS's JS marks the first done
step as data-state="current", which paints a white centre dot (a ring);
hide that inner dot so every completed milestone reads the same solid fill. */
.wwf-about-timeline__column [data-milestone-state="completed"] .nds-stepper-circle::before {
display: none;
}
.wwf-about-timeline__column [data-milestone-state="current"] .nds-stepper-circle::before {
background: var(--colors-primary-sa-flag-600);
}
.wwf-about-timeline__column [data-milestone-state="current"] .nds-stepper-title,
.wwf-about-timeline__column [data-milestone-state="completed"] .nds-stepper-title {
color: var(--colors-primary-sa-flag-600);
}
.wwf-about-timeline__column [data-milestone-state]:not([data-milestone-state="current"]):not([data-milestone-state="completed"]) .nds-stepper-circle {
border: var(--spacing-xxs, 2px) solid var(--border-neutral-primary);
background: var(--background-default);
}
.wwf-about-organizers,
.wwf-about-explore {
background: var(--background-neutral-25);
}
.wwf-about-organizers {
--section-row-gap: var(--spacing-5xl, 40px);
}
.wwf-about-organizers__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-3xl, 24px);
}
.wwf-about-organizer-card {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-radius: var(--radius-md, 8px);
block-size: 100%;
}
.wwf-about-organizer-card .wwf-organizer-card__logo--mewa,
.wwf-about-organizer-card .wwf-organizer-card__logo--wwc {
block-size: var(--spacing-7xl, 64px);
}
.wwf-about-governance__subtitle {
margin: 0 0 var(--spacing-md, 8px);
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-about-governance {
--section-padding-block: var(--spacing-5xl, 40px);
--section-row-gap: var(--spacing-2xl, 20px);
}
.wwf-about-governance .nds-section-description {
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-about-governance__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--border-neutral-primary);
border-radius: var(--radius-md, 8px);
background: var(--background-default);
}
.wwf-about-governance__item {
min-inline-size: 0;
padding: var(--spacing-2xl, 20px);
}
.wwf-about-governance__item--divided {
border-inline-start: 1px solid var(--border-neutral-primary);
}
.wwf-about-governance__item h3 {
margin: var(--spacing-xl, 16px) 0 0;
font-size: var(--typo-text-xl-FS);
line-height: var(--typo-text-lg-LH);
letter-spacing: 0;
font-weight: 700;
}
.wwf-about-explore__list {
display: grid;
gap: var(--spacing-xl, 16px);
}
.wwf-about-explore {
--section-row-gap: var(--spacing-2xl, 20px);
}
.wwf-about-explore-row {
--card-width-max: none;
--card-padding: var(--spacing-2xl, 20px);
--card-radius: var(--radius-lg, 16px);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--spacing-3xl, 24px);
}
.wwf-about-explore-row__content h3 {
margin: 0 0 var(--spacing-xs, 4px);
font-size: var(--typo-text-lg-FS);
line-height: var(--typo-text-lg-LH);
letter-spacing: 0;
}
.wwf-about-explore-row__content p {
margin: 0;
color: var(--text-secondary-paragraph);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-about-explore-row__action {
--btn-height: var(--spacing-5xl, 40px);
--btn-height-min: var(--spacing-5xl, 40px);
}
@media (max-width: 960px) {
.wwf-about-hero__media {
inline-size: 72%;
}
.wwf-about-hero__content {
inline-size: min(62%, 640px);
}
.wwf-about-platform__grid,
.wwf-about-governance__grid {
grid-template-columns: minmax(0, 1fr);
}
.wwf-about-governance__item--divided {
border-block-start: 1px solid var(--border-neutral-primary);
border-inline-start: 0;
}
}
@media (max-width: 768px) {
.wwf-about-hero__wrapper {
padding-block: var(--spacing-7xl, 64px);
}
.wwf-about-hero__media {
inline-size: 100%;
-webkit-mask-image: none;
mask-image: none;
z-index: -2;
opacity: 0.4;
inset-inline-end: 0;
}
.wwf-about-hero__content {
inline-size: 100%;
}
.wwf-about-timeline,
.wwf-about-organizers__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--spacing-3xl, 24px);
}
.wwf-about-timeline__column--staggered {
--wwf-timeline-step-offset: var(--spacing-md, 8px);
}
.wwf-about-timeline {
gap: 0;
}
.wwf-about-timeline__column--staggered::before {
inset-block-start: 0;
}
}
@media (max-width: 600px) {
.wwf-about-hero__wrapper {
padding-block: var(--spacing-6xl, 48px);
}
.wwf-about-hero h1 {
font-size: var(--typo-display-lg-FS);
line-height: var(--typo-display-lg-LH);
}
.wwf-about-hero__tagline {
font-size: var(--typo-display-xs-FS);
line-height: var(--typo-display-xs-LH);
}
.wwf-about-hero__description {
font-size: var(--typo-text-md-FS);
line-height: var(--typo-text-md-LH);
}
.wwf-about-hero__actions,
.wwf-about-hero__actions .nds-btn {
inline-size: 100%;
}
.wwf-about-purpose {
align-items: flex-start;
padding: var(--spacing-4xl, 32px) var(--spacing-3xl, 24px);
}
.wwf-about-purpose__content {
max-inline-size: calc(100% - var(--spacing-4xl, 32px));
}
.wwf-about-purpose__bubbles {
inline-size: 144px;
opacity: .72;
}
.wwf-about-explore-row {
grid-template-columns: auto minmax(0, 1fr);
gap: var(--spacing-xl, 16px);
}
.wwf-about-explore-row__action {
grid-column: 1 / -1;
inline-size: 100%;
}
}
/* ---- FOOTER ---- */
.wwf-footer {
--divider-color: var(--border-neutral-primary);
padding-block: 0;
background: var(--background-default);
color: var(--text-default);
}
.wwf-footer__updated,
.wwf-footer__contact {
background: var(--background-default);
border-block: 1px solid var(--border-neutral-primary);
}
.wwf-footer__contact {
border-block-start: 0;
font-style: normal;
}
.wwf-footer__updated-inner {
display: flex;
gap: var(--spacing-xs, 4px);
align-items: center;
min-block-size: var(--spacing-5xl, 40px);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
}
.wwf-footer__contact-inner {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4xl, 32px);
align-items: center;
min-block-size: var(--spacing-7xl, 64px);
}
.wwf-footer__contact-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-md, 8px);
min-inline-size: 0;
max-inline-size: 100%;
color: var(--text-default);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
text-decoration: none;
}
.wwf-footer__contact-item>span:not(.wwf-footer__contact-icon) {
min-inline-size: 0;
overflow-wrap: anywhere;
}
.wwf-footer__contact-item strong {
font-weight: 600;
}
.wwf-footer__contact-icon,
.wwf-footer .nds-footer-icon-row .nds-btn {
--btn-bg: transparent;
--btn-bg-hover: var(--button-background-neutral-hovered);
--btn-color: var(--icon-default);
--btn-border: var(--border-neutral-primary);
--btn-border-hover: var(--border-neutral-primary);
flex: 0 0 auto;
}
.wwf-footer__main {
padding-block: var(--spacing-6xl, 48px) var(--spacing-4xl, 32px);
background: var(--background-neutral-100);
}
.wwf-footer__navigation {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-4xl, 32px);
margin-block-end: var(--spacing-7xl, 64px);
}
.wwf-footer__navigation>.nds-footer-column {
inline-size: 100%;
}
.wwf-footer .nds-footer-heading {
color: var(--text-default);
border-color: var(--border-neutral-primary);
}
.wwf-footer .nds-footer-link,
.wwf-footer .nds-footer-policy a {
color: var(--text-primary-paragraph);
}
.wwf-footer .nds-footer-policy a {
text-decoration: underline;
}
.wwf-footer__tools {
display: flex;
flex-direction: column;
gap: var(--spacing-3xl, 24px);
}
.wwf-footer__bottom {
align-items: flex-end;
color: var(--text-default);
}
.wwf-footer__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md, 8px);
font-size: var(--typo-text-sm-FS);
line-height: var(--typo-text-sm-LH);
text-align: start;
}
@media (max-width: 960px) {
.wwf-footer__navigation {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-block-end: var(--spacing-7xl, 64px);
}
}
@media (max-width: 600px) {
.wwf-footer__updated-inner {
align-items: flex-start;
flex-direction: column;
justify-content: center;
padding-block: var(--spacing-lg, 12px);
}
.wwf-footer__contact-inner {
align-items: flex-start;
flex-direction: column;
gap: var(--spacing-xl, 16px);
padding-block: var(--spacing-2xl, 20px);
}
.wwf-footer__contact-item {
inline-size: 100%;
}
.wwf-footer__navigation {
grid-template-columns: minmax(0, 1fr);
margin-block-end: var(--spacing-6xl, 48px);
}
.wwf-footer__bottom {
align-items: flex-start;
flex-direction: column;
gap: var(--spacing-4xl, 32px);
}
}
}
@layer utilities {
/* Atomic helpers. Highest priority of the project layers. */
}