/* VP Capture Form — Paramount Financial vendor-partner enrollment. Styling matches the credit application at apply.paramountfinancial.com. Source of truth: the heritage token + component system shipped in the credit application's build (assets/index-*.css). Token values and every .pf-* rule below are transcribed from that build so the two products stay identical. Scoping note: the component rules are scoped under .pf-page so this sheet can also be enqueued inside WordPress without touching the surrounding theme. The standalone page adds class="pf-root" to to claim the full viewport. */ /* ---- tokens ------------------------------------------------------------- */ :root { /* Brand */ --pf-navy: #1E3461; --pf-navy-deep: #152648; --pf-navy-soft: #243B6B; --pf-blue: #1B5497; --pf-cyan: #1B6FA3; --pf-cyan-soft: #5FAFD4; --pf-peach: #FFBC7D; --pf-peach-soft: #FFE4CC; /* Neutral / surface */ --pf-ink: #1A1F2E; --pf-body: #4E5054; --pf-muted: #6B7280; --pf-line: #E2E2E2; --pf-line-cool: #C1CBD2; --pf-surface: #FFFFFF; --pf-surface-tint: #F1F4FF; --pf-surface-cool: #ECEEF0; --pf-surface-warm: #FBF8F4; /* System */ --pf-success: #1E7A4C; --pf-warning: #B45309; --pf-danger: #B42318; /* Type */ --pf-display: "Hedvig Letters Serif", "Source Serif Pro", Georgia, serif; --pf-body-font: "Karla", "Inter", system-ui, -apple-system, sans-serif; --pf-ui-font: "Inter", system-ui, -apple-system, sans-serif; /* Radius */ --pf-radius-md: 8px; --pf-radius-lg: 14px; --pf-radius-xl: 20px; --pf-radius-pill: 999px; /* Elevation — navy-tinted, never pure black */ --pf-shadow-sm: 0 1px 2px rgba(26,31,46,0.06); --pf-shadow-md: 0 6px 24px -10px rgba(26,31,46,0.18); --pf-shadow-lg: 0 24px 60px -24px rgba(26,31,46,0.28); /* Motion */ --pf-ease: cubic-bezier(0.22, 1, 0.36, 1); --pf-dur-fast: 120ms; --pf-dur-base: 220ms; --pf-dur-slow: 420ms; /* Focus ring */ --pf-focus-ring: 0 0 0 3px rgba(45,148,205,0.18); /* Semantic aliases — white-label themes override THESE, never the raw --pf-*. */ --primary-color: var(--pf-navy); --primary-light: var(--pf-surface-tint); --secondary-color: var(--pf-cyan); --success-color: var(--pf-success); --warning-color: var(--pf-warning); --danger-color: var(--pf-danger); --background-color: var(--pf-surface-tint); --text-color: var(--pf-body); --text-light: var(--pf-muted); --border-color: var(--pf-line-cool); --card-shadow: var(--pf-shadow-md); --card-shadow-hover: var(--pf-shadow-lg); } /* ---- standalone page only ----------------------------------------------- */ html.pf-root, html.pf-root body { margin: 0; padding: 0; background: var(--pf-surface-warm); } html.pf-root { -webkit-text-size-adjust: 100%; } /* ---- page shell ---------------------------------------------------------- */ .pf-page { min-height: 100dvh; background: var(--pf-surface-warm); color: var(--pf-body); font-family: var(--pf-body-font); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pf-page *, .pf-page *::before, .pf-page *::after { box-sizing: border-box; } .pf-shell { max-width: 720px; margin: 0 auto; padding: 0 20px; } .pf-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 14px; } .pf-header__logo { display: flex; align-items: center; min-height: 44px; } .pf-header__logo img { height: 44px; object-fit: contain; } .pf-header__note { font-family: var(--pf-ui-font); font-size: 13px; color: var(--pf-muted); display: inline-flex; align-items: center; gap: 6px; } .pf-main { padding: 28px 0 72px; } /* ---- display type -------------------------------------------------------- */ .pf-eyebrow { font-family: var(--pf-ui-font); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-cyan); margin: 0 0 14px; } .pf-title { font-family: var(--pf-display); font-weight: 400; font-size: 34px; line-height: 1.06; letter-spacing: -0.01em; color: var(--pf-navy); margin: 0 0 14px; } .pf-lede { font-family: var(--pf-body-font); font-size: 17px; line-height: 1.55; color: var(--pf-body); margin: 0 0 28px; max-width: 56ch; } /* The lede element stays in the markup as a placeholder for copy that is still being written. It takes no space until it has content. */ .pf-lede:empty { display: none; } .pf-section { margin-top: 36px; } .pf-section__title { font-family: var(--pf-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--pf-navy); margin: 0 0 16px; } /* ---- form primitives ----------------------------------------------------- */ .pf-form { display: flex; flex-direction: column; gap: 22px; } .pf-row { display: grid; gap: 22px; } .pf-field { display: flex; flex-direction: column; gap: 6px; } .pf-label { font-family: var(--pf-ui-font); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--pf-ink); } .pf-label__req { color: var(--pf-danger); margin-left: 2px; } .pf-optional { color: var(--pf-muted); font-weight: 400; font-size: 12px; margin-left: 6px; } .pf-input, .pf-select, .pf-textarea { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 52px; padding: 14px 16px; background: var(--pf-surface); border: 1px solid var(--pf-line-cool); border-radius: var(--pf-radius-md); font-family: var(--pf-body-font); font-size: 16px; color: var(--pf-ink); transition: border-color var(--pf-dur-fast) var(--pf-ease), box-shadow var(--pf-dur-fast) var(--pf-ease); } .pf-textarea { height: auto; min-height: 104px; line-height: 1.5; resize: vertical; } .pf-input::placeholder, .pf-textarea::placeholder { color: var(--pf-muted); } .pf-input:focus, .pf-select:focus, .pf-textarea:focus { outline: none; border-color: var(--pf-cyan); box-shadow: var(--pf-focus-ring); } .pf-input--error, .pf-select--error, .pf-textarea--error { border-color: var(--pf-danger); } .pf-input--error:focus, .pf-select--error:focus, .pf-textarea--error:focus { box-shadow: 0 0 0 3px rgba(180,35,24,0.14); } .pf-help { font-family: var(--pf-body-font); font-size: 13px; color: var(--pf-muted); } .pf-error { font-family: var(--pf-ui-font); font-size: 12.5px; color: var(--pf-danger); display: flex; align-items: center; gap: 5px; } .pf-error:empty { display: none; } .pf-link { color: var(--pf-blue); text-decoration: underline; text-underline-offset: 2px; } .pf-link:hover { color: var(--pf-navy); } .pf-link:focus-visible { outline: none; box-shadow: var(--pf-focus-ring); border-radius: 3px; } /* ---- buttons ------------------------------------------------------------- */ .pf-btn { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; border-radius: var(--pf-radius-md); height: 52px; padding: 0 26px; font-family: var(--pf-ui-font); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--pf-dur-base) var(--pf-ease), border-color var(--pf-dur-base) var(--pf-ease), color var(--pf-dur-base) var(--pf-ease); } .pf-btn--primary { background: var(--pf-navy); color: #fff; } .pf-btn--primary:hover:not(:disabled) { background: var(--pf-navy-deep); } .pf-btn--block { width: 100%; } .pf-btn:disabled { background: var(--pf-surface-cool); color: var(--pf-muted); border-color: transparent; cursor: not-allowed; } .pf-btn:focus-visible { outline: none; box-shadow: var(--pf-focus-ring); } .pf-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; } .pf-cta__note { font-family: var(--pf-body-font); font-size: 13px; color: var(--pf-muted); margin: 0; text-align: center; } /* ---- card / banner / chip ------------------------------------------------ */ .pf-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-md); padding: 24px; } .pf-card__title { font-family: var(--pf-display); font-weight: 500; font-size: 20px; color: var(--pf-navy); margin: 0 0 8px; } .pf-card p { margin: 0; } /* Dedicated-agent card. The credit application builds these rows with inline styles because it has no classes for them; the values here match its computed styles. */ .pf-card__meta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .pf-card__row { display: flex; align-items: flex-start; gap: 10px; font-family: var(--pf-body-font); font-size: 15px; line-height: 1.4; color: var(--pf-muted); } .pf-card__row svg { flex: none; margin-top: 2px; color: var(--pf-muted); } /* Link rows are taller on purpose: 44px is the minimum tap target. */ .pf-card__row--link { align-items: center; min-height: 44px; } .pf-card__row--link svg { margin-top: 0; } .pf-card__note { margin-top: 16px; font-family: var(--pf-body-font); font-size: 14px; line-height: 1.5; color: var(--pf-muted); } .vp-rep-card { margin-top: 28px; } .pf-banner { border-radius: var(--pf-radius-lg); padding: 18px 20px; display: flex; gap: 12px; align-items: flex-start; font-family: var(--pf-body-font); font-size: 14px; line-height: 1.5; } .pf-banner svg { flex: none; margin-top: 2px; } .pf-banner--warn { background: var(--pf-peach-soft); border: 1px solid var(--pf-warning); color: #6B3D08; } .pf-banner--danger { background: #FBEAE9; border: 1px solid var(--pf-danger); color: #7A1B14; } .pf-banner--success { background: #E7F2EC; border: 1px solid var(--pf-success); color: #14593A; } .pf-footer { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--pf-line); display: flex; flex-wrap: wrap; gap: 8px; } .pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--pf-surface-tint); color: var(--pf-navy); border-radius: var(--pf-radius-pill); font-family: var(--pf-ui-font); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } /* ---- utilities ----------------------------------------------------------- */ /* Visible to a screen reader, not to the eye. The credit application has no equivalent utility yet; that gap is logged on its side. */ .pf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- form-specific ------------------------------------------------------- */ /* No min-height here. Cloudflare's invisible test key renders a zero-size widget, and a reserved band would leave a permanent empty gap above the button. A real visible widget sizes the container itself. */ .vp-turnstile:empty { display: none; } .vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .vp-done { display: none; } .vp-done.is-visible { display: block; } /* The success card is focused programmatically so a screen reader lands on it. That is not a keyboard interaction, so it takes no ring — :focus-visible still does. */ .vp-done:focus { outline: none; } .vp-done:focus-visible { outline: none; box-shadow: var(--pf-shadow-md), var(--pf-focus-ring); } .vp-banner { display: none; } .vp-banner.is-visible { display: flex; } /* ---- responsive ---------------------------------------------------------- */ @media (max-width: 560px) { .pf-header { flex-direction: column; align-items: flex-start; gap: 10px; } .pf-header__note { font-size: 12px; } } @media (min-width: 640px) { .pf-row--two { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .pf-title { font-size: 48px; } .pf-main { padding-top: 36px; } .pf-card { padding: 28px; } } @media (prefers-reduced-motion: reduce) { .pf-page *, .pf-page *::before, .pf-page *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }