/* ============================================================================ DagM8 · views/dagmap.css — DagMap (interactive campus map + geo feed) Screen-specific styles only; tokens + shared components come from dagm8.css. Prefix: .dgm-* (plus the shared .filterbar / .filter-pill from dagm8.css). ========================================================================= */ /* DagMap takes the whole shell width: drop the (empty) right rail and let the #view track span the page. Set on by the router. */ body[data-route="dagmap"] .app { grid-template-columns: var(--rail-l) minmax(0, 1fr); } body[data-route="dagmap"] #rail-right { display: none; } .dgm-view { min-width: 0; } .dgm-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 44%, 620px); gap: var(--gutter); align-items: start; padding: var(--s6) var(--gutter) var(--s8); } /* left: the geo feed -------------------------------------------------------- */ .dgm-main { min-width: 0; } .dgm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); } .dgm-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .dgm-create { flex: none; } .dgm-filters { margin-bottom: var(--s3); } .dgm-filters + .dgm-filters { margin-bottom: var(--s5); } .dgm-list { display: flex; flex-direction: column; } .dgm-post[hidden] { display: none; } .dgm-loc { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; } .dgm-loc .ico { width: 14px; height: 14px; color: var(--muted); } .dgm-empty { margin: var(--s6) 0; text-align: center; color: var(--muted); font-size: 14px; font-weight: 500; } /* right: the stylized map --------------------------------------------------- */ .dgm-map { position: sticky; top: calc(var(--topbar-h) + var(--s4)); height: calc(100vh - var(--topbar-h) - var(--s6)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #eef1f7; box-shadow: var(--shadow-card); } .dgm-terrain { position: absolute; inset: 0; width: 100%; height: 100%; } .dgm-water { fill: #cfe6ef; } .dgm-streets path { fill: none; stroke: #d6dbe8; stroke-width: 1.1; stroke-linecap: round; } .dgm-place { fill: #c98aa0; opacity: .55; font-family: var(--font); font-size: 7px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; } .dgm-pins { position: absolute; inset: 0; } .dgm-pin { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; line-height: 0; display: grid; justify-items: center; gap: 4px; } .dgm-pin .avatar { box-shadow: 0 0 0 2.5px var(--surface), var(--shadow-card); } .dgm-pin:hover { z-index: 6; } .dgm-pin.is-sel { z-index: 7; } /* the self pin: a cyan ring + a persistent "you are here" tag */ .dgm-pin--you .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px rgba(40,194,213,.45); } .dgm-here { font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--shadow-card); } /* event / place markers: classic teardrop */ .dgm-marker { --c: var(--coral); width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--c); transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 4px 10px rgba(20,25,40,.28); } .dgm-marker .ico { transform: rotate(45deg); color: #fff; width: 14px; height: 14px; } .dgm-marker__label { font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--shadow-card); display: none; } .dgm-pin--marker:hover .dgm-marker__label, .dgm-pin--marker.is-sel .dgm-marker__label { display: block; } /* map layer switcher (top-right toolbar in the comp) */ .dgm-layers { position: absolute; top: var(--s3); right: var(--s3); display: flex; flex-direction: column; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); } .dgm-layer { border: 0; background: none; border-radius: var(--r-sm); padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: background var(--t), color var(--t); } .dgm-layer:hover { background: var(--field); color: var(--ink-2); } .dgm-layer[aria-pressed="true"] { background: var(--cyan); color: #fff; } /* map control cluster (bottom-right) */ .dgm-controls { position: absolute; right: var(--s3); bottom: var(--s3); } .dgm-ctl { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--shadow-card); transition: background var(--t), color var(--t); } .dgm-ctl:hover { background: var(--field); color: var(--cyan-700); } /* legend (bottom-left) */ .dgm-legend { position: absolute; left: var(--s3); bottom: var(--s3); display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: var(--r); font-size: 11.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-card); } .dgm-legend span { display: inline-flex; align-items: center; gap: 6px; } .dgm-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dgm-legend__you { background: var(--cyan); box-shadow: 0 0 0 2px rgba(40,194,213,.3); } .dgm-legend__mate { background: var(--orange); } .dgm-legend__event { background: var(--coral); } .dgm-legend__place { background: var(--indigo); } /* dagmap-only feed photo (self-contained, no external asset) */ .dgm-photo--boardwalk { background: radial-gradient(50% 70% at 50% 36%, rgba(255,196,90,.0) 30%, rgba(8,10,18,.0) 60%), radial-gradient(120% 80% at 50% 30%, #ffcf6e 0%, #ff8a3c 22%, #b3461f 42%, #2a1530 70%), linear-gradient(180deg, #3a1f44 0%, #1a1230 40%, #0c1426 70%, #07101e 100%); } /* responsive ------------------------------------------------------------- */ @media (max-width: 1024px) { .dgm-layout { grid-template-columns: minmax(0, 1fr); } .dgm-map { position: relative; top: 0; height: 420px; order: -1; } } @media (max-width: 560px) { .dgm-layout { padding: var(--s5) var(--s4) var(--s8); } .dgm-title { font-size: 22px; } .dgm-create span { display: none; } .dgm-map { height: 340px; } }