/* ============================================================ COLOR CONFIGURATION — THE TREE STORIES CAFE Theme: Warm Cream / Natural Sand dominant · Deep Forest Green & Warm Peach/Almond 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 botanical green tint & warm peach glow) ──────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(20, 42, 28, 0.06); --shadow-sm: 0 3px 14px rgba(20, 42, 28, 0.08); --shadow-md: 0 8px 32px rgba(20, 42, 28, 0.12); --shadow-lg: 0 20px 60px rgba(20, 42, 28, 0.16); --shadow-accent: 0 6px 24px rgba(26, 67, 44, 0.18); /* ════════════════════════════════════ ★ BRAND PALETTE ★ ════════════════════════════════════ */ /* ── BOTANICAL FOREST GREEN (used for CTAs, ribbon, badges & anchors) ─── */ --brand-green: #1A432C; /* ← deep signature forest green extracted from logo background */ --brand-green-mid: #235639; /* ← richer mid green tone */ --brand-green-light: #32734E; /* ← lighter tint hover */ --brand-green-pale: #EEF5F1; /* ← barely-there sage tint */ --brand-green-mist: #F6FAF8; /* ← whisper tint */ --brand-green-dark: #0F2B1C; /* ← deepest woodland green (footer/CTA dark) */ /* ── WARM PEACH / ALMOND SAND (used for secondary accents, icons, labels & badges) ─── */ --brand-peach: #E5A98B; /* ← elegant warm peach/almond extracted from tree illustration */ --brand-peach-mid: #EEB89D; /* ← brighter soft peach highlight */ --brand-peach-pale: #FAF2ED; /* ← faint warm blush-sand tint */ --brand-peach-deep: #BF7F5E; /* ← deeper shade for text & high-contrast borders */ --brand-peach-dark: #8E5637; /* ← deepest warm terracotta wood */ /* ── WARM IVORY / LINEN FAMILY (dominant — 70%+ of page) ── */ --brand-beige: #FAF7F2; /* ← main page background, organic warm linen */ --brand-beige-light: #FFFFFF; /* ← pure white cards & panels */ --brand-beige-mid: #F3EDE3; /* ← alternating section background */ --brand-beige-deep: #E7DECFA; /* ← deeper warm sand section bg */ --brand-beige-border: #DACDBE; /* ← delicate warm neutral borders */ /* ──────────────────────────────────── BACKGROUNDS (warm linen / sand dominant) ──────────────────────────────────── */ --color-bg: #FFFFFF; /* pure white — hero, cards */ --color-bg-off: #FAF7F2; /* warm linen — alternating sections */ --color-bg-cream: #F3EDE3; /* deeper warm sand tint */ /* ──────────────────────────────────── TEXT (deep dark woodland pine — not cold black) ──────────────────────────────────── */ --color-text-ink: #12241A; /* deep woodland pine headings */ --color-text-body: #2C3C32; /* dark muted pine body text */ --color-text-muted: #65756B; /* mid slate-sage muted */ --color-text-faint: #99A89F; /* faint slate 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 ───────────────────────────────────── Almond Peach = section labels, icons, underlines (warm organic softness) Forest Green = CTA buttons, ribbon, badges (grounded & punchy) ──────────────────────────────────── */ --color-accent: var(--brand-peach-deep); /* nav underline, section labels */ --color-accent-deep: var(--brand-peach-dark); /* hover darken */ --color-accent-dark: var(--brand-green-dark); /* deep green on light badges */ /* Peach gradient — thin lines, underlines, left-border accents */ --color-accent-gradient: linear-gradient(135deg, #BF7F5E, #E5A98B); --color-accent-gradient-soft: linear-gradient(135deg, #FAF2ED, #EEB89D); --color-accent-gradient-rich: linear-gradient(135deg, #8E5637, #BF7F5E, #E5A98B); /* Forest green gradient — CTA buttons, ribbon, promise section */ --color-green-gradient: linear-gradient(135deg, #0F2B1C, #1A432C); --color-green-gradient-rich: linear-gradient(160deg, #091A11, #0F2B1C, #1A432C); /* Brand signature — forest green to warm almond peach */ --color-brand-gradient: linear-gradient(135deg, #1A432C, #E5A98B); /* ──────────────────────────────────── BORDERS (warm linen with subtle peach/green accents) ──────────────────────────────────── */ --color-border-light: rgba(26, 67, 44, 0.08); /* default card borders */ --color-border: rgba(26, 67, 44, 0.18); /* stronger border */ --color-border-strong: rgba(26, 67, 44, 0.35); --color-border-accent: rgba(229, 169, 139, 0.45);/* warm peach border */ --color-border-cream: rgba(26, 67, 44, 0.06); /* On dark sections */ --color-border-on-dark: rgba(250, 247, 242, 0.15); /* ──────────────────────────────────── HERO RADIAL GLOWS (natural warmth & depth) ──────────────────────────────────── */ --color-hero-glow-1: rgba(229, 169, 139, 0.09); /* faint peach warmth */ --color-hero-glow-2: rgba(26, 67, 44, 0.06); /* faint forest depth */ --color-grid-line: rgba(26, 67, 44, 0.04); /* subtle slate grid */ /* ──────────────────────────────────── BADGE / OFFER BOX ──────────────────────────────────── */ --color-badge-bg: #F3EDE3; /* warm sand badge background */ --color-badge-green: var(--brand-peach-pale); /* ──────────────────────────────────── PULSE RING (hero badge dot) ──────────────────────────────────── */ --color-pulse-ring: rgba(26, 67, 44, 0.25); /* ──────────────────────────────────── INK (dark) SURFACES ───────────────────────────────────── Ribbon → Botanical Forest Green (#1A432C) Promise → Deep Forest Ink (#0F2B1C) CTA → Woodland Dark Green (#0F2B1C) Footer → Deepest Woodland Base (#091A11) ──────────────────────────────────── */ --color-ink: #0F2B1C; /* deep woodland green — promise section */ --color-on-ink: #FAF7F2; /* warm linen text on dark */ --color-ink-mid: #183C28; /* mid forest surface */ /* ──────────────────────────────────── INK SECTION GLOWS ──────────────────────────────────── */ --color-ink-glow-1: rgba(229, 169, 139, 0.14); /* faint peach warmth on dark */ --color-ink-glow-2: rgba(26, 67, 44, 0.24); /* deep green shadow */ /* ──────────────────────────────────── RIBBON (forest green) ──────────────────────────────────── */ --color-ribbon-border: rgba(250, 247, 242, 0.15); --color-ribbon-text: #FAF7F2; /* ──────────────────────────────────── FOOTER (deepest woodland base) ──────────────────────────────────── */ --color-footer-bg: #091A11; /* dark woodland charcoal — grounded & calm */ } /* ════════════════════════════════════════════════════════════ SECTION OVERRIDES Navbar CTA button, Ribbon, and CTA section flip to Forest Green (#1A432C). Peach / Almond (#E5A98B) warms up badges, tags, and delicate borders. ════════════════════════════════════════════════════════════ */ /* Navbar CTA button → botanical forest green */ .btn-nav-order { background: var(--brand-green) !important; color: #FFFFFF !important; } .btn-nav-order::before { background: linear-gradient(135deg, #0F2B1C, #1A432C) !important; } /* Ribbon → botanical forest green */ .ribbon { background: var(--brand-green) !important; color: #FFFFFF !important; border-top-color: rgba(250, 247, 242, 0.15) !important; border-bottom-color: rgba(250, 247, 242, 0.15) !important; } /* CTA section → deep woodland green */ .cta-section { background: var(--brand-green-dark) !important; } /* Promise section → deep woodland green (--color-ink set above) */ /* Why, Menu, Testimonials, Hero → warm linen / ivory ✓ */