/* ═══════════════════════════════════════════
eiai.live GLOBAL NAV — drop-in component
INJECTION INSTRUCTIONS FOR COWORK:
1. Add this CSS to /var/www/eiai.live/css/nav.css
2. Add the nav HTML at the TOP of on every public page
3. Add the JS before
4. Pages that already have nav: REPLACE their nav with this one
5. Pages behind auth (/studio/*): use the dashboard nav instead, not this
PAGES TO UPDATE (all public eiai.live pages):
- /index.html (landing)
- /taste/index.html
- /city/index.html
- /showcase/index.html
- /team/index.html
- /pricing/index.html
- /join/index.html
- /built/index.html
- /global-projects/index.html
- /project/index.html
- /projects/micacafe/index.html
- /creators/maya-chen/index.html
- /lessonspark/index.html (product pages use light nav variant)
- /gigready/index.html
- /pawprint/index.html
- /platepal/index.html
- /storybridge/index.html
- /moodcompass/index.html
- /404.html
═══════════════════════════════════════════ */
/* ─── NAV CSS (add to /css/nav.css) ─── */
.eiai-nav{
display:flex;align-items:center;justify-content:space-between;
padding:16px 28px;max-width:1000px;margin:0 auto;
position:relative;z-index:100;
}
.eiai-nav-logo{display:flex;align-items:baseline;gap:2px;font-size:17px;text-decoration:none;font-family:'Outfit',sans-serif;}
.eiai-nav-logo .ei{color:#E8937A;font-weight:600;}
.eiai-nav-logo .ai{color:#fff;font-weight:500;}
.eiai-nav-logo .live{color:#5AE4A7;font-weight:400;opacity:0.7;}
.eiai-nav-links{display:flex;gap:18px;align-items:center;}
.eiai-nav-link{
font-size:13.5px;color:rgba(255,255,255,0.35);text-decoration:none;
transition:color 0.2s;font-family:'Outfit',sans-serif;font-weight:300;
}
.eiai-nav-link:hover{color:rgba(255,255,255,0.78);}
.eiai-nav-link.active{color:#5AE4A7;}
.eiai-nav-cta{
padding:8px 18px;border-radius:12px;
background:rgba(90,228,167,0.06);border:1px solid rgba(90,228,167,0.1);
color:#5AE4A7;font-size:13px;text-decoration:none;
transition:all 0.2s;font-family:'Outfit',sans-serif;font-weight:400;
}
.eiai-nav-cta:hover{background:rgba(90,228,167,0.12);}
/* Mobile hamburger */
.eiai-nav-hamburger{
display:none;width:32px;height:32px;border-radius:8px;
background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);
cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.eiai-nav-hamburger span{width:16px;height:1.5px;background:rgba(255,255,255,0.35);border-radius:1px;transition:all 0.3s;}
/* Mobile menu */
.eiai-nav-mobile{
display:none;position:fixed;inset:0;z-index:999;
background:rgba(42,45,53,0.98);backdrop-filter:blur(16px);
flex-direction:column;align-items:center;justify-content:center;gap:20px;
padding:24px;
}
.eiai-nav-mobile.open{display:flex;}
.eiai-nav-mobile-link{
font-size:18px;color:rgba(255,255,255,0.52);text-decoration:none;
font-family:'Outfit',sans-serif;font-weight:300;transition:color 0.2s;
}
.eiai-nav-mobile-link:hover{color:rgba(255,255,255,0.78);}
.eiai-nav-mobile-link.active{color:#5AE4A7;}
.eiai-nav-mobile-close{
position:absolute;top:20px;right:20px;font-size:24px;
color:rgba(255,255,255,0.35);cursor:pointer;background:none;border:none;
}
/* Light variant for product try pages */
.eiai-nav.light .eiai-nav-logo .ai{color:#2A2D35;}
.eiai-nav.light .eiai-nav-link{color:rgba(42,45,53,0.35);}
.eiai-nav.light .eiai-nav-link:hover{color:rgba(42,45,53,0.78);}
.eiai-nav.light .eiai-nav-link.active{color:#4A8A5A;}
.eiai-nav.light .eiai-nav-cta{background:rgba(90,228,167,0.06);color:#4A8A5A;border-color:rgba(90,228,167,0.12);}
.eiai-nav.light .eiai-nav-hamburger{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.04);}
.eiai-nav.light .eiai-nav-hamburger span{background:rgba(0,0,0,0.3);}
@media(max-width:600px){
.eiai-nav{padding:14px 16px;}
.eiai-nav-links{display:none;}
.eiai-nav-hamburger{display:flex;}
}
/* ─── NAV HTML (paste at top of ) ─── */
/*
*/
/* ─── NAV JS (add before ) ─── */
/*
*/