/* ─── Gulf Blue Concepts · GBC70 Design System ─────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --gb:#93dafe; --dark:#060810; --navy:#0a1020; --orange:#ff7400; --border:rgba(147,218,254,0.10); --border-s:rgba(147,218,254,0.20); --muted:rgba(147,218,254,0.72); --panel:rgba(10,16,36,0.94); --green:#3fcf6e; --red:#ff4545; --gold:#ffc300; --purple:#a78bfa; --yellow:#ffdd57; --bc:'Barlow Condensed',sans-serif; --b:'Barlow',sans-serif; --m:'Share Tech Mono',monospace; } html{scroll-behavior:smooth} body{ background:var(--dark); color:#f4f6fa; font-family:var(--b); min-height:100vh; overflow-x:hidden; cursor:default; } /* ─── Animated background canvas ──────────────────────────────────────────── */ #bg-canvas{ position:fixed;top:0;left:0; width:100%;height:100%; z-index:0;pointer-events:none;opacity:.08; } /* ─── App shell: fixed nav + hero strip, only the content area scrolls ───── Opt-in via -- scoped so it can't affect pages that haven't adopted this layout. */ body.app-shell{ height:100vh;overflow:hidden; display:flex;flex-direction:column; } body.app-shell nav{flex-shrink:0} body.app-shell .hero-strip{flex-shrink:0} body.app-shell .form-wrap{flex:1;min-height:0;overflow-y:auto} body.app-shell main{flex:1;min-height:0;overflow-y:auto} /* ─── NAV ──────────────────────────────────────────────────────────────────── */ nav{ position:sticky;top:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:0 24px;height:56px; background:rgba(6,8,16,.97); border-bottom:1px solid var(--border); backdrop-filter:blur(20px); } .nav-logo{ display:flex;align-items:center;gap:10px; text-decoration:none;flex-shrink:0; } .logo-hex{ width:34px;height:34px; background:rgba(147,218,254,.06); border:1.5px solid rgba(147,218,254,.3); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); display:flex;align-items:center;justify-content:center; font-family:var(--bc);font-weight:900;font-size:12px; color:var(--gb);letter-spacing:.05em; } .lw1{ font-family:var(--bc);font-weight:800;font-size:15px; letter-spacing:.22em;color:var(--gb);line-height:1; } .lw2{ font-family:var(--bc);font-weight:300;font-size:7px; letter-spacing:.28em;color:var(--muted);margin-top:2px; } .nav-tabs{display:flex;align-items:stretch;gap:0} .ntab{ font-family:var(--bc);font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; padding:0 13px;background:none;border:none; color:var(--muted);cursor:pointer; border-bottom:2px solid transparent; transition:all .2s;height:56px;white-space:nowrap; } .ntab.active{color:#f4f6fa;border-bottom-color:var(--orange)} .ntab:hover:not(.active){color:var(--gb)} .nav-right{ display:flex;align-items:center;gap:10px;flex-shrink:0; } .ws-badge{ display:flex;align-items:center;gap:6px; font-family:var(--m);font-size:9px; border:1px solid rgba(63,207,110,.25); padding:4px 10px; background:rgba(63,207,110,.05); color:var(--green); } .ws-badge.disconnected{ border-color:rgba(255,69,69,.25); background:rgba(255,69,69,.05); color:var(--red); } .ldot{ width:6px;height:6px;border-radius:50%; background:var(--green); animation:blink 1.4s ease-in-out infinite; } .ldot.off{background:var(--red);animation:none} .uptime-display{ font-family:var(--m);font-size:8px; color:var(--muted);letter-spacing:.08em; } @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}} /* ─── MAIN CONTENT ─────────────────────────────────────────────────────────── */ main{ max-width:1400px; margin:0 auto; padding:18px 24px 48px; position:relative;z-index:1; } /* ─── SECTION LABEL ────────────────────────────────────────────────────────── */ .sec-label{ font-family:var(--bc);font-size:8px;font-weight:700; letter-spacing:.22em;text-transform:uppercase; color:var(--muted);margin-bottom:10px; display:flex;align-items:center;gap:8px; } .sec-label::after{content:'';flex:1;height:1px;background:var(--border)} /* ─── PANEL / CARD ─────────────────────────────────────────────────────────── */ .card{ background:var(--panel); border:1px solid var(--border); overflow:hidden; } .card-accent{border-top:2px solid var(--orange)} .card-accent-gb{border-top:2px solid var(--gb)} .card-accent-green{border-top:2px solid var(--green)} /* Panel header */ .ph{ font-family:var(--bc);font-size:8px;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:var(--muted); padding:8px 14px; border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; } /* Panel body */ .pb{padding:14px} /* ─── KPI STRIP ────────────────────────────────────────────────────────────── */ .kpi-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px;margin-bottom:14px; } .kpi{ background:var(--panel);border:1px solid var(--border); padding:12px 14px;border-top:2px solid var(--orange); } .kpi.b{border-top-color:var(--gb)} .kpi.g{border-top-color:var(--green)} .kpi.gold{border-top-color:var(--gold)} .kpi.r{border-top-color:var(--red)} .kpi-lbl{ font-family:var(--bc);font-size:8px;font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--muted);margin-bottom:5px; } .kpi-val{ font-family:var(--bc);font-size:26px; font-weight:900;line-height:1;color:#f4f6fa; } .kpi-val.orange{color:var(--orange)} .kpi-val.green{color:var(--green)} .kpi-val.red{color:var(--red)} .kpi-val.gb{color:var(--gb)} .kpi-sub{font-family:var(--m);font-size:7px;color:var(--muted);margin-top:3px} /* ─── BIG READOUT ──────────────────────────────────────────────────────────── */ .big-num{ font-family:var(--bc);font-size:48px;font-weight:900; color:var(--orange);line-height:1;text-align:center; text-shadow:0 0 30px rgba(255,116,0,.2); transition:color .3s; } .big-num.gb{color:var(--gb)} .big-num.green{color:var(--green)} .big-num-unit{ font-family:var(--m);font-size:9px;color:var(--muted); letter-spacing:.15em;text-align:center;margin-top:2px; } /* ─── GAUGE (circular) ─────────────────────────────────────────────────────── */ .gauge-wrap{position:relative;width:160px;height:160px;margin:12px auto} .gauge-svg{width:100%;height:100%;transform:rotate(-90deg)} .gauge-bg{fill:none;stroke:rgba(147,218,254,.06);stroke-width:12} .gauge-progress{ fill:none;stroke:var(--gb);stroke-width:12; stroke-linecap:round;transition:stroke-dashoffset .5s ease; } .gauge-progress.orange{stroke:var(--orange)} .gauge-progress.green{stroke:var(--green)} .gauge-txt{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); font-family:var(--bc);font-size:28px;font-weight:900; color:var(--orange);text-shadow:0 2px 8px rgba(0,0,0,.6); } /* ─── PROGRESS BAR ─────────────────────────────────────────────────────────── */ .prog-bar{ height:20px; background:rgba(147,218,254,.04); border:1px solid var(--border); position:relative;overflow:hidden; } .prog-fill{ height:100%;min-width:3px; background:linear-gradient(90deg,var(--orange),var(--gb)); transition:width .4s ease; box-shadow:0 0 8px rgba(255,116,0,.4); } /* ─── WING CONTROL BUTTONS ─────────────────────────────────────────────────── */ .wing-btns{ display:flex;justify-content:center;gap:16px; padding:16px 14px; } .wing-btn{ font-family:var(--bc);font-size:14px;font-weight:900; letter-spacing:.18em;text-transform:uppercase; padding:14px 28px;border:none;cursor:pointer; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:all .15s;user-select:none;-webkit-user-select:none; touch-action:manipulation; } .wing-btn:active{transform:scale(.97)} .wing-btn:disabled{opacity:.35;cursor:not-allowed;transform:none} .wing-btn.raise{background:var(--gb);color:var(--dark)} .wing-btn.raise:active:not(:disabled){background:#6ec8f0} .wing-btn.lower{background:var(--orange);color:#fff} .wing-btn.lower:active:not(:disabled){background:#e06600} /* ─── STANDARD BUTTONS ─────────────────────────────────────────────────────── */ .btn{ font-family:var(--bc);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; padding:8px 18px;cursor:pointer; background:none;border:1px solid var(--border-s); color:var(--muted);transition:all .15s; } .btn:hover{border-color:var(--orange);color:var(--orange)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn-primary{ font-family:var(--bc);font-size:11px;font-weight:900; letter-spacing:.18em;text-transform:uppercase; color:var(--dark);background:var(--orange);border:none; padding:10px 24px;cursor:pointer; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:background .2s; } .btn-primary:hover{background:#ff9500} .btn-primary:disabled{background:#444;cursor:not-allowed;clip-path:none} .btn-success{ font-family:var(--bc);font-size:11px;font-weight:900; letter-spacing:.15em;text-transform:uppercase; color:var(--dark);background:var(--green);border:none; padding:10px 24px;cursor:pointer; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:background .2s; } .btn-success:hover{background:#30b85e} .btn-success:disabled{background:#444;cursor:not-allowed;clip-path:none} .btn-wide{ width:100%;padding:11px;margin:5px 0; font-family:var(--bc);font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; background:var(--orange);color:#fff;border:none;cursor:pointer; transition:background .2s; } .btn-wide:hover{background:#e06600} .btn-wide:disabled{background:#444;cursor:not-allowed} /* Toggle button states */ .btn-toggle-off{background:var(--orange);color:#fff} .btn-toggle-on{background:var(--green);color:var(--dark)} .btn-toggle-pending{background:var(--yellow);color:var(--dark)} /* ─── TABLES ───────────────────────────────────────────────────────────────── */ table{width:100%;border-collapse:collapse;font-size:13px} thead th{ font-family:var(--bc);font-size:7px;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:var(--muted);padding:8px 10px;text-align:left; border-bottom:1px solid rgba(255,116,0,.3); background:rgba(6,8,16,.5); } tbody tr{border-bottom:1px solid rgba(147,218,254,.04)} tbody tr:hover{background:rgba(255,116,0,.05)} td{ padding:9px 10px; font-family:var(--m);font-size:11px;color:#f4f6fa; } td.lbl{ font-family:var(--bc);font-size:10px;font-weight:700; letter-spacing:.08em;color:rgba(147,218,254,.75);width:45%; } .active-rule{background:rgba(255,116,0,.12)!important} .active-rule td:first-child{border-left:3px solid var(--orange)} .gps-warning{background:rgba(255,69,69,.12)!important} .gps-warning td:first-child{border-left:3px solid var(--red)} td.val-orange{color:var(--orange);font-weight:700} td.val-green{color:var(--green);font-weight:700} td.val-red{color:var(--red);font-weight:700} td.val-gb{color:var(--gb)} /* ─── FORM CONTROLS ────────────────────────────────────────────────────────── */ select,input[type="password"],input[type="text"],input[type="email"]{ background:rgba(6,8,16,.8); color:#f4f6fa; border:1px solid var(--border-s); font-family:var(--m);font-size:11px; padding:8px 10px; width:100%; outline:none; transition:border-color .2s; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393dafe' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; cursor:pointer; } input[type="password"],input[type="text"],input[type="email"]{ background-image:none; cursor:text; } select:focus,input:focus{ border-color:var(--orange); box-shadow:0 0 0 2px rgba(255,116,0,.15); } input[type="range"]{ -webkit-appearance:none;appearance:none; width:100%;height:4px; background:rgba(147,218,254,.1); border:none;outline:none;cursor:pointer; margin:8px 0; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px;height:14px; background:var(--orange); border-radius:50%; cursor:pointer; border:2px solid var(--dark); } .input-label{ font-family:var(--bc);font-size:8px;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:5px; } /* ─── STATUS INDICATORS ────────────────────────────────────────────────────── */ .status-dot{ width:10px;height:10px;border-radius:50%; flex-shrink:0;display:inline-block; background:rgba(147,218,254,.2); } .status-dot.on{background:var(--green)} .status-dot.off{background:var(--red)} .status-dot.warn{background:var(--yellow)} .status-text{font-family:var(--m);font-size:10px} .status-text.connected{color:var(--green)} .status-text.disconnected{color:var(--red)} .status-text.warning{color:var(--yellow)} /* Legacy compatibility */ .status{font-weight:700} .connected{color:var(--green)} .disconnected{color:var(--red)} /* ─── WARNING BOX ──────────────────────────────────────────────────────────── */ .warn-box{ background:rgba(255,69,69,.12); border:1px solid rgba(255,69,69,.3); color:#ffdddd; padding:10px 14px; font-family:var(--m);font-size:10px; margin:10px 0; } /* ─── SERIAL LOG ───────────────────────────────────────────────────────────── */ .serial-log{ background:rgba(4,8,20,.9); color:#7fdbca; padding:12px; font-family:var(--m);font-size:10px; white-space:pre-wrap; height:200px; overflow-y:auto; border:1px solid rgba(147,218,254,.08); line-height:1.5; } /* ─── MODAL ────────────────────────────────────────────────────────────────── */ .modal-overlay{ display:none;position:fixed;inset:0; background:rgba(4,6,14,.92);z-index:100; align-items:center;justify-content:center;padding:20px; } .modal-overlay.open{display:flex} .modal{ background:var(--panel); border:1px solid var(--border-s); border-top:2px solid var(--orange); width:100%;max-width:540px;max-height:88vh; display:flex;flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.8);overflow:hidden; } .modal-header{padding:14px 16px;border-bottom:1px solid var(--border)} .modal-header h2{ font-family:var(--bc);font-size:16px;font-weight:800; color:var(--gb); } .modal-header p{font-size:11px;color:var(--muted);margin-top:4px} .modal-body{flex:1;overflow-y:auto;padding:14px 16px} .modal-footer{ padding:10px 16px; border-top:1px solid var(--border); display:flex;gap:8px;justify-content:flex-end; } /* ─── TOAST ────────────────────────────────────────────────────────────────── */ .toast{ position:fixed;bottom:24px;right:24px; background:var(--panel);color:var(--gb); border:1px solid rgba(147,218,254,.2); border-left:3px solid var(--orange); padding:12px 18px;font-family:var(--m);font-size:11px; z-index:300;opacity:0;transform:translateY(10px); transition:all .3s ease; box-shadow:0 10px 30px rgba(0,0,0,.6); } .toast.show{opacity:1;transform:translateY(0)} /* ─── CANVAS (track annotator) ─────────────────────────────────────────────── */ canvas.track-canvas{ display:block;width:100%; background:#0a1020; border:1px solid var(--border-s); } .canvas-hint{ font-family:var(--m);font-size:9px;color:var(--muted); text-align:center;margin-top:8px; } /* ─── POPUP (track annotator) ──────────────────────────────────────────────── */ .popup{ position:absolute;z-index:50; background:rgba(4,8,24,.98); border:1px solid var(--orange); box-shadow:0 10px 40px rgba(0,0,0,.7); padding:14px;width:220px; color:#f4f6fa; } .popup-coords{font-family:var(--m);font-size:10px;color:var(--gb);margin-bottom:6px} .popup-title{font-family:var(--bc);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--orange);margin-bottom:10px} .popup-buttons{display:flex;gap:8px;margin-top:10px} .popup-buttons .btn{flex:1;padding:6px 0;text-align:center} /* ─── SIDEBAR CARD (track annotator) ───────────────────────────────────────── */ .sidebar-card{ background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--gb); } .sidebar-header{ display:flex;justify-content:space-between;align-items:center; padding:8px 14px;border-bottom:1px solid var(--border); } .sidebar-header h2{ font-family:var(--bc);font-size:14px;font-weight:800; color:var(--gb); } .sidebar-header .count{ font-family:var(--m);font-size:10px;color:var(--orange); background:rgba(255,116,0,.12); border:1px solid rgba(255,116,0,.3); padding:2px 8px; } .btn-reset{ background:none;border:none;color:var(--muted); font-family:var(--m);font-size:10px;cursor:pointer; } .btn-reset:hover{color:var(--orange)} .empty-state{ text-align:center;padding:2rem 1rem; color:var(--muted);font-size:11px;line-height:1.6; } .empty-state .icon{font-size:32px;display:block;margin-bottom:8px;opacity:.5} .ann-list{display:flex;flex-direction:column;gap:1px;max-height:340px;overflow-y:auto} .ann-item{ display:flex;align-items:center;justify-content:space-between; padding:9px 14px; background:rgba(6,8,16,.5); cursor:pointer;transition:background .15s; } .ann-item:hover,.ann-item.active{background:rgba(255,116,0,.08)} .ann-left{display:flex;align-items:center;gap:10px} .ann-pct{ font-family:var(--m);font-size:12px;font-weight:700; color:var(--orange);min-width:44px;text-align:center; background:rgba(255,116,0,.1);border:1px solid rgba(255,116,0,.25); padding:2px 6px; } .ann-coords{font-family:var(--m);font-size:9px;color:var(--muted);line-height:1.4} .btn-remove{ background:none;border:none;color:rgba(147,218,254,.25); font-size:14px;cursor:pointer;padding:2px 6px; } .btn-remove:hover{color:var(--red)} .btn-submit{ width:100%;margin-top:10px;padding:12px 0; font-family:var(--bc);font-size:11px;font-weight:900; letter-spacing:.18em;text-transform:uppercase; background:var(--orange);color:var(--dark);border:none; cursor:pointer; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:background .2s; display:flex;align-items:center;justify-content:center;gap:8px; } .btn-submit:hover{background:#ff9500} /* ─── PCT BADGE (modal table) ──────────────────────────────────────────────── */ .pct-badge{ display:inline-block; background:rgba(255,116,0,.12); color:var(--orange); font-family:var(--m);font-size:10px;font-weight:700; padding:2px 8px; border:1px solid rgba(255,116,0,.3); } /* ─── SPINNER ──────────────────────────────────────────────────────────────── */ .spinner{ width:14px;height:14px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--orange); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ─── LAYOUT GRID ──────────────────────────────────────────────────────────── */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .grid-2-side{display:grid;grid-template-columns:1fr 300px;gap:12px} .grid-track{display:grid;grid-template-columns:1fr 280px;gap:16px} @media(max-width:900px){ .grid-2,.grid-2-side,.grid-track{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr 1fr} .nav-tabs .ntab{padding:0 8px;font-size:10px} .lw2{display:none} } @media(max-width:600px){ .grid-3{grid-template-columns:1fr} main{padding:12px 14px 32px} } /* ─── CARDS GRID ───────────────────────────────────────────────────────────── */ .cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; } /* ─── SCROLLBAR ────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:rgba(6,8,16,.2)} ::-webkit-scrollbar-thumb{background:rgba(147,218,254,.15);border-radius:2px}