:root {
scroll-behavior: initial;
}
@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);
color: #70594a;
margin-bottom: var(--size-10) !important;
}
.divider__component svg {
transform: translateY(-1px);
height: 70px;
width: 100%;
}
.site-head {
--site-head--background: #E7CBBA;
--site-head--color: #70594a;
}
.hero__component {
display: flex;
gap: var(--size-12);
justify-content: center;
padding-bottom: 50px;
font-size: var(--size-11);
background: #E7CBBA;
color: #a98171;
position: relative;
}
.hero__component > * {
flex: 1;
min-width: min(100%, var(--hero--min-width));
}
.hero__component .text {
max-width: 750px;
padding: var(--size-15);
display: flex;
padding-top: var(--size-12);
align-items: center;
}
.hero__component .text h3 {
font-family: inherit;
font-weight: bold;
}
.hero__component .image {
display: flex;
max-width: 750px;
margin-left: -10%;
position: relative;
z-index: 1;
padding-right: var(--size-12);
padding-left: var(--size-12);
}
.hero__component .image svg {
width: 100%;
height: auto;
}
@media (max-width: 740px) {
.hero__component {
flex-direction: column;
}
.hero__component .text {
padding-bottom: var(--size-9);
}
.hero__component .image {
max-width: none;
margin-left: none;
}
}
.hero__component hgroup > * {
margin-top: 0;
margin-bottom: 0;
}
.hero__component hgroup > * + * {
margin-top: var(--size-7);
}
.intro {
background: #1e5140;
position: relative;
color: #fff;
}
.intro .divider__component svg {
fill: #E7CBBA;
}
.intro .intro--text > * {
margin-top: 0;
margin-bottom: 0;
}
.intro .intro--text > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.intro .intro--wrapper {
--_sidebar--width: var(--sidebar--width, 300px);
--_sidebar--content-min-width: var(--sidebar--content-min-width, 50%);
display: flex;
flex-wrap: wrap;
max-width: 1260px;
margin-left: auto;
margin-right: auto;
padding: var(--size-15);
padding-bottom: calc(60px + var(--size-14));
gap: var(--size-15);
align-items: center;
}
.intro .intro--wrapper > :first-child {
flex-basis: var(--_sidebar--width);
flex-grow: 1;
}
.intro .intro--wrapper > :last-child {
flex-basis: 0;
flex-grow: 999;
min-width: var(--_sidebar--content-min-width);
}
.intro .divider__component:last-child {
position: absolute;
left: 0;
top: 100%;
z-index: 10;
right: 0;
}
.intro .divider__component:last-child svg {
fill: #1e5140;
}
.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: calc(60px + var(--size-15)) var(--size-15);
color: #fff;
background: #d9ae9d;
position: relative;
}
.programme .divider__component {
position: absolute;
left: 0;
right: 0;
top: 100%;
}
.programme .divider__component svg {
fill: #d9ae9d;
}
.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 details[open] h5 {
color: inherit;
}
.programme-day details[open] summary {
color: #fff;
}
.programme-day details {
background: #E7CBBA;
color: #70594a;
border-radius: 10px;
}
.programme-day 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 summary {
grid-template-columns: 100px 1fr;
}
}
.programme-day summary > div:first-child {
text-align: right;
}
.programme-day [open] summary {
background: #d64224;
}
.programme-day time {
font-weight: bold;
}
.programme-day address {
margin-top: var(--size-5);
}
.programme-day 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;
}
[data-tab] summary {
list-style: none;
}
[data-tab] summary::-webkit-details-marker {
display: none;
}
.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);
}
.theme {
background: #739ABF;
color: #fff;
overflow: hidden;
}
.theme h2 {
color: #242143;
margin-bottom: var(--size-6);
}
.theme > div {
max-width: 1500px;
display: grid;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 800px) {
.theme > div {
grid-template-columns: 1fr 1fr;
align-items: flex-end;
justify-content: center;
}
}
.theme--text {
padding: calc(var(--size-15) + 60px) var(--size-15) 0;
position: relative;
z-index: 10;
}
.theme--text > * {
margin-top: 0;
margin-bottom: 0;
}
.theme--text > * + * {
margin-top: var(--stack--space, var(--size-10));
}
@media (min-width: 800px) {
.theme--text {
padding: calc(var(--size-15) + 60px) var(--size-15);
}
}
.theme--image {
transform-origin: bottom center;
transform: scale(1.2);
}
@media (min-width: 800px) {
.theme--image {
margin-top: var(--size-10);
}
}
.participants {
position: relative;
background: #1e5140;
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: #1e5140;
}
.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: #739ABF;
color: #242143;
}
.leipzig .divider__component svg {
fill: #1e5140;
}
.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);
}
@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;
}