/* ============================================================ nav.css — Shared navigation styles for all portal pages Included via in every page's Menu HTML is controlled by config/nav_public.php, nav_seller.php, nav_tenant.php, nav_admin.php ============================================================ */ :root { --menu-bg: rgb(10, 14, 24); --menu-border: rgba(130,173,240,0.22); --accent: #6d9be6; --accent-strong: #82adf0; --muted: #b9c6da; } body.menu-open { overflow: hidden; } /* ── Top bar nav ── */ .nav { position: relative; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 30px 36px; gap: 20px; } .nav-left { display: flex; align-items: center; justify-content: flex-start; } .nav-center{ display: flex; align-items: center; justify-content: center; } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; } .logo { display: inline-block; font-size: 30px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; line-height: 1; } .logo span { color: var(--accent); } .menu-trigger { background: transparent; border: none; color: #dce7f8; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; padding: 8px 12px; } .menu-trigger:hover { color: #ffffff; } .nav-link { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #dce7f8; } .nav-link:hover, .nav-link.active { color: #ffffff; } .nav-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 1px solid rgba(130,173,240,0.35); color: #ffffff; background: rgba(109,155,230,0.06); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .nav-btn:hover { background: rgba(109,155,230,0.14); } /* ── Menu panel ── */ .menu-panel { position: absolute; top: 88px; left: 36px; right: 36px; z-index: 40; background: var(--menu-bg); border: 1px solid var(--menu-border); box-shadow: 0 20px 80px rgba(0,0,0,0.45); padding: 0; display: none; } .menu-panel.open { display: block; } .menu-body { display: grid; grid-template-columns: 340px 190px 190px 1fr 240px 520px; gap: 0; padding: 28px 24px; align-items: stretch; min-height: 280px; } /* Seller / tenant / admin: simpler 3-col layout */ .menu-body.menu-body--portal { grid-template-columns: 280px 1fr 220px; min-height: auto; } .menu-nav { display: flex; flex-direction: column; gap: 4px; padding-right: 28px; border-right: 1px solid rgba(130,173,240,0.10); } .menu-nav a { font-size: 44px; line-height: 1.1; color: #dce7f8; letter-spacing: -0.03em; display: block; } .menu-nav a:hover, .menu-nav a.active { color: var(--accent-strong); } .menu-col { padding: 0 24px; border-right: 1px solid rgba(130,173,240,0.10); } /* Section headers — uniform across all columns */ .menu-panel h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); font-weight: 700; } /* Sub-links and text — uniform */ .menu-meta-block a, .menu-meta-block p, .menu-contact-val { margin: 0; font-size: 15px; line-height: 1.9; color: #c6d5ec; display: block; text-decoration: none; transition: color 0.1s; white-space: nowrap; } .menu-meta-block a:hover, .menu-contact-val:hover { color: #fff; } .menu-contact-col { border-left: 1px solid rgba(130,173,240,0.10); padding-left: 24px; padding-right: 0; border-right: none; } .menu-contact-item { display: flex; flex-direction: column; } .menu-contact-key { display: none; } .menu-contact-cta { font-size: 13px; line-height: 1.9; color: var(--accent-strong); text-decoration: none; display: block; } .menu-contact-cta:hover { color: #fff; } /* Article images */ .menu-articles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-left: 20px; border-left: 1px solid rgba(130,173,240,0.10); align-self: stretch; } .menu-article { display: flex; flex-direction: column; gap: 10px; text-decoration: none; height: 100%; } .menu-article-img { width: 100%; height: 120px; background: rgba(130,173,240,0.06) center/cover no-repeat; border: 1px solid rgba(130,173,240,0.15); flex-shrink: 0; } .menu-article:hover .menu-article-img { border-color: rgba(130,173,240,0.35); } .menu-article-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; } .menu-article:hover .menu-article-label { color: #fff; } /* Portal-style side card (seller/tenant/admin) */ .menu-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 20px; } .menu-card { width: 100%; min-height: 170px; background: url('/assets/img/hands-bg.png') center/cover no-repeat; border: 1px solid rgba(130,173,240,0.18); } .menu-close { background: transparent; border: 1px solid rgba(130,173,240,0.28); color: #dce7f8; min-height: 36px; padding: 0 14px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; } .menu-close:hover { color: #fff; background: rgba(109,155,230,0.08); } /* Content wrapper z-index — sits above hero-overlay (z-index:2) */ .page-shell, .dashboard-shell, .content-shell, .dashboard-wrap, .page-hero, .tab-section, .content { position: relative; z-index: 3; } /* Fixed background — stays static as page scrolls, dark overlay extends with content */ .hero-bg { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; background-attachment: fixed; z-index: 0; } .hero-overlay { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .hero-wrap { overflow: visible !important; background: transparent !important; } .page { background: #06080d; position: relative; } /* ── Responsive ── */ @media (max-width: 1200px) { .menu-body { grid-template-columns: 320px 170px 170px 1fr 220px 400px; } } @media (max-width: 1000px) { .menu-body { grid-template-columns: 180px 1fr 1fr; } .menu-contact-col, .menu-articles { display: none; } .menu-panel.open { grid-template-columns: 1fr; } .menu-side { align-items: flex-start; } } @media (max-width: 980px) { .nav { grid-template-columns: 1fr auto; padding: 22px 24px; } .logo { font-size: 24px; } .nav-center { justify-content: flex-end; } .nav-right { display: none; } .menu-panel { top: 78px; left: 24px; right: 24px; } } @media (max-width: 640px) { .menu-nav a { font-size: 28px; } .menu-trigger, .nav-link, .nav-btn { font-size: 11px; } }