/* ── Memorial Themes ────────────────────────────────────────────── */ /* Applied via on memorial pages */ /* ── Autumn Garden ──────────────────────────────────────── */ body[data-theme="autumn_garden"] { --theme-bg: linear-gradient(180deg, #2c1810 0%, #3d2415 40%, #1a0f08 100%); --theme-overlay: rgba(180, 80, 20, 0.05); } body[data-theme="autumn_garden"] .memorial-hero { background: var(--theme-bg); position: relative; overflow: hidden; } body[data-theme="autumn_garden"] .memorial-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 200px 120px at 10% 20%, rgba(200,80,20,0.12) 0%, transparent 70%), radial-gradient(ellipse 160px 100px at 85% 15%, rgba(220,120,30,0.1) 0%, transparent 70%), radial-gradient(ellipse 180px 90px at 50% 80%, rgba(160,60,10,0.08) 0%, transparent 70%); pointer-events: none; } body[data-theme="autumn_garden"] .memorial-hero::after { content: '🍂 🍁 🍂 🍁 🍂 🍁 🍂 🍁 🍂 🍁'; position: absolute; top: 0; left: 0; right: 0; font-size: 20px; opacity: 0.15; letter-spacing: 40px; pointer-events: none; white-space: nowrap; overflow: hidden; } body[data-theme="autumn_garden"] .pet-name { color: #f4a050 !important; text-shadow: 0 0 30px rgba(244,160,80,0.3); } /* ── Starry Night ───────────────────────────────────────── */ body[data-theme="starry_night"] { --theme-bg: linear-gradient(180deg, #0a0a1f 0%, #0d1233 40%, #050510 100%); } body[data-theme="starry_night"] .memorial-hero { background: var(--theme-bg); position: relative; overflow: hidden; } #starfield-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; } body[data-theme="starry_night"] .memorial-hero > * { position: relative; z-index: 1; } body[data-theme="starry_night"] .pet-name { color: #a0c4ff !important; text-shadow: 0 0 20px rgba(160,196,255,0.4), 0 0 40px rgba(100,150,255,0.2); } /* ── Coastal Sunrise ────────────────────────────────────── */ body[data-theme="coastal_sunrise"] { --theme-bg: linear-gradient(180deg, #001f3f 0%, #003d6b 25%, #0077b6 50%, #e87722 75%, #ffd60a 100%); } body[data-theme="coastal_sunrise"] .memorial-hero { background: var(--theme-bg); position: relative; overflow: hidden; } body[data-theme="coastal_sunrise"] .memorial-hero::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 20px, transparent 20px, transparent 40px ); animation: waves 4s ease-in-out infinite alternate; pointer-events: none; } @keyframes waves { 0% { transform: translateX(0) scaleY(1); } 100% { transform: translateX(-20px) scaleY(1.3); } } body[data-theme="coastal_sunrise"] .pet-name { color: #ffd60a !important; text-shadow: 0 0 20px rgba(255,214,10,0.4); } /* ── Rainbow Bridge ─────────────────────────────────────── */ body[data-theme="rainbow_bridge"] { --theme-bg: linear-gradient(180deg, #1a0533 0%, #2d0b5c 30%, #1a1a3e 100%); } body[data-theme="rainbow_bridge"] .memorial-hero { background: var(--theme-bg); position: relative; overflow: hidden; } body[data-theme="rainbow_bridge"] .memorial-hero::before { content: ''; position: absolute; top: 30%; left: -20%; right: -20%; height: 200px; background: conic-gradient( from 0deg, rgba(255,50,50,0.12), rgba(255,165,0,0.12), rgba(255,255,0,0.12), rgba(50,200,50,0.12), rgba(50,100,255,0.12), rgba(150,0,255,0.12), rgba(255,50,50,0.12) ); filter: blur(30px); border-radius: 50%; pointer-events: none; animation: rainbow-pulse 6s ease-in-out infinite alternate; } @keyframes rainbow-pulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } body[data-theme="rainbow_bridge"] .pet-name { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Addon upsell cards on memorial page ─────────────────── */ .addon-upsell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .addon-upsell-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.25rem; text-align: center; text-decoration: none; color: inherit; transition: all 0.2s; } .addon-upsell-card:hover { background: rgba(212,168,67,0.08); border-color: rgba(212,168,67,0.3); transform: translateY(-2px); color: inherit; } .addon-upsell-card .addon-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; } .addon-upsell-card .addon-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; } .addon-upsell-card .addon-price { color: #d4a843; font-size: 0.85rem; font-weight: 700; } .addon-upsell-card .addon-active-badge { background: rgba(46,213,115,0.15); color: #2ed573; border: 1px solid rgba(46,213,115,0.3); border-radius: 20px; font-size: 0.75rem; padding: 2px 10px; } /* ── Theme picker (addon-checkout) ─────────────────────── */ .theme-picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 0.5rem; } .theme-picker-option { cursor: pointer; border: 2px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; transition: border-color 0.2s; } .theme-picker-option input { display: none; } .theme-picker-option.selected, .theme-picker-option:has(input:checked) { border-color: #d4a843; } .theme-preview { height: 80px; border-radius: 6px 6px 0 0; } .theme-preview-autumn_garden { background: linear-gradient(160deg, #2c1810, #3d2415, #1a0f08); } .theme-preview-starry_night { background: linear-gradient(180deg, #0a0a1f, #0d1233, #050510); } .theme-preview-coastal_sunrise { background: linear-gradient(180deg, #001f3f, #0077b6, #e87722, #ffd60a); } .theme-preview-rainbow_bridge { background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff); } .theme-label { display: block; text-align: center; padding: 0.5rem; font-size: 0.85rem; font-weight: 600; background: rgba(255,255,255,0.04); } /* ── Addon checkout card ────────────────────────────────── */ .checkout-feature-icon { width: 56px; height: 56px; background: rgba(212,168,67,0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #d4a843; flex-shrink: 0; } .checkout-memorial-bar { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 0.75rem 1rem; } .checkout-price-bar { display: flex; align-items: baseline; gap: 0.5rem; } .checkout-price { font-size: 2rem; font-weight: 800; color: #d4a843; } .feature-bullets { display: flex; flex-direction: column; gap: 0.4rem; } .feature-bullet { font-size: 0.9rem; } /* ── Memory Book ────────────────────────────────────────── */ /* (Inline styles in memory-book.php for print compatibility) */ /* ── Animated Memorial ──────────────────────────────────── */ /* Night sky that fades to cream — baked into the gradient, no overlay needed */ body[data-animated="1"] .memorial-hero { background: linear-gradient(180deg, #060a14 0%, #09112a 18%, #0c1732 35%, #101d3e 50%, #16244a 62%, #1e2e56 72%, #2e3e68 80%, #485576 86%, #7a8294 91%, #b8b6b0 95%, #dddbd7 97.5%, #fdfcf8 100% ); position: relative; overflow: hidden; /* Tall enough that all content sits in the dark portion above the cream fade */ padding-bottom: 10rem; } /* Hide default static elements */ body[data-animated="1"] .memorial-hero .memorial-bg-stars, body[data-animated="1"] .memorial-hero .memorial-bg-mist { display: none; } /* z-index stack: canvas=0, motes=1, container=5, audio-btn=10 */ body[data-animated="1"] .memorial-hero .container { position: relative; z-index: 5; } /* ── Text overrides for dark sky ── */ body[data-animated="1"] .memorial-title { color: #f0ece3 !important; text-shadow: 0 1px 12px rgba(0,0,0,0.7); } body[data-animated="1"] .pet-type-badge { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.22) !important; color: #ccc4b8 !important; } body[data-animated="1"] .date-item { color: #b0a898 !important; } body[data-animated="1"] .date-item i, body[data-animated="1"] .date-item .fa-solid { color: #d4a843 !important; } /* "Lived for X years" + "Share this memorial:" label + any other .text-muted in hero */ body[data-animated="1"] .memorial-hero .text-muted, body[data-animated="1"] .memorial-hero .date-item.text-muted { color: #b0a898 !important; } body[data-animated="1"] .memorial-description { background: rgba(0,0,0,0.35) !important; border-color: rgba(255,255,255,0.1) !important; color: #d5cec5 !important; } body[data-animated="1"] .share-bar .btn, body[data-animated="1"] .share-bar button { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: #c8c0b4 !important; } body[data-animated="1"] .share-bar .btn:hover, body[data-animated="1"] .share-bar button:hover { background: rgba(212,168,67,0.18) !important; border-color: rgba(212,168,67,0.55) !important; color: #d4a843 !important; } body[data-animated="1"] .visit-counter, body[data-animated="1"] .location-tag { color: #b0a898 !important; } body[data-animated="1"] .owner-actions .btn, body[data-animated="1"] .owner-addon-bar .btn, body[data-animated="1"] .owner-addon-bar a { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: #b0a898 !important; } body[data-animated="1"] .owner-actions .btn:hover, body[data-animated="1"] .owner-addon-bar .btn:hover, body[data-animated="1"] .owner-addon-bar a:hover { background: rgba(212,168,67,0.18) !important; border-color: rgba(212,168,67,0.55) !important; color: #d4a843 !important; } /* ── Audio toggle button — small pill, top-right corner of hero ── */ .amm-audio-btn { position: absolute; top: 0.75rem; right: 1rem; z-index: 10; display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(6, 10, 20, 0.7); border: 1px solid rgba(212, 168, 67, 0.4); border-radius: 999px; color: rgba(212, 168, 67, 0.85); font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.65rem 0.28rem 0.5rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; backdrop-filter: blur(8px); white-space: nowrap; line-height: 1; width: auto; height: auto; } .amm-audio-btn:hover { background: rgba(212, 168, 67, 0.18); border-color: rgba(212, 168, 67, 0.7); color: #d4a843; } .amm-audio-btn.amm-on { background: rgba(212, 168, 67, 0.2); border-color: rgba(212, 168, 67, 0.65); color: #d4a843; } .amm-audio-btn .amm-icon { font-size: 0.85rem; line-height: 1; flex-shrink: 0; } .amm-audio-btn .amm-lbl { font-size: 0.72rem; } @media (max-width: 576px) { .amm-audio-btn { top: 0.5rem; right: 0.5rem; } } /* ── Floating golden motes rise animation ── */ @keyframes amm-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 0.7; } 100% { transform: translateY(-400px) scale(0.4); opacity: 0; } } /* ── Candle flicker ── */ @keyframes candle-flicker { 0%,100% { filter: brightness(1.0) drop-shadow(0 0 5px rgba(255,160,50,0.75)); transform: scaleX(1) rotate(0deg); } 15% { filter: brightness(1.4) drop-shadow(0 0 10px rgba(255,190,60,1)); transform: scaleX(0.95) rotate(-1deg); } 30% { filter: brightness(0.85) drop-shadow(0 0 4px rgba(255,130,40,0.5)); transform: scaleX(1.05) rotate(0.5deg); } 55% { filter: brightness(1.25) drop-shadow(0 0 8px rgba(255,175,55,0.9)); transform: scaleX(0.97) rotate(-0.5deg); } 75% { filter: brightness(0.9) drop-shadow(0 0 3px rgba(255,140,40,0.55)); transform: scaleX(1.03) rotate(0.8deg); } } .candle-flicker { display: inline-block; animation: candle-flicker 1.8s ease-in-out infinite; transform-origin: bottom center; } .candle-flicker:nth-child(2n) { animation-duration: 2.1s; animation-delay: 0.25s; } .candle-flicker:nth-child(3n) { animation-duration: 1.6s; animation-delay: 0.55s; } .candle-flicker:nth-child(4n) { animation-duration: 2.4s; animation-delay: 0.9s; } /* ── Audio toggle button (old block removed — see top of animated memorial section) ── */