/* ============================================================ COLOR CONFIGURATION — Pure Veg / Green Emblem Theme Theme: Warm Ivory / Crisp Off-White dominant · Deep Emerald Green & Saffron 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 (fresh green tint & subtle warm amber glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(15, 45, 25, 0.06); --shadow-sm: 0 3px 14px rgba(15, 45, 25, 0.08); --shadow-md: 0 8px 32px rgba(15, 45, 25, 0.12); --shadow-lg: 0 20px 60px rgba(15, 45, 25, 0.16); --shadow-accent: 0 6px 24px rgba(16, 128, 64, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── VIBRANT EMERALD GREEN (used for CTAs, ribbon, hero badges, primary accents) ─── */ --brand-green: #108040; /* ← signature pure emerald green from the emblem wing & ring */ --brand-green-mid: #17984E; /* ← brighter energetic green highlight */ --brand-green-light: #32B369; /* ← lighter tint hover */ --brand-green-pale: #EEF8F2; /* ← barely-there clean mint tint */ --brand-green-mist: #F6FCF8; /* ← whisper tint */ --brand-green-dark: #0A4D27; /* ← deep organic forest green (footer/CTA dark section) */ /* ── WARM SAFFRON / SUN YELLOW (used sparingly — labels, icons, borders, active accents) ─── */ --brand-yellow: #E8B817; /* ← balanced warm golden yellow from center wing ribbon */ --brand-yellow-mid: #F5C725; /* ← radiant sunlight yellow highlight */ --brand-yellow-pale: #FDF9EB; /* ← faint warm butter/cream tint */ --brand-yellow-deep: #BF930A; /* ← deeper shade for text & high-contrast borders */ --brand-yellow-dark: #876604; /* ← deepest amber bronze */ /* ── FRESH LIME (sub-accent layer for highlights) ─── */ --brand-lime: #74BA36; /* ← light green ribbon tone from inside 'V' */ /* ── WARM IVORY / PURE VEG CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF9F5; /* ← main page background, clean soothing off-white */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F2EFE8; /* ← alternating section background */ --brand-beige-deep: #E6E2D7; /* ← deeper warm stone section background */ --brand-beige-border: #D7D2C5; /* ← delicate warm 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 stone tint */ /* ──────────────────────────────────── TEXT (deep dark forest charcoal — not cold black) ──────────────────────────────────── */ --color-text-ink: #102417; /* deep dark pine-charcoal headings */ --color-text-body: #2B3B30; /* dark muted olive-gray body text */ --color-text-muted: #5F7366; /* mid slate-sage muted */ --color-text-faint: #95A69B; /* 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 ───────────────────────────────────── Saffron Yellow = section labels, icons, underlines (warm organic glow) Emerald Green = CTA buttons, ribbon, badges (punchy, fresh & clean) ──────────────────────────────────── */ --color-accent: var(--brand-yellow-deep); /* nav underline, section labels */ --color-accent-deep: var(--brand-yellow-dark); /* hover darken */ --color-accent-dark: var(--brand-green-dark); /* deep green on light badges */ /* Yellow/Amber gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #BF930A, #E8B817); --color-accent-gradient-soft: linear-gradient(135deg, #FDF9EB, #F5C725); --color-accent-gradient-rich: linear-gradient(135deg, #876604, #BF930A, #E8B817); /* Green gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #0A4D27, #108040); --color-green-gradient-rich: linear-gradient(160deg, #06381C, #0A4D27, #108040); /* Brand signature — emerald green to warm saffron yellow */ --color-brand-gradient: linear-gradient(135deg, #108040, #E8B817); /* ──────────────────────────────────── BORDERS (clean ivory with soft green accents) ──────────────────────────────────── */ --color-border-light: rgba(16, 128, 64, 0.08); /* default card borders */ --color-border: rgba(16, 128, 64, 0.18); /* stronger border */ --color-border-strong: rgba(16, 128, 64, 0.35); --color-border-accent: rgba(232, 184, 23, 0.40); /* warm yellow border */ --color-border-cream: rgba(16, 128, 64, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 249, 245, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (pure freshness & warm glow) ──────────────────────────────────── */ --color-hero-glow-1: rgba(16, 128, 64, 0.07); /* fresh green radiance */ --color-hero-glow-2: rgba(232, 184, 23, 0.06); /* faint sunny warmth */ --color-grid-line: rgba(16, 128, 64, 0.04); /* subtle sage 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(16, 128, 64, 0.28); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Vibrant Emerald Green (#108040) Promise → Deep Forest Ink (#0A4D27) CTA → Deep Forest Green (#0A4D27) Footer → Deepest Pine Charcoal (#071D10) ──────────────────────────────────── */ --color-ink: #0A4D27; /* deep forest green — promise section */ --color-on-ink: #FAF9F5; /* warm ivory text on dark */ --color-ink-mid: #146134; /* mid forest dark */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(232, 184, 23, 0.14); /* warm yellow glow on dark */ --color-ink-glow-2: rgba(16, 128, 64, 0.24); /* fresh green depth */ /* ──────────────────────────────────── RIBBON (vibrant emerald green) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 249, 245, 0.15); --color-ribbon-text: #FAF9F5; /* ──────────────────────────────────── FOOTER (deep pine charcoal) ──────────────────────────────────── */ --color-footer-bg: #071D10; /* deep pine charcoal — grounded & calm */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Vibrant Emerald Green (#108040). Warm Saffron Yellow (#E8B817) provides appetizing highlights on labels & tags. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → vibrant emerald green */ .btn-nav-order { background: var(--brand-green) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #0A4D27, #108040) !important; } /* Ribbon → vibrant emerald green */ .ribbon { background: var(--brand-green) !important; color: #FFFFFF !important; border-top-color: rgba(250, 249, 245, 0.15) !important; border-bottom-color: rgba(250, 249, 245, 0.15) !important; } /* CTA section → deep organic forest green */ .cta-section { background: var(--brand-green-dark) !important; } /* Promise section → deep forest green (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory off-white / beige ✓ */