/** * Summit 3D — Forminator form styles. * Theme tokens are oklch (see src/styles.css) — use var(--token) directly, NOT hsl(var(--token)). */ /* ── Shared ── */ .summit-form-wrap[data-summit-form] .forminator-row { margin-bottom: 0.75rem; } .summit-form-wrap[data-summit-form] .forminator-label { font-size: 0.875rem; font-weight: 500; line-height: 1.25; margin-bottom: 0.375rem; color: var(--foreground, #101820); } .summit-form-wrap[data-summit-form] .forminator-input, .summit-form-wrap[data-summit-form] .forminator-select, .summit-form-wrap[data-summit-form] .forminator-textarea, .summit-form-wrap[data-summit-form] select.forminator-select--field, .summit-form-wrap[data-summit-form] input.forminator-input--field, .summit-form-wrap[data-summit-form] textarea.forminator-textarea--field { border-radius: 0.375rem !important; border: 1px solid var(--input, #e2e8f0) !important; background: var(--background, #fff) !important; min-height: 2.5rem; font-size: 1rem; width: 100%; box-shadow: none !important; } .summit-form-wrap[data-summit-form] .forminator-select--field { appearance: none; 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='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 1rem !important; padding-right: 2.25rem !important; } .summit-form-wrap[data-summit-form] .select2-container--default .select2-selection--single { border-radius: 0.375rem !important; border: 1px solid var(--input, #e2e8f0) !important; background: var(--card, #fff) !important; min-height: 2.5rem !important; padding: 0.375rem 0.5rem !important; } /* Select2 dropdown panels append to — must NOT be scoped under .summit-form-wrap */ .select2-dropdown.summit-form-select2-dropdown { background-color: var(--card, #ffffff) !important; border: 1px solid var(--border, #e2e8f0) !important; border-radius: 0.5rem !important; box-shadow: 0 12px 40px rgba(16, 24, 32, 0.18) !important; z-index: 100001 !important; overflow: hidden; } .select2-dropdown.summit-form-select2-dropdown .select2-results__options { background-color: var(--card, #ffffff) !important; } .select2-dropdown.summit-form-select2-dropdown .select2-results__option { background-color: var(--card, #ffffff) !important; color: var(--foreground, #101820) !important; padding: 0.5rem 0.75rem !important; } .select2-dropdown.summit-form-select2-dropdown .select2-results__option--highlighted, .select2-dropdown.summit-form-select2-dropdown .select2-results__option--highlighted[aria-selected] { background-color: color-mix(in oklch, var(--teal, #20e0d0) 18%, var(--card, #fff)) !important; color: var(--foreground, #101820) !important; } .select2-dropdown.summit-form-select2-dropdown .select2-search--dropdown { background: var(--card, #fff) !important; padding: 0.5rem !important; } .select2-dropdown.summit-form-select2-dropdown .select2-search__field { background: var(--background, #fff) !important; border: 1px solid var(--input, #e2e8f0) !important; border-radius: 0.375rem !important; } .summit-form-wrap[data-summit-form="quote"] .forminator-label { font-size: 0.75rem; } /* ── Submit buttons ── */ .summit-form-wrap[data-summit-form="upload"] .forminator-button-submit, .summit-form-wrap[data-summit-form="wizard"] .forminator-button-submit { width: 100%; min-height: 2.75rem; border-radius: 9999px !important; background: var(--charcoal, #101820) !important; color: var(--ivory, #f7f2ea) !important; font-weight: 600 !important; border: 0 !important; box-shadow: none !important; } /* ── STL/OBJ upload dropzone (Form 1 + Form 2 calculator) ── */ .summit-form-wrap[data-summit-form="upload"] #upload-file, .summit-form-wrap[data-summit-form="upload"] .forminator-field-upload, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file, .summit-form-wrap[data-summit-form="calculator"] .forminator-field-upload { position: relative; min-height: 10rem; } .summit-form-wrap[data-summit-form="upload"] #upload-file .forminator-field, .summit-form-wrap[data-summit-form="upload"] .forminator-field-upload .forminator-field, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file .forminator-field, .summit-form-wrap[data-summit-form="calculator"] .forminator-field-upload .forminator-field { position: relative; border-radius: 1rem; border: 2px dashed var(--border, #e2e8f0); background: color-mix(in oklch, var(--sand, #e8d8c3) 35%, transparent); padding: 1.5rem; text-align: center; min-height: 10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color 0.2s ease, background 0.2s ease; cursor: pointer; } .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-active .forminator-field, .summit-form-wrap[data-summit-form="upload"] .forminator-field-upload.summit-dropzone-active .forminator-field, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-active .forminator-field, .summit-form-wrap[data-summit-form="calculator"] .forminator-field-upload.summit-dropzone-active .forminator-field { border-color: var(--teal, #20e0d0); background: color-mix(in oklch, var(--teal, #20e0d0) 8%, var(--card, #fff)); } .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-ready .forminator-label, .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-ready .forminator-file-upload, .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-ready .forminator-button-upload, .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-ready .forminator-button-delete, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-ready .forminator-label, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-ready .forminator-file-upload, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-ready .forminator-button-upload, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-ready .forminator-button-delete { display: none !important; } .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-ready .summit-dropzone-file-input, .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-ready input[type="file"], .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-ready .summit-dropzone-file-input, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-ready input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; } .summit-form-wrap[data-summit-form="upload"] .summit-upload-dropzone-ui, .summit-form-wrap[data-summit-form="calculator"] .summit-upload-dropzone-ui { pointer-events: none; position: relative; z-index: 1; } .summit-form-wrap[data-summit-form="upload"] .summit-upload-dropzone-ui svg, .summit-form-wrap[data-summit-form="calculator"] .summit-upload-dropzone-ui svg { margin: 0 auto; color: var(--teal, #20e0d0); } .summit-form-wrap[data-summit-form="upload"] .summit-color-row { display: flex; align-items: center; gap: 0.5rem; } .summit-form-wrap[data-summit-form="upload"] .summit-color-picker { height: 2.5rem; width: 3rem; flex-shrink: 0; cursor: pointer; border-radius: 0.375rem; border: 1px solid var(--input, #e2e8f0); padding: 0.25rem; background: var(--background, #fff); } .summit-form-wrap[data-summit-form="upload"] #text-color-1 .forminator-description, .summit-form-wrap[data-summit-form="upload"] #text-color-2 .forminator-description, .summit-form-wrap[data-summit-form="upload"] #text-color-3 .forminator-description, .summit-form-wrap[data-summit-form="upload"] #text-color-4 .forminator-description { display: none !important; } /* ── Form 2: Calculator ── */ @media (min-width: 640px) { .summit-calculator-fields .forminator-row:not(.forminator-hidden) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .summit-calculator-fields .forminator-col-12 { grid-column: 1 / -1; } } .summit-form-wrap[data-summit-form="calculator"] .forminator-field-slider .forminator-slider-amount, .summit-form-wrap[data-summit-form="calculator"] .forminator-field-slider .forminator-slider-value { color: var(--teal, #20e0d0); font-weight: 600; } .summit-form-wrap[data-summit-form="calculator"] .forminator-button-submit { display: none !important; } .summit-form-wrap[data-summit-form="calculator"] .forminator-field-hidden { display: none !important; } /* ── Form 3: Wizard pills + radio cards ── */ .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps { display: flex !important; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; margin-bottom: 1.5rem; padding: 0; border: 0; background: transparent; list-style: none; } .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps > *, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .summit-wizard-pill, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps [role="tab"], .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .forminator-step, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps button { flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0.75rem !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 0.5rem 0.875rem !important; border-radius: 9999px !important; border: 1px solid var(--border, #e2e8f0) !important; background: var(--card, #fff) !important; color: var(--muted-foreground, #64748b) !important; box-shadow: none !important; min-width: 0; width: auto !important; height: auto !important; cursor: default; } .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .forminator-step-dot, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .forminator-pagination-dot, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .forminator-step-number { display: none !important; } .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .forminator-current, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps [role="tab"][aria-selected="true"], .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-steps .summit-wizard-pill.forminator-current { background: var(--charcoal, #101820) !important; color: var(--ivory, #f7f2ea) !important; border-color: var(--charcoal, #101820) !important; } .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; gap: 1rem; } .summit-form-wrap[data-summit-form="wizard"] .forminator-button-back { border-radius: 0 !important; background: transparent !important; border: 0 !important; color: var(--teal, #20e0d0) !important; font-weight: 600 !important; box-shadow: none !important; padding: 0 !important; min-height: auto !important; } .summit-form-wrap[data-summit-form="wizard"] .forminator-button-next { border-radius: 9999px !important; background: var(--charcoal, #101820) !important; color: var(--ivory, #f7f2ea) !important; border: 0 !important; font-weight: 600 !important; min-height: 2.75rem !important; padding: 0 1.5rem !important; box-shadow: none !important; } .summit-form-wrap[data-summit-form="wizard"] .forminator-field-radio .forminator-field { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .summit-form-wrap[data-summit-form="wizard"] .forminator-field-radio .forminator-field { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .summit-form-wrap[data-summit-form="wizard"] .forminator-field-radio .forminator-label { grid-column: 1 / -1; } .summit-form-wrap[data-summit-form="wizard"] label.forminator-radio { position: relative; display: flex !important; align-items: center; justify-content: flex-start; margin: 0 !important; padding: 1.25rem 1rem !important; border-radius: 1rem !important; border: 1px solid var(--border, #e2e8f0) !important; background: var(--card, #fff) !important; cursor: pointer; font-weight: 600 !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; box-shadow: none !important; } .summit-form-wrap[data-summit-form="wizard"] label.forminator-radio input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; } .summit-form-wrap[data-summit-form="wizard"] label.forminator-radio .forminator-radio-bullet { display: none !important; } .summit-form-wrap[data-summit-form="wizard"] label.forminator-radio .forminator-radio-label { font-weight: 600; color: inherit; } .summit-form-wrap[data-summit-form="wizard"] label.forminator-radio.summit-radio-checked, .summit-form-wrap[data-summit-form="wizard"] label.forminator-radio:has(input:checked) { background: var(--charcoal, #101820) !important; border-color: var(--charcoal, #101820) !important; color: var(--ivory, #f7f2ea) !important; } .summit-file-error, .summit-field-error { margin-top: 0.5rem; font-size: 0.875rem; color: #b42318; } .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-dropzone-error .forminator-field, .summit-form-wrap[data-summit-form="upload"] #upload-file.summit-field-has-error .forminator-field, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-dropzone-error .forminator-field, .summit-form-wrap[data-summit-form="calculator"] #upload-estimate-file.summit-field-has-error .forminator-field { border-color: #b42318 !important; background: color-mix(in oklch, #b42318 6%, var(--card, #fff)) !important; } .summit-wizard-review-grid .summit-review-item { padding: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border, #e2e8f0); background: color-mix(in oklch, var(--sand, #e8d8c3) 35%, transparent); } .summit-wizard-review-grid .summit-review-item .label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground, #64748b); margin-bottom: 0.25rem; } .summit-wizard-review-grid .summit-review-item .value { font-weight: 600; color: var(--charcoal, #101820); } .summit-wizard-review-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .summit-wizard-btn-cart { display: inline-flex !important; align-items: center; justify-content: center; border-radius: 9999px !important; background: var(--charcoal, #101820) !important; color: var(--ivory, #f7f2ea) !important; border: 0 !important; min-height: 2.5rem; padding: 0 1.25rem !important; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .summit-wizard-btn-submit { display: inline-flex !important; align-items: center; justify-content: center; border-radius: 9999px !important; background: var(--card, #fff) !important; color: var(--charcoal, #101820) !important; border: 1px solid var(--border, #e2e8f0) !important; min-height: 2.5rem; padding: 0 1.25rem !important; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination:has(#summit-wizard-review) .forminator-pagination-footer .forminator-button-submit, .summit-form-wrap[data-summit-form="wizard"] .forminator-pagination:has(#summit-wizard-review) .forminator-pagination-submit { display: none !important; } /* ── Form 4: Quote card ── */ .summit-form-wrap[data-summit-form="quote"] { border-radius: 1.5rem; border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff); padding: 1.5rem; box-shadow: 0 30px 80px -40px rgba(16, 24, 32, 0.2); } @media (min-width: 640px) { .summit-form-wrap[data-summit-form="quote"] .forminator-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .summit-form-wrap[data-summit-form="quote"] .forminator-col-12 { grid-column: 1 / -1; } } .summit-form-wrap[data-summit-form="quote"] .forminator-button-submit { width: auto; min-height: 2.75rem; margin: 0.5rem auto 0; display: block !important; visibility: visible !important; opacity: 1 !important; border-radius: 0 !important; background: transparent !important; color: var(--charcoal, #101820) !important; font-weight: 700 !important; font-size: 1rem !important; border: 0 !important; box-shadow: none !important; padding: 0.5rem 1rem !important; } .summit-form-wrap[data-summit-form="quote"] .forminator-button-submit:hover { background: transparent !important; text-decoration: underline; } /* ── Form 5: Footer newsletter ── */ .summit-form-wrap[data-summit-form="newsletter"] { margin: 0; } .summit-form-wrap[data-summit-form="newsletter"] form.forminator-custom-form { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; align-items: flex-start; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-row { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-footer, .summit-form-wrap[data-summit-form="newsletter"] .forminator-pagination-footer { flex: 0 0 auto; margin: 0; padding: 0; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-col { margin: 0; padding: 0; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-label { display: none !important; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-field-email input, .summit-form-wrap[data-summit-form="newsletter"] #email-1 input, .summit-form-wrap[data-summit-form="newsletter"] input.forminator-email--field { height: 2.5rem; width: 100%; border-radius: 0.375rem; border: 1px solid rgba(247, 242, 234, 0.2) !important; background: rgba(247, 242, 234, 0.08) !important; color: var(--foreground, #101820) !important; -webkit-text-fill-color: var(--foreground, #101820) !important; caret-color: var(--foreground, #101820) !important; padding: 0.5rem 0.75rem; font-size: 1rem; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-field-email input:focus, .summit-form-wrap[data-summit-form="newsletter"] #email-1 input:focus, .summit-form-wrap[data-summit-form="newsletter"] input.forminator-email--field:focus { color: var(--foreground, #101820) !important; -webkit-text-fill-color: var(--foreground, #101820) !important; caret-color: var(--foreground, #101820) !important; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-field-email input::placeholder, .summit-form-wrap[data-summit-form="newsletter"] input.forminator-email--field::placeholder { color: var(--muted-foreground, #64748b) !important; -webkit-text-fill-color: var(--muted-foreground, #64748b) !important; opacity: 1; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-button-submit { height: 2.5rem; min-height: 2.5rem; border-radius: 9999px !important; background: var(--teal, #20e0d0) !important; color: var(--charcoal, #101820) !important; font-weight: 600 !important; border: 0 !important; box-shadow: none !important; padding: 0 1rem !important; white-space: nowrap; } .summit-form-wrap[data-summit-form="newsletter"] .forminator-response-message { margin-top: 0.5rem; font-size: 0.875rem; color: #86efac; } /* ── Wizard: native reference image filename display ── */ .summit-form-wrap[data-summit-form="wizard"] #upload-reference .summit-native-file-label, .summit-form-wrap[data-summit-form="wizard"] #upload-reference [data-empty-text], .summit-form-wrap[data-summit-form="wizard"] #upload-reference .forminator-file-name { display: inline-block; margin-left: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground, #64748b); vertical-align: middle; } .summit-form-wrap[data-summit-form="wizard"] #upload-reference .forminator-file-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } span.forminator-select-dropdown.forminator-custom-form-363.forminator-dropdown--default.forminator-select-dropdown--below { background-color: antiquewhite !important; } .forminator-select-dropdown .forminator-custom-form-363 .forminator-dropdown--default .forminator-select-dropdown--below{ background-color: antiquewhite !important; } .forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results { background-color: antiquewhite !important; } .summit-form-wrap.summit-form-upload-quote { background-color: antiquewhite !important; padding: 1.5rem !important; border-radius:5px; } form#forminator-module-363 { background-color: aliceblue; padding: 2rem; border-radius: 10px; }