spb/vquant Public MIT
VibeQuant — AI-powered institutional-grade financial intelligence platform.
TypeScript 84.3%
Python 11.7%
JavaScript 1.6%
CSS 1.5%
HTML 0.7%
1/*2 * =============================================================================3 * VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 * File: client/src/index.css6 *7 * Author: Simon-Pierre Boucher8 * Contact: contact@spboucher.ai9 * Website: https://www.spboucher.ai10 * Demo: https://www.vquant.ai11 * License: MIT (see LICENSE)12 *13 * Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');18@tailwind base;19@tailwind components;20@tailwind utilities;212223/* LIGHT MODE */24:root {25 --button-outline: rgba(0,0,0, .10);26 --badge-outline: rgba(0,0,0, .05);2728 /* Automatic computation of border around primary / danger buttons */29 --opaque-button-border-intensity: -8; /* In terms of percentages */3031 /* Backgrounds applied on top of other backgrounds when hovered/active */32 --elevate-1: rgba(0,0,0, .03);33 --elevate-2: rgba(0,0,0, .08);3435 --background: 210 20% 98%;3637 --foreground: 222 47% 11%;3839 --border: 214 20% 88%;4041 --card: 0 0% 100%;4243 --card-foreground: 222 47% 11%;4445 --card-border: 214 20% 92%;4647 --sidebar: 210 25% 95%;4849 --sidebar-foreground: 222 47% 11%;5051 --sidebar-border: 214 20% 86%;5253 --sidebar-primary: 250 84% 60%;5455 --sidebar-primary-foreground: 210 20% 98%;5657 --sidebar-accent: 210 25% 90%;5859 --sidebar-accent-foreground: 222 47% 11%;6061 --sidebar-ring: 250 84% 60%;6263 --popover: 210 25% 93%;6465 --popover-foreground: 222 47% 11%;6667 --popover-border: 214 20% 84%;6869 --primary: 250 84% 60%;7071 --primary-foreground: 210 20% 98%;7273 --secondary: 210 25% 88%;7475 --secondary-foreground: 222 47% 11%;7677 --muted: 215 16% 90%;7879 --muted-foreground: 215 14% 45%;8081 --accent: 210 20% 92%;8283 --accent-foreground: 222 47% 11%;8485 --destructive: 0 84% 50%;8687 --destructive-foreground: 0 0% 98%;8889 --success: 142 76% 36%;9091 --success-foreground: 210 20% 98%;9293 --warning: 38 92% 50%;9495 --warning-foreground: 222 47% 11%;9697 --info: 199 89% 48%;9899 --info-foreground: 210 20% 98%;100101 --input: 214 20% 75%;102 --ring: 250 84% 60%;103 --chart-1: 210 100% 45%;104 --chart-2: 142 76% 36%;105 --chart-3: 199 89% 48%;106 --chart-4: 38 92% 50%;107 --chart-5: 200 90% 50%;108109 --font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;110 --font-display: Inter, -apple-system, BlinkMacSystemFont, sans-serif;111 --font-serif: Georgia, serif;112 --font-mono: JetBrains Mono, Menlo, monospace;113 --radius: 0.9rem;114 --shadow-2xs: 0px 1px 2px 0px hsl(222 15% 8% / 0.05);115 --shadow-xs: 0px 1px 3px 0px hsl(222 15% 8% / 0.08);116 --shadow-sm: 0px 2px 4px -1px hsl(222 15% 8% / 0.06), 0px 1px 2px -1px hsl(222 15% 8% / 0.08);117 --shadow: 0px 4px 6px -1px hsl(222 15% 8% / 0.08), 0px 2px 4px -2px hsl(222 15% 8% / 0.06);118 --shadow-md: 0px 6px 12px -2px hsl(222 15% 8% / 0.12), 0px 3px 7px -3px hsl(222 15% 8% / 0.08);119 --shadow-lg: 0px 12px 24px -4px hsl(222 15% 8% / 0.18), 0px 6px 12px -4px hsl(222 15% 8% / 0.12);120 --shadow-xl: 0px 24px 40px -8px hsl(222 15% 8% / 0.24), 0px 10px 20px -6px hsl(222 15% 8% / 0.16);121 --shadow-2xl: 0px 32px 64px -12px hsl(222 15% 8% / 0.30);122 --tracking-normal: 0em;123 --spacing: 0.25rem;124125 /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */126127 /* Fallback for older browsers */128 --sidebar-primary-border: hsl(var(--sidebar-primary));129 --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);130131 /* Fallback for older browsers */132 --sidebar-accent-border: hsl(var(--sidebar-accent));133 --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);134135 /* Fallback for older browsers */136 --primary-border: hsl(var(--primary));137 --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);138139 /* Fallback for older browsers */140 --secondary-border: hsl(var(--secondary));141 --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);142143 /* Fallback for older browsers */144 --muted-border: hsl(var(--muted));145 --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);146147 /* Fallback for older browsers */148 --accent-border: hsl(var(--accent));149 --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);150151 /* Fallback for older browsers */152 --destructive-border: hsl(var(--destructive));153 --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);154}155156.dark {157 --button-outline: rgba(255,255,255, .10);158 --badge-outline: rgba(255,255,255, .05);159160 --opaque-button-border-intensity: 9; /* In terms of percentages */161162 /* Backgrounds applied on top of other backgrounds when hovered/active */163 --elevate-1: rgba(255,255,255, .04);164 --elevate-2: rgba(255,255,255, .09);165166 --background: 222 15% 8%;167168 --foreground: 210 20% 98%;169170 --border: 217 19% 20%;171172 --card: 222 15% 11%;173174 --card-foreground: 210 20% 98%;175176 --card-border: 217 19% 24%;177178 --sidebar: 222 15% 15%;179180 --sidebar-foreground: 210 20% 98%;181182 --sidebar-border: 217 19% 28%;183184 --sidebar-primary: 250 84% 66%;185186 --sidebar-primary-foreground: 210 20% 98%;187188 --sidebar-accent: 222 15% 18%;189190 --sidebar-accent-foreground: 210 20% 98%;191192 --sidebar-ring: 250 84% 66%;193194 --popover: 222 15% 18%;195196 --popover-foreground: 210 20% 98%;197198 --popover-border: 217 19% 32%;199200 --primary: 250 84% 60%;201202 --primary-foreground: 210 20% 98%;203204 --secondary: 222 15% 22%;205206 --secondary-foreground: 210 20% 98%;207208 --muted: 217 19% 20%;209210 --muted-foreground: 215 16% 65%;211212 --accent: 222 12% 20%;213214 --accent-foreground: 210 20% 98%;215216 --destructive: 0 84% 60%;217218 --destructive-foreground: 210 20% 98%;219220 --success: 142 76% 55%;221222 --success-foreground: 210 20% 98%;223224 --warning: 38 92% 65%;225226 --warning-foreground: 222 15% 8%;227228 --info: 199 89% 60%;229230 --info-foreground: 210 20% 98%;231232 --input: 217 19% 35%;233 --ring: 250 84% 66%;234 --chart-1: 210 100% 65%;235 --chart-2: 142 76% 55%;236 --chart-3: 199 89% 60%;237 --chart-4: 38 92% 65%;238 --chart-5: 200 90% 65%;239240 --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.25);241 --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.30);242 --shadow-sm: 0px 2px 4px -1px hsl(0 0% 0% / 0.28), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);243 --shadow: 0px 4px 6px -1px hsl(0 0% 0% / 0.35), 0px 2px 4px -2px hsl(0 0% 0% / 0.30);244 --shadow-md: 0px 6px 12px -2px hsl(0 0% 0% / 0.40), 0px 3px 7px -3px hsl(0 0% 0% / 0.35);245 --shadow-lg: 0px 12px 28px -4px hsl(0 0% 0% / 0.48), 0px 6px 14px -4px hsl(0 0% 0% / 0.40);246 --shadow-xl: 0px 24px 48px -8px hsl(0 0% 0% / 0.56), 0px 12px 24px -6px hsl(0 0% 0% / 0.48);247 --shadow-2xl: 0px 36px 72px -12px hsl(0 0% 0% / 0.64);248249 /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */250 --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);251 --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);252 --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);253 --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);254 --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);255 --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);256 --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);257}258259@layer base {260 * {261 @apply border-border;262 }263264 body {265 @apply font-sans antialiased bg-background text-foreground;266 background-image:267 radial-gradient(1100px 520px at 100% -8%, hsl(var(--primary) / 0.06), transparent 60%),268 radial-gradient(900px 480px at 0% 0%, hsl(var(--info) / 0.05), transparent 55%);269 background-attachment: fixed;270 }271}272273/**274 * Using the elevate system.275 * Automatic contrast adjustment.276 *277 * <element className="hover-elevate" />278 * <element className="active-elevate-2" />279 *280 * // Using the tailwind utility when a data attribute is "on"281 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />282 * // Or manually controlling the toggle state283 * <element className="toggle-elevate toggle-elevated" />284 *285 * Elevation systems have to handle many states.286 * - not-hovered, vs. hovered vs. active (three mutually exclusive states)287 * - toggled or not288 * - focused or not (this is not handled with these utilities)289 *290 * Even without handling focused or not, this is six possible combinations that291 * need to be distinguished from eachother visually.292 */293@layer utilities {294295 /* Hide ugly search cancel button in Chrome until we can style it properly */296 input[type="search"]::-webkit-search-cancel-button {297 @apply hidden;298 }299300 /* Placeholder styling for contentEditable div */301 [contenteditable][data-placeholder]:empty::before {302 content: attr(data-placeholder);303 color: hsl(var(--muted-foreground));304 pointer-events: none;305 }306307 /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of308 * buttons/badges can remove the automatic brightness adjustment on interactions309 * and program their own. */310 .no-default-hover-elevate {}311312 .no-default-active-elevate {}313314315 /**316 * Toggleable backgrounds go behind the content. Hoverable/active goes on top.317 * This way they can stack/compound. Both will overlap the parent's borders!318 * So borders will be automatically adjusted both on toggle, and hover/active,319 * and they will be compounded.320 */321 .toggle-elevate::before,322 .toggle-elevate-2::before {323 content: "";324 pointer-events: none;325 position: absolute;326 inset: 0px;327 /*border-radius: inherit; match rounded corners */328 border-radius: inherit;329 z-index: -1;330 /* sits behind content but above backdrop */331 }332333 .toggle-elevate.toggle-elevated::before {334 background-color: var(--elevate-2);335 }336337 /* If there's a 1px border, adjust the inset so that it covers that parent's border */338 .border.toggle-elevate::before {339 inset: -1px;340 }341342 /* Does not work on elements with overflow:hidden! */343 .hover-elevate:not(.no-default-hover-elevate),344 .active-elevate:not(.no-default-active-elevate),345 .hover-elevate-2:not(.no-default-hover-elevate),346 .active-elevate-2:not(.no-default-active-elevate) {347 position: relative;348 z-index: 0;349 }350351 .hover-elevate:not(.no-default-hover-elevate)::after,352 .active-elevate:not(.no-default-active-elevate)::after,353 .hover-elevate-2:not(.no-default-hover-elevate)::after,354 .active-elevate-2:not(.no-default-active-elevate)::after {355 content: "";356 pointer-events: none;357 position: absolute;358 inset: 0px;359 /*border-radius: inherit; match rounded corners */360 border-radius: inherit;361 z-index: 999;362 /* sits in front of content */363 }364365 .hover-elevate:hover:not(.no-default-hover-elevate)::after,366 .active-elevate:active:not(.no-default-active-elevate)::after {367 background-color: var(--elevate-1);368 }369370 .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,371 .active-elevate-2:active:not(.no-default-active-elevate)::after {372 background-color: var(--elevate-2);373 }374375 /* If there's a 1px border, adjust the inset so that it covers that parent's border */376 .border.hover-elevate:not(.no-hover-interaction-elevate)::after,377 .border.active-elevate:not(.no-active-interaction-elevate)::after,378 .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,379 .border.active-elevate-2:not(.no-active-interaction-elevate)::after,380 .border.hover-elevate:not(.no-hover-interaction-elevate)::after {381 inset: -1px;382 }383384 @keyframes fade-in {385 from {386 opacity: 0;387 transform: translateY(10px);388 }389 to {390 opacity: 1;391 transform: translateY(0);392 }393 }394395 .animate-fade-in {396 animation: fade-in 0.6s ease-out;397 }398399 /* Glass effect */400 .glass {401 background: hsl(var(--card) / 0.95);402 border: 1px solid hsl(var(--border));403 }404405 /* Premium card effect */406 .card-premium {407 background: hsl(var(--card));408 border: 1px solid hsl(var(--border));409 transition: border-color 0.2s ease, box-shadow 0.2s ease;410 }411412 .card-premium:hover {413 border-color: hsl(var(--primary) / 0.4);414 box-shadow: var(--shadow-md);415 }416}417418/* ── Modern polish: thin rounded scrollbars + selection ── */419* {420 scrollbar-width: thin;421 scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;422}423*::-webkit-scrollbar { width: 10px; height: 10px; }424*::-webkit-scrollbar-track { background: transparent; }425*::-webkit-scrollbar-thumb {426 background: hsl(var(--muted-foreground) / 0.28);427 border-radius: 9999px;428 border: 2px solid transparent;429 background-clip: content-box;430}431*::-webkit-scrollbar-thumb:hover {432 background: hsl(var(--muted-foreground) / 0.45);433 background-clip: content-box;434}435::selection { background: hsl(var(--primary) / 0.22); }436437/* ════════════════ VQuant × hot-sunset reskin (vcrawl-inspired) ════════════════ */438/* Unlayered + appended last → overrides the earlier token blocks. */439:root {440 --background: 40 30% 97%;441 --foreground: 24 14% 10%;442 --border: 36 22% 86%;443 --input: 36 20% 80%;444 --card: 0 0% 100%;445 --card-foreground: 24 14% 10%;446 --card-border: 36 22% 89%;447 --popover: 0 0% 100%;448 --popover-foreground: 24 14% 10%;449 --popover-border: 36 22% 86%;450 --primary: 14 100% 52%;451 --primary-foreground: 0 0% 100%;452 --secondary: 38 26% 92%;453 --secondary-foreground: 24 14% 12%;454 --muted: 38 26% 93%;455 --muted-foreground: 28 8% 42%;456 --accent: 38 30% 91%;457 --accent-foreground: 24 14% 12%;458 --warning: 34 100% 50%;459 --warning-foreground: 24 14% 10%;460 --ring: 14 100% 52%;461 --sidebar: 40 28% 95%;462 --sidebar-foreground: 24 14% 12%;463 --sidebar-border: 36 22% 86%;464 --sidebar-primary: 14 100% 52%;465 --sidebar-primary-foreground: 0 0% 100%;466 --sidebar-accent: 38 26% 90%;467 --sidebar-accent-foreground: 24 14% 12%;468 --sidebar-ring: 14 100% 52%;469 --chart-1: 14 100% 55%;470 --chart-2: 34 100% 55%;471 --chart-3: 338 90% 58%;472 --chart-4: 158 64% 42%;473 --chart-5: 199 89% 48%;474}475.dark {476 --background: 240 22% 5%;477 --foreground: 240 20% 98%;478 --border: 240 14% 16%;479 --input: 240 14% 20%;480 --card: 240 21% 9%;481 --card-foreground: 240 20% 98%;482 --card-border: 240 14% 18%;483 --popover: 240 18% 12%;484 --popover-foreground: 240 20% 98%;485 --popover-border: 240 14% 20%;486 --primary: 14 100% 56%;487 --primary-foreground: 0 0% 100%;488 --secondary: 240 16% 13%;489 --secondary-foreground: 240 20% 98%;490 --muted: 240 14% 16%;491 --muted-foreground: 230 14% 62%;492 --accent: 240 16% 16%;493 --accent-foreground: 240 20% 98%;494 --warning: 34 100% 60%;495 --warning-foreground: 240 22% 6%;496 --ring: 14 100% 56%;497 --sidebar: 240 22% 7%;498 --sidebar-foreground: 240 20% 98%;499 --sidebar-border: 240 14% 16%;500 --sidebar-primary: 14 100% 56%;501 --sidebar-primary-foreground: 0 0% 100%;502 --sidebar-accent: 240 16% 14%;503 --sidebar-accent-foreground: 240 20% 98%;504 --sidebar-ring: 14 100% 56%;505 --chart-1: 14 100% 60%;506 --chart-2: 34 100% 60%;507 --chart-3: 338 100% 66%;508 --chart-4: 158 64% 50%;509 --chart-5: 199 89% 62%;510}511512body {513 background-image:514 radial-gradient(72% 55% at 50% -8%, hsl(var(--primary) / 0.16), transparent 70%),515 radial-gradient(42% 42% at 100% 0%, hsl(338 100% 60% / 0.08), transparent 60%);516 background-attachment: fixed;517}518519/* ── hot-sunset wow utilities ── */520.bg-hot { background-image: linear-gradient(120deg, #ff9f1c 0%, #ff4d1c 46%, #ff2d78 100%); }521.gradient-text {522 background-image: linear-gradient(120deg, #ff9f1c 0%, #ff4d1c 46%, #ff2d78 100%);523 -webkit-background-clip: text; background-clip: text; color: transparent;524}525.shadow-hot { box-shadow: 0 8px 30px -6px rgba(255,77,28,0.55); }526.glow-ring { box-shadow: 0 0 0 1px hsl(var(--primary) / 0.35), 0 14px 48px -12px hsl(var(--primary) / 0.5); }527.bg-grid {528 background-image:529 linear-gradient(hsl(var(--primary) / 0.12) 1px, transparent 1px),530 linear-gradient(90deg, hsl(var(--primary) / 0.12) 1px, transparent 1px);531 background-size: 44px 44px;532}533.hero-mask {534 -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, black, transparent 75%);535 mask-image: radial-gradient(60% 60% at 50% 30%, black, transparent 75%);536}537@keyframes vq-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }538.animate-float { animation: vq-float 4s ease-in-out infinite; }539@keyframes vq-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,77,28,0.45); } 70% { box-shadow: 0 0 0 10px rgba(255,77,28,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,28,0); } }540.animate-pulse-ring { animation: vq-pulse-ring 2.2s infinite; }541542