| @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap'); |
|
|
| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| :root { |
| --bg: #06080f; |
| --card: #0d1220; |
| --card-hover: #121a2e; |
| --border: #1e293b; |
| --accent: #34d399; |
| --accent-dim: #059669; |
| --warn: #fbbf24; |
| --danger: #f87171; |
| --muted: #94a3b8; |
| --text: #e2e8f0; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: 'DM Sans', system-ui, sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| .font-mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .glass { |
| background: rgba(13, 18, 32, 0.75); |
| backdrop-filter: blur(12px); |
| border: 1px solid var(--border); |
| } |
|
|
| .gradient-hero { |
| background: radial-gradient(circle at top right, #0a192f, #020617, #020617); |
| position: relative; |
| overflow-x: hidden; |
| } |
|
|
| .gradient-hero::before { |
| content: ''; |
| position: absolute; |
| top: -10%; |
| right: -10%; |
| width: 40%; |
| height: 40%; |
| background: radial-gradient(circle, rgba(16, 185, 129, 0.05), transparent 70%); |
| pointer-events: none; |
| } |
|
|
| @keyframes fade-in { |
| from { opacity: 0; transform: translateY(6px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .animate-in { |
| animation: fade-in 0.35s ease-out forwards; |
| } |
|
|
| .prose-ve h1 { font-size: 1.125rem; font-weight: 600; margin: 0.75rem 0 0.5rem; } |
| .prose-ve h2 { font-size: 0.95rem; font-weight: 600; margin: 0.75rem 0 0.35rem; color: var(--accent); } |
| .prose-ve p { margin: 0.35rem 0; line-height: 1.55; color: var(--muted); } |
| .prose-ve strong { color: var(--text); } |
| .prose-ve code { font-family: 'JetBrains Mono', monospace; font-size: 0.8em; background: #1e293b; padding: 0.1em 0.35em; border-radius: 4px; } |
|
|
