h4{
text-align:left;
color: black;
font-size: 2.6vw;
font-weight: 500;
line-height: 1;
}
h5{
color: black;
font-size: 3vw;
font-weight: 700;
position: sticky;
top: 0;
bottom: 0;
}
h6 {
font-size: 1.6vw;
font-weight: 400;
}
a{
color: #7b7b7b;
}
#project-description {
font-size: 36px;
line-height: 1.2;
text-transform: uppercase;
color: black;
line-break: loose;
}
.readmore{
font-family: "Helvetica Now", "Lucida Sans", Tahoma, sans-serif;
}
.button .elementor-button {
align-items: center;
padding: 6px 14px 4px;
border-radius: 41px;
border: 1px solid black;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
background-color: white;
color: black;
line-height: 1.5;
transition: background-color 0.3s, color 0.3s;
}
.button .elementor-button:hover {
background-color: black;
color: white;
}
#projekt-beschreibung{
font-size: 1vw;
}
.elementor-video:hover {
cursor: pointer;
}
#lottie {
align-items: center;
}
.title-home {
text-align:left;
color: black;
font-size: calc((40vw - 145px) * 0.1695);
font-weight: 800;
line-height: 0.9;
text-transform: uppercase;
overflow: hidden;
}
#title-italic {
font-style: italic;
}
.title {
text-align:left;
color: black;
font-size: 9vw;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
overflow: hidden;
}
.title2 {
text-align:left;
color: black;
font-size: 9vw;
font-weight: 800;
line-height: 0.9;
text-transform: uppercase;
overflow: hidden;
}
.title-about {
text-align:left;
color: black;
font-size: 15vw;
font-weight: 800;
line-height: 0.9;
text-transform: uppercase;
overflow: hidden;
}
.title2-about {
text-align:left;
color: black;
font-size: 15vw;
font-weight: 800;
line-height: 0.9;
text-transform: uppercase;
overflow: hidden;
}
.word {
display: inline-block;
transform: translateY(100%);
opacity: 0;
}
#header-sub{
opacity: 0;
}
#circle {
width: 130px;
height: 130px;
text-align: center;
color: white;
text-transform: uppercase;
font-family: "Futura Now Headline";
font-weight: 500;
font-size: 18px;
background: black;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
pointer-events: none;
position: absolute;
transform: scale(0);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#pin-text {
font-size: 2rem;
max-width: 400px;
}
#img {
height: 80vh;
width: auto;
object-fit: cover;
}
* {
box-sizing: border-box;
}
#sectionPin {
height: 100vh;
overflow: hidden;
display: flex;
left: 0;
}
.pin-wrap {
height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 50px;
}
.pin-wrap > * {
min-width: 60vw;
padding: 0 5vw 0 0;
}
@media (max-width: 768px) {
h2 {
font-size: 20px; font-weight: 500; }
} @media (max-width: 480px) {
h2 {
font-size: 18px; font-weight: 400; }
}
summary::-webkit-details-marker,
summary::marker {
display: none;
content: "";
}
#wordsection {
height: 100vh;
display: grid;
place-items: center;
font-size: 1.8vmin;
margin-left: -12vw;
}
.container {
height: 50vh;
transform: rotate(-90deg);
margin-top: -8%;
}
.level-1.top-level {
margin-left: 0px; }
.container > details {
transform: rotate(90deg);
} details {
position: relative;
width: max-content;
transform-origin: 33% center;
transform:
rotate(var(--rotation))
translate(20%);
transition: all .3s .2s;
}
.level-1 h1{
display: block;
font-size: 2.3em;
margin-block-start: 0.69em;
margin-block-end: 0.69em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 700;
}
.level-2 h2{
display: block;
font-size: 1.4em;
margin-block-start: 1.45em;
margin-block-end: 1.45em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 600; }
.level-3 h3{
display: block;
font-size: 0.98em;
margin-block-start: 1.55em;
margin-block-end: 1.55em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 550; }
.level-4 h4{
display: block;
font-size: 0.88em;
margin-block-start: 1.678em;
margin-block-end: 1.678em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500; }
.level-5 h5{
display: block;
font-size: 0.77em;
margin-block-start: 1.87em;
margin-block-end: 1.87em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 450; } summary {
transform: rotate(var(--fixed-rotation));
}
details:hover,
details:focus-within {
scale: 1.05;
}
details[open]:hover,
details[open]:focus-within {
z-index: 1;
}
.items {
position: absolute;
top: 50%;
right: 0;
transform:
translate(50%, -50%)
scale(0.5);
opacity: calc(0.7 - var(--level) / 15);
filter: blur(1px) contrast(0);
transition: all .3s;
}
details[open] .items {
animation: items-appear forwards;
animation-duration: calc(300ms + var(--i) * 50ms);
animation-delay: calc(var(--i) * 30ms);
}
@keyframes items-appear {
to {
transform: translate(100%, -50%) scale(1);
}
}
details:hover > .items,
details:focus-within > .items {
opacity: 1;
filter: none;
}
#text-column {
align-content: center;
}
#explanation {
display: flex;
height: 100vh;
align-items: center;
font-size: 1.4em;
font-weight: 500;
transition: opacity 0.3s;
}
#mouse-circle {
position: absolute;
width: 0;
height: 0;
margin: 0;
border-radius: 50%;
pointer-events: none !important;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
transition: width 0.3s, height 0.3s, opacity 0.3s;
opacity: 0;
z-index: 999;
}
#circle-text {
color: white;
font-size: 16px;
font-weight: bold;
z-index: 999;
}
#hover-area {
position: relative;
}
S