/* Evergreen — the Grave Finder 360 product shell. Layout, type and components live here and are the same for every cemetery. A cemetery supplies only --skin (its colour) and its mark; those arrive as inline custom properties on from CEMETERIES in app.py. Never add a per-cemetery rule to this file — that is how a product turns back into a bespoke site. */ :root{ /* 360 Eternal family */ --evergreen:#0E4D3A; --paper:#F6F4EE; --parchment:#F5F0E3; --ink:#22302A; --muted:#5E6B64; --faint:#8B948D; --rule:#E2E0D6; --brass:#A8802B; /* skin defaults, overridden inline per cemetery */ --skin:var(--evergreen); --skin-ink:#F5F0E3; --skin-soft:#A9C6B8; --measure:64ch; --tap:44px; /* minimum touch target — unsteady hands */ --radius:9px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh;min-height:100dvh;display:flex;flex-direction:column; background:var(--paper); color:var(--ink); font:400 17px/1.6 'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;text-wrap:balance;font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:500} p{margin:0} img{max-width:100%;display:block} a{color:inherit} /* Every interactive thing is reachable and visibly focusable. */ a,button{min-height:var(--tap)} :focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px} .skip{ position:absolute;left:-9999px;top:0;background:var(--skin);color:var(--skin-ink); padding:12px 18px;z-index:100;border-radius:0 0 var(--radius) 0 } .skip:focus{left:0} .demo-flag{ background:#8B5E10;color:#FFF6E2;text-align:center; padding:11px 18px;font-size:13.5px;line-height:1.5 } .demo-flag b{font-weight:600} /* ---------- cemetery bar (skinned) ---------- */ .topbar{background:var(--skin);color:var(--skin-ink)} .topbar-in{ max-width:1180px;margin:0 auto;padding:14px 22px; display:flex;align-items:center;gap:18px;flex-wrap:wrap } .mark{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0} .mark img{ height:34px;width:auto;flex:none; background:#fff;border-radius:6px;padding:6px 9px /* their mark is burgundy ink on a burgundy bar; give it a white ground rather than knocking their colour out */ } .mark .txt .n{font-family:'Newsreader',Georgia,serif;font-size:20px;line-height:1.1} .mark .txt .s{ font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--skin-soft); margin-top:4px } .powered{ margin-left:auto;display:flex;align-items:center;gap:8px; padding-left:18px;border-left:1px solid rgba(255,255,255,.24); font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--skin-soft); text-decoration:none } .powered b{display:block;font-size:11.5px;letter-spacing:.08em;color:var(--skin-ink);margin-top:2px} /* ---------- header photo ---------- */ .graveside{position:relative;height:210px;overflow:hidden;background:var(--skin)} .graveside img{width:100%;height:100%;object-fit:cover;object-position:center 34%} .graveside::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,42,32,.52) 0%,rgba(20,42,32,.10) 46%,rgba(246,244,238,.96) 100%) } .graveside .label{ position:absolute;left:24px;top:16px;z-index:2;color:#EAF1ED; font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; display:flex;align-items:center;gap:9px;text-shadow:0 1px 3px rgba(0,0,0,.45) } .graveside .label i{width:7px;height:7px;border-radius:50%;background:var(--brass);flex:none} /* ---------- spread ---------- */ .spread{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.06fr .94fr} .col-person{padding:0 0 36px;border-right:1px solid var(--rule);min-width:0} .col-living{padding:30px 26px 40px;background:var(--parchment);min-width:0} .portrait,.monogram{ width:172px;height:214px;margin:-104px auto 0;position:relative;z-index:3; border:5px solid #fff;border-radius:5px;box-shadow:0 10px 26px rgba(14,44,32,.26) } .portrait{object-fit:cover;object-position:center} .portrait-wrap{margin:0;display:contents} .hero-pair{ display:flex;gap:16px;justify-content:center;align-items:flex-start; margin:-104px 20px 0;position:relative;z-index:3 } .hero-pair figure{margin:0;flex:0 1 172px;min-width:0} .hero-pair .portrait{margin:0;width:100%} .hero-pair figcaption{ text-align:center;font-size:11.5px;color:var(--faint);margin-top:9px;font-style:italic } .portrait-wrap .portrait{background:#EFEDE6} /* letterboxing when fit is contain */ .portrait-wrap figcaption{ text-align:center;font-size:11.5px;color:var(--faint);margin:9px 30px 0; font-style:italic } .monogram{ background:var(--skin);color:var(--skin-ink);display:flex;align-items:center;justify-content:center; font-family:'Newsreader',Georgia,serif;font-size:52px;letter-spacing:.04em } .pname{font-size:31px;line-height:1.15;text-align:center;margin:20px 26px 0} .pdates{ text-align:center;font-family:'Newsreader',Georgia,serif;font-size:16px;color:var(--muted); margin-top:9px;font-variant-numeric:tabular-nums } .plot{ margin:24px 30px 0;background:#fff;border:1px solid var(--rule); border-radius:var(--radius);padding:14px 16px;text-align:center } .plot dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 7px} /* sized to sit on one line where the plot string allows, balanced when it can't */ .plot dd{margin:0;font-size:15px;line-height:1.5;text-wrap:balance} .acts{margin:18px 30px 0;display:flex;flex-direction:column;gap:10px} .btn{ display:flex;align-items:center;justify-content:center;gap:10px; padding:14px 18px;border-radius:var(--radius);text-decoration:none; font-weight:600;font-size:15px;border:1.5px solid transparent } .btn-primary{background:var(--skin);color:var(--skin-ink)} .btn-outline{border-color:var(--skin);color:var(--skin)} .btn-quiet{border-color:var(--brass);color:var(--brass)} .btn svg{width:19px;height:19px;flex:none} .section-label{ font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint); margin:0 0 14px } .contribute{margin:10px 30px 0} /* ---------- guest book ---------- */ .gb-head{display:flex;align-items:baseline;gap:11px;margin-bottom:5px;flex-wrap:wrap} .gb-head h2{font-size:22px} .gb-head .count{font-size:13px;color:var(--faint)} .gb-note{font-size:14px;color:var(--faint);margin-bottom:18px} .entry{background:#fff;border:1px solid #E6E1D0;border-radius:var(--radius);padding:15px 17px;margin-bottom:11px} .entry .msg{font-size:15px;line-height:1.62} .entry .who{font-size:12.5px;font-weight:600;color:var(--brass);margin-top:10px} .entry .who span{font-weight:400;color:var(--faint)} .gb-empty{ border:1.5px dashed #C3BC9E;border-radius:var(--radius);padding:20px; font-size:15px;color:var(--muted);text-align:center;margin-bottom:12px } .remote{margin-top:28px;border-top:1px solid #E2DCC6;padding-top:22px} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tile{ background:#fff;border:1px solid #E6E1D0;border-radius:var(--radius);padding:14px 15px; text-decoration:none;display:block } button.tile{ font:inherit;text-align:left;width:100%;cursor:pointer; border:1px solid #E6E1D0;background:#fff;color:inherit } button.tile:hover{border-color:var(--brass)} .tile b{display:block;font-size:14px} .tile span{display:block;color:var(--faint);font-size:12px;margin-top:4px} /* quiet utilities — present, but never competing with the reason someone came */ .utils{ margin-top:24px;padding-top:18px;border-top:1px solid #E2DCC6; display:flex;gap:22px;flex-wrap:wrap } .utils a{ display:inline-flex;align-items:center;gap:7px; font-size:13.5px;color:var(--faint);text-decoration:none;min-height:0 } .utils a:hover{color:var(--muted);text-decoration:underline} dialog#explain{ border:none;border-radius:14px;padding:26px 26px 22px;max-width:33rem;width:calc(100% - 36px); background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(14,44,32,.34) } dialog#explain::backdrop{background:rgba(20,32,26,.55)} dialog#explain h3{font-size:21px;margin-bottom:11px} dialog#explain p{font-size:15.5px;line-height:1.65;color:var(--muted);margin-bottom:20px} dialog#explain form{display:flex;justify-content:flex-end} dialog#explain .btn{padding:11px 22px} main{flex:1 0 auto} footer{background:var(--skin);color:var(--skin-soft);margin-top:0;flex:none} footer .in{max-width:1180px;margin:0 auto;padding:22px;font-size:13px;display:flex;gap:16px;flex-wrap:wrap} footer a{color:var(--skin-ink)} .powered-foot{display:none;margin-left:auto;letter-spacing:.08em} /* ---------- phone: the graveside visitor ---------- */ @media (max-width:820px){ body{font-size:17px} .spread{grid-template-columns:1fr} .col-person{border-right:none;border-bottom:1px solid var(--rule)} .col-living{padding:26px 18px 34px} .graveside{height:168px} .portrait,.monogram{width:152px;height:190px;margin-top:-92px} .hero-pair{gap:11px;margin:-92px 14px 0} .hero-pair figure{flex:0 1 148px} .hero-pair .portrait{height:186px;margin-top:0} .pname{font-size:27px} .plot,.acts,.contribute{margin-left:18px;margin-right:18px} .plot dd{font-size:14.5px} .btn{padding:16px 18px;font-size:16px} /* bigger targets outdoors */ .tiles{grid-template-columns:1fr} /* the credit belongs to provenance, not to a grieving visitor's first screen */ .topbar .powered{display:none} .powered-foot{display:inline;margin-left:0} .topbar-in{padding:12px 18px;gap:12px} .mark img{height:30px;padding:5px 7px} .mark .txt .n{font-size:17px} .mark .txt .s{font-size:9px;letter-spacing:.13em} } @media print{ .topbar,.acts,.contribute,.utils,footer,.graveside .label{display:none} .demo-flag{background:none;color:#000;border-bottom:1px solid #999} body{background:#fff} .spread{display:block;max-width:none} .col-person{border:none} .col-living{background:#fff;padding-top:0} .portrait,.monogram{margin-top:16px;box-shadow:none} .graveside{height:120px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- search ---------- */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .find-hero{height:224px} .find-hero::after{ background:linear-gradient(180deg,rgba(20,42,32,.60) 0%,rgba(20,42,32,.34) 52%,rgba(246,244,238,.94) 100%) } .find-hero-copy{ position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center; padding:0 24px 34px } .find-hero-copy h1{ color:#F6F4EE;font-size:clamp(27px,4.6vw,40px);line-height:1.15;text-align:center; text-shadow:0 2px 14px rgba(0,0,0,.5) } .find{max-width:660px;margin:0 auto;padding:0 20px 72px;width:100%} .searchbar{ display:flex;gap:10px;margin:-34px 0 26px;position:relative;z-index:4 } .searchbar input{ flex:1;min-width:0;font:400 18px/1.2 'Public Sans',sans-serif;color:var(--ink); background:#fff;border:1.5px solid var(--skin);border-radius:var(--radius); padding:16px 18px;min-height:56px;box-shadow:0 6px 20px rgba(14,44,32,.14) } .searchbar input::placeholder{color:#9AA39D} .searchbar button{ font:600 16px/1 'Public Sans',sans-serif;color:var(--skin-ink);background:var(--skin); border:none;border-radius:var(--radius);padding:0 22px;min-height:56px;cursor:pointer; box-shadow:0 6px 20px rgba(14,44,32,.14) } .count{font-size:14px;color:var(--faint);margin-bottom:14px} .results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .results a{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px; background:#fff;border:1px solid var(--rule);border-radius:var(--radius); padding:15px 16px;text-decoration:none;min-height:var(--tap) } .results a:hover{border-color:var(--skin)} .results .rn{ grid-column:1;font-family:'Newsreader',Georgia,serif;font-size:19px;line-height:1.25 } .results .ry{ grid-column:1;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums } .results .rw{grid-column:1;font-size:12.5px;color:var(--faint);line-height:1.45} .results .chev{grid-column:2;grid-row:1 / span 3;width:20px;height:20px;color:#B3BDB6} .none{ background:var(--parchment);border:1px solid var(--rule);border-radius:12px; padding:22px 22px;color:var(--muted);font-size:15.5px;line-height:1.65 } .none .big{font-family:'Newsreader',Georgia,serif;font-size:20px;color:var(--ink);margin-bottom:10px} .none p + p{margin-top:11px} .none .ask a{color:var(--skin);font-weight:600} @media (max-width:820px){ .find-hero{height:186px} .searchbar{flex-direction:column;gap:9px;margin-top:-28px} .searchbar button{padding:16px 22px} } /* ---------- search, desktop composition ---------- */ @media (min-width:821px){ /* A wide frame fills by width and crops the top away, losing the memorial wall to plain lawn. Hold the crop higher up the photo. */ .graveside img{object-position:center 22%} .find-hero{height:360px} .find-hero-copy{align-items:flex-start;padding:74px 24px 0} .find-hero-copy h1{font-size:44px} .searchbar{ max-width:600px;margin:-92px auto 34px; /* sits over the photo, not straddling its edge */ } .searchbar input{font-size:19px;min-height:62px} .searchbar button{min-height:62px;font-size:17px;padding:0 30px} .find{max-width:720px} .results a{padding:17px 20px} .results .rn{font-size:20px} } /* ---------- type-ahead ---------- */ .qwrap{position:relative;flex:1;min-width:0;display:flex} .qwrap input{width:100%} #suggest{ position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20; list-style:none;margin:0;padding:6px; background:#fff;border:1px solid var(--rule);border-radius:var(--radius); box-shadow:0 14px 34px rgba(14,44,32,.20);max-height:62vh;overflow-y:auto } #suggest li{ padding:12px 13px;border-radius:7px;cursor:pointer; display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:var(--tap) } #suggest li.on,#suggest li:hover{background:var(--parchment)} #suggest .sn{font-family:'Newsreader',Georgia,serif;font-size:17.5px;line-height:1.3} #suggest .sy{ font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto } @media (max-width:820px){ #suggest li{padding:14px 13px} #suggest .sn{font-size:17px} } /* ---------- report a problem ---------- */ .report{max-width:620px;margin:0 auto;padding:44px 20px 72px;width:100%} .report h1{font-size:clamp(27px,5vw,36px);line-height:1.15} .report .lede{font-size:16.5px;line-height:1.65;color:var(--muted);margin:14px 0 30px;max-width:56ch} .report .err{ background:#FBEDE9;border-left:3px solid #A33B22;color:#7A2C19; padding:12px 15px;border-radius:0 8px 8px 0;margin-bottom:22px;font-size:15px } .report fieldset{border:none;margin:0 0 26px;padding:0} .report legend{ font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint); padding:0;margin-bottom:12px } .choice{ display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--rule); border-radius:var(--radius);padding:14px 16px;margin-bottom:9px;cursor:pointer; font-size:15.5px;line-height:1.45;min-height:var(--tap) } .choice:hover{border-color:var(--skin)} .choice input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--skin)} .choice:has(input:checked){border-color:var(--skin);background:var(--parchment)} .field{display:block;margin-bottom:22px} .field .lbl{display:block;font-size:14px;font-weight:600;margin-bottom:7px} .field .lbl i{font-weight:400;font-style:normal;color:var(--faint)} .field textarea,.field input[type=email]{ width:100%;font:400 16px/1.55 'Public Sans',sans-serif;color:var(--ink); background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:13px 15px } .field textarea:focus,.field input:focus{outline:none;border-color:var(--skin)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .report .actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px} .report .actions .btn{flex:1 1 auto;min-width:190px;cursor:pointer;font-size:15.5px} .report .back{margin-top:28px} .report .back .btn{display:inline-flex;min-width:220px} @media (max-width:520px){ .report .actions .btn{flex:1 1 100%} }