/* ============================================================================ IRONJETTY SHELL — one palette, one header, every page. Two skins on : "night" (Jetty Night, default) and "day" (Day Deck). Every page links this file FIRST; page styles consume the legacy aliases (--ink, --lime, --graphite …) or the --ij-* primitives. The header/rail/footer below use ONLY --ij-* names, so a page may redefine a legacy alias (the map pages use --ink as their ground) without touching the chrome. ========================================================================== */ :root{ /* --- primitives: JETTY NIGHT --- */ --ij-abyss:#04090D; --ij-graphite:#0C1114; --ij-steel:#12181B; --ij-navy:#0A1B26; --ij-fg:#F2F8F8; --ij-body:#E8F1F2; --ij-sub:#C8D6DA; --ij-muted:#9FB4BA; --ij-faint:#6B7F86; --ij-dead:#4A5A5F; --ij-lime:#C9F24B; --ij-lime-hover:#DDFB7E; --ij-cyan:#4FB3C4; --ij-amber:#E8A33D; --ij-red:#E5484D; --ij-dawn:#F4C36A; --ij-green:#55D171; --ij-ground:var(--ij-graphite); --ij-deep:var(--ij-abyss); --ij-panel:var(--ij-steel); --ij-panel2:rgba(255,255,255,.03); --ij-glass:rgba(12,17,20,.92); --ij-rule:rgba(255,255,255,.18); --ij-border:rgba(255,255,255,.12); --ij-hairline:rgba(255,255,255,.10); --ij-track:rgba(255,255,255,.10); --ij-rw:1px; --ij-r:12px; --ij-r2:10px; --ij-accent:var(--ij-lime); --ij-accentink:var(--ij-abyss); --ij-link:var(--ij-lime); --ij-link-hover:var(--ij-lime-hover); --ij-eyebrow:var(--ij-cyan); --ij-warn:var(--ij-amber); --ij-navbg:rgba(4,9,13,.94); --ij-navfg:#C8D6DA; --ij-navrule:rgba(255,255,255,.12); --ij-plate:transparent; --ij-stripbg:var(--ij-abyss); --ij-stripfg:#F2F8F8; --ij-striprule:rgba(255,255,255,.14); --ij-wash:rgba(4,9,13,.55); --ij-wash-strong:rgba(4,9,13,.75); --ij-wash-soft:rgba(4,9,13,.2); --ij-shell-h:100px; /* header + rail, for sticky offsets */ --ij-font:'Archivo',system-ui,sans-serif; --ij-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --ij-display:'Barlow Condensed',sans-serif; /* tide / chart instrument */ --ij-grid:rgba(255,255,255,.06); --ij-gridmid:rgba(255,255,255,.16); --ij-night:rgba(2,8,14,.45); --ij-fished:rgba(4,9,13,.38); --ij-curve:#4FB3C4; --ij-curvefill:rgba(79,179,196,.13); --ij-axis:#5A6E70; --ij-axismid:#9FB4BA; --ij-hilo:#B9CDD2; --ij-halo:#12181B; --ij-bestfill:rgba(201,242,75,.09); --ij-beststroke:rgba(201,242,75,.4); --ij-sun:#F4C36A; /* --- legacy aliases (content pages) --- */ --abyss:var(--ij-abyss); --graphite:var(--ij-graphite); --steel:var(--ij-steel); --navy-top:#07141D; --navy-mid:var(--ij-navy); --navy-bot:#0B222E; --bg-top:#07141D; --ink:var(--ij-fg); --body:var(--ij-body); --sub:var(--ij-sub); --muted:var(--ij-muted); --meta:var(--ij-muted); --faint:var(--ij-faint); --dead:var(--ij-dead); --lime:var(--ij-link); --lime-hover:var(--ij-link-hover); --cyan:var(--ij-cyan); --amber:var(--ij-amber); --red:var(--ij-red); --dawn:var(--ij-dawn); --border:var(--ij-border); --hairline:var(--ij-hairline); --rule:var(--ij-rule); --track:var(--ij-track); --fill:var(--ij-accent); --ground:var(--ij-ground); --panel:var(--ij-panel); --panel2:var(--ij-panel2); --rw:var(--ij-rw); --r:var(--ij-r); --r2:var(--ij-r2); --accent:var(--ij-accent); --accentink:var(--ij-accentink); --eyebrow:var(--ij-eyebrow); --warn:var(--ij-warn); --plate:var(--ij-plate); --navbg:var(--ij-navbg); --navlink:var(--ij-navfg); --stripbg:var(--ij-stripbg); --stripfg:var(--ij-stripfg); --striprule:var(--ij-striprule); --wash:var(--ij-wash); --wash-strong:var(--ij-wash-strong); --wash-soft:var(--ij-wash-soft); --grid:var(--ij-grid); --gridmid:var(--ij-gridmid); --night:var(--ij-night); --fished:var(--ij-fished); --curve:var(--ij-curve); --curvefill:var(--ij-curvefill); --axis:var(--ij-axis); --axismid:var(--ij-axismid); --hilo:var(--ij-hilo); --halo:var(--ij-halo); --bestfill:var(--ij-bestfill); --beststroke:var(--ij-beststroke); /* --- legacy aliases (instrument pages: chart / fish id / logbook) --- */ --paper:var(--ij-fg); --line:var(--ij-hairline); --mut:var(--ij-muted); --dim:var(--ij-faint); --teal:var(--ij-cyan); --hot:var(--ij-green); --good:#4E9C99; --fair:#E8C33D; --slow:#E8833D; } html[data-skin="day"]{ --ij-abyss:#101314; --ij-graphite:#F4F4F1; --ij-steel:#FFFFFE; --ij-navy:#101314; --ij-fg:#101314; --ij-body:#101314; --ij-sub:#2A3336; --ij-muted:#2A3336; --ij-faint:#3E4C51; --ij-dead:#3E4C51; --ij-cyan:#2E5A63; --ij-amber:#7A4A12; --ij-red:#B3261E; --ij-dawn:#7A4A12; --ij-green:#1F6B35; --ij-ground:#F4F4F1; --ij-deep:#E9EAE5; --ij-panel:#FFFFFE; --ij-panel2:#FFFFFE; --ij-glass:rgba(255,255,254,.95); --ij-rule:#101314; --ij-border:#101314; --ij-hairline:#101314; --ij-track:#E2E5DE; --ij-rw:2px; --ij-r:0; --ij-r2:0; --ij-accent:#D8F24B; --ij-accentink:#101314; --ij-link:#101314; --ij-link-hover:#2E5A63; --ij-eyebrow:#2E5A63; --ij-warn:#7A4A12; --ij-navbg:#FFFFFE; --ij-navfg:#101314; --ij-navrule:#101314; --ij-plate:#101314; --ij-stripbg:#101314; --ij-stripfg:#FFFFFE; --ij-striprule:rgba(255,255,255,.25); --ij-wash:rgba(16,19,20,.05); --ij-wash-strong:rgba(16,19,20,.08); --ij-wash-soft:rgba(16,19,20,.03); --ij-grid:rgba(16,19,20,.14); --ij-gridmid:rgba(16,19,20,.3); --ij-night:rgba(16,19,20,.07); --ij-fished:rgba(16,19,20,.05); --ij-curve:#101314; --ij-curvefill:rgba(16,19,20,.10); --ij-axis:#3E4C51; --ij-axismid:#101314; --ij-hilo:#101314; --ij-halo:#FFFFFE; --ij-bestfill:rgba(216,242,75,.55); --ij-beststroke:#101314; --ij-sun:#101314; --navy-top:#F4F4F1; --navy-bot:#F4F4F1; --bg-top:#F4F4F1; --good:#2E5A63; --fair:#7A4A12; --slow:#7A4A12; } html{color-scheme:dark;overflow-x:hidden} html[data-skin="day"]{color-scheme:light} /* ============================================================================ THE BRIDGE — global header (row 1) + tool rail (row 2) ========================================================================== */ #ijShell{position:sticky;top:0;z-index:1200;background:var(--ij-navbg);border-bottom:var(--ij-rw) solid var(--ij-navrule); -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px); font-family:var(--ij-font);color:var(--ij-fg);-webkit-font-smoothing:antialiased;line-height:1.3} #ijShell *,#ijShell *::before,#ijShell *::after{box-sizing:border-box} #ijShell nav{all:unset;display:block} #ijShell a{text-decoration:none;color:inherit} #ijShell button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation} /* row 1 */ .ij-bar{display:flex;align-items:center;gap:12px;padding:0 18px;height:58px;max-width:1600px;margin:0 auto} .ij-plate{display:flex;align-items:center;padding:6px 10px;background:var(--ij-plate);border-radius:var(--ij-r2);flex:0 0 auto} .ij-plate img{display:block;width:150px;height:34px;object-fit:contain} html:not([data-skin="day"]) .ij-plate img{filter:drop-shadow(0 4px 12px rgba(4,9,13,.6))} .ij-reg{position:relative;flex:0 0 auto} .ij-regbtn{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border:var(--ij-rw) solid var(--ij-rule);background:var(--ij-panel);border-radius:var(--ij-r2)} .ij-regbtn:hover,.ij-regbtn[aria-expanded="true"]{border-color:var(--ij-accent)} .ij-regbtn .k{font-family:var(--ij-mono);font-size:9.5px;letter-spacing:1.6px;color:var(--ij-muted)} .ij-regbtn .v{font-family:var(--ij-display);font-weight:800;font-size:18px;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;color:var(--ij-fg)} .ij-regbtn .c{font-size:10px;color:var(--ij-muted)} .ij-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--ij-panel);border:var(--ij-rw) solid var(--ij-rule);border-radius:var(--ij-r2); padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);display:none;z-index:1300} .ij-menu[data-open="1"]{display:block} .ij-menu .h{font-family:var(--ij-mono);font-size:9.5px;letter-spacing:1.6px;color:var(--ij-muted);padding:8px 10px 4px} .ij-menu a,.ij-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:9px 10px;border-radius:calc(var(--ij-r2) - 2px); font-size:14px;font-weight:600;color:var(--ij-fg)} .ij-menu a:hover,.ij-menu button:hover{background:var(--ij-track)} .ij-menu [aria-current="true"]{background:var(--ij-accent);color:var(--ij-accentink)} .ij-menu [aria-current="true"]:hover{background:var(--ij-accent)} .ij-menu .s{font-family:var(--ij-mono);font-size:10px;letter-spacing:1px;color:inherit;opacity:.7} .ij-menu hr{border:0;border-top:1px solid var(--ij-hairline);margin:6px 4px} .ij-search{display:flex;align-items:center;height:40px;border:var(--ij-rw) solid var(--ij-rule);background:var(--ij-panel);border-radius:var(--ij-r2);overflow:hidden; flex:1 1 200px;min-width:0;max-width:340px;color:var(--ij-sub)} .ij-search .s{padding:0 12px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1} .ij-search .go{width:38px;flex:0 0 38px;align-self:stretch;display:grid;place-items:center;background:var(--ij-accent);color:var(--ij-accentink);font-size:14px} .ij-search:hover{border-color:var(--ij-accent)} .ij-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;min-width:0} .ij-drop{position:relative} .ij-dropbtn{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;font-size:13px;font-weight:700;color:var(--ij-navfg);border-radius:var(--ij-r2);white-space:nowrap} .ij-dropbtn:hover,.ij-dropbtn[aria-expanded="true"]{color:var(--ij-fg);background:var(--ij-track)} .ij-dropbtn .c{font-size:10px;opacity:.7} .ij-drop .ij-menu{left:auto;right:0} a.ij-plain{display:flex;align-items:center;height:40px;padding:0 10px;font-size:13px;font-weight:700;color:var(--ij-navfg);border-radius:var(--ij-r2);white-space:nowrap} a.ij-plain:hover{color:var(--ij-fg);background:var(--ij-track)} .ij-skin{display:flex;height:34px;border:var(--ij-rw) solid var(--ij-rule);border-radius:var(--ij-r2);overflow:hidden;font-family:var(--ij-mono);font-size:10px;letter-spacing:1.2px;flex:0 0 auto} .ij-skin span{display:flex;align-items:center;padding:0 10px;color:var(--ij-fg)} .ij-skin i{font-style:normal} .ij-skin span.on{background:var(--ij-fg);color:var(--ij-ground);font-weight:600} a.ij-cta{display:flex;align-items:center;height:40px;padding:0 18px;font-family:var(--ij-mono);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase; background:var(--ij-accent);color:var(--ij-accentink)!important;border-radius:3px;white-space:nowrap;flex:0 0 auto} a.ij-cta:hover{background:var(--ij-link-hover);color:var(--ij-accentink)!important} html[data-skin="day"] a.ij-cta{background:#101314;color:#FFFFFE!important;border-radius:0} html[data-skin="day"] a.ij-cta:hover{background:#2E5A63} .ij-burger{display:none;width:40px;height:40px;place-items:center;border:var(--ij-rw) solid var(--ij-rule);border-radius:var(--ij-r2);font-size:18px;flex:0 0 auto} /* row 2 — the tool rail: every core instrument, one tap from the top of any page */ .ij-rail{position:relative;border-top:1px solid var(--ij-hairline)} .ij-rail .in{display:flex;align-items:stretch;gap:2px;padding:0 12px;max-width:1600px;margin:0 auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .ij-rail .in::-webkit-scrollbar{display:none} .ij-rail a{position:relative;display:flex;align-items:center;gap:7px;height:42px;padding:0 12px;font-family:var(--ij-mono);font-size:11px;font-weight:600;letter-spacing:1.4px; text-transform:uppercase;color:var(--ij-navfg);white-space:nowrap;flex:0 0 auto;transition:color .15s} .ij-rail a:hover{color:var(--ij-fg)} .ij-rail a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--ij-accent);transform:scaleX(0);transition:transform .18s;transform-origin:left} .ij-rail a[aria-current="page"]{color:var(--ij-fg)} .ij-rail a[aria-current="page"]::after{transform:scaleX(1)} html[data-skin="day"] .ij-rail a::after{background:#101314} .ij-rail a .n{font-family:var(--ij-mono);font-size:9.5px;letter-spacing:0;background:var(--ij-track);border-radius:999px;padding:2px 6px;min-width:20px;text-align:center} .ij-rail .slot{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:12px;font-family:var(--ij-mono);font-size:10.5px;letter-spacing:.5px;color:var(--ij-muted);white-space:nowrap;flex:0 0 auto} .ij-rail .slot b{color:var(--ij-fg)} .ij-rail .slot:empty{display:none} .ij-rail .fade{position:absolute;top:0;bottom:0;width:36px;pointer-events:none;display:none} .ij-rail .fade.l{left:0;background:linear-gradient(90deg,var(--ij-navbg),transparent)} .ij-rail .fade.r{right:0;background:linear-gradient(270deg,var(--ij-navbg),transparent)} /* mobile drawer (row 1 overflow) */ .ij-drawer{display:none;position:fixed;inset:var(--ij-shell-h) 0 0 0;z-index:1190;background:var(--ij-ground);overflow:auto;padding:14px 18px 40px;font-family:var(--ij-font)} .ij-drawer[data-open="1"]{display:block} .ij-drawer .h{font-family:var(--ij-mono);font-size:10px;letter-spacing:1.6px;color:var(--ij-muted);margin:16px 0 6px} .ij-drawer a{display:block;padding:12px 0;border-bottom:1px solid var(--ij-hairline);font-size:17px;font-weight:600;color:var(--ij-fg)} .ij-drawer a[aria-current]{color:var(--ij-accent)} html[data-skin="day"] .ij-drawer a[aria-current]{color:#2E5A63} @media (max-width:980px){ .ij-bar{gap:8px;padding:0 12px} .ij-search{max-width:none} .ij-drop,a.ij-plain{display:none} .ij-burger{display:grid} } @media (max-width:420px){ .ij-bar{gap:6px;padding:0 8px} .ij-plate{padding:4px 4px} .ij-plate img{width:84px!important;height:22px!important} .ij-regbtn{padding:0 8px!important;gap:5px!important} .ij-regbtn .v{max-width:28vw!important;font-size:14px!important} .ij-search{display:none} .ij-skin{height:32px} .ij-skin span{padding:0 8px} a.ij-cta{padding:0 10px!important;height:32px!important} .ij-burger{width:32px;height:32px} .ij-right{gap:6px} } @media (max-width:640px){ :root{--ij-shell-h:96px} .ij-bar{height:54px} .ij-plate img{width:120px;height:28px} .ij-regbtn{padding:0 9px;height:36px;gap:6px} .ij-regbtn .k{display:none} .ij-regbtn .v{font-size:15px;max-width:34vw;overflow:hidden;text-overflow:ellipsis} .ij-search{flex:0 0 36px;height:36px;max-width:36px;border:0;background:none} .ij-search .s{display:none} .ij-search .go{width:36px;flex-basis:36px;border-radius:var(--ij-r2)} .ij-skin{height:36px} .ij-skin span{padding:0 9px} .ij-skin span:not(.on){display:none} .ij-skin i{display:none} a.ij-cta{padding:0 12px;height:36px;font-size:11px} a.ij-cta .long{display:none} .ij-burger{width:36px;height:36px} .ij-rail a{height:40px;padding:0 10px} .ij-rail .slot{display:none} } /* pages that stacked their own chrome under the old nav */ .ijview{display:none!important} @media print{#ijShell,.ij-drawer{display:none!important}}