/** * COPIED FROM mini-cto/patterns/nav/nav.css — DO NOT EDIT HERE. * * Change it in mini-cto/starter and run `./starter/sync.sh --write`, per * `41-never-do.md` rule 10. Editing this copy is how `_lib.js` became 78 lines * in one repo and 140 in another. * * Synced: 2026-09-02 * Source-SHA256: 456c245d49cab33ee02b7082ddb556509f34ac10b40a9d6ebeabe9e03a7ea4ce */ /* --------------------------------------------------------------------------- * The shared rail, for a tool being viewed on tools.revenuagency.io. * * EVERY SELECTOR IS PREFIXED `rv-nav`. This stylesheet is loaded INTO another * tool's page, alongside stylesheets it knows nothing about, so a bare `.rail` * or `aside` would be a collision waiting for the first tool that already uses * one. Nothing here styles an element the host tool owns, with a single * deliberate exception: the padding on that makes room for the rail, * which is applied through a class the rail adds to itself rather than a bare * `body` rule, so a tool that never loads this file is untouched. * * COLOURS ARE TOKENS, with fallbacks. The tokens come from * mini-cto/starter/tokens.css and every adopting tool already defines them, but * this file is injected rather than compiled together with the host, so a * missing token would silently render an invisible rail. The fallback is the * token's own value from tokens.css, not an approximation. * ------------------------------------------------------------------------- */ .rv-nav { position: fixed; z-index: 2147483000; /* Above the host tool's own modals and sticky headers. */ background: var(--card, #ffffff); box-sizing: border-box; } .rv-nav *, .rv-nav *::before, .rv-nav *::after { box-sizing: border-box; } /* Mobile first: a slim strip across the top, logo left, icons right, no labels. Matches the client dashboard's own mobile behaviour. */ .rv-nav { top: 0; left: 0; right: 0; height: 52px; border-bottom: 1px solid var(--line, #E8DFD2); display: flex; align-items: center; } .rv-nav-inner { display: flex; align-items: center; gap: 4px; padding: 6px 10px; width: 100%; overflow-x: auto; } .rv-nav-spacer { flex: 1; } .rv-nav-item { display: flex; align-items: center; height: 40px; border-radius: 10px; color: var(--tbl-muted, #9aa7b0); text-decoration: none; transition: background .15s, color .15s; /* .15s — design law, Motion */ flex-shrink: 0; } .rv-nav-item:hover { background: var(--tbl-head-bg, #f4f6f8); color: var(--tbl-head-ink, #5b6b76); } .rv-nav-item.is-active { background: var(--accent-soft, #d6e6e2); color: var(--accent-dark, #1f6155); } .rv-nav-item.is-disabled { color: var(--disabled, #c2cbc8); cursor: not-allowed; } .rv-nav-item.is-disabled:hover { background: none; color: var(--disabled, #c2cbc8); } .rv-nav-icon { display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; flex-shrink: 0; } .rv-nav-label { font-size: 13px; font-weight: 600; white-space: nowrap; } .rv-nav-logo { color: var(--accent-dark, #1f6155); font-weight: 600; font-size: 14px; letter-spacing: .08em; } .rv-nav-label.rv-nav-logo { margin-left: -14px; } .rv-nav-item.rv-nav-home:hover { background: none; } /* A hairline above the last group, so infrastructure reads as a different kind of thing from the ops tools without needing a heading nobody would read. */ .rv-nav-sep { display: none; } @media (max-width: 767px) { .rv-nav-item .rv-nav-label:not(.rv-nav-logo) { display: none; } } /* Desktop: the strip becomes the 64px rail, and expands over the content on hover rather than pushing it. Nothing reflows when the pointer crosses it, which is the property that makes it feel calm. */ @media (min-width: 768px) { .rv-nav { top: 0; bottom: 0; right: auto; width: 64px; height: 100vh; border-bottom: 0; border-right: 1px solid var(--line, #E8DFD2); overflow: hidden; transition: width .15s; } .rv-nav:hover { width: 13rem; box-shadow: 10px 0 30px rgba(15, 23, 42, .08); } .rv-nav-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 20px 8px; height: 100%; overflow-x: hidden; overflow-y: auto; } .rv-nav-item { height: 40px; } .rv-nav-label { opacity: 0; transform: translateX(-6px); transition: opacity .15s ease .04s, transform .15s ease .04s; } .rv-nav:hover .rv-nav-label { opacity: 1; transform: none; } .rv-nav-home { margin-bottom: 16px; } .rv-nav-sep { display: block; height: 1px; margin: 8px 6px; background: var(--line, #E8DFD2); flex-shrink: 0; } } /* Room for the rail. Applied via a class the script adds, never a bare `body` rule, so a tool that does not load this file renders exactly as it did. */ body.rv-nav-host { padding-top: 52px; } @media (min-width: 768px) { body.rv-nav-host { padding-top: 0; padding-left: 64px; } }