/* ================================================================ nav-shared.css — SINGLE SOURCE OF TRUTH for the app navbar. Linked by BOTH navbar.html (Bootstrap 4) and navbar_bs5.html (Bootstrap 5). Edit navbar styling HERE only — never inline in the two markup shims. ================================================================ */ /* --- consistent items / logo / avatar / hover --- */ /* ===== Consistent navbar across ALL pages (shared component) ===== */ .navbar .navbar-nav{align-items:center!important} .navbar .navbar-nav .nav-item{display:flex;align-items:center} /* Text nav items (Home, Guide, Sign in): one unified size / weight / colour / hover / motion */ .navbar .navbar-nav .nav-item .nav-link{ font-size:.95rem!important;font-weight:600!important;font-family:var(--sans)!important;color:var(--ink)!important; padding:.46rem 1.05rem;margin-left:.15rem;border-radius:10px;line-height:1.4;display:inline-flex;align-items:center;gap:6px; transition:background .18s ease,color .18s ease,transform .12s ease} .navbar .navbar-nav .nav-item .nav-link:hover{background:var(--tint);color:var(--action-deep)!important} /* the page you are on: the same tint pill the parent tabs use for the selected tab */ .navbar .navbar-nav .nav-item .nav-link[aria-current="page"]{background:var(--tint);color:var(--action-deep)!important} .navbar .navbar-nav .nav-item .nav-link:active{transform:translateY(1px)} /* Icons inside nav links: subtle, consistent hover motion */ .navbar .navbar-nav .nav-link svg{width:18px;height:18px;flex:0 0 auto;stroke-width:2;transition:transform .18s ease} .navbar .navbar-nav .nav-link:hover svg{transform:translateY(-1px) scale(1.06)} /* Sign up = filled slate CTA — SAME font size/weight, subtle lift + sheen, white label */ .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link{position:relative;overflow:hidden;color:var(--paper)!important; padding:.5rem 1.3rem;margin-left:.5rem; background:var(--action)!important;box-shadow:0 4px 12px rgba(47,95,166,.28); transition:transform .2s cubic-bezier(.34,1.4,.5,1),box-shadow .22s ease,background .2s ease} .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link:hover{transform:translateY(-2px);color:var(--paper)!important; background:var(--action-deep)!important;box-shadow:0 10px 24px rgba(47,95,166,.4)} .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link:active{transform:translateY(0);box-shadow:0 4px 12px rgba(47,95,166,.28)} .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .55s ease;pointer-events:none} .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link:hover::after{left:130%} /* Profile avatar (logged-in): no pill, subtle scale; consistent slate accent */ .navbar #profile-toggle-link.nav-link{padding:.3rem;border-radius:50%} .navbar #profile-toggle-link.nav-link:hover{background:transparent} .navbar #profile-toggle-link .user-initial-circle{transition:transform .18s ease;background:var(--paper)!important;border:2px solid var(--vidya);color:var(--ink)!important} .navbar #profile-toggle-link:hover .user-initial-circle{transform:scale(1.07)} @media (max-width:991px){ .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link{display:inline-block;margin:.4rem 0 0;text-align:center} } @media (prefers-reduced-motion:reduce){ .navbar .navbar-nav .nav-item .nav-link,.navbar .navbar-nav .nav-item .qv-nav-signup.nav-link, .navbar .navbar-nav .nav-link i,.navbar #profile-toggle-link .user-initial-circle{transition:none} .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link::after{display:none} } /* --- drawer + hamburger (solid nav is the same on landing & scroll) --- */ .navbar .navbar-nav .nav-item .nav-link,.navbar .navbar-toggler,.navbar .navbar-toggler-icon{transition:color .3s ease,background-color .3s ease,box-shadow .3s ease,border-color .3s ease,filter .3s ease!important} /* animated hamburger -> X */ .navbar .navbar-toggler{border:0!important;padding:8px 6px!important;outline:none!important;box-shadow:none!important;color:var(--ink)} /* H-11: outline:none needs its :focus-visible partner (WCAG 2.4.7); !important because the line above is */ .navbar .navbar-toggler:focus-visible{outline:2px solid var(--action-deep)!important;outline-offset:2px;border-radius:6px} .navbar .navbar-toggler-icon{background-image:none!important;position:relative;width:24px;height:2px;background:currentColor;display:inline-block;border-radius:2px;transition:background .16s ease} .navbar .navbar-toggler-icon::before,.navbar .navbar-toggler-icon::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1)} .navbar .navbar-toggler-icon::before{top:-7px} .navbar .navbar-toggler-icon::after{top:7px} .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{background:transparent} .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{top:0;transform:rotate(45deg)} .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{top:0;transform:rotate(-45deg)} /* ---- Mobile drawer: vertical, full-width tap targets, solid readable panel ---- */ @media (max-width:991px){ .navbar .navbar-collapse{background:#fff;border-radius:0 0 16px 16px;box-shadow:0 14px 34px rgba(31,45,61,.16);padding:10px 14px 16px;margin:8px -15px 0} .navbar .navbar-nav{flex-direction:column!important;align-items:stretch!important;width:100%} .navbar .navbar-nav .nav-item{width:100%;margin:0} .navbar .navbar-nav .nav-item .nav-link{display:block;width:100%;text-align:left;padding:.8rem .9rem;border-radius:10px;font-size:1rem!important;color:var(--ink)!important;margin:0!important} .navbar .navbar-nav .nav-item .nav-link:hover{background:var(--tint)!important;color:var(--action-deep)!important} /* auth pair: full-width outlined Sign in + filled Sign up, with a divider above */ .navbar .navbar-nav .qv-auth-item:first-of-type{margin-top:.5rem;padding-top:.65rem;border-top:1px solid var(--rule)} .navbar .navbar-nav .nav-item .qv-nav-signin.nav-link{display:block;width:100%;text-align:center;font-weight:600;color:var(--action-deep)!important;background:var(--paper)!important;border:1.5px solid var(--rule2)!important;border-radius:11px;padding:.72rem .9rem!important;margin:0!important} .navbar .navbar-nav .nav-item .qv-nav-signin.nav-link:hover{background:var(--tint)!important;border-color:var(--action)!important;color:var(--action-deep)!important} .navbar .navbar-nav .nav-item .qv-nav-signup.nav-link{display:block;width:100%;text-align:center;font-weight:600;margin:.55rem 0 .1rem!important;color:var(--paper)!important;background:var(--action)!important;border-radius:11px;padding:.72rem .9rem!important;box-shadow:0 6px 16px rgba(47,95,166,.26)!important} } @media (prefers-reduced-motion:reduce){.navbar,.navbar *{transition:none!important}} /* smoother, more natural mobile drawer */ @media (max-width:991px){ .navbar .navbar-collapse.collapsing{transition:height .2s cubic-bezier(.33,1,.68,1)!important;will-change:height;overflow:hidden;contain:layout} .navbar .navbar-collapse .navbar-nav{opacity:1;transform:none} } /* --- solid surface + stable logo colour --- */ /* Consistent SOLID nav appearance everywhere: opaque white + subtle shadow (elevated). */ .navbar{background:var(--paper)!important;border-bottom:1px solid var(--rule)!important;box-shadow:none!important} /* Logo: ONE consistent colour, rock-stable on hover (no flicker/blink) on every page. */ .navbar .navbar-brand,.navbar .logo-text, .navbar .navbar-brand:hover,.navbar .navbar-brand:focus, .navbar .navbar-brand:hover .logo-text,.navbar .navbar-brand:focus .logo-text{color:var(--ink)!important} .navbar .logo-highlight,.navbar .navbar-brand:hover .logo-highlight,.navbar .navbar-brand:focus .logo-highlight{color:var(--vidya)!important} /* --- mobile menu: synchronized staggered item reveal (JS toggles .qv-anim-in / .qv-anim-out) --- */ @media (max-width:991px){ #navbarNav.qv-anim-in .nav-item{animation:qvNavItemIn .32s cubic-bezier(.2,.7,.3,1) both} #navbarNav.qv-anim-in .nav-item:nth-child(2){animation-delay:.045s} #navbarNav.qv-anim-in .nav-item:nth-child(3){animation-delay:.09s} #navbarNav.qv-anim-in .nav-item:nth-child(4){animation-delay:.135s} #navbarNav.qv-anim-in .nav-item:nth-child(5){animation-delay:.18s} #navbarNav.qv-anim-in .nav-item:nth-child(6){animation-delay:.225s} #navbarNav.qv-anim-in .nav-item:nth-child(7){animation-delay:.27s} #navbarNav.qv-anim-in .nav-item:nth-child(8){animation-delay:.315s} #navbarNav.qv-anim-out .nav-item{animation:qvNavItemOut .17s cubic-bezier(.4,0,1,1) both} /* close gets its own quick ease-IN height (no decelerating creep like the ease-out open) */ #navbarNav.qv-anim-out.collapsing{transition:height .17s cubic-bezier(.4,0,1,1)!important} } @keyframes qvNavItemIn{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}} @keyframes qvNavItemOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}} @media (prefers-reduced-motion:reduce){#navbarNav.qv-anim-in .nav-item,#navbarNav.qv-anim-out .nav-item{animation:none!important}} /* --- mobile drawer: profile/avatar becomes a clean left-aligned "Account" row (was floating centered) --- */ @media (max-width:991px){ .navbar #profile-toggle-link.nav-link{justify-content:flex-start!important;gap:10px;width:100%;padding:.62rem .9rem!important;border-radius:10px!important} .navbar #profile-toggle-link.nav-link::after{content:"Account";font-size:1rem;font-weight:600;color:var(--ink);line-height:1} .navbar #profile-toggle-link.nav-link:hover{background:var(--tint)!important} } /* --- navbar horizontal geometry: identical across BS4 & BS5 (BS5 had 0 nav padding + uncentered container) --- */ .navbar{padding-left:16px!important;padding-right:16px!important} .navbar > .container{width:90%!important;max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;flex:0 1 auto!important} /* Navbar logo: larger + evenly centred in the bar (2026-08-30) */ .navbar .navbar-brand{display:inline-flex;align-items:center;line-height:1} .navbar .logo-text{font-size:1.5rem;line-height:1} @media (max-width:991px){ .navbar .logo-text{font-size:1.25rem} } /* Pin navbar to the height the whole app assumes (hero/body offsets are hardcoded to 65px). The height was previously implicit (driven by the tallest child = the logo), so changing the logo size shrank the bar and opened a gap under the fixed navbar. min-height makes it robust. */ .navbar{min-height:65px} /* ≤480px: the hero offset drops to 59px (index.css:922), so match the navbar height there too. */ @media (max-width:480px){ .navbar{min-height:59px} } /* ============================================================================ THE ONE PARENT CHROME (spec 2026-09-18-consistent-experience-design section 6, D-10; boards C-1 ... C-5 and F-1.4, F-2.4, F-4.7). White bar, three tabs, avatar right, on every parent surface; logo and avatar only everywhere else. The bar carries .qv-tokens (templates/navbar_v5.html) so every var() below resolves to the standard whatever the page's own :root says. Positioning moved here from index.css:26-33, which was a second copy of this bar. nav-shared.css is the single source of truth for the navbar, and index.css is not linked on every shell that renders it. ============================================================================ */ .navbar{position:fixed;top:0;width:100%;z-index:1000} .navbar .navbar-brand,.navbar .logo-text{font-family:var(--brand)} /* The tab strip: pills, left of everything else in the bar. The tabs are