/* ========================================================================== PropertyBazaar — service pages (v1.57, Sprint 59) Six pages, one skeleton. Scoped to .pb-svc, tokens --pbs-*. Eleventh carve-out from main.css. ========================================================================== */ /* ============================================================ PropertyBazaar — SERVICE ARCHETYPE Seven pages share this shape: /services/legal/ escrow/ title-search/ documentation/ registration/ photography/ find-buyers/ 1 what it is + the price, together 2 what you get a checklist, not adjectives 3 price stated, including what it excludes 4 how it works numbered, with timings 5 who does it a named person or firm 6 WHAT THIS IS NOT the boundary of the service 7 FAQ 8 the form same steps as every intake page THE PRICE IS ON THE PAGE. A service page without one is a brochure, and "contact us for pricing" is what people write when they intend to charge different customers different amounts. Where a job genuinely varies we say what it varies with and give a floor. SECTION 6 IS NOT OPTIONAL. A legal review that people believe covers litigation is worse than no legal review, because they stop asking. ============================================================ */ :root{ --pbs-teal:#1F6B6B; --pbs-teal-dk:#155252; --pbs-teal-tint:#EAF2F2; --pbs-orange:#E8873C; --pbs-orange-dk:#C26A25; --pbs-orange-tint:#FDF0E5; --pbs-ink:#0E1F26; --pbs-ink-2:#2B3F47; --pbs-gray:#5F6B70; --pbs-gray-2:#8B979C; --pbs-line:#E2E7E8; --pbs-line-2:#EFF3F3; --pbs-ground:#F6F8F8; --pbs-white:#fff; --pbs-green:#1F7A5C; --pbs-green-tint:#E7F4EE; --pbs-red:#B4472E; --pbs-amber:#B26A00; --pbs-amber-tint:#FBF3E4; --pbs-shadow-lg:0 12px 32px rgba(14,31,38,.10); --pbs-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .pb-svc *{box-sizing:border-box} .pb-svc body{margin:0;background:var(--pbs-ground);color:var(--pbs-ink);font-family:var(--pbs-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} .pb-svc img{display:block;max-width:100%} .pb-svc button{font-family:inherit;cursor:pointer} .pb-svc a{color:var(--pbs-teal);text-decoration:none} .pb-svc .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pb-svc .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .pb-svc svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-svc .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-svc .btn--sm{padding:8px 12px;font-size:12.5px} .pb-svc .btn--lg{padding:14px 22px;font-size:15px;width:100%} .pb-svc .btn--teal{background:var(--pbs-teal);color:#fff} .pb-svc .btn--teal:hover{background:var(--pbs-teal-dk);color:#fff} .pb-svc .btn--orange{background:var(--pbs-orange);color:#fff} .pb-svc .btn--orange:hover{background:var(--pbs-orange-dk);color:#fff} .pb-svc .btn--out{border-color:var(--pbs-teal);color:var(--pbs-teal)} .pb-svc .btn--out:hover{background:var(--pbs-teal);color:#fff} .pb-svc .btn--ghost{border-color:var(--pbs-line);color:var(--pbs-gray);background:var(--pbs-white)} .pb-svc /* 1 — what it is, .pb-svc and the price, .pb-svc in the same block */ .hero{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;padding-bottom:30px} .pb-svc .hero .kicker{display:inline-block;background:var(--pbs-teal-tint);color:var(--pbs-teal-dk);border:1px solid #CFE2E2;border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px} .pb-svc .hero h1{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.033em;margin:0 0 10px;line-height:1.18} .pb-svc .hero .lede{margin:0 0 18px;color:var(--pbs-gray);font-size:16.5px;line-height:1.6;max-width:56ch} .pb-svc .hero__stats{display:flex;gap:28px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--pbs-line)} .pb-svc .hero__stats div span{display:block;font-size:11.5px;color:var(--pbs-gray-2);margin-bottom:2px} .pb-svc .hero__stats div b{font-size:17px;font-weight:800;letter-spacing:-.02em} .pb-svc /* 3 — price */ .price{background:var(--pbs-white);border:1px solid var(--pbs-line);border-radius:16px;overflow:hidden;position:sticky;top:76px} .pb-svc .price__head{padding:22px 24px 18px;border-bottom:1px solid var(--pbs-line-2)} .pb-svc .price__from{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pbs-gray-2)} .pb-svc .price__n{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:4px 0 2px} .pb-svc .price__unit{font-size:13px;color:var(--pbs-gray)} .pb-svc .price__inc{padding:18px 24px} .pb-svc .price__inc h3{margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pbs-gray-2)} .pb-svc .price__inc ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px} .pb-svc .price__inc li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--pbs-ink-2)} .pb-svc .price__inc li svg{color:var(--pbs-green);margin-top:3px} .pb-svc .price__note{padding:14px 24px;background:#FBFCFC;border-top:1px solid var(--pbs-line-2);font-size:12px;color:var(--pbs-gray);line-height:1.6} .pb-svc /* sections */ .panel{background:var(--pbs-white);border:1px solid var(--pbs-line);border-radius:16px;padding:26px 28px;margin-bottom:16px} .pb-svc .panel h2{margin:0 0 5px;font-size:20px;font-weight:800;letter-spacing:-.024em} .pb-svc .panel .sub{margin:0 0 20px;font-size:14px;color:var(--pbs-gray);max-width:70ch} .pb-svc /* 2 — what you get */ .gets{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px} .pb-svc .gets div{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed var(--pbs-line-2)} .pb-svc .gets div:nth-last-child(-n+2){border-bottom:0} .pb-svc .gets svg{color:var(--pbs-teal);margin-top:3px} .pb-svc .gets b{display:block;font-size:14.5px;font-weight:700;margin-bottom:2px} .pb-svc .gets span{display:block;font-size:13px;color:var(--pbs-gray);line-height:1.55} .pb-svc /* 4 — how it works */ .steps{position:relative;padding-left:30px} .pb-svc .steps::before{content:"";position:absolute;left:12px;top:10px;bottom:12px;width:2px;background:var(--pbs-line)} .pb-svc .stepr{position:relative;padding-bottom:22px} .pb-svc .stepr:last-child{padding-bottom:0} .pb-svc .stepr::before{content:attr(data-n);position:absolute;left:-30px;top:0;width:26px;height:26px;border-radius:50%;background:var(--pbs-teal);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800} .pb-svc .stepr em{font-style:normal;display:inline-block;font-size:11px;font-weight:800;color:var(--pbs-teal);background:var(--pbs-teal-tint);border-radius:5px;padding:2px 8px;margin-bottom:5px} .pb-svc .stepr b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.018em;margin-bottom:3px} .pb-svc .stepr span{display:block;font-size:13.5px;color:var(--pbs-gray);line-height:1.6;max-width:66ch} .pb-svc /* 5 — who does it */ .who{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .pb-svc .who__av{width:64px;height:64px;border-radius:50%;background:var(--pbs-teal-tint);color:var(--pbs-teal);display:grid;place-items:center;font-size:20px;font-weight:800;flex:none} .pb-svc .who__t{flex:1;min-width:260px} .pb-svc .who__t b{display:block;font-size:16px;font-weight:800;margin-bottom:2px} .pb-svc .who__t span{display:block;font-size:13px;color:var(--pbs-gray-2);margin-bottom:8px} .pb-svc .who__t p{margin:0;font-size:14px;color:var(--pbs-ink-2);line-height:1.65;max-width:64ch} .pb-svc /* 6 — what this is not */ .notincl{background:var(--pbs-amber-tint);border:1px solid #EFDCB8} .pb-svc .notincl h2{display:flex;align-items:center;gap:10px} .pb-svc .notincl h2 svg{color:var(--pbs-amber)} .pb-svc .notincl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 30px} .pb-svc .notincl li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed #E6D5B4;font-size:14px;line-height:1.55} .pb-svc .notincl li:nth-last-child(-n+2){border-bottom:0} .pb-svc .notincl li svg{color:var(--pbs-amber);margin-top:3px} .pb-svc .notincl b{display:block;font-weight:700} .pb-svc .notincl span{display:block;font-size:13px;color:var(--pbs-gray);line-height:1.5} .pb-svc .notincl__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid #E6D5B4;font-size:13px;color:var(--pbs-ink-2);line-height:1.65} .pb-svc /* 7 — FAQ */ .faq details{border-bottom:1px solid var(--pbs-line-2)} .pb-svc .faq details:last-child{border-bottom:0} .pb-svc .faq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-size:15px;font-weight:700;position:relative} .pb-svc .faq summary::-webkit-details-marker{display:none} .pb-svc .faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:20px;font-weight:400;color:var(--pbs-gray-2)} .pb-svc .faq details[open] summary::after{content:"−"} .pb-svc .faq p{margin:0 0 16px;font-size:14.5px;color:var(--pbs-ink-2);line-height:1.7} .pb-svc /* 8 — the form */ .book{background:linear-gradient(140deg,var(--pbs-ink),#1B3A44);border-radius:18px;padding:32px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;color:#fff;margin-top:18px} .pb-svc .book h2{margin:0 0 8px;font-size:24px;font-weight:800;letter-spacing:-.026em;color:#fff} .pb-svc .book p{margin:0 0 8px;color:rgba(255,255,255,.76);font-size:14.5px;line-height:1.65} .pb-svc .book p:last-of-type{margin-bottom:0} .pb-svc .bform input, .pb-svc .bform select{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:13px 14px;font-family:inherit;font-size:15px;margin-bottom:10px} .pb-svc .bform input::placeholder{color:rgba(255,255,255,.5)} .pb-svc .bform .note{margin:12px 0 0;font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.55} @media(max-width:940px){ .pb-svc .hero{grid-template-columns:1fr} .pb-svc .price{position:static} .pb-svc .gets, .pb-svc .notincl ul{grid-template-columns:1fr} .pb-svc .gets div:nth-last-child(-n+2){border-bottom:1px dashed var(--pbs-line-2)} .pb-svc .gets div:last-child{border-bottom:0} .pb-svc .book{grid-template-columns:1fr;padding:24px} } .pb-svc :focus-visible{outline:2px solid var(--pbs-orange);outline-offset:2px} /* Live-page additions */ .pb-svc .crumbs a,.pb-svc .svccard{text-decoration:none} .pb-svc .bform__done{background:rgba(31,122,92,.22);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:18px 20px} .pb-svc .bform__done b{display:block;font-size:15px;color:#fff;margin-bottom:4px} .pb-svc .bform__done span{font-size:13px;color:rgba(255,255,255,.76);line-height:1.6} .pb-svc .svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:20px} .pb-svc .svccard{background:var(--pbs-white);border:1px solid var(--pbs-line);border-radius:15px;padding:22px 24px;color:var(--pbs-ink);display:flex;flex-direction:column;gap:6px} .pb-svc .svccard:hover{border-color:var(--pbs-teal);box-shadow:var(--pbs-shadow-lg)} .pb-svc .svccard b{font-size:17px;font-weight:800;letter-spacing:-.02em} .pb-svc .svccard em{font-style:normal;font-size:13.5px;color:var(--pbs-gray);line-height:1.55;flex:1} .pb-svc .svccard span{font-size:20px;font-weight:800;letter-spacing:-.025em;margin-top:8px;color:var(--pbs-teal)} .pb-svc .svccard i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--pbs-gray-2);margin-top:2px} @media(max-width:940px){.pb-svc .svcgrid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.pb-svc .svcgrid{grid-template-columns:1fr}}