feat: add discord infomodal

2026-05-07 10:27:52 -03:00
parent d1a28fd777
commit ecf4c76b15
2 changed files with 101 additions and 3 deletions
@@ -218,4 +218,74 @@ h1 {
 	100% {
 		transform: translate(-100%, 0);
 	}
-}
+}
+
+/*
+	modal
+*/
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(2px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+    background: var(--surface);
+    padding: 25px;
+    border: 1px ridge var(--pink-accent);
+    outline: 1px solid var(--accent);
+    box-shadow: 8px 8px 0px var(--pink-accent);
+    text-align: center;
+    min-width: 250px;
+}
+
+.modal-header {
+    color: var(--text-title);
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    border-bottom: 1px double var(--accent);
+    padding-bottom: 5px;
+}
+
+.modal-body p {
+    font-size: 0.9rem;
+    margin: 8px 0;
+    color: var(--text-main);
+}
+
+.modal-close-btn {
+    background: none;
+    border: none;
+    margin-top: 15px;
+    font-family: inherit;
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.modal-close-btn:hover {
+    color: var(--text-title-shadow);
+    letter-spacing: 2px;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes popIn {
+    from { transform: scale(0.8); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}