.category-hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
overflow: hidden;
}
.category-hero .hero-video-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.category-hero .hero-content {
text-align: left;
max-width: 700px;
}
.category-hero .hero-title {
font-size: var(--font-size-5xl);
margin-bottom: var(--space-xl);
}
.category-hero .hero-subtitle {
display: block;
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: var(--space-2xl);
max-width: 600px;
}
.category-hero .hero-cta {
justify-content: flex-start;
gap: var(--space-lg);
} .works-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.works-grid .card {
aspect-ratio: 16/10;
cursor: pointer;
}
@media (max-width: 991px) {
.works-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.works-grid {
grid-template-columns: 1fr;
}
} .video-slider-section {
min-height: auto;
padding: var(--space-4xl) 0;
overflow: hidden;
}
.video-slider-section .section-title {
margin-bottom: var(--space-3xl);
text-align: center;
font-size: var(--font-size-4xl);
}
.video-slider {
position: relative;
width: 100%;
overflow: visible;
padding: 0 15%;
}
.video-slider-track {
display: flex;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-slide {
flex: 0 0 100%;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--border-radius-lg);
cursor: pointer;
transform: scale(0.85);
opacity: 0.4;
transition: transform 0.6s ease, opacity 0.6s ease;
}
.video-slide.active {
transform: scale(1);
opacity: 1;
}
.video-slide-media {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-slide-media video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-slide-poster {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: opacity 0.5s ease;
}
.video-slide.active .video-slide-poster {
opacity: 0;
}
.video-slide::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(15, 22, 33, 0.7), transparent 50%);
z-index: 1;
pointer-events: none;
}
.video-slide::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(15, 22, 33, 0.5);
z-index: 1;
pointer-events: none;
opacity: 1;
transition: opacity 0.6s ease;
}
.video-slide.active::after {
opacity: 0;
}
.video-slide-content {
position: absolute;
bottom: var(--space-xl);
left: var(--space-xl);
padding: var(--space-lg) var(--space-xl);
z-index: 2;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
transform: translateY(20px);
opacity: 0;
transition: transform 0.6s ease 0.2s, opacity 0.6s ease 0.2s;
}
.video-slide.active .video-slide-content {
transform: translateY(0);
opacity: 1;
}
.video-slide-title {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 400;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-xs);
}
.video-slide-description {
font-size: var(--font-size-base);
color: var(--text-secondary);
letter-spacing: var(--tracking-wide);
}
.video-slide-play {
position: absolute;
bottom: 20px;
right: 20px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: var(--text-primary);
cursor: pointer;
z-index: 2;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}
.video-slide.active .video-slide-play {
opacity: 1;
transform: scale(1);
}
.video-slide-play:hover {
background: var(--text-primary);
border-color: var(--text-primary);
transform: scale(1.1);
}
.video-slide-play:hover svg {
fill: var(--bg-primary);
}
.video-slide-play svg {
width: 20px;
height: 20px;
margin-left: 2px;
} .video-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 22, 33, 0.5);
backdrop-filter: blur(10px);
border: 1px solid var(--text-accent);
border-radius: 50%;
color: var(--text-accent);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.video-slider-prev {
left: calc(15% - 26px);
}
.video-slider-next {
right: calc(15% - 26px);
}
.video-slider-arrow:hover {
background: var(--text-accent);
border-color: var(--text-accent);
}
.video-slider-arrow:hover svg {
stroke: var(--bg-primary);
}
.video-slider-arrow svg {
width: 20px;
height: 20px;
} .video-slider-nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-2xl);
}
.video-slider-dots {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.video-slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-color);
cursor: pointer;
transition: all 0.3s ease;
}
.video-slider-dot.active {
background: var(--text-primary);
width: 24px;
border-radius: 4px;
} .video-slider-progress {
position: absolute;
bottom: 0;
left: 15%;
right: 15%;
height: 3px;
background: rgba(255, 255, 255, 0.1);
z-index: 3;
}
.video-slider-progress-bar {
height: 100%;
width: 0%;
background: var(--text-primary);
transition: width 0.1s linear;
} .video-slider-description {
max-width: 900px;
margin: var(--space-3xl) auto 0;
padding: 0 var(--space-xl);
text-align: center;
}
.video-slider-description p {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: 1.8;
margin-bottom: var(--space-xl);
}
.video-slider-description .btn-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-primary);
font-size: var(--font-size-base);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-bottom: 1px solid var(--text-primary);
padding-bottom: var(--space-xs);
transition: opacity var(--transition-fast);
}
.video-slider-description .btn-link:hover {
opacity: 0.7;
}
.video-slider-info {
max-width: 900px;
margin: var(--space-3xl) auto 0;
text-align: center;
}
.video-slider-info-title {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 400;
color: var(--text-accent);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-lg);
}
.video-slider-info-desc {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: 1.8;
} @media (max-width: 1200px) {
.hero-top {
grid-template-columns: 1fr;
text-align: center;
}
.video-slider {
padding: 0 10%;
}
.video-slider-prev {
left: calc(10% - 26px);
}
.video-slider-next {
right: calc(10% - 26px);
}
.video-slider-progress {
left: 10%;
right: 10%;
}
}
@media (max-width: 767px) {
.video-slider {
padding: 0 5%;
}
.video-slider-prev {
left: calc(5% - 22px);
}
.video-slider-next {
right: calc(5% - 22px);
}
.video-slider-progress {
left: 5%;
right: 5%;
}
.video-slide {
transform: scale(0.9);
}
.video-slide.active {
transform: scale(1);
}
.video-slide-content {
bottom: var(--space-md);
left: var(--space-md);
padding: var(--space-md);
}
.video-slide-title {
font-size: var(--font-size-lg);
}
.video-slide-play {
width: 40px;
height: 40px;
bottom: 12px;
right: 12px;
}
.video-slide-play svg {
width: 16px;
height: 16px;
}
.video-slider-arrow {
width: 44px;
height: 44px;
}
.video-slider-description p {
font-size: var(--font-size-base);
}
}