/* ============================================================ COLOR CONFIGURATION — SHUCHI RUCHI Multicusine Family Restaurant Theme: Warm Ivory / Cream dominant · Deep Royal Maroon & Golden Saffron accents Designed and Code written by Pusala Arun Kumar ✦ THIS is the ONLY file you change per restaurant. ✦ Load this BEFORE restaurant-core.css in your HTML. ============================================================ */ :root { /* ──────────────────────────────────── TYPOGRAPHY ──────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-label: 'DM Sans', system-ui, sans-serif; /* ──────────────────────────────────── LAYOUT TOKENS ──────────────────────────────────── */ --nav-h: 76px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* ──────────────────────────────────── SHADOWS (rich maroon depth & warm saffron glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(48, 12, 14, 0.06); --shadow-sm: 0 3px 14px rgba(48, 12, 14, 0.08); --shadow-md: 0 8px 32px rgba(48, 12, 14, 0.10); --shadow-lg: 0 20px 60px rgba(48, 12, 14, 0.14); --shadow-accent: 0 6px 24px rgba(122, 16, 18, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── ROYAL MAROON / DEEP CRIMSON (used for CTAs, ribbon, primary brand anchors) ─── */ --brand-maroon: #7A1012; /* ← signature rich maroon extracted from banner backdrop */ --brand-maroon-mid: #91181B; /* ← slightly brighter garnet tone for hover states */ --brand-maroon-light: #A82528; /* ← lighter berry highlight */ --brand-maroon-pale: #FAF0F1; /* ← barely-there blush tint */ --brand-maroon-mist: #FCF7F7; /* ← whisper pink-cream tint */ --brand-maroon-dark: #520A0B; /* ← deepest wine maroon (footer & CTA dark section) */ /* ── GOLDEN SAFFRON / AMBER (used for secondary accents, icons, labels, badges) ─── */ --brand-saffron: #E5A218; /* ← warm golden saffron extracted from "SHUCHI RUCHI" */ --brand-saffron-mid: #F3B32C; /* ← brighter radiant saffron highlight */ --brand-saffron-pale: #FDF7EB; /* ← faint warm saffron/cream tint */ --brand-saffron-deep: #BA800D; /* ← deeper amber tone for borders & legible text */ --brand-saffron-dark: #855606; /* ← deepest roasted honey amber */ /* ── WARM IVORY / SOFT CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF7F2; /* ← main page background, warm ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F4EFE6; /* ← alternating section background */ --brand-beige-deep: #E9E1D3; /* ← deeper warm stone section background */ --brand-beige-border: #DDD2C1; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (ivory / warm cream dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F2; /* warm ivory — alternating sections */ --color-bg-cream: #F4EFE6; /* deeper warm cream */ /* ──────────────────────────────────── TEXT (deep roasted wine-charcoal — not cold black) ──────────────────────────────────── */ --color-text-ink: #230E0F; /* deep dark wine-brown headings */ --color-text-body: #3D2426; /* warm dark espresso-maroon body */ --color-text-muted: #795F61; /* mid warm muted taupe */ --color-text-faint: #AC9A9C; /* faint muted label tone */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF7F2; --color-text-on-dark-muted: rgba(250, 247, 242, 0.70); --color-text-on-dark-faint: rgba(250, 247, 242, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Golden Saffron = section labels, icons, underlines (appetizing glow) Royal Maroon = CTA buttons, ribbon, badges (punchy & regal) ──────────────────────────────────── */ --color-accent: var(--brand-saffron-deep); /* nav underline, section labels */ --color-accent-deep: var(--brand-saffron-dark); /* hover darken */ --color-accent-dark: var(--brand-maroon-dark); /* deep maroon on light bg (badges)*/ /* Saffron Gold gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #BA800D, #E5A218); --color-accent-gradient-soft: linear-gradient(135deg, #FDF7EB, #F3B32C); --color-accent-gradient-rich: linear-gradient(135deg, #855606, #BA800D, #E5A218); /* Maroon gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #520A0B, #7A1012); --color-green-gradient-rich: linear-gradient(160deg, #380506, #520A0B, #7A1012); /* Brand signature — royal maroon to golden saffron */ --color-brand-gradient: linear-gradient(135deg, #7A1012, #E5A218); /* ──────────────────────────────────── BORDERS (warm beige with maroon & gold accents) ──────────────────────────────────── */ --color-border-light: rgba(122, 16, 18, 0.08); /* default card borders */ --color-border: rgba(122, 16, 18, 0.18); /* stronger border */ --color-border-strong: rgba(122, 16, 18, 0.35); --color-border-accent: rgba(229, 162, 24, 0.38); /* saffron gold border */ --color-border-cream: rgba(122, 16, 18, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 242, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (soft, warm & rich) ──────────────────────────────────── */ --color-hero-glow-1: rgba(122, 16, 18, 0.06); /* subtle maroon depth */ --color-hero-glow-2: rgba(229, 162, 24, 0.06); /* soft saffron glow */ --color-grid-line: rgba(122, 16, 18, 0.04); /* warm subtle grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F4EFE6; /* warm ivory badge background */ --color-badge-green: var(--brand-saffron-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(122, 16, 18, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Royal Maroon (#7A1012) Promise → Deep Wine Charcoal (#380506) CTA → Deep Garnet Maroon (#520A0B) Footer → Espresso Dark Maroon (#230E0F) ──────────────────────────────────── */ --color-ink: #380506; /* deep wine charcoal — promise section */ --color-on-ink: #FAF7F2; /* warm ivory text on dark */ --color-ink-mid: #520A0B; /* mid maroon dark surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(122, 16, 18, 0.16); /* faint maroon depth on dark */ --color-ink-glow-2: rgba(229, 162, 24, 0.12); /* faint amber warmth on dark */ /* ──────────────────────────────────── RIBBON (royal maroon) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 242, 0.14); --color-ribbon-text: #FAF7F2; /* ──────────────────────────────────── FOOTER (deep wine espresso dark) ──────────────────────────────────── */ --color-footer-bg: #230E0F; /* rich dark wine espresso — calm & regal */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Royal Maroon (#7A1012). Typography yellow is refined into Golden Saffron (#E5A218) for highlights. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → royal maroon */ .btn-nav-order { background: var(--brand-maroon) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #520A0B, #7A1012) !important; } /* Ribbon → royal maroon */ .ribbon { background: var(--brand-maroon) !important; color: #FFFFFF !important; border-top-color: rgba(250, 247, 242, 0.14) !important; border-bottom-color: rgba(250, 247, 242, 0.14) !important; } /* CTA section → deep garnet maroon */ .cta-section { background: var(--brand-maroon-dark) !important; } /* Promise section → deep wine charcoal (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory white / cream ✓ */