From 2217515180754444b765caa3c00c069fefcb7b9d Mon Sep 17 00:00:00 2001
From: Sebastian Korotkiewicz <skorotkiewicz@gmail.com>
Date: Fri, 18 Apr 2025 22:46:29 +0200
Subject: [PATCH] new dark style

---
 src/styles.scss | 352 ++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 295 insertions(+), 57 deletions(-)

diff --git a/src/styles.scss b/src/styles.scss
index 23706c8..f730f9c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,54 +1,68 @@
 // Variables
-$primary: #4a6fa5;
-$primary-dark: #385580;
-$secondary: #6c5ce7;
-$light: #f8f9fa;
-$dark: #212529;
-$success: #28a745;
-$gray: #6c757d;
-$gray-light: #e9ecef;
+$primary: #00ff00;
+$primary-dark: #00cc00;
+$secondary: #660099;
+$light: #0a0a0a;
+$dark: #00ff00;
+$success: #00bb00;
+$gray: #777777;
+$gray-light: #1a1a1a;
+$accent: #ff00ff;
+$terminal-bg: #0f0f0f;
+$terminal-text: #00ff00;
+$terminal-font: 'Courier New', monospace;
 
 // Base styles
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: $terminal-font;
 }
 
 body {
     background-color: $light;
-    color: $dark;
+    color: $terminal-text;
     line-height: 1.6;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333' fill-opacity='0.2'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 // Header styles
 header {
-    background: linear-gradient(135deg, $primary, $secondary);
-    color: white;
+    background: linear-gradient(135deg, $terminal-bg, $secondary);
+    color: $primary;
     padding: 2rem 0;
     text-align: center;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
+    border-bottom: 1px solid $primary;
 
     .logo {
         font-size: 2.5rem;
         font-weight: bold;
         margin-bottom: 1rem;
+        text-shadow: 0 0 5px $primary;
+        letter-spacing: 3px;
     }
 
     .tagline {
         font-size: 1.2rem;
         opacity: 0.9;
+        font-family: $terminal-font;
+        &:before {
+            content: "> ";
+            color: $primary;
+        }
     }
 }
 
 // Navigation
 nav {
-    background-color: white;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background-color: $terminal-bg;
+    box-shadow: 0 2px 5px rgba(0, 255, 0, 0.2);
     position: sticky;
     top: 0;
     z-index: 100;
+    border-bottom: 1px solid $primary-dark;
 
     .navbar {
         display: flex;
@@ -65,6 +79,7 @@ nav {
         color: $primary;
         text-decoration: none;
         padding: 1rem 0;
+        text-shadow: 0 0 3px $primary;
     }
 
     .nav-links {
@@ -74,12 +89,16 @@ nav {
         li a {
             display: block;
             padding: 1rem;
-            color: $dark;
+            color: $primary;
             text-decoration: none;
-            transition: color 0.3s;
+            transition: all 0.3s;
+            border: 1px solid transparent;
 
             &:hover {
-                color: $primary;
+                color: $light;
+                background-color: $primary;
+                border: 1px solid $primary-dark;
+                box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
             }
         }
     }
@@ -101,6 +120,16 @@ nav {
         font-size: 2.5rem;
         margin-bottom: 1rem;
         color: $primary;
+        text-shadow: 0 0 5px $primary;
+        letter-spacing: 2px;
+        &:before {
+            content: "[ ";
+            color: $accent;
+        }
+        &:after {
+            content: " ]";
+            color: $accent;
+        }
     }
 
     p {
@@ -110,6 +139,10 @@ nav {
         max-width: 800px;
         margin-left: auto;
         margin-right: auto;
+        &:before {
+            content: "$ ";
+            color: $primary;
+        }
     }
 }
 
@@ -117,16 +150,21 @@ nav {
 .btn {
     display: inline-block;
     padding: 0.8rem 1.5rem;
-    background-color: $primary;
-    color: white;
+    background-color: $terminal-bg;
+    color: $primary;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: 0;
     font-weight: 500;
-    transition: background-color 0.3s, transform 0.2s;
+    transition: all 0.3s;
     cursor: pointer;
-
+    border: 1px solid $primary;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    
     &:hover {
-        background-color: $primary-dark;
+        background-color: $primary;
+        color: $terminal-bg;
+        box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
         transform: translateY(-2px);
     }
 
@@ -138,22 +176,25 @@ nav {
 
 // Connection methods
 .connection-methods {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    background-color: $terminal-bg;
+    border-radius: 0;
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
     padding: 2rem;
     margin-bottom: 2rem;
+    border: 1px solid $primary;
 }
 
 .method-card {
     background-color: $gray-light;
-    border-radius: 8px;
+    border-radius: 0;
     padding: 1.5rem;
     margin-bottom: 1rem;
-    transition: transform 0.3s;
+    transition: all 0.3s;
+    border-left: 3px solid $primary;
 
     &:hover {
         transform: translateY(-5px);
+        box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
     }
 
     .method-title {
@@ -162,15 +203,25 @@ nav {
         margin-bottom: 0.5rem;
         display: flex;
         align-items: center;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        
+        &:before {
+            content: ">";
+            margin-right: 0.5rem;
+            color: $accent;
+        }
     }
 
     .method-icon {
         margin-right: 0.5rem;
         font-size: 1.4rem;
+        color: $accent;
     }
 
     .method-details {
         color: $gray;
+        font-family: $terminal-font;
     }
 }
 
@@ -180,9 +231,12 @@ nav {
     color: $primary;
     font-weight: 500;
     text-decoration: none;
-
+    border-bottom: 1px dashed $primary;
+    
     &:hover {
-        text-decoration: underline;
+        text-decoration: none;
+        text-shadow: 0 0 5px $primary;
+        border-bottom: 1px solid $primary;
     }
 }
 
@@ -195,31 +249,47 @@ nav {
 }
 
 .feature-card {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    background-color: $terminal-bg;
+    border-radius: 0;
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
     padding: 2rem;
     text-align: center;
-    transition: transform 0.3s;
-
+    transition: all 0.3s;
+    border: 1px solid $primary-dark;
+    
     &:hover {
         transform: translateY(-10px);
+        box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
+        border-color: $primary;
     }
 
     .feature-icon {
         font-size: 2.5rem;
         color: $primary;
         margin-bottom: 1rem;
+        text-shadow: 0 0 5px $primary;
     }
 
     .feature-title {
         font-size: 1.5rem;
         margin-bottom: 1rem;
-        color: $dark;
+        color: $primary;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        
+        &:before {
+            content: "[ ";
+            color: $accent;
+        }
+        &:after {
+            content: " ]";
+            color: $accent;
+        }
     }
 
     .feature-text {
         color: $gray;
+        font-family: $terminal-font;
     }
 }
 
@@ -229,15 +299,37 @@ nav {
     margin: 3rem 0 2rem;
     color: $primary;
     font-size: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    position: relative;
+    text-shadow: 0 0 5px $primary;
+    
+    &:before, &:after {
+        content: "====================";
+        color: $primary-dark;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 1rem;
+    }
+    
+    &:before {
+        top: -1.5rem;
+    }
+    
+    &:after {
+        bottom: -1.5rem;
+    }
 }
 
 // FAQ section
 .faq-item {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    background-color: $terminal-bg;
+    border-radius: 0;
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
     margin-bottom: 1rem;
     overflow: hidden;
+    border: 1px solid $primary-dark;
 
     .faq-question {
         background-color: $gray-light;
@@ -247,11 +339,26 @@ nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        color: $primary;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        
+        &:before {
+            content: "?> ";
+            color: $accent;
+        }
     }
 
     .faq-answer {
         padding: 1rem;
         color: $gray;
+        font-family: $terminal-font;
+        border-top: 1px dashed $primary-dark;
+        
+        &:before {
+            content: "$> ";
+            color: $primary;
+        }
     }
 }
 
@@ -262,13 +369,19 @@ nav {
 }
 
 .step {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    background-color: $terminal-bg;
+    border-radius: 0;
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     position: relative;
     padding-left: 3.5rem;
+    border: 1px solid $primary-dark;
+    
+    &:hover {
+        border-color: $primary;
+        box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
+    }
 
     &::before {
         counter-increment: step-counter;
@@ -276,30 +389,34 @@ nav {
         position: absolute;
         left: 1rem;
         top: 1.5rem;
-        background-color: $primary;
-        color: white;
+        background-color: $terminal-bg;
+        color: $primary;
         width: 2rem;
         height: 2rem;
-        border-radius: 50%;
+        border-radius: 0;
         display: flex;
         justify-content: center;
         align-items: center;
         font-weight: bold;
+        border: 1px solid $primary;
     }
 
     &-title {
         color: $primary;
         margin-bottom: 0.5rem;
         font-size: 1.2rem;
+        text-transform: uppercase;
+        letter-spacing: 1px;
     }
 }
 
 // Footer
 footer {
-    background-color: $dark;
-    color: white;
+    background-color: $terminal-bg;
+    color: $primary;
     padding: 3rem 0;
     margin-top: 3rem;
+    border-top: 1px solid $primary;
 
     .footer-content {
         max-width: 1200px;
@@ -312,8 +429,16 @@ footer {
 
     .footer-section {
         h3 {
-            color: $gray-light;
+            color: $primary;
             margin-bottom: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-shadow: 0 0 3px $primary;
+            
+            &:before {
+                content: "# ";
+                color: $accent;
+            }
         }
     }
 
@@ -328,9 +453,15 @@ footer {
             color: $gray;
             text-decoration: none;
             transition: color 0.3s;
+            
+            &:before {
+                content: "- ";
+                color: $primary;
+            }
 
             &:hover {
-                color: white;
+                color: $primary;
+                text-shadow: 0 0 3px $primary;
             }
         }
     }
@@ -339,8 +470,19 @@ footer {
         text-align: center;
         padding: 1rem 0;
         color: $gray;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-top: 1px solid $primary-dark;
         margin-top: 2rem;
+        font-family: $terminal-font;
+        
+        &:before {
+            content: "/* ";
+            color: $primary;
+        }
+        
+        &:after {
+            content: " */";
+            color: $primary;
+        }
     }
 }
 
@@ -367,12 +509,20 @@ footer {
 }
 
 .code-block {
-    background-color: #f1f1f1;
-    border-radius: 4px;
-    padding: 0.5rem;
-    font-family: monospace;
+    background-color: $terminal-bg;
+    border-radius: 0;
+    padding: 0.8rem;
+    font-family: $terminal-font;
     overflow-x: auto;
     margin: 0.5rem 0;
+    color: $primary;
+    border: 1px solid $primary-dark;
+    position: relative;
+    
+    &:before {
+        content: "> ";
+        color: $accent;
+    }
 }
 
 .tip {
@@ -380,12 +530,100 @@ footer {
     border-left: 4px solid $primary;
     padding: 1rem;
     margin: 1rem 0;
+    
+    &:before {
+        content: "! ";
+        color: $accent;
+        font-weight: bold;
+    }
 }
 
 .screenshot {
     max-width: 100%;
     height: auto;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
     margin: 1rem 0;
+    border: 1px solid $primary-dark;
+    filter: brightness(0.9) contrast(1.1) saturate(1.2);
+}
+
+// Glitch effect
+@keyframes glitch {
+    0% {
+        text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
+    }
+    14% {
+        text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
+    }
+    15% {
+        text-shadow: -0.05em -0.025em 0 $accent, 0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
+    }
+    49% {
+        text-shadow: -0.05em -0.025em 0 $accent, 0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
+    }
+    50% {
+        text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
+    }
+    99% {
+        text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
+    }
+    100% {
+        text-shadow: -0.025em 0 0 $accent, -0.025em -0.025em 0 rgba(255, 0, 255, 0.75);
+    }
+}
+
+.glitch-text {
+    animation: glitch 1s linear infinite;
+    color: $primary;
+}
+
+// Terminal effect
+.terminal {
+    background-color: $terminal-bg;
+    border: 1px solid $primary;
+    padding: 1rem;
+    font-family: $terminal-font;
+    color: $primary;
+    position: relative;
+    
+    &:before {
+        content: "$ ";
+        color: $primary;
+    }
+    
+    .cursor {
+        display: inline-block;
+        width: 10px;
+        height: 20px;
+        background-color: $primary;
+        animation: blink 1s step-end infinite;
+    }
+}
+
+@keyframes blink {
+    from, to {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+// Matrix effect background element
+.matrix-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.05;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 255, 0, 0.15) 0px,
+        rgba(0, 255, 0, 0.15) 1px,
+        transparent 1px,
+        transparent 2px
+    );
 }
\ No newline at end of file