diff options
Diffstat (limited to 'app/globals.css')
| -rw-r--r-- | app/globals.css | 283 |
1 files changed, 283 insertions, 0 deletions
diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..e38984e --- /dev/null +++ b/app/globals.css @@ -0,0 +1,283 @@ +@import "tailwindcss"; +@import "tw-animate-css"; +@import "shadcn/tailwind.css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --font-heading: var(--font-geist-sans); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --color-gold: var(--gold); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); +} + +:root, +.dark { + --background: oklch(0.145 0.045 300); + --foreground: oklch(0.985 0.01 300); + --card: oklch(0.205 0.055 300 / 0.62); + --card-foreground: oklch(0.985 0.01 300); + --popover: oklch(0.2 0.05 300 / 0.92); + --popover-foreground: oklch(0.985 0.01 300); + --primary: oklch(0.72 0.2 305); + --primary-foreground: oklch(0.99 0 0); + --secondary: oklch(0.28 0.07 300); + --secondary-foreground: oklch(0.98 0.01 300); + --muted: oklch(0.26 0.06 300); + --muted-foreground: oklch(0.78 0.04 300); + --accent: oklch(0.3 0.09 320); + --accent-foreground: oklch(0.98 0.01 300); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(0.72 0.16 305 / 0.28); + --input: oklch(0.72 0.16 305 / 0.32); + --ring: oklch(0.72 0.2 305); + --gold: oklch(0.78 0.16 320); + --chart-1: oklch(0.72 0.2 305); + --chart-2: oklch(0.78 0.14 200); + --chart-3: oklch(0.7 0.2 330); + --chart-4: oklch(0.55 0.12 280); + --chart-5: oklch(0.4 0.08 300); + --radius: 0.9rem; + --sidebar: oklch(0.2 0.05 300); + --sidebar-foreground: oklch(0.985 0.01 300); + --sidebar-primary: oklch(0.72 0.2 305); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.28 0.07 300); + --sidebar-accent-foreground: oklch(0.98 0.01 300); + --sidebar-border: oklch(0.72 0.16 305 / 0.28); + --sidebar-ring: oklch(0.72 0.2 305); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + html { + @apply font-sans scroll-smooth; + } + body { + @apply bg-background text-foreground; + } + h1, + h2, + h3, + .font-heading { + font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; + letter-spacing: -0.04em; + } + h1, + h2 { + font-weight: 600; + } +} + +.grid-bg { + background-image: + linear-gradient(to right, oklch(0.72 0.2 305 / 0.08) 1px, transparent 1px), + linear-gradient(to bottom, oklch(0.72 0.2 305 / 0.08) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black, transparent); +} + +.gold-text, +.vibe-text { + background: linear-gradient( + 90deg, + #c4b5fd 0%, + #e879f9 28%, + #67e8f9 62%, + #a78bfa 100% + ); + background-size: 220% auto; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: vibe-shift 7s linear infinite; +} + +.ambient { + background: + radial-gradient( + 70% 50% at 50% -10%, + oklch(0.5 0.22 305 / 0.55), + transparent 58% + ), + radial-gradient( + 42% 40% at 90% 12%, + oklch(0.62 0.24 330 / 0.32), + transparent 60% + ), + radial-gradient( + 38% 38% at 8% 28%, + oklch(0.62 0.16 210 / 0.28), + transparent 62% + ); +} + +.orb { + position: absolute; + border-radius: 9999px; + filter: blur(72px); + opacity: 0.55; + will-change: transform; +} + +.orb-a { + width: min(42vw, 540px); + height: min(42vw, 540px); + left: 18%; + top: -8%; + background: #7c3aed; + animation: blob 18s ease-in-out infinite; +} + +.orb-b { + width: min(36vw, 460px); + height: min(36vw, 460px); + right: -6%; + top: 12%; + background: #db2777; + animation: blob 22s ease-in-out infinite reverse; +} + +.orb-c { + width: min(34vw, 420px); + height: min(34vw, 420px); + left: -8%; + bottom: 8%; + background: #22d3ee; + animation: blob 20s ease-in-out infinite 1.4s; +} + +.orb-d { + width: min(28vw, 340px); + height: min(28vw, 340px); + right: 18%; + bottom: -10%; + background: #6366f1; + animation: blob 26s ease-in-out infinite 0.6s; +} + +.noise { + position: absolute; + inset: 0; + opacity: 0.045; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + pointer-events: none; +} + +.glass { + background: oklch(0.24 0.06 300 / 0.45); + backdrop-filter: blur(18px); + border: 1px solid oklch(1 0 0 / 0.1); +} + +.vibe-btn { + background-image: linear-gradient( + 135deg, + #c084fc 0%, + #a78bfa 40%, + #818cf8 72%, + #22d3ee 100% + ); + color: white; + box-shadow: + 0 0 28px oklch(0.7 0.2 305 / 0.45), + 0 10px 28px oklch(0.2 0.08 300 / 0.35); +} + +.vibe-btn:hover { + filter: brightness(1.08); +} + +@keyframes vibe-shift { + to { + background-position: 220% center; + } +} + +@keyframes blob { + 0%, + 100% { + transform: translate(0, 0) scale(1); + } + 33% { + transform: translate(4%, -6%) scale(1.12); + } + 66% { + transform: translate(-5%, 4%) scale(0.92); + } +} + +@keyframes pulse-node { + 0%, + 100% { + opacity: 0.45; + } + 50% { + opacity: 1; + } +} + +.pulse-node { + animation: pulse-node 3.2s ease-in-out infinite; +} + +.pulse-node-2 { + animation: pulse-node 4s ease-in-out infinite 0.6s; +} + +.pulse-node-3 { + animation: pulse-node 3.6s ease-in-out infinite 1.2s; +} + +@keyframes marquee { + from { + transform: translateX(0); + } + to { + transform: translateX(-50%); + } +} + +.marquee-track { + animation: marquee 42s linear infinite; +} |