82 lines
2.1 KiB
CSS
82 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
@apply bg-[#080B11] text-slate-100 antialiased font-sans selection:bg-emerald-500/30 selection:text-emerald-200;
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
/* Custom modern scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.6);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(51, 65, 85, 0.6);
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(71, 85, 105, 0.9);
|
|
}
|
|
|
|
/* Glassmorphic utilities */
|
|
.glass-panel {
|
|
background: linear-gradient(135deg, rgba(20, 26, 38, 0.7) 0%, rgba(13, 17, 26, 0.8) 100%);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.glass-panel-interactive {
|
|
background: linear-gradient(135deg, rgba(20, 26, 38, 0.65) 0%, rgba(13, 17, 26, 0.75) 100%);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.glass-panel-interactive:hover {
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 20px -5px rgba(16, 185, 129, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.glass-input {
|
|
background: rgba(15, 20, 31, 0.75);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.glass-input:focus {
|
|
background: rgba(15, 20, 31, 0.95);
|
|
border-color: rgba(16, 185, 129, 0.6);
|
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
|
|
}
|
|
|
|
/* Subtle background grid */
|
|
.bg-grid-pattern {
|
|
background-size: 32px 32px;
|
|
background-image:
|
|
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
|
}
|