File size: 2,826 Bytes
da21810 df698b0 da21810 df698b0 da21810 582e926 da21810 df698b0 da21810 df698b0 da21810 df698b0 da21810 df698b0 da21810 df698b0 da21810 df698b0 da21810 df698b0 da21810 df698b0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | @import "tailwindcss";
@theme {
--font-display: 'Instrument Serif', serif;
--font-body: 'Inter', sans-serif;
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-muted: hsl(var(--muted));
--color-accent: hsl(var(--accent));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
}
@layer base {
:root {
--background: 201 100% 13%;
--foreground: 0 0% 100%;
--muted-foreground: 240 4% 66%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 4%;
--secondary: 0 0% 10%;
--muted: 0 0% 10%;
--accent: 0 0% 10%;
--border: 0 0% 18%;
--input: 0 0% 18%;
/* QuantIQ Design Tokens */
--neon-cyan: #00f2fe;
--neon-violet: #a154ff;
--bull-green: #00e676;
--bear-red: #ff1744;
--bg-space: #06070d;
--bg-panel: #0d101b;
--bg-card: #111420;
--border-glass: rgba(255, 255, 255, 0.07);
--border-glow: rgba(0, 242, 254, 0.18);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #475569;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-display: 'Instrument Serif', serif;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: var(--font-body);
margin: 0;
overflow-x: hidden;
}
}
/* Liquid Glass Effect */
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Animations */
@keyframes fade-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise {
animation: fade-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-fade-rise-delay {
animation: fade-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.animate-fade-rise-delay-2 {
animation: fade-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
|