/* ═══════════════════════════════════════════════════════ TRIBUTE MAKER AFRICA — 10 PAGE THEMES ═══════════════════════════════════════════════════════ HOW TO USE: 1. Add data-theme="THEME_NAME" to your tag 2. To let the user pick a theme, store it on the Tribute model e.g. THEME NAMES: warm-ivory (default — current style, no change needed) midnight-elegance forest-green purple-grace rose-blush african-kente ocean-blue stone-marble golden-sunset teal-linen ═══════════════════════════════════════════════════════ */ /* ── 1. WARM IVORY (default — matches your current design exactly) ── */ [data-theme="warm-ivory"], body:not([data-theme]) { --ivory: #faf8f3; --warm: #f5f2ea; --parch: #ede8da; --sand: #c8bfa4; --taupe: #9a8e78; --umber: #6b5d47; --espresso: #3d3026; --deep: #1e1812; --gold: #b8963e; --gold-l: #d4b06a; --sage: #7a8c72; } /* ── 2. MIDNIGHT ELEGANCE ── */ [data-theme="midnight-elegance"] { --ivory: #0e0e1c; --warm: #13132a; --parch: #1e1e38; --sand: #6060a0; --taupe: #9898c0; --umber: #b8b0e0; --espresso: #0a0a18; --deep: #050510; --gold: #c8a850; --gold-l: #e8c870; --sage: #6080b0; } [data-theme="midnight-elegance"] body { background: var(--ivory); color: #d0d0f0; } [data-theme="midnight-elegance"] .banner, [data-theme="midnight-elegance"] .hero, [data-theme="midnight-elegance"] .programme-section, [data-theme="midnight-elegance"] .candle-section, [data-theme="midnight-elegance"] .gallery-full, [data-theme="midnight-elegance"] .footer { background: #05050f; } [data-theme="midnight-elegance"] .hymns-section, [data-theme="midnight-elegance"] .tributes-section, [data-theme="midnight-elegance"] .service-section, [data-theme="midnight-elegance"] .condolences-section { background: #13132a; } [data-theme="midnight-elegance"] .portrait-section, [data-theme="midnight-elegance"] .give-section, [data-theme="midnight-elegance"] .share-section { background: #0e0e1c; } [data-theme="midnight-elegance"] .nav { background: rgba(14, 14, 28, 0.96); border-bottom-color: #1e1e38; } [data-theme="midnight-elegance"] .tribute-card, [data-theme="midnight-elegance"] .hymn-card, [data-theme="midnight-elegance"] .give-card, [data-theme="midnight-elegance"] .portrait-frame { background: #13132a; border-color: #2a2a50; } [data-theme="midnight-elegance"] .section-title, [data-theme="midnight-elegance"] .programme-title, [data-theme="midnight-elegance"] .candle-title, [data-theme="midnight-elegance"] .hero-name { color: #e8e0ff; } [data-theme="midnight-elegance"] .hero-portrait-frame { border-color: var(--gold); background: #1a1a38; } /* ── 3. FOREST GREEN ── */ [data-theme="forest-green"] { --ivory: #f4faf0; --warm: #eaf4e4; --parch: #d8ecce; --sand: #8ab880; --taupe: #5a8250; --umber: #3a6230; --espresso: #1e3818; --deep: #0e1e0c; --gold: #5a8a3a; --gold-l: #80b058; --sage: #6aaa60; } [data-theme="forest-green"] .banner, [data-theme="forest-green"] .hero, [data-theme="forest-green"] .programme-section, [data-theme="forest-green"] .candle-section, [data-theme="forest-green"] .gallery-full, [data-theme="forest-green"] .footer { background: #1a3014; } [data-theme="forest-green"] .hymns-section, [data-theme="forest-green"] .tributes-section, [data-theme="forest-green"] .service-section, [data-theme="forest-green"] .condolences-section { background: #eaf4e4; } [data-theme="forest-green"] .portrait-section, [data-theme="forest-green"] .give-section, [data-theme="forest-green"] .share-section { background: #f4faf0; } [data-theme="forest-green"] .nav { background: rgba(244, 250, 240, 0.96); border-bottom-color: #d8ecce; } [data-theme="forest-green"] .hero-portrait-frame { border-color: #80b058; } [data-theme="forest-green"] .hero-floral-tl path, [data-theme="forest-green"] .hero-floral-tr path, [data-theme="forest-green"] .hero-floral-bl path, [data-theme="forest-green"] .hero-floral-br path, [data-theme="forest-green"] .hero-floral-tl ellipse, [data-theme="forest-green"] .hero-floral-tr ellipse, [data-theme="forest-green"] .hero-floral-bl ellipse, [data-theme="forest-green"] .hero-floral-br ellipse, [data-theme="forest-green"] .hero-floral-tl circle, [data-theme="forest-green"] .hero-floral-tr circle, [data-theme="forest-green"] .hero-floral-bl circle, [data-theme="forest-green"] .hero-floral-br circle { stroke: #80b058; fill: #80b058; } [data-theme="forest-green"] .mpesa-box { background: #2a6020; } /* ── 4. PURPLE GRACE ── */ [data-theme="purple-grace"] { --ivory: #faf7ff; --warm: #f3eefa; --parch: #e8ddf5; --sand: #b098d0; --taupe: #8060a8; --umber: #5e3a88; --espresso: #2e1858; --deep: #180c30; --gold: #9060c8; --gold-l: #b888e8; --sage: #7858a8; } [data-theme="purple-grace"] .banner, [data-theme="purple-grace"] .hero, [data-theme="purple-grace"] .programme-section, [data-theme="purple-grace"] .candle-section, [data-theme="purple-grace"] .gallery-full, [data-theme="purple-grace"] .footer { background: #1e0c40; } [data-theme="purple-grace"] .hymns-section, [data-theme="purple-grace"] .tributes-section, [data-theme="purple-grace"] .service-section, [data-theme="purple-grace"] .condolences-section { background: #f3eefa; } [data-theme="purple-grace"] .portrait-section, [data-theme="purple-grace"] .give-section, [data-theme="purple-grace"] .share-section { background: #faf7ff; } [data-theme="purple-grace"] .nav { background: rgba(250, 247, 255, 0.96); border-bottom-color: #e8ddf5; } [data-theme="purple-grace"] .hero-portrait-frame { border-color: #b888e8; background: #3a1870; } [data-theme="purple-grace"] .hero-floral-tl path, [data-theme="purple-grace"] .hero-floral-tr path, [data-theme="purple-grace"] .hero-floral-bl path, [data-theme="purple-grace"] .hero-floral-br path, [data-theme="purple-grace"] .hero-floral-tl ellipse, [data-theme="purple-grace"] .hero-floral-tr ellipse, [data-theme="purple-grace"] .hero-floral-bl ellipse, [data-theme="purple-grace"] .hero-floral-br ellipse, [data-theme="purple-grace"] .hero-floral-tl circle, [data-theme="purple-grace"] .hero-floral-tr circle, [data-theme="purple-grace"] .hero-floral-bl circle, [data-theme="purple-grace"] .hero-floral-br circle { stroke: #b888e8; fill: #b888e8; } [data-theme="purple-grace"] .mpesa-box { background: #5e3a88; } /* ── 5. ROSE & BLUSH ── */ [data-theme="rose-blush"] { --ivory: #fff7f9; --warm: #faeef2; --parch: #f5e0e8; --sand: #d8a0b4; --taupe: #b06880; --umber: #883050; --espresso: #4a1028; --deep: #280818; --gold: #c85878; --gold-l: #e888a8; --sage: #a05870; } [data-theme="rose-blush"] .banner, [data-theme="rose-blush"] .hero, [data-theme="rose-blush"] .programme-section, [data-theme="rose-blush"] .candle-section, [data-theme="rose-blush"] .gallery-full, [data-theme="rose-blush"] .footer { background: #380818; } [data-theme="rose-blush"] .hymns-section, [data-theme="rose-blush"] .tributes-section, [data-theme="rose-blush"] .service-section, [data-theme="rose-blush"] .condolences-section { background: #faeef2; } [data-theme="rose-blush"] .portrait-section, [data-theme="rose-blush"] .give-section, [data-theme="rose-blush"] .share-section { background: #fff7f9; } [data-theme="rose-blush"] .nav { background: rgba(255, 247, 249, 0.96); border-bottom-color: #f5e0e8; } [data-theme="rose-blush"] .hero-portrait-frame { border-color: #e888a8; background: #5a1830; } [data-theme="rose-blush"] .hero-floral-tl path, [data-theme="rose-blush"] .hero-floral-tr path, [data-theme="rose-blush"] .hero-floral-bl path, [data-theme="rose-blush"] .hero-floral-br path, [data-theme="rose-blush"] .hero-floral-tl ellipse, [data-theme="rose-blush"] .hero-floral-tr ellipse, [data-theme="rose-blush"] .hero-floral-bl ellipse, [data-theme="rose-blush"] .hero-floral-br ellipse, [data-theme="rose-blush"] .hero-floral-tl circle, [data-theme="rose-blush"] .hero-floral-tr circle, [data-theme="rose-blush"] .hero-floral-bl circle, [data-theme="rose-blush"] .hero-floral-br circle { stroke: #e888a8; fill: #e888a8; } [data-theme="rose-blush"] .mpesa-box { background: #883050; } /* ── 6. AFRICAN KENTE ── */ [data-theme="african-kente"] { --ivory: #1a0e04; --warm: #221406; --parch: #2e1c08; --sand: #c09040; --taupe: #d0a850; --umber: #e8c060; --espresso: #0e0804; --deep: #080402; --gold: #e8a820; --gold-l: #f8c840; --sage: #3a7820; } [data-theme="african-kente"] body { color: #f0d880; } [data-theme="african-kente"] .banner, [data-theme="african-kente"] .hero, [data-theme="african-kente"] .programme-section, [data-theme="african-kente"] .candle-section, [data-theme="african-kente"] .gallery-full, [data-theme="african-kente"] .footer { background: #0a0602; } [data-theme="african-kente"] .hymns-section, [data-theme="african-kente"] .tributes-section, [data-theme="african-kente"] .service-section, [data-theme="african-kente"] .condolences-section { background: #1a1006; } [data-theme="african-kente"] .portrait-section, [data-theme="african-kente"] .give-section, [data-theme="african-kente"] .share-section { background: #1a0e04; } [data-theme="african-kente"] .nav { background: rgba(26, 14, 4, 0.96); border-bottom-color: #2e1c08; } [data-theme="african-kente"] .nav-name, [data-theme="african-kente"] .nav-links a, [data-theme="african-kente"] .section-title, [data-theme="african-kente"] .eulogy-sub-text, [data-theme="african-kente"] .tribute-card-quote { color: #f0d880; } /* Kente stripe accent on banner */ [data-theme="african-kente"] .banner { border-bottom: 4px solid; border-image: repeating-linear-gradient(90deg, #c83820 0 24px, #e8a820 24px 48px, #2a7820 48px 72px, #e8a820 72px 96px ) 1; } [data-theme="african-kente"] .hero-portrait-frame { border-color: #e8a820; background: #2a1408; } [data-theme="african-kente"] .hero-floral-tl path, [data-theme="african-kente"] .hero-floral-tr path, [data-theme="african-kente"] .hero-floral-bl path, [data-theme="african-kente"] .hero-floral-br path, [data-theme="african-kente"] .hero-floral-tl ellipse, [data-theme="african-kente"] .hero-floral-tr ellipse, [data-theme="african-kente"] .hero-floral-bl ellipse, [data-theme="african-kente"] .hero-floral-br ellipse, [data-theme="african-kente"] .hero-floral-tl circle, [data-theme="african-kente"] .hero-floral-tr circle, [data-theme="african-kente"] .hero-floral-bl circle, [data-theme="african-kente"] .hero-floral-br circle { stroke: #e8a820; fill: #e8a820; } [data-theme="african-kente"] .tribute-card, [data-theme="african-kente"] .hymn-card, [data-theme="african-kente"] .give-card, [data-theme="african-kente"] .service-event { background: #221406; border-color: #3a2010; } [data-theme="african-kente"] .mpesa-box { background: #2a7820; } /* ── 7. OCEAN BLUE ── */ [data-theme="ocean-blue"] { --ivory: #f5f9ff; --warm: #eaf2ff; --parch: #d8e8fc; --sand: #7aaad8; --taupe: #4878b0; --umber: #205898; --espresso: #0a2848; --deep: #041428; --gold: #2878c8; --gold-l: #58a0e8; --sage: #3890c0; } [data-theme="ocean-blue"] .banner, [data-theme="ocean-blue"] .hero, [data-theme="ocean-blue"] .programme-section, [data-theme="ocean-blue"] .candle-section, [data-theme="ocean-blue"] .gallery-full, [data-theme="ocean-blue"] .footer { background: #061830; } [data-theme="ocean-blue"] .hymns-section, [data-theme="ocean-blue"] .tributes-section, [data-theme="ocean-blue"] .service-section, [data-theme="ocean-blue"] .condolences-section { background: #eaf2ff; } [data-theme="ocean-blue"] .portrait-section, [data-theme="ocean-blue"] .give-section, [data-theme="ocean-blue"] .share-section { background: #f5f9ff; } [data-theme="ocean-blue"] .nav { background: rgba(245, 249, 255, 0.96); border-bottom-color: #d8e8fc; } [data-theme="ocean-blue"] .hero-portrait-frame { border-color: #58a0e8; background: #0e2e58; } [data-theme="ocean-blue"] .hero-floral-tl path, [data-theme="ocean-blue"] .hero-floral-tr path, [data-theme="ocean-blue"] .hero-floral-bl path, [data-theme="ocean-blue"] .hero-floral-br path, [data-theme="ocean-blue"] .hero-floral-tl ellipse, [data-theme="ocean-blue"] .hero-floral-tr ellipse, [data-theme="ocean-blue"] .hero-floral-bl ellipse, [data-theme="ocean-blue"] .hero-floral-br ellipse, [data-theme="ocean-blue"] .hero-floral-tl circle, [data-theme="ocean-blue"] .hero-floral-tr circle, [data-theme="ocean-blue"] .hero-floral-bl circle, [data-theme="ocean-blue"] .hero-floral-br circle { stroke: #58a0e8; fill: #58a0e8; } [data-theme="ocean-blue"] .mpesa-box { background: #1060b0; } /* ── 8. STONE & MARBLE ── */ [data-theme="stone-marble"] { --ivory: #faf9f7; --warm: #f4f2ee; --parch: #ece8e0; --sand: #b0a898; --taupe: #807868; --umber: #605848; --espresso: #302820; --deep: #181410; --gold: #888078; --gold-l: #a89888; --sage: #788070; } [data-theme="stone-marble"] .banner, [data-theme="stone-marble"] .hero, [data-theme="stone-marble"] .programme-section, [data-theme="stone-marble"] .candle-section, [data-theme="stone-marble"] .gallery-full, [data-theme="stone-marble"] .footer { background: #201c18; } /* Subtle marble-like texture lines on hero */ [data-theme="stone-marble"] .hero-texture { background: repeating-linear-gradient( 115deg, transparent 0, transparent 40px, rgba(160, 148, 128, 0.04) 40px, rgba(160, 148, 128, 0.04) 41px ); } [data-theme="stone-marble"] .hymns-section, [data-theme="stone-marble"] .tributes-section, [data-theme="stone-marble"] .service-section, [data-theme="stone-marble"] .condolences-section { background: #f4f2ee; } [data-theme="stone-marble"] .portrait-section, [data-theme="stone-marble"] .give-section, [data-theme="stone-marble"] .share-section { background: #faf9f7; } [data-theme="stone-marble"] .nav { background: rgba(250, 249, 247, 0.96); border-bottom-color: #ece8e0; } [data-theme="stone-marble"] .hero-portrait-frame { border-color: #a89888; background: #403830; } [data-theme="stone-marble"] .hero-floral-tl path, [data-theme="stone-marble"] .hero-floral-tr path, [data-theme="stone-marble"] .hero-floral-bl path, [data-theme="stone-marble"] .hero-floral-br path, [data-theme="stone-marble"] .hero-floral-tl ellipse, [data-theme="stone-marble"] .hero-floral-tr ellipse, [data-theme="stone-marble"] .hero-floral-bl ellipse, [data-theme="stone-marble"] .hero-floral-br ellipse, [data-theme="stone-marble"] .hero-floral-tl circle, [data-theme="stone-marble"] .hero-floral-tr circle, [data-theme="stone-marble"] .hero-floral-bl circle, [data-theme="stone-marble"] .hero-floral-br circle { stroke: #a89888; fill: #a89888; } [data-theme="stone-marble"] .mpesa-box { background: #504840; } /* ── 9. GOLDEN SUNSET ── */ [data-theme="golden-sunset"] { --ivory: #fffbf2; --warm: #fef5e0; --parch: #fcecc8; --sand: #d8a858; --taupe: #b07830; --umber: #885018; --espresso: #3e2008; --deep: #1e1004; --gold: #d08020; --gold-l: #f0a840; --sage: #a07030; } [data-theme="golden-sunset"] .banner, [data-theme="golden-sunset"] .hero, [data-theme="golden-sunset"] .programme-section, [data-theme="golden-sunset"] .candle-section, [data-theme="golden-sunset"] .gallery-full, [data-theme="golden-sunset"] .footer { background: #281408; } [data-theme="golden-sunset"] .hymns-section, [data-theme="golden-sunset"] .tributes-section, [data-theme="golden-sunset"] .service-section, [data-theme="golden-sunset"] .condolences-section { background: #fef5e0; } [data-theme="golden-sunset"] .portrait-section, [data-theme="golden-sunset"] .give-section, [data-theme="golden-sunset"] .share-section { background: #fffbf2; } [data-theme="golden-sunset"] .nav { background: rgba(255, 251, 242, 0.96); border-bottom-color: #fcecc8; } [data-theme="golden-sunset"] .hero-portrait-frame { border-color: #f0a840; background: #3a2010; } [data-theme="golden-sunset"] .hero-floral-tl path, [data-theme="golden-sunset"] .hero-floral-tr path, [data-theme="golden-sunset"] .hero-floral-bl path, [data-theme="golden-sunset"] .hero-floral-br path, [data-theme="golden-sunset"] .hero-floral-tl ellipse, [data-theme="golden-sunset"] .hero-floral-tr ellipse, [data-theme="golden-sunset"] .hero-floral-bl ellipse, [data-theme="golden-sunset"] .hero-floral-br ellipse, [data-theme="golden-sunset"] .hero-floral-tl circle, [data-theme="golden-sunset"] .hero-floral-tr circle, [data-theme="golden-sunset"] .hero-floral-bl circle, [data-theme="golden-sunset"] .hero-floral-br circle { stroke: #f0a840; fill: #f0a840; } [data-theme="golden-sunset"] .mpesa-box { background: #b06010; } /* ── 10. TEAL & LINEN ── */ [data-theme="teal-linen"] { --ivory: #f5fafa; --warm: #eaf5f4; --parch: #d8eeec; --sand: #78b8b4; --taupe: #3a8884; --umber: #186864; --espresso: #0a3634; --deep: #041c1a; --gold: #208880; --gold-l: #40a8a0; --sage: #309890; } [data-theme="teal-linen"] .banner, [data-theme="teal-linen"] .hero, [data-theme="teal-linen"] .programme-section, [data-theme="teal-linen"] .candle-section, [data-theme="teal-linen"] .gallery-full, [data-theme="teal-linen"] .footer { background: #062826; } [data-theme="teal-linen"] .hymns-section, [data-theme="teal-linen"] .tributes-section, [data-theme="teal-linen"] .service-section, [data-theme="teal-linen"] .condolences-section { background: #eaf5f4; } [data-theme="teal-linen"] .portrait-section, [data-theme="teal-linen"] .give-section, [data-theme="teal-linen"] .share-section { background: #f5fafa; } [data-theme="teal-linen"] .nav { background: rgba(245, 250, 250, 0.96); border-bottom-color: #d8eeec; } [data-theme="teal-linen"] .hero-portrait-frame { border-color: #40a8a0; background: #0e3836; } [data-theme="teal-linen"] .hero-floral-tl path, [data-theme="teal-linen"] .hero-floral-tr path, [data-theme="teal-linen"] .hero-floral-bl path, [data-theme="teal-linen"] .hero-floral-br path, [data-theme="teal-linen"] .hero-floral-tl ellipse, [data-theme="teal-linen"] .hero-floral-tr ellipse, [data-theme="teal-linen"] .hero-floral-bl ellipse, [data-theme="teal-linen"] .hero-floral-br ellipse, [data-theme="teal-linen"] .hero-floral-tl circle, [data-theme="teal-linen"] .hero-floral-tr circle, [data-theme="teal-linen"] .hero-floral-bl circle, [data-theme="teal-linen"] .hero-floral-br circle { stroke: #40a8a0; fill: #40a8a0; } [data-theme="teal-linen"] .mpesa-box { background: #0e6860; }