html {
scrollbar-gutter: stable;
}
/* --- Brand colors (palette uses primary/accent: custom; set per color scheme) --- */
[data-md-color-scheme="default"] {
--md-primary-fg-color: #1D3556; /* Ocean blue */
--md-primary-fg-color--light: #2c4a72;
--md-primary-fg-color--dark: #14253b;
--md-accent-fg-color: #1F744D; /* Signal green — WCAG-AA on white (was #2B9C6A, 3.46:1) */
}
[data-md-color-scheme="slate"] {
--md-primary-fg-color: #1D3556; /* keep ocean-blue header + tabs in dark mode */
--md-primary-fg-color--light: #2c4a72;
--md-primary-fg-color--dark: #14253b;
--md-accent-fg-color: #4BEF8F; /* Signal green (light) — readable on dark */
--md-default-bg-color: #222; /* darker page background (was slate blue-grey) */
}
.md-header {
height: auto;
min-height: 3.7rem;
background-color: #1d3556;
}
.md-header__inner {
height: 3.7rem;
}
/* Clear the taller branded header. Keep the gap within the theme's TOC
activation threshold so the heading we land on is also the active section. */
@media screen {
.md-typeset [id] {
scroll-margin-top: 4.6rem;
}
}
/* On scroll the theme adds a drop-shadow under the fixed header (.md-header--shadow). With the
pinned section tabs sitting directly below, that shadow reads as a dark line between the logo
row and the tab bar. Drop it so the header and tabs stay one flush ocean-blue band. */
.md-header--shadow {
box-shadow: none;
}
/* Always show heading permalinks */
.md-typeset .headerlink {
opacity: 1;
visibility: visible;
margin-left: 0.3em;
cursor: pointer;
}
.md-flex{
margin-top: 1rem;
}
.md-header-nav {
padding-top: 1rem;
}
.md-header__button.md-logo img {
height:3.0rem;
width:auto;
}
/* The logo (waterlinked_logo_norbit.svg) is already the "Water Linked" wordmark. Where the logo
shows, the site-name text beside it doubles "Water Linked", so show only "Documentation"
instead — header reads "WaterLinked Documentation" (clearly a docs site, no doubling).
site_name stays "Water Linked Documentation" for the page /search; the page title
still slides into the header on scroll (that topic carries data-md-component="header-topic").
Scoped to ≥76.25em because Material hides the wordmark logo below that — on mobile/tablet
there's no logo, so the full "Water Linked Documentation" text should remain. */
@media screen and (min-width: 76.25em) {
.md-header__title .md-header__topic:not([data-md-component]) .md-ellipsis {
position: relative;
color: transparent;
}
.md-header__title .md-header__topic:not([data-md-component]) .md-ellipsis::after {
content: "Documentation";
position: absolute;
left: 0;
top: 0;
color: #fff;
}
}
.responsive-video {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.grid{
display: flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -.4rem;
margin-right: -.4rem;
}
/* Buttons: filled dark green with white text — WCAG-AA (white on #1F744D = 5.73:1). The
old #2B9C6A gave only ~3.5:1 (a plain button renders the theme's blue text on the green;
a primary button, white on #2B9C6A). Hover darkens and keeps white-on-green in BOTH
schemes — the theme's default hover pulls --md-accent-fg-color, which in dark mode is the
bright #4BEF8F and would drop the text contrast. */
.md-typeset .md-button {
background-color: #1F744D;
border-color: #1F744D;
color: #fff;
}
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
background-color: #15583A;
border-color: #15583A;
color: #fff;
}
/* Green for content links — scoped to typeset content so it doesn't tint nav/tab labels.
#1F744D is a WCAG-AA dark green on the white page (the old #2B9C6A was only 3.46:1). */
.md-typeset a {
color: #1F744D;
}
/* Brighter green for content links in dark mode (readable on the dark background) */
[data-md-color-scheme="slate"] .md-typeset a {
color: #4BEF8F;
}
/* --- Headings -----------------------------------------------------------------------
The theme colours headings with an alpha'd foreground variable, so they render
semi-transparent and low-contrast. Pin them to solid, WCAG-AA colours and add a little
weight so they no longer read as too light. */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
color: #1D3556;
font-weight: 500;
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
color: #fff;
font-weight: 500;
}
/* Wire-colour / LED swatches — drawn in CSS instead of emoji so they look pixel-identical
on every OS & browser. Emoji such as ⬜/⚪ are rendered by each device's own emoji font
(white/silver ones can look pink or oddly bordered on some platforms); these boxes don't
depend on that font. Used in the wiring tables of the DVL, Sonar 3D-15, Modem M16/M64, Locator and underwater-gps pages. Squares = wire colours, circles = LEDs. */
.swatch {
display: inline-block;
width: .85em;
height: .85em;
border: 1px solid rgba(0, 0, 0, .4);
border-radius: 3px;
vertical-align: -.1em;
}
.swatch-round { border-radius: 50%; }
[data-md-color-scheme="slate"] .swatch { border-color: rgba(255, 255, 255, .5); }
.c-black { background: #1a1a1a; }
.c-red { background: #d32f2f; }
.c-green { background: #2e7d32; }
.c-orange { background: #ef6c00; }
.c-brown { background: #5d4037; }
.c-silver { background: #c0c0c0; }
.c-white { background: #fff; }
.c-blue { background: #1565c0; }
.c-yellow { background: #fdd835; }
.c-ledon { background: #2ecc40; }
.c-ledoff { background: #3a3a3a; }
.c-green-white { background: linear-gradient(90deg, #2e7d32 50%, #fff 50%); }
.c-orange-white { background: linear-gradient(90deg, #ef6c00 50%, #fff 50%); }
.c-brown-white { background: linear-gradient(90deg, #5d4037 50%, #fff 50%); }
.c-blue-white { background: linear-gradient(90deg, #1565c0 50%, #fff 50%); }
/* --- Animated LED indicators ---------------------------------------------------------
Visualise how a status LED behaves (solid, blinking, breathing) next to its written
description. Pure CSS, no JavaScript. Usage in Markdown:
<span class="led led--blink" role="img" aria-label="LED flashing once per second"></span>
Modifiers: led--off, led--on, led--blink (1 Hz), led--blink-slow, led--blink-fast, led--breathe.
Timings are illustrative, not exact firmware values. Used in underwater-gps/locators/locator-u1.md
and underwater-gps/interface/ugps-led.md. Under prefers-reduced-motion the animations stop and
each pattern is shown as a static half-lit LED with a dashed ring, so the text carries the meaning. */
.md-typeset .led {
--led-on: #2ecc40;
--led-off: #3a3a3a;
--led-glow: 0 0 .35em .1em rgba(46, 204, 64, .75);
display: inline-block;
width: .9rem;
height: .9rem;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .45);
background: var(--led-off);
vertical-align: middle;
}
[data-md-color-scheme="slate"] .md-typeset .led { border-color: rgba(255, 255, 255, .5); }
.md-typeset .led--on { background: var(--led-on); box-shadow: var(--led-glow); }
.md-typeset .led--blink { animation: led-blink 1s steps(1, end) infinite; }
.md-typeset .led--blink-slow { animation: led-blink 2.5s steps(1, end) infinite; }
.md-typeset .led--blink-fast { animation: led-blink .25s steps(1, end) infinite; }
.md-typeset .led--breathe { animation: led-breathe 3s ease-in-out infinite; }
@keyframes led-blink {
0% { background: var(--led-on); box-shadow: var(--led-glow); }
50% { background: var(--led-off); box-shadow: none; }
}
@keyframes led-breathe {
0%, 100% { background: var(--led-off); box-shadow: none; }
50% { background: var(--led-on); box-shadow: var(--led-glow); }
}
@media (prefers-reduced-motion: reduce) {
.md-typeset .led--blink,
.md-typeset .led--blink-slow,
.md-typeset .led--blink-fast,
.md-typeset .led--breathe {
animation: none;
background: linear-gradient(90deg, var(--led-on) 50%, var(--led-off) 50%);
outline: 1px dashed currentColor;
outline-offset: 2px;
}
}
/* Static timing strip shown next to an animated LED: 3 seconds of the pattern drawn as a bar
(green = on, dark = off), so patterns can be compared at a glance, in print, and with reduced
motion. Decorative: mark it aria-hidden, the LED span carries the accessible label.
<span class="led-wave led-wave--blink" aria-hidden="true"></span>
Scale: the strip is 4.5rem wide = 3 s, so 1 s = 1.5rem. */
.md-typeset .led-wave {
--led-on: #2ecc40;
--led-off: #3a3a3a;
display: inline-block;
width: 4.5rem;
height: .5rem;
margin-left: .4rem;
border-radius: .15rem;
border: 1px solid rgba(0, 0, 0, .45);
background: var(--led-off);
vertical-align: middle;
}
[data-md-color-scheme="slate"] .md-typeset .led-wave { border-color: rgba(255, 255, 255, .5); }
.md-typeset .led-wave--on { background: var(--led-on); }
.md-typeset .led-wave--blink { background: repeating-linear-gradient(90deg, var(--led-on) 0 .75rem, var(--led-off) .75rem 1.5rem); }
.md-typeset .led-wave--blink-slow { background: repeating-linear-gradient(90deg, var(--led-on) 0 1.875rem, var(--led-off) 1.875rem 3.75rem); }
.md-typeset .led-wave--blink-fast { background: repeating-linear-gradient(90deg, var(--led-on) 0 .1875rem, var(--led-off) .1875rem .375rem); }
.md-typeset .led-wave--breathe { background: repeating-linear-gradient(90deg, var(--led-off) 0, var(--led-on) 2.25rem, var(--led-off) 4.5rem); }
/* Keep the LED column of indicator tables narrow and centred. */
.md-typeset table td:has(> .led-wave) { white-space: nowrap; }
/* In dark mode, paint a white backing behind content images so any transparent PNG with
dark content (line art, diagrams) stays legible on the dark page; for the many photos and
screenshots that already have an opaque white background baked in, it's a no-op.
This is a COLOUR-only change: no padding, border, or size, so the image box is identical
in light and dark and toggling the theme never shifts layout or resizes imagery. (An
earlier version added .35rem padding + rounded corners in dark mode only, which grew every
image and boxed inline icons, shifting content on toggle.) */
[data-md-color-scheme="slate"] .md-typeset img {
background-color: #fff;
}
/* Opt-out for self-coloured icons (e.g. a green help badge) that are already legible on the
dark page: the white backing would box them in a jarring white square. Tag such an image
with `{ .no-card }` in the Markdown. */
[data-md-color-scheme="slate"] .md-typeset img.no-card {
background-color: transparent;
}
/* Sticky tabs live inside the header using navigation.tabs.sticky, so the theme
measures the full navigation height for its sidebars and active TOC section. */
@media screen and (min-width: 76.25em) {
.md-typeset [id] {
scroll-margin-top: 7rem;
}
}
/* --- Active page / link colour --------------------------------------------------- */
/* The active page in the left navigation is a content-side link, so it follows the green
link colours: a WCAG-AA dark green on the light sidebar, brighter green on dark. */
.md-nav .md-nav__link--active,
.md-nav__link--active,
.md-nav .md-nav__link.is-active {
color: #1F744D !important;
font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav .md-nav__link.is-active {
color: #4BEF8F !important;
}
/* Main menu (ocean-blue header + section tabs). Its background stays ocean blue in both
colour schemes, so the active item uses one colour for both modes: a bright green that
keeps high contrast on the blue band. */
.md-header-nav .md-nav__link--active,
.md-header-nav .md-nav__link.is-active,
.md-tabs__item--active .md-tabs__link {
color: #4BEF8F !important;
opacity: 1;
}
/* Tab hover/focus brightens to white (the non-active affordance on the blue band). */
.md-tabs__link:focus,
.md-tabs__link:hover {
color: #ffffff !important;
opacity: 1;
}
/* --- "Download PDF" button (overrides/partials/pdf-download.html) ------------------
Shown at the top right of every page; links to the PDF manual of the current product,
which is built by scripts/build_pdf.py. Ocean blue with the signal-green PDF icon, so it
stands out without competing with the page title. Hidden when printing. */
.md-typeset .pdf-download {
float: right;
display: flex;
gap: .4rem;
align-items: stretch;
margin: 0 0 1rem 1rem;
}
.md-typeset .pdf-download__button,
.md-typeset .pdf-download__print {
display: inline-flex;
align-items: center;
gap: .45rem;
border-radius: .4rem;
font-size: .7rem;
line-height: 1.2;
cursor: pointer;
transition: background-color 125ms, border-color 125ms, box-shadow 125ms;
}
.md-typeset .pdf-download__button {
padding: .45rem .8rem .45rem .6rem;
background: #1D3556;
border: 1px solid #1D3556;
color: #fff;
box-shadow: 0 .1rem .35rem rgba(29, 53, 86, .25);
}
.md-typeset .pdf-download__button .twemoji svg { width: 1.4rem; height: 1.4rem; fill: #4BEF8F; }
.md-typeset .pdf-download__text { display: flex; flex-direction: column; }
.md-typeset .pdf-download__text small { font-size: .6rem; opacity: .8; }
.md-typeset .pdf-download__button:hover,
.md-typeset .pdf-download__button:focus-visible {
background: #2c4a72;
border-color: #4BEF8F;
color: #fff;
}
.md-typeset .pdf-download__print {
padding: .45rem .7rem;
background: transparent;
border: 1px solid rgba(29, 53, 86, .35);
color: #1D3556;
font-family: inherit;
}
.md-typeset .pdf-download__print .twemoji svg { width: 1rem; height: 1rem; fill: currentColor; }
.md-typeset .pdf-download__print:hover,
.md-typeset .pdf-download__print:focus-visible { border-color: #1F744D; color: #1F744D; }
[data-md-color-scheme="slate"] .md-typeset .pdf-download__button,
[data-md-color-scheme="slate"] .md-typeset .pdf-download__chip { color: #fff; }
[data-md-color-scheme="slate"] .md-typeset .pdf-download__button { border-color: #4BEF8F; box-shadow: none; }
[data-md-color-scheme="slate"] .md-typeset .pdf-download__print { color: #fff; border-color: rgba(255, 255, 255, .45); }
[data-md-color-scheme="slate"] .md-typeset .pdf-download__print:hover { color: #4BEF8F; border-color: #4BEF8F; }
/* Home page: a row with one download chip per product. */
.md-typeset .pdf-download--home {
float: none;
display: block;
margin: 2rem 0 0;
padding: .9rem 1.1rem 1.1rem;
border: 1px solid rgba(29, 53, 86, .2);
border-left: .25rem solid #1F744D;
border-radius: .4rem;
}
.md-typeset .pdf-download__heading { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #1D3556; }
.md-typeset .pdf-download__heading .twemoji svg { width: 1.3rem; height: 1.3rem; fill: #1F744D; }
.md-typeset .pdf-download--home p { margin: .3rem 0 .7rem; }
.md-typeset .pdf-download__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-typeset .pdf-download__chip {
display: inline-flex; align-items: center; gap: .35rem;
padding: .35rem .75rem; border-radius: 1rem;
background: #1D3556; color: #fff; font-size: .7rem;
}
.md-typeset .pdf-download__chip .twemoji svg { width: .9rem; height: .9rem; fill: #4BEF8F; }
.md-typeset .pdf-download__chip:hover, .md-typeset .pdf-download__chip:focus-visible { background: #2c4a72; color: #fff; }
[data-md-color-scheme="slate"] .md-typeset .pdf-download__heading { color: #fff; }
[data-md-color-scheme="slate"] .md-typeset .pdf-download__heading .twemoji svg { fill: #4BEF8F; }
[data-md-color-scheme="slate"] .md-typeset .pdf-download--home { border-color: rgba(255, 255, 255, .2); border-left-color: #4BEF8F; }
/* Small screens: full-width buttons above the title instead of floating beside it. */
@media screen and (max-width: 44.9375em) {
.md-typeset .pdf-download { float: none; margin: 0 0 1rem; }
.md-typeset .pdf-download__button { flex: 1; }
.md-typeset .pdf-download__print { display: none; } /* printing from a phone is rare */
}
@media print {
.md-typeset .pdf-download { display: none; }
}