/* ============================================================ core.css — design tokens, base reset, top bar & branding, the map body, and the sliding list-panel shell. ------------------------------------------------------------ This is the foundation every other stylesheet builds on: · :root design tokens (colors, fonts, radii, shadows) · base reset + · .mp app frame + top bar (brand lockup, info popover, trust badge, the header CTA / member cluster) · the #mp-map canvas + maplibre control tweaks · the .mp-panel list shell (its inner controls live in controls.css; the rows live in member-views.css) LOAD ORDER: this file must load FIRST — everything else references its tokens. Responsive @media overrides live at the end of controls.css (loaded last) so they always win. ============================================================ */ /* ============================================================ Valor — Map · Direction A "Civic Registry" Clean institutional. Navy / white / gold. Squared, labeled, high-trust. Restyle only — every map.js hook is preserved. ============================================================ */ :root{ --navy:#1b3a64; --navy-deep:#12294a; --ink:#16233a; --ink-2:#37475f; --paper:#ffffff; --surface:#f3f6fa; --surface-2:#e9eef5; --line:#d4dce7; --line-2:#e6ecf3; --gold:#c4a23c; --gold-deep:#9a7d24; --gold-soft:#efe2b4; --muted:#5c6b80; --muted-2:#8593a6; --good:#1f7a4d; --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --slab:"Roboto Slab",Georgia,serif; --r:8px; --r-sm:6px; --r-pill:999px; --sh-sm:0 1px 2px rgba(18,41,74,.06), 0 1px 3px rgba(18,41,74,.08); --sh-md:0 6px 22px rgba(18,41,74,.13); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:var(--sans);color:var(--ink);background:var(--surface); -webkit-font-smoothing:antialiased;overflow:hidden;line-height:1.5} button,input,select{font-family:inherit} img{display:block;max-width:100%} .mp{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--surface)} /* ---------- top bar ---------- */ .mp-bar{display:flex;align-items:center;gap:16px;padding:0 18px;height:64px;flex:none; background:var(--paper);border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(18,41,74,.02);z-index:6;position:relative} .mp-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 62%,var(--gold) 62%,var(--gold) 100%)} /* brand lockup */ .mp-brand-lockup{display:flex;align-items:center;gap:14px;flex:0 0 auto} .mp-brand{height:26px;width:auto;flex:0 0 auto} .mp-tagline{font-size:.74rem;font-weight:600;color:var(--ink-2);line-height:1.25; padding-left:14px;border-left:1px solid var(--line);letter-spacing:.01em} .mp-tagline .dim{color:var(--muted-2);font-weight:500} /* info popover */ .mp-info{position:relative} .mp-info-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none; border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted); cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s} .mp-info-btn svg{width:16px;height:16px} .mp-info-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--surface)} .mp-info.open .mp-info-btn{border-color:var(--navy);color:var(--navy);background:var(--surface-2)} .mp-info-panel{left:0;right:auto;top:calc(100% + 10px);width:360px;min-width:0;padding:20px} .mp-info-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--gold-deep);background:rgba(196,162,60,.14);border-radius:var(--r-sm);padding:5px 10px;margin-bottom:13px} .mp-info-badge img{height:12px;width:auto;display:block;position:relative;top:.5px} .mp-info-title{font-family:var(--slab);font-weight:800;font-size:1.28rem;line-height:1.15; color:var(--ink);letter-spacing:-.015em;margin:0 0 9px} .mp-info-tx{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-2);font-weight:500} .mp-info-paths{display:flex;flex-direction:column;gap:9px;margin-top:18px} .mp-info-x{display:none} .mp-info-disclaimer{margin:16px 0 0;padding:11px 12px;border-radius:var(--r-sm); background:var(--surface);border:1px solid var(--line); font-size:.76rem;line-height:1.5;color:var(--muted);font-weight:500} .mp-info-disclaimer strong{color:var(--ink-2);font-weight:800} /* when the info popup is open, hide the other floating controls — just show the popup */ .mp:has(.mp-dd[data-dd="info"].open) .mp-show-list, .mp:has(.mp-dd[data-dd="info"].open) .mp-show-filters, .mp:has(.mp-dd[data-dd="info"].open) .mp-collapse{display:none} .mp-info-dev{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px; padding-top:14px;border-top:1px dashed var(--line)} .mp-info-dev-lbl{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)} .mp-info-dev-seg{width:118px;flex:none} .mp-info-dev-reset{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:18px;padding-top:15px; border:0;border-top:1px dashed var(--line);background:none;color:var(--muted-2); font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;transition:color .15s} .mp-info-dev-reset:hover{color:var(--ink)} .mp-info-dev-reset svg{width:14px;height:14px} /* deliberate trust badge */ .mp-trust{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto; background:rgba(31,122,77,.08);border:1px solid rgba(31,122,77,.2);border-radius:var(--r-sm); padding:6px 12px 6px 9px;cursor:default} .mp-trust-ic{display:flex;width:26px;height:26px;flex:none;border-radius:50%; align-items:center;justify-content:center;background:var(--good);color:#fff} .mp-trust-ic svg{width:15px;height:15px} .mp-trust-tx{display:flex;flex-direction:column;line-height:1.2} .mp-trust-tx strong{font-size:.79rem;font-weight:800;color:#155e3b;letter-spacing:-.01em} .mp-trust-tx span{font-size:.68rem;font-weight:600;color:var(--good);letter-spacing:.01em} .mp-bar-spacer{flex:1} /* auth cluster */ .mp-auth{display:flex;align-items:center;gap:6px;flex:0 0 auto} .mp-cta{display:inline-flex;align-items:center;gap:7px;background:var(--paper);color:var(--navy); border:1.5px solid var(--navy);border-radius:var(--r-pill);padding:10px 20px;font-size:.86rem; font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,box-shadow .15s;white-space:nowrap; position:relative;overflow:hidden} .mp-cta:not(.is-member)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(196,162,60,.55),transparent); transform:translateX(-180%) skewX(-18deg);animation:ctaSheen 10s ease-in-out infinite} @keyframes ctaSheen{0%{transform:translateX(-180%) skewX(-18deg)} 7%{transform:translateX(320%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}} .mp-cta:hover{background:var(--surface-2);box-shadow:var(--sh-sm)} .mp-cta .star{color:var(--gold-deep)} .mp-cta.is-member{background:linear-gradient(100deg,#bfa640,#e3cf78 45%,#bfa640);color:#3a2c00;border-color:var(--gold-deep)} .mp-cta.is-member .star{color:#7a5c00} /* member state — verified welcome + easy sign out (not a button/toggle) */ .mp-member{display:flex;align-items:center;gap:14px} .mp-member[hidden]{display:none} .mp-member-badge{display:inline-flex;align-items:center;gap:5px;font-size:.9rem;font-weight:800;color:var(--good)} .mp-signout{border:0;background:none;padding:0;font:inherit;font-size:.82rem;font-weight:700; color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .mp-signout:hover{color:var(--ink)} /* ---------- body / map ---------- */ .mp-body{position:relative;flex:1;min-height:0} #mp-map{position:absolute;inset:0;z-index:1} /* own stacking context so no pin can paint over the panel/card */ .maplibregl-canvas{filter:saturate(.92) brightness(1.02)} .maplibregl-ctrl-attrib{font-size:10px;background:rgba(255,255,255,.78)} .maplibregl-ctrl-bottom-left{opacity:.7} .maplibregl-ctrl-group{box-shadow:var(--sh-sm);border-radius:var(--r-sm)!important} /* list panel */ .mp-panel{position:absolute;top:0;left:0;bottom:0;width:362px;max-width:84%;z-index:4; display:flex;flex-direction:column;background:var(--paper);border-right:1px solid var(--line); box-shadow:6px 0 22px rgba(18,41,74,.07);transition:transform .25s ease} .mp.list-collapsed .mp-panel{transform:translateX(-101%)} .mp-grip{display:none}