/* ============================================================ COLOR CONFIGURATION — Wacky Wok Indo-Chinese Theme: Warm Ivory & Wok Charcoal dominant · Tasteful Crimson Red 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 (warm charcoal depth & subtle crimson glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(30, 20, 18, 0.06); --shadow-sm: 0 3px 14px rgba(30, 20, 18, 0.08); --shadow-md: 0 8px 32px rgba(30, 20, 18, 0.12); --shadow-lg: 0 20px 60px rgba(30, 20, 18, 0.16); --shadow-accent: 0 6px 24px rgba(194, 32, 38, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── TASTEFUL CRIMSON RED (used minimally — badges, CTA buttons, ribbon) ─── */ --brand-red: #C22026; /* ← balanced deep crimson from logo, not eye-straining */ --brand-red-mid: #D6282E; /* ← energetic mid red for active/hover states */ --brand-red-light: #E85A5F; /* ← soft coral-red tint hover */ --brand-red-pale: #FDF1F1; /* ← gentle blush tint */ --brand-red-mist: #FEF8F8; /* ← subtle whisper background tint */ --brand-red-dark: #7F1216; /* ← deep dragon crimson (CTA dark / rich tone) */ /* ── WOK CHARCOAL / DARK IRON (used for grounded accents, badges, icons) ─────── */ --brand-dark: #231917; /* ← deep cast-iron charcoal to anchor the red */ --brand-dark-mid: #342825; /* ← mid charcoal brown */ --brand-dark-pale: #F4EFEA; /* ← faint warm neutral tint */ --brand-dark-deep: #181110; /* ← deepest wok black-brown (footer base) */ --brand-dark-black: #120D0C; /* ← near black for deep contrasts */ /* ── WARM IVORY / PORCELAIN FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF7F2; /* ← main page background, soothing warm porcelain */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3ECE3; /* ← alternating section background */ --brand-beige-deep: #E8DFD3; /* ← deeper warm beige section background */ --brand-beige-border: #D9CEBF; /* ← balanced warm borders */ /* ──────────────────────────────────── BACKGROUNDS (warm ivory / light cream dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F2; /* warm ivory — alternating sections */ --color-bg-cream: #F3ECE3; /* deeper warm cream */ /* ──────────────────────────────────── TEXT (deep cast-iron charcoal — soft on eyes) ──────────────────────────────────── */ --color-text-ink: #231917; /* deep wok-charcoal headings */ --color-text-body: #3D302D; /* warm dark brown body */ --color-text-muted: #786560; /* mid warm gray-brown muted */ --color-text-faint: #A89791; /* faint neutral for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF7F2; --color-text-on-dark-muted: rgba(250, 247, 242, 0.70); --color-text-on-dark-faint: rgba(250, 247, 242, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Wok Charcoal = section labels, subtle lines, tags (restrained) Crimson Red = CTA buttons, ribbon, badges (minimal & punchy) ──────────────────────────────────── */ --color-accent: var(--brand-dark); /* nav underline, section labels */ --color-accent-deep: var(--brand-dark-deep); /* hover darken */ --color-accent-dark: var(--brand-red-dark); /* deep crimson on light badges */ /* Charcoal gradient — thin lines, underlines, subtle card borders */ --color-accent-gradient: linear-gradient(135deg, #181110, #231917); --color-accent-gradient-soft: linear-gradient(135deg, #F4EFEA, #342825); --color-accent-gradient-rich: linear-gradient(135deg, #120D0C, #181110, #231917); /* Crimson gradient — CTA buttons, ribbon, hero badges */ --color-green-gradient: linear-gradient(135deg, #7F1216, #C22026); --color-green-gradient-rich: linear-gradient(160deg, #5C0C0F, #7F1216, #C22026); /* Brand signature — balanced crimson to wok charcoal */ --color-brand-gradient: linear-gradient(135deg, #C22026, #231917); /* ──────────────────────────────────── BORDERS (warm beige with faint red accent) ──────────────────────────────────── */ --color-border-light: rgba(35, 25, 23, 0.08); /* default card borders */ --color-border: rgba(35, 25, 23, 0.18); /* stronger border */ --color-border-strong: rgba(35, 25, 23, 0.35); --color-border-accent: rgba(194, 32, 38, 0.28); /* refined red border */ --color-border-cream: rgba(35, 25, 23, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 242, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (soft warmth, not bright red) ──────────────────────────────────── */ --color-hero-glow-1: rgba(194, 32, 38, 0.06); /* subtle crimson warmth */ --color-hero-glow-2: rgba(35, 25, 23, 0.04); /* faint charcoal depth */ --color-grid-line: rgba(35, 25, 23, 0.05); /* subtle warm grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F3ECE3; /* warm ivory badge background */ --color-badge-green: var(--brand-red-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(194, 32, 38, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Muted Crimson (#C22026) Promise → Wok Charcoal (#231917) CTA → Deep Dragon Crimson (#7F1216) Footer → Deep Iron Black (#181110) ──────────────────────────────────── */ --color-ink: #231917; /* wok charcoal — promise section */ --color-on-ink: #FAF7F2; /* warm ivory text on dark */ --color-ink-mid: #342825; /* mid charcoal surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(194, 32, 38, 0.10); /* faint red warmth on dark */ --color-ink-glow-2: rgba(35, 25, 23, 0.18); /* faint depth on dark */ /* ──────────────────────────────────── RIBBON (tasteful crimson) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 242, 0.14); --color-ribbon-text: #FAF7F2; /* ──────────────────────────────────── FOOTER (deep cast-iron dark) ──────────────────────────────────── */ --color-footer-bg: #181110; /* deep cast-iron black — grounded & calm */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Only CTA buttons, ribbon, and banner accents use Crimson (#C22026). 70%+ of the page remains soothing porcelain ivory & wok charcoal. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → deep crimson red */ .btn-nav-order { background: var(--brand-red) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #7F1216, #C22026) !important; } /* Ribbon → tasteful crimson red */ .ribbon { background: var(--brand-red) !important; color: #FFFFFF !important; border-top-color: rgba(250, 247, 242, 0.14) !important; border-bottom-color: rgba(250, 247, 242, 0.14) !important; } /* CTA section → deep dragon crimson (softer than raw red) */ .cta-section { background: var(--brand-red-dark) !important; } /* Promise section → wok charcoal (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory porcelain / cream ✓ */