| 1 | |
| 2 | @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,400&display=swap'); |
| 3 | |
| 4 | :root{ |
| 5 | --ink:#0B0C0E; --ink-2:#101216; --ink-3:#15181d; |
| 6 | --paper:#F2EFE9; --graphite:#23262B; --ash:#9BA0A6; --ash-2:#6E7480; |
| 7 | --signal:#C1121F; --signal-dim:#8e1018; --signal-soft:rgba(193,18,31,.08); |
| 8 | --line:rgba(155,160,166,.18); --line-2:rgba(155,160,166,.30); |
| 9 | --ok:#3fd07f; |
| 10 | --display:Archivo,'Arial Narrow',system-ui,sans-serif; |
| 11 | --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; |
| 12 | --serif:Fraunces,Georgia,serif; |
| 13 | --ease:cubic-bezier(.16,1,.3,1); |
| 14 | --gutter:clamp(16px,3vw,34px); |
| 15 | } |
| 16 | *{box-sizing:border-box;margin:0;padding:0} |
| 17 | html{-webkit-text-size-adjust:100%} |
| 18 | body{ |
| 19 | background:var(--ink); color:var(--paper); |
| 20 | font-family:var(--mono); font-size:13px; line-height:1.55; |
| 21 | -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; |
| 22 | font-variant-numeric:tabular-nums; |
| 23 | } |
| 24 | ::selection{background:var(--signal);color:#fff} |
| 25 | a{color:inherit;text-decoration:none;transition:color .2s var(--ease)} |
| 26 | a:hover{color:var(--signal)} |
| 27 | img,video,canvas{display:block;max-width:100%} |
| 28 | .mono{font-family:var(--mono)} .serif{font-family:var(--serif)} |
| 29 | |
| 30 | .shell{display:flex;min-height:100vh} |
| 31 | .sidebar{ |
| 32 | width:212px;flex-shrink:0;background:var(--ink);border-right:1px solid var(--line); |
| 33 | position:sticky;top:0;height:100vh;overflow-y:auto; |
| 34 | } |
| 35 | .brand{padding:18px 18px 14px;border-bottom:1px solid var(--line)} |
| 36 | .brand .logo{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.04em; |
| 37 | text-transform:uppercase;display:flex;align-items:center;gap:9px;color:var(--paper)} |
| 38 | .brand .logo b{color:var(--signal)} |
| 39 | .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--signal); |
| 40 | box-shadow:0 0 0 0 rgba(193,18,31,.5);animation:pulse 2s infinite} |
| 41 | .brand small{display:block;color:var(--ash-2);font-size:9.5px;letter-spacing:.18em; |
| 42 | text-transform:uppercase;margin-top:6px} |
| 43 | .nav{padding:8px 10px 30px} |
| 44 | .nav .group{color:var(--ash-2);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; |
| 45 | padding:16px 8px 5px;border-top:1px solid var(--line);margin-top:8px} |
| 46 | .nav .group:first-child{border-top:none;margin-top:0} |
| 47 | .nav a{display:flex;align-items:center;gap:10px;padding:7px 9px;color:var(--ash); |
| 48 | font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:all .2s var(--ease)} |
| 49 | .nav a:hover{color:var(--paper)} |
| 50 | .nav a.active{color:var(--signal)} |
| 51 | .nav a .ico{width:14px;text-align:center;font-size:12px;opacity:.9} |
| 52 | |
| 53 | .main{flex:1;min-width:0;display:flex;flex-direction:column} |
| 54 | .topbar{height:54px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px; |
| 55 | padding:0 var(--gutter);background:var(--ink);position:sticky;top:0;z-index:50} |
| 56 | .content{padding:22px var(--gutter) 60px;max-width:1480px;width:100%} |
| 57 | |
| 58 | .omni{position:relative;flex:1;max-width:600px} |
| 59 | .omni input{width:100%;background:transparent;border:1px solid var(--line);border-radius:2px; |
| 60 | padding:9px 14px 9px 34px;color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.04em} |
| 61 | .omni input::placeholder{color:var(--ash-2);text-transform:uppercase;font-size:11px;letter-spacing:.08em} |
| 62 | .omni input:focus{outline:none;border-color:var(--signal)} |
| 63 | .omni .mag{position:absolute;left:11px;top:9px;color:var(--ash-2)} |
| 64 | .omni-results{position:absolute;top:42px;left:0;right:0;background:var(--ink-2); |
| 65 | border:1px solid var(--line-2);box-shadow:0 18px 50px rgba(0,0,0,.6);overflow:hidden;z-index:60; |
| 66 | max-height:72vh;overflow-y:auto} |
| 67 | .omni-sec{padding:5px 0;border-top:1px solid var(--line)} |
| 68 | .omni-sec:first-child{border-top:none} |
| 69 | .omni-sec .lbl{color:var(--signal);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px 3px} |
| 70 | .omni-row{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer} |
| 71 | .omni-row:hover{background:var(--signal-soft)} |
| 72 | |
| 73 | h1{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem); |
| 74 | letter-spacing:-.02em;text-transform:uppercase;line-height:1} |
| 75 | h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; |
| 76 | color:var(--ash);margin:26px 0 12px;padding-top:12px;border-top:1px solid var(--line)} |
| 77 | h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em} |
| 78 | .sub{color:var(--ash);font-size:12px;letter-spacing:.03em;margin:8px 0 2px;max-width:70ch} |
| 79 | .muted{color:var(--ash-2)} .dimtext{color:var(--ash)} |
| 80 | .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)} |
| 81 | |
| 82 | .card{background:var(--ink-2);border:1px solid var(--line);padding:16px} |
| 83 | .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} |
| 84 | .grid>.kpi-card{margin:0} |
| 85 | .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} |
| 86 | .kpi-card{background:var(--ink-2);padding:16px 16px 14px;position:relative} |
| 87 | .kpi-card .lbl{color:var(--ash-2);font-size:10px;text-transform:uppercase;letter-spacing:.12em} |
| 88 | .kpi-card .val{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;margin-top:8px; |
| 89 | letter-spacing:-.02em;color:var(--paper)} |
| 90 | .kpi-card .val.accent{color:var(--signal)} .kpi-card .val.danger{color:var(--signal)} |
| 91 | |
| 92 | table{width:100%;border-collapse:collapse;font-size:12px} |
| 93 | th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line)} |
| 94 | th{color:var(--ash-2);font-weight:500;font-size:9.5px;text-transform:uppercase;letter-spacing:.12em} |
| 95 | tbody tr{transition:background .2s var(--ease)} |
| 96 | tbody tr:hover{background:var(--signal-soft)} |
| 97 | td.mono{font-family:var(--mono);font-size:11.5px} |
| 98 | |
| 99 | input,button,select{background:transparent;color:var(--paper);border:1px solid var(--line); |
| 100 | border-radius:2px;padding:8px 12px;font-size:11.5px;font-family:var(--mono);letter-spacing:.04em} |
| 101 | input:focus,select:focus{outline:none;border-color:var(--signal)} |
| 102 | button{cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font-size:11px;transition:all .2s var(--ease)} |
| 103 | button:hover{border-color:var(--signal);color:var(--signal)} |
| 104 | button.primary{background:var(--signal);color:#fff;border-color:var(--signal)} |
| 105 | button.primary:hover{background:var(--signal-dim);color:#fff} |
| 106 | button:disabled{opacity:.4;cursor:not-allowed} |
| 107 | |
| 108 | .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line); |
| 109 | border-radius:2px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)} |
| 110 | .badge.ok{color:var(--ok);border-color:rgba(63,208,127,.4)} |
| 111 | .badge.danger{color:var(--signal);border-color:rgba(193,18,31,.5)} |
| 112 | .badge.amber,.badge.accent,.badge.purple{color:var(--signal);border-color:rgba(193,18,31,.4)} |
| 113 | .chip{padding:6px 12px;border:1px solid var(--line);cursor:pointer;font-size:10.5px;letter-spacing:.08em; |
| 114 | text-transform:uppercase;color:var(--ash);transition:all .2s var(--ease);border-radius:2px} |
| 115 | .chip:hover{color:var(--paper);border-color:var(--ash-2)} |
| 116 | .chip.on{color:#fff;background:var(--signal);border-color:var(--signal)} |
| 117 | |
| 118 | .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} |
| 119 | .live-dot{width:7px;height:7px;border-radius:50%;background:var(--signal); |
| 120 | box-shadow:0 0 0 0 rgba(193,18,31,.5);animation:pulse 2s infinite;display:inline-block} |
| 121 | @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(193,18,31,0)}} |
| 122 | .scroll{overflow:auto} |
| 123 | |
| 124 | .wall-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 16px; |
| 125 | padding-bottom:14px;border-bottom:1px solid var(--line)} |
| 126 | .wall{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); |
| 127 | grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} |
| 128 | .wall.dense{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} |
| 129 | .tile{position:relative;background:#000;overflow:hidden;aspect-ratio:16/9;cursor:pointer} |
| 130 | .tile img{width:100%;height:100%;object-fit:cover;display:block;background:#06080d; |
| 131 | transition:opacity .45s var(--ease)} |
| 132 | .tile .meta{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px; |
| 133 | background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);font-family:var(--mono);font-size:10px} |
| 134 | .tile .meta .nm{color:#fff;font-weight:500;letter-spacing:.03em;white-space:nowrap;overflow:hidden; |
| 135 | text-overflow:ellipsis;text-transform:uppercase} |
| 136 | .tile .meta .ar{color:var(--ash);letter-spacing:.06em;text-transform:uppercase;font-size:9px;margin-top:2px} |
| 137 | .tile .live{position:absolute;top:7px;left:7px;display:flex;align-items:center;gap:5px;font-size:9px; |
| 138 | letter-spacing:.12em;font-weight:700;background:rgba(0,0,0,.6);padding:3px 7px;color:var(--signal); |
| 139 | text-transform:uppercase} |
| 140 | .tile .live .led{width:6px;height:6px;border-radius:50%;background:var(--signal); |
| 141 | box-shadow:0 0 0 0 rgba(193,18,31,.5);animation:pulse 2s infinite} |
| 142 | .tile .vtag{position:absolute;top:7px;right:7px;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase; |
| 143 | background:rgba(0,0,0,.6);color:var(--paper);padding:3px 6px} |
| 144 | .tile .off .led{background:var(--ash-2);box-shadow:none;animation:none} |
| 145 | .tile .off{color:var(--ash-2)} |
| 146 | .tile:hover{outline:1px solid var(--signal);outline-offset:-1px;z-index:2} |
| 147 | |
| 148 | .viewer-backdrop{position:fixed;inset:0;background:rgba(6,7,9,.92);z-index:2000;display:flex; |
| 149 | align-items:center;justify-content:center;padding:30px} |
| 150 | .viewer{background:var(--ink-2);border:1px solid var(--line-2);max-width:1100px;width:100%;overflow:hidden} |
| 151 | .viewer .vimg{background:#000}.viewer .vimg img{width:100%;display:block;max-height:74vh;object-fit:contain} |
| 152 | .viewer .vbody{padding:14px 18px;border-top:1px solid var(--line)} |
| 153 | |
| 154 | .feedmark{display:inline-flex;align-items:center;gap:5px;color:var(--signal);font-size:9.5px; |
| 155 | letter-spacing:.1em;text-transform:uppercase} |
| 156 | .feedmark .led{width:6px;height:6px;border-radius:50%;background:var(--signal); |
| 157 | box-shadow:0 0 0 0 rgba(193,18,31,.5);animation:pulse 2s infinite} |
| 158 | |
| 159 | .leaflet-container{background:#05060a;font-family:var(--mono)} |
| 160 | .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--ink-2);color:var(--paper); |
| 161 | border:1px solid var(--line-2);border-radius:2px} |
| 162 | .leaflet-popup-content{font-size:11.5px;font-family:var(--mono)} |
| 163 | .leaflet-bar a{background:var(--ink-2);color:var(--paper);border-color:var(--line)} |
| 164 | .marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(193,18,31,.2)} |
| 165 | .marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{ |
| 166 | background:rgba(193,18,31,.55);color:#fff;font-weight:700;font-family:var(--mono)} |