/* bar.css, the bottom bar. A TEST, 2026-09-25, only live behind ?bar=1. Copied from tryhappyads.com, Sabby's older Webflow site, off its computed styles measured in a real browser at 390 and 1440 wide, not guessed from a screenshot. His words: the bar at the bottom looks beautiful, make that exact bar. Two differences, both on purpose: 1. Poppins, not Happy Ads' Space Grotesk. The site's type is the brand. 2. It stays hidden until the first screen has scrolled away. Happy Ads shows it from the start; Sabby wants the hero left alone. Happy Ads numbers kept as measured: fixed 20px off the bottom, 1px #555B62 outline, 20px corners, rgba(26,29,34,.9) with a 5px blur, padding 10 10 10 16, a 35px home icon, a 32px burger of three 16x2 lines, links at 16px/600 in #EDEDED with 12px 16px padding and 12px corners, and the Apply button 40px tall, 12px corners, 12px 20px padding, white on the accent. Under 992px (Webflow's "medium") the links fold into the burger and open in a matching glass panel above the bar. Everything is scoped to .dbar, and bar.js only builds it when theme.js has put data-bar on , so without the parameter none of this applies. */ .dbar { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; justify-content: center; pointer-events: none; /* only the bar itself takes taps */ opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); font-family: 'Poppins', sans-serif; } .dbar.is-shown { opacity: 1; transform: none; } .dbar-inner { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 64px; padding: 10px 10px 10px 16px; border: 1px solid #555B62; border-radius: 20px; background: rgba(26, 29, 34, .9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-sizing: border-box; } .dbar:not(.is-shown) .dbar-inner { pointer-events: none; } .dbar-left { display: flex; align-items: center; gap: 10px; } .dbar-home { display: block; width: 35px; height: 35px; color: #EDEDED; -webkit-tap-highlight-color: transparent; } .dbar-home svg { display: block; width: 35px; height: 35px; } .dbar-home:hover { color: #fff; } /* The burger. Three lines become an X when the panel is open, the same as Happy Ads. A