/* ============================================================ * MemoryMantle — Memorial Themes * Shared between memory_mantle_view_page.html and death_notice_view_page.html. * Add `theme-` to to activate. Default (no class) = "hearthstone". * * Each theme sets: * --hero-bg-image : url() photograph behind the hero * --hero-bg-pos : background-position for the hero photo * --hero-overlay : a gradient overlay to keep hero text readable * --hero-text : main text color over the hero * --hero-sub : secondary text color over the hero * --accent : primary accent (timeline dots, icons, info-box border) * --accent-dark : darker accent (button hover, deep emphasis) * --accent-soft : soft tint for backgrounds and rules * --dot-bg : timeline-dot interior gradient * --timeline-line : timeline rail color * --info-border : left-border on info boxes * ============================================================ */ /* ---------- Pre-theme defaults ---------- * No hero photo until JS applies a theme — prevents a flash of the * default photo before the data loader sets data-theme. Vars match * Hearthstone's accent palette so non-hero chrome (icons, dots, info * borders) renders correctly during the brief unthemed window. */ body { --hero-bg-image: none; --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(20,15,8,0.85) 0%, rgba(20,15,8,0.95) 100%); --hero-text: #fbf3df; --hero-sub: #e8d9b6; --accent: #d4a853; --accent-dark: #8a6030; --accent-soft: rgba(212,168,83,0.15); --dot-bg: linear-gradient(135deg, #d4a853 0%, #8a6030 100%); --timeline-line: #c89c4a; --info-border: #b8893f; /* Page chrome — the cream of the original design as the un-themed fallback. Each theme below tints these subtly so the body, content cards, and info boxes pick up the palette without compromising legibility of dark text on near-white card backgrounds. */ --page-bg: #faf8f5; --section-bg: #ffffff; --info-bg: #faf8f5; } /* ---------- Hearthstone (warm interior, candlelight) ---------- */ body[data-theme="hearthstone"], body.theme-hearthstone { --hero-bg-image: url('/images/themes/hearthstone.jpg?v=7ba10e297c'); --hero-overlay: linear-gradient(180deg, rgba(20,15,8,0.45) 0%, rgba(20,15,8,0.65) 100%); --page-bg: #faf6ec; --section-bg: #fffaf0; --info-bg: #faf3df; } /* ---------- Atlantic Light (Wild Atlantic Way) ---------- */ body.theme-atlantic { --hero-bg-image: url('/images/themes/atlantic.jpg?v=43dd17b7f3'); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(20,40,55,0.40) 0%, rgba(20,40,55,0.60) 100%); --hero-text: #f4f8fb; --hero-sub: #cfdde6; --accent: #5a8aa8; --accent-dark: #3d6985; --accent-soft: rgba(90,138,168,0.18); --dot-bg: linear-gradient(135deg, #5a8aa8 0%, #3d6985 100%); --timeline-line: #5a8aa8; --info-border: #3d6985; --page-bg: #f3f7fa; --section-bg: #ffffff; --info-bg: #eaf1f6; } /* ---------- Garden of Remembrance (florals) ---------- */ body.theme-garden { --hero-bg-image: url('/images/themes/garden.jpg?v=72ea38c132'); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(30,40,30,0.55) 0%, rgba(30,40,30,0.70) 100%); --hero-text: #fbf8ee; --hero-sub: #dcd8c4; --accent: #7a9362; --accent-dark: #4f6d3e; --accent-soft: rgba(122,147,98,0.18); --dot-bg: linear-gradient(135deg, #7a9362 0%, #4f6d3e 100%); --timeline-line: #7a9362; --info-border: #4f6d3e; --page-bg: #f4f7f0; --section-bg: #ffffff; --info-bg: #ebf1e3; } /* ---------- Celtic Hills (Irish landscape) ---------- * Pure CSS — layered radial-gradient hills against a misty green sky. * Replaces the previous celtic.jpg which had inappropriate imagery. */ body.theme-celtic { --hero-bg-image: /* Foreground hill silhouette (closest, darkest) */ radial-gradient(ellipse 70% 28% at 20% 105%, rgba(20,40,28,0.95) 0%, transparent 72%), radial-gradient(ellipse 80% 26% at 80% 108%, rgba(25,48,32,0.92) 0%, transparent 72%), /* Mid hill */ radial-gradient(ellipse 90% 24% at 50% 96%, rgba(40,68,46,0.80) 0%, transparent 72%), /* Distant hill (lighter, more atmospheric) */ radial-gradient(ellipse 110% 20% at 40% 88%, rgba(70,98,72,0.55) 0%, transparent 75%), /* Soft mist along horizon */ linear-gradient(180deg, transparent 60%, rgba(190,200,180,0.22) 78%, transparent 92%), /* Sky → meadow gradient */ linear-gradient(180deg, #6f8f76 0%, #557a64 35%, #3e5e4e 70%, #2a4a3a 100%); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(15,35,25,0.30) 0%, rgba(15,35,25,0.55) 100%); --hero-text: #f7f5e6; --hero-sub: #d8d2b4; --accent: #c9a850; --accent-dark: #927535; --accent-soft: rgba(201,168,80,0.18); --dot-bg: linear-gradient(135deg, #c9a850 0%, #927535 100%); --timeline-line: #c9a850; --info-border: #927535; --page-bg: #faf6e8; --section-bg: #fffbef; --info-bg: #f5edd5; } /* ---------- Evening Sky (twilight) ---------- */ body.theme-evening { --hero-bg-image: url('/images/themes/evening.jpg?v=e2a3b8f29a'); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(30,25,55,0.45) 0%, rgba(30,25,55,0.65) 100%); --hero-text: #f3eeff; --hero-sub: #d3c9eb; --accent: #8e7bc4; --accent-dark: #5e4f8e; --accent-soft: rgba(142,123,196,0.18); --dot-bg: linear-gradient(135deg, #8e7bc4 0%, #5e4f8e 100%); --timeline-line: #8e7bc4; --info-border: #5e4f8e; --page-bg: #f4f1fa; --section-bg: #fbf9ff; --info-bg: #ece5f5; } /* ---------- Linen & Stone (texture, neutral) ---------- */ body.theme-linen { --hero-bg-image: url('/images/themes/linen.jpg?v=d00d761c52'); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(40,35,28,0.50) 0%, rgba(40,35,28,0.65) 100%); --hero-text: #f7f1e6; --hero-sub: #d9cfb9; --accent: #a08864; --accent-dark: #6e5b3f; --accent-soft: rgba(160,136,100,0.18); --dot-bg: linear-gradient(135deg, #a08864 0%, #6e5b3f 100%); --timeline-line: #a08864; --info-border: #6e5b3f; --page-bg: #f7f2e9; --section-bg: #fdfaf2; --info-bg: #f0e8d6; } /* ---------- Hillside Mist (misty mountains) ---------- */ body.theme-hillside { --hero-bg-image: url('/images/themes/hillside.jpg?v=8e64374228'); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(25,40,40,0.50) 0%, rgba(25,40,40,0.65) 100%); --hero-text: #f0f4f0; --hero-sub: #c8d2c8; --accent: #6b8886; --accent-dark: #455d5b; --accent-soft: rgba(107,136,134,0.18); --dot-bg: linear-gradient(135deg, #6b8886 0%, #455d5b 100%); --timeline-line: #6b8886; --info-border: #455d5b; --page-bg: #eef3f1; --section-bg: #f8fbfa; --info-bg: #dde6e3; } /* ---------- Stardust (night sky, those we love become stars) ---------- * Pure CSS starfield — no jpg asset. Layered radial-gradients give the * impression of scattered stars over a deep navy → violet gradient with * a soft aurora glow rising from the horizon. */ body.theme-stardust { --hero-bg-image: radial-gradient(1.5px 1.5px at 8% 14%, rgba(255,255,255,0.90), transparent 55%), radial-gradient(1px 1px at 22% 28%, rgba(255,240,200,0.75), transparent 55%), radial-gradient(2px 2px at 36% 12%, rgba(255,255,255,0.95), transparent 55%), radial-gradient(1px 1px at 48% 32%, rgba(220,200,255,0.70), transparent 55%), radial-gradient(1.5px 1.5px at 62% 18%, rgba(255,255,255,0.85), transparent 55%), radial-gradient(1px 1px at 74% 40%, rgba(255,240,200,0.70), transparent 55%), radial-gradient(2px 2px at 88% 14%, rgba(255,255,255,0.90), transparent 55%), radial-gradient(1px 1px at 4% 52%, rgba(255,255,255,0.65), transparent 55%), radial-gradient(1.5px 1.5px at 28% 62%, rgba(255,240,200,0.75), transparent 55%), radial-gradient(1px 1px at 44% 78%, rgba(220,200,255,0.65), transparent 55%), radial-gradient(2px 2px at 66% 56%, rgba(255,255,255,0.85), transparent 55%), radial-gradient(1px 1px at 82% 72%, rgba(255,240,200,0.70), transparent 55%), radial-gradient(1.5px 1.5px at 94% 60%, rgba(255,255,255,0.85), transparent 55%), radial-gradient(1px 1px at 16% 86%, rgba(255,255,255,0.60), transparent 55%), radial-gradient(ellipse 80% 40% at 50% 110%, rgba(120,90,200,0.45) 0%, transparent 70%), linear-gradient(180deg, #0a0e26 0%, #1a1638 50%, #2a1f4a 100%); --hero-bg-pos: center; --hero-overlay: linear-gradient(180deg, rgba(10,14,38,0.10) 0%, rgba(10,14,38,0.35) 100%); --hero-text: #f6efd9; --hero-sub: #d6c084; --accent: #d4a853; --accent-dark: #8a6a2f; --accent-soft: rgba(212,168,83,0.18); --dot-bg: linear-gradient(135deg, #f0d77a 0%, #8a6a2f 100%); --timeline-line: #c89c4a; --info-border: #b8893f; --page-bg: #faf6ec; --section-bg: #fffaf0; --info-bg: #faf3df; } /* ---------- Cathedral Light (single candle) ---------- */ body.theme-cathedral { --hero-bg-image: url('/images/themes/cathedral.jpg?v=46add0f708'); --hero-bg-pos: left center; --hero-overlay: linear-gradient(90deg, rgba(20,15,8,0.30) 0%, rgba(20,15,8,0.65) 50%, rgba(20,15,8,0.75) 100%); --hero-text: #f4ead0; --hero-sub: #d9c79a; --accent: #d49b3a; --accent-dark: #8e631f; --accent-soft: rgba(212,155,58,0.18); --dot-bg: linear-gradient(135deg, #d49b3a 0%, #8e631f 100%); --timeline-line: #d49b3a; --info-border: #8e631f; --page-bg: #fbf3df; --section-bg: #fffaeb; --info-bg: #f5e7c4; } /* ============================================================ * Shared application — applies the variables above to the page * ============================================================ */ /* Hero with photo + overlay. The portrait, name, dates, and quick-actions sit on top via z-index because they are normal flow children. */ .memorial-hero { position: relative; background-image: var(--hero-overlay), var(--hero-bg-image); background-size: cover, cover; background-position: center, var(--hero-bg-pos); background-repeat: no-repeat, no-repeat; color: var(--hero-text); } .memorial-hero .memorial-name { color: var(--hero-text); text-shadow: 0 2px 12px rgba(0,0,0,0.35); } .memorial-hero .memorial-dates, .memorial-hero .memorial-quote { color: var(--hero-sub); text-shadow: 0 1px 8px rgba(0,0,0,0.30); } /* Soft halo behind the portrait so it always reads against the photo. */ .memorial-hero .memorial-photo { box-shadow: 0 0 0 4px rgba(255,255,255,0.10), 0 0 24px 6px rgba(0,0,0,0.25), 0 14px 40px rgba(0,0,0,0.35); } /* Timeline rail + dots */ .timeline::before { background: linear-gradient(180deg, transparent 0%, var(--timeline-line) 10%, var(--timeline-line) 90%, transparent 100%); } .timeline-item::before { background: var(--dot-bg); box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0,0,0,0.2); } .timeline-content:hover { border-color: var(--accent); } /* Section titles */ .section-title i { color: var(--accent); } /* Info boxes */ .info-box { border-left-color: var(--info-border); } .info-box h3 i { color: var(--info-border); } /* Hero quick-action chips: keep their light pill background, but tint icons */ .hero-quick-link i { color: var(--info-border); } /* Page chrome (--page-bg, --section-bg, --info-bg) is wired from the view page's own inline