/* ========================================================================== Jeries Booking — shared BRAND design tokens. Loaded on every frontend page so all our custom UI (login card, toggle, Send-code button, header account item, mobile pill, /book page) matches the site: black / white / GOLD, in the site's Deuterium typeface. Elements still hardcode the same values as var() fallbacks, so they stay on-brand even if this file fails to load. ========================================================================== */ :root{ --jbi-gold: #a9844b; /* official brand gold */ --jbi-gold-dark: #8f6d3c; /* hover + gold text on white (more contrast) */ --jbi-gold-contrast: #ffffff; /* text/icon on a gold fill */ --jbi-ink: #1c1f26; /* near-black brand ink */ --jbi-font: 'Deuterium', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Brand typeface for all our custom UI. Form controls (input/button) do NOT inherit font-family, so they are targeted explicitly. */ .jbi-login, .jbi-login input, .jbi-login button, .jbi-book-wrap, .jbi-mobile-account, .jbi-account-menu-item > a{ font-family: var(--jbi-font); } /* ========================================================================== Booking "Book now" buttons (Booknetic popup) + header booking entries. The old header book button (desktop widget 463524f + mobile wrapper) and the plain "Book" nav link are REMOVED — the merged split control below replaces them. The in-page "Book now" button + /book + per-barber links stay intact. ========================================================================== */ .elementor-element-463524f, .custom-mobile-booking-wrapper, .menu-item-32354{ display: none !important; } .bnktc_booking_popup_btn{ border-color: var(--jbi-gold, #a9844b) !important; color: var(--jbi-gold, #a9844b) !important; transform: none !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } /* Kill Booknetic's grey slide-in ::before overlay (the dark colour + the awkward left->right slide on hover) so the hover is a clean gold fill. */ .bnktc_booking_popup_btn::before{ display: none !important; } .bnktc_booking_popup_btn:hover, .bnktc_booking_popup_btn:focus{ background-color: var(--jbi-gold, #a9844b) !important; border-color: var(--jbi-gold, #a9844b) !important; color: #0e0e0e !important; transform: none !important; /* no slide */ } /* ========================================================================== PER-BARBER card button ( .jbi-barber-book ) — "Book now with {name}". Server-side replaces each homepage staff card's generic "Book now" button with a personalized link to /book/{slug} (barber pre-selected). Matches the card's existing gold styling: gold OUTLINE + gold text + a "→", filling gold on hover (same look the cards had, just personalized). Grows for longer names. ========================================================================== */ .jbi-barber-book{ display: inline-block; padding: 16px 26px; background: transparent; color: var(--jbi-gold, #a9844b); border: 2px solid var(--jbi-gold, #a9844b); border-radius: 6px; font-family: var(--jbi-font); font-weight: 700; font-size: 14px; line-height: 1.15; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; text-align: center; max-width: 100%; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .jbi-barber-book::after{ content: " \2192"; } /* → arrow, matching the old button */ .jbi-barber-book:hover, .jbi-barber-book:focus{ background: var(--jbi-gold, #a9844b); border-color: var(--jbi-gold, #a9844b); color: #0e0e0e; text-decoration: none; } /* ========================================================================== MERGED SPLIT CONTROL (Option 3) — one gold pill = [ BOOK NOW | account ]. Left: filled gold, dark text, calendar icon -> booking (opens the popup in place via the .bnktc_booking_popup_btn class; href="/book" is the no-JS fallback). Right: transparent, gold text, user icon -> login-aware link. DESKTOP ONLY: inline in the header nav (.jbi-split-wrap), relocated flush-right by a tiny script. On MOBILE this control is hidden — the burger menu carries BOOK NOW + account as its own gold items instead (see .jbi-mobile-item below). ========================================================================== */ .jbi-split{ display: inline-flex; align-items: stretch; border: 2px solid var(--jbi-gold, #a9844b); border-radius: 8px; overflow: hidden; font-family: var(--jbi-font); line-height: 1; vertical-align: middle; background: #0e0e0e; } .jbi-split .jbi-seg{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-decoration: none !important; cursor: pointer; white-space: nowrap; border: 0; background: transparent; transition: background-color .18s ease, color .18s ease; } .jbi-split .jbi-seg svg{ width: 16px; height: 16px; flex: 0 0 auto; } /* Left segment — filled gold, dark ink. */ .jbi-split .jbi-seg-book, .jbi-split a.jbi-seg-book.bnktc_booking_popup_btn{ background: var(--jbi-gold, #a9844b) !important; color: #0e0e0e !important; border: 0 !important; } .jbi-split .jbi-seg-book:hover, .jbi-split .jbi-seg-book:focus{ background: var(--jbi-gold-dark, #8f6d3c) !important; /* darker gold, never grey */ color: #0e0e0e !important; } /* Right segment — transparent, gold text, gold divider. */ .jbi-split .jbi-seg-acct{ background: transparent !important; color: var(--jbi-gold, #a9844b) !important; border-left: 2px solid var(--jbi-gold, #a9844b); } .jbi-split .jbi-seg-acct:hover, .jbi-split .jbi-seg-acct:focus{ background: var(--jbi-gold, #a9844b) !important; color: #0e0e0e !important; } .jbi-split-wrap{ display: flex !important; align-items: center; } /* DESKTOP: a tiny script relocates the split into the header's own far-right column (element 3555f5c, where the old book button lived), so it sits flush right and vertically centered — using the theme's layout instead of fighting the nav. These styles apply once it's placed there. */ .jbi-split-wrap{ list-style: none; margin: 0; } .jbi-split-wrap.jbi-split-placed{ display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%; } /* ========================================================================== MOBILE — split into two independent, robust pieces: (A) BOOK NOW inline in the header BAR ( .jbi-book-bar ). A tiny script clones a compact gold button and inserts it right BEFORE the theme's own burger button, so the bar reads [logo] ... [BOOK NOW] [burger] — in-flow, part of the header row, NEVER fixed/floating. It lives hidden until placed and is only revealed <=900px, so a stray desktop insert stays hidden. (B) The account link inside the BURGER ( .jbi-mobile-item / .jbi-mobile-acct ). A real
  • at the TOP of the opened burger menu (menu_mobile), styled gold. Secondary for a new visitor, so the burger is the right home for it. All selectors are class-based (no fragile Elementor ids). ========================================================================== */ .jbi-mobile-item{ display: none; } /* off on desktop; the .jbi-split-wrap shows there */ .jbi-book-bar{ display: none; } /* hidden until the script places it, and only <=900px */ @media (max-width: 900px){ /* Desktop merged split never shows on mobile — the bar + burger carry the CTAs. */ .jbi-split-wrap{ display: none !important; } /* ONE CLEAN ROW: BOOK NOW + burger vertically centered on the same line. BOOK NOW and the theme burger are direct children of the same .sc_layouts_item. By default they align as inline elements (book-bar vertical-align:middle vs the burger's baseline), which drifts apart when the line box is tall — that is the "BOOK NOW higher, burger lower" misalignment. Flexing their shared container removes all baseline math and centers both, evenly spaced. Scoped with :has() so ONLY the container holding BOOK NOW is affected (the hidden