.dj-label{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
border-radius:999px;
background:
rgba(255,255,255,.82);
backdrop-filter:
blur(16px);
border:
1px solid
rgba(255,255,255,.55);
font-size:.85rem;
font-weight:600;
color:var(--dj-text);
}
.dj-label::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--dj-primary);
} .dj-badges{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:24px;
}
.dj-badge{
padding:10px 16px;
border-radius:999px;
background:
rgba(255,255,255,.82);
border:
1px solid
var(--dj-border);
font-size:.8rem;
font-weight:600;
transition:
transform .3s ease,
background-color .3s ease,
color .3s ease;
}
.dj-badge:hover{
background:var(--dj-primary);
color:#fff;
transform:
translateY(-2px);
} .dj-magazine-card{
position:relative;
overflow:hidden;
background:
rgba(255,255,255,.88);
backdrop-filter:
blur(20px);
border-radius:32px;
border:
1px solid
rgba(255,255,255,.55);
box-shadow:
0 20px 50px rgba(0,0,0,.05);
transition:
transform .45s ease,
box-shadow .45s ease;
}
.dj-magazine-card:hover{
transform:
translateY(-12px);
box-shadow:
0 35px 90px rgba(0,0,0,.10);
}
.dj-magazine-card img{
width:100%;
display:block;
}
.dj-magazine-content{
padding:32px;
}
.dj-magazine-content h3{
margin-bottom:14px;
}
.dj-magazine-content p{
margin-bottom:24px;
} .dj-project-card{
position:relative;
overflow:hidden;
}
.dj-project-image{
overflow:hidden;
}
.dj-project-image img{
width:100%;
display:block;
transition:
transform .9s ease;
}
.dj-project-card:hover img{
transform:
scale(1.06);
}
.dj-project-content small{
display:block;
margin-bottom:12px;
color:var(--dj-primary);
font-weight:700;
text-transform:uppercase;
letter-spacing:.12em;
}
.dj-project-content h3{
margin-bottom:15px;
} .dj-system-card{
position:relative;
overflow:hidden;
}
.dj-system-card::after{
content:"";
position:absolute;
top:-100px;
right:-100px;
width:240px;
height:240px;
border-radius:50%;
background:
radial-gradient(
rgba(0,200,150,.12),
transparent
);
}
.dj-system-icon{
width:72px;
height:72px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
background:
rgba(255,255,255,.85);
backdrop-filter:
blur(20px);
margin-bottom:25px;
box-shadow:
0 15px 35px rgba(0,0,0,.08);
} .dj-archive-card{
position:relative;
overflow:hidden;
background:
rgba(255,255,255,.88);
backdrop-filter:
blur(20px);
}
.dj-archive-image{
overflow:hidden;
}
.dj-archive-image img{
width:100%;
display:block;
transition:
transform .8s ease;
}
.dj-archive-card:hover img{
transform:
scale(1.05);
}
.dj-archive-meta{
background:transparent;
}
.dj-archive-category{
display:inline-block;
margin-bottom:10px;
font-size:.75rem;
font-weight:700;
color:var(--dj-primary);
text-transform:uppercase;
letter-spacing:.1em;
}
.dj-archive-title{
font-size:1.15rem;
font-weight:700;
margin-bottom:10px;
} .dj-cover{
position:relative;
overflow:hidden;
border-radius:36px;
}
.dj-cover-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(0,0,0,.72),
rgba(0,0,0,.05)
);
display:flex;
align-items:flex-end;
padding:50px;
}
.dj-cover-overlay h2{
color:#fff;
max-width:520px;
} .dj-quote{
max-width:900px;
margin:auto;
text-align:center;
}
.dj-quote blockquote{
font-family:var(--font-heading);
font-size:
clamp(
2rem,
4vw,
4rem
);
line-height:1.2;
color:var(--dj-text);
}
.dj-quote cite{
display:block;
margin-top:30px;
color:var(--dj-text-light);
} .dj-timeline-item{
position:relative;
width:45%;
padding:40px;
background:
rgba(255,255,255,.88);
backdrop-filter:
blur(20px);
border-radius:28px;
border:
1px solid
rgba(255,255,255,.55);
margin-bottom:70px;
box-shadow:
0 20px 50px rgba(0,0,0,.05);
}
.dj-timeline-item:nth-child(even){
margin-left:auto;
}
.dj-timeline-item h3{
margin-bottom:10px;
}
.dj-timeline-item small{
display:block;
margin-bottom:15px;
color:var(--dj-primary);
font-weight:700;
letter-spacing:.08em;
} .dj-contact-card{
max-width:900px;
margin:auto;
padding:80px;
border-radius:42px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.95),
rgba(248,250,252,.90)
);
border:
1px solid
rgba(255,255,255,.6);
box-shadow:
0 30px 80px rgba(0,0,0,.06);
} .dj-paper-texture{
position:relative;
}
.dj-paper-texture::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.015;
background-image:
radial-gradient(
#000 0.4px,
transparent 0.4px
);
background-size:
8px 8px;
} .dj-editorial-number{
font-size:
clamp(
4rem,
8vw,
8rem
);
font-weight:900;
line-height:1;
opacity:.05;
user-select:none;
}
.dj-divider{
width:120px;
height:1px;
background:
linear-gradient(
90deg,
var(--dj-primary),
transparent
);
}
.dj-glass-card{
background:
rgba(255,255,255,.78);
backdrop-filter:
blur(20px);
border:
1px solid
rgba(255,255,255,.5);
}