330 lines
27 KiB
CSS
330 lines
27 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--ink-950: #171c22;
|
|
--ink-800: #2b333b;
|
|
--ink-650: #46515b;
|
|
--paper-050: #f7f3e8;
|
|
--paper-100: #eee9dc;
|
|
--paper-200: #ddd4c2;
|
|
--white: #fffef9;
|
|
--aether: #32b8c6;
|
|
--gold: #e5b445;
|
|
--jade: #3f9e78;
|
|
--coral: #d95c55;
|
|
--command: #477ec7;
|
|
--violet: #8c63a8;
|
|
--copper: #b86d3f;
|
|
--secured: #287a5a;
|
|
--line: rgba(23, 28, 34, 0.16);
|
|
--shadow: 0 16px 38px rgba(23, 28, 34, 0.14);
|
|
--sidebar: 278px;
|
|
--topbar: 64px;
|
|
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { min-width: 320px; background: #e8e4da; }
|
|
body { margin: 0; color: var(--ink-950); background: var(--paper-100); letter-spacing: 0; }
|
|
button, input, select { font: inherit; letter-spacing: 0; }
|
|
button { cursor: pointer; }
|
|
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--command); }
|
|
img { display: block; max-width: 100%; }
|
|
.skip-link { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; color: #fff; background: var(--ink-950); }
|
|
.skip-link:focus { top: 12px; }
|
|
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
|
|
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; color: #f8f6ef; background: var(--ink-950); border-right: 1px solid rgba(255,255,255,.08); z-index: 40; }
|
|
.brand-block { min-height: 94px; display: flex; gap: 12px; align-items: center; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
|
|
.brand-block > div { min-width: 0; }
|
|
.brand-block strong, .brand-block span { display: block; }
|
|
.brand-block strong { font-size: 15px; }
|
|
.brand-block span { margin-top: 3px; color: #bfc7cd; font-size: 12px; }
|
|
.brand-mark { flex: 0 0 42px; width: 42px; height: 42px; display: grid !important; place-items: center; color: var(--ink-950) !important; font-weight: 900; background: var(--gold); border: 2px solid #ffe295; border-radius: 4px; }
|
|
.primary-nav { padding: 14px 10px 90px; display: grid; gap: 4px; }
|
|
.nav-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; color: #d5dadd; text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 4px; background: transparent; }
|
|
.nav-item > span { font-size: 11px; color: #87939c; }
|
|
.nav-item > b { min-width: 25px; padding: 2px 5px; text-align: center; font-size: 10px; color: var(--ink-950); background: #c5cdd2; border-radius: 8px; }
|
|
.nav-item:hover { background: rgba(255,255,255,.06); }
|
|
.nav-item.is-active { color: #fff; border-left-color: var(--gold); background: rgba(229,180,69,.12); }
|
|
.nav-item.is-active > span { color: var(--gold); }
|
|
.nav-item.is-active > b { background: var(--gold); }
|
|
.sidebar-footer { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 14px 18px; background: #12171c; border-top: 1px solid rgba(255,255,255,.1); }
|
|
.sidebar-footer strong, .sidebar-footer span { display: block; }
|
|
.sidebar-footer strong { font-size: 11px; color: #fff; }
|
|
.sidebar-footer span { color: #9ca7af; font-size: 10px; }
|
|
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(229,180,69,.15); }
|
|
.page-shell { min-width: 0; }
|
|
.topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(16px, 3vw, 38px); background: rgba(247,243,232,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
|
|
.breadcrumbs { min-width: 0; display: flex; gap: 9px; align-items: center; font-size: 13px; }
|
|
.breadcrumbs span, .breadcrumbs b { color: #75808a; font-weight: 500; }
|
|
.breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.top-actions { display: flex; gap: 10px; align-items: center; }
|
|
.evidence-badge, .chip { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 8px; font-size: 11px; font-weight: 700; color: var(--ink-800); background: var(--paper-200); border: 1px solid rgba(23,28,34,.12); border-radius: 4px; }
|
|
.icon-button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--ink-950); background: transparent; border: 1px solid var(--line); border-radius: 4px; }
|
|
.icon-button:hover { background: #fff; }
|
|
.mobile-only { display: none; }
|
|
main { min-height: calc(100vh - var(--topbar)); padding: clamp(22px, 3.5vw, 54px); }
|
|
.view { width: min(100%, 1480px); margin: 0 auto; }
|
|
.view-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 28px; }
|
|
.view-heading > div { max-width: 860px; }
|
|
.eyebrow { display: block; margin-bottom: 8px; color: var(--copper); font-size: 11px; font-weight: 900; text-transform: uppercase; }
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1 { margin-bottom: 10px; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.08; }
|
|
h2 { margin-bottom: 10px; font-size: 24px; line-height: 1.2; }
|
|
h3 { margin-bottom: 8px; font-size: 17px; }
|
|
p { color: var(--ink-650); line-height: 1.7; }
|
|
.view-heading p { max-width: 820px; margin-bottom: 0; }
|
|
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 24px 0 36px; border: 1px solid var(--line); background: var(--line); }
|
|
.metric { min-height: 108px; padding: 18px; background: var(--white); }
|
|
.metric strong { display: block; margin-bottom: 7px; font-size: 30px; font-variant-numeric: tabular-nums; }
|
|
.metric span { color: var(--ink-650); font-size: 12px; }
|
|
.overview-hero { position: relative; min-height: 0; aspect-ratio: 16/9; overflow: hidden; background: var(--ink-950); border: 1px solid rgba(23,28,34,.32); box-shadow: var(--shadow); }
|
|
.overview-hero img { width: 100%; height: 100%; object-fit: contain; }
|
|
.overview-hero-copy { position: absolute; left: 3.5%; bottom: 5%; width: min(46%, 580px); padding: 20px 22px; color: #fff; background: rgba(23,28,34,.89); border-left: 5px solid var(--gold); }
|
|
.overview-hero-copy h2 { margin-bottom: 7px; font-size: clamp(20px, 2.3vw, 34px); }
|
|
.overview-hero-copy p { margin: 0; color: #dce4e8; line-height: 1.55; }
|
|
.section-band { margin-top: 42px; padding: 30px 0; border-top: 1px solid var(--line); }
|
|
.thesis-grid, .production-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
|
|
.info-block { min-height: 160px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
|
|
.info-block::before { content: ""; display: block; width: 42px; height: 4px; margin-bottom: 16px; background: var(--aether); }
|
|
.info-block:nth-child(2)::before { background: var(--gold); }
|
|
.info-block:nth-child(3)::before { background: var(--coral); }
|
|
.info-block p { margin-bottom: 0; font-size: 14px; }
|
|
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
|
|
.search-input { min-width: min(100%, 320px); min-height: 44px; padding: 10px 12px; color: var(--ink-950); background: #fff; border: 1px solid var(--line); border-radius: 4px; }
|
|
.segmented { display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--line); background: var(--line); }
|
|
.segmented button { min-height: 42px; padding: 8px 12px; color: var(--ink-650); background: var(--white); border: 0; }
|
|
.segmented button.is-active { color: #fff; background: var(--ink-800); }
|
|
.screen-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 34px); align-items: start; }
|
|
.screen-index { position: sticky; top: calc(var(--topbar) + 20px); max-height: calc(100vh - var(--topbar) - 40px); overflow: auto; background: var(--white); border: 1px solid var(--line); }
|
|
.screen-index button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 68px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px 12px; text-align: left; color: var(--ink-650); background: transparent; border: 0; border-bottom: 1px solid var(--line); }
|
|
.screen-index button span { font-size: 11px; font-weight: 800; color: var(--copper); }
|
|
.screen-index button b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.screen-index button i { padding: 3px 5px; font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; border: 1px solid var(--line); border-radius: 3px; }
|
|
.coverage-dedicated { color: #fff; background: var(--secured); }
|
|
.coverage-family { color: var(--ink-800); background: var(--paper-200); }
|
|
.coverage-missing { color: #fff; background: #a54640; }
|
|
.screen-index button.is-active { color: var(--ink-950); background: #f1ead8; box-shadow: inset 4px 0 var(--gold); }
|
|
.screen-detail { min-width: 0; }
|
|
.screen-stage-wrap { padding: clamp(8px, 1.2vw, 16px); background: #d9d4c7; border: 1px solid var(--line); box-shadow: var(--shadow); }
|
|
.game-stage { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; color: #fff; background: #26313a; isolation: isolate; }
|
|
.game-stage > img.stage-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
|
|
.game-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,15,18,.48) 0, transparent 22%, transparent 70%, rgba(10,15,18,.68) 100%); }
|
|
.game-stage.stage-light { color: var(--ink-950); background: #e6e0d2; }
|
|
.game-stage.stage-light::after { background: linear-gradient(180deg, rgba(247,243,232,.2), rgba(247,243,232,.02) 55%, rgba(247,243,232,.55)); }
|
|
.game-stage.stage-dedicated::after, .game-stage.stage-missing::after { display: none; }
|
|
.game-stage button { min-height: 38px; color: inherit; border: 1px solid rgba(255,255,255,.34); border-radius: 4px; background: rgba(23,28,34,.84); }
|
|
.hud-top { position: absolute; inset: 2.2% 2.4% auto; height: 8%; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
|
|
.hud-group { display: flex; gap: 7px; align-items: center; }
|
|
.hud-chip { min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: clamp(9px, .85vw, 13px); font-weight: 800; color: #fff; background: rgba(23,28,34,.84); border: 1px solid rgba(255,255,255,.24); border-radius: 4px; }
|
|
.hud-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
|
|
.hud-chip.risk i { background: var(--copper); }
|
|
.hud-chip.safe i { background: var(--secured); }
|
|
.stage-title { position: absolute; top: 13%; left: 4%; max-width: 43%; text-shadow: 0 2px 12px #000; }
|
|
.stage-title small { display: block; margin-bottom: 6px; color: #ffe295; font-weight: 900; }
|
|
.stage-title strong { display: block; font-size: clamp(17px, 2.2vw, 34px); line-height: 1.15; }
|
|
.stage-title p { margin: 8px 0 0; color: #fff; font-size: clamp(9px, .9vw, 14px); line-height: 1.45; }
|
|
.stage-bottom { position: absolute; left: 3%; right: 3%; bottom: 3%; min-height: 11%; display: flex; justify-content: space-between; gap: 12px; align-items: end; }
|
|
.stage-primary { min-width: 23%; padding: 10px 16px; font-weight: 900; color: var(--ink-950) !important; background: var(--gold) !important; border-color: #ffe49d !important; }
|
|
.stage-secondary { padding: 8px 12px; }
|
|
.route-map { position: absolute; inset: 18% 6% 18%; }
|
|
.route-line { position: absolute; left: 8%; right: 8%; top: 50%; height: 4px; background: rgba(50,184,198,.86); box-shadow: 0 0 10px rgba(50,184,198,.8); transform: rotate(-5deg); }
|
|
.route-node { position: absolute; width: clamp(34px, 4.5vw, 66px); aspect-ratio: 1; display: grid; place-items: center; color: #fff; font-size: clamp(10px, 1vw, 15px); font-weight: 900; background: var(--ink-800); border: 3px solid var(--aether); border-radius: 50%; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
|
|
.route-node:nth-child(2) { left: 8%; top: 47%; }
|
|
.route-node:nth-child(3) { left: 32%; top: 31%; border-color: var(--gold); }
|
|
.route-node:nth-child(4) { left: 57%; top: 47%; border-color: var(--coral); }
|
|
.route-node:nth-child(5) { right: 7%; top: 22%; border-color: var(--secured); }
|
|
.battle-telegraph { position: absolute; right: 23%; top: 37%; width: 25%; height: 20%; border: 3px solid var(--coral); clip-path: polygon(8% 0,100% 28%,90% 100%,0 78%); background: rgba(217,92,85,.16); }
|
|
.battle-telegraph::after { content: "3.2s · CENTER"; position: absolute; right: 8%; top: 12%; padding: 4px 7px; color: #fff; font-size: clamp(8px, .8vw, 12px); font-weight: 900; background: var(--coral); }
|
|
.directive-dock { position: absolute; left: 36%; right: 36%; bottom: 3%; height: 12%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.directive { display: grid; place-items: center; font-size: clamp(9px, .85vw, 13px); font-weight: 900; background: rgba(34,67,114,.94) !important; border: 2px solid #71a9ef !important; }
|
|
.directive.is-locked { opacity: .55; background: rgba(43,51,59,.9) !important; border-color: #777 !important; }
|
|
.cache-strap { position: absolute; top: 15%; right: 1.5%; bottom: 18%; width: 7%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 8px 4px; background: rgba(51,32,22,.83); border: 1px solid rgba(255,206,154,.42); }
|
|
.cache-strap b { color: #ffd0a4; font-size: clamp(8px,.75vw,11px); writing-mode: vertical-rl; }
|
|
.cache-strap strong { color: #fff; font-size: clamp(11px,1vw,15px); }
|
|
.formation-board { position: absolute; inset: 18% 27% 17% 22%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2,1fr); gap: 4%; transform: skewY(-2deg); }
|
|
.formation-slot { position: relative; display: grid; place-items: center; color: #fff; font-size: clamp(8px,.85vw,13px); font-weight: 800; background: rgba(43,51,59,.78); border: 2px solid rgba(50,184,198,.75); }
|
|
.formation-slot.is-filled { background: rgba(40,122,90,.82); border-color: #7cccae; }
|
|
.formation-slot.is-risk { background: rgba(151,58,52,.82); border-color: #ff9892; }
|
|
.settings-stage { position: absolute; inset: 10% 5% 7%; display: grid; grid-template-columns: 26% 1fr; color: var(--ink-950); background: rgba(247,243,232,.96); border: 1px solid rgba(23,28,34,.28); }
|
|
.settings-nav { padding: 5%; background: var(--ink-800); color: #fff; }
|
|
.settings-nav strong { display: block; margin-bottom: 7%; font-size: clamp(10px,1vw,16px); }
|
|
.settings-nav span { display: block; padding: 5% 3%; font-size: clamp(8px,.8vw,13px); border-left: 3px solid transparent; }
|
|
.settings-nav span:first-of-type { border-left-color: var(--gold); background: rgba(255,255,255,.08); }
|
|
.settings-content { padding: 5%; overflow: hidden; }
|
|
.settings-content h3 { font-size: clamp(12px,1.4vw,22px); }
|
|
.setting-row { min-height: 15%; display: grid; grid-template-columns: 1fr 42%; align-items: center; gap: 5%; font-size: clamp(8px,.8vw,13px); border-bottom: 1px solid var(--line); }
|
|
.fake-slider { height: 6px; background: var(--paper-200); }
|
|
.fake-slider i { display: block; width: 65%; height: 100%; background: var(--command); }
|
|
.toggle { justify-self: end; width: 38px; height: 20px; padding: 2px; background: var(--jade); border-radius: 10px; }
|
|
.toggle::after { content: ""; display: block; width: 16px; height: 16px; margin-left: auto; background: #fff; border-radius: 50%; }
|
|
.records-stage { position: absolute; inset: 13% 5% 7%; display: grid; grid-template-columns: 48% 1fr; gap: 3%; }
|
|
.records-art { min-width: 0; overflow: hidden; background: rgba(247,243,232,.9); border: 1px solid rgba(23,28,34,.25); }
|
|
.records-art img { width: 100%; height: 100%; object-fit: contain; }
|
|
.records-list { padding: 5%; color: var(--ink-950); background: rgba(247,243,232,.96); }
|
|
.records-list strong { display: block; font-size: clamp(11px,1.3vw,20px); }
|
|
.records-list p { font-size: clamp(8px,.8vw,12px); }
|
|
.record-line { padding: 4% 0; font-size: clamp(8px,.75vw,12px); border-bottom: 1px solid var(--line); }
|
|
.stage-generic-panel { position: absolute; right: 4%; top: 17%; bottom: 16%; width: 32%; padding: 3%; background: rgba(23,28,34,.9); border-left: 4px solid var(--gold); }
|
|
.stage-generic-panel h3 { font-size: clamp(11px,1.3vw,20px); }
|
|
.stage-generic-panel p { color: #dce4e8; font-size: clamp(8px,.78vw,12px); }
|
|
.stage-list-row { padding: 5% 0; font-size: clamp(8px,.75vw,12px); border-bottom: 1px solid rgba(255,255,255,.15); }
|
|
.boot-stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 8%; text-align: center; background: radial-gradient(circle at 50% 44%, #2f4650 0, #182127 43%, #0e1418 100%); }
|
|
.boot-sigil { position: relative; width: clamp(72px, 9vw, 138px); aspect-ratio: 1; margin-bottom: 5%; border: 2px solid rgba(229,180,69,.5); transform: rotate(45deg); }
|
|
.boot-sigil span, .boot-sigil i { position: absolute; display: block; background: var(--gold); box-shadow: 0 0 20px rgba(229,180,69,.45); }
|
|
.boot-sigil span { left: 48%; top: 8%; width: 4%; height: 84%; }
|
|
.boot-sigil i { left: 8%; top: 48%; width: 84%; height: 4%; }
|
|
.boot-title small { color: #b8c5cc; font-size: clamp(8px,.8vw,12px); font-weight: 800; letter-spacing: .12em; }
|
|
.boot-title strong { display: block; margin-top: 4px; font-size: clamp(23px,3vw,48px); }
|
|
.boot-title p { margin: 7px 0 0; color: #d8e0e3; font-size: clamp(9px,.9vw,14px); }
|
|
.boot-progress { width: min(48%, 420px); height: 5px; margin-top: 6%; overflow: hidden; background: rgba(255,255,255,.16); }
|
|
.boot-progress i { display: block; width: 68%; height: 100%; background: var(--gold); }
|
|
.boot-status { margin: 10px 0 0; color: #fff; font-size: clamp(9px,.8vw,13px); }
|
|
.boot-auto { margin-top: 5px; color: #8f9ba2; font-size: clamp(8px,.7vw,11px); }
|
|
.prototype-missing { position: absolute; inset: 0; display: grid; align-content: center; padding: 10% 12%; color: var(--ink-950); background: repeating-linear-gradient(-45deg, #f4efe3, #f4efe3 12px, #ede5d5 12px, #ede5d5 24px); }
|
|
.prototype-missing > span { margin-bottom: 12px; color: #a54640; font-size: clamp(8px,.75vw,12px); font-weight: 900; }
|
|
.prototype-missing > strong { max-width: 720px; font-size: clamp(20px,2.7vw,42px); line-height: 1.15; }
|
|
.prototype-missing > p { max-width: 680px; margin: 10px 0 22px; font-size: clamp(10px,.9vw,14px); }
|
|
.prototype-missing dl { width: min(100%, 760px); margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
|
|
.prototype-missing dl div { padding: 14px; background: rgba(255,254,249,.92); }
|
|
.prototype-missing dt { margin-bottom: 6px; color: var(--copper); font-size: clamp(8px,.7vw,10px); font-weight: 900; }
|
|
.prototype-missing dd { margin: 0; color: var(--ink-650); font-size: clamp(9px,.8vw,12px); line-height: 1.45; }
|
|
.screen-meta { margin-top: 24px; padding: 0 2px; }
|
|
.screen-meta-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
|
|
.screen-id { color: var(--copper); font-weight: 900; }
|
|
.screen-meta h2 { margin: 4px 0 8px; }
|
|
.spec-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
|
|
.spec-cell { min-height: 125px; padding: 16px; background: var(--white); }
|
|
.spec-cell span { display: block; margin-bottom: 8px; color: var(--copper); font-size: 10px; font-weight: 900; text-transform: uppercase; }
|
|
.spec-cell p { margin: 0; font-size: 13px; line-height: 1.55; }
|
|
.pager { display: flex; gap: 8px; }
|
|
.pager button, .text-button, .flow-action { min-height: 42px; padding: 8px 13px; color: var(--ink-950); background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
|
|
.pager button:hover, .text-button:hover { background: #efe5ca; }
|
|
.chapter-tabs { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 1px; margin-bottom: 22px; border: 1px solid var(--line); background: var(--line); }
|
|
.chapter-tabs button { min-height: 48px; color: var(--ink-650); background: var(--white); border: 0; }
|
|
.chapter-tabs button.is-active { color: #fff; background: var(--ink-800); }
|
|
.chapter-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 26px; align-items: start; }
|
|
.chapter-art { aspect-ratio: 16/9; background: #c9c4b8; border: 1px solid var(--line); box-shadow: var(--shadow); }
|
|
.chapter-art img { width: 100%; height: 100%; object-fit: contain; }
|
|
.chapter-copy { padding: 22px; background: var(--white); border-left: 5px solid var(--aether); }
|
|
.chapter-copy p { font-size: 13px; }
|
|
.chapter-states { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
|
|
.chapter-state { padding: 13px; min-height: 105px; background: var(--white); border: 1px solid var(--line); }
|
|
.chapter-state b { display: block; margin-bottom: 6px; color: var(--copper); font-size: 11px; }
|
|
.chapter-state span { color: var(--ink-650); font-size: 12px; line-height: 1.45; }
|
|
.catalog-layout { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); gap: 26px; align-items: start; }
|
|
.catalog-visual { position: sticky; top: calc(var(--topbar) + 20px); background: var(--white); border: 1px solid var(--line); }
|
|
.catalog-visual img { width: 100%; aspect-ratio: 1; object-fit: contain; }
|
|
.catalog-visual-copy { padding: 16px; border-top: 1px solid var(--line); }
|
|
.catalog-visual-copy p { margin: 0; font-size: 12px; }
|
|
.catalog-list { min-width: 0; display: grid; gap: 8px; }
|
|
.catalog-entry { display: grid; grid-template-columns: minmax(160px,.35fr) minmax(0,1fr); gap: 18px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--paper-200); }
|
|
.catalog-entry:hover { border-left-color: var(--gold); }
|
|
.catalog-entry strong { display: block; margin-bottom: 4px; font-size: 13px; }
|
|
.catalog-entry small { color: var(--copper); font-weight: 800; }
|
|
.catalog-entry p { margin: 0; font-size: 12px; line-height: 1.5; }
|
|
.empty-state, .loading-state { padding: 46px; text-align: center; color: var(--ink-650); background: var(--white); border: 1px solid var(--line); }
|
|
.flow-shell { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 24px; align-items: start; }
|
|
.flow-steps { display: grid; gap: 6px; }
|
|
.flow-steps button { min-height: 48px; display: grid; grid-template-columns: 26px 70px 1fr; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; color: var(--ink-650); background: var(--white); border: 1px solid var(--line); border-left: 4px solid transparent; }
|
|
.flow-steps button.is-active { color: var(--ink-950); border-left-color: var(--gold); background: #f1ead8; }
|
|
.flow-steps button span { color: var(--copper); font-size: 11px; font-weight: 900; }
|
|
.flow-steps button b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.flow-controls { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
|
|
.flow-action { color: var(--ink-950); font-weight: 800; background: var(--gold); border-color: #c29428; }
|
|
.readiness-table { width: 100%; border-collapse: collapse; background: var(--white); }
|
|
.readiness-table th, .readiness-table td { padding: 13px 14px; text-align: left; vertical-align: top; border: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
|
|
.readiness-table th { color: #fff; background: var(--ink-800); }
|
|
.state-open { color: #a54640; font-weight: 900; }
|
|
.state-ready { color: var(--secured); font-weight: 900; }
|
|
.stage-dialog { width: min(96vw, 1680px); max-width: none; padding: 54px 12px 12px; color: #fff; background: #090d10; border: 1px solid #4c5962; }
|
|
.stage-dialog::backdrop { background: rgba(5,8,10,.88); }
|
|
.dialog-close { position: absolute; right: 10px; top: 8px; width: 38px; height: 38px; color: #fff; font-size: 24px; background: transparent; border: 1px solid #64727b; border-radius: 4px; }
|
|
.stage-dialog .game-stage { width: min(100%, calc((100vh - 90px) * 16 / 9)); margin: auto; }
|
|
.nav-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10,14,17,.66); }
|
|
|
|
@media (max-width: 1100px) {
|
|
:root { --sidebar: 232px; }
|
|
.metric-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
|
.thesis-grid, .production-grid { grid-template-columns: 1fr; }
|
|
.screen-layout { grid-template-columns: 220px minmax(0,1fr); }
|
|
.chapter-layout, .catalog-layout { grid-template-columns: 1fr; }
|
|
.catalog-visual { position: static; display: grid; grid-template-columns: minmax(220px,.6fr) 1fr; }
|
|
.catalog-visual img { max-height: 420px; }
|
|
.flow-shell { grid-template-columns: 1fr; }
|
|
.flow-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
|
|
.flow-steps button { grid-template-columns: 24px 1fr; }
|
|
.flow-steps button b { display: none; }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
:root { --topbar: 56px; }
|
|
.mobile-only { display: grid; }
|
|
.app-shell { display: block; }
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: min(88vw, 320px);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transform: translateX(calc(-100% - 2px));
|
|
transition: transform 180ms ease, visibility 0s linear 180ms;
|
|
}
|
|
.sidebar.is-open {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
transform: translateX(0);
|
|
transition: transform 180ms ease, visibility 0s;
|
|
}
|
|
.brand-block .icon-button { margin-left: -4px; color: #fff; border-color: rgba(255,255,255,.2); }
|
|
.topbar { padding: 7px 12px; }
|
|
.top-actions .evidence-badge { display: none; }
|
|
main { padding: 20px 12px 34px; }
|
|
.view-heading { display: block; margin-bottom: 20px; }
|
|
h1 { font-size: 29px; }
|
|
.metric-row { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 18px 0 24px; }
|
|
.metric { min-height: 92px; padding: 14px; }
|
|
.metric strong { font-size: 25px; }
|
|
.overview-hero-copy { position: static; width: auto; padding: 16px; }
|
|
.overview-hero { aspect-ratio: auto; }
|
|
.overview-hero img { aspect-ratio: 16/9; object-fit: contain; }
|
|
.screen-layout { display: block; }
|
|
.screen-index { position: static; display: flex; max-height: none; overflow-x: auto; margin-bottom: 14px; }
|
|
.screen-index button { flex: 0 0 170px; grid-template-columns: 1fr auto; border-right: 1px solid var(--line); border-bottom: 0; }
|
|
.screen-index button > span { grid-column: 1 / -1; }
|
|
.screen-index button.is-active { box-shadow: inset 0 -4px var(--gold); }
|
|
.screen-index button b { white-space: normal; }
|
|
.screen-stage-wrap { padding: 5px; }
|
|
.screen-meta-head { display: block; }
|
|
.pager { margin-top: 12px; }
|
|
.spec-grid { grid-template-columns: 1fr; }
|
|
.prototype-missing dl { grid-template-columns: 1fr; }
|
|
.spec-cell { min-height: 0; }
|
|
.chapter-tabs { display: flex; overflow-x: auto; }
|
|
.chapter-tabs button { flex: 0 0 70px; }
|
|
.chapter-copy { padding: 16px; }
|
|
.chapter-states { grid-template-columns: 1fr; }
|
|
.catalog-visual { display: block; }
|
|
.catalog-visual img { max-height: none; }
|
|
.catalog-entry { grid-template-columns: 1fr; gap: 8px; }
|
|
.flow-steps { display: flex; overflow-x: auto; }
|
|
.flow-steps button { flex: 0 0 130px; grid-template-columns: 1fr; }
|
|
.flow-steps button span { display: none; }
|
|
.stage-title p, .stage-generic-panel p { display: none; }
|
|
.records-stage { grid-template-columns: 42% 1fr; }
|
|
.setting-row { grid-template-columns: 1fr 35%; }
|
|
.readiness-table { display: block; overflow-x: auto; }
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-height: 560px) {
|
|
.topbar { position: static; }
|
|
main { padding-top: 12px; }
|
|
.view-heading { margin-bottom: 12px; }
|
|
.screen-index { position: static; }
|
|
.stage-dialog { padding-top: 44px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
|
|
}
|