/* Claude: customer-wizard project. Minimal layout for /strata/quote (and
future /commercial/quote) — one question at a time, with Previous/Next
bar + thin progress bar at the bottom. Uses the existing OHD design
tokens from site.css (--graphite, --red, --concrete, etc.).
Wizard-specific accent: navy. The site-wide brand red stays on the
public marketing pages (LeadForm, hero CTAs, footer); the wizard uses
navy on selected answer buttons and the primary Next/Submit button so
visitors can tell which surface they're in. Unselected button styling
(white + line-strong border, hover steel-2) is unchanged. */
:root {
--wizard-accent: #1E3A8A; /* navy — selected & primary */
--wizard-accent-deep: #172554; /* darker navy — primary hover */
--wizard-accent-tint: rgba(30, 58, 138, 0.06); /* Claude: default answer-button background — light navy */
--wizard-accent-tint-selected: rgba(30, 58, 138, 0.18); /* Claude: selected answer-button — slightly darker navy */
}
.wizard-page {
padding: 48px 0 96px;
min-height: 80vh;
background: var(--concrete);
}
.wizard-shell {
background: var(--white);
border: 1px solid var(--line);
border-radius: 8px;
max-width: 720px;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 60vh;
}
.wizard-header {
padding: 24px 32px 0;
}
.wizard-body {
padding: 16px 32px 32px;
flex: 1 1 auto;
}
/* Claude: chat-style transcript. Capped at 50vh with internal scroll so a
long transcript never pushes the active question off-screen; new entries
land at the bottom (newest closest to the question they answered). The
WizardForm scrolls to bottom on advance via JS interop. */
.wizard-transcript {
padding: 16px 32px;
border-bottom: 1px solid var(--line);
background: var(--white);
max-height: 50vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.transcript-row {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Claude: Title questions render inside the conversation window as a
centred small header (not a chat bubble). Treated as non-interactive
in navigation (see SkipTitlesForward/Backward in WizardForm.razor).
Sits flush across the transcript with a subtle underline so it reads
as a section label rather than a message. */
.wizard-transcript-title {
align-self: stretch;
text-align: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--steel, #5B6470);
padding: 4px 0 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
/* Claude: chat-style entrance animation. Each bubble fades up from below
to mimic a text message arriving. Sequenced so the visitor sees the
just-answered Q+A settle into the transcript FIRST, then the new
active question slides into the wizard-body. Total dance ~750ms:
0 ms transcript question bubble starts
100 ms transcript answer bubble starts (chains after Q)
450 ms active question bubble starts (after transcript settles)
`backwards` keeps each bubble invisible during its pre-delay so it
doesn't flash at full opacity before sliding in. Bumped translateY
from 8px to 14px so the "moving into the chat" motion is more
noticeable, especially against the bigger active-question bubble. */
@keyframes transcript-pop-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.transcript-question {
align-self: flex-start;
max-width: 80%;
padding: 8px 12px;
background: var(--concrete);
color: var(--graphite);
border-radius: 14px 14px 14px 4px;
font-size: 14px;
line-height: 1.4;
animation: transcript-pop-in 400ms ease-out backwards;
}
.transcript-answer {
align-self: flex-end;
max-width: 80%;
padding: 8px 12px;
background: var(--wizard-accent-tint);
color: var(--graphite);
border: 1px solid transparent;
border-radius: 14px 14px 4px 14px;
font: inherit;
font-size: 14px;
line-height: 1.4;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease;
animation: transcript-pop-in 400ms ease-out 100ms backwards;
}
/* Respect the OS "reduce motion" setting -- accessibility default. */
@media (prefers-reduced-motion: reduce) {
.transcript-question,
.transcript-answer {
animation: none;
}
}
/* Claude: question-level AI prompts project (migration 044). Left-aligned
transcript bubble for AiComment questions -- visually distinct from
.transcript-question (visitor's previously-clicked transcript Q) because
this is an AI-generated message, not the wizard's question prompt.
Slightly wider max-width since AI messages tend to be longer than visitor
answers, with a soft amber-tinted background so it reads as "system /
assistant" rather than "visitor's data". whitespace: pre-wrap preserves
line breaks in the streamed markdown without forcing a renderer. */
.transcript-row-ai {
/* The row contains a single child -- no need for the grid Q/A layout. */
display: block;
}
.transcript-ai-comment {
align-self: flex-start;
max-width: 88%;
padding: 10px 14px;
background: var(--wizard-ai-tint, #FFF4E0);
color: var(--graphite);
border-radius: 14px 14px 14px 4px;
font-size: 14px;
line-height: 1.5;
animation: transcript-pop-in 400ms ease-out backwards;
}
/* Claude: Markdig wraps inline content in ...
which has default
browser margin (1em top/bottom). Strip the surrounding paragraph
margin and only restore space between consecutive paragraphs so a
single-line bubble looks compact and a multi-paragraph response still
reads cleanly. */
.transcript-ai-comment p { margin: 0; }
.transcript-ai-comment p + p { margin-top: 8px; }
.transcript-ai-comment ul,
.transcript-ai-comment ol { margin: 6px 0 6px 1.2em; padding: 0; }
@media (prefers-reduced-motion: reduce) {
.transcript-ai-comment { animation: none; }
}
/* Main-area "thinking" indicator shown briefly while the AiComment stream
warms up. Once chunks start arriving, the transcript bubble takes over
and this stays as a passive ambient indicator until the auto-advance. */
.wizard-ai-thinking {
display: flex;
align-items: center;
gap: 12px;
padding: 24px 8px;
color: var(--steel, #5B6470);
font-size: 15px;
font-style: italic;
}
.wizard-ai-spinner {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
animation: wizard-ai-pulse 1.1s ease-in-out infinite;
}
/* Claude: customer-match project. Transcript bubble shown while the
address-to-customer lookup is still in flight. Same shape and
alignment as .transcript-ai-comment (left bubble, popping in from
below) but in the "system pending" visual language used by
.wizard-address-searching -- grey concrete background, italic copy,
heartbeat spinner inline. Replaced with the regular
.transcript-ai-comment (amber) once the lookup completes. */
.transcript-address-pending {
align-self: flex-start;
max-width: 88%;
padding: 10px 14px;
background: var(--concrete);
border: 1px solid var(--line);
color: var(--steel, #5B6470);
border-radius: 14px 14px 14px 4px;
font-size: 14px;
line-height: 1.5;
font-style: italic;
display: flex;
align-items: center;
gap: 12px;
animation: transcript-pop-in 400ms ease-out backwards;
}
@media (prefers-reduced-motion: reduce) {
.transcript-address-pending { animation: none; }
}
/* Claude: customer-match project. Status banner shown on the current
question while the address-to-customer lookup is in flight (up to 15s
inline, longer in background). Same shape as .wizard-ai-thinking
but with a soft tint to read as "system status" rather than the
active question prompt. */
.wizard-address-searching {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-top: 12px;
background: var(--concrete);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--steel, #5B6470);
font-size: 14px;
font-style: italic;
animation: transcript-pop-in 300ms ease-out backwards;
}
@media (prefers-reduced-motion: reduce) {
.wizard-address-searching { animation: none; }
}
@keyframes wizard-ai-pulse {
0%, 100% { opacity: 0.25; transform: scale(0.85); }
50% { opacity: 0.8; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.wizard-ai-spinner { animation: none; opacity: 0.6; }
}
.transcript-answer:hover:not(:disabled),
.transcript-answer:focus-visible {
border-color: var(--wizard-accent);
background: var(--wizard-accent-tint-selected);
outline: none;
}
/* Claude: read-only bubble variant for /thank-you. Same shape and colour
as the live wizard transcript, but non-interactive -- no cursor
pointer, no hover state, no entrance animation (the conversation is
already over by the time the visitor reads it). */
.transcript-question.is-readonly,
.transcript-answer.is-readonly {
animation: none;
}
.transcript-answer.is-readonly {
cursor: default;
}
.transcript-answer.is-readonly:hover,
.transcript-answer.is-readonly:focus-visible {
border-color: transparent;
background: var(--wizard-accent-tint);
outline: none;
}
/* Container for the bubble transcript on /thank-you. Mirrors the layout
spirit of .wizard-transcript (vertical stack with a gap between rows)
but without the scroll cap -- the page can grow as tall as it needs. */
.thankyou-transcript {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 18px;
}
.transcript-answer:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Claude: empty/skipped answer bubble. Visitor was asked the question
but moved on without supplying an answer. Render the bubble shape so
they can see what they skipped + click it to revisit, but mute the
styling (dashed border, lower opacity, fixed minimum size) so it
reads as "no answer" rather than "an empty answer". */
.transcript-answer.is-empty {
min-width: 64px;
min-height: 28px;
background: transparent;
border: 1px dashed var(--steel-2, #B0B6BE);
opacity: 0.6;
}
.transcript-answer.is-empty:hover:not(:disabled),
.transcript-answer.is-empty:focus-visible {
border-color: var(--wizard-accent);
background: var(--wizard-accent-tint);
opacity: 1;
}
.wizard-footer {
border-top: 1px solid var(--line);
background: var(--concrete);
padding: 16px 32px 0;
position: relative;
}
.wizard-footer-buttons {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.wizard-empty {
padding: 48px 32px;
text-align: center;
color: var(--steel);
}
/* Questions */
.wizard-question {
display: flex;
flex-direction: column;
gap: 16px;
}
.wizard-question-title {
font-size: 24px;
font-weight: 700;
color: var(--graphite);
margin: 0;
}
.wizard-question-text {
color: var(--graphite);
margin: 0;
line-height: 1.55;
}
/* Claude: active question prompt -- same chat-bubble shape as the
transcript-question, but bigger (this is the question being asked
"right now"). align-self pushes it to the left of the wizard-body
flex column so the visitor's answer area can sit on the right. The
slide-up animation is delayed 450ms so the visitor sees the
just-answered Q+A settle into the transcript first, then the new
active question arrives -- reads like a chat sequence rather than
two simultaneous pops. */
.wizard-question-prompt {
align-self: flex-start;
max-width: 85%;
margin: 0;
padding: 14px 18px;
background: var(--concrete);
color: var(--graphite);
border-radius: 18px 18px 18px 4px;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
animation: transcript-pop-in 400ms ease-out 450ms backwards;
}
/* Right-aligned column for the visitor's answer surface (button list,
comment textarea, address autocomplete, contact inputs). Mirrors the
transcript-answer's flex-end placement so left = wizard, right =
visitor reads at a glance. Inner children stack vertically with a
small gap (button list above the comment box, for instance). */
.wizard-question-answer {
align-self: flex-end;
width: 85%;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Claude: Address autocomplete is wider than other answer surfaces --
the Google Places dropdown looks cramped at 85% and the typed input
benefits from edge-to-edge room. Drop the right-indent and stretch
to the full wizard-body width for this question type only. */
.wizard-question-address .wizard-question-answer {
align-self: stretch;
width: 100%;
}
/* Claude: Comment textarea wants the full wizard-body width too -- an
85% right-aligned box looks cramped for free-form prose. Same
stretch-to-100% override as Address. */
.wizard-question-comment .wizard-question-answer {
align-self: stretch;
width: 100%;
}
.wizard-question-unsupported {
color: var(--red);
font-size: 14px;
}
/* Answer buttons (Check / Custom) */
.wizard-answer-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.wizard-answer-button {
width: 100%;
text-align: left;
padding: 14px 16px;
background: var(--wizard-accent-tint);
border: 2px solid var(--line);
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
color: var(--graphite);
transition: border-color 120ms ease, background-color 120ms ease;
}
.wizard-answer-button:hover {
border-color: var(--steel-2);
}
.wizard-answer-button.is-selected {
border-color: var(--wizard-accent);
background: var(--wizard-accent-tint-selected);
}
.wizard-answer-status {
display: inline-flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--concrete);
color: var(--steel);
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.wizard-answer-status-pass { background: #DCFCE7; color: #166534; }
.wizard-answer-status-marginal { background: #FEF3C7; color: #92400E; }
.wizard-answer-status-fail { background: #FEE2E2; color: #991B1B; }
.wizard-answer-status-na { background: var(--concrete); color: var(--steel); }
.wizard-answer-text {
flex: 1 1 auto;
}
.wizard-answer-check {
color: var(--wizard-accent);
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
/* Fields (Comment / Address / Contact) */
.wizard-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.wizard-field-label {
font-size: 13px;
font-weight: 600;
color: var(--steel);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wizard-field-input,
.wizard-field-textarea {
width: 100%;
font: inherit;
color: var(--graphite);
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: 4px;
background: var(--white);
transition: border-color 120ms ease;
}
.wizard-field-input:focus,
.wizard-field-textarea:focus {
outline: none;
border-color: var(--wizard-accent);
}
.wizard-field-textarea {
resize: vertical;
min-height: 96px;
line-height: 1.45;
}
.wizard-contact-input,
.wizard-address-input {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Claude: mobile keyboard fix for the Address autocomplete. When Google's
calls scrollIntoView (every keystroke as the
prediction list refreshes), it would otherwise park the element at the
top edge of the viewport -- which on mobile, combined with the visual-
viewport shrink from the on-screen keyboard, ends up pushing the input
above the fold. Setting scroll-margin-top forces every scrollIntoView
to leave room above the element so it lands well inside the visible
area. Complements the rAF-based correction loop in address-autocomplete.js
for the cases where Google's scroll happens between our pin ticks. */
.ohdvan-address-autocomplete {
scroll-margin-top: 25vh;
}
@media (hover: none) {
/* Touch devices: bigger margin because the visual viewport shrinks
sharply when the keyboard opens, so a relative-to-layout-vh margin
in landscape phones still ends up close to the top of the visual
viewport. */
.ohdvan-address-autocomplete {
scroll-margin-top: 35vh;
}
}
.wizard-contact-hint {
font-size: 13px;
color: var(--red);
margin: 0;
}
/* Photo upload — Claude: the upload widget now lives inside the active
question's .wizard-question-answer column (under the comment box), so
thumbnails appear chat-style on the right side. The grid wraps so a
visitor can stack a handful of photos without horizontal scroll; the
"Add a/another" button is itself the last tile in the row, padded out
to the same square footprint. */
.wizard-photo-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.wizard-photo-tile {
position: relative;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--concrete);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wizard-photo-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wizard-photo-tile.is-uploading {
opacity: 0.6;
}
.wizard-photo-tile.has-error {
background: rgba(217, 55, 42, 0.06);
border-color: var(--red);
}
.wizard-photo-tile-spinner,
.wizard-photo-tile-placeholder {
color: var(--steel);
font-size: 22px;
}
.wizard-photo-tile-error {
color: var(--red);
font-size: 22px;
font-weight: 700;
}
/* Small × in the top-right of each tile -- darkened pill so it stays
readable against any photo. */
.wizard-photo-tile-remove {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: var(--white);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.wizard-photo-tile-remove:hover {
background: var(--red);
}
/* Add-a-photo trigger -- lives in the wizard footer between Previous
and Next. Same padding/border/radius as wizard-btn-secondary so it
reads as a peer of the navigation buttons; camera icon
differentiates the action visually. */
.wizard-photo-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--white);
color: var(--graphite);
border: 1px solid var(--line-strong);
border-radius: 4px;
cursor: pointer;
font: inherit;
font-weight: 600;
transition: border-color 120ms ease, background-color 120ms ease;
}
.wizard-photo-trigger:hover {
border-color: var(--steel-2);
}
.wizard-photo-trigger.is-uploading {
pointer-events: none;
opacity: 0.6;
}
.wizard-photo-trigger-icon {
font-size: 18px;
line-height: 1;
}
/* Transcript thumbnails -- smaller (44x44), no remove button, sit on
the right-hand side of the row below the answer bubble so they read
as "attached to the visitor's reply". */
.transcript-photos {
align-self: flex-end;
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 80%;
margin-top: 2px;
}
.transcript-photo-thumb {
width: 44px;
height: 44px;
border-radius: 6px;
object-fit: cover;
border: 1px solid var(--line);
background: var(--concrete);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--steel);
}
.transcript-photo-thumb.is-missing {
background: var(--concrete);
}
/* Footer buttons */
.wizard-btn {
border: none;
border-radius: 4px;
padding: 12px 24px;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease, opacity 120ms ease;
}
.wizard-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.wizard-btn-primary {
background: var(--wizard-accent);
color: var(--white);
}
.wizard-btn-primary:hover:not(:disabled) {
background: var(--wizard-accent-deep);
}
.wizard-btn-secondary {
background: var(--white);
color: var(--graphite);
border: 1px solid var(--line-strong);
}
.wizard-btn-secondary:hover:not(:disabled) {
border-color: var(--steel-2);
}
/* Claude: destructive variant -- shown on Q1 only when a resumed wizard
has pre-existing answers from a prior session. Red border + red label
signal that this nukes data; same .wizard-btn padding/sizing so it
occupies the same footer slot as Previous would. */
.wizard-btn-clear {
background: var(--white);
color: var(--red);
border: 1px solid var(--red);
}
.wizard-btn-clear:hover:not(:disabled) {
background: rgba(217, 55, 42, 0.06);
}
/* Invisible placeholder that fills the left-hand slot when neither
Previous nor Clear is shown (fresh wizard, Q1). Keeps the
space-between flex layout pinning Next to the right. */
.wizard-footer-spacer {
width: 1px;
}
.wizard-error {
color: var(--red);
font-size: 14px;
margin: 0 0 16px;
}
/* Progress bar */
.wizard-progress-bar {
height: 4px;
width: 100%;
background: var(--line);
margin: 0 -32px;
width: calc(100% + 64px);
}
.wizard-progress-bar-fill {
height: 100%;
background: var(--wizard-accent);
transition: width 240ms ease;
}
/* Claude: customer-wizard Phase 2 — AI report streaming surface on
/thank-you?wizard=1. Lives inside the existing .legal-contact-card-ish
container; only its inner pieces are scoped here. */
.ai-report-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 8px;
padding: 24px;
}
.ai-report-header h2 {
color: var(--graphite);
}
.ai-report-text {
margin-top: 16px;
line-height: 1.55;
color: var(--graphite);
min-height: 80px;
/* Claude: cap the streaming surface at 600px and let it scroll
internally. Without this the page itself grew taller and taller
as Claude streamed in deltas, which felt like the report was
runaway. Capping the frame keeps the surrounding page stable;
lead-report-stream.js scrolls this element to the bottom on every
delta so the visitor still tracks the latest text being written. */
max-height: 600px;
overflow-y: auto;
}
.ai-report-text h1,
.ai-report-text h2 {
font-weight: 700;
color: var(--graphite);
margin: 20px 0 8px;
}
.ai-report-text h1 { font-size: 22px; }
.ai-report-text h2 { font-size: 18px; }
.ai-report-text h3 { font-size: 15px; margin: 16px 0 6px; }
.ai-report-text h4 { font-size: 14px; margin: 12px 0 4px; color: var(--steel); }
.ai-report-text p {
margin: 0 0 12px;
}
.ai-report-text strong { font-weight: 700; }
.ai-report-text em { font-style: italic; }
/* Lists -- single level. The markdown renderer doesn't support nested
lists; the system prompt tells Claude to stay flat. */
.ai-report-text ul,
.ai-report-text ol {
margin: 0 0 12px;
padding-left: 24px;
}
.ai-report-text li {
margin-bottom: 4px;
line-height: 1.55;
}
/* Tables -- typical use is cost breakdowns or comparison data. */
.ai-report-text table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
font-size: 14px;
}
.ai-report-text th,
.ai-report-text td {
padding: 8px 10px;
border: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.ai-report-text thead th {
background: var(--concrete);
font-weight: 700;
color: var(--graphite);
}
/* Inline code -- for short snippets like cycle counts or part numbers. */
.ai-report-text code {
background: var(--concrete);
border-radius: 3px;
padding: 1px 5px;
font-family: 'Consolas', 'Menlo', monospace;
font-size: 13px;
}
/* Block quote -- left rule in brand red. */
.ai-report-text blockquote {
margin: 12px 0;
padding: 6px 0 6px 14px;
border-left: 3px solid var(--red);
color: var(--graphite);
}
/* Horizontal rule. */
.ai-report-text hr {
border: none;
border-top: 1px solid var(--line);
margin: 16px 0;
}
.ai-report-error {
margin-top: 12px;
padding: 12px 16px;
background: rgba(217, 55, 42, 0.06);
border: 1px solid var(--red);
border-radius: 4px;
color: var(--red);
}
.ai-report-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Claude: anchors have no :disabled, so the AI-report Download button
uses .is-disabled + aria-disabled while the report is still streaming.
pointer-events:none blocks the click; the visual styling tells the
visitor the button is going to be ready, just not yet. */
.btn.is-disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.ai-report-actions .btn-outline {
background: var(--white);
color: var(--graphite);
border: 1px solid var(--line-strong);
padding: 14px 28px;
border-radius: 4px;
text-decoration: none;
}