/* ===================================================================== tf-form.css — RevenueFlows AI shared multi-step "slick form" kernel --------------------------------------------------------------------- Drop-in styles for any form driven by js/tf-form.js. Inherits each page's brand design tokens (:root --cta, --ink, --line, --paper, --muted, --tint, --body) and falls back to brand defaults if absent. Pair with, at end of : And mark up:
… .tf-step blocks …
===================================================================== */ .tf-form{display:flex;flex-direction:column;gap:16px;width:100%} .tf-form *{box-sizing:border-box} /* ---- Progress bar (auto-injected by the engine when >1 step) ---- */ .tf-progress{width:100%;height:5px;background:var(--line,#EEF1F6);border-radius:5px;overflow:hidden;margin-bottom:6px} .tf-progress-bar{height:100%;width:0;background:var(--cta,#FF492C);border-radius:5px;transition:width .35s cubic-bezier(.4,0,.2,1)} /* ---- Steps ---- */ .tf-step{display:none;flex-direction:column;gap:15px;animation:tfFadeIn .32s cubic-bezier(.4,0,.2,1)} .tf-step.is-active{display:flex} /* No-flash fallback: show the first step before JS runs / if JS is slow. Once the engine inits it injects the progress bar (becoming :first-child) and drives .is-active. */ .tf-form .tf-step:first-child{display:flex} @keyframes tfFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* ---- Labels ---- */ .tf-label{text-align:left;font-family:'General Sans','Inter',sans-serif;font-size:19px;letter-spacing:-.01em;color:var(--ink,#0D0F2C);font-weight:700;line-height:1.3;display:flex;flex-direction:column;gap:5px;margin:0} .tf-step-num{color:var(--cta,#FF492C);font-family:'JetBrains Mono','Roboto Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .tf-sublabel{font-weight:500;font-size:14.5px;color:var(--muted,#6B7A99);font-family:'Inter',sans-serif;margin-top:-2px} @media(max-width:600px){.tf-label{font-size:17px}} /* ---- Text inputs + textarea ---- */ .tf-form input[type=text],.tf-form input[type=email],.tf-form input[type=url],.tf-form input[type=tel],.tf-form textarea{ width:100%;padding:17px 19px;font-family:'Inter',sans-serif;font-size:16.5px; border:1.5px solid #d9dde5;border-radius:13px;background:#fff;color:var(--ink,#0D0F2C); transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;outline:none} .tf-form textarea{resize:vertical;min-height:118px;line-height:1.55} .tf-form select{width:100%;padding:17px 19px;font-family:'Inter',sans-serif;font-size:16.5px;border:1.5px solid #d9dde5;border-radius:13px;background:#fff;color:var(--ink,#0D0F2C);transition:border-color .15s ease,box-shadow .15s ease;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:46px} .tf-form input:focus,.tf-form textarea:focus,.tf-form select:focus{border-color:var(--cta,#FF492C);box-shadow:0 0 0 4px rgba(255,73,44,.12)} .tf-form input::placeholder,.tf-form textarea::placeholder{color:#a8aebd} /* ---- Icon + prefix affordances ---- */ .tf-iconwrap{position:relative;display:block;width:100%} .tf-iconwrap .tf-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#a8aebd;pointer-events:none;display:flex;align-items:center;justify-content:center} .tf-iconwrap input{padding-left:50px!important} .tf-prefix{position:relative;display:block;width:100%} .tf-prefix .tf-prefix-text{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono','Roboto Mono',monospace;font-size:14px;color:#9aa3b2;font-weight:600;pointer-events:none} .tf-prefix .tf-prefix-text svg{width:18px;height:18px;flex-shrink:0} .tf-prefix input{padding-left:106px!important} /* ---- Single-select options (A–F, keyboard + click, auto-advance) ---- */ .tf-options{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;width:100%} .tf-options.tf-options-1{grid-template-columns:1fr} .tf-option{width:100%;padding:16px 18px;text-align:left;font-family:'Inter','General Sans',sans-serif;font-size:15.5px;font-weight:600;color:var(--ink,#0D0F2C);background:#fff;border:1.5px solid #e3e6ee;border-radius:13px;cursor:pointer;outline:none;display:flex;align-items:center;gap:12px;transition:border-color .15s,box-shadow .15s,background .15s,transform .1s} .tf-option:hover{border-color:var(--cta,#FF492C);background:var(--tint,#FFF1EE)} .tf-option:focus-visible{border-color:var(--cta,#FF492C);box-shadow:0 0 0 4px rgba(255,73,44,.14)} .tf-option .tf-key{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:#f1f3f8;color:var(--muted,#6B7A99);font-family:'JetBrains Mono','Roboto Mono',monospace;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .tf-option.is-selected{border-color:var(--cta,#FF492C);background:linear-gradient(135deg,#fff5f1 0%,#ffe9e1 100%);box-shadow:0 8px 22px rgba(255,73,44,.16)} .tf-option.is-selected .tf-key{background:var(--cta,#FF492C);color:#fff} @media(max-width:520px){.tf-options{grid-template-columns:1fr;gap:8px}.tf-option{padding:14px 16px;font-size:15px}} /* ---- Multi-select checks ---- */ .tf-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .tf-check{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #e3e6ee;border-radius:12px;padding:13px 15px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--body,#333B52);transition:border-color .15s,background .15s} .tf-check:hover{border-color:var(--cta,#FF492C)} .tf-check:has(input:checked){border-color:var(--cta,#FF492C);background:var(--tint,#FFF1EE)} .tf-check.is-checked{border-color:var(--cta,#FF492C);background:var(--tint,#FFF1EE)} .tf-check input{width:18px;height:18px;accent-color:var(--cta,#FF492C);flex-shrink:0} /* ---- Back / error / helper ---- */ .tf-back{background:none;border:none;cursor:pointer;color:var(--muted,#6B7A99);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;padding:6px 4px;align-self:flex-start;margin-top:-2px;transition:color .15s} .tf-back:hover{color:var(--ink,#0D0F2C)} .tf-error{color:var(--cta,#FF492C);font-size:13.5px;font-weight:600;margin-top:-4px} .tf-helper{color:var(--muted,#6B7A99);font-size:13px;line-height:1.5;margin-top:2px} /* ---- Dark-card variant: white labels for forms placed on dark backgrounds ---- */ .tf-on-dark .tf-label{color:#fff} .tf-on-dark .tf-sublabel,.tf-on-dark .tf-helper{color:#b9c0db} .tf-on-dark .tf-back{color:#c2c8e4} .tf-on-dark .tf-back:hover{color:#fff} /* ---- Inline success card (for forms that don't redirect) ---- */ .tf-success{background:#059669;color:#fff;padding:34px 28px;border-radius:16px;text-align:center;animation:tfFadeIn .4s ease} .tf-success .tf-success-ic{font-size:34px;line-height:1;margin-bottom:10px} .tf-success p{margin:0;color:#fff;font-size:17px;font-weight:600;line-height:1.5} /* ---- Submitting state (works on any brand button used as the CTA) ---- */ .tf-form button[disabled]{opacity:.7;cursor:not-allowed}