globals.css
3,920 bytes
| 1 | @tailwind base; |
|---|---|
| 2 | @tailwind components; |
| 3 | @tailwind utilities; |
| 4 | |
| 5 | @layer base { |
| 6 | :root { |
| 7 | --background: 228 33% 98%; |
| 8 | --foreground: 231 28% 13%; |
| 9 | |
| 10 | --card: 0 0% 100%; |
| 11 | --card-foreground: 231 28% 13%; |
| 12 | --popover: 0 0% 100%; |
| 13 | --popover-foreground: 231 28% 13%; |
| 14 | |
| 15 | --primary: 235 78% 58%; |
| 16 | --primary-foreground: 0 0% 100%; |
| 17 | --secondary: 230 24% 94%; |
| 18 | --secondary-foreground: 231 28% 16%; |
| 19 | --muted: 225 20% 95%; |
| 20 | --muted-foreground: 226 11% 43%; |
| 21 | --accent: 235 70% 95%; |
| 22 | --accent-foreground: 235 70% 38%; |
| 23 | --destructive: 0 72% 51%; |
| 24 | --destructive-foreground: 0 0% 100%; |
| 25 | |
| 26 | --border: 228 20% 88%; |
| 27 | --input: 228 18% 84%; |
| 28 | --ring: 235 78% 58%; |
| 29 | --radius: 0.9rem; |
| 30 | |
| 31 | --stage-answer: 215 91% 58%; |
| 32 | --stage-critique: 23 91% 58%; |
| 33 | --stage-revision: 276 70% 57%; |
| 34 | --stage-synthesis: 157 64% 39%; |
| 35 | } |
| 36 | |
| 37 | .dark { |
| 38 | --background: 230 28% 8%; |
| 39 | --foreground: 225 30% 96%; |
| 40 | |
| 41 | --card: 230 25% 11%; |
| 42 | --card-foreground: 225 30% 96%; |
| 43 | --popover: 230 25% 10%; |
| 44 | --popover-foreground: 225 30% 96%; |
| 45 | |
| 46 | --primary: 234 86% 69%; |
| 47 | --primary-foreground: 230 28% 8%; |
| 48 | --secondary: 229 20% 18%; |
| 49 | --secondary-foreground: 225 30% 96%; |
| 50 | --muted: 229 20% 16%; |
| 51 | --muted-foreground: 225 14% 65%; |
| 52 | --accent: 234 38% 22%; |
| 53 | --accent-foreground: 234 90% 86%; |
| 54 | --destructive: 0 63% 50%; |
| 55 | --destructive-foreground: 0 0% 100%; |
| 56 | |
| 57 | --border: 229 19% 21%; |
| 58 | --input: 229 19% 24%; |
| 59 | --ring: 234 86% 69%; |
| 60 | |
| 61 | --stage-answer: 215 91% 66%; |
| 62 | --stage-critique: 23 91% 64%; |
| 63 | --stage-revision: 276 74% 70%; |
| 64 | --stage-synthesis: 157 62% 49%; |
| 65 | } |
| 66 | } |
| 67 | |
| 68 | @layer base { |
| 69 | * { |
| 70 | @apply border-border; |
| 71 | } |
| 72 | body { |
| 73 | @apply bg-background text-foreground; |
| 74 | font-feature-settings: |
| 75 | 'rlig' 1, |
| 76 | 'calt' 1; |
| 77 | -webkit-font-smoothing: antialiased; |
| 78 | } |
| 79 | ::selection { |
| 80 | background: hsl(var(--primary) / 0.2); |
| 81 | } |
| 82 | /* Thin, unobtrusive scrollbars for the dense debate panels. */ |
| 83 | .scrollbar-thin { |
| 84 | scrollbar-width: thin; |
| 85 | scrollbar-color: hsl(var(--border)) transparent; |
| 86 | } |
| 87 | .scrollbar-thin::-webkit-scrollbar { |
| 88 | width: 8px; |
| 89 | height: 8px; |
| 90 | } |
| 91 | .scrollbar-thin::-webkit-scrollbar-thumb { |
| 92 | background-color: hsl(var(--border)); |
| 93 | border-radius: 9999px; |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | @layer utilities { |
| 98 | /* Subtle streaming caret shown while a model is typing. */ |
| 99 | .streaming-caret::after { |
| 100 | content: '▍'; |
| 101 | @apply ml-0.5 inline-block animate-pulse-subtle text-primary; |
| 102 | } |
| 103 | .prose-debate { |
| 104 | @apply text-sm leading-relaxed text-foreground/90; |
| 105 | } |
| 106 | .prose-debate p { |
| 107 | @apply mb-2; |
| 108 | } |
| 109 | .bg-grid { |
| 110 | background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px); |
| 111 | background-size: 22px 22px; |
| 112 | } |
| 113 | .decision-grid { |
| 114 | background-image: linear-gradient(hsl(var(--border) / 0.5) 1px, transparent 1px), |
| 115 | linear-gradient(90deg, hsl(var(--border) / 0.5) 1px, transparent 1px); |
| 116 | background-size: 44px 44px; |
| 117 | } |
| 118 | /* Fine film grain for atmospheric depth. */ |
| 119 | .bg-grain { |
| 120 | background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); |
| 121 | background-size: 140px 140px; |
| 122 | } |
| 123 | .animate-drift { |
| 124 | animation: drift 22s ease-in-out infinite; |
| 125 | } |
| 126 | /* Staggered load-in reveal for the hero. */ |
| 127 | .reveal { |
| 128 | animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; |
| 129 | } |
| 130 | } |
| 131 | |
| 132 | @keyframes drift { |
| 133 | 0%, |
| 134 | 100% { |
| 135 | transform: translate3d(0, 0, 0) scale(1); |
| 136 | } |
| 137 | 50% { |
| 138 | transform: translate3d(2%, -3%, 0) scale(1.09); |
| 139 | } |
| 140 | } |
| 141 | |
| 142 | @keyframes reveal-up { |
| 143 | from { |
| 144 | opacity: 0; |
| 145 | transform: translateY(14px); |
| 146 | } |
| 147 | to { |
| 148 | opacity: 1; |
| 149 | transform: translateY(0); |
| 150 | } |
| 151 | } |
| 152 | |
| 153 | @media (prefers-reduced-motion: reduce) { |
| 154 | .animate-drift, |
| 155 | .reveal { |
| 156 | animation: none !important; |
| 157 | } |
| 158 | } |
| 159 | |