/* ============================================================ COLOR CONFIGURATION — Oasis The Cafe · A Paradise On Roof (Gold Edition) Theme: Warm Ivory / Pearl Cream dominant · Radiant Metallic Gold & Obsidian Charcoal 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 (obsidian depth & liquid gold glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(20, 18, 14, 0.06); --shadow-sm: 0 3px 14px rgba(20, 18, 14, 0.08); --shadow-md: 0 8px 32px rgba(20, 18, 14, 0.12); --shadow-lg: 0 20px 60px rgba(20, 18, 14, 0.16); --shadow-accent: 0 6px 24px rgba(222, 178, 77, 0.22); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── RADIANT METALLIC GOLD (used for CTAs, hero badges, ribbon, metallic accents) ─── */ --brand-gold: #DEB24D; /* ← signature liquid gold extracted from emblem ring & typography */ --brand-gold-mid: #EEC563; /* ← brighter radiant gold highlight */ --brand-gold-light: #F7D785; /* ← soft gold hover tint */ --brand-gold-pale: #FDF9EE; /* ← barely-there warm gold tint */ --brand-gold-mist: #FFFCF5; /* ← whisper gold shimmer tint */ --brand-gold-dark: #A47A22; /* ← deep antique bronze (CTA hover & dark accents) */ /* ── OBSIDIAN CHARCOAL / ROOF NOIR (used for headers, footers, dark sections & badges) ─── */ --brand-dark: #181512; /* ← deep warm obsidian extracted from logo backdrop */ --brand-dark-mid: #27221D; /* ← mid warm charcoal-brown */ --brand-dark-pale: #F4F1EC; /* ← faint warm neutral tint */ --brand-dark-deep: #110E0B; /* ← deepest obsidian black base (footer/dark section) */ --brand-dark-black: #0A0806; /* ← near-black shadow tone */ /* ── WARM IVORY / PEARL CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF8F4; /* ← main page background, warm luxury ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F2EDE3; /* ← alternating section background */ --brand-beige-deep: #E6DECFA; /* ← deeper warm stone section background */ --brand-beige-border: #D8CEBD; /* ← delicate warm gold-tinted borders */ /* ──────────────────────────────────── BACKGROUNDS (warm ivory / pearl cream dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF8F4; /* warm ivory — alternating sections */ --color-bg-cream: #F2EDE3; /* deeper warm cream */ /* ──────────────────────────────────── TEXT (deep obsidian charcoal — crisp, rich & elegant) ──────────────────────────────────── */ --color-text-ink: #181512; /* deep obsidian headings */ --color-text-body: #342E28; /* warm dark charcoal body text */ --color-text-muted: #6E645A; /* mid warm gray-brown muted */ --color-text-faint: #A4998E; /* faint neutral 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 ───────────────────────────────────── Obsidian Charcoal = section labels, icons, underlines (grounded architecture) Radiant Gold = CTA buttons, ribbon, badges (punchy metallic highlight) ──────────────────────────────────── */ --color-accent: var(--brand-dark); /* nav underline, section labels */ --color-accent-deep: var(--brand-dark-deep); /* hover darken */ --color-accent-dark: var(--brand-gold-dark); /* gold on light bg (badges) */ /* Obsidian gradient — thin lines, underlines, subtle dark section fills */ --color-accent-gradient: linear-gradient(135deg, #110E0B, #181512); --color-accent-gradient-soft: linear-gradient(135deg, #F4F1EC, #27221D); --color-accent-gradient-rich: linear-gradient(135deg, #0A0806, #110E0B, #181512); /* Gold gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #A47A22, #DEB24D); --color-green-gradient-rich: linear-gradient(160deg, #7E5B13, #A47A22, #DEB24D); /* Brand signature — radiant gold to obsidian charcoal */ --color-brand-gradient: linear-gradient(135deg, #DEB24D, #181512); /* ──────────────────────────────────── BORDERS (warm beige with gold accents) ──────────────────────────────────── */ --color-border-light: rgba(24, 21, 18, 0.08); /* default card borders */ --color-border: rgba(24, 21, 18, 0.18); /* stronger border */ --color-border-strong: rgba(24, 21, 18, 0.35); --color-border-accent: rgba(222, 178, 77, 0.45); /* radiant gold border */ --color-border-cream: rgba(24, 21, 18, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 248, 244, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS ──────────────────────────────────── */ --color-hero-glow-1: rgba(222, 178, 77, 0.09); /* faint gold warmth */ --color-hero-glow-2: rgba(24, 21, 18, 0.04); /* faint obsidian depth */ --color-grid-line: rgba(24, 21, 18, 0.04); /* subtle slate grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F2EDE3; /* warm ivory badge background */ --color-badge-green: var(--brand-gold-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(222, 178, 77, 0.35); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Radiant Metallic Gold (#DEB24D) Promise → Obsidian Charcoal (#181512) CTA → Deep Antique Bronze (#A47A22) Footer → Deepest Obsidian Base (#110E0B) ──────────────────────────────────── */ --color-ink: #181512; /* obsidian charcoal — promise section */ --color-on-ink: #FAF8F4; /* warm pearl white text on dark */ --color-ink-mid: #27221D; /* mid charcoal surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(222, 178, 77, 0.16); /* faint gold radiance on dark */ --color-ink-glow-2: rgba(24, 21, 18, 0.25); /* deep shadow on dark */ /* ──────────────────────────────────── RIBBON (radiant gold) ──────────────────────────────────── */ --color-ribbon-border: rgba(24, 21, 18, 0.15); --color-ribbon-text: #181512; /* ──────────────────────────────────── FOOTER (deepest obsidian) ──────────────────────────────────── */ --color-footer-bg: #110E0B; /* deep obsidian black — ultra-luxury */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Radiant Gold (#DEB24D). Promise & Footer take Obsidian Charcoal (#181512 / #110E0B). ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → radiant metallic gold with obsidian text */ .btn-nav-order { background: var(--brand-gold) !important; color: #181512 !important; } .btn-nav-order::before { background: linear-gradient(135deg, #A47A22, #DEB24D) !important; } /* Ribbon → radiant metallic gold */ .ribbon { background: var(--brand-gold) !important; color: #181512 !important; border-top-color: rgba(24, 21, 18, 0.15) !important; border-bottom-color: rgba(24, 21, 18, 0.15) !important; } /* CTA section → deep antique bronze/gold */ .cta-section { background: var(--brand-gold-dark) !important; } /* Promise section → obsidian charcoal (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory pearl / cream ✓ */