:root {
background: #1c503e;
--site-head--background: #1c503e;
--site-head--color: white;
}
h2 {
font-size: var(--size-16);
}
.film-list {
display: grid;
gap: clamp(24px, 18.545px + 1.091vw, 36px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
.hero__component {
display: flex;
gap: var(--size-12) var(--size-14);
justify-content: center;
overflow: hidden;
font-size: var(--size-11);
background: #DD6249;
color: #fff;
position: relative;
padding-bottom: 50px;
}
.hero__component > * {
flex: 1;
min-width: min(100%, var(--hero--min-width));
}
.hero__component .text {
max-width: 700px;
padding: var(--size-15);
display: flex;
padding-top: var(--size-12);
align-items: center;
}
.hero__component .image {
display: flex;
max-width: 600px;
position: relative;
z-index: 1;
margin-bottom: -50px;
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;
}
}
.hero__component::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background: #1c503e;
z-index: 0;
}
.hero__component hgroup > * {
margin-top: 0;
margin-bottom: 0;
}
.hero__component hgroup > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.main-text {
padding: var(--size-15);
background: #D09388;
color: #fff;
max-width: 900px;
text-wrap: pretty;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
margin-top: var(--size-18);
margin-bottom: var(--size-18);
}
.main-text p a {
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.main-text > * + * {
margin-top: var(--size-10);
}
.films {
margin-left: auto;
margin-right: auto;
max-width: 1560px;
padding-left: var(--size-15);
padding-right: var(--size-15);
color: #e6bd72;
}
.films 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);
}
.films h2:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.films li {
display: flex;
flex-direction: column;
gap: var(--size-10);
}
.films img {
aspect-ratio: 4/2.5;
}
.films h3 {
font-family: inherit;
font-size: var(--size-12);
font-weight: bold;
}
.main-text--wrapper {
position: relative;
padding-left: var(--size-12);
padding-right: var(--size-12);
}
.main-text--wrapper::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
height: 250px;
z-index: -1;
background-image: url(//traduki.eu/wp-content/themes/traduki/assets/bfw-24/chairs-pattern.svg);
}
.postcard {
position: relative;
padding-left: var(--size-12);
padding-right: var(--size-12);
min-height: 250px;
display: flex;
justify-content: center;
align-items: center;
margin-top: var(--size-18);
margin-bottom: var(--size-18);
}
.postcard a {
color: #fff;
background: #e6bd72;
}
.postcard::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
height: 250px;
z-index: -1;
background-image: url(//traduki.eu/wp-content/themes/traduki/assets/bfw-24/chairs-pattern.svg);
}
.film-list--button {
position: relative;
display: flex;
}
.film-list--button img {
border-radius: 10px;
}
.film-list--button::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 58px;
height: 58px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' fill='%23fff'%3E%3Cpath d='M28.934 0c15.969 0 28.934 12.965 28.934 28.934 0 15.969-12.965 28.934-28.934 28.934C12.965 57.868 0 44.903 0 28.934 0 12.965 12.965 0 28.934 0Zm9.278 27.839-14.15-9.444a1.316 1.316 0 0 0-2.046 1.095v18.887a1.316 1.316 0 0 0 2.046 1.095l14.15-9.443a1.317 1.317 0 0 0 0-2.19Z' /%3E%3C/svg%3E");
}
.wrapper {
max-width: var(--max-width, 1500px);
margin-left: auto;
margin-right: auto;
}
.programme {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
color: #fff;
}
.programme h2 {
color: #e6bd72;
--_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 {
background: #3b6d5a;
scroll-margin-top: 50px;
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;
}
.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 [data-open] .faux-summary {
background: #d64224;
}
@media (min-width: 600px) {
.programme-day [data-open] .faux-summary {
flex-wrap: nowrap;
}
}
.programme-day [data-open] .faux-summary > div:first-child {
text-align: right;
}
.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;
}
[data-tab] .faux-summary {
list-style: none;
}
[data-tab] .faux-summary::-webkit-details-marker {
display: none;
}
.programme--body {
margin-top: var(--size-14);
max-width: 960px;
margin-left: auto;
padding-left: var(--size-12);
padding-right: var(--size-12);
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: #e6bd72;
}
.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%;
}
.programme--header {
position: relative;
}
.sponsors-and-past {
--overlap: 100px;
--divider--height: 60px;
color: #fff;
margin-top: var(--size-20);
background-color: #D09388;
clip-path: polygon(0 var(--divider--height, 0), 100% 0, 100% 100%, 0 100%);
display: grid;
grid-template-columns: 500px var(--overlap) minmax(0, 1fr);
}
.sponsors-and-past .buttons__component {
display: flex;
flex-wrap: wrap;
gap: var(--size-8);
}
.sponsors-and-past > * {
grid-row: 1;
}
.sponsors-and-past > *:nth-child(1) {
grid-column: 1/3;
}
.sponsors-and-past > *:nth-child(2) {
grid-column: 2/4;
}
@media (max-width: 1040px) {
.sponsors-and-past {
display: block;
}
.sponsors-and-past > *:nth-child(2) {
margin-top: calc(-1 * var(--divider--height, 0));
}
}
.sponsors {
background: #D5A75C;
clip-path: polygon(0 0, 100% 0, calc(100% - var(--overlap, 0)) 100%, 0 100%);
padding: var(--size-15);
padding-right: calc(var(--overlap, 0) + var(--size-15));
padding-top: var(--size-19);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--size-12);
}
@media (max-width: 1040px) {
.sponsors {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--divider--height, 0)));
}
}
@media (max-width: 1040px) {
.sponsors {
padding-bottom: calc(var(--divider--height, 0) + var(--size-15));
padding-right: var(--size-15);
}
}
.sponsors h2 {
font-size: var(--size-12);
margin-bottom: 0;
}
.sponsors img {
background: #fff;
border-radius: 20px;
padding: 20px;
}
.past {
padding-right: var(--size-12);
padding-left: calc(var(--overlap, 0) / 2 + var(--size-12));
padding-top: calc(var(--divider--height, 0) + var(--size-12));
gap: var(--size-12);
display: flex;
flex-direction: column-reverse;
}
@media (min-width: 700px) {
.past {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.past--image {
max-width: 550px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transform: scale(1.2);
transform-origin: right bottom;
}
.past--content {
display: flex;
justify-content: center;
flex-direction: column;
padding-bottom: var(--divider--height, 0);
gap: var(--size-10);
}
.past--content h2 {
display: flex;
flex-direction: column;
gap: var(--size-8);
}
.past--content h2:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--underlined-heading--color, #D5A75C);
}