/* ========================================================================== Ilios Admin — shared shell One collapsible left sidebar + unified chrome for every admin page. Drop-in: add to any page's : The JS injects the sidebar and adds `has-admin-shell` to . Colors reference the shared noir palette every page already defines (--ink, --linen, --gold, --gold-2, --dim, --line, --line-soft), with fallbacks so a page missing a token still renders correctly. ========================================================================== */ :root{ --ash-w: 252px; /* expanded sidebar width */ --ash-w-collapsed: 66px; /* collapsed (icons only) */ --ash-ease: cubic-bezier(.22,.61,.18,1); /* the shell is self-contained noir: literal values, NOT page tokens, so the sidebar looks identical on every page regardless of how a page defines --ink/--bg (some tool pages repurpose --ink as a text color). */ --ash-ink:#0a0908; --ash-linen:#efe7d6; --ash-gold:#caa15c; --ash-gold-2:#e7cf9a; --ash-teal:#46a0b0; --ash-dim:#9c9384; --ash-line:rgba(202,161,92,.26); --ash-line-soft:rgba(202,161,92,.16); } /* ---- layout: fixed rail on the left, content flows with padding --------- */ /* Collapsed = rail fully hidden (content gets the whole width); only the floating flap shows. Moving the mouse to the screen edge peeks the icon rail (body.ash-peek, set by the JS). */ .has-admin-shell{ padding-left: var(--ash-w); transition: padding-left .32s var(--ash-ease); } .has-admin-shell.ash-collapsed{ padding-left: 0; } /* The old per-page cross-page navs are superseded by the sidebar. Hide them wherever the shell is active (page titles / action bars are untouched). */ .has-admin-shell nav.mast-nav, .has-admin-shell nav.topnav, .has-admin-shell nav.adminnav, .has-admin-shell .top-nav{ display:none !important; } /* ---- the rail ----------------------------------------------------------- */ .ash-side{ position:fixed; top:0; left:0; z-index:1000; width:var(--ash-w); height:100vh; display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(202,161,92,.055), rgba(11,10,9,.92) 42%, rgba(9,8,7,.96)), var(--ash-ink); border-right:1px solid var(--ash-line-soft); backdrop-filter:blur(8px); font-family:'Syne', system-ui, sans-serif; transition:width .32s var(--ash-ease), transform .32s var(--ash-ease); overflow:hidden; } .ash-collapsed .ash-side{ width:var(--ash-w-collapsed); transform:translateX(-100%); } .ash-collapsed.ash-peek .ash-side{ transform:translateX(0); box-shadow:0 0 60px rgba(0,0,0,.55); } /* floating bump-out tab: the only chrome visible while collapsed */ .ash-flap{ position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:1001; display:none; width:22px; height:64px; place-items:center; cursor:pointer; border:1px solid var(--ash-line-soft); border-left:none; border-radius:0 12px 12px 0; background:rgba(11,10,9,.9); color:var(--ash-gold-2); backdrop-filter:blur(8px); transition:left .32s var(--ash-ease), background .25s, color .25s; } .ash-flap:hover{ background:rgba(202,161,92,.16); color:var(--ash-gold-2); } .ash-flap svg{ width:14px; height:14px; } .ash-collapsed .ash-flap{ display:grid; } .ash-collapsed.ash-peek .ash-flap{ left:var(--ash-w-collapsed); } /* header: wordmark + collapse toggle */ .ash-head{ display:flex; align-items:center; gap:10px; padding:20px 16px 16px; min-height:64px; border-bottom:1px solid var(--ash-line-soft); } .ash-brand{ display:flex; flex-direction:column; line-height:1; text-decoration:none; color:var(--ash-linen); overflow:hidden; white-space:nowrap; flex:1; } .ash-brand .wm-logo{ width:128px; height:auto; display:block; margin-left:-4px; } .ash-brand .tag{ font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--ash-gold); margin-top:6px; } .ash-collapsed .ash-brand{ opacity:0; pointer-events:none; } .ash-toggle{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--ash-line-soft); border-radius:9px; cursor:pointer; background:rgba(202,161,92,.06); color:var(--ash-gold-2); transition:border-color .25s, background .25s, color .25s, transform .32s var(--ash-ease); } .ash-toggle:hover{ border-color:var(--ash-line); background:rgba(202,161,92,.12); } .ash-toggle svg{ width:16px; height:16px; transition:transform .32s var(--ash-ease); } .ash-collapsed .ash-toggle svg{ transform:rotate(180deg); } /* when collapsed, center the toggle in the narrow rail */ .ash-collapsed .ash-head{ padding:20px 0 16px; justify-content:center; } /* ---- nav ---------------------------------------------------------------- */ /* min-height:0 is load-bearing: without it this flex child refuses to shrink below its content, the footer gets pushed past 100vh, and the rail's overflow:hidden clips the bottom nav items instead of scrolling. */ .ash-nav{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 12px 20px; } .ash-nav::-webkit-scrollbar{ width:8px; } .ash-nav::-webkit-scrollbar-thumb{ background:var(--ash-line-soft); border-radius:8px; } .ash-nav{ scrollbar-width:thin; scrollbar-color:var(--ash-line-soft) transparent; } .ash-group{ margin:14px 6px 6px; } .ash-group:first-child{ margin-top:2px; } .ash-group-label{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--ash-dim); padding:0 8px 4px; white-space:nowrap; overflow:hidden; transition:opacity .2s; } .ash-collapsed .ash-group-label{ opacity:0; height:8px; padding-bottom:0; } .ash-item{ position:relative; display:flex; align-items:center; gap:12px; padding:9px 11px; margin:1px 0; border-radius:10px; text-decoration:none; color:var(--ash-dim); white-space:nowrap; transition:color .22s, background .22s; } .ash-item:hover{ color:var(--ash-linen); background:rgba(202,161,92,.07); } .ash-item .ic{ flex:0 0 auto; width:19px; height:19px; display:grid; place-items:center; } .ash-item .ic svg{ width:19px; height:19px; stroke:currentColor; stroke-width:1.6; fill:none; } .ash-item .lbl{ font-size:13px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; transition:opacity .2s; } .ash-collapsed .ash-item .lbl{ opacity:0; } .ash-collapsed .ash-item{ justify-content:center; padding:10px 0; } /* active state: gold text, tinted bg, left gold bar */ .ash-item.active{ color:var(--ash-gold-2); background:linear-gradient(90deg, rgba(202,161,92,.15), rgba(202,161,92,.04)); } .ash-item.active::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; border-radius:0 3px 3px 0; background:var(--ash-gold); } .ash-collapsed .ash-item.active::before{ height:44%; } /* footer */ .ash-foot{ padding:12px 16px 16px; border-top:1px solid var(--ash-line-soft); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim); white-space:nowrap; overflow:hidden; } .ash-foot b{ color:var(--ash-gold); font-weight:600; } .ash-collapsed .ash-foot{ opacity:0; } /* ---- mobile: off-canvas drawer + hamburger ------------------------------ */ .ash-burger{ position:fixed; top:14px; left:14px; z-index:1002; display:none; width:42px; height:42px; place-items:center; cursor:pointer; border:1px solid var(--ash-line); border-radius:11px; color:var(--ash-gold-2); background:rgba(11,10,9,.86); backdrop-filter:blur(8px); } .ash-burger svg{ width:20px; height:20px; } .ash-backdrop{ position:fixed; inset:0; z-index:999; background:rgba(4,4,4,.6); opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(2px); } /* short screens: tighten the rail so more of the nav fits before scrolling */ @media (max-height:840px){ .ash-head{ padding:14px 16px 12px; min-height:52px; } .ash-nav{ padding:8px 10px 14px; } .ash-group{ margin:10px 6px 4px; } .ash-item{ padding:7px 10px; } .ash-item .lbl{ font-size:12.5px; } .ash-foot{ padding:9px 16px 12px; } } @media (max-width:860px){ .has-admin-shell, .has-admin-shell.ash-collapsed{ padding-left:0; } .ash-side{ width:var(--ash-w); transform:translateX(-100%); box-shadow:0 0 60px rgba(0,0,0,.6); } .ash-collapsed .ash-side{ width:var(--ash-w); } /* collapse doesn't apply on mobile */ .ash-flap{ display:none !important; } /* mobile uses the burger drawer */ .ash-collapsed .ash-brand, .ash-collapsed .ash-item .lbl, .ash-collapsed .ash-group-label, .ash-collapsed .ash-foot{ opacity:1; } /* always full labels in drawer */ .ash-collapsed .ash-item{ justify-content:flex-start; padding:9px 11px; } .ash-collapsed .ash-head{ padding:20px 16px 16px; justify-content:space-between; } .ash-open .ash-side{ transform:translateX(0); } .ash-open .ash-backdrop{ opacity:1; pointer-events:auto; } .ash-burger{ display:grid; } .ash-head .ash-toggle{ display:none; } /* no collapse control on mobile */ } /* ========================================================================== Shared components — adopt these class names on any page for consistent buttons, panels, chips, tables, and section headers. Existing page styles are left intact; these are opt-in so pages converge over time. ========================================================================== */ .ash-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:'Syne',sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:10px 16px; border-radius:11px; text-decoration:none; border:1px solid var(--ash-line); color:var(--ash-linen); background:rgba(202,161,92,.06); transition:border-color .25s, background .25s, transform .2s, color .25s; } .ash-btn:hover{ border-color:var(--ash-gold); background:rgba(202,161,92,.14); transform:translateY(-1px); } .ash-btn--gold{ background:var(--ash-gold); border-color:var(--ash-gold); color:#1a1409; } .ash-btn--gold:hover{ background:var(--ash-gold-2); border-color:var(--ash-gold-2); color:#1a1409; } .ash-btn--ghost{ background:transparent; } .ash-panel{ border:1px solid var(--ash-line-soft); border-radius:16px; padding:22px 24px; background:linear-gradient(180deg, rgba(202,161,92,.05), rgba(13,11,10,.55)); backdrop-filter:blur(6px); } .ash-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.06em; padding:4px 10px; border-radius:999px; border:1px solid var(--ash-line-soft); color:var(--ash-dim); background:rgba(202,161,92,.04); } .ash-chip--live{ color:var(--ash-teal); border-color:rgba(70,160,176,.4); } .ash-chip--gold{ color:var(--ash-gold-2); border-color:var(--ash-line); } .ash-eyebrow{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--ash-gold); } .ash-h1{ font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(28px,4vw,44px); line-height:1.04; color:var(--ash-linen); } .ash-h1 em{ font-style:italic; color:var(--ash-gold-2); } .ash-table{ width:100%; border-collapse:collapse; font-size:13.5px; } .ash-table th{ text-align:left; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-dim); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--ash-line-soft); } .ash-table td{ padding:12px 14px; border-bottom:1px solid var(--ash-line-soft); color:var(--ash-linen); } .ash-table tr:hover td{ background:rgba(202,161,92,.04); } /* respect reduced motion */ @media (prefers-reduced-motion:reduce){ .has-admin-shell, .ash-side, .ash-toggle svg, .ash-item, .ash-backdrop{ transition:none !important; } } /* Print: the shell chrome never belongs on paper (QR kits + unit postcards print from these pages); also undo the sidebar content offset. */ @media print{ .ash-side, .ash-burger, .ash-backdrop, .ash-flap{ display:none !important; } body.has-admin-shell{ padding-left:0 !important; margin-left:0 !important; } }