/* VAIDSP intake — the pieces that exist only on /apply/ and /application/. Everything shared with the rest of the portal (tokens, typography, form controls, buttons including .idsp-btn-*, section titles, the shell header h1 scale, the legacy inline-span normalization) lives in idsp-portal.css. Lengths are px because bootstrap.min.css sets html { font-size: 10px }. */ /* The stepper JS applies .idsp-intake and .idsp-shell to the page container. Width comes from the global .container rule, so only spacing is set here. */ .idsp-shell { padding-top: clamp(16px, 4vw, 48px); padding-bottom: 64px; } .idsp-shell-header { border-bottom: 1px solid var(--idsp-line); padding-bottom: 20px; margin-bottom: 8px; } .idsp-kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--idsp-ink-soft); margin: 0 0 6px; } /* The injected shell header replaces the stock page furniture. */ .idsp-intake .breadcrumb, .idsp-intake .page-header { display: none; } /* Long certification and requirements text renders through section headings on the entity form. Those are body copy, not display type. */ .idsp-intake .crmEntityFormView h3 { font-family: var(--idsp-font-body); font-size: var(--idsp-fs-prose); font-weight: 400; line-height: 1.65; color: var(--idsp-ink-soft); letter-spacing: 0; } /* -------------------------------------------------------------------------- Stepper -------------------------------------------------------------------------- */ .idsp-stepper { display: flex; list-style: none; margin: 24px 0 40px; padding: 0; counter-reset: idsp-step; } .idsp-stepper li { flex: 1; counter-increment: idsp-step; text-align: center; position: relative; font-size: var(--idsp-fs-ui); color: var(--idsp-ink-soft); padding-top: 38px; } .idsp-stepper li::before { content: counter(idsp-step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; line-height: 30px; border-radius: 50%; border: 2px solid var(--idsp-line); background: var(--idsp-paper); font-family: var(--idsp-font-display); } .idsp-stepper li::after { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--idsp-line); z-index: -1; } .idsp-stepper li:first-child::after { display: none; } .idsp-stepper li.is-current { color: var(--idsp-ink); font-weight: 600; } .idsp-stepper li.is-current::before { border-color: var(--idsp-accent); background: var(--idsp-accent); color: var(--idsp-accent-ink); } .idsp-stepper li.is-done::before { content: "\2713"; border-color: var(--idsp-ok); color: var(--idsp-ok); } .idsp-stepper li.is-done::after { background: var(--idsp-ok); } /* -------------------------------------------------------------------------- Consent dialog. Appended to by the Step 12 script, so it inherits the body font and colour. Button styling comes from idsp-portal.css. -------------------------------------------------------------------------- */ .idsp-consent-overlay { position: fixed; inset: 0; background: rgba(28, 39, 51, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 16px; } .idsp-consent-dialog { background: var(--idsp-paper); border-radius: var(--idsp-radius); max-width: 544px; padding: 32px; border-top: 4px solid var(--idsp-warn); } .idsp-consent-dialog h2 { margin-top: 0; } .idsp-consent-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Apply-page handoff screen -------------------------------------------------------------------------- */ .idsp-handoff { text-align: center; padding: 48px 16px; } .idsp-handoff-fallback { font-size: var(--idsp-fs-ui-sm); color: var(--idsp-ink-soft); } .idsp-handoff-bar { height: 4px; background: var(--idsp-line); border-radius: 2px; max-width: 320px; margin: 24px auto; overflow: hidden; } .idsp-handoff-bar span { display: block; height: 100%; width: 100%; background: var(--idsp-accent); transform: translateX(-100%); animation: idsp-handoff-fill 4s linear forwards; } @keyframes idsp-handoff-fill { to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .idsp-handoff-bar span { animation: none; transform: translateX(0); } } @media (max-width: 767px) { .idsp-stepper li { font-size: var(--idsp-fs-small); } .idsp-consent-actions { flex-direction: column-reverse; } }