/* ========================================================================== Family Heritage — main styles Change the colours below to restyle the whole site. ========================================================================== */ :root { --fh-bg: #f4f6f8; --fh-surface: #ffffff; --fh-ink: #24292f; --fh-muted: #616a76; --fh-line: #dde3ea; --fh-accent: #3f6b4f; --fh-accent-ink: #ffffff; --fh-accent-soft: #e6efe7; --fh-gold: #9c8467; --fh-connector: #b3bcc6; --fh-radius: 14px; --fh-shadow: 0 1px 2px rgba(25, 35, 48, .06), 0 6px 20px rgba(25, 35, 48, .06); --fh-serif: "Cormorant Garamond", "Noto Serif Devanagari", Georgia, "Times New Roman", serif; --fh-sans: "Source Sans 3", "Mukta", -apple-system, "Segoe UI", Roboto, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fh-bg); color: var(--fh-ink); font: 17px/1.65 var(--fh-sans); display: flex; flex-direction: column; min-height: 100vh; } img { max-width: 100%; height: auto; } a { color: var(--fh-accent); } h1, h2, h3 { font-family: var(--fh-serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; } h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { clip: auto; width: auto; height: auto; left: 12px; top: 12px; z-index: 100; background: var(--fh-surface); padding: 8px 14px; border-radius: 8px; } .fh-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; } .fh-main { flex: 1; } .fh-muted { color: var(--fh-muted); } .fh-card { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); padding: 28px; } /* Buttons ---------------------------------------------------------------- */ .fh-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--fh-accent); color: var(--fh-accent-ink); border: 0; border-radius: 999px; padding: 11px 22px; font: 600 1rem/1 var(--fh-sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .fh-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .fh-btn:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 2px; } .fh-btn--lg { padding: 15px 30px; font-size: 1.08rem; } /* Header ----------------------------------------------------------------- */ .fh-header { background: var(--fh-surface); border-bottom: 1px solid var(--fh-line); position: relative; z-index: 10; } .fh-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; } .fh-brand { display: flex; align-items: center; gap: 10px; color: var(--fh-ink); text-decoration: none; font: 700 1.5rem/1 var(--fh-serif); } .fh-brand__mark { width: 32px; height: 32px; color: var(--fh-accent); } .fh-brand__logo { max-height: 44px; width: auto; } .fh-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .fh-menu a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--fh-ink); text-decoration: none; font-weight: 600; } .fh-menu a:hover, .fh-menu .current-menu-item > a, .fh-menu .current_page_item > a { background: var(--fh-accent-soft); color: var(--fh-accent); } .fh-menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; } .fh-menu-toggle span:first-child, .fh-menu-toggle span:first-child::before, .fh-menu-toggle span:first-child::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--fh-ink); content: ""; border-radius: 2px; } .fh-menu-toggle span:first-child { top: 21px; } .fh-menu-toggle span:first-child::before { top: -7px; left: 0; } .fh-menu-toggle span:first-child::after { top: 7px; left: 0; } @media (max-width: 720px) { .fh-menu-toggle { display: block; } .fh-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--fh-surface); border-bottom: 1px solid var(--fh-line); padding: 8px 16px 16px; } .fh-nav.is-open { display: block; } .fh-menu { flex-direction: column; } } /* Hero ------------------------------------------------------------------- */ .fh-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--fh-accent-soft), var(--fh-bg)); padding: 96px 0 120px; text-align: center; } .fh-hero__inner { position: relative; z-index: 1; } .fh-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 600; color: var(--fh-gold); margin: 0 0 12px; } .fh-hero__title { font-size: clamp(2.8rem, 8vw, 5rem); margin-bottom: 12px; } .fh-hero__tagline { font-size: 1.2rem; color: var(--fh-muted); max-width: 560px; margin: 0 auto 32px; } .fh-hero__branches { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: min(900px, 140%); height: 300px; color: var(--fh-accent); opacity: .09; } /* Home ------------------------------------------------------------------- */ .fh-home { padding: 64px 20px 80px; } .fh-home__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; } .fh-home__story { font-size: 1.08rem; margin-bottom: 40px; } .fh-home__main { min-width: 0; } .fh-origins h2 { margin-top: 0; } .fh-origins__text { font-size: 1.08rem; line-height: 1.75; } .fh-origins__text p { margin: 0 0 1em; } html[lang^="ne"] .fh-origins__text { font-size: 1.12rem; line-height: 1.9; } .fh-origins__map { margin: 26px 0 0; border: 1px solid var(--fh-line); border-radius: var(--fh-radius); overflow: hidden; background: var(--fh-surface); box-shadow: var(--fh-shadow); } .fh-origins__map iframe { display: block; width: 100%; height: 380px; border: 0; } .fh-origins__map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; font-size: .95rem; } .fh-origins__pin { color: var(--fh-accent); display: inline-flex; } .fh-origins__map figcaption a { margin-left: auto; color: var(--fh-accent); font-weight: 600; } @media (max-width: 640px) { .fh-origins__map iframe { height: 280px; } .fh-origins__map figcaption a { margin-left: 0; width: 100%; } } .fh-home__tree { position: sticky; top: 24px; } .fh-home__lock { width: 52px; height: 52px; border-radius: 50%; background: var(--fh-accent-soft); color: var(--fh-accent); display: grid; place-items: center; margin-bottom: 14px; } @media (max-width: 820px) { .fh-home__grid { grid-template-columns: 1fr; } .fh-home__tree { position: static; } } /* Pages ------------------------------------------------------------------ */ .fh-page { padding: 48px 20px 72px; } .fh-content > *:first-child { margin-top: 0; } .fh-post { margin-bottom: 24px; } .fh-footer { border-top: 1px solid var(--fh-line); color: var(--fh-muted); font-size: .92rem; text-align: center; padding: 24px 0; } .fh-footer p { margin: 0; } /* Password lock ---------------------------------------------------------- */ .fh-lock { max-width: 440px; margin: 40px auto; text-align: center; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); padding: 40px 32px; } .fh-lock__icon { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: var(--fh-accent-soft); color: var(--fh-accent); display: grid; place-items: center; } .fh-lock__title { font-size: 1.9rem; } .fh-lock__text { color: var(--fh-muted); margin: 0 0 22px; } .fh-lock__form { display: flex; gap: 8px; } .fh-lock__form input { flex: 1; min-width: 0; padding: 11px 16px; border: 1px solid var(--fh-line); border-radius: 999px; font: inherit; background: var(--fh-bg); } .fh-lock__form input:focus { outline: 2px solid var(--fh-accent); outline-offset: 1px; } @media (max-width: 420px) { .fh-lock__form { flex-direction: column; } .fh-lock__form .fh-btn { justify-content: center; } } /* Family tree ------------------------------------------------------------ */ .fh-tree-page { max-width: none; } .fh-tree-head { max-width: 1120px; margin: 0 auto 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .fh-tree-head .fh-page__title { margin-bottom: 4px; } .fh-tree-head p { margin: 0; } .fh-tree-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .fh-tree-tools input { padding: 9px 14px; border: 1px solid var(--fh-line); border-radius: 999px; font: inherit; font-size: .95rem; background: var(--fh-surface); width: 200px; } .fh-icon-btn { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--fh-line); background: var(--fh-surface); color: var(--fh-ink); font: 600 1rem/1 var(--fh-sans); cursor: pointer; } .fh-icon-btn:hover { border-color: var(--fh-accent); color: var(--fh-accent); } .fh-tree-viewport { background: var(--fh-surface); background-image: radial-gradient(var(--fh-line) 1px, transparent 1px); background-size: 22px 22px; border: 1px solid var(--fh-line); border-radius: var(--fh-radius); overflow: auto; height: min(72vh, 760px); cursor: grab; -webkit-overflow-scrolling: touch; } .fh-tree-viewport.is-dragging { cursor: grabbing; user-select: none; } .fh-tree { display: inline-flex; flex-direction: column; gap: 48px; padding: 40px; min-width: 100%; transform-origin: 0 0; align-items: center; } .fh-tree-empty { padding: 60px; text-align: center; color: var(--fh-muted); } /* Connector lines (nested lists) */ .fh-tree ul { position: relative; display: flex; width: max-content; justify-content: center; margin: 0; padding: 28px 0 0; list-style: none; } .fh-tree > ul { padding-top: 0; } .fh-tree li { position: relative; padding: 28px 10px 0; text-align: center; display: flex; flex-direction: column; align-items: center; } .fh-tree li::before, .fh-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 28px; border-top: 2px solid var(--fh-connector); } .fh-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--fh-connector); } .fh-tree li:only-child::before, .fh-tree li:only-child::after { display: none; } .fh-tree li:only-child { padding-top: 0; } .fh-tree li:first-child::before, .fh-tree li:last-child::after { border: 0 none; } .fh-tree li:last-child::before { border-right: 2px solid var(--fh-connector); border-radius: 0 10px 0 0; } .fh-tree li:first-child::after { border-radius: 10px 0 0 0; } .fh-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 28px; border-left: 2px solid var(--fh-connector); } /* Couple + person cards */ .fh-couple { display: flex; align-items: stretch; gap: 0; position: relative; } .fh-couple__link { width: 22px; height: 2px; background: var(--fh-gold); position: relative; align-self: center; } .fh-couple__link::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--fh-gold); transform: translate(-50%, -50%); } .fh-card-person { width: 150px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 12px; padding: 14px 10px 12px; box-shadow: var(--fh-shadow); cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color .15s, transform .15s, box-shadow .15s; } .fh-card-person:hover { border-color: var(--fh-accent); transform: translateY(-2px); } .fh-card-person:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 2px; } .fh-card-person.is-deceased { background: #eef1f4; } /* Male / female colours */ .fh-card-person.is-male { background: #edf1f8; border-color: #c6d0e2; border-top: 5px solid #2f4f86; } .fh-card-person.is-female { background: #f8ecee; border-color: #e6c6cd; border-top: 5px solid #a33b57; } .fh-card-person.is-male.is-deceased { background: #e8eaee; } .fh-card-person.is-female.is-deceased { background: #efe6e7; } .fh-card-person.is-male .fh-avatar { background: #dde5f2; color: #26406e; box-shadow: 0 0 0 2px #2f4f86; } .fh-card-person.is-female .fh-avatar { background: #f3dde2; color: #8c2d46; box-shadow: 0 0 0 2px #a33b57; } .fh-card-person.is-male:hover { border-color: #2f4f86; border-top-color: #2f4f86; } .fh-card-person.is-female:hover { border-color: #a33b57; } /* View switch + colour key */ .fh-view-bar { max-width: 1120px; margin: 0 auto 14px; display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; } .fh-view-switch { display: inline-flex; border: 1px solid var(--fh-line); border-radius: 999px; background: var(--fh-surface); padding: 3px; flex-wrap: wrap; } .fh-view-switch button { border: 0; background: none; border-radius: 999px; padding: 8px 14px; font: 600 .92rem/1.1 var(--fh-sans); color: var(--fh-ink); cursor: pointer; white-space: nowrap; } .fh-view-switch button[aria-pressed="true"] { background: var(--fh-accent); color: #fff; } .fh-view-switch button:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 1px; } .fh-view-root { display: inline-flex; gap: 8px; align-items: center; font-size: .92rem; min-width: 0; } .fh-view-root span { white-space: nowrap; } .fh-view-root[hidden] { display: none; } .fh-view-root select { padding: 7px 10px; border: 1px solid var(--fh-line); border-radius: 8px; font: inherit; background: var(--fh-surface); max-width: 260px; } .fh-legend { display: inline-flex; gap: 14px; margin-left: auto; font-size: .88rem; color: var(--fh-muted); } .fh-legend__item::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; } .fh-legend__item.is-male::before { background: #edf1f8; border: 2px solid #2f4f86; } .fh-legend__item.is-female::before { background: #f8ecee; border: 2px solid #a33b57; } @media (max-width: 640px) { .fh-view-switch { width: 100%; } .fh-view-switch button { flex: 1 1 auto; padding: 8px 8px; font-size: .86rem; } .fh-legend { margin-left: 0; } .fh-view-root { width: 100%; } .fh-view-root select { flex: 1; min-width: 0; max-width: none; } } .fh-card-person.is-match { border-color: var(--fh-gold); box-shadow: 0 0 0 3px rgba(156, 132, 103, .35), var(--fh-shadow); } .fh-card-person.is-dim { opacity: .35; } .fh-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fh-accent-soft); color: var(--fh-accent); display: grid; place-items: center; font: 700 1.2rem/1 var(--fh-serif); border: 2px solid var(--fh-surface); box-shadow: 0 0 0 1px var(--fh-line); } .fh-card-person__name { font: 600 1.08rem/1.15 var(--fh-serif); } .fh-card-person__years { font-size: .82rem; color: var(--fh-muted); } /* Person dialog */ .fh-person { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: var(--fh-radius); padding: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); color: var(--fh-ink); background: var(--fh-surface); } .fh-person::backdrop { background: rgba(25, 35, 48, .45); } .fh-person__close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--fh-muted); padding: 6px; } .fh-person__head { display: flex; gap: 18px; align-items: center; padding: 28px 28px 18px; background: var(--fh-accent-soft); } .fh-person__head .fh-avatar { width: 88px; height: 88px; font-size: 1.8rem; } .fh-person__head h2 { margin: 0 0 4px; font-size: 1.8rem; } .fh-person__body { padding: 20px 28px 28px; } .fh-person dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; } .fh-person dt { color: var(--fh-muted); font-size: .9rem; } .fh-person dd { margin: 0; } .fh-person .fh-link { background: none; border: 0; padding: 0; color: var(--fh-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .fh-person__bio { border-top: 1px solid var(--fh-line); padding-top: 14px; } .fh-person__bio p:last-child { margin-bottom: 0; } @media (max-width: 600px) { .fh-tree-tools input { width: 100%; flex: 1 1 100%; } .fh-tree-viewport { height: 70vh; } .fh-page { padding: 32px 16px 56px; } } /* Gender, passport photo & family photos -------------------------------- */ .fh-card-person.is-male { border-top: 3px solid #5b7fa6; } .fh-card-person.is-female { border-top: 3px solid #b0667e; } .fh-card-person.is-male .fh-avatar { background: #e5edf6; color: #3f5f84; } .fh-card-person.is-female .fh-avatar { background: #f6e6ec; color: #8e4760; } .fh-avatar-btn { background: none; border: 0; padding: 0; cursor: zoom-in; border-radius: 50%; } .fh-avatar-btn:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 2px; } .fh-person__gallery { border-top: 1px solid var(--fh-line); padding-top: 14px; margin-top: 14px; } .fh-person__gallery h3 { font-size: 1.25rem; margin-bottom: 10px; } .fh-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .fh-gallery__item { padding: 0; border: 0; background: var(--fh-accent-soft); border-radius: 8px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; } .fh-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .fh-gallery__item:hover img { transform: scale(1.05); } .fh-gallery__item:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 2px; } .fh-person { max-height: calc(100vh - 32px); overflow: auto; } .fh-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 18, 22, .92); display: flex; align-items: center; justify-content: center; padding: 48px 56px; } .fh-viewer[hidden] { display: none; } .fh-viewer figure { margin: 0; text-align: center; max-width: 100%; max-height: 100%; } .fh-viewer img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 8px; display: block; margin: 0 auto; } .fh-viewer figcaption { color: #eee; margin-top: 10px; font-size: .95rem; } .fh-viewer__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: #fff; font-size: 2.2rem; cursor: pointer; line-height: 1; } .fh-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 2rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; } .fh-viewer__nav[hidden] { display: none; } .fh-viewer__prev { left: 8px; } .fh-viewer__next { right: 8px; } /* Auto-lock -------------------------------------------------------------- */ .fh-lock-now { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; } .fh-lock-toast { position: fixed; inset: auto auto 24px 50%; margin: 0; border: 0; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; background: var(--fh-ink); color: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px); } .fh-lock-toast[hidden], .fh-lock-toast[popover]:not(:popover-open) { display: none; } .fh-lock-toast .fh-btn { padding: 9px 16px; } .fh-lock-toast > * { white-space: nowrap; } .fh-lock__notice { background: #f3f5f8; color: #6b5a45; border-radius: 8px; padding: 8px 12px; font-size: .95rem; margin: 0 0 14px; } body.fh-is-locking .fh-tree-page { visibility: hidden; } /* Picture / export buttons ------------------------------------------------ */ .fh-tool-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; text-decoration: none; } .fh-tool-btn[aria-busy="true"] { opacity: .6; cursor: progress; } .fh-lock__hint { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--fh-accent-soft); color: var(--fh-accent); border-radius: 8px; padding: 8px 12px; margin: -8px 0 18px; font-weight: 600; font-size: .95rem; } /* Gallery & Blog ---------------------------------------------------------- */ .fh-family-page .fh-tree-head { max-width: none; } .fh-empty { background: var(--fh-surface); border: 1px dashed var(--fh-line); border-radius: var(--fh-radius); padding: 40px 20px; text-align: center; color: var(--fh-muted); } .fh-album-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 0 0 40px; } .fh-album-nav a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--fh-ink); background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 12px; overflow: hidden; box-shadow: var(--fh-shadow); transition: transform .15s, border-color .15s; padding-bottom: 10px; } .fh-album-nav a:hover { transform: translateY(-2px); border-color: var(--fh-accent); } .fh-album-nav img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; } .fh-album-nav span { font: 600 1.15rem/1.2 var(--fh-serif); padding: 0 12px; } .fh-album-nav small { color: var(--fh-muted); padding: 0 12px; } .fh-album { margin: 0 0 56px; scroll-margin-top: 20px; } .fh-album__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--fh-line); padding-bottom: 8px; margin-bottom: 14px; } .fh-album__head h2 { margin: 0; } .fh-album__text { max-width: 720px; margin-bottom: 16px; } .fh-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .fh-photo-grid__item { display: block; border-radius: 10px; overflow: hidden; background: var(--fh-accent-soft); aspect-ratio: 1; } .fh-photo-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .fh-photo-grid__item:hover img { transform: scale(1.04); } .fh-photo-grid__item:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 2px; } @media (max-width: 600px) { .fh-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } } .fh-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .fh-blog-card { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); overflow: hidden; box-shadow: var(--fh-shadow); display: flex; flex-direction: column; } .fh-blog-card__img { display: block; aspect-ratio: 16 / 10; background: var(--fh-accent-soft); } .fh-blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fh-blog-card__noimg { display: grid; place-items: center; height: 100%; color: var(--fh-accent); opacity: .6; } .fh-blog-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .fh-blog-card__date { margin: 0 0 4px; font-size: .88rem; } .fh-blog-card h2 { font-size: 1.55rem; margin: 0 0 8px; } .fh-blog-card h2 a { color: var(--fh-ink); text-decoration: none; } .fh-blog-card h2 a:hover { color: var(--fh-accent); } .fh-blog-card p { margin: 0 0 12px; } .fh-readmore { margin-top: auto; font-weight: 600; text-decoration: none; } .fh-blog-bar { align-items: center; } .fh-back { font-weight: 600; text-decoration: none; } .fh-post-single { max-width: 760px; margin: 0 auto; } .fh-post-single .fh-page__title { margin-bottom: 20px; } .fh-post-single__cover { margin: 0 0 28px; } .fh-post-single__cover img { width: 100%; height: auto; border-radius: var(--fh-radius); display: block; } .fh-post-single__body { font-size: 1.08rem; } .fh-post-single__body img { border-radius: 10px; height: auto; } .fh-post-single__body .alignleft { float: left; margin: 6px 20px 12px 0; } .fh-post-single__body .alignright { float: right; margin: 6px 0 12px 20px; } .fh-post-single__body .aligncenter { display: block; margin: 20px auto; } .fh-post-single__body .wp-caption { max-width: 100%; } .fh-post-single__body .wp-caption-text, .fh-post-single__body figcaption { color: var(--fh-muted); font-size: .9rem; text-align: center; } .fh-post-single__body .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .fh-post-single__body .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; } .fh-post-single__body::after { content: ""; display: table; clear: both; } .fh-post-nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--fh-line); margin-top: 40px; padding-top: 18px; } .fh-post-nav a { font-weight: 600; text-decoration: none; } .fh-viewer__count { color: #bbb; font-size: .85rem; margin-top: 4px; text-align: center; } /* Home: family-only links */ .fh-home__links { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .fh-home__links a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--fh-line); border-radius: 10px; text-decoration: none; color: var(--fh-ink); font-weight: 600; background: var(--fh-bg); } .fh-home__links a:hover { border-color: var(--fh-accent); color: var(--fh-accent); } .fh-home__links svg { color: var(--fh-accent); flex: none; } @media (max-width: 600px) { .fh-post-single__body .alignleft, .fh-post-single__body .alignright { float: none; display: block; margin: 16px auto; } } /* Language switch --------------------------------------------------------- */ .fh-lang { display: flex; gap: 2px; background: var(--fh-bg); border: 1px solid var(--fh-line); border-radius: 999px; padding: 3px; flex: none; } .fh-lang a { padding: 5px 11px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--fh-muted); text-decoration: none; line-height: 1.2; } .fh-lang a.is-on { background: var(--fh-accent); color: var(--fh-accent-ink); } .fh-lang a:not(.is-on):hover { color: var(--fh-accent); } .fh-header__inner .fh-nav { margin-left: auto; } @media (max-width: 720px) { .fh-header__inner { flex-wrap: nowrap; } .fh-header__inner .fh-brand { margin-right: auto; } .fh-lang { order: 2; } .fh-menu-toggle { order: 3; } .fh-lang a { padding: 4px 9px; font-size: .82rem; } } /* Devanagari text needs a little more line height */ html[lang^="ne"] body { line-height: 1.75; } html[lang^="ne"] .fh-card-person__name { line-height: 1.3; } .fh-person__alt { font-size: 1rem; color: var(--fh-muted); margin: 0 0 4px; } /* Header on small phones: keep the menu button and language switch full size; a long site name shortens with "…" instead of squeezing them. */ .fh-menu-toggle, .fh-lang { flex: none; } .fh-brand { min-width: 0; } .fh-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 380px) { .fh-brand { font-size: 1.25rem; gap: 6px; } .fh-brand__mark { width: 26px; height: 26px; } .fh-header__inner { gap: 8px; } } .fh-lock__error { background: #fcf0f1; color: #4f6d8a; border-radius: 8px; padding: 8px 12px; font-size: .95rem; margin: 0 0 14px; } .fh-lock__countdown { font-variant-numeric: tabular-nums; } .fh-lock__form input:disabled, .fh-lock__form button:disabled { opacity: .5; cursor: not-allowed; } /* Family Dates ------------------------------------------------------------ */ .fh-dates__month { margin: 0 0 34px; } .fh-dates__month h2 { font-size: 1.6rem; border-bottom: 1px solid var(--fh-line); padding-bottom: 6px; } .fh-dates__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fh-date { display: flex; align-items: center; gap: 14px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 12px; padding: 12px 16px; box-shadow: var(--fh-shadow); } .fh-date__day { flex: none; width: 54px; text-align: center; border-radius: 10px; background: var(--fh-accent-soft); color: var(--fh-accent); padding: 6px 0; line-height: 1.1; } .fh-date__num { display: block; font: 700 1.5rem/1.1 var(--fh-serif); } .fh-date__mon { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .fh-date__icon { flex: none; color: var(--fh-gold); } .fh-date--barsi .fh-date__icon { color: var(--fh-muted); } .fh-date--wedding .fh-date__icon { color: #b0667e; } .fh-date__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fh-date__text strong { font: 600 1.15rem/1.25 var(--fh-serif); } .fh-date__text small { color: var(--fh-muted); } .fh-date__when { flex: none; font-size: .88rem; font-weight: 600; color: var(--fh-accent); text-align: right; } .fh-dates__note { font-size: .9rem; margin-top: 30px; } @media (max-width: 520px) { .fh-date { flex-wrap: wrap; gap: 10px; } .fh-date__icon { display: none; } .fh-date__when { width: 100%; text-align: left; padding-left: 64px; margin-top: -6px; } } /* Relationship finder & suggestion form ---------------------------------- */ .fh-rel { max-width: 1120px; margin: 0 auto 20px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); padding: 18px 22px; } .fh-rel[hidden] { display: none; } .fh-rel__title { font-size: 1.5rem; margin: 0 0 12px; } .fh-rel__pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .fh-rel__pick label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; font-size: .9rem; color: var(--fh-muted); } .fh-rel__pick select, .fh-suggest input, .fh-suggest textarea { font: inherit; font-size: 1rem; padding: 9px 12px; border: 1px solid var(--fh-line); border-radius: 10px; background: var(--fh-bg); color: var(--fh-ink); width: 100%; } .fh-rel__result { margin-top: 16px; } .fh-rel__answer { font: 600 1.35rem/1.35 var(--fh-serif); margin: 0 0 4px; } .fh-rel__term { display: inline-block; background: var(--fh-accent-soft); color: var(--fh-accent); border-radius: 999px; padding: 2px 12px; font-family: var(--fh-sans); font-size: 1rem; font-weight: 600; margin-left: 4px; } .fh-rel__path { color: var(--fh-muted); font-size: .92rem; margin: 6px 0 0; } .fh-suggest-btn { margin-top: 16px; } .fh-suggest { padding: 24px 28px 28px; } .fh-suggest h2 { margin: 0 0 6px; font-size: 1.6rem; } .fh-suggest p { margin: 0 0 14px; color: var(--fh-muted); } .fh-suggest label { display: block; font-weight: 600; font-size: .92rem; margin: 12px 0 4px; } .fh-suggest textarea { min-height: 120px; resize: vertical; } .fh-suggest .fh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fh-suggest__actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; } .fh-suggest__msg { margin-top: 12px; font-weight: 600; } .fh-suggest__msg.is-error { color: #b32d2e; } .fh-suggest__msg.is-ok { color: var(--fh-accent); } /* ========================================================================== Heritage look (Appearance > Customize > Font style) Classic engraved titles + book-style text, with Kirati touches: a dhaka-weave border and the three hearth stones (suptulung) ornament. ========================================================================== */ .fh-heritage { --fh-kirat: #4f6d8a; --fh-display: "Cinzel", "Tiro Devanagari Hindi", Georgia, serif; --fh-serif: "Cormorant Garamond", "Tiro Devanagari Hindi", Georgia, "Times New Roman", serif; --fh-text: "EB Garamond", "Noto Serif Devanagari", Georgia, serif; --fh-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' viewBox='0 0 150 16'%3E%3Cpath d='M0 8h52M98 8h52' stroke='%239c8467' stroke-width='1.2'/%3E%3Cpath d='M50 8l3-3 3 3-3 3zM94 8l3-3 3 3-3 3z' fill='%239c8467'/%3E%3Cpath d='M62 13c0-4 2.5-7 5-7s5 3 5 7z' fill='%234f6d8a'/%3E%3Cpath d='M70 13c0-5 2.5-9 5-9s5 4 5 9z' fill='%2324292f'/%3E%3Cpath d='M78 13c0-4 2.5-7 5-7s5 3 5 7z' fill='%234f6d8a'/%3E%3Cpath d='M60 14h30' stroke='%239c8467' stroke-width='1.2'/%3E%3C/svg%3E"); font-family: var(--fh-text); font-size: 18.5px; } .fh-heritage .fh-hero__title, .fh-heritage .fh-page__title, .fh-heritage .fh-brand { font-family: var(--fh-display); letter-spacing: .03em; } .fh-heritage .fh-hero__title { font-weight: 600; font-size: clamp(2.4rem, 7vw, 4.4rem); } .fh-heritage .fh-brand { font-weight: 600; font-size: 1.35rem; } .fh-heritage h2, .fh-heritage h3 { font-weight: 600; } .fh-heritage .fh-eyebrow { color: var(--fh-kirat); letter-spacing: .22em; } .fh-heritage .fh-hero__tagline { font-style: italic; } /* Dhaka-weave bands */ .fh-heritage .fh-header { border-bottom: 0; } .fh-heritage .fh-header::after, .fh-heritage .fh-footer::before { content: ""; display: block; height: 10px; background: var(--fh-dhaka) repeat-x center / auto 10px; } .fh-heritage .fh-header::after { position: absolute; left: 0; right: 0; bottom: -10px; } .fh-heritage .fh-footer { border-top: 0; padding-top: 0; } .fh-heritage .fh-footer::before { margin-bottom: 24px; } /* Three hearth stones ornament under main titles */ .fh-heritage .fh-ornament-title::after, .fh-heritage .fh-page__title::after, .fh-heritage .fh-hero__title::after { content: ""; display: block; width: 150px; height: 16px; margin-top: 12px; background: var(--fh-ornament) no-repeat center / contain; } .fh-heritage .fh-hero__title::after { margin: 18px auto 0; } .fh-heritage .fh-hero__inner { text-align: center; } /* Nepali: classic Devanagari (Tiro) for Nepali letters; Latin names keep the classic fonts. Devanagari must never be letter-spaced - it breaks the joined letters. */ html[lang^="ne"] .fh-heritage h1, html[lang^="ne"] .fh-heritage .fh-hero__title, html[lang^="ne"] .fh-heritage .fh-page__title, html[lang^="ne"] .fh-heritage .fh-brand { font-family: "Cinzel", "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif; } html[lang^="ne"] .fh-heritage h2, html[lang^="ne"] .fh-heritage h3 { font-family: "Cormorant Garamond", "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif; } html[lang^="ne"] .fh-heritage h1, html[lang^="ne"] .fh-heritage h2, html[lang^="ne"] .fh-heritage h3, html[lang^="ne"] .fh-heritage .fh-brand { font-synthesis: none; letter-spacing: 0; } html[lang^="ne"] .fh-heritage .fh-eyebrow, html[lang^="ne"] .fh-eyebrow { letter-spacing: 0; text-transform: none; font-size: .95rem; } html[lang^="ne"] .fh-heritage { font-size: 18px; } /* Family history (tree page, locked) */ .fh-history-link { margin: 8px 0 0; } .fh-history-link a { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } .fh-history { max-width: 820px; margin: 48px auto 0; padding: 36px 40px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); scroll-margin-top: 24px; } .fh-history__text { font-size: 1.08rem; line-height: 1.8; } .fh-history__text h3 { margin: 1.6em 0 .5em; color: var(--fh-accent); } .fh-history__text h3:first-child { margin-top: .4em; } .fh-history__text ul { padding-left: 1.3em; } .fh-history__text li { margin: .3em 0; } .fh-heritage .fh-history { border-top: 0; position: relative; overflow: hidden; } .fh-heritage .fh-history::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--fh-dhaka) repeat-x center / auto 8px; } html[lang^="ne"] .fh-history__text { line-height: 1.95; } @media (max-width: 640px) { .fh-history { padding: 26px 20px; margin-top: 32px; } } /* In loving memory (Family Dates) */ .fh-date--memory .fh-date__icon { color: var(--fh-muted); } /* ========================================================================== Family Map ========================================================================== */ .fh-map-bar { max-width: 1120px; margin: 0 auto 14px; display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; } .fh-map-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; } .fh-map-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--fh-line); border-radius: 999px; background: var(--fh-surface); font: 600 .9rem/1.1 var(--fh-sans); cursor: pointer; } .fh-map-chip::before { content: ""; width: 12px; height: 12px; border-radius: 50%; } .fh-map-chip.is-birth::before { background: #3f6b4f; } .fh-map-chip.is-marriage::before { background: #9c8467; } .fh-map-chip.is-death::before { background: #4f6d8a; } .fh-map-chip.is-home::before { background: #b5651d; } .fh-map-chip.is-moved::before { background: #8a6fa8; } .fh-map-chip.is-moves::before { content: "➤"; width: auto; height: auto; border-radius: 0; color: #8a6fa8; font-size: .8rem; line-height: 1; } .fh-move-arrow { background: none; border: 0; color: #8a6fa8; font-size: 1.05rem; line-height: 22px; text-align: center; text-shadow: 0 0 3px #fff; } .fh-move-arrow span { display: inline-block; } .fh-map-item.is-home .fh-map-dot { background: #b5651d; } .fh-map-item.is-moved .fh-map-dot { background: #8a6fa8; } .fh-place__group.is-home { color: #b5651d; } .fh-place__group.is-moved { color: #8a6fa8; } .fh-map-chip input { margin: 0; accent-color: var(--fh-accent); } .fh-map-person { margin-left: auto; } .fh-map { height: min(70vh, 640px); min-height: 380px; border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); overflow: hidden; background: #dfe6e9; z-index: 0; } .fh-map__error { padding: 40px 20px; text-align: center; } .fh-map-summary { margin: 10px 0 0; font-size: .92rem; } .fh-pin-wrap { background: none; border: 0; } .fh-pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); color: #fff; } .fh-pin b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .35); font: 700 12px/1 var(--fh-sans); } .fh-map-pop h3 { font: 600 1.15rem/1.2 var(--fh-serif); margin: 0 0 8px; } .fh-map-pop ul, .fh-map-list ul { list-style: none; margin: 0; padding: 0; } .fh-map-item { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid var(--fh-line); } .fh-map-item:first-child { border-top: 0; } .fh-map-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; } .fh-map-item.is-birth .fh-map-dot { background: #3f6b4f; } .fh-map-item.is-marriage .fh-map-dot { background: #9c8467; } .fh-map-item.is-death .fh-map-dot { background: #4f6d8a; } .fh-map-item__text { display: flex; flex-direction: column; font: .95rem/1.35 var(--fh-sans); } .fh-map-item__who a { font-weight: 600; color: var(--fh-ink); } .fh-map-item__what { color: var(--fh-muted); font-size: .86rem; } .fh-map-list { margin-top: 18px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 12px 18px; } .fh-map-list summary { cursor: pointer; font-weight: 600; } .fh-map-list__place { margin-top: 14px; } .fh-map-list__title { background: none; border: 0; padding: 0; font: 600 1.05rem/1.3 var(--fh-serif); color: var(--fh-accent); cursor: pointer; text-align: left; } .fh-map-missing { margin-top: 18px; padding: 12px 18px; border: 1px dashed var(--fh-gold); border-radius: var(--fh-radius); background: #ffffff; font-size: .95rem; } .fh-map-missing ul { margin: 6px 0 0 18px; } .fh-map-link { display: inline-block; margin: 0 10px 10px 0; background: var(--fh-surface); color: var(--fh-accent); border: 1px solid var(--fh-accent); } .fh-map-link:hover { background: var(--fh-accent-soft); } .leaflet-container { font: inherit; } .leaflet-popup-content { margin: 12px 14px; } @media (max-width: 640px) { .fh-map-person { margin-left: 0; width: 100%; } .fh-map-person select { flex: 1; min-width: 0; } .fh-map { height: 62vh; min-height: 320px; } } /* ========================================================================== Traditions (family wiki) ========================================================================== */ .fh-back { margin: 0 0 6px; } .fh-back a { font-weight: 600; text-decoration: none; } .fh-traditions__search { max-width: 1120px; margin: 0 auto 18px; } .fh-traditions__search input { width: min(420px, 100%); padding: 10px 16px; border: 1px solid var(--fh-line); border-radius: 999px; font: inherit; background: var(--fh-surface); } .fh-traditions__topic { margin: 0 0 30px; } .fh-traditions__topic h2 { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; margin-bottom: 12px; } .fh-traditions__topic h2 .dashicons { color: var(--fh-kirat, #4f6d8a); width: 28px; height: 28px; font-size: 26px; } .fh-traditions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .fh-trad-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); color: var(--fh-ink); text-decoration: none; transition: border-color .15s, transform .15s; } .fh-trad-card a:hover { border-color: var(--fh-accent); transform: translateY(-2px); } .fh-trad-card strong { font: 600 1.2rem/1.25 var(--fh-serif); } .fh-trad-card__video { align-self: flex-start; font: 600 .78rem/1 var(--fh-sans); color: #fff; background: var(--fh-kirat, #4f6d8a); padding: 4px 8px; border-radius: 999px; } .fh-trad-card__snip { color: var(--fh-muted); font-size: .95rem; } .fh-tradition { max-width: 820px; margin: 0 auto; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); padding: 32px 40px; } .fh-tradition__topic { text-transform: uppercase; letter-spacing: .14em; font: 600 .8rem/1 var(--fh-sans); color: var(--fh-kirat, #4f6d8a); margin: 0 0 10px; } html[lang^="ne"] .fh-tradition__topic { letter-spacing: 0; text-transform: none; font-size: .95rem; } .fh-tradition__note { background: #ffffff; border-left: 4px solid var(--fh-gold); padding: 8px 12px; font-size: .95rem; } .fh-tradition__cover img { width: 100%; height: auto; border-radius: 10px; } .fh-tradition__body { font-size: 1.08rem; line-height: 1.8; } .fh-tradition__body h3 { color: var(--fh-accent); margin: 1.4em 0 .4em; } .fh-tradition__body iframe, .fh-tradition__body video, .fh-tradition__body .wp-video, .fh-tradition__body .wp-block-embed { max-width: 100%; } .fh-tradition__body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; } .fh-tradition__body video { width: 100% !important; height: auto !important; border-radius: 10px; } .fh-tradition__updated { margin-top: 24px; font-size: .88rem; } .fh-heritage .fh-tradition { position: relative; overflow: hidden; } .fh-heritage .fh-tradition::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--fh-dhaka) repeat-x center / auto 8px; } @media (max-width: 640px) { .fh-tradition { padding: 24px 18px; } } /* ========================================================================== UK classic + Nepali colours ("soft & warm") - part of the Heritage look. Cream and warm stone, with Nepal crimson and Nepal blue in small details. ========================================================================== */ .fh-heritage { --fh-bg: #eef1f5; --fh-surface: #ffffff; --fh-ink: #242b35; --fh-muted: #616a76; --fh-line: #d9dfe6; --fh-accent: #4f6d8a; /* Nepal crimson, deepened */ --fh-accent-ink: #ffffff; --fh-accent-soft: #eceff3; --fh-blue: #22386b; /* Nepal blue, deepened */ --fh-gold: #9c8467; --fh-connector: #c5ccd4; --fh-kirat: #4f6d8a; --fh-radius: 8px; --fh-shadow: 0 1px 2px rgba(25, 35, 48, .05), 0 8px 24px rgba(25, 35, 48, .06); --fh-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' viewBox='0 0 150 16'%3E%3Cpath d='M0 8h52M98 8h52' stroke='%239c8467' stroke-width='1.2'/%3E%3Cpath d='M50 8l3-3 3 3-3 3zM94 8l3-3 3 3-3 3z' fill='%2322386b'/%3E%3Cpath d='M62 13c0-4 2.5-7 5-7s5 3 5 7z' fill='%234f6d8a'/%3E%3Cpath d='M70 13c0-5 2.5-9 5-9s5 4 5 9z' fill='%23242b35'/%3E%3Cpath d='M78 13c0-4 2.5-7 5-7s5 3 5 7z' fill='%234f6d8a'/%3E%3Cpath d='M60 14h30' stroke='%239c8467' stroke-width='1.2'/%3E%3C/svg%3E"); background-color: var(--fh-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url%28%23n%29' opacity='.09'/%3E%3C/svg%3E"); } .fh-heritage a { color: var(--fh-accent); } .fh-heritage a:hover { color: var(--fh-blue); } .fh-heritage .fh-header { background: var(--fh-surface); } .fh-heritage .fh-brand { color: var(--fh-ink); } .fh-heritage .fh-brand__mark { width: 34px; height: 34px; } .fh-heritage .fh-footer { background: #e6eaef; color: var(--fh-muted); } /* Buttons: squarer, small capitals - a classic UK feel */ .fh-heritage .fh-btn { border-radius: 4px; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; padding-left: 22px; padding-right: 22px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); } .fh-heritage .fh-btn:hover { background: #3f5a74; } html[lang^="ne"] .fh-heritage .fh-btn { letter-spacing: 0; text-transform: none; font-size: 1rem; } .fh-heritage .fh-view-switch button[aria-pressed="true"] { background: var(--fh-blue); } .fh-heritage .fh-icon-btn:hover { border-color: var(--fh-blue); color: var(--fh-blue); } .fh-heritage :focus-visible { outline-color: var(--fh-blue); } /* Double-rule frames, like an old book plate */ .fh-heritage .fh-card, .fh-heritage .fh-lock, .fh-heritage .fh-history, .fh-heritage .fh-tradition, .fh-heritage .fh-otd, .fh-heritage .fh-origins__map { box-shadow: inset 0 0 0 4px var(--fh-surface), inset 0 0 0 5px var(--fh-line), var(--fh-shadow); } .fh-heritage .fh-lock__icon { background: #e6eaef; } .fh-lock__mark { width: 44px; height: 44px; } /* Home: photo behind the title */ .fh-heritage .fh-hero { background: linear-gradient(180deg, #eaf0f6, var(--fh-bg)); } .fh-hero.has-photo { background: linear-gradient(180deg, rgba(247, 248, 250, .25) 0%, rgba(247, 248, 250, .55) 45%, rgba(247, 248, 250, .8) 80%, var(--fh-bg) 100%), var(--fh-hero-img) center / cover no-repeat; padding: 130px 0 150px; } .fh-hero.has-photo .fh-hero__branches { display: none; } .fh-hero.has-photo .fh-hero__inner { background: radial-gradient(closest-side, rgba(244, 246, 248, .82), rgba(244, 246, 248, 0)); padding: 20px 0; } .fh-hero.has-photo .fh-hero__title { text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 0 24px rgba(255, 255, 255, .9); } /* Our journey timeline */ .fh-journey { margin: 30px 0 6px; } .fh-journey__title { font-size: 1.35rem; margin: 0 0 14px; color: var(--fh-blue, #22386b); } .fh-journey__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; position: relative; } .fh-journey__list::before { content: ""; position: absolute; left: 6%; right: 6%; top: 17px; height: 3px; background: var(--fh-dhaka, var(--fh-gold)) repeat-x center / auto 6px; opacity: .85; } .fh-journey__stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: .92rem; } .fh-journey__dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fh-surface); border: 2px solid var(--fh-accent); color: var(--fh-accent); font: 700 .95rem/1 var(--fh-serif); position: relative; z-index: 1; } .fh-journey__stop:last-child .fh-journey__dot { background: var(--fh-accent); color: #fff; } .fh-journey__stop strong { font: 600 1.05rem/1.2 var(--fh-serif); } .fh-journey__stop span { color: var(--fh-muted); line-height: 1.35; } @media (max-width: 760px) { .fh-journey__list { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; } .fh-journey__list::before { left: 17px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: var(--fh-gold); } .fh-journey__stop { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; text-align: left; align-items: start; } .fh-journey__dot { grid-row: span 2; } } /* Lock screen: softly blurred photo behind the password box */ .fh-lock-scene { position: relative; border-radius: 12px; overflow: hidden; padding: 30px 16px; } .fh-lock-scene.has-photo::before { content: ""; position: absolute; inset: -30px; background: var(--fh-lock-img) center / cover no-repeat; filter: blur(10px) saturate(.9); transform: scale(1.05); opacity: .55; } .fh-lock-scene.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247, 248, 250, .35), rgba(247, 248, 250, .75)); } .fh-lock-scene .fh-lock { position: relative; z-index: 1; } /* Family tree: generation bands */ .fh-tree { position: relative; } .fh-tree > ul { z-index: 1; } .fh-gen-band { position: absolute; left: 0; right: 0; z-index: 0; background: rgba(156, 132, 103, .06); border-top: 1px solid rgba(156, 132, 103, .22); border-bottom: 1px solid rgba(156, 132, 103, .22); pointer-events: none; } .fh-gen-band.is-alt { background: rgba(34, 56, 107, .045); border-color: rgba(34, 56, 107, .16); } .fh-gen-band__label { position: absolute; top: 5px; font: 600 .72rem/1 var(--fh-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fh-gold); white-space: nowrap; } .fh-gen-band.is-alt .fh-gen-band__label { color: #4a5f8f; } html[lang^="ne"] .fh-gen-band__label { letter-spacing: 0; text-transform: none; font-size: .85rem; } /* Gallery: photo wall (natural shapes) + album years */ .fh-photo-wall { display: block; columns: 240px; column-gap: 12px; } .fh-photo-wall .fh-photo-grid__item { aspect-ratio: auto; margin: 0 0 12px; break-inside: avoid; background: none; box-shadow: 0 0 0 1px var(--fh-line); } .fh-photo-wall .fh-photo-grid__item img { height: auto; } /* On this day */ .fh-otd { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 16px 20px 18px; margin: 0 0 32px; box-shadow: var(--fh-shadow); } .fh-otd__title { font-size: 1.3rem; margin: 0 0 12px; color: var(--fh-blue, #22386b); } .fh-otd__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .fh-otd__list a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--fh-ink); } .fh-otd__list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; } .fh-otd__ago { font: 600 .75rem/1 var(--fh-sans); color: var(--fh-accent); text-transform: uppercase; letter-spacing: .08em; } html[lang^="ne"] .fh-otd__ago { text-transform: none; letter-spacing: 0; font-size: .85rem; } .fh-otd__list strong { font: 600 1.05rem/1.25 var(--fh-serif); } /* Traditions: step cards, tick-list, voice notes */ .fh-tradition__body ol { list-style: none; counter-reset: fh-step; padding: 0; margin: 14px 0 22px; display: grid; gap: 10px; } .fh-tradition__body ol > li { counter-increment: fh-step; position: relative; padding: 12px 14px 12px 58px; background: #f4f6f8; border: 1px solid var(--fh-line); border-radius: 8px; min-height: 44px; } .fh-tradition__body ol > li::before { content: counter(fh-step); position: absolute; left: 12px; top: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fh-accent); color: #fff; font: 700 1rem/1 var(--fh-serif); } .fh-tradition__body ol > li img { display: block; margin-top: 8px; border-radius: 6px; max-width: 100%; height: auto; } .fh-checklist { list-style: none; padding: 0; margin: 10px 0 6px; } .fh-checklist li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--fh-line); } .fh-checklist input { width: 20px; height: 20px; flex: none; accent-color: var(--fh-accent); transform: translateY(3px); } .fh-checklist li.is-done { color: var(--fh-muted); text-decoration: line-through; } .fh-checklist__clear { background: none; border: 0; padding: 4px 0; color: var(--fh-muted); font: .85rem var(--fh-sans); text-decoration: underline; cursor: pointer; margin-bottom: 14px; } .fh-tradition__body .wp-audio-shortcode, .fh-tradition__body audio { width: 100% !important; } .fh-tradition__body .mejs-container.wp-audio-shortcode, .fh-tradition__body audio { border-radius: 999px; overflow: hidden; margin: 8px 0 16px; } .fh-trad-card__badges { display: flex; gap: 6px; flex-wrap: wrap; } .fh-trad-card__audio { font: 600 .78rem/1 var(--fh-sans); color: #fff; background: var(--fh-blue, #22386b); padding: 4px 8px; border-radius: 999px; } .fh-heritage a.fh-btn, .fh-heritage a.fh-btn:hover, .fh-heritage .fh-btn { color: var(--fh-accent-ink); } /* ========================================================================== Kirati border + palette (now Earthy clay & sage, see the end of the file) Deep red, charcoal, turmeric gold and warm off-white. The border repeats a Silam Sakma diamond and small hills; titles get a Silam Sakma ornament. ========================================================================== */ .fh-heritage { --fh-bg: #f7f8fa; --fh-surface: #ffffff; --fh-ink: #23282f; --fh-muted: #5e6773; --fh-line: #e3e7ec; --fh-accent: #4f6d8a; /* clay */ --fh-accent-ink: #ffffff; --fh-accent-soft: #e6edf4; --fh-blue: #23282f; /* charcoal for the small details */ --fh-gold: #9c8467; /* turmeric (darker, readable) */ --fh-turmeric: #d9c3a5; --fh-connector: #c3cbd5; --fh-kirat: #4f6d8a; --fh-dhaka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Crect width='44' height='16' fill='%234f6d8a'/%3E%3Cpath d='M0 1.2h44M0 14.8h44' stroke='%23d9c3a5' stroke-width='.9'/%3E%3Cpath d='M11 3.2 16 8l-5 4.8L6 8z' fill='none' stroke='%23fbf5e9' stroke-width='1.1'/%3E%3Cpath d='M8.6 5.6l4.8 4.8M13.4 5.6l-4.8 4.8' stroke='%23fbf5e9' stroke-width='.9'/%3E%3Ccircle cx='11' cy='8' r='1.1' fill='%23d9c3a5'/%3E%3Cpath d='M22 12.6 26.5 5.4 31 12.6z' fill='%23d9c3a5'/%3E%3Cpath d='M28.5 12.6 33 7.2l4.5 5.4z' fill='%237f9ab3'/%3E%3Cpath d='M36 12.6l2.6-3.4 2.6 3.4z' fill='%23d9c3a5' opacity='.85'/%3E%3C/svg%3E"); /* Thick border: marigold (sayapatri), Himalaya and river. */ --fh-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'%3E%3Crect width='120' height='32' fill='%23eef2f6'/%3E%3Cpath d='M0 1.6h120M0 30.4h120' stroke='%23d5dde6' stroke-width='1.2'/%3E%3Cpath d='M0 4h120M0 28h120' stroke='%23d5dde6' stroke-width='.5' opacity='0'/%3E%3Cg transform='translate(16 16)'%3E%3Cg fill='%23e9a94e'%3E%3Ccircle cx='0' cy='-6.2' r='2.9'/%3E%3Ccircle cx='4.4' cy='-4.4' r='2.9'/%3E%3Ccircle cx='6.2' cy='0' r='2.9'/%3E%3Ccircle cx='4.4' cy='4.4' r='2.9'/%3E%3Ccircle cx='0' cy='6.2' r='2.9'/%3E%3Ccircle cx='-4.4' cy='4.4' r='2.9'/%3E%3Ccircle cx='-6.2' cy='0' r='2.9'/%3E%3Ccircle cx='-4.4' cy='-4.4' r='2.9'/%3E%3C/g%3E%3Cg fill='%23f3c878'%3E%3Ccircle cx='2.4' cy='-2.4' r='2.4'/%3E%3Ccircle cx='2.4' cy='2.4' r='2.4'/%3E%3Ccircle cx='-2.4' cy='2.4' r='2.4'/%3E%3Ccircle cx='-2.4' cy='-2.4' r='2.4'/%3E%3Ccircle cx='0' cy='-3.3' r='2.2'/%3E%3Ccircle cx='3.3' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='3.3' r='2.2'/%3E%3Ccircle cx='-3.3' cy='0' r='2.2'/%3E%3C/g%3E%3Ccircle r='1.9' fill='%23c27b2c'/%3E%3C/g%3E%3Cpath d='M33 25.5 44 9.5 55 25.5z' fill='%237f9ab3'/%3E%3Cpath d='M44 9.5 40.6 14.4l1.9-.9 1.5 1.5 1.5-1.5 1.9.9z' fill='%23ffffff'/%3E%3Cpath d='M47 25.5 57.5 12.5 68 25.5z' fill='%23a7bbcd'/%3E%3Cpath d='M57.5 12.5l-2.8 3.5 1.5-.7 1.3 1.3 1.3-1.3 1.5.7z' fill='%23ffffff'/%3E%3Cpath d='M31 25.5h39' stroke='%23c9d4df' stroke-width='1'/%3E%3Cpath d='M76 12.5c2.5-2.4 5-2.4 7.5 0s5 2.4 7.5 0 5-2.4 7.5 0 5 2.4 7.5 0' fill='none' stroke='%239db6cc' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M76 17.5c2.5-2.4 5-2.4 7.5 0s5 2.4 7.5 0 5-2.4 7.5 0 5 2.4 7.5 0' fill='none' stroke='%23c7d5e2' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M76 22.5c2.5-2.4 5-2.4 7.5 0s5 2.4 7.5 0 5-2.4 7.5 0 5 2.4 7.5 0' fill='none' stroke='%239db6cc' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M113.5 16l2.5-2.5 2.5 2.5-2.5 2.5z' fill='%23c4a986'/%3E%3C/svg%3E"); --fh-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='18' viewBox='0 0 150 18'%3E%3Cpath d='M0 9h60M90 9h60' stroke='%239c8467' stroke-width='1.2'/%3E%3Cpath d='M57 9l2.5-2.5L62 9l-2.5 2.5zM88 9l2.5-2.5L93 9l-2.5 2.5z' fill='%2323282f'/%3E%3Cpath d='M75 1.5 82.5 9 75 16.5 67.5 9z' fill='none' stroke='%237f9ab3' stroke-width='1.5'/%3E%3Cpath d='M71.3 5.3l7.4 7.4M78.7 5.3l-7.4 7.4' stroke='%234f6d8a' stroke-width='1.3'/%3E%3Ccircle cx='75' cy='9' r='1.6' fill='%23d9c3a5'/%3E%3C/svg%3E"); } .fh-heritage .fh-header::after, .fh-heritage .fh-footer::before { height: 36px; background: var(--fh-band) repeat-x center / auto 36px; } .fh-heritage .fh-header::after { bottom: -36px; } @media (max-width: 600px) { .fh-heritage .fh-header::after, .fh-heritage .fh-footer::before { height: 28px; background-size: auto 28px; } .fh-heritage .fh-header::after { bottom: -28px; } } /* 1.90.3: the border grew by 10px - keep the same breathing room under it. */ .fh-heritage .fh-main > .fh-page { margin-top: 10px; } @media (max-width: 600px) { .fh-heritage .fh-main > .fh-page { margin-top: 8px; } } /* (Not on the Home picture: it starts right under the header so no line shows behind the border.) */ .fh-heritage .fh-ornament-title::after, .fh-heritage .fh-page__title::after, .fh-heritage .fh-hero__title::after { height: 18px; } .fh-heritage .fh-btn:hover { background: #3f5a74; } .fh-heritage .fh-eyebrow { color: var(--fh-accent); } .fh-heritage .fh-hero:not(.has-photo) { background: linear-gradient(180deg, #eaf0f6, var(--fh-bg)); } .fh-heritage .fh-journey__stop:last-child .fh-journey__dot { background: var(--fh-accent); } .fh-heritage .fh-journey__dot { border-color: var(--fh-accent); color: var(--fh-accent); } .fh-heritage .fh-gen-band.is-alt { background: rgba(79, 109, 138, .04); border-color: rgba(79, 109, 138, .14); } .fh-heritage .fh-gen-band.is-alt .fh-gen-band__label { color: var(--fh-accent); } /* Kirati icons */ .fh-icon { flex: none; vertical-align: -0.2em; } .fh-icon-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--fh-accent); padding: 26px 16px 18px; opacity: .85; } .fh-icon-row__dot { width: 5px; height: 5px; transform: rotate(45deg); background: var(--fh-turmeric, #d9c3a5); } .fh-home__links .fh-icon { color: var(--fh-accent); width: 20px; height: 20px; } .fh-traditions__topic h2 .fh-icon { color: var(--fh-accent); width: 30px; height: 30px; } .fh-deva { letter-spacing: 0; text-transform: none; font-size: 1.12em; } /* ========================================================================== Evening mode (dark) - switch in the header, remembered on this device ========================================================================== */ .fh-dark-toggle { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--fh-line); background: var(--fh-surface); color: var(--fh-ink); cursor: pointer; margin-left: 8px; } .fh-dark-toggle:hover { border-color: var(--fh-accent); color: var(--fh-accent); } .fh-dark-toggle__sun { display: none; } html.fh-dark .fh-dark-toggle__sun { display: block; } html.fh-dark .fh-dark-toggle__moon { display: none; } html.fh-dark body, html.fh-dark .fh-heritage { --fh-bg: #14181e; --fh-surface: #1c222a; --fh-ink: #e8ecf1; --fh-muted: #9aa5b1; --fh-line: #2c3440; --fh-accent: #8fb0ce; --fh-accent-ink: #14181e; --fh-accent-soft: #26303c; --fh-blue: #e1e6ec; --fh-gold: #d9c3a5; --fh-turmeric: #d9c3a5; --fh-connector: #4a525d; --fh-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark; background-color: var(--fh-bg); color: var(--fh-ink); } html.fh-dark .fh-heritage { background-image: none; } html.fh-dark .fh-heritage .fh-btn, html.fh-dark .fh-btn { background: #5a7a99; color: #fcfcfd; } html.fh-dark .fh-heritage .fh-btn:hover { background: #6b8cab; } html.fh-dark .fh-heritage .fh-footer, html.fh-dark .fh-footer { background: #0f1216; } html.fh-dark .fh-heritage .fh-hero, html.fh-dark .fh-hero { background: linear-gradient(180deg, #1a2028, var(--fh-bg)); } html.fh-dark .fh-hero.has-photo { background: linear-gradient(180deg, rgba(20, 24, 30, .35) 0%, rgba(20, 24, 30, .65) 50%, rgba(20, 24, 30, .9) 82%, var(--fh-bg) 100%), var(--fh-hero-img) center / cover no-repeat; } html.fh-dark .fh-hero.has-photo .fh-hero__inner { background: radial-gradient(closest-side, rgba(20, 24, 30, .78), rgba(20, 24, 30, 0)); } html.fh-dark .fh-hero.has-photo .fh-hero__title { text-shadow: 0 0 24px rgba(0, 0, 0, .8); } html.fh-dark .fh-lock-scene.has-photo::after { background: linear-gradient(180deg, rgba(20, 24, 30, .45), rgba(20, 24, 30, .8)); } html.fh-dark .fh-lock__icon, html.fh-dark .fh-heritage .fh-lock__icon { background: #262d37; } html.fh-dark .fh-card-person.is-male { background: #1d2636; border-color: #34466a; border-top-color: #7b9bd6; } html.fh-dark .fh-card-person.is-female { background: #33202a; border-color: #5a3645; border-top-color: #e0839d; } html.fh-dark .fh-card-person.is-male .fh-avatar { background: #283651; color: #b9cbef; box-shadow: 0 0 0 2px #7b9bd6; } html.fh-dark .fh-card-person.is-female .fh-avatar { background: #472a37; color: #f3bccb; box-shadow: 0 0 0 2px #e0839d; } html.fh-dark .fh-card-person.is-deceased { filter: saturate(.8) brightness(.92); } html.fh-dark .fh-tree-viewport { background-color: #181c22; } html.fh-dark .fh-tradition__body ol > li { background: #222932; } html.fh-dark .fh-tradition__note, html.fh-dark .fh-map-missing { background: #252c36; } html.fh-dark .fh-gen-band { background: rgba(217, 195, 165, .05); border-color: rgba(217, 195, 165, .15); } html.fh-dark .fh-gen-band.is-alt { background: rgba(217, 195, 165, .05); border-color: rgba(217, 195, 165, .15); } html.fh-dark input, html.fh-dark select, html.fh-dark textarea { background: #181c22; color: var(--fh-ink); border-color: var(--fh-line); } html.fh-dark .fh-view-switch button[aria-pressed="true"] { background: var(--fh-gold); color: #14181e; } html.fh-dark .fh-journey__dot { background: var(--fh-surface); } html.fh-dark .fh-trad-card__audio { background: #4a5f8f; } html.fh-dark .fh-lang a.is-on { color: #14181e; } @media (max-width: 640px) { .fh-dark-toggle { width: 34px; height: 34px; margin-left: 4px; } } /* "From our family" strip (Home, only when unlocked) */ /* Ancestors (passed away): gold double frame + small diyo */ .fh-card-person { position: relative; } .fh-card-person.is-ancestor { border-color: #c4a986; box-shadow: inset 0 0 0 3px var(--fh-surface), inset 0 0 0 4px rgba(196, 169, 134, .75), var(--fh-shadow); } .fh-card-person.is-ancestor.is-male, .fh-card-person.is-ancestor.is-female { border-color: #c4a986; } .fh-card-lamp { position: absolute; top: 8px; right: 8px; color: #9c8467; opacity: .9; } html.fh-dark .fh-card-lamp { color: #d9c3a5; } /* ========================================================================== Poster print (Family Tree > Poster), v1.54: one page, any paper size. The tree is printed as ONE picture (drawn by the page) that shrinks to fit the paper, with the title above and the journey line below, inside a Kirati frame. ========================================================================== */ .fh-poster-sheet { display: none; } @media print { @page { margin: 8mm; } body.fh-poster { background: #ffffff !important; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.fh-poster .fh-header, body.fh-poster .fh-footer, body.fh-poster .fh-icon-row, body.fh-poster .fh-side-rail, body.fh-poster #wpadminbar, body.fh-poster .fh-tree-page > *:not(.fh-poster-sheet) { display: none !important; } body.fh-poster .fh-main, body.fh-poster .fh-wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; } body.fh-poster .fh-tree-page { padding: 0 !important; margin: 0 !important; border: 0; box-shadow: none; } body.fh-poster .fh-poster-sheet { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; height: calc(100vh - 1mm); overflow: hidden; position: relative; background: #ffffff; padding: 13mm 9mm 12mm; border: 1.5px solid #9c8467; box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px #23282f; break-inside: avoid; page-break-inside: avoid; page-break-after: avoid; } body.fh-poster .fh-poster-sheet::before, body.fh-poster .fh-poster-sheet::after { content: ""; position: absolute; left: 6px; right: 6px; height: 16px; background: var(--fh-band, var(--fh-dhaka)) repeat-x center / auto 16px; } body.fh-poster .fh-poster-sheet::before { top: 6px; } body.fh-poster .fh-poster-sheet::after { bottom: 6px; } body.fh-poster .fh-poster-head { flex: none; text-align: center; margin: 0 0 3mm; } body.fh-poster .fh-poster-head__mark { width: 34px; height: 34px; } body.fh-poster .fh-poster-head__site { margin: 1mm 0 0; font: 600 9pt/1 var(--fh-sans); letter-spacing: .3em; text-transform: uppercase; color: #4f6d8a; } body.fh-poster .fh-poster-head__title { margin: 1mm 0 0; font-family: var(--fh-display, var(--fh-serif)); font-size: 22pt; line-height: 1.1; } body.fh-poster .fh-poster-head__title::after { content: ""; display: block; width: 110px; height: 12px; margin: 1.5mm auto 0; background: var(--fh-ornament) no-repeat center / contain; } body.fh-poster .fh-poster-head__sub { margin: 1mm 0 0; font: 600 10pt/1.2 var(--fh-sans); color: #4f5a66; } body.fh-poster .fh-poster-head__sub[hidden] { display: none; } body.fh-poster .fh-poster-art { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } body.fh-poster .fh-poster-art img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } body.fh-poster .fh-poster-foot { flex: none; text-align: center; margin-top: 3mm; font: 9pt/1.4 var(--fh-serif); color: #434b56; } body.fh-poster .fh-poster-foot p { margin: 0; } body.fh-poster .fh-poster-foot__origin { font-style: italic; } body.fh-poster .fh-poster-foot__date { font-size: 8pt; color: #6a7380; margin-top: 1mm; } } /* Place pages ("About this place") and the journey player on the Family Map */ .fh-place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: inset 0 0 0 4px var(--fh-surface), inset 0 0 0 5px var(--fh-line), var(--fh-shadow); padding: 22px; margin: 0 0 28px; } .fh-place__photo { margin: 0; } .fh-place__photo img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 6px; } .fh-place__kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--fh-accent); font: 600 .8rem/1 var(--fh-sans); letter-spacing: .12em; text-transform: uppercase; } html[lang^="ne"] .fh-place__kicker { letter-spacing: 0; text-transform: none; font-size: .95rem; } .fh-place__title { margin-top: 0; } .fh-place__group { font-size: 1.1rem; margin: 18px 0 6px; } .fh-place__group.is-birth { color: #3f6b4f; } .fh-place__group.is-marriage { color: var(--fh-gold); } .fh-place__group.is-death { color: var(--fh-accent); } .fh-place__people { margin: 0; padding-left: 1.2em; } .fh-place__people li { margin: 2px 0; } .fh-place:not(:has(.fh-place__photo)) { grid-template-columns: 1fr; } @media (max-width: 760px) { .fh-place { grid-template-columns: 1fr; } } .fh-map-pop__place { display: inline-block; margin-top: 8px; font-weight: 600; } .fh-map-play { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; } .fh-map-play .fh-muted { font-size: .9rem; } .fh-map-wrap { position: relative; } .fh-map-caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 500; max-width: calc(100% - 32px); background: rgba(79, 109, 138, .88); color: #ffffff; padding: 10px 18px; border-radius: 999px; font: 600 .98rem/1.35 var(--fh-sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); text-align: center; } .fh-map-caption[hidden] { display: none; } /* Family Map lives inside the Family Tree page */ .fh-back-link { margin: 0 0 8px; font-size: .95rem; } .fh-back-link a { text-decoration: none; } .fh-back-link a:hover { text-decoration: underline; } a.fh-tree-map-btn { text-decoration: none; } /* ========================================================================== Earthy clay & sage (v1.22): clay brown as the main colour, sage green for highlights, ochre for rules, on oat. Plus review fixes. ========================================================================== */ .fh-heritage { --fh-rhodo: #5b7a99; } /* sage (readable on oat) */ html.fh-dark .fh-heritage, html.fh-dark body { --fh-rhodo: #d9c3a5; } .fh-heritage .fh-eyebrow, .fh-heritage .fh-place__kicker, .fh-heritage .fh-journey__stop:last-child .fh-journey__dot { color: var(--fh-rhodo); } .fh-heritage .fh-journey__stop:last-child .fh-journey__dot { background: var(--fh-rhodo); border-color: var(--fh-rhodo); color: #fff; } .fh-heritage .fh-icon-row { color: var(--fh-rhodo); } .fh-heritage .fh-home__links .fh-icon, .fh-heritage .fh-traditions__topic h2 .fh-icon { color: var(--fh-rhodo); } .fh-heritage .fh-content a:hover, .fh-heritage .fh-back-link a:hover { color: var(--fh-rhodo); } .fh-heritage .fh-place__group.is-death { color: var(--fh-accent); } /* "Show on family map" button: readable text (was same colour as its background). */ .fh-heritage a.fh-map-link, .fh-heritage .fh-map-link { background: var(--fh-surface); color: var(--fh-accent); } .fh-heritage a.fh-map-link:hover { background: var(--fh-accent-soft); color: var(--fh-accent); } /* Search highlight also on ancestor cards. */ .fh-card-person.is-match.is-ancestor { border-color: var(--fh-rhodo, #7f9ab3); box-shadow: 0 0 0 3px rgba(127, 154, 179, .35), var(--fh-shadow); } /* Dark mode gaps. */ html.fh-dark .fh-lock-toast { background: #262d37; color: var(--fh-ink); } html.fh-dark .fh-card-person.is-deceased { background: #1d2536; } html.fh-dark .fh-map-pop, html.fh-dark .fh-map-pop .fh-map-item__what { color: #3c4350; } html.fh-dark .fh-map-pop a { color: #4f6d8a; } .fh-map .leaflet-popup-content { margin: 12px 14px; } .fh-map.leaflet-container { font: inherit; font-size: .95rem; } /* Printing the poster while in evening mode: print in the light colours. */ @media print { html.fh-dark body, html.fh-dark .fh-heritage { --fh-bg: #ffffff; --fh-surface: #ffffff; --fh-ink: #23282f; --fh-muted: #5e6773; --fh-line: #e3e7ec; --fh-accent: #4f6d8a; --fh-gold: #9c8467; --fh-connector: #c3cbd5; background: #ffffff; color: #23282f; } html.fh-dark .fh-card-person { background: #ffffff; color: #23282f; filter: none; } html.fh-dark .fh-card-person.is-male { background: #edf1f8; } html.fh-dark .fh-card-person.is-female { background: #f8ecee; } html.fh-dark .fh-card-person.is-deceased { background: #eef1f4; } html.fh-dark .fh-gen-band { background: rgba(156, 132, 103, .06); } html.fh-dark .fh-card-person.is-male { border-color: #c6d0e2; border-top-color: #2f4f86; } html.fh-dark .fh-card-person.is-female { border-color: #e6c6cd; border-top-color: #a33b57; } html.fh-dark .fh-card-person.is-male .fh-avatar { background: #dde5f2; color: #26406e; box-shadow: 0 0 0 2px #2f4f86; } html.fh-dark .fh-card-person.is-female .fh-avatar { background: #f3dde2; color: #8c2d46; box-shadow: 0 0 0 2px #a33b57; } } /* Chula logo: lighter navy stone + base line in evening mode so they don't vanish. */ /* Evening mode: a soft light ring around the logo badge so it stands out on the dark bar. */ html.fh-dark .fh-logo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); } /* Bigger title bar (v1.23): taller header, larger site name, logo and menu. */ .fh-header__inner { min-height: 88px; } .fh-brand, .fh-heritage .fh-brand { font-size: 1.75rem; gap: 12px; } .fh-brand__mark, .fh-heritage .fh-brand__mark { width: 44px; height: 44px; } .fh-menu a { font-size: 1.1rem; padding: 10px 16px; } .fh-lang a { font-size: 1rem; } .fh-dark-toggle { width: 42px; height: 42px; } @media (max-width: 860px) { .fh-header__inner { min-height: 72px; } .fh-brand, .fh-heritage .fh-brand { font-size: 1.35rem; gap: 8px; } .fh-brand__mark, .fh-heritage .fh-brand__mark { width: 32px; height: 32px; } } @media (max-width: 480px) { .fh-header__inner { min-height: 64px; } .fh-brand, .fh-heritage .fh-brand { font-size: 1.2rem; } .fh-brand__mark, .fh-heritage .fh-brand__mark { width: 28px; height: 28px; } .fh-dark-toggle { width: 36px; height: 36px; } } /* ========================================================================== Scandinavian look (v1.24): Fjord blue on white, clean modern letters (Inter, Mukta for Nepali), flat soft cards, lots of air. The Kirati band, chula logo and icons stay, drawn light and flat. ========================================================================== */ .fh-heritage { --fh-nordic: "Inter", "Mukta", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fh-display: var(--fh-nordic); --fh-serif: var(--fh-nordic); --fh-text: var(--fh-nordic); --fh-sans: var(--fh-nordic); --fh-radius: 14px; --fh-shadow: 0 1px 2px rgba(25, 35, 48, .04), 0 8px 28px rgba(25, 35, 48, .06); --fh-rhodo: #5b7a99; --fh-gold: #9c8467; font-family: var(--fh-nordic); font-size: 17px; line-height: 1.7; background-image: none; -webkit-font-smoothing: antialiased; } .fh-heritage h1, .fh-heritage h2, .fh-heritage h3, .fh-heritage h4, .fh-heritage .fh-hero__title, .fh-heritage .fh-page__title, .fh-heritage .fh-brand { font-family: var(--fh-nordic); letter-spacing: -0.015em; font-weight: 650; } .fh-heritage .fh-hero__title { font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -0.03em; } .fh-heritage .fh-page__title { font-weight: 700; letter-spacing: -0.025em; } .fh-heritage .fh-brand { font-weight: 700; letter-spacing: -0.02em; } .fh-heritage .fh-hero__tagline { font-style: normal; font-weight: 400; } html[lang^="ne"] .fh-heritage h1, html[lang^="ne"] .fh-heritage h2, html[lang^="ne"] .fh-heritage h3, html[lang^="ne"] .fh-heritage .fh-hero__title, html[lang^="ne"] .fh-heritage .fh-page__title, html[lang^="ne"] .fh-heritage .fh-brand { font-family: "Mukta", "Inter", sans-serif; letter-spacing: 0; font-weight: 700; } html[lang^="ne"] .fh-heritage { font-family: "Mukta", "Inter", sans-serif; font-size: 17.5px; } /* Welcome line (सेवा · Sewa · स्वागतम्): a little bigger. */ .fh-heritage .fh-eyebrow, .fh-eyebrow { font-size: 1.05rem; letter-spacing: .16em; font-weight: 600; color: var(--fh-rhodo); margin-bottom: 16px; } .fh-eyebrow .fh-deva { font-size: 1.15em; } html[lang^="ne"] .fh-heritage .fh-eyebrow, html[lang^="ne"] .fh-eyebrow { font-size: 1.2rem; letter-spacing: 0; } /* Flat, airy cards: no old double frames or paper texture. */ .fh-heritage .fh-lock, .fh-heritage .fh-history, .fh-heritage .fh-tradition, .fh-heritage .fh-otd, .fh-heritage .fh-origins__map, .fh-heritage .fh-place, .fh-heritage .fh-card { box-shadow: var(--fh-shadow); border-color: var(--fh-line); } .fh-heritage .fh-card-person { border-radius: 14px; box-shadow: 0 1px 2px rgba(25, 35, 48, .05), 0 4px 14px rgba(25, 35, 48, .05); } .fh-card-person.is-ancestor, .fh-card-person.is-ancestor.is-male, .fh-card-person.is-ancestor.is-female { border-color: #c4a986; box-shadow: 0 0 0 1px #c4a986, 0 4px 14px rgba(25, 35, 48, .05); } .fh-card-person.is-match.is-ancestor { box-shadow: 0 0 0 3px rgba(91, 122, 153, .35), var(--fh-shadow); } .fh-heritage .fh-btn, .fh-heritage a.fh-btn { border-radius: 10px; letter-spacing: .04em; font-weight: 600; box-shadow: none; } .fh-heritage .fh-hero:not(.has-photo) { background: linear-gradient(180deg, #eaf0f6 0%, var(--fh-bg) 100%); } .fh-heritage .fh-header { background: #ffffff; } .fh-heritage .fh-footer { background: var(--fh-bg); } .fh-heritage .fh-icon-row { opacity: .7; } .fh-heritage .fh-journey__stop:last-child .fh-journey__dot { color: #fff; } /* Evening mode: calm Nordic night. */ html.fh-dark .fh-heritage .fh-header, html.fh-dark .fh-header { background: #1c222a; } html.fh-dark .fh-heritage .fh-hero:not(.has-photo) { background: linear-gradient(180deg, #1a2028, var(--fh-bg)); } html.fh-dark .fh-heritage { --fh-rhodo: #9fb6cc; } html.fh-dark .fh-heritage .fh-btn, html.fh-dark .fh-btn { background: #5a7a99; } html.fh-dark .fh-heritage .fh-btn:hover { background: #6b8cab; } html.fh-dark .fh-heritage .fh-header::after, html.fh-dark .fh-heritage .fh-footer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'%3E%3Crect width='120' height='32' fill='%231c222a'/%3E%3Cpath d='M0 1.6h120M0 30.4h120' stroke='%232c3440' stroke-width='1.2'/%3E%3Cpath d='M0 4h120M0 28h120' stroke='%23d5dde6' stroke-width='.5' opacity='0'/%3E%3Cg transform='translate(16 16)'%3E%3Cg fill='%23e9a94e'%3E%3Ccircle cx='0' cy='-6.2' r='2.9'/%3E%3Ccircle cx='4.4' cy='-4.4' r='2.9'/%3E%3Ccircle cx='6.2' cy='0' r='2.9'/%3E%3Ccircle cx='4.4' cy='4.4' r='2.9'/%3E%3Ccircle cx='0' cy='6.2' r='2.9'/%3E%3Ccircle cx='-4.4' cy='4.4' r='2.9'/%3E%3Ccircle cx='-6.2' cy='0' r='2.9'/%3E%3Ccircle cx='-4.4' cy='-4.4' r='2.9'/%3E%3C/g%3E%3Cg fill='%23f3c878'%3E%3Ccircle cx='2.4' cy='-2.4' r='2.4'/%3E%3Ccircle cx='2.4' cy='2.4' r='2.4'/%3E%3Ccircle cx='-2.4' cy='2.4' r='2.4'/%3E%3Ccircle cx='-2.4' cy='-2.4' r='2.4'/%3E%3Ccircle cx='0' cy='-3.3' r='2.2'/%3E%3Ccircle cx='3.3' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='3.3' r='2.2'/%3E%3Ccircle cx='-3.3' cy='0' r='2.2'/%3E%3C/g%3E%3Ccircle r='1.9' fill='%23c27b2c'/%3E%3C/g%3E%3Cpath d='M33 25.5 44 9.5 55 25.5z' fill='%236b86a0'/%3E%3Cpath d='M44 9.5 40.6 14.4l1.9-.9 1.5 1.5 1.5-1.5 1.9.9z' fill='%23e8ecf1'/%3E%3Cpath d='M47 25.5 57.5 12.5 68 25.5z' fill='%238fa6bc'/%3E%3Cpath d='M57.5 12.5l-2.8 3.5 1.5-.7 1.3 1.3 1.3-1.3 1.5.7z' fill='%23e8ecf1'/%3E%3Cpath d='M31 25.5h39' stroke='%233a4553' stroke-width='1'/%3E%3Cpath d='M76 12.5c2.5-2.4 5-2.4 7.5 0s5 2.4 7.5 0 5-2.4 7.5 0 5 2.4 7.5 0' fill='none' stroke='%236f8ca8' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M76 17.5c2.5-2.4 5-2.4 7.5 0s5 2.4 7.5 0 5-2.4 7.5 0 5 2.4 7.5 0' fill='none' stroke='%239fb6cc' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M76 22.5c2.5-2.4 5-2.4 7.5 0s5 2.4 7.5 0 5-2.4 7.5 0 5 2.4 7.5 0' fill='none' stroke='%236f8ca8' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M113.5 16l2.5-2.5 2.5 2.5-2.5 2.5z' fill='%23c4a986'/%3E%3C/svg%3E"); } .fh-heritage .fh-gen-band { background: rgba(79, 109, 138, .025); border-color: rgba(79, 109, 138, .12); } .fh-heritage .fh-gen-band.is-alt { background: rgba(79, 109, 138, .055); border-color: rgba(79, 109, 138, .14); } .fh-heritage .fh-gen-band__label, .fh-heritage .fh-gen-band.is-alt .fh-gen-band__label { color: #6a7f95; } html.fh-dark .fh-heritage .fh-gen-band { background: rgba(159, 182, 204, .03); border-color: rgba(159, 182, 204, .1); } html.fh-dark .fh-heritage .fh-gen-band.is-alt { background: rgba(159, 182, 204, .06); } html.fh-dark .fh-heritage .fh-gen-band__label { color: #9fb6cc; } /* ========================================================================== Title bar (v1.25): one even row - menu words never break over two lines and the site name is never cut. When the row doesn't fit, the menu folds into the ☰ button (phones and small tablets). ========================================================================== */ .fh-header .fh-wrap { max-width: 1360px; } .fh-header__inner { gap: 20px; flex-wrap: nowrap; } .fh-brand { flex: none; } .fh-brand span { overflow: visible; text-overflow: clip; } .fh-nav { min-width: 0; } .fh-menu { flex-wrap: nowrap; align-items: center; gap: 2px; } .fh-menu li { flex: none; } .fh-menu a { white-space: nowrap; font-size: 1.02rem; line-height: 1.2; padding: 10px 14px; border-radius: 999px; } html[lang^="ne"] .fh-menu a { font-size: 1.06rem; } @media (max-width: 900px) { .fh-menu-toggle { display: block; order: 3; flex: none; } .fh-header__inner .fh-brand { margin-right: auto; } .fh-lang { order: 2; } .fh-dark-toggle { order: 4; } .fh-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 0; background: var(--fh-surface); border-bottom: 1px solid var(--fh-line); box-shadow: 0 12px 24px rgba(25, 35, 48, .08); padding: 10px 20px 18px; } .fh-heritage .fh-nav { top: calc(100% + 26px); } .fh-nav.is-open { display: block; } .fh-menu { flex-direction: column; align-items: stretch; gap: 2px; max-width: 1320px; margin: 0 auto; } .fh-menu a { font-size: 1.1rem; padding: 12px 16px; border-radius: 10px; } } @media (max-width: 600px) { .fh-heritage .fh-nav { top: calc(100% + 20px); } .fh-brand span { overflow: hidden; text-overflow: ellipsis; } .fh-brand { flex: 0 1 auto; min-width: 0; } } .fh-lang__short { display: none; } .fh-brand__mark { flex: none; } @media (max-width: 600px) { .fh-header__inner { gap: 8px; } .fh-lang__long { display: none; } .fh-lang__short { display: inline; } .fh-lang a { padding: 5px 10px; } .fh-dark-toggle { margin-left: 0; } .fh-brand, .fh-heritage .fh-brand { font-size: 1.25rem; } .fh-brand__mark, .fh-heritage .fh-brand__mark { width: 30px; height: 30px; } } .fh-view-note { flex: 1 1 100%; order: 5; margin: 2px 0 0; font-size: .95rem; color: var(--fh-muted); } .fh-view-note[hidden] { display: none; } /* ========================================================================== Centred headings (v1.26): page titles, section headings and their ornaments sit in the middle; the tools under a title are centred too. ========================================================================== */ .fh-heritage .fh-tree-head { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .fh-heritage .fh-tree-head > div:first-child { max-width: 780px; } .fh-heritage .fh-tree-tools { justify-content: center; } .fh-heritage .fh-page__title, .fh-heritage .fh-ornament-title, .fh-heritage .fh-otd__title, .fh-heritage .fh-rel__title, .fh-heritage .fh-dates__month h2, .fh-heritage .fh-home__story h2, .fh-heritage .fh-traditions__topic h2, .fh-heritage .fh-album__head, .fh-heritage .fh-place__kicker, .fh-heritage .fh-journey__title, .fh-heritage .fh-map-page .fh-map-play { text-align: center; justify-content: center; } .fh-heritage .fh-page__title::after, .fh-heritage .fh-ornament-title::after { margin-left: auto; margin-right: auto; } .fh-heritage .fh-tree-head .fh-muted, .fh-heritage .fh-tree-intro, .fh-heritage .fh-history-link { text-align: center; margin-left: auto; margin-right: auto; } .fh-heritage .fh-view-bar { justify-content: center; } .fh-heritage .fh-view-note { text-align: center; } .fh-heritage .fh-back-link { text-align: center; } .fh-heritage .fh-page > .fh-page__title + .fh-content { max-width: 780px; margin-left: auto; margin-right: auto; } /* ========================================================================== Tree lines (v1.31): thicker and clearer, coloured by side of the family. Son's family (the family line) = main colour; daughter's family = highlight. ========================================================================== */ .fh-tree { --fh-line-son: var(--fh-accent); --fh-line-daughter: var(--fh-rhodo, #a33b57); --fh-tree-w: 6px; } .fh-tree ul { --fh-tree-line: var(--fh-connector); } .fh-tree ul.is-son-line { --fh-tree-line: var(--fh-line-son); } .fh-tree ul.is-daughter-line { --fh-tree-line: var(--fh-line-daughter); } .fh-tree li::before, .fh-tree li::after { border-top: var(--fh-tree-w) solid var(--fh-tree-line); } .fh-tree li::after { border-left: var(--fh-tree-w) solid var(--fh-tree-line); } .fh-tree li:first-child::before, .fh-tree li:last-child::after { border: 0 none; } .fh-tree li:last-child::before { border-right: var(--fh-tree-w) solid var(--fh-tree-line); border-radius: 0 12px 0 0; } .fh-tree li:first-child::after { border-radius: 12px 0 0 0; } .fh-tree ul ul::before { border-left: var(--fh-tree-w) solid var(--fh-tree-line); } .fh-couple__link { height: 3px; } .fh-couple__link::after { width: 10px; height: 10px; } .fh-legend__item.is-son-line::before, .fh-legend__item.is-daughter-line::before { width: 22px; height: 0; border-radius: 2px; border-top: 5px solid; vertical-align: 3px; background: none; } .fh-legend__item.is-son-line::before { border-color: var(--fh-accent); } .fh-legend__item.is-daughter-line::before { border-color: var(--fh-rhodo, #a33b57); } .fh-legend { flex-wrap: wrap; } @media print { .fh-tree { --fh-tree-w: 4px; } } /* Line logo: lighter lines in evening mode so it shows on the dark bar. */ html.fh-dark .fh-logo__lines { stroke: #e0a3ae; } /* ===== v1.33: view notes, key, generation tags in the margin ===== */ .fh-view-note__line { display: block; margin-bottom: 4px; color: var(--fh-ink); } /* A chosen branch (Patheka, Rimichim…) reads as a small title with its own introduction. */ .fh-view-note__line.is-branch { padding: 10px 14px 12px; margin: 0 auto 10px; max-width: 76ch; border-radius: 12px; background: color-mix(in srgb, var(--fh-highlight, #9c6b1e) 7%, var(--fh-surface, #fff)); border: 1px solid color-mix(in srgb, var(--fh-highlight, #9c6b1e) 22%, transparent); } .fh-view-note__line.is-branch .fh-view-note__desc { color: var(--fh-ink); opacity: .9; } .fh-view-branch select { max-width: 200px; } .fh-view-note__name { display: block; font-family: var(--fh-display, var(--fh-serif)); font-weight: 400; font-size: 1.25rem; color: var(--fh-ink); } .fh-view-note__desc { display: block; max-width: 70ch; margin: 2px auto 0; white-space: pre-line; } .fh-view-note__text { display: block; } .fh-legend { gap: 8px 18px; } .fh-legend__item { white-space: nowrap; } .fh-legend__item[hidden] { display: none; } .fh-tree { padding-left: 84px; } .fh-gen-band__label { position: absolute; left: calc(12px + var(--fh-tag-x, 0px)); z-index: 3; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: center; width: 48px; padding: 5px 0 4px; border-radius: 10px; background: var(--fh-surface, #fff); border: 1px solid var(--fh-line, #e2d7c1); color: var(--fh-muted); letter-spacing: 0; text-transform: none; font: 400 1rem/1 var(--fh-sans); } .fh-gen-band__word { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fh-gold, #b8912f); } .fh-gen-band__num { font-family: var(--fh-display, var(--fh-serif)); font-size: 1.25rem; line-height: 1.1; color: var(--fh-ink); } .fh-heritage .fh-gen-band__label, .fh-heritage .fh-gen-band.is-alt .fh-gen-band__label, .fh-gen-band.is-alt .fh-gen-band__label { color: var(--fh-muted); } html[lang^="ne"] .fh-gen-band__word { letter-spacing: 0; text-transform: none; font-size: .72rem; } html.fh-dark .fh-gen-band__label { background: #20252c; border-color: rgba(217, 195, 165, .2); } html.fh-dark .fh-gen-band__num { color: #eee4d4; } /* v1.34: phones - no A3 poster button (it is for printing from a computer) */ @media (max-width: 600px) { #fh-print-poster { display: none; } } .fh-gen-rail { position: absolute; top: 0; bottom: 0; left: var(--fh-tag-x, 0px); width: 72px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--fh-surface, #fffbf3) 78%, transparent); } html.fh-dark .fh-gen-rail { background: linear-gradient(90deg, #181c22 78%, transparent); } body.fh-poster .fh-gen-rail { display: none; } @media print { .fh-gen-rail { display: none; } } @media (max-width: 600px) { .fh-tree { padding-left: 64px; } .fh-gen-rail { width: 56px; } .fh-gen-band__label { left: calc(6px + var(--fh-tag-x, 0px)); width: 40px; } .fh-gen-band__num { font-size: 1.05rem; } } /* v1.36: Kirati bows on both sides of every page (fixed, behind everything) */ .fh-side-bow { position: fixed; z-index: -1; pointer-events: none; top: 50%; transform: translate(-50%, -50%); width: 90px; max-height: 88vh; aspect-ratio: 84 / 440; color: var(--fh-gold, #b8912f); opacity: .13; } .fh-side-bow svg { width: 100%; height: 100%; display: block; } .fh-side-bow--left { left: 52px; } html.fh-dark .fh-side-bow { opacity: .1; } body.fh-poster .fh-side-bow { display: none; } /* Wide screens: bigger and clearer, centred in the empty side margins (never over the text). */ @media (min-width: 1240px) { .fh-side-bow { width: clamp(60px, calc((100vw - 1160px) / 2), 130px); opacity: .85; } .fh-side-bow--left { left: calc((100vw - 1120px) / 4); } html.fh-dark .fh-side-bow { opacity: .6; } } @media print { .fh-side-bow { display: none !important; } } /* v1.35: Traditions - search box and cards centred under the centred topic headings */ .fh-traditions__search { text-align: center; } .fh-traditions__list { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; } @media (max-width: 600px) { .fh-traditions__list { grid-template-columns: 1fr; } } /* Home page side column (kept as a wrapper) */ .fh-home__side { position: sticky; top: 24px; } .fh-home__side .fh-home__tree { position: static; } @media (max-width: 900px) { .fh-home__side { position: static; } } /* v1.40: lock screen in the site's own warm colours; the photo fades softly into the page, and it stays inside the page width so the side bow is never cut. */ .fh-lock-scene { max-width: 1120px; margin: 0 auto; border-radius: 0; overflow: visible; } .fh-lock-scene.has-photo::before { inset: 0; filter: blur(12px) sepia(.4) saturate(.7) brightness(1.12); opacity: .3; transform: none; -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 25%, transparent 100%); } .fh-lock-scene.has-photo::after { display: none; } html.fh-dark .fh-lock-scene.has-photo::before { opacity: .25; } .fh-heritage .fh-lock__icon { background: var(--fh-accent-soft); } /* v1.42: the bow rides beside the content while you scroll - never hidden behind sections, and it stops above the footer. Phones/tablets: a faint watermark behind the page, as before. */ .fh-main { position: relative; } .fh-side-rail { position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; } @media (min-width: 1240px) { .fh-side-rail { width: calc((100vw - 1120px) / 2); z-index: 3; } .fh-side-rail .fh-side-bow { position: sticky; top: max(12px, calc(50vh - min(38vh, 300px))); transform: none; left: auto; margin: 0 auto; max-height: 76vh; } } /* v1.43: Family Dates - search by name + quick filters */ .fh-dates__search { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; max-width: 760px; margin: 0 auto 22px; } .fh-dates__search input { flex: 1 1 260px; max-width: 360px; padding: 10px 16px; border: 1px solid var(--fh-line); border-radius: 999px; font: inherit; background: var(--fh-surface); } .fh-dates__search input:focus { outline: 2px solid var(--fh-accent); outline-offset: 1px; } .fh-dates__filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--fh-line); border-radius: 999px; background: var(--fh-surface); } .fh-dates__filters button { border: 0; background: none; font: inherit; font-weight: 600; font-size: .92rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: var(--fh-ink); } .fh-dates__filters button[aria-pressed="true"] { background: var(--fh-ink); color: var(--fh-surface); } .fh-dates__month[hidden], .fh-dates .fh-date[hidden] { display: none; } /* v1.44: "Add your details" - the form the family fill in themselves */ .fh-form-page { max-width: 760px; margin: 0 auto; } .fh-form-help { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 18px 22px; margin-bottom: 24px; } .fh-form-help h2 { margin: 0 0 8px; font-size: 1.3rem; } .fh-form-help ol { margin: 0 0 10px; padding-left: 20px; } .fh-form-help li { margin: 4px 0; } .fh-form-privacy { margin: 0; color: var(--fh-muted); font-size: .94rem; } .fh-form__group { border: 1px solid var(--fh-line); border-radius: var(--fh-radius); background: var(--fh-surface); padding: 6px 22px 18px; margin: 0 0 18px; } .fh-form__group { padding: 18px 22px; } .fh-form__group legend { float: left; width: 100%; margin: 0; padding: 0 0 10px; font-family: var(--fh-display, var(--fh-serif)); font-size: 1.15rem; color: var(--fh-ink); border-bottom: 1px solid var(--fh-line); } .fh-form__group::after { content: ""; display: block; clear: both; } .fh-form__row { margin: 14px 0 0; } .fh-form__row label { display: block; font-weight: 600; margin-bottom: 5px; } .fh-form__row input[type="text"], .fh-form__row input[type="number"], .fh-form__row textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--fh-line); border-radius: 12px; font: inherit; background: var(--fh-bg); } .fh-form__row input:focus, .fh-form__row textarea:focus { outline: 2px solid var(--fh-accent); outline-offset: 1px; } .fh-form__row small { display: block; margin-top: 5px; color: var(--fh-muted); font-size: .9rem; } .fh-form__radios { display: inline-flex; gap: 22px; } .fh-form__radios label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; } .fh-form__row input[type="file"] { font: inherit; } .fh-form .fh-req { color: #b3261e; } .fh-form__hp { position: absolute; left: -9999px; } .fh-form__send { text-align: center; margin: 22px 0 8px; } .fh-form-done { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 32px 26px; text-align: center; } .fh-form-error { background: #fcf0f1; border-left: 4px solid #b3261e; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; } @media (max-width: 600px) { .fh-form__group { padding: 4px 14px 14px; } } /* v1.45: tree tools - groups, and the two buttons that go to another page stand out */ .fh-tools-sep { display: inline-block; width: 1px; height: 22px; background: var(--fh-line); margin: 0 2px; } .fh-page-btn { background: var(--fh-accent-soft); border-color: var(--fh-accent); color: var(--fh-accent); font-weight: 700; } .fh-page-btn:hover, .fh-page-btn:focus { background: var(--fh-accent); color: var(--fh-accent-ink, #fff); } .fh-page-btn.is-add { background: var(--fh-gold, #b8912f); border-color: var(--fh-gold, #b8912f); color: #fff; } .fh-page-btn.is-add:hover, .fh-page-btn.is-add:focus { filter: brightness(.92); color: #fff; } .fh-page-btn__arrow { font-weight: 700; margin-left: 2px; } @media (max-width: 600px) { .fh-tools-sep { display: none; } } /* --------------------------------------------------------------------------- Family Tree page order (v1.51): the branch first, then the tools, then the view buttons right above the tree. ------------------------------------------------------------------------- */ .fh-tree-head { margin-bottom: 14px; } .fh-branch-bar { max-width: 1120px; margin: 0 auto 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 16px; box-shadow: var(--fh-shadow, 0 1px 3px rgba(0,0,0,.06)); } .fh-branch-pick { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .fh-branch-pick[hidden] { display: none; } .fh-branch-pick__label { font-family: var(--fh-display, var(--fh-serif)); font-size: 1.2rem; color: var(--fh-ink); white-space: nowrap; } .fh-branch-pick select { font: 600 1.05rem/1.2 var(--fh-sans); padding: 10px 40px 10px 14px; min-width: 220px; max-width: 100%; border: 2px solid var(--fh-accent); border-radius: 12px; color: var(--fh-ink); cursor: pointer; background-color: var(--fh-bg, #fff); } .fh-branch-pick select:focus-visible { outline: 3px solid var(--fh-gold, #b8912f); outline-offset: 2px; } .fh-branch-bar__links { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .fh-branch-bar__links > * { white-space: nowrap; } .fh-branch-pick[hidden] + .fh-branch-bar__links { margin-left: 0; } .fh-branch-note { max-width: 1120px; margin: 0 auto 14px; padding: 12px 18px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fh-highlight, #9c6b1e) 7%, var(--fh-surface, #fff)); border: 1px solid color-mix(in srgb, var(--fh-highlight, #9c6b1e) 22%, transparent); } .fh-branch-note[hidden] { display: none; } .fh-branch-note__name { display: block; font-family: var(--fh-display, var(--fh-serif)); font-weight: 400; font-size: 1.3rem; color: var(--fh-ink); margin-bottom: 4px; } .fh-branch-note__desc { margin: 0; max-width: 80ch; white-space: pre-line; line-height: 1.65; } .fh-tree-page > .fh-tree-tools { max-width: 1120px; margin: 0 auto 14px; } .fh-view-bar { margin-top: 4px; } .fh-heritage .fh-branch-bar { justify-content: flex-start; } .fh-heritage .fh-branch-bar__links { margin-left: 0; } .fh-heritage .fh-tree-page > .fh-tree-tools { justify-content: flex-start; } .fh-heritage .fh-view-bar { justify-content: flex-start; } @media (max-width: 640px) { .fh-branch-bar { padding: 12px; } .fh-branch-pick { width: 100%; flex-wrap: wrap; } .fh-branch-pick select { flex: 1 1 100%; min-width: 0; } .fh-branch-bar__links { width: 100%; margin-left: 0; } .fh-branch-bar__links > * { flex: 1 1 100%; justify-content: center; white-space: nowrap; } } /* --------------------------------------------------------------------------- Compact tree (v1.53): smaller cards and shorter connecting lines, so more of the family fits on the screen and on the printed poster. ------------------------------------------------------------------------- */ .fh-tree { gap: 28px; padding: 24px 24px 28px 72px; } .fh-tree ul { padding-top: 20px; } .fh-tree > ul { padding-top: 0; } .fh-tree li { padding: 20px 5px 0; } .fh-tree li:only-child { padding-top: 0; } .fh-tree li::before, .fh-tree li::after { height: 20px; } .fh-tree ul ul::before { height: 20px; } .fh-couple__link { width: 12px; } .fh-couple__link::after { width: 7px; height: 7px; } .fh-card-person { width: 116px; padding: 9px 6px 8px; gap: 3px; border-radius: 10px; } .fh-heritage .fh-card-person { border-radius: 10px; } .fh-card-person .fh-avatar { width: 42px; height: 42px; font-size: .95rem; } .fh-card-person__name { font-size: .9rem; line-height: 1.15; } html[lang^="ne"] .fh-card-person__name { font-size: .95rem; line-height: 1.25; } .fh-card-person__years { font-size: .72rem; } .fh-card-lamp { top: 5px; right: 5px; transform: scale(.85); transform-origin: top right; } @media (max-width: 600px) { .fh-tree { padding-left: 60px; } } /* Poster measuring (for a moment, while the poster picture is drawn): compact cards. */ .fh-tree.is-poster-measure { gap: 16px; } .fh-tree.is-poster-measure li { padding-left: 3px; padding-right: 3px; } .fh-tree.is-poster-measure .fh-card-person { width: 98px; padding: 6px 4px 5px; gap: 1px; } .fh-tree.is-poster-measure .fh-avatar, .fh-tree.is-poster-measure .fh-card-lamp { display: none; } .fh-tree.is-poster-measure .fh-card-person__name { font-size: .86rem; } .fh-tree.is-poster-measure .fh-couple__link { width: 8px; } /* Poster, generations left to right (chosen when it fits the page better). */ .fh-tree.is-poster-side { align-items: flex-start; } .fh-tree.is-poster-side ul { flex-direction: column; align-items: flex-start; padding: 0 0 0 28px; width: max-content; } .fh-tree.is-poster-side > ul { padding-left: 0; } .fh-tree.is-poster-side li { flex-direction: row; align-items: center; padding: 2px 0; } .fh-tree.is-poster-side li:only-child { padding-top: 2px; } .fh-tree.is-poster-side li::before, .fh-tree.is-poster-side li::after, .fh-tree.is-poster-side ul ul::before { display: none; } .fh-tree.is-poster-side .fh-couple { flex-direction: column; } .fh-tree.is-poster-side .fh-couple__link { width: 2px; height: 5px; } .fh-tree.is-poster-side .fh-couple__link::after { display: none; } .fh-tree.is-poster-side .fh-card-person { width: 150px; padding: 4px 6px; } .fh-tree.is-poster-side .fh-card-person__name { font-size: .84rem; } /* --------------------------------------------------------------------------- Tree layout (v1.55): "Top to bottom" (generations in rows) or "Left to right" (generations in columns). Left to right keeps a big, wide family narrow, so people are close together and you scroll down instead of sideways. ------------------------------------------------------------------------- */ .fh-tree li { padding-left: 3px; padding-right: 3px; } .fh-layout-switch { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; } .fh-layout-switch__btns { display: inline-flex; border: 1px solid var(--fh-line); border-radius: 999px; background: var(--fh-surface); padding: 3px; } .fh-layout-switch button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font: 600 .88rem/1.1 var(--fh-sans); color: var(--fh-ink); cursor: pointer; white-space: nowrap; } .fh-layout-switch button[aria-pressed="true"] { background: var(--fh-accent); color: #fff; } .fh-layout-switch button:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 1px; } .fh-tree.is-side { align-items: flex-start; padding: 44px 24px 24px 24px; } .fh-tree.is-side ul { flex-direction: column; align-items: flex-start; justify-content: flex-start; width: max-content; padding: 0 0 0 18px; } .fh-tree.is-side > ul { padding-left: 0; } .fh-tree.is-side li { flex-direction: row; align-items: center; padding: 3px 0 3px 18px; } .fh-tree.is-side li:only-child { padding-top: 3px; } .fh-tree.is-side > ul > li { padding-left: 0; } .fh-tree.is-side li::before, .fh-tree.is-side li:first-child::before, .fh-tree.is-side li:last-child::before { display: block; border: 0; border-top: var(--fh-tree-w) solid var(--fh-tree-line); border-radius: 0; left: 0; right: auto; top: 50%; width: 18px; height: 0; margin-top: calc(var(--fh-tree-w) / -2); } .fh-tree.is-side li::after, .fh-tree.is-side li:first-child::after, .fh-tree.is-side li:last-child::after { display: block; border: 0; border-left: var(--fh-tree-w) solid var(--fh-tree-line); border-radius: 0; left: 0; right: auto; top: 0; bottom: 0; width: 0; height: auto; } .fh-tree.is-side li:first-child::after { top: 50%; border-radius: 12px 0 0 0; } .fh-tree.is-side li:last-child::after { bottom: 50%; } .fh-tree.is-side li:only-child::after { display: none; } .fh-tree.is-side > ul > li::before, .fh-tree.is-side > ul > li::after { display: none; } .fh-tree.is-side ul ul::before { left: 0; top: 50%; width: 18px; height: 0; border-left: 0; border-top: var(--fh-tree-w) solid var(--fh-tree-line); margin-top: calc(var(--fh-tree-w) / -2); } .fh-tree.is-side .fh-couple { flex-direction: column; align-items: center; } .fh-tree.is-side .fh-couple__link { width: 3px; height: 8px; } .fh-tree.is-side .fh-couple__link::after { width: 7px; height: 7px; } .fh-tree.is-side .fh-gen-rail { display: none; } .fh-tree.is-side .fh-gen-band { top: 0; bottom: 0; height: auto; border-top: 0; border-bottom: 0; border-left: 1px solid rgba(156, 132, 103, .22); border-right: 1px solid rgba(156, 132, 103, .22); } .fh-tree.is-side .fh-gen-band__label { left: auto; top: calc(8px + var(--fh-tag-y, 0px)); } @media (max-width: 640px) { .fh-layout-switch { width: 100%; } } /* Left to right: short, wide cards (photo on the left) so a big family is not too tall. */ .fh-tree.is-side .fh-card-person { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; text-align: left; width: 176px; padding: 6px 22px 6px 8px; } .fh-tree.is-side .fh-card-person .fh-avatar { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: .78rem; } .fh-tree.is-side .fh-card-person__name { grid-column: 2; align-self: end; font-size: .88rem; } .fh-tree.is-side .fh-card-person__years { grid-column: 2; align-self: start; } .fh-tree.is-side .fh-card-person .fh-card-lamp { top: 4px; right: 4px; } /* --------------------------------------------------------------------------- Packed top-to-bottom tree (v1.57): the page places every card exactly, so brothers and sisters stand close together and parents stay centred above their children. The lines are one drawing (SVG) behind the cards. ------------------------------------------------------------------------- */ .fh-tree.is-packed:not(.is-poster-side) { display: block; position: relative; padding: 0; min-width: 0; margin: 0 auto; width: var(--fh-pack-w); height: var(--fh-pack-h); } .fh-tree.is-packed:not(.is-poster-side) ul, .fh-tree.is-packed:not(.is-poster-side) li { display: contents; } .fh-tree.is-packed:not(.is-poster-side) li::before, .fh-tree.is-packed:not(.is-poster-side) li::after, .fh-tree.is-packed:not(.is-poster-side) ul::before { content: none !important; display: none !important; } .fh-tree.is-packed:not(.is-poster-side) .fh-couple { position: absolute; z-index: 2; } .fh-tree-lines { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; } .fh-tree.is-poster-side .fh-tree-lines { display: none; } .fh-tree.is-packed .fh-gen-band { z-index: 0; } /* ------------------------------------------------------------------------ * v1.61 Who is who: card colours by their place in the family * blue = a man born into the family line * orange = a daughter's husband (married in) * pink = a wife (married in) * purple = a daughter (born into the family) * --------------------------------------------------------------------- */ .fh-tree { --fh-line-daughter: #7a4bb0; } .fh-tree .fh-card-person.is-role-line, html.fh-dark .fh-tree .fh-card-person.is-role-line { background: #edf1f8; border-color: #c6d0e2; border-top: 5px solid #2f4f86; } .fh-tree .fh-card-person.is-role-inlaw, html.fh-dark .fh-tree .fh-card-person.is-role-inlaw { background: #fcf0e4; border-color: #efcfb1; border-top: 5px solid #d0661a; } .fh-tree .fh-card-person.is-role-wife, html.fh-dark .fh-tree .fh-card-person.is-role-wife { background: #fcedf3; border-color: #f0c8d8; border-top: 5px solid #c83e7a; } .fh-tree .fh-card-person.is-role-daughter, html.fh-dark .fh-tree .fh-card-person.is-role-daughter { background: #f2ecf9; border-color: #d8c8ec; border-top: 5px solid #7a4bb0; } .fh-tree .fh-card-person.is-role-line.is-deceased { background: #e8eaee; } .fh-tree .fh-card-person.is-role-inlaw.is-deceased { background: #f3ebe3; } .fh-tree .fh-card-person.is-role-wife.is-deceased { background: #f3e8ed; } .fh-tree .fh-card-person.is-role-daughter.is-deceased { background: #ece7f2; } .fh-tree .fh-card-person.is-role-line .fh-avatar { background: #dde5f2; color: #26406e; box-shadow: 0 0 0 2px #2f4f86; } .fh-tree .fh-card-person.is-role-inlaw .fh-avatar { background: #f8dcc4; color: #8a3d08; box-shadow: 0 0 0 2px #d0661a; } .fh-tree .fh-card-person.is-role-wife .fh-avatar { background: #f8d6e5; color: #8f2152; box-shadow: 0 0 0 2px #c83e7a; } .fh-tree .fh-card-person.is-role-daughter .fh-avatar { background: #e5d9f3; color: #4f2a7c; box-shadow: 0 0 0 2px #7a4bb0; } .fh-tree .fh-card-person.is-role-line:hover { border-color: #2f4f86; } .fh-tree .fh-card-person.is-role-inlaw:hover { border-color: #d0661a; } .fh-tree .fh-card-person.is-role-wife:hover { border-color: #c83e7a; } .fh-tree .fh-card-person.is-role-daughter:hover { border-color: #7a4bb0; } /* Ancestors keep their gold frame, with the role colour on top. */ .fh-tree .fh-card-person.is-ancestor.is-role-line { border-top-color: #2f4f86; } .fh-tree .fh-card-person.is-ancestor.is-role-inlaw { border-top-color: #d0661a; } .fh-tree .fh-card-person.is-ancestor.is-role-wife { border-top-color: #c83e7a; } .fh-tree .fh-card-person.is-ancestor.is-role-daughter { border-top-color: #7a4bb0; } html.fh-dark .fh-tree .fh-card-person[class*="is-role-"] .fh-card-person__name { color: #1f242b; } html.fh-dark .fh-tree .fh-card-person[class*="is-role-"] .fh-card-person__years { color: #535b66; } .fh-legend__item.is-role-line::before { background: #edf1f8; border: 2px solid #2f4f86; } .fh-legend__item.is-role-inlaw::before { background: #fcf0e4; border: 2px solid #d0661a; } .fh-legend__item.is-role-wife::before { background: #fcedf3; border: 2px solid #c83e7a; } .fh-legend__item.is-role-daughter::before { background: #f2ecf9; border: 2px solid #7a4bb0; } .fh-legend__item.is-daughter-line::before { border-color: #7a4bb0; } /* The marigold (sayapatri) between husband and wife. */ .fh-tree .fh-couple__link.is-flower { background: none; display: flex; align-items: center; justify-content: center; flex: none; align-self: center; width: 28px; height: 28px; } .fh-tree .fh-couple__link.is-flower::after { display: none; } .fh-tree .fh-couple__link.is-flower .fh-marigold { width: 22px; height: 22px; display: block; } .fh-tree .fh-couple__link.is-marigold-leaves { width: 34px; } .fh-tree .fh-couple__link.is-marigold-leaves .fh-marigold { width: 32px; } .fh-tree .fh-couple__link.is-marigold-line { width: 44px; background: linear-gradient(var(--fh-gold), var(--fh-gold)) center / 100% 2px no-repeat; } .fh-tree .fh-couple__link.is-marigold-line .fh-marigold { width: 18px; height: 18px; } .fh-tree.is-side .fh-couple__link.is-flower { width: 100%; height: 26px; } .fh-tree.is-side .fh-couple__link.is-flower .fh-marigold { width: 20px; height: 20px; } .fh-tree.is-side .fh-couple__link.is-marigold-leaves .fh-marigold { width: 30px; } .fh-tree.is-side .fh-couple__link.is-marigold-line { height: 34px; background: linear-gradient(var(--fh-gold), var(--fh-gold)) center / 2px 100% no-repeat; } .fh-tree.is-poster-measure .fh-couple__link.is-flower { width: 20px; height: 20px; } .fh-tree.is-poster-measure .fh-couple__link.is-flower .fh-marigold { width: 16px; height: 16px; } .fh-tree.is-poster-measure .fh-couple__link.is-marigold-leaves { width: 24px; } .fh-tree.is-poster-measure .fh-couple__link.is-marigold-leaves .fh-marigold { width: 24px; } .fh-tree.is-poster-measure .fh-couple__link.is-marigold-line { width: 30px; } .fh-tree.is-poster-side .fh-couple__link.is-flower { width: 100%; height: 18px; } .fh-tree.is-poster-side .fh-couple__link.is-flower .fh-marigold { width: 14px; height: 14px; } .fh-tree.is-poster-side .fh-couple__link.is-marigold-leaves .fh-marigold { width: 20px; } .fh-tree.is-poster-side .fh-couple__link.is-marigold-line { height: 26px; background: linear-gradient(var(--fh-gold), var(--fh-gold)) center / 2px 100% no-repeat; } /* v1.62 Pachha check */ .fh-pachha__intro { margin: 0 0 12px; color: var(--fh-muted); font-size: .95rem; } .fh-pachha__verdict { border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-size: 1rem; } .fh-pachha__verdict strong { display: block; font-size: 1.1rem; } .fh-pachha__verdict ul { margin: 6px 0 0; padding-left: 20px; } .fh-pachha__verdict.is-bad { background: #fdecec; border: 2px solid #c62828; color: #7f1d1d; } .fh-pachha__verdict.is-ok { background: #eaf6ee; border: 2px solid #2e7d4f; color: #1f5134; } .fh-pachha__warn { background: #fff6e0; border-left: 4px solid #d99a00; padding: 8px 12px; border-radius: 6px; margin: 6px 0; font-size: .93rem; color: #5b4300; } .fh-pachha__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; } .fh-pachha__side h3 { margin: 0 0 6px; font-size: 1.02rem; } .fh-pachha__list { list-style: none; margin: 0; padding: 0; font-size: .9rem; } .fh-pachha__list li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--fh-line); align-items: baseline; } .fh-pachha__rel { color: var(--fh-muted); } .fh-pachha__list li.is-unknown .fh-pachha__name { color: #b26a00; font-weight: 500; } .fh-pachha__note { font-size: .86rem; color: var(--fh-muted); margin: 10px 0 0; } html.fh-dark .fh-pachha__verdict.is-bad { background: #3a1b1b; color: #ffd6d6; } html.fh-dark .fh-pachha__verdict.is-ok { background: #173024; color: #cfeedd; } html.fh-dark .fh-pachha__warn { background: #3a2f10; color: #ffe7a8; } @media (max-width: 560px) { .fh-pachha__list li { grid-template-columns: 1fr auto; } .fh-pachha__rel { grid-column: 1 / -1; } } /* Buttons in a person's pop-up */ .fh-person__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } /* One person's line */ .fh-tree .fh-card-person.is-focus { outline: 3px solid var(--fh-gold); outline-offset: 3px; } .fh-tree.is-picking .fh-card-person { cursor: crosshair; } .fh-view-note__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; width: 100%; } .fh-btn--small { padding: 6px 12px; font-size: .86rem; } .fh-linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--fh-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; } .fh-pachha__side + .fh-pachha__side { margin-top: 12px; } /* ------------------------------------------------------------------------ * v1.65 The introduction on the Home page: headings with a gold ornament, * and paragraphs with both edges even. * --------------------------------------------------------------------- */ .fh-home__story h2 { text-align: center; font-size: 1.72rem; color: var(--fh-gold); margin: 46px 0 8px; line-height: 1.25; } .fh-home__story > h2:first-child { margin-top: 0; } .fh-home__story h2::after { content: ""; display: block; width: 132px; height: 12px; margin: 10px auto 0; background: no-repeat center/132px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 12'%3E%3Cg fill='none' stroke='%239c8467' stroke-width='1'%3E%3Cpath d='M0 6h46M86 6h46'/%3E%3Cpath d='M66 1.2 70.8 6 66 10.8 61.2 6z' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='52' cy='6' r='1.5' fill='%239c8467'/%3E%3Ccircle cx='80' cy='6' r='1.5' fill='%239c8467'/%3E%3C/svg%3E"); } .fh-home__story p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } html[lang^="ne"] .fh-home__story p { hyphens: none; -webkit-hyphens: none; } @media (max-width: 480px) { .fh-home__story p { text-align: left; hyphens: none; } .fh-home__story h2 { font-size: 1.45rem; margin-top: 36px; } } html.fh-dark .fh-home__story h2 { color: var(--fh-gold); } .fh-pachha__samet { font-weight: 400; color: var(--fh-muted); font-size: .9em; } /* ------------------------------------------------------------------------ * v1.68 The branch pages and the journey map * --------------------------------------------------------------------- */ .fh-branch-page__lead { text-align: center; margin-top: -6px; } .fh-branch-page__story { max-width: 780px; margin: 0 auto 28px; } .fh-branch-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; } .fh-branch-card { display: block; text-decoration: none; color: inherit; padding: 20px 22px; } .fh-branch-card h2 { margin: 0 0 8px; font-size: 1.4rem; } .fh-branch-card p { margin: 0 0 10px; color: var(--fh-muted); font-size: .95rem; } .fh-branch-card__go { color: var(--fh-accent); font-weight: 600; font-size: .92rem; } .fh-branch-card:hover { border-color: var(--fh-gold); } .fh-journey-map__wrap { margin: 26px auto 10px; max-width: 900px; } .fh-journey-map { height: 420px; border-radius: 14px; border: 1px solid var(--fh-line); overflow: hidden; margin: 14px 0 18px; } .fh-journey-pin { background: none; border: 0; } .fh-journey-pin__n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fh-accent); color: #fff; font: 700 .95rem/1 var(--fh-sans); border: 2px solid var(--fh-gold); box-shadow: 0 2px 6px rgba(0,0,0,.35); } .fh-journey-arrow { background: none; border: 0; color: var(--fh-accent); font-size: 1.1rem; line-height: 22px; text-align: center; } .fh-journey-arrow span { display: inline-block; } .fh-journey-legend { background: rgba(255,255,255,.9); border-radius: 8px; padding: 4px 8px; font: 600 .8rem var(--fh-sans); color: #333; } .fh-journey-legend span { display: inline-block; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 2px solid; border-radius: 50%; font-size: .72rem; } .fh-journey-list { list-style: none; margin: 0; padding: 0; counter-reset: none; } .fh-journey-list li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--fh-line); } .fh-journey-list li p { margin: 4px 0 6px; } .fh-journey-list__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fh-accent); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 .9rem var(--fh-sans); } .fh-journey-list__pin { font-size: .85rem; color: var(--fh-muted); } .fh-branch-page__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 8px; } .fh-journey-table input, .fh-journey-table textarea { font-size: .92rem; } @media (max-width: 600px) { .fh-journey-map { height: 320px; } } .fh-tree-journey { max-width: 900px; margin: 6px auto 18px; } .fh-tree-journey__title { text-align: center; font-size: 1.4rem; margin: 0 0 4px; } .fh-tree-journey > .fh-muted { text-align: center; margin: 0 0 10px; } .fh-tree-journey .fh-journey-map { height: 320px; } .fh-tree-journey .fh-journey-list { margin-bottom: 8px; } /* Donations page: the total, then one line per gift (name · amount, then what for · date). */ .fh-don-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-left: 4px solid var(--fh-gold); border-radius: var(--fh-radius); padding: 16px 20px; margin: 0 0 18px; box-shadow: var(--fh-shadow); } .fh-don-total__label { color: var(--fh-muted); } .fh-don-total__sum { font-family: var(--fh-serif); font-size: 1.7rem; color: var(--fh-accent); } .fh-don-total__count { color: var(--fh-muted); font-size: .95rem; } .fh-don-list { list-style: none; margin: 0; padding: 0; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); overflow: hidden; } .fh-don { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 13px 20px; border-top: 1px solid var(--fh-line); } .fh-don:first-child { border-top: 0; } .fh-don__who { font-weight: 600; overflow-wrap: anywhere; } .fh-don--anon .fh-don__who { font-weight: 400; font-style: italic; color: var(--fh-muted); } .fh-don__amt { font-weight: 600; white-space: nowrap; text-align: right; } .fh-don__meta { grid-column: 1 / -1; color: var(--fh-muted); font-size: .92rem; } /* Contact page form. */ .fh-contact-form { max-width: 560px; margin: 22px auto 0; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 20px 22px; box-shadow: var(--fh-shadow); } .fh-contact-form > p:first-of-type { margin-top: 0; } .fh-contact-form label { display: block; font-weight: 600; margin-bottom: 5px; } .fh-contact-form input[type="text"], .fh-contact-form textarea { font: inherit; font-size: 1rem; padding: 9px 12px; border: 1px solid var(--fh-line); border-radius: 10px; background: var(--fh-bg); color: var(--fh-ink); width: 100%; box-sizing: border-box; } .fh-contact-form .fh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fh-contact-form__note { padding: 10px 14px; border-radius: 10px; margin-top: 0; } .fh-contact-form__note--ok { background: #e7f4ea; color: #1e5b2f; } .fh-contact-form__note--bad { background: #fbeaea; color: #8a1f1f; } /* The name of each small icon, shown when the mouse rests on it (or is tapped on a phone). */ .fh-icon-row__item { position: relative; display: inline-flex; border-radius: 6px; cursor: help; outline: none; } .fh-icon-row__item:focus-visible { box-shadow: 0 0 0 2px var(--fh-gold); } .fh-icon-row__item::after { content: attr(data-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; background: var(--fh-ink); color: var(--fh-surface); font: 600 .82rem/1.2 var(--fh-sans); padding: 5px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; } .fh-icon-row__item:hover::after, .fh-icon-row__item:focus::after { opacity: 1; transform: translate(-50%, 0); } .fh-icon-row__item:first-child::after { left: 0; transform: translate(0, 4px); } .fh-icon-row__item:last-child::after { left: auto; right: 0; transform: translate(0, 4px); } .fh-icon-row__item:last-child:hover::after, .fh-icon-row__item:last-child:focus::after { transform: translate(0, 0); } /* 1.90.2: with fourteen icons the row wraps on phones - a name popping up at the edge must not make the page scroll sideways. */ .fh-icon-row { overflow-x: clip; } .fh-icon-row__item:first-child:hover::after, .fh-icon-row__item:first-child:focus::after { transform: translate(0, 0); } .fh-icon-row__item:last-child::after { left: auto; right: 0; transform: translate(0, 4px); } .fh-icon-row__item:last-child:hover::after, .fh-icon-row__item:last-child:focus::after { transform: translate(0, 0); } /* Ten small icons: on phones, no dots and a little closer together so they sit on one line. */ @media (max-width: 560px) { .fh-icon-row { gap: 8px; padding-left: 8px; padding-right: 8px; } .fh-icon-row__dot { display: none; } .fh-icon-row .fh-icon { width: 24px; height: 24px; } } /* Lock button: at the top right of every family page's heading, never in the middle. Computers and tablets: in the corner beside the title. Phones: its own line, on the right. */ .fh-heritage .fh-tree-head { position: relative; } .fh-heritage .fh-tree-head > .fh-tree-tools { align-self: flex-end; order: -1; margin-bottom: -6px; } @media (min-width: 700px) { .fh-heritage .fh-tree-head > .fh-tree-tools { position: absolute; top: 0; right: 0; margin: 0; } .fh-heritage .fh-tree-head > div:first-child { padding-left: 110px; padding-right: 110px; box-sizing: border-box; } } /* Pages without a heading row (Family branches): the same corner of the page. */ .fh-family-page { position: relative; } .fh-lock-corner { display: flex; justify-content: flex-end; margin: -20px 0 6px; } @media (min-width: 700px) { .fh-lock-corner { position: absolute; top: 48px; right: 20px; margin: 0; z-index: 2; } } /* Title bar in two rows (v1.73): logo, site name and the language switch on top; the menu on its own row underneath, centred - the same in English and नेपाली, however many pages. A very long menu simply wraps to a second line; it never runs under anything. Phones and small tablets keep the ☰ button. */ @media (min-width: 901px) { .fh-header__inner { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: 12px; } .fh-header__inner .fh-brand { margin-right: auto; } .fh-header__inner .fh-nav { order: 10; flex: 1 0 100%; margin: 10px 0 0; padding: 6px 0 8px; border-top: 1px solid var(--fh-line); } .fh-menu { flex-wrap: wrap; justify-content: center; row-gap: 2px; } .fh-menu a, html[lang^="ne"] .fh-menu a { font-size: 1.02rem; padding: 8px 14px; } } /* Home page in one column (v1.75: the "For family only" box is gone - the menu shows "Family login" instead). */ .fh-home__grid--one { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; } /* Blog: newest first, a heading for each month (v1.76). */ .fh-blog-month { font-family: var(--fh-serif); font-size: 1.35rem; font-weight: 600; color: var(--fh-accent); margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--fh-line); } .fh-blog-month:first-of-type { margin-top: 6px; } .fh-journey-pop { margin: 6px 0 0; } .fh-journey-edit { margin-top: -6px; font-size: .9rem; } /* Gallery and Blog by date (v1.77): random picks on top; a side list of years and months. */ .fh-picks { margin: 0 0 22px; } .fh-picks__title, .fh-datenav__title { font-family: var(--fh-serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 10px; } .fh-picks__photos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .fh-picks__photos a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--fh-line); } .fh-picks__photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .fh-picks__photos a:hover img { transform: scale(1.05); } .fh-picks__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .fh-pick { display: flex; flex-direction: column; gap: 4px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 12px; color: var(--fh-ink); text-decoration: none; box-shadow: var(--fh-shadow); } .fh-pick img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; } .fh-pick__date { color: var(--fh-muted); font-size: .85rem; } .fh-pick:hover strong { color: var(--fh-accent); } .fh-bydate { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; } .fh-bydate__side { position: sticky; top: 16px; } .fh-datenav { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 14px 16px; } .fh-datenav a { color: var(--fh-ink); text-decoration: none; display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; } .fh-datenav a:hover, .fh-datenav a.is-on { background: var(--fh-accent-soft, rgba(0,0,0,.05)); color: var(--fh-accent); font-weight: 600; } .fh-datenav__all { margin-bottom: 6px; } .fh-datenav__year summary { cursor: pointer; font-weight: 600; padding: 6px 8px; display: flex; justify-content: space-between; } .fh-datenav__year ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 8px; } .fh-datenav__n { color: var(--fh-muted); font-weight: 400; font-size: .88rem; } .fh-ym-head { margin: 0 0 14px; font-size: 1.05rem; } .fh-bydate__main .fh-blog-month:first-child, .fh-bydate__main .fh-ym-head + .fh-blog-month { margin-top: 0; } @media (max-width: 860px) { .fh-bydate { grid-template-columns: minmax(0, 1fr); gap: 16px; } .fh-bydate__side { position: static; } .fh-picks__photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fh-picks__posts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .fh-picks__posts .fh-pick { flex: 0 0 78%; scroll-snap-align: start; } } /* Guide page for the family (v1.82): one card per page, then tips. */ .fh-guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .fh-guide-card { display: flex; flex-direction: column; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 18px 20px; box-shadow: var(--fh-shadow); } .fh-guide-card h2 { display: flex; align-items: center; gap: 10px; font-family: var(--fh-serif); font-size: 1.35rem; margin: 0 0 8px; } .fh-guide-card__icon { color: var(--fh-accent); flex: none; } .fh-guide-card p { margin: 0 0 10px; line-height: 1.55; } .fh-guide-card__go { margin-top: auto; align-self: flex-start; } .fh-guide-tips { margin-top: 26px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-left: 4px solid var(--fh-gold); border-radius: var(--fh-radius); padding: 16px 22px; } .fh-guide-tips h2 { font-family: var(--fh-serif); font-size: 1.3rem; margin: 0 0 8px; } .fh-guide-tips li { margin: 6px 0; line-height: 1.5; } @media (max-width: 480px) { .fh-guide-cards { grid-template-columns: minmax(0, 1fr); } } /* Home introduction (v1.84): key words stand out; the one-line bridges between parts in quiet italics. */ .fh-home__story strong { font-weight: 700; color: var(--fh-accent); } .fh-home__story p > em:only-child { display: block; text-align: center; font-family: var(--fh-serif); font-size: 1.2rem; color: var(--fh-gold); margin-top: 6px; } html.fh-dark .fh-home__story strong { color: inherit; } /* Diyo on the cards of those who have passed away (v1.84): a little easier to see - slightly larger, warmer brown, with a softly glowing flame. */ .fh-card-lamp { color: #7f5f2c; opacity: 1; } .fh-card-lamp svg { width: 18px; height: 18px; } .fh-card-lamp svg path:last-child { fill: #e39b2d; stroke: #e39b2d; } .fh-card-lamp svg { filter: drop-shadow(0 0 2px rgba(227, 155, 45, .55)); } html.fh-dark .fh-card-lamp { color: #e8cfa6; } /* 1.84.2 - Contact: what is it about; Tree: what the diyo means */ .fh-contact-topic { border: 0; padding: 0; margin: 0 0 14px; } .fh-contact-topic legend { font-weight: 600; margin-bottom: 6px; padding: 0; } .fh-contact-form .fh-contact-topic label { display: flex; align-items: baseline; gap: 8px; font-weight: 400; margin: 0 0 4px; padding: 7px 10px; border: 1px solid var(--fh-line); border-radius: 10px; cursor: pointer; } .fh-contact-topic label:has(input:checked) { border-color: var(--fh-accent); background: color-mix(in srgb, var(--fh-accent) 8%, transparent); } .fh-contact-topic small { color: var(--fh-muted); } .fh-lamp-note { flex-basis: 100%; margin: 6px 0 0; font-size: .88rem; color: var(--fh-muted); display: flex; align-items: center; gap: 6px; } .fh-lamp-note .fh-card-lamp { position: static; display: inline-flex; transform: none; } /* 1.84.3 - Home text a little bigger; Guide icons; everything centred on the page */ .fh-home__story { font-size: 1.2rem; line-height: 1.75; } .fh-home__story h2 { font-size: 1.85rem; } @media (max-width: 480px) { .fh-home__story { font-size: 1.1rem; } .fh-home__story h2 { font-size: 1.5rem; } } .fh-guide-card { align-items: center; text-align: center; } .fh-guide-card h2 { justify-content: center; } .fh-guide-card__go { align-self: center; } .fh-guide-tips { text-align: center; border-left: 1px solid var(--fh-line); border-top: 4px solid var(--fh-gold); } .fh-guide-tips h2 { display: flex; align-items: center; justify-content: center; gap: 8px; } .fh-guide-tips__head-icon { color: var(--fh-gold); } .fh-guide-tips ul { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 20px; } .fh-guide-tips li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .fh-guide-tips__icon { color: var(--fh-accent); } html.fh-dark .fh-guide-tips__icon, html.fh-dark .fh-guide-card__icon { color: var(--fh-gold); } .fh-heritage .fh-branch-bar, .fh-branch-bar { justify-content: center; } .fh-branch-bar__links { margin-left: 0; } .fh-heritage .fh-tree-page > .fh-tree-tools, .fh-tree-page > .fh-tree-tools { justify-content: center; } .fh-view-bar { justify-content: center; } .fh-legend { margin-left: 0; justify-content: center; } .fh-lamp-note, .fh-view-note { justify-content: center; text-align: center; } .fh-map-bar, .fh-map-filters, .fh-map-play { justify-content: center; } .fh-map-summary { text-align: center; } .fh-picks__title { text-align: center; } .fh-picks__posts { justify-content: center; } .fh-guide-cards { display: flex; flex-wrap: wrap; justify-content: center; } .fh-guide-card { flex: 0 1 calc((100% - 32px) / 3); min-width: 270px; box-sizing: border-box; } @media (max-width: 620px) { .fh-guide-card { flex-basis: 100%; min-width: 0; } } .fh-map-bar .fh-map-person { margin-left: 0; } /* 1.84.5 - book icon on Guide in the menu */ .fh-menu-book { vertical-align: -3px; margin-right: 5px; color: var(--fh-gold, #b8912f); } /* 1.84.5 - the branch story fills its box, like the Home text */ .fh-branch-note { padding: 18px 26px 20px; } .fh-branch-note__name { text-align: center; font-size: 1.45rem; margin-bottom: 8px; } .fh-branch-note__desc { max-width: none; text-align: justify; text-justify: inter-word; } @media (max-width: 480px) { .fh-branch-note__desc { text-align: left; } .fh-branch-note { padding: 14px 16px; } } /* 1.84.6 - larger reading text everywhere */ body { font-size: 18.5px; } .fh-home__story { font-size: 1.32rem; line-height: 1.75; } .fh-post-single__body, .fh-history__text, .fh-tradition__body { font-size: 1.22rem; } .fh-branch-note__desc, .fh-guide-card p, .fh-guide-tips li, .fh-content { font-size: 1.12rem; } .fh-view-note, .fh-lamp-note, .fh-pachha__intro, .fh-branch-card p, .fh-trad-card__snip { font-size: 1.02rem; } @media (max-width: 480px) { body { font-size: 17.5px; } .fh-home__story { font-size: 1.18rem; } .fh-post-single__body, .fh-history__text, .fh-tradition__body { font-size: 1.12rem; } } /* 1.85 - more than one marriage on the tree */ .fh-couple__link { position: relative; } .fh-marr-no { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--fh-accent); color: #fff; font: 700 .7rem/1 var(--fh-sans, sans-serif); box-sizing: border-box; } .fh-couple__link .fh-marr-no { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 2px var(--fh-surface); } .fh-card-person { position: relative; } .fh-card-marr { position: absolute; left: 6px; top: 6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--fh-accent); color: #fff; font: 700 .66rem/16px var(--fh-sans, sans-serif); text-align: center; padding: 0 3px; box-sizing: border-box; } .fh-marr-note { flex-basis: 100%; margin: 4px 0 0; font-size: 1.02rem; color: var(--fh-muted); text-align: center; } .fh-marr-note .fh-marr-no { margin-right: 2px; vertical-align: 1px; } html.fh-dark .fh-marr-no, html.fh-dark .fh-card-marr { background: var(--fh-gold); color: #1b1b1b; } /* 1.85 - person cards (profile and Find a person) */ .fh-pcards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 6px 0 14px; } .fh-pcard { position: relative; display: flex; align-items: center; gap: 12px; min-width: 230px; max-width: 340px; flex: 0 1 300px; padding: 10px 14px 10px 10px; border: 1px solid var(--fh-line); border-radius: var(--fh-radius); background: var(--fh-surface); color: var(--fh-ink); text-decoration: none; box-shadow: var(--fh-shadow); transition: border-color .15s, transform .15s; box-sizing: border-box; } .fh-pcard:hover, .fh-pcard:focus-visible { border-color: var(--fh-accent); transform: translateY(-1px); } .fh-pcard.is-male { border-top: 3px solid #2f4f86; } .fh-pcard.is-female { border-top: 3px solid #a33b57; } .fh-pcard.is-deceased { background: color-mix(in srgb, var(--fh-surface) 88%, #8c8f94); } .fh-pcard__img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fh-bg); } .fh-pcard__ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--fh-accent); border: 2px solid var(--fh-line); box-sizing: border-box; } .fh-pcard__text { display: flex; flex-direction: column; min-width: 0; text-align: left; } .fh-pcard__name { font-weight: 700; font-size: 1.05rem; line-height: 1.3; } .fh-pcard__alt { font-size: .92rem; color: var(--fh-muted); } .fh-pcard__sub { font-size: .9rem; color: var(--fh-muted); line-height: 1.35; } .fh-pcard__tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fh-accent); border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; vertical-align: 2px; } .fh-pcard__lamp { position: absolute; right: 8px; top: 6px; color: #7f5f2c; } .fh-pcard__lamp svg path:last-child { fill: #e39b2d; stroke: #e39b2d; } /* Profile page */ .fh-profile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1000px; margin: 0 auto 10px; } .fh-profile-back { margin: 0; font-size: 1rem; } .fh-profile-none { text-align: center; } .fh-profile { max-width: 1000px; margin: 0 auto; } .fh-profile__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 16px 22px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); } .fh-profile__photo { display: block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 4px solid var(--fh-surface); box-shadow: 0 0 0 2px var(--fh-gold); flex: none; } .fh-profile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .fh-profile__ini { display: flex; align-items: center; justify-content: center; font: 600 3.4rem/1 var(--fh-serif); color: var(--fh-accent); background: var(--fh-bg); } .fh-profile__name { font-family: var(--fh-serif); font-size: 2.4rem; line-height: 1.15; margin: 0; } .fh-profile__lamp { display: inline-block; vertical-align: 4px; color: #7f5f2c; } .fh-profile__lamp svg path:last-child { fill: #e39b2d; stroke: #e39b2d; } .fh-profile__alt { font-size: 1.25rem; margin: 0; color: var(--fh-muted); } .fh-profile__aka, .fh-profile__job, .fh-profile__meta, .fh-profile__dates { margin: 0; } .fh-profile__job { display: flex; align-items: center; justify-content: center; gap: .4em; } .fh-profile__job .fh-icon { color: var(--fh-gold, #b8862b); flex: none; } .fh-profile__meta { color: var(--fh-accent); font-weight: 600; } .fh-profile__sec { margin-top: 26px; text-align: center; } .fh-profile__sec > h2 { font-family: var(--fh-serif); font-size: 1.7rem; color: var(--fh-gold); margin: 0 0 8px; } .fh-profile__sec h3 { font-size: 1.05rem; margin: 14px 0 4px; color: var(--fh-muted); font-weight: 600; } .fh-profile__sec h4 { font-size: .98rem; margin: 6px 0 2px; color: var(--fh-muted); font-weight: 600; } .fh-lineup { list-style: none; padding: 0; margin: 8px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; } .fh-lineup li { display: inline-flex; align-items: baseline; gap: 5px; } .fh-lineup li:not(:last-child)::after { content: "→"; color: var(--fh-gold); margin: 0 4px 0 6px; } .fh-lineup .fh-muted { font-size: .85rem; } .fh-lineup .is-me strong { color: var(--fh-accent); } .fh-profile__story .fh-content { text-align: justify; max-width: 780px; margin: 0 auto; } .fh-profile__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .fh-profile__photos a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--fh-line); } .fh-profile__photos img { width: 100%; height: 100%; object-fit: cover; display: block; } .fh-profile__places { list-style: none; padding: 0; margin: 0 auto 10px; max-width: 640px; } .fh-profile__places li { padding: 7px 0; border-bottom: 1px dashed var(--fh-line); } .fh-profile__pl-label { color: var(--fh-muted); } .fh-profile__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 28px; } .fh-profile__note { text-align: center; font-size: .95rem; margin-top: 10px; } @media (max-width: 600px) { .fh-profile__name { font-size: 1.9rem; } .fh-profile__photo { width: 120px; height: 120px; } .fh-pcard { min-width: 0; flex-basis: 100%; } .fh-profile__story .fh-content { text-align: left; } } /* Find a person */ .fh-find { max-width: 900px; margin: 0 auto; } .fh-find__main input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.2rem; padding: 14px 18px; border: 2px solid var(--fh-accent); border-radius: 14px; background: var(--fh-surface); color: var(--fh-ink); } .fh-find__filters { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; margin: 12px 0 4px; } .fh-find__filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; } .fh-find__filters select, .fh-find__filters input { font: inherit; font-size: 1rem; padding: 7px 10px; border: 1px solid var(--fh-line); border-radius: 10px; background: var(--fh-surface); color: var(--fh-ink); max-width: 200px; } .fh-find__count { text-align: center; color: var(--fh-muted); margin: 10px 0; } .fh-find__results { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1100px; margin: 0 auto; } .fh-find__none { text-align: center; } /* 1.85.4 - verified badge */ .fh-verified-wrap { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: #1d7a4a; line-height: 0; } .fh-verified-wrap .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .fh-card-person__name .fh-verified-wrap svg { width: 13px; height: 13px; } .fh-person__head h2 .fh-verified-wrap svg { width: 20px; height: 20px; } .fh-profile__name .fh-verified-wrap { vertical-align: 2px; } .fh-profile__ver { margin: 0; color: #1d7a4a; font-weight: 600; font-size: .98rem; } .fh-profile__ver .fh-verified-wrap { margin: 0 2px 0 0; } .fh-ver-note .fh-verified-wrap { margin: 0; } html.fh-dark .fh-verified-wrap, html.fh-dark .fh-profile__ver { color: #5fcf8e; } /* 1.85.5 - Family Dates: birthdays show the month only */ .fh-date__day.is-month { display: flex; align-items: center; justify-content: center; min-height: 44px; } .fh-date__day.is-month .fh-date__mon { font-size: 1rem; font-weight: 700; } /* 1.85.6 - tree view buttons in clear groups */ .fh-view-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; border: 0; background: none; padding: 0; border-radius: 0; width: auto; } .fh-view-group { display: inline-flex; align-items: center; gap: 4px; background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 16px; padding: 4px; box-shadow: var(--fh-shadow); } .fh-view-group__label { font: 700 .72rem/1 var(--fh-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fh-muted); padding: 0 6px 0 10px; white-space: nowrap; } html[lang^="ne"] .fh-view-group__label { letter-spacing: 0; font-size: .85rem; text-transform: none; } .fh-view-group__btns { display: inline-flex; flex-wrap: wrap; gap: 2px; } .fh-view-switch button { border-radius: 12px; padding: 8px 13px; font-size: .95rem; } .fh-view-switch button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--fh-accent) 9%, transparent); } @media (max-width: 760px) { .fh-view-switch { width: 100%; gap: 8px; } .fh-view-group { width: 100%; box-sizing: border-box; flex-wrap: wrap; } .fh-view-group--solo { width: auto; flex: 1 1 40%; } .fh-view-group--solo button { flex: 1; } .fh-view-group__label { width: 100%; padding: 4px 8px 2px; } .fh-view-group__btns { width: 100%; } .fh-view-group__btns button { flex: 1 1 auto; } } .fh-view-bar { max-width: 1360px; } .fh-view-switch { flex: 1 1 100%; } .fh-view-switch button { padding: 8px 11px; } .fh-heritage .fh-view-bar, .fh-view-bar { justify-content: center; } /* 1.85.6 - "Which branch" stands out */ .fh-branch-bar { border: 2px solid var(--fh-gold); background: color-mix(in srgb, var(--fh-gold) 10%, var(--fh-surface)); padding: 16px 20px; } .fh-branch-pick__label { display: inline-flex; align-items: center; gap: 8px; font-size: 1.35rem; font-weight: 600; color: var(--fh-ink); } .fh-branch-pick__icon { color: var(--fh-gold); } .fh-branch-pick select { font-size: 1.12rem; padding: 11px 42px 11px 16px; min-width: 240px; border-width: 2px; border-color: var(--fh-gold); background-color: var(--fh-surface); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .fh-branch-pick select:hover { border-color: var(--fh-accent); } html.fh-dark .fh-branch-bar { background: color-mix(in srgb, var(--fh-gold) 14%, var(--fh-surface)); } /* How are we related? on Find a person */ .fh-find-rel { max-width: 900px; margin: 30px auto 0; text-align: center; } .fh-find-rel .fh-rel__pick { justify-content: center; } .fh-find-rel .fh-rel__pick label { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; } .fh-rel__find { font: inherit; font-size: .95rem; padding: 7px 10px; border: 1px solid var(--fh-line); border-radius: 10px; background: var(--fh-surface); color: var(--fh-ink); } .fh-find-rel select { max-width: 320px; } /* 1.85.6 - nothing but the branch picker until a branch is chosen */ .fh-tree-page.is-choosing > .fh-tree-tools, .fh-tree-page.is-choosing > .fh-view-bar, .fh-tree-page.is-choosing > .fh-tree-viewport, .fh-tree-page.is-choosing > .fh-pachha, .fh-tree-page.is-choosing > .fh-branch-note, .fh-tree-page.is-choosing > .fh-tree-journey { display: none !important; } .fh-branch-hint { max-width: 1120px; margin: 18px auto 40px; text-align: center; font-size: 1.15rem; color: var(--fh-muted); } .fh-branch-hint[hidden] { display: none; } .fh-tree-page.is-choosing .fh-branch-pick select { animation: fh-glow 1.8s ease-in-out 2; } @keyframes fh-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fh-gold) 35%, transparent); } } @media (prefers-reduced-motion: reduce) { .fh-tree-page.is-choosing .fh-branch-pick select { animation: none; } } .fh-view-switch button { font-size: .92rem; padding: 8px 10px; } @media (max-width: 760px) { .fh-view-group--solo { width: 100%; } } .fh-find__or { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 2px; flex-wrap: wrap; } .fh-find__or span { color: var(--fh-muted); } .fh-find__or select { font: inherit; font-size: 1rem; padding: 8px 12px; border: 1px solid var(--fh-line); border-radius: 10px; background: var(--fh-surface); color: var(--fh-ink); max-width: min(100%, 460px); } /* 1.85.7 - Family Finder: tabs, family card, print sheet */ .fh-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin: 0 auto 18px; } .fh-tabs button { display: inline-flex; align-items: center; gap: 8px; font: 600 1.02rem/1.1 var(--fh-sans); padding: 11px 18px; border-radius: 14px; border: 1px solid var(--fh-line); background: var(--fh-surface); color: var(--fh-ink); cursor: pointer; box-shadow: var(--fh-shadow); } .fh-tabs button svg { color: var(--fh-gold); } .fh-tabs button[aria-selected="true"] { background: var(--fh-accent); border-color: var(--fh-accent); color: #fff; } .fh-tabs button[aria-selected="true"] svg { color: #fff; } .fh-tabs button:focus-visible { outline: 3px solid var(--fh-gold); outline-offset: 2px; } html.fh-dark .fh-tabs button[aria-selected="true"] { background: var(--fh-gold); border-color: var(--fh-gold); color: #14181e; } .fh-tabpanel[hidden] { display: none; } .fh-fcard { max-width: 860px; margin: 22px auto 0; background: var(--fh-surface); border: 1px solid var(--fh-line); border-top: 4px solid var(--fh-gold); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); padding: 20px 24px; } .fh-fcard[hidden] { display: none; } .fh-fcard__head { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; } .fh-fcard__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--fh-gold); } .fh-fcard__ini { display: inline-flex; align-items: center; justify-content: center; font: 600 2rem/1 var(--fh-serif); color: var(--fh-accent); background: var(--fh-bg); } .fh-fcard__name { font-family: var(--fh-serif); font-size: 1.9rem; margin: 0; line-height: 1.15; } .fh-fcard__alt, .fh-fcard__meta { margin: 2px 0 0; color: var(--fh-muted); } .fh-fcard__meta { color: var(--fh-accent); font-weight: 600; } .fh-fcard__sec h3 { font-size: 1.02rem; color: var(--fh-gold); margin: 14px 0 4px; text-transform: none; } .fh-fcard__sec ul { list-style: none; padding: 0; margin: 0; } .fh-fcard__sec li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px dashed var(--fh-line); } .fh-fcard__rel { color: var(--fh-muted); min-width: 230px; } .fh-fcard__who { font: inherit; font-weight: 700; color: var(--fh-ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } .fh-fcard__who:hover { color: var(--fh-accent); text-decoration: underline; } .fh-fcard__yrs { color: var(--fh-muted); font-size: .92rem; } .fh-fcard__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; } .fh-pachha__result .fh-fcard__acts { margin-top: 14px; } @media (max-width: 600px) { .fh-fcard { padding: 16px; } .fh-fcard__rel { min-width: 0; width: 100%; } .fh-tabs button { flex: 1 1 100%; justify-content: center; } } .fh-print-sheet { display: none; } @media print { html.fh-printing-sheet body > *:not(.fh-print-sheet) { display: none !important; } html.fh-printing-sheet .fh-print-sheet { display: block; font-family: var(--fh-sans), sans-serif; color: #000; padding: 6mm; } html.fh-printing-sheet .fh-print-sheet__head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #b8912f; padding-bottom: 8px; margin-bottom: 10px; } html.fh-printing-sheet .fh-print-sheet__head img { width: 28mm; height: 28mm; border-radius: 50%; object-fit: cover; } html.fh-printing-sheet .fh-print-sheet h1 { font-family: var(--fh-serif); font-size: 26pt; margin: 0; } html.fh-printing-sheet .fh-print-sheet__sub { margin: 2px 0 0; font-size: 12pt; } html.fh-printing-sheet .fh-print-sheet h2 { font-size: 13pt; color: #7a5a14; margin: 10px 0 4px; } html.fh-printing-sheet .fh-print-sheet table { width: 100%; border-collapse: collapse; font-size: 11pt; } html.fh-printing-sheet .fh-print-sheet th { text-align: left; font-weight: 400; color: #444; width: 38%; padding: 3px 6px 3px 0; border-bottom: 1px solid #ddd; vertical-align: top; } html.fh-printing-sheet .fh-print-sheet td { font-weight: 600; padding: 3px 0; border-bottom: 1px solid #ddd; } html.fh-printing-sheet .fh-print-sheet__foot { margin-top: 10px; font-size: 9pt; color: #666; font-style: italic; } @page { size: A4 portrait; margin: 12mm; } } .fh-pachha__mom{font-weight:600} /* 1.85.9: each marriage has its own colour - the number on the flower, the small number on a child's card and the line joining them all match (1 green, 2 brick, 3 ochre, 4 slate). */ .fh-marr-no[data-no="1"], .fh-card-marr[data-no="1"] { background: #2e7d5b; } .fh-marr-no[data-no="2"], .fh-card-marr[data-no="2"] { background: #b5452e; } .fh-marr-no[data-no="3"], .fh-card-marr[data-no="3"] { background: #a87a12; } .fh-marr-no[data-no="4"], .fh-card-marr[data-no="4"] { background: #3f6f8f; } html.fh-dark .fh-marr-no[data-no], html.fh-dark .fh-card-marr[data-no] { color: #fff; } .fh-couple__link .fh-marr-no { top: -16px; } .fh-tree-lines .fh-marr-tag { pointer-events: auto; } .fh-tree.is-side .fh-couple__link .fh-marr-no, .fh-tree.is-poster-side .fh-couple__link .fh-marr-no { top: 50%; left: calc(50% + 14px); transform: translateY(-50%); } /* Daughters' lines (1.86.4): every woman descended through a daughter of the family - teal. */ .fh-tree .fh-card-person.is-role-dkid, html.fh-dark .fh-tree .fh-card-person.is-role-dkid { background: #e6f4f2; border-color: #b5ddd8; border-top: 5px solid #13817a; } .fh-tree .fh-card-person.is-role-dkid.is-deceased { background: #e3ecea; } .fh-tree .fh-card-person.is-role-dkid .fh-avatar { background: #cdebe7; color: #0c5a55; box-shadow: 0 0 0 2px #13817a; } .fh-tree .fh-card-person.is-role-dkid:hover { border-color: #13817a; } .fh-tree .fh-card-person.is-ancestor.is-role-dkid { border-top-color: #13817a; } .fh-legend__item.is-role-dkid::before { background: #e6f4f2; border: 2px solid #13817a; } /* Daughters' lines (1.86.4): every man descended through a daughter of the family - brown. */ .fh-tree .fh-card-person.is-role-dson, html.fh-dark .fh-tree .fh-card-person.is-role-dson { background: #f4ece3; border-color: #dcc6ae; border-top: 5px solid #7a4e24; } .fh-tree .fh-card-person.is-role-dson.is-deceased { background: #ece6df; } .fh-tree .fh-card-person.is-role-dson .fh-avatar { background: #ead9c6; color: #57361a; box-shadow: 0 0 0 2px #7a4e24; } .fh-tree .fh-card-person.is-role-dson:hover { border-color: #7a4e24; } .fh-tree .fh-card-person.is-ancestor.is-role-dson { border-top-color: #7a4e24; } .fh-legend__item.is-role-dson::before { background: #f4ece3; border: 2px solid #7a4e24; } /* 1.91.0: "Jewel" family tree - the same colour code (main line, wives, daughters, daughters' * husbands, a daughter's daughters and sons), drawn more richly: softly tinted cards with a fine * frame in the person's colour, filled colour portraits with white initials, names in their colour, * elders with a gold outline. */ .fh-tree .fh-card-person.is-role-line, html.fh-dark .fh-tree .fh-card-person.is-role-line { background: linear-gradient(160deg, #ffffff 0%, #edf1f8 70%); border: 1.5px solid #b6c1d5; box-shadow: 0 8px 18px rgba(47, 79, 134, .14); } .fh-tree .fh-card-person.is-role-line.is-deceased { background: linear-gradient(160deg, #ffffff 0%, #e8eaee 70%); } .fh-tree .fh-card-person.is-role-line .fh-avatar, html.fh-dark .fh-tree .fh-card-person.is-role-line .fh-avatar { background: linear-gradient(160deg, #6d84aa, #2f4f86); color: #ffffff; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(47, 79, 134, .4); } .fh-tree .fh-card-person.is-role-line .fh-card-person__name, html.fh-dark .fh-tree .fh-card-person.is-role-line .fh-card-person__name { color: #26406e; } .fh-tree .fh-card-person.is-role-line:hover { border-color: #2f4f86; } .fh-tree .fh-card-person.is-role-line.is-ancestor { border-color: #b6c1d5; box-shadow: 0 0 0 2px #c9a868, 0 8px 18px rgba(47, 79, 134, .14); } .fh-tree .fh-card-person.is-role-inlaw, html.fh-dark .fh-tree .fh-card-person.is-role-inlaw { background: linear-gradient(160deg, #ffffff 0%, #fcf0e4 70%); border: 1.5px solid #efc9af; box-shadow: 0 8px 18px rgba(208, 102, 26, .14); } .fh-tree .fh-card-person.is-role-inlaw.is-deceased { background: linear-gradient(160deg, #ffffff 0%, #f3ebe3 70%); } .fh-tree .fh-card-person.is-role-inlaw .fh-avatar, html.fh-dark .fh-tree .fh-card-person.is-role-inlaw .fh-avatar { background: linear-gradient(160deg, #de945f, #d0661a); color: #ffffff; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(208, 102, 26, .4); } .fh-tree .fh-card-person.is-role-inlaw .fh-card-person__name, html.fh-dark .fh-tree .fh-card-person.is-role-inlaw .fh-card-person__name { color: #8a3d08; } .fh-tree .fh-card-person.is-role-inlaw:hover { border-color: #d0661a; } .fh-tree .fh-card-person.is-role-inlaw.is-ancestor { border-color: #efc9af; box-shadow: 0 0 0 2px #c9a868, 0 8px 18px rgba(208, 102, 26, .14); } .fh-tree .fh-card-person.is-role-wife, html.fh-dark .fh-tree .fh-card-person.is-role-wife { background: linear-gradient(160deg, #ffffff 0%, #fcedf3 70%); border: 1.5px solid #ecbbd0; box-shadow: 0 8px 18px rgba(200, 62, 122, .14); } .fh-tree .fh-card-person.is-role-wife.is-deceased { background: linear-gradient(160deg, #ffffff 0%, #f3e8ed 70%); } .fh-tree .fh-card-person.is-role-wife .fh-avatar, html.fh-dark .fh-tree .fh-card-person.is-role-wife .fh-avatar { background: linear-gradient(160deg, #d878a2, #c83e7a); color: #ffffff; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(200, 62, 122, .4); } .fh-tree .fh-card-person.is-role-wife .fh-card-person__name, html.fh-dark .fh-tree .fh-card-person.is-role-wife .fh-card-person__name { color: #8f2152; } .fh-tree .fh-card-person.is-role-wife:hover { border-color: #c83e7a; } .fh-tree .fh-card-person.is-role-wife.is-ancestor { border-color: #ecbbd0; box-shadow: 0 0 0 2px #c9a868, 0 8px 18px rgba(200, 62, 122, .14); } .fh-tree .fh-card-person.is-role-daughter, html.fh-dark .fh-tree .fh-card-person.is-role-daughter { background: linear-gradient(160deg, #ffffff 0%, #f2ecf9 70%); border: 1.5px solid #d0c0e3; box-shadow: 0 8px 18px rgba(122, 75, 176, .14); } .fh-tree .fh-card-person.is-role-daughter.is-deceased { background: linear-gradient(160deg, #ffffff 0%, #ece7f2 70%); } .fh-tree .fh-card-person.is-role-daughter .fh-avatar, html.fh-dark .fh-tree .fh-card-person.is-role-daughter .fh-avatar { background: linear-gradient(160deg, #a281c8, #7a4bb0); color: #ffffff; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(122, 75, 176, .4); } .fh-tree .fh-card-person.is-role-daughter .fh-card-person__name, html.fh-dark .fh-tree .fh-card-person.is-role-daughter .fh-card-person__name { color: #4f2a7c; } .fh-tree .fh-card-person.is-role-daughter:hover { border-color: #7a4bb0; } .fh-tree .fh-card-person.is-role-daughter.is-ancestor { border-color: #d0c0e3; box-shadow: 0 0 0 2px #c9a868, 0 8px 18px rgba(122, 75, 176, .14); } .fh-tree .fh-card-person.is-role-dkid, html.fh-dark .fh-tree .fh-card-person.is-role-dkid { background: linear-gradient(160deg, #ffffff 0%, #e6f4f2 70%); border: 1.5px solid #acd3d0; box-shadow: 0 8px 18px rgba(19, 129, 122, .14); } .fh-tree .fh-card-person.is-role-dkid.is-deceased { background: linear-gradient(160deg, #ffffff 0%, #e3ecea 70%); } .fh-tree .fh-card-person.is-role-dkid .fh-avatar, html.fh-dark .fh-tree .fh-card-person.is-role-dkid .fh-avatar { background: linear-gradient(160deg, #5aa7a2, #13817a); color: #ffffff; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(19, 129, 122, .4); } .fh-tree .fh-card-person.is-role-dkid .fh-card-person__name, html.fh-dark .fh-tree .fh-card-person.is-role-dkid .fh-card-person__name { color: #0c5a55; } .fh-tree .fh-card-person.is-role-dkid:hover { border-color: #13817a; } .fh-tree .fh-card-person.is-role-dkid.is-ancestor { border-color: #acd3d0; box-shadow: 0 0 0 2px #c9a868, 0 8px 18px rgba(19, 129, 122, .14); } .fh-tree .fh-card-person.is-role-dson, html.fh-dark .fh-tree .fh-card-person.is-role-dson { background: linear-gradient(160deg, #ffffff 0%, #f4ece3 70%); border: 1.5px solid #d0c1b2; box-shadow: 0 8px 18px rgba(122, 78, 36, .14); } .fh-tree .fh-card-person.is-role-dson.is-deceased { background: linear-gradient(160deg, #ffffff 0%, #ece6df 70%); } .fh-tree .fh-card-person.is-role-dson .fh-avatar, html.fh-dark .fh-tree .fh-card-person.is-role-dson .fh-avatar { background: linear-gradient(160deg, #a28366, #7a4e24); color: #ffffff; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(122, 78, 36, .4); } .fh-tree .fh-card-person.is-role-dson .fh-card-person__name, html.fh-dark .fh-tree .fh-card-person.is-role-dson .fh-card-person__name { color: #57361a; } .fh-tree .fh-card-person.is-role-dson:hover { border-color: #7a4e24; } .fh-tree .fh-card-person.is-role-dson.is-ancestor { border-color: #d0c1b2; box-shadow: 0 0 0 2px #c9a868, 0 8px 18px rgba(122, 78, 36, .14); } .fh-legend__item.is-role-line::before { background: linear-gradient(160deg, #6d84aa, #2f4f86); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #b6c1d5; } .fh-legend__item.is-role-inlaw::before { background: linear-gradient(160deg, #de945f, #d0661a); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #efc9af; } .fh-legend__item.is-role-wife::before { background: linear-gradient(160deg, #d878a2, #c83e7a); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #ecbbd0; } .fh-legend__item.is-role-daughter::before { background: linear-gradient(160deg, #a281c8, #7a4bb0); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #d0c0e3; } .fh-legend__item.is-role-dkid::before { background: linear-gradient(160deg, #5aa7a2, #13817a); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #acd3d0; } .fh-legend__item.is-role-dson::before { background: linear-gradient(160deg, #a28366, #7a4e24); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #d0c1b2; } .fh-tree .fh-card-person[class*="is-role-"] { border-radius: 16px; } .fh-tree .fh-card-person[class*="is-role-"].is-match { border-color: #b38b3f; box-shadow: 0 0 0 3px rgba(201, 168, 104, .6), 0 8px 18px rgba(92, 70, 39, .14); } .fh-tree .fh-gen-band__label { border: 1.5px solid #c9a868; } .fh-tree .fh-gen-band__label, .fh-tree .fh-gen-band__label .fh-gen-band__num { color: #a47c33; } /* 1.91.1: icon groups - a bigger gold diamond between groups, small dots inside a group. */ .fh-icon-row__dot.is-group { width: 9px; height: 9px; margin: 0 6px; background: var(--fh-gold, #b38b3f); } /* 1.93.0: page openings and the Guide, centred and even. - The line under every page title is centred, with its lines balanced (no single word left alone). - Guide cards: one short paragraph each, so the boxes line up; tips in two even rows of three. */ .fh-tree-head .fh-muted, .fh-tree-intro, .fh-tree-intro p, .fh-heritage .fh-tree-head .fh-tree-intro p { text-align: center; margin-left: auto; margin-right: auto; } .fh-tree-head .fh-muted, .fh-tree-intro p, .fh-guide-card p, .fh-guide-tips li span { text-wrap: balance; } .fh-guide-card h2 { margin-bottom: 12px; } .fh-guide-card p { margin: 0 0 14px; } .fh-guide-tips ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .fh-guide-tips ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .fh-guide-tips ul { grid-template-columns: minmax(0, 1fr); } } /* Contact: its opening words centred too, like every other page. */ .fh-contact-page > .fh-content { max-width: 680px; margin-left: auto; margin-right: auto; } .fh-contact-page > .fh-content p, .fh-heritage .fh-contact-page > .fh-content p { text-align: center; text-wrap: balance; } /* Home story: the reading column sits in the middle (equal space both sides), and on computers and tablets both edges of each paragraph are straight, like a book page. Phones: left. */ .fh-heritage .fh-home .fh-home__story p, .fh-heritage .fh-home .fh-home__story ul, .fh-heritage .fh-home .fh-home__story ol { max-width: 72ch; margin-left: auto; margin-right: auto; } @media (min-width: 481px) { .fh-heritage .fh-home .fh-home__story p { text-align: justify; text-justify: inter-word; } } /* Branch descriptions: justified (both edges straight) on computers and tablets, like the Home story - the branch page story, the branch cards, and the branch note on the Family Tree. Phones keep left-aligned text, easier to read on a small screen. */ @media (min-width: 481px) { .fh-branch-page__story p, .fh-branch-card p, .fh-branch-note__desc, .fh-view-note__desc, body.fh-heritage .fh-branch-page__story.fh-content p, body.fh-heritage .fh-branch-card p, body.fh-heritage .fh-branch-note__desc.fh-branch-note__desc, body.fh-heritage .fh-view-note__desc { text-align: justify; text-justify: inter-word; } } /* 1.97.0: the eye inside the password box - press and hold to see the password. */ .fh-pw-field { position: relative; flex: 1; min-width: 0; display: flex; } .fh-lock__form .fh-pw-field input { width: 100%; padding-right: 48px; } .fh-lock__form .fh-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fh-muted); box-shadow: none; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .fh-lock__form .fh-pw-eye:hover { color: var(--fh-ink); background: color-mix(in srgb, var(--fh-ink) 8%, transparent); } .fh-lock__form .fh-pw-eye.is-on { color: var(--fh-accent); } .fh-lock__form .fh-pw-eye:focus-visible { outline: 2px solid var(--fh-accent); outline-offset: 1px; } /* 1.99.0: "About this website · Privacy" under the copyright line. */ .fh-footer .fh-footer__about { margin-top: 6px; font-size: .88rem; } .fh-footer__about a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .fh-footer__about a:hover, .fh-footer__about a:focus-visible { color: var(--fh-ink); border-bottom-style: solid; }