Polish UI copy and notifications

public/styles.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Karla:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Sora:wght@400;500;600&display=swap');
 
 :root {
   --ink: #1b1513;
@@ -12,7 +12,7 @@
 }
 
 body {
-  font-family: 'Karla', sans-serif;
+  font-family: 'Sora', sans-serif;
   color: var(--ink);
   background: radial-gradient(circle at top left, #f2fbff 0%, #f4f1ea 35%, #f8e5e7 100%);
   min-height: 100vh;
@@ -41,7 +41,7 @@ body {
 .brand-logo {
   width: 52px;
   height: 52px;
-  border-radius: 0;
+  border-radius: 12px;
 }
 
 .back-button {

views/index.ejs

@@ -4,7 +4,7 @@
   <div class="hero-body">
     <p class="title">Find the right fit</p>
     <p class="subtitle">
-      Browse pads, compare comfort, and share honest reviews with photos.
+      Build your own pad list, add photos, and rate fit, comfort, and absorbency over time.
     </p>
     <% if (currentUser && currentUser.is_approved) { %>
     <a class="button is-primary is-large" href="/pads/new">Add a pad</a>

views/partials/footer.ejs

@@ -13,6 +13,23 @@
             }
           });
         });
+
+        document.querySelectorAll('[data-dismissible="true"] .delete').forEach(function (button) {
+          button.addEventListener('click', function () {
+            var notice = button.closest('[data-dismissible="true"]');
+            if (notice) {
+              notice.remove();
+            }
+          });
+        });
+
+        document.querySelectorAll('[data-dismissible="true"]').forEach(function (notice) {
+          setTimeout(function () {
+            if (notice.isConnected) {
+              notice.remove();
+            }
+          }, 5000);
+        });
       })();
     </script>
   </body>

views/partials/header.ejs

@@ -50,5 +50,8 @@
     <section class="section">
       <div class="container">
         <% if (flash) { %>
-        <div class="notification is-<%= flash.type %>"><%= flash.message %></div>
+        <div class="notification is-<%= flash.type %>" data-dismissible="true">
+          <button class="delete" type="button" aria-label="Dismiss notification"></button>
+          <%= flash.message %>
+        </div>
         <% } %>