/* ============================================================ Echelon Lab Supply — Site Shell (Header + Footer) ------------------------------------------------------------ Reproduces the approved homepage (index.html) header and footer exactly so every internal page shares the same black/gold logo, navigation, and footer. Loaded LAST in (after the page's inline styles and theme-gold.css) so it wins on shared class names without editing existing CSS, JavaScript, forms, or any payment / cart / checkout logic. The mobile menu keeps the .mobile-toggle + .nav-links classes, which assets/app.js already wires up — no JS changes required. ============================================================ */ :root{ /* Gold palette mirrored from the homepage so this file is self-sufficient even if a page's tokens differ. */ --shell-black:#070708; --shell-text:#f6f3ea; --shell-muted:#a8a59b; --shell-gold:#d8b25a; --shell-gold2:#f1d792; --shell-gold-deep:#b88a2e; --shell-line:rgba(201,162,75,.18); --shell-line2:rgba(255,255,255,.08); } /* ---------------------- NAVIGATION ---------------------- */ .nav{ position:sticky; top:0; z-index:40; display:block; height:auto; backdrop-filter:blur(12px); background:rgba(7,7,8,.74); border-bottom:1px solid var(--shell-line2); } .nav .nav-inner{ width:min(1200px,92vw); margin:0 auto; height:74px; padding:0; display:flex; align-items:center; justify-content:space-between; gap:24px; } /* Brand lockup — gold "E" badge + two-line wordmark */ .nav .brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; min-width:0; } .nav .brand .mark{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:900; font-size:18px; color:#1a1407; background:linear-gradient(150deg,var(--shell-gold2),var(--shell-gold-deep)); box-shadow:0 4px 14px rgba(216,178,90,.3); flex:0 0 auto; } .nav .brand .name{ font-weight:800; letter-spacing:.02em; font-size:18px; line-height:1.05; color:var(--shell-text); white-space:nowrap; } .nav .brand .name small{ display:block; font-size:9.5px; letter-spacing:.34em; color:var(--shell-gold); font-weight:700; text-transform:uppercase; margin-top:1px; } .nav .nav-links{ display:flex; align-items:center; gap:28px; flex:0 1 auto; font-size:initial; } .nav .nav-links a{ color:#d7d3c7; font-size:14.5px; font-weight:600; letter-spacing:.01em; transition:color .15s; white-space:nowrap; } .nav .nav-links a:hover{color:var(--shell-gold2)} .nav .nav-links .nav-cta{ padding:10px 20px; border-radius:999px; background:linear-gradient(180deg,var(--shell-gold2),var(--shell-gold)); color:#191204; font-weight:800; font-size:14px; box-shadow:0 8px 22px rgba(216,178,90,.22); border:0; } .nav .nav-links .nav-cta:hover{color:#191204;transform:translateY(-1px)} .nav .mobile-toggle{ display:none; background:transparent; border:1px solid var(--shell-line); color:var(--shell-text); border-radius:10px; padding:9px 13px; font-weight:700; font-size:14px; cursor:pointer; } /* ------------------------ FOOTER ------------------------ */ .footer{ border-top:1px solid var(--shell-line2); padding:42px 0 36px; background:#050506; color:var(--shell-muted); } .footer .container{width:min(1200px,92vw);margin:0 auto} .footer .footer-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:26px; } .footer .footer-brand{max-width:520px} .footer .footer-brand strong{color:var(--shell-text);font-size:16px} .footer .footer-brand p{ max-width:420px; font-size:13px; line-height:1.6; margin:10px 0 0; color:var(--shell-muted); } .footer .footer-links{ display:flex; flex-wrap:wrap; gap:10px 22px; align-content:flex-start; } .footer .footer-links a{ color:#cbc7bb; font-size:13.5px; transition:color .15s; } .footer .footer-links a:hover{color:var(--shell-gold2)} .footer .footer-bottom{ border-top:1px solid var(--shell-line2); padding-top:22px; font-size:12.5px; line-height:1.6; color:var(--shell-muted); } /* --------------------- RESPONSIVE ----------------------- */ @media(max-width:980px){ .nav .nav-links{ display:none; font-size:initial; } .nav .nav-links.open{ display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 4vw 22px; background:rgba(7,7,8,.97); border-bottom:1px solid var(--shell-line2); } .nav .nav-links.open a{width:100%;padding:10px 0;white-space:normal} .nav .nav-links.open .nav-cta{ width:auto; display:inline-flex; margin-top:8px; } .nav .mobile-toggle{display:inline-block} } @media(max-width:600px){ .footer .footer-top{flex-direction:column} }