/* ═══════════════════════════════════════════════════════════════════ MemoLogs GeoLift Demo — Theme Tokens Mirrors geolift/templates/geolift/_base.html so the demo looks pixel-equivalent to the real product. All colours are CSS custom properties; toggling .dark on swaps every colour instantly. ═══════════════════════════════════════════════════════════════════ */ /* MemoLogs brand fonts — Inter for UI, JetBrains Mono for code/numbers. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); body, html { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'cv02','cv03','cv04','cv11'; letter-spacing: -0.01em; } /* Map Tailwind utilities + raw mono tags to JetBrains Mono. */ .font-mono, code, pre, kbd, samp, tt { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0; } :root { --page: #f8f9fb; --card: #ffffff; --inner: #f3f4f6; --deep: #e5e7eb; --input-bg: #ffffff; --heading: #111827; --body: #374151; --secondary: #6b7280; --muted: #9ca3af; --faint: #d1d5db; --border: rgba(0,0,0,.08); --border-subtle: #e5e7eb; --border-input: #d1d5db; --glass-bg: rgba(255,255,255,.82); --glass-border: rgba(0,0,0,.06); --green-bg: #f0fdf4; --green-text: #15803d; --green-border: rgba(34,197,94,.25); --green-bg2: #dcfce7; --red-bg: #fef2f2; --red-text: #b91c1c; --red-border: rgba(239,68,68,.25); --yellow-bg: #fefce8; --yellow-text: #a16207; --yellow-border: rgba(234,179,8,.25); --blue-bg: #eff6ff; --blue-text: #1d4ed8; --blue-border: rgba(59,130,246,.25); --purple-bg: #faf5ff; --purple-text: #7e22ce; --purple-border: rgba(147,51,234,.25); --orange-bg: #fff7ed; --orange-text: #c2410c; --orange-border: rgba(249,115,22,.25); --chart-grid: #e5e7eb; --chart-axis: #6b7280; --chart-label: #374151; --chart-muted: #9ca3af; --chart-zero: #9ca3af; --drop-border: #cbd5e1; --drop-hover-bg: rgba(59,130,246,.06); --scrollbar-track: #f3f4f6; --scrollbar-thumb: #d1d5db; } html.dark { --page: #050505; --card: #121212; --inner: #141414; --deep: #0a0a0a; --input-bg: #141414; --heading: #ffffff; --body: #e5e7eb; --secondary: #9ca3af; --muted: #6b7280; --faint: #4b5563; --border: rgba(255,255,255,.1); --border-subtle: #2a2a2a; --border-input: #2a2a2a; --glass-bg: rgba(10,18,15,.7); --glass-border: rgba(59,130,246,.1); --green-bg: rgba(34,197,94,.1); --green-text: #4ade80; --green-border: rgba(34,197,94,.3); --green-bg2: rgba(34,197,94,.15); --red-bg: rgba(239,68,68,.1); --red-text: #f87171; --red-border: rgba(239,68,68,.3); --yellow-bg: rgba(234,179,8,.1); --yellow-text: #facc15; --yellow-border: rgba(234,179,8,.3); --blue-bg: rgba(59,130,246,.1); --blue-text: #60a5fa; --blue-border: rgba(59,130,246,.3); --purple-bg: rgba(147,51,234,.1); --purple-text: #c084fc; --purple-border: rgba(147,51,234,.3); --orange-bg: rgba(249,115,22,.1); --orange-text: #fb923c; --orange-border: rgba(249,115,22,.3); --chart-grid: #1a1a1a; --chart-axis: #4b5563; --chart-label: #d1d5db; --chart-muted: #6b7280; --chart-zero: #4b5563; --drop-border: #2a2a2a; --drop-hover-bg: rgba(59,130,246,.08); --scrollbar-track: #0a0a0a; --scrollbar-thumb: #2a2a2a; } .drop-zone { border: 2px dashed var(--drop-border); } .drop-zone.over { border-color: #3b82f6; background: var(--drop-hover-bg); } .spinner { border: 3px solid var(--border-subtle); border-top-color: #3b82f6; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.6s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { opacity: .8; } /* Demo-only banner that floats above all pages so reviewers know the data is synthetic. Hidden when html has [data-demo-banner='off']. */ .demo-banner { position: fixed; bottom: 16px; right: 16px; z-index: 100; background: rgba(59,130,246,0.12); color: var(--blue-text); border: 1px solid var(--blue-border); border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(8px); pointer-events: none; user-select: none; } html[data-demo-banner='off'] .demo-banner { display: none; }