/* BFB sticky action bar — shared across all nineteen pages. * * Extracted from index.html, where it lived inline: 55 lines of CSS, 12 of * markup and 32 of JS, with both visibility gates hard-coded to homepage * selectors. Thirteen pages had no persistent CTA at all and five carried a * pair of floating buttons instead. One file now, so a change to the bar is a * one-file change rather than a nineteen-file edit. * * The comments below record measurements, not intentions. Do not tidy them * away — each one is a bug that was found by measuring and would be * reintroduced by the obvious fix. */ /* The bar replaced two Elementor floating widgets (a fixed tel: circle and the e-contact-buttons WhatsApp bubble). Those overlaid page content on mobile with no reserved space, so collisions could only ever be tuned away, never eliminated. Here the bar's full height is reserved as padding-bottom on , so content cannot end up underneath it by construction. The reservation is UNCONDITIONAL — it is not toggled with the bar's visibility. Toggling it would reflow the whole document every time the bar appeared or hid, which is the CLS problem in #9 reintroduced by hand. env(safe-area-inset-bottom) is added on top of the 56px tappable row rather than eaten out of it, so the row stays 56px on an iPhone with a home indicator instead of shrinking to ~22px of usable target. `html body` rather than `body`: the theme's aggregated stylesheet declares `body{padding:0;padding-bottom:0}` and loads after this file, so at equal specificity it won and the reservation silently computed to 0px. Two element selectors outrank one without reaching for !important. Measured, not assumed — the verifier caught it as a 57px overlap at the page foot. Separation from the page is a box-shadow, NOT a border-top. A 1px border made the bar 57px of outer height against a 56px reservation, so the footer's last line sat 1px under it. A shadow paints outside the box and takes no layout space, which keeps one number authoritative for both the bar's height and the space reserved for it. */ :root{--bfb-bar-h:56px} html body{padding-bottom:calc(var(--bfb-bar-h) + env(safe-area-inset-bottom,0px))} /* The reserved strip is painted by the BODY background, which on the homepage is #FAF3EA sitting directly under the #F0E5D0 footer. On mobile the bar happens to cover the strip at the page foot, but on DESKTOP the form gate hides the bar there, so 56px of the wrong cream was on screen with nothing over it — measured by forcing the body background to magenta and sampling every viewport-sized slice of the page: visible in exactly one place, viewport y 844-898 of the final desktop slice, and nowhere else at any viewport. Fixed by painting the strip as the footer's own continuation rather than by recolouring . A box-shadow with a vertical offset, no blur and no spread lays a solid block of the footer's colour directly beneath it and takes NO layout space, so the reservation above is still the only thing setting the document's height. Recolouring body would have meant beating Elementor's `.elementor-kit-2296` class (specificity 0,1,0) with something like `html body[class]` — a specificity war over a global property, to fix 56px at the page foot. An earlier version of this comment claimed the other eighteen pages set body and footer from the same --paper token and so needed no continuation. That was asserted, not measured, and it is false. Seventeen of the nineteen pair footer #2A2118 over body #FBF9F5 — near-white under near-black, a far more obvious band than the cream-on-cream case this trick was written for. It was invisible in testing because the lander's enquiry form was the last thing on the page and the form gate was "is the form on screen at all", so the bar was suppressed at exactly the scroll position where the band appears. The gate is now a band test (see /bfb-bar.js), the bar is on at the foot of all nineteen pages, and the accident that hid this is gone. The rule stays: the bar's slide-in takes 180ms, and for that 180ms the strip is bare. Hence the second rule. It is keyed on the bare element, so it reaches every hand-built page without nineteen edits, and it loses to the Elementor rule above on specificity (0,1,1 against 0,0,1) rather than on source order. --bfb-foot defaults to the value seventeen pages actually use. /beam-check/ is the one exception: its footer has no background at all, so the strip there is already body #EFEAE2 and any solid colour would CREATE the mismatch instead of closing it. That page declares --bfb-foot:transparent, which paints nothing and lets the body through — the correct answer, expressed as an override rather than as a selector this file has to know about. */ footer.elementor-location-footer{ box-shadow:0 calc(var(--bfb-bar-h) + env(safe-area-inset-bottom,0px)) 0 #F0E5D0} footer{ box-shadow:0 calc(var(--bfb-bar-h) + env(safe-area-inset-bottom,0px)) 0 var(--bfb-foot,#2A2118)} /* Below #mobMenu (9998), not above it. At 9999 the bar rendered on top of the open full-screen mobile menu — elementFromPoint at the bar's band returned .bfb-bar__act while the menu was open. Sitting under an opaque overlay is the correct behaviour and needs no extra JS to manage. */ .bfb-bar{position:fixed;left:0;right:0;bottom:0;z-index:9990; background:#3F2916;box-shadow:0 -2px 14px rgba(23,19,15,.22); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateY(100%);visibility:hidden;pointer-events:none; transition:transform .18s ease-out,visibility .18s linear} /* visibility:hidden also takes the links out of the tab order, so the hidden bar is unreachable by keyboard as well as by touch — aria-hidden on the element and the focus behaviour then agree instead of contradicting. */ .bfb-bar.is-on{transform:translateY(0);visibility:visible;pointer-events:auto} @media (prefers-reduced-motion:reduce){.bfb-bar{transition:none}} /* Background is full-bleed; the routes stop stretching past 680px so they do not become enormous slabs on a desktop viewport. */ .bfb-bar__row{display:flex;max-width:680px;margin:0 auto;height:var(--bfb-bar-h)} .bfb-bar__act{flex:1 1 0;min-width:0;display:flex;align-items:center; justify-content:center;font-family:Lato,sans-serif;font-size:12px; font-weight:700;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:#F6F1E9;-webkit-tap-highlight-color:transparent; /* Dividers are an inset shadow, not a border-left. With flex-basis:0 the border came out of the distributable free space, so the first route (which has no divider) rendered 1px narrower than the other two — 129.33 against 130.34. "Equal width" then wasn't. An inset shadow occupies no layout space, so all cells are exactly equal. */ box-shadow:inset 1px 0 0 rgba(255,255,255,.14)} .bfb-bar__act:first-child{box-shadow:none} .bfb-bar__act:focus-visible{outline:2px solid #F6F1E9;outline-offset:-4px} /* The Beam Check is the strongest asset on the site and was previously only reachable from the hero, so it carries the accent rather than sitting level with the two contact routes. #17130F on #B08A5A measures 5.83:1 — AA for normal text, so it does not repeat the contrast failure in #12. This is the one place gold carries a call to action. Everywhere else the primary CTA is #3F2916 with white (13.64:1, see D3), so the gold reads as "the single most important thing on the page" rather than as the button colour. Two golds meaning two different things would be one gold too many. */ .bfb-bar__act--lead{background:#B08A5A;color:#17130F;box-shadow:none} /* QUIET VARIANT — the blog. Same slot, same ground, same slide-in, two cells instead of three: the wordmark home and a phone number. A reader who moves between a post and a service page finds the CTA in the same place on both, which is the whole reason it is not a different component in a different position. The wordmark is set in type rather than shipped as an image: no extra request, and nothing to mis-name in a format audit. */ .bfb-bar__act--mark{font-family:'Cormorant Garamond',Georgia,serif; font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:none; color:#EADFCB;flex:1.15 1 0}