/* Starmap HUD and base styles. Extracted from the inline styles that Claude Design generated in starmap.html. Linked from the block; the DC runtime injects the into . Color tokens hold rgb triples so they can carry per-use alpha: rgba(var(--accent), 0.5). */ :root { --accent: 159, 194, 230; /* primary blue accent */ --dim: 180, 190, 205; /* muted mono text */ --line: 255, 255, 255; /* hairline borders and dividers */ --panel: 10, 13, 20; /* glass panel background */ --panel-deep: 8, 11, 18; /* info panel background */ --font-sans: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ---- base ---- */ html, body { margin: 0; padding: 0; background: #000000; overflow: hidden; height: 100%; } * { box-sizing: border-box; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } ::selection { background: rgba(var(--accent), 0.3); } @keyframes recPulse { 0% { transform: scale(0.82); opacity: 0.95; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } /* ---- projected DOM labels (positioned per frame from JS) ---- */ /* left/top pinned to 0; JS positions per frame via transform (composited, no layout pass) and folds the -50% centering into the same transform, matching the will-change: transform hint. See updateLabels(). */ .star-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--font-sans); font-weight: 400; white-space: nowrap; pointer-events: none; letter-spacing: 0.04em; text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.9); will-change: transform, opacity; } /* 3D system-view body labels (planets, companion stars, central star); positioned each frame, dropped just below the body */ .dive-label { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); font-family: var(--font-sans); font-size: 12px; font-weight: 400; white-space: nowrap; pointer-events: none; letter-spacing: 0.04em; color: rgba(225,233,245,0.95); text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95); will-change: transform, opacity; } .ring-label { position: absolute; transform: translate(-50%,-50%); font-family: var(--font-mono); font-size: 10px; color: rgba(var(--accent), 0.5); letter-spacing: 0.1em; pointer-events: none; text-shadow: 0 0 6px rgba(0,0,0,0.9); } /* long-travel grid range-ring labels: larger + bolder + stronger shadow so they read over the thick rings */ .lg-label { font-size: 11.5px; font-weight: 400; color: rgba(244, 120, 205, 1); letter-spacing: 0.12em; text-shadow: 0 0 8px rgba(0,0,0,0.98), 0 0 3px rgba(0,0,0,0.98); } /* big scale readout for the "long" travel mode (e.g. "100 LIGHT YEARS"), positioned on the grid plane each frame */ .mag-label { position: absolute; transform: translate(-50%,-50%); font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: rgba(var(--accent), 0.72); letter-spacing: 0.18em; white-space: nowrap; pointer-events: none; text-shadow: 0 0 10px rgba(0,0,0,0.95); } /* reticle (created in JS, positioned per frame) */ .reticle { position: absolute; width: 38px; height: 38px; border: 1px solid rgba(var(--accent), 0.9); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 12px rgba(var(--accent), 0.5); pointer-events: none; display: none; } .reticle-pulse { position: absolute; inset: -1px; border: 1px solid rgba(var(--accent), 0.7); border-radius: 50%; animation: recPulse 1.8s ease-out infinite; } .reticle-name { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; white-space: nowrap; color: rgba(225,233,245,0.95); text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95); pointer-events: none; } /* ---- root + stacked layers ---- */ .app { position: fixed; inset: 0; background: #000000; font-family: var(--font-sans); } .layer-canvas { position: absolute; inset: 0; z-index: 0; background: #000000; } .layer-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .layer-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% 46%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%); } /* ---- loading overlay ---- */ .loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: #000000; color: rgba(var(--accent), 0.8); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.25em; } .loading-box { text-align: center; } .spinner { width: 40px; height: 40px; margin: 0 auto 18px; border: 1px solid rgba(var(--accent), 0.25); border-top-color: rgba(var(--accent), 0.9); border-radius: 50%; animation: spin 0.9s linear infinite; } /* ---- HUD container ---- */ /* --edge adds to the base corner insets so the HUD can be pulled in from the screen edges (the "screen margin" view option). Cascades to .tl/.bl/.info/.copyright via calc(). */ .hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; --edge: 0px; } .hud.margin-medium { --edge: 60px; } .hud.margin-large { --edge: 132px; } .hud.margin-xlarge { --edge: 264px; } /* H key: hide all HUD panels (top-left stack, right info) for clean screenshots; star/ring labels stay */ .hud.ui-hidden .tl, .hud.ui-hidden .info { display: none; } /* "transparent UI" view option: dissolve all panel + control chrome (backgrounds, borders, blur, shadow) so the controls and text float over the starfield. Foreground indicators (switch knob, slider thumbs, reticle, labels) are deliberately left visible so the controls stay usable. The 2D system view (.sysview) sits OUTSIDE .hud, so its opaque overlay is unaffected. */ .hud.transparent-ui .glass, .hud.transparent-ui .filters.open .filters-body, .hud.transparent-ui .layers.open .layers-body, .hud.transparent-ui .help.open .help-body, .hud.transparent-ui .search-results, .hud.transparent-ui .info, .hud.transparent-ui .stats, .hud.transparent-ui .stat, .hud.transparent-ui .switch, .hud.transparent-ui .switch.on, .hud.transparent-ui .flt-chip, .hud.transparent-ui .flt-chip.on, .hud.transparent-ui .filter-select, .hud.transparent-ui .num-input, .hud.transparent-ui .dual-track, .hud.transparent-ui .dual-fill, .hud.transparent-ui .control-fly, .hud.transparent-ui .panel-reset, .hud.transparent-ui .fly-btn, .hud.transparent-ui .fly-btn-2, .hud.transparent-ui .filters-badge, .hud.transparent-ui .info-close, .hud.transparent-ui .brand-badge { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* border-only dividers (border-top/bottom): drop the line too */ .hud.transparent-ui .info-head, .hud.transparent-ui .comps, .hud.transparent-ui .planets, .hud.transparent-ui .planets-list, .hud.transparent-ui .planet-row + .planet-row, .hud.transparent-ui .filter-foot, .hud.transparent-ui .panel-reset-row, .hud.transparent-ui .help-credit, .hud.transparent-ui .result { border-color: transparent; } /* keep text legible once the panel backgrounds are gone (mirrors .star-label over the starfield) */ .hud.transparent-ui .tl, .hud.transparent-ui .info { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } .pe-auto { pointer-events: auto; } /* shared glass surface */ .glass { background: rgba(var(--panel), 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(var(--line), 0.09); border-radius: 9px; } /* small inline color dots (background + glow color set inline per element) */ .dot-sm { width: 7px; height: 7px; border-radius: 50%; flex: none; } .dot-md { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot-lg { width: 28px; height: 28px; border-radius: 50%; flex: none; } /* small inline-icon utilities */ .icon-13 { font-size: 13px; } .muted { opacity: 0.5; } /* ---- top-left: brand + search ---- */ .tl { position: absolute; top: calc(22px + var(--edge)); left: calc(24px + var(--edge)); width: 268px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 44px - 2 * var(--edge)); } /* Foldout panels (FILTERS / VIEW OPTIONS / HELP) share the top-left column and behave as a group: only one is open at a time (accordion, enforced in the toggle handlers). The fixed chrome (brand, range, search) never shrinks; the single open panel absorbs all the leftover height and its body scrolls, so neither the open panel nor the search box below it ever runs past the bottom of a short screen. (min-height:0 lets the open panel shrink below its content; the others keep min-height:auto.) */ .tl > .pe-auto, .tl > .range, .tl > .search { flex: none; } .filters.open, .layers.open, .help.open { min-height: 0; } .filters.open .filters-fold, .layers.open .layers-fold, .help.open .help-fold { min-height: 0; } .filters.open .filters-body, .layers.open .layers-body, .help.open .help-body { overflow-y: auto; } .filters-body::-webkit-scrollbar, .layers-body::-webkit-scrollbar, .help-body::-webkit-scrollbar { width: 7px; } .filters-body::-webkit-scrollbar-thumb, .layers-body::-webkit-scrollbar-thumb, .help-body::-webkit-scrollbar-thumb { background: rgba(var(--line), 0.28); border-radius: 4px; } .brand-eyebrow { font-size: 11px; letter-spacing: 0.34em; color: rgba(var(--accent), 0.85); font-family: var(--font-mono); font-weight: 400; } .brand-row { display: flex; align-items: baseline; gap: 10px; margin-top: 5px; } .brand-title { font-size: 22px; font-weight: 300; letter-spacing: 0.02em; color: rgba(238,242,250,0.96); line-height: 1.15; } .brand-badge { font-size: 10px; font-family: var(--font-mono); color: rgba(var(--accent), 0.55); letter-spacing: 0.08em; padding: 2px 6px; border: 1px solid rgba(var(--accent), 0.22); border-radius: 5px; } .brand-sub { margin-top: 6px; font-family: var(--font-mono); color: rgba(var(--dim), 0.5); } .brand-frame { font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; } .brand-counter { font-size: 10px; letter-spacing: 0.02em; white-space: nowrap; margin-top: 3px; color: rgba(var(--dim), 0.5); } /* range slider panel */ .range { pointer-events: auto; padding: 11px 13px 12px; } .range-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .range-cap { font-size: 9.5px; letter-spacing: 0.22em; color: rgba(var(--dim), 0.5); font-family: var(--font-mono); } .range-val { display: flex; align-items: baseline; gap: 4px; } .num-input { width: 38px; text-align: right; background: rgba(var(--accent), 0.08); border: 1px solid rgba(var(--accent), 0); border-radius: 4px; color: rgba(220,233,247,0.95); font-family: var(--font-mono); font-size: 13px; padding: 1px 4px; outline: none; -moz-appearance: textfield; appearance: textfield; } .num-input:hover { border-color: rgba(var(--accent), 0.35); } .num-input:focus { border-color: rgba(var(--accent), 0.6); background: rgba(var(--accent), 0.16); } .range-unit { font-size: 13px; font-family: var(--font-mono); color: rgba(220,233,247,0.95); } .range-slider { width: 100%; height: 4px; accent-color: #9fc2e6; cursor: pointer; background: transparent; } .range-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9px; font-family: var(--font-mono); color: rgba(var(--dim), 0.35); } /* filters panel (downward-folding, between range and search) */ .filters { pointer-events: auto; display: flex; flex-direction: column; } .filters-trigger { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 9px 13px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(var(--dim), 0.6); transition: background 0.15s, color 0.15s, border-color 0.15s; } .filters-trigger:hover { background: rgba(var(--accent), 0.1); color: rgba(220, 233, 247, 0.95); border-color: rgba(var(--accent), 0.3); } .filters.open .filters-trigger { color: rgba(var(--accent), 0.85); border-color: rgba(var(--accent), 0.28); } .filters-trigger-label { margin-right: auto; } .filters-badge { font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.04em; background: rgba(var(--accent), 0.55); color: #07131f; border-radius: 999px; padding: 1px 6px; margin-right: 9px; } /* chevron: points down collapsed (invites downward expansion), flips up when open */ .filters-chevron { width: 8px; height: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg); margin-top: -2px; transition: transform 0.28s ease; } .filters.open .filters-chevron { transform: rotate(-135deg); margin-top: 2px; } /* foldable body: grid 0fr -> 1fr animates auto height, no JS measurement */ .filters-fold { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.28s ease, opacity 0.2s ease; } .filters.open .filters-fold { grid-template-rows: 1fr; opacity: 1; } /* the body is the grid item; keep it free of padding/border/background so the collapsed (0fr) panel adds zero height. The glass box + padding + the 8px trigger gap apply only when open, so the filters->search gap stays equal to the range->filters gap (both the .tl 14px). */ .filters-body { min-height: 0; overflow: hidden; } .filters.open .filters-body { margin-top: 8px; background: rgba(var(--panel), 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(var(--line), 0.09); border-radius: 9px; padding: 6px; } .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; padding: 7px 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: rgba(190, 198, 210, 0.78); transition: background 0.15s, color 0.15s; } .filter-row:hover { background: rgba(var(--accent), 0.08); } .filter-name { white-space: nowrap; } .filter-val { font-size: 11px; color: rgba(var(--dim), 0.55); letter-spacing: 0.06em; flex: none; text-transform: uppercase; } .filter-val.yes { color: #00ff00; } .filter-val.no { color: #ff0000; } .filter-block { padding: 7px 9px 4px; font-family: var(--font-mono); font-size: 12px; color: rgba(190, 198, 210, 0.78); } .flt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } .flt-chip { min-width: 18px; text-align: center; padding: 3px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; user-select: none; color: rgba(var(--dim), 0.6); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(var(--line), 0.12); transition: background 0.15s, color 0.15s, border-color 0.15s; } .flt-chip:hover { border-color: rgba(var(--accent), 0.4); } .flt-chip.on { background: rgba(var(--accent), 0.22); color: rgba(220, 233, 247, 0.95); border-color: rgba(var(--accent), 0.45); } .filter-select { width: 100%; margin-top: 7px; background: rgba(255, 255, 255, 0.05); color: rgba(220, 233, 247, 0.92); border: 1px solid rgba(var(--line), 0.14); border-radius: 5px; font-family: var(--font-mono); font-size: 11px; padding: 4px 6px; outline: none; cursor: pointer; } .filter-select:focus { border-color: rgba(var(--accent), 0.5); } /* the native dropdown popup defaults to bright-on-white; force the dark theme on the options */ .filter-select option { background: #0b1422; color: rgba(220, 233, 247, 0.92); } /* dual-thumb range slider: two overlaid range inputs (transparent tracks, only thumbs grabbable) over a base track + a filled sub-range div whose left/width are computed in renderVals */ .filter-rangehead { display: flex; align-items: baseline; justify-content: space-between; } .filter-rangeval { font-size: 10px; font-family: var(--font-mono); color: rgba(var(--accent), 0.85); letter-spacing: 0.04em; } .dual { position: relative; height: 22px; margin-top: 9px; } .dual-track { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); } .dual-fill { position: absolute; top: 9px; height: 4px; border-radius: 2px; background: rgba(var(--accent), 0.6); } .dual input[type="range"] { position: absolute; left: 0; top: 4px; width: 100%; height: 14px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .dual input[type="range"]::-webkit-slider-runnable-track { background: none; border: none; } .dual input[type="range"]::-moz-range-track { background: none; border: none; } .dual input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #dfeaf6; border: 1px solid rgba(var(--accent), 0.7); cursor: pointer; } .dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: #dfeaf6; border: 1px solid rgba(var(--accent), 0.7); cursor: pointer; } .filter-empty { margin: 8px 9px 2px; padding: 7px 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: rgba(255, 196, 120, 0.92); background: rgba(255, 150, 60, 0.1); border: 1px solid rgba(255, 150, 60, 0.25); } .filter-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 9px 5px; margin-top: 4px; border-top: 1px solid rgba(var(--line), 0.07); } .filter-shown { font-size: 10px; font-family: var(--font-mono); color: rgba(var(--dim), 0.5); letter-spacing: 0.04em; } /* help panel (downward-folding, between filters and search) */ .help { pointer-events: auto; display: flex; flex-direction: column; } .help-trigger { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 9px 13px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(var(--dim), 0.6); transition: background 0.15s, color 0.15s, border-color 0.15s; } .help-trigger:hover { background: rgba(var(--accent), 0.1); color: rgba(220, 233, 247, 0.95); border-color: rgba(var(--accent), 0.3); } .help.open .help-trigger { color: rgba(var(--accent), 0.85); border-color: rgba(var(--accent), 0.28); } .help-trigger-label { margin-right: auto; } .help-chevron { width: 8px; height: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg); margin-top: -2px; transition: transform 0.28s ease; } .help.open .help-chevron { transform: rotate(-135deg); margin-top: 2px; } .help-fold { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.28s ease, opacity 0.2s ease; } .help.open .help-fold { grid-template-rows: 1fr; opacity: 1; } .help-body { min-height: 0; overflow: hidden; } .help.open .help-body { margin-top: 8px; background: rgba(var(--panel), 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(var(--line), 0.09); border-radius: 9px; padding: 6px 6px 8px; } .help-group { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--dim), 0.42); font-family: var(--font-mono); padding: 11px 9px 4px; } .help-group:first-child { padding-top: 4px; } .help-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 4px 9px; font-family: var(--font-mono); font-size: 11.5px; } .help-keys { color: rgba(var(--accent), 0.9); letter-spacing: 0.02em; white-space: nowrap; flex: none; } .help-desc { color: rgba(190, 198, 210, 0.7); text-align: right; } .help-credit { display: block; margin: 10px 9px 2px; padding-top: 8px; border-top: 1px solid rgba(var(--line), 0.07); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: rgba(var(--dim), 0.5); text-decoration: none; transition: color 0.15s; } .help-credit:hover { color: rgba(var(--accent), 0.95); } /* search box */ .search { pointer-events: auto; position: relative; } .search-bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px; } .search-icon { width: 13px; height: 13px; border: 1.4px solid rgba(var(--accent), 0.6); border-radius: 50%; position: relative; flex: none; } .search-icon-handle { position: absolute; width: 5px; height: 1.4px; background: rgba(var(--accent), 0.6); right: -3.5px; bottom: 0px; transform: rotate(45deg); transform-origin: left; } .search-input { flex: 1; background: transparent; border: none; outline: none; color: rgba(238,242,250,0.95); font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.01em; } .search-clear { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: rgba(var(--dim), 0.6); font-size: 16px; line-height: 1; } .search-clear:hover { background: rgba(var(--accent), 0.14); color: rgba(220,233,247,0.95); } .search-results { position: absolute; top: 46px; left: 0; right: 0; background: rgba(var(--panel), 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--line), 0.1); border-radius: 9px; overflow: hidden; max-height: 380px; overflow-y: auto; } .result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; cursor: pointer; border-bottom: 1px solid rgba(var(--line), 0.05); } .result:hover { background: rgba(var(--accent), 0.1); } .result-left { display: flex; align-items: center; gap: 9px; } .result-star { font-size: 13.5px; color: rgba(238,242,250,0.92); } .result-dist { font-size: 10.5px; font-family: var(--font-mono); color: rgba(var(--dim), 0.5); } /* ---- VIEW OPTIONS: layer toggles (downward-folding panel in the top-left stack) ---- */ .layers { pointer-events: auto; display: flex; flex-direction: column; } /* foldable body: grid 0fr -> 1fr animates auto height, no JS measurement */ .layers-fold { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.28s ease, opacity 0.2s ease; } .layers.open .layers-fold { grid-template-rows: 1fr; opacity: 1; } .layers-body { min-height: 0; overflow: hidden; } .layers.open .layers-body { margin-top: 8px; background: rgba(var(--panel), 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(var(--line), 0.09); border-radius: 9px; padding: 6px; } /* shared reset-to-default button (bottom of the FILTERS and VIEW OPTIONS panel bodies) */ .panel-reset-row { display: flex; justify-content: flex-end; padding: 7px 3px 2px; margin-top: 4px; border-top: 1px solid rgba(var(--line), 0.07); } .panel-reset { cursor: pointer; user-select: none; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--accent), 0.85); border: 1px solid rgba(var(--accent), 0.3); background: rgba(var(--accent), 0.08); border-radius: 7px; padding: 5px 10px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .panel-reset:hover { background: rgba(var(--accent), 0.16); border-color: rgba(var(--accent), 0.5); color: rgba(220, 233, 247, 0.95); } /* CONTROLS panel slider row (reuses .range-slider, .layer-name, .layer-val, .panel-reset*) */ .control-row { padding: 7px 9px; } /* same label text style as the VIEW OPTIONS rows (.layer-row) so "speed" matches the other panels */ .control-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: rgba(190, 198, 210, 0.7); } .control-c { margin-top: 5px; font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.04em; color: rgba(var(--dim), 0.5); } .control-fly { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none; margin: 4px 9px 0; padding: 8px 14px; border-radius: 7px; font-size: 12px; letter-spacing: 0.03em; font-family: var(--font-mono); border: 1px solid rgba(var(--accent), 0.4); background: rgba(var(--accent), 0.12); color: rgba(220, 233, 247, 0.95); transition: background 0.15s, border-color 0.15s, opacity 0.15s; } .control-fly:hover { background: rgba(var(--accent), 0.22); border-color: rgba(var(--accent), 0.7); } .control-fly.disabled { opacity: 0.3; pointer-events: none; } /* group header */ .layer-group { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--dim), 0.42); font-family: var(--font-mono); padding: 11px 9px 4px; } .layer-group:first-child { padding-top: 4px; } .layer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; padding: 7px 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: rgba(190, 198, 210, 0.7); transition: background 0.15s, color 0.15s; } .layer-row:hover { background: rgba(var(--accent), 0.08); } .layer-row.on { color: rgba(220, 233, 247, 0.95); } .layer-name { white-space: nowrap; } /* mode rows: value pill */ .layer-val { font-size: 11px; color: rgba(var(--dim), 0.55); letter-spacing: 0.04em; flex: none; } .layer-val.on { color: rgba(var(--accent), 0.95); } /* boolean rows: iOS-style switch */ .switch { position: relative; width: 30px; height: 16px; border-radius: 999px; flex: none; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(var(--line), 0.14); transition: background 0.18s, border-color 0.18s; } .switch.on { background: rgba(var(--accent), 0.5); border-color: rgba(var(--accent), 0.55); } .switch .knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: rgba(232, 240, 248, 0.92); transition: transform 0.18s ease; } .switch.on .knob { transform: translateX(14px); } /* trigger: full width, sits above the fold (uses .glass for its background) */ .layers-trigger { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 9px 13px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(var(--dim), 0.6); transition: background 0.15s, color 0.15s, border-color 0.15s; } .layers-trigger:hover { background: rgba(var(--accent), 0.1); color: rgba(220, 233, 247, 0.95); border-color: rgba(var(--accent), 0.3); } .layers.open .layers-trigger { color: rgba(var(--accent), 0.85); border-color: rgba(var(--accent), 0.28); } .layers-trigger-label { margin-right: auto; } /* chevron: points down collapsed, flips up when open */ .layers-chevron { width: 8px; height: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg); margin-top: -2px; transition: transform 0.28s ease; } .layers.open .layers-chevron { transform: rotate(-135deg); margin-top: 2px; } /* ---- bottom-center hint ---- */ /* ---- bottom-right: reset + counter ---- */ .copyright { position: absolute; bottom: calc(24px + var(--edge)); right: calc(24px + var(--edge)); font-size: 10.5px; font-family: var(--font-mono); color: rgba(var(--dim), 0.5); letter-spacing: 0.08em; text-align: right; pointer-events: none; } /* bottom-center: distance to the selected object ("xxx ly/AU to NAME"); toggled to display:block by animate() */ .bottom-readout { position: absolute; bottom: calc(24px + var(--edge)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; } .sel-dist { display: none; font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: rgba(245,248,252,0.97); letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.9); } /* demo-mode (attract) readout: bottom-left corner; toggled to display:block by animate() */ .attract { display: none; position: absolute; bottom: calc(24px + var(--edge)); left: calc(24px + var(--edge)); text-align: left; font-size: 11px; font-family: var(--font-mono); color: rgba(var(--accent), 0.8); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } /* ---- right: selected info panel ---- */ .info { position: absolute; top: calc(22px + var(--edge)); right: calc(22px + var(--edge)); width: 322px; max-height: calc(100vh - 44px - 2 * var(--edge)); overflow-y: auto; pointer-events: auto; background: rgba(var(--panel-deep), 0.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(var(--line), 0.1); border-radius: 13px; animation: fadeIn 0.3s ease; } .info-head { padding: 20px 20px 16px; border-bottom: 1px solid rgba(var(--line), 0.07); position: relative; } .info-close { position: absolute; top: 15px; right: 15px; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(200,208,220,0.55); font-size: 16px; border: 1px solid rgba(var(--line), 0.08); } .info-close:hover { background: rgba(var(--line), 0.07); } .info-tag-row { display: flex; align-items: center; gap: 11px; } .info-con { font-size: 9.5px; letter-spacing: 0.22em; font-family: var(--font-mono); color: rgba(var(--accent), 0.7); } .info-name { font-size: 25px; font-weight: 300; color: rgba(240,244,250,0.97); margin-top: 9px; letter-spacing: 0.01em; line-height: 1.1; } .info-aka { font-size: 11px; color: rgba(var(--dim), 0.6); margin-top: 5px; font-family: var(--font-mono); letter-spacing: 0.02em; line-height: 1.4; } .info-desc { font-size: 12.5px; color: rgba(185,195,210,0.6); margin-top: 7px; line-height: 1.5; font-weight: 300; } .fly-btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 8px 14px; border-radius: 7px; font-size: 12px; letter-spacing: 0.03em; font-family: var(--font-mono); border: 1px solid rgba(var(--accent), 0.4); background: rgba(var(--accent), 0.12); color: rgba(220,233,247,0.95); } .fly-btn:hover { background: rgba(var(--accent), 0.22); border-color: rgba(var(--accent), 0.7); } .fly-btn-2 { margin-left: 8px; background: rgba(var(--accent), 0.05); } /* secondary action (quieter fill) next to zoom in/out */ .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(var(--line), 0.06); } .stat { background: rgba(var(--panel-deep), 0.5); padding: 13px 16px; } .stat-k { font-size: 9px; letter-spacing: 0.16em; color: rgba(var(--dim), 0.45); font-family: var(--font-mono); } .stat-v { font-size: 15px; color: rgba(235,240,248,0.92); margin-top: 5px; font-family: var(--font-mono); font-weight: 400; } .stat-sub { font-size: 11px; color: rgba(235,240,248,0.7); margin-top: 3px; font-family: var(--font-mono); font-weight: 400; } .comps { padding: 15px 18px; border-top: 1px solid rgba(var(--line), 0.07); } .comps-cap { font-size: 9px; letter-spacing: 0.2em; color: rgba(var(--dim), 0.45); font-family: var(--font-mono); margin-bottom: 11px; } .comp { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-family: var(--font-mono); font-size: 12px; color: rgba(210,218,228,0.8); } .planets { padding: 14px 18px; border-top: 1px solid rgba(var(--line), 0.07); display: flex; align-items: center; justify-content: space-between; } .planets-cap { font-size: 11px; font-family: var(--font-mono); color: rgba(var(--dim), 0.5); letter-spacing: 0.04em; } .planets-val { font-size: 16px; font-family: var(--font-mono); color: rgba(var(--accent), 0.95); } /* per-system planet list (info panel) */ .planets-list { padding: 15px 18px; border-top: 1px solid rgba(var(--line), 0.07); } .planets-list-cap { font-size: 9px; letter-spacing: 0.2em; color: rgba(var(--dim), 0.45); font-family: var(--font-mono); margin-bottom: 11px; } .planet-row { padding: 7px 0; } .planet-row + .planet-row { border-top: 1px solid rgba(var(--line), 0.05); } .planet-name { font-size: 13px; color: rgba(220,228,240,0.92); display: flex; align-items: center; gap: 8px; } .planet-facts { display: block; font-size: 10.5px; font-family: var(--font-mono); color: rgba(var(--dim), 0.7); margin-top: 3px; letter-spacing: 0.02em; } .moon-facts-sub { color: rgba(var(--dim), 0.5); margin-top: 2px; } .planets-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; } /* ---- 2D orbital system view (overlay) ---- */ .sysview { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: #000; pointer-events: auto; animation: fadeIn 0.25s ease; } .sysview-close { position: absolute; top: 20px; right: 24px; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(200,208,220,0.7); font-size: 18px; border: 1px solid rgba(var(--line), 0.12); } .sysview-close:hover { background: rgba(var(--line), 0.08); color: rgba(220,233,247,0.95); } /* the diagram column holds the title centered over the orbit stage (the title is absolute so it does not shift the stage's vertical centering); the side legend sits to its right in the body row */ .sysview-diagram { position: relative; display: flex; flex-direction: column; align-items: center; } .sysview-head { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 14px; text-align: center; } .sysview-title { font-size: 23px; font-weight: 600; color: rgba(240,244,250,0.97); letter-spacing: 0.02em; } .sysview-sub { font-size: 10px; letter-spacing: 0.24em; color: rgba(var(--accent), 0.7); font-family: var(--font-mono); margin-top: 5px; text-transform: uppercase; } .sysview-host { font-size: 10px; letter-spacing: 0.08em; color: rgba(var(--dim), 0.7); font-family: var(--font-mono); margin-top: 4px; } .sysview-body { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; } .orbit-stage { position: relative; flex: none; } .hz-band { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .orbit-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(var(--line), 0.13); border-radius: 50%; pointer-events: none; } .sys-star { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); } .orbit-arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation-name: orbit; animation-timing-function: linear; animation-iteration-count: infinite; } .orbit-stage.paused .orbit-arm, .orbit-stage.paused .orbit-lbl { animation-play-state: paused; } /* "animate" view option off */ /* on-chart body name labels. Each label rides its orbit-arm but counter-rotates so the text stays upright; the txt then drops below the body. Central star label is static below the star. */ .sys-center-label { position: absolute; left: 50%; top: 50%; white-space: nowrap; pointer-events: none; font-family: var(--font-sans); font-size: 12px; color: rgba(228,235,246,0.96); text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95); } .orbit-lbl-pos { position: absolute; left: 0; top: 0; } .orbit-lbl { position: absolute; left: 0; top: 0; animation-name: counterOrbit; animation-timing-function: linear; animation-iteration-count: infinite; } .orbit-lbl-txt { position: absolute; left: 0; top: 7px; transform: translateX(-50%); white-space: nowrap; pointer-events: none; font-family: var(--font-sans); font-size: 11px; color: rgba(220,228,240,0.92); text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95); } @keyframes counterOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* cancels the orbit-arm spin so labels stay upright */ .sys-planet { position: absolute; left: 0; top: 0; border-radius: 50%; } .sys-comp { position: absolute; left: 0; top: 0; border-radius: 50%; } /* companion star body (glow via inline box-shadow) */ @keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* counterclockwise, matching prograde orbits seen from the north */ /* "realistic orbits" mode (Phase 7): elliptical orbits with the star at the focus. The outline is a div ellipse (border-radius 50% on a 2A x 2b box, positioned + rotated inline so the focus lands on centre); the planet rides a CSS offset-path the same ellipse, so shape and motion always agree. */ .orbit-ellipse { position: absolute; left: 50%; top: 50%; box-sizing: border-box; border: 1px solid rgba(var(--line), 0.13); border-radius: 50%; pointer-events: none; } .orbit-ellipse-arm { position: absolute; left: 0; top: 0; width: 0; height: 0; offset-rotate: 0deg; offset-anchor: 50% 50%; animation-name: sysOrbitMove; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes sysOrbitMove { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* paced traversal of the ellipse path; the 3D dive carries the equal-area Kepler motion */ .orbit-stage.paused .orbit-ellipse-arm { animation-play-state: paused; } /* "animate" view option off / time 0 */ .orbit-ell-lbl { position: absolute; left: 0; top: 9px; } /* body label sits just below the dot; the arm has offset-rotate 0 so it stays upright */ .sysview-side { display: flex; flex-direction: column; gap: 3px; min-width: 240px; max-width: 300px; max-height: 80vh; overflow-y: auto; } .scale-toggle { align-self: flex-start; cursor: pointer; user-select: none; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; color: rgba(var(--accent), 0.85); border: 1px solid rgba(var(--accent), 0.3); background: rgba(var(--accent), 0.08); border-radius: 7px; padding: 6px 11px; margin-bottom: 5px; } .scale-toggle:hover { background: rgba(var(--accent), 0.16); border-color: rgba(var(--accent), 0.5); } .scale-state { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--dim), 0.65); margin-bottom: 12px; } .key-cap { font-size: 9px; letter-spacing: 0.2em; color: rgba(var(--dim), 0.5); font-family: var(--font-mono); margin-bottom: 7px; } .type-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; } .hz-line { display: flex; align-items: center; gap: 8px; font-size: 10px; font-family: var(--font-mono); color: rgba(var(--dim), 0.75); margin-bottom: 13px; } .type-key-item { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-family: var(--font-mono); color: rgba(var(--dim), 0.75); letter-spacing: 0.02em; } .type-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; } .hz-swatch { width: 14px; height: 9px; border-radius: 2px; background: rgba(0,255,0,0.25); border: 1px solid rgba(0,255,0,0.45); flex: none; } .hz-tag { font-size: 8.5px; font-family: var(--font-mono); color: #9bd6a8; border: 1px solid rgba(150,230,160,0.4); border-radius: 4px; padding: 1px 4px; margin-left: 7px; letter-spacing: 0.06em; vertical-align: middle; } .legend-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 2px; border-bottom: 1px solid rgba(var(--line), 0.05); } .legend-text { display: flex; flex-direction: column; } .legend-name { font-size: 13px; color: rgba(220,228,240,0.92); } .legend-facts { font-size: 10px; font-family: var(--font-mono); color: rgba(var(--dim), 0.7); margin-top: 2px; } /* 3D planetary-system mode: a quiet caption at the top, horizontally centered on the window (regardless of the info panel), no pointer interaction */ .dive-hint { position: absolute; left: 50%; top: 114px; transform: translateX(-50%); z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; text-align: center; animation: fadeIn 0.4s ease; text-shadow: 0 0 8px rgba(0,0,0,0.9); } .dive-hint-cap { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--accent), 0.75); } .dive-hint-host { font-size: 23px; font-weight: 600; color: rgba(240,244,250,0.97); letter-spacing: 0.02em; }