From 6a81b305bce41c6d3b63c48df0190fce3c20cd52 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Sun, 13 Sep 2026 20:31:43 +0200
Subject: [PATCH] Give each backdrop icon a distinct light color

Cycle a small warm palette (terracotta, golden-brown, golden-yellow)
across the icons via a CSS custom property instead of one flat tint.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/ordering/MenuBackdrop.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ordering/MenuBackdrop.tsx b/src/components/ordering/MenuBackdrop.tsx
index 5670449..379a83f 100644
--- a/src/components/ordering/MenuBackdrop.tsx
+++ b/src/components/ordering/MenuBackdrop.tsx
@@ -46,6 +46,7 @@ const FriesIcon = () => (
 )
 
 const ICONS = [PizzaIcon, BurgerIcon, FriesIcon]
+const ICON_COLORS = ['#e2725b', '#d9a441', '#e8c468']
 
 // Fixed, hand-placed positions rather than random ones — random values would
 // differ between the server-rendered and first client-rendered HTML and
@@ -66,6 +67,7 @@ export const MenuBackdrop = () => (
   <div className={styles.backdrop} aria-hidden="true">
     {PLACEMENTS.map((placement, index) => {
       const Icon = ICONS[index % ICONS.length]
+      const color = ICON_COLORS[index % ICON_COLORS.length]
       return (
         <span
           key={index}
@@ -78,6 +80,7 @@ export const MenuBackdrop = () => (
               height: placement.size,
               animationDelay: `${placement.delay}s`,
               '--icon-rotate': `${placement.rotate}deg`,
+              color,
             } as CSSProperties
           }
         >