/* ═══════════════════════════════════════════════════════════════ 10 LUXURY WELLNESS THEMES — BetterNewLives.com Applied via: ═══════════════════════════════════════════════════════════════ */ /* ── Google Fonts ────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Cormorant+Garamond:wght@400;600&family=DM+Sans:wght@300;400;500;600&display=swap'); /* ── Module accent colors (global — consistent across themes) ── */ :root { --mod-peptides: #3d6491; --mod-supplements: #4a7a58; --mod-beauty: #9a6470; --mod-yoga: #8a6a3a; --mod-exercise: #3a6a78; --mod-tech: #5a4a8a; /* AI chat panel theming — defaults; each theme may override */ --chat-bg: var(--accent-bg); /* muted page tint, not white */ --chat-header-bg: var(--muted); /* quieter than the site header */ --chat-border: var(--border); } /* ────────────────────────────────────────────────────────────── MODULE TAB COLORS — vibrant, category-coded, fun Primary tabs: rich saturated pastels + glow, more prominent tint. Secondary tabs: present but quieter — same palette, lower volume. Active tab lifts fully to page background with solid underline. ────────────────────────────────────────────────────────────── */ /* — Peptides — bright sky blue */ .module-nav button[data-module="peptides"] { background: rgba(70, 130, 200, .32); border-bottom: 2px solid rgba(120, 190, 255, .6); color: #b8dcff; text-shadow: 0 0 12px rgba(120, 190, 255, .5); } /* — Supplements — vivid fresh green */ .module-nav button[data-module="supplements"] { background: rgba(60, 160, 90, .30); border-bottom: 2px solid rgba(100, 220, 140, .6); color: #a8f0c0; text-shadow: 0 0 12px rgba(80, 200, 120, .5); } /* — Beauty & Skincare — warm rose / coral */ .module-nav button[data-module="beauty"] { background: rgba(210, 90, 120, .28); border-bottom: 2px solid rgba(255, 150, 175, .6); color: #ffb8cc; text-shadow: 0 0 12px rgba(255, 130, 160, .5); } /* — Online Yoga — golden amber — secondary tier */ .module-nav button[data-module="yoga"] { background: rgba(180, 130, 40, .18); border-bottom: 2px solid rgba(220, 175, 80, .38); color: #e0c070; } /* — Exercise Classes — teal — secondary tier */ .module-nav button[data-module="exercise"] { background: rgba(40, 150, 170, .18); border-bottom: 2px solid rgba(80, 200, 220, .38); color: #80d8e8; } /* — Learn Technology — soft lavender — secondary tier */ .module-nav button[data-module="technology"] { background: rgba(120, 90, 200, .18); border-bottom: 2px solid rgba(170, 140, 240, .38); color: #c0a8f8; } /* Hover: snap to bright white — clear click signal */ .module-nav button:not(.active):hover { background: rgba(255, 255, 255, .25); color: #ffffff; text-shadow: none; } /* Module-specific active tab colors (active = lifted off header, colored underline) */ .module-nav button[data-module="peptides"].active { color: var(--mod-peptides); border-bottom: 3px solid var(--mod-peptides); } .module-nav button[data-module="supplements"].active { color: var(--mod-supplements); border-bottom: 3px solid var(--mod-supplements); } .module-nav button[data-module="beauty"].active { color: var(--mod-beauty); border-bottom: 3px solid var(--mod-beauty); } .module-nav button[data-module="yoga"].active { color: var(--mod-yoga); border-bottom: 3px solid var(--mod-yoga); } .module-nav button[data-module="exercise"].active { color: var(--mod-exercise); border-bottom: 3px solid var(--mod-exercise); } .module-nav button[data-module="technology"].active { color: var(--mod-tech); border-bottom: 3px solid var(--mod-tech); } /* ───────────────────────────────────────────────────────────── 1. GOOP IVORY — Warm editorial luxury (light) Inspired by goop.com — warm cream, near-black, restrained ───────────────────────────────────────────────────────────── */ [data-theme="goop-ivory"] { --brand: #6b5a4a; --brand-light: #f5ede6; --brand-dark: #3a2e24; --accent: #a08060; --accent-bg: #faf5f0; --text: #1a1612; --muted: #8a7c6e; --border: #e4dbd0; --bg: #faf8f5; --card-bg: #ffffff; --input-bg: #fdf9f6; --row-hover-bg: #f8f2ec; --table-head-bg: #f5ede6; --header-text: #faf8f5; --nav-btn-bg: rgba(250,248,245,.12); --nav-btn-color: rgba(250,248,245,.75); --nav-active-bg: #faf8f5; --nav-active-color: #3a2e24; --header-bg: #1a1612; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; --radius: 2px; --radius-pill: 2px; --shadow: 0 1px 4px rgba(26,22,18,.07); --shadow-lg: 0 4px 24px rgba(26,22,18,.12); } [data-theme="goop-ivory"] .logo { font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .02em; } [data-theme="goop-ivory"] .tagline { letter-spacing: .14em; font-size: .72rem; } [data-theme="goop-ivory"] .module-intro h1 { font-family: "Playfair Display", serif; font-weight: 400; } [data-theme="goop-ivory"] .table-card-header h3 { font-family: "Playfair Display", serif; font-weight: 400; } /* Goop chat panel — slightly deeper warm ivory, settles beneath product cards */ [data-theme="goop-ivory"] { --chat-bg: #f0e8de; --chat-header-bg: #8a7260; --chat-border: #ddd0c2; } /* ───────────────────────────────────────────────────────────── 2. EQUINOX NOIR — Dark prestige (dark) Inspired by equinox.com — near-black, warm cream, gold ───────────────────────────────────────────────────────────── */ [data-theme="equinox-noir"] { --brand: #c8b898; --brand-light: #1e1c18; --brand-dark: #e0d0b8; --accent: #c8b898; --accent-bg: #161410; --text: #ede8e0; --muted: #8a8278; --border: #2a2820; --bg: #0f0e0c; --card-bg: #18160f; --input-bg: #201e16; --row-hover-bg: #201e16; --table-head-bg: #1a1812; --header-text: #ede8e0; --nav-btn-bg: rgba(237,232,224,.06); --nav-btn-color: rgba(200,184,152,.65); --nav-active-bg: #0f0e0c; --nav-active-color: #c8b898; --header-bg: #0f0e0c; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; --radius: 0px; --radius-pill: 2px; --shadow: 0 1px 8px rgba(0,0,0,.4); --shadow-lg: 0 4px 30px rgba(0,0,0,.6); } [data-theme="equinox-noir"] .logo { font-family: "DM Sans", sans-serif; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; font-size: 1.4rem; } [data-theme="equinox-noir"] .tagline { color: rgba(200,184,152,.5); letter-spacing: .2em; } [data-theme="equinox-noir"] .site-header { border-bottom: 1px solid #2a2820; } [data-theme="equinox-noir"] .module-intro h1 { font-family: "Playfair Display", serif; font-weight: 400; } [data-theme="equinox-noir"] .badge-in { background: #0a1e0f; color: #6dba7a; border: 1px solid #1a3a22; } [data-theme="equinox-noir"] .badge-low { background: #1e1508; color: #c8a050; border: 1px solid #3a2a10; } [data-theme="equinox-noir"] .badge-out { background: #1e0808; color: #c06060; border: 1px solid #3a1010; } [data-theme="equinox-noir"] .disclaimer { background: #161410; border-color: #2a2820; color: #8a8278; } [data-theme="equinox-noir"] footer { border-top-color: #2a2820; color: #6a6258; } [data-theme="equinox-noir"] .table-card { border-color: #2a2820; } [data-theme="equinox-noir"] .supplier-link { color: #c8b898; } /* Module accent overrides for dark theme */ [data-theme="equinox-noir"] { --mod-peptides: #7aacda; --mod-supplements: #8abf9a; --mod-beauty: #d0a0aa; --mod-yoga: #d0b07a; --mod-exercise: #7abfcf; --mod-tech: #b0a0d8; } /* Equinox chat — slightly cooler, lighter dark than the product cards */ [data-theme="equinox-noir"] { --chat-bg: #1a1a16; --chat-header-bg: #2c2a24; --chat-border: #363430; --peptide-chat-header-bg:#1a3258; --supp-chat-header-bg: #1a2e20; --beauty-chat-header-bg: #2a1820; } /* Onsen Stone chat — deep navy for peptides, matching tab hue family */ [data-theme="onsen-stone"] { --peptide-chat-header-bg: #1e4070; /* deep calm navy — muted version of the sky-blue tab */ --supp-chat-header-bg: #1e4830; /* deep forest green */ --beauty-chat-header-bg: #601838; /* deep rose */ } /* ───────────────────────────────────────────────────────────── 3. SPA SAGE — Botanical calm (light) Warm sage greens, botanical whites, natural movement ───────────────────────────────────────────────────────────── */ [data-theme="spa-sage"] { --brand: #4e7060; --brand-light: #edf4f0; --brand-dark: #2d4a3a; --accent: #8a6a3a; --accent-bg: #faf5ec; --text: #1a2418; --muted: #6a7a6a; --border: #d0ddd4; --bg: #f4f7f4; --card-bg: #ffffff; --input-bg: #f4f7f4; --row-hover-bg: #edf4f0; --table-head-bg: #edf4f0; --header-text: #f0f8f2; --nav-btn-bg: rgba(240,248,242,.12); --nav-btn-color: rgba(240,248,242,.78); --nav-active-bg: #f4f7f4; --nav-active-color: #2d4a3a; --header-bg: #2d4a3a; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; --radius: 6px; --radius-pill: 24px; --shadow: 0 2px 8px rgba(45,74,58,.08); --shadow-lg: 0 6px 24px rgba(45,74,58,.14); } [data-theme="spa-sage"] .logo { font-family: "Playfair Display", serif; font-weight: 600; } [data-theme="spa-sage"] .module-intro h1 { font-family: "Playfair Display", serif; font-weight: 400; } [data-theme="spa-sage"] .module-intro { border-left: 3px solid #4e7060; } /* ───────────────────────────────────────────────────────────── 4. MAISON ROSE — Soft blush luxury (light) Dusty rose, warm cream, feminine elegance ───────────────────────────────────────────────────────────── */ [data-theme="maison-rose"] { --brand: #926070; --brand-light: #faf0f2; --brand-dark: #5a3040; --accent: #c89a7a; --accent-bg: #fdf6f0; --text: #261418; --muted: #8a6870; --border: #e8d4d8; --bg: #fdf8f8; --card-bg: #ffffff; --input-bg: #fdf8f8; --row-hover-bg: #faf0f2; --table-head-bg: #faf0f2; --header-text: #fdf8f8; --nav-btn-bg: rgba(253,248,248,.12); --nav-btn-color: rgba(253,248,248,.76); --nav-active-bg: #fdf8f8; --nav-active-color: #5a3040; --header-bg: #261418; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif; --radius: 8px; --radius-pill: 28px; --shadow: 0 2px 8px rgba(38,20,24,.07); --shadow-lg: 0 6px 28px rgba(38,20,24,.12); } [data-theme="maison-rose"] .logo { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 2rem; letter-spacing: .04em; } [data-theme="maison-rose"] .module-intro h1 { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.7rem; } [data-theme="maison-rose"] .table-card-header h3 { font-family: "Cormorant Garamond", serif; font-size: 1.15rem; } /* ───────────────────────────────────────────────────────────── 5. ONSEN STONE — Japanese minimalism (light) Warm stone, charcoal, absolute restraint ───────────────────────────────────────────────────────────── */ [data-theme="onsen-stone"] { --brand: #5a5048; --brand-light: #f0ece8; --brand-dark: #2a2420; --accent: #8a7a6a; --accent-bg: #f5f0ea; --text: #1c1814; --muted: #8a8078; --border: #ddd8d0; --bg: #f8f5f0; --card-bg: #fdfaf7; --input-bg: #f8f5f0; --row-hover-bg: #f0ece8; --table-head-bg: #f0ece8; --header-text: #f8f5f0; --nav-btn-bg: rgba(248,245,240,.1); --nav-btn-color: rgba(248,245,240,.68); --nav-active-bg: #f8f5f0; --nav-active-color: #2a2420; --header-bg: #1c1814; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "DM Sans", -apple-system, sans-serif; --radius: 0px; --radius-pill: 0px; --shadow: 0 1px 3px rgba(28,24,20,.06); --shadow-lg: 0 4px 16px rgba(28,24,20,.1); } [data-theme="onsen-stone"] .logo { font-weight: 300; letter-spacing: .22em; text-transform: uppercase; font-size: 1.3rem; } [data-theme="onsen-stone"] .tagline { letter-spacing: .2em; font-size: .7rem; } [data-theme="onsen-stone"] .table-card { border-radius: 0; box-shadow: none; border-color: #ddd8d0; } [data-theme="onsen-stone"] .module-nav button { border-radius: 0; } [data-theme="onsen-stone"] .site-header { border-bottom: 1px solid #2a2420; } /* ── Onsen Stone: tab overrides The near-black charcoal header (#1c1814) absorbs low-opacity rgba tints, making them read grey. Push opacity and saturation high enough to show true hue. ─────────────────────────────────────────────────────────────────────────────── */ /* Peptides — clear sky blue, the headline act */ [data-theme="onsen-stone"] .module-nav button[data-module="peptides"] { background: rgba(30, 110, 240, .52); border-bottom: 3px solid rgba(90, 170, 255, .85); color: #8eceff; text-shadow: 0 0 14px rgba(70, 160, 255, .75); } /* Supplements — vivid jade green */ [data-theme="onsen-stone"] .module-nav button[data-module="supplements"] { background: rgba(30, 150, 80, .46); border-bottom: 2px solid rgba(80, 210, 130, .75); color: #90e8b0; text-shadow: 0 0 12px rgba(60, 200, 110, .65); } /* Beauty — warm coral rose */ [data-theme="onsen-stone"] .module-nav button[data-module="beauty"] { background: rgba(210, 60, 100, .40); border-bottom: 2px solid rgba(255, 120, 160, .75); color: #ffaac8; text-shadow: 0 0 12px rgba(255, 100, 150, .65); } /* Yoga — amber gold, secondary */ [data-theme="onsen-stone"] .module-nav button[data-module="yoga"] { background: rgba(190, 130, 20, .30); border-bottom: 2px solid rgba(230, 180, 70, .55); color: #e8c870; } /* Exercise — teal, secondary */ [data-theme="onsen-stone"] .module-nav button[data-module="exercise"] { background: rgba(20, 150, 175, .30); border-bottom: 2px solid rgba(70, 210, 230, .55); color: #70d8e8; } /* Technology — soft violet, secondary */ [data-theme="onsen-stone"] .module-nav button[data-module="technology"] { background: rgba(110, 70, 210, .30); border-bottom: 2px solid rgba(170, 130, 255, .55); color: #c0a0ff; } /* ───────────────────────────────────────────────────────────── 6. COASTAL MIST — Airy nautical (light) Soft white, deep ocean navy, sea glass blue ───────────────────────────────────────────────────────────── */ [data-theme="coastal-mist"] { --brand: #3a6080; --brand-light: #e8f2f8; --brand-dark: #1e3a52; --accent: #5a9aaa; --accent-bg: #eef7f8; --text: #141e2a; --muted: #607080; --border: #ccd8e4; --bg: #f6f9fc; --card-bg: #ffffff; --input-bg: #f6f9fc; --row-hover-bg: #e8f2f8; --table-head-bg: #e8f2f8; --header-text: #f6f9fc; --nav-btn-bg: rgba(246,249,252,.12); --nav-btn-color: rgba(246,249,252,.76); --nav-active-bg: #f6f9fc; --nav-active-color: #1e3a52; --header-bg: #1e3a52; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; --radius: 8px; --radius-pill: 20px; --shadow: 0 2px 8px rgba(30,58,82,.08); --shadow-lg: 0 6px 24px rgba(30,58,82,.14); } [data-theme="coastal-mist"] .logo { font-family: "Playfair Display", serif; font-weight: 600; } [data-theme="coastal-mist"] .module-intro h1 { font-family: "Playfair Display", serif; font-weight: 400; } /* ───────────────────────────────────────────────────────────── 7. ALPINE PURE — Swiss minimalism (light) Pure white, deep pine, clinical precision ───────────────────────────────────────────────────────────── */ [data-theme="alpine-pure"] { --brand: #2a5040; --brand-light: #e8f2ec; --brand-dark: #143028; --accent: #3a7a5a; --accent-bg: #eef8f2; --text: #141e18; --muted: #607068; --border: #d0dcd4; --bg: #f8faf8; --card-bg: #ffffff; --input-bg: #ffffff; --row-hover-bg: #e8f2ec; --table-head-bg: #e8f2ec; --header-text: #ffffff; --nav-btn-bg: rgba(255,255,255,.12); --nav-btn-color: rgba(255,255,255,.78); --nav-active-bg: #f8faf8; --nav-active-color: #143028; --header-bg: #143028; --font-body: "Helvetica Neue", "DM Sans", Arial, sans-serif; --font-display: "Helvetica Neue", "DM Sans", Arial, sans-serif; --radius: 4px; --radius-pill: 4px; --shadow: 0 1px 4px rgba(20,48,40,.07); --shadow-lg: 0 4px 20px rgba(20,48,40,.12); } [data-theme="alpine-pure"] .logo { font-weight: 300; letter-spacing: .08em; } [data-theme="alpine-pure"] .tagline { letter-spacing: .1em; } [data-theme="alpine-pure"] .module-nav button { border-radius: 0; } [data-theme="alpine-pure"] .table-card { box-shadow: none; border-left: 3px solid var(--border); border-radius: 0; } /* ───────────────────────────────────────────────────────────── 8. DESERT BLOOM — Warm terracotta (light) Sedona sand, terracotta, sage, warm vitality ───────────────────────────────────────────────────────────── */ [data-theme="desert-bloom"] { --brand: #a85a38; --brand-light: #faf0e8; --brand-dark: #6a3020; --accent: #7a906a; --accent-bg: #f0f5ec; --text: #2a1810; --muted: #8a7060; --border: #e4d0bc; --bg: #faf5ee; --card-bg: #ffffff; --input-bg: #faf5ee; --row-hover-bg: #faf0e8; --table-head-bg: #faf0e8; --header-text: #faf5ee; --nav-btn-bg: rgba(250,245,238,.12); --nav-btn-color: rgba(250,245,238,.76); --nav-active-bg: #faf5ee; --nav-active-color: #6a3020; --header-bg: #2a1810; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; --radius: 8px; --radius-pill: 20px; --shadow: 0 2px 8px rgba(42,24,16,.08); --shadow-lg: 0 6px 24px rgba(42,24,16,.14); } [data-theme="desert-bloom"] .logo { font-family: "Playfair Display", serif; font-weight: 600; } [data-theme="desert-bloom"] .module-intro h1 { font-family: "Playfair Display", serif; font-weight: 400; } [data-theme="desert-bloom"] .module-intro { border-left: 3px solid #a85a38; } /* ───────────────────────────────────────────────────────────── 9. MIDNIGHT RITUAL — Deep indigo luxury (dark) Dark navy, soft violet, warm gold — evening ritual ───────────────────────────────────────────────────────────── */ [data-theme="midnight-ritual"] { --brand: #a898cc; --brand-light: #1a1630; --brand-dark: #c8b8f0; --accent: #c8aa7a; --accent-bg: #16120a; --text: #e8e4f2; --muted: #8880a8; --border: #28243e; --bg: #0e0c1a; --card-bg: #161228; --input-bg: #1e1a32; --row-hover-bg: #1e1a32; --table-head-bg: #1a1630; --header-text: #e8e4f2; --nav-btn-bg: rgba(232,228,242,.06); --nav-btn-color: rgba(168,152,204,.7); --nav-active-bg: #0e0c1a; --nav-active-color: #a898cc; --header-bg: #0e0c1a; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif; --radius: 6px; --radius-pill: 20px; --shadow: 0 2px 12px rgba(0,0,0,.5); --shadow-lg: 0 6px 32px rgba(0,0,0,.7); } [data-theme="midnight-ritual"] .logo { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 2rem; color: #a898cc; } [data-theme="midnight-ritual"] .tagline { color: rgba(200,170,122,.5); } [data-theme="midnight-ritual"] .site-header { border-bottom: 1px solid #28243e; } [data-theme="midnight-ritual"] .module-intro h1 { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; } [data-theme="midnight-ritual"] .badge-in { background: #0a1a10; color: #7acc8a; border: 1px solid #1a3a22; } [data-theme="midnight-ritual"] .badge-low { background: #1a1206; color: #c8a850; border: 1px solid #3a2e10; } [data-theme="midnight-ritual"] .badge-out { background: #1a0808; color: #cc7070; border: 1px solid #3a1818; } [data-theme="midnight-ritual"] .disclaimer { background: #161228; border-color: #28243e; color: #8880a8; } [data-theme="midnight-ritual"] footer { border-top-color: #28243e; color: #686088; } [data-theme="midnight-ritual"] .supplier-link { color: #a898cc; } [data-theme="midnight-ritual"] .sponsored-badge { background: #c8aa7a; color: #0e0c1a; } /* Module accent overrides for dark theme */ [data-theme="midnight-ritual"] { --mod-peptides: #80a8e0; --mod-supplements: #90c0a0; --mod-beauty: #d8a8b8; --mod-yoga: #d8b880; --mod-exercise: #80c0d8; --mod-tech: #c0b0e8; } /* Midnight chat — faintly warmer dark that recedes from the cool indigo product cards */ [data-theme="midnight-ritual"] { --chat-bg: #1a1828; --chat-header-bg: #2e2848; --chat-border: #38324e; } /* ───────────────────────────────────────────────────────────── 10. MATCHA HOUSE — Japanese green tea (light) Pale celadon, deep matcha, warm minimal ───────────────────────────────────────────────────────────── */ [data-theme="matcha-house"] { --brand: #3a6248; --brand-light: #eaf2ea; --brand-dark: #1e3a28; --accent: #8a9a6a; --accent-bg: #f4f8ee; --text: #141e16; --muted: #5a7060; --border: #c8d8c8; --bg: #f2f8f2; --card-bg: #fafdf8; --input-bg: #f2f8f2; --row-hover-bg: #eaf2ea; --table-head-bg: #eaf2ea; --header-text: #f2f8f2; --nav-btn-bg: rgba(242,248,242,.12); --nav-btn-color: rgba(242,248,242,.72); --nav-active-bg: #f2f8f2; --nav-active-color: #1e3a28; --header-bg: #1e3a28; --font-body: "DM Sans", -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; --radius: 4px; --radius-pill: 4px; --shadow: 0 1px 4px rgba(30,58,40,.07); --shadow-lg: 0 4px 20px rgba(30,58,40,.12); } [data-theme="matcha-house"] .logo { font-weight: 300; letter-spacing: .14em; text-transform: uppercase; font-size: 1.3rem; } [data-theme="matcha-house"] .tagline { letter-spacing: .16em; font-size: .72rem; } [data-theme="matcha-house"] .module-intro h1 { font-family: "Playfair Display", serif; font-weight: 400; } [data-theme="matcha-house"] .module-hero-title { font-family: "Playfair Display", serif; font-weight: 400; letter-spacing: .01em; } [data-theme="matcha-house"] .table-card { border-radius: 4px; } [data-theme="matcha-house"] .module-nav button { border-radius: 0; } /* Matcha chat panel — warm parchment recedes from the cool celadon product area */ [data-theme="matcha-house"] { --chat-bg: #eeeae0; /* warm parchment — warm/cool contrast creates hierarchy */ --chat-header-bg: #5a6e52; /* mid-tone sage, quieter than the dark site header */ --chat-border: #ccc8b8; --peptide-chat-header-bg:#2e5a8a; /* deep navy blue — muted version of peptide tab */ --supp-chat-header-bg: #4a7058; /* deeper sage-green for supplements */ --beauty-chat-header-bg: #7a5060; /* muted rose for beauty */ }