From 13a318b231dfaed79d4838cc2c71504658e53b9d Mon Sep 17 00:00:00 2001
From: Ruben Ramirez <ruben@redlotusaustin.com>
Date: Fri, 4 Apr 2025 12:37:50 -0500
Subject: [PATCH] Initial Styling Added

---
 style.css | 101 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 70 insertions(+), 31 deletions(-)

diff --git a/style.css b/style.css
index 85437e2..4df8a5b 100644
--- a/style.css
+++ b/style.css
@@ -119,6 +119,19 @@
 
 
 /* Quiztech Dashboard Styles */
+
+:root {
+    --quiztech-widget-bg: #FFFEFE;
+    --quiztech-widget-shadow: 0px 2px 50px rgba(0, 0, 0, 0.05);
+    --quiztech-widget-radius: 8px;
+    --quiztech-text-primary: #1E1F27;
+    --quiztech-text-secondary: #696A6F;
+    --quiztech-accent-primary: #0F41D2;
+    --quiztech-font-heading: 'Sora', sans-serif; /* Ensure font is loaded */
+    --quiztech-font-body: 'Inter', sans-serif; /* Ensure font is loaded */
+    --quiztech-border-light: #EAEAEB;
+}
+
 .quiztech-dashboard-widgets {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
@@ -127,25 +140,31 @@
 }
 
 .dashboard-widget {
-    border: 1px solid #e0e0e0;
-    padding: 15px 20px;
-    background-color: #fff;
-    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+    border: none; /* Removed border, rely on shadow */
+    padding: 20px; /* Adjusted padding */
+    background-color: var(--quiztech-widget-bg);
+    box-shadow: var(--quiztech-widget-shadow);
+    border-radius: var(--quiztech-widget-radius);
 }
 
 .dashboard-widget h2 {
     margin-top: 0;
-    margin-bottom: 15px;
-    font-size: 1.2em;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 10px;
+    margin-bottom: 20px; /* Adjusted margin */
+    font-family: var(--quiztech-font-heading);
+    font-weight: 600;
+    font-size: 16px; /* Adjusted size */
+    color: var(--quiztech-text-primary);
+    border-bottom: none; /* Removed border */
+    padding-bottom: 0; /* Removed padding */
 }
 
 .dashboard-widget h3 {
     margin-top: 15px;
     margin-bottom: 10px;
-    font-size: 1em;
-    color: #555;
+    font-family: var(--quiztech-font-body); /* Changed font */
+    font-weight: 600; /* Adjusted weight */
+    font-size: 14px; /* Adjusted size */
+    color: var(--quiztech-text-primary); /* Adjusted color */
 }
 
 /* Quick Links Widget */
@@ -162,38 +181,54 @@
     margin: 0;
 }
 
-.quick-links a.button,
-.quick-links span.button.disabled {
+.quick-links a.button {
     display: inline-block;
-    padding: 8px 15px;
+    padding: 10px 15px; /* Adjusted padding */
     text-decoration: none;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    background-color: #f7f7f7;
-    color: #555;
+    border: none; /* Removed border */
+    border-radius: 6px; /* Adjusted radius */
+    background-color: var(--quiztech-accent-primary);
+    color: #FFFFFF;
     text-align: center;
+    font-family: var(--quiztech-font-body);
+    font-weight: 500;
+    transition: background-color 0.2s ease; /* Added transition */
 }
 
 .quick-links a.button:hover {
-    background-color: #f0f0f0;
-    border-color: #999;
-    color: #333;
+    background-color: #0d36a8; /* Darker blue for hover */
+    color: #FFFFFF;
 }
 
 .quick-links span.button.disabled {
-    background-color: #eee;
-    color: #aaa;
+    display: inline-block;
+    padding: 10px 15px; /* Adjusted padding */
+    text-decoration: none;
+    border: none; /* Removed border */
+    border-radius: 6px; /* Adjusted radius */
+    background-color: var(--quiztech-border-light); /* Use light border color */
+    color: var(--quiztech-text-secondary); /* Use secondary text color */
+    text-align: center;
+    font-family: var(--quiztech-font-body);
     cursor: not-allowed;
 }
 
 /* Statistics Widget */
 .statistics p {
-    margin: 0 0 10px 0;
-    font-size: 0.95em;
+    margin: 0 0 8px 0; /* Adjusted margin */
+    font-size: 12px; /* Adjusted size */
+    font-family: var(--quiztech-font-body);
+    color: var(--quiztech-text-primary);
+    line-height: 1.3; /* Added line-height for clarity */
 }
 
 .statistics strong {
-    margin-right: 5px;
+    display: block; /* Place label above value */
+    margin: 0 0 4px 0; /* Adjusted margin */
+    font-family: var(--quiztech-font-body);
+    font-size: 10px; /* Adjusted size */
+    color: var(--quiztech-text-secondary);
+    font-weight: 400; /* Adjusted weight */
 }
 
 /* Recent Activity Widget */
@@ -205,14 +240,16 @@
     list-style: none;
     margin: 0 0 10px 0;
     padding: 0;
-    font-size: 0.9em;
-    color: #333;
+    /* font-size and color handled by li */
 }
 
 .recent-activity li {
-    padding: 5px 0;
-    border-bottom: 1px dotted #eee;
+    padding: 8px 0; /* Adjusted padding */
+    border-bottom: 1px solid var(--quiztech-border-light); /* Adjusted border */
     margin: 0;
+    font-family: var(--quiztech-font-body);
+    font-size: 12px; /* Adjusted size */
+    color: var(--quiztech-text-secondary); /* Adjusted color */
 }
 
 .recent-activity li:last-child {
@@ -220,10 +257,12 @@
 }
 
 .recent-activity strong {
-    color: #0073aa;
+    color: var(--quiztech-text-primary); /* Adjusted color */
+    font-weight: 500; /* Adjusted weight */
 }
 
 .recent-activity em {
-    color: #555;
+    color: var(--quiztech-text-secondary); /* Adjusted color */
+    font-style: normal; /* Removed italics */
 }