Redesign: richer visual language inspired by Magic UI
- Body: radial gradient orbs (teal + green) + dot grid overlay + grain - Header: dark mesh gradient, shimmer logo animation, animated gradient tagline, frosted glass lang-switcher pill - CategorySection: glow-ring emoji badge, gradient top line, frosted glass card container, teal/gold decorative divider - MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight, price pill with green gradient border - BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg - Page: welcome strip with teal gradient border, hero fade from header Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mstfyldz
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
718e0a6228
commit
bc8bd747ff
+154
-43
@@ -6,12 +6,15 @@
|
||||
--beige-dark: #D4C8B0;
|
||||
--teal: #4AAFA8;
|
||||
--teal-dark: #3D9A94;
|
||||
--teal-glow: rgba(74, 175, 168, 0.35);
|
||||
--green: #5C8A5C;
|
||||
--coffee: #3D2B1F;
|
||||
--coffee-dark: #1F140A;
|
||||
--coffee-light: #5A3D2D;
|
||||
--gold: #C8A850;
|
||||
--muted: #8A7265;
|
||||
--header-h: 64px;
|
||||
--tabbar-h: 68px;
|
||||
--header-h: 68px;
|
||||
--tabbar-h: 72px;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -22,7 +25,9 @@
|
||||
--color-teal-dark: var(--teal-dark);
|
||||
--color-green: var(--green);
|
||||
--color-coffee: var(--coffee);
|
||||
--color-coffee-dark: var(--coffee-dark);
|
||||
--color-coffee-light: var(--coffee-light);
|
||||
--color-gold: var(--gold);
|
||||
--color-muted: var(--muted);
|
||||
--font-display: var(--font-playfair);
|
||||
--font-body: var(--font-inter);
|
||||
@@ -32,69 +37,175 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Grain texture overlay */
|
||||
/* ─── Page background ─────────────────────────────── */
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(74,175,168,0.10) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(92,138,92,0.09) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 50% 40% at 80% 30%, rgba(200,168,80,0.05) 0%, transparent 50%),
|
||||
#F5F0E8;
|
||||
}
|
||||
|
||||
/* Dot grid overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image: radial-gradient(circle, rgba(61,43,31,0.10) 1px, transparent 1px);
|
||||
background-size: 22px 22px;
|
||||
}
|
||||
|
||||
/* Grain overlay on top of everything */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
opacity: 0.028;
|
||||
z-index: 9999;
|
||||
opacity: 0.022;
|
||||
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);
|
||||
/* ─── Animations ──────────────────────────────────── */
|
||||
|
||||
/* Logo shimmer — travels across text */
|
||||
@keyframes text-shimmer {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
|
||||
/* Menu item fade-up animation */
|
||||
/* Header accent line pulse */
|
||||
@keyframes border-flow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* Category emoji orbit ring */
|
||||
@keyframes spin-slow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Item fade-up on mount */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* WhatsApp pulse */
|
||||
@keyframes wa-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.50); }
|
||||
70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
|
||||
}
|
||||
|
||||
/* Section reveal */
|
||||
@keyframes section-reveal {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ─── Logo shimmer class ──────────────────────────── */
|
||||
.logo-shimmer {
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
#F5F0E8 0%,
|
||||
#F5F0E8 35%,
|
||||
#4AAFA8 45%,
|
||||
#C8A850 52%,
|
||||
#4AAFA8 59%,
|
||||
#F5F0E8 65%,
|
||||
#F5F0E8 100%
|
||||
);
|
||||
background-size: 250% auto;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: text-shimmer 5s linear infinite;
|
||||
}
|
||||
|
||||
/* Header gradient line */
|
||||
.header-line {
|
||||
background: linear-gradient(90deg, #4AAFA8, #C8A850, #5C8A5C, #4AAFA8);
|
||||
background-size: 300% 100%;
|
||||
animation: border-flow 4s ease infinite;
|
||||
}
|
||||
|
||||
/* ─── Category section ────────────────────────────── */
|
||||
.category-section {
|
||||
scroll-margin-top: calc(var(--header-h) + 10px);
|
||||
}
|
||||
|
||||
.category-reveal {
|
||||
animation: section-reveal 0.5s ease both;
|
||||
}
|
||||
|
||||
/* ─── Menu item ───────────────────────────────────── */
|
||||
.menu-item-row {
|
||||
animation: fadeUp 0.35s ease both;
|
||||
animation-delay: calc(var(--item-index, 0) * 55ms);
|
||||
animation: fadeUp 0.38s ease both;
|
||||
animation-delay: calc(var(--item-index, 0) * 60ms);
|
||||
}
|
||||
|
||||
/* Tab bar active indicator */
|
||||
.tab-active-dot {
|
||||
/* Magic card gradient spotlight — CSS-only hover version */
|
||||
.menu-item-row {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-item-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(74,175,168,0.07) 0%, transparent 60%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.menu-item-row:hover::before { opacity: 1; }
|
||||
|
||||
/* ─── Bottom tab bar ──────────────────────────────── */
|
||||
.tabbar-glass {
|
||||
background: rgba(31, 20, 10, 0.88);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-top: 1px solid rgba(74, 175, 168, 0.18);
|
||||
}
|
||||
|
||||
/* Active tab pill */
|
||||
.tab-pill {
|
||||
background: linear-gradient(135deg, rgba(74,175,168,0.22), rgba(92,138,92,0.15));
|
||||
border: 1px solid rgba(74,175,168,0.30);
|
||||
border-radius: 8px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
/* ─── WhatsApp button ─────────────────────────────── */
|
||||
.wa-btn { animation: wa-pulse 2.8s ease-out infinite; }
|
||||
|
||||
/* ─── Section heading ornament ────────────────────── */
|
||||
.section-ornament {
|
||||
display: inline-block;
|
||||
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;
|
||||
/* ─── Price pill ──────────────────────────────────── */
|
||||
.price-pill {
|
||||
background: linear-gradient(135deg, rgba(92,138,92,0.15), rgba(92,138,92,0.08));
|
||||
border: 1px solid rgba(92,138,92,0.25);
|
||||
color: var(--green);
|
||||
border-radius: 20px;
|
||||
padding: 2px 10px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user