/* ========================================================================== UECF Silver Jubilee Souvenir — web book stylesheet Design language matched to UECF.NET: deep navy chrome, gold accents, serif reading column, mobile-first layout. Contents 1. Design tokens & theming 2. Base elements 3. Reading progress bar 4. Site header & primary navigation 5. Reader toolbar (font size, bookmark, theme) 6. Breadcrumb 7. Layout shell & table of contents sidebar 8. Reading column typography 9. Rosters, letters, sponsors, galleries 10. Chapter pagination (prev / next) 11. Landing page 12. Search overlay 13. Scroll-to-top 14. Footer 15. Utilities, motion & print ========================================================================== */ /* 1. Design tokens & theming ------------------------------------------------------------------------ */ :root { /* brand */ --navy: #101b31; --navy-600: #1a2745; --navy-400: #2b3c62; --gold: #c8a24a; --gold-bright: #e3c377; --crimson: #b3202c; /* light theme surfaces */ --bg: #f4f2ed; --surface: #ffffff; --surface-2: #faf8f4; --border: #e2ded4; --ink: #1c2333; --ink-soft: #414a5e; --muted: #5f6980; --link: #1c4f8b; --link-hover: #12386a; /* chrome (header/footer) is dark in both themes, like UECF.NET */ --chrome-bg: var(--navy); --chrome-ink: #eef1f7; --chrome-muted: #9dabc6; --chrome-line: rgba(255, 255, 255, .13); /* type */ --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-read: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; /* reader font scale — nudged by the A- / A+ controls */ --reading-size: 1.0625rem; --reading-line: 1.75; /* metrics */ --header-h: 3.5rem; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(16, 27, 49, .06), 0 6px 20px rgba(16, 27, 49, .07); --shadow-lg: 0 24px 60px rgba(16, 27, 49, .28); --maxw: 74rem; --readw: 42rem; } /* Dark theme. Applied via [data-theme="dark"] on so the choice can be restored from localStorage before first paint. */ html[data-theme="dark"] { --bg: #0b1220; --surface: #131c2e; --surface-2: #18233a; --border: #26324b; --ink: #e7ecf5; --ink-soft: #c3ccdd; --muted: #94a1bb; --link: #7fb2ee; --link-hover: #a8ccf6; --chrome-bg: #080e1a; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .65); } /* Honour the OS preference until the reader makes an explicit choice. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #0b1220; --surface: #131c2e; --surface-2: #18233a; --border: #26324b; --ink: #e7ecf5; --ink-soft: #c3ccdd; --muted: #94a1bb; --link: #7fb2ee; --link-hover: #a8ccf6; --chrome-bg: #080e1a; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .65); } } /* 2. Base elements ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--link-hover); } /* A single, consistent focus ring everywhere — important for keyboard users. */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; } button { font: inherit; color: inherit; cursor: pointer; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: #17202f; padding: .7rem 1.1rem; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* 3. Reading progress bar ------------------------------------------------------------------------ */ .progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: transparent; z-index: 60; pointer-events: none; } .progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .08s linear; } /* 4. Site header & primary navigation ------------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--chrome-bg); color: var(--chrome-ink); border-bottom: 1px solid var(--chrome-line); } .site-header__inner { max-width: var(--maxw); margin: 0 auto; min-height: var(--header-h); padding: .4rem 1rem; display: flex; align-items: center; gap: .75rem; } .brand { display: flex; align-items: center; gap: .6rem; color: var(--chrome-ink); text-decoration: none; min-width: 0; } .brand__mark { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(145deg, var(--gold-bright), var(--gold)); color: #14203a; font-weight: 800; font-size: .68rem; letter-spacing: .02em; display: grid; place-items: center; } .brand__text { min-width: 0; line-height: 1.15; } .brand__name { font-weight: 700; font-size: .95rem; white-space: nowrap; } .brand__sub { display: block; font-size: .7rem; color: var(--chrome-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-nav { margin-left: auto; } .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; } .site-nav__list a { display: block; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--chrome-ink); text-decoration: none; font-size: .88rem; white-space: nowrap; } .site-nav__list a:hover, .site-nav__list a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; } .site-nav__list a[aria-current="page"] { color: var(--gold-bright); font-weight: 600; } /* Chrome buttons (search trigger, theme toggle, nav toggle) */ .chrome-btn { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--chrome-line); color: var(--chrome-ink); padding: .4rem .6rem; border-radius: var(--radius-sm); font-size: .84rem; line-height: 1; } .chrome-btn:hover { background: rgba(255, 255, 255, .16); } .chrome-btn kbd { font: 600 .68rem/1 var(--font-ui); background: rgba(255, 255, 255, .14); border-radius: 3px; padding: .2rem .3rem; } .chrome-btn__icon { width: 1rem; height: 1rem; fill: currentColor; flex: none; } .nav-toggle { display: none; } @media (max-width: 56rem) { .nav-toggle { display: inline-flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--chrome-bg); border-bottom: 1px solid var(--chrome-line); display: none; padding: .4rem .75rem .7rem; } .site-nav[data-open="true"] { display: block; } .site-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; } .site-nav__list a { padding: .6rem .5rem; } .chrome-btn__label { display: none; } .chrome-btn kbd { display: none; } } /* 5. Reader toolbar ------------------------------------------------------------------------ */ .toolbar { position: sticky; top: var(--header-h); z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); } .toolbar__inner { max-width: var(--maxw); margin: 0 auto; padding: .4rem 1rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .toolbar__group { display: flex; align-items: center; gap: .25rem; } .toolbar__spacer { margin-left: auto; } .tool-btn { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft); padding: .35rem .55rem; border-radius: var(--radius-sm); font-size: .8rem; line-height: 1.1; } .tool-btn:hover { background: var(--bg); color: var(--ink); } .tool-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #17202f; font-weight: 600; } .tool-btn__icon { width: .95rem; height: .95rem; fill: currentColor; flex: none; } .tool-btn--sm { font-weight: 700; min-width: 2rem; justify-content: center; } .reading-time { font-size: .78rem; color: var(--muted); white-space: nowrap; padding: 0 .3rem; } @media (max-width: 40rem) { .tool-btn__label { display: none; } .reading-time { display: none; } } /* 6. Breadcrumb ------------------------------------------------------------------------ */ .breadcrumb { max-width: var(--maxw); margin: 0 auto; padding: .75rem 1rem 0; font-size: .8rem; color: var(--muted); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .breadcrumb li::after { content: "›"; margin-left: .35rem; color: var(--border); } .breadcrumb li:last-child::after { content: ""; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--link); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink-soft); } /* 7. Layout shell & table of contents sidebar ------------------------------------------------------------------------ */ .shell { max-width: var(--maxw); margin: 0 auto; padding: 1rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 62rem) { .shell { grid-template-columns: 17rem minmax(0, 1fr); gap: 2.25rem; } } .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } @media (min-width: 62rem) { .toc { position: sticky; top: calc(var(--header-h) + 3.1rem); max-height: calc(100vh - var(--header-h) - 5rem); display: flex; flex-direction: column; } } .toc__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; background: var(--surface-2); border: 0; border-bottom: 1px solid var(--border); padding: .7rem .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: left; } .toc__chev { width: .8rem; height: .8rem; fill: currentColor; transition: transform .2s ease; } .toc__header[aria-expanded="false"] .toc__chev { transform: rotate(-90deg); } .toc__body { overflow-y: auto; padding: .4rem; } .toc__header[aria-expanded="false"] + .toc__body { display: none; } .toc__list { list-style: none; margin: 0; padding: 0; } .toc__list a { display: block; padding: .42rem .6rem; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; font-size: .85rem; border-left: 3px solid transparent; } .toc__list a:hover { background: var(--surface-2); color: var(--ink); } .toc__list a[aria-current="page"] { background: var(--surface-2); border-left-color: var(--gold); color: var(--ink); font-weight: 600; } .toc__num { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .35rem; } .toc__pages { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; } .toc__bookmark { color: var(--gold); margin-left: .25rem; } /* 8. Reading column typography ------------------------------------------------------------------------ */ .reader { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.25rem 2rem; min-width: 0; } @media (min-width: 48rem) { .reader { padding: 2.5rem 3rem 3rem; } } .chapter-eyebrow { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 .4rem; } .reader h1 { font-family: var(--font-read); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem); line-height: 1.2; margin: 0 0 .5rem; color: var(--ink); } .chapter-meta { margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .85rem; } .prose { max-width: var(--readw); } .prose > * { margin-left: auto; margin-right: auto; } .prose h2 { font-family: var(--font-read); font-size: 1.5em; line-height: 1.25; margin: 2.25rem 0 .75rem; color: var(--ink); } .prose h3 { font-size: 1.08em; letter-spacing: .02em; margin: 1.9rem 0 .6rem; color: var(--ink); } .prose h3 { font-family: var(--font-ui); } .prose p { font-family: var(--font-read); font-size: var(--reading-size); line-height: var(--reading-line); color: var(--ink-soft); margin: 0 0 1.1em; } .prose blockquote { margin: 1.5rem 0; padding: .9rem 1.2rem; border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-read); font-size: calc(var(--reading-size) * .98); line-height: 1.65; font-style: italic; color: var(--ink-soft); } .prose blockquote p { margin: 0; font-size: inherit; font-style: inherit; } .prose ol.printed-contents { font-family: var(--font-read); font-size: var(--reading-size); line-height: 1.6; color: var(--ink-soft); padding-left: 1.2rem; } .prose ol.printed-contents li { margin-bottom: .3rem; } /* Bible reference links */ .ref--bible { color: var(--crimson); text-decoration: underline dotted; text-underline-offset: 3px; font-weight: 600; } html[data-theme="dark"] .ref--bible { color: #ef8b95; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ref--bible { color: #ef8b95; } } /* Page markers keep the printed pagination visible in the web edition. */ .page-marker { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 1.25rem; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .page-marker::before, .page-marker::after { content: ""; flex: 1; height: 1px; background: var(--border); } .page-marker:first-child { margin-top: 0; } /* 9. Rosters, letters, sponsors, galleries ------------------------------------------------------------------------ */ /* Transcribed scanned letters */ .letter { max-width: var(--readw); margin: 0 auto 2rem; padding: 1.25rem 1.35rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } .letter__org { font-weight: 700; color: var(--ink); margin: 0 0 .15rem; } .letter__date { color: var(--muted); font-size: .82rem; margin: 0 0 1rem; } .letter__body p { font-family: var(--font-read); font-size: var(--reading-size); line-height: var(--reading-line); color: var(--ink-soft); margin: 0 0 1em; } .letter__sign { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--border); } .letter__signatory { font-weight: 700; color: var(--ink); margin: 0; } .letter__titles { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; } .letter__titles span { display: block; } .letter__contact { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); } /* Name rosters (pastors, leadership, guest preachers, homage) */ .roster { margin: 0 0 2rem; } .roster__heading { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 .85rem; } .roster__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .roster__item { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: .55rem .75rem; } .roster__name { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); } .roster__role { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; } .roster--homage .roster__item { border-left-color: var(--crimson); } /* Sponsor / best-wishes pages */ .sponsor { max-width: var(--readw); margin: 0 auto 2rem; padding: 1.25rem 1.35rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } .sponsor__title { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--ink); } .sponsor__lines { list-style: none; margin: 0; padding: 0; } .sponsor__lines li { color: var(--ink-soft); font-size: .9rem; padding: .12rem 0; } /* Page-image figures — the pictorial directory */ .page-figure { margin: 0 0 2rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .page-figure img { width: 100%; background: var(--surface-2); /* reserve space so lazy-loaded scans don't shift the layout */ aspect-ratio: 1819 / 2426; object-fit: contain; } .page-figure figcaption { padding: .5rem .8rem; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: .5rem; } .page-figure figcaption a { color: var(--muted); text-decoration: none; } .page-figure figcaption a:hover { color: var(--link); text-decoration: underline; } .gallery { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 52rem) { .gallery { grid-template-columns: repeat(2, 1fr); } } /* Facsimile of a transcribed page, offered alongside the text */ .facsimile { max-width: var(--readw); margin: 0 auto 2rem; } .facsimile summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: .45rem .2rem; } .facsimile summary:hover { color: var(--link); } .facsimile img { margin-top: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); } /* 10. Chapter pagination ------------------------------------------------------------------------ */ .pager { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } @media (min-width: 40rem) { .pager { grid-template-columns: 1fr 1fr; } } .pager__link { display: block; padding: .85rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--ink); } .pager__link:hover { border-color: var(--gold); background: var(--bg); } .pager__dir { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; } .pager__title { font-weight: 600; font-size: .95rem; } .pager__link--next { text-align: right; } .pager__link--next:only-child { grid-column: 2; } .pager-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; justify-content: center; } .pager-links a { font-size: .82rem; color: var(--muted); text-decoration: none; padding: .35rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); } .pager-links a:hover { color: var(--ink); border-color: var(--gold); } /* 11. Landing page ------------------------------------------------------------------------ */ .hero { background: radial-gradient(1000px 380px at 15% -10%, rgba(200, 162, 74, .22), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-600) 55%, #24325a 100%); color: #f3f5fa; border-bottom: 3px solid var(--gold); } .hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1rem 3rem; display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 52rem) { .hero__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3rem; padding: 3.5rem 1rem 4rem; } } .hero__cover { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .18); width: 100%; } .hero__eyebrow { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; margin: 0 0 .6rem; } .hero h1 { font-family: var(--font-read); font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); line-height: 1.15; margin: 0 0 .5rem; } .hero__tagline { font-family: var(--font-read); font-size: 1.12rem; font-style: italic; color: var(--gold-bright); margin: 0 0 1.1rem; } .hero__desc { color: #d5dcec; max-width: 40rem; margin: 0 0 1.5rem; } .hero__stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.75rem; padding: 0; } .hero__stats div { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #9dabc6; } .hero__stats strong { display: block; font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: none; } .hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; } .btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; text-decoration: none; border: 1px solid transparent; } .btn--primary { background: var(--gold); color: #17202f; } .btn--primary:hover { background: var(--gold-bright); color: #17202f; } .btn--ghost { border-color: rgba(255, 255, 255, .35); color: #fff; } .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; } .btn__icon { width: 1rem; height: 1rem; fill: currentColor; } .section { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1rem; } .section__title { font-family: var(--font-read); font-size: 1.5rem; margin: 0 0 .3rem; color: var(--ink); } .section__lede { color: var(--muted); margin: 0 0 1.5rem; font-size: .92rem; } .chapter-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .chapter-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .chapter-cards { grid-template-columns: repeat(3, 1fr); } } .chapter-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); } .chapter-card:hover { border-color: var(--gold); transform: translateY(-2px); } .chapter-card__num { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: .3rem; } .chapter-card__title { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; } .chapter-card__desc { font-size: .84rem; color: var(--muted); line-height: 1.5; flex: 1; } .chapter-card__pages { font-size: .75rem; color: var(--muted); margin-top: .6rem; } .info-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .info-grid { grid-template-columns: repeat(2, 1fr); } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow); } .panel h3 { margin: 0 0 .6rem; font-size: 1rem; } .panel ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .88rem; } .panel li { margin-bottom: .35rem; } .panel p { color: var(--ink-soft); font-size: .88rem; margin: 0 0 .6rem; } /* 12. Search overlay ------------------------------------------------------------------------ */ .search-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(8, 14, 26, .55); backdrop-filter: blur(3px); display: none; padding: 4rem 1rem 1rem; } .search-overlay[data-open="true"] { display: block; } .search-panel { max-width: 42rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 6rem); } .search-field { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); } .search-field__icon { width: 1.1rem; height: 1.1rem; fill: var(--muted); flex: none; } .search-field input { flex: 1; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; padding: .2rem 0; min-width: 0; } .search-field input:focus { outline: none; } .search-close { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: .25rem .5rem; font-size: .72rem; } .search-hint { padding: .5rem 1rem; font-size: .76rem; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface-2); } .search-suggestions { display: flex; flex-wrap: wrap; gap: .35rem; padding: .65rem 1rem; } .search-suggestions button { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; color: var(--ink-soft); } .search-suggestions button:hover { border-color: var(--gold); color: var(--ink); } .search-results { overflow-y: auto; padding: .4rem; margin: 0; list-style: none; } .search-result a { display: block; padding: .65rem .8rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); } .search-result a:hover, .search-result[data-active="true"] a { background: var(--surface-2); } .search-result__chapter { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .search-result__snippet { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; margin-top: .2rem; } .search-result__page { font-size: .74rem; color: var(--muted); margin-top: .2rem; } .search-empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted); font-size: .88rem; } mark, .search-result mark { background: rgba(200, 162, 74, .38); color: inherit; border-radius: 2px; padding: 0 .1em; } mark.is-target { background: rgba(200, 162, 74, .75); } /* 13. Scroll-to-top ------------------------------------------------------------------------ */ .to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--navy); color: #fff; border: 1px solid var(--chrome-line); box-shadow: var(--shadow); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--navy-600); } .to-top svg { width: 1.1rem; height: 1.1rem; fill: currentColor; } /* 14. Footer ------------------------------------------------------------------------ */ .site-footer { margin-top: 3rem; background: var(--chrome-bg); color: var(--chrome-muted); border-top: 3px solid var(--gold); } .site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; } } .site-footer h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chrome-ink); margin: 0 0 .6rem; } .site-footer p { margin: 0 0 .5rem; font-size: .85rem; line-height: 1.6; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .35rem; } .site-footer a { color: var(--chrome-muted); text-decoration: none; font-size: .85rem; } .site-footer a:hover { color: var(--gold-bright); text-decoration: underline; } .site-footer__bar { border-top: 1px solid var(--chrome-line); padding: .9rem 1rem; text-align: center; font-size: .78rem; color: var(--chrome-muted); } .site-footer__bar p { margin: .15rem 0; } /* 15. Utilities, motion & print ------------------------------------------------------------------------ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .chapter-card, .pager__link, .to-top, .tool-btn, .chrome-btn { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Higher-contrast borders when the OS asks for them. */ @media (prefers-contrast: more) { :root { --border: #9aa3b5; --muted: #4a5468; } .roster__item, .chapter-card, .pager__link { border-width: 2px; } } @media print { .site-header, .toolbar, .toc, .pager, .pager-links, .to-top, .progress, .search-overlay, .breadcrumb, .site-footer { display: none !important; } body { background: #fff; color: #000; } .shell { display: block; padding: 0; } .reader { border: 0; box-shadow: none; padding: 0; } .page-figure { break-inside: avoid; } } /* Chapter-end facsimile gallery — every printed page, on demand. */ .facsimile--all { max-width: none; margin-top: 2.5rem; } .facsimile--all > summary { padding: .7rem .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; color: var(--ink-soft); } .facsimile--all > summary:hover { border-color: var(--gold); color: var(--ink); } .facsimile--all > .gallery { margin-top: 1rem; }