/* ═══ Signals — the world engine room ═══ */ /* Root reset — signals.html does NOT load magna-theme.css, so nothing else clears the browser's default 8px margin. Without this the sticky nav sits ~8px below the viewport top (the "nav leaves the top edge" gap) and the page can shift horizontally on iPad. Pin flush + no horizontal shift. */ html, body { margin: 0; padding: 0; } html { overflow-x: hidden; } .sig { box-sizing: border-box; /* .sig *{} below only covers descendants — without this the 16px side padding is ADDED to width:100%, so .sig runs 32px past the viewport on narrow screens and overflow-x:hidden silently clips the right edge (dots + Use-my-location button). */ width: 100%; /* fill the flex-column body (site-footer sets display:flex) — */ max-width: 1360px; /* without this, margin:0 auto shrinks it to content width */ margin: 0 auto; padding: 12px 16px 64px; font-family: var(--font-mono, 'Space Mono', monospace); color: var(--th-text-primary, #e8e4da); overflow-x: hidden; /* hard guarantee: no horizontal scroll on any device */ } .sig *, .sig *::before, .sig *::after { box-sizing: border-box; } /* ── Master bus ── */ .sig-bus { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 16px; background: var(--th-bg-surface, rgba(18,18,26,0.7)); border: 1px solid var(--th-border, rgba(255,255,255,0.08)); backdrop-filter: blur(12px); margin-bottom: 16px; } .sig-bus-state { display: inline-flex; align-items: center; gap: 8px; --c: #10b981; } .sig-bus-state[data-level="critical"] { --c: #ef4444; } .sig-bus-state[data-level="warning"] { --c: #f97316; } .sig-bus-state[data-level="elevated"] { --c: #38bdf8; } .sig-bus-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); animation: sigPulse 2.6s ease-in-out infinite; } @keyframes sigPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .sig-bus-dot { animation: none; } } .sig-bus-level { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; padding-right: 0.24em; color: var(--c); }/* pad = letter-spacing: WebKit/iPad clips the last glyph otherwise */ .sig-bus-title h1 { margin: 0; font-size: 1.1rem; letter-spacing: 0.42em; font-weight: 700; } .sig-bus-title p { margin: 2px 0 0; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--th-text-secondary, rgba(232,228,218,0.6)); font-family: var(--font-body, sans-serif); } .sig-bus-stats { display: inline-flex; align-items: center; gap: 16px; } .sig-bus-stat { text-align: center; } .sig-bus-num { display: block; font-size: 1.2rem; font-weight: 700; color: var(--th-color-globe, #38bdf8); } .sig-bus-lbl { font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--th-text-muted, rgba(232,228,218,0.45)); } .sig-bell { background: transparent; border: 1px solid var(--th-border, rgba(255,255,255,0.12)); color: inherit; border-radius: 10px; padding: 8px; cursor: pointer; } .sig-bell:hover { background: rgba(255,255,255,0.05); } .sig-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.35); border: 1px solid var(--th-border, rgba(255,255,255,0.08)); } .sig-mode { appearance: none; border: 0; background: transparent; color: var(--th-text-secondary, rgba(232,228,218,0.55)); font-family: inherit; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; padding: 6px 14px; border-radius: 999px; cursor: pointer; } .sig-mode.is-active { background: color-mix(in srgb, var(--th-color-globe, #38bdf8) 26%, transparent); color: var(--th-color-globe, #38bdf8); box-shadow: 0 0 0 1px color-mix(in srgb, var(--th-color-globe,#38bdf8) 45%, transparent) inset; } /* ── views ── */ .sig-view { display: none; } .sig-view.is-active { display: block; } /* ── Near-me row ── */ .sig-near { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 14px; border-left: 3px solid var(--th-color-globe, #38bdf8); } .sig-near-head { display: flex; align-items: center; gap: 12px; } .sig-near-star { font-size: 1.2rem; color: var(--th-color-globe, #38bdf8); text-shadow: 0 0 10px var(--th-color-globe, #38bdf8); } .sig-near-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; } .sig-near-sub { font-size: 0.6rem; color: var(--th-text-secondary, rgba(232,228,218,0.6)); font-family: var(--font-body, sans-serif); margin-top: 2px; } .sig-near-ctrls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sig-near-field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-text-muted, rgba(232,228,218,0.5)); } .sig-near-field select { background: rgba(0,0,0,0.4); color: var(--th-text-primary, #e8e4da); border: 1px solid var(--th-border, rgba(255,255,255,0.12)); border-radius: 8px; padding: 5px 8px; font-family: inherit; font-size: 0.62rem; } .sig-near-loc { background: color-mix(in srgb, var(--th-color-globe,#38bdf8) 18%, transparent); color: var(--th-color-globe,#38bdf8); border: 1px solid color-mix(in srgb, var(--th-color-globe,#38bdf8) 40%, transparent); border-radius: 8px; padding: 6px 12px; font-family: inherit; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; } .sig-near-loc:active { transform: scale(0.96); } .sig-tune-hint { font-size: 0.62rem; color: var(--th-text-secondary, rgba(232,228,218,0.55)); font-family: var(--font-body, sans-serif); margin: 0 2px 12px; letter-spacing: 0.02em; } /* ── Kanban ── */ .sig-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .sig-col { background: rgba(0,0,0,0.28); border: 1px solid var(--th-border, rgba(255,255,255,0.07)); border-radius: 14px; min-height: 220px; display: flex; flex-direction: column; transition: background 0.18s, box-shadow 0.18s; } .sig-col--over { background: color-mix(in srgb, var(--th-color-globe,#38bdf8) 10%, rgba(0,0,0,0.28)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--th-color-globe,#38bdf8) 45%, transparent) inset; } .sig-col-head { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--th-text-secondary, rgba(232,228,218,0.6)); padding: 12px 12px 8px; border-bottom: 1px solid var(--th-border, rgba(255,255,255,0.06)); } .sig-col[data-col="OFF"] .sig-col-head { color: rgba(232,228,218,0.4); } .sig-col[data-col="ELEVATED"] .sig-col-head { color: #38bdf8; } .sig-col-body { display: flex; flex-direction: column; gap: 7px; padding: 10px; flex: 1; } .sig-card { --card-color: #38bdf8; position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 11px; /* Each stream wears its own domain hue: a hot tinted rail on the left that melts into the dark chassis — the card looks lit from its color, not just bordered by it. Two layers: the color gradient over a base panel. */ background: linear-gradient(100deg, color-mix(in srgb, var(--card-color) 30%, transparent) 0%, color-mix(in srgb, var(--card-color) 12%, transparent) 32%, color-mix(in srgb, var(--card-color) 3%, transparent) 62%, rgba(16,16,24,0) 100%), linear-gradient(180deg, rgba(24,24,34,0.9), rgba(13,13,20,0.94)); border: 1px solid color-mix(in srgb, var(--card-color) 26%, rgba(255,255,255,0.05)); color: inherit; font-family: inherit; cursor: grab; touch-action: none; box-shadow: inset 3px 0 0 var(--card-color), inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35); transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } /* Glow bloom off the left rail — a soft haze of the card's color. */ .sig-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 11px 0 0 11px; background: radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, var(--card-color) 30%, transparent) 0%, transparent 70%); opacity: 0.55; pointer-events: none; transition: opacity 0.25s ease; } .sig-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--card-color) 55%, transparent); box-shadow: inset 3px 0 0 var(--card-color), inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 22px color-mix(in srgb, var(--card-color) 32%, transparent); } .sig-card:hover::before { opacity: 1; } .sig-card:focus-visible { outline: 2px solid var(--card-color); outline-offset: 2px; } .sig-card:active { cursor: grabbing; } .sig-card-glyph { position: relative; font-size: 1rem; color: var(--card-color); width: 18px; text-align: center; text-shadow: 0 0 10px color-mix(in srgb, var(--card-color) 75%, transparent); } .sig-card-name { position: relative; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; color: var(--th-text-primary, #e8e4da); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sig-card-count { position: relative; font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--card-color) 70%, #ffffff); text-shadow: 0 0 8px color-mix(in srgb, var(--card-color) 45%, transparent); } /* ── LED indicator — a live beacon, not a dot ── The core is a lit bead of the SEVERITY color; a radar ring pings outward. The ping tempo tracks how hot the stream is (--led-tempo, set per level), so critical streams throb fast and urgent while quiet ones idle. Cards are phase-offset (nth-child, below) so same-level LEDs never blink in lockstep. */ .sig-card-dot { --dot-color: #64748b; --led-tempo: 3.4s; position: relative; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0%, var(--dot-color) 58%); box-shadow: 0 0 6px var(--dot-color), 0 0 2px var(--dot-color); animation: sigLedCore var(--led-tempo) ease-in-out infinite; } /* Radar ping — expands and dissolves outward from the bead. */ .sig-card-dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--dot-color); opacity: 0; pointer-events: none; animation: sigLedPing var(--led-tempo) cubic-bezier(0.2, 0.6, 0.35, 1) infinite; will-change: transform, opacity; } @keyframes sigLedCore { 0%, 100% { box-shadow: 0 0 5px var(--dot-color), 0 0 1px var(--dot-color); } 50% { box-shadow: 0 0 11px var(--dot-color), 0 0 4px var(--dot-color); } } @keyframes sigLedPing { 0% { transform: scale(0.7); opacity: 0.9; } 65% { opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } /* Severity → tempo + character. Hotter = faster, wider ping. */ .sig-card-dot[data-level="CRITICAL"] { --led-tempo: 1.15s; } .sig-card-dot[data-level="WARNING"] { --led-tempo: 1.9s; } .sig-card-dot[data-level="ELEVATED"] { --led-tempo: 3.1s; } .sig-card-dot[data-level="INTERPRETIVE"] { --led-tempo: 4.2s; } /* Quiet streams idle — steady bead, a slow breath, no attention-grabbing ping. */ .sig-card-dot[data-level="NOMINAL"] { --led-tempo: 5.4s; } .sig-card-dot[data-level="NOMINAL"]::after { animation: none; opacity: 0; } /* Phase-offset so neighbours of the same severity fall out of sync. */ .sig-col-body .sig-card:nth-child(5n+2) .sig-card-dot, .sig-col-body .sig-card:nth-child(5n+2) .sig-card-dot::after { animation-delay: -0.6s; } .sig-col-body .sig-card:nth-child(5n+3) .sig-card-dot, .sig-col-body .sig-card:nth-child(5n+3) .sig-card-dot::after { animation-delay: -1.3s; } .sig-col-body .sig-card:nth-child(5n+4) .sig-card-dot, .sig-col-body .sig-card:nth-child(5n+4) .sig-card-dot::after { animation-delay: -2.0s; } .sig-col-body .sig-card:nth-child(5n+5) .sig-card-dot, .sig-col-body .sig-card:nth-child(5n+5) .sig-card-dot::after { animation-delay: -2.7s; } @media (prefers-reduced-motion: reduce) { .sig-card-dot { animation: none; } .sig-card-dot::after { animation: none; opacity: 0; } } .sig-card--dragging { opacity: 0.35; } .sig-card--ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 12px 40px rgba(0,0,0,0.5); } /* ── Watch map alert nodes — glowing severity beacons ── */ .sig-map .leaflet-div-icon.sig-node-wrap { background: transparent !important; border: 0 !important; } .sig-node { display: block; width: 100%; height: 100%; position: relative; --nc: #38bdf8; } .sig-node--critical { --nc: #ef4444; } .sig-node--warning { --nc: #f97316; } .sig-node--elevated { --nc: #38bdf8; } .sig-node-core { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0%, var(--nc) 62%); box-shadow: 0 0 4px var(--nc), 0 0 8px var(--nc); } .sig-node--critical .sig-node-core { width: 7px; height: 7px; } .sig-node-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--nc); opacity: 0.45; box-shadow: 0 0 8px color-mix(in srgb, var(--nc) 55%, transparent) inset; } .sig-node:hover .sig-node-ring { opacity: 0.9; } .sig-node--critical .sig-node-ring { animation: sigNodePulse 2.2s ease-out infinite; } .sig-node--warning .sig-node-ring { animation: sigNodePulse 3.4s ease-out infinite; } @keyframes sigNodePulse { 0% { transform: scale(0.42); opacity: 0.75; } 100% { transform: scale(1.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sig-node-ring { animation: none !important; } } /* ── Map severity legend/key ── */ .sig-legend { background: rgba(10, 10, 18, 0.82); border: 1px solid var(--th-border, rgba(255,255,255,0.1)); border-radius: 10px; padding: 9px 12px; font-family: var(--font-mono, monospace); color: var(--th-text-secondary, rgba(232,228,218,0.8)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); line-height: 1.5; } .sig-legend-title { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2em; color: var(--th-text-muted, rgba(232,228,218,0.5)); margin-bottom: 6px; } .sig-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.64rem; padding: 1px 0; } .sig-legend-row .sig-node { position: relative; display: inline-block; width: 14px; height: 14px; flex: none; } .sig-legend-hint { margin-top: 6px; font-size: 0.5rem; color: var(--th-text-muted, rgba(232,228,218,0.4)); letter-spacing: 0.04em; } /* ── Watch ── */ .sig-watch-grid { display: grid; grid-template-columns: 1fr 360px; gap: 14px; } .sig-map { height: 62vh; min-height: 420px; border-radius: 16px; overflow: hidden; } .sig-feed { display: flex; flex-direction: column; gap: 10px; padding: 14px; max-height: 62vh; overflow: hidden; } .sig-feed-head { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; color: var(--th-text-secondary, rgba(232,228,218,0.6)); } .sig-feed-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 900px) { .sig-bus { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: 10px; } .sig-bus-title { grid-column: 1 / -1; } .sig-kanban { grid-template-columns: 1fr 1fr; } .sig-watch-grid { grid-template-columns: 1fr; } .sig-map { height: 46vh; } .sig-feed { max-height: none; } } @media (max-width: 560px) { .sig { padding: 8px 10px 48px; } .sig-bus { grid-template-columns: 1fr; text-align: left; padding: 12px 14px; } .sig-bus-title h1 { font-size: 0.95rem; letter-spacing: 0.28em; } .sig-bus-stats { justify-content: flex-start; flex-wrap: wrap; gap: 14px; } .sig-modes { width: fit-content; } .sig-kanban { grid-template-columns: 1fr; } .sig-col { min-height: 0; } .sig-near { flex-direction: column; align-items: stretch; } .sig-near-ctrls { flex-wrap: wrap; } .sig-near-field { flex: 1 1 auto; } .sig-map { height: 54vh; } .sig-legend { font-size: 0.92em; padding: 7px 10px; } } @media (max-width: 380px) { .sig-bus-title h1 { font-size: 0.82rem; letter-spacing: 0.2em; } .sig-near-ctrls { gap: 8px; } .sig-near-loc { flex: 1 1 100%; } }