:root {
scroll-behavior: initial;
}
body {
overflow-x: hidden;
}
@keyframes scroll-behaviour {
99% {
scroll-behavior: auto;
}
100% {
scroll-behavior: smooth;
}
}
:root {
animation: scroll-behaviour 1s forwards;
}
:target {
scroll-margin-block: 5ex;
}
.writing_dialog__content hgroup {
margin-bottom: var(--size-14);
}
h1 {
font-size: var(--size-18);
margin-bottom: var(--size-10) !important;
color: #d64224;
}
.divider__component svg {
transform: translateY(-1px);
height: 70px;
width: 100%;
}
body {
background: #242043;
}
.site-head {
--site-head--background: #242043;
--site-head--color: #fff;
z-index: 10;
background: transparent;
}
.hero__component {
display: grid;
gap: var(--size-12);
font-size: var(--size-11);
background: #242043;
color: #fff;
position: relative;
}
@media (min-width: 1000px) {
.hero__component {
grid-template-columns: 0.95fr 1fr;
}
}
.hero__component .text {
padding: var(--size-15) 0 var(--size-15) var(--size-14);
display: flex;
align-items: center;
position: relative;
z-index: 4;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1000px) {
.hero__component .text {
margin-bottom: 70px;
}
}
.hero__component .text h1 {
word-spacing: -0.175em;
letter-spacing: -0.02em;
}
.hero__component .text h3 {
font-family: inherit;
font-weight: bold;
}
.hero__component .image {
position: relative;
z-index: 0;
display: flex;
align-items: flex-end;
}
.hero__component .image svg {
width: 100%;
height: auto;
}
.hero__component .image .feet {
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
}
.hero__component .image .water {
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
width: 163.78776143%;
max-width: none;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.hero__component .image .water {
animation: water 10s ease-in-out infinite alternate;
}
}
@keyframes water {
100% {
transform: translateY(5px) translateX(20px);
}
}
.hero__component hgroup > * {
margin-top: 0;
margin-bottom: 0;
}
.hero__component hgroup > * + * {
margin-top: var(--size-7);
}
.intro {
background: #92C3E9;
position: relative;
color: #242043;
}
.intro .divider__component svg {
fill: #92C3E9;
}
.intro .intro--text {
padding: var(--size-15);
}
.intro .intro--text > * {
margin-top: 0;
margin-bottom: 0;
}
.intro .intro--text > * + * {
margin-top: var(--stack--space, var(--size-10));
}
@media (min-width: 1000px) {
.intro .intro--text {
padding-bottom: calc(var(--size-15) + 100px);
}
}
.intro .intro--logo svg {
width: 250px;
}
.intro .intro--image {
align-self: flex-end;
}
@media (min-width: 1000px) {
.intro .intro--image {
order: -1;
}
.intro .intro--image svg {
transform-origin: bottom center;
transform: scale(1.1);
}
}
.intro .intro--wrapper {
display: grid;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
column-gap: 100px;
row-gap: var(--size-15);
align-items: center;
}
@media (min-width: 1000px) {
.intro .intro--wrapper {
grid-template-columns: 500px 1fr;
}
}
.intro .divider__component {
position: absolute;
left: 0;
bottom: 100%;
transform: translateY(2px);
z-index: 10;
right: 0;
}
.intro .divider__component svg {
fill: #92C3E9;
}
.intro .button svg {
width: 1.4em;
height: 1.4em;
scale: 1.25;
}
.programme--wrapper {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.programme {
--underlined-heading--align: left;
padding: var(--size-15);
padding-bottom: calc(60px + var(--size-15));
color: #fff;
background: #242043;
position: relative;
}
.programme .divider__component:last-child {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 2;
}
.programme .divider__component:last-child svg {
fill: #242043;
}
.programme .divider__component:first-child {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% - 2px);
}
.programme .divider__component:first-child svg {
fill: #242043;
}
.programme 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);
max-width: none;
margin-bottom: var(--size-15);
}
.programme h2:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.programme-day h3 {
font-size: var(--size-12);
font-weight: bold;
font-family: inherit;
max-width: none;
}
.programme-day * + h3 {
margin-top: var(--size-12);
}
.programme-day h5 {
font-size: var(--size-11);
max-width: 50ch; color: #d64224;
}
.programme-day .faux-details[data-open] h5 {
color: inherit;
}
.programme-day .faux-details[data-open] .faux-summary {
color: #fff;
}
.programme-day .faux-details {
background: #3c385e;
color: #fff;
border-radius: 10px;
}
.programme-day .faux-summary {
display: grid;
gap: var(--size-12);
align-items: baseline;
cursor: pointer;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: var(--size-12);
}
@media (min-width: 600px) {
.programme-day .faux-summary {
grid-template-columns: 100px 1fr;
}
}
.programme-day .faux-summary > div:first-child {
text-align: right;
}
.programme-day [data-open] .faux-summary {
background: #d64224;
}
.faux-details:not([data-open]) > *:not(.faux-summary) {
display: none;
}
.faux-summary {
position: relative;
}
.programme--toggle-button {
text-align: left;
}
.programme--toggle-button::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
.programme-day time {
font-weight: bold;
}
.programme-day address {
margin-top: var(--size-5);
}
.programme-day .faux-summary p {
margin-top: var(--size-10);
font-size: var(--size-9);
}
.programme-day > ul > li {
margin-top: var(--size-12); }
.programme--event--body {
padding: var(--size-12);
}
.programme--event--body * + * { margin-top: var(--size-6);
}
.programme-day:not(.active) {
display: none;
}
.programme-day {
scroll-margin-top: 20px;
}
.programme--body {
margin-left: auto;
margin-right: auto;
}
.programme-day > ul > li {
margin-top: var(--size-12);
}
.programme--tab-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--size-8) var(--size-10);
}
.programme--tab-nav button label {
opacity: 0.7;
}
.programme--tab-nav button:not([aria-selected=true]) {
--_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;
}
.programme--tab-nav button:not([aria-selected=true]):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;
}
.programme--tab-nav button:not([aria-selected=true]):hover, .programme--tab-nav button:not([aria-selected=true]):focus {
--_button--hover--scale: 150%;
}
.programme--tab-nav button:not([aria-selected=true]):before {
background-color: currentColor;
opacity: 0.25;
}
.programme--tab-nav button[aria-selected=true] {
--_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);
}
.programme--tab-nav button[aria-selected=true]: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;
}
.programme--tab-nav button[aria-selected=true]:hover, .programme--tab-nav button[aria-selected=true]:focus {
--_button--hover--scale: 150%;
}
@media (min-width: 700px) {
.programme--header {
position: sticky;
top: var(--size-15);
align-self: flex-start;
}
}
.programme__component {
--_sidebar--width: var(--sidebar--width, 300px);
--_sidebar--content-min-width: var(--sidebar--content-min-width, 50%);
display: flex;
flex-wrap: wrap;
--sidebar--width: 250px;
gap: var(--size-15) var(--size-17);
}
.programme__component > :first-child {
flex-basis: var(--_sidebar--width);
flex-grow: 1;
}
.programme__component > :last-child {
flex-basis: 0;
flex-grow: 999;
min-width: var(--_sidebar--content-min-width);
}
.programme--participants {
font-size: var(--size-9);
margin-top: var(--size-5);
}
.programme--participants--role-label {
margin-right: var(--size-8);
}
.programme--participants--role + .programme--participants--role {
margin-top: var(--size-2);
}
.programme--participants--button {
position: relative;
z-index: 1;
padding: var(--size-2) var(--size-4);
background: rgba(214, 66, 36, 0.2);
border-radius: 5px;
}
.programme--participants--button:hover {
background: rgba(214, 66, 36, 0.4);
}
.theme {
--button--background: #616bb1;
background: #1a3962;
color: #fff;
overflow: hidden;
}
.theme h2 {
margin-bottom: var(--size-6);
color: #92c1e8;
}
.theme > div {
display: grid;
row-gap: 60px;
}
@media (min-width: 1000px) {
.theme > div {
grid-template-columns: 250px 1fr 250px;
justify-content: center;
}
}
.theme--text {
max-width: 750px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 10;
padding: var(--size-15) var(--size-15) calc(var(--size-15) + 100px);
}
.theme--text > * {
margin-top: 0;
margin-bottom: 0;
}
.theme--text > * + * {
margin-top: var(--stack--space, var(--size-10));
}
@media (min-width: 1000px) {
.theme--text {
padding: calc(var(--size-15) + 60px) var(--size-15) calc(var(--size-15) + 100px);
}
}
.theme--image {
background-image: var(--background);
--size: 250px;
--aspect-ratio: 1.2407407407;
background-repeat: repeat;
background-size: calc(var(--size) * var(--aspect-ratio)) var(--size);
height: 100%;
min-height: 300px;
display: none;
}
@media (min-width: 1000px) {
.theme--image {
display: block;
}
}
.theme-divider {
background-image: var(--background);
--size: 300px;
--aspect-ratio: 1.2407407407;
background-repeat: repeat;
background-size: calc(var(--size) * var(--aspect-ratio)) var(--size);
height: 250px;
position: relative;
}
@media (min-width: 1000px) {
.theme-divider {
display: none;
}
}
.theme-divider svg {
fill: #1a3962;
}
.theme-divider > * {
position: absolute;
left: 0;
right: 0;
bottom: -2px;
}
.participants {
position: relative;
background: #616bb1;
color: #fff;
--participant--size: 250px;
}
.participants .divider__component {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
}
.participants .divider__component svg {
height: 50px;
transform: scaleX(-1);
fill: #616bb1;
}
.participants > div:not([class]) {
max-width: 1460px;
margin-left: auto;
margin-right: auto;
padding: var(--size-15);
}
.participants .participants--heading {
--_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);
max-width: none;
margin-bottom: var(--size-12);
}
.participants .participants--heading:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.participants .participants__component {
display: grid;
gap: var(--size-14);
padding-bottom: var(--size-15);
padding-top: var(--size-10);
}
.participants__tease .figure__component img {
contain-intrinsic-size: none;
}
[data-participants-toggle] {
margin-left: auto;
margin-right: auto;
justify-self: center;
}
[data-participants-toggle]:not([aria-expanded=true]) + ul {
display: none !important;
}
[data-participants-toggle][aria-expanded=false] [data-participants-less],
[data-participants-toggle][aria-expanded=true] [data-participants-more] {
display: none;
}
.leipzig {
background: #E7CBBA;
color: #70594a;
}
.leipzig .divider__component svg {
fill: #616bb1;
}
.leipzig .leipzig--wrapper {
margin-left: auto;
margin-right: auto;
display: grid;
align-items: center;
gap: var(--size-15);
max-width: 1200px;
padding: var(--size-15);
padding-bottom: calc(var(--size-15) + 60px);
}
@media (min-width: 800px) {
.leipzig .leipzig--wrapper {
grid-template-columns: 1fr 1fr;
}
}
.leipzig .leipzig--wrapper img {
width: 100%;
}
.leipzig .leipzig--text > * {
margin-top: 0;
margin-bottom: 0;
}
.leipzig .leipzig--text > * + * {
margin-top: var(--size-12);
}
.leipzig .leipzig--text .buttons__component {
display: flex;
gap: var(--size-8);
flex-direction: column;
align-items: flex-start;
}
.leipzig .leipzig--text .buttons__component > :first-child {
text-align: left;
max-width: 415px;
}