body {
overflow-x: hidden;
min-height: 100dvh;
background: #FCFCFC;
} .page-wrapper {
display: flex;
flex-direction: column;
min-height: 100dvh;
position: relative;
}
.hero-section {
height: 100dvh;
position: relative;
display: flex;
flex-direction: column;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #FCFCFC;
} .hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom,
rgba(8, 8, 7, 0.2) 0%,
rgba(8, 8, 7, 0.1) 50%,
rgba(8, 8, 7, 0.5) 100%);
z-index: 1;
} .hero-section header {
position: relative;
z-index: 2;
} .hero-info {
position: absolute;
bottom: 60px;
left: 0;
right: 0;
z-index: 2;
}
.project-title-block {
display: flex;
flex-direction: column;
gap: 50px;
}
.project-title {
color: #FCFCFC;
font-family: Arial;
font-size: 110px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.project-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 40px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
width: 100%;
}
.project-meta .location,
.project-meta .year {
font-weight: 400;
}
.project-meta .action {
font-size: 14px;
letter-spacing: 2px;
} .project-description {
padding: 80px 0;
background: #FCFCFC;
}
.description-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.description-column p {
color: #878585;
font-size: 25px;
font-style: normal;
line-height: normal;
}
.description-column p:first-child {
padding-bottom: 40px;
}
.description-column p:last-child {
margin-bottom: 0;
} .project-gallery {
padding: 0 0 60px;
background: #FCFCFC;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 45px;
margin-bottom: 55px;
}
.gallery-item {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
background: #f0f0f0;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
} .gallery-item.gallery-hidden {
display: none !important;
}
.gallery-item.visible {
display: block !important;
} .gallery-item.fade-in {
animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .see-all-container {
text-align: center;
padding-top: 20px;
}
.see-all-btn {
background: transparent;
border: none;
color: #878585;
font-family: "Gill Sans";
font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2px;
cursor: pointer;
position: relative;
padding: 15px 0;
transition: all 0.3s ease;
}
.see-all-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 2px;
background: #878585;
transition: width 0.3s ease;
}
.see-all-btn:hover::after {
width: 120%;
} .lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.lightbox.active {
display: flex;
opacity: 1;
}
.lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
cursor: pointer;
}
.lightbox-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
pointer-events: none;
}
.lightbox-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
pointer-events: auto;
user-select: none;
cursor: grab;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.lightbox-content img:active {
cursor: grabbing;
} .lightbox-close {
position: absolute;
top: 20px;
right: 40px;
width: 50px;
height: 50px;
background: none;
border: none;
color: #fff;
font-size: 50px;
font-weight: 300;
cursor: pointer;
z-index: 10;
pointer-events: auto;
transition: transform 0.3s ease;
line-height: 1;
}
.lightbox-close:hover {
transform: rotate(90deg);
} .lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #fff;
font-size: 40px;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
pointer-events: auto;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.lightbox-prev {
left: 40px;
}
.lightbox-next {
right: 40px;
} .lightbox-counter {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-family: "Gill Sans", sans-serif;
font-size: 16px;
letter-spacing: 2px;
pointer-events: none;
} .mobile-description {
display: none;
color: #878585;
font-family: "Gill Sans";
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-bottom: 25px;
}
.project-description-mobile {
padding-bottom: 35px;
padding-top: 30px;
} @media (max-width: 1024px) {
.project-title {
font-size: 60px;
}
.description-grid {
gap: 40px;
}
}
@media (max-width: 768px) {
.hero-info {
bottom: 40px;
}
.project-title-block {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.project-meta {
font-size: 16px;
}
.project-description {
padding: 50px 0;
}
.description-grid {
grid-template-columns: 1fr;
gap: 0;
}
.description-column p {
font-size: 16px;
line-height: 1.6;
}
.gallery-grid {
gap: 20px;
} .lightbox-content {
padding: 20px;
}
.lightbox-close {
top: 10px;
right: 20px;
width: 40px;
height: 40px;
font-size: 40px;
}
.lightbox-prev,
.lightbox-next {
width: 45px;
height: 45px;
font-size: 30px;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-counter {
bottom: 20px;
font-size: 14px;
}
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.gallery-item {
aspect-ratio: 16/12;
}
.project-description {
display: none;
}
.mobile-description {
display: block;
}
}
@media (max-width: 480px) {
.project-meta {
font-size: 14px;
}
.project-meta .action {
display: none;
}
.description-column p {
font-size: 14px;
margin-bottom: 20px;
}
.see-all-btn {
font-size: 14px;
}
.gallery-grid {
margin-bottom: unset;
}
.project-gallery {
padding: 0 0 60px;
background: #FCFCFC;
}
}