/** * Self-guided onboarding wizard (S26-328). * * Ported from the prototype at * https://stellar-onboarding-mvp.stellarcontent.chatgpt.site/assets/index-K-688kHY.css * Selectors for screens outside this MVP's scope * (.approval-reassurance, .billing-reassurance, .summary-reassurance) are * intentionally omitted. */ :root { --stellar-blue: #1476e7; --stellar-blue-dark: #0754bf; --ink: #101114; --muted: #667381; --line: #c9d5df; --error: #bd2525; } body.mvp-page { background: #f4f7fa; color: var(--ink); font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; padding-bottom: 48px; } /* The theme's global h1-h6 rule (style-main.css) hardcodes "Plus Jakarta * Sans", "PlusJakartaSans" but the theme never loads either font for this * template, so headings fall back to the theme's serif. Override with the * webfont this template actually loads (see template_onboarding.php ). */ .mvp-page h1, .mvp-page h2, .mvp-page h3, .mvp-page h4, .mvp-page h5, .mvp-page h6 { font-family: 'Plus Jakarta Sans', sans-serif; } .page-shell { display: block; } .site-header { padding: 24px clamp(20px, 4vw, 56px) 0; } .site-header .brand { align-items: center; color: var(--ink); display: inline-flex; font-weight: 800; text-decoration: none; } .site-header .brand img { display: block; height: 32px; } .mvp-card { width: min(100%, 980px); margin: 0 auto; padding: 48px clamp(20px, 4vw, 56px); } .mvp-progress { margin-bottom: 62px; } .mvp-progress-top { color: var(--stellar-blue); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; font-size: 12px; } .mvp-progress-track { background: #e7eef5; border-radius: 999px; height: 6px; overflow: hidden; } .mvp-progress-track span { background: var(--stellar-blue); display: block; height: 100%; transition: width .25s; } .mvp-progress ol { display: flex; gap: 28px; list-style: none; margin: 14px 0 0; padding: 0; color: var(--muted); font-size: 13px; } .mvp-progress ol li { align-items: center; display: flex; gap: 9px; font-weight: 750; } .mvp-progress ol li > span { background: #fff; border: 1px solid var(--line); border-radius: 50%; display: grid; flex: none; font-size: 10px; height: 26px; place-items: center; width: 26px; } .mvp-progress ol li.is-current { color: var(--ink); font-weight: 700; } .mvp-progress ol li.is-current > span { background: var(--stellar-blue); border-color: var(--stellar-blue); color: #fff; } .mvp-progress ol li.is-complete { color: var(--stellar-blue); } .mvp-progress ol li.is-complete > span { background: #e7f3fc; border-color: #8fbce0; color: var(--stellar-blue-dark); font-weight: 900; } .mvp-heading { max-width: 900px; margin-bottom: 47px; } .mvp-heading .eyebrow { color: var(--stellar-blue); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; font-size: 12px; font-weight: 800; } .mvp-heading h1 { letter-spacing: -.055em; margin: 0; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; } .mvp-heading > p:last-child { color: var(--muted); max-width: 760px; margin: 20px 0 0; font-size: 16px; line-height: 1.6; } .mvp-section { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-top: 24px; padding: clamp(24px, 4vw, 40px); } .mvp-section > header { border-bottom: 1px solid #e4ebef; margin-bottom: 25px; padding-bottom: 19px; } .mvp-section > header h2 { color: var(--ink); letter-spacing: -.02em; margin: 0; font-size: 24px; } .mvp-section > header p { color: var(--muted); max-width: 800px; margin: 9px 0 0; font-size: 13px; line-height: 1.5; } .mvp-section > * + * { margin-top: 25px; } .mvp-grid { display: grid; gap: 20px; } .mvp-grid.two { grid-template-columns: repeat(2, 1fr); } .mvp-grid-wide { grid-column: 1 / -1; } .mvp-field, .mvp-field > span, .mvp-field > small { display: block; } .mvp-field > span { color: var(--ink); margin-bottom: 8px; font-size: 13px; font-weight: 800; } .mvp-field > small { color: var(--muted); margin: -2px 0 9px; font-size: 10px; line-height: 1.45; } .mvp-field input, .mvp-field select, .mvp-field textarea { color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; outline: 0; width: 100%; font-size: 13px; } .mvp-field input, .mvp-field select { height: 48px; padding: 0 15px; } .mvp-field select { appearance: none; } .mvp-field textarea { resize: vertical; min-height: 118px; padding: 14px 15px; line-height: 1.55; } .mvp-field input:focus, .mvp-field select:focus, .mvp-field textarea:focus { border-color: var(--stellar-blue); box-shadow: 0 0 0 4px rgba(20, 118, 231, .13); } .mvp-field input[aria-invalid="true"], .mvp-field textarea[aria-invalid="true"] { border-color: var(--error); } .mvp-field em, .mvp-error { color: var(--error); margin-top: 6px; font-size: 11px; font-style: normal; font-weight: 700; display: block; } .mvp-multiselect { border: 0; padding: 0; /* margin-bottom only, NOT the `margin` shorthand: `.mvp-section > * + *` supplies the 25px top margin that spaces every other block in the section, and a shorthand here has equal specificity but comes later, so it silently reset that to 0. That left the pills flush against the next legend and only 6px below the preceding field. */ margin-bottom: 25px; } .mvp-multiselect legend { color: var(--ink); margin-bottom: 11px; font-size: 13px; font-weight: 800; } .mvp-multiselect > div { display: flex; flex-wrap: wrap; gap: 8px; } .mvp-multiselect label { color: var(--muted); cursor: pointer; border: 1px solid var(--line); border-radius: 999px; align-items: center; gap: 7px; min-height: 38px; padding: 7px 12px; font-size: 11px; font-weight: 700; display: inline-flex; position: relative; } .mvp-multiselect input, .mvp-acknowledgment input { opacity: 0; position: absolute; /* The hidden checkbox stretches to nearly the full width of its label (measured 149px of a 151px pill, 13px tall, vertically centred), so it sits exactly where the text is and swallows the hover. Without this the label reads cursor: pointer but the middle of the pill shows the default arrow. Not pointer-events: none - the input must stay directly clickable for assistive tech and for Playwright's check(). */ cursor: pointer; } .mvp-multiselect label > span { display: none; } .mvp-multiselect label.is-selected { border-color: var(--stellar-blue); color: var(--stellar-blue-dark); background: #eaf5ff; } .mvp-multiselect label.is-selected > span { display: inline; } .mvp-pricing-guidance, .mvp-reassurance { border-left: 3px solid var(--stellar-blue); color: var(--muted); background: #eff8ff; border-radius: 8px; padding: 19px 21px; font-size: 12px; line-height: 1.55; } .mvp-pricing-guidance strong { color: var(--stellar-blue-dark); } .mvp-pricing-guidance p { margin: 6px 0 0; } .mvp-reassurance { color: #466b5f; background: #eef9f5; border-left-color: #168263; max-width: 980px; margin: -15px 0 31px; } .mvp-sample-request { color: var(--ink); cursor: pointer; align-items: center; gap: 11px; font-size: 13px; display: flex; position: relative; } .mvp-sample-request input { opacity: 0; position: absolute; cursor: pointer; } .mvp-sample-request > span { color: transparent; border: 1px solid var(--line); border-radius: 5px; flex: none; place-items: center; width: 24px; height: 24px; display: grid; } .mvp-sample-request input:checked + span { border-color: var(--stellar-blue); background: var(--stellar-blue); color: #fff; } .mvp-sample-brief { max-width: 760px; margin-top: 22px; } .mvp-final-notes { background: #fbfdff; border: 1px solid #e1e8ed; border-radius: 14px; margin-top: 24px; padding: 22px 24px; } .mvp-edit-links { display: flex; gap: 18px; } .mvp-edit-links a, .mvp-edit-links button, .mvp-submit-area a { color: var(--stellar-blue); font-size: 11px; font-weight: 800; } .mvp-edit-links button { background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; } .mvp-submit-area { background: #fbfdff; border: 1px solid var(--line); border-radius: 15px; margin-top: 32px; padding: 25px; } .mvp-acknowledgment { color: var(--ink); cursor: pointer; align-items: flex-start; gap: 11px; font-size: 12px; line-height: 1.5; display: flex; position: relative; } .mvp-acknowledgment > span { color: transparent; border: 1px solid var(--line); border-radius: 5px; flex: none; place-items: center; width: 22px; height: 22px; display: grid; } .mvp-acknowledgment input:checked + span { border-color: var(--stellar-blue); background: var(--stellar-blue); color: #fff; } .mvp-submit-area > p:last-child { color: var(--muted); margin: 17px 0 0; font-size: 11px; } .mvp-submit-area em[data-error-for] { color: var(--error); margin-top: 10px; font-size: 11px; font-style: normal; font-weight: 700; display: block; } .mvp-submit-error { color: var(--error); margin: 10px 0 0; font-size: 12px; font-weight: 700; } .mvp-submit-error:empty { display: none; } .mvp-navigation { border-top: 1px solid #dce5eb; justify-content: space-between; align-items: center; gap: 18px; margin-top: 38px; padding-top: 28px; display: flex; } .mvp-primary, .mvp-back { border-radius: 10px; justify-content: center; align-items: center; gap: 10px; min-height: 52px; font-size: 13px; font-weight: 850; text-decoration: none; display: inline-flex; } .mvp-primary { border: 1px solid var(--stellar-blue); color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--stellar-blue), var(--stellar-blue-dark)); min-width: 190px; padding: 11px 18px; } .mvp-primary:disabled { opacity: .6; cursor: wait; } .mvp-back { color: var(--muted); background: none; border: 0; padding: 10px 4px; } .mvp-resource-list { display: grid; gap: 18px; } .mvp-resource-row { background: #fafdff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; position: relative; } .mvp-resource-row > strong { color: var(--ink); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 17px; font-size: 13px; display: block; } .mvp-add-resource, .mvp-remove-resource { color: var(--stellar-blue); cursor: pointer; background: none; border: 0; font-size: 13px; font-weight: 850; } .mvp-add-resource { margin-top: 20px; padding: 10px 0; } .mvp-remove-resource { color: var(--error); padding: 8px 0 0; } .mvp-guidance-intro { border-left: 4px solid var(--stellar-blue); color: #315268; background: #eef7ff; border-radius: 0 13px 13px 0; margin: 42px 0 22px; padding: 22px 24px; } .mvp-guidance-intro strong { color: var(--stellar-blue-dark); margin-bottom: 7px; font-size: 15px; display: block; } .mvp-guidance-intro p { margin: 0; line-height: 1.55; } .mvp-guidance-groups { display: grid; gap: 14px; margin-bottom: 38px; } .mvp-guidance-group { background: #fff; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; } .mvp-guidance-group summary { color: var(--ink); cursor: pointer; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; font-weight: 850; list-style: none; display: flex; } .mvp-guidance-group summary::-webkit-details-marker { display: none; } .mvp-guidance-group summary:after { content: "+"; color: var(--stellar-blue); font-size: 22px; font-weight: 500; } .mvp-guidance-group[open] summary:after { content: "\2212"; } .mvp-guidance-group summary > span { color: var(--muted); letter-spacing: .06em; text-transform: uppercase; background: #eef5fa; border-radius: 999px; margin-left: auto; padding: 5px 9px; font-size: 10px; } .mvp-guidance-group > .mvp-grid { padding: 4px 22px 24px; } .mvp-guidance-field { background: #fbfdff; border: 1px solid #e1e8ed; border-radius: 13px; padding: 18px; } /* The theme renders