:root { --ink:#192037; --muted:#71778a; --line:#e9e7e2; --violet:#5142d7; --violet-dark:#30258e; --coral:#ff715b; --teal:#0cae9d; --shadow:0 18px 45px rgba(37,33,74,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-height:100vh; background:#fffdfa; color:var(--ink); font-family:"DM Sans",sans-serif; } body::before { content:""; position:fixed; z-index:-1; inset:0; background:radial-gradient(circle at 94% 8%,rgba(255,228,159,.34),transparent 20%),radial-gradient(circle at 2% 42%,rgba(221,225,255,.38),transparent 19%); pointer-events:none; } .shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:18px 0 72px; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .brand,.planner-link,.nav-links a { color:var(--ink); text-decoration:none; } .brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:700; letter-spacing:-.07em; } .brand>span:last-child>span { color:var(--coral); } .brand-mark { display:flex; align-items:end; gap:2px; width:21px; height:21px; padding:4px; border-radius:7px; background:var(--ink); } .brand-mark i { display:block; width:3px; background:#fff; border-radius:3px; } .brand-mark i:nth-child(1) { height:5px; } .brand-mark i:nth-child(2) { height:10px; } .brand-mark i:nth-child(3) { height:7px; } .nav-links { display:flex; gap:28px; margin-left:82px; } .nav-links a { color:var(--muted); font-size:14px; font-weight:600; } .nav-links a:hover { color:var(--violet); } .planner-link { padding:10px 14px; border-radius:12px; background:#f1efff; color:var(--violet-dark); font-size:13px; font-weight:700; } .planner-link span { margin-left:5px; }
.hero { position:relative; display:flex; min-height:390px; overflow:hidden; padding:58px 64px; border-radius:30px; background:#20233c; color:white; isolation:isolate; } .hero::before { content:""; position:absolute; z-index:-1; right:-10%; bottom:-75%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#7666f1 0,#4a3ec1 30%,transparent 68%); opacity:.76; } .hero::after { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.3) .8px,transparent .8px); background-size:14px 14px; opacity:.12; mask-image:linear-gradient(to right,black,transparent 70%); } .hero-copy { max-width:650px; } .eyebrow { margin:0 0 10px; color:rgba(255,255,255,.64); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; } .eyebrow.muted { color:#8b8d9e; } h1,h2 { margin:0; font-family:"Playfair Display",serif; letter-spacing:-.045em; } h1 { font-size:clamp(2.8rem,5.2vw,4.55rem); line-height:.98; } h1 em { color:#ffcf87; font-weight:600; } .lede { max-width:560px; margin:24px 0 20px; color:#c8ccdc; font-size:16px; line-height:1.65; } .hero-trust { display:inline-flex; align-items:center; gap:8px; color:#d8d7ff; font-size:13px; font-weight:600; } .pulse { width:8px; height:8px; border-radius:50%; background:#7ff0d0; box-shadow:0 0 0 5px rgba(127,240,208,.12); }
.hero-orbit { position:absolute; right:7%; top:50%; width:340px; height:340px; transform:translateY(-50%); } .orbit-ring { position:absolute; border:1px solid rgba(255,255,255,.19); border-radius:50%; } .ring-one { inset:0; } .ring-two { inset:48px; border-color:rgba(255,207,135,.56); } .orbit-ticket { position:absolute; top:88px; left:74px; display:flex; flex-direction:column; justify-content:center; width:190px; height:142px; padding:22px; transform:rotate(-9deg); border:1px solid rgba(255,255,255,.5); border-radius:17px; background:linear-gradient(135deg,#ff7d68,#f75983); box-shadow:0 18px 35px rgba(6,5,27,.3); } .orbit-ticket::after { content:""; position:absolute; right:18px; top:16px; width:29px; height:29px; border-radius:50%; border:1px solid rgba(255,255,255,.75); } .orbit-ticket span { font-size:10px; font-weight:700; letter-spacing:.2em; } .orbit-ticket strong { margin:4px 0; font-size:23px; letter-spacing:-.05em; } .orbit-ticket small { color:rgba(255,255,255,.85); font-size:10px; }
.search-panel { position:relative; z-index:2; margin:-34px 30px 0; padding:23px 26px 15px; border:1px solid rgba(255,255,255,.7); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 17px 45px rgba(37,33,74,.14); backdrop-filter:blur(12px); } .search-heading { display:flex; align-items:center; gap:10px; margin-bottom:16px; } .search-heading .eyebrow { margin-bottom:3px; } .search-heading h2 { font-family:"DM Sans",sans-serif; font-size:17px; font-weight:700; letter-spacing:-.03em; } .search-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#f1efff; color:var(--violet); font-size:25px; line-height:1; } .filters { display:grid; grid-template-columns:1.5fr .84fr .84fr .78fr auto; gap:10px; } .field { display:flex; min-width:0; flex-direction:column; gap:5px; } .field span { color:#8b8d9e; font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } input,select,button { font:inherit; } input,select { width:100%; height:45px; min-width:0; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:#fff; color:var(--ink); font-size:13px; transition:border-color .2s,box-shadow .2s; } input:focus,select:focus { border-color:#aaa1fb; box-shadow:0 0 0 3px rgba(81,66,215,.1); } #show-search::placeholder { color:#aaaebe; } .primary-button { height:45px; align-self:end; padding:0 17px; border:none; border-radius:10px; background:var(--violet); color:white; cursor:pointer; font-size:13px; font-weight:700; transition:background .2s,transform .2s; } .primary-button:hover { background:var(--violet-dark); transform:translateY(-1px); } .primary-button span { margin-left:7px; font-size:17px; } .quick-filter { display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:0; border:0; background:transparent; color:var(--violet); cursor:pointer; font-size:12px; font-weight:700; } .quick-filter:hover { color:var(--violet-dark); }
.insight-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:27px 0 65px; } .insight-card { display:flex; min-height:130px; gap:14px; padding:20px; border-radius:18px; color:var(--ink); text-decoration:none; } .coral { background:#fff0ec; } .teal { background:#e8faf6; } .planner-card { background:#f1efff; } .insight-icon { display:grid; flex:0 0 36px; height:36px; place-items:center; border-radius:11px; color:white; font-size:19px; font-weight:700; } .coral .insight-icon { background:var(--coral); } .teal .insight-icon { background:var(--teal); } .planner-card .insight-icon { background:var(--violet); } .stat-label { display:block; color:#737384; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; } .stat-value { display:block; margin-top:5px; font-size:28px; letter-spacing:-.07em; } .stat-copy { display:block; max-width:230px; margin-top:3px; color:#5e6074; font-size:12px; line-height:1.35; } .planner-card strong { display:block; margin-top:6px; font-size:17px; letter-spacing:-.04em; } .card-arrow { display:block; margin-top:9px; color:var(--violet); font-size:12px; font-weight:700; }
.feature-section { margin-bottom:65px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; } .section-heading h2 { font-size:clamp(2rem,3.2vw,2.9rem); line-height:1; } .opportunity-meta { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }.panel-copy { max-width:340px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; } .drop-strip-wrap { position:relative; }.drop-strip { display:grid; grid-auto-columns:minmax(245px,1fr); grid-auto-flow:column; gap:14px; overflow-x:auto; padding:3px 2px 11px; scrollbar-width:thin; } .drop-card { min-height:226px; padding:18px; border:1px solid #eeece8; border-radius:18px; background:#fff; box-shadow:0 8px 23px rgba(37,33,74,.05); cursor:pointer; transition:transform .2s,box-shadow .2s; } .drop-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); } .drop-topline { margin-bottom:13px; } .drop-chip,.drop-rating,.deal-tag { display:inline-flex; align-items:center; width:fit-content; border-radius:100px; font-weight:700; } .drop-chip { padding:5px 8px; background:#fff0ec; color:#d04c3d; font-size:10px; letter-spacing:.09em; text-transform:uppercase; } .drop-show { min-height:2.45em; font-size:17px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; } .drop-property { min-height:1.4em; margin-top:5px; color:var(--muted); font-size:12px; font-weight:500; } .drop-meta-row { margin:12px 0 9px; } .drop-rating { padding:5px 8px; background:#fff7e5; color:#9b6b11; font-size:10px; } .drop-date { color:#53576a; font-size:12px; font-weight:600; } .drop-prices { display:flex; align-items:baseline; gap:8px; margin-top:15px; } .drop-old { color:#a3a6b2; font-size:13px; font-weight:600; text-decoration:line-through; } .drop-new { font-size:24px; font-weight:700; letter-spacing:-.06em; } .drop-foot { margin-top:5px; color:#148875; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .empty { padding:26px 0; color:var(--muted); }
.deal-section { padding-top:50px; border-top:1px solid var(--line); } .deal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .deal-card { overflow:hidden; border:1px solid #eeeae4; border-radius:18px; background:#fff; cursor:pointer; transition:transform .22s,box-shadow .22s; } .deal-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); } .deal-visual { position:relative; aspect-ratio:1.18; overflow:hidden; background:#e8e7ee; } .deal-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(18,18,39,.78)); } .deal-image { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s,transform .5s; } .deal-image.loaded { opacity:1; } .deal-card:hover .deal-image { transform:scale(1.04); } .deal-price { position:absolute; z-index:1; top:11px; left:11px; padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.94); color:var(--ink); font-size:16px; font-weight:700; letter-spacing:-.05em; } .deal-caption { position:absolute; z-index:1; right:13px; bottom:12px; left:13px; } .deal-kicker { margin-bottom:4px; color:#ffe3ae; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } .deal-title { display:-webkit-box; overflow:hidden; color:white; font-family:"DM Sans",sans-serif; font-size:20px; font-weight:700; letter-spacing:-.045em; line-height:1.08; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .deal-venue { overflow:hidden; margin-top:5px; color:rgba(255,255,255,.78); font-size:10px; font-weight:600; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } .deal-body { padding:13px; } .deal-tags { display:flex; gap:5px; flex-wrap:wrap; } .deal-tag { padding:5px 7px; background:#f2f1f8; color:#656177; font-size:9px; letter-spacing:.05em; text-transform:uppercase; } .deal-tag.today { background:#e8faf6; color:#138474; } .deal-tag.rating { background:#fff7e5; color:#9b6b11; } .deal-date { margin-top:9px; color:#65697a; font-size:12px; font-weight:600; } .deal-cta { margin-top:10px; color:var(--violet); font-size:11px; font-weight:700; } .skeleton { height:290px; border-radius:18px; background:linear-gradient(90deg,#f1f0ed,#fbfaf8,#f1f0ed); background-size:200% 100%; animation:shimmer 1.2s infinite; } @keyframes shimmer { to { background-position:-200% 0; } }
@media (max-width:960px) { .hero { padding:50px 46px; } .hero-orbit { right:-10%; opacity:.72; } .filters { grid-template-columns:1.4fr 1fr 1fr; } .deal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:690px) { .shell { width:min(100% - 24px,1180px); padding-top:5px; } .nav-links { display:none; } .topbar { margin-bottom:8px; } .planner-link { padding:9px 10px; } .hero { min-height:365px; padding:42px 24px; border-radius:23px; } .hero-orbit { right:-65%; top:67%; transform:scale(.76); } .lede { max-width:360px; font-size:14px; } .search-panel { margin:-26px 8px 0; padding:18px; } .filters { grid-template-columns:1fr 1fr; } .field-wide { grid-column:1/-1; } .insight-grid { grid-template-columns:1fr; margin:20px 0 47px; } .insight-card { min-height:108px; } .section-heading { display:block; } .panel-copy { margin-top:11px; } .feature-section { margin-bottom:47px; } .deal-section { padding-top:39px; } .deal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .deal-title { font-size:17px; } .deal-body { padding:10px; } .deal-tag { font-size:8px; } .deal-date { font-size:11px; } }
@media (max-width:390px) { .filters { grid-template-columns:1fr; } .field-wide { grid-column:auto; } .deal-grid { grid-template-columns:1fr; } .hero-orbit { display:none; } }

/* Safari keeps a fairly wide intrinsic size for date inputs.  At phone widths
   a single column prevents the From and To controls from colliding. */
@media (max-width:520px) { .filters { grid-template-columns:1fr; } .field-wide { grid-column:auto; } .filters .primary-button { width:100%; } }

.search-input-wrap { position:relative; display:block; }.search-input-wrap #show-search { padding-right:42px; }.clear-search { position:absolute; top:50%; right:7px; display:grid; width:30px; height:30px; place-items:center; padding:0; transform:translateY(-50%); border:0; border-radius:8px; background:#f1efff; color:#5142d7; cursor:pointer; font-size:21px; line-height:1; }.clear-search:hover { background:#e4e0ff; }.clear-search[hidden] { display:none; }
.home-quick-filters { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--line); }.area-filter { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }.area-filter-label { margin-right:4px; color:#4d4966; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.area-filter-option { min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#626778; cursor:pointer; font-size:11px; font-weight:700; transition:border-color .18s,background .18s,color .18s,box-shadow .18s; }.area-filter-option:hover { border-color:#bbb3fb; color:var(--violet); }.area-filter-option.active { border-color:#5142d7; background:#f1efff; color:#3b2da5; box-shadow:0 0 0 3px rgba(81,66,215,.08); }
@media (max-width:640px) { .home-quick-filters { align-items:flex-start; flex-direction:column; }.quick-filter { margin-top:0; } }
.show-all-drops { color:var(--violet); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }.show-all-drops:hover { color:var(--violet-dark); }.drop-scroll-actions { position:absolute; inset:0; z-index:2; pointer-events:none; }.drop-scroll-button { position:absolute; top:50%; display:grid; width:36px; height:36px; place-items:center; padding:0; transform:translateY(-50%); border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.98); box-shadow:0 7px 18px rgba(37,33,74,.16); color:var(--violet); cursor:pointer; font-size:18px; font-weight:700; pointer-events:auto; }.drop-scroll-previous { left:0; }.drop-scroll-next { right:0; }.drop-scroll-button:hover { border-color:#bbb3fb; background:#f1efff; }.drop-scroll-button[hidden],.drop-scroll-actions[hidden],.show-all-drops[hidden] { display:none; }
@media (max-width:690px) { .opportunity-meta { align-items:flex-start; margin-top:11px; } }