From db4aa31c340e785bee497c49af2d88556c614776 Mon Sep 17 00:00:00 2001
From: revengeday <revengeday@noreply.git.cyberwa.re>
Date: Fri, 15 Nov 2024 23:30:02 +0000
Subject: [PATCH] Style adjustments

- Roots added
- New FAQ style
- New Credit Style
---
 css/style.css | 230 +++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 179 insertions(+), 51 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1480c92..06d227c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,6 +10,19 @@
     font-style: normal;
     font-display: swap;
 }
+:root {
+    --cyber-bg-color: #05130f;
+    --cyber-font-color: #e8f0f2;
+    --cyber-primary-color: #1bec99;
+    --cyber-secondary-color: #159262;
+    --cyber-highlight-color: #9d921d;
+    --cyber-faq-bg-color: #0d2f25;
+    --cyber-hero-overlay: rgba(0, 0, 0, 0.7);
+    --cyber-shadow: rgba(0, 0, 0, 0.5);
+    --cyber-slider-thumb-bg: #fff;
+}
+
+/* General Styles */
 * {
     margin: 0;
     padding: 0;
@@ -20,12 +33,13 @@ body {
     font-family: 'Departure Mono';
     font-size: 18px;
     line-height: 1.75;
-    background-color: #05130f;
-    color: #e8f0f2;
+    background-color: var(--cyber-bg-color);
+    color: var(--cyber-font-color);
     overflow-x: hidden;
     text-align: center;
 }
 
+/* Hero Section */
 .hero {
     position: relative;
     width: 100%;
@@ -49,12 +63,12 @@ body {
 
 .hero-text {
     position: absolute;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--cyber-hero-overlay);
     padding: 30px;
     border-radius: 15px;
     backdrop-filter: blur(5px);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
-    color: #e8f0f2;
+    box-shadow: 0 6px 12px var(--cyber-shadow);
+    color: var(--cyber-font-color);
     max-width: 80%;
 }
 
@@ -63,6 +77,7 @@ h1 {
     margin-bottom: 10px;
 }
 
+/* Main content */
 main {
     padding: 40px 20px;
     max-width: 1000px;
@@ -87,18 +102,19 @@ input[type="text"] {
     font-family: 'Departure Mono';
     width: calc(100% - 20px);
     padding: 10px;
-    border: 2px solid #1bec99;
+    border: 2px solid var(--cyber-primary-color);
     border-radius: 5px;
     background-color: #0d2f25;
-    color: #e8f0f2;
+    color: var(--cyber-font-color);
     outline: none;
     transition: border-color 0.3s;
 }
 
 input[type="text"]:focus {
-    border-color: #159262;
+    border-color: var(--cyber-secondary-color);
 }
 
+/* Radio Buttons */
 .radio-group {
     display: flex;
     justify-content: space-around;
@@ -116,25 +132,26 @@ input[type="text"]:focus {
     text-align: center;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-    background-color: #05130f;
+    background-color: var(--cyber-bg-color);
     border-radius: 5px;
     border: 2px solid transparent;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    color: #e8f0f2;
+    color: var(--cyber-font-color);
 }
 
 .radio-group input[type="radio"]:checked + label {
-    background-color: #159262;
-    border-color: #1bec99;
+    background-color: var(--cyber-secondary-color);
+    border-color: var(--cyber-primary-color);
     color: #fff;
 }
 
+/* Buttons */
 button {
     font-family: 'Departure Mono';
     padding: 10px 20px;
     border-radius: 5px;
-    background-color: #05130f;
-    color: #e8f0f2;
+    background-color: var(--cyber-bg-color);
+    color: var(--cyber-font-color);
     font-size: 1rem;
     cursor: pointer;
     border: 2px solid transparent;
@@ -143,8 +160,8 @@ button {
 }
 
 button:hover {
-    background-color: #159262;
-    border-color: #1bec99;
+    background-color: var(--cyber-secondary-color);
+    border-color: var(--cyber-primary-color);
     color: #fff;
     transform: translateY(-3px);
 }
@@ -153,10 +170,11 @@ button:active {
     transform: translateY(0);
 }
 
+/* Canvas & Output */
 .canvas-container {
     margin: 20px auto;
     max-width: 100%;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 15px var(--cyber-shadow);
     border-radius: 10px;
     overflow: hidden;
 }
@@ -168,7 +186,7 @@ button:active {
 
 #outInfo {
     font-style: italic;
-    color: #9d921d;
+    color: var(--cyber-highlight-color);
     margin: 20px 0;
     display: block;
 }
@@ -183,29 +201,135 @@ button:active {
     text-align: center;
 }
 
-.faq-section, .credits-section {
-    background-color: #0d2f25;
-    padding: 20px;
+/* FAQ Section */
+.faq-section {
+    background-color: var(--cyber-faq-bg-color);
+    padding: 30px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    color: #e8f0f2;
+    color: var(--cyber-font-color);
     margin-top: 40px;
     text-align: left;
 }
 
-.faq-section hr {
-    border: none;
-    height: 2px;
-    background: linear-gradient(to right, #159262, #1bec99);
-    margin: 20px 0;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+.faq-section h3 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: var(--cyber-primary-color);
+    text-transform: uppercase;
+    position: relative;
 }
 
-.credits-section h3 {
+.faq-section h3::after {
+    content: '';
+    display: block;
+    width: 50px;
+    height: 3px;
+    background: var(--cyber-secondary-color);
+    position: absolute;
+    left: 0;
+    bottom: -5px;
+}
+
+.faq-checkbox {
+    display: none;
+}
+
+.faq-question {
+    display: block;
+    font-weight: bold;
+    color: var(--cyber-highlight-color);
+    padding: 15px;
+    background-color: #102f2a;
+    border-radius: 8px;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 5px;
+    transition: background-color 0.3s;
+}
+
+.faq-question::before {
+    content: '>';
+    margin-right: 10px;
+    color: var(--cyber-primary-color);
+    font-weight: normal;
+}
+
+.faq-question:hover {
+    background-color: #159262;
+}
+
+.faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+    padding: 0 15px;
+    background-color: var(--cyber-faq-bg-color);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+.faq-checkbox:checked + .faq-question + .faq-answer {
+    max-height: 500px;
+    padding: 15px;
+}
+
+/* Credits Section */
+.credits-section {
+    background-color: var(--cyber-faq-bg-color);
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    color: var(--cyber-font-color);
+    margin-top: 40px;
     text-align: left;
 }
 
+.credits-section h3 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: var(--cyber-primary-color);
+    text-transform: uppercase;
+    position: relative;
+}
+
+.credits-section h3::after {
+    content: '';
+    display: block;
+    width: 50px;
+    height: 3px;
+    background: var(--cyber-secondary-color);
+    position: absolute;
+    left: 0;
+    bottom: -5px;
+}
+
+.credits-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    line-height: 1.6;
+}
+
+.credits-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--cyber-secondary-color);
+}
+
+.credits-section a {
+    font-weight: bold;
+    color: var(--cyber-primary-color);
+    transition: color 0.3s;
+}
+
+.credits-section a:hover {
+    color: var(--cyber-highlight-color);
+    text-decoration: none;
+}
+
+/* Users and Credits */
 #usersDiv {
     display: flex;
     justify-content: space-between;
@@ -220,15 +344,15 @@ button:active {
     padding: 20px;
     border: none;
     border-radius: 15px;
-    background-color: #0d2f25;
-    color: #e8f0f2;
+    background-color: var(--cyber-faq-bg-color);
+    color: var(--cyber-font-color);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .userSubDiv:hover {
     transform: scale(1.05);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 6px 12px var(--cyber-shadow);
 }
 
 .userItem {
@@ -238,7 +362,7 @@ button:active {
     text-decoration: underline;
     text-decoration-style: dotted;
     margin-bottom: 10px;
-    color: #1bec99;
+    color: var(--cyber-primary-color);
     transition: color 0.3s, text-decoration 0.3s;
 }
 
@@ -261,9 +385,10 @@ button:active {
     margin-right: 0.5em;
 }
 
+/* Footer */
 #footer {
     padding: 20px;
-    color: #fff;
+    color: var(--cyber-font-color);
     margin-top: 20px;
     text-align: center;
 }
@@ -272,10 +397,12 @@ button:active {
     margin-top: 10px;
     font-size: 0.9rem;
 }
+
+/* Slider */
 .slider-container {
     margin: 20px 0;
     text-align: center;
-    color: #e8f0f2;
+    color: var(--cyber-font-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -290,7 +417,7 @@ input[type="range"] {
     -webkit-appearance: none;
     width: 70%;
     margin: 10.5px 0;
-    background-color: #0d2f25;
+    background-color: var(--cyber-faq-bg-color);
 }
 
 input[type="range"]:focus {
@@ -301,16 +428,16 @@ input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
     height: 8px;
     cursor: pointer;
-    background: #1bec99;
+    background: var(--cyber-primary-color);
     border-radius: 5px;
 }
 
 input[type="range"]::-webkit-slider-thumb {
-    border: 2px solid #159262;
+    border: 2px solid var(--cyber-secondary-color);
     height: 20px;
     width: 20px;
     border-radius: 50%;
-    background: #fff;
+    background: var(--cyber-slider-thumb-bg);
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: -6px;
@@ -318,23 +445,23 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 10px #1bec99;
+    box-shadow: 0 0 10px var(--cyber-primary-color);
 }
 
 input[type="range"]::-moz-range-track {
     width: 100%;
     height: 8px;
     cursor: pointer;
-    background: #1bec99;
+    background: var(--cyber-primary-color);
     border-radius: 5px;
 }
 
 input[type="range"]::-moz-range-thumb {
-    border: 2px solid #159262;
+    border: 2px solid var(--cyber-secondary-color);
     height: 20px;
     width: 20px;
     border-radius: 50%;
-    background: #fff;
+    background: var(--cyber-slider-thumb-bg);
     cursor: pointer;
     transition: background-color 0.3s, transform 0.3s;
 }
@@ -349,21 +476,21 @@ input[type="range"]::-ms-track {
 }
 
 input[type="range"]::-ms-fill-lower {
-    background: #1bec99;
+    background: var(--cyber-primary-color);
     border-radius: 5px;
 }
 
 input[type="range"]::-ms-fill-upper {
-    background: #1bec99;
+    background: var(--cyber-primary-color);
     border-radius: 5px;
 }
 
 input[type="range"]::-ms-thumb {
-    border: 2px solid #159262;
+    border: 2px solid var(--cyber-secondary-color);
     height: 20px;
     width: 20px;
     border-radius: 50%;
-    background: #fff;
+    background: var(--cyber-slider-thumb-bg);
     cursor: pointer;
     transition: background-color 0.3s, transform 0.3s;
 }
@@ -371,15 +498,16 @@ input[type="range"]::-ms-thumb {
 #sliderValueDisplay {
     font-size: 1.1rem;
     margin-left: 10px;
-    color: #1bec99;
+    color: var(--cyber-primary-color);
     font-weight: bold;
 }
+
 a {
-    color: #1bec99;
+    color: var(--cyber-primary-color);
     transition: color 0.3s;
 }
 
 a:hover {
     text-decoration: none;
-    color: #159262;
+    color: var(--cyber-secondary-color);
 }
\ No newline at end of file