/* ============================================================ COLOR CONFIGURATION — BIRYANI DUKAAN Theme: Warm Ivory / Cream dominant · Midnight Indigo & Warm Saffron Ochre 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 (midnight indigo depth & warm saffron glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(20, 20, 42, 0.06); --shadow-sm: 0 3px 14px rgba(20, 20, 42, 0.08); --shadow-md: 0 8px 32px rgba(20, 20, 42, 0.12); --shadow-lg: 0 20px 60px rgba(20, 20, 42, 0.16); --shadow-accent: 0 6px 24px rgba(230, 150, 25, 0.22); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── WARM SAFFRON / BIRYANI GOLD (used for CTAs, hero badges, ribbon, highlights) ─── */ --brand-saffron: #E69619; /* ← signature golden saffron yellow from outer emblem */ --brand-saffron-mid: #F5A623; /* ← brighter radiant gold highlight */ --brand-saffron-light: #FFBE54; /* ← soft golden-amber hover tint */ --brand-saffron-pale: #FDF6EB; /* ← barely-there saffron milk tint */ --brand-saffron-mist: #FFFCF6; /* ← whisper shimmer tint */ --brand-saffron-dark: #B26E07; /* ← deep roasted amber (CTA dark / strong contrast) */ /* ── MIDNIGHT INDIGO / INK NAVY (used for headers, footers, dark sections & anchors) ─── */ --brand-navy: #16162E; /* ← deep midnight indigo extracted from center banner */ --brand-navy-mid: #232345; /* ← mid sapphire navy */ --brand-navy-pale: #EFF1F8; /* ← faint cool slate-blue tint */ --brand-navy-deep: #0D0D1D; /* ← deepest midnight base (footer/dark section) */ --brand-navy-dark: #080812; /* ← near-black indigo tone */ /* ── WARM IVORY / BASMATI CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF8F4; /* ← main page background, warm basmati ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3EDE2; /* ← alternating section background */ --brand-beige-deep: #E8DECDB; /* ← deeper warm sand section background */ --brand-beige-border: #DACDBA; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (warm basmati ivory dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF8F4; /* warm ivory — alternating sections */ --color-bg-cream: #F3EDE2; /* deeper warm cream */ /* ──────────────────────────────────── TEXT (deep midnight navy dark — rich & legible) ──────────────────────────────────── */ --color-text-ink: #16162E; /* deep midnight indigo headings */ --color-text-body: #2C2C48; /* dark slate navy body text */ --color-text-muted: #646485; /* mid slate-indigo muted */ --color-text-faint: #9898B6; /* faint slate for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF8F4; --color-text-on-dark-muted: rgba(250, 248, 244, 0.70); --color-text-on-dark-faint: rgba(250, 248, 244, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Midnight Navy = section labels, icons, underlines (regal structure) Warm Saffron = CTA buttons, ribbon, badges (punchy appetite highlight) ──────────────────────────────────── */ --color-accent: var(--brand-navy); /* nav underline, section labels */ --color-accent-deep: var(--brand-navy-deep); /* hover darken */ --color-accent-dark: var(--brand-saffron-dark);/* deep saffron on light bg (badges) */ /* Navy gradient — thin lines, underlines, subtle dark section fills */ --color-accent-gradient: linear-gradient(135deg, #0D0D1D, #16162E); --color-accent-gradient-soft: linear-gradient(135deg, #EFF1F8, #232345); --color-accent-gradient-rich: linear-gradient(135deg, #080812, #0D0D1D, #16162E); /* Saffron gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #B26E07, #E69619); --color-green-gradient-rich: linear-gradient(160deg, #875102, #B26E07, #E69619); /* Brand signature — saffron gold to midnight indigo */ --color-brand-gradient: linear-gradient(135deg, #E69619, #16162E); /* ──────────────────────────────────── BORDERS (warm beige with saffron accents) ──────────────────────────────────── */ --color-border-light: rgba(22, 22, 46, 0.08); /* default card borders */ --color-border: rgba(22, 22, 46, 0.18); /* stronger border */ --color-border-strong: rgba(22, 22, 46, 0.35); --color-border-accent: rgba(230, 150, 25, 0.42); /* saffron gold border */ --color-border-cream: rgba(22, 22, 46, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 248, 244, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS ──────────────────────────────────── */ --color-hero-glow-1: rgba(230, 150, 25, 0.09); /* faint saffron warmth */ --color-hero-glow-2: rgba(22, 22, 46, 0.05); /* faint indigo depth */ --color-grid-line: rgba(22, 22, 46, 0.04); /* subtle slate grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F3EDE2; /* warm ivory badge background */ --color-badge-green: var(--brand-saffron-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(230, 150, 25, 0.35); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Warm Saffron Gold (#E69619) Promise → Midnight Indigo (#16162E) CTA → Deep Roasted Amber (#B26E07) Footer → Deepest Midnight Base (#0D0D1D) ──────────────────────────────────── */ --color-ink: #16162E; /* midnight indigo — promise section */ --color-on-ink: #FAF8F4; /* warm basmati ivory text on dark */ --color-ink-mid: #232345; /* mid navy surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(230, 150, 25, 0.16); /* saffron radiance on dark */ --color-ink-glow-2: rgba(22, 22, 46, 0.28); /* deep indigo shadow */ /* ──────────────────────────────────── RIBBON (warm saffron gold) ──────────────────────────────────── */ --color-ribbon-border: rgba(22, 22, 46, 0.15); --color-ribbon-text: #16162E; /* ──────────────────────────────────── FOOTER (deepest midnight) ──────────────────────────────────── */ --color-footer-bg: #0D0D1D; /* deep midnight indigo — solid & regal */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Warm Saffron Gold (#E69619). Promise & Footer take Midnight Indigo (#16162E / #0D0D1D). ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → rich saffron gold with deep midnight text */ .btn-nav-order { background: var(--brand-saffron) !important; color: #16162E !important; } .btn-nav-order::before { background: linear-gradient(135deg, #B26E07, #E69619) !important; } /* Ribbon → rich saffron gold */ .ribbon { background: var(--brand-saffron) !important; color: #16162E !important; border-top-color: rgba(22, 22, 46, 0.15) !important; border-bottom-color: rgba(22, 22, 46, 0.15) !important; } /* CTA section → deep roasted amber/saffron */ .cta-section { background: var(--brand-saffron-dark) !important; } /* Promise section → midnight indigo (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm basmati ivory / cream ✓ */