Update color scheme to dark purple theme

Switch from light theme to dark background with purple accents.
Update sidebar with gradient background and improved hover effects.
Enhance button and navigation styling for better contrast.

kjvstudy_org/static/style.css

@@ -1,18 +1,18 @@
 :root {
-  --primary-color: #1f1f1f;
-  --primary-light: #333333;
-  --primary-dark: #000000;
-  --accent-color: #666666;
-  --background-color: #fefefe;
-  --surface-color: #ffffff;
-  --text-primary: #1a1a1a;
-  --text-secondary: #666666;
-  --text-muted: #999999;
-  --border-color: #e0e0e0;
-  --border-light: #f0f0f0;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 2px 4px 0 rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 4px 8px 0 rgb(0 0 0 / 0.1);
+  --primary-color: #4b2e83;
+  --primary-light: #6d4bb3;
+  --primary-dark: #2f1a4f;
+  --accent-color: #8b5cf6;
+  --background-color: #0f0f0f;
+  --surface-color: #1a1a1a;
+  --text-primary: #f5f5f5;
+  --text-secondary: #a3a3a3;
+  --text-muted: #737373;
+  --border-color: #2a2a2a;
+  --border-light: #262626;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
@@ -91,12 +91,11 @@ div {
 
 .sidebar {
     width: 220px;
-    background: var(--surface-color);
-    color: var(--text-primary);
+    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
+    color: white;
     overflow-y: auto;
     padding: 1.5rem 0;
-    box-shadow: var(--shadow-md);
-    border-right: 1px solid var(--border-color);
+    box-shadow: var(--shadow-lg);
     position: fixed;
     height: 100vh;
     z-index: 30;
@@ -112,7 +111,7 @@ div {
 
 .sidebar-header {
   padding: 0 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-light);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 1rem;
 }
 
@@ -121,7 +120,7 @@ div {
   font-size: 1.2rem;
   font-weight: normal;
   margin: 0;
-  color: var(--text-primary);
+  color: white;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -129,7 +128,7 @@ div {
 
 .sidebar-subtitle {
   font-size: 0.875rem;
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.7);
   margin: 0.25rem 0 0;
   font-weight: normal;
 }
@@ -144,28 +143,32 @@ div {
   font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, 0.6);
   margin: 1.25rem 0.5rem 0.5rem;
 }
 
 .sidebar-nav a {
   display: block;
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.8);
   padding: 0.4rem 0.75rem;
   text-decoration: none;
   margin-bottom: 0.1rem;
-  transition: color 0.2s ease;
+  transition: all 0.2s ease;
   font-size: 0.9rem;
   font-family: 'Crimson Text', 'Times New Roman', serif;
+  border-radius: var(--radius-sm);
 }
 
 .sidebar-nav a:hover {
-  color: var(--text-primary);
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  transform: translateX(4px);
 }
 
 .sidebar-nav a.active {
-  color: var(--text-primary);
-  font-weight: normal;
+  background-color: rgba(255, 255, 255, 0.15);
+  color: white;
+  font-weight: 500;
 }
 
 .sidebar-nav a.coming-soon {
@@ -177,7 +180,7 @@ div {
 .sidebar-nav a.coming-soon small {
   display: block;
   font-size: 0.75rem;
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, 0.5);
   margin-top: 0.25rem;
   font-family: 'Crimson Text', 'Times New Roman', serif;
 }
@@ -188,7 +191,7 @@ div {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.5);
   z-index: 35;
   opacity: 0;
   visibility: hidden;
@@ -386,18 +389,19 @@ div {
   justify-content: center;
   padding: 0.75rem 0.5rem;
   background: var(--surface-color);
-  color: var(--text-primary);
+  color: var(--primary-light);
   text-decoration: none;
   font-weight: normal;
   font-size: 1rem;
-  border: 1px solid var(--border-light);
+  border: 2px solid var(--border-color);
   transition: all 0.15s ease;
   min-height: 44px;
 }
 
 .chapter-link:hover {
-  background: var(--border-light);
-  color: var(--text-primary);
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-light);
 }
 
 /* Verses */
@@ -504,14 +508,14 @@ div {
 }
 
 .breadcrumb a {
-  color: var(--text-secondary);
+  color: var(--primary-light);
   text-decoration: none;
   font-size: 0.85rem;
   font-family: 'Crimson Text', 'Times New Roman', serif;
 }
 
 .breadcrumb a:hover {
-  color: var(--text-primary);
+  text-decoration: underline;
 }
 
 .breadcrumb-separator {
@@ -543,18 +547,20 @@ div {
 }
 
 .nav-button:hover {
-  background: var(--border-light);
-  color: var(--text-primary);
+  background: var(--primary-light);
+  color: white;
+  border-color: var(--primary-light);
 }
 
 .nav-button-primary {
-  background: var(--text-primary);
-  color: var(--surface-color);
-  border-color: var(--text-primary);
+  background: var(--primary-light);
+  color: white;
+  border-color: var(--primary-light);
 }
 
 .nav-button-primary:hover {
-  background: var(--text-secondary);
+  background: var(--primary-dark);
+  border-text-secondary);
   border-color: var(--text-secondary);
 }
 
@@ -602,13 +608,13 @@ div {
   top: 1rem;
   left: 1rem;
   z-index: 40;
-  background: var(--surface-color);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
+  background: var(--primary-color);
+  color: white;
+  border: none;
   border-radius: var(--radius-md);
   padding: 0.75rem;
   cursor: pointer;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   touch-action: manipulation;
   min-height: 48px;
   min-width: 48px;