/* ========================================================================== PropertyBazaar — tool pages (v1.50, Sprint 52) Scoped to .pb-tool, tokens --pbt-*. Eighth carve-out from main.css. One stylesheet for all six tools, because they share one skeleton. ========================================================================== */ /* ============================================================ PropertyBazaar — TOOL PAGE ARCHETYPE One layout, six pages: EMI · Eligibility · Stamp duty · Rent vs buy · Area converter · Vastu. The skeleton is fixed and only the inputs, the formula and the explanation change: 1 heading + one-line purpose 2 input panel (left, sticky on desktop) 3 result (right, updates live, never hidden) 4 breakdown (what the number is made of) 5 assumptions (stated, because a number you cannot check is a number you cannot trust) 6 what it excludes (the honest part most calculators skip) 7 related tools 8 FAQ (also the SEO surface) Same tokens as every other page. Nunito is logo-only. ============================================================ */ :root{ --pbt-teal:#1F6B6B; --pbt-teal-dk:#155252; --pbt-teal-tint:#EAF2F2; --pbt-orange:#E8873C; --pbt-orange-dk:#C26A25; --pbt-orange-tint:#FDF0E5; --pbt-ink:#0E1F26; --pbt-ink-2:#2B3F47; --pbt-gray:#5F6B70; --pbt-gray-2:#8B979C; --pbt-line:#E2E7E8; --pbt-line-2:#EFF3F3; --pbt-ground:#F6F8F8; --pbt-white:#fff; --pbt-green:#1F7A5C; --pbt-green-tint:#E7F4EE; --pbt-red:#B4472E; --pbt-amber:#B26A00; --pbt-amber-tint:#FBF3E4; --pbt-shadow-lg:0 12px 32px rgba(14,31,38,.10); --pbt-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .pb-tool *{box-sizing:border-box} .pb-tool body{margin:0;background:var(--pbt-ground);color:var(--pbt-ink);font-family:var(--pbt-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} .pb-tool img{display:block;max-width:100%} .pb-tool button{font-family:inherit;cursor:pointer} .pb-tool a{color:var(--pbt-teal);text-decoration:none} .pb-tool .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pb-tool .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .pb-tool svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-tool .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-tool .btn--sm{padding:8px 12px;font-size:12.5px} .pb-tool .btn--lg{padding:14px 20px;font-size:14.5px;width:100%} .pb-tool .btn--teal{background:var(--pbt-teal);color:#fff} .pb-tool .btn--teal:hover{background:var(--pbt-teal-dk);color:#fff} .pb-tool .btn--out{border-color:var(--pbt-teal);color:var(--pbt-teal)} .pb-tool .btn--out:hover{background:var(--pbt-teal);color:#fff} .pb-tool .btn--ghost{border-color:var(--pbt-line);color:var(--pbt-gray);background:var(--pbt-white)} .pb-tool .crumbs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--pbt-gray-2);padding:16px 0 10px;flex-wrap:wrap} .pb-tool .crumbs a{color:var(--pbt-gray)} .pb-tool /* 1 — heading */ .phead{padding-bottom:22px} .pb-tool .phead h1{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;margin:0 0 7px} .pb-tool .phead p{margin:0;color:var(--pbt-gray);font-size:15px;max-width:64ch} .pb-tool /* layout */ .cols{display:grid;grid-template-columns:400px 1fr;gap:24px;align-items:start;padding-bottom:56px} .pb-tool .panel{background:var(--pbt-white);border:1px solid var(--pbt-line);border-radius:16px;padding:24px 26px;margin-bottom:16px} .pb-tool .panel h2{margin:0 0 5px;font-size:18px;font-weight:800;letter-spacing:-.022em} .pb-tool .panel .sub{margin:0 0 18px;font-size:13.5px;color:var(--pbt-gray)} .pb-tool /* 2 — inputs */ .inputs{position:sticky;top:74px} .pb-tool .field{margin-bottom:20px} .pb-tool .field:last-child{margin-bottom:0} .pb-tool .field__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px} .pb-tool .field label{font-size:13.5px;font-weight:700;color:var(--pbt-ink-2)} .pb-tool .field__v{display:flex;align-items:center;gap:4px;border:1px solid var(--pbt-line);border-radius:8px;padding:5px 9px;background:var(--pbt-ground)} .pb-tool .field__v span{font-size:13px;color:var(--pbt-gray-2);font-weight:600} .pb-tool .field__v input{border:0;background:none;width:92px;text-align:right;font-family:inherit;font-size:14.5px;font-weight:800;color:var(--pbt-ink);padding:0} .pb-tool .field__v input:focus{outline:0} .pb-tool .field__v--sm input{width:52px} .pb-tool input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:var(--pbt-line);outline:0} .pb-tool input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--pbt-teal);border:3px solid #fff;box-shadow:0 2px 6px rgba(14,31,38,.25);cursor:pointer} .pb-tool input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--pbt-teal);border:3px solid #fff;cursor:pointer} .pb-tool .field__ends{display:flex;justify-content:space-between;font-size:11px;color:var(--pbt-gray-2);margin-top:6px} .pb-tool .presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .pb-tool .preset{border:1.5px solid var(--pbt-line);background:var(--pbt-white);color:var(--pbt-gray);border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:700} .pb-tool .preset:hover{border-color:var(--pbt-teal);color:var(--pbt-teal)} .pb-tool .preset.on{background:var(--pbt-teal);border-color:var(--pbt-teal);color:#fff} .pb-tool /* 3 — result */ .result{background:linear-gradient(150deg,var(--pbt-ink),#1B3A44);color:#fff;border:0} .pb-tool .result h2{color:#fff} .pb-tool .result .sub{color:rgba(255,255,255,.66)} .pb-tool .result__big{font-size:clamp(38px,5vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:4px 0 6px} .pb-tool .result__cap{font-size:13.5px;color:rgba(255,255,255,.7)} .pb-tool .result__row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)} .pb-tool .result__row div span{display:block;font-size:11.5px;color:rgba(255,255,255,.55);margin-bottom:3px} .pb-tool .result__row div b{font-size:19px;font-weight:800;letter-spacing:-.02em} .pb-tool /* 4 — breakdown */ .split{height:36px;border-radius:9px;overflow:hidden;display:flex;margin:6px 0 12px} .pb-tool .split i{display:block;height:100%;font-style:normal} .pb-tool .split .p{background:var(--pbt-teal)} .pb-tool .split .n{background:var(--pbt-orange)} .pb-tool .legend{display:flex;gap:22px;flex-wrap:wrap;font-size:13px} .pb-tool .legend div{display:flex;align-items:center;gap:8px} .pb-tool .legend em{width:11px;height:11px;border-radius:3px;font-style:normal} .pb-tool .legend b{font-weight:800} .pb-tool .legend span{color:var(--pbt-gray)} .pb-tool .yr{width:100%;border-collapse:collapse;font-size:13px;margin-top:18px} .pb-tool .yr th, .pb-tool .yr td{padding:9px 4px;border-bottom:1px solid var(--pbt-line-2);text-align:right} .pb-tool .yr th:first-child, .pb-tool .yr td:first-child{text-align:left} .pb-tool .yr thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--pbt-gray-2);font-weight:800} .pb-tool .yr td{font-weight:600} .pb-tool /* 5 / 6 — assumptions and exclusions */ .assump{display:grid;grid-template-columns:1fr 1fr;gap:0 28px} .pb-tool .assump div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--pbt-line-2);font-size:13.5px} .pb-tool .assump span{color:var(--pbt-gray)} .pb-tool .assump b{font-weight:700} .pb-tool .excl{background:var(--pbt-amber-tint);border:1px solid #EFDCB8} .pb-tool .excl h2{display:flex;align-items:center;gap:9px} .pb-tool .excl h2 svg{color:var(--pbt-amber)} .pb-tool .excl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 26px} .pb-tool .excl li{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed #E6D5B4;font-size:13.5px} .pb-tool .excl li:last-child, .pb-tool .excl li:nth-last-child(2){border-bottom:0} .pb-tool .excl li svg{color:var(--pbt-amber);margin-top:3px} .pb-tool .excl li b{display:block;font-weight:700} .pb-tool .excl li span{display:block;font-size:12.5px;color:var(--pbt-gray);line-height:1.45} .pb-tool .excl__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid #E6D5B4;font-size:12.5px;color:var(--pbt-ink-2);line-height:1.6} .pb-tool /* 7 — related */ .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .pb-tool .tool{display:flex;gap:12px;align-items:center;padding:15px 16px;background:var(--pbt-white);border:1px solid var(--pbt-line);border-radius:12px;color:var(--pbt-ink)} .pb-tool .tool:hover{border-color:var(--pbt-teal);box-shadow:var(--pbt-shadow-lg)} .pb-tool .tool span{width:40px;height:40px;border-radius:11px;background:var(--pbt-teal-tint);color:var(--pbt-teal);display:grid;place-items:center;flex:none} .pb-tool .tool b{display:block;font-size:14px;font-weight:800} .pb-tool .tool em{font-style:normal;font-size:12px;color:var(--pbt-gray-2)} .pb-tool /* 8 — FAQ */ .faq details{border-bottom:1px solid var(--pbt-line-2);padding:2px 0} .pb-tool .faq details:last-child{border-bottom:0} .pb-tool .faq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-size:14.5px;font-weight:700;position:relative} .pb-tool .faq summary::-webkit-details-marker{display:none} .pb-tool .faq summary::after{content:"+";position:absolute;right:6px;top:13px;font-size:20px;font-weight:400;color:var(--pbt-gray-2)} .pb-tool .faq details[open] summary::after{content:"−"} .pb-tool .faq p{margin:0 0 16px;font-size:13.5px;color:var(--pbt-ink-2);line-height:1.7;max-width:74ch} .pb-tool /* CTA */ .cta{background:var(--pbt-teal-tint);border:1px solid #CFE2E2;border-radius:16px;padding:24px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .pb-tool .cta div{flex:1;min-width:260px} .pb-tool .cta h3{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:-.02em} .pb-tool .cta p{margin:0;font-size:13.5px;color:var(--pbt-gray)} @media(max-width:940px){ .pb-tool .cols{grid-template-columns:1fr} .pb-tool .inputs{position:static} .pb-tool .assump, .pb-tool .excl ul{grid-template-columns:1fr} .pb-tool .tools{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .pb-tool .result__row{grid-template-columns:1fr;gap:12px} .pb-tool .tools{grid-template-columns:1fr} .pb-tool .panel{padding:18px} } .pb-tool :focus-visible{outline:2px solid var(--pbt-orange);outline-offset:2px} /* Live-page additions */ .pb-tool .crumbs a,.pb-tool .tool{text-decoration:none} .pb-tool .areain,.pb-tool .areasel{width:100%;border:1px solid var(--pbt-line);border-radius:9px;padding:12px 13px;font-family:inherit;font-size:15px;font-weight:700;color:var(--pbt-ink);background:#fff} .pb-tool .tools--index{grid-template-columns:repeat(3,1fr)} .pb-tool .tool--soon{opacity:.62} .pb-tool .tool--soon span{background:#F1F3F3;color:var(--pbt-gray-2)} .pb-tool .soon{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pbt-amber);background:var(--pbt-amber-tint);border-radius:4px;padding:2px 6px;margin-left:6px} .pb-tool .notbuilt{text-align:center;padding:44px 32px} .pb-tool .notbuilt h2{font-size:20px;margin-bottom:10px} .pb-tool .notbuilt p{max-width:56ch;margin:0 auto 12px;color:var(--pbt-gray);font-size:14px} .pb-tool .notbuilt__acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px} .pb-tool--index .cols{display:block} @media(max-width:940px){.pb-tool .tools--index{grid-template-columns:1fr 1fr}} @media(max-width:640px){.pb-tool .tools--index{grid-template-columns:1fr}}