Update main.css

Signed-off-by: Raydo Matthee <[email protected]>

css/main.css

@@ -1,102 +1,171 @@
-/* Main CSS for Skunkworks Academy */
-
-/* Import Carbon Design System styles */
-@import url("https://unpkg.com/carbon-components/css/carbon-components.min.css");
-
-/* General body styles */
-body {
-    font-family: 'Roboto', sans-serif;
-    background-color: #f4f4f4;
-    color: #161616;
+/* main.css */
+body, html {
     margin: 0;
     padding: 0;
+    font-family: 'IBM Plex Sans', sans-serif;
+    background-color: #0A0A23; /* Dark Blue Background */
+    color: #FFFFFF; /* White Text */
+    overflow-x: hidden;
 }
 
-/* Header styles */
-.bx--header {
-    background-color: #0f62fe;
-    color: #ffffff;
+.section {
+    padding: 20px;
+    border-top: 2px solid #2563EB; /* Light Blue Border */
+    text-align: center;
 }
 
-/* Main content styles */
-.bx--content {
-    padding: 2rem;
+.section h1 {
+    margin-bottom: 20px;
+    color: #60A5FA; /* Light Blue */
 }
 
-/* Footer styles */
-.bx--footer {
-    background-color: #0f62fe;
-    color: #ffffff;
-    padding: 1rem 0;
-    text-align: center;
+.welcome-section {
+    background: url('https://source.unsplash.com/random/1600x900') no-repeat center center/cover;
+    padding: 50px 20px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+    position: relative;
 }
 
-/* Button styles */
-.bx--btn {
-    margin: 0.5rem;
+.welcome-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 0;
 }
 
-/* Form input styles */
-.input-field {
-    border-radius: 0.375rem; /* 6px */
-    border: 1px solid #d1d5db;
+.welcome-section-content {
+    position: relative;
+    z-index: 1;
 }
 
-.input-field:focus {
-    border-color: #0f62fe;
-    box-shadow: 0 0 0 1px #0f62fe;
+.welcome-section h1 {
+    font-size: 2.5rem;
+    animation: fadeInDown 1s ease-out;
 }
 
-/* Checkbox styles */
-.checkbox-custom {
-    border-color: #0f62fe;
+.welcome-section p {
+    font-size: 1.2rem;
+    margin: 10px 0;
+    animation: fadeInUp 1s ease-out;
 }
 
-.checkbox-custom:checked {
-    background-color: #0f62fe;
-    border-color: #0f62fe;
+.welcome-section a {
+    color: #FFDD57; /* Highlight color */
+    text-decoration: underline;
+    transition: color 0.3s ease;
 }
 
-/* Utility classes */
-.text-center {
-    text-align: center;
+.welcome-section a:hover {
+    color: #FFB800;
 }
 
-.mt-4 {
-    margin-top: 1rem;
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.mb-4 {
-    margin-bottom: 1rem;
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.p-4 {
-    padding: 1rem;
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    padding: 10px;
 }
 
-/* Additional styles for sidebar */
-#sidebar {
-    transform: translateX(-100%);
-    transition: transform 0.3s ease-in-out;
+.grid-container div {
+    border: 1px solid #2563EB; /* Light Blue Border */
+    padding: 20px;
+    background-color: #1E3A8A; /* Medium Blue Background */
+    color: #FFFFFF; /* White Text */
+    border-radius: 5px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-#sidebar.open {
-    transform: translateX(0);
+.grid-container div:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.5); /* Light Blue Shadow */
 }
 
-/* Dropdown menu style */
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    padding: 12px 16px;
-    z-index: 1;
+.statistics {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 20px;
+    border-top: 2px solid #2563EB; /* Light Blue Border */
+    border-bottom: 2px solid #2563EB; /* Light Blue Border */
+    background-color: #0F62FE; /* $interactive-01 */
+}
+
+.statistics p {
+    font-size: 1.5rem; /* $heading-03 */
+    font-weight: 600; /* $heading-compact-01 */
+    margin: 10px;
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #F4F4F4; /* $ui-background */
+    color: #0F62FE; /* $interactive-01 */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    flex: 1 1 calc(33.333% - 40px);
+    text-align: center;
 }
 
-.dropdown:hover .dropdown-content {
-    display: block;
+.statistics p:hover {
+    transform: scale(1.1);
+    box-shadow: 0 10px 20px rgba(0, 43, 255, 0.5); /* Custom shadow */
+    color: #0043CE; /* $interactive-04 */
+    border-bottom: 2px solid #0043CE; /* $interactive-04 */
+}
+
+@media (max-width: 768px) {
+    .welcome-section h1 {
+        font-size: 2rem;
+    }
+
+    .welcome-section p {
+        font-size: 1rem;
+    }
+
+    .statistics p {
+        flex: 1 1 100%;
+        margin: 10px 0;
+    }
+
+    .grid-container div {
+        padding: 10px;
+    }
 }
 
-/* Ensure that this matches the overall design of your site. */
+@media (max-width: 480px) {
+    .welcome-section h1 {
+        font-size: 1.5rem;
+    }
+
+    .welcome-section p {
+        font-size: 0.9rem;
+    }
+
+    .statistics p {
+        padding: 10px;
+    }
+}