/* SpalterDVD — accessibility-first stylesheet (design spec §7). * * Audience: elderly family members. Every choice here favours legibility and * forgiveness over density: * - base font 18px, grown via the [data-textsize] attribute on so the * whole rem cascade scales (A / A+ / A++). * - warm, photo-friendly palette but text contrast aimed at 7:1 (WCAG AAA). * - thick, high-contrast :focus-visible ring for keyboard users. * - all interactive targets >= 44x44px. * - prefers-reduced-motion: every transition/animation is killed. * - NO autoplay anywhere (enforced by template tests, noted here for intent). */ /* ── Palette ────────────────────────────────────────────────────────────── * Warm parchment background with near-black ink. #2b2620 on #faf6ee is ~13:1, * comfortably past AAA. The accent brown #6b4f1d on the cream card is ~7.4:1, * so accent text on light surfaces also clears AAA. */ :root { --ink: #2b2620; /* primary text */ --ink-soft: #5b5142; /* secondary text — ~7.1:1 on --paper */ --paper: #faf6ee; /* page background — warm cream */ --card: #ffffff; /* raised surfaces */ --card-edge: #e4dcc8; /* hairline borders */ --accent: #6b4f1d; /* warm brown — links, buttons */ --accent-ink: #ffffff; /* text on accent (white on #6b4f1d ~7.0:1) */ --accent-deep:#4f3a13; /* hover / active */ --focus: #0a3d91; /* high-contrast focus ring (deep blue) */ --error: #8a1f1f; /* ~7.3:1 on --paper */ /* Heirloom display type: the same zero-download system serif stack the * letter transcripts use. Headings only — body text stays sans for * legibility at every size. */ --serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif; color-scheme: light; /* Base size — A. The rem cascade keys off this, so bumping it scales * everything. 18px is the spec floor. */ font-size: 18px; } /* Text-size toggle: A+ and A++ raise the root font-size; rem-based sizing * downstream means headings, buttons, cards and gaps all grow together. */ html[data-textsize="lg"] { font-size: 21px; } html[data-textsize="xl"] { font-size: 25px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; /* == root, i.e. >= 18px */ line-height: 1.55; color: var(--ink); /* Warm paper with a barely-there vignette — atmosphere, not decoration. * The shift is ~1% luminance so every AAA contrast figure above still holds. */ background: radial-gradient(120rem 60rem at 50% -10rem, #fdfaf4 0%, var(--paper) 55%, #f6f1e4 100%) fixed var(--paper); } /* Anchor jumps (deep links, back-to-top) glide instead of teleporting; the * reduced-motion block at the bottom forces this back to auto. */ html { scroll-behavior: smooth; } /* Gentle arrival: the page content fades in over ~0.2s. Inside a motion-okay * gate so reduced-motion users never see it (belt to the global kill's braces). */ @media (prefers-reduced-motion: no-preference) { main { animation: page-arrive 0.22s ease-out; } @keyframes page-arrive { from { opacity: 0.35; } to { opacity: 1; } } /* Cross-document soft crossfade in browsers that support it (Safari 18+, * Chrome 126+). Pure progressive enhancement. */ @view-transition { navigation: auto; } } /* ── Skip link ─────────────────────────────────────────────────────────── * Off-screen until focused, then it slides into the top-left as a solid * high-contrast pill. First focusable element in the document. */ .skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 1000; background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1.1rem; border-radius: 0 0 10px 10px; font-size: 1.1rem; font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0; } /* ── Header ──────────────────────────────────────────────────────────────*/ .site-header { background: var(--card); border-bottom: 3px solid var(--card-edge); padding: 0.75rem clamp(1rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; } .site-title { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; flex: 1 1 auto; } .site-title a { color: var(--ink); text-decoration: none; } .site-title a:hover { text-decoration: underline; } .site-menu-button { display: none; } .site-menu-button__close { display: none; } .site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; } .site-nav a { color: var(--accent); font-size: 1.1rem; font-weight: 600; text-decoration: none; /* 44px tap target */ display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; border-bottom: 3px solid transparent; } .site-nav a:hover { text-decoration: underline; } /* You-are-here: the current section keeps a solid brass underline + ink text, * so orientation never depends on memory. Set server-side via aria-current. */ .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .logout-form { margin: 0; } .logout-button { min-height: 44px; padding: 0 0.85rem; background: var(--card); color: var(--accent); border: 2px solid var(--card-edge); border-radius: 8px; font-weight: 700; } .logout-button:hover { background: var(--surface); color: var(--accent-deep); } /* ── Text-size control ───────────────────────────────────────────────────*/ .textsize { display: flex; align-items: center; gap: 0.4rem; } .textsize-label { font-size: 0.95rem; color: var(--ink-soft); } .textsize button { min-width: 44px; min-height: 44px; padding: 0 0.6rem; border: 2px solid var(--accent); background: var(--card); color: var(--accent); border-radius: 8px; font-weight: 700; line-height: 1; cursor: pointer; } .textsize button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .textsize button:nth-child(2) { font-size: 1rem; } .textsize button:nth-child(3) { font-size: 1.2rem; } .textsize button:nth-child(4) { font-size: 1.45rem; } @media (max-width: 44rem) { .site-header { padding: 0.65rem 1rem; gap: 0.55rem 0.75rem; } .site-title { font-size: clamp(1.45rem, 6vw, 1.9rem); flex: 1 1 0; min-width: 0; } .site-menu-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 0.85rem; background: var(--card); color: var(--accent); border: 2px solid var(--card-edge); border-radius: 8px; font-weight: 800; } .site-header.is-menu-open .site-menu-button__open { display: none; } .site-header.is-menu-open .site-menu-button__close { display: inline; } .site-header.mobile-menu-ready:not(.is-menu-open) .site-actions { display: none; } .site-header.is-menu-open .site-actions { display: flex; } .site-actions { flex: 1 0 100%; width: 100%; padding-top: 0.65rem; border-top: 2px solid var(--card-edge); gap: 0.65rem; } .site-nav { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.75rem; } .site-nav a { min-height: 38px; padding: 0; font-size: 1rem; border-bottom-width: 2px; } .logout-button { min-height: 40px; padding: 0 0.75rem; } .textsize { width: 100%; gap: 0.35rem; } .textsize button { min-width: 40px; min-height: 40px; padding: 0 0.55rem; } } /* ── Main + footer ───────────────────────────────────────────────────────*/ main { flex: 1 1 auto; width: 100%; max-width: 84rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); } .site-footer { border-top: 3px solid var(--card-edge); background: var(--card); color: var(--ink-soft); padding: 1.25rem clamp(1rem, 4vw, 2.5rem); font-size: 1rem; text-align: center; } /* A fleuron above the footer line — the kind of mark a letterpress printer * would close a family album with. */ .site-footer__fleuron { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--accent); margin: 0 0 0.35rem; } /* ── Back to top — appears after ~2 screens of scrolling (app.js) ─────────*/ .back-to-top { position: fixed; right: clamp(0.75rem, 3vw, 2rem); bottom: clamp(0.75rem, 3vw, 2rem); z-index: 900; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; padding: 0.6rem 1.1rem; font-size: 1.05rem; font-weight: 700; color: var(--accent-deep); background: var(--card); border: 2px solid var(--accent); border-radius: 999px; box-shadow: 0 6px 20px rgba(64, 50, 32, 0.22); cursor: pointer; opacity: 1; transition: opacity 0.18s ease; } .back-to-top:hover { background: var(--accent); color: var(--accent-ink); } .back-to-top[hidden] { display: none; } /* ── Links, buttons, forms ───────────────────────────────────────────────*/ a { color: var(--accent); } a:hover { color: var(--accent-deep); } button, .btn { font: inherit; min-height: 44px; padding: 0.7rem 1.1rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; cursor: pointer; } button:hover, .btn:hover { background: var(--accent-deep); } input[type=email], input[type=text], input[type=search] { width: 100%; font-size: 1.15rem; min-height: 44px; padding: 0.7rem 0.8rem; border: 2px solid var(--card-edge); border-radius: 10px; background: var(--card); color: var(--ink); } /* The 6-digit sign-in code reads like a code: big, centered, well-spaced * tabular digits — much easier to transcribe from an email on another screen. */ input.otp-input { font-size: 1.9rem; font-variant-numeric: tabular-nums; letter-spacing: 0.45em; text-align: center; padding-left: 0.45em; /* visually re-centre: letter-spacing trails each digit */ } /* ── Focus — thick, high-contrast, never removed ─────────────────────────*/ :focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* ── Auth card (consolidated from the old _base.html) ────────────────────*/ .card { background: var(--card); max-width: 32rem; margin: 2rem auto; padding: 2rem 2.25rem; border: 1px solid var(--card-edge); border-radius: 14px; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08); } .card h1 { font-size: 1.8rem; margin: 0 0 0.5rem; } .card p { font-size: 1.15rem; } .card label { display: block; font-size: 1.1rem; margin: 1rem 0 0.35rem; font-weight: 700; } .card button { width: 100%; margin-top: 1.25rem; font-size: 1.2rem; } .error { color: var(--error); font-weight: 700; margin-top: 1rem; } .muted { color: var(--ink-soft); font-size: 1rem; } hr { border: 0; border-top: 1px solid var(--card-edge); margin: 1.75rem 0; } /* ── Headings — the heirloom serif voice ───────────────────────────────── * Every display-level heading shares the serif stack; body copy stays sans. * The short brass rule under a page title is the one recurring flourish. */ h1, h2, h3, .site-title, .card h1, .empty-state h2 { font-family: var(--serif); } /* ── Timeline ────────────────────────────────────────────────────────────*/ .page-title { font-size: 2.1rem; margin: 0 0 0.75rem; line-height: 1.15; } .page-title::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 0.45rem; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #b39a4a); } .lede { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 2rem; } /* One continuous timeline grid; year dividers span every column inline. */ .timeline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.9rem; align-items: start; } /* Year markers are real section HEADERS spanning the full grid row — serif, brass-ruled, matching .page-title's heirloom voice. (They used to be brown tiles, visually identical to event cards: at a glance the wall read as 60 indistinguishable rectangles.) */ .timeline-marker { grid-column: 1 / -1; margin: 1.4rem 0 0.1rem; padding-bottom: 0.35rem; background: transparent; color: var(--ink); border-bottom: 3px solid var(--accent); font-family: var(--serif); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .timeline-grid > .timeline-marker:first-child { margin-top: 0; } /* ── Memory of the day — the front door greets you with a memory, not a * grid. Text sits on a solid card surface (never over the photo) so the AAA * contrast promise holds for any image. ────────────────────────────────── */ .memory-hero { display: flex; flex-direction: column; margin: 0 0 2rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09); } .memory-hero:hover { color: var(--ink); } .memory-hero__img { width: 100%; max-height: 22rem; /* Show the WHOLE photo — the hero rotates through portraits and landscapes, so a full-width cover band chopped heads off the tall ones. Contain letterboxes the odd portrait onto the parchment instead of mangling it. */ object-fit: contain; display: block; background: #efe7d4; } .memory-hero__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.4rem 1.3rem; } .memory-hero__kicker { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.05rem; } .memory-hero__line { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; } .memory-hero__caption { color: var(--ink-soft); } .memory-hero__cta { color: var(--accent); font-weight: 600; margin-top: 0.2rem; } .memory-hero:hover .memory-hero__cta { color: var(--accent-deep); text-decoration: underline; } /* ── "New in the archive" strip — returning visitors see what changed. ── */ .recent-strip { margin: 0 0 2rem; } .recent-strip__title { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 0.75rem; } .recent-strip__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.9rem; align-items: start; } /* ── Read-along video transcript (click-to-seek cue lines). ──────────────── */ .transcript--video { margin: 0.75rem 0 0; } .transcript__cues { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 24rem; overflow-y: auto; border: 1px solid var(--card-edge); border-radius: 10px; background: var(--card); } /* Quiet, full-width seek lines — a readable transcript, not 200 brown buttons. */ .cue-line { display: flex; gap: 0.7rem; align-items: baseline; width: 100%; min-height: 44px; padding: 0.45rem 0.8rem; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid #f0ead9; border-radius: 0; text-align: left; font-size: 1rem; line-height: 1.5; cursor: pointer; } .cue-line:hover { background: #fbf7ef; color: var(--ink); } .cue-line__time { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; } .transcript__error { padding: 0.6rem 0.8rem; color: var(--ink-soft); font-style: italic; } /* ── Person mini-biography: portrait, dated strip, companions. ───────────── */ .person-header { position: relative; } .person-portrait { float: right; margin: 0 0 0.75rem 1rem; } .person-portrait__img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 50%; border: 3px solid var(--card-edge); background: #efe7d4; } .person-portrait__initials { display: flex; align-items: center; justify-content: center; width: 7rem; height: 7rem; border-radius: 50%; border: 3px solid var(--card-edge); background: #efe7d4; font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--accent); } .person-years { margin: 1.5rem 0; clear: both; } .person-years__title { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.75rem; } .person-years__strip { display: flex; flex-wrap: wrap; gap: 0.75rem; } .person-years__item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-decoration: none; } .person-years__thumb { width: 6.5rem; height: 6.5rem; object-fit: cover; object-position: top; /* keep faces / letterheads, never chop heads */ border-radius: 10px; border: 1px solid var(--card-edge); background: #efe7d4; } .person-years__year { font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .person-years__item:hover .person-years__year { color: var(--accent-deep); text-decoration: underline; } .person-companions { margin: 1.5rem 0; } .person-companions__title { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.75rem; } .person-companions__row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .person-companions__chip { display: flex; flex-direction: column; min-height: 44px; padding: 0.5rem 1rem; background: var(--card); border: 2px solid var(--card-edge); border-radius: 12px; text-decoration: none; font-weight: 600; } .person-companions__chip:hover { border-color: var(--accent); background: #fbf7ef; } .person-companions__count { color: var(--ink-soft); font-weight: 400; font-size: 0.92rem; } /* ── "From the attic" — a daily recovered-letter teaser on the home page. ─ */ .attic-card { display: flex; align-items: flex-start; gap: 1.1rem; margin: 0 0 1.75rem; padding: 1.1rem 1.4rem; text-decoration: none; color: var(--ink); background: #f4ecd9; /* a shade deeper than the paper — old stock */ border: 1px solid #d9cba6; border-radius: 14px; } .attic-card:hover { background: #efe5cd; color: var(--ink); } .attic-card__thumb { flex: 0 0 auto; width: 6.5rem; max-height: 9rem; object-fit: cover; object-position: top; border: 1px solid #d9cba6; border-radius: 6px; background: #fff; /* a letter lies a touch askew on the pile */ transform: rotate(-1.5deg); box-shadow: 0 2px 8px rgba(43, 38, 32, 0.15); } @media (prefers-reduced-motion: reduce) { .attic-card__thumb { transform: none; } } @media (max-width: 30rem) { .attic-card { flex-direction: column; } } .attic-card__body { display: flex; flex-direction: column; gap: 0.35rem; } .attic-card__kicker { font-family: var(--serif); font-style: italic; color: var(--accent); } .attic-card__teaser { font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; } .attic-card__cta { color: var(--accent); font-weight: 600; } .attic-card:hover .attic-card__cta { color: var(--accent-deep); text-decoration: underline; } /* ── Stories from the attic — a readable heirloom column. ────────────────── */ .stories { max-width: 42rem; } .stories__note { color: var(--ink-soft); font-style: italic; max-width: 42rem; } .story { margin: 0 0 2.25rem; padding: 1.4rem 1.6rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; scroll-margin-top: 1rem; } .story__title { margin: 0 0 0.6rem; font-family: var(--serif); font-size: 1.25rem; } .story__text { margin: 0 0 0.6rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; white-space: pre-line; /* the FTM exports carry meaningful breaks */ } .story__more summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; } .story__names { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--card-edge); color: var(--ink-soft); font-size: 0.95rem; } /* ── Reunions hub — one section per reunion, headed by its name. ────────── */ .reunion-group { margin: 0 0 2.25rem; } .reunion-group__title { display: block; margin: 1.4rem 0 0.2rem; } .reunion-group__location { margin: 0 0 0.9rem; color: var(--ink-soft); font-style: italic; } /* ── Decade jump — anchor chips, no JS. ─────────────────────────────────── */ .decade-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; } .decade-jump__label { color: var(--ink-soft); margin-right: 0.25rem; } .decade-jump__chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 1rem; background: var(--card); border: 2px solid var(--card-edge); border-radius: 999px; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; } .decade-jump__chip:hover { border-color: var(--accent); background: #fbf7ef; } /* Anchor targets land below the sticky-free header with breathing room. */ .timeline-marker { scroll-margin-top: 1rem; } /* The whole event card is one big tappable target. */ .event-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07); transition: transform 0.15s ease, box-shadow 0.15s ease; min-height: 44px; } .event-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); } .event-card__cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; /* keep faces / letterheads, never chop heads */ display: block; background: #efe7d4; } /* Graceful placeholder when an event has no cover image. */ .event-card__cover--placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--ink-soft); background: linear-gradient(135deg, #efe7d4, #e0d4b8); } .event-card__body { padding: 0.6rem 0.75rem 0.8rem; } .event-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.15rem; } .event-card__year { font-size: 0.95rem; color: var(--ink-soft); } .event-card__badge { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-deep); padding: 0.15rem 0.5rem; border-radius: 6px; } /* ── Event detail page ───────────────────────────────────────────────────*/ .breadcrumb { font-size: 1.05rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--ink-soft); } .breadcrumb a { font-weight: 600; } .event-header { margin: 0 0 2rem; } .event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 0.75rem; } .event-meta__year { font-weight: 700; color: var(--ink); } .event-description { font-size: 1.2rem; max-width: 48rem; } .asset-group { margin: 0 0 2.75rem; } .asset-group__heading { font-size: 1.6rem; margin: 0 0 1.25rem; padding-bottom: 0.35rem; border-bottom: 3px solid var(--card-edge); } /* Each asset is a card with generous spacing. */ .asset { background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; padding: 1.25rem; margin: 0 0 1.75rem; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07); } /* Anchor target offset so a deep-linked asset isn't hidden under the header. */ .asset { scroll-margin-top: 1.5rem; } .player { width: 100%; max-height: 70vh; background: #000; border-radius: 10px; display: block; } .player__nofallback { color: var(--ink-soft); padding: 1rem; } /* ── Chapters (clickable jump-to-scene list under a film) ───────────────── * A real
    of buttons: big tap targets, high-contrast text, the standard * focus ring from :focus-visible above. Hidden entirely when an asset has no * chapters (the template omits the block). */ .chapters { margin: 1rem 0 0; } .chapters__heading { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .chapters__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .chapter { display: flex; align-items: baseline; gap: 0.85rem; width: 100%; /* generous tap target for elderly hands on tablets */ min-height: 2.75rem; padding: 0.6rem 0.85rem; text-align: left; font-size: 1.05rem; line-height: 1.4; color: var(--ink); background: var(--card); border: 1px solid var(--card-edge); border-radius: 8px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .chapter:hover { background: var(--paper); border-color: var(--accent); } .chapter:active { background: var(--card-edge); } .chapter__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); } .chapter__title { flex: 1 1 auto; } .asset__caption { font-size: 1.2rem; margin: 0.85rem 0 0; line-height: 1.45; } /* Photo gallery — responsive grid of caption cards. */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; } .gallery .asset { margin: 0; } .gallery__img { width: 100%; border-radius: 10px; display: block; background: #efe7d4; } /* Zoom trigger wrapping each photo — a borderless button that fills the cell. */ .gallery__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: 10px; } .gallery__zoom:focus-visible { outline: 3px solid var(--accent, #8a5a2b); outline-offset: 3px; } .gallery__zoom-hint { position: absolute; left: 0.6rem; bottom: 0.6rem; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.95rem; padding: 0.25rem 0.6rem; border-radius: 999px; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } .gallery__zoom:hover .gallery__zoom-hint, .gallery__zoom:focus-visible .gallery__zoom-hint { opacity: 1; } /* No hover on iPads/phones — the hint would never appear. Show it always. */ @media (hover: none) { .gallery__zoom-hint { opacity: 1; } } /* Full-screen lightbox overlay. */ body.lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; background: rgba(20, 14, 6, 0.92); } .lightbox[hidden] { display: none; } .lightbox__figure { margin: 0; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .lightbox__img { max-width: 96vw; max-height: 82vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); background: #efe7d4; } .lightbox__caption { color: #f6efe0; font-size: 1.2rem; text-align: center; max-width: 60rem; } .lightbox__caption[hidden] { display: none; } .lightbox__close { position: absolute; top: 1rem; right: 1.25rem; width: 3rem; height: 3rem; font-size: 1.5rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; cursor: pointer; } .lightbox__close:hover { background: rgba(0, 0, 0, 0.75); } .lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Previous / next — large, obvious, and reachable by arrow keys too. Hidden * (by app.js) when the gallery has a single photo. */ .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; cursor: pointer; padding: 0; } .lightbox__nav:hover { background: rgba(0, 0, 0, 0.75); } .lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .lightbox__nav[hidden] { display: none; } .lightbox__prev { left: clamp(0.5rem, 2vw, 1.5rem); } .lightbox__next { right: clamp(0.5rem, 2vw, 1.5rem); } /* "Photo 3 of 14" — orientation inside the gallery. */ .lightbox__counter { color: #f6efe0; /* paper — the old #d8cdb4 sat ~3.5:1 on the dark overlay */ font-size: 1.05rem; font-variant-numeric: tabular-nums; } .lightbox__counter[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .gallery__zoom-hint { transition: none; } } .document__scan, .document__embed { width: 100%; border-radius: 10px; display: block; } .document__embed { min-height: 60vh; border: 1px solid var(--card-edge); } .document__download { margin-top: 1rem; } /* Per-asset footer: people tags + permalink + downloads. */ .asset__footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-edge); } .asset__people { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 0.85rem; font-size: 1.05rem; } .asset__people-label { color: var(--ink-soft); } /* Compact [Name ×] chip: name + a small subtle remove, integrated into one pill so multiple tagged people flow neatly instead of stacking. */ .person-chip { display: inline-flex; align-items: stretch; background: #efe7d4; border-radius: 999px; overflow: hidden; } .person-chip__name { display: inline-flex; align-items: center; padding: 0.3rem 0.25rem 0.3rem 0.8rem; color: var(--accent-deep); font-weight: 600; text-decoration: none; } .person-chip__name:hover { text-decoration: underline; } .person-chip__remove { display: inline-flex; margin: 0; } .person-chip__remove button { appearance: none; -webkit-appearance: none; background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 0 0.55rem; min-width: 0; min-height: 0; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; } .person-chip__remove button:hover { background: #e0c9a8; color: var(--error); } .person-chip__remove button:focus-visible { outline-offset: -3px; } .person-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0.2rem 0.6rem; margin: 0.15rem 0.3rem 0.15rem 0; border-radius: 8px; background: #efe7d4; color: var(--accent); font-weight: 600; text-decoration: none; } .person-tag:hover { background: #e0d4b8; } .person-tag--anon { color: var(--ink-soft); font-style: italic; cursor: default; } /* Utility links (permalink / download) sit quiet so the photo and caption * lead; the outlined edit buttons stay the loud affordance. Tap targets and * AAA contrast (accent on white) are unchanged. */ .asset__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0; } .asset__links a { font-weight: 600; font-size: 0.95rem; min-height: 44px; display: inline-flex; align-items: center; } .asset__download--master { color: var(--accent-deep); } /* ── Search ──────────────────────────────────────────────────────────────*/ .search-form { margin: 0 0 2rem; max-width: 40rem; } .search-form__label { display: block; font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; } .search-form__row { display: flex; gap: 0.6rem; } .search-form__row input { flex: 1 1 auto; } .search-form__row button { flex: 0 0 auto; } .search-count { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 1.25rem; } .search-results { list-style: none; margin: 0; padding: 0; } .search-result { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 1rem; } .search-result__link { display: flex; align-items: flex-start; gap: 1rem; text-decoration: none; } /* Square thumbnail to the left of each result; a tinted placeholder with a kind glyph when the item has no image (e.g. a person with only initials). */ .search-result__thumb { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 10px; object-fit: cover; object-position: top; /* keep faces / letterheads, never chop heads */ background: var(--paper); border: 1px solid var(--card-edge); } .search-result__thumb--none { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--ink-soft); } .search-result__text { display: block; min-width: 0; } .search-result__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem; } .search-result__link:hover .search-result__title { text-decoration: underline; } .search-result__title { font-size: 1.25rem; font-weight: 700; color: var(--accent); } .search-result__kind { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink); background: var(--accent-deep); padding: 0.1rem 0.5rem; border-radius: 6px; } .search-result__snippet { display: block; margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; } /* ── Empty state ─────────────────────────────────────────────────────────*/ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); } .empty-state h2 { font-size: 1.6rem; color: var(--ink); margin: 0 0 0.5rem; } .empty-state p { font-size: 1.2rem; } /* ── People index + person pages ─────────────────────────────────────────*/ .people-help { margin: 0 0 1.5rem; font-size: 1.15rem; } .people-help__link { font-weight: 700; } /* People index — dense grid of portrait tiles (custom avatar → face crop → initials). Compact and space-efficient; the whole tile is a big tap target. */ .people-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.9rem; } .person-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.55rem; padding: 1.1rem 0.75rem 0.95rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07); transition: transform 0.15s ease, box-shadow 0.15s ease; } .person-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .person-tile__avatar { width: 5.5rem; height: 5.5rem; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #efe7d4; border: 2px solid var(--card-edge); } .person-tile__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .person-tile__avatar img[hidden] { display: none; } .person-tile__initials { font-size: 1.7rem; font-weight: 700; color: var(--accent); } .person-tile__name { font-size: 1.1rem; font-weight: 700; color: var(--accent); line-height: 1.2; } .person-tile:hover .person-tile__name { text-decoration: underline; } .person-tile__count { font-size: 0.95rem; color: var(--ink-soft); } .person-header { margin: 0 0 1.5rem; } .person-meta, .person-notes { font-size: 1.15rem; color: var(--ink-soft); margin: 0.25rem 0 0; } .person-count { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 1.25rem; } /* Link from a person to their node in the genealogy tree (when matched). */ .person-tree-link { margin: 0.6rem 0 0; } .person-tree-link a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 1.05rem; font-weight: 700; } .person-memoriam { font-size: 1.25rem; font-style: italic; color: var(--accent-deep); margin: 0 0 0.25rem; } .person-gallery__link { text-decoration: none; display: block; } .person-gallery__link:hover .asset__caption { text-decoration: underline; } .person-gallery__event { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.2rem; } /* ── Tag-someone form (per-asset footer) ─────────────────────────────────*/ .tag-form { margin: 0.75rem 0 0; } .tag-form summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 36px; display: inline-flex; align-items: center; } .tag-form__body { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; } .tag-form__field { display: flex; flex-direction: column; gap: 0.25rem; } .tag-form__field label { font-weight: 600; font-size: 1rem; } .tag-form__field input { min-width: 14rem; } .tag-form__field textarea { min-width: 18rem; box-sizing: border-box; min-height: 3.4rem; padding: 0.5rem 0.7rem; font-family: inherit; font-size: 1.05rem; line-height: 1.4; resize: vertical; } .tag-form__optional { font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; } .tag-form__hint { flex-basis: 100%; margin: 0; color: var(--ink-soft); font-size: 0.95rem; } /* "Who are they?" description editor on the person page (mirrors caption-form). */ .who-form { margin: 0.85rem 0 0; } .who-form summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 36px; display: inline-flex; align-items: center; } .who-form__body { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; max-width: 40rem; } .who-form__body label { font-weight: 600; font-size: 1rem; } .who-form__body textarea { width: 100%; box-sizing: border-box; min-height: 4.5rem; padding: 0.6rem 0.7rem; font-family: inherit; font-size: 1.1rem; line-height: 1.4; resize: vertical; } .who-form__body button { align-self: flex-start; } /* ── Caption provenance + crowdsourced caption editing ───────────────────── */ /* An AI-generated caption is a GUESS, never family knowledge: make it visibly, unmistakably distinct from a human caption so no one reads it as fact. */ .caption-badge--ai { display: inline-block; margin: 0 0 0.35rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #ede4ff; color: #4b2e83; border: 1px solid #c9b6ef; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; } .asset__caption--ai .caption-text { font-style: italic; color: var(--ink-soft); } .asset__caption--empty { color: var(--ink-soft); font-style: italic; } .caption-empty-hint { font-size: 1rem; } /* Slideshow — the "▶ Play as slideshow" button beside the Photos heading, and the in-lightbox play/pause toggle (styled like the close button). */ .asset-group__headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .asset-group__headrow .asset-group__heading { margin: 0; } .slideshow-btn { font-weight: 700; } /* slideshow-btn rendered as a link needs the button look (it's an ). */ a.slideshow-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; background: var(--accent); color: var(--accent-ink); border-radius: 10px; text-decoration: none; } a.slideshow-btn:hover { background: var(--accent-deep); color: var(--accent-ink); } /* "Shuffle all photos" — the global slideshow entry on the home page. */ .page-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .page-title-row .page-title { margin-bottom: 0; } .shuffle-all-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.2rem; background: var(--accent); color: var(--accent-ink); border-radius: 999px; text-decoration: none; font-weight: 700; } .shuffle-all-btn:hover { background: var(--accent-deep); color: var(--accent-ink); } .person-count-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; } .person-count-row .person-count { margin: 0; } /* The slideshow deck is only data carriers for the lightbox — never shown. */ .slideshow-deck[hidden] { display: none; } .slideshow-restart { margin-top: 1.5rem; } .lightbox__play { position: absolute; top: clamp(0.5rem, 2vw, 1.5rem); left: clamp(0.5rem, 2vw, 1.5rem); min-height: 44px; min-width: 44px; padding: 0.55rem 1rem; background: rgba(0, 0, 0, 0.55); color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 10px; font-weight: 700; } .lightbox__play:hover { background: rgba(0, 0, 0, 0.75); } .lightbox__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .lightbox__play[hidden] { display: none; } /* Big-gallery pager — large, obvious page steps for a 500-photo event. */ .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; margin: 1rem 0; } .pager__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.2rem; background: var(--card); border: 2px solid var(--accent); border-radius: 10px; text-decoration: none; font-weight: 700; } .pager__btn:hover { background: #fbf7ef; color: var(--accent-deep); } .pager__status { color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* Gallery captions lead with the family facts — tagged names + year in the heirloom serif — and DEMOTE the AI prose to a quiet two-line clamp (full text + correction form live on the asset page). Names are the caption a family actually wants. */ .caption-people { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--ink); } .caption-year { color: var(--ink-soft); font-weight: 400; } .caption-text--ai { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.15rem; font-size: 0.95rem; font-style: italic; color: var(--ink-soft); } .caption-badge--ai-mini { font-style: normal; margin-right: 0.3rem; } .caption-form { margin: 0.75rem 0 0; } .caption-form summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 36px; display: inline-flex; align-items: center; } .caption-form__body { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; } .caption-form__field { display: flex; flex-direction: column; gap: 0.3rem; } .caption-form__field label { font-weight: 600; font-size: 1rem; } .caption-form__field textarea { width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: 0.6rem 0.7rem; font-family: inherit; font-size: 1.1rem; line-height: 1.4; resize: vertical; } .caption-form button { align-self: flex-start; } .caption-form__hint { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } /* ── Faces (Apple-Photos-style cluster grid + naming) ────────────────────*/ .faces-section { margin: 2rem 0; } .faces-section__title { margin: 0 0 0.3rem; } .faces-section__hint { margin: 0 0 1rem; color: var(--ink-soft); } /* Circular face thumbnails in a forgiving, large-target grid. */ .faces-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.25rem; } .faces-grid__item { margin: 0; } .face-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem; min-height: 44px; text-align: center; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; } .face-card:hover { background: #fbf7ef; color: var(--ink); } .face-card__img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 50%; background: #efe7d4; border: 2px solid var(--card-edge); } .face-card--unnamed .face-card__img { border-color: var(--accent); } .face-card__label { display: flex; flex-direction: column; gap: 0.15rem; } .face-card__name { font-weight: 600; font-size: 1.05rem; } .face-card__name--unknown { color: var(--accent); } .face-card__count { color: var(--ink-soft); font-size: 0.95rem; } /* Naming form on a single cluster page. */ .face-name { margin: 1.5rem 0 2rem; padding: 1.25rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; } .face-name__title { margin: 0 0 0.3rem; } .face-name__hint { margin: 0 0 1rem; color: var(--ink-soft); } .face-name__form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 32rem; } .face-name__label { font-weight: 600; } .face-name__submit { align-self: flex-start; } /* ── "Who is this?" — one face at a time (/faces/next) ─────────────────── * The naming game: ONE big face, big candidate buttons, a quiet skip. A * single question at a time is the interaction grain elderly users handle * best — no thousand-row grid. */ .facenext-cta { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1.75rem; padding: 1.1rem 1.3rem; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--accent); border-radius: 14px; } .facenext-cta:hover { background: #fbf7ef; color: var(--ink); } .facenext-cta__big { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; color: var(--accent); } .facenext-cta__sub { color: var(--ink-soft); } .facenext { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 36rem; margin: 0 auto; text-align: center; } .facenext__face { width: clamp(12rem, 50vw, 16rem); height: clamp(12rem, 50vw, 16rem); object-fit: cover; border-radius: 18px; border: 3px solid var(--accent); background: #efe7d4; box-shadow: 0 6px 18px rgba(43, 38, 32, 0.18); } .facenext__count { margin: 0; color: var(--ink-soft); } .facenext__hint { margin: 0.25rem 0 0; font-weight: 600; } .facenext__candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; width: 100%; } .facenext__candidates form { display: contents; } .facenext__candidate { width: 100%; min-height: 3.2rem; font-size: 1.15rem; font-weight: 600; } .facenext__other { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 0.8rem 1rem; } .facenext__other summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; } .facenext__nameform { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.6rem; } .facenext__nameform label { font-weight: 600; } .facenext__nameform button { align-self: flex-start; } /* The skip is deliberately quiet — present, never competing with naming. */ .facenext__skip button { background: var(--card); color: var(--accent); border: 2px solid var(--card-edge); } .facenext__skip button:hover { background: #fbf7ef; color: var(--accent-deep); } .facenext__context { margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--card-edge); } .facenext__context figcaption { color: var(--ink-soft); margin-bottom: 0.75rem; } .facenext__context img { max-width: 100%; border-radius: 12px; border: 1px solid var(--card-edge); } .facenext-banner { margin: 0 0 1rem; padding: 0.8rem 1.1rem; background: #eef3e7; border: 1px solid #b8c9a3; border-radius: 12px; color: #2d4a14; /* ~8:1 on the pale green wash */ font-weight: 600; } .facenext-progress { margin: 0 0 1.5rem; font-family: var(--serif); color: var(--ink-soft); } /* Face crops in the cluster gallery — square so heads read clearly. */ .face-cluster__face { aspect-ratio: 1 / 1; object-fit: cover; } .faces-cluster__event { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.25rem; } .face-cluster__count-h { margin-top: 2rem; } @media (max-width: 30rem) { .faces-grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1rem; } .face-card__img { width: 6rem; height: 6rem; } } /* ── Reduced motion — kill every transition / animation ──────────────────*/ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Asset page: photo with clickable detected-face boxes ──────────────────── */ .asset-help { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 0.75rem; } .asset-noface { color: var(--ink-soft); margin: 0.75rem 0; } .asset-stage { position: relative; display: inline-block; max-width: 100%; } .asset-stage__img { display: block; width: 100%; height: auto; border-radius: 10px; background: #efe7d4; } .facebox-layer { position: absolute; inset: 0; } .facebox-layer[hidden] { display: none; } .facebox { position: absolute; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); } .facebox--named { border-color: var(--accent); border-style: solid; } .facebox--unnamed { border-style: dashed; border-color: #ffd24a; } .facebox__name { position: absolute; left: -2px; top: 100%; margin-top: 2px; background: var(--accent); color: #fff; font-size: 0.9rem; padding: 0.12rem 0.45rem; border-radius: 4px; white-space: nowrap; text-decoration: none; } .facebox__tag { position: absolute; left: -2px; top: 100%; margin-top: 2px; background: rgba(0, 0, 0, 0.72); color: #fff; border: 0; cursor: pointer; font-size: 0.9rem; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; } .facebox__form { position: absolute; left: -2px; top: 100%; margin-top: 2px; z-index: 5; display: flex; gap: 0.3rem; background: #fff; padding: 0.3rem; border: 1px solid var(--card-edge); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); } .facebox__form[hidden] { display: none; } .facebox__form input { font-size: 0.95rem; padding: 0.25rem 0.45rem; min-width: 10rem; } .asset__people { margin: 0.85rem 0; font-size: 1.1rem; } .tag-link { margin: 0.75rem 0 0; font-size: 1.1rem; } .tag-link a { font-weight: 700; } /* ── Editing affordances — make "you can edit this" obvious (NN/g: visible, recognizable controls; icon + label). Edit/Add toggles look like outlined buttons, not bare links, so non-technical family members recognize them. ── */ .who-form summary, .caption-form summary, .edit-toggle { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: 1.02rem; font-weight: 600; color: var(--accent); background: var(--card); border: 1.5px solid var(--accent); border-radius: 9px; padding: 0.45rem 0.85rem; min-height: 44px; /* full tap target */ box-sizing: border-box; list-style: none; width: max-content; max-width: 100%; } .who-form summary::-webkit-details-marker, .caption-form summary::-webkit-details-marker { display: none; } .who-form summary::marker, .caption-form summary::marker { content: ""; } .who-form summary:hover, .caption-form summary:hover, .edit-toggle:hover { background: var(--accent); color: var(--accent-ink); } .who-form[open] summary, .caption-form[open] summary { margin-bottom: 0.6rem; } /* Destructive tag-remove × — clearer hit area; the click is confirmed in JS. */ .person-chip__remove button { cursor: pointer; } .asset-tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0 0 0.85rem; } .asset-tag-hint { color: var(--ink-soft); font-size: 1rem; } .asset-tag-hint[hidden] { display: none; } /* Guestbook — notes from the family on an event. */ .notes { margin-top: 2.5rem; max-width: 44rem; } .notes__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .notes__item { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 0.9rem 1.1rem; } .notes__body { margin: 0 0 0.4rem; font-size: 1.1rem; line-height: 1.55; white-space: pre-line; } .notes__byline { margin: 0; color: var(--ink-soft); font-size: 0.98rem; display: flex; align-items: baseline; gap: 0.75rem; } .notes__delete { display: inline; margin: 0; } .notes__delete-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--ink-soft); font-size: 0.9rem; text-decoration: underline; } .notes__empty { color: var(--ink-soft); } .notes__form { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .notes__form textarea { width: 100%; font: inherit; font-size: 1.05rem; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--card); } /* "New" ribbon on event cards + the welcome-back line. */ .event-card__badge--new { background: var(--accent, #8a5a2b); color: #fff; } .recent-strip__since { margin: 0.2rem 0 0.9rem; font-size: 1.05rem; color: var(--ink-soft); } /* ── Films shelf: horizontal film cards, era-grouped ─────────────────────── */ .film-group { margin-bottom: 2.25rem; } .film-list { display: flex; flex-direction: column; gap: 0.9rem; } .film-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 0.8rem; text-decoration: none; color: inherit; } .film-card:hover { border-color: var(--accent, #8a5a2b); } .film-card:focus-visible { outline: 3px solid var(--accent, #8a5a2b); outline-offset: 3px; } .film-card__thumbwrap { position: relative; flex: 0 0 clamp(7rem, 22vw, 11rem); border-radius: 8px; overflow: hidden; background: #efe7d4; aspect-ratio: 16 / 10; } .film-card__thumbwrap--placeholder { display: flex; align-items: center; justify-content: center; font-size: 2rem; } .film-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .film-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } .film-card__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .film-card__title { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; } .film-card__meta { color: var(--ink-soft); font-size: 1rem; } .film-card__chapters { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Asset page: tidy below-photo meta (consistent sizes + spacing) ───────── */ .asset-meta { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 60rem; } .asset-meta__block { margin: 0; } .asset-meta__caption { font-size: 1.15rem; line-height: 1.5; margin: 0 0 0.7rem; } .asset-meta__heading { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.6rem; } /* "More with the same people" — thumbnail rabbit-hole strip. */ .related-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; } .related-strip__item { display: block; border-radius: 10px; overflow: hidden; background: #efe7d4; } .related-strip__item:focus-visible { outline: 3px solid var(--accent, #8a5a2b); outline-offset: 3px; } .related-strip__thumb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .asset-people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .asset-people-list a { display: inline-block; font-size: 1.02rem; font-weight: 600; text-decoration: none; color: var(--accent); background: var(--card); border: 1px solid var(--card-edge); border-radius: 999px; padding: 0.35rem 0.8rem; } .asset-people-list a:hover { background: var(--accent); color: var(--accent-ink); } .asset-meta__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--card-edge); font-size: 1rem; } /* Face labels appear only on hover / tap (not all at once) so a name box never covers a neighbouring face. Boxes stay outlined to show named vs unnamed. */ .facebox__name, .facebox__tag { opacity: 0; transition: opacity 0.12s ease; } .facebox:hover .facebox__name, .facebox:hover .facebox__tag, .facebox:focus-within .facebox__name, .facebox:focus-within .facebox__tag, .facebox.is-active .facebox__name, .facebox.is-active .facebox__tag { opacity: 1; } .facebox--unnamed { cursor: pointer; } .facebox--named { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .facebox__name, .facebox__tag { transition: none; } } /* ── Admin stat cards (spalterdigital-style metric cards) ──────────────────── Clean white cards on the admin's warm background: uppercase label, big tabular accent-colored number, optional sub-line. Auto-fitting grid. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 0 0 1.75rem; } .stat-card { background: #fff; border: 1px solid rgba(60, 50, 30, 0.10); border-radius: 14px; padding: 1.05rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); min-height: 104px; } .stat-card-label { font-size: 0.72rem; color: #8a8275; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .stat-card-value { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin-top: 0.15rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-card-sub { font-size: 0.82rem; color: #6b6356; margin-top: auto; padding-top: 0.35rem; } /* larger text-size settings keep the cards readable */ html[data-textsize="lg"] .stat-card-value { font-size: 2.5rem; } html[data-textsize="xl"] .stat-card-value { font-size: 2.85rem; } /* ── Admin pages — these classes were referenced by the templates but never * styled, so the area rendered as raw browser defaults. Same heirloom * language as the rest of the site, tuned for data density. ──────────────── */ /* Section tabs: pill nav with a filled current state. */ .admin-subnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--card-edge); } .admin-subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.1rem; border: 2px solid var(--accent); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--accent); background: var(--card); } .admin-subnav a:hover { background: var(--accent); color: var(--accent-ink); } .admin-subnav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); } .admin-section { margin: 0 0 2.5rem; } .admin-section h2 { font-size: 1.35rem; margin: 0 0 0.75rem; } /* Data tables: padded cells, hairline rules, a card surface, and horizontal * scroll on narrow screens instead of a crushed layout. */ .admin-table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.98rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; } .admin-table th, .admin-table td { text-align: left; padding: 0.6rem 1rem; border-bottom: 1px solid var(--card-edge); white-space: nowrap; } .admin-table thead th { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); background: #f6f0e2; } .admin-table tbody tr:last-child td { border-bottom: 0; } .admin-table tbody tr:hover td { background: #fbf7ef; } .role-badge { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .role-badge.role-admin { background: var(--accent); color: var(--accent-ink); } .role-badge.role-viewer { background: var(--card); color: var(--ink-soft); border: 1px solid var(--card-edge); } .admin-note, .admin-count, .admin-empty { color: var(--ink-soft); } .admin-note { font-size: 1.05rem; max-width: 50rem; } .admin-note code { background: #f0e9d8; border: 1px solid var(--card-edge); border-radius: 6px; padding: 0.1rem 0.45rem; font-size: 0.92em; white-space: nowrap; } .admin-count { font-size: 0.95rem; margin-top: 0.75rem; } .admin-empty { font-style: italic; } /* Verbatim letter/document transcription on the asset page — collapsed by default (the image leads), opens to a paper-card block that preserves the original line breaks like a typed page. */ .transcript { margin-top: 0.5rem; } .transcript__summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 0.25rem 0; } .transcript__summary:hover { color: var(--accent-deep); } .transcript__body { white-space: pre-wrap; font-family: "Iowan Old Style", Palatino, Georgia, serif; line-height: 1.6; background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; padding: 1rem 1.15rem; margin-top: 0.6rem; color: var(--ink); } .transcript__note { font-size: 0.85rem; color: var(--ink-soft); margin: 0.4rem 0 0; } /* ── "Through the Years" — photo-level chronological wall ─────────────────── */ .tty-decade { margin: 0 0 2.2rem; } .tty-decade__head { font-size: 2rem; color: var(--accent); margin: 1.6rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 3px solid var(--card-edge); } .tty-year { margin: 0 0 1.4rem; } .tty-year__label { font-size: 1.3rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0.6rem 0 0.6rem; } .tty-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.9rem; } .tty-item { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; overflow: hidden; height: 100%; transition: transform 0.12s ease, box-shadow 0.12s ease; } .tty-item:hover, .tty-item:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(64, 50, 32, 0.14); outline: none; } .tty-item:focus-visible { box-shadow: 0 0 0 3px var(--focus); } .tty-item__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; /* keep faces / letterheads, never chop heads */ display: block; background: var(--paper); } .tty-item__meta { padding: 0.5rem 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; } .tty-item__event { font-size: 0.9rem; font-weight: 700; color: var(--ink); line-height: 1.2; } .tty-item__src { font-size: 0.75rem; color: var(--ink-soft); } /* Reunion cards: per-event photo/film count under the year (was inline in * reunions.html). */ .event-card__count { display: block; color: var(--ink-soft); font-size: 0.85em; margin-top: 0.15em; } /* ── Print — family members print photos and letters. Strip the chrome, keep * the substance; never waste their ink on brown buttons. ─────────────────── */ @media print { .site-header, .site-footer, .skip-link, .back-to-top, .breadcrumb, .tag-form, .caption-form, .who-form, .asset-tagbar, .tag-link, .asset__links, .asset-meta__links, .person-chip__remove, .search-form, .gallery__zoom-hint, .lightbox { display: none !important; } body { background: #fff; color: #000; } .asset, .event-card, .person-tile { box-shadow: none; border-color: #bbb; } .transcript[open] .transcript__body { border: 1px solid #bbb; } a { color: #000; text-decoration: none; } } /* ── "Add to Home Screen / Add to Dock" nudge (iOS + macOS Safari; app.js) ── * Bottom-fixed parchment card. Large print for elderly readers; respects the * safe-area inset so it floats just above the toolbar. * NB: the author display:flex below beats the UA `[hidden]` rule, so the * banner would stay on screen even when JS hides it — honor hidden explicitly. */ .a2hs[hidden] { display: none; } .a2hs { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 0.85rem; max-width: 32rem; margin: 0 auto; padding: 1rem 1.1rem; background: #fffdf7; border: 1px solid var(--rule, #d9cdb0); border-radius: 14px; box-shadow: 0 0.5rem 1.5rem rgba(43, 38, 32, 0.22); } .a2hs__icon { flex: none; width: 52px; height: 52px; border-radius: 12px; } .a2hs__text { margin: 0; font-size: 1.15rem; line-height: 1.45; color: var(--ink); } .a2hs__share { vertical-align: -0.3em; color: var(--accent); } .a2hs__close { position: absolute; top: 0.35rem; right: 0.5rem; width: 2rem; height: 2rem; padding: 0; font-size: 1.1rem; line-height: 1; color: var(--ink-soft); background: transparent; border: none; cursor: pointer; } /* The tail pointing down toward the Safari toolbar / Share button. */ .a2hs::after { content: ""; position: absolute; bottom: -0.6rem; left: 50%; transform: translateX(-50%); border-left: 0.7rem solid transparent; border-right: 0.7rem solid transparent; border-top: 0.7rem solid #fffdf7; } @media (prefers-reduced-motion: no-preference) { .a2hs { animation: a2hs-rise 0.4s ease both; } @keyframes a2hs-rise { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } } }