@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(//fwpn.org.pl/wp-content/themes/fwpn/assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(//fwpn.org.pl/wp-content/themes/fwpn/assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}:root {  --neutral-white: #ffffff;
--neutral-100: #e9ebed;
--neutral-300: #bec2c8;
--neutral-500: #9299a3;
--neutral-600: #757a82;
--neutral-800: #3a3d41;
--neutral-800-footer: #3a3d41;
--neutral-900: #1d1e21;
--neutral-black: #000000; --navy-50: #f1effc;
--navy-100: #e6e3f4;
--navy-200: #a399d3;
--navy-300: #7666bc;
--navy-400: #4833a6;
--navy-500: #1a0090;
--navy-600: #150073; --red-500: #ed1c24;
--red-600: #be161d;
--red-650: #a41419;
--red-700: #8e1116; --color-white: var(--neutral-white);
--color-white-permanent: #ffffff; --color-black: var(--neutral-black);
--color-dark: var(--neutral-800);
--color-dark-bg: var(--neutral-900);
--color-border: #e0e0e0;
--color-hover-bg: #f5f5f5;
--color-gray: var(--neutral-500);
--color-primary: var(--navy-600);
--color-primary-dark: var(--navy-500);
--color-accent: var(--navy-300);
--color-link: #5046e5;
--color-cta: var(--red-600);
--color-cta-hover: #a01218; --color-white-alpha-10: rgba(255, 255, 255, 0.1);
--color-white-alpha-15: rgba(255, 255, 255, 0.15);
--color-white-alpha-20: rgba(255, 255, 255, 0.2);
--color-white-alpha-30: rgba(255, 255, 255, 0.3); --font-family: 'IBM Plex Sans', sans-serif; --corner-l: 40px;
--corner-s: 12px;
--corner-xs: 4px;
--radius-dropdown-trigger: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
--radius-dropdown-panel: var(--corner-s) var(--corner-xs) var(--corner-s) var(--corner-s);
--radius-option-default: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
--radius-option-active: var(--corner-s) var(--corner-xs) var(--corner-s) var(--corner-s); --container-width: 1376px;
--container-padding: 32px; --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12);
--gradient-header: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); --z-navbar: 1000;
--z-mobile-menu: 1001;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
overflow-x: clip;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-family);
display: flex;
flex-direction: column;
min-height: 100dvh;
overflow-x: clip;
}
main {
flex: 1;
} body:not(.home):not(.page-on-front) #main {
position: relative;
overflow: clip;
isolation: isolate;
}
body:not(.home):not(.page-on-front) #main::before,
body:not(.home):not(.page-on-front) #main::after {
content: "";
position: absolute;
pointer-events: none;
z-index: -1;
border-radius: var(--corner-xl, 40px) var(--corner-xl, 40px) var(--corner-xl, 40px) var(--corner-s, 12px);
} body:not(.home):not(.page-on-front) #main::before {
width: 267px;
height: 202px;
background: var(--navy-400, #4833A6);
top: calc(80px + 600px);
left: -192px;
} body:not(.home):not(.page-on-front) #main::after {
width: 496px;
height: 202px;
background: var(--red-650, #A41419);
transform: rotate(90deg);
top: calc(80px + 267px + 670px);
right: -248px;
} body.no-decor-shapes #main::before,
body.no-decor-shapes #main::after {
display: none;
}
@media (max-width: 1300px) {
body:not(.home):not(.page-on-front) #main::before,
body:not(.home):not(.page-on-front) #main::after {
display: none;
}
} .wp-block-columns {
max-width: 900px;
margin: 0 auto;
padding: 32px 0;
color: var(--neutral-black);
}
@media (max-width: 768px) {
.wp-block-columns {
padding: 16px;
flex-direction: column !important;
}
} .wp-block-media-text {
max-width: 900px;
margin: 0 auto;
padding: 0;
color: var(--neutral-black);
gap: 32px;
}
.wp-block-media-text .wp-block-media-text__media img {
border-radius: var(--corner-s);
}
.wp-block-media-text .wp-block-media-text__content {
font-family: var(--font-family);
font-size: 20px;
line-height: 1.4;
padding: 0;
}
.wp-block-media-text .wp-block-media-text__content p {
margin: 0 0 1em;
}
.wp-block-media-text .wp-block-media-text__content a {
color: var(--color-link);
text-decoration: underline;
}
@media (max-width: 768px) {
.wp-block-media-text {
padding: 0 16px;
}
} .wp-block-image {
max-width: 900px;
margin: 32px auto;
}
.wp-block-image img {
border-radius: var(--corner-s);
}
.wp-block-image figcaption {
font-family: var(--font-family);
font-size: 14px;
color: var(--neutral-500);
text-align: center;
margin-top: 8px;
} .separator {
border: none;
border-top: 3px dashed var(--color-accent);
margin: 0;
width: 100%;
} .wp-block-separator.is-style-dashed {
border: none;
border-top: 3px dashed var(--color-accent, #7666bc);
margin: 0;
width: 100%;
opacity: 1;
} html.mode-dark { --neutral-white: #1d1e21;
--neutral-100: #1d1e21;
--neutral-300: #585c62; --neutral-600: #a8adb5;
--neutral-800: #898e95;
--neutral-800-footer: #111113;
--neutral-900: #e9ebed;
--neutral-black: #f1f2f4; --navy-50: #0a1055;
--navy-100: #161b5b;
--navy-200: #2d337c;
--navy-300: #727be4;
--navy-400: #8189e4;
--navy-500: #abb0ed;
--navy-600: #d5d8f6; --red-500: #cb352a;
--red-600: #e5574c;
--red-650: #9c281e;
--red-700: #ec8179; --color-border: #585c62;
--color-hover-bg: #2a2b2e;
--color-link: #8189e4;
--color-cta-hover: #cb352a;
} html.mode-dark body {
background-color: var(--neutral-white);
} html.mode-dark .block-hero {
background: var(--neutral-white);
} html.mode-dark .block-programs__dot {
background-color: rgba(255, 255, 255, 0.3);
} html.mode-dark .block-statistics__value,
html.mode-dark .block-statistics__label,
html.mode-dark .block-news__cta,
html.mode-dark .block-calendar__btn,
html.mode-dark .block-statistics__cta {
color: var(--navy-500);
} html.mode-dark .block-news__cta,
html.mode-dark .block-calendar__btn,
html.mode-dark .block-statistics__cta,
html.mode-dark .block-statistics__card {
border-color: var(--navy-200);
}
html.mode-dark .block-news__cta:hover,
html.mode-dark .block-calendar__btn:hover,
html.mode-dark .block-statistics__cta:hover {
background-color: var(--navy-200);
color: #ffffff;
} html.mode-dark .site-footer {
background-color: var(--neutral-800-footer);
} html.mode-dark #main::before {
background: var(--navy-400);
}
html.mode-dark #main::after {
background: var(--red-650);
}.nav-bar *,
.nav-bar *::before,
.nav-bar *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
} .nav-bar {
position: absolute;
top: 31px;
left: 0;
right: 0;
z-index: var(--z-navbar);
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 0 calc(var(--container-padding) - 1px);
} .nav-bar.is-fixed {
position: fixed;
top: 0;
padding-top: 16px;
} .nav-bar.is-scrolled {
max-width: none;
padding: 0;
} .nav-bar__wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: 12px 32px;
border-radius: 40px 40px 0 40px;
background: var(--neutral-white);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, height 0.3s ease;
} .nav-bar.is-scrolled .nav-bar__wrapper {
border-radius: 0;
padding: 12px 64px;
} .nav-bar__top {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
width: 100%;
height: 70px;
} .nav-bar__logo {
flex-shrink: 0;
width: 202px;
height: 70px;
display: flex;
align-items: center;
overflow: hidden;
}
.nav-bar__logo-link {
display: block;
line-height: 0;
}
.nav-bar__logo-img {
width: 202px;
height: auto;
display: block;
} .nav-bar__logo-img--light {
display: none;
} .nav-bar__scroll-wrap {
position: relative;
flex: 1;
min-width: 0;
} .nav-bar__scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--neutral-white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 2;
transition: background-color 0.2s ease;
}
.nav-bar__scroll-arrow--left {
left: 4px;
}
.nav-bar__scroll-arrow--right {
right: 4px;
}
.nav-bar__scroll-arrow:hover {
background-color: var(--neutral-100, #f5f5f5);
}
.nav-bar__scroll-arrow svg {
width: 16px;
height: 16px;
stroke: var(--color-dark);
}
.nav-bar__scroll-arrow.is-visible {
display: flex;
} .nav-bar__links {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1;
min-width: 0;
list-style: none;
gap: 0;
overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth;
}
.nav-bar__links.is-dragging {
scroll-behavior: auto;
cursor: grabbing;
user-select: none;
} .nav-bar__link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
border-radius: var(--radius-dropdown-trigger);
background-color: transparent;
transition: background-color 0.2s ease;
}
.nav-bar__link > a {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 500;
font-size: 1.25rem;
line-height: 28px;
letter-spacing: 0;
color: var(--color-dark);
text-decoration: none;
white-space: nowrap;
}
.nav-bar__link:hover {
border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
background-color: var(--color-dark);
}
.nav-bar__link:hover > a {
color: var(--color-white-permanent);
} .nav-bar__link.is-active {
border-radius: var(--corner-s, 12px) var(--corner-s, 12px) var(--corner-xs, 4px) var(--corner-s, 12px);
background: var(--navy-500);
}
.nav-bar__link.is-active > a {
color: var(--color-white-permanent);
} .nav-bar__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 200px;
max-height: calc(100vh - 120px);
overflow-y: auto;
background: var(--neutral-white);
padding: 16px 0;
display: flex;
flex-direction: column;
gap: 0;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
z-index: 10;
box-shadow: var(--shadow-dropdown);
scrollbar-width: thin;
}
.nav-bar__dropdown-item {
display: block;
padding: 12px 24px;
font-family: var(--font-family);
font-weight: 400;
font-size: 1.125rem;
line-height: 25.2px;
letter-spacing: 0;
color: var(--color-black);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-bar__dropdown-item:hover {
color: var(--color-primary-dark);
}  .nav-bar__separator,
.nav-bar__submenu-row {
display: none;
} .nav-bar.is-expanded .nav-bar__wrapper {
flex-direction: column;
align-items: stretch;
height: auto;
background: var(--neutral-white);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
position: relative;
} .nav-bar.is-expanded .nav-bar__separator {
display: block;
width: 100%;
height: 1px;
border: none;
border-top: 1px dashed var(--color-border);
margin: 16px 0 0;
} .nav-bar.is-expanded .nav-bar__submenu-row {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
margin-top: 16px;
overflow-x: hidden;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.nav-bar__submenu-row.is-dragging {
scroll-behavior: auto;
cursor: grabbing;
user-select: none;
} .nav-bar__submenu-link {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
cursor: pointer;
}
.nav-bar__submenu-link a {
display: flex;
align-items: center;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 500;
font-size: 1.125rem;
line-height: 25px;
color: var(--color-black);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
.nav-bar__submenu-link:hover,
.nav-bar__submenu-link.is-active {
background-color: var(--color-gray);
border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
}
.nav-bar__submenu-link.is-active {
background: var(--navy-500);
}
.nav-bar__submenu-link:hover a,
.nav-bar__submenu-link.is-active a {
color: var(--color-white-permanent);
} .nav-bar.is-expanded .nav-bar__dropdown {
display: none !important;
} .nav-bar.is-expanded .nav-bar__link.is-expanded-active {
background-color: var(--color-dark);
border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
} .nav-bar.is-expanded .nav-bar__link.is-active {
background: var(--navy-500);
border-radius: var(--corner-s, 12px) var(--corner-s, 12px) var(--corner-xs, 4px) var(--corner-s, 12px);
}
.nav-bar.is-expanded .nav-bar__link.is-active > a {
color: var(--color-white-permanent);
}
.nav-bar.is-expanded .nav-bar__link.is-expanded-active > a {
color: var(--color-white-permanent);
} .nav-bar__controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
flex-shrink: 0;
height: 48px;
} .nav-bar__search {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
flex-shrink: 0;
border-radius: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
transition: background-color 0.2s ease;
}
.nav-bar__search:hover {
background-color: var(--color-dark);
}
.nav-bar__search img {
width: 18px;
height: 18px;
display: block;
} .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
transition: filter 0.3s ease;
} .nav-bar__search:hover img,
.nav-bar__lang:hover img:not(.nav-bar__lang-flag),
.nav-bar__lang.is-open img:not(.nav-bar__lang-flag),
.nav-bar__mode:hover img,
.nav-bar__mode.is-open img,
.nav-bar__link:hover img {
filter: brightness(0) invert(1) !important;
} .nav-bar__search-field {
display: none;
flex: 1;
min-width: 0;
height: 48px;
align-items: center;
gap: 8px;
padding: 0 12px;
background: var(--neutral-white);
border-radius: 4px;
border: 1px solid var(--color-border);
}
.nav-bar.is-search-open .nav-bar__search-field {
display: flex;
}
.nav-bar.is-search-open .nav-bar__links,
.nav-bar.is-search-open .nav-bar__links--fallback,
.nav-bar.is-search-open .nav-bar__scroll-wrap {
display: none;
} .nav-bar.is-search-open .nav-bar__search {
display: none;
}
.nav-bar__search-field-submit {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.nav-bar__search-field-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
filter: none !important;
}
.nav-bar__search-field-input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
background: none;
outline: none;
font-family: var(--font-family);
font-weight: 400;
font-size: 1rem;
line-height: 1.4;
color: var(--color-black);
}
.nav-bar__search-field-input::placeholder {
color: var(--color-gray);
}
.nav-bar__search-field-close {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.nav-bar__search-field-close img {
width: 24px;
height: 24px;
filter: none !important;
transition: opacity 0.2s ease;
}
.nav-bar__search-field-close:hover img {
opacity: 1;
} .nav-bar.is-search-open .nav-bar__search-field-icon,
.nav-bar.is-search-open .nav-bar__search-field-close img {
filter: none !important;
}
.nav-bar.is-search-open .nav-bar__search-field-input {
color: var(--color-black);
} .nav-bar__search--mobile {
display: none;
width: 44px;
height: 44px;
padding: 0;
color: var(--color-dark);
}  .nav-bar__lang,
.nav-bar__mode {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 4px;
cursor: pointer;
position: relative;
user-select: none;
border-radius: var(--radius-dropdown-trigger);
color: var(--color-dark);
} .nav-bar__lang:hover,
.nav-bar__mode:hover,
.nav-bar__lang.is-open,
.nav-bar__mode.is-open {
background-color: var(--color-dark);
border-radius: var(--radius-dropdown-trigger);
color: var(--color-white-permanent);
} .nav-bar__lang-dropdown,
.nav-bar__mode-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--color-dark);
border-radius: var(--radius-dropdown-panel);
display: flex;
padding: 4px;
flex-direction: column;
align-items: center;
gap: 4px;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
z-index: 10;
} .nav-bar__lang.is-open .nav-bar__lang-dropdown,
.nav-bar__mode.is-open .nav-bar__mode-dropdown {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
} .nav-bar__lang {
gap: 4px;
width: 64px;
}
.nav-bar__lang-label {
font-family: var(--font-family);
font-weight: 500;
font-size: 1.25rem;
line-height: 28px;
color: currentColor;
transition: opacity 0.2s ease;
}
.nav-bar__lang.is-open .nav-bar__lang-label {
opacity: 0;
position: absolute;
pointer-events: none;
} .nav-bar__lang-chevron {
width: 24px;
height: 24px;
display: block;
flex-shrink: 0;
}
.nav-bar__lang-chevron--up {
display: none;
}
.nav-bar__lang.is-open .nav-bar__lang-chevron--down {
display: none;
}
.nav-bar__lang.is-open .nav-bar__lang-chevron--up {
display: block;
} .nav-bar__lang-option {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: 4px;
padding: 4px 8px;
border-radius: var(--radius-option-default);
font-family: var(--font-family);
font-weight: 500;
font-size: 1.125rem;
line-height: 25px;
color: var(--color-white-permanent);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease;
} .nav-bar__lang-option:hover,
.nav-bar__mode-option:hover {
border-radius: var(--radius-option-active);
background-color: var(--color-gray);
}
.nav-bar__lang-option.is-active,
.nav-bar__mode-option.is-active {
border-radius: var(--radius-option-active);
background-color: var(--color-primary-dark);
} .nav-bar__lang-flag {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
} .nav-bar__mode {
width: 36px;
}
.nav-bar__mode-icon {
width: 24px;
height: 24px;
display: block;
flex-shrink: 0;
} .nav-bar__mode-icon--chevron {
display: none;
}
.nav-bar__mode.is-open .nav-bar__mode-icon--dots {
display: none;
}
.nav-bar__mode.is-open .nav-bar__mode-icon--chevron {
display: block;
} .nav-bar__mode-dropdown {
min-width: 168px;
width: auto;
gap: 16px;
white-space: nowrap;
}
.nav-bar__mode-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.nav-bar__mode-heading {
font-family: var(--font-family);
font-weight: 700;
font-size: 1.125rem;
line-height: 25px;
color: var(--color-white-permanent);
padding: 4px 8px;
align-self: flex-end;
}
.nav-bar__mode-option {
display: flex;
flex-direction: row;
align-items: center;
align-self: flex-end;
padding: 4px 8px;
background: none;
border: none;
border-radius: var(--radius-option-active);
cursor: pointer;
font-family: var(--font-family);
font-weight: 500;
font-size: 1.125rem;
line-height: 25px;
color: var(--color-white-permanent);
transition: background-color 0.2s ease;
}  .nav-bar__mode-fontsize {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.nav-bar__mode-fontsize-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 32px;
padding: 4px 8px;
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.nav-bar__mode-fontsize-btn:hover {
background-color: var(--color-white-alpha-10);
}
.nav-bar__mode-fontsize-btn img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.nav-bar__mode-fontsize-value {
font-family: var(--font-family);
font-weight: 500;
font-size: 1.125rem;
line-height: 25px;
color: var(--color-white-permanent);
min-width: 50px;
text-align: center;
padding: 4px 8px;
} .nav-bar__hamburger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
color: var(--color-white-permanent);
} .nav-bar__close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
cursor: pointer;
background: none;
border: none;
flex-shrink: 0;
} .nav-bar__mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-primary);
z-index: var(--z-mobile-menu);
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-bar__mobile-menu.is-open {
display: flex;
}
.nav-bar__mobile-menu.is-closing {
display: flex;
pointer-events: none;
opacity: 0.5;
transform: translateY(-100%);
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.nav-bar__mobile-menu.is-closing > * {
visibility: hidden;
} .nav-bar__mobile-menu img:not(.nav-bar__logo-img):not(.nav-bar__mobile-pill-flag) {
filter: brightness(0) invert(1);
} .nav-bar__mobile-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
height: 68px;
flex-shrink: 0;
}
.nav-bar__mobile-top .nav-bar__logo-img {
width: 160px;
height: 39px;
}
.nav-bar__mobile-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.nav-bar__mobile-actions .nav-bar__search {
width: 44px;
height: 44px;
padding: 0;
} .nav-bar__mobile-nav {
flex: 1;
padding: 0 16px;
}
.nav-bar__mobile-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.nav-bar__mobile-item {
border-bottom: 1px solid var(--color-white-permanent);
}
.nav-bar__mobile-link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 44px;
padding: 10px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-family);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4;
color: var(--color-white-permanent);
text-decoration: none;
}
a.nav-bar__mobile-link {
text-decoration: none;
}
.nav-bar__mobile-chevron {
width: 24px;
height: 24px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.nav-bar__mobile-item.is-expanded .nav-bar__mobile-chevron {
transform: rotate(180deg);
} .nav-bar__mobile-sub {
list-style: none;
padding: 0 0 16px 16px;
margin: 0;
display: none;
flex-direction: column;
gap: 0;
}
.nav-bar__mobile-item.is-expanded .nav-bar__mobile-sub {
display: flex;
}
.nav-bar__mobile-sub li a {
display: block;
padding: 8px 0;
font-family: var(--font-family);
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
color: var(--color-white-permanent);
text-decoration: none;
transition: opacity 0.2s ease;
}
.nav-bar__mobile-sub li a:hover {
opacity: 0.75;
} .nav-bar__mobile-options {
padding: 0 16px 24px;
display: flex;
flex-direction: column;
gap: 0;
flex-shrink: 0;
}
.nav-bar__mobile-option {
display: flex;
flex-direction: column;
} .nav-bar__mobile-option-toggle {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 44px;
padding: 10px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.nav-bar__mobile-option-toggle--static {
cursor: default;
}
.nav-bar__mobile-option-label {
font-family: var(--font-family);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4;
color: var(--color-white-permanent);
} .nav-bar__mobile-option.is-expanded .nav-bar__mobile-chevron {
transform: rotate(180deg);
} .nav-bar__mobile-option-content {
display: none;
padding-bottom: 8px;
}
.nav-bar__mobile-option.is-expanded .nav-bar__mobile-option-content {
display: block;
} .nav-bar__mobile-pills {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
min-height: 44px;
} .nav-bar__mobile-pill {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px;
border-radius: var(--corner-s, 12px) 2px var(--corner-s, 12px) var(--corner-s, 12px);
background: transparent;
border: none;
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.4;
color: var(--color-white-permanent);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.nav-bar__mobile-pill.is-active {
background-color: var(--color-accent, #7666BC);
} .nav-bar__mobile-pill-flag {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
} .nav-bar__mobile-font-size {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
margin-left: auto;
}
.nav-bar__mobile-font-size .nav-bar__mobile-pill {
border-radius: var(--corner-s, 12px) var(--corner-s, 12px) 2px var(--corner-s, 12px);
padding: 4px 8px;
min-width: 40px;
min-height: 32px;
}
.nav-bar__mobile-font-value {
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.4;
color: var(--color-white-permanent);
min-width: 48px;
text-align: center;
} @media (max-width: 768px) { .nav-bar__wrapper {
height: 68px;
padding: 12px 16px;
background: var(--neutral-white);
border-radius: 0;
box-shadow: none;
}
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
max-width: none;
padding: 0;
border-bottom: 1.5px solid var(--neutral-200, #D3D6DA);
background: var(--neutral-white, #FFF);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
} .nav-bar.is-fixed,
.nav-bar.is-scrolled {
position: fixed;
top: 0;
left: 0;
right: 0;
max-width: none;
padding: 0;
border-bottom: 1.5px solid var(--neutral-200, #D3D6DA);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.nav-bar__wrapper {
height: 68px;
padding: 12px 16px;
border-radius: 0;
box-shadow: none;
} .nav-bar__logo {
width: 160px;
height: 39px;
}
.nav-bar__logo-img {
width: 160px;
height: 39px;
} .nav-bar__logo-img--light {
display: none;
}
.nav-bar__logo-img--dark {
display: block;
} .nav-bar__links,
.nav-bar__links--fallback,
.nav-bar__controls,
.nav-bar__separator,
.nav-bar__submenu-row {
display: none !important;
}
.nav-bar__search-field {
display: none !important;
} .nav-bar.is-search-open .nav-bar__search-field {
display: flex !important;
flex: 1;
min-width: 0;
height: 48px;
align-items: center;
gap: 0;
padding: 0 4px 0 0;
background: var(--neutral-white);
border: 1px solid var(--neutral-200, #D3D6DA);
border-radius: 4px;
}
.nav-bar.is-search-open .nav-bar__search-field-icon {
width: 24px;
height: 24px;
margin: 0 12px;
filter: none !important;
}
.nav-bar.is-search-open .nav-bar__search-field-input {
font-size: 0.875rem;
color: var(--color-dark);
}
.nav-bar.is-search-open .nav-bar__search-field-close {
width: 48px;
height: 48px;
flex-shrink: 0;
}
.nav-bar.is-search-open .nav-bar__search-field-close img {
filter: none !important;
}
.nav-bar.is-search-open .nav-bar__logo,
.nav-bar.is-search-open .nav-bar__search--mobile,
.nav-bar.is-search-open .nav-bar__hamburger {
display: none !important;
} .nav-bar.is-expanded .nav-bar__wrapper {
flex-direction: row;
height: 68px;
} .nav-bar__top {
height: auto;
align-items: center;
gap: 0;
} .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
filter: none;
} .nav-bar__search--mobile {
display: flex;
margin-left: auto;
}
.nav-bar__hamburger {
display: flex;
color: var(--color-dark);
margin-left: 8px;
} body.nav-is-open {
overflow: hidden;
}
} body:not(.home) .nav-bar {
position: fixed;
top: 0;
max-width: none;
padding: 0;
}
body:not(.home) .nav-bar .nav-bar__wrapper {
border-radius: 0;
padding: 12px 64px;
} body:not(.home) #main {
padding-top: 80px;
}
@media (max-width: 768px) {
body:not(.home) #main {
padding-top: 68px;
}
body:not(.home) .nav-bar .nav-bar__wrapper {
padding: 12px 16px;
}
}  html.mode-dark .nav-bar__link > a {
color: var(--neutral-black);
} html.mode-dark .nav-bar__lang,
html.mode-dark .nav-bar__mode {
color: var(--neutral-black);
} html.mode-dark .nav-bar__submenu-link a {
color: var(--neutral-black);
} html.mode-dark .nav-bar.is-search-open .nav-bar__lang,
html.mode-dark .nav-bar.is-search-open .nav-bar__mode {
color: var(--neutral-black);
}
html.mode-dark .nav-bar.is-search-open .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
filter: brightness(0) invert(1);
}
html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-icon,
html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-close img {
filter: none !important;
}
html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-input {
color: var(--neutral-black);
}
html.mode-dark .nav-bar.is-search-open .nav-bar__search-field-input::placeholder {
color: var(--neutral-600);
}
html.mode-dark .nav-bar.is-search-open .nav-bar__logo-img--dark {
display: none;
}
html.mode-dark .nav-bar.is-search-open .nav-bar__logo-img--light {
display: block;
} html.mode-dark .nav-bar__link:hover > a,
html.mode-dark .nav-bar__link.is-expanded-active > a {
color: var(--neutral-white);
} html.mode-dark .nav-bar__link.is-active > a {
color: var(--color-white-permanent);
} html.mode-dark .nav-bar__lang:hover,
html.mode-dark .nav-bar__lang.is-open,
html.mode-dark .nav-bar__mode:hover,
html.mode-dark .nav-bar__mode.is-open {
color: var(--neutral-white);
} html.mode-dark .nav-bar__link:hover {
background-color: var(--color-dark);
}
html.mode-dark .nav-bar__link.is-active,
html.mode-dark .nav-bar__link.is-active:hover {
background: var(--navy-500);
} html.mode-dark .nav-bar__search:hover {
background-color: var(--color-dark);
} html.mode-dark .nav-bar__submenu-link:hover a,
html.mode-dark .nav-bar__submenu-link.is-active a {
color: var(--neutral-white);
} html.mode-dark .nav-bar__submenu-link:hover,
html.mode-dark .nav-bar__submenu-link.is-active {
background-color: var(--color-dark);
} html.mode-dark .nav-bar__search:hover img,
html.mode-dark .nav-bar__lang:hover img:not(.nav-bar__lang-flag),
html.mode-dark .nav-bar__lang.is-open img:not(.nav-bar__lang-flag),
html.mode-dark .nav-bar__mode:hover img,
html.mode-dark .nav-bar__mode.is-open img,
html.mode-dark .nav-bar__link:hover img {
filter: none !important;
} html.mode-dark .nav-bar__logo-img--dark {
display: none;
}
html.mode-dark .nav-bar__logo-img--light {
display: block;
} html.mode-dark .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
filter: brightness(0) invert(1);
} @media (max-width: 768px) {
html.mode-dark .nav-bar__wrapper img:not(.nav-bar__lang-flag):not(.nav-bar__logo-img):not(.nav-bar__logo-img--light):not(.nav-bar__logo-img--dark) {
filter: brightness(0) invert(1);
}
html.mode-dark .nav-bar__hamburger {
color: var(--neutral-black);
}
html.mode-dark .nav-bar__logo-img--dark {
display: none;
}
html.mode-dark .nav-bar__logo-img--light {
display: block;
}
} .nav-bar__links--fallback {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1;
}
.nav-bar__links--fallback a {
font-family: var(--font-family);
font-weight: 500;
font-size: 1.25rem;
line-height: 28px;
color: var(--color-white-permanent);
text-decoration: none;
padding: 4px 24px;
}.site-footer {
position: relative;
z-index: 1;
background-color: var(--neutral-800-footer);
padding: 104px var(--container-padding) 72px;
width: 100%;
box-sizing: border-box;
} .site-footer__wrapper {
display: flex;
flex-direction: row;
gap: 32px;
max-width: var(--container-width);
margin: 0 auto;
align-items: flex-start;
} .site-footer__col {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
} .site-footer__logo {
display: block;
line-height: 0;
flex-shrink: 0;
}
.site-footer__logo img {
width: 203px;
height: 70px;
display: block;
} .site-footer__heading {
font-family: var(--font-family);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: 0;
color: var(--color-white-permanent);
margin: 0;
text-decoration: none;
display: block;
}
a.site-footer__heading:hover {
opacity: 0.85;
}
.site-footer__heading--padded {
padding: 0 12px;
} .site-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
} .site-footer__item,
.site-footer__list .menu-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
min-height: 32px;
}
.site-footer__item a,
.site-footer__item > span,
.site-footer__list .menu-item a {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 1.125rem;
line-height: 1.4;
letter-spacing: 0;
color: var(--color-white-permanent);
text-decoration: none;
padding: 4px 12px;
border-radius: 12px;
transition: background 0.2s ease;
}
.site-footer__item a:hover,
.site-footer__list .menu-item a:hover {
background: #1D1E21;
} .site-footer__item--text {
padding: 4px 12px; }
.site-footer__item--text a {
color: var(--color-white-permanent);
}
.site-footer__item--icon {
padding: 0;
}
.site-footer__item--icon > span,
.site-footer__item--icon a {
margin-left: -12px;
}
.site-footer__item--social {
padding: 0;
}
.site-footer__item--social a {
padding-left: 12px;
} .site-footer__icon {
width: 24px;
height: 24px;
flex-shrink: 0;
display: block;
filter: brightness(0) invert(1);
} @media (max-width: 768px) {
.site-footer {
padding: 56px 16px 48px;
}
.site-footer__wrapper {
flex-direction: column;
gap: 32px;
}
.site-footer__col {
gap: 16px;
}
.site-footer__logo img {
width: 193px;
height: 47px;
}
.site-footer__heading {
font-size: 1.25rem;
line-height: 24px;
}
.site-footer__heading--padded {
padding: 0;
}
.site-footer__item a,
.site-footer__item > span,
.site-footer__list .menu-item a {
font-size: 1rem;
line-height: 22.4px;
padding-left: 0;
margin-left: 0;
}
.site-footer__item--text,
.site-footer__item--social {
padding: 0;
}
}