File size: 3,915 Bytes
136c0f7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | :root {
--main-bg: #0f172a; /* Deep Navy */
--second-bg: #1e293b; /* Lighter Navy */
--sidebar-bg: #0b1120; /* Darkest Navy */
--text-color: #cbd5e1; /* Soft White */
--accent-color: #0ea5e9; /* Cyber Blue */
--accent-glow: rgba(14, 165, 233, 0.5);
--glass-bg: rgba(30, 41, 59, 0.7);
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
}
body {
background-color: var(--main-bg);
color: var(--text-color);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .font-monospace {
font-family: 'JetBrains Mono', monospace;
color: #fff;
}
/* Sidebar Styling */
#wrapper { overflow-x: hidden; }
.cyber-sidebar {
min-height: 100vh;
margin-left: -15rem;
transition: margin 0.25s ease-out;
background-color: var(--sidebar-bg);
border-right: 1px solid rgba(255,255,255,0.05);
}
.cyber-sidebar .list-group { width: 15rem; }
#wrapper.toggled .cyber-sidebar { margin-left: 0; }
#page-content-wrapper { width: 100%; transition: margin 0.25s ease-out; }
@media (min-width: 768px) {
.cyber-sidebar { margin-left: 0; }
#wrapper.toggled .cyber-sidebar { margin-left: -15rem; }
}
.sidebar-heading { color: var(--accent-color); letter-spacing: 2px; }
.list-group-item {
border: none; padding: 15px 30px;
color: var(--text-color);
transition: all 0.3s;
border-left: 3px solid transparent;
}
.list-group-item:hover {
color: var(--accent-color);
background: rgba(255,255,255,0.03) !important;
padding-left: 35px;
}
.active-link {
color: var(--accent-color) !important;
background: linear-gradient(90deg, rgba(14,165,233,0.1), transparent) !important;
border-left: 3px solid var(--accent-color);
}
.locked-link { opacity: 0.5; cursor: not-allowed; }
/* Cyber Glass Cards */
.cyber-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: var(--glass-border);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}
.cyber-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(14, 165, 233, 0.15);
border-color: rgba(14, 165, 233, 0.3);
}
/* Neon Buttons */
.btn-cyber {
background: linear-gradient(135deg, var(--accent-color), #3b82f6);
border: none;
color: white;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.btn-cyber:hover {
box-shadow: 0 0 25px var(--accent-color);
transform: scale(1.02);
color: white;
}
/* Form Inputs */
.form-control {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.1);
color: white;
padding: 12px;
}
.form-control:focus {
background: rgba(0,0,0,0.5);
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
color: white;
}
/* Animations */
.fade-in-up { animation: fadeInUp 0.6s ease forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.cyber-alert {
background: rgba(14, 165, 233, 0.1);
border: 1px solid var(--accent-color);
color: white;
backdrop-filter: blur(5px);
}
/* Watchtower Badges */
.watchtower-badge {
margin-top: 10px;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.85rem;
display: flex; align-items: center; gap: 8px;
animation: slideDown 0.3s ease-out;
}
.watchtower-badge.safe { background: rgba(16, 185, 129, 0.15); border: 1px solid #10b981; color: #10b981; }
.watchtower-badge.danger { background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; color: #ef4444; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } |