120 lines
4.1 KiB
CSS
120 lines
4.1 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tailwind v4 scans these for utility usage (Blade + compiled views). */
|
|
@source '../views';
|
|
@source '../../app/Livewire';
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
|
|
/* ── Clusev design tokens — "Tactical Terminal" (handoff §6) ───────────── */
|
|
@theme {
|
|
/* surfaces */
|
|
--color-void: #06080A;
|
|
--color-base: #0A0D10;
|
|
--color-surface: #0F1318;
|
|
--color-raised: #141A20;
|
|
--color-inset: #0B0E12;
|
|
|
|
/* brand — use opacity utilities for tints (bg-accent/10, border-accent/25) */
|
|
--color-accent: #FF6B2C;
|
|
--color-accent-bright: #FF8A4D;
|
|
--color-accent-deep: #E25617;
|
|
--color-accent-text: #FF9259;
|
|
|
|
/* cyan counter-accent */
|
|
--color-cyan: #43C1D8;
|
|
--color-cyan-bright: #74D7E8;
|
|
|
|
/* status triad */
|
|
--color-online: #35D07F;
|
|
--color-warning: #E8B931;
|
|
--color-offline: #FF5247;
|
|
|
|
/* text ramp → text-ink / text-ink-2 ... */
|
|
--color-ink: #E9EEF3;
|
|
--color-ink-2: #9DAAB6;
|
|
--color-ink-3: #7E8A95;
|
|
--color-ink-4: #707B85;
|
|
|
|
/* hairline borders → border-line ... */
|
|
--color-line: rgba(255, 255, 255, 0.10);
|
|
--color-line-soft: rgba(255, 255, 255, 0.055);
|
|
--color-line-strong: rgba(255, 255, 255, 0.17);
|
|
|
|
/* fonts — TODO(§12): self-host the .woff2; falls back until then */
|
|
--font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
|
|
--font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
|
|
|
|
/* radii → rounded-* */
|
|
--radius-xs: 3px;
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 10px;
|
|
|
|
/* elevation → shadow-panel / shadow-pop */
|
|
--shadow-panel: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 30px -18px rgb(0 0 0 / 0.85);
|
|
--shadow-pop: 0 10px 34px -10px rgb(0 0 0 / 0.75);
|
|
}
|
|
|
|
/* ── base layer ───────────────────────────────────────────────────────── */
|
|
@layer base {
|
|
/* Alpine: keep x-cloak elements hidden until Alpine inits (prevents drawer/backdrop flash). */
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* keyboard focus — visible token ring on the dark UI (a11y) */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-xs);
|
|
}
|
|
|
|
/* honor reduced-motion (disables the status-dot ping, transitions, …) */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-void);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* atmospheric void: fine dot-grid + orange top vignette + bottom sink */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(120% 70% at 50% -8%, rgb(255 107 44 / 0.07), transparent 55%),
|
|
radial-gradient(100% 60% at 50% 112%, rgb(0 0 0 / 0.55), transparent 50%),
|
|
radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.028) 1px, transparent 0);
|
|
background-size: auto, auto, 22px 22px;
|
|
}
|
|
|
|
/* thin dark scrollbars */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--color-raised); border-radius: 9px; border: 2px solid var(--color-base); }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--color-line-strong); }
|
|
|
|
/* numbers/IPs/paths render mono */
|
|
.tabular {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|