/* ═══════════════════════════════════════════
mica.cafe GLOBAL NAV — drop-in component
INJECTION INSTRUCTIONS FOR COWORK:
1. Add this CSS to /var/www/mica.cafe/css/nav.css
2. Add the nav HTML at the TOP of on every public page
3. Add the JS before
PAGES TO UPDATE:
- /index.html (landing)
- /taste/index.html
- /space/index.html
- /space/companions/index.html
- /space/gallery/index.html
- /space/window/index.html
- /space/music/index.html
- /pricing/index.html
- /join/index.html
- /welcome-back/index.html
- /about/index.html
- /404.html
═══════════════════════════════════════════ */
.mica-nav{
display:flex;align-items:center;justify-content:space-between;
padding:16px 28px;max-width:800px;margin:0 auto;
position:relative;z-index:100;
}
.mica-nav-logo{
font-family:'Instrument Serif',serif;font-style:italic;
font-size:20px;color:#A8B5A0;text-decoration:none;
}
.mica-nav-links{display:flex;gap:18px;align-items:center;}
.mica-nav-link{
font-size:13px;color:rgba(232,230,227,0.38);text-decoration:none;
transition:color 0.2s;font-family:'Plus Jakarta Sans',sans-serif;font-weight:300;
}
.mica-nav-link:hover{color:rgba(232,230,227,0.78);}
.mica-nav-link.active{color:#A8B5A0;}
.mica-nav-cta{
padding:8px 18px;border-radius:12px;
background:rgba(168,181,160,0.05);border:1px solid rgba(168,181,160,0.08);
color:#A8B5A0;font-size:13px;text-decoration:none;
transition:all 0.2s;font-family:'Plus Jakarta Sans',sans-serif;
}
.mica-nav-cta:hover{background:rgba(168,181,160,0.1);}
.mica-nav-hamburger{
display:none;width:32px;height:32px;border-radius:8px;
background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);
cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.mica-nav-hamburger span{width:16px;height:1.5px;background:rgba(232,230,227,0.3);border-radius:1px;}
.mica-nav-mobile{
display:none;position:fixed;inset:0;z-index:999;
background:rgba(20,19,22,0.98);backdrop-filter:blur(16px);
flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.mica-nav-mobile.open{display:flex;}
.mica-nav-mobile-link{
font-size:18px;color:rgba(232,230,227,0.52);text-decoration:none;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:300;
}
.mica-nav-mobile-link:hover{color:rgba(232,230,227,0.78);}
.mica-nav-mobile-link.active{color:#A8B5A0;}
.mica-nav-mobile-close{
position:absolute;top:20px;right:20px;font-size:24px;
color:rgba(232,230,227,0.35);cursor:pointer;background:none;border:none;
}
@media(max-width:500px){
.mica-nav{padding:14px 16px;}
.mica-nav-links{display:none;}
.mica-nav-hamburger{display:flex;}
}
/* ─── NAV HTML ─── */
/*
*/
/* ─── NAV JS ─── */
/*
*/