root
483 lines
11 KiB
CSS
483 lines
11 KiB
CSS
/**
|
|
* =============================================================================
|
|
* GLOBAL DESIGN SYSTEM — Shahi Kitchen
|
|
* =============================================================================
|
|
*
|
|
* Shahi cream + gold visual identity for Shahi Kitchen.
|
|
* Bright, warm, appetizing, and luxurious without being dark.
|
|
*/
|
|
|
|
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* === Refined Shahi 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 */
|
|
--emerald: #0f5a4a;
|
|
--emerald-deep: #0a4a3d;
|
|
|
|
/* 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);
|
|
--font-arabic: var(--font-arabic);
|
|
|
|
/* Motion */
|
|
--ease: cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
|
/* Layout — language banner (48px) + navbar (68px) */
|
|
--header-height: 116px;
|
|
--page-top-gap: 1rem;
|
|
}
|
|
|
|
/* Anchor links (/#menu, /#experience) land below the fixed header */
|
|
.scroll-mt-header {
|
|
scroll-margin-top: var(--header-height);
|
|
}
|
|
|
|
/* Base */
|
|
body,
|
|
.shahi-body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
background-image:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(201, 154, 46, 0.08), transparent),
|
|
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(15, 90, 74, 0.04), transparent);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* RTL typography */
|
|
html[dir="rtl"] body {
|
|
font-family: var(--font-arabic), var(--font-sans);
|
|
}
|
|
|
|
html[dir="rtl"] h1,
|
|
html[dir="rtl"] h2,
|
|
html[dir="rtl"] h3,
|
|
html[dir="rtl"] h4 {
|
|
font-family: var(--font-arabic), var(--font-display);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/* Signature dish cards */
|
|
.signature-card {
|
|
box-shadow: 0 4px 24px -4px rgb(16 23 36 / 0.06);
|
|
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
|
|
}
|
|
|
|
.signature-card:hover {
|
|
box-shadow: 0 20px 40px -12px rgb(179 139 77 / 0.18);
|
|
border-color: rgba(201, 154, 46, 0.45);
|
|
}
|
|
|
|
/* Section ornament */
|
|
.section-ornament {
|
|
position: relative;
|
|
}
|
|
|
|
.section-ornament::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Hero overlay text */
|
|
.hero-glass {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 253, 248, 0.92) 0%,
|
|
rgba(255, 250, 240, 0.88) 50%,
|
|
rgba(248, 245, 240, 0.85) 100%
|
|
);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(201, 154, 46, 0.2);
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(16, 23, 36, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* =============================================================================
|
|
* FOOTER — Matches header cream + gold palette
|
|
* ============================================================================= */
|
|
.shahi-footer {
|
|
background: linear-gradient(
|
|
180deg,
|
|
#fffcf7 0%,
|
|
#fbf7ef 55%,
|
|
#f5f0e6 100%
|
|
);
|
|
color: #101724;
|
|
border-top: 1px solid rgba(201, 154, 46, 0.25);
|
|
box-shadow: 0 -4px 24px -4px rgba(16, 23, 36, 0.06);
|
|
}
|
|
|
|
.footer-top-rail {
|
|
height: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
#8a6a25 15%,
|
|
#c99a2e 35%,
|
|
#f4d47f 50%,
|
|
#c99a2e 65%,
|
|
#8a6a25 85%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.footer-main {
|
|
position: relative;
|
|
}
|
|
|
|
.footer-glow {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(80px);
|
|
}
|
|
|
|
.footer-glow--gold {
|
|
top: -40px;
|
|
right: 10%;
|
|
width: 280px;
|
|
height: 280px;
|
|
background: rgba(201, 154, 46, 0.08);
|
|
}
|
|
|
|
.footer-glow--emerald {
|
|
bottom: 0;
|
|
left: -5%;
|
|
width: 320px;
|
|
height: 320px;
|
|
background: rgba(15, 90, 74, 0.05);
|
|
}
|
|
|
|
.footer-heading-line {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #c99a2e, #f4d47f);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.footer-info-card {
|
|
border-radius: 1rem;
|
|
border: 1px solid rgba(201, 154, 46, 0.22);
|
|
background: rgba(255, 255, 255, 0.72);
|
|
padding: 1rem 1.125rem;
|
|
backdrop-filter: blur(8px);
|
|
transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
|
|
}
|
|
|
|
.footer-info-card:hover {
|
|
border-color: rgba(201, 154, 46, 0.45);
|
|
background: #ffffff;
|
|
box-shadow: 0 4px 16px -6px rgba(16, 23, 36, 0.08);
|
|
}
|
|
|
|
.footer-link {
|
|
color: #3d4654;
|
|
transition: color 0.2s var(--ease), transform 0.2s var(--ease);
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: #0f5a4a;
|
|
}
|
|
|
|
html[dir="rtl"] .footer-link:hover {
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
html[dir="ltr"] .footer-link:hover {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.footer-social-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
border-radius: 0.875rem;
|
|
border: 1px solid rgba(201, 154, 46, 0.35);
|
|
background: rgba(255, 255, 255, 0.85);
|
|
color: #8a6a25;
|
|
transition: all 0.25s var(--ease);
|
|
}
|
|
|
|
.footer-social-btn:hover {
|
|
background: linear-gradient(135deg, #c99a2e, #e8c56a);
|
|
color: #241806;
|
|
border-color: #c99a2e;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px -4px rgba(201, 154, 46, 0.35);
|
|
}
|
|
|
|
.footer-logo-ring {
|
|
border-color: rgba(201, 154, 46, 0.35);
|
|
background: #ffffff;
|
|
box-shadow: 0 4px 20px -6px rgba(16, 23, 36, 0.1);
|
|
}
|
|
|
|
.footer-bottom {
|
|
background: rgba(255, 255, 255, 0.55);
|
|
border-top: 1px solid rgba(201, 154, 46, 0.2);
|
|
}
|
|
|
|
.footer-cta {
|
|
backdrop-filter: blur(12px);
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.92) 0%,
|
|
rgba(255, 252, 247, 0.88) 100%
|
|
);
|
|
border-color: rgba(201, 154, 46, 0.35);
|
|
}
|
|
|
|
/* Language banner subtle shine */
|
|
.lang-banner {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lang-banner::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.06) 50%,
|
|
transparent 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Mesmerizing shimmer animation for premium buttons (used in Navbar) */
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(200%); }
|
|
}
|
|
|
|
/* Continuous menu reel marquee for 43" displays - items move LEFT (enter from right, exit left), seamless loop with 2x duplication */
|
|
@keyframes menu-reel {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
.menu-reel-track {
|
|
will-change: transform;
|
|
animation: menu-reel linear infinite;
|
|
/* Force GPU layer for stable poster/video during transform */
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Homepage signature menu — dishes scroll left to right */
|
|
@keyframes signature-menu-reel-ltr {
|
|
0% { transform: translateX(-50%); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.signature-menu-reel-track {
|
|
will-change: transform;
|
|
animation: signature-menu-reel-ltr linear infinite;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.signature-menu-reel:hover .signature-menu-reel-track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.signature-menu-reel-track {
|
|
animation: none;
|
|
flex-wrap: wrap;
|
|
width: 100% !important;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
* KIOSK / FULLSCREEN DISPLAY PAGES (screen1 & screen2)
|
|
* Professional clean TV/window look: no scrollbars ever, even in browser
|
|
* fullscreen (F11) or kiosk mode. User zooms browser (in/out) to adjust
|
|
* visible reel density instead of scrolling. Content sized to fit 100vh.
|
|
* ============================================================================= */
|
|
html.screen-kiosk,
|
|
body.screen-kiosk {
|
|
overflow: hidden !important;
|
|
overscroll-behavior: none;
|
|
/* Hide scrollbars cross-browser */
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
html.screen-kiosk::-webkit-scrollbar,
|
|
body.screen-kiosk::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari/Opera */
|
|
}
|
|
|
|
.screen-root {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Extra insurance: hide any descendant scrollbars */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.screen-root::-webkit-scrollbar,
|
|
.screen-root *::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Subtle polish for pure display (no accidental text selection or pointer) */
|
|
.screen-root {
|
|
cursor: default;
|
|
}
|
|
|
|
/* =============================================================================
|
|
* VERTICAL REEL for screen3 order columns
|
|
* Orders move UP (from below to above) in a loop, like screen2 horizontal but vertical.
|
|
* Cards have fixed px height; viewport h-full of available column space (after header) =>
|
|
* fills entire screen height with no white space (max top to bottom).
|
|
* Zoom in browser: fewer items visible per column (larger cards relative).
|
|
* Zoom out: more items visible per column (smaller cards relative).
|
|
* When > visible count, the track loops seamlessly (duplicated list + 50% translateY).
|
|
* ============================================================================= */
|
|
@keyframes order-reel-up {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-50%); }
|
|
}
|
|
|
|
.order-reel-track {
|
|
display: flex;
|
|
flex-direction: column;
|
|
will-change: transform;
|
|
animation: order-reel-up linear infinite;
|
|
/* Force GPU layer for stable animation */
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.reel-viewport {
|
|
overflow: hidden;
|
|
/* Height 100% of available (flex h-full after section header) to fill screen.
|
|
Fixed card heights + zoom changes visible count dynamically. */
|
|
}
|
|
|
|
/* Menu page — smooth category filter scrolling */
|
|
.menu-category-scroll {
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.menu-category-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.menu-category-scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #d4c9b8 transparent;
|
|
}
|
|
|
|
.menu-category-scroll::-webkit-scrollbar {
|
|
display: block;
|
|
width: 5px;
|
|
}
|
|
|
|
.menu-category-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.menu-category-scroll::-webkit-scrollbar-thumb {
|
|
background: #d4c9b8;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.menu-category-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: #c99a2e;
|
|
}
|
|
}
|