Center team section content with a dark, full-screen background image

Update CSS to make the team section full-screen, apply a dark overlay, center text content, and use a black and white background image.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9f8d327b-c9b7-4375-aa7f-92524a6ba8f6
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/9q3pahd

static/css/styles.css

@@ -624,47 +624,74 @@ hr {
 }
 
 .team-section {
-    display: flex;
-    align-items: center;
-    gap: 48px;
-    margin: 64px 0;
-    width: 100%;
-}
-
-.team-text {
-    flex: 1;
-    text-align: left;
-}
-
-.team-text .sub-header {
-    text-align: left;
-    margin: 0 0 24px 0;
-}
-
-.team-text .sub-content {
-    text-align: left;
-    margin: 0 0 32px 0;
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    margin-left: calc(-50vw + 50%);
+    overflow: hidden;
 }
 
 .team-image-wrapper {
-    flex: 1;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
-    overflow: hidden;
-    height: 400px;
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
 }
 
 .team-image-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    filter: brightness(0.7);
-    transition: transform 3s ease;
+    filter: grayscale(100%) brightness(0.65);
 }
 
-.team-image-wrapper:hover img {
-    transform: scale(1.1);
+.team-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.85) 100%);
+    z-index: 1;
+}
+
+.team-section::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 250px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, transparent 100%);
+    z-index: 2;
+    pointer-events: none;
+}
+
+.team-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    max-width: 800px;
+    width: 90%;
+    text-align: center;
+}
+
+.team-text .sub-header {
+    text-align: center;
+    margin: 0 0 24px 0;
+    color: var(--white);
+}
+
+.team-text .sub-content {
+    text-align: center;
+    margin: 0 0 32px 0;
+    color: var(--gray-300);
 }
 
 .team-cta-button {
@@ -700,18 +727,11 @@ hr {
     }
     
     .team-section {
-        flex-direction: column;
-        gap: 32px;
+        height: 100vh;
     }
     
-    .team-text .sub-header,
-    .team-text .sub-content {
-        text-align: center;
-    }
-    
-    .team-image-wrapper {
-        width: 100%;
-        height: 300px;
+    .team-text {
+        width: 90%;
     }
 }