<nav class="mm-typ" aria-label="Precision Outdoor Gear menu">
<div class="top-strip">
<span>Free shipping on orders $75+</span>
<span class="highlight">⚡ Flash Deal: 30% off all trail footwear today only</span>
<a href="#">Find a Store</a>
</div>
<ul class="nav-bar" role="menubar">
<!-- FOOTWEAR -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="icon" aria-hidden="true">⛳</span> Footwear
</button>
<div class="mega mega-foot" role="menu">
<div class="mega-sidebar">
<div class="sidebar-cat-title">Footwear</div>
<div class="sidebar-sub">All types, all terrain</div>
<div class="sidebar-stat">
<div class="stat-row"><span class="s-label">Types</span><span class="s-val">22</span></div>
<div class="stat-row"><span class="s-label">Brands</span><span class="s-val">18</span></div>
<div class="stat-row"><span class="s-label">In Stock</span><span class="s-val">1,240</span></div>
<div class="stat-row"><span class="s-label">New This Week</span><span class="s-val">34</span></div>
</div>
<a href="#" class="sidebar-cta">Shop All Footwear</a>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">⛳</span>
<span class="col-title">Running</span>
<span class="col-count">6 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Road Running Shoes <span class="type-count">184</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Trail Running Shoes <span class="type-badge hot">Hot</span><span class="type-count">96</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Race Day Shoes <span class="type-count">42</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Cross Training Shoes <span class="type-count">68</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Minimalist / Zero Drop <span class="type-count">28</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Running Sandals <span class="type-count">14</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Width</div>
<a href="#">Narrow</a><a href="#">Standard</a><a href="#">Wide</a><a href="#">2E</a>
</div>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🠆</span>
<span class="col-title">Hiking</span>
<span class="col-count">5 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Hiking Boots <span class="type-count">112</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Low-Cut Trail Shoes <span class="type-badge">New</span><span class="type-count">58</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Approach Shoes <span class="type-count">36</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Waterproof Boots (GTX) <span class="type-count">64</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Camp & Hut Boots <span class="type-count">22</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Tech</div>
<a href="#">Gore-Tex</a><a href="#">Vibram</a><a href="#">BOA</a>
</div>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🌊</span>
<span class="col-title">Water & Camp</span>
<span class="col-count">5 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Water Shoes <span class="type-count">48</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Sandals & Slides <span class="type-count">72</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Wading Boots <span class="type-count">18</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Camp Clogs <span class="type-count">24</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Amphibious Shoes <span class="type-count">16</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Surface</div>
<a href="#">Wet Rock</a><a href="#">Sand</a><a href="#">Mixed</a>
</div>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">❄</span>
<span class="col-title">Winter</span>
<span class="col-count">4 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Insulated Boots <span class="type-count">56</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Ski Touring Boots <span class="type-count">28</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Snowshoe-Ready <span class="type-count">22</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Ice Traction Footwear <span class="type-count">18</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Temp Rating</div>
<a href="#">0°C</a><a href="#">-20°C</a><a href="#">-40°C</a>
</div>
</div>
<div class="mega-footer">
<div class="f-tags">
<a href="#" class="f-tag">Waterproof Only</a>
<a href="#" class="f-tag">Vegan</a>
<a href="#" class="f-tag">Wide Fit</a>
<a href="#" class="f-tag hot">🔥 On Sale</a>
</div>
<div class="f-right"><a href="#">Browse All 22 Footwear Types</a></div>
</div>
</div>
</li>
<!-- CLOTHING -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="icon" aria-hidden="true">🧡</span> Clothing
</button>
<div class="mega mega-cloth" role="menu">
<div class="mega-sidebar">
<div class="sidebar-cat-title">Clothing</div>
<div class="sidebar-sub">Performance & casual</div>
<div class="sidebar-stat">
<div class="stat-row"><span class="s-label">Types</span><span class="s-val">18</span></div>
<div class="stat-row"><span class="s-label">Brands</span><span class="s-val">24</span></div>
<div class="stat-row"><span class="s-label">In Stock</span><span class="s-val">2,180</span></div>
</div>
<a href="#" class="sidebar-cta">Shop All Clothing</a>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🧶</span>
<span class="col-title">Base Layers</span>
<span class="col-count">5 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Merino Wool Base Layer <span class="type-count">88</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Synthetic Base Layer <span class="type-count">64</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Heavyweight Baselayer <span class="type-count">32</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Thermal Tights <span class="type-count">40</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Baselayer Bottoms <span class="type-count">44</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Weight</div>
<a href="#">Ultralight</a><a href="#">Mid</a><a href="#">Expedition</a>
</div>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🌬</span>
<span class="col-title">Shells</span>
<span class="col-count">4 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Hardshell Jackets <span class="type-badge">New</span><span class="type-count">72</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Softshell Jackets <span class="type-count">56</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Rain Jackets <span class="type-count">48</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Windbreakers <span class="type-count">34</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Rating</div>
<a href="#">20K</a><a href="#">28K</a><a href="#">3L</a>
</div>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🍧</span>
<span class="col-title">Insulation</span>
<span class="col-count">4 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Down Jackets <span class="type-badge hot">Hot</span><span class="type-count">94</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Synthetic Puffer <span class="type-count">68</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Fleece Jackets <span class="type-count">52</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Vests <span class="type-count">38</span></a></li>
</ul>
<div class="quick-jump">
<div class="quick-jump-label">Quick: Fill Power</div>
<a href="#">600fp</a><a href="#">700fp</a><a href="#">850fp</a>
</div>
</div>
<div class="mega-footer">
<div class="f-tags">
<a href="#" class="f-tag">100% Recycled</a>
<a href="#" class="f-tag">Certified B Corp</a>
<a href="#" class="f-tag hot">🔥 Clearance</a>
</div>
<div class="f-right"><a href="#">Browse All 18 Clothing Types</a></div>
</div>
</div>
</li>
<!-- GEAR -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="icon" aria-hidden="true">🏔</span> Gear
</button>
<div class="mega mega-gear" role="menu">
<div class="mega-sidebar">
<div class="sidebar-cat-title">Gear</div>
<div class="sidebar-sub">Packs, tents & tools</div>
<div class="sidebar-stat">
<div class="stat-row"><span class="s-label">Types</span><span class="s-val">16</span></div>
<div class="stat-row"><span class="s-label">Brands</span><span class="s-val">14</span></div>
</div>
<a href="#" class="sidebar-cta">Shop All Gear</a>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🎒</span>
<span class="col-title">Packs</span>
<span class="col-count">5 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Daypacks (10–30L) <span class="type-count">82</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Multi-Day Packs (40–70L) <span class="type-count">64</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Frameless / UL Packs <span class="type-count">28</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Trail Running Vests <span class="type-badge">New</span><span class="type-count">36</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Hydration Packs <span class="type-count">44</span></a></li>
</ul>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">⛺</span>
<span class="col-title">Shelter</span>
<span class="col-count">4 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Backpacking Tents <span class="type-count">56</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Hammocks & Tarps <span class="type-count">32</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Bivouac Bags <span class="type-count">18</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Base Camp Tents <span class="type-count">24</span></a></li>
</ul>
</div>
<div class="type-col">
<div class="type-col-header">
<span class="col-icon" aria-hidden="true">🔦</span>
<span class="col-title">Tools & Safety</span>
<span class="col-count">5 types</span>
</div>
<ul class="type-links">
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Headlamps <span class="type-badge hot">Hot</span><span class="type-count">48</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Navigation & GPS <span class="type-count">28</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Trekking Poles <span class="type-count">36</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>First Aid Kits <span class="type-count">22</span></a></li>
<li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">›</span>Water Filters <span class="type-count">20</span></a></li>
</ul>
</div>
<div class="mega-footer">
<div class="f-tags">
<a href="#" class="f-tag">Ultralight Only</a>
<a href="#" class="f-tag">3-Season</a>
<a href="#" class="f-tag hot">🔥 Demo Gear</a>
</div>
<div class="f-right"><a href="#">All 16 Gear Types</a></div>
</div>
</div>
</li>
<!-- Plain triggers -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Brands</button>
</li>
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Community</button>
</li>
</ul>
</nav> /* ─── 05 Precision Outdoor Gear Finder — type-drill mega menu ──────
Imports Bebas Neue + Barlow + Barlow Condensed. Everything scoped
under .mm-typ so the dark olive palette doesn't bleed across the
page. Each link surfaces a SPECIFIC type ("Trail Running Shoes")
not a parent category ("Footwear"). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300&family=Barlow+Condensed:wght@300;400;500;600;700&display=swap');
.mm-typ {
--mm-typ-void: #0f1410;
--mm-typ-surface: #161d17;
--mm-typ-panel: #1c261d;
--mm-typ-raised: #243026;
--mm-typ-olive: #4a5e3a;
--mm-typ-lime: #a8c256;
--mm-typ-text: #d4ddd0;
--mm-typ-text-mid: rgba(212, 221, 208, 0.6);
--mm-typ-text-dim: rgba(212, 221, 208, 0.35);
--mm-typ-rule: rgba(212, 221, 208, 0.08);
--mm-typ-rule-mid: rgba(212, 221, 208, 0.14);
--mm-typ-orange: #e07030;
--mm-typ-border: rgba(168, 194, 86, 0.2);
--mm-typ-border-bright: rgba(168, 194, 86, 0.5);
position: relative;
background: var(--mm-typ-void);
font-family: 'Barlow', system-ui, sans-serif;
width: 100%;
min-height: 560px;
overflow: hidden;
box-sizing: border-box;
}
.mm-typ *,
.mm-typ *::before,
.mm-typ *::after { box-sizing: border-box; }
.mm-typ .top-strip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 28px;
background: var(--mm-typ-olive);
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
gap: 12px;
flex-wrap: wrap;
}
.mm-typ .top-strip a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.mm-typ .top-strip a:hover { color: #fff; }
.mm-typ .top-strip .highlight { color: #ffec7a; font-weight: 600; }
.mm-typ .nav-bar {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
background: var(--mm-typ-surface);
border-bottom: 1px solid var(--mm-typ-border);
position: relative;
z-index: 2;
}
.mm-typ .nav-item { position: relative; list-style: none; }
.mm-typ .nav-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
height: 56px;
padding: 0 22px;
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-typ-text-mid);
background: transparent;
border: 0;
border-right: 1px solid var(--mm-typ-rule);
cursor: pointer;
user-select: none;
transition: color 0.2s, background 0.2s;
position: relative;
}
.mm-typ .nav-trigger .icon {
font-size: 14px;
line-height: 1;
opacity: 0.5;
transition: opacity 0.2s;
}
.mm-typ .nav-item:hover .nav-trigger,
.mm-typ .nav-item.mm-open .nav-trigger {
color: var(--mm-typ-lime);
background: var(--mm-typ-panel);
}
.mm-typ .nav-item:hover .nav-trigger .icon,
.mm-typ .nav-item.mm-open .nav-trigger .icon { opacity: 1; }
.mm-typ .nav-trigger::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--mm-typ-lime);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.mm-typ .nav-item:hover .nav-trigger::after,
.mm-typ .nav-item.mm-open .nav-trigger::after { transform: scaleX(1); }
/* ── Mega ── */
.mm-typ .mega {
position: absolute;
top: 100%;
left: 0;
background: var(--mm-typ-panel);
border: 1px solid var(--mm-typ-border);
border-top: 2px solid var(--mm-typ-lime);
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
display: grid;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
max-width: calc(100vw - 24px);
z-index: 5;
}
.mm-typ .nav-item:hover .mega,
.mm-typ .nav-item.mm-open .mega {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.mm-typ .mega-foot { grid-template-columns: 180px 1fr 1fr 1fr 1fr; min-width: min(940px, calc(100vw - 24px)); }
.mm-typ .mega-cloth { grid-template-columns: 180px 1fr 1fr 1fr; min-width: min(820px, calc(100vw - 24px)); }
.mm-typ .mega-gear { grid-template-columns: 180px 1fr 1fr 1fr; min-width: min(820px, calc(100vw - 24px)); }
/* ── Sidebar ── */
.mm-typ .mega-sidebar {
background: var(--mm-typ-raised);
border-right: 1px solid var(--mm-typ-rule-mid);
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 0;
min-height: 380px;
}
.mm-typ .sidebar-cat-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 26px;
letter-spacing: 0.06em;
color: var(--mm-typ-lime);
line-height: 1;
margin-bottom: 4px;
}
.mm-typ .sidebar-sub {
font-family: 'Barlow', system-ui, sans-serif;
font-size: 10px;
font-weight: 200;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-typ-text-dim);
margin-bottom: 20px;
}
.mm-typ .sidebar-stat {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: auto;
}
.mm-typ .stat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px solid var(--mm-typ-rule);
}
.mm-typ .stat-row .s-label {
font-family: 'Barlow', system-ui, sans-serif;
font-size: 10px;
font-weight: 300;
color: var(--mm-typ-text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mm-typ .stat-row .s-val {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--mm-typ-lime);
letter-spacing: 0.06em;
}
.mm-typ .sidebar-cta {
display: block;
margin-top: 20px;
padding: 10px 14px;
background: var(--mm-typ-lime);
color: var(--mm-typ-void);
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
transition: background 0.2s;
}
.mm-typ .sidebar-cta:hover { background: #c0e070; }
/* ── Type columns ── */
.mm-typ .type-col {
padding: 0;
border-right: 1px solid var(--mm-typ-rule);
}
.mm-typ .type-col:last-of-type { border-right: none; }
.mm-typ .type-col-header {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--mm-typ-rule-mid);
display: flex;
align-items: center;
gap: 10px;
}
.mm-typ .type-col-header .col-icon { font-size: 16px; line-height: 1; }
.mm-typ .type-col-header .col-title {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-typ-text);
}
.mm-typ .type-col-header .col-count {
margin-left: auto;
font-family: 'Barlow', system-ui, sans-serif;
font-size: 10px;
font-weight: 200;
color: var(--mm-typ-text-dim);
}
.mm-typ .type-links {
list-style: none;
margin: 0;
padding: 6px 0;
}
.mm-typ .type-links li { list-style: none; }
.mm-typ .type-links li a {
display: flex;
align-items: center;
gap: 0;
padding: 8px 16px;
font-family: 'Barlow', system-ui, sans-serif;
font-size: 13px;
font-weight: 300;
color: var(--mm-typ-text-mid);
text-decoration: none;
border-bottom: 1px solid var(--mm-typ-rule);
transition: color 0.2s, background 0.2s, padding-left 0.25s;
position: relative;
}
.mm-typ .type-links li a .type-arrow {
position: absolute;
left: 4px;
opacity: 0;
color: var(--mm-typ-lime);
font-size: 10px;
transition: opacity 0.2s, left 0.25s;
}
.mm-typ .type-links li a .type-count {
margin-left: auto;
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 11px;
font-weight: 300;
color: var(--mm-typ-text-dim);
flex-shrink: 0;
transition: color 0.2s;
}
.mm-typ .type-links li a .type-badge {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mm-typ-void);
background: var(--mm-typ-lime);
padding: 2px 5px;
margin-left: 8px;
flex-shrink: 0;
}
.mm-typ .type-links li a .type-badge.hot {
background: var(--mm-typ-orange);
color: #fff;
}
.mm-typ .type-links li a:hover {
color: var(--mm-typ-lime);
background: rgba(168, 194, 86, 0.06);
padding-left: 24px;
}
.mm-typ .type-links li a:hover .type-arrow { opacity: 1; left: 10px; }
.mm-typ .type-links li a:hover .type-count { color: var(--mm-typ-lime); }
/* Quick-jump pills */
.mm-typ .quick-jump {
padding: 10px 16px;
border-top: 1px solid var(--mm-typ-rule-mid);
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.mm-typ .quick-jump-label {
width: 100%;
font-family: 'Barlow', system-ui, sans-serif;
font-size: 9px;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--mm-typ-text-dim);
margin-bottom: 6px;
}
.mm-typ .quick-jump a {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-typ-text-mid);
background: var(--mm-typ-raised);
border: 1px solid var(--mm-typ-rule-mid);
padding: 4px 10px;
text-decoration: none;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.mm-typ .quick-jump a:hover {
color: var(--mm-typ-lime);
border-color: var(--mm-typ-border-bright);
background: rgba(168, 194, 86, 0.08);
}
/* ── Footer ── */
.mm-typ .mega-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: var(--mm-typ-raised);
border-top: 1px solid var(--mm-typ-rule-mid);
flex-wrap: wrap;
gap: 10px;
}
.mm-typ .mega-footer .f-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-typ .mega-footer .f-tag {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mm-typ-text-dim);
background: var(--mm-typ-panel);
border: 1px solid var(--mm-typ-rule-mid);
padding: 4px 10px;
text-decoration: none;
transition: color 0.2s, border-color 0.2s;
}
.mm-typ .mega-footer .f-tag:hover { color: var(--mm-typ-lime); border-color: var(--mm-typ-border-bright); }
.mm-typ .mega-footer .f-tag.hot { color: var(--mm-typ-orange); border-color: rgba(224, 112, 48, 0.35); }
.mm-typ .mega-footer .f-right a {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-typ-lime);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s;
}
.mm-typ .mega-footer .f-right a::after { content: '\2192'; }
.mm-typ .mega-footer .f-right a:hover { gap: 14px; }
/* Stagger */
.mm-typ .nav-item:hover .type-links li,
.mm-typ .nav-item.mm-open .type-links li { animation: mm-typ-slide 0.3s ease both; }
.mm-typ .nav-item:hover .type-links li:nth-child(1),
.mm-typ .nav-item.mm-open .type-links li:nth-child(1) { animation-delay: 0.03s; }
.mm-typ .nav-item:hover .type-links li:nth-child(2),
.mm-typ .nav-item.mm-open .type-links li:nth-child(2) { animation-delay: 0.07s; }
.mm-typ .nav-item:hover .type-links li:nth-child(3),
.mm-typ .nav-item.mm-open .type-links li:nth-child(3) { animation-delay: 0.11s; }
.mm-typ .nav-item:hover .type-links li:nth-child(4),
.mm-typ .nav-item.mm-open .type-links li:nth-child(4) { animation-delay: 0.15s; }
.mm-typ .nav-item:hover .type-links li:nth-child(5),
.mm-typ .nav-item.mm-open .type-links li:nth-child(5) { animation-delay: 0.19s; }
.mm-typ .nav-item:hover .type-links li:nth-child(6),
.mm-typ .nav-item.mm-open .type-links li:nth-child(6) { animation-delay: 0.23s; }
.mm-typ .nav-item:hover .type-links li:nth-child(7),
.mm-typ .nav-item.mm-open .type-links li:nth-child(7) { animation-delay: 0.27s; }
@keyframes mm-typ-slide {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
.mm-typ .nav-trigger { padding: 0 14px; font-size: 12px; }
.mm-typ .mega-foot,
.mm-typ .mega-cloth,
.mm-typ .mega-gear {
grid-template-columns: 1fr;
min-width: calc(100vw - 24px);
}
.mm-typ .mega-sidebar { border-right: 0; border-bottom: 1px solid var(--mm-typ-rule-mid); min-height: 0; }
.mm-typ .type-col { border-right: 0; border-bottom: 1px solid var(--mm-typ-rule); }
}
@media (prefers-reduced-motion: reduce) {
.mm-typ .mega,
.mm-typ .type-links li,
.mm-typ .type-links li a,
.mm-typ .quick-jump a { transition: none; animation: none; }
} (() => {
document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
const trigger = item.querySelector('.nav-trigger');
if (!trigger) return;
// Mouse + keyboard: toggle open on click / Enter / Space
trigger.addEventListener('click', e => {
e.preventDefault();
const isOpen = item.classList.contains('mm-open');
// Close any sibling that's open so only one panel shows at a time
item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
if (other !== item) other.classList.remove('mm-open');
const otherBtn = other.querySelector('.nav-trigger');
if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
});
item.classList.toggle('mm-open', !isOpen);
trigger.setAttribute('aria-expanded', String(!isOpen));
});
});
// Outside-click closes all open panels
document.addEventListener('click', e => {
document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
if (!item.contains(e.target)) {
item.classList.remove('mm-open');
const btn = item.querySelector('.nav-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
}
});
});
// Escape closes the currently open panel
document.addEventListener('keydown', e => {
if (e.key !== 'Escape') return;
document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
item.classList.remove('mm-open');
const btn = item.querySelector('.nav-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
});
})();