mstfyldzandClaude Sonnet 4.6
718e0a6228
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>
101 lines
2.1 KiB
CSS
101 lines
2.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--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-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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|