/* 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 { text-align: justify; } .richtext h2, .richtext h3, .richtext h4 { text-align: left; } .richtext h2 { font-weight: 600; font-size: 1.5rem; color: #fff; margin-top: 2.5rem; margin-bottom: 1rem; } .richtext h3 { font-weight: 600; font-size: 1.25rem; color: #fff; margin-top: 2rem; margin-bottom: 0.75rem; } .richtext h4 { font-weight: 600; font-size: 1.125rem; color: #e4e4e7; margin-top: 1.5rem; margin-bottom: 0.5rem; } .richtext p { margin-bottom: 1.25rem; line-height: 1.625; } .richtext a { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; } .richtext a:hover { color: #93bbfd; } .richtext ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; text-align: left; } .richtext ul li { margin-bottom: 0.25rem; } .richtext ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; text-align: left; } .richtext ol li { margin-bottom: 0.25rem; } .richtext ul ul, .richtext ol ol, .richtext ul ol, .richtext ol ul { margin-top: 0.5rem; margin-bottom: 0; } .richtext blockquote { border-left: 2px solid #3b82f6; padding-left: 1rem; font-style: italic; color: #a1a1aa; margin-bottom: 1.25rem; } .richtext code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875rem; background: #18181b; border: 1px solid #27272a; border-radius: 4px; padding: 2px 6px; color: #f4f4f5; } .richtext pre { background: #18181b; border: 1px solid #27272a; border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem; overflow-x: auto; text-align: left; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875rem; line-height: 1.6; } .richtext pre code { background: transparent; border: 0; padding: 0; } .richtext img { border-radius: 12px; border: 1px solid #27272a; margin: 1.5rem auto; display: block; } .richtext hr { border-color: #27272a; margin-top: 2rem; margin-bottom: 2rem; } }