index.css
1 @import 'tailwindcss'; 2 @import '@nous-research/ui/styles/globals.css'; 3 4 /* Scan the published design-system bundle so its utility classes survive 5 Tailwind's JIT purge. */ 6 @source '../node_modules/@nous-research/ui/dist'; 7 8 /* ------------------------------------------------------------------ */ 9 /* JetBrains Mono — bundled for the embedded TUI (/chat tab). */ 10 /* Gives the terminal a proper monospace font even on systems where */ 11 /* the user doesn't have one installed locally; xterm.js picks it up */ 12 /* via ChatPage's `fontFamily` option. */ 13 /* Apache-2.0. */ 14 /* ------------------------------------------------------------------ */ 15 16 @font-face { 17 font-family: 'JetBrains Mono'; 18 font-style: normal; 19 font-weight: 400; 20 font-display: swap; 21 src: url('/fonts-terminal/JetBrainsMono-Regular.woff2') format('woff2'); 22 } 23 @font-face { 24 font-family: 'JetBrains Mono'; 25 font-style: normal; 26 font-weight: 700; 27 font-display: swap; 28 src: url('/fonts-terminal/JetBrainsMono-Bold.woff2') format('woff2'); 29 } 30 @font-face { 31 font-family: 'JetBrains Mono'; 32 font-style: italic; 33 font-weight: 400; 34 font-display: swap; 35 src: url('/fonts-terminal/JetBrainsMono-Italic.woff2') format('woff2'); 36 } 37 38 /* ------------------------------------------------------------------ */ 39 /* Hermes Agent — Nous DS with the LENS_0 (Hermes teal) lens applied */ 40 /* statically. Mirrors nousnet-web/(hermes-agent)/layout.tsx so the */ 41 /* canonical Hermes palette is the default — teal canvas + cream */ 42 /* accent — without relying on leva/gsap at runtime. */ 43 /* ------------------------------------------------------------------ */ 44 45 :root { 46 /* LENS_0 — from design-language/src/ui/components/overlays/index.tsx. 47 These are the defaults for the `default` (Hermes Teal) dashboard theme; 48 ThemeProvider rewrites them as inline styles when a user switches themes. */ 49 --foreground: color-mix(in srgb, #ffffff 0%, transparent); 50 --foreground-base: #ffffff; 51 --foreground-alpha: 0; 52 --midground: color-mix(in srgb, #ffe6cb 100%, transparent); 53 --midground-base: #ffe6cb; 54 --midground-alpha: 1; 55 --background: color-mix(in srgb, #041c1c 100%, transparent); 56 --background-base: #041c1c; 57 --background-alpha: 1; 58 59 /* Consumed by <Backdrop />; also theme-switchable. */ 60 --warm-glow: rgba(255, 189, 56, 0.35); 61 --noise-opacity-mul: 1; 62 63 /* Typography tokens — rewritten by ThemeProvider. Defaults match the 64 system stack so themes that don't override look native. */ 65 --theme-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, 66 "Helvetica Neue", Arial, sans-serif; 67 --theme-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, 68 Consolas, monospace; 69 --theme-font-display: var(--theme-font-sans); 70 --theme-base-size: 15px; 71 --theme-line-height: 1.55; 72 --theme-letter-spacing: 0; 73 74 /* Layout tokens. */ 75 --radius: 0.5rem; 76 --theme-radius: 0.5rem; 77 --theme-spacing-mul: 1; 78 --theme-density: comfortable; 79 } 80 81 /* Theme tokens cascade into the document root so every descendant inherits 82 the font stack, base size, and letter spacing without explicit calls. */ 83 html { 84 font-family: var(--theme-font-sans); 85 font-size: var(--theme-base-size); 86 line-height: var(--theme-line-height); 87 letter-spacing: var(--theme-letter-spacing); 88 height: 100dvh; 89 max-height: 100dvh; 90 overflow: hidden; 91 } 92 93 body { 94 font-family: var(--theme-font-sans); 95 min-height: 0; 96 height: 100%; 97 margin: 0; 98 overflow: hidden; 99 } 100 101 code, kbd, pre, samp, .font-mono, .font-mono-ui { 102 font-family: var(--theme-font-mono); 103 } 104 105 /* Density: scale the shadcn spacing utilities via a multiplier. The DS 106 components use `p-N` / `gap-N` / `space-*` classes which resolve against 107 Tailwind's spacing scale; multiplying `--spacing` at :root scales them 108 all proportionally in Tailwind v4. */ 109 @theme inline { 110 --spacing: calc(0.25rem * var(--theme-spacing-mul, 1)); 111 } 112 113 #root { 114 min-height: 0; 115 height: 100%; 116 max-height: 100%; 117 overflow: hidden; 118 } 119 120 /* Nousnet's hermes-agent layout bumps `small` and `code` to readable 121 dashboard sizes. Keep in sync. */ 122 small { font-size: 1.0625rem; } 123 code { font-size: 0.875rem; } 124 125 /* Shadcn-compat tokens. 126 The dashboard's page code predates the Nous DS and uses shadcn-style 127 utility classes (bg-card, text-muted-foreground, border-border, etc.) 128 extensively. Rather than rewrite every call site, we expose those 129 tokens on top of the Nous palette so classes continue to resolve. */ 130 @theme inline { 131 /* Remap foreground to midground so `text-foreground` / `bg-foreground` 132 stay visible — in LENS_0, `--foreground` itself has alpha 0. */ 133 --color-foreground: var(--midground); 134 135 --color-card: color-mix(in srgb, var(--midground-base) 4%, var(--background-base)); 136 --color-card-foreground: var(--midground); 137 --color-primary: var(--midground); 138 --color-primary-foreground: var(--background-base); 139 --color-secondary: color-mix(in srgb, var(--midground-base) 6%, var(--background-base)); 140 --color-secondary-foreground: var(--midground); 141 --color-muted: color-mix(in srgb, var(--midground-base) 8%, var(--background-base)); 142 --color-muted-foreground: color-mix(in srgb, var(--midground-base) 55%, transparent); 143 --color-accent: color-mix(in srgb, var(--midground-base) 10%, var(--background-base)); 144 --color-accent-foreground: var(--midground); 145 --color-destructive: #fb2c36; 146 --color-destructive-foreground: #ffffff; 147 --color-success: #4ade80; 148 --color-warning: #ffbd38; 149 --color-border: color-mix(in srgb, var(--midground-base) 15%, transparent); 150 --color-input: color-mix(in srgb, var(--midground-base) 15%, transparent); 151 --color-ring: var(--midground); 152 --color-popover: color-mix(in srgb, var(--midground-base) 4%, var(--background-base)); 153 --color-popover-foreground: var(--midground); 154 155 --radius-sm: calc(var(--theme-radius) - 4px); 156 --radius-md: calc(var(--theme-radius) - 2px); 157 --radius-lg: var(--theme-radius); 158 --radius-xl: calc(var(--theme-radius) + 4px); 159 } 160 161 162 /* Toast animations used by `components/Toast.tsx`. */ 163 @keyframes toast-in { 164 from { opacity: 0; transform: translateX(16px); } 165 to { opacity: 1; transform: translateX(0); } 166 } 167 @keyframes toast-out { 168 from { opacity: 1; transform: translateX(0); } 169 to { opacity: 0; transform: translateX(16px); } 170 } 171 172 /* Generic fade + dialog entrance used by popovers and confirm dialogs. */ 173 @keyframes fade-in { 174 from { opacity: 0; } 175 to { opacity: 1; } 176 } 177 @keyframes dialog-in { 178 from { opacity: 0; transform: translateY(4px) scale(0.98); } 179 to { opacity: 1; transform: translateY(0) scale(1); } 180 } 181 182 /* Hide scrollbar utility — used by the header's overflow-x nav row. */ 183 .scrollbar-none { 184 -ms-overflow-style: none; 185 scrollbar-width: none; 186 } 187 .scrollbar-none::-webkit-scrollbar { 188 display: none; 189 } 190 191 /* Plus-lighter blend used by logos/titles for a subtle glow. */ 192 .blend-lighter { 193 mix-blend-mode: plus-lighter; 194 } 195 196 /* System UI-monospace stack — distinct from `font-courier` (Courier 197 Prime), used for dense data readouts where the display font would 198 break the grid. Routes through the theme's mono stack so themes 199 with a different monospace (JetBrains Mono, IBM Plex Mono, etc.) 200 still apply here. */ 201 .font-mono-ui { 202 font-family: var(--theme-font-mono); 203 } 204 205 /* Subtle grain overlay for badges. */ 206 .grain { 207 position: relative; 208 } 209 .grain::after { 210 content: ''; 211 position: absolute; 212 inset: 0; 213 opacity: 0.12; 214 pointer-events: none; 215 background: repeating-conic-gradient(currentColor 0% 25%, #0000 0% 50%) 0 0 / 216 2px 2px; 217 } 218 219 /* When a theme provides `assets.bg`, the backdrop's <div> renders it as 220 a CSS background; the default filler <img> is hidden to prevent 221 double-compositing. Unset → initial → empty, so the :not() selector 222 matches and the default image stays visible. */ 223 :root:not([style*="--theme-asset-bg:"]) .theme-default-filler { 224 display: block; 225 } 226 :root[style*="--theme-asset-bg:"] .theme-default-filler { 227 display: none; 228 } 229