.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

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 */

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;
+  background: rgba(255, 255, 255, 0.15);
-  color: #555;
+  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;

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