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] 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;