@import url("/css/dark.css?3244824415"); :root { --theme-primary-rgb: 39,44,48; --theme-secondary-rgb: 108,117,125; --theme-bg-page-rgb: 34,34,34; --theme-bg-primary-rgb: 52,58,64; --theme-bg-secondary-rgb: 33,37,41; } :root { --theme-opacity: 0.44; } .navbar-primary { backdrop-filter: blur(10px); } .page-header { background: var(--theme-gradient); } .title { font-weight: 900; text-transform: uppercase; } .page-header { text-align: center; } :root { --theme-border-radius: 0.43rem; } .btn, .badge, .card, div.table-responsive, .form-control, .form-select, .form-switch .form-check-input, .text-editor .toolbar-bubble .toolbar, .modal-content, .input-group-text, .page-item .page-link.page-link, .page-item span, .btn-group > .btn, .input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text, .input-group > .btn, div.swal2-popup, button.swal2-styled.swal2-styled, .swal2-input, .swal2-select, .ace_editor { border-radius: var(--theme-border-radius); } .card-img-top { border-top-left-radius: calc(var(--theme-border-radius) - 1px); border-top-right-radius: calc(var(--theme-border-radius) - 1px); } .table { margin-bottom: 0; } .table-responsive { margin-bottom: 1rem; } .page-item .page-link { height: 35px; width: 35px; margin: 0 5px; display: flex; align-items: center; justify-content: center; } .snow { z-index: 1030 !important; pointer-events: none; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Single Navbar with Smoky Blue Underglow</title> <style> /* ===== Global reset ===== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ===== Fixed navbar height variable ===== */ :root { --navbar-height: 56px; } /* Offset page content for fixed navbar (ONLY ONCE) */ body { padding-top: var(--navbar-height); font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ===== Navbar ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); z-index: 1000; display: flex; align-items: center; padding: 0 18px; gap: 16px; background-color: #4a5057; border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Smoky blue underglow (box-shadow only, no duplication possible) */ box-shadow: 0 10px 18px -12px rgba(110, 170, 255, 0.65), 0 18px 32px -18px rgba(85, 140, 220, 0.45), 0 28px 55px -28px rgba(60, 110, 190, 0.30); } /* ===== Navbar content ===== */ .navbar .brand { color: #ffffff; font-size: 18px; font-weight: 600; white-space: nowrap; } .navbar .links { display: flex; gap: 14px; } .navbar .links a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 14px; font-weight: 500; } .navbar .links a:hover { color: #ffffff; } /* ===== Page content ===== */ main { padding: 24px; font-size: 14px; line-height: 1.4; } </style> </head> <body> <!-- ONE navbar only --> <nav class="navbar"> <div class="brand">Rusty Mafia</div> <div class="links"> <a href="#">Home</a> <a href="#">Store</a> <a href="#">Bans</a> <a href="#">Users</a> <a href="#">Admin</a> <a href="#">Discord</a> <a href="#">Vote</a> </div> </nav> <main> <h1>Page Content</h1> <p> This content is correctly offset below the fixed navbar. There is no duplicate navbar, no ghost spacing, and the smoky blue glow renders only underneath the bar. </p> </main> </body> </html>