:root { color-scheme: light dark; --lp-body-bg: #9db6cc; --lp-surface-bg: #eeeeee; --lp-card-bg: #ffffff; --lp-contrast-bg: #2f3a44; --lp-contrast-text: #f4f7fb; --lp-text-color: #1f2a33; --lp-link-color: #0f4c81; --lp-link-hover-color: #0c70d3; --lp-border-color: #d7dde5; --lp-nav-bg: rgba(255, 255, 255, 0.92); --lp-nav-bg-scrolled: rgba(242, 244, 247, 0.98); --lp-hover-bg: rgba(0, 0, 0, 0.05); --lp-accent-color: #7b7b7b; --lp-sub-row-bg: #f9f9f9; --lp-nav-top-text: #1f2a33; --lp-nav-scrolled-text: #1f2a33; --lp-main-services-bg: var(--lp-contrast-bg); --lp-main-services-text: var(--lp-contrast-text); --lp-main-services-hover-bg: rgba(255, 255, 255, 0.08); --lp-main-services-hover-text: var(--lp-contrast-text); } @media (prefers-color-scheme: dark) { :root { --lp-body-bg: #141c28; --lp-surface-bg: #1b2534; --lp-card-bg: #223044; --lp-contrast-bg: #2b3d54; --lp-contrast-text: #f2f6fb; --lp-text-color: #d9e2ee; --lp-link-color: #8fb9f4; --lp-link-hover-color: #c0dcff; --lp-border-color: #2f3d4f; --lp-nav-bg: rgba(20, 28, 40, 0.9); --lp-nav-bg-scrolled: rgba(27, 37, 52, 0.95); --lp-hover-bg: rgba(255, 255, 255, 0.06); --lp-accent-color: #4b7bb8; --lp-sub-row-bg: #243248; --lp-nav-top-text: #0c0c0c; --lp-nav-scrolled-text: #d6deea; --lp-main-services-bg: #f4f6fb; --lp-main-services-text: #1f2a33; --lp-main-services-hover-bg: rgba(31, 42, 51, 0.08); --lp-main-services-hover-text: #0f4c81; } } body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;} body, html { background: var(--lp-body-bg); height: 100%; color: var(--lp-text-color); line-height: 1.8; } /* The fixed parallax layers (parallax.js) sit at z-index:-1, so the page's * base colour lives on and is transparent -- otherwise an opaque * body background would hide them. */ body { background: transparent; } a { color: var(--lp-link-color); } a:hover { color: var(--lp-link-hover-color); } .no-underline { text-decoration: none; } .lp-navbar { background-color: transparent; border-bottom: none; color: var(--lp-nav-top-text); transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .lp-navbar-scrolled { background-color: var(--lp-nav-bg-scrolled); border-bottom: 1px solid var(--lp-border-color); backdrop-filter: blur(6px); color: var(--lp-nav-scrolled-text); } #myNavbar { color: var(--lp-nav-top-text) !important; } #myNavbar .w3-button { color: var(--lp-nav-top-text) !important; } #myNavbar .w3-button:hover { color: var(--lp-nav-top-text) !important; background-color: var(--lp-hover-bg) !important; } #myNavbar.lp-navbar-scrolled { color: var(--lp-nav-scrolled-text) !important; } #myNavbar.lp-navbar-scrolled .w3-button { color: var(--lp-nav-scrolled-text) !important; } #myNavbar.lp-navbar-scrolled .w3-button:hover { color: var(--lp-nav-scrolled-text) !important; background-color: var(--lp-hover-bg) !important; } .lp-mobile-menu { background-color: var(--lp-card-bg) !important; color: var(--lp-text-color); border: 1px solid var(--lp-border-color); } .lp-mobile-menu .w3-button { color: var(--lp-text-color); } .lp-mobile-menu .w3-button:hover { background-color: var(--lp-hover-bg); } .lp-section { background-color: var(--lp-surface-bg); color: var(--lp-text-color); } .lp-section__content { background-color: var(--lp-surface-bg); color: var(--lp-text-color); } .w3-white { background-color: var(--lp-card-bg) !important; color: var(--lp-text-color) !important; } .w3-light-grey { background-color: var(--lp-surface-bg) !important; color: var(--lp-text-color) !important; } .w3-dark-grey { background-color: var(--lp-contrast-bg) !important; color: var(--lp-contrast-text) !important; } .w3-dark-grey a { color: var(--lp-contrast-text); } .w3-dark-grey a:hover { color: var(--lp-link-hover-color); } /* Project cards (Apps section). */ .lp-card-link { display: block; text-decoration: none; color: inherit; } .lp-card { background-color: var(--lp-card-bg); color: var(--lp-text-color); border: 1px solid var(--lp-border-color); border-radius: 12px; padding: 32px 24px; height: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; } .lp-card-link:hover .lp-card { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); border-color: var(--lp-link-hover-color); } .lp-card .fa { color: var(--lp-link-color); } .lp-card h3 { margin: 16px 0 8px; } /* Pin the call-to-action to the bottom edge so every card in a row ends * level regardless of copy length. */ .lp-card .w3-button { margin-top: auto; align-self: center; } /* Equal-height card grids. `auto-fit` + `min()` keeps them responsive without * the ragged wrapping w3-col floats produce when cards differ in height. */ .lp-card-grid { display: grid; gap: 24px; align-items: stretch; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } .lp-card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } .lp-card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } /* Icon + title header row for list cards. */ .lp-card__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--lp-border-color); } .lp-card__head .fa { font-size: 1.4em; } .lp-card__head h3 { margin: 0; font-size: 20px; } /* Link lists inside cards. */ .lp-link-list { list-style: none; margin: 4px 0 0; padding: 0; text-align: left; } .lp-link-list li { border-bottom: 1px solid var(--lp-border-color); } .lp-link-list li:last-child { border-bottom: none; } .lp-link-list a { display: block; position: relative; padding: 10px 4px 10px 22px; text-decoration: none; } .lp-link-list a::before { content: "\203A"; position: absolute; left: 6px; color: var(--lp-accent-color); } .lp-link-list a:hover { background-color: var(--lp-hover-bg); } /* Wide how-to card (e.g. the Signal K guide). */ .lp-howto { max-width: 860px; margin: 32px auto 0; } .lp-howto__ref { border-top: 1px solid var(--lp-border-color); padding-top: 16px; } /* Numbered how-to steps with a connector line between the badges. */ .lp-steps { list-style: none; counter-reset: lp-step; margin: 24px 0; padding: 0; } .lp-steps li { counter-increment: lp-step; position: relative; padding: 0 0 24px 56px; } .lp-steps li:last-child { padding-bottom: 8px; } .lp-steps li::before { content: counter(lp-step); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background-color: var(--lp-contrast-bg); color: var(--lp-contrast-text); font-weight: 700; text-align: center; line-height: 36px; } .lp-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background-color: var(--lp-border-color); } /* Create a Parallax Effect. * `background-attachment: fixed` is kept as a no-JS fallback (desktop only). * When parallax.js runs it injects a real `position: fixed` `.lp-parallax-bg` * layer per section, reproducing the fixed effect on every browser incl. iOS. */ .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7 { position: relative; background-attachment: fixed; background-position: left; background-repeat: no-repeat; background-size: cover; } /* JS-injected background layer. It is genuinely `position: fixed`, so the * compositor pins it to the viewport with no per-frame JavaScript -- the image * cannot jitter. It sits at z-index:-1 (above the page background, behind all * content), so the opaque page sections naturally mask it to each band's * window as they scroll. JS only updates `clip-path` to keep one image from * showing through a different band's window. */ .lp-parallax-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-size: cover; pointer-events: none; z-index: -1; } /* First image (Logo. Full viewport height on every device). * `vh` is the fallback; `dvh` tracks the visible area as mobile browser * toolbars show/hide, so iOS/iPadOS get a true full-height hero. */ .bgimg-1 { background-image: url('../img/IMG_0856.jpeg'); min-height: 100vh; min-height: 100dvh; background-position: center; } /* Second image (Apps banner) */ .bgimg-2 { background-image: url('../img/_DSC7250.jpg'); min-height: 400px; } /* Third image (Underway banner) */ .bgimg-3 { background-image: url('../img/slider-bg.jpg'); min-height: 400px; } /* Fourth image (spare) */ .bgimg-4 { background-image: url('../img/_DSC9696.jpg'); min-height: 400px; } /* Fifth image (spare) */ .bgimg-5 { background-image: url('../img/IMG_1161.jpeg'); min-height: 400px; } /* Sixth image (Resources: HOW-TO banner — yacht at anchor) */ .bgimg-6 { background-image: url('../img/DJI_0381.jpg'); min-height: 400px; background-position: center; } /* Seventh image (Resources: 3D printing banner — sunset coastline) */ .bgimg-7 { background-image: url('../img/DJI_0654.jpg'); min-height: 400px; background-position: center; } .w3-wide {letter-spacing: 10px;} .w3-hover-opacity {cursor: pointer;} /* Turn off parallax scrolling for tablets and phones (no-JS fallback). * The hero (bgimg-1) keeps its full-viewport height; only the banner * sections collapse to 400px. */ @media only screen and (max-device-width: 1000px) { .bgimg-1 { background-attachment: scroll; } .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7 { background-attachment: scroll; min-height: 400px; } }