91 lines
2.9 KiB
CSS
91 lines
2.9 KiB
CSS
/* The main container for your Landing/Hero section */
|
|
.hero-section {
|
|
width: 100%;
|
|
/* FIX: Force the hero to take up exactly the remaining vertical space */
|
|
height: calc(100vh - 142px); /* Header(92) + Footer(50) = 142 */
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
/* MODIFIED: Changed from 'center' to 'flex-start' so we can manually space it */
|
|
justify-content: flex-start;
|
|
/* Aggressive overflow control to stop the "1px leak" */
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
background-color: #001219;
|
|
background-image: radial-gradient(at 0% 0%, rgba(0, 95, 115, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(10, 147, 150, 0.12) 0px, transparent 50%), radial-gradient(at 80% 20%, rgba(0, 180, 216, 0.08) 0px, transparent 40%);
|
|
}
|
|
|
|
/* Invisible spacer before the content to "push" it down visually */
|
|
.hero-section::before {
|
|
content: "";
|
|
/* This pushes the content block down by a fluid amount of available space */
|
|
flex-grow: 1;
|
|
max-height: 20vh; /* Limits how far it goes on huge screens */
|
|
min-height: 5vh; /* Minimum safe distance from header on laptops */
|
|
}
|
|
|
|
/* Ensure other overlays remain z-indexed correctly */
|
|
.hero-section::after {
|
|
content: "";
|
|
/* (keep your subtle grid overlays here) */
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 10; /* Keep content forward */
|
|
text-align: center;
|
|
padding: 0 2rem;
|
|
/* Standard constraints */
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
/* FIX: Make the content itself a flexible stack so it can shrink */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* Proportional spacing between ALL core elements (h1 -> p -> buttons -> icons) */
|
|
gap: clamp(1vh, 3vh, 30px);
|
|
}
|
|
|
|
/* Typography Spacing Fixes */
|
|
.hero-content h1 {
|
|
/* Responsive text that shrinks on smaller laptop viewports */
|
|
font-size: clamp(2rem, 5.5vh, 3.5rem);
|
|
line-height: 1.1;
|
|
color: #fff;
|
|
margin: 0; /* Reset margins in favor of gap */
|
|
}
|
|
|
|
.hero-content p {
|
|
font-size: clamp(1rem, 2vh, 1.25rem);
|
|
color: var(--payoff-color);
|
|
margin: 0; /* Reset margins in favor of gap */
|
|
}
|
|
|
|
/* FIX: Refactored Call to Action Container */
|
|
.cta-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 15px;
|
|
/* Removed margin-bottom in favor of hero-content gap */
|
|
/* Keep a minimum height for the buttons themselves, but no max-height */
|
|
min-height: 40px;
|
|
}
|
|
|
|
/* Ensure the button borders/shadows don't cause the 1px leak */
|
|
.btn-calltoaction-blue, .btn-calltoaction-white {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Features Grid Spacing */
|
|
.features-grid {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 20px;
|
|
/* Optional: Ensure this section isn't stretching */
|
|
align-items: flex-start;
|
|
}
|