/* ── Thrift Diego — Sitewide shared styles ── */ /* Loaded by all pages. Overrides theme.css / inline styles where needed. */ /* Fonts: Inter + Space Grotesk */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ── SNES beach background on (shows in margins beside white card) ── */ html { background-color: #0F3D3E !important; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 8px, transparent 8px 16px) !important; background-attachment: fixed !important; } /* ── Body: remove theme.css's 960px constraint; let html's beach show through ── */ body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; max-width: none !important; margin: 0 !important; border-left: none !important; border-right: none !important; background: transparent !important; } /* ── Outer card: match homepage .outer exactly ── */ .outer, .retro-outer { max-width: 1152px; margin: 0 auto; background: #ffffff; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; box-shadow: 0 18px 40px rgba(5, 10, 30, 0.45); } /* ── Banner: applies to both class="banner" and class="retro-banner" ── */ .banner, .retro-banner { background: #EAF4FA; text-align: center; padding: 22px 10px 8px !important; border-bottom: 1px solid #e8e8e8 !important; } .banner h1, .retro-banner h1 { margin: 0; } @media (max-width: 640px) { .banner h1 img, .retro-banner h1 img { max-width: 346px !important; } } /* Remove old p styling — new tagline CSS overrides */ .retro-banner p, .banner p { color: #666; font-size: 11px; margin-top: 10px; font-family: inherit; } /* ── Nav bar: restyle retro-nav + navbar to match homepage aesthetic ── */ .retro-nav, .navbar { background: #fff !important; border-bottom: 1px solid #e8e8e8 !important; border-top: none !important; } .nav-btn { color: #333 !important; border-color: #d0d0d0 !important; font-family: inherit !important; font-weight: 600 !important; } .nav-btn:hover { background: #f5f5f5 !important; color: #333 !important; } .nav-btn.mylist-nav { color: #A3006B !important; } /* ── Listing row: lime-tint hover + selected state ── */ .listing-row:hover { background: #F6FFE0 !important; } .listing-row.lre--open { background: #F6FFE0 !important; border-left: 4px solid #A8E10C !important; box-shadow: inset 0 0 0 1px #E7F5BE !important; } .listing-row.lre--open .l-name { color: #26330A; font-weight: 700; } .listing-row { border-bottom: 2px solid #d9d9d9 !important; } /* ── Page: 24px side padding gives breadcrumb/hero breathing room ── */ main.page { max-width: 1152px !important; padding-left: 24px !important; padding-right: 24px !important; } /* ── Two-column layout stretches edge-to-edge within .outer ── */ .main-layout { display: flex; align-items: flex-start; } /* Blog posts render this widget inside a 720px prose column (.blog-wrap). A small inline script (right after the widget markup) measures main.page and widens/repositions .main-layout to the full page width in px — exact regardless of viewport/scrollbar quirks. This is just the pre-JS fallback. */ .blog-post-body .main-layout { width: 100%; } .listings-col { flex: 0 0 44%; min-width: 0; overflow: hidden; border-right: 1px solid #e0e0e0; } .map-col { flex: 0 0 56%; position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .map-col-header { border-left: 1.5px solid #c0c6cc; background: #fff; flex-shrink: 0; } .lower-nav-btn { display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: none; border-bottom: 1px solid #e8e8e8; padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: #A3006B; cursor: pointer; font-family: inherit; white-space: nowrap; } .lower-nav-btn:hover { background: #f5f5f5; } .mylist-badge-inline { background: #A3006B; color: #fff; border-radius: 10px; font-size: 10px; padding: 1px 6px; margin-left: 4px; } .map-col #map-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-left: 1.5px solid #c0c6cc; } .map-col #map-body { flex: 1; min-height: 0; overflow: hidden; display: flex; } .map-col #map-body .map-canvas-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .map-col #map { flex: 1; min-height: 0; height: 100%; width: 100%; } /* Community Sales dropdown */ .weekend-toggle { border-bottom: 1px solid #e8e8e8; } .weekend-drop-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; background: #fffbe6; border: none; border-left: 4px solid #ea580c; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #333; cursor: pointer; text-align: left; } .weekend-drop-btn:hover { background: #fff8dc; } .weekend-drop-arrow { font-size: 11px; color: #888; transition: transform 0.2s; flex-shrink: 0; } .weekend-drop-btn[aria-expanded="true"] .weekend-drop-arrow { transform: rotate(180deg); } .weekend-drop-content { background: #fff; } .weekend-drop-item { padding: 9px 14px; border-bottom: 1px solid #f0f0f0; font-size: 12.5px; cursor: pointer; } .weekend-drop-item:hover { background: #f9f9f9; } .weekend-drop-item.expanded { background: #fffbe6; } .weekend-drop-item-row { display: flex; flex-direction: column; gap: 2px; } .weekend-drop-item-name { font-weight: 600; color: #222; } .weekend-drop-item-meta { color: #666; font-size: 11.5px; } .weekend-drop-item-detail:not([hidden]) { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e0d5b0; display: flex; flex-direction: column; gap: 6px; cursor: default; } .weekend-drop-item-addr, .weekend-drop-item-hours { font-size: 11.5px; color: #555; } .weekend-drop-item-desc { font-size: 11.5px; color: #666; line-height: 1.5; } .weekend-drop-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .weekend-drop-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; background: #fff; border: 1px solid #d0d0d0; border-radius: 4px; color: #333; text-decoration: none; white-space: nowrap; cursor: pointer; } .weekend-drop-action-btn:hover { background: #f5f5f5; } .weekend-drop-footer { display: block; padding: 9px 14px; font-size: 12px; font-weight: 600; color: #ea580c; text-decoration: none; border-top: 1px solid #e8e8e8; background: #fafafa; } .weekend-drop-footer:hover { background: #f0f0f0; color: #ea580c; } .weekend-drop-empty { padding: 14px; font-size: 12.5px; color: #777; } /* Mobile: stack vertically */ @media (max-width: 768px) { .main-layout { flex-direction: column; margin: 0; } .listings-col { flex: none; width: 100%; border-right: none; overflow: visible; } .map-col { flex: none; width: 100%; position: static; height: auto; overflow: visible; order: -1; display: block; } .map-col-header { border-left: none; border-bottom: 1px solid #e8e8e8; } .map-col #map-wrap { height: 300px; min-height: 300px; flex: none; overflow: visible; border-left: none; border: 1.5px solid #c0c6cc; } .map-col #map { height: 100%; } } /* ── Leaflet popup: white card, indigo border ── */ .leaflet-popup-content-wrapper { background: #ffffff !important; border: 2px solid #17204A !important; border-radius: 4px !important; box-shadow: 0 8px 20px rgba(10,18,45,.25) !important; color: #2C3352 !important; } .leaflet-popup-tip { background: #ffffff !important; } .leaflet-popup-content-wrapper a { color: #A3006B !important; } /* ── Homepage-matching listing section header ── */ .section-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: #333; background: none; padding: 8px 10px; border-left: 4px solid #A3006B; border-bottom: 1px solid #e8e8e8; margin: 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .section-title:hover { background: #fafafa; } .section-title-arrow { font-size: 11px; color: #888; transition: transform 0.2s; } .listings-list { border-top: 1px solid #e8e8e8; } .mylist-drop-arrow { font-size: 11px; color: #888; margin-left: 6px; display: inline-block; transition: transform 0.2s; } /* ── Page title and description formatting ── */ .cat-hero { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; padding-top: 12px !important; text-align: center !important; } .cat-h1 { font-family: 'Space Grotesk', 'Inter', sans-serif !important; font-size: clamp(22px, 3.5vw, 32px) !important; font-weight: 700 !important; color: #111 !important; line-height: 1.2 !important; margin: 0 0 16px !important; letter-spacing: -0.01em !important; } .cat-count-badge { display: inline-block !important; margin-bottom: 16px !important; } .cat-intro { font-size: 14.5px !important; line-height: 1.8 !important; color: #555 !important; margin: 0 0 14px !important; text-align: left !important; } .cat-intro:last-of-type { margin-bottom: 0 !important; } .breadcrumb { justify-content: center !important; margin-top: 16px !important; margin-bottom: 4px !important; font-size: 11px !important; opacity: 0.7; } .directory-updated { text-align: center; font-size: 11.5px; color: #9AA0AE; margin: 6px 0 0; }