/* Style for the body to prevent content from hiding behind the fixed banner */
body {
padding-top: 50px; /* Adjust this value based on the banner's final height */
}
/* Container for the banner to hide overflow */
.vip-banner-container {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1001; /* High z-index to stay on top */
overflow: hidden;
background: linear-gradient(to right, #000000, #1a1a1a);
color: #ffffff;
font-family: 'Segoe UI', 'Roboto', sans-serif; /* Added Roboto as a modern fallback */
}
/* Flex container for the two announcement blocks */
.vip-banner-content {
display: flex;
width: max-content; /* Ensure the container is wide enough for all text */
/* Slower animation for better readability */
animation: infiniteScroll 30s linear infinite;
}
/* Pause animation on hover for better user experience */
.vip-banner-container:hover .vip-banner-content {
animation-play-state: paused;
}
/* Individual announcement block */
.vip-announcement {
display: flex;
align-items: center;
white-space: nowrap;
}
/* Styling for each message */
.vip-announcement span {
display: inline-block;
font-size: 16px;
font-weight: 500;
padding: 12px 40px; /* Vertical and horizontal padding */
}
/* The seamless scroll animation */
@keyframes infiniteScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%); /* Moves exactly one block width to the left */
}
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
body {
padding-top: 45px; /* Adjust for smaller banner height */
}
.vip-announcement span {
font-size: 13px;
padding: 12px 25px;
}
.vip-banner-content {
/* Adjusting mobile speed as well */
animation-duration: 25s;
}
}
