/* TBDnews — placeholder tokens until the Figma design system lands. The :root block below is the CSS target for Figma variable export. */ :root { --color-bg: #ffffff; --color-surface: #f6f7f8; --color-text: #1a1d21; --color-text-muted: #5c6570; --color-accent: #d64500; --color-border: #e2e5e9; /* topic colors (map pins + chips share these) */ --topic-police-fire: #d64500; --topic-government: #2563eb; --topic-schools: #7c3aed; --topic-business: #0f766e; --topic-community: #ca8a04; --topic-traffic: #64748b; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --radius: 8px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* TRON-dark theme: near-black surfaces, neon-cyan accents, orange pins. Toggled by adding .theme-dark to (pairs with the CARTO Dark Matter basemap). */ body.theme-dark { --color-bg: #0a0e14; --color-surface: #10161f; --color-text: #dbe6f0; --color-text-muted: #7d8fa3; --color-border: #1d2836; --color-accent: #00e5ff; } body.theme-dark .brand span { text-shadow: 0 0 8px rgba(0, 229, 255, 0.55); } body.theme-dark .preview-cta { color: #061016; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); color: var(--color-text); background: var(--color-bg); display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .brand { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; } .brand span { color: var(--color-accent); } .breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); } .breadcrumb .sep { margin: 0 var(--space-xs); } .breadcrumb strong { color: var(--color-text); } .theme-toggle { margin-left: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.95rem; line-height: 1; padding: 0.35rem 0.55rem; cursor: pointer; } /* ---- Mobile-first: three stacked drawers ---- */ .layout { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .pane { border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; } .pane-header { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: none; border-bottom: 1px solid var(--color-border); font: inherit; cursor: pointer; text-align: left; } .pane-header::before { content: '▾'; font-size: 0.7rem; color: var(--color-text-muted); } .pane-header[aria-expanded="false"]::before { content: '▸'; } .pane-title { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .pane-hint { font-size: 0.78rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane-header[aria-expanded="false"] + .pane-body { display: none; } .pane-map .pane-body { height: 42vh; } #map { width: 100%; height: 100%; } .pane-list .pane-body { padding: var(--space-md); max-height: 50vh; overflow-y: auto; } .pane-story .pane-body { padding: var(--space-md); max-height: 60vh; overflow-y: auto; } /* ---- Desktop (≥1024px): three columns — map | list | story ---- */ @media (min-width: 1024px) { .layout { flex-direction: row; overflow: hidden; } .pane { border-bottom: none; min-width: 0; } .pane-map { flex: 1 1 38%; } .pane-list { flex: 0 0 30%; max-width: 30%; border-left: 1px solid var(--color-border); } .pane-story { flex: 0 0 32%; max-width: 32%; border-left: 1px solid var(--color-border); } /* columns never collapse on desktop */ .pane-header { cursor: default; } .pane-header::before { content: none; } .pane-header[aria-expanded="false"] + .pane-body { display: flex; } .pane-map .pane-body { height: auto; flex: 1; } .pane-list .pane-body, .pane-story .pane-body { max-height: none; flex: 1; overflow-y: auto; display: block; } } /* ---- List column ---- */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); } .chip { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.78rem; cursor: pointer; color: var(--color-text-muted); } .chip[aria-pressed="true"] { background: var(--chip-color, var(--color-accent)); border-color: var(--chip-color, var(--color-accent)); color: #fff; } .list-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); } .count { font-size: 0.78rem; color: var(--color-text-muted); } #sort { font: inherit; font-size: 0.78rem; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.15rem 0.3rem; background: var(--color-bg); } .stories { list-style: none; margin: 0; padding: 0; } .stories li { border-bottom: 1px solid var(--color-border); } .stories li.selected { background: var(--color-surface); } .story-link { display: block; width: 100%; padding: var(--space-sm) var(--space-xs); background: none; border: none; font: inherit; text-align: left; cursor: pointer; color: var(--color-text); font-weight: 500; line-height: 1.3; } .story-link:hover { text-decoration: underline; } .story-meta { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; } .story-meta .dot { margin: 0 0.3em; } .topic-tag { color: var(--tag-color, var(--color-text-muted)); font-weight: 600; } .pane-foot { font-size: 0.72rem; color: var(--color-text-muted); margin-top: var(--space-lg); } /* ---- Story preview column ---- */ .story-empty { color: var(--color-text-muted); font-size: 0.85rem; } .preview-image { width: 100%; border-radius: var(--radius); margin-bottom: var(--space-sm); display: block; } .preview-title { margin: 0 0 var(--space-xs); font-size: 1.05rem; line-height: 1.3; } .preview-meta { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .preview-meta .dot { margin: 0 0.3em; } .preview-summary { font-size: 0.9rem; line-height: 1.5; margin: 0 0 var(--space-md); } .preview-cta { display: inline-block; background: var(--color-accent); color: #fff; text-decoration: none; padding: 0.45rem 0.9rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; } .preview-attrib { font-size: 0.72rem; color: var(--color-text-muted); margin-top: var(--space-md); } .pin-popup { font-family: var(--font); font-size: 0.85rem; max-width: 220px; } .pin-popup a { color: var(--color-text); font-weight: 600; } /* Scroll-synced "hot dot": the pin for the story in the list's focus band. MapLibre positions the marker element with an inline transform, so the pulse animates the inner SVG instead of the marker itself. */ .pin-hot { z-index: 10; } .pin-hot svg { transform-origin: bottom center; animation: pin-pulse 1.4s ease-in-out infinite; } @keyframes pin-pulse { 0%, 100% { transform: scale(1.25); filter: drop-shadow(0 0 0 rgba(214, 69, 0, 0.5)); } 50% { transform: scale(1.45); filter: drop-shadow(0 0 10px rgba(214, 69, 0, 0.55)); } }