.dj-project-hero{
position:relative;
padding:
260px 0
180px;
overflow:hidden;
}
.dj-project-hero::before{
content:"";
position:absolute;
top:-300px;
right:-300px;
width:900px;
height:900px;
border-radius:50%;
background:
radial-gradient(
rgba(0,200,150,.08),
transparent 70%
);
pointer-events:none;
}
.dj-project-hero-grid{
display:grid;
grid-template-columns:
1.2fr
.8fr;
gap:100px;
align-items:center;
position:relative;
z-index:2;
}
.dj-project-info{
max-width:700px;
}
.dj-project-info h1{
margin:
20px 0 24px;
}
.dj-project-info p{
font-size:1.15rem;
margin-bottom:30px;
}
.dj-project-cover{
position:relative;
}
.dj-project-cover img{
width:100%;
display:block;
border-radius:42px;
overflow:hidden;
background:#fff;
border:
1px solid
rgba(255,255,255,.6);
box-shadow:
0 35px 100px
rgba(0,0,0,.08);
transition:
transform .8s ease;
}
.dj-project-cover:hover img{
transform:scale(1.04);
} .dj-case-study{
padding:140px 0;
}
.dj-case-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:40px;
align-items:start;
}
.dj-case-grid .dj-paper{
padding:50px;
min-height:100%;
}
.dj-case-grid h2{
margin-bottom:24px;
font-size:1.8rem;
}
.dj-case-grid p{
line-height:1.9;
} .dj-project-tech{
text-align:center;
padding-bottom:160px;
}
.dj-project-tech h2{
margin-bottom:50px;
}
.dj-project-tech .dj-tech-stack{
justify-content:center;
gap:14px;
}
.dj-project-tech .dj-tech-stack span{
padding:
14px
20px;
border-radius:999px;
background:
rgba(255,255,255,.82);
border:
1px solid
rgba(0,0,0,.08);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
box-shadow:
0 10px 30px
rgba(0,0,0,.05);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.dj-project-tech .dj-tech-stack span:hover{
transform:
translateY(-4px);
box-shadow:
0 18px 40px
rgba(0,0,0,.08);
} .dj-archive-hero{
padding:
240px 0
120px;
text-align:center;
}
.dj-archive-hero h1{
margin:
20px 0;
}
.dj-archive-hero p{
max-width:800px;
margin:auto;
} .dj-project-list{
padding-top:0;
}
.dj-project-list .dj-projects-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:40px;
} .dj-project-list .dj-project-card{
position:relative;
height:100%;
overflow:hidden;
border-radius:32px;
transition:
transform .4s ease,
box-shadow .4s ease;
}
.dj-project-list .dj-project-card:hover{
transform:
translateY(-12px);
box-shadow:
var(--shadow-lg);
}
.dj-project-list .dj-project-image{
aspect-ratio:16/10;
overflow:hidden;
}
.dj-project-list .dj-project-image img{
width:100%;
height:100%;
object-fit:cover;
transition:
transform .9s ease;
}
.dj-project-list .dj-project-card:hover img{
transform:
scale(1.08);
}
.dj-project-list .dj-project-content{
padding:32px;
}
.dj-project-list .dj-project-content small{
display:inline-block;
margin-bottom:14px;
color:var(--dj-primary);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.dj-project-list .dj-project-content h3{
margin-bottom:12px;
}
.dj-project-list .dj-project-content p{
line-height:1.8;
} @media (max-width:1024px){
.dj-project-hero-grid{
grid-template-columns:1fr;
gap:70px;
}
.dj-case-grid{
grid-template-columns:1fr;
}
.dj-project-list .dj-projects-grid{
grid-template-columns:
repeat(2,1fr);
}
}
@media (max-width:768px){
.dj-project-hero{
padding:
180px 0
100px;
}
.dj-archive-hero{
padding:
180px 0
100px;
}
.dj-project-list .dj-projects-grid{
grid-template-columns:1fr;
}
.dj-case-grid .dj-paper{
padding:35px;
}
.dj-project-info p{
font-size:1rem;
}
}
@media (max-width:480px){
.dj-project-cover img{
border-radius:28px;
}
.dj-case-grid .dj-paper{
padding:28px;
}
}