/* ============================================================ COLOR CONFIGURATION — Mr Biryani & Mrs Pulao Theme: Deep Navy / Midnight Blue dominant · Crimson Red & Crisp White 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; /* ──────────────────────────────────── 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 (navy depth & red accent glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(19, 23, 40, 0.06); --shadow-sm: 0 3px 14px rgba(19, 23, 40, 0.08); --shadow-md: 0 8px 32px rgba(19, 23, 40, 0.12); --shadow-lg: 0 20px 60px rgba(19, 23, 40, 0.16); --shadow-accent: 0 6px 24px rgba(220, 38, 38, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── CRIMSON RED (used for primary CTAs, active states, ribbon, highlights) ─── */ --brand-red: #DC2626; /* ← bold crimson red extracted from "MR BIRYANI" lettering */ --brand-red-mid: #EF4444; /* ← slightly brighter red highlight */ --brand-red-light: #F87171; /* ← light red hover tint */ --brand-red-pale: #FEF2F2; /* ← barely-there blush tint */ --brand-red-mist: #FFF5F5; /* ← whisper red tint */ --brand-red-dark: #991B1B; /* ← deep crimson red */ /* ── DEEP NAVY BLUE (used for headers, footers, dark sections & accents) ─────── */ --brand-navy: #1E2238; /* ← rich dark navy extracted from logo backdrop */ --brand-navy-mid: #282D4A; /* ← slightly lighter navy-blue */ --brand-navy-pale: #F0F2F8; /* ← faint cool blue-gray tint */ --brand-navy-deep: #131628; /* ← deepest midnight navy hover/footer base */ --brand-navy-dark: #0C0E1A; /* ← darkest midnight tone */ /* ── COOL WHITE / ICE BEIGE FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAFBFD; /* ← main page background, crisp cool white */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F1F3F9; /* ← alternating section background */ --brand-beige-deep: #E4E8F2; /* ← deeper cool beige/slate section bg */ --brand-beige-border: #D1D7E5; /* ← subtle cool borders */ /* ──────────────────────────────────── BACKGROUNDS (cool white / ice beige dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAFBFD; /* cool white — alternating sections */ --color-bg-cream: #F1F3F9; /* deeper cool slate tint */ /* ──────────────────────────────────── TEXT (deep navy dark — crisp and legible) ──────────────────────────────────── */ --color-text-ink: #1E2238; /* deep navy headings */ --color-text-body: #333A56; /* dark slate body text */ --color-text-muted: #647096; /* mid cool blue-gray muted */ --color-text-faint: #9AA4C4; /* faint neutral for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAFBFD; --color-text-on-dark-muted: rgba(250, 251, 253, 0.70); --color-text-on-dark-faint: rgba(250, 251, 253, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Deep Navy = section labels, icons, underlines (grounded authority) Crimson Red = CTA buttons, ribbon, badges (high contrast punch) ──────────────────────────────────── */ --color-accent: var(--brand-navy); /* nav underline, section labels */ --color-accent-deep: var(--brand-navy-deep); /* hover darken */ --color-accent-dark: var(--brand-red-dark); /* red on light bg (badges) */ /* Navy gradient — thin lines, underlines, subtle dark section fills */ --color-accent-gradient: linear-gradient(135deg, #131628, #1E2238); --color-accent-gradient-soft: linear-gradient(135deg, #F0F2F8, #282D4A); --color-accent-gradient-rich: linear-gradient(135deg, #0C0E1A, #131628, #1E2238); /* Red gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #991B1B, #DC2626); --color-green-gradient-rich: linear-gradient(160deg, #7F1D1D, #991B1B, #DC2626); /* Brand signature — crimson red to deep navy */ --color-brand-gradient: linear-gradient(135deg, #DC2626, #1E2238); /* ──────────────────────────────────── BORDERS (cool slate & subtle red accents) ──────────────────────────────────── */ --color-border-light: rgba(30, 34, 56, 0.08); /* default card borders */ --color-border: rgba(30, 34, 56, 0.18); /* stronger border */ --color-border-strong: rgba(30, 34, 56, 0.32); --color-border-accent: rgba(220, 38, 38, 0.35); /* crimson red border */ --color-border-cream: rgba(30, 34, 56, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 251, 253, 0.14); /* ──────────────────────────────────── HERO RADIAL GLOWS ──────────────────────────────────── */ --color-hero-glow-1: rgba(220, 38, 38, 0.07); /* faint red warmth */ --color-hero-glow-2: rgba(30, 34, 56, 0.05); /* faint navy depth */ --color-grid-line: rgba(30, 34, 56, 0.04); /* subtle grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F1F3F9; /* cool slate badge background */ --color-badge-green: var(--brand-red-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(220, 38, 38, 0.30); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Crimson Red (#DC2626) Promise → Deep Navy (#1E2238) CTA → Crimson Red (#DC2626) Footer → Midnight Navy (#131628) ──────────────────────────────────── */ --color-ink: #1E2238; /* deep navy — promise section */ --color-on-ink: #FAFBFD; /* cool white text on dark */ --color-ink-mid: #282D4A; /* mid navy surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(220, 38, 38, 0.12); /* faint red on dark */ --color-ink-glow-2: rgba(30, 34, 56, 0.20); /* faint navy depth */ /* ──────────────────────────────────── RIBBON (crimson red) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 251, 253, 0.18); --color-ribbon-text: #FAFBFD; /* ──────────────────────────────────── FOOTER (midnight navy) ──────────────────────────────────── */ --color-footer-bg: #131628; /* dark midnight navy — solid & modern */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA, Ribbon, and CTA section flip to Crimson Red (#DC2626). Promise & Footer take Deep Navy/Midnight tones. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → crimson red with crisp white text */ .btn-nav-order { background: var(--brand-red) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #991B1B, #DC2626) !important; } /* Ribbon → crimson red */ .ribbon { background: var(--brand-red) !important; color: #FFFFFF !important; border-top-color: rgba(250, 251, 253, 0.18) !important; border-bottom-color: rgba(250, 251, 253, 0.18) !important; } /* CTA section → deep crimson red */ .cta-section { background: var(--brand-red-dark) !important; } /* Promise section → deep navy (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → cool white / ice beige ✓ */