/* One form, everything visible at once - address/link, the optional unit/rooms/area/floor fields, and submit all together, so specifying the exact unit doesn't need a separate "submit, then refine, then resubmit" round trip. */ .report-form { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 18px; } .report-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 14.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); font-family: inherit; } .report-form input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .report-form-extra { display: flex; gap: 12px; flex-wrap: wrap; } .report-form-extra .pf-field { display: flex; flex-direction: column; gap: 5px; min-width: 110px; flex: 1; } .report-form-extra .pf-field label { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; } .report-form-extra .pf-field input { padding: 9px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); font-family: inherit; width: 100%; box-sizing: border-box; } .report-form .btn-primary { align-self: flex-start; border: none; border-radius: var(--radius-sm); padding: 10px 26px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #1a1204; box-shadow: 0 3px 10px rgba(200,146,46,.35); } .report-form .btn-primary:hover { filter: brightness(1.08); } /* Paywall teaser - shown in place of the detailed sections when is_full_access is False (see property_report.html and apps/mapui/report_views.py::_build_report_context). Deliberately a single real card, not a blurred fake-preview of the actual content - this project's own "fact-only" ethos extends to not faking a glimpse of data the user hasn't actually unlocked yet. */ .report-paywall { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 24px; box-shadow: var(--shadow-sm); } .report-paywall h2 { margin: 0 0 14px; font-size: 18px; } .report-paywall-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin: 0 0 16px; padding: 0; list-style: none; } .report-paywall-list li { font-size: 13.5px; color: var(--ink-soft); padding-left: 20px; position: relative; } .report-paywall-list li::before { content: "✓"; position: absolute; left: 0; color: #9c7020; font-weight: 700; } .report-paywall-lede { font-size: 14px; color: var(--ink); margin: 0 0 18px; } .report-paywall-actions { display: flex; gap: 10px; flex-wrap: wrap; } .report-paywall-actions form { margin: 0; } .report-paywall .btn-primary { border: none; border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #1a1204; box-shadow: 0 3px 10px rgba(200,146,46,.35); } .report-paywall .btn-primary:hover { filter: brightness(1.08); } .report-paywall .btn-secondary { border-radius: var(--radius-sm); padding: 11px 22px; } .report-error { background: #fdf6e3; border: 1px solid #f3e3b0; color: #7a5c00; padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 18px; } .report-error-suggestions { margin-top: 8px; } .report-error-suggestions ul { margin: 4px 0 0; padding-left: 18px; } .report-error-suggestions a { color: #7a5c00; font-weight: 600; text-decoration: underline; } .report-error-suggestions a:hover { color: #4a3800; } @media (max-width: 640px) { .report-form-extra { flex-direction: column; } .report-form-extra .pf-field { min-width: 0; } } /* Hero: gradient header card with the address, key tags and headline stats up front - what someone opened the report to see immediately, not something to find after scrolling past building facts. */ .report-hero { background: radial-gradient(700px 260px at 90% -20%, rgba(200,146,46,.28), transparent 60%), linear-gradient(135deg, #12293a 0%, #1c3f57 100%); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; color: #fff; box-shadow: 0 8px 24px rgba(18,35,59,.3); } .report-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .report-hero-address { font-size: 22px; font-weight: 800; line-height: 1.3; } .report-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .tag-chip { background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; } .tag-chip-brand { background: var(--brand); color: #fff; } .report-verdict { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; flex-shrink: 0; max-width: 280px; display: flex; flex-direction: column; gap: 2px; } .report-verdict.verdict-good { background: #12b76a; color: #fff; } .report-verdict.verdict-warn { background: #f79009; color: #fff; } .report-verdict.verdict-fair { background: rgba(255,255,255,.18); color: #fff; } .specs-override-note { margin-top: 12px; padding: 8px 12px; background: rgba(255,255,255,.1); border-radius: var(--radius-sm); font-size: 12px; color: rgba(255,255,255,.85); line-height: 1.5; } /* The single synthesized "what's this worth" number - building comparables preferred, falling back to apkaime then city/novads (see report_views.py::_headline_estimate) - shown before the per-listing gauge below so a plain address lookup (no pasted ss.lv link) still leads with one clear figure instead of two separate panels the reader has to combine themselves. */ .value-estimate { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); } .value-estimate-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; } .value-estimate-label span { text-transform: none; font-weight: 500; opacity: .75; letter-spacing: normal; } .value-estimate-num { font-size: 34px; font-weight: 800; line-height: 1.2; margin-top: 4px; background: linear-gradient(120deg, #fff, #f0d9ad); -webkit-background-clip: text; background-clip: text; color: transparent; } .value-estimate-range { font-size: 14px; opacity: .85; margin-top: 2px; } .value-estimate-median { font-size: 13px; opacity: .85; margin-top: 6px; } .value-estimate-median strong { color: #f0d9ad; } .value-estimate-median span { opacity: .8; } .value-estimate .trust-label { color: rgba(255,255,255,.75); margin-top: 6px; } /* Underpriced-to-overpriced gauge for the specific pasted listing (rent or sale, both handled) - a marker on a green-to-red bar reads faster than a number alone for "is this a good deal". */ .price-gauge { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); } .price-gauge-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .price-gauge-verdict { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .price-gauge-verdict.verdict-good { background: #12b76a; color: #fff; } .price-gauge-verdict.verdict-warn { background: #f79009; color: #fff; } .price-gauge-verdict.verdict-fair { background: rgba(255,255,255,.22); color: #fff; } .price-gauge-bar { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #12b76a 0%, #fed165 50%, #f04438 100%); } .price-gauge-marker { position: absolute; top: -4px; width: 18px; height: 18px; margin-left: -9px; background: #fff; border: 3px solid var(--brand-dark); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .price-gauge-labels { display: flex; justify-content: space-between; font-size: 11px; opacity: .8; margin-top: 6px; } .price-gauge-nums { font-size: 12.5px; opacity: .9; margin-top: 8px; } .report-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); } .hero-stat-num { font-size: 22px; font-weight: 800; } .hero-stat-lbl { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; } .hero-stat-num.yield-good { color: #6ee7a8; } .hero-stat-num.yield-mid { color: #fed165; } .hero-stat-num.yield-low { color: #ffb199; } .section-sub { font-size: 12px; font-weight: 500; color: var(--ink-faint); text-transform: none; letter-spacing: 0; } /* Fact list - checked the actual reference (m2cena.lv/analyses/sample) in a real browser, not just fetched as markdown (which strips layout): its secondary-facts section isn't a grid of tiles at all, it's a flat list - icon + label on the left, value on the right, one hairline divider between rows, no per-row background/border/color. A grid of colorful tiles (this project's first two attempts) reads as visually much busier than that reference regardless of whether the tiles have borders - the structural fix is switching to rows, not just removing shadows. One single accent color per section (inherited from the section's own icon header, not a rotating rainbow) for the small dot, matching m2cena's restrained one-accent-plus-grayscale palette. */ .fact-grid { display: flex; flex-direction: column; } .fact-item { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .fact-item:last-child { border-bottom: none; } .fact-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--gold-dark, #9c7020); } .fact-item-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: 1; min-width: 0; } .fact-lbl { font-size: 13px; font-weight: 500; color: var(--ink-soft); } .fact-val { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; text-align: right; } /* Energy-efficiency class badge - standard EU A-G traffic-light gradient (green = efficient, red = inefficient), same convention as every real energy label a buyer already recognizes (appliances, EPCs). */ .fact-val[class*="energy-class-"] { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 10px; border-radius: 6px; color: #fff; font-size: 14px; } .fact-val.energy-class-a-plus { background: #0a7a4e; } .fact-val.energy-class-a { background: #2f9e5c; } .fact-val.energy-class-b { background: #7cb342; } .fact-val.energy-class-c { background: #c8a838; } .fact-val.energy-class-d { background: #d98a2b; } .fact-val.energy-class-e { background: #d9642b; } .fact-val.energy-class-f { background: #c0392b; } .nl-row-match { background: var(--brand-tint); } #report-map { height: 320px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); } .street-view-frame { height: 320px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--canvas); } .street-view-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .listings-table td:first-child { width: 56px; padding: 6px 8px; } .listing-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; } .report-info-banner { background: var(--brand-tint); color: var(--brand-dark); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; } .count-pill { background: var(--line-soft); color: var(--ink-faint); font-weight: 700; font-size: 10.5px; padding: 1px 7px; border-radius: 10px; margin-left: 4px; } .underpriced-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; background: #e6f6ec; color: #0a7a4e; } /* Same 4 colors as Pārskati's era pie chart / card.js's era badge - "era-N" always means the same era everywhere in the product. */ .era-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 20px; color: #fff; white-space: nowrap; } .era-badge.era-0 { background: #b08968; } .era-badge.era-1 { background: #7d8597; } .era-badge.era-2 { background: #4a7c95; } .era-badge.era-3 { background: #1f5c85; } /* Compact layout - direct feedback that the report felt too spacious. Tighter section spacing/heading size scoped to .report-page only, so these overrides don't leak into other pages sharing seo.css's .section-block. */ .report-page .section-block { margin-bottom: 14px; } .report-page .section-block h2 { font-size: 14.5px; margin: 0 0 8px; } .report-page .section-block.compact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); } .report-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .report-grid-2 .section-block { margin-bottom: 0; } @media (max-width: 720px) { .report-grid-2 { grid-template-columns: 1fr; } } .encumbrance-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .encumbrance-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line-soft); } .encumbrance-item:last-child { border-bottom: none; } .encumbrance-kind { flex: 1; } .encumbrance-scope { flex: none; font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .price-range { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; } .price-range.warn-value { color: #c0392b; } .price-range-unit { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-left: 2px; } .price-range-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; } .report-page .fact-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .report-page .fact-item { padding: 7px 10px; } .report-page .fact-val { font-size: 13.5px; } /* Always visible, not collapsed - deal history is the extensive part of the report and shouldn't be hidden behind a toggle. */ .report-deals-history { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .report-deals-heading { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px; } .report-deals-history h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin: 16px 0 6px; } .report-deals-history table { font-size: 12.5px; } /* Green = "this is likely the specific unit/listing in question" - distinct from the blue brand-tint used for generic filter matches elsewhere in the product, since this is a probabilistic guess the user should be able to tell apart from a hard filter match at a glance. */ .deal-row-suspected { background: #e6f6ec; } .tag-chip-suspected { background: #12b76a; color: #fff; } /* Listing cards - real photo, price and status up front, same visual language as the Jauni sludinājumi cards (new-listings.css's .nl-card) rather than a cramped 48px-thumbnail row - direct feedback that the report's listings looked far less detailed than the rest of the site. */ .listing-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .listing-card { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; } .listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .listing-card-suspected { border-color: #12b76a; } .listing-card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--canvas); } .listing-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .listing-card-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-faint); font-size: 12px; } .listing-card-kind { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 20px; color: #fff; } .listing-card-kind.sale { background: var(--brand); } .listing-card-kind.rent { background: #0a7a4e; } .listing-card-archived { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 20px; color: #fff; background: rgba(18,35,59,.75); } .listing-card-body { padding: 10px 12px 12px; } .listing-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .listing-card-price { font-size: 15px; font-weight: 800; color: var(--ink); } .listing-card-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; } /* Real price-change history (apps.listings.ss_lv.listing_activity, built from SsLvPriceSnapshot - this project's own accumulated observations of a listing over time, not ss.lv's edit log which isn't exposed anywhere). Only rendered when at least 2 snapshots exist, so a listing this project just started tracking never shows a fake single-point "history". */ .price-history { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line-soft); } .price-history-summary { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 3px; } .price-history-point { font-size: 11.5px; color: var(--ink-soft); } .price-history-point-latest { font-weight: 700; color: var(--ink); } .price-history-arrow { font-size: 11px; color: var(--ink-faint); margin: 0 3px; } .deal-row-anomaly { opacity: .55; } .deal-row-anomaly td:first-child { text-decoration: line-through; } .anomaly-note { font-size: 10.5px; font-weight: 700; color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 8px; white-space: nowrap; } /* Icon + heading pattern - direct feedback ("I really like m2cena's UI", whose report puts a small icon before every section title) reproduced with this project's own line-icon set (no emoji - premium product, see standing UI rule) rather than copying their exact icons. One `mask-image` per data-icon value keeps every h2 edit to a single attribute instead of hand-writing an in each template block. */ .report-page .section-block h2[data-icon], .report-page h2[data-icon] { display: flex; align-items: center; gap: 9px; } .report-page h2[data-icon]::before { content: ''; display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background: var(--brand, #1c3f57); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .report-page h2[data-icon="building"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxOCIvPjxsaW5lIHgxPSI0IiB5MT0iOSIgeDI9IjIwIiB5Mj0iOSIvPjxsaW5lIHgxPSI0IiB5MT0iMTUiIHgyPSIyMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMjEiIHgyPSIxMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMjEiIHgyPSIxNCIgeTI9IjE1Ii8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxOCIvPjxsaW5lIHgxPSI0IiB5MT0iOSIgeDI9IjIwIiB5Mj0iOSIvPjxsaW5lIHgxPSI0IiB5MT0iMTUiIHgyPSIyMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMjEiIHgyPSIxMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMjEiIHgyPSIxNCIgeTI9IjE1Ii8+PC9zdmc+Cg=="); } .report-page h2[data-icon="chart"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDIwVjEwTTEwIDIwVjRNMTYgMjBWMTQiLz48L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDIwVjEwTTEwIDIwVjRNMTYgMjBWMTQiLz48L3N2Zz4K"); } .report-page h2[data-icon="home"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDExbDktOCA5IDgiLz48cGF0aCBkPSJNNSAxMHYxMGgxNFYxMCIvPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDExbDktOCA5IDgiLz48cGF0aCBkPSJNNSAxMHYxMGgxNFYxMCIvPjwvc3ZnPgo="); } .report-page h2[data-icon="euro"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOCA2YTcgNyAwIDEgMCAwIDEyIi8+PGxpbmUgeDE9IjQiIHkxPSIxMCIgeDI9IjE0IiB5Mj0iMTAiLz48bGluZSB4MT0iNCIgeTE9IjE0IiB4Mj0iMTIiIHkyPSIxNCIvPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOCA2YTcgNyAwIDEgMCAwIDEyIi8+PGxpbmUgeDE9IjQiIHkxPSIxMCIgeDI9IjE0IiB5Mj0iMTAiLz48bGluZSB4MT0iNCIgeTE9IjE0IiB4Mj0iMTIiIHkyPSIxNCIvPjwvc3ZnPgo="); } .report-page h2[data-icon="calculator"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgcng9IjIiLz48bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIxNiIgeTI9IjYiLz48bGluZSB4MT0iOCIgeTE9IjExIiB4Mj0iOCIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjE2IiB5MT0iMTEiIHgyPSIxNiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjgiIHkxPSIxNSIgeDI9IjgiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxNiIgeTE9IjE1IiB4Mj0iMTYiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSI4IiB5MT0iMTkiIHgyPSI4IiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTYiIHkxPSIxOSIgeDI9IjE2IiB5Mj0iMTkuMDEiLz48L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgcng9IjIiLz48bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIxNiIgeTI9IjYiLz48bGluZSB4MT0iOCIgeTE9IjExIiB4Mj0iOCIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjE2IiB5MT0iMTEiIHgyPSIxNiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjgiIHkxPSIxNSIgeDI9IjgiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxNiIgeTE9IjE1IiB4Mj0iMTYiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSI4IiB5MT0iMTkiIHgyPSI4IiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTYiIHkxPSIxOSIgeDI9IjE2IiB5Mj0iMTkuMDEiLz48L3N2Zz4K"); } .report-page h2[data-icon="pin"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxMGMwIDYtOCAxMi04IDEycy04LTYtOC0xMmE4IDggMCAwIDEgMTYgMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxMGMwIDYtOCAxMi04IDEycy04LTYtOC0xMmE4IDggMCAwIDEgMTYgMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+Cg=="); } .report-page h2[data-icon="list"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSI4IiB5MT0iNiIgeDI9IjIxIiB5Mj0iNiIvPjxsaW5lIHgxPSI4IiB5MT0iMTIiIHgyPSIyMSIgeTI9IjEyIi8+PGxpbmUgeDE9IjgiIHkxPSIxOCIgeDI9IjIxIiB5Mj0iMTgiLz48bGluZSB4MT0iMyIgeTE9IjYiIHgyPSIzLjAxIiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB5MT0iMTIiIHgyPSIzLjAxIiB5Mj0iMTIiLz48bGluZSB4MT0iMyIgeTE9IjE4IiB4Mj0iMy4wMSIgeTI9IjE4Ii8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSI4IiB5MT0iNiIgeDI9IjIxIiB5Mj0iNiIvPjxsaW5lIHgxPSI4IiB5MT0iMTIiIHgyPSIyMSIgeTI9IjEyIi8+PGxpbmUgeDE9IjgiIHkxPSIxOCIgeDI9IjIxIiB5Mj0iMTgiLz48bGluZSB4MT0iMyIgeTE9IjYiIHgyPSIzLjAxIiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB5MT0iMTIiIHgyPSIzLjAxIiB5Mj0iMTIiLz48bGluZSB4MT0iMyIgeTE9IjE4IiB4Mj0iMy4wMSIgeTI9IjE4Ii8+PC9zdmc+Cg=="); } .report-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; } .report-actions form { margin: 0; } .report-share-link { display: flex; gap: 6px; align-items: center; } .report-share-link input { font-size: 12.5px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; width: 240px; max-width: 40vw; background: var(--canvas); font-family: inherit; } .btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; } .btn-secondary:hover { border-color: var(--brand); color: var(--brand); } /* Small centered "building your report" card over a dimmed backdrop (not a full-screen navy takeover - direct feedback on the first version) while the form's real GET navigation is in flight - see the trigger script at the bottom of property_report.html for why this is a timed animation, not real progress. */ #report-loading-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(10, 20, 30, .55); align-items: center; justify-content: center; } #report-loading-overlay.active { display: flex; } .report-loading-box { width: 100%; max-width: 300px; padding: 28px 26px; text-align: center; background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .report-loading-spinner { width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--line-soft, #f0f2f5); border-top-color: var(--gold-light, #e0ac4a); animation: report-spin 0.9s linear infinite; } @keyframes report-spin { to { transform: rotate(360deg); } } .report-loading-title { color: var(--ink, #16202c); font-size: 15px; font-weight: 700; margin-bottom: 16px; } .report-loading-steps { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-direction: column; gap: 2px; } .report-loading-steps li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; text-align: left; color: var(--ink-faint, #8a94a3); transition: color .2s; } .report-loading-steps li::before { content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line, #e6e9ee); transition: border-color .2s, background .2s; background-size: 10px 10px; background-position: center; background-repeat: no-repeat; } .report-loading-steps li.active { color: var(--ink, #16202c); font-weight: 600; } .report-loading-steps li.active::before { border-color: var(--gold-light, #e0ac4a); box-shadow: 0 0 0 3px rgba(224,172,74,.18); } .report-loading-steps li.done { color: var(--ink, #16202c); } .report-loading-steps li.done::before { border-color: var(--gold-light, #e0ac4a); background-color: var(--gold-light, #e0ac4a); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312293a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } @media print { .no-print, .navbar, .site-header, .report-form, .report-form-extra { display: none !important; } body { background: #fff !important; } .report-hero { background: #fff !important; color: #111 !important; border: 1px solid #ccc !important; box-shadow: none !important; } .report-hero * { color: #111 !important; } .section-block, .report-grid-2 > * { box-shadow: none !important; border: 1px solid #ccc !important; } #report-map, .street-view-frame { display: none !important; } a { color: #111 !important; text-decoration: none !important; } .report-page { max-width: 100% !important; } }