body { margin: 0; padding: 0; background-color: #000; color: #fff; font-family: 'Helvetica Neue', sans-serif; } #section-one { height: 100vh; width: 100%; position: relative; overflow: hidden; } #section-one canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #section-one .content-img-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } #section-one img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 2s ease-in-out; } #section-one .overlay { position: absolute; top: 50%; left: 30%; max-width: 50%; transform: translate(-50%, -50%); font-size: 10vh; font-weight: bold; pointer-events: none; text-transform: uppercase; color: black; } .overlay .tagline { font-size: 3.5vh; font-weight: 300; margin-top: 0.2em; opacity: 0.8; text-transform: none; } @media (max-aspect-ratio: 1/1) { #section-one .overlay { left: 50%; width: 90%; max-width: 90%; } } @media (max-aspect-ratio: 3/5) { #section-one .overlay { font-size: 5vh; } } #section-two { position: relative; height: 400vh; overflow: hidden; } #section-two .pin-wrapper { position: relative; height: 100vh; width: 100%; overflow: hidden; } #section-two .content { position: absolute; top: 0; left: 0; display: flex; width: 400vw; height: 100vh; } #section-two .animation-container { position: absolute; left: 0; bottom: 0; width: 30%; height: 40vh; display: flex; justify-content: center; align-items: center; z-index: 10; } #section-two .walking-dude-svg { height: 42vh; } #section-two .content-section { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } #section-two .content-section:nth-child(1) { background-color: #E2D03E; } #section-two .content-section:nth-child(2) { background-color: #4DAE85; } #section-two .content-section:nth-child(3) { background-color: #ED5D53; } #section-two .content-section:nth-child(4) { background-color: #ffffff; } #section-two .content-section > div.panel-text-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90%; margin-top: -50vh; max-width: 900px; text-align: center; position: relative; z-index: 2; } #section-two h1 { padding: 0; margin: .5em 0; } #section-two .content-section:nth-child(1) h1, #section-two .content-section:nth-child(1) .arrow-animated { color: black; } #section-two .content-section:nth-child(4) h1 { color: black; font-size: 6vh; } #section-two p { padding: 0; margin: .25em 0; } #section-two a { color: black; text-decoration: none; } .arrow-animated { font-size: 35px; animation: bounce 2s infinite 2s; } .room-svg-wrapper { position: absolute; bottom: 5%; right: 5%; width: 85%; max-width: 600px; z-index: 1; opacity: 0.8; } #room-svg path, #room-svg line, #room-svg rect, #room-svg circle, #room-svg polyline, #room-svg polygon { stroke-dasharray: 1000; stroke-dashoffset: 1000; } .scroll-down { display: none; position: absolute; bottom: 30px; left: 50%; margin-left: -16px; width: 32px; height: 32px; border: 2px solid black; background-color: transparent; border-radius: 50%; z-index: 10; animation: bounce 2s infinite 2s; transition: all .2s ease-in; transform: scale(1); cursor: pointer; } .scroll-down:before { position: absolute; top: calc(50% - 8px); left: calc(50% - 6px); transform: rotate(-45deg); display: block; width: 12px; height: 12px; content: ""; border: 2px solid black; border-width: 0px 0 2px 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .final-arrow { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: black; cursor: pointer; z-index: 5; } #section-three { min-height: 100vh; width: 100%; background-color: #000000; display: flex; justify-content: center; align-items: center; text-align: center; padding: 5rem 3%; box-sizing: border-box; } #section-three .contact-container { max-width: 800px; font-family: 'DM Sans', sans-serif; font-weight: 400; color: #A3A3A3; } #section-three .manifesto-title { margin-bottom: 2.5rem; } .manifesto-head { display: block; font-family: 'DM Sans', sans-serif; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.1em; color: #ffffff; text-transform: none; margin-bottom: 0.25em; } .manifesto-sub { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.15em; color: #BBBBBB; text-transform: uppercase; } #section-three .contact-button { display: inline-block; padding: 15px 35px; background-color: #A3A3A3; color: #000; text-decoration: none; border-radius: 50px; font-size: 1.2rem; font-weight: 500; margin-bottom: 3rem; transition: background-color 0.3s ease; } #section-three .contact-button:hover { background-color: #ffffff; } #section-three p { line-height: 1.8; font-size: 1.1rem; margin-bottom: 1.5em; } #section-three .contact-container p:not(.manifesto-title) { opacity: 0.9; } #section-three strong { color: #E0E0E0; font-weight: 500; opacity: 1; } @media (max-width: 768px) { .scroll-down { display: block; } #section-three { height: auto; padding-top: 4rem; padding-bottom: 4rem; } .room-svg-wrapper { top: 50vh; right: -5%; } .final-arrow { bottom: 8vh; } } @media (max-width: 600px) { .manifesto-head { font-size: 1.25rem; } .manifesto-sub { font-size: 0.75rem; } }