/* ================================================================= The Eco Works — Hero Section Styles File: hero.css INSTALLATION: 1. Upload into your /css/ folder 2. Add to index.html after resources.css: 3. Replace the banner section in index.html — see hero_banner.html ================================================================= */ /* ── Override DragonFruit's default banner ───────────────────── */ .banner { height: auto !important; min-height: 420px; margin-top: 94px; background: #0F6E56 !important; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* ── Background circle decorations ──────────────────────────── */ .banner::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: #1D9E75; opacity: 0.2; top: -200px; right: -100px; pointer-events: none; } .banner::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: #085041; opacity: 0.5; bottom: -100px; left: -60px; pointer-events: none; } /* ── Override the ul/li slide structure ─────────────────────── */ .banner ul { list-style: none; padding: 0; margin: 0; width: 100%; } .banner ul li { float: none !important; height: auto !important; width: 100% !important; background: none !important; display: flex; align-items: center; justify-content: center; padding: 60px 24px; box-sizing: border-box; } /* ── Hero content wrapper ────────────────────────────────────── */ .hero-content { position: relative; z-index: 2; text-align: center; max-width: 680px; width: 100%; } /* ── Logo lockup ─────────────────────────────────────────────── */ .hero-logo-lockup { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; } .hero-logo-icon { width: 80px; height: 80px; flex-shrink: 0; } .hero-logo-wordmark { text-align: left; } .hero-logo-the { display: block; font: normal normal 700 13px/1em 'Century Gothic', sans-serif; color: #9FE1CB; letter-spacing: 4px; margin-bottom: 4px; } .hero-logo-name { display: block; font: normal normal 700 32px/1em 'Century Gothic', sans-serif; color: #ffffff; letter-spacing: 2px; } /* ── Divider ─────────────────────────────────────────────────── */ .hero-divider { width: 60px; height: 2px; background: #5DCAA5; margin: 0 auto 24px; } /* ── Tagline ─────────────────────────────────────────────────── */ .hero-tagline { font: normal normal normal 17px/1.7em 'Century Gothic', sans-serif !important; color: #b8e8d8 !important; text-shadow: none !important; margin-bottom: 32px !important; background: none !important; } /* ── CTA button ──────────────────────────────────────────────── */ .hero-cta { display: inline-block; background: #ffffff; color: #0F6E56; font: normal normal 700 14px/1em 'Century Gothic', sans-serif; padding: 14px 32px; border-radius: 50px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .hero-cta:hover { background: #e1f5ee; color: #085041; text-decoration: none; transform: scale(1.03); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 767px) { .banner { min-height: 360px; } .banner ul li { padding: 48px 20px; } .hero-logo-icon { width: 60px; height: 60px; } .hero-logo-name { font-size: 24px; } .hero-tagline { font-size: 15px !important; } } @media (max-width: 480px) { .hero-logo-lockup { flex-direction: column; gap: 12px; } .hero-logo-wordmark { text-align: center; } }