/* ============================================================ PREVIEW CHROME The bar at the top of every full-page preview. Deliberately ugly and neutral: it must never be mistaken for part of the design being previewed. Deleted along with this whole folder once Isaac has chosen a direction. ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } img { max-width: 100%; display: block; } /* Only the bar follows you down the page. The honesty strip is read once at the top and then gets out of the way — it is far too tall on a phone to keep pinned. Each design's own sticky nav parks below the bar using --pv-h, which chrome.js measures. Both live directly on : a sticky element can only travel inside its parent's box, so wrapping these in a container made the bar scroll away. */ .pv-bar { position: sticky; top: 0; z-index: 9999; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } .pv-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: 42px; padding: 6px 12px; background: #0B0C0D; color: #C9CDD1; border-bottom: 1px solid #2A2E32; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .pv-tag { background: #E4572E; color: #0B0C0D; font-weight: 700; letter-spacing: 0.16em; padding: 4px 8px; } .pv-title { color: #FFFFFF; } .pv-title b { font-weight: 700; } .pv-bar a { color: #C9CDD1; text-decoration: none; border-bottom: 1px solid #3C4247; } .pv-bar a:hover { color: #FFFFFF; border-bottom-color: #E4572E; } .pv-views { display: flex; gap: 1px; margin-left: auto; } .pv-views button { font: inherit; letter-spacing: 0.08em; text-transform: uppercase; background: #1A1D20; color: #9CA3A9; border: 0; padding: 7px 11px; cursor: pointer; } .pv-views button:hover { color: #FFFFFF; } .pv-views button[aria-current="true"] { background: #E4572E; color: #0B0C0D; font-weight: 700; } .pv-next { white-space: nowrap; } /* honesty strip */ .pv-flag { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; background: #372C11; color: #EBDCAC; border-bottom: 1px solid #574618; padding: 8px 12px; font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; } .pv-flag b { color: #FFFFFF; } .pv-flag a { color: #EBDCAC; } /* embedded-thumbnail mode — see chrome.js */ .pv-bare .pv-bar, .pv-bare .pv-flag { display: none; } /* view switching */ main [data-view] { display: none; } main [data-view].on { display: block; } :focus-visible { outline: 2px solid #E4572E; outline-offset: 2px; } @media (max-width: 620px) { .pv-views { margin-left: 0; width: 100%; } .pv-views button { flex: 1; padding: 8px 4px; } .pv-next { display: none; } }