/* ============================================================================ Plum flyer — a macOS Preview-style window showing the one-pager image. Chrome built from content/plum-flyer.svg: card 601.645x625.567 (r 11.96, #F5F4F0, black hairline) with a 40.35px #E1DFDF title bar. The artwork it originally framed (assets/plum-flyer.jpg, ~square) was replaced 2026-08-10 by two cuts — assets/poster-desktop.jpg (1600x899) and assets/poster-mobile.jpg (900x1315) — so the canvas ratio is now per breakpoint rather than the SVG's single 601.645/575.454. Every selector is prefixed .flyer- / #win-flyer per components/DESIGN.md. ========================================================================== */ #win-flyer { /* Height is driven by the canvas below, not fixed on the window. Pinning the window to the card's 601.645/625.567 ratio looked right but silently cropped the artwork: the title bar is a constant 40px while the card ratio is proportional, so the leftover canvas drifted off the image's own 1654/1582 and object-fit ate ~1.5% of the edges. */ height: auto; /* ---- Geometry helpers: the doc window's own box, mirrored ---- #win-flyer's inline --x/--y/--w in index.html are written in terms of these, so the poster lands 90% the size of #win-doc and CENTRED on it — which, with z-index 25 against the doc's 30, is what keeps it completely hidden behind the doc at boot. Mirrored rather than read off #win-doc, because --x/--y/--w are per-window custom props and js/main.js rewrites them in PIXELS on the first drag: a cross-window var() would silently start tracking wherever the doc was last dropped. Keep these four in step with #win-doc's inline style and its height rule in doc-editor.css. */ --fl-doc-x: max(12vw, 128px); --fl-doc-w: calc(100vw - var(--fl-doc-x) - 4vw); --fl-doc-h: min(80vh, var(--desk-band)); --fl-doc-y: calc( var(--topbar-bottom) + (var(--nav-gap) - var(--fl-doc-h)) / 2 ); /* The width 90% of the doc's HEIGHT allows. The poster has to be 90% in both dimensions, not just width: 90% of the width alone leaves it taller than the doc on a wide screen, and a poster that outgrows its cover in one dimension shows a band of itself along that edge. The canvas ratio is fixed, so the only way the window gets shorter is by getting narrower — hence a width. It also keeps the window clear of the dock at 1920x900, the common external monitor, which 90% of a very wide doc overshoots. Height for a given width is 42px of fixed chrome (40px title bar + 2px borders) plus a canvas that scales with the width TWICE over: 899/1600 of it for the artwork, and another 1.56% for .flyer-chrome's proportional padding-bottom. Hence 899 + .0156*1600 = 923.96 as the divisor rather than 899 — the bare ratio undershot the real height by ~19px. --fl-h inverts the same relation to get the height back out of whichever width won, which is what lets --y centre exactly. Keep both in step with the rules below. */ --fl-w-cap: calc((0.9 * var(--fl-doc-h) - 42px) * 1600 / 923.96); --fl-h: calc(42px + var(--w) * 923.96 / 1600); cursor: default; /* only the title bar drags */ touch-action: auto; } .flyer-chrome { --flyer-line: #000000; --flyer-card: #F5F4F0; --flyer-bar: #E1DFDF; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--flyer-card); border: 1px solid var(--flyer-line); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* The SVG card leaves ~9.8 of 625.567 as card fill below the artwork */ padding-bottom: 1.56%; } /* --- Title bar --- */ .flyer-titlebar { display: flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 12px; background: var(--flyer-bar); cursor: grab; } .flyer-chrome .flyer-titlebar:active { cursor: grabbing; } .flyer-lights { display: flex; gap: 6px; flex: none; } .flyer-lights i { display: block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--flyer-line); } .flyer-lights i:nth-child(1) { background: #FF8875; } .flyer-lights i:nth-child(2) { background: #FFE78E; } .flyer-lights i:nth-child(3) { background: #94E9BC; } .flyer-name { flex: 1; font-size: 12.5px; font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Balances the traffic lights so the filename reads as left-aligned copy rather than drifting under them at narrow widths. */ .flyer-spacer { width: 45px; flex: none; } /* --- Image canvas --- The canvas carries the artwork's own ratio so nothing is ever cropped or letterboxed. Desktop serves the landscape cut (assets/poster-desktop.jpg, 1413x1061); the phone cut is portrait and flips this ratio in the mobile block at the bottom of this file, at the same 767px the source in index.html switches on. Keep the two in step. */ .flyer-canvas { flex: none; aspect-ratio: 1600 / 899; overflow: hidden; background: #2B0D12; /* the poster's own field, so any rounding gap on a fractional viewport reads as artwork, not a seam */ cursor: pointer; /* clicking the poster opens the Talk form (data-talk-form) */ } .flyer-canvas picture { display: contents; } .flyer-canvas img { display: block; width: 100%; height: 100%; object-fit: cover; /* aspects match, so this is a no-op guard */ user-select: none; -webkit-user-drag: none; } /* ============================================================================ Mobile (<=767px) — css/mobile.css already forces #win-flyer full-screen (fixed, top/left/right/bottom, height:auto stretched to fill). The fixed- aspect card would otherwise sit pinned to the top with dead space below; center it vertically so it reads like a photo viewer. ========================================================================== */ @media (max-width: 767px) { /* :not(.is-hidden) matters here: an ID selector's specificity beats `.window.is-hidden { display: none }` (style.css) regardless of class count, so a bare "#win-flyer { display:flex }" would force the window visible even while closed. Excluding .is-hidden makes this rule not match at all in that case, leaving the hidden rule to apply normally. */ #win-flyer:not(.is-hidden) { /* The desktop max-width caps a poster sized to 90% of the doc window; on a phone the window is full-screen and that cap has nothing to do. It does not bind at any plausible phone size, but a silently-narrowed full-screen viewer is a bad way to find that out, so drop it outright. */ max-width: none; display: flex; flex-direction: column; justify-content: center; /* Centering accounts for the dock's peeking band at the bottom. */ padding-bottom: var(--m-bottom-inset); /* Every other full-screen mobile window relies on being an OPAQUE layer so the platform's multi-window stacking (z-order decides what shows) reads cleanly. Centering this one's fixed-aspect card leaves empty flex space above/below it — without a background here, the window underneath bleeds through that gap. */ background: var(--os-chrome, #F5F4F0); } .flyer-chrome { /* Keep its own intrinsic (aspect-ratio driven) size instead of stretching to fill the flex parent's height. */ flex: none; border-radius: 0; /* edge-to-edge app family look, no floating card */ } /* Balanced the now-hidden traffic-light cluster on desktop. */ .flyer-spacer { display: none; } /* The portrait cut (assets/poster-mobile.jpg, 900x1315). Must switch at the same 767px as the source in index.html, or the canvas would hold the landscape ratio while showing the portrait file and object-fit: cover would crop it hard. */ .flyer-canvas { aspect-ratio: 900 / 1315; } /* A 792x1409 poster is far taller than it is wide, so at full width it overflows a phone screen. Cap it to the viewport and let the image letter- box inside instead of scrolling off — contain rather than cover, since showing the whole one-pager matters more than filling the frame. */ .flyer-canvas { max-height: calc(100dvh - var(--m-status-h, 44px) - var(--m-app-bottom, 90px) - 16px); } .flyer-canvas img { object-fit: contain; } }