Spaces:
Running
Running
File size: 5,660 Bytes
2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b 5c4720b 2d01d7b | 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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | @tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html { scroll-behavior: smooth; }
body {
font-feature-settings: "cv11", "ss01";
background-color: #000;
color: #fafafa;
overflow-x: hidden;
}
::selection { background: #fafafa; color: #000000; }
/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2b2b2b, #1f1f1f);
border-radius: 6px;
border: 2px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
}
@layer components {
.btn {
@apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium uppercase tracking-wider transition-all border;
}
.btn-primary {
@apply btn bg-bone-50 text-ink-950 border-bone-50 hover:bg-bone-200 hover:border-bone-200 hover:shadow-[0_8px_30px_rgba(250,250,250,0.15)] hover:-translate-y-0.5;
}
.btn-ghost {
@apply btn bg-transparent text-bone-50 border-bone-400 hover:border-bone-50 hover:bg-bone-50/5;
}
.card {
@apply border border-bone-400/30 bg-ink-900/60 backdrop-blur-sm rounded-md;
}
.card-glow {
@apply relative border border-bone-400/30 bg-ink-900/60 backdrop-blur-sm rounded-md;
background-image:
linear-gradient(rgba(10,10,10,0.6), rgba(10,10,10,0.6)),
radial-gradient(800px circle at var(--mx,50%) var(--my,0%), rgba(250,250,250,0.06), transparent 40%);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px -40px rgba(0,0,0,0.8);
transition: border-color 300ms ease, transform 500ms ease, box-shadow 500ms ease;
}
.card-glow:hover {
border-color: rgba(250,250,250,0.35);
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 40px 80px -40px rgba(0,0,0,0.9),
0 0 0 1px rgba(250,250,250,0.06);
}
.hairline { @apply border-bone-400/30; }
.pill {
@apply inline-block px-2 py-0.5 text-[10px] uppercase tracking-widest border rounded-full;
}
/* Reasoning panel hover — fix: when hovered we now darken text so it stays readable
against a lighter background, AND we keep the dark theme readable too. */
.reasoning-box .reasoning-text {
color: #cfcfcf; /* default on dark */
}
.reasoning-box:hover {
background-color: #fafafa;
border-color: #fafafa;
}
.reasoning-box:hover .reasoning-text,
.reasoning-box:hover .text-bone-400 {
color: #000000 !important; /* dark black on white */
}
/* Table row hover — keep text readable on light hover */
.row-hover:hover:not(.bg-bone-50) {
background-color: rgba(255,255,255,0.04);
}
.custom-scroll::-webkit-scrollbar { width: 8px; }
}
/* ───── Animated decorative backgrounds ───────────────────────────── */
.bg-aurora {
position: fixed;
inset: -20%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(40% 30% at 20% 20%, rgba(120,140,180,0.18), transparent 60%),
radial-gradient(35% 25% at 80% 30%, rgba(180,120,160,0.14), transparent 60%),
radial-gradient(40% 30% at 60% 80%, rgba(120,180,160,0.12), transparent 60%);
filter: blur(40px);
animation: aurora-shift 18s ease-in-out infinite alternate;
}
@keyframes aurora-shift {
0% { transform: translate3d(-2%, -1%, 0) scale(1); }
50% { transform: translate3d(2%, 1%, 0) scale(1.05); }
100% { transform: translate3d(-1%, 2%, 0) scale(1); }
}
.bg-grid {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 80%);
animation: grid-pan 30s linear infinite;
}
@keyframes grid-pan {
to { background-position: 56px 56px; }
}
.bg-spotlight {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
transition: background 200ms ease-out;
}
.bg-noise {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}
/* Reveal on scroll */
.reveal {
opacity: 0;
transform: translateY(24px) perspective(800px) rotateX(2deg);
transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.reveal-in {
opacity: 1;
transform: translateY(0) perspective(800px) rotateX(0);
}
/* Slow bounce for the exclamation mark */
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-bounce-slow { animation: bounce-slow 2.4s ease-in-out infinite; display: inline-block; }
/* Subtle floating animation utility */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.animate-float { animation: float 5s ease-in-out infinite; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.bg-aurora, .bg-grid, .animate-bounce-slow, .animate-float, .animate-pulse, .animate-spin {
animation: none !important;
}
.reveal { opacity: 1; transform: none; }
}
|