/* ========================================================= JET SUPPLY — QUOTE WIZARD Full-page progressive wizard form. Step hiding gated behind .js-wizard on . ========================================================= */ /* ---------- Page chrome ---------- */ .quote-page { background: var(--c-bg); padding-block: var(--s-10) var(--s-11); } .quote-page__inner { display: flex; flex-direction: column; gap: var(--s-7); } .quote-page__title { font-family: var(--ff-serif); font-size: var(--fs-h1); letter-spacing: var(--tr-snug); line-height: var(--lh-tight); color: var(--c-text); margin: 0; } .quote-page__intro { font-size: var(--fs-h5); color: var(--c-text-soft); max-width: 38ch; margin: 0; } .quote-page__urgent { font-size: var(--fs-small); color: var(--c-text-soft); margin: 0; padding: var(--s-3) var(--s-4); border-left: var(--bw-hair) solid var(--c-silver); background: var(--c-paper); } .quote-page__urgent a { color: var(--c-text); text-decoration: underline; text-underline-offset: 0.2em; } .quote-page__reassurance { list-style: none; margin: 0; padding: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); border-top: var(--bw-hair) solid var(--c-rule); font-size: var(--fs-micro); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-text-soft); } .quote-page__reassurance li::before { content: "· "; color: var(--c-silver); } .quote-page__reassurance li:first-child::before { content: none; } /* ---------- Two-column desktop layout (intro aside | form) ---------- */ /* Below 1024px both columns stack in source order (intro copy, then the wizard, then the reassurance list) — identical to the original flow. */ .quote-page__aside, .quote-page__main { display: flex; flex-direction: column; gap: var(--s-7); } @media (min-width: 1024px) { .quote-page__inner { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); column-gap: var(--s-9); align-items: start; } /* Keep the intro + urgent-call pinned while the form column scrolls. */ .quote-page__aside { position: sticky; top: var(--s-9); } } /* ---------- Form root — Concierge-note paper card ---------- */ .quote-wizard__form { position: relative; display: flex; flex-direction: column; gap: var(--s-7); margin-top: var(--s-5); background: var(--c-paper); border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-lg); box-shadow: var(--sh-base); padding: var(--s-8); } /* Pewter top accent — matches the hero Quick Quote + embedded-quote / contact cards. 2px raw: deliberate decorative one-off. */ .quote-wizard__form::before { content: ""; position: absolute; top: 0; left: var(--s-8); right: var(--s-8); height: 2px; background: var(--c-silver); } /* ---------- Progress indicator ---------- */ /* No top rule — the card now provides the container, so the stepper sits directly under the accent bar. */ .quote-wizard__progress { padding-top: 0; } .quote-wizard__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } .quote-wizard__step-item { display: flex; align-items: center; gap: var(--s-3); color: var(--c-text-soft); font-size: var(--fs-caption); letter-spacing: var(--tr-luxe); text-transform: uppercase; font-weight: var(--fw-medium); } .quote-wizard__step-dot { display: inline-block; width: var(--s-3); height: var(--s-3); border-radius: 50%; background: transparent; border: var(--bw-hair) solid var(--c-rule); flex-shrink: 0; transition: background var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet); } .quote-wizard__step-item.is-active { color: var(--c-text); } .quote-wizard__step-item.is-active .quote-wizard__step-dot { background: var(--c-silver); border-color: var(--c-silver); } .quote-wizard__step-item.is-complete .quote-wizard__step-dot { background: var(--c-silver-dim); border-color: var(--c-silver-dim); } .quote-wizard__step-label { display: inline-flex; align-items: baseline; gap: var(--s-2); } .quote-wizard__step-index { color: var(--c-silver); font-variant-numeric: tabular-nums; } /* ---------- Step fieldsets ---------- */ .quote-wizard__step { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-6); } /* Server-rendered default: all steps visible (no-JS fallback). With .js-wizard on , only the active step is shown. */ .js-wizard .quote-wizard__step { display: none; } .js-wizard .quote-wizard__step.is-active { display: flex; } .js-wizard .quote-wizard__fallback { display: none; } /* ---------- Trip-type conditional show/hide (JS-only) ---------- */ /* Server render leaves every [data-show-on] field visible so the no-JS fallback shows the union of all trip-type fields. With JS, the wizard sets data-trip="" on the form root and only matching [data-show-on~=""] elements remain visible. Reveal rules are per-element-type so each element keeps its natural display: rows stay `display: grid` (1fr 1fr columns), fields stay `display: flex` (label + input column), legs container stays `display: flex` (column stack). Using a generic `display: revert` reverts to the UA default (block) and breaks the row grid. */ .js-wizard [data-show-on] { display: none; } .js-wizard .quote-wizard__form[data-trip="one-way"] .quote-wizard__row[data-show-on~="one-way"], .js-wizard .quote-wizard__form[data-trip="round-trip"] .quote-wizard__row[data-show-on~="round-trip"], .js-wizard .quote-wizard__form[data-trip="multi-leg"] .quote-wizard__row[data-show-on~="multi-leg"] { display: grid; } .js-wizard .quote-wizard__form[data-trip="one-way"] .quote-wizard__field[data-show-on~="one-way"], .js-wizard .quote-wizard__form[data-trip="round-trip"] .quote-wizard__field[data-show-on~="round-trip"], .js-wizard .quote-wizard__form[data-trip="multi-leg"] .quote-wizard__field[data-show-on~="multi-leg"] { display: flex; } .js-wizard .quote-wizard__form[data-trip="multi-leg"] .quote-wizard__legs[data-show-on~="multi-leg"] { display: flex; } /* ---------- Multi-leg repeater ---------- */ .quote-wizard__legs { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--c-bg); /* ivory — contrasts against the paper form card */ border-left: var(--bw-hair) solid var(--c-silver); } .quote-wizard__legs-caption { font-size: var(--fs-caption); color: var(--c-text-soft); margin: 0; } .quote-wizard__legs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); counter-reset: leg 1; /* first leg is the main from/to/depart row */ } .quote-wizard__leg { counter-increment: leg; position: relative; padding: var(--s-3) 0; border-top: var(--bw-hair) solid var(--c-rule); } .quote-wizard__leg::before { content: counter(leg) "."; position: absolute; top: var(--s-4); left: calc(-1 * var(--s-5)); color: var(--c-silver); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; } .quote-wizard__add-leg { align-self: flex-start; background: transparent; border: var(--bw-hair) dashed var(--c-rule); padding: var(--s-2) var(--s-4); font-family: var(--ff-sans); font-size: var(--fs-small); color: var(--c-text-soft); cursor: pointer; letter-spacing: var(--tr-luxe); text-transform: uppercase; transition: color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet); } .quote-wizard__add-leg:hover, .quote-wizard__add-leg:focus-visible { color: var(--c-text); border-color: var(--c-silver); } .quote-wizard__leg-actions { align-items: flex-end; justify-content: flex-end; } .quote-wizard__remove-leg { background: transparent; border: var(--bw-hair) solid var(--c-rule); padding: var(--s-2) var(--s-4); font-family: var(--ff-sans); font-size: var(--fs-caption); color: var(--c-silver-dim); cursor: pointer; letter-spacing: var(--tr-luxe); text-transform: uppercase; align-self: flex-end; transition: color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet); } .quote-wizard__remove-leg:hover, .quote-wizard__remove-leg:focus-visible { color: var(--c-error); border-color: var(--c-error); } /* ---------- Rows + fields ---------- */ .quote-wizard__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); } .quote-wizard__field { display: flex; flex-direction: column; gap: var(--s-2); position: relative; } .quote-wizard__field--full { grid-column: 1 / -1; } .quote-wizard__label { font-family: var(--ff-sans); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-ink-soft); /* WCAG AA — was --c-silver-dim (~3.5:1 on ivory). Interactive labels need 4.5:1. 06-05 fix. */ } .quote-wizard__hint { display: block; margin-top: var(--s-1); font-size: var(--fs-micro); color: var(--c-text-soft); font-style: italic; line-height: var(--lh-snug); } .quote-wizard__input { width: 100%; background: transparent; border: 0; border-bottom: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-none); padding: var(--s-3) 0; color: var(--c-text); font-family: var(--ff-sans); font-size: var(--fs-body); line-height: var(--lh-snug); transition: border-bottom-color var(--dur-fast) var(--ease-quiet); } .quote-wizard__input:focus { outline: none; border-bottom-color: var(--c-silver); } .quote-wizard__input:focus-visible { outline: var(--bw-hair) solid var(--c-silver); outline-offset: var(--s-1); } .quote-wizard__input::placeholder { color: var(--c-silver-dim); } .quote-wizard__select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-silver) 50%), linear-gradient(135deg, var(--c-silver) 50%, transparent 50%); background-position: calc(100% - var(--s-4)) 50%, calc(100% - var(--s-3)) 50%; background-size: var(--s-1) var(--s-1), var(--s-1) var(--s-1); background-repeat: no-repeat; padding-right: var(--s-6); } .quote-wizard__input--textarea { resize: vertical; min-height: 4em; } /* ---------- Error states ---------- */ .quote-wizard__error { color: var(--c-error); font-size: var(--fs-small); margin: 0; padding-bottom: var(--s-3); border-bottom: var(--bw-hair) solid var(--c-rule); } .quote-wizard__step-errors { color: var(--c-error); font-size: var(--fs-small); margin: 0; } .quote-wizard__field.is-error .quote-wizard__input { border-bottom-color: var(--c-error); } /* Honeypot — make absolutely sure step-hide does not affect off-screen positioning. */ body .contact-form__honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ---------- Typeahead listbox ---------- */ .quote-wizard__typeahead-list { list-style: none; margin: 0; padding: var(--s-2) 0; background: var(--c-paper); border: var(--bw-hair) solid var(--c-rule); max-height: 12rem; overflow-y: auto; position: absolute; top: 100%; left: 0; right: 0; z-index: 5; box-shadow: var(--sh-base); } .quote-wizard__typeahead-option { padding: var(--s-2) var(--s-3); cursor: pointer; font-size: var(--fs-small); color: var(--c-text); } .quote-wizard__typeahead-option.is-active, .quote-wizard__typeahead-option:hover { background: var(--c-ivory); color: var(--c-text); } /* ---------- Summary (Step 3) ---------- */ .quote-wizard__review-title { font-family: var(--ff-serif); font-size: var(--fs-h3); letter-spacing: var(--tr-snug); margin: 0; } .quote-wizard__summary { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-3) var(--s-6); margin: 0; padding: var(--s-5) 0; border-top: var(--bw-hair) solid var(--c-rule); border-bottom: var(--bw-hair) solid var(--c-rule); } .quote-wizard__summary dt { font-size: var(--fs-micro); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver); font-weight: var(--fw-medium); } .quote-wizard__summary dd { margin: 0; color: var(--c-text); font-size: var(--fs-body); } .quote-wizard__summary-group { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bw-hair) solid var(--c-rule); } .quote-wizard__summary-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .quote-wizard__summary-group-title { font-family: var(--ff-serif); font-size: var(--fs-h5); color: var(--c-text); } .quote-wizard__summary-edit { font-size: var(--fs-caption); color: var(--c-silver-dim); text-decoration: none; border-bottom: var(--bw-hair) solid var(--c-rule); letter-spacing: var(--tr-luxe); text-transform: uppercase; transition: color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet); } .quote-wizard__summary-edit:hover, .quote-wizard__summary-edit:focus-visible { color: var(--c-text); border-bottom-color: var(--c-silver); } /* ---------- Turnstile container ---------- */ .quote-wizard__turnstile { margin: var(--s-5) 0; min-height: 65px; } /* ---------- Actions row ---------- */ .quote-wizard__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--bw-hair) solid var(--c-rule); } .quote-wizard__actions-right { display: inline-flex; align-items: center; gap: var(--s-4); } .quote-wizard__next:disabled, .quote-wizard__submit:disabled { opacity: 0.4; cursor: not-allowed; } /* Forward arrow on the advancing/primary buttons — matches the other forms. */ .quote-wizard__next::after, .quote-wizard__submit::after { content: "→"; margin-left: var(--s-3); transition: transform var(--dur-base) var(--ease-quiet); } .quote-wizard__next:not(:disabled):hover::after, .quote-wizard__submit:not(:disabled):hover::after { transform: translateX(4px); } .quote-wizard__reset { background: transparent; border: 0; padding: var(--s-2) var(--s-3); font-family: var(--ff-sans); font-size: var(--fs-caption); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver-dim); cursor: pointer; transition: color var(--dur-fast) var(--ease-quiet); } .quote-wizard__reset:hover, .quote-wizard__reset:focus-visible { color: var(--c-text); } /* ---------- Fallback (no-JS) submit ---------- */ .quote-wizard__fallback { display: flex; justify-content: flex-end; padding-top: var(--s-6); border-top: var(--bw-hair) solid var(--c-rule); } /* ---------- Mobile ---------- */ @media (max-width: 720px) { .quote-wizard__form { padding: var(--s-6); } .quote-wizard__form::before { left: var(--s-6); right: var(--s-6); } .quote-wizard__row { grid-template-columns: 1fr; gap: var(--s-5); } .quote-wizard__steps { gap: var(--s-2); } .quote-wizard__step-label { font-size: var(--fs-micro); } .quote-wizard__actions { flex-direction: column-reverse; align-items: stretch; gap: var(--s-3); } } /* ---------- Motion (reduced-motion respect) ---------- */ @media (prefers-reduced-motion: no-preference) { .quote-wizard__step { animation: quote-wizard-fade-in var(--dur-base) var(--ease-quiet); } } @keyframes quote-wizard-fade-in { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: translateY(0); } } /* ---------- Date input — monoline calendar icon (D-07 / SPEC-R7) ---------- */ /* Self-contained data-URI SVG (stroke="currentColor", no hardcoded hex); the indicator's color property feeds currentColor and resolves to --c-text-soft (sketch-findings: light-surface form colour, NOT pewter). */ .quote-wizard__input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='1'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E"); background-size: 16px 16px; background-repeat: no-repeat; background-position: center; width: 20px; height: 100%; cursor: pointer; color: var(--c-text-soft); /* No pointer-events:none — that would break the native picker click. */ } /* Firefox — no ::-webkit-calendar-picker-indicator; paint the icon on the input. */ @supports not selector(input::-webkit-calendar-picker-indicator) { .quote-wizard__input[type="date"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='1'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 16px 16px; padding-inline-end: calc(var(--s-4) + 16px); } }