/* Age restriction modal styling */
.age-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
}
.age-modal__backdrop {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(214, 190, 138, 0.35), transparent 55%),
rgba(15, 10, 5, 0.78);
}
.age-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 520px;
padding-inline: var(--space-16);
}
.age-modal__content {
background: linear-gradient(145deg, rgba(239, 231, 225, 0.98), rgba(255, 255, 255, 1));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-elevated);
padding: var(--space-32) var(--space-32) var(--space-24);
text-align: center;
border: 1px solid rgba(214, 190, 138, 0.7);
}
.age-modal__title {
font-size: 1.4rem;
margin-bottom: var(--space-16);
}
.age-modal__description {
font-size: 0.95rem;
color: var(--gray-600);
margin-bottom: var(--space-24);
}
.age-modal__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
justify-content: center;
}
.age-modal__btn {
min-width: 200px;
}
.age-modal__btn--no {
background-color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 480px) {
.age-modal__content {
padding-inline: var(--space-20);
}
.age-modal__btn {
width: 100%;
}
}
/* Prevent background scroll when modal is active (class added via JS) */
body.age-locked {
overflow: hidden;
}
Document