71 lines
2.2 KiB
CSS
71 lines
2.2 KiB
CSS
/* Tailwind v4 entry */
|
|
@import "tailwindcss";
|
|
|
|
/* Tell Tailwind where to scan */
|
|
@source "./templates/**/*.html";
|
|
@source "./app.py";
|
|
|
|
/* Base */
|
|
:root { --bg: #0a0a0a; }
|
|
html, body { background: var(--bg); }
|
|
.font-bebas { font-family: "Bebas Neue", ui-sans-serif, system-ui; }
|
|
|
|
/* Custom utilities */
|
|
.bg-grid {
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
background-position: -1px -1px;
|
|
}
|
|
.mask-fade {
|
|
-webkit-mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.85) 40%, transparent 80%);
|
|
mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.85) 40%, transparent 80%);
|
|
}
|
|
.glass {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
}
|
|
.dot { display: inline-flex; align-items: center; gap: .5rem; }
|
|
.dot::before {
|
|
content: "";
|
|
width: .5rem; height: .5rem; border-radius: 9999px;
|
|
background: rgb(52 211 153);
|
|
}
|
|
|
|
/* Components (no @apply of custom classes) */
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center rounded-xl bg-white text-black font-semibold transition;
|
|
/* padding utilities in @apply are fine too; using raw CSS keeps it simple */
|
|
padding: 0.75rem 1.25rem; /* = py-3 px-5 */
|
|
}
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center rounded-xl font-semibold transition;
|
|
/* bring 'glass' styles in directly */
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
padding: 0.75rem 1.25rem;
|
|
}
|
|
.label { @apply text-sm text-white/70; }
|
|
.input,
|
|
.textarea {
|
|
@apply w-full mt-1 border border-white/10 rounded-xl px-4 py-3 outline-none focus:border-white/30;
|
|
background: rgba(255,255,255,.05);
|
|
}
|
|
.link { @apply underline underline-offset-4 hover:no-underline; }
|
|
|
|
/* Cards */
|
|
.card {
|
|
@apply rounded-2xl p-6;
|
|
/* include glass effect here too */
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
}
|
|
.card-title { @apply font-semibold text-lg; }
|
|
.card-body { @apply mt-2 text-sm text-white/80; }
|
|
.card-list { @apply mt-4 space-y-2 text-sm text-white/70 list-disc pl-4; }
|
|
|