/* ============================================================ COLOR CONFIGURATION — AIRAVAT KITCHEN (Takeaway | Dine In) Theme: Crisp Warm Ivory dominant · Deep Imperial Navy & Polished Platinum 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 (deep sapphire tint & refined platinum glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(5, 20, 48, 0.06); --shadow-sm: 0 3px 14px rgba(5, 20, 48, 0.08); --shadow-md: 0 8px 32px rgba(5, 20, 48, 0.12); --shadow-lg: 0 20px 60px rgba(5, 20, 48, 0.16); --shadow-accent: 0 6px 24px rgba(2, 28, 68, 0.20); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── IMPERIAL MIDNIGHT NAVY (primary CTA, ribbon, badges & anchors) ─── */ --brand-navy: #041E46; /* ← signature deep imperial navy from logo background */ --brand-navy-mid: #082D69; /* ← slightly richer royal navy for hover states */ --brand-navy-light: #154696; /* ← lighter sapphire tint hover */ --brand-navy-pale: #EEF4FD; /* ← faint ice-blue tint */ --brand-navy-mist: #F6F9FE; /* ← whisper tint */ --brand-navy-dark: #01112B; /* ← deepest midnight base (footer & CTA dark) */ /* ── POLISHED PLATINUM / ICE SLATE (used for secondary accents, icons, labels) ─── */ --brand-slate: #6882A6; /* ← refined steel-blue tone for balanced accents */ --brand-slate-mid: #8BA1C1; /* ← lighter slate highlight */ --brand-slate-pale: #F2F5FA; /* ← barely-there platinum tint */ --brand-slate-deep: #476288; /* ← deeper shade for text & high-contrast borders */ --brand-slate-dark: #2B4263; /* ← deepest slate-indigo */ /* ── WARM IVORY / PURE WHITE FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #F9FAFD; /* ← main page background, clean off-white ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #EEF2F8; /* ← alternating section background */ --brand-beige-deep: #DFE6F1; /* ← deeper cool-stone section bg */ --brand-beige-border: #CCD6E5; /* ← delicate platinum borders */ /* ──────────────────────────────────── BACKGROUNDS (crisp ivory / soft ice-white dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #F9FAFD; /* warm off-white — alt sections */ --color-bg-cream: #EEF2F8; /* deeper cool-stone tint */ /* ──────────────────────────────────── TEXT (deep midnight navy dark — crisp & sharp) ──────────────────────────────────── */ --color-text-ink: #021C44; /* deep imperial navy headings */ --color-text-body: #1D3354; /* dark sapphire body text */ --color-text-muted: #576E8E; /* mid slate-blue muted */ --color-text-faint: #96A7C0; /* faint slate for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FFFFFF; --color-text-on-dark-muted: rgba(255, 255, 255, 0.72); --color-text-on-dark-faint: rgba(255, 255, 255, 0.42); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Slate Blue = section labels, icons, underlines (subtle elegance) Imperial Navy = CTA buttons, ribbon, badges (authoritative punch) ──────────────────────────────────── */ --color-accent: var(--brand-slate-deep); /* nav underline, section labels */ --color-accent-deep: var(--brand-slate-dark); /* hover darken */ --color-accent-dark: var(--brand-navy-dark); /* deep navy on light bg (badges) */ /* Slate gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #476288, #6882A6); --color-accent-gradient-soft: linear-gradient(135deg, #EEF4FD, #8BA1C1); --color-accent-gradient-rich: linear-gradient(135deg, #2B4263, #476288, #6882A6); /* Navy gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #01112B, #021C44); --color-green-gradient-rich: linear-gradient(160deg, #010B1C, #01112B, #082D69); /* Brand signature — imperial navy to polished slate */ --color-brand-gradient: linear-gradient(135deg, #021C44, #6882A6); /* ──────────────────────────────────── BORDERS (clean platinum with navy accents) ──────────────────────────────────── */ --color-border-light: rgba(2, 28, 68, 0.08); /* default card borders */ --color-border: rgba(2, 28, 68, 0.18); /* stronger border */ --color-border-strong: rgba(2, 28, 68, 0.35); --color-border-accent: rgba(104, 130, 166, 0.40);/* slate-blue border */ --color-border-cream: rgba(2, 28, 68, 0.06); /* On dark sections */ --color-border-on-dark: rgba(255, 255, 255, 0.16); /* ──────────────────────────────────── HERO RADIAL GLOWS (pure sapphire & platinum) ──────────────────────────────────── */ --color-hero-glow-1: rgba(2, 28, 68, 0.08); /* faint navy depth */ --color-hero-glow-2: rgba(104, 130, 166, 0.06); /* faint platinum sheen */ --color-grid-line: rgba(2, 28, 68, 0.04); /* subtle cool grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #EEF2F8; /* platinum badge background */ --color-badge-green: var(--brand-navy-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(2, 28, 68, 0.28); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Imperial Midnight Navy (#021C44) Promise → Deep Imperial Ink (#01112B) CTA → Imperial Navy Dark (#01112B) Footer → Deep Midnight Onyx (#010B1C) ──────────────────────────────────── */ --color-ink: #01112B; /* deep imperial navy — promise section */ --color-on-ink: #FFFFFF; /* pure white text on dark */ --color-ink-mid: #082D69; /* mid navy surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(104, 130, 166, 0.16); /* platinum glow on dark */ --color-ink-glow-2: rgba(2, 28, 68, 0.30); /* deep navy shadow */ /* ──────────────────────────────────── RIBBON (imperial navy) ──────────────────────────────────── */ --color-ribbon-border: rgba(255, 255, 255, 0.16); --color-ribbon-text: #FFFFFF; /* ──────────────────────────────────── FOOTER (deepest midnight) ──────────────────────────────────── */ --color-footer-bg: #010B1C; /* midnight base — ultra clean & regal */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Imperial Navy (#021C44). Promise & Footer take deep midnight navy tones. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → imperial midnight navy */ .btn-nav-order { background: var(--brand-navy) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #01112B, #082D69) !important; } /* Ribbon → imperial midnight navy */ .ribbon { background: var(--brand-navy) !important; color: #FFFFFF !important; border-top-color: rgba(255, 255, 255, 0.16) !important; border-bottom-color: rgba(255, 255, 255, 0.16) !important; } /* CTA section → deepest imperial navy */ .cta-section { background: var(--brand-navy-dark) !important; } /* Promise section → deep imperial navy (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → clean off-white ivory ✓ */