1802 lines
114 KiB
CSS
1802 lines
114 KiB
CSS
/* App layout - minimal CSS, most styling via Tailwind */
|
|
.app-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: var(--surface-app);
|
|
box-shadow: inset 0 0 0 1px var(--border-primary);
|
|
}
|
|
.app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar { border-bottom-color: rgba(132, 158, 214, .16); color: #e9efff; background: #0c1731; }
|
|
.app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar__context { color: #7f8dab; }
|
|
.app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) [data-testid="status-bar"] { border-top-color: rgba(132, 158, 214, .16) !important; color: #7e8dab !important; background: #091329 !important; }
|
|
|
|
.hololake-bar { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--text-primary); background: var(--surface-panel); border-bottom: 1px solid var(--border-default); letter-spacing: .02em; }
|
|
.hololake-bar__brand, .hololake-bar__library { border: 0; background: transparent; color: inherit; cursor: pointer; }
|
|
.hololake-bar__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; letter-spacing: .02em; }
|
|
.hololake-bar__brand b { color: var(--accent-blue); font-weight: 600; }
|
|
.hololake-bar__mark { display: block; width: 24px; height: 28px; object-fit: contain; object-position: center; flex: 0 0 24px; }
|
|
.hololake-bar__line { width: 1px; height: 16px; background: var(--border-default); }
|
|
.hololake-bar__context { color: var(--text-secondary); font-size: 12px; }
|
|
.hololake-bar__library { margin-left: auto; padding: 5px 9px; border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-secondary); font-size: 12px; }
|
|
.hololake-bar__library:hover { background: var(--state-hover-subtle); color: var(--text-primary); }
|
|
.hololake-theme-nav { display: grid; min-width: 198px; grid-template-columns: 10px minmax(0, 1fr) 16px; align-items: center; gap: 10px; margin-left: auto; padding: 7px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease; }
|
|
.hololake-theme-nav:hover, .hololake-theme-nav[data-state="open"] { border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-default)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 15%, transparent), color-mix(in srgb, var(--accent-blue) 4%, transparent)); color: var(--text-primary); }
|
|
.hololake-theme-nav:active { transform: translateY(1px); }
|
|
.hololake-theme-nav > i, .hololake-theme-menu__item > i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--theme-dot); box-shadow: 0 0 12px color-mix(in srgb, var(--theme-dot) 76%, transparent); }
|
|
.hololake-theme-nav > span { display: grid; min-width: 0; gap: 1px; }.hololake-theme-nav small { color: var(--text-muted); font-size: 9px; font-weight: 500; letter-spacing: .1em; }.hololake-theme-nav strong { overflow: hidden; color: var(--text-primary); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.hololake-theme-nav > b { color: var(--text-muted); font-size: 16px; font-weight: 400; transition: transform .2s ease; }.hololake-theme-nav[data-state="open"] > b { transform: rotate(180deg); }
|
|
.hololake-theme-menu { width: 318px; max-height: min(560px, calc(100vh - 80px)); padding: 8px; border-color: color-mix(in srgb, var(--accent-blue) 26%, var(--border-default)); border-radius: 15px; background: color-mix(in srgb, var(--surface-sidebar) 96%, transparent); box-shadow: 0 24px 70px color-mix(in srgb, #000 30%, transparent), inset 0 1px color-mix(in srgb, #fff 7%, transparent); backdrop-filter: blur(24px); }
|
|
.hololake-theme-menu > header { display: grid; gap: 5px; padding: 10px 12px 13px; border-bottom: 1px solid var(--border-default); }.hololake-theme-menu > header span { color: var(--accent-blue); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; }.hololake-theme-menu > header strong { font-size: 15px; font-weight: 650; }.hololake-theme-menu > header small { color: var(--text-muted); font-size: 10px; }
|
|
.hololake-theme-menu [role="group"] { display: grid; gap: 3px; padding-top: 7px; }
|
|
.hololake-theme-menu__item { display: grid; min-height: 48px; grid-template-columns: 10px 1fr; gap: 11px; padding: 7px 11px 7px 13px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
|
|
.hololake-theme-menu__item > span:not([data-slot]) { display: grid; gap: 2px; }.hololake-theme-menu__item strong { font-size: 12px; font-weight: 600; }.hololake-theme-menu__item small { color: var(--text-muted); font-size: 10px; }
|
|
.hololake-theme-menu__item:focus, .hololake-theme-menu__item[data-state="checked"] { border-color: color-mix(in srgb, var(--accent-blue) 24%, var(--border-default)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 14%, transparent), color-mix(in srgb, var(--accent-blue) 3%, transparent)); color: var(--text-primary); }
|
|
.hololake-theme-menu__item [data-slot="dropdown-menu-item-indicator"] { right: 10px; left: auto; color: var(--accent-blue); }
|
|
.hololake-theme-nav i[data-tone="slate"], .hololake-theme-menu i[data-tone="slate"] { --theme-dot: #94a3b8; }.hololake-theme-nav i[data-tone="sky"], .hololake-theme-menu i[data-tone="sky"] { --theme-dot: #7dd3fc; }.hololake-theme-nav i[data-tone="cyan"], .hololake-theme-menu i[data-tone="cyan"] { --theme-dot: #4fd1c5; }.hololake-theme-nav i[data-tone="aurora"], .hololake-theme-menu i[data-tone="aurora"] { --theme-dot: #22d3ee; }.hololake-theme-nav i[data-tone="ice"], .hololake-theme-menu i[data-tone="ice"] { --theme-dot: #60a5fa; }.hololake-theme-nav i[data-tone="violet"], .hololake-theme-menu i[data-tone="violet"] { --theme-dot: #a78bfa; }.hololake-theme-nav i[data-tone="indigo"], .hololake-theme-menu i[data-tone="indigo"] { --theme-dot: #818cf8; }.hololake-theme-nav i[data-tone="gold"], .hololake-theme-menu i[data-tone="gold"] { --theme-dot: #fbbf24; }.hololake-theme-nav i[data-tone="green"], .hololake-theme-menu i[data-tone="green"] { --theme-dot: #4ade80; }.hololake-theme-nav i[data-tone="peach"], .hololake-theme-menu i[data-tone="peach"] { --theme-dot: #fb7185; }
|
|
.hololake-theme-nav i[data-tone="native-galaxy"], .hololake-theme-menu i[data-tone="native-galaxy"] { --theme-dot: #8fb8d8; }
|
|
|
|
[data-guanghu-theme="guanghu-native-galaxy"] .app-shell {
|
|
background:
|
|
radial-gradient(circle at 16% 4%, rgba(23, 58, 94, .18), transparent 30%),
|
|
radial-gradient(circle at 86% 96%, rgba(62, 53, 107, .12), transparent 32%),
|
|
var(--surface-app);
|
|
}
|
|
[data-guanghu-theme="guanghu-native-galaxy"] .hololake-bar,
|
|
[data-guanghu-theme="guanghu-native-galaxy"] .channel-dock,
|
|
[data-guanghu-theme="guanghu-native-galaxy"] .app__sidebar,
|
|
[data-guanghu-theme="guanghu-native-galaxy"] .app__note-list {
|
|
background-color: color-mix(in srgb, var(--surface-sidebar) 92%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
[data-guanghu-theme="guanghu-native-galaxy"] .app__editor {
|
|
background:
|
|
radial-gradient(circle at 74% 14%, rgba(62, 53, 107, .08), transparent 28%),
|
|
var(--surface-editor);
|
|
}
|
|
[data-guanghu-theme="guanghu-native-galaxy"] button:focus-visible {
|
|
outline-color: #8fb8d8;
|
|
}
|
|
.channel-dock { display: flex; width: 58px; flex: 0 0 58px; flex-direction: column; align-items: center; gap: 8px; padding: 10px 7px; border-right: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-sidebar) 92%, var(--accent-blue)); }
|
|
.channel-dock button { display: grid; width: 44px; min-height: 48px; place-items: center; gap: 2px; padding: 5px 2px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; }.channel-dock button:hover, .channel-dock button[data-active="true"] { border-color: var(--border-default); background: var(--state-selected); color: var(--text-primary); }.channel-dock button:disabled { opacity: .45; cursor: default; }.channel-dock span { font-family: Georgia, serif; font-size: 16px; }.channel-dock small { font-size: 9px; }
|
|
/* Tauri's macOS traffic lights are overlaid on the title bar. Keep the
|
|
product mark and title in a separate, stable lane so they never collide. */
|
|
body.mac-chrome .hololake-bar { padding-left: 92px; }
|
|
.team-foundation { --lighthouse-line: rgba(255,255,255,.09); --lighthouse-muted: #8590a3; display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100vh; color: #edf2f8; background: #090d13; }
|
|
.team-foundation button { font: inherit; }
|
|
.team-foundation__sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 30px 18px 20px; border-right: 1px solid var(--lighthouse-line); background: linear-gradient(180deg, #101720 0%, #0b1017 72%); }
|
|
.team-foundation__brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; border-bottom: 1px solid var(--lighthouse-line); }
|
|
.team-foundation__brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(102,213,226,.5); border-radius: 12px; color: #7ce5ed; background: rgba(64,188,207,.1); box-shadow: 0 0 28px rgba(61,201,219,.16); font-size: 28px; }
|
|
.team-foundation__brand div { display: grid; gap: 5px; }.team-foundation__brand strong { font-size: 17px; letter-spacing: .05em; }.team-foundation__brand div span { color: #667386; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
|
|
.team-foundation__nav { display: grid; gap: 6px; margin-top: 28px; }.team-foundation__nav > p { margin: 0 10px 9px; color: #5d6878; font-size: 10px; letter-spacing: .14em; }
|
|
.team-foundation__nav button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px 10px; border: 1px solid transparent; border-radius: 11px; color: #8f9bad; background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
|
|
.team-foundation__nav button:hover { color: #dbe5f1; background: rgba(255,255,255,.035); }.team-foundation__nav button.is-active { border-color: rgba(95,200,222,.18); color: #f3f8fc; background: linear-gradient(90deg, rgba(43,152,187,.18), rgba(43,152,187,.05)); }
|
|
.team-foundation__domain-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #70dce5; box-shadow: 0 0 13px rgba(112,220,229,.75); }.team-foundation__nav button[data-tone="blue"] .team-foundation__domain-dot { background: #6ca6ff; box-shadow: 0 0 13px rgba(108,166,255,.7); }.team-foundation__nav button[data-tone="violet"] .team-foundation__domain-dot { background: #a989ff; box-shadow: 0 0 13px rgba(169,137,255,.7); }.team-foundation__nav button[data-tone="amber"] .team-foundation__domain-dot { background: #f0bb62; box-shadow: 0 0 13px rgba(240,187,98,.7); }
|
|
.team-foundation__nav button > span:last-child { display: grid; gap: 3px; }.team-foundation__nav strong { font-size: 13px; font-weight: 600; }.team-foundation__nav small { color: #667386; font-size: 10px; }
|
|
.team-foundation__gate { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin-top: 22px; padding: 14px 11px; border: 1px solid var(--lighthouse-line); border-radius: 12px; background: rgba(255,255,255,.025); }.team-foundation__gate-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #7d8999; background: rgba(255,255,255,.05); }.team-foundation__gate div { display: grid; gap: 3px; }.team-foundation__gate strong { color: #aab4c1; font-size: 11px; }.team-foundation__gate small { color: #596575; font-size: 9px; }.team-foundation__lock { padding: 3px 6px; border-radius: 999px; color: #777f8b; background: rgba(255,255,255,.06); font-size: 8px; }
|
|
.team-foundation__sidebar-footer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin-top: auto; padding: 18px 9px 0; border-top: 1px solid var(--lighthouse-line); color: #657183; font-size: 9px; }.team-foundation__sidebar-footer code { grid-column: 1 / -1; margin-top: 4px; color: #424d5d; font-size: 8px; }.team-foundation__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #65d6a1; box-shadow: 0 0 9px rgba(101,214,161,.65); }
|
|
.team-foundation__workspace { min-width: 0; }.team-foundation__topbar { display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--lighthouse-line); background: rgba(9,13,19,.86); backdrop-filter: blur(16px); }.team-foundation__topbar > div:first-child { display: flex; align-items: center; gap: 12px; }.team-foundation__topbar span { color: #768296; font-size: 11px; }.team-foundation__topbar strong { padding: 4px 8px; border: 1px solid rgba(105,214,224,.18); border-radius: 999px; color: #8cdde5; background: rgba(61,178,194,.08); font-size: 9px; font-weight: 500; }.team-foundation__topbar-actions { display: flex; gap: 7px; }.team-foundation__topbar-actions button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--lighthouse-line); border-radius: 9px; color: #8692a4; background: rgba(255,255,255,.025); cursor: pointer; }
|
|
.team-foundation__content { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 72px; }
|
|
.team-foundation__hero { position: relative; display: grid; min-height: 355px; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; overflow: hidden; padding: 52px 58px; border: 1px solid var(--lighthouse-line); border-radius: 24px; background: radial-gradient(circle at 78% 45%, rgba(40,174,201,.17), transparent 29%), linear-gradient(135deg, #111923, #0c121a 68%); box-shadow: 0 28px 80px rgba(0,0,0,.22); }
|
|
.team-foundation__hero-copy { position: relative; z-index: 2; }.team-foundation__hero-copy > p:first-child { margin: 0 0 17px; color: #59c8d5; font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }.team-foundation__hero h1 { margin: 0; color: #f4f7f9; font: 500 clamp(44px, 6vw, 76px)/1.05 Georgia, "Songti SC", serif; letter-spacing: .02em; }.team-foundation__hero h2 { margin: 17px 0 11px; color: #c7d3df; font-size: 17px; font-weight: 500; }.team-foundation__hero-copy > p:nth-of-type(2) { max-width: 570px; margin: 0; color: #8794a6; font-size: 13px; line-height: 1.8; }
|
|
.team-foundation__hero-actions { display: flex; align-items: center; gap: 17px; margin-top: 28px; }.team-foundation__hero-actions button { padding: 11px 17px; border: 1px solid rgba(104,216,228,.4); border-radius: 9px; color: #0b171b; background: #71d8e1; box-shadow: 0 8px 28px rgba(64,193,210,.16); font-size: 11px; cursor: pointer; }.team-foundation__hero-actions button span { margin-left: 12px; color: inherit; }.team-foundation__hero-actions > span { color: #536070; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.team-foundation__orbit { position: relative; display: grid; width: 280px; height: 280px; place-items: center; justify-self: end; }.team-foundation__orbit::before, .team-foundation__orbit::after { position: absolute; content: ""; border: 1px solid rgba(114,220,229,.16); border-radius: 50%; }.team-foundation__orbit::before { inset: 24px; }.team-foundation__orbit::after { inset: 62px; border-style: dashed; animation: lighthouse-spin 26s linear infinite; }.team-foundation__orbit-core { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(126,228,235,.42); border-radius: 50%; color: #b8f3f5; background: radial-gradient(circle, rgba(93,214,224,.25), rgba(36,126,147,.07)); box-shadow: 0 0 55px rgba(57,193,210,.24), inset 0 0 26px rgba(103,221,231,.1); font: 28px Georgia, serif; }.team-foundation__orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #6cd8e2; box-shadow: 0 0 12px #6cd8e2; }.team-foundation__orbit i:nth-of-type(1) { top: 22px; left: 136px; }.team-foundation__orbit i:nth-of-type(2) { top: 135px; right: 22px; background: #81a9ff; box-shadow: 0 0 12px #81a9ff; }.team-foundation__orbit i:nth-of-type(3) { bottom: 22px; left: 136px; background: #a98cff; box-shadow: 0 0 12px #a98cff; }.team-foundation__orbit i:nth-of-type(4) { top: 135px; left: 22px; background: #eeb963; box-shadow: 0 0 12px #eeb963; }
|
|
.team-foundation__modules { padding-top: 55px; }.team-foundation__section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.team-foundation__section-heading p { margin: 0 0 7px; color: #4c8793; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }.team-foundation__section-heading h2 { margin: 0; font-size: 22px; font-weight: 520; }.team-foundation__section-heading > span { color: #5d6878; font-size: 10px; }
|
|
.team-foundation__module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.team-foundation__module { min-height: 218px; padding: 19px; border: 1px solid var(--lighthouse-line); border-radius: 15px; background: linear-gradient(150deg, rgba(19,27,37,.95), rgba(12,18,26,.95)); }.team-foundation__module-icon { display: grid; width: 36px; height: 36px; place-items: center; margin-bottom: 18px; border: 1px solid rgba(104,205,219,.16); border-radius: 10px; color: #78d6df; background: rgba(53,164,182,.08); }.team-foundation__badge { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: 8px; }.team-foundation__badge.is-system { color: #8de0e6; background: rgba(62,180,194,.11); }.team-foundation__badge.is-active { color: #9fb9ff; background: rgba(94,132,220,.12); }.team-foundation__badge.is-muted { color: #7c8796; background: rgba(255,255,255,.05); }.team-foundation__module h3 { margin: 10px 0 8px; font-size: 14px; font-weight: 600; }.team-foundation__module p { margin: 0; color: #738093; font-size: 10px; line-height: 1.65; }.team-foundation__module footer { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; color: #3f4b5a; }.team-foundation__module footer code { font-size: 8px; }.team-foundation__module--add { display: flex; align-items: center; justify-content: center; flex-direction: column; border-style: dashed; text-align: center; background: rgba(255,255,255,.012); }.team-foundation__module--add > span { color: #4c596a; font-size: 26px; }.team-foundation__module--add p { max-width: 180px; }
|
|
.team-foundation__access-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; padding-top: 48px; }.team-foundation__fifth-domain, .team-foundation__boundaries { min-height: 190px; padding: 28px; border: 1px solid var(--lighthouse-line); border-radius: 17px; background: #0d131b; }.team-foundation__fifth-domain { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; }.team-foundation__fifth-domain > div span, .team-foundation__boundaries > span { color: #5b6574; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }.team-foundation__fifth-domain h2, .team-foundation__boundaries h2 { margin: 9px 0 0; font-size: 17px; font-weight: 520; }.team-foundation__fifth-domain p { grid-column: 1 / -1; max-width: 600px; margin: 0; color: #738093; font-size: 11px; line-height: 1.7; }.team-foundation__fifth-domain button { justify-self: start; padding: 8px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #5d6775; background: rgba(255,255,255,.03); font-size: 9px; }.team-foundation__boundaries ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 20px 0 0; padding: 0; list-style: none; }.team-foundation__boundaries li { color: #7a8697; font-size: 9px; }.team-foundation__boundaries li::before { margin-right: 7px; color: #64cfd9; content: "·"; }
|
|
@keyframes lighthouse-spin { to { transform: rotate(360deg); } }
|
|
@media (max-width: 980px) { .team-foundation { grid-template-columns: 220px minmax(0, 1fr); }.team-foundation__hero { grid-template-columns: 1fr; }.team-foundation__orbit { position: absolute; right: -70px; opacity: .55; }.team-foundation__module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.team-foundation__access-row { grid-template-columns: 1fr; } }
|
|
@media (max-width: 720px) { .team-foundation { display: block; }.team-foundation__sidebar { position: static; height: auto; }.team-foundation__nav { grid-template-columns: 1fr 1fr; }.team-foundation__gate, .team-foundation__sidebar-footer { display: none; }.team-foundation__content { width: min(100% - 28px, 1180px); padding-top: 28px; }.team-foundation__hero { min-height: 330px; padding: 35px 28px; }.team-foundation__topbar { padding: 0 18px; }.team-foundation__module-grid { grid-template-columns: 1fr; } }
|
|
|
|
/* Team shell deliberately stays lightweight: shared theme colors, no animated or blurred skin. */
|
|
.team-foundation--lightweight { --lighthouse-line: var(--border-color); color: var(--text-primary); background: var(--bg-primary); }
|
|
.team-foundation--lightweight .team-foundation__sidebar { padding: 22px 16px 16px; background: var(--bg-secondary); }
|
|
.team-foundation--lightweight .team-foundation__brand-mark { border: 0; color: var(--accent-blue); background: var(--accent-blue-subtle); box-shadow: none; font-size: 16px; font-weight: 700; }
|
|
.team-foundation--lightweight .team-foundation__nav button,
|
|
.team-foundation--lightweight .team-foundation__nav button:hover,
|
|
.team-foundation--lightweight .team-foundation__nav button.is-active { background: transparent; box-shadow: none; }
|
|
.team-foundation--lightweight .team-foundation__nav button.is-active { border-color: var(--accent-blue); color: var(--text-primary); background: var(--accent-blue-subtle); }
|
|
.team-foundation--lightweight .team-foundation__domain-dot { box-shadow: none !important; }
|
|
.team-foundation--lightweight .team-foundation__gate,
|
|
.team-foundation--lightweight .team-foundation__topbar,
|
|
.team-foundation--lightweight .team-foundation__hero,
|
|
.team-foundation--lightweight .team-foundation__module,
|
|
.team-foundation--lightweight .team-foundation__fifth-domain,
|
|
.team-foundation--lightweight .team-foundation__boundaries { background: var(--bg-secondary); box-shadow: none; backdrop-filter: none; }
|
|
.team-foundation--lightweight .team-foundation__topbar { height: 58px; }
|
|
.team-foundation--lightweight .team-foundation__content { padding-top: 32px; }
|
|
.team-foundation--lightweight .team-foundation__hero { min-height: 250px; grid-template-columns: 1fr; padding: 36px 40px; border-radius: 14px; }
|
|
.team-foundation--lightweight .team-foundation__hero h1 { color: var(--text-primary); font: 600 clamp(34px, 5vw, 56px)/1.1 system-ui, sans-serif; }
|
|
.team-foundation--lightweight .team-foundation__hero h2 { color: var(--text-primary); }
|
|
.team-foundation--lightweight .team-foundation__hero-copy > p:nth-of-type(2),
|
|
.team-foundation--lightweight .team-foundation__module p,
|
|
.team-foundation--lightweight .team-foundation__fifth-domain p { color: var(--text-secondary); }
|
|
.team-foundation--lightweight .team-foundation__hero-actions > span { color: var(--text-secondary); font: 11px/1.6 system-ui, sans-serif; }
|
|
.team-foundation--lightweight .team-foundation__module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.team-foundation--lightweight .team-foundation__module { min-height: 190px; }
|
|
.team-foundation--lightweight .team-foundation__module button { margin-top: 20px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 7px; color: var(--text-primary); background: var(--bg-primary); cursor: pointer; }
|
|
.team-foundation--lightweight .team-foundation__module button:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue); }
|
|
.team-foundation--lightweight .team-foundation__module button:disabled { color: var(--text-tertiary); cursor: default; }
|
|
.team-foundation__loading { display: grid; min-height: 100vh; place-items: center; color: var(--text-secondary); background: var(--bg-primary); }
|
|
|
|
@media (max-width: 980px) { .team-foundation--lightweight .team-foundation__module-grid { grid-template-columns: 1fr; } }
|
|
.hololake-bar__brand { min-width: max-content; white-space: nowrap; }
|
|
.hololake-bar__context { white-space: nowrap; }
|
|
.hololake-home { position: relative; z-index: 2; display: flex; width: 100%; min-width: 0; overflow: hidden; color: var(--text-primary); background: var(--surface-app); transition: color .28s ease, background-color .28s ease; }
|
|
.channel-workspace { position: relative; min-width: 0; flex: 1; overflow: auto; padding: clamp(28px, 5vw, 64px); background: var(--surface-app); }
|
|
.living-system-status {
|
|
position: absolute;
|
|
z-index: 24;
|
|
top: 14px;
|
|
right: 18px;
|
|
display: inline-grid;
|
|
grid-template-columns: 8px auto;
|
|
column-gap: 8px;
|
|
align-items: center;
|
|
min-height: 34px;
|
|
padding: 7px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--surface-app) 72%, transparent);
|
|
box-shadow: 0 12px 34px rgb(0 0 0 / 14%);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
line-height: 1.1;
|
|
letter-spacing: .04em;
|
|
backdrop-filter: blur(16px);
|
|
pointer-events: none;
|
|
}
|
|
.living-system-status > i {
|
|
grid-row: 1 / span 2;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--accent-blue);
|
|
box-shadow: 0 0 12px color-mix(in srgb, var(--accent-blue) 76%, transparent);
|
|
}
|
|
.living-system-status > span { font-weight: 650; }
|
|
.living-system-status > small { color: var(--text-tertiary); font-size: 9px; }
|
|
.hololake-home[data-living-kernel="planning"] .living-system-status > i {
|
|
animation: living-system-breathe 900ms ease-in-out infinite alternate;
|
|
}
|
|
.hololake-home[data-living-kernel="server"] .living-system-status {
|
|
border-color: color-mix(in srgb, var(--accent-green) 38%, transparent);
|
|
}
|
|
.hololake-home[data-living-kernel="server"] .living-system-status > i {
|
|
background: var(--accent-green);
|
|
box-shadow: 0 0 14px color-mix(in srgb, var(--accent-green) 82%, transparent);
|
|
}
|
|
@keyframes living-system-breathe {
|
|
from { opacity: .46; transform: scale(.78); }
|
|
to { opacity: 1; transform: scale(1.18); }
|
|
}
|
|
.channel-rail { display: flex; width: 258px; flex: 0 0 258px; flex-direction: column; gap: 24px; overflow-y: auto; padding: 26px 16px; border-right: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-sidebar) 94%, var(--accent-blue)); transition: width .25s ease, background-color .28s ease; }
|
|
.channel-rail__heading { display: grid; gap: 5px; padding: 4px 10px 14px; border-bottom: 1px solid var(--border-default); }
|
|
.channel-rail__heading span { color: var(--accent-blue); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
|
|
.channel-rail__heading strong { font-size: 20px; }.channel-rail__heading small { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
|
|
.channel-rail nav { display: grid; gap: 4px; }
|
|
.channel-rail nav button { justify-content: flex-start; width: 100%; height: 44px; padding-inline: 12px; color: var(--text-secondary); font-size: 14px; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
|
|
.channel-rail nav button:hover { transform: translateX(3px); }
|
|
.channel-rail nav button[data-active="true"] { background: var(--state-selected); color: var(--text-primary); }
|
|
.channel-rail[data-locked="true"] nav button,
|
|
.channel-rail[data-locked="true"] .channel-rail__modules { opacity: .3; filter: saturate(.2); }
|
|
.channel-rail[data-locked="true"] nav button { cursor: not-allowed; transform: none; }
|
|
.hololake-home[data-world-open="false"] .channel-rail { border-right-color: rgba(122, 151, 185, .14); background: #07111f; color: #d9e5f2; }
|
|
.hololake-home[data-world-open="false"] .channel-rail__heading { border-bottom-color: rgba(122, 151, 185, .14); }
|
|
.hololake-home[data-world-open="false"] .channel-rail__heading small { color: #6f8196; }
|
|
.hololake-home[data-world-open="false"] .channel-rail__modules { border-color: rgba(122, 151, 185, .14); background: #0a1728; }
|
|
.hololake-home[data-world-open="false"] .channel-workspace { padding: 0; }
|
|
.guanghu-login {
|
|
--guanghu-login-space: none;
|
|
position: relative;
|
|
display: grid;
|
|
min-height: 100%;
|
|
grid-template-rows: auto 1fr auto;
|
|
overflow: hidden;
|
|
color: #dcecff;
|
|
background:
|
|
linear-gradient(90deg, rgba(4, 10, 28, .94), rgba(4, 10, 28, .58) 45%, rgba(4, 10, 28, .9)),
|
|
var(--guanghu-login-space) center / cover;
|
|
isolation: isolate;
|
|
}
|
|
.guanghu-login::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 26% 48%, rgba(44, 152, 215, .18), transparent 28%),
|
|
radial-gradient(circle at 72% 38%, rgba(116, 83, 196, .16), transparent 34%);
|
|
content: '';
|
|
}
|
|
.guanghu-login__stars {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
opacity: .42;
|
|
background-image: var(--guanghu-login-space);
|
|
background-position: center;
|
|
background-size: cover;
|
|
mix-blend-mode: screen;
|
|
animation: guanghu-stars-breathe 8s ease-in-out infinite alternate;
|
|
}
|
|
.guanghu-login__header,
|
|
.guanghu-login__footer {
|
|
position: relative;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 22px 34px;
|
|
border-color: rgba(132, 178, 222, .16);
|
|
background: rgba(3, 9, 24, .58);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
.guanghu-login__header { border-bottom: 1px solid rgba(132, 178, 222, .16); }
|
|
.guanghu-login__header > div { display: flex; align-items: center; gap: 11px; }
|
|
.guanghu-login__header > div strong { font: 500 15px/1 "Songti SC", Georgia, serif; letter-spacing: .08em; }
|
|
.guanghu-login__header > span { color: #7593b3; font-size: 11px; letter-spacing: .08em; }
|
|
.guanghu-login__mark {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border: 1px solid rgba(96, 208, 239, .52);
|
|
border-radius: 50%;
|
|
color: #b9f3ff;
|
|
background: rgba(24, 119, 154, .2);
|
|
box-shadow: 0 0 24px rgba(62, 192, 229, .24);
|
|
font: 20px/1 "Songti SC", serif;
|
|
}
|
|
.guanghu-login__system {
|
|
display: grid;
|
|
width: min(1180px, calc(100% - 72px));
|
|
grid-template-columns: minmax(360px, 1fr) minmax(390px, .82fr);
|
|
align-items: center;
|
|
gap: clamp(42px, 8vw, 118px);
|
|
margin: auto;
|
|
padding: 50px 0;
|
|
}
|
|
.guanghu-login__orbit {
|
|
position: relative;
|
|
display: grid;
|
|
width: min(46vw, 510px);
|
|
aspect-ratio: 1;
|
|
place-items: center;
|
|
justify-self: center;
|
|
}
|
|
.guanghu-login__orbit img {
|
|
width: 58%;
|
|
height: 58%;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 0 34px rgba(69, 177, 235, .42));
|
|
animation: guanghu-core-breathe 6s ease-in-out infinite alternate;
|
|
}
|
|
.guanghu-login__copy { position: relative; z-index: 2; }
|
|
.guanghu-login__copy > p:first-child {
|
|
margin: 0 0 18px;
|
|
color: #79cfee;
|
|
font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
letter-spacing: .22em;
|
|
}
|
|
.guanghu-login__copy h1 {
|
|
max-width: 600px;
|
|
margin: 0;
|
|
color: #f4f8ff;
|
|
font: 500 clamp(42px, 5.5vw, 78px)/1.06 "Songti SC", "STSong", Georgia, serif;
|
|
letter-spacing: .04em;
|
|
text-shadow: 0 0 38px rgba(81, 177, 232, .2);
|
|
}
|
|
.guanghu-login__copy > p:nth-of-type(2) {
|
|
max-width: 520px;
|
|
margin: 24px 0 0;
|
|
color: #879fb9;
|
|
font-size: 14px;
|
|
line-height: 1.85;
|
|
}
|
|
.guanghu-login__action {
|
|
min-width: 278px;
|
|
height: 50px;
|
|
justify-content: center;
|
|
gap: 13px;
|
|
margin-top: 34px;
|
|
border: 1px solid rgba(126, 220, 246, .42);
|
|
color: #061321;
|
|
background: linear-gradient(105deg, #80ddf3, #a6c6ff);
|
|
box-shadow: 0 16px 42px rgba(53, 162, 216, .2);
|
|
font-size: 13px;
|
|
}
|
|
.guanghu-login__handoff,
|
|
.guanghu-login__error {
|
|
display: grid;
|
|
max-width: 560px;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-top: 30px;
|
|
padding: 16px;
|
|
border: 1px solid rgba(112, 206, 224, .24);
|
|
border-radius: 12px;
|
|
background: rgba(8, 24, 45, .72);
|
|
}
|
|
.guanghu-login__handoff > svg { color: #7ee0bd; font-size: 25px; }
|
|
.guanghu-login__handoff > div { display: grid; gap: 4px; }
|
|
.guanghu-login__handoff strong { font-size: 13px; }
|
|
.guanghu-login__handoff span,
|
|
.guanghu-login__handoff code { color: #7890aa; font-size: 11px; }
|
|
.guanghu-login__handoff button,
|
|
.guanghu-login__error button { color: #a9dff0; border-color: rgba(118, 207, 235, .25); }
|
|
.guanghu-login__error {
|
|
grid-template-columns: 1fr auto;
|
|
border-color: rgba(236, 112, 132, .3);
|
|
}
|
|
.guanghu-login__error strong,
|
|
.guanghu-login__error span { grid-column: 1; }
|
|
.guanghu-login__error span { color: #df95a3; font-size: 11px; overflow-wrap: anywhere; }
|
|
.guanghu-login__error button { grid-column: 2; grid-row: 1 / 3; }
|
|
.guanghu-login__privacy {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
max-width: 520px;
|
|
margin-top: 22px;
|
|
color: #607891;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
}
|
|
.guanghu-login__privacy svg { flex: 0 0 auto; color: #73aec2; font-size: 17px; }
|
|
.guanghu-login__footer {
|
|
border-top: 1px solid rgba(132, 178, 222, .16);
|
|
color: #617b96;
|
|
font-size: 10px;
|
|
}
|
|
.guanghu-login__footer > span { display: flex; align-items: center; gap: 8px; }
|
|
.guanghu-login__footer i {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #64d6a4;
|
|
box-shadow: 0 0 10px rgba(100, 214, 164, .7);
|
|
}
|
|
.guanghu-login__footer code { color: #57708a; letter-spacing: .08em; }
|
|
@keyframes guanghu-core-breathe {
|
|
from { opacity: .84; transform: scale(.985); }
|
|
to { opacity: 1; transform: scale(1.025); }
|
|
}
|
|
@keyframes guanghu-stars-breathe {
|
|
from { opacity: .28; }
|
|
to { opacity: .46; }
|
|
}
|
|
@media (max-width: 820px) {
|
|
.guanghu-login__system {
|
|
width: min(100% - 36px, 620px);
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
padding: 24px 0 42px;
|
|
}
|
|
.guanghu-login__orbit { width: min(72vw, 340px); }
|
|
.guanghu-login__copy { text-align: center; }
|
|
.guanghu-login__copy > p:nth-of-type(2),
|
|
.guanghu-login__privacy { margin-inline: auto; }
|
|
.guanghu-login__handoff,
|
|
.guanghu-login__error { text-align: left; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.guanghu-login__stars,
|
|
.guanghu-login__orbit img { animation: none; }
|
|
}
|
|
.channel-rail nav i { width: 8px; height: 8px; border-radius: 999px; background: var(--tag-color); box-shadow: 0 0 10px color-mix(in srgb, var(--tag-color) 55%, transparent); }
|
|
.channel-rail nav i[data-color="cyan"] { --tag-color: #4fd1c5; }.channel-rail nav i[data-color="blue"] { --tag-color: #60a5fa; }.channel-rail nav i[data-color="violet"] { --tag-color: #a78bfa; }.channel-rail nav i[data-color="amber"] { --tag-color: #fbbf24; }.channel-rail nav i[data-color="rose"] { --tag-color: #fb7185; }.channel-rail nav i[data-color="pink"] { --tag-color: #f472b6; }.channel-rail nav i[data-color="green"] { --tag-color: #4ade80; }
|
|
.channel-rail__modules { display: grid; gap: 8px; margin-top: auto; padding: 14px 10px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); }
|
|
.channel-rail__modules span { color: var(--text-muted); font-size: 11px; letter-spacing: .12em; }.channel-rail__modules b { font-size: 14px; font-weight: 550; line-height: 1.55; }
|
|
.channel-mobile-nav { display: none; }
|
|
.world-session-bar { display: flex; align-items: center; justify-content: space-between; width: min(1080px, 100%); margin: 0 auto 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); }
|
|
.world-session-bar__actions { display: flex; align-items: center; gap: 8px; }
|
|
.world-session-bar__ai { border: 1px solid color-mix(in srgb, var(--world-accent-2) 42%, transparent); background: color-mix(in srgb, var(--world-accent-2) 9%, transparent); }
|
|
|
|
.app:has(.hololake-home) [data-ai-workspace-mode="side"] {
|
|
border-left-color: color-mix(in srgb, var(--world-accent-2) 35%, var(--sidebar-border));
|
|
background:
|
|
radial-gradient(circle at 80% 8%, color-mix(in srgb, var(--world-accent-2) 12%, transparent), transparent 34%),
|
|
color-mix(in srgb, var(--sidebar) 94%, transparent);
|
|
box-shadow: -20px 0 56px color-mix(in srgb, var(--world-bg) 68%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
.world-presence { display: flex; align-items: center; gap: 10px; }
|
|
.world-presence > i { width: 8px; height: 8px; border-radius: 50%; background: #77d6ad; box-shadow: 0 0 14px color-mix(in srgb, #77d6ad 66%, transparent); }
|
|
.world-presence > span { display: grid; gap: 2px; }
|
|
.world-presence strong { font-size: 13px; font-weight: 650; }
|
|
.world-presence small { color: var(--text-muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.world-presence--large { min-width: 230px; padding: 14px 18px; border-left: 1px solid color-mix(in srgb, #77d6ad 40%, var(--border-default)); }
|
|
.world-overview { width: min(980px, 100%); margin: 0 auto; padding: 12px 0 48px; animation: channel-stage-in .24s ease-out; }
|
|
.world-overview__intro { max-width: 620px; margin: 10px auto 46px; text-align: center; }
|
|
.world-overview__intro > span { color: #8faed0; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }
|
|
.hololake-home .world-overview__intro h1 { margin: 14px 0 0; font-family: ui-serif, 'Songti SC', 'STSong', serif; font-size: clamp(38px, 5vw, 60px); font-weight: 500; letter-spacing: .03em; }
|
|
.world-overview__intro p { margin: 15px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.8; }
|
|
.world-overview__map { width: min(780px, 100%); margin: 0 auto; }
|
|
.world-lighthouse { position: relative; display: flex; align-items: center; gap: 18px; min-height: 96px; padding: 10px 8px 24px; }
|
|
.world-lighthouse::after { position: absolute; bottom: 0; left: 35px; width: 1px; height: 24px; background: linear-gradient(#9ab7d7, var(--border-default)); content: ''; }
|
|
.world-lighthouse__signal { position: relative; display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; }
|
|
.world-lighthouse__signal span { z-index: 1; color: #fff1cc; font-size: 27px; text-shadow: 0 0 16px rgba(255, 239, 195, .5); }
|
|
.world-lighthouse__signal i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, #ffe9b0 32%, var(--border-default)); border-radius: 50%; }
|
|
.world-lighthouse > div:last-child { display: grid; gap: 3px; }.world-lighthouse > div:last-child > span { color: var(--text-muted); font-size: 11px; }.world-lighthouse strong { font-size: 18px; font-weight: 620; }.world-lighthouse small { color: #81bda5; font-size: 11px; }
|
|
.enterprise-domain-list { position: relative; display: grid; margin-left: 35px; border-left: 1px solid var(--border-default); }
|
|
.enterprise-domain-list > div { position: relative; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; min-height: 70px; gap: 14px; padding: 10px 8px 10px 26px; border-bottom: 1px solid var(--border-default); }
|
|
.enterprise-domain-list > div::before { position: absolute; top: 50%; left: -1px; width: 18px; height: 1px; background: var(--border-strong); content: ''; }
|
|
.enterprise-domain-list i { color: var(--text-muted); font: normal 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.enterprise-domain-list span { display: grid; gap: 4px; }.enterprise-domain-list strong { font-size: 15px; font-weight: 600; }.enterprise-domain-list small { color: var(--text-muted); font-size: 11px; }.enterprise-domain-list b { color: var(--text-muted); font-size: 10px; font-weight: 500; }
|
|
.world-route-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px 35px; color: var(--text-muted); font-size: 10px; letter-spacing: .12em; }.world-route-divider::before, .world-route-divider::after { height: 1px; flex: 1; background: var(--border-default); content: ''; }
|
|
.fifth-domain-entry { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; width: calc(100% - 35px); gap: 16px; margin-left: 35px; padding: 19px 20px; border: 1px solid color-mix(in srgb, #81b7eb 46%, var(--border-default)); border-radius: 12px; background: linear-gradient(115deg, color-mix(in srgb, var(--surface-card) 94%, #4e8bc4), var(--surface-card)); color: var(--text-primary); text-align: left; cursor: pointer; box-shadow: 0 16px 42px color-mix(in srgb, #000 13%, transparent); transition: border-color .18s ease, transform .18s ease, background-color .18s ease; }
|
|
.fifth-domain-entry:hover { border-color: #89bee9; transform: translateY(-2px); }.fifth-domain-entry > i { color: #91bde6; font: normal 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.fifth-domain-entry > span { display: grid; gap: 4px; }.fifth-domain-entry strong { font-size: 18px; font-weight: 640; }.fifth-domain-entry small { color: var(--text-secondary); font-size: 11px; }.fifth-domain-entry > b { color: #9ac9f2; font-size: 12px; font-weight: 600; }.fifth-domain-entry em { margin-left: 8px; font-style: normal; }
|
|
|
|
/* Guanghu world is a live topology projection. The SVG positions remain stable
|
|
while node state and future registry nodes can update independently. */
|
|
.hololake-home[data-route="world"][data-world-open="true"] .channel-workspace { overflow: hidden; padding: 0; background: #081226; }
|
|
.hololake-home[data-route="world"] .world-session-bar { display: none; }
|
|
.hololake-home[data-route="world"] .channel-rail { border-right-color: rgba(132, 158, 214, .16); color: #e7edff; background: linear-gradient(180deg, #101a37, #0a142c); }
|
|
.hololake-home[data-route="world"] .channel-rail__heading { border-bottom-color: rgba(132, 158, 214, .15); }
|
|
.hololake-home[data-route="world"] .channel-rail__heading small { color: #7787a6; }
|
|
.hololake-home[data-route="world"] .channel-rail nav button { color: #8796b5; }
|
|
.hololake-home[data-route="world"] .channel-rail nav button:hover { color: #e8eeff; background: rgba(112, 132, 206, .08); }
|
|
.hololake-home[data-route="world"] .channel-rail nav button[data-active="true"] { color: #eef2ff; background: linear-gradient(90deg, rgba(83, 106, 193, .26), rgba(83, 106, 193, .08)); }
|
|
.hololake-home[data-route="world"] .channel-rail__modules { border-color: rgba(132, 158, 214, .15); color: #aab7d0; background: rgba(10, 20, 43, .56); }
|
|
.world-map-shell {
|
|
--world-map-line: rgba(132, 158, 214, .24);
|
|
--world-map-surface: rgba(19, 31, 62, .92);
|
|
display: grid;
|
|
height: 100%;
|
|
min-height: 580px;
|
|
grid-template-columns: minmax(0, 1fr) 286px;
|
|
grid-template-rows: minmax(0, 1fr) 52px;
|
|
overflow: hidden;
|
|
color: #e9efff;
|
|
background: #081226;
|
|
}
|
|
.world-map-canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid rgba(130, 154, 206, .16); isolation: isolate; }
|
|
.world-map-canvas { scrollbar-color: rgba(113, 134, 192, .55) #081226; scrollbar-width: thin; }
|
|
.world-map-canvas::-webkit-scrollbar { height: 6px; }.world-map-canvas::-webkit-scrollbar-track { background: #081226; }.world-map-canvas::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(113, 134, 192, .55); }
|
|
.world-map-canvas::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 42% 52%, rgba(75, 90, 187, .13), transparent 34%), radial-gradient(circle at 72% 40%, rgba(45, 133, 173, .07), transparent 32%), linear-gradient(145deg, #09142a, #071022 72%); content: ''; }
|
|
.world-map-canvas__grid { position: absolute; z-index: -1; inset: 0; opacity: .26; background-image: linear-gradient(rgba(113, 139, 194, .19) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 139, 194, .19) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent); pointer-events: none; }
|
|
.world-map-heading { position: absolute; z-index: 3; top: 19px; right: 24px; left: 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
|
|
.world-map-heading > div:first-child { display: grid; gap: 4px; }.hololake-home .world-map-heading h1 { margin: 0; font: 650 14px/1.25 system-ui, -apple-system, "PingFang SC", sans-serif; letter-spacing: .04em; }.world-map-heading span { color: #7989a9; font-size: 10px; }
|
|
.world-map-heading__presence { display: flex; align-items: center; gap: 7px; }.world-map-heading__presence i { width: 6px; height: 6px; border-radius: 50%; background: #75e4b0; box-shadow: 0 0 10px #75e4b0; }
|
|
.world-graph { width: 100%; height: 100%; min-height: 520px; overflow: visible; }
|
|
.world-graph__viewport { transition: transform .28s ease; }
|
|
.world-graph-edge { fill: none; stroke: var(--world-map-line); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
|
|
.world-graph-edge[data-status="pending"] { stroke-dasharray: 4 6; opacity: .7; }
|
|
.world-graph-edge[data-status="restricted"] { stroke: rgba(242, 115, 142, .45); stroke-dasharray: 3 7; }
|
|
.world-graph-edge[data-status="available"] { stroke: rgba(128, 160, 232, .55); }
|
|
.world-graph-edge[data-status="online"] { stroke: url("#world-map-live-gradient"); stroke-width: 2; stroke-dasharray: 8 8; filter: url("#world-map-glow"); animation: world-route-flow 2.8s linear infinite; }
|
|
.world-graph-node { cursor: pointer; outline: none; opacity: 0; animation: world-node-arrive .42s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(var(--node-index, 0) * 45ms); }
|
|
.world-graph-node:focus-visible .world-graph-node__surface { stroke: #b5c8ff; stroke-width: 2; }
|
|
.world-graph-node__surface { fill: var(--world-map-surface); stroke: rgba(132, 158, 214, .35); stroke-width: 1; transition: fill .2s ease, stroke .2s ease, filter .2s ease, transform .2s ease; }
|
|
.world-graph-node:not(.world-graph-node--root):hover .world-graph-node__surface,
|
|
.world-graph-node[data-selected="true"] .world-graph-node__surface { fill: rgba(29, 44, 84, .98); stroke: rgba(145, 167, 255, .85); filter: drop-shadow(0 0 11px rgba(103, 119, 255, .28)); }
|
|
.world-graph-node[data-kind="library"] .world-graph-node__surface { fill: rgba(48, 39, 45, .94); stroke: rgba(232, 174, 86, .55); }
|
|
.world-graph-node[data-kind="library"][data-selected="true"] .world-graph-node__surface { stroke: #eab76a; filter: drop-shadow(0 0 11px rgba(234, 183, 106, .24)); }
|
|
.world-graph-node[data-status="restricted"] .world-graph-node__surface { stroke: rgba(241, 111, 141, .52); }
|
|
.world-graph-node__presence { fill: #8393bd; stroke: #101b38; stroke-width: 1.5; }
|
|
.world-graph-node[data-status="online"] .world-graph-node__presence { fill: #78e5dc; filter: drop-shadow(0 0 5px #78e5dc); animation: world-presence-pulse 2.6s ease-in-out infinite; }
|
|
.world-graph-node[data-status="restricted"] .world-graph-node__presence { fill: #f06e8d; filter: drop-shadow(0 0 4px rgba(240, 110, 141, .7)); }
|
|
.world-graph-node[data-kind="library"] .world-graph-node__presence { fill: #e9b364; filter: drop-shadow(0 0 4px rgba(233, 179, 100, .65)); }
|
|
.world-graph-node__symbol { fill: #7384ad; font: 8px/1 system-ui, sans-serif; }
|
|
.world-graph-node__label { fill: #e8eeff; font: 600 12px/1 system-ui, -apple-system, "PingFang SC", sans-serif; letter-spacing: .01em; }
|
|
.world-graph-node__status { fill: #7383a4; font: 8px/1 system-ui, -apple-system, "PingFang SC", sans-serif; }
|
|
.world-graph-node[data-status="online"] .world-graph-node__status { fill: #72d7cd; }
|
|
.world-graph-node[data-kind="library"] .world-graph-node__status { fill: #c69355; }
|
|
.world-graph-node__orbit { fill: none; stroke: rgba(122, 147, 211, .45); }
|
|
.world-graph-node__orbit--outer { stroke-dasharray: 2 5; animation: world-orbit-spin 28s linear infinite; }
|
|
.world-graph-node__orbit--inner { stroke: rgba(127, 150, 222, .35); }
|
|
.world-graph-node--root .world-graph-node__surface { fill: radial-gradient(circle, #243368, #111c3e); fill: rgba(31, 47, 94, .96); stroke: rgba(145, 166, 238, .72); filter: drop-shadow(0 0 22px rgba(91, 107, 211, .25)); }
|
|
.world-graph-node__root-label { fill: #f0f3ff; font: 650 18px/1 system-ui, -apple-system, "PingFang SC", sans-serif; letter-spacing: .04em; }
|
|
.world-map-zoom { position: absolute; z-index: 4; bottom: 22px; left: 20px; display: grid; overflow: hidden; border: 1px solid rgba(134, 159, 211, .25); border-radius: 9px; background: rgba(10, 20, 43, .82); backdrop-filter: blur(12px); }
|
|
.world-map-zoom button, .world-map-zoom span { display: grid; width: 36px; height: 34px; place-items: center; border: 0; border-bottom: 1px solid rgba(134, 159, 211, .16); color: #b9c6e3; background: transparent; font: 12px/1 system-ui, sans-serif; }
|
|
.world-map-zoom button { cursor: pointer; }.world-map-zoom button:hover:not(:disabled) { color: #fff; background: rgba(114, 138, 211, .12); }.world-map-zoom button:disabled { opacity: .32; cursor: default; }.world-map-zoom span { color: #7182a5; font-size: 8px; }
|
|
.world-map-legend { position: absolute; z-index: 4; right: 20px; bottom: 22px; display: grid; min-width: 126px; gap: 8px; padding: 13px 14px; border: 1px solid rgba(134, 159, 211, .24); border-radius: 10px; background: rgba(10, 20, 43, .78); backdrop-filter: blur(12px); }
|
|
.world-map-legend strong { margin-bottom: 2px; color: #aebbd8; font-size: 9px; font-weight: 600; }.world-map-legend span { display: flex; align-items: center; gap: 8px; color: #7283a5; font-size: 8px; }.world-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: #8393bd; }.world-map-legend span[data-status="online"] i { background: #78e5dc; box-shadow: 0 0 7px #78e5dc; }.world-map-legend span[data-status="available"] i { background: #8ba2e1; }.world-map-legend span[data-status="restricted"] i { background: #f06e8d; }
|
|
.world-node-inspector { display: flex; min-width: 0; flex-direction: column; gap: 20px; overflow-y: auto; padding: 25px 20px 18px; background: linear-gradient(180deg, rgba(15, 27, 56, .98), rgba(9, 18, 39, .98)); }
|
|
.world-node-inspector > header { display: grid; grid-template-columns: 46px 1fr; align-items: start; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid rgba(132, 158, 214, .17); }
|
|
.world-node-inspector__symbol { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(135, 155, 232, .52); border-radius: 50%; color: #b7c4ff; background: rgba(95, 86, 193, .12); box-shadow: inset 0 0 14px rgba(121, 103, 241, .12); font-size: 11px; }
|
|
.world-node-inspector__symbol[data-kind="library"] { border-color: rgba(232, 174, 86, .55); color: #eac078; background: rgba(181, 121, 50, .1); }
|
|
.world-node-inspector h2 { margin: 2px 0 5px; font-size: 19px; font-weight: 650; }.world-node-inspector header p { margin: 0; color: #7e8dad; font-size: 10px; line-height: 1.6; }
|
|
.world-node-inspector__state { display: flex; align-items: center; gap: 8px; color: #8393b2; font-size: 10px; }.world-node-inspector__state i { width: 7px; height: 7px; border-radius: 50%; background: #8393bd; }.world-node-inspector__state[data-status="online"] { color: #76ddd3; }.world-node-inspector__state[data-status="online"] i { background: #78e5dc; box-shadow: 0 0 8px #78e5dc; }.world-node-inspector__state[data-status="restricted"] { color: #ef829b; }.world-node-inspector__state[data-status="restricted"] i { background: #f06e8d; }
|
|
.world-node-inspector dl { display: grid; gap: 0; margin: 0; }.world-node-inspector dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(132, 158, 214, .12); font-size: 9px; }.world-node-inspector dt { color: #637392; }.world-node-inspector dd { min-width: 0; margin: 0; overflow: hidden; color: #a9b6d1; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
|
|
.world-node-inspector__actions { display: grid; gap: 8px; }.world-node-inspector__actions button { width: 100%; min-height: 40px; justify-content: space-between; border-color: rgba(129, 150, 229, .4); border-radius: 7px; font-size: 10px; }.world-node-inspector__actions button:first-child:not(:disabled) { color: #fff; background: linear-gradient(90deg, #587de0, #695fd8); box-shadow: 0 8px 22px rgba(73, 77, 177, .22); }
|
|
.world-node-inspector > footer { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(132, 158, 214, .14); color: #61708f; font-size: 8px; }.world-node-inspector > footer span { display: flex; align-items: center; gap: 7px; }.world-node-inspector > footer i { width: 5px; height: 5px; border-radius: 50%; background: #74d5a8; box-shadow: 0 0 7px #74d5a8; }
|
|
.world-map-status { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(22px, 5vw, 72px); padding: 0 24px; border-top: 1px solid rgba(132, 158, 214, .18); color: #657594; background: rgba(8, 17, 37, .98); font-size: 9px; }
|
|
.world-map-status span { display: flex; align-items: center; gap: 7px; }.world-map-status span:first-child i { width: 6px; height: 6px; border-radius: 50%; background: #78e5dc; box-shadow: 0 0 8px #78e5dc; }.world-map-status b { color: #a3b1cd; font-weight: 600; }
|
|
@keyframes world-route-flow { to { stroke-dashoffset: -32; } }
|
|
@keyframes world-node-arrive { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes world-presence-pulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
|
|
@keyframes world-orbit-spin { to { transform: rotate(360deg); } }
|
|
|
|
.world-gate { position: absolute; inset: 0; display: grid; min-height: 560px; place-content: center; justify-items: center; overflow: hidden; padding: 48px; text-align: center; isolation: isolate; }
|
|
.world-gate__atmosphere { position: absolute; z-index: -2; inset: -2%; background: #06101d url('./assets/guanghu-world-entry.jpg') center / cover no-repeat; transform: scale(1.02); animation: world-atmosphere-drift 26s ease-in-out infinite alternate; will-change: transform; }
|
|
.world-gate::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(2, 9, 18, .1), rgba(2, 8, 17, .2) 52%, rgba(2, 8, 17, .5)); content: ''; pointer-events: none; }
|
|
.world-gate__sigil { position: relative; display: grid; width: 92px; height: 92px; place-items: center; margin-bottom: 22px; }
|
|
.world-gate__sigil span { color: #fff6df; font-size: 46px; line-height: 1; text-shadow: 0 0 22px rgba(255, 239, 195, .45); animation: world-sigil-breathe 4.8s ease-in-out infinite; }
|
|
.world-gate__sigil i { position: absolute; inset: 4px; border: 1px solid rgba(255, 239, 195, .24); border-radius: 50%; }
|
|
.world-gate__copy { display: grid; justify-items: center; }
|
|
.world-gate__copy > span { color: #90a7c2; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
|
|
.hololake-home .world-gate__copy h1 { margin: 15px 0 0; color: #edf4ff; font-family: ui-serif, 'Songti SC', 'STSong', serif; font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; line-height: 1.15; letter-spacing: .02em; }
|
|
.world-gate__copy p { max-width: 520px; margin: 14px 0 0; color: #9cadc1; font-size: 14px; line-height: 1.8; }
|
|
.world-gate__enter { min-width: 236px; height: 48px; gap: 11px; margin-top: 30px; border: 1px solid rgba(178, 215, 255, .6); border-radius: 9px; background: linear-gradient(180deg, rgba(119, 174, 229, .86), rgba(67, 119, 177, .9)); color: #fff; box-shadow: 0 12px 34px rgba(13, 56, 101, .35), inset 0 1px rgba(255,255,255,.24); font-size: 15px; }
|
|
.world-gate__enter:hover { background: linear-gradient(180deg, rgba(137, 190, 239, .94), rgba(76, 132, 194, .96)); transform: translateY(-1px); }
|
|
.world-gate__progress { display: flex; align-items: center; gap: 10px; margin-top: 30px; color: #b8c8d9; font-size: 13px; }
|
|
.world-gate__progress i { width: 14px; height: 14px; border: 1.5px solid rgba(184, 200, 217, .28); border-top-color: #cbe7ff; border-radius: 50%; animation: spin .8s linear infinite; }
|
|
.world-gate__error { display: grid; max-width: 560px; gap: 6px; margin-top: 18px; padding: 12px 16px; border: 1px solid rgba(248, 113, 113, .28); border-radius: 8px; background: rgba(47, 14, 22, .58); color: #fca5a5; font-size: 12px; text-align: left; }
|
|
.world-gate__error code { overflow-wrap: anywhere; color: #c7b7bd; font-size: 10px; }
|
|
.world-gate__path { display: flex; align-items: center; gap: 8px; margin-top: 44px; color: #8294a9; font-size: 11px; }
|
|
.world-gate__path span { margin-right: 3px; color: #64778e; }.world-gate__path b { color: #a9b7c7; font-weight: 550; }.world-gate__path code { color: #a4bdd7; font-size: 10px; }
|
|
.node-page__heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
|
|
.node-page__heading .channel-stage__lead { margin-bottom: 0; }
|
|
.node-page__content { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 28px; align-items: start; }
|
|
.node-page__primary { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--border-strong); }
|
|
.node-page__primary > span { color: var(--text-muted); font-size: 11px; }.node-page__primary > strong { margin-top: 16px; font: 500 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }.node-page__primary > p { margin: 0 0 18px; color: var(--text-secondary); }
|
|
.node-page__primary dl { display: grid; gap: 0; margin: 0 0 18px; }.node-page__primary dl div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border-default); font-size: 12px; }.node-page__primary dt { color: var(--text-muted); }.node-page__primary dd { margin: 0; }
|
|
.node-page__content > .guanghu-router-console { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--border-strong); }
|
|
.hololake-home__hero { position: relative; max-width: 740px; padding: 24px 0 56px; overflow: hidden; }
|
|
.hololake-home__halo { position: absolute; right: -80px; top: -140px; width: 300px; aspect-ratio: 1; border: 1px solid var(--border-default); border-radius: 50%; opacity: .45; }
|
|
.hololake-home__eyebrow, .hololake-home__section-head span { color: var(--accent-blue); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
|
|
.hololake-home h1 { position: relative; margin: 18px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 7vw, 92px); font-weight: 500; line-height: .95; letter-spacing: -.06em; }
|
|
.hololake-home h1 em { color: #9cc7ff; font-style: italic; font-weight: 400; }
|
|
.hololake-home__lead { margin: 20px 0 0; font-size: 18px; letter-spacing: .16em; }
|
|
.hololake-home__copy { max-width: 560px; margin: 16px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.8; }
|
|
.hololake-home__actions { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
|
|
.hololake-home__primary { padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--accent-blue); color: var(--text-inverse); font-weight: 650; cursor: pointer; }
|
|
.hololake-home__primary span, .hololake-module button span { margin-left: 12px; }
|
|
.hololake-home__status { color: var(--text-secondary); font-size: 12px; }.hololake-home__status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent-green); }
|
|
.hololake-home__signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
|
.hololake-home__module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
.hololake-home__signal-grid article, .hololake-module { border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-card); }
|
|
.hololake-home__signal-grid article { padding: 18px; }.hololake-home__signal-grid span, .hololake-home__signal-grid small { display: block; color: var(--text-secondary); font-size: 11px; }.hololake-home__signal-grid strong { display: block; margin: 10px 0 6px; font-size: 15px; }
|
|
.hololake-home__modules { margin-top: 44px; }.hololake-home__section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }.hololake-home__section-head p { margin: 0; color: var(--text-secondary); font-size: 13px; }
|
|
.hololake-module { min-height: 185px; padding: 20px; display: flex; flex-direction: column; }.hololake-module__number { color: var(--accent-blue); font-family: monospace; font-size: 12px; }.hololake-module h2 { margin: auto 0 8px; font-size: 20px; font-weight: 600; }.hololake-module p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }.hololake-module button { margin-top: 19px; padding: 0; border: 0; color: var(--accent-blue); background: transparent; text-align: left; font: inherit; cursor: pointer; }.hololake-module__soon { margin-top: 19px; color: var(--text-muted); font-size: 12px; }
|
|
.channel-breadcrumb { display: flex; align-items: center; min-height: 34px; margin-bottom: 34px; color: var(--text-muted); }
|
|
.channel-breadcrumb button { padding-inline: 8px; color: var(--text-secondary); }
|
|
.channel-breadcrumb span { color: var(--border-strong); }
|
|
.channel-stage { width: min(1080px, 100%); margin: 0 auto; animation: channel-stage-in .24s ease-out; }
|
|
.channel-stage--root { position: relative; display: flex; min-height: min(680px, calc(100vh - 180px)); flex-direction: column; justify-content: center; isolation: isolate; }
|
|
.channel-stage__aurora { position: absolute; z-index: -1; top: 50%; left: 36%; width: min(720px, 72vw); height: min(720px, 72vw); border-radius: 50%; background: radial-gradient(circle at 36% 42%, color-mix(in srgb, var(--accent-blue) 26%, transparent), transparent 34%), radial-gradient(circle at 68% 58%, color-mix(in srgb, #a78bfa 18%, transparent), transparent 42%); filter: blur(14px); opacity: .72; transform: translate(-50%, -50%); animation: channel-aurora-breathe 8s ease-in-out infinite alternate; pointer-events: none; }
|
|
.channel-root-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); align-items: center; gap: clamp(34px, 6vw, 84px); }
|
|
.channel-root-hero { min-width: 0; }
|
|
.channel-root-actions { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.channel-root-map { overflow: hidden; border: 1px solid color-mix(in srgb, var(--border-strong) 72%, var(--accent-blue)); border-radius: 22px; background: linear-gradient(155deg, color-mix(in srgb, var(--surface-card) 92%, var(--accent-blue)), color-mix(in srgb, var(--surface-panel) 96%, transparent)); box-shadow: 0 32px 90px color-mix(in srgb, #000 22%, transparent), inset 0 1px color-mix(in srgb, #fff 9%, transparent); backdrop-filter: blur(24px); transition: border-color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .28s ease; }
|
|
.channel-root-map:hover { transform: translateY(-4px); box-shadow: 0 38px 105px color-mix(in srgb, #000 26%, transparent), inset 0 1px color-mix(in srgb, #fff 11%, transparent); }
|
|
.channel-root-map header { display: grid; gap: 7px; padding: 24px 24px 19px; border-bottom: 1px solid var(--border-default); }
|
|
.channel-root-map header span { color: var(--accent-blue); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
|
|
.channel-root-map header b { font-size: 24px; letter-spacing: -.02em; }
|
|
.channel-root-map header small { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
|
|
.channel-root-map__route { position: relative; display: grid; gap: 3px; padding: 14px; }
|
|
.channel-root-map__route::before { position: absolute; top: 38px; bottom: 38px; left: 36px; width: 1px; background: linear-gradient(var(--accent-blue), #a78bfa, #fb7185); opacity: .45; content: ''; }
|
|
.channel-root-map__route button { position: relative; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 16px 13px; border: 0; border-radius: 12px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
|
|
.channel-root-map__route button:hover { background: var(--state-hover); transform: translateX(5px); }
|
|
.channel-root-map__route button > i { z-index: 1; width: 9px; height: 9px; border: 2px solid var(--surface-card); border-radius: 50%; background: var(--map-dot); box-shadow: 0 0 13px var(--map-dot); }
|
|
.channel-root-map__route i[data-color="blue"] { --map-dot: #60a5fa; }.channel-root-map__route i[data-color="violet"] { --map-dot: #a78bfa; }.channel-root-map__route i[data-color="rose"] { --map-dot: #fb7185; }
|
|
.channel-root-map__route button span { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; }
|
|
.channel-root-map__route button span small { color: var(--text-muted); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.channel-root-map__route button b { color: var(--text-muted); font-size: 12px; font-weight: 500; }
|
|
.channel-root-map footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--border-default); color: var(--text-muted); font-size: 10px; }
|
|
.channel-root-map footer span { display: flex; align-items: center; gap: 7px; }.channel-root-map footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 9px var(--accent-green); }.channel-root-map footer code { color: var(--accent-blue); font-size: 9px; }
|
|
.channel-stage__eyebrow, .channel-card__eyebrow { color: var(--accent-blue); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
|
|
.channel-stage h1 { max-width: 820px; margin: 12px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(44px, 6vw, 78px); font-weight: 500; line-height: 1; letter-spacing: -.055em; }
|
|
.channel-stage__lead { max-width: 720px; margin: 24px 0 36px; color: var(--text-secondary); font-size: 17px; line-height: 1.8; }
|
|
.channel-stage--root .hololake-home__primary { margin-top: 8px; }
|
|
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
|
.channel-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.channel-card { display: flex; min-height: 240px; flex-direction: column; padding: 26px; border: 1px solid var(--border-default); border-radius: 16px; background: linear-gradient(145deg, var(--surface-card), color-mix(in srgb, var(--surface-card) 92%, var(--accent-blue))); box-shadow: 0 8px 28px color-mix(in srgb, #000 7%, transparent); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
|
|
.channel-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--border-default)); box-shadow: 0 18px 42px color-mix(in srgb, #000 14%, transparent); }
|
|
.channel-card h2 { margin: auto 0 10px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
|
|
.channel-card p { min-height: 46px; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.75; }
|
|
.channel-card button { align-self: flex-start; margin-top: 20px; padding: 0; color: var(--accent-blue); }
|
|
.channel-card__status { margin-top: 20px; color: var(--text-muted); font-size: 12px; }
|
|
.channel-stage__tools { display: flex; gap: 10px; margin-top: 18px; }
|
|
.server-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
|
.server-card { padding: 20px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); }
|
|
.server-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.server-card__head code { color: var(--accent-blue); font-size: 11px; }.server-card__head span { padding: 3px 7px; border-radius: 999px; background: var(--surface-panel); color: var(--text-muted); font-size: 10px; }.server-card__head span[data-tone="online"] { background: color-mix(in srgb, var(--accent-green) 18%, transparent); color: var(--accent-green); }
|
|
.server-card h2 { margin: 28px 0 6px; font-size: 18px; }.server-card > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 12px; }.server-card dl { display: grid; gap: 8px; margin: 0 0 20px; }.server-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }.server-card dt { color: var(--text-muted); }.server-card dd { margin: 0; color: var(--text-secondary); }.server-card button { width: 100%; font-size: 11px; }
|
|
.guanghu-router-console { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }.guanghu-router-console > p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.6; }.guanghu-router-console__status { display: flex; align-items: center; gap: 8px; font-size: 12px; }.guanghu-router-console__status > span { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: var(--text-muted); }.guanghu-router-console__status > span[data-state="online"] { background: var(--accent-green); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-green) 55%, transparent); }.guanghu-router-console__status > span[data-state="connecting"] { background: var(--accent-blue); }.guanghu-router-console__status > span[data-state="error"] { background: var(--accent-red); }.guanghu-router-console__error { display: grid; gap: 6px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent-red) 35%, var(--border-default)); border-radius: 8px; color: var(--accent-red); font-size: 11px; }.guanghu-router-console__error code { overflow-wrap: anywhere; color: var(--text-secondary); }.guanghu-router-console__receipt { padding: 10px; border-radius: 8px; background: var(--surface-panel); }.guanghu-router-console__receipt dd { max-width: 65%; overflow-wrap: anywhere; text-align: right; }.guanghu-router-console__broadcast { display: grid; gap: 10px; padding-top: 4px; }.guanghu-router-console__broadcast > header { display: flex; align-items: center; justify-content: space-between; }.guanghu-router-console__broadcast > header span { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--surface-panel); text-align: center; font-size: 10px; }.guanghu-router-console__broadcast > p { margin: 0; color: var(--text-muted); font-size: 11px; }.guanghu-router-console__broadcast article { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-panel); }.guanghu-router-console__broadcast article > div { display: flex; justify-content: space-between; gap: 8px; }.guanghu-router-console__broadcast article > p { margin: 0; color: var(--text-secondary); font-size: 11px; }
|
|
.guanghu-router-console__repositories { display: grid; gap: 10px; padding-top: 4px; }.guanghu-router-console__repositories > header { display: grid; gap: 3px; }.guanghu-router-console__repositories > header span { color: var(--text-muted); font-size: 10px; }.guanghu-router-console__repositories article { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-panel); }.guanghu-router-console__repositories article > code { overflow-wrap: anywhere; color: var(--text-muted); font-size: 9px; }.guanghu-router-console__repositories article > p { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 10px; }.guanghu-router-console__repositories article > div { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.persona-route-list { display: grid; gap: 12px; max-width: 820px; margin: 0; padding: 0; list-style: none; }
|
|
.persona-route-list li { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); }
|
|
.persona-route-list code { color: var(--accent-blue); font-size: 11px; }
|
|
.persona-route-list strong { font-size: 15px; }
|
|
.persona-route-list span { color: var(--text-muted); }
|
|
@keyframes channel-stage-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes channel-aurora-breathe { from { opacity: .56; transform: translate(-52%, -50%) scale(.96); } to { opacity: .82; transform: translate(-48%, -50%) scale(1.06); } }
|
|
@keyframes world-atmosphere-drift { from { transform: scale(1.02) translate3d(-.35%, 0, 0); } to { transform: scale(1.045) translate3d(.35%, -.25%, 0); } }
|
|
@keyframes world-sigil-breathe { 0%, 100% { opacity: .78; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.03); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.channel-stage,
|
|
.channel-stage__aurora,
|
|
.channel-card,
|
|
.channel-root-map,
|
|
.channel-root-map__route button,
|
|
.channel-rail nav button,
|
|
.world-overview,
|
|
.fifth-domain-entry,
|
|
.world-graph-edge,
|
|
.world-graph-node,
|
|
.world-graph-node__presence,
|
|
.world-graph-node__orbit,
|
|
.world-gate__atmosphere,
|
|
.world-gate__sigil span,
|
|
.world-gate__progress i { animation: none; transition: none; }
|
|
}
|
|
.guanghu-architecture { max-width: min(760px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow: auto; background: var(--surface-card); color: var(--text-primary); }
|
|
.guanghu-architecture__routes { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
|
|
.guanghu-architecture__routes li { display: grid; grid-template-columns: minmax(128px, auto) 1fr; gap: 16px; padding: 14px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-app); }
|
|
.guanghu-architecture__routes code { align-self: start; color: var(--accent-blue); font-size: 11px; }
|
|
.guanghu-architecture__routes strong { font-size: 14px; }.guanghu-architecture__routes p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
|
|
.guanghu-architecture__route { overflow-x: auto; margin: 2px 0 0; padding: 12px; border-radius: 6px; color: var(--text-secondary); background: var(--surface-app); font: 11px/1.6 monospace; white-space: nowrap; }
|
|
@media (max-width: 1000px) { .server-grid { grid-template-columns: 1fr; }.node-page__content { grid-template-columns: 1fr; } }
|
|
@media (max-width: 1100px) {
|
|
.world-map-shell { grid-template-columns: minmax(0, 1fr) 244px; }
|
|
.world-node-inspector { padding-inline: 16px; }
|
|
.world-node-inspector > header { grid-template-columns: 38px 1fr; gap: 10px; }
|
|
.world-node-inspector__symbol { width: 36px; height: 36px; }
|
|
}
|
|
@media (max-width: 1050px) { .channel-root-layout { grid-template-columns: 1fr; }.channel-root-map { width: min(580px, 100%); }.channel-stage--root { padding-block: 30px; } }
|
|
@media (max-width: 900px) { .channel-grid--three { grid-template-columns: 1fr; }.channel-card { min-height: 190px; }.channel-rail { width: 190px; flex-basis: 190px; } }
|
|
@media (max-width: 780px) {
|
|
.hololake-bar { height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-inline: 16px 12px; }
|
|
.hololake-bar__brand { font-size: 15px; }.hololake-bar__context { display: none; }.hololake-theme-nav { min-width: 0; width: 138px; }
|
|
.app { min-height: 0; }
|
|
.hololake-home__signal-grid, .hololake-home__module-grid, .channel-grid { grid-template-columns: 1fr; }
|
|
.hololake-home { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
|
|
.channel-workspace { padding: 20px 18px 32px; }.channel-rail { display: none; }.channel-breadcrumb { margin-bottom: 18px; overflow-x: auto; }.channel-stage h1 { font-size: clamp(38px, 12vw, 52px); }.channel-stage__lead { margin: 16px 0 24px; }.channel-stage--root { min-height: calc(100dvh - 190px); }.channel-root-map__route button { grid-template-columns: 16px 1fr; }.channel-root-map__route button > b { display: none; }.channel-card { min-height: 180px; padding: 20px; }.channel-grid--three { grid-template-columns: 1fr; }.server-grid { grid-template-columns: 1fr; }.world-gate { padding: 28px 20px; }.world-gate__path { flex-wrap: wrap; justify-content: center; }.node-page__heading { display: grid; }.world-session-bar { margin-bottom: 18px; }.world-overview__intro { margin-bottom: 28px; }.enterprise-domain-list { margin-left: 16px; }.fifth-domain-entry { width: calc(100% - 16px); margin-left: 16px; grid-template-columns: 34px 1fr; }.fifth-domain-entry > b { grid-column: 2; }.world-route-divider { margin-left: 16px; }
|
|
.channel-mobile-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-sidebar) 92%, transparent); backdrop-filter: blur(18px); }
|
|
.channel-mobile-nav button { display: grid; height: 48px; min-width: 0; place-items: center; gap: 0; padding: 2px; color: var(--text-muted); }.channel-mobile-nav button[data-active="true"] { color: var(--accent-blue); }.channel-mobile-nav span { font-size: 18px; line-height: 1; }.channel-mobile-nav small { font-size: 9px; }
|
|
.channel-dock { width: 48px; flex-basis: 48px; padding-inline: 4px; }.channel-dock button { width: 40px; }
|
|
}
|
|
@media (max-width: 780px) {
|
|
.hololake-home[data-route="world"] { padding-bottom: 0; }
|
|
.hololake-home[data-route="world"] .channel-mobile-nav { display: none; }
|
|
.world-map-shell { min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(430px, 1fr) auto 44px; overflow-y: auto; }
|
|
.world-map-canvas { min-height: 430px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(132, 158, 214, .16); }
|
|
.world-map-canvas__grid, .world-map-heading, .world-map-zoom { position: sticky; left: 0; }
|
|
.world-map-canvas__grid { position: absolute; }
|
|
.world-graph { min-width: 720px; min-height: 430px; }
|
|
.world-map-heading { right: 14px; left: 14px; }
|
|
.world-map-heading > div:first-child span, .world-map-legend { display: none; }
|
|
.world-node-inspector { max-height: 310px; padding: 18px; }
|
|
.world-node-inspector dl { grid-template-columns: 1fr; }
|
|
.world-node-inspector > footer { display: none; }
|
|
.world-map-status { position: sticky; bottom: 0; gap: 22px; overflow-x: auto; padding-inline: 16px; white-space: nowrap; }
|
|
.world-map-zoom { bottom: 14px; left: 12px; grid-template-columns: repeat(4, 32px); }
|
|
.world-map-zoom button, .world-map-zoom span { width: 32px; height: 32px; border-right: 1px solid rgba(134, 159, 211, .16); border-bottom: 0; }
|
|
}
|
|
@media (max-width: 700px) { body.mac-chrome .hololake-bar { padding-left: 84px; }.hololake-bar__line { display: none; } }
|
|
|
|
.app {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app__sidebar {
|
|
flex: 0 0 auto;
|
|
min-width: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--surface-sidebar);
|
|
}
|
|
|
|
.app__sidebar > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.app:has(.app__note-list) .app__sidebar > * {
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.app__note-list {
|
|
flex: 0 0 auto;
|
|
min-width: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
z-index: 20;
|
|
background: var(--surface-sidebar);
|
|
}
|
|
|
|
.app__note-list > * {
|
|
flex: 1;
|
|
border-left: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.app__editor {
|
|
flex: 1;
|
|
min-width: 480px;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
container-type: inline-size;
|
|
container-name: editor;
|
|
background: var(--surface-editor);
|
|
}
|
|
|
|
.app__editor > * {
|
|
flex: 1;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes tab-status-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
.tab-status-pulse {
|
|
animation: tab-status-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
/* AI highlight animation — applied by useAiActivity when MCP calls ui_highlight */
|
|
@keyframes ai-highlight-glow {
|
|
0% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-blue) 80%, transparent); }
|
|
50% { box-shadow: inset 0 0 8px 2px color-mix(in srgb, var(--accent-blue) 40%, transparent); }
|
|
100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-blue) 0%, transparent); }
|
|
}
|
|
|
|
.ai-highlight {
|
|
animation: ai-highlight-glow 0.8s ease-out;
|
|
}
|
|
|
|
/* Guanghu world design system v2
|
|
The shell, topology canvas, inspector and theme picker share the active
|
|
Guanghu semantic palette instead of forcing a separate midnight skin. */
|
|
.hololake-home {
|
|
--world-bg: var(--surface-app);
|
|
--world-sidebar: var(--surface-sidebar);
|
|
--world-panel: var(--surface-panel);
|
|
--world-surface: var(--surface-card);
|
|
--world-surface-strong: color-mix(in srgb, var(--surface-card) 86%, var(--accent-blue));
|
|
--world-text: var(--text-primary);
|
|
--world-muted: var(--text-secondary);
|
|
--world-faint: var(--text-muted);
|
|
--world-border: color-mix(in srgb, var(--border-default) 76%, var(--accent-blue));
|
|
--world-border-strong: color-mix(in srgb, var(--border-strong) 58%, var(--accent-blue));
|
|
--world-accent: var(--accent-blue);
|
|
--world-accent-2: color-mix(in srgb, var(--accent-blue) 56%, #9d7cff);
|
|
--world-live: var(--accent-green);
|
|
--world-warm: #d89b43;
|
|
--world-danger: #e86f86;
|
|
--world-grid: color-mix(in srgb, var(--accent-blue) 12%, transparent);
|
|
color: var(--world-text);
|
|
background: var(--world-bg);
|
|
}
|
|
|
|
.app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar {
|
|
border-bottom-color: var(--world-border);
|
|
color: var(--world-text);
|
|
background: var(--world-panel);
|
|
}
|
|
.app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar__context {
|
|
color: var(--world-muted);
|
|
}
|
|
.app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) [data-testid="status-bar"] {
|
|
border-top-color: var(--world-border) !important;
|
|
color: var(--world-muted) !important;
|
|
background: var(--world-panel) !important;
|
|
}
|
|
|
|
/* Compact theme gallery: six coherent worlds, no scrolling white sheet. */
|
|
.hololake-theme-nav {
|
|
min-width: 158px;
|
|
grid-template-columns: 8px minmax(0, 1fr) 14px;
|
|
gap: 9px;
|
|
padding: 6px 9px;
|
|
border-color: var(--border-default);
|
|
border-radius: 9px;
|
|
background: color-mix(in srgb, var(--surface-card) 82%, transparent);
|
|
}
|
|
.hololake-theme-nav small { font-size: 10px; letter-spacing: .04em; }
|
|
.hololake-theme-nav strong { font-size: 13px; }
|
|
.hololake-theme-menu {
|
|
width: 354px;
|
|
max-height: none;
|
|
padding: 12px;
|
|
border-color: var(--world-border-strong);
|
|
border-radius: 13px;
|
|
color: var(--text-primary);
|
|
background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
|
|
box-shadow: 0 20px 58px color-mix(in srgb, #000 26%, transparent);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.hololake-theme-menu > header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 3px 4px 12px;
|
|
border-bottom: 0;
|
|
}
|
|
.hololake-theme-menu > header strong { font-size: 16px; }
|
|
.hololake-theme-menu > header small { font-size: 11px; }
|
|
.hololake-theme-menu [role="group"] {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
padding-top: 0;
|
|
}
|
|
.hololake-theme-menu__item {
|
|
display: grid;
|
|
min-height: 88px;
|
|
grid-template-columns: 1fr;
|
|
align-content: end;
|
|
gap: 9px;
|
|
overflow: hidden;
|
|
padding: 7px;
|
|
border-color: var(--border-default);
|
|
border-radius: 9px;
|
|
background: color-mix(in srgb, var(--surface-card) 86%, transparent);
|
|
}
|
|
.hololake-theme-menu__item > .hololake-theme-menu__preview {
|
|
display: block;
|
|
width: 100%;
|
|
height: 42px;
|
|
border: 1px solid color-mix(in srgb, #fff 13%, transparent);
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(var(--preview-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--preview-grid) 1px, transparent 1px),
|
|
radial-gradient(circle at 72% 28%, var(--preview-glow), transparent 42%),
|
|
var(--preview-bg);
|
|
background-size: 16px 16px, 16px 16px, auto, auto;
|
|
box-shadow: none;
|
|
}
|
|
.hololake-theme-menu__item > span:not([data-slot]) { display: block; }
|
|
.hololake-theme-menu__item strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
font-weight: 620;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.hololake-theme-menu__item:focus,
|
|
.hololake-theme-menu__item[data-state="checked"] {
|
|
border-color: var(--accent-blue);
|
|
background: var(--state-selected);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 35%, transparent);
|
|
}
|
|
.hololake-theme-menu__item [data-slot="dropdown-menu-item-indicator"] {
|
|
top: 10px;
|
|
right: 10px;
|
|
left: auto;
|
|
display: grid;
|
|
width: 18px;
|
|
height: 18px;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
color: white;
|
|
background: var(--accent-blue);
|
|
}
|
|
.hololake-theme-menu__preview[data-tone="sky"] { --preview-bg: #edf7fc; --preview-grid: rgba(44,111,166,.13); --preview-glow: rgba(71,164,218,.28); }
|
|
.hololake-theme-menu__preview[data-tone="cyan"] { --preview-bg: #17232b; --preview-grid: rgba(114,183,214,.12); --preview-glow: rgba(72,197,208,.28); }
|
|
.hololake-theme-menu__preview[data-tone="aurora"] { --preview-bg: #07181f; --preview-grid: rgba(78,226,208,.12); --preview-glow: rgba(34,211,238,.34); }
|
|
.hololake-theme-menu__preview[data-tone="indigo"] { --preview-bg: #0d1024; --preview-grid: rgba(145,164,255,.13); --preview-glow: rgba(145,116,255,.34); }
|
|
.hololake-theme-menu__preview[data-tone="gold"] { --preview-bg: #fff8e9; --preview-grid: rgba(166,106,22,.13); --preview-glow: rgba(237,180,72,.3); }
|
|
.hololake-theme-menu__preview[data-tone="green"] { --preview-bg: #f2f7ef; --preview-grid: rgba(79,123,72,.13); --preview-glow: rgba(91,159,82,.28); }
|
|
|
|
/* World entrance: a theme-aware operating-system gate, not a fixed poster. */
|
|
.hololake-home[data-world-open="false"] .channel-rail {
|
|
border-right-color: var(--world-border);
|
|
color: var(--world-text);
|
|
background: var(--world-sidebar);
|
|
}
|
|
.hololake-home[data-world-open="false"] .channel-rail__heading { border-bottom-color: var(--world-border); }
|
|
.hololake-home[data-world-open="false"] .channel-rail__heading small { color: var(--world-faint); }
|
|
.hololake-home[data-world-open="false"] .channel-rail__modules {
|
|
border-color: var(--world-border);
|
|
color: var(--world-text);
|
|
background: var(--world-surface);
|
|
}
|
|
.world-gate { color: var(--world-text); background: var(--world-bg); }
|
|
.world-gate__atmosphere {
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 54% 47%, color-mix(in srgb, var(--world-accent) 20%, transparent), transparent 28%),
|
|
radial-gradient(circle at 72% 61%, color-mix(in srgb, var(--world-accent-2) 10%, transparent), transparent 34%),
|
|
linear-gradient(var(--world-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--world-grid) 1px, transparent 1px),
|
|
var(--world-bg);
|
|
background-size: auto, auto, 52px 52px, 52px 52px, auto;
|
|
transform: none;
|
|
animation: none;
|
|
}
|
|
.world-gate::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: min(740px, 72vw);
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--world-border-strong), transparent);
|
|
box-shadow:
|
|
-180px -100px 0 -0.25px var(--world-border),
|
|
190px 104px 0 -0.25px var(--world-border);
|
|
content: '';
|
|
transform: rotate(-13deg);
|
|
}
|
|
.world-gate::after { background: radial-gradient(circle at center, transparent 0 34%, color-mix(in srgb, var(--world-bg) 84%, transparent) 70%); }
|
|
.world-gate__sigil { width: 74px; height: 74px; margin-bottom: 18px; }
|
|
.world-gate__sigil span {
|
|
color: var(--world-accent);
|
|
font-size: 34px;
|
|
text-shadow: 0 0 24px color-mix(in srgb, var(--world-accent) 45%, transparent);
|
|
}
|
|
.world-gate__sigil i { border-color: color-mix(in srgb, var(--world-accent) 34%, transparent); }
|
|
.world-gate__copy > span { display: none; }
|
|
.hololake-home .world-gate__copy h1 {
|
|
margin: 0;
|
|
color: var(--world-text);
|
|
font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
|
|
font-size: clamp(34px, 3.2vw, 48px);
|
|
font-weight: 680;
|
|
letter-spacing: -.035em;
|
|
}
|
|
.world-gate__copy p { max-width: 560px; color: var(--world-muted); font-size: 16px; line-height: 1.7; }
|
|
.world-gate__enter {
|
|
min-width: 214px;
|
|
height: 48px;
|
|
border-color: color-mix(in srgb, var(--world-accent) 60%, var(--world-border));
|
|
border-radius: 9px;
|
|
color: var(--text-inverse);
|
|
background: var(--world-accent);
|
|
box-shadow: 0 12px 34px color-mix(in srgb, var(--world-accent) 22%, transparent);
|
|
font-size: 15px;
|
|
}
|
|
.world-gate__enter:hover { background: var(--accent-blue-hover); }
|
|
.world-gate__path { margin-top: 30px; color: var(--world-faint); font-size: 13px; }
|
|
.world-gate__path span { color: var(--world-faint); }
|
|
.world-gate__path b { color: var(--world-muted); }
|
|
|
|
/* Closed world: keep the local HoloLake navigation available while the
|
|
receipt-gated Fifth Domain remains closed. */
|
|
.hololake-home[data-world-open="false"] .channel-workspace {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
background: var(--world-bg);
|
|
}
|
|
.world-gate {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
min-height: 560px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
color: var(--world-text);
|
|
text-align: left;
|
|
background:
|
|
radial-gradient(circle at 50% 49%, color-mix(in srgb, var(--world-accent) 12%, transparent), transparent 31%),
|
|
var(--world-bg);
|
|
isolation: isolate;
|
|
}
|
|
.world-gate::before,
|
|
.world-gate::after { pointer-events: none; }
|
|
.world-gate::before {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
width: auto;
|
|
height: auto;
|
|
background:
|
|
radial-gradient(circle at 50% 49%, transparent 0 14%, color-mix(in srgb, var(--world-bg) 8%, transparent) 32%, color-mix(in srgb, var(--world-bg) 62%, transparent) 78%),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--world-bg) 14%, transparent), color-mix(in srgb, var(--world-bg) 36%, transparent));
|
|
box-shadow: none;
|
|
content: '';
|
|
transform: none;
|
|
}
|
|
.world-gate::after {
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset: 0;
|
|
background:
|
|
repeating-radial-gradient(circle at 50% 49%, transparent 0 108px, color-mix(in srgb, var(--world-accent) 8%, transparent) 109px, transparent 110px 164px);
|
|
content: '';
|
|
opacity: .58;
|
|
}
|
|
.world-gate__space {
|
|
position: absolute;
|
|
z-index: 0;
|
|
inset: -4%;
|
|
width: 108%;
|
|
height: 108%;
|
|
object-fit: cover;
|
|
opacity: .56;
|
|
filter: saturate(.76) hue-rotate(var(--world-hue-rotate, 0deg));
|
|
animation: world-gate-space-drift 34s ease-in-out infinite alternate;
|
|
}
|
|
.world-gate__stars {
|
|
position: absolute;
|
|
z-index: 3;
|
|
inset: 0;
|
|
background-image:
|
|
radial-gradient(circle, color-mix(in srgb, var(--world-accent) 68%, white) 0 1px, transparent 1.7px),
|
|
radial-gradient(circle, color-mix(in srgb, var(--world-accent-2) 56%, white) 0 1px, transparent 1.5px);
|
|
background-position: 0 0, 37px 53px;
|
|
background-size: 137px 121px, 181px 163px;
|
|
opacity: .22;
|
|
mask-image: radial-gradient(circle at 50% 49%, black, transparent 86%);
|
|
animation: world-gate-stars 8s ease-in-out infinite alternate;
|
|
}
|
|
.world-gate__routes {
|
|
position: absolute;
|
|
z-index: 5;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
.world-gate__routes path {
|
|
fill: none;
|
|
stroke: color-mix(in srgb, var(--world-accent) 32%, transparent);
|
|
stroke-width: 1.35;
|
|
stroke-dasharray: 3 11;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
.world-gate__routes .world-gate__route-pulse {
|
|
stroke: color-mix(in srgb, var(--world-accent-2) 76%, white);
|
|
stroke-width: 1.8;
|
|
stroke-dasharray: 1 150;
|
|
stroke-linecap: round;
|
|
filter: drop-shadow(0 0 7px var(--world-accent-2));
|
|
animation: world-gate-route-pulse 5.5s linear infinite;
|
|
}
|
|
.world-gate__constellation {
|
|
position: absolute;
|
|
z-index: 6;
|
|
display: grid;
|
|
justify-items: center;
|
|
color: var(--world-muted);
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.world-gate__constellation img {
|
|
width: clamp(100px, 10vw, 154px);
|
|
height: auto;
|
|
opacity: .23;
|
|
filter: grayscale(.18) saturate(.62) hue-rotate(var(--world-hue-rotate, 0deg));
|
|
animation: world-gate-dormant-breathe 7s ease-in-out infinite;
|
|
}
|
|
.world-gate__constellation span {
|
|
margin-top: -14px;
|
|
color: color-mix(in srgb, var(--world-text) 64%, transparent);
|
|
font-size: 14px;
|
|
font-weight: 620;
|
|
letter-spacing: .04em;
|
|
}
|
|
.world-gate__constellation small {
|
|
margin-top: 5px;
|
|
color: var(--world-faint);
|
|
font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
letter-spacing: .1em;
|
|
}
|
|
.world-gate__constellation--lighthouse { top: 29%; left: 15%; }
|
|
.world-gate__constellation--zero { top: 72%; left: 19%; }
|
|
.world-gate__constellation--zero img { width: clamp(88px, 8vw, 126px); animation-delay: -2.4s; }
|
|
.world-gate__constellation--fifth { top: 45%; left: 85%; }
|
|
.world-gate__constellation--fifth img {
|
|
width: clamp(190px, 20vw, 310px);
|
|
opacity: .27;
|
|
animation-delay: -4.1s;
|
|
}
|
|
.world-gate__constellation--fifth span { margin-top: -34px; }
|
|
.world-gate__core {
|
|
position: absolute;
|
|
z-index: 8;
|
|
top: 49%;
|
|
left: 50%;
|
|
display: grid;
|
|
width: min(440px, 56vw);
|
|
min-height: 390px;
|
|
place-items: center;
|
|
align-content: center;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.world-gate__core > img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: min(390px, 48vw);
|
|
height: auto;
|
|
opacity: .58;
|
|
filter: saturate(.9) hue-rotate(var(--world-hue-rotate, 0deg)) drop-shadow(0 0 28px color-mix(in srgb, var(--world-accent) 30%, transparent));
|
|
animation: world-gate-core-breathe 6s ease-in-out infinite;
|
|
}
|
|
.world-gate__copy {
|
|
z-index: 1;
|
|
display: grid;
|
|
justify-items: center;
|
|
text-align: center;
|
|
}
|
|
.world-gate__copy > span {
|
|
display: block;
|
|
color: color-mix(in srgb, var(--world-accent) 72%, white);
|
|
font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
letter-spacing: .18em;
|
|
text-shadow: 0 0 14px color-mix(in srgb, var(--world-accent) 28%, transparent);
|
|
}
|
|
.hololake-home .world-gate__copy h1 {
|
|
margin: 13px 0 0;
|
|
color: var(--world-text);
|
|
font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
|
|
font-size: clamp(34px, 3.5vw, 52px);
|
|
font-weight: 650;
|
|
line-height: 1.08;
|
|
letter-spacing: .1em;
|
|
text-indent: .1em;
|
|
text-shadow: 0 2px 28px color-mix(in srgb, var(--world-bg) 80%, transparent);
|
|
}
|
|
.world-gate__copy p {
|
|
margin: 13px 0 0;
|
|
color: var(--world-muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
letter-spacing: .08em;
|
|
}
|
|
.world-gate__enter {
|
|
z-index: 1;
|
|
min-width: 196px;
|
|
height: 42px;
|
|
gap: 10px;
|
|
margin-top: 31px;
|
|
border: 1px solid color-mix(in srgb, var(--world-accent) 52%, transparent);
|
|
border-radius: 999px;
|
|
color: var(--world-text);
|
|
background: color-mix(in srgb, var(--world-surface) 70%, transparent);
|
|
box-shadow:
|
|
0 0 28px color-mix(in srgb, var(--world-accent) 12%, transparent),
|
|
inset 0 1px color-mix(in srgb, white 12%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
font-size: 13px;
|
|
letter-spacing: .04em;
|
|
}
|
|
.world-gate__enter:hover {
|
|
border-color: color-mix(in srgb, var(--world-accent) 78%, white);
|
|
color: white;
|
|
background: color-mix(in srgb, var(--world-accent) 30%, var(--world-surface));
|
|
box-shadow: 0 0 34px color-mix(in srgb, var(--world-accent) 24%, transparent);
|
|
transform: translateY(-1px);
|
|
}
|
|
.world-gate__progress {
|
|
z-index: 1;
|
|
margin-top: 31px;
|
|
color: var(--world-muted);
|
|
font-size: 12px;
|
|
}
|
|
.world-gate__progress i {
|
|
border-color: color-mix(in srgb, var(--world-accent) 20%, transparent);
|
|
border-top-color: var(--world-accent);
|
|
}
|
|
.world-gate__error {
|
|
position: absolute;
|
|
z-index: 10;
|
|
bottom: 82px;
|
|
left: 24px;
|
|
max-width: min(360px, calc(100vw - 48px));
|
|
margin: 0;
|
|
border-color: color-mix(in srgb, #fb7185 30%, var(--world-border));
|
|
border-radius: 12px;
|
|
color: #fda4af;
|
|
background: color-mix(in srgb, var(--world-surface) 84%, transparent);
|
|
box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
.world-gate__path {
|
|
position: absolute;
|
|
z-index: 9;
|
|
right: 50%;
|
|
bottom: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
width: max-content;
|
|
margin: 0;
|
|
color: var(--world-faint);
|
|
font-size: 10px;
|
|
letter-spacing: .05em;
|
|
transform: translateX(50%);
|
|
}
|
|
.world-gate__path span { display: inline-flex; align-items: center; gap: 7px; color: var(--world-muted); }
|
|
.world-gate__path span i {
|
|
width: 6px;
|
|
height: 6px;
|
|
border: 1px solid var(--world-faint);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--world-accent) 26%, transparent);
|
|
}
|
|
.world-gate__path span:nth-child(2) i {
|
|
border-color: var(--world-accent);
|
|
background: color-mix(in srgb, var(--world-accent) 70%, transparent);
|
|
}
|
|
.world-gate__path b { color: var(--world-faint); font-weight: 500; }
|
|
|
|
@keyframes world-gate-space-drift {
|
|
from { transform: scale(1.01) translate3d(-.5%, -.3%, 0); }
|
|
to { transform: scale(1.045) translate3d(.6%, .35%, 0); }
|
|
}
|
|
@keyframes world-gate-stars {
|
|
from { opacity: .14; transform: translateY(0); }
|
|
to { opacity: .29; transform: translateY(-3px); }
|
|
}
|
|
@keyframes world-gate-dormant-breathe {
|
|
0%, 100% { opacity: .19; transform: scale(.985); }
|
|
50% { opacity: .3; transform: scale(1.02); }
|
|
}
|
|
@keyframes world-gate-core-breathe {
|
|
0%, 100% { opacity: .5; transform: scale(.98); }
|
|
50% { opacity: .68; transform: scale(1.025); }
|
|
}
|
|
@keyframes world-gate-route-pulse {
|
|
to { stroke-dashoffset: -302; }
|
|
}
|
|
|
|
/* Theme-responsive topology. */
|
|
.hololake-home[data-route="world"][data-world-open="true"] .channel-workspace {
|
|
background: var(--world-bg);
|
|
}
|
|
.hololake-home[data-route="world"] .channel-rail {
|
|
border-right-color: var(--world-border);
|
|
color: var(--world-text);
|
|
background: var(--world-sidebar);
|
|
}
|
|
.hololake-home[data-route="world"] .channel-rail__heading { border-bottom-color: var(--world-border); }
|
|
.hololake-home[data-route="world"] .channel-rail__heading small { color: var(--world-faint); }
|
|
.hololake-home[data-route="world"] .channel-rail nav button { color: var(--world-muted); }
|
|
.hololake-home[data-route="world"] .channel-rail nav button:hover {
|
|
color: var(--world-text);
|
|
background: var(--state-hover);
|
|
}
|
|
.hololake-home[data-route="world"] .channel-rail nav button[data-active="true"] {
|
|
color: var(--world-text);
|
|
background: var(--state-selected);
|
|
}
|
|
.hololake-home[data-route="world"] .channel-rail__modules {
|
|
border-color: var(--world-border);
|
|
color: var(--world-muted);
|
|
background: var(--world-surface);
|
|
}
|
|
.world-map-shell {
|
|
--world-map-line: var(--world-border-strong);
|
|
--world-map-surface: var(--world-surface);
|
|
grid-template-columns: minmax(0, 1fr) 318px;
|
|
grid-template-rows: minmax(0, 1fr) 48px;
|
|
color: var(--world-text);
|
|
background: var(--world-bg);
|
|
}
|
|
.world-map-canvas {
|
|
border-right-color: var(--world-border);
|
|
scrollbar-color: var(--world-border-strong) var(--world-bg);
|
|
}
|
|
.world-map-canvas::-webkit-scrollbar-track { background: var(--world-bg); }
|
|
.world-map-canvas::-webkit-scrollbar-thumb { background: var(--world-border-strong); }
|
|
.world-map-canvas::before {
|
|
background:
|
|
radial-gradient(circle at 43% 55%, color-mix(in srgb, var(--world-accent) 12%, transparent), transparent 34%),
|
|
radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--world-accent-2) 7%, transparent), transparent 32%),
|
|
var(--world-bg);
|
|
}
|
|
.world-map-canvas__grid {
|
|
opacity: .72;
|
|
background-image:
|
|
linear-gradient(var(--world-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--world-grid) 1px, transparent 1px);
|
|
}
|
|
.world-map-heading { top: 24px; right: 30px; left: 30px; }
|
|
.hololake-home .world-map-heading h1 { color: var(--world-text); font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
|
|
.world-map-heading span { color: var(--world-muted); font-size: 13px; }
|
|
.world-map-heading__presence i { background: var(--world-live); box-shadow: 0 0 10px var(--world-live); }
|
|
.world-graph-node__surface { fill: var(--world-map-surface); stroke: var(--world-border-strong); }
|
|
.world-graph-node:not(.world-graph-node--root):hover .world-graph-node__surface,
|
|
.world-graph-node[data-selected="true"] .world-graph-node__surface {
|
|
fill: var(--world-surface-strong);
|
|
stroke: var(--world-accent);
|
|
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--world-accent) 28%, transparent));
|
|
}
|
|
.world-graph-node[data-kind="library"] .world-graph-node__surface {
|
|
fill: color-mix(in srgb, var(--world-surface) 88%, var(--world-warm));
|
|
stroke: color-mix(in srgb, var(--world-warm) 60%, var(--world-border));
|
|
}
|
|
.world-graph-node[data-status="restricted"] .world-graph-node__surface { stroke: var(--world-danger); }
|
|
.world-graph-node__presence { fill: var(--world-faint); stroke: var(--world-surface); }
|
|
.world-graph-node[data-status="online"] .world-graph-node__presence {
|
|
fill: var(--world-live);
|
|
filter: drop-shadow(0 0 5px var(--world-live));
|
|
}
|
|
.world-graph-node[data-status="restricted"] .world-graph-node__presence { fill: var(--world-danger); }
|
|
.world-graph-node__symbol { fill: var(--world-faint); font-size: 10px; }
|
|
.world-graph-node__label { fill: var(--world-text); font-size: 15px; font-weight: 650; }
|
|
.world-graph-node__status { fill: var(--world-faint); font-size: 11px; }
|
|
.world-graph-node[data-status="online"] .world-graph-node__status { fill: var(--world-live); }
|
|
.world-graph-node__orbit { stroke: var(--world-border-strong); }
|
|
.world-graph-node__orbit--inner { stroke: var(--world-border); }
|
|
.world-graph-node--root .world-graph-node__surface {
|
|
fill: var(--world-surface-strong);
|
|
stroke: var(--world-accent);
|
|
filter: drop-shadow(0 0 20px color-mix(in srgb, var(--world-accent) 22%, transparent));
|
|
}
|
|
.world-graph-node__root-label { fill: var(--world-text); font-size: 20px; }
|
|
.world-map-zoom,
|
|
.world-map-legend {
|
|
border-color: var(--world-border);
|
|
color: var(--world-text);
|
|
background: color-mix(in srgb, var(--world-panel) 88%, transparent);
|
|
}
|
|
.world-map-zoom button,
|
|
.world-map-zoom span {
|
|
border-bottom-color: var(--world-border);
|
|
color: var(--world-muted);
|
|
}
|
|
.world-map-zoom button:hover:not(:disabled) { color: var(--world-text); background: var(--state-hover); }
|
|
.world-map-legend { gap: 10px; padding: 15px 16px; }
|
|
.world-map-legend strong { color: var(--world-text); font-size: 12px; }
|
|
.world-map-legend span { color: var(--world-muted); font-size: 11px; }
|
|
.world-node-inspector {
|
|
gap: 22px;
|
|
padding: 28px 24px 20px;
|
|
color: var(--world-text);
|
|
background: var(--world-panel);
|
|
}
|
|
.world-node-inspector > header { border-bottom-color: var(--world-border); }
|
|
.world-node-inspector__symbol {
|
|
border-color: var(--world-border-strong);
|
|
color: var(--world-accent);
|
|
background: color-mix(in srgb, var(--world-accent) 10%, transparent);
|
|
}
|
|
.world-node-inspector h2 { font-size: 22px; }
|
|
.world-node-inspector header p { color: var(--world-muted); font-size: 13px; line-height: 1.65; }
|
|
.world-node-inspector__state { color: var(--world-muted); font-size: 13px; }
|
|
.world-node-inspector__state[data-status="online"] { color: var(--world-live); }
|
|
.world-node-inspector__state[data-status="online"] i { background: var(--world-live); box-shadow: 0 0 8px var(--world-live); }
|
|
.world-node-inspector dl div {
|
|
grid-template-columns: 84px minmax(0, 1fr);
|
|
padding: 12px 0;
|
|
border-bottom-color: var(--world-border);
|
|
font-size: 12px;
|
|
}
|
|
.world-node-inspector dt { color: var(--world-faint); }
|
|
.world-node-inspector dd { color: var(--world-muted); }
|
|
.world-node-inspector__actions button { min-height: 44px; border-color: var(--world-border-strong); font-size: 13px; }
|
|
.world-node-inspector__actions button:first-child:not(:disabled) {
|
|
background: var(--world-accent);
|
|
box-shadow: 0 8px 22px color-mix(in srgb, var(--world-accent) 22%, transparent);
|
|
}
|
|
.world-node-inspector > footer { border-top-color: var(--world-border); color: var(--world-faint); font-size: 11px; }
|
|
.world-map-status {
|
|
border-top-color: var(--world-border);
|
|
color: var(--world-muted);
|
|
background: var(--world-panel);
|
|
font-size: 11px;
|
|
}
|
|
.world-map-status b { color: var(--world-text); }
|
|
|
|
/* Fifth Domain is rendered as real connected systems, not placeholder cards. */
|
|
.channel-workspace:has(.fifth-systems) {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
background: var(--world-bg);
|
|
}
|
|
.channel-workspace:has(.fifth-systems) .world-session-bar,
|
|
.channel-workspace:has(.fifth-systems) .channel-breadcrumb { display: none; }
|
|
.fifth-systems {
|
|
display: grid;
|
|
height: 100%;
|
|
min-height: 620px;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
color: var(--world-text);
|
|
background: var(--world-bg);
|
|
}
|
|
.fifth-systems__heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
padding: 24px 30px 20px;
|
|
border-bottom: 1px solid var(--world-border);
|
|
}
|
|
.fifth-systems__heading h1 {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
letter-spacing: -.035em;
|
|
}
|
|
.fifth-systems__heading p { max-width: 740px; margin: 7px 0 0; color: var(--world-muted); font-size: 15px; line-height: 1.65; }
|
|
.fifth-systems__presence,
|
|
.system-path small,
|
|
.system-node small,
|
|
.fifth-system-inspector header span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--world-live);
|
|
font-size: 13px;
|
|
}
|
|
.fifth-systems__presence i,
|
|
.system-path small i,
|
|
.system-node small i,
|
|
.fifth-system-inspector header span i {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--world-live);
|
|
box-shadow: 0 0 9px var(--world-live);
|
|
}
|
|
.fifth-systems__layout { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 318px; }
|
|
.fifth-systems__canvas { position: relative; min-width: 0; overflow: auto; border-right: 1px solid var(--world-border); isolation: isolate; }
|
|
.fifth-systems__grid {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--world-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--world-grid) 1px, transparent 1px);
|
|
background-size: 52px 52px;
|
|
mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 92%);
|
|
}
|
|
.fifth-system-columns {
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
|
|
gap: 22px;
|
|
padding: 58px 26px 36px;
|
|
}
|
|
.system-path {
|
|
align-self: start;
|
|
padding: 22px;
|
|
border: 1px solid var(--world-border);
|
|
border-radius: 14px;
|
|
background: color-mix(in srgb, var(--world-surface) 78%, transparent);
|
|
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
|
|
}
|
|
.system-path[data-selected="true"] {
|
|
border-color: color-mix(in srgb, var(--world-live) 70%, var(--world-border));
|
|
background: color-mix(in srgb, var(--world-surface) 88%, var(--world-live));
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--world-live) 12%, transparent), 0 18px 50px color-mix(in srgb, #000 10%, transparent);
|
|
}
|
|
.system-path > header button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
color: var(--world-text);
|
|
background: transparent;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.system-path__mark {
|
|
display: grid;
|
|
width: 46px;
|
|
height: 46px;
|
|
flex: 0 0 46px;
|
|
place-items: center;
|
|
border: 1px solid var(--world-border-strong);
|
|
border-radius: 50%;
|
|
color: var(--world-accent);
|
|
background: color-mix(in srgb, var(--world-accent) 10%, transparent);
|
|
font-size: 16px;
|
|
}
|
|
.system-path header button > span:last-child { display: grid; gap: 5px; }
|
|
.system-path header strong { font-size: 18px; }
|
|
.system-path__route {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 0;
|
|
margin-top: 28px;
|
|
}
|
|
.system-path--pufferfish .system-path__route {
|
|
grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
|
|
}
|
|
.system-path__route--single { grid-template-columns: 1fr; }
|
|
.system-path__route > b {
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--world-accent), var(--world-live));
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--world-live) 38%, transparent);
|
|
}
|
|
.system-node,
|
|
.system-path__persona {
|
|
display: grid;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
padding: 16px;
|
|
border: 1px solid var(--world-border);
|
|
border-radius: 10px;
|
|
background: var(--world-panel);
|
|
}
|
|
.system-node > span,
|
|
.system-path__persona > span { color: var(--world-faint); font-size: 12px; }
|
|
.system-node strong,
|
|
.system-path__persona strong { font-size: 14px; }
|
|
.system-node code {
|
|
overflow: hidden;
|
|
color: var(--world-muted);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.system-path__persona { width: 48%; margin: 22px auto 0; border-style: dashed; }
|
|
.system-path__persona::before {
|
|
width: 1px;
|
|
height: 22px;
|
|
margin: -39px auto 8px;
|
|
background: var(--world-live);
|
|
content: '';
|
|
}
|
|
.fifth-system-inspector {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
padding: 28px 24px 20px;
|
|
background: var(--world-panel);
|
|
}
|
|
.fifth-system-inspector header { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--world-border); }
|
|
.fifth-system-inspector h2 { margin: 0; font-size: 22px; }
|
|
.fifth-system-inspector dl { display: grid; margin: 0; }
|
|
.fifth-system-inspector dl div {
|
|
display: grid;
|
|
grid-template-columns: 88px minmax(0, 1fr);
|
|
gap: 12px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--world-border);
|
|
font-size: 12px;
|
|
}
|
|
.fifth-system-inspector dt { color: var(--world-faint); }
|
|
.fifth-system-inspector dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--world-muted);
|
|
text-align: right;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.fifth-system-inspector > button {
|
|
min-height: 44px;
|
|
margin-top: 4px;
|
|
border-color: var(--world-accent);
|
|
color: var(--text-inverse);
|
|
background: var(--world-accent);
|
|
}
|
|
.fifth-system-inspector__expanded {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 44px;
|
|
padding: 0 13px;
|
|
border: 1px solid var(--world-border);
|
|
border-radius: 8px;
|
|
color: var(--world-live);
|
|
background: color-mix(in srgb, var(--world-live) 8%, transparent);
|
|
font-size: 13px;
|
|
}
|
|
.fifth-system-inspector__expanded i {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--world-live);
|
|
box-shadow: 0 0 8px var(--world-live);
|
|
}
|
|
.fifth-system-inspector__overview { display: grid; gap: 12px; }
|
|
.fifth-system-inspector__overview > span { color: var(--world-accent); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
|
|
.fifth-system-inspector__overview h2 { margin: 0; font: 500 20px/1.25 "Songti SC", "STSong", serif; }
|
|
.fifth-system-inspector__overview p { margin: 0; color: var(--world-muted); font-size: 12px; line-height: 1.7; }
|
|
.fifth-system-inspector footer { margin-top: auto; color: var(--world-faint); font-size: 11px; line-height: 1.6; }
|
|
.pufferfish-boundaries {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 1px;
|
|
border-top: 1px solid var(--world-border);
|
|
background: var(--world-border);
|
|
}
|
|
.pufferfish-boundaries section { padding: 18px 24px; background: var(--world-panel); }
|
|
.pufferfish-boundaries h2 { margin: 0 0 7px; font-size: 14px; }
|
|
.pufferfish-boundaries p { margin: 0; color: var(--world-muted); font-size: 12px; line-height: 1.65; }
|
|
|
|
.world-map-canvas__space {
|
|
position: absolute;
|
|
z-index: -2;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .56;
|
|
object-fit: cover;
|
|
filter: saturate(.82) hue-rotate(var(--world-art-hue, 0deg));
|
|
pointer-events: none;
|
|
}
|
|
.world-map-canvas__grid { opacity: .09; }
|
|
.world-graph-node__galaxy {
|
|
opacity: .82;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
filter: saturate(.88) brightness(.9);
|
|
transition: opacity .24s ease, transform .3s ease, filter .24s ease;
|
|
}
|
|
.world-graph-node:hover .world-graph-node__galaxy,
|
|
.world-graph-node[data-selected="true"] .world-graph-node__galaxy {
|
|
opacity: 1;
|
|
transform: scale(1.08);
|
|
filter: saturate(1.08) brightness(1.12) drop-shadow(0 0 12px var(--world-accent));
|
|
}
|
|
.world-graph-node__galaxy--root {
|
|
opacity: 1;
|
|
filter: saturate(1.04) brightness(1.18) drop-shadow(0 0 18px color-mix(in srgb, var(--world-accent) 55%, transparent));
|
|
animation: world-galaxy-breathe 5.4s ease-in-out infinite;
|
|
}
|
|
.world-graph-node__galaxy--private {
|
|
opacity: .94;
|
|
filter: saturate(.9) hue-rotate(14deg) drop-shadow(0 0 18px color-mix(in srgb, var(--world-accent-2) 48%, transparent));
|
|
}
|
|
.world-graph-node__orbit--node {
|
|
opacity: .66;
|
|
stroke-dasharray: 2 7;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: world-orbit-spin 34s linear infinite;
|
|
}
|
|
.world-graph-node__symbol {
|
|
font-size: 8px;
|
|
letter-spacing: .2em;
|
|
}
|
|
.world-graph-node__label {
|
|
font-size: 13px;
|
|
paint-order: stroke;
|
|
stroke: color-mix(in srgb, var(--world-bg) 92%, transparent);
|
|
stroke-width: 4px;
|
|
}
|
|
.world-graph-node__status {
|
|
font-size: 10px;
|
|
paint-order: stroke;
|
|
stroke: color-mix(in srgb, var(--world-bg) 90%, transparent);
|
|
stroke-width: 3px;
|
|
}
|
|
.world-graph-node__root-label {
|
|
font-size: 22px;
|
|
paint-order: stroke;
|
|
stroke: color-mix(in srgb, var(--world-bg) 92%, transparent);
|
|
stroke-width: 5px;
|
|
}
|
|
.world-graph-node__root-status {
|
|
fill: var(--world-live);
|
|
font-size: 11px;
|
|
paint-order: stroke;
|
|
stroke: color-mix(in srgb, var(--world-bg) 92%, transparent);
|
|
stroke-width: 4px;
|
|
}
|
|
.world-graph-node:focus-visible .world-graph-node__orbit {
|
|
stroke: var(--world-accent);
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
@keyframes world-galaxy-breathe {
|
|
0%, 100% { transform: scale(.98); opacity: .92; }
|
|
50% { transform: scale(1.04); opacity: 1; }
|
|
}
|
|
|
|
@media (max-width: 1050px) {
|
|
.world-map-shell,
|
|
.fifth-systems__layout { grid-template-columns: minmax(0, 1fr) 274px; }
|
|
.world-node-inspector,
|
|
.fifth-system-inspector { padding-inline: 18px; }
|
|
.fifth-system-columns {
|
|
grid-template-columns: 1fr;
|
|
padding: 30px 22px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.app:has(.hololake-home) [data-ai-workspace-mode="side"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
border-left: 0;
|
|
}
|
|
.hololake-theme-menu { width: min(354px, calc(100vw - 20px)); }
|
|
.world-map-shell { grid-template-columns: 1fr; grid-template-rows: minmax(440px, 1fr) auto 48px; }
|
|
.world-node-inspector { min-height: 280px; }
|
|
.fifth-systems { height: auto; min-height: 100%; }
|
|
.fifth-systems__heading { align-items: start; flex-direction: column; padding: 22px 20px; }
|
|
.fifth-systems__layout { grid-template-columns: 1fr; }
|
|
.fifth-systems__canvas { min-height: 520px; border-right: 0; }
|
|
.fifth-system-inspector { min-height: 360px; border-top: 1px solid var(--world-border); }
|
|
.pufferfish-boundaries { grid-template-columns: 1fr; }
|
|
.world-gate__constellation--lighthouse { top: 24%; left: 14%; }
|
|
.world-gate__constellation--zero { top: 73%; left: 15%; }
|
|
.world-gate__constellation--fifth { top: 37%; left: 89%; }
|
|
.world-gate__constellation span,
|
|
.world-gate__constellation small { display: none; }
|
|
.world-gate__core { width: min(420px, 86vw); }
|
|
.world-gate__core > img { width: min(360px, 78vw); }
|
|
.world-gate__path { gap: 12px; }
|
|
.world-gate__path b { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.world-gate__space,
|
|
.world-gate__stars,
|
|
.world-gate__constellation img,
|
|
.world-gate__core > img,
|
|
.world-gate__routes .world-gate__route-pulse { animation: none; }
|
|
}
|
|
|
|
/* Keep the application chrome inside the same visual world as the galaxy. */
|
|
.app-shell:has(.hololake-home) {
|
|
--sidebar: #050b1a;
|
|
--muted-foreground: #68809a;
|
|
--border: rgba(132, 178, 222, .16);
|
|
}
|
|
.app-shell:has(.hololake-home) .hololake-bar {
|
|
border-bottom-color: rgba(132, 178, 222, .16) !important;
|
|
color: #dcecff !important;
|
|
background:
|
|
radial-gradient(circle at 50% 140%, rgba(86, 161, 213, .08), transparent 46%),
|
|
#050b1a !important;
|
|
box-shadow: 0 10px 36px rgba(0, 0, 0, .18);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
.app-shell:has(.hololake-home) .hololake-bar__context { color: #6e86a2 !important; }
|
|
.app-shell:has(.hololake-home) .hololake-bar__line {
|
|
background: rgba(132, 178, 222, .18);
|
|
}
|
|
.app-shell:has(.hololake-home) .hololake-theme-nav {
|
|
border-color: rgba(132, 178, 222, .18);
|
|
color: #90a9c5;
|
|
background: rgba(11, 24, 47, .78);
|
|
box-shadow: inset 0 1px rgba(255, 255, 255, .04);
|
|
}
|
|
.app-shell:has(.hololake-home) .hololake-theme-nav strong { color: #dcecff; }
|
|
.app-shell:has(.hololake-home) .hololake-theme-nav small,
|
|
.app-shell:has(.hololake-home) .hololake-theme-nav > b { color: #6e86a2; }
|
|
body:has(.hololake-home) [data-testid="status-bar"] {
|
|
border-top-color: rgba(132, 178, 222, .16) !important;
|
|
color: #68809a !important;
|
|
background:
|
|
linear-gradient(90deg, rgba(86, 161, 213, .04), transparent 38%, rgba(86, 161, 213, .04)),
|
|
#050b1a !important;
|
|
background-color: #050b1a !important;
|
|
background-image: linear-gradient(90deg, rgba(86, 161, 213, .04), transparent 38%, rgba(86, 161, 213, .04)) !important;
|
|
box-shadow: 0 -10px 34px rgba(0, 0, 0, .14);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
.app-shell:has(.hololake-home[data-world-open="false"]) .hololake-bar {
|
|
border-bottom-color: rgba(132, 178, 222, .16) !important;
|
|
color: #dcecff !important;
|
|
background: #050b1a !important;
|
|
}
|
|
.app-shell:has(.hololake-home[data-world-open="false"]) .hololake-bar__context {
|
|
color: #6e86a2 !important;
|
|
}
|
|
.app-shell:has(.hololake-home[data-world-open="false"]) .hololake-theme-nav {
|
|
border-color: rgba(132, 178, 222, .18);
|
|
color: #90a9c5;
|
|
background: rgba(11, 24, 47, .78);
|
|
}
|
|
body:has(.hololake-home[data-world-open="false"]) [data-testid="status-bar"] {
|
|
border-top-color: rgba(132, 178, 222, .16) !important;
|
|
color: #68809a !important;
|
|
background: #050b1a !important;
|
|
}
|
|
|
|
/* Low-load galaxy motion contract: imagery is static, interaction owns most
|
|
movement, and only one slow core pulse remains while the world is idle. */
|
|
.world-gate__space,
|
|
.world-gate__stars,
|
|
.world-gate__constellation img,
|
|
.world-graph-node__orbit--node,
|
|
.world-graph-node__galaxy--root,
|
|
.world-graph-edge[data-status="online"],
|
|
.world-graph-node[data-status="online"] .world-graph-node__presence {
|
|
animation: none;
|
|
}
|
|
.world-graph-edge[data-status="online"] { filter: none; }
|
|
.world-gate__core > img { animation-duration: 12s; }
|
|
.world-gate__routes .world-gate__route-pulse { animation: none; }
|
|
.world-gate[data-state="connecting"] .world-gate__routes .world-gate__route-pulse {
|
|
animation: world-gate-route-pulse 5.5s linear infinite;
|
|
}
|