@import url(/project/project_new.css); @import url(/styles/big-red-link.css); @font-face { font-family: 'BeVietnamPro'; src: url(/fonts/Be_Vietnam_Pro/BeVietnamPro.woff2) format('woff2-variations'); src: url(/fonts/Be_Vietnam_Pro/BeVietnamPro.woff2) format('woff2') tech('variations'); font-weight: 100 900; } @font-face { font-family: 'BeVietnamPro'; src: url(/fonts/Be_Vietnam_Pro/BeVietnamPro-Italic.woff2) format('woff2-variations'); src: url(/fonts/Be_Vietnam_Pro/BeVietnamPro-Italic.woff2) format('woff2') tech('variations'); font-weight: 100 900; font-style: italic; } @property --background { syntax: ""; inherits: true; initial-value: black; } @property --content { syntax: ""; inherits: true; initial-value: white; } :root { --red: #be0e34; --grey: #575756; --background: white; --content: black; transition: --background .3s, --content .3s; 404 Not Found

404 Not Found

nginx/1.26.3 transition: --background .3s ease, --content .3s ease; } :root:has(body.dark-mode) { --background: black; --content: white; } html { transition: font-size .3s ease; } :root { --nav-height: 4.8rem; @media screen and (max-width: 850px) { --nav-height: 8rem; } } @property --background-opacity { syntax: ""; inherits: true; initial-value: 70%; } body.dark-mode custom-nav { --background-opacity: 30%; } html { scroll-behavior: smooth; scrollbar-width: none; --font-size: clamp(11px, calc(11px + (16 - 11) * ((100vw - 320px) / (1285 - 320))), 16px); font-size: var(--font-size); hyphens: auto; color: var(--content); background: var(--background); @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min--moz-device-pixel-ratio: 1.25), only screen and (-o-min-device-pixel-ratio: 1.25/1), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) { font-size: calc(var(--font-size) * .75); .default-width { display: block; width: clamp(250px, 80vw, 750px); margin-inline: auto; } } &:has(template.clt) { background-image: linear-gradient(to bottom, var(--background) 0%, color-mix(in srgb, var(--background) 65%, transparent) 70%, color-mix(in srgb, var(--background) 65%, transparent) 100%, var(--background) 90%), url(https://mediabox.groepvanroey.be/m/2fe55b53169a1496/original/Houtstructruur.png); background-attachment: fixed; background-position: center, center; background-size: clamp(250px, 80vw, 1100px); background-repeat: no-repeat, no-repeat; } } body { position: relative; margin: 0; font-family: BeVietnamPro; width: 100vw; &:not(:has(header-0)) { padding-top: var(--nav-height); } &.clt {} } hr { height: 1px; border: none; background: var(--red); width: 100%; } .default-width { display: block; width: clamp(250px, 80vw, 1100px); margin-inline: auto; } .default-width-2 { display: block; width: clamp(250px, 80vw, 1499px); margin-inline: auto; } .default-margin-vertical { margin-block: 4.9rem; @media screen and (max-width: 1100px) { margin-block: 2.45rem; } } img, body>video { border-radius: 3.75rem; } h2.title-0 { font-size: 2rem; font-weight: 300; text-transform: uppercase; grid-column: 1 / -1; text-align: center; letter-spacing: .75em; order: -1; } h2.title-1 { font-size: 2.75rem; font-weight: 100; text-align: center; margin: 0; } .team { >img { grid-column: 1/-1; min-width: 0; width: 100%; aspect-ratio: 2.5/1; object-position: top; object-fit: cover; } } .themas { >div { position: relative; display: flex; flex-direction: column; gap: .25rem; border-radius: 50px; aspect-ratio: 4/5; background-position: center; background-size: cover; box-sizing: border-box; padding: 1.5rem; hyphens: none; color: white; overflow: hidden; &::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, black 0%, transparent 100%); z-index: 1; opacity: 1; transition: opacity 0s; transition-delay: .25s; } } } #project { --image: url(https://mediabox.groepvanroey.be/m/e5043d33d349fa8b/original/VITO-Sustainability-Park-Mol-header-photo.webp); position: fixed; border-radius: 60px; transform: scale(1.025); background-position: center; background-size: cover; background-image: var(--image); z-index: 500; pointer-events: none; opacity: 0; &[active] { opacity: 1; inset: 0px !important; border-radius: 0px; transition: opacity .15s ease, inset .1s ease .15s, border-radius .1s ease .15s; pointer-events: all; } } #updates { display: flex; flex-direction: column; gap: 5rem; } .download-button { display: block; margin-inline: auto; font-size: 1.875rem; font-weight: 200; line-height: 1; box-sizing: border-box; padding: 1.625rem 4rem; width: fit-content; border-radius: 100rem; justify-self: center; cursor: pointer; background: var(--red); color: white; border: none; } .project-introduction { display: grid !important; grid-template-columns: auto 1fr; gap: 5rem; margin-top: 2rem; } .default-grid { display: grid !important; grid-template-columns: repeat(auto-fit, 17.5rem); gap: 25px; justify-content: center; >h2 { font-size: 2rem; font-weight: 300; text-transform: uppercase; grid-column: 1 / -1; text-align: center; letter-spacing: .75em; order: -1; } >.default-card { --image: url(https://mediabox.groepvanroey.be/m/e5043d33d349fa8b/original/VITO-Sustainability-Park-Mol-header-photo.webp); background-image: linear-gradient(to top, black 0%, transparent 50%, transparent 100%), var(--image); background-size: cover; background-position: center; /* box-shadow: grey 0 0 5px; */ display: flex; flex-direction: column; gap: .17em; border-radius: 3.75rem; aspect-ratio: 4/5; background-position: center; background-size: cover; box-sizing: border-box; padding: 1em; hyphens: none; overflow: hidden; cursor: pointer; color: white; text-decoration: none; font-size: 1.5rem; transition: box-shadow .15s ease, transform .15s ease; >h3 { margin: 0; margin-top: auto; z-index: 2; opacity: 1; transition: opacity 0s; transition-delay: .25s; hyphens: auto; font-size: inherit; font-weight: 600; } >div.content { font-weight: 100; font-size: .67em; min-height: 3em; z-index: 2; opacity: 1; transition: opacity 0s; transition-delay: .25s; font-weight: 100; } &.centered { display: flex; align-items: center; justify-content: center; text-align: center; background-image: linear-gradient(to top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 100%), var(--image); >h3 { margin-top: 0; } >&::before { content: unset; } } } }