/* ============================================================ COLOR CONFIGURATION — Utsavam Authentic Kitchen Theme: Warm Ivory / Heritage Cream dominant · Olive Forest Green & Rust Terracotta 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-neutral) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(45, 30, 20, 0.06); --shadow-sm: 0 3px 14px rgba(45, 30, 20, 0.08); --shadow-md: 0 8px 32px rgba(45, 30, 20, 0.10); --shadow-lg: 0 20px 60px rgba(45, 30, 20, 0.12); --shadow-accent: 0 6px 24px rgba(47, 85, 42, 0.16); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── OLIVE FOREST GREEN (used for CTAs, ribbon, badges, main brand anchor) ─── */ --brand-green: #2F552A; /* ← signature deep olive forest green from "Utsavam" */ --brand-green-mid: #3B6B35; /* ← slightly richer green highlight */ --brand-green-light: #52894A; /* ← lighter tint hover */ --brand-green-pale: #EEF5ED; /* ← barely-there herbal sage tint */ --brand-green-mist: #F6FAF5; /* ← whisper tint */ --brand-green-dark: #1C3618; /* ← deepest forest green (footer alt & CTA dark) */ /* ── RUST TERRACOTTA / KUMKUM RED (used sparingly — labels, icons, borders) ─────── */ --brand-rust: #A43A2B; /* ← authentic rust/terracotta from crown flora & subtext */ --brand-rust-mid: #B94534; /* ← slightly brighter terracotta highlight */ --brand-rust-pale: #FBF1EF; /* ← faint warm terracotta/blush tint */ --brand-rust-deep: #822A1E; /* ← deep rust for hover states */ --brand-rust-dark: #5E1C13; /* ← deepest brick maroon */ /* ── WARM IVORY / HERITAGE CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF7F2; /* ← main page background, warm white */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3EDE3; /* ← alternating section background */ --brand-beige-deep: #E9E1D3; /* ← deeper warm beige section bg */ --brand-beige-border: #DCD3C3; /* ← delicate warm beige borders */ /* ──────────────────────────────────── BACKGROUNDS (cream / warm white dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F2; /* warm heritage cream — alt sections */ --color-bg-cream: #F3EDE3; /* deeper warm beige */ /* ──────────────────────────────────── TEXT (warm dark olive-charcoal — not cold black) ──────────────────────────────────── */ --color-text-ink: #1E261D; /* deep dark forest-charcoal headings */ --color-text-body: #373E36; /* warm muted dark olive body */ --color-text-muted: #71786F; /* mid warm-olive muted taupe */ --color-text-faint: #A7AEA5; /* 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 ───────────────────────────────────── Rust Terracotta = section labels, icons, underlines (subtle heritage charm) Forest Green = CTA buttons, ribbon, badges (grounded & fresh) ──────────────────────────────────── */ --color-accent: var(--brand-rust); /* nav underline, section labels */ --color-accent-deep: var(--brand-rust-deep); /* hover darken */ --color-accent-dark: var(--brand-green-dark); /* green on light bg (badges) */ /* Rust gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #822A1E, #A43A2B); --color-accent-gradient-soft: linear-gradient(135deg, #FBF1EF, #B94534); --color-accent-gradient-rich: linear-gradient(135deg, #5E1C13, #822A1E, #A43A2B); /* Forest green gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #1C3618, #2F552A); --color-green-gradient-rich: linear-gradient(160deg, #132610, #1C3618, #2F552A); /* Brand signature — forest green to rust terracotta */ --color-brand-gradient: linear-gradient(135deg, #2F552A, #A43A2B); /* ──────────────────────────────────── BORDERS (warm beige dominant with organic accents) ──────────────────────────────────── */ --color-border-light: rgba(47, 85, 42, 0.08); /* default card borders */ --color-border: rgba(47, 85, 42, 0.18); /* stronger border */ --color-border-strong: rgba(47, 85, 42, 0.35); --color-border-accent: rgba(164, 58, 43, 0.35); /* rust terracotta border*/ --color-border-cream: rgba(47, 85, 42, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 242, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (very soft, warm) ──────────────────────────────────── */ --color-hero-glow-1: rgba(47, 85, 42, 0.06); /* faint olive depth */ --color-hero-glow-2: rgba(164, 58, 43, 0.05); /* faint terracotta glow */ --color-grid-line: rgba(47, 85, 42, 0.04); /* subtle warm grid */ /* ──────────────────────────────────── BADGE / OFFER BOX (warm beige, not colored) ──────────────────────────────────── */ --color-badge-bg: #F3EDE3; /* beige badge background */ --color-badge-green: var(--brand-green-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(47, 85, 42, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Olive Forest Green (#2F552A) Promise → Deep Forest Ink (#1C3618) CTA → Deep Forest Green (#1C3618) Footer → Deep Roasted Forest Charcoal (#121C11) ──────────────────────────────────── */ --color-ink: #1C3618; /* deep olive green — promise section */ --color-on-ink: #FAF7F2; /* warm heritage white on dark */ --color-ink-mid: #294424; /* mid dark olive surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(164, 58, 43, 0.12); /* faint terracotta on dark */ --color-ink-glow-2: rgba(47, 85, 42, 0.22); /* faint green on dark */ /* ──────────────────────────────────── RIBBON (olive forest green) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 242, 0.14); --color-ribbon-text: rgba(250, 247, 242, 0.92); /* ──────────────────────────────────── FOOTER (deep forest charcoal) ──────────────────────────────────── */ --color-footer-bg: #121C11; /* warm near-black olive — calm, premium */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Olive Forest Green (#2F552A). Rust Terracotta (#A43A2B) accents subtitles, labels, and borders. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → olive forest green */ .btn-nav-order { background: var(--brand-green) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #1C3618, #2F552A) !important; } /* Ribbon → olive forest green */ .ribbon { background: var(--brand-green) !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 forest green */ .cta-section { background: var(--brand-green-dark) !important; } /* Promise section → deep olive green (--color-ink already set above) */ /* Why, Menu, Testimonials, Hero → warm white / heritage cream ✓ */