/* ============================================================ COLOR CONFIGURATION — NAAM The Kitchen Theme: Warm Ivory / Crisp Off-White dominant · Vibrant Apple Green & Matte Black 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 (crisp black-slate depth & fresh green glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(18, 20, 18, 0.06); --shadow-sm: 0 3px 14px rgba(18, 20, 18, 0.08); --shadow-md: 0 8px 32px rgba(18, 20, 18, 0.12); --shadow-lg: 0 20px 60px rgba(18, 20, 18, 0.16); --shadow-accent: 0 6px 24px rgba(114, 181, 62, 0.20); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── VIBRANT FRESH GREEN (used for CTAs, hero badges, ribbon, highlights) ─── */ --brand-green: #72B53E; /* ← signature vivid lime/apple green from "M" & leaf */ --brand-green-mid: #82C848; /* ← brighter green highlight */ --brand-green-light: #9BD769; /* ← lighter tint hover */ --brand-green-pale: #F2F9ED; /* ← barely-there crisp green tint */ --brand-green-mist: #F8FCF5; /* ← whisper tint */ --brand-green-dark: #4E8525; /* ← deep organic green (CTA hover & dark accents) */ /* ── MATTE NOIR / OBSIDIAN (used for headers, footers, dark sections & badges) ─── */ --brand-dark: #161616; /* ← deep matte black extracted from logo backdrop */ --brand-dark-mid: #242424; /* ← mid-tone charcoal */ --brand-dark-pale: #F3F3F3; /* ← faint cool neutral tint */ --brand-dark-deep: #0E0E0E; /* ← deepest black base (footer/dark section) */ --brand-dark-black: #080808; /* ← pure obsidian tone */ /* ── WARM IVORY / CRISP OFF-WHITE FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF9F5; /* ← main page background, soothing light ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F2EFE8; /* ← alternating section background */ --brand-beige-deep: #E6E2D8; /* ← deeper warm stone section background */ --brand-beige-border: #D7D2C7; /* ← subtle neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (warm ivory / off-white dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF9F5; /* warm ivory — alternating sections */ --color-bg-cream: #F2EFE8; /* deeper warm neutral tone */ /* ──────────────────────────────────── TEXT (deep obsidian charcoal — crisp & modern) ──────────────────────────────────── */ --color-text-ink: #161616; /* matte black headings */ --color-text-body: #303030; /* dark graphite body text */ --color-text-muted: #6B6B6B; /* mid charcoal muted */ --color-text-faint: #A1A1A1; /* faint slate for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF9F5; --color-text-on-dark-muted: rgba(250, 249, 245, 0.70); --color-text-on-dark-faint: rgba(250, 249, 245, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Matte Noir = section labels, icons, underlines (strong architecture) Vibrant Green = CTA buttons, ribbon, badges (fresh energy) ──────────────────────────────────── */ --color-accent: var(--brand-dark); /* nav underline, section labels */ --color-accent-deep: var(--brand-dark-deep); /* hover darken */ --color-accent-dark: var(--brand-green-dark); /* deep green on light badges */ /* Noir gradient — thin lines, underlines, subtle dark fills */ --color-accent-gradient: linear-gradient(135deg, #0E0E0E, #161616); --color-accent-gradient-soft: linear-gradient(135deg, #F3F3F3, #242424); --color-accent-gradient-rich: linear-gradient(135deg, #080808, #0E0E0E, #161616); /* Green gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #4E8525, #72B53E); --color-green-gradient-rich: linear-gradient(160deg, #376119, #4E8525, #72B53E); /* Brand signature — vibrant green to matte black */ --color-brand-gradient: linear-gradient(135deg, #72B53E, #161616); /* ──────────────────────────────────── BORDERS (clean neutral with green accents) ──────────────────────────────────── */ --color-border-light: rgba(22, 22, 22, 0.08); /* default card borders */ --color-border: rgba(22, 22, 22, 0.18); /* stronger border */ --color-border-strong: rgba(22, 22, 22, 0.35); --color-border-accent: rgba(114, 181, 62, 0.40); /* fresh green border */ --color-border-cream: rgba(22, 22, 22, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 249, 245, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS ──────────────────────────────────── */ --color-hero-glow-1: rgba(114, 181, 62, 0.08); /* faint green freshness */ --color-hero-glow-2: rgba(22, 22, 22, 0.04); /* faint noir depth */ --color-grid-line: rgba(22, 22, 22, 0.04); /* subtle slate grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F2EFE8; /* warm ivory badge background */ --color-badge-green: var(--brand-green-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(114, 181, 62, 0.35); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Vibrant Fresh Green (#72B53E) Promise → Matte Noir (#161616) CTA → Deep Organic Green (#4E8525) Footer → Deep Obsidian Base (#0E0E0E) ──────────────────────────────────── */ --color-ink: #161616; /* matte noir — promise section */ --color-on-ink: #FAF9F5; /* warm ivory white text on dark */ --color-ink-mid: #242424; /* mid charcoal surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(114, 181, 62, 0.14); /* fresh green glow on dark */ --color-ink-glow-2: rgba(22, 22, 22, 0.30); /* deep dark shadow */ /* ──────────────────────────────────── RIBBON (vibrant green) ──────────────────────────────────── */ --color-ribbon-border: rgba(22, 22, 22, 0.15); --color-ribbon-text: #161616; /* ──────────────────────────────────── FOOTER (deepest obsidian black) ──────────────────────────────────── */ --color-footer-bg: #0E0E0E; /* deep obsidian — modern & ultra-clean */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Vibrant Green (#72B53E). Promise & Footer take Matte Noir (#161616 / #0E0E0E). ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → vibrant apple green with dark noir text */ .btn-nav-order { background: var(--brand-green) !important; color: #161616 !important; } .btn-nav-order::before { background: linear-gradient(135deg, #4E8525, #72B53E) !important; } /* Ribbon → vibrant apple green */ .ribbon { background: var(--brand-green) !important; color: #161616 !important; border-top-color: rgba(22, 22, 22, 0.15) !important; border-bottom-color: rgba(22, 22, 22, 0.15) !important; } /* CTA section → deep organic green */ .cta-section { background: var(--brand-green-dark) !important; } /* Promise section → matte noir (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory off-white / beige ✓ */