/* ========================================================================== Form theme Loads after the vendor stylesheet (`@bankos/bankos-data-form-v2/css`, imported in app/apply/layout.tsx), so equal-specificity rules here win on source order. That is why no selector below is doubled and nothing is marked `!important`. 1. Theme tokens 2. Vendor variable adapter 3. Page shell 4. Shared controls 5. Form inputs 6. Portalled pickers 7. Loan summary and options 8. Portalled loan editor ========================================================================== */ /* 1. Theme tokens ========================================================================== */ :root { --form-color-action: #356b7f; --form-color-action-hover: #295565; --form-color-border: #cbd2c3; --form-color-border-strong: #71853e; --form-color-brand: #4d5d2a; --form-color-brand-hover: #3c4921; --form-color-canvas: #111215; --form-color-disabled: #c3cab8; --form-color-disabled-ink: #5d6a4e; --form-color-field: #e4e8db; --form-color-ink: #263019; --form-color-ink-muted: #566331; --form-color-ink-strong: #334021; --form-color-ink-subtle: #667058; --form-color-on-dark: #fff; --form-color-panel-border: #66763c; --form-color-surface: #f3f4ec; --form-color-surface-hover: #e3e7da; --form-color-surface-muted: #e8ecdf; --form-color-surface-selected: #d5ddc8; --form-color-deep: #4a3352; --form-color-deep-lift: #7d4a8c; --form-color-deep-lift-hover: #63356f; --form-color-warm: #b45f3f; --form-color-warm-strong: #9a4c2f; --form-color-warm-subtle: #c9765a; --form-focus-ring: 0 0 0 0.1875rem rgb(53 107 127 / 18%); --form-focus-ring-strong: 0 0 0 0.1875rem rgb(53 107 127 / 28%); --form-font-family: var(--font-inter), 'Inter', system-ui, sans-serif; --form-radius-control: 0.875rem; --form-radius-panel: 1.25rem; --form-radius-pill: 2rem; --form-transition-fast: 150ms; } /* 2. Vendor variable adapter The package defines its palette on `:root` and reads it back in rules that are marked `!important` (dropdown panels and items, in particular). A declaration cannot `!important` the *value* of a custom property it reads, so redefining these here retints those rules without any specificity or `!important` fight. This block is also what themes the portalled overlays in sections 6 and 8: they render under ``, outside `.form-page-layout`, so `:root` is the only scope whose inherited values reach them. ========================================================================== */ :root { --border-radius: var(--form-radius-control); --color-focus-ring: var(--form-focus-ring); --color-surface: var(--form-color-field); --color-surface-hover: var(--form-color-surface-hover); --color-white: var(--form-color-surface); --consent-link: var(--form-color-brand); --danger-color: var(--form-color-warm-strong); --field-error-bg: color-mix(in srgb, var(--form-color-warm) 10%, transparent); --font-family: var(--form-font-family); --highlight-color: var(--form-color-on-dark); --input-text-color: var(--form-color-ink); --maskbg: rgb(12 14 11 / 58%); --primary-color: var(--form-color-brand); --primary-dark: var(--form-color-brand); --secondary-color: var(--form-color-action); --surface-300: var(--form-color-border); --surface-color: var(--form-color-field); --surface-hover: var(--form-color-surface-hover); --text-color: var(--form-color-ink); --text-color-secondary: var(--form-color-ink-subtle); } .contact-card { --contact-input-muted: var(--form-color-ink-subtle); --contact-input-surface: var(--form-color-field); --contact-input-surface-hover: var(--form-color-surface-hover); --contact-input-text: var(--form-color-ink); --contact-progress-blue: var(--form-color-action); } :root, .consent-transition-panel { --consent-border: var(--form-color-border); /* The required consent's resting border, so the box a user must tick is already marked before they interact with it. */ --consent-border-strong: var(--form-color-deep-lift); --consent-progress-blue: var(--form-color-brand); --consent-surface: var(--form-color-field); --consent-surface-hover: var(--form-color-surface-hover); --consent-text: var(--form-color-ink); --consent-text-muted: var(--form-color-ink-muted); } /* 3. Page shell ========================================================================== */ .form-page-layout .confirmation-card, .form-page-layout .layout-content, .form-page-layout .p-dropdown-panel, .form-page-layout .p-overlaypanel { border-radius: var(--form-radius-panel); } .form-page-layout .confirmation-card, .form-page-layout .p-card { background-color: var(--form-color-surface); border: 2px solid var(--form-color-panel-border); border-top: 4px solid var(--form-color-action); box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%), 0 12px 24px rgba(15, 20, 10, 0.16), 0 2px 6px rgba(15, 20, 10, 0.1); } .form-page-layout .p-card .p-card-content, .form-page-layout .layout-content { padding-block: 0.75rem; } .form-page-layout .p-dropdown-panel .p-dropdown-items { border-radius: inherit; overflow: hidden; } .form-page-layout { background-attachment: fixed; background-color: var(--form-color-canvas); background-image: linear-gradient(135deg, #0c0e0b, var(--form-color-brand)); font-family: var(--form-font-family); isolation: isolate; overflow: hidden; position: relative; } .form-page-layout::before, .form-page-layout::after { --narrow-quarter: calc(0.25 * var(--narrow-stop)); --narrow-stop: calc(0.0625 * var(--pattern-size)); --narrow-stripes: #000 0 var(--narrow-quarter), transparent var(--narrow-quarter) var(--narrow-three-quarters), #000 var(--narrow-three-quarters) var(--narrow-stop); --narrow-three-quarters: calc(0.75 * var(--narrow-stop)); --pattern-size: 8em; content: ''; inset: 0; mask: var(--direction-fade), repeating-linear-gradient(45deg, var(--narrow-stripes)), repeating-linear-gradient(90deg, var(--wide-stripes)), repeating-linear-gradient(-45deg, var(--wide-stripes)); mask-composite: intersect, intersect, intersect; pointer-events: none; position: absolute; z-index: 0; } .form-page-layout::before { --direction-fade: linear-gradient(90deg, transparent, #000); --wide-stripes: transparent 0 calc(0.25 * var(--pattern-size)), #000 calc(0.25 * var(--pattern-size)) calc(0.75 * var(--pattern-size)), transparent calc(0.75 * var(--pattern-size)) var(--pattern-size); background-color: var(--form-color-ink-muted); opacity: 0.3; } .form-page-layout::after { --direction-fade: linear-gradient(90deg, #000, transparent); --wide-stripes: #000 0 calc(0.25 * var(--pattern-size)), transparent calc(0.25 * var(--pattern-size)) calc(0.75 * var(--pattern-size)), #000 calc(0.75 * var(--pattern-size)) var(--pattern-size); background-color: #34401f; opacity: 0.38; } .form-page-layout > * { position: relative; z-index: 1; } /* 4. Shared controls ========================================================================== */ .form-page-layout .custom-progress .p-progressbar-value { background-color: var(--form-color-action); } .form-page-layout .p-button-primary { background-color: var(--form-color-action); border-color: var(--form-color-action); border-radius: var(--form-radius-pill); box-shadow: 0 8px 22px color-mix(in srgb, var(--form-color-action) 24%, transparent); color: var(--form-color-on-dark); font-size: 0.875rem; font-weight: 600; min-height: 2.625rem; padding: 0.625rem 1.375rem; transition: background-color var(--form-transition-fast), border-color var(--form-transition-fast), box-shadow var(--form-transition-fast), transform var(--form-transition-fast); } .form-page-layout .p-button-primary:not(:disabled):hover, .form-page-layout .p-button-primary:not(:disabled):focus { background-color: var(--form-color-action-hover); border-color: var(--form-color-action-hover); color: var(--form-color-on-dark); transform: translateY(-1px); } .form-page-layout .p-button-primary:disabled { background-color: var(--form-color-disabled); border-color: var(--form-color-disabled); box-shadow: none; color: var(--form-color-disabled-ink); opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .form-page-layout .p-button-primary { transition: background-color var(--form-transition-fast), border-color var(--form-transition-fast); } .form-page-layout .p-button-primary:not(:disabled):hover, .form-page-layout .p-button-primary:not(:disabled):focus { transform: none; } } /* Checkboxes gate the submit, so they carry the vivid tone rather than the links do. The plum reads as its own action against the olive copy, and the thicker resting border keeps the empty boxes from looking inert. */ [type='checkbox']:checked, [type='radio']:checked, .form-page-layout .p-checkbox.p-highlight .p-checkbox-box, .form-page-layout .p-checkbox.p-highlight .p-checkbox-box:hover { background-color: var(--form-color-deep-lift); border-color: var(--form-color-deep-lift); color: var(--form-color-on-dark); } /* The wrapper is a 44px touch target holding a 20px box, but ships as `align-items/justify-content: flex-start`, which pins the box to the top-left corner of its own hit area. Centring horizontally fixes that; vertically the box stays near the top and is nudged to the first text line's optical centre, since these labels wrap to two lines and a fully centred box would hang between them. The 44px target is unchanged. */ .form-page-layout .p-checkbox { align-items: flex-start; justify-content: center; } .form-page-layout .consent-transition-panel .field-checkbox > .p-checkbox .p-checkbox-box { margin-top: 0.0625rem; } .form-page-layout .p-checkbox .p-checkbox-box { border-width: 2px; transition: background-color var(--form-transition-fast), border-color var(--form-transition-fast), box-shadow var(--form-transition-fast); } .form-page-layout .p-checkbox:not(.p-disabled):not(.p-highlight):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: color-mix(in srgb, var(--form-color-deep-lift) 7%, transparent); border-color: var(--form-color-deep-lift); } .form-page-layout .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background-color: var(--form-color-deep-lift-hover); border-color: var(--form-color-deep-lift-hover); color: var(--form-color-on-dark); } .form-page-layout .p-checkbox .p-checkbox-input:focus-visible + .p-checkbox-box { border-color: var(--form-color-deep-lift); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--form-color-deep-lift) 22%, transparent); } .form-page-layout .p-slider .p-slider-range { background-color: var(--form-color-action); } .form-page-layout .p-slider .p-slider-handle { background-color: var(--form-color-action); border-color: var(--form-color-action); } .form-page-layout .p-inputtext:enabled:focus, .form-page-layout .p-dropdown:not(.p-disabled).p-focus { border-color: var(--form-color-action); box-shadow: var(--form-focus-ring); } .form-page-layout .p-card { border-radius: 1.5rem; } /* Teal into aubergine, so the filled span deepens as the applicant advances. The indicator is sized by width, so the gradient is painted across the full track and clipped to the fill — otherwise it would compress into whatever span is filled and end on aubergine at every step. */ .form-page-layout .progress-indicator { background-attachment: local; background-color: var(--form-color-action); background-image: linear-gradient(90deg, var(--form-color-action), var(--form-color-deep)); background-repeat: no-repeat; background-size: var(--form-progress-span, 100cqi) 100%; } .form-page-layout .progress-track { container-type: inline-size; } .form-page-layout .progress-track { background-color: color-mix(in srgb, var(--form-color-action) 15%, transparent); } /* Ships as a third green (#065f46) unrelated to either theme colour. Moving it onto the action tone makes the trust line read as a deliberate accent. */ .form-page-layout .secure-text, .form-page-layout .secure-text svg { color: var(--form-color-action); } /* Consent links inherit their colour from the surrounding copy upstream, so they read as body text with an underline. These stay on the brand olive — they are secondary to the checkboxes, so they get legibility rather than vibrancy — with a softened underline that firms up on hover. The named consent links are targeted by id upstream (`#termsOfServiceUrl` and friends, at `--primary-color`), so the ids are matched here rather than the anchor class — a class selector loses to them. */ #dataProcessingUrl, #privacyPolicyUrl, #sponsorshipUrl, #termsOfServiceUrl, .form-page-layout .consent-transition-panel :is(.label, .terms) a.formv2-url, .form-page-layout .consent-transition-panel .formv2-link-button, .form-page-layout .partner-consent-summary .partner-consent-show-link { color: var(--form-color-brand); text-decoration-color: color-mix(in srgb, var(--form-color-brand) 45%, transparent); text-underline-offset: 0.15em; transition: color var(--form-transition-fast), text-decoration-color var(--form-transition-fast); } #dataProcessingUrl:hover, #privacyPolicyUrl:hover, #sponsorshipUrl:hover, #termsOfServiceUrl:hover, .form-page-layout .consent-transition-panel :is(.label, .terms) a.formv2-url:hover, .form-page-layout .consent-transition-panel .formv2-link-button:hover, .form-page-layout .partner-consent-summary .partner-consent-show-link:hover { color: var(--form-color-brand-hover); text-decoration-color: currentcolor; } /* 5. Form inputs ========================================================================== */ /* `--contact-progress-blue` is the action tone so the focus-within icon picks it up, but the package also mixes 22% of it into the resting border, which cools the field at rest. Pinning the idle border keeps the accent to focus. The masked phone input also carries a hardcoded 10px radius upstream (`input.p-inputmask.p-inputtext`) while every other field resolves the shared control radius, so the two contact fields disagreed at the corners. */ .form-page-layout .contact-form :is(.p-inputtext, input.p-inputmask.p-inputtext, .formv2-inputmask) { border-color: var(--form-color-border); border-radius: var(--form-radius-control); } .form-page-layout .contact-form :is(.p-inputtext, input.p-inputmask.p-inputtext, .formv2-inputmask):enabled:focus { border-color: var(--form-color-action); } .form-page-layout .p-dropdown, .form-page-layout .p-multiselect, .form-page-layout .p-calendar .p-inputtext { background-color: var(--form-color-field); border-color: var(--form-color-border); color: var(--form-color-ink); } .form-page-layout .p-dropdown:not(.p-disabled):hover, .form-page-layout .p-multiselect:not(.p-disabled):hover, .form-page-layout .p-calendar:not(.p-disabled):hover .p-inputtext { border-color: var(--form-color-border-strong); } .form-page-layout .p-dropdown:not(.p-disabled).p-focus, .form-page-layout .p-multiselect:not(.p-disabled).p-focus, .form-page-layout .p-calendar:not(.p-disabled).p-focus .p-inputtext { border-color: var(--form-color-action); box-shadow: var(--form-focus-ring); } .form-page-layout .p-dropdown-trigger, .form-page-layout .p-multiselect-trigger { color: var(--form-color-ink-muted); } .form-page-layout .p-selectbutton { border: 1px solid var(--form-color-border); border-radius: var(--form-radius-control); box-shadow: none; overflow: hidden; } .form-page-layout .p-selectbutton .p-button { background-color: var(--form-color-field); border: 0; border-right: 1px solid var(--form-color-border); color: var(--form-color-brand-hover); } .form-page-layout .p-selectbutton .p-button:last-child { border-right: 0; } .form-page-layout .p-selectbutton .p-button:not(.p-highlight):hover { background-color: var(--form-color-surface-hover); } .form-page-layout .p-selectbutton .p-button.p-highlight { background-color: var(--form-color-brand); box-shadow: none; color: var(--form-color-on-dark); } .form-page-layout .p-selectbutton .p-button:focus-visible { box-shadow: inset var(--form-focus-ring-strong); } .form-page-layout .p-calendar .p-datepicker-trigger { border-color: var(--form-color-brand); color: var(--form-color-on-dark); } .form-page-layout .p-calendar .p-datepicker-trigger:hover, .form-page-layout .p-calendar .p-datepicker-trigger:focus { border-color: var(--form-color-brand-hover); } /* 6. Portalled pickers Dropdowns, multiselects and calendars render under ``, outside `.form-page-layout`, so these selectors cannot be scoped to the form root without a change to the package. They inherit the palette from section 2; what remains here is the shape and the states the package leaves unstyled. ========================================================================== */ .p-dropdown-panel, .p-multiselect-panel, .p-datepicker { background-color: var(--form-color-surface); border: 1px solid #aeb99b; border-radius: 1rem; box-shadow: 0 18px 42px rgba(15, 20, 10, 0.24); color: var(--form-color-ink); overflow: hidden; } .p-dropdown-panel .p-dropdown-header, .p-multiselect-panel .p-multiselect-header, .p-datepicker .p-datepicker-header { background-color: var(--form-color-surface-muted); border-color: var(--form-color-border); color: var(--form-color-ink); } .p-dropdown-panel .p-dropdown-empty-message, .p-multiselect-panel .p-multiselect-empty-message { color: var(--form-color-ink-subtle); } .p-dropdown-panel .p-dropdown-filter, .p-multiselect-panel .p-multiselect-filter { background-color: #f7f8f3; border-color: var(--form-color-border); color: var(--form-color-ink); } .p-dropdown-panel .p-dropdown-filter:focus, .p-multiselect-panel .p-multiselect-filter:focus { border-color: var(--form-color-action); box-shadow: var(--form-focus-ring); } .p-multiselect-panel .p-multiselect-item { background-color: transparent; color: var(--form-color-ink-strong); } .p-multiselect-panel .p-multiselect-item:not(.p-disabled):hover, .p-multiselect-panel .p-multiselect-item.p-focus { background-color: var(--form-color-surface-hover); } .p-multiselect-panel .p-multiselect-item.p-highlight { background-color: var(--form-color-surface-selected); color: var(--form-color-ink); font-weight: 600; } .p-dropdown-panel .p-dropdown-item.p-highlight { font-weight: 600; } .p-datepicker .p-datepicker-header .p-datepicker-title, .p-datepicker .p-datepicker-header .p-datepicker-title button, .p-datepicker table th, .p-datepicker table td > span { color: var(--form-color-ink-strong); } .p-datepicker .p-datepicker-prev, .p-datepicker .p-datepicker-next { color: var(--form-color-ink-muted); } .p-datepicker .p-datepicker-prev:hover, .p-datepicker .p-datepicker-next:hover, .p-datepicker table td > span:not(.p-highlight):hover { background-color: var(--form-color-surface-hover); color: var(--form-color-ink); } .p-datepicker table td.p-datepicker-today > span { background-color: var(--form-color-surface-muted); border-color: var(--form-color-border-strong); color: var(--form-color-brand-hover); } .p-datepicker table td > span.p-highlight { background-color: var(--form-color-brand); color: var(--form-color-on-dark); } /* 7. Loan summary and options ========================================================================== */ .form-page-layout .loan-summary-card { background-image: linear-gradient(135deg, var(--form-color-brand-hover), #5f7134); border: 1px solid var(--form-color-border-strong); border-radius: 1rem; box-shadow: 0 10px 24px rgba(24, 31, 15, 0.18); } .form-page-layout .loan-summary-card .loan-amount-value, .form-page-layout .loan-summary-card .loan-period, .form-page-layout .loan-summary-card .loan-period-value { color: var(--form-color-on-dark); } .form-page-layout .loan-summary-card .edit-button { background-color: var(--form-color-surface); border: 1px solid var(--form-color-surface-selected); border-radius: var(--form-radius-pill); box-shadow: 0 4px 12px rgba(20, 25, 14, 0.16); color: var(--form-color-action); } .form-page-layout .loan-summary-card .edit-button:hover, .form-page-layout .loan-summary-card .edit-button:focus-visible { background-color: var(--form-color-surface-muted); border-color: #b9c5a8; color: var(--form-color-action-hover); } .form-page-layout .option-button { background-color: #eff1eb; border: 1px solid var(--form-color-border); border-radius: var(--form-radius-control); box-shadow: 0 1px 2px rgba(24, 31, 15, 0.04); color: var(--form-color-ink); transition: background-color var(--form-transition-fast), border-color var(--form-transition-fast), box-shadow var(--form-transition-fast), transform var(--form-transition-fast); } .form-page-layout .option-button:hover { background-color: var(--form-color-surface-hover); border-color: var(--form-color-border-strong); box-shadow: 0 5px 14px rgba(24, 31, 15, 0.1); transform: translateY(-1px); } .form-page-layout .option-button:focus-visible { border-color: var(--form-color-action); box-shadow: var(--form-focus-ring); } /* Olive on an olive grid made the chosen tile hard to spot, so the warm tone marks the user's own selection. */ .form-page-layout .option-button.selected { background-color: color-mix(in srgb, var(--form-color-warm) 8%, var(--form-color-surface)); border-color: var(--form-color-warm); box-shadow: inset 0 0 0 1px var(--form-color-warm); color: var(--form-color-warm-strong); } @media (prefers-reduced-motion: reduce) { .form-page-layout .option-button:hover { transform: none; } } /* 8. Portalled loan editor The loan editor is a PrimeReact dialog, portalled under `` like the pickers above, so it is likewise unscoped. The package themes it with literal colours rather than variables, so section 2 does not reach it. ========================================================================== */ /* The scrim colour itself comes from `--maskbg` in section 2. */ .p-dialog-mask.p-component-overlay { backdrop-filter: blur(0.125rem); } .p-dialog { background-color: var(--form-color-surface); border: 2px solid var(--form-color-panel-border); border-radius: 1.5rem; border-top: 4px solid var(--form-color-action); box-shadow: 0 22px 54px rgba(10, 14, 7, 0.3), 0 4px 12px rgba(10, 14, 7, 0.18); overflow: hidden; } .p-dialog .p-dialog-header, .p-dialog .p-dialog-content, .p-dialog .p-dialog-footer { background-color: var(--form-color-surface); color: var(--form-color-ink); } .p-dialog .p-dialog-header { border-radius: 0; padding: 1.5rem 1.5rem 1rem; } .p-dialog .p-dialog-header .p-dialog-title { color: var(--form-color-ink); } .p-dialog .p-dialog-header .p-dialog-header-icon { color: var(--form-color-ink-muted); } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { background-color: var(--form-color-surface-hover); color: var(--form-color-brand-hover); } .p-dialog .dialog-amount-buttons { color: var(--form-color-brand-hover); } .p-dialog .dialog-amount-value, .p-dialog .dialog-day-value { background-color: transparent; color: var(--form-color-brand-hover); } .p-dialog .dialog-amount-button { background-color: var(--form-color-surface-hover); border: 1px solid #c4cdb6; color: var(--form-color-brand); } .p-dialog .dialog-amount-button:focus, .p-dialog .dialog-amount-button:hover { background-color: var(--form-color-surface-selected); border-color: var(--form-color-border-strong); } .p-dialog .dialog-slider .p-slider { background-color: #d9ded2; } .p-dialog .dialog-slider .p-slider-range { background-color: var(--form-color-brand); } .p-dialog .dialog-slider .p-slider-handle { background-color: var(--form-color-surface); border-color: var(--form-color-brand); } .p-dialog .dialog-slider-labels { color: var(--form-color-ink-subtle); } .p-dialog .dialog-footer .p-button-primary { background-color: var(--form-color-action); border-color: var(--form-color-action); border-radius: var(--form-radius-pill); box-shadow: 0 8px 20px rgb(53 107 127 / 20%); color: var(--form-color-on-dark); } .p-dialog .dialog-footer .p-button-primary:hover, .p-dialog .dialog-footer .p-button-primary:focus { background-color: var(--form-color-action-hover); border-color: var(--form-color-action-hover); color: var(--form-color-on-dark); } .p-dialog .dialog-footer-text { color: var(--form-color-brand); }