From 305d2c7797edaced91629b51ea6e2589ba6fc652 Mon Sep 17 00:00:00 2001
From: Remo Zaros <remo@localhost.localdomain>
Date: Sat, 9 May 2026 14:22:13 +0200
Subject: [PATCH] add animation

---
 assets/postcode_modal.css | 48 +++++++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/assets/postcode_modal.css b/assets/postcode_modal.css
index 12107a4..a261003 100644
--- a/assets/postcode_modal.css
+++ b/assets/postcode_modal.css
@@ -1,10 +1,50 @@
 .postcode_modal {
     backgrounnd: green;
-    border-radius: 30px;
+    border-radius: 20px;
     box-shadow(10px);
     border: none;
-}
+    max-width: 80ch;
+    box-shadow: 0 0 20pc black;
+    padding: 2rem;
+    opacity: 0;
+    transition: opacity 0.3s ease, display 0.3s allow-discrete;
 
-& ::backdrop {
-    background-color: hsl(40deg 100 30 /0.5);
+    &[open] {
+      opacity: 1;
+      transition-behavior: allow-discrete;
+      transition: opacity 0.3s ease, display 0.3s allow-discrete;
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    h2 {
+      font-size: 1.5rem;
+      margin: .6rem;
+    }
+
+    input[type="text"] {
+        padding: .3rem;
+        font-size: 1.4rem;
+    }
+
+    button {
+        border: none;
+        font-size: 1.4rem;
+        padding: .4rem 1rem;
+        border-radius: 5px;
+        background: dodgerblue;
+        margin: 0 0 0 .3rem;
+    }
+
+    .form_fields {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &::backdrop {
+        background-color: hsl(40deg 100 30 /0.5);
+    }
 }