/* ═══════════════════════════════════════════════════ NULLSCAPES TOPBAR — paste into of any page Compatible with cyanobacteria.css variable system. ═══════════════════════════════════════════════════ */ /* ── Push page content down so it doesn't hide under fixed bar ── */ body { padding-top: 36px !important; } /* ── Reset scope so global nav/a styles don't bleed in ── */ #ns-topbar, #ns-topbar *, #ns-mobile-menu, #ns-mobile-menu * { box-sizing: border-box; margin: 0; padding: 0; list-style: none; text-decoration: none; font-style: normal; transition: none; } /* ── Topbar shell — fixed, full width, above everything ── */ #ns-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: 36px; display: flex; align-items: stretch; background: linear-gradient(180deg, var(--gradientTop) 0%, var(--gradientBottom) 100%); border-bottom: 2px ridge var(--border); box-shadow: 0 2px 6px rgba(0,0,0,0.25); font-family: 'MS PGothic', sans-serif; } /* ── Logo ── */ #ns-topbar .ns-logo { display: flex; align-items: center; padding: 0 12px; font-size: 0.82rem; font-weight: bold; letter-spacing: 2px; color: var(--accent) !important; border-right: 2px ridge var(--border); white-space: nowrap; background: linear-gradient(to right, var(--bg), var(--gradientBottom)); transition: box-shadow 0.15s, color 0.15s !important; } #ns-topbar .ns-logo:hover, #ns-topbar .ns-logo:focus { box-shadow: inset 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent) !important; font-style: normal !important; } /* ── Nav list ── */ #ns-topbar .ns-nav { display: flex; align-items: stretch; flex: 1; } #ns-topbar .ns-nav > li { position: relative; display: flex; align-items: stretch; } /* ── Top-level nav buttons ── */ #ns-topbar .ns-nav > li > a { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 100%; font-size: 0.78rem; font-weight: bold; letter-spacing: 1px; color: var(--text) !important; border-right: 1px solid var(--border); border-bottom: none; background: none; border-radius: 0; white-space: nowrap; transition: box-shadow 0.15s, color 0.15s, background 0.15s !important; } #ns-topbar .ns-nav > li > a .ns-arr { font-size: 0.55rem; opacity: 0.5; transition: opacity 0.15s !important; } /* ── Hover: accent glow on the border ── */ #ns-topbar .ns-nav > li > a:hover, #ns-topbar .ns-nav > li > a:focus { background: linear-gradient(to bottom, var(--bg), var(--gradientBottom)); color: var(--accent) !important; font-style: normal !important; box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 -2px 0 var(--accent); } #ns-topbar .ns-nav > li > a:hover .ns-arr, #ns-topbar .ns-nav > li > a:focus .ns-arr { opacity: 1; } /* ── Active (dropdown open): stronger glow + bottom accent line ── */ #ns-topbar .ns-nav > li.ns-open > a { background: linear-gradient(to bottom, var(--bg), var(--gradientBottom)); color: var(--accent) !important; font-style: normal !important; box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 -3px 0 var(--accent); } /* ── Current page ── */ #ns-topbar .ns-nav > li > a.ns-current { color: var(--accent) !important; box-shadow: inset 0 -3px 0 var(--accent); background: linear-gradient(to bottom, var(--bg), var(--gradientBottom)); } /* ── Dropdown panel ── */ #ns-topbar .ns-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: linear-gradient(var(--gradientTop), var(--gradientBottom)); border: 2px ridge var(--border); border-top: 2px solid var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent); z-index: 9100; } #ns-topbar .ns-nav > li.ns-open .ns-dropdown { display: block; } /* ── Dropdown category label ── */ #ns-topbar .ns-dropdown .ns-cat { display: block; padding: 5px 10px 3px; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); border-bottom: 1px ridge var(--border); font-weight: bold; cursor: default; opacity: 0.8; } /* ── Dropdown links ── */ #ns-topbar .ns-dropdown a { display: block; padding: 6px 10px 6px 14px; font-size: 0.8rem; color: var(--text) !important; border-bottom: 1px solid var(--border); background: none; border-radius: 0; transition: background 0.1s, padding-left 0.1s, box-shadow 0.1s, color 0.1s !important; } #ns-topbar .ns-dropdown a:last-child { border-bottom: none; } #ns-topbar .ns-dropdown a:hover, #ns-topbar .ns-dropdown a:focus { background: linear-gradient(to right, var(--bg), var(--gradientBottom)); padding-left: 18px; color: var(--accent) !important; font-style: normal !important; box-shadow: inset 3px 0 0 var(--accent); } /* ── WIP badge ── */ #ns-topbar .ns-wip { font-size: 0.5rem; letter-spacing: 1px; padding: 1px 4px; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent); opacity: 0.6; vertical-align: middle; margin-left: 4px; } /* ── Hamburger (mobile only) ── */ #ns-topbar .ns-hamburger { display: none; margin-left: auto; align-items: center; justify-content: center; padding: 0 13px; background: none; border: none; border-left: 1px solid var(--border); border-radius: 0; color: var(--text); cursor: pointer; width: auto; font-family: inherit; transition: box-shadow 0.15s, color 0.15s !important; } #ns-topbar .ns-hamburger:hover, #ns-topbar .ns-hamburger:focus { color: var(--accent); box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); font-style: normal !important; } /* ── Mobile slide-down menu ── */ #ns-mobile-menu { display: none; position: fixed; top: 36px; left: 0; right: 0; z-index: 8999; background: linear-gradient(var(--gradientTop), var(--gradientBottom)); border-bottom: 2px ridge var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.3); max-height: calc(100vh - 36px); overflow-y: auto; } #ns-mobile-menu.ns-open { display: block; } #ns-mobile-menu .ns-cat { display: block; padding: 7px 14px 3px; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: bold; border-bottom: 1px ridge var(--border); font-family: 'MS PGothic', sans-serif; } #ns-mobile-menu a { display: block; padding: 8px 14px 8px 20px; font-size: 0.85rem; font-family: 'MS PGothic', sans-serif; color: var(--text) !important; border-bottom: 1px solid var(--border); background: none; border-radius: 0; transition: background 0.1s, padding-left 0.1s, box-shadow 0.1s !important; } #ns-mobile-menu a:hover, #ns-mobile-menu a:focus { background: linear-gradient(to right, var(--bg), var(--gradientBottom)); color: var(--accent) !important; padding-left: 24px; font-style: normal !important; box-shadow: inset 3px 0 0 var(--accent); } /* ── Hide nav on mobile, show hamburger ── */ @media (max-width: 760px) { #ns-topbar .ns-nav { display: none; } #ns-topbar .ns-hamburger { display: flex; } } @media (max-width: 400px) { #ns-topbar .ns-logo { font-size: 0.7rem; padding: 0 8px; } } /* ═══════════════════════════════════ CATEGORY COLORS — 360 RGBY scheme Red=Main, Green=neoGenesis, Blurple=My World, Orange=Creations ═══════════════════════════════════ */ /* ── Shared: colored outline on the button, colored arrow ── */ #ns-topbar .ns-nav > li.ns-cat-red > a { box-shadow: inset 0 0 0 1px #e3000f; } #ns-topbar .ns-nav > li.ns-cat-green > a { box-shadow: inset 0 0 0 1px #76c900; } #ns-topbar .ns-nav > li.ns-cat-purple > a { box-shadow: inset 0 0 0 1px #6b5fff; } #ns-topbar .ns-nav > li.ns-cat-orange > a { box-shadow: inset 0 0 0 1px #f47b00; } /* ── Colored arrows ── */ #ns-topbar .ns-nav > li.ns-cat-red > a .ns-arr { color: #e3000f; opacity: 1; } #ns-topbar .ns-nav > li.ns-cat-green > a .ns-arr { color: #76c900; opacity: 1; } #ns-topbar .ns-nav > li.ns-cat-purple > a .ns-arr { color: #6b5fff; opacity: 1; } #ns-topbar .ns-nav > li.ns-cat-orange > a .ns-arr { color: #f47b00; opacity: 1; } /* ── Hover + open: glow kicks in ── */ #ns-topbar .ns-nav > li.ns-cat-red > a:hover, #ns-topbar .ns-nav > li.ns-cat-red.ns-open > a { box-shadow: inset 0 0 0 1px #e3000f, inset 0 0 12px rgba(227,0,15,0.35), inset 0 -3px 0 #e3000f; color: #e3000f !important; } #ns-topbar .ns-nav > li.ns-cat-green > a:hover, #ns-topbar .ns-nav > li.ns-cat-green.ns-open > a { box-shadow: inset 0 0 0 1px #76c900, inset 0 0 12px rgba(118,201,0,0.35), inset 0 -3px 0 #76c900; color: #76c900 !important; } #ns-topbar .ns-nav > li.ns-cat-purple > a:hover, #ns-topbar .ns-nav > li.ns-cat-purple.ns-open > a { box-shadow: inset 0 0 0 1px #6b5fff, inset 0 0 12px rgba(107,95,255,0.35), inset 0 -3px 0 #6b5fff; color: #6b5fff !important; } #ns-topbar .ns-nav > li.ns-cat-orange > a:hover, #ns-topbar .ns-nav > li.ns-cat-orange.ns-open > a { box-shadow: inset 0 0 0 1px #f47b00, inset 0 0 12px rgba(244,123,0,0.35), inset 0 -3px 0 #f47b00; color: #f47b00 !important; } /* ── Dropdown top border matches category color ── */ #ns-topbar .ns-nav > li.ns-cat-red.ns-open .ns-dropdown { border-top-color: #e3000f; } #ns-topbar .ns-nav > li.ns-cat-green.ns-open .ns-dropdown { border-top-color: #76c900; } #ns-topbar .ns-nav > li.ns-cat-purple.ns-open .ns-dropdown { border-top-color: #6b5fff; } #ns-topbar .ns-nav > li.ns-cat-orange.ns-open .ns-dropdown { border-top-color: #f47b00; } /* ═══════════════════════════════════════ MOBILE MENU — full screen pause overlay ═══════════════════════════════════════ */ #ns-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8999; background: linear-gradient(160deg, var(--gradientTop) 0%, var(--gradientBottom) 100%); overflow-y: auto; padding-top: 52px; /* clears the topbar */ animation: ns-menu-in 0.18s ease both; } @keyframes ns-menu-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } #ns-mobile-menu.ns-open { display: block; } /* ── Section headers with category colors ── */ #ns-mobile-menu .ns-cat { display: block; padding: 14px 20px 6px; font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; font-weight: bold; font-family: 'MS PGothic', sans-serif; border-bottom: 2px ridge var(--border); margin-top: 8px; } #ns-mobile-menu .ns-cat-red { color: #e3000f; border-bottom-color: #e3000f; } #ns-mobile-menu .ns-cat-purple { color: #6b5fff; border-bottom-color: #6b5fff; } #ns-mobile-menu .ns-cat-green { color: #76c900; border-bottom-color: #76c900; } #ns-mobile-menu .ns-cat-orange { color: #f47b00; border-bottom-color: #f47b00; } /* ── Links — big touch targets ── */ #ns-mobile-menu a { display: block; padding: 13px 20px 13px 28px; font-size: 1rem; font-family: 'MS PGothic', sans-serif; color: var(--text) !important; border-bottom: 1px solid var(--border); background: none; border-radius: 0; letter-spacing: 0.5px; transition: padding-left 0.1s, background 0.1s, box-shadow 0.1s !important; } #ns-mobile-menu a:hover, #ns-mobile-menu a:focus, #ns-mobile-menu a:active { background: linear-gradient(to right, var(--bg), transparent); color: var(--accent) !important; padding-left: 36px; font-style: normal !important; box-shadow: inset 4px 0 0 var(--accent); } /* ── Animated hamburger → X ── */ #ns-ham { position: relative; width: 36px; height: 36px; padding: 0; display: none; /* shown via media query in base CSS */ flex-direction: column; align-items: center; justify-content: center; gap: 5px; } #ns-ham .ns-bar { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease; position: relative; } #ns-ham.ns-ham-open .ns-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } #ns-ham.ns-ham-open .ns-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } #ns-ham.ns-ham-open .ns-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Close hint at bottom of menu ── */ #ns-mobile-menu::after { content: '[ tap outside or ✕ to close ]'; display: block; text-align: center; font-size: 0.6rem; letter-spacing: 2px; color: var(--border); padding: 24px 0 32px; font-family: 'MS PGothic', sans-serif; }