/* ============================================================ COLOR CONFIGURATION — 4M Biryani House · Since 1997 Theme: Warm White / Beige dominant · Red & Green as 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; --font-brand: 'Bebas Neue', 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(60, 30, 20, 0.06); --shadow-sm: 0 3px 14px rgba(60, 30, 20, 0.08); --shadow-md: 0 8px 32px rgba(60, 30, 20, 0.10); --shadow-lg: 0 20px 60px rgba(60, 30, 20, 0.12); --shadow-accent: 0 6px 24px rgba(180, 30, 30, 0.14); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── RED (used sparingly — badges, CTA buttons, ribbon) ─── */ --brand-red: #B91C1C; /* ← muted deep red, not too loud */ --brand-red-mid: #C92020; /* ← slightly brighter */ --brand-red-light: #E05555; /* ← lighter tint hover */ --brand-red-pale: #FDF1F1; /* ← barely-there blush */ --brand-red-mist: #FEF8F8; /* ← whisper tint */ --brand-red-dark: #7F1212; /* ← deepest red (footer) */ /* ── GREEN (used sparingly — labels, icons, borders) ─────── */ --brand-green: #256B2E; /* ← muted forest green, not bright */ --brand-green-mid: #2E8037; /* ← slightly richer */ --brand-green-pale: #EDF5EE; /* ← faint green tint */ --brand-green-deep: #194E21; /* ← deep green for hover states */ --brand-green-dark: #102E16; /* ← darkest (footer alt) */ /* ── WARM WHITE / BEIGE 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: #EBE3D5; /* ← deeper beige section bg */ --brand-beige-border: #DDD5C4; /* ← warm beige borders */ /* ──────────────────────────────────── BACKGROUNDS (beige / warm white dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F2; /* warm beige — alternating sections */ --color-bg-cream: #F3EDE3; /* deeper warm beige */ /* ──────────────────────────────────── TEXT (warm dark — not cold black) ──────────────────────────────────── */ --color-text-ink: #1C1410; /* warm near-black headings */ --color-text-body: #3A2E24; /* warm dark brown body */ --color-text-muted: #7A6A58; /* warm mid-brown muted */ --color-text-faint: #AFA090; /* warm faint for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF7F2; --color-text-on-dark-muted: rgba(250, 247, 242, 0.65); --color-text-on-dark-faint: rgba(250, 247, 242, 0.38); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Green = section labels, icons, underlines (quiet) Red = CTA buttons, ribbon, badges (punchy but minimal) ──────────────────────────────────── */ --color-accent: var(--brand-green); /* nav underline, section labels */ --color-accent-deep: var(--brand-green-deep); /* hover darken */ --color-accent-dark: var(--brand-red-dark); /* red on light bg (badges) */ /* Green gradient — only for thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #194E21, #256B2E); --color-accent-gradient-soft: linear-gradient(135deg, #EDF5EE, #2E8037); --color-accent-gradient-rich: linear-gradient(135deg, #102E16, #256B2E, #2E8037); /* Red gradient — CTA buttons, ribbon, promise dark section */ --color-green-gradient: linear-gradient(135deg, #7F1212, #B91C1C); --color-green-gradient-rich: linear-gradient(160deg, #5C0D0D, #7F1212, #B91C1C); /* Brand signature — subtle red to green */ --color-brand-gradient: linear-gradient(135deg, #B91C1C, #256B2E); /* ──────────────────────────────────── BORDERS (warm beige dominant, not colored) ──────────────────────────────────── */ --color-border-light: rgba(180, 160, 130, 0.18); /* default card borders */ --color-border: rgba(180, 160, 130, 0.35); /* stronger beige border */ --color-border-strong: rgba(180, 160, 130, 0.55); --color-border-accent: rgba(37, 107, 46, 0.20); /* green accent border */ --color-border-cream: rgba(180, 160, 130, 0.15); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 242, 0.18); /* ──────────────────────────────────── HERO RADIAL GLOWS (very soft, warm) ──────────────────────────────────── */ --color-hero-glow-1: rgba(185, 28, 28, 0.06); /* faint red warmth */ --color-hero-glow-2: rgba(37, 107, 46, 0.04); /* faint green coolness */ --color-grid-line: rgba(180, 160, 130, 0.08); /* warm beige 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(185, 28, 28, 0.20); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → muted red (warm, not glaring) Promise → warm dark brown (not red, not green) CTA → muted red Footer → deep warm dark (almost charcoal-brown) ──────────────────────────────────── */ --color-ink: #2A1F18; /* warm dark brown — promise section */ --color-on-ink: #FAF7F2; /* warm white on dark */ --color-ink-mid: #3A2E24; /* mid warm dark */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(185, 28, 28, 0.10); /* faint red on dark */ --color-ink-glow-2: rgba(37, 107, 46, 0.08); /* faint green on dark */ /* ──────────────────────────────────── RIBBON (muted red) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 242, 0.14); --color-ribbon-text: rgba(250, 247, 242, 0.82); /* ──────────────────────────────────── FOOTER (warm charcoal — neither red nor green) ──────────────────────────────────── */ --color-footer-bg: #1C1410; /* warm near-black — calm, premium */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Only the ribbon and CTA flip to muted red. Everything else stays warm brown / beige. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → muted red */ .btn-nav-order { background: var(--brand-red) !important; } .btn-nav-order::before { background: linear-gradient(135deg, #7F1212, #B91C1C) !important; } /* Ribbon → muted red */ .ribbon { background: var(--brand-red) !important; border-top-color: rgba(250, 247, 242, 0.12) !important; border-bottom-color: rgba(250, 247, 242, 0.12) !important; } /* CTA section → muted red */ .cta-section { background: var(--brand-red-dark) !important; } /* Promise section → warm dark brown (--color-ink already set above) */ /* Why, Menu, Testimonials, Hero → warm white / beige ✓ */