/* ========================================================================== PropertyBazaar — guide pages (v1.58, Sprint 60) Fifteen guides, one skeleton. Scoped to .pb-guide, tokens --pbg-*. Twelfth carve-out from main.css. ========================================================================== */ /* ============================================================ PropertyBazaar — CONTENT ARCHETYPE Seventeen pages share this shape: /finance/* 9 guides, some with a rates table /sellers-guide/* 5 guides, some with a cost table /guides/rera/ 1 /home-loan/ 1 /blog/finance/ 1 1 title, updated date, who wrote it 2 TOC sticky, left 3 prose 4 KEY FACTS the answer, before the explanation 5 a table rates or costs, where the page has one 6 a tool the calculator this page argues for 7 FAQ the SEO surface 8 related Two things decide whether a page like this is worth reading. THE ANSWER COMES FIRST. Somebody searching "home loan tax benefit" wants the number, not eight hundred words of preamble. The key-facts block sits above the prose, not below it. IT SAYS WHEN IT WAS CHECKED. Rates and tax rules go stale, and a finance guide with no date on it is worse than no guide — the reader cannot tell whether they are looking at this year's rules. ============================================================ */ :root{ --pbg-teal:#1F6B6B; --pbg-teal-dk:#155252; --pbg-teal-tint:#EAF2F2; --pbg-orange:#E8873C; --pbg-orange-dk:#C26A25; --pbg-orange-tint:#FDF0E5; --pbg-ink:#0E1F26; --pbg-ink-2:#2B3F47; --pbg-gray:#5F6B70; --pbg-gray-2:#8B979C; --pbg-line:#E2E7E8; --pbg-line-2:#EFF3F3; --pbg-ground:#F6F8F8; --pbg-white:#fff; --pbg-green:#1F7A5C; --pbg-green-tint:#E7F4EE; --pbg-red:#B4472E; --pbg-amber:#B26A00; --pbg-amber-tint:#FBF3E4; --pbg-shadow-lg:0 12px 32px rgba(14,31,38,.10); --pbg-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .pb-guide *{box-sizing:border-box} .pb-guide body{margin:0;background:var(--pbg-ground);color:var(--pbg-ink);font-family:var(--pbg-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} .pb-guide img{display:block;max-width:100%} .pb-guide button{font-family:inherit;cursor:pointer} .pb-guide a{color:var(--pbg-teal);text-decoration:none} .pb-guide .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pb-guide .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .pb-guide svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-guide .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-guide .btn--sm{padding:8px 12px;font-size:12.5px} .pb-guide .btn--teal{background:var(--pbg-teal);color:#fff} .pb-guide .btn--teal:hover{background:var(--pbg-teal-dk);color:#fff} .pb-guide .btn--orange{background:var(--pbg-orange);color:#fff} .pb-guide .btn--out{border-color:var(--pbg-teal);color:var(--pbg-teal)} .pb-guide .btn--out:hover{background:var(--pbg-teal);color:#fff} .pb-guide .btn--ghost{border-color:var(--pbg-line);color:var(--pbg-gray);background:var(--pbg-white)} .pb-guide /* 1 — title block */ .phead{padding-bottom:22px;max-width:70ch} .pb-guide .phead .kicker{display:inline-block;background:var(--pbg-teal-tint);color:var(--pbg-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-guide .phead h1{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.033em;margin:0 0 10px;line-height:1.18} .pb-guide .phead p{margin:0 0 16px;color:var(--pbg-gray);font-size:16px;line-height:1.6} .pb-guide .byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--pbg-gray-2);padding-top:14px;border-top:1px solid var(--pbg-line)} .pb-guide .byline b{color:var(--pbg-ink-2);font-weight:700} .pb-guide .byline .dot{width:3px;height:3px;border-radius:50%;background:var(--pbg-line);flex:none} .pb-guide .byline .fresh{color:var(--pbg-green);font-weight:700} .pb-guide .cols{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start;padding-bottom:60px} .pb-guide /* 2 — TOC */ .toc{position:sticky;top:76px} .pb-guide .toc h2{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pbg-gray-2)} .pb-guide .toc a{display:block;padding:7px 0 7px 13px;border-left:2px solid var(--pbg-line);font-size:13.5px;color:var(--pbg-gray);line-height:1.4} .pb-guide .toc a:hover{color:var(--pbg-ink);border-left-color:var(--pbg-gray-2)} .pb-guide .toc a.on{color:var(--pbg-teal);border-left-color:var(--pbg-teal);font-weight:700} .pb-guide /* 4 — key facts, .pb-guide above the prose */ .keyfacts{background:var(--pbg-white);border:1px solid var(--pbg-line);border-left:4px solid var(--pbg-teal);border-radius:0 14px 14px 0;padding:22px 26px;margin-bottom:28px} .pb-guide .keyfacts h2{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pbg-teal)} .pb-guide .keyfacts p{margin:0 0 14px;font-size:12.5px;color:var(--pbg-gray-2)} .pb-guide .keyfacts ul{margin:0;padding:0;list-style:none;display:grid;gap:11px} .pb-guide .keyfacts li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55} .pb-guide .keyfacts li svg{color:var(--pbg-teal);margin-top:4px} .pb-guide .keyfacts b{font-weight:800} .pb-guide /* 3 — prose */ .prose{max-width:74ch} .pb-guide .prose h2{font-size:23px;font-weight:800;letter-spacing:-.026em;margin:38px 0 12px;scroll-margin-top:80px} .pb-guide .prose h2:first-child{margin-top:0} .pb-guide .prose h3{font-size:17.5px;font-weight:800;letter-spacing:-.018em;margin:26px 0 8px} .pb-guide .prose p{margin:0 0 16px;font-size:15.5px;line-height:1.75;color:var(--pbg-ink-2)} .pb-guide .prose ul, .pb-guide .prose ol{margin:0 0 18px;padding-left:22px} .pb-guide .prose li{margin-bottom:9px;font-size:15.5px;line-height:1.7;color:var(--pbg-ink-2)} .pb-guide .prose strong{font-weight:700;color:var(--pbg-ink)} .pb-guide .prose a{border-bottom:1px solid rgba(31,107,107,.3)} .pb-guide .prose a:hover{border-bottom-color:var(--pbg-teal)} .pb-guide /* a caveat that is part of the argument, .pb-guide not a disclaimer at the end */ .caveat{background:var(--pbg-amber-tint);border:1px solid #EFDCB8;border-radius:12px;padding:16px 18px;margin:22px 0;display:flex;gap:12px;align-items:flex-start} .pb-guide .caveat svg{color:var(--pbg-amber);margin-top:2px} .pb-guide .caveat p{margin:0;font-size:13.5px;line-height:1.65;color:var(--pbg-ink-2)} .pb-guide .caveat b{font-weight:800} .pb-guide /* 5 — table */ .tblwrap{border:1px solid var(--pbg-line);border-radius:14px;overflow:hidden;background:var(--pbg-white);margin:26px 0} .pb-guide .tblhead{padding:16px 20px;border-bottom:1px solid var(--pbg-line-2);display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap} .pb-guide .tblhead h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em} .pb-guide .tblhead span{font-size:12px;color:var(--pbg-gray-2)} .pb-guide .tbl{width:100%;border-collapse:collapse;font-size:14px} .pb-guide .tbl th, .pb-guide .tbl td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--pbg-line-2)} .pb-guide .tbl thead th{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--pbg-gray-2);background:#FBFCFC} .pb-guide .tbl tbody tr:last-child th, .pb-guide .tbl tbody tr:last-child td{border-bottom:0} .pb-guide .tbl tbody tr:hover{background:#FCFDFD} .pb-guide .tbl td.n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums} .pb-guide .tbl .best{color:var(--pbg-green);font-weight:800} .pb-guide .tblfoot{padding:13px 20px;background:#FBFCFC;border-top:1px solid var(--pbg-line-2);font-size:12px;color:var(--pbg-gray);line-height:1.6} .pb-guide /* 6 — the tool this page argues for */ .toolcard{background:linear-gradient(140deg,var(--pbg-ink),#1B3A44);border-radius:16px;padding:26px 28px;margin:30px 0;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;color:#fff} .pb-guide .toolcard h3{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-.022em;color:#fff} .pb-guide .toolcard p{margin:0;font-size:14px;color:rgba(255,255,255,.75);line-height:1.6;max-width:56ch} .pb-guide /* 7 — FAQ */ .faq{background:var(--pbg-white);border:1px solid var(--pbg-line);border-radius:16px;padding:24px 26px;margin-top:34px} .pb-guide .faq h2{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.024em} .pb-guide .faq details{border-bottom:1px solid var(--pbg-line-2)} .pb-guide .faq details:last-child{border-bottom:0} .pb-guide .faq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-size:15px;font-weight:700;position:relative} .pb-guide .faq summary::-webkit-details-marker{display:none} .pb-guide .faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:20px;font-weight:400;color:var(--pbg-gray-2)} .pb-guide .faq details[open] summary::after{content:"−"} .pb-guide .faq p{margin:0 0 16px;font-size:14.5px;color:var(--pbg-ink-2);line-height:1.7} .pb-guide /* 8 — related */ .rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px} .pb-guide .relcard{background:var(--pbg-white);border:1px solid var(--pbg-line);border-radius:13px;padding:17px 18px;color:var(--pbg-ink)} .pb-guide .relcard:hover{border-color:var(--pbg-teal);box-shadow:var(--pbg-shadow-lg)} .pb-guide .relcard span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pbg-gray-2);margin-bottom:6px} .pb-guide .relcard b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em;line-height:1.35;margin-bottom:5px} .pb-guide .relcard em{font-style:normal;font-size:12.5px;color:var(--pbg-gray);line-height:1.5} @media(max-width:940px){ .pb-guide .cols{grid-template-columns:1fr;gap:22px} .pb-guide .toc{position:static;background:var(--pbg-white);border:1px solid var(--pbg-line);border-radius:13px;padding:16px 18px} .pb-guide .toc a{border-left:0;padding:6px 0} .pb-guide .toolcard{grid-template-columns:1fr} .pb-guide .rel{grid-template-columns:1fr} } @media(max-width:600px){ .pb-guide .tbl th, .pb-guide .tbl td{padding:11px 14px} .pb-guide .tblwrap{overflow-x:auto} .pb-guide .tbl{min-width:560px} } .pb-guide :focus-visible{outline:2px solid var(--pbg-orange);outline-offset:2px} /* Live-page additions */ .pb-guide .crumbs a,.pb-guide .toc a,.pb-guide .relcard{text-decoration:none} .pb-guide .relh{font-size:20px;font-weight:800;letter-spacing:-.024em;margin:36px 0 0} .pb-guide .prose h3{scroll-margin-top:80px} .pb-guide .prose ol{margin:0 0 18px;padding-left:22px} .pb-guide .prose ol li{margin-bottom:11px} .pb-guide .rel--index{grid-template-columns:repeat(3,1fr);margin-top:8px;padding-bottom:40px} .pb-guide--index .cols{display:block} @media(max-width:940px){.pb-guide .rel--index{grid-template-columns:1fr 1fr}} @media(max-width:640px){.pb-guide .rel--index{grid-template-columns:1fr}}