html{
box-sizing: border-box;
font-size: 62.5%;
}
*{
will-change: transform scale;
}
body{
background-color: bisque;
padding: 0;
margin: 0;
}
.scene{
width: 100vw;
height: fit-content;
z-index: 100;
}
.menuPage{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #111111;
z-index: 200;
/* pointer-events: none; */
clip-path: polygon(0% 100% , 100% 100% , 100% 100% , 0% 100%);
display: flex;
flex-direction: column;
}
.menuMain{
position: relative;
top: 10vh;
display: flex;
width: 100vw;
height: 80vh;
background-color: transparent;
font-family: Clash;
font-weight: 350;
}
.menuMainLeft{
position: relative;
top: 5vh;
left: 20vw;
width: 40vw;
height: 100%;
display: flex;
}
.menuMainLeft img{
width: 30vw;
height: 70vh;
object-fit: cover;
filter: brightness(0.5);
}
.menuMainLeft video{
position: relative;
top: 20vh;
left: -20vw;
width: 15vw;
height: 35vh;
object-fit: cover;
}
.menuMainRight{
position: relative;
left: 20vw;
width: 40vw;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.menuItems{
position: relative;
left: 0;
list-style: none;
display: flex;
flex-direction: column;
padding: 0;
gap: 15px;
font-size: 4rem;
color: #fff;
}
.menuSocials{
position: relative;
list-style: none;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
padding: 0;
gap: 5px;
font-size: 2rem;
color: #767676;
}
.menuBottom{
position: relative;
top: 10vh;
width: 100vw;
height: 10vh;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Clash;
}
.menuBottomLeft{
position: relative;
left: 10vw;
color: #fff;
font-size: 2rem;
}
.menuBottomRight{
position: relative;
right: 10vw;
color: #fff;
font-size: 2rem;
}
.navigation{
width: 99vw;
filter: opacity(1);
display: flex;
justify-content: end;
position: fixed;
transition: .7s;
padding-left: 1vw;
z-index: 210;
}
.navigation.active{
filter: opacity(1);
}
.logo.active{
background-color: rgb(38, 37, 37);
}
.bar{
z-index: 2000;
width: 60px;
height: 60px;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
margin-top: 15px;
background-color: #fff;
border-radius: 50px;
transition: 1s;
}
.bar .middle{
height: 2px;
width: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
transition: .3s ease;
}
.bar .top{
top: 20px;
height: 2px;
width: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
transition: .3s ease;
}
.bar .bottom{
bottom: 20px;
height: 2px;
width: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
transition: .3s ease;
}
.bar .top.active{
transform: rotate(45deg);
width: 30px;
transform-origin: right;
background-color: #000;
top: 40px;
left: 10px;
}
.bar .middle.active{
transform: translateX(20px);
opacity: 0;
}
.bar .bottom.active{
transform: rotate(-45deg);
width: 30px;
transform-origin: right;
background-color: #000;
top: 19px;
left: 10px;
}
.bar.active:hover{
background-color: #000;
}
.bar:hover{
background-color: #000;
}
.bar:hover .top{
background-color: #fff;
}
.bar:hover .middle{
background-color: #fff;
}
.bar:hover .bottom{
background-color: #fff;
}
@font-face {
font-family: QuickSand;
src: url('Assets/Fonts/Quicksand-Variable.ttf');
}
@font-face {
font-family: Clash;
src: url('Assets/Fonts/ClashDisplay-Variable.ttf');
}
/* parallax wrapper: 2× viewport height for scroll */
.parallax {
position: absolute; /* take it out of static flow */
top: 0vh; /* tweak this so it sits *below* your container */
left: 0;
width: 100vw;
height: 200vh;
z-index: 10; /* somewhere between your hero (100) and container (300) if needed */
overflow: hidden;
}
/* Background image */
.parallax__background {
position: absolute;
top: 0;
left: 0;
width: 100%; height: 100%;
background: url('Assets/Images/HeroBg.jpg') center/cover no-repeat;
z-index: 1;
}
/* Dark overlay */
.parallax__overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}
/* TEXT BLOCK: start near the top */
.parallax__content {
position: absolute;
top: 20vh; /* adjust as needed */
left: 10vw;
z-index: 3;
max-width: 800px;
/* width: 90%; */
text-align: center;
color: #fff;
will-change: top;
}
.subtitle {
font-size: 3rem;
letter-spacing: 1px;
margin-bottom: 1rem;
opacity: 0.85;
}
.title {
position: relative;
top: 3vh;
font-size: 6rem;
line-height: 1.1;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
text-align: start;
font-family: Clash;
font-weight: 500;
font-size: 18rem;
}
/* .title span{
opacity: 0;
scale: 0.9;
} */
.description {
position: relative;
width: 40vw;
font-size: 2rem;
opacity: 0.85;
text-align: start;
font-family: QuickSand;
}
.scroll-prompt {
/* position: absolute;
top: 46vh;
left: 20vw;
width: 100vw;
display: flex;
justify-content: center; */
font-size: 0.875rem;
font-family: QuickSand;
text-transform: uppercase;
letter-spacing: 2px;
animation: bounce 2s infinite;
transition: filter 0.5s
}
.secondDescription {
width: 40vw;
font-size: 2rem;
margin-bottom: 2rem;
opacity: 0.85;
text-align: start;
font-family: QuickSand;
}
.contentLinks{
margin-top: 10vh;
width: 100vw;
height: fit-content;
display: flex;
justify-content: start;
gap: 20vw;
font-size: 2rem;
font-family: QuickSand;
}
.contentLeft{
width: 30vw;
height: 20vh;
display: flex;
align-items: center;
text-align: start;
}
.contentRight{
width: 30vw;
height: 20vh;
display: flex;
justify-content: center;
align-items: start;
gap: 10vw;
padding: 0;
}
.contentRight ul{
list-style-type: none;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
margin-block-start: 0em;
margin-block-end: 0em;
padding-inline-start: 0px;
}
.contentRight .info{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.workSection{
position: relative;
top: 180vh;
width: 100vw;
height: 320vh;
background-color: #fff;
z-index: 20;
will-change: top;
}
.revealBundle {
position: absolute; /* 1) establish a positioning context */
top: 60vh;
left: 15vw;
display: inline-block; /* shrink-wrap to the H1 */
/* overflow: hidden; if you want to clip during the reveal */
}
.workTitle {
margin: 0; /* kill default margins */
position: relative; /* so you can z-index it */
z-index: 1; /* below the cover */
font-size: 20rem;
font-family: Clash, sans-serif;
font-weight: 500;
line-height: 1; /* collapse vertical gaps */
will-change: top;
rotate: 10deg;
}
.titleCover {
position: absolute; /* 2) pull it out of the flow */
top: 0; /* align with the top of .revealBundle */
left: 0; /* align with the left of .revealBundle */
width: 100%; /* match the width of the text (or use your 60rem) */
height: 100%; /* match the height of the text container */
background-color: #fff;
z-index: 2; /* sit on top of the text */
}
.workTop{
position: relative;
top: 70vh;
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
z-index: 3;
}
.workTopLeft{
position: relative;
width: 40vw;
height: 95vh;
left: 15vw;
overflow: hidden;
}
.workTopLeft img{
position: relative;
width: 100%;
height: 120%;
object-fit: cover;
will-change: top;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.workTopRight{
position: relative;
width: 40%;
height: 100%;
}
.workTopRight h4{
font-size: 1.5rem;
font-weight: 400;
font-family: Clash;
}
.workTopRight p{
font-size: 2rem;
font-weight: 400;
font-family: QuickSand;
width: 30vw;
}
.textScatter{
position: absolute;
top: 140vh;
left: 5vw;
width: 30vw;
height: fit-content;
color: #1d1d1d;
font-size: 2rem;
font-family: QuickSand;
line-height: 1.6;
text-align: left;
display: block; /* Or remove display entirely to use default block behavior */
overflow-wrap: break-word;
}
.textScatter .letter{
opacity: 0;
}
.imgScatter1{
position: absolute;
top: 70vh;
right: 15vw;
width: 22.5vw;
height: 55vh;
will-change: top;
}
.imgScatter1 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.imgScatter2{
position: absolute;
top: 140vh;
right: 25vw;
width: 32.5vw;
height: 75vh;
will-change: top;
}
.imgScatter2 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.imgScatter3{
position: absolute;
top: 195vh;
left: 15vw;
width: 20vw;
height: 50vh;
will-change: top;
}
.imgScatter3 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.scroll-prompt2 {
position: absolute;
top: 240vh;
width: 100vw;
display: flex;
justify-content: center;
color: #111;
font-size: 1rem;
font-family: QuickSand;
text-transform: uppercase;
letter-spacing: 2px;
animation: bounce 2s infinite;
transition: filter 0.5s
}
.thirdSection{
position: relative;
top: 140vh;
width: 100vw;
height: 100vh;
background-color: #111111;
z-index: 100;
will-change: transform;
}
.thirdSectionVid{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
z-index: 15;
}
.thirdSectionVid video{
width: 30%;
height: 30%;
object-fit: cover;
filter: brightness(0.5);
}
.textRow{
position: absolute;
top: 10vh;
display: flex;
justify-content: space-around;
width: 100vw;
height: fit-content;
color: #fff;
font-family: Clash;
font-size: 5rem;
letter-spacing: 2px;
z-index: 5;
gap: 30vw;
filter: opacity(1);
}
.textRowCovers{
position: absolute;
top: 30vh;
display: flex;
justify-content: space-around;
width: 100vw;
height: 10rem;
z-index: 10;
gap: 30vw;
}
.coverLeft{
background-color: #111111;
width: 200px;
display: flex;
justify-content: center;
}
.coverRight{
background-color: #111111;
width: 200px;
display: flex;
justify-content: center;
}
.RowLeft{
position: relative;
top: 12vh;
width: 200px;
display: flex;
font-weight: 300;
justify-content: center;
rotate: 10deg;
}
.RowRight{
position: relative;
top: 12vh;
width: 200px;
display: flex;
font-weight: 300;
justify-content: center;
rotate: 10deg;
}
.with{
position: absolute;
top: 22.5vh;
width: 100vw;
height: fit-content;
display: flex;
justify-content: center;
color: #fff;
font-family: QuickSand;
font-size: 3rem;
z-index: 20;
filter: opacity(0);
}
.a{
position: absolute;
top: 35vh;
left: 12.5vw;
font-family: Clash;
font-size: 20rem;
color: #fff;
z-index: 20;
filter: opacity(0);
transform: rotateX(180deg);
will-change: left;
}
.z{
position: absolute;
top: 35vh;
right: 12.5vw;
font-family: Clash;
font-size: 20rem;
color: #fff;
z-index: 20;
filter: opacity(0);
transform: rotateX(180deg);
will-change: right;
}
.thirdSectionInfo{
position: absolute;
top: 75vh;
width: 100vw;
height: fit-content;
display: flex;
justify-content: center;
color: #fff;
font-family: QuickSand;
font-size: 2rem;
text-align: center;
z-index: 20;
}
.thirdSectionInfo p {
width: 35vw;
}
.fourthSection{
position: relative;
top: 200vh;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
font-size: 5rem;
font-family: Clash;
font-weight: 400;
background-color: #fff;
z-index: 20;
will-change: transform;
}
.fourthMid{
position: absolute;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.rect{
width: 30vw;
height: 30vh;
background-color: #111;
z-index: 15;
will-change: width height;
}
.rectImg{
position: absolute;
top: 10vh;
left: 60vw;
width: 30vw;
height: 80vh;
object-fit: cover;
clip-path: inset(100% 0px 0px 0px);
will-change: clip-path top left filter;
z-index: 300000;
filter: grayscale(1);
}
.rectImg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.fourthLeft{
position: relative;
width: 50vw;
height: 100vh;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
z-index: 20;
color: white;
mix-blend-mode: difference;
}
.fourthRight{
position: relative;
width: 50vw;
height: 100vh;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
z-index: 20;
color: white;
mix-blend-mode: difference;
}
.fourthLeft span{
scale: 0;
will-change: scale;
}
.fourthRight span{
scale: 1;
will-change: scale;
}
.fifthSection{
position: relative;
top: 200vh;
width: 100vw;
height: 150vh;
background-color: #fff;
z-index: 5;
will-change: top;
}
.fifthScatter img{
width: 100%;
height: 100%;
object-fit: cover;
}
.fifthScatter{
will-change: left;
}
.fifthScatter:nth-of-type(1){
position: absolute;
top: 10vh;
left: 15vw;
width: 30vw;
height: 30vh;
}
.fifthScatter:nth-of-type(2){
position: absolute;
top: 20vh;
left: 50vw;
width: 30vw;
height: 30vh;
}
.fifthScatter:nth-of-type(3){
position: absolute;
top: 50vh;
left: 20vw;
width: 20vw;
height: 50vh;
}
.fifthScatter:nth-of-type(4){
position: absolute;
top: 60vh;
left: 60vw;
width: 12.5vw;
height: 30vh;
}
.fifthSectionText{
position: relative;
width: 100vw;
top: 130vh;
display: flex;
justify-content: center;
font-family: QuickSand;
font-weight: 100;
font-size: 1.5rem;
}
/* .sixthSection{
background-color: aqua;
width: 100vw;
height: 300vh;
} */
.footer{
position: relative;
top: 165vh;
width: 100vw;
height: 40vh;
background-color: #111111;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: hidden;
}
.footerDown{
width: 100vw;
display: flex;
justify-content: center;
padding: 0px;
color: #fff;
height: 100%;
font-family: Clash;
font-size: 30rem;
position: relative;
top: 45px;
}
.footerUp{
position: relative;
top: 75px;
width: 100vw;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
gap: 25px;
}
.fUU{
display: flex;
gap: 20px;
}
.fUD{
font-family: QuickSand;
font-size: 0.8rem;
}
.instagram{
width: 50px;
height: 50px;
}
.instagram img{
width: 100%;
height: 100%;
object-fit: cover;
filter: invert(1);
}
.x{
width: 50px;
height: 50px;
}
.x img{
width: 100%;
height: 100%;
object-fit: cover;
}
.linkedIn{
width: 50px;
height: 50px;
}
.linkedIn img{
width: 100%;
height: 100%;
object-fit: cover;
filter: invert(1);
}
@keyframes bounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: clip;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
/* ================================
FULL-SITE RESPONSIVE OVERRIDES
(screens ≤ 768px)
================================ */
@media (max-width: 768px) {
/* 1. Global font scaling & body adjustments */
html {
font-size: 50%; /* reduces rem-based sizes from 62.5% → 50% */
}
body {
padding: 0;
margin: 0;
}
.menuPage{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #111111;
z-index: 200;
/* pointer-events: none; */
clip-path: polygon(0% 100% , 100% 100% , 100% 100% , 0% 100%);
display: flex;
flex-direction: column;
}
.menuMain{
position: relative;
top: 10vh;
display: flex;
width: 100vw;
height: 80vh;
background-color: transparent;
font-family: Clash;
font-weight: 350;
}
.menuMainLeft{
display: none;
}
.menuMainLeft img{
width: 30vw;
height: 70vh;
object-fit: cover;
filter: brightness(0.5);
}
.menuMainLeft video{
position: relative;
top: 20vh;
left: -20vw;
width: 15vw;
height: 35vh;
object-fit: cover;
}
.menuMainRight{
position: relative;
left: 20vw;
width: 40vw;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.menuItems{
position: relative;
left: 0;
list-style: none;
display: flex;
flex-direction: column;
padding: 0;
gap: 15px;
font-size: 4rem;
color: #fff;
}
.menuSocials{
position: relative;
list-style: none;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
padding: 0;
gap: 5px;
font-size: 2rem;
color: #767676;
}
.menuBottom{
position: relative;
top: 10vh;
width: 100vw;
height: 10vh;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Clash;
}
.menuBottomLeft{
position: relative;
left: 10vw;
color: #fff;
font-size: 2rem;
}
.menuBottomRight{
position: relative;
right: 10vw;
color: #fff;
font-size: 2rem;
}
.navigation{
width: 99vw;
filter: opacity(1);
display: flex;
justify-content: end;
position: fixed;
transition: .7s;
padding-left: 1vw;
z-index: 210;
}
.navigation.active{
filter: opacity(1);
}
.logo.active{
background-color: rgb(38, 37, 37);
}
.bar{
z-index: 2000;
width: 60px;
height: 60px;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
margin-top: 15px;
background-color: #fff;
border-radius: 50px;
transition: 1s;
}
.bar .middle{
height: 2px;
width: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
transition: .3s ease;
}
.bar .top{
top: 20px;
height: 2px;
width: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
transition: .3s ease;
}
.bar .bottom{
bottom: 20px;
height: 2px;
width: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
transition: .3s ease;
}
.bar .top.active{
transform: rotate(45deg);
width: 30px;
transform-origin: right;
background-color: #000;
top: 40px;
left: 10px;
}
.bar .middle.active{
transform: translateX(20px);
opacity: 0;
}
.bar .bottom.active{
transform: rotate(-45deg);
width: 30px;
transform-origin: right;
background-color: #000;
top: 19px;
left: 10px;
}
.bar.active:hover{
background-color: #000;
}
.bar:hover{
background-color: #000;
}
.bar:hover .top{
background-color: #fff;
}
.bar:hover .middle{
background-color: #fff;
}
.bar:hover .bottom{
background-color: #fff;
}
/* 2. PARALLAX SECTION */
.parallax {
height: 180vh; /* shorten total scroll height */
}
.parallax__content {
position: absolute;
left: 0vw;
top: 50.5vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.title {
font-size: 8rem; /* shrink “Innovation Intelligence Elevation” */
line-height: 1.1;
text-align: center;
}
.description,
.secondDescription {
position: relative;
left: 5vw;
width: 90vw;
font-size: 1.6rem;
text-align: center;
}
.description{
top: -20vh;
}
.secondDescription{
position: relative;
top: 10vh;
}
.scroll-prompt {
position: relative;
width: 100vw;
display: flex;
justify-content: center;
top:0vh;
font-size: 1rem;
}
.contentLinks {
position: relative;
top: 5vh;
width: 100vw;
flex-direction: column;
gap: 2rem;
align-items: center;
}
.contentLeft,
.contentRight {
width: 90vw;
height: auto;
text-align: center;
}
.contentLeft{
display: flex;
justify-content: center;
}
.contentRight ul {
width: 25vw;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.contentRight .info {
flex-direction: column;
gap: 1rem;
justify-content: center;
}
/* 3. WORK SECTION */
.workSection {
top: 120vh; /* pull up on mobile */
height: 400vh; /* let content expand vertically */
padding-bottom: 5rem;
}
.revealBundle {
top: 40vh;
left: 0vw;
}
.workTitle {
width: 100vw;
display: flex;
justify-content: center;
position: relative;
left: 0vw;
font-size: 12rem; /* shrink “Work” */
}
.workTop {
flex-direction: column;
gap: 3rem;
align-items: center;
top: 50vh;
height: auto;
}
.workTopRight {
position: relative;
top: -3vh;
left: 0;
width: 100vw;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.workTopLeft{
position: relative;
left: 0;
width: 100vw;
height: auto;
display: flex;
justify-content: center;
}
.workTopLeft img {
width: 80%;
height: auto;
object-fit: cover;
}
.workTopRight p {
position: relative;
left: 10vw;
width: 80vw;
font-size: 1.6rem;
}
.textScatter{
position: absolute;
top: 315vh;
left: 25vw;
width: 50vw;
height: fit-content;
color: #1d1d1d;
font-size: 2rem;
font-family: QuickSand;
text-align: center;
}
.imgScatter1,
.imgScatter2,
.imgScatter3 {
position: relative;
top: auto !important;
left: auto !important;
right: auto !important;
width: 80vw;
height: 65vh;
margin-bottom: 2rem;
overflow-y: hidden;
}
.imgScatter1 img{
position: relative;
width: 100%;
height: 120%;
top: -10vh;
}
.imgScatter2 img{
position: relative;
width: 100%;
height: 120%;
top: -10vh;
}
.imgScatter3 img{
position: relative;
width: 100%;
height: 120%;
top: -10vh;
}
.scroll-prompt2 {
top: 200vh;
font-size: 0.9rem;
}
/* 4. THIRD SECTION */
.thirdSection {
height: 100vh;
padding-bottom: 0rem;
top: 140vh; /* adjust if needed */
}
.textRow {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
top: 8vh;
gap: 40vh;
font-size: 3.5rem;
}
.textRowCovers {
position: absolute;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
top: 2.5vh;
gap: 10vh;
}
.coverLeft,
.coverRight {
width: 150px;
height: 100px;
background-color: #111111;
}
.with {
top: 25vh;
font-size: 2rem;
}
.a{
position: absolute;
left: 0vw;
top: 25vh;
width: 100vw;
display: flex;
justify-content: center;
font-family: Clash;
font-size: 15rem;
color: #fff;
z-index: 20;
filter: opacity(0);
transform: rotateX(180deg);
will-change: top;
}
.z{
position: absolute;
left: 0;
top: 80vh;
width: 100vw;
display: flex;
justify-content: center;
font-family: Clash;
font-size: 15rem;
color: #fff;
z-index: 20;
filter: opacity(0);
transform: rotateX(180deg);
will-change: top;
}
.thirdSectionInfo p {
display: none;
width: 90vw;
font-size: 1.6rem;
line-height: 1.4;
}
.thirdSectionVid {
height: 100vh;
width: 100vw;
}
.thirdSectionVid video {
width: 15%;
height: 15%;
}
/* 5. FOURTH SECTION */
.fourthSection {
position: relative;
top: 190vh;
flex-direction: column;
height: 100vh;
font-size: 3.5rem; /* shrink text spans’ default font-size */
}
.fourthMid{
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.rect{
width: 0vw;
height: 0vh;
background-color: #111;
z-index: 15;
will-change: width height;
}
.rectImg{
position: absolute;
top: 35vh;
left: 10vw;
width: 80vw;
height: 30vh;
object-fit: cover;
clip-path: inset(100% 0px 0px 0px);
will-change: clip-path top left filter;
z-index: 300;
filter: grayscale(1);
}
.fourthLeft{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fourthLeft span {
display: block;
font-size: 3.5rem; /* smaller than desktop 5rem */
margin: 1rem 0;
text-align: center;
}
.fourthRight{
display: none;
}
/* 6. FIFTH SECTION */
.fifthSection{
position: relative;
top: 190vh;
width: 100vw;
height: 150vh;
background-color: #fff;
z-index: 5;
will-change: top;
}
.fifthScatter img{
width: 100%;
height: 100%;
object-fit: cover;
}
.fifthScatter{
will-change: left;
}
.fifthScatter:nth-of-type(1){
position: absolute;
top: 17.5vh;
left: 15vw;
width: 50vw;
height: 30vh;
}
.fifthScatter:nth-of-type(2){
position: absolute;
top: 10vh;
left: 50vw;
width: 40vw;
height: 20vh;
}
.fifthScatter:nth-of-type(3){
position: absolute;
top: 70vh;
left: 10vw;
width: 60vw;
height: 20vh;
}
.fifthScatter:nth-of-type(4){
position: absolute;
top: 105vh;
left: 60vw;
width: 30vw;
height: 15vh;
}
/* 7. FOOTER */
.footer{
position: relative;
top: 155vh;
width: 100vw;
height: 40vh;
background-color: #111111;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: hidden;
}
.footerDown{
width: 100vw;
display: flex;
justify-content: center;
padding: 0px;
color: #fff;
height: 100%;
font-family: Clash;
font-size: 15rem;
position: relative;
top: 150px;
}
.footerUp{
position: relative;
top: 125px;
width: 100vw;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
gap: 25px;
}
.fUU{
display: flex;
gap: 20px;
}
.fUD{
font-family: QuickSand;
font-size: 1rem;
}
.instagram{
width: 30px;
height: 30px;
}
.instagram img{
width: 100%;
height: 100%;
object-fit: cover;
filter: invert(1);
}
.x{
width: 30px;
height: 30px;
}
.x img{
width: 100%;
height: 100%;
object-fit: cover;
}
.linkedIn{
width: 30px;
height: 30px;
}
.linkedIn img{
width: 100%;
height: 100%;
object-fit: cover;
filter: invert(1);
}
}