.mdp-announcement-container {
padding: 15px 20px;
margin: 20px auto;
border-radius: 8px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 15px;
width: 95%;
max-width: 1200px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
clear: both;
position: relative;
overflow: hidden;
background-size: 200% 100%;
animation: gradientShift 4s ease-in-out infinite;
} @keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} .mdp-announcement-container:hover {
animation-duration: 2s;
}
.mdp-announcement-container span {
font-size: 24px;
font-weight: bold;
margin-right: 15px;
line-height: 1;
position: relative;
z-index: 2;
}
.mdp-announcement-container p {
margin: 0;
padding: 0;
line-height: 1.5;
position: relative;
z-index: 2;
}
.mdp-announcement-container a {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
.mdp-announcement-container a:hover {
text-decoration: none;
} .mdp-info {
background: linear-gradient(45deg, #8f94fb, #4e54c8, #667eea, #764ba2, #8f94fb);
background-size: 400% 100%;
} .mdp-warning {
background: linear-gradient(45deg, #c471ed, #f64f59, #ff6b6b, #ee5a52, #c471ed);
background-size: 400% 100%;
} .mdp-success {
background: linear-gradient(45deg, #56ab2f, #a8e6cf, #4facfe, #00f2fe, #56ab2f);
background-size: 400% 100%;
} .mdp-slow-animation {
animation-duration: 6s;
}
.mdp-fast-animation {
animation-duration: 2s;
}
.mdp-no-animation {
animation: none;
background-size: 100% 100%;
} @media (max-width: 768px) {
.mdp-announcement-container {
width: 98%;
padding: 12px 15px;
font-size: 14px;
margin: 15px auto;
}
.mdp-announcement-container span {
font-size: 20px;
margin-right: 10px;
}
} @keyframes pulseGlow {
0%, 100% {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 6px 25px rgba(255, 255, 255, 0.3);
}
}
.mdp-pulse {
animation: gradientShift 4s ease-in-out infinite, pulseGlow 3s ease-in-out infinite;
}