Build Kozmos QR menu site — full implementation

Next.js 16 App Router, TR/EN i18n via [lang] routing and proxy.ts,
Tailwind v4, minimal list menu style, sticky bottom tab bar with
Intersection Observer, PWA manifest, WhatsApp fixed button.

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

app/globals.css

@@ -1,26 +1,100 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --cream: #F5F0E8;
+  --beige: #E8DCC8;
+  --beige-dark: #D4C8B0;
+  --teal: #4AAFA8;
+  --teal-dark: #3D9A94;
+  --green: #5C8A5C;
+  --coffee: #3D2B1F;
+  --coffee-light: #5A3D2D;
+  --muted: #8A7265;
+  --header-h: 64px;
+  --tabbar-h: 68px;
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-cream: var(--cream);
+  --color-beige: var(--beige);
+  --color-beige-dark: var(--beige-dark);
+  --color-teal: var(--teal);
+  --color-teal-dark: var(--teal-dark);
+  --color-green: var(--green);
+  --color-coffee: var(--coffee);
+  --color-coffee-light: var(--coffee-light);
+  --color-muted: var(--muted);
+  --font-display: var(--font-playfair);
+  --font-body: var(--font-inter);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+html {
+  scroll-behavior: smooth;
+}
+
+/* Grain texture overlay */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9998;
+  opacity: 0.028;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 256px 256px;
+}
+
+/* Category scroll offset for sticky header */
+.category-section {
+  scroll-margin-top: calc(var(--header-h) + 12px);
+}
+
+/* Menu item fade-up animation */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.menu-item-row {
+  animation: fadeUp 0.35s ease both;
+  animation-delay: calc(var(--item-index, 0) * 55ms);
+}
+
+/* Tab bar active indicator */
+.tab-active-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--teal);
+  margin: 0 auto;
+  transition: opacity 0.2s ease;
+}
+
+/* Smooth tab color transition */
+.tab-item {
+  transition: color 0.2s ease;
+}
+
+/* WhatsApp pulse ring */
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
+  }
+  70% {
+    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
+  }
+}
+
+.wa-btn {
+  animation: pulse-ring 2.5s ease-out infinite;
 }