/* ============================================================ COLOR CONFIGURATION — Proof'd Artisan Pizza Theme: Warm Dough Ivory dominant · Night Truck Teal & Amber Hearth Glow 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 night-teal tint & oven amber glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(15, 34, 38, 0.06); --shadow-sm: 0 3px 14px rgba(15, 34, 38, 0.08); --shadow-md: 0 8px 32px rgba(15, 34, 38, 0.12); --shadow-lg: 0 20px 60px rgba(15, 34, 38, 0.16); --shadow-accent: 0 6px 24px rgba(232, 149, 39, 0.22); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── AMBER HEARTH GLOW (used for CTAs, ribbon, hero badges, crust highlights) ─── */ --brand-amber: #E89527; /* ← signature oven & sign glow from "Proof'd" */ --brand-amber-mid: #F5A738; /* ← brighter wood-fired flame highlight */ --brand-amber-light: #FFC064; /* ← soft golden crust hover tint */ --brand-amber-pale: #FDF6EA; /* ← barely-there warm flour tint */ --brand-amber-mist: #FFFBF4; /* ← whisper tint */ --brand-amber-dark: #B5680E; /* ← deep baked crust tone (CTA hover/dark) */ /* ── NIGHT TRUCK TEAL (used for headers, footers, dark sections & badges) ─── */ --brand-teal: #15383B; /* ← deep moody teal extracted from food truck body */ --brand-teal-mid: #1F4B4F; /* ← mid forest teal tone */ --brand-teal-pale: #EFF5F5; /* ← faint cool sage/mint tint */ --brand-teal-deep: #0E2628; /* ← deepest night teal (footer & dark sections) */ --brand-teal-dark: #081718; /* ← midnight black-teal shadow tone */ /* ── WARM DOUGH / SEMOLINA FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF8F3; /* ← main page background, warm dough ivory */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3EEE3; /* ← alternating section background */ --brand-beige-deep: #E8DFD0; /* ← deeper warm stone section background */ --brand-beige-border: #DACDBA; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (warm dough / semolina dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF8F3; /* warm dough ivory — alt sections */ --color-bg-cream: #F3EEE3; /* deeper warm stone tint */ /* ──────────────────────────────────── TEXT (deep nocturnal teal-charcoal — not cold black) ──────────────────────────────────── */ --color-text-ink: #102224; /* deep dark teal headings */ --color-text-body: #253B3D; /* dark muted teal-gray body text */ --color-text-muted: #5C7072; /* mid slate-teal muted */ --color-text-faint: #92A4A6; /* faint slate for labels */ /* Text on dark backgrounds */ --color-text-on-dark: #FAF8F3; --color-text-on-dark-muted: rgba(250, 248, 243, 0.70); --color-text-on-dark-faint: rgba(250, 248, 243, 0.40); /* ──────────────────────────────────── ACCENT COLORS ───────────────────────────────────── Night Teal = section labels, icons, underlines (grounded twilight foundation) Hearth Amber= CTA buttons, ribbon, badges (inviting oven-glow punch) ──────────────────────────────────── */ --color-accent: var(--brand-teal); /* nav underline, section labels */ --color-accent-deep: var(--brand-teal-deep); /* hover darken */ --color-accent-dark: var(--brand-amber-dark); /* deep amber on light badges */ /* Teal gradient — thin lines, underlines, subtle dark section fills */ --color-accent-gradient: linear-gradient(135deg, #0E2628, #15383B); --color-accent-gradient-soft: linear-gradient(135deg, #EFF5F5, #1F4B4F); --color-accent-gradient-rich: linear-gradient(135deg, #081718, #0E2628, #15383B); /* Amber gradient — CTA buttons, ribbon, hero accents */ --color-green-gradient: linear-gradient(135deg, #B5680E, #E89527); --color-green-gradient-rich: linear-gradient(160deg, #874904, #B5680E, #E89527); /* Brand signature — hearth amber to night teal */ --color-brand-gradient: linear-gradient(135deg, #E89527, #15383B); /* ──────────────────────────────────── BORDERS (warm dough with amber accents) ──────────────────────────────────── */ --color-border-light: rgba(21, 56, 59, 0.08); /* default card borders */ --color-border: rgba(21, 56, 59, 0.18); /* stronger border */ --color-border-strong: rgba(21, 56, 59, 0.35); --color-border-accent: rgba(232, 149, 39, 0.42); /* oven amber border */ --color-border-cream: rgba(21, 56, 59, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 248, 243, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (warm oven radiance) ──────────────────────────────────── */ --color-hero-glow-1: rgba(232, 149, 39, 0.09); /* cozy amber hearth glow */ --color-hero-glow-2: rgba(21, 56, 59, 0.05); /* faint teal night depth */ --color-grid-line: rgba(21, 56, 59, 0.04); /* subtle slate grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F3EEE3; /* warm ivory badge background */ --color-badge-green: var(--brand-amber-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(232, 149, 39, 0.35); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Hearth Amber (#E89527) Promise → Night Truck Teal (#15383B) CTA → Deep Baked Crust Amber (#B5680E) Footer → Deepest Night Teal Base (#0E2628) ──────────────────────────────────── */ --color-ink: #15383B; /* night truck teal — promise section */ --color-on-ink: #FAF8F3; /* warm dough ivory text on dark */ --color-ink-mid: #1F4B4F; /* mid teal surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(232, 149, 39, 0.16); /* amber radiance on dark */ --color-ink-glow-2: rgba(21, 56, 59, 0.28); /* deep teal shadow */ /* ──────────────────────────────────── RIBBON (amber hearth glow) ──────────────────────────────────── */ --color-ribbon-border: rgba(16, 34, 36, 0.15); --color-ribbon-text: #102224; /* ──────────────────────────────────── FOOTER (deepest night teal) ──────────────────────────────────── */ --color-footer-bg: #0E2628; /* deep midnight teal — cozy & moody */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Hearth Amber (#E89527). Promise & Footer take Night Truck Teal (#15383B / #0E2628). ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → warm hearth amber with dark teal text */ .btn-nav-order { background: var(--brand-amber) !important; color: #102224 !important; } .btn-nav-order::before { background: linear-gradient(135deg, #B5680E, #E89527) !important; } /* Ribbon → warm hearth amber */ .ribbon { background: var(--brand-amber) !important; color: #102224 !important; border-top-color: rgba(16, 34, 36, 0.15) !important; border-bottom-color: rgba(16, 34, 36, 0.15) !important; } /* CTA section → deep baked crust amber */ .cta-section { background: var(--brand-amber-dark) !important; } /* Promise section → night truck teal (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm dough ivory / cream ✓ */