/* * app.css — the shell, and the map inside it. * * There is very little here on purpose. The map is one flat layer of * absolutely positioned squares whose geometry is written by `map.js` every * frame; CSS decides what a square LOOKS like and nothing about where it * is. Anything that tried to lay out cells here would be a second opinion * about the geometry, and the two would drift. * * The tilesystem's own background colour arrives as `--vp-canvas` on * , from its `tilesystem.json` (§2.6), so the ground under the cells * belongs to the map you are in rather than to the app. */ :root { --vp-canvas: #0f1216; --vp-gap: 2px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--vp-canvas); color: #e9edf2; font: 15px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------------- the map */ #vp-map { position: fixed; inset: 0; overflow: hidden; background: var(--vp-canvas); touch-action: none; /* every gesture is ours (§4.1) */ cursor: grab; contain: strict; } #vp-map:active { cursor: grabbing; } /* * One cell. `transform`, `width` and `height` are written by map.js; the * transform origin is the top left of the cell's world square, so a cell is * placed by one translate and never by a layout pass. */ .vp-cell { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-color: rgba(255, 255, 255, 0.03); border-radius: 3px; /* The gap is drawn INSIDE the cell so the geometry stays exact: a cell is its square, and the hairline between neighbours is a shadow, not a margin that would make the arithmetic lie. */ box-shadow: inset 0 0 0 var(--vp-gap) var(--vp-canvas); will-change: transform; } /* * Ground: a cell with nothing on it. It is drawn — faintly, and with no * cover — because a map of empty ground is otherwise a black screen, and * because on your own map the ground IS the offer: this is where a tile * goes. It never takes a press: the pinboard reads the region, not the DOM. */ .vp-cell[data-kind="ground"] { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(233, 237, 242, 0.06); border-radius: 4px; } /* A preview is the tile below's own picture, standing in for a layer that has not been reached yet — dimmer, so that it reads as "there is more down there" rather than as a tile of its own (§3.1 rung 7). */ .vp-cell[data-kind="preview"] { opacity: 0.82; } /* An `over` is one cover stretched across a whole footprint (§3.1): no inner hairline, because there is nothing here to separate it from. */ .vp-cell[data-kind="over"] { box-shadow: none; border-radius: 4px; } /* The overview is the map seen from outside itself: the ground darkens so the tilesystem reads as an object rather than as a wall. */ #vp-map[data-overview] { background: #05070a; } /* ---------------------------------------------------- the other surfaces */ /* Mounted by the shell, filled by B-4, B-5, C-1 and C-4. Hidden until the module that owns one is on disk and has something to say. */ #vp-bands, #vp-drawer, #vp-marks, #vp-edit, #vp-code { position: fixed; z-index: 2; } [hidden] { display: none !important; } /* ------------------------------------------------ aim: hold, aim, release */ /* * The veil is the colour of the ground, so setting the map aside reads as * the map going away rather than as something being laid on top of it. The * card is the place, at the size landing will give it — 200 px, which is * what map.js draws a landed cell at. */ #vp-veil { position: fixed; inset: 0; z-index: 8; background: var(--vp-canvas); opacity: 0; transition: opacity 160ms ease; pointer-events: none; } #vp-veil.is-on { opacity: 0.93; } #vp-peek { position: fixed; top: 0; left: 0; z-index: 9; border-radius: 4px; background: rgba(255, 255, 255, 0.04) no-repeat center / 100% 100%; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); pointer-events: none; } #vp-peek[data-kind="ground"] { background-image: none; border: 1px dashed rgba(233, 237, 242, 0.35); box-shadow: none; } #vp-peek[data-kind="link"] { outline: 2px solid rgba(218, 41, 28, 0.9); outline-offset: -2px; } /* The aiming surface: one layer, laid out flat, at a size a thumb can pick from. It is not the map — the map is behind the veil, holding still. */ #vp-jump { position: fixed; inset: 12px; z-index: 10; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.04); touch-action: none; } .vp-jump-grid, .vp-crumb-grid { position: absolute; top: 0; left: 0; will-change: transform; } .vp-mini-cell { position: absolute; border-radius: 2px; background: rgba(255, 255, 255, 0.06) no-repeat center / 100% 100%; } .vp-jump-reticle { position: absolute; border: 2px solid #da291c; border-radius: 3px; pointer-events: none; } /* ------------------------------------------- the joystick — quick-select */ /* * The crosshair does not move: it is the middle of the screen, and what is * under it is the candidate. Everything else moves under it (§4.3). */ #vp-cross { position: fixed; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 13; pointer-events: none; background: linear-gradient(#fff, #fff) 50% 0 / 1.5px 14px no-repeat, linear-gradient(#fff, #fff) 50% 100% / 1.5px 14px no-repeat, linear-gradient(#fff, #fff) 0 50% / 14px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 50% / 14px 1.5px no-repeat; opacity: 0.9; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)); } #vp-cand { position: fixed; left: 0; top: 0; z-index: 12; pointer-events: none; border-radius: 4px; box-shadow: 0 0 0 3px #da291c, 0 0 22px rgba(218, 41, 28, 0.45); } /* ------------------------------------------------------------ the crumbs */ /* One square per layer above you, top left: a picture of each map you are standing inside, the one you are nearest at the bottom. */ #vp-crumbs { position: fixed; top: 10px; left: 10px; z-index: 6; display: flex; flex-direction: column; gap: 5px; } .vp-crumb { position: relative; width: 44px; height: 44px; padding: 0; overflow: hidden; border: 1px solid rgba(233, 237, 242, 0.22); border-radius: 5px; background: rgba(10, 13, 17, 0.72); cursor: pointer; touch-action: none; } .vp-crumb-here { position: absolute; border: 1.5px solid #da291c; border-radius: 2px; pointer-events: none; } /* ------------------------------------------------------------ the drawer */ /* * A sheet from the bottom edge, never a centred box (§4.4). The sheet is * always full height and translated down: the three resting heights are * three offsets, so dragging between them is one number and no relayout. */ #vp-drawer { position: fixed; inset: 0; z-index: 4; pointer-events: none; } #vp-drawer .vp-scrim { position: absolute; inset: 0; background: rgba(4, 6, 9, 0.45); opacity: 0; transition: opacity 180ms ease; } #vp-drawer[data-state="half"] .vp-scrim { opacity: 1; } #vp-drawer[data-state="full"] .vp-scrim { opacity: 1; } .vp-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; pointer-events: auto; background: #14181e; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); overflow: hidden; will-change: transform; } .vp-grip { flex: none; height: 18px; cursor: grab; touch-action: none; } .vp-grip::after { content: ""; display: block; width: 38px; height: 4px; margin: 7px auto 0; border-radius: 2px; background: rgba(233, 237, 242, 0.32); } .vp-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 10px 10px; touch-action: none; cursor: grab; } .vp-head-text { flex: 1; min-width: 0; } .vp-head-text strong { display: block; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vp-head-text a { font-size: 12px; color: rgba(233, 237, 242, 0.55); text-decoration: none; } .vp-head-text a:hover { text-decoration: underline; } .vp-step, .vp-mark { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(233, 237, 242, 0.18); border-radius: 17px; background: rgba(255, 255, 255, 0.04); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; } .vp-mark[data-on] { border-color: #da291c; color: #ffb3ad; } .vp-body { flex: 1; min-height: 0; background: #fff; } .vp-doc { display: block; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------- the marks */ /* A chip per icon, bottom left — the mirror of the crumb column: crumbs are where you ARE, chips are what you KEPT (§9). */ #vp-marks { position: fixed; left: 10px; bottom: 10px; z-index: 6; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .vp-chips { display: flex; gap: 6px; } .vp-chip { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(233, 237, 242, 0.2); border-radius: 20px; background: rgba(10, 13, 17, 0.78); cursor: pointer; font-size: 18px; line-height: 1; } .vp-chip.is-on { border-color: var(--mk); box-shadow: 0 0 0 2px var(--mk) inset; } .vp-chip-n { position: absolute; right: -2px; bottom: -2px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: var(--mk); color: #fff; font-size: 10px; line-height: 16px; } .vp-chip-n:empty { display: none; } .vp-thumbs { display: flex; gap: 4px; padding: 3px; border-radius: 16px; background: rgba(10, 13, 17, 0.78); } .vp-thumb { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(233, 237, 242, 0.2); border-radius: 6px; background: rgba(255, 255, 255, 0.06) no-repeat center / cover; color: #e9edf2; font-size: 12px; line-height: 1; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .vp-thumb.is-on { box-shadow: 0 0 0 2px var(--mk); transform: translateY(-3px); } /* The icon ring: six choices around the finger that is already down, so choosing a kind is part of making the mark and not a second step. */ #vp-ring { position: fixed; inset: 0; z-index: 11; pointer-events: none; } .vp-ring-i { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid rgba(233, 237, 242, 0.25); border-radius: 20px; background: rgba(10, 13, 17, 0.92); font-size: 20px; line-height: 36px; text-align: center; } .vp-ring-i.is-on { border-color: var(--mk); transform: scale(1.18); } /* ---------------------------------------------------------- the pinboard */ /* * The selected tile (§5). The box tracks the cell on the map every frame, * so it is positioned in screen pixels and never laid out. */ #vp-edit { position: fixed; inset: 0; z-index: 5; pointer-events: none; } #vp-edit[data-mode="edit"] { pointer-events: none; } .vp-sel { position: absolute; top: 0; left: 0; pointer-events: auto; outline: 2px solid #da291c; outline-offset: 1px; border-radius: 3px; touch-action: none; cursor: move; } .vp-handle { position: absolute; width: 16px; height: 16px; border: 2px solid #da291c; border-radius: 8px; background: #14181e; cursor: nwse-resize; } .vp-handle[data-h="nw"] { left: -9px; top: -9px; } .vp-handle[data-h="ne"] { right: -9px; top: -9px; cursor: nesw-resize; } .vp-handle[data-h="sw"] { left: -9px; bottom: -9px; cursor: nesw-resize; } .vp-handle[data-h="se"] { right: -9px; bottom: -9px; } .vp-sel-bar { position: absolute; left: 50%; bottom: -19px; display: flex; gap: 4px; transform: translateX(-50%); } .vp-sel-bar button { height: 30px; min-width: 30px; padding: 0 8px; border: 1px solid rgba(233, 237, 242, 0.2); border-radius: 15px; background: #14181e; color: #e9edf2; font-size: 13px; line-height: 1; cursor: pointer; } .vp-sel-bar button[data-armed="1"] { background: #da291c; border-color: #da291c; color: #fff; } .vp-sel-say { position: absolute; left: 50%; top: -30px; padding: 4px 8px; transform: translateX(-50%); border-radius: 12px; background: #14181e; border: 1px solid rgba(233, 237, 242, 0.2); font-size: 12px; white-space: nowrap; } /* An empty surface of your own, saying what a hold on it would do. It never takes the finger: the hold has to reach the map underneath. */ .vp-hint { position: absolute; left: 50%; bottom: 76px; margin: 0; padding: 7px 12px; transform: translateX(-50%); border-radius: 14px; background: rgba(20, 24, 30, 0.82); border: 1px solid rgba(233, 237, 242, 0.14); color: rgba(233, 237, 242, 0.62); font-size: 12px; white-space: nowrap; pointer-events: none; } /* "Neu hier", and the one-line questions it asks. */ .vp-menu { position: absolute; width: 180px; padding: 5px; pointer-events: auto; border: 1px solid rgba(233, 237, 242, 0.2); border-radius: 10px; background: #14181e; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } .vp-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .vp-menu button:hover { background: rgba(255, 255, 255, 0.07); } .vp-menu form { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; } .vp-menu label { flex: 1 0 100%; font-size: 12px; color: rgba(233, 237, 242, 0.6); } .vp-menu input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid rgba(233, 237, 242, 0.24); border-radius: 6px; background: #0f1216; color: inherit; font: inherit; } .vp-menu form button { width: auto; background: #da291c; color: #fff; } /* ------------------------------------------------------------- the editor */ /* Moved out to `editor.css`: the editor is a light sheet in the colours of the tiles it makes, and it is now large enough to be read on its own. */ /* ------------------------------------------------------------- the device */ /* * A chip in the corner, and behind it the one dialog in the product (§8). * It is not a settings screen: there is nothing in it that is not a code, * and it is only ever open because somebody asked for one. */ #vp-code { right: 10px; bottom: 10px; z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .vp-id-chip { width: 34px; height: 34px; border-radius: 17px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(18, 22, 28, 0.86); color: #e9edf2; font-size: 15px; cursor: pointer; order: 2; } .vp-id-chip[data-off] { color: rgba(233, 237, 242, 0.4); } .vp-id-panel { order: 1; width: min(280px, calc(100vw - 24px)); padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(14, 17, 21, 0.97); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 6px; } .vp-id-panel button { padding: 8px 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #e9edf2; font: inherit; text-align: left; cursor: pointer; } .vp-id-panel button:hover { background: rgba(255, 255, 255, 0.09); } .vp-id-home { margin: 0; font-size: 11px; color: rgba(233, 237, 242, 0.5); word-break: break-all; } .vp-id-warn, .vp-id-note { font-size: 11px; line-height: 1.35; color: rgba(233, 237, 242, 0.55); } .vp-id-note { color: #ffb3ad; } /* The code itself: the picture and the six characters say the same thing, so that a phone can scan it and a person can type it. */ .vp-id-code { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); } .vp-id-code strong { font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 3px; } .vp-id-code small { font-size: 11px; color: rgba(233, 237, 242, 0.55); text-align: center; } .vp-qr { display: block; border-radius: 3px; } /* /join and /auth-connect: the same page, standing still. */ .vp-id-screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: var(--vp-canvas); text-align: center; } .vp-id-screen h1 { margin: 0; font-size: 20px; } .vp-id-screen p { margin: 0; max-width: 34ch; color: rgba(233, 237, 242, 0.7); } .vp-id-screen input { width: 200px; padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #e9edf2; font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 3px; text-align: center; text-transform: uppercase; } .vp-id-screen button { padding: 10px 18px; border-radius: 8px; border: 0; background: #da291c; color: #fff; font: inherit; cursor: pointer; } /* ------------------------------------------------------- motion, restored */ /* * What the pre-V1 shell did with its hands, brought back. Nothing here is * geometry the scripts write per frame — those never carry a transition — * only the lifts, fades and pops around them. */ /* Nothing on the shell is text to select: a stray selection under a long press starts a native drag that swallows every pointermove after it. */ #vp-map, #vp-edit, #vp-marks, #vp-bands, #vp-crumbs, .vp-grip, .vp-head { -webkit-user-select: none; user-select: none; } /* The veil is opaque, not a scrim: half-hiding the map leaves a ghost of somewhere you are not behind the one place you are choosing. In fast, lifted slowly, so the map is found under it rather than switched to. */ #vp-veil { transition: opacity 120ms ease-out; } #vp-veil.is-on { opacity: 1; } #vp-veil.is-lifting { transition: opacity 320ms ease-out; } /* The aiming surface unfolds from the corner the thumb is in. */ #vp-jump:not([hidden]) { animation: vp-extend 160ms ease-out; } @keyframes vp-extend { from { clip-path: inset(72% 0 0 72% round 8px); opacity: 0.3; } to { clip-path: inset(0 0 0 0 round 8px); opacity: 1; } } /* The icon ring pops in under the finger, and the chosen icon rises. */ #vp-ring:not([hidden]) .vp-ring-i { animation: vp-pop 140ms ease-out; } @keyframes vp-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .vp-ring-i { transition: transform 90ms ease-out, border-color 90ms ease-out; } .vp-ring-i.is-on { transform: scale(1.45) translateY(-5px); } .vp-chip { transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .vp-chip:active { transform: scale(0.94); } /* A tile being carried: lifted off the board, above its neighbours, never in the way of the hit-testing that decides where it lands. */ .vp-cell[data-carry] { z-index: 3; pointer-events: none; opacity: 0.92; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)); transition: filter 120ms ease, opacity 120ms ease; } .vp-sel[data-carrying] { outline-color: rgba(218, 41, 28, 0.55); } .vp-sel[data-settling] { transition: transform 160ms ease-out, width 160ms ease-out, height 160ms ease-out; } .vp-sel[data-past="raise"] { outline-color: #fff; outline-width: 3px; } .vp-sel[data-past="lower"] { outline-color: #ffb3ad; outline-style: dashed; } /* Where the carried tile would land, before you let go. */ .vp-drop { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 3px; border: 2px solid rgba(233, 237, 242, 0.55); background: rgba(233, 237, 242, 0.08); transition: transform 80ms ease-out, width 80ms ease-out, height 80ms ease-out; } .vp-drop[data-kind="into"] { border: 3px solid #fff; background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14); } .vp-drop[data-kind="blocked"] { border-color: #da291c; border-style: dashed; background: rgba(218, 41, 28, 0.12); } /* The document fades in once it has something to show. */ .vp-doc { opacity: 0; transition: opacity 160ms ease; } .vp-doc[data-loaded] { opacity: 1; } .vp-editor button, .vp-sel-bar button, .vp-menu button, .vp-step, .vp-mark { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* The cell the bands are flying into their focus slot, marked while the flight lasts (bands.js `flyIn`): a hairline that says which one. */ .vp-cell[data-cand] { box-shadow: inset 0 0 0 2px #da291c; } /* The picker's snap: the layer slides one cell under the middle. This is the one transform on the jump grid a transition may touch, because the crumb's own aim writes it per move and the picker's only per cell. */ #vp-jump.is-snapping .vp-jump-grid { transition: transform 120ms cubic-bezier(.2,.9,.3,1); } #vp-jump.is-snapping .vp-jump-reticle { box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.35), 0 0 22px rgba(218, 41, 28, 0.45); } /* The thumbnails fold away when the reader is not standing on one of them, and unfold as they arrive on one: height and opacity, not display, so the fold is a motion and not a jump. */ .vp-thumbs { max-height: 40px; overflow: hidden; transition: max-height 180ms ease, opacity 180ms ease, padding 180ms ease, margin 180ms ease; } .vp-thumbs[data-folded] { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -6px; pointer-events: none; }