/* Import Tailwind CSS */
@import "tailwindcss";
/* Import Flowbite default theme */
@import "flowbite/src/themes/default";
/* Import Flowbite plugin */
@plugin "flowbite/plugin";
@plugin "flowbite-typography";
/* Configure Flowbite source files */
@source "../../../node_modules/flowbite";
/* Custom theme colors and fonts */
@theme {
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
--color-primary-950: #172554;
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent-950: #451a03;
--font-brand: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
@layer components {
a {
@apply underline-offset-4;
}
button {
@apply cursor-pointer;
}
/* Alpine.js cloak directive - hide until Alpine initializes */
[x-cloak] {
display: none !important;
}
}
/* Custom animation for initial page load elements */
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(-0.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scroll text animation for long URLs - scrolls left to reveal full text */
/* translateX uses: min(0px, calc(100cqw - 100%))
- 100cqw = container width, 100% = element (text) width
- If text is wider than container, result is negative, scrolling text left
- min(0px, ...) ensures no scroll when text fits */
@keyframes scrollText {
0%,
10% {
transform: translateX(0);
}
90%,
100% {
transform: translateX(min(0px, calc(100cqw - 100%)));
}
}