/* * /get-a-quote/ — three-step wizard + confirmation. Ported from Quote.dc.html. * * Loaded only on page-templates/tpl-quote.php (self-contained enqueue in * that file), depends on rnta-shared (dist/css/shared.css) for * `.rnta-frame` / `.rnta-eyebrow`, and rnta-base for `.rnta-btn`, * `.rnta-hp` and the global `:focus-visible` ring — nothing here redefines * those. All values are `--rn-*` tokens from dist/css/tokens.css; no new * colours, radii or shadows are introduced (HANDOFF.md §2). * * Progressive enhancement: everything under `.rnta-quote-nav--js` and the * `[data-step="2"]` / `[data-step="3"]` hide-until-active rule only takes * effect once `` carries `.rnta-js` — added by a synchronous inline * script in tpl-quote.php the instant the wizard markup exists, before * dist/js/quote.js itself has had a chance to load. Without JS, `.rnta-js` * is never added, so every step stays visible and every nav control stays * hidden except the one real `type="submit"` button in step 3. */ /* --------------------------------------------------------------- * Hero band * ------------------------------------------------------------- */ .rnta-quote-hero { padding: var(--rn-space-56) 0 var(--rn-space-40); background: var(--rn-navy); } .rnta-eyebrow--on-navy { color: var(--rn-gold); } .rnta-quote-hero__title { margin: var(--rn-space-14) 0 var(--rn-space-12); max-width: 720px; font-family: var(--rn-font-display); font-size: var(--rn-fs-44); font-weight: 800; line-height: 1.06; letter-spacing: -1.5px; color: var(--rn-white); text-wrap: pretty; } .rnta-quote-hero__lead { margin: 0; max-width: 560px; font-size: var(--rn-fs-16); line-height: 26px; color: rgba(255, 255, 255, 0.82); } /* --------------------------------------------------------------- * Wizard shell * ------------------------------------------------------------- */ .rnta-quote-wrap { padding: var(--rn-space-40) 0 var(--rn-space-88); } .rnta-quote-wizard { display: grid; grid-template-columns: 300px 1fr; /* DC calls for a 24px gap; the closest token in dist/css/tokens.css's * fixed spacing scale (HANDOFF.md §2) is 22px — no raw px values here. */ gap: var(--rn-space-22); align-items: start; } /* ---- Step rail ---- */ .rnta-quote-rail { display: flex; flex-direction: column; gap: var(--rn-space-10); align-self: start; padding: var(--rn-space-22); background: var(--rn-white); border: 1px solid var(--rn-line); border-radius: var(--rn-radius-14); box-shadow: var(--rn-shadow-card); } .rnta-quote-rail__item { display: flex; align-items: center; gap: var(--rn-space-12); padding: var(--rn-space-12); border-radius: var(--rn-radius-10); background: transparent; } .rnta-quote-rail__item--current { background: var(--rn-tint-blue); } .rnta-quote-rail__dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: var(--rn-radius-pill); background: var(--rn-line); color: var(--rn-body); font-size: var(--rn-fs-14); font-weight: 800; } .rnta-quote-rail__item--current .rnta-quote-rail__dot { background: var(--rn-blue); color: var(--rn-white); } .rnta-quote-rail__item--done .rnta-quote-rail__dot { background: var(--rn-green); color: var(--rn-white); } .rnta-quote-rail__item--done .rnta-quote-rail__dot::before { content: '\2713'; } .rnta-quote-rail__text { display: flex; flex-direction: column; } .rnta-quote-rail__title { font-size: var(--rn-fs-14); font-weight: 700; color: var(--rn-navy); } .rnta-quote-rail__desc { font-size: var(--rn-fs-12); color: var(--rn-body); } .rnta-quote-tip { display: flex; gap: var(--rn-space-10); margin-top: var(--rn-space-8); padding: var(--rn-space-16); border-radius: var(--rn-radius-10); background: var(--rn-surface-blue); font-size: var(--rn-fs-13); line-height: 20px; color: var(--rn-body); } .rnta-quote-tip .rnta-icon { flex: none; margin-top: 1px; color: var(--rn-blue); } .rnta-quote-tip a { font-weight: 700; } /* ---- Card + progress ---- */ .rnta-quote-card { padding: 30px 32px 28px; background: var(--rn-white); border: 1px solid var(--rn-line); border-radius: var(--rn-radius-14); box-shadow: var(--rn-shadow-card); } .rnta-quote-progress { height: 4px; border-radius: var(--rn-radius-pill); background: var(--rn-line); overflow: hidden; margin-bottom: var(--rn-space-26); } .rnta-quote-progress__bar { height: 100%; background: var(--rn-blue); transition: width 320ms ease; } .rnta-quote-banner { display: flex; align-items: center; gap: var(--rn-space-8); margin-bottom: var(--rn-space-16); padding: var(--rn-space-12) var(--rn-space-14); border-radius: var(--rn-radius-8); background: rgba(255, 59, 83, 0.08); color: var(--rn-coral-text); font-size: var(--rn-fs-14); font-weight: 600; } .rnta-quote-banner .rnta-icon { color: var(--rn-coral-text); flex: none; } /* --------------------------------------------------------------- * Steps * ------------------------------------------------------------- */ .rnta-quote-step { border: 0; padding: 0; margin: 0; min-width: 0; } .rnta-quote-step__title { margin: 0 0 6px; font-family: var(--rn-font-display); font-size: var(--rn-fs-26); font-weight: 800; letter-spacing: -0.9px; color: var(--rn-navy); } .rnta-quote-step__desc { margin: 0 0 24px; font-size: var(--rn-fs-15); line-height: 23px; color: var(--rn-body); } .rnta-quote-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rn-space-16); } .rnta-quote-fields--3 { grid-template-columns: 1fr 1fr 1fr; margin-top: var(--rn-space-22); } .rnta-quote-field { display: flex; flex-direction: column; gap: 7px; } .rnta-quote-field--full { margin-top: var(--rn-space-16); } .rnta-quote-field label { font-size: var(--rn-fs-13); font-weight: 700; color: var(--rn-ink); } .rnta-quote-required { color: var(--rn-coral); font-weight: 700; } .rnta-quote-field input[type='text'], .rnta-quote-field input[type='email'], .rnta-quote-field input[type='tel'], .rnta-quote-field input[type='date'], .rnta-quote-field input[type='time'], .rnta-quote-field select, .rnta-quote-field textarea { height: 52px; padding: 0 var(--rn-space-14); border: 1px solid var(--rn-line); border-radius: var(--rn-radius-8); background: var(--rn-white); font-family: var(--rn-font-body); font-size: var(--rn-fs-15); font-weight: 600; color: var(--rn-ink); } .rnta-quote-field textarea { height: auto; padding: 13px var(--rn-space-14); font-weight: 500; line-height: 23px; resize: vertical; } .rnta-quote-field input:focus, .rnta-quote-field select:focus, .rnta-quote-field textarea:focus { border-color: var(--rn-blue); } .rnta-quote-field--error input, .rnta-quote-field--error select { border-color: var(--rn-coral); } .rnta-quote-field__error { font-size: var(--rn-fs-12); font-weight: 600; color: var(--rn-coral-text); } .rnta-quote-field--checkbox { justify-content: flex-end; } .rnta-quote-checkbox { display: inline-flex; align-items: center; gap: var(--rn-space-10); min-height: 52px; padding: 0 var(--rn-space-14); border: 1px solid var(--rn-line); border-radius: var(--rn-radius-8); font-size: var(--rn-fs-14); font-weight: 600; color: var(--rn-body); cursor: pointer; } .rnta-quote-checkbox input { width: 18px; height: 18px; accent-color: var(--rn-blue); } .rnta-quote-privacy-note { display: flex; gap: var(--rn-space-10); margin-top: var(--rn-space-18); padding: var(--rn-space-14) var(--rn-space-16); border-radius: var(--rn-radius-10); background: var(--rn-surface-blue); font-size: var(--rn-fs-13); line-height: 20px; color: var(--rn-body); } .rnta-quote-privacy-note .rnta-icon { flex: none; margin-top: 1px; color: var(--rn-green); } /* ---- Per-step alert (role="alert") ---- */ .rnta-quote-alert { display: flex; align-items: center; gap: var(--rn-space-8); margin-top: var(--rn-space-16); padding: var(--rn-space-12) var(--rn-space-14); border-radius: var(--rn-radius-8); background: rgba(255, 59, 83, 0.08); font-size: var(--rn-fs-14); font-weight: 600; color: var(--rn-coral-text); } .rnta-quote-alert[hidden] { display: none; } .rnta-quote-alert .rnta-icon { color: var(--rn-coral-text); flex: none; } /* ---- Passenger rows ---- */ .rnta-quote-pax-list { display: flex; flex-direction: column; gap: var(--rn-space-12); } .rnta-quote-pax-row { display: grid; grid-template-columns: 1fr 190px 44px; gap: var(--rn-space-12); align-items: end; padding: var(--rn-space-16); border: 1px solid var(--rn-line); border-radius: var(--rn-radius-12); background: var(--rn-surface); } .rnta-quote-pax-row .rnta-quote-field input, .rnta-quote-pax-row .rnta-quote-field select { height: 50px; } .rnta-quote-pax-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 50px; border: 1px solid var(--rn-line); border-radius: var(--rn-radius-8); background: var(--rn-white); color: var(--rn-body); cursor: pointer; } .rnta-quote-pax-remove:hover { border-color: var(--rn-coral); color: var(--rn-coral-text); } .rnta-quote-add-pax { display: inline-flex; align-items: center; gap: var(--rn-space-8); margin-top: var(--rn-space-14); min-height: 46px; padding: 0 18px; border: 1px dashed var(--rn-blue); border-radius: var(--rn-radius-8); background: var(--rn-surface-blue); color: var(--rn-blue); font-family: var(--rn-font-body); font-size: var(--rn-fs-14); font-weight: 700; cursor: pointer; } template[data-pax-template] { display: none; } /* ---- Nav actions ---- */ .rnta-quote-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--rn-space-12); margin-top: var(--rn-space-26); } .rnta-quote-actions--end { justify-content: flex-end; } .rnta-quote-btn-lg { min-height: 52px; padding: 0 28px; } /* JS-only nav controls: invisible (and inert) until dist/js/quote.js has * added `.rnta-js` to — see the note at the top of this file. */ .rnta-quote-nav--js { display: none; } .rnta-js .rnta-quote-nav--js { display: inline-flex; } .rnta-js .rnta-quote-actions { display: flex; } /* Steps 2/3 only fold away once JS is actually driving the wizard; a * step JS has flagged inactive gets `hidden` set directly (not just this * class) so it is equally out of the accessibility tree. */ .rnta-js .rnta-quote-step:not(.rnta-quote-step--active) { display: none; } /* --------------------------------------------------------------- * Motion — HANDOFF.md §3: 300ms step slide-in, 340ms confirmation pop. * ------------------------------------------------------------- */ @keyframes rn-step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes rn-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } .rnta-anim-step { animation: rn-step-in 300ms ease both; } .rnta-anim-pop { animation: rn-pop 340ms ease both; } @media (prefers-reduced-motion: reduce) { .rnta-anim-step, .rnta-anim-pop { animation: none !important; } } /* --------------------------------------------------------------- * Confirmation * ------------------------------------------------------------- */ .rnta-quote-wrap--confirm { padding-top: var(--rn-space-40); } .rnta-quote-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; margin-inline: auto; padding: 20px 0 8px; } .rnta-quote-confirm__icon { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: var(--rn-radius-pill); background: rgba(33, 150, 83, 0.12); color: var(--rn-green); } .rnta-quote-confirm__title { margin: 20px 0 10px; font-family: var(--rn-font-display); font-size: var(--rn-fs-30); font-weight: 800; letter-spacing: -1px; color: var(--rn-navy); } .rnta-quote-confirm__lead { margin: 0 0 6px; max-width: 520px; font-size: var(--rn-fs-16); line-height: 26px; color: var(--rn-body); } .rnta-quote-confirm__ref { display: inline-flex; align-items: center; gap: var(--rn-space-8); margin: 14px 0 26px; padding: 10px var(--rn-space-16); border-radius: var(--rn-radius-pill); background: var(--rn-surface-blue); font-family: var(--rn-font-label); font-size: var(--rn-fs-13); font-weight: 600; color: var(--rn-navy); } .rnta-quote-confirm__actions { display: flex; gap: var(--rn-space-12); flex-wrap: wrap; justify-content: center; } .rnta-quote-confirm__next { display: flex; flex-direction: column; gap: var(--rn-space-12); width: 100%; max-width: 560px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rn-line); text-align: left; } .rnta-quote-confirm__next strong { font-family: var(--rn-font-display); font-size: var(--rn-fs-16); font-weight: 700; color: var(--rn-navy); } .rnta-quote-confirm__next span { display: flex; gap: var(--rn-space-10); font-size: var(--rn-fs-14); line-height: 22px; color: var(--rn-body); } .rnta-quote-confirm__next .rnta-icon { flex: none; margin-top: 2px; color: var(--rn-blue); } /* --------------------------------------------------------------- * Breakpoints — exactly HANDOFF.md §2's four (980 / 720 apply here). * ------------------------------------------------------------- */ @media (max-width: 980px) { .rnta-quote-wizard { grid-template-columns: 1fr; } .rnta-quote-rail { flex-direction: row; overflow-x: auto; } .rnta-quote-tip { display: none; } .rnta-quote-fields, .rnta-quote-fields--3 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .rnta-quote-hero__title { font-size: var(--rn-fs-32); } .rnta-quote-card { padding: 22px 18px; } .rnta-quote-pax-row { grid-template-columns: 1fr; } .rnta-quote-actions { flex-wrap: wrap; } }