diff --git a/src/styles/global.css b/src/styles/global.css index e170634..da61651 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -3,137 +3,866 @@ --background: #090a0a; --foreground: #e9e4d9; --gold: #b99a62; - --font-inter: 'Inter', sans-serif; - --font-cormorant: 'Cormorant Garamond', Georgia, serif; - --font-mono-local: 'IBM Plex Mono', monospace; + --font-inter: "Inter", sans-serif; + --font-cormorant: "Cormorant Garamond", Georgia, serif; + --font-mono-local: "IBM Plex Mono", monospace; } -* { box-sizing: border-box; } -html { background: var(--background); } -body { margin: 0; background: var(--background); color: var(--foreground); } +* { + box-sizing: border-box; +} +html { + background: var(--background); +} +body { + margin: 0; + background: var(--background); + color: var(--foreground); +} .clock-page { - position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; - padding: 28px clamp(20px, 5vw, 80px) 24px; background-color: #090a0a; - background-image: linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.018) 50%, rgba(255,255,255,.018) 75%, transparent 75%); + position: relative; + min-height: 100svh; + overflow: hidden; + display: flex; + flex-direction: column; + padding: 28px clamp(20px, 5vw, 80px) 24px; + background-color: #090a0a; + background-image: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.018) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.018) 50%, + rgba(255, 255, 255, 0.018) 75%, + transparent 75% + ); background-size: 9px 9px; } -.clock-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 22%, rgba(0,0,0,.55) 100%); } -.site-header, .site-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #77766f; font: 10px var(--font-mono-local); letter-spacing: .19em; } -.header-actions { display: flex; align-items: center; gap: 16px; } -.nav-link { color: #b1aca1; text-decoration: none; border-bottom: 1px dotted rgba(185,154,98,.5); padding-bottom: 2px; transition: color .2s, border-color .2s; } -.nav-link:hover { color: var(--gold); border-bottom-color: var(--gold); } -.brand-mark { display: flex; align-items: center; gap: 9px; color: #b1aca1; } -.brand-dot, .status-pulse { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(185,154,98,.6); } -.header-status { display: flex; gap: 9px; align-items: center; } -.ambient-line { position: absolute; z-index: 0; top: 47%; width: 17vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,154,98,.25)); } -.ambient-line-left { left: 0; }.ambient-line-right { right: 0; transform: rotate(180deg); } -.hero-content { position: relative; z-index: 1; width: min(1360px, 100%); margin: auto; text-align: center; } -.eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); font: 10px var(--font-mono-local); letter-spacing: .28em; } -.eyebrow span { width: 32px; height: 1px; background: rgba(185,154,98,.5); } -h1 { margin: 22px 0 10px; color: #e8e1d3; font: 400 clamp(42px, 6.2vw, 92px)/.88 var(--font-cormorant), Georgia, serif; letter-spacing: -.035em; } -h1 em { color: var(--gold); font-style: italic; } -.subtitle { margin: 0 auto 44px; color: #88877f; font: 12px/1.5 var(--font-inter), sans-serif; letter-spacing: .05em; } -.clock-frame { border-top: 1px solid rgba(185,154,98,.5); border-bottom: 1px solid rgba(185,154,98,.5); padding: 17px 0 16px; } -.clock-frame-top, .clock-frame-bottom { display: flex; justify-content: space-between; color: #77766f; font: 9px var(--font-mono-local); letter-spacing: .16em; } -.clock-frame-bottom { margin-top: 22px; color: #9b8357; } -.clock-display { display: flex; align-items: center; justify-content: center; gap: clamp(7px, 1vw, 18px); margin-top: 13px; } -.clock-unit { min-width: 0; flex: 1; }.unit-digits { display: flex; gap: clamp(4px, .7vw, 11px); justify-content: center; }.unit-label { display: block; margin-top: 13px; color: #aba79c; font: 9px var(--font-mono-local); letter-spacing: .22em; text-transform: uppercase; } -.unit-divider { margin-top: -16px; color: #a98d5a; font: 600 clamp(28px, 4vw, 72px)/1 var(--font-mono-local); opacity: .8; } -.flip-digit { position: relative; display: block; width: clamp(38px, 7vw, 118px); height: clamp(54px, 11vw, 158px); perspective: 600px; color: #eee9dd; font: 500 clamp(43px, 8.8vw, 126px)/1 var(--font-mono-local); letter-spacing: -.14em; text-indent: -.12em; text-align: center; filter: drop-shadow(0 15px 15px rgba(0,0,0,.5)); } -.digit-face, .digit-flap { position: absolute; inset: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #393934; text-shadow: 0 2px 2px #000; } -.digit-top { clip-path: inset(0 0 50% 0); border-radius: 4px; background: linear-gradient(145deg, #343633, #171918 48%, #252724); }.digit-bottom { clip-path: inset(50% 0 0 0); border-radius: 4px; background: linear-gradient(145deg, #282b29, #111313 60%, #202220); } -.digit-face::after, .digit-flap::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px); pointer-events: none; } -.digit-seam { position: absolute; top: calc(50% - 1px); left: 0; right: 0; height: 2px; background: #0b0c0c; box-shadow: 0 1px 2px rgba(255,255,255,.13); z-index: 3; } -.digit-notch { position: absolute; z-index: 5; top: calc(50% - 4px); width: 7px; height: 8px; background: #090a0a; border-radius: 50%; }.digit-notch-left { left: -4px; }.digit-notch-right { right: -4px; } -.digit-flap { z-index: 4; backface-visibility: hidden; transform-style: preserve-3d; }.digit-flap-top { clip-path: inset(0 0 50% 0); transform-origin: 50% 50%; border-radius: 4px; background: linear-gradient(145deg, #343633, #171918 48%, #252724); }.digit-flap-bottom { clip-path: inset(50% 0 0 0); transform-origin: 50% 50%; border-radius: 4px; background: linear-gradient(145deg, #282b29, #111313 60%, #202220); transform: rotateX(90deg); } -.is-flipping .digit-flap-top { animation: flip-top .42s cubic-bezier(.37,.01,.2,1) forwards; }.is-flipping .digit-flap-bottom { animation: flip-bottom .42s cubic-bezier(.37,.01,.2,1) .2s forwards; } -@keyframes flip-top { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } } -@keyframes flip-bottom { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } -.site-footer { margin-top: auto; padding-top: 22px; color: #65655f; }.footer-rule { flex: 1; height: 1px; margin: 0 22px; background: #292a27; } -@media (max-width: 640px) { .clock-page { padding: 20px 14px 18px; }.site-header { font-size: 8px; }.header-actions { gap: 10px; }.nav-link { font-size: 8px; }.header-status { max-width: 150px; text-align: right; line-height: 1.6; }.subtitle { margin-bottom: 30px; font-size: 11px; }.clock-frame-top, .clock-frame-bottom { font-size: 7px; letter-spacing: .1em; }.clock-frame-bottom { margin-top: 16px; }.clock-display { gap: 4px; }.unit-divider { font-size: 23px; }.unit-label { font-size: 7px; letter-spacing: .12em; margin-top: 9px; }.flip-digit { width: clamp(35px, 17vw, 64px); height: clamp(50px, 24vw, 88px); font-size: clamp(39px, 20vw, 70px); } } -@media (prefers-reduced-motion: reduce) { .is-flipping .digit-flap { animation: none; } } +.clock-page::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: radial-gradient(ellipse at 50% 45%, transparent 22%, rgba(0, 0, 0, 0.55) 100%); +} +.site-header, +.site-footer { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: space-between; + color: #77766f; + font: 10px var(--font-mono-local); + letter-spacing: 0.19em; +} +.header-actions { + display: flex; + align-items: center; + gap: 16px; +} +.nav-link { + color: #b1aca1; + text-decoration: none; + border-bottom: 1px dotted rgba(185, 154, 98, 0.5); + padding-bottom: 2px; + transition: + color 0.2s, + border-color 0.2s; +} +.nav-link:hover { + color: var(--gold); + border-bottom-color: var(--gold); +} +.brand-mark { + display: flex; + align-items: center; + gap: 9px; + color: #b1aca1; +} +.brand-dot, +.status-pulse { + width: 5px; + height: 5px; + display: inline-block; + border-radius: 50%; + background: var(--gold); + box-shadow: 0 0 10px rgba(185, 154, 98, 0.6); +} +.header-status { + display: flex; + gap: 9px; + align-items: center; +} +.ambient-line { + position: absolute; + z-index: 0; + top: 47%; + width: 17vw; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(185, 154, 98, 0.25)); +} +.ambient-line-left { + left: 0; +} +.ambient-line-right { + right: 0; + transform: rotate(180deg); +} +.hero-content { + position: relative; + z-index: 1; + width: min(1360px, 100%); + margin: auto; + text-align: center; +} +.eyebrow { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + color: var(--gold); + font: 10px var(--font-mono-local); + letter-spacing: 0.28em; +} +.eyebrow span { + width: 32px; + height: 1px; + background: rgba(185, 154, 98, 0.5); +} +h1 { + margin: 22px 0 10px; + color: #e8e1d3; + font: + 400 clamp(42px, 6.2vw, 92px)/0.88 var(--font-cormorant), + Georgia, + serif; + letter-spacing: -0.035em; +} +h1 em { + color: var(--gold); + font-style: italic; +} +.subtitle { + margin: 0 auto 44px; + color: #88877f; + font: + 12px/1.5 var(--font-inter), + sans-serif; + letter-spacing: 0.05em; +} +.clock-frame { + border-top: 1px solid rgba(185, 154, 98, 0.5); + border-bottom: 1px solid rgba(185, 154, 98, 0.5); + padding: 17px 0 16px; +} +.clock-frame-top, +.clock-frame-bottom { + display: flex; + justify-content: space-between; + color: #77766f; + font: 9px var(--font-mono-local); + letter-spacing: 0.16em; +} +.clock-frame-bottom { + margin-top: 22px; + color: #9b8357; +} +.clock-display { + display: flex; + align-items: center; + justify-content: center; + gap: clamp(7px, 1vw, 18px); + margin-top: 13px; +} +.clock-unit { + min-width: 0; + flex: 1; +} +.unit-digits { + display: flex; + gap: clamp(4px, 0.7vw, 11px); + justify-content: center; +} +.unit-label { + display: block; + margin-top: 13px; + color: #aba79c; + font: 9px var(--font-mono-local); + letter-spacing: 0.22em; + text-transform: uppercase; +} +.unit-divider { + margin-top: -16px; + color: #a98d5a; + font: 600 clamp(28px, 4vw, 72px)/1 var(--font-mono-local); + opacity: 0.8; +} +.flip-digit { + position: relative; + display: block; + width: clamp(38px, 7vw, 118px); + height: clamp(54px, 11vw, 158px); + perspective: 600px; + color: #eee9dd; + font: 500 clamp(43px, 8.8vw, 126px)/1 var(--font-mono-local); + letter-spacing: -0.14em; + text-indent: -0.12em; + text-align: center; + filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.5)); +} +.digit-face, +.digit-flap { + position: absolute; + inset: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border: 1px solid #393934; + text-shadow: 0 2px 2px #000; +} +.digit-top { + clip-path: inset(0 0 50% 0); + border-radius: 4px; + background: linear-gradient(145deg, #343633, #171918 48%, #252724); +} +.digit-bottom { + clip-path: inset(50% 0 0 0); + border-radius: 4px; + background: linear-gradient(145deg, #282b29, #111313 60%, #202220); +} +.digit-face::after, +.digit-flap::after { + content: ""; + position: absolute; + inset: 0; + background: repeating-linear-gradient(115deg, transparent 0 3px, rgba(255, 255, 255, 0.018) 3px 4px); + pointer-events: none; +} +.digit-seam { + position: absolute; + top: calc(50% - 1px); + left: 0; + right: 0; + height: 2px; + background: #0b0c0c; + box-shadow: 0 1px 2px rgba(255, 255, 255, 0.13); + z-index: 3; +} +.digit-notch { + position: absolute; + z-index: 5; + top: calc(50% - 4px); + width: 7px; + height: 8px; + background: #090a0a; + border-radius: 50%; +} +.digit-notch-left { + left: -4px; +} +.digit-notch-right { + right: -4px; +} +.digit-flap { + z-index: 4; + backface-visibility: hidden; + transform-style: preserve-3d; +} +.digit-flap-top { + clip-path: inset(0 0 50% 0); + transform-origin: 50% 50%; + border-radius: 4px; + background: linear-gradient(145deg, #343633, #171918 48%, #252724); +} +.digit-flap-bottom { + clip-path: inset(50% 0 0 0); + transform-origin: 50% 50%; + border-radius: 4px; + background: linear-gradient(145deg, #282b29, #111313 60%, #202220); + transform: rotateX(90deg); +} +.is-flipping .digit-flap-top { + animation: flip-top 0.42s cubic-bezier(0.37, 0.01, 0.2, 1) forwards; +} +.is-flipping .digit-flap-bottom { + animation: flip-bottom 0.42s cubic-bezier(0.37, 0.01, 0.2, 1) 0.2s forwards; +} +@keyframes flip-top { + 0% { + transform: rotateX(0); + } + 100% { + transform: rotateX(-90deg); + } +} +@keyframes flip-bottom { + 0% { + transform: rotateX(90deg); + } + 100% { + transform: rotateX(0); + } +} +.site-footer { + margin-top: auto; + padding-top: 22px; + color: #65655f; +} +.footer-rule { + flex: 1; + height: 1px; + margin: 0 22px; + background: #292a27; +} +@media (max-width: 640px) { + .clock-page { + padding: 20px 14px 18px; + } + .site-header { + font-size: 8px; + } + .header-actions { + gap: 10px; + } + .nav-link { + font-size: 8px; + } + .header-status { + max-width: 150px; + text-align: right; + line-height: 1.6; + } + .subtitle { + margin-bottom: 30px; + font-size: 11px; + } + .clock-frame-top, + .clock-frame-bottom { + font-size: 7px; + letter-spacing: 0.1em; + } + .clock-frame-bottom { + margin-top: 16px; + } + .clock-display { + gap: 4px; + } + .unit-divider { + font-size: 23px; + } + .unit-label { + font-size: 7px; + letter-spacing: 0.12em; + margin-top: 9px; + } + .flip-digit { + width: clamp(35px, 17vw, 64px); + height: clamp(50px, 24vw, 88px); + font-size: clamp(39px, 20vw, 70px); + } +} +@media (prefers-reduced-motion: reduce) { + .is-flipping .digit-flap { + animation: none; + } +} /* dashboard: JS-injected markup (no data-astro-cid attribute, must be unscoped) */ -.chart-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font: 9px var(--font-mono-local); letter-spacing: .18em; color: #5a5952; } -.log-line { display: flex; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed rgba(255,255,255,.04); } -.log-line:last-child { border-bottom: none; } -.log-line-pending { border-top: 1px dashed rgba(231,76,60,.35); } -.log-time { color: #9b8357; white-space: nowrap; } -.log-author { color: #2ecc71; white-space: nowrap; } -.log-author-system { color: var(--gold); } -.log-text { color: #c9c4b9; white-space: normal; } -.timeline-item { position: relative; padding: 5px 0 16px 22px; } -.timeline-item::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: 2px; width: 1px; background: rgba(255,255,255,.09); } -.timeline-item:last-child::before { display: none; } -.timeline-dot { position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(185,154,98,.4); } -.timeline-dot-muted { background: #3a3a36; box-shadow: none; } -.timeline-dot-danger { background: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,.5); animation: pulse 1.6s ease-in-out infinite; } -.timeline-date { display: block; font: 10px/1.6 var(--font-mono-local); letter-spacing: .04em; color: #9b8357; margin-bottom: 5px; } -.timeline-label { display: block; font: 10px/1.7 var(--font-mono-local); letter-spacing: .02em; color: #d8d3c8; word-break: break-word; } -.timeline-by { color: #55554f; } -.timeline-label-danger { color: #ff6a5b; } -@media (prefers-reduced-motion: reduce) { .timeline-dot-danger { animation: none; } } +.chart-fallback { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font: 9px var(--font-mono-local); + letter-spacing: 0.18em; + color: #5a5952; +} +.log-line { + display: flex; + gap: 10px; + padding: 5px 2px; + border-bottom: 1px dashed rgba(255, 255, 255, 0.04); +} +.log-line:last-child { + border-bottom: none; +} +.log-line-pending { + border-top: 1px dashed rgba(231, 76, 60, 0.35); +} +.log-time { + color: #9b8357; + white-space: nowrap; +} +.log-author { + color: #2ecc71; + white-space: nowrap; +} +.log-author-system { + color: var(--gold); +} +.log-text { + color: #c9c4b9; + white-space: normal; +} +.timeline-item { + position: relative; + padding: 5px 0 16px 22px; +} +.timeline-item::before { + content: ""; + position: absolute; + left: 4px; + top: 14px; + bottom: 2px; + width: 1px; + background: rgba(255, 255, 255, 0.09); +} +.timeline-item:last-child::before { + display: none; +} +.timeline-dot { + position: absolute; + left: 0; + top: 10px; + width: 9px; + height: 9px; + border-radius: 50%; + background: var(--gold); + box-shadow: 0 0 6px rgba(185, 154, 98, 0.4); +} +.timeline-dot-muted { + background: #3a3a36; + box-shadow: none; +} +.timeline-dot-danger { + background: #e74c3c; + box-shadow: 0 0 8px rgba(231, 76, 60, 0.5); + animation: pulse 1.6s ease-in-out infinite; +} +.timeline-date { + display: block; + font: 10px/1.6 var(--font-mono-local); + letter-spacing: 0.04em; + color: #9b8357; + margin-bottom: 5px; +} +.timeline-label { + display: block; + font: 10px/1.7 var(--font-mono-local); + letter-spacing: 0.02em; + color: #d8d3c8; + word-break: break-word; +} +.timeline-by { + color: #55554f; +} +.timeline-label-danger { + color: #ff6a5b; +} +@media (prefers-reduced-motion: reduce) { + .timeline-dot-danger { + animation: none; + } +} /* ===== dashboard ===== */ -.dash-page { position: relative; min-height: 100svh; padding: 20px clamp(14px, 3vw, 44px) 18px; background-color: #090a0a; background-image: linear-gradient(135deg, rgba(255,255,255,.01) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.018) 50%, rgba(255,255,255,.018) 75%, transparent 75%); background-size: 9px 9px; overflow-x: hidden; } -.dash-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%); } -.dash-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(185,154,98,.35); margin-bottom: 16px; } -.dash-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } -.back-link { color: #b1aca1; font: 10px var(--font-mono-local); letter-spacing: .18em; text-decoration: none; white-space: nowrap; transition: color .2s; } -.back-link:hover { color: var(--gold); } -.header-sep { width: 1px; height: 14px; background: rgba(255,255,255,.15); } -.dash-name { font: 600 10px var(--font-mono-local); letter-spacing: .22em; color: #cfcabc; white-space: nowrap; } -.ticket-chip { font: 10px var(--font-mono-local); letter-spacing: .12em; color: var(--gold); border: 1px solid rgba(185,154,98,.4); border-radius: 3px; padding: 3px 7px; white-space: nowrap; } -.dash-header-right { display: flex; align-items: center; gap: 14px; } -.status-badge { display: inline-flex; align-items: center; gap: 7px; font: 9px var(--font-mono-local); letter-spacing: .18em; padding: 5px 10px; border-radius: 3px; border: 1px solid rgba(243,156,18,.45); color: #f5b043; background: rgba(243,156,18,.07); white-space: nowrap; } -.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #f39c12; animation: pulse 1.6s ease-in-out infinite; } -.live-clock { font: 500 11px var(--font-mono-local); letter-spacing: .14em; color: #b1aca1; white-space: nowrap; } -.metrics-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; } -.panel { position: relative; z-index: 1; background: rgba(12,13,13,.75); border: 1px solid rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; animation: panel-in .5s ease both; } -.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.025); } -.panel-title { font: 600 9px var(--font-mono-local); letter-spacing: .2em; color: #8b8a83; } -.panel-head-right { display: flex; align-items: center; gap: 12px; } -.panel-meta { font: 8.5px var(--font-mono-local); letter-spacing: .12em; color: #4c4c47; } -.panel-menu { display: inline-flex; gap: 3px; } -.panel-menu i { width: 3px; height: 3px; border-radius: 50%; background: #4a4a45; display: inline-block; } -.panel-body { padding: 14px; } -.metric-panel { min-width: 0; } -.metric-panel .panel-body { padding: 16px 14px 14px; } -.metric-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; } -.metric-rule-gold { background: linear-gradient(90deg, rgba(185,154,98,.9), rgba(185,154,98,.15)); } -.metric-rule-red { background: linear-gradient(90deg, rgba(231,76,60,.9), rgba(231,76,60,.15)); } -.metric-label { font: 600 9px var(--font-mono-local); letter-spacing: .18em; color: #8b8a83; margin-bottom: 10px; } -.metric-value { font: 600 clamp(22px, 2.6vw, 34px)/1.1 var(--font-mono-local); color: #f2ede2; letter-spacing: -.03em; white-space: nowrap; } -.metric-value-danger { color: #ff6a5b; } -.metric-sub { margin-top: 8px; font: 8.5px var(--font-mono-local); letter-spacing: .1em; color: #5a5952; } -.charts-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } -.chart-wrap { position: relative; height: 200px; padding: 6px 4px 2px; } -.gauge-wrap { position: relative; height: 170px; } -.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } -.gauge-center span { font: 600 34px/1 var(--font-mono-local); color: #ff6a5b; } -.gauge-center small { margin-top: 6px; font: 8.5px var(--font-mono-local); letter-spacing: .16em; color: #5a5952; } -.dash-note { position: relative; z-index: 1; margin: 0 0 12px; padding: 10px 14px; font: 9px/1.7 var(--font-mono-local); letter-spacing: .12em; color: #8b8a83; background: rgba(185,154,98,.045); border: 1px solid rgba(185,154,98,.22); border-left: 3px solid rgba(185,154,98,.7); border-radius: 3px; } -.dash-note b { color: #e9e4d9; font-weight: 600; } -.bottom-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; } -.bottom-row .panel { display: flex; flex-direction: column; } -.log-list { font: 10px/1.7 var(--font-mono-local); max-height: 280px; overflow-y: auto; } -.timeline-list { font: 10px/1.7 var(--font-mono-local); max-height: 280px; overflow-y: auto; padding: 4px 6px 4px 8px; } -.details-table { width: 100%; border-collapse: collapse; } -.details-table td { padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,.05); font-size: 10px; vertical-align: top; font-family: var(--font-mono-local); } -.details-table tr:last-child td { border-bottom: none; } -.details-key { color: #5a5952; letter-spacing: .14em; font-size: 8.5px; width: 38%; white-space: nowrap; } -.details-value { color: #ddd8cd; word-break: break-word; } -.details-value-gold { color: var(--gold); } -.details-value-danger { color: #ff6a5b; } -.dash-footer { position: relative; z-index: 1; margin-top: 16px; padding-top: 14px; border-top: 1px solid #292a27; } -.dash-footer-inner { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; font: 9px var(--font-mono-local); letter-spacing: .14em; color: #55554f; } -@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } -@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } -.panel-stagger-1 { animation-delay: .04s; } -.panel-stagger-2 { animation-delay: .1s; } -.panel-stagger-3 { animation-delay: .16s; } -.panel-stagger-4 { animation-delay: .22s; } -@media (max-width: 880px) { .metrics-row { grid-template-columns: repeat(2, 1fr); } .charts-grid { grid-template-columns: 1fr; } .bottom-row { grid-template-columns: 1fr; } .log-list, .timeline-list { max-height: 200px; } } -@media (max-width: 520px) { .metrics-row { grid-template-columns: 1fr; } .dash-header { flex-direction: column; align-items: flex-start; gap: 10px; } .dash-header-left { flex-wrap: wrap; gap: 8px; } .dash-header-right { width: 100%; justify-content: space-between; } .chart-wrap { height: 170px; } .panel-head-right .panel-meta { display: none; } } -@media (prefers-reduced-motion: reduce) { .panel, .badge-dot, .timeline-dot-danger { animation: none; } } +.dash-page { + position: relative; + min-height: 100svh; + padding: 20px clamp(14px, 3vw, 44px) 18px; + background-color: #090a0a; + background-image: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.01) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.018) 50%, + rgba(255, 255, 255, 0.018) 75%, + transparent 75% + ); + background-size: 9px 9px; + overflow-x: hidden; +} +.dash-page::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%); +} +.dash-header { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: space-between; + gap: 14px; + padding-bottom: 14px; + border-bottom: 1px solid rgba(185, 154, 98, 0.35); + margin-bottom: 16px; +} +.dash-header-left { + display: flex; + align-items: center; + gap: 12px; + min-width: 0; +} +.back-link { + color: #b1aca1; + font: 10px var(--font-mono-local); + letter-spacing: 0.18em; + text-decoration: none; + white-space: nowrap; + transition: color 0.2s; +} +.back-link:hover { + color: var(--gold); +} +.header-sep { + width: 1px; + height: 14px; + background: rgba(255, 255, 255, 0.15); +} +.dash-name { + font: 600 10px var(--font-mono-local); + letter-spacing: 0.22em; + color: #cfcabc; + white-space: nowrap; +} +.ticket-chip { + font: 10px var(--font-mono-local); + letter-spacing: 0.12em; + color: var(--gold); + border: 1px solid rgba(185, 154, 98, 0.4); + border-radius: 3px; + padding: 3px 7px; + white-space: nowrap; +} +.dash-header-right { + display: flex; + align-items: center; + gap: 14px; +} +.status-badge { + display: inline-flex; + align-items: center; + gap: 7px; + font: 9px var(--font-mono-local); + letter-spacing: 0.18em; + padding: 5px 10px; + border-radius: 3px; + border: 1px solid rgba(243, 156, 18, 0.45); + color: #f5b043; + background: rgba(243, 156, 18, 0.07); + white-space: nowrap; +} +.badge-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: #f39c12; + animation: pulse 1.6s ease-in-out infinite; +} +.live-clock { + font: 500 11px var(--font-mono-local); + letter-spacing: 0.14em; + color: #b1aca1; + white-space: nowrap; +} +.metrics-row { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; + margin-bottom: 12px; +} +.panel { + position: relative; + z-index: 1; + background: rgba(12, 13, 13, 0.75); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 3px; + overflow: hidden; + animation: panel-in 0.5s ease both; +} +.panel-head { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, 0.025); +} +.panel-title { + font: 600 9px var(--font-mono-local); + letter-spacing: 0.2em; + color: #8b8a83; +} +.panel-head-right { + display: flex; + align-items: center; + gap: 12px; +} +.panel-meta { + font: 8.5px var(--font-mono-local); + letter-spacing: 0.12em; + color: #4c4c47; +} +.panel-menu { + display: inline-flex; + gap: 3px; +} +.panel-menu i { + width: 3px; + height: 3px; + border-radius: 50%; + background: #4a4a45; + display: inline-block; +} +.panel-body { + padding: 14px; +} +.metric-panel { + min-width: 0; +} +.metric-panel .panel-body { + padding: 16px 14px 14px; +} +.metric-rule { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; +} +.metric-rule-gold { + background: linear-gradient(90deg, rgba(185, 154, 98, 0.9), rgba(185, 154, 98, 0.15)); +} +.metric-rule-red { + background: linear-gradient(90deg, rgba(231, 76, 60, 0.9), rgba(231, 76, 60, 0.15)); +} +.metric-label { + font: 600 9px var(--font-mono-local); + letter-spacing: 0.18em; + color: #8b8a83; + margin-bottom: 10px; +} +.metric-value { + font: 600 clamp(22px, 2.6vw, 34px)/1.1 var(--font-mono-local); + color: #f2ede2; + letter-spacing: -0.03em; + white-space: nowrap; +} +.metric-value-danger { + color: #ff6a5b; +} +.metric-sub { + margin-top: 8px; + font: 8.5px var(--font-mono-local); + letter-spacing: 0.1em; + color: #5a5952; +} +.charts-grid { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-bottom: 12px; +} +.chart-wrap { + position: relative; + height: 200px; + padding: 6px 4px 2px; +} +.gauge-wrap { + position: relative; + padding-top: 20px; + height: 170px; +} +.gauge-center { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + pointer-events: none; + transform: translateY(20px); +} +.gauge-center span { + font: 600 34px/1 var(--font-mono-local); + color: #ff6a5b; +} +.gauge-center small { + margin-top: 6px; + font: 8.5px var(--font-mono-local); + letter-spacing: 0.16em; + color: #5a5952; +} +.dash-note { + position: relative; + z-index: 1; + margin: 0 0 12px; + padding: 10px 14px; + font: 9px/1.7 var(--font-mono-local); + letter-spacing: 0.12em; + color: #8b8a83; + background: rgba(185, 154, 98, 0.045); + border: 1px solid rgba(185, 154, 98, 0.22); + border-left: 3px solid rgba(185, 154, 98, 0.7); + border-radius: 3px; +} +.dash-note b { + color: #e9e4d9; + font-weight: 600; +} +.bottom-row { + display: grid; + grid-template-columns: 1.2fr 1fr 1fr; + gap: 12px; +} +.bottom-row .panel { + display: flex; + flex-direction: column; +} +.log-list { + font: 10px/1.7 var(--font-mono-local); + max-height: 280px; + overflow-y: auto; +} +.timeline-list { + font: 10px/1.7 var(--font-mono-local); + max-height: 280px; + overflow-y: auto; + padding: 4px 6px 4px 8px; +} +.details-table { + width: 100%; + border-collapse: collapse; +} +.details-table td { + padding: 7px 4px; + border-bottom: 1px dashed rgba(255, 255, 255, 0.05); + font-size: 10px; + vertical-align: top; + font-family: var(--font-mono-local); +} +.details-table tr:last-child td { + border-bottom: none; +} +.details-key { + color: #5a5952; + letter-spacing: 0.14em; + font-size: 8.5px; + width: 38%; + white-space: nowrap; +} +.details-value { + color: #ddd8cd; + word-break: break-word; +} +.details-value-gold { + color: var(--gold); +} +.details-value-danger { + color: #ff6a5b; +} +.dash-footer { + position: relative; + z-index: 1; + margin-top: 16px; + padding-top: 14px; + border-top: 1px solid #292a27; +} +.dash-footer-inner { + display: flex; + flex-wrap: wrap; + gap: 10px 18px; + justify-content: center; + font: 9px var(--font-mono-local); + letter-spacing: 0.14em; + color: #55554f; +} +@keyframes panel-in { + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.35; + } +} +.panel-stagger-1 { + animation-delay: 0.04s; +} +.panel-stagger-2 { + animation-delay: 0.1s; +} +.panel-stagger-3 { + animation-delay: 0.16s; +} +.panel-stagger-4 { + animation-delay: 0.22s; +} +@media (max-width: 880px) { + .metrics-row { + grid-template-columns: repeat(2, 1fr); + } + .charts-grid { + grid-template-columns: 1fr; + } + .bottom-row { + grid-template-columns: 1fr; + } + .log-list, + .timeline-list { + max-height: 200px; + } +} +@media (max-width: 520px) { + .metrics-row { + grid-template-columns: 1fr; + } + .dash-header { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + .dash-header-left { + flex-wrap: wrap; + gap: 8px; + } + .dash-header-right { + width: 100%; + justify-content: space-between; + } + .chart-wrap { + height: 170px; + } + .panel-head-right .panel-meta { + display: none; + } +} +@media (prefers-reduced-motion: reduce) { + .panel, + .badge-dot, + .timeline-dot-danger { + animation: none; + } +}