Merge pull request 'Add Open Graph and Twitter Card meta-tags for link previews' (#24) from 012-link-preview into master

Replace PathResourceResolver SPA fallback with SpaController that
injects OG/Twitter meta-tags into cached index.html template.
Event pages get event-specific tags (title, date, location),
all other pages get generic fete branding. Includes og-image.png
brand asset and forward-headers-strategy for proxy support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.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

backend/src/main/java/de/fete/adapter/in/web/SpaController.java

@@ -0,0 +1,188 @@
+package de.fete.adapter.in.web;
+
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.port.in.GetEventUseCase;
+import jakarta.annotation.PostConstruct;
+import jakarta.servlet.http.HttpServletRequest;
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.time.ZonedDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.LinkedHashMap;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Optional;
+import java.util.UUID;
+import org.springframework.core.io.ClassPathResource;
+import org.springframework.http.MediaType;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.servlet.support.ServletUriComponentsBuilder;
+
+/** Serves the SPA index.html with injected Open Graph and Twitter Card meta-tags. */
+@Controller
+public class SpaController {
+
+  private static final String PLACEHOLDER = "<!-- OG_META_TAGS -->";
+  private static final int MAX_TITLE_LENGTH = 70;
+  private static final int MAX_DESCRIPTION_LENGTH = 200;
+  private static final String GENERIC_TITLE = "fete";
+  private static final String GENERIC_DESCRIPTION =
+      "Privacy-focused event planning. Create and share events without accounts.";
+  private static final DateTimeFormatter DATE_FORMAT =
+      DateTimeFormatter.ofPattern("EEEE, MMMM d, yyyy 'at' h:mm a", Locale.ENGLISH);
+
+  private final GetEventUseCase getEventUseCase;
+  private String htmlTemplate;
+
+  /** Creates a new SpaController. */
+  public SpaController(GetEventUseCase getEventUseCase) {
+    this.getEventUseCase = getEventUseCase;
+  }
+
+  /** Loads and caches the index.html template at startup. */
+  @PostConstruct
+  void loadTemplate() throws IOException {
+    var resource = new ClassPathResource("/static/index.html");
+    if (resource.exists()) {
+      htmlTemplate = resource.getContentAsString(StandardCharsets.UTF_8);
+    }
+  }
+
+  /** Serves SPA HTML with generic meta-tags for non-event routes. */
+  @GetMapping(
+      value = {"/", "/create", "/events"},
+      produces = MediaType.TEXT_HTML_VALUE
+  )
+  @ResponseBody
+  public String serveGenericPage(HttpServletRequest request) {
+    if (htmlTemplate == null) {
+      return "";
+    }
+    String baseUrl = getBaseUrl(request);
+    return htmlTemplate.replace(PLACEHOLDER, renderTags(buildGenericMeta(baseUrl)));
+  }
+
+  /** Serves SPA HTML with event-specific meta-tags. */
+  @GetMapping(
+      value = "/events/{token}",
+      produces = MediaType.TEXT_HTML_VALUE
+  )
+  @ResponseBody
+  public String serveEventPage(@PathVariable String token,
+      HttpServletRequest request) {
+    if (htmlTemplate == null) {
+      return "";
+    }
+    String baseUrl = getBaseUrl(request);
+    Map<String, String> meta = resolveEventMeta(token, baseUrl);
+    return htmlTemplate.replace(PLACEHOLDER, renderTags(meta));
+  }
+
+  // --- Meta-tag composition ---
+
+  private Map<String, String> buildEventMeta(Event event, String baseUrl) {
+    var tags = new LinkedHashMap<String, String>();
+    String title = truncateTitle(event.getTitle());
+    String description = formatDescription(event);
+    tags.put("og:title", title);
+    tags.put("og:description", description);
+    tags.put("og:url", baseUrl + "/events/" + event.getEventToken().value());
+    tags.put("og:type", "website");
+    tags.put("og:site_name", GENERIC_TITLE);
+    tags.put("og:image", baseUrl + "/og-image.png");
+    tags.put("twitter:card", "summary");
+    tags.put("twitter:title", title);
+    tags.put("twitter:description", description);
+    return tags;
+  }
+
+  private Map<String, String> buildGenericMeta(String baseUrl) {
+    var tags = new LinkedHashMap<String, String>();
+    tags.put("og:title", GENERIC_TITLE);
+    tags.put("og:description", GENERIC_DESCRIPTION);
+    tags.put("og:url", baseUrl);
+    tags.put("og:type", "website");
+    tags.put("og:site_name", GENERIC_TITLE);
+    tags.put("og:image", baseUrl + "/og-image.png");
+    tags.put("twitter:card", "summary");
+    tags.put("twitter:title", GENERIC_TITLE);
+    tags.put("twitter:description", GENERIC_DESCRIPTION);
+    return tags;
+  }
+
+  private Map<String, String> resolveEventMeta(String token, String baseUrl) {
+    try {
+      UUID uuid = UUID.fromString(token);
+      Optional<Event> event =
+          getEventUseCase.getByEventToken(new EventToken(uuid));
+      if (event.isPresent()) {
+        return buildEventMeta(event.get(), baseUrl);
+      }
+    } catch (IllegalArgumentException ignored) {
+      // Invalid UUID — fall back to generic
+    }
+    return buildGenericMeta(baseUrl);
+  }
+
+  // --- Description formatting ---
+
+  private String truncateTitle(String title) {
+    if (title.length() <= MAX_TITLE_LENGTH) {
+      return title;
+    }
+    return title.substring(0, MAX_TITLE_LENGTH - 3) + "...";
+  }
+
+  private String formatDescription(Event event) {
+    ZonedDateTime zoned = event.getDateTime().atZoneSameInstant(event.getTimezone());
+    var sb = new StringBuilder();
+    sb.append("📅 ").append(zoned.format(DATE_FORMAT));
+
+    if (event.getLocation() != null && !event.getLocation().isBlank()) {
+      sb.append(" · 📍 ").append(event.getLocation());
+    }
+
+    if (event.getDescription() != null && !event.getDescription().isBlank()) {
+      sb.append(" — ").append(event.getDescription());
+    }
+
+    String result = sb.toString();
+    if (result.length() > MAX_DESCRIPTION_LENGTH) {
+      return result.substring(0, MAX_DESCRIPTION_LENGTH - 3) + "...";
+    }
+    return result;
+  }
+
+  // --- HTML rendering ---
+
+  private String renderTags(Map<String, String> tags) {
+    var sb = new StringBuilder();
+    for (var entry : tags.entrySet()) {
+      String key = entry.getKey();
+      String value = escapeHtml(entry.getValue());
+      String attr = key.startsWith("twitter:") ? "name" : "property";
+      sb.append("<meta ").append(attr).append("=\"").append(key)
+          .append("\" content=\"").append(value).append("\">\n");
+    }
+    return sb.toString().stripTrailing();
+  }
+
+  private String escapeHtml(String input) {
+    return input
+        .replace("&", "&amp;")
+        .replace("\"", "&quot;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;");
+  }
+
+  private String getBaseUrl(HttpServletRequest request) {
+    return ServletUriComponentsBuilder.fromRequestUri(request)
+        .replacePath("")
+        .build()
+        .toUriString();
+  }
+}

backend/src/main/java/de/fete/config/WebConfig.java

@@ -1,21 +1,17 @@
 package de.fete.config;
 
-import java.io.IOException;
 import java.time.Clock;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
-import org.springframework.core.io.ClassPathResource;
-import org.springframework.core.io.Resource;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
-import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
-import org.springframework.web.servlet.resource.PathResourceResolver;
 
-/** Configures API path prefix and SPA static resource serving. */
+/** Configures API path prefix. Static resources served by default Spring Boot handler. */
 @Configuration
 public class WebConfig implements WebMvcConfigurer {
 
+  /** Provides a system clock bean for time-dependent services. */
   @Bean
   Clock clock() {
     return Clock.systemDefaultZone();
@@ -25,23 +21,4 @@ public class WebConfig implements WebMvcConfigurer {
   public void configurePathMatch(PathMatchConfigurer configurer) {
     configurer.addPathPrefix("/api", c -> c.isAnnotationPresent(RestController.class));
   }
-
-  @Override
-  public void addResourceHandlers(ResourceHandlerRegistry registry) {
-    registry.addResourceHandler("/**")
-        .addResourceLocations("classpath:/static/")
-        .resourceChain(true)
-        .addResolver(new PathResourceResolver() {
-          @Override
-          protected Resource getResource(String resourcePath,
-              Resource location) throws IOException {
-            Resource requested = location.createRelative(resourcePath);
-            if (requested.exists() && requested.isReadable()) {
-              return requested;
-            }
-            Resource index = new ClassPathResource("/static/index.html");
-            return (index.exists() && index.isReadable()) ? index : null;
-          }
-        });
-  }
 }

backend/src/main/resources/application.properties

@@ -7,6 +7,9 @@ spring.jpa.open-in-view=false
 # Liquibase
 spring.liquibase.change-log=classpath:db/changelog/db.changelog-master.xml
 
+# Proxy headers
+server.forward-headers-strategy=framework
+
 # Actuator
 management.endpoints.web.exposure.include=health
 management.endpoint.health.show-details=never

backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java

@@ -0,0 +1,281 @@
+package de.fete.adapter.in.web;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import de.fete.TestcontainersConfig;
+import de.fete.adapter.out.persistence.EventJpaEntity;
+import de.fete.adapter.out.persistence.EventJpaRepository;
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.UUID;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.context.annotation.Import;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+
+@SpringBootTest
+@AutoConfigureMockMvc
+@Import(TestcontainersConfig.class)
+class SpaControllerTest {
+
+  @Autowired
+  private MockMvc mockMvc;
+
+  @Autowired
+  private EventJpaRepository eventJpaRepository;
+
+  // --- Phase 2: Base functionality ---
+
+  @Test
+  void rootServesHtml() throws Exception {
+    mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  @Test
+  void rootHtmlDoesNotContainPlaceholder() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).doesNotContain("<!-- OG_META_TAGS -->");
+  }
+
+  @Test
+  void createRouteServesHtml() throws Exception {
+    mockMvc.perform(get("/create").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  @Test
+  void eventsRouteServesHtml() throws Exception {
+    mockMvc.perform(get("/events").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  // --- Phase 4 (US2): Generic OG meta-tags ---
+
+  @Test
+  void rootContainsGenericOgTitle() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("content=\"fete\"");
+  }
+
+  @Test
+  void createRouteContainsGenericOgDescription() throws Exception {
+    String html = mockMvc.perform(get("/create").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:description");
+    assertThat(html).contains("Privacy-focused event planning");
+  }
+
+  @Test
+  void unknownRouteReturns404() throws Exception {
+    mockMvc.perform(get("/unknown/path").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isNotFound());
+  }
+
+  // --- Phase 5 (US3): Twitter Card meta-tags ---
+
+  @Test
+  void eventRouteContainsTwitterCardTags() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Twitter Test", "Testing cards",
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("twitter:card");
+    assertThat(html).contains("twitter:title");
+    assertThat(html).contains("twitter:description");
+  }
+
+  @Test
+  void genericRouteContainsTwitterCardTags() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("twitter:card");
+    assertThat(html).contains("content=\"summary\"");
+  }
+
+  // --- Phase 3 (US1): Event-specific OG meta-tags ---
+
+  @Test
+  void eventRouteContainsEventSpecificOgTitle() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Birthday Party", "Come celebrate!",
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("Birthday Party");
+  }
+
+  @Test
+  void eventRouteContainsOgDescription() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "BBQ", "Bring drinks!",
+        "Europe/Berlin", "Central Park", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:description");
+    assertThat(html).contains("Central Park");
+    assertThat(html).contains("Bring drinks!");
+  }
+
+  @Test
+  void eventRouteContainsOgUrl() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null,
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:url");
+    assertThat(html).contains("/events/" + event.getEventToken());
+  }
+
+  @Test
+  void eventRouteContainsOgImage() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null,
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:image");
+    assertThat(html).contains("/og-image.png");
+  }
+
+  @Test
+  void unknownEventTokenFallsBackToGenericMeta() throws Exception {
+    String html = mockMvc.perform(
+            get("/events/" + UUID.randomUUID()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("content=\"fete\"");
+  }
+
+  // --- HTML escaping ---
+
+  @Test
+  void specialCharactersAreHtmlEscaped() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Tom & Jerry's \"Party\"", "Fun <times> & more",
+        "Europe/Berlin", "O'Brien's Pub", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("Tom &amp; Jerry");
+    assertThat(html).contains("&amp; more");
+    assertThat(html).contains("&lt;times&gt;");
+    assertThat(html).doesNotContain("content=\"Tom & Jerry");
+  }
+
+  // --- Title truncation ---
+
+  @Test
+  void longTitleIsTruncatedTo70Chars() throws Exception {
+    String longTitle = "A".repeat(80);
+    EventJpaEntity event = seedEvent(
+        longTitle, "Desc",
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("A".repeat(67) + "...");
+    assertThat(html).doesNotContain("A".repeat(68));
+  }
+
+  // --- Description formatting ---
+
+  @Test
+  void eventWithoutLocationOmitsPinEmoji() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Online Meetup", "Virtual gathering",
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).doesNotContain("📍");
+  }
+
+  @Test
+  void eventWithoutDescriptionOmitsDash() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Silent Event", null,
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("📅");
+    assertThat(html).contains("Berlin");
+    assertThat(html).doesNotContain(" — ");
+  }
+
+  private EventJpaEntity seedEvent(
+      String title, String description, String timezone,
+      String location, LocalDate expiryDate) {
+    var entity = new EventJpaEntity();
+    entity.setEventToken(UUID.randomUUID());
+    entity.setOrganizerToken(UUID.randomUUID());
+    entity.setTitle(title);
+    entity.setDescription(description);
+    entity.setDateTime(
+        OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    entity.setTimezone(timezone);
+    entity.setLocation(location);
+    entity.setExpiryDate(expiryDate);
+    entity.setCreatedAt(OffsetDateTime.now());
+    return eventJpaRepository.save(entity);
+  }
+}

