9d223b8137
Ambient background, 3D neon cards, brass HUD styling, glowing charts, gauge rings, and refreshed Command Deck, Fleet Roster, Forge, and Calibrate pages.
301 lines
7.0 KiB
CSS
301 lines
7.0 KiB
CSS
/* Steampunk Neon Command Deck — design tokens */
|
|
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--bg-void: #060504;
|
|
--bg-deep: #0c0a08;
|
|
--bg-panel: rgba(18, 14, 10, 0.85);
|
|
--bg-panel-solid: #14100c;
|
|
--bg-hover: rgba(40, 32, 24, 0.9);
|
|
|
|
--brass: #c9a227;
|
|
--brass-light: #e8c547;
|
|
--brass-dark: #6b4f12;
|
|
--copper: #b87333;
|
|
--copper-glow: rgba(184, 115, 51, 0.4);
|
|
|
|
--neon-cyan: #00f5ff;
|
|
--neon-magenta: #ff2da6;
|
|
--neon-amber: #ffb020;
|
|
--neon-green: #39ff14;
|
|
--neon-purple: #b24bf3;
|
|
|
|
--text-primary: #f4ebe0;
|
|
--text-secondary: #c4b5a0;
|
|
--text-muted: #7a6f62;
|
|
|
|
--border-brass: rgba(201, 162, 39, 0.35);
|
|
--border-neon: rgba(0, 245, 255, 0.25);
|
|
--shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 1px rgba(201, 162, 39, 0.3);
|
|
--shadow-neon-cyan: 0 0 20px rgba(0, 245, 255, 0.35), 0 0 60px rgba(0, 245, 255, 0.1);
|
|
--shadow-neon-magenta: 0 0 20px rgba(255, 45, 166, 0.3);
|
|
|
|
--font-display: 'Cinzel Decorative', Georgia, serif;
|
|
--font-tech: 'Orbitron', monospace;
|
|
--font-body: 'Rajdhani', 'Segoe UI', sans-serif;
|
|
|
|
--perspective: 1200px;
|
|
--card-tilt: 2deg;
|
|
}
|
|
|
|
/* Legacy variable bridge */
|
|
:root {
|
|
--bg-primary: var(--bg-void);
|
|
--bg-secondary: var(--bg-deep);
|
|
--bg-card: var(--bg-panel-solid);
|
|
--border-color: var(--border-brass);
|
|
--accent-green: var(--neon-green);
|
|
--accent-red: #ff4466;
|
|
--accent-yellow: var(--neon-amber);
|
|
--accent-blue: var(--neon-cyan);
|
|
--accent-purple: var(--neon-purple);
|
|
--accent-cyan: var(--neon-cyan);
|
|
--online-color: var(--neon-green);
|
|
--offline-color: var(--text-muted);
|
|
--error-color: #ff4466;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: 1.05rem;
|
|
background: var(--bg-void);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1, h2, h3, .font-display {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.font-tech {
|
|
font-family: var(--font-tech);
|
|
}
|
|
|
|
/* Brass rivet texture overlay on cards */
|
|
.card,
|
|
.neon-card {
|
|
position: relative;
|
|
background: linear-gradient(145deg, rgba(28, 22, 16, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%);
|
|
border: 1px solid var(--border-brass);
|
|
border-radius: 4px;
|
|
box-shadow: var(--shadow-panel);
|
|
backdrop-filter: blur(12px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::before,
|
|
.neon-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 245, 255, 0.08), transparent 50%),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 48px,
|
|
rgba(201, 162, 39, 0.03) 48px,
|
|
rgba(201, 162, 39, 0.03) 49px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.card > *,
|
|
.neon-card > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 3D panel tilt on hover */
|
|
.neon-card-3d {
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
|
|
}
|
|
|
|
.neon-card-3d:hover {
|
|
transform: perspective(var(--perspective)) rotateX(2deg) translateY(-4px);
|
|
box-shadow: var(--shadow-panel), var(--shadow-neon-cyan);
|
|
}
|
|
|
|
/* Corner brackets (steampunk HUD) */
|
|
.hud-corners {
|
|
position: relative;
|
|
}
|
|
|
|
.hud-corners::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 8px;
|
|
border: 1px solid transparent;
|
|
border-image: linear-gradient(135deg, var(--brass) 0%, transparent 30%, transparent 70%, var(--neon-cyan) 100%) 1;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Buttons — brass + neon */
|
|
.btn {
|
|
font-family: var(--font-tech);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.75rem;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(180deg, #1a4a52 0%, #0d2a30 100%);
|
|
border: 1px solid var(--neon-cyan);
|
|
color: var(--neon-cyan);
|
|
box-shadow: 0 0 15px rgba(0, 245, 255, 0.2);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
box-shadow: var(--shadow-neon-cyan);
|
|
background: linear-gradient(180deg, #1f5a64 0%, #103540 100%);
|
|
}
|
|
|
|
.btn-success {
|
|
background: linear-gradient(180deg, #1a3d1a 0%, #0d200d 100%);
|
|
border: 1px solid var(--neon-green);
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.btn-success:hover {
|
|
box-shadow: 0 0 20px rgba(57, 255, 20, 0.25);
|
|
}
|
|
|
|
.btn-outline {
|
|
border: 1px solid var(--border-brass);
|
|
color: var(--brass-light);
|
|
background: rgba(20, 16, 12, 0.6);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
border-color: var(--neon-cyan);
|
|
color: var(--neon-cyan);
|
|
box-shadow: 0 0 12px rgba(0, 245, 255, 0.15);
|
|
}
|
|
|
|
/* Form inputs — gauge panel style */
|
|
.input,
|
|
.select {
|
|
background: rgba(8, 6, 4, 0.9);
|
|
border: 1px solid var(--border-brass);
|
|
border-radius: 2px;
|
|
font-family: var(--font-body);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.input:focus,
|
|
.select:focus {
|
|
border-color: var(--neon-cyan);
|
|
box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.15), inset 0 0 20px rgba(0, 245, 255, 0.05);
|
|
outline: none;
|
|
}
|
|
|
|
/* Status badges — neon glow */
|
|
.status-badge.online {
|
|
background: rgba(57, 255, 20, 0.12);
|
|
color: var(--neon-green);
|
|
border: 1px solid rgba(57, 255, 20, 0.4);
|
|
box-shadow: 0 0 12px rgba(57, 255, 20, 0.2);
|
|
}
|
|
|
|
.status-badge.offline {
|
|
background: rgba(122, 111, 98, 0.15);
|
|
border: 1px solid rgba(122, 111, 98, 0.3);
|
|
}
|
|
|
|
.status-badge.error {
|
|
background: rgba(255, 68, 102, 0.12);
|
|
color: #ff6688;
|
|
border: 1px solid rgba(255, 68, 102, 0.4);
|
|
box-shadow: 0 0 12px rgba(255, 68, 102, 0.2);
|
|
}
|
|
|
|
.status-dot.online {
|
|
background: var(--neon-green);
|
|
box-shadow: 0 0 8px var(--neon-green), 0 0 16px rgba(57, 255, 20, 0.5);
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.status-dot.offline {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.7; transform: scale(0.92); }
|
|
}
|
|
|
|
@keyframes scanline {
|
|
0% { transform: translateY(-100%); }
|
|
100% { transform: translateY(100vh); }
|
|
}
|
|
|
|
@keyframes gear-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes float-orb {
|
|
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
|
|
50% { transform: translate(20px, -30px) scale(1.1); opacity: 0.7; }
|
|
}
|
|
|
|
@keyframes grid-drift {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 60px 60px; }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeInSteampunk 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
|
}
|
|
|
|
@keyframes fadeInSteampunk {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px) perspective(800px) rotateX(4deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) perspective(800px) rotateX(0);
|
|
}
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-deep);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, var(--brass-dark), var(--copper));
|
|
border-radius: 2px;
|
|
border: 1px solid var(--brass);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--brass);
|
|
}
|