/* ========================================================================== Theme tokens Day mode (default): blues + white, matching the Waterway-Assist logo. Night mode: monochrome red on black/grey — the real maritime convention for preserving night vision at the helm. Every other hue collapses to a shade of red at night; day mode keeps its full green/amber/blue/teal semantic palette. Toggled via [data-theme] on , see js/frontend/theme.js. ========================================================================== */ :root{ /* surfaces */ --bg:#F5F9FC; --bg-2:#EAF1F8; --panel:#FFFFFF; --panel-edge:#D6E3F0; --lcd-bg:#0B2036; --lcd-bg-2:#0F2A44; --lcd-border:#061422; --ink:#0B2540; --muted:#52708F; --muted-2:#8098B2; --hairline:rgba(11,37,64,0.08); /* brand accent (LCD digits, primary actions, wordmark) */ --accent:#0B3B66; --accent-dim:#6E93B8; --accent-2:#1B5D97; --accent-2-dim:#7FAAD1; --accent-tint:rgba(11,59,102,.08); /* semantic status (day mode keeps full hue range) */ --status-ok:#1F9D6B; --status-ok-dim:#8FCBAE; --status-ok-tint:rgba(31,157,107,.12); --status-warn:#B5710A; --status-warn-dim:#DDB577; --status-warn-tint:rgba(181,113,10,.12); --status-info:#0E7C9E; --status-info-dim:#7FB9CC; --status-info-tint:rgba(14,124,158,.10); --status-info-muted:#7A8CA3; /* fab / primary button gradients */ --fab-grad-a:#4F8FE0; --fab-grad-b:#1B5D97; --fab-grad-c:#0B3B66; --fab-shadow-a:#0A2C4D; --fab-shadow-b:rgba(11,59,102,.45); --fab-ink:#06172B; --btn-primary-grad-a:#EAF3FB; --btn-primary-grad-b:#D3E6F5; --lcd-glow:rgba(11,59,102,.35); /* map */ --marker-border:#FFFFFF; --waterway-line:#8FAEC9; --node-marker:var(--accent-2); --user-marker:var(--status-info); --route-line:var(--accent); } /* Deliberately NOT keyed off prefers-color-scheme: this toggle is a safety feature (night-vision preservation at the helm), not a cosmetic preference — it must default to day and only switch on the sailor's explicit tap, never silently follow the OS/browser theme. */ :root[data-theme="night"]{ --bg:#000000; --bg-2:#0A0A0A; --panel:#141414; --panel-edge:#2E1414; --lcd-bg:#050505; --lcd-bg-2:#0A0505; --lcd-border:#000000; --ink:#FF6259; --muted:#B23A34; --muted-2:#7A2622; --hairline:rgba(255,66,56,0.14); --accent:#FF4438; --accent-dim:#7A2622; --accent-2:#E4423F; --accent-2-dim:#6B211F; --accent-tint:rgba(255,68,56,.10); --status-ok:#FF6259; --status-ok-dim:#B23A34; --status-ok-tint:rgba(255,98,89,.12); --status-warn:#C74C42; --status-warn-dim:#7A2622; --status-warn-tint:rgba(199,76,66,.12); --status-info:#E4423F; --status-info-dim:#A6362F; --status-info-tint:rgba(228,66,63,.10); --status-info-muted:#6B211F; --fab-grad-a:#FF6B5E; --fab-grad-b:#E4423F; --fab-grad-c:#7A2622; --fab-shadow-a:#4A1512; --fab-shadow-b:rgba(228,66,63,.5); --fab-ink:#180404; --btn-primary-grad-a:#1A0808; --btn-primary-grad-b:#100404; --lcd-glow:rgba(255,68,56,.4); --marker-border:#000000; --waterway-line:#5A1F1C; } *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);} body{color:var(--ink); font-family:'Manrope',sans-serif; -webkit-tap-highlight-color:transparent;} button, select, input{font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;} #app{position:fixed; inset:0;} #map{position:absolute; inset:0; z-index:1; background:var(--bg-2);} #listView{ position:absolute; inset:0; z-index:15; background:var(--bg); display:none; flex-direction:column; } #listView.active{display:flex;} .list-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:max(14px, env(safe-area-inset-top)) 16px 12px; border-bottom:1px solid var(--hairline); flex-shrink:0; } .list-title{font-weight:800; font-size:19px;} .list-subtitle{font-size:12px; color:var(--muted); margin-top:2px;} .list-body{flex:1; overflow-y:auto; padding:10px 16px max(80px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;} .list-section{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--hairline);} .list-section:first-child{margin-top:4px;} .list-row{ display:flex; gap:12px; align-items:flex-start; background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; } .list-row:active{border-color:var(--accent-dim);} .list-row-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;} .speed-badge{font-family:'Space Mono',monospace; font-size:10.5px; padding:3px 8px; border-radius:6px; background:var(--status-info-tint); color:var(--status-info); border:1px solid var(--status-info-dim);} .leaflet-popup-content-wrapper{background:var(--panel); color:var(--ink); border-radius:10px;} .leaflet-popup-tip{background:var(--panel);} .popup-ch{font-family:'Space Mono',monospace; color:var(--status-ok); font-weight:700;} .popup-ch.unverified{color:var(--status-warn);} .popup-speed{color:var(--status-info);} .popup-btn{font-family:'Space Mono',monospace; font-size:11px; border:1px solid var(--accent-dim); color:var(--accent); background:var(--accent-tint); border-radius:6px; padding:5px 9px; cursor:pointer; margin-top:6px; margin-right:6px;} .popup-btn.amber{border-color:var(--status-warn-dim); color:var(--status-warn); background:var(--status-warn-tint);} /* ---------- Top bar ---------- */ .topbar{ position:absolute; top:0; left:0; right:0; z-index:20; padding:max(14px, env(safe-area-inset-top)) 14px 0; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none; } .brand{ pointer-events:auto; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.88); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); border-radius:12px; padding:7px 12px 7px 7px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; } :root[data-theme="night"] .brand{ background:rgba(10,10,10,.88); } .brand img{width:22px; height:22px; border-radius:6px; display:block; flex-shrink:0;} .top-right{display:flex; gap:8px; align-items:flex-start;} .pill-btn{ pointer-events:auto; cursor:pointer; text-align:left; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); border-radius:12px; padding:9px 13px; max-width:56vw; } :root[data-theme="night"] .pill-btn{ background:rgba(10,10,10,.92); } .pill-btn .pill-ch{font-family:'Space Mono',monospace; font-size:15px; font-weight:700; color:var(--status-ok); line-height:1.1;} .pill-btn.amber .pill-ch{color:var(--status-warn);} .pill-btn .pill-sub{font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .icon-btn{ pointer-events:auto; width:40px; height:40px; border-radius:12px; flex-shrink:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--ink); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; } :root[data-theme="night"] .icon-btn{ background:rgba(10,10,10,.92); } /* ---------- Bottom controls ---------- */ .locate-fab{ position:absolute; z-index:20; right:16px; bottom:calc(108px + env(safe-area-inset-bottom)); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--accent); font-size:19px; display:flex; align-items:center; justify-content:center; cursor:pointer; } :root[data-theme="night"] .locate-fab{ background:rgba(10,10,10,.92); } .fab-zone{ position:absolute; z-index:20; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding-bottom:max(22px, env(safe-area-inset-bottom)); pointer-events:none; } .quick-actions{ display:flex; gap:14px; opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .quick-actions.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;} .qa-btn{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; } .qa-circle{ width:52px; height:52px; border-radius:50%; background:var(--panel); border:1px solid var(--panel-edge); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ink); box-shadow:0 10px 24px -10px rgba(0,0,0,.35); } .qa-label{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;} .fab-main{ pointer-events:auto; width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; background:radial-gradient(circle at 35% 30%, var(--fab-grad-a), var(--fab-grad-b) 60%, var(--fab-grad-c)); box-shadow:0 4px 0 var(--fab-shadow-a), 0 14px 30px -8px var(--fab-shadow-b); color:var(--fab-ink); font-size:30px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; } .fab-main.open{transform:rotate(45deg);} .fab-main:active{transform:scale(.94);} /* ---------- Sheets ---------- */ .sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:30; opacity:0; pointer-events:none; transition:opacity .2s ease; } :root[data-theme="night"] .sheet-backdrop{ background:rgba(0,0,0,.7); } .sheet-backdrop.open{opacity:1; pointer-events:auto;} .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:31; max-height:86vh; background:linear-gradient(180deg, var(--bg-2), var(--bg)); border:1px solid var(--panel-edge); border-bottom:none; border-radius:20px 20px 0 0; transform:translateY(105%); transition:transform .25s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; overflow:hidden; } .sheet.open{transform:translateY(0);} .sheet-handle{width:38px; height:4px; border-radius:2px; background:var(--panel-edge); margin:10px auto 2px; flex-shrink:0;} .sheet-header{display:flex; justify-content:space-between; align-items:center; padding:8px 18px 12px; flex-shrink:0; border-bottom:1px solid var(--hairline);} .sheet-title{font-weight:800; font-size:17px;} .sheet-close{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:4px 8px;} .sheet-body{overflow-y:auto; padding:14px 18px max(24px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;} /* ---------- Menu list ---------- */ .menu-row{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--hairline); cursor:pointer; } .menu-row:last-child{border-bottom:none;} .menu-row .mi{width:34px; height:34px; border-radius:10px; background:var(--panel); border:1px solid var(--panel-edge); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;} .menu-row .mt{font-weight:700; font-size:14.5px;} .menu-row .ms{font-size:12px; color:var(--muted); margin-top:1px;} /* ---------- Shared form/list bits ---------- */ .controls{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;} .btn{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); padding:11px 18px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; } .btn.primary{background:linear-gradient(180deg,var(--btn-primary-grad-a),var(--btn-primary-grad-b)); border-color:var(--accent-dim); color:var(--accent);} select, input[type=text], input[type=number]{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); padding:11px 14px; border-radius:10px; width:100%; } textarea{background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); padding:11px 14px; border-radius:10px; width:100%; font-family:'Manrope',sans-serif; resize:vertical; min-height:60px;} .field-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;} .field-row > *{flex:1; min-width:120px;} .status-line{font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); min-height:16px; margin:4px 0 10px;} .status-line.err{color:var(--status-warn);} .group-title{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin:20px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--hairline);} .group-title:first-child{margin-top:0;} .card{background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px; padding:13px 15px; margin-bottom:8px; display:flex; gap:13px; align-items:flex-start;} .ch-badge{font-family:'Space Mono',monospace; font-weight:700; font-size:17px; color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-dim); border-radius:8px; padding:5px 9px; min-width:48px; text-align:center; flex-shrink:0;} .card-body{flex:1; min-width:0;} .card-title{font-weight:700; font-size:14px; margin-bottom:2px;} .card-freq{font-family:'Space Mono',monospace; font-size:11px; color:var(--muted-2); margin-bottom:5px;} .card-note{font-size:12.5px; color:var(--muted); line-height:1.5;} .badge{font-family:'Space Mono',monospace; font-size:10px; padding:2px 6px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em;} .badge.ok{background:var(--status-ok-tint); color:var(--status-ok); border:1px solid var(--status-ok-dim);} .badge.check{background:var(--status-warn-tint); color:var(--status-warn); border:1px solid var(--status-warn-dim);} /* ---------- LCD (compact, inside Regional sheet) ---------- */ .radio{background:linear-gradient(160deg, var(--panel), var(--bg-2)); border:1px solid var(--panel-edge); border-radius:16px; padding:16px; margin-bottom:16px;} .lcd{background:linear-gradient(160deg, var(--lcd-bg-2), var(--lcd-bg)); border-radius:10px; padding:16px 16px 14px; border:1px solid var(--lcd-border);} .lcd-row{display:flex; justify-content:space-between; font-family:'Space Mono',monospace; color:var(--accent-dim); font-size:10.5px; letter-spacing:.06em; margin-bottom:4px;} .lcd-row .live{color:var(--accent);} .lcd-main{display:flex; align-items:flex-end; gap:14px; margin:6px 0 4px;} .lcd-ch{font-family:'Space Mono',monospace; font-size:46px; font-weight:700; color:var(--accent); line-height:.9; text-shadow:0 0 14px var(--lcd-glow);} .lcd-freq{font-family:'Space Mono',monospace; font-size:13px; color:var(--accent-dim); padding-bottom:10px;} .lcd-purpose{font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.1em; color:var(--status-warn); text-transform:uppercase;} .segmented{display:flex; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:4px; margin-bottom:16px; gap:4px;} .segmented button{flex:1; background:transparent; border:none; color:var(--muted); padding:9px 10px; border-radius:7px; cursor:pointer; font-size:12.5px;} .segmented button.active{background:linear-gradient(180deg,var(--btn-primary-grad-a),var(--btn-primary-grad-b)); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-dim);} .report-item{border:1px solid var(--panel-edge); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--bg-2);} .report-item-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap;} .report-item-name{font-weight:700; color:var(--ink); font-size:13px;} .report-item-ch{font-family:'Space Mono',monospace; color:var(--status-info);} .report-item-meta{font-size:11px; color:var(--muted-2); margin-top:3px;} .report-item-note{font-size:12px; color:var(--muted); margin-top:4px;} .legend{display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:16px;} .legend span.row{display:flex; align-items:center; gap:9px;} .dotmark{width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;} .sqmark{width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0;} .about-p{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 12px;} .about-p strong{color:var(--ink);} /* ---------- Theme toggle ---------- */ .theme-toggle{font-size:18px;}