/* ============================================================ EnergyScout — base.css Tokens, reset, navigation, buttons and footer. One definition, loaded by every page on the site. Page-specific sheets (home.css / page.css / location.css) load after this and only add what is unique to them. ============================================================ */ :root{ --scout-dark:#0a1410; --scout-darker:#060d09; --scout-green:#4a6741; --scout-light:#8fb384; --scout-glow:#a8d99c; --scout-gold:#c4a962; --scout-cream:#f4f1e8; --scout-white:#ffffff; --gradient-nature:linear-gradient(135deg,#4a6741 0%,#2d3f28 50%,#1a2517 100%); --gradient-glow:linear-gradient(135deg,#8fb384 0%,#4a6741 100%); --shadow-glow:0 0 60px rgba(143,179,132,.3); --transition-smooth:cubic-bezier(.4,0,.2,1); } /* ---- reset ---- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Outfit',sans-serif;background:var(--scout-dark);color:var(--scout-cream);line-height:1.7;overflow-x:hidden} a{color:var(--scout-glow);text-decoration:none;transition:color .3s ease} .container{max-width:1200px;margin:0 auto;padding:0 2rem} /* ---- navigation ---------------------------------------------------------- Solid by default so every page has a readable bar. The homepage opts into the transparent-until-scrolled treatment via #navbar in home.css. */ nav{ position:fixed;top:0;left:0;right:0;z-index:1000; padding:1.5rem 5%;display:flex;justify-content:space-between;align-items:center; background:rgba(10,20,16,.98); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); transition:all .4s var(--transition-smooth); } .nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;z-index:1001} .nav-logo img{height:70px;transition:transform .3s ease} .nav-logo:hover img{transform:scale(1.05)} .nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center} .nav-links a{ color:var(--scout-cream);text-decoration:none;font-weight:500;font-size:.95rem; letter-spacing:.5px;position:relative;padding:.5rem 0;transition:color .3s ease; } .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--scout-glow);transition:width .3s var(--transition-smooth)} .nav-links a:hover{color:var(--scout-glow)} .nav-links a:hover::after{width:100%} .nav-cta{ background:var(--gradient-glow);color:var(--scout-dark)!important; padding:.85rem 2rem!important;border-radius:50px;font-weight:600!important; transition:all .3s ease!important;box-shadow:0 4px 20px rgba(143,179,132,.3); } .nav-cta::after{display:none!important} .nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(143,179,132,.5)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:.75rem;padding:1.1rem 2.5rem;border-radius:50px;font-weight:600;font-size:1rem;text-decoration:none;transition:all .3s var(--transition-smooth);cursor:pointer;border:none} .btn-primary{background:var(--scout-glow);color:var(--scout-dark);box-shadow:0 4px 30px rgba(143,179,132,.4)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(143,179,132,.6)} .btn-secondary{background:transparent;color:var(--scout-cream);border:2px solid rgba(244,241,232,.3)} .btn-secondary:hover{border-color:var(--scout-glow);color:var(--scout-glow)} .btn svg{width:20px;height:20px;transition:transform .3s ease} .btn:hover svg{transform:translateX(5px)} /* ---- footer -------------------------------------------------------------- Two layouts share one shell: the four-column brand footer used by the home page and the state hubs, and the single-row footer on template pages. */ footer{background:var(--scout-dark);border-top:1px solid rgba(143,179,132,.1);padding:80px 5% 40px} footer p{opacity:.85} /* single-row variant: a .footer-links sitting directly inside