/* The walkthrough page: its panels, the dock, the phone layout. */ :root { --ink: #1a2332; --paper: #f4f1ea; --line: #c9a961; --accent: #3d5a80; /* Cinematic dark-glass chrome, matching the reference: near-black rounded panels, pill buttons, clean sans-serif type. The gold stays only as the sun/highlight accent color. */ --hud-bg: rgba(18,19,23,0.68); --hud-border: rgba(255,255,255,0.10); --hud-text: #f2f1ee; --hud-dim: rgba(242,241,238,0.6); --radius-lg: 22px; --radius-pill: 999px; /* Kept in sync with the current sun/sky color by refreshSunUI() (same gradient the Sun popup's own background uses) — default here is just the pre-JS fallback for the very first paint. */ --active-nav-bg: linear-gradient(160deg, rgba(58,96,168,0.85), rgba(150,176,208,0.55)); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0b0d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } canvas { display: block; touch-action: none; } #loading { position: fixed; inset: 0; background: var(--b-page, #16181c); color: #f2f1ee; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; font-family: var(--b-font, 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif); transition: opacity 0.45s ease; } #loading.done { opacity: 0; pointer-events: none; } /* The same BELLA box logo as the login page (white), fading in. */ #loading .logo { width: 150px; height: auto; display: block; margin-bottom: 30px; filter: invert(1); animation: loadingIn 0.6s ease both; } #loading .bar { width: 150px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; } #loading .bar i { display: block; height: 100%; width: 0; background: var(--b-gold, #c9a961); transition: width 0.25s ease; } #loading.waiting .bar i { width: 35%; animation: loadingSlide 1.3s ease-in-out infinite; } #loading .label { font-size: 12px; letter-spacing: 0.04em; opacity: 0.6; margin-top: 14px; } #loading .pct { font-size: 12px; opacity: 0.4; margin-top: 4px; font-variant-numeric: tabular-nums; } @keyframes loadingIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes loadingSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* --------------------------------------------------------------- CINEMA PANEL — near-black frosted glass, generously rounded, matching the reference's dark configurator look. Still used for the entry card and the settings popups. ------------------------------------------------------------------ */ .cinema-panel { background: var(--hud-bg); color: var(--hud-text); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--hud-border); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); } /* GLASS MENU — a lighter, more true-glass look (a visible top-edge sheen fading to a dark base, same family as .glass-nav) for the hamburger drawer and its three subpanels specifically, requested as an upgrade from .cinema-panel's flat, near-opaque dark tint. Kept separate from .cinema-panel itself since the intro card/quality prompt/tour tooltip/drawings lightbox all still use that flatter look and weren't part of this request. */ /* Portal step 5: now the same dark panel as Documents/Comments (the .sheet in css/portal-viewer.css), dark enough that its text stays readable over a bright sky or white walls in daylight. */ .glass-menu { background: linear-gradient(165deg, rgba(44,47,54,0.95), rgba(20,22,26,0.95)); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 50px rgba(0,0,0,0.45); } /* --------------------------------------------------------------- GLASS NAV — frosted glass fading from a light top edge to a dark grey base, used for the two bar-like nav containers (the actual "navs" — the top-right icon pair intentionally has no background box at all, so it's excluded from this). ------------------------------------------------------------------ */ #intro { position: fixed; inset: 0; background: rgba(0,0,0,0.55); color: var(--hud-text); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(6px); } #intro .card { padding: 30px 32px; max-width: 340px; animation: cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .logo-badge { background: #fff; border-radius: 14px; padding: 14px 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .logo-badge img { max-width: 100%; height: auto; max-height: 48px; display: block; } #intro h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; } #intro .subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hud-dim); margin-bottom: 16px; } #intro p { font-size: 13px; line-height: 1.6; color: var(--hud-dim); margin-bottom: 6px; } #intro button.primary { margin-top: 18px; background: var(--hud-text); color: #14171c; border: none; padding: 13px 22px; font-family: inherit; font-size: 14px; font-weight: 600; border-radius: var(--radius-pill); cursor: pointer; width: 100%; transition: transform 0.15s ease, filter 0.15s ease; } #intro button.primary:hover { filter: brightness(0.92); } #intro button.primary:active { transform: scale(0.97); } #hud { position: fixed; bottom: 16px; left: 16px; color: var(--hud-dim); font-size: 12px; letter-spacing: 0.03em; opacity: 0.7; z-index: 20; pointer-events: none; } /* Mobile nav is look-around + pinch-zoom in place, plus Views to jump between rooms — so the look zone covers the full screen. */ #lookzone { position: fixed; inset: 0; z-index: 25; display: none; touch-action: none; } .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; font-size: 13px; } .toggle-row .toggle-label { color: var(--hud-text); } .segmented { display: flex; gap: 4px; background: rgba(255,255,255,0.06); border-radius: var(--radius-pill); padding: 3px; } .segmented button { background: transparent; border: none; color: var(--hud-dim); font-family: inherit; font-size: 12px; padding: 7px 13px; border-radius: var(--radius-pill); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .segmented button.active { background: var(--line); color: #1b1710; font-weight: 700; } #skyPresetRow { display: flex; gap: 6px; flex-wrap: wrap; } #skyPresetRow button { flex: 1; min-width: 64px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: var(--hud-text); font-family: inherit; font-size: 12px; padding: 8px 4px; border-radius: var(--radius-pill); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } #skyPresetRow button.active { border-color: var(--line); background: rgba(201,169,97,0.18); } /* --------------------------------------------------------------- LOGO — the BELLA mark, top left (see #brandMark): a dark tile in the side menu's own style (same black, border, corners, shadow), as wide as the menu; the white architect's scale (Ivan's own drawing, traced as a vector so its lines stay crisp, the new star shape) fills 70% of it. Phones: the size of the Sun tile. ------------------------------------------------------------------ */ #brandMark { position: fixed; z-index: 30; top: calc(16px + var(--top-h, 0px)); left: 16px; width: 60px; height: 60px; box-sizing: border-box; display: none; pointer-events: none; background: var(--dock-bg); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); } #brandMark.visible { display: block; } #brandMark svg { display: block; width: 100%; height: 100%; } /* --------------------------------------------------------------- VIEW CUBE — Revit-style orientation cube, simplified to the 6 faces (no edges/corners) and restyled to match this app's own dark-glass/ gold look rather than Revit's literal gray box. Sits top-left, below the title block, in space that was otherwise empty. It doubles as the old top-right "Orbit" button: clicking any face enters/returns to Orbit and snaps to that face's angle, so Orbit no longer needs its own icon (see #topRightPanel below — just Walk + Sun now). Click-only, not drag-to-orbit — the 3D scene itself already free-orbits on drag, so a second identical drag surface on the cube would be redundant. ------------------------------------------------------------------ */ /* No longer its own fixed-position element — nested directly inside #topRightPanel as a plain flex child (see the HTML), so it just sits in the corner alongside the Walk/Sun icons with no JS-computed centering needed. */ #viewCubeWrap { display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 14px; } #viewCube { width: 60px; height: 60px; perspective: 260px; } #viewCubeInner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .vc-face { position: absolute; width: 60px; height: 60px; left: 0; top: 0; /* Fixed, fairly opaque dark plate (not the shared --hud-bg var) so the cube reads the same against a near-black night sky as it does against a bright day one, instead of blending into whatever's behind it. */ background: rgba(14,15,18,0.86); border: 1px solid rgba(255,255,255,0.22); color: var(--hud-text); font-family: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.15s ease, border-color 0.15s ease; /* Without this, the face currently rotated 180° away (e.g. Back, when Front is showing) is still painted and still clickable underneath the visible faces — hidden here so a click can only ever land on whichever face(s) are actually visible from the current angle. */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .vc-face:hover { background: rgba(201,169,97,0.24); border-color: var(--line); } .vc-face:active { background: rgba(201,169,97,0.4); } .vc-face[disabled] { cursor: default; opacity: 0.35; pointer-events: none; } .vc-front { transform: rotateY(0deg) translateZ(30px); } .vc-back { transform: rotateY(180deg) translateZ(30px); } .vc-right { transform: rotateY(90deg) translateZ(30px); } .vc-left { transform: rotateY(-90deg) translateZ(30px); } .vc-top { transform: rotateX(90deg) translateZ(30px); } .vc-bottom { transform: rotateX(-90deg) translateZ(30px); } /* --------------------------------------------------------------- NAV BARS — Orbit is always the default; there's no manual toggle. Left holds Drawings + the always-visible Views thumbnails; top-right holds Sun (bigger, primary lighting control) and Settings. ------------------------------------------------------------------ */ /* Shared base for both the Walk joystick (bottom-right, right thumb) and the Look Around joystick (bottom-left, left thumb) — reversed from the more common movement-on-left convention per the client's own request. Each gets a label above it (see .joystick-label) so it's obvious which is which at a glance. Colored (not translucent gray) so both read clearly in peripheral vision against any background — sky, interior, grass — without looking straight at them. */ .joystick-base { position: fixed; bottom: calc(var(--dock-h) + 30px); width: 100px; height: 100px; border-radius: 50%; z-index: 32; display: none; touch-action: none; background: rgba(201,169,97,0.24); border: 2px solid rgba(201,169,97,0.7); box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .joystick-base.visible { display: block; } .joystick-base .stick { position: absolute; width: 42px; height: 42px; border-radius: 50%; top: 29px; left: 29px; pointer-events: none; background: radial-gradient(circle at 35% 30%, #f0d38c, #c9a961 65%, #a3813f 100%); box-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 14px rgba(201,169,97,0.65); } .joystick-label { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hud-text); text-shadow: 0 1px 4px rgba(0,0,0,0.7); white-space: nowrap; pointer-events: none; } #joystick { right: 20px; } /* Up / down while walking (phones): two buttons just left of the Walk joystick. */ /* SPEED METER — Normal / Run (2x) / Fly (4x). Computer: a pill beside the Walk button while walking (keys 1 / 2 / 3). Phone: three stacked steps between the Look Around joystick and the Height buttons, filling upward like a meter. */ .walk-row { display: flex; align-items: center; gap: 8px; } #speedPill { display: none; padding: 4px; gap: 2px; border-radius: 14px; background: var(--dock-bg); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } body.walking-desktop #speedPill { display: flex; } .speed-seg { cursor: pointer; user-select: none; touch-action: none; text-align: center; white-space: nowrap; color: var(--hud-dim); font-size: 12px; font-weight: 600; line-height: 1; } #speedPill .speed-seg { padding: 9px 10px; border-radius: 10px; } #speedPill .speed-seg:hover { color: var(--hud-text); } #speedPill .speed-seg.active { color: var(--line); background: rgba(201,169,97,0.18); } #speedPad { position: fixed; left: 110px; bottom: calc(var(--dock-h) + 30px); z-index: 32; width: 52px; display: none; flex-direction: column; gap: 4px; align-items: stretch; } #speedPad.visible { display: flex; } #speedPad .joystick-label { position: static; transform: none; text-align: center; margin-bottom: 2px; } #speedPad .speed-seg { padding: 11px 0; border-radius: 10px; color: var(--hud-text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; background: rgba(201,169,97,0.12); border: 1px solid rgba(201,169,97,0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #speedPad .speed-seg.filled { background: rgba(201,169,97,0.4); } #speedPad .speed-seg.active { background: rgba(201,169,97,0.75); color: #1b1710; border-color: #c9a961; } #speedToast { position: fixed; z-index: 36; left: 50%; bottom: calc(var(--dock-h) + 70px); transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; pointer-events: none; background: var(--dock-bg); border: 1px solid rgba(255,255,255,0.14); color: var(--line); opacity: 0; transition: opacity 0.2s ease; } #speedToast.show { opacity: 1; } #heightPad { position: fixed; right: 130px; bottom: calc(var(--dock-h) + 30px); z-index: 32; display: none; flex-direction: column; gap: 8px; align-items: center; } #heightPad.visible { display: flex; } #heightPad .joystick-label { position: static; transform: none; margin-bottom: -2px; } #heightPad button { width: 46px; height: 46px; border-radius: 50%; touch-action: none; cursor: pointer; background: rgba(201,169,97,0.24); border: 2px solid rgba(201,169,97,0.7); color: var(--hud-text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(0,0,0,0.35); display: grid; place-items: center; } #heightPad button.held { background: rgba(201,169,97,0.6); } #heightPad svg { width: 20px; height: 20px; } #lookJoystick { left: 20px; } /* --------------------------------------------------------------- DOCK — along the bottom. The Views row is always on screen once the model is open, walking included. On phones the tool nav sits right above it, and every tool panel and the rest of the menu slide up above the nav (see the phone rules near the end of this sheet). JS keeps --dock-h current — the distance from the bottom of the screen to the dock's top edge — so panels, joysticks and the right stack can sit just above it. ------------------------------------------------------------------ */ :root { --dock-h: 0px; --dock-bg: rgba(14,15,18,0.94); } #dock { position: fixed; z-index: 45; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: min(900px, calc(100vw - 240px)); display: none; flex-direction: column; } #dock.visible { display: flex; } body:has(#dock.visible) #hud { display: none; } #toolNav, .sheet-grip { display: none; } #viewsRow { min-width: 0; padding: 6px; border-radius: 16px; background: var(--dock-bg); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } #viewsRow:not(:has(.view-thumb-btn)):not(.can-save) { display: none; } .view-thumb { position: relative; flex: none; } .view-more { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: rgba(14,15,18,0.72); color: #fff; font: 700 14px inherit; line-height: 1; cursor: pointer; } .view-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: grid; min-width: 190px; padding: 4px; border-radius: 10px; background: rgba(14,15,18,0.97); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 8px 24px rgba(0,0,0,0.45); } .view-menu button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--hud-text); font: 600 13px inherit; text-align: left; cursor: pointer; white-space: nowrap; } .view-menu button:disabled { opacity: .4; cursor: default; } .view-tool { min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: var(--hud-text); font: 600 12px inherit; cursor: pointer; white-space: nowrap; } .view-tool.on { border-color: var(--line); color: var(--line); } #viewsRow.can-save { min-width: 250px; } #viewsRow.can-save .views-toggle { display: inline-flex; vertical-align: middle; } .views-add { margin: 0 2px 4px 8px; vertical-align: middle; } .view-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .view-form[hidden] { display: none; } .view-name { flex: 1; min-width: 0; min-height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: var(--hud-text); font: 13px inherit; } @media (hover:hover) { .view-tool:hover, .view-more:hover { border-color: var(--line); color: var(--line); } .view-menu button:hover:not(:disabled) { background: rgba(255,255,255,0.08); } } .views-toggle { display: none; } /* Computers: a "Views" header that folds the thumbnails away; the names are bigger, bolder and in little pills. */ @media (min-width: 701px) and (min-height: 501px) { .views-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 2px; padding: 5px 10px 5px 8px; border: 0; border-radius: 10px; background: none; color: var(--hud-text); font: 800 14px inherit; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; } .views-toggle:hover { background: rgba(255,255,255,0.08); } .views-toggle:focus-visible { outline: 2px solid #c9a961; outline-offset: -2px; } .views-toggle svg { width: 16px; height: 16px; display: block; color: #c9a961; transition: transform 0.15s ease; } .views-toggle .views-count { color: #c9a961; font-weight: 700; } #viewsRow.collapsed .views-toggle { margin: 0; } #viewsRow.collapsed .views-toggle svg { transform: rotate(180deg); } #viewsRow.collapsed #viewThumbRow { display: none; } #viewsRow.collapsed { padding: 4px; } .view-thumb-btn img { width: 96px; height: 62px; } .view-thumb-btn span { width: auto; max-width: 96px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.09); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; transition: background 0.15s ease, color 0.15s ease; } .view-thumb-btn:hover span { background: rgba(201,169,97,0.22); color: #c9a961; } } #viewThumbRow { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } #viewThumbRow::-webkit-scrollbar { display: none; } .view-thumb-btn { background: transparent; border: none; cursor: pointer; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px; border-radius: 10px; font-family: inherit; transition: background 0.15s ease; } .view-thumb-btn:hover { background: rgba(255,255,255,0.08); } .view-thumb-btn:active { transform: scale(0.96); } .view-thumb-btn img { width: 80px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); display: block; background: #2a2c31; } /* The full name, on up to two lines, instead of a cut-off one. */ .view-thumb-btn span { width: 80px; font-size: 12px; line-height: 1.2; color: var(--hud-text); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* --------------------------------------------------------------- RIGHT STACK — Walk and Orbit, bottom-right just above the dock. Sun / Walk / Orbit are each their own dark tile, the side rail's look (Walk and Orbit keep their original solid figures, white): icon only; the mode you're in (and the Sun while its panel is open) turns gold and shows its name beside the icon, the tile widening to the left. While walking on a phone the stack moves up out of the joystick's way. ------------------------------------------------------------------ */ #modeStack { position: fixed; z-index: 33; right: 16px; bottom: calc(var(--dock-h) + 12px); display: none; flex-direction: column; align-items: flex-end; gap: 8px; transition: bottom 0.25s ease, opacity 0.2s ease; } #modeStack.visible { display: flex; } #modeToggle { display: contents; } /* Walking paused (Esc): a card in the middle of the screen with the two ways on, glowing gold so it can't be missed. A click on the view still carries on walking. */ #walkPaused { position: fixed; z-index: 36; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 26px 16px; border-radius: 20px; background: var(--dock-bg); border: 2px solid var(--line); box-shadow: 0 14px 44px rgba(0,0,0,0.5); color: var(--hud-text); animation: walkPausedGlow 1.6s ease-in-out infinite; } @keyframes walkPausedGlow { 0%, 100% { box-shadow: 0 14px 44px rgba(0,0,0,0.5), 0 0 0 0 rgba(201,169,97,0.55); } 50% { box-shadow: 0 14px 44px rgba(0,0,0,0.5), 0 0 0 12px rgba(201,169,97,0); } } #walkPaused[hidden] { display: none; } #walkPaused .wp-title { font-size: 22px; font-weight: 700; letter-spacing: 0.01em; } #walkPaused .wp-btns { display: flex; gap: 10px; } #walkPaused .wp-btn { min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: inherit; font: 700 16px inherit; cursor: pointer; white-space: nowrap; } #walkPaused .wp-btn.primary { background: var(--line); border-color: var(--line); color: #1b1710; } #walkPaused .wp-btn:hover { box-shadow: 0 0 0 1.5px var(--line), 0 0 10px rgba(201,169,97,0.55); } #walkPaused .wp-btn:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; } #walkPaused .wp-keys { font-size: 12px; opacity: 0.7; } .mode-btn { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; cursor: pointer; background: var(--dock-bg); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); color: var(--hud-text); font-family: inherit; font-size: 14px; line-height: 1; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .mode-btn svg { width: 26px; height: 26px; flex: none; display: block; } .mode-btn:hover { background-color: #23252b; } .mode-btn:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; } .mode-btn.active, .mode-btn[aria-expanded="true"] { color: var(--line); background-image: linear-gradient(rgba(201,169,97,0.13), rgba(201,169,97,0.13)); } .mode-label { display: none; padding-left: 4px; } .mode-btn.active .mode-label, .mode-btn[aria-expanded="true"] .mode-label { display: inline; } #sunBtn.sun-off svg { opacity: 0.55; } /* Top-right — just the ViewCube now (Walk moved to bottom-left, Sun/ Cross-Sections/Settings live in the hamburger drawer). */ /* The ViewCube, and the Sun tile under it, about an icon's height apart (right edges lined up, so the tile widens to the left when open). */ #topRightPanel { position: fixed; top: calc(20px + var(--top-h, 0px)); right: 20px; z-index: 32; display: none; flex-direction: column; align-items: flex-end; gap: 44px; } #topRightPanel.visible { display: flex; } .nav-btn { background: transparent; border: none; color: var(--hud-dim); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 14px; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .nav-btn:hover { background: rgba(255,255,255,0.06); } .nav-btn.active { background: var(--active-nav-bg); } .nav-btn:active { transform: scale(0.96); } /* Hamburger/Walk/Orbit: just the white glyph and its label, no box, plate or gold glow behind them (portal step 5, requested). A glass plate was added earlier because a bare light icon nearly vanished in a dark night scene; instead, glyph and label now carry their own tight dark halo, which keeps them legible over a bright sky, a white wall and a night scene alike. */ /* --------------------------------------------------------------- TRACED GLOW — a thin gold outline that hugs each element's own rounded shape, plus a soft outward halo so it still reads clearly against a bright sky or white wall. Requested for the Walk/Sun icons (which deliberately have no background box — see #topRightPanel above) and the Materials/Views panels, so all four stay easy to spot without looking like a heavy UI border. Layered as extra box-shadow rings alongside whatever shadow an element already has, never replacing it. ------------------------------------------------------------------ */ .traced-glow { box-shadow: 0 0 0 1px rgba(201,169,97,0.55), 0 0 10px rgba(201,169,97,0.55), 0 0 22px rgba(201,169,97,0.3); } /* --------------------------------------------------------------- SUN PANEL — opened from the Sun button under the ViewCube; centred at the top, just under the logo (JS sets its top: see placeSunPanel()). The time of day is a plain line with a gold sun for the handle and big 5 AM / 10 PM ends so it reads as a time slider at a glance. (Sun on/off is in Settings.) ------------------------------------------------------------------ */ #sunPanel { position: fixed; z-index: 44; display: none; padding: 14px 18px 16px; left: 50%; translate: -50% 0; width: 330px; } #sunPanel.visible { display: block; animation: cardIn 0.2s cubic-bezier(0.16,1,0.3,1); } .sun-hand { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); } .sun-hand label { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--hud-dim); } .sun-hand input { width: 100%; accent-color: var(--line); } .sun-hint { margin: 2px 0 0; font-size: 12px; color: var(--hud-dim); } .sun-date-head { margin-top: 12px; } .sun-north { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); } .sun-north label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hud-dim); } .sun-north input { width: 74px; margin-left: auto; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: inherit; font: inherit; } @media (max-width: 700px), (max-height: 500px) { .sun-hint { display: none; } .sun-hand input { min-height: 34px; } } .sun-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .sun-panel-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hud-dim); } #sunTimeReadout { font-size: 22px; font-weight: 700; color: var(--hud-text); font-variant-numeric: tabular-nums; } #sunTimeSlider, #sunDate { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 4px 0 0; background: transparent; cursor: pointer; outline: none; } #sunTimeSlider::-webkit-slider-runnable-track, #sunDate::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: rgba(242,241,238,0.75); } #sunTimeSlider::-moz-range-track, #sunDate::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(242,241,238,0.75); } #sunTimeSlider::-webkit-slider-thumb, #sunDate::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: var(--line); border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(201,169,97,0.25), 0 2px 6px rgba(0,0,0,0.5); } #sunTimeSlider::-moz-range-thumb, #sunDate::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--line); border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(201,169,97,0.25), 0 2px 6px rgba(0,0,0,0.5); } #sunTimeSlider:focus-visible::-webkit-slider-thumb, #sunDate:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--line); } .sun-ends { display: flex; justify-content: space-between; margin: -4px 0 2px; font-size: 16px; font-weight: 700; color: var(--hud-text); } /* Sun off: the line and the times dim, so it's clear the light is off rather than looking broken. */ #sunPanel.sun-off #sunTimeSlider, #sunPanel.sun-off #sunDate, #sunPanel.sun-off .sun-ends, #sunPanel.sun-off #sunTimeReadout, #sunPanel.sun-off #sunDateReadout { opacity: 0.4; } /* --------------------------------------------------------------- MENU DRAWER — hamburger opens this column, top-left. Each top-level item (Design Options / Floor Plan / Cross-Sections / Settings) is a row; clicking one slides out a nested column to its right holding that item's controls. Design Options nests one level deeper still (categories, then that category's materials) — see the JS for the alphabetical/alphanumeric sort this was specifically requested for. Columns are siblings positioned by JS (left offset = the column before it's own width), not by any fixed CSS width, since content width varies (a 2-word category name vs. a materials grid). ------------------------------------------------------------------ */ /* While a subpanel (Design Options/Cross-Sections/Settings) is open, the main drawer slides mostly out of view — see showSubpanel(), which sets the actual translateX distance so only a slim sliver still peeks out, enough to show the client it's still there, one tap back. */ /* Replay Tour reads as a real button rather than a plain list row, so it stands out from Design Options/PDF Drawings/Cross-Sections/ Settings below it — a pill shape in the app's own gold accent, matching how "Reset All" already stands out elsewhere in the menu. */ /* Grouped menu (portal step 5): View / Project / App / Admin, Sign out on its own at the bottom. A group, or Sign out, with nothing showing (e.g. Admin for a client) disappears, label and all. */ /* Nested slide-out columns — same panel look as the drawer itself, one fixed column to its right. Design Options' materials list replaces its categories list in that same spot (rather than adding a third column) — simpler, and works the same on narrow screens. */ /* Layers rows: eye, name + count, isolate. */ #layersBody { display: flex; flex-direction: column; gap: 2px; } .layers-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--hud-text); } .layers-top .layers-note { opacity: 0.7; } .layers-empty { font-size: 13px; opacity: 0.7; padding: 6px 2px; } .layer-row { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 12px; } /* The list's column names, like a table's: small gold capitals over a fine gold line */ .layer-cols { display: flex; align-items: flex-end; gap: 8px; margin: 2px 0 4px; padding: 0 4px 7px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--b-gold, #c9a961); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(201,169,97,0.55), rgba(201,169,97,0.12)) 1; } .layer-col-eye { flex: none; min-width: 36px; text-align: center; } .layer-col-name { flex: 1; min-width: 0; color: rgba(255,255,255,0.45); } .layer-row.isolated { background: rgba(201,169,97,0.16); } .layer-name.pickable { cursor: pointer; padding: 8px 4px; border-radius: 8px; } .layer-row.picked { background: rgba(201,169,97,0.16); box-shadow: 0 0 0 1.5px #c9a961; } @media (hover: hover) { .layer-row:has(.pickable):hover { box-shadow: 0 0 0 1.5px #c9a961, 0 0 10px rgba(201,169,97,0.5); } } .layer-name.pickable:focus-visible { outline: 2px solid #c9a961; outline-offset: 1px; } /* The Properties dock (js/portal/props-dock.js adds html.props-docked on 1100px+ screens). */ #propsDock { display: contents; } .props-bar { display: none; } :root { --props-w: 0px; } :root.props-docked { --props-w: 360px; } :root.props-docked.props-collapsed { --props-w: 56px; } html.props-docked #propsDock { position: fixed; top: var(--top-h, 0px); right: 0; bottom: 0; width: var(--props-w); z-index: 38; display: flex; flex-direction: column; overflow: hidden; background: var(--dock-bg); border-left: 1px solid rgba(255,255,255,0.12); box-shadow: -10px 0 30px rgba(0,0,0,0.35); transition: width 0.2s ease; } html.props-docked .props-bar { display: flex; align-items: center; gap: 6px; padding: 10px; flex: none; border-bottom: 1px solid rgba(255,255,255,0.1); } .props-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--hud-text); font: 600 13px inherit; cursor: pointer; white-space: nowrap; } .props-tab:hover { border-color: #c9a961; } .props-tab.on { color: #c9a961; background: rgba(201,169,97,0.13); } .props-tab .props-ico { width: 24px; height: 24px; display: block; flex: none; } .props-collapse { margin-left: auto; flex: none; width: 36px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--hud-text); cursor: pointer; } .props-collapse:hover { border-color: #c9a961; } .props-collapse .props-ico { width: 20px; height: 20px; display: block; } html.props-docked #propsDock .props-bar .props-tab:focus-visible, html.props-docked .props-collapse:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; } html.props-docked #propsDock #layersPanel { display: flex !important; flex-direction: column; position: static !important; flex: 1 1 auto; min-height: 0; width: auto !important; max-height: none !important; height: auto !important; padding: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; overflow: hidden; } html.props-docked #propsDock #layersPanel .menu-subpanel-title { padding-top: 14px; } html.props-docked #propsDock #crossSectionPanel { display: block !important; position: static !important; flex: none; width: auto !important; max-height: none !important; overflow: visible; padding: 12px 0 10px; border: 0 !important; border-top: 1px solid rgba(255,255,255,0.14) !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; animation: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.props-docked.props-collapsed #propsDock #layersPanel, html.props-docked.props-collapsed #propsDock #crossSectionPanel { display: none !important; } html.props-docked.props-collapsed .props-bar { flex-direction: column; border-bottom: 0; padding: 14px 6px; gap: 16px; } html.props-docked.props-collapsed .props-tab { width: 44px; padding: 0; justify-content: center; } html.props-docked.props-collapsed .props-tab .lbl { display: none; } html.props-docked.props-collapsed .props-collapse { margin: 0; width: 44px; flex: none; } html.props-docked.props-collapsed .props-collapse .props-ico { transform: rotate(180deg); } /* The right-hand controls and the centred ones keep clear of the dock. */ html.props-docked #topRightPanel { right: calc(var(--props-w) + 20px); } html.props-docked #modeStack { right: calc(var(--props-w) + 16px); } html.props-docked #heightPad { right: calc(var(--props-w) + 130px); } html.props-docked #joystick { right: calc(var(--props-w) + 20px); } html.props-docked #dock, html.props-docked .existing-toggle, html.props-docked .top-notices, html.props-docked .info-hint, html.props-docked #speedToast, html.props-docked #sunPanel, html.props-docked .tool-bar, html.props-docked #walkPaused { left: calc(50% + (var(--rail-w) - var(--props-w)) / 2); } /* The Views row sits in the room beside the chat, not under it (the chat sets --chat-w; it is 0 on phones). */ @media (min-width: 701px) and (min-height: 501px) { html #dock { left: calc(50% + (var(--rail-w, 0px) + var(--chat-w, 0px) - var(--props-w, 0px)) / 2); max-width: calc(100vw - var(--rail-w, 0px) - var(--props-w, 0px) - var(--chat-w, 0px) - 48px); } } /* The left menu, fixed to the edge at full height like the dock on the right; the logo sits at its top. */ :root { --rail-w: 0px; --top-h: 0px; } /* Home, in the top left corner of the walkthrough on computers (it was the menu's first button) */ .home-corner { display: none; position: fixed; z-index: 36; top: calc(14px + var(--top-h, 0px)); left: 16px; width: 48px; height: 48px; padding: 0; place-items: center; cursor: pointer; border-radius: 14px; background: var(--dock-bg, rgba(14,15,18,0.94)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); color: var(--hud-text, #f2f1ee); } .home-corner svg { width: 26px; height: 26px; display: block; } .home-corner:hover, .home-corner:focus-visible { outline: none; border-color: var(--b-gold, #c9a961); box-shadow: 0 0 0 1px var(--b-gold, #c9a961), 0 0 12px rgba(201,169,97,0.4); } @media (min-width: 701px) and (min-height: 501px) { html.has-banner #brandMark { visibility: hidden; } /* The left menu is gone on computers: its buttons live in the title banner now (js/portal/banner-tools.js). */ html.has-banner { --rail-right: 16px; --rail-top: calc(16px + var(--top-h, 0px)); } html.has-banner:not(.props-docked) .lc:not(.dc) { left: 16px; } html.has-banner.props-docked .admin-top { left: 76px !important; } html.has-banner .home-corner { display: grid; } } html.props-docked #brandMark { z-index: 41; top: calc(12px + var(--top-h, 0px)); left: calc((var(--rail-w) - 60px) / 2); background: none; border: 0; box-shadow: none; transition: left 0.2s ease; } html.props-docked .admin-top { left: calc(var(--rail-w) + 14px) !important; top: calc(16px + var(--top-h, 0px)) !important; transform: none !important; } /* Drawings, Schedules, Comments, Measure and Settings slide out from the left menu: flush against it, full height. */ html.props-docked .sheet, html.props-docked .sheet.sheet-wide, html.props-docked .tool-bar.dock-tool, html.props-docked #settingsPanel { left: var(--rail-w); top: var(--top-h, 0px); bottom: 0; right: auto; width: 360px; height: auto; max-height: none; transform: none; border-radius: 0; border-width: 0 1px 0 0; box-shadow: 10px 0 30px rgba(0,0,0,0.35); z-index: 39; animation: railSlideOut 0.26s cubic-bezier(0.16, 1, 0.3, 1); } html.props-docked .sheet.sheet-wide { width: min(720px, calc(100vw - var(--rail-w) - var(--props-w) - 40px)); } html.props-docked #settingsPanel { padding-top: 16px; overflow-y: auto; } html.props-docked .tool-bar.dock-tool { overflow-y: auto; padding: 16px; } @keyframes railSlideOut { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* The dock's top bar: big icons only. Layers is the list; Finishes opens when an element is tapped. */ html.props-docked .props-bar { padding: 10px 12px; gap: 6px; } /* The icons are the left menu's size (26px, name underneath), so the two sides match. */ .props-tab { flex-direction: column; justify-content: flex-start; gap: 4px; flex: 1 1 0; min-width: 0; max-width: 76px; width: auto; height: auto; min-height: 0; padding: 8px 2px 7px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 1.15; border-color: transparent; background: none; } .props-tab:hover { background: rgba(255,255,255,0.06); border-color: transparent; } .props-tab.on { background: rgba(201,169,97,0.13); } .props-tab .props-ico { width: 26px; height: 26px; } .props-tab .lbl { display: block; white-space: normal; text-align: center; } .props-collapse { width: 36px; height: 40px; } html.props-docked.props-collapsed .props-tab { flex: none; width: 44px; max-width: none; height: 44px; padding: 0; justify-content: center; } /* the column has no spare height to share out */ html.props-docked.props-collapsed .props-tab .lbl { display: none; } html.props-docked #propsDock #layersPanel .menu-subpanel-title { display: none; } html.props-docked #propsDock #layersPanel[data-tab="layers"] .lf-materials { display: none; } html.props-docked #propsDock #layersPanel[data-tab="materials"] #layersBody { display: none; } html.props-docked #propsDock #layersPanel #layersBody, html.props-docked #propsDock #layersPanel .lf-materials { flex: 1 1 auto; border-top: 0; } html.props-docked #propsDock #layersPanel #layersBody { padding-top: 12px; } .lf-layer-select { width: 100%; min-height: 40px; margin: 0 0 10px; padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: inherit; font: inherit; font-size: 14px; } /* The drop-down lists open dark too (the browser's own list was white with pale text). */ .lf-layer-select, .layer-mat-scale { color-scheme: dark; } .lf-layer-select option { background: #1f2228; color: #f2f1ee; } .lf-layer-select option:checked { background: #3a3426; color: #c9a961; } .layer-mat-row.tight { align-items: center; gap: 6px; margin: 0 0 6px; } .layer-mat-status { min-height: 0; } .layer-mat-status:empty { display: none; } .lf-layer-select { margin: 0 0 6px; } /* In the dock the swatches take whatever height is left; the scale / save rows stay at the bottom. */ html.props-docked #propsDock .lf-materials { display: flex; flex-direction: column; overflow: hidden; padding: 10px 14px 8px; } /* The dock as two raised cards: Layers & Finishes, and the gold-edged Cut Sections (js/portal/props-dock.js keeps its Off / Cutting tag). */ html.props-docked #propsDock { gap: 10px; padding-bottom: 10px; } html.props-docked #propsDock #layersPanel { margin: 0 10px; flex: 1 1 auto; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 16px !important; background: rgba(255,255,255,0.03) !important; } html.props-docked #propsDock #crossSectionPanel { margin: 0 10px; padding: 12px !important; border: 1.5px solid #c9a961 !important; border-radius: 16px !important; background: linear-gradient(180deg, #242830, #1b1e24) !important; box-shadow: 0 0 0 3px rgba(201,169,97,0.12) !important; } html.props-docked #propsDock #crossSectionPanel .menu-subpanel-title { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,0.1); } html.props-docked #propsDock #crossSectionPanel .menu-panel-body { padding: 0; } /* Walk with the mouse (js/viewer.js, WALK WITH THE MOUSE): the ring in the middle while the left or wheel button drives. */ .walk-stick { position: fixed; z-index: 40; left: calc(50% + (var(--rail-w, 0px) - var(--props-w, 0px)) / 2); top: calc(50% + var(--top-h, 0px) / 2); width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(201,169,97,0.75); background: rgba(14,15,18,0.25); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 18px rgba(201,169,97,0.25); } .walk-stick[hidden] { display: none; } .walk-stick-dot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #f5c542; box-shadow: 0 0 10px rgba(245,197,66,0.7); } /* The keys' first-time card: the see-through glass of the Measure panel. */ .keys-tip { position: fixed; z-index: 60; top: calc(var(--top-h, 0px) + 76px); left: calc(50% + (var(--rail-w, 0px) - var(--props-w, 0px)) / 2); transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); background: rgba(14,15,18,0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); color: #f2f1ee; font: 400 13px/1.45 var(--b-font, inherit); text-shadow: 0 1px 2px rgba(0,0,0,0.6); transition: opacity 0.3s ease; } .keys-tip.out { opacity: 0; } .keys-tip p { margin: 0 0 6px; } .keys-tip b { color: #c9a961; } .keys-tip-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .keys-tip button { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(14,15,18,0.62); color: #f2f1ee; font: 700 13px inherit; cursor: pointer; } .keys-tip .keys-tip-ok { border-color: #c9a961; background: #c9a961; color: #1b1710; } @media (hover: hover) { .keys-tip button:hover { box-shadow: 0 0 0 1px #c9a961, 0 0 10px rgba(201,169,97,0.5); } } /* Cut Sections is a tab of its own: its card fills the dock while it is open, and only then. The slider gives way to the cut arrows on the model, and the three directions sit in a bar under Existing | Overlay | Proposed (js/portal/cut-gizmo.js). */ html.props-docked:not(.props-cut) #propsDock #crossSectionPanel, html.props-docked.props-cut #propsDock #layersPanel { display: none !important; } html.props-docked.props-cut #propsDock #crossSectionPanel { flex: 0 1 auto; overflow-y: auto; } html.props-docked #propsDock #crossSectionSlider { display: none; } .cut-arrows-hint { display: none; } html.props-docked #propsDock .cut-arrows-hint { display: block; margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--hud-dim); } .cut-arrows-hint b { font-weight: 700; } .cut-arrows-hint .ax-x { color: #ff7a7e; } .cut-arrows-hint .ax-z { color: #5fd58a; } .cut-arrows-hint .ax-y { color: #6fa3ff; } .cut-bar { position: fixed; z-index: 34; top: calc(max(16px, env(safe-area-inset-top)) + var(--top-h, 0px)); left: calc(50% + (var(--rail-w, 0px) - var(--props-w, 0px)) / 2); transform: translateX(-50%); padding: 4px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(20,22,26,0.62); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .cut-bar[hidden] { display: none; } .cut-bar #crossSectionAxisToggle { width: auto; background: none; padding: 0; gap: 4px; } .cut-bar #crossSectionAxisToggle button { width: 92px; min-height: 0; border: 1px solid transparent; box-shadow: inset 0 -2px 0 var(--ax, transparent); } .cut-bar #crossSectionAxisToggle button[data-axis="x"] { --ax: #e5484d; } .cut-bar #crossSectionAxisToggle button[data-axis="z"] { --ax: #3fbf6f; } .cut-bar #crossSectionAxisToggle button[data-axis="y"] { --ax: #3b82f6; } .cut-bar #crossSectionAxisToggle button:not(.active) { color: var(--hud-text); } /* an arrow under the pointer, or being dragged, lights its icon */ .cut-bar #crossSectionAxisToggle button.lit { border-color: #f5c542; box-shadow: inset 0 -2px 0 var(--ax), 0 0 0 1px #f5c542, 0 0 14px rgba(245,197,66,0.55); } @media (hover: hover) { .cut-bar #crossSectionAxisToggle button:hover { border-color: #c9a961; box-shadow: inset 0 -2px 0 var(--ax), 0 0 10px rgba(201,169,97,0.45); } } .cut-bar #crossSectionAxisToggle button:focus-visible { outline: none; border-color: #c9a961; box-shadow: 0 0 0 1px #c9a961, 0 0 10px rgba(201,169,97,0.45); } html.props-docked #propsDock #crossSectionPanel .menu-subpanel-title:focus-visible { outline: 2px solid #c9a961; outline-offset: 3px; border-radius: 8px; } .cut-title-ico { width: 26px; height: 26px; flex: none; display: block; } .cut-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #2a2e35; color: #9b9c98; font-size: 12px; font-weight: 700; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0; } .cut-pill.on { background: rgba(201,169,97,0.2); color: #c9a961; box-shadow: inset 0 0 0 1px #c9a961; } /* The layer chooser (narrow) with "Applies to" beside it; the action bar pinned under the swatches; tiling folded away. */ .layer-mat-bar { display: flex; gap: 6px; align-items: center; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); } .layer-mat-bar .layer-mat-btn.primary { flex: 1; } .layer-mat-bar .layer-mat-btn { white-space: nowrap; padding: 0 10px; } .layer-mat-cap { font-size: 12px; opacity: 0.8; } /* Modern, slim scrollbars in the viewer's panels (the chunky old ones are gone). */ .menu-subpanel, #layersBody, .lf-materials, .qty-detail, .sheet, .align-panel, #propsDock, .info-card { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; } .menu-subpanel::-webkit-scrollbar, #layersBody::-webkit-scrollbar, .lf-materials::-webkit-scrollbar, .qty-detail::-webkit-scrollbar, .sheet::-webkit-scrollbar, .align-panel::-webkit-scrollbar { width: 8px; height: 8px; } .menu-subpanel::-webkit-scrollbar-track, #layersBody::-webkit-scrollbar-track, .lf-materials::-webkit-scrollbar-track, .qty-detail::-webkit-scrollbar-track, .sheet::-webkit-scrollbar-track, .align-panel::-webkit-scrollbar-track { background: transparent; } .menu-subpanel::-webkit-scrollbar-thumb, #layersBody::-webkit-scrollbar-thumb, .lf-materials::-webkit-scrollbar-thumb, .qty-detail::-webkit-scrollbar-thumb, .sheet::-webkit-scrollbar-thumb, .align-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.24); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .menu-subpanel::-webkit-scrollbar-thumb:hover, #layersBody::-webkit-scrollbar-thumb:hover, .lf-materials::-webkit-scrollbar-thumb:hover, .qty-detail::-webkit-scrollbar-thumb:hover, .sheet::-webkit-scrollbar-thumb:hover, .align-panel::-webkit-scrollbar-thumb:hover { background: rgba(201,169,97,0.7); background-clip: padding-box; } .top-notice { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 6px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--dock-bg, rgba(14,15,18,0.94)); border: 1px solid #c9a961; box-shadow: 0 10px 30px rgba(0,0,0,0.4); color: var(--hud-text, #f2f1ee); font-size: 13px; font-weight: 600; } .top-notice[hidden] { display: none; } .top-notice button { appearance: none; border: 1px solid #c9a961; border-radius: 999px; background: rgba(201,169,97,0.16); color: #c9a961; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 14px; cursor: pointer; } .qty-bar[hidden] { display: none; } /* Compact tiling row, and a shorter Cut Sections card so the swatches get the room. */ html.props-docked #propsDock #crossSectionPanel .menu-panel-body { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; } html.props-docked #propsDock #crossSectionPanel .toggle-row { grid-column: 1 / -1; } html.props-docked #propsDock #crossSectionPanel .toggle-label { display: none; } html.props-docked #propsDock #crossSectionPanel .dial-hint { grid-row: 2; grid-column: 1; margin: 0; } html.props-docked #propsDock #crossSectionPanel .cut-actions { grid-row: 2; grid-column: 2; margin: 0; } html.props-docked #propsDock #crossSectionPanel .cut-actions button { width: auto; flex: none; margin: 0; padding: 4px 14px; min-height: 30px; } html.props-docked #propsDock #crossSectionPanel #crossSectionSlider { grid-row: 3; grid-column: 1 / -1; width: 100%; margin: 0; } /* Walk and Orbit sit in the top-right column with the ViewCube and the Sun, a tile gap under the Sun (computers). */ html.nav-clustered #modeStack { position: static; right: auto; bottom: auto; margin-top: -36px; transition: opacity 0.2s ease; } html.nav-clustered.props-docked #modeStack { right: auto; } /* The "what is on it now" strip in Finishes: the finish's picture, its name and type, the size, Preview / Saved. */ .cut-actions { display: flex; gap: 6px; margin-top: 10px; } .cut-actions button { flex: 1; text-align: center; border-radius: 999px; background: rgba(255,255,255,0.08); } .cut-actions button[aria-pressed="true"] { color: #c9a961; background: rgba(201,169,97,0.15); } .settings-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .settings-tool { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: inherit; font: 600 13px inherit; cursor: pointer; white-space: nowrap; } .settings-tool:hover, .settings-tool.on { border-color: #c9a961; color: #c9a961; } .settings-tool:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; } .settings-tool[hidden] { display: none; } html.props-docked #adminToolsRow { display: none; } /* the Properties dock has the Align tab */ a.settings-tool { display: inline-flex; align-items: center; text-decoration: none; } /* Layers & Finishes: the layer list on top, the finishes window below (desktop); two tabs on phones. */ /* The top-centre notice area (under the Existing | Proposed switch): the quantities bar today. */ .top-notices { position: fixed; z-index: 33; left: 50%; top: calc(16px + var(--top-h, 0px)); transform: translateX(-50%); width: min(520px, calc(100vw - 150px)); font-family: var(--b-font, inherit); } .top-notices[hidden] { display: none; } .qty-bar { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--dock-bg, rgba(14,15,18,0.94)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .qty-toggle { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--hud-text, #f2f1ee); font: 600 13px inherit; cursor: pointer; text-align: left; } .qty-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qty-chev svg { width: 18px; height: 18px; display: block; transition: transform 0.15s ease; } .top-notices.open .qty-chev svg { transform: rotate(180deg); } .qty-export { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--hud-text, #f2f1ee); cursor: pointer; } .qty-export[hidden] { display: none; } .qty-export svg { width: 20px; height: 20px; } .qty-toggle:focus-visible, .qty-export:focus-visible { outline: none; box-shadow: 0 0 0 1.5px #c9a961, 0 0 10px rgba(201,169,97,0.55); } @media (hover: hover) { .qty-toggle:hover, .qty-export:hover { box-shadow: 0 0 0 1.5px #c9a961, 0 0 10px rgba(201,169,97,0.55); } } .qty-detail { margin-top: 6px; padding: 12px; max-height: min(50vh, 420px); overflow: auto; border-radius: 14px; background: var(--dock-bg, rgba(14,15,18,0.94)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); color: var(--hud-text, #f2f1ee); } .qty-detail[hidden] { display: none; } .lf-tabs { display: none; } .lf-materials { padding: 10px 16px 6px; } .lf-empty { font-size: 13px; opacity: 0.7; padding: 4px 0; } @media (min-width: 701px) and (min-height: 501px) { #layersPanel.visible { display: flex; flex-direction: column; overflow: hidden; height: min(760px, calc(100vh - var(--rail-top, 20px) - 20px)); } #layersPanel .menu-subpanel-title { flex: none; } #layersPanel #layersBody { flex: 1 1 45%; min-height: 140px; overflow-y: auto; } #layersPanel .lf-materials { flex: 1 1 55%; min-height: 170px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.14); } } @media (max-width: 700px), (max-height: 500px) { .lf-tabs { display: flex; gap: 6px; padding: 8px 14px 6px; } .lf-tabs button { flex: 1; min-height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .lf-tabs button[aria-selected="true"] { background: rgba(201,169,97,0.22); border-color: #c9a961; color: #c9a961; } #layersPanel[data-tab="layers"] .lf-materials { display: none; } #layersPanel[data-tab="materials"] #layersBody { display: none; } } /* Finishes panel (js/portal/finish-panel.js): groups, then one group's finishes as a picture list */ .fp { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1 1 auto; } .fp-h { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #c9a961; } .fp-list { display: flex; flex-direction: column; gap: 6px; } .fp-list.scroll { overflow-y: auto; min-height: 220px; max-height: 52vh; padding-right: 2px; flex: 1 1 auto; } .fp-adjust { flex: none; } .fp-adjust > * { margin-top: 6px; } html.props-docked #propsDock .lf-materials { overflow-y: auto; } html.props-docked #propsDock .lf-materials .fp { flex: 1 1 auto; min-height: 420px; } html.props-docked #propsDock .fp-list.scroll { flex: 1 1 auto; max-height: none; } .fp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: inherit; font: inherit; text-align: left; cursor: pointer; } .fp-row .fp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .fp-row b { font-size: 14px; font-weight: 600; white-space: normal; } .fp-sub, .fp-fine { font-size: 12px; opacity: .72; } .fp-chev { font-size: 20px; opacity: .6; } .fp-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #3a3f47; border: 1px solid rgba(255,255,255,0.18); display: block; } .fp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fp-thumb.orig { background: repeating-linear-gradient(135deg, #2c3037 0 6px, #343941 6px 12px); } .fp-pick.on { border-color: #c9a961; box-shadow: 0 0 0 2px rgba(201,169,97,.35); background: rgba(201,169,97,0.12); } .fp-group { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 6px 2px 0; } .fp-head { display: flex; align-items: center; gap: 10px; } .fp-title { display: flex; flex-direction: column; } .fp-back { background: none; border: 0; color: #c9a961; font: inherit; font-weight: 600; cursor: pointer; padding: 6px 4px; text-align: left; } .fp-offer { font-size: 12px; opacity: .85; display: flex; flex-direction: column; gap: 4px; } .fp-adjust summary { cursor: pointer; font-size: 13px; opacity: .85; } .fp-note { font-size: 13px; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(201,169,97,0.14); } @media (hover:hover) { .fp-row:hover { border-color: #c9a961; box-shadow: 0 0 0 2px rgba(201,169,97,.25); } } .fp-row:focus-visible, .fp-back:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; } /* Applies to: Instance | Type, on top of the tab */ .fp-reach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fp-reach-cap { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--b-gold, #c9a961); } .fp-segs { display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); } .fp-seg { min-height: 32px; padding: 0 16px; border-radius: 999px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .fp-seg[aria-checked="true"] { background: rgba(201,169,97,0.24); color: var(--b-gold, #c9a961); box-shadow: inset 0 0 0 1px var(--b-gold, #c9a961); } @media (hover:hover) { .fp-seg:hover { background: rgba(255,255,255,0.08); } } .fp-seg:focus-visible { outline: 2px solid #c9a961; outline-offset: 1px; } .fp-sel { margin: 0; font-size: 13px; } .fp-sel span { opacity: .72; } /* The kinds of finish as icons */ .fp-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; padding: 10px; border-radius: 14px; background: var(--b-page, #16181c); } /* Each kind on a glass tile: the icon leads, the word labels it. */ .fp-kind { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 92px; padding: 14px 4px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 14px rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: inherit; font: inherit; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s, background .15s; } .fp-kind-ico { width: 40px; height: 40px; flex: none; color: #f2efe8; filter: drop-shadow(0 0 7px rgba(201,169,97,0.35)); } .fp-kind-ico [stroke-width] { stroke-width: 1.7; } .fp-kind-name { font-size: 11px; font-weight: 500; line-height: 1.15; color: rgba(255,255,255,0.7); letter-spacing: .01em; } .fp-kind-n { position: absolute; top: 6px; right: 6px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 9.5px; line-height: 15px; color: rgba(255,255,255,0.5); } .fp-kind.suits { border-color: rgba(201,169,97,0.45); } .fp-kind.suits::after { content: ''; position: absolute; top: 9px; left: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--b-gold, #c9a961); box-shadow: 0 0 6px rgba(201,169,97,0.8); } @media (hover:hover) { .fp-kind:hover { border-color: #c9a961; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 2px rgba(201,169,97,.25), 0 4px 14px rgba(0,0,0,0.35); background: linear-gradient(160deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04) 60%); } .fp-kind:hover .fp-kind-name { color: #fff; } } /* One kind's finishes sit on the same black tray. */ .fp-list.scroll { padding: 8px; border-radius: 14px; background: var(--b-page, #16181c); } .fp-kind:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; } /* A saved finish of the admin's, under the one it was made from */ .fp-mine { font-size: 11px; font-weight: 600; color: var(--b-ok, #9fbf8f); } .fp-what summary { cursor: pointer; font-size: 12px; opacity: .75; } /* Suggest finishes (admin) */ .fp-tools { display: flex; justify-content: flex-end; } .fp-suggest { display: flex; flex-direction: column; gap: 8px; } .fp-suggest-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; } .fp-suggest-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.05); cursor: pointer; } .fp-suggest-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--b-gold, #c9a961); flex: none; } .fp-suggest-row .fp-text { display: flex; flex-direction: column; min-width: 0; } .fp-suggest-row b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .fp-what > * { margin-top: 6px; } .layer-mat-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; } .layer-mat-scale { min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: inherit; font: inherit; font-size: 14px; } .layer-mat-scale { width: 78px; } .layer-mat-btn { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .layer-mat-btn.primary { background: #c9a961; border-color: #c9a961; color: #1b1710; } .layer-mat-status { font-size: 12px; opacity: 0.8; min-height: 16px; } .layer-row.off .layer-name { opacity: 0.45; } .layer-name { flex: 1; min-width: 0; font-size: 14px; } .layer-count { margin-left: 6px; font-size: 12px; opacity: 0.55; } .layer-btn { appearance: none; flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; background: rgba(255,255,255,0.06); color: inherit; padding: 0; } .layer-btn svg { width: 18px; height: 18px; } .layer-btn[aria-pressed="true"] { border-color: #c9a961; color: #c9a961; } .layers-h { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; } .layers-qty { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .layers-qty th { text-align: right; font-weight: 600; opacity: 0.65; padding: 3px 4px; white-space: nowrap; } .layers-qty td { text-align: right; padding: 3px 4px; border-top: 1px solid rgba(255,255,255,0.08); } .layers-qty th:first-child, .layers-qty td:first-child { text-align: left; } .layers-qty tr.total td { font-weight: 700; border-top: 1px solid rgba(255,255,255,0.3); } .layers-fine { font-size: 12px; opacity: 0.6; margin: 8px 0; line-height: 1.4; } .layers-types th, .layers-types td { font-size: 12px; padding: 3px 3px; } .layers-types td:first-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layers-details { margin: 8px 0 0; } .layers-details summary { cursor: pointer; font-size: 12px; font-weight: 600; opacity: 0.85; padding: 4px 0; } .layers-details .layers-qty { margin-top: 4px; } .layer-show-all { appearance: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; background: rgba(255,255,255,0.08); color: inherit; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer; } .menu-subpanel { position: fixed; top: calc(20px + var(--top-h, 0px)); left: 50px; z-index: 39; width: 180px; max-height: calc(100vh - 40px - var(--top-h, 0px)); padding: 16px 0; overflow-y: auto; display: none; } /* Cross-Sections specifically — twice Design Options/Settings' width, so its axis toggle can go back to a single row instead of stacking label above buttons (see the override below), which is what was making it unnecessarily tall at the narrower shared width. */ .menu-subpanel.wide-subpanel { width: 360px; } .menu-subpanel.visible { display: block; animation: cardIn 0.2s cubic-bezier(0.16,1,0.3,1); } .menu-subpanel-title { padding: 0 16px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.10); font-size: 16px; font-weight: 700; color: var(--hud-text); font-stretch: 125%; font-variation-settings: 'wdth' 125; } .menu-list-item { display: block; width: 100%; padding: 12px 16px; background: transparent; border: none; color: var(--hud-text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background 0.15s ease; } .menu-list-item:hover { background: rgba(255,255,255,0.06); } .menu-list-item.active { background: var(--active-nav-bg); } /* Settings / Cross-Sections panels — simple stacked controls, reusing .toggle-row/.segmented from the old Sun popup. */ .settings-phone { display: none; } #walkMore, .mode-back { display: none; } .menu-panel-body { padding: 4px 16px; } .menu-panel-body .dial-hint { text-align: left; margin: 10px 0 4px; } .menu-panel-body input[type="range"] { width: 100%; accent-color: var(--line); height: 26px; } /* The drawer's 220px columns are too narrow to fit a label and a 3-button segmented control side by side (space-between, the default — fine in the old, wider Sun popup) without the segmented control overflowing — stack them instead. */ .menu-panel-body .toggle-row { flex-direction: column; align-items: flex-start; gap: 6px; } .menu-panel-body .segmented { width: 100%; } .menu-panel-body .segmented button { flex: 1; padding: 7px 4px; } /* Cross-Sections is wide enough now (.wide-subpanel, above) to put the "Axis" label and its 3-button segmented control back on one row instead of stacked — shorter panel overall, which is the actual goal ("less tall"), not just a side effect of the width change. */ #crossSectionPanel .toggle-row { flex-direction: column; align-items: stretch; gap: 8px; } #crossSectionPanel .segmented { width: 100%; border-radius: 12px; } #crossSectionAxisToggle button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; font-size: 12px; line-height: 1.2; } .cut-icon { width: 26px; height: 26px; display: block; } .cut-icon .cut-plane { fill: rgba(201,169,97,0.30); stroke: #c9a961; stroke-width: 1.5; stroke-linejoin: round; } .segmented button.active .cut-icon .cut-plane { fill: rgba(27,23,16,0.28); stroke: #1b1710; } /* gold on the gold button would vanish */ /* --------------------------------------------------------------- GRADIENT PANEL — shared visual language across every settings popup (Sun, Settings), so they read as one family. Sun overrides the background dynamically per time of day via JS; Settings uses this same static gradient as its default look. ------------------------------------------------------------------ */ .dial-hint { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 4px; } /* --------------------------------------------------------------- QUALITY PROMPT — appears once, only if a live fps sample shows the current setting is a poor fit for the device. ------------------------------------------------------------------ */ /* --------------------------------------------------------------- DRAWINGS LIGHTBOX — full-screen in-app viewer for the drawing page images docs/convert_drawings.py exports (see that script's own comment for why images instead of embedding the real PDF). White background behind the image since architectural line drawings are almost always drawn on a white sheet. ------------------------------------------------------------------ */ #drawingsLightbox { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(10,11,13,0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); align-items: center; justify-content: center; flex-direction: column; } #drawingsLightbox.visible { display: flex; } /* .lightbox-topbar/-label/-close: the old drawings viewer's look. */ #drawingsLightboxBody { max-width: 92vw; max-height: 78vh; overflow: auto; touch-action: pinch-zoom pan-x pan-y; } #drawingsLightboxBody img { display: block; max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); background: #fff; } #drawingsLightboxNav { display: none; margin-top: 18px; align-items: center; gap: 14px; } #drawingsLightboxNav.visible { display: flex; } #drawingsPageIndicator { color: var(--hud-text); font-size: 12px; opacity: 0.75; min-width: 40px; text-align: center; } /* Mobile layout adjustments */ @media (max-width: 768px), (pointer: coarse) { #intro .card { padding: 24px 22px; max-width: 88vw; } #intro button.primary { padding: 14px 20px; } /* The hamburger (left) and Walk/Sun/ViewCube cluster (right) leave too little center width on a phone for the full title text — keep just the small logo mark so nothing overlaps. */ #viewCube { width: 46px; height: 46px; perspective: 200px; } .vc-face { width: 46px; height: 46px; font-size: 7.5px; } .vc-front { transform: rotateY(0deg) translateZ(23px); } .vc-back { transform: rotateY(180deg) translateZ(23px); } .vc-right { transform: rotateY(90deg) translateZ(23px); } .vc-left { transform: rotateY(-90deg) translateZ(23px); } .vc-top { transform: rotateX(90deg) translateZ(23px); } .vc-bottom { transform: rotateX(-90deg) translateZ(23px); } .joystick-base { width: 88px; height: 88px; } .joystick-base .stick { width: 36px; height: 36px; top: 26px; left: 26px; } #joystick { right: 14px; } #heightPad { right: 112px; } #lookJoystick { left: 14px; } #topRightPanel { top: 14px; right: 14px; gap: 38px; } .menu-subpanel { left: 50px; width: min(170px, 62vw); } .menu-subpanel.wide-subpanel { left: 20px; width: min(335px, 84vw); } .view-thumb-btn img { width: 66px; height: 44px; } .view-thumb-btn span { width: 66px; font-size: 12px; } .nav-btn { padding: 7px 9px; } #hud { display: none; } } /* --------------------------------------------------------------- PHONES — no side rail. The dock spans the bottom edge: the tool nav (Cross-Sections, Design Options, Measure, More) right above the A tool's panel, or the More menu, slides up above the nav as a sheet; tap the same icon again or swipe the sheet's top down to put it away. ------------------------------------------------------------------ */ @media (max-width: 700px), (max-height: 500px) { #dock { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; background: var(--dock-bg); border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 -8px 24px rgba(0,0,0,0.35); padding-bottom: env(safe-area-inset-bottom); } #toolNav { display: block; padding: 4px 4px 2px; touch-action: none; user-select: none; -webkit-user-select: none; } .sheet-grip::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto 4px; border-radius: 2px; background: rgba(255,255,255,0.32); } .tool-nav-row { display: flex; } .tool-nav-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px 6px; border: none; border-radius: 12px; background: none; cursor: pointer; color: var(--hud-text); font-family: inherit; font-size: 12px; line-height: 1.15; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .tool-nav-btn[hidden] { display: none; } .tool-nav-btn svg { width: 31px; height: 31px; display: block; } .tool-nav-btn[aria-expanded="true"], .tool-nav-btn[aria-pressed="true"] { color: var(--line); background: rgba(201,169,97,0.13); } /* The 3D view is showing whenever no sheet covers it. */ body:not(.dock-open) #navHome { color: var(--line); } /* Six buttons in the bar; the phone's 3D screen is the model and the cube, with Walk in More. Comments are on Drawings. */ #toolNav .tool-nav-btn { padding: 4px 0 5px; font-size: 11.5px; } #toolNav .tool-nav-btn svg { width: 27px; height: 27px; } #navComments { display: none !important; } /* Drawings and 3D are where you are; Distance, Cut and Layers are tools. */ #navMeasure { position: relative; margin-left: 7px; } #navMeasure::before { content: ''; position: absolute; left: -4px; top: 18%; bottom: 18%; width: 1px; background: var(--line); opacity: 0.6; } #navSettings svg { color: var(--line); } body:not(.joysticks-on):not(.walking-desktop) #modeStack { display: none !important; } /* The More menu: the saved views, Walk, then the account items. */ #settingsPanel .menu-subpanel-title { display: none; } #viewsRow { padding: 2px 0 8px; border: none; border-radius: 0; background: none; box-shadow: none; } #viewsRow .views-toggle { display: none; } #layersPanel .lf-tabs, #layersPanel .menu-subpanel-title { display: none; } /* A small rolling list: the model stays in view, the finger glides through the rest. */ #layersPanel.visible { max-height: max(150px, 26dvh) !important; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity; } #layersPanel .layer-row { scroll-snap-align: start; } #viewsRow.collapsed #viewThumbRow { display: flex; } .more-views:empty, .more-views:has(#viewThumbRow:empty) { display: none; } #modeStack { right: 8px; } .more-walk { display: none; } /* A clean 3D screen: the model, the cube, one button for the other mode, and the bar. The Sun is in More, and the eye for saved measurements is in Measure. */ #brandMark, #sunBtn { display: none !important; } #modeToggle .mode-btn.active { display: none; } /* Same width it had beside the Walk/Orbit stack. */ #sunPanel { width: calc(100vw - 92px); box-sizing: border-box; } .mode-btn { font-size: 13px; } /* Walking: nearly the whole screen. One stick to move, drag anywhere to look, Back at the top left and More at the top right; speed and height are in More. */ body.joysticks-on #dock, body.joysticks-on #lookJoystick, body.joysticks-on #viewCubeWrap { display: none; } body.joysticks-on #joystick { bottom: calc(env(safe-area-inset-bottom) + 28px); } body.joysticks-on #modeStack { top: calc(env(safe-area-inset-top) + 12px); left: 12px; right: auto; bottom: auto; } body.joysticks-on #orbitModeBtn .mode-label { display: none; } body.joysticks-on #orbitModeBtn .mode-back { display: inline; } body.joysticks-on #walkMore { position: fixed; z-index: 33; top: calc(env(safe-area-inset-top) + 12px); right: 12px; display: flex; align-items: center; justify-content: center; } #walkMore svg { width: 24px; height: 24px; } body.joysticks-on #navWalk { display: none; } body.joysticks-on .more-walk { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 0 8px 10px; } .more-walk #speedPad, .more-walk #heightPad { position: static; width: auto; } .more-walk #speedPad { flex: 1; flex-wrap: wrap; flex-direction: row-reverse; justify-content: flex-end; } .more-walk #speedPad .joystick-label { width: 100%; text-align: left; } .more-walk #speedPad .speed-seg { flex: 1; } .more-walk #heightPad { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 104px; } .more-walk #heightPad .joystick-label { width: 100%; text-align: center; margin: 0; } /* A sheet covers the stack's spot; put it away rather than have it peek out. */ body.dock-open #modeStack { opacity: 0; pointer-events: none; } /* Every panel the nav opens: a sheet just above the dock. */ #crossSectionPanel, #layersPanel, #settingsPanel, .tool-bar.dock-tool { top: auto !important; left: 0; right: 0; bottom: var(--dock-h); width: auto; transform: none !important; max-height: min(52vh, calc(100dvh - var(--dock-h) - 90px)); overflow-y: auto; overscroll-behavior: contain; padding-top: 0; border-radius: 18px 18px 0 0; border-bottom: none; animation: dockUp 0.24s cubic-bezier(0.16,1,0.3,1); } .tool-bar.dock-tool { position: fixed; padding-top: 0; } /* The grab bar along each sheet's top: drag it down to close. */ .sheet-grip { display: block; padding: 8px 0 6px; touch-action: none; cursor: grab; } .sheet-grip::before { margin-bottom: 0; } .menu-subpanel-title { touch-action: none; } /* Settings: Replay tour and All projects on top, set apart; the app items below. */ .settings-phone { display: block; padding: 0 8px; } .settings-phone .menu-list-item[hidden] { display: none; } .settings-phone-top { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.10); } .settings-phone-bottom { padding-top: 8px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.10); } /* The View tools live in the nav itself on phones. */ #menuViewGroup, #menuComments { display: none; } } @media (max-width: 360px) { .tool-nav-btn { font-size: 12px; } } /* --------------------------------------------------------------- SIDE RAIL (desktop) — see the HTML comment near #sideRail. Icons only; .expanded (while one of its panels is open) widens it to show every name beside its icon. Groups get real space between them, and Replay tour sits apart at the top. Same dark panel and gold "open" state as the phone's tool nav. A group with nothing showing hides. ------------------------------------------------------------------ */ /* Replay tour stands apart: a wider gap, no rule. */ /* Eye buttons: open eye = shown, struck through = hidden. In a panel (Measure, Comments) it hides the layer; while a layer is hidden one lone struck-through eye sits just outside the nav to bring it back. */ .eye-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--dock-bg); border: 1px solid rgba(255,255,255,0.18); color: var(--hud-text); -webkit-tap-highlight-color: transparent; } .eye-btn svg { width: 18px; height: 18px; display: block; } .eye-btn .eye-slash { display: none; } .eye-btn.off { color: var(--hud-dim); } .eye-btn.off .eye-slash { display: block; } .eye-btn:hover { border-color: var(--line); color: var(--line); } .eye-btn:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; } .eye-btn.in-panel { margin-left: auto; width: 34px; height: 34px; background: rgba(0,0,0,0.25); } .eye-btn.worded { width: auto; padding: 0 12px 0 9px; gap: 6px; font: 600 13px inherit; color: inherit; } /* On a computer the eye for Measure / Comments sits on the rail, at the right of the open tool's row. */ #restoreEyes .eye-btn { position: fixed; z-index: 41; box-shadow: 0 6px 18px rgba(0,0,0,0.4); } #restoreEyes .eye-btn[hidden] { display: none; } #restoreEyes .eye-label { display: none; } @media (max-width: 700px), (max-height: 500px) { /* Phones: small pills above the nav, bottom left, with their names. */ #restoreEyes { display: none !important; position: fixed; z-index: 41; left: 12px; bottom: calc(var(--dock-h) + 66px); display: flex; gap: 8px; } /* above the folded comments */ body:has(.lc:not(.folded):not([hidden])) #restoreEyes { display: none; } #restoreEyes .eye-btn { position: static; width: auto; height: 36px; padding: 0 12px 0 10px; gap: 8px; border-radius: 999px; display: flex; align-items: center; } #restoreEyes .eye-btn[hidden] { display: none; } #restoreEyes .eye-label { display: inline; font-size: 13px; font-weight: 600; } } /* Collapsed (the arrow at the bottom of the rail): the name stays for screen readers and the hover tip only. */ /* Every panel opens just right of the rail, level with its top (JS keeps --rail-right / --rail-top current: see placeRailPanels()); Materials' categories sit at the top so its finishes list fits below. */ @media (min-width: 701px) and (min-height: 501px) { #crossSectionPanel, #layersPanel, #settingsPanel { left: var(--rail-right, 88px); top: var(--rail-top, 20px); max-height: calc(100vh - var(--rail-top, 20px) - 20px); } } /* --------------------------------------------------------------- PHONES — Cut Section and Materials float right over the model, with no panel behind them: white line work and text with a dark halo (the old Walk/Orbit trick, legible over sky, white walls or a night scene), gold for what's picked. Closed from the nav icon (or a swipe down on the nav). Desktop keeps its panels beside the side rail. ------------------------------------------------------------------ */ @media (max-width: 700px), (max-height: 500px) { #crossSectionPanel { background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; max-height: none; overflow: visible; padding: 6px 0 8px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.6); } #crossSectionPanel .sheet-grip, #crossSectionPanel .menu-subpanel-title { display: none; } /* Cut Section: Reset (top left) and the position, the slider, then the three cuts. */ #crossSectionPanel .menu-panel-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 0 14px; } #crossSectionPanel .toggle-row { display: contents; } #crossSectionPanel .toggle-label { display: none; } #crossSectionReset { grid-row: 1; grid-column: 1; width: auto; margin: 0 !important; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.8) !important; border-radius: 999px !important; background: rgba(0,0,0,0.35) !important; color: #fff; font-size: 12px; font-weight: 600; } #crossSectionCutLabel { grid-row: 1; grid-column: 2; margin: 0; text-align: right; opacity: 1; font-size: 12px; letter-spacing: 0.04em; } #crossSectionSlider { grid-row: 2; grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9)); } #crossSectionSlider::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.92); } #crossSectionSlider::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.92); } #crossSectionSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border-radius: 50%; background: var(--line); border: 3px solid #fff; } #crossSectionSlider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--line); border: 3px solid #fff; } #crossSectionAxisToggle { grid-row: 3; grid-column: 1 / -1; background: none; padding: 0; gap: 4px; border-radius: 0; } #crossSectionAxisToggle button { background: none !important; color: #fff; font-size: 12px; padding: 4px 2px; text-shadow: inherit; } #crossSectionAxisToggle button.active { color: var(--line); font-weight: 700; } #crossSectionAxisToggle .cut-icon { width: 42px; height: 42px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.95)) drop-shadow(0 0 6px rgba(0,0,0,0.6)); } } /* `translate`, not `transform`: the sheets pin transform to none above. */ @keyframes dockUp { from { translate: 0 28px; opacity: 0; } } @keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes compassSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #intro .card, .nav-popup.visible { animation: none; } #loading .logo, #loading.waiting .bar i, #walkPaused { animation: none !important; } .nav-btn, .view-thumb-btn { transition: none; } } /* --------------------------------------------------------------- HOVER GLOW — a gold border and soft glow on anything clickable, so a block reads as "this is interactive". Box-shadow only (nothing moves or resizes). Rows and the dock/rail buttons are inset so a panel edge can't clip them. Mouse devices only, so a tap on a phone never leaves a stuck glow; keyboard focus gets the same ring. Last in the sheet so it wins over the plain tints above. ------------------------------------------------------------------ */ .menu-list-item, .nav-btn, .view-thumb-btn, .vc-face, .eye-btn { transition: box-shadow 0.14s ease, border-color 0.14s ease, background 0.15s ease, color 0.15s ease; } @media (hover: hover) { .menu-list-item:hover, .eye-btn:hover { border-color: var(--line); box-shadow: 0 0 0 1.5px var(--line), 0 0 10px color-mix(in srgb, var(--line) 55%, transparent); } /* the glow replaces the plain white tint (the open item keeps its own colour) */ .menu-item:not(.active):not(.menu-item-button):hover, .menu-list-item:not(.active):hover, } .menu-list-item:focus-visible, .nav-btn:focus-visible, .view-thumb-btn:focus-visible, .vc-face:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--line), inset 0 0 12px color-mix(in srgb, var(--line) 35%, transparent); }