/* GENERATED by scripts/build-hope-skin.mjs from public-ui.css - do not edit. */ /* No @import for the Outfit webfont. Every surface that loads this file — all 20 static pages and the worker's SEO shell — already carries the identical in its own , where the browser finds it in the first bytes of the document. An @import here is discovered only AFTER this stylesheet has downloaded and parsed, so it added a second, later, render-blocking edge to the critical path for a font already in flight. (offline.html is the one page that never loads this file at all — it is fully self-contained, on purpose, because it is served by the service worker when nothing else can be.) */ /* ============================================================ JHB DESIGN TOKENS Single source of truth for the Joe Homebuyer visual system. Edit colors here, in tailwind-config.js, and in franchise.config.json (build-script driven) to keep all three in sync. CSS custom properties are referenced throughout public-ui.css and can be used inline anywhere on the site. ============================================================ */ :root { /* Brand colors */ --brand-navy: #13436b; --brand-navy-deep: #0b1f3d; --brand-navy-soft: #13436b; --brand-red: #b11d29; --brand-red-deep: #8f0f1c; --brand-red-soft: #b11d29; --brand-paper: #eef3f9; /* Surface tokens (for cards / panels / nav) */ --surface-0: #ffffff; --surface-1: #ffffff; --surface-2: #eef3f9; --surface-3: #eef3f9; /* Ink (text) tokens */ --ink-strong: #0f1c33; --ink-body: #13436b; --ink-muted: #36598d; --ink-faint: #88a0c2; /* Border tokens */ --line-strong: rgba(136, 160, 194, 0.55); --line: rgba(136, 160, 194, 0.32); --line-soft: rgba(136, 160, 194, 0.18); /* Radius scale */ --radius-xs: 6px; --radius-sm: 12px; --radius-md: 12px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 16px; /* Shadow scale (cards / hovers / heros) */ --shadow-sm: 0 1px 2px rgba(11, 31, 61, 0.04), 0 6px 14px -8px rgba(11, 31, 61, 0.08); --shadow-md: 0 1px 2px rgba(11, 31, 61, 0.04), 0 14px 28px -10px rgba(11, 31, 61, 0.12); --shadow-lg: 0 1px 2px rgba(11, 31, 61, 0.04), 0 22px 44px -14px rgba(11, 31, 61, 0.16); --shadow-hover: 0 1px 2px rgba(11, 31, 61, 0.04), 0 28px 52px -14px rgba(11, 31, 61, 0.18); /* Brand-tinted shadows for primary/secondary buttons */ --shadow-red: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 28px -8px rgba(177, 29, 41, 0.45); --shadow-navy: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 14px 28px -8px rgba(11, 31, 61, 0.45); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 140ms var(--ease-out); --transition-base: 220ms var(--ease-out); /* Legacy public-* tokens kept for back-compat with existing rules below */ --public-bg-top: #ffffff; --public-bg-bottom: #eef3f9; --public-ink: var(--ink-strong); --public-muted: var(--ink-body); --public-line: var(--line); --public-glass: rgba(255, 255, 255, 0.82); --public-glass-strong: rgba(255, 255, 255, 0.92); --public-shadow: var(--shadow-lg); --public-shadow-soft: var(--shadow-md); --public-nav-shadow: 0 18px 42px rgba(11, 31, 61, 0.08); --public-hero-shadow: 0 34px 70px rgba(11, 31, 61, 0.15); --public-radius-xl: 16px; --public-radius-lg: 16px; --public-floating-inset-x: clamp(0.95rem, 1.35vw, 1.35rem); --public-floating-inset-y: clamp(0.95rem, 1.35vw, 1.2rem); } /* ============================================================ JHB UTILITY CLASSES — opt-in, theme-cohesive primitives. New components should use these; older components still work via legacy tokens above. ============================================================ */ /* Eyebrow label — small uppercase tracker above headlines */ .jhb-eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-red); } /* Display headline — Outfit, tight tracking, strong weight */ .jhb-display { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--brand-navy); letter-spacing: -0.024em; line-height: 1.08; } /* Card primitive — unified surface for all cards across the site */ .jhb-card { background: var(--surface-0); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .jhb-card-hover:hover, .jhb-card.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line); } /* Top accent stripe (red→navy) for hero cards */ .jhb-accent-bar::before { content: ''; display: block; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--brand-red), var(--brand-navy)); } /* Focus ring — applied automatically to interactive elements */ :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; border-radius: 4px; } body.public-body { color: var(--public-ink); background: radial-gradient(circle at top left, rgba(136, 160, 194, 0.12), transparent 24%), radial-gradient(circle at top right, rgba(177, 29, 41, 0.1), transparent 22%), linear-gradient(180deg, var(--public-bg-top) 0%, var(--public-bg-bottom) 100%); } body.public-body nav.site-nav { /* Opaque instead of translucent+blur: the fixed nav re-rasterized its backdrop every scroll frame, the page's #1 scroll-jank source. */ background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(223, 232, 243, 0.72); box-shadow: var(--public-nav-shadow); } body.public-body .site-brand { gap: 0.78rem; text-decoration: none; } body.public-body .site-logo-badge { position: relative; isolation: isolate; overflow: hidden; width: 2.72rem; height: 2.72rem; border-radius: 12px; background: linear-gradient(160deg, #0b1f3d 0%, #13436b 64%, #36598d 100%); box-shadow: 0 16px 28px rgba(11, 31, 61, 0.18); transition: transform 160ms ease, box-shadow 160ms ease; } body.public-body .site-brand:hover .site-logo-badge { transform: translateY(-1px); box-shadow: 0 20px 32px rgba(11, 31, 61, 0.22); } body.public-body .site-logo-badge::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.14); } body.public-body .site-logo-badge::after { content: ''; position: absolute; inset: -12px auto auto -10px; width: 36px; height: 36px; border-radius: 9999px; background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 48%, transparent 74%); } body.public-body .site-logo-house { position: relative; z-index: 1; width: 1.34rem; height: 1.34rem; color: #ffffff; } body.public-body .site-wordmark { color: #13436b; font-size: clamp(1.58rem, 1.22rem + 0.78vw, 1.88rem); font-family: "Outfit", "Segoe UI", Arial, sans-serif; font-weight: 700; letter-spacing: -0.05em; line-height: 1; text-rendering: optimizeLegibility; } body.public-body .site-nav-link { position: relative; color: #13436b; transition: color 160ms ease, transform 160ms ease; } body.public-body .site-nav-link:hover { color: #0f1c33; transform: translateY(-1px); } body.public-body .site-nav-link-active { color: #0b1f3d; } body.public-body .site-nav-link-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.5rem; height: 2px; border-radius: 9999px; background: linear-gradient(90deg, #13436b, #b11d29); } body.public-body .site-mobile-panel { background: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(223, 232, 243, 0.82); box-shadow: 0 18px 42px rgba(11, 31, 61, 0.08); backdrop-filter: blur(14px); } body.public-body .site-mobile-link { border-radius: 12px; transition: background-color 160ms ease, color 160ms ease; } body.public-body .site-mobile-link:hover { background: rgba(238, 243, 249, 0.92); } body.public-body .site-hero { position: relative; overflow: hidden; background: radial-gradient(circle at top right, rgba(255, 255, 255,0.26), transparent 24%), linear-gradient(180deg, rgba(255, 255, 255,0.68) 0%, rgba(255, 255, 255,0.38) 100%); } body.public-body .site-hero::before { content: ''; position: absolute; inset: 5rem auto auto -5rem; width: 15rem; height: 15rem; border-radius: 9999px; background: rgba(19, 67, 107, 0.08); filter: blur(6px); } body.public-body .site-hero::after { content: ''; position: absolute; right: -4rem; bottom: -5rem; width: 17rem; height: 17rem; border-radius: 9999px; background: rgba(177, 29, 41, 0.12); filter: blur(10px); } body.public-body .hero-pattern { background-image: linear-gradient(180deg, rgba(19, 67, 107, 0.028) 0%, transparent 42%); } body.public-body .site-header-logo { height: 44px; width: auto; max-width: 180px; display: block; } @media (min-width: 768px) { body.public-body .site-header-logo { height: 48px; } } body.public-body .site-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255,0.55); background: rgba(255, 255, 255, 0.72); box-shadow: 0 14px 30px rgba(11, 31, 61, 0.08); backdrop-filter: blur(12px); } body.public-body .site-hero-card { position: relative; overflow: hidden; border-radius: var(--public-radius-xl); border: 1px solid rgba(255, 255, 255,0.76); box-shadow: var(--public-hero-shadow); } body.public-body .site-hero-card::before { content: ''; position: absolute; inset: auto auto -2rem -2rem; width: 9rem; height: 9rem; border-radius: 9999px; background: rgba(255, 255, 255,0.18); z-index: 0; } body.public-body .site-hero-stat { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255,0.82); box-shadow: 0 22px 42px rgba(11, 31, 61, 0.12); backdrop-filter: blur(14px); } body.public-body .btn-primary, body.public-body .btn-secondary, body.public-body .site-button-primary, body.public-body .site-button-secondary { position: relative; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255,0.15); letter-spacing: 0.01em; transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-fast); } body.public-body .btn-primary, body.public-body .site-button-primary { background: linear-gradient(160deg, var(--brand-red-soft) 0%, var(--brand-red) 40%, var(--brand-red-deep) 100%); text-shadow: 0 1px 2px rgba(11, 31, 61,0.15); box-shadow: var(--shadow-red); } body.public-body .btn-secondary, body.public-body .site-button-secondary { background: linear-gradient(160deg, var(--brand-navy-soft) 0%, var(--brand-navy) 40%, var(--brand-navy-deep) 100%); text-shadow: 0 1px 2px rgba(11, 31, 61,0.18); box-shadow: var(--shadow-navy); } body.public-body .btn-primary:hover, body.public-body .btn-secondary:hover, body.public-body .site-button-primary:hover, body.public-body .site-button-secondary:hover { transform: translateY(-2px); filter: brightness(1.05); } body.public-body .btn-primary:active, body.public-body .btn-secondary:active, body.public-body .site-button-primary:active, body.public-body .site-button-secondary:active { transform: translateY(0); filter: brightness(0.98); } body.public-body .btn-primary::before, body.public-body .btn-secondary::before, body.public-body .site-button-primary::before, body.public-body .site-button-secondary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255,0.2) 0%, transparent 50%, rgba(0, 0, 0,0.06) 100%); pointer-events: none; } body.public-body .card-hover, body.public-body .deal-card, body.public-body .public-card-hover { border: 1px solid rgba(255, 255, 255,0.74); box-shadow: var(--public-shadow-soft); } body.public-body .card-hover, body.public-body .public-card-hover { background: linear-gradient(180deg, rgba(255, 255, 255,0.95), rgba(255, 255, 255,0.82)); } body.public-body .card-hover:hover, body.public-body .deal-card:hover, body.public-body .public-card-hover:hover { transform: translateY(-5px); box-shadow: var(--public-shadow); } body.public-body .deal-card { background: var(--surface-0); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } body.public-body .deal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--line); } body.public-body .deal-card .property-image { transform: scale(1.01); transition: transform 220ms ease, filter 220ms ease; filter: saturate(1.02) contrast(1.02); } body.public-body .deal-card:hover .property-image { transform: scale(1.04); filter: saturate(1.06) contrast(1.04); } body.public-body .deal-card .status-badge { border: 1px solid rgba(255, 255, 255,0.22); box-shadow: 0 14px 26px rgba(11, 31, 61, 0.18); } body.public-body .deal-card .grid.grid-cols-3 > div { border: 1px solid rgba(223, 232, 243, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255,0.96), rgba(238, 243, 249,0.88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.7); } body.public-body .deal-type-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; background: #13436b; color: #ffffff; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; box-shadow: 0 10px 20px rgba(11, 31, 61, 0.18); } body.public-body .deal-address-lock { display: block; margin-top: 0.75rem; } body.public-body .deal-address-lock-detail { margin-top: 0; display: inline-flex; flex-direction: column; align-items: center; width: fit-content; max-width: 100%; } body.public-body .deal-address-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; line-height: 1.45; } body.public-body .deal-street-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.32rem; min-height: 1.4rem; min-width: 0; } body.public-body .deal-street-number, body.public-body .deal-street-name { display: inline-flex; align-items: center; } body.public-body .deal-street-number { white-space: nowrap; color: #13436b; } body.public-body .street-blur { filter: blur(4px); opacity: 0.95; user-select: none; pointer-events: none; transition: filter 220ms ease, color 220ms ease; } body.public-body .street-blur.unlocked, body.public-body .deal-address-lock.is-unlocked .street-blur { filter: none; user-select: text; pointer-events: auto; } body.public-body .deal-address-inline-badge { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 8px; border: 1px solid rgba(177, 29, 41, 0.18); background: linear-gradient(135deg, rgba(177, 29, 41, 0.14), rgba(255, 255, 255, 0.96)); padding: 0.38rem 0.78rem; font-size: 0.71rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #b11d29; box-shadow: 0 12px 24px rgba(177, 29, 41, 0.12); cursor: pointer; } body.public-body .deal-address-lock.is-unlocked .deal-address-inline-badge { display: none; } body.public-body .deal-locality { color: #13436b; font-weight: 600; white-space: nowrap; } body.public-body .deal-address-meta { margin-top: 0.7rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.85rem; padding: 0.9rem 1rem; border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.9); background: linear-gradient(180deg, rgba(238, 243, 249,0.95), rgba(255, 255, 255,0.92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.72); } body.public-body .deal-address-note { flex: 1 1 18rem; font-size: 0.82rem; line-height: 1.45; color: #36598d; } body.public-body .deal-address-actions { display: inline-flex; flex: 0 0 auto; align-items: center; } body.public-body .deal-address-chip, body.public-body .buyer-secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border-radius: 12px; border: 1px solid rgba(19, 67, 107, 0.16); background: linear-gradient(135deg, rgba(255, 255, 255,0.96), rgba(238, 243, 249,0.92)); padding: 0.88rem 1.2rem; font-size: 0.88rem; font-weight: 800; color: #13436b; box-shadow: 0 16px 30px rgba(11, 31, 61, 0.1); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease; cursor: pointer; } body.public-body .deal-address-chip:hover, body.public-body .buyer-secondary-cta:hover { transform: translateY(-1px); border-color: rgba(177, 29, 41, 0.2); box-shadow: 0 20px 34px rgba(11, 31, 61, 0.14); } body.public-body .deal-address-lock.is-unlocked .deal-address-chip { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.18); color: #047857; } body.public-body .deal-address-lock-compact { margin-top: 0; } body.public-body .deal-address-lock-compact .deal-address-line { gap: 0.4rem; } body.public-body .deal-address-lock-compact .deal-locality { font-weight: 500; white-space: normal; } body.public-body .deal-location-lock-shell { background: linear-gradient(180deg, rgba(223, 232, 243, 0.22), rgba(255, 255, 255,0.12)); } /* Locked-map backdrop — was a CSS-gradient illusion. Now the JS embeds a real Google Maps iframe at city-level zoom (no street address) and we hard-blur it here so the map reads as authentic Google Maps tiles without ever revealing the property location. The .deal-location-lock-map selector is kept as a fallback for any caller that hasn't migrated. */ body.public-body .deal-location-lock-iframe { border: 0; pointer-events: none; /* Oversize the iframe + translate it back so the soft blur edges fall outside the visible frame — no gray fringe around the blurred tiles. */ width: calc(100% + 80px); height: calc(100% + 80px); transform: translate(-40px, -40px); filter: blur(8px) saturate(1.18) contrast(1.04); -webkit-filter: blur(8px) saturate(1.18) contrast(1.04); will-change: transform; } body.public-body .deal-location-lock-map { background: radial-gradient(circle at 30% 25%, rgba(223, 232, 243, 0.6), transparent 55%), radial-gradient(circle at 75% 70%, rgba(68, 215, 146, 0.5), transparent 55%), linear-gradient(135deg, rgba(238, 243, 249, 0.95), rgba(230, 248, 239, 0.95)); } body.public-body .deal-location-lock-overlay { background: radial-gradient(circle at center, rgba(255, 255, 255,0.04), rgba(255, 255, 255,0.14) 70%, rgba(255, 255, 255,0.24) 100%), linear-gradient(180deg, rgba(255, 255, 255,0.08), rgba(238, 243, 249,0.18)); backdrop-filter: blur(2px) saturate(1.05); -webkit-backdrop-filter: blur(2px) saturate(1.05); pointer-events: none; } body.public-body .deal-location-lock-content { min-height: 100%; } body.public-body .deal-location-lock-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 12px; border: 1px solid rgba(19, 67, 107, 0.12); background: rgba(255, 255, 255,0.78); color: #13436b; box-shadow: 0 16px 32px rgba(11, 31, 61, 0.1); } body.public-body .deal-location-lock-card { width: min(100%, 34rem); border-radius: 16px; border: 1px solid rgba(255, 255, 255,0.78); background: radial-gradient(circle at top right, rgba(136, 160, 194, 0.10), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255,0.92) 0%, rgba(238, 243, 249,0.86) 100%); box-shadow: 0 24px 50px rgba(11, 31, 61, 0.16), inset 0 1px 0 rgba(255, 255, 255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1rem; } body.public-body .deal-location-lock-card .deal-address-meta { justify-content: center; text-align: center; background: rgba(255, 255, 255,0.62); } body.public-body .deal-location-lock-card .deal-address-note { flex-basis: 100%; } body.public-body .deal-location-lock-card .deal-address-actions { width: 100%; justify-content: center; } /* Unlock CTA chip — premium navy gradient (matches View Full Address / View All Photos / RSVP / Visit Site CTA family). Adds a sky map-pin icon via ::before and a shimmer sweep on hover. */ body.public-body .deal-location-lock-card .deal-address-chip { position: relative; overflow: hidden; isolation: isolate; min-width: 14rem; padding: 0.75rem 1.25rem; border-radius: 12px; border: 1px solid rgba(136, 160, 194, 0.32) !important; background: linear-gradient(135deg, #0b1f3d 0%, #13436b 50%, #13436b 100%) !important; color: #ffffff !important; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 16px 32px rgba(11, 31, 61, 0.28), 0 0 0 1px rgba(255, 255, 255,0.06) inset, inset 0 1px 0 rgba(255, 255, 255,0.16) !important; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease; } body.public-body .deal-location-lock-card .deal-address-chip::before { content: ''; width: 1.05rem; height: 1.05rem; margin-right: 0.55rem; background-color: #88a0c2; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; flex-shrink: 0; z-index: 1; } body.public-body .deal-location-lock-card .deal-address-chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(136, 160, 194, 0.20) 50%, transparent 65%); transform: translateX(-100%); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 0; } body.public-body .deal-location-lock-card .deal-address-chip [data-address-chip-label] { position: relative; z-index: 1; } body.public-body .deal-location-lock-card .deal-address-chip:hover { transform: translateY(-1px); border-color: rgba(136, 160, 194, 0.65) !important; background: linear-gradient(135deg, #0b1f3d 0%, #0b1f3d 50%, #13436b 100%) !important; box-shadow: 0 24px 44px rgba(11, 31, 61, 0.40), 0 0 0 1px rgba(136, 160, 194, 0.22) inset, inset 0 1px 0 rgba(255, 255, 255,0.20) !important; } body.public-body .deal-location-lock-card .deal-address-chip:hover::after { transform: translateX(100%); } body.public-body .deal-address-lock-detail .deal-address-line { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; width: fit-content; max-width: 100%; font-size: 1.18rem; line-height: 1.35; text-align: center; } body.public-body .deal-address-lock-detail .deal-address-inline-badge { order: 3; margin-top: 0; padding: 0.3rem 0.72rem; font-size: 0.68rem; line-height: 1; } body.public-body .deal-address-lock-detail .deal-address-meta { margin-top: 0.5rem; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 0.7rem; justify-content: center; text-align: center; } body.public-body .deal-address-lock-detail .deal-street-wrap, body.public-body .deal-address-lock-detail .deal-locality { font-size: 1.18rem; } body.public-body .deal-address-lock-detail .deal-address-note { max-width: 44rem; flex-basis: 100%; text-align: center; } body.public-body .deal-address-lock-detail .deal-address-actions { justify-content: center; } body.public-body .deal-address-lock-detail .deal-address-chip { padding: 0.8rem 1.1rem; } body.public-body .buyer-unlock-point { display: flex; gap: 0.75rem; align-items: flex-start; } body.public-body .buyer-unlock-point-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.9); color: #13436b; box-shadow: 0 10px 20px rgba(11, 31, 61, 0.08); } body.public-body .buyer-identity-dock { position: fixed; top: 5.9rem; right: 1rem; z-index: 45; display: inline-flex; align-items: center; gap: 0.8rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.9); padding: 0.72rem 0.9rem; box-shadow: 0 22px 44px rgba(11, 31, 61, 0.12); backdrop-filter: blur(18px); } body.public-body .buyer-identity-dock.hidden, body.public-body .buyer-stay-connected.hidden, body.public-body .buyer-stay-bubble.hidden, body.public-body .buyer-profile-bubble.hidden { display: none !important; } body.public-body .buyer-identity-dock, body.public-body .buyer-stay-connected, body.public-body .buyer-stay-bubble, body.public-body .buyer-profile-bubble, body.public-body .public-chat-launcher { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease, border-color 160ms ease; will-change: transform, opacity; } body.public-body .buyer-floating-enter, body.public-body .buyer-floating-exit { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); pointer-events: none; } body.public-body .buyer-identity-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: linear-gradient(135deg, #0b1f3d 0%, #13436b 100%); color: #ffffff; box-shadow: 0 14px 24px rgba(11, 31, 61, 0.24); } body.public-body .buyer-identity-copy { display: flex; flex-direction: column; align-items: flex-start; } body.public-body .buyer-identity-greeting { font-size: 0.92rem; font-weight: 800; color: #0f1c33; } body.public-body .buyer-identity-email { font-size: 0.74rem; color: #36598d; } body.public-body .buyer-identity-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(238, 243, 249, 0.92); color: #36598d; flex-shrink: 0; transition: background-color 160ms ease, color 160ms ease; } body.public-body .buyer-identity-dismiss:hover { background: rgba(223, 232, 243, 0.96); color: #13436b; } body.public-body .buyer-stay-connected { position: fixed; left: var(--public-floating-inset-x); right: auto; bottom: var(--public-floating-inset-y); z-index: 45; width: min(100%, 22rem); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.94); padding: 1.1rem 1.1rem 1rem; box-shadow: 0 28px 50px rgba(11, 31, 61, 0.15); backdrop-filter: blur(18px); } body.public-body .buyer-stay-dismiss { position: absolute; top: 0.7rem; right: 0.7rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(238, 243, 249, 0.94); color: #36598d; } body.public-body .buyer-stay-bubble { position: fixed; left: var(--public-floating-inset-x); right: auto; bottom: var(--public-floating-inset-y); z-index: 45; display: inline-flex; align-items: center; gap: 0.7rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.95); padding: 0.82rem 0.98rem 0.82rem 0.9rem; min-height: 3.4rem; max-width: min(18rem, calc(50vw - var(--public-floating-inset-x) - 0.4rem)); box-shadow: 0 24px 42px rgba(11, 31, 61, 0.14); backdrop-filter: blur(18px); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.public-body .buyer-stay-bubble:hover { transform: translateY(-2px); border-color: rgba(177, 29, 41, 0.2); box-shadow: 0 28px 46px rgba(11, 31, 61, 0.16); } body.public-body .buyer-stay-bubble-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: linear-gradient(135deg, #b11d29 0%, #d93240 100%); color: #ffffff; box-shadow: 0 12px 24px rgba(177, 29, 41, 0.2); flex-shrink: 0; } body.public-body .buyer-stay-bubble-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; } body.public-body .buyer-stay-bubble-title { font-size: 0.84rem; font-weight: 800; color: #0f1c33; line-height: 1.15; } body.public-body .buyer-stay-bubble-subtitle { font-size: 0.72rem; color: #36598d; min-height: 0; } body.public-body .buyer-stay-bubble-subtitle:empty { display: none; } body.public-body .public-chat-assistant { --public-chat-panel-bottom: 5.65rem; --public-chat-inset-x: var(--public-floating-inset-x); } body.public-body .public-chat-panel, body.public-body .public-chat-launcher { position: fixed; left: auto; right: var(--public-chat-inset-x); z-index: 47; } /* Coexist with the GoHighLevel Live Chat widget (fixed bottom-right, z-index 9999). When that widget is loaded (body.has-ghl-livechat), raise the custom AI Agent launcher + panel so they STACK ABOVE the GHL bubble instead of overlapping it. Bottom-left stays occupied by the buyer-stay bubble, so stacking on the right is the clean de-confliction. */ body.public-body.has-ghl-livechat .public-chat-launcher { bottom: calc(var(--public-floating-inset-y) + 4.9rem); } body.public-body.has-ghl-livechat .public-chat-assistant { --public-chat-panel-bottom: 10.55rem; } /* Same de-confliction for the deal page's sticky mobile offer bar. That bar is full-width at the bottom, so at its default inset the launcher sat directly on top of the "Submit an Offer" button — the single most important control on the page. Lift it clear, matching the buyer-stay bubble's lift on the left side. Higher specificity than the base rule, so it wins regardless of source order. */ body.public-body.has-mobile-offer-bar .public-chat-launcher { bottom: calc(var(--public-floating-inset-y) + 6rem); } body.public-body.has-mobile-offer-bar .public-chat-assistant { --public-chat-panel-bottom: 11.6rem; } /* Both at once: stack above the GHL bubble AND the offer bar. */ body.public-body.has-ghl-livechat.has-mobile-offer-bar .public-chat-launcher { bottom: calc(var(--public-floating-inset-y) + 10.9rem); } body.public-body .public-chat-panel.hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(18px, 18px, 0) scale(0.98); } body.public-body .public-chat-panel { bottom: var(--public-chat-panel-bottom); width: min(100%, 24rem); max-height: min(70vh, 40rem); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.86); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(238, 243, 249, 0.95)); box-shadow: 0 28px 60px rgba(11, 31, 61, 0.18); backdrop-filter: blur(20px); opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transform-origin: right bottom; transition: opacity 170ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear; will-change: transform, opacity; isolation: isolate; overscroll-behavior: contain; } body.public-body .public-chat-panel::before { content: ""; position: absolute; right: 1rem; bottom: 0.9rem; width: 7.5rem; height: 7.5rem; border-radius: 9999px; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.42) 0%, rgba(223, 232, 243, 0.18) 34%, rgba(255, 255, 255, 0) 72%); opacity: 0; transform: translate3d(1.1rem, 1.25rem, 0) scale(0.42); pointer-events: none; filter: blur(4px); z-index: 0; } body.public-body .public-chat-panel > * { position: relative; z-index: 1; } body.public-body .public-chat-panel.public-chat-panel-opening::before { animation: public-chat-genie-plume 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } body.public-body .public-chat-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; flex-shrink: 0; padding: 1rem 1rem 0.85rem; border-bottom: 1px solid rgba(223, 232, 243, 0.86); background: linear-gradient(135deg, rgba(11, 31, 61, 0.04), rgba(177, 29, 41, 0.05)); } @keyframes public-chat-genie-plume { 0% { opacity: 0; transform: translate3d(1.15rem, 1.45rem, 0) scale(0.38); } 24% { opacity: 0.38; transform: translate3d(0.45rem, 0.55rem, 0) scale(0.72); } 62% { opacity: 0.2; transform: translate3d(-0.4rem, -0.8rem, 0) scale(1.02); } 100% { opacity: 0; transform: translate3d(-0.9rem, -1.7rem, 0) scale(1.18); } } @media (prefers-reduced-motion: reduce) { /* The panel only. The LAUNCHER's transition is re-declared twice below this point, so a `transition: none` written here lost on source order and the launcher kept easing its hover lift under reduced motion. Its answer now sits after the last rule that sets it. */ body.public-body .public-chat-panel { transition: none; } body.public-body .public-chat-panel.public-chat-panel-opening::before { animation: none; } } body.public-body .public-chat-panel-eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #b11d29; } body.public-body .public-chat-panel-title { margin-top: 0.35rem; font-size: 1.05rem; font-weight: 800; color: #0b1f3d; } body.public-body .public-chat-panel-copy { margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.45; color: #36598d; max-width: 17.5rem; } body.public-body .public-chat-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(238, 243, 249, 0.92); color: #36598d; flex-shrink: 0; } body.public-body .public-chat-close:hover { background: rgba(223, 232, 243, 0.95); color: #13436b; } body.public-body .public-chat-message-stream { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.8rem; padding: 1rem; min-height: 0; max-height: 20.5rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.public-body .public-chat-message { display: flex; } body.public-body .public-chat-message-assistant { justify-content: flex-start; } body.public-body .public-chat-message-user { justify-content: flex-end; } body.public-body .public-chat-bubble { max-width: 92%; border-radius: 16px; padding: 0.82rem 0.9rem; box-shadow: 0 16px 28px rgba(11, 31, 61, 0.08); } body.public-body .public-chat-message-assistant .public-chat-bubble { border: 1px solid rgba(223, 232, 243, 0.9); background: rgba(255, 255, 255, 0.98); } body.public-body .public-chat-message-user .public-chat-bubble { border: 1px solid rgba(19, 67, 107, 0.12); background: linear-gradient(135deg, rgba(11, 31, 61, 0.08), rgba(54, 89, 141, 0.08)); } body.public-body .public-chat-message-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #88a0c2; } body.public-body .public-chat-message-copy { margin-top: 0.35rem; font-size: 0.88rem; line-height: 1.55; color: #0b1f3d; white-space: pre-wrap; word-break: break-word; } body.public-body .public-chat-message-time { margin-top: 0.38rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; color: #88a0c2; } body.public-body .public-chat-message-typing .public-chat-bubble { min-width: 4.25rem; } body.public-body .public-chat-typing-dots { display: inline-flex; align-items: center; gap: 0.32rem; margin-top: 0.35rem; min-height: 1.1rem; } body.public-body .public-chat-typing-dots span { width: 0.48rem; height: 0.48rem; border-radius: 9999px; background: rgba(54, 89, 141, 0.78); animation: public-chat-typing-pulse 1.05s infinite ease-in-out; } body.public-body .public-chat-typing-dots span:nth-child(2) { animation-delay: 0.14s; } body.public-body .public-chat-typing-dots span:nth-child(3) { animation-delay: 0.28s; } @keyframes public-chat-typing-pulse { 0%, 80%, 100% { opacity: 0.4; } 40% { opacity: 1; } } body.public-body .public-chat-actions, body.public-body .public-chat-quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } body.public-body .public-chat-actions { margin-top: 0.7rem; } body.public-body .public-chat-quick-actions { padding: 0 1rem 0.95rem; flex-shrink: 0; } body.public-body .public-chat-action-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; border-radius: 12px; border: 1px solid rgba(223, 232, 243, 0.92); background: rgba(255, 255, 255, 0.96); padding: 0.62rem 0.88rem; font-size: 0.78rem; font-weight: 700; color: #13436b; box-shadow: 0 10px 20px rgba(11, 31, 61, 0.06); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.public-body .public-chat-action-chip:hover { transform: translateY(-1px); border-color: rgba(19, 67, 107, 0.18); box-shadow: 0 14px 22px rgba(11, 31, 61, 0.09); } body.public-body .public-chat-action-chip-accent { color: #b11d29; border-color: rgba(177, 29, 41, 0.16); } body.public-body .public-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; padding: 0 1rem 1rem; align-items: end; flex-shrink: 0; } body.public-body .public-chat-input { width: 100%; border-radius: 12px; border: 1px solid rgba(223, 232, 243, 0.94); background: rgba(255, 255, 255, 0.96); padding: 0.85rem 0.95rem; font-size: 0.88rem; color: #0f1c33; outline: none; min-height: 3rem; max-height: 8rem; resize: none; overflow-y: auto; line-height: 1.45; transition: border-color 160ms ease, box-shadow 160ms ease; } body.public-body .public-chat-input:focus { border-color: rgba(19, 67, 107, 0.4); box-shadow: 0 0 0 4px rgba(11, 31, 61, 0.08); } body.public-body .public-chat-send { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 0.85rem 1rem; font-size: 0.82rem; font-weight: 800; color: #ffffff; background: linear-gradient(135deg, #0b1f3d 0%, #13436b 52%, #36598d 100%); box-shadow: 0 18px 30px rgba(11, 31, 61, 0.2); } body.public-body .public-chat-send:hover { transform: translateY(-1px); } body.public-body .public-chat-send:disabled, body.public-body .public-chat-input:disabled { opacity: 0.72; cursor: not-allowed; } body.public-body .public-chat-launcher { bottom: var(--public-floating-inset-y); position: fixed; left: auto; right: var(--public-chat-inset-x); display: inline-flex; align-items: center; gap: 0.72rem; min-height: 3.4rem; max-width: min(18rem, calc(50vw - var(--public-chat-inset-x) - 0.25rem)); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.84); background: rgba(255, 255, 255, 0.96); padding: 0.82rem 1rem 0.82rem 0.92rem; box-shadow: 0 24px 42px rgba(11, 31, 61, 0.14); backdrop-filter: blur(18px); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.public-body .public-chat-launcher-status { position: absolute; top: 0.52rem; left: 0.62rem; width: 0.7rem; height: 0.7rem; border-radius: 9999px; background: linear-gradient(135deg, #16a34a 0%, #16a34a 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.96), 0 0 0 6px rgba(22, 163, 74, 0.12), 0 10px 18px rgba(22, 163, 74, 0.24); } body.public-body .public-chat-launcher:hover, body.public-body .public-chat-launcher-active { transform: translateY(-2px); border-color: rgba(19, 67, 107, 0.18); box-shadow: 0 28px 46px rgba(11, 31, 61, 0.17); } body.public-body .public-chat-launcher-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 9999px; flex-shrink: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: #ffffff; background: linear-gradient(135deg, #0b1f3d 0%, #13436b 48%, #36598d 100%); box-shadow: 0 12px 24px rgba(11, 31, 61, 0.22); } body.public-body .public-chat-launcher-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; } body.public-body .public-chat-launcher-label { font-size: 0.84rem; font-weight: 800; line-height: 1.15; color: #0f1c33; } body.public-body .public-chat-launcher-subtitle { font-size: 0.71rem; line-height: 1.15; color: #36598d; } body.public-body .deal-interest-prompt { position: fixed; right: 1rem; bottom: 6.5rem; z-index: 46; width: min(100%, 23rem); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.82); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(238, 243, 249, 0.95)); padding: 1rem 1rem 1rem; box-shadow: 0 28px 56px rgba(11, 31, 61, 0.17); backdrop-filter: blur(18px); } body.public-body .deal-interest-dismiss { position: absolute; top: 0.7rem; right: 0.7rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(238, 243, 249, 0.94); color: #36598d; } body.public-body .deal-interest-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #b11d29; } body.public-body .deal-interest-title { margin-top: 0.75rem; font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: #0f1c33; max-width: 16rem; } body.public-body .deal-interest-copy { margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.55; color: #13436b; } body.public-body .deal-interest-actions { display: grid; gap: 0.8rem; margin-top: 1rem; } body.public-body .deal-interest-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border-radius: 12px; background: linear-gradient(135deg, #b11d29 0%, #d93240 100%); padding: 0.88rem 1rem; font-size: 0.92rem; font-weight: 800; color: #ffffff; box-shadow: 0 18px 34px rgba(177, 29, 41, 0.24); transition: transform 160ms ease, box-shadow 160ms ease; } body.public-body .deal-interest-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 38px rgba(177, 29, 41, 0.28); } body.public-body .deal-interest-card-link { display: flex; align-items: center; gap: 0.8rem; width: 100%; border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.9); background: rgba(255, 255, 255, 0.95); padding: 0.85rem 0.95rem; color: #13436b; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.78); } body.public-body .deal-interest-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgba(19, 67, 107, 0.08); color: #13436b; flex-shrink: 0; } body.public-body .deal-interest-card-copy { display: flex; flex-direction: column; min-width: 0; } body.public-body .deal-interest-card-title { font-size: 0.86rem; font-weight: 800; color: #0f1c33; } body.public-body .deal-interest-card-subtitle { font-size: 0.74rem; color: #36598d; } body.public-body .buyer-profile-bubble { position: fixed; top: 5.9rem; right: -0.35rem; z-index: 45; display: inline-flex; align-items: center; gap: 0.65rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.95); padding: 0.76rem 0.95rem 0.76rem 0.8rem; box-shadow: 0 24px 42px rgba(11, 31, 61, 0.14); backdrop-filter: blur(18px); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.public-body .buyer-profile-bubble:hover { transform: translateY(-2px); border-color: rgba(19, 67, 107, 0.2); box-shadow: 0 28px 46px rgba(11, 31, 61, 0.16); } body.public-body .buyer-profile-bubble-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 9999px; background: linear-gradient(135deg, #0b1f3d 0%, #13436b 100%); color: #ffffff; box-shadow: 0 12px 24px rgba(11, 31, 61, 0.2); flex-shrink: 0; } body.public-body .buyer-profile-bubble-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } body.public-body .buyer-profile-bubble-title { font-size: 0.84rem; font-weight: 800; color: #0f1c33; } body.public-body .buyer-profile-bubble-subtitle { font-size: 0.72rem; color: #36598d; } body.public-body .public-mobile-modal { overscroll-behavior: contain; overflow-y: auto; } /* Cap modal height to the viewport at ALL sizes and scroll internally, so short viewports (iPad/tablet landscape ~810px tall, split-screen, etc.) can always reach every field and the submit button. Previously this only applied at max-width:768px, leaving wide-but-short landscape tablets with an off-screen submit button. */ body.public-body .public-mobile-modal-card, body.public-body .buyer-unlock-modal-shell { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.public-body .public-mobile-modal-card { width: min(96vw, 70rem); } body.public-body .buyer-unlock-modal-shell { width: min(96vw, 70rem); } body.public-body .buyer-unlock-side { min-width: 0; } body.public-body .buyer-unlock-side #buyerUnlockIntro, body.public-body .buyer-unlock-side .buyer-unlock-point span:last-child, body.public-body #buyerUnlockSuccessCopy { max-width: 34rem; } @media (max-width: 768px) { body.public-body .public-mobile-modal { align-items: flex-start; justify-content: center; overflow-y: auto; padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem calc(0.9rem + env(safe-area-inset-bottom)); } body.public-body .public-mobile-modal-card, body.public-body .buyer-unlock-modal-shell { width: 100%; max-width: none !important; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.public-body .buyer-unlock-modal-shell { border-radius: 16px; } body.public-body .buyer-unlock-side { padding: 1.25rem; } body.public-body .buyer-unlock-side #buyerUnlockIntro, body.public-body .buyer-unlock-side .buyer-unlock-point span:last-child, body.public-body #buyerUnlockSuccessCopy { max-width: none; } body.public-body .buyer-identity-dock { top: 5.4rem; right: 0.85rem; max-width: calc(100vw - 1.7rem); padding: 0.65rem 0.85rem; } body.public-body .buyer-identity-email { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.public-body .buyer-stay-connected { left: max(0.75rem, env(safe-area-inset-left)); right: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom)); width: min(100%, calc(100vw - 1.5rem)); max-height: calc(100dvh - env(safe-area-inset-bottom) - 1.5rem); overflow-y: auto; border-radius: 16px; padding: 0.95rem 0.95rem 0.9rem; } body.public-body .buyer-stay-bubble { left: max(0.75rem, env(safe-area-inset-left)); right: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom)); max-width: min(12.5rem, calc(50vw - 0.9rem)); padding: 0.72rem 0.85rem; } body.public-body .public-chat-panel, body.public-body .public-chat-launcher { left: auto; right: max(var(--public-floating-inset-x), env(safe-area-inset-right)); } body.public-body .public-chat-launcher { bottom: calc(0.75rem + env(safe-area-inset-bottom)); max-width: min(12.5rem, calc(50vw - 0.9rem)); padding: 0.72rem 0.85rem 0.72rem 0.75rem; } body.public-body .public-chat-launcher-status { top: 0.44rem; left: 0.52rem; width: 0.64rem; height: 0.64rem; } body.public-body .public-chat-panel { bottom: max(calc(5.65rem + env(safe-area-inset-bottom)), var(--public-chat-panel-bottom)); width: min(100%, calc(100vw - 1rem)); height: min(78dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 6.35rem)); max-height: min(78dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 6.35rem)); border-radius: 16px; } body.public-body .public-chat-panel-header, body.public-body .public-chat-message-stream, body.public-body .public-chat-quick-actions, body.public-body .public-chat-form { padding-left: 0.9rem; padding-right: 0.9rem; } body.public-body .public-chat-message-stream { max-height: none; padding-top: 0.85rem; padding-bottom: 0.85rem; } body.public-body .public-chat-panel-header { padding-top: 0.9rem; padding-bottom: 0.8rem; } body.public-body .public-chat-panel-copy { max-width: none; } body.public-body .public-chat-form { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; padding-bottom: calc(0.9rem + env(safe-area-inset-bottom)); } body.public-body .public-chat-send { width: 100%; } body.public-body .public-chat-input { font-size: 16px; min-height: 3.15rem; max-height: 6.75rem; } body.public-body .public-chat-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; padding-bottom: 0.85rem; } body.public-body .public-chat-action-chip { width: 100%; min-height: 2.6rem; padding-left: 0.72rem; padding-right: 0.72rem; } body.public-body .public-chat-bubble { max-width: 96%; } body.public-body .public-chat-close { width: 2.1rem; height: 2.1rem; } body.public-body .buyer-profile-bubble { top: 5.4rem; right: -0.2rem; max-width: calc(100vw - 1.5rem); padding: 0.7rem 0.85rem 0.7rem 0.75rem; } body.public-body .deal-interest-prompt { right: 0.75rem; bottom: calc(5.6rem + env(safe-area-inset-bottom)); width: min(100%, calc(100vw - 1.5rem)); padding: 0.95rem 0.95rem 0.95rem; border-radius: 16px; } body.public-body .deal-interest-title { max-width: none; font-size: 1rem; } body.public-body .deal-address-line { align-items: flex-start; gap: 0.5rem; } body.public-body .deal-locality { white-space: normal; } body.public-body .deal-address-meta { flex-direction: column; padding: 0.85rem 0.9rem; } body.public-body .deal-address-actions { width: 100%; } body.public-body .deal-address-chip { width: 100%; } body.public-body .deal-address-lock-detail .deal-address-meta { padding: 0; } } body.public-body .cash-buyers-form-compact { gap: 1rem; } body.public-body .buyer-pref-card { border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.85); background: linear-gradient(180deg, rgba(238, 243, 249, 0.98), rgba(255, 255, 255, 0.94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.75); } body.public-body .buyer-pref-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } body.public-body .buyer-pref-pill { display: inline-flex; align-items: center; border-radius: 0.5rem; background: rgba(255, 255, 255,0.96); border: 1px solid rgba(223, 232, 243, 0.92); padding: 0.35rem 0.75rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #36598d; box-shadow: 0 10px 22px rgba(11, 31, 61, 0.05); } body.public-body .buyer-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } body.public-body .buyer-chip-grid-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.public-body .buyer-chip-option { display: flex; align-items: flex-start; gap: 0.65rem; border-radius: 12px; border: 1px solid rgba(223, 232, 243, 0.92); background: rgba(255, 255, 255,0.98); padding: 0.75rem 0.85rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.76); } body.public-body .buyer-chip-option-tight { padding: 0.7rem 0.8rem; } body.public-body .buyer-chip-option span { color: #13436b; font-weight: 600; line-height: 1.25rem; } @media (min-width: 768px) { body.public-body .buyer-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.public-body .buyer-chip-grid-tight { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.public-body .deal-card .pt-3.border-t, body.public-body .deal-card .pt-4.border-t { border-top-color: rgba(223, 232, 243, 0.9); } body.public-body .public-panel, body.public-body .public-panel-soft { border-radius: var(--public-radius-xl); border: 1px solid rgba(255, 255, 255,0.76); box-shadow: var(--public-shadow-soft); backdrop-filter: blur(14px); } body.public-body .public-panel { background: rgba(255, 255, 255, 0.88); } body.public-body .public-panel-soft { background: rgba(238, 243, 249, 0.92); } body.public-body .bg-white.rounded-2xl.shadow-lg, body.public-body .bg-white.rounded-2xl.shadow-xl, body.public-body .bg-white.rounded-3xl.shadow-lg, body.public-body .bg-white.rounded-3xl.shadow-2xl { border: 1px solid rgba(255, 255, 255,0.76); box-shadow: var(--public-shadow-soft); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); } body.public-body .site-filter-bar { background: rgba(255, 255, 255,0.74); border-top: 1px solid rgba(255, 255, 255,0.45); border-bottom: 1px solid rgba(223, 232, 243, 0.78); box-shadow: 0 16px 32px rgba(11, 31, 61, 0.06); backdrop-filter: blur(18px); } body.public-body .filter-btn, body.public-body .site-chip-button { border-radius: 0.5rem; border: 1px solid rgba(223, 232, 243, 0.88); background: rgba(255, 255, 255,0.82); color: #13436b; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.65); } body.public-body .filter-btn:hover, body.public-body .site-chip-button:hover { border-color: rgba(136, 160, 194, 0.34); color: #0f1c33; } body.public-body .filter-active { background: linear-gradient(135deg, #0b1f3d 0%, #13436b 100%); color: #ffffff; border-color: rgba(19, 67, 107, 0.95); box-shadow: 0 16px 32px rgba(11, 31, 61, 0.16); } body.public-body .site-input, body.public-body input[type="text"], body.public-body input[type="email"], body.public-body input[type="tel"], body.public-body input[type="number"], body.public-body textarea, body.public-body select { box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.58); } body.public-body .site-footer { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle 600px at 88% 0%, rgba(136, 160, 194, 0.22), transparent 60%), radial-gradient(circle 540px at 8% 100%, rgba(177, 29, 41, 0.18), transparent 60%), radial-gradient(circle 360px at 50% 50%, rgba(136, 160, 194, 0.10), transparent 65%), linear-gradient(135deg, #0b1f3d 0%, #0b1f3d 35%, #13436b 70%, #13436b 100%) !important; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 -16px 40px rgba(11, 31, 61, 0.18); } body.public-body .site-footer::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 200deg at 70% 30%, rgba(136, 160, 194, 0) 0deg, rgba(136, 160, 194, 0.14) 80deg, rgba(136, 160, 194, 0.10) 160deg, rgba(136, 160, 194, 0.08) 240deg, rgba(245, 179, 1, 0.05) 320deg, rgba(136, 160, 194, 0) 360deg); mix-blend-mode: screen; opacity: 0.6; pointer-events: none; z-index: 0; filter: none; width: auto; height: auto; border-radius: 0; } body.public-body .site-footer::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); border-radius: 0; filter: none; pointer-events: none; z-index: 1; } body.public-body .site-footer > * { position: relative; z-index: 1; } body.public-body .site-footer a { transition: color 160ms ease, transform 160ms ease; } body.public-body .site-footer a:hover { color: #ffffff; transform: translateX(2px); } body.public-body .site-footer .bg-secondary.rounded-lg.flex.items-center.justify-center { background: radial-gradient(circle at top left, rgba(255, 255, 255,0.22), transparent 38%), linear-gradient(135deg, #b11d29 0%, #d93240 100%); box-shadow: 0 18px 28px rgba(177, 29, 41, 0.22); } body.public-body .site-footer .bg-blue-800.rounded-full.flex.items-center.justify-center { border: 1px solid rgba(255, 255, 255,0.12); background: rgba(255, 255, 255,0.08); backdrop-filter: blur(12px); } body.public-body .site-footer .bg-blue-800.rounded-full.flex.items-center.justify-center:hover { background: linear-gradient(135deg, #b11d29 0%, #d93240 100%); transform: translateY(-2px); box-shadow: 0 14px 26px rgba(177, 29, 41, 0.24); } body.public-body .site-section-soft { background: linear-gradient(180deg, rgba(255, 255, 255,0.44), rgba(238, 243, 249,0.9)); } body.public-body .site-stat-band { background: radial-gradient(circle at top left, rgba(255, 255, 255,0.14), transparent 24%), linear-gradient(135deg, #0b1f3d 0%, #13436b 52%, #36598d 100%); box-shadow: 0 28px 56px rgba(11, 31, 61, 0.14); } /* ────────────────────────────────────────────────────────────────────────── Aurora Navy Panel — shared aesthetic for premium dark surfaces. Lifted from .site-cta-panel + .site-footer (commit c990969). Apply to any dark hero / CTA / footer / panel container that should match the upgraded look. Also exposed as a body-class-free `.aurora-navy-panel` so it can be used inside admin/tools/genie without requiring `body.public-body`. ────────────────────────────────────────────────────────────────────────── */ .aurora-navy-panel, body.public-body .site-cta-panel { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; background: radial-gradient(circle 480px at 90% 0%, rgba(136, 160, 194, 0.30), transparent 60%), radial-gradient(circle 420px at 0% 100%, rgba(177, 29, 41, 0.28), transparent 60%), radial-gradient(circle 340px at 50% 50%, rgba(136, 160, 194, 0.14), transparent 65%), linear-gradient(135deg, #0b1f3d 0%, #0b1f3d 35%, #13436b 70%, #13436b 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 24px 50px rgba(11, 31, 61, 0.45), 0 60px 120px rgba(11, 31, 61, 0.30); color: #ffffff; } .aurora-navy-panel::before, body.public-body .site-cta-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 220deg at 70% 30%, rgba(136, 160, 194, 0) 0deg, rgba(136, 160, 194, 0.18) 80deg, rgba(136, 160, 194, 0.12) 160deg, rgba(136, 160, 194, 0.10) 240deg, rgba(245, 179, 1, 0.08) 320deg, rgba(136, 160, 194, 0) 360deg); mix-blend-mode: screen; opacity: 0.7; pointer-events: none; z-index: 0; } .aurora-navy-panel::after, body.public-body .site-cta-panel::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); pointer-events: none; z-index: 0; } .aurora-navy-panel > *, body.public-body .site-cta-panel > * { position: relative; z-index: 1; } /* Compact variant — for topbars / sidebars where the full radial spread is too much. Same colors, tighter spread, no conic shimmer overlay. */ .aurora-navy-panel--compact { background: radial-gradient(circle 320px at 92% 0%, rgba(136, 160, 194, 0.22), transparent 60%), radial-gradient(circle 260px at 4% 100%, rgba(177, 29, 41, 0.18), transparent 60%), linear-gradient(135deg, #0b1f3d 0%, #0b1f3d 35%, #13436b 70%, #13436b 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 32px rgba(11, 31, 61, 0.28); } .aurora-navy-panel--compact::before { opacity: 0.45; } /* Old per-rule .site-cta-panel ::before/::after/>* removed — now handled by the consolidated .aurora-navy-panel selector group above. */ body.public-body .site-footer-cta { border-radius: 12px; border: 1px solid rgba(255, 255, 255,0.16); background: rgba(255, 255, 255,0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.08); backdrop-filter: blur(12px); } body.public-body .site-footer-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1rem; border-radius: 12px; background: linear-gradient(135deg, #b11d29 0%, #d93240 100%); color: #ffffff; font-weight: 700; box-shadow: 0 16px 28px rgba(177, 29, 41, 0.24); transition: transform 160ms ease, box-shadow 160ms ease, color 160ms ease; } body.public-body .site-footer-button:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 20px 32px rgba(177, 29, 41, 0.28); } body.public-body .site-faq-item { border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.92); background: linear-gradient(180deg, rgba(238, 243, 249,0.94), rgba(255, 255, 255,0.9)); box-shadow: 0 16px 30px rgba(11, 31, 61, 0.06); overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } body.public-body .site-faq-item:hover { transform: translateY(-1px); border-color: rgba(136, 160, 194, 0.36); box-shadow: 0 22px 38px rgba(11, 31, 61, 0.08); } body.public-body .site-faq-trigger { background: rgba(255, 255, 255,0.94); transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } body.public-body .site-faq-trigger:hover { background: rgba(238, 243, 249,0.98); } body.public-body .site-faq-item-open { border-color: rgba(19, 67, 107, 0.22); box-shadow: 0 24px 42px rgba(11, 31, 61, 0.1); } body.public-body .site-faq-item-open .site-faq-trigger { background: linear-gradient(180deg, rgba(238, 243, 249,0.98), rgba(255, 255, 255,0.96)); box-shadow: inset 0 -1px 0 rgba(223, 232, 243, 0.75); transform: translateY(1px); } body.public-body .site-faq-item-open .site-faq-answer { background: linear-gradient(180deg, rgba(238, 243, 249,0.98), rgba(255, 255, 255,0.95)); } body.public-body .deal-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, rgba(19, 67, 107,0.9), rgba(177, 29, 41,0.92)); opacity: 0.92; } body.public-body .deal-card::after { content: ''; position: absolute; right: -28px; bottom: -34px; width: 110px; height: 110px; border-radius: 9999px; background: rgba(19, 67, 107, 0.06); } body.public-body .site-empty-state { background: rgba(255, 255, 255,0.7); border: 1px solid rgba(255, 255, 255,0.82); border-radius: var(--public-radius-xl); box-shadow: var(--public-shadow-soft); backdrop-filter: blur(12px); } body.public-body .site-inline-glass { background: rgba(255, 255, 255,0.78); border: 1px solid rgba(255, 255, 255,0.72); box-shadow: 0 16px 30px rgba(11, 31, 61, 0.08); backdrop-filter: blur(14px); } body.public-body #propertyContent > .flex.flex-col.md\:flex-row.justify-between.items-start.gap-4.mb-6 { padding: 1.4rem 1.5rem; border: 1px solid rgba(255, 255, 255,0.74); border-radius: 16px; background: rgba(255, 255, 255,0.78); box-shadow: 0 18px 38px rgba(11, 31, 61, 0.08); backdrop-filter: blur(12px); } body.public-body #propertyContent button, body.public-body #propertyContent a.inline-flex.items-center.gap-2.bg-primary { transition: transform 160ms ease, box-shadow 160ms ease; } body.public-body #propertyContent button:hover, body.public-body #propertyContent a.inline-flex.items-center.gap-2.bg-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(11, 31, 61, 0.12); } body.public-body .site-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } body.public-body .site-page-frame { position: relative; } body.public-body .site-page-frame::before { content: ''; position: fixed; inset: auto auto 2rem 2rem; width: 7rem; height: 7rem; border-radius: 9999px; background: rgba(19, 67, 107, 0.05); filter: blur(10px); pointer-events: none; z-index: 0; } body.public-body .site-page-frame::after { content: ''; position: fixed; inset: 10rem 2rem auto auto; width: 8rem; height: 8rem; border-radius: 9999px; background: rgba(177, 29, 41, 0.05); filter: blur(10px); pointer-events: none; z-index: 0; } body.public-body details > summary, body.public-body button, body.public-body a.inline-flex, body.public-body .deal-card, body.public-body .public-panel, body.public-body .public-panel-soft, body.public-body .site-inline-glass, body.public-body .site-empty-state { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease; } body.public-body details[open] > summary + * { animation: publicSectionReveal 220ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top center; } /* The answer still appears, it just stops sliding to get there. Every FAQ press on the site runs this one. */ @media (prefers-reduced-motion: reduce) { body.public-body details[open] > summary + * { animation: none; } } body.public-body .deal-card:hover, body.public-body .public-panel:hover, body.public-body .public-panel-soft:hover, body.public-body .site-inline-glass:hover { border-color: rgba(136, 160, 194, 0.3); box-shadow: 0 20px 34px rgba(11, 31, 61, 0.1); } @keyframes publicSectionReveal { 0% { opacity: 0; transform: translateY(-6px) scale(0.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 768px) { body.public-body .site-brand { gap: 0.65rem; } body.public-body .site-logo-badge { width: 2.48rem; height: 2.48rem; border-radius: 12px; } body.public-body .site-logo-house { width: 1.32rem; height: 1.32rem; } body.public-body .site-wordmark { font-size: 1.5rem; } body.public-body .site-nav-link-active::after { display: none; } body.public-body .site-hero-card, body.public-body .public-panel, body.public-body .public-panel-soft { border-radius: 16px; } } /* ============================================================ MODERN UI REFRESH — appended enhancements ============================================================ */ /* ── Scroll-fade entrance animations ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes pulseGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } body.public-body .animate-fade-up { animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } body.public-body .animate-fade-up-delay-1 { animation-delay: 0.08s; } body.public-body .animate-fade-up-delay-2 { animation-delay: 0.16s; } body.public-body .animate-fade-up-delay-3 { animation-delay: 0.24s; } body.public-body .animate-fade-up-delay-4 { animation-delay: 0.32s; } body.public-body .animate-fade-up-delay-5 { animation-delay: 0.40s; } body.public-body .animate-scale-in { animation: scaleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } body.public-body .animate-fade-in { animation: fadeIn 0.45s ease both; } /* ── Section heading style ── */ body.public-body .section-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1rem; border-radius: 0.5rem; background: rgba(177, 29, 41, 0.08); border: 1px solid rgba(177, 29, 41, 0.14); color: #b11d29; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; } body.public-body .section-title-gradient { color: #13436b; } body.public-body .section-underline { display: inline-block; position: relative; } body.public-body .section-underline::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.5rem; height: 3px; width: 3.5rem; border-radius: 9999px; background: linear-gradient(90deg, #b11d29, #13436b); } body.public-body > section:not(.site-hero):not(.site-section-soft):not(.site-cta-band):not(.site-filter-bar):not(.how-buying-section) { position: relative; } body.public-body > section:not(.site-hero):not(.site-section-soft):not(.site-cta-band):not(.site-filter-bar):not(.how-buying-section)::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, rgba(10, 20, 36, 0), rgba(19, 67, 107, 0.18) 16%, rgba(177, 29, 41, 0.42) 50%, rgba(19, 67, 107, 0.18) 84%, rgba(10, 20, 36, 0)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 22px rgba(11, 31, 61, 0.08); pointer-events: none; z-index: 1; } /* ── Stats bar ── */ body.public-body .stats-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; justify-content: center; padding: 1.6rem 2rem; border-radius: 16px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.82); box-shadow: 0 28px 56px rgba(11, 31, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); } body.public-body .stat-item { flex: 1 1 9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem 1.2rem; text-align: center; border-right: 1px solid rgba(223, 232, 243, 0.6); } body.public-body .stat-item:last-child { border-right: 0; } body.public-body .stat-value { font-family: "Outfit", sans-serif; font-size: 1.85rem; font-weight: 800; line-height: 1; color: #13436b; letter-spacing: -0.03em; } body.public-body .stat-label { font-size: 0.76rem; font-weight: 600; color: #36598d; margin-top: 0.28rem; text-transform: uppercase; letter-spacing: 0.08em; } /* ── How It Works — connected steps ── */ body.public-body .steps-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } body.public-body .steps-track-four { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 1023px) { body.public-body .steps-track { grid-template-columns: 1fr; gap: 1rem; } } /* Connector segments — draw a short line in each gap (not across cards) */ body.public-body .steps-track .step-node:not(:last-child)::before { content: ''; position: absolute; top: 50%; right: -1.5rem; width: 1.5rem; height: 4px; background: linear-gradient(90deg, rgba(177, 29, 41,0.45), rgba(19, 67, 107,0.4)); pointer-events: none; border-radius: 9999px; transform: translateY(-50%); z-index: 0; } @media (max-width: 1023px) { body.public-body .steps-track .step-node:not(:last-child)::before { display: none; } } @media (max-width: 1023px) { body.public-body .steps-track-four { grid-template-columns: 1fr; } } body.public-body .step-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1.2rem 1.5rem; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255,0.97), rgba(238, 243, 249,0.92)); border: 1px solid rgba(223, 232, 243, 0.88); box-shadow: 0 18px 38px rgba(11, 31, 61, 0.07), inset 0 1px 0 rgba(255, 255, 255,0.95); transition: transform 0.22s ease, box-shadow 0.22s ease; } body.public-body .step-node:hover { transform: translateY(-5px); box-shadow: 0 28px 50px rgba(11, 31, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255,0.95); } body.public-body .step-number { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 9999px; font-family: "Outfit", sans-serif; font-size: 1.25rem; font-weight: 800; color: #ffffff; margin: 0 auto 1rem; flex-shrink: 0; box-shadow: 0 16px 30px rgba(11, 31, 61, 0.18); position: relative; z-index: 1; } body.public-body .step-number-red { background: linear-gradient(135deg, #b11d29 0%, #d93240 100%); } body.public-body .step-number-navy { background: linear-gradient(135deg, #0b1f3d 0%, #13436b 52%, #36598d 100%); } body.public-body .step-title { font-size: 1.05rem; font-weight: 700; color: #0b1f3d; margin-bottom: 0.5rem; } body.public-body .step-body { font-size: 0.9rem; line-height: 1.55; color: #36598d; } /* ── Feature cards ── */ body.public-body .feature-card { position: relative; overflow: hidden; padding: 2rem 1.75rem; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255,0.98), rgba(238, 243, 249,0.93)); border: 1px solid rgba(223, 232, 243, 0.9); box-shadow: 0 18px 40px rgba(11, 31, 61, 0.07), inset 0 1px 0 rgba(255, 255, 255,0.9); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } body.public-body .feature-card:hover { transform: translateY(-5px); box-shadow: 0 28px 55px rgba(11, 31, 61, 0.12); border-color: rgba(136, 160, 194, 0.52); } body.public-body .feature-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(19, 67, 107, 0.02), transparent 50%, rgba(177, 29, 41, 0.02)); pointer-events: none; } body.public-body .feature-icon-wrap { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 12px; margin-bottom: 1.25rem; flex-shrink: 0; box-shadow: 0 12px 24px rgba(11, 31, 61, 0.1); } body.public-body .feature-icon-wrap-red { background: linear-gradient(135deg, rgba(177, 29, 41, 0.12), rgba(177, 29, 41, 0.06)); border: 1px solid rgba(177, 29, 41, 0.14); color: #b11d29; } body.public-body .feature-icon-wrap-navy { background: linear-gradient(135deg, rgba(19, 67, 107, 0.12), rgba(19, 67, 107, 0.05)); border: 1px solid rgba(19, 67, 107, 0.12); color: #13436b; } /* ── FAQ Accordion (smooth height) ── */ body.public-body .faq-item { overflow: hidden; border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.8); background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 22px rgba(11, 31, 61, 0.05); transition: box-shadow 0.22s ease, border-color 0.22s ease; } body.public-body .faq-item.is-open { border-color: rgba(19, 67, 107, 0.18); box-shadow: 0 16px 36px rgba(11, 31, 61, 0.09); } body.public-body .faq-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.25rem 1.5rem; text-align: left; background: transparent; border: 0; cursor: pointer; transition: background-color 0.18s ease; } body.public-body .faq-trigger:hover { background: rgba(238, 243, 249, 0.8); } body.public-body .faq-trigger-icon { flex-shrink: 0; width: 1.65rem; height: 1.65rem; border-radius: 9999px; background: rgba(238, 243, 249, 0.9); display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease; color: #36598d; } body.public-body .faq-item.is-open .faq-trigger-icon { transform: rotate(180deg); background: rgba(19, 67, 107, 0.1); color: #13436b; } body.public-body .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1); } body.public-body .faq-item.is-open .faq-body { grid-template-rows: 1fr; } body.public-body .faq-body-inner { overflow: hidden; } body.public-body .faq-answer { padding: 0 1.5rem 1.25rem; color: #13436b; line-height: 1.65; font-size: 0.96rem; border-top: 1px solid rgba(223, 232, 243, 0.7); padding-top: 1.1rem; } /* ── Filter pill buttons ── */ body.public-body .filter-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(223, 232, 243, 0.9); background: rgba(255, 255, 255, 0.96); color: #13436b; cursor: pointer; transition: all 0.18s ease; box-shadow: 0 4px 12px rgba(11, 31, 61, 0.05); } body.public-body .filter-pill:hover { border-color: rgba(19, 67, 107, 0.22); color: #13436b; background: rgba(238, 243, 249, 0.98); box-shadow: 0 8px 20px rgba(11, 31, 61, 0.09); transform: translateY(-1px); } body.public-body .filter-pill:active { transform: translateY(0); } body.public-body .filter-pill.is-active, body.public-body .filter-pill.filter-active { background: linear-gradient(135deg, #0b1f3d 0%, #13436b 100%); border-color: transparent; color: #ffffff; box-shadow: 0 12px 26px rgba(11, 31, 61, 0.28); } /* ── Better form inputs ── */ body.public-body .modern-input { width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1.5px solid rgba(223, 232, 243, 0.88); background: rgba(255, 255, 255, 0.97); color: #0f1c33; font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } body.public-body .modern-input::placeholder { color: #88a0c2; } body.public-body .modern-input:hover { border-color: rgba(136, 160, 194, 0.7); } body.public-body .modern-input:focus { border-color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.1); } /* ── CTA section ── */ body.public-body .site-cta-band { position: relative; overflow: hidden; background: radial-gradient(ellipse at top right, rgba(177, 29, 41, 0.22), transparent 38%), radial-gradient(ellipse at bottom left, rgba(54, 89, 141, 0.2), transparent 40%), linear-gradient(135deg, #0b1f3d 0%, #0b1f3d 50%, #13436b 100%); } body.public-body .site-cta-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255,0.05), transparent 70%); pointer-events: none; } body.public-body .site-cta-band::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(136, 160, 194, 0.26) 16%, rgba(217, 50, 64, 0.4) 50%, rgba(136, 160, 194, 0.26) 84%, rgba(255, 255, 255, 0)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 24px rgba(136, 160, 194, 0.12); pointer-events: none; } /* ── Footer enhancements ── */ body.public-body .site-footer { position: relative; } body.public-body .site-footer::before { /* Restored: animated 3px crimson→navy→blue→crimson stripe across the top of the footer. Flows right-to-left (animation-direction: reverse). */ content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #b11d29, #13436b, #36598d, #b11d29); background-size: 200% 100%; animation: shimmer 4s linear infinite; animation-direction: reverse; z-index: 2; } @media (prefers-reduced-motion: reduce) { body.public-body .site-footer::before { animation: none; } } body.public-body .site-footer-cta { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; backdrop-filter: blur(8px); padding: 1.1rem 1.25rem; } body.public-body .site-footer-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.72rem 1.3rem; border-radius: 12px; font-size: 0.88rem; font-weight: 700; background: linear-gradient(135deg, #b11d29 0%, #d93240 100%); color: #ffffff; border: 0; cursor: pointer; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 12px 26px rgba(177, 29, 41, 0.3); } body.public-body .site-footer-button:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(177, 29, 41, 0.38); } /* ── Deal card modern refresh ── */ body.public-body .deal-card-badge-hot { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 0.5rem; background: linear-gradient(135deg, #b11d29, #d93240); color: #ffffff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(177, 29, 41, 0.3); } /* ── Search input enhancements ── */ body.public-body .search-wrap { position: relative; } body.public-body .search-wrap .search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: #88a0c2; } body.public-body .search-input { width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.5rem; border-radius: 12px; border: 1.5px solid rgba(223, 232, 243, 0.88); background: rgba(255, 255, 255, 0.98); font-size: 0.9rem; color: #0f1c33; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } body.public-body .search-input:focus { border-color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.1); } /* ── Hero discount stat card ── */ body.public-body .site-hero-stat { animation: floatY 4.5s ease-in-out infinite; } /* Perpetual motion is the case the media query exists for -- a one-shot entrance ends, this one never does, and it sits in the hero of the page every visitor lands on. The card keeps its position; only the drift stops. The ::before ring is answered further down, NOT here: its own rule is declared later in this file, so an override written at this point loses to it on source order at equal specificity. That is invisible in the file (the media query reads like it wins) and only shows up in a computed style. */ @media (prefers-reduced-motion: reduce) { body.public-body .site-hero-stat { animation: none; } } /* ── Empty state ── */ body.public-body .site-empty-state-modern { display: flex; flex-direction: column; align-items: center; padding: 4rem 2rem; text-align: center; } body.public-body .site-empty-state-modern.hidden { display: none !important; } body.public-body .empty-state-icon { width: 5rem; height: 5rem; border-radius: 16px; background: linear-gradient(135deg, rgba(19, 67, 107, 0.08), rgba(177, 29, 41, 0.05)); border: 1px solid rgba(223, 232, 243, 0.9); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #88a0c2; box-shadow: 0 14px 30px rgba(11, 31, 61, 0.07); } body.public-body.deals-page { background: #eef3f9 !important; } body.public-body.deals-page .deals-hero { margin-bottom: 0; padding-bottom: 4.35rem !important; } body.public-body.deals-page .deals-filter-seam { position: relative; margin-top: -2.7rem; padding-bottom: 0; z-index: 2; pointer-events: none; } body.public-body.deals-page .deals-filter-seam::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(136, 160, 194, 0.25) 50%, transparent 95%); pointer-events: none; } body.public-body.deals-page .deals-filter-bar { position: relative; z-index: 1; width: 100%; margin: 0 auto; pointer-events: auto; } body.public-body.deals-page .deals-filter-surface { position: relative; width: min(100%, 64rem); margin: 0 auto; border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.9); background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 18px 40px rgba(11, 31, 61, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem 1.1rem; } body.public-body.deals-page .deals-filter-surface::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.92); pointer-events: none; } body.public-body.deals-page .deals-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } body.public-body.deals-page .deals-filter-group { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } body.public-body.deals-page .deals-search-wrap .search-input { min-height: 3rem; } body.public-body.deals-page .deals-content-section { position: relative; z-index: 0; margin-top: 0; padding-top: 2.5rem !important; background: #eef3f9; } body.public-body.deals-page .deals-content-section::before { display: none; } body.public-body.deals-page .deals-results-stack { display: flex; flex-direction: column; gap: 2.75rem; } body.public-body.deals-page .deals-results-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; position: relative; z-index: 2; } body.public-body.deals-page .deals-results-heading { margin: 0.9rem 0 0; font-family: 'Inter', sans-serif; font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.05; font-weight: 800; color: #13436b; } body.public-body.deals-page .deals-results-copy { margin: 0.7rem 0 0; max-width: 42rem; font-size: 1rem; line-height: 1.7; color: #36598d; } body.public-body.deals-page .deals-grid-stage, body.public-body.deals-page #emptyState { margin: 0; } body.public-body.deals-page .deals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.5rem), 21.5rem)); justify-content: center; /* Standardized cards: stretch + equal rows so every card is the same size regardless of how much optional content (spread, deadline, beds) it carries. The card itself is a flex column with the CTA on mt-auto. */ align-items: stretch; grid-auto-rows: 1fr; gap: 1.75rem; } body.public-body.deals-page .deals-grid > * { width: 100%; } body.public-body.deals-page .deals-grid-stage-muted { padding-top: 0.5rem; } body.public-body.deals-page .site-empty-state-modern { min-height: 25rem; justify-content: center; margin-top: 0.5rem; } body.public-body.deals-page #dealsGrid:empty, body.public-body.deals-page #soldGrid:empty { display: none; } /* ── VIP badge ── */ body.public-body .vip-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.95rem; border-radius: 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: linear-gradient(135deg, rgba(245, 179, 1, 0.12), rgba(245, 179, 1, 0.06)); border: 1px solid rgba(245, 179, 1, 0.2); color: #a86f00; box-shadow: 0 4px 14px rgba(245, 179, 1, 0.12); } /* ── Floating label section CTA ── */ body.public-body .join-cta-card { position: relative; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 36px 72px rgba(11, 31, 61, 0.18); backdrop-filter: blur(12px); } /* ── Smooth section transitions ── */ body.public-body .site-section-soft { position: relative; } body.public-body .site-section-soft::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(10, 20, 36, 0), rgba(19, 67, 107, 0.18) 16%, rgba(177, 29, 41, 0.42) 50%, rgba(19, 67, 107, 0.18) 84%, rgba(10, 20, 36, 0)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 22px rgba(11, 31, 61, 0.08); } /* ── Buyer chip modernization ── */ body.public-body .buyer-chip-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; border-radius: 12px; border: 1.5px solid rgba(223, 232, 243, 0.8); background: rgba(255, 255, 255, 0.96); cursor: pointer; transition: all 0.18s ease; font-size: 0.875rem; font-weight: 500; color: #13436b; } body.public-body .buyer-chip-option:hover { border-color: rgba(19, 67, 107, 0.22); color: #13436b; background: rgba(238, 243, 249, 0.98); box-shadow: 0 4px 14px rgba(11, 31, 61, 0.07); } body.public-body .buyer-chip-option:has(input:checked) { border-color: #13436b; background: rgba(19, 67, 107, 0.06); color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.1), 0 6px 18px rgba(11, 31, 61, 0.08); } /* ── Active nav shimmer dot ── */ @media (max-width: 768px) { body.public-body .steps-track { grid-template-columns: 1fr; } body.public-body .stat-item { border-right: 0; border-bottom: 1px solid rgba(223, 232, 243, 0.6); } body.public-body .stat-item:last-child { border-bottom: 0; } body.public-body .stats-bar { flex-direction: column; padding: 1.2rem 1.4rem; gap: 0; } } /* ================================================================ PHASE 2 — BUTTON & MICRO-INTERACTION ENHANCEMENTS ================================================================ */ /* ── Enhanced button base — shared across all button types ── */ @keyframes btnRipple { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0.5; } 100% { transform: translate(-50%,-50%) scale(4); opacity: 0; } } @keyframes btnShine { 0% { left: -80%; } 100% { left: 130%; } } body.public-body .btn-primary, body.public-body .btn-secondary, body.public-body .site-button-primary, body.public-body .site-button-secondary, body.public-body .site-footer-button, body.public-body .btn-outline { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; text-decoration: none; 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, border-color 0.22s ease; } /* Shine sweep on hover */ body.public-body .btn-primary::after, body.public-body .btn-secondary::after, body.public-body .site-button-primary::after, body.public-body .site-button-secondary::after, body.public-body .site-footer-button::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; } body.public-body .btn-primary:hover::after, body.public-body .btn-secondary:hover::after, body.public-body .site-button-primary:hover::after, body.public-body .site-button-secondary:hover::after, body.public-body .site-footer-button:hover::after { opacity: 1; animation: btnShine 0.65s ease forwards; } /* Active press state */ body.public-body .btn-primary:active, body.public-body .btn-secondary:active, body.public-body .site-button-primary:active, body.public-body .site-button-secondary:active, body.public-body .site-footer-button:active, body.public-body .btn-outline:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; } /* Focus-visible ring for accessibility */ body.public-body .btn-primary:focus-visible, body.public-body .btn-secondary:focus-visible, body.public-body .site-button-primary:focus-visible, body.public-body .site-button-secondary:focus-visible, body.public-body .site-footer-button:focus-visible, body.public-body .btn-outline:focus-visible { outline: 2px solid #13436b; outline-offset: 3px; } /* ── Outline / ghost button variant ── */ body.public-body .btn-outline { border-radius: 0.5rem; border: 2px solid rgba(19, 67, 107, 0.22); background: rgba(255, 255, 255, 0.92); color: #13436b; font-weight: 700; box-shadow: 0 8px 22px rgba(11, 31, 61, 0.06); backdrop-filter: blur(6px); } body.public-body .btn-outline:hover { border-color: #13436b; background: rgba(19, 67, 107, 0.06); box-shadow: 0 14px 30px rgba(11, 31, 61, 0.1); transform: translateY(-2px); } body.public-body .btn-outline-red { border-color: rgba(177, 29, 41, 0.22); color: #b11d29; } body.public-body .btn-outline-red:hover { border-color: #b11d29; background: rgba(177, 29, 41, 0.05); } /* ── Improved primary/secondary hover shadows ── */ body.public-body .btn-primary:hover, body.public-body .site-button-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(177, 29, 41, 0.25), 0 0 0 1px rgba(177, 29, 41, 0.08); } body.public-body .btn-secondary:hover, body.public-body .site-button-secondary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(11, 31, 61, 0.25), 0 0 0 1px rgba(11, 31, 61, 0.08); } /* ── Icon inside buttons — smooth nudge on hover ── */ body.public-body .btn-primary [data-lucide], body.public-body .btn-secondary [data-lucide], body.public-body .btn-outline [data-lucide], body.public-body .site-footer-button [data-lucide] { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } body.public-body .btn-primary:hover [data-lucide], body.public-body .btn-secondary:hover [data-lucide], body.public-body .btn-outline:hover [data-lucide], body.public-body .site-footer-button:hover [data-lucide] { transform: translateX(2px); } /* ── Nav link animated underline ── */ body.public-body .site-nav-link::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; border-radius: 9999px; background: linear-gradient(90deg, #b11d29, #13436b); transition: opacity 180ms ease; } body.public-body .site-nav-link:hover::after { width: 100%; left: 0; } /* ── Card gradient border glow on hover ── */ body.public-body .feature-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(19, 67, 107,0.15), transparent, rgba(177, 29, 41,0.12)); -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } body.public-body .feature-card:hover::after { opacity: 1; } /* ── Step node gradient border glow ── */ body.public-body .step-node::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(177, 29, 41,0.18), transparent 40%, rgba(19, 67, 107,0.15)); -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } body.public-body .step-node:hover::after { opacity: 1; } /* ── Step number scale bounce on card hover ── */ body.public-body .step-node:hover .step-number { transform: scale(1.1); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } /* ── FAQ item hover glow ── */ body.public-body .faq-item:hover { border-color: rgba(136, 160, 194, 0.5); box-shadow: 0 12px 28px rgba(11, 31, 61, 0.07); } /* ── Modern form inputs with animated label-line effect ── */ body.public-body input.modern-input:not(:placeholder-shown), body.public-body select.modern-input:not(:placeholder-shown), body.public-body textarea.modern-input:not(:placeholder-shown) { border-color: rgba(19, 67, 107, 0.3); } /* Input group with left icon */ body.public-body .input-icon-wrap { position: relative; } body.public-body .input-icon-wrap .input-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #88a0c2; pointer-events: none; transition: color 0.2s ease; z-index: 1; } body.public-body .input-icon-wrap input:focus ~ .input-icon, body.public-body .input-icon-wrap select:focus ~ .input-icon { color: #13436b; } body.public-body .input-icon-wrap input, body.public-body .input-icon-wrap select { padding-left: 2.6rem; } /* ── Better inline form styling for CTA section inputs ── */ body.public-body .cash-buyers-form input, body.public-body .cash-buyers-form select, body.public-body .cash-buyers-form textarea { border-radius: 12px; border: 1.5px solid rgba(223, 232, 243, 0.88); background: rgba(255, 255, 255, 0.97); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.public-body .cash-buyers-form input:hover, body.public-body .cash-buyers-form select:hover, body.public-body .cash-buyers-form textarea:hover { border-color: rgba(136, 160, 194, 0.7); background: #ffffff; } body.public-body .cash-buyers-form input:focus, body.public-body .cash-buyers-form select:focus, body.public-body .cash-buyers-form textarea:focus { border-color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.1); background: #ffffff; } /* ── Floating label helper ── */ body.public-body .form-label { display: block; font-size: 0.82rem; font-weight: 700; color: #13436b; margin-bottom: 0.4rem; letter-spacing: 0.01em; } body.public-body .form-label .form-required { color: #b11d29; font-weight: 800; } /* ── Hero stat card — pulsing ring ── */ body.public-body .site-hero-stat::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(19, 67, 107, 0.06); /* Static ring; the pulse is a composited opacity fade, not an infinite box-shadow-spread animation (which repainted the card every frame). */ box-shadow: 0 0 0 8px rgba(177, 29, 41, 0.12); opacity: 0; animation: pulseGlow 3s ease-in-out infinite; pointer-events: none; } /* The pulse half of the hero card's reduced-motion answer. It lives here rather than beside the card's own rule above because it has to come AFTER the declaration it overrides. pulseGlow runs 0 -> 1 -> 0, so a static 1 would be its PEAK: the calm version would be LOUDER than the animated one. 0.45 is roughly what the pulse averages, and the ring stays visible either way. */ @media (prefers-reduced-motion: reduce) { body.public-body .site-hero-stat::before { animation: none; opacity: 0.45; } } /* ── Link arrow nudge ── */ body.public-body a[href]:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.site-nav-link):not(.site-brand):not(.site-mobile-link) [data-lucide*="arrow"] { transition: transform 0.2s ease; } body.public-body a[href]:hover [data-lucide*="arrow"] { transform: translateX(3px); } /* ── Badge bounce on load ── */ @keyframes badgeFadeIn { 0% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } body.public-body .site-badge { animation: badgeFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } /* `both` holds the 0% frame before the 0.15s delay elapses, so dropping the animation without restoring opacity would leave the badge invisible rather than merely still. */ @media (prefers-reduced-motion: reduce) { body.public-body .site-badge { animation: none; opacity: 1; transform: none; } } /* ── Social icon hover lift ── */ body.public-body .site-footer a[aria-label] { transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } body.public-body .site-footer a[aria-label]:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(11, 31, 61,0.2); } /* ── Stats bar value count-up feel ── */ body.public-body .stat-value { transition: transform 0.22s ease; } body.public-body .stat-item:hover .stat-value { transform: scale(1.08); } /* ── Mobile touch feedback ── */ @media (hover: none) { body.public-body .btn-primary:active, body.public-body .btn-secondary:active, body.public-body .btn-outline:active { transform: scale(0.95); } body.public-body .feature-card:active, body.public-body .step-node:active { transform: scale(0.98); } } /* ── Smooth scroll-linked section separator ── */ body.public-body .site-section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(136, 160, 194, 0.25) 50%, transparent 95%); } /* ── Better select dropdowns ── */ body.public-body select.modern-select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 1rem; cursor: pointer; } /* ── Loading shimmer for placeholders ── */ @keyframes contentShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } body.public-body .shimmer-placeholder { background: linear-gradient(90deg, rgba(223, 232, 243,0.6) 25%, rgba(238, 243, 249,0.9) 50%, rgba(223, 232, 243,0.6) 75%); background-size: 200% 100%; animation: contentShimmer 1.5s linear infinite; border-radius: 0.5rem; } /* ================================================================ PHASE 3 — PREMIUM POLISH & REFINED DEPTH ================================================================ */ /* ── Upgraded nav — thinner, more refined ── */ body.public-body nav.site-nav { background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(223, 232, 243, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255,0.9), 0 4px 12px rgba(11, 31, 61, 0.04), 0 16px 36px rgba(11, 31, 61, 0.06); } /* ── Hero section — luxury aurora mesh, sleek modern impressive ── */ body.public-body .site-hero { background: radial-gradient(circle 720px at 12% -10%, rgba(19, 67, 107, 0.22), transparent 55%), radial-gradient(circle 620px at 85% 5%, rgba(136, 160, 194, 0.22), transparent 60%), radial-gradient(circle 540px at 98% 70%, rgba(177, 29, 41, 0.10), transparent 60%), radial-gradient(circle 460px at 6% 95%, rgba(136, 160, 194, 0.14), transparent 60%), radial-gradient(circle 380px at 50% 55%, rgba(255, 255, 255, 0.72), transparent 70%), linear-gradient(180deg, #eef3f9 0%, #ffffff 50%, #ffffff 100%) !important; position: relative; isolation: isolate; } body.public-body .site-hero.hero-pattern { background-image: radial-gradient(circle 720px at 12% -10%, rgba(19, 67, 107, 0.22), transparent 55%), radial-gradient(circle 620px at 85% 5%, rgba(136, 160, 194, 0.22), transparent 60%), radial-gradient(circle 540px at 98% 70%, rgba(177, 29, 41, 0.10), transparent 60%), radial-gradient(circle 460px at 6% 95%, rgba(136, 160, 194, 0.14), transparent 60%), radial-gradient(circle 380px at 50% 55%, rgba(255, 255, 255, 0.72), transparent 70%), linear-gradient(180deg, #eef3f9 0%, #ffffff 50%, #ffffff 100%) !important; } body.public-body .site-hero::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 200deg at 60% 30%, rgba(136, 160, 194, 0) 0deg, rgba(136, 160, 194, 0.10) 70deg, rgba(136, 160, 194, 0.08) 140deg, rgba(136, 160, 194, 0.06) 210deg, rgba(245, 179, 1, 0.05) 280deg, rgba(136, 160, 194, 0) 360deg); mix-blend-mode: screen; pointer-events: none; z-index: 0; opacity: 0.85; } body.public-body .site-hero::after { content: none; } body.public-body .site-hero > * { position: relative; z-index: 1; } /* ── Hero card premium shadow stack ── */ body.public-body .site-hero-card { box-shadow: 0 2px 4px rgba(11, 31, 61,0.04), 0 8px 16px rgba(11, 31, 61,0.06), 0 24px 48px rgba(11, 31, 61, 0.1), 0 48px 80px rgba(11, 31, 61, 0.08); /* 4px gray→white gradient frame (3px thicker than the prior 1px). The padding-box fill sits behind the photos so only the ring shows. */ border: 4px solid transparent; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #8496ab 0%, #dfe8f3 45%, #ffffff 100%) border-box; } /* ── Premium glass stats bar ── */ body.public-body .stats-bar { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 rgba(255, 255, 255,1), 0 4px 12px rgba(11, 31, 61, 0.04), 0 16px 40px rgba(11, 31, 61, 0.08), inset 0 1px 0 rgba(255, 255, 255,0.95); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); } /* ── Premium feature cards — frosted glass v2 ── */ body.public-body .feature-card { background: linear-gradient(180deg, rgba(255, 255, 255,0.99) 0%, rgba(238, 243, 249,0.95) 100%); border: 1px solid rgba(223, 232, 243, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 4px 8px rgba(11, 31, 61, 0.03), 0 12px 28px rgba(11, 31, 61, 0.06), inset 0 1px 0 rgba(255, 255, 255,0.95); } body.public-body .feature-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 8px 16px rgba(11, 31, 61, 0.05), 0 24px 48px rgba(11, 31, 61, 0.1), inset 0 1px 0 rgba(255, 255, 255,0.95); border-color: rgba(136, 160, 194, 0.4); } /* ── Elevated icon wraps ── */ body.public-body .feature-icon-wrap { box-shadow: 0 2px 4px rgba(11, 31, 61, 0.04), 0 8px 20px rgba(11, 31, 61, 0.08); border-radius: 12px; } body.public-body .feature-icon-wrap-red { background: linear-gradient(145deg, rgba(177, 29, 41, 0.1), rgba(177, 29, 41, 0.04)); border: 1px solid rgba(177, 29, 41, 0.1); } body.public-body .feature-icon-wrap-navy { background: linear-gradient(145deg, rgba(19, 67, 107, 0.1), rgba(19, 67, 107, 0.04)); border: 1px solid rgba(19, 67, 107, 0.08); } /* ── Premium step nodes ── */ body.public-body .step-node { background: linear-gradient(180deg, rgba(255, 255, 255,0.99) 0%, rgba(238, 243, 249,0.94) 100%); border: 1px solid rgba(223, 232, 243, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 4px 8px rgba(11, 31, 61, 0.03), 0 14px 32px rgba(11, 31, 61, 0.06), inset 0 1px 0 rgba(255, 255, 255,0.95); } body.public-body .step-node:hover { box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 8px 16px rgba(11, 31, 61, 0.06), 0 24px 50px rgba(11, 31, 61, 0.1), inset 0 1px 0 rgba(255, 255, 255,0.95); } /* ── Step numbers with premium depth ── */ body.public-body .step-number { box-shadow: 0 2px 4px rgba(11, 31, 61,0.1), 0 8px 20px rgba(11, 31, 61, 0.15), inset 0 1px 0 rgba(255, 255, 255,0.2); border: 1px solid rgba(255, 255, 255,0.15); } body.public-body .step-number-red { background: linear-gradient(160deg, #b11d29 0%, #b11d29 50%, #8f0f1c 100%); } body.public-body .step-number-navy { background: linear-gradient(160deg, #36598d 0%, #13436b 50%, #0b1f3d 100%); } /* ── Premium FAQ items ── */ body.public-body .faq-item { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 2px 6px rgba(11, 31, 61, 0.03), 0 8px 24px rgba(11, 31, 61, 0.04); } body.public-body .faq-item.is-open { border-color: rgba(19, 67, 107, 0.14); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 4px 12px rgba(11, 31, 61, 0.05), 0 16px 40px rgba(11, 31, 61, 0.08); } body.public-body .faq-trigger-icon { width: 1.8rem; height: 1.8rem; background: linear-gradient(180deg, rgba(238, 243, 249, 0.95), rgba(223, 232, 243, 0.6)); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 2px 4px rgba(11, 31, 61, 0.04); } /* ── Premium filter pills ── */ body.public-body .filter-pill { box-shadow: 0 1px 2px rgba(11, 31, 61, 0.04), 0 4px 10px rgba(11, 31, 61, 0.04); border: 1px solid rgba(223, 232, 243, 0.8); backdrop-filter: blur(8px); } body.public-body .filter-pill.is-active, body.public-body .filter-pill.filter-active { background: linear-gradient(160deg, #36598d 0%, #13436b 50%, #0b1f3d 100%); box-shadow: 0 2px 4px rgba(11, 31, 61, 0.15), 0 8px 20px rgba(11, 31, 61, 0.2), inset 0 1px 0 rgba(255, 255, 255,0.12); border: 1px solid rgba(255, 255, 255,0.1); text-shadow: 0 1px 2px rgba(11, 31, 61,0.15); } /* ── Premium outline button upgrade ── */ body.public-body .btn-outline { background: rgba(255, 255, 255, 0.96); border: 1.5px solid rgba(19, 67, 107, 0.16); box-shadow: 0 1px 2px rgba(11, 31, 61, 0.04), 0 4px 12px rgba(11, 31, 61, 0.05); backdrop-filter: blur(8px); } body.public-body .btn-outline:hover { border-color: rgba(19, 67, 107, 0.4); background: rgba(19, 67, 107, 0.04); box-shadow: 0 2px 4px rgba(11, 31, 61, 0.06), 0 8px 24px rgba(11, 31, 61, 0.08), 0 20px 40px rgba(11, 31, 61, 0.06); transform: translateY(-2px); } body.public-body .btn-outline-red { border-color: rgba(177, 29, 41, 0.16); } body.public-body .btn-outline-red:hover { border-color: rgba(177, 29, 41, 0.4); background: rgba(177, 29, 41, 0.03); } /* ── Premium CTA band — deeper, richer ── */ body.public-body .site-cta-band { background: radial-gradient(ellipse 40% 60% at 100% 0%, rgba(177, 29, 41, 0.2), transparent), radial-gradient(ellipse 50% 50% at 0% 100%, rgba(54, 89, 141, 0.25), transparent), radial-gradient(ellipse 30% 30% at 50% 50%, rgba(54, 89, 141, 0.15), transparent), linear-gradient(145deg, #0a1424 0%, #0b1f3d 30%, #13436b 60%, #13436b 100%); } /* ── Premium form cards ── */ body.public-body .cash-buyers-form { border: 1px solid rgba(223, 232, 243, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 4px 8px rgba(11, 31, 61, 0.03), 0 16px 36px rgba(11, 31, 61, 0.08), 0 32px 64px rgba(11, 31, 61, 0.05); } /* ── Premium form inputs with inner depth ── */ body.public-body .cash-buyers-form input, body.public-body .cash-buyers-form select, body.public-body .cash-buyers-form textarea { border-radius: 12px; border: 1.5px solid rgba(223, 232, 243, 0.7); background: rgba(255, 255, 255, 0.98); box-shadow: inset 0 1px 3px rgba(11, 31, 61, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.public-body .cash-buyers-form input:hover, body.public-body .cash-buyers-form select:hover, body.public-body .cash-buyers-form textarea:hover { border-color: rgba(136, 160, 194, 0.6); background: #ffffff; box-shadow: inset 0 1px 3px rgba(11, 31, 61, 0.03); } body.public-body .cash-buyers-form input:focus, body.public-body .cash-buyers-form select:focus, body.public-body .cash-buyers-form textarea:focus { border-color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.08), inset 0 1px 2px rgba(11, 31, 61, 0.03); background: #ffffff; } /* ── Premium buyer chip options ── */ body.public-body .buyer-chip-option { border: 1.5px solid rgba(223, 232, 243, 0.65); background: rgba(255, 255, 255, 0.98); box-shadow: 0 1px 2px rgba(11, 31, 61, 0.03), inset 0 1px 0 rgba(255, 255, 255,0.95); border-radius: 12px; } body.public-body .buyer-chip-option:hover { border-color: rgba(19, 67, 107, 0.18); background: rgba(238, 243, 249, 0.98); box-shadow: 0 2px 6px rgba(11, 31, 61, 0.05), inset 0 1px 0 rgba(255, 255, 255,0.95); transform: translateY(-1px); transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1); } body.public-body .buyer-chip-option:has(input:checked) { border-color: #13436b; background: linear-gradient(180deg, rgba(19, 67, 107, 0.06), rgba(19, 67, 107, 0.03)); box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.08), 0 2px 8px rgba(11, 31, 61, 0.06), inset 0 1px 0 rgba(255, 255, 255,0.9); } /* ── Section eyebrow premium ── */ body.public-body .section-eyebrow { background: linear-gradient(135deg, rgba(177, 29, 41, 0.07), rgba(177, 29, 41, 0.03)); border: 1px solid rgba(177, 29, 41, 0.1); box-shadow: 0 2px 8px rgba(177, 29, 41, 0.06); backdrop-filter: blur(4px); } /* ── Premium hero stat card ── */ body.public-body .site-hero-stat { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255,0.8); box-shadow: 0 2px 4px rgba(11, 31, 61,0.03), 0 8px 16px rgba(11, 31, 61,0.05), 0 24px 48px rgba(11, 31, 61, 0.08); backdrop-filter: blur(16px); } /* ── Section underline — wider and more prominent ── */ body.public-body .section-underline::after { height: 3px; width: 4rem; background: linear-gradient(90deg, #b11d29, #13436b); box-shadow: 0 2px 6px rgba(177, 29, 41, 0.2); } /* ── Footer premium depth ── */ body.public-body .site-footer { isolation: isolate; position: relative; /* Brand ray-effect (rayeffect-m-fade.png) as the top-most background layer — the crisper "black" ray sheets rising from the footer floor. `screen` over the navy lifts the ray highlights into a subtle glow behind all content. This is the effective footer background rule (a later duplicate that overrides the earlier .site-footer block above). */ background: none 50% 100% / 130% auto no-repeat, radial-gradient(circle 600px at 88% 0%, rgba(136, 160, 194, 0.22), transparent 60%), radial-gradient(circle 540px at 8% 100%, rgba(177, 29, 41, 0.18), transparent 60%), radial-gradient(circle 360px at 50% 50%, rgba(136, 160, 194, 0.10), transparent 65%), linear-gradient(135deg, #0b1f3d 0%, #0b1f3d 35%, #13436b 70%, #13436b 100%) !important; background-blend-mode: screen, normal, normal, normal, normal; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 -16px 40px rgba(11, 31, 61, 0.18); } /* Second, LIVE ray layer drifting on top of the static base ray — same treatment the deal flyer uses at its bottom edge (a slow screen-blended pan). z-index:-1 sits above the footer's own ray background but below all footer content; masked so it fades out before the top edge. */ body.public-body .site-footer::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: min(62%, 60vh); background: none 50% 100% / 152% auto no-repeat; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; z-index: -1; -webkit-mask-image: linear-gradient(to top, #000000 0%, #000000 52%, transparent 100%); mask-image: linear-gradient(to top, #000000 0%, #000000 52%, transparent 100%); /* ncddRayDrift is gone. The footer ray was re-declared further down this file with `animation: none` (it became a scroll-parallax layer driven by --raySlide instead), so the 19s drift, its keyframes and the reduced-motion block written for it had all stopped mattering -- and the reduced-motion block sat ABOVE the rule that overrode it, so it would have lost anyway. Nothing else referenced the keyframes. */ } /* ── Footer CTA card glass upgrade ── */ body.public-body .site-footer-cta { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.06), 0 8px 24px rgba(11, 31, 61,0.15); } /* ── Footer button premium ── */ body.public-body .site-footer-button { background: linear-gradient(160deg, #b11d29 0%, #b11d29 50%, #8f0f1c 100%); border: 1px solid rgba(255, 255, 255,0.12); box-shadow: 0 2px 4px rgba(11, 31, 61,0.1), 0 8px 20px rgba(177, 29, 41, 0.25); text-shadow: 0 1px 2px rgba(11, 31, 61,0.15); } body.public-body .site-footer-button:hover { box-shadow: 0 2px 4px rgba(11, 31, 61,0.08), 0 12px 28px rgba(177, 29, 41, 0.32); } /* ── Premium deal cards ── */ body.public-body .deal-card { background: linear-gradient(180deg, rgba(255, 255, 255,0.99) 0%, rgba(238, 243, 249,0.96) 100%); border: 1px solid rgba(223, 232, 243, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 4px 8px rgba(11, 31, 61, 0.03), 0 16px 36px rgba(11, 31, 61, 0.07), inset 0 1px 0 rgba(255, 255, 255,0.9); } body.public-body .deal-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 8px 16px rgba(11, 31, 61, 0.06), 0 28px 56px rgba(11, 31, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255,0.9); border-color: rgba(136, 160, 194, 0.5); } /* ── Deal card accent bar — smoother gradient ── */ body.public-body .deal-card-accent { height: 3px; background: linear-gradient(90deg, #b11d29 0%, #13436b 100%); opacity: 0.85; } /* ── Elevated badge styles ── */ body.public-body .site-badge { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(223, 232, 243, 0.7); box-shadow: 0 1px 2px rgba(11, 31, 61, 0.04), 0 4px 12px rgba(11, 31, 61, 0.06); backdrop-filter: blur(8px); } /* ── Smoother hero photo rotated bg ── */ body.public-body .hero-photo-stack > .absolute:first-child { border-radius: 16px; background: linear-gradient(135deg, rgba(177, 29, 41,0.12), rgba(19, 67, 107,0.12)) !important; box-shadow: 0 24px 48px rgba(11, 31, 61, 0.08); } /* ── Buy box pref card — premium ── */ body.public-body .buyer-pref-card { background: linear-gradient(180deg, rgba(238, 243, 249,0.98), rgba(238, 243, 249,0.95)); border: 1px solid rgba(223, 232, 243, 0.7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.95), 0 2px 8px rgba(11, 31, 61, 0.04); } /* ── Premium consent checkboxes ── */ body.public-body label:has(input[name="isRealtor"]), body.public-body label:has(input[name="textAlertsConsent"]), body.public-body label:has(input[name="communicationConsent"]) { border-radius: 12px; box-shadow: 0 1px 3px rgba(11, 31, 61, 0.03); transition: box-shadow 0.18s ease, transform 0.18s ease; } body.public-body label:has(input[name="isRealtor"]):hover, body.public-body label:has(input[name="textAlertsConsent"]):hover, body.public-body label:has(input[name="communicationConsent"]):hover { box-shadow: 0 4px 12px rgba(11, 31, 61, 0.06); transform: translateY(-1px); } /* ── Smooth section bg transitions ── */ body.public-body section { position: relative; } /* ── Premium search input ── */ body.public-body .search-input { border: 1.5px solid rgba(223, 232, 243, 0.7); background: rgba(255, 255, 255, 0.98); box-shadow: inset 0 1px 3px rgba(11, 31, 61, 0.04); } body.public-body .search-input:focus { border-color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.08), inset 0 1px 2px rgba(11, 31, 61, 0.03); } /* ── Premium mobile menu ── */ body.public-body .site-mobile-panel { background: rgba(255, 255, 255, 0.95); border-top: 1px solid rgba(223, 232, 243, 0.5); box-shadow: 0 16px 48px rgba(11, 31, 61, 0.1); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } body.public-body .site-mobile-link { border-radius: 12px; padding: 0.6rem 0.85rem; transition: all 0.15s ease; } body.public-body .site-mobile-link:hover { background: rgba(19, 67, 107, 0.04); } /* ── Decorative floating orbs for hero ── */ /* orbFloat is gone with the orbs. The two .hero-orb divs were converted into the ray layers further down this file, where `.hero-orb { animation: none }` overrides this rule outright -- so the float, its 12s timing and the two animation-delays that staggered it had not run in a long time, and read as a perpetual animation with no reduced-motion answer to anything auditing the source. Nothing else referenced the keyframes. */ body.public-body .hero-orb { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(60px); will-change: transform; } body.public-body .hero-orb-1 { width: 300px; height: 300px; top: -50px; left: -80px; background: rgba(19, 67, 107, 0.07); } body.public-body .hero-orb-2 { width: 200px; height: 200px; bottom: -30px; right: 10%; background: rgba(177, 29, 41, 0.05); } /* ── Section heading — larger text, better contrast ── */ body.public-body .section-title-gradient { color: #13436b; } /* ── Premium buyers panel (cash-buyers page form container) ── */ body.public-body .buyers-panel { background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255,0.98), 0 4px 8px rgba(11, 31, 61, 0.03), 0 16px 36px rgba(11, 31, 61, 0.07), 0 32px 64px rgba(11, 31, 61, 0.04); } body.public-body.cash-buyers-page #cash-buyers-form { padding: 2rem; } body.public-body.cash-buyers-page #cash-buyers-form .cash-buyers-form { border: 0; box-shadow: none; background: transparent; padding: 0; } body.public-body.cash-buyers-page #cash-buyers-form > .mb-6 { margin-bottom: 1.5rem; padding-bottom: 1.35rem; } body.public-body.cash-buyers-page #cash-buyers-form .buyer-pref-card { border-color: rgba(223, 232, 243, 0.85); background: linear-gradient(180deg, rgba(238, 243, 249, 0.9), rgba(238, 243, 249, 0.72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.8), 0 10px 24px rgba(11, 31, 61, 0.04); } body.public-body.cash-buyers-page #cash-buyers-form .buyer-form-status, body.public-body.cash-buyers-page #cash-buyers-form > .cash-buyers-form > label, body.public-body.cash-buyers-page #cash-buyers-form > .cash-buyers-form > button { position: relative; z-index: 1; } @media (min-width: 768px) { body.public-body.cash-buyers-page #cash-buyers-form { padding: 2.15rem 2.2rem; } } /* ── Refined link hover colors ── */ body.public-body .site-nav-link:hover { color: #13436b; } /* ── Premium section backgrounds ── */ body.public-body section.bg-white, body.public-body section[class*="bg-white"] { background: radial-gradient(ellipse 40% 30% at 80% 80%, rgba(19, 67, 107, 0.02), transparent), radial-gradient(ellipse 30% 30% at 20% 20%, rgba(177, 29, 41, 0.015), transparent), #ffffff !important; } /* Same container language as the deal-page Contact Team card, 2026-08-08: a white→gray face inside a CONTRASTING slate rim. The old #f8fbff face with a #d8e0ea hairline sat almost exactly on the white card behind it, so the panel had no readable edge — it looked like a tint, not a container. */ body.public-body .rent-estimate-shell { border: 2px solid transparent; border-radius: 16px; background: linear-gradient(180deg, #ffffff 0%, #eef3f9 58%, #eef3f9 100%) padding-box, linear-gradient(135deg, #dfe8f3 0%, #88a0c2 52%, #dfe8f3 100%) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 34px -20px rgba(11, 31, 61, 0.28); padding: 1.5rem; } /* Median hero + range band — replaces the half-dial gauge. The value reads as the MIDDLE of a spread (marker centered on a min→max track, the middle half of the market shaded), not a needle reading. */ body.public-body .rent-estimate-hero { text-align: center; padding: 0.4rem 0 1.15rem; } body.public-body .rent-estimate-value { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 4.2vw, 2.35rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; white-space: nowrap; color: #13436b; } body.public-body .rent-estimate-permo { margin-left: 0.15rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0; color: #36598d; } body.public-body .rent-estimate-hero-note { max-width: 24rem; margin: 0.65rem auto 0; font-size: 0.78rem; line-height: 1.5; color: #36598d; } body.public-body .rent-estimate-band { padding: 0 0.3rem; } body.public-body .rent-estimate-band-track { position: relative; height: 0.85rem; border-radius: 999px; background: linear-gradient(180deg, #dfe8f3, #eef3f9); box-shadow: inset 0 1px 3px rgba(11, 31, 61, 0.16); } body.public-body .rent-estimate-band-core { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #88a0c2 0%, #36598d 50%, #13436b 100%); box-shadow: 0 0 12px rgba(54, 89, 141, 0.35); } body.public-body .rent-estimate-band-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.35rem; height: 1.35rem; border-radius: 999px; background: linear-gradient(180deg, #ffffff, #eef3f9); border: 3px solid #13436b; box-shadow: 0 4px 10px rgba(11, 31, 61, 0.35); } body.public-body .rent-estimate-pill { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.7rem; border-radius: 12px; padding: 0.46rem 0.95rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #0b1f3d; /* Softer, single diagonal wash — the two-stop vertical gradient plus two inset lines made this small label the glossiest object on the card. */ background: linear-gradient(135deg, #f5b301 0%, #f5b301 55%, #f5b301 100%); border: 1px solid rgba(168, 111, 0, 0.22); box-shadow: 0 6px 14px -8px rgba(168, 111, 0, 0.4); } body.public-body .rent-estimate-range-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; } body.public-body .rent-estimate-range-stat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #36598d; } body.public-body .rent-estimate-range-value { margin-top: 0.35rem; font-family: 'Inter', sans-serif; font-size: 1.18rem; font-weight: 800; letter-spacing: -0.03em; color: #0b1f3d; text-transform: none; } body.public-body .rent-estimate-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1rem; } body.public-body .rent-estimate-stat-card, body.public-body .rent-estimate-footer { border: 1px solid #dfe8f3; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 18px -12px rgba(11, 31, 61, 0.3); } body.public-body .rent-estimate-stat-card { padding: 0.9rem 1rem; text-align: center; } body.public-body .rent-estimate-stat-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #36598d; } body.public-body .rent-estimate-stat-value { margin-top: 0.55rem; font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: #0b1f3d; } body.public-body .rent-estimate-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; margin-top: 1rem; padding: 0.95rem 1rem; background: #ffffff; } @media (max-width: 640px) { body.public-body .rent-estimate-value { font-size: clamp(1.5rem, 7vw, 1.9rem); } } /* ── Refined deal analyzer inputs ── */ body.public-body .deal-analyzer-input { border: 1.5px solid rgba(223, 232, 243, 0.7); background: rgba(255, 255, 255, 0.98); box-shadow: inset 0 1px 3px rgba(11, 31, 61, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.public-body .deal-analyzer-input:focus { border-color: #13436b; box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.08), inset 0 1px 2px rgba(11, 31, 61, 0.03); outline: none; } /* ── Checkbox styling ── */ body.public-body input[type="checkbox"] { border-radius: 0.3rem; border: 1.5px solid rgba(136, 160, 194, 0.6); transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.public-body input[type="checkbox"]:checked { border-color: #13436b; box-shadow: 0 0 0 2px rgba(11, 31, 61, 0.08); } /* ── Scrollbar styling ── */ body.public-body ::-webkit-scrollbar { width: 8px; } body.public-body ::-webkit-scrollbar-track { background: rgba(238, 243, 249, 0.8); } body.public-body ::-webkit-scrollbar-thumb { background: rgba(136, 160, 194, 0.4); border-radius: 9999px; } body.public-body ::-webkit-scrollbar-thumb:hover { background: rgba(136, 160, 194, 0.6); } /* ================================================================ PHASE 4 — UNIFIED FLOATING UI + FONT CONSISTENCY + DETAIL PAGE ================================================================ */ /* ── Global font consistency ── */ body.public-body, body.public-body * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body.public-body h1, body.public-body h2, body.public-body .site-wordmark, body.public-body .stat-value, body.public-body .step-number { font-family: 'Inter', -apple-system, sans-serif; } /* ── Unified floating element base — consistent glass treatment ── */ body.public-body .buyer-stay-bubble, body.public-body .buyer-profile-bubble, body.public-body .public-chat-launcher, body.public-body .buyer-identity-dock { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 1px 2px rgba(11, 31, 61,0.04), 0 8px 20px rgba(11, 31, 61, 0.08), 0 24px 48px rgba(11, 31, 61, 0.06); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease; } /* Last word on these two, so the reduced-motion answer has to be here. The hover lift still happens -- it just arrives instead of gliding, which is what a state change with no transition means. */ @media (prefers-reduced-motion: reduce) { body.public-body .public-chat-launcher, body.public-body .buyer-identity-dock { transition: none; } } body.public-body .buyer-stay-bubble:hover, body.public-body .buyer-profile-bubble:hover, body.public-body .public-chat-launcher:hover { transform: translateY(-3px); border-color: rgba(136, 160, 194, 0.3); box-shadow: 0 1px 2px rgba(11, 31, 61,0.03), 0 12px 28px rgba(11, 31, 61, 0.1), 0 32px 56px rgba(11, 31, 61, 0.08); } /* ── Unified floating icon circles ── */ body.public-body .buyer-stay-bubble-icon { width: 2.35rem; height: 2.35rem; background: linear-gradient(160deg, #b11d29 0%, #b11d29 50%, #8f0f1c 100%); border: 1px solid rgba(255, 255, 255,0.15); box-shadow: 0 2px 4px rgba(11, 31, 61,0.1), 0 8px 18px rgba(177, 29, 41, 0.2); } body.public-body .public-chat-launcher-icon { width: 2.35rem; height: 2.35rem; background: linear-gradient(160deg, #36598d 0%, #13436b 50%, #0b1f3d 100%); border: 1px solid rgba(255, 255, 255,0.15); box-shadow: 0 2px 4px rgba(11, 31, 61,0.1), 0 8px 18px rgba(11, 31, 61, 0.2); } body.public-body .buyer-profile-bubble-icon { width: 2.35rem; height: 2.35rem; background: linear-gradient(160deg, #36598d 0%, #13436b 50%, #0b1f3d 100%); border: 1px solid rgba(255, 255, 255,0.15); box-shadow: 0 2px 4px rgba(11, 31, 61,0.1), 0 8px 18px rgba(11, 31, 61, 0.2); } body.public-body .buyer-identity-icon { background: linear-gradient(160deg, #36598d 0%, #13436b 50%, #0b1f3d 100%); border: 1px solid rgba(255, 255, 255,0.15); box-shadow: 0 2px 4px rgba(11, 31, 61,0.1), 0 8px 18px rgba(11, 31, 61, 0.2); } /* ── Unified floating text styles ── */ body.public-body .buyer-stay-bubble-title, body.public-body .buyer-profile-bubble-title, body.public-body .public-chat-launcher-label, body.public-body .buyer-identity-greeting { font-family: 'Inter', sans-serif; font-size: 0.84rem; font-weight: 700; color: #0f1c33; line-height: 1.2; letter-spacing: -0.01em; } body.public-body .buyer-stay-bubble-subtitle, body.public-body .buyer-profile-bubble-subtitle, body.public-body .public-chat-launcher-subtitle, body.public-body .buyer-identity-email { font-family: 'Inter', sans-serif; font-size: 0.72rem; color: #36598d; line-height: 1.2; letter-spacing: 0; } /* ── Stay-connected panel — match premium glass ── */ body.public-body .buyer-stay-connected { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 1px 2px rgba(11, 31, 61,0.04), 0 8px 20px rgba(11, 31, 61, 0.08), 0 32px 56px rgba(11, 31, 61, 0.1); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } /* ── Chat panel — unified glass ── */ body.public-body .public-chat-panel { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 1px 2px rgba(11, 31, 61,0.04), 0 8px 20px rgba(11, 31, 61, 0.08), 0 32px 56px rgba(11, 31, 61, 0.1); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } /* ── Deal interest prompt — match floating system ── */ body.public-body .deal-interest-prompt { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 1px 2px rgba(11, 31, 61,0.04), 0 8px 20px rgba(11, 31, 61, 0.08), 0 32px 56px rgba(11, 31, 61, 0.12); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } /* ── Deal detail page — standardized buttons ── */ body.public-body .bg-primary { background: linear-gradient(160deg, #36598d 0%, #13436b 40%, #0b1f3d 100%) !important; } body.public-body .bg-secondary { background: linear-gradient(160deg, #b11d29 0%, #b11d29 40%, #8f0f1c 100%) !important; } body.public-body .hover\:bg-red-700:hover { background: linear-gradient(160deg, #b11d29 0%, #b11d29 40%, #8f0f1c 100%) !important; } body.public-body .hover\:bg-blue-800:hover { background: linear-gradient(160deg, #36598d 0%, #13436b 40%, #0b1f3d 100%) !important; } /* ── Deal detail — pill buttons + border radius consistency ── */ body.public-body button.rounded-lg, body.public-body a.rounded-lg { border-radius: 12px; } body.public-body button.rounded-xl, body.public-body a.rounded-xl { border-radius: 12px; } /* ── Deal detail — standardized shadow on action buttons ── */ body.public-body button[onclick="contactAboutDeal()"], body.public-body button[onclick="scheduleShowing()"], body.public-body button[onclick="shareDeal()"] { border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 31, 61,0.04), 0 4px 12px rgba(11, 31, 61, 0.06); transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); } body.public-body button[onclick="contactAboutDeal()"]:hover, body.public-body button[onclick="scheduleShowing()"]:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11, 31, 61,0.06), 0 8px 24px rgba(11, 31, 61, 0.1); } body.public-body button[onclick="contactAboutDeal()"] { border: 1px solid rgba(255, 255, 255,0.15); text-shadow: 0 1px 2px rgba(11, 31, 61,0.15); } /* ── Deal detail — Make an Offer button ── */ body.public-body button[onclick="contactAboutDeal()"].w-full { border-radius: 12px; font-size: 1.05rem; padding: 1rem 1.5rem; border: 1px solid rgba(255, 255, 255,0.15); box-shadow: 0 2px 4px rgba(11, 31, 61,0.08), 0 8px 20px rgba(177, 29, 41, 0.2), 0 20px 40px rgba(177, 29, 41, 0.1); text-shadow: 0 1px 2px rgba(11, 31, 61,0.15); } body.public-body button[onclick="contactAboutDeal()"].w-full:hover { box-shadow: 0 2px 4px rgba(11, 31, 61,0.06), 0 12px 28px rgba(177, 29, 41, 0.25), 0 28px 48px rgba(177, 29, 41, 0.12); } /* ── Deal detail agent card ── */ body.public-body .bg-primary.rounded-2xl { border: 1px solid rgba(255, 255, 255,0.08); box-shadow: 0 2px 4px rgba(11, 31, 61,0.06), 0 8px 20px rgba(11, 31, 61, 0.15), 0 24px 48px rgba(11, 31, 61, 0.1); } /* ── Detail page stat boxes ── */ body.public-body .bg-gray-50.rounded-lg { background: linear-gradient(180deg, rgba(238, 243, 249,0.98), rgba(238, 243, 249,0.95)) !important; border: 1px solid rgba(223, 232, 243, 0.6); border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.95); } /* ── Success modal — premium ── */ body.public-body #successModal > div { border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 4px 8px rgba(11, 31, 61,0.04), 0 16px 36px rgba(11, 31, 61, 0.1), 0 48px 80px rgba(11, 31, 61, 0.08); } /* ── Pref pill badges ── */ body.public-body .buyer-pref-pill { font-family: 'Inter', sans-serif; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(223, 232, 243, 0.6); box-shadow: 0 1px 3px rgba(11, 31, 61, 0.04); } /* ── Consent label text ── */ body.public-body label .text-sm.font-medium { font-family: 'Inter', sans-serif; } /* ── Chat panel title font ── */ body.public-body .public-chat-panel-title { font-family: 'Inter', sans-serif; font-weight: 700; } /* Public-page premium layout overrides */ body.public-body .section-stack { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } body.public-body .section-stack > .section-eyebrow { margin-bottom: 0; } body.public-body .section-stack > .section-underline { margin-bottom: 0; } body.public-body .section-stack > p { margin-top: 0; } body.public-body .section-copy-tight { max-width: 44rem; margin-left: auto; margin-right: auto; } body.public-body .section-underline { display: inline-flex; width: fit-content; padding-bottom: 1rem; } body.public-body .section-underline::after { left: 0; transform: none; width: 100%; height: 4px; bottom: 0; border-radius: 9999px; background: linear-gradient(90deg, #b11d29 0%, #b11d29 32%, #13436b 100%); box-shadow: 0 8px 18px rgba(11, 31, 61, 0.14); } body.public-body .stats-rail-wrap { position: relative; padding: 0; } body.public-body .stats-rail-wrap::before { display: none; } body.public-body .stats-rail-wrap::after { display: none; } body.public-body > .hero-stats-seam.relative.z-20 { display: none; } body.public-body .how-buying-section { position: relative; padding-top: 7rem; } body.public-body .how-buying-section::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, rgba(10, 20, 36, 0), rgba(19, 67, 107, 0.18) 16%, rgba(177, 29, 41, 0.42) 50%, rgba(19, 67, 107, 0.18) 84%, rgba(10, 20, 36, 0)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 22px rgba(11, 31, 61, 0.08); pointer-events: none; z-index: 1; } body.public-body .how-buying-section > .hero-stats-seam { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-50%); z-index: 2; } body.public-body .how-buying-section > .hero-stats-seam::before { display: none; } body.public-body .stats-bar { position: relative; width: min(100%, 48rem); max-width: 48rem; margin: 0 auto; z-index: 2; gap: 0; padding: 0; border-radius: 16px; background: #ffffff; border: 1px solid rgba(223, 232, 243, 0.92); box-shadow: 0 18px 40px rgba(11, 31, 61, 0.08); overflow: hidden; } body.public-body .stats-bar::before { display: none; } body.public-body .stat-item { position: relative; z-index: 1; min-height: 5.45rem; padding: 1.15rem 1.3rem 1rem; border-right: 0; } body.public-body .stat-item:not(:last-child)::after { content: ''; position: absolute; top: 18%; right: 0; width: 1px; height: 64%; background: rgba(223, 232, 243, 0.92); } body.public-body .stat-value { font-size: 2rem; letter-spacing: -0.04em; } body.public-body .stat-label { margin-top: 0.34rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; } body.public-body .buyer-network-shell { display: grid; gap: 1.4rem; } body.public-body .buyer-network-shell-preview { align-content: start; } body.public-body .buyer-network-preview-shell { overflow: hidden; max-height: 54rem; opacity: 1; transform: translateY(0); transition: opacity 0.24s ease, transform 0.24s ease; } body.public-body .buyer-network-shell.is-open .buyer-network-preview-shell { max-height: 0; opacity: 0; transform: translateY(-12px); } body.public-body .buyer-network-preview-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.95rem; width: 100%; padding: 1.35rem 1.35rem 1.2rem; border-radius: 16px; text-align: left; color: #0b1f3d; background: linear-gradient(180deg, rgba(238, 243, 249,0.98), rgba(255, 255, 255,0.96)); border: 1px solid rgba(223, 232, 243, 0.88); /* Crimson top accent via inset box-shadow ONLY. An inset shadow is clipped to the border-radius, so it hugs the rounded top corners cleanly. The old straight ::before bar was NOT clipped to the radius and left a "notch" against the dark section at each top corner — removed to fix that. */ box-shadow: 0 26px 46px rgba(11, 31, 61, 0.16), inset 0 3px 0 rgba(177, 29, 41, 0.92), inset 0 1px 0 rgba(255, 255, 255,0.5); overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } body.public-body .buyer-network-preview-card::after { content: ''; position: absolute; inset: auto -4rem -4rem auto; width: 12rem; height: 12rem; border-radius: 9999px; background: radial-gradient(circle, rgba(19, 67, 107, 0.1) 0%, rgba(19, 67, 107, 0.03) 48%, transparent 72%); pointer-events: none; } body.public-body .buyer-network-preview-card:hover { transform: translateY(-3px); box-shadow: 0 30px 54px rgba(11, 31, 61, 0.18), inset 0 3px 0 rgba(177, 29, 41, 0.92), inset 0 1px 0 rgba(255, 255, 255,0.5); border-color: rgba(136, 160, 194, 0.34); } body.public-body .buyer-network-preview-header, body.public-body .buyer-network-preview-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } body.public-body .buyer-network-preview-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.72rem 0.95rem; border-radius: 12px; background: rgba(177, 29, 41, 0.08); border: 1px solid rgba(177, 29, 41, 0.12); color: #8f0f1c; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } body.public-body .buyer-network-preview-action { display: inline-flex; align-items: center; padding: 0.42rem 0.82rem; border-radius: 0.5rem; background: rgba(19, 67, 107, 0.06); border: 1px solid rgba(136, 160, 194, 0.24); color: #13436b; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } body.public-body .buyer-network-preview-copy { position: relative; z-index: 1; } body.public-body .buyer-network-copy-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; } body.public-body .buyer-network-copy-chip { display: inline-flex; align-items: center; padding: 0.46rem 0.8rem; border-radius: 0.5rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } body.public-body .buyer-network-copy-chip.is-light { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.95); } body.public-body .buyer-network-copy-chip.is-dark { background: rgba(10, 20, 36, 0.05); border: 1px solid rgba(136, 160, 194, 0.22); color: #13436b; } body.public-body .buyer-network-preview-title { font-family: 'Inter', sans-serif; font-size: 1.6rem; line-height: 1.05; font-weight: 800; color: #0b1f3d; } body.public-body .buyer-network-preview-text { margin-top: 0.5rem; color: #13436b; font-size: 0.98rem; line-height: 1.55; margin-bottom: 0; } body.public-body .buyer-network-preview-signal-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.15rem; } body.public-body .buyer-network-preview-signal { display: inline-flex; align-items: center; justify-content: center; padding: 0.48rem 0.78rem; border-radius: 0.5rem; background: linear-gradient(180deg, rgba(177, 29, 41, 0.12), rgba(19, 67, 107, 0.08)); border: 1px solid rgba(136, 160, 194, 0.2); box-shadow: 0 10px 18px rgba(11, 31, 61, 0.08), inset 0 1px 0 rgba(255, 255, 255,0.85); color: #13436b; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } /* "Become a VIP Buyer" sales pitch — premium gold strip inside the preview card. */ body.public-body .buyer-network-vip-pitch { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.95rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: linear-gradient(135deg, rgba(245, 179, 1, 0.18) 0%, rgba(255, 201, 51, 0.08) 100%); border: 1px solid rgba(245, 179, 1, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } body.public-body .buyer-network-vip-badge { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; padding: 0.32rem 0.65rem; border-radius: 999px; background: linear-gradient(135deg, #f5b301 0%, #a86f00 100%); color: #ffffff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 6px 14px rgba(168, 111, 0, 0.32); } body.public-body .buyer-network-vip-text { color: #0b1f3d; font-size: 0.84rem; font-weight: 600; line-height: 1.4; } body.public-body .buyer-network-vip-text strong { color: #0b1f3d; font-weight: 800; } body.public-body .buyer-network-preview-footer { margin-top: auto; padding-top: 0.2rem; } body.public-body .buyer-network-preview-footnote { color: #13436b; font-size: 0.88rem; line-height: 1.45; max-width: 26rem; } body.public-body .buyer-network-preview-cta { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.82rem 1.1rem; border-radius: 12px; background: linear-gradient(135deg, #b11d29 0%, #b11d29 42%, #8f0f1c 100%); color: #ffffff; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; box-shadow: 0 16px 28px rgba(177, 29, 41, 0.24); } body.public-body .buyer-network-preview-icon { transition: transform 0.24s ease; } body.public-body .buyer-network-shell.is-open .buyer-network-preview-icon { transform: rotate(180deg); } body.public-body .buyer-network-form-shell { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-10px); transition: opacity 0.24s ease, transform 0.24s ease; } /* `max-height: none`, NOT a pixel number. The open state is a REVEAL, not a height animation — only opacity and transform are transitioned above, so a numeric cap buys nothing and can only ever be too small. It was 2400px, and the signup form stacked to a single column on a 390px phone measures 2218px with the "Dial in my criteria" block collapsed and 3211px with it open: the moment a buyer opened the optional criteria, 813px — deal types, timeline, proof of funds, both consent boxes and the submit button — was clipped by the `overflow: hidden` above with no scrollbar and no way to reach it. The form simply ended mid-row against the navy band below it. `overflow` goes back to visible for the same reason it is hidden while closed: hidden is what makes the collapse crop cleanly, and once open there is nothing left to crop except the form's own drop shadow. */ body.public-body .buyer-network-shell.is-open .buyer-network-form-shell { max-height: none; overflow: visible; opacity: 1; transform: translateY(0); } body.public-body .buyer-network-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%; border-radius: 16px; background: linear-gradient(135deg, rgba(177, 29, 41, 0.96) 0%, rgba(177, 29, 41, 0.98) 46%, rgba(143, 15, 28, 0.98) 100%); color: #ffffff; padding: 1.2rem 1.25rem; font-weight: 800; letter-spacing: 0.01em; text-align: left; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 40px rgba(177, 29, 41, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } body.public-body .buyer-network-toggle:hover { transform: translateY(-2px); box-shadow: 0 28px 44px rgba(177, 29, 41, 0.28); border-color: rgba(255, 255, 255, 0.24); } body.public-body .buyer-network-toggle-badge { display: inline-flex; align-items: center; gap: 0.55rem; align-self: start; padding: 0.72rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; } body.public-body .buyer-network-toggle-copy { min-width: 0; } body.public-body .buyer-network-toggle-copy-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } body.public-body .buyer-network-toggle-title { font-family: 'Inter', sans-serif; font-size: 1.15rem; line-height: 1.1; } body.public-body .buyer-network-toggle-action { display: inline-flex; align-items: center; padding: 0.32rem 0.7rem; border-radius: 0.5rem; background: rgba(10, 20, 36, 0.16); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } body.public-body .buyer-network-toggle-text { margin-top: 0.55rem; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; line-height: 1.55; } body.public-body .buyer-network-toggle-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.85rem; } body.public-body .buyer-network-toggle-chip { display: inline-flex; align-items: center; padding: 0.42rem 0.72rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92); font-size: 0.76rem; font-weight: 700; } body.public-body .buyer-network-home-signals { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.15rem; } body.public-body .buyer-network-home-signal { display: inline-flex; align-items: center; justify-content: center; padding: 0.48rem 0.78rem; border-radius: 0.5rem; background: linear-gradient(180deg, rgba(255, 255, 255,0.16), rgba(255, 255, 255,0.08)); border: 1px solid rgba(255, 255, 255,0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.14), 0 10px 18px rgba(11, 31, 61, 0.16); color: rgba(255, 255, 255,0.94); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } body.public-body .buyer-network-home-benefits { display: grid; gap: 0.7rem; margin-top: 1.45rem; } body.public-body .buyer-network-home-benefit { min-height: 3.55rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255,0.12); display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.08), 0 18px 28px rgba(11, 31, 61, 0.14); } body.public-body .buyer-network-home-benefit-blue { background: linear-gradient(135deg, rgba(54, 89, 141, 0.3), rgba(11, 31, 61, 0.58)); border-color: rgba(136, 160, 194, 0.18); } body.public-body .buyer-network-home-benefit-red { background: linear-gradient(135deg, rgba(177, 29, 41, 0.38), rgba(11, 31, 61, 0.56)); border-color: rgba(217, 50, 64, 0.16); } body.public-body .buyer-network-home-benefit-green { background: linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(11, 31, 61, 0.56)); border-color: rgba(68, 215, 146, 0.16); } body.public-body.cash-buyers-page .buyer-network-home-benefit { box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.12), 0 20px 36px rgba(11, 31, 61, 0.18); } body.public-body.cash-buyers-page .buyer-network-home-benefit-blue { background: linear-gradient(135deg, rgba(54, 89, 141, 0.78), rgba(10, 20, 36, 0.86)); border-color: rgba(136, 160, 194, 0.44); } body.public-body.cash-buyers-page .buyer-network-home-benefit-red { background: linear-gradient(135deg, rgba(217, 50, 64, 0.76), rgba(11, 31, 61, 0.84)); border-color: rgba(247, 218, 221, 0.42); } body.public-body.cash-buyers-page .buyer-network-home-benefit-green { background: linear-gradient(135deg, rgba(22, 163, 74, 0.74), rgba(10, 20, 36, 0.84)); border-color: rgba(68, 215, 146, 0.4); } body.public-body.cash-buyers-page .buyer-network-home-benefit-icon { background: rgba(255, 255, 255,0.18); border-color: rgba(255, 255, 255,0.28); box-shadow: 0 12px 22px rgba(11, 31, 61, 0.18); } /* These three opt-ins were an orange one, a green one and a blue one, stacked. Painted HERE with !important, so neutralising the utility classes in the markup changed nothing on screen -- the rainbow was never in the HTML. Colour on this row can only mean one thing usefully, and the useful thing is "you have to tick this". Two are optional and go quiet; the REQUIRED consent keeps the only tinted ground on the stack. Same rule the deals page and the deal page both follow now. */ body.public-body.cash-buyers-page label:has(input[name="isRealtor"]), body.public-body.cash-buyers-page label:has(input[name="textAlertsConsent"]) { background: #ffffff !important; border-color: #dfe8f3 !important; box-shadow: 0 1px 3px rgba(11, 31, 61, 0.04); } body.public-body.cash-buyers-page label:has(input[name="communicationConsent"]) { background: #eef3f9 !important; border-color: #dfe8f3 !important; box-shadow: 0 12px 22px rgba(11, 31, 61, 0.06); } body.public-body .buyer-network-home-benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 999px; background: rgba(255, 255, 255,0.12); border: 1px solid rgba(255, 255, 255,0.16); color: #ffffff; box-shadow: 0 10px 18px rgba(11, 31, 61, 0.12); } body.public-body .buyer-network-home-benefit-text { color: rgba(255, 255, 255,0.96); font-size: 0.92rem; font-weight: 650; line-height: 1.45; } body.public-body .buyer-network-toggle-chevron { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 999px; background: rgba(10, 20, 36, 0.18); border: 1px solid rgba(255, 255, 255, 0.16); } body.public-body .buyer-network-toggle-icon { transition: transform 0.24s ease; } body.public-body .buyer-network-shell.is-open .buyer-network-toggle-icon { transform: rotate(180deg); } body.public-body .buyer-network-shell.is-open .buyer-network-toggle-action { background: rgba(10, 20, 36, 0.26); } body.public-body .site-cta-band { padding-top: 6.5rem; padding-bottom: 6.5rem; } body.public-body .site-cta-band .cash-buyers-form { box-shadow: 0 24px 48px rgba(11, 31, 61, 0.18); } @media (max-width: 768px) { body.public-body .buyer-network-preview-card { padding: 1.1rem; } body.public-body .buyer-network-preview-footer { align-items: flex-start; } body.public-body .buyer-network-toggle { grid-template-columns: 1fr; gap: 0.95rem; padding: 1rem; } body.public-body .buyer-network-toggle-copy-top { align-items: flex-start; } body.public-body .buyer-network-toggle-chevron { width: 100%; height: 2.5rem; } } body.public-body .site-footer { position: relative; } body.public-body .site-footer::before { left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 9999px; } body.public-body .site-footer-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { body.public-body .site-footer-grid { grid-template-columns: 1.35fr 0.95fr 1.25fr 0.72fr 1.12fr; align-items: start; } } body.public-body .site-footer-contact { min-width: 0; } body.public-body .site-footer-social { padding-left: 0.25rem; } body.public-body .site-footer-cta { min-height: 100%; } /* These three sit inside the tracker's LEFT shell column, not the full page width, so a hard `repeat(3, 1fr)` handed them 157px each at 1280px — wide enough while their body copy was hidden, and cramped to three words a line the moment it came back ("Paste your / reference", "Need direct / help?"). The markup now places this row BELOW that shell instead of inside the rail, so three columns finally have ~360px each and the copy reads. Below 768px it drops to one column further down this file. */ body.public-body .tracker-point-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* The three cards under "Track Your Deal Status" each carry a heading AND a line of body copy. A blanket `display: none` on that copy shipped in the March 27 premium pass, so all three rendered as an icon, a title, and 40px of empty card — which reads as a component that failed to load, not as a compact one. The copy is the only thing that answers "where do I find my reference ID". */ body.public-body .tracker-point-card p { max-width: 34ch; } body.public-body .metric-premium-card { border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.82); background: linear-gradient(180deg, rgba(255, 255, 255,0.98), rgba(238, 243, 249,0.94)); box-shadow: 0 18px 40px rgba(11, 31, 61, 0.08); } body.public-body .coaching-bundle-card { background: linear-gradient(135deg, #0b1f3d 0%, #13436b 42%, #13436b 100%); box-shadow: 0 28px 56px rgba(11, 31, 61, 0.16); } body.public-body .site-profile-menu { position: relative; display: flex; align-items: center; } body.public-body .site-profile-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 9999px; border: 1px solid rgba(223, 232, 243, 0.9); background: linear-gradient(180deg, rgba(255, 255, 255,0.98), rgba(238, 243, 249,0.96)), radial-gradient(circle at top, rgba(19, 67, 107,0.1), transparent 55%); box-shadow: 0 1px 2px rgba(11, 31, 61, 0.06), 0 12px 28px rgba(11, 31, 61, 0.1); color: #13436b; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease; } body.public-body .site-profile-trigger:hover { transform: translateY(-1px); border-color: rgba(136, 160, 194, 0.95); box-shadow: 0 1px 2px rgba(11, 31, 61, 0.06), 0 16px 34px rgba(11, 31, 61, 0.12); } body.public-body .site-profile-trigger:focus-visible, body.public-body .site-profile-item:focus-visible { outline: 2px solid #13436b; outline-offset: 3px; } body.public-body .site-profile-trigger-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; } body.public-body .site-profile-icon { width: 1.5rem; height: 1.5rem; color: currentColor; } body.public-body .site-profile-trigger-mini-badge { position: absolute; right: -0.52rem; bottom: -0.4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.24rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(160deg, #b11d29 0%, #8f0f1c 100%); box-shadow: 0 8px 18px rgba(177, 29, 41, 0.3); border: 2px solid rgba(255, 255, 255,0.95); color: #ffffff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } body.public-body .site-profile-panel { position: absolute; top: calc(100% + 0.8rem); right: 0; width: min(18.5rem, calc(100vw - 2rem)); padding: 0.95rem; border-radius: 16px; border: 1px solid rgba(223, 232, 243, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255,0.985), rgba(238, 243, 249,0.97)), radial-gradient(circle at top right, rgba(19, 67, 107,0.08), transparent 38%); box-shadow: 0 28px 60px rgba(11, 31, 61, 0.16); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease; z-index: 120; } body.public-body .site-profile-menu.is-open .site-profile-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } body.public-body .site-profile-panel-head { padding: 0.1rem 0.15rem 0.8rem; } body.public-body .site-profile-panel-title { color: #0b1f3d; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } body.public-body .site-profile-panel-subtitle { margin-top: 0.22rem; color: #36598d; font-size: 0.82rem; line-height: 1.45; } body.public-body .site-profile-item { display: flex; width: 100%; align-items: center; justify-content: flex-start; border-radius: 12px; padding: 0.78rem 0.9rem; color: #0b1f3d; font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; border: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } body.public-body .site-profile-item:hover { background: rgba(238, 243, 249, 0.96); border-color: rgba(223, 232, 243, 0.92); transform: translateX(1px); } body.public-body .site-profile-item + .site-profile-item { margin-top: 0.2rem; } body.public-body .site-profile-item-primary { background: linear-gradient(160deg, rgba(177, 29, 41,0.1), rgba(177, 29, 41,0.04)); border-color: rgba(177, 29, 41, 0.16); color: #8f0f1c; } body.public-body .site-profile-item-danger { color: #b11d29; } body.public-body .site-profile-item-danger:hover { background: rgba(252, 237, 239, 0.96); border-color: rgba(247, 218, 221, 0.42); color: #8f0f1c; } body.public-body .site-profile-trigger-mobile { width: 100%; height: auto; padding: 0.95rem 1rem; justify-content: space-between; border-radius: 12px; } body.public-body .site-profile-trigger-copy { flex: 1 1 auto; padding-left: 0.85rem; text-align: left; color: #0b1f3d; font-size: 0.96rem; font-weight: 700; } body.public-body .site-profile-trigger-chevron { width: 1rem; height: 1rem; color: #36598d; } body.public-body .site-profile-menu-mobile { width: 100%; } body.public-body .site-profile-panel-mobile { position: static; width: 100%; margin-top: 0.75rem; transform: none; box-shadow: 0 18px 38px rgba(11, 31, 61, 0.1); display: none; opacity: 1; visibility: visible; pointer-events: auto; } body.public-body .site-profile-menu-mobile.is-open .site-profile-panel-mobile { display: block; } @media (max-width: 1023px) { body.public-body .stats-bar { gap: 0.3rem; } body.public-body .stat-item { flex: 1 1 calc(50% - 0.3rem); border-right: 0; border-bottom: 1px solid rgba(223, 232, 243, 0.7); } body.public-body .stat-item:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 767px) { body.public-body .section-stack { gap: 0.55rem; } body.public-body .hero-stats-seam { transform: translateY(-50%); } body.public-body .stats-rail-wrap { padding-top: 0; padding-bottom: 0; } body.public-body .stats-bar { padding: 0.85rem; } body.public-body .stat-item { flex-basis: 100%; border-bottom: 1px solid rgba(223, 232, 243, 0.7); } body.public-body .stat-item:not(:last-child)::after { display: none; } body.public-body .stat-item:last-child { border-bottom: 0; } body.public-body .how-buying-section { padding-top: 5.8rem; } body.public-body.deals-page .deals-hero { padding-bottom: 4.9rem !important; } body.public-body.deals-page .deals-filter-bar { width: 100%; } body.public-body.deals-page .deals-filter-surface { padding: 0.9rem; border-radius: 16px; } body.public-body.deals-page .deals-filter-toolbar { align-items: stretch; } body.public-body.deals-page .deals-filter-group { justify-content: center; } body.public-body.deals-page .deals-filter-seam { margin-top: -2.35rem; padding-bottom: 0; } body.public-body.deals-page .deals-content-section { padding-top: 2.15rem !important; } body.public-body.deals-page .deals-results-heading { font-size: 1.8rem; } body.public-body.deals-page .deals-results-copy { max-width: none; } body.public-body.deals-page .deals-grid { grid-template-columns: minmax(0, 22rem); } body.public-body .tracker-point-grid { grid-template-columns: 1fr; } } /* ============================================================ v2 polish layer — additive refinement, no structural changes. Tightens type, modernizes hero overlay for distressed photos, adds subtle motion, sharpens cards and CTAs. ============================================================ */ body.public-body h1, body.public-body h2, body.public-body h3, body.public-body .section-title-gradient { text-wrap: balance; letter-spacing: -0.018em; } body.public-body h1 { line-height: 1.04; } body.public-body h2 { line-height: 1.12; } body.public-body p { text-wrap: pretty; } body.public-body .gradient-text, body.public-body .section-title-gradient { color: #13436b; } body.public-body .section-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem; border-radius: 0.5rem; border: 1px solid rgba(177, 29, 41, 0.16); background: linear-gradient(135deg, rgba(177, 29, 41, 0.08), rgba(19, 67, 107, 0.06)); color: #b11d29; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(177, 29, 41, 0.08); } body.public-body .section-underline { position: relative; display: inline-block; padding-bottom: 0.45rem; } body.public-body .section-underline::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 3.6rem; height: 3px; border-radius: 9999px; /* Two-Voice: red -> navy. No third brand hue on chrome. */ background: linear-gradient(90deg, #b11d29, #13436b); } /* Hero photo overlay — heavier contrast so darker distressed photos read clean */ body.public-body .hero-slide-frame::after, .hero-slide-frame::after { background: linear-gradient(180deg, rgba(10, 20, 36, 0.06) 0%, rgba(10, 20, 36, 0.18) 38%, rgba(10, 20, 36, 0.42) 100%), radial-gradient(circle at 86% 10%, rgba(177, 29, 41, 0.16), transparent 36%); } body.public-body .hero-slide, .hero-slide { filter: saturate(0.92) contrast(1.08) brightness(0.86); } body.public-body .hero-slide-label, .hero-slide-label { border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.94); color: #13436b; font-weight: 700; backdrop-filter: blur(6px); } body.public-body .site-hero-card, .site-hero-card { border-radius: 16px; } /* Buttons — subtle inner highlight on hover, crisp focus ring */ body.public-body .btn-primary, body.public-body .btn-secondary, body.public-body .site-button-primary, body.public-body .site-button-secondary { will-change: transform, box-shadow; } body.public-body .btn-primary::after, body.public-body .btn-secondary::after, body.public-body .site-button-primary::after, body.public-body .site-button-secondary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%); transform: translateX(-110%); transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } body.public-body .btn-primary:hover::after, body.public-body .btn-secondary:hover::after, body.public-body .site-button-primary:hover::after, body.public-body .site-button-secondary:hover::after { transform: translateX(110%); } body.public-body .btn-primary:focus-visible, body.public-body .btn-secondary:focus-visible, body.public-body .site-button-primary:focus-visible, body.public-body .site-button-secondary:focus-visible { outline: 2px solid rgba(177, 29, 41, 0.6); outline-offset: 3px; } /* Card polish — slightly tighter border radius, refined hover lift */ body.public-body .feature-card, body.public-body .step-node, body.public-body .card-hover, body.public-body .public-card-hover { border-radius: 16px; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease; } body.public-body .feature-card:hover, body.public-body .step-node:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(11, 31, 61, 0.12); border-color: rgba(136, 160, 194, 0.55); } body.public-body .deal-card { border-radius: 16px; } body.public-body .deal-card-accent { height: 5px; /* Two-Voice: red (urgency) -> navy (trust). No third brand hue on chrome. */ background: linear-gradient(90deg, rgba(177, 29, 41, 1) 0%, rgba(19, 67, 107, 0.96) 100%); box-shadow: 0 4px 14px rgba(177, 29, 41, 0.16); } /* Property thumbnail: one card image size for every surface that renders one. index.html and deals.html each carried an identical copy of this in their own