recipes: Swissmilk-inspired hero redesign with parallax and card refresh

- Full-bleed hero image with CSS parallax (scaleY technique matching TitleImgParallax)
- Hero picks random seasonal recipe with hashed image on each visit
- Left-aligned title, subheading, and featured recipe link over the hero
- Category chips with ellipsis collapse on small screens (<600px)
- Search bar anchored to hero/grid boundary regardless of chip count
- CompactCard redesign: 3/2 aspect ratio, rounded corners, subtle hover zoom
- Search component margin adjusted to sit flush at hero boundary

src/lib/components/recipes/CompactCard.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import "$lib/css/shake.css";
+
+	let {
+		recipe,
+		current_month = 0,
+		isFavorite = false,
+		showFavoriteIndicator = false,
+		loading_strat = "lazy",
+		routePrefix = '/rezepte'
+	} = $props();
+
+	const img_name = $derived(
+		recipe.images?.[0]?.mediapath ||
+		`${recipe.germanShortName || recipe.short_name}.webp`
+	);
+
+	const img_alt = $derived(
+		recipe.images?.[0]?.alt || recipe.name
+	);
+
+	const isInSeason = $derived(recipe.season?.includes(current_month));
+</script>
+<style>
+.compact-card {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--radius-card);
+	overflow: hidden;
+	background: var(--color-surface);
+	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+	cursor: pointer;
+}
+.compact-card:hover,
+.compact-card:focus-within {
+	transform: translateY(-5px);
+	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+}
+.compact-card:hover .img-wrap img {
+	transform: scale(1.05);
+}
+.compact-card:hover .icon,
+.compact-card:focus-within .icon {
+	animation: shake 0.6s;
+}
+.card-link {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+}
+.img-wrap {
+	aspect-ratio: 3 / 2;
+	overflow: hidden;
+}
+.img-wrap img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: transform 0.4s ease;
+}
+.info {
+	position: relative;
+	padding: 0.8em 0.9em 0.7em;
+	flex: 1;
+}
+.name {
+	font-size: 0.95rem;
+	font-weight: 600;
+	line-height: 1.3;
+	margin: 0;
+}
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3em;
+	margin-top: 0.5em;
+	position: relative;
+	z-index: 2;
+}
+.tag {
+	font-size: 0.7rem;
+	padding: 0.15em 0.6em;
+}
+.icon {
+	position: absolute;
+	top: -0.75em;
+	right: 0.6em;
+	width: 2em;
+	height: 2em;
+	font-size: 1rem;
+	background-color: var(--color-primary);
+	color: white;
+	z-index: 3;
+}
+.favorite {
+	position: absolute;
+	top: 0.5em;
+	left: 0.5em;
+	font-size: 1.1rem;
+	filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
+	z-index: 2;
+	pointer-events: none;
+}
+</style>
+
+<div class="compact-card">
+	<a href="{routePrefix}/{recipe.short_name}" class="card-link" aria-label={recipe.name}></a>
+	{#if showFavoriteIndicator && isFavorite}
+		<span class="favorite">❤️</span>
+	{/if}
+	<div class="img-wrap">
+		<img
+			src="https://bocken.org/static/rezepte/thumb/{img_name}"
+			alt={img_alt}
+			loading={loading_strat}
+		/>
+	</div>
+	<div class="info">
+		{#if isInSeason}
+			<span class="icon g-icon-badge">{recipe.icon}</span>
+		{/if}
+		<p class="name">{@html recipe.name}</p>
+		{#if recipe.tags?.length}
+			<div class="tags">
+				{#each recipe.tags as tag (tag)}
+					<a href="{routePrefix}/tag/{tag}" class="tag g-tag">{tag}</a>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

src/lib/components/recipes/Search.svelte

@@ -319,15 +319,15 @@ input::placeholder{
 }
 
 .search {
-  width: 500px;
+  width: 560px;
-  max-width: 85vw;
+  max-width: 88vw;
   position: relative;
-  margin: 2.5rem auto 1.2rem;
+  margin: 0 auto;
   font-size: 1.6rem;
   display: flex;
   align-items: center;
   transition: var(--transition-fast);
-  filter: drop-shadow(0.4em  0.5em 0.4em rgba(0,0,0,0.4))
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
 }
 
 .search:hover,

src/routes/[recipeLang=recipeLang]/+page.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-    	import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
+	import AddButton from '$lib/components/AddButton.svelte';
-    	import AddButton from '$lib/components/AddButton.svelte';
+	import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-    	import Card from '$lib/components/recipes/Card.svelte';
+	import Search from '$lib/components/recipes/Search.svelte';
-    	import Search from '$lib/components/recipes/Search.svelte';
-	import LazyCategory from '$lib/components/LazyCategory.svelte';
 	import { getCategories } from '$lib/js/categories';
-    	let { data } = $props<{ data: PageData }>();
+
-    	let current_month = new Date().getMonth() + 1;
+	let { data } = $props<{ data: PageData }>();
+	let current_month = new Date().getMonth() + 1;
 
 	// Search state
 	let matchedRecipeIds = $state(new Set());
 	let matchedCategories = $state(new Set());
 	let hasActiveSearch = $state(false);
 
-	// Handle search results from Search component
 	function handleSearchResults(ids, categories) {
 		matchedRecipeIds = ids;
 		matchedCategories = categories || new Set();
@@ -24,50 +22,102 @@
 	const isEnglish = $derived(data.lang === 'en');
 	const categories = $derived(getCategories(data.lang));
 
-	// Pre-compute category-to-recipes Map for O(1) lookups
+	// Pick a seasonal hero recipe (changes daily) — only recipes with hashed images
+	// Only recipes with hashed images (e.g. myrecipe.a1b2c3d4.webp)
+	const hasHashedImage = (r) => r.images?.length > 0 && /\.\w+\.\w+$/.test(r.images[0].mediapath);
+
+	// Pick once on mount — not reactive, so image and link always match
+	const heroIndex = Math.random();
+	const heroRecipe = $derived.by(() => {
+		const seasonPool = data.season.filter(hasHashedImage);
+		const pool = seasonPool.length > 0 ? seasonPool : data.all_brief.filter(hasHashedImage);
+		if (pool.length === 0) return null;
+		return pool[Math.floor(heroIndex * pool.length)];
+	});
+	const heroImg = $derived(
+		heroRecipe ? heroRecipe.images[0].mediapath : ''
+	);
+
+	// Category chip state: 'all', 'season', or a category name
+	let activeChip = $state('all');
+	let chipsExpanded = $state(false);
+
+	// Incremental rendering
+	const BATCH_SIZE = 24;
+	let visibleCount = $state(BATCH_SIZE);
+	let sentinel = $state<HTMLElement | null>(null);
+
+	// Reset visible count when chip or search changes
+	$effect(() => {
+		// Track dependencies
+		activeChip;
+		hasActiveSearch;
+		matchedRecipeIds;
+		visibleCount = BATCH_SIZE;
+	});
+
+	// IntersectionObserver for infinite scroll
+	$effect(() => {
+		if (!sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0].isIntersecting) {
+				visibleCount += BATCH_SIZE;
+			}
+		}, { rootMargin: '200px' });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	});
+
+	// Pre-compute category-to-recipes Map
 	const recipesByCategory = $derived.by(() => {
-		const map = new Map();
+		const map = new Map<string, typeof data.all_brief>();
 		for (const recipe of data.all_brief) {
 			if (!map.has(recipe.category)) {
 				map.set(recipe.category, []);
 			}
-			map.get(recipe.category).push(recipe);
+			map.get(recipe.category)!.push(recipe);
 		}
 		return map;
 	});
 
-	// Memoized filtered recipes by category
+	// Category counts (unfiltered, for chip badges)
-	const filteredRecipesByCategory = $derived.by(() => {
+	const categoryCounts = $derived.by(() => {
-		if (!hasActiveSearch) {
+		const counts = new Map<string, number>();
-			// No search active - return all recipes by category
+		for (const [cat, recipes] of recipesByCategory) {
-			return recipesByCategory;
+			counts.set(cat, recipes.length);
 		}
-
+		return counts;
-		// Filter each category's recipes based on search results
-		const filtered = new Map();
-		for (const [category, recipes] of recipesByCategory) {
-			const matchedInCategory = recipes.filter(r => matchedRecipeIds.has(r._id));
-			if (matchedInCategory.length > 0) {
-				filtered.set(category, matchedInCategory);
-			}
-		}
-		return filtered;
 	});
 
-	// Memoized season recipes
+	// Filtered recipes for the active view
-	const seasonRecipes = $derived.by(() => {
+	const displayRecipes = $derived.by(() => {
-		const recipes = data.season;
+		let pool: typeof data.all_brief;
-		if (!hasActiveSearch) {
+
-			return recipes;
+		if (activeChip === 'all') {
+			pool = data.all_brief;
+		} else if (activeChip === 'season') {
+			pool = data.season;
+		} else {
+			pool = recipesByCategory.get(activeChip) || [];
 		}
-		return recipes.filter(recipe => matchedRecipeIds.has(recipe._id));
+
+		if (hasActiveSearch) {
+			pool = pool.filter(r => matchedRecipeIds.has(r._id));
+		}
+
+		return pool;
 	});
 
+	// Sliced for incremental rendering
+	const visibleRecipes = $derived(displayRecipes.slice(0, visibleCount));
+	const hasMore = $derived(visibleCount < displayRecipes.length);
+
 	const labels = $derived({
 		title: isEnglish ? 'Recipes' : 'Rezepte',
 		subheading: isEnglish
 			? `${data.all_brief.length} recipes and constantly growing...`
 			: `${data.all_brief.length} Rezepte und stetig wachsend...`,
+		all: isEnglish ? 'All' : 'Alle',
 		inSeason: isEnglish ? 'In Season' : 'In Saison',
 		metaTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte',
 		metaDescription: isEnglish
@@ -77,17 +127,232 @@
 	});
 </script>
 <style>
-h1{
+/* ─── Hero parallax (same scaleY technique as TitleImgParallax) ─── */
-	text-align: center;
+.hero-section {
-	margin-bottom: 0;
+	--parallax-scale: 0.3;
-	font-size: 4rem;
+	margin-bottom: -20vh;
+	transform-origin: center top;
+	transform: translateY(-1rem) scaleY(calc(1 - var(--parallax-scale)));
 }
-.subheading{
+@media (prefers-reduced-motion) {
-	text-align: center;
+	.hero-section {
-	margin-top: 0;
+		--parallax-scale: 0;
-	font-size: 1.5rem;
+		margin-bottom: 0;
+	}
+}
+.hero-section > * {
+	transform-origin: center top;
+	transform: scaleY(calc(1 / (1 - var(--parallax-scale))));
+}
+
+/* Sticky image — stays at top while content scrolls over it */
+.hero {
+	position: sticky;
+	top: 0;
+	height: min(60vh, 520px);
+	overflow: hidden;
+	max-width: 1200px;
+	margin: 0 auto;
+	z-index: -1;
+}
+.hero-img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: 50% 30%;
+}
+.hero-overlay {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		to bottom,
+		rgba(0,0,0,0.1) 0%,
+		rgba(0,0,0,0.55) 100%
+	);
+}
+
+/* ─── Scrollable content that moves over the sticky hero ─── */
+.hero-scroll-content {
+	position: relative;
+	margin: -20vh auto 0;
+	transition: margin-top 0.25s ease;
+}
+.hero-scroll-content.chips-open {
+	margin-top: -25vh;
+}
+
+/* Title area: overlaps the lower portion of the hero */
+.hero-text {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2em 3.5em;
+	color: white;
+	position: relative;
+}
+.hero-text h1 {
+	margin: 0;
+	font-size: clamp(2.4rem, 6vw, 3.8rem);
+	line-height: 1.05;
+	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
+}
+.hero-text .subheading {
+	margin: 0.3em 0 0;
+	font-size: clamp(1rem, 2.5vw, 1.3rem);
+	opacity: 0.9;
+	text-shadow: 0 1px 6px rgba(0,0,0,0.4);
+}
+
+/* Featured recipe link — inline below subheading */
+.hero-featured,
+.hero-featured:visited,
+.hero-featured:link {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4em;
+	margin-top: 0.5em;
+	font-size: 0.95rem;
+	color: white;
+	text-decoration: none;
+	opacity: 0.85;
+	transition: var(--transition-normal);
+}
+.hero-featured:hover {
+	opacity: 1;
+}
+.hero-featured .icon {
+	font-family: "Noto Color Emoji", emoji, sans-serif;
+}
+.hero-featured .recipe-name {
+	font-weight: 600;
+}
+.hero-featured .arrow-icon {
+	width: 0.7em;
+	height: 0.7em;
+	fill: currentColor;
+}
+
+/* ─── Category chip bar ─── */
+.chip-wrap {
+	display: flex;
+	gap: 0.5em;
+	align-items: flex-start;
+	margin: 0.8em 0 0;
+}
+.chip-bar {
+	display: flex;
+	gap: 0.5em;
+	padding: 0.5em 0;
+	flex-wrap: wrap;
+	flex: 1;
+	min-width: 0;
+}
+/* On small screens, collapse to single row */
+@media (max-width: 600px) {
+	.chip-bar:not(.expanded) {
+		max-height: 2.4em;
+		overflow: hidden;
+	}
+}
+.chip {
+	white-space: nowrap;
+	padding: 0.35em 0.9em;
+	font-size: 0.85rem;
+	font-weight: 500;
+	background: rgba(255,255,255,0.85);
+	color: var(--nord0);
+	flex-shrink: 0;
+}
+.chip:hover {
+	background: white;
+	transform: scale(1.04);
+}
+.chip.active {
+	background: var(--color-primary);
+	color: white;
+}
+.chip.season {
+	background: var(--color-secondary);
+	color: white;
+}
+.chip .count {
+	font-size: 0.8em;
+	opacity: 0.7;
+	margin-left: 0.25em;
+}
+/* Ellipsis button — outside chip-bar overflow, always visible */
+.chip-more {
+	background: rgba(255,255,255,0.5);
+	font-weight: 700;
+	letter-spacing: 0.1em;
+	flex-shrink: 0;
+	margin-top: 0.5em;
+}
+@media (min-width: 601px) {
+	.chip-more {
+		display: none;
+	}
+}
+
+/* ─── Content below the hero (grid, etc.) ─── */
+.below-hero {
+	background: var(--color-bg-primary);
+	padding-top: 2.5em;
+	overflow: visible;
+}
+
+/* ─── Search bar — anchored to top of below-hero, straddles the boundary ─── */
+.hero-search-wrap {
+	max-width: 1200px;
+	margin: -4em auto 0;
+	padding: 0 2em;
+	position: relative;
+	z-index: 10;
+}
+
+/* ─── Recipe grid ─── */
+.recipe-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 1.5em;
+	padding: 0 1.5em;
+	max-width: 1400px;
+	margin: 0 auto 2em;
+}
+@media (min-width: 600px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	}
+}
+@media (min-width: 1024px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		gap: 1.8em;
+	}
+}
+
+.sentinel {
+	height: 1px;
+}
+
+/* ─── No-hero fallback ─── */
+.hero-fallback {
+	text-align: left;
+	padding: 3em 2em 1em;
+	max-width: 1200px;
+	margin: 0 auto;
+}
+.hero-fallback h1 {
+	margin: 0;
+	font-size: clamp(2.4rem, 6vw, 3.8rem);
+	line-height: 1.05;
+}
+.hero-fallback .subheading {
+	margin: 0.3em 0 0;
+	font-size: clamp(1rem, 2.5vw, 1.3rem);
+	opacity: 0.7;
 }
 </style>
+
 <svelte:head>
 	<title>{labels.metaTitle}</title>
 	<meta name="description" content="{labels.metaDescription}" />
@@ -97,42 +362,127 @@ h1{
 	<meta property="og:image:alt" content="{labels.metaAlt}" />
 </svelte:head>
 
-<h1>{labels.title}</h1>
+{#if heroRecipe}
-<p class=subheading>{labels.subheading}</p>
+	<section class="hero-section">
+		<figure class="hero">
+			<img
+				class="hero-img"
+				src="https://bocken.org/static/rezepte/full/{heroImg}"
+				alt=""
+				loading="eager"
+			/>
+			<div class="hero-overlay"></div>
+		</figure>
 
-<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+		<div class="hero-scroll-content" class:chips-open={chipsExpanded}>
+			<div class="hero-text">
+				<h1>{labels.title}</h1>
+				<p class="subheading">{labels.subheading}</p>
+				<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured">
+					<span class="icon">{heroRecipe.icon}</span>
+					<span class="recipe-name">{@html heroRecipe.name}</span>
+					<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
+				</a>
 
-{#if seasonRecipes.length > 0}
+				<div class="chip-wrap">
-	<LazyCategory title={labels.inSeason} eager={true}>
+					<div class="chip-bar" class:expanded={chipsExpanded}>
-		{#snippet children()}
+						<button
-			<MediaScroller title={labels.inSeason}>
+							class="chip g-pill"
-			{#each seasonRecipes as recipe}
+							class:active={activeChip === 'all'}
-				<Card {recipe} {current_month} loading_strat={"eager"} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+							onclick={() => activeChip = 'all'}
-			{/each}
+						>
-			</MediaScroller>
+							{labels.all}
-		{/snippet}
+							<span class="count">({data.all_brief.length})</span>
-	</LazyCategory>
+						</button>
-{/if}
 
-{#each categories as category, index}
+						{#if data.season.length > 0}
-	{@const categoryRecipes = filteredRecipesByCategory.get(category) || []}
+							<button
-	{#if categoryRecipes.length > 0}
+								class="chip g-pill"
-		<LazyCategory
+								class:season={activeChip === 'season'}
-			title={category}
+								class:active={activeChip === 'season'}
-			eager={index < 2 || hasActiveSearch}
+								onclick={() => activeChip = 'season'}
-			estimatedHeight={300}
+							>
-			rootMargin="600px"
+								{labels.inSeason}
-		>
+								<span class="count">({data.season.length})</span>
-			{#snippet children()}
+							</button>
-				<MediaScroller title={category}>
+						{/if}
-				{#each categoryRecipes as recipe}
+
-					<Card {recipe} {current_month} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+						{#each categories as cat (cat)}
-				{/each}
+							{@const count = categoryCounts.get(cat) || 0}
-				</MediaScroller>
+							{#if count > 0}
-			{/snippet}
+								<button
-		</LazyCategory>
+									class="chip g-pill"
+									class:active={activeChip === cat}
+									onclick={() => activeChip = cat}
+								>
+									{cat}
+									<span class="count">({count})</span>
+								</button>
+							{/if}
+						{/each}
+					</div>
+					<button
+						class="chip chip-more g-pill"
+						onclick={() => chipsExpanded = !chipsExpanded}
+					>
+						{chipsExpanded ? '\u2715' : '\u2026'}
+					</button>
+				</div>
+
+			</div>
+
+			<div class="below-hero">
+				<div class="hero-search-wrap">
+					<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+				</div>
+				<div class="recipe-grid">
+					{#each visibleRecipes as recipe, i (recipe._id)}
+						<CompactCard
+							{recipe}
+							{current_month}
+							isFavorite={recipe.isFavorite}
+							showFavoriteIndicator={!!data.session?.user}
+							loading_strat={i < 12 ? "eager" : "lazy"}
+							routePrefix="/{data.recipeLang}"
+						/>
+					{/each}
+				</div>
+
+				{#if hasMore}
+					<div class="sentinel" bind:this={sentinel}></div>
+				{/if}
+
+				{#if !isEnglish}
+					<AddButton href="/rezepte/add"></AddButton>
+				{/if}
+			</div>
+		</div>
+	</section>
+{:else}
+	<div class="hero-fallback">
+		<h1>{labels.title}</h1>
+		<p class="subheading">{labels.subheading}</p>
+	</div>
+	<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+
+	<div class="recipe-grid">
+		{#each visibleRecipes as recipe, i (recipe._id)}
+			<CompactCard
+				{recipe}
+				{current_month}
+				isFavorite={recipe.isFavorite}
+				showFavoriteIndicator={!!data.session?.user}
+				loading_strat={i < 12 ? "eager" : "lazy"}
+				routePrefix="/{data.recipeLang}"
+			/>
+		{/each}
+	</div>
+
+	{#if hasMore}
+		<div class="sentinel" bind:this={sentinel}></div>
+	{/if}
+
+	{#if !isEnglish}
+		<AddButton href="/rezepte/add"></AddButton>
 	{/if}
-{/each}
-{#if !isEnglish}
-	<AddButton href="/rezepte/add"></AddButton>
 {/if}