<div id="glassCookie" class="glass-banner">
<div class="glass-content">
<h3>We value your privacy</h3>
<p>We use cookies to enhance your browsing experience and analyze our traffic.</p>
<div class="glass-actions">
<button class="btn-outline" onclick="closeBanner()">Decline</button>
<button class="btn-fill" onclick="closeBanner()">Accept All</button>
</div>
</div>
</div>
.glass-banner {
position: fixed;
bottom: 20px;
right: 20px;
max-width: 400px;
width: 90%;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
z-index: 9999;
display: flex;
}
.glass-banner h3 {
margin: 0 0 8px 0;
font-size: 1.1rem;
color: #1f2937;
}
.glass-banner p {
margin: 0 0 20px 0;
font-size: 0.9rem;
color: #4b5563;
line-height: 1.5;
}
.glass-actions {
display: flex;
gap: 12px;
}
.glass-actions button {
flex: 1;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
transition: transform 0.2s;
}
.glass-actions button:hover {
transform: translateY(-2px);
}
.btn-fill {
background: #2563eb;
color: white;
border: none;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-outline {
background: transparent;
border: 1px solid #d1d5db;
color: #374151;
}