/* * walk.css — chrome for the walk grammar (ADR 0006). * * The canvas is the tilesystem's bg_color (--walk-canvas, set on by * the shell); the chrome is dark ink over it, drawer and menus keep the * clickdummy's dark-glass look. Everything here is owned by walk.js; * sibling modules bring their own CSS (edit/relink/auth) — the few * geometry overrides they need without the old 52px topbar sit at the end. */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--walk-canvas, var(--paper, #f3efe8)); color: var(--g-100, #161616); font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; } /* ---------- canvas ---------- */ #map { position: fixed; inset: 0; background: var(--walk-canvas, var(--paper, #f3efe8)); z-index: 1; } #map.leaflet-container { cursor: default; font: inherit; } .leaflet-tile { image-rendering: auto; } .leaflet-tile-container { will-change: transform; } /* ---------- dim quads (browse focus / hold veil) ---------- */ #walk-dim { pointer-events: none; } #walk-dim div { position: fixed; background: rgba(20, 22, 26, 0.34); opacity: 0; transition: opacity 0.3s; z-index: 4; pointer-events: none; } body.walk-dimmed #walk-dim div { opacity: 1; } body.walk-holding #walk-dim div { background: rgba(20, 22, 26, 0.45); } /* ---------- focus / hover ring ---------- */ #walk-ring { position: fixed; pointer-events: none; z-index: 6; border: 3px solid #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 10px 34px rgba(0, 0, 0, 0.22); border-radius: 16px; /* walk.js scales this with the cell */ } /* ---------- region band ---------- */ #walk-band { position: fixed; top: calc(18px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; pointer-events: none; z-index: 7; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 500; color: rgba(22, 22, 22, 0.65); text-shadow: 0 1px 6px rgba(243, 239, 232, 0.9); opacity: 0.55; transition: opacity 0.3s; } /* ---------- back button ---------- */ #walk-back { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 12px; width: 40px; height: 40px; border-radius: 3px; background: rgba(38, 38, 38, 0.86); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--paper, #f3efe8); font-family: var(--font-sans, sans-serif); font-size: 17px; cursor: pointer; z-index: 18; opacity: 0; pointer-events: none; transition: opacity 0.25s, background-color 0.15s; } #walk-back:hover { background: var(--crimson, #a62122); } body.walk-browse #walk-back, body.walk-full #walk-back, body.walk-sub #walk-back { opacity: 1; pointer-events: auto; } /* ---------- hint ---------- */ #walk-hint { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-family: var(--font-sans, sans-serif); font-size: 10px; color: rgba(22, 22, 22, 0.85); opacity: 0.34; pointer-events: none; z-index: 7; line-height: 1.6; padding: 0 20px; } body.walk-full #walk-hint, body.walk-holding #walk-hint { opacity: 0; } /* ---------- hold-jump landing preview ---------- */ #walk-preview { position: fixed; z-index: 12; pointer-events: none; opacity: 0; transition: opacity 0.2s; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35); } #walk-preview.on { opacity: 1; } #walk-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #walk-preview .empty-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(22, 22, 22, 0.5); background: var(--walk-canvas, var(--paper, #f3efe8)); } /* ---------- context menu + creator chips ---------- */ #walk-ctx, #walk-newpick { position: fixed; z-index: 16; display: none; gap: 8px; } #walk-ctx.on, #walk-newpick.on { display: flex; } .walk-mitem { padding: 12px 18px; border-radius: 4px; background: var(--g-100, #161616); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--g-white, #fff); font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); white-space: nowrap; cursor: pointer; } .walk-mitem.hot { background: var(--crimson, #a62122); border-color: var(--crimson, #a62122); color: var(--g-white, #fff); } /* ---------- carried tile ghost (arranging) ---------- */ #walk-ghost { position: fixed; z-index: 15; pointer-events: none; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.65); } /* ---------- drawer ---------- */ #walk-drawer { position: fixed; left: 0; right: 0; bottom: 0; height: 86dvh; z-index: 9; background: var(--g-white, #fff); border-radius: 8px 8px 0 0; box-shadow: 0 -12px 44px rgba(22, 22, 22, 0.18), 0 0 0 1px var(--g-20, #e0e0e0); transform: translateY(105%); display: flex; flex-direction: column; } #walk-drawer.anim { transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.24, 1); } #walk-grip { flex: none; padding: 16px 0 18px; margin-top: -8px; /* extend the grab zone past the drawer's top edge */ cursor: grab; touch-action: none; } #walk-grip:active { cursor: grabbing; } #walk-grip .bar { width: 44px; height: 5px; border-radius: 3px; background: var(--g-30, #c6c6c6); margin: 0 auto; transition: background 0.2s; } #walk-grip:hover .bar, #walk-grip:active .bar { background: var(--crimson, #a62122); } #walk-dbody { flex: 1; min-height: 0; display: flex; } #walk-dbody iframe { flex: 1; width: 100%; border: 0; border-radius: 0 0 0 0; background: var(--g-white, #fff); } /* wide screens: the drawer is a right-side content panel, tile stays left */ body.walk-wide #walk-drawer { top: 0; bottom: 0; left: auto; right: 0; width: min(46vw, 560px); height: 100dvh; border-radius: 8px 0 0 8px; flex-direction: row; transform: translateX(105%); } body.walk-wide #walk-grip { padding: 0 14px 0 16px; margin-top: 0; margin-left: -8px; /* extend the grab zone past the panel's left edge */ display: flex; align-items: center; } body.walk-wide #walk-grip .bar { width: 5px; height: 44px; margin: 0; } body.walk-wide #walk-dbody { min-width: 0; } /* ---------- system corner + menu sheet ---------- */ #walk-sys { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border-radius: 3px; background: rgba(22, 22, 22, 0.14); border: 1px solid rgba(22, 22, 22, 0.12); color: rgba(22, 22, 22, 0.78); font-family: var(--font-sans, sans-serif); font-size: 19px; line-height: 1; cursor: pointer; z-index: 18; transition: background 0.2s, color 0.2s, border-color 0.2s; } #walk-sys:hover { background: var(--crimson, #a62122); border-color: var(--crimson, #a62122); color: var(--g-white, #fff); } #walk-menu { position: fixed; inset: 0; z-index: 30; background: rgba(22, 22, 22, 0.45); } #walk-menu .sheet { position: absolute; top: calc(60px + env(safe-area-inset-top)); right: 12px; width: min(86vw, 320px); background: var(--g-white, #fff); color: var(--g-100, #161616); border: 1px solid var(--g-20, #e0e0e0); border-radius: 6px; padding: 16px; font-family: var(--font-sans, sans-serif); box-shadow: 0 24px 60px rgba(22, 22, 22, 0.22); } #walk-menu h3 { font-family: var(--font-serif, serif); font-weight: 400; font-size: 19px; margin-bottom: 10px; letter-spacing: 0; } #walk-menu h3 em { color: var(--crimson, #a62122); font-style: normal; } #walk-menu .row { padding: 8px 0; border-top: 1px solid var(--g-20, #e0e0e0); } #walk-menu a { color: var(--crimson, #a62122); text-decoration: none; font-size: 13px; font-weight: 500; } #walk-menu a:hover { color: var(--crimson-hover, #8e1c1d); text-decoration: underline; } #walk-menu .help { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 0.3px; line-height: 1.6; color: var(--g-60, #6f6f6f); margin-top: 10px; border-top: 1px solid var(--g-20, #e0e0e0); padding-top: 10px; } #walk-ts-list { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; } #walk-ts-list a { display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--slate-soft, #e8ecee); border: 1px solid transparent; font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 500; color: var(--slate, #404d52); } #walk-ts-list a.active { background: var(--crimson, #a62122); color: var(--g-white, #fff); } /* ---------- mount picker (link a whole map or a tile, no URLs) ---------- */ #walk-picker { position: fixed; inset: 0; z-index: 32; background: rgba(22, 22, 22, 0.45); display: flex; align-items: center; justify-content: center; } #walk-picker[hidden] { display: none; } #walk-picker .picker-sheet { width: min(92vw, 640px); max-height: 86dvh; display: flex; flex-direction: column; background: var(--g-white, #fff); color: var(--g-100, #161616); border: 1px solid var(--g-20, #e0e0e0); border-radius: 8px; font-family: var(--font-sans, sans-serif); box-shadow: 0 24px 60px rgba(22, 22, 22, 0.25); overflow: hidden; } #walk-picker header { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--g-20, #e0e0e0); } #walk-picker header h3 { flex: 1; font-family: var(--font-serif, serif); font-weight: 400; font-size: 18px; } #walk-picker header button { width: 32px; height: 32px; border-radius: 3px; background: var(--g-10, #f4f4f4); border: 1px solid var(--g-20, #e0e0e0); color: var(--g-100, #161616); font-size: 18px; cursor: pointer; } #walk-picker header button:hover { border-color: var(--crimson, #a62122); color: var(--crimson, #a62122); } #walk-picker .picker-body { overflow-y: auto; padding: 14px 18px 18px; } #walk-picker .picker-note { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.2px; color: var(--g-60, #6f6f6f); margin-bottom: 12px; } #walk-picker .picker-loading { padding: 30px; text-align: center; color: var(--g-60, #6f6f6f); font-size: 13px; } #walk-picker .picker-rows { display: flex; flex-direction: column; gap: 10px; } #walk-picker .picker-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 6px; background: var(--g-10, #f4f4f4); border: 1px solid var(--g-20, #e0e0e0); } #walk-picker .picker-cover { width: 54px; height: 54px; flex: none; border-radius: 3px; overflow: hidden; background: var(--g-20, #e0e0e0); } #walk-picker .picker-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } #walk-picker .picker-row-main { flex: 1; min-width: 0; } #walk-picker .picker-row-name { font-size: 14px; font-weight: 600; } #walk-picker .picker-row-kind { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-60, #6f6f6f); margin-top: 2px; } #walk-picker .picker-row-acts { display: flex; flex-direction: column; gap: 6px; flex: none; } #walk-picker .picker-row-acts .walk-mitem { padding: 7px 12px; font-size: 12px; text-align: center; } #walk-picker .picker-drill-nav { display: flex; gap: 8px; margin-bottom: 12px; } #walk-picker .picker-drill-nav .walk-mitem { padding: 8px 13px; font-size: 12px; } #walk-picker .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } #walk-picker .picker-tile { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: var(--g-20, #e0e0e0); border: 1px solid var(--g-20, #e0e0e0); cursor: default; } #walk-picker .picker-tile.has-depth { cursor: pointer; } #walk-picker .picker-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } #walk-picker .picker-tile-pick { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px; text-align: center; font-family: var(--font-sans, sans-serif); font-size: 11px; font-weight: 600; background: rgba(22, 22, 22, 0.82); color: var(--g-white, #fff); cursor: pointer; opacity: 0; transition: opacity 0.15s; } #walk-picker .picker-tile:hover .picker-tile-pick { opacity: 1; } /* ---------- toast (shared with editor/relink/auth via window.vpToast) ---------- */ .vp-toast { position: fixed; bottom: calc(70px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 40; background: var(--g-100, #161616); border: 1px solid var(--g-70, #525252); color: var(--paper, #f3efe8); font-family: var(--font-sans, sans-serif); border-radius: 4px; padding: 10px 16px; font-size: 13px; animation: walk-toast 2.4s ease both; pointer-events: none; max-width: 86vw; } @keyframes walk-toast { 0% { opacity: 0; transform: translateX(-50%) translateY(14px); } 10%, 82% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; } } /* ---------- geometry overrides for sibling modules (no 52px topbar) ----- */ #editor-panel { top: 0 !important; height: 100vh !important; z-index: 24; } #vp-filter-bar { top: 0 !important; } body.vp-editing #vp-filter-bar { top: 0 !important; }