/* Reset & Container Utama */
#atria-announcement-bar {
all: unset;
width: 100%;
background-color: #fdf2ed !important;
border-bottom: 1px solid #f7e1d7 !important;
padding: 6px 16px !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
z-index: 9999 !important;
font-family: 'Poppins', Arial, sans-serif !important;
box-sizing: border-box !important;
transition: all 0.3s ease;
}
/* Styling untuk transisi container parent .noticebar */
.noticebar {
transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease !important;
overflow: hidden !important;
}
/* Wrapper Konten Tengah */
.bar-content-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
text-align: center !important;
max-width: 90% !important;
}
/* Lingkaran Ikon Lonceng */
.bell-icon-circle {
width: 26px !important;
height: 26px !important;
background-color: #d97d54 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #ffffff !important;
flex-shrink: 0 !important;
animation: atria-fading 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
/* Teks Utama */
.bar-text {
color: #5c4033 !important;
font-size: 14px !important;
font-weight: 500 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
}
/* Link Form */
.bar-link {
color: #d97d54 !important;
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: 2px solid #d97d54 !important;
padding-bottom: 1px !important;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
}
.bar-link:hover {
color: #bf6a45 !important;
border-color: #bf6a45 !important;
}
.bar-link svg {
margin-left: 6px !important;
transition: transform 0.3s ease !important;
}
.bar-link:hover svg {
transform: translateX(3px) !important;
}
/* Tombol Tutup (X) */
.close-bar-btn {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
color: #d97d54 !important;
cursor: pointer !important;
padding: 4px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.3s ease !important;
}
.close-bar-btn:hover {
background-color: #f9e6dc !important;
}
/* Animasi Opacity Pulse (Fading) */
@keyframes atria-fading {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Responsif Mobile */
@media (max-width: 768px) {
#atria-announcement-bar { padding: 10px 12px !important; }
.bar-text { font-size: 12px !important; }
.bell-icon-circle { width: 22px !important; height: 22px !important; }
.close-bar-btn { right: 5px !important; }
}
function closeAtriaBar() {
const bar = document.getElementById('atria-announcement-bar');
const parentContainer = bar.closest('.noticebar');
if (parentContainer) {
parentContainer.style.opacity = '0';
parentContainer.style.height = '0';
parentContainer.style.padding = '0';
parentContainer.style.margin = '0';
setTimeout(() => {
parentContainer.style.display = 'none';
}, 300);
} else if (bar) {
bar.style.opacity = '0';
setTimeout(() => {
bar.style.display = 'none';
}, 300);
}
}
