/* ============================================================ FORM THEME — FileBankruptcyHelp.com Evaluation Lander ------------------------------------------------------------ Form-system overrides only. Anything outside `.fb-shell` lives in site.css. Loaded after builder.css so these rules win on conflict. Brand palette: navy #203769 — radio "bttn" hover, primary red #a91013 — Next/Submit CTA, progress bar, accents blue #2eaef1 — input focus ring (preserved from original) text #292929 ============================================================ */ /* ----- 1. Base palette + tokens ----------------------------- */ .fb-shell { --fb-primary: #4283e8; --fb-primary-hover: #203769; --fb-primary-contrast: #ffffff; --fb-focus-ring: rgba(46, 174, 241, 0.4); --fb-input-border: #a4a4a4; --fb-input-bg: #ffffff; --fb-text: #292929; --fb-muted: #666666; --fb-radius: 6px; --fb-font-body: 'Roboto', 'Open Sans', Arial, sans-serif; --fb-font-heading: var(--fb-font-body); /* Next + Submit: Bootstrap-blue, matching the legacy .btn-primary styling. (Legacy radio .bttn was #4283e8; Next was a different Bootstrap blue that darkens on hover.) */ --fb-btn-next-bg: #0d6efd; --fb-btn-next-hover: #0b5ed7; --fb-btn-next-text: #ffffff; --fb-btn-submit-bg: #0d6efd; --fb-btn-submit-hover: #0b5ed7; --fb-btn-submit-text: #ffffff; } /* ----- 2. Container — fit inside site's .content section --- The project's default form-wrapper draws a white card with a shadow (it's designed for sites that don't have their own container). This site already nests the form inside a white .content panel, so we strip the wrapper's own card styling to avoid the "white box inside a white box" look. ------------------------------------------------------------ */ .fb-shell { max-width: 500px; margin: 0 auto; } .fb-shell #form-wrapper { padding: 0; background: transparent; border-radius: 0; box-shadow: none; } /* ----- 3. Progress bar — always visible + red -------------- Project default hides #progress_wrapper until something reveals it; this site shows it from slide 1. ------------------------------------------------------------ */ .fb-shell #progress_wrapper { display: block; max-width: 300px; margin: 10px auto 16px; } .fb-shell .progress { height: 10px; } .fb-shell #progress-bar { background-color: #a91013; } .fb-shell #percent { text-align: center; font-size: 12px; color: #525252; } /* ----- 4. Slide typography — match legacy form.css sizing - Old form.css had `.form-step h2 { font-size: 22pt }` and `h3 { font-size: 12pt }`. Builder default is 1.5rem/24px for h2, which reads small next to the legacy. ------------------------------------------------------------ */ .fb-shell .form-step h2 { font-size: 22pt; font-weight: 700; color: #292929; line-height: 1.2; } .fb-shell .form-step h3 { font-size: 12pt; color: #666666; font-weight: 400; } /* ----- 5. Radio "bttn" — match legacy form.css ------------- Legacy form.css set 20px / 700, padding 10px, 5px radius, no border, with #4283e8 background → #203769 on hover. Project default is 1.125rem (18px) / 600 with a 2px border; override to match. ------------------------------------------------------------ */ .fb-shell .bttn { font-size: 20px; font-weight: 700; padding: 10px; border: none; border-radius: 5px; margin: 5px auto; min-height: 0; line-height: 1.2; } /* Keep .bttn the same blue on hover/active. The default theme inherits #4283e8 → #203769 (dark navy) on hover/active, which made auto-advanced choices look "pre-selected" to users landing on a later slide. Lock everything to the resting blue so nothing ever looks chosen by default. */ .fb-shell .bttn:hover, .fb-shell .bttn.active, .fb-shell .bttn:active { background: #4283e8; border-color: #4283e8; color: #ffffff; transform: none; } @media (max-width: 650px) { .fb-shell .bttn { width: 100%; padding: 10px 8px; } } /* ----- 6. Inputs — preserve focus ring + original sizing --- Light-blue (#2eaef1) ring matches the original's input focus color. Project default uses primary-color focus, which would be navy here — too heavy. ------------------------------------------------------------ */ .fb-shell input[type="text"], .fb-shell input[type="email"], .fb-shell input[type="tel"], .fb-shell input[type="number"], .fb-shell select { font-size: 1.25rem; } .fb-shell input[type="text"]:focus, .fb-shell input[type="email"]:focus, .fb-shell input[type="tel"]:focus, .fb-shell input[type="number"]:focus, .fb-shell select:focus { border-color: #2eaef1; box-shadow: 0 0 0 0.2rem var(--fb-focus-ring); } /* ----- 7. Wide Next + Submit, sized to match legacy -------- Slide 1 is a solo Next (no Prev+Next row in this flow), so making every Next span 100% is safe everywhere it appears. Legacy form.css set Next/Submit to 1.25rem (20px) / bold / 14px padding. Match that and strip the builder default 2px border. */ .fb-shell .fb-btn-next, .fb-shell .fb-btn-submit { font-size: 1.25rem; font-weight: bold; padding: 14px; border: none; } .fb-shell .fb-btn-next { display: block; width: 100%; } @media (max-width: 650px) { .fb-shell .fb-btn-next, .fb-shell .fb-btn-submit { font-size: 1.1rem; padding: 12px; } } /* ----- 8. TCPA disclaimer — center, smaller, muted -------- */ .fb-shell #disclaimer { font-size: 9pt; text-align: center; color: #8a8a8a; } .fb-shell #disclaimer a, .fb-shell #disclaimer a:link, .fb-shell #disclaimer a:visited, .fb-shell #disclaimer a:hover, .fb-shell #disclaimer a:active { color: #525252; text-decoration: underline; } /* ---- TrustedForm leak guard ---- In rare browser/extension combos, TrustedForm's fingerprint payload (JSON snippets describing each form element) can leak into the visible DOM as bare text. Symptom: strings like `"","numChildButtons":0,"tag":"button"...}"` appearing below the submit button. This rule hides anything TF might inadvertently inject into #disclaimer: only allowed child element types render. The actual TF certificate URL still posts via its hidden input (xxTrustedFormCertUrl) — only the visible leak is suppressed. The text inside