@@ -0,0 +1,464 @@
|
||||
:root {
|
||||
--secondary-color: #ff6700 /* Rot */
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: Geist-Bold;
|
||||
src: url(/fonts/Geist-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Geist-Medium;
|
||||
src: url(/fonts/Geist-Medium.ttf);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Geist-Bold;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
header.menu-open {
|
||||
backdrop-filter:none;
|
||||
-webkit-backdrop-filter: none;
|
||||
|
||||
color: black;
|
||||
}
|
||||
|
||||
header #logo{
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 3em;
|
||||
margin-top: 10vh;
|
||||
color: white;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-bottom: 3vh;
|
||||
line-height: 83%;
|
||||
}
|
||||
|
||||
.partners{
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
.partners p{
|
||||
color: white;
|
||||
font-family: Geist-Medium;
|
||||
font-weight: 100;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
.partners a{
|
||||
text-decoration: none;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.partners ul li{
|
||||
color: white;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.visual .subtitle{
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-top: 1vh;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.row{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.text-box{
|
||||
color: white;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-bottom: 5vh;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.text-box h3{
|
||||
font-size: 2em;
|
||||
line-height: 83%;
|
||||
margin-bottom: 1vh;
|
||||
|
||||
}
|
||||
|
||||
.text-box h4{
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 2vh;
|
||||
line-height: 83%;
|
||||
font-family: Geist-Medium;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.text-box h5{
|
||||
line-height: 83%;
|
||||
margin-bottom: 1vh;
|
||||
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.text-box p{
|
||||
font-family: Geist-Medium;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.visual{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
.visual-stars-range{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2vh;
|
||||
|
||||
}
|
||||
.visual-stars-range #stars-range{
|
||||
object-fit: contain;
|
||||
|
||||
|
||||
width: 110%;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-bottom: 1vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
|
||||
.visual video{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#youre-id{
|
||||
width: 80%;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
margin-bottom: 3vh;
|
||||
|
||||
}
|
||||
|
||||
.visual p{
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
line-height: 83%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.visual img{
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
.visual-contain{
|
||||
object-fit: contain;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.visual-contain img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.double-visual{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
width: 94%;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
}
|
||||
|
||||
.double-visual .dv-child{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.double-visual .dv-child img{
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
.double-visual .dv-child p{
|
||||
font-family: Geist-Medium;
|
||||
margin-top: 2vh;
|
||||
margin-bottom: 5vh;
|
||||
color: white;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
|
||||
#tge-keyvisual{
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-bottom: 1vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.visual .visual-row{
|
||||
width: 100vw;
|
||||
margin-bottom: 0.5vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.visual-row video{
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
width: 33vw;
|
||||
}
|
||||
.visual-row img{
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
width: 33vw;
|
||||
}
|
||||
.visual-row .cad-models{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 33vw;
|
||||
|
||||
}
|
||||
|
||||
.visual-row .cad-models img{
|
||||
width: 100%;
|
||||
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
height: 20vh;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
footer a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1500px){
|
||||
|
||||
.row{
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 8em;
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
margin-bottom: 3vh;
|
||||
margin-top: 10vh;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.visual .subtitle{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
font-size: 1.5em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.text-box{
|
||||
padding-left: 0%;
|
||||
}
|
||||
|
||||
.text-box h3{
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.text-box h4{
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.text-box h5{
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.text-box p{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.partners{
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
margin-bottom: 1vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1500px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.partners p{
|
||||
color: white;
|
||||
font-family: Geist-Medium;
|
||||
font-weight: 100;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
.partners ul li{
|
||||
color: white;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
#tge-visual-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 5vh
|
||||
}
|
||||
|
||||
#tge-keyvisual{
|
||||
width: 30vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.visual-stars-range #stars-range{
|
||||
object-fit: contain;
|
||||
|
||||
|
||||
width: 1470px;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
margin-bottom: 1vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.visual img, .visual video{
|
||||
object-fit: cover;
|
||||
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.visual-contain{
|
||||
width: 100%;
|
||||
|
||||
max-height: 70vh;
|
||||
margin: auto;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
.visual-contain img{
|
||||
object-fit: contain;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#youre-id{
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#event-concept{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.visual .visual-row{
|
||||
width: 49.5%;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.visual .visual-row video{
|
||||
width: 11vw;
|
||||
height: 40vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
.visual .visual-row img{
|
||||
width: 11vw;
|
||||
object-fit: cover;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.visual .visual-row .cad-models{
|
||||
object-fit: cover;
|
||||
width: 11vw;
|
||||
|
||||
}
|
||||
|
||||
.visual .visual-row .cad-models img{
|
||||
object-fit: cover;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user