/* ========================================================= THE BACON BIN — REV274K SITE-WIDE NAVBAR MOTION + TYPE POLISH Goals: - zero layout/spacing jump on hover - crisp approved typography - premium red/white light-rail animation - consistent SHOP / ARCADE / every other nav item - restrained active state - mobile remains clean and calm ========================================================= */ /* --------------------------------------------------------- DESKTOP NAV TEXT Kill all legacy physical motion. Animation now happens only in absolutely-positioned light effects, so spacing cannot jump. --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav), html body#bb-test-font-lock .shop-categories > summary{ position:relative!important; isolation:isolate!important; transform:none!important; translate:none!important; scale:1!important; color:#ece9e3!important; font-weight:900!important; letter-spacing:1.08px!important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision; font-kerning:normal; text-shadow:0 1px 0 rgba(0,0,0,.92)!important; transition: color .18s ease, text-shadow .22s ease, filter .22s ease!important; } /* --------------------------------------------------------- LIGHT RAIL Replaces old left/right expansion logic with transform-only animation. It cannot affect flex gap or link dimensions. --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)::before, html body#bb-test-font-lock .shop-categories > summary::before{ content:""!important; display:block!important; position:absolute!important; left:50%!important; right:auto!important; bottom:27px!important; width:calc(100% + 8px)!important; height:1px!important; margin:0!important; transform:translateX(-50%) scaleX(.10)!important; transform-origin:center center!important; background: linear-gradient( 90deg, transparent 0%, rgba(177,30,34,.35) 12%, rgba(229,50,46,.88) 31%, #ff5a53 43%, #fff 50%, #ff5a53 57%, rgba(229,50,46,.88) 69%, rgba(177,30,34,.35) 88%, transparent 100% )!important; opacity:0!important; box-shadow: 0 0 5px rgba(239,59,53,.34), 0 0 12px rgba(239,59,53,.16)!important; pointer-events:none!important; transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .16s ease, filter .30s ease!important; } /* --------------------------------------------------------- SOFT BLOOM A tiny atmospheric halo under the light rail. Also absolute: sexy little effect, zero geometry movement. --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)::after, html body#bb-test-font-lock .shop-categories > summary::after{ content:""!important; position:absolute!important; left:50%!important; bottom:21px!important; width:42px!important; height:12px!important; transform:translateX(-50%) scaleX(.42)!important; transform-origin:center!important; background: radial-gradient( ellipse at center, rgba(239,59,53,.26) 0%, rgba(239,59,53,.11) 38%, transparent 74% )!important; filter:blur(3px)!important; opacity:0!important; pointer-events:none!important; transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .20s ease!important; } /* --------------------------------------------------------- HOVER / KEYBOARD FOCUS Text stays physically fixed. The light does the moving. --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible, html body#bb-test-font-lock .shop-categories > summary:hover, html body#bb-test-font-lock .shop-categories > summary:focus-visible{ transform:none!important; translate:none!important; color:#fff!important; text-shadow: 0 1px 0 rgba(0,0,0,.95), 0 0 1px rgba(255,255,255,.72), 0 0 8px rgba(239,59,53,.28)!important; filter:brightness(1.035)!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover::before, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible::before, html body#bb-test-font-lock .shop-categories > summary:hover::before, html body#bb-test-font-lock .shop-categories > summary:focus-visible::before{ transform:translateX(-50%) scaleX(1)!important; opacity:1!important; filter:brightness(1.12)!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover::after, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible::after, html body#bb-test-font-lock .shop-categories > summary:hover::after, html body#bb-test-font-lock .shop-categories > summary:focus-visible::after{ transform:translateX(-50%) scaleX(1.18)!important; opacity:1!important; } /* --------------------------------------------------------- ACTIVE PAGE Keeps a restrained illuminated rail visible without making every page look permanently hovered. --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"]{ transform:none!important; color:#fff!important; text-shadow: 0 1px 0 rgba(0,0,0,.95), 0 0 7px rgba(239,59,53,.18)!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active::before, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"]::before{ transform:translateX(-50%) scaleX(.88)!important; opacity:.82!important; filter:none!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active::after, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"]::after{ transform:translateX(-50%) scaleX(.80)!important; opacity:.38!important; } /* Active + hover gets the full effect. */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active:hover::before, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"]:hover::before{ transform:translateX(-50%) scaleX(1)!important; opacity:1!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active:hover::after, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"]:hover::after{ transform:translateX(-50%) scaleX(1.18)!important; opacity:1!important; } /* --------------------------------------------------------- FOCUS ACCESSIBILITY --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible, html body#bb-test-font-lock .shop-categories > summary:focus-visible{ outline:1px solid rgba(239,59,53,.52)!important; outline-offset:7px!important; border-radius:2px!important; } /* --------------------------------------------------------- EBAY MASCOT Don't apply text animation to the image link. Give the icon its own tiny, stable polish with no change to flex geometry. --------------------------------------------------------- */ html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav{ transform:none!important; translate:none!important; transition:filter .22s ease!important; } html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav::before, html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav::after{ display:none!important; } html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav img{ transform:translateZ(0) scale(1)!important; transform-origin:center!important; transition: transform .28s cubic-bezier(.16,1,.3,1), filter .24s ease!important; } html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav:hover img, html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav:focus-visible img{ transform:translateZ(0) scale(1.045)!important; filter: drop-shadow(0 0 7px rgba(239,59,53,.16)) brightness(1.035)!important; } /* --------------------------------------------------------- MOBILE / COLLAPSED NAV No glowing horizontal rail in the stacked menu. Use a clean left-edge accent and subtle background instead. --------------------------------------------------------- */ @media(max-width:860px){ html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav), html body#bb-test-font-lock .shop-categories > summary{ transform:none!important; translate:none!important; text-shadow:none!important; transition: color .16s ease, background-color .16s ease, box-shadow .16s ease!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)::before, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)::after, html body#bb-test-font-lock .shop-categories > summary::before, html body#bb-test-font-lock .shop-categories > summary::after{ display:none!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible, html body#bb-test-font-lock .shop-categories > summary:hover, html body#bb-test-font-lock .shop-categories > summary:focus-visible{ color:#fff!important; background: linear-gradient(90deg,rgba(239,59,53,.075),transparent 58%)!important; box-shadow:inset 2px 0 0 rgba(239,59,53,.62)!important; filter:none!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active, html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"]{ background: linear-gradient(90deg,rgba(239,59,53,.10),transparent 62%)!important; box-shadow:inset 2px 0 0 rgba(239,59,53,.82)!important; } html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible, html body#bb-test-font-lock .shop-categories > summary:focus-visible{ outline:none!important; } } /* --------------------------------------------------------- REDUCED MOTION Keep the polished states; remove animation. --------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ html body#bb-test-font-lock .shop-nav > a, html body#bb-test-font-lock .shop-categories > summary, html body#bb-test-font-lock .shop-nav > a::before, html body#bb-test-font-lock .shop-nav > a::after, html body#bb-test-font-lock .shop-nav > a.bb-ebay-nav img{ transition:none!important; animation:none!important; } }