/* Custom styling kept out of the generated webflow export so it survives re-exports: the draft detail view (below) and the "Leave Quote?" modal on the quote-output screen (bottom of file). The `.draft-mode` class is toggled on the details panel by QuoteView.js. */ /* Panel title ("Draft Quote for [name]") that replaces the Quote ID for drafts. */ .draft-title { font-size: 14px; font-weight: 500; } /* Reorder the draft panel to match the spec: pricing on top, then the "Created by" attribution, then the editable form below. */ .draft-mode .quote-content-wrapper { display: flex; flex-direction: column; } /* Don't let the reordered sections shrink below their content height, or the pricing items overflow onto the "Created by" line. */ .draft-mode .quote-content-wrapper > * { flex: 0 0 auto; } .draft-mode .quote-content-wrapper > .itemized-wrapper { order: 1; margin-bottom: 4px; } .draft-mode .quote-content-wrapper > .quote-created { order: 2; margin-bottom: 14px; } .draft-mode .quote-content-wrapper > [data-id="complete-quote-section"] { order: 3; } /* The read-only info block and the admin-only block are redundant in the editable draft view. !important overrides the inline display set by the JS .show()/.hide() calls. */ .draft-mode .quote-content-wrapper > [data-id="readonly-info-section"], .draft-mode .quote-content-wrapper > .admin-only-content { display: none !important; } /* Draft sidebar typography: labels and input text in Montserrat (loaded via the WebFont loader in each page's ). Native form controls don't inherit font-family, so set it explicitly on input/select/textarea. */ .draft-title, .draft-section-heading, .draft-mode [data-id="complete-quote-section"], .draft-mode [data-id="complete-quote-section"] .text-14, .draft-mode [data-id="complete-quote-section"] .w-input, .draft-mode [data-id="complete-quote-section"] .w-select, .draft-mode [data-id="complete-quote-section"] .textarea, .draft-mode [data-id="complete-quote-section"] .date-input { font-family: Montserrat, sans-serif; } /* Panel title at the top of the draft edit form ("Complete Your Quote"), above the Customer Contact section. Only appears in the draft edit view (the section is hidden otherwise). */ .draft-quote-title { font-family: Montserrat, sans-serif; font-size: 19px; font-weight: 700; color: #464646; margin: 0 0 12px; } /* Section headings inside the draft form (Customer Contact, Job Location, ...), styled to match the reference design's bold group labels. */ .draft-section-heading { font-size: 16px; font-weight: 600; color: #464646; margin-top: 20px; margin-bottom: 8px; } .draft-section-heading:first-child { margin-top: 0; } /* Footer action row: [trash] · Request Lower Price · Save Changes · Generate Quote. The sidebar footer is ~508px wide. The buttons grow (flex:1 1 auto) to fill it evenly with a uniform gap; margin:0 strips the Webflow .button-2.s.outline margins (5px/14px) that otherwise stacked on the gap and made the spacing uneven. With those margins gone the full "Request Lower Price" label fits on one row up to ~14px (measured, ~27px headroom). min-width:0 lets buttons shrink to text; each label stays on one line (white-space:nowrap); flex-wrap is kept as a fallback so an unusually narrow panel wraps instead of overflowing. */ .draft-action-buttons { display: flex; flex-wrap: wrap; flex: 1 1 auto; align-items: center; gap: 8px; } .draft-action-buttons .button, .draft-action-buttons .button-2 { flex: 1 1 auto; min-width: 0; /* !important: Webflow's .button-2.s.outline (3 classes) outranks this 2-class rule, so a plain margin:0 loses and the 14px margin-right stays, widening the row until Generate Quote wraps. Force it. */ margin: 0 !important; text-align: center; font-size: 14px; padding-left: 10px; padding-right: 10px; white-space: nowrap; line-height: 1.3; } .draft-action-buttons .delete-quote-button { flex: 0 0 auto; } /* Let the left action group grow to fill the footer width (the right group — Save & Generate PDF / PDF link — is hidden for editable drafts, so the row otherwise only used its content width and wrapped Generate Quote onto a second line). Scoped to draft mode so other quote states' footers are untouched. */ .draft-mode .side-send-bar-left { flex: 1 1 auto; } /* Anchor the date-picker calendar directly below the field. The shared .horizon-datepicker-panel is position:absolute with no offsets, so it drifts to the top of the scrollable sidebar; pin it to the bottom of its row instead. */ .draft-mode .dp-row { position: relative; } .draft-mode .dp-row [data-id="complete-date-picker-calendar-holder"] { position: absolute; top: 100%; left: 0; z-index: 50; } /* Match the reference: full-width placeholder-only inputs grouped under the section headings, with the per-field labels hidden. */ .draft-mode [data-id="complete-quote-section"] .div-block-8322 { display: block; margin-bottom: 10px; } .draft-mode [data-id="complete-quote-section"] .div-block-8323 { display: none; } .draft-mode [data-id="complete-quote-section"] .w-input, .draft-mode [data-id="complete-quote-section"] .w-select, .draft-mode [data-id="complete-quote-section"] .date-input-wrapper-2, .draft-mode [data-id="complete-quote-section"] .date-input { width: 100%; } /* Input styling to match the reference's .inputfield: 44px tall, 4px radius, 1px #ccc border, 16px text. */ .draft-mode [data-id="complete-quote-section"] .w-input, .draft-mode [data-id="complete-quote-section"] .w-select, .draft-mode [data-id="complete-quote-section"] .date-input { box-sizing: border-box; height: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; color: #161616; } .draft-mode [data-id="complete-quote-section"] .textarea { height: auto; min-height: 88px; } .draft-mode [data-id="complete-quote-section"] .date-input { display: flex; align-items: center; } /* Estimated Start Date is a compact field, not full-width. */ .draft-mode [data-id="complete-quote-section"] .dp-row .date-input-wrapper-2 { width: 240px; max-width: 100%; } /* Lead Source is the last field in the scrollable draft form. Give the section extra bottom padding so its native renders taller (44px) than the text inputs (38px), which left the two fields on this row misaligned. Pin both to the same height. */ .draft-mode [data-id="complete-quote-section"] .dq-city-state-row .text-field, .draft-mode [data-id="complete-quote-section"] .dq-city-state-row .state-select-field { height: 44px; box-sizing: border-box; } .draft-mode [data-id="complete-quote-section"] .dq-city-state-row .dq-city { flex: 1 1 auto; min-width: 0; } .draft-mode [data-id="complete-quote-section"] .dq-city-state-row .dq-state { flex: 0 0 84px; } .draft-mode [data-id="complete-quote-section"] .dq-city-state-row .dq-zip { flex: 0 0 108px; } /* Email Quote modal: stack each label above a full-width input (the section is display:flex by default, which sized the rows to their content). */ [data-id="send-quote-modal"] .modal-content-section-3 { display: block; max-width: 430px; margin: 0 auto; text-align: left; } [data-id="send-quote-modal"] .modal-content-section-3 > .text-18-5 { text-align: center; margin-bottom: 6px; } [data-id="send-quote-modal"] .div-block-8322 { display: block; width: 100%; margin-bottom: 14px; } [data-id="send-quote-modal"] .div-block-8323 { width: auto; margin-bottom: 6px; } [data-id="send-quote-modal"] .div-block-8699, [data-id="send-quote-modal"] .text-field, [data-id="send-quote-modal"] .email-tags-input, [data-id="send-quote-modal"] .textarea { width: 100%; box-sizing: border-box; } [data-id="send-quote-modal"] [data-id="message-textarea"] { min-height: 120px; } /* Quote History: hover color for the yellow-tinted rows (pending + drafts). Their base tint is set as an inline style on the , so the hover needs !important to override it. */ tr.qh-yellow-row:hover { background-color: #F6EED8 !important; } /* Quote History unified view: the "Draft" status tag. Inherits the base .status-tag pill shape (border-radius, uppercase, min-width/height) and only swaps the fill/border/text to a white outlined pill that reads cleanly against the pale-yellow draft row tint. */ .status-tag.draft { color: #6c7c94; background-color: #fff; border: 1px solid #d8d8d8; } .status-tag.draft:hover { background-color: #fff; } /* Quote-detail top bar: enlarge the Duplicate icon to match the X height. */ .quote-top-bar-actions [data-id="duplicate-button"] .button-icon { width: 24px; height: 24px; } /* Keep the Duplicate icon from crowding the X. */ .quote-top-bar-actions { display: flex; align-items: center; gap: 14px; } /* Loading layer shown over the detail view while a draft is being generated. */ .right-side-bar-holder { position: relative; } .detail-processing-overlay { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255, 255, 255, 0.9); } .detail-processing-overlay.hidden { display: none; } /* Save Changes stays disabled until the user edits a field. */ [data-id="save-changes-button"].disabled { opacity: 0.45; pointer-events: none; } /* "Leave Quote?" confirmation modal (quote-output screen). The base overlay mirrors the webflow modal classes (e.g. .request-reason-modal), which each carry their own display:none + fixed overlay; a new class needs its own. */ .leave-quote-modal { z-index: 995; cursor: pointer; background-color: #00000080; padding-top: 80px; display: none; position: fixed; inset: 0%; } /* Keep the dialog compact — the shared .modal-content-section forces a 200px min-height that leaves a large empty gap for this short message. */ .leave-quote-modal .modal-content-section { min-height: auto; } /* Red alert icon next to the heading. Buttons reuse the shared .button (solid red) and .button-2.outline classes, so only the icon needs custom styling. */ .leave-quote-heading { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } .leave-quote-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #c11f25; color: #fff; font-weight: 700; line-height: 26px; text-align: center; } /* Footer action bar: white with a subtle top divider instead of the grey fill, so the (now strongly styled) buttons read cleanly. */ .quote-output-container .generate-quote-wrapper { background-color: #fff; border-top: 1px solid #eaeaea; } /* Quick Calculator dropdowns: enterprise-customers.webflow.css paints every .w-select grey (#f3f3f3); keep the select fields white to match the Quote Generator. */ .select-field.w-select { background-color: #fff; } /* Quote-output action bar on mobile: the four buttons (Edit, Request Lower Price, Save Draft, Generate Quote) don't fit in one row, so lay them out as a 2x2 grid. The base .button has min-width:220px, which is what overflows. Colors, borders and corner radius stay the webflow originals; only the layout and a fixed height (so a wrapped label doesn't make its row taller) change. */ @media (max-width: 767px) { /* Row 1: Edit (narrow) + Request Lower Price + Save Draft. Row 2: Generate Quote full width. */ .qo-actions { display: grid; grid-template-columns: 82px 1fr 1fr; gap: 10px; width: 100%; } /* Flatten the wrappers so every button is a direct grid item. */ .qo-actions .div-block-8325, .qo-actions .div-block-8700 { display: contents; } .qo-actions .button, .qo-actions .button-2 { box-sizing: border-box; min-width: 0; /* width:100% (not auto) so the outline .button-2 buttons fill their grid cell like the solid .button ones — otherwise they size to content and the columns look uneven. */ width: 100%; height: 56px; margin: 0; padding: 6px 8px; border: 1px solid #c11f25; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: normal; line-height: 1.15; overflow: hidden; } /* Outline buttons (Edit, Request Lower Price, Save Draft). */ .qo-actions .button.outline, .qo-actions .button-2.outline { background: #fff; color: #c11f25; } /* Generate Quote: solid red, spans the full width on its own row. */ .qo-actions .button.w-button:not(.outline) { grid-column: 1 / -1; background: #c11f25; color: #fff; } } /* --------------------------------------------------------------------------- Increase Price (quote-output screen) A pencil beside each standard line-item price opens the "Increase Price" modal. Lowering a price still goes through Request Lower Price, so the modal floors any new value at the system price. --------------------------------------------------------------------------- */ /* Price cell: pencil sits to the left of the number, both on one line. The cell is right-aligned, so the row is inline-flex to hug its content. */ .qo-price-line { display: inline-flex; align-items: center; gap: 10px; } .qo-price-edit { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; background: #f1f1f1; color: #c11f25; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; user-select: none; /* The glyph points right by default; mirror it to match the pencil in the rest of the app. */ transform: scaleX(-1); } .qo-price-edit:hover { background: #e4e4e4; } /* Modal overlay. The shared webflow modal classes each carry their own display:none + fixed overlay, so a new modal needs its own (see .leave-quote-modal above). */ .increase-price-modal { z-index: 995; cursor: pointer; background-color: #00000080; padding-top: 80px; display: none; position: fixed; inset: 0%; } /* The shared .modal-content-section forces a 200px min-height; this dialog sizes to its own content. */ .increase-price-modal .modal-content-section { min-height: auto; } .increase-price-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; text-align: left; } /* The mockup sets the title apart from the item name/size pair. */ .increase-price-heading [data-id="modal-item-name"] { margin-top: 8px; } .increase-price-options { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; } /* Option row: radio, label, then the value/input pushed to the right edge. */ .increase-price-option { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 56px; padding: 0 16px; border: 1px solid #e4e4e4; border-radius: 8px; background: #fff; cursor: pointer; } .increase-price-option.selected { border-color: #b0b0b0; background: #f1f1f1; } .increase-price-option .increase-price-value, .increase-price-option .increase-price-input-wrapper { margin-left: auto; } .increase-price-radio { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid #b9b9b9; border-radius: 50%; } .increase-price-option.selected .increase-price-radio { border-color: #c11f25; } .increase-price-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; } .increase-price-option.selected .increase-price-dot { background: #c11f25; } .increase-price-input-wrapper { display: flex; align-items: center; gap: 6px; } .increase-price-currency { color: #8a8a8a; font-size: 16px; } .increase-price-input { box-sizing: border-box; width: 84px; margin: 0; padding: 8px 10px; border: 1px solid #e4e4e4; border-radius: 6px; background: #fff; color: #a8a8a8; font-family: inherit; font-size: 16px; font-weight: 600; text-align: right; } .increase-price-option.selected .increase-price-input { border-color: #b9b9b9; color: #1c1c1c; } .increase-price-input:focus { outline: none; } /* Invalid input keeps the red border regardless of which row is selected. */ .increase-price-input.invalid, .increase-price-option.selected .increase-price-input.invalid { border-color: #c11f25; } .increase-price-error { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 10px; color: #c11f25; font-weight: 500; text-align: left; } .increase-price-error.hidden { display: none; } .increase-price-error-icon { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #c11f25; color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; } /* --------------------------------------------------------------------------- Increase Price: match the approved mockup rather than the shared webflow modal shell. The shell is built for the wide confirmation dialogs used elsewhere on this page (600px, centred text, a 56px drag bar and a 40px close image); this dialog is a narrow, left-aligned card. All of it is scoped to .increase-price-modal so the other modals are untouched. --------------------------------------------------------------------------- */ /* Card: narrower and more rounded than the shell default. */ .increase-price-modal .modal-container-question-2 { width: 520px; max-width: 100%; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24); overflow: hidden; } .increase-price-modal .form-wrapper-modal-6 { border-bottom-right-radius: 14px; border-bottom-left-radius: 14px; } /* Collapse the drag bar: the mockup has no top bar, just a close control floating in the header's top-right corner. The bar keeps position:relative so the absolutely-positioned close still anchors to the top of the card, but it contributes no height of its own -- otherwise it stacks ~30px on top of the header's own padding and pushes the title down. */ .increase-price-modal .modal-top-bar { min-height: 0; height: 0; padding: 0; cursor: default; } .increase-price-modal .modal-top-bar .customer-service-label { display: none; } /* Close control: a small, quiet glyph instead of the 40px image. */ .increase-price-modal .close-modal-251 { width: 22px; height: 22px; inset: 18px 18px auto auto; opacity: 0.55; } .increase-price-modal .close-modal-251:hover { opacity: 0.9; } /* Body: the shell reserves 200px and pads for centred content. */ .increase-price-modal .modal-content-section { min-height: auto; padding: 26px 30px 8px; border-bottom-width: 0; text-align: left; /* The shared .center modifier makes this a flex column with align-items: center, which shrink-wraps each child and parks it in the middle -- the header's own text-align has no effect while its box is centred. Stretch the children so the header fills the card and aligns left like the mockup. */ align-items: stretch; } .increase-price-heading { width: 100%; } /* Footer: tighter than the shell, buttons centred with the mockup's spacing. */ .increase-price-modal .button-bar { gap: 12px; padding: 22px 30px 24px; } .increase-price-modal .button-bar .button, .increase-price-modal .button-bar .button-2 { margin: 0; padding: 13px 30px; border-radius: 6px; font-size: 15px; font-weight: 600; } /* The shared .button paints its label #ffffffdb -- white at 86% alpha, which reads grey on the red fill. The mockup's label is solid white. */ .increase-price-modal .button-bar [data-id="save-price-button"] { color: #fff; background-color: #c11f25; border: 1px solid #c11f25; } /* Disabled Save Price. Without this the button keeps its solid red fill and reads as clickable while the handler refuses to act -- the same silent no-op the template guard exists to prevent. */ .increase-price-modal .button-bar .button.disabled, .increase-price-modal .button-bar [data-id="save-price-button"].disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; } .increase-price-modal .button-bar [data-id="increase-price-cancel"] { color: #c11f25; background-color: #fff; border: 1px solid #c11f25; } /* Type and spacing pinned to the mockup. The shared .text-* classes are close on size but differ on weight and colour, and the price/input sizes differ, so each is set explicitly here rather than inherited. */ /* Header: 18/600 title, 16/500 item name, 14/400 grey size line. */ .increase-price-modal .increase-price-heading .text-18, .increase-price-modal .increase-price-heading .text-18 strong { font-size: 18px; font-weight: 600; line-height: 24px; color: #1c1c1c; } .increase-price-modal .increase-price-heading [data-id="modal-item-name"] { font-size: 16px; font-weight: 500; line-height: 22px; color: #1c1c1c; } .increase-price-modal .increase-price-heading [data-id="modal-item-size"] { font-size: 14px; font-weight: 400; line-height: 20px; color: #5a5a5a; } /* Option rows: 14px labels, 17px values. "New price" carries the heavier weight because it is the actionable choice. */ .increase-price-modal .increase-price-option .text-15 { font-size: 14px; font-weight: 400; line-height: 20px; color: #1c1c1c; } .increase-price-modal .increase-price-option .text-15.med { font-weight: 600; } .increase-price-modal .increase-price-value { font-size: 17px; font-weight: 500; line-height: 22px; color: #1c1c1c; } .increase-price-modal .increase-price-currency { font-size: 17px; color: #8a8a8a; } .increase-price-modal .increase-price-input { width: 74px; padding: 8px 10px; font-size: 17px; font-weight: 600; line-height: 22px; } /* Validation message sits below the rows and stays quieter than the labels. */ .increase-price-modal .increase-price-error { margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 16px; } .increase-price-modal .increase-price-error .text-14 { font-size: 11.5px; font-weight: 500; line-height: 16px; color: #c11f25; } .increase-price-modal .increase-price-error-icon { font-size: 9px; font-weight: 700; }