TREYZ HERO SECTION
.treyz-hero-slider {
position: relative;
width: 100%;
height: 90vh;
min-height: 550px;
overflow: hidden;
background: #0D0D2B;
}
.treyz-slide {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateX(60px);
transition: opacity 0.8s ease, transform 0.8s ease;
pointer-events: none;
}
.treyz-slide.active {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
.treyz-slide-1 { background: linear-gradient(135deg, #12143D 0%, #741132 60%, #0D0D2B 100%); }
.treyz-slide-2 { background: linear-gradient(135deg, #0D0D2B 0%, #12143D 50%, #741132 100%); }
.treyz-slide-3 { background: linear-gradient(135deg, #741132 0%, #0D0D2B 60%, #12143D 100%); }
.treyz-slide-4 { background: linear-gradient(135deg, #0D0D2B 0%, #741132 40%, #12143D 100%); }
/* Animated shimmer overlay */
.treyz-slide::before {
content: ”;
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(ellipse at center, rgba(249,249,9,0.06) 0%, transparent 60%);
animation: treyzPulse 4s ease-in-out infinite;
}
@keyframes treyzPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 1; }
}
.treyz-slide-content {
text-align: center;
padding: 40px 20px;
z-index: 2;
animation: treyzFadeUp 0.9s ease both;
}
.treyz-slide.active .treyz-slide-content {
animation: treyzFadeUp 0.9s ease both;
}
@keyframes treyzFadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.treyz-tagline {
display: inline-block;
color: #F9F909;
font-family: ‘Poppins’, sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 16px;
border-left: 3px solid #741132;
padding-left: 12px;
animation: treyzSlideIn 1s ease 0.2s both;
}
@keyframes treyzSlideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.treyz-hero-title {
font-family: ‘Montserrat’, sans-serif;
font-weight: 900;
font-size: clamp(2.5rem, 7vw, 5.5rem);
color: #FFFFFF;
line-height: 1.1;
margin: 0 0 20px;
text-shadow: 0 4px 30px rgba(116,17,50,0.6);
animation: treyzSlideIn 1s ease 0.4s both;
}
.treyz-hero-sub {
font-family: ‘Poppins’, sans-serif;
font-size: clamp(0.9rem, 2vw, 1.15rem);
color: rgba(255,255,255,0.8);
max-width: 580px;
margin: 0 auto 36px;
line-height: 1.7;
animation: treyzSlideIn 1s ease 0.6s both;
}
.treyz-hero-btns {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
animation: treyzSlideIn 1s ease 0.8s both;
}
.treyz-btn-primary {
background: #741132;
color: #FFFFFF !important;
font-family: ‘Montserrat’, sans-serif;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1.5px;
padding: 14px 34px;
border-radius: 300px;
text-decoration: none !important;
border: 2px solid #741132;
transition: all 0.3s ease;
}
.treyz-btn-primary:hover {
background: transparent;
color: #F9F909 !important;
border-color: #F9F909;
}
.treyz-btn-secondary {
background: transparent;
color: #F9F909 !important;
font-family: ‘Montserrat’, sans-serif;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1.5px;
padding: 14px 34px;
border-radius: 300px;
text-decoration: none !important;
border: 2px solid #F9F909;
transition: all 0.3s ease;
}
.treyz-btn-secondary:hover {
background: #F9F909;
color: #0D0D2B !important;
}
/* Dots */
.treyz-dots {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.treyz-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.treyz-dot.active {
background: #F9F909;
border-color: #F9F909;
transform: scale(1.3);
}
/* Arrows */
.treyz-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(116,17,50,0.6);
color: #FFFFFF;
border: 2px solid rgba(249,249,9,0.4);
border-radius: 50%;
width: 48px; height: 48px;
font-size: 1.2rem;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.treyz-arrow:hover {
background: #741132;
border-color: #F9F909;
color: #F9F909;
}
.treyz-prev { left: 20px; }
.treyz-next { right: 20px; }
@media (max-width: 600px) {
.treyz-hero-slider { height: 100vh; }
.treyz-arrow { width: 38px; height: 38px; font-size: 1rem; }
}
(function() {
var slides = document.querySelectorAll(‘.treyz-slide’);
var dots = document.querySelectorAll(‘.treyz-dot’);
var current = 0;
var autoplay;
function treyzGoTo(n) {
slides[current].classList.remove(‘active’);
dots[current].classList.remove(‘active’);
current = (n + slides.length) % slides.length;
slides[current].classList.add(‘active’);
dots[current].classList.add(‘active’);
resetAutoplay();
}
function treyzNext() { treyzGoTo(current + 1); }
function treyzPrev() { treyzGoTo(current – 1); }
function resetAutoplay() {
clearInterval(autoplay);
autoplay = setInterval(function() { treyzGoTo(current + 1); }, 5000);
}
window.treyzGoTo = treyzGoTo;
window.treyzNext = treyzNext;
window.treyzPrev = treyzPrev;
resetAutoplay();
})();