/* Doorstep Local — neighborhood directory chrome (resident hubs) Each hub sets --dir-brand / --dir-on-brand / --dir-cta on or .dir-root */ :root { --dir-brand: #f58f00; --dir-on-brand: #1a1a1a; --dir-brand-soft: color-mix(in srgb, var(--dir-brand) 14%, #fff); --dir-cta: #1534b2; --dir-cta-on: #fff; --dir-ink: #0f172a; --dir-muted: #64748b; --dir-paper: #ffffff; --dir-paper-soft: #f8fafc; --dir-line: #e2e8f0; --dir-radius: 1rem; --dir-font: "Plus Jakarta Sans", system-ui, sans-serif; --dir-text: 1.125rem; --dir-lh: 1.55; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.dir-body { margin: 0; font-family: var(--dir-font); font-size: var(--dir-text); line-height: var(--dir-lh); color: var(--dir-ink); background: var(--dir-paper); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select { font: inherit; } .dir-container { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } .dir-container-sm { width: min(720px, calc(100% - 2rem)); margin-inline: auto; } /* Top nav — solid brand bar */ .dir-nav { position: sticky; top: 0; z-index: 50; background: var(--dir-brand); color: var(--dir-on-brand); box-shadow: 0 1px 0 color-mix(in srgb, var(--dir-on-brand) 12%, transparent); } .dir-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1200px, calc(100% - 1.5rem)); margin-inline: auto; min-height: 3.5rem; padding: .5rem 0; } .dir-wordmark { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--dir-on-brand); white-space: nowrap; flex-shrink: 0; } .dir-nav__right { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; } .dir-nav__links { display: none; gap: 1.25rem; align-items: center; font-size: .95rem; font-weight: 600; } .dir-nav__links a { opacity: .92; } .dir-nav__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .dir-nav__actions { display: flex; align-items: center; gap: .5rem; } .dir-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: 9999px; border: none; cursor: pointer; padding: .55rem 1rem; font-weight: 700; font-size: .9rem; transition: transform .15s ease, opacity .15s ease; } .dir-btn:hover { transform: translateY(-1px); } .dir-btn-cta { background: var(--dir-cta); color: var(--dir-cta-on); } .dir-btn-ghost { background: transparent; color: var(--dir-on-brand); border: 1px solid color-mix(in srgb, var(--dir-on-brand) 35%, transparent); } .dir-btn-brand { background: var(--dir-brand); color: var(--dir-on-brand); } .dir-btn-outline { background: #fff; color: var(--dir-ink); border: 1px solid var(--dir-line); } .dir-btn-sm { padding: .4rem .85rem; font-size: .85rem; } .dir-menu-btn { display: inline-flex; background: transparent; border: none; cursor: pointer; color: var(--dir-on-brand); padding: .35rem; border-radius: .5rem; } .dir-mobile { display: none; flex-direction: column; gap: .25rem; padding: .5rem 1rem 1rem; background: var(--dir-brand); border-top: 1px solid color-mix(in srgb, var(--dir-on-brand) 15%, transparent); } .dir-mobile.open { display: flex; } .dir-mobile a { color: var(--dir-on-brand); font-weight: 600; padding: .65rem .5rem; border-radius: .5rem; } .dir-mobile a:hover { background: color-mix(in srgb, var(--dir-on-brand) 10%, transparent); } @media (min-width: 900px) { .dir-nav__links { display: flex; } .dir-nav__right { gap: 1.5rem; } .dir-menu-btn { display: none; } .dir-mobile, .dir-mobile.open { display: none !important; } } /* Hero */ .dir-hero { position: relative; color: #fff; min-height: clamp(28rem, 72vh, 40rem); display: flex; align-items: flex-end; justify-content: center; padding: 5rem 0 3.5rem; background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 50%, #0c4a6e 100%); background-size: cover; background-position: center; overflow: hidden; } .dir-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.55) 45%, rgba(15,23,42,.78) 100%); pointer-events: none; } .dir-hero__inner { position: relative; z-index: 1; text-align: center; width: min(800px, calc(100% - 2rem)); } .dir-pill { display: inline-flex; align-items: center; gap: .4rem; background: #16a34a; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 9999px; margin-bottom: 1rem; } .dir-pill__dot { width: .45rem; height: .45rem; border-radius: 9999px; background: #bbf7d0; box-shadow: 0 0 0 3px rgba(187,247,208,.35); } .dir-hero h1 { margin: 0 0 .75rem; font-size: clamp(1.85rem, 5vw, 3.35rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,0,0,.35); } .dir-hero__sub { margin: 0 auto 1.5rem; max-width: 36rem; color: rgba(255,255,255,.88); font-size: clamp(.95rem, 2.2vw, 1.15rem); text-shadow: 0 1px 8px rgba(0,0,0,.3); } .dir-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; background: #fff; border-radius: 9999px; padding: .4rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); margin: 0 auto 1rem; max-width: 40rem; } .dir-search select, .dir-search input { border: none; outline: none; background: transparent; padding: .65rem .9rem; color: var(--dir-ink); } .dir-search select { max-width: 10rem; border-right: 1px solid var(--dir-line); font-weight: 600; font-size: .9rem; } .dir-search input { flex: 1; min-width: 10rem; font-size: .95rem; } .dir-search .dir-btn { border-radius: 9999px; padding: .65rem 1.25rem; } .dir-quick { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .dir-quick a, .dir-quick button { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); border-radius: 9999px; padding: .45rem .95rem; font-size: .85rem; font-weight: 600; cursor: pointer; } .dir-quick a:hover, .dir-quick button:hover { background: rgba(255,255,255,.24); } /* Sections */ .dir-section { padding: 3.5rem 0; } .dir-section-sm { padding: 2rem 0; } .dir-section--soft { background: var(--dir-paper-soft); } .dir-section h2 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; } .dir-muted { color: var(--dir-muted); } .dir-need-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .dir-need-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .dir-need-grid { grid-template-columns: 1fr 1fr 1fr; } } .dir-need { display: flex; flex-direction: column; gap: .5rem; background: #fff; border: 1px solid var(--dir-line); border-radius: var(--dir-radius); padding: 1.25rem; transition: box-shadow .2s, transform .2s; } .dir-need:hover { box-shadow: 0 12px 28px rgba(15,23,42,.08); transform: translateY(-2px); } .dir-need__icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--dir-brand-soft); color: var(--dir-brand); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .dir-need strong { font-size: 1.05rem; } .dir-need p { margin: 0; font-size: .95rem; color: var(--dir-muted); flex: 1; } .dir-need__cta { font-weight: 700; font-size: .9rem; color: var(--dir-brand); margin-top: .25rem; } /* Sponsor */ .dir-sponsor { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--dir-brand), color-mix(in srgb, var(--dir-brand) 70%, #000)); color: var(--dir-on-brand); border-radius: 1.25rem; padding: 1.5rem; } .dir-sponsor__badge { display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: .35rem; } .dir-sponsor h3 { margin: 0 0 .35rem; font-size: 1.15rem; } .dir-sponsor p { margin: 0; opacity: .9; font-size: .95rem; max-width: 36rem; } .dir-sponsor__avatar { width: 3.25rem; height: 3.25rem; border-radius: 1rem; flex-shrink: 0; background: color-mix(in srgb, var(--dir-on-brand) 12%, transparent); display: flex; align-items: center; justify-content: center; font-weight: 800; } .dir-sponsor .dir-btn { background: #fff; color: var(--dir-ink); } /* Cards / biz */ .dir-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .dir-grid-2 { grid-template-columns: 1fr 1fr; } } .dir-card { background: #fff; border: 1px solid var(--dir-line); border-radius: var(--dir-radius); padding: 1.25rem; } .dir-card--placeholder { opacity: .85; background: var(--dir-paper-soft); } .dir-card h3 { margin: .35rem 0; font-size: 1.15rem; } .dir-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; } .dir-pill-tag { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 9999px; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 80%, #000); } .dir-pill-tag--sky { background: #e0f2fe; color: #0369a1; } .dir-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } /* Announce */ .dir-announce { display: flex; flex-direction: column; gap: .75rem; } .dir-announce__item { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dir-line); border-radius: .85rem; padding: 1rem 1.15rem; } .dir-tag { font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dir-brand); background: var(--dir-brand-soft); padding: .3rem .55rem; border-radius: .4rem; white-space: nowrap; } /* Contacts */ .dir-contact-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .dir-contact-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .dir-contact-grid { grid-template-columns: 1fr 1fr 1fr; } } .dir-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dir-muted); margin-bottom: .35rem; } /* Dark CTA band */ .dir-band-dark { background: linear-gradient(135deg, #0f172a 0%, #14532d 100%); color: #fff; padding: 3.5rem 0; } .dir-band-dark .dir-muted { color: rgba(255,255,255,.75); } .dir-band-dark .dir-eyebrow { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #bbf7d0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: .35rem .75rem; border-radius: 9999px; margin-bottom: 1rem; } /* Footer */ .dir-footer { background: #0f172a; color: rgba(255,255,255,.8); padding: 2.5rem 0 1.5rem; font-size: .95rem; } .dir-footer__brand { font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: .35rem; } .dir-footer a { color: rgba(255,255,255,.7); } .dir-footer a:hover { color: #fff; } .dir-footer__powered { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(255,255,255,.5); } .dir-footer__powered a { color: rgba(255,255,255,.65); text-decoration: underline; text-underline-offset: 2px; } /* Modal */ .dir-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; } .dir-modal-backdrop.open { display: flex; } .dir-modal { background: #fff; border-radius: 1rem; padding: 1.5rem; max-width: 26rem; width: 100%; box-shadow: 0 25px 50px rgba(0,0,0,.25); } .dir-modal h3 { margin: 0 0 .5rem; } .dir-modal p { margin: 0 0 1.25rem; color: var(--dir-muted); } .dir-cat-browse { display: flex; flex-wrap: wrap; gap: .5rem; } .dir-cat-browse button { border: 1px solid var(--dir-line); background: #fff; border-radius: 9999px; padding: .45rem .9rem; font-size: .85rem; font-weight: 600; cursor: pointer; } .dir-cat-browse button:hover { border-color: var(--dir-brand); color: var(--dir-brand); } /* ===== Yelp-style browse / results ===== */ .dir-hero--compact { min-height: 0; padding: 2.25rem 0 1.75rem; align-items: center; } .dir-hero--compact .dir-hero__inner { text-align: left; width: min(1120px, calc(100% - 2rem)); } .dir-hero--compact h1 { font-size: clamp(1.55rem, 3.5vw, 2.15rem); margin-bottom: .4rem; } .dir-hero--compact .dir-hero__sub { margin: 0 0 1rem; max-width: 40rem; font-size: 1rem; } .dir-hero--compact .dir-search { margin: 0; max-width: 44rem; border-radius: .85rem; } .dir-hero--compact .dir-pill { margin-bottom: .65rem; } .dir-search-bar { position: sticky; top: 3.5rem; z-index: 40; background: #fff; border-bottom: 1px solid var(--dir-line); padding: .65rem 0; box-shadow: 0 4px 12px rgba(15,23,42,.04); } .dir-search-bar .dir-search { margin: 0; max-width: none; width: 100%; box-shadow: none; border: 1px solid var(--dir-line); border-radius: .75rem; } .dir-search--dense { border-radius: .75rem; } .dir-browse { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; padding: 1.25rem 0 2.5rem; } @media (min-width: 960px) { .dir-browse { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.5rem; } .dir-browse--map { grid-template-columns: 15.5rem minmax(0, 1fr) 16rem; } } .dir-filters { background: #fff; border: 1px solid var(--dir-line); border-radius: var(--dir-radius); padding: 1rem; position: sticky; top: 7.25rem; } .dir-filters h3 { margin: 0 0 .75rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dir-muted); } .dir-filters__group { margin-bottom: 1rem; } .dir-filters__group:last-child { margin-bottom: 0; } .dir-filter-list { display: flex; flex-direction: column; gap: .2rem; } .dir-filter-chip { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; cursor: pointer; border: none; background: transparent; color: var(--dir-ink); padding: .45rem .55rem; border-radius: .55rem; font-size: .92rem; font-weight: 600; } .dir-filter-chip:hover { background: var(--dir-paper-soft); } .dir-filter-chip.is-active { background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 75%, #000); } .dir-filter-chip__count { font-size: .75rem; font-weight: 700; color: var(--dir-muted); background: var(--dir-paper-soft); padding: .1rem .4rem; border-radius: 9999px; } .dir-filter-chip.is-active .dir-filter-chip__count { background: #fff; color: inherit; } .dir-filters select, .dir-filters__sort { width: 100%; border: 1px solid var(--dir-line); border-radius: .55rem; padding: .5rem .65rem; background: #fff; font-weight: 600; font-size: .9rem; } .dir-filters__check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; cursor: pointer; } .dir-filters-mobile { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; } @media (min-width: 960px) { .dir-filters-mobile { display: none; } } @media (max-width: 959px) { .dir-filters { position: static; } .dir-filters[data-collapsed="true"] .dir-filters__body { display: none; } } .dir-results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; } .dir-results-head h2 { margin: 0; font-size: 1.35rem; } .dir-results-meta { font-size: .95rem; color: var(--dir-muted); } .dir-results { display: flex; flex-direction: column; gap: .65rem; } .dir-result { display: grid; gap: .85rem; align-items: start; grid-template-columns: 4.5rem minmax(0, 1fr); background: #fff; border: 1px solid var(--dir-line); border-radius: .85rem; padding: .85rem; transition: box-shadow .15s ease, border-color .15s ease; } .dir-result:hover { border-color: color-mix(in srgb, var(--dir-brand) 45%, var(--dir-line)); box-shadow: 0 8px 22px rgba(15,23,42,.06); } @media (min-width: 640px) { .dir-result { grid-template-columns: 5.5rem minmax(0, 1fr) auto; padding: 1rem; } } .dir-result--sponsored { background: linear-gradient(180deg, color-mix(in srgb, var(--dir-brand) 8%, #fff), #fff); border-color: color-mix(in srgb, var(--dir-brand) 35%, var(--dir-line)); } .dir-result--placeholder { opacity: .88; background: var(--dir-paper-soft); } .dir-result__thumb { width: 4.5rem; height: 4.5rem; border-radius: .7rem; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 80%, #000); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; } @media (min-width: 640px) { .dir-result__thumb { width: 5.5rem; height: 5.5rem; font-size: 1.15rem; } } .dir-result__body { min-width: 0; } .dir-result__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; margin-bottom: .2rem; } .dir-result__sponsored-label { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dir-muted); } .dir-result h3 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; } .dir-result__cat { font-size: .8rem; font-weight: 700; color: var(--dir-muted); } .dir-result__blurb { margin: .35rem 0 0; font-size: 1rem; color: var(--dir-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dir-result__services { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; } .dir-result__svc { font-size: .72rem; font-weight: 700; padding: .15rem .45rem; border-radius: 9999px; background: var(--dir-paper-soft); color: var(--dir-ink); border: 1px solid var(--dir-line); } .dir-result__row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; margin-top: .45rem; font-size: .88rem; } .dir-result__loc { color: var(--dir-muted); font-weight: 600; } .dir-result__actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } @media (min-width: 640px) { .dir-result__actions { flex-direction: column; align-items: stretch; min-width: 7.5rem; } } .dir-badge-new { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #dcfce7; color: #166534; padding: .15rem .45rem; border-radius: 9999px; } .dir-badge-offer { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #fef3c7; color: #92400e; padding: .15rem .45rem; border-radius: 9999px; } .dir-badge-featured { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 75%, #000); padding: .15rem .45rem; border-radius: 9999px; } .dir-stars { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 700; color: #b45309; } .dir-stars__glyphs { letter-spacing: -.05em; color: #f59e0b; } .dir-stars__count { color: var(--dir-muted); font-weight: 600; font-size: .8rem; } .dir-hours { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; } .dir-hours--open { color: #15803d; } .dir-hours--closed { color: #b91c1c; } .dir-hours__snip { color: var(--dir-muted); font-weight: 600; } .dir-map-col { display: none; background: var(--dir-paper-soft); border: 1px solid var(--dir-line); border-radius: var(--dir-radius); padding: 1rem; min-height: 14rem; position: sticky; top: 7.25rem; } .dir-map-col__placeholder { height: 12rem; border-radius: .75rem; border: 1px dashed var(--dir-line); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--dir-muted); font-size: .9rem; font-weight: 600; padding: 1rem; background: #fff; } @media (min-width: 1200px) { .dir-browse--map .dir-map-col { display: block; } } .dir-secondary { padding: 1.5rem 0 2.5rem; background: var(--dir-paper-soft); border-top: 1px solid var(--dir-line); } .dir-secondary__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 800px) { .dir-secondary__grid { grid-template-columns: 1fr 1fr; } } .dir-panel { background: #fff; border: 1px solid var(--dir-line); border-radius: .85rem; overflow: hidden; } .dir-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .85rem 1rem; border: none; background: #fff; cursor: pointer; font: inherit; font-weight: 800; font-size: 1rem; text-align: left; color: var(--dir-ink); } .dir-panel__head:hover { background: var(--dir-paper-soft); } .dir-panel__chev { color: var(--dir-muted); font-size: .85rem; transition: transform .15s; } .dir-panel.is-open .dir-panel__chev { transform: rotate(180deg); } .dir-panel__body { display: none; padding: 0 1rem 1rem; } .dir-panel.is-open .dir-panel__body { display: block; } .dir-panel .dir-announce__item { padding: .75rem .85rem; } .dir-panel .dir-card { padding: .9rem; } .dir-panel .dir-contact-grid { gap: .65rem; } .dir-panel h3 { font-size: 1rem; } .dir-deals { display: grid; gap: .75rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .dir-deals { grid-template-columns: 1fr 1fr; } } .dir-deal { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--dir-line); border-radius: .85rem; padding: 1rem; } .dir-deal__thumb { width: 3rem; height: 3rem; border-radius: .65rem; flex-shrink: 0; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 80%, #000); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; } .dir-deal h3 { margin: .25rem 0 .3rem; font-size: 1.05rem; } .dir-deal p { margin: 0; font-size: .95rem; color: var(--dir-muted); } .dir-empty { text-align: center; padding: 2rem 1rem; color: var(--dir-muted); border: 1px dashed var(--dir-line); border-radius: .85rem; background: #fff; } .dir-empty strong { display: block; color: var(--dir-ink); margin-bottom: .35rem; } .is-hidden-result { display: none !important; } /* ===== Dense Yelp-style results + sticky map (additive; safe for other hubs) ===== */ .dir-container--browse { width: min(1280px, calc(100% - 1.5rem)); } @media (min-width: 1100px) { .dir-browse--map { grid-template-columns: 14.5rem minmax(0, 1fr) minmax(17.5rem, 22rem); gap: 1.15rem; } .dir-browse--map .dir-map-col { display: block; } } .dir-filters--sticky { position: sticky; top: 7.25rem; max-height: calc(100vh - 8rem); overflow: auto; } @media (max-width: 959px) { .dir-filters--sticky { position: static; max-height: none; overflow: visible; } } .dir-filters__checks { display: flex; flex-direction: column; gap: .45rem; } .dir-price-row { display: flex; flex-wrap: wrap; gap: .35rem; } .dir-price-chip { border: 1px solid var(--dir-line); background: #fff; border-radius: .5rem; padding: .35rem .55rem; font-size: .85rem; font-weight: 800; cursor: pointer; color: var(--dir-ink); } .dir-price-chip.is-active { background: var(--dir-brand-soft); border-color: color-mix(in srgb, var(--dir-brand) 45%, var(--dir-line)); color: color-mix(in srgb, var(--dir-brand) 75%, #000); } .dir-filters-mobile { width: 100%; justify-content: center; } .dir-results--dense { gap: .45rem; } .dir-result--dense { grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem; padding: .55rem .65rem; border-radius: .7rem; align-items: center; } @media (min-width: 640px) { .dir-result--dense { grid-template-columns: 4.5rem minmax(0, 1fr) auto; padding: .6rem .75rem; } } .dir-result--dense .dir-result__thumb { width: 4rem; height: 4rem; border-radius: .55rem; font-size: .9rem; } @media (min-width: 640px) { .dir-result--dense .dir-result__thumb { width: 4.5rem; height: 4.5rem; font-size: 1rem; } } .dir-result--dense h3 { font-size: 1rem; } .dir-result--dense .dir-result__top { margin-bottom: .1rem; gap: .3rem .4rem; } .dir-result--dense .dir-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; font-size: .78rem; color: var(--dir-muted); font-weight: 600; line-height: 1.3; } .dir-result--dense .dir-result__cat { font-size: .78rem; display: inline; } .dir-result--dense .dir-result__blurb { margin: .2rem 0 0; font-size: .88rem; line-height: 1.35; -webkit-line-clamp: 2; } .dir-result--dense .dir-result__services { margin-top: .3rem; gap: .25rem; } .dir-result--dense .dir-result__svc { font-size: .68rem; padding: .1rem .38rem; } .dir-result--dense .dir-result__row { margin-top: .25rem; font-size: .8rem; gap: .35rem .55rem; } .dir-result--dense .dir-result__actions { gap: .3rem; } @media (min-width: 640px) { .dir-result--dense .dir-result__actions { flex-direction: row; flex-wrap: wrap; min-width: 0; max-width: 11rem; justify-content: flex-end; } } .dir-result--dense .dir-result__actions .dir-btn-sm { padding: .3rem .65rem; font-size: .78rem; } .dir-result--dense.dir-result--sponsored { padding-top: .45rem; } .dir-result--dense .dir-result__sponsored-label { margin-bottom: .15rem; font-size: .6rem; } .dir-result.is-map-active, .dir-result.is-highlight { border-color: var(--dir-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dir-brand) 35%, transparent); } .dir-badge-sample { display: inline-flex; align-items: center; font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #e2e8f0; color: #475569; padding: .12rem .4rem; border-radius: 9999px; } .dir-result__more { position: relative; } .dir-result__more-menu { display: none; position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; min-width: 9rem; background: #fff; border: 1px solid var(--dir-line); border-radius: .55rem; box-shadow: 0 10px 28px rgba(15,23,42,.12); padding: .35rem; } .dir-result__more.open .dir-result__more-menu { display: block; } .dir-result__more-menu button, .dir-result__more-menu a { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: .45rem .55rem; border-radius: .4rem; font-size: .82rem; font-weight: 600; color: var(--dir-ink); cursor: pointer; } .dir-result__more-menu button:hover, .dir-result__more-menu a:hover { background: var(--dir-paper-soft); } .dir-map-col--live { padding: .65rem; min-height: 0; } .dir-map { height: calc(100vh - 8.5rem); min-height: 22rem; max-height: 42rem; border-radius: .7rem; overflow: hidden; border: 1px solid var(--dir-line); background: #e8eef5; position: relative; } .dir-map .leaflet-container { height: 100%; width: 100%; font: inherit; } .dir-map__fallback { display: flex; align-items: center; justify-content: center; text-align: center; padding: .85rem 1rem; margin-top: .5rem; color: var(--dir-muted); font-size: .85rem; font-weight: 600; background: #fff; border: 1px dashed var(--dir-line); border-radius: .65rem; } .dir-map__fallback[hidden] { display: none !important; } .dir-map .dir-map__fallback { position: absolute; inset: 0; margin: 0; border: none; z-index: 2; } .dir-map-col__note { margin: .55rem 0 0; font-size: .78rem; } .dir-leaflet-marker { background: var(--dir-brand); color: var(--dir-on-brand); border: 2px solid #fff; border-radius: 9999px; width: 1.65rem; height: 1.65rem; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; box-shadow: 0 2px 8px rgba(15,23,42,.25); } .dir-leaflet-marker.is-active { background: var(--dir-cta); color: #fff; transform: scale(1.12); } /* ===== Resident hub home (Harvest flagship; additive for other dirs) ===== */ .dir-hub .dir-hero--hub { min-height: clamp(22rem, 58vh, 32rem); padding: 3.25rem 0 2.25rem; align-items: flex-end; } .dir-hub .dir-hero--hub .dir-hero__inner { text-align: left; width: min(1120px, calc(100% - 2rem)); } .dir-hub .dir-hero--hub h1 { font-size: clamp(1.85rem, 5.5vw, 3rem); margin-bottom: .5rem; } .dir-hub .dir-hero--hub .dir-hero__sub { margin: 0 0 1.15rem; max-width: 38rem; font-size: clamp(1rem, 2.4vw, 1.2rem); } .dir-hub .dir-hero--hub .dir-search { margin: 0 0 1rem; max-width: 44rem; border-radius: .85rem; } .dir-jump { display: flex; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .15rem 0 .35rem; margin: 0 -.15rem; } .dir-jump::-webkit-scrollbar { display: none; } .dir-jump a { flex: 0 0 auto; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); border-radius: 9999px; padding: .45rem .95rem; font-size: .82rem; font-weight: 700; white-space: nowrap; } .dir-jump a:hover { background: rgba(255,255,255,.28); } .dir-sec-head { margin-bottom: 1.35rem; } .dir-sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; } .dir-sec-eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--dir-brand) 75%, #000); } .dir-sec-sub { margin: .35rem 0 0; max-width: 40rem; font-size: 1rem; } .dir-results-head__title { font-size: 1.2rem !important; } /* Featured / ad network */ .dir-ad-strip { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .dir-ad-strip { grid-template-columns: 1.35fr 1fr 1fr; } } .dir-ad-card { position: relative; display: flex; flex-direction: column; gap: .75rem; background: #fff; border: 1px solid var(--dir-line); border-radius: 1.1rem; padding: 1.15rem 1.15rem 1.25rem; box-shadow: 0 8px 24px rgba(15,23,42,.04); } .dir-ad-card--hero { background: linear-gradient(160deg, color-mix(in srgb, var(--dir-brand) 12%, #fff), #fff); border-color: color-mix(in srgb, var(--dir-brand) 35%, var(--dir-line)); } .dir-ad-card__badge { position: absolute; top: .85rem; right: .85rem; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dir-muted); background: var(--dir-paper-soft); padding: .2rem .5rem; border-radius: 9999px; } .dir-ad-card__avatar { width: 3.25rem; height: 3.25rem; border-radius: .85rem; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 80%, #000); display: flex; align-items: center; justify-content: center; font-weight: 800; } .dir-ad-card h3 { margin: 0 0 .35rem; font-size: 1.15rem; } .dir-ad-card p { margin: 0; color: var(--dir-muted); font-size: .95rem; } .dir-ad-card__meta { margin-top: .55rem; font-size: .8rem; font-weight: 700; color: var(--dir-muted); } .dir-ad-card .dir-actions { margin-top: .85rem; } .dir-deals--hub { grid-template-columns: 1fr; } @media (min-width: 720px) { .dir-deals--hub { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .dir-deals--hub { grid-template-columns: 1fr 1fr 1fr; } } .dir-deal--rich { min-height: 100%; } /* Events */ .dir-event-grid { display: grid; gap: .85rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .dir-event-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .dir-event-grid { grid-template-columns: 1fr 1fr 1fr; } } .dir-event-card { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--dir-line); border-radius: 1rem; padding: 1rem 1.1rem; } .dir-event-card__date { flex-shrink: 0; width: 3.1rem; text-align: center; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 80%, #000); border-radius: .75rem; padding: .45rem .25rem; line-height: 1.1; } .dir-event-card__mon { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .08em; } .dir-event-card__day { display: block; font-size: 1.35rem; font-weight: 900; } .dir-event-card h3 { margin: .35rem 0 .25rem; font-size: 1.05rem; } .dir-event-card p { margin: 0; font-size: .92rem; } .dir-event-card__when { margin-top: .45rem; font-size: .8rem; font-weight: 700; color: var(--dir-muted); } .dir-civic-row { display: grid; gap: .75rem; margin-top: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .dir-civic-row { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .dir-civic-row { grid-template-columns: 1fr 1fr 1fr 1fr; } } /* Story profiles */ .dir-story-grid { display: grid; gap: 1.15rem; grid-template-columns: 1fr; } @media (min-width: 800px) { .dir-story-grid { grid-template-columns: 1fr 1fr; } } .dir-story { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--dir-line); border-radius: 1.15rem; overflow: hidden; box-shadow: 0 10px 28px rgba(15,23,42,.05); } .dir-story__cover { min-height: 7.5rem; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1rem; color: rgba(255,255,255,.9); font-weight: 900; font-size: 2rem; letter-spacing: -.02em; } .dir-story__body { padding: 1.15rem 1.2rem 1.35rem; } .dir-story__body h3 { margin: .4rem 0 .45rem; font-size: 1.25rem; } .dir-story__lead { margin: 0; color: var(--dir-muted); font-size: 1rem; } .dir-story__bullets { margin: .85rem 0 0; padding: 0 0 0 1.1rem; color: var(--dir-ink); font-size: .92rem; font-weight: 600; } .dir-story__bullets li { margin: .25rem 0; } /* Compact browse (secondary to hub pillars) */ .dir-browse-wrap { padding-top: 2.5rem; } .dir-search-bar--inline { position: static; box-shadow: none; border: none; padding: 0 0 1rem; background: transparent; } .dir-search-bar--inline .dir-search { border: 1px solid var(--dir-line); box-shadow: none; max-width: none; width: 100%; } .dir-browse--compact { padding-top: .25rem; } .dir-browse-tools { display: flex; gap: .5rem; align-items: center; } /* Map: desktop sticky column; mobile secondary via toggle */ @media (max-width: 1099px) { .dir-browse--map .dir-map-col { display: none; grid-column: 1 / -1; } .dir-browse--map.is-map-open .dir-map-col { display: block; } .dir-browse--map.is-map-open .dir-map { height: 16rem; min-height: 14rem; max-height: 20rem; } } @media (min-width: 1100px) { .dir-map-toggle { display: none; } } /* Everything included */ .dir-included-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: .5rem; } @media (min-width: 640px) { .dir-included-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .dir-included-grid { grid-template-columns: 1fr 1fr 1fr; } } .dir-included { background: #fff; border: 1px solid var(--dir-line); border-radius: 1rem; padding: 1.2rem 1.15rem; } .dir-included__icon { width: 2.35rem; height: 2.35rem; border-radius: .7rem; margin-bottom: .65rem; background: var(--dir-brand-soft); color: color-mix(in srgb, var(--dir-brand) 80%, #000); display: flex; align-items: center; justify-content: center; font-weight: 800; } .dir-included strong { display: block; margin-bottom: .35rem; font-size: 1.05rem; } .dir-included p { margin: 0; color: var(--dir-muted); font-size: .95rem; } /* Quiet business CTA (not Doorstep hard sell chrome) */ .dir-band-quiet { background: var(--dir-paper-soft); border-top: 1px solid var(--dir-line); padding: 2rem 0; text-align: center; } .dir-band-quiet__kicker { margin: 0 0 .4rem; font-weight: 800; font-size: 1.05rem; color: var(--dir-ink); } .dir-band-quiet__copy { margin: 0 auto 1rem; max-width: 36rem; color: var(--dir-muted); font-size: .95rem; } .dir-footer__more a { text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 639px) { .dir-hub .dir-section { padding: 2.35rem 0; } .dir-hub .dir-hero--hub { padding: 2.5rem 0 1.75rem; } } /* Hub styles live in directories/harvest/hub.css (Harvest only). Do not duplicate here. */ /* Harvest hub: never show grey map slab until toggled (shared dirs unchanged) */ .hub-home .dir-browse--map .dir-map-col, .hub-home.dir-body .dir-browse--map .dir-map-col { display: none !important; } .hub-home .dir-browse--map.is-map-open .dir-map-col, .hub-home.dir-body .dir-browse--map.is-map-open .dir-map-col { display: block !important; } .hub-home .dir-map-toggle { display: inline-flex !important; } @media (min-width: 960px) { .hub-home .dir-browse--map.is-map-open { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); } }