57 lines
1.1 KiB
CSS
57 lines
1.1 KiB
CSS
/* MODAL — FULLSCREEN OVERLAY */
|
|
|
|
.fuz-modal-overlay {
|
|
@apply fixed inset-0 z-[9999] flex flex-col;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(6px);
|
|
animation: fadeIn 0.25s ease-out forwards;
|
|
}
|
|
|
|
/* CLOSE BUTTON */
|
|
.fuz-modal-close {
|
|
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
|
|
color: var(--fuz-text);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.fuz-modal-close:hover {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
/* PANEL — FULLSCREEN PANEL */
|
|
.fuz-modal-panel {
|
|
@apply w-full h-full overflow-y-auto;
|
|
@apply px-6 py-8 md:px-12 md:py-12;
|
|
background: var(--fuz-bg);
|
|
color: var(--fuz-text);
|
|
}
|
|
|
|
/* INNER LAYOUT */
|
|
.fuz-modal-inner {
|
|
@apply max-w-4xl mx-auto;
|
|
}
|
|
|
|
.fuz-modal-title {
|
|
@apply text-4xl font-bold mb-8 text-center;
|
|
color: var(--fuz-text);
|
|
}
|
|
|
|
/* CONTENT STYLE */
|
|
.fuz-modal-content p {
|
|
@apply leading-relaxed text-2xl text-center;
|
|
}
|
|
|
|
.fuz-modal-content p img {
|
|
@apply mt-2 leading-relaxed;
|
|
}
|
|
/* ANIMATIONS */
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
} |