/* hero-additions.css Trust strip + press strip + neighborhood photo cards. Appends cleanly on top of the existing stylesheet; no existing classes overridden. Deploy to /public_html/assets/hero-additions.css and reference in index.html . */ /* ========================================================================== Trust strip — horizontal bar directly under the hero form. Elegant, thin, no gradients, no loud colors. Separator dots between items. ========================================================================== */ .trust-strip { max-width: 1120px; margin: 28px auto 0; padding: 14px 24px; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } .trust-strip__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: #475569; } .trust-strip__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .trust-strip__item strong { color: #0f172a; font-weight: 600; } .trust-strip__item--link { color: #475569; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .trust-strip__item--link:hover, .trust-strip__item--link:focus-visible { color: #0f172a; border-bottom-color: #cbd5e1; } .trust-strip__icon { width: 18px; height: 18px; color: #64748b; flex-shrink: 0; } .trust-strip__stars { color: #fbbf24; letter-spacing: 1px; } @media (max-width: 720px) { .trust-strip { padding: 12px 16px; } .trust-strip__inner { gap: 18px; font-size: 13px; } } /* ========================================================================== Press strip — "As featured in" row with outlet wordmarks. Uses typography (not logos) so nothing is pulled from foreign sites / avoids trademark copy issues and works without image assets. ========================================================================== */ .press-strip { max-width: 1120px; margin: 28px auto 0; padding: 20px 24px 8px; text-align: center; } .press-strip__label { font-family: Inter, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; margin-bottom: 14px; } .press-strip__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px; } .press-strip__logo { color: #475569; text-decoration: none; font-size: 16px; opacity: 0.75; transition: opacity 0.15s ease; } .press-strip__logo:hover, .press-strip__logo:focus-visible { opacity: 1; } .press-strip__logo-text { display: inline-block; line-height: 1; } @media (max-width: 720px) { .press-strip__logos { gap: 20px; font-size: 14px; } .press-strip__logo { font-size: 14px; } } /* ========================================================================== Neighborhood photo cards — replaces the plain-text "Recently Purchased" chips. Has a gradient-fallback when the photo file is missing (until you upload real photos to /assets/neighborhoods/). ========================================================================== */ .hoods { max-width: 1120px; margin: 64px auto 0; padding: 0 24px; } .hoods__title { font-family: Fraunces, Georgia, serif; font-size: 28px; color: #0f172a; text-align: center; margin: 0 0 28px; } .hoods__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; } .hood-card { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; /* gradient fallback in case photo file is missing */ background: linear-gradient(135deg, #334155 0%, #475569 55%, #64748b 100%); } .hood-card:hover, .hood-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } .hood-card__photo { position: absolute; inset: 0; background-size: cover; background-position: center; } .hood-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%); } .hood-card__label { position: absolute; left: 16px; bottom: 14px; color: #fff; font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.4); z-index: 1; } .hoods__foot { text-align: center; margin-top: 24px; } .hoods__foot a { color: #c2410c; font-weight: 600; text-decoration: none; font-size: 15px; } .hoods__foot a:hover { text-decoration: underline; } @media (max-width: 480px) { .hoods__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hood-card__label { font-size: 16px; left: 12px; bottom: 10px; } }