/* ============================================================ COLOR CONFIGURATION — USTAAD Bakers Restaurant & Banquets Theme: Warm Ivory / Cream dominant · Signature Chef Red & Warm Espresso 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 neutral depth & subtle scarlet 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(220, 20, 20, 0.16); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── USTAAD CHEF RED (used sparingly — badges, CTA buttons, ribbon) ─── */ --brand-red: #C81E1E; /* ← balanced punchy red from logo background, non-glaring */ --brand-red-mid: #DB2828; /* ← slightly brighter energetic red highlight */ --brand-red-light: #ED5A5A; /* ← lighter tint hover */ --brand-red-pale: #FDF2F2; /* ← gentle blush tint */ --brand-red-mist: #FEF8F8; /* ← whisper tint */ --brand-red-dark: #821010; /* ← deepest wine crimson (footer & CTA dark) */ /* ── WARM CHARCOAL / ROASTED ESPRESSO (used sparingly — labels, icons, borders) ─── */ --brand-dark: #241818; /* ← deep warm charcoal ground to anchor the red */ --brand-dark-mid: #3A2828; /* ← mid warm slate-espresso tone */ --brand-dark-pale: #F5EFEF; /* ← faint warm neutral tint */ --brand-dark-deep: #170F0F; /* ← deepest espresso base for dark sections */ --brand-dark-black: #100A0A; /* ← darkest shadow tone */ /* ── WARM IVORY / BAKERS FLOUR FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF7F4; /* ← main page background, clean warm ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3EDE7; /* ← alternating section background */ --brand-beige-deep: #E8DFD7; /* ← deeper warm stone section background */ --brand-beige-border: #DBCFC5; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (ivory / warm cream dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F4; /* warm ivory — alternating sections */ --color-bg-cream: #F3EDE7; /* deeper warm cream */ /* ──────────────────────────────────── TEXT (warm deep dark charcoal — not cold black) ──────────────────────────────────── */ --color-text-ink: #201414; /* warm near-black headings */ --color-text-body: #3D2A2A; /* warm dark brown-charcoal body */ --color-text-muted: #796262; /* mid warm muted */ --color-text-faint: #AC9A9A; /* faint neutral for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF7F4; --color-text-on-dark-muted: rgba(250, 247, 244, 0.70); --color-text-on-dark-faint: rgba(250, 247, 244, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Warm Charcoal = section labels, icons, underlines (grounded & neat) Chef Red = CTA buttons, ribbon, badges (punchy & appetizing) ──────────────────────────────────── */ --color-accent: var(--brand-dark-mid); /* nav underline, section labels */ --color-accent-deep: var(--brand-dark-deep); /* hover darken */ --color-accent-dark: var(--brand-red-dark); /* red on light bg (badges) */ /* Slate gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #170F0F, #241818); --color-accent-gradient-soft: linear-gradient(135deg, #F5EFEF, #3A2828); --color-accent-gradient-rich: linear-gradient(135deg, #100A0A, #170F0F, #241818); /* Red gradient — CTA buttons, ribbon, promise dark section */ --color-green-gradient: linear-gradient(135deg, #821010, #C81E1E); --color-green-gradient-rich: linear-gradient(160deg, #5C0B0B, #821010, #C81E1E); /* Brand signature — subtle chef red to warm charcoal */ --color-brand-gradient: linear-gradient(135deg, #C81E1E, #241818); /* ──────────────────────────────────── BORDERS (warm beige dominant, minimal color) ──────────────────────────────────── */ --color-border-light: rgba(36, 24, 24, 0.08); /* default card borders */ --color-border: rgba(36, 24, 24, 0.18); /* stronger beige border */ --color-border-strong: rgba(36, 24, 24, 0.35); --color-border-accent: rgba(200, 30, 30, 0.28); /* refined red border */ --color-border-cream: rgba(36, 24, 24, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 244, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (very soft, warm) ──────────────────────────────────── */ --color-hero-glow-1: rgba(200, 30, 30, 0.06); /* faint red warmth */ --color-hero-glow-2: rgba(36, 24, 24, 0.04); /* faint neutral depth */ --color-grid-line: rgba(36, 24, 24, 0.04); /* warm subtle grid */ /* ──────────────────────────────────── BADGE / OFFER BOX (warm ivory, not raw red) ──────────────────────────────────── */ --color-badge-bg: #F3EDE7; /* beige badge background */ --color-badge-green: var(--brand-red-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(200, 30, 30, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Chef Red (#C81E1E) Promise → Warm Dark Charcoal (#201414) CTA → Deep Wine Crimson (#821010) Footer → Deep Espresso Dark (#140A0A) ──────────────────────────────────── */ --color-ink: #201414; /* warm dark charcoal — promise section */ --color-on-ink: #FAF7F4; /* warm white text on dark */ --color-ink-mid: #331F1F; /* mid warm dark surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(200, 30, 30, 0.12); /* faint red glow on dark */ --color-ink-glow-2: rgba(36, 24, 24, 0.18); /* faint shadow depth */ /* ──────────────────────────────────── RIBBON (chef red) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 244, 0.14); --color-ribbon-text: #FAF7F4; /* ──────────────────────────────────── FOOTER (deep espresso charcoal) ──────────────────────────────────── */ --color-footer-bg: #140A0A; /* warm near-black — clean & premium */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Chef Red (#C81E1E). Promise & Footer stay anchored in Warm Dark Charcoal/Espresso tones. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → chef red */ .btn-nav-order { background: var(--brand-red) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #821010, #C81E1E) !important; } /* Ribbon → chef red */ .ribbon { background: var(--brand-red) !important; color: #FFFFFF !important; border-top-color: rgba(250, 247, 244, 0.14) !important; border-bottom-color: rgba(250, 247, 244, 0.14) !important; } /* CTA section → deep wine crimson */ .cta-section { background: var(--brand-red-dark) !important; } /* Promise section → warm dark charcoal (--color-ink already set above) */ /* Why, Menu, Testimonials, Hero → warm ivory / cream ✓ */