/* ── FRAIT Carrier Onboarding ─────────────────────────────────────────────── */ /* ── Brand tokens ──────────────────────────────────────────────────────────── */ :root { --frait-purple: #262150; --frait-purple-dk: #1a163a; --frait-teal: #26c4ce; --frait-teal-dk: #1da8b2; --frait-teal-lt: #5dd8e0; --frait-purple-lt: #5a56a0; } /* ── Tune Bootstrap 5.3 dark theme to FRAIT purple-dark palette ───────────── Bootstrap applies these when data-bs-theme="dark" is on . */ [data-bs-theme=dark] { --bs-body-bg: #0d0c1a; --bs-body-bg-rgb: 13, 12, 26; --bs-body-color: #e4e1f0; --bs-body-color-rgb: 228, 225, 240; --bs-secondary-bg: #15132a; --bs-tertiary-bg: #1d1b33; --bs-secondary-color: rgba(228, 225, 240, .6); --bs-tertiary-color: rgba(228, 225, 240, .38); --bs-emphasis-color: #fff; --bs-border-color: #2a2748; --bs-border-color-translucent: rgba(42, 39, 72, .5); --bs-link-color: var(--frait-teal); --bs-link-hover-color: var(--frait-teal-lt); --bs-code-color: #a0d8ef; /* Form validation colours in dark */ --bs-form-valid-color: #75b798; --bs-form-valid-border-color: #75b798; --bs-form-invalid-color: #ea868f; --bs-form-invalid-border-color: #ea868f; } /* ── Shell ─────────────────────────────────────────────────────────────────── */ html, body { height: 100%; } .ob-shell { min-height: 100vh; display: flex; flex-direction: column; background-color: #0d0c1a; } .ob-main { flex: 1; } /* ── Header ────────────────────────────────────────────────────────────────── */ .ob-header { background: var(--frait-purple); border-bottom: 3px solid var(--frait-teal); } .ob-frait-logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; } /* Vertical separator between FRAIT logo and broker company identity */ .ob-logo-sep { width: 1px; height: 28px; background: rgba(255,255,255,.2); flex-shrink: 0; } .ob-logo { max-height: 44px; max-width: 200px; object-fit: contain; } .ob-company-name { color: #fff; font-weight: 600; font-size: 1.1rem; } .ob-powered { font-size: 0.75rem; color: rgba(255,255,255,.5); } .ob-powered strong { color: var(--frait-teal); } /* ── Step progress bar ─────────────────────────────────────────────────────── */ .ob-steps-bar { background: #15132a; border-bottom: 1px solid #2a2748; } .ob-steps-track { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 0; padding: 1rem 0; } .ob-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; } .ob-step-connector { width: 56px; height: 2px; background-color: #2a2748; margin-top: 15px; flex-shrink: 0; transition: background-color .2s; } .ob-step-connector--done { background-color: var(--frait-teal); } .ob-bubble { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; border: 2px solid #2a2748; background: #1d1b33; color: #7b78a0; transition: all .2s; } .ob-step-label { font-size: 0.6875rem; color: #7b78a0; white-space: nowrap; text-align: center; line-height: 1.2; } .ob-step--active .ob-bubble { border-color: var(--frait-teal); background-color: var(--frait-teal); color: #0d0c1a; } .ob-step--active .ob-step-label { color: var(--frait-teal); font-weight: 600; } .ob-step--complete .ob-bubble { border-color: var(--frait-teal); background-color: var(--frait-teal); color: #0d0c1a; } .ob-step--complete .ob-step-label { color: var(--frait-teal-dk); } /* ── Content card ──────────────────────────────────────────────────────────── */ .ob-card { background: #15132a; border: 1px solid #2a2748; border-radius: 0.5rem; box-shadow: 0 4px 24px rgba(0,0,0,.45); padding: 2rem; } .ob-card-title { font-size: 1.25rem; font-weight: 700; color: var(--frait-teal); margin-bottom: 0.25rem; } .ob-card-subtitle { color: #7b78a0; font-size: 0.9rem; margin-bottom: 1.5rem; } .ob-section-heading { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--frait-teal); border-bottom: 1px solid #2a2748; padding-bottom: .4rem; margin-bottom: 1rem; margin-top: 1.75rem; } /* ── Join / invite card ────────────────────────────────────────────────────── */ .ob-invite-card { max-width: 500px; margin: 3rem auto; } .ob-invite-logo { max-height: 72px; max-width: 240px; object-fit: contain; } /* ── Nav buttons ───────────────────────────────────────────────────────────── */ .ob-nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #2a2748; } /* ── Footer ────────────────────────────────────────────────────────────────── */ .ob-footer { background: var(--frait-purple); font-size: 0.8rem; color: rgba(255,255,255,.4); text-align: center; padding: .75rem 0; } .ob-footer a { color: var(--frait-teal); text-decoration: none; } .ob-footer a:hover { color: #fff; } /* ── Drop zone ─────────────────────────────────────────────────────────────── */ .ob-dropzone { border: 2px dashed #2a2748; border-radius: .5rem; padding: 2rem; text-align: center; cursor: pointer; background: #1d1b33; transition: border-color .2s, background .2s; } .ob-dropzone:hover, .ob-dropzone.dragover { border-color: var(--frait-teal); background-color: rgba(38, 196, 206, .07); } /* ── Primary button (FRAIT teal) ───────────────────────────────────────────── */ .btn-primary { --bs-btn-bg: var(--frait-teal); --bs-btn-border-color: var(--frait-teal); --bs-btn-hover-bg: var(--frait-teal-dk); --bs-btn-hover-border-color: var(--frait-teal-dk); --bs-btn-active-bg: var(--frait-teal-dk); --bs-btn-color: #0d0c1a; color: #0d0c1a !important; } .btn-primary:focus-visible { box-shadow: 0 0 0 .25rem rgba(38, 196, 206, .35); } /* ── Signature canvas ──────────────────────────────────────────────────────── */ canvas { background-color: #1d1b33 !important; border-color: #2a2748 !important; } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 576px) { .ob-card { padding: 1.25rem; } .ob-step-connector { width: 28px; } .ob-step-label { font-size: 0.625rem; } }