:root{--ivory:#faf7f0;--paper:#fffdf9;--charcoal:#2b2620;--stone:#6f6a60;--gold:#ad8a4e;--gold-deep:#8a6c39;--navy:#212a3c;--green:#44594c;--line:#e6decb;--font-display:'Lora',Georgia,'Times New Roman',serif;--font-body:'Work Sans',Inter,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--charcoal);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--navy);letter-spacing:-.01em}h1{font-size:clamp(2.4rem,5vw,5rem);margin:.2em 0}h2{font-size:2rem}a{color:inherit}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;background:rgba(250,247,239,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.brand{font-family:var(--font-display);text-decoration:none;font-size:1.35rem;font-weight:bold}.brand span{display:block;font-family:var(--font-body);font-size:.72rem;color:var(--stone);font-weight:400;letter-spacing:.03em}nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}nav a{text-decoration:none;color:var(--charcoal);font-size:.95rem}.button{display:inline-block;background:var(--navy);color:white!important;padding:.82rem 1.15rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-weight:700}.button.ghost{background:transparent;color:var(--navy)!important;border:1px solid var(--navy)}.button.small{padding:.5rem .85rem}.hero{min-height:68vh;min-height:68dvh;display:grid;place-items:center;padding:6rem 5vw;background:linear-gradient(120deg,rgba(250,247,239,.85),rgba(255,253,248,.95)),url('/assets/images/hero-placeholder.svg');background-size:cover}.hero>div{max-width:850px;text-align:center}.lead{font-size:1.25rem;color:var(--stone);max-width:800px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-weight:700;font-size:.78rem}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.hero .actions{justify-content:center}.section,.page{padding:4rem 5vw;max-width:1180px;margin:0 auto}.narrow{max-width:560px}.muted{background:#f1eadf;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}.grid.two{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem}.card,.feature{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:1.5rem;box-shadow:0 10px 30px rgba(36,48,68,.04)}.features,.pricing,.cards,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}.feature{font-weight:700;color:var(--navy)}.price .amount{font-size:1.8rem;color:var(--gold);font-weight:800}.steps{display:grid;gap:1rem}.steps div{background:var(--paper);border-left:4px solid var(--gold);padding:1rem;border-radius:14px}.form{display:grid;gap:1rem}.form label{display:grid;gap:.35rem;font-weight:700}.form input,.form textarea,.form select,.search input{width:100%;padding:.9rem;border:1px solid var(--line);border-radius:12px;background:white;font:inherit}.form textarea{min-height:140px}.alert,.notice{background:#fff4e0;border:1px solid #e8c98a;padding:1rem;border-radius:14px}.site-footer{text-align:center;padding:3rem 5vw;border-top:1px solid var(--line);color:var(--stone)}.stat{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.5rem}.stat b{display:block;font-size:2rem;color:var(--gold)}.memorial-hero{display:grid;grid-template-columns:180px 1fr;gap:2rem;align-items:center;padding:4rem 5vw;background:var(--paper);border-bottom:1px solid var(--line)}.portrait{width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,#ded5c8,#fff);border:5px solid white;box-shadow:0 10px 30px rgba(0,0,0,.08)}.tabnav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}.tabnav a{padding:.5rem .75rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:white}.search{display:flex;gap:.5rem;margin:1.5rem 0}.search input{max-width:420px}@media(max-width:800px){.site-header,.grid.two,.memorial-hero{display:block}nav{margin-top:1rem}.hero{text-align:left}.hero .actions{justify-content:flex-start}.portrait{margin-bottom:1rem}}
/* Dashboard & management utility styles */
.status-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}.badge{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;font-size:.82rem;font-weight:700;color:var(--navy)}.badge.status-active,.badge.status-approved{background:#eaf2ec;border-color:var(--green);color:var(--green)}.badge.status-pending,.badge.status-pending_review,.badge.status-paid_awaiting_activation,.badge.status-pending_payment{background:#fff4e0;border-color:var(--gold);color:#8a6a2c}.badge.status-rejected,.badge.status-payment_failed,.badge.status-suspended{background:#fbeaea;border-color:#c97b7b;color:#a13f3f}.badge.status-draft,.badge.status-archived{background:#f1eadf;border-color:var(--stone);color:var(--stone)}
.hint{color:var(--stone);font-size:.92rem}
.plain-list{list-style:none;padding:0;display:grid;gap:.5rem}
.inline-form{display:flex;gap:.5rem;align-items:center;margin:.5rem 0}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;margin:1rem 0 2rem}
.media-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:.85rem;display:grid;gap:.5rem}
.media-thumb{width:100%;height:160px;object-fit:cover;border-radius:10px;background:#eee}
.portrait-preview .portrait-img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:5px solid white;box-shadow:0 10px 30px rgba(0,0,0,.08)}
details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.85rem 1.2rem;margin:1rem 0}
details summary{cursor:pointer;font-weight:700;color:var(--navy)}
.timeline-list,.tribute-list,.candle-list,.event-list{list-style:none;padding:0;display:grid;gap:1rem}
.timeline-list li,.tribute-list li,.event-list li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem}
.tribute-list blockquote{margin:.4rem 0;font-style:italic}
.family-tree-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:1rem 0}
.family-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem}
.qr-box{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:2rem;max-width:320px}
.qr-box img{max-width:100%}
table.admin-table{width:100%;border-collapse:collapse;margin:1rem 0}
table.admin-table th,table.admin-table td{border-bottom:1px solid var(--line);padding:.6rem .5rem;text-align:left;font-size:.92rem}
/* Accessibility & responsive additions */
.skip-link{position:absolute;left:-999px;top:auto;background:var(--navy);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 12px 0;z-index:100;font-weight:700;text-decoration:none}
.skip-link:focus{left:0;top:0}
a:focus-visible,button:focus-visible,.button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem}
.admin-table{width:100%;border-collapse:collapse;min-width:640px}
.admin-table th,.admin-table td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table th{font-family:var(--font-display);color:var(--navy)}
.admin-nav{margin-bottom:1.5rem}
@media(max-width:640px){
body{font-size:1.02rem}
.section,.page{padding:2.5rem 5vw}
.hero{padding:3.5rem 5vw;min-height:auto}
h1{font-size:clamp(2rem,9vw,3rem)}
.grid.two{gap:1.25rem}
.features,.pricing,.cards,.stats{grid-template-columns:1fr}
.tabnav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}
.tabnav a{flex:0 0 auto}
.search{flex-direction:column}
.search input{max-width:none}
.actions{flex-direction:column;align-items:stretch}
.actions .button{text-align:center}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* ---------------------------------------------------------------------
Memorial display customization: themes, portrait shapes, gallery
layouts, and text size. Deliberately restrained — a fixed set of
themes, no custom colours, no animation, no autoplay media.
------------------------------------------------------------------ */
/* Text size: scales the root font-size so all rem-based type grows
proportionally on memorial pages where "Large" has been chosen. */
html.font-large{font-size:19px}
/* Cover banner */
.cover-banner{width:100%;height:280px;background-size:cover;background-position:center;border-radius:0 0 24px 24px;border-bottom:1px solid var(--line)}
@media(max-width:640px){.cover-banner{height:160px;border-radius:0 0 16px 16px}}
/* Theme palettes — each theme defines a small set of custom properties
that the memorial view's existing components read instead of the
site defaults. No other colours may be chosen by memorial owners. */
.theme-classic_ivory{
--t-bg:var(--ivory); --t-panel:var(--paper); --t-heading:var(--navy);
--t-accent:var(--gold); --t-text:var(--charcoal); --t-line:var(--line); --t-button-text:#fff;
}
.theme-soft_stone{
--t-bg:#f1efe9; --t-panel:#ffffff; --t-heading:#3a3733;
--t-accent:#9c9389; --t-text:#3a3733; --t-line:#ddd6cc; --t-button-text:#fff;
}
.theme-garden_light{
--t-bg:#f3f7ee; --t-panel:#ffffff; --t-heading:#3f5240;
--t-accent:#7c9b6e; --t-text:#384034; --t-line:#dbe6d2; --t-button-text:#fff;
}
.theme-quiet_navy{
--t-bg:#1c2533; --t-panel:#243044; --t-heading:#f3eee3;
--t-accent:#c9a86a; --t-text:#e7e2d8; --t-line:#3a4458; --t-button-text:#1c2533;
}
.theme-heritage_gold{
--t-bg:#f6ecd9; --t-panel:#fff8ec; --t-heading:#6b4a1f;
--t-accent:#b9842f; --t-text:#4a3a23; --t-line:#e6d2ab; --t-button-text:#fff;
}
/* Apply the active theme's palette to the memorial view and its
components, leaving the global site header/footer untouched. */
.memorial-view{background:var(--t-bg);color:var(--t-text)}
.memorial-view h1,.memorial-view h2,.memorial-view h3{color:var(--t-heading)}
.memorial-view .eyebrow{color:var(--t-accent)}
.memorial-view .memorial-hero,
.memorial-view .card,.memorial-view .feature,.memorial-view .media-card,
.memorial-view details{background:var(--t-panel);border-color:var(--t-line)}
.memorial-view .tabnav a{background:var(--t-panel);border-color:var(--t-line);color:var(--t-text)}
.memorial-view .alert,.memorial-view .notice{border-color:var(--t-line)}
.memorial-view .button{background:var(--t-accent);color:var(--t-button-text)!important;border-color:var(--t-accent)}
.memorial-view .button.ghost{background:transparent;border-color:var(--t-heading);color:var(--t-heading)!important}
.memorial-view .form input,.memorial-view .form textarea,.memorial-view .form select{background:var(--t-panel);border-color:var(--t-line);color:var(--t-text)}
.memorial-view a{color:var(--t-heading)}
/* Portrait shape */
.shape-circle .portrait,.shape-circle .portrait-img{border-radius:50%}
.shape-oval .portrait,.shape-oval .portrait-img{border-radius:50%;width:170px;height:220px}
.shape-soft_rectangle .portrait,.shape-soft_rectangle .portrait-img{border-radius:22px;width:200px;height:200px}
/* Gallery layouts */
.gallery-grid .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
.gallery-masonry .media-grid{display:block;column-width:220px;column-gap:1.2rem}
.gallery-masonry .media-card{margin-bottom:1.2rem;break-inside:avoid}
.gallery-carousel .media-grid{display:flex;overflow-x:auto;gap:1.2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
.gallery-carousel .media-card{flex:0 0 240px;scroll-snap-align:start}
/* Cover photograph preview in the memorial edit screen */
.cover-preview-img{width:100%;max-width:420px;height:160px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
/* =============================================================
LANDING PAGE STYLES
============================================================= */
/* ---- Hero -------------------------------------------------- */
.lp-hero{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:3rem;
min-height:88vh;
padding:6rem 8vw 4rem;
background:
radial-gradient(ellipse 70% 60% at 80% 40%, rgba(173,138,78,.12) 0%, transparent 70%),
radial-gradient(ellipse 55% 55% at 20% 70%, rgba(68,89,76,.08) 0%, transparent 70%),
url('/assets/images/hero-art.png') center / cover no-repeat,
var(--ivory);
}
.lp-hero__inner{display:flex;flex-direction:column;gap:1.25rem}
.lp-hero__heading{
font-size:clamp(3rem,6vw,5.5rem);
line-height:1.05;
color:var(--navy);
margin:0;
}
.lp-hero__lead{font-size:1.18rem;color:var(--stone);max-width:520px;margin:0}
.lp-hero__sub{font-size:.82rem;color:var(--stone);letter-spacing:.06em;margin:0}
.lp-hero__deco{display:flex;justify-content:center;align-items:center}
.lp-hero__portrait-frame{width:100%;max-width:380px;height:auto;drop-shadow:0 20px 60px rgba(36,48,68,.12)}
.lp-eyebrow{
font-family:var(--font-display);
font-style:italic;
color:var(--gold);
font-size:1.05rem;
margin:0;
letter-spacing:.04em;
}
.lp-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.lp-actions--center{justify-content:center}
.lp-btn-primary{background:var(--navy);color:#fff!important;padding:.9rem 1.6rem;font-size:1rem}
.lp-btn-ghost{border-color:var(--navy);color:var(--navy)!important;padding:.9rem 1.6rem;font-size:1rem}
/* ---- Trust bar --------------------------------------------- */
.lp-trust-bar{
display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;
background:var(--navy);color:rgba(255,255,255,.75);
padding:.9rem 5vw;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
}
.lp-trust-sep{opacity:.4}
/* ---- About section ----------------------------------------- */
.lp-about-section{padding:5rem 8vw}
.lp-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.lp-section-label{
text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;
color:var(--gold);font-weight:700;margin:0 0 .5rem;
}
.lp-quote-card{
background:var(--navy);color:rgba(255,255,255,.9);
padding:3rem 2.5rem;border-radius:24px;
position:relative;overflow:hidden;
}
.lp-quote-mark{color:#fff;position:absolute;top:1.5rem;left:2rem;width:48px}
.lp-quote-text{
font-family:var(--font-display);font-size:1.5rem;line-height:1.45;
font-style:italic;margin:1.5rem 0 1rem;position:relative;
}
.lp-quote-attr{font-size:.85rem;letter-spacing:.08em;color:var(--gold);margin:0}
.lp-quote-deco{
position:absolute;bottom:-40px;right:-40px;
width:160px;height:160px;border-radius:50%;
background:rgba(185,150,90,.12);
}
/* ---- Feature grid ------------------------------------------ */
.lp-features-section{background:var(--paper);padding:5rem 8vw}
.lp-feature-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:1.25rem;
margin-top:2.5rem;
}
.lp-feature-card{
background:var(--ivory);border:1px solid var(--line);border-radius:20px;
padding:1.5rem;transition:box-shadow .2s,transform .2s;
}
.lp-feature-card:hover{box-shadow:0 12px 36px rgba(36,48,68,.09);transform:translateY(-3px)}
.lp-feature-icon{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-bottom:1rem;border-radius:12px;background:rgba(173,138,78,.12);color:var(--gold-deep)}
.lp-feature-icon svg{width:1.4rem;height:1.4rem}
.lp-preview-tab-icon{display:inline-flex;width:1rem;height:1rem;margin-right:.4rem;vertical-align:-2px;color:var(--gold-deep)}
.lp-preview-tab-icon svg{width:100%;height:100%}
.lp-feature-title{font-size:1rem;color:var(--navy);margin:0 0 .4rem;font-family:var(--font-display)}
.lp-feature-desc{font-size:.9rem;color:var(--stone);margin:0;line-height:1.55}
/* ---- How it works ------------------------------------------ */
.lp-steps-section{background:var(--ivory)}
.lp-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:1rem;margin-top:2.5rem}
.lp-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.lp-step-num{
width:3rem;height:3rem;border-radius:50%;
background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-size:1.35rem;font-weight:700;flex-shrink:0;
}
.lp-step h3{color:var(--navy);font-size:1.1rem;margin:0 0 .4rem}
.lp-step p{color:var(--stone);font-size:.92rem;margin:0;max-width:260px}
.lp-step-line{width:2px;background:var(--gold);min-height:60px;margin-top:1.5rem;opacity:.45;align-self:start}
/* ---- Memorial preview card --------------------------------- */
.lp-preview-section{padding:5rem 8vw}
.lp-memorial-preview{
background:var(--paper);border:1px solid var(--line);border-radius:28px;
overflow:hidden;box-shadow:0 20px 60px rgba(36,48,68,.08);
max-width:900px;margin:2.5rem auto 0;
}
.lp-preview-hero{
display:flex;align-items:center;gap:2rem;
background:linear-gradient(135deg,var(--navy) 0%,#2d3f5c 100%);
padding:2.5rem;
}
.lp-preview-portrait{
width:100px;height:100px;border-radius:50%;
background:rgba(255,255,255,.15);border:3px solid rgba(185,150,90,.6);
flex-shrink:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
}
.lp-preview-portrait svg{width:80px;height:80px}
.lp-preview-name{font-family:var(--font-display);font-size:1.7rem;color:#fff;margin:0 0 .2rem;font-weight:700}
.lp-preview-dates{color:var(--gold);font-size:.9rem;margin:0 0 .5rem}
.lp-preview-line{color:rgba(255,255,255,.7);font-style:italic;font-size:.95rem;margin:0}
.lp-preview-tabs{
display:flex;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.lp-preview-tab{
padding:.75rem 1rem;font-size:.82rem;white-space:nowrap;
border-right:1px solid var(--line);color:var(--stone);cursor:default;
}
.lp-preview-tab:first-child{color:var(--navy);font-weight:700;border-bottom:2px solid var(--gold)}
.lp-preview-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem}
.lp-preview-col h4{color:var(--navy);margin:0 0 .75rem;font-size:1rem}
.lp-preview-col p{color:var(--stone);font-size:.9rem;line-height:1.6;margin:0 0 1rem}
.lp-preview-link{color:var(--gold);font-size:.9rem;text-decoration:none;font-weight:600}
.lp-preview-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.lp-preview-photo{height:80px;background:linear-gradient(135deg,#e4dccd,#f1ead9);border-radius:10px}
/* ---- Themes preview --------------------------------------- */
.lp-themes-section{background:var(--paper);padding:5rem 8vw}
.lp-themes{
display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;
margin-top:2rem;
}
.lp-theme-swatch{
width:180px;border-radius:18px;padding:1.25rem;
box-shadow:0 6px 24px rgba(36,48,68,.08);transition:transform .2s;
display:flex;flex-direction:column;gap:.75rem;
}
.lp-theme-swatch:hover{transform:translateY(-4px)}
.lp-theme-panel{
border-radius:12px;padding:1rem;
display:flex;align-items:center;gap:.75rem;
border:1px solid transparent;
}
.lp-theme-avatar{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.12);border:2px solid;flex-shrink:0}
.lp-theme-line{height:8px;border-radius:4px}
.lp-theme-label{font-family:var(--font-display);font-size:.88rem;font-weight:700;text-align:center;margin:0}
/* ---- Pricing ---------------------------------------------- */
.lp-pricing-section{background:var(--ivory);padding:5rem 0}
.lp-pricing-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1.25rem;margin-top:2.5rem;
}
.lp-plan-card{
background:var(--paper);border:1px solid var(--line);border-radius:22px;
padding:2rem 1.5rem;text-align:center;
display:flex;flex-direction:column;gap:.75rem;align-items:center;
}
.lp-plan-card--featured{
background:var(--navy);border-color:var(--navy);
}
.lp-plan-card--featured .lp-plan-name,
.lp-plan-card--featured .lp-plan-storage,
.lp-plan-card--featured .lp-plan-desc{color:rgba(255,255,255,.8)}
.lp-plan-card--featured .lp-plan-amount{color:var(--gold)}
.lp-plan-name{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--stone);margin:0;font-weight:700}
.lp-plan-amount{font-family:var(--font-display);font-size:2.25rem;color:var(--gold);font-weight:800}
.lp-plan-storage{font-size:.88rem;color:var(--stone);margin:0}
.lp-plan-desc{font-size:.85rem;color:var(--stone);margin:0}
/* ---- Sacred ground ---------------------------------------- */
.lp-sacred-section{
background:linear-gradient(135deg,var(--green) 0%,#3a5042 100%);
color:#fff;padding:6rem 8vw;text-align:center;
}
.lp-sacred-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.lp-sacred-icon{color:rgba(255,255,255,.8)}
.lp-sacred-section h2{color:#fff;font-size:2.25rem;margin:0}
.lp-sacred-section p{color:rgba(255,255,255,.8);font-size:1.05rem;margin:0}
.lp-sacred-pledges{
display:grid;grid-template-columns:1fr 1fr;gap:1rem;
margin:1rem 0;text-align:left;
}
.lp-pledge{
background:rgba(255,255,255,.1);border-radius:16px;padding:1.25rem;
font-size:.92rem;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.12);
}
.lp-pledge strong{color:#fff;display:block;margin-bottom:.25rem}
.lp-sacred-section .button{background:#fff;color:var(--navy)!important;border:0}
.lp-sacred-section .button:hover{background:var(--ivory)}
/* ---- Final CTA -------------------------------------------- */
.lp-cta-section{
background:
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(185,150,90,.12) 0%, transparent 70%),
var(--paper);
padding:6rem 8vw;text-align:center;border-top:1px solid var(--line);
}
.lp-cta-inner{max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.lp-cta-section h2{font-size:2.4rem;color:var(--navy);margin:0}
.lp-cta-section p{color:var(--stone);margin:0;font-size:1.05rem}
/* ---- Responsive ------------------------------------------- */
@media(max-width:900px){
.lp-hero{grid-template-columns:1fr;min-height:auto;padding:4rem 6vw}
.lp-hero__deco{display:none}
.lp-about-grid{grid-template-columns:1fr}
.lp-steps{grid-template-columns:1fr;gap:.75rem}
.lp-step-line{width:60px;height:2px;min-height:0;margin:0 auto}
.lp-preview-body{grid-template-columns:1fr}
.lp-sacred-pledges{grid-template-columns:1fr}
}
@media(max-width:640px){
.lp-hero{padding:3rem 5vw 2.5rem}
.lp-about-section,.lp-features-section,.lp-preview-section,.lp-themes-section,.lp-cta-section{padding:3.5rem 5vw}
.lp-feature-grid{grid-template-columns:1fr}
.lp-themes{gap:.75rem}
.lp-theme-swatch{width:calc(50% - .5rem)}
.lp-pricing-grid{grid-template-columns:1fr}
.lp-sacred-section{padding:3.5rem 5vw}
}
/* =============================================================
ADMIN-MANAGED HEADER AND FOOTER
These components are configured in the admin panel. Their
colours and spacing are written inline by the layout; the
structural rules live here.
============================================================= */
/* ---- Announcement bar --------------------------------------- */
.announcement-bar{
display:flex;align-items:center;justify-content:center;gap:1rem;
padding:.6rem 5vw;font-size:.9rem;text-align:center;
}
.announcement-bar p{margin:0}
.announcement-bar a{text-decoration:underline}
.announcement-bar__close{
background:none;border:0;color:inherit;font-size:1.4rem;line-height:1;
cursor:pointer;padding:0 .25rem;opacity:.8;
}
.announcement-bar__close:hover{opacity:1}
/* ---- Design preview banner ---------------------------------- */
.preview-banner{
background:#fff4e0;border-bottom:1px solid #e8c98a;color:#7d5c1f;
padding:.6rem 5vw;font-size:.88rem;text-align:center;font-weight:600;
}
.preview-banner a{margin-left:.5rem}
/* ---- Header ------------------------------------------------- */
.site-header{top:0;z-index:20}
.brand{display:flex;flex-direction:column;gap:.15rem}
.brand .site-logo{margin-bottom:.15rem}
.footer-logo{margin:0 auto;max-height:56px}
.nav-toggle{
display:none;background:none;border:1px solid currentColor;border-radius:10px;
color:inherit;font-size:1.2rem;line-height:1;padding:.45rem .7rem;cursor:pointer;
}
.header-search{display:flex;gap:.4rem;align-items:center}
.header-search input{
padding:.45rem .6rem;border:1px solid var(--line);border-radius:999px;
/* 1rem, not .9rem: iOS Safari zooms the whole page in whenever a field
smaller than 16px receives focus, and the visitor is then left pinching
their way back out. Every input on this site stays at 16px or above. */
font:inherit;font-size:1rem;max-width:11rem;background:#fff;
}
/* ---- Dropdown menus ----------------------------------------- */
.nav-dropdown{position:relative}
.nav-dropdown__caret{font-size:.7rem;margin-left:.15rem}
.nav-dropdown__menu{
position:absolute;top:100%;left:0;min-width:12rem;margin:.35rem 0 0;padding:.4rem;
list-style:none;background:var(--paper);border:1px solid var(--line);
border-radius:14px;box-shadow:0 12px 36px rgba(36,48,68,.12);
opacity:0;visibility:hidden;transform:translateY(-4px);
transition:opacity .12s,transform .12s,visibility .12s;z-index:30;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown__menu li{margin:0}
.nav-dropdown__menu a{display:block;padding:.5rem .7rem;border-radius:10px;text-decoration:none;font-size:.92rem}
.nav-dropdown__menu a:hover,.nav-dropdown__menu a:focus-visible{background:var(--am-surface-muted,#f1eadf)}
/* ---- Footer ------------------------------------------------- */
.footer-intro{max-width:60ch;margin-left:auto;margin-right:auto}
.site-footer[style*="text-align:left"] .footer-intro,
.site-footer[style*="text-align: left"] .footer-intro{margin-left:0}
.footer-columns{
display:grid;gap:2rem;max-width:var(--am-content-width,1180px);
margin:2rem auto;text-align:left;
}
.footer-columns--two{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer-columns--three{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer-column h2{font-size:1rem;margin:0 0 .6rem}
.footer-column .plain-list a{text-decoration:none}
.footer-column .plain-list a:hover{text-decoration:underline}
.footer-invitation{max-width:52ch;margin:2rem auto}
.footer-invitation h2{font-size:1.25rem;margin:0 0 .4rem}
.footer-social{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.25rem 0}
.footer-legal{margin:1.25rem 0 .5rem}
.footer-copyright{font-size:.85rem;opacity:.85;margin:0}
/* ---- Small screens ------------------------------------------ */
@media(max-width:800px){
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.nav-toggle{display:inline-block}
nav.is-collapsible{flex-basis:100%}
nav.is-collapsible.is-collapsed{display:none}
nav.is-collapsible.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:1rem}
.nav-dropdown{width:100%}
.nav-dropdown__menu{
position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;border:0;padding:0 0 0 1rem;margin:.25rem 0 0;
}
.header-search{width:100%}
.header-search input{max-width:none;flex:1 1 auto}
.footer-columns{text-align:inherit}
}
@media(prefers-reduced-motion:reduce){
.nav-dropdown__menu{transition:none}
}
/* =============================================================
PAGE SECTIONS
Sections built in the admin panel. Every class here is chosen
from a fixed list in PHP — no stored value ever becomes a
class name directly.
============================================================= */
.ps{position:relative;width:100%}
.ps__inner{position:relative;z-index:1;margin:0 auto;padding-left:var(--am-page-pad-x,5vw);padding-right:var(--am-page-pad-x,5vw)}
.ps__overlay{position:absolute;inset:0;z-index:0}
.ps__overlay--dark{background:#000}
.ps__overlay--light{background:#fff}
.ps__overlay--primary{background:var(--navy)}
/* Width */
.ps-w--contained .ps__inner{max-width:var(--am-content-width,1180px)}
.ps-w--narrow .ps__inner{max-width:var(--am-content-narrow,560px)}
.ps-w--full .ps__inner{max-width:none}
/* Alignment */
.ps-a--left{text-align:left}
.ps-a--center{text-align:center}
.ps-a--right{text-align:right}
.ps-a--center .actions{justify-content:center}
.ps-a--right .actions{justify-content:flex-end}
/* Spacing */
.ps-st--none .ps__inner{padding-top:0}
.ps-st--small .ps__inner{padding-top:1.5rem}
.ps-st--medium .ps__inner{padding-top:var(--am-section-space,4rem)}
.ps-st--large .ps__inner{padding-top:calc(var(--am-section-space,4rem) * 1.75)}
.ps-sb--none .ps__inner{padding-bottom:0}
.ps-sb--small .ps__inner{padding-bottom:1.5rem}
.ps-sb--medium .ps__inner{padding-bottom:var(--am-section-space,4rem)}
.ps-sb--large .ps__inner{padding-bottom:calc(var(--am-section-space,4rem) * 1.75)}
/* Backgrounds */
.ps-bg--none{background:transparent}
.ps-bg--surface{background:var(--paper)}
.ps-bg--muted{background:var(--am-surface-muted,#f1eadf)}
.ps-bg--primary{background:var(--navy);color:#fff}
.ps-bg--secondary{background:var(--green);color:#fff}
.ps-bg--primary h1,.ps-bg--primary h2,.ps-bg--primary h3,.ps-bg--primary h4,
.ps-bg--secondary h1,.ps-bg--secondary h2,.ps-bg--secondary h3,.ps-bg--secondary h4{color:#fff}
.ps-bg--primary a,.ps-bg--secondary a{color:#fff}
.ps-bg--primary .lead,.ps-bg--secondary .lead,
.ps-bg--primary .hint,.ps-bg--secondary .hint{color:rgba(255,255,255,.82)}
.ps-bg--image{background-size:cover;background-position:center;color:#fff}
.ps-bg--image h1,.ps-bg--image h2,.ps-bg--image h3,.ps-bg--image h4,
.ps-bg--image .lead,.ps-bg--image a{color:#fff}
/* Hiding by screen size */
@media(min-width:901px){.ps-hide-desktop{display:none}}
@media(min-width:641px) and (max-width:900px){.ps-hide-tablet{display:none}}
@media(max-width:640px){.ps-hide-mobile{display:none}}
/* Shared bits */
.ps-heading{margin-top:0}
.ps-intro{max-width:62ch}
.ps-a--center .ps-intro{margin-left:auto;margin-right:auto}
/* Prose — the only place stored markup is printed, already reduced
to safe formatting tags by PageSections::richText(). */
.ps-prose{max-width:70ch}
.ps-a--center .ps-prose{margin-left:auto;margin-right:auto;text-align:left}
.ps-prose > :first-child{margin-top:0}
.ps-prose > :last-child{margin-bottom:0}
.ps-prose h2,.ps-prose h3,.ps-prose h4{margin:1.6em 0 .5em}
.ps-prose p{margin:0 0 1em}
.ps-prose ul,.ps-prose ol{margin:0 0 1em;padding-left:1.4em}
.ps-prose li{margin-bottom:.4em}
.ps-prose blockquote{
margin:1.5em 0;padding:.75rem 0 .75rem 1.25rem;
border-left:3px solid var(--gold);font-style:italic;color:var(--stone);
}
.ps-prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.ps-prose a{text-decoration:underline}
/* Hero */
.ps-hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.ps-hero__words{display:flex;flex-direction:column;gap:1rem}
.ps-hero__heading{margin:0}
.ps-hero__picture img{width:100%;height:auto;border-radius:var(--am-radius-lg,24px);display:block}
.ps--hero.ps-a--center .ps-hero{grid-template-columns:1fr;text-align:center;justify-items:center}
.ps--hero.ps-a--center .ps-hero__picture{max-width:520px}
/* Picture and words */
.ps-image-text{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.ps-image-text--right .ps-image-text__picture{order:2}
.ps-image-text__picture img{width:100%;height:auto;display:block}
.ps-shape--rounded{border-radius:var(--am-radius-lg,24px)}
.ps-shape--square{border-radius:0}
.ps-shape--circle{border-radius:50%;aspect-ratio:1/1;object-fit:cover}
/* Columns */
.ps-columns{display:grid;gap:2rem;margin-top:1.5rem}
.ps-columns--2{grid-template-columns:repeat(2,1fr)}
.ps-columns--3{grid-template-columns:repeat(3,1fr)}
.ps-columns--4{grid-template-columns:repeat(4,1fr)}
.ps-column h3{margin-top:0}
/* Features */
.ps-features{display:grid;gap:1.25rem;margin-top:2rem}
.ps-features--2{grid-template-columns:repeat(2,1fr)}
.ps-features--3{grid-template-columns:repeat(3,1fr)}
.ps-features--4{grid-template-columns:repeat(4,1fr)}
.ps-feature{
background:var(--paper);border:1px solid var(--line);
border-radius:var(--am-radius-md,20px);padding:1.5rem;
}
.ps-bg--surface .ps-feature{background:var(--ivory)}
.ps-feature__image{width:2.75rem;height:2.75rem;object-fit:contain;margin-bottom:1rem;display:block}
.ps-a--center .ps-feature__image{margin-left:auto;margin-right:auto}
.ps-feature__heading{margin:0 0 .4rem;font-size:1.05rem}
.ps-feature__heading a{text-decoration:none}
.ps-feature__heading a:hover{text-decoration:underline}
.ps-feature__body{margin:0;color:var(--stone);font-size:.94rem}
/* Call to action */
.ps-cta{display:flex;flex-direction:column;gap:1rem;max-width:60ch}
.ps-a--center .ps-cta{margin:0 auto;align-items:center}
.ps-a--right .ps-cta{margin-left:auto;align-items:flex-end}
.ps-cta__note{margin:0}
/* Spacer and divider */
.ps-divider{border:0;border-top:1px solid var(--line)}
.ps-bg--primary .ps-divider,.ps-bg--secondary .ps-divider{border-top-color:rgba(255,255,255,.25)}
@media(max-width:900px){
.ps-hero,.ps-image-text{grid-template-columns:1fr;gap:2rem}
.ps-image-text--right .ps-image-text__picture{order:0}
.ps-columns--3,.ps-columns--4,.ps-features--3,.ps-features--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.ps-columns--2,.ps-columns--3,.ps-columns--4,
.ps-features--2,.ps-features--3,.ps-features--4{grid-template-columns:1fr}
}
/* ===========================================================================
Search & AI Visibility — the visible parts
---------------------------------------------------------------------------
Everything below is CONTENT a visitor reads: answers, takeaways, definitions,
comparison tables, bylines, sources. None of it is hidden, collapsed to zero
height, or coloured to disappear. That is not a styling preference — content
written for machines and hidden from people is precisely what this module
refuses to produce, and a stylesheet is the easiest place to break that rule
by accident.
Colours come from the design tokens so these blocks follow whatever palette
the admin panel has published.
=========================================================================== */
.breadcrumbs { padding: 0.75rem 5vw 0; font-size: 0.9rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35rem; opacity: 0.6; }
.breadcrumbs [aria-current="page"] { opacity: 0.75; }
/* --- Answers ------------------------------------------------------------ */
.ps-answer__question { margin-top: 0; }
.ps-answer__direct { font-size: 1.15rem; line-height: 1.6; margin-bottom: 1rem; }
.ps-answer__detail { margin-bottom: 1rem; }
.ps-answer__sources h3,
.ps-answer__related h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.ps-answer__reviewed,
.seo-byline {
font-size: 0.9rem; opacity: 0.85; margin-top: 1.25rem;
padding-top: 0.75rem; border-top: 1px solid var(--color-border, #e6decb);
}
.ps-answer__missing {
padding: 0.75rem 1rem; border: 1px dashed var(--color-border, #e6decb); border-radius: 0.5rem;
}
.ps-faq__item + .ps-faq__item { margin-top: 1.25rem; }
.ps-faq__question { margin: 0 0 0.35rem; font-size: 1.1rem; }
.ps-faq--accordion .ps-faq__item {
border: 1px solid var(--color-border, #e6decb); border-radius: 0.5rem; padding: 0.75rem 1rem;
}
.ps-faq--accordion summary { cursor: pointer; }
.ps-faq__answer p { margin: 0; }
.ps-takeaways, .ps-summary, .seo-summary {
border-left: 3px solid var(--color-primary, #212a3c);
padding: 0.75rem 0 0.75rem 1rem; margin: 1.5rem 0;
}
.ps-takeaways__heading, .ps-summary__heading { margin: 0 0 0.5rem; font-size: 1.05rem; }
.ps-takeaways__list { margin: 0; padding-left: 1.15rem; }
.ps-takeaways__list li + li { margin-top: 0.35rem; }
.ps-definition dl, .seo-definitions dl { margin: 0; }
.ps-definition__term { font-weight: 600; font-size: 1.1rem; }
.ps-definition__also { opacity: 0.8; font-size: 0.9rem; margin: 0 0 0.35rem; }
.ps-definition__body, .ps-definition__example { margin: 0 0 0.5rem; }
.ps-howto__steps { padding-left: 1.25rem; }
.ps-howto__step + .ps-howto__step { margin-top: 1.25rem; }
.ps-howto__step-name { margin: 0 0 0.35rem; font-size: 1.05rem; }
.ps-howto__image { max-width: 100%; height: auto; border-radius: 0.5rem; margin-top: 0.5rem; }
.ps-howto__time { font-size: 0.9rem; opacity: 0.8; }
.ps-comparison__table { width: 100%; border-collapse: collapse; }
.ps-comparison__table caption { text-align: left; padding-bottom: 0.5rem; opacity: 0.85; font-size: 0.9rem; }
.ps-comparison__table th, .ps-comparison__table td {
border: 1px solid var(--color-border, #e6decb); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top;
}
.ps-comparison__table thead th { background: rgba(0, 0, 0, 0.03); }
.ps-proscons { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .ps-proscons { grid-template-columns: 1fr 1fr; } }
.ps-proscons__side h3 { margin-top: 0; font-size: 1.05rem; }
.ps-proscons__empty { opacity: 0.7; font-style: italic; }
.ps-related__list, .answer-page__related ul { padding-left: 1.15rem; }
.ps-facts__list, .seo-facts dl { margin: 0; }
.ps-facts__item { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border, #e6decb); }
.ps-facts__item dt { font-weight: 600; }
.ps-facts__item dd { margin: 0.15rem 0 0; }
.ps-facts__value { font-size: 1.1rem; }
.ps-facts__source, .ps-facts__origin, .seo-facts__origin { font-size: 0.85rem; opacity: 0.8; }
.ps-facts__own { font-style: italic; }
.ps-sources__list, .seo-sources ol { padding-left: 1.25rem; }
.ps-sources__publisher, .ps-sources__date { opacity: 0.8; font-size: 0.9rem; margin-left: 0.35rem; }
/* --- The citation block under a page ------------------------------------- */
.seo-content { margin-top: 2.5rem; padding: 0 5vw 2rem; }
.seo-content h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.seo-facts dt, .seo-definitions dt { font-weight: 600; margin-top: 0.5rem; }
.seo-facts dd, .seo-definitions dd { margin: 0 0 0.35rem; }
.seo-documents li, .seo-sources li { margin-bottom: 0.25rem; }
/* --- Answer and author pages ---------------------------------------------- */
.answer-page__direct { font-size: 1.2rem; line-height: 1.6; }
.answer-page__sources h2, .answer-page__related h2 { font-size: 1.05rem; }
.answers-group + .answers-group { margin-top: 2rem; }
.author-page__header { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.author-page__photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.author-page__bio { margin: 1rem 0; }
/* ===========================================================================
Small-screen safety net
These four rules are last on purpose. They are not a theme and they are not
a layout — they are the floor beneath every other rule in this file, the
things that must hold true on a 360px phone no matter what a memorial owner
typed or which section a page is built from. They deliberately carry the
lowest possible specificity so that any component above may still overrule
them; nothing here is meant to win an argument, only to catch a fall.
=========================================================================== */
/* A page must never scroll sideways.
Grief does not proofread. Families paste long web addresses into tributes,
write a surname with no spaces, quote a reference number that runs on. Any
one of those pushes an unbreakable word past the edge of a narrow screen,
and the whole page then slides left and right under the thumb — every
heading, every button, the menu, all of it. Breaking a long word mid-way is
the lesser harm by a wide margin. `break-word` only intervenes when a word
genuinely cannot fit; ordinary prose is untouched. */
body{overflow-wrap:break-word}
/* An image must never be wider than the space it was given.
Rich text strips ![]()
entirely and every gallery image is sized by its own
component, so nothing on the site relies on this today. It is here for the
image that arrives tomorrow — a new section type, a portrait uploaded at
4000px, an ![]()
added to the allowed tag list by someone who has no reason
to suspect that the stylesheet was silently depending on its absence. The
`height:auto` is the half people forget: without it, an image constrained
in width keeps its old height and distorts. */
img{max-width:100%;height:auto}
/* A control must be big enough to hit.
`.button.small` was about 36px tall. WCAG 2.5.5 asks for 44px, and so does
every phone in circulation, because a fingertip is roughly that wide and
does not land where its owner is looking. These buttons sit in moderation
rows and admin action lists, side by side and a few pixels apart, which is
exactly the arrangement where a near miss presses the wrong one. Padding
alone would not do it — `min-height` with centred content grows the target
without changing how the button looks at rest. */
.button.small{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Note: the `dvh` hero fix is NOT here. It lives on the `.hero` rule at the
top of this file, because the 640px block already sets `min-height:auto`
and a second `.hero` rule down here would out-order it and undo that. */