/* ============================================================ COLOR CONFIGURATION — IDAA Restaurant Theme: Warm Ivory / Sand dominant · Deep Teal Green & Muted Warm Sand 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 teal depth & soft sand glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(20, 45, 40, 0.06); --shadow-sm: 0 3px 14px rgba(20, 45, 40, 0.08); --shadow-md: 0 8px 32px rgba(20, 45, 40, 0.12); --shadow-lg: 0 20px 60px rgba(20, 45, 40, 0.16); --shadow-accent: 0 6px 24px rgba(35, 78, 70, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── DEEP TEAL GREEN (primary CTA, ribbon, badges & anchors) ─── */ --brand-teal: #234E46; /* ← signature deep teal green extracted from logo backdrop */ --brand-teal-mid: #2C6157; /* ← slightly richer teal for hover states */ --brand-teal-light: #3D7A6E; /* ← lighter tint hover */ --brand-teal-pale: #EDF4F2; /* ← barely-there sage/teal tint */ --brand-teal-mist: #F5F9F8; /* ← whisper tint */ --brand-teal-dark: #15322C; /* ← deepest pine/teal (footer & CTA dark) */ /* ── WARM SAND / SOFT OCHRE (used for secondary accents, icons, labels & badges) ─── */ --brand-sand: #E8D4B4; /* ← elegant pale sand extracted from logo icon & text */ --brand-sand-mid: #DFC69F; /* ← richer mid sand */ --brand-sand-pale: #FAF6F0; /* ← faint warm sand tint */ --brand-sand-deep: #C4A87C; /* ← deeper shade for text & high-contrast borders */ --brand-sand-dark: #8E744A; /* ← deepest antique sand-bronze */ /* ── BRAND ACCENT ALIASES & COMPATIBILITY ── */ --brand-accent: var(--brand-sand-deep); /* warm sand accent */ --brand-accent-light: var(--brand-sand); /* pale warm sand */ --brand-blue: var(--brand-teal); /* deep teal brand color */ --brand-brown: var(--brand-sand-deep); /* warm sand tone */ /* ── WARM WHITE / BEIGE FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF8F5; /* ← main page background, warm off-white */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3EFE8; /* ← alternating section background */ --brand-beige-deep: #E9E3D8; /* ← deeper warm beige section bg */ --brand-beige-border: #D8D0C3; /* ← delicate warm beige borders */ /* ──────────────────────────────────── BACKGROUNDS (warm white / beige dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF8F5; /* warm off-white — alternating sections*/ --color-bg-cream: #F3EFE8; /* deeper warm beige */ /* ──────────────────────────────────── TEXT (deep dark teal-charcoal — not cold black) ──────────────────────────────────── */ --color-text-ink: #152824; /* deep dark pine-charcoal headings */ --color-text-body: #2B3E3A; /* warm muted teal-gray body text */ --color-text-muted: #627571; /* mid slate-teal muted */ --color-text-faint: #98A8A5; /* faint slate for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF8F5; --color-text-on-dark-muted: rgba(250, 248, 245, 0.70); --color-text-on-dark-faint: rgba(250, 248, 245, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Sand Gold = section labels, icons, underlines (subtle elegance) Teal = CTA buttons, ribbon, badges (grounded & punchy) ──────────────────────────────────── */ --color-accent: var(--brand-sand-deep); /* nav underline, section labels */ --color-accent-deep: var(--brand-sand-dark); /* hover darken */ --color-accent-dark: var(--brand-teal-dark); /* deep teal on light bg (badges) */ /* Sand gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #C4A87C, #E8D4B4); --color-accent-gradient-soft: linear-gradient(135deg, #FAF6F0, #DFC69F); --color-accent-gradient-rich: linear-gradient(135deg, #8E744A, #C4A87C, #E8D4B4); /* Teal gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #15322C, #234E46); --color-green-gradient-rich: linear-gradient(160deg, #0D201C, #15322C, #234E46); /* Brand signature — deep teal to warm sand */ --color-brand-gradient: linear-gradient(135deg, #234E46, #E8D4B4); /* ──────────────────────────────────── BORDERS (warm beige with teal accents) ──────────────────────────────────── */ --color-border-light: rgba(35, 78, 70, 0.08); /* default card borders */ --color-border: rgba(35, 78, 70, 0.18); /* stronger border */ --color-border-strong: rgba(35, 78, 70, 0.35); --color-border-accent: rgba(196, 168, 124, 0.40);/* sand gold border */ --color-border-cream: rgba(35, 78, 70, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 248, 245, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (soft warmth & depth) ──────────────────────────────────── */ --color-hero-glow-1: rgba(35, 78, 70, 0.07); /* faint teal coolness */ --color-hero-glow-2: rgba(232, 212, 180, 0.12); /* faint sand warmth */ --color-grid-line: rgba(35, 78, 70, 0.04); /* subtle slate grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F3EFE8; /* warm sand badge background */ --color-badge-green: var(--brand-teal-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(35, 78, 70, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Deep Teal Green (#234E46) Promise → Deep Teal Ink (#15322C) CTA → Deep Pine Teal (#15322C) Footer → Deep Midnight Pine (#0D201C) ──────────────────────────────────── */ --color-ink: #15322C; /* deep teal green — promise section */ --color-on-ink: #FAF8F5; /* warm white text on dark */ --color-ink-mid: #1E433C; /* mid teal dark */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(232, 212, 180, 0.12); /* faint sand warmth on dark */ --color-ink-glow-2: rgba(35, 78, 70, 0.22); /* deep teal shadow */ /* ──────────────────────────────────── RIBBON (deep teal green) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 248, 245, 0.15); --color-ribbon-text: #FAF8F5; /* ──────────────────────────────────── FOOTER (deep midnight pine) ──────────────────────────────────── */ --color-footer-bg: #0D201C; /* dark midnight pine — grounded & calm */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Deep Teal Green (#234E46). Promise & Footer take deep pine/midnight teal tones. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → deep teal green */ .btn-nav-order { background: var(--brand-teal) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #15322C, #234E46) !important; } /* Ribbon → deep teal green */ .ribbon { background: var(--brand-teal) !important; color: #FFFFFF !important; border-top-color: rgba(250, 248, 245, 0.15) !important; border-bottom-color: rgba(250, 248, 245, 0.15) !important; } /* CTA section → deep pine teal */ .cta-section { background: var(--brand-teal-dark) !important; } /* Promise section → deep teal ink (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory / beige ✓ */