/* ========================================================================== Preem Team — per-tab background art Each top-level nav tab gets its own backdrop image (docs/assets/backgroundN.png), applied to via a class set by javascripts/backgrounds.js. Source PNGs were full 4K exports (9-16MB each, ~132MB total) shown behind a heavy scrim at background-size: cover -- way more resolution and file weight than that ever needed. Each is downsized to 2560x1440 and re-encoded as WebP (~50-270KB each, ~1.5MB total) via Pillow; see git history for the one-off resize script. Add new tabs' art as backgroundN.webp the same way. ========================================================================== */ body { position: relative; } /* Fixed, full-viewport backdrop layer, dimmed with a scrim so it never fights with foreground text. Sits behind everything (z-index: -1). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(180deg, rgba(10, 10, 18, 0.78), rgba(10, 10, 18, 0.78)), var(--pt-bg-image, none); background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; transition: background-image 0.25s ease; } body.pt-bg-home { --pt-bg-image: url("../assets/background1.webp"); } body.pt-bg-installation { --pt-bg-image: url("../assets/background2.webp"); } body.pt-bg-guides { --pt-bg-image: url("../assets/background3.webp"); } body.pt-bg-config { --pt-bg-image: url("../assets/background12.webp"); } body.pt-bg-changelog { --pt-bg-image: url("../assets/background4.webp"); } body.pt-bg-faq { --pt-bg-image: url("../assets/background5.webp"); } body.pt-bg-showcase { --pt-bg-image: url("../assets/background6.webp"); } body.pt-bg-troubleshooting { --pt-bg-image: url("../assets/background7.webp"); } body.pt-bg-team { --pt-bg-image: url("../assets/background8.webp"); } body.pt-bg-systems { --pt-bg-image: url("../assets/background9.webp"); } body.pt-bg-features { --pt-bg-image: url("../assets/background10.webp"); } body.pt-bg-commands { --pt-bg-image: url("../assets/background11.webp"); } /* Site-wide banner — "PREEM EDITION". bannerfullcroppedpreem.png is pre-cropped to exactly the visible band (1920x155, no skyline/extra content below it needing to be cropped away), so there's no reliance on CSS cropping a taller composite image down to size any more -- that was the previous version's actual bug. Applied to .md-header__inner, NOT .md-header: .md-tabs (the nav bar) turned out to be a CHILD of .md-header, not a sibling below it, so a background on .md-header was being background-size:cover-fit against the COMBINED height of the banner row + tabs row together. The tabs row's height is ~fixed regardless of viewport width while the banner row's height scales with it, so how much of that combined box was "banner" vs. "tabs" shifted unpredictably at different widths -- some resolutions cropped into the lettering, others showed a sliver of whatever sat below it in the source image. Scoping the image to just .md-header__inner makes its sizing math depend only on that row's own box, independent of the tabs row entirely. .md-header__inner normally carries Material's "md-grid" class, which caps its width (~61rem) and centers it -- overridden below to always be full width, so it's never narrower than .md-header itself at any viewport size (that mismatch was the other half of the old bug: an aspect-ratio locked to a width that wasn't actually the image's rendered width). With both width and aspect-ratio now driven off the same box, and the source image's own ratio matching that aspect-ratio exactly, the whole image always displays with no cropping at all. */ .md-header__inner { width: 100%; max-width: none; aspect-ratio: 1920 / 155; padding-top: 0; padding-bottom: 0; background-image: linear-gradient(rgba(10, 10, 18, 0.3), rgba(10, 10, 18, 0.3)), url("../assets/bannerfullcroppedpreem.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* The banner is the branding now — drop the logo, site title, the light/dark toggle, search, and the repo link from the header row, leaving just the tabs bar for navigation. Hidden rather than removed so nothing else that targets these elements breaks. The palette itself is forced to a single dark scheme in mkdocs.yml (no light option, no media-matched auto-detect), so there's nothing left for a toggle to switch between anyway. (Moving search/the repo link down into the tabs bar was tried and dropped — they didn't survive instant navigation reliably.) */ .md-header__inner .md-logo, .md-header__inner .md-header__title, .md-header__inner form[data-md-component="palette"], .md-header__inner .md-search, .md-header__inner .md-header__source, .md-header__inner label[for="__search"] { display: none; } /* Let the page's per-tab art show through the tabs bar underneath; main content column stays fully opaque so reading is never affected. The banner above (.md-header) has no autohide feature enabled, so it stays pinned at the top of the viewport at every resolution -- only this tabs bar collapses out of the way on scroll, per nav-autohide.js. max-height (not display/visibility) is what's animated so the collapse itself is a smooth transition rather than an instant jump, and opacity fades alongside it so the tab links don't sit there visibly squashing before they're fully gone. */ .md-tabs { background-color: rgba(10, 10, 18, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-height: 3rem; opacity: 1; overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; } .md-tabs.pt-tabs-hidden { max-height: 0; opacity: 0; }