/* ============================================================================ LinkkWinkk — demo app shell Real app, not screenshots. Full viewport, no phone chrome, safe-area aware. Depends on ../system/linkkwinkk.css for tokens + components. ========================================================================== */ html,body{height:100%;overflow:hidden;background:var(--paper);overscroll-behavior:none} body{position:fixed;inset:0;-webkit-user-select:none;user-select:none} /* Pinch-zoom. The shell is fixed to the *layout* viewport, which does not move when iOS zooms — so at scale > 1 the UI renders outside the visible rect and the drag that would pan it is taken by .vscroll instead. The app then looks frozen and clipped on both edges, which is what the 9 Sep recording shows. Transforming body makes every fixed descendant resolve against it, so the whole shell tracks the visual viewport and simply reflows narrower. */ body.vv{inset:auto;left:0;top:0;width:var(--vvw);height:var(--vvh); transform:translate(var(--vvx),var(--vvy));transform-origin:0 0} /* Narrow viewports. Nothing here was ever designed below 320px, because no phone is — but a zoomed page is: at scale 2.2 the shell above becomes a 177px viewport, and the pass card's headline ran out of its own box while the two stat columns overlapped. Zoom is meant to make type bigger, so this trims the display sizes rather than the body: the reader still nets a large gain and the layout survives. `.inp` keeps its 16px floor through the `max()` in the fields block below, so shrinking `--t-l` cannot reintroduce iOS focus-zoom. Two selectors, because a media query cannot see this. `max-width` is measured against the *layout* viewport, which does not change when the page is zoomed — so the media query alone would never fire on the case it was written for. `body.narrow` is set from `visualViewport.width` in app.js; the media query stays for devices that really are this narrow. */ /* The commuter pass and the tab bar, which are what actually broke. Both rows carried their layout inline, and an inline `flex:1;min-width:0` cannot be overridden from a stylesheet without `!important` — so they are classes now and the inline layout is gone. */ .passtop{padding:var(--s5) var(--s5) var(--s4);display:flex;gap:var(--s4);align-items:center} .passstats{padding:var(--s4) var(--s5);display:flex;gap:var(--s3)} .passstats .ps1{flex:1 1 0;min-width:0} .passstats .ps2{flex:2 1 0;min-width:0} .tab .tl{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.narrow{--t-l:17px; --t-xl:20px; --t-xxl:26px; --s5:18px; --s6:24px; --s7:36px} body.narrow .passtop{flex-wrap:wrap;gap:var(--s3)} body.narrow .passstats{flex-wrap:wrap;gap:var(--s2)} body.narrow .passstats .ps1, body.narrow .passstats .ps2{flex-basis:100%} body.narrow .tabs{padding-left:0;padding-right:0} body.narrow .tab{font-size:8.5px;letter-spacing:0;gap:2px;min-width:0;padding:0 2px} body.narrow .tab svg{width:20px;height:20px} /* Fixed-pixel compositions. The wink stage is 230px of overlapping rings and the pill tags do not wrap, so both ran past a 177px viewport. */ body.narrow .winkstage{width:150px;height:98px} body.narrow .wring{width:98px;height:98px;border-width:10px} body.narrow .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere} body.narrow .srow{flex-wrap:wrap} /* Wide viewports — which on a phone means landscape. iOS Safari ignores the manifest's portrait lock, so the app rotates whatever the manifest asks, and the answer is to look deliberate when it does rather than to keep asking. Left alone the pass card stretched into a 2532px band. The column is capped and centred instead; nothing is hidden and nothing moves on rotation but the gutters. Also covers a tablet and a desktop browser, which testers use. */ @media (min-width:520px){ /* The scrolling column is capped and centred. The tab bar and the header are chrome and stay full-bleed — a floating band with visible edges reads as a broken panel, not a considered one — so they take the same cap as padding and their contents line up with the column above them. */ .vscroll.vpad,.vbottom{max-width:520px;margin-inline:auto;width:100%} .tabs,.apphead,.navbar{padding-inline:max(var(--s3),calc((100% - 520px) / 2))} } @media (max-width:340px){ :root{--t-l:17px; --t-xl:20px; --t-xxl:26px; --s5:18px; --s6:24px; --s7:36px} .passtop{flex-wrap:wrap;gap:var(--s3)} .passstats{flex-wrap:wrap;gap:var(--s2)} .passstats .ps1,.passstats .ps2{flex-basis:100%} .tabs{padding-left:0;padding-right:0} .tab{font-size:8.5px;letter-spacing:0;gap:2px;min-width:0;padding:0 2px} .tab svg{width:20px;height:20px} .winkstage{width:150px;height:98px} .wring{width:98px;height:98px;border-width:10px} .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere} .srow{flex-wrap:wrap} } /* ── viewport --------------------------------------------------------- */ #app{position:fixed;inset:0;overflow:hidden; --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px)} .view{position:absolute;inset:0;display:flex;flex-direction:column; background:var(--paper);will-change:transform,opacity; padding-top:var(--safeT); transform:translateZ(0)} .view.dark{background:var(--teal-ink)} /* ── transitions ------------------------------------------------------- */ /* push: incoming slides from the right, outgoing parallaxes left + dims */ @keyframes pushIn {from{transform:translateX(100%)} to{transform:none}} @keyframes pushOut {from{transform:none} to{transform:translateX(-24%);filter:brightness(.82)}} @keyframes popIn {from{transform:translateX(-24%);filter:brightness(.82)} to{transform:none;filter:none}} @keyframes popOut {from{transform:none} to{transform:translateX(100%)}} /* sheet: rises from the bottom */ @keyframes sheetIn {from{transform:translateY(100%)} to{transform:none}} @keyframes sheetOut {from{transform:none} to{transform:translateY(100%)}} /* tabs: crossfade with a whisper of lift */ @keyframes fadeIn {from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}} @keyframes fadeOut {from{opacity:1} to{opacity:0}} .view.push-in {animation:pushIn .34s cubic-bezier(.32,.72,0,1) both} .view.push-out {animation:pushOut .34s cubic-bezier(.32,.72,0,1) both} .view.pop-in {animation:popIn .30s cubic-bezier(.32,.72,0,1) both} .view.pop-out {animation:popOut .30s cubic-bezier(.32,.72,0,1) both} .view.sheet-in {animation:sheetIn .38s cubic-bezier(.32,.72,0,1) both} .view.sheet-out{animation:sheetOut .30s cubic-bezier(.4,0,1,1) both} .view.fade-in {animation:fadeIn .26s var(--ease) both} .view.fade-out {animation:fadeOut .18s var(--ease) both} .view.hidden{display:none} @media (prefers-reduced-motion:reduce){ .view[class*="-in"],.view[class*="-out"]{animation-duration:.01s} } /* content scrolls; chrome does not */ .vscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .vscroll::-webkit-scrollbar{display:none} .vpad{padding:0 var(--s5)} .vbottom{flex:none;padding:var(--s3) var(--s5) calc(var(--s5) + var(--safeB))} .tabs{padding-bottom:calc(var(--s3) + var(--safeB))} /* ── splash ------------------------------------------------------------ */ #splash{position:fixed;inset:0;z-index:100;background:var(--teal-ink); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5); transition:opacity .5s var(--ease),visibility .5s} #splash.gone{opacity:0;visibility:hidden} /* The real logo, 8 September 2026. This was two CSS circles in teal and coral with a dot between them — a stand-in drawn before there was a logo. The mark carries its own wordmark, so the separate `.swd` line is gone with it. Width is set on the element and the file is 512px square, so the box is reserved before the image decodes and nothing on the splash shifts. */ .smark{width:132px;height:132px;border-radius:26px;overflow:hidden; box-shadow:0 10px 34px rgba(0,0,0,.28);animation:smIn .55s var(--pop) both} .smark img{display:block;width:100%;height:100%} @keyframes smIn{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}} .sbarline{width:150px;height:3px;border-radius:2px;background:rgba(251,247,244,.16); overflow:hidden;position:relative;animation:fadeIn .4s 1s both} .sbarline i{position:absolute;inset:0;width:38%;border-radius:2px;background:var(--coral); animation:travel 1.15s var(--ease) infinite} @keyframes travel{0%{left:-38%}100%{left:100%}} /* ── real inputs ------------------------------------------------------- */ /* 16px is a floor, not a taste. Below it, iOS Safari zooms the viewport when a field takes focus and does not zoom back — and now that pinch-zoom is allowed again (index.html), nothing suppresses that any more. Four fields carried an inline 15px override and have had it removed rather than being exempted. */ .inp{width:100%;min-height:44px;border:none;outline:none;background:transparent; font-family:var(--body);font-size:var(--t-l);font-weight:600;color:var(--ink); -webkit-user-select:text;user-select:text} .inp,.sel{font-size:max(16px,var(--t-l))} .inp::placeholder{color:var(--faint);font-weight:500} /* A native