From e203ecf687f54b720ac3f207915f4dd7d5abbfee Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 17:50:20 +0100
Subject: [PATCH 01/11] Apply glassmorphism styling to event cards on list view

Replace solid white event cards with glass-effect cards featuring
backdrop blur, semi-transparent gradient backgrounds, and light
borders that blend with the Electric Dusk gradient background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .specify/memory/research/modern-ui-effects.md | 37 +++++++++++++++++++
 frontend/src/assets/main.css                  |  5 ++-
 frontend/src/components/EventCard.vue         | 21 ++++++++---
 frontend/src/components/SectionHeader.vue     |  2 +-
 4 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 .specify/memory/research/modern-ui-effects.md

diff --git a/.specify/memory/research/modern-ui-effects.md b/.specify/memory/research/modern-ui-effects.md
new file mode 100644
index 0000000..9867ec9
--- /dev/null
+++ b/.specify/memory/research/modern-ui-effects.md
@@ -0,0 +1,37 @@
+# Modern UI Effects Research (2025-2026)
+
+## Liquid Glass (Apple WWDC 2025)
+Evolved glassmorphism with directional lighting. Three-layer approach: highlight, shadow, illumination.
+- `backdrop-filter: blur(20px) saturate(1.5)` — higher saturation than basic glass
+- `inset 0 1px 0 rgba(255,255,255,0.15)` — top highlight (light direction)
+- `inset 0 -1px 0 rgba(0,0,0,0.1)` — bottom shadow
+- Outer drop shadow for depth: `0 8px 32px rgba(0,0,0,0.3)`
+- Advanced: SVG `feTurbulence` + `feSpecularLighting` for refraction (Chromium only)
+- Browser support: `backdrop-filter` ~88%, Firefox since v103
+
+## Aurora / Gradient Mesh Backgrounds
+Stacked animated radial gradients simulating northern lights. Pairs well with glass cards on dark backgrounds.
+- Multiple `radial-gradient(ellipse ...)` layers with partial opacity
+- Animated via `background-position` shift (GPU-friendly)
+- `@property` rule enables direct gradient color animation (broad support since 2024)
+- Best for ambient background movement, not for content areas
+
+## Animated Glow Borders
+Rotating `conic-gradient` borders with blur halo. Striking on dark backgrounds.
+- Outer wrapper with `conic-gradient(from var(--angle), color1, color2, color3, color1)`
+- `::before` pseudo with `filter: blur(12px)` and `opacity: 0.5` for glow halo
+- `@property --angle` trick to animate custom property inside `conic-gradient`
+- Use sparingly — best for single highlight elements (FAB, CTA), not all cards
+
+## Modern Neumorphism (2025-2026 revision)
+Subtler than the original trend. Higher contrast, less extreme extrusion, combined with accent colors.
+- Light and dark shadow pair: `6px 6px 12px rgba(0,0,0,0.5)` + `-6px -6px 12px rgba(60,50,80,0.15)`
+- `border: 1px solid rgba(255,255,255,0.05)` for definition
+- Works on dark backgrounds with slightly lighter "uplift" shadow direction
+- Better suited for interactive elements (buttons, toggles) than content cards
+
+## Sources
+- Apple Liquid Glass CSS: dev.to/gruszdev, dev.to/kevinbism, css-tricks.com, kube.io
+- Aurora: dev.to/oobleck, daltonwalsh.com, github.com/mattnewdavid
+- Glow borders: frontendmasters.com (Kevin Powell), docode.co.in
+- Trends overview: medium.com/design-bootcamp, index.dev, bighuman.com
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index e054431..a81d003 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -16,6 +16,9 @@
   --color-text-on-gradient: #ffffff;
   --color-surface: #fff5f8;
   --color-card: #ffffff;
+  --color-glass: rgba(255, 255, 255, 0.1);
+  --color-glass-border: rgba(255, 255, 255, 0.18);
+  --color-glass-hover: rgba(255, 255, 255, 0.18);
 
   /* Gradient */
   --gradient-primary: linear-gradient(135deg, #f06292 0%, #ab47bc 50%, #5c6bc0 100%);
@@ -33,7 +36,7 @@
   --radius-button: 14px;
 
   /* Shadows */
-  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.12);
   --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.15);
 
   /* Layout */
