genesis/static/style.css

/* static/style.css */

/* ===== General Layout ===== */
body {
    background-color: #0b0f0c; /* Deep biotech black */
    color: #e0e5df; /* Light greenish text */
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
}

/* ===== Headings ===== */
h1, h2, h3 {
    color: #00ff7f; /* Neon green */
    text-shadow: 0 0 10px rgba(0, 255, 127, 0.8);
    letter-spacing: 2px;
}

/* ===== Tab Navigation ===== */
.gradio-tabs .tab-nav {
    background-color: #111;
    border-bottom: 3px solid #ff7f00; /* Orange accent */
}

.gradio-tabs .tab-nav button {
    background-color: #1a1f1d;
    color: #00ff7f;
    border: none;
    padding: 12px 20px;
    transition: background 0.3s ease, color 0.3s ease;
}

.gradio-tabs .tab-nav button:hover {
    background-color: #ff7f00;
    color: #000;
}

.gradio-tabs .tab-nav button.active {
    background-color: #00ff7f;
    color: #000;
}

/* ===== Buttons ===== */
button {
    background-color: #00ff7f;
    border: none;
    padding: 10px 18px;
    color: #000;
    font-weight: bold;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

button:hover {
    background-color: #ff7f00;
    transform: scale(1.05);
}

/* ===== Inputs & Textboxes ===== */
input, textarea, select {
    background-color: #0f1512;
    border: 1px solid #00ff7f;
    color: #e0e5df;
    padding: 10px;
    border-radius: 6px;
}

textarea:focus, input:focus, select:focus {
    border-color: #ff7f00;
    outline: none;
}

/* ===== JSON & Data Outputs ===== */
.output-json {
    background-color: #141c18;
    border: 1px solid #00ff7f;
    padding: 12px;
    border-radius: 8px;
    overflow: auto;
}

/* ===== Images ===== */
img {
    border: 3px solid #ff7f00;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 127, 0, 0.7);
}

/* ===== Audio Player ===== */
audio {
    background-color: #0b0f0c;
    border: 2px solid #00ff7f;
    border-radius: 8px;
}

/* ===== PDF File Download ===== */
a[href$=".pdf"], .file-download {
    color: #ff7f00;
    font-weight: bold;
    text-decoration: none;
}

a[href$=".pdf"]:hover, .file-download:hover {
    color: #00ff7f;
    text-decoration: underline;
}

/* ===== Glow Animations ===== */
@keyframes glowGreen {
    0% { box-shadow: 0 0 5px #00ff7f; }
    50% { box-shadow: 0 0 20px #00ff7f; }
    100% { box-shadow: 0 0 5px #00ff7f; }
}

@keyframes glowOrange {
    0% { box-shadow: 0 0 5px #ff7f00; }
    50% { box-shadow: 0 0 20px #ff7f00; }
    100% { box-shadow: 0 0 5px #ff7f00; }
}

button {
    animation: glowGreen 2s infinite alternate;
}

.gradio-tabs .tab-nav button.active {
    animation: glowOrange 2s infinite alternate;
}