. Defaults are the Fast Locksmith cream / vermilion palette. Body classes (set by locksmith-callbar.js on ): lq-svc-open / lq-ct-open / lq-rf-open ============================================================ */ .lq-cb { --cb-cream: #EBE7DB; /* input / sub-surface fills */ --cb-card: #F6F3EA; /* bar + sheet surface */ --cb-sunk: #E1DCCC; /* pressed list rows, icon wells */ --cb-ink: #1A1712; /* text, referral offer block */ --cb-accent: #E63A1F; /* FAB, active tab, CTA, prices */ --cb-on-accent: #fff; /* text/icon ON the accent fill — set to ink for light (gold) accents */ --cb-accent-d: color-mix(in srgb, var(--cb-accent) 84%, #000); --cb-border: #D8D2C1; --cb-border-strong: #C6BFAA; --cb-muted: #746F5E; --cb-faint: #9A937E; --cb-font: 'Archivo', system-ui, sans-serif; --cb-display: 'Archivo Black', 'Archivo', sans-serif; --cb-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; font-family: var(--cb-font); } .lq-cb *, .lq-cb *::before, .lq-cb *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- Sticky bottom nav + call FAB ---------- */ .lq-cb .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; --liftY: 0px; display: flex; align-items: flex-end; gap: 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cb-card) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--cb-border); /* Claim the vertical gesture so a swipe-up on the bar is tracked (Pointer Events) instead of being interpreted as a page scroll. Taps still work. */ touch-action: none; } /* Apply to the interactive children too — some engines key the gesture off the hit element, not the ancestor, so the swipe-up needs them set as well. */ .lq-cb .cb-tab, .lq-cb .cb-fab, .lq-cb .cb-gap { touch-action: none; } /* The Call FAB stays anchored at the bar — it no longer rides up with the open panel (--liftY held at 0 in every sheet state). */ .lq-cb .cb-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 2px; color: var(--cb-muted); text-decoration: none; background: none; border: none; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: color .12s, transform .08s; } .lq-cb .cb-tab:active { transform: scale(.92); } .lq-cb .cb-tab svg { width: 21px; height: 21px; } /* Bounce the Shop tab icon when an item is added from a product card. */ @keyframes cb-shop-bounce { 0%,100% { transform: translateY(0); } 28% { transform: translateY(-8px); } 52% { transform: translateY(0); } 72% { transform: translateY(-3px); } 88% { transform: translateY(0); } } .lq-cb .cb-tab.cb-bounce .ic-n { animation: cb-shop-bounce .6s ease; } .lq-cb .cb-tab span { font-family: var(--cb-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .lq-cb .cb-tab.on { color: var(--cb-accent); } /* On-accent text — ink on light (gold) accents, white on dark (red/blue). `.lq-cb.lq-cb` bumps specificity so this wins over the base color:#fff rules regardless of source order / media query. --cb-on-accent is set per-site on .lq-cb (ink for gold, white for dark). "On gold → black." */ .lq-cb.lq-cb .cb-fab,.lq-cb.lq-cb .cb-fab span, .lq-cb.lq-cb .cb-dial, .lq-cb.lq-cb .cb-hub-call,.lq-cb.lq-cb .cb-hub-call small, .lq-cb.lq-cb .cb-hub-add,.lq-cb.lq-cb .cb-hub-sc-corner,.lq-cb.lq-cb .cb-hub-cart-go, .lq-cb.lq-cb .svc-shop-link,.lq-cb.lq-cb .svc-cat.svc-cat-all,.lq-cb.lq-cb .svc-cat.svc-cat-all.on, .lq-cb.lq-cb .hs-inquire,.lq-cb.lq-cb .pa-opt.on, .lq-cb.lq-cb .prod-add,.lq-cb.lq-cb .prod-act-add,.lq-cb.lq-cb .svc-book-btn, .lq-cb.lq-cb .cb-badge,.lq-cb.lq-cb .cb-btn,.lq-cb.lq-cb .rf-link button, .lq-cb.lq-cb .svc-mode-btn.on,.lq-cb.lq-cb .bk-choice-seg.on, .lq-cb.lq-cb .feat-feed .tcorner,.lq-cb.lq-cb .feat-feed .all-products, .lq-cb.lq-cb .bk-choice.on .bk-choice-t,.lq-cb.lq-cb .bk-choice.on .bk-choice-s, .lq-cb.lq-cb .bk-consult.on .bk-consult-t,.lq-cb.lq-cb .bk-consult.on .bk-consult-s,.lq-cb.lq-cb .bk-consult.on .bk-consult-ico{color:var(--cb-on-accent)} /* Tiny up-arrow above the Shop / Book icons — signals the bar can be swiped up. A gentle bob draws the eye; hidden once a sheet is open. */ .lq-cb .cb-swipe-hint { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); color: var(--cb-accent); opacity: .85; pointer-events: none; line-height: 0; animation: cb-hint-bob 1.8s ease-in-out infinite; } .lq-cb .cb-swipe-hint svg { width: 16px; height: 16px; display: block; } @keyframes cb-hint-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } } body.lq-svc-open .lq-cb .cb-swipe-hint, body.lq-ct-open .lq-cb .cb-swipe-hint, body.lq-rf-open .lq-cb .cb-swipe-hint { display: none; } @media (prefers-reduced-motion: reduce) { .lq-cb .cb-swipe-hint { animation: none; } } /* Pressed tab swaps its icon for an X (close) while its sheet is open. */ .lq-cb .cb-tab .ic-x { display: none; } body.lq-svc-open .lq-cb [data-sheet="lq-svc-open"] .ic-n, body.lq-ct-open .lq-cb [data-sheet="lq-ct-open"] .ic-n, body.lq-rf-open .lq-cb [data-sheet="lq-rf-open"] .ic-n { display: none; } body.lq-svc-open .lq-cb [data-sheet="lq-svc-open"] .ic-x, body.lq-ct-open .lq-cb [data-sheet="lq-ct-open"] .ic-x, body.lq-rf-open .lq-cb [data-sheet="lq-rf-open"] .ic-x { display: block; } .lq-cb .cb-gap { width: 76px; flex-shrink: 0; } .lq-cb .cb-fab { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px); transform: translateX(-50%) translateY(calc(-1 * var(--liftY))); width: 64px; height: 64px; border-radius: 50%; background: var(--cb-accent); color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--cb-accent) 70%, transparent), 0 0 0 5px var(--cb-card); -webkit-tap-highlight-color: transparent; transition: background .12s, transform .34s cubic-bezier(.32,.72,.28,1); } .lq-cb .cb-fab:active { transform: translateX(-50%) translateY(calc(-1 * var(--liftY))) scale(.94); background: var(--cb-accent-d); } .lq-cb .cb-fab svg { width: 23px; height: 23px; } .lq-cb .cb-fab span { font-family: var(--cb-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- Scrim ---------- */ .lq-cb .svc-scrim { position: fixed; inset: 0; z-index: 33; background: rgba(26,23,18,0.45); opacity: 0; pointer-events: none; transition: opacity .28s; } body.lq-svc-open .lq-cb .svc-scrim, body.lq-ct-open .lq-cb .svc-scrim, body.lq-rf-open .lq-cb .svc-scrim { opacity: 1; pointer-events: auto; } /* ---------- Sheet shell ---------- */ .lq-cb .svc-sheet { position: fixed; left: 0; right: 0; z-index: 34; bottom: calc(64px + env(safe-area-inset-bottom)); height: min(64vh, 540px); background: var(--cb-card); color: var(--cb-ink); border-top: 1px solid var(--cb-border-strong); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 50px -22px rgba(26,23,18,0.5); display: flex; flex-direction: column; transform: translateY(calc(100% + 80px + env(safe-area-inset-bottom))); transition: transform .34s cubic-bezier(.32,.72,.28,1); } body.lq-svc-open .lq-cb #lqSvcSheet { transform: translateY(0); } /* All slide-up sheets share one height (= the Order sheet's min(64vh,540px) from .svc-sheet) so the Call FAB always sits on the sheet's top edge. Content shorter than the sheet just leaves room; taller content scrolls (overflow-y:auto on .ct-form / .svc-list). */ .lq-cb .ct-sheet { height: min(64vh, 540px); } body.lq-ct-open .lq-cb .ct-sheet { transform: translateY(0); } .lq-cb .rf-sheet { height: min(64vh, 540px); } body.lq-rf-open .lq-cb .rf-sheet { transform: translateY(0); } /* The grab strip = the ONLY drag-to-dismiss zone (full sheet width, top edge), so dragging it down dismisses while the content below still scrolls freely. The visible pill is drawn via ::before. */ .lq-cb .svc-handle { position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 3; touch-action: none; cursor: grab; display: grid; place-items: center; } /* Down-arrow in the middle of the raised panel — swipe this strip down to close. */ .lq-cb .svc-handle-arr { width: 18px; height: 18px; color: var(--cb-accent); opacity: .82; animation: cb-hint-bob-down 1.8s ease-in-out infinite; } @keyframes cb-hint-bob-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .lq-cb .svc-handle-arr { animation: none; } } .lq-cb .svc-head { display: flex; align-items: center; gap: 10px; padding: 20px 16px 10px; } .lq-cb .svc-head h3 { font-family: var(--cb-display); font-size: 16px; font-weight: 400; letter-spacing: -0.3px; text-transform: uppercase; color: var(--cb-ink); } .lq-cb .svc-count { margin-right: auto; font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-faint); } /* Shop "All products" button — neo-brutalist (sharp, hard offset shadow, press). */ .lq-cb .svc-shop-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 2px; background: var(--cb-accent); color: #1A1408; border: 2px solid var(--cb-ink); box-shadow: 3px 4px 0 var(--cb-ink); font-family: var(--cb-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; transition: transform .1s, box-shadow .1s; } .lq-cb .svc-shop-link:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--cb-ink); } /* Shop mode: slim header, "All products" + close pushed right, filter tucks under. */ .lq-cb .svc-head-shop { padding: 13px 16px 8px; } .lq-cb .svc-head-shop .svc-shop-link { margin-left: auto; } .lq-cb .svc-shopctrls { padding-top: 0; } .lq-cb .svc-close, .lq-cb .svc-back { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--cb-border-strong); background: var(--cb-cream); cursor: pointer; display: grid; place-items: center; color: var(--cb-ink); } .lq-cb .svc-close svg, .lq-cb .svc-back svg { width: 15px; height: 15px; } .lq-cb .svc-back[hidden] { display: none; } /* Sheet content scrolls vertically; only the grab strip dismisses. */ .lq-cb .svc-list, .lq-cb .ct-form, .lq-cb .prod-highsec, .lq-cb .prod-auto, .lq-cb .rf-body { touch-action: pan-y; } /* ---------- Services sheet ---------- */ /* Controls row: search alone is full-width; with products the pill toggle + search share one row 50/50 (.has-modes). The children's own side margins are neutralised inside the row — the wrapper owns the 16px gutters. */ .lq-cb .svc-controls.has-modes { display: flex; align-items: stretch; gap: 8px; margin: 0 16px 10px; } .lq-cb .svc-controls.has-modes .svc-mode, .lq-cb .svc-controls.has-modes .svc-search { flex: 1 1 50%; min-width: 0; margin: 0; } .lq-cb .svc-search { margin: 0 16px 10px; display: flex; align-items: center; gap: 9px; background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 10px; padding: 11px 12px; } .lq-cb .svc-search svg { width: 16px; height: 16px; color: var(--cb-faint); flex-shrink: 0; } .lq-cb .svc-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--cb-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cb-ink); } .lq-cb .svc-search input::placeholder { color: var(--cb-faint); } /* Horizontal padding on an overflow-x scroller is unreliable (the end-side padding collapses once scrolled, and some host pages reset it entirely) — flex spacer pseudo-elements scroll WITH the chips instead, so the first chip starts 16px in and the last chip ends 16px short of the edge. 9px spacer + 7px gap = 16px effective inset on both ends. */ .lq-cb .svc-cats { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 12px; flex-shrink: 0; scrollbar-width: none; white-space: nowrap; } .lq-cb .svc-cats::before, .lq-cb .svc-cats::after { content: ""; flex: 0 0 9px; } .lq-cb .svc-cats::-webkit-scrollbar { display: none; } .lq-cb .svc-cat { flex-shrink: 0; white-space: nowrap; font-family: var(--cb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--cb-border-strong); background: var(--cb-cream); color: var(--cb-muted); cursor: pointer; } .lq-cb .svc-cat.on { background: var(--cb-ink); color: var(--cb-card); border-color: var(--cb-ink); } /* "All services" — accent chip at the END of the swipe row. Selected state (.on) goes a shade darker so it still reads as pressed. */ .lq-cb .svc-cat.svc-cat-all { background: var(--cb-accent); color: #fff; border-color: var(--cb-accent); } .lq-cb .svc-cat.svc-cat-all.on { background: var(--cb-accent-d); color: #fff; border-color: var(--cb-accent-d); } /* ---------- Products filter rail (Safes / High security / Automotive) ---------- Wider than the service-category chips and horizontally scrollable. */ .lq-cb .prod-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 12px; flex-shrink: 0; scrollbar-width: none; white-space: nowrap; } .lq-cb .prod-filters::-webkit-scrollbar { display: none; } .lq-cb .prod-filter { flex: 0 0 auto; white-space: nowrap; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cb-border-strong); background: var(--cb-cream); color: var(--cb-muted); cursor: pointer; } .lq-cb .prod-filter.on { background: var(--cb-ink); color: var(--cb-card); border-color: var(--cb-ink); } .lq-cb .prod-filters[hidden] { display: none; } /* ---------- Locksmith shop controls: scrollable category pills + search icon ---- Default row: [ ←category pills scroll→ ⌄arrow ] [🔍 search-toggle]. Searching: the search-toggle is replaced by a ~50% field (with an ✕ that clears + closes); the category row compresses to the other ~50%. */ .lq-cb .svc-shopctrls { display: flex; align-items: stretch; gap: 8px; margin: 0 16px 10px; } .lq-cb .svc-catrow-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; } .lq-cb .svc-shopctrls.searching .svc-catrow-wrap { flex: 1 1 0; } .lq-cb .svc-catrow { flex: 1 1 auto; min-width: 0; display: flex; gap: 7px; align-items: center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; /* room so the last pill isn't hidden under the arrow fade */ padding-right: 26px; scroll-behavior: smooth; } .lq-cb .svc-catrow::-webkit-scrollbar { display: none; } .lq-cb .svc-pcat { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--cb-border-strong); background: var(--cb-cream); color: var(--cb-muted); } .lq-cb .svc-pcat.on { background: var(--cb-ink); color: var(--cb-card); border-color: var(--cb-ink); } /* Right-edge "more" arrow: a fade + chevron pinned over the scroller's end. */ .lq-cb .svc-catrow-arr { position: absolute; right: 0; top: 0; bottom: 0; width: 30px; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; color: var(--cb-ink); background: linear-gradient(90deg, color-mix(in srgb, var(--cb-card) 0%, transparent), var(--cb-card) 55%); -webkit-tap-highlight-color: transparent; } .lq-cb .svc-catrow-arr svg { width: 16px; height: 16px; } .lq-cb .svc-searchtoggle { flex: 0 0 auto; width: 44px; display: grid; place-items: center; cursor: pointer; background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 999px; color: var(--cb-ink); -webkit-tap-highlight-color: transparent; } .lq-cb .svc-searchtoggle svg { width: 17px; height: 17px; color: var(--cb-faint); } .lq-cb .svc-searchtoggle[hidden] { display: none; } /* Expanded collapsible search field (shares .svc-search styling). Pill radius to match the filter pills, and zero vertical padding so it stretches to the same height (no row growth / "push down" when it opens). */ .lq-cb .svc-search-collapsible { flex: 1 1 0; min-width: 0; margin: 0; border-radius: 999px; padding-top: 0; padding-bottom: 0; } .lq-cb .svc-search-collapsible[hidden] { display: none; } .lq-cb .svc-search-x { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; cursor: pointer; background: none; border: 0; color: var(--cb-faint); -webkit-tap-highlight-color: transparent; } .lq-cb .svc-search-x svg { width: 14px; height: 14px; } /* ---------- Promoted High-security card (editorial · price-less Inquire) ---------- Ported from the Fast Locksmith "High Security Locks" handoff. Image tile full-bleed at top, then kicker / title / blurb / brand chips / Inquire CTA. Tokens follow the callbar palette so the accent themes per-site. */ .lq-cb .prod-highsec { flex: 1; overflow-y: auto; padding: 0 16px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lq-cb .prod-highsec[hidden] { display: none; } .lq-cb .hs-card { background: var(--cb-card); border: 1px solid var(--cb-border-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px -16px rgba(20,16,10,0.4); } .lq-cb .hs-tile { position: relative; height: 196px; background: #FBFAF5; overflow: hidden; } .lq-cb .hs-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 61%; display: block; } .lq-cb .hs-tag { position: absolute; top: 12px; left: 12px; white-space: nowrap; font-family: var(--cb-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-faint); background: rgba(251,250,245,0.85); padding: 5px 8px; border-radius: 6px; } .lq-cb .hs-body { padding: 16px 16px 17px; } .lq-cb .hs-kick { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cb-accent); } .lq-cb .hs-title { font-family: var(--cb-display); font-size: 23px; font-weight: 400; line-height: 1.0; letter-spacing: -0.4px; text-transform: uppercase; color: var(--cb-ink); margin-top: 7px; } .lq-cb .hs-blurb { font-family: var(--cb-mono); font-size: 12px; font-weight: 500; line-height: 1.55; color: var(--cb-muted); margin-top: 9px; } .lq-cb .hs-brands { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--cb-border-strong); } .lq-cb .hs-brands-lab { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cb-faint); } .lq-cb .hs-brands-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; } .lq-cb .hs-chip { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--cb-ink); background: var(--cb-sunk); border-radius: 999px; padding: 6px 11px; white-space: nowrap; } .lq-cb .hs-inquire { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 16px; padding: 14px; border: 1px solid var(--cb-accent); border-radius: 999px; background: var(--cb-accent); color: #fff; cursor: pointer; font-family: var(--cb-display); font-size: 15px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; transition: background .12s, transform .04s; } .lq-cb .hs-inquire:active { transform: translateY(1px); background: var(--cb-accent-d); } .lq-cb .hs-inquire svg { width: 17px; height: 17px; } /* ---------- Contact sheet info ---------- */ .lq-cb .cb-contact { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 16px; } .lq-cb .cb-contact-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .lq-cb .cb-contact-info li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.4; color: var(--cb-ink); } .lq-cb .cb-contact-info li svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--cb-accent); } /* ---------- Automotive quote panel ---------- */ .lq-cb .prod-auto { flex: 1; overflow-y: auto; padding: 0 16px 20px; display: flex; flex-direction: column; gap: 16px; } .lq-cb .prod-auto .pa-lead { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--cb-ink); } .lq-cb .prod-auto .pa-block { display: flex; flex-direction: column; gap: 8px; } .lq-cb .prod-auto .pa-label { font-family: var(--cb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-muted); } .lq-cb .prod-auto .pa-opts { display: flex; flex-wrap: wrap; gap: 8px; } .lq-cb .prod-auto .pa-opt { font-family: var(--cb-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--cb-border-strong); background: var(--cb-cream); color: var(--cb-ink); cursor: pointer; } .lq-cb .prod-auto .pa-opt.on { background: var(--cb-accent); color: #fff; border-color: var(--cb-accent); } .lq-cb .prod-auto .pa-go { margin-top: 4px; } .lq-cb .prod-auto .pa-go:disabled { opacity: 0.5; cursor: not-allowed; } .lq-cb .prod-auto[hidden] { display: none; } /* ---------- Featured tab — curated grouped feed (SAFE_SECURE_6) ---------- Replaces the flat featured list with a no-scroll feed: Safes hero card, Key Blanks 3-up, Smart Keypads 2-up, "View all products" pinned to bottom. Tokens map to the callbar palette (--cb-card/cream/sunk/ink/muted/faint, --cb-accent for the brand red); hair + tile are the design's exact hex. */ .lq-cb .feat-feed { --ff-hair: #CFC8B3; --ff-tile: #FBFAF5; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 14px 24px 16px; display: flex; flex-direction: column; gap: 0; background: var(--cb-card); scrollbar-width: thin; scrollbar-color: var(--cb-accent) transparent; } .lq-cb .feat-feed[hidden] { display: none; } /* Ink scrollbar on the right (brutalist — sharp, no track). */ .lq-cb .feat-feed::-webkit-scrollbar { width: 7px; } .lq-cb .feat-feed::-webkit-scrollbar-track { background: transparent; } .lq-cb .feat-feed::-webkit-scrollbar-thumb { background: var(--cb-accent); border: 1.5px solid var(--cb-card); } .lq-cb .feat-feed::-webkit-scrollbar-thumb:active { background: var(--cb-accent); } /* The groups are

s — force a transparent bg so a host site's dark global `section{}` (e.g. Safe & Secure) can't bleed behind the headers. */ .lq-cb .feat-feed .grp { margin-bottom: 8px; background: transparent; } .lq-cb .feat-feed .grp-head { background: transparent; } .lq-cb .feat-feed .grp + .grp { padding-top: 10px; border-top: 1.5px solid var(--ff-hair); } .lq-cb .feat-feed .grp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } /* Section labels toned down (smaller + muted) but still bold (owner request). */ .lq-cb .feat-feed .grp-label { font-family: var(--cb-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-faint); } .lq-cb .feat-feed .grp-cta { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; background: var(--cb-sunk); color: var(--cb-ink); font-family: var(--cb-mono); font-weight: 700; font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; text-decoration: none; cursor: pointer; border: none; } .lq-cb .feat-feed .grp-cta svg { width: 10px; height: 10px; } .lq-cb .feat-feed .grp-cta:active { background: var(--ff-hair); } .lq-cb .feat-feed .pkick { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cb-accent); } .lq-cb .feat-feed .ptitle { font-family: var(--cb-display); font-weight: 900; letter-spacing: -0.02em; line-height: 0.98; color: var(--cb-ink); text-transform: uppercase; } .lq-cb .feat-feed .pblurb { font-family: var(--cb-mono); font-weight: 500; color: var(--cb-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* hero safe card */ .lq-cb .feat-feed .safecard { display: flex; background: var(--cb-card); border-radius: 18px; border: 1.5px solid var(--ff-hair); overflow: hidden; box-shadow: 0 8px 22px -16px rgba(20,16,10,0.4); text-decoration: none; } .lq-cb .feat-feed .safecard .tile { position: relative; width: 124px; flex-shrink: 0; background: var(--ff-tile); } .lq-cb .feat-feed .safecard .tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; } .lq-cb .feat-feed .tcorner { position: absolute; top: 10px; left: 10px; font-family: var(--cb-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cb-cream); background: var(--cb-accent); padding: 5px 8px; border-radius: 6px; } .lq-cb .feat-feed .sc-body { padding: 13px 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .lq-cb .feat-feed .sc-body .ptitle { font-size: 19px; margin-top: 5px; } .lq-cb .feat-feed .sc-body .pblurb { font-size: 11px; margin-top: 8px; } /* key-blank row */ .lq-cb .feat-feed .blank-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .lq-cb .feat-feed .blank { background: var(--cb-card); border: 1.5px solid var(--ff-hair); border-radius: 14px; padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; } .lq-cb .feat-feed .blank .bimg { width: 100%; height: 47px; background: var(--ff-tile); border-radius: 9px; display: block; object-fit: contain; } .lq-cb .feat-feed .blank .bcode { font-family: var(--cb-display); font-weight: 900; font-size: 14px; letter-spacing: 0.02em; color: var(--cb-ink); } .lq-cb .feat-feed .blank .bsub { font-family: var(--cb-mono); font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-faint); margin-top: -4px; } /* keypad row */ .lq-cb .feat-feed .pad-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .lq-cb .feat-feed .pad { display: flex; align-items: center; gap: 11px; background: var(--cb-card); border: 1.5px solid var(--ff-hair); border-radius: 14px; padding: 9px; text-decoration: none; } .lq-cb .feat-feed .pad .padimg { width: 56px; height: 56px; flex-shrink: 0; background: var(--ff-tile); border-radius: 10px; object-fit: contain; } .lq-cb .feat-feed .pad .pname { font-family: var(--cb-display); font-weight: 800; font-size: 12.5px; letter-spacing: -0.01em; color: var(--cb-ink); line-height: 1.1; } .lq-cb .feat-feed .pad .pmeta { font-family: var(--cb-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cb-faint); margin-top: 5px; } /* all-products button (pinned to bottom) */ .lq-cb .feat-feed .all-products { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: auto; background: var(--cb-accent); color: var(--cb-cream); border-radius: 13px; font-family: var(--cb-display); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px; box-shadow: 0 10px 22px -12px rgba(232,64,28,0.7); text-decoration: none; } .lq-cb .feat-feed .all-products svg { width: 17px; height: 17px; } .lq-cb .feat-feed .all-products:active { background: var(--cb-accent-d); } .lq-cb .svc-list { flex: 1; overflow-y: auto; padding: 0 16px 18px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--cb-accent) transparent; } .lq-cb .svc-list::-webkit-scrollbar { width: 7px; } .lq-cb .svc-list::-webkit-scrollbar-track { background: transparent; } .lq-cb .svc-list::-webkit-scrollbar-thumb { background: var(--cb-accent); border: 1.5px solid var(--cb-card); } .lq-cb .svc-empty { text-align: center; color: var(--cb-faint); font-family: var(--cb-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 28px 0; } /* ---------- Product rows (Products mode) ---------- image · (name + description + price) · (Add + View page). Mobile-first; stays tidy at ~390px. */ .lq-cb .prod-item { display: flex; align-items: flex-start; gap: 12px; background: var(--cb-cream); border: 1px solid var(--cb-border); border-radius: 12px; padding: 12px; font-family: var(--cb-font); } .lq-cb .prod-item .pi { flex-shrink: 0; } .lq-cb .prod-item .pi-img, .lq-cb .prod-item .pi-ph { width: 60px; height: 60px; border-radius: 10px; display: block; object-fit: cover; background: var(--cb-sunk); } .lq-cb .prod-item .pi-ph { display: grid; place-items: center; color: var(--cb-faint); } .lq-cb .prod-item .pi-ph svg { width: 22px; height: 22px; } .lq-cb .prod-item .pm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .lq-cb .prod-item .pn { font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--cb-ink); } .lq-cb .prod-item .pd { font-size: 12px; line-height: 1.4; color: var(--cb-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lq-cb .prod-item .pp { font-family: var(--cb-mono); font-size: 12px; font-weight: 700; color: var(--cb-accent); margin-top: 2px; } .lq-cb .pp-was { color: var(--cb-faint); font-weight: 500; text-decoration: line-through; margin-right: 4px; } .lq-cb .prod-item .pa { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .lq-cb .prod-item .prod-add { font-family: var(--cb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--cb-accent); border: 1px solid var(--cb-accent); border-radius: 9px; padding: 8px 12px; cursor: pointer; white-space: nowrap; } .lq-cb .prod-item .prod-add.added { background: var(--cb-ink); border-color: var(--cb-ink); } .lq-cb .prod-item .prod-view { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--cb-ink); background: var(--cb-card); border: 1px solid var(--cb-border-strong); border-radius: 9px; padding: 7px 12px; text-decoration: none; white-space: nowrap; } /* ---------- Service rows: swipe-left (or tap) to Book ---------- */ .lq-cb .svc-swipe { position: relative; overflow: hidden; border-radius: 12px; flex-shrink: 0; } .lq-cb .svc-swipe-action { position: absolute; inset: 0 0 0 auto; width: 112px; display: flex; flex-direction: column; gap: 6px; padding: 4px; align-items: stretch; } .lq-cb .svc-book-btn, .lq-cb .svc-info-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; padding: 0 4px; cursor: pointer; text-decoration: none; } .lq-cb .svc-book-btn { background: var(--cb-accent); color: #fff; border: 1.5px solid var(--cb-accent); } .lq-cb .svc-info-btn { background: transparent; color: var(--cb-accent); border: 1.5px solid var(--cb-accent); } .lq-cb .svc-swipe-fore { position: relative; z-index: 1; cursor: pointer; transition: transform .25s cubic-bezier(.32,.72,.28,1); -webkit-tap-highlight-color: transparent; } .lq-cb .svc-swipe-hint { margin-left: auto; align-self: center; flex: 0 0 auto; color: var(--cb-accent); opacity: .55; } .lq-cb .svc-swipe-hint svg { width: 18px; height: 18px; display: block; } .lq-cb .svc-swipe-fore.is-open .svc-swipe-hint { opacity: 0; } /* ---------- Product rows: swipe-left (or tap) to reveal Add / View page ---------- Same reveal mechanic as service rows. The card + image carry the book-category border treatment: 1.5px hairline, 16px radius, and a left accent rail as a tap cue. */ .lq-cb .prod-swipe { border-radius: 16px; } .lq-cb .prod-swipe .prod-item { position: relative; overflow: hidden; background: #E7E2D2; border: 1.5px solid var(--cb-border-strong); border-radius: 16px; } .lq-cb .prod-swipe .prod-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(26,23,18,0.14); } .lq-cb .prod-swipe .pi-img, .lq-cb .prod-swipe .pi-ph { border: 1.5px solid var(--cb-border-strong); border-radius: 12px; } .lq-cb .prod-act { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; padding: 0 4px; cursor: pointer; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .lq-cb .prod-act-add { background: var(--cb-accent); color: #fff; border: 1.5px solid var(--cb-accent); } .lq-cb .prod-act-add.added { background: var(--cb-ink); border-color: var(--cb-ink); } .lq-cb .prod-act-view { background: transparent; color: var(--cb-accent); border: 1.5px solid var(--cb-accent); } /* ---------- Cart bar (sheet foot) + tab badge ---------- */ .lq-cb .svc-cartbar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + 4px); border-top: 1px solid var(--cb-border); background: var(--cb-cream); } .lq-cb .svc-cartbar[hidden] { display: none; } .lq-cb .cbar-count { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cb-ink); } .lq-cb .cbar-clear { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cb-faint); background: none; border: none; cursor: pointer; text-decoration: underline; } .lq-cb .cbar-go { margin-left: auto; margin-top: 0; padding: 10px 14px; font-size: 11px; border-radius: 10px; } .lq-cb .cb-tab { position: relative; } .lq-cb .cb-badge { position: absolute; top: -3px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--cb-accent); color: #fff; font-family: var(--cb-mono); font-style: normal; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--cb-card); } /* ---------- Contact sheet ---------- */ .lq-cb .ct-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 4px; } .lq-cb .ct-quick.one-col { grid-template-columns: 1fr; } .lq-cb .ct-quick a { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cb-ink); text-decoration: none; background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 10px; padding: 11px 8px; } .lq-cb .ct-quick a svg { width: 15px; height: 15px; color: var(--cb-accent); flex-shrink: 0; } .lq-cb .ct-or { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; font-family: var(--cb-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-faint); } .lq-cb .ct-or::before, .lq-cb .ct-or::after { content: ""; flex: 1; height: 1px; background: var(--cb-border); } .lq-cb .ct-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 18px; display: flex; flex-direction: column; gap: 9px; } .lq-cb .ct-field { display: flex; flex-direction: column; gap: 5px; } .lq-cb .ct-field[hidden] { display: none; } .lq-cb .ct-field label { font-family: var(--cb-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cb-faint); } .lq-cb .ct-field input, .lq-cb .ct-field textarea, .lq-cb .ct-field select { background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 10px; padding: 11px 12px; font-family: var(--cb-font); font-size: 14px; font-weight: 500; color: var(--cb-ink); outline: none; resize: none; width: 100%; appearance: none; -webkit-appearance: none; } .lq-cb .ct-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23746F5E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 34px; } .lq-cb .ct-field input:focus, .lq-cb .ct-field textarea:focus, .lq-cb .ct-field select:focus { border-color: var(--cb-ink); } .lq-cb .ct-field input::placeholder, .lq-cb .ct-field textarea::placeholder { color: var(--cb-faint); } .lq-cb .cb-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; } .lq-cb .cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cb-mono); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 12px; padding: 13px 16px; cursor: pointer; border: 1px solid transparent; text-decoration: none; margin-top: 3px; background: var(--cb-accent); color: #fff; transition: background .12s, transform .04s; } .lq-cb .cb-btn:active { transform: translateY(1px); background: var(--cb-accent-d); } .lq-cb .cb-btn[disabled] { opacity: .6; pointer-events: none; } .lq-cb .cb-btn[hidden] { display: none; } /* ---------- Referral sheet ---------- */ .lq-cb .rf-body { flex: 1; overflow-y: auto; padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 12px; } .lq-cb .rf-offer { background: var(--cb-ink); border-radius: 14px; padding: 18px 16px; color: var(--cb-card); } .lq-cb .rf-offer .ro-amt { font-family: var(--cb-display); font-size: 30px; font-weight: 400; letter-spacing: -0.6px; text-transform: uppercase; line-height: 1.05; } .lq-cb .rf-offer .ro-amt sup { font-size: 16px; color: var(--cb-accent); } .lq-cb .rf-offer .ro-sub { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C9C3B2; margin-top: 7px; } .lq-cb .rf-link { display: flex; align-items: center; gap: 8px; background: var(--cb-cream); border: 1px dashed var(--cb-border-strong); border-radius: 10px; padding: 6px 6px 6px 12px; } .lq-cb .rf-link .rl-url { flex: 1; min-width: 0; font-family: var(--cb-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lq-cb .rf-link button { flex-shrink: 0; font-family: var(--cb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--cb-accent); border: none; border-radius: 7px; padding: 9px 13px; cursor: pointer; } .lq-cb .rf-link button:active { background: var(--cb-accent-d); } .lq-cb .rf-fine { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.6; color: var(--cb-faint); } .lq-cb .rf-fine sup { color: var(--cb-accent); } /* Signed-out referral CTA — mono note + Sign in / Sign up pair in one row. */ .lq-cb .rf-auth { display: flex; flex-direction: column; gap: 8px; } .lq-cb .rf-auth-note { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-faint); } .lq-cb .rf-auth-btns { display: flex; gap: 8px; } .lq-cb .rf-auth-btns .cb-btn { flex: 1; margin-top: 0; } .lq-cb .rf-auth-btns .rf-signin { background: var(--cb-cream); color: var(--cb-ink); border-color: var(--cb-border-strong); } .lq-cb .rf-auth-btns .rf-signin:active { background: var(--cb-sunk); } /* ---------- Toast ---------- */ .lq-cb .cb-toast { position: fixed; left: 50%; bottom: 150px; z-index: 70; transform: translateX(-50%) translateY(16px); background: var(--cb-ink); color: #fff; font-family: var(--cb-font); font-size: 13.5px; font-weight: 600; padding: 12px 18px; border-radius: 12px; opacity: 0; pointer-events: none; transition: all .25s; display: flex; align-items: center; gap: 9px; box-shadow: 0 18px 50px -22px rgba(26,23,18,0.50); max-width: calc(100vw - 32px); text-align: center; } .lq-cb .cb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .lq-cb .cb-toast .tk { width: 8px; height: 8px; border-radius: 50%; background: #3C8F5F; flex-shrink: 0; } /* Keep page content clear of the fixed bar (mobile only). */ @media (max-width: 999.98px) { body:has(.lq-cb) { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; } } /* Scroll lock — the page behind must not scroll while a sheet is open. Sheet interiors keep scrolling; overscroll-behavior stops the chain. */ body.lq-svc-open, body.lq-ct-open, body.lq-rf-open { overflow: hidden; } .lq-cb .svc-list, .lq-cb .ct-form, .lq-cb .rf-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ---------- Desktop / tablet (>=1000px): expanding action dial ---------- The sticky bottom bar is a mobile pattern; on bigger screens it's replaced by a fixed action button that expands into a compact hub (Call · Book · featured products). The dial/hub are hidden below 1000px; the bar is hidden at/above it. Deep flows (Book wizard, full shop) reuse the same sheets. */ .lq-cb .cb-dial, .lq-cb .cb-hub { display: none; } @media (min-width: 1000px) { .lq-cb .callbar { display: none; } /* The action button */ .lq-cb .cb-dial { position: fixed; right: 24px; bottom: 24px; z-index: 36; display: inline-flex; align-items: center; gap: 9px; padding: 15px 19px; cursor: pointer; background: var(--cb-accent); color: #fff; border: 2px solid var(--cb-ink); box-shadow: 6px 6px 0 var(--cb-ink); font-family: var(--cb-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: transform .12s, box-shadow .12s; } .lq-cb .cb-dial:hover { transform: translate(-1px, -1px); box-shadow: 8px 8px 0 var(--cb-ink); } .lq-cb .cb-dial:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--cb-ink); } .lq-cb .cb-dial svg { width: 20px; height: 20px; } .lq-cb .cb-dial .cb-dial-close { display: none; } body.lq-hub-open .lq-cb .cb-dial .cb-dial-open { display: none; } body.lq-hub-open .lq-cb .cb-dial .cb-dial-close { display: inline-flex; } /* A sheet (Book wizard / shop) is its own panel with a close button + scrim; hide the dial so it doesn't overlap the sheet's bottom-right corner. */ body.lq-svc-open .lq-cb .cb-dial, body.lq-ct-open .lq-cb .cb-dial, body.lq-rf-open .lq-cb .cb-dial { display: none; } /* The hub panel — grows from the dial, anchored bottom-right */ .lq-cb .cb-hub { position: fixed; right: 24px; bottom: 90px; z-index: 36; width: 380px; max-width: calc(100vw - 48px); max-height: min(80vh, 760px); display: flex; flex-direction: column; background: var(--cb-card); color: var(--cb-ink); border: 2px solid var(--cb-ink); box-shadow: 10px 10px 0 -2px rgba(26, 23, 18, .22); transform: translateY(16px) scale(.98); transform-origin: bottom right; opacity: 0; pointer-events: none; transition: opacity .2s, transform .24s cubic-bezier(.32, .72, .28, 1); overflow: hidden auto; overscroll-behavior: contain; } body.lq-hub-open .lq-cb .cb-hub { opacity: 1; transform: none; pointer-events: auto; } .lq-cb .cb-hub-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 2px solid var(--cb-ink); background: var(--cb-cream); position: sticky; top: 0; z-index: 1; } .lq-cb .cb-hub-eyebrow { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cb-muted); } .lq-cb .cb-hub-x { display: grid; place-items: center; width: 28px; height: 28px; background: var(--cb-card); border: 2px solid var(--cb-ink); color: var(--cb-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .lq-cb .cb-hub-x:active { background: var(--cb-ink); color: var(--cb-card); } .lq-cb .cb-hub-x svg { width: 15px; height: 15px; } /* Call row */ .lq-cb .cb-hub-call { display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 13px 14px; text-decoration: none; background: var(--cb-accent); color: #fff; border: 2px solid var(--cb-ink); box-shadow: 4px 4px 0 var(--cb-ink); } .lq-cb .cb-hub-call svg { width: 22px; height: 22px; flex-shrink: 0; } .lq-cb .cb-hub-call .cb-hub-call-m { display: flex; flex-direction: column; line-height: 1.1; } .lq-cb .cb-hub-call small { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .lq-cb .cb-hub-call b { font-family: var(--cb-display); font-size: 19px; letter-spacing: -.01em; margin-top: 3px; } .lq-cb .cb-hub-call .cb-hub-arr { margin-left: auto; } /* Book button */ .lq-cb .cb-hub-book { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 14px; cursor: pointer; width: calc(100% - 32px); background: var(--cb-card); color: var(--cb-ink); border: 2px solid var(--cb-ink); font-family: var(--cb-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; } .lq-cb .cb-hub-book svg { width: 18px; height: 18px; } .lq-cb .cb-hub-book .cb-hub-arr { margin-left: auto; } .lq-cb .cb-hub-book:active { background: var(--cb-ink); color: var(--cb-card); } /* Account / login row */ .lq-cb .cb-hub-acct { margin: 10px 16px 0; } .lq-cb .cb-hub-acct > summary { list-style: none; } .lq-cb .cb-hub-acct > summary::-webkit-details-marker { display: none; } .lq-cb .cb-hub-acctbtn { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 13px 14px; width: calc(100% - 32px); cursor: pointer; background: var(--cb-cream); color: var(--cb-ink); border: 2px solid var(--cb-ink); font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .lq-cb .cb-hub-acct > summary.cb-hub-acctbtn { margin: 0; width: 100%; } .lq-cb .cb-hub-acctbtn svg { width: 17px; height: 17px; flex-shrink: 0; } .lq-cb .cb-hub-acctbtn .cb-hub-acctcaret { margin-left: auto; transition: transform .2s; } .lq-cb .cb-hub-acct[open] .cb-hub-acctcaret { transform: rotate(180deg); } .lq-cb .cb-hub-acctbtn:active { background: var(--cb-ink); color: var(--cb-card); } .lq-cb .cb-hub-acctmenu { display: flex; flex-direction: column; border: 2px solid var(--cb-ink); border-top: none; } .lq-cb .cb-hub-acctmenu a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1.5px solid var(--cb-border); font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-ink); text-decoration: none; } .lq-cb .cb-hub-acctmenu a:last-child { border-bottom: none; } .lq-cb .cb-hub-acctmenu a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--cb-accent); } .lq-cb .cb-hub-acctmenu a:active { background: var(--cb-ink); color: var(--cb-card); } .lq-cb .cb-hub-acctmenu a:active svg { color: var(--cb-card); } /* Featured products */ .lq-cb .cb-hub-feat { margin: 16px 16px 16px; } .lq-cb .cb-hub-feat-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid var(--cb-ink); margin-bottom: 10px; } .lq-cb .cb-hub-feat-h > span { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-ink); } .lq-cb .cb-hub-feat-h a { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-accent); text-decoration: none; } .lq-cb .cb-hub-feat-list { display: flex; flex-direction: column; gap: 8px; } /* Grouped sections (Safes / Key Blanks / Smart Keypads) like the mobile feed */ .lq-cb .cb-hub-grp { margin-bottom: 12px; } .lq-cb .cb-hub-grp:last-child { margin-bottom: 0; } .lq-cb .cb-hub-grp-h { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-muted); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1.5px solid var(--cb-ink); } .lq-cb .cb-hub-prod { display: flex; align-items: center; gap: 11px; padding: 8px; border: 1.5px solid var(--cb-border-strong); } .lq-cb .cb-hub-prod-im { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; background: var(--cb-cream); border: 1.5px solid var(--cb-border-strong); overflow: hidden; } .lq-cb .cb-hub-prod-im img { width: 100%; height: 100%; object-fit: cover; } .lq-cb .cb-hub-prod-im svg { width: 20px; height: 20px; color: var(--cb-faint); } .lq-cb .cb-hub-prod-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lq-cb .cb-hub-prod-n { font-family: var(--cb-font); font-size: 13px; font-weight: 600; color: var(--cb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lq-cb .cb-hub-prod-p { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; color: var(--cb-accent); } .lq-cb .cb-hub-prod-p s { color: var(--cb-faint); font-weight: 500; margin-right: 3px; } .lq-cb .cb-hub-add { flex-shrink: 0; font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--cb-accent); border: 2px solid var(--cb-ink); padding: 8px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lq-cb .cb-hub-add.added { background: var(--cb-ink); } /* Hero safe card — the "Safes" group's special treatment (big image tile + best-seller badge), mirroring the mobile feed's .safecard but with an Add. */ .lq-cb .cb-hub-safecard { display: flex; gap: 12px; padding: 10px; border: 2px solid var(--cb-ink); background: var(--cb-cream); } .lq-cb .cb-hub-sc-tile { position: relative; width: 96px; flex-shrink: 0; align-self: stretch; min-height: 100px; background: var(--cb-cream); border: 1.5px solid var(--cb-border-strong); display: grid; place-items: center; overflow: hidden; } .lq-cb .cb-hub-sc-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .lq-cb .cb-hub-sc-tile svg { width: 30px; height: 30px; color: var(--cb-faint); } .lq-cb .cb-hub-sc-corner { position: absolute; top: 6px; left: 6px; font-family: var(--cb-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--cb-accent); padding: 4px 6px; } .lq-cb .cb-hub-sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .lq-cb .cb-hub-sc-kick { font-family: var(--cb-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cb-muted); } .lq-cb .cb-hub-sc-n { font-family: var(--cb-font); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--cb-ink); } .lq-cb .cb-hub-sc-p { font-family: var(--cb-mono); font-size: 12px; font-weight: 700; color: var(--cb-accent); } .lq-cb .cb-hub-sc-p s { color: var(--cb-faint); font-weight: 500; margin-right: 3px; } .lq-cb .cb-hub-sc-add { margin-top: auto; align-self: flex-start; } /* Hub cart bar — sticky to the hub foot once items are in the cart. */ .lq-cb .cb-hub-cart { position: sticky; bottom: 0; z-index: 2; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 2px solid var(--cb-ink); background: var(--cb-cream); } .lq-cb .cb-hub-cart[hidden] { display: none; } .lq-cb .cb-hub-cart-count { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cb-ink); } .lq-cb .cb-hub-cart-clear { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cb-faint); background: none; border: none; cursor: pointer; text-decoration: underline; } .lq-cb .cb-hub-cart-go { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--cb-accent); border: 2px solid var(--cb-ink); padding: 9px 14px; cursor: pointer; } .lq-cb .cb-hub-cart-go:active { background: var(--cb-ink); } .lq-cb .cb-hub-cart-go svg { flex-shrink: 0; } /* Reuse the slide-up sheets as right-anchored desktop panels */ .lq-cb .svc-sheet { left: auto; right: 24px; bottom: 24px; width: 440px; max-width: calc(100vw - 48px); height: min(80vh, 760px); border: 2px solid var(--cb-ink); border-radius: 0; box-shadow: 10px 10px 0 -2px rgba(26, 23, 18, .22); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .lq-cb .svc-sheet, .lq-cb .svc-scrim, .lq-cb .cb-fab, .lq-cb .cb-toast { transition: none; } } /* ---------- Products → in-sheet shop ("View all at Safe & Secure") ---------- */ /* CTA pinned under the product list (Products mode, consumer sites only). */ .lq-cb .svc-shopcta { flex-shrink: 0; padding: 11px 16px 13px; border-top: 1px solid var(--cb-border); background: var(--cb-card); } .lq-cb .svc-shopcta[hidden] { display: none; } .lq-cb .svc-shopcta .scta-note { font-family: var(--cb-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45; color: var(--cb-muted); margin-bottom: 9px; } .lq-cb .svc-shopcta .scta-note strong { color: var(--cb-ink); font-weight: 700; } .lq-cb .svc-shopcta .scta-btn { width: 100%; } /* Full-height shop overlay inside the services sheet. */ .lq-cb .svc-shop { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--cb-card); border-radius: 20px 20px 0 0; overflow: hidden; } .lq-cb .svc-shop[hidden] { display: none; } .lq-cb .svc-shop-head { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--cb-border); } .lq-cb .svc-shop-back { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cb-muted); background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 8px; padding: 8px 11px 8px 8px; cursor: pointer; } .lq-cb .svc-shop-back svg { width: 14px; height: 14px; } .lq-cb .svc-shop-title { flex: 1; text-align: center; font-family: var(--cb-display); font-size: 15px; text-transform: uppercase; letter-spacing: -0.2px; color: var(--cb-ink); } .lq-cb .svc-shop-close { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--cb-border-strong); background: var(--cb-cream); cursor: pointer; display: grid; place-items: center; color: var(--cb-ink); } .lq-cb .svc-shop-close svg { width: 15px; height: 15px; } .lq-cb .svc-shop-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--cb-card); } /* While the shop is open: drop the sheet to the floor, extend it near-full, and hide the bottom nav/FAB so the embed owns the screen. X/Back reverts. */ body.lq-shop-open .lq-cb #lqSvcSheet { bottom: 0; height: 96vh; } body.lq-shop-open .lq-cb .callbar { display: none; } /* ---------- Services | Parts mode switch ---------- */ .lq-cb .svc-mode { display: flex; gap: 4px; margin: 0 16px 10px; background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 10px; padding: 3px; } .lq-cb .svc-mode-btn { flex: 1 1 50%; min-width: 0; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cb-muted); background: none; border: none; border-radius: 8px; padding: 9px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Active segment fills with the brand accent (segmented-control language). */ .lq-cb .svc-mode-btn.on { background: var(--cb-accent); color: #fff; } /* ---------- Progressive booking flow (summary + calendar + window + reveal) ---------- Single form, progressive disclosure: service + type → calendar (visit) / windows (consult) → customer fields → submit. A running summary at the top carries the chosen date/time as "Change"-able chips. The .bk-step rule below is a legacy no-op kept harmless; the flow is one continuous form now. */ .lq-cb .bk-step[hidden] { display: none; } .lq-cb .ct-field > label { display: block; } /* Step 1 — booking type choices (stacked cards with a sub-line). */ .lq-cb .bk-choices { display: flex; flex-direction: column; gap: 7px; } .lq-cb .bk-choice { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 11px; padding: 11px 13px; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent; } .lq-cb .bk-choice.on { background: var(--cb-accent); border-color: var(--cb-accent); } .lq-cb .bk-choice.on .bk-choice-t, .lq-cb .bk-choice.on .bk-choice-s { color: #fff; } .lq-cb .bk-choice-t { font-family: var(--cb-font); font-size: 14px; font-weight: 700; color: var(--cb-ink); } .lq-cb .bk-choice-s { font-family: var(--cb-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--cb-muted); } /* Step 2 — category segmented row (3 across). */ .lq-cb .bk-choices-row { flex-direction: row; gap: 6px; } .lq-cb .bk-choice-seg { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; flex-direction: row; justify-content: center; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cb-muted); padding: 12px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lq-cb .bk-choice-seg.on { color: #fff; } /* Step 1 — service-first picker: "Phone consultation" card + grouped catalogue. The consultation is the not-sure path; the groups list every service under a small category label. */ .lq-cb .bk-consult { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--cb-ink); border: 1px solid var(--cb-ink); border-radius: 12px; padding: 12px 13px; margin-bottom: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lq-cb .bk-consult.on { background: var(--cb-accent); border-color: var(--cb-accent); } .lq-cb .bk-consult-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,0.12); color: #fff; } .lq-cb .bk-consult-ico svg { width: 17px; height: 17px; } .lq-cb .bk-consult-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lq-cb .bk-consult-t { font-family: var(--cb-font); font-size: 14px; font-weight: 700; color: #fff; } .lq-cb .bk-consult-s { font-family: var(--cb-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: rgba(242,235,223,0.72); } .lq-cb .bk-consult-arr { margin-left: auto; flex: 0 0 auto; color: rgba(242,235,223,0.5); } .lq-cb .bk-consult-arr svg { width: 18px; height: 18px; display: block; } /* Refined category cards (design_handoff_book_cards) — two per row, equal height. Icon chip + index, title, individual tag chips, go-arrow, and a left accent rail as a tap cue. */ .lq-cb .bk-cat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lq-cb .bk-cat-card { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; text-align: left; background: #E7E2D2; border: 1.5px solid var(--cb-border-strong); border-radius: 18px; padding: 14px 14px 15px; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform .05s, border-color .12s, background .12s; } .lq-cb .bk-cat-card:active { transform: translate(1px, 1px); } .lq-cb .bk-cat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(26,23,18,0.14); } .lq-cb .bk-cat-card.on { border-color: var(--cb-ink); } .lq-cb .bk-cat-top { display: flex; align-items: center; justify-content: space-between; } .lq-cb .bk-cat-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--cb-ink); color: var(--cb-card); box-shadow: 0 6px 14px -7px rgba(26,23,18,0.8); } .lq-cb .bk-cat-ico svg { width: 23px; height: 23px; } .lq-cb .bk-cat-t { font-family: var(--cb-display); font-size: 20px; font-weight: 400; letter-spacing: -0.4px; color: var(--cb-ink); margin-top: 12px; } .lq-cb .bk-cat-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .lq-cb .bk-cat-tags span { font-family: var(--cb-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--cb-muted); background: var(--cb-sunk); border-radius: 6px; padding: 4px 7px; white-space: nowrap; } /* Go-arrow now sits top-right (in .bk-cat-top, replacing the old index). */ .lq-cb .bk-cat-go { flex: 0 0 auto; color: var(--cb-ink); opacity: 0.34; } .lq-cb .bk-cat-go svg { width: 20px; height: 20px; display: block; } /* Emergency variant — the urgent path reads first. */ .lq-cb .bk-cat-card-urgent { background: #F4E4DD; border-color: rgba(232,64,28,0.5); } .lq-cb .bk-cat-card-urgent::before { background: var(--cb-accent); width: 4px; } .lq-cb .bk-cat-card-urgent .bk-cat-ico { background: var(--cb-accent); box-shadow: 0 6px 14px -6px rgba(232,64,28,0.7); } .lq-cb .bk-cat-card-urgent .bk-cat-tags span { background: rgba(232,64,28,0.1); color: #7C2310; } .lq-cb .bk-cat-card-urgent .bk-cat-go { color: var(--cb-accent); opacity: 0.7; } /* Specific-service cards (two per row — title only, tappable). */ .lq-cb .bk-svc-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lq-cb .bk-svc-card { display: flex; align-items: center; width: 100%; min-width: 0; min-height: 56px; text-align: left; background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 12px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s; } .lq-cb .bk-svc-card.on { background: var(--cb-accent); border-color: var(--cb-accent); } .lq-cb .bk-svc-card.on .bk-svc-name { color: #fff; } .lq-cb .bk-svc-name { font-family: var(--cb-font); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--cb-ink); } /* Step 6 — vehicle sub-block (make/model/year) + key type. */ .lq-cb .bk-vehicle { display: flex; flex-direction: column; gap: 9px; } .lq-cb .bk-vehicle[hidden] { display: none; } .lq-cb .bk-row-3 { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 8px; } .lq-cb .bk-keys { grid-template-columns: 1fr 1fr; } .lq-cb .bk-addr-field[hidden] { display: none; } /* Step 6 — Notes collapsed behind "+ Add note". */ .lq-cb .bk-note-add { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--cb-accent); background: none; border: 1px dashed var(--cb-border-strong); border-radius: 10px; padding: 10px 12px; cursor: pointer; width: 100%; text-align: left; -webkit-tap-highlight-color: transparent; } .lq-cb .bk-note-wrap[hidden] { display: none; } /* Time-window chips (2x2 grid; radio hidden, the span is the chip). */ .lq-cb .bk-wins { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .lq-cb .bk-win { position: relative; display: block; } .lq-cb .bk-win input { position: absolute; opacity: 0; width: 0; height: 0; } .lq-cb .bk-win span { display: block; text-align: center; font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--cb-muted); background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 9px; padding: 10px 6px; cursor: pointer; } .lq-cb .bk-win input:checked + span { background: var(--cb-accent); color: #fff; border-color: var(--cb-accent); } .lq-cb .bk-win input:focus-visible + span { outline: 2px solid var(--cb-accent); outline-offset: 2px; } .lq-cb .bk-err { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; color: #d14848; margin-top: 6px; } /* Step 2: email + phone share a row. */ .lq-cb .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lq-cb .bk-actions { display: flex; gap: 8px; align-items: center; } .lq-cb .bk-actions .cb-btn { flex: 1 1 auto; } .lq-cb .cb-btn-ghost { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cb-muted); background: none; border: 1px solid var(--cb-border-strong); border-radius: 10px; padding: 12px 16px; cursor: pointer; } /* ---------- Running summary (date / time chips) ---------- Sits at the top of the booking form: ONE dark card listing the chosen values, a single "Edit" link top-right, and each row tappable to reopen (edit) that step. */ .lq-cb .bk-summary { display: block; background: var(--cb-ink); color: var(--cb-card); border: 1px solid var(--cb-ink); border-radius: 14px; padding: 11px 13px; margin-bottom: 2px; } .lq-cb .bk-summary[hidden] { display: none; } .lq-cb .bk-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .lq-cb .bk-sum-eyebrow { font-family: var(--cb-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242,235,223,0.5); } .lq-cb .bk-sum-edit { font-family: var(--cb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-accent); background: none; border: none; padding: 2px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lq-cb .bk-sum-rows { display: flex; flex-direction: column; } .lq-cb .bk-sum-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-top: 1px solid rgba(242,235,223,0.12); padding: 9px 2px; cursor: pointer; text-align: left; color: var(--cb-card); font-family: var(--cb-font); -webkit-tap-highlight-color: transparent; } .lq-cb .bk-sum-row:active { color: var(--cb-accent); } .lq-cb .bk-sum-row[hidden] { display: none; } .lq-cb .bk-sum-rows .bk-sum-row:first-child { border-top: none; } .lq-cb .bk-sum-ico { font-size: 14px; line-height: 1; flex: 0 0 auto; } .lq-cb .bk-sum-val { flex: 1; font-size: 13.5px; font-weight: 600; } .lq-cb .bk-sum-row::after { content: "›"; font-size: 17px; line-height: 1; color: rgba(242,235,223,0.4); flex: 0 0 auto; } /* Vehicle — Make/Model share a row (dropdowns); Year sits on its own line. "Other…" reveals a free-text box beneath the select. */ .lq-cb .bk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lq-cb .bk-vother { margin-top: 7px; } .lq-cb .bk-vother[hidden] { display: none; } /* Summary card collapse — collapsed (default) shows the one-line recap + caret; tapping the header expands the editable per-step rows. */ .lq-cb .bk-sum-toggle { display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lq-cb .bk-sum-caret { font-size: 13px; line-height: 1; color: rgba(242,235,223,0.55); transition: transform 0.18s ease; } .lq-cb .bk-summary[data-collapsed="0"] .bk-sum-caret { transform: rotate(180deg); } .lq-cb .bk-sum-condensed { font-family: var(--cb-font); font-size: 13px; font-weight: 600; color: var(--cb-card); line-height: 1.4; } .lq-cb .bk-summary[data-collapsed="1"] .bk-sum-rows { display: none; } .lq-cb .bk-summary[data-collapsed="0"] .bk-sum-condensed { display: none; } /* ---------- Full-month calendar (custom, vanilla JS) ---------- Real month grid: 7-col weekday header + day buttons. Past/today disabled, accent on the selected day. Collapses to nothing once a date is chosen. */ .lq-cb .bk-cal-field[hidden] { display: none; } .lq-cb .bk-cal { background: var(--cb-cream); border: 1px solid var(--cb-border-strong); border-radius: 12px; padding: 10px; max-height: 380px; overflow: hidden; transition: max-height .32s cubic-bezier(.32,.72,.28,1), opacity .22s, padding .32s, margin .32s; } .lq-cb .bk-cal.bk-collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; } .lq-cb .bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .lq-cb .bk-cal-title { flex: 1; text-align: center; font-family: var(--cb-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cb-ink); } .lq-cb .bk-cal-nav { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--cb-border-strong); background: var(--cb-card); color: var(--cb-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .lq-cb .bk-cal-nav svg { width: 15px; height: 15px; } .lq-cb .bk-cal-nav:active { background: var(--cb-sunk); } .lq-cb .bk-cal-nav[disabled] { opacity: .32; pointer-events: none; } .lq-cb .bk-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .lq-cb .bk-cal-dows span { text-align: center; font-family: var(--cb-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cb-faint); padding: 4px 0; } .lq-cb .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .lq-cb .bk-cal-pad { aspect-ratio: 1 / 1; } .lq-cb .bk-cal-day { aspect-ratio: 1 / 1; display: grid; place-items: center; font-family: var(--cb-mono); font-size: 13px; font-weight: 700; color: var(--cb-ink); background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .1s, color .1s, border-color .1s; } .lq-cb .bk-cal-day:active { background: var(--cb-sunk); } .lq-cb .bk-cal-day.today { border-color: var(--cb-accent); color: var(--cb-accent); } .lq-cb .bk-cal-day.sel { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; } .lq-cb .bk-cal-day[disabled] { color: var(--cb-faint); background: transparent; border-color: transparent; cursor: default; opacity: .5; text-decoration: line-through; } /* ---------- Time-window field reveal ---------- */ .lq-cb .bk-win-field[hidden] { display: none; } /* ---------- Customer fields reveal ---------- Hidden until date+time (visit) / time (consult) are chosen, then revealed as a single block with the same field rhythm as the rest of the form. */ .lq-cb .bk-fields { display: flex; flex-direction: column; gap: 9px; } .lq-cb .bk-fields[hidden] { display: none; } /* Soft reveal on the progressively-disclosed sections (respects reduced motion). */ .lq-cb .bk-win-field:not([hidden]), .lq-cb .bk-fields:not([hidden]) { animation: bk-reveal .26s cubic-bezier(.32,.72,.28,1); } @keyframes bk-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .lq-cb .bk-cal { transition: none; } .lq-cb .bk-win-field:not([hidden]), .lq-cb .bk-fields:not([hidden]) { animation: none; } }