Update style.css

style.css

@@ -6,94 +6,81 @@ body {
     overflow-x: hidden;
 }
 
-.navbar {
-    background: linear-gradient(90deg, #1c2526, #2e3b3e) !important;
+.bg-ghost-nav {
+    background: linear-gradient(90deg, #1c2526, #2e3b3e);
     box-shadow: 0 5px 15px rgba(0, 255, 204, 0.3);
-    padding: 20px 0;
+    padding: 1rem 0;
 }
 
 .navbar-brand {
     font-weight: 900;
-    font-size: 2.4rem;
-    color: #00ffcc !important;
-    text-shadow: 0 0 25px #00ffcc;
+    font-size: 2rem;
+    color: #00ffcc;
+    text-shadow: 0 0 10px #00ffcc;
 }
 
 .nav-link {
     color: #00ffcc !important;
     font-weight: 600;
-    padding: 12px 20px;
-    transition: color 0.3s, text-shadow 0.3s;
+    padding: 0.5rem 1rem;
+    margin: 0 0.5rem;
+    transition: color 0.3s;
 }
 
 .nav-link:hover {
     color: #00cc99 !important;
-    text-shadow: 0 0 15px #00cc99;
+    text-shadow: 0 0 10px #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;
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     align-items: center;
-    justify-content: center;
-    text-shadow: 0 0 30px rgba(0, 255, 204, 0.7);
+    text-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
 }
 
 .preview-window {
     max-width: 700px;
-    margin: 30px auto;
-    padding: 25px;
+    margin: 2rem auto;
+    padding: 1.5rem;
     background: #1c2526;
-    border: 3px solid #00ffcc;
-    border-radius: 12px;
-    box-shadow: 0 0 25px rgba(0, 255, 204, 0.5);
+    border: 2px solid #00ffcc;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
 }
 
 .preview-window img {
-    border-radius: 10px;
+    border-radius: 8px;
     max-height: 400px;
 }
 
 .bg-dark {
-    background: linear-gradient(180deg, #1c2526, #0a0a0a) !important;
+    background: #1c2526;
 }
 
 .bg-light {
-    background: #121212 !important;
+    background: #121212;
 }
 
 .bg-ghost-card {
-    background: #2e3b3e !important;
-    border: 3px solid #00ffcc;
-    border-radius: 12px;
-    box-shadow: 0 0 25px rgba(0, 255, 204, 0.5);
-    transition: transform 0.3s, box-shadow 0.3s;
-    color: #ffffff !important;
-    padding: 25px;
-    cursor: pointer;
-}
-
-.bg-ghost-card:hover {
-    transform: translateY(-12px);
-    box-shadow: 0 0 50px rgba(0, 255, 204, 0.7);
+    background: #2e3b3e;
+    border: 2px solid #00ffcc;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
+    color: #ffffff;
+    padding: 1.5rem;
 }
 
 .bg-ghost-light {
-    background: #e0e0e0 !important;
-    border: 3px solid #00ffcc;
-    border-radius: 12px;
-    box-shadow: 0 0 25px rgba(0, 255, 204, 0.5);
-    transition: transform 0.3s, box-shadow 0.3s;
-    color: #000000 !important;
-    padding: 25px;
-}
-
-.bg-ghost-light:hover {
-    transform: translateY(-12px);
-    box-shadow: 0 0 50px rgba(0, 255, 204, 0.7);
+    background: #e0e0e0;
+    border: 2px solid #00ffcc;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
+    color: #000000;
+    padding: 1.5rem;
 }
 
 .btn-ghost {
@@ -101,23 +88,22 @@ body {
     border: none;
     color: #000000;
     font-weight: 700;
-    border-radius: 10px;
-    padding: 15px 30px;
-    transition: transform 0.3s, box-shadow 0.3s;
+    border-radius: 8px;
+    padding: 0.75rem 1.5rem;
+    transition: transform 0.3s;
 }
 
 .btn-ghost:hover {
-    transform: scale(1.12);
-    box-shadow: 0 0 30px #00ffcc;
-    color: #000000;
+    transform: scale(1.05);
+    box-shadow: 0 0 20px #00ffcc;
 }
 
 .btn-outline-ghost {
-    border-color: #00ffcc;
+    border: 2px solid #00ffcc;
     color: #00ffcc;
-    border-radius: 10px;
-    padding: 15px 30px;
-    transition: background 0.3s, color 0.3s;
+    border-radius: 8px;
+    padding: 0.75rem 1.5rem;
+    transition: background 0.3s;
 }
 
 .btn-outline-ghost:hover {
@@ -126,121 +112,64 @@ body {
 }
 
 pre {
-    background: #e0e0e0 !important;
-    padding: 25px;
-    border-radius: 12px;
-    color: #000000 !important;
-    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
+    background: #e0e0e0;
+    padding: 1rem;
+    border-radius: 8px;
+    color: #000000;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
     font-family: 'Courier New', monospace;
-    margin: 0;
 }
 
 .code-block {
-    font-size: 0.95rem;
-}
-
-.ghost-animation {
-    animation: ghostFloat 5s ease-in-out infinite;
+    font-size: 0.9rem;
 }
 
-@keyframes ghostFloat {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-20px); }
+.lead-text {
+    color: #ffffff;
 }
 
-.bg-ghost-black {
-    background: #0a0a0a !important;
+.light-lead-text {
+    color: #000000;
 }
 
 .nav-tabs .nav-link {
     color: #00ffcc;
     border: 2px solid #00ffcc;
-    border-radius: 10px;
-    margin-right: 15px;
-    padding: 12px 25px;
-    transition: background 0.3s, color 0.3s;
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    margin: 0 0.25rem;
 }
 
 .nav-tabs .nav-link.active {
     background: #00ffcc;
     color: #000000;
-    border-color: #00ffcc;
 }
 
 .nav-tabs .nav-link:hover {
-    background: rgba(0, 255, 204, 0.3);
-    color: #00ffcc;
+    background: rgba(0, 255, 204, 0.2);
 }
 
 .accordion-button {
-    background: #2e3b3e !important;
-    color: #ffffff !important;
+    background: #2e3b3e;
+    color: #ffffff;
     border: 1px solid #00ffcc;
-    border-radius: 8px;
 }
 
 .accordion-button:not(.collapsed) {
-    background: #00ffcc !important;
-    color: #000000 !important;
-}
-
-.accordion-button:focus {
-    box-shadow: 0 0 0 0.25rem rgba(0, 255, 204, 0.5);
+    background: #00ffcc;
+    color: #000000;
 }
 
 .table-dark {
-    background: #1c2526 !important;
-    color: #ffffff !important;
-    border-radius: 12px;
+    background: #1c2526;
+    color: #ffffff;
 }
 
 .table-dark th, .table-dark td {
     border-color: #00ffcc;
-    padding: 20px;
-}
-
-/* Fix for grey-on-grey text across all sections */
-.lead-text {
-    color: #ffffff !important; /* White text on dark backgrounds */
-}
-
-.light-lead-text {
-    color: #000000 !important; /* Black text on light backgrounds */
-}
-
-.bg-ghost-card .lead-text,
-.bg-dark .lead-text {
-    color: #ffffff !important; /* Ensure white text in dark cards and sections */
-}
-
-.bg-ghost-light .light-lead-text,
-.bg-light .light-lead-text {
-    color: #000000 !important; /* Ensure black text in light cards and sections */
-}
-
-/* Specific fix for Usage and Tutorials sections */
-#usage .card.bg-ghost-light .card-body,
-#tutorials .card.bg-ghost-light .card-body {
-    background: #e0e0e0 !important; /* Light background for contrast */
-    color: #000000 !important; /* Black text for readability */
+    padding: 0.75rem;
 }
 
-#usage ol, #usage ul,
-#tutorials ol, #tutorials ul {
-    color: #ffffff !important; /* White text for list items on dark sections */
-}
-
-#usage .card.bg-ghost-light ol, #usage .card.bg-ghost-light ul,
-#tutorials .card.bg-ghost-light ol, #tutorials .card.bg-ghost-light ul {
-    color: #000000 !important; /* Black text for list items on light cards */
-}
-
-/* Apply to all lead texts site-wide */
-.lead {
-    color: #ffffff !important; /* Default white for lead text on dark backgrounds */
-}
-
-.bg-light .lead,
-.bg-ghost-light .lead {
-    color: #000000 !important; /* Black for lead text on light backgrounds */
+.bg-ghost-black {
+    background: #0a0a0a;
 }