/* ============================================================ P5D Signal Intelligence — Editorial Observatory ============================================================ */ :root { /* Ink & Paper */ --bg-deep: #070a10; --bg-base: #0c1018; --bg-raised: #111822; --bg-surface: #172030; --bg-hover: #1c2940; /* Typography */ --text-primary: #e2ddd5; --text-secondary: #8a9ab5; --text-muted: #4a5568; --text-inverse: #070a10; /* Accents */ --amber: #dba44e; --amber-dim: rgba(219, 164, 78, 0.15); --amber-glow: rgba(219, 164, 78, 0.06); --teal: #3ecfb4; --teal-dim: rgba(62, 207, 180, 0.12); --coral: #e07c5a; --coral-dim: rgba(224, 124, 90, 0.12); --slate-blue: #5b7aa8; /* Structure */ --border: rgba(138, 154, 181, 0.08); --border-strong: rgba(138, 154, 181, 0.15); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Fonts */ --font-display: 'Newsreader', Georgia, serif; --font-mono: 'DM Mono', 'Menlo', monospace; } /* ============================================================ Theme: P5D Brand (light, green-dominant) Activate by adding class="theme-p5d" to ============================================================ */ body.theme-p5d { /* Backgrounds — clean white canvas */ --bg-deep: #f5f5f5; --bg-base: #ffffff; --bg-raised: #f0f0f0; --bg-surface: #e8e8e8; --bg-hover: #dcdcdc; /* Typography — dark on light */ --text-primary: #363636; --text-secondary: #4b4b4b; --text-muted: #8a8a8a; --text-inverse: #ffffff; /* Accents — P5D green palette */ --amber: #20bd57; --amber-dim: rgba(32, 189, 87, 0.12); --amber-glow: rgba(32, 189, 87, 0.06); --teal: #ff9b21; --teal-dim: rgba(255, 155, 33, 0.10); --coral: #e33110; --coral-dim: rgba(227, 49, 16, 0.10); --slate-blue: #209cee; /* Structure */ --border: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); } /* P5D theme: remove dark background textures */ body.theme-p5d::before { background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px); } body.theme-p5d::after { opacity: 0; } /* P5D theme: header accent is green */ body.theme-p5d #header::before { background: linear-gradient(90deg, #20bd57 0%, #40c96c 40%, transparent 80%); } /* P5D theme: brand mark is green */ body.theme-p5d .brand-mark { background: #20bd57; box-shadow: 0 0 12px rgba(32, 189, 87, 0.3), 0 0 4px #20bd57; } /* P5D theme: brand tag */ body.theme-p5d .brand-tag { color: #1ca74d; background: rgba(32, 189, 87, 0.12); } /* P5D theme: active view button gets green fill */ body.theme-p5d .view-btn.active { background: #20bd57; color: #ffffff; border-color: #1ca74d; } body.theme-p5d .view-btn.active .view-icon { color: #ffffff; } /* P5D theme: tooltip */ body.theme-p5d .node-tooltip { background: #ffffff; border-color: #dbdbdb; color: #4b4b4b; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(32, 189, 87, 0.08); } body.theme-p5d .node-tooltip::before { background: linear-gradient(90deg, #20bd57, transparent); } /* P5D theme: scrollbar */ body.theme-p5d .tree-container::-webkit-scrollbar-thumb { background: #d6d6d6; } body.theme-p5d .tree-container::-webkit-scrollbar-thumb:hover { background: #b4b4b4; } /* P5D theme: loading spinner */ body.theme-p5d .loading::before { border-color: #dbdbdb; border-top-color: #20bd57; } /* ---- Theme toggle button ---- */ .theme-toggle { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text-secondary); background: var(--bg-raised); } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---- Base ---- */ html, body { height: 100%; overflow: hidden; } body { font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-deep); } /* Subtle grid background */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(138, 154, 181, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 154, 181, 0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } /* Warm noise texture */ body::after { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } #app { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; } /* ============================================================ Header ============================================================ */ #header { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 60px; background: var(--bg-base); border-bottom: 1px solid var(--border-strong); flex-shrink: 0; position: relative; } /* Amber accent line at top */ #header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--amber) 0%, transparent 60%); } .header-brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber-dim), 0 0 4px var(--amber); animation: pulse-glow 3s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--amber-dim), 0 0 4px var(--amber); } 50% { opacity: 0.7; box-shadow: 0 0 6px var(--amber-dim), 0 0 2px var(--amber); } } .brand-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; } .brand-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--amber); background: var(--amber-dim); padding: 2px 7px; border-radius: 3px; letter-spacing: 0.08em; text-transform: uppercase; } /* ---- View Navigation ---- */ .view-nav { display: flex; gap: 4px; } .view-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 400; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.01em; } .view-btn:hover { color: var(--text-secondary); background: var(--bg-raised); } .view-btn.active { color: var(--text-primary); background: var(--bg-surface); border-color: var(--border-strong); } .view-icon { font-size: 10px; opacity: 0.6; } .view-btn.active .view-icon { color: var(--amber); opacity: 1; } /* ---- Header Actions ---- */ .header-actions { display: flex; align-items: center; gap: 8px; } .ghost-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all 0.15s ease; } .ghost-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); background: var(--bg-raised); } .stats-pill { font-size: 10px; color: var(--text-muted); padding: 4px 10px; border-radius: 20px; background: var(--bg-raised); letter-spacing: 0.03em; min-width: 60px; text-align: center; } /* ============================================================ Mind Map Container ============================================================ */ #mind-map-container { flex: 1; overflow: hidden; } .tree-container { width: 100%; height: 100%; overflow: auto; padding: 32px 40px 80px; scroll-behavior: smooth; } /* Custom scrollbar */ .tree-container::-webkit-scrollbar { width: 6px; height: 6px; } .tree-container::-webkit-scrollbar-track { background: transparent; } .tree-container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .tree-container::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================================ Tree Nodes ============================================================ */ .tree-node { user-select: none; } .tree-node-content { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; max-width: 600px; transition: all 0.15s ease; position: relative; cursor: pointer; } /* ---- Level 0: Root ---- */ .tree-node[data-level="0"] > .tree-node-content { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-primary); background: transparent; padding: 8px 0 16px; letter-spacing: -0.02em; } /* ---- Level 1: Theme / Subreddit ---- */ .tree-node[data-level="1"] > .tree-node-content { background: var(--bg-raised); color: var(--text-primary); font-weight: 500; font-size: 13px; padding: 8px 16px; border-left: 3px solid var(--amber); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 2px 0; } .tree-node[data-level="1"] > .tree-node-content:hover { background: var(--bg-surface); border-left-color: var(--amber); } /* ---- Level 2: Signal / Sub-group ---- */ .tree-node[data-level="2"] > .tree-node-content { background: transparent; color: var(--text-secondary); font-size: 12px; padding: 5px 12px; border-left: 2px solid var(--teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1px 0; } .tree-node[data-level="2"] > .tree-node-content:hover { background: var(--teal-dim); color: var(--text-primary); } /* ---- Level 3: Evidence / Leaf ---- */ .tree-node[data-level="3"] > .tree-node-content { background: transparent; color: var(--text-muted); font-size: 11.5px; padding: 3px 10px; border-left: none; margin: 0; } .tree-node[data-level="3"] > .tree-node-content:hover { color: var(--amber); background: var(--amber-glow); } /* Leaf link indicator */ .tree-node[data-level="3"] .leaf-arrow { font-size: 9px; color: var(--text-muted); opacity: 0; transition: opacity 0.15s, transform 0.15s; transform: translateX(-2px); } .tree-node[data-level="3"] > .tree-node-content:hover .leaf-arrow { opacity: 1; transform: translateX(0); color: var(--amber); } /* ---- Toggle indicator ---- */ .tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); flex-shrink: 0; transition: all 0.15s; line-height: 1; } .tree-toggle:hover { background: var(--bg-surface); border-color: var(--text-muted); color: var(--text-secondary); } /* ---- Children / Connector ---- */ .tree-children { margin-left: 12px; padding-left: 20px; border-left: 1px solid var(--border); position: relative; } /* Fade-in animation for newly expanded children */ .tree-children.entering { animation: fadeSlideIn 0.2s ease forwards; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Tooltip ============================================================ */ .node-tooltip { position: fixed; max-width: 380px; padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap; z-index: 1000; pointer-events: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(219, 164, 78, 0.05); backdrop-filter: blur(8px); } /* Tooltip header line styling */ .node-tooltip::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); border-radius: 1px; } /* ============================================================ Loading / Empty States ============================================================ */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text-muted); font-size: 13px; } .loading::before { content: ''; width: 24px; height: 24px; border: 2px solid var(--border-strong); border-top-color: var(--amber); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Error state — no spinner */ .loading.error::before { display: none; } /* ============================================================ Bipartite Connections View ============================================================ */ .conn-scroll { width: 100%; height: 100%; overflow: auto; scroll-behavior: smooth; } .conn-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .conn-scroll::-webkit-scrollbar-track { background: transparent; } .conn-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .conn-wrapper { position: relative; min-height: 100%; } .conn-svg { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; } /* ---- Edges ---- */ .conn-edge { fill: none; stroke: var(--amber); stroke-linecap: round; transition: opacity 0.2s, stroke 0.2s; } .conn-edge-active { opacity: 0.85 !important; stroke: var(--amber) !important; stroke-width: 3px !important; } .conn-edge-dimmed { opacity: 0.04 !important; } /* ---- Nodes ---- */ .conn-node { position: absolute; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: var(--radius-md); cursor: pointer; user-select: none; z-index: 1; transition: all 0.2s ease; } .conn-label { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conn-count { font-size: 11px; font-weight: 400; color: var(--text-muted); flex-shrink: 0; margin-left: 8px; background: rgba(255, 255, 255, 0.04); padding: 2px 8px; border-radius: 10px; } /* Subreddit nodes (left) — blue tint */ .conn-sub { background: var(--bg-raised); border: 1px solid var(--border-strong); border-left: 3px solid var(--slate-blue); color: var(--text-primary); } .conn-sub:hover { background: var(--bg-surface); border-left-color: var(--amber); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } /* Signal nodes (right) — amber tint */ .conn-signal { background: var(--bg-raised); border: 1px solid var(--border-strong); border-right: 3px solid var(--amber); color: var(--text-primary); font-size: 12px; } .conn-signal:hover { background: var(--bg-surface); border-right-color: var(--amber); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } /* Hover highlight states */ .conn-node-highlight { background: var(--bg-surface) !important; box-shadow: 0 0 0 1px var(--amber), 0 2px 12px rgba(219, 164, 78, 0.15); } .conn-node-dimmed { opacity: 0.3; } /* P5D theme overrides for connections */ body.theme-p5d .conn-edge { stroke: #20bd57; } body.theme-p5d .conn-edge-active { stroke: #20bd57 !important; } body.theme-p5d .conn-sub { border-left-color: #209cee; } body.theme-p5d .conn-sub:hover { border-left-color: #20bd57; } body.theme-p5d .conn-signal { border-right-color: #20bd57; } body.theme-p5d .conn-node-highlight { box-shadow: 0 0 0 1px #20bd57, 0 2px 12px rgba(32, 189, 87, 0.15); } body.theme-p5d .conn-count { background: rgba(0, 0, 0, 0.04); } /* ============================================================ Mind Map — Visual Layout (boxes + SVG connectors) ============================================================ */ .mm-viewport { width: 100%; height: 100%; overflow: hidden; position: relative; cursor: grab; } .mm-viewport:active { cursor: grabbing; } .mm-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } .mm-svg { position: absolute; top: 0; left: 0; pointer-events: none; } /* ---- Connectors ---- */ .mm-connector { fill: none; stroke: var(--border-strong); stroke-width: 1.5; transition: stroke 0.15s; } .mm-connector-l0 { stroke: var(--amber); stroke-width: 2; opacity: 0.6; } .mm-connector-l1 { stroke: var(--teal); stroke-width: 1.5; opacity: 0.4; } .mm-connector-l2 { stroke: var(--border-strong); stroke-width: 1; opacity: 0.3; } /* ---- Node Boxes ---- */ .mm-node { position: absolute; display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; overflow: hidden; white-space: nowrap; } .mm-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* ---- Level 0: Root ---- */ .mm-node-l0 { background: var(--amber); color: var(--text-inverse); font-family: var(--font-display); font-size: 15px; font-weight: 600; padding: 0 16px; border-radius: var(--radius-md); letter-spacing: -0.01em; box-shadow: 0 2px 12px rgba(219, 164, 78, 0.25); } .mm-node-l0:hover { box-shadow: 0 4px 20px rgba(219, 164, 78, 0.35); } /* ---- Level 1: Theme / Subreddit ---- */ .mm-node-l1 { background: var(--bg-raised); color: var(--text-primary); font-size: 12.5px; font-weight: 500; padding: 0 14px; border: 1px solid var(--border-strong); border-left: 3px solid var(--amber); } .mm-node-l1:hover { background: var(--bg-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* ---- Level 2: Signal / Sub-group ---- */ .mm-node-l2 { background: var(--bg-base); color: var(--text-secondary); font-size: 11.5px; padding: 0 12px; border: 1px solid var(--border); border-left: 2px solid var(--teal); } .mm-node-l2:hover { background: var(--bg-raised); border-color: var(--teal); color: var(--text-primary); } /* ---- Level 3: Leaf / Evidence ---- */ .mm-node-l3 { background: transparent; color: var(--text-muted); font-size: 11px; padding: 0 10px; border: 1px solid transparent; } .mm-node-l3:hover { background: var(--amber-glow); border-color: var(--border); color: var(--amber); } .mm-node-l3.mm-leaf { cursor: pointer; } .mm-node-l3.mm-leaf:hover { text-decoration: underline; } /* ---- Collapse Badge ---- */ .mm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; font-family: var(--font-mono); flex-shrink: 0; padding: 0 3px; } .mm-node:hover .mm-badge { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } /* P5D theme overrides for mind map */ body.theme-p5d .mm-node-l0 { background: #20bd57; color: #ffffff; box-shadow: 0 2px 12px rgba(32, 189, 87, 0.25); } body.theme-p5d .mm-node-l0:hover { box-shadow: 0 4px 20px rgba(32, 189, 87, 0.35); } body.theme-p5d .mm-connector-l0 { stroke: #20bd57; } body.theme-p5d .mm-connector-l1 { stroke: #ff9b21; } body.theme-p5d .mm-badge { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { #header { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 8px; } .view-nav { order: 3; width: 100%; justify-content: center; } }