/* deal-detail-base.css - the block that loaded BEFORE public-ui.css. Extracted verbatim from deal-detail.html. LOAD ORDER IS LOAD-BEARING: deal-detail-base.css -> public-ui.css -> deal-detail.css. Merging these two files, or moving either across the public-ui.css link, reorders the cascade. Both are registered as SHELL ASSETS in scripts/build-admin.mjs so the service worker's CACHE_VERSION bumps when they change - without that, a returning visitor gets new markup paired with a stale stylesheet. */ /* Zillow deep-link + Zestimate (operator opt-in) — Zillow-blue accent. */ .zillow-link-btn { border-color: rgba(0, 106, 255, 0.30); background: #eff6ff; color: #0b4bb3; } .zillow-link-btn:hover { border-color: rgba(0, 106, 255, 0.50); background: #dbeafe; } .zillow-mark { color: #006AFF; } .gallery-thumb { cursor: pointer; transition: all 0.2s; } .gallery-thumb:hover { opacity: 0.8; } .gallery-thumb.active { ring: 2px solid #1e3a5f; } .gallery-more-tile { min-width: 5rem; width: 5rem; min-height: 5rem; height: 5rem; flex-shrink: 0; border: 1px solid rgba(203, 213, 225, 0.85); background: radial-gradient(circle at top, rgba(255,255,255,0.85), transparent 65%), linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); color: #475569; box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 4px 10px rgba(15, 23, 42, 0.05); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease; } .gallery-more-tile:hover { border-color: rgba(30, 58, 95, 0.6); background: radial-gradient(circle at top, rgba(255,255,255,0.95), transparent 65%), linear-gradient(180deg, #f1f5f9 0%, #dbe4ee 100%); color: #0f172a; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 12px 22px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(30, 58, 95, 0.18); } .gallery-more-tile-label { font-size: 9px; font-weight: 700; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: normal; max-width: 4.4rem; } .spread-highlight { background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%); border: 2px solid rgba(34, 197, 94, 0.28); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08); } /* The card's ONLY surviving base declaration. `position: relative` is the containing block for the rail (::before) and the price band, and it is the one property the premium pass at the foot of this file does not restate — so it lives here, alone, rather than inside a surface rule that would be overridden anyway. Deleted from this block: the original aurora surface, crimson border and triple shadow (restated four times downstream), the first of five rail colourways, and the 12rem crimson corner radial (::after) that was cancelled by a `content: none` rule 2,800 lines later — both halves of that argument are now gone instead of one paying to undo the other. */ .pricing-sidebar-card { position: relative; } /* ===== Landing-style buyer sections (value band, transaction details, property condition, comparables, next steps, disclaimers). Premium JHB navy/red/emerald theme; mirrors the assignment-landing narrative flow. ===== */ /* White / premium value band. Light surface, dark ink; the ONLY color is the brand red→blue gradient hairline at the very top (never changed away). */ .deal-value-band { position: relative; margin: 0 0 2rem; padding: 1.6rem 1.6rem 1.15rem; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 22px 48px -26px rgba(15, 23, 42, 0.28); } .deal-value-band::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; /* brand red → blue — the fixed accent, never switched away */ background: linear-gradient(90deg, #b62c38 0%, #7a2f52 42%, #1e3a5f 100%); } .deal-value-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } .deal-value-tile { border-radius: 18px; padding: 1.05rem 1.15rem; background: #f8fafc; border: 1px solid rgba(226, 232, 240, 0.95); } .deal-value-tile-accent { background: linear-gradient(180deg, rgba(22,163,74,0.06), rgba(22,163,74,0.10)); border-color: rgba(22,163,74,0.32); } .deal-value-label { font-family: 'Outfit', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; margin: 0; } .deal-value-figure { font-family: 'Outfit', sans-serif; font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: #0f2440; margin: 0.25rem 0 0.1rem; letter-spacing: -0.01em; } .deal-value-tile-accent .deal-value-figure { color: #15803d; } .deal-value-sub { font-size: 0.72rem; font-weight: 500; color: #94a3b8; margin: 0; } .deal-value-source { display: flex; align-items: center; gap: 0.4rem; margin: 1rem 0 0; font-size: 0.72rem; font-weight: 500; color: #64748b; } .deal-value-source svg { color: #16a34a; flex-shrink: 0; } @media (max-width: 640px) { .deal-value-band-grid { grid-template-columns: 1fr; } .deal-value-figure { font-size: 1.55rem; } } .deal-landing-card { } .deal-detail-list { display: flex; flex-direction: column; gap: 0.15rem; } .deal-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid #eef2f7; } .deal-detail-row:last-child { border-bottom: 0; } .deal-detail-row-key { display: inline-flex; align-items: center; gap: 0.55rem; color: #475569; font-weight: 500; } .deal-detail-row-key svg { color: #1e3a5f; width: 1rem; height: 1rem; flex-shrink: 0; } .deal-detail-row-val { font-weight: 700; color: #0f172a; text-align: right; } .deal-detail-row-val.is-muted { color: #94a3b8; font-weight: 600; } .cond-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; } @media (max-width: 640px) { .cond-grid { grid-template-columns: 1fr; } } .cond-tile { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 0.95rem; border-radius: 16px; background: #f8fafc; border: 1px solid #eef2f7; } .cond-tile-ic { width: 2.1rem; height: 2.1rem; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,58,95,0.08); color: #1e3a5f; } .cond-tile-name { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; } .cond-tile-val { font-weight: 700; color: #0f172a; } .cond-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .cond-chip-good { background: rgba(22,163,74,0.12); color: #15803d; } .cond-chip-fair { background: rgba(234,179,8,0.16); color: #a16207; } .cond-chip-poor { background: rgba(182,44,56,0.12); color: #b62c38; } .comp-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid #eef2f7; } .comp-row:last-child { border-bottom: 0; } .comp-addr { font-weight: 700; color: #0f172a; } .comp-meta { font-size: 0.78rem; color: #64748b; font-weight: 500; } .comp-price { font-family: 'Outfit', sans-serif; font-weight: 800; color: #15803d; font-size: 1.05rem; white-space: nowrap; } .comp-status { font-family: inherit; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; background: #f1f5f9; padding: 0.1rem 0.4rem; border-radius: 999px; vertical-align: middle; } /* Two ids (#propertyContent #nextStepsSection) + !important to outrank the global `#propertyContent button[onclick="contactAboutDeal()"]` red-gradient CTA rule, which is itself !important and matches these step buttons by their onclick. */ body.public-body #propertyContent #nextStepsSection .nextstep-item { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; padding: 0.85rem 1rem; border-radius: 16px; background-color: #f8fafc !important; background-image: none !important; border: 1px solid #eef2f7; font-weight: 600; color: #1e293b !important; box-shadow: none !important; transition: background-color 0.15s, border-color 0.15s, transform 0.15s; } body.public-body #propertyContent #nextStepsSection .nextstep-item:hover { background-color: #eff4fb !important; background-image: none !important; border-color: rgba(30,58,95,0.22); transform: translateX(2px); } .nextstep-num { width: 1.9rem; height: 1.9rem; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; background: #1e3a5f; color: #fff; } .nextstep-item .nextstep-go { margin-left: auto; color: #b62c38; flex-shrink: 0; } /* ===== Email-DNA buttons — IDENTICAL to the branded-email premium buttons (lib/branded-email.js premiumBtn): rounded-16px SOLID gradient pill + a thin glowing accent bar inside the LEFT edge + bold Outfit label. Bolder icon strokes read as solid. Variants: red (primary), navy (secondary). ===== */ body.public-body #propertyContent .email-btn { display: flex !important; align-items: center; justify-content: flex-start; width: 100%; gap: 12px; padding: 14px 22px 14px 16px !important; border: 0 !important; border-radius: 16px !important; cursor: pointer; font-family: 'Outfit', sans-serif !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0.01em; color: #ffffff !important; text-decoration: none; white-space: nowrap; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; } body.public-body #propertyContent .email-btn::before { content: ''; flex-shrink: 0; width: 4px; height: 20px; border-radius: 999px; background: var(--eb-bar, rgba(255,255,255,0.65)); box-shadow: 0 0 12px var(--eb-bar, rgba(255,255,255,0.65)); } body.public-body #propertyContent .email-btn > i, body.public-body #propertyContent .email-btn > svg { flex-shrink: 0; stroke-width: 2.5; color: #fff !important; } body.public-body #propertyContent .email-btn .email-btn-label { flex: 1; text-align: center; margin-right: 16px; } body.public-body #propertyContent .email-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } body.public-body #propertyContent .email-btn--red { background: #c81826 !important; box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.24) !important; --eb-bar: #fca5a5; } body.public-body #propertyContent .email-btn--navy { background: #1e3a5f !important; box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.24) !important; --eb-bar: #7dd3fc; } /* GOLD — the walkthrough action. Gold is the brand's "come see it" colour, and it has to be visibly different from the crimson offer CTA sitting right above it: two red buttons stacked read as one decision. Dark ink, not white: white on gold fails contrast at this weight. */ body.public-body #propertyContent .email-btn--gold { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important; box-shadow: 0 12px 24px -8px rgba(217, 119, 6, 0.34) !important; color: #422006 !important; --eb-bar: #fff3c4; } body.public-body #propertyContent .email-btn--gold > i, body.public-body #propertyContent .email-btn--gold > svg { color: #422006 !important; } /* GREEN — the photos/gallery action, matching the email button set. */ body.public-body #propertyContent .email-btn--green { background: #35a06a !important; box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.24) !important; --eb-bar: #bbf7d0; } /* Quick-actions grid (the 4 moved buttons) — solid light buttons on the white card: solid fill, bolder crimson icons, 2×2. */ body.public-body #propertyContent .pricing-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } /* The tiles wear `.email-btn--outline .email-btn--sm` (and --navy for View Full Address) as of 2026-08-17, so the FACE, the rim, the accent bar and the hover lift all come from public-ui.css. This block used to paint all of that here under !important — which was invisible while deal-detail.css happened to restate the same values later, and would have won outright the moment it stopped. `!important` does not care about load order, so paint left behind here is not dormant, it is armed. Only the crimson icon survives: it is the one genuinely local decision, the accent that tells a quiet outline tile apart from a plain one. */ body.public-body #propertyContent .pricing-quick-btn > i, body.public-body #propertyContent .pricing-quick-btn > svg { color: #b62c38 !important; stroke-width: 2.5; flex-shrink: 0; } /* ...except on the two filled variants, where crimson on navy is unreadable. */ body.public-body #propertyContent .pricing-quick-btn.email-btn--navy > i, body.public-body #propertyContent .pricing-quick-btn.email-btn--navy > svg, body.public-body #propertyContent .pricing-quick-btn.is-saved > i, body.public-body #propertyContent .pricing-quick-btn.is-saved > svg { color: #ffffff !important; } .pricing-kicker { font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #64748b; } .pricing-faq-link { box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); } .pricing-amount { font-family: 'Outfit', sans-serif; font-size: clamp(2.75rem, 5vw, 3.45rem); line-height: 0.95; letter-spacing: -0.04em; font-weight: 700; color: #c0303d; text-shadow: 0 10px 24px rgba(182, 44, 56, 0.08); } .pricing-subcopy { max-width: 20rem; margin: 0.85rem auto 0; font-size: 0.94rem; line-height: 1.6; color: #64748b; } /* NO overflow:hidden. The ARV / Spread explainer tooltips live inside this card and hang below their tile; clipping them to the card cut the bubble in half. The ::before wash is inset:0 and carries border-radius:inherit, so the rounded corners survive without a clip. */ .pricing-spread-card { position: relative; background: linear-gradient(180deg, rgba(240,253,244,0.95) 0%, rgba(236,253,245,0.96) 100%); border: 1px solid rgba(134, 239, 172, 0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.86) inset, 0 18px 36px rgba(15, 23, 42, 0.08); } .pricing-spread-card::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(34,197,94,0.12), transparent 35%), radial-gradient(circle at bottom left, rgba(30,58,95,0.08), transparent 30%); border-radius: inherit; pointer-events: none; } /* z-index 2, NOT 1. The footer below is a sibling that also opens a stacking context at z-index 1 and comes later in the DOM, so "POTENTIAL SPREAD" painted straight through the open tooltip — the tip's own z-index 45 is trapped inside THIS context and can never outrank a later sibling. */ .pricing-micro-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } .pricing-micro-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.85rem 0.4rem; min-height: 5.1rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.78); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 8px 18px rgba(15, 23, 42, 0.05); text-align: center; } .pricing-micro-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #64748b; } .pricing-micro-value { display: block; width: 100%; margin-top: 0.4rem; font-family: 'Outfit', sans-serif; /* Scales to fit the tile so 6- and 7-figure values stay on ONE line (was overflow-wrap:anywhere, which snapped "$165,000" into "$165,0/00"). Low floor (0.76rem) keeps 7-figure prices from overflowing the ~1/3-width tile on the narrowest phones instead of clipping digits. */ font-size: clamp(0.76rem, 2.35vw, 1.2rem); max-width: 100%; font-weight: 800; letter-spacing: -0.035em; text-align: center; white-space: nowrap; } /* Very narrow phones: tighten spacing a touch more so 7-figure prices fit. */ @media (max-width: 380px) { .pricing-micro-value { letter-spacing: -0.05em; } } .pricing-spread-footer { position: relative; z-index: 1; margin-top: 1rem; padding-top: 0.95rem; border-top: 1px solid rgba(134, 239, 172, 0.55); display: flex; flex-direction: column; align-items: center; gap: 0.18rem; text-align: center; } .pricing-spread-title { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; color: #166534; } .pricing-spread-footnote { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #4b5563; } .financial-metric-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1rem; border: 1px solid rgba(226, 232, 240, 0.92); border-radius: 1rem; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.95)); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04); } .financial-metric-card:last-child { border-bottom: 0; } .financial-metric-label { font-size: 0.77rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #64748b; } .financial-metric-value { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: #1e3a5f; } .pricing-primary-cta { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.22s ease; } .pricing-primary-cta::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-18deg); pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.15s ease; } .pricing-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 42px rgba(15, 23, 42, 0.2); } .pricing-primary-cta:hover::after { opacity: 0; } .pricing-secondary-cta { box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); } .rehab-level-light { color: #059669; } .rehab-level-medium { color: #ea580c; } .rehab-level-heavy { color: #dc2626; } .rehab-level-default { color: #475569; } .deal-header-map-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; flex-shrink: 0; border-radius: 9999px; background: linear-gradient(135deg, rgba(182, 44, 56, 0.12), rgba(255, 255, 255, 0.98)); border: 1px solid rgba(182, 44, 56, 0.14); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); margin-top: 0.25rem; } .deal-header-title-wrap { min-width: 0; } /* View Full Address glow variant: RETIRED. The navy repaint fought the sidebar quick-action restyle and rendered its own label invisible; the button is now a plain quick-action tile. */ /* ===================================================================== Deal-detail premium upgrade 2026-05-01 Match the dashboard/section-hero amber accent language across the detail page — title card, image gallery, pricing sidebar, stat tiles, primary CTA, secondary CTAs, property-details mini cards, highlights + description panels. Loaded last; overrides above. ===================================================================== */ /* Header card surface — softer shadow, hairline highlight */ body.public-body #propertyContent > .flex.flex-col.md\:flex-row.justify-between.items-start.gap-4.mb-6 { background: radial-gradient(circle at top right, rgba(30, 58, 95, 0.05), transparent 35%), linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.96)) !important; border: 1px solid rgba(226, 232, 240, 0.92) !important; box-shadow: 0 24px 52px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.86) !important; } /* Header status badge. The rim/shadow/colour now live in deal-detail.css beside the data-status paint, so they are one thing in one place. The `backdrop-filter: blur(10px)` that used to be here was dead paint: the badge is a solid fill, so there is never anything behind it to blur — it cost a compositor layer on the hero and bought a look nobody could see. */ body.public-body #statusBadge { letter-spacing: 0.16em; } /* Top action buttons (Share / Save / Contact) — refine hover */ body.public-body #propertyContent button[onclick="shareDeal()"], body.public-body #memberSaveDealBtn { transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } body.public-body #propertyContent button[onclick="shareDeal()"]:hover, body.public-body #memberSaveDealBtn:hover { transform: translateY(-1px); border-color: rgba(30, 58, 95, 0.5) !important; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10); } body.public-body #propertyContent button[onclick="contactAboutDeal()"]:not(.pricing-primary-cta) { background: #c0303d !important; border: 1px solid rgba(252, 165, 165, 0.45); box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.16); transition: transform 180ms ease, box-shadow 180ms ease; } body.public-body #propertyContent button[onclick="contactAboutDeal()"]:not(.pricing-primary-cta):hover { transform: translateY(-1px); box-shadow: 0 18px 30px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255,255,255,0.22); } /* Image gallery card — premium light-bordered frame */ body.public-body #propertyContent .grid.lg\:grid-cols-3 > .lg\:col-span-2 > .bg-white.rounded-2xl.shadow-lg.overflow-hidden:first-child { border: 1px solid rgba(203, 213, 225, 0.85) !important; border-radius: 1.4rem !important; box-shadow: 0 30px 64px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255,255,255,0.92) inset, inset 0 1px 0 rgba(255,255,255,0.92) !important; background: radial-gradient(circle at top right, rgba(30, 58, 95, 0.04), transparent 35%), linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96)) !important; transition: border-color 240ms ease, box-shadow 240ms ease; } body.public-body #propertyContent .grid.lg\:grid-cols-3 > .lg\:col-span-2 > .bg-white.rounded-2xl.shadow-lg.overflow-hidden:first-child:hover { border-color: rgba(30, 58, 95, 0.45) !important; box-shadow: 0 38px 78px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(30, 58, 95, 0.16) inset, inset 0 1px 0 rgba(255,255,255,0.95) !important; } /* Hairline divider between the main image and the thumb strip */ body.public-body #galleryThumbs { border-top: 1px solid rgba(226, 232, 240, 0.85); background: linear-gradient(180deg, rgba(248,250,252,0.6), rgba(255,255,255,0.95)); padding: 0.85rem 1rem !important; gap: 0.6rem !important; } body.public-body #galleryThumbs > .gallery-thumb, body.public-body #galleryThumbs > * { border: 1px solid rgba(203, 213, 225, 0.7); border-radius: 0.6rem; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15, 23, 42, 0.04); } body.public-body #galleryThumbs > .gallery-thumb:hover, body.public-body #galleryThumbs > *:hover { border-color: rgba(30, 58, 95, 0.6); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 18px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(30, 58, 95, 0.15); } /* Active thumbnail — replace harsh ring-2 ring-primary with a softer amber/navy frame */ body.public-body #galleryThumbs > .gallery-thumb.active { border-color: rgba(30, 58, 95, 0.85) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 2px rgba(30, 58, 95, 0.55), 0 8px 16px rgba(15, 23, 42, 0.10) !important; --tw-ring-color: transparent !important; } /* Highlights + Description cards — premium surface */ body.public-body #highlightsSection, body.public-body #propertyContent .bg-white.rounded-2xl.shadow-lg.p-6 { background: radial-gradient(circle at top right, rgba(30, 58, 95, 0.04), transparent 40%), linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96)) !important; border: 1px solid rgba(226, 232, 240, 0.92) !important; box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.86) !important; } /* (Second of the five competing rail colourways, plus another restatement of the card's border and shadow. All superseded by the premium pass at the foot of the file. Deleted.) */ /* Pricing micro stat tiles — amber wash + tabular nums */ .pricing-micro-card { background: radial-gradient(circle at top, rgba(30, 58, 95, 0.06), transparent 70%), linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96)) !important; border: 1px solid rgba(226, 232, 240, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(15, 23, 42, 0.04) !important; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .pricing-micro-card:hover { border-color: rgba(30, 58, 95, 0.45) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 16px rgba(15, 23, 42, 0.08) !important; } .pricing-micro-value { font-variant-numeric: tabular-nums; } /* Renewed spread card — the payoff metric gets a green wash + pop so the trio reads STARTING → ARV → *SPREAD* at a glance. */ .pricing-micro-card:last-child { background: radial-gradient(circle at top, rgba(34,197,94,0.14), transparent 72%), linear-gradient(180deg, rgba(240,253,244,1), rgba(220,252,231,0.92)) !important; border: 1px solid rgba(134, 239, 172, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 18px rgba(22, 101, 52, 0.12) !important; } .pricing-micro-card:last-child .pricing-micro-label { color: #15803d; } .pricing-micro-card:last-child .pricing-micro-value { color: #15803d !important; } /* Financial metric rows — premium pill rows with subtle hover */ .financial-metric-card { background: radial-gradient(circle at top right, rgba(30, 58, 95, 0.05), transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) !important; border: 1px solid rgba(226, 232, 240, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 6px 14px rgba(15, 23, 42, 0.05) !important; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .financial-metric-card:hover { border-color: rgba(30, 58, 95, 0.4) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 22px rgba(15, 23, 42, 0.10) !important; } .financial-metric-value { font-variant-numeric: tabular-nums; } /* Submit an Offer — deeper crimson gradient with amber hairline */ .pricing-primary-cta { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%) !important; border: 1px solid rgba(30, 58, 95, 0.32); box-shadow: 0 22px 40px rgba(185, 28, 28, 0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important; } .pricing-primary-cta:hover { background: linear-gradient(135deg, #991b1b 0%, #b91c1c 55%, #dc2626 100%) !important; border-color: rgba(30, 58, 95, 0.6) !important; box-shadow: 0 28px 50px rgba(185, 28, 28, 0.40), inset 0 1px 0 rgba(255,255,255,0.24) !important; } /* View All Photos / Videos — switch sky-blue to navy gradient with amber accents */ body.public-body #viewAllMediaBtn { background: linear-gradient(140deg, #0b1f3d 0%, #173a72 42%, #1f4f93 72%, #2b6fb8 100%) !important; border: 1px solid rgba(30, 58, 95, 0.22) !important; color: #ffffff !important; box-shadow: 0 14px 26px rgba(8, 15, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.12) !important; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } body.public-body #viewAllMediaBtn:hover { transform: translateY(-1px); border-color: rgba(30, 58, 95, 0.5) !important; box-shadow: 0 20px 36px rgba(8, 15, 28, 0.32), inset 0 1px 0 rgba(255,255,255,0.16) !important; } body.public-body #viewAllMediaBtn i { color: #7dd3fc !important; } /* Attend Walkthrough — gold/amber to match the open-walkthrough button */ .pricing-secondary-cta { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important; border: 1px solid #d97706 !important; color: #422006 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 12px 24px rgba(217, 119, 6, 0.28) !important; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .pricing-secondary-cta:hover { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important; border-color: #b45309 !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 18px 34px rgba(217, 119, 6, 0.38) !important; } .pricing-secondary-cta i { color: #422006 !important; } /* Save PDF Flyer — light-gray utility button (tertiary), soft + premium */ .pricing-tertiary-cta { background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(15, 23, 42, 0.10) !important; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .pricing-tertiary-cta:hover { background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important; border-color: #94a3b8 !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 24px rgba(15, 23, 42, 0.16) !important; } .pricing-tertiary-cta i { color: #64748b !important; } /* Reserve space so the sticky mobile offer bar never covers the footer. */ @media (max-width: 1023px) { body.public-body.has-mobile-offer-bar { padding-bottom: 84px; } } /* Property Details — bedroom/bathroom mini cards */ body.public-body #propertyContent .bg-white.rounded-2xl.shadow-lg.p-6 .text-center.p-3.bg-gray-50 { background: radial-gradient(circle at top, rgba(30, 58, 95, 0.06), transparent 70%), linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96)) !important; border: 1px solid rgba(226, 232, 240, 0.92); box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } body.public-body #propertyContent .bg-white.rounded-2xl.shadow-lg.p-6 .text-center.p-3.bg-gray-50:hover { border-color: rgba(30, 58, 95, 0.45); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 16px rgba(15, 23, 42, 0.08); } /* Highlights bullets — uniform green check, fixed size, fixed text size */ body.public-body #highlightsList { row-gap: 0.85rem; } body.public-body #highlightsList li { align-items: center !important; gap: 0.65rem !important; } body.public-body #highlightsList li > i, body.public-body #highlightsList li > svg { flex-shrink: 0 !important; width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; min-height: 1.25rem !important; color: #16a34a !important; stroke: #16a34a !important; margin-top: 0 !important; display: inline-flex; align-items: center; justify-content: center; } body.public-body #highlightsList li > svg path, body.public-body #highlightsList li > svg polyline, body.public-body #highlightsList li > svg circle { stroke: #16a34a !important; } body.public-body #highlightsList li > span { font-size: 0.95rem !important; line-height: 1.45 !important; color: #334155 !important; font-weight: 500; } /* Rehab text — charcoal black across all severity levels */ body.public-body .rehab-level-light, body.public-body .rehab-level-medium, body.public-body .rehab-level-heavy, body.public-body .rehab-level-default, body.public-body #rehabDisplay { color: #0f172a !important; } /* Title — display feel */ body.public-body #propertyTitle { letter-spacing: -0.02em; line-height: 1.1; } /* ===================================================================== Important Dates + Closing Details — premium row + card treatment ===================================================================== */ /* Important Dates rows: styling moved WHOLLY to deal-detail.css section 17 (one owner). This base pass and the CTA-skin pass further down were two of three stacked repaints of the same rows. */ /* Closing Details rows — pill rows with the metric-row premium feel */ body.public-body #closingDetailsSection #earnestMoneyRow, body.public-body #closingDetailsSection #closingTimeframeRow { background: radial-gradient(circle at top right, rgba(30, 58, 95, 0.05), transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) !important; border: 1px solid rgba(226, 232, 240, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 6px 14px rgba(15, 23, 42, 0.05); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } body.public-body #closingDetailsSection #earnestMoneyRow:hover, body.public-body #closingDetailsSection #closingTimeframeRow:hover { border-color: rgba(30, 58, 95, 0.4) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 22px rgba(15, 23, 42, 0.10); } body.public-body #closingDetailsSection #earnestMoneyRow > span:first-child, body.public-body #closingDetailsSection #closingTimeframeRow > span:first-child { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #64748b; } body.public-body #closingDetailsSection #earnestMoneyDisplay, body.public-body #closingDetailsSection #closingDetailTimeframeDisplay { font-family: 'Outfit', sans-serif; font-variant-numeric: tabular-nums; font-size: 1rem; letter-spacing: -0.01em; } /* Closing attorney card — premium surface */ body.public-body #closingDetailsSection #closingAttorneyCard { background: radial-gradient(circle at top right, rgba(30, 58, 95, 0.06), transparent 45%), linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96)) !important; border: 1px solid rgba(203, 213, 225, 0.85) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 14px 28px rgba(15, 23, 42, 0.08); transition: border-color 200ms ease, box-shadow 200ms ease; } body.public-body #closingDetailsSection #closingAttorneyCard:hover { border-color: rgba(30, 58, 95, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 18px 34px rgba(15, 23, 42, 0.12); } /* Closing attorney icon pill */ body.public-body #closingDetailsSection #closingAttorneyCard .w-10.h-10.rounded-xl { background: linear-gradient(140deg, #0b1f3d 0%, #173a72 42%, #1f4f93 72%, #2b6fb8 100%) !important; border: 1px solid rgba(125, 211, 252, 0.28); box-shadow: 0 8px 16px rgba(8, 15, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.16); } body.public-body #closingDetailsSection #closingAttorneyCard .w-10.h-10.rounded-xl i { color: #ffffff !important; } /* Closing attorney "Visit Site" pill — navy CTA */ body.public-body #closingAttorneyWebsiteLink { background: linear-gradient(140deg, #0b1f3d 0%, #173a72 42%, #1f4f93 72%, #2b6fb8 100%) !important; border: 1px solid rgba(125, 211, 252, 0.32) !important; color: #ffffff !important; box-shadow: 0 10px 18px rgba(8, 15, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.14) !important; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } body.public-body #closingAttorneyWebsiteLink:hover { transform: translateY(-1px); border-color: rgba(125, 211, 252, 0.55) !important; box-shadow: 0 16px 28px rgba(8, 15, 28, 0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important; background: linear-gradient(135deg, #07192e 0%, #0e2746 50%, #13426b 100%) !important; } body.public-body #closingAttorneyWebsiteLink i { color: #7dd3fc !important; } /* ===================================================================== Contact Team box — premium navy gradient surface with sky accents ===================================================================== */ body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white { background: radial-gradient(circle 220px at 92% -10%, rgba(125, 211, 252, 0.18), transparent 60%), radial-gradient(circle 180px at 8% 110%, rgba(252, 211, 77, 0.10), transparent 60%), linear-gradient(140deg, #0b1f3d 0%, #173a72 42%, #1f4f93 72%, #2b6fb8 100%) !important; border: 1px solid rgba(125, 211, 252, 0.24) !important; border-radius: 1.4rem !important; box-shadow: 0 28px 56px rgba(8, 15, 28, 0.28), 0 0 0 1px rgba(255,255,255,0.06) inset, inset 0 1px 0 rgba(255,255,255,0.14) !important; transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease; } body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white:hover { border-color: rgba(125, 211, 252, 0.5) !important; box-shadow: 0 36px 70px rgba(8, 15, 28, 0.36), 0 0 0 1px rgba(125, 211, 252, 0.18) inset, inset 0 1px 0 rgba(255,255,255,0.18) !important; } /* Title — display feel + amber kicker */ body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white > h3:first-child { position: relative; padding-bottom: 0.6rem; margin-bottom: 1rem !important; letter-spacing: -0.01em; } body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white > h3:first-child::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(252, 211, 77, 0.85), rgba(125, 211, 252, 0.55)); } /* Agent avatar circle — sky-tinted ring */ body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white .w-10.h-10.bg-white\/20.rounded-lg { background: radial-gradient(circle at top, rgba(125, 211, 252, 0.32), rgba(255,255,255,0.10)) !important; border: 1px solid rgba(125, 211, 252, 0.4); box-shadow: 0 8px 16px rgba(8, 15, 28, 0.28), inset 0 1px 0 rgba(255,255,255,0.20); } body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white .w-10.h-10.bg-white\/20.rounded-lg i { color: #7dd3fc !important; } /* Agent meta text — refine */ body.public-body #agentName { letter-spacing: -0.01em; color: #ffffff; } body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white p[data-site-contact-title] { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fcd34d !important; } /* Phone + email rows — premium glassy pills */ body.public-body #agentPhone, body.public-body #agentEmail { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important; border: 1px solid rgba(125, 211, 252, 0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 10px rgba(8, 15, 28, 0.18); transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } body.public-body #agentPhone:hover, body.public-body #agentEmail:hover { background: linear-gradient(180deg, rgba(125, 211, 252, 0.18), rgba(255,255,255,0.06)) !important; border-color: rgba(125, 211, 252, 0.55); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 16px rgba(8, 15, 28, 0.28); } body.public-body #agentPhone i, body.public-body #agentEmail i { color: #7dd3fc !important; } body.public-body #agentPhone span, body.public-body #agentEmail span { color: #f1f5f9 !important; font-variant-numeric: tabular-nums; } body.public-body #agentEmail span { font-variant-numeric: normal; } /* Save Contact — bright pill that pops on the navy surface */ body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white a[data-site-contact-card-link] { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important; border: 1px solid rgba(252, 211, 77, 0.45) !important; color: #0e2746 !important; box-shadow: 0 14px 26px rgba(8, 15, 28, 0.32), 0 0 0 1px rgba(252, 211, 77, 0.16) inset, inset 0 1px 0 rgba(255,255,255,0.92) !important; font-weight: 700; letter-spacing: 0.02em; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white a[data-site-contact-card-link]:hover { transform: translateY(-1px); border-color: rgba(252, 211, 77, 0.85) !important; box-shadow: 0 20px 34px rgba(8, 15, 28, 0.40), 0 0 0 1px rgba(252, 211, 77, 0.36) inset, inset 0 1px 0 rgba(255,255,255,0.95) !important; background: linear-gradient(180deg, #ffffff 0%, #fef3c7 100%) !important; } body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white a[data-site-contact-card-link] i { color: #ffffff !important; } /* ===================================================================== Premium upgrade pass 2 — Starting Offer Price box + amount typography ===================================================================== */ /* The card surface, the kicker, the big amount and its underscore were all declared here (ray-washed surface, slate kicker, crimson Outfit price, crimson underscore). The premium pass at the foot of the file restates every one of those properties — navy band, gold kicker, white Archivo price, gold underscore — so none of this could apply. Deleted. */ /* Premium embossed frame + subtle glow around the main listing photo */ .deal-image-frame { border: 1px solid rgba(226, 232, 240, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 23, 42, 0.06), 0 22px 48px -28px rgba(15, 23, 42, 0.5), 0 0 0 1px rgba(30, 58, 95, 0.04); transition: box-shadow 220ms ease; } .deal-image-frame:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(15, 23, 42, 0.08), 0 30px 64px -28px rgba(30, 58, 95, 0.55), 0 0 0 1px rgba(30, 58, 95, 0.09); } /* Keep small inline trust icons aligned + correctly sized */ .deal-trust-note svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .systems-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .systems-grid { grid-template-columns: repeat(3, 1fr); } } /* Investor summary — urgency strip + CTA row */ body.public-body .investor-summary-urgency { box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 12px 24px rgba(30, 58, 95, 0.18); } body.public-body .investor-summary-urgency-icon { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); border: 1px solid rgba(252, 211, 77, 0.6); color: #1e3a8a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 14px rgba(252, 211, 77, 0.22); } body.public-body .investor-summary-urgency-icon i { color: #1e3a8a !important; stroke: #1e3a8a !important; } body.public-body .investor-summary-primary { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%); border: 1px solid rgba(30, 58, 95, 0.35); box-shadow: 0 18px 32px rgba(185, 28, 28, 0.30), inset 0 1px 0 rgba(255,255,255,0.20); } body.public-body .investor-summary-primary:hover { background: linear-gradient(135deg, #991b1b 0%, #b91c1c 55%, #dc2626 100%); border-color: rgba(30, 58, 95, 0.6); transform: translateY(-1px); box-shadow: 0 22px 38px rgba(185, 28, 28, 0.40), inset 0 1px 0 rgba(255,255,255,0.24); } body.public-body .investor-summary-secondary { background: linear-gradient(140deg, #0b1f3d 0%, #173a72 42%, #1f4f93 72%, #2b6fb8 100%); border: 1px solid rgba(30, 58, 95, 0.22); color: #ffffff; box-shadow: 0 14px 26px rgba(8, 15, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.12); } body.public-body .investor-summary-secondary:hover { border-color: rgba(30, 58, 95, 0.5); transform: translateY(-1px); box-shadow: 0 20px 36px rgba(8, 15, 28, 0.32), inset 0 1px 0 rgba(255,255,255,0.16); } body.public-body .investor-summary-secondary i { color: #7dd3fc; } /* (The FAQ help icon's navy-on-white skin + hover was declared here. It was written for a white price block; the icon now sits on the navy band and the premium pass at the foot of the file gives it the translucent-gold treatment, carrying over this rule's transition and hover lift. */ /* ===================================================================== 2026 CLEAN REFRESH (deal detail) — appended last in this inline sheet so it wins over the premium block above. Keeps every accent and gradient; only calms the heavy drop-shadows so the page reads as light and modern, matching the shared public-ui.css refresh. ===================================================================== */ body.public-body #propertyContent > .flex.flex-col.md\:flex-row.justify-between.items-start.gap-4.mb-6 { box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.05), 0 18px 40px -18px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; } body.public-body #propertyContent .grid.lg\:grid-cols-3 > .lg\:col-span-2 > .bg-white.rounded-2xl.shadow-lg.overflow-hidden:first-child { border-radius: 1.25rem !important; box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.05), 0 22px 48px -20px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } body.public-body #propertyContent .grid.lg\:grid-cols-3 > .lg\:col-span-2 > .bg-white.rounded-2xl.shadow-lg.overflow-hidden:first-child:hover { box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.08), 0 30px 56px -22px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; } /* (The card's own box-shadow was restated here; the premium pass at the foot of the file sets it, so this one never applied. Deleted.) */ .spread-highlight, .pricing-spread-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 16px 34px -16px rgba(22, 101, 52, 0.14) !important; } .pricing-primary-cta { box-shadow: 0 10px 24px -10px rgba(182, 44, 56, 0.40) !important; } .pricing-primary-cta:hover { box-shadow: 0 14px 30px -10px rgba(182, 44, 56, 0.46) !important; } .deal-header-map-icon { box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.12) !important; } /* === 2026-07-03 polish + mobile layer === Additive-only pass appended after every earlier override so it wins ties. Mobile tap targets, 4:3 hero on phones, gallery swipe affordance, safe-area clearance, and a single refined price-card accent. */ /* (A navy-to-gold price-card top bar was declared here. It was the third of five competing colourways for the same 1-rule rail; the premium pass at the foot of the file owns the rail now. Deleted.) */ /* Buyer prompt modal — checkbox rows read and tap like chips */ #buyerPromptModal .buyer-chip-grid > label { cursor: pointer; border-radius: 12px; padding: 0.65rem 0.85rem; transition: background-color 150ms ease, border-color 150ms ease; } #buyerPromptModal .buyer-chip-grid > label:hover { background-color: rgba(30, 58, 95, 0.05); border-color: rgba(30, 58, 95, 0.35); } /* Footer safe-area — keep content clear of the iOS home indicator */ footer.site-footer { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } /* Gallery swipe affordance — right-edge fade + arrow hint on touch widths so off-screen thumbnails read as scrollable. */ @media (max-width: 767px) { #galleryThumbs { -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 3rem), transparent 100%); } .deal-image-frame { position: relative; } /* Arrow hint only when there are enough thumbs to overflow */ .deal-image-frame:has(#galleryThumbs > :nth-child(5))::after { content: '\2192'; position: absolute; right: 0.6rem; bottom: 2.75rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(203, 213, 225, 0.9); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14); color: #475569; font-size: 0.85rem; font-weight: 700; pointer-events: none; } } /* Phone-width usability */ @media (max-width: 640px) { /* Hero photo: 4:3 uses the phone viewport better than 16:9 */ .deal-image-frame > .relative.aspect-video { aspect-ratio: 4 / 3; } /* Secondary CTAs — comfortable tap targets (>=44px effective) */ .pricing-secondary-cta, #detailAddressActionBtn, #propertyContent button[onclick="saveDealPdf()"], body.public-body .investor-summary-secondary, #propertyContent .grid.grid-cols-3.gap-3 > button { padding-top: 1rem; padding-bottom: 1rem; } /* Cramped text-xs helper/label copy reads better at 13px */ #buyerPromptModal .text-xs, #contactModal .text-xs { font-size: 0.8125rem; } /* Keep each modal's submit button clear of the GHL chat bubble (bottom-right, z-9999) by reserving space below the form. */ #buyerPromptModal .public-mobile-modal-card, #contactModal .public-mobile-modal-card { padding-bottom: max(90px, calc(2rem + env(safe-area-inset-bottom))); } } /* Mobile: lead with the pricing / starting-offer sidebar right after the hero, then the gallery + records. On desktop it returns to the right rail. */ @media (max-width: 1023px) { #propertyContent .dd-col-sidebar { order: -1; } } /* ===================================================================== DEAL-DETAIL PREMIUM POLISH 2026 (loads last in this block → wins). Unifies every button to the homepage idiom (rounded, glowing left accent edge, hover lift), navy section-header underlines, homepage FAQ styling, fitted Major-Systems rows, upgraded highlight checks, and a brief GPU-only "on fire" flourish on strong deals. ===================================================================== */ /* Shared premium button skin — applied to every CTA on the page. 2026-08-17: the sticky offer bar's two buttons left this list. They are `.email-btn--sm` now, whose scale is a 12px radius and an 800 weight; this rule was forcing 1.05rem and 700 onto them alone, so the one pair of brand buttons that always sits side by side was also the one pair shaped unlike every other brand button on the site. Its `:hover` twin below was likewise doubling `.email-btn`'s own -1px lift into -2px. */ body.public-body .pricing-primary-cta, body.public-body #propertyContent button[onclick="contactAboutDeal()"], body.public-body #viewAllMediaBtn, body.public-body .pricing-secondary-cta, body.public-body #propertyContent button[onclick="saveDealPdf()"], body.public-body #detailAddressActionBtn, body.public-body #propertyContent button[onclick="shareDeal()"], body.public-body #memberSaveDealBtn, body.public-body .investor-summary-primary, body.public-body .investor-summary-secondary, body.public-body #dealCashBuyersCard a[href^="/join"], body.public-body a[data-site-contact-card-link] { position: relative !important; overflow: hidden !important; border-radius: 1.05rem !important; font-weight: 700 !important; letter-spacing: -0.005em !important; transition: transform 220ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms ease, filter 220ms ease, background 220ms ease !important; } /* Glowing left accent edge (same as homepage .btn-*::before). */ body.public-body .pricing-primary-cta::before, body.public-body #viewAllMediaBtn::before, body.public-body .pricing-secondary-cta::before, body.public-body #detailAddressActionBtn::before, body.public-body .investor-summary-primary::before, body.public-body .investor-summary-secondary::before, body.public-body #dealCashBuyersCard a[href^="/join"]::before, body.public-body a[data-site-contact-card-link]::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0.7rem !important; bottom: 0.7rem !important; right: auto !important; width: 3px !important; height: auto !important; border-radius: 999px !important; z-index: 2 !important; } body.public-body .pricing-primary-cta:hover, body.public-body #viewAllMediaBtn:hover, body.public-body .pricing-secondary-cta:hover, body.public-body #detailAddressActionBtn:hover, body.public-body .investor-summary-primary:hover, body.public-body .investor-summary-secondary:hover, body.public-body #dealCashBuyersCard a[href^="/join"]:hover, body.public-body a[data-site-contact-card-link]:hover { transform: translateY(-2px) !important; filter: brightness(1.04); } /* Primary RED CTAs (crimson) — red glowing edge. */ body.public-body .pricing-primary-cta::before, body.public-body .investor-summary-primary::before, body.public-body #dealCashBuyersCard a[href^="/join"]::before { background: linear-gradient(180deg, #fca5a5, #f43f5e) !important; box-shadow: 0 0 14px rgba(244,63,94,0.6) !important; } /* GOLD CTAs — walkthrough actions. (View All Photos/Videos is NAVY — see the #viewAllMediaBtn rule above; it must NOT be gold or it collides with the gold Attend Walkthrough button.) */ body.public-body .investor-summary-secondary { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; border: 1px solid rgba(255,255,255,0.4) !important; color: #3a2606 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 26px -12px rgba(245,158,11,0.6) !important; } body.public-body .investor-summary-secondary i { color: #7c2d12 !important; } body.public-body .pricing-secondary-cta::before, body.public-body .investor-summary-secondary::before { background: linear-gradient(180deg, #fff7ed, #fbbf24) !important; box-shadow: 0 0 14px rgba(251,191,36,0.85) !important; } /* NAVY edge — address / share / save outline buttons + View All Photos (navy). */ body.public-body #detailAddressActionBtn::before, body.public-body #viewAllMediaBtn::before { background: linear-gradient(180deg, #7dd3fc, #1e3a5f) !important; box-shadow: 0 0 14px rgba(30,58,95,0.45) !important; } /* Contact card "Save Contact" — sky edge on navy surface. */ body.public-body a[data-site-contact-card-link]::before { background: linear-gradient(180deg, #7dd3fc, #38bdf8) !important; box-shadow: 0 0 14px rgba(56,189,248,0.6) !important; } /* ── Header Save button — keep premium even after JS re-render ── */ body.public-body #memberSaveDealBtn { border: 1px solid rgba(30,58,95,0.18) !important; background: linear-gradient(135deg, rgba(30,58,95,0.06), rgba(255,255,255,0.92)) !important; color: #1e3a5f !important; } body.public-body #memberSaveDealBtn.is-saved { color: #047857 !important; border-color: rgba(5,150,105,0.4) !important; background: linear-gradient(135deg, rgba(5,150,105,0.12), rgba(255,255,255,0.92)) !important; } /* ── Section-header underline — navy, hugging the text only ── */ #propertyContent h2.font-bold.text-primary, #propertyContent h3.font-bold.text-primary, #dealFaqSection h2.font-bold.text-primary { display: inline-block; border-bottom: 3px solid #1e3a5f; padding-bottom: 0.3rem; line-height: 1.18; } /* ── FAQ cards → homepage look (white card, crimson accent on open) ── */ #dealFaqSection details { border-radius: 1.25rem !important; border: 1px solid rgba(15,23,42,0.08) !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px -18px rgba(15,23,42,0.28); position: relative; overflow: hidden; transition: box-shadow 240ms ease, border-color 240ms ease; } #dealFaqSection details[open] { border-color: rgba(30,58,95,0.16) !important; box-shadow: 0 18px 40px -22px rgba(30,58,95,0.35); } #dealFaqSection details::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #d23d4a, #a51f2b); transform: scaleY(0); transform-origin: top; opacity: 0; transition: transform 320ms cubic-bezier(0.22,1,0.36,1), opacity 320ms ease; } #dealFaqSection details[open]::before { transform: scaleY(1); opacity: 1; } #dealFaqSection summary i[data-lucide], #dealFaqSection summary svg { color: #64748b !important; } #dealFaqSection details[open] summary i, #dealFaqSection details[open] summary svg { color: #c0303d !important; } /* ── Major Systems → full-width rows that fit any age/type text ── */ .systems-grid { grid-template-columns: 1fr !important; gap: 0.55rem !important; } @media (min-width: 640px) { .systems-grid { grid-template-columns: 1fr !important; } } .systems-grid .systems-tile:not(.hidden) { display: flex !important; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem !important; border: 1px solid rgba(30,58,95,0.10) !important; border-radius: 0.9rem !important; background: linear-gradient(180deg, #ffffff, rgba(248,250,252,0.9)) !important; box-shadow: 0 8px 20px -14px rgba(15,23,42,0.25); } .systems-tile-ic { flex: none; width: 2rem; height: 2rem; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; color: #1e3a5f; background: rgba(30,58,95,0.09); } .systems-tile-name { flex: none; min-width: 5.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; } .systems-tile-vals { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .systems-tile-age { font-size: 0.95rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; } .systems-tile-type { font-size: 0.72rem; color: #64748b; overflow-wrap: anywhere; } /* ── Upgraded highlight checkmarks (bolder, emerald) ── */ body.public-body #highlightsList li > i, body.public-body #highlightsList li > svg { color: #059669 !important; stroke: #059669 !important; width: 1.35rem !important; height: 1.35rem !important; min-width: 1.35rem !important; min-height: 1.35rem !important; } /* ── "On fire" flourish — brief, GPU-only (opacity/transform) ── */ .dd-fire-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; border-radius: inherit; } .dd-fire-fx::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: inset 0 -46px 60px -20px rgba(249,115,22,0.8), inset 0 0 0 2px rgba(249,115,22,0.55); will-change: opacity; animation: ddFireGlow 1.9s ease forwards; } /* Same glass-pill placement language as the location/"Buyers are looking" tags (.deal-overlay-pill supplies the dark blurred glass), sitting bottom-center so it never fights #dealStatusBadge (top-left) or #dealViewBadge (top-right) the way the old top-center solid graphic did. The warm border + glow is the one accent layered on top — the embers rise up from behind it, as if it were the source. */ .dd-fire-badge { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%) scale(0.6); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.9rem; border-radius: 999px; color: #fff; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; border-color: rgba(251, 146, 60, 0.5) !important; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.34), 0 0 20px -4px rgba(249, 115, 22, 0.65); will-change: transform, opacity; animation: ddFireBadge 2.4s cubic-bezier(0.22,1,0.36,1) forwards; } .dd-fire-badge i { color: #fb923c; } .dd-fire-ember { position: absolute; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fde68a, #f97316 60%, transparent 72%); will-change: transform, opacity; animation: ddEmberRise 1.5s ease-out forwards; } @keyframes ddFireGlow { 0% { opacity: 0; } 16% { opacity: 1; } 70% { opacity: 0.65; } 100% { opacity: 0; } } @keyframes ddFireBadge { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 16% { opacity: 1; transform: translateX(-50%) scale(1.06); } 26% { transform: translateX(-50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-6px); } } @keyframes ddEmberRise { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-64px) scale(0.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dd-fire-fx, .dd-fire-badge, .dd-fire-ember { display: none !important; } } /* ===================================================================== MOBILE SALES-PITCH POLISH — pricing + CTA lead (dd-col-sidebar is already order:-1), big thumb-friendly buttons, calmer card rhythm, a bolder price, and clean clearance above the sticky offer bar. ===================================================================== */ @media (max-width: 1023px) { /* The mobile price size / card radius / card padding that used to be restated here are all set unconditionally by the premium pass at the foot of the file (its padding is deliberately breakpoint-aware, because the price band cancels it with a negative margin and the two numbers have to agree). Deleted — they could not win. */ body.public-body .pricing-primary-cta, body.public-body #viewAllMediaBtn, body.public-body .pricing-secondary-cta, body.public-body #propertyContent button[onclick="saveDealPdf()"], body.public-body .investor-summary-primary, body.public-body .investor-summary-secondary, body.public-body #dealCashBuyersCard a[href^="/join"] { min-height: 52px !important; padding-top: 0.95rem !important; padding-bottom: 0.95rem !important; font-size: 1.02rem !important; } body.public-body #mobileOfferBar button { min-height: 48px !important; font-size: 0.9rem !important; } #propertyContent .bg-white.rounded-2xl.shadow-lg.p-6, #dealFaqSection { padding: 1.2rem !important; } #propertyContent .grid.lg\:grid-cols-3 { gap: 1.1rem !important; } body.public-body #propertyContent .bg-white.rounded-2xl.shadow-lg.p-6 { box-shadow: 0 12px 28px -18px rgba(15,23,42,0.28) !important; } body.public-body.has-mobile-offer-bar { padding-bottom: 92px !important; } } @media (max-width: 640px) { #propertyTitle { font-size: 1.6rem !important; line-height: 1.15 !important; } #propertyContent h2.font-bold.text-primary, #propertyContent h3.font-bold.text-primary { border-bottom-width: 2px; } .dd-fire-badge { bottom: 8px; font-size: 0.68rem; } } /* ── Cohesion touch-ups ── */ /* FAQ: tint the section shell so the white Q&A cards read as raised (mirrors the homepage where faq items sit on a soft band). */ #dealFaqSection { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important; border: 1px solid rgba(226, 232, 240, 0.9); } /* The underline treatment is for left-aligned SECTION headers only — exclude centered card headings (e.g. the Cash Buyers card). */ #dealCashBuyersCard h3.font-bold.text-primary, .text-center > h3.font-bold.text-primary { display: block !important; border-bottom: 0 !important; padding-bottom: 0 !important; } /* ── Mobile bottom-bar + floating-corner de-collision ── */ /* The offer bar's three flex children are all shrink-0, so on a narrow phone the row overflowed and clipped the amber "Walkthrough" label to "…ugh". Tighten the gaps/padding + shrink the button text so price + both buttons fit. The right reserve is NOT set here any more — deal-detail.css owns the chat-bubble gutter at one value for every width below the desktop pill. This block used to narrow it to 3.9rem, which is 62px against a GHL bubble that reaches ~80px in from the right: measured at 375 and 480, the red offer button rendered UNDERNEATH the bubble. Two rules and an inline style each held a different number for the same clearance, which is how one of them ends up wrong. */ @media (max-width: 480px) { body.public-body #mobileOfferBar > div { gap: 0.5rem !important; padding-left: 0.85rem !important; } body.public-body #mobileOfferBar button { padding-left: 0.72rem !important; padding-right: 0.72rem !important; font-size: 0.82rem !important; gap: 0.3rem !important; } body.public-body #mobileOfferBarPrice { font-size: 1rem !important; } } /* The "Get First Look" buyer bubble + its expanded prompt are fixed bottom-LEFT at z-45; the offer bar is fixed full-width at z-40 — so the bubble landed on top of the bar. When the offer bar is present, lift the bubble/prompt clear above it. (public-ui.css loads after this block, so override needs the body-prefixed selector + !important.) */ body.public-body.has-mobile-offer-bar .buyer-stay-bubble, body.public-body.has-mobile-offer-bar .buyer-stay-connected { bottom: calc(var(--public-floating-inset-y, 1rem) + 6rem) !important; } /* ===================================================================== EMAIL-MATCH RESTYLE 2026-07-12 — align the deal page's section language with the premium deal-blast email (lib/deal-blast-email.js): • navy section-header underline PLUS a short gold hairline accent (mirrors the email's navy "PROPERTY DETAILS" bar + gold rule); • ray-textured navy bands (Contact Team + Cash Buyers) with a gold underglow — the email's navy ray card + newsletter gold-glow card; • a subtle dark-ray wash on the Investor Summary light panel; • a gold top-rail on the gallery/hero frame (the email card's gold ray bar at the top edge). Appended LAST so it wins the cascade. ADDITIVE ONLY — no ids, classes, JS hooks, onclicks, or data-attributes changed; no markup touched. Every ray background-image carries a solid background-color fallback. Palette: navy #0b1f3d / #06101f / #12294a, gold #e7c277 / #f59e0b. ===================================================================== */ /* --- Section headers: ONE soft silver rule. --------------------------- This was a stacked pair — a navy `border-bottom` running the width of the heading with a short gold hairline sitting on its left edge — which read as two bars of different colours rather than one underline. It is now a single hairline: the navy border goes transparent (kept, not removed, so the 3px it occupies does not collapse and shift every section heading up) and the ::after becomes the whole rule, in a soft silver that fades out to the right so it reads as a finish rather than a divider. No glow — the gold needed one to hold against navy; silver on white does not, and a glow at this weight just looks smudged. */ body.public-body #propertyContent h2.font-bold.text-primary, body.public-body #propertyContent h3.font-bold.text-primary, body.public-body #dealFaqSection h2.font-bold.text-primary { position: relative; border-bottom-color: transparent !important; } body.public-body #propertyContent h2.font-bold.text-primary::after, body.public-body #propertyContent h3.font-bold.text-primary::after, body.public-body #dealFaqSection h2.font-bold.text-primary::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #b6c2d1 0%, #cbd5e1 45%, rgba(203, 213, 225, 0) 100%); } /* Centered card headings keep the plain navy rule they already had: they sit on tinted/dark cards where this silver would all but disappear, and a rule that fades to the right is wrong under centered text anyway. */ body.public-body #dealCashBuyersCard h3.font-bold.text-primary, body.public-body .text-center > h3.font-bold.text-primary { border-bottom-color: #1e3a5f !important; } body.public-body #dealCashBuyersCard h3.font-bold.text-primary::after, body.public-body .text-center > h3.font-bold.text-primary::after { display: none !important; } /* --- Gallery / hero frame: gold ray top-rail (email's gold bar). --- */ body.public-body .deal-image-frame { position: relative; } body.public-body .deal-image-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6; background: linear-gradient(90deg, #c9a24f 0%, #e7c277 38%, #f4e0ab 62%, #e7c277 100%); pointer-events: none; } /* --- Contact Team: navy ray band + subtle gold underglow. The solid background-color is the fallback under the ray PNG. --- */ body.public-body #propertyContent .bg-primary.rounded-2xl.shadow-lg.p-6.text-white { background-color: #0b1f3d !important; background-image: url('https://ncdealdepot.com/branding/rayeffect-mw-fade.webp'), radial-gradient(circle 220px at 92% -10%, rgba(125, 211, 252, 0.16), transparent 60%), linear-gradient(135deg, #06101f 0%, #0b1f3d 60%, #12294a 100%) !important; background-position: center bottom, center, center !important; background-size: cover, auto, auto !important; background-repeat: no-repeat, no-repeat, no-repeat !important; box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.5), 0 0 26px 2px rgba(231, 194, 119, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } /* --- Cash Buyers "join" card → the email's navy newsletter band: ray texture, gold hairline border, gold underglow. Inner text flips to light so it reads on navy. The red Join CTA (styled by the shared button skin above) pops against the navy. --- */ /* 2 IDs (#propertyContent #dealCashBuyersCard) so the navy band beats the generic "#propertyContent .bg-white.rounded-2xl.shadow-lg.p-6" card rule (which otherwise leaves this card white while the light text applies). */ body.public-body #propertyContent #dealCashBuyersCard { background-color: #0b1f3d !important; background-image: url('https://ncdealdepot.com/branding/rayeffect-mw-fade.webp'), linear-gradient(135deg, #06101f 0%, #0b1f3d 60%, #12294a 100%) !important; background-position: center bottom, center !important; background-size: cover, auto !important; background-repeat: no-repeat, no-repeat !important; border: 1px solid rgba(231, 194, 119, 0.35) !important; box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.45), 0 0 26px 2px rgba(231, 194, 119, 0.5) !important; } body.public-body #dealCashBuyersCard .text-secondary, body.public-body #dealCashBuyersCard .text-secondary i { color: #e7c277 !important; stroke: #e7c277 !important; } body.public-body #dealCashBuyersCard h3.text-primary { color: #ffffff !important; } body.public-body #dealCashBuyersCard p.text-slate-600 { color: #c9d4e4 !important; } body.public-body #dealCashBuyersCard .text-slate-500 { color: #aebbd0 !important; } body.public-body #dealCashBuyersCard .text-emerald-600 { color: #34d399 !important; stroke: #34d399 !important; } /* --- Investor Summary: subtle dark-ray wash on a light panel (the email's rayeffect-m-black over light). Solid white fallback. --- */ body.public-body #investorSummarySection { background-color: #ffffff !important; background-image: url('https://ncdealdepot.com/branding/rayeffect-m-black.webp'), radial-gradient(circle at top right, rgba(30, 58, 95, 0.04), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)) !important; background-position: right top, center, center !important; background-size: 62% auto, auto, auto !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-blend-mode: multiply, normal, normal !important; box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; } /* ===================================================================== EMAIL-MATCH RESTYLE 2026-07-13 (batch 2) — three more surfaces aligned to the premium deal-blast email idiom. Appended LAST so it wins the cascade. ADDITIVE ONLY — no ids, classes, JS hooks, onclicks, or data-attributes changed; no markup touched. Every ray background-image carries a solid background-color fallback. 1) Pricing sidebar card → light premium surface WITH a very subtle dark-ray wash (rayeffect-m-black, multiply, small, top-right), a gold hairline top-rail, and a soft slate + gold underglow. 2) Important Dates boxes → the shared page-CTA button skin (glossy per-hue gradient, glowing left edge, rounded, hover lift). 3) Hero title wrapper → an uppercase gold eyebrow above the H1. ===================================================================== */ /* --- 1) Pricing sidebar card: the "clean ALL-WHITE marketplace card" surface + rail rules that lived here are deleted. Every property they set (surface, border, shadow, overflow, rail colour, rail height) is restated by the premium pass at the foot of the file, so they only ever lost the cascade. `position: relative` — the one declaration the later pass does NOT repeat, and the thing the absolutely-positioned rail is anchored to — is kept on the base `.pricing-sidebar-card` rule near the top of this sheet. --- */ /* Financial-metric rows: a faint warm (gold) wash for email cohesion — still light and readable; existing :hover lift is left intact. */ body.public-body #propertyContent .financial-metric-card { background: radial-gradient(circle at top right, rgba(231, 194, 119, 0.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 18px -8px rgba(15, 23, 42, 0.10) !important; } /* --- 2) Important Dates CTA-skin pass: DELETED — see deal-detail.css section 17, the timeline's one owner. --- */ /* --- 3) Hero eyebrow: DELETED, not repaired. It injected the text "Investment Property" via ::before on `.deal-header-title-wrap > div > .min-w-0`. That class has no markup left — the hero was restructured into .deal-hero-meta / .deal-hero-headline and the wrapper went with it — so the rule had stopped painting anything. Re-pointing it at .deal-hero-headline would have been worse than leaving it dead: `.deal-kind-chip` in .deal-hero-meta already carries the words "Investment Property" as real markup one line above, so a repaired eyebrow would print the label twice. The chip is the surviving version — it is readable by a screen reader, which CSS `content` is not reliably. --- */