diff --git a/attached_assets/image_1762642803863.png b/attached_assets/image_1762642803863.png new file mode 100644 index 0000000..9f8b1cf Binary files /dev/null and b/attached_assets/image_1762642803863.png differ diff --git a/static/css/styles.css b/static/css/styles.css index 19b12ea..f8cdc88 100644 --- a/static/css/styles.css +++ b/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%; } }