218 lines
6.1 KiB
CSS
218 lines
6.1 KiB
CSS
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url('/fonts/inter/InterVariable.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 600 700;
|
|
font-display: swap;
|
|
src: url('/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
|
|
}
|
|
|
|
@import 'tailwindcss';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
|
|
@theme {
|
|
/* Dark mode (default) */
|
|
--color-bg: #0a0a0f;
|
|
--color-s1: #111117;
|
|
--color-s2: #16161e;
|
|
--color-s3: #1c1c26;
|
|
--color-b1: rgb(255 255 255 / 8%);
|
|
--color-b2: rgb(255 255 255 / 14%);
|
|
--color-t1: #f0f0f5;
|
|
--color-t2: #8888a0;
|
|
--color-t3: #44445a;
|
|
|
|
/* Accent — purple-pink gradient, consistent across both themes */
|
|
--color-blue: #7c3aed;
|
|
--color-accent: #7c3aed;
|
|
--color-accent-2: #ec4899;
|
|
|
|
--color-green: #3ecf8e;
|
|
--color-amber: #f5a623;
|
|
--color-red: #f05252;
|
|
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--color-bg: #ffffff;
|
|
--color-s1: #ffffff;
|
|
--color-s2: #f9fafb;
|
|
--color-s3: #f3f4f6;
|
|
--color-b1: #e5e7eb;
|
|
--color-b2: #d1d5db;
|
|
--color-t1: #111827;
|
|
--color-t2: #6b7280;
|
|
--color-t3: #9ca3af;
|
|
|
|
--color-blue: #7c3aed;
|
|
--color-accent: #7c3aed;
|
|
--color-accent-2: #ec4899;
|
|
|
|
--color-green: #10b981;
|
|
--color-amber: #f59e0b;
|
|
--color-red: #ef4444;
|
|
}
|
|
|
|
/* Visible borders on all themes */
|
|
*, ::before, ::after { border-color: var(--color-b1); }
|
|
|
|
/* Base typography scale */
|
|
html { font-size: 14px; }
|
|
body { font-size: 0.875rem; line-height: 1.5; }
|
|
|
|
h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.02em; }
|
|
h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.015em; }
|
|
h3 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
|
|
|
|
/* Refined scrollbar */
|
|
::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--color-t3); border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--color-t2); }
|
|
|
|
/* Text rendering */
|
|
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
|
|
.font-mono, code, pre { font-variant-numeric: tabular-nums; }
|
|
|
|
/* Number glow for metrics */
|
|
.metric-num {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
text-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 30%, transparent);
|
|
}
|
|
|
|
/* Card depth shadow */
|
|
.card-shadow {
|
|
box-shadow:
|
|
0 1px 0 0 rgba(255,255,255,0.04) inset,
|
|
0 -1px 0 0 rgba(0,0,0,0.2) inset,
|
|
0 4px 16px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Accent-top card — top border is accent gradient */
|
|
.card-accent-top {
|
|
position: relative;
|
|
}
|
|
.card-accent-top::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
|
|
border-radius: inherit;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Page-load stagger reveal */
|
|
@keyframes nim-fade-up {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.nim-reveal {
|
|
opacity: 0;
|
|
animation: nim-fade-up 0.35s ease forwards;
|
|
}
|
|
.nim-reveal-1 { animation-delay: 0.05s; }
|
|
.nim-reveal-2 { animation-delay: 0.12s; }
|
|
.nim-reveal-3 { animation-delay: 0.19s; }
|
|
.nim-reveal-4 { animation-delay: 0.26s; }
|
|
.nim-reveal-5 { animation-delay: 0.33s; }
|
|
|
|
/* Shimmer for loading skeletons */
|
|
@keyframes nim-shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
.nim-skeleton {
|
|
background: linear-gradient(90deg, var(--color-s2) 25%, var(--color-s3) 50%, var(--color-s2) 75%);
|
|
background-size: 200% 100%;
|
|
animation: nim-shimmer 1.4s infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Subtle grid background for stat sections */
|
|
.bg-grid {
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* Table row hover with left accent bar */
|
|
.table-row-hover {
|
|
position: relative;
|
|
transition: background 0.12s ease;
|
|
}
|
|
.table-row-hover::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
|
|
transform: scaleY(0);
|
|
transition: transform 0.15s ease;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
.table-row-hover:hover::before {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
/* Pill badge base */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-accent-gradient {
|
|
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
|
|
}
|
|
.text-accent-gradient {
|
|
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.border-accent-gradient {
|
|
border-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)) 1;
|
|
}
|
|
.tabular-nums { font-variant-numeric: tabular-nums; }
|
|
}
|