From 7e1d752061f18f2174f494075eeb90060ba90089 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Fri, 17 Apr 2026 17:00:42 +0500
Subject: [PATCH] feat(ui): improve hero atmosphere and card hover states

Book detail: stronger blurred cover bg (opacity 0.35 + saturate), larger
cover (sm:w-56), more dramatic gradient, bigger title (sm:text-4xl).
Homepage hero: atmospheric blurred cover bg matching current carousel book.
Catalogue: cards now lift on hover with brand border + shadow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/routes/+page.svelte              | 14 ++++++++++++--
 ui/src/routes/books/[slug]/+page.svelte | 15 ++++++++-------
 ui/src/routes/catalogue/+page.svelte    |  4 ++--
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 63876e0..2d566a4 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -151,9 +151,19 @@
 			ontouchstart={onSwipeStart}
 			ontouchend={onSwipeEnd}
 		>
+			<!-- Atmospheric blurred cover background (z-0, content is z-[1]) -->
+			{#if heroBook.book.cover}
+				{#key heroIndex}
+					<div
+						class="absolute inset-0 bg-cover bg-center scale-110 animate-fade-in pointer-events-none z-0"
+						style="background-image: url('{heroBook.book.cover}'); filter: blur(40px) saturate(1.3); opacity: 0.18;"
+						aria-hidden="true"
+					></div>
+				{/key}
+			{/if}
 			<!-- Cover — drives card height via aspect-[2/3] -->
 			<a href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
-				class="w-32 sm:w-44 shrink-0 self-stretch overflow-hidden block">
+				class="w-32 sm:w-44 shrink-0 self-stretch overflow-hidden block relative z-[1]">
 				{#if heroBook.book.cover}
 					{#key heroIndex}
 						<img src={heroBook.book.cover} alt={heroBook.book.title}
@@ -169,7 +179,7 @@
 			</a>
 
 			<!-- Info — fixed height matching cover, overflow hidden so text never expands the card -->
-			<div class="flex flex-col justify-between p-5 sm:p-7 min-w-0 flex-1 overflow-hidden
+			<div class="relative z-[1] flex flex-col justify-between p-5 sm:p-7 min-w-0 flex-1 overflow-hidden
 				h-[calc(128px*3/2)] sm:h-[calc(176px*3/2)]">
 				<div class="min-h-0 overflow-hidden">
 					<p class="text-xs font-semibold text-(--color-brand) uppercase tracking-widest mb-2">{m.home_continue_reading()}</p>
diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte
index 151108e..e62ad0b 100644
--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -757,25 +757,26 @@
 
 <!-- ═══════════════════════════════════════════════════════════════ Hero ══ -->
 <div class="relative rounded-xl overflow-hidden mb-8">
-	<!-- Blurred cover background -->
+	<!-- Blurred cover background — atmospheric, Spotify-style -->
 	{#if book.cover}
 		<div
 			class="absolute inset-0 bg-cover bg-center scale-110"
-			style="background-image: url('{book.cover}'); filter: blur(24px); opacity: 0.18;"
+			style="background-image: url('{book.cover}'); filter: blur(32px) saturate(1.4); opacity: 0.35;"
 			aria-hidden="true"
 		></div>
 	{/if}
-	<div class="absolute inset-0 bg-gradient-to-b from-(--color-surface)/60 to-(--color-surface)/95 pointer-events-none" aria-hidden="true"></div>
+	<!-- Gradient: lighter at top so atmosphere bleeds through, heavy at bottom for legibility -->
+	<div class="absolute inset-0 bg-gradient-to-b from-(--color-surface)/20 via-(--color-surface)/60 to-(--color-surface)/92 pointer-events-none" aria-hidden="true"></div>
 
-	<div class="relative flex flex-col p-5 sm:p-7 gap-4">
+	<div class="relative flex flex-col p-6 sm:p-8 gap-4">
 		<!-- Cover + meta row -->
-		<div class="flex gap-5 sm:gap-8">
+		<div class="flex gap-6 sm:gap-10">
 			<!-- Cover image -->
 			{#if book.cover}
 				<img
 					src={book.cover}
 					alt={book.title}
-					class="w-28 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-(--color-border) shadow-xl self-start"
+					class="w-32 sm:w-56 aspect-[2/3] rounded-xl object-cover flex-shrink-0 border border-white/10 shadow-2xl self-start ring-1 ring-black/20"
 				/>
 			{/if}
 
@@ -783,7 +784,7 @@
 			<div class="flex flex-col gap-3 min-w-0 flex-1">
 				<!-- Title + "not in library" badge -->
 				<div class="flex items-start gap-2 flex-wrap">
-					<h1 class="text-xl sm:text-3xl font-bold text-(--color-text) leading-tight">{book.title}</h1>
+					<h1 class="text-2xl sm:text-4xl font-bold text-(--color-text) leading-tight tracking-tight">{book.title}</h1>
 					{#if !data.inLib}
 						<span
 							class="mt-1 text-xs px-2 py-0.5 rounded-full bg-(--color-surface-3) text-(--color-muted) border border-(--color-border) shrink-0"
diff --git a/ui/src/routes/catalogue/+page.svelte b/ui/src/routes/catalogue/+page.svelte
index b1a8a41..ec6be4e 100644
--- a/ui/src/routes/catalogue/+page.svelte
+++ b/ui/src/routes/catalogue/+page.svelte
@@ -531,8 +531,8 @@
 			<a
 				href="/books/{novel.slug}"
 				onclick={() => handleNovelClick(novel.slug)}
-				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-colors relative
-					{isLoading ? 'border-(--color-brand)/60' : 'border-(--color-border) hover:border-zinc-500'}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-all relative
+					{isLoading ? 'border-(--color-brand)/60' : 'border-(--color-border) hover:border-(--color-brand)/50 hover:bg-(--color-surface-3) hover:shadow-lg hover:shadow-black/20 hover:-translate-y-0.5'}"
 			>
 				<!-- Cover -->
 				<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden relative">