/* The strip every jeep build carries: which model wrote it, when, and the way back. A build is otherwise the page its maker published, so the strip keeps to its own em- names. No script and nothing stored: folding it is a checkbox, and it comes back on reload. The build is moved down rather than covered. Transforming makes it the containing block for everything inside it, so a heads-up display pinned to the top of the viewport lands under the strip instead of behind it, and one pinned to the bottom — touch controls, usually — still sits on the bottom edge, because the body is given the height the strip leaves. What a build sizes to the full window overflows that by the strip's height and is clipped at the bottom, which costs a sliver of sky and no controls. Folding the strip away puts all of it back. */ :root { --em-h: 28px; } /* These win over the build's own rules, which often set the same properties on the same elements. A body that clips its overflow would also clip the strip, now that the strip is one of its fixed children standing above it, so the clipping moves up to , where it keeps the window still. */ html { overflow: hidden !important; } body { transform: translateY(var(--em-h)) !important; height: calc(100vh - var(--em-h)) !important; height: calc(100dvh - var(--em-h)) !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; box-sizing: border-box; } /* A build whose touch controls hang from a box the height of the whole window would lose their bottom edge to the move, so on a touch screen that build is left where it is and the strip lies over its top instead. The build step marks it; tools/audit/check.js measures that it needs it. */ @media (pointer: coarse) { html:has(#em-hide.em-keep-touch) { overflow: visible !important; } body:has(#em-hide.em-keep-touch) { transform: none !important; height: auto !important; min-height: 100vh !important; } body:has(#em-hide.em-keep-touch) .em-bar, body:has(#em-hide.em-keep-touch) .em-show { top: 0; } } /* Folded: the build gets the whole window back, and only the tab stays. */ html:has(#em-hide:checked) { overflow: visible !important; } body:has(#em-hide:checked) { transform: none !important; height: auto !important; min-height: 100vh !important; } .em-bar, .em-bar *, .em-show { box-sizing: border-box; } .em-bar, .em-show { font: 500 13px/1.35 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } #em-hide { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The strip itself is a fixed child of the moved body, so it is pulled back up by the same height and ends up on the top edge of the window. */ .em-bar { position: fixed; top: calc(-1 * var(--em-h)); left: 0; right: 0; z-index: 2147483646; display: flex; align-items: center; gap: .55em; overflow: hidden; height: var(--em-h); padding: 0 .75em; color: #e9eff4; background: #0c1116; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: transform .18s ease; } body:has(#em-hide:checked) .em-bar { top: 0; } .em-bar a { color: #a8d6ff; text-decoration: none; white-space: nowrap; } .em-bar a:hover, .em-bar a:focus-visible, .em-show:focus-visible { text-decoration: underline; } .em-bar b { color: #fff; font-weight: 650; white-space: nowrap; } .em-sep { opacity: .35; } .em-detail, .em-date { opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-detail { min-width: 0; } .em-links { margin-left: auto; display: flex; align-items: center; gap: .9em; } .em-toggle, .em-show { cursor: pointer; opacity: .62; } .em-toggle:hover, .em-show:hover { opacity: 1; } .em-show { position: fixed; top: calc(-1 * var(--em-h)); left: 50%; transform: translateX(-50%); z-index: 2147483647; display: none; padding: .12em .85em .22em; color: #e9eff4; background: rgba(12, 17, 22, .9); border-radius: 0 0 .5em .5em; } #em-hide:checked ~ .em-bar { transform: translateY(-101%); } #em-hide:checked ~ .em-show { display: block; top: 0; } @media (max-width: 760px) { .em-bar { font-size: 12px; gap: .45em; } .em-detail { display: none; } } @media (max-width: 520px) { .em-date, .em-atlas { display: none; } } @media print { .em-bar, .em-show { display: none; } }