/* maps.madmonkey.media -- LIGHT by default; dark and system via the header toggle (data-theme on , set by theme.js / app.js). Brand red #C8102E. */ :root { color-scheme: light; --bg: #ffffff; --panel: #f7f7f9; --ink: #16181d; --muted: #5b616e; --line: #e3e5ea; --brand: #C8102E; --brand-ink: #ffffff; --open: #0f7a3d; --closed: #8a3b3b; --pending: #8a6d1f; --gattr: #5e5e5e; --radius: 12px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04); } :root[data-theme="dark"] { color-scheme: dark; --bg: #101216; --panel: #171a20; --ink: #eef0f4; --muted: #a2a8b4; --line: #262a33; --shadow: 0 1px 3px rgba(0,0,0,.4); --open: #4bd07f; --closed: #e08a8a; --pending: #e0c56d; --brand: #e11d3a; --gattr: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; } body { font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; } h1, h2, h3 { line-height: 1.2; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Header / footer */ .site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; } .brand { font-weight: 800; font-size: 19px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand-mark { background: var(--brand); color: var(--brand-ink); padding: 2px 7px; border-radius: 6px; margin-right: 4px; } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; } .site-nav a { color: var(--muted); font-size: 14px; padding: 8px 0; } .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; } .theme-toggle { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 36px; } .site-footer { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 0; color: var(--muted); font-size: 14px; } .site-footer p { margin: 6px 0; } .latino-line { color: var(--ink); } /* Hero + search */ .hero { padding: 28px 0 8px; } .hero h1 { margin: 0 0 6px; font-size: 30px; } .lede { color: var(--muted); margin: 0; max-width: 64ch; } .dir-search { display: flex; gap: 8px; margin: 16px 0 0; max-width: 640px; } .dir-search input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px 14px; font: inherit; min-height: 44px; } .dir-search .btn { min-height: 44px; } /* Directory split layout */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 20px 0 8px; align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .map-col { order: -1; } } .map-col { position: sticky; top: 76px; } @media (max-width: 860px) { .map-col { position: static; } } /* Filters */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .filters-label { color: var(--muted); font-size: 13px; margin-right: 4px; } .chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; min-height: 36px; } .chip.is-active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } /* Place list */ .place-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .place-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: box-shadow .15s; } .place-card:hover { box-shadow: var(--shadow); } .place-card-link { display: block; padding: 16px; color: inherit; } .place-card-link:hover { text-decoration: none; } .place-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .place-card-head h3 { margin: 0; font-size: 18px; } .place-cat { color: var(--muted); margin: 4px 0 0; font-size: 14px; } .place-where { color: var(--muted); margin: 4px 0 0; font-size: 14px; } .place-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* Map */ .map { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; position: relative; } .place-map { height: 300px; } @media (max-width: 860px) { .map { height: 360px; } } .map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--muted); } .maplibregl-map { border-radius: var(--radius); } /* Embed (framed by MAD Search) */ .page-embed { background: var(--panel); } .embed { position: relative; height: 100vh; min-height: 280px; } .map--embed { height: 100%; border: 0; border-radius: 0; } .page-embed .maplibregl-map { border-radius: 0; } .embed-panel { position: absolute; left: 10px; top: 10px; max-width: min(300px, calc(100% - 60px)); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 13px; } .embed-panel p { margin: 4px 0; } .embed-title a { color: var(--ink); font-weight: 800; } .embed-count { color: var(--muted); } .embed-list { list-style: none; margin: 6px 0; padding: 0; } .embed-list li { padding: 4px 0; border-top: 1px solid var(--line); } .embed-list li span { display: block; color: var(--muted); font-size: 12px; } /* Find (Google Places lookup) */ .find-status { color: var(--muted); min-height: 1.5em; margin: 12px 0; } .find-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 640px; } .find-item { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 12px 14px; font: inherit; cursor: pointer; min-height: 44px; } .find-item:hover { box-shadow: var(--shadow); } .find-item span { display: block; color: var(--muted); font-size: 14px; } .find-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px; margin: 18px 0; max-width: 640px; } .find-detail h2 { margin: 0 0 6px; font-size: 20px; } .find-actions { display: flex; flex-wrap: wrap; gap: 8px; } .g-attr { color: var(--muted); font-size: 13px; margin: 14px 0 6px; } .g-attr-mark { font-family: Roboto, Arial, sans-serif; color: var(--gattr); font-weight: 500; } /* Pills + badges */ .pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .pill--open { background: color-mix(in srgb, var(--open) 16%, transparent); color: var(--open); } .pill--closed { background: color-mix(in srgb, var(--closed) 16%, transparent); color: var(--closed); } .pill--muted { background: var(--line); color: var(--muted); } .open-detail { color: var(--muted); font-size: 13px; margin-left: 6px; } .badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); } .badge--latino { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); } .badge--verified { background: color-mix(in srgb, var(--open) 14%, transparent); color: var(--open); border-color: color-mix(in srgb, var(--open) 30%, transparent); } .badge--pending { color: var(--pending); } .badge--unverified { color: var(--muted); } .src-note, .src-mini { color: var(--muted); font-size: 12px; } /* Place detail */ .crumbs { color: var(--muted); font-size: 14px; margin: 18px 0; } .place-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; } @media (max-width: 860px) { .place-grid { grid-template-columns: 1fr; } } .place-header h1 { margin: 0 0 4px; font-size: 30px; } .tagline { color: var(--muted); margin: 0 0 10px; font-size: 17px; } .open-line { margin: 12px 0; } .about p { max-width: 68ch; } section.about, section.attributes, section.hours { margin: 26px 0; } section h2 { font-size: 20px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .attr-group { margin: 14px 0; } .attr-group h3 { font-size: 15px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; } .attr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .attr-list li { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 14px; } .hours-table { border-collapse: collapse; width: 100%; max-width: 380px; } .hours-table th, .hours-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); font-weight: 400; } .hours-table th { color: var(--muted); width: 120px; } .contact-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px; margin-top: 14px; } .contact-card h2 { border: 0; padding: 0; margin: 0 0 10px; font-size: 18px; } .contact-card p { margin: 8px 0; font-size: 15px; } .contact-card address { font-style: normal; color: var(--muted); } .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; display: inline-block; min-width: 62px; } .socials a { margin-right: 10px; } .geo-note, .muted { color: var(--muted); } .small { font-size: 13px; } .geo-note { font-size: 13px; margin: 8px 0 0; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; margin: 18px 0; } .gallery img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; } /* Buttons + claim */ .btn { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { text-decoration: none; box-shadow: var(--shadow); } .btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .claim-box { border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--radius); padding: 16px; margin-top: 16px; background: color-mix(in srgb, var(--brand) 5%, transparent); } .claim-box p { margin: 0 0 10px; font-size: 14px; } /* Empty state */ .empty { text-align: center; padding: 48px 20px; color: var(--muted); } .empty h1, .empty h2 { color: var(--ink); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }