:root{ --bg:#F3F5F7; --surface:#FFFFFF; --surface-2:#E9EDF2; --navy-900:#0A2856; --navy-800:#0F3C80; --navy-700:#1D5DA6; --ink:#10192B; --ink-soft:#4B5768; --ink-faint:#7A8494; --gold-500:#A52D12; --gold-600:#841F0A; --gold-100:#F6DED7; --accent-ondark:#FF9A61; --teal-500:#0F5FB0; --teal-100:#DCEAFA; --coral-500:#A66A0A; --coral-100:#F5E7CE; --border:#DCE2E9; --border-strong:#C3CCD8; --success:#2E7D4F; --danger:#A52D12; --focus:#1D5DA6; /* HUD Home Store's own action-button blue (sampled from their property detail page: "Find a Broker" / "Back to Search Results" / "Log in to Submit Bid") — used for Bid Now + the instant mortgage/insurance buttons per the broker's direction to match that site's look. */ --hud-blue:#1C3B7C; --hud-blue-dark:#152D5F; --shadow: 0 1px 2px rgba(11,33,64,0.06), 0 8px 24px -12px rgba(11,33,64,0.18); --radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --maxw: 1160px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0A1220; --surface:#101B2E; --surface-2:#16233A; --navy-900:#081B33; --navy-800:#0E2E5C; --navy-700:#1D5DA6; --ink:#E7ECF3; --ink-soft:#AEB9CA; --ink-faint:#7E8AA0; --gold-500:#E2703F; --gold-600:#F08A5C; --gold-100:#3A1B12; --accent-ondark:#FFB27F; --teal-500:#5B9EE6; --teal-100:#16283F; --coral-500:#E0A23D; --coral-100:#3A2B10; --border:#233150; --border-strong:#2F4066; --hud-blue:#4472C4; --hud-blue-dark:#5C87D6; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -14px rgba(0,0,0,0.6); } } :root[data-theme="dark"]{ --bg:#0A1220; --surface:#101B2E; --surface-2:#16233A; --navy-900:#081B33; --navy-800:#0E2E5C; --navy-700:#1D5DA6; --ink:#E7ECF3; --ink-soft:#AEB9CA; --ink-faint:#7E8AA0; --gold-500:#E2703F; --gold-600:#F08A5C; --gold-100:#3A1B12; --accent-ondark:#FFB27F; --teal-500:#5B9EE6; --teal-100:#16283F; --coral-500:#E0A23D; --coral-100:#3A2B10; --border:#233150; --border-strong:#2F4066; --hud-blue:#4472C4; --hud-blue-dark:#5C87D6; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -14px rgba(0,0,0,0.6); } *,*::before,*::after{box-sizing:border-box;} html,body{height:auto;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); } h1,h2,h3,h4{ font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:800; letter-spacing:-0.015em; line-height:1.12; color:var(--navy-900); margin:0 0 .5em; text-wrap:balance; } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4{ color:var(--ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4{ color:var(--ink); } } p{margin:0 0 1em; color:var(--ink-soft); max-width:65ch;} a{color:var(--teal-500); text-decoration-thickness:1.5px; text-underline-offset:2px;} a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; } img{max-width:100%;} [hidden]{display:none!important;} .mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums;} .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px;} .eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-600); font-weight:600; margin:0 0 10px; display:block; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"Public Sans", sans-serif; font-weight:700; font-size:.95rem; padding:13px 22px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; line-height:1; transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease; white-space:nowrap; } .btn:active{transform:translateY(1px);} .btn-gold{background:var(--gold-500); color:#fff;} :root[data-theme="dark"] .btn-gold{ color:#1A1204; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-gold{ color:#1A1204; } } .btn-gold:hover{background:var(--gold-600); box-shadow:var(--shadow);} /* HUD Home Store blue — used for "Start a Bid" on the listing photo and the instant mortgage/insurance quote buttons, to match hudhomestore.gov's own action-button color. */ .btn-blue{background:var(--hud-blue); color:#fff;} .btn-blue:hover{background:var(--hud-blue-dark); box-shadow:var(--shadow);} .btn-outline{background:transparent; border-color:rgba(255,255,255,.5); color:#fff;} .btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.08);} .btn-ghost{background:var(--surface-2); color:var(--navy-900); border-color:var(--border);} :root[data-theme="dark"] .btn-ghost{ color:var(--ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-ghost{ color:var(--ink); } } .btn-ghost:hover{background:var(--surface); border-color:var(--border-strong);} .btn-sm{padding:9px 16px; font-size:.85rem;} /* Base .btn is nowrap so short buttons never wrap awkwardly, but a long label (the hero's "See Florida homes to bid on — owner-occupant") has nowhere to go on a narrow screen — several ancestors (.pagehead, etc.) set overflow:hidden for decorative reasons, which silently CLIPPED the overflow instead of scrolling the page, so it just read as a cut-off button. Let long buttons wrap to a second line below ~600px instead. */ @media (max-width:600px){ .btn{white-space:normal; text-align:center;} } /* ===== Header / Nav ===== */ header.site{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:linear-gradient(122deg, var(--navy-900) 0%, var(--navy-800) 78%); box-shadow: 0 3px 3px rgba(4,12,26,.18), 0 14px 28px -16px rgba(4,12,26,.55); border-bottom:3px solid var(--gold-500); } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; font-size:.8rem; color:rgba(255,255,255,.76); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.14); } .topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;} .topbar a{color:rgba(255,255,255,.9); font-weight:600;} .topbar a:hover{color:var(--accent-ondark);} .topbar-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap;} nav.mainnav{padding-block:14px;} nav.mainnav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;} .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff;} .brand-mark{ width:48px; height:48px; border-radius:4px; flex:none; overflow:hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 6px 16px -4px rgba(0,0,0,.55); transition: transform .18s ease, box-shadow .18s ease; } .brand:hover .brand-mark{ transform:translateY(-1px) scale(1.03); box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 8px 20px -4px rgba(0,0,0,.6); } .brand-mark svg, .brand-mark img{display:block; width:100%; height:100%; object-fit:cover;} .brand-text{display:flex; flex-direction:column; line-height:1.22;} .brand-text strong{font-family:"Public Sans",sans-serif; font-size:1.2rem; font-weight:800; letter-spacing:-.01em;} .brand-text span{font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ondark); font-weight:700;} .brand-text span.brand-lic{font-size:.68rem; letter-spacing:0; white-space:nowrap; text-transform:none; color:rgba(255,255,255,.88); font-weight:600; margin-top:1px;} .navlinks{display:flex; gap:4px; align-items:center; flex-wrap:wrap;} .navlinks a{ color:rgba(255,255,255,.8); text-decoration:none; font-size:.88rem; font-weight:700; padding:9px 13px; border-radius:999px; transition:background .15s, color .15s; } .navlinks a:hover{color:#fff; background:rgba(255,255,255,.1);} .navlinks a.active{color:#fff; background:var(--gold-500); box-shadow:0 3px 10px -3px rgba(165,45,18,.7);} .nav-cta{display:flex; align-items:center; gap:10px;} .nav-cta .btn-gold{box-shadow:0 4px 14px -3px rgba(165,45,18,.55);} .hamburger{display:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:9px 11px; color:#fff; cursor:pointer;} @media (max-width:920px){ .navlinks{display:none; position:absolute; left:0; right:0; top:100%; background:var(--navy-900); flex-direction:column; align-items:stretch; padding:10px 20px 18px; border-bottom:3px solid var(--gold-500); gap:2px;} .navlinks.open{display:flex;} .navlinks a{padding:12px 10px;} .hamburger{display:inline-flex;} nav.mainnav{position:relative;} .topbar-links{display:none;} } @media (max-width:640px){ .brand-text span{display:none;} .brand-text strong{font-size:1.02rem;} .brand-mark{width:38px; height:38px;} nav.mainnav .wrap{gap:10px;} .nav-cta .btn{padding:9px 14px; font-size:.82rem;} } @media (max-width:480px){ .nav-cta{display:none;} } /* ===== Page / Section scaffolding ===== */ main{display:block;} .page{animation:fadein .25s ease;} @keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion:reduce){ .page{animation:none;} } .pagehead{background:var(--navy-900); color:#fff; padding:52px 0 44px; position:relative; overflow:hidden;} .pagehead::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 260px at 88% -10%, rgba(173,124,36,.28), transparent 60%), radial-gradient(500px 240px at 8% 120%, rgba(46,110,104,.28), transparent 60%); } .pagehead .wrap{position:relative;} .pagehead h1{color:#fff; font-size:clamp(1.9rem,4vw,2.7rem); max-width:18ch;} .pagehead p.lead{color:rgba(255,255,255,.78); font-size:1.08rem; max-width:60ch;} .pagehead .eyebrow{color:var(--accent-ondark);} section.block{padding:56px 0;} section.block.tight{padding:36px 0;} section.block.alt{background:var(--surface-2);} .section-head{max-width:68ch; margin-bottom:32px;} .grid{display:grid; gap:20px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} @media (max-width:860px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} } @media (min-width:861px) and (max-width:1080px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:24px; display:flex; flex-direction:column; gap:10px; } .card h3{font-size:1.08rem;} .card p{margin-bottom:0; font-size:.94rem;} .card .tag{ align-self:flex-start; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; background:var(--teal-100); color:var(--teal-500); padding:4px 10px; border-radius:999px; font-weight:600; } .card .tag.gold{background:var(--gold-100); color:var(--gold-600);} .card .tag.coral{background:var(--coral-100); color:var(--coral-500);} /* Path cards on home */ .pathcard{ border-radius:var(--radius-l); padding:30px; color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; min-height:280px; } .pathcard.owner{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));} .pathcard.investor{background:linear-gradient(160deg,#8A2510,#4A1408);} .pathcard h3{color:#fff; font-size:1.5rem;} .pathcard p{color:rgba(255,255,255,.78);} .pathcard ul{margin:0; padding-left:1.1em; color:rgba(255,255,255,.78); font-size:.92rem; display:flex; flex-direction:column; gap:6px;} .pathcard .btn{margin-top:auto; align-self:flex-start;} /* Timeline (process) */ .timeline{display:flex; flex-direction:column; gap:0; counter-reset:step;} .tstep{display:grid; grid-template-columns:64px 1fr; gap:20px; position:relative; padding-bottom:34px;} .tstep:last-child{padding-bottom:0;} .tnum{ width:44px; height:44px; border-radius:50%; background:var(--navy-900); color:var(--accent-ondark); display:flex; align-items:center; justify-content:center; font-family:"Public Sans",sans-serif; font-weight:800; font-size:1.05rem; position:relative; z-index:1; flex:none; } .tstep::before{ content:""; position:absolute; left:22px; top:44px; bottom:-2px; width:2px; background:var(--border-strong); } .tstep:last-child::before{display:none;} .tbody{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:20px 22px;} .tbody h3{font-size:1.12rem; margin-bottom:6px;} .tbody .meta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;} .pill{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; font-weight:600; border:1px solid var(--border-strong); color:var(--ink-soft); } .pill.who-owner{background:var(--navy-800); color:#fff; border-color:var(--navy-800);} .pill.who-investor{background:var(--gold-100); color:var(--gold-600); border-color:transparent;} .pill.who-both{background:var(--surface-2); color:var(--ink-soft); border-color:var(--border-strong);} @media (max-width:600px){ .tstep{grid-template-columns:34px 1fr; gap:12px;} .tnum{width:34px; height:34px; font-size:.85rem;} .tstep::before{left:17px; top:34px;} } /* Comparison table */ .tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface);} table.compare{width:100%; border-collapse:collapse; min-width:640px;} table.compare th, table.compare td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--border); font-size:.92rem; vertical-align:top;} table.compare thead th{background:var(--surface-2); font-family:"Public Sans",sans-serif; font-size:1rem; font-weight:700; color:var(--navy-900);} :root[data-theme="dark"] table.compare thead th{ color:var(--ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) table.compare thead th{ color:var(--ink); } } table.compare td:first-child, table.compare th:first-child{font-weight:700; color:var(--ink); white-space:nowrap;} table.compare tr:last-child td{border-bottom:none;} /* Below ~700px the table's 640px min-width just ran off the right edge of the screen with no visible hint it could be scrolled — read as "cut off," not "scrollable." Stack each row into a labeled card instead (classic responsive-table pattern): every shows its own column header (from data-label, set per cell in part_process/owner/investors) right above its value. */ @media (max-width:700px){ .tablewrap{overflow-x:visible; border:none; background:none;} table.compare{display:block; min-width:0; width:100%; border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; background:var(--surface);} table.compare thead{display:none;} table.compare tbody{display:block;} table.compare tr{display:block; border-bottom:1px solid var(--border);} table.compare tr:last-child{border-bottom:none;} table.compare td{display:block; padding:9px 16px; border-bottom:none; white-space:normal;} table.compare td:first-child{padding-top:14px; background:var(--surface-2);} table.compare td:last-child{padding-bottom:14px;} table.compare td[data-label]::before{content:attr(data-label); display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); margin-bottom:2px;} } /* Callouts */ .callout{ display:flex; gap:14px; padding:20px 22px; border-radius:var(--radius-m); border:1px solid var(--border); background:var(--surface); align-items:flex-start; } .callout .icon{flex:none; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Public Sans",sans-serif;} .callout.info{border-color:var(--teal-500); background:var(--teal-100);} .callout.info .icon{background:var(--teal-500); color:#fff;} .callout.warn{border-color:var(--coral-500); background:var(--coral-100);} .callout.warn .icon{background:var(--coral-500); color:#fff;} .callout h4{margin:0 0 4px; font-size:1rem;} .callout p{margin:0; font-size:.92rem;} /* HOA/condo fee callout — sits in the narrower detail-page summary column, so it's more compact than a full-width article callout. Only rendered when the broker has hand-verified an actual fee/assessment (see hoa_html_for in generate.py) — never a guessed number. */ .hoa-callout{padding:14px 16px; margin:0 0 16px; gap:12px;} .hoa-callout .icon{width:28px; height:28px; font-size:.95rem;} .hoa-callout h4{font-size:.88rem;} .hoa-callout p{font-size:.82rem; line-height:1.45;} .listinghoa{font-size:.78rem; font-weight:700; color:var(--gold-600); margin:2px 0 0;} /* Stat strip */ .statstrip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden;} .stat{background:var(--surface); padding:22px 18px; text-align:center;} .stat .num{font-family:"Public Sans",sans-serif; font-size:1.7rem; font-weight:800; color:var(--gold-600); display:block;} .stat .lbl{font-size:.78rem; color:var(--ink-soft); margin-top:4px;} @media (max-width:700px){ .statstrip{grid-template-columns:repeat(2,1fr);} } /* Accordion (FAQ) */ .accordion{display:flex; flex-direction:column; gap:10px;} .accitem{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); overflow:hidden;} .accq-heading{margin:0; font-size:1em; font-weight:400;} .accq{ width:100%; text-align:left; background:none; border:none; padding:18px 20px; font-family:"Public Sans",sans-serif; font-weight:700; font-size:.98rem; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; } .accq .plus{font-family:"IBM Plex Mono",monospace; color:var(--gold-600); font-size:1.1rem; flex:none; transition:transform .18s ease;} .accitem[data-open="true"] .plus{transform:rotate(45deg);} .acca{padding:0 20px 18px; font-size:.93rem; color:var(--ink-soft); max-width:70ch;} .acca p{font-size:.93rem;} /* Glossary */ .glossgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;} @media (max-width:760px){ .glossgrid{grid-template-columns:1fr;} } .gitem{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); padding:18px 20px;} .gitem dt{font-family:"Public Sans",sans-serif; font-weight:700; color:var(--navy-900); font-size:1rem; margin-bottom:4px;} :root[data-theme="dark"] .gitem dt{ color:var(--ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gitem dt{ color:var(--ink); } } .gitem dd{margin:0; font-size:.9rem; color:var(--ink-soft);} .gitem .abbr{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--gold-600); margin-left:8px;} /* ===== Blog ===== */ .breadcrumb{font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:16px;} .breadcrumb a{color:rgba(255,255,255,.75);} .breadcrumb a:hover{color:#fff;} .blogfilter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;} .blogmeta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; font-size:.78rem; color:var(--ink-faint);} .blogmeta .cat{font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-600); font-weight:700;} .blogmeta .cat.ondark{color:var(--accent-ondark);} .bloggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} @media (max-width:900px){ .bloggrid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .bloggrid{grid-template-columns:1fr;} } .blogcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:22px; display:flex; flex-direction:column; gap:10px; text-decoration:none; transition:border-color .15s, transform .15s;} .blogcard:hover{border-color:var(--border-strong); transform:translateY(-2px);} .blogcard .blogmeta{margin-bottom:0;} .blogcard h3{font-size:1.02rem; margin:0; color:var(--ink);} :root[data-theme="dark"] .blogcard h3{ color:var(--ink); } .blogcard p{font-size:.88rem; margin:0; color:var(--ink-soft);} .blogcard .weektag{margin-top:auto; padding-top:8px; font-size:.76rem; color:var(--ink-faint); border-top:1px solid var(--border);} .quickanswer{ display:flex; gap:14px; padding:22px 24px; border-radius:var(--radius-m); border:1.5px solid var(--navy-800); background:var(--teal-100); margin:28px 0 32px; } .quickanswer .icon{flex:none; width:30px; height:30px; border-radius:8px; background:var(--navy-800); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Public Sans",sans-serif; font-weight:800; font-size:.85rem;} .quickanswer .label{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-800); font-weight:700; display:block; margin-bottom:4px;} :root[data-theme="dark"] .quickanswer .label{ color:var(--teal-500); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .quickanswer .label{ color:var(--teal-500); } } .quickanswer p{margin:0; font-size:.98rem; color:var(--ink);} .blogbody{max-width:72ch;} .blogbody h2{font-size:1.35rem; margin-top:2.2em;} .blogbody h2:first-child{margin-top:0;} .blogbody h3{font-size:1.08rem; margin-top:1.6em;} .blogbody p, .blogbody li{max-width:none;} .blogbody ul, .blogbody ol{color:var(--ink-soft); font-size:.98rem; padding-left:1.3em; display:flex; flex-direction:column; gap:8px; margin:0 0 1.2em;} .blogbody .callout{margin:1.6em 0;} .blogbody strong{color:var(--ink);} .relatedposts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;} @media (max-width:760px){ .relatedposts{grid-template-columns:1fr;} } .relatedcard{display:block; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px 18px; text-decoration:none;} .relatedcard:hover{border-color:var(--border-strong);} .relatedcard .cat{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-600); font-weight:700; display:block; margin-bottom:6px;} .relatedcard h4{margin:0; font-size:.92rem; color:var(--ink); font-weight:700;} .glossfilter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;} .chip{ font-size:.8rem; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; } .chip.active{background:var(--navy-900); color:#fff; border-color:var(--navy-900);} /* CTA banner */ .ctaband{ background:linear-gradient(135deg,var(--navy-900),var(--navy-800)); color:#fff; border-radius:var(--radius-l); padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; } .ctaband::after{content:""; position:absolute; inset:0; background:radial-gradient(420px 200px at 90% 0%, rgba(173,124,36,.32), transparent 65%); pointer-events:none;} .ctaband .txt{position:relative; max-width:520px;} .ctaband h2{color:#fff; font-size:1.5rem; margin-bottom:6px;} .ctaband p{color:rgba(255,255,255,.78); margin:0;} .ctaband .btns{position:relative; display:flex; gap:12px; flex-wrap:wrap;} /* Forms */ .formcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:30px; box-shadow:var(--shadow);} .broker-card{display:flex; gap:18px; align-items:flex-start; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--border);} .broker-photo{width:104px; height:130px; object-fit:cover; object-position:50% 14%; border-radius:var(--radius-m); flex:none; box-shadow:var(--shadow);} .broker-cred{font-size:.83rem; color:var(--ink-faint); margin-bottom:8px;} .broker-mini{display:flex; align-items:center; gap:13px; margin-bottom:16px;} .broker-mini img{width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 14%; flex:none; box-shadow:0 0 0 3px var(--surface-2);} .broker-mini h3{margin:0 0 2px; font-size:1.02rem;} .broker-mini p{margin:0; font-size:.8rem; color:var(--ink-faint);} @media (max-width:480px){ .broker-card{flex-direction:column; align-items:flex-start;} .broker-photo{width:100px; height:124px;} } .field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;} .field label{font-size:.82rem; font-weight:700; color:var(--ink);} .field input, .field select, .field textarea{ font-family:inherit; font-size:.95rem; padding:11px 13px; border-radius:var(--radius-s); border:1.5px solid var(--border-strong); background:var(--bg); color:var(--ink); width:100%; } .field textarea{min-height:110px; resize:vertical;} .radiorow{display:flex; gap:10px; flex-wrap:wrap;} .radiopill{position:relative;} .radiopill input{position:absolute; opacity:0;} .radiopill label{ display:block; padding:10px 16px; border-radius:999px; border:1.5px solid var(--border-strong); font-size:.88rem; font-weight:700; color:var(--ink-soft); cursor:pointer; } .radiopill input:checked + label{background:var(--navy-900); border-color:var(--navy-900); color:#fff;} .formnote{font-size:.78rem; color:var(--ink-faint); margin-top:10px;} #formmsg{font-size:.85rem; font-weight:700; margin-top:10px;} #formmsg.ok{color:var(--success);} #bidFormMsg{font-size:.85rem; font-weight:700; margin-top:10px;} #bidFormMsg.ok{color:var(--success);} .btn:disabled{opacity:.6; cursor:not-allowed;} /* Footer */ footer.site{background:var(--navy-900); color:rgba(255,255,255,.72); padding:52px 0 28px; margin-top:60px;} .footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;} @media (max-width:800px){ .footgrid{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .footgrid{grid-template-columns:1fr;} } footer.site .foothead{color:#fff; font-family:"Public Sans",sans-serif; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;} footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;} footer.site a{color:rgba(255,255,255,.72); text-decoration:none; font-size:.9rem;} footer.site a:hover{color:#fff;} footer.site p{color:rgba(255,255,255,.65); font-size:.88rem;} .eho{display:flex; align-items:flex-start; gap:14px; color:#fff; margin:0 0 22px; max-width:760px;} .eho svg{flex:none; margin-top:2px;} .eho strong{font-family:"Public Sans",sans-serif; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;} .eho .eho-statement{margin:4px 0 0; font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.62);} .footbottom{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.78rem; color:rgba(255,255,255,.5);} .disclaimer{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-m); padding:16px 20px; font-size:.78rem; color:rgba(255,255,255,.6); margin-bottom:28px; max-width:none; } .skiplink{position:absolute; left:-999px; top:0; background:var(--navy-900); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0; border:1px solid var(--gold-500);} .skiplink:focus{left:0;} .twocol{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start;} @media (max-width:860px){ .twocol{grid-template-columns:1fr;} } ol.steplist, ul.checklist{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:10px; color:var(--ink-soft); font-size:.95rem;} ul.checklist{list-style:none; padding-left:0;} ul.checklist li{padding-left:28px; position:relative;} ul.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--teal-500); font-weight:700;} /* Listings */ .chipbar{display:flex; gap:10px; flex-wrap:wrap;} .listingsToolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;} .listingscount{font-family:"Public Sans",sans-serif; font-weight:800; font-size:1.6rem; color:var(--navy-900); margin:0 0 16px;} :root[data-theme="dark"] .listingscount{ color:#fff; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .listingscount{ color:#fff; } } .viewtoggle{display:flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; flex-shrink:0;} .viewbtn{font-size:.8rem; font-weight:700; padding:7px 16px; border:none; background:var(--surface); color:var(--ink-soft); cursor:pointer;} .viewbtn + .viewbtn{border-left:1px solid var(--border-strong);} .viewbtn.active{background:var(--navy-900); color:#fff;} .mapwrap{border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; margin-bottom:28px; box-shadow:var(--shadow); position:relative; z-index:0;} /* Google Maps' own controls (zoom, Street View pegman, its InfoWindow layer, etc.) render with high internal z-index values of their own. The map container it builds is position:relative with no z-index set, so — without a stacking context somewhere above it — those values aren't contained; they compare directly against the page's sticky header (z-index:50) and win, making the map paint OVER the header as it scrolls underneath it. position:relative + z-index:0 here creates that missing stacking context, boxing Google Maps' internal z-index values inside it so the whole map is placed as a single unit below the header again. */ #listingsMap{height:420px; width:100%; background:var(--surface-2); position:relative; z-index:0;} .mapwrap.expanded #listingsMap{height:600px;} @media (max-width:640px){ .mapwrap.expanded #listingsMap{height:440px;} } /* Map pin popups show the same full listing card used in the grid, so clicking a pin is enough to review the home and start a bid — strip Google's own InfoWindow chrome (padding, rounded-square frame, default close button placement) so the card supplies all of it. */ #listingsMap .gm-style-iw-c{padding:0; border-radius:var(--radius-m); box-shadow:0 6px 20px rgba(0,0,0,.25);} #listingsMap .gm-style-iw-d{overflow:hidden !important; padding:0;} #listingsMap .gm-style-iw-d .listingpopup-inner{width:260px;} #listingsMap .gm-style-iw-tc::after{background:var(--surface);} #listingsMap .gm-ui-hover-effect{top:4px !important; right:4px !important;} .listinggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} @media (max-width:900px){ .listinggrid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .listinggrid{grid-template-columns:1fr;} } .listingcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .15s, border-color .15s, box-shadow .3s ease;} .listingcard:hover{transform:translateY(-2px); border-color:var(--border-strong);} /* Blue frame shown briefly on the list row when its map pin is clicked (see selectListingRow in script.js) — box-shadow rather than outline so it follows the card's own border-radius instead of squaring off the corners. */ .listingcard.pin-selected{box-shadow:0 0 0 3px var(--focus), var(--shadow);} /* Whole card is a click target (see assets_script.js) — cards without a detail page (no detailUrl) don't get the pointer cursor/outline since clicking them doesn't go anywhere. */ .listingcard[data-detail-url]{cursor:pointer;} .listingcard[data-detail-url]:focus-visible{outline:2px solid var(--focus); outline-offset:2px;} .listingphoto{aspect-ratio:4/3; background:var(--surface-2); overflow:hidden; position:relative;} .listingphoto img{width:100%; height:100%; object-fit:cover; display:block;} .listingphoto-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy-800),var(--navy-900)); color:rgba(255,255,255,.75); font-family:"Public Sans",sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-align:center; padding:10px;} .listingphoto.clickable{cursor:pointer;} .listingphoto.clickable:focus-visible{outline:2px solid var(--focus); outline-offset:-2px;} .listingphoto .photobadge{position:absolute; right:10px; top:10px; z-index:2; background:rgba(10,25,43,.75); color:#fff; font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.02em;} /* "Buy Now for $price" overlay, top-right of the card photo — a real link (see cardPriceBadge in listingCardHtml, script.js), styled to sit on top of a photo the same way .photobadge used to (same corner), not stacked with it since the photo-count badge was removed in its favor. */ .listingphoto .cardprice-badge{position:absolute; right:10px; top:10px; z-index:2; background:rgba(10,25,43,.82); color:#fff; text-decoration:none; padding:6px 12px; border-radius:10px; text-align:right; line-height:1.3; transition:background .15s;} .listingphoto .cardprice-badge:hover{background:rgba(10,25,43,.96);} .listingphoto .cardprice-badge:hover .cardprice-value{text-decoration:underline; text-decoration-thickness:2px;} .listingphoto .cardprice-badge .cardprice-label{display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:rgba(255,255,255,.8);} .listingphoto .cardprice-badge .cardprice-value{display:block; font-size:1rem; font-weight:800; font-family:"Public Sans",sans-serif;} .listingbody{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; min-width:0;} .listingmeta{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;} .cardbid-top{margin:8px 0 0;} .casecode{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); letter-spacing:.02em;} .listingbody h3{font-size:1.02rem; margin:0;} .listingloc{margin:0; font-size:.85rem; color:var(--ink-soft);} .listingprice{font-family:"Public Sans",sans-serif; font-weight:800; font-size:1.3rem; color:var(--gold-600);} .listingfacts{margin:0; font-size:.85rem; color:var(--ink-soft);} .duelinks{font-size:.78rem; color:var(--ink-faint); line-height:1.6;} .duelinks span{font-weight:700; color:var(--ink-soft);} .duelinks a{color:var(--navy-700); text-decoration:none;} :root[data-theme="dark"] .duelinks a{ color:var(--teal-500); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .duelinks a{ color:var(--teal-500); } } .duelinks a:hover{text-decoration:underline;} .btn-bid{width:100%; text-align:center; justify-content:center; margin-top:6px; font-weight:800;} .emptylistings{background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-l); padding:40px 32px; text-align:center; max-width:64ch; margin:0 auto;} .emptylistings h3{margin-top:0;} /* Listing photo lightbox */ .lightbox{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:60px 70px;} .lightbox[hidden]{display:none!important;} .lightbox-backdrop{position:absolute; inset:0; background:rgba(6,12,24,.92);} .lightbox-stage{position:relative; max-width:min(92vw,1100px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:1;} .lightbox-imgwrap{max-width:100%; max-height:76vh; display:flex; align-items:center; justify-content:center;} .lightbox-img{max-width:100%; max-height:76vh; border-radius:8px; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); display:block;} .lightbox-close{position:absolute; top:-52px; right:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; width:38px; height:38px; border-radius:50%; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;} .lightbox-close:hover{background:rgba(255,255,255,.22);} .lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;} .lightbox-nav:hover{background:rgba(255,255,255,.22);} .lightbox-nav.prev{left:-58px;} .lightbox-nav.next{right:-58px;} .lightbox-caption{color:rgba(255,255,255,.72); font-size:.85rem; font-family:"IBM Plex Mono",monospace;} @media (max-width:760px){ .lightbox{padding:20px;} .lightbox-close{top:-44px;} .lightbox-nav.prev{left:2px;} .lightbox-nav.next{right:2px;} } /* HUD due-diligence PDF viewer — same fixed-overlay shell as the photo lightbox above (shares its .lightbox-backdrop rule for the dimmed background), but the stage itself is a light bordered panel with a title bar rather than a bare image, since the content is a document, not a photo. */ .pdfmodal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:40px;} .pdfmodal[hidden]{display:none!important;} .pdfmodal-stage{position:relative; width:min(94vw,980px); height:88vh; background:var(--surface); border-radius:var(--radius-l); overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); display:flex; flex-direction:column; z-index:1;} .pdfmodal-bar{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); flex:none;} .pdfmodal-title{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:.92rem; color:var(--ink);} .pdfmodal-opennew{flex:none; font-size:.8rem; font-weight:600; color:var(--teal-500); text-decoration:none;} .pdfmodal-opennew:hover{text-decoration:underline;} .pdfmodal-close{flex:none; background:transparent; border:1px solid var(--border); color:var(--ink); width:30px; height:30px; border-radius:50%; font-size:.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center;} .pdfmodal-close:hover{background:var(--surface-2);} .pdfmodal-frame{flex:1 1 auto; width:100%; border:0; background:#fff;} @media (max-width:640px){ .pdfmodal{padding:0;} .pdfmodal-stage{width:100vw; height:100vh; border-radius:0;} .pdfmodal-title{font-size:.82rem;} } /* ============================================================ Listing detail dashboard (per-property SEO landing pages) ============================================================ */ .detailhero{display:grid; grid-template-columns:1.35fr 1fr; gap:28px; margin-bottom:28px;} @media (max-width:900px){ .detailhero{grid-template-columns:1fr;} } /* The 17-thumbnail strip below the hero is a flex row with overflow-x:auto — without min-width:0 here, a CSS Grid item defaults to min-width:auto, which for a scrollable flex child means "wide enough to fit every thumbnail unscrolled," blowing this column out to ~1.4x the page width instead of respecting the 1.35fr track. Same class of bug as the mobile quote-card overflow fixed earlier — same fix, min-width:0. */ .detailhero-photocol{min-width:0;} /* Shorter "banner" aspect ratio, not a tall dominant hero — several source photos are low-res and read better at a smaller display size. The three quote buttons and the countdown live ON this photo (see the -ctas/-scrim/ uc-hero rules below), so it still needs enough height to hold them. */ /* No min-height here on purpose — combined with aspect-ratio, a min-height that kicks in on a narrow column forces the box's WIDTH back up past its container (aspect-ratio then derives width from the forced height), causing horizontal overflow on mobile. aspect-ratio alone already keeps this reasonably tall at every width. */ /* Positioned anchor for the mortgage/insurance buttons (.detailgallery-ctas is a SIBLING of .detailgallery now, not nested in it — see generate.py) so they can still overlay the photo on desktop. On mobile they leave this overlay entirely and become a normal-flow row above it instead. */ .detailgallery-wrap{position:relative;} .detailgallery{position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow); background:var(--surface-2); aspect-ratio:16/9;} .detailgallery img{width:100%; height:100%; object-fit:cover; display:block; cursor:pointer;} /* Prev/next arrows on the hero photo itself (HUD Home Store-style) — replaced the old "N photos" count badge that used to float here. Plain buttons, absolutely positioned at the vertical center of each edge; clicking either calls showFrame() directly in assets_script.js (same function the thumbnail-hover preview and auto-cycle use), so no new photo-stepping logic, just two more callers of it. Excluded from the whole-photo click handler the same way quote-cta/detailgallery- bottomctas are, so clicking an arrow steps the photo instead of also opening the full lightbox. */ .gallery-navarrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(6,12,24,.45); border:1px solid rgba(255,255,255,.4); color:#fff; width:38px; height:38px; border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s;} .gallery-navarrow:hover{background:rgba(6,12,24,.7);} .gallery-navarrow-prev{left:10px;} .gallery-navarrow-next{right:10px;} /* Photo auto-switching — stacked frames, one .active at a time, cycled by cyclePhotos() in assets_script.js. Used both on the detail-page hero (.detailgallery) and on /listings.html grid cards (.listingphoto). */ .listingphoto .photo-frame, .detailgallery .photo-frame{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; display:block; cursor:pointer;} .listingphoto .photo-frame.active, .detailgallery .photo-frame.active{opacity:1; z-index:1;} .photo-dots{position:absolute; left:0; right:0; bottom:9px; display:flex; justify-content:center; gap:5px; z-index:2; pointer-events:none;} .photo-dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 2px rgba(0,0,0,.4); transition:background .2s, transform .2s;} .photo-dot.active{background:#fff; transform:scale(1.35);} /* Dark scrim behind the bottom countdown/CTA row so it stays legible over any photo, regardless of its own brightness. Mortgage/insurance no longer overlay the TOP of the photo (moved below the gallery — see .detailgallery-ctas), so there's no longer a top scrim to paint. */ .detailgallery-scrim-bottom{position:absolute; bottom:0; left:0; right:0; height:60px; background:linear-gradient(to top, rgba(6,12,24,.65), transparent); z-index:2; pointer-events:none;} .detailgallery-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px;} .detailgallery-thumbs .dg-thumb{width:74px; height:56px; border-radius:var(--radius-s); flex:none; cursor:pointer; border:2px solid transparent; opacity:.75; overflow:hidden; aspect-ratio:auto;} .detailgallery-thumbs .dg-thumb img{width:100%; height:100%; object-fit:cover; display:block;} .detailgallery-thumbs .dg-thumb:hover, .detailgallery-thumbs .dg-thumb.active{opacity:1; border-color:var(--gold-500);} .detailsummary{display:flex; flex-direction:column; min-width:0;} /* Two independent columns side by side — NOT a single row that can wrap. That's deliberate: an earlier version put the address and price in one flex-wrap row, and whenever the address was long enough to force a wrap, the price (a lone item on its own wrapped line) collapsed to the LEFT edge — same side as the address — instead of staying right. Two separate flex items, each stacking its own content in a column, means the address can wrap to as many lines as it needs (detailtitle-left) while "Buy Now for" / price / badge (detailprice-link) stays pinned to the top-right corner regardless — its top edge aligned with the case number, never affected by how tall the address block gets. */ .detailtitlerow{display:flex; align-items:flex-start; gap:4px 16px; margin:0 0 6px;} .detailtitle-left{flex:1 1 auto; min-width:0;} .detailsummary .casecode{display:block; margin-bottom:4px;} .detailsummary h1{font-size:1.5rem; line-height:1.2; margin:0;} .detailsummary .detailloc{color:var(--ink-soft); font-size:.98rem; margin:0 0 8px;} .detailsummary .detailprice{font-size:1.6rem; font-weight:800; color:var(--navy-900); margin:0; white-space:nowrap;} :root[data-theme="dark"] .detailsummary .detailprice{ color:#fff; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .detailsummary .detailprice{ color:#fff; } } /* "Buy Now for $X" — eBay-style — plus the New Listing / Price Reduced badge, when there is one, ABOVE "Buy Now for". That's so the TOP line of this block is always what aligns with the case number on the left (badge when there is one, "Buy Now for" itself when there isn't) — DOM order alone drives this, since the badge is just the first child here when present. The whole stack is one link straight to /bid.html?case=... (the bid page already prefills the offer-price field with the listing's list price whenever it's empty — see renderBidPage() in assets_script.js — so this link alone is enough to "start a bid at asking price", no query param needed). flex:none + column layout, right-aligned, keeps it a fixed-width block pinned to the top-right of the row no matter what the address does. color:inherit + no underline keeps it reading like plain price text rather than a generic blue link; the hover state (and badge, when present) is what signals it's clickable. */ .detailprice-link{display:flex; flex:none; flex-direction:column; align-items:flex-end; gap:2px; color:inherit; text-decoration:none;} .detailprice-link:hover .detailprice{text-decoration:underline; text-decoration-thickness:2px;} .detailprice-label{display:flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em;} /* Small solid dot signaling the property is currently available to buy now. */ .availdot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#2ECC71; flex:none;} .detailprice-flag{display:inline-block; font-size:.72rem; font-weight:700; color:var(--gold-600); background:var(--gold-100); border-radius:999px; padding:2px 9px; white-space:normal;} .detailfacts{display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 10px; font-size:.94rem; color:var(--ink-soft);} .detailfacts strong{color:var(--ink); font-weight:700;} /* Last year's property tax + HOA/condo fee, between the facts row and the bid-deadline box (see tax_hoa_line_for() in generate.py) — pushes .detaildeadline down to make room. Renders nothing for a listing until the broker's actually entered a tax figure in the listings-database workbook, same "never guess" rule as the HOA line by the price. */ .detailtaxhoa{font-size:.86rem; color:var(--ink-soft); margin:0 0 10px;} .detailtaxhoa strong{color:var(--ink); font-weight:700;} .detailtaxhoa .hoa-note{display:block; font-size:.74rem; font-weight:500; color:var(--ink-faint); margin-top:2px;} .detaildeadline{font-size:.84rem; color:var(--ink-faint); background:var(--surface-2); border-radius:var(--radius-s); padding:8px 13px; margin-bottom:10px;} /* Mortgage/Insurance sit in this column too, right above Start a Bid/Call Agent (see .detailsummary .detailgallery-ctas below), and the two rows travel together as one unit. .detailhero is a CSS grid with the default align-items:stretch, so .detailsummary's box is always exactly as tall as the taller column — but that alone doesn't make the VISIBLE content (these two button rows) reach that bottom edge; shorter listing text left real whitespace above them instead. margin-top:auto lives on .detailgallery-ctas (the FIRST of the two rows, below) rather than on .detailctas, so the whitespace collects above mortgage/insurance and both rows land flush together at the bottom, right where the photo column's real bottom edge (the thumbnail strip) is — on every listing, regardless of how much text sits above, rather than needing hand-tuned margins per listing. */ /* Start a Bid stays LEFT of Call Agent at every width, including narrow mobile — flex:1 1 0 + min-width:0 (same pattern as .prevnext-btn above) splits the row evenly and lets each button's own text wrap internally instead of the row wrapping Call Agent onto its own line below. Same smaller padding/font as the mortgage/insurance row right above (.quote-cta below) so all four buttons in this column read as one matched set instead of Start a Bid/Call Agent looking oversized next to them. */ .detailctas{display:flex; gap:10px; flex-wrap:nowrap; margin-top:8px;} .detailctas .btn{flex:1 1 0; min-width:0; white-space:normal; text-align:center; padding:10px 10px; font-size:.78rem;} /* ---- Urgency: live bid-deadline countdown ---- */ /* Colored by WHO can bid right now — same red/blue convention as the .pill badges on the /listings.html grid (.who-owner navy vs .who-both/ investor gold): red by default (open to all bidders, investors included), blue when a listing is still in its owner-occupant- exclusive window (see .uc-stage-owner below). Either one pulses once the deadline is inside 72h, via .uc-urgent, without changing hue. Text itself is computed client-side (updateCountdowns() in assets_script.js) from the raw ISO deadline in data-deadline; this is just the shell. */ /* Text is the exact HUD Home Store wording now ("1 Days 3 Hours 47 Minutes Remaining To Bid" — see formatCountdown() in assets_script.js), which is much longer than the old "1d 03:47:22" digital clock, so this is no longer a tight nowrap pill — it wraps to 1-2 lines in a softer rounded rectangle instead of overflowing its card/photo. */ .urgency-countdown{display:inline-flex; align-items:baseline; gap:6px; background:var(--danger); color:#fff; font-weight:700; font-size:.82rem; padding:7px 12px; border-radius:10px; margin-bottom:14px; width:fit-content; max-width:100%; white-space:normal; line-height:1.3;} .urgency-countdown .uc-label{font-family:"Public Sans",sans-serif; font-weight:600; opacity:.85; font-size:.9em;} .urgency-countdown .uc-value{font-family:"IBM Plex Mono",monospace; font-weight:800; font-variant-numeric:tabular-nums;} .urgency-countdown.uc-urgent{animation:ucPulse 1.6s ease-in-out infinite;} .urgency-countdown.uc-expired{background:var(--surface-2); color:var(--ink-faint); animation:none;} .urgency-countdown.uc-expired .uc-label{display:none;} @keyframes ucPulse{0%,100%{opacity:1;} 50%{opacity:.72;}} .urgency-countdown-sm{display:flex; width:100%; box-sizing:border-box; justify-content:center; font-size:.72rem; padding:7px 10px; margin:8px 0 0; border-radius:8px;} @media (prefers-reduced-motion: reduce){ .urgency-countdown.uc-urgent{animation:none;} } /* "Time left to bid" overlaid on the BOTTOM of the hero photo — colored by WHO can bid right now, matching the pill convention already used on the /listings.html grid (.pill.who-owner navy vs .pill.who-both/investor gold): red while the property is open to all bidders (investors included), blue during an owner-occupant-exclusive window. Both still pulse in the final 72h via .uc-urgent, they just don't change hue when they do. max-width keeps the now-longer wrapped text from running into the Start a Bid/Call Now buttons mirrored to the bottom-right corner. */ .urgency-countdown.uc-hero{position:absolute; left:10px; bottom:10px; z-index:3; margin:0; background:var(--danger); color:#fff; box-shadow:0 2px 10px -2px rgba(0,0,0,.5); max-width:58%;} .urgency-countdown.uc-hero.uc-stage-owner{background:var(--navy-800);} .urgency-countdown.uc-hero.uc-expired{background:rgba(10,25,43,.82); color:#fff; animation:none;} .urgency-countdown-sm.uc-stage-owner{background:var(--navy-800); color:#fff;} /* .uc-below is the phone counterpart of .uc-hero — same countdown, but rendered as a normal-flow element after the thumbnail strip instead of overlaid on the photo. On the photo it was wrapping to 2 lines and covering a large share of a phone-width image; below it, it's just a plain pill like the ones on the /listings.html grid cards. Hidden by default (desktop/tablet keep the on-photo .uc-hero); the max-width:560px query below swaps which one shows. */ .urgency-countdown.uc-below{display:none; margin:12px 0 0;} .urgency-countdown.uc-below.uc-stage-owner{background:var(--navy-800);} /* "Start a Bid" / "Call Now" — the same two actions from the summary column, mirrored onto the BOTTOM-RIGHT of the hero photo so they're reachable without scrolling, opposite the countdown at bottom-left. */ .detailgallery-bottomctas{position:absolute; right:10px; bottom:10px; z-index:3; display:flex; gap:8px;} .detailgallery-bottomctas .btn{padding:9px 16px; font-size:.8rem; box-shadow:0 2px 10px -2px rgba(0,0,0,.5); white-space:nowrap;} .detailgallery-bottomctas .btn-ghost{background:rgba(255,255,255,.94); color:var(--navy-800); border-color:transparent;} :root[data-theme="dark"] .detailgallery-bottomctas .btn-ghost{ background:rgba(255,255,255,.9); color:var(--navy-800); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .detailgallery-bottomctas .btn-ghost{ background:rgba(255,255,255,.9); color:var(--navy-800); } } /* Below ~560px: the countdown stacks ABOVE the bottom row instead of sharing its corner (see .detailgallery-bottomctas just below — that row now spans the full photo width), and Mortgage/insurance are handled above (.detailgallery-ctas) since they're no longer on the photo at any width. */ @media (max-width:560px){ .detailgallery-scrim-bottom{height:96px;} /* The on-photo countdown was covering a large share of the image at phone width (wrapping to 2 lines within 66% of an already-short 16:9 photo) — hidden here in favor of .uc-below, a plain in-flow pill right under the thumbnails (see generate.py's countdown_below_html and the .uc-below rule above). */ .urgency-countdown.uc-hero{display:none;} .urgency-countdown.uc-below{display:inline-flex;} /* Bid / Call used to render as a stacked column here (Bid's longer label making it visually wider) which looked like Bid sat on top of Call. One full-width row instead — justify-content:space-between on the two items puts Bid flush left, Call flush right. */ .detailgallery-bottomctas{flex-direction:row; align-items:center; justify-content:space-between; left:8px; right:8px; bottom:8px; gap:6px;} .detailgallery-bottomctas .btn{font-size:.66rem; padding:7px 12px; flex:none;} } .duediligence-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:24px; margin:28px 0;} .duediligence-panel h2{font-size:1.15rem; margin:0 0 4px;} .duediligence-panel > p{font-size:.86rem; color:var(--ink-soft); margin:0 0 16px;} .dd-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;} @media (max-width:640px){ .dd-list{grid-template-columns:1fr;} } .dd-link{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--border); border-radius:var(--radius-m); text-decoration:none; color:var(--ink); font-size:.87rem; font-weight:600; transition:border-color .15s, background .15s;} .dd-link:hover{border-color:var(--border-strong); background:var(--surface-2);} .dd-link .dd-ico{font-size:1.15rem; flex:none;} .dd-link .dd-sub{display:block; font-size:.74rem; font-weight:400; color:var(--ink-faint); margin-top:1px;} .dd-link.verified .dd-ico{color:var(--success);} /* The roof quote is a