/* ========================================================================== PropertyBazaar — intake pages (v1.52, Sprint 54) Ten lead-capture pages, one skeleton. Scoped to .pb-intake, tokens --pbi-*. Tenth carve-out from main.css. ========================================================================== */ /* ============================================================ PropertyBazaar — INTAKE PAGE ARCHETYPE Ten pages share this shape, and every one of them is a lead source: post a requirement, list a property, book a site visit, request a valuation, partner signup, advertise, city partner, banks & NBFCs, list a project, wanted marketplace. 1 heading + who it is for 2 the form (staged, shortest possible) 3 WHAT HAPPENS NEXT ← almost nobody states this 4 why bother (proof, not adjectives) 5 a way out (for people not ready to hand over a phone number) 6 FAQ The dominant failure on pages like this is asking for too much before giving anything. So: three short steps, each field explained, and the phone number requested LAST — after the person has already described what they want and has something invested in finishing. ============================================================ */ :root{ --pbi-teal:#1F6B6B; --pbi-teal-dk:#155252; --pbi-teal-tint:#EAF2F2; --pbi-orange:#E8873C; --pbi-orange-dk:#C26A25; --pbi-orange-tint:#FDF0E5; --pbi-ink:#0E1F26; --pbi-ink-2:#2B3F47; --pbi-gray:#5F6B70; --pbi-gray-2:#8B979C; --pbi-line:#E2E7E8; --pbi-line-2:#EFF3F3; --pbi-ground:#F6F8F8; --pbi-white:#fff; --pbi-green:#1F7A5C; --pbi-green-tint:#E7F4EE; --pbi-red:#B4472E; --pbi-amber:#B26A00; --pbi-amber-tint:#FBF3E4; --pbi-shadow-lg:0 12px 32px rgba(14,31,38,.10); --pbi-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .pb-intake *{box-sizing:border-box} .pb-intake body{margin:0;background:var(--pbi-ground);color:var(--pbi-ink);font-family:var(--pbi-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} .pb-intake img{display:block;max-width:100%} .pb-intake button{font-family:inherit;cursor:pointer} .pb-intake a{color:var(--pbi-teal);text-decoration:none} .pb-intake .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pb-intake .wrap{max-width:1160px;margin:0 auto;padding:0 24px} .pb-intake svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-intake .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:9px;border:1.5px solid transparent;font-size:13.5px;font-weight:700;line-height:1;transition:.15s} .pb-intake .btn--sm{padding:8px 12px;font-size:12.5px} .pb-intake .btn--lg{padding:14px 22px;font-size:15px} .pb-intake .btn--teal{background:var(--pbi-teal);color:#fff} .pb-intake .btn--teal:hover{background:var(--pbi-teal-dk);color:#fff} .pb-intake .btn--orange{background:var(--pbi-orange);color:#fff} .pb-intake .btn--out{border-color:var(--pbi-teal);color:var(--pbi-teal)} .pb-intake .btn--out:hover{background:var(--pbi-teal);color:#fff} .pb-intake .btn--ghost{border-color:var(--pbi-line);color:var(--pbi-gray);background:var(--pbi-white)} .pb-intake .btn--ghost:hover{border-color:var(--pbi-teal);color:var(--pbi-teal)} .pb-intake /* 1 — heading */ .phead{padding-bottom:24px;max-width:66ch} .pb-intake .phead h1{font-size:clamp(25px,2.8vw,34px);font-weight:800;letter-spacing:-.032em;margin:0 0 8px} .pb-intake .phead p{margin:0;color:var(--pbi-gray);font-size:15.5px} .pb-intake .phead .who{display:inline-block;background:var(--pbi-teal-tint);color:var(--pbi-teal-dk);border:1px solid #CFE2E2;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px} .pb-intake .cols{display:grid;grid-template-columns:1fr 372px;gap:26px;align-items:start;padding-bottom:56px} .pb-intake .panel{background:var(--pbi-white);border:1px solid var(--pbi-line);border-radius:16px;padding:26px 28px;margin-bottom:16px} .pb-intake .panel h2{margin:0 0 5px;font-size:18px;font-weight:800;letter-spacing:-.022em} .pb-intake .panel .sub{margin:0 0 20px;font-size:13.5px;color:var(--pbi-gray)} .pb-intake /* 2 — the form */ .steps{display:flex;gap:0;margin-bottom:24px} .pb-intake .step{flex:1;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--pbi-gray-2);padding-right:12px} .pb-intake .step b{width:26px;height:26px;border-radius:50%;background:var(--pbi-line-2);color:var(--pbi-gray-2);display:grid;place-items:center;font-size:12px;flex:none;transition:.2s} .pb-intake .step.on{color:var(--pbi-ink)} .pb-intake .step.on b{background:var(--pbi-teal);color:#fff} .pb-intake .step.done b{background:var(--pbi-green);color:#fff} /* v1.55: the connector was absolutely positioned across the full width of the step, so it drew straight through the label — "What you need" had a line through it. It is now a flex child that fills whatever space is left AFTER the text, which is the only place a connector belongs. */ .pb-intake .step:not(:last-child)::after{content:"";flex:1 1 auto;min-width:14px;height:2px;margin-left:4px;background:var(--pbi-line-2);border-radius:2px} .pb-intake .step.done:not(:last-child)::after{background:var(--pbi-green)} .pb-intake .step span{white-space:nowrap} .pb-intake .step:last-child{flex:0 0 auto} .pb-intake .pane{display:none} .pb-intake .pane.on{display:block} .pb-intake .field{margin-bottom:20px} .pb-intake .field:last-of-type{margin-bottom:0} .pb-intake .field label{display:block;font-size:13.5px;font-weight:700;color:var(--pbi-ink-2);margin-bottom:3px} .pb-intake .field .why{display:block;font-size:12px;color:var(--pbi-gray-2);margin-bottom:9px;line-height:1.45} .pb-intake .field input[type=text], .pb-intake .field input[type=tel], .pb-intake .field input[type=number], .pb-intake .field select, .pb-intake .field textarea{ width:100%;border:1px solid var(--pbi-line);border-radius:10px;padding:13px 14px; font-family:inherit;font-size:15px;color:var(--pbi-ink);background:#fff} .pb-intake .field input:focus, .pb-intake .field select:focus, .pb-intake .field textarea:focus{outline:2px solid var(--pbi-teal);outline-offset:1px} .pb-intake .field textarea{min-height:96px;resize:vertical} .pb-intake .chips{display:flex;gap:8px;flex-wrap:wrap} .pb-intake .chip{border:1.5px solid var(--pbi-line);background:#fff;color:var(--pbi-ink-2);border-radius:10px;padding:11px 16px;font-size:13.5px;font-weight:700;transition:.14s} .pb-intake .chip:hover{border-color:var(--pbi-teal);color:var(--pbi-teal)} .pb-intake .chip.on{background:var(--pbi-teal);border-color:var(--pbi-teal);color:#fff} .pb-intake .two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pb-intake .formfoot{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--pbi-line-2);flex-wrap:wrap} .pb-intake .formfoot .btn{min-width:130px} .pb-intake .formfoot .back{margin-right:auto} .pb-intake .formfoot small{font-size:12px;color:var(--pbi-gray-2);flex:1 1 100%;line-height:1.5} .pb-intake /* the phone step carries the promise, .pb-intake right where it is asked for */ .promise{display:flex;gap:12px;align-items:flex-start;background:var(--pbi-teal-tint);border:1px solid #CFE2E2;border-radius:12px;padding:14px 16px;margin-top:6px} .pb-intake .promise svg{color:var(--pbi-teal);margin-top:1px} .pb-intake .promise b{display:block;font-size:13.5px} .pb-intake .promise span{font-size:12.5px;color:var(--pbi-ink-2);line-height:1.5} .pb-intake /* success */ .done{text-align:center;padding:34px 20px} .pb-intake .done__i{width:64px;height:64px;border-radius:50%;background:var(--pbi-green-tint);color:var(--pbi-green);display:grid;place-items:center;margin:0 auto 18px} .pb-intake .done h2{font-size:22px;margin-bottom:8px} .pb-intake .done p{max-width:52ch;margin:0 auto 8px;color:var(--pbi-gray);font-size:14.5px} .pb-intake .done__ref{display:inline-block;margin-top:14px;background:var(--pbi-ground);border:1px solid var(--pbi-line);border-radius:9px;padding:9px 15px;font-size:13px;font-weight:700} .pb-intake /* 3 — what happens next */ .next{position:sticky;top:74px} .pb-intake .tl{position:relative;padding-left:28px;margin-top:4px} .pb-intake .tl::before{content:"";position:absolute;left:8px;top:8px;bottom:10px;width:2px;background:var(--pbi-line)} .pb-intake .tl__s{position:relative;padding-bottom:20px} .pb-intake .tl__s:last-child{padding-bottom:0} .pb-intake .tl__s::before{content:"";position:absolute;left:-26px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--pbi-teal)} .pb-intake .tl__s b{display:block;font-size:14px;font-weight:800;margin-bottom:2px} .pb-intake .tl__s span{font-size:12.5px;color:var(--pbi-gray);line-height:1.5;display:block} .pb-intake .tl__s em{font-style:normal;display:inline-block;font-size:11px;font-weight:800;color:var(--pbi-teal);background:var(--pbi-teal-tint);border-radius:5px;padding:2px 7px;margin-bottom:4px} .pb-intake /* 4 — proof, .pb-intake not adjectives */ .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--pbi-line);border-radius:14px;overflow:hidden;background:#fff} .pb-intake .proof div{padding:18px 16px;border-right:1px solid var(--pbi-line-2)} .pb-intake .proof div:last-child{border-right:0} .pb-intake .proof b{display:block;font-size:23px;font-weight:800;letter-spacing:-.025em} .pb-intake .proof span{font-size:11.5px;color:var(--pbi-gray-2);line-height:1.4;display:block;margin-top:2px} .pb-intake /* 5 — a way out */ .out{background:var(--pbi-amber-tint);border:1px solid #EFDCB8;border-radius:14px;padding:20px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .pb-intake .out div{flex:1;min-width:240px} .pb-intake .out b{display:block;font-size:15px;font-weight:800;margin-bottom:3px} .pb-intake .out span{font-size:13px;color:var(--pbi-ink-2);line-height:1.55} .pb-intake /* 6 — FAQ */ .faq details{border-bottom:1px solid var(--pbi-line-2)} .pb-intake .faq details:last-child{border-bottom:0} .pb-intake .faq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-size:14.5px;font-weight:700;position:relative} .pb-intake .faq summary::-webkit-details-marker{display:none} .pb-intake .faq summary::after{content:"+";position:absolute;right:6px;top:13px;font-size:20px;font-weight:400;color:var(--pbi-gray-2)} .pb-intake .faq details[open] summary::after{content:"−"} .pb-intake .faq p{margin:0 0 16px;font-size:13.5px;color:var(--pbi-ink-2);line-height:1.7;max-width:72ch} @media(max-width:940px){ .pb-intake .cols{grid-template-columns:1fr} .pb-intake .next{position:static} .pb-intake .proof{grid-template-columns:1fr} .pb-intake .proof div{border-right:0;border-bottom:1px solid var(--pbi-line-2)} } @media(max-width:600px){ .pb-intake .two{grid-template-columns:1fr} .pb-intake .panel{padding:20px} .pb-intake .step span{display:none} .pb-intake .step{flex:0 0 auto} } .pb-intake :focus-visible{outline:2px solid var(--pbi-orange);outline-offset:2px} /* -------------------------------------------------------------------------- Live-page additions. Chips are real radio and checkbox inputs wrapped in a label, not buttons with a JS state. The form has to submit without JavaScript — a lead-capture page that silently loses leads on a bad connection is worse than no page — so the input is hidden and the label carries the styling. -------------------------------------------------------------------------- */ .pb-intake .chip{position:relative;cursor:pointer;display:inline-flex;align-items:center} .pb-intake .chip input{position:absolute;opacity:0;width:0;height:0} .pb-intake .chip:has(input:checked){background:var(--pbi-teal);border-color:var(--pbi-teal);color:#fff} .pb-intake .chip:has(input:focus-visible){outline:2px solid var(--pbi-orange);outline-offset:2px} .pb-intake .opt{font-weight:500;color:var(--pbi-gray-2)} .pb-intake .crumbs a{text-decoration:none} .pb-intake .err{margin:0 0 18px;padding:12px 14px;background:#FBECE7;color:var(--pbi-red);border-radius:10px;font-size:13.5px} /* Without JavaScript every step is visible and the form still submits. The script adds .pb-has-js and only then do the panes hide. */ .pb-intake .pane{display:block} .pb-has-js .pb-intake .pane{display:none} .pb-has-js .pb-intake .pane.on{display:block} .pb-intake .steps{display:none} .pb-has-js .pb-intake .steps{display:flex}