185 lines
6.5 KiB
CSS
185 lines
6.5 KiB
CSS
/* Mek-Tech Neon Theme — Global Visual Layer */
|
|
|
|
@keyframes neonPulse {
|
|
0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px var(--accent)); }
|
|
50% { opacity: 0.85; filter: drop-shadow(0 0 18px var(--accent)); }
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(0,212,255,0.3); opacity: 1; }
|
|
50% { box-shadow: 0 0 14px var(--accent), 0 0 28px rgba(0,212,255,0.5); opacity: 0.85; }
|
|
}
|
|
|
|
@keyframes neon-border-flow {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 200% 50%; }
|
|
}
|
|
|
|
/* ── Page background ── */
|
|
body {
|
|
background-color: var(--bg) !important;
|
|
background-image:
|
|
radial-gradient(ellipse 90% 55% at 50% -15%, rgba(0, 212, 255, 0.12) 0%, transparent 60%),
|
|
radial-gradient(ellipse 50% 35% at 95% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
|
|
radial-gradient(ellipse 40% 30% at 5% 70%, rgba(0, 255, 136, 0.06) 0%, transparent 50%) !important;
|
|
}
|
|
|
|
/* ── Navbar ── */
|
|
.navbar {
|
|
backdrop-filter: blur(16px) !important;
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
|
|
box-shadow: 0 1px 0 rgba(0, 212, 255, 0.1), 0 4px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.04) !important;
|
|
}
|
|
|
|
.nav-brand:hover { color: var(--accent) !important; text-shadow: 0 0 12px rgba(0,212,255,0.5); }
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
border-right: 1px solid rgba(0, 212, 255, 0.15) !important;
|
|
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2), inset -1px 0 0 rgba(0, 212, 255, 0.05) !important;
|
|
}
|
|
|
|
.sidebar .sb-brand {
|
|
background: linear-gradient(135deg, transparent, rgba(0, 212, 255, 0.06)) !important;
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
|
|
}
|
|
|
|
.brand-dot, .sidebar .sb-brand h2 .brand-dot {
|
|
background: var(--accent) !important;
|
|
box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(0,212,255,0.4) !important;
|
|
animation: pulse-glow 2s ease-in-out infinite !important;
|
|
}
|
|
|
|
.sb-item.active {
|
|
color: var(--accent) !important;
|
|
background: rgba(0, 212, 255, 0.1) !important;
|
|
box-shadow: inset 3px 0 0 var(--accent), 0 0 16px rgba(0, 212, 255, 0.08) !important;
|
|
}
|
|
|
|
.sb-item.active .sb-icon svg,
|
|
.sb-item:hover .sb-icon svg {
|
|
filter: drop-shadow(0 0 5px var(--accent));
|
|
}
|
|
|
|
.sb-item:hover {
|
|
background: rgba(0, 212, 255, 0.06) !important;
|
|
color: var(--text) !important;
|
|
}
|
|
|
|
/* ── Cards & KPIs ── */
|
|
.card, .kpi-card, .client-card, .integration-card, .provider-card,
|
|
.stat-card, .advice-card, .task-item, .rm-card, .nd-card, .login-card {
|
|
border: 1px solid rgba(0, 212, 255, 0.12) !important;
|
|
box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
.card:hover, .kpi-card:hover, .client-card:hover, .stat-card:hover,
|
|
.advice-card:hover, .task-item:hover, .rm-card:hover, .nd-card:hover {
|
|
border-color: rgba(0, 212, 255, 0.35) !important;
|
|
box-shadow: 0 0 28px rgba(0, 212, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.kpi-card .kpi-num {
|
|
text-shadow: 0 0 30px rgba(0, 212, 255, 0.25) !important;
|
|
}
|
|
|
|
.kpi-card.accent .kpi-num { color: var(--accent) !important; text-shadow: 0 0 24px rgba(0, 212, 255, 0.55) !important; }
|
|
.kpi-card.green .kpi-num { text-shadow: 0 0 24px rgba(0, 255, 136, 0.45) !important; }
|
|
.kpi-card.purple .kpi-num { text-shadow: 0 0 24px rgba(168, 85, 247, 0.45) !important; }
|
|
.kpi-card.orange .kpi-num { text-shadow: 0 0 24px rgba(255, 179, 71, 0.45) !important; }
|
|
|
|
/* ── Buttons ── */
|
|
.btn-primary, .login-btn, button.btn-primary {
|
|
background: linear-gradient(135deg, #00d4ff, #0099cc) !important;
|
|
border: 1px solid rgba(0, 212, 255, 0.4) !important;
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
|
|
text-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.btn-primary:hover, .login-btn:hover {
|
|
box-shadow: 0 0 36px rgba(0, 212, 255, 0.5), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ── Status badges ── */
|
|
.status-badge.lead { border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 8px rgba(0,212,255,0.2); }
|
|
.status-badge.active { border-color: var(--green) !important; color: var(--green) !important; box-shadow: 0 0 8px rgba(0,255,136,0.2); }
|
|
|
|
/* ── Form focus ── */
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--accent) !important;
|
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 20px rgba(0, 212, 255, 0.1) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* ── Tables ── */
|
|
.data-table th { background: rgba(0, 212, 255, 0.04) !important; }
|
|
.data-table tr:hover td { background: rgba(0, 212, 255, 0.04) !important; }
|
|
|
|
/* ── Links ── */
|
|
.link, a.link { color: var(--accent) !important; }
|
|
.link:hover { text-shadow: 0 0 8px rgba(0,212,255,0.4); }
|
|
|
|
/* ── CRM bar ── */
|
|
.crm-bar {
|
|
background: rgba(0, 212, 255, 0.07) !important;
|
|
border: 1px solid rgba(0, 212, 255, 0.2) !important;
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.06) !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
/* ── Page headers ── */
|
|
.page-hdr h1, .dash-header h1 {
|
|
background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ── Neon top accent on cards ── */
|
|
.kpi-card::after, .client-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.kpi-card { position: relative; overflow: hidden; }
|
|
.kpi-card:hover::after { opacity: 1; }
|
|
|
|
.fade-in-up { animation: fadeInUp 0.45s ease-out forwards; }
|
|
|
|
.designer-frame {
|
|
border: 1px solid rgba(0, 212, 255, 0.25) !important;
|
|
border-radius: 12px !important;
|
|
box-shadow: 0 0 40px rgba(0, 212, 255, 0.1) !important;
|
|
}
|
|
|
|
/* ── Scrollbar ── */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.45); }
|