/* ========================================================================== Kinder Cemetery — accessible design system Audience: older visitors and people with low vision. Goals: high contrast (WCAG AAA where feasible), large readable type, keyboard-friendly, works with or without JavaScript. ========================================================================== */ /* ---- Design tokens ---------------------------------------------------- */ :root { /* Warm paper palette — softer than pure white, less glare for older eyes */ --bg: #fbfaf7; --surface: #ffffff; --surface-2: #f2efe8; /* zebra stripe, subtle panels */ --ink: #1a1a1a; /* body text — ~16:1 on --bg (AAA) */ --ink-soft: #454138; /* secondary text — still AA-large+ */ --rule: #d8d3c8; /* hairlines / borders */ --rule-strong:#b7b0a2; --accent: #2c5545; /* forest green — links, headings accents */ --accent-deep: #1f3d31; --accent-tint: #e7efe9; /* hover/active backgrounds */ --focus: #9a3b1b; /* warm high-contrast focus ring (not color-alone) */ --maxw-prose: 68ch; --maxw-wide: 1200px; /* Type scale is driven by :root font-size so the text-size toggle can scale the ENTIRE site by changing one value. */ --step--1: 0.9rem; --step-0: 1rem; --step-1: 1.3rem; --step-2: 1.7rem; --step-3: 2.25rem; --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 6px; --gap: 1.5rem; } /* Text-size toggle steps (JS sets data-textsize on ) */ html { font-size: 20px; } /* generous default base */ html[data-textsize="large"] { font-size: 23px; } html[data-textsize="xlarge"] { font-size: 26px; } /* ---- Reset / base ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-ui); line-height: 1.2; color: var(--accent-deep); font-weight: 700; } h1 { font-size: var(--step-3); margin: 0 0 0.5em; } h2 { font-size: var(--step-2); margin: 1.6em 0 0.5em; } h3 { font-size: var(--step-1); margin: 1.4em 0 0.4em; } p, li { max-width: var(--maxw-prose); } p { margin: 0 0 1em; } a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 0.09em; } a:hover { color: var(--accent-deep); } /* Visible focus for keyboard users everywhere */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } img { max-width: 100%; height: auto; } /* ---- Skip link -------------------------------------------------------- */ .skip-link { position: absolute; left: 0; top: -100%; background: var(--accent-deep); color: #fff; padding: 0.75rem 1.25rem; z-index: 100; font-family: var(--font-ui); font-weight: 600; } .skip-link:focus { top: 0; color: #fff; } /* ---- Layout containers ------------------------------------------------ */ .wrap { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } .wrap--prose { max-width: calc(var(--maxw-prose) + 6rem); } main { display: block; padding-block: 2.5rem 3.5rem; } /* ---- Site header / nav ------------------------------------------------ */ .site-header { background: var(--surface); border-bottom: 3px solid var(--accent); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1rem; } .brand { font-family: var(--font-ui); font-weight: 700; font-size: var(--step-1); color: var(--accent-deep); text-decoration: none; line-height: 1.1; } .brand span { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); } .brand:hover { color: var(--accent-deep); } /* Text-size control */ .textsize { margin-left: auto; font-family: var(--font-ui); display: flex; align-items: center; gap: 0.5rem; } .textsize__label { font-size: var(--step--1); color: var(--ink-soft); } .textsize button { font-family: var(--font-ui); font-weight: 600; cursor: pointer; background: var(--surface); color: var(--accent-deep); border: 2px solid var(--rule-strong); border-radius: var(--radius); padding: 0.35em 0.6em; line-height: 1; } .textsize button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } /* Primary navigation */ .mainnav { border-top: 1px solid var(--rule); } .mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-family: var(--font-ui); } .mainnav a { display: block; padding: 0.9rem 1.1rem; text-decoration: none; color: var(--accent-deep); font-weight: 600; font-size: var(--step-0); border-bottom: 4px solid transparent; } .mainnav a:hover { background: var(--accent-tint); } .mainnav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); } /* ---- Buttons / controls ---------------------------------------------- */ .btn { font-family: var(--font-ui); font-weight: 600; font-size: var(--step-0); display: inline-block; cursor: pointer; text-decoration: none; background: var(--accent); color: #fff; border: 2px solid var(--accent); padding: 0.65em 1.1em; border-radius: var(--radius); } .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .btn--ghost { background: var(--surface); color: var(--accent-deep); border-color: var(--rule-strong); } .btn--ghost:hover { background: var(--accent-tint); color: var(--accent-deep); } /* ---- Hero / prose ----------------------------------------------------- */ .lede { font-size: var(--step-1); color: var(--ink-soft); max-width: var(--maxw-prose); } .figure { margin: 1.5rem 0; } .figure img { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); } .figure figcaption { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.5rem; } /* Card grid (home quick links) */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin: 2rem 0; padding: 0; list-style: none; } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; } .card h3 { margin-top: 0; } .card a.card__link::after { content: " →"; } /* ---- Callout (preservation appeal / highlighted note) ---------------- */ .callout { background: var(--accent-tint); border: 1px solid var(--rule); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2rem 0; max-width: var(--maxw-prose); } .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } .callout h2, .callout h3 { color: var(--accent-deep); } .callout__tagline { font-size: var(--step-2); font-weight: 700; line-height: 1.2; color: var(--accent-deep); margin: 0 0 0.75rem; } /* ========================================================================== Burial directory ========================================================================== */ .directory-controls { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; font-family: var(--font-ui); } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-weight: 600; color: var(--accent-deep); } .search-input { font-family: var(--font-ui); font-size: var(--step-1); padding: 0.7em 0.9em; width: 100%; border: 2px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .search-input:focus-visible { border-color: var(--accent); } .controls-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; margin-top: 1rem; } .result-count { font-family: var(--font-ui); color: var(--ink-soft); margin: 0 0 0.75rem; } .result-count strong { color: var(--accent-deep); } /* Legend of relationship symbols */ .legend { font-family: var(--font-ui); font-size: var(--step--1); } .legend summary { cursor: pointer; font-weight: 600; color: var(--accent-deep); padding: 0.5rem 0; } .legend dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.25rem 1.5rem; margin: 0.5rem 0 0; } .legend dt { font-weight: 700; color: var(--accent-deep); } .legend dd { margin: 0 0 0.4rem; color: var(--ink-soft); } .legend div { display: flex; gap: 0.5rem; } /* Table */ .table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); } table.burials { border-collapse: collapse; width: 100%; font-size: var(--step-0); background: var(--surface); } table.burials caption { text-align: left; padding: 0.5rem; font-family: var(--font-ui); color: var(--ink-soft); } table.burials th, table.burials td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); } table.burials thead th { position: sticky; top: 0; z-index: 2; background: var(--accent-deep); color: #fff; font-family: var(--font-ui); white-space: nowrap; } /* Sortable header buttons */ table.burials thead th button { all: unset; cursor: pointer; font-family: var(--font-ui); font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; width: 100%; } table.burials thead th button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } th[aria-sort] button::after { content: "↕"; opacity: 0.55; font-size: 0.85em; } th[aria-sort="ascending"] button::after { content: "▲"; opacity: 1; } th[aria-sort="descending"] button::after { content: "▼"; opacity: 1; } table.burials tbody tr:nth-child(even) { background: var(--surface-2); } table.burials tbody tr:hover { background: var(--accent-tint); } table.burials td.surname { font-weight: 700; } /* Keep short columns (Plot, Born, Died, Age) on one line; let Notes take the slack */ table.burials td:nth-child(3), table.burials td:nth-child(4), table.burials td:nth-child(5), table.burials td:nth-child(6) { white-space: nowrap; } table.burials td.notes { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); white-space: normal; min-width: 16rem; } /* Rows needing proofing get a subtle marker (not color-alone: also a title/‡) */ tr[data-review="1"] td.surname::after { content: " ‡"; color: var(--focus); font-weight: 700; } .no-results { padding: 2rem; text-align: center; font-family: var(--font-ui); color: var(--ink-soft); } /* ---- Footer ----------------------------------------------------------- */ .site-footer { background: var(--accent-deep); color: #eef2ee; font-family: var(--font-ui); margin-top: 3rem; padding-block: 2rem; } .site-footer a { color: #fff; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; } .site-footer p { max-width: none; margin: 0.25rem 0; font-size: var(--step--1); } /* ---- No-JS: hide sort buttons' interactivity gracefully --------------- */ .no-js .js-only { display: none !important; } /* ---- Responsive nav (small screens) ----------------------------------- */ @media (max-width: 640px) { .mainnav ul { flex-direction: column; } .mainnav a { border-bottom: 1px solid var(--rule); border-left: 4px solid transparent; } .mainnav a[aria-current="page"] { border-left-color: var(--accent); border-bottom-color: var(--rule); } .site-header__inner { flex-direction: column; align-items: flex-start; } .textsize { margin-left: 0; } } /* ---- Print ------------------------------------------------------------ */ @media print { .site-header, .site-footer, .directory-controls, .textsize, .skip-link { display: none; } body { background: #fff; color: #000; font-size: 11pt; } table.burials thead th { position: static; background: #000; } }