/* ========================================================================== PropertyBazaar — homepage design system (v1.33, Sprint 35) Everything here is scoped under .pb-home. That wrapper is the whole point: main.css has five sprints of appended section CSS in it, and generic class names like .btn .nav .tab .card would otherwise collide in both directions. Scoping means this file owns the homepage outright and cannot leak. Tokens are --pbh-* rather than --pb-* for the same reason. Nunito remains logo-only; every rule here uses the Inter stack. ========================================================================== */ :root{ --pbh-teal:#1F6B6B; --pbh-teal-dk:#155252; --pbh-teal-tint:#EAF2F2; --pbh-orange:#E8873C; --pbh-orange-dk:#C26A25; --pbh-orange-tint:#FDF0E5; --pbh-ink:#0E1F26; --pbh-ink-2:#2B3F47; --pbh-gray:#5F6B70; --pbh-gray-2:#8B979C; --pbh-line:#E2E7E8; --pbh-line-2:#EFF3F3; --pbh-ground:#F6F8F8; --pbh-white:#fff; --pbh-green:#1F7A5C; --pbh-green-tint:#E7F4EE; --pbh-red:#B4472E; --pbh-shadow:0 1px 2px rgba(14,31,38,.05); --pbh-shadow-lg:0 12px 32px rgba(14,31,38,.10); --pbh-r:12px; --pbh-r-lg:16px; --pbh-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .pb-home *{box-sizing:border-box} html{scroll-behavior:smooth} /* The wrapper carries what the mockup put on . */ .pb-home{ background:var(--pbh-ground);color:var(--pbh-ink); font-family:var(--pbh-font);font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased; } body.pb-has-home{background:var(--pbh-ground)} .pb-home img{display:block;max-width:100%} .pb-home button{font-family:inherit;cursor:pointer} .pb-home a{color:var(--pbh-teal);text-decoration:none} .pb-home a:hover{color:var(--pbh-teal-dk)} .pb-home /* Every number on this page is a designed object: tabular figures, .pb-home consistent weight. A property marketplace is a numbers document. */ .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pb-home .wrap{max-width:1240px;margin:0 auto;padding:0 24px} .pb-home .sec{padding:52px 0} .pb-home .sec--tight{padding-top:0} .pb-home .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--pbh-teal);margin-bottom:10px; } .pb-home .eyebrow::before{content:"";width:22px;height:2px;background:var(--pbh-orange);border-radius:2px} .pb-home h2.h{font-size:clamp(23px,2.5vw,31px);font-weight:800;letter-spacing:-.028em;margin:0 0 7px;color:var(--pbh-ink)} .pb-home .sub{margin:0;color:var(--pbh-gray);font-size:14.5px;max-width:72ch} .pb-home .head{margin-bottom:24px} .pb-home .head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .pb-home .more{font-size:13.5px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .pb-home .panel{background:var(--pbh-white);border:1px solid var(--pbh-line);border-radius:var(--pbh-r-lg);padding:30px} .pb-home /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 19px;border-radius:9px;border:1.5px solid transparent; font-size:14px;font-weight:700;line-height:1;transition:.15s} .pb-home .btn--sm{padding:8px 13px;font-size:12.5px} .pb-home .btn--teal{background:var(--pbh-teal);color:#fff} .pb-home .btn--teal:hover{background:var(--pbh-teal-dk);color:#fff} .pb-home .btn--orange{background:var(--pbh-orange);color:#fff} .pb-home .btn--orange:hover{background:var(--pbh-orange-dk);color:#fff} .pb-home .btn--ink{background:var(--pbh-ink);color:#fff} .pb-home .btn--out{border-color:var(--pbh-teal);color:var(--pbh-teal);background:transparent} .pb-home .btn--out:hover{background:var(--pbh-teal);color:#fff} .pb-home .btn--ghost{border-color:var(--pbh-line);color:var(--pbh-gray);background:var(--pbh-white)} .pb-home .btn--ghost:hover{border-color:var(--pbh-teal);color:var(--pbh-teal)} .pb-home /* ---- tabs ---- */ .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .pb-home .tab{background:var(--pbh-white);border:1px solid var(--pbh-line);color:var(--pbh-gray); padding:9px 17px;border-radius:999px;font-size:13.5px;font-weight:700;transition:.15s} .pb-home .tab:hover{border-color:var(--pbh-teal);color:var(--pbh-teal)} .pb-home .tab.on{background:var(--pbh-ink);border-color:var(--pbh-ink);color:#fff} .pb-home .pane{display:none}.pb-home .pane.on{display:block} .pb-home /* ---- horizontal rail ---- */ .rail{position:relative} .pb-home .track{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth; scroll-snap-type:x proximity;padding:4px 2px 16px; scrollbar-width:thin;scrollbar-color:var(--pbh-line) transparent} .pb-home .track>*{scroll-snap-align:start;flex:none} .pb-home .track::-webkit-scrollbar{height:6px} .pb-home .track::-webkit-scrollbar-thumb{background:var(--pbh-line);border-radius:3px} .pb-home .nav{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:4; width:40px;height:40px;border-radius:50%;background:var(--pbh-white); border:1px solid var(--pbh-line);color:var(--pbh-ink); display:grid;place-items:center;box-shadow:var(--pbh-shadow-lg)} .pb-home .nav:hover{background:var(--pbh-ink);color:#fff;border-color:var(--pbh-ink)} .pb-home .nav[disabled]{opacity:.28;pointer-events:none} .pb-home .nav--l{left:-18px}.pb-home .nav--r{right:-18px} .pb-home svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-home /* ============ 1. HERO ============ */ .hero{background:linear-gradient(160deg,var(--pbh-teal) 0%,var(--pbh-ink) 100%);padding:56px 0 64px;color:#fff} .pb-home .hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.035em;margin:0 0 10px;max-width:19ch} .pb-home .hero p{margin:0 0 28px;color:rgba(255,255,255,.72);font-size:16px;max-width:56ch} .pb-home .hero__note{display:block;margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.5)} .pb-home .purpose{display:flex;gap:2px;background:rgba(255,255,255,.1);padding:4px;border-radius:11px 11px 0 0;width:fit-content} .pb-home .purpose button{background:transparent;border:0;color:rgba(255,255,255,.75); padding:10px 20px;border-radius:8px;font-size:13.5px;font-weight:700} .pb-home .purpose button.on{background:var(--pbh-white);color:var(--pbh-ink)} .pb-home .searchbar{background:#fff;border-radius:0 12px 12px 12px;padding:9px;display:flex;gap:8px;align-items:center;box-shadow:var(--pbh-shadow-lg)} .pb-home .searchbar select{border:0;background:var(--pbh-ground);border-radius:8px;padding:13px 14px; font-family:inherit;font-size:14px;font-weight:600;color:var(--pbh-ink)} .pb-home .searchbar input{flex:1;border:0;padding:13px 8px;font-family:inherit;font-size:15px;color:var(--pbh-ink);min-width:0} .pb-home .searchbar input:focus{outline:0} .pb-home .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .pb-home .chips a{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16); color:#fff;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px} .pb-home .chips a:hover{background:rgba(255,255,255,.2);color:#fff} .pb-home /* ============ 2. PERSONAL FOLD ============ */ .pcard{width:296px;background:var(--pbh-white);border:1px solid var(--pbh-line); border-radius:var(--pbh-r-lg);display:flex;flex-direction:column;min-height:352px;overflow:hidden} .pb-home .pcard__h{display:flex;align-items:center;gap:10px;padding:17px 18px 11px} .pb-home .pcard__h h3{margin:0;font-size:14.5px;font-weight:800} .pb-home .pico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none} .pb-home .pico--teal{background:var(--pbh-teal-tint);color:var(--pbh-teal)} .pb-home .pico--orange{background:var(--pbh-orange-tint);color:var(--pbh-orange-dk)} .pb-home .pico--green{background:var(--pbh-green-tint);color:var(--pbh-green)} .pb-home .pico--ink{background:#E9EDEE;color:var(--pbh-ink)} .pb-home .pcard__b{padding:0 18px 16px;flex:1;display:flex;flex-direction:column;gap:11px} .pb-home .pcard__b h4{margin:2px 0 0;font-size:15px;font-weight:800} .pb-home .pcard__b p{margin:0;font-size:12.8px;color:var(--pbh-gray);line-height:1.5} .pb-home .pcard__f{display:flex;align-items:center;justify-content:space-between;padding:13px 18px; border-top:1px solid var(--pbh-line-2);background:#FCFDFD;font-size:13.5px;font-weight:700;color:var(--pbh-teal)} .pb-home .pcard__f:hover{background:var(--pbh-teal-tint)} .pb-home .flow{display:flex;align-items:center;gap:6px;margin:4px 0} .pb-home .flow span{width:34px;height:34px;border-radius:50%;background:var(--pbh-teal-tint);color:var(--pbh-teal);display:grid;place-items:center} .pb-home .flow i{flex:1;height:2px;background:var(--pbh-line);border-radius:2px} .pb-home .ab{display:flex;align-items:center;gap:11px} .pb-home .ab span{width:56px;height:64px;border-radius:9px;background:var(--pbh-ground);border:1px solid var(--pbh-line); display:grid;place-items:center;font-weight:800;color:var(--pbh-gray-2);font-size:17px} .pb-home .ab em{width:22px;height:22px;border-radius:50%;background:var(--pbh-orange)} .pb-home .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} .pb-home .tagrow li, .pb-home .tagrow a{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px; background:var(--pbh-ground);color:var(--pbh-gray);border:1px solid var(--pbh-line-2)} .pb-home .tagrow a{color:var(--pbh-teal)}.pb-home .tagrow a em{font-style:normal;color:var(--pbh-orange);font-weight:800} .pb-home .fauxin{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--pbh-line); border-radius:9px;font-size:13px;color:var(--pbh-ink-2)} .pb-home .mini{display:flex;gap:10px;align-items:flex-start} .pb-home .mini img{width:54px;height:54px;object-fit:cover;border-radius:8px;flex:none} .pb-home .mini b{display:block;font-size:12.8px} .pb-home .mini em{font-style:normal;display:block;font-size:11.5px;color:var(--pbh-gray-2)} .pb-home .mini s{text-decoration:none;display:block;font-size:13px;font-weight:800;color:var(--pbh-teal)} .pb-home .mini .score{margin-left:auto;align-self:center;background:var(--pbh-ink);color:#fff; border-radius:8px;padding:5px 8px;font-size:12px;font-weight:800} .pb-home .prow{display:flex;justify-content:space-between;align-items:center;gap:10px; padding-bottom:9px;border-bottom:1px dashed var(--pbh-line-2)} .pb-home .prow:last-child{border-bottom:0;padding-bottom:0} .pb-home .prow b{display:block;font-size:12.8px} .pb-home .prow em{font-style:normal;font-size:11px;color:var(--pbh-gray-2)} .pb-home .prow .v{text-align:right;font-size:13px;font-weight:800;white-space:nowrap} .pb-home .prow .v i{font-style:normal;font-weight:400;font-size:10.5px;color:var(--pbh-gray-2)} .pb-home .prow .v s{text-decoration:none;display:block;font-size:10.5px;font-weight:700} .pb-home .up{color:var(--pbh-green)}.pb-home .dn{color:var(--pbh-red)} .pb-home .calcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .pb-home .calcgrid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 4px; border:1px solid var(--pbh-line-2);border-radius:10px;background:var(--pbh-ground); color:var(--pbh-ink);font-size:10.5px;font-weight:700;text-align:center;line-height:1.25} .pb-home .calcgrid a:hover{border-color:var(--pbh-teal);color:var(--pbh-teal);background:var(--pbh-white)} .pb-home .bar{height:7px;background:var(--pbh-line);border-radius:4px;overflow:hidden} .pb-home .bar span{display:block;height:100%;background:var(--pbh-orange)} .pb-home /* ============ 3. BUILDER TOP PICKS ============ */ .pick{width:74%;min-width:660px;background:var(--pbh-white);border:1px solid var(--pbh-line); border-radius:var(--pbh-r-lg);padding:16px} .pb-home .pick__rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:12px; border-bottom:1px solid var(--pbh-line-2)} .pb-home .thumb{flex:none;width:94px;border:2px solid transparent;border-radius:9px;background:none;padding:0;text-align:center} .pb-home .thumb img{width:100%;height:54px;object-fit:cover;border-radius:7px} .pb-home .thumb span{display:block;font-size:10.5px;font-weight:700;color:var(--pbh-gray);padding:4px 2px} .pb-home .thumb.on{border-color:var(--pbh-orange)} .pb-home .thumb.on span{color:var(--pbh-ink)} .pb-home .pick__main{display:grid;grid-template-columns:296px 1fr;gap:18px} .pb-home .pick__info{background:linear-gradient(165deg,var(--pbh-teal-tint),var(--pbh-ground)); border-radius:var(--pbh-r);padding:19px;display:flex;flex-direction:column;gap:13px} .pb-home .pick__b{display:flex;gap:11px;align-items:center} .pb-home .pick__b img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:10px; padding:5px;border:1px solid var(--pbh-line)} .pb-home .pick__b b{display:block;font-size:14px;font-weight:800} .pb-home .pick__b a{font-size:12px;text-decoration:underline} .pb-home .slide{display:none;flex:1}.pb-home .slide.on{display:block} .pb-home .slide h3{margin:0 0 5px;font-size:20px;font-weight:800;letter-spacing:-.02em} .pb-home .slide .loc{display:flex;align-items:center;gap:5px;margin:0 0 9px;font-size:12.5px;color:var(--pbh-gray)} .pb-home .slide .price{margin:0 0 3px;font-size:19px;font-weight:800} .pb-home .slide .cfg{margin:0;font-size:12.5px;color:var(--pbh-gray)} .pb-home .stage{position:relative;border-radius:var(--pbh-r);overflow:hidden;min-height:306px;background:var(--pbh-ground)} .pb-home .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s} .pb-home .stage img.on{opacity:1} .pb-home .dots{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2} .pb-home .dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55)} .pb-home .dots button.on{background:var(--pbh-orange);width:19px;border-radius:4px} .pb-home /* ============ 4. FEATURED DEVELOPERS ============ */ .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pb-home .g3--tight{gap:16px} .pb-home .dev{background:var(--pbh-white);border:1px solid var(--pbh-line);border-top:4px solid var(--pbh-teal); border-radius:var(--pbh-r-lg);padding:21px;display:flex;flex-direction:column;gap:13px} .pb-home .dev header{display:flex;gap:13px;align-items:flex-start} .pb-home .dev__logo{width:60px;height:60px;object-fit:contain;border:1px solid var(--pbh-line); border-radius:11px;padding:5px;background:#fff;flex:none} .pb-home .dev h3{margin:0 0 9px;font-size:16.5px;font-weight:800;letter-spacing:-.02em} .pb-home .dev__st{display:flex;gap:24px} .pb-home .dev__st span{display:flex;flex-direction:column;font-size:11px;color:var(--pbh-gray-2)} .pb-home .dev__st b{font-size:18px;font-weight:800;color:var(--pbh-ink)} .pb-home .dev__blurb{margin:0;font-size:13px;line-height:1.55;color:var(--pbh-gray)} .pb-home .dev__link{font-size:13.5px;font-weight:700;color:var(--pbh-teal);border-bottom:2px solid var(--pbh-orange); align-self:flex-start;padding-bottom:2px} .pb-home .dev__hero{position:relative;border-radius:var(--pbh-r);overflow:hidden;margin-top:auto} .pb-home .dev__hero img{width:100%;height:186px;object-fit:cover} .pb-home .dev__hero span{position:absolute;inset:auto 0 0 0;padding:34px 16px 14px;color:#fff; background:linear-gradient(180deg,transparent,rgba(14,31,38,.9));display:flex;flex-direction:column;gap:1px} .pb-home .dev__hero b{font-size:15px}.pb-home .dev__hero em{font-style:normal;font-size:12px;opacity:.85} .pb-home .dev__hero s{text-decoration:none;font-size:15px;font-weight:800;margin-top:3px} .pb-home /* ============ 5. HOT SELLING ============ */ .rank{width:290px;position:relative;padding-left:26px;display:flex;flex-direction:column;color:inherit} .pb-home .rank__n{position:absolute;left:0;top:2px;z-index:1;font-size:78px;font-weight:900;line-height:.8; color:#E4EAEA;letter-spacing:-.07em} .pb-home .rank__i{position:relative;z-index:2;border-radius:var(--pbh-r) var(--pbh-r) 0 0;overflow:hidden} .pb-home .rank__i img{width:100%;height:168px;object-fit:cover} .pb-home .rank__b{position:relative;z-index:2;background:var(--pbh-white);border:1px solid var(--pbh-line);border-top:0; border-radius:0 0 var(--pbh-r) var(--pbh-r);padding:14px 16px 17px;display:flex;flex-direction:column;gap:4px;flex:1} .pb-home .rank__b b{font-size:15px;font-weight:800;letter-spacing:-.015em} .pb-home .rank__b em{font-style:normal;font-size:12.5px;color:var(--pbh-gray)} .pb-home .rank__b s{text-decoration:none;font-size:15px;font-weight:800;margin-top:4px} .pb-home .rank:hover .rank__b{border-color:var(--pbh-teal)} .pb-home /* ============ 6. TOOLS HUB ============ */ .hubtabs{display:flex;gap:4px;margin-bottom:0} .pb-home .hubtabs .tab{border-radius:11px 11px 0 0;border-bottom-color:transparent} .pb-home .hubpane{border:1px solid var(--pbh-line);border-radius:0 var(--pbh-r) var(--pbh-r) var(--pbh-r); padding:24px 10px;grid-template-columns:repeat(6,1fr);gap:8px} .pb-home .hubpane.on{display:grid} .pb-home .tool{display:flex;flex-direction:column;align-items:center;gap:11px;padding:17px 8px; border-radius:11px;color:var(--pbh-ink-2);text-align:center;position:relative} .pb-home .tool+.tool::before{content:"";position:absolute;left:-4px;top:24%;bottom:24%;width:1px;background:var(--pbh-line-2)} .pb-home .tool:hover{background:var(--pbh-ground);color:var(--pbh-teal)} .pb-home .tool span{width:52px;height:52px;border-radius:15px;background:var(--pbh-teal-tint);color:var(--pbh-teal);display:grid;place-items:center} .pb-home .tool:hover span{background:var(--pbh-orange-tint);color:var(--pbh-orange-dk)} .pb-home .tool b{font-size:12.5px;font-weight:700;line-height:1.3} .pb-home /* ============ 7. TRUSTED PROJECTS ============ */ .tc{background:var(--pbh-white);border:1px solid var(--pbh-line);border-radius:var(--pbh-r-lg); overflow:hidden;display:flex;flex-direction:column;color:inherit} .pb-home .tc:hover{border-color:var(--pbh-teal);box-shadow:var(--pbh-shadow-lg)} .pb-home .tc img{width:100%;height:208px;object-fit:cover} .pb-home .tc__b{padding:17px 19px 21px;display:flex;flex-direction:column;gap:3px} .pb-home .tc__b b{font-size:16.5px;font-weight:800;letter-spacing:-.02em} .pb-home .tc__b em{font-style:normal;font-size:12.5px;color:var(--pbh-gray-2);margin-bottom:8px} .pb-home .tc__b i{font-style:normal;font-size:13px;color:var(--pbh-ink-2)} .pb-home .tc__b .loc{font-size:12.5px;color:var(--pbh-gray)} .pb-home .tc__b s{text-decoration:none;font-size:16px;font-weight:800;margin-top:10px} .pb-home /* ============ 8. DISCOVER ============ */ .disc{display:grid;grid-template-columns:302px 1fr;gap:20px;margin-top:22px} .pb-home .acc{border:1px solid var(--pbh-line);border-radius:11px;margin-bottom:10px;overflow:hidden;background:var(--pbh-white)} .pb-home .acc__b{width:100%;display:flex;justify-content:space-between;align-items:center; padding:15px 16px;background:none;border:0;font-size:14.5px;font-weight:800;color:var(--pbh-ink)} .pb-home .acc__b svg{transition:transform .2s;color:var(--pbh-gray)} .pb-home .acc.on .acc__b svg{transform:rotate(90deg)} .pb-home .acc__c{display:none;padding:0 16px 16px} .pb-home .acc.on .acc__c{display:block} .pb-home .acc__c p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--pbh-gray)} .pb-home .links{list-style:none;margin:0;padding:0} .pb-home .links li{padding:7px 0;border-bottom:1px dashed var(--pbh-line-2)} .pb-home .links li:last-child{border-bottom:0} .pb-home .links a{font-size:13.5px} .pb-home .dtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pb-home .dtile{position:relative;border-radius:var(--pbh-r);overflow:hidden;min-height:232px; display:flex;align-items:flex-end;color:#fff;background:linear-gradient(150deg,var(--pbh-teal-dk),var(--pbh-ink))} .pb-home .dtile:nth-child(2){background:linear-gradient(150deg,#2C6C7E,var(--pbh-ink))} .pb-home .dtile:nth-child(3){background:linear-gradient(150deg,var(--pbh-orange-dk),#6B3417)} .pb-home .dtile:nth-child(4){background:linear-gradient(150deg,#3D5A5A,var(--pbh-ink))} .pb-home .dtile:hover{transform:translateY(-2px);box-shadow:var(--pbh-shadow-lg)} .pb-home .dtile div{padding:19px;display:flex;flex-direction:column;gap:2px;color:#fff} .pb-home .dtile b{font-size:21px;font-weight:800} .pb-home .dtile i{font-style:normal;font-size:15px;font-weight:700} .pb-home .dtile em{font-style:normal;font-size:12.5px;opacity:.8} .pb-home /* ============ 9. HIGH DEMAND ============ */ .sc{display:grid;grid-template-columns:120px 1fr;background:var(--pbh-white); border:1px solid var(--pbh-line);border-radius:var(--pbh-r);overflow:hidden;color:inherit} .pb-home .sc:hover{border-color:var(--pbh-teal);box-shadow:var(--pbh-shadow-lg)} .pb-home .sc img{width:100%;height:100%;min-height:152px;object-fit:cover} .pb-home .sc__b{padding:14px 15px;display:flex;flex-direction:column;gap:2px} .pb-home .sc__b b{font-size:14.5px;font-weight:800;letter-spacing:-.015em} .pb-home .sc__b em{font-style:normal;font-size:11.5px;color:var(--pbh-gray-2);margin-bottom:7px} .pb-home .sc__b i{font-style:normal;font-size:12.5px;color:var(--pbh-ink-2)} .pb-home .sc__b .loc{font-size:12.5px;color:var(--pbh-gray)} .pb-home .sc__b s{text-decoration:none;font-size:15px;font-weight:800;margin-top:7px} .pb-home /* ============ 10. PRICE INSIGHTS ============ */ .iw{width:326px;background:var(--pbh-white);border:1px solid var(--pbh-line); border-radius:var(--pbh-r-lg);overflow:hidden;display:flex;flex-direction:column;min-height:428px} .pb-home .iw__h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:17px 18px 12px} .pb-home .iw__h h3{margin:0;font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.015em} .pb-home .iw__h span{font-size:12px;color:var(--pbh-gray-2)} .pb-home .iw__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none; background:var(--pbh-teal-tint);color:var(--pbh-teal)} .pb-home .iw--o .iw__ic{background:var(--pbh-orange-tint);color:var(--pbh-orange-dk)} .pb-home .iw--g .iw__ic{background:var(--pbh-green-tint);color:var(--pbh-green)} .pb-home .iw__call{display:flex;gap:8px;align-items:flex-start;margin:0 14px 14px;padding:11px 13px; border-radius:10px;font-size:12.5px;line-height:1.45;background:var(--pbh-teal-tint)} .pb-home .iw--o .iw__call{background:var(--pbh-orange-tint)} .pb-home .iw--g .iw__call{background:var(--pbh-green-tint)} .pb-home .iw__b{padding:0 18px 16px;flex:1;display:flex;flex-direction:column;gap:12px} .pb-home .iw__f{padding:12px 18px;border-top:1px solid var(--pbh-line-2);background:#FCFDFD;font-size:12px;color:var(--pbh-gray)} .pb-home .map{height:166px;border-radius:10px;border:1px solid var(--pbh-line-2); background:var(--pbh-ground) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M0 18h36M18 0v36' stroke='%23DEE5E5'/%3E%3C/svg%3E"); position:relative;overflow:hidden} .pb-home .map i{position:absolute;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)} .pb-home .ranks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .pb-home .ranks li{display:flex;align-items:center;gap:9px;font-size:12.5px} .pb-home .sw{width:11px;height:11px;border-radius:3px;flex:none} .pb-home .ranks span{flex:1;color:var(--pbh-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pb-home .ranks b{font-weight:800} .pb-home .spark{height:132px;display:flex;align-items:flex-end;gap:9px} .pb-home .spark div{flex:1;background:var(--pbh-orange);border-radius:4px 4px 0 0;opacity:.45;position:relative} .pb-home .spark div.pk{opacity:1} .pb-home .spark div em{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-style:normal; font-size:9.5px;color:var(--pbh-gray-2)} .pb-home .line{height:132px;position:relative} .pb-home .line svg{width:100%;height:100%;overflow:visible} .pb-home .itab{width:100%;border-collapse:collapse;font-size:12.5px} .pb-home .itab th, .pb-home .itab td{padding:7px 3px;text-align:left;border-bottom:1px dashed var(--pbh-line-2)} .pb-home .itab thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pbh-gray-2);font-weight:800} .pb-home .itab tbody th{font-weight:600;color:var(--pbh-ink-2)} .pb-home .itab td{text-align:right;font-weight:800} .pb-home .itab tr:last-child th, .pb-home .itab tr:last-child td{border-bottom:0} .pb-home .stats{display:flex;flex-direction:column;gap:10px} .pb-home .stats div{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 13px;border:1px solid var(--pbh-line-2);border-radius:10px} .pb-home .stats span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--pbh-gray)} .pb-home .stats b{font-size:16px;font-weight:800;white-space:nowrap} .pb-home .bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .pb-home .bars li{display:grid;grid-template-columns:86px 1fr 40px;align-items:center;gap:8px;font-size:12px} .pb-home .bars span{color:var(--pbh-gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pb-home .bars i{height:8px;border-radius:4px;background:var(--pbh-teal);display:block;min-width:3px} .pb-home .bars b{text-align:right;font-weight:800} .pb-home .ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pb-home .ol li{display:flex;align-items:center;gap:10px} .pb-home .ol .n{width:21px;height:21px;border-radius:6px;background:var(--pbh-ground);color:var(--pbh-gray); font-size:11px;font-weight:800;display:grid;place-items:center;flex:none} .pb-home .ol .t{flex:1;display:flex;flex-direction:column;min-width:0} .pb-home .ol .t b{font-size:12.5px;font-weight:700} .pb-home .ol .t em{font-style:normal;font-size:11px;color:var(--pbh-gray-2)} .pb-home .ol .v{font-size:12.5px;font-weight:800;color:var(--pbh-teal);white-space:nowrap} .pb-home .plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pb-home .plist a{display:flex;align-items:center;gap:9px;color:inherit} .pb-home .plist img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none} .pb-home .plist span{flex:1;min-width:0} .pb-home .plist b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pb-home .plist em{font-style:normal;font-size:11px;color:var(--pbh-gray-2)} .pb-home .plist s{text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap} .pb-home /* ============ 11. TOP LOCALITIES ============ */ /* v1.55: was .loc, which also names the location line in three other sections. Both live inside .pb-home, so this card's white background, border and 344px width were landing on every "Sector 150, Noida" on the page — the box you could see cutting through the text in the builder spotlight. Renamed rather than made more specific: two things with the same name in one scope will collide again the next time either changes. */ .loccard{width:344px;background:var(--pbh-white);border:1px solid var(--pbh-line);border-radius:var(--pbh-r-lg); padding:19px;display:flex;flex-direction:column;gap:13px} .pb-home .loccard header{display:flex;justify-content:space-between;align-items:center;gap:10px} .pb-home .loccard h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em} .pb-home .pill{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--pbh-green-tint);color:var(--pbh-green)} .pb-home .rates{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--pbh-line-2);border-radius:11px;overflow:hidden} .pb-home .rates>div{padding:12px 13px;display:flex;flex-direction:column;gap:2px} .pb-home .rates>div+div{border-left:1px solid var(--pbh-line-2)} .pb-home .rates span{font-size:11px;color:var(--pbh-gray-2)} .pb-home .rates b{font-size:15px;font-weight:800} .pb-home .rates em{font-style:normal;font-size:10.5px;color:var(--pbh-gray-2);background:var(--pbh-ground); border-radius:4px;padding:2px 6px;align-self:flex-start} .pb-home .loccard p{margin:0;font-size:12.5px;line-height:1.5;color:var(--pbh-gray);min-height:38px} .pb-home .lstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .pb-home .lstats a{background:var(--pbh-ground);border-radius:10px;padding:11px 6px;display:flex; flex-direction:column;align-items:center;gap:2px;color:var(--pbh-ink)} .pb-home .lstats a:hover{background:var(--pbh-teal-tint)} .pb-home .lstats b{font-size:17px;font-weight:800} .pb-home .lstats span{font-size:10.5px;color:var(--pbh-gray);text-align:center;line-height:1.25} .pb-home .loccard footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto} .pb-home /* ============ 12. NEWLY ADDED ============ */ .nc{width:270px;display:flex;flex-direction:column} .pb-home .nc__i{border-radius:var(--pbh-r);overflow:hidden;display:block} .pb-home .nc__i img{width:100%;height:176px;object-fit:cover} .pb-home .nc__b{padding:12px 2px 0;display:flex;flex-direction:column;gap:2px} .pb-home .nc__b h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em} .pb-home .nc__b .cfg{margin:4px 0 0;font-size:13px;color:var(--pbh-ink-2)} .pb-home .nc__b .loc2{margin:0;font-size:12.5px;color:var(--pbh-gray)} .pb-home .nc__b .pr{margin:8px 0 12px;font-size:16px;font-weight:800} .pb-home .nc__a{display:flex;gap:8px} .pb-home /* ============ 13. CITIES ============ */ .citygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px} .pb-home .city{display:flex;align-items:center;border:1px solid var(--pbh-line);border-radius:11px; overflow:hidden;color:var(--pbh-ink);background:var(--pbh-white)} .pb-home .city__i{padding:11px 14px;background:var(--pbh-ground);border-right:1px solid var(--pbh-line);display:grid;place-items:center} .pb-home .city__n{padding:0 16px;font-size:14.5px;font-weight:600} .pb-home .city:hover{border-color:var(--pbh-teal);color:var(--pbh-teal)} .pb-home .city:hover .city__i{background:var(--pbh-teal-tint)} .pb-home /* ============ 14. SEO FOOTER ============ */ .pbh-seo{background:linear-gradient(180deg,#123C3C,var(--pbh-ink));padding:10px 0 36px;margin-top:52px} .pbh-seo .tabs{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:26px;overflow-x:auto} .pbh-seo .tabs .tab{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0; color:rgba(255,255,255,.6);padding:15px 22px;letter-spacing:.09em;text-transform:uppercase; font-size:11.5px;white-space:nowrap} .pbh-seo .tabs .tab:hover{color:#fff} .pbh-seo .tabs .tab.on{color:#fff;border-bottom-color:var(--pbh-orange);background:transparent} .pbh-seo h3{color:#fff;font-size:16px;font-weight:800;margin:0 0 18px;letter-spacing:-.01em} .pbh-seo .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 28px} .pbh-seo .cols ul{list-style:none;margin:0;padding:0} .pbh-seo .cols li{margin-bottom:9px} .pbh-seo .cols a{font-size:13px;color:rgba(255,255,255,.62);line-height:1.4} .pbh-seo .cols a:hover{color:var(--pbh-orange)} .pb-home .foot{background:var(--pbh-ink);color:rgba(255,255,255,.62);padding:40px 0 0} .pb-home .foot__g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:34px} .pb-home .foot h4{color:var(--pbh-orange);font-size:11.5px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;margin:0 0 14px} .pb-home .foot ul{list-style:none;margin:0;padding:0} .pb-home .foot li{margin-bottom:9px} .pb-home .foot a{font-size:13.5px;color:rgba(255,255,255,.62)} .pb-home .foot a:hover{color:#fff} .pb-home .foot__p{font-size:13.5px;line-height:1.6;margin:0 0 16px;max-width:36ch} .pb-home .foot__bar{border-top:1px solid rgba(255,255,255,.09);background:#081418;padding:18px 0; font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .pb-home /* ============ a11y + responsive ============ */ :focus-visible{outline:2px solid var(--pbh-orange);outline-offset:2px} @media (prefers-reduced-motion:reduce){.pb-home *{transition:none!important;animation:none!important} .pb-home .track{scroll-behavior:auto}} @media(max-width:1080px){ .pb-home .g3{grid-template-columns:repeat(2,1fr)} .pb-home .hubpane.on{grid-template-columns:repeat(3,1fr)} .pb-home .pick{width:92%;min-width:0} .pb-home .pick__main{grid-template-columns:250px 1fr} .pb-home .disc{grid-template-columns:1fr} .pb-home .dtiles{grid-template-columns:repeat(2,1fr)} .pb-home .citygrid{grid-template-columns:repeat(3,1fr)} .pbh-seo .cols{grid-template-columns:repeat(2,1fr)} .pb-home .topnav{display:none} } @media(max-width:760px){ .pb-home .sec{padding:34px 0} .pb-home .panel{padding:19px} .pb-home .g3{grid-template-columns:1fr} .pb-home .hubpane.on{grid-template-columns:repeat(2,1fr)} .pb-home .tool+.tool::before{display:none} .pb-home .pick{width:94%} .pb-home .pick__main{grid-template-columns:1fr} .pb-home .stage{min-height:210px;order:-1} .pb-home .pcard, .pb-home .loc, .pb-home .iw{width:84vw} .pb-home .rank{width:78vw}.pb-home .nc{width:74vw} .pb-home .sc{grid-template-columns:100px 1fr} .pb-home .citygrid, .pb-home .dtiles{grid-template-columns:1fr 1fr} .pbh-seo .cols, .pb-home .foot__g{grid-template-columns:1fr} .pb-home .nav{display:none!important} .pb-home .loccard footer{grid-template-columns:1fr} .pb-home .searchbar{flex-wrap:wrap} .pb-home .searchbar select, .pb-home .searchbar input, .pb-home .searchbar .btn{width:100%} } /* ========================================================================== SPRINT 36 (v1.34) — fixes ========================================================================== */ /* ---- 2. HERO ------------------------------------------------------------- .pb-home a{color:teal} was painting the hero's own links teal on a teal gradient. The hero ships from [pb_hero_search] with its own markup, so it opts out of the wrapper's link colour entirely and states its contrast explicitly rather than inheriting it. */ /* Hero links are white, EXCEPT the trending chips, which are solid pills with their own ink text. Excluding them here keeps main.css the single authority on that component instead of the two files fighting over it. */ .pb-home .pb-hero a:not(.pb-search3__chips a), .pb-home .pb-search3 a:not(.pb-search3__chips a){ color:#fff; } .pb-home .pb-search3__chips a{ color:#0E1F26; } .pb-home .pb-hero a:not(.pb-search3__chips a):hover, .pb-home .pb-search3 a:not(.pb-search3__chips a):hover{ color:var(--pbh-orange); } .pb-home .pb-search3__purpose{ display:flex; gap:3px; flex-wrap:wrap; } .pb-home .pb-search3__purpose button{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.22); border-bottom:0; padding:11px 18px; font-size:12.5px; font-weight:800; letter-spacing:.06em; border-radius:9px 9px 0 0; cursor:pointer; text-shadow:0 1px 2px rgba(14,31,38,.35); } .pb-home .pb-search3__purpose button:hover{ background:rgba(255,255,255,.28); color:#fff; } .pb-home .pb-search3__purpose button.is-active{ background:#fff; color:var(--pbh-ink); border-color:#fff; text-shadow:none; } /* Trending pills are settled in main.css (Sprint 38) so the header and the homepage cannot disagree about them. Only the label stays here. */ .pb-home .pb-hero__title{ color:#fff; } .pb-home .pb-hero__sub{ color:rgba(255,255,255,.78); } .pb-home .pb-search3__dropdown-label, .pb-home .pb-search3__popular-label{ color:rgba(255,255,255,.62); } /* ---- 3. PERSONAL FOLD — premium pass ------------------------------------- The cards were flat rectangles. Weight now comes from a hairline top accent, a real resting shadow, and a lift on hover. The accent colour is the card's own icon colour, so the rail reads as six distinct tools rather than six identical boxes. */ .pb-home .pcard{ width:312px; min-height:368px; border-radius:18px; box-shadow:0 1px 2px rgba(14,31,38,.04), 0 8px 24px rgba(14,31,38,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; position:relative; overflow:hidden; } .pb-home .pcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--pbh-teal),var(--pbh-orange)); opacity:.85; } .pb-home .pcard:nth-child(2)::before{ background:linear-gradient(90deg,var(--pbh-orange),#D9A05B); } .pb-home .pcard:nth-child(3)::before{ background:linear-gradient(90deg,var(--pbh-teal),#4E9E9E); } .pb-home .pcard:nth-child(4)::before{ background:linear-gradient(90deg,var(--pbh-green),#5CB894); } .pb-home .pcard:nth-child(5)::before{ background:linear-gradient(90deg,var(--pbh-ink),#43606B); } .pb-home .pcard:nth-child(6)::before{ background:linear-gradient(90deg,var(--pbh-orange-dk),var(--pbh-orange)); } .pb-home .pcard:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(14,31,38,.05), 0 18px 40px rgba(14,31,38,.13); border-color:transparent; } .pb-home .pcard__h{ padding:20px 20px 12px; } .pb-home .pcard__h h3{ font-size:15px; letter-spacing:-.015em; } .pb-home .pico{ width:38px; height:38px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(14,31,38,.04); } .pb-home .pcard__b{ padding:0 20px 18px; gap:12px; } .pb-home .pcard__b h4{ font-size:15.5px; letter-spacing:-.015em; } .pb-home .pcard__f{ padding:15px 20px; font-size:13.5px; background:linear-gradient(180deg,#FCFDFD,#F4F7F7); border-top:1px solid var(--pbh-line-2); } .pb-home .pcard__f:hover{ background:var(--pbh-teal-tint); } .pb-home .mini{ padding:9px; border-radius:11px; background:var(--pbh-ground); transition:background .15s; } .pb-home .mini:hover{ background:var(--pbh-teal-tint); } .pb-home .mini img{ width:50px; height:50px; border-radius:9px; } .pb-home .prow{ padding:9px 0; } .pb-home .calcgrid a{ border-radius:12px; padding:14px 4px; } /* ---- 4. HOT SELLING — premium pass --------------------------------------- The rank numeral was flat grey behind the card. It now sits in the brand gradient and the card lifts off it, so the ranking reads as a deliberate device rather than a watermark. */ .pb-home .rank{ width:300px; padding-left:30px; } .pb-home .rank__n{ font-size:88px; top:-4px; background:linear-gradient(160deg,var(--pbh-teal) 0%,var(--pbh-orange) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; opacity:.22; transition:opacity .18s ease; } .pb-home .rank:hover .rank__n{ opacity:.5; } .pb-home .rank__i{ border-radius:16px 16px 0 0; } .pb-home .rank__i img{ height:176px; transition:transform .4s ease; } .pb-home .rank:hover .rank__i img{ transform:scale(1.04); } .pb-home .rank__b{ border-radius:0 0 16px 16px; padding:15px 17px 18px; box-shadow:0 1px 2px rgba(14,31,38,.04), 0 8px 22px rgba(14,31,38,.06); transition:box-shadow .18s ease, border-color .18s ease; } .pb-home .rank__b b{ font-size:15.5px; letter-spacing:-.02em; } .pb-home .rank__b s{ font-size:15.5px; color:var(--pbh-ink); } .pb-home .rank:hover .rank__b{ border-color:var(--pbh-teal); box-shadow:0 2px 4px rgba(14,31,38,.05), 0 16px 34px rgba(14,31,38,.12); } /* ---- 5. SITE FOOTER ------------------------------------------------------ */ .pbh-foot{ background:var(--pbh-ink); color:rgba(255,255,255,.62); padding:44px 0 0; } .pbh-foot .wrap{ max-width:1240px; margin:0 auto; padding:0 24px; } .pbh-foot__g{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:34px; } .pbh-foot h4{ color:var(--pbh-orange); font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; } .pbh-foot ul{ list-style:none; margin:0; padding:0; } .pbh-foot li{ margin-bottom:9px; } .pbh-foot a{ font-size:13.5px; color:rgba(255,255,255,.62); text-decoration:none; } .pbh-foot a:hover{ color:#fff; } .pbh-foot__p{ font-size:13.5px; line-height:1.6; margin:0 0 16px; max-width:36ch; } .pbh-foot__mark{ font-family:'Nunito',sans-serif; font-weight:900; font-size:23px; letter-spacing:-.02em; color:#fff; display:inline-block; margin-bottom:14px; } .pbh-foot__mark b{ color:var(--pbh-orange); font-weight:900; } .pbh-foot__cta{ display:inline-flex; align-items:center; gap:7px; padding:11px 19px; border-radius:9px; background:var(--pbh-orange); color:#fff; font-size:13.5px; font-weight:700; line-height:1; } .pbh-foot__cta:hover{ background:var(--pbh-orange-dk); color:#fff; } .pbh-foot__social{ display:flex; gap:10px; margin-top:16px; } .pbh-foot__social a{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:rgba(255,255,255,.72); } .pbh-foot__social a:hover{ background:var(--pbh-orange); color:#fff; } .pbh-foot__bar{ border-top:1px solid rgba(255,255,255,.09); background:#081418; padding:18px 0; font-size:12.5px; } .pbh-foot__bar .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } @media(max-width:1080px){ .pbh-foot__g{ grid-template-columns:1fr 1fr; } } @media(max-width:760px){ .pbh-foot__g{ grid-template-columns:1fr; gap:26px; } .pb-home .pcard{ width:84vw; } .pb-home .rank{ width:80vw; } .pb-home .rank__n{ font-size:70px; } } /* ========================================================================== v1.55 — Section 3, builder spotlight: premium pass Four things separated the reference from ours, and none of them was the layout: 1 OUR CARD WAS WHITE ON GREY. Housing's is a soft gradient panel, so the card reads as an object rather than as a lighter patch of page. 2 THE NEXT CARD WAS CUT OFF FLAT. A hard edge reads as a rendering fault; a gradient fade reads as "there is more", which is the whole job of a peeking card. 3 NOTHING SHOWED THE ROTATION COMING. A card that changes on its own with no warning reads as a glitch. The same change with a progress bar filling reads as designed. 4 THE THUMBNAILS WERE SMALL AND FLAT. They are the navigation for the card, so they need to look like controls. ========================================================================== */ /* ---- 1. the card is a panel, not a white box ---- */ .pb-home .pick{ width:78%; min-width:680px; background:linear-gradient(135deg,#F1F7F6 0%,#FBF6F1 55%,#FDF3EA 100%); border:1px solid #E2ECEA; border-radius:20px; padding:0; overflow:hidden; position:relative; box-shadow:0 1px 2px rgba(14,31,38,.04), 0 14px 38px rgba(14,31,38,.07); transition:box-shadow .2s ease; } .pb-home .pick:hover{ box-shadow:0 2px 4px rgba(14,31,38,.05), 0 22px 54px rgba(14,31,38,.12); } /* ---- 3. rotation progress ---- */ .pb-home .pick__prog{ position:absolute; inset:0 0 auto 0; height:3px; background:rgba(14,31,38,.06); z-index:3; } .pb-home .pick__prog span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pbh-teal),var(--pbh-orange)); transition:width .25s linear; } .pb-home .pick.is-paused .pick__prog span{ transition:none; } /* ---- 4. thumbnails as controls ---- */ .pb-home .pick__rail{ display:flex; gap:10px; overflow-x:auto; padding:18px 22px 14px; margin:0; border-bottom:1px solid rgba(14,31,38,.06); scrollbar-width:none; } .pb-home .pick__rail::-webkit-scrollbar{ display:none; } .pb-home .thumb{ flex:none; width:112px; padding:0; background:none; border:0; border-radius:12px; text-align:left; position:relative; opacity:.55; transition:opacity .18s ease, transform .18s ease; } .pb-home .thumb:hover{ opacity:.85; transform:translateY(-2px); } .pb-home .thumb img{ width:100%; height:64px; object-fit:cover; border-radius:11px; border:2px solid transparent; transition:border-color .18s ease; } .pb-home .thumb span{ display:block; font-size:11.5px; font-weight:700; color:var(--pbh-gray); padding:6px 2px 0; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pb-home .thumb.on{ opacity:1; transform:none; } .pb-home .thumb.on img{ border-color:var(--pbh-orange); } .pb-home .thumb.on span{ color:var(--pbh-ink); } /* ---- main panel ---- */ .pb-home .pick__main{ grid-template-columns:330px 1fr; gap:0; padding:22px; } .pb-home .pick__info{ background:transparent; border-radius:0; padding:6px 26px 6px 8px; justify-content:center; gap:16px; } .pb-home .pick__b img{ width:52px; height:52px; border-radius:13px; } .pb-home .pick__b b{ font-size:15px; } .pb-home .slide h3{ font-size:24px; letter-spacing:-.028em; margin-bottom:7px; } .pb-home .slide .price{ font-size:23px; margin-top:14px; } .pb-home .slide .cfg{ font-size:13px; } .pb-home .pick__info .btn{ margin-top:18px; align-self:flex-start; padding:13px 24px; } .pb-home .stage{ border-radius:16px; min-height:344px; } /* ---- pause, on the image where the motion is ---- */ .pb-home .stage__pause{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(14,31,38,.62); color:#fff; border:0; display:grid; place-items:center; backdrop-filter:blur(6px); opacity:0; transition:opacity .18s ease, background .15s ease; } .pb-home .pick:hover .stage__pause, .pb-home .pick:focus-within .stage__pause, .pb-home .pick.is-paused .stage__pause{ opacity:1; } .pb-home .stage__pause:hover{ background:var(--pbh-ink); } .pb-home .pick.is-paused .stage__pause svg rect:last-child{ display:none; } .pb-home .dots{ bottom:14px; } .pb-home .dots button{ background:rgba(255,255,255,.5); } .pb-home .dots button.on{ background:#fff; width:22px; } /* ---- 2. the next card fades rather than being cut off ---- */ .pb-home .rail--pick{ position:relative; } .pb-home .rail--pick .track{ padding-right:0; } .pb-home .rail--pick::after{ content:""; position:absolute; top:0; right:0; bottom:16px; width:150px; background:linear-gradient(90deg,rgba(246,248,248,0) 0%,rgba(246,248,248,.72) 45%,var(--pbh-ground) 100%); pointer-events:none; z-index:3; } .pb-home .rail--pick .nav--r{ right:26px; z-index:4; } .pb-home .rail--pick .nav{ width:46px; height:46px; } @media(max-width:1080px){ .pb-home .pick{ width:92%; min-width:0; } .pb-home .pick__main{ grid-template-columns:280px 1fr; } .pb-home .rail--pick::after{ width:80px; } } @media(max-width:760px){ .pb-home .pick{ width:88vw; } .pb-home .pick__main{ grid-template-columns:1fr; padding:16px; } .pb-home .pick__info{ padding:14px 4px 0; } .pb-home .stage{ min-height:216px; } .pb-home .slide h3{ font-size:20px; } .pb-home .rail--pick::after{ display:none; } }