/* ══════════════════════════════════════════ NAVIGATION — Primary, secondary, mega-menu modular extract ══════════════════════════════════════════ */ /* ── Brand ── */ .brand{ display: flex; align-items: center; gap: 14px; min-width: 220px; } .brand img{ height: 32px; } .brand-divider{ width: 1px; height: 24px; background: rgba(255,255,255,.15); } .brand-title{ font-size: 13px; font-weight: 700; color: var(--chrome-text); letter-spacing: -.01em; } /* ── Primary nav ── */ .primary-nav{ position: fixed; top: 0; left: 0; right: 0; height: var(--unified-nav-h); background: linear-gradient(180deg, var(--wwof-navy-deep, #1a2b3c) 0%, var(--wwof-navy-footer, #091421) 100%); border-bottom: 1px solid rgba(212, 175, 55, 0.18); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(212, 175, 55, 0.12); z-index: 9980; display: flex; align-items: center; padding: 0 24px; /* slimmer SaaS chrome */ gap: 0; overflow: visible; transition: transform 0.25s ease, background 0.35s ease, height 0.35s ease, box-shadow 0.35s ease; } .primary-nav.scrolled{ height: var(--unified-nav-h-scrolled); background: linear-gradient(180deg, rgba(26, 43, 60, 0.98) 0%, rgba(9, 20, 33, 0.99) 100%); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(212, 175, 55, 0.15); } .primary-nav.nav-hidden { transform: translateY(-100%); pointer-events: none; /* allow clicks to pass when hidden; re-enabled on show */ } /* Auto-hide secondary (subtab banner) together with primary for full top reclaim. Uses body.nav-hidden (synced in scroll/mousemove handlers) so both banners slide away on scroll-down. */ body.nav-hidden .secondary-nav { transform: translateY(-100%); pointer-events: none; } /* Subtle peek strip at very top when nav is auto-hidden. Gives clear visual affordance that the navigation is "up there". Clicking / tapping the top edge reveals the full nav + secondary. Uses restrained gold tint matching brand, very low profile. */ body.nav-hidden::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to bottom, rgba(181,136,11,0.55), transparent); z-index: 99999; pointer-events: auto; cursor: pointer; } .primary-nav::-webkit-scrollbar{ height: 0; } /* ── Nav logo ── */ .nav-logo{ display:flex;align-items:center;gap:12px;cursor:pointer; flex-shrink:0;margin-right:28px;text-decoration:none; } /* White lockup by default (dark nav); golden-blue lockup on the bright theme. The visible variant is keyed off html[data-theme] — set synchronously in the before first paint — NOT theme.js's later .nav-logo--light toggle, which left the white logo painted on the white bright-nav (invisible) until DOMContentLoaded fired. The .nav-logo--light selectors stay for the live theme switch (data-theme + class always agree). */ .nav-logo img{height:36px;max-width:200px;object-fit:contain;} .nav-logo .nav-logo-img--light{display:none;} .nav-logo .nav-logo-img--white{display:block;} .nav-logo--light .nav-logo-img--light, html[data-theme="bright"] .nav-logo .nav-logo-img--light{display:block;} .nav-logo--light .nav-logo-img--white, html[data-theme="bright"] .nav-logo .nav-logo-img--white{display:none;} .nav-logo-title{ font-size:1.05rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap; border-left:2px solid var(--accent);padding-left:14px; background:linear-gradient(135deg, #f0ece5 0%, var(--accent) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } /* ── Nav center + tabs ── */ .nav-center{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;height:100%;} .nav-right{display:flex;align-items:center;gap:8px;margin-left:20px;flex-shrink:0;} .nav-tab-wrap{position:relative;display:inline-block;padding-bottom:18px;margin-bottom:-18px;} .nav-tab{ position:relative;display:flex;align-items:center;gap:4px; padding:5px 10px;border-radius:6px;border:none;background:transparent; color:rgba(232, 228, 221, 0.75);font-size:0.78rem;font-weight:600;cursor:pointer; transition:all 0.2s;white-space:nowrap;letter-spacing:0.1px;font-family:inherit; } .nav-tab i{font-size:1rem;color:rgba(232, 228, 221, 0.45);transition:color 0.2s;} .nav-tab:hover{color:#fff;} .nav-tab:hover i{color:rgba(212, 175, 55, 0.85);} .nav-tab.active{color:#fff;font-weight:700;background:transparent;border-radius:0;} .nav-tab.active i{color:var(--accent);} .nav-tab.active::after{ content:'';position:absolute;bottom:-4px;left:12px;right:12px; height:2.5px;background:var(--accent);border-radius:2px; } /* Smooth indication when hovering a tab that will open/switch a mega */ .nav-tab-wrap:hover .nav-tab:not(.active) { color: #fff; } .nav-tab-wrap.mega-active .nav-tab { color: #fff; font-weight: 700; } .nav-tab .nav-badge{font-size:0.6rem;background:var(--warning);color:#000;padding:1px 5px;border-radius:10px;font-weight:700;} .nav-tab .nav-badge:empty{display:none;} .nav-tab .nav-badge.warning{background:#f59e0b;} .nav-divider{width:1px;height:20px;background:rgba(212, 175, 55, 0.2);margin:0 10px;} .nav-badge{font-size:0.6rem;font-weight:700;border-radius:999px;padding:1px 6px;line-height:1.4;} .nav-badge.danger{background:rgba(184,50,48,.15);color:var(--danger);} .nav-badge.warning{background:rgba(196,127,23,.12);color:var(--warning);} .nav-badge.success{background:rgba(46,125,50,.12);color:var(--success);} /* ── Nav icon buttons ── */ .nav-icon-btn{ width:34px;height:34px;border-radius:8px;border:none;background:transparent; color:rgba(232, 228, 221, 0.55);cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:0.95rem;transition:all 0.2s;position:relative; } .nav-icon-btn:hover{background:rgba(212, 175, 55, 0.1);color:var(--accent);} .nav-icon-btn .notif-dot{ position:absolute;top:5px;right:5px;width:7px;height:7px; background:var(--danger);border-radius:50%;border:1.5px solid var(--wwof-navy-footer, #091421); } /* ── Nav user chip ── */ .nav-user-chip{ display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px; border-radius:24px;background:rgba(255, 255, 255, 0.04);border:1px solid rgba(212, 175, 55, 0.18); color:rgba(232, 228, 221, 0.9);font-size:0.8rem;font-weight:600;cursor:pointer; transition:all 0.2s; } .nav-user-chip:hover{background:rgba(212, 175, 55, 0.1);border-color:rgba(212, 175, 55, 0.35);} .nav-user-avatar{ width:26px;height:26px;border-radius:50%;background:var(--accent); display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#fff; letter-spacing:0.3px; } /* ── Nav security badge ── */ .nav-security-badge{ font-size:0.72rem;color:#6ee7a0;display:flex;align-items:center;gap:4px; padding:4px 10px;border-radius:20px;border:1px solid rgba(46,125,50,0.35); background:rgba(46,125,50,0.12);font-weight:600; } .nav-context-badge{ font-size:0.68rem;display:flex;align-items:center;gap:4px; padding:4px 10px;border-radius:20px;font-weight:600; } .nav-context-badge.region{ color:#1565C0;border:1px solid rgba(21,101,192,0.15);background:rgba(21,101,192,0.06); } .nav-context-badge.vendor{ color:#0078D4;border:1px solid rgba(0,120,212,0.15);background:rgba(0,120,212,0.06); } /* ══════════════════════════════════════════ MEGA-MENU — Smooth, fluid switching (x.ai-inspired) One persistent panel feel. Moving between nav items swaps content with direction slide + staggered inner reveal. No jarring close/open. ══════════════════════════════════════════ */ /* Backdrop dims page when any mega-menu is open */ .mega-backdrop{ position: fixed; inset: 0; top: var(--unified-nav-h); background: var(--mega-menu-backdrop, rgba(9, 20, 33, 0.42)); z-index: 9960; opacity: 0; visibility: hidden; transition: opacity 0.2s cubic-bezier(0.2,0,0,1), visibility 0.2s; pointer-events: none; } .mega-backdrop.open{ opacity: 1; visibility: visible; pointer-events: auto; } /* Mega-menu base + open states */ .mega-menu{ position:fixed; top:var(--unified-nav-h); left:0; right:0; width:100%; /* No scale — scale() shifts perceived position when opening/switching. */ transform:translateY(-6px); background:var(--mega-menu-bg); border-top:1px solid var(--mega-menu-border-top); border-bottom:1px solid var(--mega-menu-border-bottom); box-shadow:var(--mega-menu-shadow); padding:clamp(20px, 2.5vw, 28px) clamp(16px, 4vw, 52px) clamp(22px, 2.5vw, 32px); opacity:0; pointer-events:none; transition: opacity 0.22s cubic-bezier(0.2, 0.0, 0.0, 1), transform 0.26s cubic-bezier(0.2, 0.0, 0.0, 1), top 0.28s ease; z-index:9985; will-change: opacity, transform; /* Stable panel height so Workbench ↔ Admin swaps don't jump the page. */ min-height: min(400px, 72vh); max-height: calc(100dvh - var(--unified-nav-h)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:auto; } .mega-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; isolation: isolate; } /* Fade out only — no translate/scale so the panel edge stays put. */ .mega-menu.mega-leaving { transition: opacity 0.1s ease; opacity: 0; transform: translateY(0); pointer-events: none; } /* Cross-fade inner content when switching tabs (no horizontal slide). */ .mega-menu[data-enter-dir] .mega-inner { animation: megaInnerFade 0.2s ease; } @keyframes megaInnerFade { from { opacity: 0.55; } to { opacity: 1; } } /* Premium smooth content reveal inside mega (x.ai-like fluidity). Staggered, restrained. Triggers on open and during tab switches. */ .mega-menu.open .mega-col-link, .mega-menu.open .mega-feature-card { transition: opacity 0.22s cubic-bezier(0.2,0,0,1), transform 0.26s cubic-bezier(0.2,0,0,1); opacity: 0; transform: translateY(6px); } .mega-menu.open .mega-col-link, .mega-menu.open .mega-feature-card { opacity: 1; transform: none; } /* Stagger the links for a nice cascading feel when switching menus */ .mega-menu.open .mega-col-link:nth-child(1) { transition-delay: 0ms; } .mega-menu.open .mega-col-link:nth-child(2) { transition-delay: 20ms; } .mega-menu.open .mega-col-link:nth-child(3) { transition-delay: 40ms; } .mega-menu.open .mega-col-link:nth-child(4) { transition-delay: 60ms; } .mega-menu.open .mega-col-link:nth-child(5) { transition-delay: 80ms; } .mega-menu.open .mega-col-link:nth-child(6) { transition-delay: 100ms; } .mega-menu.open .mega-feature-card { transition-delay: 80ms; } /* When nav is scrolled, mega-menu follows the slimmer header */ .primary-nav.scrolled .mega-menu{ top: var(--unified-nav-h-scrolled); max-height: calc(100dvh - var(--unified-nav-h-scrolled)); } .mega-header{font-size:0.7rem;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:14px;} .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;} .mega-link{ display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px; border:1px solid rgba(255,255,255,0.07);cursor:pointer;transition:all 0.15s ease; background:rgba(255,255,255,0.03); } .mega-link:hover{background:rgba(181,136,11,0.12);border-color:rgba(181,136,11,0.3);} .mega-link-icon{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center;font-size:0.95rem;color:var(--accent);flex-shrink:0;} .mega-link-text{flex:1;} .mega-link-label{font-size:0.82rem;font-weight:500;color:rgba(255,255,255,0.9);} .mega-link-desc{font-size:0.7rem;color:rgba(255,255,255,0.4);margin-top:2px;} .mega-stats{display:flex;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07);} .mega-stat{flex:1;text-align:center;padding:10px 8px;background:rgba(255,255,255,0.04);border-radius:8px;border:1px solid rgba(255,255,255,0.06);} .mega-stat-val{font-size:1.1rem;font-weight:700;color:var(--accent);} .mega-stat-lbl{font-size:0.65rem;color:rgba(255,255,255,0.4);margin-top:2px;} .mega-stat-val.ok{color:#22c55e;} .mega-stat-val.warn{color:#f59e0b;} .mega-stat-val.danger{color:#ef4444;} /* Inner layout: columns + feature card */ .mega-inner{ display: grid; width: 100%; max-width: min(1320px, 100%); margin: 0 auto; gap: clamp(20px, 3vw, 48px); align-items: start; } .mega-inner.cols-2-feat{ grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 260px); } .mega-inner.cols-3-feat{ grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 260px); } /* 4 link columns + feature card. WHY: the Admin menu carries the most links (Broker / Reference / Ops / System); 4 columns keep each list short. minmax(0,1fr) lets columns shrink instead of overflowing, and the feature card uses minmax(220px,260px) so it gives up width first on narrow viewports — preventing the card clipping seen at ~1100-1280px when it was a fixed 280px. The wider min-width below widens the menu's own max-width to fit 4 columns comfortably. */ .mega-inner.cols-4-feat{ grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 260px); gap: 32px; max-width: 1320px; } .mega-inner.cols-1-feat{ grid-template-columns: minmax(0, 1fr) minmax(0, 260px); } .mega-inner.mega-flat{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .mega-col-section{ display: flex; flex-direction: column; gap: 4px; min-width: 0; /* allow children to shrink instead of overflowing */ background:var(--mega-col-surface); border:1px solid var(--mega-col-border); border-radius:var(--r); padding:0; box-sizing:border-box; } .mega-col-title{ font-size:0.65rem; font-weight:800; color:#f0e2c4; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; display:flex;align-items:center;gap:8px; } .mega-col-title::before{ content:''; width:14px;height:1px; background:var(--wwof-gold-web, #d4af37); opacity:0.7;flex-shrink:0; } .mega-col-link{ display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; min-width: 0; /* let .mega-col-link-text shrink */ position: relative; border:1px solid var(--mega-link-border); background:var(--mega-link-surface); } .mega-col-link::before{ content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 0; background: var(--accent); border-radius: 2px; transition: width 0.16s cubic-bezier(0.4, 0, 0.2, 1); } .mega-col-link:hover{ background:rgba(255, 255, 255, 0.04); border-color:rgba(212, 175, 55, 0.16); box-shadow:none; } .mega-col-link:hover::before{ width: 3px; } .mega-col-link-icon{ width:34px; height:34px; border-radius:8px; background:rgba(255, 255, 255, 0.04); border:1px solid rgba(255, 255, 255, 0.07); color:rgba(210, 214, 220, 0.88) !important; display:flex; align-items:center; justify-content:center; font-size:0.92rem; flex-shrink:0; transition:transform 0.16s ease, color 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .mega-col-link:hover .mega-col-link-icon{ transform:scale(1.04); color:var(--wwof-gold-web, #d4af37) !important; background:rgba(212, 175, 55, 0.1); border-color:rgba(212, 175, 55, 0.22); } .mega-col-link-text{ min-width: 0; flex: 1; } .mega-col-link-label{ font-size:0.87rem; font-weight:700; color:#faf9f6; line-height:1.25; letter-spacing:0.01em; text-shadow:0 1px 1px rgba(0, 0, 0, 0.22); } .mega-col-link:hover .mega-col-link-label{color:#fff;} .mega-col-link-desc{ font-size:0.72rem; font-weight:500; color:#d2dae4; margin-top:3px; line-height:1.42; overflow-wrap: anywhere; } .mega-col-link:hover .mega-col-link-desc{color:#eef1f5;} /* Vibrant feature card (right side) */ .mega-feature-card{ border-radius:14px; padding:22px 18px; min-height:200px; min-width:0; max-width:100%; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; position:relative; overflow:hidden; transition:transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease, border-color 0.18s ease; background:var(--mega-feat-surface); border:1px solid var(--mega-feat-border); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.07); } .mega-feature-card:hover{ border-color:rgba(212, 175, 55, 0.32); box-shadow:0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Alert feature card — same surface as siblings; accent via left rail only */ .mega-feature-card--alert, #nav-alert-card{ border-left:3px solid var(--warning, #C47F17); } .mega-feature-card--alert::before, #nav-alert-card::before{ background:none; opacity:0; } .mega-feature-card--alert::after, #nav-alert-card::after{ background:linear-gradient(90deg, transparent, rgba(196, 127, 23, 0.18), transparent); } .mega-feature-card--alert:hover, #nav-alert-card:hover{ border-color:var(--mega-feat-border); border-left-color:var(--warning, #C47F17); box-shadow:0 4px 14px rgba(44, 48, 52, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .mega-feat-title--sm{ font-size:1rem; } .mega-alert-detail{ margin-top:8px; display:flex; flex-direction:column; gap:4px; } .mega-alert-line{ display:flex; align-items:center; gap:6px; font-size:0.74rem; line-height:1.35; } .mega-alert-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; } .mega-alert-dot--danger{ background:var(--danger, #B83230); } .mega-alert-dot--warn{ background:var(--warning, #C47F17); } .mega-feature-card::before{ content:''; position:absolute;inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg, rgba(212, 175, 55, 0.07) 0%, transparent 52%); opacity:1; } .mega-feature-card::after{ content:''; position:absolute;top:0;left:18px;right:18px; height:1px; background:linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent); pointer-events:none; } .mega-feat-label{ font-size:0.62rem; font-weight:800; letter-spacing:0.9px; text-transform:uppercase; color:#f0e2c4; } .mega-feat-title{ font-size:1.15rem; font-weight:800; color:#fcfbfa; line-height:1.3; margin-top:10px; text-shadow:0 1px 2px rgba(0, 0, 0, 0.2); } .mega-feat-sub{ font-size:0.75rem; font-weight:500; color:#e2e8ef; margin-top:6px; line-height:1.45; } .mega-feat-arrow{ font-size:0.76rem; font-weight:700; color:var(--wwof-gold-web, #d4af37); display:flex; align-items:center; gap:5px; margin-top:20px; transition:transform 0.16s cubic-bezier(0.4,0,0.2,1), color 0.16s ease; } .mega-feature-card:hover .mega-feat-arrow{ transform:translateX(3px); color:var(--wwof-gold-soft, #EAD5AF); } /* Legacy gradient class names → unified WWOF premium surface */ .feat-grad-gold, .feat-grad-blue, .feat-grad-purple, .feat-grad-teal, .feat-grad-orange, .feat-grad-wwof, .feat-grad-wwof-warn{ background:linear-gradient(155deg, #2f4d62 0%, #243d50 48%, #2a4a5e 100%); } /* Alert detail bullets inside feature card — keep legible on dark navy */ #nav-alert-detail, #nav-alert-detail span{ color:var(--mega-alert-detail); font-weight:500; } .feat-stat-row{ display: flex; gap: 12px; flex-wrap: wrap; } .feat-stat{ flex: 1; min-width: 60px; text-align: center; } .feat-stat-val{ font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; } .feat-stat-lbl{ font-size: 0.6rem; color: rgba(255,255,255,0.6); margin-top: 3px; } /* ── Active tab highlight when mega-menu is open ── */ .nav-tab-wrap.mega-active > .nav-tab{ color:#fff; font-weight:700; } .nav-tab-wrap.mega-active > .nav-tab i{color:var(--accent);} .nav-tab-wrap.mega-active::after{ content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:28px;height:2.5px;background:var(--accent);border-radius:2px; } /* Keep subnav space reserved when mega is open — display:none was shifting main content. */ body.mega-open .secondary-nav{ visibility: hidden; opacity: 0; pointer-events: none; } body.mega-open{ overflow: hidden; } /* ── Admin mega 3-col ── */ .mega-3col{display:grid;grid-template-columns:1fr 1fr 160px;gap:20px;} .mega-section{} .mega-section-title{font-size:0.65rem;font-weight:700;color:var(--wwof-gold-soft,#EAD5AF);opacity:0.7;text-transform:uppercase;letter-spacing:0.9px;margin-bottom:10px;display:flex;align-items:center;gap:6px;} .mega-section-links{display:flex;flex-direction:column;gap:2px;} .mega-row-link{ display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px; cursor:pointer;transition:background 0.15s;font-size:0.8rem;color:rgba(255,255,255,0.75); } .mega-row-link:hover{background:rgba(255,255,255,0.04);border-radius:7px;color:#fff;} .mega-row-link i{width:14px;text-align:center;color:rgba(255,255,255,0.4);font-size:0.78rem;flex-shrink:0;} .mega-row-link span:nth-child(2){flex:1;} .mega-row-hint{font-size:0.65rem;color:rgba(255,255,255,0.28);white-space:nowrap;} .mega-snapshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .mega-snapshot-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:8px 6px;text-align:center;} .mega-snapshot-card.ok .msv{color:#22c55e;} .mega-snapshot-card.warn .msv{color:#f59e0b;} .mega-snapshot-card.danger .msv{color:#ef4444;} .msv{font-size:0.95rem;font-weight:700;color:rgba(255,255,255,0.85);} .msl{font-size:0.6rem;color:rgba(255,255,255,0.35);margin-top:2px;} /* ══════════════════════════════════════════ SECONDARY NAV — Contextual subtab bar ══════════════════════════════════════════ */ .secondary-nav{ position: fixed; top: var(--unified-nav-h); left: 0; right: 0; height: var(--subnav-h); background: linear-gradient(180deg, var(--surface) 0%, rgba(21, 29, 43, 0.98) 100%); border-bottom: 1px solid rgba(212, 175, 55, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); z-index: 9970; display: none; align-items: center; padding: 0 20px; gap: 2px; overflow-x: auto; overflow-y: hidden; /* 2026-06-01 — match the primary nav's height transition so we move together when .scrolled flips. Without this the secondary-nav jumps abruptly while the primary nav animates, exposing the mid-transition gap that prompted the fix. */ transition: top 0.35s ease, transform 0.25s ease; } /* 2026-06-01 — Close the gap that appears between primary-nav and secondary-nav once the page scrolls. .primary-nav.scrolled drops to var(--unified-nav-h-scrolled); previously secondary-nav stayed pinned at top: var(--unified-nav-h) leaving a void. They're DOM siblings, so a sibling selector keeps the two strips flush regardless of scroll state. Single source of truth lives in theme.css. */ .primary-nav.scrolled ~ .secondary-nav{ top: var(--unified-nav-h-scrolled); } .secondary-nav.visible{ display: flex; } .secondary-nav::-webkit-scrollbar{ height: 0; } .sub-tab{ display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 30px; font-size: 10.5px; font-weight: 500; color: var(--muted); cursor: pointer; position: relative; white-space: nowrap; border: none; background: none; font-family: inherit; border-radius: 6px; transition: color var(--t-fast), background var(--t-fast); } .sub-tab i{ font-size: 13px; } .sub-tab:hover{ color: var(--text); background: var(--bg); } .sub-tab.active{ color: var(--accent); font-weight: 600; background: var(--accent-soft); } .sub-tab .sub-badge{ font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.4; } /* ── Breadcrumb ── */ .breadcrumb{ font-size: 11px; color: var(--muted-2); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; } .breadcrumb a{ color: var(--accent); text-decoration: none; font-weight: 500; } .breadcrumb a:hover{ text-decoration: underline; } .breadcrumb .bc-sep{ color: var(--muted-2); } /* ══════════════════════════════════════════ NOTIFICATION PANEL ══════════════════════════════════════════ */ .notif-panel{ position:fixed;top:calc(var(--unified-nav-h) + 4px);right:80px;width:340px; background:var(--surface);border:1px solid rgba(212, 175, 55, 0.18); border-radius:14px;box-shadow:var(--shadow-lg); z-index:9990;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px) scale(0.97); transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s; } .notif-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;} .notif-panel-header{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px 10px;border-bottom:1px solid var(--border-2); font-size:0.82rem;font-weight:600;color:var(--text); } .notif-mark-all{background:transparent;border:none;color:var(--accent);font-size:0.72rem;cursor:pointer;} .notif-mark-all:hover{color:var(--accent-hover);} .notif-list{max-height:360px;overflow-y:auto;} .notif-item{ display:flex;align-items:flex-start;gap:10px;padding:10px 16px; border-bottom:1px solid var(--border-2);transition:background 0.15s;cursor:pointer; } .notif-item:hover{background:rgba(212, 175, 55, 0.06);} .notif-item.unread{background:rgba(212, 175, 55, 0.04);} .notif-item:last-child{border-bottom:none;} .notif-icon{ width:30px;height:30px;border-radius:8px;flex-shrink:0;margin-top:1px; background:rgba(239,68,68,.1);color:#ef4444; display:flex;align-items:center;justify-content:center;font-size:0.82rem; } .notif-icon.warn{background:rgba(245,158,11,.08);color:#d97706;} .notif-icon.ok{background:rgba(34,197,94,.08);color:#16a34a;} .notif-icon.info{background:rgba(59,130,246,.08);color:#2563eb;} .notif-title{font-size:0.8rem;font-weight:600;color:var(--text);} .notif-sub{font-size:0.72rem;color:var(--muted);margin-top:2px;line-height:1.4;} .notif-time{font-size:0.65rem;color:var(--muted-2);margin-top:4px;} .notif-footer{ padding:12px 16px;text-align:center;font-size:0.75rem;color:var(--accent); border-top:1px solid var(--border-2);cursor:pointer;transition:color 0.15s; display:flex;align-items:center;justify-content:center;gap:6px; } .notif-footer:hover{color:var(--accent-hover);} /* ── Profile Panel ── */ .profile-panel{ position:fixed;top:calc(var(--unified-nav-h) + 4px);right:12px;width:280px; background:var(--surface);border:1px solid rgba(212, 175, 55, 0.18); border-radius:14px;box-shadow:var(--shadow-lg); z-index:9990;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px) scale(0.97); transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s; } .profile-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;} .profile-panel-header{ padding:18px 16px 14px;border-bottom:1px solid var(--border-2); display:flex;align-items:center;gap:12px; } .profile-avatar-lg{ width:42px;height:42px;border-radius:50%;flex-shrink:0; background:var(--accent); display:flex;align-items:center;justify-content:center; font-size:1rem;font-weight:700;color:#fff;letter-spacing:0.3px; } .profile-name{font-size:0.88rem;font-weight:600;color:var(--text);} .profile-role{font-size:0.72rem;color:var(--muted);margin-top:2px;} .profile-meta{font-size:0.68rem;color:var(--muted-2);margin-top:3px;} .profile-body{padding:10px 8px;} .profile-item{ display:flex;align-items:center;gap:10px;padding:9px 10px; border-radius:8px;cursor:pointer;transition:background 0.15s; font-size:0.8rem;color:var(--text-2); } .profile-item:hover{background:rgba(212, 175, 55, 0.08);color:var(--text);} .profile-item i{width:16px;text-align:center;color:var(--muted);} .profile-divider{height:1px;background:var(--border-2);margin:6px 8px;} .profile-item.logout{color:#ef4444;} .profile-item.logout i{color:#ef4444;} .profile-item.logout:hover{background:rgba(239,68,68,.06);} /* ══════════════════════════════════════════ NAV RESPONSIVE OVERRIDES ══════════════════════════════════════════ */ /* ── Hamburger button (hidden on desktop) ── */ .hamburger-btn{ display:none; width:40px;height:40px;border:none;background:transparent; color:rgba(232, 228, 221, 0.85);font-size:1.35rem;cursor:pointer; border-radius:8px;align-items:center;justify-content:center; transition:background 0.2s, color 0.2s;flex-shrink:0; margin-left:4px; } .hamburger-btn:hover{background:rgba(212, 175, 55, 0.1);color:var(--accent);} .hamburger-btn[aria-expanded="true"]{ background:rgba(212, 175, 55, 0.14); color:var(--accent); } /* Mobile drawer backdrop */ .mobile-nav-backdrop{ display:none; position:fixed; inset:0; top:var(--unified-nav-h); background:rgba(0,0,0,0.35); z-index:9975; opacity:0; pointer-events:none; transition:opacity 0.2s ease; } body.mobile-nav-open .mobile-nav-backdrop{ display:block; opacity:1; pointer-events:auto; } body.mobile-nav-open{ overflow:hidden; } /* Icon-only nav for medium screens */ @media (max-width: 1100px) and (min-width: 901px){ .nav-tab span:not(.nav-badge){display:none;} .nav-tab{padding:6px 10px;gap:4px;} .nav-logo-title{display:none;} .nav-security-badge{display:none;} } /* Mega menu — reflow before columns overflow (zoom + narrow desktop) */ @media (max-width: 1280px) and (min-width: 901px){ .mega-inner.cols-3-feat{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .mega-inner.cols-3-feat .mega-col-section:nth-child(3){ grid-column: 1 / -1; } .mega-inner.cols-3-feat .mega-feature-card{ grid-column: 1 / -1; min-height: 160px; } .mega-inner.cols-2-feat{ grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 24px; } } @media (max-width: 1050px) and (min-width: 901px){ .mega-inner.cols-2-feat, .mega-inner.cols-3-feat, .mega-inner.cols-4-feat{ grid-template-columns: minmax(0, 1fr); gap: 16px; } .mega-inner.cols-3-feat .mega-col-section:nth-child(3), .mega-inner.cols-3-feat .mega-feature-card, .mega-inner.cols-2-feat .mega-feature-card, .mega-inner.cols-4-feat .mega-feature-card{ grid-column: auto; } .mega-feature-card{ min-height: 140px; } .mega-menu{ min-height: 0; max-height: calc(100dvh - var(--unified-nav-h-scrolled)); } } @media (max-width: 900px){ .primary-nav{ padding:0 10px 0 12px; gap:6px; } .nav-logo{ flex:1 1 auto; min-width:0; margin-right:0; } .nav-logo img{ height:30px; max-width:min(140px, 36vw); } .nav-logo-title{ display:block; font-size:0.82rem; padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(180px, 42vw); } .hamburger-btn{display:flex;} .nav-right{ margin-left:0; gap:4px; flex-shrink:0; } .nav-right .nav-icon-btn{ width:36px; height:36px; } .nav-center{ display:none !important; position:fixed; top:var(--unified-nav-h); left:0; right:0; bottom:0; background:var(--surface); z-index:9988; flex-direction:column; align-items:stretch; gap:0; padding:8px 12px 24px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-top:1px solid rgba(212, 175, 55, 0.15); box-shadow:0 12px 40px rgba(0, 0, 0, 0.45); } .nav-center.mobile-open{display:flex !important;} .nav-center .nav-divider{display:none;} .nav-center .nav-tab-wrap{ padding-bottom:0; margin-bottom:0; width:100%; } .nav-center .nav-tab{ justify-content:flex-start; padding:12px 14px; font-size:0.92rem; border-radius:10px; width:100%; box-sizing:border-box; } .nav-center .nav-tab span{display:inline !important;} /* Short accent bar — full-width ::after looked like a broken rule on mobile. */ .nav-center .nav-tab.active::after, .nav-center .nav-tab-wrap.mega-active::after{ left:14px; right:auto; width:36px; transform:none; bottom:6px; } .nav-center .mega-menu{ position:static; transform:none; opacity:1; pointer-events:auto; border:none; box-shadow:none; padding:4px 0 10px 12px; display:none; background:transparent; min-height:0; } .nav-center .mega-menu.open{display:block;} .nav-center .mega-inner, .nav-center .mega-inner.cols-2-feat, .nav-center .mega-inner.cols-3-feat, .nav-center .mega-inner.cols-4-feat{ display:flex; flex-direction:column; gap:12px; max-width:100%; width:100%; grid-template-columns:none; } .nav-center .mega-col-section{ width:100%; min-width:0; } .nav-center .mega-col-section:nth-child(3){ grid-column:auto; } .nav-center .mega-feature-card{display:none;} .nav-right .nav-security-badge{display:none;} .nav-right .nav-user-chip{ padding:4px 8px 4px 4px; } .nav-right .nav-user-chip span, .nav-right .nav-user-chip .bi-chevron-down{display:none;} .mega-backdrop{display:none !important;} } @media (max-width: 768px){ .primary-nav{ padding: 0 8px 0 10px; gap: 4px; } .nav-logo-title{ display:none; } .nav-logo img{ height:28px; max-width:120px; } } @media (max-width: 480px){ .nav-divider{ display: none; } .nav-right .nav-context-badge{display:none;} }