From 9a6dc26786f218e719f2f0e9decd63d14971e58d Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sat, 3 Jan 2026 16:44:32 -0500
Subject: [PATCH] Polish UI copy and notifications

---
 public/styles.css         |  6 +++---
 views/index.ejs           |  2 +-
 views/partials/footer.ejs | 17 +++++++++++++++++
 views/partials/header.ejs |  5 ++++-
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index d5ea09d..129a678 100644
--- a/public/styles.css
+++ b/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 {
diff --git a/views/index.ejs b/views/index.ejs
index 0b626a8..1a18c6f 100644
--- a/views/index.ejs
+++ b/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>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index c9a4f32..0b6d525 100644
--- a/views/partials/footer.ejs
+++ b/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>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index a20e1f1..084e3cc 100644
--- a/views/partials/header.ejs
+++ b/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>
         <% } %>