/* =========================================
GOTHAMSEC: DARK KNIGHT PROTOCOL THEME
========================================= */
:root {
/* -- PALETTE DEFINITIONS -- */
--bat-black: #050505; /* Deepest Void */
--armor-grey: #1a1a1a; /* Matte Armor */
--tech-grey: #2d2d2d; /* Gunmetal */
--neon-cyan: #00f0ff; /* Electric Circuit */
--neon-purple: #bc13fe; /* Venom/Signal */
--text-primary: #e0e0e0;
--text-muted: #888888;
/* -- OVERRIDING CTFD DEFAULTS -- */
--bg-color: var(--bat-black);
--component-bg: var(--armor-grey);
--border-color: var(--tech-grey);
}
/* 1. CORE ATMOSPHERE */
body {
background-color: var(--bat-black) !important;
color: var(--text-primary) !important;
font-family: 'Rajdhani', 'Roboto Mono', monospace; /* Tech vibe font */
background-image:
linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px; /* Subtle grid background */
}
/* 2. NAVBAR (The Utility Belt) */
.navbar {
background: rgba(5, 5, 5, 0.95) !important;
border-bottom: 2px solid var(--neon-purple);
box-shadow: 0 4px 30px rgba(188, 19, 254, 0.2);
backdrop-filter: blur(10px);
}
.navbar-brand {
font-weight: 700;
letter-spacing: 2px;
color: var(--neon-cyan) !important;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
.nav-link {
color: var(--text-primary) !important;
transition: all 0.3s ease;
}
.nav-link:hover {
color: var(--neon-cyan) !important;
text-shadow: 0 0 8px var(--neon-cyan);
}
/* 3. CHALLENGE CARDS (The Gadgets) */
.challenge-button {
background: var(--armor-grey) !important;
border: 1px solid var(--tech-grey) !important;
border-radius: 0 !important; /* Sharp corners */
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.challenge-button:hover {
transform: translateY(-3px);
border-color: var(--neon-cyan) !important;
box-shadow:
0 0 15px rgba(0, 240, 255, 0.3),
inset 0 0 10px rgba(0, 240, 255, 0.1);
}
/* Solved State - The Signal */
.challenge-button.solved {
border-color: var(--neon-purple) !important;
box-shadow: 0 0 15px rgba(188, 19, 254, 0.4);
opacity: 0.7;
}
/* 4. MODALS & PANELS (The Batcomputer Interface) */
.modal-content {
background-color: var(--armor-grey) !important;
border: 1px solid var(--neon-cyan);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
border-radius: 4px;
}
.modal-header {
border-bottom: 1px solid var(--tech-grey);
background: linear-gradient(90deg, rgba(0,240,255,0.1) 0%, transparent 100%);
}
.modal-title {
color: var(--neon-cyan);
text-transform: uppercase;
letter-spacing: 1.5px;
}
.nav-tabs .nav-link.active {
background-color: transparent !important;
border-color: transparent transparent var(--neon-cyan) !important;
color: var(--neon-cyan) !important;
border-bottom-width: 2px;
}
/* 5. INPUTS & BUTTONS */
input.form-control {
background-color: #000 !important;
border: 1px solid var(--tech-grey) !important;
color: var(--neon-cyan) !important;
border-radius: 2px;
}
input.form-control:focus {
box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
border-color: var(--neon-cyan) !important;
}
.btn-primary {
background: transparent !important;
border: 1px solid var(--neon-cyan) !important;
color: var(--neon-cyan) !important;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
border-radius: 2px;
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.4s ease;
}
.btn-primary:hover {
background: var(--neon-cyan) !important;
color: #000 !important;
box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
}
/* 6. SCOREBOARD (The Leaderboard) */
.table {
color: var(--text-primary) !important;
}
.table thead th {
border-bottom: 2px solid var(--neon-purple) !important;
color: var(--neon-purple);
text-transform: uppercase;
}
.table td {
border-top: 1px solid var(--tech-grey) !important;
vertical-align: middle;
}
/* 7. JUMBOTRON (The Landing Area) */
/* This assumes your banner is uploaded via Admin > Config */
.jumbotron {
background: transparent !important; /* Let the banner shine */
text-align: center;
}
.jumbotron h1 {
text-shadow: 0 0 20px rgba(0,0,0,0.9);
font-weight: 800;
letter-spacing: -2px;
}
/* 8. FOOTER */
footer {
background-color: var(--bat-black) !important;
border-top: 1px solid var(--tech-grey);
color: var(--text-muted) !important;
}
/* 9. GLITCH ANIMATION FOR TITLE (Optional Flare) */
@keyframes glitch {
0% { text-shadow: 2px 0 var(--neon-purple), -2px 0 var(--neon-cyan); }
25% { text-shadow: -2px 0 var(--neon-purple), 2px 0 var(--neon-cyan); }
50% { text-shadow: 2px 0 var(--neon-purple), -2px 0 var(--neon-cyan); }
75% { text-shadow: -2px 0 var(--neon-purple), 2px 0 var(--neon-cyan); }
100% { text-shadow: 2px 0 var(--neon-purple), -2px 0 var(--neon-cyan); }
}
h1, h2, h3 {
color: white;
}
/* Apply neon glow to specific bold text */
b, strong {
color: var(--neon-cyan);
}
| User |
Website |
Affiliation |
Country |