style.css

/* 👻 GhostPack Spectral Styles 😈 */
body {
    background: #0a0a0a; /* Deep black base */
    color: #ffffff; /* Pure white text */
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #00ffcc; /* Neon cyan for all headings, high contrast */
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5); /* Neon glow */
}

.bg-ghost-nav {
    background: linear-gradient(90deg, #1a2a2e, #2e3b3e); /* Dark gradient */
    box-shadow: 0 4px 12px rgba(0, 255, 204, 0.3); /* Neon cyan shadow */
    padding: 0.8rem 0;
}

.navbar-brand {
    font-weight: 900;
    font-size: 1.8rem;
    color: #00ffcc; /* Neon cyan */
    text-shadow: 0 0 8px #00ffcc;
}

.nav-link {
    color: #00ffcc !important; /* Neon cyan links */
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    margin: 0 0.3rem;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #00cc99 !important; /* Slightly darker neon */
    text-shadow: 0 0 8px #00cc99;
}

.hero-section {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.4); /* Neon glow */
}

.preview-window {
    max-width: 700px;
    margin: 1.5rem auto;
    padding: 1.2rem;
    background: #1a2a2e; /* Dark slate */
    border: 2px solid #00ffcc; /* Neon cyan border */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
}

.preview-window img {
    border-radius: 6px;
    max-height: 400px;
}

.bg-dark {
    background: #1a2a2e; /* Consistent dark base */
}

.bg-ghost-alt {
    background: #1e2e32; /* Darker alternate base */
}

.bg-ghost-card {
    background: #2e3b3e; /* Dark slate card */
    border: 2px solid #00ffcc; /* Neon cyan border */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
    color: #ffffff; /* White text */
    padding: 1.2rem;
}

.bg-ghost-alt-card {
    background: #2a3a3e; /* Dark slate alternate card */
    border: 2px solid #00ffcc; /* Neon cyan border */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
    color: #ffffff; /* White text to avoid grey-on-grey */
    padding: 1.2rem;
}

.bg-ghost-card h1,
.bg-ghost-card h2,
.bg-ghost-card h3,
.bg-ghost-card h4,
.bg-ghost-alt-card h1,
.bg-ghost-alt-card h2,
.bg-ghost-alt-card h3,
.bg-ghost-alt-card h4 {
    color: #00ffcc; /* Neon cyan headings in cards */
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

.btn-ghost {
    background: linear-gradient(45deg, #00ffcc, #00cc99); /* Neon gradient */
    border: none;
    color: #000000; /* Black text for contrast */
    font-weight: 700;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    transition: transform 0.3s;
}

.btn-ghost:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #00ffcc;
}

.btn-outline-ghost {
    border: 2px solid #00ffcc; /* Neon cyan border */
    color: #00ffcc; /* Neon cyan text */
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    transition: background 0.3s;
}

.btn-outline-ghost:hover {
    background: #00ffcc; /* Neon cyan fill */
    color: #000000; /* Black text */
}

pre {
    background: #2a3a3e; /* Dark slate */
    padding: 0.8rem;
    border-radius: 6px;
    color: #00ffcc; /* Neon cyan text */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
    font-family: 'Courier New', monospace;
}

.code-block {
    font-size: 0.85rem;
}

.lead-text {
    color: #ffffff; /* White for dark backgrounds */
}

.light-lead-text {
    color: #e0e0e0; /* Light grey, but contrasts with #2a3a3e (~4.5:1 ratio) */
}

.nav-tabs .nav-link {
    color: #00ffcc; /* Neon cyan */
    border: 2px solid #00ffcc; /* Neon cyan border */
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    margin: 0 0.2rem;
}

.nav-tabs .nav-link.active {
    background: #00ffcc; /* Neon cyan fill */
    color: #000000; /* Black text */
}

.nav-tabs .nav-link:hover {
    background: rgba(0, 255, 204, 0.2); /* Subtle neon hover */
}

.accordion-button {
    background: #2e3b3e; /* Dark slate */
    color: #ffffff; /* White text */
    border: 1px solid #00ffcc; /* Neon cyan border */
}

.accordion-button:not(.collapsed) {
    background: #00ffcc; /* Neon cyan fill */
    color: #000000; /* Black text */
}

.table-dark {
    background: #1a2a2e; /* Dark slate */
    color: #ffffff; /* White text */
}

.table-dark th, .table-dark td {
    border-color: #00ffcc; /* Neon cyan borders */
    padding: 0.6rem;
}

.bg-ghost-black {
    background: #0a0a0a; /* Deep black */
}

.shadow-lg {
    box-shadow: 0 10px 20px rgba(0, 255, 204, 0.2) !important;
}

.shadow-sm {
    box-shadow: 0 4px 8px rgba(0, 255, 204, 0.1) !important;
}

.text-muted {
    color: #cccccc !important; /* Light grey, contrasts with dark (~4.5:1) */
}