/* Saniso Service Configurator: customer UI. Scoped under .sc-* so it never fights the theme. Layout: desktop (>= 1024px) questions card + sticky estimate panel; tablet and phone one column with a collapsible estimate on top and a sticky Continue bar with the total at the bottom. Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32. Radius: 8 (controls) / 12 (cards) / 16 (surfaces). */ .sc-app, .sc-list, .sc-quote { --sc-primary: var(--primary-color, #0b5ed7); --sc-primary-soft: color-mix(in srgb, var(--sc-primary) 6%, #fff); --sc-primary-tint: color-mix(in srgb, var(--sc-primary) 14%, #fff); --sc-primary-contrast: #fff; --sc-text: #101828; --sc-text-2: #344054; --sc-muted: #667085; --sc-border: #e4e7ec; --sc-border-strong: #c3c9d4; --sc-soft: #f7f8fa; --sc-surface: #fff; --sc-good: #067647; --sc-good-soft: #ecfdf3; --sc-warn: #b54708; --sc-warn-soft: #fffaeb; --sc-bad: #d92d20; --sc-bad-soft: #fef3f2; --sc-info: #175cd3; --sc-info-soft: #eff8ff; --sc-radius-sm: 8px; --sc-radius: 12px; --sc-radius-lg: 16px; --sc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --sc-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 4px 12px -2px rgba(16, 24, 40, .06); --sc-ring: 0 0 0 4px color-mix(in srgb, var(--sc-primary) 14%, transparent); --sc-sticky-top: 96px; color: var(--sc-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .sc-app { max-width: 1200px; margin: 0 auto 32px; } .sc-app *, .sc-list *, .sc-quote * { box-sizing: border-box; } .sc-app [hidden], .sc-list [hidden], .sc-quote [hidden] { display: none !important; } .sc-muted { color: var(--sc-muted); } .sc-small { font-size: 13px; } .sc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .sc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sc-loading { display: flex; align-items: center; gap: 12px; min-height: 320px; justify-content: center; color: var(--sc-muted); } .sc-spinner { width: 22px; height: 22px; border: 3px solid var(--sc-border); border-top-color: var(--sc-primary); border-radius: 50%; animation: sc-spin .8s linear infinite; } @keyframes sc-spin { to { transform: rotate(360deg); } } /* ---- Header + stepper ------------------------------------------------------------------------------------------- */ .sc-header { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; } .sc-brand { font-weight: 700; font-size: 18px; letter-spacing: -.01em; } .sc-app--page .sc-brand { display: none; } /* the page already shows the configurator name as its title */ .sc-app--page .sc-header { justify-content: flex-end; margin-bottom: 8px; } .sc-link { background: none; border: 0; padding: 0; color: var(--sc-primary); cursor: pointer; text-decoration: none; font: inherit; font-size: 14px; font-weight: 600; } .sc-link:hover { text-decoration: underline; text-underline-offset: 3px; } .sc-header > .sc-link { display: inline-flex; align-items: center; gap: 6px; } .sc-header > .sc-link::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } .sc-savelater { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--sc-shadow-sm); } .sc-savelater p { margin: 0 0 8px; } .sc-progress { margin-bottom: 20px; } .sc-stepper { position: relative; display: flex; list-style: none; margin: 0; padding: 0; counter-reset: none; } /* Connector between numbers: grey, primary once the step is done. */ .sc-stepper__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 4px; } .sc-stepper__item:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; border-radius: 2px; background: var(--sc-border); } .sc-stepper__item.is-done:not(:last-child)::after { background: var(--sc-primary); } .sc-stepper__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--sc-border); background: var(--sc-surface); color: var(--sc-muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .2s, border-color .2s, color .2s; } .sc-stepper__name { font-size: 13px; line-height: 1.3; color: var(--sc-muted); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .is-current > .sc-stepper__num { background: var(--sc-primary); border-color: var(--sc-primary); color: var(--sc-primary-contrast); box-shadow: var(--sc-ring); } .is-current > .sc-stepper__name { color: var(--sc-text); font-weight: 600; } .is-done > .sc-stepper__num { background: var(--sc-primary-tint); border-color: var(--sc-primary-tint); color: var(--sc-primary); } .is-done > .sc-stepper__num::after { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid currentColor; border-width: 0 2.25px 2.25px 0; transform: rotate(45deg); } .is-done > .sc-stepper__name { color: var(--sc-text-2); } /* Compact version (phones): "Step 2 of 6 ยท Measurements" + a thin bar. */ .sc-progress__label { display: none; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sc-muted); margin-bottom: 8px; } .sc-progress__label b { color: var(--sc-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-progress__bar { display: none; height: 6px; border-radius: 999px; background: var(--sc-border); overflow: hidden; } .sc-progress__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sc-primary); transition: width .3s; } /* ---- Layout: questions card + sticky estimate panel ------------------------------------------------------------- */ .sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .sc-main { min-width: 0; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow); padding: 28px 32px 24px; } .sc-side { position: sticky; top: var(--sc-sticky-top); min-width: 0; } .sc-step-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--sc-border); } .sc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-primary); margin-bottom: 4px; } .sc-step-title { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin: 0; outline: none; color: var(--sc-text); } .sc-step-desc { margin: 6px 0 0; font-size: 15px; max-width: 62ch; } .sc-step-media { margin: 16px 0 0; } .sc-step-media a { display: block; border-radius: var(--sc-radius); overflow: hidden; border: 1px solid var(--sc-border); background: var(--sc-soft); } .sc-step-media img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; } .sc-step-media figcaption { margin-top: 8px; font-size: 13.5px; color: var(--sc-muted); } /* Questions flow in a grid: short inputs (numbers, yes/no) sit side by side, everything else takes the full row. */ .sc-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 24px; } .sc-question { grid-column: 1 / -1; margin: 0; min-width: 0; } .sc-question--compact { grid-column: auto; } .sc-label { font-weight: 600; font-size: 15.5px; color: var(--sc-text); margin-bottom: 12px; line-height: 1.35; } .sc-label:has(+ .sc-help) { margin-bottom: 4px; } .sc-req { color: var(--sc-bad); margin-left: 2px; } .sc-help { color: var(--sc-muted); font-size: 13.5px; margin: 0 0 12px; line-height: 1.45; max-width: 70ch; } .sc-error { display: flex; align-items: center; gap: 6px; color: var(--sc-bad); font-size: 13.5px; font-weight: 500; margin-top: 8px; } .sc-error:empty { display: none; } .sc-question.has-error .sc-input, .sc-question.has-error .sc-card, .sc-question.has-error .sc-seg { border-color: var(--sc-bad); } .sc-global-errors:empty { display: none; } /* ---- Option cards ----------------------------------------------------------------------------------------------- */ .sc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .sc-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-cards--products { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .sc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; height: 100%; text-align: left; padding: 16px 44px 16px 16px; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); cursor: pointer; font: inherit; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, background-color .15s; } .sc-card:hover { border-color: var(--sc-border-strong); box-shadow: var(--sc-shadow); color: inherit; } .sc-card.is-selected { border-color: var(--sc-primary); background: var(--sc-primary-soft); box-shadow: inset 0 0 0 1px var(--sc-primary); } .sc-card.is-recommended:not(.is-selected) { border-color: color-mix(in srgb, var(--sc-primary) 35%, var(--sc-border)); } .sc-card__title { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--sc-text); } .sc-card__sub { color: var(--sc-muted); font-size: 13.5px; line-height: 1.45; } .sc-card .sc-badge { margin-top: auto; } .sc-card .sc-card__sub + .sc-badge, .sc-card .sc-card__title + .sc-badge { margin-top: 8px; } .sc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sc-primary-soft); color: var(--sc-primary); margin-bottom: 8px; } .sc-card.is-selected .sc-card__icon { background: var(--sc-surface); } .sc-card__icon svg { width: 22px; height: 22px; } .sc-card--action { padding: 14px 16px; height: auto; } .sc-card--action .sc-card__sub { font-size: 13px; } /* Radio / checkbox indicator in the top-right corner */ .sc-check-mark { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border: 1.5px solid var(--sc-border-strong); border-radius: 50%; background: var(--sc-surface); transition: background-color .15s, border-color .15s; } .sc-check-mark--box { border-radius: 6px; } .sc-card:hover > .sc-check-mark { border-color: var(--sc-primary); } .is-selected > .sc-check-mark { background: var(--sc-primary); border-color: var(--sc-primary); } .is-selected > .sc-check-mark::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .sc-optional { font-size: 12px; font-weight: 500; color: var(--sc-muted); background: var(--sc-soft); border: 1px solid var(--sc-border); border-radius: 999px; padding: 2px 10px; vertical-align: middle; margin-left: 8px; letter-spacing: 0; } .sc-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 10px; border-radius: 999px; background: var(--sc-soft); color: var(--sc-text-2); border: 1px solid var(--sc-border); } .sc-card.is-recommended .sc-badge:not(.sc-badge--upgrade):not(.sc-badge--included):not(.sc-badge--bundle) { background: var(--sc-primary-tint); color: var(--sc-primary); border-color: transparent; } .sc-badge--upgrade { background: var(--sc-warn-soft); color: var(--sc-warn); border-color: #fedf89; } .sc-badge--included { background: var(--sc-good-soft); color: var(--sc-good); border-color: #abefc6; } /* Product cards: equal image area, text below */ .sc-product { padding: 8px 8px 16px; gap: 4px; } .sc-product > :not(.sc-card__img):not(.sc-check-mark):not(.sc-sr) { padding: 0 8px; } .sc-card__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 8px; background: var(--sc-soft); border-radius: 8px; overflow: hidden; } .sc-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; } .sc-card__img.is-broken img { display: none; } .sc-card__img.is-broken::before { content: ""; width: 40px; height: 40px; opacity: .35; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E"); } .sc-product .sc-check-mark { top: 16px; right: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .15); } .sc-card__img.is-none::before { content: ""; width: 40px; height: 40px; opacity: .35; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7'/%3E%3Cpath d='M12 11v10'/%3E%3C/svg%3E"); } .sc-product__brand { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-muted); } .sc-product .sc-card__title { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sc-product__meta { font-size: 12px; color: var(--sc-muted); } .sc-product__price { font-weight: 700; font-size: 16px; margin-top: 4px; font-variant-numeric: tabular-nums; } .sc-product__allow { font-size: 12.5px; color: var(--sc-muted); margin-top: 4px; } .sc-product .sc-badge { margin-top: 4px; margin-left: 8px; } .sc-badge--bundle { background: #eef4ff; color: #3538cd; border-color: #c7d7fe; } .sc-bundle { margin: 4px 0 0; padding: 0 0 0 26px !important; font-size: 13px; line-height: 1.5; text-align: left; } .sc-bundle li { margin: 0; } /* Yes / No switch */ .sc-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--sc-soft); border: 1px solid var(--sc-border); border-radius: 10px; } .sc-seg__btn { min-width: 96px; min-height: 38px; padding: 8px 20px; border: 0; border-radius: 7px; background: transparent; color: var(--sc-text-2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; } .sc-seg__btn:hover { background: var(--sc-surface); } .sc-seg__btn.is-selected { background: var(--sc-primary); color: var(--sc-primary-contrast); box-shadow: var(--sc-shadow-sm); } /* ---- Inputs ----------------------------------------------------------------------------------------------------- */ .sc-input { width: 100%; padding: 10px 14px; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-sm); font: inherit; background: var(--sc-surface); color: inherit; min-height: 44px; box-shadow: var(--sc-shadow-sm); transition: border-color .15s, box-shadow .15s; } .sc-input:hover { border-color: color-mix(in srgb, var(--sc-primary) 40%, var(--sc-border-strong)); } .sc-input:focus { border-color: var(--sc-primary); outline: none; box-shadow: var(--sc-ring); } .sc-input::placeholder { color: #98a2b3; } textarea.sc-input { min-height: 104px; resize: vertical; } .sc-number { display: inline-flex; align-items: stretch; border: 1px solid var(--sc-border-strong); border-radius: var(--sc-radius-sm); background: var(--sc-surface); box-shadow: var(--sc-shadow-sm); overflow: hidden; } .sc-number:focus-within { border-color: var(--sc-primary); box-shadow: var(--sc-ring); } .sc-number .sc-input { border: 0; border-radius: 0; box-shadow: none; } .sc-input--num { width: 76px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .sc-input--num::-webkit-outer-spin-button, .sc-input--num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sc-step-btn { flex: none; width: 44px; border: 0; background: var(--sc-soft); color: var(--sc-text-2); font-size: 20px; cursor: pointer; line-height: 1; transition: background-color .15s, color .15s; } .sc-step-btn:hover { background: var(--sc-primary-tint); color: var(--sc-primary); } .sc-number > .sc-unit { display: flex; align-items: center; padding: 0 12px 0 4px; margin: 0; } .sc-unit { color: var(--sc-muted); margin-left: 6px; font-size: 14px; } .sc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 16px; } .sc-fields--measure { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); } .sc-field { display: block; min-width: 0; } .sc-field__label { display: block; font-size: 13px; font-weight: 500; color: var(--sc-text-2); margin-bottom: 6px; } .sc-field__input { display: flex; align-items: center; } .sc-input-group { position: relative; } .sc-input-group .sc-input { padding-right: 40px; font-variant-numeric: tabular-nums; } .sc-input-group .sc-unit { position: absolute; right: 14px; margin: 0; pointer-events: none; } .sc-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; font-size: 14px; } .sc-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--sc-border-strong); border-radius: var(--sc-radius); background: var(--sc-soft); } .sc-files { list-style: none; padding: 0; margin: 0; font-size: 14px; width: 100%; } .sc-files li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); margin-top: 8px; } .sc-card:focus-visible, .sc-btn:focus-visible, .sc-input:focus-visible, .sc-step-btn:focus-visible, .sc-link:focus-visible, .sc-seg__btn:focus-visible, .sc-slot:focus-visible, .sc-panel__summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--sc-primary) 45%, transparent); outline-offset: 2px; } /* ---- Buttons + navigation --------------------------------------------------------------------------------------- */ .sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--sc-radius-sm); border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 46px; white-space: nowrap; transition: filter .15s, border-color .15s, background-color .15s, box-shadow .15s; } .sc-btn--primary { background: var(--sc-primary); color: var(--sc-primary-contrast); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); } .sc-btn--primary:hover { filter: brightness(.92); color: var(--sc-primary-contrast); } .sc-btn--ghost { background: var(--sc-surface); border-color: var(--sc-border-strong); color: var(--sc-text-2); box-shadow: var(--sc-shadow-sm); } .sc-btn--ghost:hover { border-color: var(--sc-primary); color: var(--sc-primary); } .sc-btn--block { width: 100%; margin-top: 12px; } .sc-btn[disabled] { opacity: .6; cursor: progress; } /* Continue while the server checks the step: a small spinner instead of a dead-looking button. */ .sc-btn.is-loading { opacity: .85; } .sc-btn.is-loading::after { content: ""; width: 14px; height: 14px; margin-left: 4px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sc-spin .7s linear infinite; } @media (prefers-reduced-motion: reduce) { .sc-btn.is-loading::after { animation: none; } } .sc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 32px -32px -24px; padding: 16px 32px; border-top: 1px solid var(--sc-border); background: var(--sc-soft); border-radius: 0 0 var(--sc-radius-lg) var(--sc-radius-lg); } .sc-nav > span:empty { flex: 1; } .sc-nav__total { flex: 1; text-align: right; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; display: none; } .sc-nav .sc-btn--primary { min-width: 160px; } /* ---- Estimate panel --------------------------------------------------------------------------------------------- */ .sc-panel { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow); padding: 20px; } .sc-panel__title { font-weight: 700; margin-bottom: 12px; font-size: 16px; color: var(--sc-text); letter-spacing: -.005em; } .sc-panel__sub { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sc-muted); margin: 0 0 4px; } .sc-panel__summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; cursor: default; } .sc-panel__summary::-webkit-details-marker { display: none; } .sc-panel__summary .sc-panel__title { margin: 0; } .sc-panel__peek { display: none; font-weight: 700; font-variant-numeric: tabular-nums; } .sc-panel__body { margin-top: 16px; } .sc-vars, .sc-cats { margin: 0 0 16px; } .sc-vars > div, .sc-cats > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--sc-border); font-size: 14px; } .sc-vars > div:last-child, .sc-cats > div:last-child { border-bottom: 0; } .sc-vars dt, .sc-cats dt { color: var(--sc-muted); font-weight: 400; } .sc-vars dd, .sc-cats dd { margin: 0; font-weight: 600; color: var(--sc-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .sc-vars { padding: 4px 12px; background: var(--sc-soft); border-radius: var(--sc-radius-sm); } .sc-vars > div { font-size: 13.5px; padding: 6px 0; } .sc-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 -20px; padding: 16px 20px; background: var(--sc-primary-soft); border-top: 1px solid var(--sc-primary-tint); border-bottom: 1px solid var(--sc-primary-tint); } .sc-total > span { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; color: var(--sc-text-2); } .sc-total strong { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--sc-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .sc-total small { color: var(--sc-muted); font-weight: 400; font-size: 12.5px; } .sc-status { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: var(--sc-radius-sm); font-size: 13px; line-height: 1.45; background: var(--sc-info-soft); color: var(--sc-info); } .sc-status::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E"); } .sc-status--needs_review { background: var(--sc-warn-soft); color: var(--sc-warn); } .sc-status--final { background: var(--sc-good-soft); color: var(--sc-good); } .sc-note { font-size: 13px; color: var(--sc-warn); margin: 8px 0 0; } .sc-actions { display: grid; gap: 8px; margin-bottom: 12px; } /* ---- Tables (review, quote page) -------------------------------------------------------------------------------- */ .sc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 16px; font-size: 14.5px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; } .sc-table th, .sc-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--sc-border); vertical-align: top; } .sc-table tbody tr:last-child td { border-bottom: 1px solid var(--sc-border); } .sc-table tfoot tr:last-child th { border-bottom: 0; } .sc-table thead th { background: var(--sc-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--sc-muted); font-weight: 600; } .sc-table .sc-num { text-align: right; } .sc-cat-row th { background: var(--sc-surface); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-primary); font-weight: 700; padding-top: 14px; padding-bottom: 6px; border-bottom-color: transparent !important; } .sc-table tfoot th { background: var(--sc-soft); font-weight: 600; } .sc-total-row th { font-size: 17px; font-weight: 700 !important; background: var(--sc-primary-soft) !important; } .sc-layout--review .sc-step-title { margin-bottom: 20px; } .sc-nav--review { grid-column: 1; margin: 0; padding: 0; background: none; border: 0; } /* ---- Alerts, done, inline forms --------------------------------------------------------------------------------- */ .sc-alert { padding: 12px 16px; border-radius: var(--sc-radius-sm); margin-bottom: 16px; font-size: 14px; } .sc-alert--error { background: var(--sc-bad-soft); color: var(--sc-bad); border: 1px solid #fecdca; } .sc-alert--info { background: var(--sc-info-soft); color: var(--sc-info); border: 1px solid #b2ddff; } .sc-exclusions { margin: 12px 0; padding: 12px 16px; border: 1px dashed var(--sc-border-strong); border-radius: var(--sc-radius); font-size: 14px; } .sc-exclusions ul { margin: 6px 0 0; padding-left: 20px; color: var(--sc-muted); } .sc-inline { display: flex; gap: 10px; flex-wrap: wrap; } .sc-inline .sc-input { flex: 1 1 220px; width: auto; } .sc-inline--center { justify-content: center; margin-top: 18px; } .sc-form { margin-top: 14px; display: grid; gap: 10px; } .sc-form .sc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-done { text-align: center; padding: 40px 12px; } .sc-done__icon { width: 64px; height: 64px; line-height: 64px; border-radius: 50%; background: var(--sc-good-soft); color: var(--sc-good); font-size: 32px; margin: 0 auto 14px; } .sc-deposit { margin: 0 0 8px; } /* Measurement-visit time slots */ .sc-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } .sc-slot { border: 1px solid var(--sc-border-strong); background: var(--sc-surface); border-radius: var(--sc-radius-sm); padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 42px; } .sc-slot:hover { border-color: var(--sc-primary); } .sc-slot.is-selected { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; } /* ---- Service list ----------------------------------------------------------------------------------------------- */ .sc-list__title { margin-bottom: 18px; } .sc-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .sc-card-service { display: flex; flex-direction: column; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; } .sc-card-service:hover { border-color: var(--sc-primary); box-shadow: 0 8px 24px rgba(16, 24, 40, .08); color: inherit; transform: translateY(-2px); } .sc-card-service__image { aspect-ratio: 16 / 10; background: var(--sc-soft); } .sc-card-service__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .sc-card-service__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; } .sc-card-service__name { font-weight: 700; font-size: 17px; } .sc-card-service__desc { color: var(--sc-muted); font-size: 14px; } .sc-card-service__cta { color: var(--sc-primary); font-weight: 600; margin-top: auto; padding-top: 6px; } /* ---- Public quote page + my configurations ---------------------------------------------------------------------- */ .sc-quote__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .sc-quote__ref { margin: 0; font-size: 26px; } .sc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 16px; } .sc-quote .sc-panel h3 { font-size: 16px; margin: 0 0 8px; } .sc-account-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sc-border); flex-wrap: wrap; } .sc-account-row:last-child { border-bottom: 0; } /* ---- Tablet and phone: one column, collapsible estimate on top, sticky bottom bar -------------------------------- */ @media (max-width: 1023px) { .sc-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } .sc-side { position: static; order: -1; } .sc-layout--review .sc-side { order: 0; } .sc-main { padding: 24px 24px 20px; } .sc-panel { padding: 14px 16px; box-shadow: var(--sc-shadow-sm); } .sc-panel__summary { cursor: pointer; } .sc-panel__summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 2px 3px 0; border: solid var(--sc-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; } details[open] > .sc-panel__summary::after { transform: rotate(-135deg); margin-bottom: -3px; } .sc-panel__summary .sc-panel__title { flex: 1; font-size: 15px; } .sc-panel__peek { display: block; font-size: 17px; } details[open] > .sc-panel__summary .sc-panel__peek { display: none; } .sc-total { margin: 0 -16px; padding: 14px 16px; } /* Sticky Continue bar: it stays inside the card, so no negative margins reach outside the theme container (no horizontal scroll). */ .sc-nav { position: sticky; bottom: 0; z-index: 20; margin: 24px -24px -20px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--sc-surface); box-shadow: 0 -8px 16px -8px rgba(16, 24, 40, .1); } .sc-nav__total { display: block; } .sc-layout--review .sc-nav { position: static; box-shadow: none; margin: 0; padding: 0; background: none; } .sc-stepper__name { font-size: 12px; } } /* The site's chat button and "back to top" sit bottom-right; lift them above the sticky Continue bar so they never cover it. */ @media (max-width: 1023px) { body:has(.sc-app .sc-layout:not(.sc-layout--review) > .sc-main > .sc-nav) .lc-chat-button, body:has(.sc-app .sc-layout:not(.sc-layout--review) > .sc-main > .sc-nav) #back2top { bottom: calc(84px + env(safe-area-inset-bottom)) !important; } } @media (max-width: 767px) { .sc-app, .sc-list, .sc-quote { font-size: 15px; } /* The labelled stepper does not fit: show "Step 2 of 6 - Name" and a bar instead. */ .sc-stepper { display: none; } .sc-progress__label, .sc-progress__bar { display: flex; } .sc-progress { margin-bottom: 16px; } .sc-main { padding: 20px 16px 16px; border-radius: var(--sc-radius); } .sc-eyebrow { display: none; } .sc-step-head { margin-bottom: 20px; padding-bottom: 16px; } .sc-step-title { font-size: 21px; } .sc-step-media img { max-height: 260px; } /* Short questions (numbers, yes/no) still pair up on phones; everything else takes the full row. */ .sc-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .sc-question--compact .sc-number { display: flex; width: 100%; } .sc-question--compact .sc-input--num { flex: 1; width: auto; min-width: 0; } .sc-question--compact .sc-label { font-size: 14.5px; } .sc-cards, .sc-cards--two { grid-template-columns: minmax(0, 1fr); gap: 8px; } .sc-card { padding: 14px 44px 14px 14px; } .sc-card__icon { width: 36px; height: 36px; margin-bottom: 4px; } .sc-cards--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sc-product { padding: 6px 6px 12px; } .sc-product > :not(.sc-card__img):not(.sc-check-mark):not(.sc-sr) { padding: 0 6px; } .sc-product .sc-check-mark { top: 12px; right: 12px; } .sc-product .sc-card__title { font-size: 13.5px; } .sc-fields--measure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sc-form .sc-fields { grid-template-columns: minmax(0, 1fr); } .sc-grid-2 { grid-template-columns: minmax(0, 1fr); } .sc-seg { display: flex; } .sc-seg__btn { flex: 1; min-width: 0; padding: 8px 10px; } .sc-question--compact .sc-step-btn { width: 36px; } .sc-question--compact .sc-number > .sc-unit { padding: 0 8px 0 2px; font-size: 12.5px; } /* The bar must fit a 320px screen even with a long label ("Review configuration"): buttons may wrap. */ .sc-nav { gap: 8px; margin: 24px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0 0 var(--sc-radius) var(--sc-radius); } .sc-nav .sc-btn { padding: 8px 14px; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.25; text-align: center; } .sc-nav .sc-btn--ghost { flex: none; padding: 8px 12px; } .sc-nav .sc-btn--primary { flex: 0 1 auto; min-width: 0; max-width: 58%; } .sc-nav__total { min-width: 0; font-size: 15px; white-space: nowrap; } .sc-table { font-size: 13.5px; } .sc-table th, .sc-table td { padding: 8px 10px; } .sc-total-row th { font-size: 15px; } .sc-total strong { font-size: 22px; } } /* Narrow phones: the Back button shows only its arrow so the sticky bar always has room for the full total. */ @media (max-width: 479px) { .sc-nav .sc-btn--back { padding: 8px 14px; } .sc-nav .sc-btn--back .sc-btn__text { display: none; } /* The total never shrinks or gets cut off; the primary button wraps its label instead. */ .sc-nav__total { flex: 1 0 auto; font-size: 14.5px; } .sc-nav .sc-btn--primary { flex: 0 1 auto; max-width: none; padding: 8px 12px; font-size: 14px; } } /* Public quote / payment page on phones: the price table must fit its panel (it pushed "Amount" off-screen at 390px). Grid children may shrink, long names wrap, and the colspan footer labels ("Estimated total (incl. VAT)") wrap too. */ /* Answers + price side by side only where both fit; tablets stack them (the price table needs the full width). */ .sc-grid-2 > * { min-width: 0; } @media (max-width: 1199px) { .sc-grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .sc-quote .sc-panel { padding-left: 12px; padding-right: 12px; } .sc-quote .sc-table { table-layout: fixed; font-size: 13px; } .sc-quote .sc-table th, .sc-quote .sc-table td { padding: 8px 6px; overflow-wrap: anywhere; } .sc-quote .sc-table thead th { font-size: 11px; letter-spacing: .02em; } .sc-quote .sc-table thead th:nth-child(2) { width: 26%; } .sc-quote .sc-table thead th:nth-child(3) { width: 30%; } .sc-quote .sc-table tfoot th[colspan] { white-space: normal; } .sc-quote .sc-table td.sc-num, .sc-quote .sc-table tfoot th:last-child { overflow-wrap: normal; } } @media (max-width: 359px) { .sc-questions { grid-template-columns: minmax(0, 1fr); } /* Smallest phones: the price table must fit the card; long product names wrap anywhere. */ .sc-table { table-layout: fixed; font-size: 13px; } .sc-table th, .sc-table td { padding: 8px 6px; } .sc-table td:first-child, .sc-table th:first-child { overflow-wrap: anywhere; } .sc-table thead th:nth-child(2) { width: 27%; } .sc-table thead th:nth-child(3) { width: 31%; } .sc-table thead th { font-size: 11px; letter-spacing: .02em; } .sc-total-row th { font-size: 14px; } } @media (max-width: 380px) { .sc-fields--measure { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 339px) { .sc-cards--products { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .sc-spinner { animation: none; } .sc-card, .sc-card-service, .sc-seg__btn, .sc-stepper__num, .sc-progress__bar > span, .sc-check-mark, .sc-btn, .sc-input { transition: none; } .sc-card-service:hover { transform: none; } } /* ---- Theme guard ------------------------------------------------------------------------------------------------ The theme's style.css has `button:hover, button:focus { color: #fff !important }` for its own filled buttons. Our cards, switches and steppers are