/* * obits directives — full text in DIRECTIVES.md * 1. SSOT — Extend the one that exists. Never a second copy that can disagree. * 2. Caveman comments — Shortest technical line that lands. Why, not what. * 3. No post-mortems — Code says what is, never what it used to be. Git keeps the history. * end directives */ /* The public site. Loads after base.css. * * Nothing here is per-tenant: brand_vars() re-declares the overridden custom * properties inline on , so one file serves every newsroom. * * Class names match design/, so a section can be diffed against it rather than * re-derived. */ /* ---------- components ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted-2); } .ph { background: repeating-linear-gradient(135deg, var(--color-ph-a) 0 10px, var(--color-ph-b) 10px 20px); } .rule { height: 1px; background: var(--color-rule); } /* ---------- sticky bars ---------- */ .masthead { position: sticky; top: 0; z-index: 20; background: var(--color-paper-alt); border-bottom: 1px solid var(--color-rule); } .masthead__in { max-width: var(--maxw); margin: 0 auto; padding: 13px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .masthead__left { display: flex; align-items: center; gap: 14px; } .wordmark { height: 26px; display: flex; align-items: center; font-family: var(--font-serif); font-size: 19px; color: var(--color-ink); } .wordmark img { height: 26px; width: auto; } .divider { width: 1px; height: 16px; background: #d9d2c4; } .section-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); } .masthead__links { display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--color-muted-2); } .masthead__links a { color: var(--color-muted-2); } .subnav { position: sticky; top: var(--bar-1); z-index: 19; background: color-mix(in srgb, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-rule); } .subnav__in { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .subnav__name { font-family: var(--font-serif); font-size: 19px; } .subnav__back { font-size: 14px; color: var(--color-muted); } /* Same grid cell, so the swap moves nothing else. */ .subnav__left { display: grid; align-items: center; min-width: 0; } .subnav__left > * { grid-area: 1 / 1; transition: opacity .2s ease; } /* No JS: the name stays, as drawn. With JS: the back link holds the slot until the headline scrolls away. */ .subnav__back { opacity: 0; pointer-events: none; } .subnav--watch .subnav__back { opacity: 1; pointer-events: auto; } .subnav--watch .subnav__name { opacity: 0; } .subnav--watch.is-scrolled .subnav__back { opacity: 0; pointer-events: none; } .subnav--watch.is-scrolled .subnav__name { opacity: 1; } .subnav__links { display: flex; gap: 30px; font-size: 14px; color: var(--color-muted); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn--sm { font-size: 14px; padding: 11px 20px; } .btn--primary { background: var(--color-ink); color: var(--color-paper); } .btn--accent { background: var(--color-accent); color: var(--color-accent-ink); } .btn--ghost { background-color: transparent; border-color: var(--color-rule-2); color: var(--color-ink); } .btn--outline-accent { border-color: var(--color-accent-rule); color: var(--color-accent-ink); } .btn:hover { opacity: .85; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn[aria-pressed="true"] { opacity: .6; cursor: default; } /* ---------- hero ---------- */ .hero { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 84px 0 64px; text-align: center; } .hero__head { display: flex; flex-direction: column; align-items: center; gap: 16px; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .portrait { width: 236px; height: 236px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px var(--color-paper-alt); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--color-muted-2); } .portrait img { width: 100%; height: 100%; object-fit: cover; } .hero h1 { font-family: var(--font-serif); font-weight: 300; font-size: 78px; line-height: 1.03; letter-spacing: -.02em; } .dates { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 17px; color: var(--color-muted); } .dates span { width: 28px; height: 1px; background: #c8c1b4; } .epitaph { max-width: 540px; font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--color-ink-3); text-wrap: pretty; } /* ---------- life + sidebar ---------- */ .life { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; padding: 72px 0; } .obit { display: flex; flex-direction: column; gap: 22px; max-width: 660px; } .obit__lede { font-family: var(--font-serif); font-size: 24px; line-height: 1.6; text-wrap: pretty; } .obit p:not(.obit__lede) { font-family: var(--font-serif); font-size: 19px; line-height: 1.75; color: var(--color-ink-2); text-wrap: pretty; } /* We do not control the markup, so the lede is the first paragraph rather than a class the submitter would have to know. */ .obit > p:first-of-type { font-family: var(--font-serif); font-size: 24px; line-height: 1.6; color: var(--color-ink); text-wrap: pretty; } .obit a { text-decoration: underline; text-underline-offset: 4px; } .aside { display: flex; flex-direction: column; gap: 14px; } .panel { background: var(--color-paper-alt); border-radius: 26px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; } .panel--outline { background-color: transparent; border: 1px solid var(--color-rule); gap: 10px; } .panel__title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; } .panel__body { font-size: 14px; line-height: 1.65; color: var(--color-muted); } .panel__link { font-size: 14px; color: var(--color-accent-ink); } .facts { display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--color-ink-3); } .facts div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--color-rule-3); } .facts div:last-child { padding-bottom: 0; border-bottom: 0; } .facts dt { color: var(--color-muted-2); } .facts dt, .facts dd { margin: 0; } /* ---------- services ---------- */ .section { padding: 0 0 72px; display: flex; flex-direction: column; gap: 20px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .section__link { font-size: 14px; color: var(--color-muted); } .cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .card { border-radius: 28px; padding: 28px 30px; display: flex; flex-direction: column; gap: 9px; background: var(--color-paper-alt); } .card--accent { background: var(--color-accent); } .card__date { font-family: var(--font-serif); font-size: 26px; } .card__line { font-size: 15px; color: var(--color-ink-3); } .card__meta { font-size: 14px; color: var(--color-muted-2); } .card__link { margin-top: 6px; font-size: 14px; color: var(--color-accent-ink); } .card--accent .eyebrow { color: #6b7a64; } .card--accent .card__line { color: var(--color-accent-ink); } .card--accent .card__meta { color: var(--color-accent-ink-2); } /* ---------- photographs ---------- */ .gallery-hero { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; height: 300px; } .gallery-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .gallery-hero figure, .gallery-row figure { margin: 0; border-radius: 26px; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--color-muted-2); } .gallery-row figure { aspect-ratio: 4 / 3; border-radius: 24px; padding: 18px; } .gallery-hero figure img, .gallery-row figure img { width: 100%; height: 100%; object-fit: cover; } /* ---------- guestbook ---------- */ .guestbook { padding: 0 0 72px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; } .entries { display: flex; flex-direction: column; gap: 14px; } .entry { background: var(--color-card); border: 1px solid var(--color-rule); border-radius: 26px; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; margin: 0; } .entry p { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; } .entry cite { font-style: normal; font-size: 13px; color: var(--color-muted-2); } .form { background: var(--color-paper-alt); border-radius: 30px; padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; } /* Follows you down the memories: someone reading forty is the likeliest to add one, and scrolling back up is how that thought gets lost. */ .guestbook .form { position: sticky; top: calc(var(--bars) + 16px); } /* Sticky and taller than the window puts the button below the fold forever. */ @media (max-height: 660px) { .guestbook .form { position: static; } } .form h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 400; } .form__intro { display: flex; flex-direction: column; gap: 7px; } .form__note { font-size: 14px; line-height: 1.6; color: var(--color-muted); } .form input, .form textarea, .input { font-size: 15px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--color-rule-2); background: #fff; color: var(--color-ink); outline: none; /* Not inherited: 1.5 makes every field 3px taller than the design. */ line-height: normal; } .form textarea, textarea.input { line-height: 1.55; resize: vertical; } .form input:focus, .form textarea:focus, .input:focus { border-color: #b9c4b2; box-shadow: 0 0 0 3px rgba(199, 214, 192, .35); } .form__fine { font-size: 12px; line-height: 1.5; color: var(--color-muted-2); } .error { font-size: 14px; color: var(--color-danger); } .error:empty { display: none; } /* ---------- giving ---------- */ .giving { background: var(--color-accent); border-radius: 34px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; margin-bottom: 84px; } .giving h2 { font-family: var(--font-serif); font-size: 34px; font-weight: 400; line-height: 1.2; color: #2f3a2c; } .giving p { font-size: 16px; line-height: 1.65; color: #4a5546; } .giving__text { display: flex; flex-direction: column; gap: 12px; max-width: 620px; } .giving__actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .giving .eyebrow { color: #6b7a64; } /* ---------- other notices ---------- */ .notices { border-top: 1px solid var(--color-rule); background: var(--color-paper-alt); } .notices__in { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad); display: flex; flex-direction: column; gap: 24px; } .notice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .notice { background: var(--color-paper); border-radius: 26px; padding: 22px 24px; display: flex; gap: 16px; align-items: center; } .notice__thumb { width: 56px; height: 56px; flex: none; border-radius: 999px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--color-ph-a) 0 8px, var(--color-ph-b) 8px 16px); } .notice__thumb img { width: 100%; height: 100%; object-fit: cover; } .notice__name { font-family: var(--font-serif); font-size: 20px; display: block; } .notice__meta { font-size: 13px; color: var(--color-muted-2); } /* ---------- footer ---------- */ .footer { background: var(--color-ink); color: var(--color-paper); } .footer__in { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--pad); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; } .footer__brand { font-family: var(--font-serif); font-size: 24px; } .footer__sub { font-size: 13px; color: #a8a29a; } .footer__links { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; } .footer__links a { color: #c9c4bc; } /* ---------- our own pages: index, submit, staff ---------- */ .page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 84px 0 44px; } .page-head h1 { font-family: var(--font-serif); font-weight: 300; font-size: 78px; line-height: 1.03; letter-spacing: -.02em; } .page-head p { max-width: 540px; font-family: var(--font-serif); font-size: 22px; line-height: 1.5; color: var(--color-ink-3); text-wrap: pretty; } .field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--color-muted); } .field .input { width: 100%; } /* ---------- responsive (the mockup's own breakpoints) ---------- */ @media (max-width: 1000px) { .life, .guestbook { grid-template-columns: 1fr; gap: 40px; } /* One column: the form is above the entries anyway, so sticking it would just cover them. */ .guestbook .form { position: static; } .cards-3, .notice-list { grid-template-columns: 1fr 1fr; } .giving { grid-template-columns: 1fr; padding: 36px; } .gallery-hero { grid-template-columns: 1fr 1fr; height: auto; } .gallery-hero figure { aspect-ratio: 4 / 3; } } @media (max-width: 720px) { :root { --pad: 22px; } .subnav__links { display: none; } /* The design kept the last link, which on ours is the outlet's own nav — so the one link that makes money vanished on mobile. Keep the action: the wordmark already returns you to the index. */ .masthead__links a:not(.masthead__cta) { display: none; } /* And a 13px text link is a poor thing to ask a thumb to hit. */ /* Outranks `.masthead__links a`, whose muted grey washes the pill out to looking disabled. */ .masthead__links a.masthead__cta { padding: 9px 16px; border-radius: 999px; font-size: 14px; background: var(--color-accent); color: var(--color-accent-ink); } /* A notice is the most-read page, so it is the last place to drop the link that leads to money. Both can be here — they just cannot be the same colour. The page's action keeps the sage; the site's steps back. */ .masthead:has(+ .subnav) a.masthead__cta { background: transparent; color: var(--color-muted); border: 1px solid var(--color-rule-2); } /* Alone in the bar — /submit never links to itself — so centre it. */ .masthead__in:not(:has(.masthead__cta)) { justify-content: center; } /* The headline is directly below on a phone; a wrapped copy beside the button is noise twice over. */ .subnav__left { display: none; } .subnav__in { justify-content: center; padding: 14px var(--pad); } .subnav .btn { width: auto; } .hero, .page-head { padding: 52px 0 44px; } .hero h1, .page-head h1 { font-size: 44px; } .portrait { width: 176px; height: 176px; box-shadow: 0 0 0 10px var(--color-paper-alt); } .epitaph, .page-head p { font-size: 19px; } .cards-3, .notice-list, .gallery-row { grid-template-columns: 1fr; } .obit__lede { font-size: 21px; } .giving h2 { font-size: 27px; } .btn { width: 100%; } .hero__actions, .giving__actions { width: 100%; } } @media print { .masthead, .subnav, .form, .notices, .btn { display: none; } body { background: #fff; } .giving { background: var(--color-paper-alt); } } /* ---------- index ---------- */ .search { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 540px; } .search .input { flex: 1; min-width: 220px; } .page-head__note { font-size: 14px; color: var(--color-muted); } .underline { text-decoration: underline; text-underline-offset: 4px; } .empty { padding: 64px 0; text-align: center; font-family: var(--font-serif); font-size: 22px; color: var(--color-muted); } .notice--alt { background: var(--color-paper-alt); } .pager { border-top: 1px solid var(--color-rule); padding-top: 24px; } /* ---------- submit ---------- */ .fieldset { display: flex; flex-direction: column; gap: 20px; } .fieldset--choices { gap: 14px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* A grid item stretches to the row, and a full-height box has nothing to scroll within - align-self is what actually makes this stick. */ .aside--sticky { position: sticky; top: calc(var(--bar-1) + 16px); align-self: start; } /* The card fields make it taller than the viewport, where pinning would cut off its own bottom - and the pay button with it. */ .aside--unpinned { position: static; } .choice { flex-direction: row; align-items: flex-start; gap: 16px; cursor: pointer; background: var(--color-card); border: 1px solid var(--color-rule); } .choice input { margin-top: 6px; accent-color: var(--color-ink); } .choice__text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; } .choice__name { font-family: var(--font-serif); font-size: 20px; } .choice__price { font-family: var(--font-mono); white-space: nowrap; } .devbar { border-style: dashed; margin-bottom: 32px; } .devbar__buttons { display: flex; flex-wrap: wrap; gap: 8px; } .devbar code { cursor: pointer; } /* ---------- thanks ---------- */ .hero--message { padding: 120px 0; } .hero--message h1 { font-size: 58px; } .hero--message .epitaph { font-style: normal; } /* ---------- staff ---------- */ .staff { min-height: 100vh; display: flex; flex-direction: column; } .signin { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 22px; } .signin__card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 28px; } .signin__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .form--card { background: var(--color-card); border: 1px solid var(--color-rule); } .form form { display: flex; flex-direction: column; gap: 16px; } .callout { border-radius: 16px; padding: 14px 18px; background: var(--color-paper-alt); } .callout--accent { background: var(--color-accent); color: var(--color-accent-ink); } .centered { text-align: center; } /* ---------- notice ---------- */ .footer__id { display: flex; flex-direction: column; gap: 8px; } .entry + .entry { margin-top: 14px; } .card--full { grid-column: 1 / -1; } .section__link--start { align-self: flex-start; } .card__line--prose { white-space: pre-line; } .footer__in--extra { padding-top: 0; } .section--list { padding: 56px 0 72px; } .life--form { padding: 0 0 84px; } .obit--form { gap: 40px; } .devbar__head { align-items: center; } .fieldset--choices legend { margin-bottom: 14px; } /* Few notices have the seven the design was drawn with. */ .gallery-hero--1 { grid-template-columns: 1fr; } .gallery-hero--2 { grid-template-columns: 2fr 1fr; } .gallery-row--1 { grid-template-columns: 1fr; } .gallery-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ---------- the newsroom's own screens ---------- */ .deck { display: flex; flex-direction: column; gap: 20px; padding: 32px 0 64px; } .deck__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .deck__tabs { display: flex; gap: 8px; flex-wrap: wrap; } .deck__tab { font-size: 14px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--color-rule); color: var(--color-muted); } .deck__tab.is-active { border-color: transparent; background: var(--color-ink); color: var(--color-paper); } .deck__count { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted-2); } .queue { display: flex; flex-direction: column; gap: 12px; } .queue__row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px 120px; gap: 16px; align-items: center; background: var(--color-card); border: 1px solid var(--color-rule); border-radius: 22px; padding: 20px 24px; } .queue__name { font-family: var(--font-serif); font-size: 21px; } .queue__meta { font-size: 13px; color: var(--color-muted-2); } .queue__cell { font-size: 14px; color: var(--color-ink-3); } .queue__waited { font-family: var(--font-mono); font-size: 13px; } .queue__waited--long { color: #8a1c1c; } .queue__empty { padding: 56px 24px; text-align: center; border-radius: 22px; background: var(--color-paper-alt); font-family: var(--font-serif); font-size: 20px; color: var(--color-muted); } .review { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding: 32px 0 72px; } .review__body { display: flex; flex-direction: column; gap: 20px; } .review__actions { display: flex; flex-direction: column; gap: 12px; } .review__danger { display: flex; flex-direction: column; gap: 10px; } .banner { border-radius: 18px; padding: 14px 18px; font-size: 14px; line-height: 1.5; background: var(--color-accent); color: var(--color-accent-ink); } .banner--warn { background: var(--color-paper-alt); color: var(--color-ink-3); } .banner--error { background: var(--color-danger); color: var(--color-paper); } /* Google asks that its mark sits on a plain surface with the label beside it. */ .btn--google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .brand-form { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .brand-form .row-2 { width: 100%; } .memory { display: flex; flex-direction: column; gap: 12px; background: var(--color-card); border: 1px solid var(--color-rule); border-radius: 22px; padding: 22px 24px; } .memory__body { font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--color-ink-2); } .memory__meta { font-size: 13px; color: var(--color-muted-2); } .memory__actions { display: flex; gap: 10px; } /* Out of sight, out of the tab order, still there for a bot. */ .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Over the cap. A warning, not a charge: nobody is billed for the difference. */ #wordcount.is-over { color: var(--color-danger); }