/* ============================================================ COLOR CONFIGURATION — East & West Kitchen (Where Taste Meets Heart) Theme: Warm Ivory / Cream dominant · Roasted Coffee Umber & Radiant Golden Yellow 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 (warm espresso depth & golden amber glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(45, 25, 15, 0.06); --shadow-sm: 0 3px 14px rgba(45, 25, 15, 0.08); --shadow-md: 0 8px 32px rgba(45, 25, 15, 0.12); --shadow-lg: 0 20px 60px rgba(45, 25, 15, 0.16); --shadow-accent: 0 6px 24px rgba(235, 168, 28, 0.22); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── RADIANT GOLDEN YELLOW (used for CTAs, hero badges, ribbon banner highlights) ─── */ --brand-gold: #EBA81C; /* ← signature golden ribbon yellow from "KITCHEN" ribbon */ --brand-gold-mid: #F7BA31; /* ← brighter radiant sun highlight */ --brand-gold-light: #FED568; /* ← soft golden hover tint */ --brand-gold-pale: #FDF8EC; /* ← barely-there warm champagne tint */ --brand-gold-mist: #FFFCF6; /* ← whisper shimmer tint */ --brand-gold-dark: #B87A0B; /* ← deep roasted amber (CTA dark / strong contrast) */ /* ── ROASTED COFFEE UMBER / CHOCOLATE (headers, footers, dark sections & emblem badge) ─── */ --brand-brown: #421A0F; /* ← rich dark umber brown extracted from circular outer frame */ --brand-brown-mid: #5A2718; /* ← mid-tone roasted chestnut */ --brand-brown-pale: #F7F1EE; /* ← faint warm mocha tint */ --brand-brown-deep: #2C0F08; /* ← deepest espresso base (footer/dark section) */ --brand-brown-dark: #1F0A05; /* ← near-black roasted cacao tone */ /* ── FRESH HERB GREEN (sub-accent from coriander leaf) ─── */ --brand-herb: #3C8850; /* ← organic leafy green accent from the logo */ /* ── WARM IVORY / BUTTER CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF8F3; /* ← main page background, clean warm ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3ECE0; /* ← alternating section background */ --brand-beige-deep: #E8DDCF; /* ← deeper warm sand section background */ --brand-beige-border: #DBCFBD; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (warm ivory / soft cream dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF8F3; /* warm ivory — alternating sections */ --color-bg-cream: #F3ECE0; /* deeper warm cream */ /* ──────────────────────────────────── TEXT (deep espresso brown — rich & legible) ──────────────────────────────────── */ --color-text-ink: #2C0F08; /* deep dark roasted espresso headings */ --color-text-body: #45271E; /* dark warm umber body text */ --color-text-muted: #785E55; /* mid warm cocoa muted */ --color-text-faint: #AC9790; /* faint warm taupe for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF8F3; --color-text-on-dark-muted: rgba(250, 248, 243, 0.70); --color-text-on-dark-faint: rgba(250, 248, 243, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Coffee Umber = section labels, icons, underlines (grounded heritage frame) Golden Yellow = CTA buttons, ribbon, badges (punchy, energetic highlight) ──────────────────────────────────── */ --color-accent: var(--brand-brown); /* nav underline, section labels */ --color-accent-deep: var(--brand-brown-deep); /* hover darken */ --color-accent-dark: var(--brand-gold-dark); /* deep gold on light bg (badges) */ /* Umber gradient — thin lines, underlines, subtle dark section fills */ --color-accent-gradient: linear-gradient(135deg, #2C0F08, #421A0F); --color-accent-gradient-soft: linear-gradient(135deg, #F7F1EE, #5A2718); --color-accent-gradient-rich: linear-gradient(135deg, #1F0A05, #2C0F08, #421A0F); /* Golden Yellow gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #B87A0B, #EBA81C); --color-green-gradient-rich: linear-gradient(160deg, #8E5B05, #B87A0B, #EBA81C); /* Brand signature — golden yellow to roasted umber */ --color-brand-gradient: linear-gradient(135deg, #EBA81C, #421A0F); /* ──────────────────────────────────── BORDERS (warm beige with golden ochre accents) ──────────────────────────────────── */ --color-border-light: rgba(66, 26, 15, 0.08); /* default card borders */ --color-border: rgba(66, 26, 15, 0.18); /* stronger border */ --color-border-strong: rgba(66, 26, 15, 0.35); --color-border-accent: rgba(235, 168, 28, 0.42); /* golden yellow border */ --color-border-cream: rgba(66, 26, 15, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 248, 243, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS ──────────────────────────────────── */ --color-hero-glow-1: rgba(235, 168, 28, 0.09); /* faint golden radiance */ --color-hero-glow-2: rgba(66, 26, 15, 0.05); /* faint coffee depth */ --color-grid-line: rgba(66, 26, 15, 0.04); /* subtle warm grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F3ECE0; /* warm ivory badge background */ --color-badge-green: var(--brand-gold-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(235, 168, 28, 0.35); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Radiant Golden Yellow (#EBA81C) Promise → Roasted Coffee Umber (#421A0F) CTA → Deep Roasted Amber (#B87A0B) Footer → Deepest Espresso Base (#2C0F08) ──────────────────────────────────── */ --color-ink: #421A0F; /* roasted umber — promise section */ --color-on-ink: #FAF8F3; /* warm ivory text on dark */ --color-ink-mid: #5A2718; /* mid chestnut surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(235, 168, 28, 0.16); /* golden radiance on dark */ --color-ink-glow-2: rgba(66, 26, 15, 0.28); /* deep umber shadow */ /* ──────────────────────────────────── RIBBON (golden yellow) ──────────────────────────────────── */ --color-ribbon-border: rgba(66, 26, 15, 0.15); --color-ribbon-text: #2C0F08; /* ──────────────────────────────────── FOOTER (deepest espresso umber) ──────────────────────────────────── */ --color-footer-bg: #2C0F08; /* deep espresso dark — solid & grounded */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Golden Yellow (#EBA81C). Promise & Footer take Roasted Coffee Umber (#421A0F / #2C0F08). ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → golden yellow with dark espresso text */ .btn-nav-order { background: var(--brand-gold) !important; color: #2C0F08 !important; } .btn-nav-order::before { background: linear-gradient(135deg, #B87A0B, #EBA81C) !important; } /* Ribbon → golden ribbon yellow */ .ribbon { background: var(--brand-gold) !important; color: #2C0F08 !important; border-top-color: rgba(66, 26, 15, 0.15) !important; border-bottom-color: rgba(66, 26, 15, 0.15) !important; } /* CTA section → deep roasted amber/gold */ .cta-section { background: var(--brand-gold-dark) !important; } /* Promise section → roasted coffee umber (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory / cream ✓ */