/* ============================================================ RECORD CHAPTERS - shared chapter styles for the Crust News record pages. Loaded INTO each page's shadow root next to the page's own styles; record-chapters.js applies the classes. Theme hooks (set on :host by each page; every one has a fallback so the defaults hold on any record page): --rc-chrome pinned-chrome offset, set by the JS --rc-accent active dot / active label color --rc-rail-ink idle dot border --rc-rail-bg hover label chip background --rc-rail-txt hover label chip text --rc-rail-hair hover label chip border --rc-menu-bg sticky menu background (opaque!) --rc-menu-hair condensed menu hairline ============================================================ */ /* ---- chapters: short bands read as full slides; bands taller than the viewport scroll freely through their middle (CSS snap spec: snap areas larger than the snapport are not forced) ---- */ .rc-chapter { min-height: clamp(420px, calc(100vh - var(--rc-chrome, 12px)), 1160px); } @supports (height: 100svh) { .rc-chapter { min-height: clamp(420px, calc(100svh - var(--rc-chrome, 12px)), 1160px); } } /* vertical composition, only where the band has no layout of its own (the JS checks computed display before adding this) */ .rc-chapter--center { display: flex; flex-direction: column; justify-content: center; } .rc-chapter--snap, .rc-chapter-top { scroll-snap-align: start; scroll-snap-stop: normal; } /* mobile: one flick = one card */ @media (max-width: 820px) { .rc-chapter--snap { scroll-snap-stop: always; } } /* ---- sticky section menu. CONSTANT LAYOUT HEIGHT: condensing is box-shadow only - a height change reflows the document and the snap points oscillate against the IntersectionObserver ---- */ .rc-menu { position: sticky; /* the Meridian breaking ticker publishes its pinned height on ; custom properties inherit through the shadow boundary, so the menu tucks under the ticker when a reader has pinned it (0px otherwise) */ top: var(--breaking-ticker-h, 0px); z-index: 90; background: var(--rc-menu-bg, inherit); } .rc-menu, .rc-menu--native { transition: box-shadow 0.18s ease; } .rc-menu.is-condensed, .rc-menu--native.is-condensed { box-shadow: 0 1px 0 var(--rc-menu-hair, rgba(128, 128, 128, 0.35)), 0 6px 16px rgba(0, 0, 0, 0.22); } /* ---- chapter rail (desktop only) ---- */ .rc-chapnav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 95; display: none; flex-direction: column; align-items: flex-end; gap: 12px; } @media (min-width: 1100px) { .rc-chapnav { display: flex; } } .rc-chapnav__dot { position: relative; display: block; width: 9px; height: 9px; padding: 0; background: transparent; border: 1px solid var(--rc-rail-ink, #8b8378); border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .rc-chapnav__dot:hover { border-color: var(--rc-accent, #b31f24); } .rc-chapnav__dot--active { background: var(--rc-accent, #b31f24); border-color: var(--rc-accent, #b31f24); } .rc-chapnav__label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--rc-rail-txt, #ece7d8); background: var(--rc-rail-bg, #1c1b13); border: 1px solid var(--rc-rail-hair, rgba(128, 128, 128, 0.4)); padding: 3px 9px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .rc-chapnav__dot:hover .rc-chapnav__label, .rc-chapnav__dot:focus-visible .rc-chapnav__label, .rc-chapnav__dot--active .rc-chapnav__label { opacity: 1; } .rc-chapnav__dot--active .rc-chapnav__label { color: var(--rc-accent, #b31f24); border-color: var(--rc-accent, #b31f24); } @media (prefers-reduced-motion: reduce) { .rc-menu, .rc-menu--native, .rc-chapnav__label { transition: none; } }