/* ========== Good Fibes Branding Defaults ========== */ /* Google Fonts Import (to include in ) */ /* */ :root { /* Brand Colors */ --gf-blue: #91d4e2; --gf-deep-blue: #68c2e4; --gf-green: #6db19c; --gf-dark-green: #396051; --gf-tan: #d6cfcf; --gf-white: #ffffff; /* Text Colors */ --gf-body-text: #1a1b1f; --gf-heading-text: #2c5c5f; } /* Base Typography */ body { font-family: 'Lato', sans-serif; color: var(--gf-body-text); background-color: var(--gf-white); margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: var(--gf-heading-text); margin-top: 0; } /* Section Styling */ .nav-links li a.active { background-color: #b2ebf2; color: #000; } #backToTop { display: none; /* Hidden by default */ position: fixed; bottom: 30px; right: 30px; z-index: 100; font-size: 18px; background-color: #00838f; color: white; border: none; border-radius: 50%; padding: 12px 16px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: opacity 0.3s ease; } #backToTop:hover { background-color: #006064; } .section-hero { background-color: var(--gf-blue); color: var(--gf-white); text-align: center; padding: 4rem 2rem; } .section-about { background-color: var(--gf-white); color: var(--gf-body-text); padding: 4rem 2rem; } .section-press { background-color: #f5f5f5; padding: 4rem 2rem; } .section-waitlist { background-color: var(--gf-green); color: var(--gf-white); text-align: center; padding: 4rem 2rem; } /* Utility classes */ .container { max-width: 960px; margin: 0 auto; padding: 0 1rem; } .text-center { text-align: center; } .button { background-color: var(--gf-dark-green); color: var(--gf-white); padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 600; display: inline-block; } .button:hover { background-color: var(--gf-heading-text); } .gf-banner { background: url('../images/gfbanner.png') center/cover no-repeat; height: 60vh; /* You can adjust this height based on your design */ position: relative; /* This makes the image behave as a background */ width: 100%; z-index: 1; /* Ensures the image is behind other content */ } .gf-nav { position: sticky; top: 0; left: 0; width: 100%; z-index: 10; /* Higher z-index to ensure the nav bar is above the banner */ background-color: rgba(255, 255, 255, 0.9); /* Add a translucent background so it doesn’t disappear on scroll */ padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional for visual separation */ } /* Navigation styling */ .gf-nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; } .gf-nav ul li a { text-decoration: none; color: black; font-family: 'Montserrat', sans-serif; font-weight: 600; transition: color 0.3s; } .gf-nav ul li a:hover, .gf-nav ul li a.active { color: #6db19c; } /* Prevent hero from hiding behind fixed header */ body { padding-top: 140px; /* Adjust based on banner height */ }