| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| |
| |
| |
| @layer base { |
| :root { |
| color-scheme: dark; |
| } |
|
|
| html, |
| body { |
| background: #06070a; |
| color: #f5f3ec; |
| font-family: var(--font-manrope), system-ui, -apple-system, sans-serif; |
| font-size: 15px; |
| line-height: 1.6; |
| font-weight: 400; |
| font-feature-settings: "ss01", "cv11", "calt"; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| body { |
| |
| background: |
| radial-gradient(1100px 700px at 78% -10%, rgba(255, 181, 69, 0.12), transparent 65%), |
| radial-gradient(900px 800px at 8% 110%, rgba(98, 70, 255, 0.10), transparent 60%), |
| radial-gradient(1400px 900px at 50% 50%, rgba(20, 24, 40, 0.6), transparent 70%), |
| #06070a; |
| background-attachment: fixed; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
|
|
| |
| body::before { |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| z-index: 0; |
| background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); |
| opacity: 0.65; |
| mix-blend-mode: overlay; |
| } |
|
|
| ::selection { |
| background: rgba(255, 181, 69, 0.32); |
| color: #fff8e7; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
| ::-webkit-scrollbar-thumb { |
| background-color: rgba(255, 255, 255, 0.08); |
| border-radius: 9999px; |
| border: 2px solid transparent; |
| background-clip: content-box; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background-color: rgba(255, 255, 255, 0.16); |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| |
| :focus-visible { |
| outline: 2px solid rgba(255, 181, 69, 0.75); |
| outline-offset: 2px; |
| border-radius: 4px; |
| } |
| button:focus-visible, |
| a:focus-visible, |
| input:focus-visible, |
| textarea:focus-visible { |
| outline-offset: 3px; |
| } |
|
|
| |
| h1, |
| h2, |
| h3, |
| h4 { |
| letter-spacing: -0.02em; |
| } |
| } |
|
|
| |
| |
| |
| @layer components { |
| |
| .glass { |
| background: rgba(255, 255, 255, 0.04); |
| box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, |
| 0 0 0 1px rgba(255, 255, 255, 0.08), |
| 0 16px 40px -16px rgba(0, 0, 0, 0.6); |
| backdrop-filter: blur(16px) saturate(140%); |
| -webkit-backdrop-filter: blur(16px) saturate(140%); |
| } |
|
|
| .glass-strong { |
| background: rgba(255, 255, 255, 0.06); |
| box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, |
| 0 0 0 1px rgba(255, 255, 255, 0.14), |
| 0 28px 80px -24px rgba(0, 0, 0, 0.7); |
| backdrop-filter: blur(20px) saturate(160%); |
| -webkit-backdrop-filter: blur(20px) saturate(160%); |
| } |
|
|
| .glass-elev { |
| background: linear-gradient( |
| 180deg, |
| rgba(255, 255, 255, 0.06) 0%, |
| rgba(255, 255, 255, 0.02) 100% |
| ); |
| box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, |
| 0 0 0 1px rgba(255, 255, 255, 0.10), |
| 0 32px 80px -24px rgba(0, 0, 0, 0.7); |
| } |
|
|
| |
| .btn-primary { |
| @apply inline-flex items-center justify-center |
| px-5 py-2.5 rounded-pill |
| text-body-strong text-canvas |
| bg-amber |
| transition-all duration-200 ease-atelier |
| active:scale-[0.97] |
| disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100 |
| hover:bg-amber-soft hover:shadow-amber; |
| } |
|
|
| .btn-secondary { |
| @apply inline-flex items-center justify-center |
| px-5 py-2.5 rounded-pill |
| text-body text-ink |
| bg-glass |
| transition-all duration-200 ease-atelier |
| active:scale-[0.97] |
| hover:bg-glass-stronger; |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); |
| } |
|
|
| .btn-ghost { |
| @apply inline-flex items-center justify-center |
| px-3 py-1.5 rounded-md |
| text-caption text-ink-70 |
| transition-colors duration-200 |
| hover:text-ink hover:bg-glass; |
| } |
|
|
| .btn-danger { |
| @apply inline-flex items-center justify-center |
| px-5 py-2.5 rounded-pill |
| text-body-strong text-status-err |
| transition-colors duration-200 |
| hover:bg-status-err-glow; |
| box-shadow: 0 0 0 1px rgba(255, 122, 122, 0.4); |
| } |
|
|
| |
| .input-glass { |
| @apply w-full bg-glass text-ink |
| rounded-md px-4 py-3 |
| text-body |
| outline-none |
| transition-all duration-200; |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); |
| } |
| .input-glass:focus { |
| background: rgba(255, 255, 255, 0.07); |
| box-shadow: 0 0 0 1px rgba(255, 181, 69, 0.55), |
| 0 0 24px -6px rgba(255, 181, 69, 0.35); |
| } |
| .input-glass::placeholder { |
| color: rgba(245, 243, 236, 0.36); |
| } |
|
|
| |
| .card { |
| @apply rounded-lg p-6 glass; |
| } |
|
|
| |
| .serif-italic { |
| font-family: var(--font-instrument), ui-serif, Georgia, serif; |
| font-style: italic; |
| font-weight: 400; |
| letter-spacing: -0.01em; |
| } |
|
|
| |
| .container-app { |
| @apply max-w-[1480px] mx-auto px-6 md:px-10; |
| } |
| .container-narrow { |
| @apply max-w-[920px] mx-auto px-6 md:px-10; |
| } |
| .container-prose { |
| @apply max-w-[760px] mx-auto px-6 md:px-10; |
| } |
|
|
| |
| .chat-bubble-user { |
| @apply rounded-2xl rounded-tr-sm px-5 py-3 text-body text-ink; |
| background: linear-gradient( |
| 135deg, |
| rgba(255, 181, 69, 0.16) 0%, |
| rgba(255, 181, 69, 0.08) 100% |
| ); |
| box-shadow: 0 0 0 1px rgba(255, 181, 69, 0.22), |
| 0 8px 24px -8px rgba(255, 181, 69, 0.18); |
| } |
|
|
| .chat-bubble-assistant { |
| @apply rounded-2xl rounded-tl-sm px-5 py-4 text-body text-ink; |
| background: linear-gradient( |
| 180deg, |
| rgba(255, 255, 255, 0.05) 0%, |
| rgba(255, 255, 255, 0.025) 100% |
| ); |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), |
| 0 16px 48px -16px rgba(0, 0, 0, 0.5); |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| } |
|
|
| |
| .hairline { |
| height: 1px; |
| background: linear-gradient( |
| 90deg, |
| transparent, |
| rgba(255, 255, 255, 0.12), |
| transparent |
| ); |
| } |
| .hairline-vert { |
| width: 1px; |
| background: linear-gradient( |
| 180deg, |
| transparent, |
| rgba(255, 255, 255, 0.10), |
| transparent |
| ); |
| } |
| } |
|
|
| |
| |
| |
| @layer utilities { |
| .text-shimmer { |
| background: linear-gradient( |
| 110deg, |
| rgba(245, 243, 236, 0.4) 30%, |
| rgba(245, 243, 236, 1) 50%, |
| rgba(245, 243, 236, 0.4) 70% |
| ); |
| background-size: 200% 100%; |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| animation: shimmerBg 2.4s linear infinite; |
| } |
|
|
| @keyframes shimmerBg { |
| 0% { |
| background-position: 200% 0; |
| } |
| 100% { |
| background-position: -200% 0; |
| } |
| } |
|
|
| |
| .aurora-amber { |
| position: absolute; |
| border-radius: 9999px; |
| background: radial-gradient( |
| circle, |
| rgba(255, 181, 69, 0.32) 0%, |
| rgba(255, 181, 69, 0) 65% |
| ); |
| filter: blur(80px); |
| pointer-events: none; |
| } |
| .aurora-violet { |
| position: absolute; |
| border-radius: 9999px; |
| background: radial-gradient( |
| circle, |
| rgba(120, 90, 240, 0.22) 0%, |
| rgba(120, 90, 240, 0) 65% |
| ); |
| filter: blur(90px); |
| pointer-events: none; |
| } |
| .aurora-teal { |
| position: absolute; |
| border-radius: 9999px; |
| background: radial-gradient( |
| circle, |
| rgba(80, 200, 200, 0.18) 0%, |
| rgba(80, 200, 200, 0) 65% |
| ); |
| filter: blur(80px); |
| pointer-events: none; |
| } |
|
|
| |
| .scrollbar-none { |
| scrollbar-width: none; |
| } |
| .scrollbar-none::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .text-balance { |
| text-wrap: balance; |
| } |
| } |
|
|
