/* =================================================================== UNIFIED HEADER DESIGN - InfiniteGridDashboard Professional dark theme header with SVG logo =================================================================== */ /* CSS Variables for Header */ :root { --hdr-bg: rgba(20, 25, 35, 0.95); --hdr-border: #23293A; --hdr-text: #E7ECF5; --hdr-muted: #A7B0C1; --hdr-accent: #3B82F6; --hdr-accent-hover: #60A5FA; --hdr-focus: #93C5FD; --hdr-height: 64px; --hdr-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* Main Header Container */ .app-header { position: sticky; top: 0; z-index: 1000; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-border); box-shadow: var(--hdr-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: background 0.3s ease; /* Prevent animation conflicts on auth pages */ opacity: 1; animation: none; } /* * Flex, left to right, NOT three grid columns. * * The grid gave the nav a centre column of its own, so three short links floated alone in the * middle of a very wide bar with 250px of nothing either side of them — the layout of a landing * page, not of a tool. Reading order is now the hierarchy: brand, then the product areas next to * it, then everything about this account pushed to the far edge by `margin-left: auto`. */ .header-container { max-width: 100%; padding: 0 1.5rem; height: var(--hdr-height); display: flex; align-items: center; gap: 2rem; } /* =================================================================== LEFT SECTION: Logo + Workspace =================================================================== */ .header-left { display: flex; align-items: center; gap: 1rem; } .header-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--hdr-text); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Vertical padding trimmed from 0.5rem so the 56px mark fits inside the 64px bar without having to make the whole header taller. */ padding: 0.25rem 0.5rem; border-radius: 8px; } .header-brand:hover { color: #FFFFFF; background: rgba(59, 130, 246, 0.1); } .header-brand:focus { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } .header-logo { color: var(--hdr-accent); transition: transform 0.2s ease, color 0.2s ease; flex-shrink: 0; } /* Animated mark vs static fallback. The canvas stays hidden until quasar-logo.js adds .quasar-ready on , so a browser with the script blocked keeps the SVG instead of an empty box. 56px, and it is not oversized: the canvas is mostly transparent margin, so the mark itself only occupies about 60% of it — a 56px canvas reads as a ~40px logo. Below ~40px of canvas the disk and jets land on single pixels and the whole thing collapses into a bright dot. */ .header-logo-canvas { display: none; } .quasar-ready .header-logo-canvas { display: block; } .quasar-ready .header-logo-fallback { display: none; } .header-logo-canvas, .header-logo-fallback { width: 56px; height: 56px; } .header-brand:hover .header-logo { transform: scale(1.05); color: var(--hdr-accent-hover); } .header-wordmark { font-size: 1.4rem; font-weight: 600; letter-spacing: 0.2em; white-space: nowrap; } /* =================================================================== PRIMARY NAVIGATION — beside the brand, not centred =================================================================== */ .header-nav { /* The gap on .header-container already gives the 2rem between brand and nav. */ display: flex; align-items: center; } .nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } /* * A quiet text link with a hit area, not a pill and not a tab. * * The underline that used to grow out of `::after` on hover was the loudest thing in the bar for * an interaction that means "you could go here", and it read as a landing-page navbar. Hover and * the current page are now told apart by one step of background each — the same two-step idiom the * canvas view tabs use, so the two bars feel like one product rather than two. */ .nav-link-item { display: inline-block; padding: 0.44rem 0.65rem; color: var(--hdr-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: 6px; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .nav-link-item:hover { color: var(--hdr-text); background: rgba(255, 255, 255, 0.04); } .nav-link-item:focus-visible { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } .nav-link-item.active { color: #FFFFFF; background: rgba(255, 255, 255, 0.055); } /* =================================================================== RIGHT SECTION: User Info & Auth =================================================================== */ /* Pushed to the far edge — this is what replaces the old third grid column. */ .header-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; } /* Logged-in User Section */ .header-user-section { display: flex; align-items: center; gap: 0.5rem; } /* ---- the user menu ---- */ .header-user-menu { position: relative; } .header-user-trigger { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--hdr-muted); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .header-user-trigger:hover, .header-user-trigger[aria-expanded="true"] { color: var(--hdr-text); background: rgba(255, 255, 255, 0.055); } .header-user-trigger:focus-visible { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } .user-caret { color: var(--hdr-muted); flex-shrink: 0; transition: transform 0.15s ease; } .header-user-trigger[aria-expanded="true"] .user-caret { transform: rotate(180deg); } .header-user-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 0.3rem; background: #1E2533; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.28); z-index: 1001; } .header-user-dropdown[hidden] { display: none; } .header-user-item { display: block; width: 100%; padding: 0.44rem 0.6rem; border-radius: 5px; color: var(--hdr-muted); text-decoration: none; font-size: 0.82rem; font-weight: 500; text-align: left; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .header-user-item:hover { color: var(--hdr-text); background: rgba(255, 255, 255, 0.055); } .header-user-item:focus-visible { outline: 2px solid var(--hdr-focus); outline-offset: -2px; } /* Logout is a form submit; it has to look like the links above it, not like a button. */ .header-user-item-btn { background: transparent; border: 0; font-family: inherit; cursor: pointer; } .header-user-sep { height: 1px; margin: 0.3rem 0.15rem; background: rgba(255, 255, 255, 0.07); } .user-icon { color: var(--hdr-accent); flex-shrink: 0; } .user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-form { margin: 0; } /* Logged-out Auth Section */ .header-auth-section { display: flex; align-items: center; gap: 0.75rem; } .header-auth-link { display: inline-block; padding: 0.5rem 1rem; color: var(--hdr-text); text-decoration: none; font-size: 0.9375rem; font-weight: 500; border-radius: 6px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .header-auth-link:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.05); } .header-auth-link:focus { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } .header-auth-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 1.25rem; background: var(--hdr-accent); border: 1px solid var(--hdr-accent); border-radius: 6px; color: #FFFFFF; text-decoration: none; font-size: 0.9375rem; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .header-auth-btn:hover { background: var(--hdr-accent-hover); border-color: var(--hdr-accent-hover); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .header-auth-btn:focus { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } .header-auth-btn:active { transform: translateY(0); } /* =================================================================== MOBILE HAMBURGER TOGGLE =================================================================== */ .header-mobile-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--hdr-border); border-radius: 6px; color: var(--hdr-text); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .header-mobile-toggle:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--hdr-accent); color: var(--hdr-accent); } .header-mobile-toggle:focus { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } /* =================================================================== RESPONSIVE DESIGN =================================================================== */ /* Tablet (1024px and below) */ @media (max-width: 1024px) { /* The container is a flex ROW now, so the stacked layout comes from wrapping rather than from moving things between grid columns. DOM order — brand, toggle, nav, account — is already the stacking order, so nothing needs `order`. */ .header-container { flex-wrap: wrap; gap: 1rem; } .header-nav { display: none; width: 100%; margin-top: 0.5rem; } .header-nav.show { display: block; } .nav-links { flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 0.5rem 0; } .nav-link-item { padding: 0.75rem 1rem; } /* Takes the slack on the first row, which is what pushed the account block right on desktop. */ .header-mobile-toggle { display: flex; margin-left: auto; } .header-right { width: 100%; margin-left: 0; border-top: 1px solid var(--hdr-border); padding-top: 1rem; margin-top: 1rem; } .header-wordmark { display: none; } } /* Mobile (768px and below) */ @media (max-width: 768px) { .header-container { padding: 0 1rem; height: auto; min-height: var(--hdr-height); } .header-left { gap: 0.5rem; } /* The bell and the menu stay on ONE row here: stacking them would make the menu trigger a full-width bar whose dropdown then hangs off a control the width of the screen. */ .header-user-section { width: 100%; justify-content: space-between; } .header-auth-section { flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; } .header-auth-link, .header-auth-btn { width: 100%; justify-content: center; } .user-name { max-width: none; } } /* Small Mobile (480px and below) */ @media (max-width: 480px) { .header-container { padding: 0 0.75rem; } /* Still large enough for the disk and jets to survive — under ~34px the animated mark collapses into a dot. */ .header-logo, .header-logo-canvas, .header-logo-fallback { width: 44px; height: 44px; } } /* =================================================================== ACCESSIBILITY ENHANCEMENTS =================================================================== */ /* Keyboard navigation */ *:focus-visible { outline: 2px solid var(--hdr-focus); outline-offset: 2px; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .header-brand, .header-logo, .nav-link-item, .header-user-trigger, .header-user-item, .user-caret, .header-auth-link, .header-auth-btn, .header-mobile-toggle { transition: none; } } /* High contrast mode support */ @media (prefers-contrast: high) { .app-header { border-bottom: 2px solid var(--hdr-text); } .header-auth-btn { border-width: 2px; } } /* =================================================================== THE NAV, VISIBLE ON DESKTOP =================================================================== The markup carries Bootstrap's `collapse` class so the hamburger can drive it on small screens. But `.collapse:not(.show)` is `display: none` at specificity (0,2,0), and the desktop rule above is `.header-nav` at (0,1,0) — so Bootstrap won at every width and the entire header navigation has never rendered on desktop. Home, Docs and Privacy were all in the HTML and none of them were on screen. Matched specificity, and this file loads after bootstrap.min.css, so source order settles it. Scoped above the breakpoint where the hamburger takes over, so the mobile behaviour — hidden until `.show` — is untouched. */ @media (min-width: 1025px) { .header-nav.collapse { display: flex; } }