/* =========================================================================== vacei-sidebar.css — CANONICAL white-glass sidebar skin v1.1.1 · 2026-07-28 --------------------------------------------------------------------------- v1.1.1 — two fixes found by implementers, both invisible to a build: · the §11 legacy bridge still tinted the ACTIVE nav row with the HOVER blue (#3339C4). Frozen §4.4 says the active label is --v-primary (#3F4FE3); hover is only ever a hover state. Affects tax + fs-review. · documented the Tailwind v4 layer-precedence trap on .vc-sb-rail (see the comment there) — unlayered CSS beats @layer utilities, so this file silently outranks consumer utility classes. Surfaces vendored against v1.1.0 need re-vendoring for the first of these. --------------------------------------------------------------------------- ⚠️ v1.1.0 SUPERSEDES v1.0.0's VALUES. v1.0.0 derived its tokens from books.a4.com.mt, which was the best available reference at the time. The owner has since delivered the finished design set (VACEI_UI_UNIFICATION_PROMPT.md §3, "FROZEN"), and it disagrees on three things that matter. The design set wins: brand blue #494FDF -> #3F4FE3 (the spec says "sweep it" by name) brand hover #3B41C9 -> #3339C4 rail width 78px -> 72px nav radius 10px -> 12px nav icon 15px -> 18px, stroke 1.7 nav height n/a -> 38px label tracking .08em -> .12em Any surface still on v1.0.0 values is OUT OF DATE and must be re-vendored. STATUS (verified against the live hosts, not against merge status): all seven surfaces now ship #3F4FE3 and rail 72px. The four satellites that were briefly on the old blue — tax, fs-review, payroll, fs-studio — were swept and re-verified. **There is no longer a second brand blue in the estate.** Do not read the paragraph above as current state; it records why the version exists. TOKEN NAMING: the frozen spec names tokens `--v-*`. Those are now primary. The `--bk-*` names from v1.0.0 are kept as ALIASES because four shipped surfaces already reference them; they are deprecated, not load-bearing. Do not add new `--bk-*` references. --------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH. This file is vendored byte-identically into every Vacei surface so that "the sidebars match" is guaranteed by construction rather than by eyeballing four codebases. Vendored into: vacei-client-portal src/styles/vacei-sidebar.css vacei-portal-frontend src/styles/vacei-sidebar.css a4-payroll-web src/styles/vacei-sidebar.css fs-studio-web src/styles/vacei-sidebar.css (vacei-audit-web) src/styles/vacei-sidebar.css Canonical copy lives at Dropbox\Claude\docs\design\vacei-sidebar.css EDIT THE CANONICAL COPY FIRST, then re-vendor all consumers in the same change. A divergent copy is worse than no shared file at all — this estate has already been bitten by two definitions of --a4-font-ui shipping at once and the winner being decided by import order. DERIVATION — every value below is copied, not invented. Source of truth is Vacei Books, which the owner ruled canonical on 2026-07-27: vacei-books-app/src/styles/books-tokens.css vacei-books-app/src/components/books/BooksSidebar.tsx Line references are given per value. Do not "tidy" a value without checking it against books first. =========================================================================== */ /* --------------------------------------------------------------------------- 1 · TOKENS Names kept identical to Books' --bk-* so a diff against the reference is trivial. These sit alongside each portal's existing --a4-* set; they do not collide with it and they must not be redefined anywhere else in the repo. --------------------------------------------------------------------------- */ :root { /* ---- FROZEN: prompt §3.1 brand ---- */ --v-primary: #3f4fe3; --v-primary-hover: #3339c4; --v-primary-soft: #eef0ff; --v-primary-soft-border: #c9cbf5; --v-primary-tint: rgba(63, 79, 227, 0.08); --v-focus: #7b80ff; /* ---- FROZEN: prompt §3.1 ink ---- */ --v-ink: #151515; --v-body: #3b3b3b; --v-stone: #6b6b6b; --v-mute: #8e8e8e; /* ---- FROZEN: prompt §3.1 surfaces ---- */ --v-canvas: #e8e8e9; --v-card: #ffffff; --v-card-soft: #f2f2f2; --v-card-soft-hover: #eaeaea; --v-hairline: #e4e4e4; --v-dark: #101014; /* ---- FROZEN: prompt §3.1 glass — the shell surface ---- */ --v-glass: rgba(255, 255, 255, 0.66); --v-glass-border: rgba(255, 255, 255, 0.85); --v-glass-hover: rgba(255, 255, 255, 0.78); --v-glass-blur: blur(20px) saturate(180%); --v-shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); --v-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05); /* ---- FROZEN: prompt §3.1 status ---- */ --v-review: #a9761f; --v-review-bg: rgba(232, 176, 75, 0.2); --v-danger: #c94a4a; --v-danger-bg: rgba(226, 92, 92, 0.14); --v-notify-dot: #e8b04b; /* ---- FROZEN: prompt §3.3 geometry ---- */ --v-r-shell: 24px; --v-r-card: 16px; --v-r-item: 12px; --v-r-pill: 9999px; --v-gutter: 16px; /* ---- FROZEN: prompt §4.2 sidebar geometry ---- */ --vc-sb-rail: 72px; --vc-sb-open: 246px; --vc-sb-item-h: 38px; /* Surface literals not tokenised in the spec. Named here so consumers cannot drift on them. Open-state opacity stays at .94: the spec gives --v-glass (.66) for the rail, and translucent glass over real content is unreadable when expanded. */ --vc-sb-bg-open: rgba(255, 255, 255, 0.94); --vc-sb-shadow-open: 0 18px 50px rgba(0, 0, 0, 0.16); --vc-sb-active-bg: #ffffff; --vc-sb-active-shadow: var(--v-shadow-card); --vc-sb-divider: rgba(0, 0, 0, 0.07); --vc-sb-rail-dot: #d6d6d6; --vc-sb-subpanel: rgba(255, 255, 255, 0.4); --vc-sb-card-bg: rgba(255, 255, 255, 0.55); --vc-sb-card-border: rgba(255, 255, 255, 0.9); /* ---- DEPRECATED ALIASES ---- v1.0.0 names, kept only because four shipped surfaces reference them. They now resolve to the FROZEN values, so re-vendoring this file is what sweeps #494FDF off those surfaces. Do not add new references. */ --bk-glass: var(--v-glass); --bk-glass-border: var(--v-glass-border); --bk-glass-hover: var(--v-glass-hover); --bk-ink: var(--v-ink); --bk-body: var(--v-body); --bk-mute: var(--v-mute); --bk-stone: var(--v-stone); --bk-hairline: var(--v-hairline); --bk-logo: var(--v-primary); --bk-primary: var(--v-primary); --bk-primary-hover: var(--v-primary-hover); --bk-primary-soft: var(--v-primary-soft); --bk-primary-soft-border: var(--v-primary-soft-border); --bk-status-review-bg: var(--v-review-bg); --bk-status-review-deep: var(--v-review); --bk-status-danger: var(--v-danger); --bk-status-danger-bg: var(--v-danger-bg); --bk-notify-dot: var(--v-notify-dot); --bk-shadow-glass: var(--v-shadow-glass); } /* --------------------------------------------------------------------------- 2 · THE PANEL BooksSidebar.tsx:458-476. The wrapper stays at rail width and the panel OVERLAYS content when open — content must not reflow on hover. Consumers: put .vc-sb-rail on the layout reservation div and .vc-sb on the