/* Discovery wizard styling — RainTech branding, light/dark via [data-theme] on . Palette pulled from rain.tech: cyan accent (#20b8e7), deep navy (#001647), lime-green success (#8bdb02), warm-neutral surfaces. Fonts: Lato (body) + Plus Jakarta Sans (headings), loaded from Google Fonts in index.html. */ :root { --rt-cyan: #20b8e7; --rt-cyan-dark: #1596c0; --rt-navy: #001647; --rt-green: #8bdb02; --rt-green-text: #6fb000; --radius: 10px; --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body[data-theme='light'] { --bg: #faf9f7; --surface: #ffffff; --surface-alt: #f8f6f2; --text: #1b2440; --heading: var(--rt-navy); --muted: #6f6a62; --border: #ebe8e2; --accent: var(--rt-cyan); --accent-hover: var(--rt-cyan-dark); --accent-text: var(--rt-navy); /* text color on top of an --accent fill */ --accent-ring: rgba(32, 184, 231, 0.28); --accent-tint: rgba(32, 184, 231, 0.1); --success: var(--rt-green-text); /* readable green for text/borders */ --success-fill: var(--rt-green); /* vivid lime for fills */ } body[data-theme='dark'] { --bg: #071022; --surface: #0f1b34; --surface-alt: #16243f; --text: #eef2fb; --heading: #ffffff; --muted: #9fb0cc; --border: #26375c; --accent: #42daf9; --accent-hover: #20b8e7; --accent-text: var(--rt-navy); --accent-ring: rgba(66, 218, 249, 0.32); --accent-tint: rgba(66, 218, 249, 0.12); --success: #a6e83a; --success-fill: #8bdb02; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.5; } h1, h2, h3 { font-family: var(--font-head); color: var(--heading); } .discovery-shell { display: block; } .discovery-app { max-width: 920px; margin: 0 auto; padding: 24px 20px 48px; } /* Header / branding */ .app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; } .brand-logo { font-size: 1.6rem; color: var(--accent); } .brand-name { font-family: var(--font-head); color: var(--heading); font-size: 1.1rem; letter-spacing: 0.2px; } .app-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; text-align: center; } /* Buttons */ button { font: inherit; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius); padding: 10px 16px; background: var(--accent); color: var(--accent-text); font-weight: 700; } button:hover { background: var(--accent-hover); } button:disabled { opacity: 0.45; cursor: not-allowed; } button.secondary { background: var(--surface); color: var(--text); border-color: var(--border); font-weight: 600; } button.secondary:hover { background: var(--surface-alt); } button.danger { background: transparent; color: #c0392b; border-color: #c0392b; font-weight: 600; } button.danger:hover { background: rgba(192, 57, 43, 0.08); } /* Stepper */ .wizard-stepper ol { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; flex-wrap: wrap; } .wizard-stepper li { flex: 1 1 0; min-width: 120px; } .step-chip { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border); text-align: left; font-weight: 600; } .step-chip .step-index { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-alt); font-size: 0.85rem; flex: none; } .step-chip.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); } .step-chip.active .step-index { background: var(--accent); color: var(--accent-text); } .step-chip.complete .step-index { background: var(--success-fill); color: var(--rt-navy); } .step-chip.locked { opacity: 0.5; } .step-name { font-size: 0.85rem; } /* Step panes */ .step-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .step-header h2 { margin: 0 0 4px; font-size: 1.3rem; } .step-intro { margin: 0 0 12px; color: var(--muted); } /* Fields */ .field { display: block; margin-bottom: 16px; } .field-label { display: block; font-weight: 600; margin-bottom: 6px; } .required-mark { color: #c0392b; margin-left: 3px; } .field-help { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 4px; } .field input[type='text'], .field input[type='number'] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); color: var(--text); } .field input[type='text']:focus, .field input[type='number']:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } fieldset.field { border: none; margin: 0 0 16px; padding: 0; } fieldset.field legend { padding: 0; } .choices { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .choice { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; } .choice input { accent-color: var(--accent); } /* Industry cards */ .industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .industry-card { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px; font-weight: 400; } .industry-card:hover { background: var(--surface); } .industry-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); } .industry-label { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--heading); } .industry-desc { color: var(--muted); font-size: 0.85rem; } /* Required progress bar */ .required-bar { margin: 4px 0 18px; } .required-bar-head { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; } .required-bar-track { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; } .required-bar-fill { height: 100%; background: var(--accent); transition: width 0.2s ease; } /* Question step two-column layout: questions + live quote preview (#11) */ .step-columns { display: grid; grid-template-columns: 1fr minmax(240px, 300px); gap: 18px; align-items: start; } @media (max-width: 820px) { .step-columns { grid-template-columns: 1fr; } } /* Live quote preview aside */ .quote-preview { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; position: sticky; top: 16px; } .qp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .qp-head h3 { margin: 0; font-size: 1rem; } .qp-mrr { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--heading); } .qp-mrr small { font-weight: 600; font-size: 0.75rem; color: var(--muted); } .qp-lines { list-style: none; padding: 0; margin: 12px 0; } .qp-line { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; padding: 5px 0; border-bottom: 1px solid var(--border); } .qp-line-label small { color: var(--muted); } .qp-line-amount { white-space: nowrap; } .qp-empty { font-size: 0.82rem; padding: 8px 0; } .qp-totals { margin: 0; border-top: 2px solid var(--border); padding-top: 10px; } .qp-totals div { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; padding: 3px 0; } .qp-totals dt { color: var(--muted); margin: 0; } .qp-totals dd { margin: 0; font-weight: 600; } .qp-annual dd { color: var(--heading); font-weight: 700; } .qp-note { font-size: 0.75rem; margin: 10px 0 0; } /* Collapsible sections */ .sections { display: flex; flex-direction: column; gap: 10px; } .wizard-section { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .section-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: var(--surface-alt); color: var(--text); border: none; border-radius: 0; font-weight: 600; } .section-title { font-weight: 600; } .section-counts { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; } .section-answered { color: var(--muted); } .section-required { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; } .section-required.done { color: var(--success); border-color: var(--success); } .section-body { padding: 16px; } /* Review */ .review-summary, .review-recap, .quote-card { margin-top: 18px; } .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; } .summary-grid dt { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; } .summary-grid dd { margin: 2px 0 0; font-weight: 600; } .quote-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 16px; } .quote-table, .recap-table { width: 100%; border-collapse: collapse; } .quote-table td, .recap-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .quote-table .num { text-align: right; white-space: nowrap; } .quote-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); } .quote-mrr td { color: var(--heading); font-weight: 700; } .quote-addons { margin-top: 12px; } .quote-addons ul, .quote-disclaimers { list-style: none; padding: 0; margin: 6px 0 0; } .quote-addons li { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 3px 0; } .quote-disclaimers { color: var(--muted); font-size: 0.78rem; margin-top: 10px; } .recap-section { color: var(--muted); width: 26%; } .recap-value { font-weight: 600; } .detail-muted { color: var(--muted); } /* Actions */ .wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .actions-left, .actions-right { display: flex; gap: 10px; } .wizard-status { background: var(--accent-tint); border: 1px solid var(--accent); color: var(--heading); border-radius: 8px; padding: 8px 12px; margin: 0 0 14px; font-size: 0.88rem; }