Update styles.css

Skunkworks-Labs · Oct 13, 2024 · 1c2dfb5 · 1c2dfb5
1 parent 971d5ce
commit 1c2dfb5
Showing 1 changed file with 138 additions and 33 deletions.
diff --git a/styles.css b/styles.css
@@ -1,30 +1,59 @@
 /* styles.css */
 
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+:root {
+    --primary-color: #333333;
+    --secondary-color: #3498db;
+    --text-color: #000000;
+    --background-color: #f4f4f4;
+    --white-color: #ffffff;
+    --transition-speed: 0.3s;
+}
+
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Roboto', Arial, sans-serif;
     line-height: 1.6;
-    color: #000000;
+    color: var(--text-color);
+    background-color: var(--background-color);
+    margin: 0;
+    padding: 0;
+    transition: background-color var(--transition-speed);
+}
+
+.container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 20px;
-    background-color: #f4f4f4;
+    padding: 0 20px;
 }
 
 header {
-    background-color: #333333;
-    color: #ecf0f1;
+    background-color: var(--primary-color);
+    color: var(--white-color);
     padding: 1rem;
-    text-align: center;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+    transition: background-color var(--transition-speed);
 }
 
 .logo {
     max-width: 200px;
     height: auto;
+    transition: transform var(--transition-speed);
+}
+
+.logo:hover {
+    transform: scale(1.05);
 }
 
 nav {
-    background-color: #333333;
+    background-color: var(--primary-color);
     padding: 10px 0;
+    position: sticky;
+    top: 70px;
+    z-index: 999;
 }
 
 nav ul {
@@ -33,77 +62,98 @@ nav ul {
     margin: 0;
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
 }
 
 nav ul li {
-    margin: 0 10px;
+    margin: 5px 10px;
 }
 
 nav ul li a {
-    color: #ecf0f1;
+    color: var(--white-color);
     text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color var(--transition-speed);
 }
 
-h1 {
-    color: #ffffff;
+nav ul li a:hover {
+    background-color: var(--secondary-color);
 }
 
-h2, h3 {
-    color: #010101;
+.content {
+    margin-top: 120px;
+    animation: fadeIn 1s ease-out;
 }
 
-.content {
-    margin-top: 2rem;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+h1 {
+    color: var(--white-color);
+}
+
+h2, h3 {
+    color: var(--text-color);
 }
 
 .case-study {
-    background-color: #fff;
+    background-color: var(--white-color);
     padding: 1.5rem;
     margin-bottom: 2rem;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
+}
+
+.case-study:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
 }
 
 .linkedin-post {
-    background-color: #333333;
-    color: white;
+    background-color: var(--primary-color);
+    color: var(--white-color);
     padding: 1rem;
     margin-top: 1rem;
     border-left: 4px solid #03a9f4;
+    border-radius: 0 10px 10px 0;
 }
 
 .cta-button {
     display: inline-block;
-    background-color:#333333;
-    color: white;
+    background-color: var(--primary-color);
+    color: var(--white-color);
     padding: 10px 20px;
     text-decoration: none;
-    border-radius: 5px;
+    border-radius: 25px;
     margin-top: 1rem;
+    transition: background-color var(--transition-speed), transform var(--transition-speed);
 }
 
 .cta-button:hover {
-    background-color: #2980b9;
+    background-color: var(--secondary-color);
+    transform: scale(1.05);
 }
 
 footer {
     text-align: center;
     margin-top: 2rem;
     padding: 1rem;
-    background-color: #333333;
-    color: #ecf0f1;
+    background-color: var(--primary-color);
+    color: var(--white-color);
 }
 
 footer a {
-    color: #3498db;
+    color: var(--secondary-color);
 }
 
+/* Responsive design */
 @media (max-width: 768px) {
-    body {
-        padding: 10px;
-    }
-    .case-study {
-        padding: 1rem;
+    .container {
+        padding: 0 10px;
     }
     nav ul {
         flex-direction: column;
@@ -112,4 +162,59 @@ footer a {
     nav ul li {
         margin: 5px 0;
     }
+    .content {
+        margin-top: 160px;
+    }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text-color: #f4f4f4;
+        --background-color: #1a1a1a;
+    }
+    .case-study {
+        background-color: #2c2c2c;
+    }
+    .linkedin-post {
+        background-color: #1c3f5f;
+    }
+}
+
+/* Menu toggle for mobile */
+.menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--white-color);
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+@media (max-width: 768px) {
+    .menu-toggle {
+        display: block;
+    }
+    nav ul {
+        display: none;
+    }
+    nav ul.show {
+        display: flex;
+    }
+}
+
+/* Social icons in footer */
+.social-icons {
+    margin-top: 1rem;
+}
+
+.social-icons a {
+    color: var(--white-color);
+    font-size: 1.5rem;
+    margin: 0 10px;
+    transition: color var(--transition-speed);
+}
+
+.social-icons a:hover {
+    color: var(--secondary-color);
 }