.site-head.site-head {
--site-head--background: #4c597c;
--site-head--color: white;
}
.hero__component {
--hero--min-width: 360px;
--hero--text-width: 600px;
--hero--image-width: 700px;
display: flex;
flex-wrap: wrap;
gap: var(--size-12) var(--size-16);
align-items: center;
justify-content: center;
font-size: var(--size-11);
background: #4c597c;
color: white;
clip-path: ellipse(max(1000px, 120vw + 350px) 100% at 60% 0%);
padding: var(--size-15);
padding-bottom: calc(var(--size-12) + 80px);
z-index: 5;
position: relative;
}
.hero__component > * {
flex: 1;
min-width: min(100%, var(--hero--min-width));
}
.hero__component .text {
max-width: var(--hero--text-width);
}
.hero__component .image {
max-width: var(--hero--image-width);
}
.hero__component hgroup > * {
margin-top: 0;
margin-bottom: 0;
}
.hero__component hgroup > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.about--main-text {
display: grid;
gap: var(--size-12);
background: #6b8eaf;
position: relative;
z-index: 4;
color: #fff;
margin-top: calc(-1 * 80px);
padding-top: calc(var(--size-17) + 80px);
clip-path: ellipse(max(1000px, 120vw + 350px) 100% at 40% 0%);
}
@media (min-width: 1300px) {
.about--main-text {
grid-template-columns: 1fr 1fr;
}
}
.about--main-text p {
color: #222136;
}
.about--main-text--content {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: var(--size-16);
padding-right: var(--size-16);
}
.about--main-text--content > * {
margin-top: 0;
margin-bottom: 0;
}
.about--main-text--content > * + * {
margin-top: var(--stack--space, var(--size-10));
}
@media (min-width: 1300px) {
.about--main-text--content {
padding-bottom: calc(var(--size-15) + 80px);
}
}
.about--main-text--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);
--underlined-heading--align: flex-start;
}
.about--main-text--content h2:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.about--main-text--video-wrapper {
display: flex;
align-items: flex-end;
position: relative;
}
.about--main-text--video-wrapper img {
height: 100%;
max-height: 845px;
max-width: min(100%, 1100px);
object-position: right;
}
@media (max-width: 1300px) {
.about--main-text--video-wrapper img {
width: 100%;
}
}
@media (min-width: 1300px) {
.about--main-text--video-wrapper {
order: -1;
}
}
.about--main-text--video-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);
position: absolute;
transform: translate(-50%, -50%);
width: max-content;
bottom: 16%;
right: 120px;
}
.about--main-text--video-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;
}
.about--main-text--video-button:hover, .about--main-text--video-button:focus {
--_button--hover--scale: 150%;
}
@media (max-width: 1300px) {
.about--main-text--video-button {
right: auto;
left: 68%;
}
}
.about--features {
clip-path: ellipse(max(1000px, 120vw + 500px) 100% at 35% 0%);
position: relative;
z-index: 3;
--offset: calc(var(--size-15) + 160px);
margin-top: calc(-1 * var(--offset));
font-size: var(--size-9);
display: grid;
}
@media (min-width: 1400px) {
.about--features {
grid-template-columns: 1fr 1fr 1fr;
}
}
.about--features > * {
display: flex;
flex-wrap: wrap;
column-gap: var(--size-12);
overflow: hidden;
padding-top: var(--size-15);
}
.about--features > *:first-child {
padding-top: calc(var(--offset) + var(--size-15));
}
@media (min-width: 1400px) {
.about--features > * {
padding-top: calc(var(--offset) + var(--size-15));
}
}
.about--features > * > * {
--toggle: calc(( 1000px - 100%) * 999);
flex-grow: 1;
flex-basis: var(--toggle);
min-width: 0;
}
.about--features > *:nth-child(2) {
flex-flow: wrap-reverse;
flex-direction: row-reverse;
}
.about--features--text {
color: #fff;
margin-top: auto;
padding: var(--size-15);
padding-top: 0;
margin-bottom: auto;
}
.about--features--text > * {
margin-top: 0;
margin-bottom: 0;
}
.about--features--text > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.about--grants {
background: #d64224;
align-items: flex-end;
--button--background: #2f3233;
}
@media (min-width: 1000px) {
.about--grants--image {
transform-origin: bottom center;
transform: scale(1.3);
}
}
.about--events {
align-items: center;
background: #3a2c41;
}
@media (min-width: 1400px) {
.about--events {
padding-bottom: var(--size-10);
}
}
.about--events--image {
padding-left: var(--size-16);
padding-right: var(--size-16);
}
.about--residencies {
background: #cbb6b4;
align-items: flex-end;
}
.about--residencies .about--residencies--text {
color: #53393d;
}
@media (min-width: 1000px) and (max-width: 1399px) {
.about--residencies .about--residencies--text {
padding-bottom: calc(var(--size-10) + 80px);
}
}
.about--residencies--image {
padding-left: var(--size-15);
}
@media (min-width: 1000px) {
.about--residencies--image {
transform-origin: bottom left;
transform: scale(1.2);
}
}
.about--team {
clip-path: ellipse(max(1000px, 120vw + 350px) 100% at 40% 0%);
padding-bottom: 80px;
background: #e6d3c1;
color: #53393d;
--offset: calc(var(--size-15) + 80px * 3);
margin-top: calc(-1 * var(--offset));
padding-top: var(--offset);
position: relative;
z-index: 2;
--participant--size: 175px;
}
@media (max-width: 1300px) {
.about--team {
--participant--size: 280px;
}
}
@media (max-width: 1000px) {
.about--team {
--participant--size: 220px;
}
}
.about--team--wrapper {
max-width: 1850px;
margin-left: auto;
margin-right: auto;
padding: var(--size-15);
}
.about--team--title {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: var(--size-16);
--_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);
}
.about--team--title:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.about--partners {
display: flex;
overflow: hidden;
flex-wrap: wrap;
gap: var(--size-15) var(--size-18);
align-items: center;
justify-content: center;
padding-left: var(--size-16);
padding-right: var(--size-16);
padding-top: var(--size-16);
background: #7092b5;
color: #fff;
position: relative;
z-index: 0;
--offset: calc(var(--size-15) + 80px);
margin-top: calc(-1 * var(--offset));
padding-top: calc(var(--offset) + var(--size-16));
padding-bottom: var(--size-16);
}
.about--partners > * {
flex: 1;
min-width: min(100%, 400px);
}
.about--partners p {
color: #222136;
}
.about--partners--text {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.about--partners--text > * {
margin-top: 0;
margin-bottom: 0;
}
.about--partners--text > * + * {
margin-top: var(--stack--space, var(--size-10));
}
.about--partners--text 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);
--underlined-heading--align: flex-start;
}
.about--partners--text h2:after {
content: "";
height: 6px;
width: 100px;
max-width: 100%;
background: var(--_underlined-heading--color);
}
.about--partners--video {
max-width: 900px;
transform: scale(1.2);
}
.about--partners--background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 5000vmax;
max-width: none;
pointer-events: none;
}
.video-dialog--component .close-dialog-button {
right: 0;
}