Zeeshan Khan
56fe68eb48
- Royal cream + gold theme - Playful animated hero with chef mascot - Advanced menu with sidebar + video hover - Multilingual support (EN, SV, HI, UR) - Cart system with WhatsApp ordering - Real restaurant photos integration - Responsive design with proper navbar
108 lines
2.2 KiB
CSS
108 lines
2.2 KiB
CSS
/**
|
|
* =============================================================================
|
|
* GLOBAL DESIGN SYSTEM — Shahi Kitchen
|
|
* =============================================================================
|
|
*
|
|
* Royal cream + gold visual identity for Shahi Kitchen.
|
|
* Bright, warm, appetizing, and luxurious without being dark.
|
|
*/
|
|
|
|
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* === Refined Royal Light Palette - Warm Cream + Gold === */
|
|
|
|
/* Backgrounds */
|
|
--bg: #F8F5F0;
|
|
--bg-elevated: #F5F1E9;
|
|
--surface: #FFFFFF;
|
|
--surface-subtle: #F2EDE4;
|
|
|
|
/* Gold System */
|
|
--gold: #B38B4D;
|
|
--gold-dark: #8C6B3A;
|
|
--gold-light: #C9A46B;
|
|
--gold-muted: #d4a73d;
|
|
|
|
/* Emerald for contrast (kept from recent improvements) */
|
|
--emerald: #0f5a4a;
|
|
|
|
/* Text */
|
|
--text: #2C2520;
|
|
--text-muted: #6B665F;
|
|
--text-light: #8A8478;
|
|
|
|
/* Borders */
|
|
--border: #EDE6D9;
|
|
|
|
/* Typography */
|
|
--font-display: var(--font-playfair);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
|
|
/* Motion */
|
|
--ease: cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
|
|
/* Base */
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Premium Buttons */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--gold), var(--gold-muted));
|
|
color: #241806;
|
|
font-weight: 700;
|
|
transition: all 0.2s var(--ease);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline {
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold-dark);
|
|
background: transparent;
|
|
font-weight: 600;
|
|
transition: all 0.2s var(--ease);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--gold);
|
|
color: #241806;
|
|
}
|
|
|
|
/* Glass effect helper */
|
|
.glass {
|
|
background: rgba(255, 253, 248, 0.72);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
/* Luxury card style */
|
|
.luxury-card {
|
|
border-radius: 2rem;
|
|
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
|
|
}
|
|
|
|
.luxury-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.12);
|
|
}
|
|
|
|
/* Mesmerizing shimmer animation for premium buttons (used in Navbar) */
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(200%); }
|
|
}
|