/* ============================================================ fcc.cc — Site Rail (.site-rail) 260px collapsible right-side sitemap. Replaces the legacy ecosystem nav with a grouped sub-site list. Mounted via

or auto-injected by fcc-site-rail.js unless . ============================================================ */ /* ── Universal rail-gutter padding ─────────────────────────── Every page reserves the right gutter so body content doesn't slide under the fixed rail. Rail state lives on . */ body[data-rail="expanded"] { padding-right: 260px; } body[data-rail="collapsed"] { padding-right: 48px; } /* Default (rail not yet hydrated): no padding — avoids flash if rail JS hasn't run. Theme-boot doesn't set data-rail. */ /* ── Rail itself ─────────────────────────────────────────── */ .site-rail { position: fixed; top: 0; right: 0; bottom: 0; width: 260px; background: var(--paper); border-left: 1px solid var(--rule); font-family: var(--sans); color: var(--ink-2); z-index: 40; display: flex; flex-direction: column; transition: width .18s ease; } .site-rail.is-collapsed { width: 48px; } /* Header strip */ .site-rail-head { padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .site-rail.is-collapsed .site-rail-head { padding: 14px 0; justify-content: center; } .site-rail-brand { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .site-rail-brand .strong { color: var(--ink); } .site-rail.is-collapsed .site-rail-brand { display: none; } .site-rail-toggle { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 2px; background: transparent; cursor: pointer; } .site-rail-toggle:hover { color: var(--ink); border-color: var(--ink-3); } .site-rail-toggle svg { width: 12px; height: 12px; } /* Scroll region */ .site-rail-scroll { flex: 1; overflow-y: auto; padding: 14px 0 18px; } .site-rail-scroll::-webkit-scrollbar { width: 4px; } .site-rail-scroll::-webkit-scrollbar-thumb { background: var(--rule); } .site-rail-group { margin-bottom: 14px; } .site-rail-grouplabel { padding: 6px 18px 4px; font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); } .site-rail.is-collapsed .site-rail-grouplabel { display: none; } .site-rail.is-collapsed .site-rail-group { margin-bottom: 6px; border-bottom: 1px solid var(--rule-2, var(--rule)); padding-bottom: 6px; } .site-rail.is-collapsed .site-rail-group:last-child { border-bottom: 0; } .site-rail-item { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 8px 18px; color: var(--ink-2); cursor: pointer; border-left: 2px solid transparent; text-decoration: none; } .site-rail-item:hover { background: var(--paper-2); color: var(--ink); } .site-rail-item[aria-current="page"] { background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); border-left-color: var(--c, var(--accent)); color: var(--ink); } .site-rail-item .dot { width: 9px; height: 9px; background: var(--c, var(--ink-4)); border-radius: 1px; } .site-rail-item .name { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -0.005em; } .site-rail-item[aria-current="page"] .name { color: var(--ink); } .site-rail-item .meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.02em; } .site-rail-item[aria-current="page"] .meta { color: var(--c, var(--accent)); } /* Collapsed item — only show dot, centered */ .site-rail.is-collapsed .site-rail-item { grid-template-columns: 1fr; justify-items: center; padding: 7px 0; border-left: 0; position: relative; } .site-rail.is-collapsed .site-rail-item .name, .site-rail.is-collapsed .site-rail-item .meta { display: none; } .site-rail.is-collapsed .site-rail-item[aria-current="page"] { background: transparent; } .site-rail.is-collapsed .site-rail-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--c, var(--accent)); } .site-rail.is-collapsed .site-rail-item .dot { width: 14px; height: 14px; border-radius: 2px; } /* Footer utility */ .site-rail-foot { border-top: 1px solid var(--rule); padding: 12px 14px; display: flex; gap: 8px; flex-shrink: 0; } .site-rail.is-collapsed .site-rail-foot { flex-direction: column; align-items: center; padding: 12px 6px; } .site-rail-util { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; cursor: pointer; text-decoration: none; } .site-rail-util:hover { color: var(--ink); border-color: var(--ink-3); } .site-rail-util svg { width: 12px; height: 12px; } .site-rail.is-collapsed .site-rail-util { flex: none; width: 28px; height: 28px; padding: 0; font-size: 0; } /* Light-mode background tweak */ [data-theme="newsprint"] .site-rail, [data-theme="paper"] .site-rail, [data-mode="light"] .site-rail { background: var(--paper-2); } [data-theme="newsprint"] .site-rail-item:hover, [data-theme="paper"] .site-rail-item:hover, [data-mode="light"] .site-rail-item:hover { background: var(--paper-3); } /* v2 Daily palette overrides — when a page declares data-theme=light/dark inline (fcc-old-v2 / movies-v2), it doesn't load fcc-theme-boot.js, so the rail's --paper-2/--ink-2/etc fall through to fcc-tokens.css's dark defaults. Map them to v2's cream/ink palette here. */ [data-theme="light"] { --paper-2: #e8dec5; --paper-3: #ddd0a5; --ink-2: #3d342a; --ink-3: #6e6657; --ink-4: #8a8167; } [data-theme="dark"] { --paper-2: #26211c; --paper-3: #2f2924; --ink-2: #d7cdb8; --ink-3: #a39875; --ink-4: #8a8167; } /* Narrow viewports — collapse rail to ribbon */ @media (max-width: 900px) { body[data-rail="expanded"], body[data-rail="collapsed"] { padding-right: 0; } .site-rail { width: 0; overflow: hidden; border-left: 0; } .site-rail.is-mobile-open { width: 260px; border-left: 1px solid var(--rule); } }