/* * Real Deal HVAC - sitewide call-to-action pair + booking modal. * * Every CTA on the site is the same two buttons: "Get an Instant Estimate" * (the calculator at /instant-estimate, which ends in a booking) and "Call Us" * (tel: link, tracked as a Google Ads phone conversion). * * This file is self-contained on purpose. Only 24 of the 78 pages link * /assets/site.css - the rest carry an inline, partial copy of it - so nothing * here may depend on site.css being present. It is linked LAST in every * so it also wins over those inline copies at equal specificity. * * Class names are namespaced (.rd-* for the buttons, .bk-* for the modal) so * they never collide with the per-page .btn / .svc-card / .fg rules. */ /* Local fallbacks: site.css defines these, the inline copies mostly do too, but the CTA has to look right even where neither ran. */ .rd-cta, .bk-overlay { --rd-blue: #1a56db; --rd-blue-dark: #1344b8; --rd-blue-soft: #eef3fd; --rd-ink: #181715; --rd-body: #3f3b35; --rd-muted: #6d675f; --rd-line: #e2dfdb; --rd-off: #f6f5f3; --rd-green: #14803c; } /* ───────────────────────────────────────────────────────────── 1. The CTA pair ───────────────────────────────────────────────────────────── */ .rd-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; } .rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 1 1 auto; min-width: 158px; max-width: 100%; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease; } .rd-btn svg { flex: 0 0 auto; width: 17px; height: 17px; } .rd-btn:hover { transform: translateY(-1px); } .rd-btn:active { transform: translateY(0); } .rd-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px var(--rd-blue); } /* Get an Instant Estimate - the primary action, solid blue. Kept alongside .rd-btn-book so a Book button still styles correctly wherever one remains. */ .rd-btn-book, .rd-btn-estimate { background: var(--rd-blue); color: #fff; box-shadow: 0 6px 16px rgba(26,86,219,.22); } .rd-btn-book:hover, .rd-btn-estimate:hover { background: var(--rd-blue-dark); color: #fff; box-shadow: 0 9px 22px rgba(26,86,219,.28); } /* Call Us - the secondary action, quiet surface with a real border. */ .rd-btn-call { background: #fff; color: var(--rd-ink); border-color: var(--rd-line); } .rd-btn-call:hover { background: var(--rd-blue-soft); border-color: rgba(26,86,219,.38); color: var(--rd-blue); } /* ── On blue / dark bands: swap the weights so Book still reads first. ── */ .rd-cta-dark .rd-btn-book, .rd-cta-dark .rd-btn-estimate { background: #fff; color: var(--rd-blue); border-color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.14); } .rd-cta-dark .rd-btn-book:hover, .rd-cta-dark .rd-btn-estimate:hover { background: var(--rd-blue-soft); color: var(--rd-blue-dark); border-color: var(--rd-blue-soft); } .rd-cta-dark .rd-btn-call { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .rd-cta-dark .rd-btn-call:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; } .rd-cta-dark .rd-btn:focus-visible { box-shadow: 0 0 0 3px rgba(26,86,219,.85), 0 0 0 6px #fff; } /* ── Layout modifiers ── */ .rd-cta-center { justify-content: center; } .rd-cta-stack { flex-direction: column; } .rd-cta-stack .rd-btn { width: 100%; flex: 0 0 auto; } /* Header. Compact, never wraps, and the outline button drops on small screens the way the old .nav-actions rules did. */ .rd-cta-nav { gap: 8px; flex-wrap: nowrap; } .rd-cta-nav .rd-btn { flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 10px 18px; font-size: 14px; border-radius: 9px; } /* Sticky mobile bar. Two equal halves, tighter. */ .rd-cta-bar { gap: 8px; flex-wrap: nowrap; width: 100%; } .rd-cta-bar .rd-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: 14px; } @media (max-width: 900px) { .rd-cta-nav .rd-btn-book, .rd-cta-nav .rd-btn-estimate { display: none; } } @media (max-width: 600px) { /* Below this the pair always stacks full-width, except in the fixed bars where side-by-side is the whole point. */ .rd-cta:not(.rd-cta-bar):not(.rd-cta-nav) { flex-direction: column; } .rd-cta:not(.rd-cta-bar):not(.rd-cta-nav) .rd-btn { width: 100%; flex: 0 0 auto; min-width: 0; padding-left: 14px; padding-right: 14px; } .rd-cta-nav .rd-btn { padding: 10px 14px; font-size: 13.5px; } } /* ───────────────────────────────────────────────────────────── 2. Booking modal (built by /assets/booking.js) ───────────────────────────────────────────────────────────── */ .bk-overlay { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(24,23,21,.55); padding: 20px; overflow-y: auto; font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--rd-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } .bk-overlay.is-open { display: grid; place-items: center; } body.bk-locked { overflow: hidden; } .bk-overlay * { box-sizing: border-box; } .bk-modal { display: flex; flex-direction: column; width: min(100%, 600px); max-height: min(92vh, 880px); background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(24,23,21,.3); overflow: hidden; text-align: left; } /* --- head --- */ .bk-head { position: relative; padding: 20px 52px 18px 22px; border-bottom: 1px solid var(--rd-line); background: var(--rd-off); } .bk-head h2 { font-size: 19px; font-weight: 900; color: var(--rd-ink); line-height: 1.25; margin: 0 0 4px; letter-spacing: -.02em; } .bk-head p { margin: 0; font-size: 13px; color: var(--rd-muted); line-height: 1.5; } .bk-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rd-line); border-radius: 8px; background: #fff; color: var(--rd-muted); cursor: pointer; } .bk-close:hover { color: var(--rd-ink); border-color: rgba(26,86,219,.35); } /* --- step rail --- */ .bk-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 18px 22px 6px; } .bk-step { position: relative; text-align: center; } .bk-step::before { content: ""; position: absolute; top: 14px; left: calc(-50% + 22px); width: calc(100% - 44px); height: 2px; border-radius: 2px; background: var(--rd-line); } .bk-step:first-child::before { display: none; } .bk-step .n { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 8px; border-radius: 50%; background: var(--rd-off); border: 2px solid var(--rd-line); color: var(--rd-muted); font-size: 13px; font-weight: 900; transition: background .18s ease, border-color .18s ease, color .18s ease; } .bk-step .t { font-size: 11px; font-weight: 800; color: var(--rd-muted); line-height: 1.3; } .bk-step.is-done::before, .bk-step.is-active::before { background: var(--rd-blue); } .bk-step.is-done .n, .bk-step.is-active .n { background: var(--rd-blue); border-color: var(--rd-blue); color: #fff; } .bk-step.is-active .n { box-shadow: 0 0 0 4px rgba(26,86,219,.14); } .bk-step.is-active .t, .bk-step.is-done .t { color: var(--rd-blue); } /* --- panels --- */ .bk-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 22px 20px; } .bk-panel { display: none; } .bk-panel.is-active { display: block; } .bk-panel h3 { font-size: 15px; font-weight: 900; color: var(--rd-ink); margin: 0 0 4px; letter-spacing: -.01em; } .bk-hint { font-size: 13px; color: var(--rd-muted); line-height: 1.5; margin: 0 0 14px; } /* --- service tiles (modal-owned; never reuse the page's .svc-* rules) --- */ .bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bk-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 6px 11px; border: 1px solid var(--rd-line); border-radius: 10px; background: #fff; color: var(--rd-ink); font-family: inherit; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .bk-tile:hover { border-color: rgba(26,86,219,.4); background: var(--rd-off); } .bk-tile[aria-pressed="true"] { border-color: var(--rd-blue); background: var(--rd-blue-soft); box-shadow: inset 0 0 0 1px var(--rd-blue); } .bk-ico { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--rd-blue); color: #fff; } .bk-label { font-size: 11px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; } .bk-tile-other { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 0; padding: 11px 12px; gap: 10px; } .bk-tile-other .bk-ico { width: 26px; height: 26px; } .bk-tile-other .bk-label { font-size: 12px; } .bk-other { margin-top: 14px; } .bk-other .bk-fg { margin-bottom: 0; } /* --- form fields (modal-owned) --- */ .bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bk-fg { margin-bottom: 12px; } .bk-fg label { display: block; color: var(--rd-ink); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; } .bk-fg input, .bk-fg select, .bk-fg textarea { width: 100%; min-height: 44px; border: 1px solid var(--rd-line); border-radius: 8px; background: #fff; color: var(--rd-ink); font-family: inherit; font-size: 15px; padding: 10px 12px; } .bk-fg textarea { min-height: 104px; resize: vertical; } .bk-fg input:focus, .bk-fg select:focus, .bk-fg textarea:focus { outline: 0; border-color: var(--rd-blue); box-shadow: 0 0 0 3px rgba(26,86,219,.11); } /* --- time slots --- */ .bk-day { margin-bottom: 16px; } .bk-day h4 { font-size: 13px; font-weight: 900; color: var(--rd-blue); margin: 0 0 8px; } .bk-slots { display: flex; flex-wrap: wrap; gap: 8px; } .bk-slot { min-width: 96px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-off); color: var(--rd-ink); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .bk-slot:hover { border-color: rgba(26,86,219,.45); background: #fff; } .bk-slot[aria-pressed="true"] { border-color: var(--rd-blue); background: var(--rd-blue-soft); box-shadow: inset 0 0 0 1px var(--rd-blue); } .bk-loading, .bk-empty { padding: 26px 0; text-align: center; color: var(--rd-muted); font-size: 14px; } .bk-more { width: 100%; margin-top: 4px; } /* --- homeowner yes/no --- */ .bk-choice { display: flex; gap: 10px; } .bk-choice label { flex: 1; display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--rd-line); border-radius: 8px; background: #fff; color: var(--rd-ink); font-size: 14px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; } .bk-choice input { accent-color: var(--rd-blue); width: 17px; height: 17px; margin: 0; min-height: 0; } .bk-choice label.is-checked { border-color: var(--rd-blue); background: var(--rd-blue-soft); box-shadow: inset 0 0 0 1px var(--rd-blue); } /* --- summary, footer, done --- */ .bk-summary { display: grid; gap: 6px; padding: 13px 15px; margin-bottom: 16px; border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-off); } .bk-summary div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; } .bk-summary span { color: var(--rd-muted); } .bk-summary strong { color: var(--rd-ink); font-weight: 800; text-align: right; } .bk-foot { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--rd-line); background: var(--rd-off); } .bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 46px; padding: 11px 18px; border: 1px solid transparent; border-radius: 9px; font-family: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .bk-btn-solid { background: var(--rd-blue); color: #fff; } .bk-btn-solid:hover { background: var(--rd-blue-dark); color: #fff; } .bk-btn-solid[disabled] { opacity: .62; cursor: default; } .bk-btn-ghost { background: #fff; color: var(--rd-ink); border-color: var(--rd-line); } .bk-btn-ghost:hover { background: var(--rd-off); border-color: rgba(26,86,219,.3); color: var(--rd-ink); } .bk-btn.bk-back { flex: 0 0 108px; } .bk-error { margin: 0 0 12px; color: #a01515; font-size: 13px; font-weight: 700; line-height: 1.45; } .bk-done { text-align: center; padding: 12px 0 6px; } .bk-done .bk-tick { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: var(--rd-green); color: #fff; } .bk-done h3 { font-size: 20px; margin-bottom: 8px; } .bk-done p { color: var(--rd-body); font-size: 14px; line-height: 1.6; margin: 0 0 14px; } .bk-done .bk-btn { flex: 0 1 auto; display: inline-flex; } /* [hidden] has to beat the flex/grid display values above. */ .bk-foot[hidden], .bk-error[hidden], .bk-modal .bk-btn[hidden], .bk-more[hidden] { display: none; } @media (max-width: 720px) { .bk-overlay { padding: 0; } .bk-overlay.is-open { place-items: stretch; } .bk-modal { width: 100%; max-height: 100%; border-radius: 0; } .bk-head { padding: 17px 50px 15px 16px; } .bk-rail { padding: 13px 16px 2px; gap: 2px; } .bk-step .t { font-size: 10px; } .bk-body { padding: 12px 16px 18px; } .bk-foot { padding: 12px 16px; } .bk-slot { flex: 1 1 calc(50% - 4px); min-width: 0; } .bk-label { font-size: 10px; } .bk-row { grid-template-columns: 1fr; } }