/* ===== Scene context: 3D office world (v2026.3) ===== Styles specific to the full-screen Three.js isometric world and its HUD overlays (top bar over a bright sky, full-bleed canvas, the OSI panel that lives inside the datacenter room). Kept in its own file — one stylesheet per context, not centralized in index.html. Future scenes get their own css/.css. */ /* the old 2D footer divider rule doesn't belong over the 3D world — it read as a faint horizontal line across the seaside foreground */ .app-foot-rule { display: none !important; } /* top bar stays a single line over the scene */ .hud-top { flex-wrap: nowrap; } .hud-brand { white-space: nowrap; flex: 0 0 auto; } .hud-meta { flex-wrap: nowrap; white-space: nowrap; min-width: 0; } #hud-wx, #hud-clock { font-size: 12px; line-height: 1; } #hud-wx { color: #cfe0f5; opacity: .92; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } /* full-screen 3D world */ .office-stage { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; padding: 0 !important; display: flex !important; z-index: 1; } .office-stage #office { width: 100% !important; height: 100% !important; max-width: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; touch-action: none; } /* let touch drag rotate the rooftop instead of scrolling the page */ /* OSI 7-layer panel lives INSIDE the datacenter room — hidden elsewhere */ .osi-stage { display: none !important; } body.in-datacenter .osi-stage { display: flex !important; position: fixed; top: 0; bottom: 0; right: 0; left: auto !important; width: min(46vw, 760px); z-index: 5; padding: 86px 20px 28px; background: linear-gradient(90deg, rgba(6,10,24,0) 0%, rgba(6,10,24,.72) 16%, rgba(6,10,24,.94) 100%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: osiSlide .55s cubic-bezier(.22,1,.36,1) both; pointer-events: auto; } @keyframes osiSlide { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } } /* responsive: keep the world on every screen, OSI full-width on phones */ @media (max-width: 900px) { .office-stage { display: flex !important; } body.in-datacenter .osi-stage { width: 100%; left: 0 !important; background: rgba(6,10,24,.92); } } /* readable top bar + nav over a bright sky — solid dark backing */ .hud-top { background: rgba(7,11,20,.95) !important; } .hud-menu { background: rgba(7,11,20,.95) !important; border-radius: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; padding: 6px 0 9px var(--pad, 22px) !important; backdrop-filter: blur(6px); } .hud-menu .menu-btn, .hud-menu .menu-btn span { color: #dce8fb !important; text-shadow: none; } .hud-menu .menu-btn.active, .hud-menu .menu-btn:hover span { color: #6fd6ff !important; } /* ===== Version-history flyout (elegant animated dropdown in the side menu) ===== */ .menu-ver { position: relative; } .ver-caret { margin-left: 2px; opacity: .55; transition: transform .3s cubic-bezier(.2,.7,.2,1); display: inline-block; transform: rotate(90deg); } .menu-ver.open .ver-caret { transform: rotate(-90deg); opacity: 1; } .ver-flyout { position: fixed; top: 0; left: 0; width: 256px; padding: 12px; /* top/left set by JS (moved to to escape the menu clip) */ background: rgba(9,14,26,.93); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(120,150,230,.22); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; transform: translateY(-12px) scale(.97); transform-origin: top left; pointer-events: none; transition: opacity .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1); z-index: 60; } .ver-flyout.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ver-flyout::before { content: ''; position: absolute; left: 20px; top: -7px; width: 12px; height: 12px; background: inherit; border-left: 1px solid rgba(120,150,230,.22); border-top: 1px solid rgba(120,150,230,.22); transform: rotate(45deg); } .ver-flyout-head { font: 600 10px Inter, system-ui; letter-spacing: .16em; text-transform: uppercase; color: #7f93b8; padding: 2px 8px 12px; } .ver-card { display: flex; align-items: center; gap: 12px; padding: 9px 9px; border-radius: 12px; text-decoration: none; color: #dce8fb; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s, background .2s; } .ver-flyout.open .ver-card { opacity: 1; transform: translateY(0); } .ver-flyout.open .ver-card:nth-of-type(2) { transition-delay: .05s; } .ver-flyout.open .ver-card:nth-of-type(3) { transition-delay: .10s; } .ver-flyout.open .ver-card:nth-of-type(4) { transition-delay: .15s; } .ver-card:hover { background: rgba(111,214,255,.10); transform: translateX(3px); } .ver-badge { flex: 0 0 auto; font: 700 12px "SF Mono", ui-monospace, monospace; color: #0a1024; background: linear-gradient(135deg,#9fe0ff,#6fb6ff); border-radius: 8px; padding: 6px 9px; box-shadow: 0 4px 12px rgba(80,150,255,.3); } .ver-card.is-current .ver-badge { background: linear-gradient(135deg,#7adcff,#34d399); } .ver-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .ver-meta b { font: 600 13px Inter, system-ui; } .ver-meta i { font: 500 11px Inter, system-ui; font-style: normal; color: #7f93b8; } .ver-card.is-current .ver-meta i { color: #34d399; } @media (max-width: 900px) { .ver-flyout { width: min(256px, 80vw); } } /* ===== Panels fit the content area BELOW the top bar + menu (only the top/menu stays visible) ===== */ /* Desktop only — on phones the menu is a full-screen sheet, so panels keep the responsive.css full-screen layout. --content-top is measured from the live menu by js/versions.js. */ @media (min-width: 901px) { .panel { top: var(--content-top, 94px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; border-radius: 0 !important; } .desktop-overlay { top: var(--content-top, 94px) !important; } } /* content fills the popup: short panels centre vertically (no dead space), tall ones top-align + scroll (`safe` keeps them from being clipped). Width capped + centred for readability. */ .panel .panel-body { display: flex; flex-direction: column; justify-content: safe center; width: 100%; max-width: none; padding-inline: clamp(22px, 4vw, 64px); /* fill the full popup width */ } .panel .panel-body > * { flex: 0 0 auto; } /* labs: the two stations stretch to fill the whole popup height (no overflow/cut-off button) */ .panel-full .lab-grid { flex: 1 1 auto; min-height: 0; } .panel-full .lab-grid .lab-station { min-height: 0; } .panel-full .lab-grid .lab-crt { min-height: 0 !important; height: auto !important; } /* ===== Version flyout: inline accordion inside the mobile menu sheet (≤900) ===== */ @media (max-width: 900px) { .ver-flyout { position: static !important; left: auto; top: auto; width: auto; margin: 2px 0 6px; padding: 0 0 0 var(--pad, 22px); border: 0; border-radius: 0; background: rgba(8,12,22,.6); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: none; pointer-events: auto; max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1), padding .3s ease; } .ver-flyout.open { max-height: 360px; padding-block: 6px; } .ver-flyout::before { display: none; } .ver-flyout-head { display: none; } .ver-card { padding: 11px 8px; } }