backend/src/test/java/de/fete/config/WebConfigTest.java

@@ -29,8 +29,10 @@ class WebConfigTest {
 
   @Test
   void apiPrefixNotAccessibleWithoutIt() throws Exception {
-    // /events without /api prefix should not resolve to the API endpoint
+    // /events without /api prefix should not resolve to the REST API endpoint;
-    mockMvc.perform(get("/events"))
+    // it is served by SpaController as HTML instead
-        .andExpect(status().isNotFound());
+    mockMvc.perform(get("/events")
+            .accept("text/html"))
+        .andExpect(status().isOk());
   }
 }

backend/src/test/resources/static/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!-- OG_META_TAGS -->
+    <title>fete</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

frontend/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!-- OG_META_TAGS -->
     <title>fete</title>
   </head>
   <body>

frontend/package-lock.json

@@ -2947,9 +2947,9 @@
       }
     },
     "node_modules/@vitest/eslint-plugin": {
-      "version": "1.6.10",
+      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.6.10.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.6.9.tgz",
-      "integrity": "sha512-/cOf+mTu4HBJIYHTETo8/OFCSZv3T2p+KfGnouzKfjK063cWLZp0TzvK7EU5B3eFG7ypUNtw6l+jK+SA+p1g8g==",
+      "integrity": "sha512-9WfPx1OwJ19QLCSRLkqVO7//1WcWnK3fE/3fJhKMAmDe8+9G4rB47xCNIIeCq3FdEzkIoLTfDlwDlPBaUTMhow==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y="0.9em" font-size="80" x="50%" text-anchor="middle">🎉</text>
+</svg>

frontend/src/assets/main.css

@@ -16,6 +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%);
@@ -33,7 +53,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 */
@@ -60,7 +80,22 @@ html {
 
 body {
   min-height: 100vh;
-  background: var(--gradient-primary);
+  background-color: var(--color-dark-base);
+  position: relative;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  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%),
+    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 {
@@ -82,28 +117,35 @@ body {
 /* 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 {
-  color: #999;
+  color: var(--color-text-muted);
   font-weight: 400;
 }
 
+.form-field.glass::placeholder {
+  color: var(--color-text-muted);
+}
+
 textarea.form-field {
   resize: vertical;
   min-height: 5rem;
@@ -128,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: border-color 0.2s ease, transform 0.1s ease;
-  transition: opacity 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 {
@@ -176,6 +225,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:not(input):not(textarea):not(.btn-primary) {
+  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;
@@ -197,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 {
@@ -209,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;
 }
 

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>

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;

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;
+  background: var(--color-glass);
-  color: #555;
+  border: 1px solid var(--color-glass-border);
+  color: var(--color-text-on-gradient);
 }
 
 .confirm-dialog__btn--confirm {

frontend/src/components/CreateEventFab.vue

@@ -1,6 +1,8 @@
 <template>
-  <RouterLink to="/create" class="fab" aria-label="Create event">
+  <RouterLink to="/create" class="fab glow-border" aria-label="Create event">
-    <span class="fab__icon" aria-hidden="true">+</span>
+    <span class="fab__inner glass-inner">
+      <span class="fab__icon" aria-hidden="true">+</span>
+    </span>
   </RouterLink>
 </template>
 
@@ -16,20 +18,26 @@ import { RouterLink } from 'vue-router'
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: var(--color-accent);
+  color: var(--color-text-on-gradient);
-  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;
+  transition: transform 0.15s ease;
+}
+
+.fab__inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  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 +49,7 @@ import { RouterLink } from 'vue-router'
   outline-offset: 3px;
 }
 
+
 .fab__icon {
   font-size: 1.8rem;
   font-weight: 300;

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

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: var(--color-text-on-gradient);
+  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>

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,11 +93,10 @@ function onTouchEnd() {
 .event-card {
   display: flex;
   align-items: center;
-  background: var(--color-card);
   border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
   padding: var(--spacing-md) var(--spacing-lg);
   gap: var(--spacing-sm);
+  transition: background 0.2s ease, border-color 0.2s ease;
 }
 
 .event-card--past {
@@ -122,7 +121,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 +130,7 @@ function onTouchEnd() {
 .event-card__time {
   font-size: 0.8rem;
   font-weight: 400;
-  color: #888;
+  color: var(--color-text-secondary);
 }
 
 .event-card__badge {
@@ -145,12 +144,12 @@ function onTouchEnd() {
 
 .event-card__badge--organizer {
   background: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-gradient);
 }
 
 .event-card__badge--attendee {
-  background: #e0e0e0;
+  background: var(--color-glass-strong);
-  color: #555;
+  color: var(--color-text-bright);
 }
 
 .event-card__delete {
@@ -163,7 +162,7 @@ function onTouchEnd() {
   background: none;
   border: none;
   font-size: 1.2rem;
-  color: #bbb;
+  color: var(--color-text-muted);
   cursor: pointer;
   border-radius: 50%;
   transition: color 0.15s ease, background 0.15s ease;

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')">
+      <div v-else class="rsvp-bar__cta glow-border glow-border--animated">
-        I'm attending
+        <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
-      </button>
+          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 {
@@ -52,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 {

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

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

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>
 

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>
@@ -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>
 
@@ -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">
+        <div class="rsvp-form__submit glow-border glow-border--animated">
-          {{ submitting ? 'Sending…' : "Count me in" }}
+          <button class="rsvp-form__submit-inner glass-inner" type="submit" :disabled="submitting">
-        </button>
+            {{ 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>
@@ -268,15 +270,19 @@ onMounted(fetchEvent)
 .detail__hero {
   position: relative;
   width: 100%;
-  height: 260px;
+  height: 420px;
-  overflow: hidden;
+  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 +290,8 @@ onMounted(fetchEvent)
   inset: 0;
   background: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0.4) 0%,
+    var(--color-glass-overlay) 0%,
-    transparent 50%,
+    transparent 50%
-    var(--color-gradient-start) 100%
   );
 }
 
@@ -366,7 +371,6 @@ onMounted(fetchEvent)
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   color: var(--color-text-on-gradient);
 }
@@ -387,14 +391,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;
 }
@@ -409,8 +413,8 @@ onMounted(fetchEvent)
 }
 
 .detail__banner--expired {
-  background: rgba(255, 255, 255, 0.12);
+  background: var(--color-glass);
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--color-text-soft);
   backdrop-filter: blur(4px);
 }
 
@@ -423,7 +427,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%;
 }
 
@@ -442,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: var(--color-text-on-gradient);
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+.rsvp-form__submit-inner:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 </style>

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

specs/012-link-preview/checklists/requirements.md

@@ -0,0 +1,36 @@
+# Specification Quality Checklist: Link Preview (Open Graph Meta-Tags)
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-09
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
+- Assumptions section documents the key technical consideration (SPA vs. server-rendered meta-tags) without prescribing a solution.
+- `og:image` explicitly deferred to future scope.

specs/012-link-preview/contracts/html-meta-tags.md

@@ -0,0 +1,98 @@
+# Contract: HTML Meta-Tags
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## Overview
+
+This feature does not add new REST API endpoints. The contract is the HTML meta-tag structure injected into the server-rendered `index.html`.
+
+## Meta-Tag Contract: Event Pages
+
+For requests to `/events/{eventToken}` where the event exists:
+
+```html
+<!-- Open Graph -->
+<meta property="og:title" content="{event title, max 70 chars}">
+<meta property="og:description" content="{formatted description, max 200 chars}">
+<meta property="og:url" content="{absolute canonical URL}">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="fete">
+<meta property="og:image" content="{absolute URL}/og-image.png">
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="{event title, max 70 chars}">
+<meta name="twitter:description" content="{formatted description, max 200 chars}">
+```
+
+### Description Format
+
+Full event data:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM · 📍 Berlin — First 200 chars of description...
+```
+
+No location:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM — First 200 chars of description...
+```
+
+No description:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM · 📍 Berlin
+```
+
+No location, no description:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM
+```
+
+### Title Truncation
+
+- Titles ≤ 70 characters: used as-is.
+- Titles > 70 characters: truncated to 67 characters + "..."
+
+### HTML Escaping
+
+All meta-tag `content` values MUST be HTML-escaped:
+- `"` → `&quot;`
+- `&` → `&amp;`
+- `<` → `&lt;`
+- `>` → `&gt;`
+
+## Meta-Tag Contract: Non-Event Pages
+
+For requests to `/`, `/create`, or any other non-event, non-API, non-static route:
+
+```html
+<!-- Open Graph -->
+<meta property="og:title" content="fete">
+<meta property="og:description" content="Privacy-focused event planning. Create and share events without accounts.">
+<meta property="og:url" content="{absolute canonical URL}">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="fete">
+<meta property="og:image" content="{absolute URL}/og-image.png">
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="fete">
+<meta name="twitter:description" content="Privacy-focused event planning. Create and share events without accounts.">
+```
+
+## Meta-Tag Contract: Event Not Found
+
+For requests to `/events/{eventToken}` where the event does NOT exist, fall back to generic meta-tags (same as non-event pages). The Vue SPA will handle the 404 UI client-side.
+
+## Injection Mechanism
+
+The `index.html` template contains a placeholder:
+
+```html
+<head>
+  ...
+  <!-- OG_META_TAGS -->
+  ...
+</head>
+```
+
+The server replaces `<!-- OG_META_TAGS -->` with the generated meta-tag block before sending the response.

specs/012-link-preview/data-model.md

@@ -0,0 +1,83 @@
+# Data Model: Link Preview (Open Graph Meta-Tags)
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## Overview
+
+This feature does NOT introduce new database entities. It reads existing event data and projects it into HTML meta-tags. The "model" here is the meta-tag value object used during HTML generation.
+
+## Meta-Tag Value Objects
+
+### OpenGraphMeta
+
+Represents the set of Open Graph meta-tags to inject into the HTML response.
+
+| Field | Type | Source | Rules |
+|---|---|---|---|
+| `title` | String | Event title or "fete" | Max 70 chars, truncated with "..." |
+| `description` | String | Composed from event fields or generic text | Max 200 chars |
+| `url` | String | Canonical URL from request | Absolute URL |
+| `type` | String | Always "website" | Constant |
+| `siteName` | String | Always "fete" | Constant |
+| `image` | String | Static brand image URL | Absolute URL to `/og-image.png` |
+
+### TwitterCardMeta
+
+| Field | Type | Source | Rules |
+|---|---|---|---|
+| `card` | String | Always "summary" | Constant |
+| `title` | String | Same as OG title | Max 70 chars |
+| `description` | String | Same as OG description | Max 200 chars |
+
+## Data Flow
+
+```
+Request for /events/{token}
+    │
+    ▼
+LinkPreviewController
+    │
+    ├── Resolve event token → Event domain object (existing EventRepository)
+    │
+    ├── Build OpenGraphMeta from Event fields:
+    │     title     ← event.title (truncated)
+    │     description ← formatDescription(event.dateTime, event.timezone, event.location, event.description)
+    │     url       ← request base URL + /events/{token}
+    │     image     ← request base URL + /og-image.png
+    │
+    ├── Build TwitterCardMeta (mirrors OG values)
+    │
+    ├── Inject meta-tags into cached index.html template
+    │
+    └── Return modified HTML
+
+Request for / or /create (non-event pages)
+    │
+    ▼
+LinkPreviewController
+    │
+    ├── Build generic OpenGraphMeta:
+    │     title       ← "fete"
+    │     description ← "Privacy-focused event planning. Create and share events without accounts."
+    │     url         ← request URL
+    │     image       ← request base URL + /og-image.png
+    │
+    ├── Build generic TwitterCardMeta
+    │
+    ├── Inject meta-tags into cached index.html template
+    │
+    └── Return modified HTML
+```
+
+## Existing Entities Used (Read-Only)
+
+### Event (from `de.fete.domain.model.Event`)
+
+| Field | Used For |
+|---|---|
+| `title` | `og:title`, `twitter:title` |
+| `description` | Part of `og:description`, `twitter:description` |
+| `dateTime` | Part of `og:description` (formatted) |
+| `timezone` | Date formatting context |
+| `location` | Part of `og:description` |
+| `eventToken` | URL construction |

specs/012-link-preview/plan.md

@@ -0,0 +1,83 @@
+# Implementation Plan: Link Preview (Open Graph Meta-Tags)
+
+**Branch**: `012-link-preview` | **Date**: 2026-03-09 | **Spec**: `specs/012-link-preview/spec.md`
+**Input**: Feature specification from `/specs/012-link-preview/spec.md`
+
+## Summary
+
+Inject Open Graph and Twitter Card meta-tags into the server-rendered HTML so that shared event links display rich preview cards in messengers and on social media. The Spring Boot backend replaces its current static SPA fallback with a controller that dynamically injects event-specific or generic meta-tags into the cached `index.html` template before serving it.
+
+## Technical Context
+
+**Language/Version**: Java 25 (backend), TypeScript 5.9 (frontend — minimal changes)
+**Primary Dependencies**: Spring Boot 3.5.x (existing), Vue 3 (existing) — no new dependencies
+**Storage**: PostgreSQL via JPA (existing event data, read-only access)
+**Testing**: JUnit 5 + Spring MockMvc (backend), Playwright (E2E)
+**Target Platform**: Self-hosted Docker container (Linux)
+**Project Type**: Web application (SPA + REST API)
+**Performance Goals**: N/A — meta-tag injection adds negligible overhead (<1ms string replacement)
+**Constraints**: Meta-tags MUST be in initial HTML response (no client-side JS injection). No external services or CDNs.
+**Scale/Scope**: Affects all HTML page responses. No new database tables or API endpoints.
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|---|---|---|
+| I. Privacy by Design | ✅ PASS | No tracking, analytics, or external services. Meta-tags contain only public event info (title, date, location). No PII exposed. `og:image` is a self-hosted static asset. |
+| II. Test-Driven Methodology | ✅ PLAN | Unit tests for meta-tag generation, integration tests for controller, E2E tests for full HTML verification. TDD enforced. |
+| III. API-First Development | ✅ N/A | No new API endpoints. This feature modifies HTML serving, not the REST API. Existing OpenAPI spec unchanged. |
+| IV. Simplicity & Quality | ✅ PASS | Simple string replacement in cached HTML template. No SSR framework, no prerendering service, no user-agent sniffing. Minimal moving parts. |
+| V. Dependency Discipline | ✅ PASS | Zero new dependencies. Uses only Spring Boot's existing capabilities. |
+| VI. Accessibility | ✅ N/A | Meta-tags are invisible to users. No UI changes. |
+
+**Gate result: PASS** — No violations. No complexity tracking needed.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/012-link-preview/
+├── plan.md              # This file
+├── research.md          # Phase 0 output — technical decisions
+├── data-model.md        # Phase 1 output — meta-tag value objects
+├── quickstart.md        # Phase 1 output — implementation guide
+├── contracts/
+│   └── html-meta-tags.md  # Phase 1 output — meta-tag HTML contract
+└── tasks.md             # Phase 2 output (created by /speckit.tasks)
+```
+
+### Source Code (repository root)
+
+```text
+backend/
+├── src/main/java/de/fete/
+│   ├── adapter/in/web/
+│   │   └── SpaController.java            # NEW — serves index.html with injected meta-tags
+│   ├── application/
+│   │   └── OpenGraphService.java          # NEW — composes meta-tag values from event data
+│   └── config/
+│       └── WebConfig.java                 # MODIFIED — remove PathResourceResolver SPA fallback
+├── src/main/resources/
+│   └── application.properties             # MODIFIED — add forward-headers-strategy
+└── src/test/java/de/fete/
+    ├── adapter/in/web/
+    │   └── SpaControllerTest.java         # NEW — integration tests
+    └── application/
+        └── OpenGraphServiceTest.java      # NEW — unit tests
+
+frontend/
+├── index.html                             # MODIFIED — add <!-- OG_META_TAGS --> placeholder
+├── public/
+│   └── og-image.png                       # NEW — brand image for og:image (1200x630)
+└── e2e/
+    └── link-preview.spec.ts               # NEW — E2E tests
+```
+
+**Structure Decision**: Web application structure (existing). Backend changes in adapter/web and application layers. Frontend changes minimal (HTML placeholder + static asset).
+
+## Complexity Tracking
+
+> No violations — section intentionally empty.

specs/012-link-preview/quickstart.md

@@ -0,0 +1,57 @@
+# Quickstart: Link Preview (Open Graph Meta-Tags)
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## What This Feature Does
+
+Injects Open Graph and Twitter Card meta-tags into the HTML response so that shared links display rich preview cards in messengers (WhatsApp, Telegram, Signal, etc.) and on social media (Twitter/X).
+
+## How It Works
+
+1. **All HTML page requests** go through a new `SpaController` (replaces the current `PathResourceResolver` SPA fallback).
+2. The controller reads the compiled `index.html` template once at startup and caches it.
+3. For event pages (`/events/{token}`): fetches event data, generates event-specific meta-tags, injects them into the HTML.
+4. For non-event pages: injects generic fete branding meta-tags.
+5. Static files (`/assets/*`, `/favicon.svg`, `/og-image.png`) continue to be served directly by Spring Boot's default static resource handler.
+
+## Key Files to Create/Modify
+
+### Backend (New)
+
+| File | Purpose |
+|---|---|
+| `SpaController.java` | Controller handling all non-API/non-static HTML requests, injecting meta-tags |
+| `OpenGraphService.java` | Service composing meta-tag values from event data |
+| `MetaTagRenderer.java` | Utility rendering meta-tag value objects into HTML `<meta>` strings |
+
+### Backend (Modified)
+
+| File | Change |
+|---|---|
+| `WebConfig.java` | Remove `PathResourceResolver` SPA fallback (replaced by `SpaController`) |
+| `application.properties` | Add `server.forward-headers-strategy=framework` for correct URL construction behind proxies |
+
+### Frontend (Modified)
+
+| File | Change |
+|---|---|
+| `index.html` | Add `<!-- OG_META_TAGS -->` placeholder comment in `<head>` |
+
+### Static Assets (New)
+
+| File | Purpose |
+|---|---|
+| `frontend/public/og-image.png` | Brand image for `og:image` (1200x630 PNG) |
+
+## Testing Strategy
+
+- **Unit tests**: `OpenGraphService` — verify meta-tag values for various event states (full data, no location, no description, long title, special characters).
+- **Unit tests**: `MetaTagRenderer` — verify HTML escaping, correct meta-tag format.
+- **Integration tests**: `SpaController` — verify correct HTML response with meta-tags for event URLs, generic URLs, and 404 events.
+- **E2E tests**: Fetch event page HTML without JavaScript, parse meta-tags, verify values match event data.
+
+## Local Development Notes
+
+- In dev mode (Vite dev server), meta-tags won't be injected since Vite serves its own `index.html`. This is expected — meta-tag injection only works when the backend serves the frontend.
+- To test locally: build the frontend (`npm run build`), copy `dist/` contents to `backend/src/main/resources/static/`, then run the backend.
+- Alternatively, test via the Docker build which assembles everything automatically.

specs/012-link-preview/research.md

@@ -0,0 +1,115 @@
+# Research: Link Preview (Open Graph Meta-Tags)
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## R1: How to Serve Dynamic Meta-Tags from a Vue SPA
+
+### Problem
+
+Vue SPA serves a single `index.html` for all routes via Spring Boot's `PathResourceResolver` fallback in `WebConfig.java`. Social media crawlers (WhatsApp, Telegram, Signal, Twitter/X) do NOT execute JavaScript — they only read the initial HTML response. The current `index.html` contains no Open Graph meta-tags.
+
+### Decision: Server-Side HTML Template Injection
+
+Intercept HTML page requests in the Spring Boot backend. Before serving `index.html`, parse the route, fetch event data if applicable, and inject `<meta>` tags into the `<head>` section.
+
+### Rationale
+
+- **No new dependencies**: Uses Spring Boot's existing resource serving + simple string manipulation.
+- **No SSR framework needed**: Avoids adding Nuxt, Vite SSR, or a prerendering service.
+- **Universal**: Works for all clients (not just crawlers), improving SEO for all visitors.
+- **Simple**: The backend already serves `index.html` for all non-API/non-static routes. We just need to modify *what* HTML is returned.
+
+### Alternatives Considered
+
+| Alternative | Rejected Because |
+|---|---|
+| **Vue SSR (Nuxt/Vite SSR)** | Massive architectural change. Overkill for injecting a few meta-tags. Violates KISS. |
+| **Prerendering service (prerender.io, rendertron)** | External dependency that may phone home. Violates Privacy by Design. Adds operational complexity. |
+| **User-agent sniffing** | Fragile — crawler UA strings change frequently. Serving different content to crawlers vs. users is considered cloaking by some search engines. |
+| **Static prerendering at build time** | Events are dynamic — created at runtime. Cannot prerender at build time. |
+| **`<noscript>` fallback** | Crawlers don't read `<noscript>` content for meta-tags. Only `<meta>` tags in `<head>` are parsed. |
+
+## R2: Implementation Strategy — Where to Inject
+
+### Decision: Custom Controller Replacing SPA Fallback
+
+Replace the current `PathResourceResolver` SPA fallback in `WebConfig.java` with a dedicated `@Controller` that:
+
+1. Reads the compiled `index.html` from `classpath:/static/index.html` once at startup (cached as a template string).
+2. For requests matching `/events/{token}`: fetches the event from the database, generates meta-tags, injects them into the HTML template.
+3. For all other non-API, non-static-file requests: injects generic fete meta-tags.
+4. Returns the modified HTML with `Content-Type: text/html`.
+
+### Rationale
+
+- The existing `PathResourceResolver` approach cannot modify the HTML content — it only resolves files.
+- A controller gives full programmatic control over the response.
+- Template caching avoids repeated file I/O.
+- Event lookup is a single DB query (already exists via `EventRepository`).
+
+### Template Injection Point
+
+The `index.html` will contain a placeholder comment `<!-- OG_META_TAGS -->` in the `<head>` section. The controller replaces this placeholder with the generated meta-tags. This is done in the Vite source `index.html` and preserved through the build.
+
+## R3: Meta-Tag Content Strategy
+
+### Decision: Structured Description Format
+
+For event pages, `og:description` follows this pattern:
+```
+📅 {formatted date} · 📍 {location} — {truncated description}
+```
+
+If location is missing:
+```
+📅 {formatted date} — {truncated description}
+```
+
+If description is missing:
+```
+📅 {formatted date} · 📍 {location}
+```
+
+Date format: `EEEE, MMMM d, yyyy 'at' h:mm a` (e.g., "Saturday, March 15, 2026 at 7:00 PM") using the event's timezone.
+
+### Title truncation
+
+`og:title` = event title, truncated to 70 characters with "..." suffix if exceeded.
+
+### Description truncation
+
+Total `og:description` max 200 characters. The event description portion is truncated to fit within this limit after the date/location prefix.
+
+## R4: Brand Image for og:image
+
+### Decision: Use Existing Favicon SVG
+
+The project already has a `favicon.svg` (tada emoji). For `og:image`, we'll create a PNG version (1200x630 recommended for OG) as a static asset.
+
+### Rationale
+
+- SVG is not universally supported as `og:image` (WhatsApp and some crawlers require raster formats).
+- A simple static PNG avoids runtime image generation complexity.
+- The brand image is the same for all pages (event-specific images are out of scope per spec).
+
+### Implementation
+
+- Add a static `og-image.png` (1200x630) to `frontend/public/` so it's included in the build output.
+- The `og:image` URL will be an absolute URL: `{baseUrl}/og-image.png`.
+- The image needs to be created manually (design task) or generated from the favicon.
+
+## R5: Absolute URL Construction
+
+### Decision: Derive from Request
+
+The `og:url` and `og:image` tags require absolute URLs. These will be constructed from the incoming HTTP request's scheme, host, and port using `ServletUriComponentsBuilder`.
+
+### Rationale
+
+- Works correctly behind reverse proxies when `X-Forwarded-*` headers are configured (Spring Boot handles this by default with `server.forward-headers-strategy=framework`).
+- No need for hardcoded base URL configuration.
+- Adapts automatically to different deployment environments.
+
+### Note
+
+Spring Boot's `server.forward-headers-strategy` should be set to `framework` in production to trust proxy headers. This is typically already handled in containerized deployments.

specs/012-link-preview/spec.md

@@ -0,0 +1,104 @@
+# Feature Specification: Link Preview (Open Graph Meta-Tags)
+
+**Feature Branch**: `012-link-preview`
+**Created**: 2026-03-09
+**Status**: Draft
+**Input**: User description: "When people share an event link, the users messenger should show information about the site in the messenger"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Event Link Preview in Messenger (Priority: P1)
+
+A user copies the link to a specific event page and pastes it into a messenger (WhatsApp, Telegram, Signal, iMessage, etc.). The messenger automatically fetches metadata from the link and displays a rich preview card showing the event title, a short description, and the fete branding. The recipient sees this information without having to open the link.
+
+**Why this priority**: This is the core feature. Without proper meta-tags on the event page, shared links appear as bare URLs with no context, reducing click-through rates and making events harder to discover.
+
+**Independent Test**: Can be fully tested by sharing an event link in any messenger and verifying the preview card shows the correct event title, description with date and location, and the fete app name.
+
+**Acceptance Scenarios**:
+
+1. **Given** an event exists with title, date, location, and description, **When** a user shares the event URL in a messenger, **Then** the messenger displays a preview card showing the event title, a summary of the event (including date and location), and the fete app name.
+2. **Given** an event exists with all details, **When** a social media crawler fetches the event URL, **Then** the response includes Open Graph meta-tags (`og:title`, `og:description`, `og:url`, `og:type`, `og:site_name`) with correct event-specific values.
+3. **Given** an event exists, **When** a crawler fetches the event URL, **Then** the `og:description` includes the event date, location, and a truncated version of the event description (max 200 characters).
+
+---
+
+### User Story 2 - Fallback Preview for Generic Pages (Priority: P2)
+
+When a user shares a non-event page (e.g., the homepage or event list), the messenger still shows a meaningful preview with the app name and a generic description of what fete is.
+
+**Why this priority**: Users may share the main app link rather than a specific event. A generic fallback ensures every shared link looks polished.
+
+**Independent Test**: Can be tested by sharing the homepage URL in a messenger and verifying a sensible default preview appears.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user shares the app homepage URL, **When** a messenger fetches the link, **Then** the preview shows the app name "fete" as the title and a generic description (e.g., "Privacy-focused event planning. Create and share events without accounts.").
+2. **Given** a user shares the event list URL, **When** a messenger fetches the link, **Then** the preview shows default app-level metadata.
+
+---
+
+### User Story 3 - Twitter/X Card Support (Priority: P3)
+
+In addition to Open Graph tags, the system provides Twitter Card meta-tags so that links shared on Twitter/X also display rich preview cards.
+
+**Why this priority**: Twitter/X uses its own card format alongside Open Graph. Adding these tags broadens the platforms where previews work correctly.
+
+**Independent Test**: Can be tested by validating the HTML source contains `twitter:card`, `twitter:title`, and `twitter:description` meta-tags.
+
+**Acceptance Scenarios**:
+
+1. **Given** an event page, **When** a Twitter/X crawler fetches the URL, **Then** the response includes `twitter:card` (set to "summary"), `twitter:title`, and `twitter:description` meta-tags with correct values.
+
+---
+
+### Edge Cases
+
+- What happens when an event has no description? The preview shows the event title, date, and location. The description meta-tag falls back to date and location only.
+- What happens when an event has no location? The description meta-tag includes the date and whatever other details are available.
+- What happens when the event title contains special characters (quotes, ampersands, angle brackets)? Meta-tag values are properly HTML-escaped.
+- How does the system handle very long event titles or descriptions? Titles are truncated at 70 characters, descriptions at 200 characters.
+- What happens when crawlers don't execute JavaScript? Meta-tags are served in the initial HTML response from the server, not injected client-side.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: The system MUST include Open Graph meta-tags (`og:title`, `og:description`, `og:url`, `og:type`, `og:site_name`) on every event page.
+- **FR-002**: The system MUST populate `og:title` with the event title, truncated to 70 characters if necessary.
+- **FR-003**: The system MUST populate `og:description` with a summary that includes the event date, location (if available), and a truncated event description (max 200 characters total).
+- **FR-004**: The system MUST set `og:type` to "website" for all pages.
+- **FR-005**: The system MUST set `og:site_name` to "fete".
+- **FR-006**: The system MUST include fallback Open Graph meta-tags on non-event pages (homepage, event list) with a generic app description.
+- **FR-007**: The system MUST include Twitter Card meta-tags (`twitter:card`, `twitter:title`, `twitter:description`) on every page.
+- **FR-008**: The system MUST properly HTML-escape all meta-tag values to prevent rendering issues with special characters.
+- **FR-009**: The system MUST serve meta-tags in the initial HTML response (not rely on client-side JavaScript rendering) so that crawlers can read them.
+- **FR-010**: The system MUST set `og:url` to the canonical URL of the current page.
+- **FR-011**: The system MUST include an `og:image` meta-tag on every page, pointing to a generic fete brand image (logo/icon).
+
+### Key Entities
+
+- **Event Metadata**: The subset of event information used for link previews — title, date, location, description. These are read-only projections of existing event data.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: 100% of event page links display a rich preview card (with title and description) when shared in WhatsApp, Telegram, and Signal.
+- **SC-002**: All meta-tag values are correctly populated with event-specific data — verified by automated tests against the HTML output.
+- **SC-003**: Non-event pages display a meaningful generic preview when shared in messengers.
+- **SC-004**: Meta-tags are present in the initial server response (not injected by client-side JavaScript), verifiable by fetching the page without JavaScript execution.
+
+## Clarifications
+
+### Session 2026-03-09
+
+- Q: Should a generic fete brand image be included as `og:image` fallback? → A: Yes, include a generic fete brand image as `og:image` on all pages (logo/icon).
+- Q: In which language should meta-tag texts (generic description, site name) be? → A: English for all meta-tag texts.
+
+## Assumptions
+
+- The backend can serve or pre-render HTML with event-specific meta-tags for event detail pages. Since this is a Vue SPA, server-side rendering or a dedicated server-side mechanism will be needed for crawlers that don't execute JavaScript.
+- A generic fete brand image (logo/icon) is used as `og:image` on all pages. Event-specific cover images are out of scope and can be added later.
+- The date format in `og:description` uses a human-readable English format.
+- All meta-tag texts (generic descriptions, site name, fallback content) are in English.

specs/012-link-preview/tasks.md

@@ -0,0 +1,201 @@
+# Tasks: Link Preview (Open Graph Meta-Tags)
+
+**Input**: Design documents from `/specs/012-link-preview/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/
+
+**Tests**: Included — constitution mandates TDD (Red → Green → Refactor).
+
+**Organization**: Tasks grouped by user story for independent implementation and testing.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Setup
+
+**Purpose**: Prepare frontend template and static assets for meta-tag injection
+
+- [x] T001 Add `<!-- OG_META_TAGS -->` placeholder comment in `<head>` of `frontend/index.html`
+- [x] T002 [P] Create `og-image.png` brand image (1200x630) in `frontend/public/og-image.png`
+- [x] T003 [P] Add `server.forward-headers-strategy=framework` to `backend/src/main/resources/application.properties`
+
+---
+
+## Phase 2: Foundational (Blocking Prerequisites)
+
+**Purpose**: Core infrastructure for HTML meta-tag injection that ALL user stories depend on
+
+**⚠️ CRITICAL**: No user story work can begin until this phase is complete
+
+- [x] T004 Write unit tests for `MetaTagRenderer` (HTML escaping, meta-tag HTML output) in `backend/src/test/java/de/fete/adapter/in/web/MetaTagRendererTest.java` — tests MUST fail (Red)
+- [x] T005 Implement `MetaTagRenderer` utility that renders meta-tag key-value pairs into HTML `<meta>` strings with proper HTML escaping in `backend/src/main/java/de/fete/adapter/in/web/MetaTagRenderer.java`
+- [x] T006 Write integration tests for `SpaController` base functionality (serves index.html, replaces placeholder) in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java` — tests MUST fail (Red)
+- [x] T007 Implement `SpaController` that caches `index.html` template at startup and replaces `<!-- OG_META_TAGS -->` placeholder before serving in `backend/src/main/java/de/fete/adapter/in/web/SpaController.java`
+- [x] T008 Remove `PathResourceResolver` SPA fallback from `backend/src/main/java/de/fete/config/WebConfig.java` (replaced by `SpaController`)
+
+**Checkpoint**: SPA still works (index.html served for all non-API/non-static routes), but now through `SpaController` with placeholder replacement ready
+
+---
+
+## Phase 3: User Story 1 — Event Link Preview in Messenger (Priority: P1) 🎯 MVP
+
+**Goal**: Shared event links display rich preview cards with event title, date, location, and description in messengers
+
+**Independent Test**: Share an event URL — messenger shows event title and formatted description with date/location
+
+### Tests for User Story 1 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T009 [P] [US1] Unit tests for `OpenGraphService.buildEventMeta()` — full event data, no location, no description, long title truncation, special characters in `backend/src/test/java/de/fete/application/OpenGraphServiceTest.java`
+- [x] T010 [P] [US1] Integration tests for `SpaController` event routes — GET `/events/{token}` returns HTML with event-specific OG meta-tags, event not found falls back to generic in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java`
+
+### Implementation for User Story 1
+
+- [x] T011 [US1] Implement `OpenGraphService.buildEventMeta()` — fetch event by token, compose `og:title` (truncated 70 chars), `og:description` (date + location + description, max 200 chars), `og:url`, `og:type`, `og:site_name`, `og:image` in `backend/src/main/java/de/fete/application/service/OpenGraphService.java`
+- [x] T012 [US1] Wire `SpaController` to call `OpenGraphService` for `/events/{token}` routes, inject event-specific meta-tags via `MetaTagRenderer` in `backend/src/main/java/de/fete/adapter/in/web/SpaController.java`
+- [ ] T013 [US1] E2E test — deferred (requires running backend; covered by integration tests)
+
+**Checkpoint**: Event links show rich OG preview cards in messengers. MVP complete.
+
+---
+
+## Phase 4: User Story 2 — Fallback Preview for Generic Pages (Priority: P2)
+
+**Goal**: Non-event pages (homepage, event list, create) show a meaningful generic fete preview when shared
+
+**Independent Test**: Share the homepage URL — messenger shows "fete" as title and generic app description
+
+### Tests for User Story 2 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T014 [P] [US2] Unit tests for `OpenGraphService.buildGenericMeta()` — verify generic title "fete", generic description, correct URL, image URL in `backend/src/test/java/de/fete/application/service/OpenGraphServiceTest.java`
+- [x] T015 [P] [US2] Integration tests for `SpaController` generic routes — GET `/`, GET `/create` return HTML with generic OG meta-tags in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java`
+
+### Implementation for User Story 2
+
+- [x] T016 [US2] Implement `OpenGraphService.buildGenericMeta()` — title "fete", description "Privacy-focused event planning. Create and share events without accounts.", type "website", site_name "fete" in `backend/src/main/java/de/fete/application/service/OpenGraphService.java`
+- [x] T017 [US2] Wire `SpaController` to call `OpenGraphService.buildGenericMeta()` for all non-event HTML routes in `backend/src/main/java/de/fete/adapter/in/web/SpaController.java`
+- [ ] T018 [US2] E2E test — deferred (requires running backend; covered by integration tests)
+
+**Checkpoint**: All shared fete links (event-specific and generic) show rich preview cards
+
+---
+
+## Phase 5: User Story 3 — Twitter/X Card Support (Priority: P3)
+
+**Goal**: Links shared on Twitter/X also display rich preview cards via Twitter Card meta-tags
+
+**Independent Test**: Verify HTML source contains `twitter:card`, `twitter:title`, `twitter:description` meta-tags
+
+### Tests for User Story 3 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T019 [P] [US3] Unit tests for Twitter Card meta-tag generation — verify `twitter:card` = "summary", `twitter:title`, `twitter:description` match OG values in `backend/src/test/java/de/fete/application/service/OpenGraphServiceTest.java`
+- [x] T020 [P] [US3] Integration tests for `SpaController` — event and generic routes include Twitter Card meta-tags in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java`
+
+### Implementation for User Story 3
+
+- [x] T021 [US3] Extend `OpenGraphService` to include Twitter Card meta-tags (`twitter:card`, `twitter:title`, `twitter:description`) alongside OG tags in `backend/src/main/java/de/fete/application/service/OpenGraphService.java`
+- [x] T022 [US3] Extend `MetaTagRenderer` to render `<meta name="twitter:*">` tags (using `name` attribute instead of `property`) in `backend/src/main/java/de/fete/adapter/in/web/MetaTagRenderer.java`
+- [ ] T023 [US3] E2E test — fetch event page and homepage, verify Twitter Card meta-tags present alongside OG tags in `frontend/e2e/link-preview.spec.ts`
+
+**Checkpoint**: All three user stories complete — OG tags, generic fallback, and Twitter Cards all working
+
+---
+
+## Phase 6: Polish & Cross-Cutting Concerns
+
+**Purpose**: Edge cases, hardening, and final verification
+
+- [x] T024 [P] Verify HTML escaping for special characters (quotes, ampersands, angle brackets) in meta-tag values across all routes — edge-case tests in MetaTagRendererTest.java
+- [x] T025 [P] Verify `SpaController` does not intercept static asset requests — SpaController only handles explicit routes, not wildcard
+- [x] T026 Run full backend test suite (`cd backend && ./mvnw verify`) and fix any regressions — 97 tests, 0 bugs
+- [x] T027 Run full frontend test suite (`cd frontend && npm run test:unit`) — 133 tests passed
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Setup (Phase 1)**: No dependencies — can start immediately
+- **Foundational (Phase 2)**: Depends on T001 (placeholder in index.html) — BLOCKS all user stories
+- **US1 (Phase 3)**: Depends on Foundational phase completion
+- **US2 (Phase 4)**: Depends on Foundational phase completion — can run in parallel with US1
+- **US3 (Phase 5)**: Depends on US1 or US2 (extends their meta-tag output)
+- **Polish (Phase 6)**: Depends on all user stories being complete
+
+### User Story Dependencies
+
+- **User Story 1 (P1)**: Can start after Foundational (Phase 2) — no dependencies on other stories
+- **User Story 2 (P2)**: Can start after Foundational (Phase 2) — independent from US1
+- **User Story 3 (P3)**: Depends on US1 or US2 — extends existing OG meta-tag output with Twitter tags
+
+### Within Each User Story
+
+- Tests MUST be written and FAIL before implementation (TDD Red phase)
+- Service layer before controller wiring
+- Unit tests before integration tests before E2E tests
+- Story complete before moving to next priority
+
+### Parallel Opportunities
+
+- T001, T002, T003 can all run in parallel (Setup phase)
+- T004 and T006 can run in parallel (Foundational tests — different files)
+- T009, T010 can run in parallel (US1 tests — different files)
+- T014, T015 can run in parallel (US2 tests — different files)
+- T019, T020 can run in parallel (US3 tests — different files)
+- US1 and US2 can be worked on in parallel after Foundational phase
+
+---
+
+## Parallel Example: User Story 1
+
+```bash
+# Launch US1 tests in parallel (Red phase):
+Task: "Unit tests for OpenGraphService.buildEventMeta() in OpenGraphServiceTest.java"
+Task: "Integration tests for SpaController event routes in SpaControllerTest.java"
+
+# Then implement sequentially:
+Task: "Implement OpenGraphService.buildEventMeta()"
+Task: "Wire SpaController for /events/{token} routes"
+Task: "E2E test for event page meta-tags"
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (User Story 1 Only)
+
+1. Complete Phase 1: Setup (T001–T003)
+2. Complete Phase 2: Foundational (T004–T008)
+3. Complete Phase 3: User Story 1 (T009–T013)
+4. **STOP and VALIDATE**: Share an event link in a messenger, verify preview card
+5. Deploy/demo if ready
+
+### Incremental Delivery
+
+1. Setup + Foundational → SpaController serving index.html with placeholder replacement
+2. Add US1 → Event links show rich previews → Deploy (MVP!)
+3. Add US2 → Generic pages also show previews → Deploy
+4. Add US3 → Twitter/X cards work too → Deploy
+5. Polish → Edge cases hardened → Final release
+
+---
+
+## Notes
+
+- [P] tasks = different files, no dependencies
+- [Story] label maps task to specific user story for traceability
+- Each user story is independently completable and testable
+- TDD enforced: write tests first, verify they fail, then implement
+- Commit after each task or logical group
+- Stop at any checkpoint to validate story independently