/* ============================================================ COLOR CONFIGURATION — Shree Katyayani Kitchen · Alkapur Theme: Warm Parchment / Cream dominant · Forest Green & Rustic Earth 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 (soft, warm-earth & green tint) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(43, 29, 18, 0.06); --shadow-sm: 0 3px 14px rgba(43, 29, 18, 0.08); --shadow-md: 0 8px 32px rgba(43, 29, 18, 0.10); --shadow-lg: 0 20px 60px rgba(43, 29, 18, 0.12); --shadow-accent: 0 6px 24px rgba(28, 75, 39, 0.16); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── BOTANICAL FOREST GREEN (used for CTAs, hero badges, ribbon, primary accents) ─── */ --brand-green: #1C4B27; /* ← deep signature herbal green from "Katyayani" */ --brand-green-mid: #256234; /* ← slightly brighter green highlight */ --brand-green-light: #3D7C4D; /* ← lighter tint hover */ --brand-green-pale: #EEF5F0; /* ← barely-there sage tint */ --brand-green-mist: #F6FAF7; /* ← whisper tint */ --brand-green-dark: #12331A; /* ← deepest forest green (footer/CTA dark) */ /* ── RUSTIC EARTH / WOOD BROWN (used for etched accents, labels, icons, borders) ─── */ --brand-earth: #4A2E19; /* ← rich rustic brown from "KITCHEN" & artwork */ --brand-earth-mid: #5C3B22; /* ← warm roasted wood tone */ --brand-earth-pale: #F7F2EB; /* ← faint warm earth tint */ --brand-earth-deep: #331E0F; /* ← deep espresso for hover states */ --brand-earth-dark: #24150A; /* ← deepest roasted earth */ /* ── WARM PARCHMENT / CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF6EC; /* ← main page background, warm heritage cream */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F2EAD8; /* ← alternating section background */ --brand-beige-deep: #E6DBC5; /* ← deeper vintage parchment bg */ --brand-beige-border: #D8CCA8; /* ← warm earthy borders */ /* ──────────────────────────────────── BACKGROUNDS (cream / parchment dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF6EC; /* warm heritage cream — alt sections */ --color-bg-cream: #F2EAD8; /* deeper parchment tone */ /* ──────────────────────────────────── TEXT (warm rustic dark — not cold black) ──────────────────────────────────── */ --color-text-ink: #24150A; /* deep roasted brown headings */ --color-text-body: #3D2B1E; /* warm dark earth body text */ --color-text-muted: #735F4E; /* mid warm-earth muted */ --color-text-faint: #A69483; /* faint earth for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF6EC; --color-text-on-dark-muted: rgba(250, 246, 236, 0.70); --color-text-on-dark-faint: rgba(250, 246, 236, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Rustic Earth = section labels, icons, subtle lines (grounded heritage) Forest Green = CTA buttons, ribbon, badges (punchy & fresh) ──────────────────────────────────── */ --color-accent: var(--brand-earth); /* nav underline, section labels */ --color-accent-deep: var(--brand-earth-deep); /* hover darken */ --color-accent-dark: var(--brand-green-dark); /* deep green on light badges */ /* Rustic earth gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #331E0F, #4A2E19); --color-accent-gradient-soft: linear-gradient(135deg, #F7F2EB, #5C3B22); --color-accent-gradient-rich: linear-gradient(135deg, #24150A, #331E0F, #4A2E19); /* Forest green gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #12331A, #1C4B27); --color-green-gradient-rich: linear-gradient(160deg, #0C2211, #12331A, #1C4B27); /* Brand signature — forest green to rustic wood brown */ --color-brand-gradient: linear-gradient(135deg, #1C4B27, #4A2E19); /* ──────────────────────────────────── BORDERS (warm parchment dominant with green accents) ──────────────────────────────────── */ --color-border-light: rgba(74, 46, 25, 0.10); /* default card borders */ --color-border: rgba(74, 46, 25, 0.22); /* stronger border */ --color-border-strong: rgba(74, 46, 25, 0.40); --color-border-accent: rgba(28, 75, 39, 0.30); /* forest green border */ --color-border-cream: rgba(74, 46, 25, 0.08); /* On dark sections */ --color-border-on-dark: rgba(250, 246, 236, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (soft warmth) ──────────────────────────────────── */ --color-hero-glow-1: rgba(28, 75, 39, 0.07); /* faint green freshness */ --color-hero-glow-2: rgba(74, 46, 25, 0.05); /* faint earth warmth */ --color-grid-line: rgba(74, 46, 25, 0.05); /* warm beige grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F2EAD8; /* parchment badge background */ --color-badge-green: var(--brand-green-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(28, 75, 39, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Forest Green (#1C4B27) Promise → Deep Roasted Earth (#24150A) CTA → Deep Forest Green (#12331A) Footer → Espresso Dark Charcoal (#1B1007) ──────────────────────────────────── */ --color-ink: #24150A; /* deep rustic dark — promise section */ --color-on-ink: #FAF6EC; /* warm parchment text on dark */ --color-ink-mid: #331E0F; /* mid warm dark */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(28, 75, 39, 0.12); /* faint green on dark */ --color-ink-glow-2: rgba(74, 46, 25, 0.16); /* faint earth depth */ /* ──────────────────────────────────── RIBBON (forest green) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 246, 236, 0.16); --color-ribbon-text: #FAF6EC; /* ──────────────────────────────────── FOOTER (espresso charcoal) ──────────────────────────────────── */ --color-footer-bg: #1B1007; /* deep espresso dark — earthy & calm */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Botanical Forest Green (#1C4B27). Promise & Footer take deep organic earth/espresso tones. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → botanical forest green */ .btn-nav-order { background: var(--brand-green) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #12331A, #1C4B27) !important; } /* Ribbon → botanical forest green */ .ribbon { background: var(--brand-green) !important; color: #FFFFFF !important; border-top-color: rgba(250, 246, 236, 0.14) !important; border-bottom-color: rgba(250, 246, 236, 0.14) !important; } /* CTA section → deep forest green */ .cta-section { background: var(--brand-green-dark) !important; } /* Promise section → deep rustic earth (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm heritage parchment / cream ✓ */