/* ============================================================ Sierra Quote Builder — single white card, native Sierra styling Scoped under .qb-section. Brand tokens mirror the site :root. 8px spacing system. The section is tinted so the white card reads as a real, contained panel. ============================================================ */ /* Design tokens. Declared on both roots so the pop-up card — which lives outside .qb-section, at the end of — resolves the same variables. Kept separate from the .qb-section rule below, which also carries that section's own background, padding and font. */ .qb-section, .qbm-card { --qb-navy: #1c3866; --qb-navy-deep: #142a4d; --qb-blue: #3caae1; --qb-blue-ink: #2b7fb0; --qb-ink: #16232b; --qb-mute: #5f6f74; --qb-line: #e3e8ee; --qb-tint: #eef3f9; --qb-white: #ffffff; --qb-radius: 20px; --qb-radius-sm: 12px; --qb-shadow: 0 24px 64px -30px rgba(20, 42, 77, .35), 0 4px 12px -6px rgba(20, 42, 77, .10); --qb-shadow-sm: 0 6px 18px -12px rgba(20, 42, 77, .4); --qb-ease: cubic-bezier(.4, 0, .2, 1); } .qbm-card { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--qb-ink); -webkit-font-smoothing: antialiased; } .qb-section { /* tinted, cool background so the white card has real separation */ background: linear-gradient(180deg, #e7edf4 0%, #eef1f2 46%, #f2f4f1 100%); padding: 72px 24px 88px; scroll-margin-top: 88px; font-family: "Red Hat Display", system-ui, sans-serif; color: var(--qb-ink); -webkit-font-smoothing: antialiased; } /* Home page only: sits right under the hero with the rest of the page below it, so it takes the site's own background instead of the tinted panel look above, and needs less top padding under the hero. #quote-builder is added to raise specificity above the .qb-section breakpoint rules below, which set padding-top via the shorthand regardless of source order. */ #quote-builder.qb-section--home { background: #f5f6ef; padding-top: 44px; padding-bottom: 0; margin-bottom: -5px; } @media (min-width: 901px) { #quote-builder.qb-section--home { padding-top: 48px; } } @media (max-width: 640px) { #quote-builder.qb-section--home { padding-top: 26px; } } .qb-wrap { max-width: 660px; margin: 0 auto; } /* ---------- intro (left column on desktop, stacked on mobile) ---------- */ .qb-intro { text-align: center; margin-bottom: 30px; } .qb-eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--qb-blue-ink); } .qb-heading { margin: 0 0 16px; font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--qb-navy); } .qb-subhead { margin: 0 auto; max-width: 48ch; font-size: 16px; line-height: 1.6; color: var(--qb-mute); } /* richer trust list: icon chip + bold line + supporting subline */ .qb-trust { list-style: none; padding: 0; margin: 28px auto 0; width: fit-content; max-width: 100%; display: grid; gap: 16px; text-align: left; } .qb-trust li { display: flex; align-items: flex-start; gap: 13px; } .qb-trust-ico { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; margin-top: 1px; background: rgba(60, 170, 225, .13); color: var(--qb-blue-ink); } .qb-trust-txt b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--qb-navy); } .qb-trust-txt span { display: block; font-size: 13px; line-height: 1.45; color: var(--qb-mute); margin-top: 2px; } /* ---------- the card ---------- */ /* Fixed footprint at every size: progress pinned on top, nav pinned on the bottom, and only the question area (.qb-body) scrolls inside it. The pop-up overrides this height with its own modal-relative sizing — see ".qbm-card .qb-card" in js/quote-modal.js. */ .qb-card { position: relative; height: 640px; background: var(--qb-white); border: 1px solid var(--qb-line); border-radius: var(--qb-radius); box-shadow: var(--qb-shadow); overflow: hidden; display: flex; flex-direction: column; } .qb-progress { height: 4px; background: var(--qb-tint); flex: 0 0 auto; } .qb-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--qb-blue-ink), var(--qb-blue)); border-radius: 0 4px 4px 0; transition: width .45s var(--qb-ease); } /* Fixed per-step header: step label + heading + description. Stays put while .qb-body scrolls beneath it. */ .qb-head { padding: 22px 40px 14px; border-bottom: 1px solid var(--qb-line); flex: 0 0 auto; } .qb-head:empty { display: none; } .qb-head .qb-title:last-child, .qb-head .qb-lede:last-child { margin-bottom: 0; } .qb-body { padding: 22px 40px 34px; flex: 1 1 auto; overflow-y: auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* pure-CSS scroll shadows — top/bottom hints appear only when there is more to scroll, then fade away at the ends */ background: linear-gradient(#ffffff 30%, rgba(255,255,255,0)) center top, linear-gradient(rgba(255,255,255,0), #ffffff 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(20,42,77,.11), rgba(20,42,77,0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(20,42,77,.11), rgba(20,42,77,0)) center bottom; background-repeat: no-repeat; background-size: 100% 42px, 100% 42px, 100% 13px, 100% 13px; background-attachment: local, local, scroll, scroll; scrollbar-width: thin; scrollbar-color: #d3dbe6 transparent; } .qb-body::-webkit-scrollbar { width: 9px; } .qb-body::-webkit-scrollbar-thumb { background: #d3dbe6; border-radius: 8px; border: 2px solid #fff; background-clip: padding-box; } .qb-body::-webkit-scrollbar-thumb:hover { background: #bcc7d7; background-clip: padding-box; } .qb-steplabel { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qb-blue-ink); margin: 0 0 6px; } .qb-title { margin: 0 0 5px; font-size: 25px; line-height: 1.22; font-weight: 700; letter-spacing: -.015em; text-transform: none; color: var(--qb-navy); } .qb-lede { margin: 0 0 28px; font-size: 15.5px; line-height: 1.5; color: var(--qb-mute); max-width: 50ch; } /* content fade-in on step change */ .qb-view { animation: qbIn .32s var(--qb-ease) both; } @keyframes qbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .qb-view { animation: none; } .qb-progress-bar { transition: none; } } /* ---------- fields ---------- */ .qb-field { margin-bottom: 26px; } .qb-field:last-child { margin-bottom: 0; } .qb-flabel { display: block; font-size: 14.5px; font-weight: 600; color: var(--qb-ink); margin-bottom: 12px; } .qb-opt { font-weight: 500; color: var(--qb-mute); } .qb-sublabel { display: block; font-size: 14.5px; font-weight: 600; color: var(--qb-ink); margin: 20px 0 12px; } .qb-opts { display: grid; gap: 10px; } .qb-opt-btn.standalone { margin-top: 10px; } .qb-opts.cols-3 { grid-template-columns: repeat(3, 1fr); } .qb-opts.cols-2 { grid-template-columns: repeat(2, 1fr); } .qb-opt-btn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 52px; padding: 13px 16px; border: 1.5px solid var(--qb-line); border-radius: var(--qb-radius-sm); background: #fff; color: var(--qb-ink); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s var(--qb-ease), background-color .15s var(--qb-ease), box-shadow .15s var(--qb-ease), transform .1s var(--qb-ease); } .qb-opt-btn:hover { border-color: var(--qb-blue); } .qb-opt-btn:active { transform: scale(.985); } .qb-opt-btn > span:first-child { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .qb-opt-btn .qb-opt-sub { font-size: 12.5px; font-weight: 500; color: var(--qb-mute); } .qb-opt-btn.is-sel { border-color: var(--qb-navy); background: var(--qb-tint); box-shadow: inset 0 0 0 1px var(--qb-navy); } .qb-opt-btn .qb-tick { margin-left: auto; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--qb-line); display: grid; place-items: center; color: #fff; transition: background-color .15s, border-color .15s; } .qb-opt-btn.is-sel .qb-tick { background: var(--qb-navy); border-color: var(--qb-navy); } .qb-opt-btn .qb-tick svg { opacity: 0; transition: opacity .15s; } .qb-opt-btn.is-sel .qb-tick svg { opacity: 1; } /* service cards */ .qb-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .qb-svc { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; min-height: 0; border: 1.5px solid var(--qb-line); border-radius: var(--qb-radius-sm); background: #fff; cursor: pointer; transition: border-color .15s var(--qb-ease), box-shadow .15s var(--qb-ease), transform .1s var(--qb-ease); } .qb-svc { text-align: left; } .qb-svc:hover { border-color: var(--qb-blue); box-shadow: var(--qb-shadow-sm); } .qb-svc:active { transform: scale(.99); } .qb-svc.is-sel { border-color: var(--qb-navy); box-shadow: inset 0 0 0 1px var(--qb-navy); background: var(--qb-tint); } .qb-svc-top { display: flex; align-items: center; gap: 11px; } .qb-svc-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--qb-tint); color: var(--qb-blue-ink); transition: background-color .15s, color .15s; } .qb-svc.is-sel .qb-svc-ico { background: var(--qb-navy); color: #fff; } .qb-svc-name { font-size: 15px; font-weight: 700; color: var(--qb-navy); line-height: 1.2; overflow-wrap: anywhere; } .qb-svc-desc { font-size: 12.5px; color: var(--qb-mute); line-height: 1.45; } .qb-svc-tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--qb-blue-ink); margin-top: auto; } .qb-svc.is-inquire .qb-svc-tag { color: #b5793a; } .qb-group-label { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--qb-mute); margin: 16px 0 2px; } /* contact inputs */ .qb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .qb-in { display: flex; flex-direction: column; } .qb-in.full { grid-column: 1 / -1; } .qb-in label { font-size: 13.5px; font-weight: 600; color: var(--qb-ink); margin-bottom: 8px; } .qb-in input, .qb-in textarea, .qb-in select { box-sizing: border-box; border: 1.5px solid var(--qb-line); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--qb-ink); background: #fff; transition: border-color .15s, box-shadow .15s; } .qb-in input:focus, .qb-in textarea:focus, .qb-in select:focus { outline: none; border-color: var(--qb-blue); box-shadow: 0 0 0 3px rgba(60,170,225,.15); } .qb-in select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6f74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .qb-in textarea { min-height: 78px; resize: vertical; } .qb-in .qb-err-msg { color: #c0492e; font-size: 12.5px; margin-top: 6px; display: none; } .qb-in.has-err input, .qb-in.has-err textarea { border-color: #d9694a; } .qb-in.has-err .qb-err-msg { display: block; } .qb-in.has-err select { border-color: #d9694a; } .qb-in.has-err .qb-opt-btn { border-color: #d9694a; } /* estimate step */ .qb-est-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } .qb-est-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--qb-line); border-radius: var(--qb-radius-sm); background: #fbfcfe; } .qb-est-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--qb-tint); color: var(--qb-blue-ink); } .qb-est-main { flex: 1 1 auto; min-width: 0; } .qb-est-name { font-size: 15.5px; font-weight: 700; color: var(--qb-navy); } .qb-est-desc { font-size: 13.5px; color: var(--qb-mute); line-height: 1.45; margin-top: 4px; } .qb-est-price { flex: 0 0 auto; text-align: right; font-weight: 800; color: var(--qb-navy); font-size: 15.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .qb-est-price small { display: block; font-size: 11px; font-weight: 700; color: var(--qb-blue-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .qb-est-total { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-radius: var(--qb-radius-sm); background: linear-gradient(160deg, var(--qb-navy), var(--qb-navy-deep)); color: #fff; } .qb-est-total .lab { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b9cbe0; } .qb-est-total .val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .qb-disclaimer { font-size: 12.5px; color: var(--qb-mute); margin: 16px 2px 0; line-height: 1.55; } /* success */ .qb-done { text-align: center; padding: 24px 0; } .qb-done-badge { width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--qb-tint); color: var(--qb-blue-ink); animation: qbPop .5s var(--qb-ease) both; } @keyframes qbPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ---------- footer nav ---------- */ .qb-nav { display: flex; align-items: center; gap: 12px; padding: 18px 40px 22px; border-top: 1px solid var(--qb-line); background: #fff; flex: 0 0 auto; } .qb-nav > .qb-back { margin-left: auto; } .qb-btn { font-family: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; border-radius: 40px; font-size: 15px; font-weight: 600; transition: background-color .25s var(--qb-ease), border-color .25s var(--qb-ease), color .25s, opacity .2s; border: 1px solid transparent; } .qb-next { background: var(--qb-navy); border-color: var(--qb-blue); color: #fff; padding: 15px 30px; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .qb-back { white-space: nowrap; } .qb-next:hover { background: var(--qb-blue); border-color: var(--qb-blue); } .qb-next:disabled { opacity: .45; cursor: default; background: var(--qb-navy); } .qb-next svg { transition: transform .25s var(--qb-ease); } .qb-next:hover svg { transform: translateX(3px); } .qb-back { background: transparent; color: var(--qb-mute); padding: 15px 18px; } .qb-back:hover { color: var(--qb-navy); } .qb-back[hidden] { display: none; } /* ---------- desktop: two columns (text left, self-contained quote card right) ---------- */ @media (min-width: 901px) { .qb-section { padding: 76px 32px 88px; } .qb-wrap { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 552px); gap: clamp(48px, 6vw, 84px); align-items: center; /* pitch centres against the fixed-height card */ } .qb-intro { text-align: left; margin-bottom: 0; } .qb-heading { font-size: clamp(38px, 3.4vw, 48px); margin-bottom: 20px; } .qb-subhead { margin: 0; max-width: 44ch; font-size: 17px; } .qb-trust { margin: 34px 0 0; width: auto; gap: 18px; } .qb-trust-ico { width: 32px; height: 32px; } .qb-trust-txt b { font-size: 16.5px; } .qb-trust-txt span { font-size: 13.5px; } .qb-head { padding: 18px 40px 12px; } .qb-body { padding: 20px 40px 26px; } } /* ---------- responsive ---------- */ @media (max-width: 640px) { .qb-section { padding: 40px 14px 56px; } .qb-heading { font-size: 26px; } .qb-subhead { font-size: 14.5px; } .qb-trust { margin-top: 20px; gap: 14px; } .qb-trust-txt b { font-size: 15px; } .qb-intro { margin-bottom: 24px; } .qb-card { height: 560px; } .qb-head { padding: 16px 20px 10px; } .qb-body { padding: 18px 20px 26px; } .qb-title { font-size: 21px; } .qb-lede { font-size: 14.5px; margin-bottom: 22px; } /* Options reflow to fit rather than stacking one-per-row: a step with several services picked was over five phone screens tall when every short option got its own row. auto-fit means the same rule gives two columns on a 430px phone and on a 320px one, without a size ladder. */ .qb-opts.cols-3, .qb-opts.cols-2 { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } /* Opt out where an option carries a sub-line and needs the full width. */ .qb-opts.stack { grid-template-columns: 1fr; } .qb-opt-btn { min-height: 48px; padding: 12px 13px; } .qb-svc-grid { grid-template-columns: 1fr; gap: 9px; } .qb-svc { min-height: 0; padding: 12px 13px; gap: 5px; } .qb-svc-ico { width: 34px; height: 34px; } .qb-svc-top { gap: 10px; } .qb-svc-name { font-size: 14.5px; } .qb-svc-desc { font-size: 12px; } .qb-field { margin-bottom: 22px; } .qb-grid2 { grid-template-columns: 1fr; gap: 14px; } .qb-est-item { padding: 14px; gap: 12px; } .qb-est-ico, .qb-svc-ico { width: 36px; height: 36px; } .qb-est-total { flex-direction: column; align-items: flex-start; gap: 6px; } .qb-est-total .val { font-size: 24px; } .qb-nav { padding: 16px 18px 18px; gap: 10px; flex-wrap: wrap; } .qb-next { padding: 14px 24px; font-size: 14px; } .qb-back { padding: 14px 14px; font-size: 14px; } } /* Small phones (iPhone SE / mini, 320–380px). Everything still has to fit without the nav wrapping onto three rows or option labels truncating. */ @media (max-width: 400px) { .qb-head { padding: 14px 15px 9px; } .qb-body { padding: 14px 15px 22px; } .qb-title { font-size: 19.5px; } .qb-lede { font-size: 14px; margin-bottom: 18px; } .qb-steplabel { font-size: 11px; letter-spacing: .1em; } .qb-svc { padding: 11px 12px; } .qb-svc-ico { width: 32px; height: 32px; } .qb-svc-desc { font-size: 11.5px; } .qb-opt-btn { font-size: 14.5px; padding: 12px 13px; min-height: 48px; } .qb-opts.compact .qb-opt-btn { font-size: 14px; padding: 11px 11px; gap: 7px; } .qb-opts.compact .qb-opt-btn .qb-tick { width: 18px; height: 18px; } .qb-in input, .qb-in textarea, .qb-in select { font-size: 16px; } /* 16px stops iOS zooming on focus */ .qb-nav { padding: 14px 15px 16px; gap: 8px; } .qb-next { padding: 13px 18px; font-size: 13.5px; gap: 7px; } .qb-back { padding: 13px 10px; font-size: 13.5px; } .qb-est-item { padding: 12px; gap: 10px; } .qb-est-name { font-size: 14.5px; } .qb-est-price { font-size: 14.5px; } .qb-est-total .val { font-size: 22px; } }