/* ============================================================ CASE NAV — collapsible rail sidebar + in-page section map ------------------------------------------------------------ Scope: everything is gated behind `.cs-railnav` on , so only case-study pages that opt in get this behaviour. The main sidebar and the page section-map are separate; the map is injected by js/case-nav.js and lives to the right of the rail. States (on ): - (no state) → expanded (used for the load intro) - .rail-collapsed → icon-only rail; hover/focus peeks it open as an overlay above the content - .rail-pinned → expanded and pinned (content reflows) ============================================================ */ .cs-railnav { --rail-w: 248px; /* default expanded (load starts here, then collapses) */ --map-w: 184px; --rail-gap: 18px; --map-pad: 26px; } .cs-railnav.rail-collapsed { --rail-w: 72px; } .cs-railnav.rail-pinned { --rail-w: 248px; } /* Content offset = rail + gap + map + breathing room */ .cs-railnav.has-sidebar { padding-left: calc(var(--rail-w) + var(--rail-gap) + var(--map-w) + var(--map-pad)); transition: padding-left 0.42s var(--ease); } /* Continuous background — the SAME glow sits under the rail, map and content, so the nav area is not a separate panel. Full-bleed (ignores the content padding), replacing the hero's confined gradient. */ .cs-railnav::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 640px at 66% -6%, rgba(167, 139, 250, 0.13), transparent 62%), radial-gradient(900px 620px at 3% 4%, rgba(124, 246, 160, 0.10), transparent 60%); opacity: 0.7; } .cs-railnav #cs-content, .cs-railnav .footer { position: relative; z-index: 1; } .cs--flush .cs-hero::before { display: none; } /* top-align the content with the logo/name row */ .cs-railnav .cs-hero { padding-top: 24px; } /* ---------- Sidebar rail ---------- */ .cs-railnav .sidebar { width: var(--rail-w); overflow: hidden; background: transparent; border-right: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: width 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s var(--ease); } /* consistent row heights in both states so the icons and labels never shift */ .cs-railnav .sidebar__item { min-height: 44px; } .cs-railnav .sidebar__brand { min-height: 48px; box-sizing: border-box; } .cs-railnav .sidebar__label { white-space: nowrap; } /* peek while collapsed → expand as an overlay (no reflow). `is-peek` is set by JS only when an icon/logo/toggle is hovered, so the empty rail area does NOT trigger it. Focus-within covers keyboard. */ .cs-railnav.rail-collapsed .sidebar.is-peek, .cs-railnav.rail-collapsed .sidebar:focus-within { width: 248px; background: rgba(12, 11, 32, 0.94); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: 26px 0 70px -34px rgba(0, 0, 0, 0.85); } /* Labels: fully removed from layout while collapsed so the icons and logo center cleanly in the rail; shown again while peeking or pinned open. */ .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__name, .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__item > span, .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__foot { display: none; } /* keep the section labels' vertical space (as a gap) so the icons line up with the same items in the open menu — only the text is hidden. */ .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__label { visibility: hidden; } /* Center the icons in the narrow rail; left-align again when open/peeking */ .cs-railnav.rail-collapsed .sidebar__item, .cs-railnav.rail-collapsed .sidebar__brand { justify-content: center; } .cs-railnav.rail-collapsed .sidebar.is-peek .sidebar__item, .cs-railnav.rail-collapsed .sidebar.is-peek .sidebar__brand, .cs-railnav.rail-collapsed .sidebar:focus-within .sidebar__item, .cs-railnav.rail-collapsed .sidebar:focus-within .sidebar__brand { justify-content: flex-start; } /* Clean, recognizable icons in the collapsed rail (no filled blocks) */ .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__item { background: transparent; border-radius: 12px; } .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__item svg { width: 21px; height: 21px; opacity: 1; } .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__item--accent { background: transparent; color: var(--accent); } .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .sidebar__item.is-active { background: rgba(255, 255, 255, 0.07); color: #fff; } /* ---------- Open / close toggle (injected, sits inline with the brand) ---------- */ .rail-toggle { position: absolute; top: 20px; right: 14px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; flex: none; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--text-dim); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), opacity 0.3s var(--ease); } .rail-toggle:hover { color: var(--text); border-color: var(--accent); background: rgba(124, 246, 160, 0.08); } .rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* collapsed rail: the toggle stays out of the item flow and fades out, so the icons keep the exact positions of the open menu. It fades back in on peek/pin. */ .cs-railnav.rail-collapsed .sidebar:not(.is-peek):not(:focus-within) .rail-toggle { opacity: 0; pointer-events: none; } .rail-toggle svg { position: absolute; width: 20px; height: 20px; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .rail-toggle__open { opacity: 0; transform: rotate(-90deg) scale(0.7); } .rail-toggle__close { opacity: 1; transform: none; } .cs-railnav.rail-collapsed .rail-toggle__open { opacity: 1; transform: none; } .cs-railnav.rail-collapsed .rail-toggle__close { opacity: 0; transform: rotate(90deg) scale(0.7); } /* ---------- Section map (injected, to the right of the rail) ---------- */ .cs-map { position: fixed; z-index: 60; top: 24px; left: calc(var(--rail-w) + var(--rail-gap)); width: var(--map-w); max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 4px 0; opacity: 0; transition: left 0.42s var(--ease), opacity 0.5s var(--ease); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .cs-map.is-ready { opacity: 1; } .cs-map::-webkit-scrollbar { width: 6px; } .cs-map::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; } /* Fade the map out while the rail is peeking over it */ .cs-railnav.rail-collapsed .sidebar.is-peek ~ .cs-map, .cs-railnav.rail-collapsed .sidebar:focus-within ~ .cs-map { opacity: 0; pointer-events: none; } .cs-map__title { margin: 0 0 10px; padding-left: 16px; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); } .cs-map__track { position: relative; padding-left: 16px; } .cs-map__track::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; } .cs-map__cursor { position: absolute; left: 3px; top: 0; width: 4px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(124, 246, 160, 0.5); transition: transform 0.34s var(--ease), height 0.34s var(--ease), opacity 0.3s var(--ease); opacity: 0; } .cs-map.is-ready .cs-map__cursor { opacity: 1; } .cs-map__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .cs-map__link { display: block; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; line-height: 1.32; color: var(--text-mute); transition: color 0.2s var(--ease), background 0.2s var(--ease); } .cs-map__link:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .cs-map__link.is-active { color: var(--text); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cs-railnav .sidebar, .cs-railnav.has-sidebar, .cs-map, .cs-map__cursor, .rail-toggle svg { transition: none !important; } } /* ---------- Narrow screens: fall back to the site's top-bar nav ---------- */ @media (max-width: 900px) { /* Content spans the full viewport — the rail is now an off-canvas drawer, so drop the desktop rail+map offset (else the body keeps 476px of left padding and the content column collapses to zero width). */ .cs-railnav.has-sidebar { padding-left: 0; } /* The left rail becomes the shared slide-in drawer (geometry in styles.css); just neutralize the desktop rail styling so the drawer shows in full. */ .cs-railnav .sidebar { width: min(84vw, 300px); overflow-y: auto; overflow-x: hidden; background: rgba(10, 9, 32, 0.96); border-right: 1px solid var(--line); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); transition: transform .3s var(--ease); } .cs-railnav .sidebar__brand, .cs-railnav .sidebar__item { justify-content: flex-start; } .cs-map { display: none; } .rail-toggle { display: none; } }