Various UX improvements to index and dropdowns

static/css/main.css

@@ -363,16 +363,15 @@ a:hover {
 }
 
 .hero-section {
-    background: var(--e2c-yellow);
     padding: 4rem 2rem;
-    margin: 0 0 3rem 0;
-    border-radius: 24px;
+    margin: 0 auto 3rem auto;
+    max-width: 1200px;
 }
 
 .hero-content {
     display: flex;
     align-items: center;
-    gap: 3rem;
+    gap: 4rem;
     max-width: 1200px;
     margin: 0 auto;
 }
@@ -381,6 +380,12 @@ a:hover {
     width: 300px;
     height: auto;
     border-radius: 16px;
+    flex-shrink: 0;
+}
+
+.hero-text {
+    flex: 1;
+    max-width: 700px;
 }
 
 .hero-text h1 {
@@ -425,14 +430,16 @@ a:hover {
 }
 
 .intro-section ul li {
-    background: var(--text-primary);
-    color: white;
+    background: var(--card-background);
+    border: 2px solid var(--e2c-yellow);
+    color: var(--text-primary);
     padding: 24px 28px;
-    border-radius: 4px;
-    font-weight: 600;
+    border-radius: 16px;
+    font-weight: 500;
     text-align: center;
     line-height: 1.4;
     font-size: 1.1rem;
+    box-shadow: 0 4px 12px var(--shadow);
 }
 
 .cards-grid {