@charset "UTF-8";

*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed; -moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
img,
video,
svg {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}
picture {
display: contents;
}
input,
button,
textarea,
select,
table {
font-family: inherit;
font-size: inherit;
color: inherit;
text-transform: inherit;
letter-spacing: inherit;
}
[role=list],
[role=listbox] {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
a {
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
}
dialog {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
max-width: none;
max-height: none;
border: none;
background: none;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@font-face {
font-family: "Averta Std CY";
src: url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-Bold.woff2) format("woff2"), url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-Bold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Radio Grotesk";
src: url(//traduki.eu/wp-content/themes/traduki/css/fonts/RadioGrotesk-Regular.woff2) format("woff2"), url(//traduki.eu/wp-content/themes/traduki/css/fonts/RadioGrotesk-Regular.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Averta Std CY";
src: url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-RegularItalic.woff2) format("woff2"), url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-RegularItalic.woff) format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Averta Std CY";
src: url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-Regular.woff2) format("woff2"), url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-Regular.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Averta Std CY";
src: url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-BoldItalic.woff2) format("woff2"), url(//traduki.eu/wp-content/themes/traduki/css/fonts/AvertaStdCY-BoldItalic.woff) format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
:root {
--size-1: 0.273rem;
--size-2: 0.319rem;
--size-3: 0.374rem;
--size-4: 0.439rem;
--size-5: 0.515rem;
--size-6: 0.604rem;
--size-7: 0.709rem;
--size-8: 0.833rem;
--size-9: 0.978rem;
--size-10: 1.15rem;
--size-11: 1.353rem;
--size-12: 1.591rem;
--size-13: 1.873rem;
--size-14: 2.206rem;
--size-15: 2.599rem;
--size-16: 3.064rem;
--size-17: 3.613rem;
--size-18: 4.262rem;
--size-19: 5.031rem;
--size-20: 5.94rem;
}
@supports (width: min(10vw, 10px)) {
:root {
--size-1: max(0.313rem, min(0.337rem + -0.119vw, 0.233rem));
--size-2: max(0.36rem, min(0.384rem + -0.12vw, 0.279rem));
--size-3: max(0.414rem, min(0.437rem + -0.117vw, 0.335rem));
--size-4: max(0.476rem, min(0.498rem + -0.11vw, 0.402rem));
--size-5: max(0.547rem, min(0.566rem + -0.096vw, 0.482rem));
--size-6: max(0.629rem, min(0.644rem + -0.074vw, 0.579rem));
--size-7: max(0.723rem, min(0.732rem + -0.043vw, 0.694rem));
--size-8: max(0.832rem, min(0.832rem + 0.001vw, 0.833rem));
--size-9: max(0.957rem, min(0.944rem + 0.064vw, 1rem));
--size-10: max(1.1rem, min(1.07rem + 0.148vw, 1.2rem));
--size-11: max(1.265rem, min(1.213rem + 0.259vw, 1.44rem));
--size-12: max(1.455rem, min(1.374rem + 0.404vw, 1.728rem));
--size-13: max(1.673rem, min(1.554rem + 0.594vw, 2.074rem));
--size-14: max(1.924rem, min(1.757rem + 0.836vw, 2.488rem));
--size-15: max(2.212rem, min(1.983rem + 1.147vw, 2.986rem));
--size-16: max(2.544rem, min(2.236rem + 1.539vw, 3.583rem));
--size-17: max(2.926rem, min(2.519rem + 2.036vw, 4.3rem));
--size-18: max(3.365rem, min(2.833rem + 2.659vw, 5.16rem));
--size-19: max(3.87rem, min(3.182rem + 3.44vw, 6.192rem));
--size-20: max(4.45rem, min(3.567rem + 4.415vw, 7.43rem));
}
}
:root {
background-color: #fff;
}
html {
scrollbar-gutter: stable;
}
.no-scroll {
overflow: hidden;
scrollbar-gutter: auto;
padding-right: var(--scrollbar-width, 0);
}
:root {
font-family: "Averta Std CY", sans-serif;
line-height: 1.25;
color: #4c597c;
}
body {
font-size: var(--size-10);
}
p {
max-width: 65ch;
}
p {
line-height: 1.75;
}
h1, h2, h3, h4, h5 {
max-width: 25ch;
}
h1, h2, h3 {
font-family: "Radio Grotesk", sans-serif;
font-weight: normal;
word-spacing: -0.125em;
line-height: 1.15;
}
h1 {
font-size: var(--size-18);
}
h2 {
font-size: var(--size-15);
}
@keyframes from-right {
from {
transform: translateX(100%);
}
}
@keyframes to-right {
to {
transform: translateX(100%);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes visibility-in {
from {
visibility: hidden;
}
}
@keyframes visibility-out {
to {
visibility: hidden;
}
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
main {
min-width: 100%;
max-width: 100%;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.cookie-bar {
background: #3d3a61;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--size-12) var(--size-15);
color: #fff;
font-size: var(--size-9);
display: flex;
row-gap: var(--size-6);
column-gap: var(--size-10);
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
z-index: 100;
opacity: 0;
visibility: hidden;
animation: cookie-bar--fade-in 0.3s ease 3s forwards;
}
.cookie-bar[data-fade-out] {
animation: cookie-bar--fade-out 0.3s ease forwards;
}
@keyframes cookie-bar--fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes cookie-bar--fade-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.cookie-bar--button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
}
.cookie-bar--button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.cookie-bar--button:hover, .cookie-bar--button:focus {
--_button--hover--scale: 150%;
}
.cookie-bar--close-button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--background: transparent;
--_button--color: var(--button--color, #d64224);
outline-offset: calc(-1 * var(--_button--border-width));
outline: var(--_button--border-width) solid currentColor;
--button--color: #fff;
}
.cookie-bar--close-button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.cookie-bar--close-button:hover, .cookie-bar--close-button:focus {
--_button--hover--scale: 150%;
}
.cookie-bar--close-button:before {
background-color: currentColor;
opacity: 0.25;
}
.cookie-bar--link {
border-bottom: 2px solid #fff;
text-decoration: none;
font-weight: bold;
padding-block: var(--size-2);
}
.language-switch {
--_language-switch--background: var(--language-switch--background, #d64224);
--_language-switch--color: var(--language-switch--color, #fff);
display: grid;
width: max-content;
max-width: 100%;
grid-template-columns: repeat(2, auto);
position: relative;
z-index: 0;
}
.language-switch > * {
padding: var(--size-3);
aspect-ratio: 1;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
display: flex;
align-items: center;
}
.language-switch:not(:hover)[data-current-language=DE] > [data-language=DE], .language-switch:not(:hover)[data-current-language=EN] > [data-language=EN] {
color: var(--_language-switch--color);
}
.language-switch > :last-child {
position: relative;
}
.language-switch > :last-child:before {
content: "";
position: absolute;
inset: 0;
background: var(--_language-switch--background);
border-radius: 50%;
z-index: -1;
transform: translateX(var(--_language-switch--translate, 0));
transition: transform 0.3s ease;
}
.language-switch[data-current-language=DE] > :last-child {
--_language-switch--translate: -100%;
}
.language-switch > [data-language=DE]:hover {
color: var(--_language-switch--color);
}
.language-switch > [data-language=DE]:hover + :last-child {
--_language-switch--translate: -100%;
}
.language-switch > [data-language=EN]:hover {
color: var(--_language-switch--color);
--_language-switch--translate: 0%;
}
.page-bracket {
position: fixed;
}
.the-content {
box-sizing: content-box;
max-width: 65ch;
padding: var(--size-10) var(--size-12);
padding-bottom: var(--size-18);
margin-left: auto;
margin-right: auto;
}
.the-content > * {
margin-top: 0;
margin-bottom: 0;
}
.the-content > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.the-content h2 {
--stack--space: var(--size-13);
font-size: var(--size-12);
}
.the-content ul {
padding-left: var(--size-12);
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
scale: var(--icon--size, 1.25);
flex-shrink: 0;
}
.button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
}
.button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.button:hover, .button:focus {
--_button--hover--scale: 150%;
}
.button--outline {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--background: transparent;
--_button--color: var(--button--color, #d64224);
outline-offset: calc(-1 * var(--_button--border-width));
outline: var(--_button--border-width) solid currentColor;
}
.button--outline:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.button--outline:hover, .button--outline:focus {
--_button--hover--scale: 150%;
}
.button--outline:before {
background-color: currentColor;
opacity: 0.25;
}
.button--plain {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
font-style: normal;
line-height: 1.5;
--_button--background: transparent;
--_button--color: var(--button--color, #d64224);
--_button--font-size: var(--button--font-size, var(--size-10));
--_button--padding: var(--button--padding, var(--size-6));
--_button--gap: var(--button--gap, var(--size-10));
--_button--radius: var(--button--radius, 0);
--text-opacity: 0%;
--clone-opacity: 100%;
--text-pos: 0em;
--clone-pos: 1em;
transition: text-shadow 0.35s ease;
text-shadow: 0px var(--text-pos) 0px color-mix(in hsl, var(--_button--color), transparent var(--text-opacity)), 0px var(--clone-pos) 0px color-mix(in hsl, var(--_button--color), transparent var(--clone-opacity));
color: transparent;
text-align: left;
}
.button--plain:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.button--plain:hover, .button--plain:focus {
--_button--hover--scale: 150%;
}
.button--plain:hover, .button--plain:focus { --text-opacity: 100%;
--clone-opacity: 0%;
--text-pos: -1em;
--clone-pos: 0em;
}
.social-links__component {
--_social-links--padding: var(--size-6,var(--social-links--padding));
display: flex;
flex-wrap: wrap;
font-size: var(--size-10);
}
.social-links__component a {
display: flex;
padding: var(--_social-links--padding);
}
.social-links__component li {
display: contents;
}
.site-head {
--_site-head--background: var(--site-head--background, #fff);
--_site-head--color: var(--site-head--color, #4c597c);
--_site-head--accent: var(--site-head--accent, #d64224);
--language-switch--background: var(--_site-head--accent);
font-size: var(--size-9);
background: var(--_site-head--background);
color: var(--_site-head--color);
padding: var(--size-11) var(--size-14);
}
.site-head > * {
margin-top: 0;
margin-bottom: 0;
}
.site-head > * + * {
margin-top: var(--size-2);
}
@media (max-width: 700px) {
.site-head {
padding: var(--size-11);
}
.site-head .social-links__component {
display: none;
}
}
.site-header--bottom {
position: relative;
}
.site-head--logo {
height: auto;
max-height: 60px;
flex-shrink: 0;
width: max(8.4375rem, min(6.771rem + 8.333vw, 14.063rem));
}
.site-head--top {
display: flex;
justify-content: space-between;
}
.site-head--top-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: var(--size-5);
}
.option-button--new-books {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--button--font-size: var(--size-9);
--button--padding: var(--size-4) var(--size-11);
--button--background: var(--_site-head--color);
--button--color: var(--_site-head--background);
}
.option-button--new-books:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.option-button--new-books:hover, .option-button--new-books:focus {
--_button--hover--scale: 150%;
}
.option-button--new-books:before {
display: none;
}
@media (max-width: 1140px) {
.option-button--new-books {
display: none;
}
}
@media (max-width: 510px) {
.site-head .search-input__component {
display: none;
}
}
.main-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
list-style: none;
column-gap: var(--size-9);
font-size: var(--size-10);
}
.main-menu a {
text-decoration: none;
font-weight: bold;
padding-bottom: var(--size-3);
position: relative;
}
.main-menu a:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.15em;
background: #d64224;
z-index: 0;
opacity: 0;
transform: translateY(var(--size-9));
transition: transform 0.3s ease, opacity 0.3s ease;
}
.main-menu a:hover:before, .main-menu a[aria-current=page]:before {
transform: translateY(0);
opacity: 1;
}
.main-menu .current-menu-ancestor > a:before {
transform: translateY(0);
opacity: 1;
}
.main-menu .sub-menu {
position: absolute;
top: calc(100% + var(--size-3));
list-style: none;
right: 0;
z-index: 100;
padding: var(--size-10);
width: max-content;
border-radius: var(--size-6);
display: none;
background: #fff;
color: #4c597c;
}
.main-menu .sub-menu > * {
margin-top: 0;
margin-bottom: 0;
}
.main-menu .sub-menu > * + * {
margin-top: var(--size-3);
}
.main-menu .sub-menu:before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: var(--size-5);
}
.main-menu .sub-menu a {
max-width: 240px;
display: inline-block;
}
.main-menu a:hover + .sub-menu, .main-menu .sub-menu:hover {
display: block;
}
.main-menu > .menu-item-has-children {
position: relative;
display: flex;
gap: var(--size-3);
}
.main-menu > .menu-item-has-children > a:after {
width: calc(1em + var(--size-3));
content: "";
position: absolute;
left: 100%;
height: 100%;
z-index: 1;
}
.main-menu > .menu-item-has-children:after {
content: "";
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476 12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
-webkit-mask-size: 1em;
background: currentColor;
width: 1em;
height: 1em;
transform: translateY(15%) scale(0.9);
}
@media (max-width: 1040px) {
.main-menu {
position: absolute;
top: calc(100% + var(--size-3));
list-style: none;
right: 0;
z-index: 100;
background: #fff;
color: #4c597c;
padding: var(--size-12);
width: max-content;
border-radius: var(--size-6);
display: none;
}
.main-menu > * {
margin-top: 0;
margin-bottom: 0;
}
.main-menu > * + * {
margin-top: var(--size-3);
}
.main-menu a {
color: #4c597c;
}
.main-menu .sub-menu {
position: static;
display: block;
background: none;
padding-bottom: 0;
padding-right: 0;
}
.main-menu > .menu-item-has-children {
display: block;
}
.main-menu > .menu-item-has-children::after {
display: none;
}
.menu-open .main-menu {
display: block;
}
.menu-toggle {
display: block;
}
}
.menu-toggle {
padding: var(--size-3);
}
.menu-toggle svg {
width: var(--size-13);
}
.menu-toggle .line {
fill: none;
stroke: currentColor;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle .line,
.menu-toggle .line1,
.menu-toggle .line2,
.menu-toggle .line3 {
stroke-width: 8;
}
.menu-toggle .line1 {
stroke-dasharray: 60 207;
}
.menu-toggle .line2 {
stroke-dasharray: 60 60;
}
.menu-toggle .line3 {
stroke-dasharray: 60 207;
}
.menu-open .menu-toggle .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}
.menu-open .menu-toggle .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
}
.menu-open .menu-toggle .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}
.footer {
background: #35393a;
color: #fff;
font-size: var(--size-9);
text-align: center;
}
.footer a {
text-decoration: none;
}
.footer ul {
list-style: none;
}
.footer .social-links__component {
justify-content: center;
}
.footer--heading {
font-weight: bold;
}
.footer address {
font-style: normal;
}
.footer--sign-up {
display: flex;
flex-wrap: wrap;
column-gap: var(--size-10);
row-gap: var(--size-6);
align-items: center;
justify-content: center;
font-weight: bold;
}
.footer--sign-up .option-button--sign-up {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--background: transparent;
--_button--color: var(--button--color, #d64224);
outline-offset: calc(-1 * var(--_button--border-width));
outline: var(--_button--border-width) solid currentColor;
--button--color: currentColor;
--button--font-size: var(--size-8);
}
.footer--sign-up .option-button--sign-up:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.footer--sign-up .option-button--sign-up:hover, .footer--sign-up .option-button--sign-up:focus {
--_button--hover--scale: 150%;
}
.footer--sign-up .option-button--sign-up:before {
background-color: currentColor;
opacity: 0.25;
}
.footer--wrapper {
margin-left: auto;
margin-right: auto;
max-width: 1600px;
padding: var(--size-14) var(--size-12);
}
.footer--wrapper > * {
margin-top: 0;
margin-bottom: 0;
}
.footer--wrapper > * + * {
margin-top: var(--size-12);
}
.footer--columns {
--_switcher--threshold: var(--switcher--threshold, 800px);
display: flex;
flex-wrap: wrap;
gap: var(--size-11);
text-align: left;
font-size: var(--size-8);
}
.footer--columns > * {
flex-grow: 1;
flex-basis: calc((var(--_switcher--threshold) - 100%) * 999);
min-width: 0;
}
.footer--columns > * > * {
margin-top: 0;
margin-bottom: 0;
}
.footer--columns > * > * + * {
margin-top: var(--size-10);
}
.footer--copyright p {
max-width: 100%;
}
.footer .menu, .footer .sub-menu, .footer .menu-item {
font-weight: bold;
}
.footer .menu > *, .footer .sub-menu > *, .footer .menu-item > * {
margin-top: 0;
margin-bottom: 0;
}
.footer .menu > * + *, .footer .sub-menu > * + *, .footer .menu-item > * + * {
margin-top: var(--size-5);
}
.footer .sub-menu {
padding-left: var(--size-10);
}
.scroll-top {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--font-size: var(--button--font-size, var(--size-10));
--_button--padding: var(--button--padding, var(--size-10));
aspect-ratio: 1;
position: fixed;
bottom: var(--size-15);
right: var(--size-15);
visibility: hidden;
z-index: 11;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
}
.scroll-top:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.scroll-top:hover, .scroll-top:focus {
--_button--hover--scale: 150%;
}
.scroll-top[data-active] {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 0.3s;
}
.scroll-top--label {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.cookie-bar {
background: #3d3a61;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--size-12) var(--size-15);
color: #fff;
font-size: var(--size-9);
display: flex;
row-gap: var(--size-6);
column-gap: var(--size-10);
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
z-index: 100;
opacity: 0;
visibility: hidden;
animation: cookie-bar--fade-in 0.3s ease 3s forwards;
}
.cookie-bar[data-fade-out] {
animation: cookie-bar--fade-out 0.3s ease forwards;
}
@keyframes cookie-bar--fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes cookie-bar--fade-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.cookie-bar--button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
}
.cookie-bar--button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.cookie-bar--button:hover, .cookie-bar--button:focus {
--_button--hover--scale: 150%;
}
.cookie-bar--close-button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--background: transparent;
--_button--color: var(--button--color, #d64224);
outline-offset: calc(-1 * var(--_button--border-width));
outline: var(--_button--border-width) solid currentColor;
--button--color: #fff;
}
.cookie-bar--close-button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.cookie-bar--close-button:hover, .cookie-bar--close-button:focus {
--_button--hover--scale: 150%;
}
.cookie-bar--close-button:before {
background-color: currentColor;
opacity: 0.25;
}
.cookie-bar--link {
border-bottom: 2px solid #fff;
text-decoration: none;
font-weight: bold;
padding-block: var(--size-2);
}
.show-more-button--component .show-less {
display: none;
}
.show-more-button--component[aria-expanded=true] .show-more {
display: none;
}
.show-more-button--component[aria-expanded=true] .show-less {
display: block;
}
.close-dialog-button__component {
display: contents;
}
.close-dialog-button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
border-radius: 8px;
--button--padding: var(--size-8);
font-size: var(--size-12);
flex-shrink: 0;
}
.close-dialog-button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.close-dialog-button:hover, .close-dialog-button:focus {
--_button--hover--scale: 150%;
}
.close-dialog-overlay__component {
display: contents;
--_close-dialog-overlay--color: var(--close-dialog-overlay--color, rgba(14, 14, 22, 0.85));
}
.close-dialog-overlay {
position: fixed;
width: 100%;
height: 100%;
background: var(--_close-dialog-overlay--color);
backdrop-filter: blur(10px);
z-index: -1;
}
.video-dialog--component {
--_video-dialog--backdrop-color: var(--video-dialog--backdrop-color, rgba(14, 14, 22, 0.85));
--_video-dialog--transition-duration: 0.3s;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
place-items: center;
transition: overlay var(--_video-dialog--transition-duration) allow-discrete, display var(--_video-dialog--transition-duration) allow-discrete;
}
.video-dialog--component .video__component {
display: contents;
}
.video-dialog--component[open] {
display: grid;
}
.video-dialog--component[open] .close-dialog-overlay {
animation: fade-in var(--_video-dialog--transition-duration) forwards;
}
.video-dialog--component[open] .video-dialog--body {
animation: fade-in var(--_video-dialog--transition-duration) forwards, video-dialog--grow-in var(--_video-dialog--transition-duration) forwards;
}
.video-dialog--component .close-dialog-button {
position: absolute;
z-index: 10;
transform: translate(50%, -50%);
right: 0;
}
.video-dialog--component:not([open]) .close-dialog-overlay {
animation: fade-out var(--_video-dialog--transition-duration) forwards;
}
.video-dialog--component:not([open]) .video-dialog--body {
animation: fade-out var(--_video-dialog--transition-duration) forwards, video-dialog--shrink-out var(--_video-dialog--transition-duration) forwards;
}
@keyframes video-dialog--grow-in {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes video-dialog--shrink-out {
0% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}
.video-dialog--body {
display: grid;
height: max-content;
width: max-content;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
max-width: calc(100% - 50px);
max-height: calc(100% - 50px);
position: relative;
}
.video-dialog--body lite-youtube {
max-width: 100%;
width: 1140px;
max-height: 100%;
}
.video-dialog--body lite-youtube[data-short] {
max-width: 100%;
width: 50vh;
}
.hero-simple--title {
--_underlined-heading--color: var(--underlined-heading--color, #d64224);
--_underlined-heading--align: var(--underlined-heading--align, center);
display: flex;
flex-direction: column;
align-items: var(--_underlined-heading--align);
gap: var(--size-5);
}
.hero-simple--title:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
@media (max-width: 768px) {
.hero-simple--title {
font-size: var(--size-16);
}
}
.hero-simple--hgroup {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--size-15) var(--size-12);
box-sizing: content-box;
max-width: 65ch;
margin-left: auto;
margin-right: auto;
}
.hero-simple--hgroup p:first-child {
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
font-style: normal;
line-height: 1.5;
opacity: 0.85;
}
.hero-simple--hgroup p:last-child {
margin-top: var(--size-12);
font-size: var(--size-11);
}
.gallery-download-buttons--component {
--_gallery-download-buttons--gap: var(--gallery-downloads-button--gap, var(--size-6));
display: flex;
flex-wrap: wrap;
gap: var(--_gallery-download-buttons--gap);
}
.gallery-download-buttons--component > * {
min-width: fit-content;
}
.gallery-download-buttons--component [data-button-variant=outline] {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--background: transparent;
--_button--color: var(--button--color, #d64224);
outline-offset: calc(-1 * var(--_button--border-width));
outline: var(--_button--border-width) solid currentColor;
}
.gallery-download-buttons--component [data-button-variant=outline]:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.gallery-download-buttons--component [data-button-variant=outline]:hover, .gallery-download-buttons--component [data-button-variant=outline]:focus {
--_button--hover--scale: 150%;
}
.gallery-download-buttons--component [data-button-variant=outline]:before {
background-color: currentColor;
opacity: 0.25;
}
.gallery-download-buttons--image-link,
.gallery-download-buttons--caption-link {
min-height: 100%;
}
.gallery-download-buttons--image-link:not([data-button-variant]),
.gallery-download-buttons--caption-link:not([data-button-variant]) {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
}
.gallery-download-buttons--image-link:not([data-button-variant]):before,
.gallery-download-buttons--caption-link:not([data-button-variant]):before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.gallery-download-buttons--image-link:not([data-button-variant]):hover, .gallery-download-buttons--image-link:not([data-button-variant]):focus,
.gallery-download-buttons--caption-link:not([data-button-variant]):hover,
.gallery-download-buttons--caption-link:not([data-button-variant]):focus {
--_button--hover--scale: 150%;
}
.gallery-dialog--downloads--item:not(.active),
.gallery-dialog--images--figure:not(.active) {
display: none;
}
.gallery-dialog--component {
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
animation: fade-in 0.3s;
}
.gallery-dialog--component :focus-visible {
outline: #d64224 dashed 2px;
outline-offset: 5px;
}
.gallery-dialog--content {
height: 100%;
display: grid;
gap: var(--size-12);
}
@media (orientation: portrait) {
.gallery-dialog--content {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
padding-bottom: var(--size-12);
}
}
@media (orientation: landscape) {
.gallery-dialog--content {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr);
padding-left: var(--size-12);
padding-right: var(--size-12);
}
}
.gallery-dialog--main-wrapper {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--size-12);
max-height: 100%;
padding-top: var(--size-12);
}
@media (orientation: portrait) {
.gallery-dialog--main-wrapper {
padding-left: var(--size-12);
padding-right: var(--size-12);
}
}
@media (orientation: landscape) {
.gallery-dialog--main-wrapper {
padding-bottom: var(--size-12);
}
}
.gallery-dialog--header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--size-10);
}
.gallery-dialog--downloads {
--button--radius: 10px;
--button--font-size: var(--size-8);
--button--padding: var(--size-6) var(--size-8);
}
.gallery-dialog--main {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr);
align-items: center;
gap: var(--size-10);
}
@media (max-width: 768px) {
.gallery-dialog--main {
grid-template-columns: minmax(0, 1fr);
}
}
[data-gallery-dialog-previous],
[data-gallery-dialog-next] {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--font-size: var(--button--font-size, var(--size-10));
--_button--padding: var(--button--padding, var(--size-10));
aspect-ratio: 1;
--button--padding: var(--size-7);
--button--radius: 10px;
--button--font-size: var(--size-11);
}
[data-gallery-dialog-previous]:before,
[data-gallery-dialog-next]:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
[data-gallery-dialog-previous]:hover, [data-gallery-dialog-previous]:focus,
[data-gallery-dialog-next]:hover,
[data-gallery-dialog-next]:focus {
--_button--hover--scale: 150%;
}
@media (max-width: 768px) {
[data-gallery-dialog-previous],
[data-gallery-dialog-next] {
display: none;
}
}
.gallery-dialog--images {
height: 100%;
display: grid;
grid-template-rows: minmax(0, 1fr);
}
.gallery-dialog--images--figure {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: var(--size-6);
height: 100%;
place-items: center;
text-align: center;
}
.gallery-dialog--images--figure.active {
animation: fade-in 0.3s;
}
.gallery-dialog--images--figure source {
position: absolute;
}
.gallery-dialog--images--figure img {
width: auto;
max-height: 100%;
}
.gallery-dialog--images--caption {
font-size: var(--size-9);
font-weight: bold;
}
@media (max-width: 500px) {
.gallery-dialog--images--caption {
font-size: var(--size-8);
}
}
@media (max-height: 500px) {
.gallery-dialog--images--caption {
font-size: var(--size-8);
}
}
.gallery-dialog--previews {
display: flex;
gap: var(--size-6);
scrollbar-width: none; scroll-snap-type: both mandatory;
}
.gallery-dialog--previews::-webkit-scrollbar {
display: none;
}
.gallery-dialog--previews::-webkit-scrollbar-thumb {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.gallery-dialog--previews {
scroll-behavior: smooth;
}
}
.gallery-dialog--previews:has(:focus-visible) {
outline: #d64224 dashed 2px;
outline-offset: 5px;
}
@media (orientation: portrait) {
.gallery-dialog--previews {
overflow-x: auto;
padding-left: var(--size-12);
padding-right: var(--size-12);
}
}
@media (orientation: landscape) {
.gallery-dialog--previews {
overflow-y: auto;
flex-direction: column;
max-height: 100%;
padding-top: var(--size-12);
padding-bottom: var(--size-12);
}
}
.gallery-dialog--previews > * {
flex-shrink: 0;
}
.gallery-dialog--previews--button {
display: block;
border-radius: 10px;
overflow: hidden;
outline: none !important;
position: relative;
}
.gallery-dialog--previews--button.active::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
outline: 5px solid #d64224;
outline-offset: -5px;
}
.gallery-dialog--previews--button:before {
content: "";
color: #fff;
font-size: var(--size-15);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: 0;
background-color: #d64224;
transition: opacity 0.3s ease;
opacity: 0;
}
.gallery-dialog--previews--button:hover:before, .gallery-dialog--previews--button:focus-visible:before {
opacity: 0.75;
}
.gallery-dialog--previews--button img {
aspect-ratio: 1/1;
width: calc(var(--size-15) * 2);
}
.map__component {
--_map--marker--size: var(--map--marker-size, var(--size-15));
--_map--marker--color: var(--map--marker-color, #d64224);
--_map--stroke--width: var(--map--stroke-width, 5px);
--_map--stroke--color: var(--map--stroke-color, currentColor);
--_map--color: var(--map--color, currentColor);
--_map--hover--color: var(--map--hover--color, #d64224);
--_map--hover--stroke--color: var(--map--hover--stroke--color, #d64224);
position: relative;
}
.map__component > svg path {
fill: var(--_map--color);
stroke: var(--_map--stroke--color);
stroke-width: var(--_map--stroke--width);
transition-property: fill, stroke;
transition-duration: 0.4s;
transition-timing-function: ease;
background: red;
}
.map__component [data-svg=novo-mesto]:hover ~ svg [data-id=novo-mesto],
.map__component [data-svg=sarajevo]:hover ~ svg [data-id=sarajevo],
.map__component [data-svg=skopje]:hover ~ svg [data-id=skopje],
.map__component [data-svg=pristina]:hover ~ svg [data-id=pristina],
.map__component [data-svg=belgrade]:hover ~ svg [data-id=belgrade],
.map__component [data-svg=tirana]:hover ~ svg [data-id=tirana],
.map__component [data-svg=pristina]:hover ~ svg [data-id=pristina],
.map__component [data-svg=sofia]:hover ~ svg [data-id=sofia],
.map__component [data-svg=split]:hover ~ svg [data-id=split],
.map__component [data-svg=cetinje]:hover ~ svg [data-id=cetinje],
.map__component [data-svg=bucharest]:hover ~ svg [data-id=bucharest],
.map__component [data-svg=novo-mesto]:focus-within ~ svg [data-id=novo-mesto],
.map__component [data-svg=sarajevo]:focus-within ~ svg [data-id=sarajevo],
.map__component [data-svg=skopje]:focus-within ~ svg [data-id=skopje],
.map__component [data-svg=pristina]:focus-within ~ svg [data-id=pristina],
.map__component [data-svg=belgrade]:focus-within ~ svg [data-id=belgrade],
.map__component [data-svg=tirana]:focus-within ~ svg [data-id=tirana],
.map__component [data-svg=pristina]:focus-within ~ svg [data-id=pristina],
.map__component [data-svg=sofia]:focus-within ~ svg [data-id=sofia],
.map__component [data-svg=split]:focus-within ~ svg [data-id=split],
.map__component [data-svg=cetinje]:focus-within ~ svg [data-id=cetinje],
.map__component [data-svg=bucharest]:focus-within ~ svg [data-id=bucharest],
.map__component [data-svg=germany]:hover ~ svg [data-id=germany],
.map__component [data-svg=germany]:focus-within ~ svg [data-id=germany],
.map__component [data-svg=austria]:hover ~ svg [data-id=austria],
.map__component [data-svg=austria]:focus-within ~ svg [data-id=austria] {
fill: var(--_map--hover--color);
stroke: var(--_map--hover--stroke--color);
}
.map__component--location {
position: absolute;
top: calc(var(--y, 0) * 1%);
left: calc(var(--x, 0) * 1%);
transform: translate(-50%, -100%);
min-width: var(--_map--marker--size);
display: grid;
}
.map__component--location > * {
grid-area: 1/1;
place-self: center;
}
.map__component--location svg {
color: var(--_map--marker--color);
width: var(--_map--marker--size);
transition: opacity 0.4s ease;
}
.map__component--triggers {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--size-2);
padding: var(--size-12);
position: absolute;
pointer-events: none;
opacity: 0;
transform: scale(0.7);
transition-property: opacity, transform;
transition-duration: 0.2s;
transition-timing-function: ease;
}
.map__component--triggers > button {
width: max-content;
cursor: pointer;
}
@media (hover: hover) {
.map__component--location:hover, .map__component--location:focus-within {
z-index: 1;
}
.map__component--location:hover [aria-expanded], .map__component--location:focus-within [aria-expanded] {
opacity: 0;
visibility: hidden;
}
.map__component--location:hover .map__component--triggers, .map__component--location:focus-within .map__component--triggers {
pointer-events: all;
opacity: 1;
transform: scale(1);
}
}
@media (hover: none) {
.map__component--location [aria-expanded=true] {
visibility: hidden;
opacity: 0;
}
.map__component--location [aria-expanded=true] ~ .map__component--triggers {
pointer-events: all;
opacity: 1;
transform: scale(1);
}
}
.gallery-slider__component {
--_height: var(--height,400px);
--_text-color: var(--text-color, #fff);
--_background-color: var(--background-color, #3a2c41);
--_background-opacity: var(--background-opacity, 0.5);
--dot-size: 20px;
--padding-bottom: var(--size-8);
position: relative;
z-index: 0;
overflow: hidden;
padding: var(--size-10);
display: flex;
flex-direction: column;
gap: var(--size-10);
}
.gallery-slider__component [data-js-next], .gallery-slider__component [data-js-prev] {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
background-color: transparent;
min-width: 80px;
margin-bottom: 0;
border-radius: 0;
z-index: 1;
transition: all 0.3s ease;
transform-origin: center;
display: flex;
align-items: center;
color: #fff;
padding: var(--size-10);
}
.gallery-slider__component [data-js-next] svg, .gallery-slider__component [data-js-prev] svg {
width: 20px;
opacity: 0.5;
}
.gallery-slider__component [data-js-next]:hover, .gallery-slider__component [data-js-prev]:hover {
color: #d64224;
}
.gallery-slider__component [data-js-prev] {
left: 0;
opacity: calc(var(--scroll-progress, 0) * 9999);
transform: scale(min(1, var(--scroll-progress, 0) * 9999));
justify-content: flex-start;
}
.gallery-slider__component [data-js-next] {
right: 0;
opacity: calc((1 - var(--scroll-progress, 0)) * 9999);
transform: scale(min(1, (1 - var(--scroll-progress, 0)) * 9999));
justify-content: flex-end;
}
.gallery-slider__component [data-js-next] svg {
transform: scaleX(-1);
}
.gallery-slider__component source {
display: none;
}
.gallery-slider__component--background {
position: relative;
--_background-color: var(--background-color, #3a2c41);
background: var(--_background-color);
overflow: hidden;
overflow: clip;
}
.gallery-slider__component--background:before {
content: "";
background-image: var(--gallery-bg-url);
background-size: cover;
background-position: center;
position: absolute;
inset: 0;
filter: brightness(0.5) blur(20px);
transform: scale(1.2);
opacity: 0.5;
}
.gallery-slider__scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; }
.gallery-slider__scroll-wrapper::-webkit-scrollbar {
display: none;
}
.gallery-slider__scroll-wrapper::-webkit-scrollbar-thumb {
display: none;
}
.gallery-slider__list {
display: flex;
flex-wrap: nowrap;
}
.gallery-slider__item {
width: 100%;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
scroll-snap-align: start;
position: relative;
}
.gallery-slider__item .gallery-slider__item_figure {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--size-8);
align-items: center;
}
.gallery-slider__item .gallery-slider__item_figure img {
width: auto;
max-width: 100%;
object-fit: contain;
height: var(--_height);
contain-intrinsic-size: unset;
}
.gallery-slider__item .gallery-slider__item_figure figcaption {
contain: inline-size;
width: 100%;
color: #fff;
font-size: var(--size-9);
}
.gallery-slider__nav {
display: flex;
flex-wrap: wrap;
gap: var(--size-6);
align-items: center;
justify-content: center;
bottom: var(--padding-bottom);
left: 0;
right: 0;
z-index: 10;
}
.gallery-slider__nav a {
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
border: 4px solid #fff;
background: var(--_background-color);
text-align: center;
color: #fff;
aspect-ratio: 1;
text-decoration: none;
font-weight: bold;
transition: opacity 0.2s ease-in-out;
font-variant: tabular-nums;
font-size: 0;
position: relative;
}
.gallery-slider__nav a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #d64224;
border-radius: inherit;
--scroll-width: calc(1 / (var(--slide-count) - 1));
--target-offset: calc(var(--scroll-width) * (var(--slide-index)));
--scroll: calc((var(--target-offset) - var(--scroll-progress,0)));
--abs: calc(max(var(--scroll),(var(--scroll) * -1)) * 3.5);
opacity: calc(1 - var(--abs));
}
.gallery-slider__nav a:active, .gallery-slider__nav a:focus, .gallery-slider__nav a:hover, .gallery-slider__nav a:target {
background: #d64224;
}
.participants__component {
--_participant--size: var(--participant--size, 200px);
}
.participants__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_participant--size)), 1fr));
grid-gap: var(--size-12);
justify-content: center;
}
.participants__tease {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
justify-content: flex-end;
gap: var(--size-10);
transform: scale(0.95);
transition: transform 0.3s ease;
position: relative;
}
.participants__tease:hover {
transform: scale(1.1);
}
.participants__tease:hover .figure__component img {
filter: none;
}
.participants__tease .figure__component img {
aspect-ratio: 1;
border-radius: 50%;
width: 160px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.participants__tease hgroup p {
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
font-style: normal;
line-height: 1.5;
font-size: var(--size-8);
margin-top: var(--size-5);
opacity: 0.8;
}
.participants__tease__heading {
font-family: inherit;
}
.participants__tease__button {
font-weight: bold;
font-size: var(--size-11);
}
.participants__tease__button::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.participants__dialog {
transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
}
.participants__dialog .participants__dialog__backdrop {
opacity: 0;
--_close-dialog-overlay--color: var(--close-dialog-overlay--color, rgba(14, 14, 22, 0.85));
display: contents;
}
.participants__dialog .participants__dialog__backdrop > button {
position: fixed;
width: 100%;
height: 100%;
background: var(--_close-dialog-overlay--color);
backdrop-filter: blur(10px);
z-index: -1;
animation-name: fade-out;
animation-duration: 0.4s;
}
.participants__dialog[open] .participants__dialog__backdrop button {
animation-name: fade-in;
}
.participants__dialog .close-dialog-button__component {
display: contents;
}
.participants__dialog .close-dialog-button__component button {
order: -1;
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
align-self: flex-start;
border-radius: 8px;
--button--padding: var(--size-8);
font-size: var(--size-12);
}
.participants__dialog .close-dialog-button__component button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.participants__dialog .close-dialog-button__component button:hover, .participants__dialog .close-dialog-button__component button:focus {
--_button--hover--scale: 150%;
}
.participants__dialog__content {
width: 95%;
max-width: 600px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
margin-left: auto;
position: relative;
padding: var(--size-15);
background: #fff;
color: #4c597c;
animation-name: to-right;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-10);
}
[open] > .participants__dialog__content {
animation-name: from-right;
}
.participants__dialog__content h2 {
--_underlined-heading--color: var(--underlined-heading--color, #d64224);
--_underlined-heading--align: var(--underlined-heading--align, center);
display: flex;
flex-direction: column;
align-items: var(--_underlined-heading--align);
gap: var(--size-5);
text-align: center;
}
.participants__dialog__content h2:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.participants__dialog__content .figure__component {
order: -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: var(--size-9);
gap: var(--size-5);
}
.participants__dialog__content .figure__component img {
aspect-ratio: 1;
border-radius: 50%;
width: 180px;
}
.participants__dialog__content .social-links__component:empty {
display: none;
}
.participants__dialog__biography > * {
margin-top: 0;
margin-bottom: 0;
}
.participants__dialog__biography > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.search-input__component {
position: relative;
width: max-content;
max-width: 100%;
z-index: 0;
border-radius: 100vw;
display: flex;
align-items: stretch;
}
.search-input__component input {
border: none;
background: none;
font-weight: bold;
border-radius: inherit;
width: 10em;
padding: 0.48em 1em;
}
.search-input__component input::placeholder {
color: inherit;
opacity: 0.5;
}
.search-input__component button {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: color 0.3s ease;
padding: 0.48em 0.65em;
}
.search-input__component button:before {
content: "";
position: absolute;
inset: 0;
background: #d64224;
transform: scale(0);
border-radius: inherit;
transition: transform 0.3s ease;
}
.search-input__component button:hover {
color: #fff;
}
.search-input__component button:hover:before {
transform: scale(1);
}
.search-input__component:before {
content: "";
position: absolute;
border-radius: inherit;
inset: 0;
z-index: -1;
background: currentColor;
opacity: 0.15;
}
.pagination {
display: flex;
flex-wrap: wrap;
gap: var(--size-6);
justify-content: center;
align-items: center;
}
.page-numbers:not(.dots) {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--button--background: #edeef2;
--button--color: #4c597c;
white-space: nowrap;
}
.page-numbers:not(.dots):before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.page-numbers:not(.dots):hover, .page-numbers:not(.dots):focus {
--_button--hover--scale: 150%;
}
.page-numbers:not(.dots):not(.prev, .next) {
--button--padding: var(--size-6) var(--size-10);
}
.page-numbers:not(.dots).current {
--button--background: #d64224;
--button--color: #fff;
}
.post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
gap: var(--size-16);
}
.post-list--post {
transition: transform 0.5s ease;
position: relative;
display: flex;
flex-direction: column;
gap: var(--size-11);
font-size: var(--size-9);
}
.post-list--post:hover {
transform: scale(1.05);
}
.post-list--post img {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center;
}
.post-list--post h3 {
font-family: inherit;
font-size: var(--size-12);
font-weight: bold;
}
.post-list--post h3 a {
text-decoration: none;
}
.post-list--post h3 a::before {
content: "";
position: absolute;
inset: 0;
}
.post-list--post time {
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
font-style: normal;
line-height: 1.5;
font-size: var(--size-8);
}
.writing_dialog__component {
transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
}
.writing_dialog__component .writing_dialog__backdrop {
opacity: 0;
--_close-dialog-overlay--color: var(--close-dialog-overlay--color, rgba(14, 14, 22, 0.85));
display: contents;
}
.writing_dialog__component .writing_dialog__backdrop > button {
position: fixed;
width: 100%;
height: 100%;
background: var(--_close-dialog-overlay--color);
backdrop-filter: blur(10px);
z-index: -1;
animation-name: fade-out;
animation-duration: 0.4s;
}
.writing_dialog__component[open] .writing_dialog__backdrop button {
animation-name: fade-in;
}
.writing_dialog__content {
width: 95%;
max-width: 900px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
margin-left: auto;
position: relative;
padding: var(--size-15);
background: #fff;
color: #4c597c;
animation-name: to-right;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.writing_dialog__content .close-popup-button__component button {
--_button--background: var(--button--background, #d64224);
--_button--color: var(--button--color, #fff);
--_button--font-size: var(--button--font-size, var(--size-9));
--_button--padding: var(--button--padding, var(--size-6) var(--size-14));
--_button--gap: var(--button--gap, var(--size-6));
--_button--border-width: var(--button--border-width, 3px);
--_button--radius: var(--button--radius, 100vw);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_button--gap);
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--_button--font-size);
background-color: var(--_button--background);
color: var(--_button--color);
padding: var(--_button--padding);
font-weight: bold;
border-radius: var(--_button--radius);
--_button--font-size: var(--button--font-size, var(--size-10));
--_button--padding: var(--button--padding, var(--size-10));
aspect-ratio: 1;
--button--radius: 8px;
}
.writing_dialog__content .close-popup-button__component button:before {
content: "";
width: var(--_button--hover--scale, 0%);
padding-top: var(--_button--hover--scale, 0%);
position: absolute;
background-color: inherit;
z-index: -1;
border-radius: 50%;
opacity: 0.5;
mix-blend-mode: multiply;
transition: all 0.8s ease;
}
.writing_dialog__content .close-popup-button__component button:hover, .writing_dialog__content .close-popup-button__component button:focus {
--_button--hover--scale: 150%;
}
[open] > .writing_dialog__content {
animation-name: from-right;
}
.writing_dialog__content > * + * {
margin-top: var(--size-10);
}
.writing_dialog__content hgroup {
display: grid;
gap: var(--size-10);
}
.writing_dialog__content hgroup h2 {
font-size: var(--size-16);
}
.writing_dialog__content hgroup p {
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
font-style: normal;
line-height: 1.5;
opacity: 0.75;
text-align: right;
}
.writing_dialog__content figure {
float: left;
padding-right: var(--size-15);
padding-bottom: var(--size-10);
display: flex;
flex-direction: column;
gap: var(--size-5);
align-items: center;
}
.writing_dialog__content figure img {
--size: clamp(100px, 13.333vw + 20px, 180px);
object-fit: cover;
object-position: center;
height: var(--size);
width: var(--size);
border-radius: 50%;
}
.writing_dialog__content figure figcaption {
font-size: var(--size-8);
}
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
aspect-ratio: 16/9;
} lite-youtube::before {
content: attr(data-title);
display: block;
position: absolute;
top: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.54) 14%, rgba(0, 0, 0, 0.15) 54%, rgba(0, 0, 0, 0.05) 72%, rgba(0, 0, 0, 0) 94%);
height: 99px;
width: 100%;
font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
color: hsl(0, 0%, 93.33%);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
font-size: 18px;
padding: 25px 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
lite-youtube:hover::before {
color: white;
} lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
} lite-youtube > .lty-playbtn {
display: block; width: 100%;
height: 100%; background: no-repeat center/68px 48px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
position: absolute;
cursor: pointer;
z-index: 1;
filter: grayscale(100%);
transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
border: 0;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
filter: none;
} lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
lite-youtube[data-short] {
aspect-ratio: 9/16;
}
.align--left {
align-items: flex-start;
}
.align--center {
align-items: center;
}
.align--right {
align-items: flex-end;
}
.align--stretch {
align-items: stretch;
}
.justify--left {
justify-content: flex-start;
}
.justify--center {
justify-content: center;
}
.justify--right {
justify-content: flex-end;
}
.justify--between {
justify-content: space-between;
}
.justify--around {
justify-content: space-around;
}
.justify--evenly {
justify-content: space-evenly;
}
.text-align--center {
text-align: center;
}
.text-align--right {
text-align: right;
text-align: end;
}