/* ========================================================================== PropertyBazaar — utility pages (v1.51, Sprint 53) Compare · Saved · Recently viewed. Scoped to .pb-util, tokens --pbu-*. Ninth carve-out from main.css. One stylesheet for all three, because they share one skeleton and only the collection differs. ========================================================================== */ /* ============================================================ PropertyBazaar — UTILITY PAGE ARCHETYPE Compare · Recently viewed · Saved · Post a requirement Skeleton: 1 heading + count 2 EMPTY STATE ← the real page for most visits 3 the collection 4 actions 5 a way back The empty state is not a fallback here. Someone clicking "Compare" before adding anything is the COMMON case, so it gets a live rail of properties with Compare buttons on them rather than an apology. The empty state becomes the feature. Toggle the two states with the buttons at the top right — they exist only in this mockup. ============================================================ */ :root{ --pbu-teal:#1F6B6B; --pbu-teal-dk:#155252; --pbu-teal-tint:#EAF2F2; --pbu-orange:#E8873C; --pbu-orange-dk:#C26A25; --pbu-orange-tint:#FDF0E5; --pbu-ink:#0E1F26; --pbu-ink-2:#2B3F47; --pbu-gray:#5F6B70; --pbu-gray-2:#8B979C; --pbu-line:#E2E7E8; --pbu-line-2:#EFF3F3; --pbu-ground:#F6F8F8; --pbu-white:#fff; --pbu-green:#1F7A5C; --pbu-green-tint:#E7F4EE; --pbu-red:#B4472E; --pbu-amber:#B26A00; --pbu-amber-tint:#FBF3E4; --pbu-shadow-lg:0 12px 32px rgba(14,31,38,.10); --pbu-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .pb-util *{box-sizing:border-box} .pb-util body{margin:0;background:var(--pbu-ground);color:var(--pbu-ink);font-family:var(--pbu-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} .pb-util img{display:block;max-width:100%} .pb-util button{font-family:inherit;cursor:pointer} .pb-util a{color:var(--pbu-teal);text-decoration:none} .pb-util .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pb-util .wrap{max-width:1240px;margin:0 auto;padding:0 24px} .pb-util svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-util .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-util .btn--sm{padding:8px 12px;font-size:12.5px} .pb-util .btn--teal{background:var(--pbu-teal);color:#fff} .pb-util .btn--teal:hover{background:var(--pbu-teal-dk);color:#fff} .pb-util .btn--orange{background:var(--pbu-orange);color:#fff} .pb-util .btn--out{border-color:var(--pbu-teal);color:var(--pbu-teal)} .pb-util .btn--out:hover{background:var(--pbu-teal);color:#fff} .pb-util .btn--ghost{border-color:var(--pbu-line);color:var(--pbu-gray);background:var(--pbu-white)} .pb-util .btn--ghost:hover{border-color:var(--pbu-teal);color:var(--pbu-teal)} .pb-util .btn--ghost.on{border-color:var(--pbu-orange);color:var(--pbu-orange-dk);background:var(--pbu-orange-tint)} .pb-util .crumbs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--pbu-gray-2);padding:16px 0 10px;flex-wrap:wrap} .pb-util .crumbs a{color:var(--pbu-gray)} .pb-util /* 1 — heading */ .phead{padding-bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .pb-util .phead h1{font-size:clamp(23px,2.5vw,30px);font-weight:800;letter-spacing:-.03em;margin:0 0 6px} .pb-util .phead p{margin:0;color:var(--pbu-gray);font-size:14.5px;max-width:62ch} .pb-util .phead__acts{display:flex;gap:9px} .pb-util .state{display:none} .pb-util .state.on{display:block} .pb-util /* ============ 2 — EMPTY STATE ============ */ .empty{background:var(--pbu-white);border:1px solid var(--pbu-line);border-radius:18px;padding:44px 40px;text-align:center;margin-bottom:20px} .pb-util .empty__i{width:62px;height:62px;border-radius:18px;background:var(--pbu-teal-tint);color:var(--pbu-teal);display:grid;place-items:center;margin:0 auto 18px} .pb-util .empty h2{margin:0 0 8px;font-size:22px;font-weight:800;letter-spacing:-.025em} .pb-util .empty p{margin:0 auto 8px;max-width:56ch;color:var(--pbu-gray);font-size:14.5px} .pb-util .empty__how{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px 0 0;padding-top:22px;border-top:1px solid var(--pbu-line-2)} .pb-util .empty__how div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--pbu-ink-2);text-align:left} .pb-util .empty__how b{width:24px;height:24px;border-radius:50%;background:var(--pbu-ink);color:#fff;display:grid;place-items:center;font-size:12px;flex:none} .pb-util /* the rail that makes the empty state useful */ .pick{margin-bottom:20px} .pb-util .pick__h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px} .pb-util .pick__h h2{margin:0 0 4px;font-size:19px;font-weight:800;letter-spacing:-.022em} .pb-util .pick__h p{margin:0;font-size:13.5px;color:var(--pbu-gray)} .pb-util .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pb-util .card{background:var(--pbu-white);border:1px solid var(--pbu-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column} .pb-util .card:hover{border-color:var(--pbu-teal);box-shadow:var(--pbu-shadow-lg)} .pb-util .card__i{position:relative;display:block} .pb-util .card__i img{width:100%;height:150px;object-fit:cover} .pb-util .badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;background:var(--pbu-green);color:#fff;border-radius:7px;padding:4px 8px;font-size:10.5px;font-weight:800} .pb-util .card__b{padding:14px 15px 16px;display:flex;flex-direction:column;gap:3px;flex:1} .pb-util .card__b .p{font-size:17px;font-weight:800;letter-spacing:-.02em} .pb-util .card__b .psf{font-size:11.5px;color:var(--pbu-gray)} .pb-util .card__b h3{margin:6px 0 1px;font-size:14.5px;font-weight:800;letter-spacing:-.015em} .pb-util .card__b h3 a{color:var(--pbu-ink)} .pb-util .card__b .l{font-size:12px;color:var(--pbu-gray)} .pb-util .card__b .btn{margin-top:12px;width:100%} .pb-util /* ============ 3 — THE TABLE ============ */ .tablewrap{background:var(--pbu-white);border:1px solid var(--pbu-line);border-radius:16px;overflow:hidden} .pb-util .ctab{width:100%;border-collapse:collapse} .pb-util .ctab th, .pb-util .ctab td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--pbu-line-2)} .pb-util .ctab tr:last-child th, .pb-util .ctab tr:last-child td{border-bottom:0} .pb-util .ctab tbody tr:hover{background:#FCFDFD} .pb-util /* row label column */ .ctab th[scope=row]{width:186px;font-size:12.5px;font-weight:700;color:var(--pbu-gray);background:#FBFCFC;border-right:1px solid var(--pbu-line-2)} .pb-util /* the difference column — the reason this page exists */ .ctab .diffcol{width:212px;background:var(--pbu-teal-tint);border-left:1px solid #CFE2E2} .pb-util .ctab thead .diffcol{background:var(--pbu-teal);color:#fff} .pb-util .diff{font-size:13px;font-weight:700;line-height:1.4} .pb-util .diff--good{color:var(--pbu-green)} .pb-util .diff--bad{color:var(--pbu-red)} .pb-util .diff--same{color:var(--pbu-gray-2);font-weight:600} .pb-util .diff small{display:block;font-size:11.5px;font-weight:500;color:var(--pbu-gray);margin-top:2px} .pb-util /* head cells */ .chead{position:relative;padding:0!important;border-bottom:1px solid var(--pbu-line)!important} .pb-util .chead__in{padding:14px 16px} .pb-util .chead img{width:100%;height:132px;object-fit:cover;display:block} .pb-util .chead h3{margin:10px 0 2px;font-size:15.5px;font-weight:800;letter-spacing:-.02em} .pb-util .chead h3 a{color:var(--pbu-ink)} .pb-util .chead .l{font-size:12px;color:var(--pbu-gray)} .pb-util .chead .p{font-size:20px;font-weight:800;letter-spacing:-.025em;margin-top:8px} .pb-util .chead .psf{font-size:11.5px;color:var(--pbu-gray)} .pb-util .chead__x{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;background:rgba(14,31,38,.72);color:#fff;border:0;display:grid;place-items:center;font-size:16px;line-height:1} .pb-util .chead__x:hover{background:var(--pbu-red)} .pb-util .cell b{font-size:14px;font-weight:700;display:block} .pb-util .cell span{font-size:12px;color:var(--pbu-gray)} .pb-util .cell .yes{color:var(--pbu-green);font-weight:700} .pb-util .cell .no{color:var(--pbu-gray-2)} .pb-util /* add-slot column */ .addslot{border-left:1px dashed var(--pbu-line);background:#FBFCFC;text-align:center;vertical-align:middle!important} .pb-util .addslot__in{padding:26px 16px} .pb-util .addslot__i{width:44px;height:44px;border-radius:50%;border:2px dashed var(--pbu-line);color:var(--pbu-gray-2);display:grid;place-items:center;margin:0 auto 12px} .pb-util .addslot p{margin:0 0 12px;font-size:12.5px;color:var(--pbu-gray-2);line-height:1.45} .pb-util /* verdict */ .verdict{background:linear-gradient(150deg,var(--pbu-ink),#1B3A44);color:#fff;border-radius:16px;padding:26px 28px;margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center} .pb-util .verdict h2{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.022em;color:#fff} .pb-util .verdict p{margin:0 0 6px;font-size:14px;color:rgba(255,255,255,.78);line-height:1.65;max-width:72ch} .pb-util .verdict p:last-of-type{margin-bottom:0} .pb-util .verdict b{color:#fff} .pb-util .verdict__acts{display:flex;flex-direction:column;gap:9px} .pb-util /* 4 — actions */ .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px} .pb-util .actions__r{margin-left:auto;display:flex;gap:10px} .pb-util /* sign-in prompt — the most natural registration moment on the site */ .persist{display:flex;gap:14px;align-items:center;background:var(--pbu-orange-tint);border:1px solid #F3D9C2;border-radius:14px;padding:16px 18px;margin-top:18px;flex-wrap:wrap} .pb-util .persist svg{color:var(--pbu-orange-dk)} .pb-util .persist div{flex:1;min-width:240px} .pb-util .persist b{display:block;font-size:14px;font-weight:800} .pb-util .persist span{font-size:12.5px;color:var(--pbu-ink-2)} @media(max-width:1080px){ .pb-util .grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:860px){ .pb-util .verdict{grid-template-columns:1fr} .pb-util .empty{padding:32px 22px} .pb-util .empty__how{flex-direction:column;align-items:flex-start} .pb-util /* The table scrolls sideways rather than collapsing. A comparison you cannot see side by side is not a comparison. */ .tablewrap{overflow-x:auto} .pb-util .ctab{min-width:760px} } @media(max-width:600px){ .pb-util .grid{grid-template-columns:1fr} } .pb-util :focus-visible{outline:2px solid var(--pbu-orange);outline-offset:2px} /* Live-page additions */ .pb-util .crumbs a,.pb-util .card__b h3 a,.pb-util .chead h3 a{text-decoration:none} .pb-util [hidden]{display:none!important} .pb-util .diff--neutral{color:var(--pbu-gray-2);font-weight:600} .pb-util .card__b .btn.on{border-color:var(--pbu-orange);color:var(--pbu-orange-dk);background:var(--pbu-orange-tint)} .pb-util .loading{padding:52px 0;text-align:center;color:var(--pbu-gray-2);font-size:13.5px} .pb-util .single{background:var(--pbu-amber-tint);border:1px solid #EFDCB8;border-radius:14px;padding:20px 22px;margin-bottom:18px} .pb-util .single b{display:block;font-size:15px;margin-bottom:3px} .pb-util .single span{font-size:13.5px;color:var(--pbu-ink-2)} .pb-util .collection{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1080px){.pb-util .collection{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.pb-util .collection{grid-template-columns:1fr}}