/* ========================================= 1. Design System & Variables ========================================= */ :root { /* Brand Colors (Refined Warm Dark Mode) */ --color-primary: #D14030; /* Slightly brighter Rust/Red */ --color-primary-hover: #E74C3C; --color-bg-main: #1A1A1A; /* Warmer Charcoal (was #121212) */ --color-bg-sec: #262626; /* Lighter Grey (was #1E1E1E) */ --color-bg-card: #333333; /* Card surface */ --color-text-main: #FFFFFF; /* Pure White for contrast */ --color-text-sec: #E5E5E5; /* High contrast grey (was #A1A1AA) */ --color-text-muted: #A3A3A3; --color-border: #404040; /* Spacing Scale (Antigravity System) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Typography */ --font-heading: 'Lexend', sans-serif; --font-body: 'Source Sans 3', sans-serif; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* Layout */ --container-width: 1200px; --header-height: 80px; } /* ========================================= 2. Reset & Base Styles ========================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-bg-main); color: var(--color-text-main); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-text-main); } a { text-decoration: none; color: inherit; transition: all 0.2s ease; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md); } /* ========================================= 3. Components ========================================= */ /* Buttons */ .btn { display: inline-block; padding: 12px 28px; border-radius: 50px; /* Pill shape */ font-weight: 600; font-size: 1rem; cursor: pointer; text-align: center; border: 2px solid transparent; transition: all 0.3s ease; font-family: var(--font-heading); } .btn-primary { background-color: var(--color-primary); color: white; box-shadow: var(--shadow-md); } .btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background-color: transparent; color: var(--color-text-main); border-color: var(--color-text-main); } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .btn-block { display: block; width: 100%; } /* ========================================= 4. Header & Navigation ========================================= */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: #FFFFFF; z-index: 1000; border-bottom: 1px solid #E5E5E5; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); display: flex; align-items: center; } .header-inner { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; } .logo-img { height: 60px; /* Adjust based on header height */ width: auto; object-fit: contain; } /* ========================================= 5. Hero Section ========================================= */ .hero-section { position: relative; height: 90vh; /* High impact */ min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; /* Lighter overlay: Gradient from top (dark for header) and bottom (dark for transition), transparency in middle */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, rgba(18, 18, 18, 1) 100%), var(--hero-img); background-size: cover; background-position: center; padding-top: var(--header-height); } .hero-content { max-width: 900px; z-index: 2; /* Glassmorphism for better text readability vs "dull" full overlay */ background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); padding: var(--space-xl); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); } .hero-title { font-size: 4rem; margin-bottom: var(--space-md); letter-spacing: -1px; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Boost contrast */ } .text-highlight { color: var(--color-primary); /* Gradient text effect optional */ /* background: linear-gradient(to right, #C1392B, #E74C3C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ } .hero-subtitle { font-size: 1.25rem; color: var(--color-text-sec); margin-bottom: var(--space-xl); max-width: 600px; margin-left: auto; max-width: 900px; margin-left: auto; margin-right: auto; } .btn-group { display: flex; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-lg); } /* Short Hero Form */ .hero-short-form { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--space-md); border-radius: 12px; margin-top: var(--space-md); display: inline-block; border: 1px solid rgba(255, 255, 255, 0.1); } .form-micro-copy { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.5px; } .inline-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; } .inline-form input, .inline-form select { width: auto; min-width: 150px; padding: 8px 12px; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.5); color: white; } .btn-sm { padding: 8px 16px; font-size: 0.9rem; } /* Quick Facts Strip */ .quick-facts-section { background: var(--color-primary); /* Stand out strip */ color: white; padding: var(--space-md) 0; } .facts-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: var(--space-md); } .fact-item { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.95rem; } .fact-icon { font-size: 1.2rem; } /* ========================================= 6. Social Proof ========================================= */ .social-proof-section { background-color: var(--color-bg-sec); padding: var(--space-lg) 0; text-align: center; border-bottom: 1px solid var(--color-border); } .trust-label { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-text-muted); margin-bottom: var(--space-md); } .logo-grid { display: flex; justify-content: center; gap: var(--space-2xl); flex-wrap: wrap; align-items: center; } .trust-logo { max-height: 80px; width: auto; opacity: 1; transition: transform 0.3s ease; filter: none; /* Removed grayscale */ } .trust-logo:hover { transform: scale(1.08); } /* ========================================= 7. How It Works ========================================= */ .how-it-works-section { padding: var(--space-3xl) 0; background-color: var(--color-bg-main); } .text-center { text-align: center; } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); text-align: center; } .step-card { position: relative; padding: var(--space-lg); } .step-number { font-size: 2rem; font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-sm); background: rgba(255, 255, 255, 0.05); width: 60px; height: 60px; line-height: 60px; border-radius: 50%; margin-left: auto; margin-right: auto; border: 2px solid var(--color-primary); } .step-card h3 { margin-bottom: var(--space-xs); } /* ========================================= 8. Visual Showcase ========================================= */ .showcase-section { padding: var(--space-3xl) 0; background-color: var(--color-bg-sec); /* Alternating bg */ } .section-header { text-align: center; margin-bottom: var(--space-2xl); } .section-title { font-size: 2.5rem; margin-bottom: var(--space-sm); } .section-desc { color: var(--color-text-sec); font-size: 1.1rem; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); } .gallery-card { height: 300px; border-radius: 12px; background-color: var(--color-bg-card); overflow: hidden; position: relative; box-shadow: var(--shadow-md); transition: transform 0.3s ease; /* Placeholders for CSS only */ background-size: cover; background-position: center; } /* Background images moved to index.html style attributes for easier manual editing */ .gallery-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .gallery-placeholder { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--space-md); background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); color: white; text-align: left; } .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; color: white; } .card-subtext { font-size: 0.95rem; font-weight: 400; color: #e0e0e0; line-height: 1.3; } .gallery-card { position: relative; cursor: pointer; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .card-action { display: inline-block; margin-top: 12px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--color-primary); opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; } .gallery-card:hover .card-action { opacity: 1; transform: translateX(0); } /* ========================================= 8. Benefits Section ========================================= */ .benefits-section { padding: var(--space-3xl) 0; background-color: var(--color-bg-sec); } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl); } .benefit-card { background: var(--color-bg-card); padding: var(--space-xl); border-radius: 16px; text-align: center; box-shadow: var(--shadow-sm); transition: transform 0.3s ease; border: 1px solid transparent; } .benefit-card:hover { transform: translateY(-5px); border-color: var(--color-primary); } .icon-box { font-size: 2.5rem; margin-bottom: var(--space-md); display: inline-block; padding: var(--space-sm); background: rgba(193, 57, 43, 0.1); border-radius: 50%; width: 80px; height: 80px; line-height: 1.5; } .benefit-card h3 { margin-bottom: var(--space-sm); font-size: 1.25rem; } .benefit-card p { color: var(--color-text-sec); font-size: 1rem; } /* ========================================= 9. Contact / Lead Capture ========================================= */ .contact-section { padding: var(--space-3xl) 0; background-color: var(--color-bg-main); } .contact-container { max-width: 600px; /* Focus the attention */ } .form-wrapper { background: var(--color-bg-sec); padding: var(--space-2xl); border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); } .form-title { text-align: center; margin-bottom: var(--space-xs); color: var(--color-primary); } .form-desc { text-align: center; color: var(--color-text-sec); margin-bottom: var(--space-xl); } .form-group { margin-bottom: var(--space-lg); } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; color: var(--color-text-main); } input, select { width: 100%; padding: 12px 16px; background-color: var(--color-bg-main); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-main); font-family: var(--font-body); font-size: 1rem; transition: all 0.2s ease; } input:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(193, 57, 43, 0.2); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .form-footer { text-align: center; margin-top: var(--space-md); font-size: 0.8rem; color: var(--color-text-muted); } /* Success State */ .success-message { text-align: center; padding: var(--space-xl) 0; } .hidden { display: none; } .success-icon { font-size: 4rem; margin-bottom: var(--space-md); animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* ========================================= 10. Footer ========================================= */ .site-footer { padding: var(--space-3xl) 0 var(--space-lg); background-color: #000; text-align: center; } .footer-quote { font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; color: var(--color-text-main); max-width: 700px; margin: 0 auto var(--space-2xl); } .footer-cta { margin-bottom: var(--space-xl); text-align: center; } .footer-brand { font-weight: 700; margin-bottom: var(--space-xs); color: var(--color-text-muted); } .link-cta { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; } .link-cta:hover { color: var(--color-text-main); margin-left: 5px; } .reassurance-text { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 8px; letter-spacing: 0.5px; } .copyright { color: var(--color-text-muted); font-size: 0.8rem; text-align: center; border-top: 1px solid var(--color-border); padding-top: var(--space-lg); } /* ========================================= 11. Mobile Responsiveness ========================================= */ @media (max-width: 768px) { :root { --space-3xl: 48px; } .hero-title { font-size: 2.25rem; } .form-wrapper { padding: var(--space-lg); } .form-row { grid-template-columns: 1fr; } /* Sticky CTA on Mobile (Optional enhancement) */ .site-header .btn { display: none; /* Hide top CTA on mobile to save space? Or keep it simple. */ /* Let's keep it hidden on really small screens if logo takes space */ } } /* MOBILE: reduce CTA duplication in hero */ @media (max-width: 768px) { .hero-section .btn-group { display: none; } } /* MOBILE: add breathing room under header */ @media (max-width: 768px) { .hero-content { padding-top: 28px; /* increase/decrease to taste */ } .hero-title { margin-top: 10px; /* helps separate from logo area */ } } @media (max-width: 768px) { .hero-section { padding-top: 70px; /* match your header height */ } } /* MOBILE: center the logo in header */ @media (max-width: 768px) { .header-inner { justify-content: center; position: relative; } .site-header .btn.btn-primary { display: none; /* optional: removes the top "Get a Quote" button on mobile */ } .logo { margin: 0 auto; display: flex; justify-content: center; } .logo-img { display: block; margin: 0 auto; } } /* MOBILE: make hero form cleaner */ @media (max-width: 768px) { .hero-short-form { margin-top: 16px; } .inline-form { display: grid; grid-template-columns: 1fr; gap: 10px; } .inline-form input, .inline-form select, .inline-form button { width: 100%; } .form-micro-copy { margin-bottom: 8px; opacity: 0.95; } } /* MOBILE: remove seam/shadow between hero and quick facts */ @media (max-width: 768px) { .hero-short-form, .hero-short-form * { box-shadow: none !important; filter: none !important; backdrop-filter: none !important; } .quick-facts-section { margin-top: 0; border-top: 0; } }