/* ============================================================ Nautech. Quiet, generous, one accent: the brand blue. :root is the light palette; both dark states override tokens. ============================================================ */ /* Palette: the Nautech app's slate + azure system (Frontend.Common/Design/Palette.cs), tuned for a marketing page. :root is light; both dark states override tokens. */ :root{ color-scheme: light dark; --ground:#E9F1FB; --panel:#FFFFFF; --panel-2:#DCE8F7; --line:#C9DCF0; --line-soft:#DDE9F7; --ink:#0F172A; --ink-2:#31455F; --muted:#5C7390; --accent:#0073FF; --accent-hover:#0066E0; --accent-soft:rgba(0,115,255,.09); --on-accent:#FFFFFF; --ok:#21834F; --warn:#D97706; --crit:#DC2626; --gold:#FFCF00; /* charts and maps */ --sea-1:#D6E5F6; --sea-2:#C0D7EE; --sea-3:#A8C7E5; --land:#C9BC93; --grid:rgba(15,23,42,.06); --plate:radial-gradient(120% 110% at 50% 0%, #FFFFFF 0%, #DAE6F5 100%); --r-lg:22px; --r-md:16px; --r-sm:14px; --shadow:0 1px 2px rgba(20,45,85,.05), 0 14px 36px -18px rgba(20,45,85,.28); --shadow-soft:0 2px 10px rgba(20,45,85,.08); --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --app-sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --wrap:1140px; --pad:clamp(1.25rem,5vw,2rem); --eyebrow-size:clamp(1.06rem,1.4vw,1.22rem); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#0F172A; --panel:#1E293B; --panel-2:#172033; --line:#2A3648; --line-soft:#1C2739; --ink:#F1F5F9; --ink-2:#CBD5E1; --muted:#8696AE; --accent:#4D9EFF; --accent-hover:#6FB1FF; --accent-soft:rgba(77,158,255,.14); --on-accent:#FFFFFF; --ok:#47B777; --warn:#F0B429; --crit:#F45A51; --gold:#F97316; --sea-1:#0B1426; --sea-2:#111C31; --sea-3:#17253D; --land:#4F5B70; --grid:rgba(241,245,249,.06); --plate:radial-gradient(120% 110% at 50% 0%, #26334B 0%, #131C2E 100%); --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -24px rgba(0,0,0,.9); --shadow-soft:0 2px 8px rgba(0,0,0,.35); } } :root[data-theme="dark"]{ --ground:#0F172A; --panel:#1E293B; --panel-2:#172033; --line:#2A3648; --line-soft:#1C2739; --ink:#F1F5F9; --ink-2:#CBD5E1; --muted:#8696AE; --accent:#4D9EFF; --accent-hover:#6FB1FF; --accent-soft:rgba(77,158,255,.14); --on-accent:#FFFFFF; --ok:#47B777; --warn:#F0B429; --crit:#F45A51; --gold:#F97316; --sea-1:#0B1426; --sea-2:#111C31; --sea-3:#17253D; --land:#4F5B70; --grid:rgba(241,245,249,.06); --plate:radial-gradient(120% 110% at 50% 0%, #26334B 0%, #131C2E 100%); --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -24px rgba(0,0,0,.9); --shadow-soft:0 2px 8px rgba(0,0,0,.35); } *{box-sizing:border-box} /* The header floats over the page, so anchors stop below it. */ html{scroll-padding-top:5.5rem} body{ /* clip, not hidden: it stops a stray sideways drag without turning the body into a scroll container, which would break the sticky header. */ overflow-x:clip; margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{font-family:var(--sans);margin:0;text-wrap:balance} h1{font-size:clamp(2.5rem,5.8vw,4.4rem);font-weight:700;line-height:1.05;letter-spacing:-.035em} h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-.03em} h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600;line-height:1.25;letter-spacing:-.02em} h4{font-size:1.06rem;font-weight:600;letter-spacing:-.015em;line-height:1.35} h5{font-size:.82rem;font-weight:600;letter-spacing:-.005em} p{margin:0} a{color:inherit} ul,ol{margin:0;padding:0;list-style:none} img{display:block} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)} .band{padding-block:clamp(2.4rem,4.4vw,3.6rem)} .band--line{border-top:1px solid var(--line-soft)} .lede{font-size:clamp(1.06rem,1.35vw,1.24rem);color:var(--ink-2);max-width:62ch;line-height:1.5} .small{font-size:.9rem;color:var(--muted)} .center{text-align:center;margin-inline:auto} .center .lede{margin-inline:auto} .num{font-variant-numeric:tabular-nums} .coord{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.94em} .cta-short{display:none} .eyebrow{color:var(--accent);font-weight:600;font-size:var(--eyebrow-size);line-height:1.35;letter-spacing:-.01em;margin-bottom:.6rem} /* --- header ---------------------------------------------------- */ header.top{ position:sticky;top:0;z-index:40; background:color-mix(in srgb, var(--ground) 78%, transparent); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line-soft); } .topbar{display:flex;align-items:center;gap:1.1rem;height:56px} .brand{display:flex;align-items:center;flex:none;text-decoration:none} .logo{ /* Inline spans ignore width and height, and the footer mark is not a flex item like the one in the header, so blockify it here. */ display:block; width:118px;height:25px;flex:none;background-color:var(--ink); /* The wordmark rides along as a data URI so the mask also paints when the page is opened straight from disk, where Chrome blocks file:// mask images. */ -webkit-mask:url(data:image/webp;base64,UklGRsANAABXRUJQVlA4WAoAAAAYAAAAcgIAgwAAVlA4TN8MAAAvcsIgELcgFkzmL90Xw/zPP0G2Ld4JXoJJmmo7BjUAABzbBwCAt9t287a2bQ2EqMHQtCiFAvv//6+2QRJUlLWz3yL6PwH0p3IJK/2x5QJAlr81gte6/KUJeC/uD035gPUPDT5vf2cWRf474xXff2eCovyfyZz7c8MFOPhvDQsAyPKXxgneivtD88DH9IdGPtW/Mx7K5c/Mqgl/ZuJfnPR/ygn/77//99//+++/D/FA96vjxb9ldhfgfMyHVLzWszzDcjVuWUN6H1bvJvHP/AwzrTk/g5HlUSpG1iPMxWt85vL2eMZ1uSa3hGcuReQs5ZlWvgYXcoW6niWndZmFY6lor0fgq/DxELTW8lzZmit4FZ6m4FXYwhMGhWfheFS0l+fKl+LWp6BZjsDTfVV0riUu5lws6F/CBfhc0f18LqYy3p+zPPG+GHjCpPAM7lHQ/4x8ES4WdC/BzcQFQyWzJfeoGCuBp3KPisES2Azj8zpJ/QA/jGG02PMHRpdwAT5XDK2Zp2HB8BKsuEfFeAnzcIbFmtmIV5Q5PD7HYdEKnDFfYFHCZL7AYOZJCixKMPFVYVP8HO4Jsw9nIijqHFGRLoNNuSesSpjIFxh9TBFgVHgYF9h9zvBVYViCLfAUyZC3ImT5q8Kw8CRLgV3xE4gV4DHoX4VlYWuuwHhmU8sUm2IbRsXIasgdMP6YwT1g+2nOw7DwiCeMi7flBeaFLfkpdkUex2IikV0vMH+wuUVgXdhYsARZurkM+9HSF2as/wyFqyOWcTWS3S/MKGzsq8J+XW15U8C/Tu5E3ypnKUV64WHngUkf94Fo3fKR1UWdc46O7D4xpyymnpjzYcpVXZXXOgD/urgTHc9tZfq4rKn0wD8rGV1r2WLwryEdpRMeN+I6XUFXyTEs/OrXuJ9dUBc7rqBrPbYYVv+6xnRIDzws0fqh5rg4+sh+TcfZpS49MpprYmp269EGbyOjY4lMrT6WHngMibfMnWivJThqdX6XNtTFCp9orzkwNXMobXhYolUAHJ56cjjaULntgVYJ1JmDtFS28ESzJEd9OUgb4og02/EjuRPNJTrq7PcmVLbBgubiHXXmXVrwsERuDY66c5AWnK4loLEmRwOT6HC6cQ+0Fk8jgzTBX1f5kU60Fk8jeW+BsAV3orV4GsmpBQ9Lw4M04NnA0lCYxvKuw3PYFxproNGpSfgH2H6OJxproNG8N+B0Bg40np5Gc2nAv+sg3hvgdQf0G42POvhBCxo3R+NZGlB+gPRjPNB4ODIYRIfnuAcaE1lMDXW5DqJYdaIK0AeyuIhKxrDoaiCbqQHx17BCXyPZ5KLDv1EBevFkcxEVxF0IsagQNaILZJOrBmlIhlqYrMYGLL8EFp0sZDbpKo9h0RVHVllUKFdCLKrqPgWoA1ldqqa6AQFqYbK7VF35JWSohclwUqGMyVDvZJhFhXglxFWD9ElUiewGDVI/FpUwWV6qCvFXEKAWJtNBhTAiQL2TaRZV5SuhVVXduwBtJsubprpuGVphsr1UVXXD4hTywzhRVSbjSVXdAFHtZJyrBuVSaNNgfScaYVOuKhB7MbSVyXpQIQ1LF5Mu6QH1SuY3DVK/B7Qnmfcq+EtxoilvFmgD2Y6a0iurItlPqupuH4sqkX0nmup6sWiE7VFU5UuhoAG/bBoh61UB34ehzTRj0SB12W7VA1qhGb0GqVeANtCMm6ZcCxVNehFNMJc0qU/WCE/BVVNdj/1WiYqnoF1Te4km05TuVHxfTNQUImIohcw7zdmFoY00Z9Qg3rwA7UZzLhr4PgFanoNYPoWLcVUBRxQ00R4VBVyPoBGatWjKzSsa4UmoaEqfQ5NpVq7vhC+Gdk0gyhqeIGpCj6IJ03gN/PVUG/EiGNpEswZNdT0YWp6GWF6E6WqCZiM6FSdNyJqtA0NZ3TRUNOl6YCNdRFDxNE6D0CNoMs0cthwdXY7TFCIo8wxUFd8dgibTvF5z3rqiyTSvaHKPQ+On6j4biaISa9YpToV0ODR+IqoKuDtXNctEh6b2qAqhG3IowF6zTLEr4NpEITRz0oQb56EUmnjXgNsWKPMd2TXLqnFTJA03OSjzVF6z3bio2WY6VLEtaMIdSZoQFJWmDBrf5DXrVFQV5cZtGj8Riyq3bZrl5sSkkOnWpqjhuXZFvXFFUemzjykny88C/dlWFJXuSNQkTZkuNG0KobmjAu5i+CcRRfngBbO3nYrzloQrWUccijJZ0Cz3Dcrt3Yr5uQnK79+OH1EU22SLZr1tThPfsFzA2uI0+ReVBsTJWBOa0m1ijX8TcIGxhTXp9uwXJopwHfE3sLxJV5B+BfnC/HWk27Zo+M12BfE/Wv66lh+E2+IV+P+a8T+ZvwChAdt/BMJ15KZ432ibLzQ5Tf7FlZ8gaOLFxKtxGv+OUp2rBmrXfP/iDkX6EcLFhKshTfhAzqctDzzKwJyTd9RRFOcvKjftinzvwjWIIn263lNRf3FJIde13qei+L6uXQH+vQUF3GV5zTpD+El2Rb2uqFl/b4vGX0ZpWjR+sngVPua09okK8GWtmu3mhCtzmu2y+DrCRTzwKtxj1cTLcpryywkj6FTUnyDMEDXrNTDeV+7gNGWyJYSlF4kCbiq3rsuN2xTwV0WaOEPS+CY/R/6ArQOJAstMSwEA4U6bJs30VQEI37ZVUy6rKrYZDo27BvlUe2yaNBFXvBXu4zXnRA+8re7OrEOcBnxVp6LMcCpOamZNtLNAyR28prppnODj1sdVBfw0X/iY7owfQkWTr2pXVGePofxuc5pkZ9X4Dq4qkKZ54HPtQ0VTZmF8/r5tUQM/EQ+JCnh7QRPaqCqynaRZOtCuqTwJQ9vJa+AnKYpy21zVlIvymsPeqeEOp+K0c2hcD6/BMYlozk5UNeKmeEC53TbaNIjX5KqiOmseykIddwWcGVFU6npqsE7xgPbZK2nwnIGhjVeWLo5VdbkkKgoka6cm9IiaYGWBsvSJqsoTrFBzL1c18PZYVMt9o10DcZcUNdXZClBW7sGaYiVrtj6uanA6cyyqTN2TqrI1d0IrdONYhdNdkdMgm2LRZOpaFWAjovF9KKqQrbFAW7mfqxqIM5ahTneONhXyFVHRYDXkBFrus2myjS9oqfepQrbFAnWigUmF05nKUIu7S6mPqyoc7oK8qrKdDG2mvl4Db4FFk7t5HbIlFqiFRjpR4WRDGXqmW0erDsLXQ0UDYSsZau5EVSPOQIF27UabDiebWQR6P4S8DsJWXIE+0c2jTQfxVpj7fHfxKgibcAXqRL2TBnncA1qh/k50kMXIV4V+o8GHDjXaWAT6g26fEx3wdBaWAgj3yF2oqCBsgAVqoe6uavAY9YQ6DKCl6oCHBS5oFDfKiQ7IbOCrQi98/4hrAySM+8KrsBWuKtQ47KtCz/0oqXC4EVygFhoaWiBhlHtUNFam4b4FEkf5gkZh+gWQbwEkjHEZ74sVijog8xBf0JhooKsqiO/mHhV6P4ZSCyBhhHtUNK9kMLYAEtwAX9C80K+AQhMgD+7nT3x2Vqg0AJm7+YLWTEOjDsjchR8VjRuNTk2APLiTf1a0JzK5NQGSfR8XC9oD/RIotQE4n6vr4Qu0wYyTFqAEbuP1WdEsbgyVBqDEReWWkAXN4oZRagNwPlfWuSXmip6JjO5tACSv3OBjQc9AvwaKPV5ryc+kzWeFPpkhliYAcjxjCCHElFI+zoqewjSYawuAWo6ccy6nVHQVJoOpx2stR04ppZyLoHcis3uP11pyiiGE9MwnOgf6RdBa+wyPdoilg0VhGh46jK4LmUydLEYyvHcaXxf6VRDLDGyIWCYQJoPJWF3IqJcpqifTaQph+mUQF3uZLBGf5k4mk8lUXcgsnxOcTMbTBLujXwdRsiZsiygZ28hqMiRMlpO5RPYXMVYjDV4U37eKWGwFskZeDNWV7CYzuyPbfJoqC83Iu6mDabRT5PnibKyJBohSNZTos2YbRJTMZEeWWUzUSPaDmJFAswYxUzwZlMlWTfSKNAdVhTdBvJtJpCyKdRjxbqJ4sp5k3ME0ZRATEmjmICaKJ5PbpzQHa7yrn/wk6ZOQVd7FgnjSxk9CFnmXQXXzNCFvMqZ4mjbIsOJp9iCj6ubJqP+0zkHlkxClD4UmdfKushkiCmVUTY7054fVBBGFo18twdGsoXST5Ghqv9cBJTq6wnUfUHNwZFfeCU3qPyUi2t4UNwuxvMhCtl3Yz16So6dmlpe6kl237mdbLZt3NLVb97NJcmS6wHWXHjVHR5fp1v3sIDl6sr3IS+FZKMhLjfTqU4pMM/sYPc3ofNxKkfpSRUre4srU26ctODLufNyOcopIOXIKC13kssaUX7cYFkfXyWs6itSXKmdOgelynV/Tlt+mFFamGXlN0dPEbk0pOCICAEVYSUa6AAAARXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAAB4MgIA6AMAAHgyAgDoAwAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAHMCAAADoAQAAQAAAIQAAAAAAAAA) no-repeat left center/contain; mask:url(data:image/webp;base64,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) no-repeat left center/contain; } nav.main{display:flex;gap:.1rem;margin-left:auto} nav.main a{ font-size:.88rem;font-weight:500;text-decoration:none;color:var(--ink-2); padding:.45rem .7rem;border-radius:999px;white-space:nowrap;transition:color .15s ease,background .15s ease; } nav.main a:hover{color:var(--ink);background:var(--panel-2)} .topctl{display:flex;align-items:center;gap:.5rem;flex:none} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; font-family:inherit;font-size:.94rem;font-weight:600;letter-spacing:-.01em;text-decoration:none; padding:.62rem 1.15rem;border-radius:999px;border:0;cursor:pointer; transition:background .18s ease,color .18s ease,transform .18s ease; } .btn--fill{background:var(--accent);color:var(--on-accent)} .btn--fill:hover{background:var(--accent-hover)} .btn--soft{background:var(--panel-2);color:var(--ink)} .btn--soft:hover{background:var(--line-soft)} .btn--text{color:var(--accent);padding:.4rem .3rem} .btn--text:hover{text-decoration:underline} .btn--text::after{content:"\203A";font-weight:400;font-size:1.15em;line-height:1} .btn--lg{font-size:1.02rem;padding:.78rem 1.5rem} .burger{display:none;background:var(--panel-2);border:0;border-radius:999px;padding:.4rem .68rem;cursor:pointer;color:var(--ink);font-size:1rem} #mobilenav{display:none;border-top:1px solid var(--line-soft);background:var(--panel)} #mobilenav[data-open="true"]{display:block} #mobilenav ul{display:flex;flex-direction:column;padding-block:.4rem} #mobilenav a{display:block;padding:.72rem var(--pad);text-decoration:none;font-weight:500;color:var(--ink-2)} @media (max-width:1120px){ nav.main{display:none} /* With the nav gone nothing pushes the controls over, so the row itself takes the free space and the burger ends up on the right edge. */ .topctl{margin-left:auto} .burger{display:block;order:9} .topctl .btn--lg{display:none} } /* --- hero ------------------------------------------------------ */ .hero{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:clamp(1.8rem,4vw,3.6rem);align-items:center; padding-block:clamp(2.8rem,6vw,5rem); } .hero h1{margin-bottom:1.2rem} .hero .lede{max-width:44ch;margin-bottom:2rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} .plot{ position:relative;border-radius:var(--r-lg);overflow:hidden;margin:0; background:var(--sea-1);box-shadow:var(--shadow); } .plot canvas{display:block;width:100%;height:clamp(320px,40vw,450px)} .plot figcaption{ position:absolute;top:.85rem;left:.9rem;display:flex;gap:.5rem;align-items:center; font-size:.76rem;font-weight:500;color:var(--ink-2); background:color-mix(in srgb,var(--panel) 80%,transparent); backdrop-filter:blur(8px);border-radius:999px;padding:.25rem .7rem; } .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none} @media (prefers-reduced-motion:no-preference){.dot{animation:blip 2.6s ease-in-out infinite}} @keyframes blip{0%,100%{opacity:1}50%{opacity:.3}} @media (max-width:940px){.hero{grid-template-columns:1fr}} /* --- spec row (facts, not readouts) ---------------------------- */ .specs{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .specs-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .spec{padding:1.5rem 0 1.6rem;padding-left:clamp(0rem,2.4vw,2rem);border-left:1px solid var(--line-soft)} .spec:first-child{border-left:0;padding-left:0} .spec dt{font-size:.84rem;color:var(--muted);margin-bottom:.3rem} .spec dd{margin:0;font-size:clamp(1.05rem,1.5vw,1.32rem);font-weight:600;letter-spacing:-.022em} @media (max-width:760px){ .specs-in{grid-template-columns:1fr 1fr;gap:0 1rem} .spec:nth-child(3){border-left:0;padding-left:0} .spec{padding-block:1.1rem} } /* --- section heads --------------------------------------------- */ .head{max-width:64ch;margin-bottom:clamp(1.6rem,3vw,2.4rem)} .head h2{margin-bottom:.9rem} .head.center{max-width:56ch} /* --- architecture ---------------------------------------------- */ .diagram{overflow-x:auto;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow)} .diagram svg{display:block;min-width:900px;width:100%;height:auto} .d-box{fill:none;stroke:var(--line);stroke-width:1} .d-fill{fill:var(--panel-2);stroke:none} .d-title{fill:var(--ink);font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.02em} .d-lbl{fill:var(--ink-2);font-family:var(--sans);font-size:12.5px} .d-cap{fill:var(--muted);font-family:var(--sans);font-size:12px;font-weight:600} .d-wire{stroke:var(--accent);stroke-width:1.6;fill:none;opacity:.75} .d-wire--dash{stroke-dasharray:5 5} .d-chip{fill:var(--accent-soft);stroke:none} .d-chip-t{fill:var(--accent);font-family:var(--sans);font-size:11.5px;font-weight:600} .layer-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 2rem;margin-top:2rem} .layer-notes h4{margin-bottom:.35rem} .layer-notes p{color:var(--ink-2);font-size:.98rem} @media (max-width:900px){.layer-notes{grid-template-columns:1fr}} /* ================================================================ The real Nautech Web interface, rebuilt with the app's own tokens (generated_color-tokens.css + app.css aliases) and its own class names: .card / .source-name / .metric-row / .card-viz / .card-bar / .timestamp / .status-dot, with the .yellow .red .gray states. All of it is scoped to .appframe so none of it reaches the page. ================================================================ */ /* ---- the product shot: browser chrome, shadow, scroll-driven tilt */ /* The glow and the tilted frame reach past the column; clip sideways so they never widen the page. */ .appshot-stage{position:relative;perspective:1600px;perspective-origin:50% 20%;overflow-x:clip} .appshot-stage::before{ content:"";position:absolute;inset:8% -6% -10% -6%;z-index:-1;pointer-events:none; background:radial-gradient(60% 55% at 50% 60%,var(--accent-soft),transparent 70%); filter:blur(28px);opacity:.9; } .appshot{ --tilt:0; position:relative;border-radius:18px;overflow:hidden; background:var(--shot-chrome); box-shadow: 0 0 0 1px var(--shot-edge), 0 2px 6px rgba(15,23,42,.06), 0 48px 90px -36px rgba(15,23,42,.38); transform:rotateX(calc(var(--tilt) * 6deg)) translateY(calc(var(--tilt) * 18px)) scale(calc(1 - var(--tilt) * .025)); transform-origin:50% 50%; will-change:transform; --shot-chrome:#E9EEF4;--shot-edge:rgba(15,23,42,.08); } .appshot.is-flat{transform:none;will-change:auto} :root[data-theme="dark"] .appshot{ --shot-chrome:#0B1222;--shot-edge:rgba(255,255,255,.07); box-shadow:0 0 0 1px var(--shot-edge),0 2px 6px rgba(0,0,0,.4),0 48px 100px -36px rgba(0,0,0,.85); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .appshot{ --shot-chrome:#0B1222;--shot-edge:rgba(255,255,255,.07); box-shadow:0 0 0 1px var(--shot-edge),0 2px 6px rgba(0,0,0,.4),0 48px 100px -36px rgba(0,0,0,.85); } } .appchrome{ height:38px;display:grid;grid-template-columns:1fr minmax(200px,380px) 1fr;align-items:center; padding:0 14px;background:var(--shot-chrome);font-family:var(--app-sans); } .appchrome__dots{display:flex;gap:7px} .appchrome__dots i{width:11px;height:11px;border-radius:50%;background:#C9D1DC;opacity:.9} .appchrome__dots i:nth-child(1){background:#FF5F57} .appchrome__dots i:nth-child(2){background:#FEBC2E} .appchrome__dots i:nth-child(3){background:#28C840} .appchrome__url{ display:flex;align-items:center;justify-content:center;gap:6px;height:24px; border-radius:8px;background:rgba(255,255,255,.72);color:#475569;font-size:11.5px;letter-spacing:.01em; } .appchrome__url svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;flex:none} :root[data-theme="dark"] .appchrome__url{background:rgba(255,255,255,.08);color:#A7B4C6} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .appchrome__url{background:rgba(255,255,255,.08);color:#A7B4C6} } @media (max-width:900px){ .appshot{transform:none;border-radius:14px} .appshot-stage{perspective:none} .appchrome{height:32px;grid-template-columns:auto 1fr;gap:10px;padding:0 12px} .appchrome__url{height:21px;font-size:10.5px} } @media (prefers-reduced-motion:reduce){.appshot{transform:none;will-change:auto}} /* ---- tokens: light is the base, dark overrides -------------------- */ /* The frame shows the app at a laptop's own resolution, scaled down to fit the mockup, so the layout and the type sizes are the real ones instead of a squeezed narrow-window version. */ .appframe{ position:relative;overflow:hidden; --primary-clr:#0073FF; --primary-rgb:0,115,255; --background-clr:#F1F5F9; --list-bg:#FFFFFF; --side-bg:#F1F5F9; --text-clr:#0F172A; --muted-clr:#64748B; --extra-muted-clr:#CBD5E1; --subtle-divider-clr:rgba(15,23,42,.08); --border-thin:1px solid rgba(15,23,42,.08); --warning-clr:#D97706; --critical-clr:#DC2626; --info-clr:#1E40AF; --done-clr:#21834F; --stale-data-clr:#94A3B8; --fav-clr:#FFCF00; --on-notif:#FFFFFF; --list-border-radius:14px; --elev-rest:0 2px 8px rgba(0,0,0,.06); --elev-hover:0 4px 16px rgba(0,0,0,.10); --map-sea:#CFE0EE; --map-sea-deep:#BFD4E6; --map-shallow:#DDEAF4; --map-land:#F1EDE3; --map-land-edge:#D5CDB8; --map-contour:rgba(15,23,42,.22); --map-grid:rgba(15,23,42,.08); --map-label:#64748B; --map-control:#FFFFFF; --map-road:#FFFFFF; --map-road-edge:#E3DBC7; --map-urban:#E8E2D4; --map-pontoon:#CFC7B4; --track-clr:#0073FF; font-family:var(--app-sans); font-size:16px;letter-spacing:0;line-height:1.35; display:grid;grid-template-columns:236px minmax(0,1fr); background:var(--background-clr);color:var(--text-clr); position:relative;overflow:hidden; } .appframe[data-app-theme="dark"]{ --primary-clr:#4D9EFF; --primary-rgb:77,158,255; --background-clr:#0F172A; --list-bg:#1E293B; --side-bg:#1E293B; --text-clr:#F1F5F9; --muted-clr:#8696AE; --extra-muted-clr:#334155; --subtle-divider-clr:rgba(255,255,255,.08); --border-thin:1px solid rgba(255,255,255,.08); --warning-clr:#D97706; --critical-clr:#B91C1C; --info-clr:#1E3A8A; --done-clr:#47B777; --stale-data-clr:#94A3B8; --fav-clr:#F97316; --elev-rest:0 2px 8px rgba(0,0,0,.30); --elev-hover:0 4px 16px rgba(0,0,0,.40); --map-sea:#0F1A2E; --map-sea-deep:#0B1424; --map-shallow:#17243A; --map-land:#273756; --map-land-edge:#3E5170; --map-contour:rgba(241,245,249,.15); --map-grid:rgba(241,245,249,.07); --map-label:#8696AE; --map-control:#1E293B; --map-road:#3A4E70; --map-road-edge:#243350; --map-urban:#2E3F61; --map-pontoon:#46597A; } .appframe *,.appframe *::before,.appframe *::after{box-sizing:border-box} .appframe .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .appframe .ico,.appframe .glyph{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ---- sidebar, as MainLayout.razor.css draws it -------------------- */ .app-side{ background:var(--side-bg);border-right:var(--border-thin); display:flex;flex-direction:column;min-height:600px;padding:20px 0 12px 14px; } .app-side .side-brand{padding:0 8px 0 10px;margin-bottom:1.35rem} .app-side .side-brand .logo{display:block;background-color:var(--text-clr);width:108px;height:23px} .app-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding-right:8px;min-height:0} .app-nav a{ display:flex;align-items:center;gap:.55rem;padding:.5rem .75rem;border-radius:10px; font-size:.84rem;letter-spacing:1.2px;color:var(--text-clr);text-decoration:none; position:relative;overflow:hidden;white-space:nowrap; } .app-nav a::before{ content:"";position:absolute;top:0;bottom:0;left:-100%;width:100%; background:color-mix(in srgb,var(--primary-clr) 16%,transparent);transition:left .3s ease; } .app-nav a:hover::before,.app-nav a[aria-current="page"]::before{left:0} .app-nav a[aria-current="page"]{color:var(--primary-clr);font-weight:700} .app-nav a .ico{width:22px;height:22px;flex:none;position:relative} .app-nav a span{position:relative} .appframe[data-app-theme="dark"] .app-nav a::before{background:color-mix(in srgb,var(--primary-clr) 24%,transparent)} .app-nav a:nth-child(2){margin-bottom:.55rem} .nav-badge{ margin-left:auto;min-width:1.1rem;height:1.1rem;padding:0 .3rem;border-radius:999px; display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700; letter-spacing:0;color:#fff;background:var(--critical-clr);position:relative; } .app-side-foot{padding:1rem 8px 0 0;margin-top:auto;display:flex;flex-direction:column;gap:.8rem} .modetoggle{ position:relative;display:grid;grid-template-columns:1fr 1fr;padding:2px;border-radius:30px;cursor:pointer; background:rgba(var(--primary-rgb),.05);border:1px solid rgba(var(--primary-rgb),.15); box-shadow:inset 0 2px 4px rgba(0,0,0,.06); } .modetoggle::after{ content:"";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);border-radius:26px; background:linear-gradient(135deg,#fff 0%,#f0f8ff 100%); box-shadow:0 2px 6px rgba(var(--primary-rgb),.2);transition:transform .4s cubic-bezier(.25,.8,.25,1); } .appframe[data-mode="fleet"] .modetoggle::after{transform:translateX(100%)} .modetoggle button{ position:relative;z-index:1;background:none;border:0;cursor:pointer;font-family:inherit; font-size:.62rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:4px 0; color:rgba(0,0,0,.4);transition:color .3s ease; } .modetoggle button[aria-pressed="true"]{color:#000;font-weight:700} .appframe[data-app-theme="dark"] .modetoggle{background:rgba(var(--primary-rgb),.08);border-color:rgba(var(--primary-rgb),.25);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)} .appframe[data-app-theme="dark"] .modetoggle::after{background:linear-gradient(135deg,#1f3a5f 0%,#2a4e80 100%);box-shadow:0 2px 8px rgba(var(--primary-rgb),.35)} .appframe[data-app-theme="dark"] .modetoggle button{color:rgba(230,238,247,.5)} .appframe[data-app-theme="dark"] .modetoggle button[aria-pressed="true"]{color:#fff} .bottom-actions{display:flex;align-items:center;justify-content:center;gap:.4rem} .nightsw{ position:relative;display:inline-flex;padding:2px;border-radius:999px; background:rgba(var(--primary-rgb),.08);border:1px solid rgba(var(--primary-rgb),.18); } .nightsw button{ width:26px;height:22px;border-radius:999px;border:0;background:none;cursor:pointer; display:grid;place-items:center;color:var(--muted-clr);font-family:inherit;padding:0; } .nightsw button svg{width:13px;height:13px} .nightsw button[aria-pressed="true"]{background:var(--list-bg);color:var(--primary-clr);box-shadow:0 1px 3px rgba(0,0,0,.14)} .appframe[data-app-theme="dark"] .nightsw button[aria-pressed="true"]{background:color-mix(in srgb,var(--primary-clr) 24%,transparent)} .flinks{display:flex;align-items:center;gap:.15rem} .flinks a{ display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--text-clr); text-decoration:none;position:relative; } .flinks a:hover{background:color-mix(in srgb,var(--primary-clr) 16%,transparent);color:var(--primary-clr)} .flinks a svg{width:20px;height:20px} /* ---- content column: title row + vessel selector ------------------ */ .appframe__ui{ position:absolute;top:0;left:0;display:flex; width:var(--app-w,1440px);height:var(--app-h,900px); transform-origin:0 0;transform:scale(var(--app-scale,1)); } .app-main{display:flex;flex-direction:column;min-width:0;padding:16px 16px 18px;overflow:hidden;flex:1} .app-top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;min-height:44px} .app-top h3{font-family:inherit;font-size:1.18rem;font-weight:600;letter-spacing:0;line-height:1.2;margin:0} .top-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto} .iconbtn{ width:34px;height:34px;border-radius:999px;border:var(--border-thin);background:var(--list-bg); display:grid;place-items:center;color:var(--muted-clr);cursor:pointer;flex:none;box-shadow:var(--elev-rest); } .iconbtn:hover{color:var(--primary-clr);box-shadow:var(--elev-hover)} .iconbtn[aria-pressed="true"]{background:var(--primary-clr);border-color:transparent;color:#fff} .iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .iconbtn[hidden]{display:none} .vsel-wrap{position:relative} .vselector{ display:flex;align-items:center;gap:.6rem;min-width:196px;padding:5px 9px 5px 5px;margin:0; border:var(--border-thin);border-radius:var(--list-border-radius);background:var(--list-bg);color:var(--text-clr); font-family:inherit;cursor:pointer;text-align:left; box-shadow:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.06);transition:box-shadow .15s ease; } .vselector:hover{box-shadow:var(--elev-hover)} .vselector[aria-expanded="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0} .vselector .avatar{ width:38px;height:38px;border-radius:8px;flex:none;border:2px solid var(--done-clr); background: radial-gradient(60% 40% at 30% 30%,rgba(255,255,255,.55),transparent 70%), linear-gradient(160deg,#5FA8E8 0%,#1F5FA8 55%,#123C73 100%); } .vselector .avatar.off{border-color:var(--critical-clr)} .vselector > span{display:flex;flex-direction:column;min-width:0;flex:1} .vselector b{font-size:.84rem;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vselector em{font-style:normal;font-size:.68rem;color:var(--done-clr);font-weight:600} .vselector em.off{color:var(--critical-clr)} .vselector .chev{width:16px;height:16px;color:var(--muted-clr);flex:none} .vsel-pop{ position:absolute;top:100%;right:0;left:0;z-index:12;padding:5px; background:var(--list-bg);border:var(--border-thin);border-top:0; border-radius:0 0 var(--list-border-radius) var(--list-border-radius);box-shadow:0 4px 16px rgba(0,0,0,.10); } .appframe[data-app-theme="dark"] .vsel-pop{box-shadow:0 8px 24px rgba(0,0,0,.6)} .vsel-pop[hidden]{display:none} .vsel-pop input{ width:100%;font-family:inherit;font-size:.8rem;padding:.4rem .6rem;color:var(--text-clr); background:var(--background-clr);border:var(--border-thin);border-radius:8px;margin-bottom:.3rem; } .vsel-pop button{ display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:0; font-family:inherit;font-size:.82rem;color:var(--text-clr);padding:.45rem .5rem;border-radius:10px;cursor:pointer; } .vsel-pop button:hover{background:color-mix(in srgb,var(--primary-clr) 6%,var(--list-bg))} .vsel-pop button i{width:8px;height:8px;border-radius:50%;background:var(--done-clr);flex:none} .vsel-pop button i.off{background:var(--critical-clr)} .vsel-pop button[aria-current="true"]{background:color-mix(in srgb,var(--primary-clr) 10%,transparent);font-weight:600} .vsel-pop p{font-size:.74rem;color:var(--muted-clr);padding:.4rem .5rem;font-style:italic;text-align:center} /* The frame keeps a window's height and the page scrolls inside it, the way the real app does; otherwise every page switch resized the whole section. */ .app-body{position:relative;min-height:420px;container-type:inline-size;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin} .app-body::-webkit-scrollbar{width:8px} .app-body::-webkit-scrollbar-thumb{background:var(--extra-muted-clr);border-radius:999px} .app-body::-webkit-scrollbar-track{background:transparent} /* ---- Dashboard.razor.css: map + notifications on row 1, cards under */ .dashboard-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); --dashboard-map-h:244px; grid-template-rows:var(--dashboard-map-h) auto; column-gap:.75rem;row-gap:.75rem;align-items:stretch; } .dashboard-grid__map{grid-column:1/-3;grid-row:1;min-width:0} .dashboard-grid__notif{grid-column:-3/-1;grid-row:1;min-width:0;min-height:0} .dashboard-grid__cards{grid-column:1/-1;grid-row:2;min-width:0;position:relative} @container (max-width:660px){ .dashboard-grid{grid-template-columns:1fr;grid-template-rows:auto;--dashboard-map-h:220px} .dashboard-grid__map,.dashboard-grid__notif,.dashboard-grid__cards{grid-column:1;grid-row:auto} } .map-card{ position:relative;height:var(--dashboard-map-h,284px);overflow:hidden; background:var(--map-sea);border:var(--border-thin);border-radius:var(--list-border-radius);box-shadow:var(--elev-rest); } .map-card canvas{display:block;width:100%;height:100%} .map-zoom{ position:absolute;top:10px;left:10px;display:flex;flex-direction:column;border-radius:5px;overflow:hidden; background:var(--map-control);box-shadow:0 1px 5px rgba(0,0,0,.3); } .map-zoom span,.map-zoom button{ width:26px;height:26px;display:grid;place-items:center;font-size:17px;font-weight:700;line-height:1; color:var(--text-clr);border:0;border-bottom:1px solid var(--subtle-divider-clr); font-family:var(--app-sans);background:none;cursor:pointer;padding:0; } .map-zoom span:last-child,.map-zoom button:last-child{border-bottom:0} .map-zoom button:hover{background:var(--background-clr)} /* The map's own buttons, as MapComponent.razor places them: recentre and the depth layer toggle, under the zoom control. */ .map-controls{position:absolute;top:70px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2} .map-icon-btn{ width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:5px;cursor:pointer;padding:0; background:var(--map-control);box-shadow:0 1px 5px rgba(0,0,0,.3);color:var(--muted-clr); } .map-icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .map-icon-btn:hover{color:var(--text-clr)} .map-icon-btn.is-active{color:var(--primary-clr);background:color-mix(in srgb,var(--primary-clr) 12%,var(--map-control))} .map-badge{ position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px; background:var(--map-control);border-radius:5px;padding:4px 8px;font-size:.66rem;font-weight:600; color:var(--text-clr);box-shadow:0 1px 5px rgba(0,0,0,.3); } .map-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--done-clr)} /* ---- cards.css: the metric card ----------------------------------- */ .cards-section{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));grid-auto-rows:144px;gap:.75rem} @container (max-width:660px){ .cards-section{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:136px} } .card{ position:relative;padding:11px 12px;text-align:left;min-width:0; background:var(--list-bg);border:var(--border-thin);border-radius:var(--list-border-radius);box-shadow:var(--elev-rest); display:grid;grid-template-rows:auto 1fr; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease; } .cards-section .card:hover{transform:translateY(-2px);box-shadow:var(--elev-hover)} .card > div{display:grid;align-content:end;min-width:0} .card .source-name{ font-size:12px;line-height:1.4;color:var(--muted-clr);margin:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:1.2rem; } .card .secondline{font-size:11px;color:var(--muted-clr);margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card .metric-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:34px} .card .metric-row h2{ font-family:inherit;font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0; display:flex;align-items:center;min-width:0; } .card .metric-value{font-variant-numeric:tabular-nums;white-space:nowrap} .card .metric-unit{font-size:13px;font-weight:400;color:var(--muted-clr);margin-left:4px} .card .metric-nodata{font-size:15px;font-weight:500;color:var(--muted-clr)} .card .metric-row h2.multiline{font-size:16px;line-height:1.2;display:block;margin:5px 0} .card .multiline span{display:block;font-variant-numeric:tabular-nums} .card .card-status-line{display:inline-flex;align-items:center;gap:5px;margin-top:2px} .card .status-dot{width:7px;height:7px;border-radius:50%;background:var(--done-clr);flex:none} .card .status-dot.stale{background:var(--stale-data-clr)} .card .timestamp{font-size:11px;color:var(--muted-clr);line-height:1.25;display:block} .card .card-bar{display:block;width:100%;height:4px;margin:5px 0 2px;border-radius:3px;background:var(--extra-muted-clr);overflow:hidden} .card .card-bar__fill{display:block;height:100%;border-radius:3px;background:var(--primary-clr);transition:width .3s ease} .card .card-viz{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px} .card .card-viz svg{width:100%;height:100%;overflow:visible} .card .card-viz--thermo{width:13px;height:26px} .card .card-viz--dir{width:24px;height:24px} .card .card-viz--gauge{width:30px;height:19px} .card .card-nav-btn{ position:absolute;right:6px;bottom:6px;width:22px;height:22px;padding:0; background:none;border:0;color:var(--primary-clr);cursor:pointer;opacity:.85;border-radius:6px; } .card .card-nav-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .card.yellow{background:var(--warning-clr);border-color:transparent} .card.red{background:var(--critical-clr);border-color:transparent} .card.yellow,.card.red{--primary-clr:var(--on-notif);--extra-muted-clr:rgba(255,255,255,.3)} .card.yellow,.card.yellow p,.card.yellow h2,.card.yellow span,.card.yellow div, .card.red,.card.red p,.card.red h2,.card.red span,.card.red div{color:var(--on-notif)} .card.yellow .metric-unit,.card.red .metric-unit{color:inherit;opacity:.85} .card.yellow .card-nav-btn,.card.red .card-nav-btn{color:var(--on-notif)} .card.gray > p,.card.gray > div{opacity:.5;filter:grayscale(.7)} .card.camera-card .cam-ph{ margin-top:.25rem;aspect-ratio:16/9;border-radius:10px;display:grid;place-items:center; background:linear-gradient(160deg,#1B2432,#0B1018);color:rgba(255,255,255,.35); } .card.camera-card .cam-ph svg{width:22px;height:22px} .card.camera-card .rec{ position:absolute;bottom:14px;right:14px;font-size:.58rem;font-weight:700;letter-spacing:.06em; color:#fff;background:rgba(220,38,38,.9);padding:2px 6px;border-radius:4px; } .card.switches-card .sw-row{ display:flex;align-items:center;justify-content:space-between;gap:.4rem; font-size:.74rem;padding:.3rem 0;border-top:1px solid var(--subtle-divider-clr); } .card.switches-card .sw-row:first-of-type{border-top:0} .knob{width:34px;height:18px;border-radius:999px;background:var(--extra-muted-clr);position:relative;flex:none;transition:background .2s ease} .knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .18s ease} .knob.on{background:var(--done-clr)} .knob.on::after{left:18px} /* ---- fleet table ---------------------------------------------------- */ .fleet-table{background:var(--list-bg);border:var(--border-thin);border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);overflow-x:auto} .fleet-table table{border-collapse:collapse;width:100%;min-width:460px;font-size:.78rem} .fleet-table th{ text-align:left;padding:.6rem .8rem;font-weight:600;font-size:.68rem;letter-spacing:.2px; color:var(--muted-clr);border-bottom:1px solid var(--subtle-divider-clr);white-space:nowrap; } .fleet-table td{padding:.6rem .8rem;border-bottom:1px solid var(--subtle-divider-clr);font-variant-numeric:tabular-nums;white-space:nowrap} .fleet-table tr:last-child td{border-bottom:0} .fleet-table .st{display:inline-flex;align-items:center;gap:.4rem} .fleet-table .st i{width:7px;height:7px;border-radius:50%;background:var(--done-clr);flex:none} .fleet-table .st i.off{background:var(--critical-clr)} .fleet-table tbody tr{cursor:pointer} .fleet-table tbody tr:hover td{background:color-mix(in srgb,var(--primary-clr) 6%,var(--list-bg))} .hidden{display:none} .frame-note{ display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;justify-content:space-between; margin-top:1.1rem;font-size:.84rem;color:var(--muted); } /* ---- pages, edit mode, picker, switch feedback --------------------- */ .pane.hidden{display:none} .pane-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.55rem} .pane-head h4{font-family:inherit;font-size:.9rem;font-weight:600;letter-spacing:0;margin:0} .pane-head span{font-size:.72rem;color:var(--muted-clr)} .pane-stack{display:grid;gap:.8rem} .card-remove,.card-gauge-toggle{ position:absolute;top:-7px;width:24px;height:24px;border-radius:50%;border:var(--border-thin);cursor:pointer; display:none;place-items:center;background:var(--list-bg);box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:2; } .card-remove{right:-7px;color:var(--critical-clr)} .card-gauge-toggle{left:-7px;color:var(--muted-clr)} .card-gauge-toggle[aria-pressed="true"]{color:var(--primary-clr)} .card-remove svg,.card-gauge-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .appframe[data-edit="on"] .card-remove, .appframe[data-edit="on"] .card-gauge-toggle{display:grid} .appframe[data-edit="on"] .card-nav-btn{display:none} .appframe[data-edit="on"] .cards-section .card{cursor:grab} .ghost-card{ border-radius:var(--list-border-radius);cursor:pointer; border:2px dashed var(--extra-muted-clr);background:var(--list-bg);color:var(--muted-clr); display:none;place-items:center;font-family:inherit;font-size:1.7rem;font-weight:300; } .appframe[data-edit="on"] .ghost-card{display:grid} .ghost-card:hover{border-color:var(--primary-clr);color:var(--primary-clr)} .metric-row--gauge .card-viz{width:54px;height:44px} .metric-row--gauge .metric-row h2,.metric-row--gauge h2{font-size:20px} .metric-row--gauge .metric-unit{font-size:11px} .picker{ position:absolute;inset:auto 0 0 0;z-index:8;background:var(--list-bg);border:var(--border-thin); border-radius:var(--list-border-radius);padding:.7rem;box-shadow:0 -8px 30px rgba(0,0,0,.18); } .picker[hidden]{display:none} .picker h5{font-family:inherit;font-size:.8rem;font-weight:600;margin:0 0 .45rem;color:var(--text-clr)} .picker-list{display:flex;flex-wrap:wrap;gap:.35rem} .picker-list button{ font-family:inherit;font-size:.76rem;padding:.32rem .7rem;border-radius:999px;border:var(--border-thin);cursor:pointer; background:var(--background-clr);color:var(--text-clr); } .picker-list button:hover{background:var(--primary-clr);color:#fff;border-color:transparent} .picker .empty{font-size:.76rem;color:var(--muted-clr)} [data-switch]{cursor:pointer} [data-switch].pending .knob{opacity:.4} .sw-row .rowlabel{display:flex;flex-direction:column;min-width:0} .sw-row .rowlabel em{font-style:normal;font-size:.62rem;color:var(--muted-clr)} .notif{cursor:pointer} .notif[aria-selected="true"]{background:var(--background-clr);border-radius:8px} .ack{ font-family:inherit;font-size:.64rem;padding:.18rem .5rem;border-radius:999px;border:var(--border-thin);cursor:pointer; background:var(--background-clr);color:var(--muted-clr); } .ack:hover{background:var(--primary-clr);color:#fff;border-color:transparent} .ack[disabled]{opacity:.5;cursor:default} .notif-row{ display:grid;grid-template-columns:10px 1fr auto;gap:.6rem;align-items:center; padding:.6rem .8rem;border-bottom:1px solid var(--subtle-divider-clr);font-size:.8rem; } .notif-row:last-child{border-bottom:0} .notif-row i{width:9px;height:9px;border-radius:50%;background:var(--muted-clr)} .notif-row i.crit{background:var(--critical-clr)} .notif-row i.warn{background:var(--warning-clr)} .notif-row time{font-size:.7rem;color:var(--muted-clr);display:block} .listcard{background:var(--list-bg);border:var(--border-thin);border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);overflow:hidden} .hmi{ position:relative;border-radius:var(--list-border-radius);overflow:hidden;min-height:210px; background:linear-gradient(150deg,var(--extra-muted-clr),var(--background-clr));box-shadow:var(--elev-rest); } .hmi .chip{ position:absolute;background:var(--list-bg);border:var(--border-thin);border-radius:10px;padding:.35rem .55rem; box-shadow:var(--elev-rest);font-size:.72rem; } .hmi .chip b{display:block;font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums} .hmi .chip span{font-size:.62rem;color:var(--muted-clr)} .listcard .pane-head{padding:.8rem .9rem .1rem;margin:0} .listcard .sw-row{ display:flex;align-items:center;justify-content:space-between;gap:.5rem; padding:.65rem .9rem;border-top:1px solid var(--subtle-divider-clr);font-size:.84rem; } .listcard .sw-row:first-of-type{border-top:0} .listcard .state{font-size:.72rem;color:var(--muted-clr)} .listcard .state.on{color:var(--done-clr)} /* ---- Digital switches, from switches.css --------------------------- */ .dsw-toprow{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem} .dsw-toprow label{font-style:italic;font-size:.8rem;cursor:pointer;overflow-wrap:anywhere} .dsw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:.75rem} .dsw-card{ display:flex;flex-direction:column;gap:.5rem;min-height:124px;padding:12px; background:var(--list-bg);border:2px solid var(--extra-muted-clr); border-radius:var(--list-border-radius);box-shadow:var(--elev-rest); } .dsw-card.is-on{border-color:color-mix(in srgb,var(--done-clr) 45%,var(--extra-muted-clr))} .dsw-card.is-error{border-color:var(--critical-clr)} .dsw-card.is-unavailable{border-color:color-mix(in srgb,var(--muted-clr) 40%,var(--subtle-divider-clr));opacity:.6} .dsw-card.is-unknown{border-style:dashed} .dsw-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem} .dsw-card__name{font-size:15px;font-weight:600;line-height:1.25;display:flex;align-items:center;gap:.4rem;overflow-wrap:anywhere} @container (max-width:560px){ .fleet-table table{min-width:0} .fleet-table th:nth-child(3),.fleet-table td:nth-child(3){display:none} .fleet-table th,.fleet-table td{padding:.5rem .55rem} .dsw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .alarm-stripe{width:4px;height:14px;border-radius:2px;background:var(--critical-clr);flex:none} .dsw-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:4px;background:var(--extra-muted-clr)} .dsw-dot.on{background:var(--done-clr)} .dsw-dot.error{background:var(--critical-clr)} .dsw-dot.unknown{background:transparent;border:2px dashed var(--muted-clr)} .dsw-card__state-icon{flex:none;display:inline-flex;color:var(--muted-clr)} .dsw-card__state-icon.active{color:var(--critical-clr)} .dsw-card__state-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8} .dsw-card__control{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.35rem;min-height:40px;font-size:.74rem;color:var(--muted-clr); } .dsw-unavailable{font-size:.74rem;font-style:italic;color:var(--muted-clr);text-decoration:line-through} .dsw-badge{font-size:.66rem;padding:.1rem .45rem;border-radius:999px;border:1px solid currentColor;display:inline-flex;align-items:center;gap:.25rem} .dsw-badge--error{color:var(--critical-clr)} .dsw-badge--unknown{color:var(--muted-clr)} .dsw-card__actions{ display:flex;align-items:center;justify-content:space-between;gap:.25rem; border-top:1px solid var(--subtle-divider-clr);padding-top:.5rem; } .dsw-act{background:none;border:0;padding:0;cursor:pointer;color:var(--primary-clr);opacity:.75} .dsw-act:hover{opacity:1} .dsw-act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} .dsw-act.favorite{color:var(--fav-clr);opacity:1} .dsw-act.favorite svg{fill:currentColor} .knob--lg{width:50px;height:28px} .knob--lg::after{width:22px;height:22px;top:3px;left:3px} .knob--lg.on::after{left:25px} .knob--sm{width:28px;height:16px} .knob--sm::after{width:12px;height:12px;top:2px;left:2px} .knob--sm.on::after{left:14px} .cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem} .cam-tile{ background:var(--list-bg);border:var(--border-thin);border-radius:var(--list-border-radius);box-shadow:var(--elev-rest); padding:.6rem;position:relative; } .cam-tile p{font-size:.78rem;font-weight:600;margin:0 0 .35rem} .cam-tile .cam-ph{aspect-ratio:16/10;border-radius:10px;display:grid;place-items:center;background:linear-gradient(160deg,#1B2432,#0B1018);color:rgba(255,255,255,.35)} .cam-tile .cam-ph svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6} .cam-tile .rec{position:absolute;bottom:.9rem;right:1rem;font-size:.6rem;color:#fff;background:rgba(220,38,38,.9);padding:2px 6px;border-radius:4px;font-weight:700} .app-burger{ display:none;width:34px;height:34px;flex:none;place-items:center; background:var(--list-bg);border:var(--border-thin);border-radius:10px;color:var(--text-clr);cursor:pointer;padding:0; } .app-burger svg{width:18px;height:18px;fill:none;stroke:var(--primary-clr);stroke-width:2.4;stroke-linecap:round} .app-scrim{display:none} /* Below 900px the sidebar becomes an off-canvas drawer, as the app's MainLayout does at the same breakpoint. */ @media (max-width:900px){ .appframe{grid-template-columns:minmax(0,1fr)} .app-side{ position:absolute;top:0;bottom:0;left:0;width:min(236px,72%);z-index:20;min-height:0; background:var(--background-clr); transform:translateX(-100%);transition:transform .25s ease; } /* The shadow belongs to the open drawer; parked off-canvas it only bled a dark band down the left edge of the frame. */ .appframe[data-drawer="open"] .app-side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)} .app-scrim{display:block;position:absolute;inset:0;z-index:15;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease} .appframe[data-drawer="open"] .app-scrim{opacity:1;pointer-events:auto} .app-burger{display:grid} /* No collapsed rail on a phone: the app only offers that from 900px up, below it the hamburger is the menu switch. */ .nav-collapse-btn{display:none} .appframe[data-nav="collapsed"] .app-side{width:min(236px,72%);min-width:0} .appframe[data-nav="collapsed"] .app-nav a{justify-content:flex-start;padding-inline:14px} .appframe[data-nav="collapsed"] .app-nav a span:not(.msym):not(.nav-badge), .appframe[data-nav="collapsed"] .modetoggle, .appframe[data-nav="collapsed"] .nightsw{display:revert} .appframe[data-nav="collapsed"] .side-brand .logo{width:118px} .appframe[data-nav="collapsed"] .flinks{flex-direction:row} .app-main{padding:12px 12px 14px} .app-top{margin-bottom:.75rem} .app-top h3{font-size:1.05rem;white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .top-actions{flex:none;min-width:0;justify-content:flex-end} .vselector{min-width:0;flex:1;max-width:230px} .vselector > span{min-width:0} .vselector .avatar{width:34px;height:34px} } @media (max-width:600px){ .app-top h3{display:none} .top-actions{flex:1} } @media (prefers-reduced-motion:reduce){ .app-side{transition:none} .app-scrim{transition:none} } /* ---- chart pages: Environment, Engines, Electrical, Tanks, Routes. In the app these are ChartCard grids under a date-interval toolbar, with a Large/Medium/Small column switch. ---------- */ .wireframe{display:grid;gap:1.3rem} .wireframe .wrapper{display:grid;gap:.7rem;grid-template-columns:repeat(var(--chart-cols,2),minmax(0,1fr))} .wireframe .full{grid-column:1/-1} .appframe[data-chart-size="medium"] .wireframe{--chart-cols:3} .appframe[data-chart-size="small"] .wireframe{--chart-cols:4} .appframe[data-chart-size="medium"] .wireframe .full, .appframe[data-chart-size="small"] .wireframe .full{grid-column:auto} .section-title{font-size:12px;font-weight:600;color:var(--muted-clr);letter-spacing:.2px;margin:0 0 .4rem;font-family:inherit} .subsection-title{font-size:14px;font-weight:600;color:var(--text-clr);margin:0 0 .35rem;font-family:inherit} .dateintervalpicker{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap} .dip-left{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0} .dip-sel,.dip-btn{ font-family:inherit;font-size:.78rem;color:var(--text-clr);background:var(--list-bg); border:1px solid var(--extra-muted-clr);border-radius:6px;padding:.3rem .5rem;flex:none; } .dip-btn{color:var(--muted-clr);cursor:default} .chart-size-toggle{display:inline-flex;flex:none;border:1px solid var(--extra-muted-clr);border-radius:8px;overflow:hidden;background:var(--list-bg)} .chart-size-toggle__opt{padding:.28rem .65rem;font-family:inherit;font-size:.76rem;font-weight:500;color:var(--muted-clr);background:none;border:0;cursor:pointer} .chart-size-toggle__opt+.chart-size-toggle__opt{border-left:1px solid var(--extra-muted-clr)} .chart-size-toggle__opt.active{background:var(--primary-clr);color:#fff} .appframe[data-app-theme="dark"] .chart-size-toggle__opt.active{color:#08111f} .chartcard{ position:relative;background:var(--list-bg);border:1px solid var(--subtle-divider-clr); border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);text-align:center;overflow:hidden; } .chartcard .card-content{padding:.5rem .5rem 0} .chartcard .source-name{font-size:12px;color:var(--muted-clr);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chartcard .secondline{font-size:.7rem;color:var(--muted-clr)} .chartcard .metric-row{justify-content:center;min-height:0;margin-top:.05rem} .chartcard .metric-value{font-size:20px;font-weight:600} .chartcard .metric-unit{font-size:11px;color:var(--muted-clr);margin-left:4px} .card-status-line{display:inline-flex;align-items:center;gap:.3rem;margin-top:.1rem} .status-dot{width:7px;height:7px;border-radius:50%;background:var(--done-clr);flex:none} .status-dot.stale{background:var(--stale-data-clr)} .chartcard .timestamp{font-size:10px;margin:0} .chart-content{position:relative;margin-top:.3rem} .chart-content svg{display:block;width:100%;height:76px} .value-card{display:flex;justify-content:space-around;gap:.4rem;padding:.35rem;background:var(--background-clr)} .value-container{display:flex;flex-direction:column;gap:1px} .value-container label{font-size:9px;color:var(--muted-clr)} .value-container .value{font-size:11px;font-variant-numeric:tabular-nums} .chartbuttons{position:absolute;top:4px;right:4px;z-index:1} .chartcard.chart-nodata .chart-content,.chartcard.chart-nodata .metric-row{opacity:.5;filter:grayscale(.7)} .chart-nodata-overlay{position:absolute;inset:0;display:grid;place-items:center;font-size:.76rem;color:#8ba0b5} /* Narrow frame: one chart per row and no column switch, as in the app. */ @container (max-width:660px){ .wireframe .wrapper{grid-template-columns:1fr} .wireframe .full{grid-column:auto} .chart-size-toggle{display:none} .dateintervalpicker{justify-content:flex-start} .dip-left{flex-wrap:wrap} .cameras-wrapper{grid-template-columns:1fr} .footage-gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .hmi-list{grid-template-columns:1fr} .dashboard-grid{--dashboard-map-h:190px} } /* ---- Notifications page ------------------------------------------ */ .noti-view{display:flex;flex-direction:column;max-width:620px;margin:0 auto} .noti-status{ position:relative;display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem; background:var(--list-bg);border:1px solid var(--subtle-divider-clr); border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);overflow:hidden;margin-bottom:1rem; } .noti-status::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--critical-clr)} .noti-status.is-warning::before{background:var(--warning-clr)} .noti-status.is-clear::before{background:var(--done-clr)} .noti-status__pulse{width:12px;height:12px;border-radius:50%;background:#EA580C;flex:none} @media (prefers-reduced-motion:no-preference){ .noti-status__pulse{animation:notiPulse 1.9s ease-out infinite} } @keyframes notiPulse{ 0%{box-shadow:0 0 0 0 rgba(234,88,12,.55)} 100%{box-shadow:0 0 0 10px rgba(234,88,12,0)} } .noti-status__title{font-size:.88rem;font-weight:600} .noti-status__sub{font-size:.76rem;color:var(--muted-clr)} .noti-section-label{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-clr);margin:0 0 .45rem} .noti-card{ position:relative;background:var(--list-bg);border:1px solid var(--subtle-divider-clr); border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);overflow:hidden;margin-bottom:.5rem; } .noti-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#EA580C} .noti-card--warning::before{background:#C2760B} .noti-card__head{padding:.55rem .75rem .6rem .95rem} .noti-card__top{display:flex;align-items:center;gap:.3rem} .noti-card__dur{margin-left:auto;font-size:.8rem;font-weight:600;color:#EA580C;font-variant-numeric:tabular-nums} .noti-card__title{font-size:.92rem;font-weight:600;margin-top:.3rem} .noti-card__meta{font-size:.72rem;color:var(--muted-clr);margin-top:.1rem} .alarm-chip{ display:inline-flex;align-items:center;gap:.25em;border-radius:10px;padding:.15em .45em; font-size:.64rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1; } .alarm-chip--critical{background:var(--critical-clr);color:#fff} .alarm-chip--warning{background:var(--warning-clr);color:#fff} .alarm-chip--info{background:#1E40AF;color:#fff} .alarm-chip--ongoing{border:2px solid #EA580C;color:#EA580C} .alarm-chip--resolved,.alarm-chip--done{border:1px solid var(--muted-clr);color:var(--muted-clr)} .noti-filter{display:flex;gap:.35rem;flex-wrap:wrap;margin:.9rem 0 .7rem} .noti-chip{ font-family:inherit;font-size:.78rem;padding:.32rem .8rem;border-radius:999px; border:1px solid var(--subtle-divider-clr);background:var(--list-bg);color:var(--muted-clr);cursor:pointer; } .noti-chip.is-on{background:var(--primary-clr);color:#fff;border-color:transparent} .appframe[data-app-theme="dark"] .noti-chip.is-on{color:#08111f} .noti-chip__n{margin-left:.35rem;font-weight:700;font-variant-numeric:tabular-nums} .noti-timeline{ background:var(--list-bg);border:1px solid var(--subtle-divider-clr);border-radius:var(--list-border-radius); box-shadow:var(--elev-rest);padding:.25rem .85rem .7rem;--noti-time-w:2.5rem;--noti-rail-w:1.4rem; } .noti-day{display:flex;align-items:center;justify-content:center;margin:.45rem 0 .35rem} .noti-day span{background:var(--background-clr);border:1px solid var(--subtle-divider-clr);border-radius:999px;padding:2px 11px;font-size:.7rem;font-weight:700} .noti-item{display:grid;grid-template-columns:var(--noti-time-w) var(--noti-rail-w) minmax(0,1fr);align-items:start;position:relative} .noti-item::before{ content:"";position:absolute;top:0;bottom:0;width:2px; left:calc(var(--noti-time-w) + var(--noti-rail-w)/2 - 1px); background:color-mix(in srgb,var(--muted-clr) 26%,transparent); } .noti-item__time{font-size:.74rem;font-weight:600;color:var(--muted-clr);font-variant-numeric:tabular-nums;padding-top:.5rem} .noti-node{ width:14px;height:14px;border-radius:50%;border:2px solid var(--muted-clr);margin:.5rem auto 0; box-shadow:0 0 0 4px var(--list-bg);z-index:1;position:relative;display:grid;place-items:center;box-sizing:border-box; } .noti-node--critical{border-color:var(--critical-clr);background:var(--critical-clr)} .noti-node--warning{border-color:var(--warning-clr);background:var(--warning-clr)} .noti-node--info{border-color:#1E40AF;background:var(--list-bg)} .noti-node--resolved{border-color:var(--done-clr);background:var(--list-bg);color:var(--done-clr)} .noti-node--resolved svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:3} .noti-node--auto{border-color:var(--muted-clr);background:var(--list-bg)} .noti-node--auto::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-clr)} .noti-item__body{padding:.3rem 0} .noti-item__click{padding:.35rem .45rem;border-radius:10px} .noti-item__head{display:flex;align-items:center;gap:.4rem} .noti-item__title{font-size:.8rem} .noti-item.is-auto .noti-item__title{color:var(--muted-clr)} .noti-item__sub{display:flex;align-items:center;gap:.3rem;margin-top:.2rem} .noti-item__dur{font-size:.7rem;color:var(--muted-clr);font-variant-numeric:tabular-nums;margin-left:auto} .noti-count{font-size:.68rem;font-weight:700;background:color-mix(in srgb,var(--muted-clr) 16%,var(--list-bg));border-radius:999px;padding:.05rem .4rem;margin-left:.3rem} .noti-more{ width:100%;margin-top:.6rem;font-family:inherit;font-size:.82rem;font-weight:600;padding:.55rem; border:1px solid var(--subtle-divider-clr);border-radius:var(--list-border-radius); background:var(--list-bg);color:var(--text-clr);cursor:pointer; } /* ---- dashboard notifications card -------------------------------- */ .dash-notif{ height:100%;display:flex;flex-direction:column;background:var(--list-bg); border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);padding:.6rem .65rem;min-height:0; } .dash-notif__header{display:flex;align-items:center;justify-content:space-between;gap:.4rem} .dash-notif__more{color:var(--muted-clr);display:inline-flex} .dash-notif__more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2} .dash-notif__list{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem;overflow:auto;min-height:0} .overview-notif-entry{display:flex;gap:.5rem} .overview-notif__bar{width:3px;border-radius:2px;flex:none;align-self:stretch;min-height:1rem;background:var(--muted-clr)} .overview-notif__bar.level-info{background:#1E40AF} .overview-notif__bar.level-warning{background:var(--warning-clr)} .overview-notif__bar.level-critical{background:var(--critical-clr)} .overview-notif__content{flex:1;min-width:0} .overview-notif__top{display:flex;align-items:center;gap:.3rem} .overview-notif__vessel{font-size:.72rem;line-height:1.3;flex:1;min-width:0} .overview-notif__meta{font-size:.64rem;color:var(--muted-clr)} .notif-ongoing{color:var(--critical-clr)} .notif-resolved{color:var(--muted-clr)} /* ---- Cameras page ----------------------------------------------- */ .cameras-wrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:.7rem} .camera{display:flex;flex-direction:column;background:var(--list-bg);border:1px solid var(--subtle-divider-clr);border-radius:var(--list-border-radius);overflow:hidden;box-shadow:var(--elev-rest)} .camera h4{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;font-family:inherit;font-size:13px;font-weight:600;margin:0} .camera h4 svg{width:16px;height:16px;fill:none;stroke:var(--primary-clr);stroke-width:1.8;flex:none} .camera-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .video-wrapper{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center} .video-wrapper .glyph{width:32px;height:32px;fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.5} .video-wrapper .controls{ position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:.45rem; padding:.3rem .4rem;border-radius:5px;background:rgba(0,0,0,.5);opacity:0;transition:opacity .15s ease; } .video-wrapper:hover .controls,.video-wrapper:focus-within .controls{opacity:1} .video-ctrl-btn{background:none;border:0;color:#fff;cursor:pointer;display:inline-flex;padding:0} .video-ctrl-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8} .volume-slider{flex:1;max-width:70px;height:3px;background:rgba(255,255,255,.35);border-radius:2px;position:relative} .volume-slider::after{content:"";position:absolute;left:0;top:0;bottom:0;width:60%;background:#fff;border-radius:2px} .live-indicator{width:11px;height:11px;border-radius:50%;background:var(--critical-clr);flex:none} .footage-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem;padding-top:.5rem} .footage-card{background:var(--list-bg);border:1px solid var(--subtle-divider-clr);border-radius:var(--list-border-radius);overflow:hidden;box-shadow:var(--elev-rest);cursor:pointer} .footage-thumbnail-wrapper{position:relative;aspect-ratio:16/9;background:var(--background-clr);display:grid;place-items:center} .footage-thumbnail-wrapper .glyph{width:26px;height:26px;fill:none;stroke:var(--extra-muted-clr);stroke-width:1.6} .footage-duration{position:absolute;bottom:6px;right:8px;font-size:.68rem;color:#fff;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:4px} .footage-info{display:flex;flex-direction:column;gap:2px;padding:.4rem .55rem} .footage-date{font-size:.73rem;color:var(--muted-clr)} .footage-comment{font-size:.7rem;color:var(--muted-clr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- Routes page: map + trip book -------------------------------- */ .map-main-div{position:relative;height:200px;border-radius:var(--list-border-radius);overflow:hidden;border:var(--border-thin)} .map-main-div canvas{display:block;width:100%;height:100%} .map-controls{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:.35rem} .map-icon-btn{ width:28px;height:28px;border-radius:6px;border:1px solid var(--subtle-divider-clr); background:var(--list-bg);color:var(--muted-clr);cursor:pointer;display:grid;place-items:center; } .map-icon-btn.is-active{color:var(--primary-clr);border-color:var(--primary-clr)} .map-icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8} .trip-book-feature-card{background:var(--list-bg);border:1px solid var(--subtle-divider-clr);border-radius:var(--list-border-radius);box-shadow:var(--elev-rest);padding:.7rem} .trip-book-feature-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem} .trip-book-feature-title{display:flex;align-items:center;gap:.4rem} .trip-book-feature-title svg{width:18px;height:18px;fill:none;stroke:var(--primary-clr);stroke-width:1.8} .trip-book-feature-title h4{font-family:inherit;font-size:.92rem;font-weight:600;margin:0} .trip-book-list{display:grid;gap:.5rem} .trip-book-card{background:var(--background-clr);border-radius:10px;padding:.55rem .7rem} .trip-book-header{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.35rem} .leg-number{font-size:.82rem;font-weight:700} .leg-route{font-size:.8rem} .leg-arrow{opacity:.5} .badge-accent{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--primary-clr);color:#fff;border-radius:999px;padding:.1rem .45rem} .appframe[data-app-theme="dark"] .badge-accent{color:#08111f} .trip-book-stats{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem} .stat-item{display:flex;flex-direction:column} .stat-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-clr)} .stat-value{font-size:.85rem;font-weight:500;font-variant-numeric:tabular-nums} .trip-book-positions{font-size:.7rem;color:var(--muted-clr);margin-top:.3rem;font-variant-numeric:tabular-nums} /* ---- HMI panels page --------------------------------------------- */ .hmi-page__head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem} .hmi-page__head>svg{width:20px;height:20px;fill:none;stroke:var(--primary-clr);stroke-width:1.8;flex:none} .hmi-page__title{font-family:inherit;font-size:1rem;font-weight:600;margin:0} .hmi-page__spacer{flex:1 1 auto} .hmi-present{display:inline-flex;align-items:center;gap:.4rem} .hmi-present__sel{font-family:inherit;font-size:.78rem;color:var(--muted-clr);background:var(--background-clr);border:0;border-radius:6px;padding:.28rem .45rem} .hmi-btn{ display:inline-flex;align-items:center;gap:.3rem;font-family:inherit;font-size:.78rem;font-weight:600; padding:.3rem .65rem;border-radius:6px;border:1px solid var(--extra-muted-clr); background:var(--list-bg);color:var(--text-clr);cursor:pointer; } .hmi-btn svg{width:13px;height:13px;fill:currentColor;stroke:none} .hmi-list{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .hmi-card{display:grid;grid-template-rows:1fr auto;background:var(--list-bg);border:1px solid var(--subtle-divider-clr);border-radius:var(--list-border-radius);overflow:hidden;box-shadow:var(--elev-rest)} .hmi-card--disabled .hmi-card__open{opacity:.55} .hmi-card__open{display:grid;grid-template-rows:auto 1fr;background:none;border:0;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit} .hmi-card__thumb{display:grid;place-items:center;min-height:54px;background:var(--background-clr);border-bottom:1px solid var(--subtle-divider-clr)} .hmi-card__thumb svg{width:22px;height:22px;fill:none;stroke:var(--extra-muted-clr);stroke-width:1.8} .hmi-card__bd{display:flex;flex-direction:column;padding:8px 10px} .hmi-card__name{font-size:.88rem;font-weight:600} .hmi-card__desc{font-size:.72rem;color:var(--muted-clr);line-height:1.35} .hmi-card__badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px} .hmi-badge{ display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:5px;border:1px solid transparent; background:color-mix(in srgb,var(--primary-clr) 18%,transparent);color:var(--primary-clr); font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; } .hmi-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4} .hmi-badge--default{border-color:var(--primary-clr)} .hmi-badge--off{background:color-mix(in srgb,var(--warning-clr) 18%,transparent);color:var(--warning-clr)} .hmi-card__ft{display:flex;flex-direction:column;gap:2px;padding:4px 6px 5px;border-top:1px solid var(--subtle-divider-clr);font-size:.68rem;color:var(--muted-clr)} .hmi-card__meta{display:flex;justify-content:space-between;gap:8px;padding:0 6px} .hmi-card__date{color:var(--extra-muted-clr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hmi-card__ops{display:flex;justify-content:space-between;align-items:center} .hmi-card__move,.hmi-card__acts{display:flex;align-items:center;gap:.15rem} .hmi-card--ghost{ display:grid;grid-template-rows:none;place-items:center;gap:3px;min-height:140px;padding:16px; text-align:center;border:1px dashed var(--extra-muted-clr);background:var(--list-bg); cursor:pointer;font-family:inherit;color:inherit;border-radius:var(--list-border-radius); } .hmi-card--ghost svg{width:26px;height:26px;fill:none;stroke:var(--extra-muted-clr);stroke-width:1.8} .hmi-card--ghost:hover{border-color:var(--primary-clr)} /* --- three-column notes ---------------------------------------- */ .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.4rem;margin-top:2.6rem} .cols3 h4{margin-bottom:.35rem} .cols3 p{font-size:.98rem;color:var(--ink-2)} .cols3 li{padding:.5rem 0;font-size:.98rem;color:var(--ink-2);border-top:1px solid var(--line-soft)} .cols3 ul{margin-top:.6rem} @media (max-width:900px){.cols3{grid-template-columns:1fr}} /* --- product shots, carried over from the current site --------- */ .shot{ border-radius:var(--r-md);background:var(--plate);aspect-ratio:16/11; display:grid;place-items:center;overflow:hidden; } .shot img{width:100%;height:100%;object-fit:contain;padding:5%} .shot--flush img{padding:0;object-fit:cover} .products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-bottom:clamp(2rem,4vw,3.2rem)} .product{display:flex;flex-direction:column;gap:.55rem} .product h3{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;margin-top:.5rem} .product .use{color:var(--accent);font-weight:600;font-size:.9rem} .product p:last-child{font-size:.96rem;color:var(--ink-2)} @media (max-width:700px){.products{grid-template-columns:1fr}} /* --- spec matrix ----------------------------------------------- */ .matrix-card{border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);overflow-x:auto} table.matrix{border-collapse:collapse;width:100%;min-width:780px;font-size:.95rem} table.matrix th,table.matrix td{text-align:left;padding:.85rem 1.1rem;border-top:1px solid var(--line-soft);vertical-align:top} table.matrix thead th{border-top:0;padding-top:1.3rem;padding-bottom:1rem;vertical-align:bottom} table.matrix thead .col-name{font-size:1.18rem;font-weight:700;letter-spacing:-.025em;display:block} table.matrix thead .col-use{font-size:.82rem;color:var(--muted);font-weight:400;display:block;margin-top:.15rem} table.matrix tbody th{font-weight:500;color:var(--ink);width:30%} table.matrix td{color:var(--ink-2);font-variant-numeric:tabular-nums} table.matrix td.no{color:var(--muted)} table.matrix td.new{color:var(--accent);font-weight:500} table.matrix tbody tr:hover th,table.matrix tbody tr:hover td{background:var(--panel-2)} .matrix-foot{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.6rem} /* --- modules --------------------------------------------------- */ .modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2.4rem} .module{ border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow); padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem; } .module--soon{background:var(--panel-2);box-shadow:none} .module .status{font-size:.82rem;font-weight:600;color:var(--ok)} .module--soon .status{color:var(--muted)} .module h3{font-size:1.65rem;font-weight:700;letter-spacing:-.03em} .module p{font-size:.98rem;color:var(--ink-2)} .module ul{margin-top:auto;padding-top:.4rem} .module li{font-size:.88rem;color:var(--ink-2);padding:.42rem 0;border-top:1px solid var(--line-soft)} @media (max-width:900px){.modules{grid-template-columns:1fr}} /* --- services -------------------------------------------------- */ .svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem} .svc article{ border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow); padding:1.7rem 1.55rem;display:flex;flex-direction:column;gap:.7rem; } .svc p{font-size:.98rem;color:var(--ink-2)} .svc .btn{margin-top:auto;align-self:flex-start} @media (max-width:900px){.svc{grid-template-columns:1fr}} /* --- about ----------------------------------------------------- */ .about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:start} .about .lede+.lede{margin-top:1.1rem} .quals{border-radius:var(--r-lg);background:var(--panel-2);padding:1.6rem 1.6rem} .quals h4{margin-bottom:.7rem} .quals li{font-size:.94rem;color:var(--ink-2);padding:.55rem 0;border-top:1px solid var(--line)} .quals li:first-child{border-top:0} .ref{margin-top:1.6rem;font-size:.96rem;color:var(--ink-2)} .ref a{color:var(--accent);text-decoration:none} .ref a:hover{text-decoration:underline} @media (max-width:900px){.about{grid-template-columns:1fr}} /* --- steps ----------------------------------------------------- */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;counter-reset:s} .steps li{ counter-increment:s;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow); padding:1.6rem 1.5rem; } .steps li::before{ content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.92rem;margin-bottom:.9rem; } .steps h4{margin-bottom:.35rem} .steps p{font-size:.96rem;color:var(--ink-2);margin-bottom:.7rem} @media (max-width:700px){.steps{grid-template-columns:1fr}} /* --- contact --------------------------------------------------- */ .contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.8rem,4vw,3.6rem)} .contact-lines{margin-top:1.8rem;display:flex;flex-direction:column;gap:.3rem} .contact-lines a{font-size:1.1rem;font-weight:500;text-decoration:none;color:var(--accent)} .contact-lines a:hover{text-decoration:underline} form{border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);padding:1.7rem 1.6rem;display:grid;gap:1rem} .f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem} label{display:grid;gap:.35rem;font-size:.86rem;color:var(--muted)} input,select,textarea{ font-family:inherit;font-size:1rem;color:var(--ink);background:var(--panel-2); border:1px solid transparent;border-radius:var(--r-sm);padding:.7rem .85rem;width:100%; transition:border-color .15s ease,background .15s ease; } input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--panel);outline:none} textarea{min-height:112px;resize:vertical} select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--muted) 50%),linear-gradient(-45deg,transparent 49%,var(--muted) 50%);background-size:6px 6px;background-position:calc(100% - 19px) 56%,calc(100% - 14px) 56%;background-repeat:no-repeat} form .btn{justify-self:start} form .btn:disabled{opacity:.6;cursor:progress} form .note{font-size:.84rem;color:var(--muted)} form .note a{color:var(--accent)} /* The honeypot field: off screen for people, still filled in by naive bots. */ form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} form{position:relative} .form-status{font-size:.92rem;font-weight:500;border-radius:var(--r-sm);padding:.7rem .9rem} .form-status[data-kind="pending"]{background:var(--panel-2);color:var(--ink-2)} .form-status[data-kind="ok"]{background:color-mix(in srgb,var(--ok) 12%,var(--panel));color:var(--ok)} .form-status[data-kind="error"]{background:color-mix(in srgb,var(--crit) 10%,var(--panel));color:var(--crit)} @media (max-width:900px){.contact{grid-template-columns:1fr}.f2{grid-template-columns:1fr}} /* --- footer ---------------------------------------------------- */ footer.site{border-top:1px solid var(--line-soft);padding-block:3rem 2.2rem;background:var(--panel-2)} .foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2rem} .foot h5{color:var(--muted);margin:0 0 .7rem} .foot li{padding:.2rem 0} .foot a{font-size:.92rem;text-decoration:none;color:var(--ink-2)} .foot a:hover{color:var(--accent)} .foot .logo{margin-bottom:.9rem} .foot .ft-tagline{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.45rem} .foot p{font-size:.92rem;color:var(--muted);max-width:34ch} .legal{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between;margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line)} .legal span{font-size:.82rem;color:var(--muted)} @media (max-width:860px){.foot{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot{grid-template-columns:1fr}} /* --- phones and tablets ---------------------------------------- */ @media (max-width:620px){ .topbar{gap:.6rem} .btn{font-size:.88rem;padding:.55rem .9rem} .band{padding-block:clamp(2rem,7vw,2.4rem)} .hero{padding-block:1.6rem 2.2rem} .plot canvas{height:270px} .legal{gap:.3rem} } @media (max-width:480px){ .topbar{gap:.4rem} .topctl{gap:.35rem} .logo{width:96px;height:20px} .cta-long{display:none} .cta-short{display:inline} .btn--fill{padding:.55rem .8rem} } @media (max-width:480px){ .spec{padding-block:.9rem} .spec dt{font-size:.78rem;margin-bottom:.1rem} .spec dd{font-size:1rem} .products,.modules,.svc,.steps,.cols3{gap:1rem} .foot{gap:1.4rem} form{padding:1.2rem 1.1rem} .contact-lines a{font-size:1rem} } /* Wide things must not need a sideways drag on a phone. The diagram gets a stacked version, the comparison table a card per product. */ .diagram-stack,.matrix-stack{display:none;gap:1rem} .dstep{display:grid;gap:.5rem} .dstep__cap{font-size:.78rem;font-weight:600;color:var(--muted)} .dstep__box{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow);padding:1.05rem 1.1rem} .dstep__box h4{font-size:1.12rem;margin-bottom:.5rem} .dstep__box ul{display:grid;gap:.22rem} .dstep__box li{font-size:.94rem;color:var(--ink-2)} .dstep__chip{ margin-top:.7rem;display:inline-block;background:var(--accent-soft);color:var(--accent); font-size:.82rem;font-weight:600;border-radius:999px;padding:.25rem .7rem; } .dstep__foot{margin-top:.6rem;font-size:.88rem;color:var(--muted)} .dstep__link{ display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--accent); font-weight:600;padding-left:.2rem; } .dstep__link::after{content:"↓";font-weight:400} .mstack{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden} .mstack__head{padding:1rem 1.1rem .7rem} .mstack__name{display:block;font-size:1.35rem;font-weight:700;letter-spacing:-.03em} .mstack__row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.2rem 1rem; padding:.6rem 1.1rem;border-top:1px solid var(--line-soft);font-size:.92rem; } .mstack__row span{color:var(--ink-2)} .mstack__row b{font-weight:600;text-align:right} .mstack__row.is-no span,.mstack__row.is-no b{color:var(--muted);font-weight:400} .mstack__row.is-new b{color:var(--accent)} /* The wide SVG needs about 940px to stay legible, the table about 800. Below those widths each one is replaced by its stacked version. */ @media (max-width:1000px){ .diagram{display:none} .diagram-stack{display:grid;gap:.5rem} .dstep--clients{grid-template-columns:1fr 1fr} } @media (max-width:860px){ .matrix-card{display:none} .matrix-stack{display:grid} } /* On a tablet the three cards sit side by side, so it still reads as a comparison; the label goes above the value to fit the narrower column. */ @media (min-width:600px) and (max-width:860px){ .matrix-stack{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start} .mstack__row{grid-template-columns:1fr;gap:.05rem;padding:.55rem .9rem} .mstack__row b{text-align:left} } @media (max-width:560px){ .dstep--clients{grid-template-columns:1fr} } /* Product shots read better beside the text on a phone. */ @media (max-width:700px){ .product{ display:grid;grid-template-columns:108px minmax(0,1fr); column-gap:1.1rem;row-gap:.15rem;align-items:start; } .product .shot{grid-column:1;grid-row:1 / span 3;aspect-ratio:1;margin:0} .product h3{grid-column:2;grid-row:1;margin-top:0;font-size:1.3rem} .product .use{grid-column:2;grid-row:2} .product>p:last-child{grid-column:2;grid-row:3;margin-top:.2rem} } @media (max-width:900px){ .module .shot{aspect-ratio:16/9;max-height:170px} } /* Touch: bigger hit areas on the small controls. */ @media (hover:none){ nav.main a{padding:.6rem .7rem} #mobilenav a{padding:.85rem var(--pad)} .btn--text{padding:.55rem .4rem} .dsw-act{padding:.25rem} .iconbtn{width:34px;height:34px} } .skip{position:absolute;left:-9999px} .skip:focus{left:.5rem;top:.5rem;z-index:99;background:var(--accent);color:var(--on-accent);padding:.5rem .9rem;border-radius:999px} /* --- reading progress under the header -------------------------- */ .scrollbar{ position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(to right,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--ok))); transform:scaleX(0);transform-origin:0 50%; } /* ---- Fleet weather page: the map with a marker per vessel ---------- */ .fw-page{position:relative;height:100%;min-height:420px;border-radius:10px;overflow:hidden;background:var(--background-clr)} .fw-map{position:absolute;inset:0;width:100%;height:100%;display:block} .fw-reset{ position:absolute;top:10px;left:10px;z-index:4; display:inline-flex;align-items:center;gap:6px; font:600 12px/1 var(--app-sans);color:#fff;background:var(--primary-clr); border:0;border-radius:8px;padding:8px 12px;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); } .fw-reset svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2} .fw-marker{ position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); z-index:2;width:44px;padding:0;border:0;background:none;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:4px; font-family:var(--app-sans); } .fw-vessel-icon{ width:34px;height:34px;border-radius:50%;display:block; background:linear-gradient(145deg,#6fb7f2 0%,#1c6cb0 100%); box-shadow:0 0 0 2px #fff,0 1px 4px rgba(15,23,42,.45); } .fw-vessel-icon.is-off{background:linear-gradient(145deg,#a6b2c2 0%,#6b7686 100%)} .fw-marker.is-open .fw-vessel-icon{box-shadow:0 0 0 2px var(--primary-clr),0 1px 6px rgba(15,23,42,.5)} .fw-name,.fw-chip{ background:var(--list-bg);color:var(--text-clr); border-radius:9px;white-space:nowrap;box-shadow:0 1px 3px rgba(15,23,42,.25); } .fw-name{font-size:11px;font-weight:600;padding:1px 6px} .fw-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:2px 7px} .fw-chip--off{color:var(--stale-data-clr);font-style:italic} .fw-chip-item{display:inline-flex;align-items:center;gap:2px} .fw-chip-item small{font-size:9px;opacity:.7;margin-left:1px} .fw-sep{color:var(--extra-muted-clr)} .fw-arrow{display:inline-block;margin-left:2px;font-size:12px;line-height:1;transform-origin:center} .fw-popup{ position:absolute;left:var(--x);top:var(--y);z-index:5; transform:translate(-50%,calc(-100% - 30px)); min-width:224px;padding:10px 14px;border-radius:10px; background:var(--list-bg);border:var(--border-thin);box-shadow:0 10px 26px rgba(15,23,42,.3); font-family:var(--app-sans);font-size:12px;color:var(--text-clr); } .fw-popup::after{ content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:7px solid transparent;border-top-color:var(--list-bg); } .fw-popup-title{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--primary-clr)} .fw-popup-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;border-bottom:var(--border-thin)} .fw-popup-row:last-of-type{border-bottom:0} .fw-popup-label{color:var(--muted-clr)} .fw-popup-value{font-weight:600} .fw-popup-updated{margin-top:6px;font-size:10px;color:var(--stale-data-clr);text-align:right} .fw-popup--below{transform:translate(-50%,30px)} .fw-popup--below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--list-bg)} /* ---- chart crosshair: the app's hover readout ---------------------- */ .chart-content{position:relative} .chart-plot{position:relative;display:block} .chart-cross{position:absolute;inset:0;opacity:0;transition:opacity .12s ease;pointer-events:none} .chart-content.is-hovered .chart-cross{opacity:1} .chart-cross__line{ position:absolute;top:0;bottom:0;left:var(--cx,50%);width:1px; background:color-mix(in srgb,var(--primary-clr) 55%,transparent); } .chart-cross__dot{ position:absolute;left:var(--cx,50%);top:var(--cy,50%); width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:var(--primary-clr);box-shadow:0 0 0 2px var(--list-bg),0 0 0 4px color-mix(in srgb,var(--primary-clr) 22%,transparent); } /* The bubble rides just above the point it reads, like the app's tooltip. */ .chart-cross__tip{ position:absolute;left:var(--cx,50%);top:var(--cy,50%); transform:translate(10px,calc(-100% - 12px)); display:flex;flex-direction:column;gap:1px; background:var(--list-bg);border:var(--border-thin);border-radius:8px; padding:4px 8px;box-shadow:0 6px 18px rgba(15,23,42,.22); font-family:var(--app-sans);white-space:nowrap; } .chart-cross[data-flip="left"] .chart-cross__tip{transform:translate(calc(-100% - 10px),calc(-100% - 12px))} .chart-cross[data-high="yes"] .chart-cross__tip{transform:translate(10px,12px)} .chart-cross[data-high="yes"][data-flip="left"] .chart-cross__tip{transform:translate(calc(-100% - 10px),12px)} .chart-cross__tip b{font-size:12px;font-weight:700;color:var(--text-clr);font-variant-numeric:tabular-nums} .chart-cross__tip span{font-size:10px;color:var(--muted-clr);font-variant-numeric:tabular-nums} /* ---- the app's own icon font, its collapsed menu, night theme and the topographic backdrop it draws behind everything ------------------ */ .msym{ font-family:"Material Symbols Outlined";font-weight:400;font-style:normal; font-size:24px;line-height:1;letter-spacing:normal;text-transform:none; display:inline-block;white-space:nowrap;direction:ltr;flex:none; -webkit-font-feature-settings:'liga';font-variation-settings:'opsz' 24; } .app-nav a .msym,.flinks a .msym{font-size:22px} .side-brand{position:relative} .nav-collapse-btn{ position:absolute;right:2px;top:50%;transform:translateY(-50%); width:26px;height:26px;display:grid;place-items:center; border:0;border-radius:6px;background:none;color:var(--muted-clr);cursor:pointer; } .nav-collapse-btn:hover{color:var(--text-clr);background:var(--background-clr)} .nav-collapse-btn .msym{font-size:20px;transition:transform .2s ease} .appframe[data-nav="collapsed"] .nav-collapse-btn .msym{transform:rotate(180deg)} /* Collapsed: icons only, the wordmark cropped to its first letter. */ .appframe[data-nav="collapsed"] .app-side{width:64px;min-width:64px} .appframe[data-nav="collapsed"] .app-nav a{justify-content:center;padding-inline:0} .appframe[data-nav="collapsed"] .app-nav a span:not(.msym):not(.nav-badge), .appframe[data-nav="collapsed"] .modetoggle, .appframe[data-nav="collapsed"] .nightsw{display:none} .appframe[data-nav="collapsed"] .side-brand .logo{width:22px} .appframe[data-nav="collapsed"] .nav-collapse-btn{position:static;transform:none;margin-left:auto} .appframe[data-nav="collapsed"] .flinks{flex-direction:column;gap:.35rem} /* The contour pattern the app lays behind the page. (Only .app-main gets a position here: .app-side must keep the absolute drawer rule below 900px.) */ .app-main{position:relative} .app-main::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url(../assets/vector.svg) center / cover no-repeat; opacity:var(--vector-opacity,.03); } .appframe[data-app-theme="dark"] .app-main::before{filter:invert(1) hue-rotate(180deg);--vector-opacity:.06} .appframe[data-app-theme="night"] .app-main::before{filter:invert(1) sepia(1) saturate(6) hue-rotate(-30deg);--vector-opacity:.06} .app-body{position:relative;z-index:1} /* Above the body and above the scroll fade (z-index 2), so the vessel selector's dropdown is not painted over by the cards below it. */ .app-top{position:relative;z-index:3} /* A page that continues below the window fades out at the frame's edge, so a half-visible card row reads as "scroll me", not as a cut-off mockup. */ .appframe[data-more="yes"] .app-main::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:52px;z-index:2;pointer-events:none; background:linear-gradient(to bottom, transparent, var(--background-clr) 88%); } /* Night: the red scotopic theme of the web app. */ .appframe[data-app-theme="night"]{ --primary-clr:#B22222; --primary-rgb:178,34,34; --background-clr:#0D0000; --list-bg:#1A0A0A; --side-bg:#0D0000; --text-clr:#EF4444; --muted-clr:#A89090; --extra-muted-clr:#3A1F1F; --subtle-divider-clr:rgba(239,68,68,.12); --border-thin:1px solid rgba(239,68,68,.14); --warning-clr:#AB5B00; --critical-clr:#C50E0E; --info-clr:#4C1717; --done-clr:#1F6B41; --stale-data-clr:#7A5A5A; --fav-clr:#E06C00; --on-notif:#E0CCCC; --map-sea:#1A0505; --map-sea-deep:#120303; --map-shallow:#240A0A; --map-land:#2A1212; --map-land-edge:#3A1F1F; --map-contour:rgba(239,68,68,.18); --map-grid:rgba(239,68,68,.08); --map-label:#A89090; --map-control:#1A0A0A; --map-road:#3A1F1F; --map-road-edge:#240A0A; --map-urban:#2A1212; --map-pontoon:#4A2626; --track-clr:#EF4444; --fav-clr:#E06C00; color-scheme:dark; } .nightsw button[data-app-theme-set="night"]{color:#B22222} .nightsw button[data-app-theme-set="night"][aria-pressed="true"]{background:rgba(178,34,34,.18);color:#EF4444} /* ---- details page (the app's /details), and the overlay the camera player still uses ------------------------------------------------ */ .details-chart-wrapper{position:relative;margin-top:.8rem} .hrr-status-badge{ position:absolute;top:.5rem;right:.5rem;z-index:10; display:flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:1rem; font-size:.75rem;font-weight:600;pointer-events:none;font-family:var(--app-sans); background:var(--list-bg); } .hrr-status-badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor} .hrr-status-badge.live{color:var(--done-clr)} .hrr-status-badge.paused{color:var(--muted-clr)} .back-btn{ display:inline-flex;align-self:flex-start;width:fit-content; align-items:center;gap:.4rem;margin-top:.7rem; font-family:var(--app-sans);font-size:.85rem;font-weight:600;cursor:pointer; border:0;border-radius:8px;padding:.5rem .9rem;background:var(--primary-clr);color:#fff; } .back-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transform:rotate(180deg)} .chartcard--details .chart-plot{height:clamp(220px,34vh,340px)} .chartcard--details .chart-plot svg{width:100%;height:100%} .chartcard--details .metric-value{font-size:30px} .chart-modal{ position:absolute;inset:0;z-index:40;display:grid;place-items:center; background:rgba(8,17,31,.55);padding:18px; } .chart-modal__panel{ width:min(560px,100%);background:var(--list-bg);border:var(--border-thin); border-radius:14px;box-shadow:0 24px 60px rgba(8,17,31,.45);padding:14px 16px 16px; font-family:var(--app-sans); } .chart-modal__head{display:flex;align-items:flex-start;gap:12px} .chart-modal__head .source-name{font-size:15px;font-weight:600;color:var(--text-clr)} .chart-modal__head .secondline{font-size:12px;color:var(--muted-clr);margin-top:2px} .chart-modal__close{ margin-left:auto;width:28px;height:28px;border:0;border-radius:8px;cursor:pointer; background:var(--background-clr);color:var(--muted-clr);display:grid;place-items:center; } .chart-modal__close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} /* ---- camera overlay and notification detail ------------------------ */ .media-stage{ position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden; background:linear-gradient(140deg,#16202f,#0b111c);display:grid;place-items:center; } .media-stage .glyph{width:52px;height:52px;fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.4} .media-live{ position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px; background:rgba(220,38,38,.92);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:3px 8px;border-radius:5px; } .media-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:recBlink 1.6s ease-in-out infinite} .media-live--clip{background:rgba(15,23,42,.8)} @keyframes recBlink{0%,100%{opacity:1}50%{opacity:.25}} .media-bar{position:absolute;left:10px;right:10px;bottom:10px;height:4px;border-radius:999px;background:rgba(255,255,255,.22)} .media-bar i{display:block;height:100%;width:38%;border-radius:999px;background:var(--primary-clr);animation:clipPlay 9s linear infinite} @keyframes clipPlay{from{width:4%}to{width:100%}} .noti-item{cursor:pointer} .noti-detail{ grid-column:1 / -1;margin:.35rem 0 .2rem 2.4rem;padding:.65rem .8rem; border:var(--border-thin);border-radius:10px;background:var(--background-clr); } .noti-detail__grid{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.78rem} .noti-detail__grid span{color:var(--muted-clr)} .noti-detail__grid b{color:var(--text-clr);font-weight:600} .noti-ack{ margin-top:.6rem;font-family:inherit;font-size:.76rem;font-weight:600;cursor:pointer; border:0;border-radius:7px;padding:.35rem .8rem;background:var(--primary-clr);color:#fff; } .noti-ack[disabled]{background:var(--extra-muted-clr);color:var(--muted-clr);cursor:default} .elec-tag{ margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.06em; padding:2px 6px;border-radius:5px;vertical-align:middle; background:color-mix(in srgb,var(--primary-clr) 12%,transparent);color:var(--primary-clr); } .elec-tag--ac{background:color-mix(in srgb,var(--warning-clr) 16%,transparent);color:var(--warning-clr)} .elec-device+.elec-device{margin-top:1.4rem} /* On a narrow frame the weather popup would hang off the map, so it docks to the bottom edge instead, as the app does on a phone. */ @media (max-width:900px){ .fw-popup,.fw-popup--below{ left:10px;right:10px;top:auto;bottom:10px;transform:none;min-width:0; } .fw-popup::after{display:none} } /* ---- an open HMI panel: the drawing with live readouts on it -------- */ .hmi-stage{ position:relative;margin-top:.9rem;border-radius:var(--list-border-radius); background:var(--background-clr);border:var(--border-thin);overflow:hidden; aspect-ratio:900/420; } .hmi-plan{position:absolute;inset:0;width:100%;height:100%} .hmi-pin{ position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); display:flex;flex-direction:column;gap:2px;align-items:center; background:var(--list-bg);border:var(--border-thin);border-radius:10px; padding:6px 10px;box-shadow:var(--elev-rest);font-family:var(--app-sans); } .hmi-pin::after{ content:"";position:absolute;left:50%;top:100%;width:1px;height:14px; background:var(--primary-clr);opacity:.5; } .hmi-pin__label{font-size:10px;font-weight:600;color:var(--muted-clr);letter-spacing:.02em} .hmi-pin__value{font-size:13px;font-weight:600;color:var(--text-clr);font-variant-numeric:tabular-nums} .hmi-pin__value b{font-size:17px;font-weight:700;margin-right:2px} .hmi-stage__name{ position:absolute;left:12px;top:12px;font-family:var(--app-sans); font-size:12px;font-weight:600;color:var(--muted-clr); } .trip-book-card{cursor:pointer;transition:border-color .15s ease,background .15s ease} .trip-book-card.is-selected{border-color:var(--primary-clr);background:color-mix(in srgb,var(--primary-clr) 6%,var(--list-bg))} /* Below the drawer breakpoint the app has no collapsed rail at all, so the chevron goes away with it. (Appended last: it has to beat the desktop rules further up in this file.) */ @media (max-width:900px){ .appframe .nav-collapse-btn{display:none} }