/* ========================================================================= Neumann Design System — Ecosystem Shell (portable, self-contained) v1.0.0 · 2026-06-29 · Source of truth: /neumann-design-system/ ------------------------------------------------------------------------ Drop-in unified shell for the AI Stack apps (AI PDF Lab, AI API Bridge, LM Studio Gateway, AI Workspace, Local AI Runtime). Load AFTER the app's own stylesheet. Provides: 1) a dark "token bridge" that re-themes the host app to the Neumann ember/steel palette by overriding its CSS custom properties, 2) the global header + AI-Stack mega-menu + mobile sheet, 3) the context/breadcrumb bar, 4) the unified 5-column footer. No external fonts/CDNs. Motion is transform/opacity only and fully respects prefers-reduced-motion. ========================================================================= */ /* ----------------------------------------------------------------- tokens */ :root { --jn-bg: #05070a; --jn-bg-2: #080d13; --jn-surface: #0b1219; --jn-surface-2: #0f1822; --jn-glass: rgba(9, 14, 20, .82); --jn-text: #f3efe6; --jn-text-dim: #c3ccd2; --jn-text-muted: #8597a3; --jn-line: #1d2a35; --jn-line-soft: rgba(143, 178, 199, .16); --jn-ember: #e87436; --jn-ember-deep: #b8501f; --jn-steel: #7fb0cd; --jn-copper: #c8814a; --jn-ok: #76b58a; --jn-warn: #e0a64a; --jn-danger: #e0635f; --jn-radius: 12px; --jn-radius-sm: 6px; --jn-pill: 999px; --jn-shadow: 0 22px 54px rgba(0, 0, 0, .5); --jn-glow: 0 0 26px rgba(232, 116, 54, .20); --jn-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "Roboto Mono", monospace; --jn-sans: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --jn-ease: cubic-bezier(.22, .8, .26, 1); --jn-ease-out: cubic-bezier(.16, 1, .3, 1); --jn-dur: .3s; --jn-header-h: 70px; --jn-maxw: 1240px; --jn-gutter: clamp(1rem, 4vw, 2.5rem); --jn-z-backdrop: 1080; /* below the sticky header so the open sheet stays on top */ --jn-z-sticky: 1100; --jn-z-menu: 1130; --jn-z-sheet: 1200; } /* ----------------------------------------------------- dark token bridge OPT-IN via . Re-points the host app's own variables to the Neumann dark palette so a light-themed app re-themes with zero layout changes. Apps that are already dark (e.g. AI Workspace) simply omit jn-bridge and keep their own palette while still using the shared shell chrome. */ body.jn-bridge { color-scheme: dark; background: var(--jn-bg); color: var(--jn-text); --bg: var(--jn-bg); --bg-2: var(--jn-bg-2); --panel: var(--jn-surface); --panel-strong: var(--jn-surface-2); --panel-soft: rgba(143, 178, 199, .06); --surface: var(--jn-surface); --surface-2: var(--jn-surface-2); --card: var(--jn-surface); --ink: var(--jn-text); --text: var(--jn-text); --ink-dim: var(--jn-text-dim); --ink-soft: var(--jn-text-muted); --muted: var(--jn-text-dim); --soft: var(--jn-text-muted); --text-dim: var(--jn-text-dim); --text-muted: var(--jn-text-muted); --line: var(--jn-line); --line-2: var(--jn-line-soft); --line-strong: rgba(237, 241, 232, .30); --border: var(--jn-line); --accent: var(--jn-ember); --accent-strong: var(--jn-ember-deep); --accent-2: var(--jn-steel); --ember: var(--jn-ember); --steel: var(--jn-steel); --warm: var(--jn-copper); --copper: var(--jn-copper); --bronze: var(--jn-copper); --gold: var(--jn-warn); --teal: var(--jn-steel); --violet: #9c89d9; --ok: var(--jn-ok); --success: var(--jn-ok); --warn: var(--jn-warn); --warning: var(--jn-warn); --error: var(--jn-danger); --danger: var(--jn-danger); --shadow: var(--jn-shadow); } body.jn-shelled { overflow-x: hidden; isolation: isolate; /* own stacking context so the aurora can sit behind content */ } body.jn-bridge ::selection { background: rgba(232, 116, 54, .32); } /* Fixed aurora wash — premium depth without per-app background surgery. z-index:-1 paints over body's base background but below all in-flow content, so no per-element position hacks are needed (sticky/fixed keep working). */ .jn-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 78% -6%, rgba(232, 116, 54, .12), transparent 60%), radial-gradient(46% 42% at 6% 2%, rgba(127, 176, 205, .10), transparent 60%); } :where(body.jn-shelled) :focus-visible { outline: 2px solid var(--jn-ember); outline-offset: 3px; border-radius: 4px; } /* ----------------------------------------------------------- skip link */ .jn-skip { position: fixed; top: .8rem; left: .8rem; z-index: var(--jn-z-sheet); transform: translateY(-180%); background: var(--jn-text); color: var(--jn-bg); padding: .7rem 1rem; border-radius: var(--jn-radius-sm); text-decoration: none; font-weight: 700; transition: transform var(--jn-dur) var(--jn-ease); } .jn-skip:focus { transform: translateY(0); } /* ============================================================== header */ .jn-shell-header { position: sticky; top: 0; z-index: var(--jn-z-sticky); border-bottom: 1px solid transparent; transition: background var(--jn-dur) var(--jn-ease), border-color var(--jn-dur) var(--jn-ease); } .jn-shell-header.is-stuck { background: var(--jn-glass); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border-bottom-color: var(--jn-line-soft); } .jn-shell-bar { width: min(100% - calc(var(--jn-gutter) * 2), var(--jn-maxw)); margin-inline: auto; min-height: var(--jn-header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .jn-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--jn-text); } .jn-brand img { width: 38px; height: 38px; border-radius: 9px; } .jn-brand-txt { display: grid; line-height: 1.1; } .jn-brand-txt strong { font-size: 1.02rem; font-weight: 760; letter-spacing: -.01em; } .jn-brand-txt small { font-family: var(--jn-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--jn-text-muted); } .jn-shell-nav { display: flex; align-items: center; gap: .1rem; } .jn-shell-nav > a { position: relative; min-height: 42px; display: inline-flex; align-items: center; padding: .5rem .72rem; color: var(--jn-text-dim); text-decoration: none; font-size: .92rem; font-weight: 550; border-radius: var(--jn-radius-sm); transition: color .25s var(--jn-ease); } .jn-shell-nav > a::after { content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .42rem; height: 1.5px; background: var(--jn-ember); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--jn-ease-out); } .jn-shell-nav > a:hover, .jn-shell-nav > a:focus-visible, .jn-shell-nav > a[aria-current="page"] { color: var(--jn-text); } .jn-shell-nav > a:hover::after, .jn-shell-nav > a:focus-visible::after, .jn-shell-nav > a[aria-current="page"]::after { transform: scaleX(1); } /* hamburger */ .jn-shell-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--jn-line); border-radius: var(--jn-radius-sm); background: var(--jn-surface); align-items: center; justify-content: center; } .jn-shell-toggle span, .jn-shell-toggle span::before, .jn-shell-toggle span::after { content: ""; display: block; width: 19px; height: 2px; background: var(--jn-text); border-radius: 2px; transition: transform var(--jn-dur) var(--jn-ease), opacity var(--jn-dur) var(--jn-ease); } .jn-shell-toggle span { position: relative; } .jn-shell-toggle span::before { position: absolute; top: -6px; } .jn-shell-toggle span::after { position: absolute; top: 6px; } .jn-shell-toggle[aria-expanded="true"] span { background: transparent; } .jn-shell-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .jn-shell-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* ------------------------------------------------------- AI-Stack menu */ .jn-ai { position: relative; display: inline-flex; align-items: center; } .jn-ai-btn { position: relative; min-height: 42px; display: inline-flex; align-items: center; gap: .34rem; padding: .5rem .72rem; color: var(--jn-text-dim); font-size: .92rem; font-weight: 550; border-radius: var(--jn-radius-sm); transition: color .25s var(--jn-ease); } .jn-ai-btn:hover, .jn-ai-btn:focus-visible, .jn-ai[data-open="true"] .jn-ai-btn { color: var(--jn-text); } .jn-ai-caret { width: 15px; height: 15px; transition: transform var(--jn-dur) var(--jn-ease); } .jn-ai[data-open="true"] .jn-ai-caret { transform: rotate(180deg); } .jn-ai-menu { position: absolute; top: calc(100% + .35rem); inset-inline-end: 0; min-width: 19rem; padding: .5rem; display: grid; gap: .1rem; z-index: var(--jn-z-menu); background: var(--jn-glass); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--jn-line-soft); border-radius: var(--jn-radius); box-shadow: var(--jn-shadow); opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top right; pointer-events: none; visibility: hidden; transition: opacity .26s var(--jn-ease), transform .26s var(--jn-ease-out), visibility 0s linear .26s; } @media (hover: hover) and (pointer: fine) { .jn-ai:hover .jn-ai-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .26s var(--jn-ease), transform .26s var(--jn-ease-out); } } .jn-ai[data-open="true"] .jn-ai-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .26s var(--jn-ease), transform .26s var(--jn-ease-out); } .jn-ai-menu a { display: grid; gap: .04rem; padding: .55rem .7rem; border-radius: 9px; text-decoration: none; color: var(--jn-text-dim); font-size: .93rem; font-weight: 600; line-height: 1.2; transition: background .2s var(--jn-ease), color .2s var(--jn-ease), transform .2s var(--jn-ease); } .jn-ai-menu a span { font-size: .73rem; font-weight: 500; color: var(--jn-text-muted); } .jn-ai-menu a:hover, .jn-ai-menu a:focus-visible { background: rgba(143, 178, 199, .10); color: var(--jn-text); transform: translateX(2px); } .jn-ai-menu a[aria-current="page"] { color: var(--jn-ember); } .jn-ai-menu hr { border: 0; border-top: 1px solid var(--jn-line-soft); margin: .25rem .2rem; } /* ============================================================ context bar */ .jn-context { border-bottom: 1px solid var(--jn-line-soft); background: linear-gradient(180deg, rgba(143, 178, 199, .04), transparent); } .jn-context-inner { width: min(100% - calc(var(--jn-gutter) * 2), var(--jn-maxw)); margin-inline: auto; min-height: 46px; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .82rem; } .jn-crumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; } .jn-crumbs a { color: var(--jn-text-muted); text-decoration: none; padding: .2rem .1rem; border-radius: 4px; } .jn-crumbs a:hover, .jn-crumbs a:focus-visible { color: var(--jn-text); } .jn-crumbs .sep { color: var(--jn-text-muted); opacity: .6; } .jn-crumbs [aria-current="page"] { color: var(--jn-text-dim); font-weight: 600; } .jn-context .spacer { flex: 1 1 auto; } .jn-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .24rem .6rem; border-radius: var(--jn-pill); border: 1px solid var(--jn-line); background: rgba(143, 178, 199, .08); color: var(--jn-text-dim); font-family: var(--jn-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; } .jn-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jn-ok); } .jn-pill.is-ok { color: var(--jn-ok); border-color: rgba(118, 181, 138, .35); background: rgba(118, 181, 138, .10); } /* context-bar call-to-action (e.g. Login / Registrieren / Dashboard) */ .jn-ctx-cta { display: inline-flex; align-items: center; min-height: 34px; padding: .32rem .85rem; border-radius: 8px; background: var(--jn-ember); color: #190d05; font-weight: 650; font-size: .83rem; text-decoration: none; border: 1px solid transparent; transition: filter var(--jn-dur) var(--jn-ease), border-color var(--jn-dur) var(--jn-ease), color var(--jn-dur) var(--jn-ease); } .jn-ctx-cta + .jn-ctx-cta { margin-inline-start: .4rem; } .jn-ctx-cta.ghost { background: transparent; color: var(--jn-text-dim); border-color: var(--jn-line); } .jn-ctx-cta:hover { filter: brightness(1.07); } .jn-ctx-cta.ghost:hover { color: var(--jn-text); border-color: var(--jn-ember); } /* ================================================================ footer */ .jn-foot { margin-top: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--jn-line); background: linear-gradient(180deg, transparent, rgba(143, 178, 199, .03)); } .jn-foot-inner { width: min(100% - calc(var(--jn-gutter) * 2), var(--jn-maxw)); margin-inline: auto; padding-block: clamp(2.4rem, 5vw, 3.6rem); display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(13rem, 1.5fr) repeat(4, minmax(8rem, 1fr)); } .jn-foot-brand strong { font-size: 1.05rem; font-weight: 760; } .jn-foot-brand p { margin: .5rem 0 0; color: var(--jn-text-muted); font-family: var(--jn-mono); font-size: .72rem; letter-spacing: .1em; } .jn-foot-col h4 { margin: 0 0 .85rem; font-family: var(--jn-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--jn-text-muted); font-weight: 700; } .jn-foot-col a { display: block; padding: .28rem 0; color: var(--jn-text-dim); text-decoration: none; font-size: .9rem; transition: color .2s var(--jn-ease); } .jn-foot-col a:hover, .jn-foot-col a:focus-visible { color: var(--jn-ember); } .jn-foot-base { border-top: 1px solid var(--jn-line-soft); } .jn-foot-base-inner { width: min(100% - calc(var(--jn-gutter) * 2), var(--jn-maxw)); margin-inline: auto; padding-block: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; justify-content: space-between; color: var(--jn-text-muted); font-size: .78rem; } .jn-foot-base-inner .jn-note { font-family: var(--jn-mono); font-size: .68rem; letter-spacing: .04em; } /* =============================================================== mobile */ @media (max-width: 860px) { .jn-shell-toggle { display: inline-flex; } .jn-shell-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); flex-direction: column; align-items: stretch; gap: .1rem; padding: calc(var(--jn-header-h) + 1rem) 1.1rem 2rem; z-index: var(--jn-z-sheet); background: var(--jn-bg-2); border-left: 1px solid var(--jn-line); box-shadow: var(--jn-shadow); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform var(--jn-dur) var(--jn-ease), visibility 0s linear var(--jn-dur); } .jn-shell-nav.is-open { transform: none; visibility: visible; transition: transform var(--jn-dur) var(--jn-ease); } .jn-shell-nav > a, .jn-ai { width: 100%; } .jn-shell-nav > a { min-height: 50px; padding: .6rem .4rem; font-size: 1.05rem; } .jn-shell-nav > a::after { display: none; } .jn-ai { display: block; } .jn-ai-btn { width: 100%; min-height: 50px; justify-content: space-between; font-size: 1.05rem; padding: .6rem .4rem; } .jn-ai-menu { position: static; min-width: 0; inset: auto; margin: .1rem 0 .4rem; padding: .15rem .15rem .15rem .5rem; background: rgba(143, 178, 199, .05); border: none; border-left: 2px solid var(--jn-line); border-radius: 0; box-shadow: none; opacity: 1; transform: none; visibility: hidden; display: none; pointer-events: auto; transition: none; } @media (hover: hover) and (pointer: fine) { .jn-ai:hover .jn-ai-menu { display: none; } } .jn-ai[data-open="true"] .jn-ai-menu { display: grid; visibility: visible; } .jn-ai-menu a { font-size: 1rem; padding: .55rem .5rem; } .jn-shell-backdrop { position: fixed; inset: 0; z-index: var(--jn-z-backdrop); background: rgba(3, 5, 8, .6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--jn-dur) var(--jn-ease), visibility 0s linear var(--jn-dur); } .jn-shell-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--jn-dur) var(--jn-ease); } .jn-foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jn-foot-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .jn-foot-inner { grid-template-columns: 1fr; } .jn-brand-txt small { display: none; } } /* ----------------------------------------------------- reveal (optional) */ .jn-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--jn-ease-out), transform .6s var(--jn-ease-out); } .jn-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .jn-shell-header, .jn-shell-nav, .jn-ai-menu, .jn-ai-caret, .jn-shell-toggle span, .jn-shell-toggle span::before, .jn-shell-toggle span::after, .jn-shell-backdrop, .jn-reveal, .jn-skip { transition: none !important; } .jn-reveal { opacity: 1 !important; transform: none !important; } }