diff --git a/frontend/src/components/EventCard.vue b/frontend/src/components/EventCard.vue
index e788e32..5587b8a 100644
--- a/frontend/src/components/EventCard.vue
+++ b/frontend/src/components/EventCard.vue
@@ -93,11 +93,20 @@ function onTouchEnd() {
 .event-card {
   display: flex;
   align-items: center;
-  background: var(--color-card);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border: 1px solid var(--color-glass-border);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   padding: var(--spacing-md) var(--spacing-lg);
   gap: var(--spacing-sm);
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.event-card:hover {
+  background: var(--color-glass-hover);
+  border-color: rgba(255, 255, 255, 0.3);
 }
 
 .event-card--past {
@@ -122,7 +131,7 @@ function onTouchEnd() {
 .event-card__title {
   font-size: 0.95rem;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -131,7 +140,7 @@ function onTouchEnd() {
 .event-card__time {
   font-size: 0.8rem;
   font-weight: 400;
-  color: #888;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .event-card__badge {
@@ -149,8 +158,8 @@ function onTouchEnd() {
 }
 
 .event-card__badge--attendee {
-  background: #e0e0e0;
-  color: #555;
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .event-card__delete {
@@ -163,7 +172,7 @@ function onTouchEnd() {
   background: none;
   border: none;
   font-size: 1.2rem;
-  color: #bbb;
+  color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   border-radius: 50%;
   transition: color 0.15s ease, background 0.15s ease;
diff --git a/frontend/src/components/SectionHeader.vue b/frontend/src/components/SectionHeader.vue
index a507b3c..035361c 100644
--- a/frontend/src/components/SectionHeader.vue
+++ b/frontend/src/components/SectionHeader.vue
@@ -15,7 +15,7 @@ defineProps<{
 .section-header {
   font-size: 1rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   margin: 0;
   padding: var(--spacing-sm) 0;
 }

From 9f82275c63cd33baf6e0b4050e214d641dca435c Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:01:46 +0100
Subject: [PATCH 02/11] Replace linear gradient background with aurora mesh
 gradient

Use layered radial gradients on a dark base (#1B1730) with
backdrop blur for an organic, aurora-like background effect
that better complements the glassmorphism event cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index a81d003..69a4a3b 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -63,7 +63,22 @@ html {
 
 body {
   min-height: 100vh;
-  background: var(--gradient-primary);
+  background-color: #1B1730;
+  position: relative;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-color: #1B1730;
+  background-image:
+    radial-gradient(at 70% 20%, rgba(240, 98, 146, 0.55) 0px, transparent 50%),
+    radial-gradient(at 25% 50%, rgba(171, 71, 188, 0.5) 0px, transparent 55%),
+    radial-gradient(at 80% 70%, rgba(92, 107, 192, 0.55) 0px, transparent 50%),
+    radial-gradient(at 35% 85%, rgba(255, 112, 67, 0.3) 0px, transparent 40%);
+  filter: blur(80px);
+  z-index: -1;
 }
 
 #app {

From a9743025a71f2f8872f9af3f1472a04a95defe67 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:13:57 +0100
Subject: [PATCH 03/11] Fix hero image transition on event detail page

Replace hard-edged color overlay with CSS mask-image fade-out and
increase hero height to 420px for a seamless blend into the aurora
mesh background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/views/EventDetailView.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 36a8cbd..646ab09 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -268,15 +268,19 @@ onMounted(fetchEvent)
 .detail__hero {
   position: relative;
   width: 100%;
-  height: 260px;
-  overflow: hidden;
+  height: 420px;
+  overflow: visible;
   flex-shrink: 0;
 }
 
 .detail__hero-img {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
 }
 
 .detail__hero-overlay {
@@ -284,9 +288,8 @@ onMounted(fetchEvent)
   inset: 0;
   background: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0.4) 0%,
-    transparent 50%,
-    var(--color-gradient-start) 100%
+    rgba(27, 23, 48, 0.4) 0%,
+    transparent 50%
   );
 }
 

From 877c869a222a3f5ae208cffe2af511202656be29 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:20:50 +0100
Subject: [PATCH 04/11] Restyle FAB with glass effect and static glow border

Replace solid orange FAB with glassmorphism inner and a conic
gradient border (pink-purple-indigo) with subtle glow halo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/CreateEventFab.vue | 37 +++++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CreateEventFab.vue b/frontend/src/components/CreateEventFab.vue
index a8736c5..30d48a9 100644
--- a/frontend/src/components/CreateEventFab.vue
+++ b/frontend/src/components/CreateEventFab.vue
@@ -1,6 +1,8 @@
 <template>
   <RouterLink to="/create" class="fab" aria-label="Create event">
-    <span class="fab__icon" aria-hidden="true">+</span>
+    <span class="fab__inner">
+      <span class="fab__icon" aria-hidden="true">+</span>
+    </span>
   </RouterLink>
 </template>
 
@@ -16,20 +18,44 @@ import { RouterLink } from 'vue-router'
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: var(--color-accent);
+  background: conic-gradient(from 135deg, #F06292, #AB47BC, #5C6BC0, #F06292);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   text-decoration: none;
   z-index: 100;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  padding: 2px;
+
+  transition: transform 0.15s ease;
+}
+
+.fab::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  background: conic-gradient(from 135deg, #F06292, #AB47BC, #5C6BC0, #F06292);
+  filter: blur(8px);
+  opacity: 0.3;
+  z-index: -1;
+
+}
+
+.fab__inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: rgba(27, 23, 48, 0.55);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .fab:hover {
   transform: scale(1.08);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 }
 
 .fab:active {
@@ -41,6 +67,7 @@ import { RouterLink } from 'vue-router'
   outline-offset: 3px;
 }
 
+
 .fab__icon {
   font-size: 1.8rem;
   font-weight: 300;

From 29974704d07359d658a448b65b33206bab2cc1f0 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:22:39 +0100
Subject: [PATCH 05/11] Apply glassmorphism to meta icon boxes on event detail
 view

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/views/EventDetailView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 646ab09..c8deee9 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -369,8 +369,11 @@ onMounted(fetchEvent)
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.15);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border: 1px solid var(--color-glass-border);
   border-radius: 10px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   color: var(--color-text-on-gradient);
 }
 

From 019ead7be3cb59cdcedd0838c30642f234ddfc6f Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:35:36 +0100
Subject: [PATCH 06/11] Extract glass system into shared CSS utilities and
 design tokens

Centralize all hardcoded rgba color values into CSS custom properties
and extract glass/glow styles into reusable utility classes (.glass,
.glass-inner, .glow-border, .glow-border--animated) in main.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css               | 83 +++++++++++++++++++++-
 frontend/src/components/AttendeeList.vue   |  6 +-
 frontend/src/components/CreateEventFab.vue | 22 +-----
 frontend/src/components/DateSubheader.vue  |  2 +-
 frontend/src/components/EmptyState.vue     | 33 ++++++++-
 frontend/src/components/EventCard.vue      | 20 ++----
 frontend/src/views/EventDetailView.vue     | 22 +++---
 7 files changed, 133 insertions(+), 55 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 69a4a3b..aa1a138 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -16,9 +16,26 @@
   --color-text-on-gradient: #ffffff;
   --color-surface: #fff5f8;
   --color-card: #ffffff;
+  --color-dark-base: #1B1730;
+
+  /* Glass system */
   --color-glass: rgba(255, 255, 255, 0.1);
+  --color-glass-strong: rgba(255, 255, 255, 0.15);
+  --color-glass-subtle: rgba(255, 255, 255, 0.05);
   --color-glass-border: rgba(255, 255, 255, 0.18);
+  --color-glass-border-hover: rgba(255, 255, 255, 0.3);
   --color-glass-hover: rgba(255, 255, 255, 0.18);
+  --color-glass-inner: rgba(27, 23, 48, 0.55);
+  --color-glass-overlay: rgba(27, 23, 48, 0.4);
+
+  /* Text on gradient (opacity variants) */
+  --color-text-muted: rgba(255, 255, 255, 0.5);
+  --color-text-secondary: rgba(255, 255, 255, 0.7);
+  --color-text-soft: rgba(255, 255, 255, 0.85);
+  --color-text-bright: rgba(255, 255, 255, 0.9);
+
+  /* Glow border */
+  --gradient-glow: conic-gradient(from 135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
 
   /* Gradient */
   --gradient-primary: linear-gradient(135deg, #f06292 0%, #ab47bc 50%, #5c6bc0 100%);
@@ -63,7 +80,7 @@ html {
 
 body {
   min-height: 100vh;
-  background-color: #1B1730;
+  background-color: var(--color-dark-base);
   position: relative;
 }
 
@@ -71,7 +88,7 @@ body::before {
   content: '';
   position: fixed;
   inset: 0;
-  background-color: #1B1730;
+  background-color: var(--color-dark-base);
   background-image:
     radial-gradient(at 70% 20%, rgba(240, 98, 146, 0.55) 0px, transparent 50%),
     radial-gradient(at 25% 50%, rgba(171, 71, 188, 0.5) 0px, transparent 55%),
@@ -194,6 +211,68 @@ textarea.form-field {
   100% { background-position: -200% 0; }
 }
 
+/* ── Glass System ── */
+
+/* Glass surface: passive containers on gradient (cards, icon boxes) */
+.glass {
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.glass:hover {
+  background: var(--color-glass-hover);
+  border-color: var(--color-glass-border-hover);
+}
+
+/* Glass interactive inner: dark translucent fill for interactive elements (FAB, CTA) */
+.glass-inner {
+  background: var(--color-glass-inner);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+/* Glow border: conic gradient wrapper with halo (static) */
+.glow-border {
+  background: var(--gradient-glow);
+  padding: 2px;
+  position: relative;
+}
+
+.glow-border::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+  background: var(--gradient-glow);
+  filter: blur(8px);
+  opacity: 0.3;
+  z-index: -1;
+}
+
+/* Glow border animated variant */
+@property --glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.glow-border--animated {
+  background: conic-gradient(from var(--glow-angle), var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
+  animation: glow-rotate 4s linear infinite;
+}
+
+.glow-border--animated::before {
+  background: conic-gradient(from var(--glow-angle), var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
+  animation: glow-rotate 4s linear infinite;
+}
+
+@keyframes glow-rotate {
+  to { --glow-angle: 360deg; }
+}
+
 /* Utility */
 .text-center {
   text-align: center;
diff --git a/frontend/src/components/AttendeeList.vue b/frontend/src/components/AttendeeList.vue
index d826a8a..d8b5630 100644
--- a/frontend/src/components/AttendeeList.vue
+++ b/frontend/src/components/AttendeeList.vue
@@ -28,7 +28,7 @@ defineProps<{
 .attendee-list__heading {
   font-size: 0.75rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
@@ -44,7 +44,7 @@ defineProps<{
 
 .attendee-list__item {
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text-soft);
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -53,7 +53,7 @@ defineProps<{
 
 .attendee-list__empty {
   font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   font-style: italic;
 }
 </style>
diff --git a/frontend/src/components/CreateEventFab.vue b/frontend/src/components/CreateEventFab.vue
index 30d48a9..f10489d 100644
--- a/frontend/src/components/CreateEventFab.vue
+++ b/frontend/src/components/CreateEventFab.vue
@@ -1,6 +1,6 @@
 <template>
-  <RouterLink to="/create" class="fab" aria-label="Create event">
-    <span class="fab__inner">
+  <RouterLink to="/create" class="fab glow-border" aria-label="Create event">
+    <span class="fab__inner glass-inner">
       <span class="fab__icon" aria-hidden="true">+</span>
     </span>
   </RouterLink>
@@ -18,37 +18,19 @@ import { RouterLink } from 'vue-router'
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: conic-gradient(from 135deg, #F06292, #AB47BC, #5C6BC0, #F06292);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   z-index: 100;
-  padding: 2px;
-
   transition: transform 0.15s ease;
 }
 
-.fab::before {
-  content: '';
-  position: absolute;
-  inset: -4px;
-  border-radius: 50%;
-  background: conic-gradient(from 135deg, #F06292, #AB47BC, #5C6BC0, #F06292);
-  filter: blur(8px);
-  opacity: 0.3;
-  z-index: -1;
-
-}
-
 .fab__inner {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: rgba(27, 23, 48, 0.55);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/components/DateSubheader.vue b/frontend/src/components/DateSubheader.vue
index b7b2a23..2be49ce 100644
--- a/frontend/src/components/DateSubheader.vue
+++ b/frontend/src/components/DateSubheader.vue
@@ -12,7 +12,7 @@ defineProps<{
 .date-subheader {
   font-size: 0.85rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text-soft);
   margin: 0;
   padding: var(--spacing-xs) 0;
 }
diff --git a/frontend/src/components/EmptyState.vue b/frontend/src/components/EmptyState.vue
index 9938e4b..4b6a148 100644
--- a/frontend/src/components/EmptyState.vue
+++ b/frontend/src/components/EmptyState.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="empty-state">
     <p class="empty-state__message">No events yet.<br />Create your first one!</p>
-    <RouterLink to="/create" class="btn-primary empty-state__cta">+ Create Event</RouterLink>
+    <RouterLink to="/create" class="empty-state__cta glow-border glow-border--animated">
+      <span class="empty-state__cta-inner glass-inner">Create Event</span>
+    </RouterLink>
   </div>
 </template>
 
@@ -27,5 +29,34 @@ import { RouterLink } from 'vue-router'
 
 .empty-state__cta {
   max-width: 280px;
+  width: 100%;
+  border-radius: var(--radius-button);
+  text-decoration: none;
+  transition: transform 0.1s ease;
+}
+
+.empty-state__cta-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  text-align: center;
+}
+
+.empty-state__cta:hover {
+  transform: scale(1.02);
+}
+
+.empty-state__cta:active {
+  transform: scale(0.98);
+}
+
+.empty-state__cta:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
 }
 </style>
diff --git a/frontend/src/components/EventCard.vue b/frontend/src/components/EventCard.vue
index 5587b8a..5ddeb8d 100644
--- a/frontend/src/components/EventCard.vue
+++ b/frontend/src/components/EventCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="event-card"
+    class="event-card glass"
     :class="{ 'event-card--past': isPast, 'event-card--swiping': isSwiping }"
     :style="swipeStyle"
     @touchstart="onTouchStart"
@@ -93,22 +93,12 @@ function onTouchEnd() {
 .event-card {
   display: flex;
   align-items: center;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
-  border: 1px solid var(--color-glass-border);
   border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   padding: var(--spacing-md) var(--spacing-lg);
   gap: var(--spacing-sm);
   transition: background 0.2s ease, border-color 0.2s ease;
 }
 
-.event-card:hover {
-  background: var(--color-glass-hover);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
 .event-card--past {
   opacity: 0.6;
   filter: saturate(0.5);
@@ -140,7 +130,7 @@ function onTouchEnd() {
 .event-card__time {
   font-size: 0.8rem;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--color-text-secondary);
 }
 
 .event-card__badge {
@@ -158,8 +148,8 @@ function onTouchEnd() {
 }
 
 .event-card__badge--attendee {
-  background: rgba(255, 255, 255, 0.15);
-  color: rgba(255, 255, 255, 0.9);
+  background: var(--color-glass-strong);
+  color: var(--color-text-bright);
 }
 
 .event-card__delete {
@@ -172,7 +162,7 @@ function onTouchEnd() {
   background: none;
   border: none;
   font-size: 1.2rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   cursor: pointer;
   border-radius: 50%;
   transition: color 0.15s ease, background 0.15s ease;
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index c8deee9..4d9b390 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -33,21 +33,21 @@
 
         <dl class="detail__meta">
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon" aria-label="Date and time">
+            <dt class="detail__meta-icon glass" aria-label="Date and time">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ formattedDateTime }}</dd>
           </div>
 
           <div v-if="event.location" class="detail__meta-item">
-            <dt class="detail__meta-icon" aria-label="Location">
+            <dt class="detail__meta-icon glass" aria-label="Location">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ event.location }}</dd>
           </div>
 
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon" aria-label="Attendees">
+            <dt class="detail__meta-icon glass" aria-label="Attendees">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ event.attendeeCount }} going</dd>
@@ -288,7 +288,7 @@ onMounted(fetchEvent)
   inset: 0;
   background: linear-gradient(
     to bottom,
-    rgba(27, 23, 48, 0.4) 0%,
+    var(--color-glass-overlay) 0%,
     transparent 50%
   );
 }
@@ -369,11 +369,7 @@ onMounted(fetchEvent)
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
-  border: 1px solid var(--color-glass-border);
   border-radius: 10px;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   color: var(--color-text-on-gradient);
 }
 
@@ -393,14 +389,14 @@ onMounted(fetchEvent)
 .detail__section-title {
   font-size: 0.75rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
 .detail__description {
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text-soft);
   line-height: 1.6;
   word-break: break-word;
 }
@@ -415,8 +411,8 @@ onMounted(fetchEvent)
 }
 
 .detail__banner--expired {
-  background: rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.8);
+  background: var(--color-glass);
+  color: var(--color-text-soft);
   backdrop-filter: blur(4px);
 }
 
@@ -429,7 +425,7 @@ onMounted(fetchEvent)
 
 /* Skeleton – shimmer on gradient */
 .skeleton {
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background: linear-gradient(90deg, var(--color-glass) 25%, var(--color-glass-hover) 50%, var(--color-glass) 75%);
   background-size: 200% 100%;
 }
 

From 64816558c1c93460117e8141566734cdcdd14a2c Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:47:57 +0100
Subject: [PATCH 07/11] Apply glass utility class to form fields and buttons

Use .glass class on form fields and buttons on gradient backgrounds.
Buttons get gradient glow border via background-clip trick. Solid
white fallback preserved for BottomSheet context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css           | 34 ++++++++++++++++++--------
 frontend/src/views/EventCreateView.vue | 12 ++++-----
 frontend/src/views/EventDetailView.vue |  2 +-
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index aa1a138..3814fe9 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -117,21 +117,24 @@ body::before {
 /* Card-style form fields */
 .form-field {
   background: var(--color-card);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-md);
-  box-shadow: var(--shadow-card);
   width: 100%;
   font-family: inherit;
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text);
   outline: none;
-  transition: box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
+}
+
+.form-field.glass {
+  color: var(--color-text-on-gradient);
 }
 
 .form-field:focus {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  border-color: var(--color-glass-border-hover);
 }
 
 .form-field::placeholder {
@@ -139,6 +142,10 @@ body::before {
   font-weight: 400;
 }
 
+.form-field.glass::placeholder {
+  color: var(--color-text-muted);
+}
+
 textarea.form-field {
   resize: vertical;
   min-height: 5rem;
@@ -163,22 +170,29 @@ textarea.form-field {
   display: block;
   width: 100%;
   padding: var(--spacing-md) var(--spacing-lg);
-  background: var(--color-accent);
+  background: var(--color-card);
   color: var(--color-text);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-button);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
-  box-shadow: var(--shadow-button);
-  transition: opacity 0.2s ease, transform 0.1s ease;
+  transition: border-color 0.2s ease, transform 0.1s ease;
   text-align: center;
   text-decoration: none;
 }
 
+.btn-primary.glass {
+  color: var(--color-text-on-gradient);
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--color-glass-inner), var(--color-glass-inner)) padding-box,
+    var(--gradient-glow) border-box;
+}
+
 .btn-primary:hover {
-  opacity: 0.92;
+  border-color: var(--color-glass-border-hover);
 }
 
 .btn-primary:active {
@@ -222,7 +236,7 @@ textarea.form-field {
   -webkit-backdrop-filter: blur(16px);
 }
 
-.glass:hover {
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
   background: var(--color-glass-hover);
   border-color: var(--color-glass-border-hover);
 }
diff --git a/frontend/src/views/EventCreateView.vue b/frontend/src/views/EventCreateView.vue
index 7b06c63..5d7363e 100644
--- a/frontend/src/views/EventCreateView.vue
+++ b/frontend/src/views/EventCreateView.vue
@@ -12,7 +12,7 @@
           id="title"
           v-model="form.title"
           type="text"
-          class="form-field"
+          class="form-field glass"
           required
           maxlength="200"
           placeholder="What's the event?"
@@ -27,7 +27,7 @@
         <textarea
           id="description"
           v-model="form.description"
-          class="form-field"
+          class="form-field glass"
           maxlength="2000"
           placeholder="Tell people more about it…"
           :aria-invalid="!!errors.description"
@@ -42,7 +42,7 @@
           id="dateTime"
           v-model="form.dateTime"
           type="datetime-local"
-          class="form-field"
+          class="form-field glass"
           required
           :aria-invalid="!!errors.dateTime"
           :aria-describedby="errors.dateTime ? 'dateTime-error' : undefined"
@@ -56,7 +56,7 @@
           id="location"
           v-model="form.location"
           type="text"
-          class="form-field"
+          class="form-field glass"
           maxlength="500"
           placeholder="Where is it?"
           :aria-invalid="!!errors.location"
@@ -71,7 +71,7 @@
           id="expiryDate"
           v-model="form.expiryDate"
           type="date"
-          class="form-field"
+          class="form-field glass"
           required
           :min="tomorrow"
           :aria-invalid="!!errors.expiryDate"
@@ -80,7 +80,7 @@
         <span v-if="errors.expiryDate" id="expiryDate-error" class="field-error" role="alert">{{ errors.expiryDate }}</span>
       </div>
 
-      <button type="submit" class="btn-primary" :disabled="submitting">
+      <button type="submit" class="btn-primary glass" :disabled="submitting">
         {{ submitting ? 'Creating…' : 'Create Event' }}
       </button>
 
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 4d9b390..3c2b50f 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -70,7 +70,7 @@
       <!-- Error state -->
       <div v-else-if="state === 'error'" class="detail__content detail__content--center" role="alert">
         <p class="detail__message">Something went wrong.</p>
-        <button class="btn-primary" type="button" @click="fetchEvent">Retry</button>
+        <button class="btn-primary glass" type="button" @click="fetchEvent">Retry</button>
       </div>
     </div>
 

From 5dd7cb3fb801c14f3e5c2fc3a9c0e320e5dd606e Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:51:21 +0100
Subject: [PATCH 08/11] Add animated glow border to RSVP CTA button

Wrap the "I'm attending" button with animated glow-border and
glass-inner styling. Update test selectors for new structure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/RsvpBar.vue           | 32 +++++++++++++++++--
 .../src/components/__tests__/RsvpBar.spec.ts  |  4 +--
 .../views/__tests__/EventDetailView.spec.ts   |  8 ++---
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/RsvpBar.vue b/frontend/src/components/RsvpBar.vue
index 76f4d59..67b4cbe 100644
--- a/frontend/src/components/RsvpBar.vue
+++ b/frontend/src/components/RsvpBar.vue
@@ -8,9 +8,11 @@
       </div>
 
       <!-- CTA state: no RSVP yet -->
-      <button v-else class="btn-primary rsvp-bar__cta" type="button" @click="$emit('open')">
-        I'm attending
-      </button>
+      <div v-else class="rsvp-bar__cta glow-border glow-border--animated">
+        <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
+          I'm attending
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -45,6 +47,30 @@ defineEmits<{
 
 .rsvp-bar__cta {
   width: 100%;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-bar__cta:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-bar__cta:active {
+  transform: scale(0.98);
+}
+
+.rsvp-bar__cta-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+  border: none;
+  cursor: pointer;
 }
 
 .rsvp-bar__status {
diff --git a/frontend/src/components/__tests__/RsvpBar.spec.ts b/frontend/src/components/__tests__/RsvpBar.spec.ts
index b9aa1d9..4296748 100644
--- a/frontend/src/components/__tests__/RsvpBar.spec.ts
+++ b/frontend/src/components/__tests__/RsvpBar.spec.ts
@@ -6,7 +6,7 @@ describe('RsvpBar', () => {
   it('renders CTA button when hasRsvp is false', () => {
     const wrapper = mount(RsvpBar)
     expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta').text()).toBe("I'm attending")
+    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending")
     expect(wrapper.find('.rsvp-bar__status').exists()).toBe(false)
   })
 
@@ -19,7 +19,7 @@ describe('RsvpBar', () => {
 
   it('emits open when CTA button is clicked', async () => {
     const wrapper = mount(RsvpBar)
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     expect(wrapper.emitted('open')).toHaveLength(1)
   })
 
diff --git a/frontend/src/views/__tests__/EventDetailView.spec.ts b/frontend/src/views/__tests__/EventDetailView.spec.ts
index 3f0614b..60989cc 100644
--- a/frontend/src/views/__tests__/EventDetailView.spec.ts
+++ b/frontend/src/views/__tests__/EventDetailView.spec.ts
@@ -262,7 +262,7 @@ describe('EventDetailView', () => {
 
     expect(document.body.querySelector('[role="dialog"]')).toBeNull()
 
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     expect(document.body.querySelector('[role="dialog"]')).not.toBeNull()
@@ -275,7 +275,7 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     // Form is inside Teleport — find via document.body
@@ -300,7 +300,7 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     // Open sheet
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     // Fill name via Teleported input
@@ -386,7 +386,7 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     const input = document.body.querySelector('#rsvp-name')! as HTMLInputElement

From 831ffc071ab7e99b361a4d4c82470deac35f4351 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:57:30 +0100
Subject: [PATCH 09/11] Apply glassmorphism to BottomSheet and RSVP bar status

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css            |  4 +--
 frontend/src/components/BottomSheet.vue | 10 ++++--
 frontend/src/components/RsvpBar.vue     |  7 ++--
 frontend/src/views/EventDetailView.vue  | 44 ++++++++++++++++++++++---
 4 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 3814fe9..061f642 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -308,7 +308,7 @@ textarea.form-field {
 .sheet-title {
   font-size: 1.2rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
 }
 
 .rsvp-form {
@@ -320,7 +320,7 @@ textarea.form-field {
 .rsvp-form__label {
   font-size: 0.85rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   padding-left: 0.25rem;
 }
 
diff --git a/frontend/src/components/BottomSheet.vue b/frontend/src/components/BottomSheet.vue
index c3a0ba6..375621f 100644
--- a/frontend/src/components/BottomSheet.vue
+++ b/frontend/src/components/BottomSheet.vue
@@ -45,7 +45,7 @@ watch(
 .sheet-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--color-glass-overlay);
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -53,7 +53,11 @@ watch(
 }
 
 .sheet {
-  background: var(--color-card);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  border-bottom: none;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border-radius: 20px 20px 0 0;
   padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
   width: 100%;
@@ -67,7 +71,7 @@ watch(
 .sheet__handle {
   width: 36px;
   height: 4px;
-  background: #ccc;
+  background: var(--color-glass-border-hover);
   border-radius: 2px;
   align-self: center;
   flex-shrink: 0;
diff --git a/frontend/src/components/RsvpBar.vue b/frontend/src/components/RsvpBar.vue
index 67b4cbe..e8f99cc 100644
--- a/frontend/src/components/RsvpBar.vue
+++ b/frontend/src/components/RsvpBar.vue
@@ -78,13 +78,16 @@ defineEmits<{
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs);
-  background: var(--color-card);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-lg);
   box-shadow: var(--shadow-card);
   font-weight: 600;
   font-size: 0.95rem;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
 }
 
 .rsvp-bar__check {
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 3c2b50f..6fb22f6 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -90,7 +90,7 @@
           <input
             id="rsvp-name"
             v-model.trim="nameInput"
-            class="form-field"
+            class="form-field glass"
             type="text"
             placeholder="e.g. Max Mustermann"
             maxlength="100"
@@ -99,9 +99,11 @@
           />
           <span v-if="nameError" class="rsvp-form__field-error" role="alert">{{ nameError }}</span>
         </div>
-        <button class="btn-primary" type="submit" :disabled="submitting">
-          {{ submitting ? 'Sending…' : "Count me in" }}
-        </button>
+        <div class="rsvp-form__submit glow-border glow-border--animated">
+          <button class="rsvp-form__submit-inner glass-inner" type="submit" :disabled="submitting">
+            {{ submitting ? 'Sending…' : "Count me in" }}
+          </button>
+        </div>
         <p v-if="submitError" class="rsvp-form__field-error rsvp-form__error" role="alert">{{ submitError }}</p>
       </form>
     </BottomSheet>
@@ -444,4 +446,38 @@ onMounted(fetchEvent)
 .skeleton--short {
   width: 45%;
 }
+
+/* RSVP submit button (glow border wrapper) */
+.rsvp-form__submit {
+  width: 100%;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-form__submit:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-form__submit:active {
+  transform: scale(0.98);
+}
+
+.rsvp-form__submit-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+.rsvp-form__submit-inner:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 </style>

From e6c4a21f65cff0f85508a0619f39aecd98c45e29 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 19:00:39 +0100
Subject: [PATCH 10/11] Apply glassmorphism to ConfirmDialog overlay and
 surface

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ConfirmDialog.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ConfirmDialog.vue b/frontend/src/components/ConfirmDialog.vue
index db0ba97..b72ac5b 100644
--- a/frontend/src/components/ConfirmDialog.vue
+++ b/frontend/src/components/ConfirmDialog.vue
@@ -75,7 +75,7 @@ watch(
 .confirm-dialog__overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--color-glass-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -84,9 +84,12 @@ watch(
 }
 
 .confirm-dialog {
-  background: var(--color-card);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border-radius: var(--radius-card);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   padding: var(--spacing-xl);
   max-width: 320px;
   width: 100%;
@@ -98,13 +101,13 @@ watch(
 .confirm-dialog__title {
   font-size: 1.05rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
 }
 
 .confirm-dialog__message {
   font-size: 0.9rem;
   font-weight: 400;
-  color: #666;
+  color: var(--color-text-soft);
 }
 
 .confirm-dialog__actions {
@@ -130,8 +133,9 @@ watch(
 }
 
 .confirm-dialog__btn--cancel {
-  background: #e8e8e8;
-  color: #555;
+  background: var(--color-glass);
+  border: 1px solid var(--color-glass-border);
+  color: var(--color-text-on-gradient);
 }
 
 .confirm-dialog__btn--confirm {

From 32f96e4c6fbf4a16a6afee5f2f146ccb89bda0f2 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 19:07:43 +0100
Subject: [PATCH 11/11] Replace hardcoded color values with glass design tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css               | 2 +-
 frontend/src/components/CreateEventFab.vue | 2 +-
 frontend/src/components/EmptyState.vue     | 2 +-
 frontend/src/components/EventCard.vue      | 2 +-
 frontend/src/views/EventDetailView.vue     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 061f642..224fd1c 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -138,7 +138,7 @@ body::before {
 }
 
 .form-field::placeholder {
-  color: #999;
+  color: var(--color-text-muted);
   font-weight: 400;
 }
 
diff --git a/frontend/src/components/CreateEventFab.vue b/frontend/src/components/CreateEventFab.vue
index f10489d..03bbc91 100644
--- a/frontend/src/components/CreateEventFab.vue
+++ b/frontend/src/components/CreateEventFab.vue
@@ -18,7 +18,7 @@ import { RouterLink } from 'vue-router'
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  color: #fff;
+  color: var(--color-text-on-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/components/EmptyState.vue b/frontend/src/components/EmptyState.vue
index 4b6a148..e870945 100644
--- a/frontend/src/components/EmptyState.vue
+++ b/frontend/src/components/EmptyState.vue
@@ -43,7 +43,7 @@ import { RouterLink } from 'vue-router'
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
-  color: #fff;
+  color: var(--color-text-on-gradient);
   text-align: center;
 }
 
diff --git a/frontend/src/components/EventCard.vue b/frontend/src/components/EventCard.vue
index 5ddeb8d..868720b 100644
--- a/frontend/src/components/EventCard.vue
+++ b/frontend/src/components/EventCard.vue
@@ -144,7 +144,7 @@ function onTouchEnd() {
 
 .event-card__badge--organizer {
   background: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-gradient);
 }
 
 .event-card__badge--attendee {
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 6fb22f6..840f667 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -470,7 +470,7 @@ onMounted(fetchEvent)
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
-  color: #fff;
+  color: var(--color-text-on-gradient);
   text-align: center;
   border: none;
   cursor: pointer;