/* Compiled/custom styles for Nico Dev Labs. Tailwind utility classes are loaded via the Tailwind CDN script in for development. Run `npx tailwindcss -i input.css -o output.css --minify` against input.css to produce a fully compiled production bundle instead. The rules below implement the brand's custom component classes so the site renders correctly even before that CLI build step is wired in. */ body { background-color: #09090b; color: #ffffff; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; } [x-cloak] { display: none !important; } .font-mono-code { font-family: "JetBrains Mono", ui-monospace, monospace; } .btn-primary { background-color: #3b82f6; color: #ffffff; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: background-color 300ms ease; } .btn-primary:hover { background-color: #2563eb; } .btn-ghost { border: 1px solid #3f3f46; color: #d4d4d8; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: border-color 300ms ease, color 300ms ease; } .btn-ghost:hover { border-color: #3b82f6; color: #ffffff; } .card { background-color: #18181b; border: 1px solid #27272a; border-radius: 1rem; padding: 1.5rem; transition: all 300ms ease; } .card:hover { border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 30px rgba(59, 130, 246, 0.1); } .section-label { color: #60a5fa; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; } .glass { backdrop-filter: blur(4px); background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .grid-bg { background-image: linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px); background-size: 48px 48px; } .glow-mesh { background: radial-gradient( ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.18), rgba(34, 211, 238, 0.08) 40%, transparent 70% ); } @layer components { .richtext h2 { @apply font-semibold text-2xl text-white mt-10 mb-4; } .richtext h3 { @apply font-semibold text-xl text-white mt-8 mb-3; } .richtext p { @apply mb-5; } .richtext a { @apply text-blue-400 hover:text-blue-300 underline underline-offset-2; } .richtext ul { @apply list-disc pl-6 mb-5 space-y-2; } .richtext ol { @apply list-decimal pl-6 mb-5 space-y-2; } .richtext blockquote { @apply border-l-2 border-blue-500 pl-4 italic text-zinc-400 mb-5; } .richtext code { @apply font-mono text-sm bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5; } .richtext img { @apply rounded-xl border border-zinc-800 my-6; } }