f8369a0e9b
Same bug as cuidecar/cccb43a: \`overscroll-behavior: none\` applied to
the universal selector killed wheel events on every overflow:hidden
container on the page — hero, demo-dashboard, cta, surfaces, anything
with rounded cards. Combined with the mesh-stream overflow-y-auto
(fixed in 701516b) this was double-trapping the wheel.
Move the rule from \`*\` to \`html\`, change to \`overscroll-behavior-y\`.
Still prevents rubber-band chaining at the document level, but lets
wheel events propagate naturally through nested overflow containers.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
132 lines
2.4 KiB
CSS
132 lines
2.4 KiB
CSS
@import "tw-animate-css";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@theme inline {
|
|
--animate-marquee: marquee var(--duration) infinite linear;
|
|
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
|
|
--animate-fade-in: fade-in 1s var(--animation-delay, 0s) ease forwards;
|
|
--animate-fade-up: fade-up 1s var(--animation-delay, 0s) ease forwards;
|
|
--animate-image-glow: image-glow 4.1s ease-out 1s forwards;
|
|
--animate-pulse-ring: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
--animate-voice-bars: voice-bars 0.5s ease-in-out infinite;
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(calc(-100% - var(--gap)));
|
|
}
|
|
}
|
|
@keyframes marquee-vertical {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
transform: translateY(calc(-100% - var(--gap)));
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
translate: 0 -10px;
|
|
filter: blur(4px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
@keyframes fade-up {
|
|
0% {
|
|
opacity: 0;
|
|
translate: 0 20px;
|
|
filter: blur(4px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
@keyframes image-glow {
|
|
0% {
|
|
opacity: 0;
|
|
animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
|
|
}
|
|
10% {
|
|
opacity: 0.7;
|
|
animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
|
|
}
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes voice-bars {
|
|
0%, 100% {
|
|
transform: scaleY(0.3);
|
|
}
|
|
50% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-primary text-background;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
@apply h-2 w-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-muted/30;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-muted-foreground/20 rounded-lg;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-muted-foreground/40;
|
|
}
|
|
}
|
|
|
|
@utility container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-inline: auto;
|
|
padding-inline: 2rem;
|
|
|
|
@variant 2xl {
|
|
max-width: 1400px;
|
|
}
|
|
}
|