458c2c044b
- lib/live-data.ts: Shared TypeScript client for blackroad-live-data Worker - components/live-stats.tsx: LiveStatsBar, RecentRepos, AgentStatusGrid components - app/page.tsx: Import LiveStatsBar in main page header Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
79 lines
2.7 KiB
CSS
79 lines
2.7 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
🌌 BLACKROAD OS OFFICIAL BRAND DESIGN SYSTEM
|
||
═══════════════════════════════════════════════════════════
|
||
CRITICAL: This is the OFFICIAL BlackRoad brand system.
|
||
All projects MUST use these exact colors and values.
|
||
═══════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
/* Official Brand Colors */
|
||
--black: #000000;
|
||
--white: #FFFFFF;
|
||
--amber: #F5A623;
|
||
--orange: #F26522;
|
||
--hot-pink: #FF1D6C; /* Primary Brand Color */
|
||
--magenta: #E91E63;
|
||
--electric-blue: #2979FF;
|
||
--sky-blue: #448AFF;
|
||
--violet: #9C27B0;
|
||
--deep-purple: #5E35B1;
|
||
|
||
/* Brand Gradient (Golden Ratio positions 38.2% & 61.8%) */
|
||
--gradient-brand: linear-gradient(135deg,
|
||
var(--amber) 0%,
|
||
var(--hot-pink) 38.2%,
|
||
var(--violet) 61.8%,
|
||
var(--electric-blue) 100%);
|
||
|
||
/* Golden Ratio Spacing (φ = 1.618) */
|
||
--phi: 1.618;
|
||
--space-xs: 8px; /* Base */
|
||
--space-sm: 13px; /* 8 × φ */
|
||
--space-md: 21px; /* 13 × φ */
|
||
--space-lg: 34px; /* 21 × φ */
|
||
--space-xl: 55px; /* 34 × φ */
|
||
--space-2xl: 89px; /* 55 × φ */
|
||
--space-3xl: 144px; /* 89 × φ */
|
||
|
||
/* Animation Easing */
|
||
--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
|
||
/* Legacy support for existing code */
|
||
--background: var(--black);
|
||
--foreground: var(--white);
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: var(--black);
|
||
--color-foreground: var(--white);
|
||
--color-primary: var(--hot-pink);
|
||
--color-secondary: var(--electric-blue);
|
||
--color-accent: var(--amber);
|
||
--color-hot-pink: var(--hot-pink);
|
||
--color-electric-blue: var(--electric-blue);
|
||
--color-violet: var(--violet);
|
||
--color-amber: var(--amber);
|
||
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', var(--font-geist-sans);
|
||
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', var(--font-geist-mono);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--background: var(--black);
|
||
--foreground: var(--white);
|
||
}
|
||
}
|
||
|
||
body {
|
||
background: var(--black);
|
||
color: var(--white);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
|
||
line-height: 1.618; /* Golden Ratio */
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|