/* ============================================================ COLOR CONFIGURATION — Chittoor Naidu Gari Thotakoora Yaatakoora Theme: Warm Cream / Ivory dominant · Deep Andhra Crimson & Mustard 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 (warm earth depth & subtle crimson-amber glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(50, 20, 20, 0.06); --shadow-sm: 0 3px 14px rgba(50, 20, 20, 0.08); --shadow-md: 0 8px 32px rgba(50, 20, 20, 0.10); --shadow-lg: 0 20px 60px rgba(50, 20, 20, 0.14); --shadow-accent: 0 6px 24px rgba(184, 28, 28, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── CHITTOOR CRIMSON RED (used for CTAs, hero badges, ribbon, primary punch) ─── */ --brand-red: #B81C1C; /* ← deep rich crimson from the logo backdrop, non-glaring */ --brand-red-mid: #C82323; /* ← slightly brighter energetic red highlight */ --brand-red-light: #DE5050; /* ← lighter tint hover */ --brand-red-pale: #FDF1F1; /* ← barely-there blush tint */ --brand-red-mist: #FEF8F8; /* ← whisper tint */ --brand-red-dark: #7A0E0E; /* ← deepest wine crimson (footer & CTA dark section) */ /* ── MUSTARD OCHRE / TURMERIC GOLD (used for secondary accents, icons, borders) ─── */ --brand-yellow: #DCA216; /* ← rich turmeric gold extracted from Telugu typography */ --brand-yellow-mid: #EBB528; /* ← soft amber highlight */ --brand-yellow-pale: #FDF7E7; /* ← delicate warm vanilla/cream tint */ --brand-yellow-deep: #B5800D; /* ← deeper mustard for hover & high contrast */ --brand-yellow-dark: #7E5506; /* ← deepest roasted mustard */ /* ── WARM IVORY / SOFT CREAM FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF7F2; /* ← main page background, clean warm ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F4EFE6; /* ← alternating section background */ --brand-beige-deep: #E9E1D4; /* ← deeper warm stone section background */ --brand-beige-border: #DCD2C2; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (warm ivory / soft cream dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F2; /* warm ivory — alternating sections */ --color-bg-cream: #F4EFE6; /* deeper warm stone tint */ /* ──────────────────────────────────── TEXT (deep roasted dark brown — not cold black) ──────────────────────────────────── */ --color-text-ink: #221411; /* deep dark roasted coffee headings */ --color-text-body: #3D2924; /* warm dark brown body */ --color-text-muted: #79615A; /* mid warm gray-brown muted */ --color-text-faint: #AC9B96; /* 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 ───────────────────────────────────── Turmeric Gold = section labels, icons, underlines (warm gentle glow) Crimson Red = CTA buttons, ribbon, badges (punchy & clear) ──────────────────────────────────── */ --color-accent: var(--brand-yellow-deep); /* nav underline, section labels */ --color-accent-deep: var(--brand-yellow-dark); /* hover darken */ --color-accent-dark: var(--brand-red-dark); /* deep red on light bg (badges) */ /* Turmeric Ochre gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #B5800D, #DCA216); --color-accent-gradient-soft: linear-gradient(135deg, #FDF7E7, #EBB528); --color-accent-gradient-rich: linear-gradient(135deg, #7E5506, #B5800D, #DCA216); /* Crimson gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #7A0E0E, #B81C1C); --color-green-gradient-rich: linear-gradient(160deg, #580808, #7A0E0E, #B81C1C); /* Brand signature — crimson red to turmeric gold */ --color-brand-gradient: linear-gradient(135deg, #B81C1C, #DCA216); /* ──────────────────────────────────── BORDERS (warm beige with subtle ochre accents) ──────────────────────────────────── */ --color-border-light: rgba(34, 20, 17, 0.08); /* default card borders */ --color-border: rgba(34, 20, 17, 0.18); /* stronger border */ --color-border-strong: rgba(34, 20, 17, 0.35); --color-border-accent: rgba(220, 162, 22, 0.38); /* turmeric gold border */ --color-border-cream: rgba(34, 20, 17, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 242, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (soft warmth) ──────────────────────────────────── */ --color-hero-glow-1: rgba(184, 28, 28, 0.06); /* faint red warmth */ --color-hero-glow-2: rgba(220, 162, 22, 0.05); /* faint turmeric glow */ --color-grid-line: rgba(34, 20, 17, 0.04); /* subtle warm grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F4EFE6; /* warm ivory badge background */ --color-badge-green: var(--brand-yellow-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(184, 28, 28, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Chittoor Crimson Red (#B81C1C) Promise → Deep Roasted Espresso (#221411) CTA → Deep Wine Crimson (#7A0E0E) Footer → Deep Roasted Charcoal (#180D0B) ──────────────────────────────────── */ --color-ink: #221411; /* roasted espresso — promise section */ --color-on-ink: #FAF7F2; /* warm ivory text on dark */ --color-ink-mid: #331E19; /* mid warm dark surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(184, 28, 28, 0.14); /* faint crimson depth on dark */ --color-ink-glow-2: rgba(220, 162, 22, 0.10); /* faint amber glow on dark */ /* ──────────────────────────────────── RIBBON (crimson red) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 242, 0.14); --color-ribbon-text: #FAF7F2; /* ──────────────────────────────────── FOOTER (deep roasted dark) ──────────────────────────────────── */ --color-footer-bg: #180D0B; /* near-black roasted brown — grounded */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Chittoor Crimson (#B81C1C). Bright yellow from the logo is toned down into rich Turmeric Gold (#DCA216) for accents. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → crimson red with crisp white text */ .btn-nav-order { background: var(--brand-red) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #7A0E0E, #B81C1C) !important; } /* Ribbon → 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 wine crimson */ .cta-section { background: var(--brand-red-dark) !important; } /* Promise section → deep roasted espresso (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm ivory / cream ✓ */