/* ============================================================ CLAYPHYLL – COLOR THEME OVERRIDE Premium Herbal Skincare Palette Drop this AFTER product-premium.css in your . NO layout, spacing, structure, or JS changes. ============================================================ New palette: --pp-bg: #EEF3E6 soft herbal green background --pp-bg-light: #F6F8F2 lighter section surface --pp-green: #8FAF5A primary olive green --pp-green-mid: #7D9E4F hover / darker olive --pp-green-light: #A8C686 muted secondary green --pp-green-pale: #EEF3E6 label backgrounds --pp-text: #1A1A1A heading / rich black --pp-text-mid: #4A4A4A body text / soft dark gray --pp-text-muted: #7A9472 muted label text --pp-border: #DDE5D0 dividers / card borders ============================================================ */ /* ─── 1. TOKEN OVERRIDES ──────────────────────────────────── */ :root { --pp-bg: #EEF3E6; --pp-bg-light: #F6F8F2; --pp-white: #FFFFFF; --pp-green: #8FAF5A; --pp-green-mid: #7D9E4F; --pp-green-light: #A8C686; --pp-green-pale: #EEF3E6; --pp-text: #1A1A1A; --pp-text-mid: #4A4A4A; --pp-text-muted: #7A9472; --pp-border: #DDE5D0; /* Shadows — updated to match new primary green rgb(143,175,90) */ --pp-shadow: 0 4px 24px rgba(143, 175, 90, 0.12); --pp-shadow-lg: 0 12px 48px rgba(143, 175, 90, 0.18); } /* ─── 2. HARDCODED SHADOW OVERRIDES ──────────────────────── */ /* Add To Cart button — resting shadow */ .pp-btn-cart { box-shadow: 0 4px 20px rgba(143, 175, 90, 0.28); } /* Add To Cart button — hover shadow */ .pp-btn-cart:hover { box-shadow: 0 8px 32px rgba(143, 175, 90, 0.38); } /* Benefit cards — hover shadow */ .pp-benefit-card:hover { box-shadow: 0 4px 20px rgba(143, 175, 90, 0.12); } /* Sticky bar — top shadow */ .pp-sticky-bar { box-shadow: 0 -8px 32px rgba(143, 175, 90, 0.14); } /* Sticky Add to Cart button shadow */ .pp-sticky-btn { box-shadow: 0 4px 16px rgba(143, 175, 90, 0.28); } /* ─── 3. USAGE SECTION OVERLAY GRADIENT ──────────────────── */ /* Original used rgba(29,70,26) — updated to new darker olive */ .pp-usage-overlay { background: linear-gradient( to top, rgba(85, 110, 50, 0.92) 0%, transparent 100% ); } /* ─── 4. DISCOUNT SAVE BADGE ─────────────────────────────── */ /* Was hardcoded #e8f5e9 / #2e7d32 / #c8e6c9 — updated to olive palette */ .pp-price-save { background: #EEF3E6; color: #5A7A2E; border: 1px solid #C2D89A; } /* ─── 5. ACCENT: CATEGORY LABEL ──────────────────────────── */ /* Ensure pale bg uses exact new token */ .pp-category-label { color: #8FAF5A; background: #EEF3E6; border-color: #A8C686; } /* ─── 6. INGREDIENT DOT + KEY ING HOVER ──────────────────── */ .pp-key-ing-dot { background: #8FAF5A; } .pp-key-ing-item:hover { border-color: #A8C686; } /* ─── 7. USAGE SECTION LEFT BG ───────────────────────────── */ /* Left panel background uses old dark green — update to new primary */ .pp-usage-left { background: #6A8E3A; } /* ─── 8. STEP NUMBERS ─────────────────────────────────────── */ .pp-step-num { background: #8FAF5A; } /* ─── 9. USAGE NOTE LEFT BORDER ──────────────────────────── */ .pp-usage-note { border-left-color: #8FAF5A; background: #F6F8F2; } /* ─── 10. ACCORDION OPEN CHEVRON ─────────────────────────── */ .pp-accordion-section.open .pp-accordion-chevron { background: #8FAF5A; border-color: #8FAF5A; } /* ─── 11. FAQ OPEN ICON ──────────────────────────────────── */ .pp-faq-item.open .pp-faq-icon { background: #8FAF5A; border-color: #8FAF5A; } /* ─── 12. TRUST ICON BUBBLES ─────────────────────────────── */ .pp-trust-icon { background: #D4E8B8; } /* ─── 13. BADGE ON GALLERY HERO IMAGE ────────────────────── */ .pp-badge-hero { background: #8FAF5A; } /* ─── 14. STICKY PRICE TEXT ──────────────────────────────── */ .pp-sticky-price { color: #5A7A2E; } /* ─── 15. STAR RATING COLOR ──────────────────────────────── */ /* Keep warm gold — natural look. Intentionally not changed. */ /* ─── 16. ACCORDION HOVER BG ─────────────────────────────── */ .pp-accordion-header:hover { background: #F0F4E8; } /* ─── 17. FORMULATED-WITHOUT TAGS ────────────────────────── */ /* Keep red/warning as-is — semantic meaning intact */